@fragments-sdk/cli 0.7.13 → 0.7.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fragments-sdk/cli",
-  "version": "0.7.13",
+  "version": "0.7.14",
   "license": "FSL-1.1-MIT",
   "description": "CLI, MCP server, and dev tools for Fragments design system",
   "author": "Conan McNicholl",

package/src/viewer/components/App.tsx

@@ -26,14 +26,12 @@ import { useAllFigmaUrls } from "./FigmaEmbed.js";
 import { ActionCapture } from "./ActionCapture.js";
 
 // Fragments UI
-import { Header, Stack, Text, Separator, Tooltip, Button, EmptyState, Box, Alert, Input, ThemeToggle } from "@fragments-sdk/ui";
+import { Header, Stack, Text, Separator, Tooltip, Button, EmptyState, Box, Alert, Input, ThemeToggle, FragmentsLogo } from "@fragments-sdk/ui";
 import { DeviceMobile, GridFour, Rows } from "@phosphor-icons/react";
 
 // Icons
 import { EmptyIcon, FigmaIcon, CompareIcon } from "./Icons.js";
 
-// Logo
-import { fragmentsLogo } from "../assets/fragments-logo.js";
 
 function GitHubIcon() {
   return (
@@ -605,7 +603,7 @@ function ViewerHeader({ showHealth, searchQuery, onSearchChange, searchInputRef
       <Header.Trigger />
       <Header.Brand>
         <Stack direction="row" gap="sm" align="center">
-          <img src={fragmentsLogo} alt="" width={20} height={20} style={{ display: 'block' }} />
+          <FragmentsLogo size={20} />
           <Text weight="medium" size="sm">{BRAND.name}</Text>
           <Text size="xs" color="tertiary">{showHealth ? 'health dashboard' : 'preview'}</Text>
         </Stack>
@@ -761,7 +759,7 @@ function TopToolbar({
       <Header.Trigger />
       <Header.Brand>
         <Stack direction="row" align="center" gap="sm">
-          <img src={fragmentsLogo} alt="" width={20} height={20} style={{ display: 'block' }} />
+          <FragmentsLogo size={20} />
           <Text weight="medium" size="sm">{fragment.fragment.meta.name}</Text>
           <Text size="xs" color="tertiary">{fragment.fragment.meta.category}</Text>
         </Stack>

package/src/viewer/components/ThemeProvider.tsx

@@ -1,96 +1,42 @@
-import { createContext, useContext, useEffect, useState, useCallback, type ReactNode } from 'react';
+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 ThemeContextValue {
+interface ViewerThemeContextValue {
   theme: Theme;
   resolvedTheme: 'light' | 'dark';
   setTheme: (theme: Theme) => void;
 }
 
-const ThemeContext = createContext<ThemeContextValue | null>(null);
-
 const STORAGE_KEY = `${BRAND.storagePrefix}theme`;
 
-function getSystemTheme(): 'light' | 'dark' {
-  if (typeof window === 'undefined') return 'light';
-  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-}
-
-function getStoredTheme(): Theme {
-  if (typeof window === 'undefined') return 'system';
-  const stored = localStorage.getItem(STORAGE_KEY);
-  if (stored === 'light' || stored === 'dark' || stored === 'system') {
-    return stored;
-  }
-  return 'system';
-}
-
+/**
+ * Viewer theme adapter that reuses the shared UI ThemeProvider while preserving
+ * existing viewer storage keys and API shape.
+ */
 export function ThemeProvider({ children }: { children: ReactNode }) {
-  const [theme, setThemeState] = useState<Theme>(getStoredTheme);
-  const [resolvedTheme, setResolvedTheme] = useState<'light' | 'dark'>(() => {
-    const stored = getStoredTheme();
-    return stored === 'system' ? getSystemTheme() : stored;
-  });
-
-  const setTheme = useCallback((newTheme: Theme) => {
-    setThemeState(newTheme);
-    localStorage.setItem(STORAGE_KEY, newTheme);
-
-    // Immediately update resolved theme to avoid timing issues
-    const resolved = newTheme === 'system' ? getSystemTheme() : newTheme;
-    setResolvedTheme(resolved);
-
-    // Immediately apply to document
-    if (resolved === 'dark') {
-      document.documentElement.classList.add('dark');
-    } else {
-      document.documentElement.classList.remove('dark');
-    }
-  }, []);
-
-  // Update resolved theme and apply to document
-  useEffect(() => {
-    const resolved = theme === 'system' ? getSystemTheme() : theme;
-    setResolvedTheme(resolved);
-
-    if (resolved === 'dark') {
-      document.documentElement.classList.add('dark');
-    } else {
-      document.documentElement.classList.remove('dark');
-    }
-  }, [theme]);
-
-  // Listen for system theme changes
-  useEffect(() => {
-    if (theme !== 'system') return;
-
-    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-    const handler = (e: MediaQueryListEvent) => {
-      setResolvedTheme(e.matches ? 'dark' : 'light');
-      if (e.matches) {
-        document.documentElement.classList.add('dark');
-      } else {
-        document.documentElement.classList.remove('dark');
-      }
-    };
-
-    mediaQuery.addEventListener('change', handler);
-    return () => mediaQuery.removeEventListener('change', handler);
-  }, [theme]);
-
   return (
-    <ThemeContext.Provider value={{ theme, resolvedTheme, setTheme }}>
+    <FragmentsThemeProvider
+      defaultMode="system"
+      storageKey={STORAGE_KEY}
+      attribute="class"
+    >
       {children}
-    </ThemeContext.Provider>
+    </FragmentsThemeProvider>
   );
 }
 
-export function useTheme() {
-  const context = useContext(ThemeContext);
-  if (!context) {
-    throw new Error('useTheme must be used within a ThemeProvider');
-  }
-  return context;
+export function useTheme(): ViewerThemeContextValue {
+  const { mode, setMode, resolvedMode } = useFragmentsTheme();
+
+  return {
+    theme: mode,
+    resolvedTheme: resolvedMode,
+    setTheme: setMode,
+  };
 }