@fragments-sdk/cli 0.10.1 → 0.12.1

package/src/viewer/components/PanelShell.tsx

@@ -1,161 +0,0 @@
-/**
- * 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/viewer/components/PerformancePanel.tsx

@@ -1,304 +0,0 @@
-/**
- * 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 '../../core/index.js';
-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>
-  );
-}