@fragments-sdk/cli 0.5.2 → 0.7.0

package/src/viewer/components/MultiViewportPreview.tsx

@@ -70,6 +70,8 @@ export function MultiViewportPreview({
 }: MultiViewportPreviewProps) {
   const [selectedMobile, setSelectedMobile] = useState<MobilePreset>(MOBILE_PRESETS[0]);
   const [showMobileDropdown, setShowMobileDropdown] = useState(false);
+  const [hoveredPreset, setHoveredPreset] = useState<string | null>(null);
+  const [mobileButtonHovered, setMobileButtonHovered] = useState(false);
 
   // Build viewports with selected mobile preset
   const viewports: ViewportConfig[] = [
@@ -79,28 +81,72 @@ export function MultiViewportPreview({
   ];
 
   return (
-    <div className="h-full flex flex-col bg-gray-100 dark:bg-gray-900">
+    <div style={{
+      height: '100%',
+      display: 'flex',
+      flexDirection: 'column',
+      background: 'var(--bg-primary)',
+    }}>
       {/* Header */}
-      <div className="flex-shrink-0 px-4 py-3 border-b border-[--border] bg-[--bg-secondary] flex items-center justify-center gap-8">
+      <div style={{
+        flexShrink: 0,
+        padding: '12px 16px',
+        borderBottom: '1px solid var(--border)',
+        background: 'var(--bg-secondary)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 32,
+      }}>
         {/* Mobile with dropdown */}
-        <div className="relative">
+        <div style={{ position: 'relative' }}>
           <button
             onClick={() => setShowMobileDropdown(!showMobileDropdown)}
-            className="flex items-center gap-2 text-sm hover:bg-[--bg-hover] px-2 py-1 rounded transition-colors"
+            onMouseEnter={() => setMobileButtonHovered(true)}
+            onMouseLeave={() => setMobileButtonHovered(false)}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 8,
+              fontSize: 14,
+              padding: '4px 8px',
+              borderRadius: 4,
+              transition: 'background-color 0.15s',
+              background: mobileButtonHovered ? 'var(--bg-hover)' : 'transparent',
+              border: 'none',
+              cursor: 'pointer',
+              color: 'inherit',
+            }}
           >
-            <span className="text-lg">📱</span>
-            <span className="font-medium text-secondary">Mobile</span>
-            <span className="text-xs text-tertiary">({selectedMobile.width}px)</span>
-            <ChevronDownIcon className="w-3 h-3 text-tertiary" />
+            <span style={{ fontSize: 18 }}>📱</span>
+            <span style={{ fontWeight: 500, color: 'var(--text-secondary)' }}>Mobile</span>
+            <span style={{ fontSize: 12, color: 'var(--text-tertiary)' }}>({selectedMobile.width}px)</span>
+            <ChevronDownIcon style={{ width: 12, height: 12, color: 'var(--text-tertiary)' }} />
           </button>
 
           {showMobileDropdown && (
             <>
               <div
-                className="fixed inset-0 z-10"
+                style={{
+                  position: 'fixed',
+                  inset: 0,
+                  zIndex: 10,
+                }}
                 onClick={() => setShowMobileDropdown(false)}
               />
-              <div className="absolute top-full left-0 mt-1 z-20 bg-[--bg-elevated] border border-[--border] rounded-lg shadow-lg py-1 min-w-[180px]">
+              <div style={{
+                position: 'absolute',
+                top: '100%',
+                left: 0,
+                marginTop: 4,
+                zIndex: 20,
+                background: 'var(--bg-elevated)',
+                border: '1px solid var(--border)',
+                borderRadius: 8,
+                boxShadow: '0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)',
+                padding: '4px 0',
+                minWidth: 180,
+              }}>
                 {MOBILE_PRESETS.map((preset) => (
                   <button
                     key={preset.name}
@@ -108,12 +154,25 @@ export function MultiViewportPreview({
                       setSelectedMobile(preset);
                       setShowMobileDropdown(false);
                     }}
-                    className={`w-full px-3 py-1.5 text-left text-xs hover:bg-[--bg-hover] transition-colors flex items-center justify-between ${
-                      selectedMobile.name === preset.name ? 'text-blue-500' : 'text-secondary'
-                    }`}
+                    onMouseEnter={() => setHoveredPreset(preset.name)}
+                    onMouseLeave={() => setHoveredPreset(null)}
+                    style={{
+                      width: '100%',
+                      padding: '6px 12px',
+                      textAlign: 'left',
+                      fontSize: 12,
+                      transition: 'background-color 0.15s',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'space-between',
+                      color: selectedMobile.name === preset.name ? '#3b82f6' : 'var(--text-secondary)',
+                      background: hoveredPreset === preset.name ? 'var(--bg-hover)' : 'transparent',
+                      border: 'none',
+                      cursor: 'pointer',
+                    }}
                   >
                     <span>{preset.name}</span>
-                    <span className="text-tertiary">{preset.width}×{preset.height}</span>
+                    <span style={{ color: 'var(--text-tertiary)' }}>{preset.width}×{preset.height}</span>
                   </button>
                 ))}
               </div>
@@ -122,23 +181,23 @@ export function MultiViewportPreview({
         </div>
 
         {/* Tablet */}
-        <div className="flex items-center gap-2 text-sm">
-          <span className="text-lg">📱</span>
-          <span className="font-medium text-secondary">Tablet</span>
-          <span className="text-xs text-tertiary">(768px)</span>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 14 }}>
+          <span style={{ fontSize: 18 }}>📱</span>
+          <span style={{ fontWeight: 500, color: 'var(--text-secondary)' }}>Tablet</span>
+          <span style={{ fontSize: 12, color: 'var(--text-tertiary)' }}>(768px)</span>
         </div>
 
         {/* Desktop */}
-        <div className="flex items-center gap-2 text-sm">
-          <span className="text-lg">🖥️</span>
-          <span className="font-medium text-secondary">Desktop</span>
-          <span className="text-xs text-tertiary">(1280px)</span>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 14 }}>
+          <span style={{ fontSize: 18 }}>🖥️</span>
+          <span style={{ fontWeight: 500, color: 'var(--text-secondary)' }}>Desktop</span>
+          <span style={{ fontSize: 12, color: 'var(--text-tertiary)' }}>(1280px)</span>
         </div>
       </div>
 
       {/* Viewport panels with horizontal scroll */}
-      <div className="flex-1 overflow-x-auto overflow-y-auto">
-        <div className="flex gap-8 p-8 min-w-max">
+      <div style={{ flex: 1, overflowX: 'auto', overflowY: 'auto' }}>
+        <div style={{ display: 'flex', gap: 32, padding: 32, minWidth: 'max-content' }}>
           {viewports.map((vp) => (
             <ViewportPanel
               key={`${vp.name}-${vp.width}`}
@@ -246,51 +305,124 @@ function DeviceMockup({
   const backgroundStyle = getBackgroundStyle(background);
 
   return (
-    <div className="flex flex-col items-center">
+    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
       {/* Label */}
-      <div className="mb-3 text-sm font-medium text-tertiary">
+      <div style={{
+        marginBottom: 12,
+        fontSize: 14,
+        fontWeight: 500,
+        color: 'var(--text-tertiary)',
+      }}>
         {label}
       </div>
 
       {/* Device frame */}
       <div
-        className="relative flex-shrink-0"
-        style={{ width: `${frameWidth}px` }}
+        style={{
+          position: 'relative',
+          flexShrink: 0,
+          width: `${frameWidth}px`,
+        }}
       >
         <div
-          className="relative rounded-[40px] bg-[#1a1a1a] p-3 shadow-2xl"
           style={{
-            boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.1)",
+            position: 'relative',
+            borderRadius: 40,
+            background: '#1a1a1a',
+            padding: 12,
+            boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.1)',
           }}
         >
           {/* Side buttons (mobile only) */}
           {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: -3,
+                top: 96,
+                width: 3,
+                height: 32,
+                background: '#2a2a2a',
+                borderRadius: '4px 0 0 4px',
+              }} />
+              <div style={{
+                position: 'absolute',
+                left: -3,
+                top: 144,
+                width: 3,
+                height: 48,
+                background: '#2a2a2a',
+                borderRadius: '4px 0 0 4px',
+              }} />
+              <div style={{
+                position: 'absolute',
+                left: -3,
+                top: 208,
+                width: 3,
+                height: 48,
+                background: '#2a2a2a',
+                borderRadius: '4px 0 0 4px',
+              }} />
+              <div style={{
+                position: 'absolute',
+                right: -3,
+                top: 128,
+                width: 3,
+                height: 64,
+                background: '#2a2a2a',
+                borderRadius: '0 4px 4px 0',
+              }} />
             </>
           )}
 
           {/* Screen container */}
           <div
-            className="relative rounded-[32px] overflow-hidden bg-white"
-            style={{ height: `${screenHeight}px`, width: `${width}px` }}
+            style={{
+              position: 'relative',
+              borderRadius: 32,
+              overflow: 'hidden',
+              background: '#ffffff',
+              height: `${screenHeight}px`,
+              width: `${width}px`,
+            }}
           >
             {/* Notch (mobile) or Camera (tablet) */}
             {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: 120,
+                height: 30,
+                background: '#1a1a1a',
+                borderRadius: '0 0 16px 16px',
+                zIndex: 10,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: 8,
+              }}>
+                <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#2a2a2a' }} />
+                <div style={{ width: 48, height: 6, borderRadius: 9999, 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: 8,
+                left: '50%',
+                transform: 'translateX(-50%)',
+                width: 12,
+                height: 12,
+                borderRadius: '50%',
+                background: '#2a2a2a',
+                zIndex: 10,
+              }} />
             )}
 
             {/* Screen content */}
             <div
