@fragments-sdk/viewer 0.2.1

package/src/components/MultiViewportPreview.tsx

@@ -0,0 +1,527 @@
+// @ts-nocheck
+/**
+ * Multi-Viewport Preview - Show component at multiple sizes simultaneously
+ *
+ * Displays the component at mobile, tablet, and desktop widths
+ * with proper device mockups and horizontal scrolling.
+ */
+
+import { useState, type ReactNode } from "react";
+import { Box, Stack, Text, Button, Menu } from "@fragments-sdk/ui";
+import { ErrorBoundary } from "./ErrorBoundary.js";
+import { IsolatedPreviewFrame } from "./IsolatedPreviewFrame.js";
+import { ShadowPreview } from "./ShadowPreview.js";
+import { ChevronDownIcon } from "./Icons.js";
+
+interface ViewportConfig {
+  name: string;
+  width: number;
+  height: number;
+  type: "mobile" | "tablet" | "desktop";
+}
+
+interface MobilePreset {
+  name: string;
+  width: number;
+  height: number;
+}
+
+const MOBILE_PRESETS: MobilePreset[] = [
+  { name: "iPhone SE", width: 375, height: 667 },
+  { name: "iPhone 14", width: 390, height: 844 },
+  { name: "iPhone 14 Pro Max", width: 430, height: 932 },
+  { name: "Pixel 7", width: 412, height: 915 },
+  { name: "Galaxy S21", width: 360, height: 800 },
+];
+
+const DEFAULT_VIEWPORTS: ViewportConfig[] = [
+  { name: "Mobile", width: 375, height: 667, type: "mobile" },
+  { name: "Tablet", width: 768, height: 1024, type: "tablet" },
+  { name: "Desktop", width: 1280, height: 800, type: "desktop" },
+];
+
+interface MultiViewportPreviewProps {
+  /** Component name for error boundary */
+  componentName: string;
+  /** Fragment path for iframe rendering */
+  fragmentPath: string;
+  /** Variant name for iframe rendering */
+  variantName: string;
+  /** Render function that returns the component (fallback) */
+  renderContent: () => ReactNode;
+  /** Preview theme */
+  previewTheme: "light" | "dark";
+  /** Base zoom level (used for scaling if needed) */
+  zoom: number;
+  /** Whether to use iframe isolation */
+  useIframeIsolation?: boolean;
+}
+
+export function MultiViewportPreview({
+  componentName,
+  fragmentPath,
+  variantName,
+  renderContent,
+  previewTheme,
+  zoom,
+  useIframeIsolation = true,
+}: MultiViewportPreviewProps) {
+  const [selectedMobile, setSelectedMobile] = useState<MobilePreset>(MOBILE_PRESETS[0]);
+
+  // Build viewports with selected mobile preset
+  const viewports: ViewportConfig[] = [
+    { name: "Mobile", width: selectedMobile.width, height: selectedMobile.height, type: "mobile" },
+    { name: "Tablet", width: 768, height: 1024, type: "tablet" },
+    { name: "Desktop", width: 1280, height: 800, type: "desktop" },
+  ];
+
+  return (
+    <Box height="100%" display="flex" style={{ flexDirection: 'column' }} background="primary">
+      {/* Header */}
+      <Box paddingX="md" paddingY="sm" borderBottom background="secondary" style={{ flexShrink: 0 }}>
+        <Stack direction="row" align="center" justify="center" gap="lg">
+          {/* Mobile with dropdown */}
+          <Menu>
+            <Menu.Trigger>
+              <Button variant="ghost" size="sm">
+                <span style={{ fontSize: 18 }}>📱</span>
+                <Text size="sm" weight="medium" color="secondary">Mobile</Text>
+                <Text size="xs" color="tertiary">({selectedMobile.width}px)</Text>
+                <ChevronDownIcon style={{ width: 12, height: 12 }} />
+              </Button>
+            </Menu.Trigger>
+            <Menu.Content>
+              {MOBILE_PRESETS.map((preset) => (
+                <Menu.Item
+                  key={preset.name}
+                  onClick={() => setSelectedMobile(preset)}
+                >
+                  <Stack direction="row" justify="between" style={{ width: '100%' }}>
+                    <Text size="xs">{preset.name}</Text>
+                    <Text size="xs" color="tertiary">{preset.width}×{preset.height}</Text>
+                  </Stack>
+                </Menu.Item>
+              ))}
+            </Menu.Content>
+          </Menu>
+
+          {/* Tablet */}
+          <Stack direction="row" align="center" gap="sm">
+            <span style={{ fontSize: 18 }}>📱</span>
+            <Text size="sm" weight="medium" color="secondary">Tablet</Text>
+            <Text size="xs" color="tertiary">(768px)</Text>
+          </Stack>
+
+          {/* Desktop */}
+          <Stack direction="row" align="center" gap="sm">
+            <span style={{ fontSize: 18 }}>🖥️</span>
+            <Text size="sm" weight="medium" color="secondary">Desktop</Text>
+            <Text size="xs" color="tertiary">(1280px)</Text>
+          </Stack>
+        </Stack>
+      </Box>
+
+      {/* Viewport panels with horizontal scroll */}
+      <Box overflow="auto" style={{ flex: 1 }}>
+        <Stack direction="row" gap="lg" style={{ padding: 32, minWidth: 'max-content' }}>
+          {viewports.map((vp) => (
+            <ViewportPanel
+              key={`${vp.name}-${vp.width}`}
+              viewport={vp}
+              componentName={componentName}
+              fragmentPath={fragmentPath}
+              variantName={variantName}
+              renderContent={renderContent}
+              previewTheme={previewTheme}
+              useIframeIsolation={useIframeIsolation}
+            />
+          ))}
+        </Stack>
+      </Box>
+    </Box>
+  );
+}
+
+interface ViewportPanelProps {
+  viewport: ViewportConfig;
+  componentName: string;
+  fragmentPath: string;
+  variantName: string;
+  renderContent: () => ReactNode;
+  previewTheme: "light" | "dark";
+  useIframeIsolation: boolean;
+}
+
+function ViewportPanel({
+  viewport,
+  componentName,
+  fragmentPath,
+  variantName,
+  renderContent,
+  previewTheme,
+  useIframeIsolation,
+}: ViewportPanelProps) {
+  if (viewport.type === "desktop") {
+    return (
+      <DesktopMockup
+        width={viewport.width}
+        height={viewport.height}
+        label={viewport.name}
+        previewTheme={previewTheme}
+        componentName={componentName}
+        fragmentPath={fragmentPath}
+        variantName={variantName}
+        renderContent={renderContent}
+        useIframeIsolation={useIframeIsolation}
+      />
+    );
+  }
+
+  return (
+    <DeviceMockup
+      type={viewport.type}
+      width={viewport.width}
+      height={viewport.height}
+      label={viewport.name}
+      previewTheme={previewTheme}
+      componentName={componentName}
+      fragmentPath={fragmentPath}
+      variantName={variantName}
+      renderContent={renderContent}
+      useIframeIsolation={useIframeIsolation}
+    />
+  );
+}
+
+interface DeviceMockupProps {
+  type: "mobile" | "tablet";
+  width: number;
+  height: number;
+  label: string;
+  previewTheme: "light" | "dark";
+  componentName: string;
+  fragmentPath: string;
+  variantName: string;
+  renderContent: () => ReactNode;
+  useIframeIsolation: boolean;
+}
+
+function DeviceMockup({
+  type,
+  width,
+  height,
+  label,
+  previewTheme,
+  componentName,
+  fragmentPath,
+  variantName,
+  renderContent,
+  useIframeIsolation,
+}: DeviceMockupProps) {
+  const isMobile = type === "mobile";
+  const frameWidth = width + 24; // Add bezel width
+  const screenHeight = height;
+
+  return (
+    <Stack align="center">
+      {/* Label */}
+      <Text size="sm" weight="medium" color="tertiary" style={{ marginBottom: 12 }}>
+        {label}
+      </Text>
+
+      {/* Device frame */}
+      <div
+        style={{
+          position: 'relative',
+          flexShrink: 0,
+          width: `${frameWidth}px`,
+        }}
+      >
+        <div
+          style={{
+            position: 'relative',
+            borderRadius: 40,
+            background: '#1a1a1a',
+            padding: 12,
+            boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.1)',
+          }}
+        >
+          {/* Side buttons (mobile only) */}
+          {isMobile && (
+            <>
+              <div style={{
+                position: 'absolute',
+                left: -3,
+                top: 96,
+                width: 3,
+                height: 32,
+                background: '#2a2a2a',
+                borderRadius: '4px 0 0 4px',
+              }} />
+              <div style={{
+                position: 'absolute',
+                left: -3,
+                top: 144,
+                width: 3,
+                height: 48,
+                background: '#2a2a2a',
+                borderRadius: '4px 0 0 4px',
+              }} />
+              <div style={{
+                position: 'absolute',
+                left: -3,
+                top: 208,
+                width: 3,
+                height: 48,
+                background: '#2a2a2a',
+                borderRadius: '4px 0 0 4px',
+              }} />
+              <div style={{
+                position: 'absolute',
+                right: -3,
+                top: 128,
+                width: 3,
+                height: 64,
+                background: '#2a2a2a',
+                borderRadius: '0 4px 4px 0',
+              }} />
+            </>
+          )}
+
+          {/* Screen container */}
+          <div
+            style={{
+              position: 'relative',
+              borderRadius: 32,
+              overflow: 'hidden',
+              background: '#ffffff',
+              height: `${screenHeight}px`,
+              width: `${width}px`,
+            }}
+          >
+            {/* Notch (mobile) or Camera (tablet) */}
+            {isMobile ? (
+              <div style={{
+                position: 'absolute',
+                top: 0,
+                left: '50%',
+                transform: 'translateX(-50%)',
+                width: 120,
+                height: 30,
+                background: '#1a1a1a',
+                borderRadius: '0 0 16px 16px',
+                zIndex: 10,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: 8,
+              }}>
+                <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#2a2a2a' }} />
+                <div style={{ width: 48, height: 6, borderRadius: 9999, background: '#2a2a2a' }} />
+              </div>
+            ) : (
+              <div style={{
+                position: 'absolute',
+                top: 8,
+                left: '50%',
+                transform: 'translateX(-50%)',
+                width: 12,
+                height: 12,
+                borderRadius: '50%',
+                background: '#2a2a2a',
+                zIndex: 10,
+              }} />
+            )}
+
+            {/* Screen content */}
+            <div
+              style={{ width: '100%', height: '100%', overflow: 'hidden' }}
+              data-theme={previewTheme}
+            >
+              {useIframeIsolation ? (
+                <IsolatedPreviewFrame
+                  fragmentPath={fragmentPath}
+                  variantName={variantName}
+                  theme={previewTheme}
+                  width="100%"
+                  height="100%"
+                  minHeight={screenHeight}
+                />
+              ) : (
+                <ShadowPreview theme={previewTheme} width="100%" height="100%" minHeight={screenHeight}>
+                  <div style={{
+                    paddingTop: isMobile ? 40 : 24,
+                    paddingLeft: 16,
+                    paddingRight: 16,
+                    paddingBottom: 16,
+                  }}>
+                    <ErrorBoundary
+                      componentName={componentName}
+                      fallback={
+                        <Text size="xs" color="tertiary" style={{ padding: 8 }}>
+                          Error rendering at {width}px
+                        </Text>
+                      }
+                    >
+                      {renderContent()}
+                    </ErrorBoundary>
+                  </div>
+                </ShadowPreview>
+              )}
+            </div>
+
+            {/* Home indicator */}
+            <div style={{
+              position: 'absolute',
+              bottom: 8,
+              left: '50%',
+              transform: 'translateX(-50%)',
+              width: 100,
+              height: 4,
+              background: 'rgba(0,0,0,0.2)',
+              borderRadius: 9999,
+              zIndex: 10,
+            }} />
+          </div>
+        </div>
+      </div>
+    </Stack>
+  );
+}
+
+interface DesktopMockupProps {
+  width: number;
+  height: number;
+  label: string;
+  previewTheme: "light" | "dark";
+  componentName: string;
+  fragmentPath: string;
+  variantName: string;
+  renderContent: () => ReactNode;
+  useIframeIsolation: boolean;
+}
+
+function DesktopMockup({
+  width,
+  height,
+  label,
+  previewTheme,
+  componentName,
+  fragmentPath,
+  variantName,
+  renderContent,
+  useIframeIsolation,
+}: DesktopMockupProps) {
+  return (
+    <Stack align="center">
+      {/* Label */}
+      <Text size="sm" weight="medium" color="tertiary" style={{ marginBottom: 12 }}>
+        {label}
+      </Text>
+
+      {/* Monitor frame */}
+      <Stack align="center">
+        {/* Screen */}
+        <div
+          style={{
+            position: 'relative',
+            background: '#1a1a1a',
+            borderRadius: 8,
+            padding: 8,
+            boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.1)',
+          }}
+        >
+          {/* Browser chrome */}
+          <div style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 8,
+            padding: '8px 12px',
+            background: '#2a2a2a',
+            borderRadius: '6px 6px 0 0',
+          }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+              <div style={{ width: 12, height: 12, borderRadius: '50%', background: '#ff5f57' }} />
+              <div style={{ width: 12, height: 12, borderRadius: '50%', background: '#ffbd2e' }} />
+              <div style={{ width: 12, height: 12, borderRadius: '50%', background: '#28ca41' }} />
+            </div>
+            <div style={{ flex: 1, margin: '0 16px' }}>
+              <div style={{
+                height: 24,
+                background: '#3a3a3a',
+                borderRadius: 6,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                padding: '0 12px',
+              }}>
+                <span style={{
+                  fontSize: 12,
+                  color: '#9ca3af',
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                }}>
+                  localhost:6006 — {width}px
+                </span>
+              </div>
+            </div>
+          </div>
+
+          {/* Screen content */}
+          <div
+            style={{
+              overflow: 'hidden',
+              width: `${width}px`,
+              height: `${height}px`,
+            }}
+            data-theme={previewTheme}
+          >
+            {useIframeIsolation ? (
+              <IsolatedPreviewFrame
+                fragmentPath={fragmentPath}
+                variantName={variantName}
+                theme={previewTheme}
+                width="100%"
+                height="100%"
+                minHeight={height}
+              />
+            ) : (
+              <ShadowPreview theme={previewTheme} width="100%" height="100%" minHeight={height}>
+                <div style={{ padding: 24 }}>
+                  <ErrorBoundary
+                    componentName={componentName}
+                    fallback={
+                      <Text size="xs" color="tertiary" style={{ padding: 8 }}>
+                        Error rendering at {width}px
+                      </Text>
+                    }
+                  >
+                    {renderContent()}
+                  </ErrorBoundary>
+                </div>
+              </ShadowPreview>
+            )}
+          </div>
+        </div>
+
+        {/* Monitor stand */}
+        <div style={{
+          width: 80,
+          height: 16,
+          background: 'linear-gradient(to bottom, #2a2a2a, #1a1a1a)',
+          borderRadius: '0 0 2px 2px',
+        }} />
+        <div style={{
+          width: 128,
+          height: 8,
+          background: '#1a1a1a',
+          borderRadius: 9999,
+          boxShadow: '0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)',
+        }} />
+      </Stack>
+    </Stack>
+  );
+}
+
+export { DEFAULT_VIEWPORTS as VIEWPORTS, MOBILE_PRESETS };

