@fragments-sdk/cli 0.5.2 → 0.7.0

package/src/viewer/components/VariantMatrix.tsx

@@ -12,7 +12,6 @@
 
 import { useState, useMemo, useRef, useCallback } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import clsx from "clsx";
 import type { SegmentVariant } from "../../core/index.js";
 import { ErrorBoundary } from "./ErrorBoundary.js";
 import { StoryRenderer, LoaderIndicator } from "./StoryRenderer.js";
@@ -42,7 +41,7 @@ interface VariantMatrixProps {
 type GridSize = "small" | "medium" | "large";
 
 interface GridConfig {
-  cols: string;
+  gridTemplateColumns: string;
   minHeight: string;
   heightPx: number; // For virtualization
   scale: number;
@@ -50,9 +49,9 @@ interface GridConfig {
 }
 
 const GRID_SIZES: Record<GridSize, GridConfig> = {
-  small: { cols: "grid-cols-4 lg:grid-cols-5 xl:grid-cols-6", minHeight: "150px", heightPx: 150, scale: 0.5, colCount: 4 },
-  medium: { cols: "grid-cols-2 lg:grid-cols-3 xl:grid-cols-4", minHeight: "200px", heightPx: 200, scale: 0.75, colCount: 3 },
-  large: { cols: "grid-cols-1 lg:grid-cols-2 xl:grid-cols-3", minHeight: "300px", heightPx: 300, scale: 1, colCount: 2 },
+  small: { gridTemplateColumns: "repeat(4, 1fr)", minHeight: "150px", heightPx: 150, scale: 0.5, colCount: 4 },
+  medium: { gridTemplateColumns: "repeat(3, 1fr)", minHeight: "200px", heightPx: 200, scale: 0.75, colCount: 3 },
+  large: { gridTemplateColumns: "repeat(2, 1fr)", minHeight: "300px", heightPx: 300, scale: 1, colCount: 2 },
 };
 
 /** Threshold for enabling virtualization */
@@ -70,6 +69,7 @@ export function VariantMatrix({
 }: VariantMatrixProps) {
   const [gridSize, setGridSize] = useState<GridSize>("medium");
   const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+  const [hoveredButton, setHoveredButton] = useState<GridSize | null>(null);
   const scrollRef = useRef<HTMLDivElement>(null);
 
   const gridConfig = GRID_SIZES[gridSize];
@@ -94,35 +94,68 @@ export function VariantMatrix({
 
   if (variants.length === 0) {
     return (
-      <div className="flex items-center justify-center h-full text-gray-500 dark:text-gray-400">
+      <div style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: '100%',
+        color: 'var(--text-muted)',
+      }}>
         No variants to display
       </div>
     );
   }
 
   return (
-    <div className="h-full flex flex-col">
+    <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
       {/* Toolbar */}
-      <div className="flex-shrink-0 px-4 py-2 border-b border-[--border] bg-[--bg-secondary] flex items-center justify-between">
-        <div className="text-sm text-secondary">
+      <div style={{
+        flexShrink: 0,
+        padding: '8px 16px',
+        borderBottom: '1px solid var(--border)',
+        background: 'var(--bg-secondary)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+      }}>
+        <div style={{ fontSize: 14, color: 'var(--text-secondary)' }}>
           {variants.length} variant{variants.length !== 1 ? "s" : ""}
           {useVirtualization && (
-            <span className="ml-2 text-xs text-tertiary">(virtualized)</span>
+            <span style={{ marginLeft: 8, fontSize: 12, color: 'var(--text-tertiary)' }}>(virtualized)</span>
           )}
         </div>
-        <div className="flex items-center gap-2">
-          <span className="text-xs text-tertiary">Grid size:</span>
-          <div className="flex rounded-md border border-[--border] overflow-hidden">
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <span style={{ fontSize: 12, color: 'var(--text-tertiary)' }}>Grid size:</span>
+          <div style={{
+            display: 'flex',
+            borderRadius: 6,
+            border: '1px solid var(--border)',
+            overflow: 'hidden',
+          }}>
             {(["small", "medium", "large"] as GridSize[]).map((size) => (
               <button
                 key={size}
                 onClick={() => setGridSize(size)}
-                className={clsx(
-                  "px-2 py-1 text-xs capitalize transition-colors",
-                  gridSize === size
-                    ? "bg-[--bg-hover] text-primary"
-                    : "text-tertiary hover:text-secondary hover:bg-[--bg-hover]"
-                )}
+                onMouseEnter={() => setHoveredButton(size)}
+                onMouseLeave={() => setHoveredButton(null)}
+                style={{
+                  padding: '4px 8px',
+                  fontSize: 12,
+                  textTransform: 'capitalize',
+                  transition: 'background-color 0.15s, color 0.15s',
+                  border: 'none',
+                  cursor: 'pointer',
+                  background: gridSize === size
+                    ? 'var(--bg-hover)'
+                    : hoveredButton === size
+                      ? 'var(--bg-hover)'
+                      : 'transparent',
+                  color: gridSize === size
+                    ? 'var(--text-primary)'
+                    : hoveredButton === size
+                      ? 'var(--text-secondary)'
+                      : 'var(--text-tertiary)',
+                }}
               >
                 {size}
               </button>
@@ -133,7 +166,7 @@ export function VariantMatrix({
 
       {/* Grid - Virtualized or Regular */}
       {useVirtualization ? (
-        <div ref={scrollRef} className="flex-1 overflow-auto p-4">
+        <div ref={scrollRef} style={{ flex: 1, overflow: 'auto', padding: 16 }}>
           <div
             style={{
               height: `${rowVirtualizer.getTotalSize()}px`,
@@ -157,7 +190,12 @@ export function VariantMatrix({
                     transform: `translateY(${virtualRow.start}px)`,
                   }}
                 >
-                  <div className={clsx("grid gap-4", gridConfig.cols)} style={{ height: gridConfig.minHeight }}>
+                  <div style={{
+                    display: 'grid',
+                    gap: 16,
+                    gridTemplateColumns: gridConfig.gridTemplateColumns,
+                    height: gridConfig.minHeight,
+                  }}>
                     {rowVariants.map((variant, colIndex) => {
                       const index = startIndex + colIndex;
                       return (
@@ -186,8 +224,12 @@ export function VariantMatrix({
           </div>
         </div>
       ) : (
-        <div className="flex-1 overflow-auto p-4">
-          <div className={clsx("grid gap-4", gridConfig.cols)}>
+        <div style={{ flex: 1, overflow: 'auto', padding: 16 }}>
+          <div style={{
+            display: 'grid',
+            gap: 16,
+            gridTemplateColumns: gridConfig.gridTemplateColumns,
+          }}>
             {variants.map((variant, index) => (
               <VariantCard
                 key={variant.name}
@@ -248,24 +290,46 @@ function VariantCard({
 
   return (
     <div
-      className={clsx(
-        "group relative rounded-lg border overflow-hidden transition-all cursor-pointer",
-        isHovered
-          ? "border-blue-500 shadow-lg ring-2 ring-blue-500/20"
-          : "border-[--border] hover:border-blue-300 dark:hover:border-blue-700"
-      )}
-      style={{ minHeight }}
+      style={{
+        position: 'relative',
+        borderRadius: 8,
+        border: isHovered
+          ? '2px solid #3b82f6'
+          : '1px solid var(--border)',
+        overflow: 'hidden',
+        transition: 'border-color 0.2s, box-shadow 0.2s',
+        cursor: 'pointer',
+        minHeight,
+        boxShadow: isHovered
+          ? '0 10px 15px -3px rgba(0,0,0,0.1), 0 0 0 3px rgba(59,130,246,0.2)'
+          : 'none',
+      }}
       onMouseEnter={onHover}
       onMouseLeave={onLeave}
       onClick={onClick}
     >
       {/* Header */}
-      <div className="absolute top-0 left-0 right-0 z-10 px-2 py-1 bg-gradient-to-b from-black/60 to-transparent">
-        <div className="flex items-center justify-between">
-          <span className="text-xs font-medium text-white truncate">
+      <div style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        zIndex: 10,
+        padding: '4px 8px',
+        background: 'linear-gradient(to bottom, rgba(0,0,0,0.6), transparent)',
+      }}>
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+          <span style={{
+            fontSize: 12,
+            fontWeight: 500,
+            color: '#ffffff',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+          }}>
             {variant.name}
           </span>
-          <span className="text-[10px] text-white/70">
+          <span style={{ fontSize: 10, color: 'rgba(255,255,255,0.7)' }}>
             #{index + 1}
           </span>
         </div>
@@ -273,21 +337,44 @@ function VariantCard({
 
       {/* Click to view overlay */}
       <div
-        className={clsx(
-          "absolute inset-0 z-10 flex items-center justify-center bg-black/40 transition-opacity",
-          isHovered ? "opacity-100" : "opacity-0"
-        )}
+        style={{
+          position: 'absolute',
+          inset: 0,
+          zIndex: 10,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          background: 'rgba(0,0,0,0.4)',
+          transition: 'opacity 0.2s',
+          opacity: isHovered ? 1 : 0,
+          pointerEvents: isHovered ? 'auto' : 'none',
+        }}
       >
-        <span className="px-3 py-1.5 bg-blue-600 text-white text-xs font-medium rounded-full shadow-lg">
+        <span style={{
+          padding: '6px 12px',
+          background: '#2563eb',
+          color: '#ffffff',
+          fontSize: 12,
+          fontWeight: 500,
+          borderRadius: 9999,
+          boxShadow: '0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)',
+        }}>
           Click to focus
         </span>
       </div>
 
       {/* Preview content */}
       <div
-        className="h-full w-full overflow-hidden flex items-center justify-center"
         data-theme={previewTheme}
-        style={backgroundStyle}
+        style={{
+          height: '100%',
+          width: '100%',
+          overflow: 'hidden',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          ...backgroundStyle,
+        }}
       >
         {useIframeIsolation ? (
           <IsolatedPreviewFrame
@@ -300,15 +387,15 @@ function VariantCard({
           />
         ) : (
           <div
-            className="p-4"
             style={{
+              padding: 16,
               transform: `scale(${scale})`,
             }}
           >
             <ErrorBoundary
               componentName={componentName}
               fallback={
-                <div className="text-xs text-red-500 p-2">
+                <div style={{ fontSize: 12, color: '#ef4444', padding: 8 }}>
                   Error rendering variant
                 </div>
               }
@@ -317,14 +404,14 @@ function VariantCard({
                 {(content, isLoading, error) => {
                   if (isLoading) {
                     return (
-                      <div className="flex items-center justify-center p-4">
+                      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }}>
                         <LoaderIndicator />
                       </div>
                     );
                   }
                   if (error) {
                     return (
-                      <div className="text-xs text-red-500 p-2">
+                      <div style={{ fontSize: 12, color: '#ef4444', padding: 8 }}>
                         {error.message}
                       </div>
                     );
@@ -339,8 +426,14 @@ function VariantCard({
 
       {/* Tags/badges */}
       {variant.hasPlayFunction && (
-        <div className="absolute bottom-2 right-2 z-10">
-          <span className="px-1.5 py-0.5 text-[10px] bg-purple-600 text-white rounded">
+        <div style={{ position: 'absolute', bottom: 8, right: 8, zIndex: 10 }}>
+          <span style={{
+            padding: '2px 6px',
+            fontSize: 10,
+            background: '#9333ea',
+            color: '#ffffff',
+            borderRadius: 4,
+          }}>
             play
           </span>
         </div>

package/src/viewer/components/VariantTabs.tsx

@@ -1,6 +1,5 @@
-import { useRef, useEffect, useCallback } from 'react';
+import { Tabs } from '@fragments/ui';
 import type { SegmentVariant } from '../../core/index.js';
-import clsx from 'clsx';
 import { PlayIcon } from './Icons.js';
 
 interface VariantTabsProps {
@@ -10,75 +9,32 @@ interface VariantTabsProps {
 }
 
 export function VariantTabs({ variants, activeIndex, onSelect }: VariantTabsProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const buttonRefs = useRef<Map<number, HTMLButtonElement>>(new Map());
-
-  // Scroll active tab into view when it changes
-  useEffect(() => {
-    const button = buttonRefs.current.get(activeIndex);
-    if (button && containerRef.current) {
-      button.scrollIntoView({
-        behavior: 'smooth',
-        block: 'nearest',
-        inline: 'center',
-      });
-    }
-  }, [activeIndex]);
-
-  // Keyboard navigation for variant tabs
-  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
-    if (e.key === 'ArrowLeft') {
-      e.preventDefault();
-      const newIndex = activeIndex > 0 ? activeIndex - 1 : variants.length - 1;
-      onSelect(newIndex);
-    } else if (e.key === 'ArrowRight') {
-      e.preventDefault();
-      const newIndex = activeIndex < variants.length - 1 ? activeIndex + 1 : 0;
-      onSelect(newIndex);
-    }
-  }, [activeIndex, variants.length, onSelect]);
-
   if (variants.length === 0) return null;
 
+  const activeValue = variants[activeIndex]?.name ?? '';
+
   return (
-    <div
-      ref={containerRef}
-      className="flex items-center gap-1 overflow-x-auto max-w-full scrollbar-thin"
-      onKeyDown={handleKeyDown}
-      role="tablist"
-      aria-label="Component variants"
+    <Tabs
+      value={activeValue}
+      onValueChange={(value: string | number) => {
+        const index = variants.findIndex(v => v.name === value);
+        if (index >= 0) onSelect(index);
+      }}
     >
-      {variants.map((variant, index) => {
-        const isActive = activeIndex === index;
-        return (
-          <button
-            key={index}
-            ref={(el) => {
-              if (el) buttonRefs.current.set(index, el);
-              else buttonRefs.current.delete(index);
-            }}
-            onClick={() => onSelect(index)}
-            onKeyDown={handleKeyDown}
-            role="tab"
-            aria-selected={isActive}
-            tabIndex={isActive ? 0 : -1}
-            className={clsx(
-              'px-3 py-1 text-xs font-medium rounded whitespace-nowrap flex-shrink-0',
-              'focus:outline-none focus-visible:ring-2 focus-visible:ring-[--color-accent]',
-              'flex items-center gap-1.5',
-              isActive
-                ? 'text-primary bg-[--bg-hover]'
-                : 'text-tertiary hover:text-secondary'
-            )}
-            title={variant.hasPlayFunction ? `${variant.name} (has interaction test)` : variant.name}
-          >
-            {variant.name}
-            {variant.hasPlayFunction && (
-              <PlayIcon className="w-3 h-3 text-[--color-accent]" />
-            )}
-          </button>
-        );
-      })}
-    </div>
+      <Tabs.List variant="pills">
+        {variants.map((variant) => (
+          <Tabs.Tab key={variant.name} value={variant.name}>
+            <span style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+              {variant.name}
+              {variant.hasPlayFunction && (
+                <span style={{ display: 'inline-flex', width: '12px', height: '12px', color: 'var(--color-accent)' }}>
+                  <PlayIcon />
+                </span>
+              )}
+            </span>
+          </Tabs.Tab>
+        ))}
+      </Tabs.List>
+    </Tabs>
   );
 }