@fragments-sdk/cli 0.9.0 → 0.10.0

package/src/viewer/components/BottomPanel.tsx

@@ -1,22 +1,43 @@
 /**
  * BottomPanel component - the tabbed panel at the bottom of the viewer.
- * Contains Code, Styles, Accessibility, Actions, and Graph tabs.
+ * 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 } from 'react';
-import type { FragmentDefinition, FragmentVariant } from '../../core/index.js';
-import { Tabs, Badge } from '@fragments-sdk/ui';
-import { ResizablePanel } from './ResizablePanel.js';
-import { CodePanel } from './CodePanel.js';
-import { TokenStylePanel } from './TokenStylePanel.js';
-import { AccessibilityPanel } from './AccessibilityPanel.js';
-import { InteractionsPanel } from './InteractionsPanel.js';
-import { ActionsPanel } from './ActionsPanel.js';
-import { ComponentGraph } from './ComponentGraph.js';
-import { ContractPanel } from './ContractPanel.js';
-import { PerformancePanel } from './PerformancePanel.js';
-import type { ActivePanel } from '../hooks/useAppState.js';
-import type { ActionLog } from '../hooks/useActions.js';
+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
@@ -25,6 +46,8 @@ interface BottomPanelProps {
   fragments: Array<{ path: string; fragment: FragmentDefinition }>;
 
   // Panel state
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
   activePanel: ActivePanel;
   onPanelChange: (panel: ActivePanel) => void;
 
@@ -37,10 +60,6 @@ interface BottomPanelProps {
   onFetchFigma: () => void;
   onRefreshRendered: () => void;
 
-  // Actions
-  actionLogs: ActionLog[];
-  onClearActionLogs: () => void;
-
   // Navigation
   onNavigateToComponent: (name: string) => void;
 
@@ -53,6 +72,8 @@ export const BottomPanel = memo(function BottomPanel({
   fragment,
   variant,
   fragments,
+  open,
+  onOpenChange,
   activePanel,
   onPanelChange,
   figmaUrl,
@@ -62,131 +83,206 @@ export const BottomPanel = memo(function BottomPanel({
   figmaError,
   onFetchFigma,
   onRefreshRendered,
-  actionLogs,
-  onClearActionLogs,
   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');
+    onPanelChange("styles");
     onFetchFigma();
     setTimeout(onRefreshRendered, 100);
   }, [onPanelChange, onFetchFigma, onRefreshRendered]);
 
-  // Build tab change handler that also triggers side effects
-  const handleTabChange = useCallback((value: string | number) => {
-    const panel = String(value);
-    if (panel === 'styles') {
-      handleStylesClick();
-    } else {
-      onPanelChange(panel as ActivePanel);
-    }
-  }, [handleStylesClick, onPanelChange]);
+  const handleTabChange = useCallback(
+    (value: string | number) => {
+      const panel = String(value);
+      if (panel === "styles") {
+        handleStylesClick();
+      } else {
+        onPanelChange(panel as ActivePanel);
+      }
+    },
+    [handleStylesClick, onPanelChange]
+  );
 
   return (
-    <ResizablePanel
-      visible={true}
-      header={
-        <Tabs value={activePanel} onValueChange={handleTabChange}>
-          <Tabs.List variant="pills">
-            <Tabs.Tab value="code">Code</Tabs.Tab>
-            {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="actions">
-              <span style={{ position: 'relative' }}>
-                Actions
-                {actionLogs.length > 0 && (
-                  <Badge
-                    variant="info"
-                    size="sm"
-                    style={{
-                      position: 'absolute',
-                      top: '-8px',
-                      right: '-16px',
-                    }}
-                  >
-                    {actionLogs.length > 99 ? '99+' : actionLogs.length}
-                  </Badge>
-                )}
-              </span>
-            </Tabs.Tab>
-            <Tabs.Tab value="graph">Graph</Tabs.Tab>
-            <Tabs.Tab value="contract">Contract</Tabs.Tab>
-            <Tabs.Tab value="performance">Performance</Tabs.Tab>
-          </Tabs.List>
-        </Tabs>
-      }
-    >
-      {activePanel === 'code' && (
-        <div style={{ padding: '16px' }}>
-          <CodePanel
-            variant={variant}
-            componentName={fragment.meta.name}
-            propDefs={fragment.props}
-            compact
+    <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>
-      )}
-
-      {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 === 'actions' && (
-        <ActionsPanel
-          logs={actionLogs}
-          onClear={onClearActionLogs}
-        />
-      )}
-
-      {activePanel === 'graph' && (
-        <ComponentGraph
-          fragment={fragment}
-          allFragments={fragments}
-          onNavigate={onNavigateToComponent}
-        />
-      )}
-
-      {activePanel === 'contract' && (
-        <ContractPanel
-          contract={fragment.contract}
-          componentName={fragment.meta.name}
-        />
-      )}
-
-      {activePanel === 'performance' && (
-        <PerformancePanel
-          componentName={fragment.meta.name}
-        />
-      )}
-    </ResizablePanel>
+
+        {/* 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.tsx

@@ -88,7 +88,7 @@ export function __buildFallbackSnippetForTest(componentName: string, variant: Fr
   return buildFallbackSnippet(componentName, variant);
 }
 
-function resolveDisplayedCode(componentName: string, variant: FragmentVariant): string {
+export function resolveDisplayedCode(componentName: string, variant: FragmentVariant): string {
   if (typeof variant.code === 'string') {
     const normalized = normalizeAuthoredSnippet(variant.code);
     if (normalized.length > 0) {

package/src/viewer/components/CommandPalette.tsx

@@ -10,7 +10,7 @@
  */
 
 import { useState, useEffect, useRef, useMemo, useCallback } from "react";
