@shellui/core 0.2.0-alpha.2 → 0.2.0-alpha.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shellui/core",
-  "version": "0.2.0-alpha.2",
+  "version": "0.2.0-alpha.3",
   "description": "ShellUI Core - Core React application runtime",
   "main": "src/index.ts",
   "type": "module",
@@ -58,7 +58,7 @@
     "workbox-strategies": "^7.1.0",
     "workbox-cacheable-response": "^7.1.0",
     "workbox-expiration": "^7.1.0",
-    "@shellui/sdk": "0.2.0-alpha.2"
+    "@shellui/sdk": "0.2.0-alpha.3"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/features/settings/SettingsProvider.tsx

@@ -6,12 +6,13 @@ import {
   type Settings,
   type SettingsNavigationItem,
   type Appearance,
+  type SettingsAvailableTheme,
 } from '@shellui/sdk';
 import { SettingsContext } from './SettingsContext';
 import { useConfig } from '../config/useConfig';
 import { useTranslation } from 'react-i18next';
 import type { NavigationItem, NavigationGroup, ShellUIConfig } from '../config/types';
-import { getTheme, registerTheme } from '../theme/themes';
+import { getTheme, getAllThemes, registerTheme } from '../theme/themes';
 
 const logger = getLogger('shellcore');
 
@@ -40,6 +41,20 @@ function resolveColorMode(colorScheme: 'light' | 'dark' | 'system'): 'light' | '
   return colorScheme === 'dark' ? 'dark' : 'light';
 }
 
+/** Convert font file URLs to absolute so iframes/modals on other ports or domains can load them. */
+function toAbsoluteFontUrls(urls: string[]): string[] {
+  if (typeof window === 'undefined') return urls;
+  const origin = window.location.origin;
+  return urls.map((url) => {
+    const trimmed = url.trim();
+    if (trimmed.startsWith('http://') || trimmed.startsWith('https://')) {
+      return trimmed;
+    }
+    const path = trimmed.startsWith('/') ? trimmed : `/${trimmed}`;
+    return `${origin}${path}`;
+  });
+}
+
 /**
  * Build the full appearance object for settings propagation so apps receive all theme
  * variable values and can style without knowing the theme name.
@@ -75,13 +90,29 @@ function getResolvedAppearanceForSettings(
     ...(themeDef.textShadow !== undefined && { textShadow: themeDef.textShadow }),
     ...(themeDef.lineHeight !== undefined && { lineHeight: themeDef.lineHeight }),
     ...(themeDef.fontFiles !== undefined &&
-      themeDef.fontFiles.length > 0 && { fontFiles: themeDef.fontFiles }),
+      themeDef.fontFiles.length > 0 && {
+        fontFiles: toAbsoluteFontUrls(themeDef.fontFiles),
+      }),
   };
 }
 
 /**
- * Build settings for propagation to iframes: inject navigation and full theme object
- * so apps receive all theme variable values.
+ * Map registered themes to the slim shape sent to sub-apps (name, displayName, colors, optional typography for preview).
+ */
+function getAvailableThemesForSettings(): SettingsAvailableTheme[] {
+  return getAllThemes().map((theme) => ({
+    name: theme.name,
+    displayName: theme.displayName,
+    colors: theme.colors,
+    ...(theme.fontFamily !== undefined && { fontFamily: theme.fontFamily }),
+    ...(theme.letterSpacing !== undefined && { letterSpacing: theme.letterSpacing }),
+    ...(theme.textShadow !== undefined && { textShadow: theme.textShadow }),
+  }));
+}
+
+/**
+ * Build settings for propagation to iframes: inject navigation, full theme object,
+ * and list of available themes so apps can render theme pickers.
  */
 function buildSettingsForPropagation(
   settings: Settings,
@@ -93,6 +124,16 @@ function buildSettingsForPropagation(
     ...settings,
     appearance: appearance ?? settings.appearance,
   };
+  // Inject available themes when we have a resolved appearance (themes are already registered above)
+  if (result.appearance && typeof window !== 'undefined') {
+    result = {
+      ...result,
+      appearance: {
+        ...result.appearance,
+        availableThemes: getAvailableThemesForSettings(),
+      },
+    };
+  }
   if (config?.navigation?.length) {
     const items: SettingsNavigationItem[] = flattenNavigationItems(
       config.navigation,

package/src/features/settings/components/Appearance.tsx

@@ -4,8 +4,9 @@ import { useConfig } from '../../config/useConfig';
 import { Button } from '../../../components/ui/button';
 import { ButtonGroup } from '../../../components/ui/button-group';
 import { cn } from '../../../lib/utils';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useMemo } from 'react';
 import { getAllThemes, registerTheme, type ThemeDefinition } from '../../theme/themes';
+import type { SettingsAvailableTheme } from '@shellui/sdk';
 
 const SunIcon = () => (
   <svg
@@ -85,13 +86,19 @@ const MonitorIcon = () => (
   </svg>
 );
 
+/** Theme-like shape used for preview (ThemeDefinition or SettingsAvailableTheme). */
+type ThemePreviewItem = Pick<
+  ThemeDefinition | SettingsAvailableTheme,
+  'name' | 'displayName' | 'colors' | 'fontFamily' | 'letterSpacing' | 'textShadow'
+>;
+
 // Theme color preview component
 const ThemePreview = ({
   theme,
   isSelected,
   isDark,
 }: {
-  theme: ThemeDefinition;
+  theme: ThemePreviewItem;
   isSelected: boolean;
   isDark: boolean;
 }) => {
@@ -169,18 +176,25 @@ export const Appearance = () => {
   const currentTheme = settings.appearance?.colorScheme ?? 'system';
   const currentThemeName = settings.appearance?.name ?? 'default';
 
-  const [availableThemes, setAvailableThemes] = useState<ThemeDefinition[]>([]);
+  const [localThemes, setLocalThemes] = useState<ThemeDefinition[]>([]);
 
-  // Register custom themes from config and get all themes
+  // Register custom themes from config and get all themes (for shell context)
   useEffect(() => {
     if (config?.themes) {
       config.themes.forEach((themeDef: ThemeDefinition) => {
         registerTheme(themeDef);
       });
     }
-    setAvailableThemes(getAllThemes());
+    setLocalThemes(getAllThemes());
   }, [config]);
 
+  // Use availableThemes from settings when provided (e.g. from shell when in sub-app), else local registry
+  const availableThemes = useMemo((): ThemePreviewItem[] => {
+    const fromSettings = settings.appearance?.availableThemes;
+    if (fromSettings?.length) return fromSettings;
+    return localThemes;
+  }, [settings.appearance?.availableThemes, localThemes]);
+
   // Determine if we're in dark mode for preview
   const [isDarkForPreview, setIsDarkForPreview] = useState(() => {
     if (typeof window === 'undefined') return false;