@tekton-ui/core 0.2.0

package/dist/screen-generation/generators/index.js

@@ -0,0 +1,32 @@
+/**
+ * @tekton-ui/core - Output Generators Module
+ * Barrel export for code generation from resolved screens
+ * [SPEC-LAYOUT-002] [PHASE-3]
+ */
+export { defaultGeneratorOptions } from './types.js';
+// ============================================================================
+// Utilities
+// ============================================================================
+export { 
+// String case conversion
+camelCase, pascalCase, kebabCase, 
+// Code formatting
+formatCode, indent, 
+// JSX/React utilities
+escapeJSX, needsJSXExpression, propValueToJSX, 
+// Import generation
+generateImports, 
+// CSS utilities
+cssVarToToken, extractPropertyFromCSSVar, 
+// Validation
+isValidIdentifier, sanitizeIdentifier, } from './utils.js';
+export { convertCSSVarsToTheme, generateComponentStyles, generateStyledComponents, } from './css-in-js-generator.js';
+// ============================================================================
+// Tailwind Generator
+// ============================================================================
+export { tokenToTailwindClass, generateComponentClasses, generateTailwindConfig, generateTailwindClasses, } from './tailwind-generator.js';
+// ============================================================================
+// React Generator
+// ============================================================================
+export { generateComponentInterface, generateComponentJSX, generateComponentTree, generateReactComponent, } from './react-generator.js';
+//# sourceMappingURL=index.js.map

package/dist/screen-generation/generators/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/screen-generation/generators/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAmBH,OAAO,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAErD,+EAA+E;AAC/E,YAAY;AACZ,+EAA+E;AAE/E,OAAO;AACL,yBAAyB;AACzB,SAAS,EACT,UAAU,EACV,SAAS;AAET,kBAAkB;AAClB,UAAU,EACV,MAAM;AAEN,sBAAsB;AACtB,SAAS,EACT,kBAAkB,EAClB,cAAc;AAEd,oBAAoB;AACpB,eAAe;AAEf,gBAAgB;AAChB,aAAa,EACb,yBAAyB;AAEzB,aAAa;AACb,iBAAiB,EACjB,kBAAkB,GACnB,MAAM,YAAY,CAAC;AAQpB,OAAO,EACL,qBAAqB,EACrB,uBAAuB,EACvB,wBAAwB,GACzB,MAAM,0BAA0B,CAAC;AAElC,+EAA+E;AAC/E,qBAAqB;AACrB,+EAA+E;AAE/E,OAAO,EACL,oBAAoB,EACpB,wBAAwB,EACxB,sBAAsB,EACtB,uBAAuB,GACxB,MAAM,yBAAyB,CAAC;AAEjC,+EAA+E;AAC/E,kBAAkB;AAClB,+EAA+E;AAE/E,OAAO,EACL,0BAA0B,EAC1B,oBAAoB,EACpB,qBAAqB,EACrB,sBAAsB,GACvB,MAAM,sBAAsB,CAAC"}

package/dist/screen-generation/generators/react-generator.d.ts

