@fragments-sdk/cli 0.10.1 → 0.12.1

package/src/viewer/components/BottomPanel.tsx

@@ -1,288 +0,0 @@
-/**
- * BottomPanel component - the tabbed panel at the bottom of the viewer.
- * Uses the Drawer component from @fragments-sdk/ui as a non-modal bottom sheet.
- * Contains Styles, Accessibility, Interactions, Graph, and Performance tabs.
- */
-
-import { memo, useCallback, useState, useEffect, useRef } from "react";
-import type { FragmentDefinition, FragmentVariant } from "../../core/index.js";
-import { Drawer, Tabs, Button, Tooltip } from "@fragments-sdk/ui";
-import { Terminal } from "@phosphor-icons/react";
-import { BRAND } from "../../core/index.js";
-import { TokenStylePanel } from "./TokenStylePanel.js";
-import { AccessibilityPanel } from "./AccessibilityPanel.js";
-import { InteractionsPanel } from "./InteractionsPanel.js";
-import { ComponentGraph } from "./ComponentGraph.js";
-import { PerformancePanel } from "./PerformancePanel.js";
-import type { ActivePanel } from "../hooks/useAppState.js";
-
-// Persist panel height to localStorage
-const HEIGHT_KEY = `${BRAND.storagePrefix}panel-height`;
-const MIN_HEIGHT = 120;
-const MAX_HEIGHT = 600;
-const DEFAULT_HEIGHT = 240;
-
-function loadHeight(): number {
-  try {
-    const v = localStorage.getItem(HEIGHT_KEY);
-    return v ? Math.max(MIN_HEIGHT, Math.min(MAX_HEIGHT, Number(v))) : DEFAULT_HEIGHT;
-  } catch {
-    return DEFAULT_HEIGHT;
-  }
-}
-
-function saveHeight(h: number) {
-  try {
-    localStorage.setItem(HEIGHT_KEY, String(h));
-  } catch {
-    // Ignore storage errors
-  }
-}
-
-interface BottomPanelProps {
-  // Component data
-  fragment: FragmentDefinition;
-  variant: FragmentVariant;
-  fragments: Array<{ path: string; fragment: FragmentDefinition }>;
-
-  // Panel state
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  activePanel: ActivePanel;
-  onPanelChange: (panel: ActivePanel) => void;
-
-  // Figma
-  figmaUrl?: string;
-  figmaStyles: Record<string, string> | null;
-  renderedStyles: Record<string, string> | null;
-  figmaLoading: boolean;
-  figmaError?: string;
-  onFetchFigma: () => void;
-  onRefreshRendered: () => void;
-
-  // Navigation
-  onNavigateToComponent: (name: string) => void;
-
-  // Keys
-  previewKey: number;
-  fragmentKey: string;
-}
-
-export const BottomPanel = memo(function BottomPanel({
-  fragment,
-  variant,
-  fragments,
-  open,
-  onOpenChange,
-  activePanel,
-  onPanelChange,
-  figmaUrl,
-  figmaStyles,
-  renderedStyles,
-  figmaLoading,
-  figmaError,
-  onFetchFigma,
-  onRefreshRendered,
-  onNavigateToComponent,
-  previewKey,
-  fragmentKey,
-}: BottomPanelProps) {
-  // Resize state
-  const [height, setHeight] = useState(loadHeight);
-  const [isResizing, setIsResizing] = useState(false);
-  const startYRef = useRef(0);
-  const startHeightRef = useRef(0);
-
-  // Save height changes
-  useEffect(() => {
-    saveHeight(height);
-  }, [height]);
-
-  const handleMouseDown = useCallback(
-    (e: React.MouseEvent) => {
-      e.preventDefault();
-      setIsResizing(true);
-      startYRef.current = e.clientY;
-      startHeightRef.current = height;
-    },
-    [height]
-  );
-
-  useEffect(() => {
-    if (!isResizing) return;
-
-    const handleMouseMove = (e: MouseEvent) => {
-      const deltaY = startYRef.current - e.clientY;
-      setHeight(Math.max(MIN_HEIGHT, Math.min(MAX_HEIGHT, startHeightRef.current + deltaY)));
-    };
-    const handleMouseUp = () => setIsResizing(false);
-
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-    document.body.style.cursor = "ns-resize";
-    document.body.style.userSelect = "none";
-
-    return () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-      document.body.style.cursor = "";
-      document.body.style.userSelect = "";
-    };
-  }, [isResizing]);
-
-  // Tab change handler with Figma side effects
-  const handleStylesClick = useCallback(() => {
-    onPanelChange("styles");
-    onFetchFigma();
-    setTimeout(onRefreshRendered, 100);
-  }, [onPanelChange, onFetchFigma, onRefreshRendered]);
-
-  const handleTabChange = useCallback(
-    (value: string | number) => {
-      const panel = String(value);
-      if (panel === "styles") {
-        handleStylesClick();
-      } else {
-        onPanelChange(panel as ActivePanel);
-      }
-    },
-    [handleStylesClick, onPanelChange]
-  );
-
-  return (
-    <Drawer open={open} onOpenChange={onOpenChange} modal={false}>
-      {/* Floating trigger FAB — fixed bottom-right, moves up when drawer is open */}
-      <Tooltip content={open ? "Close dev tools" : "Open dev tools"} side="left">
-        <Drawer.Trigger asChild>
-          <Button
-            variant={open ? "secondary" : "primary"}
-            icon
-            size="md"
-            aria-label={open ? "Close dev tools" : "Open dev tools"}
-            style={{
-              position: "fixed",
-              bottom: open ? `${height + 16}px` : "16px",
-              right: "16px",
-              zIndex: 52,
-              borderRadius: "50%",
-              boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1)",
-              transition: "bottom 300ms ease, box-shadow 200ms ease",
-              width: "44px",
-              height: "44px",
-            }}
-          >
-            <Terminal size={20} weight={open ? "fill" : "regular"} />
-          </Button>
-        </Drawer.Trigger>
-      </Tooltip>
-
-      <Drawer.Content
-        side="bottom"
-        backdrop={false}
-        id="bottom-panel"
-        aria-label="Bottom panel"
-        style={{
-          height: `${height}px`,
-          transition: isResizing ? "none" : undefined,
-        }}
-      >
-        {/* Full-viewport overlay during resize — prevents iframes from capturing events */}
-        {isResizing && (
-          <div
-            style={{
-              position: "fixed",
-              inset: 0,
-              zIndex: 52,
-              cursor: "ns-resize",
-            }}
-          />
-        )}
-
-        {/* Resize grab handle */}
-        <div
-          onMouseDown={handleMouseDown}
-          style={{
-            width: "100%",
-            display: "flex",
-            justifyContent: "center",
-            padding: "6px 0 2px",
-            cursor: "ns-resize",
-            flexShrink: 0,
-          }}
-        >
-          <div
-            style={{
-              width: "36px",
-              height: "4px",
-              borderRadius: "9999px",
-              backgroundColor: "var(--fui-text-muted, var(--text-muted))",
-              opacity: isResizing ? 0.8 : 0.3,
-              transition: "opacity 150ms ease",
-            }}
-          />
-        </div>
-
-        {/* Header with tabs */}
-        <Drawer.Header
-          style={{
-            padding: "0 16px",
-            borderBottom: "1px solid var(--fui-border-subtle, var(--border-subtle))",
-          }}
-        >
-          <Tabs value={activePanel} onValueChange={handleTabChange}>
-            <Tabs.List variant="pills">
-              {figmaUrl && <Tabs.Tab value="styles">Styles</Tabs.Tab>}
-              <Tabs.Tab value="accessibility">Accessibility</Tabs.Tab>
-              {variant?.hasPlayFunction && (
-                <Tabs.Tab value="interactions">Interactions</Tabs.Tab>
-              )}
-              <Tabs.Tab value="graph">Graph</Tabs.Tab>
-              <Tabs.Tab value="performance">Performance</Tabs.Tab>
-            </Tabs.List>
-          </Tabs>
-        </Drawer.Header>
-
-        {/* Panel Content */}
-        <Drawer.Body style={{ padding: 0 }}>
-          {activePanel === "styles" && figmaUrl && (
-            <TokenStylePanel
-              figmaUrl={figmaUrl}
-              figmaStyles={figmaStyles}
-              renderedStyles={renderedStyles}
-              figmaLoading={figmaLoading}
-              figmaError={figmaError}
-              onFetchFigma={onFetchFigma}
-              onRefreshRendered={onRefreshRendered}
-            />
-          )}
-
-          {activePanel === "accessibility" && (
-            <AccessibilityPanel
-              cacheKey={fragmentKey}
-              previewKey={previewKey}
-              autoScan={true}
-              componentName={fragment.meta.name}
-              variantName={variant.name}
-            />
-          )}
-
-          {activePanel === "interactions" && (
-            <InteractionsPanel key={fragmentKey} variant={variant} previewKey={previewKey} />
-          )}
-
-          {activePanel === "graph" && (
-            <ComponentGraph
-              fragment={fragment}
-              allFragments={fragments}
-              onNavigate={onNavigateToComponent}
-            />
-          )}
-
-          {activePanel === "performance" && (
-            <PerformancePanel componentName={fragment.meta.name} />
-          )}
-        </Drawer.Body>
-      </Drawer.Content>
-    </Drawer>
-  );
-});

