@llui/vike 0.0.14 → 0.0.16

package/README.md

@@ -57,6 +57,201 @@ export const onRenderClient = createOnRenderClient({
 })
 ```
 
+### Persistent Layouts
+
+Declare app chrome (header, sidebar, dialogs, session state) as a `Layout` component that stays mounted across client navigation. The route-scoped `Page` swaps in and out at the layout's `pageSlot()` position while the surrounding layout subtree — and every DOM node, focus trap, portal, and effect subscription inside it — is untouched.
+
+```ts
+// pages/+Layout.ts
+import { component, div, header, main } from '@llui/dom'
+import { pageSlot } from '@llui/vike/client'
+
+export const AppLayout = component<LayoutState, LayoutMsg>({
+  name: 'AppLayout',
+  init: () => [{ session: null }, []],
+  update: layoutUpdate,
+  view: ({ send }) => [
+    div({ class: 'app-shell' }, [
+      header([
+        /* persistent chrome */
+      ]),
+      main([pageSlot()]), // ← where the route's Page renders
+    ]),
+  ],
+})
+```
+
+```ts
+// pages/+onRenderClient.ts
+import { createOnRenderClient } from '@llui/vike/client'
+import { AppLayout } from './+Layout'
+
+export const onRenderClient = createOnRenderClient({
+  Layout: AppLayout,
+})
+```
+
+```ts
+// pages/+onRenderHtml.ts — server renders layout + page as one tree
+import { createOnRenderHtml } from '@llui/vike/server'
+import { AppLayout } from './+Layout'
+
+export const onRenderHtml = createOnRenderHtml({
+  Layout: AppLayout,
+})
+```
+
+Call `pageSlot()` exactly once in each layout's view, at the position where nested content should render. It's an ordinary structural primitive — composes naturally inside `show()`, `branch()`, `provide()`, and any other view tree.
+
+#### Nested layouts
+
+Pass an array to stack layouts outer-to-inner. Each layout except the innermost calls its own `pageSlot()`. The innermost layer is always the route's `Page`.
+
+```ts
+createOnRenderClient({
+  Layout: [AppLayout, DashboardLayout],
+})
+```
+
+For per-route chains — e.g. `/dashboard/*` routes use `[AppLayout, DashboardLayout]` while `/settings` uses `[AppLayout]` — pass a resolver function instead:
+
+```ts
+createOnRenderClient({
+  Layout: (pageContext) =>
+    pageContext.urlPathname.startsWith('/dashboard') ? [AppLayout, DashboardLayout] : [AppLayout],
+})
+```
+
+The chain diff on each nav walks old and new chains in parallel and finds the first mismatch. Every layer before that mismatch stays mounted; every layer at or after it is torn down innermost-first and re-mounted outermost-first. Navigating from `/dashboard/reports` to `/dashboard/overview` only disposes the `Page` — `AppLayout` and `DashboardLayout` stay alive. Navigating to `/settings` disposes `DashboardLayout` and the `Page`, keeping only `AppLayout`.
+
+#### Layout ↔ Page communication
+
+Layouts and pages are independent component instances with their own state, update, and `send`. They share state and expose cross-cutting operations via **context**, not via direct messaging.
+
+The scope-tree integration makes this natural: `pageSlot()` creates its slot as a child of the layout's render scope, and the page's `rootScope` is parented inside that slot. `useContext` from within the page walks up through the slot and finds any providers the layout installed above it.
+
+Common pattern — a layout-owned toast system:
+
+```ts
+// pages/+Layout.ts
+import { component, div, main, provide, createContext } from '@llui/dom'
+import { pageSlot } from '@llui/vike/client'
+
+interface ToastDispatchers {
+  show: (msg: string) => void
+  dismiss: (id: string) => void
+}
+export const ToastContext = createContext<ToastDispatchers>(undefined, 'Toast')
+
+export const AppLayout = component<LayoutState, LayoutMsg>({
+  name: 'AppLayout',
+  init: () => [{ toasts: [] }, []],
+  update: layoutUpdate,
+  view: ({ send }) => [
+    div({ class: 'app-shell' }, [
+      ToastStack(), // reads from layout state
+      ...provide(
+        ToastContext,
+        () => ({
+          show: (msg) => send({ type: 'toast/show', msg }),
+          dismiss: (id) => send({ type: 'toast/dismiss', id }),
+        }),
+        () => [main([pageSlot()])],
+      ),
+    ]),
+  ],
+})
+```
+
+```ts
+// Any page below the layout can now use the toast dispatcher.
+// pages/studio/+Page.ts
+import { component, button, text, useContext } from '@llui/dom'
+import { ToastContext } from '../+Layout'
+
+export const StudioPage = component<StudioState, StudioMsg>({
+  name: 'StudioPage',
+  init: () => [{ saved: false }, []],
+  update: (s, m) => {
+    if (m.type === 'saveSucceeded') {
+      // ...
+    }
+    return [s, []]
+  },
+  view: ({ send }) => {
+    const toast = useContext(ToastContext)
+    return [button({ onClick: () => toast({} as LayoutState).show('Saved') }, [text('Save')])]
+  },
+})
+```
+
+Toast state machines, global progress indicators, breadcrumb/title bars, modal-takeover chrome toggles, and session-expired banners all fall out of this pattern naturally — the layout owns the state, provides a dispatcher via context, and any page can trigger layout operations without touching the layout's internals.
+
+For the rarer case where a layout needs to **probe a page** (e.g. "is your form dirty? can we navigate away?"), use **addressed effects** — the page registers an address on mount, the layout dispatches a targeted effect to it.
+
+#### Layout data
+
+Layouts can have their own server-fetched data alongside per-page `+data.ts` by populating `pageContext.lluiLayoutData` as an array matching the layout chain (outermost first). Each layout's `init(layoutData)` receives its slice.
+
+Wire this from Vike's config mechanism however you like — the adapter just reads `pageContext.lluiLayoutData` when present.
+
+#### Hydration envelope
+
+With a `Layout` configured, `window.__LLUI_STATE__` is chain-aware:
+
+```js
+window.__LLUI_STATE__ = {
+  layouts: [
+    { name: 'AppLayout', state: { session: 'alice' } },
+    { name: 'DashboardLayout', state: { active: 'reports' } },
+  ],
+  page: { name: 'ReportsPage', state: { view: 'summary' } },
+}
+```
+
+The client matches each layer by component `name` when hydrating — server/client chain mismatches throw with a clear error instead of silently binding the wrong state to the wrong instance. Pages written against the pre-layout flat envelope shape continue to hydrate correctly when no `Layout` is configured.
+
+### Page Transitions
+
+`createOnRenderClient` accepts `onLeave` and `onEnter` hooks that fire around the dispose-and-remount cycle on client navigation. `onLeave` is awaited — return a promise to defer the swap until a leave animation finishes:
+
+```ts
+import { createOnRenderClient, fromTransition } from '@llui/vike/client'
+import { routeTransition } from '@llui/transitions'
+
+export const onRenderClient = createOnRenderClient({
+  ...fromTransition(routeTransition({ duration: 200 })),
+})
+```
+
+`fromTransition` adapts any `TransitionOptions` (the shape returned by `routeTransition`, `fade`, `slide`, etc.) into the hook pair. The transition operates on the container element — its opacity / transform fades out the outgoing page, then the new page fades in after mount.
+
+For raw animations without `@llui/transitions`, write the hooks yourself:
+
+```ts
+export const onRenderClient = createOnRenderClient({
+  onLeave: (el) => el.animate({ opacity: [1, 0] }, 200).finished,
+  onEnter: (el) => el.animate({ opacity: [0, 1] }, 200),
+})
+```
+
+### Client Navigation Lifecycle
+
+When Vike fires a client-side navigation, `@llui/vike` runs this sequence inside `onRenderClient`:
+
+1. **`onLeave(el)`** — awaited. The outgoing page's DOM is still mounted; this is the only moment where a leave animation can read/write it.
+2. **`currentHandle.dispose()`** — tears down the outgoing component's scope tree. All `onMount` cleanups run here, portals are removed from their targets, focus traps are popped, body scroll locks release, sibling `aria-hidden` is restored. The regression test in `@llui/components/test/components/dialog-dispose.test.ts` covers this path explicitly.
+3. **`el.textContent = ''`** — the outgoing DOM is cleared from the container.
+4. **`mountApp(el, Page, data)`** — the new page mounts.
+5. **`onEnter(el)`** — synchronous; fire-and-forget. Promises are ignored here.
+6. **`onMount()`** — legacy hook, fires last on every render (including the initial hydration).
+
+On the initial hydration render, `onLeave` and `onEnter` are both skipped — there's no outgoing page to leave, and hydration doesn't insert new DOM that needs an enter animation.
+
+**AbortSignal semantics for in-flight effects.** When a component is disposed, its `AbortController` fires and `inst.signal.aborted` becomes `true`. Effect handlers should guard their `send()` calls against `signal.aborted` — the base package already does this in `@llui/effects`. Network requests that have already been accepted by the server are NOT cancelled by navigation; cancellation only applies to future `send()` dispatches into the now-aborted instance. This is intentional: cancelling a successful signup POST just because the user clicked a nav link would lose data.
+
+**Scroll position is the host's problem.** Vike controls scroll-to-top behavior via `scrollToTop` in `+config.ts`. `@llui/vike` doesn't touch scroll — if you need custom scroll handling, configure it on the Vike side.
+
 ## How It Works
 
 ### Server (`onRenderHtml`)
@@ -69,11 +264,13 @@ Hydrates the server-rendered HTML on the client. Attaches event listeners and re
 
 ## API
 
-| Export                 | Sub-path            | Description                                 |
-| ---------------------- | ------------------- | ------------------------------------------- |
-| `onRenderHtml`         | `@llui/vike/server` | Default server hook — minimal HTML template |
-| `createOnRenderHtml`   | `@llui/vike/server` | Factory for custom document templates       |
-| `onRenderClient`       | `@llui/vike/client` | Default client hook — hydrate or mount      |
-| `createOnRenderClient` | `@llui/vike/client` | Factory for custom container/lifecycle      |
+| Export                 | Sub-path            | Description                                                     |
+| ---------------------- | ------------------- | --------------------------------------------------------------- |
+| `onRenderHtml`         | `@llui/vike/server` | Default server hook — minimal HTML template                     |
+| `createOnRenderHtml`   | `@llui/vike/server` | Factory for custom document templates + persistent layouts      |
+| `onRenderClient`       | `@llui/vike/client` | Default client hook — hydrate or mount                          |
+| `createOnRenderClient` | `@llui/vike/client` | Factory for custom container + layouts + transition hooks       |
+| `pageSlot`             | `@llui/vike/client` | Structural primitive — declares where a layout renders its page |
+| `fromTransition`       | `@llui/vike/client` | Adapter: `TransitionOptions` → `{ onLeave, onEnter }` hook pair |
 
 The barrel export (`@llui/vike`) re-exports everything, but prefer sub-path imports to avoid bundling jsdom into the client.

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export { onRenderHtml, createOnRenderHtml } from './on-render-html.js';
-export type { PageContext, DocumentContext, RenderHtmlResult } from './on-render-html.js';
-export { onRenderClient, createOnRenderClient } from './on-render-client.js';
+export type { PageContext, DocumentContext, RenderHtmlResult, RenderHtmlOptions, } from './on-render-html.js';
+export { onRenderClient, createOnRenderClient, fromTransition } from './on-render-client.js';
 export type { ClientPageContext, RenderClientOptions } from './on-render-client.js';
+export { pageSlot } from './page-slot.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAA;AACtE,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAEzF,OAAO,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAA;AAC5E,YAAY,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAA;AACtE,YAAY,EACV,WAAW,EACX,eAAe,EACf,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,qBAAqB,CAAA;AAE5B,OAAO,EAAE,cAAc,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAC5F,YAAY,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAEnF,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA"}

package/dist/index.js

@@ -1,3 +1,4 @@
 export { onRenderHtml, createOnRenderHtml } from './on-render-html.js';
-export { onRenderClient, createOnRenderClient } from './on-render-client.js';
+export { onRenderClient, createOnRenderClient, fromTransition } from './on-render-client.js';
+export { pageSlot } from './page-slot.js';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAA;AAGtE,OAAO,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAA","sourcesContent":["export { onRenderHtml, createOnRenderHtml } from './on-render-html.js'\nexport type { PageContext, DocumentContext, RenderHtmlResult } from './on-render-html.js'\n\nexport { onRenderClient, createOnRenderClient } from './on-render-client.js'\nexport type { ClientPageContext, RenderClientOptions } from './on-render-client.js'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAA;AAQtE,OAAO,EAAE,cAAc,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAG5F,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA","sourcesContent":["export { onRenderHtml, createOnRenderHtml } from './on-render-html.js'\nexport type {\n  PageContext,\n  DocumentContext,\n  RenderHtmlResult,\n  RenderHtmlOptions,\n} from './on-render-html.js'\n\nexport { onRenderClient, createOnRenderClient, fromTransition } from './on-render-client.js'\nexport type { ClientPageContext, RenderClientOptions } from './on-render-client.js'\n\nexport { pageSlot } from './page-slot.js'\n"]}

package/dist/on-render-client.d.ts

@@ -1,35 +1,170 @@
-import type { ComponentDef } from '@llui/dom';
+import type { ComponentDef, TransitionOptions } from '@llui/dom';
+export { pageSlot } from './page-slot.js';
 declare global {
     interface Window {
         __LLUI_STATE__?: unknown;
     }
 }
+/**
+ * Page context shape as seen by `@llui/vike`'s client-side hooks. The
+ * `Page` and `data` fields come from whichever `+Page.ts` and `+data.ts`
+ * Vike resolved for the current route.
+ *
+ * `lluiLayoutData` is optional and carries per-layer data for the layout
+ * chain configured via `createOnRenderClient({ Layout })`. It's indexed
+ * outermost-to-innermost, one entry per layout layer. Absent entries
+ * mean the corresponding layout's `init()` receives `undefined`. Users
+ * wire this from their Vike `+data.ts` files by merging layout-owned
+ * data under the `lluiLayoutData` key.
+ */
 export interface ClientPageContext {
     Page: ComponentDef<unknown, unknown, unknown, unknown>;
     data?: unknown;
+    lluiLayoutData?: readonly unknown[];
     isHydration?: boolean;
 }
