@fragments-sdk/viewer 0.2.1 → 0.2.4

package/tsconfig.json

@@ -4,7 +4,7 @@
     "module": "ESNext",
     "moduleResolution": "bundler",
     "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "types": ["vite/client"],
+    "types": ["vite/client", "node"],
     "jsx": "react-jsx",
     "strict": true,
     "esModuleInterop": true,
@@ -16,5 +16,5 @@
     "isolatedModules": true
   },
   "include": ["src"],
-  "exclude": ["node_modules", "dist", "src/__tests__"]
+  "exclude": ["node_modules", "dist", "src/**/__tests__", "src/**/*.test.ts", "src/**/*.test.tsx", "src/components/_future/**"]
 }

package/src/assets/fragments-logo.ts

@@ -1,4 +0,0 @@
-// Inline base64 data URL for the Fragments logo PNG.
-// Vite cannot resolve static asset imports from node_modules,
-// so we embed the image directly to avoid resolution errors.
-export const fragmentsLogo = "data:image/png;base64,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";

package/src/components/ActionsPanel.tsx

@@ -1,332 +0,0 @@
-/**
- * Actions Panel - Storybook-style event logging
- *
- * Displays a log of callback invocations (onClick, onChange, etc.)
- * with expandable argument details and timestamps.
- */
-
-import { useState, useMemo } from "react";
-import type { ActionLog } from "../hooks/useActions.js";
-import { formatActionArg } from "../hooks/useActions.js";
-import { Button, Stack, Text, Badge, Input, Menu, Separator, Box } from "@fragments-sdk/ui";
-import {
-  TrashIcon,
-  ChevronDownIcon,
-  ChevronRightIcon,
-  PlayIcon,
-  ExportIcon,
-  DownloadIcon,
-  CopyIcon,
-  CheckIcon,
-} from "./Icons.js";
-import {
-  exportActions,
-  copyToClipboard,
-  downloadAsFile,
-  getFileExtension,
-  type ExportFormat,
-} from "../utils/actionExport.js";
-
-interface ActionsPanelProps {
-  /** List of action logs */
-  logs: ActionLog[];
-  /** Callback to clear all logs */
-  onClear: () => void;
-  /** Component name for export context */
-  componentName?: string;
-  /** Variant name for export context */
-  variantName?: string;
-}
-
-export function ActionsPanel({ logs, onClear, componentName = 'Component', variantName = 'Default' }: ActionsPanelProps) {
-  const [expandedLogs, setExpandedLogs] = useState<Set<string>>(new Set());
-  const [filter, setFilter] = useState("");
-  const [copyFeedback, setCopyFeedback] = useState<string | null>(null);
-
-  const filteredLogs = useMemo(() => {
-    if (!filter) return logs;
-    const lowerFilter = filter.toLowerCase();
-    return logs.filter((log) => log.name.toLowerCase().includes(lowerFilter));
-  }, [logs, filter]);
-
-  const toggleExpanded = (id: string) => {
-    setExpandedLogs((prev) => {
-      const next = new Set(prev);
-      if (next.has(id)) {
-        next.delete(id);
-      } else {
-        next.add(id);
-      }
-      return next;
-    });
-  };
-
-  const formatTime = (timestamp: number) => {
-    const date = new Date(timestamp);
-    return date.toLocaleTimeString("en-US", {
-      hour12: false,
-      hour: "2-digit",
-      minute: "2-digit",
-      second: "2-digit",
-    });
-  };
-
-  const handleExport = async (format: ExportFormat, action: 'copy' | 'download') => {
-    const content = exportActions(logs, format, {
-      componentName,
-      variantName,
-      includeComments: true,
-    });
-
-    if (action === 'copy') {
-      const success = await copyToClipboard(content);
-      if (success) {
-        setCopyFeedback(format);
-        setTimeout(() => setCopyFeedback(null), 2000);
-      }
-    } else {
-      const filename = `${componentName}-${variantName}-actions${getFileExtension(format)}`;
-      downloadAsFile(content, filename.toLowerCase().replace(/\s+/g, '-'));
-    }
-  };
-
-  // No logs state
-  if (logs.length === 0) {
-    return (
-      <Stack style={{ height: '100%' }}>
-        <Box padding="md" borderBottom>
-          <Stack direction="row" align="center" gap="sm">
-            <PlayIcon style={{ width: 16, height: 16 }} />
-            <Text weight="medium">Actions</Text>
-          </Stack>
-        </Box>
-        <Stack align="center" justify="center" style={{ flex: 1, padding: '32px', textAlign: 'center' }}>
-          <div style={{ maxWidth: '28rem' }}>
-            <div style={{ width: '48px', height: '48px', borderRadius: '9999px', background: 'var(--bg-secondary)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 16px' }}>
-              <PlayIcon style={{ width: 24, height: 24, color: 'var(--text-tertiary)' }} />
-            </div>
-            <Text weight="medium" color="secondary" style={{ marginBottom: '8px' }}>
-              No actions logged yet
-            </Text>
-            <Text size="sm" color="tertiary">
-              Interact with the component to see callback invocations here.
-              Actions like <Box as="code" padding="xs" background="secondary" rounded="sm" style={{ fontSize: '12px', display: 'inline' }}>onClick</Box>, <Box as="code" padding="xs" background="secondary" rounded="sm" style={{ fontSize: '12px', display: 'inline' }}>onChange</Box>, etc. will be logged automatically.
-            </Text>
-          </div>
-        </Stack>
-      </Stack>
-    );
-  }
-
-  return (
-    <Stack style={{ height: '100%' }}>
-      {/* Header */}
-      <Box padding="sm" borderBottom>
-        <Stack direction="row" align="center" justify="between" gap="sm">
-          <Stack direction="row" align="center" gap="sm" style={{ flex: 1 }}>
-            <Stack direction="row" align="center" gap="sm">
-              <PlayIcon style={{ width: 16, height: 16 }} />
-              <Text weight="medium" size="sm">Actions</Text>
-            </Stack>
-            <Badge size="sm">{logs.length}</Badge>
-          </Stack>
-          <Stack direction="row" align="center" gap="sm">
-            <Input
-              size="sm"
-              placeholder="Filter..."
-              value={filter}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setFilter(e.target.value)}
-              style={{ width: '96px' }}
-            />
-
-            {/* Export dropdown */}
-            <Menu>
-              <Menu.Trigger>
-                <Button variant="ghost" size="sm" title="Export actions">
-                  <ExportIcon style={{ width: 16, height: 16 }} />
-                </Button>
-              </Menu.Trigger>
-              <Menu.Content>
-                <Box paddingX="sm" paddingY="xs">
-                  <Text size="xs" weight="medium" color="tertiary" style={{ textTransform: 'uppercase', letterSpacing: '0.05em' }}>
-                    Export as
-                  </Text>
-                </Box>
-
-                {/* JSON */}
-                <Stack direction="row" align="center" justify="between" style={{ padding: '6px 12px' }}>
-                  <Text size="sm" color="secondary">JSON</Text>
-                  <Stack direction="row" gap="xs">
-                    <Menu.Item onSelect={() => handleExport('json', 'copy')}>
-                      {copyFeedback === 'json' ? <CheckIcon style={{ width: 14, height: 14, color: '#22c55e' }} /> : <CopyIcon style={{ width: 14, height: 14 }} />}
-                    </Menu.Item>
-                    <Menu.Item onSelect={() => handleExport('json', 'download')}>
-                      <DownloadIcon style={{ width: 14, height: 14 }} />
-                    </Menu.Item>
-                  </Stack>
-                </Stack>
-
-                {/* Jest */}
-                <Stack direction="row" align="center" justify="between" style={{ padding: '6px 12px' }}>
-                  <Text size="sm" color="secondary">Jest Assertions</Text>
-                  <Stack direction="row" gap="xs">
-                    <Menu.Item onSelect={() => handleExport('jest', 'copy')}>
-                      {copyFeedback === 'jest' ? <CheckIcon style={{ width: 14, height: 14, color: '#22c55e' }} /> : <CopyIcon style={{ width: 14, height: 14 }} />}
-                    </Menu.Item>
-                    <Menu.Item onSelect={() => handleExport('jest', 'download')}>
-                      <DownloadIcon style={{ width: 14, height: 14 }} />
-                    </Menu.Item>
-                  </Stack>
-                </Stack>
-
-                {/* Playwright */}
-                <Stack direction="row" align="center" justify="between" style={{ padding: '6px 12px' }}>
-                  <Text size="sm" color="secondary">Playwright Test</Text>
-                  <Stack direction="row" gap="xs">
-                    <Menu.Item onSelect={() => handleExport('playwright', 'copy')}>
-                      {copyFeedback === 'playwright' ? <CheckIcon style={{ width: 14, height: 14, color: '#22c55e' }} /> : <CopyIcon style={{ width: 14, height: 14 }} />}
-                    </Menu.Item>
-                    <Menu.Item onSelect={() => handleExport('playwright', 'download')}>
-                      <DownloadIcon style={{ width: 14, height: 14 }} />
-                    </Menu.Item>
-                  </Stack>
-                </Stack>
-
-                <Separator />
-                <Box paddingX="sm" paddingY="xs">
-                  <Text size="xs" color="tertiary">
-                    {logs.length} action{logs.length !== 1 ? 's' : ''} recorded
-                  </Text>
-                </Box>
-              </Menu.Content>
-            </Menu>
-
-            <Button
-              onClick={onClear}
-              variant="ghost"
-              size="sm"
-              title="Clear all actions"
-            >
-              <TrashIcon style={{ width: 16, height: 16 }} />
-            </Button>
-          </Stack>
-        </Stack>
-      </Box>
-
-      {/* Log list */}
-      <Box overflow="auto" style={{ flex: 1 }}>
-        {filteredLogs.length === 0 ? (
-          <Box padding="md" style={{ textAlign: 'center' }}>
-            <Text size="sm" color="tertiary">No actions match "{filter}"</Text>
-          </Box>
-        ) : (
-          <div>
-            {filteredLogs.map((log, index) => (
-              <div key={log.id} style={{ borderBottom: index < filteredLogs.length - 1 ? '1px solid var(--border)' : undefined }}>
-                <ActionLogItem
-                  log={log}
-                  isExpanded={expandedLogs.has(log.id)}
-                  onToggle={() => toggleExpanded(log.id)}
-                  formatTime={formatTime}
-                />
-              </div>
-            ))}
-          </div>
-        )}
-      </Box>
-    </Stack>
-  );
-}
-
-interface ActionLogItemProps {
-  log: ActionLog;
-  isExpanded: boolean;
-  onToggle: () => void;
-  formatTime: (timestamp: number) => string;
-}
-
-function ActionLogItem({ log, isExpanded, onToggle, formatTime }: ActionLogItemProps) {
-  const [hovered, setHovered] = useState(false);
-  const hasArgs = log.args.length > 0;
-  const argsPreview = hasArgs
-    ? log.args.map((arg) => formatActionArg(arg, 50)).join(", ")
-    : "";
-
-  return (
-    <div
-      style={{ background: hovered ? 'var(--bg-secondary)' : 'transparent', transition: 'background 0.15s' }}
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
-    >
-      <button
-        onClick={onToggle}
-        disabled={!hasArgs}
-        style={{
-          width: '100%',
-          padding: '8px 12px',
-          display: 'flex',
-          alignItems: 'flex-start',
-          gap: '8px',
-          textAlign: 'left',
-          cursor: hasArgs ? 'pointer' : 'default',
-          border: 'none',
-          background: 'transparent',
-          color: 'inherit',
-        }}
-      >
-        {/* Expand icon */}
-        <div style={{ flexShrink: 0, width: '16px', height: '16px', marginTop: '2px' }}>
-          {hasArgs ? (
-            isExpanded ? (
-              <ChevronDownIcon style={{ width: 16, height: 16, color: 'var(--text-tertiary)' }} />
-            ) : (
-              <ChevronRightIcon style={{ width: 16, height: 16, color: 'var(--text-tertiary)' }} />
-            )
-          ) : (
-            <div style={{ width: '16px', height: '16px' }} />
-          )}
-        </div>
-
-        {/* Action name */}
-        <div style={{ flex: 1, minWidth: 0 }}>
-          <Stack direction="row" align="center" gap="sm">
-            <Text font="mono" size="sm" style={{ color: 'var(--color-accent)' }}>
-              {log.name}
-            </Text>
-            {log.count > 1 && (
-              <Badge size="sm">x{log.count}</Badge>
-            )}
-          </Stack>
-          {!isExpanded && hasArgs && (
-            <Text size="xs" color="tertiary" font="mono" style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', marginTop: '2px' }}>
-              ({argsPreview})
-            </Text>
-          )}
-        </div>
-
-        {/* Timestamp */}
-        <Text size="xs" color="tertiary" font="mono" style={{ flexShrink: 0 }}>
-          {formatTime(log.timestamp)}
-        </Text>
-      </button>
-
-      {/* Expanded args */}
-      {isExpanded && hasArgs && (
-        <div style={{ padding: '0 12px 12px 36px' }}>
-          <Box padding="sm" background="secondary" rounded="lg" overflow="auto">
-            {log.args.map((arg, index) => (
-              <div key={index} style={{ marginBottom: index < log.args.length - 1 ? '4px' : 0 }}>
-                <Text size="xs" color="tertiary" as="span">
-                  {log.args.length > 1 ? `[${index}] ` : ""}
-                </Text>
-                <pre style={{ display: 'inline', fontSize: '12px', fontFamily: 'monospace', color: 'var(--text-secondary)', whiteSpace: 'pre-wrap' }}>
-                  {formatActionArg(arg, 500)}
-                </pre>
-              </div>
-            ))}
-          </Box>
-        </div>
-      )}
-    </div>
-  );
-}

