@bromscandium/router 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 bromscandium
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,91 @@
+# @bromscandium/router
+
+Client-side router for BromiumJS with file-based routing support.
+
+## Installation
+
+```bash
+npm install @bromscandium/router
+```
+
+## Usage
+
+```tsx
+import { createRouter, Link, RouterView, useParams } from '@bromscandium/router';
+
+const router = createRouter({
+  routes: [
+    { path: '/', component: Home },
+    { path: '/users/:id', component: UserProfile },
+  ],
+});
+
+function App() {
+  return (
+    <div>
+      <nav>
+        <Link to="/">Home</Link>
+        <Link to="/users/123">User</Link>
+      </nav>
+      <RouterView />
+    </div>
+  );
+}
+
+function UserProfile() {
+  const params = useParams();
+  return <div>User ID: {params.value.id}</div>;
+}
+```
+
+### Router Hooks
+
+```tsx
+import { useRouter, useRoute, useParams, useQuery, useNavigate } from '@bromscandium/router';
+
+function Component() {
+  const router = useRouter();
+  const route = useRoute();
+  const params = useParams();
+  const query = useQuery();
+  const nav = useNavigate();
+
+  const goHome = () => nav.push('/');
+  const goBack = () => nav.back();
+
+  return <button onClick={goHome}>Home</button>;
+}
+```
+
+### Link Component
+
+```tsx
+<Link to="/about">About</Link>
+
+<Link
+  to="/about"
+  activeClassName="active"
+  exactActiveClassName="exact-active"
+>
+  About
+</Link>
+```
+
+## API
+
+| Export | Description |
+|--------|-------------|
+| `createRouter(options)` | Create router instance |
+| `Link` | Navigation link component |
+| `RouterView` | Route outlet component |
+| `Navigate` | Programmatic navigation component |
+| `Redirect` | Redirect component |
+| `useRouter()` | Access router instance |
+| `useRoute()` | Access current route (Ref) |
+| `useParams()` | Access route parameters (ComputedRef) |
+| `useQuery()` | Access query parameters (ComputedRef) |
+| `useNavigate()` | Get navigation methods |
+
+## License
+
+MIT

package/dist/components.d.ts

@@ -0,0 +1,129 @@
+/**
+ * Router components: Link, RouterView, Redirect, and Navigate.
+ * @module
+ */
+import { VNode } from '@bromscandium/runtime';
+import { NavigationTarget } from './router.js';
+/**
+ * Props for the Link component.
+ */
+interface LinkProps {
+    /** The target path or navigation object */
+    to: string | NavigationTarget;
+    /** Child elements to render inside the link */
+    children?: any;
+    /** CSS class name */
+    className?: string;
+    /** Class name to add when route is active (includes nested) */
+    activeClassName?: string;
+    /** Class name to add when route exactly matches */
+    exactActiveClassName?: string;
+    /** If true, replace current history entry instead of pushing */
+    replace?: boolean;
+    /** HTML target attribute (e.g., "_blank") */
+    target?: string;
+    /** HTML rel attribute for external links */
+    rel?: string;
+    /** Additional click handler */
+    onClick?: (e: MouseEvent) => void;
+    /** Additional attributes passed to the anchor element */
+    [key: string]: any;
+}
+/**
+ * A navigation link component that integrates with the router.
+ * Handles click events to perform client-side navigation.
+ *
+ * @param props - Link component props
+ * @returns An anchor element VNode
+ *
+ * @example
+ * ```tsx
+ * <Link to="/about">About</Link>
+ *
+ * <Link to="/dashboard" activeClassName="active">Dashboard</Link>
+ *
+ * <Link to={{ path: '/user', query: { id: '123' } }}>User</Link>
+ * ```
+ */
+export declare function Link(props: LinkProps): VNode;
+/**
+ * Props for the RouterView component.
+ */
+interface RouterViewProps {
+    /** The nesting depth for nested RouterViews (usually auto-detected) */
+    depth?: number;
+}
+/**
+ * Renders the component for the current matched route.
+ * Handles lazy loading and layout wrapping automatically.
+ *
+ * @param props - RouterView component props
+ * @returns The rendered route component or null
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   return (
+ *     <div>
+ *       <nav>...</nav>
+ *       <RouterView />
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function RouterView(props: RouterViewProps): VNode | null;
+/**
+ * Props for the Redirect component.
+ */
+interface RedirectProps {
+    /** The target path or navigation object */
+    to: string | NavigationTarget;
+    /** If true, replace current history entry (default: true) */
+    replace?: boolean;
+}
+/**
+ * A component that performs a redirect when rendered.
+ * Useful for redirecting from one route to another.
+ *
+ * @param props - Redirect component props
+ * @returns null (performs navigation as side effect)
+ *
+ * @example
+ * ```tsx
+ * // In a route component
+ * if (!isAuthenticated) {
+ *   return <Redirect to="/login" />;
+ * }
+ * ```
+ */
+export declare function Redirect(props: RedirectProps): null;
+/**
+ * Props for the Navigate component.
+ */
+interface NavigateProps {
+    /** The target path or navigation object */
+    to: string | NavigationTarget;
+    /** If true, replace current history entry instead of pushing */
+    replace?: boolean;
+}
+/**
+ * A component that performs navigation when rendered.
+ * Alternative to using the router imperatively.
+ *
+ * @param props - Navigate component props
+ * @returns null (performs navigation as side effect)
+ *
+ * @example
+ * ```tsx
+ * function AfterSubmit({ success }) {
+ *   if (success) {
+ *     return <Navigate to="/success" />;
+ *   }
+ *   return <div>Form</div>;
+ * }
+ * ```
+ */
+export declare function Navigate(props: NavigateProps): null;
+export {};
+//# sourceMappingURL=components.d.ts.map

