@dotvoid/stacked-router 1.0.0

package/README.md

@@ -0,0 +1,594 @@
+# stacked-router
+
+A client side only, file based, router with path mapping to _"view component_ props. Treats opened views as a stack of cards. When a new view (route) is opened this view is added to the top of the stack. As long as enough screen estate is available for all open views they can be displayed side by side. If not the leftmost is hidden until on smaller screens only one view is visible.
+
+The router maintains the browser history and navigation and include utilities to integrate with modern UI libraries navigation. The browser location always matches the focused view which allows links to individual views to be copied and shared.
+
+## Basic concepts
+
+### Routing
+Routing is the process of mapping a URL to a view component (file) and its props. The router provides a `RouterProvider` component that takes a `config` prop which is an array of route definitions, preferrably mapped from the file structure. Each route definition is an object with a `path` and `component` property. The `path` property is a string that defines the URL path for the route. The `component` property is a React component that will be rendered when the route is matched.
+
+Supports a `basePath` property that can be used to automatically prefix all paths in the router navigation.
+
+Supports external routes that are loaded from remote urls. These routes are loaded asynchronously and can be used to load content from external sources. External routes can be defined using the `external` property in the route definition. The `external` property is a string that defines the URL for the external route.
+
+### Stacked views
+Allow placing multiple views side by side on large screens but still degrade gracefully on smaller screens (mobile). Mobile friendly should also be large desktop screen friendly.
+
+Smaller screens/viewports stacks views on top of each other, hiding views that don't receive as much space as they want..
+
+```text
+..........
+. ..........
+. . ..........
+. . . __________
+. . . |        |
+... . |        |
+  ... |        |
+    ..|        |
+      ----------
+```
+
+Based on the minimum screen estate each view require, a larger screen/viewport could display more views if possible. Open views that do not receive enough screen estate will be hidden.
+
+```text
+..........
+. ---------- ---------- ----------
+. |        | |        | |        |
+. |        | |        | |        |
+. |        | |        | |        |
+..|        | |        | |        |
+  ---------- ---------- ----------
+```
+
+### Void views
+
+Void views are rendered outside the stack. These views do not take up any space in the stack. This is useful for displaying a view in a modal, sheet or popup.
+
+### Layouts
+
+Layouts are used to define the layout of the views in the stack. Layouts can be nested to create more complex layouts. This means that a layout further down the tree is rendered inside a layout further up in the tree.
+
+Default layouts are named `_layout.tsx`.
+
+It is also possible to define named, or keyed, layouts. When navigating to a view, the layouts with the matching name will be used. If no layout with the matching name is found, any default layouts will be used.
+
+Named layouts are named `_layout.name.tsx`.
+
+### Slots
+
+Layouts support defining named slots. This allows view components to render content which is automatically rendered inside the layout instead. This allow for styling of for example headers and footers in the layout while still allowing the views to have the logic and decide what should be rendered these slots.
+
+### Error Boundaries
+
+Stacked router includes automatic error boundaries around each view that catch rendering errors and display contextual error components.
+
+## Usage
+
+### Basic setup
+
+**main.tsx**
+
+```tsx
+import { mapRoutes } from 'stacked-router'
+import { RouterProvider } from 'stacked-router'
+
+const modules = import.meta.glob('./views/**/*.tsx', { eager: true })
+const config = mapRoutes(modules, './views')
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <RouterProvider config={ config }>
+      <App />
+    </RouterProvider>
+  </StrictMode>,
+)
+
+```
+
+**App.tsx**
+
+```tsx
+import { StackedViewGroup } from 'stacked-router'
+
+export function App() {
+   return (
+    <div ref={grid} className='w-screen h-screen relative'>
+      {/* Stacked views rendered here */}
+      <StackedViewGroup className={`flex content-stretch h-screen overflow-hidden`} />
+
+      {/* Standalone views rendered here */}
+      <VoidViews />
+    </div>
+  )
+}
+```
+
+**_layout.tsx**
+
+Layouts are optional and are automatically wrapped around all views at the same level or below it in the file tree. This layout handles active state and width css using tailwind.
+
+```tsx
+import { type PropsWithChildren } from 'react'
+import { StackedView } from 'stacked-router'
+import { useView } from 'stacked-router'
+import { cva } from 'class-variance-authority'
+import { cn } from '@/lib/cn'
+import View from '@/components/View'
+
+export default function Layout({ children }: PropsWithChildren) {
+  const { width, isActive } = useView()
+  const stackedView = cva('h-full grow transition-all group/view', {
+    variants: {
+      isActive: {
+        true: 'is-active',
+        false: 'border-s-1 border-s-foreground-300 [.is-active+&]:border-s-background'
+      }
+    }
+  })
+
+  return (
+    <StackedView className={cn(stackedView({ isActive }))} style={{ flexBasis: `${width}vw` }}>
+      <View.Root>
+        {children}
+      </View.Root>
+    </StackedView>
+  )
+}
+```
+
+**users/[id].tsx**
+
+File names with the structure `[param].tsx` automatically receives `param` in the url as props. As so the url `/users/10104` can be mapped to the below view component.
+
+```tsx
+function PlanningItem({ id }: { id: string }) {
+  const user = useUser(id)
+
+  return (
+    <div>
+      {user?.name ?? ''}
+    </div>
+  )
+}
+```
+
+### Mapping file structure
+
+Use RouterProvider to store all client side routes. Either through a config or by mapping a directory structure.
+
+```tsx
+import { mapRoutes } from 'stacked-router'
+import { RouterProvider } from 'stacked-router'
+
+const modules = import.meta.glob('./views/**/*.tsx', { eager: true })
+const config = mapRoutes(modules, './views')
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <RouterProvider config={ config }>
+      <App />
+    </RouterProvider>
+  </StrictMode>,
+)
+```
+
+**Example view file structure**
+
+A simple file structure with one default view (`views/index.tsx`) and one global layout (`_layout.tsx`) file used for all views. The `plannings/` have one default view that lists plannings and one specific view that opens one planning.
+
+All directories prefixed with underscore (`_`) are ignored. So view specific components are placed in `_component/` directories.
+
+```
+views/
+    plannings/
+        _components/
+            Assignment.tsx
+            AssigmentAction.tsx
+        [id].tsx
+        index.tsx
+    _layout.tsx
+    _layout.dialog.tsx
+    index.tsx
+```
+
+**Example view - `views/plannings/[id].tsx`**
+
+```tsx
+const meta = {
+  breakpoints: [
+    {
+      breakpoint: 720,
+      minVw: 50
+    },
+    {
+      breakpoint: 1024,
+      minVw: 30
+    },
+    {
+      breakpoint: 1280,
+      minVw: 20
+    }
+  ]
+}
+
+function PlanningItem({ id }: { id: string }) {
+  return (
+    <div>
+      Planning item
+    </div>
+  )
+}
+
+PlanningItem.meta = meta
+export default PlanningItem
+```
+
+The `mapRoutes()` creates a route configuration including minimum view width requirements for each breakpoint based on the meta data in each view file.
+
+_The configuration includes the actual components which is not visible below, which is why the layout seems empty._
+
+```json
+{
+  "routes": [
+    {
+      "path": "/",
+      "meta": {
+        "breakpoints": [
+          {
+            "breakpoint": 1024,
+            "minVw": 50
+          },
+          {
+            "breakpoint": 1280,
+            "minVw": 33
+          }
+        ]
+      }
+    },
+    {
+      "path": "/plannings/[id]",
+      "meta": {
+        "breakpoints": [
+          {
+            "breakpoint": 720,
+            "minVw": 50
+          },
+          {
+            "breakpoint": 1024,
+            "minVw": 30
+          },
+          {
+            "breakpoint": 1280,
+            "minVw": 20
+          }
+        ]
+      }
+    },
+    {
+      "path": "/plannings",
+      "meta": {
+        "breakpoints": [
+          {
+            "breakpoint": 1024,
+            "minVw": 50
+          },
+          {
+            "breakpoint": 1280,
+            "minVw": 33
+          }
+        ]
+      }
+    }
+  ],
+  "layouts": {}
+}
+```
+
+### Integrating with UI libraries
+
+Stacked router, as most router libraries, expose hooks to allow better integration with (some) UI libraries that can be configured to use the router mechanism inside its UI components like tabs, listboxes, buttons etc. The hook `useNavigate()` handles client-side navigation and `useHref()` can translate router hrefs to native HTML hrefs. Example below is based on HeroUI.
+
+```jsx
+import { StackedViewGroup } from 'stacked-router'
+import { useHref, useNavigate } from 'stacked-router/hooks'
+import { HeroUIProvider } from '@heroui/react'
+
+export function App() {
+  const navigate = useNavigate()
+
+   return (
+    <HeroUIProvider navigate={navigate} useHref={useHref}>
+      <div ref={grid} className='w-screen h-screen relative'>
+        <StackedViewGroup className={`flex content-stretch h-screen overflow-hidden`} />
+      </div>
+    </HeroUIProvider>
+  )
+}
+```
+
+Then it is a simple matter of using the UI libraries components for navigation.
+
+**Link component example**
+
+```jsx
+import { Link } from '@heroui/react'
+
+<Link href='/plannings/234'>Planning item nr 234</Link>
+```
+
+**Dropdown menu example**
+
+```jsx
+import { Button, Dropdown, DropdownItem, DropdownMenu, DropdownSection, DropdownTrigger } from "@heroui/react";
+import { Ellipsis } from 'lucide-react'
+
+<Dropdown>
+  <DropdownTrigger>
+    <Button isIconOnly size="sm" variant="light">
+      <Ellipsis size={18} />
+    </Button>
+  </DropdownTrigger>
+  <DropdownMenu>
+    <DropdownSection showDivider>
+      <DropdownItem key='open' href={`/plannings/234`}>
+        Planning item nr 234
+      </DropdownItem>
+    </DropdownSection>
+  </DropdownMenu>
+</Dropdown>
+}
+```
+
+**shadcn example**
+
+Integration with shadcn is different as it does not provide the same convenience context. Most shadcn components that need navigation (like Button, NavigationMenu) accept an `asChild` prop which makes it easy to wrap the stacked router `Link` component.
+
+```jsx
+import { Button } from '@/components/ui/button'
+import { Link } from 'stacked-router'
+
+<Button asChild>
+  <Link to="/planning/234">Planning item nr 234</Link>
+</Button>
+```
+
+### Custom navigation
+
+For more custom ways of navigating to another view, the hook `useNavigate()`, can be used. It allows sending _invisible_ props (params not visible in URL), specifying a specific layout or that the view should be rendered as a void view (outside of the stack).
+
+The same can be achieved by using the `<Link />` component included in the `stacked-router` package.
+
+```jsx
+import { useNavigate } from 'stacked-router'
+
+const navigate = useNavigate()
+
+<button onPress={() => {
+  navigate('/planning/234', {
+    options: {
+      fromEvent: '3433'
+    }
+  })
+}}>
+  Navigate to planning item nr 234
+</button>
+
+<button onPress={() => {
+  navigate('/planning/' + crypto.randomUUID(), {
+    options: {
+      fromEvent: '3433',
+      layout: 'dialog',
+      target: '_void'
+    }
+  })
+}}>
+  Create new planning item
+</button>
+```
+
+### useView()
+
+Used to get query parameter, props, layout or update query parameters or props or if a named layout is used.
+
+```jsx
+import { useView } from 'stacked-router'
+
+const { props, setProps, queryParams, setQueryParams, layout } = useView()
+
+<p>
+{layout
+  ? layout
+  : 'No layout or default layout'
+}
+</p>
+
+<button onPress={() => {
+  // Add one prop
+  setProps({ created: true})
+}}>
+  Is created
+</button>
+
+<button onPress={() => {
+  // Set all (clear all) query parameters
+  setQueryParams({}, true)
+}}>
+  Is created
+</button>
+```
+
+### useOpenViews()
+
+Can be used to get information on a subset of open views that match a given criteria. It is only possible to find views that have set the type in the view meta information. Useful to be able to mark rows that match an open view in a table or listing.
+
+Example view:
+
+```jsx
+const meta: ViewMetadata = {
+  type: 'customer'
+}
+
+function Customer({ id }: { id: string }) {
+  return <div>Example component</div>
+}
+
+Customer.meta = meta
+export default Customer
+```
+
+Usage in other views:
+
+```jsx
+import { useOpenViews } from 'stacked-router'
+
+export function CustomerList() {
+  // Get all customers
+  const customers = useCustomers()
+
+  // Get all open customer views
+  const customerViews = useOpenViews('customer')
+
+  return (
+    <div>
+      {customers.map(c => (
+        <div
+          key={c.id}
+          className={customerViews.includes(c.id) ? 'active' : ''}
+        >
+          {c.id}: {c.name}
+        </div>
+      ))}
+    </div>
+  )
+}
+```
+
+It is also possible to match against params (url path params).
+```jsx
+const specificView = useOpenViews('article', {
+  categoryId: 'news',
+  articleId: '456'
+})
+```
+
+### Using layout slots
+
+A slot is defined in the layout using the component `<Outlet/>` and filled with content in the view using the component `<Fill/>`. The prop `name` is used to identify the slot.
+
+The example below is a basic HeroUI Modal displayed in a void view (not in the normal stack). Note how the enabled state of the button can be maintained in the view but still rendered in the footer slot styled by the layout.
+
+The layout could be used by many view components but keep all styling of the header and footer in the layout. The order of the slots in the view component is not important.
+
+_Also shows how to close a void view, in this case when when the modal closes._
+
+**View component**
+
+```jsx
+import { Fill } from 'stacked-router'
+
+export default function User() {
+  const [disabled, setDisabled] = useState(false)
+  const userName = 'John Doe'
+
+  return (
+    <>
+      <Fill slot='header'>
+        {userName}
+      </Fill>
+
+      <p>User content here</p>
+
+      <Fill slot='footer'>
+        <button disabled={disabled}>Save</button>
+      </Fill>
+    </>
+  )
+}
+```
+
+**Dialog layout**
+
+```jsx
+import {
+  Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, useDisclosure,
+} from '@heroui/react'
+import { useEffect } from 'react'
+import { useView, Outlet } from 'stacked-router'
+
+export default function DialogLayout({ children }: {
+  children: React.ReactNode
+}) {
+  const {isOpen, onOpen, onClose} = useDisclosure()
+  const { close } = useView()
+
+  useEffect(() => {
+    onOpen()
+  }, [onOpen])
+
+
+  return (
+    <>
+      <Modal
+        isOpen={isOpen} size='2xl' className='max-h-4/5' onClose={onClose}
+        onOpenChange={(isOpen) => {
+          if (!isOpen) {
+            close()
+          }
+        }}
+        hideCloseButton={true}
+      >
+        <ModalContent>
+          <ModalHeader className='flex flex-row gap-4 border-b border-gray-200'>
+            <Outlet slot='header' />{/* Header content from the view */}
+          </ModalHeader>
+
+          <ModalBody className='overflow-y-scroll p-0'>
+            {/* All and any User view content is displayed here */}
+            {children}
+          </ModalBody>
+
+          <ModalFooter className='border-t border-gray-200 flex justify-end gap-4'>
+            <Outlet slot='footer' />{/* Footer content from the view */}
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  )
+}
+```
+
+### Error components
+
+Create `_error.tsx` files to handle errors at different levels of your application. The router finds the closest error component up the directory tree.
+
+**_error.tsx**
+
+```tsx
+import type { ErrorComponentProps } from 'stacked-router'
+
+export default function MyError({ error, reset }: ErrorComponentProps) {
+  return (
+    <div>
+      <h2>Something went wrong</h2>
+      <p>{error.message}</p>
+      <button onClick={reset}>Try again</button>
+    </div>
+  )
+}
+```
+
+**File structure example**
+
+```
+views/
+    _error.tsx          # Root fallback for all views
+    users/
+        _error.tsx      # Specific to user section
+        index.tsx       # Uses users/_error.tsx
+    plannings/
+        index.tsx       # Uses root _error.tsx
+```
+
+The `reset` function clears the error and re-renders the component. Error boundaries only catch rendering errors, not errors in event handlers or async code.

