@livestore/react 0.4.0-dev.20 → 0.4.0-dev.22

package/src/useStore.test.tsx

@@ -0,0 +1,271 @@
+import { makeInMemoryAdapter } from '@livestore/adapter-web'
+import {
+  type RegistryStoreOptions,
+  type Store,
+  StoreInternalsSymbol,
+  StoreRegistry,
+  storeOptions,
+} from '@livestore/livestore'
+import { shouldNeverHappen } from '@livestore/utils'
+import { act, type RenderHookResult, type RenderResult, render, renderHook, waitFor } from '@testing-library/react'
+import * as React from 'react'
+import { describe, expect, it } from 'vitest'
+import { schema } from './__tests__/fixture.tsx'
+import { StoreRegistryProvider } from './StoreRegistryContext.tsx'
+import { useStore } from './useStore.ts'
+
+describe('experimental useStore', () => {
+  it('should return the same promise instance for concurrent getOrLoadStore calls', async () => {
+    const storeRegistry = new StoreRegistry()
+    const options = testStoreOptions()
+
+    // Make two concurrent calls during loading
+    const firstStore = storeRegistry.getOrLoadPromise(options)
+    const secondStore = storeRegistry.getOrLoadPromise(options)
+
+    // Both should be promises (store is loading)
+    expect(firstStore).toBeInstanceOf(Promise)
+    expect(secondStore).toBeInstanceOf(Promise)
+
+    // EXPECTED BEHAVIOR: Same promise instance for React.use() compatibility
+    // ACTUAL BEHAVIOR: Different promise instances (Effect.runPromise creates new wrapper)
+    expect(firstStore).toBe(secondStore)
+
+    // Cleanup
+    await firstStore
+    await cleanupAfterUnmount(() => {})
+  })
+
+  it('works with Suspense boundary', async () => {
+    const storeRegistry = new StoreRegistry()
+    const options = testStoreOptions()
+
+    let view: RenderResult | undefined
+    await act(async () => {
+      view = render(
+        <StoreRegistryProvider storeRegistry={storeRegistry}>
+          <React.Suspense fallback={<div data-testid="fallback" />}>
+            <StoreConsumer options={options} />
+          </React.Suspense>
+        </StoreRegistryProvider>,
+      )
+    })
+    const renderedView = view ?? shouldNeverHappen('render failed')
+
+    // After loading completes, should show the actual content
+    await waitForSuspenseResolved(renderedView)
+    expect(renderedView.getByTestId('ready')).toBeDefined()
+
+    await cleanupAfterUnmount(() => renderedView.unmount())
+  })
+
+  it('does not re-suspend on subsequent renders when store is already loaded', async () => {
+    const storeRegistry = new StoreRegistry()
+    const options = testStoreOptions()
+
+    const Wrapper = ({ opts }: { opts: RegistryStoreOptions<typeof schema> }) => (
+      <StoreRegistryProvider storeRegistry={storeRegistry}>
+        <React.Suspense fallback={<div data-testid="fallback" />}>
+          <StoreConsumer options={opts} />
+        </React.Suspense>
+      </StoreRegistryProvider>
+    )
+
+    let view: RenderResult | undefined
+    await act(async () => {
+      view = render(<Wrapper opts={options} />)
+    })
+    const renderedView = view ?? shouldNeverHappen('render failed')
+
+    // Wait for initial load
+    await waitForSuspenseResolved(renderedView)
+    expect(renderedView.getByTestId('ready')).toBeDefined()
+
+    // Rerender with new options object (but same storeId)
+    await act(async () => {
+      renderedView.rerender(<Wrapper opts={{ ...options }} />)
+    })
+
+    // Should not show fallback
+    expect(renderedView.queryByTestId('fallback')).toBeNull()
+    expect(renderedView.getByTestId('ready')).toBeDefined()
+
+    await cleanupAfterUnmount(() => renderedView.unmount())
+  })
+
+  it('throws when store loading fails', async () => {
+    const storeRegistry = new StoreRegistry()
+    const badOptions = testStoreOptions({
+      // @ts-expect-error - intentionally passing invalid adapter to trigger error
+      adapter: null,
+    })
+
+    // Pre-load the store to cache the error (error happens synchronously)
+    expect(() => storeRegistry.getOrLoadPromise(badOptions)).toThrow()
+
+    // Now when useStore tries to get it, it should throw synchronously
+    expect(() =>
+      renderHook(() => useStore(badOptions), {
+        wrapper: makeProvider(storeRegistry),
+      }),
+    ).toThrow()
+  })
+
+  it.each([
+    { label: 'non-strict mode', strictMode: false },
+    { label: 'strict mode', strictMode: true },
+  ])('works in $label', async ({ strictMode }) => {
+    const storeRegistry = new StoreRegistry()
+    const options = testStoreOptions()
+
+    let hook: RenderHookResult<Store<typeof schema>, RegistryStoreOptions<typeof schema>> | undefined
+    await act(async () => {
+      hook = renderHook(() => useStore(options), {
+        wrapper: makeProvider(storeRegistry, { suspense: true }),
+        reactStrictMode: strictMode,
+      })
+    })
+    const { result, unmount } = hook ?? shouldNeverHappen('renderHook failed')
+
+    // Wait for store to be ready
+    await waitForStoreReady(result)
+    expect(result.current[StoreInternalsSymbol].clientSession).toBeDefined()
+
+    await cleanupAfterUnmount(unmount)
+  })
+
+  it('handles switching between different storeId values', async () => {
+    const storeRegistry = new StoreRegistry()
+
+    const optionsA = testStoreOptions({ storeId: 'store-a' })
+    const optionsB = testStoreOptions({ storeId: 'store-b' })
+
+    let hook: RenderHookResult<Store<typeof schema>, RegistryStoreOptions<typeof schema>> | undefined
+    await act(async () => {
+      hook = renderHook((opts) => useStore(opts), {
+        initialProps: optionsA,
+        wrapper: makeProvider(storeRegistry, { suspense: true }),
+      })
+    })
+    const { result, rerender, unmount } = hook ?? shouldNeverHappen('renderHook failed')
+
+    // Wait for first store to load
+    await waitForStoreReady(result)
+    const storeA = result.current
+    expect(storeA[StoreInternalsSymbol].clientSession).toBeDefined()
+
+    // Switch to different storeId
+    await act(async () => {
+      rerender(optionsB)
+    })
+
+    // Wait for second store to load and verify it's different from the first
+    await waitFor(() => {
+      expect(result.current).not.toBe(storeA)
+      expect(result.current?.[StoreInternalsSymbol].clientSession).toBeDefined()
+    })
+
+    const storeB = result.current
+    expect(storeB[StoreInternalsSymbol].clientSession).toBeDefined()
+    expect(storeB).not.toBe(storeA)
+
+    await cleanupAfterUnmount(unmount)
+  })
+
+  // useStore doesn't handle unusedCacheTime=0 correctly because retain is called in useEffect (after render)
+  // See https://github.com/livestorejs/livestore/issues/916
+  it.skip('should load store with unusedCacheTime set to 0', async () => {
+    const storeRegistry = new StoreRegistry({ defaultOptions: { unusedCacheTime: 0 } })
+    const options = testStoreOptions({ unusedCacheTime: 0 })
+
+    const StoreConsumerWithVerification = ({ opts }: { opts: RegistryStoreOptions<typeof schema> }) => {
+      const store = useStore(opts)
+      // Verify store is usable - access internals to confirm it's not disposed
+      const clientSession = store[StoreInternalsSymbol].clientSession
+      return <div data-testid="ready" data-has-session={String(clientSession !== undefined)} />
+    }
+
+    let view: RenderResult | undefined
+    await act(async () => {
+      view = render(
+        <StoreRegistryProvider storeRegistry={storeRegistry}>
+          <React.Suspense fallback={<div data-testid="fallback" />}>
+            <StoreConsumerWithVerification opts={options} />
+          </React.Suspense>
+        </StoreRegistryProvider>,
+      )
+    })
+    const renderedView = view ?? shouldNeverHappen('render failed')
+
+    await waitForSuspenseResolved(renderedView)
+
+    // Store should be usable while component is mounted
+    const readyElement = renderedView.getByTestId('ready')
+    expect(readyElement.getAttribute('data-has-session')).toBe('true')
+
+    // Allow some time to pass to ensure store isn't prematurely disposed
+    await new Promise((resolve) => setTimeout(resolve, 50))
+
+    // Store should still be usable after waiting
+    expect(readyElement.getAttribute('data-has-session')).toBe('true')
+
+    await cleanupAfterUnmount(() => renderedView.unmount())
+  })
+})
+
+const StoreConsumer = ({ options }: { options: RegistryStoreOptions<any> }) => {
+  useStore(options)
+  return <div data-testid="ready" />
+}
+
+const makeProvider =
+  (storeRegistry: StoreRegistry, { suspense = false }: { suspense?: boolean } = {}) =>
+  ({ children }: { children: React.ReactNode }) => {
+    let content = <StoreRegistryProvider storeRegistry={storeRegistry}>{children}</StoreRegistryProvider>
+
+    if (suspense) {
+      content = <React.Suspense fallback={null}>{content}</React.Suspense>
+    }
+
+    return content
+  }
+
+let testStoreCounter = 0
+
+const testStoreOptions = (overrides: Partial<RegistryStoreOptions<typeof schema>> = {}) =>
+  storeOptions({
+    storeId: overrides.storeId ?? `test-store-${testStoreCounter++}`,
+    schema,
+    adapter: makeInMemoryAdapter(),
+    ...overrides,
+  })
+
+/**
+ * Cleans up after component unmount and waits for pending operations to settle.
+ *
+ * When components using stores unmount, the StoreRegistry schedules garbage collection
+ * timers for inactive stores. This helper waits for those timers to complete naturally.
+ */
+const cleanupAfterUnmount = async (cleanup: () => void): Promise<void> => {
+  cleanup()
+  // Allow any pending microtasks/timers to settle
+  await new Promise((resolve) => setTimeout(resolve, 100))
+}
+
+/**
+ * Waits for React Suspense fallback to resolve and the actual content to render.
+ */
+const waitForSuspenseResolved = async (view: RenderResult): Promise<void> => {
+  await waitFor(() => expect(view.queryByTestId('fallback')).toBeNull())
+}
+
+/**
+ * Waits for a store to be fully loaded and ready to use.
+ * The store is considered ready when it has a defined clientSession.
+ */
+const waitForStoreReady = async (result: { current: Store<any> }): Promise<void> => {
+  await waitFor(() => {
+    expect(result.current).not.toBeNull()
+    expect(result.current[StoreInternalsSymbol].clientSession).toBeDefined()
+  })
+}