@@ -0,0 +1,100 @@
+/**
+ * @tekton-ui/core - React Component Generator
+ * Generates React functional components from ResolvedScreen
+ * [SPEC-LAYOUT-002] [PHASE-3]
+ */
+import type { ResolvedScreen, ResolvedSection, ResolvedComponent } from '../resolver/index.js';
+import type { GeneratorOptions, GeneratorResult, ComponentGenerationContext } from './types.js';
+/**
+ * Generate TypeScript interface for component props
+ *
+ * @param component - Resolved component
+ * @returns TypeScript interface code
+ *
+ * @example
+ * ```typescript
+ * const component = {
+ *   type: 'Button',
+ *   schema: {
+ *     props: [
+ *       { name: 'variant', type: 'string', required: false },
+ *       { name: 'children', type: 'React.ReactNode', required: true }
+ *     ]
+ *   }
+ * };
+ *
+ * const code = generateComponentInterface(component);
+ * // interface ButtonProps {
+ * //   variant?: string;
+ * //   children: React.ReactNode;
+ * // }
+ * ```
+ */
+export declare function generateComponentInterface(component: ResolvedComponent): string;
+/**
+ * Generate JSX for a component and its children
+ *
+ * @param component - Resolved component
+ * @param context - Generation context
+ * @returns JSX code string
+ *
+ * @example
+ * ```typescript
+ * const component = {
+ *   type: 'Button',
+ *   props: { variant: 'primary' },
+ *   children: ['Click me']
+ * };
+ *
+ * const jsx = generateComponentJSX(component, context);
+ * // <button className="bg-primary-500 p-4">Click me</button>
+ * ```
+ */
+export declare function generateComponentJSX(component: ResolvedComponent, context: ComponentGenerationContext): string;
+/**
+ * Generate component tree from resolved sections
+ *
+ * Creates a nested component structure representing the screen layout.
+ *
+ * @param sections - Resolved sections
+ * @param options - Generator options
+ * @returns Component tree JSX code
+ */
+export declare function generateComponentTree(sections: ResolvedSection[], options: GeneratorOptions): string;
+/**
+ * Generate complete screen component from resolved screen
+ *
+ * Creates a React functional component representing the entire screen,
+ * including all sections and nested components.
+ *
+ * @param screen - Resolved screen
+ * @param options - Generator options
+ * @returns Generated React component code
+ *
+ * @example
+ * ```typescript
+ * const screen = resolveScreen(screenDefinition);
+ * const result = generateReactComponent(screen, {
+ *   format: 'typescript',
+ *   cssFramework: 'tailwind',
+ *   includeTypes: true
+ * });
+ *
+ * console.log(result.code);
+ * // import React from 'react';
+ * //
+ * // interface DashboardScreenProps {}
+ * //
+ * // export const DashboardScreen: React.FC<DashboardScreenProps> = () => {
+ * //   return (
+ * //     <div className="screen">
+ * //       <section id="stats">
+ * //         ...
+ * //       </section>
+ * //     </div>
+ * //   );
+ * // };
+ * ```
+ */
+export declare function generateReactComponent(screen: ResolvedScreen, options?: GeneratorOptions): GeneratorResult;
+//# sourceMappingURL=react-generator.d.ts.map

package/dist/screen-generation/generators/react-generator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-generator.d.ts","sourceRoot":"","sources":["../../../src/screen-generation/generators/react-generator.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAC/F,OAAO,KAAK,EAAE,gBAAgB,EAAE,eAAe,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAC;AAgBhG;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,0BAA0B,CAAC,SAAS,EAAE,iBAAiB,GAAG,MAAM,CAqB/E;AAMD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,oBAAoB,CAClC,SAAS,EAAE,iBAAiB,EAC5B,OAAO,EAAE,0BAA0B,GAClC,MAAM,CAoCR;AA0JD;;;;;;;;GAQG;AACH,wBAAgB,qBAAqB,CACnC,QAAQ,EAAE,eAAe,EAAE,EAC3B,OAAO,EAAE,gBAAgB,GACxB,MAAM,CAwBR;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,cAAc,EACtB,OAAO,GAAE,gBAAqB,GAC7B,eAAe,CA6FjB"}

package/dist/screen-generation/generators/react-generator.js

