@fragments-sdk/cli 0.5.2 → 0.7.0

package/src/viewer/components/RelationsSection.tsx

@@ -1,5 +1,5 @@
+import { useState } from 'react';
 import type { ComponentRelation } from '../../core/index.js';
-import clsx from 'clsx';
 import { getRelationshipConfig } from '../constants/ui.js';
 import { ChevronRightIcon } from './Icons.js';
 
@@ -12,46 +12,77 @@ export function RelationsSection({ relations, onNavigate }: RelationsSectionProp
   if (relations.length === 0) return null;
 
   return (
-    <section id="relations" className="scroll-mt-24">
-      <h2 className="text-base font-semibold text-primary mb-4">Related Components</h2>
-      <div className="grid sm:grid-cols-2 gap-3">
-        {relations.map((relation, index) => {
-          const config = getRelationshipConfig(relation.relationship);
-
-          return (
-            <button
-              key={index}
-              onClick={() => onNavigate?.(relation.component)}
-              className={clsx(
-                'group text-left p-4 rounded-xl border border-[--border]',
-                'bg-[--bg-elevated] hover:border-[--border-strong]',
-                'transition-all duration-150',
-                'focus:outline-none focus-visible:ring-2 focus-visible:ring-[--color-accent]'
-              )}
-            >
-              <div className="flex items-center gap-2 mb-1.5">
-                <span className="text-[13px] font-medium text-primary group-hover:text-[--color-accent] transition-colors">
-                  {relation.component}
-                </span>
-                <span className={clsx(
-                  'text-[10px] font-medium px-1.5 py-0.5 rounded',
-                  config.bg,
-                  config.text
-                )}>
-                  {config.label}
-                </span>
-              </div>
-              {relation.note && (
-                <p className="text-[13px] text-secondary leading-relaxed">{relation.note}</p>
-              )}
-              <div className="mt-2 flex items-center text-[12px] text-tertiary group-hover:text-secondary transition-colors">
-                <span>View component</span>
-                <ChevronRightIcon className="w-3 h-3 ml-1 group-hover:translate-x-0.5 transition-transform" />
-              </div>
-            </button>
-          );
-        })}
+    <section id="relations" style={{ scrollMarginTop: '96px' }}>
+      <h2 style={{ fontSize: '16px', fontWeight: 600, color: 'var(--text-primary)', marginBottom: '16px' }}>Related Components</h2>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: '12px' }}>
+        {relations.map((relation, index) => (
+          <RelationButton key={index} relation={relation} onNavigate={onNavigate} />
+        ))}
       </div>
     </section>
   );
 }
+
+function RelationButton({ relation, onNavigate }: { relation: ComponentRelation; onNavigate?: (componentName: string) => void }) {
+  const config = getRelationshipConfig(relation.relationship);
+  const [hovered, setHovered] = useState(false);
+
+  return (
+    <button
+      onClick={() => onNavigate?.(relation.component)}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      style={{
+        textAlign: 'left',
+        padding: '16px',
+        borderRadius: '12px',
+        border: `1px solid ${hovered ? 'var(--border-strong)' : 'var(--border)'}`,
+        background: 'var(--bg-elevated)',
+        transition: 'all 150ms',
+        cursor: 'pointer',
+        outline: 'none',
+      }}
+    >
+      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '6px' }}>
+        <span style={{
+          fontSize: '13px',
+          fontWeight: 500,
+          color: hovered ? 'var(--color-accent)' : 'var(--text-primary)',
+          transition: 'color 150ms',
+        }}>
+          {relation.component}
+        </span>
+        <span style={{
+          fontSize: '10px',
+          fontWeight: 500,
+          padding: '2px 6px',
+          borderRadius: '4px',
+          background: config.bgColor ?? 'var(--bg-tertiary)',
+          color: config.textColor ?? 'var(--text-secondary)',
+        }}>
+          {config.label}
+        </span>
+      </div>
+      {relation.note && (
+        <p style={{ fontSize: '13px', color: 'var(--text-secondary)', lineHeight: 1.6, margin: 0 }}>{relation.note}</p>
+      )}
+      <div style={{
+        marginTop: '8px',
+        display: 'flex',
+        alignItems: 'center',
+        fontSize: '12px',
+        color: hovered ? 'var(--text-secondary)' : 'var(--text-tertiary)',
+        transition: 'color 150ms',
+      }}>
+        <span>View component</span>
+        <ChevronRightIcon style={{
+          width: '12px',
+          height: '12px',
+          marginLeft: '4px',
+          transform: hovered ? 'translateX(2px)' : 'translateX(0)',
+          transition: 'transform 150ms',
+        }} />
+      </div>
+    </button>
+  );
+}

