@questpie/admin 1.1.1 → 2.0.0

package/dist/client/views/common/global-search.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"global-search.mjs","names":["items: SearchItem[]"],"sources":["../../../../src/client/views/common/global-search.tsx"],"sourcesContent":["/**\n * Global Search\n *\n * Fast navigation to collections, globals, quick actions, AND actual records.\n * Uses ResponsiveDialog for desktop (Dialog) and mobile (fullscreen Drawer).\n *\n * Features:\n * - Navigation items: Collections, globals, create actions (client-side filter)\n * - Record search: Full-text search across ALL collections (server-side)\n * - Keyboard navigation: ↑↓ arrows, Enter to select, Esc to close\n * - Highlights: Shows search term highlighted in record titles\n */\n\nimport { Icon } from \"@iconify/react\";\nimport type * as React from \"react\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport type { ComponentReference } from \"#questpie/admin/server\";\nimport { resolveIconElement } from \"../../components/component-renderer\";\nimport { Kbd } from \"../../components/ui/kbd\";\nimport {\n\tResponsiveDialog,\n\tResponsiveDialogContent,\n} from \"../../components/ui/responsive-dialog\";\nimport { useAdminConfig } from \"../../hooks/use-admin-config\";\nimport { useDebouncedValue, useGlobalSearch } from \"../../hooks/use-search\";\nimport { useResolveText, useTranslation } from \"../../i18n/hooks\";\nimport { cn } from \"../../lib/utils\";\nimport { selectBasePath, useAdminStore } from \"../../runtime\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\ninterface SearchItem {\n\tid: string;\n\ttype: \"collection\" | \"global\" | \"action\" | \"record\";\n\tlabel: string;\n\tsublabel?: string;\n\thref: string;\n\ticon?:\n\t\t| ComponentReference\n\t\t| React.ComponentType<{ className?: string }>\n\t\t| string;\n\tkeywords?: string[];\n\thighlights?: { title?: string };\n}\n\nexport interface GlobalSearchProps {\n\tisOpen: boolean;\n\tonClose: () => void;\n\tnavigate: (path: string) => void;\n\tbasePath?: string;\n}\n\n// ============================================================================\n// Default Icon Names (for resolveIconElement)\n// ============================================================================\n\nconst DEFAULT_FOLDER_ICON = \"ph:folder\";\nconst DEFAULT_GEAR_ICON = \"ph:gear\";\nconst DEFAULT_PLUS_ICON = \"ph:plus\";\nconst DEFAULT_FILE_ICON = \"ph:file\";\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\n/**\n * Extract typed props from server config entries (collections/globals).\n * Server config entries come as plain objects without strict typing.\n */\nfunction getConfigProps(config: unknown) {\n\tconst c = config as Record<string, any>;\n\treturn {\n\t\tlabel: c?.label as string | undefined,\n\t\ticon: c?.icon as ComponentReference | undefined,\n\t\thidden: c?.hidden as boolean | undefined,\n\t};\n}\n\n/**\n * Simple fuzzy search - matches if query words appear anywhere in text\n */\nfunction fuzzyMatch(text: string, query: string): boolean {\n\tconst textLower = text.toLowerCase();\n\tconst queryWords = query.toLowerCase().split(/\\s+/).filter(Boolean);\n\n\treturn queryWords.every((word) => textLower.includes(word));\n}\n\n/**\n * Search and filter items based on query\n */\nfunction filterItems(items: SearchItem[], query: string): SearchItem[] {\n\tif (!query.trim()) return items;\n\n\treturn items.filter((item) => {\n\t\t// Match against label\n\t\tif (fuzzyMatch(item.label, query)) return true;\n\n\t\t// Match against keywords\n\t\tif (item.keywords?.some((kw) => fuzzyMatch(kw, query))) return true;\n\n\t\treturn false;\n\t});\n}\n\n// ============================================================================\n// Search Group Component\n// ============================================================================\n\ninterface SearchGroupProps {\n\ttitle: string;\n\titems: SearchItem[];\n\tselectedIndex: number;\n\tstartIndex: number;\n\tonSelect: (item: SearchItem) => void;\n\tonHover: (index: number) => void;\n}\n\nfunction SearchGroup({\n\ttitle,\n\titems,\n\tselectedIndex,\n\tstartIndex,\n\tonSelect,\n\tonHover,\n}: SearchGroupProps) {\n\tconst resolveText = useResolveText();\n\n\tif (items.length === 0) return null;\n\n\treturn (\n\t\t<div className=\"mb-4 last:mb-0\">\n\t\t\t<h3 className=\"mb-2 px-2 font-mono text-[10px] font-black uppercase tracking-[0.2em] text-muted-foreground\">\n\t\t\t\t{resolveText(title)}\n\t\t\t</h3>\n\t\t\t<div className=\"space-y-0.5\">\n\t\t\t\t{items.map((item, idx) => {\n\t\t\t\t\tconst globalIndex = startIndex + idx;\n\t\t\t\t\tconst isSelected = globalIndex === selectedIndex;\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tonClick={() => onSelect(item)}\n\t\t\t\t\t\t\tonMouseEnter={() => onHover(globalIndex)}\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"flex w-full items-center gap-3 px-3 py-2.5 text-sm outline-none transition-colors rounded-md\",\n\t\t\t\t\t\t\t\tisSelected\n\t\t\t\t\t\t\t\t\t? \"bg-accent text-accent-foreground\"\n\t\t\t\t\t\t\t\t\t: \"hover:bg-accent/50 hover:text-accent-foreground\",\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{item.icon && (\n\t\t\t\t\t\t\t\t<span className=\"h-4 w-4 text-muted-foreground shrink-0 flex items-center justify-center\">\n\t\t\t\t\t\t\t\t\t{resolveIconElement(item.icon, { className: \"h-4 w-4\" })}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<div className=\"flex flex-col items-start min-w-0\">\n\t\t\t\t\t\t\t\t{item.highlights?.title ? (\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\tclassName=\"truncate\"\n\t\t\t\t\t\t\t\t\t\t// biome-ignore lint/security/noDangerouslySetInnerHtml: highlights from server\n\t\t\t\t\t\t\t\t\t\tdangerouslySetInnerHTML={{ __html: item.highlights.title }}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<span className=\"truncate\">{resolveText(item.label)}</span>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t{item.sublabel && (\n\t\t\t\t\t\t\t\t\t<span className=\"text-xs text-muted-foreground truncate\">\n\t\t\t\t\t\t\t\t\t\t{item.sublabel}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\n// ============================================================================\n// Main Component\n// ============================================================================\n\nexport function GlobalSearch({\n\tisOpen,\n\tonClose,\n\tnavigate,\n\tbasePath: basePathProp,\n}: GlobalSearchProps) {\n\tconst { t } = useTranslation();\n\tconst resolveText = useResolveText();\n\n\t// Get admin config from server\n\tconst { data: serverConfig } = useAdminConfig();\n\tconst storeBasePath = useAdminStore(selectBasePath);\n\tconst basePath = basePathProp ?? storeBasePath ?? \"/admin\";\n\n\t// Search state\n\tconst [query, setQuery] = useState(\"\");\n\tconst [selectedIndex, setSelectedIndex] = useState(0);\n\tconst inputRef = useRef<HTMLInputElement>(null);\n\n\t// Debounce query for record search (300ms)\n\tconst debouncedQuery = useDebouncedValue(query, 300);\n\n\t// Fetch records from search API\n\tconst { data: searchResults, isLoading: isSearching } = useGlobalSearch({\n\t\tquery: debouncedQuery,\n\t\tlimit: 10,\n\t\tenabled: debouncedQuery.trim().length >= 2,\n\t});\n\n\t// Build navigation items from server config\n\t// Note: Server already filters by access rules, we only need to filter by hidden flag\n\tconst navItems = useMemo(() => {\n\t\tconst items: SearchItem[] = [];\n\t\tconst collections = serverConfig?.collections ?? {};\n\t\tconst globals = serverConfig?.globals ?? {};\n\n\t\t// Add visible collections (not hidden in admin)\n\t\tfor (const [name, config] of Object.entries(collections)) {\n\t\t\tconst { label: rawLabel, icon, hidden } = getConfigProps(config);\n\t\t\t// Skip hidden collections\n\t\t\tif (hidden) continue;\n\n\t\t\tconst label = resolveText(rawLabel, name);\n\t\t\titems.push({\n\t\t\t\tid: `col-${name}`,\n\t\t\t\ttype: \"collection\",\n\t\t\t\tlabel,\n\t\t\t\thref: `${basePath}/collections/${name}`,\n\t\t\t\ticon: icon ?? DEFAULT_FOLDER_ICON,\n\t\t\t\tkeywords: [name, \"collection\", \"list\"],\n\t\t\t});\n\t\t}\n\n\t\t// Add visible globals (not hidden in admin)\n\t\tfor (const [name, config] of Object.entries(globals)) {\n\t\t\tconst { label: rawLabel, icon, hidden } = getConfigProps(config);\n\t\t\t// Skip hidden globals\n\t\t\tif (hidden) continue;\n\n\t\t\tconst label = resolveText(rawLabel, name);\n\t\t\titems.push({\n\t\t\t\tid: `glob-${name}`,\n\t\t\t\ttype: \"global\",\n\t\t\t\tlabel,\n\t\t\t\thref: `${basePath}/globals/${name}`,\n\t\t\t\ticon: icon ?? DEFAULT_GEAR_ICON,\n\t\t\t\tkeywords: [name, \"global\", \"settings\", \"config\"],\n\t\t\t});\n\t\t}\n\n\t\t// Add quick actions (create new) only for visible collections\n\t\tfor (const [name, config] of Object.entries(collections)) {\n\t\t\tconst {\n\t\t\t\tlabel: rawLabel,\n\t\t\t\ticon: collectionIcon,\n\t\t\t\thidden,\n\t\t\t} = getConfigProps(config);\n\t\t\t// Skip hidden collections\n\t\t\tif (hidden) continue;\n\n\t\t\tconst label = resolveText(rawLabel, name);\n\t\t\titems.push({\n\t\t\t\tid: `action-create-${name}`,\n\t\t\t\ttype: \"action\",\n\t\t\t\tlabel: t(\"globalSearch.createNew\", { name: label }),\n\t\t\t\thref: `${basePath}/collections/${name}/create`,\n\t\t\t\ticon: collectionIcon ?? DEFAULT_PLUS_ICON,\n\t\t\t\tkeywords: [\"create\", \"new\", \"add\", name],\n\t\t\t});\n\t\t}\n\n\t\treturn items;\n\t}, [serverConfig, basePath, resolveText, t]);\n\n\t// Filter navigation items based on query (client-side)\n\tconst filteredNavItems = useMemo(\n\t\t() => filterItems(navItems, query),\n\t\t[navItems, query],\n\t);\n\n\t// Convert search results to SearchItem format\n\tconst recordItems = useMemo(() => {\n\t\tif (!searchResults?.docs) return [];\n\n\t\tconst collections = serverConfig?.collections ?? {};\n\n\t\treturn searchResults.docs.map((doc): SearchItem => {\n\t\t\tconst collectionName = doc._collection;\n\t\t\tconst collectionConfig = collections[collectionName];\n\t\t\tconst { label: rawLabel, icon: configIcon } =\n\t\t\t\tgetConfigProps(collectionConfig);\n\t\t\tconst collectionLabel = resolveText(rawLabel, collectionName);\n\t\t\tconst icon = configIcon ?? DEFAULT_FILE_ICON;\n\n\t\t\treturn {\n\t\t\t\tid: `record-${collectionName}-${doc.id}`,\n\t\t\t\ttype: \"record\",\n\t\t\t\tlabel: doc._search?.indexedTitle || doc.id,\n\t\t\t\tsublabel: collectionLabel,\n\t\t\t\thref: `${basePath}/collections/${collectionName}/${doc.id}`,\n\t\t\t\ticon,\n\t\t\t\thighlights: doc._search?.highlights,\n\t\t\t};\n\t\t});\n\t}, [searchResults, serverConfig, basePath, resolveText]);\n\n\t// Group navigation items by type\n\tconst groupedNavItems = useMemo(() => {\n\t\treturn {\n\t\t\tcollections: filteredNavItems.filter((i) => i.type === \"collection\"),\n\t\t\tglobals: filteredNavItems.filter((i) => i.type === \"global\"),\n\t\t\tactions: filteredNavItems.filter((i) => i.type === \"action\"),\n\t\t};\n\t}, [filteredNavItems]);\n\n\t// Calculate total count and indices\n\tconst allItems = useMemo(() => {\n\t\treturn [\n\t\t\t...groupedNavItems.collections,\n\t\t\t...groupedNavItems.globals,\n\t\t\t...groupedNavItems.actions,\n\t\t\t...recordItems,\n\t\t];\n\t}, [groupedNavItems, recordItems]);\n\n\tconst totalCount = allItems.length;\n\tconst collectionsStartIndex = 0;\n\tconst globalsStartIndex = groupedNavItems.collections.length;\n\tconst actionsStartIndex =\n\t\tgroupedNavItems.collections.length + groupedNavItems.globals.length;\n\tconst recordsStartIndex =\n\t\tgroupedNavItems.collections.length +\n\t\tgroupedNavItems.globals.length +\n\t\tgroupedNavItems.actions.length;\n\n\t// Reset selected index when query changes\n\tuseEffect(() => {\n\t\tsetSelectedIndex(0);\n\t}, [query]);\n\n\t// Reset state when dialog opens\n\tuseEffect(() => {\n\t\tif (isOpen) {\n\t\t\tsetQuery(\"\");\n\t\t\tsetSelectedIndex(0);\n\t\t\t// Focus input after a small delay to ensure dialog is rendered\n\t\t\tsetTimeout(() => inputRef.current?.focus(), 50);\n\t\t}\n\t}, [isOpen]);\n\n\t// Handle selection\n\tconst handleSelect = useCallback(\n\t\t(item: SearchItem) => {\n\t\t\tnavigate(item.href);\n\t\t\tonClose();\n\t\t},\n\t\t[navigate, onClose],\n\t);\n\n\t// Handle keyboard navigation\n\tconst handleKeyDown = useCallback(\n\t\t(e: React.KeyboardEvent) => {\n\t\t\tswitch (e.key) {\n\t\t\t\tcase \"ArrowDown\":\n\t\t\t\t\te.preventDefault();\n\t\t\t\t\tsetSelectedIndex((i) => Math.min(i + 1, totalCount - 1));\n\t\t\t\t\tbreak;\n\t\t\t\tcase \"ArrowUp\":\n\t\t\t\t\te.preventDefault();\n\t\t\t\t\tsetSelectedIndex((i) => Math.max(i - 1, 0));\n\t\t\t\t\tbreak;\n\t\t\t\tcase \"Enter\":\n\t\t\t\t\te.preventDefault();\n\t\t\t\t\tif (allItems[selectedIndex]) {\n\t\t\t\t\t\thandleSelect(allItems[selectedIndex]);\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t\tcase \"Escape\":\n\t\t\t\t\te.preventDefault();\n\t\t\t\t\tonClose();\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t},\n\t\t[allItems, selectedIndex, totalCount, handleSelect, onClose],\n\t);\n\n\tconst handleHover = useCallback((index: number) => {\n\t\tsetSelectedIndex(index);\n\t}, []);\n\n\tconst hasNavResults =\n\t\tgroupedNavItems.collections.length > 0 ||\n\t\tgroupedNavItems.globals.length > 0 ||\n\t\tgroupedNavItems.actions.length > 0;\n\n\tconst hasRecordResults = recordItems.length > 0;\n\tconst hasResults = hasNavResults || hasRecordResults;\n\n\treturn (\n\t\t<ResponsiveDialog open={isOpen} onOpenChange={(open) => !open && onClose()}>\n\t\t\t<ResponsiveDialogContent className=\"p-0 gap-0 max-w-2xl\">\n\t\t\t\t{/* Search Input */}\n\t\t\t\t<div className=\"flex items-center border-b px-3\">\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon=\"ph:magnifying-glass\"\n\t\t\t\t\t\tclassName=\"mr-2 h-5 w-5 text-muted-foreground shrink-0\"\n\t\t\t\t\t/>\n\t\t\t\t\t<input\n\t\t\t\t\t\tref={inputRef}\n\t\t\t\t\t\tclassName=\"flex h-14 w-full rounded-none bg-transparent py-3 text-base outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\"\n\t\t\t\t\t\tplaceholder={t(\"globalSearch.placeholder\")}\n\t\t\t\t\t\tvalue={query}\n\t\t\t\t\t\tonChange={(e) => setQuery(e.target.value)}\n\t\t\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t\t\tautoFocus\n\t\t\t\t\t/>\n\t\t\t\t\t<div className=\"flex items-center gap-1 shrink-0\">\n\t\t\t\t\t\t{isSearching && (\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\ticon=\"ph:spinner\"\n\t\t\t\t\t\t\t\tclassName=\"h-4 w-4 animate-spin text-muted-foreground\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<Kbd>ESC</Kbd>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t{/* Results */}\n\t\t\t\t<div className=\"max-h-[60vh] overflow-y-auto p-2\">\n\t\t\t\t\t{hasResults ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{/* Navigation Groups */}\n\t\t\t\t\t\t\t<SearchGroup\n\t\t\t\t\t\t\t\ttitle={t(\"globalSearch.collections\")}\n\t\t\t\t\t\t\t\titems={groupedNavItems.collections}\n\t\t\t\t\t\t\t\tselectedIndex={selectedIndex}\n\t\t\t\t\t\t\t\tstartIndex={collectionsStartIndex}\n\t\t\t\t\t\t\t\tonSelect={handleSelect}\n\t\t\t\t\t\t\t\tonHover={handleHover}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<SearchGroup\n\t\t\t\t\t\t\t\ttitle={t(\"globalSearch.globals\")}\n\t\t\t\t\t\t\t\titems={groupedNavItems.globals}\n\t\t\t\t\t\t\t\tselectedIndex={selectedIndex}\n\t\t\t\t\t\t\t\tstartIndex={globalsStartIndex}\n\t\t\t\t\t\t\t\tonSelect={handleSelect}\n\t\t\t\t\t\t\t\tonHover={handleHover}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<SearchGroup\n\t\t\t\t\t\t\t\ttitle={t(\"globalSearch.quickActions\")}\n\t\t\t\t\t\t\t\titems={groupedNavItems.actions}\n\t\t\t\t\t\t\t\tselectedIndex={selectedIndex}\n\t\t\t\t\t\t\t\tstartIndex={actionsStartIndex}\n\t\t\t\t\t\t\t\tonSelect={handleSelect}\n\t\t\t\t\t\t\t\tonHover={handleHover}\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t{/* Record Results */}\n\t\t\t\t\t\t\t{hasRecordResults && (\n\t\t\t\t\t\t\t\t<SearchGroup\n\t\t\t\t\t\t\t\t\ttitle={t(\"globalSearch.records\")}\n\t\t\t\t\t\t\t\t\titems={recordItems}\n\t\t\t\t\t\t\t\t\tselectedIndex={selectedIndex}\n\t\t\t\t\t\t\t\t\tstartIndex={recordsStartIndex}\n\t\t\t\t\t\t\t\t\tonSelect={handleSelect}\n\t\t\t\t\t\t\t\t\tonHover={handleHover}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<div className=\"py-8 text-center text-sm text-muted-foreground\">\n\t\t\t\t\t\t\t{isSearching ? (\n\t\t\t\t\t\t\t\t<div className=\"flex items-center justify-center gap-2\">\n\t\t\t\t\t\t\t\t\t<Icon icon=\"ph:spinner\" className=\"h-4 w-4 animate-spin\" />\n\t\t\t\t\t\t\t\t\t<span>{t(\"globalSearch.searching\")}</span>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\tt(\"globalSearch.noResults\")\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t{/* Footer with keyboard hints */}\n\t\t\t\t<div className=\"border-t px-3 py-2 flex items-center justify-end gap-4 text-xs text-muted-foreground\">\n\t\t\t\t\t<span className=\"flex items-center gap-1\">\n\t\t\t\t\t\t<Kbd className=\"text-[10px] px-1\">↑</Kbd>\n\t\t\t\t\t\t<Kbd className=\"text-[10px] px-1\">↓</Kbd>\n\t\t\t\t\t\t<span>{t(\"globalSearch.navigate\")}</span>\n\t\t\t\t\t</span>\n\t\t\t\t\t<span className=\"flex items-center gap-1\">\n\t\t\t\t\t\t<Kbd className=\"text-[10px] px-1.5\">↵</Kbd>\n\t\t\t\t\t\t<span>{t(\"globalSearch.select\")}</span>\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t</ResponsiveDialogContent>\n\t\t</ResponsiveDialog>\n\t);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA0DA,MAAM,sBAAsB;AAC5B,MAAM,oBAAoB;AAC1B,MAAM,oBAAoB;AAC1B,MAAM,oBAAoB;;;;;AAU1B,SAAS,eAAe,QAAiB;CACxC,MAAM,IAAI;AACV,QAAO;EACN,OAAO,GAAG;EACV,MAAM,GAAG;EACT,QAAQ,GAAG;EACX;;;;;AAMF,SAAS,WAAW,MAAc,OAAwB;CACzD,MAAM,YAAY,KAAK,aAAa;AAGpC,QAFmB,MAAM,aAAa,CAAC,MAAM,MAAM,CAAC,OAAO,QAAQ,CAEjD,OAAO,SAAS,UAAU,SAAS,KAAK,CAAC;;;;;AAM5D,SAAS,YAAY,OAAqB,OAA6B;AACtE,KAAI,CAAC,MAAM,MAAM,CAAE,QAAO;AAE1B,QAAO,MAAM,QAAQ,SAAS;AAE7B,MAAI,WAAW,KAAK,OAAO,MAAM,CAAE,QAAO;AAG1C,MAAI,KAAK,UAAU,MAAM,OAAO,WAAW,IAAI,MAAM,CAAC,CAAE,QAAO;AAE/D,SAAO;GACN;;AAgBH,SAAS,YAAY,EACpB,OACA,OACA,eACA,YACA,UACA,WACoB;CACpB,MAAM,cAAc,gBAAgB;AAEpC,KAAI,MAAM,WAAW,EAAG,QAAO;AAE/B,QACC,qBAAC;EAAI,WAAU;aACd,oBAAC;GAAG,WAAU;aACZ,YAAY,MAAM;IACf,EACL,oBAAC;GAAI,WAAU;aACb,MAAM,KAAK,MAAM,QAAQ;IACzB,MAAM,cAAc,aAAa;AAGjC,WACC,qBAAC;KAEA,MAAK;KACL,eAAe,SAAS,KAAK;KAC7B,oBAAoB,QAAQ,YAAY;KACxC,WAAW,GACV,gGATgB,gBAAgB,gBAW7B,qCACA,kDACH;gBAEA,KAAK,QACL,oBAAC;MAAK,WAAU;gBACd,mBAAmB,KAAK,MAAM,EAAE,WAAW,WAAW,CAAC;OAClD,EAER,qBAAC;MAAI,WAAU;iBACb,KAAK,YAAY,QACjB,oBAAC;OACA,WAAU;OAEV,yBAAyB,EAAE,QAAQ,KAAK,WAAW,OAAO;QACzD,GAEF,oBAAC;OAAK,WAAU;iBAAY,YAAY,KAAK,MAAM;QAAQ,EAE3D,KAAK,YACL,oBAAC;OAAK,WAAU;iBACd,KAAK;QACA;OAEH;OA/BD,KAAK,GAgCF;KAET;IACG;GACD;;AAQR,SAAgB,aAAa,EAC5B,QACA,SACA,UACA,UAAU,gBACW;CACrB,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,cAAc,gBAAgB;CAGpC,MAAM,EAAE,MAAM,iBAAiB,gBAAgB;CAC/C,MAAM,gBAAgB,cAAc,eAAe;CACnD,MAAM,WAAW,gBAAgB,iBAAiB;CAGlD,MAAM,CAAC,OAAO,YAAY,SAAS,GAAG;CACtC,MAAM,CAAC,eAAe,oBAAoB,SAAS,EAAE;CACrD,MAAM,WAAW,OAAyB,KAAK;CAG/C,MAAM,iBAAiB,kBAAkB,OAAO,IAAI;CAGpD,MAAM,EAAE,MAAM,eAAe,WAAW,gBAAgB,gBAAgB;EACvE,OAAO;EACP,OAAO;EACP,SAAS,eAAe,MAAM,CAAC,UAAU;EACzC,CAAC;CAIF,MAAM,WAAW,cAAc;EAC9B,MAAMA,QAAsB,EAAE;EAC9B,MAAM,cAAc,cAAc,eAAe,EAAE;EACnD,MAAM,UAAU,cAAc,WAAW,EAAE;AAG3C,OAAK,MAAM,CAAC,MAAM,WAAW,OAAO,QAAQ,YAAY,EAAE;GACzD,MAAM,EAAE,OAAO,UAAU,MAAM,WAAW,eAAe,OAAO;AAEhE,OAAI,OAAQ;GAEZ,MAAM,QAAQ,YAAY,UAAU,KAAK;AACzC,SAAM,KAAK;IACV,IAAI,OAAO;IACX,MAAM;IACN;IACA,MAAM,GAAG,SAAS,eAAe;IACjC,MAAM,QAAQ;IACd,UAAU;KAAC;KAAM;KAAc;KAAO;IACtC,CAAC;;AAIH,OAAK,MAAM,CAAC,MAAM,WAAW,OAAO,QAAQ,QAAQ,EAAE;GACrD,MAAM,EAAE,OAAO,UAAU,MAAM,WAAW,eAAe,OAAO;AAEhE,OAAI,OAAQ;GAEZ,MAAM,QAAQ,YAAY,UAAU,KAAK;AACzC,SAAM,KAAK;IACV,IAAI,QAAQ;IACZ,MAAM;IACN;IACA,MAAM,GAAG,SAAS,WAAW;IAC7B,MAAM,QAAQ;IACd,UAAU;KAAC;KAAM;KAAU;KAAY;KAAS;IAChD,CAAC;;AAIH,OAAK,MAAM,CAAC,MAAM,WAAW,OAAO,QAAQ,YAAY,EAAE;GACzD,MAAM,EACL,OAAO,UACP,MAAM,gBACN,WACG,eAAe,OAAO;AAE1B,OAAI,OAAQ;GAEZ,MAAM,QAAQ,YAAY,UAAU,KAAK;AACzC,SAAM,KAAK;IACV,IAAI,iBAAiB;IACrB,MAAM;IACN,OAAO,EAAE,0BAA0B,EAAE,MAAM,OAAO,CAAC;IACnD,MAAM,GAAG,SAAS,eAAe,KAAK;IACtC,MAAM,kBAAkB;IACxB,UAAU;KAAC;KAAU;KAAO;KAAO;KAAK;IACxC,CAAC;;AAGH,SAAO;IACL;EAAC;EAAc;EAAU;EAAa;EAAE,CAAC;CAG5C,MAAM,mBAAmB,cAClB,YAAY,UAAU,MAAM,EAClC,CAAC,UAAU,MAAM,CACjB;CAGD,MAAM,cAAc,cAAc;AACjC,MAAI,CAAC,eAAe,KAAM,QAAO,EAAE;EAEnC,MAAM,cAAc,cAAc,eAAe,EAAE;AAEnD,SAAO,cAAc,KAAK,KAAK,QAAoB;GAClD,MAAM,iBAAiB,IAAI;GAC3B,MAAM,mBAAmB,YAAY;GACrC,MAAM,EAAE,OAAO,UAAU,MAAM,eAC9B,eAAe,iBAAiB;GACjC,MAAM,kBAAkB,YAAY,UAAU,eAAe;GAC7D,MAAM,OAAO,cAAc;AAE3B,UAAO;IACN,IAAI,UAAU,eAAe,GAAG,IAAI;IACpC,MAAM;IACN,OAAO,IAAI,SAAS,gBAAgB,IAAI;IACxC,UAAU;IACV,MAAM,GAAG,SAAS,eAAe,eAAe,GAAG,IAAI;IACvD;IACA,YAAY,IAAI,SAAS;IACzB;IACA;IACA;EAAC;EAAe;EAAc;EAAU;EAAY,CAAC;CAGxD,MAAM,kBAAkB,cAAc;AACrC,SAAO;GACN,aAAa,iBAAiB,QAAQ,MAAM,EAAE,SAAS,aAAa;GACpE,SAAS,iBAAiB,QAAQ,MAAM,EAAE,SAAS,SAAS;GAC5D,SAAS,iBAAiB,QAAQ,MAAM,EAAE,SAAS,SAAS;GAC5D;IACC,CAAC,iBAAiB,CAAC;CAGtB,MAAM,WAAW,cAAc;AAC9B,SAAO;GACN,GAAG,gBAAgB;GACnB,GAAG,gBAAgB;GACnB,GAAG,gBAAgB;GACnB,GAAG;GACH;IACC,CAAC,iBAAiB,YAAY,CAAC;CAElC,MAAM,aAAa,SAAS;CAC5B,MAAM,wBAAwB;CAC9B,MAAM,oBAAoB,gBAAgB,YAAY;CACtD,MAAM,oBACL,gBAAgB,YAAY,SAAS,gBAAgB,QAAQ;CAC9D,MAAM,oBACL,gBAAgB,YAAY,SAC5B,gBAAgB,QAAQ,SACxB,gBAAgB,QAAQ;AAGzB,iBAAgB;AACf,mBAAiB,EAAE;IACjB,CAAC,MAAM,CAAC;AAGX,iBAAgB;AACf,MAAI,QAAQ;AACX,YAAS,GAAG;AACZ,oBAAiB,EAAE;AAEnB,oBAAiB,SAAS,SAAS,OAAO,EAAE,GAAG;;IAE9C,CAAC,OAAO,CAAC;CAGZ,MAAM,eAAe,aACnB,SAAqB;AACrB,WAAS,KAAK,KAAK;AACnB,WAAS;IAEV,CAAC,UAAU,QAAQ,CACnB;CAGD,MAAM,gBAAgB,aACpB,MAA2B;AAC3B,UAAQ,EAAE,KAAV;GACC,KAAK;AACJ,MAAE,gBAAgB;AAClB,sBAAkB,MAAM,KAAK,IAAI,IAAI,GAAG,aAAa,EAAE,CAAC;AACxD;GACD,KAAK;AACJ,MAAE,gBAAgB;AAClB,sBAAkB,MAAM,KAAK,IAAI,IAAI,GAAG,EAAE,CAAC;AAC3C;GACD,KAAK;AACJ,MAAE,gBAAgB;AAClB,QAAI,SAAS,eACZ,cAAa,SAAS,eAAe;AAEtC;GACD,KAAK;AACJ,MAAE,gBAAgB;AAClB,aAAS;AACT;;IAGH;EAAC;EAAU;EAAe;EAAY;EAAc;EAAQ,CAC5D;CAED,MAAM,cAAc,aAAa,UAAkB;AAClD,mBAAiB,MAAM;IACrB,EAAE,CAAC;CAEN,MAAM,gBACL,gBAAgB,YAAY,SAAS,KACrC,gBAAgB,QAAQ,SAAS,KACjC,gBAAgB,QAAQ,SAAS;CAElC,MAAM,mBAAmB,YAAY,SAAS;CAC9C,MAAM,aAAa,iBAAiB;AAEpC,QACC,oBAAC;EAAiB,MAAM;EAAQ,eAAe,SAAS,CAAC,QAAQ,SAAS;YACzE,qBAAC;GAAwB,WAAU;;IAElC,qBAAC;KAAI,WAAU;;MACd,oBAAC;OACA,MAAK;OACL,WAAU;QACT;MACF,oBAAC;OACA,KAAK;OACL,WAAU;OACV,aAAa,EAAE,2BAA2B;OAC1C,OAAO;OACP,WAAW,MAAM,SAAS,EAAE,OAAO,MAAM;OACzC,WAAW;OACX;QACC;MACF,qBAAC;OAAI,WAAU;kBACb,eACA,oBAAC;QACA,MAAK;QACL,WAAU;SACT,EAEH,oBAAC,iBAAI,QAAS;QACT;;MACD;IAGN,oBAAC;KAAI,WAAU;eACb,aACA;MAEC,oBAAC;OACA,OAAO,EAAE,2BAA2B;OACpC,OAAO,gBAAgB;OACR;OACf,YAAY;OACZ,UAAU;OACV,SAAS;QACR;MACF,oBAAC;OACA,OAAO,EAAE,uBAAuB;OAChC,OAAO,gBAAgB;OACR;OACf,YAAY;OACZ,UAAU;OACV,SAAS;QACR;MACF,oBAAC;OACA,OAAO,EAAE,4BAA4B;OACrC,OAAO,gBAAgB;OACR;OACf,YAAY;OACZ,UAAU;OACV,SAAS;QACR;MAGD,oBACA,oBAAC;OACA,OAAO,EAAE,uBAAuB;OAChC,OAAO;OACQ;OACf,YAAY;OACZ,UAAU;OACV,SAAS;QACR;SAED,GAEH,oBAAC;MAAI,WAAU;gBACb,cACA,qBAAC;OAAI,WAAU;kBACd,oBAAC;QAAK,MAAK;QAAa,WAAU;SAAyB,EAC3D,oBAAC,oBAAM,EAAE,yBAAyB,GAAQ;QACrC,GAEN,EAAE,yBAAyB;OAEvB;MAEF;IAGN,qBAAC;KAAI,WAAU;gBACd,qBAAC;MAAK,WAAU;;OACf,oBAAC;QAAI,WAAU;kBAAmB;SAAO;OACzC,oBAAC;QAAI,WAAU;kBAAmB;SAAO;OACzC,oBAAC,oBAAM,EAAE,wBAAwB,GAAQ;;OACnC,EACP,qBAAC;MAAK,WAAU;iBACf,oBAAC;OAAI,WAAU;iBAAqB;QAAO,EAC3C,oBAAC,oBAAM,EAAE,sBAAsB,GAAQ;OACjC;MACF;;IACmB;GACR"}

