@fragments-sdk/cli 0.5.2 → 0.7.0

package/src/viewer/components/ActionCapture.tsx

@@ -165,7 +165,7 @@ export function ActionCapture({ children, onAction, enabled = true }: ActionCapt
   }, [onAction, enabled]);
 
   return (
-    <div ref={containerRef} className="contents">
+    <div ref={containerRef} style={{ display: 'contents' }}>
       {children}
     </div>
   );

package/src/viewer/components/ActionsPanel.tsx

@@ -5,10 +5,10 @@
  * with expandable argument details and timestamps.
  */
 
-import { useState, useMemo, useRef, useEffect } from "react";
-import clsx from "clsx";
+import { useState, useMemo } from "react";
 import type { ActionLog } from "../hooks/useActions.js";
 import { formatActionArg } from "../hooks/useActions.js";
+import { Button, Stack, Text, Badge, Input, Menu, Separator } from "@fragments/ui";
 import {
   TrashIcon,
   ChevronDownIcon,
@@ -41,20 +41,7 @@ interface ActionsPanelProps {
 export function ActionsPanel({ logs, onClear, componentName = 'Component', variantName = 'Default' }: ActionsPanelProps) {
   const [expandedLogs, setExpandedLogs] = useState<Set<string>>(new Set());
   const [filter, setFilter] = useState("");
-  const [showExportMenu, setShowExportMenu] = useState(false);
   const [copyFeedback, setCopyFeedback] = useState<string | null>(null);
-  const exportMenuRef = useRef<HTMLDivElement>(null);
-
-  // Close export menu when clicking outside
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (exportMenuRef.current && !exportMenuRef.current.contains(event.target as Node)) {
-        setShowExportMenu(false);
-      }
-    };
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, []);
 
   const filteredLogs = useMemo(() => {
     if (!filter) return logs;
@@ -101,32 +88,30 @@ export function ActionsPanel({ logs, onClear, componentName = 'Component', varia
       const filename = `${componentName}-${variantName}-actions${getFileExtension(format)}`;
       downloadAsFile(content, filename.toLowerCase().replace(/\s+/g, '-'));
     }
-
-    setShowExportMenu(false);
   };
 
   // No logs state
   if (logs.length === 0) {
     return (
-      <div className="h-full flex flex-col">
-        <div className="p-4 border-b border-[--border] flex items-center justify-between">
-          <h3 className="font-medium text-primary flex items-center gap-2">
-            <PlayIcon className="w-4 h-4" />
-            Actions
-          </h3>
+      <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+        <div style={{ padding: '16px', borderBottom: '1px solid var(--border)' }}>
+          <Stack direction="row" align="center" gap="sm">
+            <PlayIcon style={{ width: 16, height: 16 }} />
+            <Text weight="medium">Actions</Text>
+          </Stack>
         </div>
-        <div className="flex-1 flex items-center justify-center p-8 text-center">
-          <div className="max-w-md">
-            <div className="w-12 h-12 rounded-full bg-[--bg-tertiary] flex items-center justify-center mx-auto mb-4">
-              <PlayIcon className="w-6 h-6 text-tertiary" />
+        <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '32px', textAlign: 'center' }}>
+          <div style={{ maxWidth: '28rem' }}>
+            <div style={{ width: '48px', height: '48px', borderRadius: '9999px', background: 'var(--bg-secondary)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 16px' }}>
+              <PlayIcon style={{ width: 24, height: 24, color: 'var(--text-tertiary)' }} />
             </div>
-            <h4 className="font-medium text-secondary mb-2">
+            <Text weight="medium" color="secondary" style={{ marginBottom: '8px' }}>
               No actions logged yet
-            </h4>
-            <p className="text-sm text-tertiary">
+            </Text>
+            <Text size="sm" color="tertiary">
               Interact with the component to see callback invocations here.
-              Actions like <code className="px-1 py-0.5 bg-[--bg-tertiary] rounded text-xs">onClick</code>, <code className="px-1 py-0.5 bg-[--bg-tertiary] rounded text-xs">onChange</code>, etc. will be logged automatically.
-            </p>
+              Actions like <code style={{ padding: '2px 4px', background: 'var(--bg-secondary)', borderRadius: '4px', fontSize: '12px' }}>onClick</code>, <code style={{ padding: '2px 4px', background: 'var(--bg-secondary)', borderRadius: '4px', fontSize: '12px' }}>onChange</code>, etc. will be logged automatically.
+            </Text>
           </div>
         </div>
       </div>
@@ -134,151 +119,115 @@ export function ActionsPanel({ logs, onClear, componentName = 'Component', varia
   }
 
   return (
-    <div className="h-full flex flex-col">
+    <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
       {/* Header */}
-      <div className="p-3 border-b border-[--border] flex items-center justify-between gap-2">
-        <div className="flex items-center gap-2 flex-1">
-          <h3 className="font-medium text-primary flex items-center gap-2 text-sm">
-            <PlayIcon className="w-4 h-4" />
-            Actions
-          </h3>
-          <span className="text-xs text-tertiary bg-[--bg-tertiary] px-1.5 py-0.5 rounded">
-            {logs.length}
-          </span>
-        </div>
-        <div className="flex items-center gap-2">
-          <input
-            type="text"
-            placeholder="Filter..."
-            value={filter}
-            onChange={(e) => setFilter(e.target.value)}
-            className="px-2 py-1 text-xs border border-[--border] rounded bg-[--bg-elevated] text-primary w-24 focus:outline-none focus:ring-1 focus:ring-[--color-accent]"
-          />
+      <div style={{ padding: '12px', borderBottom: '1px solid var(--border)' }}>
+        <Stack direction="row" align="center" justify="between" gap="sm">
+          <Stack direction="row" align="center" gap="sm" style={{ flex: 1 }}>
+            <Stack direction="row" align="center" gap="sm">
+              <PlayIcon style={{ width: 16, height: 16 }} />
+              <Text weight="medium" size="sm">Actions</Text>
+            </Stack>
+            <Badge size="sm">{logs.length}</Badge>
+          </Stack>
+          <Stack direction="row" align="center" gap="sm">
+            <Input
+              size="sm"
+              placeholder="Filter..."
+              value={filter}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setFilter(e.target.value)}
+              style={{ width: '96px' }}
+            />
 
-          {/* Export dropdown */}
-          <div className="relative" ref={exportMenuRef}>
-            <button
-              onClick={() => setShowExportMenu(!showExportMenu)}
-              className={clsx(
-                "p-1.5 rounded transition-colors",
-                showExportMenu
-                  ? "text-[--color-accent] bg-[--bg-hover]"
-                  : "text-tertiary hover:text-secondary hover:bg-[--bg-hover]"
-              )}
-              title="Export actions"
-            >
-              <ExportIcon className="w-4 h-4" />
-            </button>
-
-            {showExportMenu && (
-              <div className="absolute right-0 top-full mt-1 w-56 bg-[--bg-elevated] rounded-lg shadow-[--shadow-lg] border border-[--border] py-1 z-50">
-                <div className="px-3 py-1.5 text-xs font-medium text-tertiary uppercase tracking-wide">
+            {/* Export dropdown */}
+            <Menu>
+              <Menu.Trigger>
+                <Button variant="ghost" size="sm" title="Export actions">
+                  <ExportIcon style={{ width: 16, height: 16 }} />
+                </Button>
+              </Menu.Trigger>
+              <Menu.Content>
+                <div style={{ padding: '6px 12px', fontSize: '12px', fontWeight: 500, color: 'var(--text-tertiary)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
                   Export as
                 </div>
 
                 {/* JSON */}
-                <div className="px-1">
-                  <div className="flex items-center justify-between px-2 py-1.5 hover:bg-[--bg-hover] rounded">
-                    <span className="text-sm text-secondary">JSON</span>
-                    <div className="flex items-center gap-1">
-                      <button
-                        onClick={() => handleExport('json', 'copy')}
-                        className="p-1 text-tertiary hover:text-secondary hover:bg-[--bg-hover] rounded"
-                        title="Copy to clipboard"
-                      >
-                        {copyFeedback === 'json' ? <CheckIcon className="w-3.5 h-3.5 text-green-500" /> : <CopyIcon className="w-3.5 h-3.5" />}
-                      </button>
-                      <button
-                        onClick={() => handleExport('json', 'download')}
-                        className="p-1 text-tertiary hover:text-secondary hover:bg-[--bg-hover] rounded"
-                        title="Download file"
-                      >
-                        <DownloadIcon className="w-3.5 h-3.5" />
-                      </button>
-                    </div>
-                  </div>
+                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '6px 12px' }}>
+                  <Text size="sm" color="secondary">JSON</Text>
+                  <Stack direction="row" gap="xs">
+                    <Menu.Item onSelect={() => handleExport('json', 'copy')}>
+                      {copyFeedback === 'json' ? <CheckIcon style={{ width: 14, height: 14, color: '#22c55e' }} /> : <CopyIcon style={{ width: 14, height: 14 }} />}
+                    </Menu.Item>
+                    <Menu.Item onSelect={() => handleExport('json', 'download')}>
+                      <DownloadIcon style={{ width: 14, height: 14 }} />
+                    </Menu.Item>
+                  </Stack>
                 </div>
 
                 {/* Jest */}
-                <div className="px-1">
-                  <div className="flex items-center justify-between px-2 py-1.5 hover:bg-[--bg-hover] rounded">
-                    <span className="text-sm text-secondary">Jest Assertions</span>
-                    <div className="flex items-center gap-1">
-                      <button
-                        onClick={() => handleExport('jest', 'copy')}
-                        className="p-1 text-tertiary hover:text-secondary hover:bg-[--bg-hover] rounded"
-                        title="Copy to clipboard"
-                      >
-                        {copyFeedback === 'jest' ? <CheckIcon className="w-3.5 h-3.5 text-green-500" /> : <CopyIcon className="w-3.5 h-3.5" />}
-                      </button>
-                      <button
-                        onClick={() => handleExport('jest', 'download')}
-                        className="p-1 text-tertiary hover:text-secondary hover:bg-[--bg-hover] rounded"
-                        title="Download file"
-                      >
-                        <DownloadIcon className="w-3.5 h-3.5" />
-                      </button>
-                    </div>
-                  </div>
+                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '6px 12px' }}>
+                  <Text size="sm" color="secondary">Jest Assertions</Text>
+                  <Stack direction="row" gap="xs">
+                    <Menu.Item onSelect={() => handleExport('jest', 'copy')}>
+                      {copyFeedback === 'jest' ? <CheckIcon style={{ width: 14, height: 14, color: '#22c55e' }} /> : <CopyIcon style={{ width: 14, height: 14 }} />}
+                    </Menu.Item>
+                    <Menu.Item onSelect={() => handleExport('jest', 'download')}>
+                      <DownloadIcon style={{ width: 14, height: 14 }} />
+                    </Menu.Item>
+                  </Stack>
                 </div>
 
                 {/* Playwright */}
-                <div className="px-1">
-                  <div className="flex items-center justify-between px-2 py-1.5 hover:bg-[--bg-hover] rounded">
-                    <span className="text-sm text-secondary">Playwright Test</span>
-                    <div className="flex items-center gap-1">
-                      <button
-                        onClick={() => handleExport('playwright', 'copy')}
-                        className="p-1 text-tertiary hover:text-secondary hover:bg-[--bg-hover] rounded"
-                        title="Copy to clipboard"
-                      >
-                        {copyFeedback === 'playwright' ? <CheckIcon className="w-3.5 h-3.5 text-green-500" /> : <CopyIcon className="w-3.5 h-3.5" />}
-                      </button>
-                      <button
-                        onClick={() => handleExport('playwright', 'download')}
-                        className="p-1 text-tertiary hover:text-secondary hover:bg-[--bg-hover] rounded"
-                        title="Download file"
-                      >
-                        <DownloadIcon className="w-3.5 h-3.5" />
-                      </button>
-                    </div>
-                  </div>
+                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '6px 12px' }}>
+                  <Text size="sm" color="secondary">Playwright Test</Text>
+                  <Stack direction="row" gap="xs">
+                    <Menu.Item onSelect={() => handleExport('playwright', 'copy')}>
+                      {copyFeedback === 'playwright' ? <CheckIcon style={{ width: 14, height: 14, color: '#22c55e' }} /> : <CopyIcon style={{ width: 14, height: 14 }} />}
+                    </Menu.Item>
+                    <Menu.Item onSelect={() => handleExport('playwright', 'download')}>
+                      <DownloadIcon style={{ width: 14, height: 14 }} />
+                    </Menu.Item>
+                  </Stack>
                 </div>
 
-                <div className="border-t border-[--border-subtle] my-1" />
-                <div className="px-3 py-1.5 text-xs text-tertiary">
-                  {logs.length} action{logs.length !== 1 ? 's' : ''} recorded
+                <Separator />
+                <div style={{ padding: '6px 12px' }}>
+                  <Text size="xs" color="tertiary">
+                    {logs.length} action{logs.length !== 1 ? 's' : ''} recorded
+                  </Text>
                 </div>
-              </div>
-            )}
-          </div>
+              </Menu.Content>
+            </Menu>
 