package/dist/components.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../src/components.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAM,KAAK,EAAC,MAAM,uBAAuB,CAAC;AAEjD,OAAO,EAAC,gBAAgB,EAAC,MAAM,aAAa,CAAC;AAE7C;;GAEG;AACH,UAAU,SAAS;IACjB,2CAA2C;IAC3C,EAAE,EAAE,MAAM,GAAG,gBAAgB,CAAC;IAC9B,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+DAA+D;IAC/D,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mDAAmD;IACnD,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gEAAgE;IAChE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,+BAA+B;IAC/B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,yDAAyD;IACzD,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,KAAK,CA6D5C;AAED;;GAEG;AACH,UAAU,eAAe;IACvB,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAYD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,KAAK,GAAG,IAAI,CAkC/D;AAqJD;;GAEG;AACH,UAAU,aAAa;IACrB,2CAA2C;IAC3C,EAAE,EAAE,MAAM,GAAG,gBAAgB,CAAC;IAC9B,6DAA6D;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI,CAWnD;AAED;;GAEG;AACH,UAAU,aAAa;IACrB,2CAA2C;IAC3C,EAAE,EAAE,MAAM,GAAG,gBAAgB,CAAC;IAC9B,gEAAgE;IAChE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI,CAUnD"}

package/dist/components.js