@@ -0,0 +1,379 @@
+/**
+ * @tekton-ui/core - React Component Generator
+ * Generates React functional components from ResolvedScreen
+ * [SPEC-LAYOUT-002] [PHASE-3]
+ */
+import { pascalCase, camelCase, generateImports, formatCode, indent, escapeJSX, propValueToJSX, } from './utils.js';
+import { generateComponentClasses } from './tailwind-generator.js';
+// ============================================================================
+// TypeScript Interface Generation
+// ============================================================================
+/**
+ * Generate TypeScript interface for component props
+ *
+ * @param component - Resolved component
+ * @returns TypeScript interface code
+ *
+ * @example
+ * ```typescript
+ * const component = {
+ *   type: 'Button',
+ *   schema: {
+ *     props: [
+ *       { name: 'variant', type: 'string', required: false },
+ *       { name: 'children', type: 'React.ReactNode', required: true }
+ *     ]
+ *   }
+ * };
+ *
+ * const code = generateComponentInterface(component);
+ * // interface ButtonProps {
+ * //   variant?: string;
+ * //   children: React.ReactNode;
+ * // }
+ * ```
+ */
+export function generateComponentInterface(component) {
+    const interfaceName = `${pascalCase(component.type)}Props`;
+    const lines = [];
+    lines.push(`interface ${interfaceName} {`);
+    for (const propDef of component.schema.props) {
+        const optionalMarker = propDef.required ? '' : '?';
+        const propType = propDef.type || 'unknown';
+        // Add JSDoc comment
+        if (propDef.description) {
+            lines.push(`  /** ${propDef.description} */`);
+        }
+        lines.push(`  ${propDef.name}${optionalMarker}: ${propType};`);
+    }
+    lines.push('}');
+    return lines.join('\n');
+}
+// ============================================================================
+// Component JSX Generation
+// ============================================================================
+/**
+ * Generate JSX for a component and its children
+ *
+ * @param component - Resolved component
+ * @param context - Generation context
+ * @returns JSX code string
+ *
+ * @example
+ * ```typescript
+ * const component = {
+ *   type: 'Button',
+ *   props: { variant: 'primary' },
+ *   children: ['Click me']
+ * };
+ *
+ * const jsx = generateComponentJSX(component, context);
+ * // <button className="bg-primary-500 p-4">Click me</button>
+ * ```
+ */
+export function generateComponentJSX(component, context) {
+    const lines = [];
+    // Generate opening tag
+    const tagName = getJSXTagName(component.type);
+    const attributes = generateJSXAttributes(component, context);
+    if (!component.children || component.children.length === 0) {
+        // Self-closing tag
+        lines.push(`<${tagName}${attributes} />`);
+    }
+    else {
+        // Opening tag
+        lines.push(`<${tagName}${attributes}>`);
+        // Children
+        for (const child of component.children) {
+            if (typeof child === 'string') {
+                // Text content
+                lines.push(indent(escapeJSX(child), context.depth + 1));
+            }
+            else {
+                // Child component
+                const childContext = {
+                    ...context,
+                    depth: context.depth + 1,
+                    parentType: component.type,
+                };
+                const childJSX = generateComponentJSX(child, childContext);
+                lines.push(indent(childJSX, 1));
+            }
+        }
+        // Closing tag
+        lines.push(`</${tagName}>`);
+    }
+    return lines.join('\n');
+}
+/**
+ * Get JSX tag name for component type
+ *
+ * @param type - Component type
+ * @returns JSX tag name
+ */
+function getJSXTagName(type) {
+    // Map component types to HTML elements
+    const tagMap = {
+        Button: 'button',
+        Input: 'input',
+        Text: 'span',
+        Heading: 'h2',
+        Checkbox: 'input',
+        Radio: 'input',
+        Switch: 'button',
+        Slider: 'input',
+        Badge: 'span',
+        Avatar: 'img',
+        Card: 'div',
+        Modal: 'div',
+        Tabs: 'div',
+        Table: 'table',
+        Link: 'a',
+        List: 'ul',
+        Image: 'img',
+        Form: 'form',
+        Dropdown: 'select',
+        Progress: 'progress',
+    };
+    return tagMap[type] || 'div';
+}
+/**
+ * Generate JSX attributes for component
+ *
+ * @param component - Resolved component
+ * @param context - Generation context
+ * @returns JSX attributes string
+ */
+function generateJSXAttributes(component, context) {
+    const attributes = [];
+    // Add className based on CSS framework
+    if (context.cssFramework === 'tailwind') {
+        const classes = generateComponentClasses(component);
+        if (classes.length > 0) {
+            attributes.push(`className="${classes.join(' ')}"`);
+        }
+    }
+    else if (context.cssFramework === 'css-modules') {
+        const className = camelCase(component.type);
+        attributes.push(`className={styles.${className}}`);
+        context.imports.add('styles');
+    }
+    // Add component props (excluding children)
+    for (const [propName, propValue] of Object.entries(component.props)) {
+        if (propName === 'children') {
+            continue;
+        }
+        const jsxValue = propValueToJSX(propValue);
+        attributes.push(`${propName}=${jsxValue}`);
+    }
+    // Add accessibility attributes
+    if (component.schema.a11y.role) {
+        attributes.push(`role="${component.schema.a11y.role}"`);
+    }
+    return attributes.length > 0 ? ' ' + attributes.join(' ') : '';
+}
+// ============================================================================
+// Component Function Generation
+// ============================================================================
+/**
+ * Generate React functional component
+ *
+ * @param component - Resolved component
+ * @param options - Generator options
+ * @returns Component function code
+ *
+ * @example
+ * ```typescript
+ * const component = {
+ *   type: 'Button',
+ *   schema: { props: [...] },
+ *   props: { variant: 'primary' },
+ *   children: ['Click me']
+ * };
+ *
+ * const code = generateReactComponentFunction(component, options);
+ * // export const Button: React.FC<ButtonProps> = ({ variant, children }) => {
+ * //   return (
+ * //     <button className="bg-primary-500">
+ * //       {children}
+ * //     </button>
+ * //   );
+ * // };
+ * ```
+ */
+function _generateReactComponentFunction(component, options) {
+    const componentName = pascalCase(component.type);
+    const propsInterfaceName = `${componentName}Props`;
+    const lines = [];
+    // Extract prop names for destructuring
+    const propNames = component.schema.props.map(p => p.name);
+    const propsDestructure = propNames.length > 0 ? `{ ${propNames.join(', ')} }` : '';
+    // Function signature
+    if (options.includeTypes !== false) {
+        lines.push(`export const ${componentName}: React.FC<${propsInterfaceName}> = (${propsDestructure}) => {`);
+    }
+    else {
+        lines.push(`export const ${componentName} = (${propsDestructure}) => {`);
+    }
+    // Function body
+    lines.push('  return (');
+    // Generate JSX
+    const context = {
+        depth: 2,
+        imports: new Set(),
+        cssFramework: options.cssFramework || 'tailwind',
+        format: options.format || 'typescript',
+    };
+    const jsx = generateComponentJSX(component, context);
+    lines.push(indent(jsx, 2));
+    lines.push('  );');
+    lines.push('};');
+    return lines.join('\n');
+}
+// ============================================================================
+// Component Tree Generation
+// ============================================================================
+/**
+ * Generate component tree from resolved sections
+ *
+ * Creates a nested component structure representing the screen layout.
+ *
+ * @param sections - Resolved sections
+ * @param options - Generator options
+ * @returns Component tree JSX code
+ */
+export function generateComponentTree(sections, options) {
+    const lines = [];
+    for (const section of sections) {
+        // Section wrapper
+        lines.push(`<section id="${section.id}">`);
+        // Components in section
+        for (const component of section.components) {
+            const context = {
+                depth: 1,
+                imports: new Set(),
+                cssFramework: options.cssFramework || 'tailwind',
+                format: options.format || 'typescript',
+            };
+            const componentJSX = generateComponentJSX(component, context);
+            lines.push(indent(componentJSX, 1));
+        }
+        lines.push('</section>');
+    }
+    return lines.join('\n');
+}
+// ============================================================================
+// Screen Component Generation
+// ============================================================================
+/**
+ * Generate complete screen component from resolved screen
+ *
+ * Creates a React functional component representing the entire screen,
+ * including all sections and nested components.
+ *
+ * @param screen - Resolved screen
+ * @param options - Generator options
+ * @returns Generated React component code
+ *
+ * @example
+ * ```typescript
+ * const screen = resolveScreen(screenDefinition);
+ * const result = generateReactComponent(screen, {
+ *   format: 'typescript',
+ *   cssFramework: 'tailwind',
+ *   includeTypes: true
+ * });
+ *
+ * console.log(result.code);
+ * // import React from 'react';
+ * //
+ * // interface DashboardScreenProps {}
+ * //
+ * // export const DashboardScreen: React.FC<DashboardScreenProps> = () => {
+ * //   return (
+ * //     <div className="screen">
+ * //       <section id="stats">
+ * //         ...
+ * //       </section>
+ * //     </div>
+ * //   );
+ * // };
+ * ```
+ */
+export function generateReactComponent(screen, options = {}) {
+    const startTime = performance.now();
+    const imports = {
+        react: ['default as React'],
+    };
+    const code = [];
+    const warnings = [];
+    // Add CSS imports if needed
+    if (options.cssFramework === 'css-modules') {
+        imports['./styles.module.css'] = ['default as styles'];
+    }
+    // Generate screen component
+    const screenName = pascalCase(screen.id.replace(/-screen$/, '')) + 'Screen';
+    const propsInterfaceName = `${screenName}Props`;
+    // Interface (empty for screen component)
+    if (options.includeTypes !== false) {
+        code.push(`interface ${propsInterfaceName} {}`);
+        code.push('');
+    }
+    // Component function
+    const lines = [];
+    if (options.includeTypes !== false) {
+        lines.push(`export const ${screenName}: React.FC<${propsInterfaceName}> = () => {`);
+    }
+    else {
+        lines.push(`export const ${screenName} = () => {`);
+    }
+    lines.push('  return (');
+    lines.push('    <div className="screen" data-screen-id="' + screen.id + '">');
+    // Generate component tree
+    const componentTree = generateComponentTree(screen.sections, options);
+    lines.push(indent(componentTree, 3));
+    lines.push('    </div>');
+    lines.push('  );');
+    lines.push('};');
+    code.push(lines.join('\n'));
+    // Also generate individual component functions if requested
+    const componentFiles = [];
+    if (options.includeTypes !== false) {
+        // Generate type definitions file
+        const typeDefs = [];
+        typeDefs.push("import React from 'react';");
+        typeDefs.push('');
+        const generatedTypes = new Set();
+        for (const section of screen.sections) {
+            for (const component of section.components) {
+                if (!generatedTypes.has(component.type)) {
+                    typeDefs.push(generateComponentInterface(component));
+                    typeDefs.push('');
+                    generatedTypes.add(component.type);
+                }
+            }
+        }
+        componentFiles.push({
+            path: 'types.ts',
+            content: typeDefs.join('\n'),
+            type: 'component',
+        });
+    }
+    // Combine imports and code
+    const importCode = generateImports(imports, options.format || 'typescript');
+    const fullCode = importCode + code.join('\n');
+    // Format code
+    const formatted = options.prettier !== false ? formatCode(fullCode) : fullCode;
+    const endTime = performance.now();
+    return {
+        code: formatted,
+        files: componentFiles,
+        warnings,
+        meta: {
+            duration: endTime - startTime,
+            componentCount: screen.sections.reduce((sum, s) => sum + s.components.length, 0),
+            lineCount: formatted.split('\n').length,
+        },
+    };
+}
+//# sourceMappingURL=react-generator.js.map