+type AnyComponentDef = ComponentDef<unknown, unknown, unknown, unknown>;
+type LayoutChain = ReadonlyArray<AnyComponentDef>;
+/**
+ * Page-lifecycle hooks that fire around the dispose → mount cycle on
+ * client navigation. With persistent layouts in play the cycle only
+ * tears down the *divergent* suffix of the layout chain — any layers
+ * shared between the old and new routes stay mounted.
+ *
+ * Navigation sequence for an already-mounted app:
+ *
+ * ```
+ *   client nav triggered
+ *     │
+ *     ▼
+ *   compare old chain to new chain → find first mismatch index K
+ *     │
+ *     ▼
+ *   onLeave(leaveTarget)   ← awaited; leaveTarget is the slot element
+ *     │                      at depth K-1 (or the root container if K=0)
+ *     │                      whose contents are about to be replaced
+ *     ▼
+ *   dispose chainHandles[K..end] innermost first
+ *     │
+ *     ▼
+ *   leaveTarget.textContent = ''
+ *     │
+ *     ▼
+ *   mount newChain[K..end] into leaveTarget, outermost first
+ *     │
+ *     ▼
+ *   onEnter(leaveTarget)   ← fire-and-forget; fresh DOM in place
+ *     │
+ *     ▼
+ *   onMount()
+ * ```
+ *
+ * On the initial hydration render, `onLeave` and `onEnter` are NOT
+ * called — there's no outgoing page to leave and no animation to enter.
+ * Use `onMount` for code that should run on every render including the
+ * initial one.
+ */
 export interface RenderClientOptions {
-    /** CSS selector for the mount container. Default: '#app' */
+    /** CSS selector for the mount container. Default: `'#app'`. */
     container?: string;
-    /** Called after mount or hydration completes */
+    /**
+     * Persistent layout chain. One of:
+     *
+     * - A single `ComponentDef` — becomes a one-layout chain.
+     * - An array of `ComponentDef`s — outermost layout first, innermost
+     *   layout last. Every layer except the innermost must call
+     *   `pageSlot()` in its view to declare where nested content renders.
+     * - A function that returns a chain from the current `pageContext` —
+     *   lets different routes use different chains, e.g. by reading
+     *   Vike's `pageContext.urlPathname` or `pageContext.config.Layout`.
+     *
+     * Layers that are shared between the previous and next navigation
+     * stay mounted. Only the divergent suffix is disposed and re-mounted.
+     * Dialogs, focus traps, and effect subscriptions rooted in a surviving
+     * layer are unaffected by the nav.
+     */
+    Layout?: AnyComponentDef | LayoutChain | ((pageContext: ClientPageContext) => LayoutChain);
+    /**
+     * Called on the slot element whose contents are about to be replaced,
+     * BEFORE the divergent suffix is disposed and re-mounted. The slot's
+     * current DOM is still attached when this runs — the only moment a
+     * leave animation can read/write it. Return a promise to defer the
+     * swap until the animation completes.
+     *
+     * For a plain no-layout setup, the slot element is the root container.
+     * Not called on the initial hydration render.
+     */
+    onLeave?: (el: HTMLElement) => void | Promise<void>;
+    /**
+     * Called after the new divergent suffix is mounted, on the same slot
+     * element that was passed to `onLeave`. Use this to kick off an enter
+     * animation. Fire-and-forget — promise returns are ignored.
+     *
+     * Not called on the initial hydration render.
+     */
+    onEnter?: (el: HTMLElement) => void;
+    /**
+     * Called after mount or hydration completes. Fires on every render
+     * including the initial hydration. Use for per-render side effects
+     * that don't fit the animation hooks.
+     */
     onMount?: () => void;
 }
 /**
- * Default onRenderClient hook.
- * Hydrates if isHydration is true, otherwise mounts fresh.
+ * Adapt a `TransitionOptions` object (e.g. the output of
+ * `routeTransition()` from `@llui/transitions`, or a preset like `fade`
+ * / `slide`) into the `onLeave` / `onEnter` pair expected by
+ * `createOnRenderClient`.
+ *
+ * ```ts
+ * import { createOnRenderClient, fromTransition } from '@llui/vike/client'
+ * import { routeTransition } from '@llui/transitions'
+ *
+ * export const onRenderClient = createOnRenderClient({
+ *   Layout: AppLayout,
+ *   ...fromTransition(routeTransition({ duration: 200 })),
+ * })
+ * ```
+ *
+ * The transition operates on the slot element — in a no-layout setup,
+ * the root container; in a layout setup, the innermost surviving
+ * layer's `pageSlot()` element. Opacity / transform fades apply to the
+ * outgoing page content, then the new page fades in.
+ */
+export declare function fromTransition(t: TransitionOptions): Pick<RenderClientOptions, 'onLeave' | 'onEnter'>;
+/**
+ * @internal — test helper. Disposes every layer in the current chain
+ * and clears the module state so subsequent calls behave as a first
+ * mount. Not part of the public API; subject to change without notice.
+ */
+export declare function _resetChainForTest(): void;
+/**
+ * Back-compat alias for the pre-layout test helper name.
+ * @internal
+ * @deprecated — use `_resetChainForTest` instead.
+ */
+export declare function _resetCurrentHandleForTest(): void;
+/**
+ * Default onRenderClient hook — no layout, no animation hooks. Hydrates
+ * on first load, mounts fresh on subsequent navs. Use `createOnRenderClient`
+ * for the customizable factory form.
  */
 export declare function onRenderClient(pageContext: ClientPageContext): Promise<void>;
 /**
- * Factory to create a customized onRenderClient hook.
+ * Factory to create a customized onRenderClient hook. See `RenderClientOptions`
+ * for the full option surface — this is the entry point for persistent
+ * layouts, route transitions, and lifecycle hooks.
  *
- * ```typescript
+ * ```ts
  * // pages/+onRenderClient.ts
- * import { createOnRenderClient } from '@llui/vike/client'
+ * import { createOnRenderClient, fromTransition } from '@llui/vike/client'
+ * import { routeTransition } from '@llui/transitions'
+ * import { AppLayout } from './+Layout'
  *
  * export const onRenderClient = createOnRenderClient({
- *   container: '#root',
- *   onMount: () => console.log('Page ready'),
+ *   Layout: AppLayout,
+ *   ...fromTransition(routeTransition({ duration: 200 })),
+ *   onMount: () => console.log('page rendered'),
  * })
  * ```
  */

