@fragments-sdk/cli 0.5.2 → 0.7.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

@@ -24,6 +24,7 @@ interface SegmentDefinition {
   meta: {
     name: string;
     description?: string;
+    category?: string;
   };
   variants?: SegmentVariant[];
 }
@@ -82,12 +83,29 @@ function findVariant(segment: SegmentDefinition, variantName: string): SegmentVa
   return segment.variants?.find(v => v.name === variantName);
 }
 
+type PreviewMode = 'centered' | 'full-bleed';
+
+function resolvePreviewMode(segment: SegmentDefinition): PreviewMode {
+  const name = segment.meta.name.toLowerCase();
+  const category = (segment.meta.category || '').toLowerCase();
+
+  if (category === 'layout' || category === 'navigation') {
+    return 'full-bleed';
+  }
+
+  if (name.includes('appshell') || name.includes('sidebar') || name.includes('header') || name.includes('layout')) {
+    return 'full-bleed';
+  }
+
+  return 'centered';
+}
+
 /**
  * Error boundary for catching render errors
  */
 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 +122,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>
   );
@@ -117,11 +136,13 @@ function LoadingIndicator() {
 function VariantRenderer({
   variant,
   props,
+  mode,
   onRendered,
   onError,
 }: {
   variant: SegmentVariant;
   props?: Record<string, unknown>;
+  mode: PreviewMode;
   onRendered: (width: number, height: number) => void;
   onError: (message: string, stack?: string) => void;
 }) {
@@ -206,9 +227,11 @@ function VariantRenderer({
   return (
     <div
       ref={containerRef}
-      className="transition-opacity duration-150"
       style={{
-        display: 'inline-block',
+        display: mode === 'full-bleed' ? 'block' : 'inline-block',
+        width: mode === 'full-bleed' ? '100%' : undefined,
+        minHeight: mode === 'full-bleed' ? '100vh' : undefined,
+        transition: 'opacity 150ms',
         opacity: content ? 1 : 0,
       }}
     >
@@ -226,6 +249,7 @@ export function PreviewFrameHost() {
   const [loadError, setLoadError] = useState<string | null>(null);
   const [currentVariant, setCurrentVariant] = useState<SegmentVariant | null>(null);
   const [currentProps, setCurrentProps] = useState<Record<string, unknown> | undefined>(undefined);
+  const [previewMode, setPreviewMode] = useState<PreviewMode>('centered');
 
   // Apply theme to document
   useEffect(() => {
@@ -236,6 +260,10 @@ export function PreviewFrameHost() {
     }
   }, [theme]);
 
+  useEffect(() => {
+    document.body.setAttribute('data-preview-mode', previewMode);
+  }, [previewMode]);
+
   // Load segments on mount
   useEffect(() => {
     loadSegments()
@@ -272,6 +300,7 @@ export function PreviewFrameHost() {
       return;
     }
 
+    setPreviewMode(resolvePreviewMode(segmentItem.segment));
     setCurrentVariant(variant);
     setCurrentProps(props);
   }, [renderRequest, segments, notifyError]);
@@ -289,7 +318,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>
     );
@@ -301,6 +330,7 @@ export function PreviewFrameHost() {
       key={`${renderRequest?.segmentPath}-${renderRequest?.variantName}`}
       variant={currentVariant}
       props={currentProps}
+      mode={previewMode}
       onRendered={notifyRendered}
       onError={notifyError}
     />

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>
   );