package/dist/client/views/common/index.d.mts

@@ -0,0 +1 @@
+import "./global-search.mjs";

package/dist/client/views/dashboard/dashboard-grid.mjs

@@ -0,0 +1,385 @@
+import { useResolveText } from "../../i18n/hooks.mjs";
+import { cn } from "../../lib/utils.mjs";
+import { resolveIconElement } from "../../components/component-renderer.mjs";
+import { Button } from "../../components/ui/button.mjs";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../../components/ui/accordion.mjs";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../components/ui/tabs.mjs";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../components/ui/dropdown-menu.mjs";
+import { Card, CardContent, CardHeader, CardTitle } from "../../components/ui/card.mjs";
+import { DashboardWidget } from "./dashboard-widget.mjs";
+import { Icon } from "@iconify/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/views/dashboard/dashboard-grid.tsx
+/**
+* DashboardGrid Component
+*
+* Renders a grid of dashboard widgets based on configuration.
+* Supports:
+* - Responsive layouts with container queries
+* - Widget spanning
+* - Dashboard sections (grouped widgets)
+* - Dashboard tabs (tabbed widget groups)
+* - Recursive nesting of sections/tabs
+*/
+/**
+* Grid column classes for different column counts
+* Uses container queries (@container) for responsive behavior
+*/
+const gridClasses = {
+	1: "grid-cols-1",
+	2: "grid-cols-1 @xs:grid-cols-2",
+	3: "grid-cols-1 @xs:grid-cols-2 @md:grid-cols-3",
+	4: "grid-cols-1 @xs:grid-cols-2 @md:grid-cols-3 @lg:grid-cols-4",
+	5: "grid-cols-1 @xs:grid-cols-2 @sm:grid-cols-3 @md:grid-cols-4 @lg:grid-cols-5",
+	6: "grid-cols-1 @xs:grid-cols-2 @sm:grid-cols-3 @md:grid-cols-4 @lg:grid-cols-5 @xl:grid-cols-6",
+	12: "grid-cols-1 @xs:grid-cols-2 @sm:grid-cols-4 @md:grid-cols-6 @lg:grid-cols-12"
+};
+/**
+* Span classes for widget column spanning
+* - span:1 widgets can be 2x2 on @xs (half width each)
+* - span:2+ widgets are full width on mobile/tablet, then expand at larger breakpoints
+*/
+const spanClasses = {
+	1: "col-span-1",
+	2: "col-span-full @sm:col-span-2",
+	3: "col-span-full @sm:col-span-2 @md:col-span-3",
+	4: "col-span-full @sm:col-span-2 @md:col-span-3 @lg:col-span-4",
+	5: "col-span-full @sm:col-span-2 @md:col-span-3 @lg:col-span-5",
+	6: "col-span-full @sm:col-span-2 @md:col-span-3 @lg:col-span-6",
+	12: "col-span-full"
+};
+/**
+* Get grid columns class based on column count
+*/
+function getGridClass(columns) {
+	return gridClasses[columns] || gridClasses[4];
+}
+/**
+* Get column span class for a widget.
+* Returns responsive span classes that gracefully collapse on smaller screens.
+* For custom responsive behavior, use className prop directly.
+*/
+function getSpanClass(span) {
+	if (!span || span <= 1) return "col-span-1";
+	if (spanClasses[span]) return spanClasses[span];
+	if (span >= 7 && span <= 11) return `col-span-1 @xs:col-span-2 @md:col-span-3 @lg:col-span-${span}`;
+	return `col-span-${Math.min(span, 12)}`;
+}
+/**
+* Check if item is a widget config
+*/
+function isWidgetConfig(item) {
+	return typeof item === "object" && "type" in item && item.type !== "section" && item.type !== "tabs";
+}
+/**
+* Check if item is a section config
+*/
+function isSectionConfig(item) {
+	return typeof item === "object" && "type" in item && item.type === "section";
+}
+/**
+* Check if item is a tabs config
+*/
+function isTabsConfig(item) {
+	return typeof item === "object" && "type" in item && item.type === "tabs";
+}
+/**
+* Generate a unique key for a layout item
+*/
+function getLayoutItemKey(item, index) {
+	if (isWidgetConfig(item)) return `widget-${item.id || item.type}-${index}`;
+	if (isSectionConfig(item)) return `section-${index}`;
+	if (isTabsConfig(item)) return `tabs-${item.tabs.map((t) => t.id).join("-") || index}`;
+	return `item-${index}`;
+}
+function DashboardHeader({ title, description, actions, navigate, resolveText }) {
+	if (!title && !description && !actions?.length) return null;
+	const handleActionClick = (action) => {
+		if (action.onClick) action.onClick();
+		else if (action.href && navigate) navigate(action.href);
+	};
+	const primaryAction = actions?.find((a) => a.variant === "primary") || actions?.[0];
+	const secondaryActions = actions?.filter((a) => a !== primaryAction) || [];
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mb-8 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "min-w-0 flex-1",
+			children: [title && /* @__PURE__ */ jsx("h1", {
+				className: "text-2xl md:text-3xl font-extrabold tracking-tight",
+				children: title
+			}), description && /* @__PURE__ */ jsx("p", {
+				className: "mt-1 text-muted-foreground",
+				children: description
+			})]
+		}), actions && actions.length > 0 && /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2 shrink-0",
+			children: [
+				primaryAction && /* @__PURE__ */ jsxs(Button, {
+					variant: primaryAction.variant === "primary" ? "default" : primaryAction.variant || "default",
+					onClick: () => handleActionClick(primaryAction),
+					children: [resolveIconElement(primaryAction.icon, { "data-icon": "inline-start" }), resolveText(primaryAction.label)]
+				}, primaryAction.id),
+				secondaryActions.map((action) => {
+					const iconElement = resolveIconElement(action.icon, { "data-icon": "inline-start" });
+					const variant = action.variant || "default";
+					return /* @__PURE__ */ jsxs(Button, {
+						variant: variant === "primary" ? "default" : variant,
+						onClick: () => handleActionClick(action),
+						className: "hidden md:inline-flex",
+						children: [iconElement, resolveText(action.label)]
+					}, action.id);
+				}),
+				secondaryActions.length > 0 && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, { render: /* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					size: "icon",
+					className: "md:hidden",
+					children: /* @__PURE__ */ jsx(Icon, {
+						icon: "ph:dots-three-vertical",
+						className: "size-4"
+					})
+				}) }), /* @__PURE__ */ jsx(DropdownMenuContent, {
+					align: "end",
+					children: secondaryActions.map((action) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
+						onClick: () => handleActionClick(action),
+						children: [resolveIconElement(action.icon, { className: "size-4 mr-2" }), resolveText(action.label)]
+					}, action.id))
+				})] })
+			]
+		})]
+	});
+}
+function LayoutItemRenderer({ item, index, columns, basePath, navigate, widgetRegistry, resolveText, dashboardRealtime }) {
+	if (isWidgetConfig(item)) {
+		const spanClass = getSpanClass(item.span);
+		const widgetConfig = dashboardRealtime !== void 0 && item.realtime === void 0 ? {
+			...item,
+			realtime: dashboardRealtime
+		} : item;
+		return /* @__PURE__ */ jsx("div", {
+			className: cn("min-h-0 h-full", spanClass, item.className),
+			children: /* @__PURE__ */ jsx(DashboardWidget, {
+				config: widgetConfig,
+				basePath,
+				navigate,
+				widgetRegistry
+			})
+		});
+	}
+	if (isSectionConfig(item)) return /* @__PURE__ */ jsx(SectionRenderer, {
+		section: item,
+		basePath,
+		navigate,
+		widgetRegistry,
+		resolveText,
+		dashboardRealtime
+	}, `section-${index}`);
+	if (isTabsConfig(item)) return /* @__PURE__ */ jsx(TabsRenderer, {
+		tabs: item,
+		basePath,
+		navigate,
+		widgetRegistry,
+		resolveText,
+		dashboardRealtime
+	}, `tabs-${index}`);
+	return null;
+}
+function SectionRenderer({ section, basePath, navigate, widgetRegistry, resolveText, dashboardRealtime }) {
+	const { label, description, wrapper = "flat", defaultCollapsed = false, layout = "grid", columns = 4, gap, items, className } = section;
+	const sectionLabel = label ? resolveText(label) : void 0;
+	const sectionDescription = description ? resolveText(description) : void 0;
+	const itemsContent = /* @__PURE__ */ jsx("div", {
+		className: cn("@container", layout === "grid" && "grid gap-4 items-stretch", layout === "grid" && getGridClass(columns), layout === "stack" && "flex flex-col gap-4"),
+		style: gap ? { gap: `${gap * .25}rem` } : void 0,
+		children: items.map((item, index) => /* @__PURE__ */ jsx(LayoutItemRenderer, {
+			item,
+			index,
+			columns,
+			basePath,
+			navigate,
+			widgetRegistry,
+			resolveText,
+			dashboardRealtime
+		}, getLayoutItemKey(item, index)))
+	});
+	if (wrapper === "flat") return /* @__PURE__ */ jsxs("div", {
+		className: cn("col-span-full", className),
+		children: [(sectionLabel || sectionDescription) && /* @__PURE__ */ jsxs("div", {
+			className: "mb-4",
+			children: [sectionLabel && /* @__PURE__ */ jsx("h2", {
+				className: "text-lg font-semibold",
+				children: sectionLabel
+			}), sectionDescription && /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-muted-foreground mt-1",
+				children: sectionDescription
+			})]
+		}), itemsContent]
+	});
+	if (wrapper === "card") return /* @__PURE__ */ jsxs(Card, {
+		className: cn("col-span-full", className),
+		children: [(sectionLabel || sectionDescription) && /* @__PURE__ */ jsxs(CardHeader, { children: [sectionLabel && /* @__PURE__ */ jsx(CardTitle, { children: sectionLabel }), sectionDescription && /* @__PURE__ */ jsx("p", {
+			className: "text-sm text-muted-foreground",
+			children: sectionDescription
+		})] }), /* @__PURE__ */ jsx(CardContent, { children: itemsContent })]
+	});
+	if (wrapper === "collapsible") return /* @__PURE__ */ jsx(Accordion, {
+		defaultValue: defaultCollapsed ? [] : [0],
+		className: cn("col-span-full", className),
+		children: /* @__PURE__ */ jsxs(AccordionItem, {
+			className: "border-none",
+			children: [/* @__PURE__ */ jsx(AccordionTrigger, {
+				className: "hover:no-underline py-2",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "text-left",
+					children: [sectionLabel && /* @__PURE__ */ jsx("span", {
+						className: "text-lg font-semibold",
+						children: sectionLabel
+					}), sectionDescription && /* @__PURE__ */ jsx("p", {
+						className: "text-sm text-muted-foreground font-normal",
+						children: sectionDescription
+					})]
+				})
+			}), /* @__PURE__ */ jsx(AccordionContent, {
+				className: "pt-4",
+				children: itemsContent
+			})]
+		})
+	});
+	return itemsContent;
+}
+function TabsRenderer({ tabs, basePath, navigate, widgetRegistry, resolveText, dashboardRealtime }) {
+	const { tabs: tabConfigs, defaultTab, variant = "default" } = tabs;
+	return /* @__PURE__ */ jsxs(Tabs, {
+		defaultValue: defaultTab || tabConfigs[0]?.id,
+		className: "col-span-full",
+		children: [/* @__PURE__ */ jsx(TabsList, {
+			variant: variant === "line" ? "line" : "default",
+			className: "mb-4",
+			children: tabConfigs.map((tab) => /* @__PURE__ */ jsxs(TabsTrigger, {
+				value: tab.id,
+				children: [
+					resolveIconElement(tab.icon, { className: "h-4 w-4 mr-2" }),
+					resolveText(tab.label),
+					tab.badge !== void 0 && /* @__PURE__ */ jsx("span", {
+						className: "ml-2 rounded-full bg-muted px-2 py-0.5 text-xs",
+						children: tab.badge
+					})
+				]
+			}, tab.id))
+		}), tabConfigs.map((tab) => /* @__PURE__ */ jsx(TabsContent, {
+			value: tab.id,
+			children: /* @__PURE__ */ jsx(TabContentRenderer, {
+				tab,
+				basePath,
+				navigate,
+				widgetRegistry,
+				resolveText,
+				dashboardRealtime
+			})
+		}, tab.id))]
+	});
+}
+function TabContentRenderer({ tab, basePath, navigate, widgetRegistry, resolveText, dashboardRealtime }) {
+	const columns = 4;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("@container grid gap-4 items-stretch", getGridClass(columns)),
+		children: tab.items.map((item, index) => /* @__PURE__ */ jsx(LayoutItemRenderer, {
+			item,
+			index,
+			columns,
+			basePath,
+			navigate,
+			widgetRegistry,
+			resolveText,
+			dashboardRealtime
+		}, getLayoutItemKey(item, index)))
+	});
+}
+/**
+* DashboardGrid - Renders a configurable grid of dashboard widgets
+*
+* @example
+* ```tsx
+* const dashboardConfig: DashboardConfig = {
+*   title: "Dashboard",
+*   description: "Welcome to your admin dashboard",
+*   columns: 4,
+*   items: [
+*     { type: "stats", collection: "posts", label: "Total Posts", span: 1 },
+*     { type: "stats", collection: "users", label: "Total Users", span: 1 },
+*     {
+*       type: "section",
+*       label: "Analytics",
+*       wrapper: "card",
+*       items: [
+*         { type: "chart", collection: "posts", field: "createdAt", span: 2 },
+*       ]
+*     },
+*     {
+*       type: "tabs",
+*       tabs: [
+*         { id: "recent", label: "Recent", items: [...] },
+*         { id: "popular", label: "Popular", items: [...] },
+*       ]
+*     }
+*   ],
+* };
+*
+* <DashboardGrid config={dashboardConfig} basePath="/admin" navigate={navigate} />
+* ```
+*/
+function DashboardGrid({ config, basePath = "/admin", navigate, widgetRegistry, className }) {
+	const resolveText = useResolveText();
+	const { title, description, columns = 4, realtime: dashboardRealtime } = config;
+	const layoutItems = config.items || config.widgets || [];
+	const resolvedTitle = title ? resolveText(title) : void 0;
+	const resolvedDescription = description ? resolveText(description) : void 0;
+	if (layoutItems.length === 0) return /* @__PURE__ */ jsxs("div", {
+		className: cn("@container", className),
+		children: [/* @__PURE__ */ jsx(DashboardHeader, {
+			title: resolvedTitle,
+			description: resolvedDescription,
+			actions: config.actions,
+			navigate,
+			resolveText
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex h-64 items-center justify-center border border-dashed border-border bg-card/50 rounded-lg",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "text-center",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground font-medium",
+					children: "No widgets configured"
+				}), /* @__PURE__ */ jsx("p", {
+					className: "mt-1 text-sm text-muted-foreground",
+					children: "Add widgets to your dashboard configuration to display data here."
+				})]
+			})
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("@container", className),
+		children: [/* @__PURE__ */ jsx(DashboardHeader, {
+			title: resolvedTitle,
+			description: resolvedDescription,
+			actions: config.actions,
+			navigate,
+			resolveText
+		}), /* @__PURE__ */ jsx("div", {
+			className: cn("grid gap-4 items-stretch", getGridClass(columns)),
+			children: layoutItems.map((item, index) => /* @__PURE__ */ jsx(LayoutItemRenderer, {
+				item,
+				index,
+				columns,
+				basePath,
+				navigate,
+				widgetRegistry,
+				resolveText,
+				dashboardRealtime
+			}, getLayoutItemKey(item, index)))
+		})]
+	});
+}
+
+//#endregion
+export { DashboardGrid };
+//# sourceMappingURL=dashboard-grid.mjs.map