package/src/components/ComponentHeader.tsx

@@ -1,88 +0,0 @@
-import type { FragmentMeta } from '@fragments-sdk/core';
-import { Badge, Alert, Text, Stack, Separator } from '@fragments-sdk/ui';
-import { WarningIcon, BeakerIcon } from './Icons.js';
-
-interface ComponentHeaderProps {
-  meta: FragmentMeta;
-}
-
-// 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" style={{ scrollMarginTop: '96px', marginBottom: '24px' }}>
-      {/* Deprecated Warning Banner */}
-      {meta.status === 'deprecated' && (
-        <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.'}
-              </Alert.Content>
-            </Alert.Body>
-          </Alert>
-        </div>
-      )}
-
-      {/* Experimental Warning Banner */}
-      {meta.status === 'experimental' && (
-        <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.
-              </Alert.Content>
-            </Alert.Body>
-          </Alert>
-        </div>
-      )}
-
-      <Text as="h1" size="xl" weight="semibold" style={{ letterSpacing: '-0.025em', marginBottom: '8px' }}>
-        {meta.name}
-      </Text>
-      <Text as="p" size="base" color="secondary" style={{ lineHeight: 1.625, marginBottom: '20px' }}>
-        {meta.description}
-      </Text>
-
-      <Stack direction="row" gap="sm" wrap align="center">
-        {/* Category badge */}
-        {meta.category && (
-          <Badge variant="default">{meta.category}</Badge>
-        )}
-
-        {/* Status badge */}
-        {meta.status && (
-          <Badge variant={getStatusBadgeVariant(meta.status)}>
-            {meta.status}
-          </Badge>
-        )}
-
-        {/* Tags */}
-        {meta.tags && meta.tags.length > 0 && (
-          <>
-            <Separator orientation="vertical" />
-            {meta.tags.map((tag) => (
-              <Badge key={tag} variant="default">
-                {tag}
-              </Badge>
-            ))}
-          </>
-        )}
-      </Stack>
-    </section>
-  );
-}