@fragments-sdk/cli 0.5.2 → 0.6.0

package/src/viewer/components/CodePanel.tsx

@@ -1,8 +1,6 @@
-import { useState, useCallback, useMemo, useEffect, isValidElement, type ReactNode } from 'react';
+import { useMemo, isValidElement, type ReactNode } from 'react';
 import type { SegmentVariant, PropDefinition } from '../../core/index.js';
-import { codeToHtml } from 'shiki';
-import clsx from 'clsx';
-import { CopyIcon, CheckIcon } from './Icons.js';
+import { CodeBlock } from '@fragments/ui';
 
 interface CodePanelProps {
   variant: SegmentVariant;
@@ -213,9 +211,6 @@ function extractRenderBody(renderFn: () => ReactNode): string | null {
 }
 
 export function CodePanel({ variant, componentName, compact = false, propDefs }: CodePanelProps) {
-  const [copied, setCopied] = useState(false);
-  const [highlightedHtml, setHighlightedHtml] = useState<string>('');
-
   // Generate code - extract from render function source for accuracy
   const generatedCode = useMemo(() => {
     // Priority 1: Use variant.code if available (from compiled JSON/AST)
@@ -243,90 +238,17 @@ export function CodePanel({ variant, componentName, compact = false, propDefs }:
     return generateCombinedCode(componentName, propDefs, effectiveArgs, needsState);
   }, [componentName, variant, propDefs]);
 
-  // Apply syntax highlighting
-  useEffect(() => {
-    let cancelled = false;
-
-    codeToHtml(generatedCode, {
-      lang: 'tsx',
-      theme: 'one-dark-pro',
-    }).then(html => {
-      if (!cancelled) {
-        setHighlightedHtml(html);
-      }
-    }).catch(err => {
-      console.error('Syntax highlighting failed:', err);
-      if (!cancelled) {
-        // Fallback to plain text
-        setHighlightedHtml(`<pre><code>${escapeHtml(generatedCode)}</code></pre>`);
-      }
-    });
-
-    return () => { cancelled = true; };
-  }, [generatedCode]);
-
-  const handleCopy = useCallback(async () => {
-    try {
-      await navigator.clipboard.writeText(generatedCode);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error('Failed to copy:', err);
-    }
-  }, [generatedCode]);
-
   return (
-    <div className="relative">
-      {/* Syntax highlighted code */}
-      <div
-        className={clsx(
-          'rounded-lg overflow-auto border border-[--border] bg-[#282c34]',
-          '[&_pre]:!bg-transparent [&_pre]:!m-0 [&_pre]:p-4',
-          '[&_code]:!bg-transparent [&_code]:text-[13px] [&_code]:leading-relaxed',
-          '[&_.shiki]:!bg-transparent',
-          // Custom selection highlight for better visibility
-          '[&_*::selection]:bg-blue-500/40 [&_*::selection]:text-white',
-          compact && '[&_code]:text-xs'
-        )}
-        style={{ maxHeight: 400 }}
-        dangerouslySetInnerHTML={{ __html: highlightedHtml || '<div class="p-4 text-gray-500 text-sm">Loading...</div>' }}
-      />
-
-      {/* Copy button - fixed to top right of editor */}
-      <button
-        onClick={handleCopy}
-        className={clsx(
-          'absolute top-2 right-2 flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium rounded-md transition-all duration-200',
-          copied
-            ? 'bg-green-500/20 text-green-400 border border-green-500/30'
-            : 'bg-white/10 text-gray-300 border border-white/10 hover:bg-white/15 hover:text-white'
-        )}
-      >
-        {copied ? (
-          <>
-            <CheckIcon className="w-3.5 h-3.5" />
-            <span>Copied!</span>
-          </>
-        ) : (
-          <>
-            <CopyIcon className="w-3.5 h-3.5" />
-            <span>Copy</span>
-          </>
-        )}
-      </button>
-    </div>
+    <CodeBlock
+      code={generatedCode}
+      language="tsx"
+      showCopy
+      maxHeight={400}
+      compact={compact}
+    />
   );
 }
 
-function escapeHtml(str: string): string {
-  return str
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#039;');
-}
-
 /**
  * Normalize indentation by removing common leading whitespace from all lines.
  * Handles JSX where first line may be at column 0 but inner content is indented.

package/src/viewer/components/CommandPalette.tsx

@@ -5,10 +5,12 @@
  * - Quick navigation to components
  * - Fuzzy search across all components and variants
  * - Keyboard navigation (arrows, enter, escape)
+ *
+ * Uses Fragments UI Dialog for the overlay shell.
  */
 
 import { useState, useEffect, useRef, useMemo, useCallback } from "react";
-import clsx from "clsx";
+import { Dialog, Stack, Text, Badge, Separator, Input } from '@fragments/ui';
 import type { SegmentDefinition } from "../../core/index.js";
 import { SearchIcon, ChevronRightIcon } from "./Icons.js";
 
@@ -168,96 +170,132 @@ export function CommandPalette({
   if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 z-50 flex items-start justify-center pt-[15vh]">
-      {/* Backdrop */}
-      <div
-        className="absolute inset-0 bg-black/50 backdrop-blur-sm"
-        onClick={onClose}
-      />
-
-      {/* Palette */}
-      <div
-        className="relative w-full max-w-xl bg-[--bg-primary] rounded-xl shadow-2xl border border-[--border] overflow-hidden"
-        onKeyDown={handleKeyDown}
-      >
+    <Dialog open={isOpen} onOpenChange={(open: boolean) => { if (!open) onClose(); }}>
+      <Dialog.Content size="lg">
         {/* Search input */}
-        <div className="flex items-center px-4 py-3 border-b-2 border-blue-500">
-          <SearchIcon className="w-5 h-5 text-blue-500 mr-3" />
+        <Stack direction="row" align="center" style={{
+          padding: '12px 16px',
+          borderBottom: '2px solid #3b82f6',
+        }}>
+          <SearchIcon style={{ width: 20, height: 20, color: '#3b82f6', marginRight: 12 }} />
           <input
             ref={inputRef}
             type="text"
             value={query}
             onChange={(e) => setQuery(e.target.value)}
+            onKeyDown={handleKeyDown}
             placeholder="Search components and variants..."
-            className="flex-1 bg-transparent text-primary placeholder-tertiary text-base focus:outline-none"
+            style={{
+              flex: 1,
+              background: 'transparent',
+              color: 'var(--text-primary)',
+              fontSize: '16px',
+              border: 'none',
+              outline: 'none',
+            }}
           />
-          <kbd className="hidden sm:inline-flex items-center gap-1 px-2 py-0.5 text-xs text-tertiary bg-[--bg-secondary] rounded border border-[--border]">
-            esc
-          </kbd>
-        </div>
+          <Badge size="sm" variant="default">esc</Badge>
+        </Stack>
 
         {/* Results */}
-        <div
-          ref={listRef}
-          className="max-h-80 overflow-y-auto py-2"
-        >
+        <div ref={listRef} style={{ maxHeight: '320px', overflowY: 'auto', padding: '8px 0' }}>
           {results.length === 0 ? (
-            <div className="px-4 py-8 text-center text-tertiary">
-              {query ? (
-                <>No results for "{query}"</>
-              ) : (
-                <>Start typing to search...</>
-              )}
+            <div style={{ padding: '32px 16px', textAlign: 'center' }}>
+              <Text color="tertiary">
+                {query ? (
+                  <>No results for &ldquo;{query}&rdquo;</>
+                ) : (
+                  <>Start typing to search...</>
+                )}
+              </Text>
             </div>
           ) : (
             results.map((result, index) => (
               <button
                 key={`${result.path}-${result.variantName || "component"}`}
                 onClick={() => handleSelect(result)}
-                className={clsx(
-                  "w-full px-4 py-2 flex items-center gap-3 text-left transition-colors",
-                  index === selectedIndex
-                    ? "bg-blue-500/10 text-primary"
-                    : "text-secondary hover:bg-[--bg-hover]"
-                )}
+                style={{
+                  width: '100%',
+                  padding: '8px 16px',
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '12px',
+                  textAlign: 'left',
+                  transition: 'background-color 150ms',
+                  border: 'none',
+                  cursor: 'pointer',
+                  backgroundColor: index === selectedIndex ? 'rgba(59, 130, 246, 0.1)' : 'transparent',
+                  color: index === selectedIndex ? 'var(--text-primary)' : 'var(--text-secondary)',
+                }}
+                onMouseEnter={(e) => {
+                  setSelectedIndex(index);
+                  if (index !== selectedIndex) {
+                    e.currentTarget.style.backgroundColor = 'var(--bg-hover)';
+                  }
+                }}
+                onMouseLeave={(e) => {
+                  if (index !== selectedIndex) {
+                    e.currentTarget.style.backgroundColor = 'transparent';
+                  }
+                }}
               >
                 {/* Icon/Badge */}
-                <div
-                  className={clsx(
-                    "flex-shrink-0 w-8 h-8 rounded-lg flex items-center justify-center text-xs font-medium",
-                    result.type === "component"
-                      ? "bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300"
-                      : "bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300"
-                  )}
+                <Badge
+                  size="sm"
+                  style={{
+                    flexShrink: 0,
+                    width: '32px',
+                    height: '32px',
+                    borderRadius: '8px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    backgroundColor: result.type === "component"
+                      ? 'rgba(59, 130, 246, 0.15)'
+                      : 'rgba(168, 85, 247, 0.15)',
+                    color: result.type === "component"
+                      ? '#3b82f6'
+                      : '#a855f7',
+                  }}
                 >
                   {result.type === "component" ? "C" : "V"}
-                </div>
+                </Badge>
 
                 {/* Content */}
-                <div className="flex-1 min-w-0">
-                  <div className="flex items-center gap-2">
-                    <span className="font-medium truncate">
+                <div style={{ flex: 1, minWidth: 0 }}>
+                  <Stack direction="row" align="center" gap="sm">
+                    <Text weight="medium" style={{
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                      whiteSpace: 'nowrap',
+                    }}>
                       {result.componentName}
-                    </span>
+                    </Text>
                     {result.variantName && (
                       <>
-                        <ChevronRightIcon className="w-3 h-3 text-tertiary flex-shrink-0" />
-                        <span className="text-secondary truncate">
+                        <ChevronRightIcon style={{ width: 12, height: 12, color: 'var(--text-tertiary)', flexShrink: 0 }} />
+                        <Text color="secondary" style={{
+                          overflow: 'hidden',
+                          textOverflow: 'ellipsis',
+                          whiteSpace: 'nowrap',
+                        }}>
                           {result.variantName}
-                        </span>
+                        </Text>
                       </>
                     )}
-                  </div>
-                  <div className="text-xs text-tertiary truncate">
+                  </Stack>
+                  <Text size="xs" color="tertiary" style={{
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                  }}>
                     {result.category}
-                  </div>
+                  </Text>
                 </div>
 
                 {/* Keyboard hint for selected */}
                 {index === selectedIndex && (
-                  <kbd className="hidden sm:inline-flex items-center px-1.5 py-0.5 text-[10px] text-tertiary bg-[--bg-secondary] rounded border border-[--border]">
-                    enter
-                  </kbd>
+                  <Badge size="sm" variant="default">enter</Badge>
                 )}
               </button>
             ))
@@ -265,24 +303,29 @@ export function CommandPalette({
         </div>
 
         {/* Footer */}
-        <div className="px-4 py-2 border-t border-[--border] flex items-center justify-between text-xs text-tertiary">
-          <div className="flex items-center gap-3">
-            <span className="flex items-center gap-1">
-              <kbd className="px-1.5 py-0.5 bg-[--bg-secondary] rounded border border-[--border]">↑</kbd>
-              <kbd className="px-1.5 py-0.5 bg-[--bg-secondary] rounded border border-[--border]">↓</kbd>
-              to navigate
-            </span>
-            <span className="flex items-center gap-1">
-              <kbd className="px-1.5 py-0.5 bg-[--bg-secondary] rounded border border-[--border]">↵</kbd>
-              to select
-            </span>
-          </div>
-          <span>
-            {results.length} result{results.length !== 1 ? "s" : ""}
-          </span>
+        <div style={{
+          padding: '8px 16px',
+          borderTop: '1px solid var(--border)',
+        }}>
+          <Stack direction="row" align="center" justify="between">
+            <Stack direction="row" align="center" gap="md">
+              <Stack direction="row" align="center" gap="xs">
+                <Badge size="sm" variant="default">&#8593;</Badge>
+                <Badge size="sm" variant="default">&#8595;</Badge>
+                <Text size="xs" color="tertiary">to navigate</Text>
+              </Stack>
+              <Stack direction="row" align="center" gap="xs">
+                <Badge size="sm" variant="default">&#8629;</Badge>
+                <Text size="xs" color="tertiary">to select</Text>
+              </Stack>
+            </Stack>
+            <Text size="xs" color="tertiary">
+              {results.length} result{results.length !== 1 ? "s" : ""}
+            </Text>
+          </Stack>
         </div>
-      </div>
-    </div>
+      </Dialog.Content>
+    </Dialog>
   );
 }