@fragments-sdk/cli 0.10.1 → 0.12.1

package/src/viewer/components/PreviewArea.tsx

@@ -1,472 +0,0 @@
-/**
- * PreviewArea component - handles rendering the component preview.
- * Extracted from App.tsx for better organization and performance.
- *
- * Now supports iframe-based isolation for CSS isolation between
- * the viewer shell and user's component library.
- */
-
-import { memo, type ReactNode } from 'react';
-import type { FragmentVariant } from '../../core/index.js';
-import { ErrorBoundary } from './ErrorBoundary.js';
-import { FigmaEmbed } from './FigmaEmbed.js';
-import { VariantMatrix } from './VariantMatrix.js';
-import { MultiViewportPreview } from './MultiViewportPreview.js';
-import { IsolatedPreviewFrame } from './IsolatedPreviewFrame.js';
-import { getViewportWidth, type ZoomLevel, type ViewportPreset, type ViewportSize } from '../constants/ui.js';
-import type { PreviewTheme } from '../hooks/useViewSettings.js';
-
-interface PreviewAreaProps {
-  // Component data
-  componentName: string;
-  fragmentPath: string;
-  variant: FragmentVariant | undefined;
-  variants: FragmentVariant[] | undefined;
-
-  // View settings
-  zoom: ZoomLevel;
-  viewport: ViewportPreset;
-  customSize: ViewportSize;
-  previewTheme: PreviewTheme;
-
-  // Display modes
-  showMatrixView: boolean;
-  showMultiViewport: boolean;
-  showComparison: boolean;
-
-  // Figma
-  figmaUrl?: string;
-  allFigmaUrls: string[];
-
-  // Callbacks
-  onSelectVariant: (index: number) => void;
-  onRetry: () => void;
-
-  // Render function for variant content (used as fallback and for matrix/multi-viewport)
-  renderContent: () => ReactNode;
-
-  // Keys for forcing re-renders
-  previewKey: string;
-
-  // Whether to use iframe isolation (default: true)
-  useIframeIsolation?: boolean;
-}
-
-// Device mockup component for tablet/mobile preview
-interface DeviceMockupProps {
-  type: 'tablet' | 'mobile';
-  width: number;
-  children: React.ReactNode;
-}
-
-const DeviceMockup = memo(function DeviceMockup({ type, width, children }: DeviceMockupProps) {
-  const isMobile = type === 'mobile';
-  const frameWidth = width + 24;
-  const frameHeight = isMobile ? 720 : 1024;
-  const screenHeight = frameHeight - (isMobile ? 80 : 48);
-
-  return (
-    <div style={{ position: 'relative', flexShrink: 0, width: `${frameWidth}px` }}>
-      <div
-        style={{
-          position: 'relative',
-          borderRadius: '40px',
-          background: '#1a1a1a',
-          padding: '12px',
-          boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.1)',
-        }}
-      >
-        {isMobile && (
-          <>
-            <div style={{ position: 'absolute', left: '-3px', top: '96px', width: '3px', height: '32px', background: '#2a2a2a', borderRadius: '4px 0 0 4px' }} />
-            <div style={{ position: 'absolute', left: '-3px', top: '144px', width: '3px', height: '48px', background: '#2a2a2a', borderRadius: '4px 0 0 4px' }} />
-            <div style={{ position: 'absolute', left: '-3px', top: '208px', width: '3px', height: '48px', background: '#2a2a2a', borderRadius: '4px 0 0 4px' }} />
-            <div style={{ position: 'absolute', right: '-3px', top: '128px', width: '3px', height: '64px', background: '#2a2a2a', borderRadius: '0 4px 4px 0' }} />
-          </>
-        )}
-
-        <div
-          style={{
-            position: 'relative',
-            borderRadius: '32px',
-            overflow: 'hidden',
-            background: 'white',
-            height: `${screenHeight}px`,
-          }}
-        >
-          {isMobile ? (
-            <div style={{
-              position: 'absolute',
-              top: 0,
-              left: '50%',
-              transform: 'translateX(-50%)',
-              width: '120px',
-              height: '30px',
-              background: '#1a1a1a',
-              borderRadius: '0 0 16px 16px',
-              zIndex: 10,
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              gap: '8px',
-            }}>
-              <div style={{ width: '8px', height: '8px', borderRadius: '50%', background: '#2a2a2a' }} />
-              <div style={{ width: '48px', height: '6px', borderRadius: '9999px', background: '#2a2a2a' }} />
-            </div>
-          ) : (
-            <div style={{
-              position: 'absolute',
-              top: '8px',
-              left: '50%',
-              transform: 'translateX(-50%)',
-              width: '12px',
-              height: '12px',
-              borderRadius: '50%',
-              background: '#2a2a2a',
-              zIndex: 10,
-            }} />
-          )}
-
-          <div style={{ width: '100%', height: '100%', overflow: 'auto' }}>{children}</div>
-
-          <div style={{
-            position: 'absolute',
-            bottom: '8px',
-            left: '50%',
-            transform: 'translateX(-50%)',
-            width: '100px',
-            height: '4px',
-            background: 'rgba(0, 0, 0, 0.2)',
-            borderRadius: '9999px',
-            zIndex: 10,
-          }} />
-        </div>
-      </div>
-    </div>
-  );
-});
-
-// Inner preview content with zoom transform
-interface PreviewContentProps {
-  zoom: ZoomLevel;
-  previewTheme: PreviewTheme;
-  children: ReactNode;
-}
-
-const PreviewContent = memo(function PreviewContent({ zoom, previewTheme, children }: PreviewContentProps) {
-  return (
-    <div
-      data-preview-container="true"
-      data-theme={previewTheme}
-      style={{
-        width: '100%',
-        height: '100%',
-        overflow: 'auto',
-      }}
-    >
-      <div
-        style={{
-          padding: '24px',
-          transform: `scale(${zoom / 100})`,
-          transformOrigin: 'top left',
-          width: zoom !== 100 ? `${100 / (zoom / 100)}%` : '100%',
-          color: '#1f2937',
-        }}
-      >
-        {children}
-      </div>
-    </div>
-  );
-});
-
-export function PreviewArea({
-  componentName,
-  fragmentPath,
-  variant,
-  variants,
-  zoom,
-  viewport,
-  customSize,
-  previewTheme,
-  showMatrixView,
-  showMultiViewport,
-  showComparison,
-  figmaUrl,
-  allFigmaUrls,
-  onSelectVariant,
-  onRetry,
-  renderContent,
-  previewKey,
-  useIframeIsolation = true,
-}: PreviewAreaProps) {
-  // Matrix view
-  if (showMatrixView && variants) {
-    return (
-      <VariantMatrix
-        variants={variants}
-        componentName={componentName}
-        fragmentPath={fragmentPath}
-        zoom={zoom}
-        previewTheme={previewTheme}
-        useIframeIsolation={useIframeIsolation}
-        onSelectVariant={(index) => {
-          onSelectVariant(index);
-        }}
-      />
-    );
-  }
-
-  // Multi-viewport view
-  if (showMultiViewport && variant) {
-    return (
-      <MultiViewportPreview
-        componentName={componentName}
-        fragmentPath={fragmentPath}
-        variantName={variant.name}
-        renderContent={renderContent}
-        previewTheme={previewTheme}
-        zoom={zoom}
-        useIframeIsolation={useIframeIsolation}
-      />
-    );
-  }
-
-  const viewportWidth = getViewportWidth(viewport, customSize);
-  const viewportHeight = viewport === 'custom' ? customSize.height : null;
-  const isDevice = viewport === 'tablet' || viewport === 'mobile';
-
-  // Device mockup view (tablet/mobile)
-  if (isDevice && viewportWidth && variant) {
-    const deviceScreenHeight = viewport === 'mobile' ? 640 : 976;
-
-    if (showComparison && figmaUrl) {
-      return (
-        <div style={{ minHeight: '100%', display: 'flex', flexDirection: 'column', padding: '24px' }}>
-          <div style={{ display: 'flex', gap: '16px', flex: 1 }}>
-            <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
-              <div style={{ fontSize: '12px', fontWeight: 500, color: 'var(--text-tertiary)', marginBottom: '8px', textAlign: 'center' }}>Rendered</div>
-              <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-                <DeviceMockup type={viewport as 'tablet' | 'mobile'} width={viewportWidth}>
-                  {useIframeIsolation ? (
-                    <IsolatedPreviewFrame
-                      fragmentPath={fragmentPath}
-                      variantName={variant.name}
-                      theme={previewTheme}
-                      width={viewportWidth}
-                      height={deviceScreenHeight}
-                      previewKey={previewKey}
-                    />
-                  ) : (
-                    <PreviewContent zoom={zoom} previewTheme={previewTheme}>
-                      <ErrorBoundary key={previewKey} componentName={componentName} onRetry={onRetry}>
-                        {renderContent()}
-                      </ErrorBoundary>
-                    </PreviewContent>
-                  )}
-                </DeviceMockup>
-              </div>
-            </div>
-
-            <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
-              <div style={{ fontSize: '12px', fontWeight: 500, color: 'var(--text-tertiary)', marginBottom: '8px', textAlign: 'center' }}>Figma Design</div>
-              <FigmaEmbed
-                figmaUrl={figmaUrl}
-                allFigmaUrls={allFigmaUrls}
-                zoom={zoom}
-                style={{
-                  flex: 1,
-                  borderRadius: '8px',
-                  border: '1px solid var(--border)',
-                  overflow: 'hidden',
-                }}
-              />
-            </div>
-          </div>
-        </div>
-      );
-    }
-
-    return (
-      <div style={{ minHeight: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '32px' }}>
-        <DeviceMockup type={viewport as 'tablet' | 'mobile'} width={viewportWidth}>
-          {useIframeIsolation ? (
-            <IsolatedPreviewFrame
-              fragmentPath={fragmentPath}
-              variantName={variant.name}
-              theme={previewTheme}
-              width={viewportWidth}
-              height={deviceScreenHeight}
-              previewKey={previewKey}
-            />
-          ) : (
-            <PreviewContent zoom={zoom} previewTheme={previewTheme}>
-              <ErrorBoundary key={previewKey} componentName={componentName} onRetry={onRetry}>
-                {renderContent()}
-              </ErrorBoundary>
-            </PreviewContent>
-          )}
-        </DeviceMockup>
-      </div>
-    );
-  }
-
-  // Side-by-side comparison view
-  if (showComparison && figmaUrl && variant) {
-    return (
-      <div style={{ minHeight: '100%', display: 'flex', flexDirection: 'column', padding: '24px' }}>
-        <div style={{ display: 'flex', gap: '16px', flex: 1 }}>
-          <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
-            <div style={{ fontSize: '12px', fontWeight: 500, color: 'var(--text-tertiary)', marginBottom: '8px', textAlign: 'center' }}>Rendered</div>
-            <div
-              style={{
-                flex: 1,
-                borderRadius: '8px',
-                border: '1px solid var(--border)',
-                overflow: 'auto',
-              }}
-            >
-              {useIframeIsolation ? (
-                <IsolatedPreviewFrame
-                  fragmentPath={fragmentPath}
-                  variantName={variant.name}
-                  theme={previewTheme}
-                  width="100%"
-                  height="100%"
-                  minHeight={300}
-                  previewKey={previewKey}
-                />
-              ) : (
-                <div
-                  style={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    padding: '32px',
-                  }}
-                  data-preview-container="true"
-                  data-theme={previewTheme}
-                >
-                  <div
-                    style={{
-                      transform: `scale(${zoom / 100})`,
-                      transformOrigin: 'top left',
-                      width: zoom !== 100 ? `${100 / (zoom / 100)}%` : '100%',
-                      color: '#1f2937',
-                    }}
-                  >
-                    <ErrorBoundary key={previewKey} componentName={componentName} onRetry={onRetry}>
-                      {renderContent()}
-                    </ErrorBoundary>
-                  </div>
-                </div>
-              )}
-            </div>
-          </div>
-
-          <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
-            <div style={{ fontSize: '12px', fontWeight: 500, color: 'var(--text-tertiary)', marginBottom: '8px', textAlign: 'center' }}>Figma Design</div>
-            <FigmaEmbed
-              figmaUrl={figmaUrl}
-              allFigmaUrls={allFigmaUrls}
-              zoom={zoom}
-              style={{
-                flex: 1,
-                borderRadius: '8px',
-                border: '1px solid var(--border)',
-                overflow: 'hidden',
-              }}
-            />
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  // Regular preview (responsive or desktop)
-  // Use iframe isolation when enabled for complete CSS isolation
-  if (useIframeIsolation && variant) {
-    // When no specific viewport width, fill the container
-    const isFullWidth = !viewportWidth;
-    const scaleFactor = zoom / 100;
-
-    return (
-      <div style={isFullWidth
-        ? { height: '100%', display: 'flex', flexDirection: 'column', overflow: 'auto' }
-        : { minHeight: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '24px', overflow: 'auto' }
-      }>
-        <div
-          style={{
-            position: 'relative',
-            transition: 'all 200ms',
-            width: viewportWidth ? `${viewportWidth}px` : '100%',
-            maxWidth: viewportWidth ? undefined : '100%',
-            height: isFullWidth ? '100%' : undefined,
-            minHeight: viewportHeight ? `${viewportHeight}px` : (isFullWidth ? undefined : '200px'),
-            ...(viewportWidth && {
-              backgroundColor: 'var(--bg-primary)',
-              borderRadius: '8px',
-              boxShadow: '0 0 0 1px var(--border), 0 4px 12px rgba(0,0,0,0.15)',
-            }),
-          }}
-        >
-          <div
-            style={{
-              transform: `scale(${scaleFactor})`,
-              transformOrigin: 'top left',
-              width: zoom !== 100 ? `${100 / scaleFactor}%` : '100%',
-              height: zoom !== 100 ? `${100 / scaleFactor}%` : '100%',
-            }}
-          >
-            <IsolatedPreviewFrame
-              fragmentPath={fragmentPath}
-              variantName={variant.name}
-              theme={previewTheme}
-              width="100%"
-              height="100%"
-              minHeight={viewportHeight || 400}
-              previewKey={previewKey}
-            />
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  // Fallback: Direct rendering without iframe isolation
-  return (
-    <div style={{ minHeight: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '24px' }}>
-      <div
-        style={{
-          position: 'relative',
-          transition: 'all 200ms',
-          width: viewportWidth ? `${viewportWidth}px` : '100%',
-          maxWidth: viewportWidth ? undefined : '100%',
-          minHeight: viewportHeight ? `${viewportHeight}px` : '100%',
-          ...(viewportWidth && {
-            backgroundColor: 'var(--bg-primary)',
-            borderRadius: '8px',
-            boxShadow: '0 0 0 1px var(--border), 0 4px 12px rgba(0,0,0,0.15)',
-          }),
-        }}
-        data-preview-container="true"
-        data-theme={previewTheme}
-      >
-        <div
-          style={{
-            padding: '32px',
-            transform: `scale(${zoom / 100})`,
-            transformOrigin: 'top left',
-            width: zoom !== 100 ? `${100 / (zoom / 100)}%` : '100%',
-            color: '#1f2937',
-          }}
-        >
-          <ErrorBoundary key={previewKey} componentName={componentName} onRetry={onRetry}>
-            {renderContent()}
-          </ErrorBoundary>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export { DeviceMockup };

package/src/viewer/components/PreviewAside.tsx

@@ -1,168 +0,0 @@
-import { useState, useEffect, useMemo } from "react";
-import type { FragmentDefinition, FragmentVariant } from "../../core/index.js";
-import { Box, Stack, Text, Separator, Button, TableOfContents } from "@fragments-sdk/ui";
-import { getVariantSectionId } from "./viewer-utils.js";
-
-interface TocHeading {
-  id: string;
-  text: string;
-  level: 2 | 3;
-}
-
-interface PreviewAsideProps {
-  fragment: FragmentDefinition;
-  variants: FragmentVariant[];
-  focusedVariantIndex: number;
-  activePanel: string;
-  onSelectVariant: (index: number) => void;
-  onCopyLink: () => void;
-  onShowShortcuts: () => void;
-}
-
-function buildHeadings(fragment: FragmentDefinition): TocHeading[] {
-  const headings: TocHeading[] = [{ id: "setup", text: "Setup", level: 2 }];
-
-  if (fragment.variants.length > 0) {
-    headings.push({ id: "examples", text: "Examples", level: 2 });
-  }
-
-  headings.push({ id: "props", text: "Props", level: 2 });
-  headings.push({ id: "usage-guidelines", text: "Usage Guidelines", level: 2 });
-  headings.push({ id: "when-to-use", text: "When to use", level: 3 });
-  headings.push({ id: "when-not-to-use", text: "When not to use", level: 3 });
-
-  if ((fragment.usage?.guidelines?.length ?? 0) > 0) {
-    headings.push({ id: "best-practices", text: "Best practices", level: 3 });
-  }
-
-  if ((fragment.relations?.length ?? 0) > 0) {
-    headings.push({ id: "related-components", text: "Related Components", level: 2 });
-  }
-
-  return headings;
-}
-
-function useActiveHeading(ids: string[]): string | null {
-  const [activeId, setActiveId] = useState<string | null>(null);
-
-  useEffect(() => {
-    if (ids.length === 0) return;
-
-    const observer = new IntersectionObserver(
-      (entries) => {
-        for (const entry of entries) {
-          if (entry.isIntersecting) {
-            setActiveId(entry.target.id);
-          }
-        }
-      },
-      { rootMargin: "-80px 0px -60% 0px", threshold: 0 }
-    );
-
-    for (const id of ids) {
-      const el = document.getElementById(id);
-      if (el) observer.observe(el);
-    }
-
-    return () => observer.disconnect();
-  }, [ids]);
-
-  return activeId;
-}
-
-export function PreviewAside({
-  fragment,
-  variants,
-  focusedVariantIndex,
-  activePanel,
-  onSelectVariant,
-  onCopyLink,
-  onShowShortcuts,
-}: PreviewAsideProps) {
-  const focusedVariant = variants[focusedVariantIndex] || null;
-
-  const headings = useMemo(() => buildHeadings(fragment), [fragment]);
-  const headingIds = useMemo(() => headings.map((h) => h.id), [headings]);
-  const activeId = useActiveHeading(headingIds);
-
-  return (
-    <Box padding="md" style={{ position: "sticky", top: "80px" }}>
-      <Stack gap="md">
-        {/* On This Page — same TOC component as docs site */}
-        <TableOfContents>
-          {headings.map((heading) => (
-            <TableOfContents.Item
-              key={heading.id}
-              id={heading.id}
-              active={activeId === heading.id}
-              indent={heading.level === 3}
-            >
-              {heading.text}
-            </TableOfContents.Item>
-          ))}
-        </TableOfContents>
-
-        {/* Variant list */}
-        {variants.length > 0 && (
-          <>
-            <Separator />
-            <Stack gap="xs">
-              <Text
-                size="xs"
-                color="tertiary"
-                style={{ textTransform: "uppercase", letterSpacing: "0.08em" }}
-              >
-                Variants
-              </Text>
-              {variants.map((variant, index) => {
-                const active = index === focusedVariantIndex;
-                const anchorId = getVariantSectionId(fragment.meta.name, variant.name);
-
-                return (
-                  <Button
-                    key={variant.name}
-                    as="a"
-                    variant={active ? "secondary" : "ghost"}
-                    size="sm"
-                    href={`#${anchorId}`}
-                    onClick={(event: React.MouseEvent) => {
-                      event.preventDefault();
-                      onSelectVariant(index);
-                    }}
-                    style={{ justifyContent: "flex-start" }}
-                  >
-                    {variant.name}
-                  </Button>
-                );
-              })}
-            </Stack>
-          </>
-        )}
-
-        <Separator />
-        <Stack gap="xs">
-          <Text size="sm" weight="medium">
-            {fragment.meta.name}
-          </Text>
-          <Text size="xs" color="secondary">
-            {focusedVariant
-              ? `Variant: ${focusedVariant.name}`
-              : "Select a variant"}
-          </Text>
-          <Text size="xs" color="tertiary">
-            Active panel: {activePanel}
-          </Text>
-        </Stack>
-        <Separator />
-        <Stack gap="xs">
-          <Button variant="ghost" size="sm" onClick={onCopyLink}>
-            Copy Link
-          </Button>
-          <Button variant="ghost" size="sm" onClick={onShowShortcuts}>
-            Keyboard Shortcuts
-          </Button>
-        </Stack>
-      </Stack>
-    </Box>
-  );
-}