@fragments-sdk/cli 0.10.1 → 0.12.1

package/src/viewer/components/VariantRenderer.tsx

@@ -1,131 +0,0 @@
-// @ts-nocheck
-import React, { type ReactNode, Suspense } from 'react';
-import type { FragmentVariant } from '../../core/index.js';
-import { ErrorBoundary } from './ErrorBoundary.js';
-
-interface VariantRendererProps {
-  /** The variant to render */
-  variant: FragmentVariant;
-
-  /** Optional loading fallback for async components */
-  loadingFallback?: ReactNode;
-
-  /** Optional error fallback */
-  errorFallback?: ReactNode;
-
-  /** Callback when variant render throws */
-  onError?: (error: Error) => void;
-}
-
-/**
- * Renders a single variant with error boundary and suspense support.
- */
-export function VariantRenderer({
-  variant,
-  loadingFallback,
-  errorFallback,
-  onError,
-}: VariantRendererProps): React.ReactElement {
-  return (
-    <ErrorBoundary
-      fallback={errorFallback}
-      onError={(error) => onError?.(error)}
-    >
-      <Suspense
-        fallback={
-          loadingFallback ?? (
-            <div
-              style={{
-                padding: '16px',
-                color: '#6b7280',
-                fontFamily: 'system-ui, sans-serif',
-              }}
-            >
-              Loading...
-            </div>
-          )
-        }
-      >
-        {variant.render()}
-      </Suspense>
-    </ErrorBoundary>
-  );
-}
-
-interface VariantGridProps {
-  /** Variants to render */
-  variants: FragmentVariant[];
-
-  /** Number of columns in the grid */
-  columns?: number;
-
-  /** Gap between variants in pixels */
-  gap?: number;
-
-  /** Optional loading fallback */
-  loadingFallback?: ReactNode;
-
-  /** Optional error fallback */
-  errorFallback?: ReactNode;
-}
-
-/**
- * Renders multiple variants in a grid layout.
- */
-export function VariantGrid({
-  variants,
-  columns = 2,
-  gap = 24,
-  loadingFallback,
-  errorFallback,
-}: VariantGridProps): React.ReactElement {
-  return (
-    <div
-      style={{
-        display: 'grid',
-        gridTemplateColumns: `repeat(${columns}, 1fr)`,
-        gap: `${gap}px`,
-      }}
-    >
-      {variants.map((variant) => (
-        <div key={variant.name}>
-          <div
-            style={{
-              marginBottom: '8px',
-              fontWeight: 600,
-              fontSize: '14px',
-              color: '#374151',
-              fontFamily: 'system-ui, sans-serif',
-            }}
-          >
-            {variant.name}
-          </div>
-          <div
-            style={{
-              marginBottom: '8px',
-              fontSize: '13px',
-              color: '#6b7280',
-              fontFamily: 'system-ui, sans-serif',
-            }}
-          >
-            {variant.description}
-          </div>
-          <div
-            style={{
-              padding: '16px',
-              border: '1px solid #e5e7eb',
-              borderRadius: '8px',
-              background: '#ffffff',
-            }}
-          >
-            <VariantRenderer
-              variant={variant}
-              loadingFallback={loadingFallback}
-              errorFallback={errorFallback}
-            />
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}

package/src/viewer/components/VariantTabs.tsx

@@ -1,40 +0,0 @@
-import { Tabs, Stack } from '@fragments-sdk/ui';
-import type { FragmentVariant } from '../../core/index.js';
-import { PlayIcon } from './Icons.js';
-
-interface VariantTabsProps {
-  variants: FragmentVariant[];
-  activeIndex: number;
-  onSelect: (index: number) => void;
-}
-
-export function VariantTabs({ variants, activeIndex, onSelect }: VariantTabsProps) {
-  if (variants.length === 0) return null;
-
-  const activeValue = variants[activeIndex]?.name ?? '';
-
-  return (
-    <Tabs
-      value={activeValue}
-      onValueChange={(value: string | number) => {
-        const index = variants.findIndex(v => v.name === value);
-        if (index >= 0) onSelect(index);
-      }}
-    >
-      <Tabs.List variant="pills">
-        {variants.map((variant) => (
-          <Tabs.Tab key={variant.name} value={variant.name}>
-            <Stack direction="row" align="center" gap="xs" as="span">
-              {variant.name}
-              {variant.hasPlayFunction && (
-                <span style={{ display: 'inline-flex', width: '12px', height: '12px', color: 'var(--color-accent)' }}>
-                  <PlayIcon />
-                </span>
-              )}
-            </Stack>
-          </Tabs.Tab>
-        ))}
-      </Tabs.List>
-    </Tabs>
-  );
-}

package/src/viewer/components/ViewerHeader.tsx

@@ -1,69 +0,0 @@
-import type { RefObject } from "react";
-import { BRAND } from "../../core/index.js";
-import {
-  Header,
-  Stack,
-  Text,
-  Button,
-  ThemeToggle,
-  FragmentsLogo,
-} from "@fragments-sdk/ui";
-import { GitHubIcon } from "./Icons.js";
-import { HeaderSearch } from "./HeaderSearch.js";
-import { useTheme } from "./ThemeProvider.js";
-import { WebMCPStatusIndicator } from "./WebMCPStatusIndicator.js";
-
-interface ViewerHeaderProps {
-  showHealth: boolean;
-  searchQuery: string;
-  onSearchChange: (value: string) => void;
-  searchInputRef: RefObject<HTMLInputElement>;
-}
-
-export function ViewerHeader({
-  showHealth,
-  searchQuery,
-  onSearchChange,
-  searchInputRef,
-}: ViewerHeaderProps) {
-  const { setTheme, resolvedTheme } = useTheme();
-  return (
-    <Header aria-label="Fragments viewer header">
-      <Header.Trigger />
-      <Header.Brand>
-        <Stack direction="row" gap="sm" align="center">
-          <FragmentsLogo size={20} />
-          <Text weight="medium" size="sm">
-            {BRAND.name}
-          </Text>
-          <Text size="xs" color="tertiary">
-            {showHealth ? "health dashboard" : "preview"}
-          </Text>
-        </Stack>
-      </Header.Brand>
-      <HeaderSearch value={searchQuery} onChange={onSearchChange} inputRef={searchInputRef} />
-      <Header.Spacer />
-      <Header.Actions>
-        <WebMCPStatusIndicator />
-        <ThemeToggle
-          size="sm"
-          value={resolvedTheme}
-          onValueChange={(value) => setTheme(value)}
-          aria-label={`Theme: ${resolvedTheme}`}
-        />
-        <Button
-          as="a"
-          variant="ghost"
-          size="sm"
-          icon
-          href="https://github.com/ConanMcN/fragments"
-          target="_blank"
-          rel="noopener noreferrer"
-          aria-label="View on GitHub"
-        >
-          <GitHubIcon />
-        </Button>
-      </Header.Actions>
-    </Header>
-  );
-}

package/src/viewer/components/ViewerStateSync.tsx

@@ -1,52 +0,0 @@
-import { useEffect } from 'react';
-import { setViewerState } from '../webmcp/viewer-state.js';
-import { useUrlState } from '../hooks/useUrlState.js';
-import { useAppState } from '../hooks/useAppState.js';
-import { useViewSettings } from '../hooks/useViewSettings.js';
-import { useTheme } from './ThemeProvider.js';
-import { BRAND, type FragmentDefinition } from '../../core/index.js';
-
-interface ViewerStateSyncProps {
-  fragments: Array<{ path: string; fragment: FragmentDefinition }>;
-  activeVariantIndex: number;
-}
-
-export function ViewerStateSync({ fragments, activeVariantIndex }: ViewerStateSyncProps) {
-  const { state: urlState } = useUrlState();
-  const { state: uiState } = useAppState();
-  const viewSettings = useViewSettings();
-  const { resolvedTheme } = useTheme();
-
-  useEffect(() => {
-    const activeFragment = urlState.component
-      ? fragments.find(f => f.fragment.meta.name.toLowerCase() === urlState.component!.toLowerCase())
-      : null;
-
-    const variants = activeFragment?.fragment.variants ?? [];
-
-    setViewerState({
-      currentComponent: activeFragment?.fragment.meta.name ?? null,
-      currentVariant: variants[activeVariantIndex]?.name ?? null,
-      variantIndex: activeVariantIndex,
-      totalVariants: variants.length,
-      viewport: viewSettings.viewport,
-      zoom: viewSettings.zoom,
-      theme: resolvedTheme,
-      panels: {
-        activePanel: uiState.activePanel,
-        panelOpen: uiState.panelOpen,
-      },
-      viewMode: {
-        matrixView: uiState.showMatrixView,
-        multiViewport: uiState.showMultiViewport,
-        comparison: uiState.showComparison,
-      },
-      designSystem: {
-        name: BRAND.name,
-        componentCount: fragments.length,
-      },
-    });
-  }, [urlState, uiState, viewSettings, resolvedTheme, fragments, activeVariantIndex]);
-
-  return null;
-}

package/src/viewer/components/ViewportSelector.tsx

@@ -1,172 +0,0 @@
-import { Button, Menu, Stack, Input, Text, Box } from '@fragments-sdk/ui';
-import { VIEWPORT_PRESETS, type ViewportPreset } from '../constants/ui.js';
-import {
-  ViewportIcon,
-  ChevronDownIcon,
-  ResponsiveIcon,
-  DesktopIcon,
-  TabletIcon,
-  MobileIcon,
-  SettingsIcon,
-} from './Icons.js';
-
-// Re-export for consumers
-export type { ViewportPreset };
-
-export interface ViewportSize {
-  width: number | null;
-  height: number | null;
-}
-
-// Viewport presets with display metadata
-const VIEWPORT_PRESETS_UI = Object.entries(VIEWPORT_PRESETS).map(([value, config]) => ({
-  value: value as ViewportPreset,
-  label: config.label,
-  width: config.width,
-}));
-
-function PresetIcon({ preset }: { preset: ViewportPreset }) {
-  const commonStyle = { width: '16px', height: '16px' };
-
-  switch (preset) {
-    case 'desktop':
-      return <DesktopIcon style={commonStyle} />;
-    case 'tablet':
-      return <TabletIcon style={commonStyle} />;
-    case 'mobile':
-      return <MobileIcon style={commonStyle} />;
-    case 'responsive':
-    default:
-      return <ResponsiveIcon style={commonStyle} />;
-  }
-}
-
-interface ViewportSelectorProps {
-  viewport: ViewportPreset;
-  customSize: ViewportSize;
-  onViewportChange: (viewport: ViewportPreset) => void;
-  onCustomSizeChange: (size: ViewportSize) => void;
-}
-
-export function ViewportSelector({
-  viewport,
-  customSize,
-  onViewportChange,
-  onCustomSizeChange,
-}: ViewportSelectorProps) {
-  const currentPreset = VIEWPORT_PRESETS_UI.find(p => p.value === viewport);
-  const isCustomViewport = viewport === 'custom';
-  const displayLabel = viewport === 'custom'
-    ? `${customSize.width || '?'}\u00D7${customSize.height || 'auto'}`
-    : currentPreset?.label || 'Responsive';
-
-  return (
-    <Menu>
-      <Menu.Trigger asChild>
-        <Button variant="ghost" size="sm" title="Viewport size">
-          <Stack direction="row" gap="xs" align="center">
-            <span style={{ display: 'inline-flex', width: '14px', height: '14px' }}>
-              <ViewportIcon />
-            </span>
-            <span>{displayLabel}</span>
-            <span style={{ display: 'inline-flex', width: '12px', height: '12px' }}>
-              <ChevronDownIcon />
-            </span>
-          </Stack>
-        </Button>
-      </Menu.Trigger>
-      <Menu.Content side="bottom" align="end">
-        <Menu.RadioGroup
-          value={isCustomViewport ? 'custom' : viewport}
-          onValueChange={(value: string) => {
-            if (value === 'custom') {
-              onViewportChange('custom');
-              return;
-            }
-            onViewportChange(value as ViewportPreset);
-          }}
-        >
-          {VIEWPORT_PRESETS_UI.map((preset) => (
-            <Menu.RadioItem key={preset.value} value={preset.value}>
-              <Stack direction="row" gap="sm" align="center" justify="between" style={{ width: '100%' }}>
-                <Stack direction="row" gap="sm" align="center">
-                  <PresetIcon preset={preset.value} />
-                  <span>{preset.label}</span>
-                </Stack>
-                {preset.width && (
-                  <Text size="2xs" color="tertiary">
-                    {preset.width}px
-                  </Text>
-                )}
-              </Stack>
-            </Menu.RadioItem>
-          ))}
-        </Menu.RadioGroup>
-
-        <Menu.Separator />
-
-        <Menu.Item onSelect={() => onViewportChange('custom')}>
-          <Stack direction="row" gap="sm" align="center" style={{
-            width: '100%',
-            fontWeight: isCustomViewport ? 600 : 400,
-            color: isCustomViewport ? 'var(--color-accent)' : undefined,
-          }}>
-            <SettingsIcon style={{ width: '16px', height: '16px' }} />
-            Custom size
-          </Stack>
-        </Menu.Item>
-
-        {isCustomViewport && (
-          <div
-            onClick={(e) => e.stopPropagation()}
-            onKeyDown={(e) => e.stopPropagation()}
-          >
-            <Box padding="sm">
-              <Stack gap="sm">
-                <Stack direction="row" gap="sm" align="center">
-                  <Text size="2xs" color="tertiary" style={{ width: '20px' }}>W:</Text>
-                  <Input
-                    type="number"
-                    size="sm"
-                    value={customSize.width != null ? String(customSize.width) : ''}
-                    onChange={(value) => {
-                      const width = value ? parseInt(value, 10) : null;
-                      onCustomSizeChange({ ...customSize, width });
-                      onViewportChange('custom');
-                    }}
-                    placeholder="auto"
-                    style={{ width: '64px' }}
-                  />
-                  <Text size="2xs" color="tertiary">px</Text>
-                </Stack>
-                <Stack direction="row" gap="sm" align="center">
-                  <Text size="2xs" color="tertiary" style={{ width: '20px' }}>H:</Text>
-                  <Input
-                    type="number"
-                    size="sm"
-                    value={customSize.height != null ? String(customSize.height) : ''}
-                    onChange={(value) => {
-                      const height = value ? parseInt(value, 10) : null;
-                      onCustomSizeChange({ ...customSize, height });
-                      onViewportChange('custom');
-                    }}
-                    placeholder="auto"
-                    style={{ width: '64px' }}
-                  />
-                  <Text size="2xs" color="tertiary">px</Text>
-                </Stack>
-              </Stack>
-            </Box>
-          </div>
-        )}
-      </Menu.Content>
-    </Menu>
-  );
-}
-
-// Get viewport width from preset
-export function getViewportWidth(viewport: ViewportPreset, customSize: ViewportSize): number | null {
-  if (viewport === 'custom') return customSize.width;
-  if (viewport === 'responsive') return null;
-  return VIEWPORT_PRESETS[viewport]?.width ?? null;
-}