-          <button
-            onClick={onClear}
-            className="p-1.5 text-tertiary hover:text-secondary hover:bg-[--bg-hover] rounded transition-colors"
-            title="Clear all actions"
-          >
-            <TrashIcon className="w-4 h-4" />
-          </button>
-        </div>
+            <Button
+              onClick={onClear}
+              variant="ghost"
+              size="sm"
+              title="Clear all actions"
+            >
+              <TrashIcon style={{ width: 16, height: 16 }} />
+            </Button>
+          </Stack>
+        </Stack>
       </div>
 
       {/* Log list */}
-      <div className="flex-1 overflow-y-auto">
+      <div style={{ flex: 1, overflowY: 'auto' }}>
         {filteredLogs.length === 0 ? (
-          <div className="p-4 text-center text-sm text-tertiary">
-            No actions match "{filter}"
+          <div style={{ padding: '16px', textAlign: 'center' }}>
+            <Text size="sm" color="tertiary">No actions match "{filter}"</Text>
           </div>
         ) : (
-          <div className="divide-y divide-[--border-subtle]">
-            {filteredLogs.map((log) => (
-              <ActionLogItem
-                key={log.id}
-                log={log}
-                isExpanded={expandedLogs.has(log.id)}
-                onToggle={() => toggleExpanded(log.id)}
-                formatTime={formatTime}
-              />
+          <div>
+            {filteredLogs.map((log, index) => (
+              <div key={log.id} style={{ borderBottom: index < filteredLogs.length - 1 ? '1px solid var(--border)' : undefined }}>
+                <ActionLogItem
+                  log={log}
+                  isExpanded={expandedLogs.has(log.id)}
+                  onToggle={() => toggleExpanded(log.id)}
+                  formatTime={formatTime}
+                />
+              </div>
             ))}
           </div>
         )}
@@ -295,70 +244,80 @@ interface ActionLogItemProps {
 }
 
 function ActionLogItem({ log, isExpanded, onToggle, formatTime }: ActionLogItemProps) {
+  const [hovered, setHovered] = useState(false);
   const hasArgs = log.args.length > 0;
   const argsPreview = hasArgs
     ? log.args.map((arg) => formatActionArg(arg, 50)).join(", ")
     : "";
 
   return (
-    <div className="hover:bg-[--bg-secondary] transition-colors">
+    <div
+      style={{ background: hovered ? 'var(--bg-secondary)' : 'transparent', transition: 'background 0.15s' }}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+    >
       <button
         onClick={onToggle}
         disabled={!hasArgs}
-        className={clsx(
-          "w-full px-3 py-2 flex items-start gap-2 text-left",
-          hasArgs && "cursor-pointer",
-          !hasArgs && "cursor-default"
-        )}
+        style={{
+          width: '100%',
+          padding: '8px 12px',
+          display: 'flex',
+          alignItems: 'flex-start',
+          gap: '8px',
+          textAlign: 'left',
+          cursor: hasArgs ? 'pointer' : 'default',
+          border: 'none',
+          background: 'transparent',
+          color: 'inherit',
+        }}
       >
         {/* Expand icon */}
-        <div className="flex-shrink-0 w-4 h-4 mt-0.5">
+        <div style={{ flexShrink: 0, width: '16px', height: '16px', marginTop: '2px' }}>
           {hasArgs ? (
             isExpanded ? (
-              <ChevronDownIcon className="w-4 h-4 text-tertiary" />
+              <ChevronDownIcon style={{ width: 16, height: 16, color: 'var(--text-tertiary)' }} />
             ) : (
-              <ChevronRightIcon className="w-4 h-4 text-tertiary" />
+              <ChevronRightIcon style={{ width: 16, height: 16, color: 'var(--text-tertiary)' }} />
             )
           ) : (
-            <div className="w-4 h-4" />
+            <div style={{ width: '16px', height: '16px' }} />
           )}
         </div>
 
         {/* Action name */}
-        <div className="flex-1 min-w-0">
-          <div className="flex items-center gap-2">
-            <span className="font-mono text-sm text-[--color-accent]">
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <Stack direction="row" align="center" gap="sm">
+            <Text font="mono" size="sm" style={{ color: 'var(--color-accent)' }}>
               {log.name}
-            </span>
+            </Text>
             {log.count > 1 && (
-              <span className="text-xs text-tertiary bg-[--bg-tertiary] px-1.5 py-0.5 rounded-full">
-                ×{log.count}
-              </span>
+              <Badge size="sm">x{log.count}</Badge>
             )}
-          </div>
+          </Stack>
           {!isExpanded && hasArgs && (
-            <div className="text-xs text-tertiary truncate mt-0.5 font-mono">
+            <Text size="xs" color="tertiary" font="mono" style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', marginTop: '2px' }}>
               ({argsPreview})
-            </div>
+            </Text>
           )}
         </div>
 
         {/* Timestamp */}
-        <span className="flex-shrink-0 text-xs text-tertiary font-mono">
+        <Text size="xs" color="tertiary" font="mono" style={{ flexShrink: 0 }}>
           {formatTime(log.timestamp)}
-        </span>
+        </Text>
       </button>
 
       {/* Expanded args */}
       {isExpanded && hasArgs && (
-        <div className="px-3 pb-3 pl-9">
-          <div className="bg-[--bg-secondary] rounded-lg p-2 overflow-x-auto">
+        <div style={{ padding: '0 12px 12px 36px' }}>
+          <div style={{ background: 'var(--bg-secondary)', borderRadius: '8px', padding: '8px', overflowX: 'auto' }}>
             {log.args.map((arg, index) => (
-              <div key={index} className="mb-1 last:mb-0">
-                <span className="text-xs text-tertiary">
+              <div key={index} style={{ marginBottom: index < log.args.length - 1 ? '4px' : 0 }}>
+                <Text size="xs" color="tertiary" as="span">
                   {log.args.length > 1 ? `[${index}] ` : ""}
-                </span>
-                <pre className="inline text-xs font-mono text-secondary whitespace-pre-wrap">
+                </Text>
+                <pre style={{ display: 'inline', fontSize: '12px', fontFamily: 'monospace', color: 'var(--text-secondary)', whiteSpace: 'pre-wrap' }}>
                   {formatActionArg(arg, 500)}
                 </pre>
               </div>