@ixo/editor 0.2.0

package/README.md

@@ -0,0 +1,345 @@
+# IXO Editor
+
+A custom BlockNote editor wrapper built specifically for the IXO team's needs. This package provides a highly customized rich text editing experience built on top of [BlockNote](https://www.blocknotejs.org/).
+
+> **Note**: This package is designed for internal IXO team use and is not intended for public consumption, though it is hosted publicly.
+
+## Features
+
+- 🎨 **Custom Theming**: Light and dark theme support with IXO-specific styling
+- 🔧 **Simplified API**: Wrapped BlockNote functionality with sensible defaults
+- 📝 **Rich Text Editing**: Full support for headings, lists, code blocks, tables, and more
+- 🔗 **Custom Blocks**: Built-in custom blocks including dynamic List block for DID data
+- 🖼️ **Media Support**: Image and file upload handling
+- 🎯 **TypeScript**: Full TypeScript support with exported types
+- 🤝 **Collaboration Ready**: Built-in collaboration configuration options
+- 📱 **Responsive**: Mobile-friendly editor experience
+
+## Installation
+
+```bash
+npm install @ixo/editor
+# or
+yarn add @ixo/editor
+# or
+pnpm add @ixo/editor
+```
+
+### Important: Import Required Styles
+
+The IXO Editor requires two CSS imports:
+
+```tsx
+// Import BlockNote's shadcn styles
+import '@blocknote/shadcn/style.css';
+
+// Import IXO Editor custom styles
+import '@ixo/editor/style.css';
+```
+
+**Note for Next.js users**: Make sure to import these styles in your `_app.tsx` or at the component level where you use the editor.
+
+## Quick Start
+
+```tsx
+import React from 'react';
+import { useCreateIxoEditor, IxoEditor } from '@ixo/editor';
+import '@blocknote/shadcn/style.css'; // Import BlockNote shadcn styles
+import '@ixo/editor/style.css'; // Import IXO custom styles
+
+function MyEditor() {
+  const editor = useCreateIxoEditor({
+    theme: 'light',
+    placeholder: 'Start writing...',
+    initialContent: [
+      {
+        type: 'heading',
+        content: 'Welcome to IXO Editor',
+        props: { level: 1 }
+      },
+      {
+        type: 'paragraph',
+        content: 'Start typing to create amazing content!'
+      },
+      {
+        type: 'list',
+        props: {
+          title: 'Dynamic List',
+          did: 'did:example:123',
+          fragmentIdentifier: 'sample-data'
+        }
+      }
+    ]
+  });
+
+  return <IxoEditor editor={editor} onChange={() => console.log('Content changed')} />;
+}
+```
+
+## API Reference
+
+### `useCreateIxoEditor`
+
+The main hook for creating an IXO editor instance.
+
+```tsx
+const editor = useCreateIxoEditor(options?: IxoEditorOptions);
+```
+
+#### Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `theme` | `'light' \| 'dark'` | `'light'` | Editor color theme |
+| `placeholder` | `string` | `'Start typing or press "/" for commands...'` | Placeholder text |
+| `uploadFile` | `(file: File) => Promise<string>` | Data URL converter | File upload handler |
+| `initialContent` | `PartialBlock[]` | `undefined` | Initial editor content |
+| `editable` | `boolean` | `true` | Whether editor is editable |
+| `animations` | `boolean` | `true` | Enable/disable animations |
+| `sideMenu` | `boolean` | `true` | Show side menu (drag handle, plus button) |
+| `slashMenu` | `boolean` | `true` | Enable slash commands menu |
+| `formattingToolbar` | `boolean` | `true` | Show formatting toolbar |
+| `linkToolbar` | `boolean` | `true` | Show link toolbar |
+| `filePanel` | `boolean` | `true` | Show file panel |
+| `tableHandles` | `boolean` | `true` | Show table manipulation handles |
+| `trailingBlock` | `boolean` | `true` | Add trailing paragraph block |
+| `placeholders` | `Record<string, string>` | `{}` | Custom placeholders for blocks |
+| `dictionary` | `Record<string, string>` | `{}` | Custom translations |
+| `collaboration` | `CollaborationConfig` | `undefined` | Collaboration settings |
+
+### `IxoEditor` Component
+
+The main editor component.
+
+```tsx
+<IxoEditor
+  editor={editor}
+  className="my-custom-class"
+  onChange={() => {}}
+  onSelectionChange={() => {}}
+/>
+```
+
+#### Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `editor` | `BlockNoteEditor \| undefined` | Editor instance from `useCreateIxoEditor` |
+| `className` | `string` | Additional CSS classes |
+| `onChange` | `() => void` | Callback when content changes |
+| `onSelectionChange` | `() => void` | Callback when selection changes |
+| `children` | `React.ReactNode` | Custom child components |
+
+## Advanced Usage
+
+### Custom File Upload
+
+```tsx
+const editor = useCreateIxoEditor({
+  uploadFile: async (file: File) => {
+    const formData = new FormData();
+    formData.append('file', file);
+    
+    const response = await fetch('/api/upload', {
+      method: 'POST',
+      body: formData,
+    });
+    
+    const { url } = await response.json();
+    return url;
+  }
+});
+```
+
+### Collaboration
+
+```tsx
+const editor = useCreateIxoEditor({
+  collaboration: {
+    documentId: 'doc-123',
+    websocketUrl: 'wss://collab.example.com',
+    user: {
+      id: 'user-456',
+      name: 'John Doe',
+      color: '#FF5733'
+    }
+  }
+});
+```
+
+### Accessing Editor Content
+
+```tsx
+function MyEditor() {
+  const editor = useCreateIxoEditor();
+  
+  const handleSave = () => {
+    if (editor) {
+      const content = editor.document;
+      console.log('Editor content:', content);
+      // Save content to your backend
+    }
+  };
+  
+  return (
+    <>
+      <IxoEditor editor={editor} />
+      <button onClick={handleSave}>Save</button>
+    </>
+  );
+}
+```
+
+### Dark Theme
+
+```tsx
+const editor = useCreateIxoEditor({
+  theme: 'dark'
+});
+```
+
+### Read-Only Mode
+
+```tsx
+const editor = useCreateIxoEditor({
+  editable: false,
+  sideMenu: false,
+  slashMenu: false,
+  formattingToolbar: false
+});
+```
+
+## Custom Blocks
+
+### List Block
+
+The IXO Editor includes a custom List block for displaying dynamic data from DID and fragment identifiers. This block is perfect for displaying data from your GraphQL API.
+
+#### Features
+
+- **Editable Title**: Click the title to edit it inline
+- **Settings Panel**: Click the gear icon to configure DID and fragment identifier
+- **Dynamic Data**: Ready for integration with your GraphQL API
+- **Responsive Design**: Works on all device sizes
+- **Theme Support**: Automatically adapts to light/dark themes
+
+#### Usage
+
+The List block can be inserted using the slash menu:
+
+1. Type `/list` in the editor
+2. Or type `/` and search for "List", "data", or "dynamic"
+3. Configure the DID and fragment identifier in the settings
+
+#### Programmatic Usage
+
+```tsx
+// Insert a list block programmatically
+editor.insertBlocks([{
+  type: 'list',
+  props: {
+    title: 'My Data List',
+    did: 'did:ixo:entity123',
+    fragmentIdentifier: 'claims-data'
+  }
+}], editor.getTextCursorPosition().block, 'after');
+```
+
+#### Integration with GraphQL
+
+Replace the mock data in `ListBlock.tsx` with your actual GraphQL call:
+
+```tsx
+// Example integration (replace mockListItems in ListBlock.tsx)
+const { data, loading, error } = useQuery(GET_DATA_BY_DID, {
+  variables: { 
+    did: settings.did, 
+    fragmentIdentifier: settings.fragmentIdentifier 
+  },
+  skip: !settings.did || !settings.fragmentIdentifier
+});
+
+const listItems = data?.items || [];
+```
+
+## Styling
+
+The editor comes with default styles, but you can override them using CSS custom properties:
+
+```css
+.ixo-editor {
+  --bn-colors-editor-background: #f5f5f5;
+  --bn-colors-editor-text: #333333;
+  --bn-colors-highlight-colors-blue: #0066cc;
+  /* ...more custom properties */
+}
+```
+
+## Development
+
+### Building the Package
+
+```bash
+# Install dependencies
+npm install
+
+# Build the package
+npm run build
+
+# Watch for changes during development
+npm run dev
+
+# Type checking
+npm run type-check
+```
+
+### Project Structure
+
+```
+ixo-editor/
+├── src/
+│   ├── components/      # React components
+│   │   └── IxoEditor.tsx
+│   ├── hooks/           # Custom hooks
+│   │   └── useCreateIxoEditor.ts
+│   ├── styles/          # CSS styles
+│   │   └── ixo-editor.css
+│   ├── types/           # TypeScript types
+│   │   └── index.ts
+│   └── index.ts         # Main entry point
+├── lib/                 # Built output (generated)
+├── package.json
+├── tsconfig.json
+└── README.md
+```
+
+## Requirements
+
+- React 18.0.0 or higher
+- React DOM 18.0.0 or higher
+- Modern browser with ES2020 support
+
+## License
+
+MIT © IXO Team
+
+---
+
+## Internal Notes
+
+This package is maintained by the IXO development team. For questions or issues, please contact the team directly through internal channels.
+
+### Deployment
+
+The package is deployed to npm under the `@ixo/editor` scope. Only team members with appropriate npm permissions can publish new versions.
+
+### Version Management
+
+Follow semantic versioning:
+- Patch releases (0.0.x): Bug fixes and minor updates
+- Minor releases (0.x.0): New features that are backward compatible
+- Major releases (x.0.0): Breaking changes
+
+### Contributing
+
+This is an internal package. All contributions should go through the standard IXO development workflow and review process.

