@fragments-sdk/viewer 0.2.1

package/src/components/Sidebar.tsx

@@ -0,0 +1,169 @@
+import React, { useState, useMemo } from 'react';
+import type { FragmentDefinition } from '@fragments-sdk/core';
+
+interface SidebarProps {
+  fragments: Array<{ path: string; fragment: FragmentDefinition }>;
+  activeFragment: string | null;
+  onSelect: (path: string) => void;
+}
+
+export function Sidebar({ fragments, activeFragment, onSelect }: SidebarProps): React.ReactElement {
+  const [search, setSearch] = useState('');
+
+  // Group fragments by category
+  const grouped = useMemo(() => {
+    const groups: Record<string, typeof fragments> = {};
+
+    for (const item of fragments) {
+      const category = item.fragment.meta.category || 'uncategorized';
+      if (!groups[category]) {
+        groups[category] = [];
+      }
+      groups[category].push(item);
+    }
+
+    // Filter by search
+    if (search) {
+      const filtered: Record<string, typeof fragments> = {};
+      for (const [category, items] of Object.entries(groups)) {
+        const matchingItems = items.filter(
+          (item) =>
+            item.fragment.meta.name.toLowerCase().includes(search.toLowerCase()) ||
+            item.fragment.meta.description.toLowerCase().includes(search.toLowerCase())
+        );
+        if (matchingItems.length > 0) {
+          filtered[category] = matchingItems;
+        }
+      }
+      return filtered;
+    }
+
+    return groups;
+  }, [fragments, search]);
+
+  return (
+    <div
+      style={{
+        width: '280px',
+        height: '100vh',
+        background: '#f9fafb',
+        borderRight: '1px solid #e5e7eb',
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden',
+      }}
+    >
+      {/* Header */}
+      <div
+        style={{
+          padding: '16px',
+          borderBottom: '1px solid #e5e7eb',
+        }}
+      >
+        <h1
+          style={{
+            margin: 0,
+            fontSize: '18px',
+            fontWeight: 700,
+            color: '#111827',
+          }}
+        >
+          Fragments
+        </h1>
+        <p
+          style={{
+            margin: '4px 0 0',
+            fontSize: '12px',
+            color: '#6b7280',
+          }}
+        >
+          {fragments.length} component{fragments.length !== 1 ? 's' : ''}
+        </p>
+      </div>
+
+      {/* Search */}
+      <div style={{ padding: '12px 16px' }}>
+        <input
+          type="text"
+          placeholder="Search components..."
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          style={{
+            width: '100%',
+            padding: '8px 12px',
+            border: '1px solid #d1d5db',
+            borderRadius: '6px',
+            fontSize: '13px',
+            outline: 'none',
+            boxSizing: 'border-box',
+          }}
+        />
+      </div>
+
+      {/* Component list */}
+      <div
+        style={{
+          flex: 1,
+          overflow: 'auto',
+          padding: '0 8px 16px',
+        }}
+      >
+        {Object.entries(grouped).map(([category, items]) => (
+          <div key={category} style={{ marginBottom: '16px' }}>
+            <div
+              style={{
+                padding: '8px',
+                fontSize: '11px',
+                fontWeight: 600,
+                color: '#6b7280',
+                textTransform: 'uppercase',
+                letterSpacing: '0.05em',
+              }}
+            >
+              {category}
+            </div>
+            {items.map((item) => (
+              <button
+                key={item.path}
+                onClick={() => onSelect(item.path)}
+                style={{
+                  display: 'block',
+                  width: '100%',
+                  padding: '8px 12px',
+                  border: 'none',
+                  borderRadius: '6px',
+                  background: activeFragment === item.path ? '#e5e7eb' : 'transparent',
+                  textAlign: 'left',
+                  cursor: 'pointer',
+                  transition: 'background 0.15s',
+                }}
+              >
+                <div
+                  style={{
+                    fontSize: '13px',
+                    fontWeight: 500,
+                    color: '#111827',
+                  }}
+                >
+                  {item.fragment.meta.name}
+                </div>
+                <div
+                  style={{
+                    fontSize: '12px',
+                    color: '#6b7280',
+                    marginTop: '2px',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                  }}
+                >
+                  {item.fragment.meta.description}
+                </div>
+              </button>
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/SkeletonLoader.tsx

@@ -0,0 +1,161 @@
+/**
+ * Skeleton Loading Components
+ *
+ * Shows animated placeholders while the app is loading.
+ */
+
+import { Skeleton, Loading, Stack, Box } from '@fragments-sdk/ui';
+
+/**
+ * Full app skeleton shown during initial load
+ */
+export function AppSkeleton() {
+  return (
+    <div
+      style={{
+        display: 'grid',
+        minHeight: '100vh',
+        minHeight: '100dvh',
+        gridTemplateRows: '56px 1fr',
+        gridTemplateColumns: '260px 1fr 240px',
+        gridTemplateAreas: '"header header header" "sidebar main aside"',
+        backgroundColor: 'var(--bg-primary)',
+      }}
+    >
+      <div
+        style={{
+          gridArea: 'header',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          gap: '16px',
+          padding: '0 16px',
+          borderBottom: '1px solid var(--border)',
+          backgroundColor: 'var(--bg-primary)',
+        }}
+      >
+        <Stack direction="row" align="center" gap="sm">
+          <Skeleton.Circle size={20} />
+          <Skeleton variant="text" width={96} />
+          <Skeleton variant="text" width={64} />
+        </Stack>
+        <Skeleton variant="rect" width={240} height={32} radius="md" />
+        <Stack direction="row" align="center" gap="sm">
+          <Skeleton variant="rect" width={64} height={28} radius="md" />
+          <Skeleton.Circle size={20} />
+          <Skeleton.Circle size={20} />
+          <Skeleton.Circle size={20} />
+        </Stack>
+      </div>
+
+      <aside
+        style={{
+          gridArea: 'sidebar',
+          borderRight: '1px solid var(--border)',
+          backgroundColor: 'var(--bg-primary)',
+          display: 'flex',
+          flexDirection: 'column',
+          minHeight: 0,
+        }}
+      >
+        <Box paddingX="md" paddingY="sm">
+          <Skeleton variant="rect" height={32} radius="md" />
+        </Box>
+        <Stack gap="sm" style={{ padding: '0 12px', overflow: 'hidden' }}>
+          <Skeleton variant="text" width={68} />
+          <Skeleton variant="rect" height={30} radius="md" />
+          <Skeleton variant="rect" height={30} radius="md" />
+          <Skeleton variant="rect" height={30} radius="md" />
+          <Skeleton variant="text" width={84} />
+          <Skeleton variant="rect" height={30} radius="md" />
+          <Skeleton variant="rect" height={30} radius="md" />
+          <Skeleton variant="rect" width="78%" height={30} radius="md" />
+        </Stack>
+        <div style={{ marginTop: 'auto', padding: '12px 16px', borderTop: '1px solid var(--border-subtle)' }}>
+          <Skeleton variant="text" width={92} />
+        </div>
+      </aside>
+
+      <main
+        style={{
+          gridArea: 'main',
+          display: 'flex',
+          flexDirection: 'column',
+          minWidth: 0,
+          minHeight: 0,
+          backgroundColor: 'var(--bg-primary)',
+        }}
+      >
+        <div style={{ flex: 1, padding: '20px', overflow: 'hidden' }}>
+          <div
+            style={{
+              border: '1px solid var(--border)',
+              borderRadius: '10px',
+              overflow: 'hidden',
+              marginBottom: '16px',
+            }}
+          >
+            <div style={{ padding: '12px 14px', borderBottom: '1px solid var(--border-subtle)', backgroundColor: 'var(--bg-secondary)', display: 'flex', gap: '10px' }}>
+              <Skeleton variant="text" width={84} />
+              <Skeleton variant="text" width={120} />
+            </div>
+            <div style={{ padding: '24px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+              <Skeleton variant="rect" width={280} height={120} radius="lg" />
+            </div>
+          </div>
+
+          <div
+            style={{
+              border: '1px solid var(--border)',
+              borderRadius: '10px',
+              overflow: 'hidden',
+            }}
+          >
+            <div style={{ height: '40px', display: 'flex', alignItems: 'center', gap: '6px', padding: '0 14px', borderBottom: '1px solid var(--border-subtle)', backgroundColor: 'var(--bg-secondary)' }}>
+              <Skeleton variant="rect" width={52} height={22} radius="md" />
+              <Skeleton variant="rect" width={88} height={22} radius="md" />
+              <Skeleton variant="rect" width={58} height={22} radius="md" />
+            </div>
+            <div style={{ padding: '16px' }}>
+              <Skeleton.Text lines={4} lastLineWidth={72} />
+            </div>
+          </div>
+        </div>
+      </main>
+
+      <aside
+        style={{
+          gridArea: 'aside',
+          borderLeft: '1px solid var(--border)',
+          backgroundColor: 'var(--bg-primary)',
+          padding: '16px 14px',
+        }}
+      >
+        <Stack gap="sm">
+          <Skeleton variant="text" width={92} />
+          <Skeleton variant="text" width={64} />
+          <Skeleton variant="text" width={48} />
+          <Skeleton variant="text" width={76} />
+          <Skeleton variant="rect" height={1} />
+          <Skeleton variant="text" width={86} />
+          <Skeleton variant="rect" width="100%" height={26} radius="md" />
+          <Skeleton variant="rect" width="84%" height={26} radius="md" />
+          <Skeleton variant="rect" width="70%" height={26} radius="md" />
+        </Stack>
+      </aside>
+    </div>
+  );
+}
+
+/**
+ * Component preview skeleton
+ */
+export function PreviewSkeleton() {
+  return (
+    <Stack direction="row" align="center" justify="center" style={{ padding: '32px' }}>
+      <Loading size="md" />
+    </Stack>
+  );
+}
+
+export default AppSkeleton;

package/src/components/ThemeProvider.tsx

@@ -0,0 +1,42 @@
+import type { ReactNode } from 'react';
+import {
+  ThemeProvider as FragmentsThemeProvider,
+  useTheme as useFragmentsTheme,
+} from '@fragments-sdk/ui';
+import { BRAND } from '@fragments-sdk/core';
+
+type Theme = 'light' | 'dark' | 'system';
+
+interface ViewerThemeContextValue {
+  theme: Theme;
+  resolvedTheme: 'light' | 'dark';
+  setTheme: (theme: Theme) => void;
+}
+
+const STORAGE_KEY = `${BRAND.storagePrefix}theme`;
+
+/**
+ * Viewer theme adapter that reuses the shared UI ThemeProvider while preserving
+ * existing viewer storage keys and API shape.
+ */
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  return (
+    <FragmentsThemeProvider
+      defaultMode="system"
+      storageKey={STORAGE_KEY}
+      attribute="class"
+    >
+      {children}
+    </FragmentsThemeProvider>
+  );
+}
+
+export function useTheme(): ViewerThemeContextValue {
+  const { mode, setMode, resolvedMode } = useFragmentsTheme();
+
+  return {
+    theme: mode,
+    resolvedTheme: resolvedMode,
+    setTheme: setMode,
+  };
+}

package/src/components/Toast.tsx

@@ -0,0 +1,3 @@
+// Re-export Fragments UI Toast for use in the viewer
+export { ToastProvider, useToast } from '@fragments-sdk/ui';
+export type { ToastData as ToastMessage } from '@fragments-sdk/ui';