@fragments-sdk/cli 0.7.14 → 0.7.15

package/src/viewer/components/SkeletonLoader.tsx

@@ -11,149 +11,138 @@ import { Skeleton, Loading } from '@fragments-sdk/ui';
  */
 export function AppSkeleton() {
   return (
-    <div style={{ display: 'flex', height: '100vh', backgroundColor: 'var(--bg-primary)' }}>
-      {/* Sidebar skeleton */}
-      <div style={{
-        width: '240px',
-        borderRight: '1px solid var(--border)',
-        backgroundColor: 'var(--bg-secondary)',
-        display: 'flex',
-        flexDirection: 'column',
-      }}>
-        {/* Header */}
-        <div style={{
+    <div
+      style={{
+        display: 'grid',
+        minHeight: '100vh',
+        minHeight: '100dvh',
+        gridTemplateRows: '56px 1fr',
+        gridTemplateColumns: '260px 1fr 240px',
+        gridTemplateAreas: '"header header header" "sidebar main aside"',
+        backgroundColor: 'var(--bg-primary)',
+      }}
+    >
+      <div
+        style={{
+          gridArea: 'header',
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'space-between',
-          padding: '8px 16px',
+          gap: '16px',
+          padding: '0 16px',
           borderBottom: '1px solid var(--border)',
-        }}>
-          <Skeleton variant="text" style={{ width: '80px' }} />
-          <Skeleton variant="circular" style={{ width: '24px', height: '24px' }} />
-        </div>
-
-        {/* Search */}
-        <div style={{ padding: '12px' }}>
-          <Skeleton variant="rectangular" style={{ width: '100%', height: '32px', borderRadius: '6px' }} />
-        </div>
-
-        {/* Component list */}
-        <div style={{ flex: 1, padding: '0 8px', overflow: 'hidden' }}>
-          {/* Category 1 */}
-          <div style={{ marginBottom: '16px' }}>
-            <Skeleton variant="text" style={{ width: '64px', margin: '0 8px 8px' }} />
-            <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
-              <Skeleton variant="rectangular" style={{ width: '100%', height: '28px', borderRadius: '6px' }} />
-              <Skeleton variant="rectangular" style={{ width: '100%', height: '28px', borderRadius: '6px' }} />
-              <Skeleton variant="rectangular" style={{ width: '75%', height: '28px', borderRadius: '6px' }} />
-            </div>
-          </div>
-
-          {/* Category 2 */}
-          <div style={{ marginBottom: '16px' }}>
-            <Skeleton variant="text" style={{ width: '80px', margin: '0 8px 8px' }} />
-            <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
-              <Skeleton variant="rectangular" style={{ width: '100%', height: '28px', borderRadius: '6px' }} />
-              <Skeleton variant="rectangular" style={{ width: '83%', height: '28px', borderRadius: '6px' }} />
-              <Skeleton variant="rectangular" style={{ width: '100%', height: '28px', borderRadius: '6px' }} />
-              <Skeleton variant="rectangular" style={{ width: '66%', height: '28px', borderRadius: '6px' }} />
-            </div>
-          </div>
-
-          {/* Category 3 */}
-          <div>
-            <Skeleton variant="text" style={{ width: '96px', margin: '0 8px 8px' }} />
-            <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
-              <Skeleton variant="rectangular" style={{ width: '80%', height: '28px', borderRadius: '6px' }} />
-              <Skeleton variant="rectangular" style={{ width: '100%', height: '28px', borderRadius: '6px' }} />
-            </div>
-          </div>
+          backgroundColor: 'var(--bg-primary)',
+        }}
+      >
+        <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+          <Skeleton.Circle size={20} />
+          <Skeleton variant="text" width={96} />
+          <Skeleton variant="text" width={64} />
         </div>
-
-        {/* Footer */}
-        <div style={{ padding: '12px 16px', borderTop: '1px solid var(--border-subtle)' }}>
-          <Skeleton variant="text" style={{ width: '96px' }} />
+        <Skeleton variant="rect" width={240} height={32} radius="md" />
+        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+          <Skeleton variant="rect" width={64} height={28} radius="md" />
+          <Skeleton.Circle size={20} />
+          <Skeleton.Circle size={20} />
+          <Skeleton.Circle size={20} />
         </div>
       </div>
 
-      {/* Main content skeleton */}
-      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
-        {/* Toolbar */}
-        <div style={{
+      <aside
+        style={{
+          gridArea: 'sidebar',
+          borderRight: '1px solid var(--border)',
+          backgroundColor: 'var(--bg-primary)',
           display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          padding: '8px 16px',
-          borderBottom: '1px solid var(--border)',
-          backgroundColor: 'var(--bg-secondary)',
-        }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-            <Skeleton variant="text" style={{ width: '96px', height: '20px' }} />
-            <Skeleton variant="text" style={{ width: '64px', height: '16px' }} />
-          </div>
-          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-            <Skeleton variant="rectangular" style={{ width: '64px', height: '28px', borderRadius: '4px' }} />
-            <Skeleton variant="rectangular" style={{ width: '96px', height: '28px', borderRadius: '4px' }} />
-            <Skeleton variant="rectangular" style={{ width: '80px', height: '28px', borderRadius: '4px' }} />
-            <Skeleton variant="circular" style={{ width: '24px', height: '24px' }} />
-            <Skeleton variant="circular" style={{ width: '24px', height: '24px' }} />
-          </div>
+          flexDirection: 'column',
+          minHeight: 0,
+        }}
+      >
+        <div style={{ padding: '12px 16px' }}>
+          <Skeleton variant="rect" height={32} radius="md" />
         </div>
-
-        {/* Variant tabs */}
-        <div style={{
-          padding: '8px 16px',
-          borderBottom: '1px solid var(--border)',
-          backgroundColor: 'var(--bg-primary)',
-        }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-            <Skeleton variant="rectangular" style={{ width: '64px', height: '28px', borderRadius: '6px' }} />
-            <Skeleton variant="rectangular" style={{ width: '80px', height: '28px', borderRadius: '6px' }} />
-            <Skeleton variant="rectangular" style={{ width: '56px', height: '28px', borderRadius: '6px' }} />
-            <Skeleton variant="rectangular" style={{ width: '72px', height: '28px', borderRadius: '6px' }} />
-            <Skeleton variant="rectangular" style={{ width: '48px', height: '28px', borderRadius: '6px' }} />
-          </div>
+        <div style={{ padding: '0 12px', display: 'flex', flexDirection: 'column', gap: '12px', overflow: 'hidden' }}>
+          <Skeleton variant="text" width={68} />
+          <Skeleton variant="rect" height={30} radius="md" />
+          <Skeleton variant="rect" height={30} radius="md" />
+          <Skeleton variant="rect" height={30} radius="md" />
+          <Skeleton variant="text" width={84} />
+          <Skeleton variant="rect" height={30} radius="md" />
+          <Skeleton variant="rect" height={30} radius="md" />
+          <Skeleton variant="rect" width="78%" height={30} radius="md" />
         </div>
-
-        {/* Preview area */}
-        <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '32px' }}>
-          <Skeleton variant="rectangular" style={{ width: '256px', height: '128px', borderRadius: '8px' }} />
+        <div style={{ marginTop: 'auto', padding: '12px 16px', borderTop: '1px solid var(--border-subtle)' }}>
+          <Skeleton variant="text" width={92} />
         </div>
+      </aside>
 
-        {/* Bottom panel */}
-        <div style={{
-          height: '256px',
-          borderTop: '1px solid var(--border)',
-          backgroundColor: 'var(--bg-secondary)',
-        }}>
-          <div style={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: '4px',
-            padding: '0 16px',
-            height: '40px',
-            borderBottom: '1px solid var(--border-subtle)',
-          }}>
-            <Skeleton variant="rectangular" style={{ width: '48px', height: '24px', borderRadius: '4px' }} />
-            <Skeleton variant="rectangular" style={{ width: '40px', height: '24px', borderRadius: '4px' }} />
-            <Skeleton variant="rectangular" style={{ width: '48px', height: '24px', borderRadius: '4px' }} />
-          </div>
-          <div style={{ padding: '16px', display: 'flex', flexDirection: 'column', gap: '12px' }}>
-            <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
-              <Skeleton variant="text" style={{ width: '80px' }} />
-              <Skeleton variant="rectangular" style={{ width: '128px', height: '32px', borderRadius: '4px' }} />
+      <main
+        style={{
+          gridArea: 'main',
+          display: 'flex',
+          flexDirection: 'column',
+          minWidth: 0,
+          minHeight: 0,
+          backgroundColor: 'var(--bg-primary)',
+        }}
+      >
+        <div style={{ flex: 1, padding: '20px', overflow: 'hidden' }}>
+          <div
+            style={{
+              border: '1px solid var(--border)',
+              borderRadius: '10px',
+              overflow: 'hidden',
+              marginBottom: '16px',
+            }}
+          >
+            <div style={{ padding: '12px 14px', borderBottom: '1px solid var(--border-subtle)', backgroundColor: 'var(--bg-secondary)', display: 'flex', gap: '10px' }}>
+              <Skeleton variant="text" width={84} />
+              <Skeleton variant="text" width={120} />
+            </div>
+            <div style={{ padding: '24px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+              <Skeleton variant="rect" width={280} height={120} radius="lg" />
             </div>
-            <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
-              <Skeleton variant="text" style={{ width: '64px' }} />
-              <Skeleton variant="rectangular" style={{ width: '96px', height: '32px', borderRadius: '4px' }} />
+          </div>
+
+          <div
+            style={{
+              border: '1px solid var(--border)',
+              borderRadius: '10px',
+              overflow: 'hidden',
+            }}
+          >
+            <div style={{ height: '40px', display: 'flex', alignItems: 'center', gap: '6px', padding: '0 14px', borderBottom: '1px solid var(--border-subtle)', backgroundColor: 'var(--bg-secondary)' }}>
+              <Skeleton variant="rect" width={52} height={22} radius="md" />
+              <Skeleton variant="rect" width={88} height={22} radius="md" />
+              <Skeleton variant="rect" width={58} height={22} radius="md" />
             </div>
-            <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
-              <Skeleton variant="text" style={{ width: '96px' }} />
-              <Skeleton variant="rectangular" style={{ width: '80px', height: '32px', borderRadius: '4px' }} />
+            <div style={{ padding: '16px' }}>
+              <Skeleton.Text lines={4} lastLineWidth={72} />
             </div>
           </div>
         </div>
-      </div>
+      </main>
+
+      <aside
+        style={{
+          gridArea: 'aside',
+          borderLeft: '1px solid var(--border)',
+          backgroundColor: 'var(--bg-primary)',
+          padding: '16px 14px',
+        }}
+      >
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+          <Skeleton variant="text" width={92} />
+          <Skeleton variant="text" width={64} />
+          <Skeleton variant="text" width={48} />
+          <Skeleton variant="text" width={76} />
+          <Skeleton variant="rect" height={1} />
+          <Skeleton variant="text" width={86} />
+          <Skeleton variant="rect" width="100%" height={26} radius="md" />
+          <Skeleton variant="rect" width="84%" height={26} radius="md" />
+          <Skeleton variant="rect" width="70%" height={26} radius="md" />
+        </div>
+      </aside>
     </div>
   );
 }

package/src/viewer/components/VariantMatrix.tsx

@@ -14,7 +14,7 @@ import { useState, useMemo, useRef, useCallback } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import type { FragmentVariant } from "../../core/index.js";
 import { ErrorBoundary } from "./ErrorBoundary.js";
-import { StoryRenderer, LoaderIndicator } from "./StoryRenderer.js";
+import { FragmentRenderer, LoaderIndicator } from "./FragmentRenderer.js";
 import { IsolatedPreviewFrame } from "./IsolatedPreviewFrame.js";
 import { ChevronDownIcon } from "./Icons.js";
 
@@ -389,7 +389,7 @@ function VariantCard({
                 </div>
               }
             >
-              <StoryRenderer variant={variant}>
+              <FragmentRenderer variant={variant}>
                 {(content, isLoading, error) => {
                   if (isLoading) {
                     return (
@@ -407,7 +407,7 @@ function VariantCard({
                   }
                   return content;
                 }}
-              </StoryRenderer>
+              </FragmentRenderer>
             </ErrorBoundary>
           </div>
         )}

package/src/viewer/entry.tsx

@@ -149,6 +149,8 @@ type FragmentItem = {
 let fragments: FragmentItem[] = window.__FRAGMENTS__ ?? [];
 let loadError: string | null = window.__FRAGMENTS_ERROR__ ?? null;
 let appRoot: Root | null = null;
+const SKELETON_DELAY_MS = 120;
+const MIN_SKELETON_DISPLAY_MS = 220;
 
 // Filter helper
 function filterValidFragments(items: FragmentItem[]): FragmentItem[] {
@@ -257,11 +259,33 @@ if (rootElement) {
 
   // Show skeleton immediately if no fragments yet
   if (fragments.length === 0 && !loadError) {
-    renderApp(true);
+    const loadStartedAt = Date.now();
+    let skeletonShown = false;
+
+    const skeletonTimer = setTimeout(() => {
+      skeletonShown = true;
+      renderApp(true);
+    }, SKELETON_DELAY_MS);
 
     // Load fragments asynchronously and re-render
     loadFragmentsFromVirtualModule().then(() => {
-      renderApp(false);
+      clearTimeout(skeletonTimer);
+
+      if (!skeletonShown) {
+        renderApp(false);
+        return;
+      }
+
+      const elapsed = Date.now() - loadStartedAt;
+      const remaining = Math.max(MIN_SKELETON_DISPLAY_MS - elapsed, 0);
+      if (remaining === 0) {
+        renderApp(false);
+        return;
+      }
+
+      setTimeout(() => {
+        renderApp(false);
+      }, remaining);
     });
   } else {
     // We have fragments from window, render immediately

package/src/viewer/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Fragments</title>
-    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='2' y='6' width='12' height='12' rx='2' fill='%234f46e5'/%3E%3Crect x='18' y='6' width='12' height='5' rx='1.5' fill='%236366f1'/%3E%3Crect x='18' y='14' width='8' height='4' rx='1' fill='%23a5b4fc'/%3E%3Crect x='2' y='22' width='28' height='4' rx='1' fill='%23e0e7ff'/%3E%3C/svg%3E" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link

package/src/viewer/server.ts

@@ -230,6 +230,7 @@ export async function createDevServer(
   const fragmentsConfig: InlineConfig = {
     configFile: false, // Don't load config again
     root: projectRoot, // Run from PROJECT root
+    publicDir: resolve(viewerRoot, "public"), // Serve static assets (favicon) from viewer
     base: "/",
 
     server: {

package/src/viewer/vendor/shared/src/DocsHeaderBar.tsx

@@ -85,7 +85,26 @@ export function DocsHeaderBar({
 
         <NavigationMenu.Viewport />
 
+        <NavigationMenu.MobileBrand>{brand}</NavigationMenu.MobileBrand>
+
         <NavigationMenu.MobileContent>
+          {/* Render all headerNav items in the mobile drawer */}
+          <NavigationMenu.MobileSection>
+            {headerNav.map((entry) =>
+              isDropdown(entry) ? (
+                entry.items.map((child) => (
+                  <NavigationMenu.Link key={child.href} href={child.href} asChild>
+                    {renderLink({ href: child.href, label: child.label })}
+                  </NavigationMenu.Link>
+                ))
+              ) : (
+                <NavigationMenu.Link key={entry.href} href={entry.href} asChild>
+                  {renderLink({ href: entry.href, label: entry.label })}
+                </NavigationMenu.Link>
+              )
+            )}
+          </NavigationMenu.MobileSection>
+
           {mobileSections.map((section) => (
             <NavigationMenu.MobileSection key={section.title} label={section.title}>
               {section.items.map((item) => (

package/src/viewer/vendor/shared/src/DocsPageAsideHost.tsx

@@ -52,7 +52,7 @@ export function useDocsPageAside() {
 export function DocsPageAsidePortal({ children, width = '320px' }: { children: React.ReactNode; width?: string }) {
   const { setAsideVisible, setAsideWidth, asideContainer } = useDocsPageAside();
 
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     setAsideVisible(true);
     setAsideWidth(width);
 

package/src/viewer/vendor/shared/src/DocsSearchCommand.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { Input, Listbox } from '@fragments-sdk/ui';
-import { useEffect, useMemo, useRef, useState, type KeyboardEvent as ReactKeyboardEvent } from 'react';
+import { Command, Dialog, Button, Text, Stack } from '@fragments-sdk/ui';
+import { useEffect, useMemo, useState, useCallback } from 'react';
 import type { SearchItem } from './types';
 
 interface DocsSearchCommandProps {
@@ -14,121 +14,86 @@ interface DocsSearchCommandProps {
 export function DocsSearchCommand({
   searchItems,
   onSelect,
-  placeholder = 'Search...',
-  maxResults = 8,
+  placeholder = 'Search docs...',
+  maxResults = 9999,
 }: DocsSearchCommandProps) {
-  const [query, setQuery] = useState('');
-  const [isOpen, setIsOpen] = useState(false);
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  const results = useMemo(() => {
-    if (!query.trim()) return [];
-    const lowerQuery = query.toLowerCase();
-    return searchItems
-      .filter((item) => item.label.toLowerCase().includes(lowerQuery) || item.section.toLowerCase().includes(lowerQuery))
-      .slice(0, maxResults);
-  }, [maxResults, query, searchItems]);
-
-  useEffect(() => {
-    setSelectedIndex(0);
-  }, [results]);
+  const [open, setOpen] = useState(false);
 
+  // Cmd+K / Ctrl+K to open
   useEffect(() => {
-    const handleGlobalKeyDown = (event: KeyboardEvent) => {
+    const handleKeyDown = (event: KeyboardEvent) => {
       if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
         event.preventDefault();
-        inputRef.current?.focus();
-        setIsOpen(true);
-      }
-    };
-
-    document.addEventListener('keydown', handleGlobalKeyDown);
-    return () => document.removeEventListener('keydown', handleGlobalKeyDown);
-  }, []);
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
-        setIsOpen(false);
+        setOpen((prev) => !prev);
       }
     };
 
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
   }, []);
 
-  const handleSelect = (item: SearchItem) => {
-    onSelect(item);
-    setIsOpen(false);
-    setQuery('');
-  };
-
-  const handleKeyDown = (event: ReactKeyboardEvent) => {
-    if (!isOpen || results.length === 0) return;
-
-    switch (event.key) {
-      case 'ArrowDown':
-        event.preventDefault();
-        setSelectedIndex((prev) => (prev + 1) % results.length);
-        break;
-      case 'ArrowUp':
-        event.preventDefault();
-        setSelectedIndex((prev) => (prev - 1 + results.length) % results.length);
-        break;
-      case 'Enter':
-        event.preventDefault();
-        if (results[selectedIndex]) {
-          handleSelect(results[selectedIndex]);
-          inputRef.current?.blur();
-        }
-        break;
-      case 'Escape':
-        setIsOpen(false);
-        inputRef.current?.blur();
-        break;
-      default:
-        break;
+  // Group items by section
+  const grouped = useMemo(() => {
+    const map = new Map<string, SearchItem[]>();
+    for (const item of searchItems) {
+      const section = item.section || 'Navigation';
+      if (!map.has(section)) map.set(section, []);
+      map.get(section)!.push(item);
     }
-  };
+    return map;
+  }, [searchItems]);
+
+  const handleSelect = useCallback(
+    (item: SearchItem) => {
+      setOpen(false);
+      onSelect(item);
+    },
+    [onSelect],
+  );
 
   return (
-    <div ref={containerRef} className="shared-docs-search-container">
-      <Input
-        ref={inputRef}
-        placeholder={placeholder}
-        aria-label="Search"
-        value={query}
-        onChange={(value) => {
-          setQuery(value);
-          setIsOpen(true);
-        }}
-        onFocus={() => setIsOpen(true)}
-        onKeyDown={handleKeyDown}
-        shortcut="⌘K"
+    <>
+      <Button
+        variant="secondary"
         size="sm"
-      />
-      {isOpen && results.length > 0 && (
-        <Listbox aria-label="Search results" className="shared-docs-search-results">
-          {results.map((item, index) => (
-            <Listbox.Item
-              key={`${item.section}:${item.href}`}
-              selected={index === selectedIndex}
-              onClick={() => handleSelect(item)}
-              onMouseEnter={() => setSelectedIndex(index)}
-            >
-              <span className="shared-docs-search-result-label">{item.label}</span>
-              <span className="shared-docs-search-result-section">{item.section}</span>
-            </Listbox.Item>
-          ))}
-        </Listbox>
-      )}
-      {isOpen && query.trim() && results.length === 0 && (
-        <Listbox aria-label="Search results" className="shared-docs-search-results">
-          <Listbox.Empty>No results found</Listbox.Empty>
-        </Listbox>
-      )}
-    </div>
+        onClick={() => setOpen(true)}
+        aria-label="Search documentation"
+        style={{ minWidth: 160, justifyContent: 'space-between' }}
+      >
+        <Text size="sm" color="secondary">Search...</Text>
+        <Text size="xs" color="secondary" font="mono">⌘K</Text>
+      </Button>
+
+      <Dialog open={open} onOpenChange={setOpen}>
+        <Dialog.Content size="sm" style={{ padding: 0, overflow: 'hidden' }}>
+          <Command
+            filter={(value, search) => {
+              if (value.toLowerCase().includes(search.toLowerCase())) return 1;
+              return 0;
+            }}
+          >
+            <Command.Input placeholder={placeholder} />
+            <Command.List>
+              <Command.Empty>No results found.</Command.Empty>
+              {[...grouped.entries()].map(([section, items]) => (
+                <Command.Group key={section} heading={section}>
+                  {items.slice(0, maxResults).map((item) => (
+                    <Command.Item
+                      key={`${item.section}:${item.href}`}
+                      value={`${item.label} ${item.section}`}
+                      onItemSelect={() => handleSelect(item)}
+                    >
+                      <Stack direction="row" align="center" justify="between" style={{ width: '100%' }}>
+                        <Text size="sm">{item.label}</Text>
+                      </Stack>
+                    </Command.Item>
+                  ))}
+                </Command.Group>
+              ))}
+            </Command.List>
+          </Command>
+        </Dialog.Content>
+      </Dialog>
+    </>
   );
 }