@@ -0,0 +1,287 @@
+/**
+ * Router components: Link, RouterView, Redirect, and Navigate.
+ * @module
+ */
+import { ref } from '@bromscandium/core';
+import { jsx } from '@bromscandium/runtime';
+import { useRoute, useRouter } from './hooks.js';
+/**
+ * A navigation link component that integrates with the router.
+ * Handles click events to perform client-side navigation.
+ *
+ * @param props - Link component props
+ * @returns An anchor element VNode
+ *
+ * @example
+ * ```tsx
+ * <Link to="/about">About</Link>
+ *
+ * <Link to="/dashboard" activeClassName="active">Dashboard</Link>
+ *
+ * <Link to={{ path: '/user', query: { id: '123' } }}>User</Link>
+ * ```
+ */
+export function Link(props) {
+    const router = useRouter();
+    const route = useRoute();
+    const { to, children, className = '', activeClassName = '', exactActiveClassName = '', replace = false, target, rel, onClick, ...rest } = props;
+    const href = typeof to === 'string' ? to : (to.path || '/');
+    const currentPath = route.value.path;
+    const base = router.base || '';
+    const comparePath = base ? href.replace(new RegExp(`^${base}`), '') || '/' : href;
+    const isExactActive = currentPath === comparePath;
+    const isActive = isExactActive || currentPath.startsWith(comparePath + '/');
+    let finalClassName = className;
+    if (isActive && activeClassName) {
+        finalClassName = `${finalClassName} ${activeClassName}`.trim();
+    }
+    if (isExactActive && exactActiveClassName) {
+        finalClassName = `${finalClassName} ${exactActiveClassName}`.trim();
+    }
+    function handleClick(e) {
+        onClick?.(e);
+        if (e.defaultPrevented)
+            return;
+        if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey)
+            return;
+        if (target)
+            return;
+        e.preventDefault();
+        if (replace) {
+            router.replace(to);
+        }
+        else {
+            router.push(to);
+        }
+    }
+    return jsx('a', {
+        href,
+        className: finalClassName || undefined,
+        target,
+        rel,
+        onClick: handleClick,
+        children,
+        ...rest,
+    });
+}
+let routerViewDepth = 0;
+const componentCache = new Map();
+const layoutCache = new Map();
+const pendingLoads = new Map();
+const renderVersion = ref(0);
+/**
+ * Renders the component for the current matched route.
+ * Handles lazy loading and layout wrapping automatically.
+ *
+ * @param props - RouterView component props
+ * @returns The rendered route component or null
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   return (
+ *     <div>
+ *       <nav>...</nav>
+ *       <RouterView />
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function RouterView(props) {
+    const { depth: explicitDepth } = props;
+    const route = useRoute();
+    void renderVersion.value;
+    const currentDepth = explicitDepth ?? routerViewDepth;
+    const matched = route.value.matched[currentDepth];
+    if (!matched) {
+        return null;
+    }
+    const routePath = matched.path;
+    const routeConfig = matched.route;
+    if (routeConfig.layout) {
+        const layoutKey = `layout:${routePath}`;
+        return loadAndRenderLayoutWithPage(routeConfig.layout, layoutKey, routeConfig.component, routePath, route.value.fullPath, currentDepth);
+    }
+    return loadAndRenderComponent(routeConfig.component, routePath, route.value.fullPath, currentDepth);
+}
+function loadAndRenderComponent(componentModule, routePath, fullPath, currentDepth) {
+    if (componentCache.has(routePath)) {
+        const Component = componentCache.get(routePath);
+        routerViewDepth = currentDepth + 1;
+        try {
+            return jsx(Component, {
+                key: fullPath,
+            });
+        }
+        finally {
+            routerViewDepth = currentDepth;
+        }
+    }
+    if (typeof componentModule === 'function') {
+        if (!pendingLoads.has(routePath)) {
+            const loadPromise = componentModule();
+            if (loadPromise && typeof loadPromise.then === 'function') {
+                pendingLoads.set(routePath, loadPromise);
+                loadPromise.then((result) => {
+                    const Component = result.default || result;
+                    componentCache.set(routePath, Component);
+                    pendingLoads.delete(routePath);
+                    renderVersion.value++;
+                }).catch((error) => {
+                    console.error('Failed to load route component:', error);
+                    pendingLoads.delete(routePath);
+                });
+                return jsx('div', {
+                    className: 'router-loading',
+                    children: '',
+                });
+            }
+            else {
+                const Component = loadPromise.default || loadPromise;
+                componentCache.set(routePath, Component);
+                routerViewDepth = currentDepth + 1;
+                try {
+                    return jsx(Component, {
+                        key: fullPath,
+                    });
+                }
+                finally {
+                    routerViewDepth = currentDepth;
+                }
+            }
+        }
+        else {
+            return jsx('div', {
+                className: 'router-loading',
+                children: '',
+            });
+        }
+    }
+    else {
+        const Component = componentModule.default || componentModule;
+        componentCache.set(routePath, Component);
+        routerViewDepth = currentDepth + 1;
+        try {
+            return jsx(Component, {
+                key: fullPath,
+            });
+        }
+        finally {
+            routerViewDepth = currentDepth;
+        }
+    }
+    return null;
+}
+function loadAndRenderLayoutWithPage(layoutModule, layoutKey, pageModule, routePath, fullPath, currentDepth) {
+    const layoutLoaded = layoutCache.has(layoutKey);
+    const pageLoaded = componentCache.has(routePath);
+    if (layoutLoaded && pageLoaded) {
+        const Layout = layoutCache.get(layoutKey);
+        const PageComponent = componentCache.get(routePath);
+        routerViewDepth = currentDepth + 1;
+        try {
+            const pageElement = jsx(PageComponent, { key: fullPath });
+            return jsx(Layout, { children: pageElement });
+        }
+        finally {
+            routerViewDepth = currentDepth;
+        }
+    }
+    if (!layoutLoaded && typeof layoutModule === 'function' && !pendingLoads.has(layoutKey)) {
+        const loadPromise = layoutModule();
+        if (loadPromise && typeof loadPromise.then === 'function') {
+            pendingLoads.set(layoutKey, loadPromise);
+            loadPromise.then((result) => {
+                const Layout = result.default || result;
+                layoutCache.set(layoutKey, Layout);
+                pendingLoads.delete(layoutKey);
+                renderVersion.value++;
+            }).catch((error) => {
+                console.error('Failed to load layout:', error);
+                pendingLoads.delete(layoutKey);
+            });
+        }
+        else {
+            const Layout = loadPromise.default || loadPromise;
+            layoutCache.set(layoutKey, Layout);
+        }
+    }
+    if (!pageLoaded && typeof pageModule === 'function' && !pendingLoads.has(routePath)) {
+        const loadPromise = pageModule();
+        if (loadPromise && typeof loadPromise.then === 'function') {
+            pendingLoads.set(routePath, loadPromise);
+            loadPromise.then((result) => {
+                const PageComponent = result.default || result;
+                componentCache.set(routePath, PageComponent);
+                pendingLoads.delete(routePath);
+                renderVersion.value++;
+            }).catch((error) => {
+                console.error('Failed to load page component:', error);
+                pendingLoads.delete(routePath);
+            });
+        }
+        else {
+            const PageComponent = loadPromise.default || loadPromise;
+            componentCache.set(routePath, PageComponent);
+        }
+    }
+    return jsx('div', {
+        className: 'router-loading',
+        children: '',
+    });
+}
+/**
+ * A component that performs a redirect when rendered.
+ * Useful for redirecting from one route to another.
+ *
+ * @param props - Redirect component props
+ * @returns null (performs navigation as side effect)
+ *
+ * @example
+ * ```tsx
+ * // In a route component
+ * if (!isAuthenticated) {
+ *   return <Redirect to="/login" />;
+ * }
+ * ```
+ */
+export function Redirect(props) {
+    const router = useRouter();
+    const { to, replace = true } = props;
+    if (replace) {
+        router.replace(to);
+    }
+    else {
+        router.push(to);
+    }
+    return null;
+}
+/**
+ * A component that performs navigation when rendered.
+ * Alternative to using the router imperatively.
+ *
+ * @param props - Navigate component props
+ * @returns null (performs navigation as side effect)
+ *
+ * @example
+ * ```tsx
+ * function AfterSubmit({ success }) {
+ *   if (success) {
+ *     return <Navigate to="/success" />;
+ *   }
+ *   return <div>Form</div>;
+ * }
+ * ```
+ */
+export function Navigate(props) {
+    const router = useRouter();
+    if (props.replace) {
+        router.replace(props.to);
+    }
+    else {
+        router.push(props.to);
+    }
+    return null;
+}
+//# sourceMappingURL=components.js.map