package/dist/blocks/index.d.ts

@@ -0,0 +1,85 @@
+import { ListBlock } from "./list";
+import { OverviewBlock } from "./overview";
+export { ListBlock, OverviewBlock };
+export type { ListBlockSettings, ListBlockProps } from "./list";
+export type { OverviewBlockSettings, OverviewBlockProps } from "./overview";
+export declare const blockSpecs: {
+    list: {
+        config: {
+            readonly type: "list";
+            readonly propSchema: {
+                readonly title: {
+                    readonly default: "";
+                };
+                readonly did: {
+                    readonly default: "";
+                };
+                readonly fragmentIdentifier: {
+                    readonly default: "";
+                };
+                readonly listItemType: {
+                    readonly default: "keyvalue";
+                };
+                readonly showLinkedResources: {
+                    readonly default: false;
+                };
+                readonly showAssetsInCollection: {
+                    readonly default: false;
+                };
+            };
+            readonly content: "none";
+        };
+        implementation: import("@blocknote/core").TiptapBlockImplementation<{
+            readonly type: "list";
+            readonly propSchema: {
+                readonly title: {
+                    readonly default: "";
+                };
+                readonly did: {
+                    readonly default: "";
+                };
+                readonly fragmentIdentifier: {
+                    readonly default: "";
+                };
+                readonly listItemType: {
+                    readonly default: "keyvalue";
+                };
+                readonly showLinkedResources: {
+                    readonly default: false;
+                };
+                readonly showAssetsInCollection: {
+                    readonly default: false;
+                };
+            };
+            readonly content: "none";
+        }, any, import("@blocknote/core").InlineContentSchema, import("@blocknote/core").StyleSchema>;
+    };
+    overview: {
+        config: {
+            type: "overview";
+            propSchema: {
+                did: {
+                    default: string;
+                };
+            };
+            content: "inline";
+        };
+        implementation: import("@blocknote/core").TiptapBlockImplementation<{
+            type: "overview";
+            propSchema: {
+                did: {
+                    default: string;
+                };
+            };
+            content: "inline";
+        }, any, import("@blocknote/core").InlineContentSchema, import("@blocknote/core").StyleSchema>;
+    };
+};
+export declare const getExtraSlashMenuItems: (editor: any) => {
+    title: string;
+    onItemClick: () => void;
+    aliases: string[];
+    group: string;
+    subtext: string;
+}[];
+//# sourceMappingURL=index.d.ts.map

