@rio-cloud/rio-uikit 2.5.0 → 3.0.0-beta.1

package/hooks/useUrlState.js.map

@@ -1 +1 @@
-{"version":3,"file":"useUrlState.js","sources":["../../src/hooks/useUrlState.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { isEqual, isNil } from 'es-toolkit';\n\nimport { deserializeValue, serializeValue, toQueryString, type UrlConfigItem } from '../utils/routeUtils';\nimport useAfterMount from './useAfterMount';\nimport useLatest from './useLatest';\n\ntype QueryString = string;\n\n/**\n * Configuration contract for `useUrlState`.\n *\n * Use this hook when your application uses **store/redux as source of truth**\n * and you want a centralized URL synchronizer:\n * - URL -> store: parse incoming search params and dispatch updates\n * - store -> URL: serialize current store values and navigate with push/replace\n *\n * Recommended setup:\n * - Mount one top-level synchronizer component near the router\n * - Pass only URL-managed store values via `storeValues`\n * - Keep URL writing centralized through this hook\n *\n * Not intended for \"URL-only state\" screens where you directly read/write\n * params via router APIs (for example `useSearchParams`) without store sync.\n */\ntype UseUrlStateProps<TState> = {\n    /**\n     * URL sync configuration.\n     * Each entry maps one query param key to a store selector and update action.\n     */\n    config: readonly UrlConfigItem<TState, any>[];\n\n    /**\n     * Current URL search string (for example `location.search`).\n     * Expected shape: `'?q=test&sort=-name'` or `''`.\n     */\n    searchString: QueryString;\n\n    /**\n     * Current store values used by the configured selectors. This could be values from a redux store.\n     * Keys should match the `config` keys, values are compared against URL/defaults.\n     */\n    storeValues: Record<string, unknown>;\n\n    /**\n     * Optional localStorage key for sticky URL state restore on initial load\n     * when managed URL params are missing.\n     */\n    localStorageKey?: string;\n\n    /**\n     * Router navigation type (typically from React Router `useNavigationType`).\n     * `POP` indicates browser back/forward navigation.\n     */\n    navigationType?: 'POP' | 'PUSH' | 'REPLACE' | string;\n\n    /**\n     * Store update callback invoked when URL -> store sync detects a change.\n     * Usually wraps `dispatch(...)`.\n     */\n    onUpdateStore: (action: any) => void;\n\n    /**\n     * Navigation callback used for store -> URL sync writes.\n     * `historyMode` controls whether to `push` or `replace` the history entry.\n     */\n    onNavigate: (search: string, historyMode: 'push' | 'replace') => void;\n};\n\n// Helper for URL for Comparison:\n// Browsers/Routers might decode parts of the string automatically.\n// We force everything to a standard encoded format for reliable diffing.\nconst normalizeSearch = (search: string) => {\n    const clean = search.replace(/^\\?/, '');\n    return new URLSearchParams(clean).toString();\n};\n\nconst parseConfigValue = (item: UrlConfigItem<any, any>, urlRawValue: string | null) =>\n    item.customDeserialize ? item.customDeserialize(urlRawValue) : deserializeValue(urlRawValue, item.type ?? 'string');\n\nconst getValueToApply = (parsedValue: unknown, defaultValue: unknown) => parsedValue ?? defaultValue;\n\nconst shouldDispatchParsedValue = (params: {\n    valueToApply: unknown;\n    currentStoreValue: unknown;\n    urlRawValue: string | null;\n    defaultValue: unknown;\n}) => {\n    const { valueToApply, currentStoreValue, urlRawValue, defaultValue } = params;\n\n    if (typeof valueToApply === 'undefined' || isEqual(valueToApply, currentStoreValue)) {\n        return false;\n    }\n\n    const isUrlMissing = isNil(urlRawValue);\n    const isStoreDefault = isEqual(currentStoreValue, defaultValue);\n    return !(isUrlMissing && isStoreDefault);\n};\n\nconst serializeConfigValue = (\n    item: UrlConfigItem<any, any>,\n    storeValue: unknown,\n    isDefault: boolean\n): string | null => {\n    if (isDefault) {\n        return null;\n    }\n    if (item.customSerialize) {\n        return item.customSerialize(storeValue as never);\n    }\n    return serializeValue(storeValue as never, item.type ?? 'string');\n};\n\nconst applySearchParamUpdate = (params: {\n    nextParams: URLSearchParams;\n    key: string;\n    serializedValue: string | null;\n}) => {\n    const { nextParams, key, serializedValue } = params;\n\n    if (isNil(serializedValue)) {\n        if (!nextParams.has(key)) {\n            return false;\n        }\n        nextParams.delete(key);\n        return true;\n    }\n\n    nextParams.set(key, serializedValue);\n    return true;\n};\n\nconst isUrlValueDefault = (item: UrlConfigItem<any, any>, urlRawValue: string | null) => {\n    if (isNil(urlRawValue)) {\n        return true;\n    }\n    const parsedValue = parseConfigValue(item, urlRawValue);\n    const valueFromUrl = getValueToApply(parsedValue, item.defaultValue);\n    return isEqual(valueFromUrl, item.defaultValue);\n};\n\n/**\n * ----------------------------------------------------------------------------\n * 1. URL -> Redux\n * ----------------------------------------------------------------------------\n * Responsibilities:\n * - Listen to searchString changes.\n * - Check against the \"Loop Lock\" (ignore if we just wrote this URL).\n * - Parse and Dispatch actions.\n */\ntype UseSyncUrlToStoreProps = {\n    config: readonly UrlConfigItem<any, any>[];\n    searchString: string;\n    storeValues: Record<string, unknown>;\n    navigationType?: string;\n    onUpdateStore: (a: any) => void;\n    lastWrittenNormalizedSearchRef: React.MutableRefObject<string | null>;\n    isRestoringRef: React.MutableRefObject<boolean>;\n    hasCheckedStorageRef: React.MutableRefObject<boolean>;\n};\n\nconst useSyncUrlToStore = ({\n    config,\n    searchString,\n    storeValues,\n    navigationType,\n    onUpdateStore,\n    lastWrittenNormalizedSearchRef,\n    isRestoringRef,\n    hasCheckedStorageRef,\n}: UseSyncUrlToStoreProps) => {\n    // Keep latest values stable for URL-driven effect without adding them to deps.\n    const latestConfigRef = useLatest(config);\n    const latestStoreValuesRef = useLatest(storeValues);\n    const latestOnUpdateStoreRef = useLatest(onUpdateStore);\n\n    useEffect(() => {\n        // SAFETY: Wait for Storage Check (Sticky State)\n        if (!hasCheckedStorageRef.current) {\n            return;\n        }\n\n        // 1. Check Loop Lock (Did we just write this URL?)\n        const currentStandard = normalizeSearch(searchString);\n        if (lastWrittenNormalizedSearchRef.current === currentStandard) {\n            // Match found. Release marker and continue parsing.\n            // This avoids skipping browser POP navigation when search equals\n            // a previously written URL.\n            lastWrittenNormalizedSearchRef.current = null;\n        }\n\n        // 2. Check Restoration Block\n        if (isRestoringRef.current) {\n            return;\n        }\n\n        // 3. Parse & Diff\n        const currentParams = new URLSearchParams(searchString);\n\n        latestConfigRef.current.forEach(item => {\n            const urlRawValue = currentParams.get(item.key);\n            const parsedValue = parseConfigValue(item, urlRawValue);\n            const valueToApply = getValueToApply(parsedValue, item.defaultValue);\n            const currentStoreValue = latestStoreValuesRef.current[item.key];\n\n            if (\n                shouldDispatchParsedValue({\n                    valueToApply,\n                    currentStoreValue,\n                    urlRawValue,\n                    defaultValue: item.defaultValue,\n                })\n            ) {\n                // Missing URL params should not reset store on regular in-app navigations.\n                // We only apply \"missing => default\" during POP (back/forward) transitions.\n                if (isNil(urlRawValue) && navigationType !== 'POP') {\n                    return;\n                }\n                latestOnUpdateStoreRef.current(item.action(valueToApply));\n            }\n        });\n\n        // CRITICAL: This dependency array MUST NOT include 'onUpdateStore' or 'storeValues'.\n        // It should ONLY run when the URL string physically changes.\n    }, [searchString, lastWrittenNormalizedSearchRef, isRestoringRef, hasCheckedStorageRef]);\n};\n\n/**\n * ----------------------------------------------------------------------------\n * 2. Redux -> URL\n * ----------------------------------------------------------------------------\n * Responsibilities:\n * - Listen to Redux changes.\n * - Calculate Ideal URL.\n * - Diff against Current URL.\n * - Handle Navigation Type ('POP' prevention).\n * - Set \"Loop Lock\" and Navigate.\n */\ntype UseSyncStoreToUrlProps = {\n    config: readonly UrlConfigItem<any, any>[];\n    searchString: string;\n    storeValues: Record<string, unknown>;\n    onNavigate: (s: string, m: 'push' | 'replace') => void;\n    lastWrittenNormalizedSearchRef: React.MutableRefObject<string | null>;\n    localStorageKey?: string;\n    navigationType?: string;\n};\n\nconst useSyncStoreToUrl = (props: UseSyncStoreToUrlProps) => {\n    const {\n        config,\n        searchString,\n        storeValues,\n        onNavigate,\n        lastWrittenNormalizedSearchRef,\n        localStorageKey,\n        navigationType,\n    } = props;\n\n    // Keep navigate callback stable inside effect.\n    const latestOnNavigateRef = useLatest(onNavigate);\n    const previousSearchRef = useRef<string | null>(normalizeSearch(searchString));\n\n    // Skip initial render (Reader handles hydration)\n    useAfterMount(() => {\n        const currentStandardSearch = normalizeSearch(searchString);\n        const hasSearchChanged = previousSearchRef.current !== currentStandardSearch;\n        previousSearchRef.current = currentStandardSearch;\n\n        // POP navigation should be URL -> store only for the transition step.\n        // If we write here, we can overwrite the forward stack.\n        // This prevents the writer from immediately rewriting URL during back/forward\n        // transitions (which can overwrite forward history).\n        const isPopNavigationSync = navigationType === 'POP' && hasSearchChanged;\n        if (isPopNavigationSync) {\n            return;\n        }\n\n        const currentParams = new URLSearchParams(searchString);\n        const nextParams = new URLSearchParams(searchString);\n\n        let hasChanges = false;\n        let hasPushChange = false;\n        let isAllDefaults = true;\n\n        config.forEach(item => {\n            const storeVal = storeValues[item.key];\n            const currentUrlVal = currentParams.get(item.key);\n            const isDefault = isEqual(storeVal, item.defaultValue);\n\n            if (!isDefault) isAllDefaults = false;\n\n            const serializedVal = serializeConfigValue(item, storeVal, isDefault);\n\n            if (serializedVal !== currentUrlVal) {\n                hasChanges =\n                    applySearchParamUpdate({ nextParams, key: item.key, serializedValue: serializedVal }) || hasChanges;\n\n                // Determine history mode preference for changed fields.\n                // Global rule:\n                // - 'push' items always push when changed.\n                // - 'replace' items push once on default -> non-default, then replace thereafter.\n                const historyMode = item.history ?? 'push';\n                if (historyMode === 'push') {\n                    hasPushChange = true;\n                } else if (!isDefault && isUrlValueDefault(item, currentUrlVal)) {\n                    hasPushChange = true;\n                }\n            }\n        });\n\n        if (hasChanges) {\n            // 1. Generate URLs\n            const prettyString = toQueryString(nextParams, config);\n            const strictString = nextParams.toString();\n\n            // 2. Set loop lock (Crucial: Use strict string for comparison)\n            lastWrittenNormalizedSearchRef.current = strictString;\n\n            // 3. Persist to Storage (if key provided)\n            if (localStorageKey) {\n                if (isAllDefaults && prettyString === '') {\n                    localStorage.removeItem(localStorageKey);\n                } else {\n                    localStorage.setItem(localStorageKey, prettyString);\n                }\n            }\n\n            // 4. Calculate Mode\n            const mode = hasPushChange ? 'push' : 'replace';\n\n            latestOnNavigateRef.current(prettyString, mode);\n        }\n    }, [storeValues, searchString, config, localStorageKey, navigationType]);\n    // ^ onNavigate excluded from deps (used via ref) to be safe,\n    // though storeValues changing is the main trigger.\n};\n\n/**\n * ----------------------------------------------------------------------------\n * 3. RESTORER HOOK (LocalStorage -> Redux)\n * ----------------------------------------------------------------------------\n * Responsibilities:\n * - Run once on mount.\n * - If URL is empty & Storage exists -> Force Redux update & URL Replace.\n */\n\ntype UseInitialRestoreFromStorageProps = {\n    config: readonly UrlConfigItem<any, any>[];\n    searchString: string;\n    localStorageKey?: string;\n    onUpdateStore: (a: any) => void;\n    onNavigate: (s: string, m: 'push' | 'replace') => void;\n    isRestoringRef: React.MutableRefObject<boolean>;\n    lastWrittenNormalizedSearchRef: React.MutableRefObject<string | null>;\n    hasCheckedStorageRef: React.MutableRefObject<boolean>;\n};\n\nconst useInitialRestoreFromStorage = (props: UseInitialRestoreFromStorageProps) => {\n    const {\n        config,\n        searchString,\n        localStorageKey,\n        onUpdateStore,\n        onNavigate,\n        isRestoringRef,\n        lastWrittenNormalizedSearchRef,\n        hasCheckedStorageRef,\n    } = props;\n\n    useEffect(() => {\n        if (!localStorageKey) {\n            hasCheckedStorageRef.current = true;\n            return;\n        }\n\n        const currentParams = new URLSearchParams(searchString);\n        const hasManagedParams = config.some(item => currentParams.has(item.key));\n\n        // Only restore if URL is \"empty\" regarding our config\n        if (!hasManagedParams) {\n            const savedString = localStorage.getItem(localStorageKey);\n\n            if (savedString) {\n                // Block the Reader from interfering\n                isRestoringRef.current = true;\n\n                // 1. Hydrate Redux (conceptually similar to Reader logic but forced)\n                const savedParams = new URLSearchParams(savedString);\n                config.forEach(item => {\n                    const val = savedParams.get(item.key);\n                    const deserialized = parseConfigValue(item, val);\n\n                    if (deserialized !== null && typeof deserialized !== 'undefined') {\n                        onUpdateStore(item.action(deserialized));\n                    }\n                });\n\n                // 2. Hydrate URL (Visual)\n                const cleanSaved = savedString.replace(/^\\?/, '');\n                const cleanCurrent = searchString.replace(/^\\?/, '');\n\n                if (cleanSaved !== cleanCurrent) {\n                    // Set Lock so Reader doesn't freak out\n                    lastWrittenNormalizedSearchRef.current = new URLSearchParams(savedString).toString();\n                    onNavigate(savedString, 'replace');\n                }\n\n                // Unlock after tick\n                setTimeout(() => {\n                    isRestoringRef.current = false;\n                }, 0);\n            }\n        }\n\n        hasCheckedStorageRef.current = true;\n    }, [localStorageKey]); // Run once\n};\n\n/**\n * ----------------------------------------------------------------------------\n * MAIN EXPORT\n * ----------------------------------------------------------------------------\n */\nconst useUrlState = <TState>(props: UseUrlStateProps<TState>) => {\n    // Shared communication channel between hooks\n\n    // Stores the last URL search string written by this hook (normalized encoding).\n    const lastWrittenNormalizedSearchRef = useRef<string | null>(null);\n\n    // Shared flag for Restoration phase\n    const isRestoringRef = useRef(false);\n    const hasCheckedStorageRef = useRef(!props.localStorageKey);\n\n    // 1. Sticky State (Restorer)\n    useInitialRestoreFromStorage({\n        ...props,\n        lastWrittenNormalizedSearchRef,\n        isRestoringRef,\n        hasCheckedStorageRef,\n    });\n\n    // 2. Read from URL (URL -> Redux)\n    useSyncUrlToStore({\n        ...props,\n        lastWrittenNormalizedSearchRef,\n        isRestoringRef,\n        hasCheckedStorageRef,\n    });\n\n    // 3. Write to URL (Redux -> URL)\n    useSyncStoreToUrl({\n        ...props,\n        lastWrittenNormalizedSearchRef,\n    });\n};\n\nexport default useUrlState;\n"],"names":["normalizeSearch","search","clean","parseConfigValue","item","urlRawValue","deserializeValue","getValueToApply","parsedValue","defaultValue","shouldDispatchParsedValue","params","valueToApply","currentStoreValue","isEqual","isUrlMissing","isNil","isStoreDefault","serializeConfigValue","storeValue","isDefault","serializeValue","applySearchParamUpdate","nextParams","key","serializedValue","isUrlValueDefault","valueFromUrl","useSyncUrlToStore","config","searchString","storeValues","navigationType","onUpdateStore","lastWrittenNormalizedSearchRef","isRestoringRef","hasCheckedStorageRef","latestConfigRef","useLatest","latestStoreValuesRef","latestOnUpdateStoreRef","useEffect","currentStandard","currentParams","useSyncStoreToUrl","props","onNavigate","localStorageKey","latestOnNavigateRef","previousSearchRef","useRef","useAfterMount","currentStandardSearch","hasSearchChanged","hasChanges","hasPushChange","isAllDefaults","storeVal","currentUrlVal","serializedVal","prettyString","toQueryString","strictString","mode","useInitialRestoreFromStorage","savedString","savedParams","val","deserialized","cleanSaved","cleanCurrent","useUrlState"],"mappings":"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"}
+{"version":3,"file":"useUrlState.js","names":[],"sources":["../../src/hooks/useUrlState.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { isEqual, isNil } from 'es-toolkit';\n\nimport { deserializeValue, serializeValue, toQueryString, type UrlConfigItem } from '../utils/routeUtils';\nimport useAfterMount from './useAfterMount';\nimport useLatest from './useLatest';\n\ntype QueryString = string;\n\n/**\n * Configuration contract for `useUrlState`.\n *\n * Use this hook when your application uses **store/redux as source of truth**\n * and you want a centralized URL synchronizer:\n * - URL -> store: parse incoming search params and dispatch updates\n * - store -> URL: serialize current store values and navigate with push/replace\n *\n * Recommended setup:\n * - Mount one top-level synchronizer component near the router\n * - Pass only URL-managed store values via `storeValues`\n * - Keep URL writing centralized through this hook\n *\n * Not intended for \"URL-only state\" screens where you directly read/write\n * params via router APIs (for example `useSearchParams`) without store sync.\n */\ntype UseUrlStateProps<TState> = {\n    /**\n     * URL sync configuration.\n     * Each entry maps one query param key to a store selector and update action.\n     */\n    config: readonly UrlConfigItem<TState, any>[];\n\n    /**\n     * Current URL search string (for example `location.search`).\n     * Expected shape: `'?q=test&sort=-name'` or `''`.\n     */\n    searchString: QueryString;\n\n    /**\n     * Current store values used by the configured selectors. This could be values from a redux store.\n     * Keys should match the `config` keys, values are compared against URL/defaults.\n     */\n    storeValues: Record<string, unknown>;\n\n    /**\n     * Optional localStorage key for sticky URL state restore on initial load\n     * when managed URL params are missing.\n     */\n    localStorageKey?: string;\n\n    /**\n     * Router navigation type (typically from React Router `useNavigationType`).\n     * `POP` indicates browser back/forward navigation.\n     */\n    navigationType?: 'POP' | 'PUSH' | 'REPLACE' | string;\n\n    /**\n     * Store update callback invoked when URL -> store sync detects a change.\n     * Usually wraps `dispatch(...)`.\n     */\n    onUpdateStore: (action: any) => void;\n\n    /**\n     * Navigation callback used for store -> URL sync writes.\n     * `historyMode` controls whether to `push` or `replace` the history entry.\n     */\n    onNavigate: (search: string, historyMode: 'push' | 'replace') => void;\n};\n\n// Helper for URL for Comparison:\n// Browsers/Routers might decode parts of the string automatically.\n// We force everything to a standard encoded format for reliable diffing.\nconst normalizeSearch = (search: string) => {\n    const clean = search.replace(/^\\?/, '');\n    return new URLSearchParams(clean).toString();\n};\n\nconst parseConfigValue = (item: UrlConfigItem<any, any>, urlRawValue: string | null) =>\n    item.customDeserialize ? item.customDeserialize(urlRawValue) : deserializeValue(urlRawValue, item.type ?? 'string');\n\nconst getValueToApply = (parsedValue: unknown, defaultValue: unknown) => parsedValue ?? defaultValue;\n\nconst shouldDispatchParsedValue = (params: {\n    valueToApply: unknown;\n    currentStoreValue: unknown;\n    urlRawValue: string | null;\n    defaultValue: unknown;\n}) => {\n    const { valueToApply, currentStoreValue, urlRawValue, defaultValue } = params;\n\n    if (typeof valueToApply === 'undefined' || isEqual(valueToApply, currentStoreValue)) {\n        return false;\n    }\n\n    const isUrlMissing = isNil(urlRawValue);\n    const isStoreDefault = isEqual(currentStoreValue, defaultValue);\n    return !(isUrlMissing && isStoreDefault);\n};\n\nconst serializeConfigValue = (\n    item: UrlConfigItem<any, any>,\n    storeValue: unknown,\n    isDefault: boolean\n): string | null => {\n    if (isDefault) {\n        return null;\n    }\n    if (item.customSerialize) {\n        return item.customSerialize(storeValue as never);\n    }\n    return serializeValue(storeValue as never, item.type ?? 'string');\n};\n\nconst applySearchParamUpdate = (params: {\n    nextParams: URLSearchParams;\n    key: string;\n    serializedValue: string | null;\n}) => {\n    const { nextParams, key, serializedValue } = params;\n\n    if (isNil(serializedValue)) {\n        if (!nextParams.has(key)) {\n            return false;\n        }\n        nextParams.delete(key);\n        return true;\n    }\n\n    nextParams.set(key, serializedValue);\n    return true;\n};\n\nconst isUrlValueDefault = (item: UrlConfigItem<any, any>, urlRawValue: string | null) => {\n    if (isNil(urlRawValue)) {\n        return true;\n    }\n    const parsedValue = parseConfigValue(item, urlRawValue);\n    const valueFromUrl = getValueToApply(parsedValue, item.defaultValue);\n    return isEqual(valueFromUrl, item.defaultValue);\n};\n\n/**\n * ----------------------------------------------------------------------------\n * 1. URL -> Redux\n * ----------------------------------------------------------------------------\n * Responsibilities:\n * - Listen to searchString changes.\n * - Check against the \"Loop Lock\" (ignore if we just wrote this URL).\n * - Parse and Dispatch actions.\n */\ntype UseSyncUrlToStoreProps = {\n    config: readonly UrlConfigItem<any, any>[];\n    searchString: string;\n    storeValues: Record<string, unknown>;\n    navigationType?: string;\n    onUpdateStore: (a: any) => void;\n    lastWrittenNormalizedSearchRef: React.MutableRefObject<string | null>;\n    isRestoringRef: React.MutableRefObject<boolean>;\n    hasCheckedStorageRef: React.MutableRefObject<boolean>;\n};\n\nconst useSyncUrlToStore = ({\n    config,\n    searchString,\n    storeValues,\n    navigationType,\n    onUpdateStore,\n    lastWrittenNormalizedSearchRef,\n    isRestoringRef,\n    hasCheckedStorageRef,\n}: UseSyncUrlToStoreProps) => {\n    // Keep latest values stable for URL-driven effect without adding them to deps.\n    const latestConfigRef = useLatest(config);\n    const latestStoreValuesRef = useLatest(storeValues);\n    const latestOnUpdateStoreRef = useLatest(onUpdateStore);\n\n    useEffect(() => {\n        // SAFETY: Wait for Storage Check (Sticky State)\n        if (!hasCheckedStorageRef.current) {\n            return;\n        }\n\n        // 1. Check Loop Lock (Did we just write this URL?)\n        const currentStandard = normalizeSearch(searchString);\n        if (lastWrittenNormalizedSearchRef.current === currentStandard) {\n            // Match found. Release marker and continue parsing.\n            // This avoids skipping browser POP navigation when search equals\n            // a previously written URL.\n            lastWrittenNormalizedSearchRef.current = null;\n        }\n\n        // 2. Check Restoration Block\n        if (isRestoringRef.current) {\n            return;\n        }\n\n        // 3. Parse & Diff\n        const currentParams = new URLSearchParams(searchString);\n\n        latestConfigRef.current.forEach(item => {\n            const urlRawValue = currentParams.get(item.key);\n            const parsedValue = parseConfigValue(item, urlRawValue);\n            const valueToApply = getValueToApply(parsedValue, item.defaultValue);\n            const currentStoreValue = latestStoreValuesRef.current[item.key];\n\n            if (\n                shouldDispatchParsedValue({\n                    valueToApply,\n                    currentStoreValue,\n                    urlRawValue,\n                    defaultValue: item.defaultValue,\n                })\n            ) {\n                // Missing URL params should not reset store on regular in-app navigations.\n                // We only apply \"missing => default\" during POP (back/forward) transitions.\n                if (isNil(urlRawValue) && navigationType !== 'POP') {\n                    return;\n                }\n                latestOnUpdateStoreRef.current(item.action(valueToApply));\n            }\n        });\n\n        // CRITICAL: This dependency array MUST NOT include 'onUpdateStore' or 'storeValues'.\n        // It should ONLY run when the URL string physically changes.\n    }, [searchString, lastWrittenNormalizedSearchRef, isRestoringRef, hasCheckedStorageRef]);\n};\n\n/**\n * ----------------------------------------------------------------------------\n * 2. Redux -> URL\n * ----------------------------------------------------------------------------\n * Responsibilities:\n * - Listen to Redux changes.\n * - Calculate Ideal URL.\n * - Diff against Current URL.\n * - Handle Navigation Type ('POP' prevention).\n * - Set \"Loop Lock\" and Navigate.\n */\ntype UseSyncStoreToUrlProps = {\n    config: readonly UrlConfigItem<any, any>[];\n    searchString: string;\n    storeValues: Record<string, unknown>;\n    onNavigate: (s: string, m: 'push' | 'replace') => void;\n    lastWrittenNormalizedSearchRef: React.MutableRefObject<string | null>;\n    localStorageKey?: string;\n    navigationType?: string;\n};\n\nconst useSyncStoreToUrl = (props: UseSyncStoreToUrlProps) => {\n    const {\n        config,\n        searchString,\n        storeValues,\n        onNavigate,\n        lastWrittenNormalizedSearchRef,\n        localStorageKey,\n        navigationType,\n    } = props;\n\n    // Keep navigate callback stable inside effect.\n    const latestOnNavigateRef = useLatest(onNavigate);\n    const previousSearchRef = useRef<string | null>(normalizeSearch(searchString));\n\n    // Skip initial render (Reader handles hydration)\n    useAfterMount(() => {\n        const currentStandardSearch = normalizeSearch(searchString);\n        const hasSearchChanged = previousSearchRef.current !== currentStandardSearch;\n        previousSearchRef.current = currentStandardSearch;\n\n        // POP navigation should be URL -> store only for the transition step.\n        // If we write here, we can overwrite the forward stack.\n        // This prevents the writer from immediately rewriting URL during back/forward\n        // transitions (which can overwrite forward history).\n        const isPopNavigationSync = navigationType === 'POP' && hasSearchChanged;\n        if (isPopNavigationSync) {\n            return;\n        }\n\n        const currentParams = new URLSearchParams(searchString);\n        const nextParams = new URLSearchParams(searchString);\n\n        let hasChanges = false;\n        let hasPushChange = false;\n        let isAllDefaults = true;\n\n        config.forEach(item => {\n            const storeVal = storeValues[item.key];\n            const currentUrlVal = currentParams.get(item.key);\n            const isDefault = isEqual(storeVal, item.defaultValue);\n\n            if (!isDefault) isAllDefaults = false;\n\n            const serializedVal = serializeConfigValue(item, storeVal, isDefault);\n\n            if (serializedVal !== currentUrlVal) {\n                hasChanges =\n                    applySearchParamUpdate({ nextParams, key: item.key, serializedValue: serializedVal }) || hasChanges;\n\n                // Determine history mode preference for changed fields.\n                // Global rule:\n                // - 'push' items always push when changed.\n                // - 'replace' items push once on default -> non-default, then replace thereafter.\n                const historyMode = item.history ?? 'push';\n                if (historyMode === 'push') {\n                    hasPushChange = true;\n                } else if (!isDefault && isUrlValueDefault(item, currentUrlVal)) {\n                    hasPushChange = true;\n                }\n            }\n        });\n\n        if (hasChanges) {\n            // 1. Generate URLs\n            const prettyString = toQueryString(nextParams, config);\n            const strictString = nextParams.toString();\n\n            // 2. Set loop lock (Crucial: Use strict string for comparison)\n            lastWrittenNormalizedSearchRef.current = strictString;\n\n            // 3. Persist to Storage (if key provided)\n            if (localStorageKey) {\n                if (isAllDefaults && prettyString === '') {\n                    localStorage.removeItem(localStorageKey);\n                } else {\n                    localStorage.setItem(localStorageKey, prettyString);\n                }\n            }\n\n            // 4. Calculate Mode\n            const mode = hasPushChange ? 'push' : 'replace';\n\n            latestOnNavigateRef.current(prettyString, mode);\n        }\n    }, [storeValues, searchString, config, localStorageKey, navigationType]);\n    // ^ onNavigate excluded from deps (used via ref) to be safe,\n    // though storeValues changing is the main trigger.\n};\n\n/**\n * ----------------------------------------------------------------------------\n * 3. RESTORER HOOK (LocalStorage -> Redux)\n * ----------------------------------------------------------------------------\n * Responsibilities:\n * - Run once on mount.\n * - If URL is empty & Storage exists -> Force Redux update & URL Replace.\n */\n\ntype UseInitialRestoreFromStorageProps = {\n    config: readonly UrlConfigItem<any, any>[];\n    searchString: string;\n    localStorageKey?: string;\n    onUpdateStore: (a: any) => void;\n    onNavigate: (s: string, m: 'push' | 'replace') => void;\n    isRestoringRef: React.MutableRefObject<boolean>;\n    lastWrittenNormalizedSearchRef: React.MutableRefObject<string | null>;\n    hasCheckedStorageRef: React.MutableRefObject<boolean>;\n};\n\nconst useInitialRestoreFromStorage = (props: UseInitialRestoreFromStorageProps) => {\n    const {\n        config,\n        searchString,\n        localStorageKey,\n        onUpdateStore,\n        onNavigate,\n        isRestoringRef,\n        lastWrittenNormalizedSearchRef,\n        hasCheckedStorageRef,\n    } = props;\n\n    useEffect(() => {\n        if (!localStorageKey) {\n            hasCheckedStorageRef.current = true;\n            return;\n        }\n\n        const currentParams = new URLSearchParams(searchString);\n        const hasManagedParams = config.some(item => currentParams.has(item.key));\n\n        // Only restore if URL is \"empty\" regarding our config\n        if (!hasManagedParams) {\n            const savedString = localStorage.getItem(localStorageKey);\n\n            if (savedString) {\n                // Block the Reader from interfering\n                isRestoringRef.current = true;\n\n                // 1. Hydrate Redux (conceptually similar to Reader logic but forced)\n                const savedParams = new URLSearchParams(savedString);\n                config.forEach(item => {\n                    const val = savedParams.get(item.key);\n                    const deserialized = parseConfigValue(item, val);\n\n                    if (deserialized !== null && typeof deserialized !== 'undefined') {\n                        onUpdateStore(item.action(deserialized));\n                    }\n                });\n\n                // 2. Hydrate URL (Visual)\n                const cleanSaved = savedString.replace(/^\\?/, '');\n                const cleanCurrent = searchString.replace(/^\\?/, '');\n\n                if (cleanSaved !== cleanCurrent) {\n                    // Set Lock so Reader doesn't freak out\n                    lastWrittenNormalizedSearchRef.current = new URLSearchParams(savedString).toString();\n                    onNavigate(savedString, 'replace');\n                }\n\n                // Unlock after tick\n                setTimeout(() => {\n                    isRestoringRef.current = false;\n                }, 0);\n            }\n        }\n\n        hasCheckedStorageRef.current = true;\n    }, [localStorageKey]); // Run once\n};\n\n/**\n * ----------------------------------------------------------------------------\n * MAIN EXPORT\n * ----------------------------------------------------------------------------\n */\nconst useUrlState = <TState>(props: UseUrlStateProps<TState>) => {\n    // Shared communication channel between hooks\n\n    // Stores the last URL search string written by this hook (normalized encoding).\n    const lastWrittenNormalizedSearchRef = useRef<string | null>(null);\n\n    // Shared flag for Restoration phase\n    const isRestoringRef = useRef(false);\n    const hasCheckedStorageRef = useRef(!props.localStorageKey);\n\n    // 1. Sticky State (Restorer)\n    useInitialRestoreFromStorage({\n        ...props,\n        lastWrittenNormalizedSearchRef,\n        isRestoringRef,\n        hasCheckedStorageRef,\n    });\n\n    // 2. Read from URL (URL -> Redux)\n    useSyncUrlToStore({\n        ...props,\n        lastWrittenNormalizedSearchRef,\n        isRestoringRef,\n        hasCheckedStorageRef,\n    });\n\n    // 3. Write to URL (Redux -> URL)\n    useSyncStoreToUrl({\n        ...props,\n        lastWrittenNormalizedSearchRef,\n    });\n};\n\nexport default useUrlState;\n"],"mappings":"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"}