package/dist/components/DefaultLayout.d.ts

@@ -0,0 +1,4 @@
+export declare function DefaultLayout({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DefaultLayout.d.ts.map

package/dist/components/DefaultLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultLayout.d.ts","sourceRoot":"","sources":["../../lib/components/DefaultLayout.tsx"],"names":[],"mappings":"AAAA,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE;IAC1C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,2CAMA"}

package/dist/components/ErrorBoundary.d.ts

@@ -0,0 +1,22 @@
+import { Component, ErrorInfo, ReactNode } from 'react';
+interface Props {
+    children?: ReactNode;
+    viewUrl: string;
+    error?: Error;
+    errorCode?: number;
+}
+interface State {
+    hasError: boolean;
+    errorCode?: number;
+    error?: Error;
+    errorInfo?: ErrorInfo;
+}
+export declare class ErrorBoundary extends Component<Props, State> {
+    constructor(props: Props);
+    static getDerivedStateFromError(error: Error): State;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    reset: () => void;
+    render(): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+}
+export {};
+//# sourceMappingURL=ErrorBoundary.d.ts.map

package/dist/components/ErrorBoundary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBoundary.d.ts","sourceRoot":"","sources":["../../lib/components/ErrorBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGvD,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,OAAO,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,UAAU,KAAK;IACb,QAAQ,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB;AAED,qBAAa,aAAc,SAAQ,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;gBAC5C,KAAK,EAAE,KAAK;IASxB,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK;IAIpD,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS;IAMpD,KAAK,aAEJ;IAED,MAAM;CAaP"}

package/dist/components/ErrorResolver.d.ts

@@ -0,0 +1,9 @@
+import { ErrorInfo } from 'react';
+export declare function ErrorResolver({ viewUrl, error, errorCode, errorInfo, reset }: {
+    viewUrl: string;
+    error: Error;
+    errorCode?: number;
+    errorInfo?: ErrorInfo;
+    reset: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ErrorResolver.d.ts.map

package/dist/components/ErrorResolver.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorResolver.d.ts","sourceRoot":"","sources":["../../lib/components/ErrorResolver.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIjC,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,KAAK,EACL,SAAS,EACT,SAAS,EACT,KAAK,EACN,EAAE;IACD,OAAO,EAAE,MAAM,CAAA;IACf,KAAK,EAAE,KAAK,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,KAAK,EAAE,MAAM,IAAI,CAAA;CAClB,2CAiFA"}

package/dist/components/Link.d.ts

@@ -0,0 +1,29 @@
+import { PropsWithChildren } from 'react';
+interface LinkProps {
+    href?: string;
+    query?: Record<string, string | number | boolean>;
+    props?: Record<string, string | number | boolean>;
+    layout?: string;
+    className?: string;
+    target?: '_self' | '_top' | '_blank' | '_void';
+    onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
+}
+/**
+ * Link component allows giving parameters in two ways, as part of the query string
+ * in the href or as a query key/value object. They will always be combined to a url.
+ *
+ * Automatically adds rel="noopener noreferrer" to all external links.
+ * Props can be used to send arbitrary data to a view.
+ *
+ * ATTENTION:
+ *
+ * If using HeroUI, prefer using HeroUI Link component. Utilise the hooks useHref()
+ * and useNavigate() to provide HeroUIProvider the necessary components.
+ *
+ * CAVEAT: Props is not persisted in any way  and thus only used in first load of a view.
+ * When using target _blank or CMD/CTRL to open a view in a new window props will
+ * not be passed to the view.
+ */
+export declare function Link({ href, query, children, className, target, onClick, props, layout }: PropsWithChildren & LinkProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Link.d.ts.map

package/dist/components/Link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../lib/components/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAKzC,UAAU,SAAS;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAA;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAA;IACjD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;IAC9C,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;CAC3D;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,KAAU,EACV,QAAQ,EACR,SAAS,EACT,MAAgB,EAChB,OAAO,EACP,KAAK,EACL,MAAM,EACP,EAAE,iBAAiB,GAAG,SAAS,2CAuC/B"}

package/dist/components/Slots.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Use in layout to render slot content
+ */
+export declare function Outlet({ slot }: {
+    slot: string;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Use in view component to define content for a slot
+ */
+export declare function Fill({ slot, children }: {
+    slot: string;
+    children: React.ReactNode;
+}): null;
+//# sourceMappingURL=Slots.d.ts.map

package/dist/components/Slots.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slots.d.ts","sourceRoot":"","sources":["../../lib/components/Slots.tsx"],"names":[],"mappings":"AAIA;;GAEG;AACH,wBAAgB,MAAM,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,2CAKhD;AAED;;GAEG;AACH,wBAAgB,IAAI,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACvC,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,QAUA"}