@fragments-sdk/cli 0.5.2 → 0.7.0

package/src/viewer/components/ContractPanel.tsx

@@ -5,6 +5,7 @@
 
 import { memo } from 'react';
 import type { SegmentContract } from '../../core/index.js';
+import { Stack, Text, Card, Chip, Alert, EmptyState, CodeBlock, Badge } from '@fragments/ui';
 
 interface ContractPanelProps {
   contract?: SegmentContract;
@@ -18,10 +19,10 @@ export const ContractPanel = memo(function ContractPanel({
   // Empty state when no contract metadata
   if (!contract || isContractEmpty(contract)) {
     return (
-      <div className="p-6 text-center">
-        <div className="text-tertiary mb-4">
+      <EmptyState>
+        <EmptyState.Icon>
           <svg
-            className="w-12 h-12 mx-auto mb-4 opacity-50"
+            style={{ width: '48px', height: '48px', opacity: 0.5 }}
             fill="none"
             viewBox="0 0 24 24"
             stroke="currentColor"
@@ -33,126 +34,132 @@ export const ContractPanel = memo(function ContractPanel({
               d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
             />
           </svg>
-          <p className="text-sm font-medium">No contract metadata</p>
-        </div>
-        <p className="text-xs text-quaternary mb-4">
-          Add a <code className="bg-[--bg-hover] px-1 py-0.5 rounded">contract</code> field to the segment definition to enable AI agent features.
-        </p>
-        <div className="text-left bg-[--bg-hover] rounded-lg p-4 text-xs font-mono">
-          <pre className="text-quaternary">{`contract: {
+        </EmptyState.Icon>
+        <EmptyState.Title>No contract metadata</EmptyState.Title>
+        <EmptyState.Description>
+          Add a <code style={{ background: 'var(--bg-hover)', padding: '2px 4px', borderRadius: '4px' }}>contract</code> field to the segment definition to enable AI agent features.
+        </EmptyState.Description>
+        <EmptyState.Actions>
+          <CodeBlock
+            code={`contract: {
   propsSummary: ['variant: primary|secondary'],
   scenarioTags: ['form.submit', 'action.primary'],
   a11yRules: ['A11Y_BTN_LABEL'],
-}`}</pre>
-        </div>
-      </div>
+}`}
+            language="typescript"
+            compact
+          />
+        </EmptyState.Actions>
+      </EmptyState>
     );
   }
 
   return (
-    <div className="p-4 space-y-6 text-sm">
-      {/* Props Summary */}
-      {contract.propsSummary && contract.propsSummary.length > 0 && (
-        <Section title="Props Summary">
-          <div className="overflow-x-auto">
-            <table className="w-full text-xs border-collapse">
-              <thead>
-                <tr className="border-b border-[--border]">
-                  <th className="text-left py-2 pr-4 font-medium text-tertiary">Name</th>
-                  <th className="text-left py-2 pr-4 font-medium text-tertiary">Type</th>
-                  <th className="text-left py-2 font-medium text-tertiary">Description</th>
-                </tr>
-              </thead>
-              <tbody>
-                {contract.propsSummary.map((prop, i) => {
-                  const parsed = parsePropSummary(prop);
-                  return (
-                    <tr key={i} className="border-b border-[--border-subtle] last:border-b-0">
-                      <td className="py-2 pr-4 align-top">
-                        <code className="text-xs font-medium text-primary">{parsed.name}</code>
-                      </td>
-                      <td className="py-2 pr-4 align-top">
-                        <code className="text-xs text-purple-600 dark:text-purple-400">{parsed.type}</code>
-                      </td>
-                      <td className="py-2 align-top text-secondary">{parsed.description}</td>
+    <div style={{ padding: '16px', fontSize: '14px' }}>
+      <Stack gap="lg">
+        {/* Props Summary */}
+        {contract.propsSummary && contract.propsSummary.length > 0 && (
+          <Section title="Props Summary">
+            <Card>
+              <Card.Body>
+                <table style={{ width: '100%', fontSize: '12px', borderCollapse: 'collapse' }}>
+                  <thead>
+                    <tr style={{ borderBottom: '1px solid var(--border)' }}>
+                      <th style={{ textAlign: 'left', padding: '8px 16px 8px 0', fontWeight: 500, color: 'var(--text-tertiary)' }}>Name</th>
+                      <th style={{ textAlign: 'left', padding: '8px 16px 8px 0', fontWeight: 500, color: 'var(--text-tertiary)' }}>Type</th>
+                      <th style={{ textAlign: 'left', padding: '8px 0', fontWeight: 500, color: 'var(--text-tertiary)' }}>Description</th>
                     </tr>
-                  );
-                })}
-              </tbody>
-            </table>
-          </div>
-        </Section>
-      )}
-
-      {/* Scenario Tags */}
-      {contract.scenarioTags && contract.scenarioTags.length > 0 && (
-        <Section title="Scenario Tags" subtitle="Used by fragments_suggest for AI queries">
-          <div className="flex flex-wrap gap-2">
-            {contract.scenarioTags.map((tag, i) => (
-              <span
-                key={i}
-                className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-blue-500/10 text-blue-500 border border-blue-500/20"
-              >
-                {tag}
-              </span>
-            ))}
-          </div>
-        </Section>
-      )}
-
-      {/* Accessibility Rules */}
-      {contract.a11yRules && contract.a11yRules.length > 0 && (
-        <Section title="Accessibility Rules">
-          <div className="space-y-2">
-            {contract.a11yRules.map((rule, i) => (
-              <div
-                key={i}
-                className="flex items-center gap-2 p-2 bg-[--bg-hover] rounded"
-              >
-                <span className="text-green-500">
-                  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-                  </svg>
-                </span>
-                <code className="text-xs text-secondary">{rule}</code>
-              </div>
-            ))}
-          </div>
-        </Section>
-      )}
-
-      {/* Bans */}
-      {contract.bans && contract.bans.length > 0 && (
-        <Section title="Usage Bans" subtitle="Patterns to avoid">
-          <div className="space-y-2">
-            {contract.bans.map((ban, i) => (
-              <div
-                key={i}
-                className="p-3 bg-amber-500/10 border border-amber-500/20 rounded"
-              >
-                <div className="flex items-center gap-2 mb-1">
-                  <span className="text-amber-500">
-                    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                  </thead>
+                  <tbody>
+                    {contract.propsSummary.map((prop, i) => {
+                      const parsed = parsePropSummary(prop);
+                      return (
+                        <tr key={i} style={{ borderBottom: i < contract.propsSummary!.length - 1 ? '1px solid var(--border)' : undefined }}>
+                          <td style={{ padding: '8px 16px 8px 0', verticalAlign: 'top' }}>
+                            <Text font="mono" size="xs" weight="medium">{parsed.name}</Text>
+                          </td>
+                          <td style={{ padding: '8px 16px 8px 0', verticalAlign: 'top' }}>
+                            <Badge size="sm">{parsed.type}</Badge>
+                          </td>
+                          <td style={{ padding: '8px 0', verticalAlign: 'top' }}>
+                            <Text size="xs" color="secondary">{parsed.description}</Text>
+                          </td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              </Card.Body>
+            </Card>
+          </Section>
+        )}
+
+        {/* Scenario Tags */}
+        {contract.scenarioTags && contract.scenarioTags.length > 0 && (
+          <Section title="Scenario Tags" subtitle="Used by fragments_suggest for AI queries">
+            <Stack direction="row" gap="sm" style={{ flexWrap: 'wrap' }}>
+              {contract.scenarioTags.map((tag, i) => (
+                <Chip key={i}>{tag}</Chip>
+              ))}
+            </Stack>
+          </Section>
+        )}
+
+        {/* Accessibility Rules */}
+        {contract.a11yRules && contract.a11yRules.length > 0 && (
+          <Section title="Accessibility Rules">
+            <Stack gap="sm">
+              {contract.a11yRules.map((rule, i) => (
+                <Stack
+                  key={i}
+                  direction="row"
+                  align="center"
+                  gap="sm"
+                  style={{ padding: '8px', background: 'var(--bg-hover)', borderRadius: '4px' }}
+                >
+                  <span style={{ color: '#22c55e' }}>
+                    <svg style={{ width: '16px', height: '16px' }} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                     </svg>
                   </span>
-                  <code className="text-xs text-amber-600 dark:text-amber-400">
-                    {ban.pattern}
-                  </code>
-                </div>
-                <p className="text-xs text-tertiary pl-6">{ban.message}</p>
-              </div>
-            ))}
-          </div>
-        </Section>
-      )}
-
-      {/* Empty sections message */}
-      {isPartialContract(contract) && (
-        <div className="text-xs text-quaternary p-3 bg-[--bg-hover] rounded">
-          Tip: Add more contract fields to help AI agents better understand this component.
-        </div>
-      )}
+                  <Text font="mono" size="xs" color="secondary">{rule}</Text>
+                </Stack>
+              ))}
+            </Stack>
+          </Section>
+        )}
+
+        {/* Bans */}
+        {contract.bans && contract.bans.length > 0 && (
+          <Section title="Usage Bans" subtitle="Patterns to avoid">
+            <Stack gap="sm">
+              {contract.bans.map((ban, i) => (
+                <Alert key={i} severity="warning">
+                  <Alert.Body>
+                    <Alert.Title>
+                      <Text font="mono" size="xs">{ban.pattern}</Text>
+                    </Alert.Title>
+                    <Alert.Content>
+                      <Text size="xs" color="tertiary">{ban.message}</Text>
+                    </Alert.Content>
+                  </Alert.Body>
+                </Alert>
+              ))}
+            </Stack>
+          </Section>
+        )}
+
+        {/* Empty sections message */}
+        {isPartialContract(contract) && (
+          <Alert severity="info">
+            <Alert.Body>
+              <Alert.Content>
+                Tip: Add more contract fields to help AI agents better understand this component.
+              </Alert.Content>
+            </Alert.Body>
+          </Alert>
+        )}
+      </Stack>
     </div>
   );
 });
@@ -167,12 +174,12 @@ interface SectionProps {
 function Section({ title, subtitle, children }: SectionProps) {
   return (
     <div>
-      <h3 className="text-xs font-semibold text-primary mb-2 flex items-center gap-2">
-        {title}
+      <Stack direction="row" align="center" gap="sm" style={{ marginBottom: '8px' }}>
+        <Text as="h3" size="xs" weight="semibold">{title}</Text>
         {subtitle && (
-          <span className="font-normal text-quaternary">({subtitle})</span>
+          <Text size="xs" color="tertiary">({subtitle})</Text>
         )}
-      </h3>
+      </Stack>
       {children}
     </div>
   );

package/src/viewer/components/ErrorBoundary.tsx

@@ -1,9 +1,11 @@
 import { Component, type ReactNode, type ErrorInfo } from 'react';
+import { Button, Alert, CodeBlock, Collapsible, Stack, Text } from '@fragments/ui';
 import { ErrorIcon, RefreshIcon } from './Icons.js';
 
 interface ErrorBoundaryProps {
   children: ReactNode;
   componentName?: string;
+  fallback?: ReactNode;
   onRetry?: () => void;
 }
 
@@ -24,10 +26,8 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
   }
 
   componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    // Log error to console with full stack trace
     console.error('Component Error:', error);
     console.error('Component Stack:', errorInfo.componentStack);
-
     this.setState({ errorInfo });
   }
 
@@ -38,45 +38,57 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
 
   render() {
     if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
       const { componentName } = this.props;
       const { error, errorInfo } = this.state;
 
       return (
-        <div className="p-6 rounded-xl border-2 border-red-300 dark:border-red-700 bg-red-50 dark:bg-red-950">
-          <div className="flex items-start gap-3">
-            <ErrorIcon className="w-6 h-6 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5" />
-            <div className="flex-1 min-w-0">
-              <h3 className="text-sm font-semibold text-red-900 dark:text-red-100 mb-1">
-                {componentName ? `Error rendering ${componentName}` : 'Component Error'}
-              </h3>
-
-              {error && (
-                <p className="text-sm text-red-800 dark:text-red-200 mb-3 font-mono">
-                  {error.message}
-                </p>
-              )}
+        <Alert variant="error">
+          <Alert.Icon>
+            <ErrorIcon style={{ width: '24px', height: '24px' }} />
+          </Alert.Icon>
+          <Alert.Body>
+            <Alert.Title>
+              {componentName ? `Error rendering ${componentName}` : 'Component Error'}
+            </Alert.Title>
+            <Alert.Content>
+              <Stack direction="column" gap="sm">
+                {error && (
+                  <Text size="sm" font="mono" style={{ color: '#dc2626' }}>
+                    {error.message}
+                  </Text>
+                )}
 
-              {errorInfo?.componentStack && (
-                <details className="mb-4">
-                  <summary className="text-xs text-red-700 dark:text-red-300 cursor-pointer hover:text-red-900 dark:hover:text-red-100 transition-colors">
-                    Show stack trace
-                  </summary>
-                  <pre className="mt-2 p-3 text-[10px] font-mono bg-red-100 dark:bg-red-900 rounded-lg overflow-x-auto text-red-800 dark:text-red-200 whitespace-pre-wrap">
-                    {error?.stack || errorInfo.componentStack}
-                  </pre>
-                </details>
-              )}
+                {errorInfo?.componentStack && (
+                  <Collapsible>
+                    <Collapsible.Trigger>
+                      <Text size="xs" color="tertiary" style={{ cursor: 'pointer' }}>
+                        Show stack trace
+                      </Text>
+                    </Collapsible.Trigger>
+                    <Collapsible.Content>
+                      <div style={{ marginTop: '8px' }}>
+                        <CodeBlock language="plaintext">
+                          {error?.stack || errorInfo.componentStack}
+                        </CodeBlock>
+                      </div>
+                    </Collapsible.Content>
+                  </Collapsible>
+                )}
 
-              <button
-                onClick={this.handleRetry}
-                className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md bg-red-600 text-white hover:bg-red-700 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2"
-              >
-                <RefreshIcon className="w-3.5 h-3.5" />
-                Retry
-              </button>
-            </div>
-          </div>
-        </div>
+                <div>
+                  <Button variant="danger" size="sm" onClick={this.handleRetry}>
+                    <RefreshIcon style={{ width: '14px', height: '14px' }} />
+                    Retry
+                  </Button>
+                </div>
+              </Stack>
+            </Alert.Content>
+          </Alert.Body>
+        </Alert>
       );
     }
 

package/src/viewer/components/FigmaEmbed.tsx

@@ -125,12 +125,12 @@ export function FigmaEmbed({ figmaUrl, allFigmaUrls, zoom = 100, className, styl
   if (!currentParsed) {
     return (
       <div className={className} style={{ ...style, display: "flex", alignItems: "center", justifyContent: "center" }}>
-        <div className="flex flex-col items-center gap-2 text-tertiary p-4 text-center">
-          <FigmaIcon className="w-6 h-6" />
-          <span className="text-xs">Unable to embed Figma design</span>
+        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '8px', color: 'var(--text-tertiary)', padding: '16px', textAlign: 'center' }}>
+          <FigmaIcon style={{ width: '24px', height: '24px' }} />
+          <span style={{ fontSize: '12px' }}>Unable to embed Figma design</span>
           <button
             onClick={() => window.open(figmaUrl, "_blank", "noopener,noreferrer")}
-            className="text-xs text-[--color-accent] hover:underline"
+            style={{ fontSize: '12px', color: 'var(--color-accent)', background: 'none', border: 'none', cursor: 'pointer', textDecoration: 'underline' }}
           >
             Open in Figma
           </button>
@@ -143,20 +143,20 @@ export function FigmaEmbed({ figmaUrl, allFigmaUrls, zoom = 100, className, styl
     <div className={className} style={{ ...style, position: "relative", overflow: "hidden" }}>
       {/* Loading overlay - shows while current iframe is loading */}
       {!isCurrentLoaded && (
-        <div className="absolute inset-0 flex items-center justify-center bg-[--bg-secondary] z-20">
-          <div className="flex flex-col items-center gap-2">
-            <FigmaIcon className="w-5 h-5 text-tertiary animate-pulse" />
-            <span className="text-xs text-tertiary">Loading Figma...</span>
+        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: 'var(--bg-secondary)', zIndex: 20 }}>
+          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '8px' }}>
+            <FigmaIcon style={{ width: '20px', height: '20px', color: 'var(--text-tertiary)' }} />
+            <span style={{ fontSize: '12px', color: 'var(--text-tertiary)' }}>Loading Figma...</span>
           </div>
         </div>
       )}
 
       {/* Error overlay */}
       {error && (
-        <div className="absolute inset-0 flex items-center justify-center bg-[--bg-secondary] z-20">
-          <div className="flex flex-col items-center gap-2 text-tertiary">
-            <FigmaIcon className="w-6 h-6" />
-            <span className="text-xs">{error}</span>
+        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: 'var(--bg-secondary)', zIndex: 20 }}>
+          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '8px', color: 'var(--text-tertiary)' }}>
+            <FigmaIcon style={{ width: '24px', height: '24px' }} />
+            <span style={{ fontSize: '12px' }}>{error}</span>
           </div>
         </div>
       )}
@@ -182,8 +182,13 @@ export function FigmaEmbed({ figmaUrl, allFigmaUrls, zoom = 100, className, styl
           <iframe
             key={key}
             src={embedUrl}
-            className="absolute inset-0 w-full h-full border-0 transition-opacity duration-150"
             style={{
+              position: 'absolute',
+              inset: 0,
+              width: '100%',
+              height: '100%',
+              border: 'none',
+              transition: 'opacity 150ms',
               ...zoomStyle,
               opacity: isActive && isLoaded ? 1 : 0,
               zIndex: isActive ? 10 : 1,