@elastic/isomer-studio 0.0.0 → 0.4.0

package/dist/dev/tsx_language.js

@@ -0,0 +1,283 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import { editor, languages } from 'monaco-editor/esm/vs/editor/editor.api';
+const TAG_NAME = /[A-Za-z_$][\w$.:-]*/;
+const KEYWORDS = [
+    'as',
+    'async',
+    'await',
+    'break',
+    'case',
+    'catch',
+    'const',
+    'continue',
+    'default',
+    'delete',
+    'do',
+    'else',
+    'export',
+    'extends',
+    'false',
+    'finally',
+    'for',
+    'from',
+    'function',
+    'if',
+    'import',
+    'in',
+    'instanceof',
+    'let',
+    'new',
+    'null',
+    'of',
+    'return',
+    'satisfies',
+    'switch',
+    'this',
+    'throw',
+    'true',
+    'try',
+    'typeof',
+    'undefined',
+    'var',
+    'void',
+    'while',
+    'yield',
+];
+const configuration = {
+    comments: { lineComment: '//', blockComment: ['/*', '*/'] },
+    brackets: [
+        ['{', '}'],
+        ['[', ']'],
+        ['(', ')'],
+    ],
+    autoClosingPairs: [
+        { open: '{', close: '}' },
+        { open: '[', close: ']' },
+        { open: '(', close: ')' },
+        { open: '"', close: '"', notIn: ['string'] },
+        { open: "'", close: "'", notIn: ['string', 'comment'] },
+        { open: '`', close: '`', notIn: ['string', 'comment'] },
+    ],
+};
+/** A JS expression tokenizer that also reads JSX elements, which Monaco's own TypeScript one does not. */
+const tokens = {
+    defaultToken: 'invalid',
+    tokenPostfix: '.tsx',
+    keywords: KEYWORDS,
+    escapes: /\\(?:[abfnrtv\\"']|x[0-9A-Fa-f]{1,4}|u[0-9A-Fa-f]{4})/,
+    digits: /\d+(_+\d+)*/,
+    tokenizer: {
+        root: [{ include: 'expression' }],
+        expression: [
+            [
+                /#?[a-z_$][\w$]*/,
+                { cases: { '@keywords': 'keyword', '@default': 'identifier' } },
+            ],
+            [/[A-Z][\w$]*/, 'type.identifier'],
+            { include: '@whitespace' },
+            [/<>/, 'delimiter.bracket', '@jsxChildren'],
+            [/<(?=[A-Za-z_$])/, 'delimiter.bracket', '@jsxTagName'],
+            [/[{}()[\]]/, '@brackets'],
+            [/[<>=!~?:&|+\-*/^%@]+/, 'delimiter'],
+            [/0[xX][\da-fA-F]+n?/, 'number.hex'],
+            [/(@digits)\.(@digits)([eE][-+]?(@digits))?/, 'number.float'],
+            [/(@digits)[eE]([-+]?(@digits))?/, 'number.float'],
+            [/(@digits)n?/, 'number'],
+            [/[;,.]/, 'delimiter'],
+            [/"/, 'string', '@stringDouble'],
+            [/'/, 'string', '@stringSingle'],
+            [/`/, 'string', '@stringBacktick'],
+        ],
+        whitespace: [
+            [/[ \t\r\n]+/, ''],
+            [/\/\*/, 'comment', '@comment'],
+            [/\/\/.*$/, 'comment'],
+        ],
+        comment: [
+            [/[^/*]+/, 'comment'],
+            [/\*\//, 'comment', '@pop'],
+            [/[/*]/, 'comment'],
+        ],
+        stringDouble: [
+            [/[^\\"]+/, 'string'],
+            [/@escapes/, 'string.escape'],
+            [/\\./, 'string.escape.invalid'],
+            [/"/, 'string', '@pop'],
+        ],
+        stringSingle: [
+            [/[^\\']+/, 'string'],
+            [/@escapes/, 'string.escape'],
+            [/\\./, 'string.escape.invalid'],
+            [/'/, 'string', '@pop'],
+        ],
+        stringBacktick: [
+            [/\$\{/, 'delimiter.bracket', '@braces'],
+            [/[^\\`$]+/, 'string'],
+            [/@escapes/, 'string.escape'],
+            [/\\./, 'string.escape.invalid'],
+            [/`/, 'string', '@pop'],
+        ],
+        braces: [
+            [/\{/, 'delimiter.bracket', '@braces'],
+            [/\}/, 'delimiter.bracket', '@pop'],
+            { include: 'expression' },
+        ],
+        // After `<`: the element name, then the attributes.
+        jsxTagName: [
+            [TAG_NAME, { token: 'type.identifier', switchTo: '@jsxAttributes' }],
+        ],
+        jsxAttributes: [
+            { include: '@whitespace' },
+            [/\/>/, 'delimiter.bracket', '@pop'],
+            [/>/, { token: 'delimiter.bracket', switchTo: '@jsxChildren' }],
+            [/\{/, 'delimiter.bracket', '@braces'],
+            [/[A-Za-z_$][\w$:-]*/, 'attribute.name'],
+            [/=/, 'delimiter'],
+            [/"/, 'string', '@jsxStringDouble'],
+            [/'/, 'string', '@jsxStringSingle'],
+        ],
+        jsxStringDouble: [
+            [/[^"]+/, 'string'],
+            [/"/, 'string', '@pop'],
+        ],
+        jsxStringSingle: [
+            [/[^']+/, 'string'],
+            [/'/, 'string', '@pop'],
+        ],
+        jsxChildren: [
+            [/<\//, { token: 'delimiter.bracket', switchTo: '@jsxClosingTag' }],
+            [/<>/, 'delimiter.bracket', '@jsxChildren'],
+            [/<(?=[A-Za-z_$])/, 'delimiter.bracket', '@jsxTagName'],
+            [/\{/, 'delimiter.bracket', '@braces'],
+            [/[^<{]+/, ''],
+        ],
+        jsxClosingTag: [
+            [/[ \t\r\n]+/, ''],
+            [TAG_NAME, 'type.identifier'],
+            [/>/, 'delimiter.bracket', '@pop'],
+        ],
+    },
+};
+const JSX_BRACKET = /<>|<\/|\/>|\$\{|[<>{}]/g;
+const jsxFrame = (text) => {
+    const stack = [];
+    const lines = text.split(/\r\n|\r|\n/);
+    editor.tokenize(text, 'typescript').forEach((row, index) => {
+        const line = lines[index] ?? '';
+        row.forEach(({ offset, type }, position) => {
+            if (!type.startsWith('delimiter.bracket')) {
+                return;
+            }
+            const lexeme = line.slice(offset, row[position + 1]?.offset);
+            for (const [bracket] of lexeme.matchAll(JSX_BRACKET)) {
+                const top = stack.length - 1;
+                switch (bracket) {
+                    case '<>':
+                        stack.push('children');
+                        break;
+                    case '<':
+                        stack.push('tag');
+                        break;
+                    case '</':
+                        if (stack[top] === 'children') {
+                            stack[top] = 'closing';
+                        }
+                        break;
+                    case '/>':
+                        if (stack[top] === 'tag') {
+                            stack.pop();
+                        }
+                        break;
+                    case '>':
+                        if (stack[top] === 'tag') {
+                            stack[top] = 'children';
+                        }
+                        else if (stack[top] === 'closing') {
+                            stack.pop();
+                        }
+                        break;
+                    case '}':
+                        if (stack[top] === 'braces') {
+                            stack.pop();
+                        }
+                        break;
+                    default:
+                        stack.push('braces');
+                }
+            }
+        });
+    });
+    return stack[stack.length - 1];
+};
+/** Whether `text` ends where an element's children go. Reads the brackets {@link tokens} marks. */
+export const endsInJsxChildren = (text) => jsxFrame(text) === 'children';
+/** A `<` or `<Name` already typed. The bare `<` is not a bracket until a name follows. */
+const PENDING_TAG = /<([A-Za-z_$][\w$]*)?$/;
+const offersComponents = (text) => {
+    const frame = jsxFrame(text);
+    if (frame === 'children') {
+        return true;
+    }
+    const pending = PENDING_TAG.exec(text);
+    return frame === 'tag' && pending?.[1] !== undefined;
+};
+/** Replaces a `<` already before the cursor, so the inserted opener does not double it. */
+const completionRange = (text, position, word) => {
+    const pending = PENDING_TAG.exec(text);
+    const { lineNumber, column } = position;
+    return {
+        pending,
+        range: {
+            startLineNumber: lineNumber,
+            endLineNumber: lineNumber,
+            startColumn: pending ? column - pending[0].length : word.startColumn,
+            endColumn: pending ? column : word.endColumn,
+        },
+    };
+};
+/** Offers `components` as tag openers in element children, or over a tag name already started, on an explicit invoke. */
+export const componentCompletionProvider = (components) => ({
+    provideCompletionItems: (model, position, { triggerKind }) => {
+        const { lineNumber, column } = position;
+        const text = model.getValueInRange({
+            startLineNumber: 1,
+            startColumn: 1,
+            endLineNumber: lineNumber,
+            endColumn: column,
+        });
+        if (triggerKind !== languages.CompletionTriggerKind.Invoke ||
+            !offersComponents(text)) {
+            return { suggestions: [] };
+        }
+        const { pending, range } = completionRange(text, position, model.getWordUntilPosition(position));
+        return {
+            suggestions: components.map((name) => ({
+                label: name,
+                kind: languages.CompletionItemKind.Class,
+                insertText: `<${name} `,
+                // Monaco filters on the replaced text, which includes the typed `<`.
+                ...(pending ? { filterText: `<${name}` } : {}),
+                range,
+                command: { id: 'editor.action.triggerSuggest', title: '' },
+            })),
+        };
+    },
+});
+export const registerComponentCompletions = (components) => languages.registerCompletionItemProvider('typescript', componentCompletionProvider(components));
+/** Replaces the `typescript` language's tokenizer, so every TypeScript model reads JSX. */
+export const registerTsx = () => {
+    languages.register({
+        id: 'typescript',
+        extensions: ['.ts', '.tsx'],
+        aliases: ['TypeScript', 'ts', 'typescript'],
+        mimetypes: ['text/typescript'],
+    });
+    languages.setLanguageConfiguration('typescript', configuration);
+    languages.setMonarchTokensProvider('typescript', tokens);
+};
+//# sourceMappingURL=tsx_language.js.map

package/dist/dev/tsx_language.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tsx_language.js","sourceRoot":"","sources":["../../src/dev/tsx_language.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one\n * or more contributor license agreements. Licensed under the Elastic License\n * 2.0; you may not use this file except in compliance with the Elastic License\n * 2.0.\n */\n\nimport type { IDisposable } from 'monaco-editor/esm/vs/editor/editor.api';\nimport { editor, languages } from 'monaco-editor/esm/vs/editor/editor.api';\n\nconst TAG_NAME = /[A-Za-z_$][\\w$.:-]*/;\n\nconst KEYWORDS = [\n  'as',\n  'async',\n  'await',\n  'break',\n  'case',\n  'catch',\n  'const',\n  'continue',\n  'default',\n  'delete',\n  'do',\n  'else',\n  'export',\n  'extends',\n  'false',\n  'finally',\n  'for',\n  'from',\n  'function',\n  'if',\n  'import',\n  'in',\n  'instanceof',\n  'let',\n  'new',\n  'null',\n  'of',\n  'return',\n  'satisfies',\n  'switch',\n  'this',\n  'throw',\n  'true',\n  'try',\n  'typeof',\n  'undefined',\n  'var',\n  'void',\n  'while',\n  'yield',\n];\n\nconst configuration: languages.LanguageConfiguration = {\n  comments: { lineComment: '//', blockComment: ['/*', '*/'] },\n  brackets: [\n    ['{', '}'],\n    ['[', ']'],\n    ['(', ')'],\n  ],\n  autoClosingPairs: [\n    { open: '{', close: '}' },\n    { open: '[', close: ']' },\n    { open: '(', close: ')' },\n    { open: '\"', close: '\"', notIn: ['string'] },\n    { open: \"'\", close: \"'\", notIn: ['string', 'comment'] },\n    { open: '`', close: '`', notIn: ['string', 'comment'] },\n  ],\n};\n\n/** A JS expression tokenizer that also reads JSX elements, which Monaco's own TypeScript one does not. */\nconst tokens: languages.IMonarchLanguage = {\n  defaultToken: 'invalid',\n  tokenPostfix: '.tsx',\n  keywords: KEYWORDS,\n  escapes: /\\\\(?:[abfnrtv\\\\\"']|x[0-9A-Fa-f]{1,4}|u[0-9A-Fa-f]{4})/,\n  digits: /\\d+(_+\\d+)*/,\n  tokenizer: {\n    root: [{ include: 'expression' }],\n    expression: [\n      [\n        /#?[a-z_$][\\w$]*/,\n        { cases: { '@keywords': 'keyword', '@default': 'identifier' } },\n      ],\n      [/[A-Z][\\w$]*/, 'type.identifier'],\n      { include: '@whitespace' },\n      [/<>/, 'delimiter.bracket', '@jsxChildren'],\n      [/<(?=[A-Za-z_$])/, 'delimiter.bracket', '@jsxTagName'],\n      [/[{}()[\\]]/, '@brackets'],\n      [/[<>=!~?:&|+\\-*/^%@]+/, 'delimiter'],\n      [/0[xX][\\da-fA-F]+n?/, 'number.hex'],\n      [/(@digits)\\.(@digits)([eE][-+]?(@digits))?/, 'number.float'],\n      [/(@digits)[eE]([-+]?(@digits))?/, 'number.float'],\n      [/(@digits)n?/, 'number'],\n      [/[;,.]/, 'delimiter'],\n      [/\"/, 'string', '@stringDouble'],\n      [/'/, 'string', '@stringSingle'],\n      [/`/, 'string', '@stringBacktick'],\n    ],\n    whitespace: [\n      [/[ \\t\\r\\n]+/, ''],\n      [/\\/\\*/, 'comment', '@comment'],\n      [/\\/\\/.*$/, 'comment'],\n    ],\n    comment: [\n      [/[^/*]+/, 'comment'],\n      [/\\*\\//, 'comment', '@pop'],\n      [/[/*]/, 'comment'],\n    ],\n    stringDouble: [\n      [/[^\\\\\"]+/, 'string'],\n      [/@escapes/, 'string.escape'],\n      [/\\\\./, 'string.escape.invalid'],\n      [/\"/, 'string', '@pop'],\n    ],\n    stringSingle: [\n      [/[^\\\\']+/, 'string'],\n      [/@escapes/, 'string.escape'],\n      [/\\\\./, 'string.escape.invalid'],\n      [/'/, 'string', '@pop'],\n    ],\n    stringBacktick: [\n      [/\\$\\{/, 'delimiter.bracket', '@braces'],\n      [/[^\\\\`$]+/, 'string'],\n      [/@escapes/, 'string.escape'],\n      [/\\\\./, 'string.escape.invalid'],\n      [/`/, 'string', '@pop'],\n    ],\n    braces: [\n      [/\\{/, 'delimiter.bracket', '@braces'],\n      [/\\}/, 'delimiter.bracket', '@pop'],\n      { include: 'expression' },\n    ],\n    // After `<`: the element name, then the attributes.\n    jsxTagName: [\n      [TAG_NAME, { token: 'type.identifier', switchTo: '@jsxAttributes' }],\n    ],\n    jsxAttributes: [\n      { include: '@whitespace' },\n      [/\\/>/, 'delimiter.bracket', '@pop'],\n      [/>/, { token: 'delimiter.bracket', switchTo: '@jsxChildren' }],\n      [/\\{/, 'delimiter.bracket', '@braces'],\n      [/[A-Za-z_$][\\w$:-]*/, 'attribute.name'],\n      [/=/, 'delimiter'],\n      [/\"/, 'string', '@jsxStringDouble'],\n      [/'/, 'string', '@jsxStringSingle'],\n    ],\n    jsxStringDouble: [\n      [/[^\"]+/, 'string'],\n      [/\"/, 'string', '@pop'],\n    ],\n    jsxStringSingle: [\n      [/[^']+/, 'string'],\n      [/'/, 'string', '@pop'],\n    ],\n    jsxChildren: [\n      [/<\\//, { token: 'delimiter.bracket', switchTo: '@jsxClosingTag' }],\n      [/<>/, 'delimiter.bracket', '@jsxChildren'],\n      [/<(?=[A-Za-z_$])/, 'delimiter.bracket', '@jsxTagName'],\n      [/\\{/, 'delimiter.bracket', '@braces'],\n      [/[^<{]+/, ''],\n    ],\n    jsxClosingTag: [\n      [/[ \\t\\r\\n]+/, ''],\n      [TAG_NAME, 'type.identifier'],\n      [/>/, 'delimiter.bracket', '@pop'],\n    ],\n  },\n};\n\ntype Frame = 'tag' | 'children' | 'closing' | 'braces';\n\nconst JSX_BRACKET = /<>|<\\/|\\/>|\\$\\{|[<>{}]/g;\n\nconst jsxFrame = (text: string): Frame | undefined => {\n  const stack: Frame[] = [];\n  const lines = text.split(/\\r\\n|\\r|\\n/);\n  editor.tokenize(text, 'typescript').forEach((row, index) => {\n    const line = lines[index] ?? '';\n    row.forEach(({ offset, type }, position) => {\n      if (!type.startsWith('delimiter.bracket')) {\n        return;\n      }\n      const lexeme = line.slice(offset, row[position + 1]?.offset);\n      for (const [bracket] of lexeme.matchAll(JSX_BRACKET)) {\n        const top = stack.length - 1;\n        switch (bracket) {\n          case '<>':\n            stack.push('children');\n            break;\n          case '<':\n            stack.push('tag');\n            break;\n          case '</':\n            if (stack[top] === 'children') {\n              stack[top] = 'closing';\n            }\n            break;\n          case '/>':\n            if (stack[top] === 'tag') {\n              stack.pop();\n            }\n            break;\n          case '>':\n            if (stack[top] === 'tag') {\n              stack[top] = 'children';\n            } else if (stack[top] === 'closing') {\n              stack.pop();\n            }\n            break;\n          case '}':\n            if (stack[top] === 'braces') {\n              stack.pop();\n            }\n            break;\n          default:\n            stack.push('braces');\n        }\n      }\n    });\n  });\n  return stack[stack.length - 1];\n};\n\n/** Whether `text` ends where an element's children go. Reads the brackets {@link tokens} marks. */\nexport const endsInJsxChildren = (text: string): boolean =>\n  jsxFrame(text) === 'children';\n\n/** A `<` or `<Name` already typed. The bare `<` is not a bracket until a name follows. */\nconst PENDING_TAG = /<([A-Za-z_$][\\w$]*)?$/;\n\nconst offersComponents = (text: string): boolean => {\n  const frame = jsxFrame(text);\n  if (frame === 'children') {\n    return true;\n  }\n  const pending = PENDING_TAG.exec(text);\n  return frame === 'tag' && pending?.[1] !== undefined;\n};\n\n/** Replaces a `<` already before the cursor, so the inserted opener does not double it. */\nconst completionRange = (\n  text: string,\n  position: { lineNumber: number; column: number },\n  word: { startColumn: number; endColumn: number }\n) => {\n  const pending = PENDING_TAG.exec(text);\n  const { lineNumber, column } = position;\n  return {\n    pending,\n    range: {\n      startLineNumber: lineNumber,\n      endLineNumber: lineNumber,\n      startColumn: pending ? column - pending[0].length : word.startColumn,\n      endColumn: pending ? column : word.endColumn,\n    },\n  };\n};\n\n/** Offers `components` as tag openers in element children, or over a tag name already started, on an explicit invoke. */\nexport const componentCompletionProvider = (\n  components: readonly string[]\n): languages.CompletionItemProvider => ({\n  provideCompletionItems: (model, position, { triggerKind }) => {\n    const { lineNumber, column } = position;\n    const text = model.getValueInRange({\n      startLineNumber: 1,\n      startColumn: 1,\n      endLineNumber: lineNumber,\n      endColumn: column,\n    });\n    if (\n      triggerKind !== languages.CompletionTriggerKind.Invoke ||\n      !offersComponents(text)\n    ) {\n      return { suggestions: [] };\n    }\n    const { pending, range } = completionRange(\n      text,\n      position,\n      model.getWordUntilPosition(position)\n    );\n    return {\n      suggestions: components.map((name) => ({\n        label: name,\n        kind: languages.CompletionItemKind.Class,\n        insertText: `<${name} `,\n        // Monaco filters on the replaced text, which includes the typed `<`.\n        ...(pending ? { filterText: `<${name}` } : {}),\n        range,\n        command: { id: 'editor.action.triggerSuggest', title: '' },\n      })),\n    };\n  },\n});\n\nexport const registerComponentCompletions = (\n  components: readonly string[]\n): IDisposable =>\n  languages.registerCompletionItemProvider(\n    'typescript',\n    componentCompletionProvider(components)\n  );\n\n/** Replaces the `typescript` language's tokenizer, so every TypeScript model reads JSX. */\nexport const registerTsx = () => {\n  languages.register({\n    id: 'typescript',\n    extensions: ['.ts', '.tsx'],\n    aliases: ['TypeScript', 'ts', 'typescript'],\n    mimetypes: ['text/typescript'],\n  });\n  languages.setLanguageConfiguration('typescript', configuration);\n  languages.setMonarchTokensProvider('typescript', tokens);\n};\n"]}

package/dist/dev/use_editor.d.ts

@@ -0,0 +1,23 @@
+import type { CheckedValidationResult, Composition, PrimitiveNode } from '@elastic/isomer-sdk';
+export type EditorFormat = 'jsx' | 'json';
+/** A JSON node or array of nodes as a composition body. */
+export declare const parseBodyJson: (source: string) => PrimitiveNode[];
+export interface EditorState {
+    format: EditorFormat;
+    setFormat: (format: EditorFormat) => void;
+    source: string;
+    setSource: (source: string) => void;
+    nodes: PrimitiveNode[];
+    /** Applies a quick edit to the draft's nodes and reprints the source, unless the draft doesn't parse or compose. */
+    editNodes: (edit: (nodes: PrimitiveNode[]) => PrimitiveNode[]) => void;
+    parseError?: string | undefined;
+    isParsing: boolean;
+    composition: Composition;
+    validation: CheckedValidationResult;
+}
+/**
+ * The editable body for one example: its source in either format, parsed nodes, and their
+ * validation. Remount the caller to start over from another example.
+ */
+export declare const useEditor: (initial: PrimitiveNode) => EditorState;
+//# sourceMappingURL=use_editor.d.ts.map

package/dist/dev/use_editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use_editor.d.ts","sourceRoot":"","sources":["../../src/dev/use_editor.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EACV,uBAAuB,EACvB,WAAW,EACX,aAAa,EACd,MAAM,qBAAqB,CAAC;AAM7B,MAAM,MAAM,YAAY,GAAG,KAAK,GAAG,MAAM,CAAC;AAW1C,2DAA2D;AAC3D,eAAO,MAAM,aAAa,GAAI,QAAQ,MAAM,KAAG,aAAa,EAS3D,CAAC;AAKF,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,YAAY,CAAC;IACrB,SAAS,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAC1C,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,oHAAoH;IACpH,SAAS,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,KAAK,aAAa,EAAE,KAAK,IAAI,CAAC;IACvE,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,WAAW,CAAC;IACzB,UAAU,EAAE,uBAAuB,CAAC;CACrC;AAED;;;GAGG;AACH,eAAO,MAAM,SAAS,GAAI,SAAS,aAAa,KAAG,WA0IlD,CAAC"}

package/dist/dev/use_editor.js

@@ -0,0 +1,124 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { printCompositionJsx } from '@elastic/isomer-sdk/author';
+import { compileCompositionJsx } from '../model/compile_jsx.js';
+import { useStudio } from '../studio_context.js';
+const PARSE_DELAY = 250;
+const isNode = (value) => typeof value === 'object' &&
+    value !== null &&
+    !Array.isArray(value) &&
+    'type' in value &&
+    typeof value.type === 'string';
+/** A JSON node or array of nodes as a composition body. */
+export const parseBodyJson = (source) => {
+    const value = JSON.parse(source);
+    const nodes = Array.isArray(value) ? value : [value];
+    if (!nodes.length || !nodes.every(isNode)) {
+        throw new Error('Expected a node, or an array of nodes, each with a string `type`.');
+    }
+    return nodes.filter(isNode);
+};
+const errorMessage = (error) => error instanceof Error ? error.message : String(error);
+/**
+ * The editable body for one example: its source in either format, parsed nodes, and their
+ * validation. Remount the caller to start over from another example.
+ */
+export const useEditor = (initial) => {
+    const { runtime, shim, schemaFor, compose, transformJsx } = useStudio();
+    const print = useCallback((body, as) => as === 'jsx'
+        ? printCompositionJsx(body, { schemaFor, shim })
+        : JSON.stringify(body.length === 1 ? body[0] : body, null, 2), [schemaFor, shim]);
+    const [format, setFormatState] = useState(transformJsx ? 'jsx' : 'json');
+    const [nodes, setNodesState] = useState([initial]);
+    const [source, setSourceState] = useState(() => print([initial], format));
+    const [parseError, setParseError] = useState();
+    const [isParsing, setParsing] = useState(false);
+    const pending = useRef(0);
+    const reset = useCallback((body, as) => {
+        pending.current += 1;
+        setNodesState(body);
+        setSourceState(print(body, as));
+        setParseError(undefined);
+        setParsing(false);
+    }, [print]);
+    const parseSource = useCallback(async (text, as) => {
+        const parsed = as === 'jsx' && transformJsx
+            ? await compileCompositionJsx(text, shim, transformJsx)
+            : parseBodyJson(text);
+        compose(parsed);
+        return parsed;
+    }, [compose, shim, transformJsx]);
+    const parse = useCallback(async (token, text, onParsed) => {
+        try {
+            const parsed = await parseSource(text, format);
+            if (token === pending.current) {
+                onParsed(parsed);
+            }
+        }
+        catch (error) {
+            if (token === pending.current) {
+                setParseError(errorMessage(error));
+                setParsing(false);
+            }
+        }
+    }, [format, parseSource]);
+    /** Runs `then` on the nodes the current draft parses to, or reports why it doesn't parse. */
+    const withDraft = useCallback((then) => {
+        if (!isParsing && !parseError) {
+            then(nodes);
+            return;
+        }
+        void parse(++pending.current, source, then);
+    }, [isParsing, nodes, parse, parseError, source]);
+    const setFormat = useCallback((next) => withDraft((body) => {
+        setFormatState(next);
+        reset(body, next);
+    }), [reset, withDraft]);
+    const editNodes = useCallback((edit) => withDraft((body) => {
+        const next = edit(body);
+        try {
+            compose(next);
+        }
+        catch (error) {
+            setParseError(errorMessage(error));
+            setParsing(false);
+            return;
+        }
+        reset(next, format);
+    }), [compose, format, reset, withDraft]);
+    const setSource = useCallback((next) => {
+        setSourceState(next);
+        setParsing(true);
+        const token = ++pending.current;
+        setTimeout(() => {
+            if (token !== pending.current) {
+                return;
+            }
+            void parse(token, next, (parsed) => {
+                setNodesState(parsed);
+                setParseError(undefined);
+                setParsing(false);
+            });
+        }, PARSE_DELAY);
+    }, [parse]);
+    const composition = useMemo(() => compose(nodes), [compose, nodes]);
+    const validation = useMemo(() => runtime.validate(composition), [runtime, composition]);
+    return {
+        format,
+        setFormat,
+        source,
+        setSource,
+        nodes,
+        editNodes,
+        parseError,
+        isParsing,
+        composition,
+        validation,
+    };
+};
+//# sourceMappingURL=use_editor.js.map

package/dist/dev/use_editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use_editor.js","sourceRoot":"","sources":["../../src/dev/use_editor.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one\n * or more contributor license agreements. Licensed under the Elastic License\n * 2.0; you may not use this file except in compliance with the Elastic License\n * 2.0.\n */\n\nimport { useCallback, useMemo, useRef, useState } from 'react';\nimport type {\n  CheckedValidationResult,\n  Composition,\n  PrimitiveNode,\n} from '@elastic/isomer-sdk';\nimport { printCompositionJsx } from '@elastic/isomer-sdk/author';\n\nimport { compileCompositionJsx } from '../model/compile_jsx';\nimport { useStudio } from '../studio_context';\n\nexport type EditorFormat = 'jsx' | 'json';\n\nconst PARSE_DELAY = 250;\n\nconst isNode = (value: unknown): value is PrimitiveNode =>\n  typeof value === 'object' &&\n  value !== null &&\n  !Array.isArray(value) &&\n  'type' in value &&\n  typeof value.type === 'string';\n\n/** A JSON node or array of nodes as a composition body. */\nexport const parseBodyJson = (source: string): PrimitiveNode[] => {\n  const value: unknown = JSON.parse(source);\n  const nodes: unknown[] = Array.isArray(value) ? value : [value];\n  if (!nodes.length || !nodes.every(isNode)) {\n    throw new Error(\n      'Expected a node, or an array of nodes, each with a string `type`.'\n    );\n  }\n  return nodes.filter(isNode);\n};\n\nconst errorMessage = (error: unknown): string =>\n  error instanceof Error ? error.message : String(error);\n\nexport interface EditorState {\n  format: EditorFormat;\n  setFormat: (format: EditorFormat) => void;\n  source: string;\n  setSource: (source: string) => void;\n  nodes: PrimitiveNode[];\n  /** Applies a quick edit to the draft's nodes and reprints the source, unless the draft doesn't parse or compose. */\n  editNodes: (edit: (nodes: PrimitiveNode[]) => PrimitiveNode[]) => void;\n  parseError?: string | undefined;\n  isParsing: boolean;\n  composition: Composition;\n  validation: CheckedValidationResult;\n}\n\n/**\n * The editable body for one example: its source in either format, parsed nodes, and their\n * validation. Remount the caller to start over from another example.\n */\nexport const useEditor = (initial: PrimitiveNode): EditorState => {\n  const { runtime, shim, schemaFor, compose, transformJsx } = useStudio();\n  const print = useCallback(\n    (body: readonly PrimitiveNode[], as: EditorFormat) =>\n      as === 'jsx'\n        ? printCompositionJsx(body, { schemaFor, shim })\n        : JSON.stringify(body.length === 1 ? body[0] : body, null, 2),\n    [schemaFor, shim]\n  );\n\n  const [format, setFormatState] = useState<EditorFormat>(\n    transformJsx ? 'jsx' : 'json'\n  );\n  const [nodes, setNodesState] = useState<PrimitiveNode[]>([initial]);\n  const [source, setSourceState] = useState(() => print([initial], format));\n  const [parseError, setParseError] = useState<string>();\n  const [isParsing, setParsing] = useState(false);\n  const pending = useRef(0);\n\n  const reset = useCallback(\n    (body: PrimitiveNode[], as: EditorFormat) => {\n      pending.current += 1;\n      setNodesState(body);\n      setSourceState(print(body, as));\n      setParseError(undefined);\n      setParsing(false);\n    },\n    [print]\n  );\n\n  const parseSource = useCallback(\n    async (text: string, as: EditorFormat): Promise<PrimitiveNode[]> => {\n      const parsed =\n        as === 'jsx' && transformJsx\n          ? await compileCompositionJsx(text, shim, transformJsx)\n          : parseBodyJson(text);\n      compose(parsed);\n      return parsed;\n    },\n    [compose, shim, transformJsx]\n  );\n\n  const parse = useCallback(\n    async (\n      token: number,\n      text: string,\n      onParsed: (parsed: PrimitiveNode[]) => void\n    ) => {\n      try {\n        const parsed = await parseSource(text, format);\n        if (token === pending.current) {\n          onParsed(parsed);\n        }\n      } catch (error) {\n        if (token === pending.current) {\n          setParseError(errorMessage(error));\n          setParsing(false);\n        }\n      }\n    },\n    [format, parseSource]\n  );\n\n  /** Runs `then` on the nodes the current draft parses to, or reports why it doesn't parse. */\n  const withDraft = useCallback(\n    (then: (body: PrimitiveNode[]) => void) => {\n      if (!isParsing && !parseError) {\n        then(nodes);\n        return;\n      }\n      void parse(++pending.current, source, then);\n    },\n    [isParsing, nodes, parse, parseError, source]\n  );\n\n  const setFormat = useCallback(\n    (next: EditorFormat) =>\n      withDraft((body) => {\n        setFormatState(next);\n        reset(body, next);\n      }),\n    [reset, withDraft]\n  );\n\n  const editNodes = useCallback(\n    (edit: (body: PrimitiveNode[]) => PrimitiveNode[]) =>\n      withDraft((body) => {\n        const next = edit(body);\n        try {\n          compose(next);\n        } catch (error) {\n          setParseError(errorMessage(error));\n          setParsing(false);\n          return;\n        }\n        reset(next, format);\n      }),\n    [compose, format, reset, withDraft]\n  );\n\n  const setSource = useCallback(\n    (next: string) => {\n      setSourceState(next);\n      setParsing(true);\n      const token = ++pending.current;\n\n      setTimeout(() => {\n        if (token !== pending.current) {\n          return;\n        }\n        void parse(token, next, (parsed) => {\n          setNodesState(parsed);\n          setParseError(undefined);\n          setParsing(false);\n        });\n      }, PARSE_DELAY);\n    },\n    [parse]\n  );\n\n  const composition = useMemo(() => compose(nodes), [compose, nodes]);\n  const validation = useMemo(\n    () => runtime.validate(composition),\n    [runtime, composition]\n  );\n\n  return {\n    format,\n    setFormat,\n    source,\n    setSource,\n    nodes,\n    editNodes,\n    parseError,\n    isParsing,\n    composition,\n    validation,\n  };\n};\n"]}

package/dist/docs/docs_view.d.ts

@@ -0,0 +1,10 @@
+import type { Accent } from '../chrome/accent.js';
+import type { StudioRoute } from '../chrome/route.js';
+export interface DocsViewProps {
+    route: StudioRoute;
+    navigate: (next: Partial<StudioRoute>) => void;
+    accent: Accent;
+}
+/** The reference page for one primitive. */
+export declare const DocsView: ({ route: { page, example }, navigate, accent, }: DocsViewProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=docs_view.d.ts.map

package/dist/docs/docs_view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"docs_view.d.ts","sourceRoot":"","sources":["../../src/docs/docs_view.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AA4FnD,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,WAAW,CAAC;IACnB,QAAQ,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC/C,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,4CAA4C;AAC5C,eAAO,MAAM,QAAQ,GAAI,iDAItB,aAAa,4DA2Ff,CAAC"}

package/dist/docs/docs_view.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import { useMemo } from 'react';
+import { EuiPanel, EuiText, EuiTitle, useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { PrimitiveHeading } from '../chrome/primitive_heading.js';
+import { formatRoute } from '../chrome/route.js';
+import { useStudio } from '../studio_context.js';
+import { ExamplesPanel } from './examples_panel.js';
+import { InlineCode } from './inline_code.js';
+import { CONTENT_BASIS, OnThisPage, PAGE_WIDTH, TOC_GAP, useActiveEntry, } from './on_this_page.js';
+import { PropsTable } from './props_table.js';
+const SECTIONS = [
+    { id: 'examples', title: 'Examples' },
+    { id: 'guidance', title: 'Guidance' },
+    { id: 'props', title: 'Props' },
+];
+const sectionId = (id) => `isomer-studio-${id}`;
+const TOC_ENTRIES = SECTIONS.map(({ id, title }) => ({
+    id: sectionId(id),
+    title,
+}));
+const TOC_IDS = TOC_ENTRIES.map(({ id }) => id);
+const Section = ({ id, children, }) => {
+    const { euiTheme } = useEuiTheme();
+    const { title } = SECTIONS.find((section) => section.id === id) ?? {
+        title: id,
+    };
+    return (_jsxs("section", { id: sectionId(id), "aria-label": title, css: css `
+        display: flex;
+        flex-direction: column;
+        gap: ${euiTheme.size.m};
+        scroll-margin-top: ${euiTheme.size.l};
+      `, children: [_jsx(EuiTitle, { size: "s", children: _jsx("h2", { children: title }) }), children] }));
+};
+const Guidance = ({ title, items, color, names, }) => (_jsxs(EuiPanel, { color: color, hasShadow: false, paddingSize: "m", children: [_jsx(EuiText, { size: "xs", color: color, children: _jsx("strong", { children: title }) }), _jsx(EuiText, { size: "s", children: items.length ? (_jsx("ul", { children: items.map((item) => (_jsx("li", { children: _jsx(InlineCode, { text: item, names }) }, item))) })) : (_jsx("p", { children: "No guidance has been added for this primitive yet." })) })] }));
+/** The reference page for one primitive. */
+export const DocsView = ({ route: { page, example }, navigate, accent, }) => {
+    const { euiTheme } = useEuiTheme();
+    const { docs: { primitives }, } = useStudio();
+    const [active, setActive] = useActiveEntry(TOC_IDS, page);
+    const names = useMemo(() => primitives.map(({ type }) => type), [primitives]);
+    const doc = primitives.find(({ type }) => type === page);
+    if (!doc) {
+        return null;
+    }
+    const { type, useWhen, avoidWhen, props } = doc;
+    return (_jsxs("div", { css: css `
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-start;
+        gap: ${TOC_GAP}px;
+        max-width: ${PAGE_WIDTH}px;
+        margin-inline: auto;
+        padding: ${euiTheme.size.xl} ${euiTheme.size.xxl} ${euiTheme.size.xxxxl};
+      `, children: [_jsx(OnThisPage, { entries: TOC_ENTRIES, active, onSelect: setActive }), _jsxs("div", { css: css `
+          flex: 1 1 ${CONTENT_BASIS}px;
+          display: flex;
+          flex-direction: column;
+          gap: ${euiTheme.size.xl};
+          min-width: 0;
+        `, children: [_jsxs("div", { css: css `
+            display: flex;
+            flex-direction: column;
+            gap: ${euiTheme.size.s};
+          `, children: [_jsx(PrimitiveHeading, { doc }), _jsx(EuiText, { size: "s", color: "subdued", css: css `
+              max-inline-size: 72ch;
+            `, children: _jsx("p", { children: "Explore the example to see the primitive in context; its guidance and props explain when and how to use it." }) })] }), _jsx(Section, { id: "examples", children: _jsx(ExamplesPanel, { doc, example, onExampleChange: (next) => navigate({ example: next }), devHref: formatRoute({ mode: 'dev', page, example }) }, type) }), _jsx(Section, { id: "guidance", children: _jsxs("div", { css: css `
+              display: grid;
+              grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+              align-items: start;
+              gap: ${euiTheme.size.l};
+            `, children: [_jsx(Guidance, { title: "Use when", items: useWhen, color: "success", names }), _jsx(Guidance, { title: "Avoid when", items: avoidWhen, color: "danger", names })] }) }), _jsx(Section, { id: "props", children: _jsx(PropsTable, { props, accent, names }) })] })] }));
+};
+//# sourceMappingURL=docs_view.js.map

package/dist/docs/docs_view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"docs_view.js","sourceRoot":"","sources":["../../src/docs/docs_view.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one\n * or more contributor license agreements. Licensed under the Elastic License\n * 2.0; you may not use this file except in compliance with the Elastic License\n * 2.0.\n */\n\nimport React, { useMemo } from 'react';\nimport { EuiPanel, EuiText, EuiTitle, useEuiTheme } from '@elastic/eui';\nimport { css } from '@emotion/react';\n\nimport type { Accent } from '../chrome/accent';\nimport { PrimitiveHeading } from '../chrome/primitive_heading';\nimport type { StudioRoute } from '../chrome/route';\nimport { formatRoute } from '../chrome/route';\nimport { useStudio } from '../studio_context';\n\nimport { ExamplesPanel } from './examples_panel';\nimport { InlineCode } from './inline_code';\nimport {\n  CONTENT_BASIS,\n  OnThisPage,\n  PAGE_WIDTH,\n  TOC_GAP,\n  useActiveEntry,\n} from './on_this_page';\nimport { PropsTable } from './props_table';\n\nconst SECTIONS = [\n  { id: 'examples', title: 'Examples' },\n  { id: 'guidance', title: 'Guidance' },\n  { id: 'props', title: 'Props' },\n] as const;\n\ntype SectionId = (typeof SECTIONS)[number]['id'];\n\nconst sectionId = (id: SectionId) => `isomer-studio-${id}`;\n\nconst TOC_ENTRIES = SECTIONS.map(({ id, title }) => ({\n  id: sectionId(id),\n  title,\n}));\n\nconst TOC_IDS = TOC_ENTRIES.map(({ id }) => id);\n\nconst Section = ({\n  id,\n  children,\n}: {\n  id: SectionId;\n  children: React.ReactNode;\n}) => {\n  const { euiTheme } = useEuiTheme();\n  const { title } = SECTIONS.find((section) => section.id === id) ?? {\n    title: id,\n  };\n  return (\n    <section\n      id={sectionId(id)}\n      aria-label={title}\n      css={css`\n        display: flex;\n        flex-direction: column;\n        gap: ${euiTheme.size.m};\n        scroll-margin-top: ${euiTheme.size.l};\n      `}>\n      <EuiTitle size=\"s\">\n        <h2>{title}</h2>\n      </EuiTitle>\n      {children}\n    </section>\n  );\n};\n\nconst Guidance = ({\n  title,\n  items,\n  color,\n  names,\n}: {\n  title: string;\n  items: string[];\n  color: 'success' | 'danger';\n  names: readonly string[];\n}) => (\n  <EuiPanel color={color} hasShadow={false} paddingSize=\"m\">\n    <EuiText size=\"xs\" color={color}>\n      <strong>{title}</strong>\n    </EuiText>\n    <EuiText size=\"s\">\n      {items.length ? (\n        <ul>\n          {items.map((item) => (\n            <li key={item}>\n              <InlineCode text={item} {...{ names }} />\n            </li>\n          ))}\n        </ul>\n      ) : (\n        <p>No guidance has been added for this primitive yet.</p>\n      )}\n    </EuiText>\n  </EuiPanel>\n);\n\nexport interface DocsViewProps {\n  route: StudioRoute;\n  navigate: (next: Partial<StudioRoute>) => void;\n  accent: Accent;\n}\n\n/** The reference page for one primitive. */\nexport const DocsView = ({\n  route: { page, example },\n  navigate,\n  accent,\n}: DocsViewProps) => {\n  const { euiTheme } = useEuiTheme();\n  const {\n    docs: { primitives },\n  } = useStudio();\n  const [active, setActive] = useActiveEntry(TOC_IDS, page);\n  const names = useMemo(() => primitives.map(({ type }) => type), [primitives]);\n  const doc = primitives.find(({ type }) => type === page);\n  if (!doc) {\n    return null;\n  }\n  const { type, useWhen, avoidWhen, props } = doc;\n\n  return (\n    <div\n      css={css`\n        display: flex;\n        flex-wrap: wrap;\n        align-items: flex-start;\n        gap: ${TOC_GAP}px;\n        max-width: ${PAGE_WIDTH}px;\n        margin-inline: auto;\n        padding: ${euiTheme.size.xl} ${euiTheme.size.xxl} ${euiTheme.size.xxxxl};\n      `}>\n      <OnThisPage entries={TOC_ENTRIES} {...{ active }} onSelect={setActive} />\n      <div\n        css={css`\n          flex: 1 1 ${CONTENT_BASIS}px;\n          display: flex;\n          flex-direction: column;\n          gap: ${euiTheme.size.xl};\n          min-width: 0;\n        `}>\n        <div\n          css={css`\n            display: flex;\n            flex-direction: column;\n            gap: ${euiTheme.size.s};\n          `}>\n          <PrimitiveHeading {...{ doc }} />\n          <EuiText\n            size=\"s\"\n            color=\"subdued\"\n            css={css`\n              max-inline-size: 72ch;\n            `}>\n            <p>\n              Explore the example to see the primitive in context; its guidance\n              and props explain when and how to use it.\n            </p>\n          </EuiText>\n        </div>\n\n        <Section id=\"examples\">\n          <ExamplesPanel\n            key={type}\n            {...{ doc, example }}\n            onExampleChange={(next) => navigate({ example: next })}\n            devHref={formatRoute({ mode: 'dev', page, example })}\n          />\n        </Section>\n\n        <Section id=\"guidance\">\n          <div\n            css={css`\n              display: grid;\n              grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\n              align-items: start;\n              gap: ${euiTheme.size.l};\n            `}>\n            <Guidance\n              title=\"Use when\"\n              items={useWhen}\n              color=\"success\"\n              {...{ names }}\n            />\n            <Guidance\n              title=\"Avoid when\"\n              items={avoidWhen}\n              color=\"danger\"\n              {...{ names }}\n            />\n          </div>\n        </Section>\n\n        <Section id=\"props\">\n          <PropsTable {...{ props, accent, names }} />\n        </Section>\n      </div>\n    </div>\n  );\n};\n"]}

package/dist/docs/example_source.d.ts

@@ -0,0 +1,7 @@
+import type { PrimitiveNode } from '@elastic/isomer-sdk';
+/** The example node as JSX or JSON. */
+export declare const ExampleSource: ({ node, isOpen, }: {
+    node: PrimitiveNode;
+    isOpen: boolean;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=example_source.d.ts.map

package/dist/docs/example_source.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"example_source.d.ts","sourceRoot":"","sources":["../../src/docs/example_source.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AA6GzD,uCAAuC;AACvC,eAAO,MAAM,aAAa,GAAI,mBAG3B;IACD,IAAI,EAAE,aAAa,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;CACjB,qDAWA,CAAC"}