@clikvn/showroom-visualizer 0.2.2-dev-09 → 0.2.2-dev-11

package/package.json

@@ -1,124 +1,132 @@
-{
-  "name": "@clikvn/showroom-visualizer",
-  "description": "Showroom Visualizer",
-  "version": "0.2.2-dev-09",
-  "author": "Clik JSC",
-  "license": "ISC",
-  "type": "module",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "scripts": {
-    "dev": "rollup --watch --config rollup.config.js",
-    "build": "rollup --config rollup.config.js",
-    "lint": "eslint src",
-    "lint:fix": "eslint --fix src",
-    "prettier": "prettier --write .",
-    "pub": "publish --access public",
-    "deploy": "yarn build && yarn publish --access public"
-  },
-  "dependencies": {
-    "@clikvn/react-bottom-sheet": "^1.0.3",
-    "@clikvn/react-gallery-viewer": "^1.2.3-dev",
-    "@fortawesome/fontawesome-svg-core": "^6.6.0",
-    "@fortawesome/free-brands-svg-icons": "^6.6.0",
-    "@fortawesome/free-regular-svg-icons": "^6.6.0",
-    "@fortawesome/free-solid-svg-icons": "^6.6.0",
-    "@fortawesome/react-fontawesome": "^0.2.2",
-    "@radix-ui/react-slot": "^1.1.1",
-    "@ts-stack/markdown": "1.4.0",
-    "@types/moment": "^2.13.0",
-    "antd": "^5.27.2",
-    "axios": "^1.11.0",
-    "class-variance-authority": "^0.7.1",
-    "classnames": "^2.5.1",
-    "clsx": "^2.1.1",
-    "date-fns": "^4.1.0",
-    "device-detector-js": "^3.0.3",
-    "embla-carousel-react": "^8.6.0",
-    "framer-motion": "^12.23.12",
-    "howler": "^2.2.4",
-    "i18next": "^25.5.1",
-    "lodash": "^4.17.21",
-    "lucide-react": "^0.544.0",
-    "moment": "^2.30.1",
-    "node-fetch": "^3.3.2",
-    "qrcode.react": "^4.2.0",
-    "rc-progress": "^4.0.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-i18next": "^15.7.3",
-    "react-intersection-image": "^2.1.2",
-    "react-markdown": "^9.0.3",
-    "react-planet": "^1.0.1-ie11",
-    "react-slick": "^0.31.0",
-    "react-truncate-markup": "^5.1.2",
-    "react-zoom-pan-pinch": "^3.7.0",
-    "remark-gfm": "^4.0.0",
-    "signals": "^1.0.0",
-    "sonner": "^2.0.7",
-    "swr": "^2.3.0",
-    "usehooks-ts": "^3.1.0",
-    "vtt.js": "^0.13.0",
-    "web-vitals": "^2.1.0"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "devDependencies": {
-    "@rollup-extras/plugin-copy": "^1.11.1",
-    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^28.0.1",
-    "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^15.3.0",
-    "@rollup/plugin-typescript": "^12.1.1",
-    "@tailwindcss/typography": "^0.5.15",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^13.0.0",
-    "@testing-library/user-event": "^13.2.1",
-    "@types/howler": "^2.2.12",
-    "@types/jest": "^29.5.14",
-    "@types/lodash": "^4.17.20",
-    "@types/node": "^22.9.0",
-    "@types/node-fetch": "^2.6.13",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@types/signals": "^1.0.4",
-    "@typescript-eslint/eslint-plugin": "^8.20.0",
-    "@typescript-eslint/parser": "^8.20.0",
-    "autoprefixer": "^10.4.20",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^10.0.1",
-    "eslint-plugin-prettier": "^5.2.2",
-    "prettier": "^3.4.2",
-    "react-scripts": "5.0.1",
-    "rollup": "^4.26.0",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-replace": "^2.2.0",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript-paths": "^1.5.0",
-    "rollup-plugin-uglify": "^6.0.4",
-    "tailwind-merge": "^2.6.0",
-    "tailwindcss": "^3.4.15",
-    "tailwindcss-animate": "^1.0.7",
-    "typescript": "^5.6.3"
-  },
-  "engines": {
-    "node": ">=18.18.0"
-  }
-}
+{
+  "name": "@clikvn/showroom-visualizer",
+  "description": "Showroom Visualizer",
+  "version": "0.2.2-dev-11",
+  "author": "Clik JSC",
+  "license": "ISC",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./dist/web": "./dist/web.js",
+    "./dist/web.js": "./dist/web.js"
+  },
+  "scripts": {
+    "dev": "rollup --watch --config rollup.config.js",
+    "build": "rollup --config rollup.config.js",
+    "lint": "eslint src",
+    "lint:fix": "eslint --fix src",
+    "prettier": "prettier --write .",
+    "pub": "publish --access public",
+    "deploy": "yarn build && yarn publish --access public"
+  },
+  "dependencies": {
+    "@clikvn/react-bottom-sheet": "^1.0.3",
+    "@clikvn/react-gallery-viewer": "^1.2.3-dev",
+    "@fortawesome/fontawesome-svg-core": "^6.6.0",
+    "@fortawesome/free-brands-svg-icons": "^6.6.0",
+    "@fortawesome/free-regular-svg-icons": "^6.6.0",
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
+    "@radix-ui/react-slot": "^1.1.1",
+    "@ts-stack/markdown": "1.4.0",
+    "@types/moment": "^2.13.0",
+    "antd": "^5.27.2",
+    "axios": "^1.11.0",
+    "class-variance-authority": "^0.7.1",
+    "classnames": "^2.5.1",
+    "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
+    "device-detector-js": "^3.0.3",
+    "embla-carousel-react": "^8.6.0",
+    "framer-motion": "^12.23.12",
+    "howler": "^2.2.4",
+    "i18next": "^25.5.1",
+    "lodash": "^4.17.21",
+    "lucide-react": "^0.544.0",
+    "moment": "^2.30.1",
+    "node-fetch": "^3.3.2",
+    "qrcode.react": "^4.2.0",
+    "rc-progress": "^4.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-i18next": "^15.7.3",
+    "react-intersection-image": "^2.1.2",
+    "react-markdown": "^9.0.3",
+    "react-planet": "^1.0.1-ie11",
+    "react-slick": "^0.31.0",
+    "react-truncate-markup": "^5.1.2",
+    "react-zoom-pan-pinch": "^3.7.0",
+    "remark-gfm": "^4.0.0",
+    "signals": "^1.0.0",
+    "sonner": "^2.0.7",
+    "swr": "^2.3.0",
+    "usehooks-ts": "^3.1.0",
+    "vtt.js": "^0.13.0",
+    "web-vitals": "^2.1.0"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@rollup-extras/plugin-copy": "^1.11.1",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-typescript": "^12.1.1",
+    "@tailwindcss/typography": "^0.5.15",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^13.0.0",
+    "@testing-library/user-event": "^13.2.1",
+    "@types/howler": "^2.2.12",
+    "@types/jest": "^29.5.14",
+    "@types/lodash": "^4.17.20",
+    "@types/node": "^22.9.0",
+    "@types/node-fetch": "^2.6.13",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@types/signals": "^1.0.4",
+    "@typescript-eslint/eslint-plugin": "^8.20.0",
+    "@typescript-eslint/parser": "^8.20.0",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-prettier": "^5.2.2",
+    "prettier": "^3.4.2",
+    "react-scripts": "5.0.1",
+    "rollup": "^4.26.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-replace": "^2.2.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript-paths": "^1.5.0",
+    "rollup-plugin-uglify": "^6.0.4",
+    "tailwind-merge": "^2.6.0",
+    "tailwindcss": "^3.4.15",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "^5.6.3"
+  },
+  "engines": {
+    "node": ">=18.18.0"
+  }
+}