package/src/useStore.ts

@@ -1,37 +1,116 @@
 import type { LiveStoreSchema } from '@livestore/common/schema'
-import type { Store } from '@livestore/livestore'
+import type { RegistryStoreOptions, Store } from '@livestore/livestore'
+import type { Schema } from '@livestore/utils/effect'
 import React from 'react'
-
-import type { ReactApi } from './LiveStoreContext.ts'
-import { LiveStoreContext } from './LiveStoreContext.ts'
+import { useStoreRegistry } from './StoreRegistryContext.tsx'
 import { useClientDocument } from './useClientDocument.ts'
 import { useQuery } from './useQuery.ts'
 
-export const withReactApi = <TSchema extends LiveStoreSchema>(store: Store<TSchema>): Store<TSchema> & ReactApi => {
-  // @ts-expect-error TODO properly implement this
+/**
+ * Returns a store instance augmented with hooks (`store.useQuery()` and `store.useClientDocument()`) for reactive queries.
+ *
+ * @example
+ * ```tsx
+ * function Issue() {
+ *   // Suspends until loaded or returns immediately if already loaded
+ *   const issueStore = useStore(issueStoreOptions('abc123'))
+ *   const [issue] = issueStore.useQuery(queryDb(tables.issue.select()))
+ *
+ *   const toggleStatus = () =>
+ *     issueStore.commit(
+ *       issueEvents.issueStatusChanged({
+ *         id: issue.id,
+ *         status: issue.status === 'done' ? 'todo' : 'done',
+ *       }),
+ *     )
+ *
+ *   const preloadParentIssue = (issueId: string) =>
+ *     storeRegistry.preload({
+ *       ...issueStoreOptions(issueId),
+ *       unusedCacheTime: 10_000,
+ *     })
+ *
+ *   return (
+ *     <>
+ *       <h2>{issue.title}</h2>
+ *       <button onClick={() => toggleStatus()}>Toggle Status</button>
+ *       <button onMouseEnter={() => preloadParentIssue(issue.parentIssueId)}>Open Parent Issue</button>
+ *     </>
+ *   )
+ * }
+ * ```
+ *
+ * @remarks
+ * - Suspends until the store is loaded.
+ * - Store is cached by its `storeId` in the `StoreRegistry`. Multiple calls with the same `storeId` return the same store instance.
+ * - Store is cached as long as it's being used, and after `unusedCacheTime` expires (default `60_000` ms in browser, `Infinity` in non-browser)
+ * - Default store options can be configured in `StoreRegistry` constructor.
+ * - Store options are only applied when the store is loaded. Subsequent calls with different options will not affect the store if it's already loaded and cached in the registry.
+ *
+ * @typeParam TSchema - The schema type for the store
+ * @returns The loaded store instance augmented with React hooks
+ * @throws unknown - store loading error or if called outside `<StoreRegistryProvider>`
+ */
+export const useStore = <
+  TSchema extends LiveStoreSchema,
+  TContext = {},
+  TSyncPayloadSchema extends Schema.Schema<any> = typeof Schema.JsonValue,
+>(
+  options: RegistryStoreOptions<TSchema, TContext, TSyncPayloadSchema>,
+): Store<TSchema, TContext> & ReactApi => {
+  const storeRegistry = useStoreRegistry()
 
-  store.useQuery = (queryable) => useQuery(queryable, { store })
-  // @ts-expect-error TODO properly implement this
+  // NOTE: retain() is called in useEffect (after render), while getOrLoadPromise() is called
+  // in useMemo (during render). This creates a timing gap where with very short unusedCacheTime
+  // values (e.g., 0), the store could theoretically be disposed before the effect fires.
+  // In practice, this is not an issue with the default 60s cache time, but it becomes an issue when
+  // `unusedCacheTime` is configured to values less than ~100ms.
+  // See https://github.com/livestorejs/livestore/issues/916
+  React.useEffect(() => storeRegistry.retain(options), [storeRegistry, options])
 
-  store.useClientDocument = (table, idOrOptions, options) => useClientDocument(table, idOrOptions, options, { store })
-  return store as Store<TSchema> & ReactApi
-}
+  const storeOrPromise = React.useMemo(() => storeRegistry.getOrLoadPromise(options), [storeRegistry, options])
 
-export const useStore = (options?: { store?: Store }): { store: Store & ReactApi } => {
-  if (options?.store !== undefined) {
-    return { store: withReactApi(options.store) }
+  const store = storeOrPromise instanceof Promise ? React.use(storeOrPromise) : storeOrPromise
+
+  // Expose store on the global object for browser console debugging.
+  globalThis.__debugLiveStore ??= {}
+  if (Object.keys(globalThis.__debugLiveStore).length === 0) {
+    globalThis.__debugLiveStore._ = store
   }
+  globalThis.__debugLiveStore[options.debug?.instanceId ?? options.storeId] = store
 
-  // biome-ignore lint/correctness/useHookAtTopLevel: store is stable
-  const storeContext = React.useContext(LiveStoreContext)
+  return withReactApi(store)
+}
 
-  if (storeContext === undefined) {
-    throw new Error(`useStore can only be used inside StoreContext.Provider`)
-  }
+/**
+ * React-specific methods added to the Store when used via React hooks.
+ *
+ * These methods are attached by `withReactApi()` and `useStore()`, allowing you
+ * to call `store.useQuery()` and `store.useClientDocument()` directly on the
+ * Store instance.
+ */
+export type ReactApi = {
+  /** Hook version of query subscription—re-renders component when query result changes */
+  useQuery: typeof useQuery
+  /** Hook for reading and writing client-document tables with React state semantics */
+  useClientDocument: typeof useClientDocument
+}
 
-  if (storeContext.stage !== 'running') {
-    throw new Error(`useStore can only be used after the store is running`)
-  }
+/**
+ * Augments a Store instance with React-specific methods (`useQuery`, `useClientDocument`).
+ *
+ * This is called automatically by `useStore()`. You typically don't need to call it
+ * directly unless you're building custom integrations.
+ *
+ * @internal
+ */
+export const withReactApi = <TSchema extends LiveStoreSchema, TContext = {}>(
+  store: Store<TSchema, TContext>,
+): Store<TSchema, TContext> & ReactApi => {
+  // @ts-expect-error TODO properly implement this
+  store.useQuery = (queryable) => useQuery(queryable, { store })
 
-  return { store: withReactApi(storeContext.store) }
+  // @ts-expect-error TODO properly implement this
+  store.useClientDocument = (table, idOrOptions, options) => useClientDocument(table, idOrOptions, options, { store })
+  return store as Store<TSchema, TContext> & ReactApi
 }

package/dist/LiveStoreContext.d.ts

@@ -1,13 +0,0 @@
-import type { LiveStoreContextRunning } from '@livestore/livestore';
-import React from 'react';
-import type { useClientDocument } from './useClientDocument.ts';
-import type { useQuery } from './useQuery.ts';
-export type ReactApi = {
-    useQuery: typeof useQuery;
-    useClientDocument: typeof useClientDocument;
-};
-export declare const LiveStoreContext: React.Context<{
-    stage: "running";
-    store: LiveStoreContextRunning["store"] & ReactApi;
-} | undefined>;
-//# sourceMappingURL=LiveStoreContext.d.ts.map

package/dist/LiveStoreContext.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"LiveStoreContext.d.ts","sourceRoot":"","sources":["../src/LiveStoreContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAA;AACnE,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC/D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAE7C,MAAM,MAAM,QAAQ,GAAG;IACrB,QAAQ,EAAE,OAAO,QAAQ,CAAA;IACzB,iBAAiB,EAAE,OAAO,iBAAiB,CAAA;CAC5C,CAAA;AAED,eAAO,MAAM,gBAAgB;WAClB,SAAS;WAAS,uBAAuB,CAAC,OAAO,CAAC,GAAG,QAAQ;cAC5D,CAAA"}

package/dist/LiveStoreContext.js

@@ -1,3 +0,0 @@
-import React from 'react';
-export const LiveStoreContext = React.createContext(undefined);
-//# sourceMappingURL=LiveStoreContext.js.map

package/dist/LiveStoreContext.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"LiveStoreContext.js","sourceRoot":"","sources":["../src/LiveStoreContext.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,CAAC,aAAa,CAEjD,SAAS,CAAC,CAAA"}

package/dist/LiveStoreProvider.d.ts

@@ -1,66 +0,0 @@
-import type { Adapter, BootStatus, IntentionalShutdownCause, MigrationsReport, SyncError } from '@livestore/common';
-import { LogConfig, UnknownError } from '@livestore/common';
-import type { LiveStoreSchema } from '@livestore/common/schema';
-import type { OtelOptions, Store } from '@livestore/livestore';
-import { StoreInterrupted } from '@livestore/livestore';
-import type { OtelTracer } from '@livestore/utils/effect';
-import { Effect, Schema } from '@livestore/utils/effect';
-import type * as otel from '@opentelemetry/api';
-import React from 'react';
-export interface LiveStoreProviderProps<TSyncPayloadSchema extends Schema.Schema<any> = typeof Schema.JsonValue> extends LogConfig.WithLoggerOptions {
-    schema: LiveStoreSchema;
-    /**
-     * The `storeId` can be used to isolate multiple stores from each other.
-     * So it can be useful for multi-tenancy scenarios.
-     *
-     * The `storeId` is also used for persistence.
-     *
-     * Make sure to also configure `storeId` in LiveStore Devtools (e.g. in Vite plugin).
-     *
-     * @default 'default'
-     */
-    storeId?: string;
-    boot?: (store: Store<LiveStoreSchema>, ctx: {
-        migrationsReport: MigrationsReport;
-        parentSpan: otel.Span;
-    }) => void | Promise<void> | Effect.Effect<void, unknown, OtelTracer.OtelTracer>;
-    otelOptions?: Partial<OtelOptions>;
-    renderLoading?: (status: BootStatus) => React.ReactNode;
-    renderError?: (error: UnknownError | unknown) => React.ReactNode;
-    renderShutdown?: (cause: IntentionalShutdownCause | StoreInterrupted | SyncError) => React.ReactNode;
-    adapter: Adapter;
-    /**
-     * In order for LiveStore to apply multiple events in a single render,
-     * you need to pass the `batchUpdates` function from either `react-dom` or `react-native`.
-     *
-     * ```ts
-     * // With React DOM
-     * import { unstable_batchedUpdates as batchUpdates } from 'react-dom'
-     *
-     * // With React Native
-     * import { unstable_batchedUpdates as batchUpdates } from 'react-native'
-     * ```
-     */
-    batchUpdates: (run: () => void) => void;
-    disableDevtools?: boolean;
-    signal?: AbortSignal;
-    /**
-     * Currently only used in the web adapter:
-     * If true, registers a beforeunload event listener to confirm unsaved changes.
-     *
-     * @default true
-     */
-    confirmUnsavedChanges?: boolean;
-    /**
-     * Payload that will be passed to the sync backend when connecting
-     *
-     * @default undefined
-     */
-    syncPayloadSchema?: TSyncPayloadSchema;
-    syncPayload?: Schema.Schema.Type<TSyncPayloadSchema>;
-    debug?: {
-        instanceId?: string;
-    };
-}
-export declare const LiveStoreProvider: <TSyncPayloadSchema extends Schema.Schema<any> = typeof Schema.JsonValue>({ renderLoading, renderError, renderShutdown, otelOptions, children, schema, storeId, boot, adapter, batchUpdates, disableDevtools, signal, confirmUnsavedChanges, syncPayload, syncPayloadSchema, debug, logger, logLevel, }: LiveStoreProviderProps<TSyncPayloadSchema> & React.PropsWithChildren) => React.ReactNode;
-//# sourceMappingURL=LiveStoreProvider.d.ts.map

package/dist/LiveStoreProvider.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"LiveStoreProvider.d.ts","sourceRoot":"","sources":["../src/LiveStoreProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AACnH,OAAO,EAAE,SAAS,EAAe,YAAY,EAAE,MAAM,mBAAmB,CAAA;AACxE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAC/D,OAAO,KAAK,EAEV,WAAW,EAEX,KAAK,EAEN,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAAqC,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AAE1F,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AACzD,OAAO,EAAmB,MAAM,EAAkB,MAAM,EAAsB,MAAM,yBAAyB,CAAA;AAC7G,OAAO,KAAK,KAAK,IAAI,MAAM,oBAAoB,CAAA;AAC/C,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,sBAAsB,CAAC,kBAAkB,SAAS,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,OAAO,MAAM,CAAC,SAAS,CAC7G,SAAQ,SAAS,CAAC,iBAAiB;IACnC,MAAM,EAAE,eAAe,CAAA;IACvB;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,CACL,KAAK,EAAE,KAAK,CAAC,eAAe,CAAC,EAC7B,GAAG,EAAE;QAAE,gBAAgB,EAAE,gBAAgB,CAAC;QAAC,UAAU,EAAE,IAAI,CAAC,IAAI,CAAA;KAAE,KAC/D,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,OAAO,EAAE,UAAU,CAAC,UAAU,CAAC,CAAA;IAC/E,WAAW,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAA;IAClC,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,KAAK,CAAC,SAAS,CAAA;IACvD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,GAAG,OAAO,KAAK,KAAK,CAAC,SAAS,CAAA;IAChE,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,wBAAwB,GAAG,gBAAgB,GAAG,SAAS,KAAK,KAAK,CAAC,SAAS,CAAA;IACpG,OAAO,EAAE,OAAO,CAAA;IAChB;;;;;;;;;;;OAWG;IACH,YAAY,EAAE,CAAC,GAAG,EAAE,MAAM,IAAI,KAAK,IAAI,CAAA;IACvC,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB;;;;;OAKG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,kBAAkB,CAAA;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAA;IACpD,KAAK,CAAC,EAAE;QACN,UAAU,CAAC,EAAE,MAAM,CAAA;KACpB,CAAA;CACF;AA2BD,eAAO,MAAM,iBAAiB,GAAI,kBAAkB,SAAS,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,OAAO,MAAM,CAAC,SAAS,EAAE,+NAmBxG,sBAAsB,CAAC,kBAAkB,CAAC,GAAG,KAAK,CAAC,iBAAiB,KAAG,KAAK,CAAC,SAuC/E,CAAA"}