package/dist/blocks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/blocks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACnC,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;AACpC,YAAY,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAChE,YAAY,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAG5E,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGtB,CAAC;AAGF,eAAO,MAAM,sBAAsB,GAAI,QAAQ,GAAG;;;;;;GA2CjD,CAAC"}

package/dist/blocks/index.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getExtraSlashMenuItems = exports.blockSpecs = exports.OverviewBlock = exports.ListBlock = void 0;
+const list_1 = require("./list");
+Object.defineProperty(exports, "ListBlock", { enumerable: true, get: function () { return list_1.ListBlock; } });
+const overview_1 = require("./overview");
+Object.defineProperty(exports, "OverviewBlock", { enumerable: true, get: function () { return overview_1.OverviewBlock; } });
+// Block configuration for easy import
+exports.blockSpecs = {
+    list: list_1.ListBlock,
+    overview: overview_1.OverviewBlock,
+};
+// Slash menu items configuration
+const getExtraSlashMenuItems = (editor) => [
+    {
+        title: "List",
+        onItemClick: () => {
+            editor.insertBlocks([
+                {
+                    type: "list",
+                    props: {
+                        title: "",
+                        did: "",
+                        fragmentIdentifier: "",
+                    },
+                },
+            ], editor.getTextCursorPosition().block, "after");
+        },
+        aliases: ["list", "data", "dynamic"],
+        group: "Domains",
+        subtext: "Create a dynamic list from DID data",
+    },
+    {
+        title: "Overview",
+        onItemClick: () => {
+            editor.insertBlocks([
+                {
+                    type: "overview",
+                    props: {
+                        did: "",
+                    },
+                },
+            ], editor.getTextCursorPosition().block, "after");
+        },
+        aliases: ["overview", "overview-block", "data-overview"],
+        group: "Domains",
+        subtext: "Create an overview from DID data",
+    },
+];
+exports.getExtraSlashMenuItems = getExtraSlashMenuItems;

