@fragments-sdk/viewer 0.2.1

package/src/components/BottomPanel.tsx

@@ -0,0 +1,288 @@
+/**
+ * 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 '@fragments-sdk/core';
+import { Drawer, Tabs, Button, Tooltip } from "@fragments-sdk/ui";
+import { Terminal } from "@phosphor-icons/react";
+import { BRAND } from '@fragments-sdk/core';
+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/components/CodePanel.naming.test.tsx

@@ -0,0 +1,59 @@
+import { describe, expect, it, vi } from 'vitest';
+import type { FragmentVariant } from '@fragments-sdk/core';
+
+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/components/CodePanel.tsx

@@ -0,0 +1,118 @@
+import { useMemo } from 'react';
+import { CodeBlock } from '@fragments-sdk/ui';
+import type { FragmentVariant, PropDefinition } from '@fragments-sdk/core';
+
+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}
+    />
+  );
+}