@fragments-sdk/cli 0.8.1 → 0.9.1

package/src/viewer/components/LoadErrorMessage.tsx

@@ -0,0 +1,102 @@
+import { Stack, Text, Alert, Box } from "@fragments-sdk/ui";
+
+interface LoadErrorMessageProps {
+  error: { message: string; dependencies: string[] };
+  componentName?: string;
+}
+
+export function LoadErrorMessage({ error, componentName }: LoadErrorMessageProps) {
+  const deps = error.dependencies || [];
+  const errorMessage = error.message || "Unknown error";
+
+  // Determine if the error is a missing module/dependency issue
+  const isModuleError =
+    /Failed to resolve import|Cannot find module|Module not found|does not provide an export/.test(
+      errorMessage
+    );
+
+  // Only suggest packages if the error is actually about missing modules
+  let suggestedPackages: string[] = [];
+  if (isModuleError) {
+    if (deps.length > 0) {
+      suggestedPackages = [...deps];
+    } else {
+      const match = errorMessage.match(/Failed to resolve import ["']([^"']+)["']/);
+      if (match) {
+        suggestedPackages = [match[1]];
+      }
+    }
+  }
+
+  const hasMissingDeps = suggestedPackages.length > 0;
+  const installCmd = `pnpm add ${suggestedPackages.join(" ")}`;
+
+  return (
+    <Stack align="center" justify="center" style={{ height: "100%", padding: "24px" }}>
+      <Alert variant="warning">
+        <Alert.Body>
+          <Alert.Title>{hasMissingDeps ? "Missing Dependencies" : "Failed to Load"}</Alert.Title>
+          <Alert.Content>
+            <Stack direction="column" gap="sm">
+              {hasMissingDeps ? (
+                <>
+                  <Text size="xs" color="secondary">
+                    {componentName ? `${componentName} requires` : "This component requires"}{" "}
+                    packages that are not installed in your project.
+                  </Text>
+                  <Text size="xs" weight="semibold" color="secondary">
+                    Install with:
+                  </Text>
+                  <Box
+                    as="code"
+                    padding="sm"
+                    background="tertiary"
+                    rounded="sm"
+                    style={{
+                      display: "block",
+                      fontFamily: "monospace",
+                      fontSize: "12px",
+                      userSelect: "all",
+                    }}
+                  >
+                    {installCmd}
+                  </Box>
+                  <Text size="xs" color="tertiary">
+                    After installing, restart the dev server.
+                  </Text>
+                </>
+              ) : (
+                <>
+                  <Text size="xs" color="secondary">
+                    {componentName ? `${componentName} couldn't` : "This component couldn't"} be
+                    loaded. This may be due to a schema validation error or missing imports.
+                  </Text>
+                  <Text size="xs" weight="semibold" color="secondary">
+                    Error:
+                  </Text>
+                  <Box
+                    as="pre"
+                    padding="sm"
+                    background="tertiary"
+                    rounded="sm"
+                    style={{
+                      fontFamily: "monospace",
+                      fontSize: "11px",
+                      whiteSpace: "pre-wrap",
+                      wordBreak: "break-word",
+                      margin: 0,
+                      maxHeight: "200px",
+                      overflow: "auto",
+                    }}
+                  >
+                    {errorMessage}
+                  </Box>
+                </>
+              )}
+            </Stack>
+          </Alert.Content>
+        </Alert.Body>
+      </Alert>
+    </Stack>
+  );
+}

package/src/viewer/components/MultiViewportPreview.tsx

@@ -7,6 +7,7 @@
  */
 
 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 { ChevronDownIcon } from "./Icons.js";