package/dist/blocks/list/ListBlock.d.ts

@@ -0,0 +1,59 @@
+export interface ListBlockSettings {
+    did: string;
+    fragmentIdentifier: string;
+}
+export interface ListBlockProps {
+    block: any;
+    editor: any;
+}
+export declare const ListBlock: {
+    config: {
+        readonly type: "list";
+        readonly propSchema: {
+            readonly title: {
+                readonly default: "";
+            };
+            readonly did: {
+                readonly default: "";
+            };
+            readonly fragmentIdentifier: {
+                readonly default: "";
+            };
+            readonly listItemType: {
+                readonly default: "keyvalue";
+            };
+            readonly showLinkedResources: {
+                readonly default: false;
+            };
+            readonly showAssetsInCollection: {
+                readonly default: false;
+            };
+        };
+        readonly content: "none";
+    };
+    implementation: import("@blocknote/core").TiptapBlockImplementation<{
+        readonly type: "list";
+        readonly propSchema: {
+            readonly title: {
+                readonly default: "";
+            };
+            readonly did: {
+                readonly default: "";
+            };
+            readonly fragmentIdentifier: {
+                readonly default: "";
+            };
+            readonly listItemType: {
+                readonly default: "keyvalue";
+            };
+            readonly showLinkedResources: {
+                readonly default: false;
+            };
+            readonly showAssetsInCollection: {
+                readonly default: false;
+            };
+        };
+        readonly content: "none";
+    }, any, import("@blocknote/core").InlineContentSchema, import("@blocknote/core").StyleSchema>;
+};
+//# sourceMappingURL=ListBlock.d.ts.map

package/dist/blocks/list/ListBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListBlock.d.ts","sourceRoot":"","sources":["../../../src/blocks/list/ListBlock.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,iBAAiB;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,kBAAkB,EAAE,MAAM,CAAC;CAC5B;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,GAAG,CAAC;IACX,MAAM,EAAE,GAAG,CAAC;CACb;AA4BD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BrB,CAAC"}

package/dist/blocks/list/ListBlock.js

@@ -0,0 +1,51 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListBlock = void 0;
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@blocknote/react");
+const ListBlockToolbar_1 = __importDefault(require("./ListBlockToolbar"));
+const ListItem_1 = __importDefault(require("./ListItem"));
+const useList_1 = __importDefault(require("./useList"));
+const ListContainer_1 = __importDefault(require("./ListContainer"));
+const ListBlockContent = ({ block, editor }) => {
+    const { list, setList } = (0, useList_1.default)();
+    return (react_1.default.createElement("div", { style: {
+            width: "100%",
+            borderRadius: "6px",
+            padding: "16px",
+            backgroundColor: "#FFFFFF",
+            fontFamily: "Inter, Helvetica, Arial, sans-serif",
+        } },
+        react_1.default.createElement(ListBlockToolbar_1.default, { block: block, editor: editor, setList: setList }),
+        react_1.default.createElement("div", { style: { minHeight: "40px" } },
+            react_1.default.createElement(ListContainer_1.default, null, list?.map((item, index) => (react_1.default.createElement(ListItem_1.default, { key: index, item: item, index: index })))))));
+};
+exports.ListBlock = (0, react_2.createReactBlockSpec)({
+    type: "list",
+    propSchema: {
+        title: {
+            default: "",
+        },
+        did: {
+            default: "",
+        },
+        fragmentIdentifier: {
+            default: "",
+        },
+        listItemType: {
+            default: "keyvalue",
+        },
+        showLinkedResources: {
+            default: false,
+        },
+        showAssetsInCollection: {
+            default: false,
+        },
+    },
+    content: "none",
+}, {
+    render: ListBlockContent,
+});

