@datakable/react 0.0.0-stage → 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Supakit Kitjanabumrungsak
+
+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

@@ -1,3 +1,128 @@
-# Temporary Holding Version
+# @datakable/react
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+React bindings for DataKable: the `useDataTable` hook over the
+[`@datakable/core`](https://github.com/Ink01101011/datakable/tree/main/packages/core) table store. Most apps want
+[`datakable`](https://github.com/Ink01101011/datakable/tree/main/packages/datakable), whose `useDataTable` also installs the default feature
+preset; this package installs **no** features unless you pass them.
+
+> Version 1.0: the public API is stable and follows semantic versioning from here. Guides,
+> examples and troubleshooting: the [documentation](https://github.com/Ink01101011/datakable/blob/main/docs/README.md).
+
+```bash
+npm install @datakable/react @datakable/core react
+```
+
+React `>=18`. Every module of the bundle carries a `"use client"` directive, so the Next.js app
+router treats `<DataTable />` and `useDataTable` imported from here as client code. Like core,
+it needs a bundler that replaces `process.env.NODE_ENV` (see [core](https://github.com/Ink01101011/datakable/tree/main/packages/core)).
+
+## useDataTable
+
+```tsx
+import { type ColumnDef, pagination, sorting } from '@datakable/core'
+import { useDataTable } from '@datakable/react'
+import type { ReactNode } from 'react'
+
+type User = { id: number; name: string; age: number }
+
+// Columns are compared by reference: define them outside the component, or memoise them
+// (DK_UNSTABLE_COLUMNS warns in development when a new same-shape array arrives every render).
+const columns: ColumnDef<User, ReactNode>[] = [
+  { key: 'name', header: 'Name', cell: ({ value }) => <strong>{value}</strong> },
+  { key: 'age', header: 'Age' },
+]
+
+export function Users({ users }: { users: User[] }) {
+  // @datakable/react installs no features by default; `datakable` adds the preset.
+  const table = useDataTable({
+    data: users,
+    rowKey: 'id',
+    columns,
+    features: [sorting(), pagination({ pageSize: 20 })],
+  })
+  return (
+    <ul aria-busy={table.rowModel.status !== 'idle'}>
+      {table.rowModel.rows.map((row) => (
+        <li key={row.key}>{row.original.name}</li>
+      ))}
+    </ul>
+  )
+}
+```
+
+`useDataTable(options)` takes `createTable`'s options (with `cell` / `invalidCell` returning a
+`ReactNode`) and returns the table — its methods plus the installed features' APIs — with
+`state` and `rowModel` for this render. The returned object is new whenever the table notifies
+and the same object otherwise, so it works as a `useMemo` dependency.
+
+- The table is created once per component instance (on the first render) and destroyed on
+  unmount. Renders read it through `useSyncExternalStore`.
+- **Read once, at creation:** `features`, `schema`, `invalidRows`, `initialState`,
+  `initialData`, `name`, `timeout`, `strict`, `diagnostics`. A new inline `features` array never
+  recreates the table. Hoist a `features` array with `as const`: as a plain array type the
+  table's type loses the features' methods and state.
+- **Synced** through `table.setOptions` in a layout effect, never during render: `data`,
+  `columns`, `rowKey`, `state`, `onStateChange`, `interceptors`, `onDiagnostic`, `fetcher`,
+  `rowCount`.
+- `onStateChange` and `onDiagnostic` may be inline functions. `fetcher`, `onStateChange` and
+  `onDiagnostic` reach the table as stable wrappers that call the latest prop, so a new reference
+  does not refetch — call `refetch()` when a value the fetcher reads changes. Wrap the fetcher
+  with `withFetcher()` (`@datakable/core/server`, also exported by `datakable`), and keep the
+  function you wrap stable: `withFetcher` returns the same wrapper for the same function, so
+  `fetcher={withFetcher(fetchUsers)}` with a module-level `fetchUsers` is fine, but an inline
+  arrow function is a new fetcher on every render and reports `DK_UNSTABLE_OPTION` in development
+  (hoist it or `useCallback` it).
+- `columns`, `data` and a `rowKey` function are compared by reference. In development,
+  `DK_UNSTABLE_COLUMNS` / `DK_UNSTABLE_OPTION` warn when a new same-shape value arrives on every
+  render. Structural comparison is not used, because a changed `format` or `accessor` would then
+  go stale silently.
+- Controlled slices: pass `state` and `onStateChange` (example in
+  [`datakable`](https://github.com/Ink01101011/datakable/tree/main/packages/datakable#controlled-state)).
+- Status-driven UI: render from `table.rowModel.status` and `isInitialLoad` (the
+  [status model](https://github.com/Ink01101011/datakable/tree/main/packages/core#status-model)).
+
+## DataTable
+
+```tsx
+import { type ColumnDef, pagination, search, sorting } from '@datakable/core'
+import { DataTable } from '@datakable/react'
+import type { ReactNode } from 'react'
+
+type User = { id: number; name: string; age: number }
+
+const columns: ColumnDef<User, ReactNode>[] = [
+  { key: 'name', header: 'Name' },
+  { key: 'age', header: 'Age', sortable: false },
+]
+// @datakable/react's DataTable renders what the installed features provide (none by default).
+const features = [search(), sorting(), pagination({ pageSize: 20 })]
+
+export function Users({ users }: { users: User[] }) {
+  return <DataTable data={users} rowKey="id" columns={columns} features={features} />
+}
+```
+
+`<DataTable />` renders sort headers with `aria-sort`, a search input (Enter = `flushSearch`, Esc =
+`clearSearch`), pagination, and Loading / Error / Empty states from `status` + `isInitialLoad`,
+for the features installed (this package installs none by default). Pass `table={useDataTable(…)}`
+to render a table you set up yourself, `components` to replace the search input, pager or states,
+and style it through the `data-*` hooks (`data-status`, `data-initial-load`, `data-sort`,
+`data-invalid`), or import the optional `@datakable/react/styles.css` (zero-specificity rules,
+themed through `--dk-*` custom properties). A `cell` that throws renders `⚠` in that cell
+(`DK_CALLBACK_FAILED`); so does a component it returns that throws while rendering — each such cell
+has its own error boundary, and the other cells keep rendering (`DK_RENDER_FAILED`). A component
+that throws elsewhere in the body shows the Error state with a retry.
+
+## SSR
+
+`useDataTable` and `<DataTable />` render on the server: `initialState` applies there (client-mode
+features filter, search and sort the HTML), and no async work starts. The fetcher's first request
+and a `searchFn` for an initial query run after hydration (`status: 'pending'` until then, shown
+as Loading by `<DataTable />`), unless `initialData` holds their result, in which case hydration
+does not fetch again. A table that changed before the hydration commit reports
+`DK_HYDRATION_MISMATCH`. Example:
+[`datakable` SSR](https://github.com/Ink01101011/datakable/tree/main/packages/datakable#ssr).
+
+## License
+
+MIT

package/dist/codes.cjs

@@ -0,0 +1,66 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/codes.ts
+var codes_exports = {};
+__export(codes_exports, {
+  reactDiagnostics: () => reactDiagnostics
+});
+module.exports = __toCommonJS(codes_exports);
+var import_core = require("@datakable/core");
+var isFeatureOption = (option) => option.startsWith("features[");
+var reactDiagnostics = process.env.NODE_ENV !== "production" ? [
+  (0, import_core.defineDiagnostic)({
+    code: "DK_UNSTABLE_COLUMNS",
+    level: "warn",
+    where: () => ({ kind: "option", path: "columns" }),
+    problem: (d) => `useDataTable received a new columns array with the same shape on ${d.renders} renders in a row (columns are compared by reference)`,
+    impact: () => "each new array rebuilds the column cache and re-runs the pipeline; in a re-render caused by the table itself, the columns the table already has are kept",
+    fix: () => [
+      "define the columns outside the component, or memoise them: useMemo(() => [...columns], [the values they read])",
+      "a new columns array is how you tell the table the columns changed (accessor / format / cell), so create one only when they do"
+    ]
+  }),
+  (0, import_core.defineDiagnostic)({
+    code: "DK_UNSTABLE_OPTION",
+    level: "warn",
+    where: (d) => ({ kind: "option", path: d.option }),
+    problem: (d) => `useDataTable received a new ${d.option} reference on ${d.renders} renders in a row`,
+    impact: (d) => d.option === "fetcher" ? "the table always calls the latest fetcher, but a new fetcher does not refetch: values it reads that are not table state do not reload the data" : d.option === "data" ? "each new array is ingested again (schema, data checks, pipeline); in a re-render caused by the table itself an array with equal rows is skipped" : isFeatureOption(d.option) ? `features are read once, when the table is created: the table keeps calling the ${d.option} of the first render (a stale closure)` : "each new rowKey function recomputes every row key",
+    fix: (d) => d.option === "fetcher" ? [
+      "call table.refetch() when a value the fetcher reads changes (or keep that value in a server-mode feature state, which refetches by itself)",
+      "wrap the fetcher in useCallback to silence this warning"
+    ] : d.option === "data" ? [
+      "memoise derived data: useMemo(() => rows.filter(...), [rows])",
+      "or keep the data in state and pass the same array until it changes"
+    ] : isFeatureOption(d.option) ? [
+      "create the features once: useMemo(() => [search({ searchFn })], []) or outside the component",
+      "read changing values inside the function through a ref (ref.current) instead of the render closure"
+    ] : [
+      "use a key path (rowKey: 'id') or a function defined outside the component",
+      "or wrap it in useCallback"
+    ]
+  })
+] : [];
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  reactDiagnostics
+});
+//# sourceMappingURL=codes.cjs.map

package/dist/codes.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/codes.ts"],"sourcesContent":["import { defineDiagnostic } from '@datakable/core'\n\ndeclare module '@datakable/core' {\n  interface DiagnosticCatalog {\n    DK_UNSTABLE_COLUMNS: {\n      /** Consecutive renders that passed a new `columns` array with the same shape. */\n      renders: number\n    }\n    DK_UNSTABLE_OPTION: {\n      /** `data`, `fetcher`, `rowKey`, or a feature's function option: `features[2].searchFn`. */\n      option: string\n      /** Consecutive renders that passed a new reference. */\n      renders: number\n    }\n  }\n}\n\n// No @types/node here: declare just what is read.\ndeclare const process: { env: { NODE_ENV?: string } }\n\nconst isFeatureOption = (option: string) => option.startsWith('features[')\n\n/**\n * Codes owned by `@datakable/react` (§8.3, react, dev only). Like core's dev checks, the\n * definitions exist only in development: the NODE_ENV check is written out here (not an imported\n * flag) so a consumer's bundler folds it while parsing and drops the text from production bundles\n * (§8.2). They are never emitted in production, so `datakable/messages` has no text for them.\n */\nexport const reactDiagnostics =\n  process.env.NODE_ENV !== 'production'\n    ? [\n        defineDiagnostic({\n          code: 'DK_UNSTABLE_COLUMNS',\n          level: 'warn',\n          where: () => ({ kind: 'option', path: 'columns' }),\n          problem: (d) =>\n            `useDataTable received a new columns array with the same shape on ${d.renders} renders ` +\n            'in a row (columns are compared by reference)',\n          impact: () =>\n            'each new array rebuilds the column cache and re-runs the pipeline; in a re-render caused ' +\n            'by the table itself, the columns the table already has are kept',\n          fix: () => [\n            'define the columns outside the component, or memoise them: ' +\n              'useMemo(() => [...columns], [the values they read])',\n            'a new columns array is how you tell the table the columns changed (accessor / format / ' +\n              'cell), so create one only when they do',\n          ],\n        }),\n        defineDiagnostic({\n          code: 'DK_UNSTABLE_OPTION',\n          level: 'warn',\n          where: (d) => ({ kind: 'option', path: d.option }),\n          problem: (d) =>\n            `useDataTable received a new ${d.option} reference on ${d.renders} renders in a row`,\n          impact: (d) =>\n            d.option === 'fetcher'\n              ? 'the table always calls the latest fetcher, but a new fetcher does not refetch: ' +\n                'values it reads that are not table state do not reload the data'\n              : d.option === 'data'\n                ? 'each new array is ingested again (schema, data checks, pipeline); in a re-render ' +\n                  'caused by the table itself an array with equal rows is skipped'\n                : isFeatureOption(d.option)\n                  ? 'features are read once, when the table is created: the table keeps calling the ' +\n                    `${d.option} of the first render (a stale closure)`\n                  : 'each new rowKey function recomputes every row key',\n          fix: (d) =>\n            d.option === 'fetcher'\n              ? [\n                  'call table.refetch() when a value the fetcher reads changes (or keep that value in ' +\n                    'a server-mode feature state, which refetches by itself)',\n                  'wrap the fetcher in useCallback to silence this warning',\n                ]\n              : d.option === 'data'\n                ? [\n                    'memoise derived data: useMemo(() => rows.filter(...), [rows])',\n                    'or keep the data in state and pass the same array until it changes',\n                  ]\n                : isFeatureOption(d.option)\n                  ? [\n                      'create the features once: useMemo(() => [search({ searchFn })], []) or outside ' +\n                        'the component',\n                      'read changing values inside the function through a ref (ref.current) instead ' +\n                        'of the render closure',\n                    ]\n                  : [\n                      \"use a key path (rowKey: 'id') or a function defined outside the component\",\n                      'or wrap it in useCallback',\n                    ],\n        }),\n      ]\n    : []\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAiC;AAoBjC,IAAM,kBAAkB,CAAC,WAAmB,OAAO,WAAW,WAAW;AAQlE,IAAM,mBACX,QAAQ,IAAI,aAAa,eACrB;AAAA,MACE,8BAAiB;AAAA,IACf,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO,OAAO,EAAE,MAAM,UAAU,MAAM,UAAU;AAAA,IAChD,SAAS,CAAC,MACR,oEAAoE,EAAE,OAAO;AAAA,IAE/E,QAAQ,MACN;AAAA,IAEF,KAAK,MAAM;AAAA,MACT;AAAA,MAEA;AAAA,IAEF;AAAA,EACF,CAAC;AAAA,MACD,8BAAiB;AAAA,IACf,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO,CAAC,OAAO,EAAE,MAAM,UAAU,MAAM,EAAE,OAAO;AAAA,IAChD,SAAS,CAAC,MACR,+BAA+B,EAAE,MAAM,iBAAiB,EAAE,OAAO;AAAA,IACnE,QAAQ,CAAC,MACP,EAAE,WAAW,YACT,mJAEA,EAAE,WAAW,SACX,oJAEA,gBAAgB,EAAE,MAAM,IACtB,kFACG,EAAE,MAAM,2CACX;AAAA,IACV,KAAK,CAAC,MACJ,EAAE,WAAW,YACT;AAAA,MACE;AAAA,MAEA;AAAA,IACF,IACA,EAAE,WAAW,SACX;AAAA,MACE;AAAA,MACA;AAAA,IACF,IACA,gBAAgB,EAAE,MAAM,IACtB;AAAA,MACE;AAAA,MAEA;AAAA,IAEF,IACA;AAAA,MACE;AAAA,MACA;AAAA,IACF;AAAA,EACZ,CAAC;AACH,IACA,CAAC;","names":[]}

package/dist/codes.js

@@ -0,0 +1,42 @@
+"use client";
+
+// src/codes.ts
+import { defineDiagnostic } from "@datakable/core";
+var isFeatureOption = (option) => option.startsWith("features[");
+var reactDiagnostics = process.env.NODE_ENV !== "production" ? [
+  defineDiagnostic({
+    code: "DK_UNSTABLE_COLUMNS",
+    level: "warn",
+    where: () => ({ kind: "option", path: "columns" }),
+    problem: (d) => `useDataTable received a new columns array with the same shape on ${d.renders} renders in a row (columns are compared by reference)`,
+    impact: () => "each new array rebuilds the column cache and re-runs the pipeline; in a re-render caused by the table itself, the columns the table already has are kept",
+    fix: () => [
+      "define the columns outside the component, or memoise them: useMemo(() => [...columns], [the values they read])",
+      "a new columns array is how you tell the table the columns changed (accessor / format / cell), so create one only when they do"
+    ]
+  }),
+  defineDiagnostic({
+    code: "DK_UNSTABLE_OPTION",
+    level: "warn",
+    where: (d) => ({ kind: "option", path: d.option }),
+    problem: (d) => `useDataTable received a new ${d.option} reference on ${d.renders} renders in a row`,
+    impact: (d) => d.option === "fetcher" ? "the table always calls the latest fetcher, but a new fetcher does not refetch: values it reads that are not table state do not reload the data" : d.option === "data" ? "each new array is ingested again (schema, data checks, pipeline); in a re-render caused by the table itself an array with equal rows is skipped" : isFeatureOption(d.option) ? `features are read once, when the table is created: the table keeps calling the ${d.option} of the first render (a stale closure)` : "each new rowKey function recomputes every row key",
+    fix: (d) => d.option === "fetcher" ? [
+      "call table.refetch() when a value the fetcher reads changes (or keep that value in a server-mode feature state, which refetches by itself)",
+      "wrap the fetcher in useCallback to silence this warning"
+    ] : d.option === "data" ? [
+      "memoise derived data: useMemo(() => rows.filter(...), [rows])",
+      "or keep the data in state and pass the same array until it changes"
+    ] : isFeatureOption(d.option) ? [
+      "create the features once: useMemo(() => [search({ searchFn })], []) or outside the component",
+      "read changing values inside the function through a ref (ref.current) instead of the render closure"
+    ] : [
+      "use a key path (rowKey: 'id') or a function defined outside the component",
+      "or wrap it in useCallback"
+    ]
+  })
+] : [];
+export {
+  reactDiagnostics
+};
+//# sourceMappingURL=codes.js.map

package/dist/codes.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/codes.ts"],"sourcesContent":["import { defineDiagnostic } from '@datakable/core'\n\ndeclare module '@datakable/core' {\n  interface DiagnosticCatalog {\n    DK_UNSTABLE_COLUMNS: {\n      /** Consecutive renders that passed a new `columns` array with the same shape. */\n      renders: number\n    }\n    DK_UNSTABLE_OPTION: {\n      /** `data`, `fetcher`, `rowKey`, or a feature's function option: `features[2].searchFn`. */\n      option: string\n      /** Consecutive renders that passed a new reference. */\n      renders: number\n    }\n  }\n}\n\n// No @types/node here: declare just what is read.\ndeclare const process: { env: { NODE_ENV?: string } }\n\nconst isFeatureOption = (option: string) => option.startsWith('features[')\n\n/**\n * Codes owned by `@datakable/react` (§8.3, react, dev only). Like core's dev checks, the\n * definitions exist only in development: the NODE_ENV check is written out here (not an imported\n * flag) so a consumer's bundler folds it while parsing and drops the text from production bundles\n * (§8.2). They are never emitted in production, so `datakable/messages` has no text for them.\n */\nexport const reactDiagnostics =\n  process.env.NODE_ENV !== 'production'\n    ? [\n        defineDiagnostic({\n          code: 'DK_UNSTABLE_COLUMNS',\n          level: 'warn',\n          where: () => ({ kind: 'option', path: 'columns' }),\n          problem: (d) =>\n            `useDataTable received a new columns array with the same shape on ${d.renders} renders ` +\n            'in a row (columns are compared by reference)',\n          impact: () =>\n            'each new array rebuilds the column cache and re-runs the pipeline; in a re-render caused ' +\n            'by the table itself, the columns the table already has are kept',\n          fix: () => [\n            'define the columns outside the component, or memoise them: ' +\n              'useMemo(() => [...columns], [the values they read])',\n            'a new columns array is how you tell the table the columns changed (accessor / format / ' +\n              'cell), so create one only when they do',\n          ],\n        }),\n        defineDiagnostic({\n          code: 'DK_UNSTABLE_OPTION',\n          level: 'warn',\n          where: (d) => ({ kind: 'option', path: d.option }),\n          problem: (d) =>\n            `useDataTable received a new ${d.option} reference on ${d.renders} renders in a row`,\n          impact: (d) =>\n            d.option === 'fetcher'\n              ? 'the table always calls the latest fetcher, but a new fetcher does not refetch: ' +\n                'values it reads that are not table state do not reload the data'\n              : d.option === 'data'\n                ? 'each new array is ingested again (schema, data checks, pipeline); in a re-render ' +\n                  'caused by the table itself an array with equal rows is skipped'\n                : isFeatureOption(d.option)\n                  ? 'features are read once, when the table is created: the table keeps calling the ' +\n                    `${d.option} of the first render (a stale closure)`\n                  : 'each new rowKey function recomputes every row key',\n          fix: (d) =>\n            d.option === 'fetcher'\n              ? [\n                  'call table.refetch() when a value the fetcher reads changes (or keep that value in ' +\n                    'a server-mode feature state, which refetches by itself)',\n                  'wrap the fetcher in useCallback to silence this warning',\n                ]\n              : d.option === 'data'\n                ? [\n                    'memoise derived data: useMemo(() => rows.filter(...), [rows])',\n                    'or keep the data in state and pass the same array until it changes',\n                  ]\n                : isFeatureOption(d.option)\n                  ? [\n                      'create the features once: useMemo(() => [search({ searchFn })], []) or outside ' +\n                        'the component',\n                      'read changing values inside the function through a ref (ref.current) instead ' +\n                        'of the render closure',\n                    ]\n                  : [\n                      \"use a key path (rowKey: 'id') or a function defined outside the component\",\n                      'or wrap it in useCallback',\n                    ],\n        }),\n      ]\n    : []\n"],"mappings":";;;AAAA,SAAS,wBAAwB;AAoBjC,IAAM,kBAAkB,CAAC,WAAmB,OAAO,WAAW,WAAW;AAQlE,IAAM,mBACX,QAAQ,IAAI,aAAa,eACrB;AAAA,EACE,iBAAiB;AAAA,IACf,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO,OAAO,EAAE,MAAM,UAAU,MAAM,UAAU;AAAA,IAChD,SAAS,CAAC,MACR,oEAAoE,EAAE,OAAO;AAAA,IAE/E,QAAQ,MACN;AAAA,IAEF,KAAK,MAAM;AAAA,MACT;AAAA,MAEA;AAAA,IAEF;AAAA,EACF,CAAC;AAAA,EACD,iBAAiB;AAAA,IACf,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO,CAAC,OAAO,EAAE,MAAM,UAAU,MAAM,EAAE,OAAO;AAAA,IAChD,SAAS,CAAC,MACR,+BAA+B,EAAE,MAAM,iBAAiB,EAAE,OAAO;AAAA,IACnE,QAAQ,CAAC,MACP,EAAE,WAAW,YACT,mJAEA,EAAE,WAAW,SACX,oJAEA,gBAAgB,EAAE,MAAM,IACtB,kFACG,EAAE,MAAM,2CACX;AAAA,IACV,KAAK,CAAC,MACJ,EAAE,WAAW,YACT;AAAA,MACE;AAAA,MAEA;AAAA,IACF,IACA,EAAE,WAAW,SACX;AAAA,MACE;AAAA,MACA;AAAA,IACF,IACA,gBAAgB,EAAE,MAAM,IACtB;AAAA,MACE;AAAA,MAEA;AAAA,IAEF,IACA;AAAA,MACE;AAAA,MACA;AAAA,IACF;AAAA,EACZ,CAAC;AACH,IACA,CAAC;","names":[]}