@fluid-app/rep-sdk 0.1.8 → 0.1.10

package/dist/index.mjs

@@ -0,0 +1,2921 @@
+import { C as toNavigationItem, D as createDefaultAuthRedirect, E as DEFAULT_AUTH_URL, S as transformThemes, T as toScreenDefinition, _ as createFluidClient, a as useMessagingConfig, b as getActiveThemeId, c as FluidProvider, d as FluidAuthProvider, f as useFluidAuthContext, g as ApiError, h as themes_exports, i as createFluidFileUploader, l as useFluidContext, m as useThemeContext, o as useMessagingAuth, p as FluidThemeProvider, r as messagingScreenPropertySchema, s as useFluidApi, t as MessagingScreen, u as DEFAULT_SDK_WIDGET_REGISTRY, v as isApiError, w as normalizeComponentTree, x as transformManifestToRepAppData, y as buildThemeDefinition } from "./MessagingScreen-xO9YudMx.mjs";
+import { t as CoreScreenPlaceholder } from "./CoreScreenPlaceholder-D93ZYKt2.mjs";
+import { r as contactsScreenPropertySchema, t as ContactsScreen } from "./ContactsScreen-CB6l0Lf1.mjs";
+import { r as ordersScreenPropertySchema, t as OrdersScreen } from "./OrdersScreen-DB1v051q.mjs";
+import { r as customersScreenPropertySchema, t as CustomersScreen } from "./CustomersScreen-BEar6Leg.mjs";
+import { r as productsScreenPropertySchema, t as ProductsScreen } from "./ProductsScreen-nVDsY6kf.mjs";
+import * as React$1 from "react";
+import { createContext, forwardRef, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { AUTH_CONSTANTS, STORAGE_KEYS, URL_PARAMS, USER_TYPES, cleanTokenFromUrl, clearTokens, decodeToken, extractAllTokensFromUrl, extractCompanyTokenFromUrl, extractTokenFromUrl, getStoredToken, getTokenExpiration, getTokenTimeRemaining, hasStoredToken, hasTokenInUrl, isTokenExpired, isUserType, isValidToken, storeToken, validateToken } from "@fluid-app/auth";
+import { applyTheme as applyTheme$1, removeAllThemes as removeAllThemes$1, resolveTheme as resolveTheme$1 } from "@fluid-app/rep-core/theme";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRegistry } from "@fluid-app/rep-widgets/contexts";
+import { createScreen, createWidgetFromShareable, createWidgetRegistry, groupChildrenByColumn } from "@fluid-app/rep-core/widget-utils";
+import { AlertWidget, CalendarWidget, CarouselWidget, CatchUpWidget, ChartWidget, ContainerWidget, EmbedWidget, ImageWidget, LayoutWidget, ListWidget, MySiteWidget, NestedWidget, QuickShareWidget, RecentActivityWidget, SpacerWidget, TableWidget, TextWidget, ToDoWidget, VideoWidget, alertWidgetPropertySchema, calendarWidgetPropertySchema, carouselWidgetPropertySchema, catchUpWidgetPropertySchema, chartWidgetPropertySchema, containerWidgetPropertySchema, embedWidgetPropertySchema, imageWidgetPropertySchema, layoutWidgetPropertySchema, listWidgetPropertySchema, mySiteWidgetPropertySchema, nestedWidgetPropertySchema, quickShareWidgetPropertySchema, recentActivityWidgetPropertySchema, spacerWidgetPropertySchema, tableWidgetPropertySchema, textWidgetPropertySchema, toDoWidgetPropertySchema, videoWidgetPropertySchema, widgetPropertySchemas } from "@fluid-app/rep-widgets/widgets";
+import { WIDGET_TYPE_NAMES, assertDefined, assertNever, isWidgetType, isWidgetTypeName, sectionLayoutConfig } from "@fluid-app/rep-core/types";
+import { PROPERTY_FIELD_TYPES, gapValues, isPropertyFieldType } from "@fluid-app/rep-core/registries";
+import { AppShellLayout } from "@fluid-app/rep-core/shell/AppShellLayout";
+import { ThemeModeProvider, ThemeModeProvider as ThemeModeProvider$1, getThemeModeAttribute, useThemeMode, useThemeMode as useThemeMode$1 } from "@fluid-app/rep-core/shell/ThemeModeContext";
+import { getSystemNavigationBySection, isSystemNavigationItem, normalizeSlug } from "@fluid-app/rep-core/navigation/system-navigation-items";
+import { ScreenHeader } from "@fluid-app/rep-core/shell/ScreenHeader";
+import { ScreenHeaderProvider } from "@fluid-app/rep-core/shell/ScreenHeaderContext";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faEllipsis } from "@fortawesome/pro-regular-svg-icons/faEllipsis";
+import { faXmark } from "@fortawesome/pro-regular-svg-icons/faXmark";
+import { RepIcon } from "@fluid-app/rep-core/components/RepIcon";
+import { SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from "@fluid-app/rep-core/shell/sidebar";
+import { faBars } from "@fortawesome/pro-regular-svg-icons/faBars";
+import { faSun } from "@fortawesome/pro-regular-svg-icons/faSun";
+import { faMoon } from "@fortawesome/pro-regular-svg-icons/faMoon";
+import { faTableCellsLarge } from "@fortawesome/pro-regular-svg-icons/faTableCellsLarge";
+import { DataAwareWidget } from "@fluid-app/rep-core/data-sources/DataAwareWidget";
+//#region src/types/page-template.ts
+/**
+* Built-in page category IDs
+*/
+const PAGE_CATEGORIES = {
+	CORE: "core",
+	COMMERCE: "commerce",
+	COMMUNICATION: "communication",
+	DATA: "data",
+	CUSTOM: "custom"
+};
+//#endregion
+//#region src/registries/page-template-registry.ts
+/**
+* Registry for managing reusable page templates.
+*
+* The registry provides a central store for page templates that can be
+* shared across multiple navigations. Core pages (like Messaging, Contacts)
+* are pre-registered and cannot be removed.
+*
+* @example
+* ```ts
+* // Register a custom page template
+* PageTemplateRegistry.register({
+*   id: 'custom-dashboard',
+*   slug: 'dashboard',
+*   name: 'Custom Dashboard',
+*   category: 'custom',
+*   version: '1.0.0',
+*   component_tree: [{ type: 'TextWidget', props: { text: 'Hello' } }],
+* });
+*
+* // Get a template by ID
+* const template = PageTemplateRegistry.get('custom-dashboard');
+*
+* // List all templates in a category
+* const corePages = PageTemplateRegistry.getByCategory('core');
+* ```
+*/
+var PageTemplateRegistryImpl = class {
+	templates = /* @__PURE__ */ new Map();
+	categories = [];
+	constructor() {
+		this.categories = [
+			{
+				id: PAGE_CATEGORIES.CORE,
+				label: "Core Features",
+				icon: "star"
+			},
+			{
+				id: PAGE_CATEGORIES.COMMERCE,
+				label: "Commerce",
+				icon: "shopping-cart"
+			},
+			{
+				id: PAGE_CATEGORIES.COMMUNICATION,
+				label: "Communication",
+				icon: "message-circle"
+			},
+			{
+				id: PAGE_CATEGORIES.DATA,
+				label: "Data & Analytics",
+				icon: "bar-chart"
+			},
+			{
+				id: PAGE_CATEGORIES.CUSTOM,
+				label: "Custom",
+				icon: "puzzle"
+			}
+		];
+	}
+	/**
+	* Register a new page template.
+	* @throws Error if a template with the same ID already exists
+	*/
+	register(template) {
+		if (this.templates.has(template.id)) throw new Error(`Page template with ID "${template.id}" is already registered`);
+		this.templates.set(template.id, template);
+	}
+	/**
+	* Unregister a page template by ID.
+	* Core templates cannot be unregistered.
+	* @returns true if the template was removed, false if it didn't exist or is a core template
+	*/
+	unregister(id) {
+		const template = this.templates.get(id);
+		if (!template) return false;
+		if (template.isCore) {
+			console.warn(`Cannot unregister core page template "${id}". Core templates are required.`);
+			return false;
+		}
+		return this.templates.delete(id);
+	}
+	/**
+	* Get a page template by ID.
+	*/
+	get(id) {
+		return this.templates.get(id);
+	}
+	/**
+	* Get all page templates in a specific category.
+	*/
+	getByCategory(category) {
+		return Array.from(this.templates.values()).filter((t) => t.category === category);
+	}
+	/**
+	* List all registered page templates.
+	*/
+	listAll() {
+		return Array.from(this.templates.values());
+	}
+	/**
+	* List all core page templates (isCore: true).
+	*/
+	listCore() {
+		return Array.from(this.templates.values()).filter((t) => t.isCore);
+	}
+	/**
+	* List all non-core page templates.
+	*/
+	listOptional() {
+		return Array.from(this.templates.values()).filter((t) => !t.isCore);
+	}
+	/**
+	* List all registered categories.
+	*/
+	listCategories() {
+		return [...this.categories];
+	}
+	/**
+	* Add a custom category.
+	*/
+	addCategory(category) {
+		if (this.categories.some((c) => c.id === category.id)) {
+			console.warn(`Category with ID "${category.id}" already exists`);
+			return;
+		}
+		this.categories.push(category);
+	}
+	/**
+	* Check if a template exists by ID.
+	*/
+	has(id) {
+		return this.templates.has(id);
+	}
+	/**
+	* Get the count of registered templates.
+	*/
+	get size() {
+		return this.templates.size;
+	}
+	/**
+	* Clear all non-core templates.
+	* Useful for testing or resetting the registry.
+	*/
+	clearNonCore() {
+		for (const [id, template] of this.templates) if (!template.isCore) this.templates.delete(id);
+	}
+};
+/**
+* Global page template registry singleton.
+*
+* This registry is automatically populated with core page templates
+* (Messaging, Contacts) when the SDK is imported.
+*/
+const PageTemplateRegistry = new PageTemplateRegistryImpl();
+//#endregion
+//#region src/core/resolve-pages.ts
+/**
+* Apply prop overrides to widgets in a component tree.
+* Recursively walks widget.props.children so overrides targeting
+* nested widgets (inside LayoutWidget, ContainerWidget, etc.) are applied.
+*
+* @param componentTree - The original component tree from the page template
+* @param overrides - Array of widget-specific prop overrides
+* @returns A new component tree with overrides applied
+*/
+function applyOverrides(componentTree, overrides) {
+	if (!overrides.length) return [...componentTree];
+	const overrideMap = new Map(overrides.map((o) => [o.widget_id, o.props]));
+	return componentTree.map((widget) => applyWidgetOverrides(widget, overrideMap));
+}
+/**
+* Recursively apply overrides to a widget and its children.
+* Only clones widgets that actually change (have an override or contain children that might).
+*/
+function applyWidgetOverrides(widget, overrideMap) {
+	const override = widget.id ? overrideMap.get(widget.id) : void 0;
+	const children = widget.props.children;
+	const hasChildren = Array.isArray(children) && children.length > 0;
+	if (!override && !hasChildren) return widget;
+	const newProps = override ? {
+		...widget.props,
+		...override
+	} : { ...widget.props };
+	if (hasChildren) newProps.children = children.map((child) => applyWidgetOverrides(child, overrideMap));
+	return {
+		...widget,
+		props: newProps
+	};
+}
+/**
+* Resolve a page reference to a screen definition.
+*
+* @param ref - The page reference from navigation
+* @returns A ScreenDefinition or undefined if the template doesn't exist
+*/
+function resolvePageReference(ref) {
+	const template = PageTemplateRegistry.get(ref.page_template_id);
+	if (!template) {
+		console.warn(`Page template "${ref.page_template_id}" not found in registry`);
+		return;
+	}
+	const componentTree = ref.overrides ? applyOverrides(template.component_tree, ref.overrides) : [...template.component_tree];
+	return {
+		id: ref.screen_id,
+		slug: template.slug,
+		name: template.name,
+		component_tree: componentTree
+	};
+}
+/**
+* Resolve all page references and local screens into a unified screen list.
+*
+* This function merges:
+* 1. Screen definitions from page_refs (shared templates)
+* 2. Local screen definitions (for backwards compatibility and custom screens)
+*
+* When a screen_id appears in both page_refs and screens, the local screen
+* takes precedence (allows local overrides of template pages).
+*
+* @param navigation - The navigation configuration
+* @returns A unified array of ScreenDefinition objects
+*
+* @example
+* ```ts
+* const navigation: Navigation = {
+*   definition_id: 1,
+*   id: 1,
+*   name: "Main Nav",
+*   navigation_items: [...],
+*   screens: [
+*     // Local custom screen
+*     { id: 1, slug: "home", name: "Home", component_tree: [...] }
+*   ],
+*   page_refs: [
+*     // Reference to shared messaging template
+*     { page_template_id: "core-messaging", screen_id: 2 }
+*   ],
+* };
+*
+* const allScreens = resolveNavigationPages(navigation);
+* // Returns: [home screen, messaging screen from template]
+* ```
+*/
+function resolveNavigationPages(navigation) {
+	const localScreenIds = new Set(navigation.screens.map((s) => s.id));
+	const result = [...navigation.screens];
+	if (navigation.page_refs) for (const ref of navigation.page_refs) {
+		if (localScreenIds.has(ref.screen_id)) continue;
+		const screen = resolvePageReference(ref);
+		if (screen) result.push(screen);
+	}
+	return result;
+}
+/**
+* Get all available page templates for use in navigation.
+*
+* @returns Array of page templates from the registry
+*/
+function getAvailablePageTemplates() {
+	return PageTemplateRegistry.listAll();
+}
+/**
+* Get core page templates that are required for basic functionality.
+*
+* @returns Array of core page templates
+*/
+function getCorePageTemplates() {
+	return PageTemplateRegistry.listCore();
+}
+/**
+* Get optional page templates that can be added to navigation.
+*
+* @returns Array of optional (non-core) page templates
+*/
+function getOptionalPageTemplates() {
+	return PageTemplateRegistry.listOptional();
+}
+/**
+* Check if a navigation has all required core pages.
+*
+* @param navigation - The navigation to check
+* @returns Object with validation result and missing page IDs
+*/
+function validateNavigationPages(navigation) {
+	const corePages = PageTemplateRegistry.listCore();
+	const referencedTemplateIds = new Set(navigation.page_refs?.map((ref) => ref.page_template_id) ?? []);
+	const missingCorePages = corePages.filter((page) => !referencedTemplateIds.has(page.id)).map((page) => page.id);
+	return {
+		valid: missingCorePages.length === 0,
+		missingCorePages
+	};
+}
+//#endregion
+//#region src/providers/PageTemplateProvider.tsx
+/** Stable empty array for the default `templates` prop (avoids new reference each render) */
+const EMPTY_TEMPLATES = [];
+const PageTemplateContext = createContext(null);
+/**
+* Provider for page template resolution.
+*
+* This provider:
+* 1. Registers any custom templates passed via props
+* 2. Provides methods for resolving navigation pages
+* 3. Cleans up custom templates on unmount
+*
+* @example
+* ```tsx
+* // With custom templates
+* const customTemplates: PageTemplate[] = [
+*   {
+*     id: 'custom-dashboard',
+*     slug: 'dashboard',
+*     name: 'Dashboard',
+*     category: 'custom',
+*     version: '1.0.0',
+*     component_tree: [{ type: 'TextWidget', props: { text: 'Custom Dashboard' } }],
+*   },
+* ];
+*
+* <PageTemplateProvider templates={customTemplates}>
+*   <App />
+* </PageTemplateProvider>
+*
+* // Without custom templates (uses only core templates)
+* <PageTemplateProvider>
+*   <App />
+* </PageTemplateProvider>
+* ```
+*/
+function PageTemplateProvider({ children, templates = EMPTY_TEMPLATES }) {
+	const registeredIds = useRef([]);
+	useEffect(() => {
+		const registered = [];
+		for (const template of templates) if (!PageTemplateRegistry.has(template.id)) try {
+			PageTemplateRegistry.register(template);
+			registered.push(template.id);
+		} catch (error) {
+			console.warn(`Failed to register page template "${template.id}":`, error);
+		}
+		registeredIds.current = registered;
+		return () => {
+			for (const id of registeredIds.current) PageTemplateRegistry.unregister(id);
+			registeredIds.current = [];
+		};
+	}, [templates.map((t) => t.id).join(",")]);
+	const contextValue = useMemo(() => ({
+		resolvePages: resolveNavigationPages,
+		listTemplates: () => PageTemplateRegistry.listAll(),
+		getTemplate: (id) => PageTemplateRegistry.get(id),
+		hasTemplate: (id) => PageTemplateRegistry.has(id)
+	}), []);
+	return /* @__PURE__ */ jsx(PageTemplateContext.Provider, {
+		value: contextValue,
+		children
+	});
+}
+/**
+* Hook to access page template functionality.
+*
+* @throws Error if used outside of PageTemplateProvider
+*
+* @example
+* ```tsx
+* function NavigationRenderer({ navigation }: { navigation: Navigation }) {
+*   const { resolvePages } = usePageTemplates();
+*   const screens = resolvePages(navigation);
+*
+*   return (
+*     <div>
+*       {screens.map((screen) => (
+*         <Screen key={screen.id} definition={screen} />
+*       ))}
+*     </div>
+*   );
+* }
+* ```
+*/
+function usePageTemplates() {
+	const context = useContext(PageTemplateContext);
+	if (!context) throw new Error("usePageTemplates must be used within a PageTemplateProvider");
+	return context;
+}
+/**
+* Hook to resolve navigation pages directly.
+* Convenience wrapper around usePageTemplates().resolvePages.
+*
+* @param navigation - The navigation to resolve
+* @returns Array of resolved screen definitions
+*/
+function useResolvedPages(navigation) {
+	const { resolvePages } = usePageTemplates();
+	return useMemo(() => resolvePages(navigation), [resolvePages, navigation]);
+}
+//#endregion
+//#region src/hooks/use-fluid-profile.ts
+/**
+* Query key for profile data
+*/
+const PROFILE_QUERY_KEY = ["fluid", "profile"];
+/**
+* Hook to fetch the rep portal profile (themes, navigation, screens)
+*
+* @example
+* ```tsx
+* function Navigation() {
+*   const { data: profile, isLoading } = useFluidProfile();
+*
+*   if (isLoading) return <Spinner />;
+*
+*   return (
+*     <nav>
+*       {profile?.navigation.navigation_items.map(item => (
+*         <NavItem key={item.id} item={item} />
+*       ))}
+*     </nav>
+*   );
+* }
+* ```
+*/
+function useFluidProfile() {
+	const api = useFluidApi();
+	return useQuery({
+		queryKey: PROFILE_QUERY_KEY,
+		queryFn: () => api.profile.get()
+	});
+}
+//#endregion
+//#region ../../../node_modules/.pnpm/@tanstack+query-core@5.90.12/node_modules/@tanstack/query-core/build/modern/timeoutManager.js
+var defaultTimeoutProvider = {
+	setTimeout: (callback, delay) => setTimeout(callback, delay),
+	clearTimeout: (timeoutId) => clearTimeout(timeoutId),
+	setInterval: (callback, delay) => setInterval(callback, delay),
+	clearInterval: (intervalId) => clearInterval(intervalId)
+};
+var TimeoutManager = class {
+	#provider = defaultTimeoutProvider;
+	#providerCalled = false;
+	setTimeoutProvider(provider) {
+		if (process.env.NODE_ENV !== "production") {
+			if (this.#providerCalled && provider !== this.#provider) console.error(`[timeoutManager]: Switching provider after calls to previous provider might result in unexpected behavior.`, {
+				previous: this.#provider,
+				provider
+			});
+		}
+		this.#provider = provider;
+		if (process.env.NODE_ENV !== "production") this.#providerCalled = false;
+	}
+	setTimeout(callback, delay) {
+		if (process.env.NODE_ENV !== "production") this.#providerCalled = true;
+		return this.#provider.setTimeout(callback, delay);
+	}
+	clearTimeout(timeoutId) {
+		this.#provider.clearTimeout(timeoutId);
+	}
+	setInterval(callback, delay) {
+		if (process.env.NODE_ENV !== "production") this.#providerCalled = true;
+		return this.#provider.setInterval(callback, delay);
+	}
+	clearInterval(intervalId) {
+		this.#provider.clearInterval(intervalId);
+	}
+};
+new TimeoutManager();
+function systemSetTimeoutZero(callback) {
+	setTimeout(callback, 0);
+}
+typeof window === "undefined" || "Deno" in globalThis;
+function matchQuery(filters, query) {
+	const { type = "all", exact, fetchStatus, predicate, queryKey, stale } = filters;
+	if (queryKey) {
+		if (exact) {
+			if (query.queryHash !== hashQueryKeyByOptions(queryKey, query.options)) return false;
+		} else if (!partialMatchKey(query.queryKey, queryKey)) return false;
+	}
+	if (type !== "all") {
+		const isActive = query.isActive();
+		if (type === "active" && !isActive) return false;
+		if (type === "inactive" && isActive) return false;
+	}
+	if (typeof stale === "boolean" && query.isStale() !== stale) return false;
+	if (fetchStatus && fetchStatus !== query.state.fetchStatus) return false;
+	if (predicate && !predicate(query)) return false;
+	return true;
+}
+function hashQueryKeyByOptions(queryKey, options) {
+	return (options?.queryKeyHashFn || hashKey)(queryKey);
+}
+function hashKey(queryKey) {
+	return JSON.stringify(queryKey, (_, val) => isPlainObject(val) ? Object.keys(val).sort().reduce((result, key) => {
+		result[key] = val[key];
+		return result;
+	}, {}) : val);
+}
+function partialMatchKey(a, b) {
+	if (a === b) return true;
+	if (typeof a !== typeof b) return false;
+	if (a && b && typeof a === "object" && typeof b === "object") return Object.keys(b).every((key) => partialMatchKey(a[key], b[key]));
+	return false;
+}
+function isPlainObject(o) {
+	if (!hasObjectPrototype(o)) return false;
+	const ctor = o.constructor;
+	if (ctor === void 0) return true;
+	const prot = ctor.prototype;
+	if (!hasObjectPrototype(prot)) return false;
+	if (!prot.hasOwnProperty("isPrototypeOf")) return false;
+	if (Object.getPrototypeOf(o) !== Object.prototype) return false;
+	return true;
+}
+function hasObjectPrototype(o) {
+	return Object.prototype.toString.call(o) === "[object Object]";
+}
+//#endregion
+//#region ../../../node_modules/.pnpm/@tanstack+query-core@5.90.12/node_modules/@tanstack/query-core/build/modern/notifyManager.js
+var defaultScheduler = systemSetTimeoutZero;
+function createNotifyManager() {
+	let queue = [];
+	let transactions = 0;
+	let notifyFn = (callback) => {
+		callback();
+	};
+	let batchNotifyFn = (callback) => {
+		callback();
+	};
+	let scheduleFn = defaultScheduler;
+	const schedule = (callback) => {
+		if (transactions) queue.push(callback);
+		else scheduleFn(() => {
+			notifyFn(callback);
+		});
+	};
+	const flush = () => {
+		const originalQueue = queue;
+		queue = [];
+		if (originalQueue.length) scheduleFn(() => {
+			batchNotifyFn(() => {
+				originalQueue.forEach((callback) => {
+					notifyFn(callback);
+				});
+			});
+		});
+	};
+	return {
+		batch: (callback) => {
+			let result;
+			transactions++;
+			try {
+				result = callback();
+			} finally {
+				transactions--;
+				if (!transactions) flush();
+			}
+			return result;
+		},
+		batchCalls: (callback) => {
+			return (...args) => {
+				schedule(() => {
+					callback(...args);
+				});
+			};
+		},
+		schedule,
+		setNotifyFunction: (fn) => {
+			notifyFn = fn;
+		},
+		setBatchNotifyFunction: (fn) => {
+			batchNotifyFn = fn;
+		},
+		setScheduler: (fn) => {
+			scheduleFn = fn;
+		}
+	};
+}
+var notifyManager = createNotifyManager();
+//#endregion
+//#region ../../../node_modules/.pnpm/@tanstack+query-persist-client-core@5.91.11/node_modules/@tanstack/query-persist-client-core/build/modern/createPersister.js
+var PERSISTER_KEY_PREFIX = "tanstack-query";
+function experimental_createQueryPersister({ storage, buster = "", maxAge = 1e3 * 60 * 60 * 24, serialize = JSON.stringify, deserialize = JSON.parse, prefix = PERSISTER_KEY_PREFIX, refetchOnRestore = true, filters }) {
+	function isExpiredOrBusted(persistedQuery) {
+		if (persistedQuery.state.dataUpdatedAt) {
+			const expired = Date.now() - persistedQuery.state.dataUpdatedAt > maxAge;
+			const busted = persistedQuery.buster !== buster;
+			if (expired || busted) return true;
+			return false;
+		}
+		return true;
+	}
+	async function retrieveQuery(queryHash, afterRestoreMacroTask) {
+		if (storage != null) {
+			const storageKey = `${prefix}-${queryHash}`;
+			try {
+				const storedData = await storage.getItem(storageKey);
+				if (storedData) {
+					const persistedQuery = await deserialize(storedData);
+					if (isExpiredOrBusted(persistedQuery)) await storage.removeItem(storageKey);
+					else {
+						if (afterRestoreMacroTask) notifyManager.schedule(() => afterRestoreMacroTask(persistedQuery));
+						return persistedQuery.state.data;
+					}
+				}
+			} catch (err) {
+				if (process.env.NODE_ENV === "development") {
+					console.error(err);
+					console.warn("Encountered an error attempting to restore query cache from persisted location.");
+				}
+				await storage.removeItem(storageKey);
+			}
+		}
+	}
+	async function persistQueryByKey(queryKey, queryClient) {
+		if (storage != null) {
+			const query = queryClient.getQueryCache().find({ queryKey });
+			if (query) await persistQuery(query);
+			else if (process.env.NODE_ENV === "development") console.warn("Could not find query to be persisted. QueryKey:", JSON.stringify(queryKey));
+		}
+	}
+	async function persistQuery(query) {
+		if (storage != null) {
+			const storageKey = `${prefix}-${query.queryHash}`;
+			storage.setItem(storageKey, await serialize({
+				state: query.state,
+				queryKey: query.queryKey,
+				queryHash: query.queryHash,
+				buster
+			}));
+		}
+	}
+	async function persisterFn(queryFn, ctx, query) {
+		const matchesFilter = filters ? matchQuery(filters, query) : true;
+		if (matchesFilter && query.state.data === void 0 && storage != null) {
+			const restoredData = await retrieveQuery(query.queryHash, (persistedQuery) => {
+				query.setState({
+					dataUpdatedAt: persistedQuery.state.dataUpdatedAt,
+					errorUpdatedAt: persistedQuery.state.errorUpdatedAt
+				});
+				if (refetchOnRestore === "always" || refetchOnRestore === true && query.isStale()) query.fetch();
+			});
+			if (restoredData !== void 0) return Promise.resolve(restoredData);
+		}
+		const queryFnResult = await queryFn(ctx);
+		if (matchesFilter && storage != null) notifyManager.schedule(() => {
+			persistQuery(query);
+		});
+		return Promise.resolve(queryFnResult);
+	}
+	async function persisterGc() {
+		if (storage?.entries) {
+			const entries = await storage.entries();
+			for (const [key, value] of entries) if (key.startsWith(prefix)) {
+				if (isExpiredOrBusted(await deserialize(value))) await storage.removeItem(key);
+			}
+		} else if (process.env.NODE_ENV === "development") throw new Error("Provided storage does not implement `entries` method. Garbage collection is not possible without ability to iterate over storage items.");
+	}
+	async function restoreQueries(queryClient, filters2 = {}) {
+		const { exact, queryKey } = filters2;
+		if (storage?.entries) {
+			const entries = await storage.entries();
+			for (const [key, value] of entries) if (key.startsWith(prefix)) {
+				const persistedQuery = await deserialize(value);
+				if (isExpiredOrBusted(persistedQuery)) {
+					await storage.removeItem(key);
+					continue;
+				}
+				if (queryKey) {
+					if (exact) {
+						if (persistedQuery.queryHash !== hashKey(queryKey)) continue;
+					} else if (!partialMatchKey(persistedQuery.queryKey, queryKey)) continue;
+				}
+				queryClient.setQueryData(persistedQuery.queryKey, persistedQuery.state.data, { updatedAt: persistedQuery.state.dataUpdatedAt });
+			}
+		} else if (process.env.NODE_ENV === "development") throw new Error("Provided storage does not implement `entries` method. Restoration of all stored entries is not possible without ability to iterate over storage items.");
+	}
+	return {
+		persisterFn,
+		persistQuery,
+		persistQueryByKey,
+		retrieveQuery,
+		persisterGc,
+		restoreQueries
+	};
+}
+//#endregion
+//#region ../../platform/query-persister/src/persister.ts
+const DB_NAME = "fluid_tanstack_query_cache";
+const STORE_NAME = "fluid_queries";
+const VERSION = 1;
+let dbPromise = null;
+async function deleteDatabase() {
+	return new Promise((resolve, reject) => {
+		console.warn("[IDB] Deleting database due to error");
+		const req = indexedDB.deleteDatabase(DB_NAME);
+		req.onsuccess = () => {
+			console.log("[IDB] Database deleted successfully");
+			resolve();
+		};
+		req.onerror = () => {
+			console.error("[IDB] Failed to delete database:", req.error);
+			reject(req.error ?? /* @__PURE__ */ new Error("deleteDatabase failed"));
+		};
+		req.onblocked = () => {
+			console.warn("[IDB] Delete blocked: close all tabs using this database");
+		};
+	});
+}
+function openDatabase() {
+	return new Promise((resolve, reject) => {
+		const req = indexedDB.open(DB_NAME, VERSION);
+		req.onupgradeneeded = () => {
+			const upgradeDb = req.result;
+			if (!upgradeDb.objectStoreNames.contains(STORE_NAME)) upgradeDb.createObjectStore(STORE_NAME);
+		};
+		req.onsuccess = () => {
+			const conn = req.result;
+			conn.onversionchange = () => {
+				console.trace("[IDB] version change – closing connection");
+				conn.close();
+				dbPromise = null;
+			};
+			resolve(conn);
+		};
+		req.onblocked = () => {
+			console.warn("[IDB] open blocked: another connection is holding the DB");
+		};
+		req.onerror = () => {
+			reject(req.error instanceof Error ? req.error : /* @__PURE__ */ new Error(`IndexedDB open failed: ${String(req.error)}`));
+		};
+	});
+}
+async function getDbWithRecovery() {
+	try {
+		return await openDatabase();
+	} catch (err) {
+		console.warn("[IDB] Initial open failed, attempting recovery:", err);
+		try {
+			await deleteDatabase();
+			console.log("[IDB] Retrying database open after deletion");
+			return await openDatabase();
+		} catch (retryErr) {
+			console.error("[IDB] Recovery failed:", retryErr);
+			throw retryErr;
+		}
+	}
+}
+function getDb() {
+	if (dbPromise) return dbPromise;
+	dbPromise = getDbWithRecovery().catch((err) => {
+		dbPromise = null;
+		throw err;
+	});
+	return dbPromise;
+}
+const storage = {
+	async getItem(key) {
+		try {
+			const db = await getDb();
+			return new Promise((res) => {
+				try {
+					const r = db.transaction(STORE_NAME, "readonly").objectStore(STORE_NAME).get(key);
+					r.onsuccess = () => res(r.result);
+					r.onerror = () => {
+						console.trace("[IDB] getItem error:", r.error);
+						res(void 0);
+					};
+				} catch (txErr) {
+					console.trace("[IDB] getItem transaction error:", txErr);
+					res(void 0);
+				}
+			});
+		} catch (err) {
+			console.trace("[IDB] getItem getDb error:", err);
+			try {
+				const db = await getDb();
+				return new Promise((res) => {
+					try {
+						const r = db.transaction(STORE_NAME, "readonly").objectStore(STORE_NAME).get(key);
+						r.onsuccess = () => res(r.result);
+						r.onerror = () => {
+							console.trace("[IDB] getItem retry error:", r.error);
+							res(void 0);
+						};
+					} catch (txErr) {
+						console.trace("[IDB] getItem retry transaction error:", txErr);
+						res(void 0);
+					}
+				});
+			} catch (recoveryErr) {
+				console.trace("[IDB] getItem recovery failed:", recoveryErr);
+			}
+			return;
+		}
+	},
+	async setItem(key, value) {
+		const cloneableValue = JSON.parse(JSON.stringify(value));
+		try {
+			const db = await getDb();
+			if (!db) return;
+			await new Promise((resolve) => {
+				try {
+					const req = db.transaction(STORE_NAME, "readwrite").objectStore(STORE_NAME).put(cloneableValue, key);
+					req.onsuccess = () => resolve();
+					req.onerror = () => {
+						console.trace("[IDB] setItem error:", req.error);
+						resolve();
+					};
+				} catch (txErr) {
+					console.trace("[IDB] setItem transaction error:", txErr);
+					resolve();
+				}
+			});
+		} catch (err) {
+			console.trace("[IDB] setItem getDb error:", err);
+			try {
+				const db = await getDb();
+				await new Promise((resolve) => {
+					try {
+						const req = db.transaction(STORE_NAME, "readwrite").objectStore(STORE_NAME).put(cloneableValue, key);
+						req.onsuccess = () => resolve();
+						req.onerror = () => {
+							console.trace("[IDB] setItem retry error:", req.error);
+							resolve();
+						};
+					} catch (txErr) {
+						console.trace("[IDB] setItem retry transaction error:", txErr);
+						resolve();
+					}
+				});
+			} catch (recoveryErr) {
+				console.trace("[IDB] setItem recovery failed:", recoveryErr);
+			}
+		}
+	},
+	async removeItem(key) {
+		try {
+			const db = await getDb();
+			if (!db) return;
+			await new Promise((resolve) => {
+				try {
+					const req = db.transaction(STORE_NAME, "readwrite").objectStore(STORE_NAME).delete(key);
+					req.onsuccess = () => resolve();
+					req.onerror = () => {
+						console.trace("[IDB] removeItem error:", req.error);
+						resolve();
+					};
+				} catch (txErr) {
+					console.trace("[IDB] removeItem transaction error:", txErr);
+					resolve();
+				}
+			});
+		} catch (err) {
+			console.trace("[IDB] removeItem getDb error:", err);
+			try {
+				const db = await getDb();
+				await new Promise((resolve) => {
+					try {
+						const req = db.transaction(STORE_NAME, "readwrite").objectStore(STORE_NAME).delete(key);
+						req.onsuccess = () => resolve();
+						req.onerror = () => {
+							console.trace("[IDB] removeItem retry error:", req.error);
+							resolve();
+						};
+					} catch (txErr) {
+						console.trace("[IDB] removeItem retry transaction error:", txErr);
+						resolve();
+					}
+				});
+			} catch (recoveryErr) {
+				console.trace("[IDB] removeItem recovery failed:", recoveryErr);
+			}
+		}
+	}
+};
+function createPersister() {
+	return experimental_createQueryPersister({
+		storage,
+		serialize: (persistedQuery) => persistedQuery,
+		deserialize: (cached) => cached
+	});
+}
+//#endregion
+//#region src/hooks/use-fluid-app.ts
+/**
+* Query key for full app data (fluidos endpoint)
+*/
+const APP_DATA_QUERY_KEY = ["fluid", "app"];
+/**
+* Module-level persister instance (browser only).
+* Created once when the module loads so all calls to useFluidApp share
+* the same IndexedDB connection. Applied at the query level so it works
+* regardless of which QueryClient the app provides.
+*/
+const appDataPersister = typeof window !== "undefined" ? createPersister() : void 0;
+/**
+* Hook to fetch the full rep app data from the fluidos API.
+*
+* Returns a `RepAppData` object containing:
+* - `screens` — all screen definitions with normalized component trees
+* - `profile.themes` — fully-transformed ThemeDefinition[] (handles legacy + new formats)
+* - `profile.activeThemeId` — the currently active theme ID
+* - `profile.navigation.navigation_items` — sorted, recursive navigation tree
+*
+* Uses IndexedDB persistence so subsequent page loads hydrate instantly
+* from cache while revalidating in the background. The raw API response
+* (plain JSON) is cached; Color objects are recreated from cache via
+* `select` on every restore — this is fast (CPU only, no network).
+*
+* @example
+* ```tsx
+* function App() {
+*   const { data: appData, isLoading } = useFluidApp();
+*
+*   if (isLoading) return <Spinner />;
+*
+*   return (
+*     <AppShell
+*       appData={appData}
+*       navigation={appData.profile.navigation.navigation_items}
+*     />
+*   );
+* }
+* ```
+*/
+function useFluidApp(options) {
+	const api = useFluidApi();
+	return useQuery({
+		queryKey: APP_DATA_QUERY_KEY,
+		queryFn: () => api.app.getRaw(),
+		select: transformManifestToRepAppData,
+		...appDataPersister && { persister: appDataPersister.persisterFn },
+		...options?.enabled !== void 0 && { enabled: options.enabled }
+	});
+}
+//#endregion
+//#region src/hooks/use-fluid-permissions.ts
+/**
+* Query key for permissions data
+*/
+const PERMISSIONS_QUERY_KEY = ["fluid", "permissions"];
+/**
+* Hook to fetch and check user permissions
+*
+* @example
+* ```tsx
+* function TeamSettings() {
+*   const { can, isSuperAdmin } = useFluidPermissions();
+*
+*   if (!can("team", "manage")) {
+*     return <AccessDenied />;
+*   }
+*
+*   return <TeamSettingsForm canDelete={can("team", "delete")} />;
+* }
+* ```
+*/
+function useFluidPermissions() {
+	const api = useFluidApi();
+	const query = useQuery({
+		queryKey: PERMISSIONS_QUERY_KEY,
+		queryFn: () => api.permissions.get()
+	});
+	const permissions = query.data;
+	return {
+		query,
+		permissions,
+		can: useMemo(() => {
+			return (resource, action = "view") => {
+				if (!permissions) return false;
+				if (permissions.is_super_admin) return true;
+				const resourcePermissions = permissions.permissions[resource];
+				if (!resourcePermissions) return false;
+				return resourcePermissions[action] ?? false;
+			};
+		}, [permissions]),
+		isSuperAdmin: permissions?.is_super_admin ?? false
+	};
+}
+//#endregion
+//#region src/hooks/use-fluid-theme.ts
+/**
+* Hook to access and control theme settings
+*
+* @example
+* ```tsx
+* function ThemeSwitcher({ themes }: { themes: ThemeDefinition[] }) {
+*   const { currentTheme, setTheme, setThemeMode, mode } = useFluidTheme();
+*
+*   return (
+*     <div>
+*       <select
+*         value={currentTheme?.name}
+*         onChange={(e) => {
+*           const theme = themes.find(t => t.name === e.target.value);
+*           if (theme) setTheme(theme);
+*         }}
+*       >
+*         {themes.map(theme => (
+*           <option key={theme.name} value={theme.name}>
+*             {theme.name}
+*           </option>
+*         ))}
+*       </select>
+*
+*       <button onClick={() => setThemeMode(mode === "dark" ? "light" : "dark")}>
+*         Toggle {mode === "dark" ? "Light" : "Dark"} Mode
+*       </button>
+*     </div>
+*   );
+* }
+* ```
+*/
+function useFluidTheme() {
+	const { currentTheme, setTheme, setThemeMode, mode } = useThemeContext();
+	return {
+		currentTheme,
+		setTheme,
+		setThemeMode,
+		mode
+	};
+}
+//#endregion
+//#region src/hooks/use-current-rep.ts
+/**
+* Query key for current rep data
+*/
+const CURRENT_REP_QUERY_KEY = ["fluid", "currentRep"];
+/**
+* Hook to fetch the currently authenticated rep's profile
+*
+* @example
+* ```tsx
+* function RepHeader() {
+*   const { data: rep, isLoading } = useCurrentRep();
+*
+*   if (isLoading) return <Skeleton />;
+*
+*   return (
+*     <div>
+*       <Avatar src={rep?.avatar_url} />
+*       <span>{rep?.first_name} {rep?.last_name}</span>
+*     </div>
+*   );
+* }
+* ```
+*/
+function useCurrentRep() {
+	const api = useFluidApi();
+	return useQuery({
+		queryKey: CURRENT_REP_QUERY_KEY,
+		queryFn: () => api.reps.current()
+	});
+}
+//#endregion
+//#region src/hooks/use-fluid-auth.ts
+/**
+* useFluidAuth Hook
+*
+* Provides access to authentication state and utilities.
+* This is the primary hook for interacting with auth in components.
+*/
+/**
+* Hook to access authentication state and utilities.
+*
+* Must be used within a `FluidAuthProvider`.
+*
+* @returns Authentication context with user info, loading state, and utilities
+* @throws Error if used outside FluidAuthProvider
+*
+* @example
+* ```tsx
+* function UserProfile() {
+*   const { isAuthenticated, isLoading, user, clearAuth } = useFluidAuth();
+*
+*   if (isLoading) {
+*     return <Spinner />;
+*   }
+*
+*   if (!isAuthenticated) {
+*     return <p>Please log in</p>;
+*   }
+*
+*   return (
+*     <div>
+*       <p>Welcome, {user.full_name}!</p>
+*       <button onClick={clearAuth}>Log out</button>
+*     </div>
+*   );
+* }
+* ```
+*/
+function useFluidAuth() {
+	return useFluidAuthContext();
+}
+//#endregion
+//#region src/hooks/demo-data/calendar-events.ts
+const now$4 = /* @__PURE__ */ new Date();
+function daysFromNow$1(days, hour, minute = 0) {
+	const d = new Date(now$4);
+	d.setDate(d.getDate() + days);
+	d.setHours(hour, minute, 0, 0);
+	return d;
+}
+const DEMO_CALENDAR_EVENTS = [
+	{
+		id: 1,
+		title: "Team Standup",
+		description: { body: "Daily sync with the sales team" },
+		color: "#4f46e5",
+		start: daysFromNow$1(0, 9, 0).toISOString(),
+		end: daysFromNow$1(0, 9, 30).toISOString(),
+		active: true,
+		status: "confirmed"
+	},
+	{
+		id: 2,
+		title: "Client Review - Acme Corp",
+		description: { body: "Quarterly business review with key accounts" },
+		color: "#059669",
+		start: daysFromNow$1(2, 14, 0).toISOString(),
+		end: daysFromNow$1(2, 15, 0).toISOString(),
+		active: true,
+		status: "confirmed",
+		venue: "Conference Room B"
+	},
+	{
+		id: 3,
+		title: "Product Training Webinar",
+		description: { body: "New product line training for the field" },
+		color: "#d97706",
+		start: daysFromNow$1(4, 11, 0).toISOString(),
+		end: daysFromNow$1(4, 12, 30).toISOString(),
+		active: true,
+		status: "confirmed",
+		url: "https://example.com/webinar"
+	},
+	{
+		id: 4,
+		title: "Regional Conference",
+		description: { body: "Annual West Coast regional conference" },
+		color: "#dc2626",
+		start: daysFromNow$1(10, 8, 0).toISOString(),
+		end: daysFromNow$1(12, 17, 0).toISOString(),
+		active: true,
+		status: "confirmed",
+		venue: "San Diego Convention Center",
+		isAllDay: true
+	}
+];
+//#endregion
+//#region src/hooks/use-calendar-events.ts
+/**
+* Hook to fetch calendar events.
+* This is a stub implementation - override with your own data fetching logic.
+*/
+function useCalendarEvents() {
+	return {
+		data: [...DEMO_CALENDAR_EVENTS],
+		isLoading: false,
+		isError: false
+	};
+}
+//#endregion
+//#region src/hooks/demo-data/todos.ts
+const now$3 = /* @__PURE__ */ new Date();
+function daysFromNow(days) {
+	const d = new Date(now$3);
+	d.setDate(d.getDate() + days);
+	return d.toISOString();
+}
+const DEMO_TODOS = [
+	{
+		id: 1,
+		body: "Follow up with Sarah about Q2 order",
+		dueAt: daysFromNow(1),
+		completedAt: null,
+		createdAt: daysFromNow(-2),
+		contactName: "Sarah Johnson"
+	},
+	{
+		id: 2,
+		body: "Send pricing proposal to Acme Corp",
+		dueAt: daysFromNow(7),
+		completedAt: null,
+		createdAt: daysFromNow(-1),
+		contactName: "Mike Chen"
+	},
+	{
+		id: 3,
+		body: "Schedule onboarding call with new team member",
+		dueAt: daysFromNow(3),
+		completedAt: null,
+		createdAt: daysFromNow(0),
+		contactName: "Emily Rodriguez"
+	},
+	{
+		id: 4,
+		body: "Review and approve Q1 expense report",
+		dueAt: daysFromNow(-1),
+		completedAt: daysFromNow(-1),
+		createdAt: daysFromNow(-5),
+		contactName: null
+	},
+	{
+		id: 5,
+		body: "Prepare presentation for Friday team meeting",
+		dueAt: daysFromNow(4),
+		completedAt: daysFromNow(0),
+		createdAt: daysFromNow(-3),
+		contactName: null
+	}
+];
+//#endregion
+//#region src/hooks/use-todos.ts
+/**
+* Hook to fetch todo items.
+* This is a stub implementation - override with your own data fetching logic.
+*/
+function useTodos() {
+	return {
+		data: [...DEMO_TODOS],
+		isLoading: false,
+		isError: false
+	};
+}
+//#endregion
+//#region src/hooks/hook-types.ts
+/**
+* Type predicate to check if a query result has successfully loaded data.
+* Narrows the data type from T | null | undefined to T.
+*
+* @example
+* const result = useContact(id);
+* if (hasData(result)) {
+*   // TypeScript knows result.data is Contact, not Contact | null
+*   console.log(result.data.name);
+* }
+*/
+function hasData(result) {
+	return result.data != null && !result.isLoading && !result.isError;
+}
+/**
+* Type predicate to check if a query result is in loading state.
+* Useful for conditional rendering.
+*
+* @example
+* if (isLoading(result)) {
+*   return <Spinner />;
+* }
+*/
+function isLoading(result) {
+	return result.isLoading;
+}
+/**
+* Type predicate to check if a query result has an error.
+* Narrows to include the error property.
+*
+* @example
+* if (isErrorResult(result)) {
+*   console.error(result.error); // error is E, not undefined
+* }
+*/
+function isErrorResult(result) {
+	return result.isError && result.error !== void 0;
+}
+/**
+* Type predicate to check if a query result is in idle state (not loading, no error, has data).
+*
+* @example
+* if (isIdle(result)) {
+*   // Safe to access and render data
+* }
+*/
+function isIdle(result) {
+	return !result.isLoading && !result.isError;
+}
+/**
+* Type-safe property selector for hook results.
+* Uses K extends keyof T constraint (generics-function-constraints rule).
+*
+* @typeParam T - The data object type
+* @typeParam K - Key of T (constrained to actual keys)
+*
+* @example
+* const users = [{ name: "Alice", age: 30 }];
+* const names = selectProperty(users, "name"); // string[]
+* const ages = selectProperty(users, "age");   // number[]
+* selectProperty(users, "invalid"); // Error: "invalid" not in "name" | "age"
+*/
+function selectProperty(items, key) {
+	return items.map((item) => item[key]);
+}
+/**
+* Type-safe property getter for a single item.
+* Returns undefined if item is null/undefined.
+*
+* @typeParam T - The data object type
+* @typeParam K - Key of T (constrained to actual keys)
+*/
+function getProperty(item, key) {
+	return item?.[key];
+}
+/**
+* Activity slug constants as a const object.
+* Derive the ActivitySlug type from this single source of truth.
+*/
+const ACTIVITY_SLUGS = {
+	abandonedCart: "abandoned_cart",
+	announcements: "announcements",
+	cartItemsAdded: "cart_items_added",
+	commentReply: "comment_reply",
+	directMessage: "direct_message",
+	fantasyPoint: "fantasy_point",
+	newLead: "new_lead",
+	orderPlaced: "order_placed",
+	pageViews: "page_views",
+	pageViewsContact: "page_views_contact",
+	tasks: "tasks",
+	upcomingEvent: "upcoming_event",
+	video: "video",
+	videoComplete: "video_complete",
+	videoCompleteContact: "video_complete_contact",
+	videoContact: "video_contact",
+	messageReceived: "message_received",
+	messageSent: "message_sent",
+	newCartItemsAdded: "new_cart_items_added",
+	smartLinkClicked: "smart_link_clicked",
+	reviewLeft: "review_left"
+};
+/** Type predicate to check if a string is a valid ActivitySlug. */
+function isActivitySlug(value) {
+	return Object.values(ACTIVITY_SLUGS).includes(value);
+}
+//#endregion
+//#region src/hooks/demo-data/activities.ts
+const now$2 = /* @__PURE__ */ new Date();
+function hoursAgo$1(hours) {
+	const d = new Date(now$2);
+	d.setHours(d.getHours() - hours);
+	return d.toISOString();
+}
+const DEMO_ACTIVITIES = [
+	{
+		id: 1,
+		userName: "Sarah Johnson",
+		avatarUrl: null,
+		activityType: "New Order",
+		targetName: "Wellness Starter Kit",
+		timestamp: hoursAgo$1(1),
+		slug: "order_placed"
+	},
+	{
+		id: 2,
+		userName: "Mike Chen",
+		avatarUrl: null,
+		activityType: "New Lead",
+		targetName: "Referral from LinkedIn campaign",
+		timestamp: hoursAgo$1(3),
+		slug: "new_lead"
+	},
+	{
+		id: 3,
+		userName: "Emily Rodriguez",
+		avatarUrl: null,
+		activityType: "Page View",
+		targetName: "Product Catalog",
+		timestamp: hoursAgo$1(5),
+		slug: "page_views"
+	},
+	{
+		id: 4,
+		userName: "David Park",
+		avatarUrl: null,
+		activityType: "Cart Items Added",
+		targetName: "Premium Bundle (3 items)",
+		timestamp: hoursAgo$1(8),
+		slug: "cart_items_added"
+	},
+	{
+		id: 5,
+		userName: "Lisa Thompson",
+		avatarUrl: null,
+		activityType: "Video Watched",
+		targetName: "Getting Started Tutorial",
+		timestamp: hoursAgo$1(12),
+		slug: "video_complete"
+	},
+	{
+		id: 6,
+		userName: "James Wilson",
+		avatarUrl: null,
+		activityType: "Message Received",
+		targetName: "Question about shipping",
+		timestamp: hoursAgo$1(18),
+		slug: "message_received"
+	},
+	{
+		id: 7,
+		userName: "Rachel Kim",
+		avatarUrl: null,
+		activityType: "Smart Link Clicked",
+		targetName: "Holiday Promo Link",
+		timestamp: hoursAgo$1(24),
+		slug: "smart_link_clicked"
+	},
+	{
+		id: 8,
+		userName: "Tom Martinez",
+		avatarUrl: null,
+		activityType: "Review Left",
+		targetName: "Essential Oil Set - 5 stars",
+		timestamp: hoursAgo$1(36),
+		slug: "review_left"
+	}
+];
+//#endregion
+//#region src/hooks/use-activities.ts
+/**
+* Hook to fetch recent activities.
+* This is a stub implementation - override with your own data fetching logic.
+*/
+function useActivities() {
+	return {
+		data: [...DEMO_ACTIVITIES],
+		isLoading: false,
+		isError: false
+	};
+}
+//#endregion
+//#region src/hooks/demo-data/catchups.ts
+const DEMO_CATCHUPS = [
+	{
+		id: 1,
+		suggestion_title: "Sarah Johnson hasn't ordered in 30 days"
+	},
+	{
+		id: 2,
+		suggestion_title: "Mike Chen's subscription is expiring soon"
+	},
+	{
+		id: 3,
+		suggestion_title: "Emily Rodriguez left a cart with 3 items"
+	}
+];
+//#endregion
+//#region src/hooks/use-catchups.ts
+/**
+* Hook to fetch catch up items.
+* This is a stub implementation - override with your own data fetching logic.
+*/
+function useCatchUps() {
+	return {
+		data: [...DEMO_CATCHUPS],
+		isLoading: false,
+		isError: false
+	};
+}
+//#endregion
+//#region src/hooks/demo-data/mysite.ts
+const DEMO_MYSITE = {
+	url: "https://my-portal.example.com",
+	views: 1243,
+	leads: 37,
+	userName: "Demo User"
+};
+//#endregion
+//#region src/hooks/use-mysite.ts
+/**
+* Hook to fetch MySite data.
+* This is a stub implementation - override with your own data fetching logic.
+*/
+function useMySite() {
+	return {
+		data: DEMO_MYSITE,
+		isLoading: false,
+		isError: false
+	};
+}
+//#endregion
+//#region src/hooks/demo-data/conversations.ts
+const now$1 = /* @__PURE__ */ new Date();
+function hoursAgo(hours) {
+	const d = new Date(now$1);
+	d.setHours(d.getHours() - hours);
+	return d.toISOString();
+}
+function daysAgo$1(days) {
+	const d = new Date(now$1);
+	d.setDate(d.getDate() - days);
+	return d.toISOString();
+}
+const DEMO_CONVERSATIONS = [
+	{
+		id: "conv-1",
+		title: "Sarah Johnson",
+		participants: [{
+			id: "user-1",
+			name: "You",
+			email: "me@example.com",
+			isOnline: true
+		}, {
+			id: "user-2",
+			name: "Sarah Johnson",
+			email: "sarah.johnson@example.com",
+			isOnline: true
+		}],
+		lastMessage: {
+			id: "msg-1-3",
+			conversationId: "conv-1",
+			senderId: "user-2",
+			senderName: "Sarah Johnson",
+			type: "text",
+			content: "Sounds great! I'll place the order by end of day.",
+			timestamp: hoursAgo(1),
+			isRead: false
+		},
+		unreadCount: 1,
+		status: "active",
+		createdAt: daysAgo$1(30),
+		updatedAt: hoursAgo(1)
+	},
+	{
+		id: "conv-2",
+		title: "Mike Chen",
+		participants: [{
+			id: "user-1",
+			name: "You",
+			email: "me@example.com",
+			isOnline: true
+		}, {
+			id: "user-3",
+			name: "Mike Chen",
+			email: "mike.chen@acmecorp.com",
+			isOnline: false
+		}],
+		lastMessage: {
+			id: "msg-2-2",
+			conversationId: "conv-2",
+			senderId: "user-1",
+			senderName: "You",
+			type: "text",
+			content: "I've attached the updated pricing sheet. Let me know if you have any questions!",
+			timestamp: hoursAgo(5),
+			isRead: true
+		},
+		unreadCount: 0,
+		status: "active",
+		createdAt: daysAgo$1(14),
+		updatedAt: hoursAgo(5)
+	},
+	{
+		id: "conv-3",
+		title: "Team Updates",
+		participants: [
+			{
+				id: "user-1",
+				name: "You",
+				email: "me@example.com",
+				isOnline: true
+			},
+			{
+				id: "user-4",
+				name: "Emily Rodriguez",
+				email: "emily.r@healthfirst.io"
+			},
+			{
+				id: "user-5",
+				name: "David Park",
+				email: "david.park@email.com"
+			}
+		],
+		lastMessage: {
+			id: "msg-3-4",
+			conversationId: "conv-3",
+			senderId: "user-4",
+			senderName: "Emily Rodriguez",
+			type: "text",
+			content: "The new product samples arrived today. Will distribute to the team tomorrow.",
+			timestamp: daysAgo$1(1),
+			isRead: true
+		},
+		unreadCount: 0,
+		status: "active",
+		createdAt: daysAgo$1(60),
+		updatedAt: daysAgo$1(1)
+	}
+];
+const DEMO_MESSAGES = [
+	{
+		id: "msg-1-1",
+		conversationId: "conv-1",
+		senderId: "user-1",
+		senderName: "You",
+		type: "text",
+		content: "Hi Sarah! I wanted to follow up on the Wellness Starter Kit. We have a special promotion running this month.",
+		timestamp: hoursAgo(3),
+		isRead: true
+	},
+	{
+		id: "msg-1-2",
+		conversationId: "conv-1",
+		senderId: "user-2",
+		senderName: "Sarah Johnson",
+		type: "text",
+		content: "That's perfect timing! I was just thinking about reordering. What's the promo?",
+		timestamp: hoursAgo(2),
+		isRead: true
+	},
+	{
+		id: "msg-1-3",
+		conversationId: "conv-1",
+		senderId: "user-2",
+		senderName: "Sarah Johnson",
+		type: "text",
+		content: "Sounds great! I'll place the order by end of day.",
+		timestamp: hoursAgo(1),
+		isRead: false
+	}
+];
+//#endregion
+//#region src/hooks/use-conversations.ts
+/**
+* Hook to fetch all conversations.
+* This is a stub implementation - override with your own data fetching logic.
+*
+* @returns UseConversationsResult with empty data array
+*
+* @example
+* ```tsx
+* const { data: conversations, isLoading, isError } = useConversations();
+*
+* if (isLoading) return <Loading />;
+* if (isError) return <Error />;
+*
+* return conversations.map(conv => <ConversationItem key={conv.id} {...conv} />);
+* ```
+*/
+function useConversations() {
+	return {
+		data: [...DEMO_CONVERSATIONS],
+		isLoading: false,
+		isError: false
+	};
+}
+/**
+* Hook to fetch messages for a specific conversation.
+* This is a stub implementation - override with your own data fetching logic.
+*
+* @param conversationId - The ID of the conversation to fetch messages for
+* @returns UseConversationMessagesResult with empty data array
+*
+* @example
+* ```tsx
+* const { data: messages, isLoading, isError } = useConversationMessages(conversationId);
+*
+* if (isLoading) return <Loading />;
+* if (isError) return <Error />;
+*
+* return messages.map(msg => <MessageBubble key={msg.id} {...msg} />);
+* ```
+*/
+function useConversationMessages(_conversationId) {
+	return {
+		data: [...DEMO_MESSAGES],
+		isLoading: false,
+		isError: false
+	};
+}
+//#endregion
+//#region src/types/screen-types.ts
+/**
+* Contact status constant - single source of truth.
+*/
+const CONTACT_STATUSES = {
+	active: "active",
+	inactive: "inactive",
+	lead: "lead",
+	prospect: "prospect"
+};
+//#endregion
+//#region src/hooks/demo-data/contacts.ts
+const now = /* @__PURE__ */ new Date();
+function daysAgo(days) {
+	const d = new Date(now);
+	d.setDate(d.getDate() - days);
+	return d.toISOString();
+}
+const DEMO_CONTACTS = [
+	{
+		id: "contact-1",
+		firstName: "Sarah",
+		lastName: "Johnson",
+		email: "sarah.johnson@example.com",
+		phone: "+1 (555) 123-4567",
+		company: "Wellness Works Inc.",
+		jobTitle: "Purchasing Manager",
+		status: "active",
+		type: "individual",
+		tags: ["VIP", "Repeat Buyer"],
+		createdAt: daysAgo(90),
+		updatedAt: daysAgo(2)
+	},
+	{
+		id: "contact-2",
+		firstName: "Mike",
+		lastName: "Chen",
+		email: "mike.chen@acmecorp.com",
+		phone: "+1 (555) 234-5678",
+		company: "Acme Corp",
+		jobTitle: "Director of Operations",
+		status: "active",
+		type: "individual",
+		tags: ["Enterprise"],
+		createdAt: daysAgo(60),
+		updatedAt: daysAgo(5)
+	},
+	{
+		id: "contact-3",
+		firstName: "Emily",
+		lastName: "Rodriguez",
+		email: "emily.r@healthfirst.io",
+		company: "HealthFirst",
+		status: "lead",
+		type: "individual",
+		notes: "Interested in bulk pricing for team orders",
+		createdAt: daysAgo(7),
+		updatedAt: daysAgo(1)
+	},
+	{
+		id: "contact-4",
+		firstName: "David",
+		lastName: "Park",
+		email: "david.park@email.com",
+		phone: "+1 (555) 345-6789",
+		status: "prospect",
+		type: "individual",
+		tags: ["Referral"],
+		createdAt: daysAgo(14),
+		updatedAt: daysAgo(10)
+	},
+	{
+		id: "contact-5",
+		firstName: "Lisa",
+		lastName: "Thompson",
+		email: "lisa.t@globalfit.com",
+		company: "Global Fitness",
+		jobTitle: "CEO",
+		status: "active",
+		type: "individual",
+		address: {
+			city: "Los Angeles",
+			state: "CA",
+			country: "US"
+		},
+		createdAt: daysAgo(120),
+		updatedAt: daysAgo(15)
+	},
+	{
+		id: "contact-6",
+		firstName: "James",
+		lastName: "Wilson",
+		email: "jwilson@retired.net",
+		status: "inactive",
+		type: "individual",
+		notes: "Moved out of area, no longer purchasing",
+		createdAt: daysAgo(200),
+		updatedAt: daysAgo(45)
+	}
+];
+const DEMO_CONTACT = DEMO_CONTACTS[0];
+//#endregion
+//#region src/hooks/use-contacts.ts
+/**
+* Type predicate to check if a status string is a valid ContactStatus.
+* Enables runtime validation with type narrowing.
+*/
+function isContactStatus(value) {
+	return Object.values(CONTACT_STATUSES).includes(value);
+}
+/**
+* Hook to fetch a list of contacts with optional filtering and pagination.
+* This is a stub implementation - override with your own data fetching logic.
+*
+* @param params - Optional parameters for filtering and pagination
+* @returns Object containing contacts data, loading state, error state, and total count
+*
+* @example
+* ```tsx
+* const { data: contacts, isLoading, totalCount } = useContacts({
+*   search: 'john',
+*   status: 'active',
+*   limit: 20
+* });
+* ```
+*/
+function useContacts(_params) {
+	return {
+		data: [...DEMO_CONTACTS],
+		isLoading: false,
+		isError: false,
+		totalCount: DEMO_CONTACTS.length
+	};
+}
+/**
+* Hook to fetch a single contact by ID.
+* This is a stub implementation - override with your own data fetching logic.
+*
+* @param contactId - The unique identifier of the contact to fetch
+* @returns Object containing contact data, loading state, and error state
+*
+* @example
+* ```tsx
+* const { data: contact, isLoading, isError } = useContact('contact-123');
+* ```
+*/
+function useContact(_contactId) {
+	return {
+		data: DEMO_CONTACT,
+		isLoading: false,
+		isError: false
+	};
+}
+//#endregion
+//#region src/components/AuthError.tsx
+/**
+* AuthError - Default Authentication Error Component
+*
+* Displayed when authentication fails. Can be customized or replaced
+* via the RequireAuth component's errorComponent prop.
+*/
+/**
+* Default authentication error component.
+*
+* Displays a simple error message when authentication fails.
+* Can be customized via props or replaced entirely in RequireAuth.
+*
+* @example
+* ```tsx
+* // Use with default message
+* <AuthError />
+*
+* // Use with custom message
+* <AuthError message="Session expired. Please log in again." />
+*
+* // Use with custom content
+* <AuthError>
+*   <CustomLoginButton />
+* </AuthError>
+* ```
+*/
+function AuthError({ message = "You need to be authenticated to view this content.", title = "Authentication Required", children }) {
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "center",
+			justifyContent: "center",
+			minHeight: "100vh",
+			padding: "2rem",
+			fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
+			backgroundColor: "#f9fafb",
+			color: "#111827"
+		},
+		children: /* @__PURE__ */ jsxs("div", {
+			style: {
+				maxWidth: "400px",
+				textAlign: "center",
+				padding: "2rem",
+				backgroundColor: "#ffffff",
+				borderRadius: "0.75rem",
+				boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)"
+			},
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					style: {
+						width: "64px",
+						height: "64px",
+						margin: "0 auto 1.5rem",
+						backgroundColor: "#fee2e2",
+						borderRadius: "50%",
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "center"
+					},
+					children: /* @__PURE__ */ jsxs("svg", {
+						width: "32",
+						height: "32",
+						viewBox: "0 0 24 24",
+						fill: "none",
+						stroke: "#dc2626",
+						strokeWidth: "2",
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						children: [/* @__PURE__ */ jsx("rect", {
+							x: "3",
+							y: "11",
+							width: "18",
+							height: "11",
+							rx: "2",
+							ry: "2"
+						}), /* @__PURE__ */ jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })]
+					})
+				}),
+				/* @__PURE__ */ jsx("h1", {
+					style: {
+						fontSize: "1.5rem",
+						fontWeight: "600",
+						marginBottom: "0.75rem",
+						color: "#111827"
+					},
+					children: title
+				}),
+				/* @__PURE__ */ jsx("p", {
+					style: {
+						fontSize: "1rem",
+						color: "#6b7280",
+						marginBottom: children ? "1.5rem" : "0",
+						lineHeight: "1.5"
+					},
+					children: message
+				}),
+				children
+			]
+		})
+	});
+}
+const SPIN_STYLE_ID$1 = "fluid-auth-loading-spin";
+/**
+* Inject the spin keyframes style once into the document head.
+*/
+function ensureSpinStyle$1() {
+	if (typeof document === "undefined") return;
+	if (document.getElementById(SPIN_STYLE_ID$1)) return;
+	const style = document.createElement("style");
+	style.id = SPIN_STYLE_ID$1;
+	style.textContent = `@keyframes spin { to { transform: rotate(360deg); } }`;
+	document.head.appendChild(style);
+}
+/**
+* Simple loading spinner component for auth loading state.
+*/
+function AuthLoading() {
+	useEffect(() => {
+		ensureSpinStyle$1();
+	}, []);
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "center",
+			justifyContent: "center",
+			minHeight: "100vh",
+			fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
+			backgroundColor: "#f9fafb"
+		},
+		children: [/* @__PURE__ */ jsx("div", { style: {
+			width: "40px",
+			height: "40px",
+			border: "3px solid #e5e7eb",
+			borderTopColor: "#3b82f6",
+			borderRadius: "50%",
+			animation: "spin 1s linear infinite"
+		} }), /* @__PURE__ */ jsx("p", {
+			style: {
+				marginTop: "1rem",
+				color: "#6b7280",
+				fontSize: "0.875rem"
+			},
+			children: "Authenticating..."
+		})]
+	});
+}
+//#endregion
+//#region src/components/RequireAuth.tsx
+/**
+* Component that protects content requiring authentication.
+*
+* **Important:** This provides UX-level protection only. It prevents
+* unauthenticated users from seeing the UI, but the real security
+* boundary is the server-side API. Client-side auth can always be
+* bypassed by modifying browser state.
+*
+* For defense-in-depth, configure `jwksUrl` in `FluidAuthConfig`
+* to enable client-side JWT signature verification.
+*
+* Shows different states based on auth status:
+* - Loading: Shows fallback (spinner by default)
+* - Not authenticated: Shows errorComponent (AuthError by default)
+* - Authenticated: Shows children
+*
+* @example
+* ```tsx
+* // Basic usage - shows default loading/error states
+* <RequireAuth>
+*   <ProtectedContent />
+* </RequireAuth>
+*
+* // Custom loading state
+* <RequireAuth fallback={<CustomSpinner />}>
+*   <ProtectedContent />
+* </RequireAuth>
+*
+* // Custom error component
+* <RequireAuth errorComponent={<LoginPrompt />}>
+*   <ProtectedContent />
+* </RequireAuth>
+*
+* // Both custom
+* <RequireAuth
+*   fallback={<SkeletonLoader />}
+*   errorComponent={<RedirectToLogin />}
+* >
+*   <Dashboard />
+* </RequireAuth>
+* ```
+*/
+function RequireAuth({ children, fallback = /* @__PURE__ */ jsx(AuthLoading, {}), errorComponent = /* @__PURE__ */ jsx(AuthError, {}) }) {
+	const { isAuthenticated, isLoading, error } = useFluidAuth();
+	if (isLoading) return /* @__PURE__ */ jsx(Fragment, { children: fallback });
+	if (!isAuthenticated || error) return /* @__PURE__ */ jsx(Fragment, { children: errorComponent });
+	return /* @__PURE__ */ jsx(Fragment, { children });
+}
+//#endregion
+//#region src/screens/index.ts
+const screenPropertySchemas = {
+	MessagingScreen: () => import("./MessagingScreen-xO9YudMx.mjs").then((n) => n.n).then((m) => m.messagingScreenPropertySchema),
+	ContactsScreen: () => import("./ContactsScreen-CB6l0Lf1.mjs").then((n) => n.n).then((m) => m.contactsScreenPropertySchema),
+	OrdersScreen: () => import("./OrdersScreen-DB1v051q.mjs").then((n) => n.n).then((m) => m.ordersScreenPropertySchema),
+	CustomersScreen: () => import("./CustomersScreen-BEar6Leg.mjs").then((n) => n.n).then((m) => m.customersScreenPropertySchema),
+	ProductsScreen: () => import("./ProductsScreen-nVDsY6kf.mjs").then((n) => n.n).then((m) => m.productsScreenPropertySchema)
+};
+/**
+* Core page template IDs
+*/
+const CORE_PAGE_IDS = {
+	MESSAGING: "core-messaging",
+	CONTACTS: "core-contacts",
+	ORDERS: "core-orders",
+	CUSTOMERS: "core-customers",
+	PRODUCTS: "core-products"
+};
+/**
+* Register core page templates.
+* These are automatically registered when the SDK is imported.
+*/
+function registerCorePageTemplates() {
+	PageTemplateRegistry.register({
+		id: CORE_PAGE_IDS.MESSAGING,
+		slug: "messaging",
+		name: "Messaging",
+		description: "Messaging interface provided by Fluid Commerce",
+		category: PAGE_CATEGORIES.COMMUNICATION,
+		tags: [
+			"messaging",
+			"chat",
+			"conversations",
+			"communication"
+		],
+		version: "1.0.0",
+		isCore: true,
+		component_tree: [{
+			type: "MessagingScreen",
+			id: "messaging-screen-root",
+			props: {}
+		}],
+		defaultProps: {}
+	});
+	PageTemplateRegistry.register({
+		id: CORE_PAGE_IDS.CONTACTS,
+		slug: "contacts",
+		name: "Contacts",
+		description: "Contact management provided by Fluid Commerce",
+		category: PAGE_CATEGORIES.CORE,
+		tags: [
+			"contacts",
+			"people",
+			"address-book"
+		],
+		version: "1.0.0",
+		isCore: true,
+		component_tree: [{
+			type: "ContactsScreen",
+			id: "contacts-screen-root",
+			props: {}
+		}],
+		defaultProps: {}
+	});
+	PageTemplateRegistry.register({
+		id: CORE_PAGE_IDS.ORDERS,
+		slug: "orders",
+		name: "Orders",
+		description: "Order management provided by Fluid Commerce",
+		category: PAGE_CATEGORIES.CORE,
+		tags: [
+			"orders",
+			"commerce",
+			"sales"
+		],
+		version: "1.0.0",
+		isCore: true,
+		component_tree: [{
+			type: "OrdersScreen",
+			id: "orders-screen-root",
+			props: {}
+		}],
+		defaultProps: {}
+	});
+	PageTemplateRegistry.register({
+		id: CORE_PAGE_IDS.CUSTOMERS,
+		slug: "customers",
+		name: "Customers",
+		description: "Customer management provided by Fluid Commerce",
+		category: PAGE_CATEGORIES.CORE,
+		tags: [
+			"customers",
+			"people",
+			"commerce"
+		],
+		version: "1.0.0",
+		isCore: true,
+		component_tree: [{
+			type: "CustomersScreen",
+			id: "customers-screen-root",
+			props: {}
+		}],
+		defaultProps: {}
+	});
+	PageTemplateRegistry.register({
+		id: CORE_PAGE_IDS.PRODUCTS,
+		slug: "products",
+		name: "Products",
+		description: "Product catalog provided by Fluid Commerce",
+		category: PAGE_CATEGORIES.CORE,
+		tags: [
+			"products",
+			"catalog",
+			"commerce"
+		],
+		version: "1.0.0",
+		isCore: true,
+		component_tree: [{
+			type: "ProductsScreen",
+			id: "products-screen-root",
+			props: {}
+		}],
+		defaultProps: {}
+	});
+}
+registerCorePageTemplates();
+//#endregion
+//#region src/shell/SdkBottomNav.tsx
+function isInSection(item, currentSlug) {
+	const normalized = normalizeSlug(currentSlug);
+	if (normalizeSlug(item.slug) === normalized) return true;
+	return item.children?.some((child) => normalizeSlug(child.slug) === normalized) ?? false;
+}
+function getNavTarget(item) {
+	if (item.slug && (!item.children || item.children.length === 0)) return normalizeSlug(item.slug);
+	if (item.children && item.children.length > 0) {
+		const firstChild = item.children[0];
+		if (firstChild?.slug) return normalizeSlug(firstChild.slug);
+	}
+	return null;
+}
+function SdkBottomNav({ navItems, currentSlug, onNavigate, maxVisibleItems = 5 }) {
+	const { isMobile, useBottomNav } = useSidebar();
+	const [moreOpen, setMoreOpen] = React$1.useState(false);
+	if (!isMobile || !useBottomNav) return null;
+	const navigableItems = navItems.filter((item) => !item.parent_id).filter((item) => item.slug || item.children && item.children.length > 0);
+	const hasOverflow = navigableItems.length > maxVisibleItems;
+	const visibleItems = hasOverflow ? navigableItems.slice(0, maxVisibleItems - 1) : navigableItems;
+	const overflowItems = hasOverflow ? navigableItems.slice(maxVisibleItems - 1) : [];
+	const handleItemClick = (item) => {
+		const target = getNavTarget(item);
+		if (target) onNavigate(target);
+		setMoreOpen(false);
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("nav", {
+		className: "border-border bg-sidebar fixed right-0 bottom-0 left-0 z-40 flex h-16 items-end justify-around border-t pb-[env(safe-area-inset-bottom)]",
+		children: [visibleItems.map((item) => {
+			return /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: () => handleItemClick(item),
+				className: `flex flex-1 flex-col items-center justify-center gap-0.5 py-2 text-[10px] font-medium transition-colors ${isInSection(item, currentSlug) ? "text-primary" : "text-muted-foreground"}`,
+				children: [item.icon ? /* @__PURE__ */ jsx(RepIcon, {
+					name: item.icon,
+					className: "size-5"
+				}) : /* @__PURE__ */ jsx("span", { className: "size-5" }), /* @__PURE__ */ jsx("span", {
+					className: "max-w-[72px] truncate",
+					children: item.label
+				})]
+			}, item.id ?? item.slug ?? item.label);
+		}), hasOverflow && /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: () => setMoreOpen(true),
+			className: `flex flex-1 flex-col items-center justify-center gap-0.5 py-2 text-[10px] font-medium transition-colors ${overflowItems.some((item) => isInSection(item, currentSlug)) ? "text-primary" : "text-muted-foreground"}`,
+			children: [/* @__PURE__ */ jsx(FontAwesomeIcon, {
+				icon: faEllipsis,
+				className: "size-5"
+			}), /* @__PURE__ */ jsx("span", { children: "More" })]
+		})]
+	}), moreOpen && /* @__PURE__ */ jsxs("div", {
+		className: "fixed inset-0 z-50 flex flex-col",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex-1 bg-black/50",
+			onClick: () => setMoreOpen(false),
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "bg-sidebar rounded-t-2xl pb-[env(safe-area-inset-bottom)]",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between px-4 pt-4 pb-2",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-foreground text-sm font-semibold",
+					children: "More"
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => setMoreOpen(false),
+					className: "text-muted-foreground hover:bg-sidebar-accent flex items-center justify-center rounded-full p-1",
+					"aria-label": "Close",
+					children: /* @__PURE__ */ jsx(FontAwesomeIcon, {
+						icon: faXmark,
+						className: "size-5"
+					})
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "px-2 pb-4",
+				children: overflowItems.map((item) => {
+					return /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						onClick: () => handleItemClick(item),
+						className: `flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors ${isInSection(item, currentSlug) ? "bg-sidebar-primary text-sidebar-primary-foreground" : "text-sidebar-foreground hover:bg-sidebar-accent"}`,
+						children: [item.icon && /* @__PURE__ */ jsx(RepIcon, {
+							name: item.icon,
+							className: "size-5"
+						}), /* @__PURE__ */ jsx("span", { children: item.label })]
+					}, item.id ?? item.slug ?? item.label);
+				})
+			})]
+		})]
+	})] });
+}
+//#endregion
+//#region src/shell/AppShellLoading.tsx
+const SPIN_STYLE_ID = "fluid-app-shell-loading-spin";
+/**
+* Inject the spin keyframes style once into the document head.
+*/
+function ensureSpinStyle() {
+	if (typeof document === "undefined") return;
+	if (document.getElementById(SPIN_STYLE_ID)) return;
+	const style = document.createElement("style");
+	style.id = SPIN_STYLE_ID;
+	style.textContent = `@keyframes spin { to { transform: rotate(360deg); } }`;
+	document.head.appendChild(style);
+}
+/**
+* Full-page loading spinner shown while AppShell is fetching app data
+* for the first time. Uses inline styles (not Tailwind) since the theme
+* hasn't loaded yet.
+*/
+function AppShellLoading() {
+	useEffect(() => {
+		ensureSpinStyle();
+	}, []);
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "center",
+			justifyContent: "center",
+			minHeight: "100vh",
+			fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
+			backgroundColor: "#f9fafb"
+		},
+		children: [/* @__PURE__ */ jsx("div", { style: {
+			width: "40px",
+			height: "40px",
+			border: "3px solid #e5e7eb",
+			borderTopColor: "#3b82f6",
+			borderRadius: "50%",
+			animation: "spin 1s linear infinite"
+		} }), /* @__PURE__ */ jsx("p", {
+			style: {
+				marginTop: "1rem",
+				color: "#6b7280",
+				fontSize: "0.875rem"
+			},
+			children: "Loading..."
+		})]
+	});
+}
+//#endregion
+//#region src/shell/slug-utils.ts
+/**
+* Extract all slugs from a navigation tree, sorted by segment count descending.
+* Longest slugs first enables greedy prefix matching (e.g. "share/playlists"
+* is checked before "share").
+*/
+function collectNavSlugs(items) {
+	const slugs = [];
+	for (const item of items) {
+		if (item.slug) slugs.push(normalizeSlug(item.slug));
+		for (const child of item.children ?? []) if (child.slug) slugs.push(normalizeSlug(child.slug));
+	}
+	return [...slugs].sort((a, b) => b.split("/").length - a.split("/").length);
+}
+/**
+* Find the longest registered nav slug that is a prefix of `fullSlug`.
+* Uses segment-boundary checking to prevent "shop" from matching "shopping".
+*/
+function matchSlugPrefix(fullSlug, navSlugs) {
+	const normalized = normalizeSlug(fullSlug);
+	if (!normalized) return void 0;
+	for (const navSlug of navSlugs) {
+		if (normalized === navSlug) return {
+			matchedSlug: navSlug,
+			rest: ""
+		};
+		if (normalized.startsWith(navSlug + "/")) return {
+			matchedSlug: navSlug,
+			rest: normalized.slice(navSlug.length + 1)
+		};
+	}
+}
+/**
+* Extract the slug portion from a full pathname by stripping the basePath prefix.
+* Returns an empty string when the pathname equals the basePath exactly.
+*
+* Examples:
+*   extractSlugFromPathname("/contacts/123", "/")        → "contacts/123"
+*   extractSlugFromPathname("/portal/contacts", "/portal") → "contacts"
+*   extractSlugFromPathname("/portal", "/portal")          → ""
+*   extractSlugFromPathname("/", "/")                      → ""
+*/
+function extractSlugFromPathname(pathname, basePath) {
+	if (basePath === "/") return pathname.replace(/^\//, "");
+	if (pathname.startsWith(basePath)) return pathname.slice(basePath.length).replace(/^\//, "");
+	return pathname.replace(/^\//, "");
+}
+function isSlugInSection(item, currentSlug, navSlugs) {
+	const baseSlug = matchSlugPrefix(currentSlug, navSlugs)?.matchedSlug ?? normalizeSlug(currentSlug);
+	if (normalizeSlug(item.slug) === baseSlug) return true;
+	return item.children?.some((child) => normalizeSlug(child.slug) === baseSlug) ?? false;
+}
+//#endregion
+//#region src/shell/SdkNavigation.tsx
+function SdkNavigation({ navItems, currentSlug, onNavigate, navSlugs }) {
+	return /* @__PURE__ */ jsx(SidebarMenu, { children: navItems.map((item, index) => {
+		if (!item.slug && !item.label) return null;
+		if (!item.slug) return /* @__PURE__ */ jsx(SidebarGroupLabel, { children: item.label }, item.id ?? `section-${index}`);
+		const itemSlug = normalizeSlug(item.slug);
+		return /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(SidebarMenuButton, {
+			isActive: isSlugInSection(item, currentSlug, navSlugs),
+			onClick: () => onNavigate(itemSlug),
+			children: [item.icon && /* @__PURE__ */ jsx(RepIcon, { name: item.icon }), /* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				children: item.label
+			})]
+		}) }, item.id ?? itemSlug);
+	}) });
+}
+//#endregion
+//#region src/shell/QuickLinksDropdown.tsx
+function QuickLinksDropdown({ onNavigate }) {
+	const [open, setOpen] = useState(false);
+	const panelRef = useRef(null);
+	const buttonRef = useRef(null);
+	const close = useCallback(() => setOpen(false), []);
+	useEffect(() => {
+		if (!open) return;
+		const handleMouseDown = (e) => {
+			if (panelRef.current && !panelRef.current.contains(e.target) && buttonRef.current && !buttonRef.current.contains(e.target)) close();
+		};
+		const handleKeyDown = (e) => {
+			if (e.key === "Escape") close();
+		};
+		document.addEventListener("mousedown", handleMouseDown);
+		document.addEventListener("keydown", handleKeyDown);
+		return () => {
+			document.removeEventListener("mousedown", handleMouseDown);
+			document.removeEventListener("keydown", handleKeyDown);
+		};
+	}, [open, close]);
+	const sections = getSystemNavigationBySection();
+	const handleItemClick = (slug) => {
+		onNavigate(slug);
+		close();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative",
+		children: [/* @__PURE__ */ jsx("button", {
+			ref: buttonRef,
+			type: "button",
+			onClick: () => setOpen((prev) => !prev),
+			className: "text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground flex shrink-0 items-center justify-center rounded-md p-2",
+			"aria-label": "Quick links",
+			"aria-expanded": open,
+			children: /* @__PURE__ */ jsx(FontAwesomeIcon, {
+				icon: faTableCellsLarge,
+				className: "h-4 w-4"
+			})
+		}), open && /* @__PURE__ */ jsx("div", {
+			ref: panelRef,
+			className: "border-border bg-background absolute top-full right-0 z-50 mt-1 w-[700px] max-w-[90vw] overflow-hidden rounded-lg border shadow-lg",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "bg-background flex items-center gap-2 border-b p-4",
+					children: [/* @__PURE__ */ jsx(FontAwesomeIcon, {
+						icon: faTableCellsLarge,
+						className: "text-muted-foreground h-5 w-5"
+					}), /* @__PURE__ */ jsx("h3", {
+						className: "text-foreground text-sm font-semibold",
+						children: "Shortcuts"
+					})]
+				}), /* @__PURE__ */ jsx("div", {
+					className: "bg-muted space-y-6 p-6",
+					children: Object.entries(sections).map(([sectionName, items]) => /* @__PURE__ */ jsxs("div", {
+						className: "space-y-3",
+						children: [/* @__PURE__ */ jsx("h3", {
+							className: "text-foreground text-sm font-semibold",
+							children: sectionName
+						}), /* @__PURE__ */ jsx("div", {
+							className: "grid grid-cols-4 gap-2",
+							children: items.map((item) => /* @__PURE__ */ jsxs("button", {
+								type: "button",
+								onClick: () => handleItemClick(item.slug),
+								className: "text-sidebar-foreground hover:bg-sidebar-primary hover:text-sidebar-primary-foreground flex items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors",
+								children: [item.icon && /* @__PURE__ */ jsx(RepIcon, {
+									name: item.icon,
+									className: "text-muted-foreground h-4 w-4 shrink-0"
+								}), /* @__PURE__ */ jsx("span", {
+									className: "truncate",
+									children: item.label
+								})]
+							}, item.slug))
+						})]
+					}, sectionName))
+				})]
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/shell/SdkHeader.tsx
+function SdkHeader({ tabs, mobileTabs, currentSlug, onNavigate, navSlugs }) {
+	const sidebar = useSidebar();
+	const themeMode = useThemeMode$1();
+	const baseSlug = matchSlugPrefix(currentSlug, navSlugs)?.matchedSlug ?? normalizeSlug(currentSlug);
+	const themeIcon = themeMode.mode === "dark" ? faMoon : faSun;
+	const activeTabs = sidebar.isMobile && sidebar.useBottomNav && mobileTabs ? mobileTabs : tabs;
+	return /* @__PURE__ */ jsxs("header", {
+		className: "bg-sidebar flex h-[52px] shrink-0 items-center gap-2 px-6",
+		children: [
+			sidebar.isMobile && !sidebar.useBottomNav && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: sidebar.toggleSidebar,
+				className: "text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground mr-2 flex shrink-0 items-center justify-center rounded-md p-2",
+				"aria-label": "Toggle sidebar",
+				children: /* @__PURE__ */ jsx(FontAwesomeIcon, {
+					icon: faBars,
+					className: "size-5"
+				})
+			}),
+			/* @__PURE__ */ jsx("nav", {
+				className: "scrollbar-none flex flex-1 items-center gap-1 overflow-x-auto",
+				children: activeTabs.map((tab) => {
+					const tabSlug = normalizeSlug(tab.slug);
+					if (!tabSlug) return null;
+					return /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => onNavigate(tabSlug),
+						className: `border-b-2 px-4 py-3 text-sm font-medium whitespace-nowrap transition-colors ${tabSlug === baseSlug ? "border-primary text-foreground" : "text-muted-foreground hover:border-border hover:text-foreground border-transparent"}`,
+						children: tab.label
+					}, tab.id ?? tabSlug);
+				})
+			}),
+			/* @__PURE__ */ jsx(QuickLinksDropdown, { onNavigate }),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: themeMode.cycleMode,
+				className: "text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground ml-2 flex shrink-0 items-center justify-center rounded-md p-2",
+				"aria-label": `Switch theme (current: ${themeMode.mode})`,
+				children: /* @__PURE__ */ jsx(FontAwesomeIcon, {
+					icon: themeIcon,
+					className: "size-3"
+				})
+			})
+		]
+	});
+}
+//#endregion
+//#region src/shell/BuilderScreenView.tsx
+/**
+* BuilderScreenView — renders a builder screen's component_tree with
+* DataAwareWidget support for data-bound widgets.
+*
+* Uses the shared ScreenRenderer from rep-widgets under the hood,
+* but wraps data-bound widgets with DataAwareWidget from rep-core.
+*/
+/**
+* Renders a single widget, wrapping with DataAwareWidget if it has a dataSource.
+*/
+function WidgetRenderer({ widget, index }) {
+	const Component = useRegistry()[widget.type];
+	if (!Component) {
+		console.warn(`[BuilderScreenView] Widget type "${String(widget.type)}" not found in registry`);
+		return null;
+	}
+	if (widget.dataSource) return /* @__PURE__ */ jsx("div", {
+		className: "h-full w-full overflow-x-hidden",
+		children: /* @__PURE__ */ jsx(DataAwareWidget, {
+			widget,
+			Component
+		})
+	}, widget.id ?? index);
+	return /* @__PURE__ */ jsx("div", {
+		className: "h-full w-full overflow-x-hidden",
+		children: /* @__PURE__ */ jsx(Component, { ...widget.props })
+	}, widget.id ?? index);
+}
+/**
+* Renders a builder screen's component_tree with full data source support.
+* Widgets with `dataSource` config are automatically wrapped with `DataAwareWidget`
+* which fetches data and merges it with static props before rendering.
+*/
+function BuilderScreenViewImpl({ screen, className }) {
+	const widgets = screen.component_tree;
+	if (!widgets || widgets.length === 0) return /* @__PURE__ */ jsx("div", {
+		className: className ?? "h-full w-full",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "text-muted-foreground flex h-full items-center justify-center",
+			children: /* @__PURE__ */ jsx("p", { children: "This screen has no content yet." })
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: className ?? "h-full w-full",
+		children: widgets.map((widget, index) => {
+			if (!widget) return null;
+			return /* @__PURE__ */ jsx(WidgetRenderer, {
+				widget,
+				index
+			}, widget.id ?? index);
+		})
+	});
+}
+const BuilderScreenView = memo(BuilderScreenViewImpl);
+//#endregion
+//#region src/shell/PageRouter.tsx
+const SYSTEM_SLUG_SCREEN_MAP = {
+	messages: MessagingScreen,
+	contacts: ContactsScreen,
+	shop: OrdersScreen,
+	customers: CustomersScreen,
+	products: ProductsScreen
+};
+function PageRouter({ currentSlug, currentNavItem, customPages, screens, baseSlug, restParams }) {
+	const screenById = useMemo(() => {
+		if (!screens || screens.length === 0) return void 0;
+		return new Map(screens.map((s) => [s.id, s]));
+	}, [screens]);
+	const screenBySlug = useMemo(() => {
+		if (!screens || screens.length === 0) return void 0;
+		return new Map(screens.filter((s) => s.slug).map((s) => [s.slug, s]));
+	}, [screens]);
+	const builderScreen = useMemo(() => {
+		if (currentNavItem?.screen_id && screenById) {
+			const byId = screenById.get(currentNavItem.screen_id);
+			if (byId) return byId;
+		}
+		if (screenBySlug) return screenBySlug.get(currentSlug) ?? screenBySlug.get(baseSlug) ?? void 0;
+	}, [
+		currentNavItem?.screen_id,
+		screenById,
+		screenBySlug,
+		currentSlug,
+		baseSlug
+	]);
+	const SystemScreen = SYSTEM_SLUG_SCREEN_MAP[baseSlug];
+	if (SystemScreen) return /* @__PURE__ */ jsx(SystemScreen, {});
+	if (isSystemNavigationItem(baseSlug)) return /* @__PURE__ */ jsx(CoreScreenPlaceholder, { name: currentNavItem?.label ?? baseSlug });
+	const ExactCustomPage = customPages?.[currentSlug];
+	if (ExactCustomPage) return /* @__PURE__ */ jsx(ExactCustomPage, {
+		slug: currentSlug,
+		params: restParams
+	});
+	if (baseSlug !== currentSlug) {
+		const PrefixCustomPage = customPages?.[baseSlug];
+		if (PrefixCustomPage) return /* @__PURE__ */ jsx(PrefixCustomPage, {
+			slug: currentSlug,
+			params: restParams
+		});
+	}
+	if (builderScreen) return /* @__PURE__ */ jsx(BuilderScreenView, { screen: builderScreen });
+	return /* @__PURE__ */ jsx(CoreScreenPlaceholder, { name: currentNavItem?.label ?? currentSlug });
+}
+//#endregion
+//#region src/shell/AppNavigationContext.tsx
+const AppNavigationContext = createContext(null);
+function AppNavigationProvider({ currentSlug, basePath, navigate, children }) {
+	const buildHref = useMemo(() => {
+		return (slug) => {
+			if (basePath === "/") return `/${slug}`;
+			return `${basePath}/${slug}`;
+		};
+	}, [basePath]);
+	const value = useMemo(() => ({
+		currentSlug,
+		basePath,
+		navigate,
+		buildHref
+	}), [
+		currentSlug,
+		basePath,
+		navigate,
+		buildHref
+	]);
+	return /* @__PURE__ */ jsx(AppNavigationContext.Provider, {
+		value,
+		children
+	});
+}
+function useAppNavigation() {
+	const ctx = useContext(AppNavigationContext);
+	if (!ctx) throw new Error("useAppNavigation must be used within an <AppShell> or <AppNavigationProvider>");
+	return ctx;
+}
+//#endregion
+//#region src/shell/AppShell.tsx
+const THEME_STORAGE_KEY = "rep-theme-mode";
+const DEFAULT_NAVIGATION = [
+	{
+		label: "We Commerce",
+		children: []
+	},
+	{
+		slug: "shop",
+		label: "Shop",
+		icon: "store",
+		children: []
+	},
+	{
+		slug: "account",
+		label: "Account",
+		icon: "user-gear",
+		children: []
+	},
+	{
+		slug: "messages",
+		label: "Messaging",
+		icon: "comment",
+		children: []
+	},
+	{
+		label: "Marketing Assets",
+		children: []
+	},
+	{
+		slug: "share/products",
+		label: "Products",
+		icon: "boxes-stacked",
+		children: []
+	}
+];
+function getInitialThemeMode() {
+	if (typeof window === "undefined") return "light";
+	const stored = localStorage.getItem(THEME_STORAGE_KEY);
+	if (stored === "light" || stored === "dark") return stored;
+	return "light";
+}
+function findFirstNavigableSlug(items) {
+	for (const item of items) {
+		if (item.slug) return normalizeSlug(item.slug);
+		for (const child of item.children ?? []) if (child.slug) return normalizeSlug(child.slug);
+	}
+	return "";
+}
+function findCurrentSection(items, slug) {
+	const normalized = normalizeSlug(slug);
+	for (const item of items) {
+		if (normalizeSlug(item.slug) === normalized) return item;
+		if (item.children?.some((child) => normalizeSlug(child.slug) === normalized)) return item;
+	}
+}
+function findNavItem(items, slug) {
+	const normalized = normalizeSlug(slug);
+	for (const item of items) {
+		if (normalizeSlug(item.slug) === normalized) return item;
+		for (const child of item.children ?? []) if (normalizeSlug(child.slug) === normalized) return child;
+	}
+}
+function AppShell({ appData: appDataProp, navigation: navigationProp, customPages, basePath = "/", currentSlug: controlledSlug, onNavigate: onNavigateProp, sidebarHeader, sidebarFooter, children }) {
+	const normalizedBasePath = useMemo(() => {
+		const stripped = basePath.replace(/^\/|\/$/g, "");
+		return stripped ? `/${stripped}` : "/";
+	}, [basePath]);
+	const { data: fetchedAppData, isLoading } = useFluidApp({ enabled: !appDataProp });
+	const appData = appDataProp ?? fetchedAppData;
+	const activeTheme = useMemo(() => {
+		if (!appData?.profile?.themes?.length) return void 0;
+		const themes = appData.profile.themes;
+		const activeId = appData.profile.activeThemeId;
+		return activeId ? themes.find((t) => t.id === activeId) ?? themes[0] : themes[0];
+	}, [appData?.profile?.themes, appData?.profile?.activeThemeId]);
+	useEffect(() => {
+		if (!activeTheme) return;
+		applyTheme$1(resolveTheme$1(activeTheme));
+		return () => {
+			removeAllThemes$1();
+		};
+	}, [activeTheme]);
+	const navItems = useMemo(() => {
+		if (navigationProp) return navigationProp;
+		const profileNav = appData?.profile?.navigation?.navigation_items;
+		if (profileNav && profileNav.length > 0) return profileNav;
+		return DEFAULT_NAVIGATION;
+	}, [navigationProp, appData?.profile?.navigation?.navigation_items]);
+	const mobileNavItems = useMemo(() => {
+		const mobileNav = appData?.profile?.mobile_navigation?.navigation_items;
+		if (mobileNav && mobileNav.length > 0) return mobileNav;
+		return navItems;
+	}, [appData?.profile?.mobile_navigation?.navigation_items, navItems]);
+	const screens = appData?.screens;
+	const navSlugs = useMemo(() => collectNavSlugs(navItems), [navItems]);
+	const [themeMode, setThemeMode] = useState(getInitialThemeMode);
+	const handleThemeModeChange = useCallback((mode) => {
+		setThemeMode(mode);
+		if (typeof window !== "undefined") localStorage.setItem(THEME_STORAGE_KEY, mode);
+	}, []);
+	const [pathSlug, setPathSlug] = useState(() => {
+		if (typeof window === "undefined") return "";
+		return extractSlugFromPathname(window.location.pathname, normalizedBasePath);
+	});
+	useEffect(() => {
+		if (controlledSlug !== void 0) return;
+		if (typeof window === "undefined") return;
+		if (!extractSlugFromPathname(window.location.pathname, normalizedBasePath)) {
+			const firstSlug = findFirstNavigableSlug(navItems);
+			if (firstSlug) {
+				const targetPath = normalizedBasePath === "/" ? `/${firstSlug}` : `${normalizedBasePath}/${firstSlug}`;
+				history.replaceState(null, "", targetPath);
+				setPathSlug(firstSlug);
+			}
+		}
+	}, [
+		navItems,
+		controlledSlug,
+		normalizedBasePath
+	]);
+	useEffect(() => {
+		if (controlledSlug !== void 0) return;
+		const handlePopState = () => {
+			setPathSlug(extractSlugFromPathname(window.location.pathname, normalizedBasePath));
+		};
+		window.addEventListener("popstate", handlePopState);
+		return () => window.removeEventListener("popstate", handlePopState);
+	}, [controlledSlug, normalizedBasePath]);
+	const activeSlug = controlledSlug ?? pathSlug;
+	const handleNavigate = useCallback((slug) => {
+		if (onNavigateProp) {
+			onNavigateProp(slug);
+			return;
+		}
+		const targetPath = normalizedBasePath === "/" ? `/${slug}` : `${normalizedBasePath}/${slug}`;
+		history.pushState(null, "", targetPath);
+		setPathSlug(slug);
+	}, [onNavigateProp, normalizedBasePath]);
+	const slugMatch = useMemo(() => matchSlugPrefix(activeSlug, navSlugs), [activeSlug, navSlugs]);
+	const baseSlug = slugMatch?.matchedSlug ?? normalizeSlug(activeSlug);
+	const restParams = slugMatch?.rest ?? "";
+	const secondLevelTabs = findCurrentSection(navItems, baseSlug)?.children ?? [];
+	const mobileSecondLevelTabs = findCurrentSection(mobileNavItems, baseSlug)?.children ?? [];
+	const currentNavItem = findNavItem(navItems, baseSlug);
+	const screenTitle = currentNavItem?.label || screens?.find((s) => s.id === currentNavItem?.screen_id)?.name || void 0;
+	const content = typeof children === "function" ? children({
+		currentSlug: activeSlug,
+		currentNavItem
+	}) : children ?? /* @__PURE__ */ jsxs(ScreenHeaderProvider, { children: [/* @__PURE__ */ jsx(ScreenHeader, { title: screenTitle }), /* @__PURE__ */ jsx(PageRouter, {
+		currentSlug: activeSlug,
+		currentNavItem,
+		customPages,
+		screens,
+		baseSlug,
+		restParams
+	})] });
+	if (isLoading && !appData) return /* @__PURE__ */ jsx(AppShellLoading, {});
+	return /* @__PURE__ */ jsx(ThemeModeProvider$1, {
+		mode: themeMode,
+		onModeChange: handleThemeModeChange,
+		autoModeEnabled: false,
+		children: /* @__PURE__ */ jsx(AppNavigationProvider, {
+			currentSlug: activeSlug,
+			basePath: normalizedBasePath,
+			navigate: handleNavigate,
+			children: /* @__PURE__ */ jsx("div", {
+				"data-theme": activeTheme?.id,
+				"data-theme-mode": themeMode === "auto" ? void 0 : themeMode,
+				children: /* @__PURE__ */ jsx(AppShellLayout, {
+					sidebarContent: /* @__PURE__ */ jsx(SdkNavigation, {
+						navItems,
+						currentSlug: activeSlug,
+						onNavigate: handleNavigate,
+						navSlugs
+					}),
+					headerContent: /* @__PURE__ */ jsx(SdkHeader, {
+						tabs: secondLevelTabs,
+						mobileTabs: mobileSecondLevelTabs,
+						currentSlug: activeSlug,
+						onNavigate: handleNavigate,
+						navSlugs
+					}),
+					sidebarHeader,
+					sidebarFooter,
+					useBottomNav: true,
+					afterContent: /* @__PURE__ */ jsx(SdkBottomNav, {
+						navItems: mobileNavItems,
+						currentSlug: activeSlug,
+						onNavigate: handleNavigate
+					}),
+					children: content
+				})
+			})
+		})
+	});
+}
+//#endregion
+//#region src/shell/AppLink.tsx
+/**
+* SPA-aware link that renders a real `<a href>` for accessibility
+* (right-click, ctrl+click, screen readers) but intercepts normal
+* clicks for client-side navigation.
+*/
+const AppLink = forwardRef(function AppLink({ to, onClick, children, ...rest }, ref) {
+	const { navigate, buildHref } = useAppNavigation();
+	const handleClick = (e) => {
+		onClick?.(e);
+		if (e.defaultPrevented) return;
+		if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+		if (e.button !== 0) return;
+		if (rest.target && rest.target !== "_self") return;
+		e.preventDefault();
+		navigate(to);
+	};
+	return /* @__PURE__ */ jsx("a", {
+		ref,
+		href: buildHref(to),
+		onClick: handleClick,
+		...rest,
+		children
+	});
+});
+//#endregion
+var DEFAULT_COLORS = themes_exports.DEFAULT_COLORS;
+var DEFAULT_FONT_FAMILIES = themes_exports.DEFAULT_FONT_FAMILIES;
+var DEFAULT_FONT_SIZES = themes_exports.DEFAULT_FONT_SIZES;
+var DEFAULT_RADII = themes_exports.DEFAULT_RADII;
+var DEFAULT_SPACING = themes_exports.DEFAULT_SPACING;
+var DEFAULT_THEME_ID = themes_exports.DEFAULT_THEME_ID;
+var DEFAULT_THEME_NAME = themes_exports.DEFAULT_THEME_NAME;
+var FONT_FAMILY_KEYS = themes_exports.FONT_FAMILY_KEYS;
+var FONT_SIZE_KEYS = themes_exports.FONT_SIZE_KEYS;
+var RADIUS_KEYS = themes_exports.RADIUS_KEYS;
+var SEMANTIC_COLOR_NAMES = themes_exports.SEMANTIC_COLOR_NAMES;
+var SHADE_STEPS = themes_exports.SHADE_STEPS;
+var applyTheme = themes_exports.applyTheme;
+var deriveDarkVariant = themes_exports.deriveDarkVariant;
+var deserialiseTheme = themes_exports.deserialiseTheme;
+var generateShades = themes_exports.generateShades;
+var generateThemeCSS = themes_exports.generateThemeCSS;
+var getDefaultThemeDefinition = themes_exports.getDefaultThemeDefinition;
+var getForegroundColor = themes_exports.getForegroundColor;
+var mergeDarkOverrides = themes_exports.mergeDarkOverrides;
+var parseColor = themes_exports.parseColor;
+var removeAllThemes = themes_exports.removeAllThemes;
+var removeTheme = themes_exports.removeTheme;
+var resolveTheme = themes_exports.resolveTheme;
+var serialiseTheme = themes_exports.serialiseTheme;
+export { ACTIVITY_SLUGS, APP_DATA_QUERY_KEY, AUTH_CONSTANTS, AlertWidget, ApiError, AppLink, AppNavigationProvider, AppShell, AuthError, AuthLoading, BuilderScreenView, CORE_PAGE_IDS, CURRENT_REP_QUERY_KEY, CalendarWidget, CarouselWidget, CatchUpWidget, ChartWidget, ContactsScreen, ContainerWidget, CustomersScreen, DEFAULT_AUTH_URL, DEFAULT_COLORS, DEFAULT_FONT_FAMILIES, DEFAULT_FONT_SIZES, DEFAULT_RADII, DEFAULT_SDK_WIDGET_REGISTRY, DEFAULT_SPACING, DEFAULT_THEME_ID, DEFAULT_THEME_NAME, EmbedWidget, FONT_FAMILY_KEYS, FONT_SIZE_KEYS, FluidAuthProvider, FluidProvider, FluidThemeProvider, ImageWidget, LayoutWidget, ListWidget, MessagingScreen, MySiteWidget, NestedWidget, OrdersScreen, PAGE_CATEGORIES, PERMISSIONS_QUERY_KEY, PROFILE_QUERY_KEY, PROPERTY_FIELD_TYPES, PageRouter, PageTemplateProvider, PageTemplateRegistry, ProductsScreen, QuickLinksDropdown, QuickShareWidget, RADIUS_KEYS, RecentActivityWidget, RequireAuth, SEMANTIC_COLOR_NAMES, SHADE_STEPS, STORAGE_KEYS, SdkHeader, SdkNavigation, SpacerWidget, TableWidget, TextWidget, ThemeModeProvider, ToDoWidget, URL_PARAMS, USER_TYPES, VideoWidget, WIDGET_TYPE_NAMES, alertWidgetPropertySchema, applyTheme, assertDefined, assertNever, buildThemeDefinition, calendarWidgetPropertySchema, carouselWidgetPropertySchema, catchUpWidgetPropertySchema, chartWidgetPropertySchema, cleanTokenFromUrl, clearTokens, collectNavSlugs, contactsScreenPropertySchema, containerWidgetPropertySchema, createDefaultAuthRedirect, createFluidClient, createFluidFileUploader, createScreen, createWidgetFromShareable, createWidgetRegistry, customersScreenPropertySchema, decodeToken, deriveDarkVariant, deserialiseTheme, embedWidgetPropertySchema, extractAllTokensFromUrl, extractCompanyTokenFromUrl, extractSlugFromPathname, extractTokenFromUrl, gapValues, generateShades, generateThemeCSS, getActiveThemeId, getAvailablePageTemplates, getCorePageTemplates, getDefaultThemeDefinition, getForegroundColor, getOptionalPageTemplates, getProperty, getStoredToken, getThemeModeAttribute, getTokenExpiration, getTokenTimeRemaining, groupChildrenByColumn, hasData, hasStoredToken, hasTokenInUrl, imageWidgetPropertySchema, isActivitySlug, isApiError, isContactStatus, isErrorResult, isIdle, isLoading, isPropertyFieldType, isSlugInSection, isTokenExpired, isUserType, isValidToken, isWidgetType, isWidgetTypeName, layoutWidgetPropertySchema, listWidgetPropertySchema, matchSlugPrefix, mergeDarkOverrides, messagingScreenPropertySchema, mySiteWidgetPropertySchema, nestedWidgetPropertySchema, normalizeComponentTree, ordersScreenPropertySchema, parseColor, productsScreenPropertySchema, quickShareWidgetPropertySchema, recentActivityWidgetPropertySchema, removeAllThemes, removeTheme, resolveNavigationPages, resolveTheme, screenPropertySchemas, sectionLayoutConfig, selectProperty, serialiseTheme, spacerWidgetPropertySchema, storeToken, tableWidgetPropertySchema, textWidgetPropertySchema, toDoWidgetPropertySchema, toNavigationItem, toScreenDefinition, transformManifestToRepAppData, transformThemes, useActivities, useAppNavigation, useCalendarEvents, useCatchUps, useContact, useContacts, useConversationMessages, useConversations, useCurrentRep, useFluidApi, useFluidApp, useFluidAuth, useFluidAuthContext, useFluidContext, useFluidPermissions, useFluidProfile, useFluidTheme, useMessagingAuth, useMessagingConfig, useMySite, usePageTemplates, useResolvedPages, useThemeContext, useThemeMode, useTodos, validateNavigationPages, validateToken, videoWidgetPropertySchema, widgetPropertySchemas };
+
+//# sourceMappingURL=index.mjs.map