@fragments-sdk/cli 0.5.2 → 0.7.0

package/src/viewer/components/IsolatedPreviewFrame.tsx

@@ -9,7 +9,6 @@
  */
 
 import { memo, useRef, useEffect, useState, useCallback } from 'react';
-import clsx from 'clsx';
 import { usePreviewBridge, type ParentMessage } from '../hooks/usePreviewBridge.js';
 
 /** Maximum number of retry attempts */
@@ -74,6 +73,7 @@ export const IsolatedPreviewFrame = memo(function IsolatedPreviewFrame({
   const { isReady, isRendering, lastError, contentSize, render, setTheme, clearError } = usePreviewBridge(iframeRef);
   const lastRenderRef = useRef<string>('');
   const isFirstLoad = useRef(true);
+  const [isHovered, setIsHovered] = useState(false);
 
   // Build the preview URL
   const previewUrl = '/fragments/preview/';
@@ -150,7 +150,6 @@ export const IsolatedPreviewFrame = memo(function IsolatedPreviewFrame({
 
   return (
     <div
-      className={clsx('isolated-preview-frame group', className)}
       style={{
         position: 'relative',
         width: frameWidth,
@@ -159,25 +158,38 @@ export const IsolatedPreviewFrame = memo(function IsolatedPreviewFrame({
         ...background,
         ...style,
       }}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
     >
       {/* Skeleton loading overlay (initial load) */}
       <div
-        className={clsx(
-          'absolute inset-0 z-10 transition-opacity duration-150',
-          showSkeleton ? 'opacity-100' : 'opacity-0 pointer-events-none'
-        )}
-        style={{ background: 'rgba(255, 255, 255, 0.95)' }}
+        style={{
+          position: 'absolute',
+          inset: 0,
+          zIndex: 10,
+          transition: 'opacity 150ms',
+          opacity: showSkeleton ? 1 : 0,
+          pointerEvents: showSkeleton ? 'auto' : 'none',
+          background: 'rgba(255, 255, 255, 0.95)',
+        }}
       >
         <PreviewSkeleton />
       </div>
 
       {/* Spinner overlay (subsequent renders) */}
       <div
-        className={clsx(
-          'absolute inset-0 z-10 flex items-center justify-center transition-opacity duration-150',
-          showSpinner ? 'opacity-100' : 'opacity-0 pointer-events-none'
-        )}
-        style={{ background: 'rgba(255, 255, 255, 0.8)' }}
+        style={{
+          position: 'absolute',
+          inset: 0,
+          zIndex: 10,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          transition: 'opacity 150ms',
+          opacity: showSpinner ? 1 : 0,
+          pointerEvents: showSpinner ? 'auto' : 'none',
+          background: 'rgba(255, 255, 255, 0.8)',
+        }}
       >
         <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: '#6b7280', fontSize: 14 }}>
           <LoadingSpinner />
@@ -187,11 +199,19 @@ export const IsolatedPreviewFrame = memo(function IsolatedPreviewFrame({
 
       {/* Error overlay */}
       <div
-        className={clsx(
-          'absolute inset-0 z-10 flex items-center justify-center p-4 transition-opacity duration-150',
-          frameError && !isLoading ? 'opacity-100' : 'opacity-0 pointer-events-none'
-        )}
-        style={{ background: 'rgba(254, 242, 242, 0.95)' }}
+        style={{
+          position: 'absolute',
+          inset: 0,
+          zIndex: 10,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: '16px',
+          transition: 'opacity 150ms',
+          opacity: frameError && !isLoading ? 1 : 0,
+          pointerEvents: frameError && !isLoading ? 'auto' : 'none',
+          background: 'rgba(254, 242, 242, 0.95)',
+        }}
       >
         <div
           style={{
@@ -236,16 +256,14 @@ export const IsolatedPreviewFrame = memo(function IsolatedPreviewFrame({
         title={`Preview: ${variantName}`}
         onLoad={handleLoad}
         onError={handleError}
-        className={clsx(
-          'transition-opacity duration-150',
-          showContent ? 'opacity-100' : 'opacity-0'
-        )}
         style={{
           width: '100%',
           height: '100%',
           border: 'none',
           display: 'block',
           background: 'transparent',
+          transition: 'opacity 150ms',
+          opacity: showContent ? 1 : 0,
         }}
         // Security attributes
         sandbox="allow-scripts allow-same-origin"
@@ -254,9 +272,15 @@ export const IsolatedPreviewFrame = memo(function IsolatedPreviewFrame({
       {/* Size indicator */}
       {showSizeIndicator && contentSize && (
         <div
-          className="absolute bottom-1 right-1 px-1.5 py-0.5 rounded font-mono
-                     opacity-0 group-hover:opacity-100 transition-opacity duration-150"
           style={{
+            position: 'absolute',
+            bottom: '4px',
+            right: '4px',
+            padding: '2px 6px',
+            borderRadius: '4px',
+            fontFamily: 'monospace',
+            opacity: isHovered ? 1 : 0,
+            transition: 'opacity 150ms',
             background: 'rgba(0, 0, 0, 0.5)',
             color: 'white',
             fontSize: 10,
@@ -274,10 +298,11 @@ export const IsolatedPreviewFrame = memo(function IsolatedPreviewFrame({
  */
 function PreviewSkeleton() {
   return (
-    <div className="animate-pulse p-4">
-      <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/3 mb-3" />
-      <div className="h-8 bg-gray-200 dark:bg-gray-700 rounded mb-2" />
-      <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-2/3" />
+    <div style={{ padding: '16px' }}>
+      <style>{`@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }`}</style>
+      <div style={{ height: '16px', background: 'var(--bg-secondary, #e5e7eb)', borderRadius: '4px', width: '33%', marginBottom: '12px', animation: 'pulse 2s ease-in-out infinite' }} />
+      <div style={{ height: '32px', background: 'var(--bg-secondary, #e5e7eb)', borderRadius: '4px', marginBottom: '8px', animation: 'pulse 2s ease-in-out infinite' }} />
+      <div style={{ height: '16px', background: 'var(--bg-secondary, #e5e7eb)', borderRadius: '4px', width: '66%', animation: 'pulse 2s ease-in-out infinite' }} />
     </div>
   );
 }

package/src/viewer/components/IsolatedRender.tsx

@@ -59,7 +59,7 @@ export function IsolatedRender({ segments }: IsolatedRenderProps) {
   // Apply theme
   useEffect(() => {
     document.documentElement.setAttribute("data-theme", params.theme);
-    
+
     // Signal ready after a short delay for fonts and styles to settle
     const timer = setTimeout(() => {
       setReady(true);
@@ -71,9 +71,9 @@ export function IsolatedRender({ segments }: IsolatedRenderProps) {
   // Error state - missing component or variant
   if (!params.component || !params.variant) {
     return (
-      <div className="p-4 text-red-500 font-mono text-sm">
+      <div style={{ padding: '16px', color: '#ef4444', fontFamily: 'monospace', fontSize: '14px' }}>
         Error: Missing component or variant parameter
-        <pre className="mt-2 text-xs">
+        <pre style={{ marginTop: '8px', fontSize: '12px' }}>
           Required: ?component=ComponentName&variant=VariantName
         </pre>
       </div>
@@ -83,7 +83,7 @@ export function IsolatedRender({ segments }: IsolatedRenderProps) {
   // Error state - component/variant not found
   if (!match) {
     return (
-      <div className="p-4 text-red-500 font-mono text-sm">
+      <div style={{ padding: '16px', color: '#ef4444', fontFamily: 'monospace', fontSize: '14px' }}>
         Error: Component "{params.component}" variant "{params.variant}" not
         found
       </div>
@@ -95,8 +95,14 @@ export function IsolatedRender({ segments }: IsolatedRenderProps) {
     <div
       id="isolated-render"
       data-ready={ready}
-      className="min-h-screen p-8 flex items-center justify-center"
-      style={getBackgroundStyle(params.background)}
+      style={{
+        minHeight: '100vh',
+        padding: '32px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        ...getBackgroundStyle(params.background),
+      }}
     >
       <div
         style={{

package/src/viewer/components/KeyboardShortcutsHelp.tsx

@@ -2,11 +2,11 @@
  * Keyboard Shortcuts Help Modal
  *
  * Displays all available keyboard shortcuts in a modal overlay.
+ * Uses Fragments UI Dialog compound component.
  */
 
-import { useEffect } from "react";
+import { Dialog, Stack, Text, Badge } from '@fragments/ui';
 import { SHORTCUTS } from "../hooks/useKeyboardShortcuts.js";
-import { CloseIcon } from "./Icons.js";
 
 interface KeyboardShortcutsHelpProps {
   isOpen: boolean;
@@ -14,75 +14,39 @@ interface KeyboardShortcutsHelpProps {
 }
 
 export function KeyboardShortcutsHelp({ isOpen, onClose }: KeyboardShortcutsHelpProps) {
-  // Close on escape
-  useEffect(() => {
-    if (!isOpen) return;
-
-    const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
-        onClose();
-      }
-    };
-
-    document.addEventListener("keydown", handleEscape);
-    return () => document.removeEventListener("keydown", handleEscape);
-  }, [isOpen, onClose]);
-
-  if (!isOpen) return null;
-
   return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center p-4"
-      onClick={onClose}
-    >
-      {/* Backdrop */}
-      <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" />
-
-      {/* Modal */}
-      <div
-        className="relative bg-[--bg-primary] border border-[--border] rounded-xl shadow-2xl max-w-md w-full"
-        onClick={(e) => e.stopPropagation()}
-      >
-        {/* Header */}
-        <div className="flex items-center justify-between px-5 py-4 border-b border-[--border]">
-          <h2 className="text-base font-semibold text-primary">Keyboard Shortcuts</h2>
-          <button
-            onClick={onClose}
-            className="p-1.5 text-tertiary hover:text-primary hover:bg-[--bg-hover] rounded-lg transition-colors"
-          >
-            <CloseIcon className="w-4 h-4" />
-          </button>
-        </div>
-
-        {/* Shortcuts List */}
-        <div className="p-5 space-y-3">
-          {SHORTCUTS.map((shortcut, index) => (
-            <div key={index} className="flex items-center justify-between">
-              <span className="text-sm text-secondary">{shortcut.description}</span>
-              <div className="flex items-center gap-1.5">
-                {shortcut.keys.map((key, keyIndex) => (
-                  <span key={keyIndex} className="flex items-center">
-                    {keyIndex > 0 && (
-                      <span className="text-xs text-tertiary mx-1">or</span>
-                    )}
-                    <kbd className="px-2 py-1 text-xs font-mono bg-[--bg-secondary] border border-[--border] rounded text-primary">
-                      {key}
-                    </kbd>
-                  </span>
-                ))}
-              </div>
-            </div>
-          ))}
-        </div>
-
-        {/* Footer */}
-        <div className="px-5 py-3 border-t border-[--border] bg-[--bg-secondary] rounded-b-xl">
-          <p className="text-xs text-tertiary text-center">
-            Press <kbd className="px-1.5 py-0.5 text-xs font-mono bg-[--bg-primary] border border-[--border] rounded">?</kbd> to toggle this help
-          </p>
-        </div>
-      </div>
-    </div>
+    <Dialog open={isOpen} onOpenChange={(open: boolean) => { if (!open) onClose(); }}>
+      <Dialog.Content size="md">
+        <Dialog.Header>
+          <Dialog.Title>Keyboard Shortcuts</Dialog.Title>
+          <Dialog.Close />
+        </Dialog.Header>
+        <Dialog.Body>
+          <Stack direction="column" gap="sm">
+            {SHORTCUTS.map((shortcut, index) => (
+              <Stack key={index} direction="row" align="center" justify="between">
+                <Text size="sm" color="secondary">{shortcut.description}</Text>
+                <Stack direction="row" align="center" gap="xs">
+                  {shortcut.keys.map((key, keyIndex) => (
+                    <span key={keyIndex} style={{ display: 'flex', alignItems: 'center' }}>
+                      {keyIndex > 0 && (
+                        <Text size="xs" color="tertiary" style={{ margin: '0 4px' }}>or</Text>
+                      )}
+                      <Badge variant="default" size="sm">{key}</Badge>
+                    </span>
+                  ))}
+                </Stack>
+              </Stack>
+            ))}
+          </Stack>
+        </Dialog.Body>
+        <Dialog.Footer>
+          <Text size="xs" color="tertiary" style={{ textAlign: 'center', width: '100%' }}>
+            Press <Badge variant="default" size="sm">?</Badge> to toggle this help
+          </Text>
+        </Dialog.Footer>
+      </Dialog.Content>
+    </Dialog>
   );
 }