@fragments-sdk/cli 0.5.2 → 0.6.0

package/src/viewer/components/PreviewArea.tsx

@@ -68,38 +68,80 @@ const DeviceMockup = memo(function DeviceMockup({ type, width, children }: Devic
   const screenHeight = frameHeight - (isMobile ? 80 : 48);
 
   return (
-    <div className="relative flex-shrink-0" style={{ width: `${frameWidth}px` }}>
+    <div style={{ position: 'relative', flexShrink: 0, width: `${frameWidth}px` }}>
       <div
-        className="relative rounded-[40px] bg-[#1a1a1a] p-3 shadow-2xl"
         style={{
+          position: 'relative',
+          borderRadius: '40px',
+          background: '#1a1a1a',
+          padding: '12px',
           boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.1)',
         }}
       >
         {isMobile && (
           <>
-            <div className="absolute -left-[3px] top-24 w-[3px] h-8 bg-[#2a2a2a] rounded-l" />
-            <div className="absolute -left-[3px] top-36 w-[3px] h-12 bg-[#2a2a2a] rounded-l" />
-            <div className="absolute -left-[3px] top-52 w-[3px] h-12 bg-[#2a2a2a] rounded-l" />
-            <div className="absolute -right-[3px] top-32 w-[3px] h-16 bg-[#2a2a2a] rounded-r" />
+            <div style={{ position: 'absolute', left: '-3px', top: '96px', width: '3px', height: '32px', background: '#2a2a2a', borderRadius: '4px 0 0 4px' }} />
+            <div style={{ position: 'absolute', left: '-3px', top: '144px', width: '3px', height: '48px', background: '#2a2a2a', borderRadius: '4px 0 0 4px' }} />
+            <div style={{ position: 'absolute', left: '-3px', top: '208px', width: '3px', height: '48px', background: '#2a2a2a', borderRadius: '4px 0 0 4px' }} />
+            <div style={{ position: 'absolute', right: '-3px', top: '128px', width: '3px', height: '64px', background: '#2a2a2a', borderRadius: '0 4px 4px 0' }} />
           </>
         )}
 
         <div
-          className="relative rounded-[32px] overflow-hidden bg-white"
-          style={{ height: `${screenHeight}px` }}
+          style={{
+            position: 'relative',
+            borderRadius: '32px',
+            overflow: 'hidden',
+            background: 'white',
+            height: `${screenHeight}px`,
+          }}
         >
           {isMobile ? (
-            <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[120px] h-[30px] bg-[#1a1a1a] rounded-b-2xl z-10 flex items-center justify-center gap-2">
-              <div className="w-2 h-2 rounded-full bg-[#2a2a2a]" />
-              <div className="w-12 h-1.5 rounded-full bg-[#2a2a2a]" />
+            <div style={{
+              position: 'absolute',
+              top: 0,
+              left: '50%',
+              transform: 'translateX(-50%)',
+              width: '120px',
+              height: '30px',
+              background: '#1a1a1a',
+              borderRadius: '0 0 16px 16px',
+              zIndex: 10,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              gap: '8px',
+            }}>
+              <div style={{ width: '8px', height: '8px', borderRadius: '50%', background: '#2a2a2a' }} />
+              <div style={{ width: '48px', height: '6px', borderRadius: '9999px', background: '#2a2a2a' }} />
             </div>
           ) : (
-            <div className="absolute top-2 left-1/2 -translate-x-1/2 w-3 h-3 rounded-full bg-[#2a2a2a] z-10" />
+            <div style={{
+              position: 'absolute',
+              top: '8px',
+              left: '50%',
+              transform: 'translateX(-50%)',
+              width: '12px',
+              height: '12px',
+              borderRadius: '50%',
+              background: '#2a2a2a',
+              zIndex: 10,
+            }} />
           )}
 
-          <div className="w-full h-full overflow-auto">{children}</div>
+          <div style={{ width: '100%', height: '100%', overflow: 'auto' }}>{children}</div>
 
-          <div className="absolute bottom-2 left-1/2 -translate-x-1/2 w-[100px] h-1 bg-black/20 rounded-full z-10" />
+          <div style={{
+            position: 'absolute',
+            bottom: '8px',
+            left: '50%',
+            transform: 'translateX(-50%)',
+            width: '100px',
+            height: '4px',
+            background: 'rgba(0, 0, 0, 0.2)',
+            borderRadius: '9999px',
+            zIndex: 10,
+          }} />
         </div>
       </div>
     </div>
@@ -119,14 +161,16 @@ const PreviewContent = memo(function PreviewContent({ zoom, previewTheme, backgr
     <div
       data-preview-container="true"
       data-theme={previewTheme}
-      className="w-full h-full overflow-auto"
       style={{
+        width: '100%',
+        height: '100%',
+        overflow: 'auto',
         backgroundColor: background === 'transparent' ? 'transparent' : undefined,
       }}
     >
       <div
-        className="p-6"
         style={{
+          padding: '24px',
           transform: `scale(${zoom / 100})`,
           transformOrigin: 'top left',
           width: zoom !== 100 ? `${100 / (zoom / 100)}%` : '100%',
@@ -205,11 +249,11 @@ export function PreviewArea({
 
     if (showComparison && figmaUrl) {
       return (
-        <div className="min-h-full flex flex-col p-6">
-          <div className="flex gap-4 flex-1">
-            <div className="flex-1 flex flex-col">
-              <div className="text-xs font-medium text-tertiary mb-2 text-center">Rendered</div>
-              <div className="flex-1 flex items-center justify-center" style={backgroundStyle}>
+        <div style={{ minHeight: '100%', display: 'flex', flexDirection: 'column', padding: '24px' }}>
+          <div style={{ display: 'flex', gap: '16px', flex: 1 }}>
+            <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
+              <div style={{ fontSize: '12px', fontWeight: 500, color: 'var(--text-tertiary)', marginBottom: '8px', textAlign: 'center' }}>Rendered</div>
+              <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', ...backgroundStyle }}>
                 <DeviceMockup type={viewport as 'tablet' | 'mobile'} width={viewportWidth}>
                   {useIframeIsolation ? (
                     <IsolatedPreviewFrame
@@ -231,14 +275,19 @@ export function PreviewArea({
               </div>
             </div>
 
-            <div className="flex-1 flex flex-col">
-              <div className="text-xs font-medium text-tertiary mb-2 text-center">Figma Design</div>
+            <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
+              <div style={{ fontSize: '12px', fontWeight: 500, color: 'var(--text-tertiary)', marginBottom: '8px', textAlign: 'center' }}>Figma Design</div>
               <FigmaEmbed
                 figmaUrl={figmaUrl}
                 allFigmaUrls={allFigmaUrls}
                 zoom={zoom}
-                className="flex-1 rounded-lg border border-[--border] overflow-hidden"
-                style={backgroundStyle}
+                style={{
+                  flex: 1,
+                  borderRadius: '8px',
+                  border: '1px solid var(--border)',
+                  overflow: 'hidden',
+                  ...backgroundStyle,
+                }}
               />
             </div>
           </div>
@@ -247,7 +296,7 @@ export function PreviewArea({
     }
 
     return (
-      <div className="min-h-full flex items-center justify-center p-8">
+      <div style={{ minHeight: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '32px' }}>
         <DeviceMockup type={viewport as 'tablet' | 'mobile'} width={viewportWidth}>
           {useIframeIsolation ? (
             <IsolatedPreviewFrame
@@ -273,13 +322,18 @@ export function PreviewArea({
   // Side-by-side comparison view
   if (showComparison && figmaUrl && variant) {
     return (
-      <div className="min-h-full flex flex-col p-6">
-        <div className="flex gap-4 flex-1">
-          <div className="flex-1 flex flex-col">
-            <div className="text-xs font-medium text-tertiary mb-2 text-center">Rendered</div>
+      <div style={{ minHeight: '100%', display: 'flex', flexDirection: 'column', padding: '24px' }}>
+        <div style={{ display: 'flex', gap: '16px', flex: 1 }}>
+          <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
+            <div style={{ fontSize: '12px', fontWeight: 500, color: 'var(--text-tertiary)', marginBottom: '8px', textAlign: 'center' }}>Rendered</div>
             <div
-              className="flex-1 rounded-lg border border-[--border] overflow-auto"
-              style={backgroundStyle}
+              style={{
+                flex: 1,
+                borderRadius: '8px',
+                border: '1px solid var(--border)',
+                overflow: 'auto',
+                ...backgroundStyle,
+              }}
             >
               {useIframeIsolation ? (
                 <IsolatedPreviewFrame
@@ -293,7 +347,12 @@ export function PreviewArea({
                 />
               ) : (
                 <div
-                  className="flex items-center justify-center p-8"
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    padding: '32px',
+                  }}
                   data-preview-container="true"
                   data-theme={previewTheme}
                 >
@@ -314,14 +373,19 @@ export function PreviewArea({
             </div>
           </div>
 
-          <div className="flex-1 flex flex-col">
-            <div className="text-xs font-medium text-tertiary mb-2 text-center">Figma Design</div>
+          <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
+            <div style={{ fontSize: '12px', fontWeight: 500, color: 'var(--text-tertiary)', marginBottom: '8px', textAlign: 'center' }}>Figma Design</div>
             <FigmaEmbed
               figmaUrl={figmaUrl}
               allFigmaUrls={allFigmaUrls}
               zoom={zoom}
-              className="flex-1 rounded-lg border border-[--border] overflow-hidden"
-              style={backgroundStyle}
+              style={{
+                flex: 1,
+                borderRadius: '8px',
+                border: '1px solid var(--border)',
+                overflow: 'hidden',
+                ...backgroundStyle,
+              }}
             />
           </div>
         </div>
@@ -336,10 +400,14 @@ export function PreviewArea({
     const isFullWidth = !viewportWidth;
 
     return (
-      <div className={isFullWidth ? "h-full flex flex-col" : "min-h-full flex items-center justify-center p-6"}>
+      <div style={isFullWidth
+        ? { height: '100%', display: 'flex', flexDirection: 'column' }
+        : { minHeight: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '24px' }
+      }>
         <div
-          className="relative transition-all duration-200"
           style={{
+            position: 'relative',
+            transition: 'all 200ms',
             width: viewportWidth ? `${viewportWidth}px` : '100%',
             maxWidth: viewportWidth ? undefined : '100%',
             height: isFullWidth ? '100%' : undefined,
@@ -367,12 +435,11 @@ export function PreviewArea({
 
   // Fallback: Direct rendering without iframe isolation
   return (
-    <div className="min-h-full flex items-center justify-center p-6">
+    <div style={{ minHeight: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '24px' }}>
       <div
-        className="relative transition-all duration-200"
-        data-preview-container="true"
-        data-theme={previewTheme}
         style={{
+          position: 'relative',
+          transition: 'all 200ms',
           width: viewportWidth ? `${viewportWidth}px` : '100%',
           maxWidth: viewportWidth ? undefined : '100%',
           minHeight: viewportHeight ? `${viewportHeight}px` : '100%',
@@ -382,10 +449,12 @@ export function PreviewArea({
             boxShadow: '0 0 0 1px var(--border), 0 4px 12px rgba(0,0,0,0.15)',
           }),
         }}
+        data-preview-container="true"
+        data-theme={previewTheme}
       >
         <div
-          className="p-8"
           style={{
+            padding: '32px',
             transform: `scale(${zoom / 100})`,
             transformOrigin: 'top left',
             width: zoom !== 100 ? `${100 / (zoom / 100)}%` : '100%',

package/src/viewer/components/PreviewFrameHost.tsx

@@ -87,7 +87,7 @@ function findVariant(segment: SegmentDefinition, variantName: string): SegmentVa
  */
 function ErrorDisplay({ message, stack }: { message: string; stack?: string }) {
   return (
-    <div className="preview-error">
+    <div style={{ padding: '16px', color: '#dc2626', background: 'rgba(254, 242, 242, 0.95)', borderRadius: '8px', margin: '16px' }}>
       <div style={{ fontWeight: 500, marginBottom: 8 }}>Render Error</div>
       <div>{message}</div>
       {stack && (
@@ -104,8 +104,9 @@ function ErrorDisplay({ message, stack }: { message: string; stack?: string }) {
  */
 function LoadingIndicator() {
   return (
-    <div className="preview-loading">
-      <div className="spinner" />
+    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '32px', gap: '8px', color: '#6b7280' }}>
+      <div style={{ width: '16px', height: '16px', border: '2px solid #e5e7eb', borderTopColor: '#3b82f6', borderRadius: '50%', animation: 'spin 0.8s linear infinite' }} />
+      <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
       <span>Loading component...</span>
     </div>
   );
@@ -206,9 +207,9 @@ function VariantRenderer({
   return (
     <div
       ref={containerRef}
-      className="transition-opacity duration-150"
       style={{
         display: 'inline-block',
+        transition: 'opacity 150ms',
         opacity: content ? 1 : 0,
       }}
     >
@@ -289,7 +290,7 @@ export function PreviewFrameHost() {
   // Show waiting state
   if (!currentVariant) {
     return (
-      <div className="preview-loading">
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '32px', gap: '8px', color: '#6b7280' }}>
         <span>Waiting for render request...</span>
       </div>
     );

package/src/viewer/components/PreviewPane.tsx

@@ -130,7 +130,6 @@ export function PreviewPane({ children, className, style, includeComponentStyles
   return (
     <div
       ref={containerRef}
-      className={className}
       style={{ minHeight: '120px', ...style }}
       data-preview-wrapper="true"
     />
@@ -141,9 +140,9 @@ export function PreviewPane({ children, className, style, includeComponentStyles
  * SimplePreviewPane - A simpler preview without Shadow DOM isolation.
  * Use this when full isolation isn't needed.
  */
-export function SimplePreviewPane({ children, className, style }: PreviewPaneProps) {
+export function SimplePreviewPane({ children, style }: PreviewPaneProps) {
   return (
-    <div className={className} style={style}>
+    <div style={style}>
       {children}
     </div>
   );

package/src/viewer/components/PreviewToolbar.tsx

@@ -1,5 +1,5 @@
-import { useState, useEffect, useCallback } from 'react';
-import clsx from 'clsx';
+import { useEffect, useCallback } from 'react';
+import { Button, Menu, Stack, Separator } from '@fragments/ui';
 import {
   ZOOM_LEVELS,
   type ZoomLevel,
@@ -13,10 +13,10 @@ 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: '◇' },
+  { value: 'white', label: 'White', icon: '\u25FB' },
+  { value: 'black', label: 'Black', icon: '\u25FC' },
+  { value: 'checkerboard', label: 'Checkerboard', icon: '\u25A6' },
+  { value: 'transparent', label: 'Transparent', icon: '\u25C7' },
 ];
 
 interface PreviewToolbarProps {
@@ -32,9 +32,6 @@ export function PreviewToolbar({
   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
@@ -66,111 +63,71 @@ export function PreviewToolbar({
     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">
+    <Stack direction="row" gap="sm" align="center">
       {/* 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">
+      <Menu>
+        <Menu.Trigger asChild>
+          <Button variant="ghost" size="sm" title="Zoom level (+/-/0)">
+            <Stack direction="row" gap="xs" align="center">
+              <span style={{ display: 'inline-flex', width: '14px', height: '14px' }}>
+                <ZoomIcon />
+              </span>
+              <span>{zoom}%</span>
+              <span style={{ display: 'inline-flex', width: '12px', height: '12px' }}>
+                <ChevronDownIcon />
+              </span>
+            </Stack>
+          </Button>
+        </Menu.Trigger>
+        <Menu.Content side="bottom" align="start">
+          <Menu.RadioGroup
+            value={String(zoom)}
+            onValueChange={(value: string) => onZoomChange(Number(value) as ZoomLevel)}
+          >
             {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'
-                )}
-              >
+              <Menu.RadioItem key={level} value={String(level)}>
                 {level}%
-              </button>
+              </Menu.RadioItem>
             ))}
-          </div>
-        )}
-      </div>
+          </Menu.RadioGroup>
+        </Menu.Content>
+      </Menu>
 
       {/* Divider */}
-      <div className="w-px h-4 bg-[--border]" />
+      <Separator orientation="vertical" />
 
       {/* 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">
+      <Menu>
+        <Menu.Trigger asChild>
+          <Button variant="ghost" size="sm" title="Background color">
+            <Stack direction="row" gap="xs" align="center">
+              <span style={{ fontSize: '14px' }}>
+                {BACKGROUND_OPTIONS_UI.find(o => o.value === background)?.icon}
+              </span>
+              <span style={{ textTransform: 'capitalize' }}>{background}</span>
+              <span style={{ display: 'inline-flex', width: '12px', height: '12px' }}>
+                <ChevronDownIcon />
+              </span>
+            </Stack>
+          </Button>
+        </Menu.Trigger>
+        <Menu.Content side="bottom" align="start">
+          <Menu.RadioGroup
+            value={background}
+            onValueChange={(value: string) => onBackgroundChange(value as BackgroundOption)}
+          >
             {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>
+              <Menu.RadioItem key={option.value} value={option.value}>
+                <Stack direction="row" gap="sm" align="center">
+                  <span style={{ fontSize: '14px' }}>{option.icon}</span>
+                  {option.label}
+                </Stack>
+              </Menu.RadioItem>
             ))}
-          </div>
-        )}
-      </div>
-    </div>
+          </Menu.RadioGroup>
+        </Menu.Content>
+      </Menu>
+    </Stack>
   );
 }