package/dist/components.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.js","sourceRoot":"","sources":["../src/components.tsx"],"names":[],"mappings":"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"}

package/dist/hooks.d.ts

@@ -0,0 +1,136 @@
+/**
+ * Router hooks for components.
+ * @module
+ */
+import { ComputedRef, Ref } from '@bromscandium/core';
+import { Router, RouteLocation } from './router.js';
+/**
+ * Returns the router instance.
+ * Must be called within a component where a router has been created.
+ *
+ * @returns The router instance
+ * @throws Error if called outside of router context
+ *
+ * @example
+ * ```ts
+ * function MyComponent() {
+ *   const router = useRouter();
+ *
+ *   function handleClick() {
+ *     router.push('/dashboard');
+ *   }
+ *
+ *   return <button onClick={handleClick}>Go to Dashboard</button>;
+ * }
+ * ```
+ */
+export declare function useRouter(): Router;
+/**
+ * Returns a reactive reference to the current route location.
+ *
+ * @returns A ref containing the current RouteLocation
+ *
+ * @example
+ * ```ts
+ * function Breadcrumb() {
+ *   const route = useRoute();
+ *
+ *   return <span>Current path: {route.value.path}</span>;
+ * }
+ * ```
+ */
+export declare function useRoute(): Ref<RouteLocation>;
+/**
+ * Returns a computed ref of the current route parameters.
+ *
+ * @returns A computed ref containing route params
+ *
+ * @example
+ * ```ts
+ * // For route /users/:id
+ * function UserProfile() {
+ *   const params = useParams();
+ *
+ *   return <div>User ID: {params.value.id}</div>;
+ * }
+ * ```
+ */
+export declare function useParams(): ComputedRef<Record<string, string>>;
+/**
+ * Returns a computed ref of the current query string parameters.
+ *
+ * @returns A computed ref containing query params
+ *
+ * @example
+ * ```ts
+ * // For URL /search?q=hello
+ * function SearchResults() {
+ *   const query = useQuery();
+ *
+ *   return <div>Searching for: {query.value.q}</div>;
+ * }
+ * ```
+ */
+export declare function useQuery(): ComputedRef<Record<string, string>>;
+/**
+ * Returns a computed ref of the merged metadata from all matched routes.
+ *
+ * @returns A computed ref containing route metadata
+ *
+ * @example
+ * ```ts
+ * function PageTitle() {
+ *   const meta = useRouteMeta();
+ *
+ *   return <title>{meta.value.title || 'My App'}</title>;
+ * }
+ * ```
+ */
+export declare function useRouteMeta(): ComputedRef<Record<string, any>>;
+/**
+ * Returns navigation helper functions from the router.
+ *
+ * @returns An object with push, replace, back, forward, and go methods
+ *
+ * @example
+ * ```ts
+ * function Navigation() {
+ *   const { push, back } = useNavigate();
+ *
+ *   return (
+ *     <>
+ *       <button onClick={back}>Back</button>
+ *       <button onClick={() => push('/home')}>Home</button>
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export declare function useNavigate(): {
+    push: (to: string | import("./router.js").NavigationTarget) => Promise<void>;
+    replace: (to: string | import("./router.js").NavigationTarget) => Promise<void>;
+    back: () => void;
+    forward: () => void;
+    go: (delta: number) => void;
+};
+/**
+ * Returns a computed boolean indicating if the current route matches a path.
+ *
+ * @param path - A string path or RegExp to match against
+ * @returns A computed ref that is true when the route matches
+ *
+ * @example
+ * ```ts
+ * function NavLink({ to, children }) {
+ *   const isActive = useRouteMatch(to);
+ *
+ *   return (
+ *     <a href={to} className={isActive.value ? 'active' : ''}>
+ *       {children}
+ *     </a>
+ *   );
+ * }
+ * ```
+ */
+export declare function useRouteMatch(path: string | RegExp): ComputedRef<boolean>;
+//# sourceMappingURL=hooks.d.ts.map

package/dist/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../src/hooks.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAY,WAAW,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAAa,MAAM,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE/D;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,SAAS,IAAI,MAAM,CASlC;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,QAAQ,IAAI,GAAG,CAAC,aAAa,CAAC,CAG7C;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,SAAS,IAAI,WAAW,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAG/D;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,QAAQ,IAAI,WAAW,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAG9D;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,YAAY,IAAI,WAAW,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAG/D;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,WAAW;;;;;;EAU1B;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,WAAW,CAAC,OAAO,CAAC,CAYzE"}