package/src/viewer/components/CodePanel.naming.test.tsx

@@ -1,59 +0,0 @@
-import { describe, expect, it, vi } from 'vitest';
-import type { FragmentVariant } from '../../core/index.js';
-
-vi.mock('@fragments-sdk/ui', () => ({
-  CodeBlock: () => null,
-}));
-
-const {
-  __buildFallbackSnippetForTest,
-  __resolveDisplayedCodeForTest,
-} = await import('./CodePanel.js');
-
-function makeVariant(partial: Partial<FragmentVariant>): FragmentVariant {
-  return {
-    name: 'Default',
-    description: 'Default variant',
-    render: () => null,
-    ...partial,
-  };
-}
-
-describe('CodePanel authored code pipeline', () => {
-  it('prefers authored variant.code as-is', () => {
-    const variant = makeVariant({
-      code: `import { Button } from '@fragments-sdk/ui';\n\n<Button>Save</Button>`,
-    });
-
-    const resolved = __resolveDisplayedCodeForTest('Button', variant);
-
-    expect(resolved).toBe(`import { Button } from '@fragments-sdk/ui';\n\n<Button>Save</Button>`);
-  });
-
-  it('falls back to generated placeholder when variant.code is missing', () => {
-    const variant = makeVariant({
-      name: 'Primary',
-      args: {
-        variant: 'primary',
-        disabled: false,
-        children: 'Save Changes',
-      },
-    });
-
-    const code = __buildFallbackSnippetForTest('Button', variant);
-
-    expect(code).toContain("import { Button } from '@/components/Button';");
-    expect(code).toContain("<Button variant='primary' disabled={false}>Save Changes</Button>");
-  });
-
-  it('does not synthesize runtime JSX output', () => {
-    const variant = makeVariant({
-      code: '<Button icon={/* @__PURE__ */ jsxDEV(GearIcon, {}, void 0)} />',
-    });
-
-    const resolved = __resolveDisplayedCodeForTest('Button', variant);
-
-    // CodePanel now treats authored code as source-of-truth only.
-    expect(resolved).toContain('jsxDEV');
-  });
-});