package/rollup.config.js

@@ -1,3 +1,38 @@
+/**
+ * ============================================================================
+ * SHOWROOM VISUALIZER - ROLLUP BUILD CONFIGURATION
+ * ============================================================================
+ *
+ * 🎯 MỤC TIÊU:
+ * Tạo ra 2 build outputs phục vụ 2 use cases khác nhau:
+ *
+ * 1️⃣ NPM Package (dist/index.js) - EXTERNAL REACT
+ *    - Dùng React từ host app (Next.js, React apps)
+ *    - ✅ Hỗ trợ Custom Layout overrides
+ *    - File nhỏ hơn (~1.8MB)
+ *    - Use: import { ShowroomVisualizer } from '@clikvn/showroom-visualizer'
+ *
+ * 2️⃣ Web Component (dist/web.js) - BUNDLED REACT
+ *    - Bundle React 19 vào file
+ *    - ❌ KHÔNG hỗ trợ custom layout overrides
+ *    - File lớn hơn (~2.0MB)
+ *    - Use: <script type="module" src="web.js"></script>
+ *
+ * ────────────────────────────────────────────────────────────────────────────
+ *
+ * 📊 SO SÁNH:
+ *
+ * | Feature              | NPM Package | Web Component |
+ * |----------------------|-------------|---------------|
+ * | React Source         | Host app    | Bundled       |
+ * | Custom Layout        | ✅ Yes      | ❌ No         |
+ * | File Size            | ~1.8MB      | ~2.0MB        |
+ * | Dependencies         | Need React  | Standalone    |
+ * | Use Case             | React apps  | Vanilla JS    |
+ *
+ * ────────────────────────────────────────────────────────────────────────────
+ */
+
 import resolve from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
 import typescript from '@rollup/plugin-typescript';