package/dist/client/views/dashboard/dashboard-grid.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard-grid.mjs","names":["gridClasses: Record<number, string>","spanClasses: Record<number, string>"],"sources":["../../../../src/client/views/dashboard/dashboard-grid.tsx"],"sourcesContent":["/**\n * DashboardGrid Component\n *\n * Renders a grid of dashboard widgets based on configuration.\n * Supports:\n * - Responsive layouts with container queries\n * - Widget spanning\n * - Dashboard sections (grouped widgets)\n * - Dashboard tabs (tabbed widget groups)\n * - Recursive nesting of sections/tabs\n */\n\nimport { Icon } from \"@iconify/react\";\nimport type * as React from \"react\";\nimport type {\n\tAnyWidgetConfig,\n\tDashboardAction,\n\tDashboardConfig,\n\tDashboardLayoutItem,\n\tDashboardSection,\n\tDashboardTabConfig,\n\tDashboardTabs,\n\tWidgetComponentProps,\n\tWidgetConfig,\n} from \"../../builder\";\nimport { resolveIconElement } from \"../../components/component-renderer\";\nimport {\n\tAccordion,\n\tAccordionContent,\n\tAccordionItem,\n\tAccordionTrigger,\n} from \"../../components/ui/accordion\";\nimport { Button } from \"../../components/ui/button\";\nimport {\n\tCard,\n\tCardContent,\n\tCardHeader,\n\tCardTitle,\n} from \"../../components/ui/card\";\nimport {\n\tDropdownMenu,\n\tDropdownMenuContent,\n\tDropdownMenuItem,\n\tDropdownMenuTrigger,\n} from \"../../components/ui/dropdown-menu\";\nimport {\n\tTabs,\n\tTabsContent,\n\tTabsList,\n\tTabsTrigger,\n} from \"../../components/ui/tabs\";\nimport { useResolveText } from \"../../i18n/hooks\";\nimport { cn } from \"../../lib/utils\";\nimport { DashboardWidget } from \"./dashboard-widget\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface DashboardGridProps {\n\t/**\n\t * Dashboard configuration\n\t */\n\tconfig: DashboardConfig;\n\n\t/**\n\t * Base path for navigation links (default: \"/admin\")\n\t */\n\tbasePath?: string;\n\n\t/**\n\t * Navigate function for item clicks\n\t */\n\tnavigate?: (path: string) => void;\n\n\t/**\n\t * Custom widget registry for overrides\n\t */\n\twidgetRegistry?: Record<string, React.ComponentType<WidgetComponentProps>>;\n\n\t/**\n\t * Additional CSS class\n\t */\n\tclassName?: string;\n}\n\n// ============================================================================\n// Grid Classes - Using Container Queries\n// ============================================================================\n\n/**\n * Grid column classes for different column counts\n * Uses container queries (@container) for responsive behavior\n */\nconst gridClasses: Record<number, string> = {\n\t1: \"grid-cols-1\",\n\t2: \"grid-cols-1 @xs:grid-cols-2\",\n\t3: \"grid-cols-1 @xs:grid-cols-2 @md:grid-cols-3\",\n\t4: \"grid-cols-1 @xs:grid-cols-2 @md:grid-cols-3 @lg:grid-cols-4\",\n\t5: \"grid-cols-1 @xs:grid-cols-2 @sm:grid-cols-3 @md:grid-cols-4 @lg:grid-cols-5\",\n\t6: \"grid-cols-1 @xs:grid-cols-2 @sm:grid-cols-3 @md:grid-cols-4 @lg:grid-cols-5 @xl:grid-cols-6\",\n\t12: \"grid-cols-1 @xs:grid-cols-2 @sm:grid-cols-4 @md:grid-cols-6 @lg:grid-cols-12\",\n};\n\n/**\n * Span classes for widget column spanning\n * - span:1 widgets can be 2x2 on @xs (half width each)\n * - span:2+ widgets are full width on mobile/tablet, then expand at larger breakpoints\n */\nconst spanClasses: Record<number, string> = {\n\t1: \"col-span-1\",\n\t2: \"col-span-full @sm:col-span-2\",\n\t3: \"col-span-full @sm:col-span-2 @md:col-span-3\",\n\t4: \"col-span-full @sm:col-span-2 @md:col-span-3 @lg:col-span-4\",\n\t5: \"col-span-full @sm:col-span-2 @md:col-span-3 @lg:col-span-5\",\n\t6: \"col-span-full @sm:col-span-2 @md:col-span-3 @lg:col-span-6\",\n\t12: \"col-span-full\",\n};\n\n// ============================================================================\n// Helper Functions\n// ============================================================================\n\n/**\n * Get grid columns class based on column count\n */\nfunction getGridClass(columns: number): string {\n\treturn gridClasses[columns] || gridClasses[4];\n}\n\n/**\n * Get column span class for a widget.\n * Returns responsive span classes that gracefully collapse on smaller screens.\n * For custom responsive behavior, use className prop directly.\n */\nfunction getSpanClass(span: number | undefined): string {\n\tif (!span || span <= 1) return \"col-span-1\";\n\tif (spanClasses[span]) return spanClasses[span];\n\n\t// Generate responsive classes for spans not in the map (7-11)\n\t// Progressive collapse: full span at lg+, 3 at md, 2 at xs, 1 on mobile\n\tif (span >= 7 && span <= 11) {\n\t\treturn `col-span-1 @xs:col-span-2 @md:col-span-3 @lg:col-span-${span}`;\n\t}\n\n\t// Fallback for any other value\n\treturn `col-span-${Math.min(span, 12)}`;\n}\n\n/**\n * Check if item is a widget config\n */\nfunction isWidgetConfig(item: DashboardLayoutItem): item is WidgetConfig {\n\treturn (\n\t\ttypeof item === \"object\" &&\n\t\t\"type\" in item &&\n\t\titem.type !== \"section\" &&\n\t\titem.type !== \"tabs\"\n\t);\n}\n\n/**\n * Check if item is a section config\n */\nfunction isSectionConfig(item: DashboardLayoutItem): item is DashboardSection {\n\treturn typeof item === \"object\" && \"type\" in item && item.type === \"section\";\n}\n\n/**\n * Check if item is a tabs config\n */\nfunction isTabsConfig(item: DashboardLayoutItem): item is DashboardTabs {\n\treturn typeof item === \"object\" && \"type\" in item && item.type === \"tabs\";\n}\n\n/**\n * Generate a unique key for a layout item\n */\nfunction getLayoutItemKey(item: DashboardLayoutItem, index: number): string {\n\tif (isWidgetConfig(item)) {\n\t\treturn `widget-${item.id || item.type}-${index}`;\n\t}\n\tif (isSectionConfig(item)) {\n\t\treturn `section-${index}`;\n\t}\n\tif (isTabsConfig(item)) {\n\t\tconst tabIds = item.tabs.map((t) => t.id).join(\"-\");\n\t\treturn `tabs-${tabIds || index}`;\n\t}\n\treturn `item-${index}`;\n}\n\n// ============================================================================\n// Sub-components\n// ============================================================================\n\ninterface DashboardHeaderProps {\n\ttitle?: string;\n\tdescription?: string;\n\tactions?: DashboardAction[];\n\tnavigate?: (path: string) => void;\n\tresolveText: (text: any) => string;\n}\n\nfunction DashboardHeader({\n\ttitle,\n\tdescription,\n\tactions,\n\tnavigate,\n\tresolveText,\n}: DashboardHeaderProps) {\n\tif (!title && !description && !actions?.length) return null;\n\n\tconst handleActionClick = (action: DashboardAction) => {\n\t\tif (action.onClick) {\n\t\t\taction.onClick();\n\t\t} else if (action.href && navigate) {\n\t\t\tnavigate(action.href);\n\t\t}\n\t};\n\n\t// Split actions: primary (first with variant=primary or first action) shown as button\n\t// Rest go into dropdown on mobile, all visible on desktop\n\tconst primaryAction =\n\t\tactions?.find((a) => a.variant === \"primary\") || actions?.[0];\n\tconst secondaryActions = actions?.filter((a) => a !== primaryAction) || [];\n\n\treturn (\n\t\t<div className=\"mb-8 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n\t\t\t<div className=\"min-w-0 flex-1\">\n\t\t\t\t{title && (\n\t\t\t\t\t<h1 className=\"text-2xl md:text-3xl font-extrabold tracking-tight\">\n\t\t\t\t\t\t{title}\n\t\t\t\t\t</h1>\n\t\t\t\t)}\n\t\t\t\t{description && (\n\t\t\t\t\t<p className=\"mt-1 text-muted-foreground\">{description}</p>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t{actions && actions.length > 0 && (\n\t\t\t\t<div className=\"flex items-center gap-2 shrink-0\">\n\t\t\t\t\t{/* Primary action always visible */}\n\t\t\t\t\t{primaryAction && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tkey={primaryAction.id}\n\t\t\t\t\t\t\tvariant={\n\t\t\t\t\t\t\t\tprimaryAction.variant === \"primary\"\n\t\t\t\t\t\t\t\t\t? \"default\"\n\t\t\t\t\t\t\t\t\t: primaryAction.variant || \"default\"\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonClick={() => handleActionClick(primaryAction)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{resolveIconElement(primaryAction.icon, {\n\t\t\t\t\t\t\t\t\"data-icon\": \"inline-start\",\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t{resolveText(primaryAction.label)}\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{/* Secondary actions: visible on md+, hidden on mobile */}\n\t\t\t\t\t{secondaryActions.map((action) => {\n\t\t\t\t\t\tconst iconElement = resolveIconElement(action.icon, {\n\t\t\t\t\t\t\t\"data-icon\": \"inline-start\",\n\t\t\t\t\t\t});\n\t\t\t\t\t\tconst variant = action.variant || \"default\";\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tkey={action.id}\n\t\t\t\t\t\t\t\tvariant={variant === \"primary\" ? \"default\" : variant}\n\t\t\t\t\t\t\t\tonClick={() => handleActionClick(action)}\n\t\t\t\t\t\t\t\tclassName=\"hidden md:inline-flex\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{iconElement}\n\t\t\t\t\t\t\t\t{resolveText(action.label)}\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\n\t\t\t\t\t{/* Dropdown for secondary actions on mobile */}\n\t\t\t\t\t{secondaryActions.length > 0 && (\n\t\t\t\t\t\t<DropdownMenu>\n\t\t\t\t\t\t\t<DropdownMenuTrigger\n\t\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t\t<Button variant=\"outline\" size=\"icon\" className=\"md:hidden\">\n\t\t\t\t\t\t\t\t\t\t<Icon icon=\"ph:dots-three-vertical\" className=\"size-4\" />\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<DropdownMenuContent align=\"end\">\n\t\t\t\t\t\t\t\t{secondaryActions.map((action) => (\n\t\t\t\t\t\t\t\t\t<DropdownMenuItem\n\t\t\t\t\t\t\t\t\t\tkey={action.id}\n\t\t\t\t\t\t\t\t\t\tonClick={() => handleActionClick(action)}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{resolveIconElement(action.icon, {\n\t\t\t\t\t\t\t\t\t\t\tclassName: \"size-4 mr-2\",\n\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t\t{resolveText(action.label)}\n\t\t\t\t\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</DropdownMenuContent>\n\t\t\t\t\t\t</DropdownMenu>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\n// ============================================================================\n// Layout Item Renderer\n// ============================================================================\n\ninterface LayoutItemRendererProps {\n\titem: DashboardLayoutItem;\n\tindex: number;\n\tcolumns: number;\n\tbasePath: string;\n\tnavigate?: (path: string) => void;\n\twidgetRegistry?: Record<string, React.ComponentType<WidgetComponentProps>>;\n\tresolveText: (text: any) => string;\n\tdashboardRealtime?: boolean;\n}\n\nfunction LayoutItemRenderer({\n\titem,\n\tindex,\n\tcolumns,\n\tbasePath,\n\tnavigate,\n\twidgetRegistry,\n\tresolveText,\n\tdashboardRealtime,\n}: LayoutItemRendererProps) {\n\t// Widget\n\tif (isWidgetConfig(item)) {\n\t\tconst spanClass = getSpanClass(item.span);\n\t\tconst widgetConfig =\n\t\t\tdashboardRealtime !== undefined && item.realtime === undefined\n\t\t\t\t? ({ ...item, realtime: dashboardRealtime } as AnyWidgetConfig)\n\t\t\t\t: item;\n\t\treturn (\n\t\t\t<div className={cn(\"min-h-0 h-full\", spanClass, item.className)}>\n\t\t\t\t<DashboardWidget\n\t\t\t\t\tconfig={widgetConfig}\n\t\t\t\t\tbasePath={basePath}\n\t\t\t\t\tnavigate={navigate}\n\t\t\t\t\twidgetRegistry={widgetRegistry}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Section\n\tif (isSectionConfig(item)) {\n\t\treturn (\n\t\t\t<SectionRenderer\n\t\t\t\tkey={`section-${index}`}\n\t\t\t\tsection={item}\n\t\t\t\tbasePath={basePath}\n\t\t\t\tnavigate={navigate}\n\t\t\t\twidgetRegistry={widgetRegistry}\n\t\t\t\tresolveText={resolveText}\n\t\t\t\tdashboardRealtime={dashboardRealtime}\n\t\t\t/>\n\t\t);\n\t}\n\n\t// Tabs\n\tif (isTabsConfig(item)) {\n\t\treturn (\n\t\t\t<TabsRenderer\n\t\t\t\tkey={`tabs-${index}`}\n\t\t\t\ttabs={item}\n\t\t\t\tbasePath={basePath}\n\t\t\t\tnavigate={navigate}\n\t\t\t\twidgetRegistry={widgetRegistry}\n\t\t\t\tresolveText={resolveText}\n\t\t\t\tdashboardRealtime={dashboardRealtime}\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn null;\n}\n\n// ============================================================================\n// Section Renderer\n// ============================================================================\n\ninterface SectionRendererProps {\n\tsection: DashboardSection;\n\tbasePath: string;\n\tnavigate?: (path: string) => void;\n\twidgetRegistry?: Record<string, React.ComponentType<WidgetComponentProps>>;\n\tresolveText: (text: any) => string;\n\tdashboardRealtime?: boolean;\n}\n\nfunction SectionRenderer({\n\tsection,\n\tbasePath,\n\tnavigate,\n\twidgetRegistry,\n\tresolveText,\n\tdashboardRealtime,\n}: SectionRendererProps) {\n\tconst {\n\t\tlabel,\n\t\tdescription,\n\t\twrapper = \"flat\",\n\t\tdefaultCollapsed = false,\n\t\tlayout = \"grid\",\n\t\tcolumns = 4,\n\t\tgap,\n\t\titems,\n\t\tclassName,\n\t} = section;\n\n\tconst sectionLabel = label ? resolveText(label) : undefined;\n\tconst sectionDescription = description ? resolveText(description) : undefined;\n\n\t// Render items grid with container queries\n\tconst itemsContent = (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"@container\",\n\t\t\t\tlayout === \"grid\" && \"grid gap-4 items-stretch\",\n\t\t\t\tlayout === \"grid\" && getGridClass(columns),\n\t\t\t\tlayout === \"stack\" && \"flex flex-col gap-4\",\n\t\t\t)}\n\t\t\tstyle={gap ? { gap: `${gap * 0.25}rem` } : undefined}\n\t\t>\n\t\t\t{items.map((item, index) => (\n\t\t\t\t<LayoutItemRenderer\n\t\t\t\t\tkey={getLayoutItemKey(item, index)}\n\t\t\t\t\titem={item}\n\t\t\t\t\tindex={index}\n\t\t\t\t\tcolumns={columns}\n\t\t\t\t\tbasePath={basePath}\n\t\t\t\t\tnavigate={navigate}\n\t\t\t\t\twidgetRegistry={widgetRegistry}\n\t\t\t\t\tresolveText={resolveText}\n\t\t\t\t\tdashboardRealtime={dashboardRealtime}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</div>\n\t);\n\n\t// Flat wrapper (just label + content)\n\tif (wrapper === \"flat\") {\n\t\treturn (\n\t\t\t<div className={cn(\"col-span-full\", className)}>\n\t\t\t\t{(sectionLabel || sectionDescription) && (\n\t\t\t\t\t<div className=\"mb-4\">\n\t\t\t\t\t\t{sectionLabel && (\n\t\t\t\t\t\t\t<h2 className=\"text-lg font-semibold\">{sectionLabel}</h2>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{sectionDescription && (\n\t\t\t\t\t\t\t<p className=\"text-sm text-muted-foreground mt-1\">\n\t\t\t\t\t\t\t\t{sectionDescription}\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{itemsContent}\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Card wrapper\n\tif (wrapper === \"card\") {\n\t\treturn (\n\t\t\t<Card className={cn(\"col-span-full\", className)}>\n\t\t\t\t{(sectionLabel || sectionDescription) && (\n\t\t\t\t\t<CardHeader>\n\t\t\t\t\t\t{sectionLabel && <CardTitle>{sectionLabel}</CardTitle>}\n\t\t\t\t\t\t{sectionDescription && (\n\t\t\t\t\t\t\t<p className=\"text-sm text-muted-foreground\">\n\t\t\t\t\t\t\t\t{sectionDescription}\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</CardHeader>\n\t\t\t\t)}\n\t\t\t\t<CardContent>{itemsContent}</CardContent>\n\t\t\t</Card>\n\t\t);\n\t}\n\n\t// Collapsible wrapper\n\tif (wrapper === \"collapsible\") {\n\t\treturn (\n\t\t\t<Accordion\n\t\t\t\tdefaultValue={defaultCollapsed ? [] : [0]}\n\t\t\t\tclassName={cn(\"col-span-full\", className)}\n\t\t\t>\n\t\t\t\t<AccordionItem className=\"border-none\">\n\t\t\t\t\t<AccordionTrigger className=\"hover:no-underline py-2\">\n\t\t\t\t\t\t<div className=\"text-left\">\n\t\t\t\t\t\t\t{sectionLabel && (\n\t\t\t\t\t\t\t\t<span className=\"text-lg font-semibold\">{sectionLabel}</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{sectionDescription && (\n\t\t\t\t\t\t\t\t<p className=\"text-sm text-muted-foreground font-normal\">\n\t\t\t\t\t\t\t\t\t{sectionDescription}\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</AccordionTrigger>\n\t\t\t\t\t<AccordionContent className=\"pt-4\">{itemsContent}</AccordionContent>\n\t\t\t\t</AccordionItem>\n\t\t\t</Accordion>\n\t\t);\n\t}\n\n\treturn itemsContent;\n}\n\n// ============================================================================\n// Tabs Renderer\n// ============================================================================\n\ninterface TabsRendererProps {\n\ttabs: DashboardTabs;\n\tbasePath: string;\n\tnavigate?: (path: string) => void;\n\twidgetRegistry?: Record<string, React.ComponentType<WidgetComponentProps>>;\n\tresolveText: (text: any) => string;\n\tdashboardRealtime?: boolean;\n}\n\nfunction TabsRenderer({\n\ttabs,\n\tbasePath,\n\tnavigate,\n\twidgetRegistry,\n\tresolveText,\n\tdashboardRealtime,\n}: TabsRendererProps) {\n\tconst { tabs: tabConfigs, defaultTab, variant = \"default\" } = tabs;\n\n\tconst defaultValue = defaultTab || tabConfigs[0]?.id;\n\n\treturn (\n\t\t<Tabs defaultValue={defaultValue} className=\"col-span-full\">\n\t\t\t<TabsList\n\t\t\t\tvariant={variant === \"line\" ? \"line\" : \"default\"}\n\t\t\t\tclassName=\"mb-4\"\n\t\t\t>\n\t\t\t\t{tabConfigs.map((tab) => (\n\t\t\t\t\t<TabsTrigger key={tab.id} value={tab.id}>\n\t\t\t\t\t\t{resolveIconElement(tab.icon, {\n\t\t\t\t\t\t\tclassName: \"h-4 w-4 mr-2\",\n\t\t\t\t\t\t})}\n\t\t\t\t\t\t{resolveText(tab.label)}\n\t\t\t\t\t\t{tab.badge !== undefined && (\n\t\t\t\t\t\t\t<span className=\"ml-2 rounded-full bg-muted px-2 py-0.5 text-xs\">\n\t\t\t\t\t\t\t\t{tab.badge}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</TabsTrigger>\n\t\t\t\t))}\n\t\t\t</TabsList>\n\n\t\t\t{tabConfigs.map((tab) => (\n\t\t\t\t<TabsContent key={tab.id} value={tab.id}>\n\t\t\t\t\t<TabContentRenderer\n\t\t\t\t\t\ttab={tab}\n\t\t\t\t\t\tbasePath={basePath}\n\t\t\t\t\t\tnavigate={navigate}\n\t\t\t\t\t\twidgetRegistry={widgetRegistry}\n\t\t\t\t\t\tresolveText={resolveText}\n\t\t\t\t\t\tdashboardRealtime={dashboardRealtime}\n\t\t\t\t\t/>\n\t\t\t\t</TabsContent>\n\t\t\t))}\n\t\t</Tabs>\n\t);\n}\n\ninterface TabContentRendererProps {\n\ttab: DashboardTabConfig;\n\tbasePath: string;\n\tnavigate?: (path: string) => void;\n\twidgetRegistry?: Record<string, React.ComponentType<WidgetComponentProps>>;\n\tresolveText: (text: any) => string;\n\tdashboardRealtime?: boolean;\n}\n\nfunction TabContentRenderer({\n\ttab,\n\tbasePath,\n\tnavigate,\n\twidgetRegistry,\n\tresolveText,\n\tdashboardRealtime,\n}: TabContentRendererProps) {\n\t// Default to 4 columns for tab content\n\tconst columns = 4;\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"@container grid gap-4 items-stretch\",\n\t\t\t\tgetGridClass(columns),\n\t\t\t)}\n\t\t>\n\t\t\t{tab.items.map((item, index) => (\n\t\t\t\t<LayoutItemRenderer\n\t\t\t\t\tkey={getLayoutItemKey(item, index)}\n\t\t\t\t\titem={item}\n\t\t\t\t\tindex={index}\n\t\t\t\t\tcolumns={columns}\n\t\t\t\t\tbasePath={basePath}\n\t\t\t\t\tnavigate={navigate}\n\t\t\t\t\twidgetRegistry={widgetRegistry}\n\t\t\t\t\tresolveText={resolveText}\n\t\t\t\t\tdashboardRealtime={dashboardRealtime}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</div>\n\t);\n}\n\n// ============================================================================\n// Main Component\n// ============================================================================\n\n/**\n * DashboardGrid - Renders a configurable grid of dashboard widgets\n *\n * @example\n * ```tsx\n * const dashboardConfig: DashboardConfig = {\n *   title: \"Dashboard\",\n *   description: \"Welcome to your admin dashboard\",\n *   columns: 4,\n *   items: [\n *     { type: \"stats\", collection: \"posts\", label: \"Total Posts\", span: 1 },\n *     { type: \"stats\", collection: \"users\", label: \"Total Users\", span: 1 },\n *     {\n *       type: \"section\",\n *       label: \"Analytics\",\n *       wrapper: \"card\",\n *       items: [\n *         { type: \"chart\", collection: \"posts\", field: \"createdAt\", span: 2 },\n *       ]\n *     },\n *     {\n *       type: \"tabs\",\n *       tabs: [\n *         { id: \"recent\", label: \"Recent\", items: [...] },\n *         { id: \"popular\", label: \"Popular\", items: [...] },\n *       ]\n *     }\n *   ],\n * };\n *\n * <DashboardGrid config={dashboardConfig} basePath=\"/admin\" navigate={navigate} />\n * ```\n */\nexport function DashboardGrid({\n\tconfig,\n\tbasePath = \"/admin\",\n\tnavigate,\n\twidgetRegistry,\n\tclassName,\n}: DashboardGridProps): React.ReactElement {\n\tconst resolveText = useResolveText();\n\tconst {\n\t\ttitle,\n\t\tdescription,\n\t\tcolumns = 4,\n\t\trealtime: dashboardRealtime,\n\t} = config;\n\n\t// Support both new `items` and legacy `widgets` array\n\tconst layoutItems = config.items || config.widgets || [];\n\n\tconst resolvedTitle = title ? resolveText(title) : undefined;\n\tconst resolvedDescription = description\n\t\t? resolveText(description)\n\t\t: undefined;\n\n\t// If no items, show empty state\n\tif (layoutItems.length === 0) {\n\t\treturn (\n\t\t\t<div className={cn(\"@container\", className)}>\n\t\t\t\t<DashboardHeader\n\t\t\t\t\ttitle={resolvedTitle}\n\t\t\t\t\tdescription={resolvedDescription}\n\t\t\t\t\tactions={config.actions}\n\t\t\t\t\tnavigate={navigate}\n\t\t\t\t\tresolveText={resolveText}\n\t\t\t\t/>\n\t\t\t\t<div className=\"flex h-64 items-center justify-center border border-dashed border-border bg-card/50 rounded-lg\">\n\t\t\t\t\t<div className=\"text-center\">\n\t\t\t\t\t\t<p className=\"text-muted-foreground font-medium\">\n\t\t\t\t\t\t\tNo widgets configured\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<p className=\"mt-1 text-sm text-muted-foreground\">\n\t\t\t\t\t\t\tAdd widgets to your dashboard configuration to display data here.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div className={cn(\"@container\", className)}>\n\t\t\t<DashboardHeader\n\t\t\t\ttitle={resolvedTitle}\n\t\t\t\tdescription={resolvedDescription}\n\t\t\t\tactions={config.actions}\n\t\t\t\tnavigate={navigate}\n\t\t\t\tresolveText={resolveText}\n\t\t\t/>\n\n\t\t\t<div className={cn(\"grid gap-4 items-stretch\", getGridClass(columns))}>\n\t\t\t\t{layoutItems.map((item, index) => (\n\t\t\t\t\t<LayoutItemRenderer\n\t\t\t\t\t\tkey={getLayoutItemKey(item, index)}\n\t\t\t\t\t\titem={item}\n\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\tcolumns={columns}\n\t\t\t\t\t\tbasePath={basePath}\n\t\t\t\t\t\tnavigate={navigate}\n\t\t\t\t\t\twidgetRegistry={widgetRegistry}\n\t\t\t\t\t\tresolveText={resolveText}\n\t\t\t\t\t\tdashboardRealtime={dashboardRealtime}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport default DashboardGrid;\n"],"mappings":"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"}