package/src/viewer/components/CodePanel.tsx

@@ -1,118 +0,0 @@
-import { useMemo } from 'react';
-import { CodeBlock } from '@fragments-sdk/ui';
-import type { FragmentVariant, PropDefinition } from '../../core/index.js';
-
-interface CodePanelProps {
-  variant: FragmentVariant;
-  componentName: string;
-  compact?: boolean;
-  propDefs?: Record<string, PropDefinition>;
-}
-
-function quoteString(value: string): string {
-  return `'${value
-    .replace(/\\/g, '\\\\')
-    .replace(/'/g, "\\'")
-    .replace(/\n/g, '\\n')
-  }'`;
-}
-
-function serializeValue(value: unknown): string | null {
-  if (value === null) return '{null}';
-  if (value === undefined) return null;
-
-  if (typeof value === 'string') {
-    return quoteString(value);
-  }
-
-  if (typeof value === 'number' || typeof value === 'boolean') {
-    return `{${String(value)}}`;
-  }
-
-  if (Array.isArray(value)) {
-    const items = value
-      .map((item) => serializeValue(item))
-      .filter((item): item is string => item !== null)
-      .map((item) => (item.startsWith('{') && item.endsWith('}') ? item.slice(1, -1) : item));
-
-    if (items.length === 0) return '{[]}';
-    return `{[${items.join(', ')}]}`;
-  }
-
-  if (typeof value === 'object') {
-    return '{/* complex value */}';
-  }
-
-  return null;
-}
-
-function toSingleLine(code: string): string {
-  return code
-    .split('\n')
-    .map((line) => line.trim())
-    .filter(Boolean)
-    .join(' ')
-    .trim();
-}
-
-function buildFallbackSnippet(componentName: string, variant: FragmentVariant): string {
-  const args = variant.args ?? {};
-  const propEntries = Object.entries(args)
-    .filter(([name, value]) => name !== 'children' && typeof value !== 'function')
-    .map(([name, value]) => {
-      const serialized = serializeValue(value);
-      return serialized ? `${name}=${serialized}` : null;
-    })
-    .filter((entry): entry is string => entry !== null);
-
-  const children = typeof args.children === 'string' ? args.children : null;
-  const openTag = propEntries.length > 0
-    ? `<${componentName} ${propEntries.join(' ')}>`
-    : `<${componentName}>`;
-
-  const usage = children
-    ? `${openTag}${children}</${componentName}>`
-    : toSingleLine(`${openTag}</${componentName}>`);
-
-  return `import { ${componentName} } from '@/components/${componentName}';
-
-${usage}`;
-}
-
-function normalizeAuthoredSnippet(code: string): string {
-  const normalized = code.replace(/\r\n/g, '\n').trim();
-  return normalized.length > 0 ? normalized : '';
-}
-
-export function __buildFallbackSnippetForTest(componentName: string, variant: FragmentVariant): string {
-  return buildFallbackSnippet(componentName, variant);
-}
-
-export function resolveDisplayedCode(componentName: string, variant: FragmentVariant): string {
-  if (typeof variant.code === 'string') {
-    const normalized = normalizeAuthoredSnippet(variant.code);
-    if (normalized.length > 0) {
-      return normalized;
-    }
-  }
-
-  return buildFallbackSnippet(componentName, variant);
-}
-
-export function __resolveDisplayedCodeForTest(componentName: string, variant: FragmentVariant): string {
-  return resolveDisplayedCode(componentName, variant);
-}
-
-export function CodePanel({ variant, componentName, compact = false }: CodePanelProps) {
-  const code = useMemo(() => resolveDisplayedCode(componentName, variant), [componentName, variant]);
-
-  return (
-    <CodeBlock
-      code={code}
-      language="tsx"
-      showCopy
-      maxHeight={400}
-      compact={compact}
-    />
-  );
-}