@fragments-sdk/cli 0.7.14 → 0.7.16

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/components/ViewerStateSync.tsx

@@ -0,0 +1,52 @@
+import { useEffect } from 'react';
+import { setViewerState } from '../webmcp/viewer-state.js';
+import { useUrlState } from '../hooks/useUrlState.js';
+import { useAppState } from '../hooks/useAppState.js';
+import { useViewSettings } from '../hooks/useViewSettings.js';
+import { useTheme } from './ThemeProvider.js';
+import { BRAND, type FragmentDefinition } from '../../core/index.js';
+
+interface ViewerStateSyncProps {
+  fragments: Array<{ path: string; fragment: FragmentDefinition }>;
+  activeVariantIndex: number;
+}
+
+export function ViewerStateSync({ fragments, activeVariantIndex }: ViewerStateSyncProps) {
+  const { state: urlState } = useUrlState();
+  const { state: uiState } = useAppState();
+  const viewSettings = useViewSettings();
+  const { resolvedTheme } = useTheme();
+
+  useEffect(() => {
+    const activeFragment = urlState.component
+      ? fragments.find(f => f.fragment.meta.name.toLowerCase() === urlState.component!.toLowerCase())
+      : null;
+
+    const variants = activeFragment?.fragment.variants ?? [];
+
+    setViewerState({
+      currentComponent: activeFragment?.fragment.meta.name ?? null,
+      currentVariant: variants[activeVariantIndex]?.name ?? null,
+      variantIndex: activeVariantIndex,
+      totalVariants: variants.length,
+      viewport: viewSettings.viewport,
+      zoom: viewSettings.zoom,
+      theme: resolvedTheme,
+      panels: {
+        activePanel: uiState.activePanel,
+        panelOpen: uiState.panelOpen,
+      },
+      viewMode: {
+        matrixView: uiState.showMatrixView,
+        multiViewport: uiState.showMultiViewport,
+        comparison: uiState.showComparison,
+      },
+      designSystem: {
+        name: BRAND.name,
+        componentCount: fragments.length,
+      },
+    });
+  }, [urlState, uiState, viewSettings, resolvedTheme, fragments, activeVariantIndex]);
+
+  return null;
+}