package/dist/on-render-client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"on-render-client.d.ts","sourceRoot":"","sources":["../src/on-render-client.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAa,MAAM,WAAW,CAAA;AAExD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,cAAc,CAAC,EAAE,OAAO,CAAA;KACzB;CACF;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,YAAY,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,CAAA;IACtD,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED,MAAM,WAAW,mBAAmB;IAClC,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AAKD;;;GAGG;AACH,wBAAsB,cAAc,CAAC,WAAW,EAAE,iBAAiB,GAAG,OAAO,CAAC,IAAI,CAAC,CAElF;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,mBAAmB,GAC3B,CAAC,WAAW,EAAE,iBAAiB,KAAK,OAAO,CAAC,IAAI,CAAC,CAEnD"}
+{"version":3,"file":"on-render-client.d.ts","sourceRoot":"","sources":["../src/on-render-client.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAa,iBAAiB,EAAS,MAAM,WAAW,CAAA;AAKlF,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAEzC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,cAAc,CAAC,EAAE,OAAO,CAAA;KACzB;CACF;AAED;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,YAAY,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,CAAA;IACtD,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,cAAc,CAAC,EAAE,SAAS,OAAO,EAAE,CAAA;IACnC,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED,KAAK,eAAe,GAAG,YAAY,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,CAAA;AACvE,KAAK,WAAW,GAAG,aAAa,CAAC,eAAe,CAAC,CAAA;AAoBjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,MAAM,WAAW,mBAAmB;IAClC,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;;;;;;;;;;;;;;OAeG;IACH,MAAM,CAAC,EAAE,eAAe,GAAG,WAAW,GAAG,CAAC,CAAC,WAAW,EAAE,iBAAiB,KAAK,WAAW,CAAC,CAAA;IAE1F;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IAEnD;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,IAAI,CAAA;IAEnC;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,cAAc,CAC5B,CAAC,EAAE,iBAAiB,GACnB,IAAI,CAAC,mBAAmB,EAAE,SAAS,GAAG,SAAS,CAAC,CAgBlD;AAoBD;;;;GAIG;AACH,wBAAgB,kBAAkB,IAAI,IAAI,CAOzC;AAED;;;;GAIG;AACH,wBAAgB,0BAA0B,IAAI,IAAI,CAEjD;AAED;;;;GAIG;AACH,wBAAsB,cAAc,CAAC,WAAW,EAAE,iBAAiB,GAAG,OAAO,CAAC,IAAI,CAAC,CAElF;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,mBAAmB,GAC3B,CAAC,WAAW,EAAE,iBAAiB,KAAK,OAAO,CAAC,IAAI,CAAC,CAEnD"}