@fragments-sdk/cli 0.10.1 → 0.12.1

package/src/viewer/components/SkeletonLoader.tsx

@@ -1,161 +0,0 @@
-/**
- * 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/viewer/components/ThemeProvider.tsx

@@ -1,42 +0,0 @@
-import type { ReactNode } from 'react';
-import {
-  ThemeProvider as FragmentsThemeProvider,
-  useTheme as useFragmentsTheme,
-} from '@fragments-sdk/ui';
-import { BRAND } from '../../core/index.js';
-
-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/viewer/components/Toast.tsx

@@ -1,3 +0,0 @@
-// 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';