package/hooks/useWindowResize.js

@@ -1,14 +1,15 @@
-import { useEffect as o } from "react";
-import { throttle as s } from "es-toolkit/function";
-const d = (e, t = 300) => {
-  o(() => {
-    const r = s(e, t);
-    return window.addEventListener("resize", r, { passive: !0 }), () => {
-      window.removeEventListener("resize", r);
-    };
-  }, [e, t]);
+import { useEffect as e } from "react";
+import { throttle as t } from "es-toolkit/function";
+//#region src/hooks/useWindowResize.ts
+var n = (n, r = 300) => {
+	e(() => {
+		let e = t(n, r);
+		return window.addEventListener("resize", e, { passive: !0 }), () => {
+			window.removeEventListener("resize", e);
+		};
+	}, [n, r]);
 };
-export {
-  d as default
-};
-//# sourceMappingURL=useWindowResize.js.map
+//#endregion
+export { n as default };
+
+//# sourceMappingURL=useWindowResize.js.map

package/hooks/useWindowResize.js.map

@@ -1 +1 @@
-{"version":3,"file":"useWindowResize.js","sources":["../../src/hooks/useWindowResize.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport { throttle } from 'es-toolkit/function';\n\nexport type UseWindowResize = (callback: () => void, timeout?: number) => void;\n\n/**\n * A custom hook for handling window resize events with throttling.\n *\n * @param callback The callback function to execute on window resize.\n * @param timeout Optional. The throttling timeout duration in milliseconds. Default is 300ms.\n */\nconst useWindowResize: UseWindowResize = (onResizeCallback, timeout = 300) => {\n    useEffect(() => {\n        // Throttle the callback function to avoid excessive executions during window resize events.\n        const throttledCallback = throttle(onResizeCallback, timeout);\n\n        // Add event listener for window resize with the throttled callback.\n        window.addEventListener('resize', throttledCallback, { passive: true });\n\n        // Cleanup function to remove event listener when component unmounts.\n        return () => {\n            window.removeEventListener('resize', throttledCallback);\n        };\n    }, [onResizeCallback, timeout]);\n};\n\nexport default useWindowResize;\n"],"names":["useWindowResize","onResizeCallback","timeout","useEffect","throttledCallback","throttle"],"mappings":";;AAWA,MAAMA,IAAmC,CAACC,GAAkBC,IAAU,QAAQ;AAC1E,EAAAC,EAAU,MAAM;AAEZ,UAAMC,IAAoBC,EAASJ,GAAkBC,CAAO;AAG5D,kBAAO,iBAAiB,UAAUE,GAAmB,EAAE,SAAS,IAAM,GAG/D,MAAM;AACT,aAAO,oBAAoB,UAAUA,CAAiB;AAAA,IAC1D;AAAA,EACJ,GAAG,CAACH,GAAkBC,CAAO,CAAC;AAClC;"}
+{"version":3,"file":"useWindowResize.js","names":[],"sources":["../../src/hooks/useWindowResize.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport { throttle } from 'es-toolkit/function';\n\nexport type UseWindowResize = (callback: () => void, timeout?: number) => void;\n\n/**\n * A custom hook for handling window resize events with throttling.\n *\n * @param callback The callback function to execute on window resize.\n * @param timeout Optional. The throttling timeout duration in milliseconds. Default is 300ms.\n */\nconst useWindowResize: UseWindowResize = (onResizeCallback, timeout = 300) => {\n    useEffect(() => {\n        // Throttle the callback function to avoid excessive executions during window resize events.\n        const throttledCallback = throttle(onResizeCallback, timeout);\n\n        // Add event listener for window resize with the throttled callback.\n        window.addEventListener('resize', throttledCallback, { passive: true });\n\n        // Cleanup function to remove event listener when component unmounts.\n        return () => {\n            window.removeEventListener('resize', throttledCallback);\n        };\n    }, [onResizeCallback, timeout]);\n};\n\nexport default useWindowResize;\n"],"mappings":";;;AAWA,IAAM,KAAoC,GAAkB,IAAU,QAAQ;CAC1E,QAAgB;EAEZ,IAAM,IAAoB,EAAS,GAAkB,CAAO;EAM5D,OAHA,OAAO,iBAAiB,UAAU,GAAmB,EAAE,SAAS,GAAK,CAAC,SAGzD;GACT,OAAO,oBAAoB,UAAU,CAAiB;EAC1D;CACJ,GAAG,CAAC,GAAkB,CAAO,CAAC;AAClC"}

package/mapTypes.js

@@ -1,8 +1,2 @@
-import { MapLayerMap as a, MapTypeMap as o, markerColorMapping as e, markerColorOptions as M } from "./components/map/utils/mapTypes.js";
-export {
-  a as MapLayerMap,
-  o as MapTypeMap,
-  e as markerColorMapping,
-  M as markerColorOptions
-};
-//# sourceMappingURL=mapTypes.js.map
+import { MapLayerMap as e, MapTypeMap as t, markerColorMapping as n, markerColorOptions as r } from "./components/map/utils/mapTypes.js";
+export { e as MapLayerMap, t as MapTypeMap, n as markerColorMapping, r as markerColorOptions };

package/mergeClassNameOverrides.js

@@ -1,5 +1,2 @@
-import { mergeClassNameOverrides as m } from "./utils/mergeClassNameOverrides.js";
-export {
-  m as mergeClassNameOverrides
-};
-//# sourceMappingURL=mergeClassNameOverrides.js.map
+import { mergeClassNameOverrides as e } from "./utils/mergeClassNameOverrides.js";
+export { e as mergeClassNameOverrides };

package/motion.js

@@ -1,2 +1 @@
 export * from "motion/react";
-//# sourceMappingURL=motion.js.map

package/package.json

@@ -1,26 +1,35 @@
 {
     "name": "@rio-cloud/rio-uikit",
-    "version": "2.5.0",
+    "version": "3.0.0-beta.1",
     "description": "The RIO UIKIT component library",
     "repository": {
         "type": "git",
         "url": "https://bitbucket.collaboration-man.com/projects/RIOFRONT/repos/uikit-web/browse"
     },
     "scripts": {
-        "build": "npm run build:rioglyph && npm run build:styles && npm run build:lib && npm run format-code && echo '\n📦 Publish to npm only from within 'package' folder 📦'",
+        "build": "npm run build:icons && npm run build:styles && npm run build:lib && npm run format-code && echo '\n📦 Publish to npm only from within 'package' folder 📦'",
         "build:lib": "vite build",
         "build:styles": "vite build --mode styles",
+        "build:pageloader": "vite build --mode pageloader",
         "build:mcp": "npm run build:styles && npm --prefix uikit-mcp run build:server && npm --prefix uikit-mcp run build:index",
+        "build:figma-plugin": "vite build --mode figma-plugin",
+        "build:vscode-annotate-extension": "cd uikit-vscode-annotate-extension && npm run compile && extension_version=$(node -p \"require('./package.json').version\") && export_file=\"export/v$extension_version/uikit-annotate-$extension_version.vsix\" && mkdir -p \"export/v$extension_version\" && npx --yes @vscode/vsce package --allow-missing-repository --out \"$export_file\" && test -f \"$export_file\"",
         "validate:mcp": "npm --prefix uikit-mcp run validate:index",
-        "build:rioglyph": "svgo -f rioglyph/svgs && vite build --mode rioglyph",
+        "build:icons": "svgo -f uikit-icons/svgs && vite build --mode icons",
         "format-code": "npm run format-code:uikit && npm run format-code:demo",
         "format-code:uikit": "biome format --write .",
         "format-code:demo": "biome format --write uikit-demo/src",
         "lint": "biome check --max-diagnostics 2000",
         "lint-fix": "biome check --write",
         "test": "vitest run",
-        "test:ci": "vitest run --reporter=junit --outputFile.junit=./results/jest/junit.xml",
+        "test:ci": "vitest run --reporter=junit --outputFile.junit=./results/jest/react18.xml",
+        "test:react19": "node tools/testReact19.mjs",
+        "test:ci:react19": "node tools/testReact19.mjs --reporter=junit --outputFile.junit=./results/jest/react19.xml",
+        "test:all-react": "npm test && npm run test:react19",
         "test-dev": "vitest",
+        "typecheck": "tsc --noEmit",
+        "typecheck:react19": "node tools/typecheckReact19.mjs",
+        "typecheck:all": "npm run typecheck && npm run typecheck:react19",
         "test:ui": "node tools/testUI.js && backstop reference --config='test/backstop/config.js' && backstop test --config='test/backstop/config.js'",
         "coverage": "vitest run --coverage",
         "license-check": "echo license-check",
@@ -48,8 +57,8 @@
         }
     },
     "devDependencies": {
-        "@biomejs/biome": "2.4.12",
-        "@rio-cloud/biome-config": "1.2.0",
+        "@biomejs/biome": "2.5.5",
+        "@rio-cloud/biome-config": "2.0.0",
         "@rio-cloud/vite-plugin-frontend-license-check": "3.0.0",
         "@testing-library/dom": "10.4.1",
         "@testing-library/jest-dom": "6.9.1",
@@ -61,36 +70,38 @@
         "@types/react-dom": "18.3.5",
         "@types/react-redux": "7.1.34",
         "@types/resize-observer-browser": "0.1.11",
-        "@vitejs/plugin-react": "5.1.4",
-        "@vitest/coverage-v8": "^4.1.4",
-        "autoprefixer": "10.5.0",
+        "@vitejs/plugin-react": "6.0.3",
+        "@vitest/coverage-v8": "4.1.10",
+        "autoprefixer": "10.5.4",
         "backstopjs": "6.3.25",
         "dotenv": "17.4.2",
         "glob": "13.0.6",
-        "happy-dom": "20.9.0",
+        "happy-dom": "20.11.0",
         "jsdom": "27.4.0",
         "jsdom-global": "3.0.2",
-        "postcss": "8.5.10",
+        "postcss": "8.5.22",
         "postcss-preset-env": "8.5.1",
         "postcss-short": "5.0.0",
         "pre-commit": "1.2.2",
-        "react": "18.0.0",
-        "react-dom": "18.0.0",
+        "react": "18.3.1",
+        "react-dom": "18.3.1",
+        "react-dom-types-19": "npm:@types/react-dom@19.2.3",
         "react-intl": "7.1.14",
+        "react-types-19": "npm:@types/react@19.2.17",
         "rollup-plugin-copy": "3.5.0",
-        "sass": "1.99.0",
+        "sass": "1.101.3",
         "strip-ansi": "7.2.0",
-        "svgo": "4.0.1",
+        "svgo": "4.0.2",
         "typescript": "5.9.3",
-        "vite": "7.3.1",
+        "vite": "8.1.5",
         "vite-plugin-dts": "4.5.4",
         "vite-plugin-zip-pack": "1.2.4",
-        "vitest": "3.2.4",
+        "vitest": "4.1.10",
         "vitest-fetch-mock": "0.4.5"
     },
     "peerDependencies": {
-        "react": ">=18.0.0",
-        "react-dom": ">=18.0.0"
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
     },
     "dependencies": {
         "@dnd-kit/core": "6.3.1",
@@ -98,34 +109,26 @@
         "@dnd-kit/sortable": "10.0.0",
         "@dnd-kit/utilities": "3.2.2",
         "@formkit/auto-animate": "0.9.0",
-        "@popperjs/core": "2.11.8",
-        "@rio-cloud/react-datetime": "^3.1.1",
-        "@tanstack/react-virtual": "3.13.24",
-        "date-fns": "4.1.0",
-        "driver.js": "1.4.0",
-        "es-toolkit": "1.45.1",
-        "iframe-resizer-react": "1.1.0",
+        "@rio-cloud/iframe-resizer": "1.0.0",
+        "@rio-cloud/react-datetime": "3.2.0",
+        "@tanstack/react-virtual": "3.14.8",
+        "date-fns": "4.4.0",
+        "driver.js": "1.8.0",
+        "es-toolkit": "1.49.0",
         "moment": "2.30.1",
-        "motion": "12.38.0",
+        "motion": "12.42.2",
         "natural-orderby": "5.0.0",
         "prop-types": "15.8.1",
-        "react-bootstrap": "1.6.4",
         "react-content-loader": "7.1.2",
         "react-custom-scrollbars-4": "4.5.1",
         "react-day-picker": "9.14.0",
         "react-dropzone": "14.3.8",
         "react-imask": "7.6.1",
-        "react-notifications": "1.7.4",
-        "react-onclickoutside": "6.13.2",
-        "react-popper": "2.3.0",
-        "react-toastify": "11.0.5",
-        "recharts": "3.8.1",
+        "react-toastify": "11.1.0",
+        "recharts": "3.10.0",
         "tiny-invariant": "1.3.3",
         "tslib": "2.8.1"
     },
-    "overrides": {
-        "iframe-resizer": "4.3.11"
-    },
     "pre-commit": [
         "format-code"
     ],

package/print.d.ts

@@ -0,0 +1 @@
+export * from './utils/print';

package/print.js

@@ -0,0 +1,2 @@
+import { CLEANUP_FALLBACK_DELAY_MS as e, PRINTABLE_CONTENT_CLASS as t, PRINT_AREA_CLASS as n, PRINT_AREA_PATH_CLASS as r, PRINT_DELAY_MS as i, PRINT_SCOPE_ACTIVE_CLASS as a, printBody as o, printDialog as s, printSidebar as c } from "./utils/print.js";
+export { e as CLEANUP_FALLBACK_DELAY_MS, t as PRINTABLE_CONTENT_CLASS, n as PRINT_AREA_CLASS, r as PRINT_AREA_PATH_CLASS, i as PRINT_DELAY_MS, a as PRINT_SCOPE_ACTIVE_CLASS, o as printBody, s as printDialog, c as printSidebar };

package/routeUtils.js

@@ -1,16 +1,2 @@
-import { deserializeColumnsConfig as r, deserializeValue as o, getSortDirShort as s, mapColumnsSettingsToStrings as t, parseColumnsSettingsStrings as n, parseSorting as l, serializeColumnsConfig as a, serializeSorting as g, serializeValue as S, toQueryString as u } from "./utils/routeUtils.js";
-import { isEqual as C } from "es-toolkit";
-export {
-  r as deserializeColumnsConfig,
-  o as deserializeValue,
-  s as getSortDirShort,
-  C as isEqual,
-  t as mapColumnsSettingsToStrings,
-  n as parseColumnsSettingsStrings,
-  l as parseSorting,
-  a as serializeColumnsConfig,
-  g as serializeSorting,
-  S as serializeValue,
-  u as toQueryString
-};
-//# sourceMappingURL=routeUtils.js.map
+import { deserializeColumnsConfig as e, deserializeValue as t, getSortDirShort as n, isEqual as r, mapColumnsSettingsToStrings as i, parseColumnsSettingsStrings as a, parseSorting as o, serializeColumnsConfig as s, serializeSorting as c, serializeValue as l, toQueryString as u } from "./utils/routeUtils.js";
+export { e as deserializeColumnsConfig, t as deserializeValue, n as getSortDirShort, r as isEqual, i as mapColumnsSettingsToStrings, a as parseColumnsSettingsStrings, o as parseSorting, s as serializeColumnsConfig, c as serializeSorting, l as serializeValue, u as toQueryString };

package/storageUtils.js

@@ -1,5 +1,2 @@
 import { storage as e } from "./utils/storageUtils.js";
-export {
-  e as storage
-};
-//# sourceMappingURL=storageUtils.js.map
+export { e as storage };

package/styles/variables/colors/colors.js

@@ -0,0 +1,84 @@
+//#region src/styles/variables/colors/colors.json
+var e = "#a7afbb ", t = {
+	"always-color-white": "#ffffff ",
+	"always-color-black": "#000000 ",
+	"color-white": "#ffffff ",
+	"color-black": "#000000 ",
+	"gray-darkest": "#2a3740 ",
+	"gray-darker": "#4c5667 ",
+	"gray-dark": "#697a8b ",
+	gray: e,
+	"gray-light": "#d0d8de ",
+	"gray-lighter": "#e5ebf0 ",
+	"gray-lightest": "#f6f8f9 ",
+	"gray-decent": "#fcfcfd ",
+	"brand-primary": "#0b7184 ",
+	"brand-secondary": "#7a4987 ",
+	"brand-primary-decent": "#f4fbfc ",
+	"brand-secondary-decent": "#fbf5f8 ",
+	"brand-info": "#287b99 ",
+	"brand-success": "#3c815f ",
+	"brand-warning": "#a96318 ",
+	"brand-danger": "#b94f58 ",
+	"brand-info-decent": "#f5f8fb ",
+	"brand-success-decent": "#f6fbf5 ",
+	"brand-warning-decent": "#fdf5f0 ",
+	"brand-danger-decent": "#fdf3f3 ",
+	"color-code": "#f3f3f4 ",
+	"color-status-available": "#239b7d ",
+	"color-status-driving": "#3690ae ",
+	"color-status-resting": "#626b72 ",
+	"color-status-working": "#94488b ",
+	"color-map-marker-text": "#ffffff ",
+	"color-map-marker-active": "#ffffff ",
+	"color-map-marker-asset": "#2a3740 ",
+	"color-map-marker-poi": "#d63f7f ",
+	"color-map-marker-geofence": "#f9636e ",
+	"color-map-marker-route": "#36afd7 ",
+	"color-map-marker-info": "#3f759b ",
+	"color-map-marker-success": "#5cb85c ",
+	"color-map-marker-warning": "#ff8e3c ",
+	"color-map-marker-danger": "#e22837 ",
+	"color-map-marker-restrictions": "#8f68ed ",
+	"color-rating-1": "#e22837 ",
+	"color-rating-2": "#ff8e3c ",
+	"color-rating-3": "#f8c575 ",
+	"color-rating-4": "#5cb85c ",
+	"color-rating-5": "#4b924c ",
+	"color-highlight-darkest": "#154b56 ",
+	"color-highlight-darker": "#206e7e ",
+	"color-highlight-dark": "#268897 ",
+	"color-highlight": "#30b4c0 ",
+	"color-highlight-light": "#8ddbe3 ",
+	"color-highlight-lighter": "#cef0f3 ",
+	"color-highlight-lightest": "#ebf9fa ",
+	"color-highlight-decent": "#f3fbfc ",
+	"color-coldplay-wine": "#520d4e ",
+	"color-coldplay-aubergine": "#5a4876 ",
+	"color-coldplay-kashmir": "#536e8b ",
+	"color-coldplay-fountain": "#67abc5 ",
+	"color-coldplay-turquoise": "#4eccc1 ",
+	"color-coldplay-bermuda": "#79d4b3 ",
+	"color-coldplay-moos": "#a1daa3 ",
+	"color-coldplay-primrose": "#c7e291 ",
+	"color-coldplay-khaki": "#f0eb83 ",
+	"color-warmup-crimson": "#31144f ",
+	"color-warmup-victoria": "#493d6d ",
+	"color-warmup-cadillac": "#7e3e72 ",
+	"color-warmup-raspberry": "#b23672 ",
+	"color-warmup-cerise": "#e72472 ",
+	"color-warmup-charm": "#c9778d ",
+	"color-warmup-salmon": "#f19588 ",
+	"color-warmup-cherokee": "#f5bb89 ",
+	"color-warmup-corn": "#fde082 ",
+	"color-spectrum-indigo": "#8e96eb ",
+	"color-spectrum-violet": "#ad91f3 ",
+	"color-spectrum-purple": "#c08eeb ",
+	"color-spectrum-fuchsia": "#dc82e9 ",
+	"color-spectrum-pink": "#e878b6 ",
+	"color-spectrum-rose": "#ef7186 "
+};
+//#endregion
+export { t as default, e as gray };
+
+//# sourceMappingURL=colors.js.map

package/styles/variables/colors/colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.js","names":[],"sources":["../../../../src/styles/variables/colors/colors.json"],"sourcesContent":["{\n  \"always-color-white\": \"#ffffff \",\n  \"always-color-black\": \"#000000 \",\n  \"color-white\": \"#ffffff \",\n  \"color-black\": \"#000000 \",\n  \"gray-darkest\": \"#2a3740 \",\n  \"gray-darker\": \"#4c5667 \",\n  \"gray-dark\": \"#697a8b \",\n  \"gray\": \"#a7afbb \",\n  \"gray-light\": \"#d0d8de \",\n  \"gray-lighter\": \"#e5ebf0 \",\n  \"gray-lightest\": \"#f6f8f9 \",\n  \"gray-decent\": \"#fcfcfd \",\n  \"brand-primary\": \"#0b7184 \",\n  \"brand-secondary\": \"#7a4987 \",\n  \"brand-primary-decent\": \"#f4fbfc \",\n  \"brand-secondary-decent\": \"#fbf5f8 \",\n  \"brand-info\": \"#287b99 \",\n  \"brand-success\": \"#3c815f \",\n  \"brand-warning\": \"#a96318 \",\n  \"brand-danger\": \"#b94f58 \",\n  \"brand-info-decent\": \"#f5f8fb \",\n  \"brand-success-decent\": \"#f6fbf5 \",\n  \"brand-warning-decent\": \"#fdf5f0 \",\n  \"brand-danger-decent\": \"#fdf3f3 \",\n  \"color-code\": \"#f3f3f4 \",\n  \"color-status-available\": \"#239b7d \",\n  \"color-status-driving\": \"#3690ae \",\n  \"color-status-resting\": \"#626b72 \",\n  \"color-status-working\": \"#94488b \",\n  \"color-map-marker-text\": \"#ffffff \",\n  \"color-map-marker-active\": \"#ffffff \",\n  \"color-map-marker-asset\": \"#2a3740 \",\n  \"color-map-marker-poi\": \"#d63f7f \",\n  \"color-map-marker-geofence\": \"#f9636e \",\n  \"color-map-marker-route\": \"#36afd7 \",\n  \"color-map-marker-info\": \"#3f759b \",\n  \"color-map-marker-success\": \"#5cb85c \",\n  \"color-map-marker-warning\": \"#ff8e3c \",\n  \"color-map-marker-danger\": \"#e22837 \",\n  \"color-map-marker-restrictions\": \"#8f68ed \",\n  \"color-rating-1\": \"#e22837 \",\n  \"color-rating-2\": \"#ff8e3c \",\n  \"color-rating-3\": \"#f8c575 \",\n  \"color-rating-4\": \"#5cb85c \",\n  \"color-rating-5\": \"#4b924c \",\n  \"color-highlight-darkest\": \"#154b56 \",\n  \"color-highlight-darker\": \"#206e7e \",\n  \"color-highlight-dark\": \"#268897 \",\n  \"color-highlight\": \"#30b4c0 \",\n  \"color-highlight-light\": \"#8ddbe3 \",\n  \"color-highlight-lighter\": \"#cef0f3 \",\n  \"color-highlight-lightest\": \"#ebf9fa \",\n  \"color-highlight-decent\": \"#f3fbfc \",\n  \"color-coldplay-wine\": \"#520d4e \",\n  \"color-coldplay-aubergine\": \"#5a4876 \",\n  \"color-coldplay-kashmir\": \"#536e8b \",\n  \"color-coldplay-fountain\": \"#67abc5 \",\n  \"color-coldplay-turquoise\": \"#4eccc1 \",\n  \"color-coldplay-bermuda\": \"#79d4b3 \",\n  \"color-coldplay-moos\": \"#a1daa3 \",\n  \"color-coldplay-primrose\": \"#c7e291 \",\n  \"color-coldplay-khaki\": \"#f0eb83 \",\n  \"color-warmup-crimson\": \"#31144f \",\n  \"color-warmup-victoria\": \"#493d6d \",\n  \"color-warmup-cadillac\": \"#7e3e72 \",\n  \"color-warmup-raspberry\": \"#b23672 \",\n  \"color-warmup-cerise\": \"#e72472 \",\n  \"color-warmup-charm\": \"#c9778d \",\n  \"color-warmup-salmon\": \"#f19588 \",\n  \"color-warmup-cherokee\": \"#f5bb89 \",\n  \"color-warmup-corn\": \"#fde082 \",\n  \"color-spectrum-indigo\": \"#8e96eb \",\n  \"color-spectrum-violet\": \"#ad91f3 \",\n  \"color-spectrum-purple\": \"#c08eeb \",\n  \"color-spectrum-fuchsia\": \"#dc82e9 \",\n  \"color-spectrum-pink\": \"#e878b6 \",\n  \"color-spectrum-rose\": \"#ef7186 \"\n}"],"mappings":""}