-              className="w-full h-full overflow-hidden"
+              style={{ width: '100%', height: '100%', overflow: 'hidden' }}
               data-theme={previewTheme}
             >
               {useIframeIsolation ? (
@@ -303,11 +435,16 @@ function DeviceMockup({
                   minHeight={screenHeight}
                 />
               ) : (
-                <div className={isMobile ? "pt-10 px-4 pb-4" : "pt-6 px-4 pb-4"}>
+                <div style={{
+                  paddingTop: isMobile ? 40 : 24,
+                  paddingLeft: 16,
+                  paddingRight: 16,
+                  paddingBottom: 16,
+                }}>
                   <ErrorBoundary
                     componentName={componentName}
                     fallback={
-                      <div className="text-xs text-red-500 p-2">
+                      <div style={{ fontSize: 12, color: '#ef4444', padding: 8 }}>
                         Error rendering at {width}px
                       </div>
                     }
@@ -319,7 +456,17 @@ function DeviceMockup({
             </div>
 
             {/* Home indicator */}
-            <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: 8,
+              left: '50%',
+              transform: 'translateX(-50%)',
+              width: 100,
+              height: 4,
+              background: 'rgba(0,0,0,0.2)',
+              borderRadius: 9999,
+              zIndex: 10,
+            }} />
           </div>
         </div>
       </div>
@@ -355,31 +502,60 @@ function DesktopMockup({
   const backgroundStyle = getBackgroundStyle(background);
 
   return (
-    <div className="flex flex-col items-center">
+    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
       {/* Label */}
-      <div className="mb-3 text-sm font-medium text-tertiary">
+      <div style={{
+        marginBottom: 12,
+        fontSize: 14,
+        fontWeight: 500,
+        color: 'var(--text-tertiary)',
+      }}>
         {label}
       </div>
 
       {/* Monitor frame */}
-      <div className="flex flex-col items-center">
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
         {/* Screen */}
         <div
-          className="relative bg-[#1a1a1a] rounded-lg p-2 shadow-2xl"
           style={{
-            boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.1)",
+            position: 'relative',
+            background: '#1a1a1a',
+            borderRadius: 8,
+            padding: 8,
+            boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.1)',
           }}
         >
           {/* Browser chrome */}
-          <div className="flex items-center gap-2 px-3 py-2 bg-[#2a2a2a] rounded-t-md">
-            <div className="flex items-center gap-1.5">
-              <div className="w-3 h-3 rounded-full bg-[#ff5f57]" />
-              <div className="w-3 h-3 rounded-full bg-[#ffbd2e]" />
-              <div className="w-3 h-3 rounded-full bg-[#28ca41]" />
+          <div style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 8,
+            padding: '8px 12px',
+            background: '#2a2a2a',
+            borderRadius: '6px 6px 0 0',
+          }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+              <div style={{ width: 12, height: 12, borderRadius: '50%', background: '#ff5f57' }} />
+              <div style={{ width: 12, height: 12, borderRadius: '50%', background: '#ffbd2e' }} />
+              <div style={{ width: 12, height: 12, borderRadius: '50%', background: '#28ca41' }} />
             </div>
-            <div className="flex-1 mx-4">
-              <div className="h-6 bg-[#3a3a3a] rounded-md flex items-center justify-center px-3">
-                <span className="text-xs text-gray-400 truncate">
+            <div style={{ flex: 1, margin: '0 16px' }}>
+              <div style={{
+                height: 24,
+                background: '#3a3a3a',
+                borderRadius: 6,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                padding: '0 12px',
+              }}>
+                <span style={{
+                  fontSize: 12,
+                  color: '#9ca3af',
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                }}>
                   localhost:6006 — {width}px
                 </span>
               </div>
@@ -388,8 +564,12 @@ function DesktopMockup({
 
           {/* Screen content */}
           <div
-            className="overflow-hidden"
-            style={{ width: `${width}px`, height: `${height}px`, ...backgroundStyle }}
+            style={{
+              overflow: 'hidden',
+              width: `${width}px`,
+              height: `${height}px`,
+              ...backgroundStyle,
+            }}
             data-theme={previewTheme}
           >
             {useIframeIsolation ? (
@@ -402,11 +582,11 @@ function DesktopMockup({
                 minHeight={height}
               />
             ) : (
-              <div className="p-6">
+              <div style={{ padding: 24 }}>
                 <ErrorBoundary
                   componentName={componentName}
                   fallback={
-                    <div className="text-xs text-red-500 p-2">
+                    <div style={{ fontSize: 12, color: '#ef4444', padding: 8 }}>
                       Error rendering at {width}px
                     </div>
                   }
@@ -419,8 +599,19 @@ function DesktopMockup({
         </div>
 
         {/* Monitor stand */}
-        <div className="w-20 h-4 bg-gradient-to-b from-[#2a2a2a] to-[#1a1a1a] rounded-b-sm" />
-        <div className="w-32 h-2 bg-[#1a1a1a] rounded-full shadow-lg" />
+        <div style={{
+          width: 80,
+          height: 16,
+          background: 'linear-gradient(to bottom, #2a2a2a, #1a1a1a)',
+          borderRadius: '0 0 2px 2px',
+        }} />
+        <div style={{
+          width: 128,
+          height: 8,
+          background: '#1a1a1a',
+          borderRadius: 9999,
+          boxShadow: '0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)',
+        }} />
       </div>
     </div>
   );