@@ -16,8 +51,163 @@ const extensions = ['.ts', '.tsx', '.js'];
 const isDev =
   process.env.NODE_ENV === 'development' || process.env.ROLLUP_WATCH === 'true';
 
+// ============================================================================
+// CUSTOM PLUGIN: Fix React-DOM Imports
+// ============================================================================
+// React 18's ESM build không export findDOMNode, nhưng CommonJS build có.
+// Plugin này rewrite code để chỉ dùng default import và access properties,
+// tránh Rollup extract named imports.
+const fixReactDomImports = () => ({
+  name: 'fix-react-dom-imports',
+  renderChunk(code) {
+    let fixed = code;
+
+    // Fix invalid variable declarations with dots in the name
+    // This pattern appears in minified code from third-party libraries
+    fixed = fixed.replace(
+      /var\s+_ReactDOM\$ReactDOM__default\.findDOMNode;/g,
+      'var _ReactDOM$findDOMNode;'
+    );
+
+    // Fix all occurrences of the invalid variable name
+    fixed = fixed.replace(
+      /_ReactDOM\$ReactDOM__default\.findDOMNode/g,
+      '_ReactDOM$findDOMNode'
+    );
+
+    // Fix double ReactDOM__default references
+    fixed = fixed.replace(
+      /ReactDOM__default\.ReactDOM__default\./g,
+      'ReactDOM__default.'
+    );
+
+    // Additional fix for similar patterns with other methods
+    fixed = fixed.replace(
+      /var\s+_ReactDOM\$ReactDOM__default\.(\w+);/g,
+      'var _ReactDOM$$1;'
+    );
+
+    // Fix minified code that creates invalid variable names
+    fixed = fixed.replace(
+      /var\s+([a-zA-Z_$][a-zA-Z0-9_$]*)\$([a-zA-Z_$][a-zA-Z0-9_$]*)\.[a-zA-Z_$][a-zA-Z0-9_$]*;/g,
+      function (match, prefix, suffix) {
+        return `var ${prefix}$${suffix}_temp;`;
+      }
+    );
+
+    // First, remove any findDOMNode from named imports
+    fixed = fixed.replace(
+      /import\s*\{([^}]*)\}\s*from\s*['"]react-dom['"]/g,
+      (match, imports) => {
+        if (imports.includes('findDOMNode')) {
+          const cleanedImports = imports
+            .split(',')
+            .map((imp) => imp.trim())
+            .filter((imp) => !imp.includes('findDOMNode'))
+            .join(', ');
+
+          if (cleanedImports.trim()) {
+            return `import { ${cleanedImports} } from 'react-dom'`;
+          }
+          return '';
+        }
+        return match;
+      }
+    );
+
+    // Handle combined default and named imports
+    fixed = fixed.replace(
+      /import\s+(\w+),\s*\{\s*([^}]+)\s*\}\s*from\s*['"]react-dom['"]/g,
+      (match, defaultImport, namedImports) => {
+        // Check if named imports contains invalid syntax like "ReactDOM__default.createPortal"
+        if (
+          namedImports.includes('ReactDOM__default.') ||
+          namedImports.includes('findDOMNode')
+        ) {
+          // Extract valid imports only
+          const validImports = namedImports
+            .split(',')
+            .map((imp) => imp.trim())
+            .filter((imp) => {
+              // Remove any import that has dots or includes findDOMNode
+              return !imp.includes('.') && !imp.includes('findDOMNode');
+            })
+            .map((imp) => {
+              // Clean up "as" aliases
+              const parts = imp.split(/\s+as\s+/);
+              if (parts.length === 2 && !parts[0].includes('.')) {
+                return imp;
+              }
+              return '';
+            })
+            .filter(Boolean)
+            .join(', ');
+
+          if (validImports) {
+            return `import ${defaultImport}, { ${validImports} } from 'react-dom'`;
+          }
+          return `import ${defaultImport} from 'react-dom'`;
+        }
+        return match;
+      }
+    );
+
+    // Replace all variations of findDOMNode (but not in function declarations)
+    fixed = fixed.replace(/\bfindDOMNode\$?\d*\b/g, (match, offset) => {
+      // Check if this is a function declaration
+      const beforeMatch = fixed.substring(Math.max(0, offset - 20), offset);
+      if (beforeMatch.trim().endsWith('function')) {
+        return match; // Don't replace in function declarations
+      }
+      return 'ReactDOM__default.findDOMNode';
+    });
+
+    // Fix property access patterns
+    fixed = fixed.replace(/(\w+)\.findDOMNode\b/g, (match, obj) => {
+      if (obj === 'ReactDOM__default') return match;
+      return 'ReactDOM__default.findDOMNode';
+    });
+
+    // Replace other methods - but NOT when they're being used in import statements
+    const methodsToReplace = [
+      'createPortal',
+      'unstable_batchedUpdates',
+      'flushSync',
+    ];
+
+    methodsToReplace.forEach((method) => {
+      // Only replace when not in import context
+      const regex = new RegExp(
+        `\\b${method}\\$?\\d*\\b(?![:\\.]|\\s*as\\s*\\w+)`,
+        'g'
+      );
+      fixed = fixed.replace(regex, (match, offset) => {
+        // Check if this is within an import statement
+        const beforeMatch = fixed.substring(Math.max(0, offset - 100), offset);
+        if (beforeMatch.includes('import') && beforeMatch.includes('{')) {
+          return match;
+        }
+        return `ReactDOM__default.${method}`;
+      });
+    });
+
+    return { code: fixed, map: null };
+  },
+});
+
+// ============================================================================
+// CONFIG CHO NPM PACKAGE - External React
+// ============================================================================
+// Dùng khi: import { ShowroomVisualizer } from '@clikvn/showroom-visualizer'
+// - React được external → Dùng React version của host app (Next.js, React app)
+// - Cho phép custom layout overrides vì share cùng React instance
+// - File nhỏ hơn vì không bundle React
 const indexConfig = {
   context: 'this',
+
+  // ✅ External React - Library sẽ dùng React từ host app
+  external: ['react', 'react-dom', 'react/jsx-runtime', 'react-dom/client'],
+
   onwarn(warning, warn) {
     // Bỏ qua warning về "use client" directive
     if (
@@ -33,11 +223,24 @@ const indexConfig = {
     resolve({
       extensions,
       browser: true,
-      dedupe: ['useTranslation', 'i18n', 'I18nextProvider'],
+      preferBuiltins: false,
+      dedupe: [
+        'react',
+        'react-dom',
+        'useTranslation',
+        'i18n',
+        'I18nextProvider',
+      ],
+    }),
+    commonjs({
+      esmExternals: true,
+      requireReturnsDefault: 'auto',
+      // Không extract named imports từ external modules
+      ignoreDynamicRequires: false,
     }),
-    commonjs(),
     // Skip uglify in dev mode - tốn thời gian
-    !isDev && uglify(),
+    // uglify does not support ES2015+ properly — and React’s ESM builds rely heavily on ES2015+ semantics
+    // !isDev && uglify(),
     json(),
     // Skip babel in dev mode - giảm thời gian compile
     !isDev &&
@@ -79,10 +282,75 @@ const indexConfig = {
     typescriptPaths({ preserveExtensions: true }),
     // Skip terser trong dev - tốn rất nhiều thời gian
     !isDev && terser({ output: { comments: false } }),
+    // ⚠️ QUAN TRỌNG: Fix react-dom imports sau khi bundle
+    // Phải đặt ở cuối để chạy sau tất cả transformations
+    fixReactDomImports(),
   ].filter(Boolean), // Remove false values
 };
 
+// ============================================================================
+// CONFIG CHO WEB COMPONENT - Bundled React
+// ============================================================================
+// Dùng khi: <script src="web.js"> hoặc dynamic import('web.js')
+// - React được BUNDLE vào → Standalone, không cần dependencies
+// - KHÔNG hỗ trợ custom layout overrides (vì khác React instance với host app)
+// - File lớn hơn vì bundle React (~200KB extra)
+// - Phù hợp cho vanilla JS/HTML projects
+const browserConfig = {
+  context: 'this',
+  // ❌ KHÔNG external React - Bundle React version 19 vào file
+  // external: [],  // Không khai báo external = bundle tất cả
+  onwarn: indexConfig.onwarn,
+  plugins: indexConfig.plugins,
+};
+
+// ============================================================================
+// DUAL BUILD STRATEGY
+// ============================================================================
 const configs = [
+  // ────────────────────────────────────────────────────────────────────────
+  // BUILD 1: NPM Package (dist/index.js)
+  // ────────────────────────────────────────────────────────────────────────
+  // 📦 Sử dụng: import { ShowroomVisualizer } from '@clikvn/showroom-visualizer'
+  //
+  // ✅ Ưu điểm:
+  //    - Dùng React version của host app (Next.js, React app)
+  //    - Cho phép SWIZZLE components (share React instance)
+  //    - File nhỏ (~1.8MB) vì không bundle React
+  //
+  // 📝 Use cases:
+  //    - React/Next.js applications
+  //    - Cần customize components qua custom layout overrides
+  //    - Muốn kiểm soát React version
+  {
+    input: './src/index.ts',
+    output: {
+      file: 'dist/index.js',
+      format: 'esm',
+      inlineDynamicImports: true,
+    },
+    ...indexConfig, // ✅ External React dependencies
+  },
+
+  // ────────────────────────────────────────────────────────────────────────
+  // BUILD 2: Web Component (dist/web.js)
+  // ────────────────────────────────────────────────────────────────────────
+  // 🌐 Sử dụng: <script type="module" src="web.js"></script>
+  //            hoặc: await import('web.js')
+  //
+  // ✅ Ưu điểm:
+  //    - Standalone, không cần install dependencies
+  //    - Hoạt động trong vanilla JS/HTML
+  //    - Không cần build tools
+  //
+  // ❌ Hạn chế:
+  //    - KHÔNG hỗ trợ custom layout overrides (khác React instance)
+  //    - File lớn hơn (~2.0MB) vì bundle React
+  //
+  // 📝 Use cases:
+  //    - Vanilla JS/HTML projects
+  //    - Không cần customize UI
+  //    - Quick integration
   {
     input: './src/web.ts',
     output: {
@@ -90,7 +358,7 @@ const configs = [
       format: 'esm',
       inlineDynamicImports: true,
     },
-    ...indexConfig,
+    ...browserConfig, // ✅ Bundle React version 19
   },
 ];
 

package/.claude/settings.local.json

@@ -1,19 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(find:*)",
-      "Bash(npm run build:*)",
-      "Bash(grep:*)",
-      "Bash(rm:*)",
-      "Bash(ls:*)",
-      "Bash(sed:*)",
-      "Bash(yarn build)",
-      "Bash(yalc push:*)",
-      "Bash(yarn dev)",
-      "Bash(yarn list:*)",
-      "Bash(mv:*)",
-      "Bash(rg:*)"
-    ],
-    "deny": []
-  }
-}

package/dist/context/SwizzleContext.d.ts

@@ -1,21 +0,0 @@
-import React, { ReactNode, ComponentType } from 'react';
-import { SwizzleConfig, SwizzlePath } from '../types/swizzle';
-type SwizzleContextType = {
-    swizzle: SwizzleConfig;
-    getSwizzledComponent: <T = unknown>(path: SwizzlePath, defaultComponent: ComponentType<T>) => ComponentType<T>;
-};
-/**
- * Hook để access swizzle configuration
- */
-export declare const useSwizzle: () => SwizzleContextType;
-type Props = {
-    swizzle?: SwizzleConfig;
-    children: ReactNode;
-};
-/**
- * SwizzleProvider - Wrap app với provider này để enable component swizzling
- * Giống như Docusaurus swizzle pattern
- */
-export declare const SwizzleProvider: React.FC<Props>;
-export {};
-//# sourceMappingURL=SwizzleContext.d.ts.map

package/dist/context/SwizzleContext.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SwizzleContext.d.ts","sourceRoot":"","sources":["../../src/context/SwizzleContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAGZ,SAAS,EACT,aAAa,EAGd,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAQ9D,KAAK,kBAAkB,GAAG;IACxB,OAAO,EAAE,aAAa,CAAC;IACvB,oBAAoB,EAAE,CAAC,CAAC,GAAG,OAAO,EAChC,IAAI,EAAE,WAAW,EACjB,gBAAgB,EAAE,aAAa,CAAC,CAAC,CAAC,KAC/B,aAAa,CAAC,CAAC,CAAC,CAAC;CACvB,CAAC;AAOF;;GAEG;AACH,eAAO,MAAM,UAAU,0BAAmC,CAAC;AAE3D,KAAK,KAAK,GAAG;IACX,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAkG3C,CAAC"}