package/src/viewer/components/ResizablePanel.tsx

@@ -8,8 +8,7 @@
  * - Persists size and dock position to localStorage
  */
 
-import { useState, useEffect, useCallback, useRef, type ReactNode } from "react";
-import clsx from "clsx";
+import { useState, useEffect, useCallback, useRef, type ReactNode, type CSSProperties } from "react";
 import { BRAND } from "../../core/index.js";
 import { ChevronDownIcon } from "./Icons.js";
 
@@ -159,32 +158,97 @@ export function ResizablePanel({
   // Header height for collapsed state
   const headerHeight = 40; // h-10 = 2.5rem = 40px
 
+  // Compute container styles
+  const containerStyle: CSSProperties = {
+    flexShrink: 0,
+    backgroundColor: 'var(--bg-secondary)',
+    position: 'relative',
+    ...(isBottom
+      ? { borderTop: '1px solid var(--border)' }
+      : { borderLeft: '1px solid var(--border)' }),
+    // Only transition when NOT resizing (for smooth open/close animations)
+    // Disable during drag to prevent sluggish feel
+    transition: isResizing ? 'none' : 'height 150ms ease, width 150ms ease',
+    ...(isBottom
+      ? { height: isOpen ? state.height : headerHeight }
+      : { width: isOpen ? state.width : headerHeight }),
+    // Prevent content from being selected during resize
+    ...(isResizing && { pointerEvents: "none" as const }),
+  };
+
+  // Resize handle styles
+  const resizeHandleStyle: CSSProperties = isBottom
+    ? {
+        position: 'absolute',
+        zIndex: 20,
+        top: '-8px',
+        left: 0,
+        right: 0,
+        height: '16px',
+        cursor: 'ns-resize',
+        ...(isResizing && { backgroundColor: 'rgba(var(--color-accent-rgb, 59, 130, 246), 0.2)' }),
+      }
+    : {
+        position: 'absolute',
+        zIndex: 20,
+        top: 0,
+        left: '-8px',
+        bottom: 0,
+        width: '16px',
+        cursor: 'ew-resize',
+        ...(isResizing && { backgroundColor: 'rgba(var(--color-accent-rgb, 59, 130, 246), 0.2)' }),
+      };
+
+  // Visual indicator styles
+  const indicatorStyle: CSSProperties = isBottom
+    ? {
+        position: 'absolute',
+        backgroundColor: 'var(--color-accent)',
+        opacity: 0,
+        left: '50%',
+        top: '50%',
+        transform: 'translate(-50%, -50%)',
+        width: '48px',
+        height: '4px',
+        borderRadius: '9999px',
+        transition: 'opacity 150ms ease',
+      }
+    : {
+        position: 'absolute',
+        backgroundColor: 'var(--color-accent)',
+        opacity: 0,
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        width: '4px',
+        height: '48px',
+        borderRadius: '9999px',
+        transition: 'opacity 150ms ease',
+      };
+
+  // Chevron icon rotation
+  const chevronStyle: CSSProperties = {
+    width: '16px',
+    height: '16px',
+    transition: 'transform 150ms ease',
+    ...(!isOpen && isBottom && { transform: 'rotate(180deg)' }),
+    ...(!isOpen && !isBottom && { transform: 'rotate(-90deg)' }),
+    ...(isOpen && !isBottom && { transform: 'rotate(90deg)' }),
+  };
+
   return (
     <div
       ref={panelRef}
-      className={clsx(
-        "flex-shrink-0 bg-[--bg-secondary] relative",
-        isBottom
-          ? "border-t border-[--border]"
-          : "border-l border-[--border]",
-        className
-      )}
-      style={{
-        // Only transition when NOT resizing (for smooth open/close animations)
-        // Disable during drag to prevent sluggish feel
-        transition: isResizing ? 'none' : 'height 150ms ease, width 150ms ease',
-        ...(isBottom
-          ? { height: isOpen ? state.height : headerHeight }
-          : { width: isOpen ? state.width : headerHeight }),
-        // Prevent content from being selected during resize
-        ...(isResizing && { pointerEvents: "none" }),
-      }}
+      className={className}
+      style={containerStyle}
     >
       {/* Full-viewport overlay during resize - prevents iframes from capturing events */}
       {isResizing && (
         <div
-          className="fixed inset-0 z-50"
           style={{
+            position: 'fixed',
+            inset: 0,
+            zIndex: 50,
             cursor: isBottom ? "ns-resize" : "ew-resize",
             // Must explicitly enable pointer events since parent has pointerEvents: none
             pointerEvents: "auto",
@@ -195,59 +259,96 @@ export function ResizablePanel({
       {/* Resize Handle - extends above/left of panel for easier grabbing */}
       {isOpen && (
         <div
-          className={clsx(
-            "absolute z-20 group",
-            isBottom
-              ? "-top-2 left-0 right-0 h-4 cursor-ns-resize"
-              : "top-0 -left-2 bottom-0 w-4 cursor-ew-resize",
-            isResizing && "bg-[--color-accent]/20"
-          )}
+          style={resizeHandleStyle}
           onMouseDown={handleMouseDown}
+          onMouseEnter={(e) => {
+            const indicator = e.currentTarget.querySelector('[data-resize-indicator]') as HTMLElement;
+            if (indicator) indicator.style.opacity = '0.5';
+          }}
+          onMouseLeave={(e) => {
+            const indicator = e.currentTarget.querySelector('[data-resize-indicator]') as HTMLElement;
+            if (indicator) indicator.style.opacity = '0';
+          }}
         >
           {/* Visual indicator - shows on hover */}
-          <div
-            className={clsx(
-              "absolute bg-[--color-accent] opacity-0 group-hover:opacity-50 transition-opacity",
-              isBottom
-                ? "left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-12 h-1 rounded-full"
-                : "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-1 h-12 rounded-full"
-            )}
-          />
+          <div data-resize-indicator style={indicatorStyle} />
         </div>
       )}
 
       {/* Panel Header */}
       <div
-        className={clsx(
-          "flex items-center justify-between px-4 border-[--border-subtle]",
-          isBottom ? "h-10 border-b" : "h-10 border-b"
-        )}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          padding: '0 16px',
+          height: '40px',
+          borderBottom: '1px solid var(--border-subtle)',
+        }}
       >
-        <div className="flex items-center gap-1 flex-1 overflow-hidden">
+        <div style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '4px',
+          flex: 1,
+          overflow: 'hidden',
+        }}>
           {header}
         </div>
-        <div className="flex items-center gap-1">
+        <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
           {/* Dock toggle button */}
           <button
             onClick={toggleDock}
-            className="p-1 text-tertiary hover:text-primary hover:bg-[--bg-hover] rounded transition-colors"
+            style={{
+              padding: '4px',
+              color: 'var(--text-tertiary)',
+              backgroundColor: 'transparent',
+              border: 'none',
+              borderRadius: '4px',
+              cursor: 'pointer',
+              display: 'inline-flex',
+              transition: 'color 150ms ease, background-color 150ms ease',
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.color = 'var(--text-primary)';
+              e.currentTarget.style.backgroundColor = 'var(--bg-hover)';
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.color = 'var(--text-tertiary)';
+              e.currentTarget.style.backgroundColor = 'transparent';
+            }}
             title={isBottom ? "Dock to right" : "Dock to bottom"}
           >
-            <DockIcon dock={state.dock} className="w-4 h-4" />
+            <span style={{ display: 'inline-flex', width: '16px', height: '16px' }}>
+              <DockIcon dock={state.dock} />
+            </span>
           </button>
           {/* Collapse toggle button */}
           <button
             onClick={toggleOpen}
-            className="p-1 text-tertiary hover:text-primary hover:bg-[--bg-hover] rounded transition-colors"
+            style={{
+              padding: '4px',
+              color: 'var(--text-tertiary)',
+              backgroundColor: 'transparent',
+              border: 'none',
+              borderRadius: '4px',
+              cursor: 'pointer',
+              display: 'inline-flex',
+              transition: 'color 150ms ease, background-color 150ms ease',
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.color = 'var(--text-primary)';
+              e.currentTarget.style.backgroundColor = 'var(--bg-hover)';
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.color = 'var(--text-tertiary)';
+              e.currentTarget.style.backgroundColor = 'transparent';
+            }}
             title={isOpen ? "Collapse panel" : "Expand panel"}
           >
-            <ChevronDownIcon
-              className={clsx(
-                "w-4 h-4 transition-transform",
-                !isOpen && (isBottom ? "rotate-180" : "-rotate-90"),
-                isOpen && !isBottom && "rotate-90"
-              )}
-            />
+            <span style={chevronStyle}>
+              <ChevronDownIcon />
+            </span>
           </button>
         </div>
       </div>
@@ -255,8 +356,8 @@ export function ResizablePanel({
       {/* Panel Content */}
       {isOpen && (
         <div
-          className="overflow-auto"
           style={{
+            overflow: 'auto',
             height: isBottom ? `calc(100% - ${headerHeight}px)` : "100%",
             width: isBottom ? "100%" : `calc(100% - ${headerHeight}px)`,
           }}
@@ -299,11 +400,13 @@ export function usePanelDock(): "bottom" | "right" {
 }
 
 // Icon for dock position toggle
-function DockIcon({ dock, className }: { dock: "bottom" | "right"; className?: string }) {
+function DockIcon({ dock }: { dock: "bottom" | "right" }) {
+  const svgStyle: CSSProperties = { width: '100%', height: '100%' };
+
   if (dock === "bottom") {
     // Show icon indicating "dock to right" action
     return (
-      <svg className={className} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <svg style={svgStyle} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
         {/* Outer frame */}
         <rect x="1" y="2" width="14" height="12" rx="1" />
         {/* Right panel indicator */}
@@ -315,7 +418,7 @@ function DockIcon({ dock, className }: { dock: "bottom" | "right"; className?: s
 
   // Show icon indicating "dock to bottom" action
   return (
-    <svg className={className} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
+    <svg style={svgStyle} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
       {/* Outer frame */}
       <rect x="1" y="2" width="14" height="12" rx="1" />
       {/* Bottom panel indicator */}

package/src/viewer/components/RightSidebar.tsx

@@ -1,6 +1,6 @@
 import type { SegmentDefinition } from '../../core/index.js';
 import { useScrollSpy } from '../hooks/useScrollSpy.js';
-import clsx from 'clsx';
+import { Sidebar } from '@fragments/ui';
 
 interface RightSidebarProps {
   segment: SegmentDefinition;
@@ -58,61 +58,51 @@ export function RightSidebar({ segment }: RightSidebarProps) {
   });
 
   return (
-    <div className="py-2">
-      <h4 className="px-3 mb-4 text-[11px] font-medium text-tertiary uppercase tracking-wider">
-        On this page
-      </h4>
-      <nav>
-        <ul className="space-y-0.5">
-          {tocItems.map((item) => {
-            const isActive = activeId === item.id;
-            const hasActiveChild = item.children?.some((child) => activeId === child.id);
+    <Sidebar position="right" collapsible="none" style={{ padding: '8px 0' }}>
+      <Sidebar.Header>
+        <span style={{
+          fontSize: '11px',
+          fontWeight: 500,
+          color: 'var(--text-tertiary)',
+          textTransform: 'uppercase',
+          letterSpacing: '0.05em',
+        }}>
+          On this page
+        </span>
+      </Sidebar.Header>
+      <Sidebar.Nav aria-label="On this page">
+        {tocItems.map((item) => {
+          const isActive = activeId === item.id;
+          const hasActiveChild = item.children?.some((child) => activeId === child.id);
 
-            return (
-              <li key={item.id}>
-                <button
-                  onClick={() => scrollToSection(item.id)}
-                  className={clsx(
-                    'group flex items-center w-full text-left px-3 py-1.5 text-[13px] rounded-md transition-all duration-150',
-                    'focus:outline-none focus-visible:ring-2 focus-visible:ring-[--color-accent] focus-visible:ring-inset',
-                    isActive || hasActiveChild
-                      ? 'text-primary font-medium'
-                      : 'text-secondary hover:text-primary hover:bg-[--bg-hover]'
-                  )}
-                >
-                  {(isActive || hasActiveChild) && (
-                    <span className="w-0.5 h-3.5 rounded-full bg-[--color-accent] mr-2 -ml-1" />
-                  )}
-                  {item.label}
-                </button>
-                {item.children && item.children.length > 0 && (
-                  <ul className="ml-4 mt-0.5 space-y-0.5 border-l border-[--border-subtle] pl-2">
-                    {item.children.map((child) => {
-                      const isChildActive = activeId === child.id;
-                      return (
-                        <li key={child.id}>
-                          <button
-                            onClick={() => scrollToSection(child.id)}
-                            className={clsx(
-                              'block w-full text-left px-2 py-1 text-[12px] rounded-md transition-all duration-150',
-                              'focus:outline-none focus-visible:ring-2 focus-visible:ring-[--color-accent] focus-visible:ring-inset',
-                              isChildActive
-                                ? 'text-primary font-medium'
-                                : 'text-tertiary hover:text-secondary'
-                            )}
-                          >
-                            {child.label}
-                          </button>
-                        </li>
-                      );
-                    })}
-                  </ul>
-                )}
-              </li>
-            );
-          })}
-        </ul>
-      </nav>
-    </div>
+          return (
+            <Sidebar.Section key={item.id}>
+              <Sidebar.Item
+                active={isActive || !!hasActiveChild}
+                onClick={() => scrollToSection(item.id)}
+              >
+                {item.label}
+              </Sidebar.Item>
+              {item.children && item.children.length > 0 && (
+                <>
+                  {item.children.map((child) => {
+                    const isChildActive = activeId === child.id;
+                    return (
+                      <Sidebar.SubItem
+                        key={child.id}
+                        active={isChildActive}
+                        onClick={() => scrollToSection(child.id)}
+                      >
+                        {child.label}
+                      </Sidebar.SubItem>
+                    );
+                  })}
+                </>
+              )}
+            </Sidebar.Section>
+          );
+        })}
+      </Sidebar.Nav>
+    </Sidebar>
   );
 }

package/src/viewer/components/ScreenshotButton.tsx

@@ -5,6 +5,7 @@
 
 import { useState, memo } from 'react';
 import html2canvas from 'html2canvas';
+import { Button, Tooltip } from '@fragments/ui';
 import { CameraIcon } from './Icons.js';
 
 interface ScreenshotButtonProps {
@@ -21,7 +22,6 @@ export const ScreenshotButton = memo(function ScreenshotButton({ componentName,
       const previewContainer = document.querySelector('[data-preview-container="true"]');
       if (!previewContainer) throw new Error('Preview container not found');
 
-      // Wait for fonts to be fully loaded
       await document.fonts.ready;
 
       const canvas = await html2canvas(previewContainer as HTMLElement, {
@@ -30,12 +30,9 @@ export const ScreenshotButton = memo(function ScreenshotButton({ componentName,
         logging: false,
         useCORS: true,
         allowTaint: true,
-        // Clone callback to ensure styles are properly computed
         onclone: (clonedDoc) => {
-          // Force the cloned document to use the same computed styles
           const clonedElement = clonedDoc.querySelector('[data-preview-container="true"]');
           if (clonedElement) {
-            // Ensure fonts are applied in the cloned document
             const style = clonedDoc.createElement('style');
             style.textContent = Array.from(document.styleSheets)
               .map(sheet => {
@@ -78,13 +75,16 @@ export const ScreenshotButton = memo(function ScreenshotButton({ componentName,
   };
 
   return (
-    <button
-      onClick={handleSaveToFile}
-      disabled={status === 'loading'}
-      className="p-1.5 text-tertiary hover:text-primary hover:bg-[--bg-hover] rounded transition-colors disabled:opacity-50"
-      title="Save screenshot"
-    >
-      <CameraIcon className="w-4 h-4" />
-    </button>
+    <Tooltip content="Save screenshot">
+      <Button
+        variant="ghost"
+        size="sm"
+        icon
+        disabled={status === 'loading'}
+        onClick={handleSaveToFile}
+      >
+        <CameraIcon style={{ width: '16px', height: '16px' }} />
+      </Button>
+    </Tooltip>
   );
 });