package/dist/screen-generation/generators/react-generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-generator.js","sourceRoot":"","sources":["../../../src/screen-generation/generators/react-generator.ts"],"names":[],"mappings":"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"}

package/dist/screen-generation/generators/tailwind-generator.d.ts

@@ -0,0 +1,105 @@
+/**
+ * @tekton-ui/core - Tailwind CSS Generator
+ * Generates Tailwind class names and configuration from ResolvedScreen
+ * [SPEC-LAYOUT-002] [PHASE-3]
+ */
+import type { ResolvedScreen, ResolvedComponent } from '../resolver/index.js';
+import type { GeneratorOptions, GeneratorResult } from './types.js';
+/**
+ * Convert token binding to Tailwind class name
+ *
+ * Maps design token references to Tailwind utility classes.
+ * Uses a lookup table for performance.
+ *
+ * @param tokenBinding - Token binding (CSS variable reference)
+ * @param context - Resolution context with component props
+ * @returns Tailwind class name
+ *
+ * @example
+ * ```typescript
+ * tokenToTailwindClass('var(--atomic-spacing-16)', { prop: 'padding' });
+ * // → 'p-4'
+ *
+ * tokenToTailwindClass('var(--semantic-color-primary)', { prop: 'background' });
+ * // → 'bg-primary-500'
+ * ```
+ */
+export declare function tokenToTailwindClass(tokenBinding: string, context: {
+    prop: string;
+    responsive?: string;
+}): string;
+/**
+ * Generate Tailwind classes for component
+ *
+ * @param component - Resolved component
+ * @returns Array of Tailwind class names
+ *
+ * @example
+ * ```typescript
+ * const component = {
+ *   type: 'Button',
+ *   tokenBindings: {
+ *     background: 'var(--semantic-color-primary)',
+ *     padding: 'var(--atomic-spacing-16)'
+ *   }
+ * };
+ *
+ * generateTailwindClasses(component);
+ * // → ['bg-primary-500', 'p-4']
+ * ```
+ */
+export declare function generateComponentClasses(component: ResolvedComponent): string[];
+/**
+ * Generate Tailwind configuration extension
+ *
+ * Creates a tailwind.config.js extension that maps design tokens
+ * to Tailwind theme values.
+ *
+ * @param cssVars - CSS variables from resolved screen
+ * @returns Tailwind config extension code
+ *
+ * @example
+ * ```typescript
+ * const cssVars = {
+ *   'var(--semantic-color-primary)': 'semantic.color.primary',
+ *   'var(--atomic-spacing-16)': 'atomic.spacing.16'
+ * };
+ *
+ * const config = generateTailwindConfig(cssVars);
+ * // module.exports = {
+ * //   theme: {
+ * //     extend: {
+ * //       colors: {
+ * //         'primary': 'var(--semantic-color-primary)',
+ * //       },
+ * //       spacing: {
+ * //         '4': 'var(--atomic-spacing-16)',
+ * //       }
+ * //     }
+ * //   }
+ * // }
+ * ```
+ */
+export declare function generateTailwindConfig(cssVars: Record<string, string>): string;
+/**
+ * Generate Tailwind classes and configuration from resolved screen
+ *
+ * Creates:
+ * - Component class mappings
+ * - Tailwind configuration extension
+ *
+ * @param screen - Resolved screen
+ * @param options - Generator options
+ * @returns Generator result with code and config
+ *
+ * @example
+ * ```typescript
+ * const screen = resolveScreen(screenDefinition);
+ * const result = generateTailwindClasses(screen);
+ *
+ * console.log(result.code); // Component class mappings
+ * console.log(result.files[0].content); // tailwind.config.js
+ * ```
+ */
+export declare function generateTailwindClasses(screen: ResolvedScreen, _options?: GeneratorOptions): GeneratorResult;
+//# sourceMappingURL=tailwind-generator.d.ts.map

package/dist/screen-generation/generators/tailwind-generator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tailwind-generator.d.ts","sourceRoot":"","sources":["../../../src/screen-generation/generators/tailwind-generator.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAC9E,OAAO,KAAK,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAmDpE;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,oBAAoB,CAClC,YAAY,EAAE,MAAM,EACpB,OAAO,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,GAC7C,MAAM,CAiDR;AAmBD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,wBAAwB,CAAC,SAAS,EAAE,iBAAiB,GAAG,MAAM,EAAE,CAW/E;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,sBAAsB,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAsG9E;AAMD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,uBAAuB,CACrC,MAAM,EAAE,cAAc,EACtB,QAAQ,GAAE,gBAAqB,GAC9B,eAAe,CA8CjB"}