@fragments-sdk/viewer 0.2.1

package/src/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>
+  );
+}

package/src/components/PerformancePanel.tsx

@@ -0,0 +1,304 @@
+/**
+ * Performance Panel — bundle size visualization in the viewer.
+ *
+ * Fetches performance data from /fragments/perf-data (served by the
+ * Vite dev server from fragments.json) and displays:
+ * - Gzipped and raw bundle size
+ * - Complexity tier badge
+ * - Budget bar with percentage
+ * - Over-budget alert when applicable
+ * - Empty state when no data (prompts `fragments perf`)
+ */
+
+import { useState, useEffect } from 'react';
+import { Card, Badge, Text, Stack, Alert, Collapsible, Box } from '@fragments-sdk/ui';
+import { Lightning, Package, FileCode, Star } from '@phosphor-icons/react';
+import { BRAND } from '@fragments-sdk/core';
+import { PanelShell } from './PanelShell.js';
+
+interface ImportEntry {
+  path: string;
+  bytes: number;
+  percent: number;
+}
+
+interface PerformanceData {
+  bundleSize: number;
+  rawSize: number;
+  complexity: 'lightweight' | 'moderate' | 'heavy';
+  budgetPercent: number;
+  overBudget: boolean;
+  measuredAt: string;
+  imports?: ImportEntry[];
+}
+
+interface PerfDataResponse {
+  summary: {
+    preset: string;
+    budget: number;
+    total: number;
+    overBudget: number;
+    tiers: Record<string, number>;
+  } | null;
+  components: Record<string, PerformanceData>;
+}
+
+interface PerformancePanelProps {
+  componentName: string;
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  const kb = bytes / 1024;
+  return kb < 10 ? `${kb.toFixed(1)} KB` : `${Math.round(kb)} KB`;
+}
+
+function tierVariant(tier: string): 'success' | 'warning' | 'danger' {
+  switch (tier) {
+    case 'lightweight': return 'success';
+    case 'moderate': return 'warning';
+    case 'heavy': return 'danger';
+    default: return 'warning';
+  }
+}
+
+function BudgetBar({ percent }: { percent: number }) {
+  const capped = Math.min(percent, 100);
+  const isOver = percent > 100;
+  const color = isOver ? 'var(--fui-color-danger, #e53e3e)'
+    : percent > 80 ? 'var(--fui-color-warning, #dd6b20)'
+    : 'var(--fui-color-success, #38a169)';
+
+  return (
+    <div style={{ width: '100%' }}>
+      <div style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        marginBottom: '4px',
+      }}>
+        <Text size="sm" color="secondary">Budget usage</Text>
+        <Text size="sm" weight="semibold" style={{ color }}>
+          {percent}%
+        </Text>
+      </div>
+      <div style={{
+        width: '100%',
+        height: '8px',
+        borderRadius: '4px',
+        backgroundColor: 'var(--fui-color-surface-2, #e2e8f0)',
+        overflow: 'hidden',
+      }}>
+        <div style={{
+          width: `${capped}%`,
+          height: '100%',
+          borderRadius: '4px',
+          backgroundColor: color,
+          transition: 'width 0.3s ease',
+        }} />
+      </div>
+    </div>
+  );
+}
+
+/** Labels are already clean from the backend (e.g., "react-markdown", "Markdown (self)") */
+
+function ImportBreakdown({ imports, rawSize }: { imports: ImportEntry[]; rawSize: number }) {
+  return (
+    <Collapsible>
+      <Collapsible.Trigger style={{ cursor: 'pointer' }}>
+        <Text size="sm" weight="semibold">
+          Import breakdown ({imports.length} file{imports.length !== 1 ? 's' : ''})
+        </Text>
+      </Collapsible.Trigger>
+      <Collapsible.Content>
+        <div style={{ marginTop: '8px' }}>
+          {imports.map((imp) => {
+            const barWidth = Math.max(1, Math.round(imp.percent / 2));
+            return (
+              <div
+                key={imp.path}
+                style={{
+                  display: 'grid',
+                  gridTemplateColumns: '1fr 70px 45px minmax(20px, 100px)',
+                  alignItems: 'center',
+                  gap: '8px',
+                  padding: '4px 0',
+                  borderBottom: '1px solid var(--fui-color-border, #2d3748)',
+                }}
+              >
+                <Text
+                  size="xs"
+                  color="secondary"
+                  style={{
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                    fontFamily: 'var(--fui-font-mono, monospace)',
+                  }}
+                  title={imp.path}
+                >
+                  {imp.path}
+                </Text>
+                <Text size="xs" weight="semibold" style={{ textAlign: 'right' }}>
+                  {formatBytes(imp.bytes)}
+                </Text>
+                <Text size="xs" color="tertiary" style={{ textAlign: 'right' }}>
+                  {imp.percent}%
+                </Text>
+                <div style={{
+                  height: '6px',
+                  borderRadius: '3px',
+                  backgroundColor: 'var(--fui-color-surface-2, #2d3748)',
+                  overflow: 'hidden',
+                }}>
+                  <div style={{
+                    width: `${Math.min(barWidth * 2, 100)}%`,
+                    height: '100%',
+                    borderRadius: '3px',
+                    backgroundColor: imp.percent > 50
+                      ? 'var(--fui-color-danger, #e53e3e)'
+                      : imp.percent > 20
+                      ? 'var(--fui-color-warning, #dd6b20)'
+                      : 'var(--fui-color-accent, #4299e1)',
+                  }} />
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </Collapsible.Content>
+    </Collapsible>
+  );
+}
+
+export function PerformancePanel({ componentName }: PerformancePanelProps) {
+  const [perfData, setPerfData] = useState<PerformanceData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [noData, setNoData] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function fetchPerfData() {
+      setLoading(true);
+      try {
+        const res = await fetch('/fragments/perf-data');
+        if (!res.ok) {
+          setNoData(true);
+          return;
+        }
+        const data: PerfDataResponse = await res.json();
+        if (!cancelled) {
+          const componentPerf = data.components[componentName];
+          if (componentPerf) {
+            setPerfData(componentPerf);
+            setNoData(false);
+          } else {
+            setPerfData(null);
+            setNoData(true);
+          }
+        }
+      } catch {
+        if (!cancelled) {
+          setNoData(true);
+        }
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      }
+    }
+
+    fetchPerfData();
+    return () => { cancelled = true; };
+  }, [componentName]);
+
+  const showEmpty = !loading && (noData || !perfData);
+
+  const emptyConfig = showEmpty ? {
+    icon: <Lightning size={24} weight="regular" style={{ color: 'var(--text-tertiary)' }} />,
+    title: "No performance data",
+    description: (
+      <>
+        Run <Box as="code" padding="xs" background="secondary" rounded="sm" style={{ fontSize: '12px', display: 'inline', fontFamily: 'var(--fui-font-mono, monospace)' }}>{BRAND.cliCommand} perf</Box> to measure bundle sizes, then reload the viewer.
+      </>
+    ),
+  } : undefined;
+
+  // Safe destructure — only used when PanelShell renders children (not loading/empty)
+  const { bundleSize = 0, rawSize = 0, complexity = 'lightweight' as const, budgetPercent = 0, overBudget = false, measuredAt = '' } = perfData || {};
+  const measuredDate = measuredAt ? new Date(measuredAt).toLocaleString() : '';
+
+  return (
+    <PanelShell loading={loading} empty={emptyConfig}>
+      <Stack gap="md">
+        {overBudget && (
+          <Alert variant="danger">
+            <strong>{componentName}</strong> exceeds its performance budget ({budgetPercent}% of allowed size).
+            Consider code splitting, lazy loading heavy dependencies, or tree-shaking unused exports.
+          </Alert>
+        )}
+
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '12px' }}>
+          <Card>
+            <Card.Body>
+              <Stack gap="xs">
+                <Stack direction="row" align="center" gap="xs">
+                  <Package size={14} weight="regular" style={{ color: 'var(--text-tertiary)' }} />
+                  <Text size="xs" color="secondary">Gzipped</Text>
+                </Stack>
+                <Text size="xl" weight="bold">{formatBytes(bundleSize)}</Text>
+              </Stack>
+            </Card.Body>
+          </Card>
+
+          <Card>
+            <Card.Body>
+              <Stack gap="xs">
+                <Stack direction="row" align="center" gap="xs">
+                  <FileCode size={14} weight="regular" style={{ color: 'var(--text-tertiary)' }} />
+                  <Text size="xs" color="secondary">Raw (minified)</Text>
+                </Stack>
+                <Text size="xl" weight="bold">{formatBytes(rawSize)}</Text>
+              </Stack>
+            </Card.Body>
+          </Card>
+
+          <Card>
+            <Card.Body>
+              <Stack gap="xs">
+                <Stack direction="row" align="center" gap="xs">
+                  <Star size={14} weight="regular" style={{ color: 'var(--text-tertiary)' }} />
+                  <Text size="xs" color="secondary">Complexity</Text>
+                </Stack>
+                <div>
+                  <Badge variant={tierVariant(complexity)} size="lg">
+                    {complexity}
+                  </Badge>
+                </div>
+              </Stack>
+            </Card.Body>
+          </Card>
+        </div>
+
+        <Card>
+          <Card.Body>
+            <BudgetBar percent={budgetPercent} />
+          </Card.Body>
+        </Card>
+
+        {perfData?.imports && perfData.imports.length > 0 && (
+          <Card>
+            <Card.Body>
+              <ImportBreakdown imports={perfData.imports} rawSize={rawSize} />
+            </Card.Body>
+          </Card>
+        )}
+
+        <Text size="xs" color="tertiary">
+          Measured {measuredDate}. CSS excluded (JS-only measurement).
+        </Text>
+      </Stack>
+    </PanelShell>
+  );
+}