@fragments-sdk/viewer 0.2.1

package/src/components/VariantRenderer.tsx

@@ -0,0 +1,131 @@
+// @ts-nocheck
+import React, { type ReactNode, Suspense } from 'react';
+import type { FragmentVariant } from '@fragments-sdk/core';
+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/components/VariantTabs.tsx

@@ -0,0 +1,40 @@
+import { Tabs, Stack } from '@fragments-sdk/ui';
+import type { FragmentVariant } from '@fragments-sdk/core';
+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/components/ViewerHeader.tsx

@@ -0,0 +1,69 @@
+import type { RefObject } from "react";
+import { BRAND } from '@fragments-sdk/core';
+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/components/ViewerStateSync.tsx

@@ -0,0 +1,52 @@
+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 '@fragments-sdk/core';
+
+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/components/ViewportSelector.tsx

@@ -0,0 +1,172 @@
+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;
+}