@fragments-sdk/cli 0.2.2

package/src/viewer/components/PreviewPane.tsx

@@ -0,0 +1,150 @@
+import { useRef, useEffect, useState, type ReactNode } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+
+interface PreviewPaneProps {
+  children: ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  /**
+   * If true, copy component stylesheets into the shadow root.
+   * This allows Tailwind and other CSS to work inside the preview.
+   */
+  includeComponentStyles?: boolean;
+}
+
+/**
+ * Collect CSS that should be injected into the shadow root.
+ * This includes component stylesheets and CSS custom properties.
+ */
+function collectComponentStyles(): string[] {
+  const styles: string[] = [];
+
+  // Collect inline styles (often used by Vite for CSS-in-JS)
+  document.querySelectorAll('style[data-vite-dev-id]').forEach((style) => {
+    if (style.textContent) {
+      styles.push(style.textContent);
+    }
+  });
+
+  // Collect external stylesheets from the same origin
+  document.querySelectorAll('link[rel="stylesheet"]').forEach((link) => {
+    const href = link.getAttribute('href');
+    // Skip viewer-specific stylesheets
+    if (href && !href.includes('viewer') && !href.includes('docs')) {
+      // For linked stylesheets, we can't easily get the content
+      // Instead, we'll create a link element in the shadow root
+    }
+  });
+
+  return styles;
+}
+
+
+/**
+ * PreviewPane renders children in a Shadow DOM for CSS isolation.
+ * This prevents viewer styles from leaking into the component preview.
+ */
+export function PreviewPane({ children, className, style, includeComponentStyles = true }: PreviewPaneProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const shadowRootRef = useRef<ShadowRoot | null>(null);
+  const reactRootRef = useRef<Root | null>(null);
+  const [mounted, setMounted] = useState(false);
+
+  // Create shadow root on mount
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    // Create shadow root if it doesn't exist
+    if (!shadowRootRef.current) {
+      shadowRootRef.current = containerRef.current.attachShadow({ mode: 'open' });
+
+      // Create a container div inside shadow root
+      const innerContainer = document.createElement('div');
+      innerContainer.id = 'preview-root';
+      innerContainer.setAttribute('data-preview-container', 'true');
+      innerContainer.style.cssText = 'width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 24px;';
+      shadowRootRef.current.appendChild(innerContainer);
+
+      // Add base reset styles
+      // Component library CSS variables are loaded via Vite's pipeline
+      // when the library imports its own styles (e.g., import './styles/globals.scss')
+      const baseStyle = document.createElement('style');
+      baseStyle.textContent = `
+        /* Reset and base styles */
+        *, *::before, *::after {
+          box-sizing: border-box;
+        }
+        :host {
+          display: block;
+          -webkit-font-smoothing: antialiased;
+        }
+        #preview-root {
+          background-color: transparent;
+        }
+      `;
+      shadowRootRef.current.appendChild(baseStyle);
+
+      // Include component styles if enabled
+      if (includeComponentStyles) {
+        const componentStyles = collectComponentStyles();
+        componentStyles.forEach((css) => {
+          const styleEl = document.createElement('style');
+          styleEl.textContent = css;
+          shadowRootRef.current!.appendChild(styleEl);
+        });
+
+        // Also copy any linked stylesheets that might be from the component library
+        document.querySelectorAll('link[rel="stylesheet"]').forEach((link) => {
+          const href = link.getAttribute('href');
+          // Include component library stylesheets (exclude viewer-specific ones)
+          if (href && !href.includes('/viewer/') && !href.includes('/docs/')) {
+            const linkClone = document.createElement('link');
+            linkClone.rel = 'stylesheet';
+            linkClone.href = href;
+            shadowRootRef.current!.appendChild(linkClone);
+          }
+        });
+      }
+
+      // Create React root
+      reactRootRef.current = createRoot(innerContainer);
+      setMounted(true);
+    }
+
+    return () => {
+      // Cleanup React root on unmount
+      if (reactRootRef.current) {
+        reactRootRef.current.unmount();
+        reactRootRef.current = null;
+      }
+    };
+  }, [includeComponentStyles]);
+
+  // Render children into shadow root
+  useEffect(() => {
+    if (mounted && reactRootRef.current) {
+      reactRootRef.current.render(children);
+    }
+  }, [children, mounted]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={className}
+      style={{ minHeight: '120px', ...style }}
+      data-preview-wrapper="true"
+    />
+  );
+}
+
+/**
+ * SimplePreviewPane - A simpler preview without Shadow DOM isolation.
+ * Use this when full isolation isn't needed.
+ */
+export function SimplePreviewPane({ children, className, style }: PreviewPaneProps) {
+  return (
+    <div className={className} style={style}>
+      {children}
+    </div>
+  );
+}

package/src/viewer/components/PreviewToolbar.tsx