package/src/components/NoVariantsMessage.tsx

@@ -0,0 +1,59 @@
+import type { FragmentDefinition } from '@fragments-sdk/core';
+import { Stack, Text, Alert, EmptyState } from "@fragments-sdk/ui";
+import { LoadErrorMessage } from "./LoadErrorMessage.js";
+
+interface NoVariantsMessageProps {
+  fragment?: FragmentDefinition;
+}
+
+export function NoVariantsMessage({ fragment }: NoVariantsMessageProps) {
+  // Check for load error (missing dependencies, schema errors, etc.)
+  const loadError = (fragment as any)?._loadError;
+  if (loadError) {
+    return <LoadErrorMessage error={loadError} componentName={fragment?.meta?.name} />;
+  }
+
+  const skippedVariants = (fragment?._generated as any)?.skippedVariants;
+
+  if (!skippedVariants || skippedVariants.length === 0) {
+    return (
+      <EmptyState style={{ height: "100%" }}>
+        <EmptyState.Description>No variants defined</EmptyState.Description>
+      </EmptyState>
+    );
+  }
+
+  return (
+    <Stack align="center" justify="center" style={{ height: "100%", padding: "24px" }}>
+      <Alert variant="info">
+        <Alert.Body>
+          <Alert.Title>
+            {skippedVariants.length} variant{skippedVariants.length === 1 ? "" : "s"} skipped
+          </Alert.Title>
+          <Alert.Content>
+            <Stack direction="column" gap="sm">
+              <Text size="xs" color="secondary">
+                These variants couldn't be rendered because they use syntax the parser doesn't
+                support yet:
+              </Text>
+              <ul style={{ marginTop: "4px", marginLeft: "16px", listStyleType: "disc" }}>
+                {skippedVariants.map((sv: any, i: number) => (
+                  <li key={i}>
+                    <Text size="xs" color="secondary">
+                      <Text as="span" size="xs" weight="semibold">
+                        {sv.name}:
+                      </Text>{" "}
+                      <Text as="span" size="xs" color="tertiary">
+                        {sv.reason}
+                      </Text>
+                    </Text>
+                  </li>
+                ))}
+              </ul>
+            </Stack>
+          </Alert.Content>
+        </Alert.Body>
+      </Alert>
+    </Stack>
+  );
+}