@shellui/core 0.0.23 → 0.2.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shellui/core",
-  "version": "0.0.23",
+  "version": "0.2.0-alpha.0",
   "description": "ShellUI Core - Core React application runtime",
   "main": "src/index.ts",
   "type": "module",
@@ -42,6 +42,7 @@
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tooltip": "^1.1.6",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "i18next": "^23.15.0",
@@ -57,7 +58,7 @@
     "workbox-strategies": "^7.1.0",
     "workbox-cacheable-response": "^7.1.0",
     "workbox-expiration": "^7.1.0",
-    "@shellui/sdk": "0.0.23"
+    "@shellui/sdk": "0.2.0-alpha.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -72,6 +73,7 @@
     "@types/react-dom": "^19.2.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.0.0"
   },
   "scripts": {

package/src/components/AppPathView.tsx

@@ -0,0 +1,31 @@
+import { useParams } from 'react-router';
+import { useConfig } from '../features/config/useConfig';
+import { flattenNavigationItems } from '../features/layouts/utils';
+import { NotFoundView } from './NotFoundView';
+
+/**
+ * Renders the React component for a navigation item when the app is loaded at /__app/:path.
+ * Uses navItem.component (when config is not serialized) or shelluiComponents from context (injected by CLI when componentPath is set).
+ */
+export const AppPathView = () => {
+  const { config, shelluiComponents } = useConfig();
+  const { path: pathParam } = useParams<{ path: string }>();
+  const navigation = config?.navigation;
+  const items = navigation?.length ? flattenNavigationItems(navigation) : [];
+  const navItem = pathParam
+    ? items.find(
+        (item) =>
+          item.path === pathParam ||
+          (pathParam === 'home' && (item.path === '' || item.path === '/')),
+      )
+    : null;
+
+  const pathKey = pathParam === 'home' || !pathParam ? 'home' : pathParam;
+  const Component = navItem?.component ?? shelluiComponents?.[pathKey];
+
+  if (!Component) {
+    return <NotFoundView />;
+  }
+
+  return <Component />;
+};

package/src/components/ContentView.tsx

@@ -16,17 +16,22 @@ const logger = getLogger('shellcore');
 
 interface ContentViewProps {
   url: string;
+  /** Base URL for this content (effective nav item URL). Used for URL sync; when omitted, falls back to navItem.url or url. */
+  baseUrl?: string;
   pathPrefix: string;
   ignoreMessages?: boolean;
-  navItem: NavigationItem;
+  /** Nav item for this content; may be undefined when opening by URL (e.g. settings modal) if no matching item found. */
+  navItem?: NavigationItem | null;
 }
 
 export const ContentView = ({
   url,
+  baseUrl: baseUrlProp,
   pathPrefix,
   ignoreMessages = false,
   navItem,
 }: ContentViewProps) => {
+  const baseUrl = baseUrlProp ?? navItem?.url ?? url;
   const navigate = useNavigate();
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const isInternalNavigation = useRef(false);
@@ -58,9 +63,13 @@ export const ContentView = ({
         }
 
         const { pathname, search, hash } = data.payload as ShellUIUrlPayload;
-        // Remove leading slash and trailing slashes from iframe pathname
-        let cleanPathname = pathname.startsWith(navItem.url)
-          ? pathname.slice(navItem.url.length)
+        // Use pathname part of baseUrl for comparison (iframe pathname is always path-only)
+        const basePathname =
+          baseUrl.startsWith('http') || baseUrl.startsWith('//')
+            ? new URL(baseUrl, window.location.origin).pathname
+            : baseUrl;
+        let cleanPathname = pathname.startsWith(basePathname)
+          ? pathname.slice(basePathname.length)
           : pathname;
         cleanPathname = cleanPathname.startsWith('/') ? cleanPathname.slice(1) : cleanPathname;
         cleanPathname = cleanPathname.replace(/\/+$/, ''); // Remove trailing slashes
@@ -102,7 +111,7 @@ export const ContentView = ({
     return () => {
       cleanup();
     };
-  }, [pathPrefix, navigate]);
+  }, [pathPrefix, navigate, baseUrl]);
 
   // Hide loading overlay when iframe sends SHELLUI_INITIALIZED
   useEffect(() => {
@@ -248,7 +257,6 @@ export const ContentView = ({
           border: 'none',
           display: 'block',
         }}
-        title="Content Frame"
         sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox"
         referrerPolicy="no-referrer-when-downgrade"
       />

package/src/components/HomeView.tsx

@@ -6,14 +6,21 @@ export const HomeView = () => {
   const { config } = useConfig();
 
   return (
-    <div className="flex flex-col items-center justify-center h-full p-8 md:p-10">
+    <div className="flex flex-col items-center justify-center h-full p-8 md:p-10 max-w-2xl mx-auto text-center">
       <h1
         className="m-0 text-3xl font-light text-foreground"
         style={{ fontFamily: 'var(--heading-font-family, inherit)' }}
       >
-        {t('welcome', { title: config.title })}
+        {t('welcome', { title: config?.title ?? 'ShellUI' })}
       </h1>
       <p className="mt-4 text-lg text-muted-foreground">{t('getStarted')}</p>
+      <div className="mt-8 p-4 rounded-lg bg-muted/50 border border-border text-left">
+        <p className="text-sm font-medium text-foreground mb-2">{t('homeConfig.intro')}</p>
+        <ul className="text-sm text-muted-foreground list-disc list-inside space-y-1">
+          <li>{t('homeConfig.startUrl')}</li>
+          <li>{t('homeConfig.rootNav')}</li>
+        </ul>
+      </div>
     </div>
   );
 };

package/src/components/IndexRoute.tsx

@@ -0,0 +1,37 @@
+import { Navigate } from 'react-router';
+import { useConfig } from '../features/config/useConfig';
+import { flattenNavigationItems } from '../features/layouts/utils';
+import { HomeView } from './HomeView';
+import { ViewRoute } from './ViewRoute';
+
+/**
+ * Renders the root path "/":
+ * - If start_url is set in config, redirects to start_url.
+ * - Else if a navigation item has path "" or "/", shows that item's content.
+ * - Otherwise shows the default HomeView.
+ */
+export const IndexRoute = () => {
+  const { config } = useConfig();
+
+  const startUrl = config?.start_url?.trim();
+  if (startUrl) {
+    const to = startUrl.startsWith('/') ? startUrl : `/${startUrl}`;
+    return (
+      <Navigate
+        to={to}
+        replace
+      />
+    );
+  }
+
+  const navigation = config?.navigation;
+  if (navigation?.length) {
+    const navigationItems = flattenNavigationItems(navigation);
+    const rootNavItem = navigationItems.find((item) => item.path === '' || item.path === '/');
+    if (rootNavItem) {
+      return <ViewRoute navigation={navigationItems} />;
+    }
+  }
+
+  return <HomeView />;
+};

package/src/components/NotFoundView.tsx

@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import { shellui } from '@shellui/sdk';
 import { useConfig } from '../features/config/useConfig';
+import { getNavPathPrefix } from '../features/layouts/utils';
 import type { NavigationItem, NavigationGroup } from '../features/config/types';
 
 const flattenNavigationItems = (
@@ -56,7 +57,7 @@ export const NotFoundView = () => {
           >
             {navItems.map((item, index) => (
               <span
-                key={item.path}
+                key={item.path || 'root'}
                 className="inline-flex items-center gap-x-2"
               >
                 {index > 0 && (
@@ -69,7 +70,7 @@ export const NotFoundView = () => {
                 )}
                 <button
                   type="button"
-                  onClick={() => handleNavigate(`/${item.path}`)}
+                  onClick={() => handleNavigate(getNavPathPrefix(item))}
                   className="text-muted-foreground hover:text-foreground hover:underline underline-offset-2 cursor-pointer bg-transparent border-0 p-0 font-normal"
                 >
                   {resolveLocalizedString(item.label, currentLanguage)}

package/src/components/ViewRoute.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import { Navigate, useLocation } from 'react-router';
+import { getNavPathPrefix, getEffectiveUrl } from '../features/layouts/utils';
 import { ContentView } from './ContentView';
 import type { NavigationItem } from '../features/config/types';
 
@@ -13,7 +14,7 @@ export const ViewRoute = ({ navigation }: ViewRouteProps) => {
 
   const navItem = useMemo(() => {
     return navigation.find((item) => {
-      const pathPrefix = `/${item.path}`;
+      const pathPrefix = getNavPathPrefix(item);
       return pathname === pathPrefix || pathname.startsWith(`${pathPrefix}/`);
     });
   }, [navigation, pathname]);
@@ -28,18 +29,21 @@ export const ViewRoute = ({ navigation }: ViewRouteProps) => {
   }
   // Calculate the relative path from the navItem.path
   // e.g. if item.path is "docs" and pathname is "/docs/intro", subPath is "intro"
-  const pathPrefix = `/${navItem.path}`;
+  const pathPrefix = getNavPathPrefix(navItem);
   const subPath = pathname.length > pathPrefix.length ? pathname.slice(pathPrefix.length + 1) : '';
 
-  // Construct the final URL for the iframe
-  let finalUrl = navItem.url;
-  if (subPath) {
-    const baseUrl = navItem.url.endsWith('/') ? navItem.url : `${navItem.url}/`;
-    finalUrl = `${baseUrl}${subPath}`;
+  // Effective URL: url string or app-path URL when item uses a component
+  const baseUrl = getEffectiveUrl(navItem);
+  let finalUrl = baseUrl;
+  if (!navItem.component && subPath && navItem.url) {
+    const base = navItem.url.endsWith('/') ? navItem.url : `${navItem.url}/`;
+    finalUrl = `${base}${subPath}`;
   }
+
   return (
     <ContentView
       url={finalUrl}
+      baseUrl={baseUrl}
       pathPrefix={navItem.path}
       navItem={navItem}
     />

package/src/components/ui/drawer.tsx

@@ -79,9 +79,10 @@ const DrawerContent = forwardRef<ComponentRef<typeof VaulDrawer.Content>, Drawer
     const isVertical = pos === 'top' || pos === 'bottom';
     // Set dimension via inline style; use both width/height and max so Vaul/defaults don't override.
     const effectiveSize = size?.trim() || (isVertical ? '80vh' : '80vw');
+    // Use min() to ensure drawer doesn't exceed viewport on mobile devices
     const sizeStyle = isVertical
-      ? { height: effectiveSize, maxHeight: effectiveSize }
-      : { width: effectiveSize, maxWidth: effectiveSize };
+      ? { height: effectiveSize, maxHeight: `min(${effectiveSize}, 100vh)` }
+      : { width: effectiveSize, maxWidth: `min(${effectiveSize}, 100%)` };
     return (
       <DrawerPortal>
         <DrawerOverlay />

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,52 @@
+import { type ComponentPropsWithoutRef, type ElementRef, forwardRef, type ReactNode } from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { cn } from '../../lib/utils';
+import { Z_INDEX } from '../../lib/z-index';
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = forwardRef<
+  ElementRef<typeof TooltipPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 6, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'overflow-hidden rounded-md border border-border bg-popover px-2.5 py-1.5 text-xs text-popover-foreground shadow-md',
+        'animate-none',
+        className,
+      )}
+      style={{ zIndex: Z_INDEX.TOOLTIP }}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export interface AppBarTooltipProps {
+  label: string;
+  children: ReactNode;
+}
+
+/** Themed tooltip for app-bar end buttons: no arrow, no animation. */
+function AppBarTooltip({ label, children }: AppBarTooltipProps) {
+  return (
+    <Tooltip delayDuration={200}>
+      <TooltipTrigger asChild>{children}</TooltipTrigger>
+      <TooltipContent
+        side="bottom"
+        align="center"
+      >
+        {label}
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, AppBarTooltip };

package/src/constants/urls.ts

@@ -1,4 +1,6 @@
 export default {
   settings: '/__settings',
   cookiePreferences: '/__cookie-preferences',
+  /** Base path for navigation items that use a React component; full URL is /__app/{path}. */
+  appPath: '/__app',
 };

package/src/features/config/ConfigProvider.ts

@@ -1,11 +1,15 @@
 import { createContext, useState, createElement, type ReactNode } from 'react';
+import type { ComponentType } from 'react';
 import { getLogger } from '@shellui/sdk';
 import type { ShellUIConfig } from './types';
+import shelluiConfig, { shelluiComponents } from '@shellui/config';
 
 const logger = getLogger('shellcore');
 
 export interface ConfigContextValue {
   config: ShellUIConfig;
+  /** Map of nav path -> component for /__app/:path (injected when componentPath is set in config). */
+  shelluiComponents: Record<string, ComponentType>;
 }
 
 export const ConfigContext = createContext<ConfigContextValue | null>(null);
@@ -19,93 +23,33 @@ export interface ConfigProviderProps {
 let configLogged = false;
 
 /**
- * Loads ShellUI config from __SHELLUI_CONFIG__ (injected by Vite at build time)
- * and provides it via context. Children can use useConfig() to read config.
+ * Provides ShellUI config (loaded from @shellui/config at build time) via context.
+ * Children can use useConfig() to read config.
  */
-
 export function ConfigProvider(props: ConfigProviderProps): ReturnType<typeof createElement> {
   const [config] = useState<ShellUIConfig>(() => {
     try {
-      // __SHELLUI_CONFIG__ is replaced by Vite at build time via define
-      // After replacement, it will be a JSON string like: "{\"title\":\"shellui\",...}"
-      // Vite's define inserts the string value directly, so we only need to parse once
-      // Access it directly (no typeof check) so Vite can statically analyze and replace it
-      // @ts-expect-error - __SHELLUI_CONFIG__ is injected by Vite at build time
-      let configValue: unknown = __SHELLUI_CONFIG__;
-
-      // In development, if __SHELLUI_CONFIG__ is undefined, it might not have been replaced by Vite
-      // This can happen if the Vite define configuration isn't working properly
-      if (configValue === undefined && typeof window !== 'undefined') {
-        // Try to get it from window (fallback for dev mode issues)
-        const g = window as unknown as { __SHELLUI_CONFIG__?: unknown };
-        if (g.__SHELLUI_CONFIG__ !== undefined) {
-          configValue = g.__SHELLUI_CONFIG__;
-        }
-      }
-
-      // After Vite replacement, configValue will be a JSON string
-      // Example: "{\"title\":\"shellui\"}" -> parse -> {title: "shellui"}
-      if (configValue !== undefined && configValue !== null && typeof configValue === 'string') {
-        try {
-          // Parse the JSON string to get the config object
-          const parsedConfig: ShellUIConfig = JSON.parse(configValue);
-          if (typeof window !== 'undefined' && parsedConfig.runtime === 'tauri') {
-            (window as Window & { __SHELLUI_TAURI__?: boolean }).__SHELLUI_TAURI__ = true;
-          }
-
-          // Log in dev mode to help debug (only once per page load)
-          if (process.env.NODE_ENV === 'development' && !configLogged) {
-            configLogged = true;
-            logger.info('Config loaded from __SHELLUI_CONFIG__', {
-              hasNavigation: !!parsedConfig.navigation,
-              navigationItems: parsedConfig.navigation?.length || 0,
-            });
-          }
-
-          return parsedConfig;
-        } catch (parseError) {
-          logger.error('Failed to parse config JSON:', { error: parseError });
-          logger.error('Config value (first 200 chars):', { value: configValue.substring(0, 200) });
-          // Fall through to return empty config
-        }
+      const resolved = shelluiConfig ?? ({} as ShellUIConfig);
+      if (typeof window !== 'undefined' && resolved.runtime === 'tauri') {
+        (window as Window & { __SHELLUI_TAURI__?: boolean }).__SHELLUI_TAURI__ = true;
       }
-
-      // Fallback: try to read from globalThis (for edge cases or if define didn't work)
-      // This handles cases where Vite's define didn't work or config needs to be injected at runtime
-      const g = globalThis as unknown as { __SHELLUI_CONFIG__?: unknown };
-      if (typeof g.__SHELLUI_CONFIG__ !== 'undefined' && configValue === undefined) {
-        const fallbackValue = g.__SHELLUI_CONFIG__;
-        const parsedConfig: ShellUIConfig =
-          typeof fallbackValue === 'string'
-            ? JSON.parse(fallbackValue)
-            : (fallbackValue as ShellUIConfig);
-        if (typeof window !== 'undefined' && parsedConfig.runtime === 'tauri') {
-          (window as Window & { __SHELLUI_TAURI__?: boolean }).__SHELLUI_TAURI__ = true;
-        }
-
-        if (process.env.NODE_ENV === 'development') {
-          logger.warn('Config loaded from globalThis fallback (define may not have worked)');
-        }
-
-        return parsedConfig;
+      if (process.env.NODE_ENV === 'development' && !configLogged) {
+        configLogged = true;
+        logger.info('Config loaded from @shellui/config', {
+          hasNavigation: !!resolved.navigation,
+          navigationItems: resolved.navigation?.length || 0,
+        });
       }
-
-      // Return empty config if __SHELLUI_CONFIG__ is undefined (fallback for edge cases)
-      // This ensures the provider always provides a value, preventing "useConfig must be used within ConfigProvider" errors
-      if (process.env.NODE_ENV === 'development') {
-        logger.warn(
-          'Config not found. Using empty config. Make sure shellui.config.ts is properly loaded and Vite define is configured correctly.',
-        );
-      }
-      return {} as ShellUIConfig;
+      return resolved;
     } catch (err) {
       logger.error('Failed to load ShellUI config:', { error: err });
-      // Don't throw - return empty config instead to prevent app crash
       return {} as ShellUIConfig;
     }
   });
 
-  // Always provide a value - never null - to prevent "useConfig must be used within ConfigProvider" errors
-  const value: ConfigContextValue = { config };
+  const value: ConfigContextValue = {
+    config,
+    shelluiComponents: typeof shelluiComponents !== 'undefined' ? shelluiComponents : {},
+  };
   return createElement(ConfigContext.Provider, { value }, props.children);
 }

package/src/features/config/shellui-config.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Type declaration for the virtual @shellui/config module.
+ * The CLI injects this module at build time via Vite (virtual:shellui-config).
+ * When nav items have componentPath, the CLI also injects shelluiComponents for /__app/:path routes.
+ */
+declare module '@shellui/config' {
+  import type { ComponentType } from 'react';
+  import type { ShellUIConfig } from './types';
+  export const shelluiConfig: ShellUIConfig;
+  /** Map of nav path -> component for component-based items (injected when componentPath is set). */
+  export const shelluiComponents: Record<string, ComponentType>;
+  export default shelluiConfig;
+}

package/src/features/config/types.ts

@@ -1,3 +1,5 @@
+import type { ComponentType } from 'react';
+
 // Language-specific label/title
 export type LocalizedString =
   | string
@@ -10,13 +12,18 @@ export type LocalizedString =
 /** Drawer position when opening a link in a drawer (optional, used when openIn === 'drawer'). */
 export type DrawerPosition = 'top' | 'bottom' | 'left' | 'right';
 
-/** Layout mode: 'sidebar' (default) shows navigation sidebar; 'fullscreen' shows only content area; 'windows' shows a taskbar with start menu and multi-window desktop. */
-export type LayoutType = 'sidebar' | 'fullscreen' | 'windows';
+/** Layout mode: 'sidebar' (default) shows navigation sidebar; 'fullscreen' shows only content area; 'windows' shows a taskbar with start menu and multi-window desktop; 'app-bar' shows a compact top bar with select menu for start links and icon-only end links. */
+export type LayoutType = 'sidebar' | 'fullscreen' | 'windows' | 'app-bar';
 
 export interface NavigationItem {
   label: string | LocalizedString;
   path: string;
-  url: string;
+  /** URL to load in the content area (iframe). Omit when using component; then the app-path URL is used. */
+  url?: string;
+  /** React component to render for this item. When set, a URL under the app-path is generated so the content can be loaded in an iframe like URL-based items. The CLI infers the component module path from your config file imports so you don't need to set componentPath. */
+  component?: ComponentType;
+  /** @internal Set by the CLI when loading config (inferred from component + config file imports). Only needed if you bypass the CLI. */
+  componentPath?: string;
   icon?: string; // Path to SVG icon file (e.g., '/icons/book-open.svg')
   /** When true, hide this item from the sidebar and 404 page; route remains valid and item still appears in Develop settings. */
   hidden?: boolean;
@@ -30,6 +37,8 @@ export interface NavigationItem {
   drawerPosition?: DrawerPosition;
   /** Sidebar position: 'start' (default) or 'end'. End items are rendered in the sidebar footer. */
   position?: 'start' | 'end';
+  /** URL to display as a settings panel in Settings > Applications. When set, the nav item appears in the Applications group. */
+  settings?: string;
 }
 
 export interface NavigationGroup {
@@ -185,6 +194,8 @@ export interface ShellUIConfig {
   language?: string | string[]; // Single language code or array of enabled language codes (e.g., 'en' or ['en', 'fr'])
   /** Layout mode: 'sidebar' (default) or 'fullscreen'. Fullscreen shows only content with no navigation. */
   layout?: LayoutType;
+  /** When set, opening the app at "/" redirects to this path (e.g. "/playground"). */
+  start_url?: string;
   navigation?: (NavigationItem | NavigationGroup)[];
   themes?: ThemeDefinition[]; // Custom themes to register
   defaultTheme?: string; // Default theme name to use

package/src/features/config/useConfig.ts

@@ -10,22 +10,13 @@ export function useConfig(): ConfigContextValue {
   const context = useContext(ConfigContext);
   if (context === null) {
     // This error should never happen if ConfigProvider is properly wrapping the app
-    // If you see this error, check that:
-    // 1. Your component is rendered inside a <ConfigProvider> tree
-    // 2. The ConfigProvider is mounted before components that use useConfig()
-    // 3. Vite's define configuration is working correctly (check __SHELLUI_CONFIG__)
     const error = new Error(
       'useConfig must be used within a ConfigProvider. ' +
-        'Make sure your app is wrapped with <ConfigProvider> and that Vite define is configured correctly.',
+        'Make sure your app is wrapped with <ConfigProvider>.',
     );
     if (typeof window !== 'undefined' && process.env.NODE_ENV === 'development') {
       // eslint-disable-next-line no-console
       console.error('[ShellUI] ConfigProvider error:', error);
-      // eslint-disable-next-line no-console
-      console.error(
-        '[ShellUI] Check that __SHELLUI_CONFIG__ is defined:',
-        typeof (window as unknown as { __SHELLUI_CONFIG__?: unknown }).__SHELLUI_CONFIG__,
-      );
     }
     throw error;
   }

package/src/features/cookieConsent/cookieConsent.ts

@@ -1,13 +1,11 @@
 import type { ShellUIConfig } from '../config/types';
+import shelluiConfig from '@shellui/config';
 
 const STORAGE_KEY = 'shellui:settings';
 
 function getConfig(): ShellUIConfig | undefined {
   if (typeof globalThis === 'undefined') return undefined;
-  const g = globalThis as unknown as { __SHELLUI_CONFIG__?: string | ShellUIConfig };
-  const raw = g.__SHELLUI_CONFIG__;
-  if (raw === null || raw === undefined) return undefined;
-  return typeof raw === 'string' ? (JSON.parse(raw) as ShellUIConfig) : raw;
+  return shelluiConfig ?? undefined;
 }
 
 function getStoredCookieConsent(): {