@@ -0,0 +1,176 @@
+import { useState, useEffect, useCallback } from 'react';
+import clsx from 'clsx';
+import {
+  ZOOM_LEVELS,
+  type ZoomLevel,
+  type BackgroundOption,
+} from '../constants/ui.js';
+import { ZoomIcon, ChevronDownIcon } from './Icons.js';
+
+// Re-export types for consumers
+export type { ZoomLevel, BackgroundOption };
+export { getBackgroundStyle } from '../constants/ui.js';
+
+// Background options with display metadata
+const BACKGROUND_OPTIONS_UI: { value: BackgroundOption; label: string; icon: string }[] = [
+  { value: 'white', label: 'White', icon: '◻' },
+  { value: 'black', label: 'Black', icon: '◼' },
+  { value: 'checkerboard', label: 'Checkerboard', icon: '▦' },
+  { value: 'transparent', label: 'Transparent', icon: '◇' },
+];
+
+interface PreviewToolbarProps {
+  zoom: ZoomLevel;
+  background: BackgroundOption;
+  onZoomChange: (zoom: ZoomLevel) => void;
+  onBackgroundChange: (bg: BackgroundOption) => void;
+}
+
+export function PreviewToolbar({
+  zoom,
+  background,
+  onZoomChange,
+  onBackgroundChange,
+}: PreviewToolbarProps) {
+  const [zoomOpen, setZoomOpen] = useState(false);
+  const [bgOpen, setBgOpen] = useState(false);
+
+  // Keyboard shortcuts for zoom
+  const handleKeyDown = useCallback((e: KeyboardEvent) => {
+    // Don't handle if in input/textarea
+    const target = e.target as HTMLElement;
+    if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
+      return;
+    }
+
+    if (e.key === '=' || e.key === '+') {
+      e.preventDefault();
+      const currentIndex = ZOOM_LEVELS.indexOf(zoom);
+      if (currentIndex < ZOOM_LEVELS.length - 1) {
+        onZoomChange(ZOOM_LEVELS[currentIndex + 1]);
+      }
+    } else if (e.key === '-') {
+      e.preventDefault();
+      const currentIndex = ZOOM_LEVELS.indexOf(zoom);
+      if (currentIndex > 0) {
+        onZoomChange(ZOOM_LEVELS[currentIndex - 1]);
+      }
+    } else if (e.key === '0') {
+      e.preventDefault();
+      onZoomChange(100);
+    }
+  }, [zoom, onZoomChange]);
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [handleKeyDown]);
+
+  // Close dropdowns when clicking outside
+  useEffect(() => {
+    const handleClick = () => {
+      setZoomOpen(false);
+      setBgOpen(false);
+    };
+    if (zoomOpen || bgOpen) {
+      document.addEventListener('click', handleClick);
+      return () => document.removeEventListener('click', handleClick);
+    }
+  }, [zoomOpen, bgOpen]);
+
+  return (
+    <div className="flex items-center gap-2">
+      {/* Zoom dropdown */}
+      <div className="relative">
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            setZoomOpen(!zoomOpen);
+            setBgOpen(false);
+          }}
+          className={clsx(
+            'flex items-center gap-1.5 px-2 py-1 text-xs font-medium rounded',
+            'text-secondary hover:text-primary',
+            'hover:bg-[--bg-hover] transition-colors',
+            'focus:outline-none focus-visible:ring-2 focus-visible:ring-[--color-accent]'
+          )}
+          title="Zoom level (+/-/0)"
+        >
+          <ZoomIcon className="w-3.5 h-3.5" />
+          <span>{zoom}%</span>
+          <ChevronDownIcon className="w-3 h-3" />
+        </button>
+        {zoomOpen && (
+          <div className="absolute top-full left-0 mt-1 py-1 min-w-[80px] bg-[--bg-elevated] border border-[--border] rounded-lg shadow-lg z-50">
+            {ZOOM_LEVELS.map((level) => (
+              <button
+                key={level}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onZoomChange(level);
+                  setZoomOpen(false);
+                }}
+                className={clsx(
+                  'w-full px-3 py-1.5 text-xs text-left',
+                  'hover:bg-[--bg-hover] transition-colors',
+                  level === zoom ? 'text-[--color-accent] font-medium' : 'text-secondary'
+                )}
+              >
+                {level}%
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Divider */}
+      <div className="w-px h-4 bg-[--border]" />
+
+      {/* Background selector */}
+      <div className="relative">
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            setBgOpen(!bgOpen);
+            setZoomOpen(false);
+          }}
+          className={clsx(
+            'flex items-center gap-1.5 px-2 py-1 text-xs font-medium rounded',
+            'text-secondary hover:text-primary',
+            'hover:bg-[--bg-hover] transition-colors',
+            'focus:outline-none focus-visible:ring-2 focus-visible:ring-[--color-accent]'
+          )}
+          title="Background color"
+        >
+          <span className="text-sm">
+            {BACKGROUND_OPTIONS_UI.find(o => o.value === background)?.icon}
+          </span>
+          <span className="capitalize">{background}</span>
+          <ChevronDownIcon className="w-3 h-3" />
+        </button>
+        {bgOpen && (
+          <div className="absolute top-full left-0 mt-1 py-1 min-w-[120px] bg-[--bg-elevated] border border-[--border] rounded-lg shadow-lg z-50">
+            {BACKGROUND_OPTIONS_UI.map((option) => (
+              <button
+                key={option.value}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onBackgroundChange(option.value);
+                  setBgOpen(false);
+                }}
+                className={clsx(
+                  'w-full px-3 py-1.5 text-xs text-left flex items-center gap-2',
+                  'hover:bg-[--bg-hover] transition-colors',
+                  option.value === background ? 'text-[--color-accent] font-medium' : 'text-secondary'
+                )}
+              >
+                <span className="text-sm">{option.icon}</span>
+                {option.label}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}