@fragments-sdk/cli 0.7.13 → 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/ThemeProvider.tsx

@@ -1,96 +1,42 @@
-import { createContext, useContext, useEffect, useState, useCallback, type ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import {
+  ThemeProvider as FragmentsThemeProvider,
+  useTheme as useFragmentsTheme,
+} from '@fragments-sdk/ui';
 import { BRAND } from '../../core/index.js';
 
 type Theme = 'light' | 'dark' | 'system';
 
-interface ThemeContextValue {
+interface ViewerThemeContextValue {
   theme: Theme;
   resolvedTheme: 'light' | 'dark';
   setTheme: (theme: Theme) => void;
 }
 
-const ThemeContext = createContext<ThemeContextValue | null>(null);
-
 const STORAGE_KEY = `${BRAND.storagePrefix}theme`;
 
-function getSystemTheme(): 'light' | 'dark' {
-  if (typeof window === 'undefined') return 'light';
-  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-}
-
-function getStoredTheme(): Theme {
-  if (typeof window === 'undefined') return 'system';
-  const stored = localStorage.getItem(STORAGE_KEY);
-  if (stored === 'light' || stored === 'dark' || stored === 'system') {
-    return stored;
-  }
-  return 'system';
-}
-
+/**
+ * Viewer theme adapter that reuses the shared UI ThemeProvider while preserving
+ * existing viewer storage keys and API shape.
+ */
 export function ThemeProvider({ children }: { children: ReactNode }) {
-  const [theme, setThemeState] = useState<Theme>(getStoredTheme);
-  const [resolvedTheme, setResolvedTheme] = useState<'light' | 'dark'>(() => {
-    const stored = getStoredTheme();
-    return stored === 'system' ? getSystemTheme() : stored;
-  });
-
-  const setTheme = useCallback((newTheme: Theme) => {
-    setThemeState(newTheme);
-    localStorage.setItem(STORAGE_KEY, newTheme);
-
-    // Immediately update resolved theme to avoid timing issues
-    const resolved = newTheme === 'system' ? getSystemTheme() : newTheme;
-    setResolvedTheme(resolved);
-
-    // Immediately apply to document
-    if (resolved === 'dark') {
-      document.documentElement.classList.add('dark');
-    } else {
-      document.documentElement.classList.remove('dark');
-    }
-  }, []);
-
-  // Update resolved theme and apply to document
-  useEffect(() => {
-    const resolved = theme === 'system' ? getSystemTheme() : theme;
-    setResolvedTheme(resolved);
-
-    if (resolved === 'dark') {
-      document.documentElement.classList.add('dark');
-    } else {
-      document.documentElement.classList.remove('dark');
-    }
-  }, [theme]);
-
-  // Listen for system theme changes
-  useEffect(() => {
-    if (theme !== 'system') return;
-
-    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-    const handler = (e: MediaQueryListEvent) => {
-      setResolvedTheme(e.matches ? 'dark' : 'light');
-      if (e.matches) {
-        document.documentElement.classList.add('dark');
-      } else {
-        document.documentElement.classList.remove('dark');
-      }
-    };
-
-    mediaQuery.addEventListener('change', handler);
-    return () => mediaQuery.removeEventListener('change', handler);
-  }, [theme]);
-
   return (
-    <ThemeContext.Provider value={{ theme, resolvedTheme, setTheme }}>
+    <FragmentsThemeProvider
+      defaultMode="system"
+      storageKey={STORAGE_KEY}
+      attribute="class"
+    >
       {children}
-    </ThemeContext.Provider>
+    </FragmentsThemeProvider>
   );
 }
 
-export function useTheme() {
-  const context = useContext(ThemeContext);
-  if (!context) {
-    throw new Error('useTheme must be used within a ThemeProvider');
-  }
-  return context;
+export function useTheme(): ViewerThemeContextValue {
+  const { mode, setMode, resolvedMode } = useFragmentsTheme();
+
+  return {
+    theme: mode,
+    resolvedTheme: resolvedMode,
+    setTheme: setMode,
+  };
 }

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);