package/dist/blocks/list/ListBlockToolbar.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface ListBlockToolbarProps {
+    block: any;
+    editor: any;
+    setList: (list: any[]) => void;
+}
+export default function ListBlockToolbar({ block, editor, setList, }: ListBlockToolbarProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=ListBlockToolbar.d.ts.map

package/dist/blocks/list/ListBlockToolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListBlockToolbar.d.ts","sourceRoot":"","sources":["../../../src/blocks/list/ListBlockToolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,qBAAqB;IAC7B,KAAK,EAAE,GAAG,CAAC;IACX,MAAM,EAAE,GAAG,CAAC;IACZ,OAAO,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;CAChC;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,KAAK,EACL,MAAM,EACN,OAAO,GACR,EAAE,qBAAqB,qBAyBvB"}

package/dist/blocks/list/ListBlockToolbar.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ListBlockToolbar;
+const react_1 = __importDefault(require("react"));
+const ListSettings_1 = require("./ListSettings");
+const input_1 = require("../../components/ui/input");
+function ListBlockToolbar({ block, editor, setList, }) {
+    return (react_1.default.createElement("div", { className: "flex justify-between items-center mb-3 pb-2 border-b border-gray-100 dark:border-gray-700" },
+        react_1.default.createElement(input_1.Input, { value: block.props.title, placeholder: "New list", className: "font-semibold flex-1 border-0 bg-transparent px-2 py-1 focus-visible:ring-0 focus-visible:ring-offset-0 hover:bg-gray-50 dark:hover:bg-gray-700 focus:bg-gray-50 dark:focus:bg-gray-700 notion-list-title-input", style: {
+                color: "#2F2F2F",
+                fontFamily: "Inter, Helvetica, Arial, sans-serif",
+                fontSize: "14px",
+                fontWeight: 600,
+            }, onChange: (e) => {
+                editor.updateBlock(block, {
+                    props: {
+                        ...block.props,
+                        title: e.target.value,
+                    },
+                });
+            } }),
+        react_1.default.createElement(ListSettings_1.ListSettings, { block: block, editor: editor, setList: setList })));
+}

package/dist/blocks/list/ListContainer.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export default function ListContainer({ children, }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+//# sourceMappingURL=ListContainer.d.ts.map

package/dist/blocks/list/ListContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListContainer.d.ts","sourceRoot":"","sources":["../../../src/blocks/list/ListContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,qBAEA"}

package/dist/blocks/list/ListContainer.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ListContainer;
+const react_1 = __importDefault(require("react"));
+function ListContainer({ children, }) {
+    return react_1.default.createElement("div", { className: "flex flex-col gap-2" }, children);
+}

package/dist/blocks/list/ListGeneralTab.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+interface GeneralTabProps {
+    block: any;
+    editor: any;
+    domainValue: string;
+    onDomainChange: (did: string) => void;
+    domainProfile: any;
+}
+export declare function ListGeneralTab({ block: _block, editor: _editor, domainValue, onDomainChange, domainProfile, }: GeneralTabProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=ListGeneralTab.d.ts.map

package/dist/blocks/list/ListGeneralTab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListGeneralTab.d.ts","sourceRoot":"","sources":["../../../src/blocks/list/ListGeneralTab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAYnD,UAAU,eAAe;IACvB,KAAK,EAAE,GAAG,CAAC;IACX,MAAM,EAAE,GAAG,CAAC;IACZ,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,aAAa,EAAE,GAAG,CAAC;CACpB;AAED,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,OAAO,EACf,WAAW,EACX,cAAc,EACd,aAAa,GACd,EAAE,eAAe,qBAsJjB"}