-import { Dialog, Stack, Text, Badge, Separator, Input } from '@fragments-sdk/ui';
+import { Dialog, Stack, Text, Badge, Separator, Input, Box } from '@fragments-sdk/ui';
 import type { FragmentDefinition } from "../../core/index.js";
 import { SearchIcon, ChevronRightIcon } from "./Icons.js";
 
@@ -198,9 +198,9 @@ export function CommandPalette({
         </Stack>
 
         {/* Results */}
-        <div ref={listRef} style={{ maxHeight: '320px', overflowY: 'auto', padding: '8px 0' }}>
+        <Box ref={listRef} overflow="auto" style={{ maxHeight: '320px', padding: '8px 0' }}>
           {results.length === 0 ? (
-            <div style={{ padding: '32px 16px', textAlign: 'center' }}>
+            <Box padding="lg" style={{ textAlign: 'center' }}>
               <Text color="tertiary">
                 {query ? (
                   <>No results for &ldquo;{query}&rdquo;</>
@@ -208,7 +208,7 @@ export function CommandPalette({
                   <>Start typing to search...</>
                 )}
               </Text>
-            </div>
+            </Box>
           ) : (
             results.map((result, index) => (
               <button
@@ -300,13 +300,10 @@ export function CommandPalette({
               </button>
             ))
           )}
-        </div>
+        </Box>
 
         {/* Footer */}
-        <div style={{
-          padding: '8px 16px',
-          borderTop: '1px solid var(--border)',
-        }}>
+        <Box paddingX="md" paddingY="sm" borderTop>
           <Stack direction="row" align="center" justify="between">
             <Stack direction="row" align="center" gap="md">
               <Stack direction="row" align="center" gap="xs">
@@ -323,7 +320,7 @@ export function CommandPalette({
               {results.length} result{results.length !== 1 ? "s" : ""}
             </Text>
           </Stack>
-        </div>
+        </Box>
       </Dialog.Content>
     </Dialog>
   );

package/src/viewer/components/ComponentDocView.tsx

@@ -0,0 +1,164 @@
+import type { ReactNode } from "react";
+import type {
+  FragmentDefinition,
+  FragmentVariant,
+  PropDefinition,
+} from "../../core/index.js";
+import type { DocProp } from "@fragments-sdk/shared";
+import { ComponentDocContent } from "@fragments-sdk/shared";
+import { VariantPreviewCard } from "@fragments-sdk/shared";
+import { Badge, Card, CardBody, Stack, Text } from "@fragments-sdk/ui";
+import { PreviewArea } from "./PreviewArea.js";
+import { resolveDisplayedCode } from "./CodePanel.js";
+import { getVariantSectionId } from "./viewer-utils.js";
+import type { ZoomLevel, ViewportPreset, ViewportSize } from "../constants/ui.js";
+import type { PreviewTheme } from "../hooks/useViewSettings.js";
+
+interface ComponentDocViewProps {
+  fragment: { path: string; fragment: FragmentDefinition };
+  fragments: Array<{ path: string; fragment: FragmentDefinition }>;
+  renderVariantContent: (variant: FragmentVariant) => ReactNode;
+  onNavigateToComponent: (name: string) => void;
+  zoom: ZoomLevel;
+  viewport: ViewportPreset;
+  customSize: ViewportSize;
+  previewTheme: PreviewTheme;
+  showComparison: boolean;
+  allFigmaUrls: string[];
+  onRetry: () => void;
+  previewKeyBase: string;
+}
+
+function mapPropsToDocProps(props: Record<string, PropDefinition>): Record<string, DocProp> {
+  const record: Record<string, DocProp> = {};
+  for (const [name, prop] of Object.entries(props)) {
+    record[name] = {
+      type: prop.type,
+      description: prop.description || "",
+      required: prop.required,
+      default: prop.default,
+      values: prop.values ? [...prop.values] : undefined,
+    };
+  }
+  return record;
+}
+
+export function ComponentDocView({
+  fragment,
+  fragments,
+  renderVariantContent,
+  onNavigateToComponent,
+  zoom,
+  viewport,
+  customSize,
+  previewTheme,
+  showComparison,
+  allFigmaUrls,
+  onRetry,
+  previewKeyBase,
+}: ComponentDocViewProps) {
+  const def = fragment.fragment;
+  const componentName = def.meta.name;
+
+  const propsRecord = mapPropsToDocProps(def.props);
+  const packageName = typeof window !== 'undefined' ? window.__FRAGMENTS_PACKAGE_NAME__ : null;
+
+  const usageData = {
+    when: def.usage?.when || [],
+    whenNot: def.usage?.whenNot || [],
+    guidelines: def.usage?.guidelines || [],
+    accessibility: def.usage?.accessibility || [],
+  };
+
+  const relations = def.relations || [];
+
+  return (
+    <ComponentDocContent
+      name={componentName}
+      description={def.meta.description || ""}
+      componentId={componentName}
+      packageName={packageName || undefined}
+      props={propsRecord}
+      variants={def.variants.map((v) => ({
+        name: v.name,
+        description: v.description,
+        code: v.code,
+      }))}
+      usage={usageData}
+      relations={relations}
+      dependencies={def.meta.dependencies}
+      renderVariant={(variant, index) => {
+        const fragVariant = def.variants[index];
+        if (!fragVariant) return null;
+
+        return (
+          <VariantPreviewCard
+            key={variant.name}
+            name={variant.name}
+            description={variant.description}
+            code={resolveDisplayedCode(componentName, fragVariant)}
+            id={getVariantSectionId(componentName, variant.name)}
+          >
+            <PreviewArea
+              componentName={componentName}
+              fragmentPath={fragment.path}
+              variant={fragVariant}
+              variants={def.variants}
+              zoom={zoom}
+              viewport={viewport}
+              customSize={customSize}
+              previewTheme={previewTheme}
+              showMatrixView={false}
+              showMultiViewport={false}
+              showComparison={showComparison}
+              figmaUrl={fragVariant.figma || def.meta.figma}
+              allFigmaUrls={allFigmaUrls}
+              onSelectVariant={() => {}}
+              onRetry={onRetry}
+              renderContent={() => renderVariantContent(fragVariant)}
+              previewKey={`${previewKeyBase}-${index}`}
+            />
+          </VariantPreviewCard>
+        );
+      }}
+      renderRelatedLink={(comp, relationship, note, key) => {
+        const target = fragments.find(
+          (s) => s.fragment.meta.name.toLowerCase() === comp.toLowerCase()
+        );
+
+        return (
+          <a
+            key={key}
+            onClick={(e) => {
+              e.preventDefault();
+              onNavigateToComponent(comp);
+            }}
+            href="#"
+            style={{
+              textDecoration: "none",
+              color: "inherit",
+              cursor: target ? "pointer" : "default",
+              opacity: target ? 1 : 0.6,
+            }}
+          >
+            <Card variant="outlined">
+              <CardBody>
+                <Stack gap="xs">
+                  <Stack direction="row" align="center" justify="between">
+                    <Text weight="semibold">{comp}</Text>
+                    <Badge size="sm">{relationship}</Badge>
+                  </Stack>
+                  {note && (
+                    <Text size="sm" color="secondary">
+                      {note}
+                    </Text>
+                  )}
+                </Stack>
+              </CardBody>
+            </Card>
+          </a>
+        );
+      }}
+    />
+  );
+}