@@ -65,9 +66,6 @@ export function MultiViewportPreview({
   useIframeIsolation = true,
 }: MultiViewportPreviewProps) {
   const [selectedMobile, setSelectedMobile] = useState<MobilePreset>(MOBILE_PRESETS[0]);
-  const [showMobileDropdown, setShowMobileDropdown] = useState(false);
-  const [hoveredPreset, setHoveredPreset] = useState<string | null>(null);
-  const [mobileButtonHovered, setMobileButtonHovered] = useState(false);
 
   // Build viewports with selected mobile preset
   const viewports: ViewportConfig[] = [
@@ -77,123 +75,54 @@ export function MultiViewportPreview({
   ];
 
   return (
-    <div style={{
-      height: '100%',
-      display: 'flex',
-      flexDirection: 'column',
-      background: 'var(--bg-primary)',
-    }}>
+    <Box height="100%" display="flex" style={{ flexDirection: 'column' }} background="primary">
       {/* Header */}
-      <div style={{
-        flexShrink: 0,
-        padding: '12px 16px',
-        borderBottom: '1px solid var(--border)',
-        background: 'var(--bg-secondary)',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        gap: 32,
-      }}>
-        {/* Mobile with dropdown */}
-        <div style={{ position: 'relative' }}>
-          <button
-            onClick={() => setShowMobileDropdown(!showMobileDropdown)}
-            onMouseEnter={() => setMobileButtonHovered(true)}
-            onMouseLeave={() => setMobileButtonHovered(false)}
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              gap: 8,
-              fontSize: 14,
-              padding: '4px 8px',
-              borderRadius: 4,
-              transition: 'background-color 0.15s',
-              background: mobileButtonHovered ? 'var(--bg-hover)' : 'transparent',
-              border: 'none',
-              cursor: 'pointer',
-              color: 'inherit',
-            }}
-          >
-            <span style={{ fontSize: 18 }}>📱</span>
-            <span style={{ fontWeight: 500, color: 'var(--text-secondary)' }}>Mobile</span>
-            <span style={{ fontSize: 12, color: 'var(--text-tertiary)' }}>({selectedMobile.width}px)</span>
-            <ChevronDownIcon style={{ width: 12, height: 12, color: 'var(--text-tertiary)' }} />
-          </button>
-
-          {showMobileDropdown && (
-            <>
-              <div
-                style={{
-                  position: 'fixed',
-                  inset: 0,
-                  zIndex: 10,
-                }}
-                onClick={() => setShowMobileDropdown(false)}
-              />
-              <div style={{
-                position: 'absolute',
-                top: '100%',
-                left: 0,
-                marginTop: 4,
-                zIndex: 20,
-                background: 'var(--bg-elevated)',
-                border: '1px solid var(--border)',
-                borderRadius: 8,
-                boxShadow: '0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)',
-                padding: '4px 0',
-                minWidth: 180,
-              }}>
-                {MOBILE_PRESETS.map((preset) => (
-                  <button
-                    key={preset.name}
-                    onClick={() => {
-                      setSelectedMobile(preset);
-                      setShowMobileDropdown(false);
-                    }}
-                    onMouseEnter={() => setHoveredPreset(preset.name)}
-                    onMouseLeave={() => setHoveredPreset(null)}
-                    style={{
-                      width: '100%',
-                      padding: '6px 12px',
-                      textAlign: 'left',
-                      fontSize: 12,
-                      transition: 'background-color 0.15s',
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'space-between',
-                      color: selectedMobile.name === preset.name ? '#3b82f6' : 'var(--text-secondary)',
-                      background: hoveredPreset === preset.name ? 'var(--bg-hover)' : 'transparent',
-                      border: 'none',
-                      cursor: 'pointer',
-                    }}
-                  >
-                    <span>{preset.name}</span>
-                    <span style={{ color: 'var(--text-tertiary)' }}>{preset.width}×{preset.height}</span>
-                  </button>
-                ))}
-              </div>
-            </>
-          )}
-        </div>
+      <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 */}
-        <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 14 }}>
-          <span style={{ fontSize: 18 }}>📱</span>
-          <span style={{ fontWeight: 500, color: 'var(--text-secondary)' }}>Tablet</span>
-          <span style={{ fontSize: 12, color: 'var(--text-tertiary)' }}>(768px)</span>
-        </div>
+          {/* 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 */}
-        <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 14 }}>
-          <span style={{ fontSize: 18 }}>🖥️</span>
-          <span style={{ fontWeight: 500, color: 'var(--text-secondary)' }}>Desktop</span>
-          <span style={{ fontSize: 12, color: 'var(--text-tertiary)' }}>(1280px)</span>
-        </div>
-      </div>
+          {/* 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 */}
-      <div style={{ flex: 1, overflowX: 'auto', overflowY: 'auto' }}>
-        <div style={{ display: 'flex', gap: 32, padding: 32, minWidth: 'max-content' }}>
+      <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}`}
@@ -206,9 +135,9 @@ export function MultiViewportPreview({
               useIframeIsolation={useIframeIsolation}
             />
           ))}
-        </div>
-      </div>
-    </div>
+        </Stack>
+      </Box>
+    </Box>
   );
 }
 
@@ -293,16 +222,11 @@ function DeviceMockup({
   const screenHeight = height;
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+    <Stack align="center">
       {/* Label */}
-      <div style={{
-        marginBottom: 12,
-        fontSize: 14,
-        fontWeight: 500,
-        color: 'var(--text-tertiary)',
-      }}>
+      <Text size="sm" weight="medium" color="tertiary" style={{ marginBottom: 12 }}>
         {label}
-      </div>
+      </Text>
 
       {/* Device frame */}
       <div
@@ -432,9 +356,9 @@ function DeviceMockup({
                   <ErrorBoundary
                     componentName={componentName}
                     fallback={
-                      <div style={{ fontSize: 12, color: '#ef4444', padding: 8 }}>
+                      <Text size="xs" color="tertiary" style={{ padding: 8 }}>
                         Error rendering at {width}px
-                      </div>
+                      </Text>
                     }
                   >
                     {renderContent()}
@@ -458,7 +382,7 @@ function DeviceMockup({
           </div>
         </div>
       </div>
-    </div>
+    </Stack>
   );
 }
 
@@ -486,19 +410,14 @@ function DesktopMockup({
   useIframeIsolation,
 }: DesktopMockupProps) {
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+    <Stack align="center">
       {/* Label */}
-      <div style={{
-        marginBottom: 12,
-        fontSize: 14,
-        fontWeight: 500,
-        color: 'var(--text-tertiary)',
-      }}>
+      <Text size="sm" weight="medium" color="tertiary" style={{ marginBottom: 12 }}>
         {label}
-      </div>
+      </Text>
 
       {/* Monitor frame */}
-      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+      <Stack align="center">
         {/* Screen */}
         <div
           style={{
@@ -569,9 +488,9 @@ function DesktopMockup({
                 <ErrorBoundary
                   componentName={componentName}
                   fallback={
-                    <div style={{ fontSize: 12, color: '#ef4444', padding: 8 }}>
+                    <Text size="xs" color="tertiary" style={{ padding: 8 }}>
                       Error rendering at {width}px
-                    </div>
+                    </Text>
                   }
                 >
                   {renderContent()}
@@ -595,8 +514,8 @@ function DesktopMockup({
           borderRadius: 9999,
           boxShadow: '0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)',
         }} />
-      </div>
-    </div>
+      </Stack>
+    </Stack>
   );
 }
 

package/src/viewer/components/NoVariantsMessage.tsx

@@ -0,0 +1,59 @@
+import type { FragmentDefinition } from "../../core/index.js";
+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>
+  );
+}

package/src/viewer/components/PanelShell.tsx

@@ -0,0 +1,161 @@
+/**
+ * PanelShell — Consistent wrapper for bottom panel tabs.
+ *
+ * Provides standardized structure for all 5 bottom panel tabs:
+ * - Optional toolbar (badges, filters, action buttons)
+ * - Scrollable body with consistent padding
+ * - Loading skeleton state
+ * - Empty state with icon, title, description, action
+ * - Error state with Alert
+ *
+ * The tab label (e.g., "Graph", "Performance") is rendered by
+ * ResizablePanel — PanelShell does NOT render a title.
+ */
+
+import type { ReactNode } from "react";
+import { Stack, Box, EmptyState, Alert } from "@fragments-sdk/ui";
+
+interface PanelShellEmptyConfig {
+  /** Phosphor icon element */
+  icon: ReactNode;
+  /** Empty state title */
+  title: string;
+  /** Optional description */
+  description?: ReactNode;
+  /** Optional action slot (e.g. Button, CodeBlock) */
+  action?: ReactNode;
+}
+
+export interface PanelShellProps {
+  /** Optional toolbar content (badges, filters, action buttons) */
+  toolbar?: ReactNode;
+  /** Main body content */
+  children: ReactNode;
+  /** Show loading skeleton instead of children */
+  loading?: boolean;
+  /** Custom loading content (defaults to generic skeleton) */
+  loadingContent?: ReactNode;
+  /** Empty state config — renders when provided (instead of children) */
+  empty?: PanelShellEmptyConfig;
+  /** Error message — renders Alert */
+  error?: string;
+  /** Body padding (default: "md") */
+  bodyPadding?: "sm" | "md" | "lg" | "none";
+}
+
+function DefaultSkeleton() {
+  return (
+    <Stack gap="md">
+      {[0, 1, 2].map((i) => (
+        <div
+          key={i}
+          style={{
+            height: "48px",
+            borderRadius: "8px",
+            background: "var(--bg-hover)",
+            animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+            animationDelay: `${i * 100}ms`,
+          }}
+        />
+      ))}
+    </Stack>
+  );
+}
+
+export function PanelShell({
+  toolbar,
+  children,
+  loading = false,
+  loadingContent,
+  empty,
+  error,
+  bodyPadding = "md",
+}: PanelShellProps) {
+  const padding = bodyPadding !== "none" ? bodyPadding : undefined;
+
+  const renderBody = (): ReactNode => {
+    if (loading) {
+      return (
+        <Box overflow="auto" padding={padding} style={{ flex: 1 }}>
+          {loadingContent || <DefaultSkeleton />}
+        </Box>
+      );
+    }
+
+    if (error) {
+      return (
+        <Box overflow="auto" padding={padding} style={{ flex: 1 }}>
+          <Alert variant="danger">{error}</Alert>
+        </Box>
+      );
+    }
+
+    if (empty) {
+      return (
+        <Stack
+          align="center"
+          justify="center"
+          style={{ flex: 1, padding: "32px" }}
+        >
+          <EmptyState>
+            <EmptyState.Icon>
+              <Box
+                rounded="full"
+                display="flex"
+                style={{
+                  width: 48,
+                  height: 48,
+                  alignItems: "center",
+                  justifyContent: "center",
+                  background: "var(--bg-hover)",
+                }}
+              >
+                {empty.icon}
+              </Box>
+            </EmptyState.Icon>
+            <EmptyState.Title>{empty.title}</EmptyState.Title>
+            {empty.description && (
+              <EmptyState.Description>
+                {empty.description}
+              </EmptyState.Description>
+            )}
+            {empty.action && (
+              <Box
+                style={{ marginTop: "16px", width: "100%", maxWidth: "400px" }}
+              >
+                {empty.action}
+              </Box>
+            )}
+          </EmptyState>
+        </Stack>
+      );
+    }
+
+    return (
+      <Box overflow="auto" padding={padding} style={{ flex: 1 }}>
+        {children}
+      </Box>
+    );
+  };
+
+  return (
+    <Stack style={{ height: "100%" }}>
+      {toolbar && (
+        <Box
+          paddingX="sm"
+          paddingY="xs"
+          borderBottom
+          style={{
+            flexShrink: 0,
+            minHeight: "36px",
+            display: "flex",
+            alignItems: "center",
+          }}
+        >
+          {toolbar}
+        </Box>
+      )}
+      {renderBody()}
+    </Stack>
+  );
+}