@fragments-sdk/cli 0.5.2 → 0.7.0

package/src/viewer/components/BottomPanel.tsx

@@ -5,7 +5,7 @@
 
 import { memo, useCallback } from 'react';
 import type { SegmentDefinition, SegmentVariant } from '../../core/index.js';
-import clsx from 'clsx';
+import { Tabs, Badge } from '@fragments/ui';
 import { ResizablePanel } from './ResizablePanel.js';
 import { CodePanel } from './CodePanel.js';
 import { TokenStylePanel } from './TokenStylePanel.js';
@@ -48,35 +48,6 @@ interface BottomPanelProps {
   segmentKey: string;
 }
 
-// Tab button component
-interface TabButtonProps {
-  active: boolean;
-  onClick: () => void;
-  children: React.ReactNode;
-  badge?: number;
-}
-
-const TabButton = memo(function TabButton({ active, onClick, children, badge }: TabButtonProps) {
-  return (
-    <button
-      onClick={onClick}
-      className={clsx(
-        "px-3 py-1 text-xs font-medium rounded relative",
-        active
-          ? "text-primary bg-[--bg-hover]"
-          : "text-tertiary hover:text-secondary"
-      )}
-    >
-      {children}
-      {badge !== undefined && badge > 0 && (
-        <span className="absolute -top-1 -right-1 w-4 h-4 text-[10px] bg-blue-500 text-white rounded-full flex items-center justify-center">
-          {badge > 99 ? '99+' : badge}
-        </span>
-      )}
-    </button>
-  );
-});
-
 export const BottomPanel = memo(function BottomPanel({
   segment,
   variant,
@@ -102,63 +73,52 @@ export const BottomPanel = memo(function BottomPanel({
     setTimeout(onRefreshRendered, 100);
   }, [onPanelChange, onFetchFigma, onRefreshRendered]);
 
+  // Build tab change handler that also triggers side effects
+  const handleTabChange = useCallback((value: string | number) => {
+    const panel = String(value);
+    if (panel === 'styles') {
+      handleStylesClick();
+    } else {
+      onPanelChange(panel as ActivePanel);
+    }
+  }, [handleStylesClick, onPanelChange]);
+
   return (
     <ResizablePanel
       visible={true}
       header={
-        <div className="flex items-center gap-1">
-          <TabButton
-            active={activePanel === 'code'}
-            onClick={() => onPanelChange('code')}
-          >
-            Code
-          </TabButton>
-          {figmaUrl && (
-            <TabButton
-              active={activePanel === 'styles'}
-              onClick={handleStylesClick}
-            >
-              Styles
-            </TabButton>
-          )}
-          <TabButton
-            active={activePanel === 'accessibility'}
-            onClick={() => onPanelChange('accessibility')}
-          >
-            Accessibility
-          </TabButton>
-          {variant?.hasPlayFunction && (
-            <TabButton
-              active={activePanel === 'interactions'}
-              onClick={() => onPanelChange('interactions')}
-            >
-              Interactions
-            </TabButton>
-          )}
-          <TabButton
-            active={activePanel === 'actions'}
-            onClick={() => onPanelChange('actions')}
-            badge={actionLogs.length}
-          >
-            Actions
-          </TabButton>
-          <TabButton
-            active={activePanel === 'graph'}
-            onClick={() => onPanelChange('graph')}
-          >
-            Graph
-          </TabButton>
-          <TabButton
-            active={activePanel === 'contract'}
-            onClick={() => onPanelChange('contract')}
-          >
-            Contract
-          </TabButton>
-        </div>
+        <Tabs value={activePanel} onValueChange={handleTabChange}>
+          <Tabs.List variant="pills">
+            <Tabs.Tab value="code">Code</Tabs.Tab>
+            {figmaUrl && <Tabs.Tab value="styles">Styles</Tabs.Tab>}
+            <Tabs.Tab value="accessibility">Accessibility</Tabs.Tab>
+            {variant?.hasPlayFunction && <Tabs.Tab value="interactions">Interactions</Tabs.Tab>}
+            <Tabs.Tab value="actions">
+              <span style={{ position: 'relative' }}>
+                Actions
+                {actionLogs.length > 0 && (
+                  <Badge
+                    variant="info"
+                    size="sm"
+                    style={{
+                      position: 'absolute',
+                      top: '-8px',
+                      right: '-16px',
+                    }}
+                  >
+                    {actionLogs.length > 99 ? '99+' : actionLogs.length}
+                  </Badge>
+                )}
+              </span>
+            </Tabs.Tab>
+            <Tabs.Tab value="graph">Graph</Tabs.Tab>
+            <Tabs.Tab value="contract">Contract</Tabs.Tab>
+          </Tabs.List>
+        </Tabs>
       }
     >
       {activePanel === 'code' && (
-        <div className="p-4">
+        <div style={{ padding: '16px' }}>
           <CodePanel
             variant={variant}
             componentName={segment.meta.name}

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