package/styles/variables/colors/colors.json.d.ts

@@ -11,14 +11,14 @@ declare const _default: {
   "gray-lighter": "#e5ebf0 ",
   "gray-lightest": "#f6f8f9 ",
   "gray-decent": "#fcfcfd ",
-  "brand-primary": "#30b4c0 ",
-  "brand-secondary": "#b23672 ",
+  "brand-primary": "#0b7184 ",
+  "brand-secondary": "#7a4987 ",
   "brand-primary-decent": "#f4fbfc ",
   "brand-secondary-decent": "#fbf5f8 ",
-  "brand-info": "#4b80a6 ",
-  "brand-success": "#5cb85c ",
-  "brand-warning": "#ff8e3c ",
-  "brand-danger": "#e22837 ",
+  "brand-info": "#287b99 ",
+  "brand-success": "#3c815f ",
+  "brand-warning": "#a96318 ",
+  "brand-danger": "#b94f58 ",
   "brand-info-decent": "#f5f8fb ",
   "brand-success-decent": "#f6fbf5 ",
   "brand-warning-decent": "#fdf5f0 ",

package/themes/Volkswagen/components/applicationHeader/VolkswagenApplicationHeader.js

@@ -1,39 +1,45 @@
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { forwardRef as c } from "react";
-import { isEmpty as d } from "es-toolkit/compat";
-import N from "../../../../utils/classNames.js";
-import h from "../../../../components/applicationHeader/ApplicationActionBar.js";
-const H = c(
-  (t, r) => {
-    const {
-      homeRoute: n = "",
-      appNavigator: u,
-      appNavigatorClassName: v,
-      appMenuItems: g,
-      navItems: i = [],
-      actionBarItems: l = [],
-      onMount: f = () => {
-      },
-      onUnmount: y = () => {
-      },
-      className: s = "",
-      ...p
-    } = t, m = N(
-      "ApplicationHeader VolkswagenApplicationHeader",
-      "user-select-none",
-      s && s
-    );
-    return /* @__PURE__ */ a("nav", { ...p, className: m, ref: r, children: /* @__PURE__ */ o("div", { className: "width-100pct", children: [
-      /* @__PURE__ */ o("div", { className: "position-relative padding-y-25", children: [
-        /* @__PURE__ */ a("div", { className: "brand", children: /* @__PURE__ */ a("div", { className: "logo", style: { height: "40px", width: "400px" }, children: n }) }),
-        /* @__PURE__ */ a("div", { className: "position-absolute top-50pct right-10 z-index-1 translate-y-50pct", children: /* @__PURE__ */ a(h, { items: l }) })
-      ] }),
-      /* @__PURE__ */ a("ul", { className: "SubmoduleNavigation nav", children: !d(i) && i.map((e) => /* @__PURE__ */ a("li", { className: "submodule", "data-nav-item-key": e.key, children: e.route }, e.key)) })
-    ] }) });
-  }
-);
-export {
-  H as VolkswagenApplicationHeader,
-  H as default
-};
-//# sourceMappingURL=VolkswagenApplicationHeader.js.map
+import e from "../../../../utils/classNames.js";
+import t from "../../../../components/applicationHeader/ApplicationActionBar.js";
+import { forwardRef as n } from "react";
+import { isEmpty as r } from "es-toolkit/compat";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/themes/Volkswagen/components/applicationHeader/VolkswagenApplicationHeader.tsx
+var o = n((n, o) => {
+	let { homeRoute: s = "", appNavigator: c, appNavigatorClassName: l, appMenuItems: u, navItems: d = [], actionBarItems: f = [], onMount: p = () => {}, onUnmount: m = () => {}, className: h = "", ...g } = n, _ = e("ApplicationHeader VolkswagenApplicationHeader", "user-select-none", h && h);
+	return /* @__PURE__ */ i("nav", {
+		...g,
+		className: _,
+		ref: o,
+		children: /* @__PURE__ */ a("div", {
+			className: "width-100pct",
+			children: [/* @__PURE__ */ a("div", {
+				className: "position-relative padding-y-25",
+				children: [/* @__PURE__ */ i("div", {
+					className: "brand",
+					children: /* @__PURE__ */ i("div", {
+						className: "logo",
+						style: {
+							height: "40px",
+							width: "400px"
+						},
+						children: s
+					})
+				}), /* @__PURE__ */ i("div", {
+					className: "position-absolute top-50pct right-10 z-index-1 translate-y-50pct",
+					children: /* @__PURE__ */ i(t, { items: f })
+				})]
+			}), /* @__PURE__ */ i("ul", {
+				className: "SubmoduleNavigation nav",
+				children: !r(d) && d.map((e) => /* @__PURE__ */ i("li", {
+					className: "submodule",
+					"data-nav-item-key": e.key,
+					children: e.route
+				}, e.key))
+			})]
+		})
+	});
+});
+//#endregion
+export { o as VolkswagenApplicationHeader, o as default };
+
+//# sourceMappingURL=VolkswagenApplicationHeader.js.map

package/themes/Volkswagen/components/applicationHeader/VolkswagenApplicationHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"VolkswagenApplicationHeader.js","sources":["../../../../../src/themes/Volkswagen/components/applicationHeader/VolkswagenApplicationHeader.tsx"],"sourcesContent":["import React, { forwardRef, type ForwardedRef } from 'react';\nimport { isEmpty } from 'es-toolkit/compat';\n\nimport classNames from '../../../../utils/classNames';\nimport type { ApplicationHeaderProps } from '../../../../ApplicationHeader';\nimport ApplicationActionBar from '../../../../components/applicationHeader/ApplicationActionBar';\n\nexport type ModuleProps = {\n    key: string;\n    route: React.ReactNode;\n};\n\nexport type VolkswagenApplicationHeaderProps = ApplicationHeaderProps & {\n    homeRoute?: React.ReactNode;\n    appMenuItems?: ModuleProps[];\n    appNavigator?: React.ReactNode;\n    appNavigatorClassName?: string;\n    navItems?: ModuleProps[];\n    actionBarItems?: React.ReactNode[];\n    onMount?: VoidFunction;\n    onUnmount?: VoidFunction;\n    className?: string;\n};\n\nexport const VolkswagenApplicationHeader = forwardRef(\n    (props: VolkswagenApplicationHeaderProps, ref: ForwardedRef<HTMLElement>) => {\n        const {\n            homeRoute = '',\n            appNavigator,\n            appNavigatorClassName,\n            appMenuItems,\n            navItems = [],\n            actionBarItems = [],\n            onMount = () => {},\n            onUnmount = () => {},\n            className = '',\n            ...remainingProps\n        } = props;\n\n        const wrapperClassNames = classNames(\n            'ApplicationHeader VolkswagenApplicationHeader',\n            'user-select-none',\n            className && className\n        );\n\n        return (\n            <nav {...remainingProps} className={wrapperClassNames} ref={ref}>\n                <div className='width-100pct'>\n                    <div className='position-relative padding-y-25'>\n                        <div className='brand'>\n                            <div className='logo' style={{ height: '40px', width: '400px' }}>\n                                {homeRoute}\n                            </div>\n                        </div>\n\n                        <div className='position-absolute top-50pct right-10 z-index-1 translate-y-50pct'>\n                            <ApplicationActionBar items={actionBarItems} />\n                        </div>\n                    </div>\n\n                    <ul className='SubmoduleNavigation nav'>\n                        {!isEmpty(navItems) &&\n                            navItems.map(navItem => (\n                                <li key={navItem.key} className='submodule' data-nav-item-key={navItem.key}>\n                                    {navItem.route}\n                                </li>\n                            ))}\n                    </ul>\n                </div>\n            </nav>\n        );\n    }\n);\n\nexport default VolkswagenApplicationHeader;\n"],"names":["VolkswagenApplicationHeader","forwardRef","props","ref","homeRoute","appNavigator","appNavigatorClassName","appMenuItems","navItems","actionBarItems","onMount","onUnmount","className","remainingProps","wrapperClassNames","classNames","jsx","jsxs","ApplicationActionBar","isEmpty","navItem"],"mappings":";;;;;AAwBO,MAAMA,IAA8BC;AAAA,EACvC,CAACC,GAAyCC,MAAmC;AACzE,UAAM;AAAA,MACF,WAAAC,IAAY;AAAA,MACZ,cAAAC;AAAA,MACA,uBAAAC;AAAA,MACA,cAAAC;AAAA,MACA,UAAAC,IAAW,CAAA;AAAA,MACX,gBAAAC,IAAiB,CAAA;AAAA,MACjB,SAAAC,IAAU,MAAM;AAAA,MAAC;AAAA,MACjB,WAAAC,IAAY,MAAM;AAAA,MAAC;AAAA,MACnB,WAAAC,IAAY;AAAA,MACZ,GAAGC;AAAA,IAAA,IACHX,GAEEY,IAAoBC;AAAA,MACtB;AAAA,MACA;AAAA,MACAH,KAAaA;AAAA,IAAA;AAGjB,WACI,gBAAAI,EAAC,OAAA,EAAK,GAAGH,GAAgB,WAAWC,GAAmB,KAAAX,GACnD,UAAA,gBAAAc,EAAC,OAAA,EAAI,WAAU,gBACX,UAAA;AAAA,MAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,kCACX,UAAA;AAAA,QAAA,gBAAAD,EAAC,OAAA,EAAI,WAAU,SACX,UAAA,gBAAAA,EAAC,SAAI,WAAU,QAAO,OAAO,EAAE,QAAQ,QAAQ,OAAO,QAAA,GACjD,aACL,GACJ;AAAA,QAEA,gBAAAA,EAAC,SAAI,WAAU,oEACX,4BAACE,GAAA,EAAqB,OAAOT,GAAgB,EAAA,CACjD;AAAA,MAAA,GACJ;AAAA,MAEA,gBAAAO,EAAC,QAAG,WAAU,2BACT,WAACG,EAAQX,CAAQ,KACdA,EAAS,IAAI,CAAAY,wBACR,MAAA,EAAqB,WAAU,aAAY,qBAAmBA,EAAQ,KAClE,YAAQ,MAAA,GADJA,EAAQ,GAEjB,CACH,EAAA,CACT;AAAA,IAAA,EAAA,CACJ,EAAA,CACJ;AAAA,EAER;AACJ;"}
+{"version":3,"file":"VolkswagenApplicationHeader.js","names":[],"sources":["../../../../../src/themes/Volkswagen/components/applicationHeader/VolkswagenApplicationHeader.tsx"],"sourcesContent":["import React, { forwardRef, type ForwardedRef } from 'react';\nimport { isEmpty } from 'es-toolkit/compat';\n\nimport classNames from '../../../../utils/classNames';\nimport type { ApplicationHeaderProps } from '../../../../ApplicationHeader';\nimport ApplicationActionBar from '../../../../components/applicationHeader/ApplicationActionBar';\n\nexport type ModuleProps = {\n    key: string;\n    route: React.ReactNode;\n};\n\nexport type VolkswagenApplicationHeaderProps = ApplicationHeaderProps & {\n    homeRoute?: React.ReactNode;\n    appMenuItems?: ModuleProps[];\n    appNavigator?: React.ReactNode;\n    appNavigatorClassName?: string;\n    navItems?: ModuleProps[];\n    actionBarItems?: React.ReactNode[];\n    onMount?: VoidFunction;\n    onUnmount?: VoidFunction;\n    className?: string;\n};\n\nexport const VolkswagenApplicationHeader = forwardRef(\n    (props: VolkswagenApplicationHeaderProps, ref: ForwardedRef<HTMLElement>) => {\n        const {\n            homeRoute = '',\n            appNavigator,\n            appNavigatorClassName,\n            appMenuItems,\n            navItems = [],\n            actionBarItems = [],\n            onMount = () => {},\n            onUnmount = () => {},\n            className = '',\n            ...remainingProps\n        } = props;\n\n        const wrapperClassNames = classNames(\n            'ApplicationHeader VolkswagenApplicationHeader',\n            'user-select-none',\n            className && className\n        );\n\n        return (\n            <nav {...remainingProps} className={wrapperClassNames} ref={ref}>\n                <div className='width-100pct'>\n                    <div className='position-relative padding-y-25'>\n                        <div className='brand'>\n                            <div className='logo' style={{ height: '40px', width: '400px' }}>\n                                {homeRoute}\n                            </div>\n                        </div>\n\n                        <div className='position-absolute top-50pct right-10 z-index-1 translate-y-50pct'>\n                            <ApplicationActionBar items={actionBarItems} />\n                        </div>\n                    </div>\n\n                    <ul className='SubmoduleNavigation nav'>\n                        {!isEmpty(navItems) &&\n                            navItems.map(navItem => (\n                                <li key={navItem.key} className='submodule' data-nav-item-key={navItem.key}>\n                                    {navItem.route}\n                                </li>\n                            ))}\n                    </ul>\n                </div>\n            </nav>\n        );\n    }\n);\n\nexport default VolkswagenApplicationHeader;\n"],"mappings":";;;;;;AAwBA,IAAa,IAA8B,GACtC,GAAyC,MAAmC;CACzE,IAAM,EACF,eAAY,IACZ,iBACA,0BACA,iBACA,cAAW,CAAC,GACZ,oBAAiB,CAAC,GAClB,mBAAgB,CAAC,GACjB,qBAAkB,CAAC,GACnB,eAAY,IACZ,GAAG,MACH,GAEE,IAAoB,EACtB,iDACA,oBACA,KAAa,CACjB;CAEA,OACI,kBAAC,OAAD;EAAK,GAAI;EAAgB,WAAW;EAAwB;YACxD,kBAAC,OAAD;GAAK,WAAU;aAAf,CACI,kBAAC,OAAD;IAAK,WAAU;cAAf,CACI,kBAAC,OAAD;KAAK,WAAU;eACX,kBAAC,OAAD;MAAK,WAAU;MAAO,OAAO;OAAE,QAAQ;OAAQ,OAAO;MAAQ;gBACzD;KACA,CAAA;IACJ,CAAA,GAEL,kBAAC,OAAD;KAAK,WAAU;eACX,kBAAC,GAAD,EAAsB,OAAO,EAAiB,CAAA;IAC7C,CAAA,CACJ;OAEL,kBAAC,MAAD;IAAI,WAAU;cACT,CAAC,EAAQ,CAAQ,KACd,EAAS,KAAI,MACT,kBAAC,MAAD;KAAsB,WAAU;KAAY,qBAAmB,EAAQ;eAClE,EAAQ;IACT,GAFK,EAAQ,GAEb,CACP;GACL,CAAA,CACH;;CACJ,CAAA;AAEb,CACJ"}