@fragments-sdk/cli 0.5.2 → 0.7.0

package/src/viewer/components/ComponentGraph.tsx

@@ -9,10 +9,10 @@
  */
 
 import { useMemo, useState } from "react";
-import clsx from "clsx";
 import type { SegmentDefinition, ComponentRelation, RelationshipType } from "../../core/index.js";
 import { ChevronRightIcon, EmptyIcon, WandIcon } from "./Icons.js";
 import { detectAllRelationships, mergeRelationships } from "../utils/detectRelationships.js";
+import { Stack, Text, Badge, Button, EmptyState, CodeBlock, Grid, Separator } from "@fragments/ui";
 
 interface ComponentGraphProps {
   /** Current segment definition */
@@ -26,34 +26,46 @@ interface ComponentGraphProps {
 const RELATIONSHIP_CONFIG: Record<RelationshipType, { label: string; color: string; bgColor: string; icon: string }> = {
   parent: {
     label: "Parent",
-    color: "text-purple-600 dark:text-purple-400",
-    bgColor: "bg-purple-100 dark:bg-purple-900/30",
+    color: "#9333ea",
+    bgColor: "rgba(147, 51, 234, 0.1)",
     icon: "^",
   },
   child: {
     label: "Child",
-    color: "text-blue-600 dark:text-blue-400",
-    bgColor: "bg-blue-100 dark:bg-blue-900/30",
+    color: "#2563eb",
+    bgColor: "rgba(37, 99, 235, 0.1)",
     icon: "v",
   },
   sibling: {
     label: "Sibling",
-    color: "text-green-600 dark:text-green-400",
-    bgColor: "bg-green-100 dark:bg-green-900/30",
+    color: "#16a34a",
+    bgColor: "rgba(22, 163, 74, 0.1)",
     icon: "<->",
   },
   alternative: {
     label: "Alternative",
-    color: "text-amber-600 dark:text-amber-400",
-    bgColor: "bg-amber-100 dark:bg-amber-900/30",
+    color: "#d97706",
+    bgColor: "rgba(217, 119, 6, 0.1)",
     icon: "~",
   },
   composition: {
     label: "Composition",
-    color: "text-cyan-600 dark:text-cyan-400",
-    bgColor: "bg-cyan-100 dark:bg-cyan-900/30",
+    color: "#0891b2",
+    bgColor: "rgba(8, 145, 178, 0.1)",
     icon: "+",
   },
+  complementary: {
+    label: "Complementary",
+    color: "#e11d48",
+    bgColor: "rgba(225, 29, 72, 0.1)",
+    icon: "&",
+  },
+  "used-by": {
+    label: "Used By",
+    color: "#4f46e5",
+    bgColor: "rgba(79, 70, 229, 0.1)",
+    icon: "<-",
+  },
 };
 
 export function ComponentGraph({ segment, allSegments, onNavigate }: ComponentGraphProps) {
@@ -85,6 +97,8 @@ export function ComponentGraph({ segment, allSegments, onNavigate }: ComponentGr
       sibling: [],
       alternative: [],
       composition: [],
+      complementary: [],
+      "used-by": [],
     };
 
     for (const relation of allRelationships) {
@@ -137,21 +151,17 @@ export function ComponentGraph({ segment, allSegments, onNavigate }: ComponentGr
   // No segment selected
   if (!segment) {
     return (
-      <div className="h-full flex flex-col">
-        <div className="p-4 border-b border-gray-200 dark:border-gray-700">
-          <h3 className="font-medium text-gray-900 dark:text-gray-100 flex items-center gap-2">
-            Component Graph
-          </h3>
+      <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+        <div style={{ padding: '16px', borderBottom: '1px solid var(--border)' }}>
+          <Text weight="medium">Component Graph</Text>
         </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-gray-100 dark:bg-gray-800 flex items-center justify-center mx-auto mb-4">
-              <EmptyIcon className="w-6 h-6 text-gray-400" />
-            </div>
-            <p className="text-sm text-gray-500 dark:text-gray-400">
-              Select a component to view its relationships
-            </p>
-          </div>
+        <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '32px' }}>
+          <EmptyState>
+            <EmptyState.Icon>
+              <EmptyIcon style={{ width: '24px', height: '24px' }} />
+            </EmptyState.Icon>
+            <EmptyState.Description>Select a component to view its relationships</EmptyState.Description>
+          </EmptyState>
         </div>
       </div>
     );
@@ -163,26 +173,21 @@ export function ComponentGraph({ segment, allSegments, onNavigate }: ComponentGr
   // No relations defined
   if (!hasRelations) {
     return (
-      <div className="h-full flex flex-col">
-        <div className="p-4 border-b border-gray-200 dark:border-gray-700">
-          <h3 className="font-medium text-gray-900 dark:text-gray-100 flex items-center gap-2">
-            Component Graph
-          </h3>
+      <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+        <div style={{ padding: '16px', borderBottom: '1px solid var(--border)' }}>
+          <Text weight="medium">Component Graph</Text>
         </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-gray-100 dark:bg-gray-800 flex items-center justify-center mx-auto mb-4">
-              <EmptyIcon className="w-6 h-6 text-gray-400" />
-            </div>
-            <h4 className="font-medium text-gray-700 dark:text-gray-300 mb-2">
-              No relationships defined
-            </h4>
-            <p className="text-sm text-gray-500 dark:text-gray-400">
-              This component doesn't have any defined relationships. Add a <code className="px-1 py-0.5 bg-gray-100 dark:bg-gray-800 rounded text-xs">relations</code> array to your segment definition to visualize component connections.
-            </p>
-            <div className="mt-4 p-3 bg-gray-50 dark:bg-gray-800/50 rounded-lg text-left">
-              <pre className="text-xs text-gray-600 dark:text-gray-400 overflow-x-auto">
-{`relations: [
+        <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '32px' }}>
+          <EmptyState>
+            <EmptyState.Icon>
+              <EmptyIcon style={{ width: '24px', height: '24px' }} />
+            </EmptyState.Icon>
+            <EmptyState.Title>No relationships defined</EmptyState.Title>
+            <EmptyState.Description>
+              This component doesn't have any defined relationships. Add a <code style={{ padding: '2px 4px', background: 'var(--bg-secondary)', borderRadius: '4px', fontSize: '12px' }}>relations</code> array to your segment definition to visualize component connections.
+            </EmptyState.Description>
+            <div style={{ marginTop: '16px', width: '100%' }}>
+              <CodeBlock language="typescript">{`relations: [
   {
     component: "ButtonGroup",
     relationship: "parent",
@@ -193,54 +198,42 @@ export function ComponentGraph({ segment, allSegments, onNavigate }: ComponentGr
     relationship: "alternative",
     note: "Use when only an icon is needed"
   }
-]`}
-              </pre>
+]`}</CodeBlock>
             </div>
-          </div>
+          </EmptyState>
         </div>
       </div>
     );
   }
 
   return (
-    <div className="h-full flex flex-col">
+    <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
       {/* Header */}
-      <div className="p-4 border-b border-gray-200 dark:border-gray-700">
-        <div className="flex items-center justify-between">
-          <h3 className="font-medium text-gray-900 dark:text-gray-100 flex items-center gap-2">
-            Component Graph
-          </h3>
+      <div style={{ padding: '16px', borderBottom: '1px solid var(--border)' }}>
+        <Stack direction="row" align="center" justify="between">
+          <Text weight="medium">Component Graph</Text>
           {detectedCount > 0 && (
-            <button
-              onClick={() => setShowAutoDetected(!showAutoDetected)}
-              className={clsx(
-                "flex items-center gap-1.5 px-2 py-1 rounded text-xs font-medium transition-colors",
-                showAutoDetected
-                  ? "bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300"
-                  : "text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
-              )}
-              title={showAutoDetected ? "Hide composition relationships detected from variants" : "Show composition relationships detected from variants"}
-            >
-              <WandIcon className="w-3.5 h-3.5" />
-              {showAutoDetected ? "Composition on" : "Composition off"}
-            </button>
+            <AutoDetectToggle
+              showAutoDetected={showAutoDetected}
+              onToggle={() => setShowAutoDetected(!showAutoDetected)}
+            />
           )}
-        </div>
-        <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-          Relationships for <span className="font-medium">{segment.meta.name}</span>
+        </Stack>
+        <Text size="xs" color="secondary" style={{ marginTop: '4px' }}>
+          Relationships for <Text as="span" weight="medium" size="xs">{segment.meta.name}</Text>
           {showAutoDetected && detectedCount > 0 && (
-            <span className="ml-1">
+            <span style={{ marginLeft: '4px' }}>
               ({detectedCount} from variants)
             </span>
           )}
-        </p>
+        </Text>
       </div>
 
       {/* Graph visualization */}
-      <div className="flex-1 overflow-y-auto p-4">
+      <div style={{ flex: 1, overflowY: 'auto', padding: '16px' }}>
         {/* Defined relations */}
         {groupedRelations && (
-          <div className="space-y-4">
+          <Stack direction="column" gap="md">
             {(Object.entries(groupedRelations) as [RelationshipType, ComponentRelation[]][]).map(
               ([type, relations]) => {
                 if (relations.length === 0) return null;
@@ -248,13 +241,13 @@ export function ComponentGraph({ segment, allSegments, onNavigate }: ComponentGr
 
                 return (
                   <div key={type}>
-                    <div className="flex items-center gap-2 mb-2">
-                      <span className={clsx("text-xs font-medium uppercase tracking-wide", config.color)}>
+                    <Stack direction="row" align="center" gap="sm" style={{ marginBottom: '8px' }}>
+                      <Text size="xs" weight="medium" style={{ textTransform: 'uppercase', letterSpacing: '0.05em', color: config.color }}>
                         {config.label}
-                      </span>
-                      <div className="flex-1 h-px bg-gray-200 dark:bg-gray-700" />
-                    </div>
-                    <div className="space-y-2">
+                      </Text>
+                      <div style={{ flex: 1, height: '1px', background: 'var(--border)' }} />
+                    </Stack>
+                    <Stack direction="column" gap="sm">
                       {relations.map((relation, index) => (
                         <RelationCard
                           key={`${relation.component}-${index}`}
@@ -264,24 +257,24 @@ export function ComponentGraph({ segment, allSegments, onNavigate }: ComponentGr
                           onNavigate={handleNavigate}
                         />
                       ))}
-                    </div>
+                    </Stack>
                   </div>
                 );
               }
             )}
-          </div>
+          </Stack>
         )}
 
         {/* Reverse relations (inbound references) */}
         {reverseRelations.length > 0 && (
-          <div className="mt-6">
-            <div className="flex items-center gap-2 mb-2">
-              <span className="text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">
+          <div style={{ marginTop: '24px' }}>
+            <Stack direction="row" align="center" gap="sm" style={{ marginBottom: '8px' }}>
+              <Text size="xs" weight="medium" color="secondary" style={{ textTransform: 'uppercase', letterSpacing: '0.05em' }}>
                 Referenced By
-              </span>
-              <div className="flex-1 h-px bg-gray-200 dark:bg-gray-700" />
-            </div>
-            <div className="space-y-2">
+              </Text>
+              <div style={{ flex: 1, height: '1px', background: 'var(--border)' }} />
+            </Stack>
+            <Stack direction="column" gap="sm">
               {reverseRelations.map(({ relation }, index) => {
                 const config = RELATIONSHIP_CONFIG[relation.relationship];
                 return (
@@ -295,29 +288,47 @@ export function ComponentGraph({ segment, allSegments, onNavigate }: ComponentGr
                   />
                 );
               })}
-            </div>
+            </Stack>
           </div>
         )}
 
         {/* Legend */}
-        <div className="mt-8 pt-4 border-t border-gray-200 dark:border-gray-700">
-          <div className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-2">Legend</div>
-          <div className="grid grid-cols-2 gap-2">
+        <div style={{ marginTop: '32px', paddingTop: '16px', borderTop: '1px solid var(--border)' }}>
+          <Text size="xs" weight="medium" color="secondary" style={{ marginBottom: '8px' }}>Legend</Text>
+          <Grid columns={2} gap="sm">
             {(Object.entries(RELATIONSHIP_CONFIG) as [RelationshipType, typeof RELATIONSHIP_CONFIG[RelationshipType]][]).map(
               ([type, config]) => (
-                <div key={type} className="flex items-center gap-2">
-                  <span className={clsx("w-2 h-2 rounded-full", config.bgColor, config.color)} />
-                  <span className="text-xs text-gray-600 dark:text-gray-400">{config.label}</span>
-                </div>
+                <Stack key={type} direction="row" align="center" gap="sm">
+                  <span style={{ width: '8px', height: '8px', borderRadius: '50%', backgroundColor: config.bgColor, border: `1px solid ${config.color}` }} />
+                  <Text size="xs" color="secondary">{config.label}</Text>
+                </Stack>
               )
             )}
-          </div>
+          </Grid>
         </div>
       </div>
     </div>
   );
 }
 
+function AutoDetectToggle({ showAutoDetected, onToggle }: { showAutoDetected: boolean; onToggle: () => void }) {
+  return (
+    <Button
+      onClick={onToggle}
+      variant="ghost"
+      size="sm"
+      style={{
+        background: showAutoDetected ? 'rgba(147, 51, 234, 0.1)' : 'transparent',
+        color: showAutoDetected ? '#9333ea' : undefined,
+      }}
+      title={showAutoDetected ? "Hide composition relationships detected from variants" : "Show composition relationships detected from variants"}
+    >
+      <WandIcon style={{ width: '14px', height: '14px' }} />
+      {showAutoDetected ? "Composition on" : "Composition off"}
+    </Button>
+  );
+}
+
 interface RelationCardProps {
   relation: ComponentRelation & { isDetected?: boolean; confidence?: number };
   config: typeof RELATIONSHIP_CONFIG[RelationshipType];
@@ -327,48 +338,56 @@ interface RelationCardProps {
 }
 
 function RelationCard({ relation, config, exists, onNavigate, isReverse }: RelationCardProps) {
+  const [hovered, setHovered] = useState(false);
+
   return (
     <button
       onClick={() => exists && onNavigate(relation.component)}
       disabled={!exists}
-      className={clsx(
-        "w-full text-left p-3 rounded-lg border transition-[transform,box-shadow] duration-150",
-        config.bgColor,
-        exists
-          ? "cursor-pointer hover:shadow-md hover:scale-[1.01] border-transparent"
-          : "cursor-not-allowed opacity-60 border-dashed border-gray-300 dark:border-gray-600"
-      )}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      style={{
+        width: '100%',
+        textAlign: 'left',
+        padding: '12px',
+        borderRadius: '8px',
+        border: exists ? '1px solid transparent' : '1px dashed var(--border)',
+        transition: 'transform 150ms, box-shadow 150ms',
+        background: config.bgColor,
+        cursor: exists ? 'pointer' : 'not-allowed',
+        opacity: exists ? 1 : 0.6,
+        transform: exists && hovered ? 'scale(1.01)' : 'scale(1)',
+        boxShadow: exists && hovered ? '0 4px 6px -1px rgba(0,0,0,0.1)' : 'none',
+      }}
     >
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2 flex-wrap">
-          <span className={clsx("font-medium text-sm", config.color)}>
+      <Stack direction="row" align="center" justify="between">
+        <Stack direction="row" align="center" gap="sm" style={{ flexWrap: 'wrap' }}>
+          <Text weight="medium" size="sm" style={{ color: config.color }}>
             {relation.component}
-          </span>
+          </Text>
           {relation.isDetected && (
-            <span className="flex items-center gap-0.5 text-[10px] uppercase tracking-wide text-purple-600 dark:text-purple-400 bg-purple-100 dark:bg-purple-900/30 px-1.5 py-0.5 rounded">
-              <WandIcon className="w-2.5 h-2.5" />
+            <Badge size="sm" style={{ background: 'rgba(147, 51, 234, 0.1)', color: '#9333ea' }}>
+              <WandIcon style={{ width: '10px', height: '10px' }} />
               auto
-            </span>
+            </Badge>
           )}
           {isReverse && (
-            <span className="text-[10px] uppercase tracking-wide text-gray-500 dark:text-gray-400 bg-gray-200 dark:bg-gray-700 px-1.5 py-0.5 rounded">
-              inbound
-            </span>
+            <Badge size="sm" variant="default">inbound</Badge>
           )}
           {!exists && (
-            <span className="text-[10px] uppercase tracking-wide text-gray-500 dark:text-gray-400">
+            <Text size="xs" color="secondary" style={{ textTransform: 'uppercase', letterSpacing: '0.05em' }}>
               (not found)
-            </span>
+            </Text>
           )}
-        </div>
+        </Stack>
         {exists && (
-          <ChevronRightIcon className="w-4 h-4 text-gray-400" />
+          <ChevronRightIcon style={{ width: '16px', height: '16px', color: 'var(--text-tertiary)' }} />
         )}
-      </div>
+      </Stack>
       {relation.note && (
-        <p className="text-xs text-gray-600 dark:text-gray-400 mt-1">
+        <Text size="xs" color="secondary" style={{ marginTop: '4px' }}>
           {relation.note}
-        </p>
+        </Text>
       )}
     </button>
   );
@@ -384,11 +403,9 @@ function flipRelationship(type: RelationshipType): RelationshipType {
       return "child";
     case "child":
       return "parent";
-    case "sibling":
-      return "sibling";
-    case "alternative":
-      return "alternative";
-    case "composition":
+    case "used-by":
       return "composition";
+    default:
+      return type;
   }
 }

package/src/viewer/components/ComponentHeader.tsx

@@ -1,85 +1,88 @@
 import type { SegmentMeta } from '../../core/index.js';
-import clsx from 'clsx';
-import { getStatusConfig } from '../constants/ui.js';
+import { Badge, Alert, Text, Stack, Separator } from '@fragments/ui';
 import { WarningIcon, BeakerIcon } from './Icons.js';
 
 interface ComponentHeaderProps {
   meta: SegmentMeta;
 }
 
+// Map status to Badge variant
+function getStatusBadgeVariant(status: string): 'success' | 'warning' | 'error' | 'default' {
+  switch (status) {
+    case 'stable': return 'success';
+    case 'experimental': return 'warning';
+    case 'deprecated': return 'error';
+    case 'beta': return 'warning';
+    default: return 'default';
+  }
+}
+
 export function ComponentHeader({ meta }: ComponentHeaderProps) {
   return (
-    <section id="overview" className="scroll-mt-24 mb-6">
+    <section id="overview" style={{ scrollMarginTop: '96px', marginBottom: '24px' }}>
       {/* Deprecated Warning Banner */}
       {meta.status === 'deprecated' && (
-        <div className="mb-5 p-4 rounded-xl border border-red-500/30 bg-red-500/10">
-          <div className="flex items-start gap-3">
-            <WarningIcon className="w-5 h-5 text-red-500 flex-shrink-0 mt-0.5" />
-            <div>
-              <h3 className="text-sm font-semibold text-red-600 dark:text-red-400 mb-1">
-                Deprecated Component
-              </h3>
-              <p className="text-sm text-red-600/80 dark:text-red-400/80">
+        <div style={{ marginBottom: '20px' }}>
+          <Alert severity="error">
+            <Alert.Icon><WarningIcon /></Alert.Icon>
+            <Alert.Body>
+              <Alert.Title>Deprecated Component</Alert.Title>
+              <Alert.Content>
                 This component is deprecated and will be removed in a future version.
                 {meta.tags?.includes('migration') && ' Check the usage guidelines for migration instructions.'}
-              </p>
-            </div>
-          </div>
+              </Alert.Content>
+            </Alert.Body>
+          </Alert>
         </div>
       )}
 
       {/* Experimental Warning Banner */}
       {meta.status === 'experimental' && (
-        <div className="mb-5 p-4 rounded-xl border border-purple-500/30 bg-purple-500/10">
-          <div className="flex items-start gap-3">
-            <BeakerIcon className="w-5 h-5 text-purple-500 flex-shrink-0 mt-0.5" />
-            <div>
-              <h3 className="text-sm font-semibold text-purple-600 dark:text-purple-400 mb-1">
-                Experimental Component
-              </h3>
-              <p className="text-sm text-purple-600/80 dark:text-purple-400/80">
+        <div style={{ marginBottom: '20px' }}>
+          <Alert severity="warning">
+            <Alert.Icon><BeakerIcon /></Alert.Icon>
+            <Alert.Body>
+              <Alert.Title>Experimental Component</Alert.Title>
+              <Alert.Content>
                 This component is experimental. The API may change without notice.
-              </p>
-            </div>
-          </div>
+              </Alert.Content>
+            </Alert.Body>
+          </Alert>
         </div>
       )}
 
-      <h1 className="text-2xl font-semibold text-primary tracking-tight mb-2">
+      <Text as="h1" size="xl" weight="semibold" style={{ letterSpacing: '-0.025em', marginBottom: '8px' }}>
         {meta.name}
-      </h1>
-      <p className="text-base text-secondary leading-relaxed mb-5">
+      </Text>
+      <Text as="p" size="base" color="secondary" style={{ lineHeight: 1.625, marginBottom: '20px' }}>
         {meta.description}
-      </p>
+      </Text>
 
-      <div className="flex flex-wrap items-center gap-2">
+      <Stack direction="row" gap="sm" wrap align="center">
         {/* Category badge */}
         {meta.category && (
-          <span className="badge badge-default">{meta.category}</span>
+          <Badge variant="default">{meta.category}</Badge>
         )}
 
         {/* Status badge */}
-        {meta.status && (() => {
-          const config = getStatusConfig(meta.status);
-          return config ? (
-            <span className={clsx('badge', config.badge)}>
-              {meta.status}
-            </span>
-          ) : null;
-        })()}
+        {meta.status && (
+          <Badge variant={getStatusBadgeVariant(meta.status)}>
+            {meta.status}
+          </Badge>
+        )}
 
         {/* Tags */}
         {meta.tags && meta.tags.length > 0 && (
           <>
-            <span className="text-[--text-muted] mx-1">|</span>
+            <Separator orientation="vertical" />
             {meta.tags.map((tag) => (
-              <span key={tag} className="badge badge-default">
+              <Badge key={tag} variant="default">
                 {tag}
-              </span>
+              </Badge>
             ))}
           </>
         )}
-      </div>
+      </Stack>
     </section>
   );
 }