From e8c80565fcf92caa0b65a64212cffb0abd8a21ca Mon Sep 17 00:00:00 2001
From: "UZU, J" <woojoo@softmarshmallow.com>
Date: Mon, 5 Oct 2020 12:21:45 +0900
Subject: [PATCH 01/73] Initial commit

---
 web-builder/.gitignore | 104 +++++++++++++++++++++++++++++++++++++++++
 web-builder/LICENSE    |  21 +++++++++
 web-builder/README.md  |   2 +
 3 files changed, 127 insertions(+)
 create mode 100644 web-builder/.gitignore
 create mode 100644 web-builder/LICENSE
 create mode 100644 web-builder/README.md

diff --git a/web-builder/.gitignore b/web-builder/.gitignore
new file mode 100644
index 00000000..67045665
--- /dev/null
+++ b/web-builder/.gitignore
@@ -0,0 +1,104 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
diff --git a/web-builder/LICENSE b/web-builder/LICENSE
new file mode 100644
index 00000000..daf328af
--- /dev/null
+++ b/web-builder/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Bridged
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/web-builder/README.md b/web-builder/README.md
new file mode 100644
index 00000000..54161378
--- /dev/null
+++ b/web-builder/README.md
@@ -0,0 +1,2 @@
+# jsx-builder
+jsx syntex tree builder for web applications. react, vue, svelte, etc..

From 25d073b9a0f7c51c66f0c760142e4b95ef35c366 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Mon, 5 Oct 2020 12:27:15 +0900
Subject: [PATCH 02/73] published 0.0.1

---
 web-builder/README.md    |  9 +++++++++
 web-builder/package.json | 10 ++++++++++
 2 files changed, 19 insertions(+)
 create mode 100644 web-builder/package.json

diff --git a/web-builder/README.md b/web-builder/README.md
index 54161378..71ed38eb 100644
--- a/web-builder/README.md
+++ b/web-builder/README.md
@@ -1,2 +1,11 @@
 # jsx-builder
 jsx syntex tree builder for web applications. react, vue, svelte, etc..
+
+
+
+## installation
+
+```shell
+yarn add @bridged.xyz/jsx-builder
+```
+
diff --git a/web-builder/package.json b/web-builder/package.json
new file mode 100644
index 00000000..258c5257
--- /dev/null
+++ b/web-builder/package.json
@@ -0,0 +1,10 @@
+{
+  "name": "@bridged.xyz/jsx-builder",
+  "version": "0.0.1",
+  "description": "jsx syntex tree builder for web applications. react, vue, svelte, etc..",
+  "main": "index.js",
+  "repository": "https://github.com/bridgedxyz/jsx-builder.git",
+  "author": "bridged.xyz, softmarshmallow <woojoo@softmarshmallow.com>",
+  "license": "MIT",
+  "private": false
+}

From 6fabae89f90b55521dea1ffdf077da435814a21a Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Mon, 5 Oct 2020 12:33:59 +0900
Subject: [PATCH 03/73] updated package name

---
 web-builder/README.md    | 27 +++++++++++++++++++++++++--
 web-builder/package.json |  4 ++--
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/web-builder/README.md b/web-builder/README.md
index 71ed38eb..476cbf8b 100644
--- a/web-builder/README.md
+++ b/web-builder/README.md
@@ -1,4 +1,4 @@
-# jsx-builder
+# web-builder
 jsx syntex tree builder for web applications. react, vue, svelte, etc..
 
 
@@ -6,6 +6,29 @@ jsx syntex tree builder for web applications. react, vue, svelte, etc..
 ## installation
 
 ```shell
-yarn add @bridged.xyz/jsx-builder
+yarn add @bridged.xyz/web-builder
 ```
 
+
+
+
+
+## platforms
+
+- react
+- vue
+- svelte
+- css
+- sass
+- less
+- mui
+- tailwind css
+- bootstrap
+
+
+
+## references
+
+css-builder
+
+jsx-builder
\ No newline at end of file
diff --git a/web-builder/package.json b/web-builder/package.json
index 258c5257..1544ee21 100644
--- a/web-builder/package.json
+++ b/web-builder/package.json
@@ -1,9 +1,9 @@
 {
-  "name": "@bridged.xyz/jsx-builder",
+  "name": "@bridged.xyz/web-builder",
   "version": "0.0.1",
   "description": "jsx syntex tree builder for web applications. react, vue, svelte, etc..",
   "main": "index.js",
-  "repository": "https://github.com/bridgedxyz/jsx-builder.git",
+  "repository": "https://github.com/bridgedxyz/web-builder.git",
   "author": "bridged.xyz, softmarshmallow <woojoo@softmarshmallow.com>",
   "license": "MIT",
   "private": false

From ae295cf68972ec0628adbc7c84d1cf1fbae6d6f8 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Thu, 19 Nov 2020 11:17:28 +0900
Subject: [PATCH 04/73] implemented poc of preact to string for jsx extraction
 (mixed usage with ts and tsx)

---
 web-builder/.gitignore                        |   2 +
 web-builder/package.json                      |  12 +-
 web-builder/packages/css/index.ts             |   0
 web-builder/packages/html/index.ts            |   0
 web-builder/packages/jsx-gen/index.ts         |   2 +
 web-builder/packages/jsx-gen/package.json     |  11 ++
 web-builder/packages/jsx-gen/pure.ts          |   3 +
 web-builder/packages/jsx-gen/test.tsx         |  18 ++
 .../packages/jsx-gen/utils/jsx-to-string.ts   | 170 ++++++++++++++++++
 web-builder/packages/styles/.gitignore        | 104 +++++++++++
 web-builder/packages/styles/index.ts          |   0
 web-builder/preact/index.ts                   |   0
 web-builder/react/.gitignore                  | 104 +++++++++++
 web-builder/react/index.ts                    |   0
 web-builder/svelte/.gitignore                 | 104 +++++++++++
 web-builder/svelte/index.ts                   |   0
 web-builder/tsconfig.json                     |  10 ++
 web-builder/vanilla/index.tsx                 |   5 +
 web-builder/vanilla/package.json              |   8 +
 web-builder/vue/.gitignore                    | 104 +++++++++++
 web-builder/vue/index.ts                      |   0
 web-builder/yarn.lock                         |  30 ++++
 22 files changed, 686 insertions(+), 1 deletion(-)
 create mode 100644 web-builder/packages/css/index.ts
 create mode 100644 web-builder/packages/html/index.ts
 create mode 100644 web-builder/packages/jsx-gen/index.ts
 create mode 100644 web-builder/packages/jsx-gen/package.json
 create mode 100644 web-builder/packages/jsx-gen/pure.ts
 create mode 100644 web-builder/packages/jsx-gen/test.tsx
 create mode 100644 web-builder/packages/jsx-gen/utils/jsx-to-string.ts
 create mode 100644 web-builder/packages/styles/.gitignore
 create mode 100644 web-builder/packages/styles/index.ts
 create mode 100644 web-builder/preact/index.ts
 create mode 100644 web-builder/react/.gitignore
 create mode 100644 web-builder/react/index.ts
 create mode 100644 web-builder/svelte/.gitignore
 create mode 100644 web-builder/svelte/index.ts
 create mode 100644 web-builder/tsconfig.json
 create mode 100644 web-builder/vanilla/index.tsx
 create mode 100644 web-builder/vanilla/package.json
 create mode 100644 web-builder/vue/.gitignore
 create mode 100644 web-builder/vue/index.ts
 create mode 100644 web-builder/yarn.lock

diff --git a/web-builder/.gitignore b/web-builder/.gitignore
index 67045665..852fd590 100644
--- a/web-builder/.gitignore
+++ b/web-builder/.gitignore
@@ -6,6 +6,8 @@ yarn-debug.log*
 yarn-error.log*
 lerna-debug.log*
 
+.DS_Store
+
 # Diagnostic reports (https://nodejs.org/api/report.html)
 report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 
diff --git a/web-builder/package.json b/web-builder/package.json
index 1544ee21..4daf1bc3 100644
--- a/web-builder/package.json
+++ b/web-builder/package.json
@@ -2,9 +2,19 @@
   "name": "@bridged.xyz/web-builder",
   "version": "0.0.1",
   "description": "jsx syntex tree builder for web applications. react, vue, svelte, etc..",
+  "workspaces": [
+    "packages/*",
+    "svelte",
+    "react",
+    "vue",
+    "vanilla"
+  ],
   "main": "index.js",
   "repository": "https://github.com/bridgedxyz/web-builder.git",
   "author": "bridged.xyz, softmarshmallow <woojoo@softmarshmallow.com>",
   "license": "MIT",
-  "private": false
+  "dependencies": {
+    "typescript": "^4.0.5"
+  },
+  "private": true
 }
diff --git a/web-builder/packages/css/index.ts b/web-builder/packages/css/index.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/web-builder/packages/html/index.ts b/web-builder/packages/html/index.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/web-builder/packages/jsx-gen/index.ts b/web-builder/packages/jsx-gen/index.ts
new file mode 100644
index 00000000..100fa2e8
--- /dev/null
+++ b/web-builder/packages/jsx-gen/index.ts
@@ -0,0 +1,2 @@
+export * from "./utils/jsx-to-string"
+
diff --git a/web-builder/packages/jsx-gen/package.json b/web-builder/packages/jsx-gen/package.json
new file mode 100644
index 00000000..4dcf649e
--- /dev/null
+++ b/web-builder/packages/jsx-gen/package.json
@@ -0,0 +1,11 @@
+{
+    "name": "jsx-gen",
+    "version": "0.0.0",
+    "license": "MIT",
+    "author": "bridged.xyz <softmarshmallow>",
+    "dependencies": {
+        "immutable": "^4.0.0-rc.12",
+        "preact": "^10.5.7",
+        "preact-render-to-string": "^5.1.12"
+    }
+}
diff --git a/web-builder/packages/jsx-gen/pure.ts b/web-builder/packages/jsx-gen/pure.ts
new file mode 100644
index 00000000..6e75ef2a
--- /dev/null
+++ b/web-builder/packages/jsx-gen/pure.ts
@@ -0,0 +1,3 @@
+import { logit } from "./test"
+
+logit()
\ No newline at end of file
diff --git a/web-builder/packages/jsx-gen/test.tsx b/web-builder/packages/jsx-gen/test.tsx
new file mode 100644
index 00000000..757b10be
--- /dev/null
+++ b/web-builder/packages/jsx-gen/test.tsx
@@ -0,0 +1,18 @@
+
+import { h } from 'preact';
+import { render } from 'preact-render-to-string';
+
+
+const Fox = ({ name }) => (
+    <div class="fox" >
+        <h5>{name} </h5>
+        <p> This page is all about {name}.</p>
+    </div>
+);
+
+let html = render(<Fox name={'sweety'} />);
+
+
+export function logit() {
+    console.log(html)
+}
diff --git a/web-builder/packages/jsx-gen/utils/jsx-to-string.ts b/web-builder/packages/jsx-gen/utils/jsx-to-string.ts
new file mode 100644
index 00000000..fc63d9bd
--- /dev/null
+++ b/web-builder/packages/jsx-gen/utils/jsx-to-string.ts
@@ -0,0 +1,170 @@
+/**
+ * originated from
+ * https://github.com/grommet/jsx-to-string
+ * with MIT LICENSE
+ * https://github.com/immutable-js/immutable-js
+ */
+import { isValidElement } from 'preact';
+import { isImmutable } from 'immutable';
+import { h } from 'preact';
+
+function isDefaultProp(defaultProps, key, value) {
+    if (!defaultProps) {
+        return false;
+    }
+    return defaultProps[key] === value;
+}
+
+function stringifyObject(object, opts) {
+    let result;
+    if (Array.isArray(object)) {
+        result = object.map(item => JSON.stringify(item));
+    } else if (object && typeof object === 'object') {
+        result = {};
+        Object.keys(object).map(key => {
+            let value = object[key];
+            if (isValidElement(value)) {
+                value = jsxToString(value, opts);
+            } else if (Array.isArray(value)) {
+                value = value.map(item => stringifyObject(item, opts));
+            } else if (typeof value === 'object') {
+                value = stringifyObject(value, opts);
+            } else if (typeof value === 'function') {
+                value = opts.useFunctionCode ?
+                    opts.functionNameOnly ?
+                        value.name.toString() : value.toString() : `...`;
+            }
+            result[key] = value;
+        });
+    } else {
+        result = object;
+    }
+    return result;
+}
+
+const _JSX_REGEXP = /"<.+>"/g;
+
+function serializeItem(item, options, delimit = true) {
+    let result;
+
+    if (isImmutable(item)) {
+        result = serializeItem(item.toJS(), options, delimit);
+    } else if (typeof item === 'string') {
+        result = delimit ? `'${item}'` : item;
+    } else if (typeof item === 'number' || typeof item === 'boolean') {
+        result = `${item}`;
+    } else if (Array.isArray(item)) {
+        var indentation = new Array(options.spacing + 1).join(' ');
+        const delimiter = delimit ? ', ' : `\n${indentation}`;
+        const items = item.map(i => serializeItem(i, options)).join(delimiter);
+        result = delimit ? `[${items}]` : `${items}`;
+    } else if (isValidElement(item)) {
+        result = jsxToString(item, options);
+    } else if (typeof item === 'object') {
+        result = JSON.stringify(stringifyObject(item, options));
+        // remove string quotes from embeded JSX values
+        result = result.replace(_JSX_REGEXP, function (match) {
+            return match.slice(1, match.length - 1);
+        });
+    } else if (typeof item === 'function') {
+        result = options.useFunctionCode ?
+            options.functionNameOnly ?
+                item.name.toString() : item.toString() : `...`;
+    }
+    return result;
+}
+
+export function jsxToString(component, options) {
+
+    const baseOpts = {
+        displayName: component.type.displayName || component.type.name ||
+            component.type,
+        ignoreProps: [],
+        ignoreTags: [],
+        keyValueOverride: {},
+        spacing: 0,
+        detectFunctions: false
+    };
+
+    const opts = { ...baseOpts, ...options };
+
+    // Do not return anything if the root tag should be ignored
+    if (opts.ignoreTags.indexOf(opts.displayName) !== -1) {
+        return '';
+    }
+
+    const componentData = {
+        name: opts.displayName,
+        props: [],
+        children: []
+    };
+
+    delete opts.displayName;
+    if (component.props) {
+        const indentation = new Array(opts.spacing + 3).join(' ');
+        componentData.props = Object.keys(component.props)
+        componentData.props.filter(key => {
+            return (key !== 'children' &&
+                !isDefaultProp(component.type.defaultProps, key,
+                    component.props[key]) &&
+                opts.ignoreProps.indexOf(key) === -1)
+        }).map(key => {
+            let value;
+            if (typeof opts.keyValueOverride[key] === 'function') {
+                value = opts.keyValueOverride[key](component.props[key]);
+            } else if (opts.keyValueOverride[key]) {
+                value = opts.keyValueOverride[key]
+            } else if (opts.shortBooleanSyntax && typeof component.props[key] === 'boolean' && component.props[key]) {
+                return key;
+            } else {
+                value = serializeItem(component.props[key], { ...opts, key });
+            }
+            if (typeof value !== 'string' || value[0] !== "'") {
+                value = `{${value}}`;
+            }
+            // Is `value` a multi-line string?
+            const valueLines = value.split(/\r\n|\r|\n/);
+            if (valueLines.length > 1) {
+                value = valueLines.join(`\n${indentation}`);
+            }
+            return `${key}=${value}`;
+        }).join(`\n${indentation}`);
+
+        if (component.key && opts.ignoreProps.indexOf('key') === -1) {
+            componentData.props.push(`key='${component.key}'`);
+        }
+
+        if (componentData.props.length > 0) {
+            componentData.props = ' ' + componentData.props as any;
+        }
+    }
+
+    if (component.props.children) {
+        opts.spacing += 2;
+        const indentation = new Array(opts.spacing + 1).join(' ');
+        if (Array.isArray(component.props.children)) {
+            componentData.children = component.props.children
+                .reduce((a, b) => a.concat(b), []) // handle Array of Arrays
+                .filter(child => {
+                    if (child && !isValidElement(child)) {
+                        return true;
+                    }
+                    const childShouldBeRemoved = child &&
+                        child.type &&
+                        opts.ignoreTags.indexOf(child.type.displayName || child.type.name || child.type) === -1;
+                    // Filter the tag if it is in the ignoreTags list or if is not a tag
+                    return childShouldBeRemoved;
+                })
+                .map(child => serializeItem(child, opts, false))
+                .join(`\n${indentation}`);
+        } else {
+            componentData.children =
+                serializeItem(component.props.children, opts, false);
+        }
+        return `<${componentData.name}${componentData.props}>\n` +
+            `${indentation}${componentData.children}\n` +
+            `${indentation.slice(0, -2)}</${componentData.name}>`;
+    } else {
+        return `<${componentData.name}${componentData.props} />`;
+    }
+}
diff --git a/web-builder/packages/styles/.gitignore b/web-builder/packages/styles/.gitignore
new file mode 100644
index 00000000..67045665
--- /dev/null
+++ b/web-builder/packages/styles/.gitignore
@@ -0,0 +1,104 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
diff --git a/web-builder/packages/styles/index.ts b/web-builder/packages/styles/index.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/web-builder/preact/index.ts b/web-builder/preact/index.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/web-builder/react/.gitignore b/web-builder/react/.gitignore
new file mode 100644
index 00000000..67045665
--- /dev/null
+++ b/web-builder/react/.gitignore
@@ -0,0 +1,104 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
diff --git a/web-builder/react/index.ts b/web-builder/react/index.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/web-builder/svelte/.gitignore b/web-builder/svelte/.gitignore
new file mode 100644
index 00000000..67045665
--- /dev/null
+++ b/web-builder/svelte/.gitignore
@@ -0,0 +1,104 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
diff --git a/web-builder/svelte/index.ts b/web-builder/svelte/index.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/web-builder/tsconfig.json b/web-builder/tsconfig.json
new file mode 100644
index 00000000..305484fb
--- /dev/null
+++ b/web-builder/tsconfig.json
@@ -0,0 +1,10 @@
+{
+    "compilerOptions": {
+      "module": "commonjs",
+      "removeComments": true,
+      "preserveConstEnums": true,
+      "sourceMap": true,
+      "jsx": "react",
+      "jsxFactory": "h"
+    }
+}
\ No newline at end of file
diff --git a/web-builder/vanilla/index.tsx b/web-builder/vanilla/index.tsx
new file mode 100644
index 00000000..f41f3fea
--- /dev/null
+++ b/web-builder/vanilla/index.tsx
@@ -0,0 +1,5 @@
+import { jsxToString } from "jsx-gen"
+import * as preact from "preact"
+//@ts-ignore
+const jsx = jsxToString(<p></p>, {})
+console.log(jsx)
\ No newline at end of file
diff --git a/web-builder/vanilla/package.json b/web-builder/vanilla/package.json
new file mode 100644
index 00000000..8908ed57
--- /dev/null
+++ b/web-builder/vanilla/package.json
@@ -0,0 +1,8 @@
+{
+    "name": "vanilla",
+    "version": "0.0.0",
+    "dependencies": {
+        "jsx-gen": "0.0.0",
+        "preact": "^10.5.7"
+    }
+}
diff --git a/web-builder/vue/.gitignore b/web-builder/vue/.gitignore
new file mode 100644
index 00000000..67045665
--- /dev/null
+++ b/web-builder/vue/.gitignore
@@ -0,0 +1,104 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
diff --git a/web-builder/vue/index.ts b/web-builder/vue/index.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/web-builder/yarn.lock b/web-builder/yarn.lock
new file mode 100644
index 00000000..b55357f1
--- /dev/null
+++ b/web-builder/yarn.lock
@@ -0,0 +1,30 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+immutable@^4.0.0-rc.12:
+  version "4.0.0-rc.12"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.0.0-rc.12.tgz#ca59a7e4c19ae8d9bf74a97bdf0f6e2f2a5d0217"
+  integrity sha512-0M2XxkZLx/mi3t8NVwIm1g8nHoEmM9p9UBl/G9k4+hm0kBgOVdMV/B3CY5dQ8qG8qc80NN4gDV4HQv6FTJ5q7A==
+
+preact-render-to-string@^5.1.12:
+  version "5.1.12"
+  resolved "https://registry.yarnpkg.com/preact-render-to-string/-/preact-render-to-string-5.1.12.tgz#3d258a177ef8947f768dd0f2c56629e7fda2dc39"
+  integrity sha512-nXVCOpvepSk9AfPwqS08rf9NDOCs8eeYYlG+7tE85iP5jVyjz+aYb1BYaP5SPdfVWVrzI9L5NzxozUvKaD96tA==
+  dependencies:
+    pretty-format "^3.8.0"
+
+preact@^10.5.7:
+  version "10.5.7"
+  resolved "https://registry.yarnpkg.com/preact/-/preact-10.5.7.tgz#f1d84725539e18f7ccbea937cf3db5895661dbd3"
+  integrity sha512-4oEpz75t/0UNcwmcsjk+BIcDdk68oao+7kxcpc1hQPNs2Oo3ZL9xFz8UBf350mxk/VEdD41L5b4l2dE3Ug3RYg==
+
+pretty-format@^3.8.0:
+  version "3.8.0"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-3.8.0.tgz#bfbed56d5e9a776645f4b1ff7aa1a3ac4fa3c385"
+  integrity sha1-v77VbV6ad2ZF9LH/eqGjrE+jw4U=
+
+typescript@^4.0.5:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.0.5.tgz#ae9dddfd1069f1cb5beb3ef3b2170dd7c1332389"
+  integrity sha512-ywmr/VrTVCmNTJ6iV2LwIrfG1P+lv6luD8sUJs+2eI9NLGigaN+nUQc13iHqisq7bra9lnmUSYqbJvegraBOPQ==

From b1055b0a5a983b6b7c9c92951b129781e0998490 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Fri, 27 Nov 2020 18:49:49 +0900
Subject: [PATCH 05/73] preact poc

---
 .../packages/jsx-gen/development/preact-to-string.tsx | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 web-builder/packages/jsx-gen/development/preact-to-string.tsx

diff --git a/web-builder/packages/jsx-gen/development/preact-to-string.tsx b/web-builder/packages/jsx-gen/development/preact-to-string.tsx
new file mode 100644
index 00000000..2c058af0
--- /dev/null
+++ b/web-builder/packages/jsx-gen/development/preact-to-string.tsx
@@ -0,0 +1,11 @@
+import { render } from 'preact-render-to-string';
+import { h } from 'preact';
+/** @jsx h */
+
+let vdom = <div style={{
+    height: 120
+}} class="foo">content</div>;
+
+let html = render(vdom);
+console.log(html);
+// <div class="foo">content</div>
\ No newline at end of file

From dc380b24ef01a9a5ae9d8ef181ed2c8b817c13b5 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Thu, 1 Apr 2021 16:34:52 +0900
Subject: [PATCH 06/73] add coli as dependency

---
 web-builder/.gitmodules   | 3 +++
 web-builder/packages/coli | 1 +
 2 files changed, 4 insertions(+)
 create mode 100644 web-builder/.gitmodules
 create mode 160000 web-builder/packages/coli

diff --git a/web-builder/.gitmodules b/web-builder/.gitmodules
new file mode 100644
index 00000000..e45d8ada
--- /dev/null
+++ b/web-builder/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "packages/coli"]
+	path = packages/coli
+	url = https://github.com/bridgedxyz/coli.git
diff --git a/web-builder/packages/coli b/web-builder/packages/coli
new file mode 160000
index 00000000..d7fea14a
--- /dev/null
+++ b/web-builder/packages/coli
@@ -0,0 +1 @@
+Subproject commit d7fea14a35a231ad18bc1ea8b268e3eec0288eb1

From a27fa78addc49e3b68c600c62b5cbefe561791c3 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Thu, 1 Apr 2021 16:41:24 +0900
Subject: [PATCH 07/73] organization

---
 web-builder/packages/css/README.md                            | 1 +
 web-builder/packages/html/README.md                           | 1 +
 web-builder/packages/jsx/README.md                            | 1 +
 .../{jsx-gen => jsx}/development/preact-to-string.tsx         | 0
 web-builder/packages/{jsx-gen => jsx}/index.ts                | 0
 web-builder/packages/{jsx-gen => jsx}/package.json            | 0
 web-builder/packages/{jsx-gen => jsx}/pure.ts                 | 0
 web-builder/packages/{jsx-gen => jsx}/test.tsx                | 0
 web-builder/packages/{jsx-gen => jsx}/utils/jsx-to-string.ts  | 0
 web-builder/packages/styled/README.md                         | 3 +++
 web-builder/packages/styled/index.ts                          | 0
 web-builder/packages/styled/package.json                      | 4 ++++
 12 files changed, 10 insertions(+)
 create mode 100644 web-builder/packages/css/README.md
 create mode 100644 web-builder/packages/html/README.md
 create mode 100644 web-builder/packages/jsx/README.md
 rename web-builder/packages/{jsx-gen => jsx}/development/preact-to-string.tsx (100%)
 rename web-builder/packages/{jsx-gen => jsx}/index.ts (100%)
 rename web-builder/packages/{jsx-gen => jsx}/package.json (100%)
 rename web-builder/packages/{jsx-gen => jsx}/pure.ts (100%)
 rename web-builder/packages/{jsx-gen => jsx}/test.tsx (100%)
 rename web-builder/packages/{jsx-gen => jsx}/utils/jsx-to-string.ts (100%)
 create mode 100644 web-builder/packages/styled/README.md
 create mode 100644 web-builder/packages/styled/index.ts
 create mode 100644 web-builder/packages/styled/package.json

diff --git a/web-builder/packages/css/README.md b/web-builder/packages/css/README.md
new file mode 100644
index 00000000..6e4845de
--- /dev/null
+++ b/web-builder/packages/css/README.md
@@ -0,0 +1 @@
+# Vanilla CSS Support for web
diff --git a/web-builder/packages/html/README.md b/web-builder/packages/html/README.md
new file mode 100644
index 00000000..25551913
--- /dev/null
+++ b/web-builder/packages/html/README.md
@@ -0,0 +1 @@
+# Raw Html builder support
diff --git a/web-builder/packages/jsx/README.md b/web-builder/packages/jsx/README.md
new file mode 100644
index 00000000..c46abec8
--- /dev/null
+++ b/web-builder/packages/jsx/README.md
@@ -0,0 +1 @@
+# JSX Support for React, Vue frameworks
diff --git a/web-builder/packages/jsx-gen/development/preact-to-string.tsx b/web-builder/packages/jsx/development/preact-to-string.tsx
similarity index 100%
rename from web-builder/packages/jsx-gen/development/preact-to-string.tsx
rename to web-builder/packages/jsx/development/preact-to-string.tsx
diff --git a/web-builder/packages/jsx-gen/index.ts b/web-builder/packages/jsx/index.ts
similarity index 100%
rename from web-builder/packages/jsx-gen/index.ts
rename to web-builder/packages/jsx/index.ts
diff --git a/web-builder/packages/jsx-gen/package.json b/web-builder/packages/jsx/package.json
similarity index 100%
rename from web-builder/packages/jsx-gen/package.json
rename to web-builder/packages/jsx/package.json
diff --git a/web-builder/packages/jsx-gen/pure.ts b/web-builder/packages/jsx/pure.ts
similarity index 100%
rename from web-builder/packages/jsx-gen/pure.ts
rename to web-builder/packages/jsx/pure.ts
diff --git a/web-builder/packages/jsx-gen/test.tsx b/web-builder/packages/jsx/test.tsx
similarity index 100%
rename from web-builder/packages/jsx-gen/test.tsx
rename to web-builder/packages/jsx/test.tsx
diff --git a/web-builder/packages/jsx-gen/utils/jsx-to-string.ts b/web-builder/packages/jsx/utils/jsx-to-string.ts
similarity index 100%
rename from web-builder/packages/jsx-gen/utils/jsx-to-string.ts
rename to web-builder/packages/jsx/utils/jsx-to-string.ts
diff --git a/web-builder/packages/styled/README.md b/web-builder/packages/styled/README.md
new file mode 100644
index 00000000..9dd6c8e9
--- /dev/null
+++ b/web-builder/packages/styled/README.md
@@ -0,0 +1,3 @@
+# Styled components / Emotion pattern for React, Preact, Vue
+
+> Web builder built-in support for styled components and emotion css
diff --git a/web-builder/packages/styled/index.ts b/web-builder/packages/styled/index.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/web-builder/packages/styled/package.json b/web-builder/packages/styled/package.json
new file mode 100644
index 00000000..b1864b3b
--- /dev/null
+++ b/web-builder/packages/styled/package.json
@@ -0,0 +1,4 @@
+{
+    "name": "@web-builder/styled",
+    "version": "0.0.0"
+}
\ No newline at end of file

From 6a01d0fd5f6b3af9a59df496d162025a244821b5 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Thu, 1 Apr 2021 16:47:56 +0900
Subject: [PATCH 08/73] sync with coli

---
 web-builder/packages/coli | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-builder/packages/coli b/web-builder/packages/coli
index d7fea14a..ce17e930 160000
--- a/web-builder/packages/coli
+++ b/web-builder/packages/coli
@@ -1 +1 @@
-Subproject commit d7fea14a35a231ad18bc1ea8b268e3eec0288eb1
+Subproject commit ce17e930fef3e6aa990cffe90790890d2708f020

From a78974bf58d69d5103c53f62740ec5117a948775 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Thu, 1 Apr 2021 17:37:24 +0900
Subject: [PATCH 09/73] wip - custom jsx transformer

---
 web-builder/README.md                         |  27 ++-
 .../jsx/development/preact-to-string.tsx      |  11 --
 web-builder/packages/jsx/h/README.md          |   9 +
 web-builder/packages/jsx/h/index.ts           |   3 +
 web-builder/packages/jsx/index.ts             |   2 -
 web-builder/packages/jsx/package.json         |  11 +-
 web-builder/packages/jsx/pure.ts              |   3 -
 web-builder/packages/jsx/test.tsx             |  22 +--
 web-builder/packages/jsx/tsconfig.json        |   5 +
 .../packages/jsx/utils/jsx-to-string.ts       | 170 ------------------
 web-builder/vanilla/package.json              |   4 +-
 web-builder/yarn.lock                         |  22 +--
 12 files changed, 54 insertions(+), 235 deletions(-)
 delete mode 100644 web-builder/packages/jsx/development/preact-to-string.tsx
 create mode 100644 web-builder/packages/jsx/h/README.md
 create mode 100644 web-builder/packages/jsx/h/index.ts
 delete mode 100644 web-builder/packages/jsx/pure.ts
 create mode 100644 web-builder/packages/jsx/tsconfig.json
 delete mode 100644 web-builder/packages/jsx/utils/jsx-to-string.ts

diff --git a/web-builder/README.md b/web-builder/README.md
index 476cbf8b..05f58aed 100644
--- a/web-builder/README.md
+++ b/web-builder/README.md
@@ -1,7 +1,8 @@
 # web-builder
-jsx syntex tree builder for web applications. react, vue, svelte, etc..
 
+jsx syntex tree builder for web applications. react, vue, svelte, etc..
 
+> A [CoLI](coli.codes) Based Technology
 
 ## installation
 
@@ -9,10 +10,6 @@ jsx syntex tree builder for web applications. react, vue, svelte, etc..
 yarn add @bridged.xyz/web-builder
 ```
 
-
-
-
-
 ## platforms
 
 - react
@@ -24,11 +21,25 @@ yarn add @bridged.xyz/web-builder
 - mui
 - tailwind css
 - bootstrap
+- [reflect](https://reflect-ui.com)
 
+## Usage
 
+```
+new Component()
+```
 
-## references
+```tsx
+<Component style={{ color: CSS.black }}>
+  <Child />
+</Component>
 
-css-builder
+// <>
+```
+
+## references
 
-jsx-builder
\ No newline at end of file
+- [flutter builder for building flutter applications dynamically](https://github.com/bridgedxyz/flutter-builder)
+- Built with [CoLI](https://coli.codes/)
+- css-builder
+- jsx-builder
diff --git a/web-builder/packages/jsx/development/preact-to-string.tsx b/web-builder/packages/jsx/development/preact-to-string.tsx
deleted file mode 100644
index 2c058af0..00000000
--- a/web-builder/packages/jsx/development/preact-to-string.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { render } from 'preact-render-to-string';
-import { h } from 'preact';
-/** @jsx h */
-
-let vdom = <div style={{
-    height: 120
-}} class="foo">content</div>;
-
-let html = render(vdom);
-console.log(html);
-// <div class="foo">content</div>
\ No newline at end of file
diff --git a/web-builder/packages/jsx/h/README.md b/web-builder/packages/jsx/h/README.md
new file mode 100644
index 00000000..15d49f82
--- /dev/null
+++ b/web-builder/packages/jsx/h/README.md
@@ -0,0 +1,9 @@
+# What is h?
+
+ts requires h function for create element, which in this case, we are extracting properties from jsx tree to create actual stringfied jsx tree code.
+
+## References
+
+- https://preactjs.com/guide/v8/api-reference/#-preact.h-/-preact.createelement-
+- https://github.com/alexmingoia/jsx-transform
+- https://babeljs.io/docs/en/babel-plugin-transform-react-jsx
diff --git a/web-builder/packages/jsx/h/index.ts b/web-builder/packages/jsx/h/index.ts
new file mode 100644
index 00000000..03772a88
--- /dev/null
+++ b/web-builder/packages/jsx/h/index.ts
@@ -0,0 +1,3 @@
+export function h(a?) {
+  console.log(a);
+}
diff --git a/web-builder/packages/jsx/index.ts b/web-builder/packages/jsx/index.ts
index 100fa2e8..e69de29b 100644
--- a/web-builder/packages/jsx/index.ts
+++ b/web-builder/packages/jsx/index.ts
@@ -1,2 +0,0 @@
-export * from "./utils/jsx-to-string"
-
diff --git a/web-builder/packages/jsx/package.json b/web-builder/packages/jsx/package.json
index 4dcf649e..3cf9f480 100644
--- a/web-builder/packages/jsx/package.json
+++ b/web-builder/packages/jsx/package.json
@@ -1,11 +1,10 @@
 {
-    "name": "jsx-gen",
+    "name": "@web-builder/jsx",
     "version": "0.0.0",
     "license": "MIT",
     "author": "bridged.xyz <softmarshmallow>",
-    "dependencies": {
-        "immutable": "^4.0.0-rc.12",
-        "preact": "^10.5.7",
-        "preact-render-to-string": "^5.1.12"
+    "dependencies": {},
+    "devDependencies": {
+        "typescript": "^4.2.3"
     }
-}
+}
\ No newline at end of file
diff --git a/web-builder/packages/jsx/pure.ts b/web-builder/packages/jsx/pure.ts
deleted file mode 100644
index 6e75ef2a..00000000
--- a/web-builder/packages/jsx/pure.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { logit } from "./test"
-
-logit()
\ No newline at end of file
diff --git a/web-builder/packages/jsx/test.tsx b/web-builder/packages/jsx/test.tsx
index 757b10be..e0ccea7b 100644
--- a/web-builder/packages/jsx/test.tsx
+++ b/web-builder/packages/jsx/test.tsx
@@ -1,18 +1,8 @@
+const h = "";
 
-import { h } from 'preact';
-import { render } from 'preact-render-to-string';
-
-
-const Fox = ({ name }) => (
-    <div class="fox" >
-        <h5>{name} </h5>
-        <p> This page is all about {name}.</p>
-    </div>
-);
-
-let html = render(<Fox name={'sweety'} />);
-
-
-export function logit() {
-    console.log(html)
+function Builder() {
+  return "";
 }
+
+const A = <Builder></Builder>;
+console.log(A);
diff --git a/web-builder/packages/jsx/tsconfig.json b/web-builder/packages/jsx/tsconfig.json
new file mode 100644
index 00000000..186ad251
--- /dev/null
+++ b/web-builder/packages/jsx/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "jsx": "preserve"
+  }
+}
diff --git a/web-builder/packages/jsx/utils/jsx-to-string.ts b/web-builder/packages/jsx/utils/jsx-to-string.ts
deleted file mode 100644
index fc63d9bd..00000000
--- a/web-builder/packages/jsx/utils/jsx-to-string.ts
+++ /dev/null
@@ -1,170 +0,0 @@
-/**
- * originated from
- * https://github.com/grommet/jsx-to-string
- * with MIT LICENSE
- * https://github.com/immutable-js/immutable-js
- */
-import { isValidElement } from 'preact';
-import { isImmutable } from 'immutable';
-import { h } from 'preact';
-
-function isDefaultProp(defaultProps, key, value) {
-    if (!defaultProps) {
-        return false;
-    }
-    return defaultProps[key] === value;
-}
-
-function stringifyObject(object, opts) {
-    let result;
-    if (Array.isArray(object)) {
-        result = object.map(item => JSON.stringify(item));
-    } else if (object && typeof object === 'object') {
-        result = {};
-        Object.keys(object).map(key => {
-            let value = object[key];
-            if (isValidElement(value)) {
-                value = jsxToString(value, opts);
-            } else if (Array.isArray(value)) {
-                value = value.map(item => stringifyObject(item, opts));
-            } else if (typeof value === 'object') {
-                value = stringifyObject(value, opts);
-            } else if (typeof value === 'function') {
-                value = opts.useFunctionCode ?
-                    opts.functionNameOnly ?
-                        value.name.toString() : value.toString() : `...`;
-            }
-            result[key] = value;
-        });
-    } else {
-        result = object;
-    }
-    return result;
-}
-
-const _JSX_REGEXP = /"<.+>"/g;
-
-function serializeItem(item, options, delimit = true) {
-    let result;
-
-    if (isImmutable(item)) {
-        result = serializeItem(item.toJS(), options, delimit);
-    } else if (typeof item === 'string') {
-        result = delimit ? `'${item}'` : item;
-    } else if (typeof item === 'number' || typeof item === 'boolean') {
-        result = `${item}`;
-    } else if (Array.isArray(item)) {
-        var indentation = new Array(options.spacing + 1).join(' ');
-        const delimiter = delimit ? ', ' : `\n${indentation}`;
-        const items = item.map(i => serializeItem(i, options)).join(delimiter);
-        result = delimit ? `[${items}]` : `${items}`;
-    } else if (isValidElement(item)) {
-        result = jsxToString(item, options);
-    } else if (typeof item === 'object') {
-        result = JSON.stringify(stringifyObject(item, options));
-        // remove string quotes from embeded JSX values
-        result = result.replace(_JSX_REGEXP, function (match) {
-            return match.slice(1, match.length - 1);
-        });
-    } else if (typeof item === 'function') {
-        result = options.useFunctionCode ?
-            options.functionNameOnly ?
-                item.name.toString() : item.toString() : `...`;
-    }
-    return result;
-}
-
-export function jsxToString(component, options) {
-
-    const baseOpts = {
-        displayName: component.type.displayName || component.type.name ||
-            component.type,
-        ignoreProps: [],
-        ignoreTags: [],
-        keyValueOverride: {},
-        spacing: 0,
-        detectFunctions: false
-    };
-
-    const opts = { ...baseOpts, ...options };
-
-    // Do not return anything if the root tag should be ignored
-    if (opts.ignoreTags.indexOf(opts.displayName) !== -1) {
-        return '';
-    }
-
-    const componentData = {
-        name: opts.displayName,
-        props: [],
-        children: []
-    };
-
-    delete opts.displayName;
-    if (component.props) {
-        const indentation = new Array(opts.spacing + 3).join(' ');
-        componentData.props = Object.keys(component.props)
-        componentData.props.filter(key => {
-            return (key !== 'children' &&
-                !isDefaultProp(component.type.defaultProps, key,
-                    component.props[key]) &&
-                opts.ignoreProps.indexOf(key) === -1)
-        }).map(key => {
-            let value;
-            if (typeof opts.keyValueOverride[key] === 'function') {
-                value = opts.keyValueOverride[key](component.props[key]);
-            } else if (opts.keyValueOverride[key]) {
-                value = opts.keyValueOverride[key]
-            } else if (opts.shortBooleanSyntax && typeof component.props[key] === 'boolean' && component.props[key]) {
-                return key;
-            } else {
-                value = serializeItem(component.props[key], { ...opts, key });
-            }
-            if (typeof value !== 'string' || value[0] !== "'") {
-                value = `{${value}}`;
-            }
-            // Is `value` a multi-line string?
-            const valueLines = value.split(/\r\n|\r|\n/);
-            if (valueLines.length > 1) {
-                value = valueLines.join(`\n${indentation}`);
-            }
-            return `${key}=${value}`;
-        }).join(`\n${indentation}`);
-
-        if (component.key && opts.ignoreProps.indexOf('key') === -1) {
-            componentData.props.push(`key='${component.key}'`);
-        }
-
-        if (componentData.props.length > 0) {
-            componentData.props = ' ' + componentData.props as any;
-        }
-    }
-
-    if (component.props.children) {
-        opts.spacing += 2;
-        const indentation = new Array(opts.spacing + 1).join(' ');
-        if (Array.isArray(component.props.children)) {
-            componentData.children = component.props.children
-                .reduce((a, b) => a.concat(b), []) // handle Array of Arrays
-                .filter(child => {
-                    if (child && !isValidElement(child)) {
-                        return true;
-                    }
-                    const childShouldBeRemoved = child &&
-                        child.type &&
-                        opts.ignoreTags.indexOf(child.type.displayName || child.type.name || child.type) === -1;
-                    // Filter the tag if it is in the ignoreTags list or if is not a tag
-                    return childShouldBeRemoved;
-                })
-                .map(child => serializeItem(child, opts, false))
-                .join(`\n${indentation}`);
-        } else {
-            componentData.children =
-                serializeItem(component.props.children, opts, false);
-        }
-        return `<${componentData.name}${componentData.props}>\n` +
-            `${indentation}${componentData.children}\n` +
-            `${indentation.slice(0, -2)}</${componentData.name}>`;
-    } else {
-        return `<${componentData.name}${componentData.props} />`;
-    }
-}
diff --git a/web-builder/vanilla/package.json b/web-builder/vanilla/package.json
index 8908ed57..00553bc4 100644
--- a/web-builder/vanilla/package.json
+++ b/web-builder/vanilla/package.json
@@ -2,7 +2,7 @@
     "name": "vanilla",
     "version": "0.0.0",
     "dependencies": {
-        "jsx-gen": "0.0.0",
+        "@web-builder/jsx": "0.0.0",
         "preact": "^10.5.7"
     }
-}
+}
\ No newline at end of file
diff --git a/web-builder/yarn.lock b/web-builder/yarn.lock
index b55357f1..a11f5aea 100644
--- a/web-builder/yarn.lock
+++ b/web-builder/yarn.lock
@@ -2,29 +2,17 @@
 # yarn lockfile v1
 
 
-immutable@^4.0.0-rc.12:
-  version "4.0.0-rc.12"
-  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.0.0-rc.12.tgz#ca59a7e4c19ae8d9bf74a97bdf0f6e2f2a5d0217"
-  integrity sha512-0M2XxkZLx/mi3t8NVwIm1g8nHoEmM9p9UBl/G9k4+hm0kBgOVdMV/B3CY5dQ8qG8qc80NN4gDV4HQv6FTJ5q7A==
-
-preact-render-to-string@^5.1.12:
-  version "5.1.12"
-  resolved "https://registry.yarnpkg.com/preact-render-to-string/-/preact-render-to-string-5.1.12.tgz#3d258a177ef8947f768dd0f2c56629e7fda2dc39"
-  integrity sha512-nXVCOpvepSk9AfPwqS08rf9NDOCs8eeYYlG+7tE85iP5jVyjz+aYb1BYaP5SPdfVWVrzI9L5NzxozUvKaD96tA==
-  dependencies:
-    pretty-format "^3.8.0"
-
 preact@^10.5.7:
   version "10.5.7"
   resolved "https://registry.yarnpkg.com/preact/-/preact-10.5.7.tgz#f1d84725539e18f7ccbea937cf3db5895661dbd3"
   integrity sha512-4oEpz75t/0UNcwmcsjk+BIcDdk68oao+7kxcpc1hQPNs2Oo3ZL9xFz8UBf350mxk/VEdD41L5b4l2dE3Ug3RYg==
 
-pretty-format@^3.8.0:
-  version "3.8.0"
-  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-3.8.0.tgz#bfbed56d5e9a776645f4b1ff7aa1a3ac4fa3c385"
-  integrity sha1-v77VbV6ad2ZF9LH/eqGjrE+jw4U=
-
 typescript@^4.0.5:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.0.5.tgz#ae9dddfd1069f1cb5beb3ef3b2170dd7c1332389"
   integrity sha512-ywmr/VrTVCmNTJ6iV2LwIrfG1P+lv6luD8sUJs+2eI9NLGigaN+nUQc13iHqisq7bra9lnmUSYqbJvegraBOPQ==
+
+typescript@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.2.3.tgz#39062d8019912d43726298f09493d598048c1ce3"
+  integrity sha512-qOcYwxaByStAWrBf4x0fibwZvMRG+r4cQoTjbPtUlrWjBHbmCAww1i448U0GJ+3cNNEtebDteo/cHOR3xJ4wEw==

From f91baad8293b91c3e8d3526dc12de88fc1fc38fb Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Fri, 2 Apr 2021 01:35:10 +0900
Subject: [PATCH 10/73] add react reconciler reference

---
 web-builder/packages/coli            | 2 +-
 web-builder/packages/jsx/h/README.md | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/web-builder/packages/coli b/web-builder/packages/coli
index ce17e930..b19400d7 160000
--- a/web-builder/packages/coli
+++ b/web-builder/packages/coli
@@ -1 +1 @@
-Subproject commit ce17e930fef3e6aa990cffe90790890d2708f020
+Subproject commit b19400d70da7e0966dfc9a77a38c9a19431eb611
diff --git a/web-builder/packages/jsx/h/README.md b/web-builder/packages/jsx/h/README.md
index 15d49f82..d95076e7 100644
--- a/web-builder/packages/jsx/h/README.md
+++ b/web-builder/packages/jsx/h/README.md
@@ -7,3 +7,4 @@ ts requires h function for create element, which in this case, we are extracting
 - https://preactjs.com/guide/v8/api-reference/#-preact.h-/-preact.createelement-
 - https://github.com/alexmingoia/jsx-transform
 - https://babeljs.io/docs/en/babel-plugin-transform-react-jsx
+- https://www.npmjs.com/package/react-reconciler

From 9423acad0a1982bea14f944b51e1c4723767b5e0 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 13 Apr 2021 05:14:07 +0900
Subject: [PATCH 11/73] remove unused experiments

---
 web-builder/packages/jsx/test.tsx | 8 --------
 web-builder/vanilla/index.tsx     | 5 -----
 2 files changed, 13 deletions(-)
 delete mode 100644 web-builder/packages/jsx/test.tsx
 delete mode 100644 web-builder/vanilla/index.tsx

diff --git a/web-builder/packages/jsx/test.tsx b/web-builder/packages/jsx/test.tsx
deleted file mode 100644
index e0ccea7b..00000000
--- a/web-builder/packages/jsx/test.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-const h = "";
-
-function Builder() {
-  return "";
-}
-
-const A = <Builder></Builder>;
-console.log(A);
diff --git a/web-builder/vanilla/index.tsx b/web-builder/vanilla/index.tsx
deleted file mode 100644
index f41f3fea..00000000
--- a/web-builder/vanilla/index.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { jsxToString } from "jsx-gen"
-import * as preact from "preact"
-//@ts-ignore
-const jsx = jsxToString(<p></p>, {})
-console.log(jsx)
\ No newline at end of file

From b221588c2a9d6b7514b2a2953741d661c2c29a06 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Fri, 23 Apr 2021 22:56:07 +0900
Subject: [PATCH 12/73] update coli ver

---
 web-builder/packages/coli | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-builder/packages/coli b/web-builder/packages/coli
index b19400d7..b3a4b80d 160000
--- a/web-builder/packages/coli
+++ b/web-builder/packages/coli
@@ -1 +1 @@
-Subproject commit b19400d70da7e0966dfc9a77a38c9a19431eb611
+Subproject commit b3a4b80d47e7baf055a7c2689862da598d879bc1

From 34763b2ddc42661c946967db42d33893103ebecb Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 4 May 2021 23:11:45 +0900
Subject: [PATCH 13/73] rm coli module from web-builder - will use npm instead

---
 web-builder/.gitmodules   | 3 ---
 web-builder/packages/coli | 1 -
 2 files changed, 4 deletions(-)
 delete mode 100644 web-builder/.gitmodules
 delete mode 160000 web-builder/packages/coli

diff --git a/web-builder/.gitmodules b/web-builder/.gitmodules
deleted file mode 100644
index e45d8ada..00000000
--- a/web-builder/.gitmodules
+++ /dev/null
@@ -1,3 +0,0 @@
-[submodule "packages/coli"]
-	path = packages/coli
-	url = https://github.com/bridgedxyz/coli.git
diff --git a/web-builder/packages/coli b/web-builder/packages/coli
deleted file mode 160000
index b3a4b80d..00000000
--- a/web-builder/packages/coli
+++ /dev/null
@@ -1 +0,0 @@
-Subproject commit b3a4b80d47e7baf055a7c2689862da598d879bc1

From f8641bed7ca31e9e1593bd165b4336875bf3c408 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 4 May 2021 23:19:25 +0900
Subject: [PATCH 14/73] reorg project

---
 web-builder/README.md                          |  2 +-
 web-builder/{packages => }/css/README.md       |  0
 web-builder/{packages => }/css/index.ts        |  0
 web-builder/{packages => }/html/README.md      |  0
 web-builder/{packages => }/html/index.ts       |  0
 web-builder/{packages => }/jsx/README.md       |  0
 web-builder/{packages => }/jsx/h/README.md     |  0
 web-builder/{packages => }/jsx/h/index.ts      |  0
 web-builder/{packages => }/jsx/index.ts        |  0
 web-builder/{packages => }/jsx/package.json    |  0
 web-builder/{packages => }/jsx/tsconfig.json   |  0
 web-builder/package.json                       | 18 ++++++++++++------
 web-builder/{packages => }/styled/README.md    |  0
 web-builder/{packages => }/styled/index.ts     |  0
 web-builder/{packages => }/styled/package.json |  0
 web-builder/{packages => }/styles/.gitignore   |  0
 web-builder/{packages => }/styles/index.ts     |  0
 web-builder/web-builder/package.json           |  5 +++++
 18 files changed, 18 insertions(+), 7 deletions(-)
 rename web-builder/{packages => }/css/README.md (100%)
 rename web-builder/{packages => }/css/index.ts (100%)
 rename web-builder/{packages => }/html/README.md (100%)
 rename web-builder/{packages => }/html/index.ts (100%)
 rename web-builder/{packages => }/jsx/README.md (100%)
 rename web-builder/{packages => }/jsx/h/README.md (100%)
 rename web-builder/{packages => }/jsx/h/index.ts (100%)
 rename web-builder/{packages => }/jsx/index.ts (100%)
 rename web-builder/{packages => }/jsx/package.json (100%)
 rename web-builder/{packages => }/jsx/tsconfig.json (100%)
 rename web-builder/{packages => }/styled/README.md (100%)
 rename web-builder/{packages => }/styled/index.ts (100%)
 rename web-builder/{packages => }/styled/package.json (100%)
 rename web-builder/{packages => }/styles/.gitignore (100%)
 rename web-builder/{packages => }/styles/index.ts (100%)
 create mode 100644 web-builder/web-builder/package.json

diff --git a/web-builder/README.md b/web-builder/README.md
index 05f58aed..f65c1cba 100644
--- a/web-builder/README.md
+++ b/web-builder/README.md
@@ -7,7 +7,7 @@ jsx syntex tree builder for web applications. react, vue, svelte, etc..
 ## installation
 
 ```shell
-yarn add @bridged.xyz/web-builder
+yarn add @coli.codes/web-builder
 ```
 
 ## platforms
diff --git a/web-builder/packages/css/README.md b/web-builder/css/README.md
similarity index 100%
rename from web-builder/packages/css/README.md
rename to web-builder/css/README.md
diff --git a/web-builder/packages/css/index.ts b/web-builder/css/index.ts
similarity index 100%
rename from web-builder/packages/css/index.ts
rename to web-builder/css/index.ts
diff --git a/web-builder/packages/html/README.md b/web-builder/html/README.md
similarity index 100%
rename from web-builder/packages/html/README.md
rename to web-builder/html/README.md
diff --git a/web-builder/packages/html/index.ts b/web-builder/html/index.ts
similarity index 100%
rename from web-builder/packages/html/index.ts
rename to web-builder/html/index.ts
diff --git a/web-builder/packages/jsx/README.md b/web-builder/jsx/README.md
similarity index 100%
rename from web-builder/packages/jsx/README.md
rename to web-builder/jsx/README.md
diff --git a/web-builder/packages/jsx/h/README.md b/web-builder/jsx/h/README.md
similarity index 100%
rename from web-builder/packages/jsx/h/README.md
rename to web-builder/jsx/h/README.md
diff --git a/web-builder/packages/jsx/h/index.ts b/web-builder/jsx/h/index.ts
similarity index 100%
rename from web-builder/packages/jsx/h/index.ts
rename to web-builder/jsx/h/index.ts
diff --git a/web-builder/packages/jsx/index.ts b/web-builder/jsx/index.ts
similarity index 100%
rename from web-builder/packages/jsx/index.ts
rename to web-builder/jsx/index.ts
diff --git a/web-builder/packages/jsx/package.json b/web-builder/jsx/package.json
similarity index 100%
rename from web-builder/packages/jsx/package.json
rename to web-builder/jsx/package.json
diff --git a/web-builder/packages/jsx/tsconfig.json b/web-builder/jsx/tsconfig.json
similarity index 100%
rename from web-builder/packages/jsx/tsconfig.json
rename to web-builder/jsx/tsconfig.json
diff --git a/web-builder/package.json b/web-builder/package.json
index 4daf1bc3..2f3460ed 100644
--- a/web-builder/package.json
+++ b/web-builder/package.json
@@ -1,13 +1,19 @@
 {
-  "name": "@bridged.xyz/web-builder",
+  "name": "coli-web-builder",
   "version": "0.0.1",
   "description": "jsx syntex tree builder for web applications. react, vue, svelte, etc..",
   "workspaces": [
-    "packages/*",
-    "svelte",
+    "web-builder",
+    "css",
+    "html",
+    "jsx",
+    "preact",
     "react",
-    "vue",
-    "vanilla"
+    "styled",
+    "styles",
+    "svelte",
+    "vanilla",
+    "vue"
   ],
   "main": "index.js",
   "repository": "https://github.com/bridgedxyz/web-builder.git",
@@ -17,4 +23,4 @@
     "typescript": "^4.0.5"
   },
   "private": true
-}
+}
\ No newline at end of file
diff --git a/web-builder/packages/styled/README.md b/web-builder/styled/README.md
similarity index 100%
rename from web-builder/packages/styled/README.md
rename to web-builder/styled/README.md
diff --git a/web-builder/packages/styled/index.ts b/web-builder/styled/index.ts
similarity index 100%
rename from web-builder/packages/styled/index.ts
rename to web-builder/styled/index.ts
diff --git a/web-builder/packages/styled/package.json b/web-builder/styled/package.json
similarity index 100%
rename from web-builder/packages/styled/package.json
rename to web-builder/styled/package.json
diff --git a/web-builder/packages/styles/.gitignore b/web-builder/styles/.gitignore
similarity index 100%
rename from web-builder/packages/styles/.gitignore
rename to web-builder/styles/.gitignore
diff --git a/web-builder/packages/styles/index.ts b/web-builder/styles/index.ts
similarity index 100%
rename from web-builder/packages/styles/index.ts
rename to web-builder/styles/index.ts
diff --git a/web-builder/web-builder/package.json b/web-builder/web-builder/package.json
new file mode 100644
index 00000000..82ff95f8
--- /dev/null
+++ b/web-builder/web-builder/package.json
@@ -0,0 +1,5 @@
+{
+    "name": "@coli.codes/web-builder",
+    "version": "0.0.0",
+    "private": false
+}
\ No newline at end of file

From a8f568f2c1d47fa0bd1b54acc0dc370e9d5ad9d5 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 4 May 2021 23:29:20 +0900
Subject: [PATCH 15/73] org project

---
 web-builder/preact/REAMDME.md                | 7 +++++++
 web-builder/react/REAMDME.md                 | 7 +++++++
 web-builder/react/package.json               | 8 ++++++++
 web-builder/react/widgets/column/index.ts    | 1 +
 web-builder/react/widgets/container/index.ts | 1 +
 web-builder/react/widgets/index.ts           | 3 +++
 web-builder/react/widgets/row/index.ts       | 1 +
 web-builder/svelte/REAMDME.md                | 7 +++++++
 8 files changed, 35 insertions(+)
 create mode 100644 web-builder/preact/REAMDME.md
 create mode 100644 web-builder/react/REAMDME.md
 create mode 100644 web-builder/react/package.json
 create mode 100644 web-builder/react/widgets/column/index.ts
 create mode 100644 web-builder/react/widgets/container/index.ts
 create mode 100644 web-builder/react/widgets/index.ts
 create mode 100644 web-builder/react/widgets/row/index.ts
 create mode 100644 web-builder/svelte/REAMDME.md

diff --git a/web-builder/preact/REAMDME.md b/web-builder/preact/REAMDME.md
new file mode 100644
index 00000000..7f7f7513
--- /dev/null
+++ b/web-builder/preact/REAMDME.md
@@ -0,0 +1,7 @@
+# Preact builder built uppon Bridged's CoLI
+
+##
+
+```sh
+yarn add @coli.codes/preact-builder
+```
diff --git a/web-builder/react/REAMDME.md b/web-builder/react/REAMDME.md
new file mode 100644
index 00000000..d6d6beeb
--- /dev/null
+++ b/web-builder/react/REAMDME.md
@@ -0,0 +1,7 @@
+# React builder built uppon Bridged's CoLI
+
+##
+
+```sh
+yarn add @coli.codes/react-builder
+```
diff --git a/web-builder/react/package.json b/web-builder/react/package.json
new file mode 100644
index 00000000..1a06860f
--- /dev/null
+++ b/web-builder/react/package.json
@@ -0,0 +1,8 @@
+{
+    "name": "@coli.codes/react-builder",
+    "description": "Bridged's React code builder for development automation built uppon coli",
+    "version": "0.0.0",
+    "license": "Apache 2.0",
+    "homepage": "https://coli.codes/react",
+    "author": "Bridged Authors"
+}
\ No newline at end of file
diff --git a/web-builder/react/widgets/column/index.ts b/web-builder/react/widgets/column/index.ts
new file mode 100644
index 00000000..eb8515af
--- /dev/null
+++ b/web-builder/react/widgets/column/index.ts
@@ -0,0 +1 @@
+export class Column {}
diff --git a/web-builder/react/widgets/container/index.ts b/web-builder/react/widgets/container/index.ts
new file mode 100644
index 00000000..11e8a24c
--- /dev/null
+++ b/web-builder/react/widgets/container/index.ts
@@ -0,0 +1 @@
+export class Container {}
diff --git a/web-builder/react/widgets/index.ts b/web-builder/react/widgets/index.ts
new file mode 100644
index 00000000..6c8522e7
--- /dev/null
+++ b/web-builder/react/widgets/index.ts
@@ -0,0 +1,3 @@
+export * from "./column";
+export * from "./container";
+export * from "./row";
diff --git a/web-builder/react/widgets/row/index.ts b/web-builder/react/widgets/row/index.ts
new file mode 100644
index 00000000..bc98d88a
--- /dev/null
+++ b/web-builder/react/widgets/row/index.ts
@@ -0,0 +1 @@
+export class Row {}
diff --git a/web-builder/svelte/REAMDME.md b/web-builder/svelte/REAMDME.md
new file mode 100644
index 00000000..c9b2be3b
--- /dev/null
+++ b/web-builder/svelte/REAMDME.md
@@ -0,0 +1,7 @@
+# Svelte builder built uppon Bridged's CoLI
+
+##
+
+```sh
+yarn add @coli.codes/svelte-builder
+```

From 00e9a2b86e307d9071c79627cc52e472062bf327 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 4 May 2021 23:30:33 +0900
Subject: [PATCH 16/73] update dep

---
 web-builder/vanilla/package.json | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/web-builder/vanilla/package.json b/web-builder/vanilla/package.json
index 00553bc4..65920c5e 100644
--- a/web-builder/vanilla/package.json
+++ b/web-builder/vanilla/package.json
@@ -1,8 +1,5 @@
 {
     "name": "vanilla",
     "version": "0.0.0",
-    "dependencies": {
-        "@web-builder/jsx": "0.0.0",
-        "preact": "^10.5.7"
-    }
+    "dependencies": {}
 }
\ No newline at end of file

From db02dcf867b5db1feed7c6de55b4dcaae692d591 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 4 May 2021 23:41:12 +0900
Subject: [PATCH 17/73] rm unused packages

---
 web-builder/css/README.md  | 1 -
 web-builder/css/index.ts   | 0
 web-builder/html/README.md | 1 -
 web-builder/html/index.ts  | 0
 4 files changed, 2 deletions(-)
 delete mode 100644 web-builder/css/README.md
 delete mode 100644 web-builder/css/index.ts
 delete mode 100644 web-builder/html/README.md
 delete mode 100644 web-builder/html/index.ts

diff --git a/web-builder/css/README.md b/web-builder/css/README.md
deleted file mode 100644
index 6e4845de..00000000
--- a/web-builder/css/README.md
+++ /dev/null
@@ -1 +0,0 @@
-# Vanilla CSS Support for web
diff --git a/web-builder/css/index.ts b/web-builder/css/index.ts
deleted file mode 100644
index e69de29b..00000000
diff --git a/web-builder/html/README.md b/web-builder/html/README.md
deleted file mode 100644
index 25551913..00000000
--- a/web-builder/html/README.md
+++ /dev/null
@@ -1 +0,0 @@
-# Raw Html builder support
diff --git a/web-builder/html/index.ts b/web-builder/html/index.ts
deleted file mode 100644
index e69de29b..00000000

From 023da0e64780639ab324bf717ff282934b63f24d Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Wed, 5 May 2021 00:21:28 +0900
Subject: [PATCH 18/73] init react org

---
 web-builder/react/build-app/index.ts       | 5 +++++
 web-builder/react/widgets/_widget/index.ts | 1 +
 web-builder/react/widgets/button/index.ts  | 0
 web-builder/react/widgets/index.ts         | 1 +
 web-builder/react/widgets/input/index.ts   | 0
 web-builder/web-builder/index.ts           | 0
 6 files changed, 7 insertions(+)
 create mode 100644 web-builder/react/build-app/index.ts
 create mode 100644 web-builder/react/widgets/_widget/index.ts
 create mode 100644 web-builder/react/widgets/button/index.ts
 create mode 100644 web-builder/react/widgets/input/index.ts
 create mode 100644 web-builder/web-builder/index.ts

diff --git a/web-builder/react/build-app/index.ts b/web-builder/react/build-app/index.ts
new file mode 100644
index 00000000..4af86e75
--- /dev/null
+++ b/web-builder/react/build-app/index.ts
@@ -0,0 +1,5 @@
+import { Widget } from "../widgets";
+
+export function wrapCreateReactApp(rootApp: Widget, options: {}) {
+  throw "not implemented";
+}
diff --git a/web-builder/react/widgets/_widget/index.ts b/web-builder/react/widgets/_widget/index.ts
new file mode 100644
index 00000000..3d64637f
--- /dev/null
+++ b/web-builder/react/widgets/_widget/index.ts
@@ -0,0 +1 @@
+export class Widget {}
diff --git a/web-builder/react/widgets/button/index.ts b/web-builder/react/widgets/button/index.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/web-builder/react/widgets/index.ts b/web-builder/react/widgets/index.ts
index 6c8522e7..f70e1dd7 100644
--- a/web-builder/react/widgets/index.ts
+++ b/web-builder/react/widgets/index.ts
@@ -1,3 +1,4 @@
+export * from "./_widget";
 export * from "./column";
 export * from "./container";
 export * from "./row";
diff --git a/web-builder/react/widgets/input/index.ts b/web-builder/react/widgets/input/index.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/web-builder/web-builder/index.ts b/web-builder/web-builder/index.ts
new file mode 100644
index 00000000..e69de29b

From b09c44d65f90d713eded2a7ee5e5675b766c25f6 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Wed, 5 May 2021 23:00:45 +0900
Subject: [PATCH 19/73] add react feature docs

---
 web-builder/react/README.md    | 36 ++++++++++++++++++++++++++++++++++
 web-builder/react/REAMDME.md   |  7 -------
 web-builder/styles/flex.ts     |  4 ++++
 web-builder/styles/geomatry.ts |  0
 4 files changed, 40 insertions(+), 7 deletions(-)
 create mode 100644 web-builder/react/README.md
 delete mode 100644 web-builder/react/REAMDME.md
 create mode 100644 web-builder/styles/flex.ts
 create mode 100644 web-builder/styles/geomatry.ts

diff --git a/web-builder/react/README.md b/web-builder/react/README.md
new file mode 100644
index 00000000..6de00d41
--- /dev/null
+++ b/web-builder/react/README.md
@@ -0,0 +1,36 @@
+# React builder built uppon Bridged's CoLI
+
+## Installation
+
+```sh
+yarn add @coli.codes/react-builder
+```
+
+## Suopported code styles
+
+**Languages**
+
+- Typescript first
+- Also supports JS
+- Basic Language Features Powered by [CoLI](https://coli.codes) - What coli can do, works here as well.
+
+**Components**
+
+- Function Components
+- Class Components
+
+**React Api**
+
+- hooks
+  - useState
+  - useEffect
+- build your custom hooks with Hooks Builder
+
+**Styles**
+
+- css in jsx - `<div style={{color: "white"}}/>`
+- styled (emotion and styled-components) - `styled.div`
+- (Not recommanded) standard css & tsx(js/jsx) files - `.container {}, <div className="container"/>`
+  - nextJS's style separation
+- Reflect UI React components in the box
+  - Column, Row, Button, TextField and much more. - learn more at [reflect-ui.com](https://reflect-ui.com)
diff --git a/web-builder/react/REAMDME.md b/web-builder/react/REAMDME.md
deleted file mode 100644
index d6d6beeb..00000000
--- a/web-builder/react/REAMDME.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# React builder built uppon Bridged's CoLI
-
-##
-
-```sh
-yarn add @coli.codes/react-builder
-```
diff --git a/web-builder/styles/flex.ts b/web-builder/styles/flex.ts
new file mode 100644
index 00000000..353cd1fc
--- /dev/null
+++ b/web-builder/styles/flex.ts
@@ -0,0 +1,4 @@
+// import { coli } from "coli";
+export function buildFlexLayoutStyle() {
+  return;
+}
diff --git a/web-builder/styles/geomatry.ts b/web-builder/styles/geomatry.ts
new file mode 100644
index 00000000..e69de29b

From 0d0bb6bb9798ae1e824b368dfd5d80675c2680fb Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Wed, 5 May 2021 23:50:46 +0900
Subject: [PATCH 20/73] init react native builder

---
 web-builder/core/index.ts             | 0
 web-builder/core/package.json         | 4 ++++
 web-builder/core/widget-with-style.ts | 4 ++++
 web-builder/react-native/README.md    | 3 +++
 4 files changed, 11 insertions(+)
 create mode 100644 web-builder/core/index.ts
 create mode 100644 web-builder/core/package.json
 create mode 100644 web-builder/core/widget-with-style.ts
 create mode 100644 web-builder/react-native/README.md

diff --git a/web-builder/core/index.ts b/web-builder/core/index.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/web-builder/core/package.json b/web-builder/core/package.json
new file mode 100644
index 00000000..8da3545f
--- /dev/null
+++ b/web-builder/core/package.json
@@ -0,0 +1,4 @@
+{
+    "name": "@coli.codes/web-builder-core",
+    "version": "0.0.0"
+}
\ No newline at end of file
diff --git a/web-builder/core/widget-with-style.ts b/web-builder/core/widget-with-style.ts
new file mode 100644
index 00000000..ffd104aa
--- /dev/null
+++ b/web-builder/core/widget-with-style.ts
@@ -0,0 +1,4 @@
+/**
+ * Since html based framework's widget can be represented withou any style definition, this WidgetWithStyle class indicates, that the sub instance of this class will contain style data within it.
+ */
+export class WidgetWithStyle {}
diff --git a/web-builder/react-native/README.md b/web-builder/react-native/README.md
new file mode 100644
index 00000000..3e743386
--- /dev/null
+++ b/web-builder/react-native/README.md
@@ -0,0 +1,3 @@
+# React Native builder
+
+> This package is under this "coli-web-builder" repository since it follows the basic web standards and almost overlaps the react-builder's implementation

From cd1693e75dbc0d5caf411dc7befeb3083ce892f8 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Wed, 5 May 2021 23:53:27 +0900
Subject: [PATCH 21/73] update runner docs

---
 web-builder/react-native/README.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/web-builder/react-native/README.md b/web-builder/react-native/README.md
index 3e743386..9548b62d 100644
--- a/web-builder/react-native/README.md
+++ b/web-builder/react-native/README.md
@@ -1,3 +1,7 @@
 # React Native builder
 
 > This package is under this "coli-web-builder" repository since it follows the basic web standards and almost overlaps the react-builder's implementation
+
+## The runner
+
+> We haven't choose / implemented React Native Executor. The candidates are. [[`Expo`](https://github.com/expo/expo), [`react-native-web`](https://github.com/necolas/react-native-web)]

From 07d7afb9962e05db451b7049ae978bd6da75018a Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Wed, 5 May 2021 23:57:28 +0900
Subject: [PATCH 22/73] update rn runner docs

---
 web-builder/react-native/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-builder/react-native/README.md b/web-builder/react-native/README.md
index 9548b62d..7f555399 100644
--- a/web-builder/react-native/README.md
+++ b/web-builder/react-native/README.md
@@ -4,4 +4,4 @@
 
 ## The runner
 
-> We haven't choose / implemented React Native Executor. The candidates are. [[`Expo`](https://github.com/expo/expo), [`react-native-web`](https://github.com/necolas/react-native-web)]
+> We haven't choose / implemented React Native Executor. The candidates are. [[`Expo`](https://github.com/expo/expo), [`react-native-web`](https://github.com/necolas/react-native-web)]. Though, expo usees `react-native-web` under the hood. the reasonable choice might be react-native-web if we decide to build light-weight expo compat features ourselves for Bridged ecosystem compatibility.

From 14f56d91f07c08e477f04ed3f72ac6e4c1385194 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Thu, 6 May 2021 21:43:17 +0900
Subject: [PATCH 23/73] abstracting reflect react builder

---
 web-builder/core/widget-with-style.ts         |  9 ++++++-
 .../_widget/index.ts => core/widget.ts}       |  0
 web-builder/examples/index.ts                 |  0
 web-builder/examples/package.json             |  7 ++++++
 web-builder/examples/with-react/index.ts      |  9 +++++++
 web-builder/react/index.ts                    |  1 +
 web-builder/react/widgets/button/index.ts     | 11 +++++++++
 web-builder/react/widgets/index.ts            |  4 +++-
 web-builder/react/widgets/reflect.ts          | 16 +++++++++++++
 web-builder/react/widgets/row/index.ts        | 13 +++++++++-
 web-builder/react/widgets/widget.ts           |  6 +++++
 web-builder/reflect/imports/index.ts          | 24 +++++++++++++++++++
 web-builder/reflect/index.ts                  |  1 +
 web-builder/reflect/package.json              |  4 ++++
 14 files changed, 102 insertions(+), 3 deletions(-)
 rename web-builder/{react/widgets/_widget/index.ts => core/widget.ts} (100%)
 create mode 100644 web-builder/examples/index.ts
 create mode 100644 web-builder/examples/package.json
 create mode 100644 web-builder/examples/with-react/index.ts
 create mode 100644 web-builder/react/widgets/reflect.ts
 create mode 100644 web-builder/react/widgets/widget.ts
 create mode 100644 web-builder/reflect/imports/index.ts
 create mode 100644 web-builder/reflect/index.ts
 create mode 100644 web-builder/reflect/package.json

diff --git a/web-builder/core/widget-with-style.ts b/web-builder/core/widget-with-style.ts
index ffd104aa..c2a684ea 100644
--- a/web-builder/core/widget-with-style.ts
+++ b/web-builder/core/widget-with-style.ts
@@ -1,4 +1,11 @@
+import { Widget } from "./widget";
+import { css, JSXElementLike } from "coli";
+
 /**
  * Since html based framework's widget can be represented withou any style definition, this WidgetWithStyle class indicates, that the sub instance of this class will contain style data within it.
  */
-export class WidgetWithStyle {}
+export abstract class WidgetWithStyle extends Widget {
+  abstract buildStyle(): css.CSSStyleDeclaration;
+
+  abstract buildJsx(): JSXElementLike;
+}
diff --git a/web-builder/react/widgets/_widget/index.ts b/web-builder/core/widget.ts
similarity index 100%
rename from web-builder/react/widgets/_widget/index.ts
rename to web-builder/core/widget.ts
diff --git a/web-builder/examples/index.ts b/web-builder/examples/index.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/web-builder/examples/package.json b/web-builder/examples/package.json
new file mode 100644
index 00000000..266b4ed2
--- /dev/null
+++ b/web-builder/examples/package.json
@@ -0,0 +1,7 @@
+{
+    "name": "coli-web-builder-examples",
+    "version": "0.0.0",
+    "dependencies": {
+        "@coli.codes/web-builder": "0.0.0"
+    }
+}
\ No newline at end of file
diff --git a/web-builder/examples/with-react/index.ts b/web-builder/examples/with-react/index.ts
new file mode 100644
index 00000000..fe52ff4b
--- /dev/null
+++ b/web-builder/examples/with-react/index.ts
@@ -0,0 +1,9 @@
+import { Row } from "@coli.codes/react-builder";
+
+function example() {
+  const row = new Row();
+}
+
+if (typeof require !== "undefined" && require.main === module) {
+  example();
+}
diff --git a/web-builder/react/index.ts b/web-builder/react/index.ts
index e69de29b..59edd1c8 100644
--- a/web-builder/react/index.ts
+++ b/web-builder/react/index.ts
@@ -0,0 +1 @@
+export * from "./widgets";
diff --git a/web-builder/react/widgets/button/index.ts b/web-builder/react/widgets/button/index.ts
index e69de29b..660ef8c5 100644
--- a/web-builder/react/widgets/button/index.ts
+++ b/web-builder/react/widgets/button/index.ts
@@ -0,0 +1,11 @@
+import { ReflectReactWidget } from "../reflect";
+import { BUTTON_IMPORT } from "@coli.codes/reflect-web-builder";
+import { CSSStyleDeclaration } from "coli/lib/languages/css";
+export class ReflectButton extends ReflectReactWidget {
+  readonly imports: string = BUTTON_IMPORT.named;
+  readonly tag: string = BUTTON_IMPORT.name;
+
+  buildStyle(): CSSStyleDeclaration {
+    throw new Error("Method not implemented.");
+  }
+}
diff --git a/web-builder/react/widgets/index.ts b/web-builder/react/widgets/index.ts
index f70e1dd7..728c4661 100644
--- a/web-builder/react/widgets/index.ts
+++ b/web-builder/react/widgets/index.ts
@@ -1,4 +1,6 @@
-export * from "./_widget";
 export * from "./column";
 export * from "./container";
 export * from "./row";
+
+// export core widget
+export * from "@coli.codes/web-builder-core/widget";
diff --git a/web-builder/react/widgets/reflect.ts b/web-builder/react/widgets/reflect.ts
new file mode 100644
index 00000000..c8681ba8
--- /dev/null
+++ b/web-builder/react/widgets/reflect.ts
@@ -0,0 +1,16 @@
+import { ReactWidget } from "./widget";
+import { ImportDeclaration, Import, JSX, JSXElementLike } from "coli";
+
+export abstract class ReflectReactWidget extends ReactWidget {
+  readonly _type: string;
+  readonly imports: string;
+  readonly tag: string;
+
+  buildImportDeclaration(): ImportDeclaration {
+    return new Import().import(this.imports).from("@reflect-ui/react").make();
+  }
+
+  buildJsx(): JSXElementLike {
+    return JSX.tag(this.tag).__finalize();
+  }
+}
diff --git a/web-builder/react/widgets/row/index.ts b/web-builder/react/widgets/row/index.ts
index bc98d88a..71b16bcf 100644
--- a/web-builder/react/widgets/row/index.ts
+++ b/web-builder/react/widgets/row/index.ts
@@ -1 +1,12 @@
-export class Row {}
+import { JSXElement } from "coli";
+import { CSSStyleDeclaration } from "coli/lib/languages/css";
+import { ReactWidget } from "../widget";
+
+export class Row extends ReactWidget {
+  buildStyle(): CSSStyleDeclaration {
+    throw new Error("Method not implemented.");
+  }
+  buildJsx(): JSXElement {
+    throw new Error("Method not implemented.");
+  }
+}
diff --git a/web-builder/react/widgets/widget.ts b/web-builder/react/widgets/widget.ts
new file mode 100644
index 00000000..d8f79a67
--- /dev/null
+++ b/web-builder/react/widgets/widget.ts
@@ -0,0 +1,6 @@
+import { WidgetWithStyle } from "@coli.codes/web-builder-core/widget-with-style";
+
+/**
+ * React Widget that requires no additional custom import rather than react
+ */
+export abstract class ReactWidget extends WidgetWithStyle {}
diff --git a/web-builder/reflect/imports/index.ts b/web-builder/reflect/imports/index.ts
new file mode 100644
index 00000000..d9ad7e9c
--- /dev/null
+++ b/web-builder/reflect/imports/index.ts
@@ -0,0 +1,24 @@
+///
+/// this file holds the web-builder supported reflect-ui universal web platform components import path definition.
+///
+
+/**
+ * import { Button } from "@reflect-ui/\<platform\>/`.`"
+ */
+const IMPORT_BUTTON_NAMED = ".";
+
+/**
+ * import { Button } from "@reflect-ui/\<platform\>/`button`"
+ */
+const IMPORT_BUTTON_DEFAULT = "/button";
+
+/**
+ * import { `Button` } from "@reflect-ui/<platform>"
+ */
+const IMPORT_BUTTON_NAME = "Button";
+
+export const BUTTON_IMPORT = {
+  name: IMPORT_BUTTON_NAME,
+  named: IMPORT_BUTTON_NAMED,
+  default: IMPORT_BUTTON_DEFAULT,
+};
diff --git a/web-builder/reflect/index.ts b/web-builder/reflect/index.ts
new file mode 100644
index 00000000..4d6429b6
--- /dev/null
+++ b/web-builder/reflect/index.ts
@@ -0,0 +1 @@
+export * from "./imports";
diff --git a/web-builder/reflect/package.json b/web-builder/reflect/package.json
new file mode 100644
index 00000000..7eee8537
--- /dev/null
+++ b/web-builder/reflect/package.json
@@ -0,0 +1,4 @@
+{
+    "name": "@coli.codes/reflect-web-builder",
+    "version": "0.0.0"
+}
\ No newline at end of file

From 472063444ea9d2c765c01246dff3a503a67f6fb8 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sat, 8 May 2021 21:47:42 +0900
Subject: [PATCH 24/73] MultiChildWidget added

---
 web-builder/core/widget-with-style.ts     | 14 +++++++++++++-
 web-builder/core/widget.ts                | 11 ++++++++++-
 web-builder/react/widgets/column/index.ts | 16 +++++++++++++++-
 web-builder/react/widgets/index.ts        |  2 ++
 web-builder/react/widgets/row/index.ts    |  4 ++--
 web-builder/react/widgets/widget.ts       | 11 ++++++++++-
 6 files changed, 52 insertions(+), 6 deletions(-)

diff --git a/web-builder/core/widget-with-style.ts b/web-builder/core/widget-with-style.ts
index c2a684ea..023a2b85 100644
--- a/web-builder/core/widget-with-style.ts
+++ b/web-builder/core/widget-with-style.ts
@@ -1,4 +1,4 @@
-import { Widget } from "./widget";
+import { Widget, MultiChildWidget } from "./widget";
 import { css, JSXElementLike } from "coli";
 
 /**
@@ -9,3 +9,15 @@ export abstract class WidgetWithStyle extends Widget {
 
   abstract buildJsx(): JSXElementLike;
 }
+
+/**
+ * Since html based framework's widget can be represented withou any style definition, this WidgetWithStyle class indicates, that the sub instance of this class will contain style data within it.
+ */
+export abstract class MultiChildWidgetWithStyle extends MultiChildWidget {
+  constructor() {
+    super();
+  }
+  abstract buildStyle(): css.CSSStyleDeclaration;
+
+  abstract buildJsx(): JSXElementLike;
+}
diff --git a/web-builder/core/widget.ts b/web-builder/core/widget.ts
index 3d64637f..79343c0f 100644
--- a/web-builder/core/widget.ts
+++ b/web-builder/core/widget.ts
@@ -1 +1,10 @@
-export class Widget {}
+export class Widget {
+  constructor() {}
+}
+
+export class MultiChildWidget extends Widget {
+  constructor() {
+    super();
+  }
+  children: Widget[];
+}
diff --git a/web-builder/react/widgets/column/index.ts b/web-builder/react/widgets/column/index.ts
index eb8515af..0d09c4ca 100644
--- a/web-builder/react/widgets/column/index.ts
+++ b/web-builder/react/widgets/column/index.ts
@@ -1 +1,15 @@
-export class Column {}
+import { JSXElementLike } from "coli";
+import { CSSStyleDeclaration } from "coli/lib/languages/css";
+import { ReactMultiChildWidget } from "../widget";
+
+export class Column extends ReactMultiChildWidget {
+  constructor() {
+    super();
+  }
+  buildStyle(): CSSStyleDeclaration {
+    throw new Error("Method not implemented.");
+  }
+  buildJsx(): JSXElementLike {
+    throw new Error("Method not implemented.");
+  }
+}
diff --git a/web-builder/react/widgets/index.ts b/web-builder/react/widgets/index.ts
index 728c4661..ca35ab91 100644
--- a/web-builder/react/widgets/index.ts
+++ b/web-builder/react/widgets/index.ts
@@ -2,5 +2,7 @@ export * from "./column";
 export * from "./container";
 export * from "./row";
 
+export * from "./widget";
+
 // export core widget
 export * from "@coli.codes/web-builder-core/widget";
diff --git a/web-builder/react/widgets/row/index.ts b/web-builder/react/widgets/row/index.ts
index 71b16bcf..5998edc9 100644
--- a/web-builder/react/widgets/row/index.ts
+++ b/web-builder/react/widgets/row/index.ts
@@ -1,8 +1,8 @@
 import { JSXElement } from "coli";
 import { CSSStyleDeclaration } from "coli/lib/languages/css";
-import { ReactWidget } from "../widget";
+import { ReactMultiChildWidget } from "../widget";
 
-export class Row extends ReactWidget {
+export class Row extends ReactMultiChildWidget {
   buildStyle(): CSSStyleDeclaration {
     throw new Error("Method not implemented.");
   }
diff --git a/web-builder/react/widgets/widget.ts b/web-builder/react/widgets/widget.ts
index d8f79a67..5d98468d 100644
--- a/web-builder/react/widgets/widget.ts
+++ b/web-builder/react/widgets/widget.ts
@@ -1,6 +1,15 @@
-import { WidgetWithStyle } from "@coli.codes/web-builder-core/widget-with-style";
+import {
+  WidgetWithStyle,
+  MultiChildWidgetWithStyle,
+} from "@coli.codes/web-builder-core/widget-with-style";
 
 /**
  * React Widget that requires no additional custom import rather than react
  */
 export abstract class ReactWidget extends WidgetWithStyle {}
+
+export abstract class ReactMultiChildWidget extends MultiChildWidgetWithStyle {
+  constructor() {
+    super();
+  }
+}

From 1836c438aee04056b67c9af30b43ac6dbd7fe3c9 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sun, 9 May 2021 19:14:00 +0900
Subject: [PATCH 25/73] wip - add package.json builder with template

---
 web-builder/nodejs/builders/package.json.builder.ts       | 1 +
 web-builder/nodejs/package/dependency.ts                  | 8 ++++++++
 web-builder/nodejs/package/version.ts                     | 1 +
 .../nodejs/templates/create-react-app-typescript/index.ts | 4 ++++
 web-builder/nodejs/templates/index.ts                     | 0
 5 files changed, 14 insertions(+)
 create mode 100644 web-builder/nodejs/builders/package.json.builder.ts
 create mode 100644 web-builder/nodejs/package/dependency.ts
 create mode 100644 web-builder/nodejs/package/version.ts
 create mode 100644 web-builder/nodejs/templates/create-react-app-typescript/index.ts
 create mode 100644 web-builder/nodejs/templates/index.ts

diff --git a/web-builder/nodejs/builders/package.json.builder.ts b/web-builder/nodejs/builders/package.json.builder.ts
new file mode 100644
index 00000000..5fb22c76
--- /dev/null
+++ b/web-builder/nodejs/builders/package.json.builder.ts
@@ -0,0 +1 @@
+export function buildPackageJson() {}
diff --git a/web-builder/nodejs/package/dependency.ts b/web-builder/nodejs/package/dependency.ts
new file mode 100644
index 00000000..7c5156c0
--- /dev/null
+++ b/web-builder/nodejs/package/dependency.ts
@@ -0,0 +1,8 @@
+import { Version } from "./version";
+
+export interface SingleDependency {
+  dependency: string;
+  version: Version;
+}
+
+// export interface
diff --git a/web-builder/nodejs/package/version.ts b/web-builder/nodejs/package/version.ts
new file mode 100644
index 00000000..8ad237c4
--- /dev/null
+++ b/web-builder/nodejs/package/version.ts
@@ -0,0 +1 @@
+export type Version = string | "latest";
diff --git a/web-builder/nodejs/templates/create-react-app-typescript/index.ts b/web-builder/nodejs/templates/create-react-app-typescript/index.ts
new file mode 100644
index 00000000..fbb2c90b
--- /dev/null
+++ b/web-builder/nodejs/templates/create-react-app-typescript/index.ts
@@ -0,0 +1,4 @@
+const Dependency = {
+  react: "latest",
+  "react-dom": "latest",
+};
diff --git a/web-builder/nodejs/templates/index.ts b/web-builder/nodejs/templates/index.ts
new file mode 100644
index 00000000..e69de29b

From e3636fd644becdd1bbc4f513475365852c56d338 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Mon, 10 May 2021 07:50:24 +0900
Subject: [PATCH 26/73] add package.json realated builders (wip) and standard
 libraries for nodejs with templates

---
 web-builder/core/index.ts                     |   2 +
 web-builder/core/widget-with-style.ts         |  13 +-
 web-builder/nodejs/README.md                  |   5 +
 .../nodejs/builders/package.json.builder.ts   |   1 -
 web-builder/nodejs/index.ts                   |   6 +
 web-builder/nodejs/package.json               |   6 +
 web-builder/nodejs/package/dependency.ts      |  17 +-
 web-builder/nodejs/package/index.ts           |   3 +
 web-builder/nodejs/package/manifest.ts        |  74 ++++++
 web-builder/nodejs/package/version.ts         |  19 +-
 web-builder/nodejs/stdlib/README.md           |  51 ++++
 web-builder/nodejs/stdlib/index.ts            | 239 ++++++++++++++++++
 .../create-react-app-typescript/index.ts      |  38 ++-
 web-builder/nodejs/templates/index.ts         |   1 +
 web-builder/nodejs/yarn.lock                  |  22 ++
 web-builder/react/build-app/index.ts          |   7 +-
 web-builder/react/export/index.ts             |   1 +
 .../react/export/stringfy/css-in-jsx.ts       |   1 +
 web-builder/react/export/stringfy/index.ts    |   2 +
 .../react/export/stringfy/styled-component.ts |  21 ++
 web-builder/react/index.ts                    |   1 +
 web-builder/react/widgets/column/index.ts     |   4 +-
 web-builder/react/widgets/container/index.ts  |  13 +-
 23 files changed, 532 insertions(+), 15 deletions(-)
 create mode 100644 web-builder/nodejs/README.md
 delete mode 100644 web-builder/nodejs/builders/package.json.builder.ts
 create mode 100644 web-builder/nodejs/index.ts
 create mode 100644 web-builder/nodejs/package.json
 create mode 100644 web-builder/nodejs/package/index.ts
 create mode 100644 web-builder/nodejs/package/manifest.ts
 create mode 100644 web-builder/nodejs/stdlib/README.md
 create mode 100644 web-builder/nodejs/stdlib/index.ts
 create mode 100644 web-builder/nodejs/yarn.lock
 create mode 100644 web-builder/react/export/index.ts
 create mode 100644 web-builder/react/export/stringfy/css-in-jsx.ts
 create mode 100644 web-builder/react/export/stringfy/index.ts
 create mode 100644 web-builder/react/export/stringfy/styled-component.ts

diff --git a/web-builder/core/index.ts b/web-builder/core/index.ts
index e69de29b..38653fe9 100644
--- a/web-builder/core/index.ts
+++ b/web-builder/core/index.ts
@@ -0,0 +1,2 @@
+export * from "./widget";
+export * from "./widget-with-style";
diff --git a/web-builder/core/widget-with-style.ts b/web-builder/core/widget-with-style.ts
index 023a2b85..3d09733e 100644
--- a/web-builder/core/widget-with-style.ts
+++ b/web-builder/core/widget-with-style.ts
@@ -1,10 +1,17 @@
 import { Widget, MultiChildWidget } from "./widget";
 import { css, JSXElementLike } from "coli";
 
+export interface IWidgetWithStyle {
+  buildStyle(): css.CSSStyleDeclaration;
+  buildJsx(): JSXElementLike;
+}
+
 /**
  * Since html based framework's widget can be represented withou any style definition, this WidgetWithStyle class indicates, that the sub instance of this class will contain style data within it.
  */
-export abstract class WidgetWithStyle extends Widget {
+export abstract class WidgetWithStyle
+  extends Widget
+  implements IWidgetWithStyle {
   abstract buildStyle(): css.CSSStyleDeclaration;
 
   abstract buildJsx(): JSXElementLike;
@@ -13,7 +20,9 @@ export abstract class WidgetWithStyle extends Widget {
 /**
  * Since html based framework's widget can be represented withou any style definition, this WidgetWithStyle class indicates, that the sub instance of this class will contain style data within it.
  */
-export abstract class MultiChildWidgetWithStyle extends MultiChildWidget {
+export abstract class MultiChildWidgetWithStyle
+  extends MultiChildWidget
+  implements IWidgetWithStyle {
   constructor() {
     super();
   }
diff --git a/web-builder/nodejs/README.md b/web-builder/nodejs/README.md
new file mode 100644
index 00000000..6200f4bb
--- /dev/null
+++ b/web-builder/nodejs/README.md
@@ -0,0 +1,5 @@
+# NodeJS Related definitions and project packager - A Package.json builder
+
+## A CoLI Project
+
+This is part of CoLI Project and coli-web-builder project, for manifesting the auto genrated projects for nodejs.
diff --git a/web-builder/nodejs/builders/package.json.builder.ts b/web-builder/nodejs/builders/package.json.builder.ts
deleted file mode 100644
index 5fb22c76..00000000
--- a/web-builder/nodejs/builders/package.json.builder.ts
+++ /dev/null
@@ -1 +0,0 @@
-export function buildPackageJson() {}
diff --git a/web-builder/nodejs/index.ts b/web-builder/nodejs/index.ts
new file mode 100644
index 00000000..68d10d3e
--- /dev/null
+++ b/web-builder/nodejs/index.ts
@@ -0,0 +1,6 @@
+// the name "package" is reserved. using "packages" with "s" instead.
+export * as packages from "./package";
+export * as templates from "./templates";
+
+// no-repacking - already packed inside. export "standard_libraries"
+export * from "./stdlib";
diff --git a/web-builder/nodejs/package.json b/web-builder/nodejs/package.json
new file mode 100644
index 00000000..4c2541b0
--- /dev/null
+++ b/web-builder/nodejs/package.json
@@ -0,0 +1,6 @@
+{
+    "name": "@coli.codes/nodejs-builder",
+    "dependencies": {
+        "semver": "^7.3.5"
+    }
+}
diff --git a/web-builder/nodejs/package/dependency.ts b/web-builder/nodejs/package/dependency.ts
index 7c5156c0..4b57afd7 100644
--- a/web-builder/nodejs/package/dependency.ts
+++ b/web-builder/nodejs/package/dependency.ts
@@ -1,8 +1,19 @@
-import { Version } from "./version";
+import { TVersion } from "./version";
+
+/**
+ * dependencies structure
+ * ```
+ * dependencies: {
+ *    "a": "latest",
+ *    "b": "latest"
+ * }
+ * ```
+ */
+export type Dependencies = { [key: string]: TVersion };
 
 export interface SingleDependency {
-  dependency: string;
-  version: Version;
+  name: string;
+  version: TVersion;
 }
 
 // export interface
diff --git a/web-builder/nodejs/package/index.ts b/web-builder/nodejs/package/index.ts
new file mode 100644
index 00000000..c9713518
--- /dev/null
+++ b/web-builder/nodejs/package/index.ts
@@ -0,0 +1,3 @@
+export * from "./dependency";
+export * from "./manifest";
+export * from "./version";
diff --git a/web-builder/nodejs/package/manifest.ts b/web-builder/nodejs/package/manifest.ts
new file mode 100644
index 00000000..6199f1cd
--- /dev/null
+++ b/web-builder/nodejs/package/manifest.ts
@@ -0,0 +1,74 @@
+///
+/// Consider this to refactor with coli inherit object
+///
+
+import { TVersion } from "./version";
+import { SingleDependency, Dependencies } from "./dependency";
+
+export interface IPackageManifest {
+  name: string;
+  version: string;
+}
+
+/**
+ * A simple minified version of package.json builder.
+ */
+export class PackageManifest implements IPackageManifest {
+  readonly name: string;
+  readonly description: string;
+  readonly version: TVersion;
+  main: string;
+  dependencies: Dependencies = {};
+  devDependencies: Dependencies = {};
+
+  constructor(params: {
+    name: string;
+    description?: string;
+    version?: TVersion;
+    main?: string;
+    dependencies?: Dependencies;
+    devDependencies: Dependencies;
+  }) {
+    this.name = params.name;
+    this.description = params.description;
+    this.version = params.version;
+    this.main = params.main;
+    this.dependencies = params.dependencies;
+    this.devDependencies = params.devDependencies;
+  }
+
+  /**
+   * set the `main` property of package.json
+   * @param main
+   */
+  setMain(main: string): this {
+    this.main = main;
+    return this;
+  }
+
+  /**
+   * add new single dependency to existing one.
+   * @param dependency
+   * @returns
+   */
+  addDependency(dependency: SingleDependency): this {
+    const exsisting = this.dependencies[dependency.name];
+    if (exsisting) {
+      throw `can not add already exsiting dependency "${dependency.name}" with version "${dependency.version}"`;
+    } else {
+      // add to dependency tree
+      this.dependencies[dependency.name] = dependency.version;
+    }
+    return this;
+  }
+
+  addDevDependency(dDependency: SingleDependency): this {
+    // no confliction checking for dev deps (will add later if required. not a big a deal)
+    this.devDependencies[dDependency.name] = dDependency.version;
+    return this;
+  }
+
+  stringfy(): string {
+    return JSON.stringify(this, null, 2);
+  }
+}
diff --git a/web-builder/nodejs/package/version.ts b/web-builder/nodejs/package/version.ts
index 8ad237c4..c562b5e0 100644
--- a/web-builder/nodejs/package/version.ts
+++ b/web-builder/nodejs/package/version.ts
@@ -1 +1,18 @@
-export type Version = string | "latest";
+import * as semver from "semver";
+import * as assert from "assert";
+
+export type TVersion = string | "latest";
+
+/**
+ * A simple version instance with semver validation.
+ */
+export class Version {
+  readonly version: TVersion;
+  constructor(version: string) {
+    /**
+     * validate if givven version is in a valid semver format. if null is returned, than it aint' valid.
+     * learn more at https://github.com/npm/node-semver
+     */
+    assert(semver.valid(version));
+  }
+}
diff --git a/web-builder/nodejs/stdlib/README.md b/web-builder/nodejs/stdlib/README.md
new file mode 100644
index 00000000..298d56d5
--- /dev/null
+++ b/web-builder/nodejs/stdlib/README.md
@@ -0,0 +1,51 @@
+# Standard supported library for NodeJS by Bridged.
+
+## Core
+
+- typescript
+
+## Foundation UI Frameworks
+
+**Vue**
+
+- vue
+
+**[React](https://reactjs.org)**
+
+- react
+- react-dom
+- react-scripts
+- next (nextjs)
+
+**Svelte**
+
+- svelte
+
+## React Library
+
+- styled-components
+- @emotion/css
+- @emotion/react
+- @emotion/styled
+
+## React UI Library
+
+- @material-ui/core
+- @material-ui/icons
+- @material-ui/styles
+
+## Core Utilities
+
+- lodash
+
+## Foundation Backend Frameworks
+
+- express
+
+**[Prisma](https://prisma.io)**
+
+- prisma
+
+**[NestJS](https://nestjs.com)**
+
+- nestjs
diff --git a/web-builder/nodejs/stdlib/index.ts b/web-builder/nodejs/stdlib/index.ts
new file mode 100644
index 00000000..9da9e073
--- /dev/null
+++ b/web-builder/nodejs/stdlib/index.ts
@@ -0,0 +1,239 @@
+/**
+ *  e.g.
+ * ```
+ * const TYPESCRIPT: StandardLibraryManifest = {
+    id: "typescript",
+    name: "typescript",
+    version: "4.2.4",
+    website: "https://www.typescriptlang.org",
+};
+ * ```
+ */
+export interface StandardLibraryManifest {
+  id: string;
+  name: string;
+  version: string;
+  website: string;
+}
+
+/**
+ * last-update: May 2021
+ * https://www.npmjs.com/package/typescript
+ */
+const TYPESCRIPT: StandardLibraryManifest = {
+  id: "typescript",
+  name: "typescript",
+  version: "4.2.4",
+  website: "https://www.typescriptlang.org",
+};
+
+///
+/// region react (stand-alone)
+///
+
+/**
+ * last-update: May 2021
+ * https://www.npmjs.com/package/@types/react
+ */
+const T_REACT: StandardLibraryManifest = {
+  id: "@types/react",
+  name: "@types/react",
+  version: "17.0.5",
+  website: "https://reactjs.org",
+};
+
+/**
+ * last-update: May 2021
+ * https://www.npmjs.com/package/@types/react-dom
+ */
+const T_REACT_DOM: StandardLibraryManifest = {
+  id: "@types/react-dom",
+  name: "@types/react-dom",
+  version: "17.0.3",
+  website: "https://reactjs.org",
+};
+
+/**
+ * last-update: May 2021
+ * https://www.npmjs.com/package/react
+ */
+const REACT: StandardLibraryManifest = {
+  id: "react",
+  name: "react",
+  version: "17.0.2",
+  website: "https://reactjs.org",
+};
+
+/**
+ * last-update: May 2021
+ * https://www.npmjs.com/package/react-dom
+ */
+const REACT_DOM: StandardLibraryManifest = {
+  id: "react-dom",
+  name: "react-dom",
+  version: "17.0.2",
+  website: "https://reactjs.org",
+};
+
+/**
+ * last-update: May 2021
+ * https://www.npmjs.com/package/react-scripts
+ */
+const REACT_SCRIPTS: StandardLibraryManifest = {
+  id: "react-scripts",
+  name: "react-scripts",
+  version: "4.0.3",
+  website: "",
+};
+
+///
+/// endregion react (stand-alone)
+///
+
+///
+/// region emotion
+///
+
+/**
+ * last-update: May 2021
+ * https://www.npmjs.com/package/@emotion/css
+ */
+const EMOTION_CSS: StandardLibraryManifest = {
+  id: "@emotion/css",
+  name: "@emotion/css",
+  version: "11.1.3",
+  website: "https://emotion.sh",
+};
+
+/**
+ * last-update: May 2021
+ * https://www.npmjs.com/package/@emotion/core
+ */
+const EMOTION_CORE: StandardLibraryManifest = {
+  id: "@emotion/core",
+  name: "@emotion/core",
+  version: "11.0.0",
+  website: "https://emotion.sh",
+};
+
+/**
+ * last-update: May 2021
+ * https://www.npmjs.com/package/@emotion/react
+ */
+const EMOTION_REACT: StandardLibraryManifest = {
+  id: "@emotion/react",
+  name: "@emotion/react",
+  version: "11.4.0",
+  website: "https://emotion.sh",
+};
+
+/**
+ * last-update: May 2021
+ * https://www.npmjs.com/package/@emotion/styled
+ */
+const EMOTION_STYLED: StandardLibraryManifest = {
+  id: "@emotion/styled",
+  name: "@emotion/styled",
+  version: "11.3.0",
+  website: "https://emotion.sh",
+};
+
+///
+/// endregion emotion
+///
+
+///
+/// region styled-components (react)
+///
+/**
+ * last-update: May 2021
+ * https://www.npmjs.com/package/styled-components
+ */
+const STYLED_COMPONENTS: StandardLibraryManifest = {
+  id: "styled-components",
+  name: "styled-components",
+  version: "5.3.0",
+  website: "https://styled-components.com",
+};
+
+/**
+ * last-update: May 2021
+ * https://www.npmjs.com/package/@types/styled-components
+ */
+const T_STYLED_COMPONENTS = {
+  id: "@types/styled-components",
+  name: "@types/styled-components",
+  version: "5.1.9",
+  website: "https://styled-components.com",
+};
+///
+/// endregion styled-components (react)
+///
+
+///
+/// region material-ui (react)
+///
+
+/**
+ * last-update: May 2021
+ * https://www.npmjs.com/package/@material-ui/core
+ */
+const MATERIAL_UI_CORE: StandardLibraryManifest = {
+  id: "@material-ui/core",
+  name: "@material-ui/core",
+  version: "4.11.4",
+  website: "https://material-ui.com",
+};
+
+/**
+ * last-update: May 2021
+ * https://www.npmjs.com/package/@material-ui/icons
+ */
+const MATERIAL_UI_ICONS: StandardLibraryManifest = {
+  id: "@material-ui/core",
+  name: "@material-ui/core",
+  version: "4.11.2",
+  website: "https://material-ui.com",
+};
+
+/**
+ * last-update: May 2021
+ * https://www.npmjs.com/package/@material-ui/styles
+ */
+const MATERIAL_UI_STYLES: StandardLibraryManifest = {
+  id: "@material-ui/styles",
+  name: "@material-ui/styles",
+  version: "4.11.4",
+  website: "https://material-ui.com",
+};
+
+///
+/// endregion material-ui (react)
+///
+
+export const standard_libraries: { [key: string]: StandardLibraryManifest } = {
+  // ts
+  typescript: TYPESCRIPT,
+
+  // react
+  react: REACT,
+  types_react: T_REACT,
+  react_dom: REACT_DOM,
+  types_react_dom: T_REACT_DOM,
+  react_scripts: REACT_SCRIPTS,
+
+  // emotion
+  emotion_css: EMOTION_CSS,
+  emotion_core: EMOTION_CORE,
+  emotion_styled: EMOTION_STYLED,
+  emotion_react: EMOTION_REACT,
+
+  // styled-components
+  styled_components: STYLED_COMPONENTS,
+  types_styled_components: T_STYLED_COMPONENTS,
+
+  // material-ui (react)
+  material_ui_core: MATERIAL_UI_CORE,
+  material_ui_icons: MATERIAL_UI_ICONS,
+  material_ui_styles: MATERIAL_UI_STYLES,
+};
diff --git a/web-builder/nodejs/templates/create-react-app-typescript/index.ts b/web-builder/nodejs/templates/create-react-app-typescript/index.ts
index fbb2c90b..d4535520 100644
--- a/web-builder/nodejs/templates/create-react-app-typescript/index.ts
+++ b/web-builder/nodejs/templates/create-react-app-typescript/index.ts
@@ -1,4 +1,34 @@
-const Dependency = {
-  react: "latest",
-  "react-dom": "latest",
-};
+export const CRA_TYPESCRIPT_PACKAGE_PRESET = `
+{
+  "name": "react-typescript",
+  "version": "0.0.0",
+  "description": "Bridged React Typescript Preset",
+  "keywords": [
+    "typescript",
+    "react",
+    "Bridged"
+  ],
+  "main": "src/index.tsx",
+  "dependencies": {
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-scripts": "4.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "17.0.0",
+    "@types/react-dom": "17.0.0",
+    "typescript": "4.1.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}`;
diff --git a/web-builder/nodejs/templates/index.ts b/web-builder/nodejs/templates/index.ts
index e69de29b..90d6113a 100644
--- a/web-builder/nodejs/templates/index.ts
+++ b/web-builder/nodejs/templates/index.ts
@@ -0,0 +1 @@
+export * from "./create-react-app-typescript";
diff --git a/web-builder/nodejs/yarn.lock b/web-builder/nodejs/yarn.lock
new file mode 100644
index 00000000..93378f6b
--- /dev/null
+++ b/web-builder/nodejs/yarn.lock
@@ -0,0 +1,22 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+lru-cache@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
+  integrity sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==
+  dependencies:
+    yallist "^4.0.0"
+
+semver@^7.3.5:
+  version "7.3.5"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.5.tgz#0b621c879348d8998e4b0e4be94b3f12e6018ef7"
+  integrity sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==
+  dependencies:
+    lru-cache "^6.0.0"
+
+yallist@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
+  integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
diff --git a/web-builder/react/build-app/index.ts b/web-builder/react/build-app/index.ts
index 4af86e75..97ee33ba 100644
--- a/web-builder/react/build-app/index.ts
+++ b/web-builder/react/build-app/index.ts
@@ -1,5 +1,10 @@
 import { Widget } from "../widgets";
 
-export function wrapCreateReactApp(rootApp: Widget, options: {}) {
+/**
+ * builds create-react-app wrapped react app.
+ * @param rootApp
+ * @param options
+ */
+export function buildWrapedCreateReactApp(rootApp: Widget, options: {}) {
   throw "not implemented";
 }
diff --git a/web-builder/react/export/index.ts b/web-builder/react/export/index.ts
new file mode 100644
index 00000000..0e27ddf1
--- /dev/null
+++ b/web-builder/react/export/index.ts
@@ -0,0 +1 @@
+export * from "./stringfy";
diff --git a/web-builder/react/export/stringfy/css-in-jsx.ts b/web-builder/react/export/stringfy/css-in-jsx.ts
new file mode 100644
index 00000000..cc341e62
--- /dev/null
+++ b/web-builder/react/export/stringfy/css-in-jsx.ts
@@ -0,0 +1 @@
+export function stringfyReactWidget_CSS_IN_JSX() {}
diff --git a/web-builder/react/export/stringfy/index.ts b/web-builder/react/export/stringfy/index.ts
new file mode 100644
index 00000000..b850b194
--- /dev/null
+++ b/web-builder/react/export/stringfy/index.ts
@@ -0,0 +1,2 @@
+export * from "./css-in-jsx";
+export * from "./styled-component";
diff --git a/web-builder/react/export/stringfy/styled-component.ts b/web-builder/react/export/stringfy/styled-component.ts
new file mode 100644
index 00000000..a751b1dc
--- /dev/null
+++ b/web-builder/react/export/stringfy/styled-component.ts
@@ -0,0 +1,21 @@
+import { IWidgetWithStyle } from "@coli.codes/web-builder-core/widget-with-style";
+import { stringfy } from "@coli.codes/export-string";
+
+/**
+ * styled components pattern with either emotion or styled-component
+ * @todo - this is not fully implemented
+ * @param widget
+ * @returns
+ */
+export function stringfyReactWidget_STYLED_COMPONENTS(
+  widget: IWidgetWithStyle
+): string {
+  const jsx = widget.buildJsx();
+  // const style = widget.buildStyle();
+
+  const _jsxStr = stringfy(jsx, {
+    language: "tsx",
+  });
+
+  return _jsxStr;
+}
diff --git a/web-builder/react/index.ts b/web-builder/react/index.ts
index 59edd1c8..70e56ae0 100644
--- a/web-builder/react/index.ts
+++ b/web-builder/react/index.ts
@@ -1 +1,2 @@
 export * from "./widgets";
+export * from "./export";
diff --git a/web-builder/react/widgets/column/index.ts b/web-builder/react/widgets/column/index.ts
index 0d09c4ca..aca8a06f 100644
--- a/web-builder/react/widgets/column/index.ts
+++ b/web-builder/react/widgets/column/index.ts
@@ -1,4 +1,4 @@
-import { JSXElementLike } from "coli";
+import { JSX, JSXElementLike } from "coli";
 import { CSSStyleDeclaration } from "coli/lib/languages/css";
 import { ReactMultiChildWidget } from "../widget";
 
@@ -10,6 +10,6 @@ export class Column extends ReactMultiChildWidget {
     throw new Error("Method not implemented.");
   }
   buildJsx(): JSXElementLike {
-    throw new Error("Method not implemented.");
+    return JSX.div().make();
   }
 }
diff --git a/web-builder/react/widgets/container/index.ts b/web-builder/react/widgets/container/index.ts
index 11e8a24c..66f442b7 100644
--- a/web-builder/react/widgets/container/index.ts
+++ b/web-builder/react/widgets/container/index.ts
@@ -1 +1,12 @@
-export class Container {}
+import { JSX, JSXElementLike } from "coli";
+import { CSSStyleDeclaration } from "coli/lib/languages/css";
+import { ReactWidget } from "../widget";
+
+export class Container extends ReactWidget {
+  buildStyle(): CSSStyleDeclaration {
+    throw new Error("Method not implemented.");
+  }
+  buildJsx(): JSXElementLike {
+    return JSX.div().make()
+  }
+}

From 7c61c6d9a3ef76dec273304a826a4e92c9f7131b Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Mon, 10 May 2021 08:31:44 +0900
Subject: [PATCH 27/73] add import specifications presets for react,
 styled-components and @emotion/styled

---
 web-builder/nodejs/package.json               |  3 +-
 web-builder/nodejs/stdlib/index.ts            |  2 +-
 web-builder/package.json                      |  2 +
 .../build-app/import-specifications/index.ts  |  3 +
 .../import-specifications/react-default.ts    | 95 +++++++++++++++++++
 .../with-emotion-styled.ts                    | 17 ++++
 .../with-styled-components.ts                 | 17 ++++
 web-builder/react/build-app/index.ts          |  2 +
 8 files changed, 139 insertions(+), 2 deletions(-)
 create mode 100644 web-builder/react/build-app/import-specifications/index.ts
 create mode 100644 web-builder/react/build-app/import-specifications/react-default.ts
 create mode 100644 web-builder/react/build-app/import-specifications/with-emotion-styled.ts
 create mode 100644 web-builder/react/build-app/import-specifications/with-styled-components.ts

diff --git a/web-builder/nodejs/package.json b/web-builder/nodejs/package.json
index 4c2541b0..26097880 100644
--- a/web-builder/nodejs/package.json
+++ b/web-builder/nodejs/package.json
@@ -1,6 +1,7 @@
 {
     "name": "@coli.codes/nodejs-builder",
+    "version": "0.0.0",
     "dependencies": {
         "semver": "^7.3.5"
     }
-}
+}
\ No newline at end of file
diff --git a/web-builder/nodejs/stdlib/index.ts b/web-builder/nodejs/stdlib/index.ts
index 9da9e073..0af0d842 100644
--- a/web-builder/nodejs/stdlib/index.ts
+++ b/web-builder/nodejs/stdlib/index.ts
@@ -211,7 +211,7 @@ const MATERIAL_UI_STYLES: StandardLibraryManifest = {
 /// endregion material-ui (react)
 ///
 
-export const standard_libraries: { [key: string]: StandardLibraryManifest } = {
+export const standard_libraries = {
   // ts
   typescript: TYPESCRIPT,
 
diff --git a/web-builder/package.json b/web-builder/package.json
index 2f3460ed..8acd5bbe 100644
--- a/web-builder/package.json
+++ b/web-builder/package.json
@@ -3,6 +3,8 @@
   "version": "0.0.1",
   "description": "jsx syntex tree builder for web applications. react, vue, svelte, etc..",
   "workspaces": [
+    "core",
+    "nodejs",
     "web-builder",
     "css",
     "html",
diff --git a/web-builder/react/build-app/import-specifications/index.ts b/web-builder/react/build-app/import-specifications/index.ts
new file mode 100644
index 00000000..6870a782
--- /dev/null
+++ b/web-builder/react/build-app/import-specifications/index.ts
@@ -0,0 +1,3 @@
+export * from "./react-default";
+export * from "./with-emotion-styled";
+export * from "./with-styled-components";
diff --git a/web-builder/react/build-app/import-specifications/react-default.ts b/web-builder/react/build-app/import-specifications/react-default.ts
new file mode 100644
index 00000000..4e279472
--- /dev/null
+++ b/web-builder/react/build-app/import-specifications/react-default.ts
@@ -0,0 +1,95 @@
+///
+/// This contains default and fundamental imports required for using react library
+///
+
+import { standard_libraries } from "@coli.codes/nodejs-builder";
+import { Import } from "coli";
+
+/**
+ * CoLI: `import React from "react";`
+ */
+const import_react_from_react = new Import()
+  .importDefault("React")
+  .from(standard_libraries.react.name)
+  .make();
+
+/**
+ * CoLI: `import React, { useState } from "react";`
+ */
+const import_react_and_use_state_from_react = new Import()
+  .importDefault("React")
+  .import("useState")
+  .from(standard_libraries.react.name)
+  .make();
+
+/**
+ * CoLI: `import React, { useState, useEffect } from "react";`
+ */
+const import_react_and_use_state_and_use_effect_from_react = new Import()
+  .importDefault("React")
+  .import("useState")
+  .import("useEffect")
+  .from(standard_libraries.react.name)
+  .make();
+
+/**
+ * CoLI: `import { useState } from "react";`
+ */
+const import_use_state_from_react = new Import()
+  .import("useState")
+  .from(standard_libraries.react.name)
+  .make();
+
+/**
+ * CoLI: `import { render } from "react-dom";`
+ */
+const import_render_from_react_dom = new Import()
+  .import("render")
+  .from(standard_libraries.react_dom.name)
+  .make();
+
+/**
+ * pre-built import combinations of [`React`, `useState`, `useEffect`]
+ */
+export const react_imports = {
+  /**
+   * all necessary imports at once for development convenience
+   *
+   * `import React, { useState, useEffect } from "react";`
+   */
+  import_react_prepacked: import_react_and_use_state_and_use_effect_from_react,
+
+  /**
+   * minimal version of react import - import only `React`.
+   *
+   * `import React from "react";`
+   */
+  import_react_minimal: import_react_from_react,
+
+  ///////////////////////////////////////////////
+
+  /**
+   * `import React from "react";`
+   */
+  import_react_from_react,
+
+  /**
+   * `import { render } from "react-dom";`
+   */
+  import_render_from_react_dom,
+
+  /**
+   *`import React, { useState } from "react";`
+   */
+  import_react_and_use_state_from_react,
+
+  /**
+   *`import { useState } from "react";`
+   */
+  import_use_state_from_react,
+
+  /**
+   *`import React, { useState, useEffect } from "react";`
+   */
+  import_react_and_use_state_and_use_effect_from_react,
+};
diff --git a/web-builder/react/build-app/import-specifications/with-emotion-styled.ts b/web-builder/react/build-app/import-specifications/with-emotion-styled.ts
new file mode 100644
index 00000000..e2ba5c9b
--- /dev/null
+++ b/web-builder/react/build-app/import-specifications/with-emotion-styled.ts
@@ -0,0 +1,17 @@
+import { standard_libraries } from "@coli.codes/nodejs-builder";
+import { Import } from "coli";
+
+/**
+ * CoLI: `import styled from "@emotion/styled";`
+ */
+const import_styled_from_emotion_styled = new Import()
+  .importDefault("styled")
+  .from(standard_libraries.emotion_styled.name)
+  .make();
+
+export const emotion_styled_imports = {
+  /**
+   * `import styled from "@emotion/styled";`
+   */
+  import_styled_from_emotion_styled,
+};
diff --git a/web-builder/react/build-app/import-specifications/with-styled-components.ts b/web-builder/react/build-app/import-specifications/with-styled-components.ts
new file mode 100644
index 00000000..0442ef04
--- /dev/null
+++ b/web-builder/react/build-app/import-specifications/with-styled-components.ts
@@ -0,0 +1,17 @@
+import { standard_libraries } from "@coli.codes/nodejs-builder";
+import { Import } from "coli";
+
+/**
+ * CoLI: `import styled from "styled-components";`
+ */
+const import_styled_from_styled_components = new Import()
+  .importDefault("styled")
+  .from(standard_libraries.styled_components.name)
+  .make();
+
+export const styled_components_imports = {
+  /**
+   * `import styled from "@emotion/styled";`
+   */
+  import_styled_from_styled_components,
+};
diff --git a/web-builder/react/build-app/index.ts b/web-builder/react/build-app/index.ts
index 97ee33ba..097a8847 100644
--- a/web-builder/react/build-app/index.ts
+++ b/web-builder/react/build-app/index.ts
@@ -1,4 +1,5 @@
 import { Widget } from "../widgets";
+import { react_imports } from "./import-specifications";
 
 /**
  * builds create-react-app wrapped react app.
@@ -6,5 +7,6 @@ import { Widget } from "../widgets";
  * @param options
  */
 export function buildWrapedCreateReactApp(rootApp: Widget, options: {}) {
+  // react_imports.import_react_prepacked
   throw "not implemented";
 }

From a6399f7ce96af34d42b66d9b6387625419285593 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Mon, 10 May 2021 09:18:42 +0900
Subject: [PATCH 28/73] init vue-builder

---
 web-builder/vue/README.md    | 6 ++++++
 web-builder/vue/package.json | 4 ++++
 2 files changed, 10 insertions(+)
 create mode 100644 web-builder/vue/README.md
 create mode 100644 web-builder/vue/package.json

diff --git a/web-builder/vue/README.md b/web-builder/vue/README.md
new file mode 100644
index 00000000..50dd1c98
--- /dev/null
+++ b/web-builder/vue/README.md
@@ -0,0 +1,6 @@
+# coli-web-builder - Vue support
+
+## References
+
+- https://www.npmjs.com/package/@vue/compiler-dom
+- https://github.com/vuejs/vue-next/tree/master/packages/compiler-dom#readme
diff --git a/web-builder/vue/package.json b/web-builder/vue/package.json
new file mode 100644
index 00000000..1989693c
--- /dev/null
+++ b/web-builder/vue/package.json
@@ -0,0 +1,4 @@
+{
+    "name": "@coli.codes/vue-builder",
+    "version": "0.0.0"
+}
\ No newline at end of file

From f3b1176d7c39c1be98fc180c45eed499c59bb651 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Mon, 10 May 2021 09:18:58 +0900
Subject: [PATCH 29/73] add manifest template support for cra-ts

---
 web-builder/nodejs/package/manifest.ts        |  2 +-
 .../create-react-app-typescript/index.ts      | 18 +++++++++--
 web-builder/react/build-app/index.ts          | 31 +++++++++++++++++--
 3 files changed, 45 insertions(+), 6 deletions(-)

diff --git a/web-builder/nodejs/package/manifest.ts b/web-builder/nodejs/package/manifest.ts
index 6199f1cd..da75651b 100644
--- a/web-builder/nodejs/package/manifest.ts
+++ b/web-builder/nodejs/package/manifest.ts
@@ -27,7 +27,7 @@ export class PackageManifest implements IPackageManifest {
     version?: TVersion;
     main?: string;
     dependencies?: Dependencies;
-    devDependencies: Dependencies;
+    devDependencies?: Dependencies;
   }) {
     this.name = params.name;
     this.description = params.description;
diff --git a/web-builder/nodejs/templates/create-react-app-typescript/index.ts b/web-builder/nodejs/templates/create-react-app-typescript/index.ts
index d4535520..a08ab63e 100644
--- a/web-builder/nodejs/templates/create-react-app-typescript/index.ts
+++ b/web-builder/nodejs/templates/create-react-app-typescript/index.ts
@@ -1,6 +1,9 @@
-export const CRA_TYPESCRIPT_PACKAGE_PRESET = `
+import { PackageManifest } from "../../package";
+
+/**
+ * ```
 {
-  "name": "react-typescript",
+  "name": "@packages.bridged.xyz/react-typescript",
   "version": "0.0.0",
   "description": "Bridged React Typescript Preset",
   "keywords": [
@@ -31,4 +34,13 @@ export const CRA_TYPESCRIPT_PACKAGE_PRESET = `
     "not ie <= 11",
     "not op_mini all"
   ]
-}`;
+}
+ * ```
+ */
+export const CRA_TYPESCRIPT_PACKAGE_PRESET: PackageManifest = new PackageManifest(
+  {
+    name: "@packages.bridged.xyz/react-typescript",
+    description: "Bridged React Typescript Preset",
+    version: "0.0.0",
+  }
+);
diff --git a/web-builder/react/build-app/index.ts b/web-builder/react/build-app/index.ts
index 097a8847..66413109 100644
--- a/web-builder/react/build-app/index.ts
+++ b/web-builder/react/build-app/index.ts
@@ -1,12 +1,39 @@
 import { Widget } from "../widgets";
 import { react_imports } from "./import-specifications";
-
+import {
+  packages,
+  standard_libraries,
+  templates,
+} from "@coli.codes/nodejs-builder";
 /**
  * builds create-react-app wrapped react app.
+ *
+ *
+ * **file structure**
+ * - package.json (cra-template-ts-package-json)
+ * - src
+ *    - index.tsx (cra-template-index-tsx)
+ *    - app.tsx (cra-template-app-tsx)
+ *    - *\_\_others\_\_*
+ * - public
+ *    - index.html (cra-template-index-html)
  * @param rootApp
  * @param options
  */
-export function buildWrapedCreateReactApp(rootApp: Widget, options: {}) {
+export function buildWrapedCreateReactApp(
+  rootApp: Widget,
+  options: {
+    language: "ts" | "js";
+  }
+) {
+  // setting both `@emotion/styled` and `styled-components` for now. this needs to be handled by option or via coli tree analysis and be only used either one of them.
+  const _packageJson = templates.CRA_TYPESCRIPT_PACKAGE_PRESET;
+  _packageJson.addDependency(standard_libraries.emotion_styled);
+  _packageJson.addDependency(standard_libraries.styled_components);
+  _packageJson.addDevDependency(standard_libraries.types_styled_components);
+
+  const package_json_str = _packageJson.stringfy();
+
   // react_imports.import_react_prepacked
   throw "not implemented";
 }

From 30faf5fc77cdd033b9ca87262ad6ccb5ec32b43f Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Mon, 10 May 2021 10:58:27 +0900
Subject: [PATCH 30/73] update imports

---
 web-builder/react/widgets/button/index.ts    | 4 ++--
 web-builder/react/widgets/column/index.ts    | 4 ++--
 web-builder/react/widgets/container/index.ts | 8 ++++----
 web-builder/react/widgets/row/index.ts       | 5 ++---
 4 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/web-builder/react/widgets/button/index.ts b/web-builder/react/widgets/button/index.ts
index 660ef8c5..da611c3f 100644
--- a/web-builder/react/widgets/button/index.ts
+++ b/web-builder/react/widgets/button/index.ts
@@ -1,11 +1,11 @@
 import { ReflectReactWidget } from "../reflect";
 import { BUTTON_IMPORT } from "@coli.codes/reflect-web-builder";
-import { CSSStyleDeclaration } from "coli/lib/languages/css";
+import { css } from "coli";
 export class ReflectButton extends ReflectReactWidget {
   readonly imports: string = BUTTON_IMPORT.named;
   readonly tag: string = BUTTON_IMPORT.name;
 
-  buildStyle(): CSSStyleDeclaration {
+  buildStyle(): css.CSSStyleDeclaration {
     throw new Error("Method not implemented.");
   }
 }
diff --git a/web-builder/react/widgets/column/index.ts b/web-builder/react/widgets/column/index.ts
index aca8a06f..7d908dd6 100644
--- a/web-builder/react/widgets/column/index.ts
+++ b/web-builder/react/widgets/column/index.ts
@@ -1,12 +1,12 @@
 import { JSX, JSXElementLike } from "coli";
-import { CSSStyleDeclaration } from "coli/lib/languages/css";
+import { css } from "coli";
 import { ReactMultiChildWidget } from "../widget";
 
 export class Column extends ReactMultiChildWidget {
   constructor() {
     super();
   }
-  buildStyle(): CSSStyleDeclaration {
+  buildStyle(): css.CSSStyleDeclaration {
     throw new Error("Method not implemented.");
   }
   buildJsx(): JSXElementLike {
diff --git a/web-builder/react/widgets/container/index.ts b/web-builder/react/widgets/container/index.ts
index 66f442b7..c783a887 100644
--- a/web-builder/react/widgets/container/index.ts
+++ b/web-builder/react/widgets/container/index.ts
@@ -1,12 +1,12 @@
-import { JSX, JSXElementLike } from "coli";
-import { CSSStyleDeclaration } from "coli/lib/languages/css";
+import { JSX, JSXElementLike, css } from "coli";
+
 import { ReactWidget } from "../widget";
 
 export class Container extends ReactWidget {
-  buildStyle(): CSSStyleDeclaration {
+  buildStyle(): css.CSSStyleDeclaration {
     throw new Error("Method not implemented.");
   }
   buildJsx(): JSXElementLike {
-    return JSX.div().make()
+    return JSX.div().make();
   }
 }
diff --git a/web-builder/react/widgets/row/index.ts b/web-builder/react/widgets/row/index.ts
index 5998edc9..22a76165 100644
--- a/web-builder/react/widgets/row/index.ts
+++ b/web-builder/react/widgets/row/index.ts
@@ -1,9 +1,8 @@
-import { JSXElement } from "coli";
-import { CSSStyleDeclaration } from "coli/lib/languages/css";
+import { JSXElement, css } from "coli";
 import { ReactMultiChildWidget } from "../widget";
 
 export class Row extends ReactMultiChildWidget {
-  buildStyle(): CSSStyleDeclaration {
+  buildStyle(): css.CSSStyleDeclaration {
     throw new Error("Method not implemented.");
   }
   buildJsx(): JSXElement {

From 1aa05cf25d4c613ecf663a340cb275df4b0bdbf7 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Mon, 31 May 2021 06:16:23 +0900
Subject: [PATCH 31/73] add stack

---
 web-builder/react/widgets/column/index.ts |  5 +++--
 web-builder/react/widgets/index.ts        |  9 +++++++++
 web-builder/react/widgets/stack/index.ts  | 16 ++++++++++++++++
 web-builder/react/widgets/widget.ts       |  4 +++-
 4 files changed, 31 insertions(+), 3 deletions(-)
 create mode 100644 web-builder/react/widgets/stack/index.ts

diff --git a/web-builder/react/widgets/column/index.ts b/web-builder/react/widgets/column/index.ts
index 7d908dd6..536375da 100644
--- a/web-builder/react/widgets/column/index.ts
+++ b/web-builder/react/widgets/column/index.ts
@@ -1,10 +1,11 @@
 import { JSX, JSXElementLike } from "coli";
 import { css } from "coli";
+import { ReactWidgets } from "..";
 import { ReactMultiChildWidget } from "../widget";
 
 export class Column extends ReactMultiChildWidget {
-  constructor() {
-    super();
+  constructor(p: { children: Array<ReactWidgets> }) {
+    super(p);
   }
   buildStyle(): css.CSSStyleDeclaration {
     throw new Error("Method not implemented.");
diff --git a/web-builder/react/widgets/index.ts b/web-builder/react/widgets/index.ts
index ca35ab91..35e85210 100644
--- a/web-builder/react/widgets/index.ts
+++ b/web-builder/react/widgets/index.ts
@@ -1,8 +1,17 @@
 export * from "./column";
 export * from "./container";
 export * from "./row";
+export * from "./stack";
 
 export * from "./widget";
 
 // export core widget
 export * from "@coli.codes/web-builder-core/widget";
+
+// build types
+import type { Column } from "./column";
+import type { Row } from "./row";
+import type { Stack } from "./stack";
+import type { Container } from "./container";
+
+export type ReactWidgets = Column | Row | Stack | Container;
diff --git a/web-builder/react/widgets/stack/index.ts b/web-builder/react/widgets/stack/index.ts
new file mode 100644
index 00000000..f25daf02
--- /dev/null
+++ b/web-builder/react/widgets/stack/index.ts
@@ -0,0 +1,16 @@
+import { JSX, JSXElementLike, css } from "coli";
+
+import { ReactMultiChildWidget } from "../widget";
+
+import type { ReactWidgets } from "..";
+export class Stack extends ReactMultiChildWidget {
+  constructor(p: { children: Array<ReactWidgets> }) {
+    super(p);
+  }
+  buildStyle(): css.CSSStyleDeclaration {
+    throw new Error("Method not implemented.");
+  }
+  buildJsx(): JSXElementLike {
+    return JSX.div().make();
+  }
+}
diff --git a/web-builder/react/widgets/widget.ts b/web-builder/react/widgets/widget.ts
index 5d98468d..04f58966 100644
--- a/web-builder/react/widgets/widget.ts
+++ b/web-builder/react/widgets/widget.ts
@@ -9,7 +9,9 @@ import {
 export abstract class ReactWidget extends WidgetWithStyle {}
 
 export abstract class ReactMultiChildWidget extends MultiChildWidgetWithStyle {
-  constructor() {
+  readonly children: Array<ReactWidget> = [];
+  constructor(p: { children: Array<ReactWidget> }) {
     super();
+    this.children = p.children;
   }
 }

From e27ee89588cd4ed723f0e4c10e5d0896f8c1d890 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 1 Jun 2021 01:53:02 +0900
Subject: [PATCH 32/73] add support for multi child jsx elements (layouts)

---
 web-builder/core/widget-with-style.ts            | 16 +++++++++++++++-
 .../react/export/stringfy/styled-component.ts    |  4 ++++
 web-builder/react/widgets/column/index.ts        |  5 +++++
 web-builder/react/widgets/row/index.ts           | 11 +++++++----
 web-builder/react/widgets/stack/index.ts         | 10 +++++++---
 5 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/web-builder/core/widget-with-style.ts b/web-builder/core/widget-with-style.ts
index 3d09733e..31938c24 100644
--- a/web-builder/core/widget-with-style.ts
+++ b/web-builder/core/widget-with-style.ts
@@ -23,10 +23,24 @@ export abstract class WidgetWithStyle
 export abstract class MultiChildWidgetWithStyle
   extends MultiChildWidget
   implements IWidgetWithStyle {
+  readonly children: Array<IWidgetWithStyle> = [];
+
   constructor() {
     super();
   }
   abstract buildStyle(): css.CSSStyleDeclaration;
 
-  abstract buildJsx(): JSXElementLike;
+  buildJsx(): JSXElementLike {
+    const children = this.buildChildrenJsx();
+    const container = this.buildContainingJsx(children);
+    return container;
+  }
+
+  abstract buildContainingJsx(children: Array<JSXElementLike>): JSXElementLike;
+
+  buildChildrenJsx(): Array<JSXElementLike> {
+    return this.children?.map((c) => {
+      return c.buildJsx();
+    });
+  }
 }
diff --git a/web-builder/react/export/stringfy/styled-component.ts b/web-builder/react/export/stringfy/styled-component.ts
index a751b1dc..18c4f14a 100644
--- a/web-builder/react/export/stringfy/styled-component.ts
+++ b/web-builder/react/export/stringfy/styled-component.ts
@@ -15,6 +15,10 @@ export function stringfyReactWidget_STYLED_COMPONENTS(
 
   const _jsxStr = stringfy(jsx, {
     language: "tsx",
+    formatter: {
+      use: "pritter",
+      parser: "typescript",
+    },
   });
 
   return _jsxStr;
diff --git a/web-builder/react/widgets/column/index.ts b/web-builder/react/widgets/column/index.ts
index 536375da..c2fe2f8e 100644
--- a/web-builder/react/widgets/column/index.ts
+++ b/web-builder/react/widgets/column/index.ts
@@ -7,6 +7,11 @@ export class Column extends ReactMultiChildWidget {
   constructor(p: { children: Array<ReactWidgets> }) {
     super(p);
   }
+  buildContainingJsx(children: JSXElementLike[]): JSXElementLike {
+    return JSX.div({
+      children: children,
+    }).make();
+  }
   buildStyle(): css.CSSStyleDeclaration {
     throw new Error("Method not implemented.");
   }
diff --git a/web-builder/react/widgets/row/index.ts b/web-builder/react/widgets/row/index.ts
index 22a76165..a1e87471 100644
--- a/web-builder/react/widgets/row/index.ts
+++ b/web-builder/react/widgets/row/index.ts
@@ -1,11 +1,14 @@
-import { JSXElement, css } from "coli";
 import { ReactMultiChildWidget } from "../widget";
+import { JSX, JSXElementLike, css } from "coli";
 
 export class Row extends ReactMultiChildWidget {
-  buildStyle(): css.CSSStyleDeclaration {
-    throw new Error("Method not implemented.");
+  buildContainingJsx(children: JSXElementLike[]): JSXElementLike {
+    return JSX.div({
+      children: children,
+    }).make();
   }
-  buildJsx(): JSXElement {
+
+  buildStyle(): css.CSSStyleDeclaration {
     throw new Error("Method not implemented.");
   }
 }
diff --git a/web-builder/react/widgets/stack/index.ts b/web-builder/react/widgets/stack/index.ts
index f25daf02..c9d4dcc5 100644
--- a/web-builder/react/widgets/stack/index.ts
+++ b/web-builder/react/widgets/stack/index.ts
@@ -7,10 +7,14 @@ export class Stack extends ReactMultiChildWidget {
   constructor(p: { children: Array<ReactWidgets> }) {
     super(p);
   }
+
+  buildContainingJsx(children: JSXElementLike[]): JSXElementLike {
+    return JSX.div({
+      children: children,
+    }).make();
+  }
+
   buildStyle(): css.CSSStyleDeclaration {
     throw new Error("Method not implemented.");
   }
-  buildJsx(): JSXElementLike {
-    return JSX.div().make();
-  }
 }

From c80d2c9a56b7d2f69221a51668c4ea50c32924ec Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 1 Jun 2021 21:08:31 +0900
Subject: [PATCH 33/73] add reflect text widget for react preset

---
 web-builder/react/widgets/text/index.ts | 12 ++++++++++++
 web-builder/reflect/imports/index.ts    |  6 ++++++
 2 files changed, 18 insertions(+)
 create mode 100644 web-builder/react/widgets/text/index.ts

diff --git a/web-builder/react/widgets/text/index.ts b/web-builder/react/widgets/text/index.ts
new file mode 100644
index 00000000..13d7a8db
--- /dev/null
+++ b/web-builder/react/widgets/text/index.ts
@@ -0,0 +1,12 @@
+import { ReflectReactWidget } from "../reflect";
+import { TEXT_IMPORT } from "@coli.codes/reflect-web-builder";
+import { css } from "coli";
+
+export class ReflectText extends ReflectReactWidget {
+  readonly imports: string = TEXT_IMPORT.named;
+  readonly tag: string = TEXT_IMPORT.name;
+
+  buildStyle(): css.CSSStyleDeclaration {
+    throw new Error("Method not implemented.");
+  }
+}
diff --git a/web-builder/reflect/imports/index.ts b/web-builder/reflect/imports/index.ts
index d9ad7e9c..b10b369c 100644
--- a/web-builder/reflect/imports/index.ts
+++ b/web-builder/reflect/imports/index.ts
@@ -22,3 +22,9 @@ export const BUTTON_IMPORT = {
   named: IMPORT_BUTTON_NAMED,
   default: IMPORT_BUTTON_DEFAULT,
 };
+
+export const TEXT_IMPORT = {
+  name: "Typography",
+  named: ".",
+  default: "/typography",
+};

From 63feaf6d572775bc159ab2f021db1355a28c5fd7 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Thu, 3 Jun 2021 03:30:56 +0900
Subject: [PATCH 34/73] add error widget & typography support

---
 web-builder/react/widgets/column/index.ts     |  4 +---
 .../react/widgets/error-widget/index.ts       | 19 +++++++++++++++++++
 web-builder/react/widgets/index.ts            |  2 ++
 web-builder/react/widgets/row/index.ts        |  1 +
 web-builder/react/widgets/stack/index.ts      |  1 +
 web-builder/react/widgets/text/index.ts       | 14 +++++++++++++-
 6 files changed, 37 insertions(+), 4 deletions(-)
 create mode 100644 web-builder/react/widgets/error-widget/index.ts

diff --git a/web-builder/react/widgets/column/index.ts b/web-builder/react/widgets/column/index.ts
index c2fe2f8e..1dcd1d69 100644
--- a/web-builder/react/widgets/column/index.ts
+++ b/web-builder/react/widgets/column/index.ts
@@ -4,6 +4,7 @@ import { ReactWidgets } from "..";
 import { ReactMultiChildWidget } from "../widget";
 
 export class Column extends ReactMultiChildWidget {
+  readonly _type = "column";
   constructor(p: { children: Array<ReactWidgets> }) {
     super(p);
   }
@@ -15,7 +16,4 @@ export class Column extends ReactMultiChildWidget {
   buildStyle(): css.CSSStyleDeclaration {
     throw new Error("Method not implemented.");
   }
-  buildJsx(): JSXElementLike {
-    return JSX.div().make();
-  }
 }
diff --git a/web-builder/react/widgets/error-widget/index.ts b/web-builder/react/widgets/error-widget/index.ts
new file mode 100644
index 00000000..37e3a34e
--- /dev/null
+++ b/web-builder/react/widgets/error-widget/index.ts
@@ -0,0 +1,19 @@
+import { JSX, JSXElementLike, css, JSXText } from "coli";
+
+import { ReactWidget } from "../widget";
+
+export class ErrorWidget extends ReactWidget {
+  constructor(readonly id: string) {
+    super();
+  }
+  buildStyle(): css.CSSStyleDeclaration {
+    throw new Error("Method not implemented.");
+  }
+  buildJsx(): JSXElementLike {
+    return JSX.div({
+      children: [
+        new JSXText(`This layer/layout is not handled - id:${this.id}`),
+      ],
+    }).make();
+  }
+}
diff --git a/web-builder/react/widgets/index.ts b/web-builder/react/widgets/index.ts
index 35e85210..ad6e2692 100644
--- a/web-builder/react/widgets/index.ts
+++ b/web-builder/react/widgets/index.ts
@@ -2,6 +2,8 @@ export * from "./column";
 export * from "./container";
 export * from "./row";
 export * from "./stack";
+export * from "./error-widget";
+export * from "./text";
 
 export * from "./widget";
 
diff --git a/web-builder/react/widgets/row/index.ts b/web-builder/react/widgets/row/index.ts
index a1e87471..b4858c12 100644
--- a/web-builder/react/widgets/row/index.ts
+++ b/web-builder/react/widgets/row/index.ts
@@ -2,6 +2,7 @@ import { ReactMultiChildWidget } from "../widget";
 import { JSX, JSXElementLike, css } from "coli";
 
 export class Row extends ReactMultiChildWidget {
+  readonly _type = "row";
   buildContainingJsx(children: JSXElementLike[]): JSXElementLike {
     return JSX.div({
       children: children,
diff --git a/web-builder/react/widgets/stack/index.ts b/web-builder/react/widgets/stack/index.ts
index c9d4dcc5..5771ce37 100644
--- a/web-builder/react/widgets/stack/index.ts
+++ b/web-builder/react/widgets/stack/index.ts
@@ -4,6 +4,7 @@ import { ReactMultiChildWidget } from "../widget";
 
 import type { ReactWidgets } from "..";
 export class Stack extends ReactMultiChildWidget {
+  readonly _type = "stack";
   constructor(p: { children: Array<ReactWidgets> }) {
     super(p);
   }
diff --git a/web-builder/react/widgets/text/index.ts b/web-builder/react/widgets/text/index.ts
index 13d7a8db..10f68cbf 100644
--- a/web-builder/react/widgets/text/index.ts
+++ b/web-builder/react/widgets/text/index.ts
@@ -1,11 +1,23 @@
 import { ReflectReactWidget } from "../reflect";
 import { TEXT_IMPORT } from "@coli.codes/reflect-web-builder";
-import { css } from "coli";
+import { css, JSX, JSXText } from "coli";
 
 export class ReflectText extends ReflectReactWidget {
   readonly imports: string = TEXT_IMPORT.named;
   readonly tag: string = TEXT_IMPORT.name;
 
+  data: string;
+  constructor(p: { data: string }) {
+    super();
+    this.data = p.data;
+  }
+
+  buildJsx() {
+    return JSX.tag(this.tag, {
+      children: [new JSXText(this.data)],
+    }).make();
+  }
+
   buildStyle(): css.CSSStyleDeclaration {
     throw new Error("Method not implemented.");
   }

From 3545c2d1d235e18fca2248f2f93138f24ac4e8b6 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Thu, 3 Jun 2021 05:01:21 +0900
Subject: [PATCH 35/73] add styled-components support

---
 web-builder/core/widget-with-style.ts         | 23 +++--
 web-builder/core/widget.ts                    |  5 +-
 web-builder/react/widgets/container/index.ts  |  3 +-
 web-builder/react/widgets/widget.ts           | 28 +++++-
 web-builder/styled/README.md                  | 90 +++++++++++++++++++
 web-builder/styled/index.ts                   | 20 +++++
 .../styled/styled-component-declaration.ts    | 47 ++++++++++
 7 files changed, 201 insertions(+), 15 deletions(-)
 create mode 100644 web-builder/styled/styled-component-declaration.ts

diff --git a/web-builder/core/widget-with-style.ts b/web-builder/core/widget-with-style.ts
index 31938c24..437e7fee 100644
--- a/web-builder/core/widget-with-style.ts
+++ b/web-builder/core/widget-with-style.ts
@@ -1,9 +1,10 @@
-import { Widget, MultiChildWidget } from "./widget";
+import { Widget, IMultiChildWidget } from "./widget";
 import { css, JSXElementLike } from "coli";
+import { ColiObjectLike } from "@coli.codes/builder";
 
 export interface IWidgetWithStyle {
   buildStyle(): css.CSSStyleDeclaration;
-  buildJsx(): JSXElementLike;
+  buildJsx(): ColiObjectLike<JSXElementLike>;
 }
 
 /**
@@ -11,18 +12,20 @@ export interface IWidgetWithStyle {
  */
 export abstract class WidgetWithStyle
   extends Widget
-  implements IWidgetWithStyle {
+  implements IWidgetWithStyle
+{
   abstract buildStyle(): css.CSSStyleDeclaration;
 
-  abstract buildJsx(): JSXElementLike;
+  abstract buildJsx(): ColiObjectLike<JSXElementLike>;
 }
 
 /**
  * Since html based framework's widget can be represented withou any style definition, this WidgetWithStyle class indicates, that the sub instance of this class will contain style data within it.
  */
 export abstract class MultiChildWidgetWithStyle
-  extends MultiChildWidget
-  implements IWidgetWithStyle {
+  extends WidgetWithStyle
+  implements IWidgetWithStyle, IMultiChildWidget
+{
   readonly children: Array<IWidgetWithStyle> = [];
 
   constructor() {
@@ -30,15 +33,17 @@ export abstract class MultiChildWidgetWithStyle
   }
   abstract buildStyle(): css.CSSStyleDeclaration;
 
-  buildJsx(): JSXElementLike {
+  buildJsx(): ColiObjectLike<JSXElementLike> {
     const children = this.buildChildrenJsx();
     const container = this.buildContainingJsx(children);
     return container;
   }
 
-  abstract buildContainingJsx(children: Array<JSXElementLike>): JSXElementLike;
+  abstract buildContainingJsx(
+    children: Array<ColiObjectLike<JSXElementLike>>
+  ): ColiObjectLike<JSXElementLike>;
 
-  buildChildrenJsx(): Array<JSXElementLike> {
+  buildChildrenJsx(): Array<ColiObjectLike<JSXElementLike>> {
     return this.children?.map((c) => {
       return c.buildJsx();
     });
diff --git a/web-builder/core/widget.ts b/web-builder/core/widget.ts
index 79343c0f..6368330a 100644
--- a/web-builder/core/widget.ts
+++ b/web-builder/core/widget.ts
@@ -2,9 +2,6 @@ export class Widget {
   constructor() {}
 }
 
-export class MultiChildWidget extends Widget {
-  constructor() {
-    super();
-  }
+export interface IMultiChildWidget {
   children: Widget[];
 }
diff --git a/web-builder/react/widgets/container/index.ts b/web-builder/react/widgets/container/index.ts
index c783a887..bee8d95d 100644
--- a/web-builder/react/widgets/container/index.ts
+++ b/web-builder/react/widgets/container/index.ts
@@ -1,3 +1,4 @@
+import { ColiObjectLike } from "@coli.codes/builder";
 import { JSX, JSXElementLike, css } from "coli";
 
 import { ReactWidget } from "../widget";
@@ -6,7 +7,7 @@ export class Container extends ReactWidget {
   buildStyle(): css.CSSStyleDeclaration {
     throw new Error("Method not implemented.");
   }
-  buildJsx(): JSXElementLike {
+  buildJsx(): ColiObjectLike<JSXElementLike> {
     return JSX.div().make();
   }
 }
diff --git a/web-builder/react/widgets/widget.ts b/web-builder/react/widgets/widget.ts
index 04f58966..76b6ee5a 100644
--- a/web-builder/react/widgets/widget.ts
+++ b/web-builder/react/widgets/widget.ts
@@ -1,17 +1,43 @@
+import { ColiObjectLike } from "@coli.codes/builder";
 import {
   WidgetWithStyle,
   MultiChildWidgetWithStyle,
 } from "@coli.codes/web-builder-core/widget-with-style";
+import { JSX, JSXElementLike } from "coli";
 
 /**
  * React Widget that requires no additional custom import rather than react
  */
 export abstract class ReactWidget extends WidgetWithStyle {}
 
-export abstract class ReactMultiChildWidget extends MultiChildWidgetWithStyle {
+export abstract class ReactMultiChildWidget
+  extends ReactWidget
+  implements MultiChildWidgetWithStyle
+{
   readonly children: Array<ReactWidget> = [];
+  tag: string;
   constructor(p: { children: Array<ReactWidget> }) {
     super();
     this.children = p.children;
   }
+
+  buildContainingJsx(
+    children: ColiObjectLike<JSXElementLike>[]
+  ): ColiObjectLike<JSXElementLike> {
+    return JSX.tag(this.tag, {
+      children: children,
+    });
+  }
+
+  buildJsx(): ColiObjectLike<JSXElementLike> {
+    const children = this.buildChildrenJsx();
+    const container = this.buildContainingJsx(children);
+    return container;
+  }
+
+  buildChildrenJsx(): Array<ColiObjectLike<JSXElementLike>> {
+    return this.children?.map((c) => {
+      return c.buildJsx();
+    });
+  }
 }
diff --git a/web-builder/styled/README.md b/web-builder/styled/README.md
index 9dd6c8e9..f0bbcb62 100644
--- a/web-builder/styled/README.md
+++ b/web-builder/styled/README.md
@@ -1,3 +1,93 @@
 # Styled components / Emotion pattern for React, Preact, Vue
 
 > Web builder built-in support for styled components and emotion css
+
+**Supported platforms**
+
+- reactjs
+- vuejs
+
+## ReactJS
+
+https://styled-components.com/
+
+```jsx
+//// declaration
+const Button = styled.a`
+  /* This renders the buttons above... Edit me! */
+  display: inline-block;
+  border-radius: 3px;
+  padding: 0.5rem 0;
+  margin: 0.5rem 1rem;
+  width: 11rem;
+  background: transparent;
+  color: white;
+  border: 2px solid white;
+
+  /* The GitHub button is a primary button
+   * edit this to target it specifically! */
+  ${(props) =>
+    props.primary &&
+    css`
+      background: white;
+      color: black;
+    `}
+`;
+
+render(
+  <div>
+    <Button
+      href="https://github.com/styled-components/styled-components"
+      target="_blank"
+      rel="noopener"
+      primary
+    >
+      GitHub
+    </Button>
+
+    <Button as={Link} href="/docs">
+      Documentation
+    </Button>
+  </div>
+);
+```
+
+## VueJS
+
+https://github.com/styled-components/vue-styled-components
+
+```js
+/// registration
+
+new Vue({
+    // ...
+    components {
+      'styled-title': StyledTitle
+    },
+    template: '<styled-title> Hello! </styled-title>'
+}
+////
+
+import styled from "vue-styled-components";
+
+// Create a <StyledTitle> Vue component that renders an <h1> which is
+// centered, palevioletred and sized at 1.5em
+const StyledTitle = styled.h1`
+  font-size: 1.5em;
+  text-align: center;
+  color: palevioletred;
+`;
+
+// Create a <Wrapper> Vue component that renders a <section> with
+// some padding and a papayawhip background
+const Wrapper = styled.section`
+  padding: 4em;
+  background: papayawhip;
+`;
+
+///// usage
+// Use them like any other Vue component – except they're styled!
+<wrapper>
+  <styled-title>Hello World, this is my first styled component!</styled-title>
+</wrapper>;
+```
diff --git a/web-builder/styled/index.ts b/web-builder/styled/index.ts
index e69de29b..6c32f3e1 100644
--- a/web-builder/styled/index.ts
+++ b/web-builder/styled/index.ts
@@ -0,0 +1,20 @@
+import { WidgetWithStyle } from "@coli.codes/web-builder-core";
+import { ColiBuilder } from "coli";
+import { JSX } from "@coli.codes/builder";
+import { stringfy } from "@coli.codes/export-string";
+import { declareStyledComponentVariable } from "./styled-component-declaration";
+
+export function makeAsStyled(styled: WidgetWithStyle) {
+  const jsx = styled.buildJsx();
+
+  if (jsx instanceof ColiBuilder) {
+    const styledVar = declareStyledComponentVariable(styled);
+    const styledTextTest = stringfy(styledVar, {
+      language: "typescript",
+    });
+    console.log(styledTextTest);
+    return (jsx as JSX).copyWith({
+      identifier: styledVar.id,
+    });
+  }
+}
diff --git a/web-builder/styled/styled-component-declaration.ts b/web-builder/styled/styled-component-declaration.ts
new file mode 100644
index 00000000..7a2cbac2
--- /dev/null
+++ b/web-builder/styled/styled-component-declaration.ts
@@ -0,0 +1,47 @@
+import {
+  ast,
+  css,
+  Identifier,
+  PropertyAccessExpression,
+  TaggedTemplateExpression,
+  VariableDeclaration,
+} from "coli";
+import { WidgetWithStyle } from "@coli.codes/web-builder-core";
+
+export class StyledComponentDeclaration extends VariableDeclaration {
+  static styledIdentifier = new Identifier("styled");
+
+  constructor(
+    readonly name: string,
+    params: {
+      style: string | css.CSSStyleDeclaration;
+    }
+  ) {
+    super(name, {
+      initializer: StyledComponentDeclaration.makeinitializer(),
+      kind: "const",
+    });
+  }
+
+  static makeinitializer(): TaggedTemplateExpression {
+    return new TaggedTemplateExpression(
+      new PropertyAccessExpression(
+        StyledComponentDeclaration.styledIdentifier,
+        "div"
+      ),
+      {
+        template: new ast.TemplateLiteral(`
+              margin: 60px 20px;
+            `),
+      }
+    );
+  }
+}
+
+export function declareStyledComponentVariable(
+  widgetConfig: WidgetWithStyle
+): StyledComponentDeclaration {
+  return new StyledComponentDeclaration("Wrapper", {
+    style: widgetConfig.buildStyle(),
+  });
+}

From e9a30003f9916191f09ea024ad188939f55531d1 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Thu, 3 Jun 2021 11:11:57 +0900
Subject: [PATCH 36/73] add syled deps on react builder

---
 web-builder/react/package.json | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/web-builder/react/package.json b/web-builder/react/package.json
index 1a06860f..f0c8a796 100644
--- a/web-builder/react/package.json
+++ b/web-builder/react/package.json
@@ -4,5 +4,8 @@
     "version": "0.0.0",
     "license": "Apache 2.0",
     "homepage": "https://coli.codes/react",
-    "author": "Bridged Authors"
+    "author": "Bridged Authors",
+    "dependencies": {
+        "@web-builder/styled": "0.0.0"
+    }
 }
\ No newline at end of file

From f0d9e2cc2faf49730a3f2a2df28d6bbd15811563 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Thu, 3 Jun 2021 11:16:07 +0900
Subject: [PATCH 37/73] implement styled - wip

---
 .../react/export/stringfy/styled-component.ts |  2 --
 web-builder/react/widgets/text/index.ts       |  8 +++++++-
 web-builder/styled/index.ts                   | 19 +++++++++++++------
 .../styled/styled-component-declaration.ts    | 11 ++++++++---
 4 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/web-builder/react/export/stringfy/styled-component.ts b/web-builder/react/export/stringfy/styled-component.ts
index 18c4f14a..d84f2544 100644
--- a/web-builder/react/export/stringfy/styled-component.ts
+++ b/web-builder/react/export/stringfy/styled-component.ts
@@ -11,8 +11,6 @@ export function stringfyReactWidget_STYLED_COMPONENTS(
   widget: IWidgetWithStyle
 ): string {
   const jsx = widget.buildJsx();
-  // const style = widget.buildStyle();
-
   const _jsxStr = stringfy(jsx, {
     language: "tsx",
     formatter: {
diff --git a/web-builder/react/widgets/text/index.ts b/web-builder/react/widgets/text/index.ts
index 10f68cbf..9433a2ea 100644
--- a/web-builder/react/widgets/text/index.ts
+++ b/web-builder/react/widgets/text/index.ts
@@ -1,6 +1,7 @@
 import { ReflectReactWidget } from "../reflect";
 import { TEXT_IMPORT } from "@coli.codes/reflect-web-builder";
 import { css, JSX, JSXText } from "coli";
+import { CssNamedColor } from "@coli.codes/core/css/css-color";
 
 export class ReflectText extends ReflectReactWidget {
   readonly imports: string = TEXT_IMPORT.named;
@@ -19,6 +20,11 @@ export class ReflectText extends ReflectReactWidget {
   }
 
   buildStyle(): css.CSSStyleDeclaration {
-    throw new Error("Method not implemented.");
+    const _css = new css.CSSStyleDeclaration();
+
+    // text color
+    _css.color = CssNamedColor.black.name;
+
+    return _css;
   }
 }
diff --git a/web-builder/styled/index.ts b/web-builder/styled/index.ts
index 6c32f3e1..e110a4ff 100644
--- a/web-builder/styled/index.ts
+++ b/web-builder/styled/index.ts
@@ -1,5 +1,5 @@
 import { WidgetWithStyle } from "@coli.codes/web-builder-core";
-import { ColiBuilder } from "coli";
+import { ColiBuilder, JSXElement } from "coli";
 import { JSX } from "@coli.codes/builder";
 import { stringfy } from "@coli.codes/export-string";
 import { declareStyledComponentVariable } from "./styled-component-declaration";
@@ -7,14 +7,21 @@ import { declareStyledComponentVariable } from "./styled-component-declaration";
 export function makeAsStyled(styled: WidgetWithStyle) {
   const jsx = styled.buildJsx();
 
+  const styledVar = declareStyledComponentVariable(styled);
+  const styledTextTest = stringfy(styledVar, {
+    language: "typescript",
+  });
+  console.log("styled", styledTextTest);
   if (jsx instanceof ColiBuilder) {
-    const styledVar = declareStyledComponentVariable(styled);
-    const styledTextTest = stringfy(styledVar, {
-      language: "typescript",
-    });
-    console.log(styledTextTest);
     return (jsx as JSX).copyWith({
       identifier: styledVar.id,
     });
+  } else if (jsx instanceof JSXElement) {
+    jsx.changeTag(styledVar.id);
+  } else {
+    console.error(
+      `unhandled styled component conversion of widget type of ${typeof jsx}`,
+      jsx
+    );
   }
 }
diff --git a/web-builder/styled/styled-component-declaration.ts b/web-builder/styled/styled-component-declaration.ts
index 7a2cbac2..854de049 100644
--- a/web-builder/styled/styled-component-declaration.ts
+++ b/web-builder/styled/styled-component-declaration.ts
@@ -7,7 +7,8 @@ import {
   VariableDeclaration,
 } from "coli";
 import { WidgetWithStyle } from "@coli.codes/web-builder-core";
-
+import { SyntaxKind } from "@coli.codes/core/ast/syntax-kind";
+import { nameVariable, NameCases } from "@coli.codes/naming";
 export class StyledComponentDeclaration extends VariableDeclaration {
   static styledIdentifier = new Identifier("styled");
 
@@ -19,7 +20,7 @@ export class StyledComponentDeclaration extends VariableDeclaration {
   ) {
     super(name, {
       initializer: StyledComponentDeclaration.makeinitializer(),
-      kind: "const",
+      kind: SyntaxKind.LetKeyword,
     });
   }
 
@@ -41,7 +42,11 @@ export class StyledComponentDeclaration extends VariableDeclaration {
 export function declareStyledComponentVariable(
   widgetConfig: WidgetWithStyle
 ): StyledComponentDeclaration {
-  return new StyledComponentDeclaration("Wrapper", {
+  const varname = nameVariable(undefined, {
+    case: NameCases.pascal,
+  });
+
+  return new StyledComponentDeclaration(varname.name, {
     style: widgetConfig.buildStyle(),
   });
 }

From ee29fd806326d4a22eb903ff5354aa6ce539ac84 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Thu, 3 Jun 2021 20:32:23 +0900
Subject: [PATCH 38/73] add widget key to all web widget

---
 web-builder/core/index.ts                     |  1 +
 web-builder/core/key-from-reflect-widget.ts   | 14 ++++++++++++
 web-builder/core/widget.ts                    | 22 ++++++++++++++++++-
 web-builder/react/widgets/column/index.ts     |  3 ++-
 .../react/widgets/error-widget/index.ts       |  9 +++++---
 web-builder/react/widgets/reflect.ts          |  5 +++++
 web-builder/react/widgets/stack/index.ts      |  3 ++-
 web-builder/react/widgets/text/index.ts       |  5 +++--
 web-builder/react/widgets/widget.ts           |  5 +++--
 9 files changed, 57 insertions(+), 10 deletions(-)
 create mode 100644 web-builder/core/key-from-reflect-widget.ts

diff --git a/web-builder/core/index.ts b/web-builder/core/index.ts
index 38653fe9..5d6aad7e 100644
--- a/web-builder/core/index.ts
+++ b/web-builder/core/index.ts
@@ -1,2 +1,3 @@
 export * from "./widget";
 export * from "./widget-with-style";
+export * from "./key-from-reflect-widget";
diff --git a/web-builder/core/key-from-reflect-widget.ts b/web-builder/core/key-from-reflect-widget.ts
new file mode 100644
index 00000000..b1bc42c3
--- /dev/null
+++ b/web-builder/core/key-from-reflect-widget.ts
@@ -0,0 +1,14 @@
+import { WidgetKey } from "./widget";
+import * as core from "@reflect-ui/core";
+import { nameit, NameCases } from "@coli.codes/naming";
+export function keyFromWidget(widget: core.Widget): WidgetKey {
+  if (!widget.key) {
+    throw `cannot create web widget key from reflect widget because the input reflect widget key is empty or contains invalid value. the givven reflect widget was - ${
+      widget._type
+    } {${JSON.stringify(widget, undefined, 2)}}`;
+  }
+  const name = nameit(widget.key.originName, {
+    case: NameCases.pascal,
+  });
+  return new WidgetKey(widget.key.id, name.name);
+}
diff --git a/web-builder/core/widget.ts b/web-builder/core/widget.ts
index 6368330a..9f3cebae 100644
--- a/web-builder/core/widget.ts
+++ b/web-builder/core/widget.ts
@@ -1,5 +1,25 @@
+export class WidgetKey {
+  id: string;
+  name: string;
+
+  constructor(id: string, name: string) {
+    this.id = id;
+    this.name = name;
+  }
+}
+
+export interface WidgetKey {
+  id: string;
+  name: string;
+}
+
+export type WidgetKeyLike = WidgetKey;
+
 export class Widget {
-  constructor() {}
+  readonly key: WidgetKeyLike;
+  constructor({ key }: { key: WidgetKey }) {
+    this.key = key;
+  }
 }
 
 export interface IMultiChildWidget {
diff --git a/web-builder/react/widgets/column/index.ts b/web-builder/react/widgets/column/index.ts
index 1dcd1d69..55de63bd 100644
--- a/web-builder/react/widgets/column/index.ts
+++ b/web-builder/react/widgets/column/index.ts
@@ -1,3 +1,4 @@
+import { WidgetKey } from "@coli.codes/web-builder-core";
 import { JSX, JSXElementLike } from "coli";
 import { css } from "coli";
 import { ReactWidgets } from "..";
@@ -5,7 +6,7 @@ import { ReactMultiChildWidget } from "../widget";
 
 export class Column extends ReactMultiChildWidget {
   readonly _type = "column";
-  constructor(p: { children: Array<ReactWidgets> }) {
+  constructor(p: { key: WidgetKey; children: Array<ReactWidgets> }) {
     super(p);
   }
   buildContainingJsx(children: JSXElementLike[]): JSXElementLike {
diff --git a/web-builder/react/widgets/error-widget/index.ts b/web-builder/react/widgets/error-widget/index.ts
index 37e3a34e..0fa74e48 100644
--- a/web-builder/react/widgets/error-widget/index.ts
+++ b/web-builder/react/widgets/error-widget/index.ts
@@ -1,10 +1,11 @@
+import { WidgetKey } from "@coli.codes/web-builder-core";
 import { JSX, JSXElementLike, css, JSXText } from "coli";
 
 import { ReactWidget } from "../widget";
 
 export class ErrorWidget extends ReactWidget {
-  constructor(readonly id: string) {
-    super();
+  constructor(p: { key: WidgetKey }) {
+    super(p);
   }
   buildStyle(): css.CSSStyleDeclaration {
     throw new Error("Method not implemented.");
@@ -12,7 +13,9 @@ export class ErrorWidget extends ReactWidget {
   buildJsx(): JSXElementLike {
     return JSX.div({
       children: [
-        new JSXText(`This layer/layout is not handled - id:${this.id}`),
+        new JSXText(
+          `This layer/layout is not handled - key:${JSON.stringify(this.key)}`
+        ),
       ],
     }).make();
   }
diff --git a/web-builder/react/widgets/reflect.ts b/web-builder/react/widgets/reflect.ts
index c8681ba8..bd24c64f 100644
--- a/web-builder/react/widgets/reflect.ts
+++ b/web-builder/react/widgets/reflect.ts
@@ -1,11 +1,16 @@
 import { ReactWidget } from "./widget";
 import { ImportDeclaration, Import, JSX, JSXElementLike } from "coli";
+import { WidgetKey } from "@coli.codes/web-builder-core";
 
 export abstract class ReflectReactWidget extends ReactWidget {
   readonly _type: string;
   readonly imports: string;
   readonly tag: string;
 
+  constructor({ key }: { key: WidgetKey }) {
+    super({ key });
+  }
+
   buildImportDeclaration(): ImportDeclaration {
     return new Import().import(this.imports).from("@reflect-ui/react").make();
   }
diff --git a/web-builder/react/widgets/stack/index.ts b/web-builder/react/widgets/stack/index.ts
index 5771ce37..c9dc1175 100644
--- a/web-builder/react/widgets/stack/index.ts
+++ b/web-builder/react/widgets/stack/index.ts
@@ -3,9 +3,10 @@ import { JSX, JSXElementLike, css } from "coli";
 import { ReactMultiChildWidget } from "../widget";
 
 import type { ReactWidgets } from "..";
+import { WidgetKey } from "@coli.codes/web-builder-core";
 export class Stack extends ReactMultiChildWidget {
   readonly _type = "stack";
-  constructor(p: { children: Array<ReactWidgets> }) {
+  constructor(p: { key: WidgetKey; children: Array<ReactWidgets> }) {
     super(p);
   }
 
diff --git a/web-builder/react/widgets/text/index.ts b/web-builder/react/widgets/text/index.ts
index 9433a2ea..fd91d02c 100644
--- a/web-builder/react/widgets/text/index.ts
+++ b/web-builder/react/widgets/text/index.ts
@@ -2,14 +2,15 @@ import { ReflectReactWidget } from "../reflect";
 import { TEXT_IMPORT } from "@coli.codes/reflect-web-builder";
 import { css, JSX, JSXText } from "coli";
 import { CssNamedColor } from "@coli.codes/core/css/css-color";
+import { WidgetKey } from "@coli.codes/web-builder-core";
 
 export class ReflectText extends ReflectReactWidget {
   readonly imports: string = TEXT_IMPORT.named;
   readonly tag: string = TEXT_IMPORT.name;
 
   data: string;
-  constructor(p: { data: string }) {
-    super();
+  constructor(p: { key: WidgetKey; data: string }) {
+    super({ key: p.key });
     this.data = p.data;
   }
 
diff --git a/web-builder/react/widgets/widget.ts b/web-builder/react/widgets/widget.ts
index 76b6ee5a..d97e6aaa 100644
--- a/web-builder/react/widgets/widget.ts
+++ b/web-builder/react/widgets/widget.ts
@@ -1,4 +1,5 @@
 import { ColiObjectLike } from "@coli.codes/builder";
+import { WidgetKey } from "@coli.codes/web-builder-core";
 import {
   WidgetWithStyle,
   MultiChildWidgetWithStyle,
@@ -16,8 +17,8 @@ export abstract class ReactMultiChildWidget
 {
   readonly children: Array<ReactWidget> = [];
   tag: string;
-  constructor(p: { children: Array<ReactWidget> }) {
-    super();
+  constructor(p: { key: WidgetKey; children: Array<ReactWidget> }) {
+    super({ key: p.key });
     this.children = p.children;
   }
 

From 3615e18e3a25f46e2178a7690af88dc38c9cdc86 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Thu, 3 Jun 2021 20:41:22 +0900
Subject: [PATCH 39/73] fix mismatch

---
 web-builder/core/widget-with-style.ts              | 8 ++++----
 web-builder/styled/styled-component-declaration.ts | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/web-builder/core/widget-with-style.ts b/web-builder/core/widget-with-style.ts
index 437e7fee..3f153f42 100644
--- a/web-builder/core/widget-with-style.ts
+++ b/web-builder/core/widget-with-style.ts
@@ -1,4 +1,4 @@
-import { Widget, IMultiChildWidget } from "./widget";
+import { Widget, IMultiChildWidget, WidgetKey } from "./widget";
 import { css, JSXElementLike } from "coli";
 import { ColiObjectLike } from "@coli.codes/builder";
 
@@ -26,10 +26,10 @@ export abstract class MultiChildWidgetWithStyle
   extends WidgetWithStyle
   implements IWidgetWithStyle, IMultiChildWidget
 {
-  readonly children: Array<IWidgetWithStyle> = [];
+  readonly children: Array<WidgetWithStyle> = [];
 
-  constructor() {
-    super();
+  constructor({ key }: { key: WidgetKey }) {
+    super({ key: key });
   }
   abstract buildStyle(): css.CSSStyleDeclaration;
 
diff --git a/web-builder/styled/styled-component-declaration.ts b/web-builder/styled/styled-component-declaration.ts
index 854de049..599e90f5 100644
--- a/web-builder/styled/styled-component-declaration.ts
+++ b/web-builder/styled/styled-component-declaration.ts
@@ -42,7 +42,7 @@ export class StyledComponentDeclaration extends VariableDeclaration {
 export function declareStyledComponentVariable(
   widgetConfig: WidgetWithStyle
 ): StyledComponentDeclaration {
-  const varname = nameVariable(undefined, {
+  const varname = nameVariable(widgetConfig.key.name, {
     case: NameCases.pascal,
   });
 

From fad25552de6849fc1de3b723adba03b82ebc7fb9 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Thu, 3 Jun 2021 22:13:58 +0900
Subject: [PATCH 40/73] update cssproperties usage

---
 web-builder/core/widget-with-style.ts             |  7 ++++---
 web-builder/react/widgets/button/index.ts         |  3 ++-
 web-builder/react/widgets/column/index.ts         |  9 ++++-----
 web-builder/react/widgets/container/index.ts      |  3 ++-
 web-builder/react/widgets/error-widget/index.ts   |  3 ++-
 web-builder/react/widgets/row/index.ts            |  3 ++-
 web-builder/react/widgets/stack/index.ts          |  9 ++++-----
 web-builder/react/widgets/text/index.ts           | 15 ++++++---------
 .../styled/styled-component-declaration.ts        |  9 ++++++---
 9 files changed, 32 insertions(+), 29 deletions(-)

diff --git a/web-builder/core/widget-with-style.ts b/web-builder/core/widget-with-style.ts
index 3f153f42..5d3ac92e 100644
--- a/web-builder/core/widget-with-style.ts
+++ b/web-builder/core/widget-with-style.ts
@@ -1,9 +1,10 @@
 import { Widget, IMultiChildWidget, WidgetKey } from "./widget";
 import { css, JSXElementLike } from "coli";
 import { ColiObjectLike } from "@coli.codes/builder";
+import { CSSProperties } from "@coli.codes/css";
 
 export interface IWidgetWithStyle {
-  buildStyle(): css.CSSStyleDeclaration;
+  buildStyle(): CSSProperties;
   buildJsx(): ColiObjectLike<JSXElementLike>;
 }
 
@@ -14,7 +15,7 @@ export abstract class WidgetWithStyle
   extends Widget
   implements IWidgetWithStyle
 {
-  abstract buildStyle(): css.CSSStyleDeclaration;
+  abstract buildStyle(): CSSProperties;
 
   abstract buildJsx(): ColiObjectLike<JSXElementLike>;
 }
@@ -31,7 +32,7 @@ export abstract class MultiChildWidgetWithStyle
   constructor({ key }: { key: WidgetKey }) {
     super({ key: key });
   }
-  abstract buildStyle(): css.CSSStyleDeclaration;
+  abstract buildStyle(): CSSProperties;
 
   buildJsx(): ColiObjectLike<JSXElementLike> {
     const children = this.buildChildrenJsx();
diff --git a/web-builder/react/widgets/button/index.ts b/web-builder/react/widgets/button/index.ts
index da611c3f..9706acec 100644
--- a/web-builder/react/widgets/button/index.ts
+++ b/web-builder/react/widgets/button/index.ts
@@ -1,11 +1,12 @@
 import { ReflectReactWidget } from "../reflect";
 import { BUTTON_IMPORT } from "@coli.codes/reflect-web-builder";
 import { css } from "coli";
+import { CSSProperties } from "@coli.codes/css";
 export class ReflectButton extends ReflectReactWidget {
   readonly imports: string = BUTTON_IMPORT.named;
   readonly tag: string = BUTTON_IMPORT.name;
 
-  buildStyle(): css.CSSStyleDeclaration {
+  buildStyle(): CSSProperties {
     throw new Error("Method not implemented.");
   }
 }
diff --git a/web-builder/react/widgets/column/index.ts b/web-builder/react/widgets/column/index.ts
index 55de63bd..0ebba88f 100644
--- a/web-builder/react/widgets/column/index.ts
+++ b/web-builder/react/widgets/column/index.ts
@@ -1,12 +1,11 @@
+import { CSSProperties } from "@coli.codes/css";
 import { WidgetKey } from "@coli.codes/web-builder-core";
 import { JSX, JSXElementLike } from "coli";
-import { css } from "coli";
-import { ReactWidgets } from "..";
-import { ReactMultiChildWidget } from "../widget";
+import { ReactMultiChildWidget, ReactWidget } from "../widget";
 
 export class Column extends ReactMultiChildWidget {
   readonly _type = "column";
-  constructor(p: { key: WidgetKey; children: Array<ReactWidgets> }) {
+  constructor(p: { key: WidgetKey; children: Array<ReactWidget> }) {
     super(p);
   }
   buildContainingJsx(children: JSXElementLike[]): JSXElementLike {
@@ -14,7 +13,7 @@ export class Column extends ReactMultiChildWidget {
       children: children,
     }).make();
   }
-  buildStyle(): css.CSSStyleDeclaration {
+  buildStyle(): CSSProperties {
     throw new Error("Method not implemented.");
   }
 }
diff --git a/web-builder/react/widgets/container/index.ts b/web-builder/react/widgets/container/index.ts
index bee8d95d..1f3e352d 100644
--- a/web-builder/react/widgets/container/index.ts
+++ b/web-builder/react/widgets/container/index.ts
@@ -1,10 +1,11 @@
 import { ColiObjectLike } from "@coli.codes/builder";
+import { CSSProperties } from "@coli.codes/css";
 import { JSX, JSXElementLike, css } from "coli";
 
 import { ReactWidget } from "../widget";
 
 export class Container extends ReactWidget {
-  buildStyle(): css.CSSStyleDeclaration {
+  buildStyle(): CSSProperties {
     throw new Error("Method not implemented.");
   }
   buildJsx(): ColiObjectLike<JSXElementLike> {
diff --git a/web-builder/react/widgets/error-widget/index.ts b/web-builder/react/widgets/error-widget/index.ts
index 0fa74e48..1f9a22e2 100644
--- a/web-builder/react/widgets/error-widget/index.ts
+++ b/web-builder/react/widgets/error-widget/index.ts
@@ -1,3 +1,4 @@
+import { CSSProperties } from "@coli.codes/css";
 import { WidgetKey } from "@coli.codes/web-builder-core";
 import { JSX, JSXElementLike, css, JSXText } from "coli";
 
@@ -7,7 +8,7 @@ export class ErrorWidget extends ReactWidget {
   constructor(p: { key: WidgetKey }) {
     super(p);
   }
-  buildStyle(): css.CSSStyleDeclaration {
+  buildStyle(): CSSProperties {
     throw new Error("Method not implemented.");
   }
   buildJsx(): JSXElementLike {
diff --git a/web-builder/react/widgets/row/index.ts b/web-builder/react/widgets/row/index.ts
index b4858c12..513e4710 100644
--- a/web-builder/react/widgets/row/index.ts
+++ b/web-builder/react/widgets/row/index.ts
@@ -1,5 +1,6 @@
 import { ReactMultiChildWidget } from "../widget";
 import { JSX, JSXElementLike, css } from "coli";
+import { CSSProperties } from "@coli.codes/css";
 
 export class Row extends ReactMultiChildWidget {
   readonly _type = "row";
@@ -9,7 +10,7 @@ export class Row extends ReactMultiChildWidget {
     }).make();
   }
 
-  buildStyle(): css.CSSStyleDeclaration {
+  buildStyle(): CSSProperties {
     throw new Error("Method not implemented.");
   }
 }
diff --git a/web-builder/react/widgets/stack/index.ts b/web-builder/react/widgets/stack/index.ts
index c9dc1175..4a0521cc 100644
--- a/web-builder/react/widgets/stack/index.ts
+++ b/web-builder/react/widgets/stack/index.ts
@@ -1,12 +1,11 @@
 import { JSX, JSXElementLike, css } from "coli";
 
-import { ReactMultiChildWidget } from "../widget";
-
-import type { ReactWidgets } from "..";
+import { ReactMultiChildWidget, ReactWidget } from "../widget";
 import { WidgetKey } from "@coli.codes/web-builder-core";
+import { CSSProperties } from "@coli.codes/css";
 export class Stack extends ReactMultiChildWidget {
   readonly _type = "stack";
-  constructor(p: { key: WidgetKey; children: Array<ReactWidgets> }) {
+  constructor(p: { key: WidgetKey; children: Array<ReactWidget> }) {
     super(p);
   }
 
@@ -16,7 +15,7 @@ export class Stack extends ReactMultiChildWidget {
     }).make();
   }
 
-  buildStyle(): css.CSSStyleDeclaration {
+  buildStyle(): CSSProperties {
     throw new Error("Method not implemented.");
   }
 }
diff --git a/web-builder/react/widgets/text/index.ts b/web-builder/react/widgets/text/index.ts
index fd91d02c..37eea71b 100644
--- a/web-builder/react/widgets/text/index.ts
+++ b/web-builder/react/widgets/text/index.ts
@@ -1,8 +1,8 @@
 import { ReflectReactWidget } from "../reflect";
 import { TEXT_IMPORT } from "@coli.codes/reflect-web-builder";
-import { css, JSX, JSXText } from "coli";
-import { CssNamedColor } from "@coli.codes/core/css/css-color";
+import { JSX, JSXText } from "coli";
 import { WidgetKey } from "@coli.codes/web-builder-core";
+import { CSSProperties } from "@coli.codes/css";
 
 export class ReflectText extends ReflectReactWidget {
   readonly imports: string = TEXT_IMPORT.named;
@@ -20,12 +20,9 @@ export class ReflectText extends ReflectReactWidget {
     }).make();
   }
 
-  buildStyle(): css.CSSStyleDeclaration {
-    const _css = new css.CSSStyleDeclaration();
-
-    // text color
-    _css.color = CssNamedColor.black.name;
-
-    return _css;
+  buildStyle(): CSSProperties {
+    return <CSSProperties>{
+      color: "black", // todo set text color
+    };
   }
 }
diff --git a/web-builder/styled/styled-component-declaration.ts b/web-builder/styled/styled-component-declaration.ts
index 599e90f5..dc3c1f3a 100644
--- a/web-builder/styled/styled-component-declaration.ts
+++ b/web-builder/styled/styled-component-declaration.ts
@@ -9,22 +9,25 @@ import {
 import { WidgetWithStyle } from "@coli.codes/web-builder-core";
 import { SyntaxKind } from "@coli.codes/core/ast/syntax-kind";
 import { nameVariable, NameCases } from "@coli.codes/naming";
+import { CSSProperties, buildCssStandard } from "@coli.codes/css";
+
 export class StyledComponentDeclaration extends VariableDeclaration {
   static styledIdentifier = new Identifier("styled");
 
   constructor(
     readonly name: string,
     params: {
-      style: string | css.CSSStyleDeclaration;
+      style: CSSProperties;
     }
   ) {
     super(name, {
-      initializer: StyledComponentDeclaration.makeinitializer(),
+      initializer: StyledComponentDeclaration.makeinitializer(params.style),
       kind: SyntaxKind.LetKeyword,
     });
   }
 
-  static makeinitializer(): TaggedTemplateExpression {
+  static makeinitializer(style: CSSProperties): TaggedTemplateExpression {
+    const stylestring = buildCssStandard(style);
     return new TaggedTemplateExpression(
       new PropertyAccessExpression(
         StyledComponentDeclaration.styledIdentifier,

From 2fcabcf38ab6863b82355e9f2fe44dcb7874e841 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Thu, 3 Jun 2021 22:31:26 +0900
Subject: [PATCH 41/73] fill all empty style

---
 web-builder/react/export/stringfy/styled-component.ts | 8 ++++++--
 web-builder/react/widgets/button/index.ts             | 2 +-
 web-builder/react/widgets/column/index.ts             | 5 ++++-
 web-builder/react/widgets/container/index.ts          | 2 +-
 web-builder/react/widgets/error-widget/index.ts       | 4 +++-
 web-builder/react/widgets/row/index.ts                | 5 ++++-
 web-builder/react/widgets/stack/index.ts              | 2 +-
 web-builder/styled/styled-component-declaration.ts    | 4 +---
 8 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/web-builder/react/export/stringfy/styled-component.ts b/web-builder/react/export/stringfy/styled-component.ts
index d84f2544..08052fa6 100644
--- a/web-builder/react/export/stringfy/styled-component.ts
+++ b/web-builder/react/export/stringfy/styled-component.ts
@@ -1,5 +1,6 @@
-import { IWidgetWithStyle } from "@coli.codes/web-builder-core/widget-with-style";
 import { stringfy } from "@coli.codes/export-string";
+import { makeAsStyled } from "@web-builder/styled";
+import { ReactWidget } from "../../widgets";
 
 /**
  * styled components pattern with either emotion or styled-component
@@ -8,8 +9,11 @@ import { stringfy } from "@coli.codes/export-string";
  * @returns
  */
 export function stringfyReactWidget_STYLED_COMPONENTS(
-  widget: IWidgetWithStyle
+  widget: ReactWidget
 ): string {
+  const styled = makeAsStyled(widget);
+  console.log("styled", styled);
+
   const jsx = widget.buildJsx();
   const _jsxStr = stringfy(jsx, {
     language: "tsx",
diff --git a/web-builder/react/widgets/button/index.ts b/web-builder/react/widgets/button/index.ts
index 9706acec..1ad2484a 100644
--- a/web-builder/react/widgets/button/index.ts
+++ b/web-builder/react/widgets/button/index.ts
@@ -7,6 +7,6 @@ export class ReflectButton extends ReflectReactWidget {
   readonly tag: string = BUTTON_IMPORT.name;
 
   buildStyle(): CSSProperties {
-    throw new Error("Method not implemented.");
+    return {};
   }
 }
diff --git a/web-builder/react/widgets/column/index.ts b/web-builder/react/widgets/column/index.ts
index 0ebba88f..623ca39b 100644
--- a/web-builder/react/widgets/column/index.ts
+++ b/web-builder/react/widgets/column/index.ts
@@ -14,6 +14,9 @@ export class Column extends ReactMultiChildWidget {
     }).make();
   }
   buildStyle(): CSSProperties {
-    throw new Error("Method not implemented.");
+    return {
+      display: "flex",
+      "flex-direction": "column",
+    };
   }
 }
diff --git a/web-builder/react/widgets/container/index.ts b/web-builder/react/widgets/container/index.ts
index 1f3e352d..d634aa62 100644
--- a/web-builder/react/widgets/container/index.ts
+++ b/web-builder/react/widgets/container/index.ts
@@ -6,7 +6,7 @@ import { ReactWidget } from "../widget";
 
 export class Container extends ReactWidget {
   buildStyle(): CSSProperties {
-    throw new Error("Method not implemented.");
+    return {};
   }
   buildJsx(): ColiObjectLike<JSXElementLike> {
     return JSX.div().make();
diff --git a/web-builder/react/widgets/error-widget/index.ts b/web-builder/react/widgets/error-widget/index.ts
index 1f9a22e2..b95a5f7e 100644
--- a/web-builder/react/widgets/error-widget/index.ts
+++ b/web-builder/react/widgets/error-widget/index.ts
@@ -9,7 +9,9 @@ export class ErrorWidget extends ReactWidget {
     super(p);
   }
   buildStyle(): CSSProperties {
-    throw new Error("Method not implemented.");
+    return {
+      color: "red",
+    };
   }
   buildJsx(): JSXElementLike {
     return JSX.div({
diff --git a/web-builder/react/widgets/row/index.ts b/web-builder/react/widgets/row/index.ts
index 513e4710..814875fa 100644
--- a/web-builder/react/widgets/row/index.ts
+++ b/web-builder/react/widgets/row/index.ts
@@ -11,6 +11,9 @@ export class Row extends ReactMultiChildWidget {
   }
 
   buildStyle(): CSSProperties {
-    throw new Error("Method not implemented.");
+    return {
+      display: "flex",
+      "flex-direction": "row",
+    };
   }
 }
diff --git a/web-builder/react/widgets/stack/index.ts b/web-builder/react/widgets/stack/index.ts
index 4a0521cc..f35679f0 100644
--- a/web-builder/react/widgets/stack/index.ts
+++ b/web-builder/react/widgets/stack/index.ts
@@ -16,6 +16,6 @@ export class Stack extends ReactMultiChildWidget {
   }
 
   buildStyle(): CSSProperties {
-    throw new Error("Method not implemented.");
+    return {};
   }
 }
diff --git a/web-builder/styled/styled-component-declaration.ts b/web-builder/styled/styled-component-declaration.ts
index dc3c1f3a..5b48c94f 100644
--- a/web-builder/styled/styled-component-declaration.ts
+++ b/web-builder/styled/styled-component-declaration.ts
@@ -34,9 +34,7 @@ export class StyledComponentDeclaration extends VariableDeclaration {
         "div"
       ),
       {
-        template: new ast.TemplateLiteral(`
-              margin: 60px 20px;
-            `),
+        template: new ast.TemplateLiteral(stylestring),
       }
     );
   }

From 9c0b09f2b19af7684fbf0d1c44874f84f106c583 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Fri, 4 Jun 2021 15:27:56 +0900
Subject: [PATCH 42/73] add children

---
 web-builder/core/widget.ts                    |  1 +
 .../react/export/stringfy/styled-component.ts | 27 ++++++++++++++-----
 web-builder/react/widgets/widget.ts           |  6 +++--
 3 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/web-builder/core/widget.ts b/web-builder/core/widget.ts
index 9f3cebae..24687b21 100644
--- a/web-builder/core/widget.ts
+++ b/web-builder/core/widget.ts
@@ -17,6 +17,7 @@ export type WidgetKeyLike = WidgetKey;
 
 export class Widget {
   readonly key: WidgetKeyLike;
+  children?: Widget[];
   constructor({ key }: { key: WidgetKey }) {
     this.key = key;
   }
diff --git a/web-builder/react/export/stringfy/styled-component.ts b/web-builder/react/export/stringfy/styled-component.ts
index 08052fa6..495a8c82 100644
--- a/web-builder/react/export/stringfy/styled-component.ts
+++ b/web-builder/react/export/stringfy/styled-component.ts
@@ -1,4 +1,4 @@
-import { stringfy } from "@coli.codes/export-string";
+import { stringfy, format } from "@coli.codes/export-string";
 import { makeAsStyled } from "@web-builder/styled";
 import { ReactWidget } from "../../widgets";
 
@@ -11,17 +11,32 @@ import { ReactWidget } from "../../widgets";
 export function stringfyReactWidget_STYLED_COMPONENTS(
   widget: ReactWidget
 ): string {
+  widget.children?.map((c) => {
+    // c.buildJsx()
+  });
   const styled = makeAsStyled(widget);
   console.log("styled", styled);
 
   const jsx = widget.buildJsx();
+
   const _jsxStr = stringfy(jsx, {
     language: "tsx",
-    formatter: {
-      use: "pritter",
-      parser: "typescript",
-    },
   });
 
-  return _jsxStr;
+  const finalFile = `
+import React from "react"
+import styled from "@emotion/styled"
+
+export function Component(){
+  return (${_jsxStr});
+}x
+
+// styles
+${styled}
+`;
+
+  return format(finalFile, {
+    use: "pritter",
+    parser: "typescript",
+  });
 }
diff --git a/web-builder/react/widgets/widget.ts b/web-builder/react/widgets/widget.ts
index d97e6aaa..1554434a 100644
--- a/web-builder/react/widgets/widget.ts
+++ b/web-builder/react/widgets/widget.ts
@@ -9,13 +9,15 @@ import { JSX, JSXElementLike } from "coli";
 /**
  * React Widget that requires no additional custom import rather than react
  */
-export abstract class ReactWidget extends WidgetWithStyle {}
+export abstract class ReactWidget extends WidgetWithStyle {
+  children: ReactWidget[];
+}
 
 export abstract class ReactMultiChildWidget
   extends ReactWidget
   implements MultiChildWidgetWithStyle
 {
-  readonly children: Array<ReactWidget> = [];
+  readonly children: ReactWidget[] = [];
   tag: string;
   constructor(p: { key: WidgetKey; children: Array<ReactWidget> }) {
     super({ key: p.key });

From 01d19c3cb5e4f4dd6bf0f3cba4fd7e241ed18f7e Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sat, 5 Jun 2021 20:09:42 +0900
Subject: [PATCH 43/73] styled component transformaton support

---
 web-builder/core/widget-with-style.ts         |  41 ++-
 web-builder/core/widget.ts                    |   8 +-
 .../create-react-app-typescript/index.ts      |   2 +-
 web-builder/react/export/builder/index.ts     |  86 +++++++
 web-builder/react/export/exportable/index.ts  |   7 +
 web-builder/react/export/index.ts             |   2 +
 .../react/export/stringfy/styled-component.ts | 237 ++++++++++++++++--
 web-builder/react/widgets/button/index.ts     |   5 +-
 web-builder/react/widgets/column/index.ts     |  12 +-
 web-builder/react/widgets/container/index.ts  |   9 +-
 .../react/widgets/error-widget/index.ts       |  20 +-
 web-builder/react/widgets/reflect.ts          |  14 +-
 web-builder/react/widgets/row/index.ts        |  29 ++-
 web-builder/react/widgets/stack/index.ts      |  12 +-
 web-builder/react/widgets/text/index.ts       |   8 +-
 web-builder/react/widgets/widget.ts           |  45 ++--
 web-builder/styled/index.ts                   |  68 +++--
 .../styled/styled-component-declaration.ts    |  39 ++-
 18 files changed, 510 insertions(+), 134 deletions(-)
 create mode 100644 web-builder/react/export/builder/index.ts
 create mode 100644 web-builder/react/export/exportable/index.ts

diff --git a/web-builder/core/widget-with-style.ts b/web-builder/core/widget-with-style.ts
index 5d3ac92e..674569ec 100644
--- a/web-builder/core/widget-with-style.ts
+++ b/web-builder/core/widget-with-style.ts
@@ -1,11 +1,16 @@
 import { Widget, IMultiChildWidget, WidgetKey } from "./widget";
-import { css, JSXElementLike } from "coli";
-import { ColiObjectLike } from "@coli.codes/builder";
+import { JSXAtrributes, JSXIdentifier } from "coli";
 import { CSSProperties } from "@coli.codes/css";
+import { ColiObjectLike } from "@coli.codes/builder";
+
+export interface JSXElementConfig {
+  tag: ColiObjectLike<JSXIdentifier>;
+  attributes?: JSXAtrributes;
+}
 
 export interface IWidgetWithStyle {
-  buildStyle(): CSSProperties;
-  buildJsx(): ColiObjectLike<JSXElementLike>;
+  styleData(): CSSProperties;
+  jsxConfig(): JSXElementConfig;
 }
 
 /**
@@ -13,11 +18,10 @@ export interface IWidgetWithStyle {
  */
 export abstract class WidgetWithStyle
   extends Widget
-  implements IWidgetWithStyle
-{
-  abstract buildStyle(): CSSProperties;
+  implements IWidgetWithStyle {
+  abstract styleData(): CSSProperties;
 
-  abstract buildJsx(): ColiObjectLike<JSXElementLike>;
+  abstract jsxConfig(): JSXElementConfig;
 }
 
 /**
@@ -25,28 +29,13 @@ export abstract class WidgetWithStyle
  */
 export abstract class MultiChildWidgetWithStyle
   extends WidgetWithStyle
-  implements IWidgetWithStyle, IMultiChildWidget
-{
+  implements IWidgetWithStyle, IMultiChildWidget {
   readonly children: Array<WidgetWithStyle> = [];
 
   constructor({ key }: { key: WidgetKey }) {
     super({ key: key });
   }
-  abstract buildStyle(): CSSProperties;
+  abstract styleData(): CSSProperties;
 
-  buildJsx(): ColiObjectLike<JSXElementLike> {
-    const children = this.buildChildrenJsx();
-    const container = this.buildContainingJsx(children);
-    return container;
-  }
-
-  abstract buildContainingJsx(
-    children: Array<ColiObjectLike<JSXElementLike>>
-  ): ColiObjectLike<JSXElementLike>;
-
-  buildChildrenJsx(): Array<ColiObjectLike<JSXElementLike>> {
-    return this.children?.map((c) => {
-      return c.buildJsx();
-    });
-  }
+  abstract jsxConfig(): JSXElementConfig;
 }
diff --git a/web-builder/core/widget.ts b/web-builder/core/widget.ts
index 24687b21..97ad500f 100644
--- a/web-builder/core/widget.ts
+++ b/web-builder/core/widget.ts
@@ -1,15 +1,17 @@
+export type WidgetKeyId = string;
+
 export class WidgetKey {
-  id: string;
+  id: WidgetKeyId;
   name: string;
 
-  constructor(id: string, name: string) {
+  constructor(id: WidgetKeyId, name: string) {
     this.id = id;
     this.name = name;
   }
 }
 
 export interface WidgetKey {
-  id: string;
+  id: WidgetKeyId;
   name: string;
 }
 
diff --git a/web-builder/nodejs/templates/create-react-app-typescript/index.ts b/web-builder/nodejs/templates/create-react-app-typescript/index.ts
index a08ab63e..de71ad2d 100644
--- a/web-builder/nodejs/templates/create-react-app-typescript/index.ts
+++ b/web-builder/nodejs/templates/create-react-app-typescript/index.ts
@@ -1,4 +1,4 @@
-import { PackageManifest } from "../../package";
+import { PackageManifest } from "../../package/manifest";
 
 /**
  * ```
diff --git a/web-builder/react/export/builder/index.ts b/web-builder/react/export/builder/index.ts
new file mode 100644
index 00000000..91f62332
--- /dev/null
+++ b/web-builder/react/export/builder/index.ts
@@ -0,0 +1,86 @@
+import { ColiObjectLike, handle } from "@coli.codes/builder";
+import { JSXElementConfig } from "@coli.codes/web-builder-core";
+import {
+  JSX,
+  JSXClosingElement,
+  JSXElement,
+  JSXElementLike,
+  JSXIdentifier,
+  JSXOpeningElement,
+  JSXText,
+} from "coli";
+import {
+  ReactMultiChildWidget,
+  ReactSingleChildWidget,
+  ReactTextChildWidget,
+  ReactWidget,
+} from "../../widgets";
+import { ReactComponentExportable } from "../exportable";
+
+export function buildWidgetExportable(widget: ReactWidget) {
+  const _key = widget.key;
+  const _id = _key.id;
+  const _name = _key.name;
+  const jsxconfg = widget.jsxConfig();
+  let jsx;
+  let style;
+
+  if (widget instanceof ReactMultiChildWidget) {
+    const children = widget.children;
+    jsx = buildJsx(widget);
+
+    //
+  } else if (widget instanceof ReactSingleChildWidget) {
+    const child = widget.child;
+    jsx = buildJsx(widget);
+    //
+  } else if (widget instanceof ReactTextChildWidget) {
+    const text = widget.text;
+    jsx = buildTextChildJsx(widget);
+    //
+  }
+
+  //   return new ReactComponentExportable({});
+}
+
+function handleWidget(widget: ReactWidget) {}
+
+function buildTextChildJsx(textchildwidget: ReactTextChildWidget) {
+  const config = textchildwidget.jsxConfig();
+  const text = textchildwidget.text;
+  const tag = handle<JSXIdentifier>(config.tag);
+
+  return new JSXElement({
+    openingElement: new JSXOpeningElement(tag, {
+      atrributes: config.attributes,
+    }),
+    children: new JSXText(text),
+    closingElement: new JSXClosingElement(tag),
+  });
+}
+
+function buildContainingJsx(
+  container: JSXElementConfig,
+  children: Array<JSXElementLike>
+): JSXElementLike {
+  const tag = handle<JSXIdentifier>(container.tag);
+  return new JSXElement({
+    openingElement: new JSXOpeningElement(tag, {
+      atrributes: container.attributes,
+    }),
+    closingElement: new JSXClosingElement(tag),
+    children: children,
+  });
+}
+
+function buildJsx(widget: ReactWidget): JSXElementLike {
+  const children = buildChildrenJsx(widget.children);
+  const container = buildContainingJsx(widget.jsxConfig(), children);
+  return container;
+}
+
+function buildChildrenJsx(children: Array<ReactWidget>): Array<JSXElementLike> {
+  return children?.map((c) => {
+    return buildJsx(c);
+  });
+}
diff --git a/web-builder/react/export/exportable/index.ts b/web-builder/react/export/exportable/index.ts
new file mode 100644
index 00000000..22fd40c4
--- /dev/null
+++ b/web-builder/react/export/exportable/index.ts
@@ -0,0 +1,7 @@
+/**
+ * coli configurable ecportable object.
+ * A snapshot object
+ */
+export class ReactComponentExportable {
+  constructor() {}
+}
diff --git a/web-builder/react/export/index.ts b/web-builder/react/export/index.ts
index 0e27ddf1..ae54e2c2 100644
--- a/web-builder/react/export/index.ts
+++ b/web-builder/react/export/index.ts
@@ -1 +1,3 @@
 export * from "./stringfy";
+export * from "./builder";
+export * from "./exportable";
diff --git a/web-builder/react/export/stringfy/styled-component.ts b/web-builder/react/export/stringfy/styled-component.ts
index 495a8c82..997e8d44 100644
--- a/web-builder/react/export/stringfy/styled-component.ts
+++ b/web-builder/react/export/stringfy/styled-component.ts
@@ -1,42 +1,235 @@
+import { handle } from "@coli.codes/builder";
 import { stringfy, format } from "@coli.codes/export-string";
-import { makeAsStyled } from "@web-builder/styled";
-import { ReactWidget } from "../../widgets";
+import { JSXElementConfig } from "@coli.codes/web-builder-core";
+import {
+  buildStyledComponentConfig,
+  StyledComponentJSXElementConfig,
+} from "@web-builder/styled";
+import { StyledComponentDeclaration } from "@web-builder/styled/styled-component-declaration";
+import {
+  BlockStatement,
+  FunctionDeclaration,
+  Import,
+  ImportDeclaration,
+  JSXClosingElement,
+  JSXElement,
+  JSXElementLike,
+  JSXIdentifier,
+  JSXOpeningElement,
+  JSXText,
+  Return,
+  ReturnStatement,
+  SourceFile,
+  VariableDeclaration,
+} from "coli";
+import { react_imports } from "../../build-app/import-specifications";
+import {
+  ReactMultiChildWidget,
+  ReactSingleChildWidget,
+  ReactTextChildWidget,
+  ReactWidget,
+  WidgetKeyId,
+} from "../../widgets";
+
+const IMPORT_DEFAULT_STYLED_FROM_EMOTION_STYLED = new Import()
+  .importDefault("styled")
+  .from("@emotion/styled")
+  .make();
+
+const imports = [
+  react_imports.import_react_from_react,
+  IMPORT_DEFAULT_STYLED_FROM_EMOTION_STYLED,
+];
 
 /**
  * styled components pattern with either emotion or styled-component
  * @todo - this is not fully implemented
- * @param widget
+ * @param component
  * @returns
  */
 export function stringfyReactWidget_STYLED_COMPONENTS(
-  widget: ReactWidget
+  component: ReactWidget
 ): string {
-  widget.children?.map((c) => {
-    // c.buildJsx()
+  const componentName = component.key.name;
+
+  // buildWidgetExportable(component);
+
+  const styledConfigWidgetMap: StyledConfigWidgetMap = getWidgetStyledConfigMap(
+    component
+  );
+
+  function getStyledConfigById(id: string): StyledComponentJSXElementConfig {
+    return styledConfigWidgetMap.get(id);
+  }
+
+  function buildComponentFunction(): FunctionDeclaration {
+    function jsxBuilder(widget: ReactWidget) {
+      const children = widget.children?.map((comp) => {
+        const config = getStyledConfigById(comp.key.id);
+        const childrenJSX = jsxBuilder(comp);
+        return new JSXElement({
+          openingElement: new JSXOpeningElement(config.tag),
+          closingElement: new JSXClosingElement(config.tag),
+          children: childrenJSX,
+        });
+      });
+
+      const config = getStyledConfigById(widget.key.id);
+      return new JSXElement({
+        openingElement: new JSXOpeningElement(config.tag),
+        closingElement: new JSXClosingElement(config.tag),
+        children: children,
+      });
+    }
+
+    let jsxTree = jsxBuilder(component);
+    const componentFunction = new FunctionDeclaration(componentName, {
+      body: new BlockStatement(new Return(jsxTree)),
+    });
+
+    return componentFunction;
+  }
+
+  const componentFunction = buildComponentFunction();
+
+  const styledComponentDeclarations = Array.from(
+    styledConfigWidgetMap.keys()
+  ).map((k) => {
+    return styledConfigWidgetMap.get(k).styledComponent;
   });
-  const styled = makeAsStyled(widget);
-  console.log("styled", styled);
 
-  const jsx = widget.buildJsx();
+  const file = buildReactComponentFile({
+    componentName: componentName,
+    imports: imports,
+    component: componentFunction,
+    styleVariables: styledComponentDeclarations,
+  });
 
-  const _jsxStr = stringfy(jsx, {
+  const final = stringfy(file.blocks, {
     language: "tsx",
+    formatter: {
+      parser: "typescript",
+      use: "pritter",
+    },
   });
 
-  const finalFile = `
-import React from "react"
-import styled from "@emotion/styled"
+  return final;
+}
+
+function buildReactComponentFile(p: {
+  componentName: string;
+  imports: Array<ImportDeclaration>;
+  component: FunctionDeclaration;
+  styleVariables: Array<VariableDeclaration>;
+}): SourceFile {
+  const { imports, componentName, component, styleVariables } = p;
+  const file = new SourceFile({
+    name: `${componentName}.tsx`,
+    path: "src/components",
+  });
+
+  file.import(...imports);
+  file.declare(component);
+  file.declare(...styleVariables);
+
+  return file;
+}
+
+type StyledConfigWidgetMap = Map<WidgetKeyId, StyledComponentJSXElementConfig>;
+function getWidgetStyledConfigMap(
+  rootWidget: ReactWidget
+): StyledConfigWidgetMap {
+  const styledConfigWidgetMap: StyledConfigWidgetMap = new Map();
 
-export function Component(){
-  return (${_jsxStr});
-}x
+  function mapper(w: ReactWidget) {
+    const isRoot = w.key.id == rootWidget.key.id;
+    const id = w.key.id;
+    const styledConfig = buildStyledComponentConfig(w, {
+      transformRootName: true,
+      context: {
+        root: isRoot,
+      },
+    });
 
-// styles
-${styled}
-`;
+    styledConfigWidgetMap.set(id, styledConfig);
+    w.children?.map((wc) => {
+      mapper(wc);
+    });
+  }
+
+  mapper(rootWidget);
+
+  return styledConfigWidgetMap;
+}
+
+////
+//// region jsx tree builder
+////
+
+export function buildWidgetExportable(widget: ReactWidget) {
+  const _key = widget.key;
+  const _id = _key.id;
+  const _name = _key.name;
+  const jsxconfg = widget.jsxConfig();
+  let jsx;
+  let style;
+
+  if (widget instanceof ReactMultiChildWidget) {
+    const children = widget.children;
+    jsx = buildJsx(widget);
+
+    //
+  } else if (widget instanceof ReactSingleChildWidget) {
+    const child = widget.child;
+    jsx = buildJsx(widget);
+    //
+  } else if (widget instanceof ReactTextChildWidget) {
+    const text = widget.text;
+    jsx = buildTextChildJsx(widget);
+    //
+  }
+
+  //   return new ReactComponentExportable({});
+}
+
+function handleWidget(widget: ReactWidget) {}
+
+function buildTextChildJsx(textchildwidget: ReactTextChildWidget) {
+  const config = textchildwidget.jsxConfig();
+  const text = textchildwidget.text;
+  const tag = handle<JSXIdentifier>(config.tag);
+
+  return new JSXElement({
+    openingElement: new JSXOpeningElement(tag, {
+      atrributes: config.attributes,
+    }),
+    children: new JSXText(text),
+    closingElement: new JSXClosingElement(tag),
+  });
+}
+
+function buildContainingJsx(
+  container: JSXElementConfig,
+  children: Array<JSXElementLike>
+): JSXElementLike {
+  const tag = handle<JSXIdentifier>(container.tag);
+  return new JSXElement({
+    openingElement: new JSXOpeningElement(tag, {
+      atrributes: container.attributes,
+    }),
+    closingElement: new JSXClosingElement(tag),
+    children: children,
+  });
+}
+
+function buildJsx(widget: ReactWidget): JSXElementLike {
+  const children = buildChildrenJsx(widget.children);
+  const container = buildContainingJsx(widget.jsxConfig(), children);
+  return container;
+}
 
-  return format(finalFile, {
-    use: "pritter",
-    parser: "typescript",
+function buildChildrenJsx(children: Array<ReactWidget>): Array<JSXElementLike> {
+  return children?.map((c) => {
+    return buildJsx(c);
   });
 }
diff --git a/web-builder/react/widgets/button/index.ts b/web-builder/react/widgets/button/index.ts
index 1ad2484a..f91e9a08 100644
--- a/web-builder/react/widgets/button/index.ts
+++ b/web-builder/react/widgets/button/index.ts
@@ -6,7 +6,10 @@ export class ReflectButton extends ReflectReactWidget {
   readonly imports: string = BUTTON_IMPORT.named;
   readonly tag: string = BUTTON_IMPORT.name;
 
-  buildStyle(): CSSProperties {
+  attributes() {
+    return {};
+  }
+  styleData(): CSSProperties {
     return {};
   }
 }
diff --git a/web-builder/react/widgets/column/index.ts b/web-builder/react/widgets/column/index.ts
index 623ca39b..38d603e1 100644
--- a/web-builder/react/widgets/column/index.ts
+++ b/web-builder/react/widgets/column/index.ts
@@ -8,12 +8,14 @@ export class Column extends ReactMultiChildWidget {
   constructor(p: { key: WidgetKey; children: Array<ReactWidget> }) {
     super(p);
   }
-  buildContainingJsx(children: JSXElementLike[]): JSXElementLike {
-    return JSX.div({
-      children: children,
-    }).make();
+
+  jsxConfig() {
+    return {
+      tag: JSX.identifier("div"),
+    };
   }
-  buildStyle(): CSSProperties {
+
+  styleData(): CSSProperties {
     return {
       display: "flex",
       "flex-direction": "column",
diff --git a/web-builder/react/widgets/container/index.ts b/web-builder/react/widgets/container/index.ts
index d634aa62..6f5009df 100644
--- a/web-builder/react/widgets/container/index.ts
+++ b/web-builder/react/widgets/container/index.ts
@@ -1,14 +1,17 @@
 import { ColiObjectLike } from "@coli.codes/builder";
 import { CSSProperties } from "@coli.codes/css";
+import { JSXElementConfig } from "@coli.codes/web-builder-core";
 import { JSX, JSXElementLike, css } from "coli";
 
 import { ReactWidget } from "../widget";
 
 export class Container extends ReactWidget {
-  buildStyle(): CSSProperties {
+  styleData(): CSSProperties {
     return {};
   }
-  buildJsx(): ColiObjectLike<JSXElementLike> {
-    return JSX.div().make();
+  jsxConfig(): JSXElementConfig {
+    return {
+      tag: JSX.identifier("div"),
+    };
   }
 }
diff --git a/web-builder/react/widgets/error-widget/index.ts b/web-builder/react/widgets/error-widget/index.ts
index b95a5f7e..f1f8be62 100644
--- a/web-builder/react/widgets/error-widget/index.ts
+++ b/web-builder/react/widgets/error-widget/index.ts
@@ -1,5 +1,5 @@
 import { CSSProperties } from "@coli.codes/css";
-import { WidgetKey } from "@coli.codes/web-builder-core";
+import { JSXElementConfig, WidgetKey } from "@coli.codes/web-builder-core";
 import { JSX, JSXElementLike, css, JSXText } from "coli";
 
 import { ReactWidget } from "../widget";
@@ -8,18 +8,18 @@ export class ErrorWidget extends ReactWidget {
   constructor(p: { key: WidgetKey }) {
     super(p);
   }
-  buildStyle(): CSSProperties {
+  styleData(): CSSProperties {
     return {
       color: "red",
     };
   }
-  buildJsx(): JSXElementLike {
-    return JSX.div({
-      children: [
-        new JSXText(
-          `This layer/layout is not handled - key:${JSON.stringify(this.key)}`
-        ),
-      ],
-    }).make();
+
+  jsxConfig(): JSXElementConfig {
+    return <JSXElementConfig>{
+      tag: JSX.identifier("em"),
+    };
+
+    /// TODO - return text
+    // `This layer/layout is not handled - key:${JSON.stringify(this.key)}`
   }
 }
diff --git a/web-builder/react/widgets/reflect.ts b/web-builder/react/widgets/reflect.ts
index bd24c64f..d15d4ffb 100644
--- a/web-builder/react/widgets/reflect.ts
+++ b/web-builder/react/widgets/reflect.ts
@@ -1,8 +1,9 @@
 import { ReactWidget } from "./widget";
 import { ImportDeclaration, Import, JSX, JSXElementLike } from "coli";
-import { WidgetKey } from "@coli.codes/web-builder-core";
+import { JSXElementConfig, WidgetKey } from "@coli.codes/web-builder-core";
+import { ColiObjectLike } from "@coli.codes/builder";
 
-export abstract class ReflectReactWidget extends ReactWidget {
+export abstract class ReflectReactWidget<T = any> extends ReactWidget {
   readonly _type: string;
   readonly imports: string;
   readonly tag: string;
@@ -15,7 +16,12 @@ export abstract class ReflectReactWidget extends ReactWidget {
     return new Import().import(this.imports).from("@reflect-ui/react").make();
   }
 
-  buildJsx(): JSXElementLike {
-    return JSX.tag(this.tag).__finalize();
+  abstract attributes(): ColiObjectLike<any>;
+
+  jsxConfig(): JSXElementConfig {
+    return {
+      tag: JSX.identifier(this.tag),
+      // atrributes: this.attributes() as any,
+    };
   }
 }
diff --git a/web-builder/react/widgets/row/index.ts b/web-builder/react/widgets/row/index.ts
index 814875fa..45962180 100644
--- a/web-builder/react/widgets/row/index.ts
+++ b/web-builder/react/widgets/row/index.ts
@@ -1,16 +1,35 @@
-import { ReactMultiChildWidget } from "../widget";
+import { ReactMultiChildWidget, ReactWidget } from "../widget";
 import { JSX, JSXElementLike, css } from "coli";
 import { CSSProperties } from "@coli.codes/css";
+import {
+  JSXElementConfig,
+  Widget,
+  WidgetKey,
+} from "@coli.codes/web-builder-core";
 
 export class Row extends ReactMultiChildWidget {
   readonly _type = "row";
-  buildContainingJsx(children: JSXElementLike[]): JSXElementLike {
-    return JSX.div({
+
+  constructor({
+    key,
+    children,
+  }: {
+    key: WidgetKey;
+    children: Array<ReactWidget>;
+  }) {
+    super({
+      key: key,
       children: children,
-    }).make();
+    });
+  }
+
+  jsxConfig(): JSXElementConfig {
+    return <JSXElementConfig>{
+      tag: JSX.identifier("div"),
+    };
   }
 
-  buildStyle(): CSSProperties {
+  styleData(): CSSProperties {
     return {
       display: "flex",
       "flex-direction": "row",
diff --git a/web-builder/react/widgets/stack/index.ts b/web-builder/react/widgets/stack/index.ts
index f35679f0..e051c7e0 100644
--- a/web-builder/react/widgets/stack/index.ts
+++ b/web-builder/react/widgets/stack/index.ts
@@ -1,7 +1,7 @@
 import { JSX, JSXElementLike, css } from "coli";
 
 import { ReactMultiChildWidget, ReactWidget } from "../widget";
-import { WidgetKey } from "@coli.codes/web-builder-core";
+import { JSXElementConfig, WidgetKey } from "@coli.codes/web-builder-core";
 import { CSSProperties } from "@coli.codes/css";
 export class Stack extends ReactMultiChildWidget {
   readonly _type = "stack";
@@ -9,13 +9,13 @@ export class Stack extends ReactMultiChildWidget {
     super(p);
   }
 
-  buildContainingJsx(children: JSXElementLike[]): JSXElementLike {
-    return JSX.div({
-      children: children,
-    }).make();
+  jsxConfig(): JSXElementConfig {
+    return <JSXElementConfig>{
+      tag: JSX.identifier("Stack"),
+    };
   }
 
-  buildStyle(): CSSProperties {
+  styleData(): CSSProperties {
     return {};
   }
 }
diff --git a/web-builder/react/widgets/text/index.ts b/web-builder/react/widgets/text/index.ts
index 37eea71b..269ca778 100644
--- a/web-builder/react/widgets/text/index.ts
+++ b/web-builder/react/widgets/text/index.ts
@@ -14,13 +14,11 @@ export class ReflectText extends ReflectReactWidget {
     this.data = p.data;
   }
 
-  buildJsx() {
-    return JSX.tag(this.tag, {
-      children: [new JSXText(this.data)],
-    }).make();
+  attributes() {
+    throw new Error("Method not implemented.");
   }
 
-  buildStyle(): CSSProperties {
+  styleData(): CSSProperties {
     return <CSSProperties>{
       color: "black", // todo set text color
     };
diff --git a/web-builder/react/widgets/widget.ts b/web-builder/react/widgets/widget.ts
index 1554434a..9c47b6f8 100644
--- a/web-builder/react/widgets/widget.ts
+++ b/web-builder/react/widgets/widget.ts
@@ -1,46 +1,55 @@
-import { ColiObjectLike } from "@coli.codes/builder";
 import { WidgetKey } from "@coli.codes/web-builder-core";
 import {
   WidgetWithStyle,
   MultiChildWidgetWithStyle,
 } from "@coli.codes/web-builder-core/widget-with-style";
-import { JSX, JSXElementLike } from "coli";
 
 /**
  * React Widget that requires no additional custom import rather than react
  */
 export abstract class ReactWidget extends WidgetWithStyle {
-  children: ReactWidget[];
+  readonly children?: ReactWidget[];
 }
 
 export abstract class ReactMultiChildWidget
   extends ReactWidget
-  implements MultiChildWidgetWithStyle
-{
+  implements MultiChildWidgetWithStyle {
   readonly children: ReactWidget[] = [];
   tag: string;
   constructor(p: { key: WidgetKey; children: Array<ReactWidget> }) {
     super({ key: p.key });
     this.children = p.children;
   }
+}
 
-  buildContainingJsx(
-    children: ColiObjectLike<JSXElementLike>[]
-  ): ColiObjectLike<JSXElementLike> {
-    return JSX.tag(this.tag, {
-      children: children,
+export abstract class ReactSingleChildWidget extends ReactWidget {
+  readonly child: ReactWidget;
+  constructor(parameters: { key: WidgetKey; child: ReactWidget }) {
+    super({
+      key: parameters.key,
     });
-  }
 
-  buildJsx(): ColiObjectLike<JSXElementLike> {
-    const children = this.buildChildrenJsx();
-    const container = this.buildContainingJsx(children);
-    return container;
+    this.child = parameters.child;
+
+    // clear children, insert child
+    {
+      this.children.length = 0;
+      this.children.push(this.child);
+    }
   }
+}
 
-  buildChildrenJsx(): Array<ColiObjectLike<JSXElementLike>> {
-    return this.children?.map((c) => {
-      return c.buildJsx();
+/**
+ * React widget containing only text values.
+ * e.g. <div>I'm Text</div>, <Typography>I'm Text</Typography>, <h1>I'm Text</h1>
+ */
+export abstract class ReactTextChildWidget extends ReactWidget {
+  readonly text: string;
+  constructor(p: { key: WidgetKey; text: string }) {
+    super({
+      key: p.key,
     });
+
+    this.text = p.text;
   }
 }
diff --git a/web-builder/styled/index.ts b/web-builder/styled/index.ts
index e110a4ff..84beda7a 100644
--- a/web-builder/styled/index.ts
+++ b/web-builder/styled/index.ts
@@ -1,27 +1,59 @@
+import { ColiObjectLike, handle } from "@coli.codes/builder";
+import { CSSProperties } from "@coli.codes/css";
 import { WidgetWithStyle } from "@coli.codes/web-builder-core";
-import { ColiBuilder, JSXElement } from "coli";
-import { JSX } from "@coli.codes/builder";
-import { stringfy } from "@coli.codes/export-string";
-import { declareStyledComponentVariable } from "./styled-component-declaration";
+import { JSXAtrributes, JSXIdentifier } from "coli";
+import {
+  declareStyledComponentVariable,
+  NamePreference,
+  StyledComponentDeclaration,
+} from "./styled-component-declaration";
 
-export function makeAsStyled(styled: WidgetWithStyle) {
-  const jsx = styled.buildJsx();
+export interface StyledComponentJSXElementConfig {
+  tag: JSXIdentifier;
+  attributes?: JSXAtrributes;
+  style: CSSProperties;
+  styledComponent: StyledComponentDeclaration;
+}
+
+/**
+ *
+ * @param widget
+ * @returns
+ */
+export function buildStyledComponentConfig(
+  widget: WidgetWithStyle,
+  preferences?: {
+    transformRootName: boolean;
+    context: {
+      root: boolean;
+    };
+  }
+): StyledComponentJSXElementConfig {
+  const config = widget.jsxConfig();
 
-  const styledVar = declareStyledComponentVariable(styled);
-  const styledTextTest = stringfy(styledVar, {
-    language: "typescript",
+  const namePref: NamePreference = preferences.context.root &&
+    preferences.transformRootName && {
+      overrideKeyName: "root wrapper " + widget.key.name,
+    };
+  const styledVar = declareStyledComponentVariable(widget, {
+    name: namePref,
   });
-  console.log("styled", styledTextTest);
-  if (jsx instanceof ColiBuilder) {
-    return (jsx as JSX).copyWith({
-      identifier: styledVar.id,
-    });
-  } else if (jsx instanceof JSXElement) {
-    jsx.changeTag(styledVar.id);
+
+  // rename tag as styled component
+  // e.g. `div` to `Wrapper`
+  if (config.tag instanceof JSXIdentifier) {
+    config.tag.rename(styledVar.id.name);
   } else {
     console.error(
-      `unhandled styled component conversion of widget type of ${typeof jsx}`,
-      jsx
+      `unhandled styled component conversion of widget type of ${typeof config}`,
+      config
     );
   }
+
+  return {
+    tag: handle(config.tag),
+    attributes: config.attributes,
+    style: widget.styleData(),
+    styledComponent: styledVar,
+  };
 }
diff --git a/web-builder/styled/styled-component-declaration.ts b/web-builder/styled/styled-component-declaration.ts
index 5b48c94f..25b9a68d 100644
--- a/web-builder/styled/styled-component-declaration.ts
+++ b/web-builder/styled/styled-component-declaration.ts
@@ -22,7 +22,7 @@ export class StyledComponentDeclaration extends VariableDeclaration {
   ) {
     super(name, {
       initializer: StyledComponentDeclaration.makeinitializer(params.style),
-      kind: SyntaxKind.LetKeyword,
+      kind: SyntaxKind.ConstKeyword,
     });
   }
 
@@ -40,14 +40,39 @@ export class StyledComponentDeclaration extends VariableDeclaration {
   }
 }
 
+/**
+ * component variable declration naming preference
+ */
+export interface NamePreference {
+  overrideKeyName?: string;
+  overrideFinalName?: string;
+}
+
 export function declareStyledComponentVariable(
-  widgetConfig: WidgetWithStyle
+  widgetConfig: WidgetWithStyle,
+  preferences?: {
+    name?: NamePreference;
+  }
 ): StyledComponentDeclaration {
-  const varname = nameVariable(widgetConfig.key.name, {
-    case: NameCases.pascal,
-  });
+  /// region name
+  let varname: string;
+  if (preferences?.name) {
+    const namePref = preferences.name;
+    if (namePref.overrideFinalName) {
+      varname = namePref.overrideFinalName;
+    } else if (namePref.overrideKeyName) {
+      varname = nameVariable(namePref.overrideKeyName, {
+        case: NameCases.pascal,
+      }).name;
+    }
+  } else {
+    varname = nameVariable(widgetConfig.key.name, {
+      case: NameCases.pascal,
+    }).name;
+  }
+  ///
 
-  return new StyledComponentDeclaration(varname.name, {
-    style: widgetConfig.buildStyle(),
+  return new StyledComponentDeclaration(varname, {
+    style: widgetConfig.styleData(),
   });
 }

From 2678a02a4fca6fe079d7dacacd3a99659e2b244e Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sat, 5 Jun 2021 21:27:02 +0900
Subject: [PATCH 44/73] organize widget directory structure

---
 web-builder/react/build-app/index.ts          |  2 +-
 web-builder/react/export/builder/index.ts     |  2 +-
 .../react/export/stringfy/styled-component.ts |  4 +-
 .../button/index.ts                           |  2 +-
 .../column/index.ts                           |  2 +-
 .../container/index.ts                        |  2 +-
 .../error-widget/index.ts                     |  2 +-
 web-builder/react/widgets.native/index.ts     | 11 +++++
 .../input/index.ts                            |  0
 .../{widgets => widgets.native}/row/index.ts  |  2 +-
 .../stack/index.ts                            |  4 +-
 .../react/widgets.native/text/index.ts        | 45 +++++++++++++++++++
 web-builder/react/widgets.reflect/index.ts    |  1 +
 .../reflect-widget.ts}                        |  2 +-
 .../text/index.ts                             |  2 +-
 web-builder/react/widgets/index.ts            | 21 +--------
 web-builder/react/widgets/widget.ts           |  4 +-
 .../styled/styled-component-declaration.ts    | 21 +++++++--
 18 files changed, 92 insertions(+), 37 deletions(-)
 rename web-builder/react/{widgets => widgets.native}/button/index.ts (83%)
 rename web-builder/react/{widgets => widgets.native}/column/index.ts (87%)
 rename web-builder/react/{widgets => widgets.native}/container/index.ts (88%)
 rename web-builder/react/{widgets => widgets.native}/error-widget/index.ts (91%)
 create mode 100644 web-builder/react/widgets.native/index.ts
 rename web-builder/react/{widgets => widgets.native}/input/index.ts (100%)
 rename web-builder/react/{widgets => widgets.native}/row/index.ts (89%)
 rename web-builder/react/{widgets => widgets.native}/stack/index.ts (81%)
 create mode 100644 web-builder/react/widgets.native/text/index.ts
 create mode 100644 web-builder/react/widgets.reflect/index.ts
 rename web-builder/react/{widgets/reflect.ts => widgets.reflect/reflect-widget.ts} (93%)
 rename web-builder/react/{widgets => widgets.reflect}/text/index.ts (92%)

diff --git a/web-builder/react/build-app/index.ts b/web-builder/react/build-app/index.ts
index 66413109..8abf7cf0 100644
--- a/web-builder/react/build-app/index.ts
+++ b/web-builder/react/build-app/index.ts
@@ -1,4 +1,4 @@
-import { Widget } from "../widgets";
+import { Widget } from "../widgets.native";
 import { react_imports } from "./import-specifications";
 import {
   packages,
diff --git a/web-builder/react/export/builder/index.ts b/web-builder/react/export/builder/index.ts
index 91f62332..583f45ec 100644
--- a/web-builder/react/export/builder/index.ts
+++ b/web-builder/react/export/builder/index.ts
@@ -14,7 +14,7 @@ import {
   ReactSingleChildWidget,
   ReactTextChildWidget,
   ReactWidget,
-} from "../../widgets";
+} from "../../widgets.native";
 import { ReactComponentExportable } from "../exportable";
 
 export function buildWidgetExportable(widget: ReactWidget) {
diff --git a/web-builder/react/export/stringfy/styled-component.ts b/web-builder/react/export/stringfy/styled-component.ts
index 997e8d44..b6a1f02f 100644
--- a/web-builder/react/export/stringfy/styled-component.ts
+++ b/web-builder/react/export/stringfy/styled-component.ts
@@ -29,7 +29,7 @@ import {
   ReactTextChildWidget,
   ReactWidget,
   WidgetKeyId,
-} from "../../widgets";
+} from "../../widgets.native";
 
 const IMPORT_DEFAULT_STYLED_FROM_EMOTION_STYLED = new Import()
   .importDefault("styled")
@@ -66,7 +66,7 @@ export function stringfyReactWidget_STYLED_COMPONENTS(
     function jsxBuilder(widget: ReactWidget) {
       const children = widget.children?.map((comp) => {
         const config = getStyledConfigById(comp.key.id);
-        const childrenJSX = jsxBuilder(comp);
+        const childrenJSX = comp.children?.map((cc) => jsxBuilder(cc));
         return new JSXElement({
           openingElement: new JSXOpeningElement(config.tag),
           closingElement: new JSXClosingElement(config.tag),
diff --git a/web-builder/react/widgets/button/index.ts b/web-builder/react/widgets.native/button/index.ts
similarity index 83%
rename from web-builder/react/widgets/button/index.ts
rename to web-builder/react/widgets.native/button/index.ts
index f91e9a08..67ca541d 100644
--- a/web-builder/react/widgets/button/index.ts
+++ b/web-builder/react/widgets.native/button/index.ts
@@ -1,4 +1,4 @@
-import { ReflectReactWidget } from "../reflect";
+import { ReflectReactWidget } from "../../widgets.reflect/reflect-widget";
 import { BUTTON_IMPORT } from "@coli.codes/reflect-web-builder";
 import { css } from "coli";
 import { CSSProperties } from "@coli.codes/css";
diff --git a/web-builder/react/widgets/column/index.ts b/web-builder/react/widgets.native/column/index.ts
similarity index 87%
rename from web-builder/react/widgets/column/index.ts
rename to web-builder/react/widgets.native/column/index.ts
index 38d603e1..31dfa57d 100644
--- a/web-builder/react/widgets/column/index.ts
+++ b/web-builder/react/widgets.native/column/index.ts
@@ -1,7 +1,7 @@
 import { CSSProperties } from "@coli.codes/css";
 import { WidgetKey } from "@coli.codes/web-builder-core";
 import { JSX, JSXElementLike } from "coli";
-import { ReactMultiChildWidget, ReactWidget } from "../widget";
+import { ReactMultiChildWidget, ReactWidget } from "../../widgets/widget";
 
 export class Column extends ReactMultiChildWidget {
   readonly _type = "column";
diff --git a/web-builder/react/widgets/container/index.ts b/web-builder/react/widgets.native/container/index.ts
similarity index 88%
rename from web-builder/react/widgets/container/index.ts
rename to web-builder/react/widgets.native/container/index.ts
index 6f5009df..2f84d8b8 100644
--- a/web-builder/react/widgets/container/index.ts
+++ b/web-builder/react/widgets.native/container/index.ts
@@ -3,7 +3,7 @@ import { CSSProperties } from "@coli.codes/css";
 import { JSXElementConfig } from "@coli.codes/web-builder-core";
 import { JSX, JSXElementLike, css } from "coli";
 
-import { ReactWidget } from "../widget";
+import { ReactWidget } from "../../widgets/widget";
 
 export class Container extends ReactWidget {
   styleData(): CSSProperties {
diff --git a/web-builder/react/widgets/error-widget/index.ts b/web-builder/react/widgets.native/error-widget/index.ts
similarity index 91%
rename from web-builder/react/widgets/error-widget/index.ts
rename to web-builder/react/widgets.native/error-widget/index.ts
index f1f8be62..562bae1b 100644
--- a/web-builder/react/widgets/error-widget/index.ts
+++ b/web-builder/react/widgets.native/error-widget/index.ts
@@ -2,7 +2,7 @@ import { CSSProperties } from "@coli.codes/css";
 import { JSXElementConfig, WidgetKey } from "@coli.codes/web-builder-core";
 import { JSX, JSXElementLike, css, JSXText } from "coli";
 
-import { ReactWidget } from "../widget";
+import { ReactWidget } from "../../widgets/widget";
 
 export class ErrorWidget extends ReactWidget {
   constructor(p: { key: WidgetKey }) {
diff --git a/web-builder/react/widgets.native/index.ts b/web-builder/react/widgets.native/index.ts
new file mode 100644
index 00000000..92cc348f
--- /dev/null
+++ b/web-builder/react/widgets.native/index.ts
@@ -0,0 +1,11 @@
+export * from "./column";
+export * from "./container";
+export * from "./row";
+export * from "./stack";
+export * from "./text";
+export * from "./error-widget";
+
+export * from "../widgets/widget";
+
+// export core widget
+export * from "@coli.codes/web-builder-core/widget";
diff --git a/web-builder/react/widgets/input/index.ts b/web-builder/react/widgets.native/input/index.ts
similarity index 100%
rename from web-builder/react/widgets/input/index.ts
rename to web-builder/react/widgets.native/input/index.ts
diff --git a/web-builder/react/widgets/row/index.ts b/web-builder/react/widgets.native/row/index.ts
similarity index 89%
rename from web-builder/react/widgets/row/index.ts
rename to web-builder/react/widgets.native/row/index.ts
index 45962180..4b2bcd00 100644
--- a/web-builder/react/widgets/row/index.ts
+++ b/web-builder/react/widgets.native/row/index.ts
@@ -1,4 +1,4 @@
-import { ReactMultiChildWidget, ReactWidget } from "../widget";
+import { ReactMultiChildWidget, ReactWidget } from "../../widgets/widget";
 import { JSX, JSXElementLike, css } from "coli";
 import { CSSProperties } from "@coli.codes/css";
 import {
diff --git a/web-builder/react/widgets/stack/index.ts b/web-builder/react/widgets.native/stack/index.ts
similarity index 81%
rename from web-builder/react/widgets/stack/index.ts
rename to web-builder/react/widgets.native/stack/index.ts
index e051c7e0..da2b57fd 100644
--- a/web-builder/react/widgets/stack/index.ts
+++ b/web-builder/react/widgets.native/stack/index.ts
@@ -1,6 +1,6 @@
 import { JSX, JSXElementLike, css } from "coli";
 
-import { ReactMultiChildWidget, ReactWidget } from "../widget";
+import { ReactMultiChildWidget, ReactWidget } from "../../widgets/widget";
 import { JSXElementConfig, WidgetKey } from "@coli.codes/web-builder-core";
 import { CSSProperties } from "@coli.codes/css";
 export class Stack extends ReactMultiChildWidget {
@@ -11,7 +11,7 @@ export class Stack extends ReactMultiChildWidget {
 
   jsxConfig(): JSXElementConfig {
     return <JSXElementConfig>{
-      tag: JSX.identifier("Stack"),
+      tag: JSX.identifier("div"),
     };
   }
 
diff --git a/web-builder/react/widgets.native/text/index.ts b/web-builder/react/widgets.native/text/index.ts
new file mode 100644
index 00000000..85590f91
--- /dev/null
+++ b/web-builder/react/widgets.native/text/index.ts
@@ -0,0 +1,45 @@
+import { JSXElementConfig, WidgetKey } from "@coli.codes/web-builder-core";
+import { PropertiesHyphen } from "csstype";
+import { ReactTextChildWidget } from "../../widgets/widget";
+import * as core from "@reflect-ui/core";
+import { TextOverflow } from "@reflect-ui/core/lib/text-overflow";
+import { CSSProperties, makeCssColorValue } from "@coli.codes/css";
+import { JSX } from "coli";
+import { RGBA } from "@reflect-ui/core/lib/color";
+
+export class Text extends ReactTextChildWidget {
+  _type: "Text";
+
+  // text properties
+  data: string;
+  overflow: TextOverflow;
+  style: core.ITextStyle;
+
+  constructor(p: {
+    key: WidgetKey;
+    data: string;
+    overflow: TextOverflow;
+    style: core.ITextStyle;
+  }) {
+    super(p);
+
+    // set text properties
+    this.data = p.data;
+    this.overflow = p.overflow;
+    this.style = p.style;
+  }
+
+  styleData(): CSSProperties {
+    return <CSSProperties>{
+      // todo - name conversion not handled properly.
+      color: makeCssColorValue((this.style.color as any) as RGBA),
+      "text-overflow": this.overflow,
+    };
+  }
+
+  jsxConfig(): JSXElementConfig {
+    return <JSXElementConfig>{
+      tag: JSX.identifier("span"),
+    };
+  }
+}
diff --git a/web-builder/react/widgets.reflect/index.ts b/web-builder/react/widgets.reflect/index.ts
new file mode 100644
index 00000000..e20cd3f8
--- /dev/null
+++ b/web-builder/react/widgets.reflect/index.ts
@@ -0,0 +1 @@
+export * from "./text";
diff --git a/web-builder/react/widgets/reflect.ts b/web-builder/react/widgets.reflect/reflect-widget.ts
similarity index 93%
rename from web-builder/react/widgets/reflect.ts
rename to web-builder/react/widgets.reflect/reflect-widget.ts
index d15d4ffb..23d64806 100644
--- a/web-builder/react/widgets/reflect.ts
+++ b/web-builder/react/widgets.reflect/reflect-widget.ts
@@ -1,4 +1,4 @@
-import { ReactWidget } from "./widget";
+import { ReactWidget } from "../widgets/widget";
 import { ImportDeclaration, Import, JSX, JSXElementLike } from "coli";
 import { JSXElementConfig, WidgetKey } from "@coli.codes/web-builder-core";
 import { ColiObjectLike } from "@coli.codes/builder";
diff --git a/web-builder/react/widgets/text/index.ts b/web-builder/react/widgets.reflect/text/index.ts
similarity index 92%
rename from web-builder/react/widgets/text/index.ts
rename to web-builder/react/widgets.reflect/text/index.ts
index 269ca778..94f66afb 100644
--- a/web-builder/react/widgets/text/index.ts
+++ b/web-builder/react/widgets.reflect/text/index.ts
@@ -1,4 +1,4 @@
-import { ReflectReactWidget } from "../reflect";
+import { ReflectReactWidget } from "../reflect-widget";
 import { TEXT_IMPORT } from "@coli.codes/reflect-web-builder";
 import { JSX, JSXText } from "coli";
 import { WidgetKey } from "@coli.codes/web-builder-core";
diff --git a/web-builder/react/widgets/index.ts b/web-builder/react/widgets/index.ts
index ad6e2692..83a35c98 100644
--- a/web-builder/react/widgets/index.ts
+++ b/web-builder/react/widgets/index.ts
@@ -1,19 +1,2 @@
-export * from "./column";
-export * from "./container";
-export * from "./row";
-export * from "./stack";
-export * from "./error-widget";
-export * from "./text";
-
-export * from "./widget";
-
-// export core widget
-export * from "@coli.codes/web-builder-core/widget";
-
-// build types
-import type { Column } from "./column";
-import type { Row } from "./row";
-import type { Stack } from "./stack";
-import type { Container } from "./container";
-
-export type ReactWidgets = Column | Row | Stack | Container;
+export * from "../widgets.native";
+export * from "../widgets.reflect";
diff --git a/web-builder/react/widgets/widget.ts b/web-builder/react/widgets/widget.ts
index 9c47b6f8..4c7a9121 100644
--- a/web-builder/react/widgets/widget.ts
+++ b/web-builder/react/widgets/widget.ts
@@ -45,11 +45,11 @@ export abstract class ReactSingleChildWidget extends ReactWidget {
  */
 export abstract class ReactTextChildWidget extends ReactWidget {
   readonly text: string;
-  constructor(p: { key: WidgetKey; text: string }) {
+  constructor(p: { key: WidgetKey; data: string }) {
     super({
       key: p.key,
     });
 
-    this.text = p.text;
+    this.text = p.data;
   }
 }
diff --git a/web-builder/styled/styled-component-declaration.ts b/web-builder/styled/styled-component-declaration.ts
index 25b9a68d..37c2e93d 100644
--- a/web-builder/styled/styled-component-declaration.ts
+++ b/web-builder/styled/styled-component-declaration.ts
@@ -1,6 +1,7 @@
 import {
   ast,
   css,
+  Html5IdentifierNames,
   Identifier,
   PropertyAccessExpression,
   TaggedTemplateExpression,
@@ -10,28 +11,39 @@ import { WidgetWithStyle } from "@coli.codes/web-builder-core";
 import { SyntaxKind } from "@coli.codes/core/ast/syntax-kind";
 import { nameVariable, NameCases } from "@coli.codes/naming";
 import { CSSProperties, buildCssStandard } from "@coli.codes/css";
+import { handle } from "@coli.codes/builder";
 
 export class StyledComponentDeclaration extends VariableDeclaration {
   static styledIdentifier = new Identifier("styled");
 
+  styledAccessorIdentifier: Html5IdentifierNames;
   constructor(
     readonly name: string,
     params: {
       style: CSSProperties;
+      identifier: Html5IdentifierNames;
     }
   ) {
     super(name, {
-      initializer: StyledComponentDeclaration.makeinitializer(params.style),
+      initializer: StyledComponentDeclaration.makeinitializer(
+        params.style,
+        params.identifier
+      ),
       kind: SyntaxKind.ConstKeyword,
     });
+
+    this.styledAccessorIdentifier = params.identifier;
   }
 
-  static makeinitializer(style: CSSProperties): TaggedTemplateExpression {
+  static makeinitializer(
+    style: CSSProperties,
+    html5tag: Html5IdentifierNames
+  ): TaggedTemplateExpression {
     const stylestring = buildCssStandard(style);
     return new TaggedTemplateExpression(
       new PropertyAccessExpression(
         StyledComponentDeclaration.styledIdentifier,
-        "div"
+        html5tag
       ),
       {
         template: new ast.TemplateLiteral(stylestring),
@@ -54,6 +66,8 @@ export function declareStyledComponentVariable(
     name?: NamePreference;
   }
 ): StyledComponentDeclaration {
+  const jsxconfg = widgetConfig.jsxConfig();
+
   /// region name
   let varname: string;
   if (preferences?.name) {
@@ -74,5 +88,6 @@ export function declareStyledComponentVariable(
 
   return new StyledComponentDeclaration(varname, {
     style: widgetConfig.styleData(),
+    identifier: handle(jsxconfg.tag).name as Html5IdentifierNames,
   });
 }

From 1fbc80d089bfee7a6f74888d2d0fc44a72fde846 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sun, 6 Jun 2021 00:42:39 +0900
Subject: [PATCH 45/73] prevent conflicting names for styled component
 declaration. update tagged template style srtign formatting

---
 .../react/export/stringfy/styled-component.ts | 33 ++++++++++-----
 .../react/widgets.native/text/index.ts        |  9 +++-
 web-builder/styled/formatter.ts               | 42 +++++++++++++++++++
 web-builder/styled/index.ts                   | 16 ++++---
 .../styled/styled-component-declaration.ts    | 32 +++++++-------
 5 files changed, 102 insertions(+), 30 deletions(-)
 create mode 100644 web-builder/styled/formatter.ts

diff --git a/web-builder/react/export/stringfy/styled-component.ts b/web-builder/react/export/stringfy/styled-component.ts
index b6a1f02f..482279a5 100644
--- a/web-builder/react/export/stringfy/styled-component.ts
+++ b/web-builder/react/export/stringfy/styled-component.ts
@@ -1,11 +1,11 @@
 import { handle } from "@coli.codes/builder";
-import { stringfy, format } from "@coli.codes/export-string";
+import { stringfy } from "@coli.codes/export-string";
+import { ScopedVariableNamer } from "@coli.codes/naming";
 import { JSXElementConfig } from "@coli.codes/web-builder-core";
 import {
   buildStyledComponentConfig,
   StyledComponentJSXElementConfig,
 } from "@web-builder/styled";
-import { StyledComponentDeclaration } from "@web-builder/styled/styled-component-declaration";
 import {
   BlockStatement,
   FunctionDeclaration,
@@ -18,7 +18,6 @@ import {
   JSXOpeningElement,
   JSXText,
   Return,
-  ReturnStatement,
   SourceFile,
   VariableDeclaration,
 } from "coli";
@@ -51,11 +50,14 @@ export function stringfyReactWidget_STYLED_COMPONENTS(
   component: ReactWidget
 ): string {
   const componentName = component.key.name;
-
+  const styledComponentNamer = new ScopedVariableNamer(component.key.id);
   // buildWidgetExportable(component);
 
   const styledConfigWidgetMap: StyledConfigWidgetMap = getWidgetStyledConfigMap(
-    component
+    component,
+    {
+      namer: styledComponentNamer,
+    }
   );
 
   function getStyledConfigById(id: string): StyledComponentJSXElementConfig {
@@ -66,6 +68,10 @@ export function stringfyReactWidget_STYLED_COMPONENTS(
     function jsxBuilder(widget: ReactWidget) {
       const children = widget.children?.map((comp) => {
         const config = getStyledConfigById(comp.key.id);
+        if (comp instanceof ReactTextChildWidget) {
+          return buildTextChildJsx(comp, config);
+        }
+
         const childrenJSX = comp.children?.map((cc) => jsxBuilder(cc));
         return new JSXElement({
           openingElement: new JSXOpeningElement(config.tag),
@@ -137,7 +143,10 @@ function buildReactComponentFile(p: {
 
 type StyledConfigWidgetMap = Map<WidgetKeyId, StyledComponentJSXElementConfig>;
 function getWidgetStyledConfigMap(
-  rootWidget: ReactWidget
+  rootWidget: ReactWidget,
+  preferences: {
+    namer: ScopedVariableNamer;
+  }
 ): StyledConfigWidgetMap {
   const styledConfigWidgetMap: StyledConfigWidgetMap = new Map();
 
@@ -146,6 +155,7 @@ function getWidgetStyledConfigMap(
     const id = w.key.id;
     const styledConfig = buildStyledComponentConfig(w, {
       transformRootName: true,
+      namer: preferences.namer,
       context: {
         root: isRoot,
       },
@@ -185,7 +195,7 @@ export function buildWidgetExportable(widget: ReactWidget) {
     //
   } else if (widget instanceof ReactTextChildWidget) {
     const text = widget.text;
-    jsx = buildTextChildJsx(widget);
+    jsx = buildTextChildJsx(widget, jsxconfg);
     //
   }
 
@@ -194,16 +204,19 @@ export function buildWidgetExportable(widget: ReactWidget) {
 
 function handleWidget(widget: ReactWidget) {}
 
-function buildTextChildJsx(textchildwidget: ReactTextChildWidget) {
-  const config = textchildwidget.jsxConfig();
+function buildTextChildJsx(
+  textchildwidget: ReactTextChildWidget,
+  config: JSXElementConfig
+) {
   const text = textchildwidget.text;
   const tag = handle<JSXIdentifier>(config.tag);
 
+  const jsxtext = new JSXText(text);
   return new JSXElement({
     openingElement: new JSXOpeningElement(tag, {
       atrributes: config.attributes,
     }),
-    children: new JSXText(text),
+    children: jsxtext,
     closingElement: new JSXClosingElement(tag),
   });
 }
diff --git a/web-builder/react/widgets.native/text/index.ts b/web-builder/react/widgets.native/text/index.ts
index 85590f91..e4d17894 100644
--- a/web-builder/react/widgets.native/text/index.ts
+++ b/web-builder/react/widgets.native/text/index.ts
@@ -3,7 +3,11 @@ import { PropertiesHyphen } from "csstype";
 import { ReactTextChildWidget } from "../../widgets/widget";
 import * as core from "@reflect-ui/core";
 import { TextOverflow } from "@reflect-ui/core/lib/text-overflow";
-import { CSSProperties, makeCssColorValue } from "@coli.codes/css";
+import {
+  convertToCssFontWeight,
+  CSSProperties,
+  makeCssColorValue,
+} from "@coli.codes/css";
 import { JSX } from "coli";
 import { RGBA } from "@reflect-ui/core/lib/color";
 
@@ -34,6 +38,9 @@ export class Text extends ReactTextChildWidget {
       // todo - name conversion not handled properly.
       color: makeCssColorValue((this.style.color as any) as RGBA),
       "text-overflow": this.overflow,
+      "font-size": `${this.style.fontSize}px`,
+      "font-family": this.style.fontFamily,
+      "font-weight": convertToCssFontWeight(this.style.fontWeight),
     };
   }
 
diff --git a/web-builder/styled/formatter.ts b/web-builder/styled/formatter.ts
new file mode 100644
index 00000000..09be5b42
--- /dev/null
+++ b/web-builder/styled/formatter.ts
@@ -0,0 +1,42 @@
+///
+/// inner tagged template style string is not formatted by default prettier formatter.
+/// it needs to be done manually.
+///
+
+/**
+ * from
+ * ```
+ * `
+ * color: white;
+ * width: 24px;
+ * `
+ * ```
+ *
+ * to
+ * ```
+ * `
+ *  color: white;
+ *  width: 24px;
+ * `
+ * ```
+ */
+export function formatStyledTempplateString(styleString: string): string {
+  const lines = [];
+  let declarationLines = 0;
+  styleString.split("\n").map((l) => {
+    if (l.length <= 1) {
+      // this is not a style property line. ignore it
+      lines.push(l);
+    } else {
+      lines.push(`\t${l}`);
+      declarationLines += 1;
+    }
+  });
+
+  if (declarationLines == 0) {
+    // if no actual style declration in style string.
+    return "";
+  }
+
+  return lines.join("\n");
+}
diff --git a/web-builder/styled/index.ts b/web-builder/styled/index.ts
index 84beda7a..ae6884e3 100644
--- a/web-builder/styled/index.ts
+++ b/web-builder/styled/index.ts
@@ -1,5 +1,6 @@
 import { ColiObjectLike, handle } from "@coli.codes/builder";
 import { CSSProperties } from "@coli.codes/css";
+import { ScopedVariableNamer } from "@coli.codes/naming";
 import { WidgetWithStyle } from "@coli.codes/web-builder-core";
 import { JSXAtrributes, JSXIdentifier } from "coli";
 import {
@@ -22,7 +23,8 @@ export interface StyledComponentJSXElementConfig {
  */
 export function buildStyledComponentConfig(
   widget: WidgetWithStyle,
-  preferences?: {
+  preferences: {
+    namer: ScopedVariableNamer;
     transformRootName: boolean;
     context: {
       root: boolean;
@@ -31,10 +33,14 @@ export function buildStyledComponentConfig(
 ): StyledComponentJSXElementConfig {
   const config = widget.jsxConfig();
 
-  const namePref: NamePreference = preferences.context.root &&
-    preferences.transformRootName && {
-      overrideKeyName: "root wrapper " + widget.key.name,
-    };
+  const namePref: NamePreference = {
+    namer: preferences.namer,
+    overrideKeyName:
+      preferences.context.root &&
+      preferences.transformRootName &&
+      "root wrapper " + widget.key.name,
+  };
+
   const styledVar = declareStyledComponentVariable(widget, {
     name: namePref,
   });
diff --git a/web-builder/styled/styled-component-declaration.ts b/web-builder/styled/styled-component-declaration.ts
index 37c2e93d..d8d8e788 100644
--- a/web-builder/styled/styled-component-declaration.ts
+++ b/web-builder/styled/styled-component-declaration.ts
@@ -1,6 +1,5 @@
 import {
   ast,
-  css,
   Html5IdentifierNames,
   Identifier,
   PropertyAccessExpression,
@@ -9,9 +8,14 @@ import {
 } from "coli";
 import { WidgetWithStyle } from "@coli.codes/web-builder-core";
 import { SyntaxKind } from "@coli.codes/core/ast/syntax-kind";
-import { nameVariable, NameCases } from "@coli.codes/naming";
+import {
+  nameVariable,
+  NameCases,
+  ScopedVariableNamer,
+} from "@coli.codes/naming";
 import { CSSProperties, buildCssStandard } from "@coli.codes/css";
 import { handle } from "@coli.codes/builder";
+import { formatStyledTempplateString } from "./formatter";
 
 export class StyledComponentDeclaration extends VariableDeclaration {
   static styledIdentifier = new Identifier("styled");
@@ -40,13 +44,14 @@ export class StyledComponentDeclaration extends VariableDeclaration {
     html5tag: Html5IdentifierNames
   ): TaggedTemplateExpression {
     const stylestring = buildCssStandard(style);
+    const formatedStyleStringWithTab = formatStyledTempplateString(stylestring);
     return new TaggedTemplateExpression(
       new PropertyAccessExpression(
         StyledComponentDeclaration.styledIdentifier,
         html5tag
       ),
       {
-        template: new ast.TemplateLiteral(stylestring),
+        template: new ast.TemplateLiteral(formatedStyleStringWithTab),
       }
     );
   }
@@ -56,13 +61,14 @@ export class StyledComponentDeclaration extends VariableDeclaration {
  * component variable declration naming preference
  */
 export interface NamePreference {
+  namer: ScopedVariableNamer;
   overrideKeyName?: string;
   overrideFinalName?: string;
 }
 
 export function declareStyledComponentVariable(
   widgetConfig: WidgetWithStyle,
-  preferences?: {
+  preferences: {
     name?: NamePreference;
   }
 ): StyledComponentDeclaration {
@@ -70,17 +76,15 @@ export function declareStyledComponentVariable(
 
   /// region name
   let varname: string;
-  if (preferences?.name) {
-    const namePref = preferences.name;
-    if (namePref.overrideFinalName) {
-      varname = namePref.overrideFinalName;
-    } else if (namePref.overrideKeyName) {
-      varname = nameVariable(namePref.overrideKeyName, {
-        case: NameCases.pascal,
-      }).name;
-    }
+  const namePref = preferences.name;
+  if (namePref.overrideFinalName) {
+    varname = namePref.overrideFinalName;
+  } else if (namePref.overrideKeyName) {
+    varname = nameVariable(namePref.overrideKeyName, {
+      case: NameCases.pascal,
+    }).name;
   } else {
-    varname = nameVariable(widgetConfig.key.name, {
+    varname = namePref.namer.nameit(widgetConfig.key.name, {
       case: NameCases.pascal,
     }).name;
   }

From a07ef1c03ddeee8860a2f79dce0d7e4eeb147481 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sun, 6 Jun 2021 01:50:53 +0900
Subject: [PATCH 46/73] prevent reserved name confliction

---
 web-builder/react/export/stringfy/styled-component.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/web-builder/react/export/stringfy/styled-component.ts b/web-builder/react/export/stringfy/styled-component.ts
index 482279a5..4adb1ceb 100644
--- a/web-builder/react/export/stringfy/styled-component.ts
+++ b/web-builder/react/export/stringfy/styled-component.ts
@@ -1,6 +1,7 @@
 import { handle } from "@coli.codes/builder";
 import { stringfy } from "@coli.codes/export-string";
 import { ScopedVariableNamer } from "@coli.codes/naming";
+import { ReservedKeywordPlatformPresets } from "@coli.codes/naming/reserved";
 import { JSXElementConfig } from "@coli.codes/web-builder-core";
 import {
   buildStyledComponentConfig,
@@ -50,7 +51,10 @@ export function stringfyReactWidget_STYLED_COMPONENTS(
   component: ReactWidget
 ): string {
   const componentName = component.key.name;
-  const styledComponentNamer = new ScopedVariableNamer(component.key.id);
+  const styledComponentNamer = new ScopedVariableNamer(
+    component.key.id,
+    ReservedKeywordPlatformPresets.react
+  );
   // buildWidgetExportable(component);
 
   const styledConfigWidgetMap: StyledConfigWidgetMap = getWidgetStyledConfigMap(

From 257a49897e01f0d150a190edd0c64c1986da18fd Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sun, 6 Jun 2021 01:59:47 +0900
Subject: [PATCH 47/73] add alignment to native text widget

---
 web-builder/react/widgets.native/text/index.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/web-builder/react/widgets.native/text/index.ts b/web-builder/react/widgets.native/text/index.ts
index e4d17894..4c9ae2cf 100644
--- a/web-builder/react/widgets.native/text/index.ts
+++ b/web-builder/react/widgets.native/text/index.ts
@@ -18,12 +18,14 @@ export class Text extends ReactTextChildWidget {
   data: string;
   overflow: TextOverflow;
   style: core.ITextStyle;
+  alignment: core.TextAlign;
 
   constructor(p: {
     key: WidgetKey;
     data: string;
     overflow: TextOverflow;
     style: core.ITextStyle;
+    alignment: core.TextAlign;
   }) {
     super(p);
 
@@ -31,6 +33,7 @@ export class Text extends ReactTextChildWidget {
     this.data = p.data;
     this.overflow = p.overflow;
     this.style = p.style;
+    this.alignment = p.alignment;
   }
 
   styleData(): CSSProperties {
@@ -41,6 +44,10 @@ export class Text extends ReactTextChildWidget {
       "font-size": `${this.style.fontSize}px`,
       "font-family": this.style.fontFamily,
       "font-weight": convertToCssFontWeight(this.style.fontWeight),
+      "letter-spacing": this.style.letterSpacing,
+      "line-height": this.style.lineHeight,
+      "word-spacing": this.style.wordSpacing,
+      "text-align": this.alignment,
     };
   }
 

From a7df64a420cee674d7a0e4bea455abf01da64f8b Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sun, 6 Jun 2021 02:17:00 +0900
Subject: [PATCH 48/73] add _type field to widget root

---
 web-builder/core/widget.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web-builder/core/widget.ts b/web-builder/core/widget.ts
index 97ad500f..fb51a1ab 100644
--- a/web-builder/core/widget.ts
+++ b/web-builder/core/widget.ts
@@ -18,6 +18,7 @@ export interface WidgetKey {
 export type WidgetKeyLike = WidgetKey;
 
 export class Widget {
+  readonly _type: string;
   readonly key: WidgetKeyLike;
   children?: Widget[];
   constructor({ key }: { key: WidgetKey }) {

From 0865f27a6d95127b36306ecc55a01aacdc8126fb Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sun, 6 Jun 2021 04:52:20 +0900
Subject: [PATCH 49/73] add export default component

---
 web-builder/core/widget-with-style.ts         | 19 +++++++++++-
 .../export-result/component.export-result.ts  |  5 ++++
 .../react/export/export-result/index.ts       |  1 +
 .../react/export/stringfy/styled-component.ts | 14 +++++++--
 .../react/widgets.native/column/index.ts      | 30 +++++++++++++++++--
 web-builder/react/widgets.native/row/index.ts |  8 ++++-
 .../react/widgets.native/stack/index.ts       | 25 ++++++++++++++--
 .../react/widgets.native/text/index.ts        | 15 ++++++++--
 8 files changed, 105 insertions(+), 12 deletions(-)
 create mode 100644 web-builder/react/export/export-result/component.export-result.ts
 create mode 100644 web-builder/react/export/export-result/index.ts

diff --git a/web-builder/core/widget-with-style.ts b/web-builder/core/widget-with-style.ts
index 674569ec..5e7fa9e8 100644
--- a/web-builder/core/widget-with-style.ts
+++ b/web-builder/core/widget-with-style.ts
@@ -2,6 +2,12 @@ import { Widget, IMultiChildWidget, WidgetKey } from "./widget";
 import { JSXAtrributes, JSXIdentifier } from "coli";
 import { CSSProperties } from "@coli.codes/css";
 import { ColiObjectLike } from "@coli.codes/builder";
+import {
+  IBoxShadowWidget,
+  IPositionedWidget,
+  IWHStyleWidget,
+} from "@reflect-ui/core";
+import { BoxShadowManifest } from "@reflect-ui/core/lib/box-shadow";
 
 export interface JSXElementConfig {
   tag: ColiObjectLike<JSXIdentifier>;
@@ -18,7 +24,18 @@ export interface IWidgetWithStyle {
  */
 export abstract class WidgetWithStyle
   extends Widget
-  implements IWidgetWithStyle {
+  implements IWHStyleWidget, IPositionedWidget, IBoxShadowWidget {
+  // IWHStyleWidget
+  width?: number;
+  height?: number;
+
+  // IPositionWidget
+  x?: number;
+  y?: number;
+
+  // IBoxShadowWidget
+  boxShadow?: BoxShadowManifest;
+
   abstract styleData(): CSSProperties;
 
   abstract jsxConfig(): JSXElementConfig;
diff --git a/web-builder/react/export/export-result/component.export-result.ts b/web-builder/react/export/export-result/component.export-result.ts
new file mode 100644
index 00000000..11c5b5c8
--- /dev/null
+++ b/web-builder/react/export/export-result/component.export-result.ts
@@ -0,0 +1,5 @@
+export interface ReactComponentExportResult {
+  code: string;
+  dependencies: string[];
+  componentName: string;
+}
diff --git a/web-builder/react/export/export-result/index.ts b/web-builder/react/export/export-result/index.ts
new file mode 100644
index 00000000..2ce93195
--- /dev/null
+++ b/web-builder/react/export/export-result/index.ts
@@ -0,0 +1 @@
+export * from "./component.export-result";
diff --git a/web-builder/react/export/stringfy/styled-component.ts b/web-builder/react/export/stringfy/styled-component.ts
index 4adb1ceb..091e6235 100644
--- a/web-builder/react/export/stringfy/styled-component.ts
+++ b/web-builder/react/export/stringfy/styled-component.ts
@@ -1,4 +1,5 @@
 import { handle } from "@coli.codes/builder";
+import { ExportAssignment } from "@coli.codes/core/assignment/export-assignment";
 import { stringfy } from "@coli.codes/export-string";
 import { ScopedVariableNamer } from "@coli.codes/naming";
 import { ReservedKeywordPlatformPresets } from "@coli.codes/naming/reserved";
@@ -30,6 +31,7 @@ import {
   ReactWidget,
   WidgetKeyId,
 } from "../../widgets.native";
+import { ReactComponentExportResult } from "../export-result";
 
 const IMPORT_DEFAULT_STYLED_FROM_EMOTION_STYLED = new Import()
   .importDefault("styled")
@@ -49,7 +51,7 @@ const imports = [
  */
 export function stringfyReactWidget_STYLED_COMPONENTS(
   component: ReactWidget
-): string {
+): ReactComponentExportResult {
   const componentName = component.key.name;
   const styledComponentNamer = new ScopedVariableNamer(
     component.key.id,
@@ -85,6 +87,9 @@ export function stringfyReactWidget_STYLED_COMPONENTS(
       });
 
       const config = getStyledConfigById(widget.key.id);
+      if (widget instanceof ReactTextChildWidget) {
+        return buildTextChildJsx(widget, config);
+      }
       return new JSXElement({
         openingElement: new JSXOpeningElement(config.tag),
         closingElement: new JSXClosingElement(config.tag),
@@ -123,7 +128,11 @@ export function stringfyReactWidget_STYLED_COMPONENTS(
     },
   });
 
-  return final;
+  return {
+    code: final,
+    componentName: componentFunction.id.name,
+    dependencies: ["@emotion/styled", "react"],
+  };
 }
 
 function buildReactComponentFile(p: {
@@ -141,6 +150,7 @@ function buildReactComponentFile(p: {
   file.import(...imports);
   file.declare(component);
   file.declare(...styleVariables);
+  file.export(new ExportAssignment(component.id));
 
   return file;
 }
diff --git a/web-builder/react/widgets.native/column/index.ts b/web-builder/react/widgets.native/column/index.ts
index 31dfa57d..26bf4d00 100644
--- a/web-builder/react/widgets.native/column/index.ts
+++ b/web-builder/react/widgets.native/column/index.ts
@@ -1,12 +1,36 @@
-import { CSSProperties } from "@coli.codes/css";
+import { boxshadow, CSSProperties } from "@coli.codes/css";
 import { WidgetKey } from "@coli.codes/web-builder-core";
+import {
+  CrossAxisAlignment,
+  MainAxisAlignment,
+  VerticalDirection,
+} from "@reflect-ui/core";
+import { MainAxisSize } from "@reflect-ui/core/lib/main-axis-size";
 import { JSX, JSXElementLike } from "coli";
 import { ReactMultiChildWidget, ReactWidget } from "../../widgets/widget";
 
 export class Column extends ReactMultiChildWidget {
   readonly _type = "column";
-  constructor(p: { key: WidgetKey; children: Array<ReactWidget> }) {
+
+  mainAxisAlignment?: MainAxisAlignment;
+  mainAxisSize?: MainAxisSize;
+  crossAxisAlignment?: CrossAxisAlignment;
+  verticalDirection?: VerticalDirection;
+
+  constructor(p: {
+    key: WidgetKey;
+    children: Array<ReactWidget>;
+    mainAxisAlignment?: MainAxisAlignment;
+    mainAxisSize?: MainAxisSize;
+    crossAxisAlignment?: CrossAxisAlignment;
+    verticalDirection?: VerticalDirection;
+  }) {
     super(p);
+
+    this.mainAxisAlignment = p.mainAxisAlignment;
+    this.mainAxisSize = p.mainAxisSize;
+    this.crossAxisAlignment = p.crossAxisAlignment;
+    this.verticalDirection = p.verticalDirection;
   }
 
   jsxConfig() {
@@ -19,6 +43,8 @@ export class Column extends ReactMultiChildWidget {
     return {
       display: "flex",
       "flex-direction": "column",
+      "align-items": this.crossAxisAlignment,
+      "box-shadow": boxshadow(this.boxShadow),
     };
   }
 }
diff --git a/web-builder/react/widgets.native/row/index.ts b/web-builder/react/widgets.native/row/index.ts
index 4b2bcd00..f21834c2 100644
--- a/web-builder/react/widgets.native/row/index.ts
+++ b/web-builder/react/widgets.native/row/index.ts
@@ -1,11 +1,12 @@
 import { ReactMultiChildWidget, ReactWidget } from "../../widgets/widget";
 import { JSX, JSXElementLike, css } from "coli";
-import { CSSProperties } from "@coli.codes/css";
+import { boxshadow, CSSProperties } from "@coli.codes/css";
 import {
   JSXElementConfig,
   Widget,
   WidgetKey,
 } from "@coli.codes/web-builder-core";
+import { BoxShadowManifest } from "@reflect-ui/core/lib/box-shadow";
 
 export class Row extends ReactMultiChildWidget {
   readonly _type = "row";
@@ -13,14 +14,18 @@ export class Row extends ReactMultiChildWidget {
   constructor({
     key,
     children,
+    boxShadow,
   }: {
     key: WidgetKey;
     children: Array<ReactWidget>;
+    boxShadow?: BoxShadowManifest;
   }) {
     super({
       key: key,
       children: children,
     });
+
+    this.boxShadow = boxShadow;
   }
 
   jsxConfig(): JSXElementConfig {
@@ -33,6 +38,7 @@ export class Row extends ReactMultiChildWidget {
     return {
       display: "flex",
       "flex-direction": "row",
+      "box-shadow": boxshadow(this.boxShadow),
     };
   }
 }
diff --git a/web-builder/react/widgets.native/stack/index.ts b/web-builder/react/widgets.native/stack/index.ts
index da2b57fd..f5228379 100644
--- a/web-builder/react/widgets.native/stack/index.ts
+++ b/web-builder/react/widgets.native/stack/index.ts
@@ -2,11 +2,26 @@ import { JSX, JSXElementLike, css } from "coli";
 
 import { ReactMultiChildWidget, ReactWidget } from "../../widgets/widget";
 import { JSXElementConfig, WidgetKey } from "@coli.codes/web-builder-core";
-import { CSSProperties } from "@coli.codes/css";
+import { boxshadow, CSSProperties, px } from "@coli.codes/css";
+import { BoxShadowManifest } from "@reflect-ui/core/lib/box-shadow";
 export class Stack extends ReactMultiChildWidget {
   readonly _type = "stack";
-  constructor(p: { key: WidgetKey; children: Array<ReactWidget> }) {
+
+  width: number;
+  height: number;
+
+  constructor(p: {
+    key: WidgetKey;
+    children: Array<ReactWidget>;
+    width: number;
+    height: number;
+    boxShadow?: BoxShadowManifest;
+  }) {
     super(p);
+
+    this.width = p.width;
+    this.height = p.height;
+    this.boxShadow = p.boxShadow;
   }
 
   jsxConfig(): JSXElementConfig {
@@ -16,6 +31,10 @@ export class Stack extends ReactMultiChildWidget {
   }
 
   styleData(): CSSProperties {
-    return {};
+    return {
+      width: px(this.width),
+      height: px(this.height),
+      "box-shadow": boxshadow(this.boxShadow),
+    };
   }
 }
diff --git a/web-builder/react/widgets.native/text/index.ts b/web-builder/react/widgets.native/text/index.ts
index 4c9ae2cf..a468c868 100644
--- a/web-builder/react/widgets.native/text/index.ts
+++ b/web-builder/react/widgets.native/text/index.ts
@@ -6,7 +6,8 @@ import { TextOverflow } from "@reflect-ui/core/lib/text-overflow";
 import {
   convertToCssFontWeight,
   CSSProperties,
-  makeCssColorValue,
+  color,
+  px,
 } from "@coli.codes/css";
 import { JSX } from "coli";
 import { RGBA } from "@reflect-ui/core/lib/color";
@@ -19,6 +20,8 @@ export class Text extends ReactTextChildWidget {
   overflow: TextOverflow;
   style: core.ITextStyle;
   alignment: core.TextAlign;
+  width: number;
+  height: number;
 
   constructor(p: {
     key: WidgetKey;
@@ -26,6 +29,8 @@ export class Text extends ReactTextChildWidget {
     overflow: TextOverflow;
     style: core.ITextStyle;
     alignment: core.TextAlign;
+    width: number;
+    height: number;
   }) {
     super(p);
 
@@ -34,20 +39,24 @@ export class Text extends ReactTextChildWidget {
     this.overflow = p.overflow;
     this.style = p.style;
     this.alignment = p.alignment;
+    this.width = p.width;
+    this.height = p.height;
   }
 
   styleData(): CSSProperties {
     return <CSSProperties>{
       // todo - name conversion not handled properly.
-      color: makeCssColorValue((this.style.color as any) as RGBA),
+      color: color((this.style.color as any) as RGBA),
       "text-overflow": this.overflow,
-      "font-size": `${this.style.fontSize}px`,
+      "font-size": px(this.style.fontSize),
       "font-family": this.style.fontFamily,
       "font-weight": convertToCssFontWeight(this.style.fontWeight),
       "letter-spacing": this.style.letterSpacing,
       "line-height": this.style.lineHeight,
       "word-spacing": this.style.wordSpacing,
       "text-align": this.alignment,
+      "min-height": px(this.height),
+      width: px(this.width),
     };
   }
 

From 380ce4955f67b356a0c33af20c762196867ff767 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sun, 6 Jun 2021 05:41:41 +0900
Subject: [PATCH 50/73] add browser assert compat deps and config

---
 web-builder/nodejs/package.json       |   6 +-
 web-builder/nodejs/package/version.ts |   2 +-
 web-builder/nodejs/tsconfig.json      |   6 +
 web-builder/react/export/index.ts     |   2 +-
 web-builder/yarn.lock                 | 312 +++++++++++++++++++++++++-
 5 files changed, 321 insertions(+), 7 deletions(-)
 create mode 100644 web-builder/nodejs/tsconfig.json

diff --git a/web-builder/nodejs/package.json b/web-builder/nodejs/package.json
index 26097880..6200be49 100644
--- a/web-builder/nodejs/package.json
+++ b/web-builder/nodejs/package.json
@@ -2,6 +2,10 @@
     "name": "@coli.codes/nodejs-builder",
     "version": "0.0.0",
     "dependencies": {
+        "assert": "^2.0.0",
         "semver": "^7.3.5"
+    },
+    "devDependencies": {
+        "@types/node": "^15.12.1"
     }
-}
\ No newline at end of file
+}
diff --git a/web-builder/nodejs/package/version.ts b/web-builder/nodejs/package/version.ts
index c562b5e0..e17cace9 100644
--- a/web-builder/nodejs/package/version.ts
+++ b/web-builder/nodejs/package/version.ts
@@ -1,5 +1,5 @@
 import * as semver from "semver";
-import * as assert from "assert";
+import assert from "assert";
 
 export type TVersion = string | "latest";
 
diff --git a/web-builder/nodejs/tsconfig.json b/web-builder/nodejs/tsconfig.json
new file mode 100644
index 00000000..d9f337a4
--- /dev/null
+++ b/web-builder/nodejs/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "esModuleInterop": true
+  }
+}
diff --git a/web-builder/react/export/index.ts b/web-builder/react/export/index.ts
index ae54e2c2..30406c64 100644
--- a/web-builder/react/export/index.ts
+++ b/web-builder/react/export/index.ts
@@ -1,3 +1,3 @@
 export * from "./stringfy";
-export * from "./builder";
+// export * from "./builder";
 export * from "./exportable";
diff --git a/web-builder/yarn.lock b/web-builder/yarn.lock
index a11f5aea..48f4a1e1 100644
--- a/web-builder/yarn.lock
+++ b/web-builder/yarn.lock
@@ -2,10 +2,263 @@
 # yarn lockfile v1
 
 
-preact@^10.5.7:
-  version "10.5.7"
-  resolved "https://registry.yarnpkg.com/preact/-/preact-10.5.7.tgz#f1d84725539e18f7ccbea937cf3db5895661dbd3"
-  integrity sha512-4oEpz75t/0UNcwmcsjk+BIcDdk68oao+7kxcpc1hQPNs2Oo3ZL9xFz8UBf350mxk/VEdD41L5b4l2dE3Ug3RYg==
+"@types/node@^15.12.1":
+  version "15.12.1"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-15.12.1.tgz#9b60797dee1895383a725f828a869c86c6caa5c2"
+  integrity sha512-zyxJM8I1c9q5sRMtVF+zdd13Jt6RU4r4qfhTd7lQubyThvLfx6yYekWSQjGCGV2Tkecgxnlpl/DNlb6Hg+dmEw==
+
+assert@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/assert/-/assert-2.0.0.tgz#95fc1c616d48713510680f2eaf2d10dd22e02d32"
+  integrity sha512-se5Cd+js9dXJnu6Ag2JFc00t+HmHOen+8Q+L7O9zI0PqQXr20uk2J0XQqMxZEeo5U50o8Nvmmx7dZrl+Ufr35A==
+  dependencies:
+    es6-object-assign "^1.1.0"
+    is-nan "^1.2.1"
+    object-is "^1.0.1"
+    util "^0.12.0"
+
+available-typed-arrays@^1.0.2:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.4.tgz#9e0ae84ecff20caae6a94a1c3bc39b955649b7a9"
+  integrity sha512-SA5mXJWrId1TaQjfxUYghbqQ/hYioKmLJvPJyDuYRtXXenFNMjj4hSSt1Cf1xsuXSXrtxrVC5Ot4eU6cOtBDdA==
+
+call-bind@^1.0.0, call-bind@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
+  integrity sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==
+  dependencies:
+    function-bind "^1.1.1"
+    get-intrinsic "^1.0.2"
+
+define-properties@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"
+  integrity sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==
+  dependencies:
+    object-keys "^1.0.12"
+
+es-abstract@^1.18.0-next.1, es-abstract@^1.18.0-next.2:
+  version "1.18.3"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.3.tgz#25c4c3380a27aa203c44b2b685bba94da31b63e0"
+  integrity sha512-nQIr12dxV7SSxE6r6f1l3DtAeEYdsGpps13dR0TwJg1S8gyp4ZPgy3FZcHBgbiQqnoqSTb+oC+kO4UQ0C/J8vw==
+  dependencies:
+    call-bind "^1.0.2"
+    es-to-primitive "^1.2.1"
+    function-bind "^1.1.1"
+    get-intrinsic "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.2"
+    is-callable "^1.2.3"
+    is-negative-zero "^2.0.1"
+    is-regex "^1.1.3"
+    is-string "^1.0.6"
+    object-inspect "^1.10.3"
+    object-keys "^1.1.1"
+    object.assign "^4.1.2"
+    string.prototype.trimend "^1.0.4"
+    string.prototype.trimstart "^1.0.4"
+    unbox-primitive "^1.0.1"
+
+es-to-primitive@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
+  integrity sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==
+  dependencies:
+    is-callable "^1.1.4"
+    is-date-object "^1.0.1"
+    is-symbol "^1.0.2"
+
+es6-object-assign@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/es6-object-assign/-/es6-object-assign-1.1.0.tgz#c2c3582656247c39ea107cb1e6652b6f9f24523c"
+  integrity sha1-wsNYJlYkfDnqEHyx5mUrb58kUjw=
+
+foreach@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
+  integrity sha1-C+4AUBiusmDQo6865ljdATbsG5k=
+
+function-bind@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
+  integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
+
+get-intrinsic@^1.0.2, get-intrinsic@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.1.1.tgz#15f59f376f855c446963948f0d24cd3637b4abc6"
+  integrity sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==
+  dependencies:
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+
+has-bigints@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.1.tgz#64fe6acb020673e3b78db035a5af69aa9d07b113"
+  integrity sha512-LSBS2LjbNBTf6287JEbEzvJgftkF5qFkmCo9hDRpAzKhUOlJ+hx8dd4USs00SgsUNwc4617J9ki5YtEClM2ffA==
+
+has-symbols@^1.0.1, has-symbols@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.2.tgz#165d3070c00309752a1236a479331e3ac56f1423"
+  integrity sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==
+
+has@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
+  integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
+  dependencies:
+    function-bind "^1.1.1"
+
+inherits@^2.0.3:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
+  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
+
+is-arguments@^1.0.4:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.1.0.tgz#62353031dfbee07ceb34656a6bde59efecae8dd9"
+  integrity sha512-1Ij4lOMPl/xB5kBDn7I+b2ttPMKa8szhEIrXDuXQD/oe3HJLTLhqhgGspwgyGd6MOywBUqVvYicF72lkgDnIHg==
+  dependencies:
+    call-bind "^1.0.0"
+
+is-bigint@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.2.tgz#ffb381442503235ad245ea89e45b3dbff040ee5a"
+  integrity sha512-0JV5+SOCQkIdzjBK9buARcV804Ddu7A0Qet6sHi3FimE9ne6m4BGQZfRn+NZiXbBk4F4XmHfDZIipLj9pX8dSA==
+
+is-boolean-object@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.1.1.tgz#3c0878f035cb821228d350d2e1e36719716a3de8"
+  integrity sha512-bXdQWkECBUIAcCkeH1unwJLIpZYaa5VvuygSyS/c2lf719mTKZDU5UdDRlpd01UjADgmW8RfqaP+mRaVPdr/Ng==
+  dependencies:
+    call-bind "^1.0.2"
+
+is-callable@^1.1.4, is-callable@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.3.tgz#8b1e0500b73a1d76c70487636f368e519de8db8e"
+  integrity sha512-J1DcMe8UYTBSrKezuIUTUwjXsho29693unXM2YhJUTR2txK/eG47bvNa/wipPFmZFgr/N6f1GA66dv0mEyTIyQ==
+
+is-date-object@^1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.4.tgz#550cfcc03afada05eea3dd30981c7b09551f73e5"
+  integrity sha512-/b4ZVsG7Z5XVtIxs/h9W8nvfLgSAyKYdtGWQLbqy6jA1icmgjf8WCoTKgeS4wy5tYaPePouzFMANbnj94c2Z+A==
+
+is-generator-function@^1.0.7:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/is-generator-function/-/is-generator-function-1.0.9.tgz#e5f82c2323673e7fcad3d12858c83c4039f6399c"
+  integrity sha512-ZJ34p1uvIfptHCN7sFTjGibB9/oBg17sHqzDLfuwhvmN/qLVvIQXRQ8licZQ35WJ8KuEQt/etnnzQFI9C9Ue/A==
+
+is-nan@^1.2.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/is-nan/-/is-nan-1.3.2.tgz#043a54adea31748b55b6cd4e09aadafa69bd9e1d"
+  integrity sha512-E+zBKpQ2t6MEo1VsonYmluk9NxGrbzpeeLC2xIViuO2EjU2xsXsBPwTr3Ykv9l08UYEVEdWeRZNouaZqF6RN0w==
+  dependencies:
+    call-bind "^1.0.0"
+    define-properties "^1.1.3"
+
+is-negative-zero@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.1.tgz#3de746c18dda2319241a53675908d8f766f11c24"
+  integrity sha512-2z6JzQvZRa9A2Y7xC6dQQm4FSTSTNWjKIYYTt4246eMTJmIo0Q+ZyOsU66X8lxK1AbB92dFeglPLrhwpeRKO6w==
+
+is-number-object@^1.0.4:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.5.tgz#6edfaeed7950cff19afedce9fbfca9ee6dd289eb"
+  integrity sha512-RU0lI/n95pMoUKu9v1BZP5MBcZuNSVJkMkAG2dJqC4z2GlkGUNeH68SuHuBKBD/XFe+LHZ+f9BKkLET60Niedw==
+
+is-regex@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.3.tgz#d029f9aff6448b93ebbe3f33dac71511fdcbef9f"
+  integrity sha512-qSVXFz28HM7y+IWX6vLCsexdlvzT1PJNFSBuaQLQ5o0IEw8UDYW6/2+eCMVyIsbM8CNLX2a/QWmSpyxYEHY7CQ==
+  dependencies:
+    call-bind "^1.0.2"
+    has-symbols "^1.0.2"
+
+is-string@^1.0.5, is-string@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.6.tgz#3fe5d5992fb0d93404f32584d4b0179a71b54a5f"
+  integrity sha512-2gdzbKUuqtQ3lYNrUTQYoClPhm7oQu4UdpSZMp1/DGgkHBT8E2Z1l0yMdb6D4zNAxwDiMv8MdulKROJGNl0Q0w==
+
+is-symbol@^1.0.2, is-symbol@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.4.tgz#a6dac93b635b063ca6872236de88910a57af139c"
+  integrity sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==
+  dependencies:
+    has-symbols "^1.0.2"
+
+is-typed-array@^1.1.3:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.5.tgz#f32e6e096455e329eb7b423862456aa213f0eb4e"
+  integrity sha512-S+GRDgJlR3PyEbsX/Fobd9cqpZBuvUS+8asRqYDMLCb2qMzt1oz5m5oxQCxOgUDxiWsOVNi4yaF+/uvdlHlYug==
+  dependencies:
+    available-typed-arrays "^1.0.2"
+    call-bind "^1.0.2"
+    es-abstract "^1.18.0-next.2"
+    foreach "^2.0.5"
+    has-symbols "^1.0.1"
+
+lru-cache@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
+  integrity sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==
+  dependencies:
+    yallist "^4.0.0"
+
+object-inspect@^1.10.3:
+  version "1.10.3"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.10.3.tgz#c2aa7d2d09f50c99375704f7a0adf24c5782d369"
+  integrity sha512-e5mCJlSH7poANfC8z8S9s9S2IN5/4Zb3aZ33f5s8YqoazCFzNLloLU8r5VCG+G7WoqLvAAZoVMcy3tp/3X0Plw==
+
+object-is@^1.0.1:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.5.tgz#b9deeaa5fc7f1846a0faecdceec138e5778f53ac"
+  integrity sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+
+object-keys@^1.0.12, object-keys@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
+  integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
+
+object.assign@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.2.tgz#0ed54a342eceb37b38ff76eb831a0e788cb63940"
+  integrity sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==
+  dependencies:
+    call-bind "^1.0.0"
+    define-properties "^1.1.3"
+    has-symbols "^1.0.1"
+    object-keys "^1.1.1"
+
+safe-buffer@^5.1.2:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
+  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
+
+semver@^7.3.5:
+  version "7.3.5"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.5.tgz#0b621c879348d8998e4b0e4be94b3f12e6018ef7"
+  integrity sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==
+  dependencies:
+    lru-cache "^6.0.0"
+
+string.prototype.trimend@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz#e75ae90c2942c63504686c18b287b4a0b1a45f80"
+  integrity sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+
+string.prototype.trimstart@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz#b36399af4ab2999b4c9c648bd7a3fb2bb26feeed"
+  integrity sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
 
 typescript@^4.0.5:
   version "4.0.5"
@@ -16,3 +269,54 @@ typescript@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.2.3.tgz#39062d8019912d43726298f09493d598048c1ce3"
   integrity sha512-qOcYwxaByStAWrBf4x0fibwZvMRG+r4cQoTjbPtUlrWjBHbmCAww1i448U0GJ+3cNNEtebDteo/cHOR3xJ4wEw==
+
+unbox-primitive@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.1.tgz#085e215625ec3162574dc8859abee78a59b14471"
+  integrity sha512-tZU/3NqK3dA5gpE1KtyiJUrEB0lxnGkMFHptJ7q6ewdZ8s12QrODwNbhIJStmJkd1QDXa1NRA8aF2A1zk/Ypyw==
+  dependencies:
+    function-bind "^1.1.1"
+    has-bigints "^1.0.1"
+    has-symbols "^1.0.2"
+    which-boxed-primitive "^1.0.2"
+
+util@^0.12.0:
+  version "0.12.4"
+  resolved "https://registry.yarnpkg.com/util/-/util-0.12.4.tgz#66121a31420df8f01ca0c464be15dfa1d1850253"
+  integrity sha512-bxZ9qtSlGUWSOy9Qa9Xgk11kSslpuZwaxCg4sNIDj6FLucDab2JxnHwyNTCpHMtK1MjoQiWQ6DiUMZYbSrO+Sw==
+  dependencies:
+    inherits "^2.0.3"
+    is-arguments "^1.0.4"
+    is-generator-function "^1.0.7"
+    is-typed-array "^1.1.3"
+    safe-buffer "^5.1.2"
+    which-typed-array "^1.1.2"
+
+which-boxed-primitive@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"
+  integrity sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==
+  dependencies:
+    is-bigint "^1.0.1"
+    is-boolean-object "^1.1.0"
+    is-number-object "^1.0.4"
+    is-string "^1.0.5"
+    is-symbol "^1.0.3"
+
+which-typed-array@^1.1.2:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.4.tgz#8fcb7d3ee5adf2d771066fba7cf37e32fe8711ff"
+  integrity sha512-49E0SpUe90cjpoc7BOJwyPHRqSAd12c10Qm2amdEZrJPCY2NDxaW01zHITrem+rnETY3dwrbH3UUrUwagfCYDA==
+  dependencies:
+    available-typed-arrays "^1.0.2"
+    call-bind "^1.0.0"
+    es-abstract "^1.18.0-next.1"
+    foreach "^2.0.5"
+    function-bind "^1.1.1"
+    has-symbols "^1.0.1"
+    is-typed-array "^1.1.3"
+
+yallist@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
+  integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==

From c0495b1cab5e0a671de8b16a7e0b42b1de7427da Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sun, 6 Jun 2021 08:13:49 +0900
Subject: [PATCH 51/73] add styles package

---
 web-builder/styles/index.ts     |  1 +
 web-builder/styles/package.json |  4 ++++
 web-builder/styles/padding.ts   | 17 +++++++++++++++++
 3 files changed, 22 insertions(+)
 create mode 100644 web-builder/styles/package.json
 create mode 100644 web-builder/styles/padding.ts

diff --git a/web-builder/styles/index.ts b/web-builder/styles/index.ts
index e69de29b..d79d87db 100644
--- a/web-builder/styles/index.ts
+++ b/web-builder/styles/index.ts
@@ -0,0 +1 @@
+export * from "./padding";
diff --git a/web-builder/styles/package.json b/web-builder/styles/package.json
new file mode 100644
index 00000000..bdc1a3ab
--- /dev/null
+++ b/web-builder/styles/package.json
@@ -0,0 +1,4 @@
+{
+    "name": "@web-builder/styles",
+    "version": "0.0.0"
+}
\ No newline at end of file
diff --git a/web-builder/styles/padding.ts b/web-builder/styles/padding.ts
new file mode 100644
index 00000000..215b6a88
--- /dev/null
+++ b/web-builder/styles/padding.ts
@@ -0,0 +1,17 @@
+import { CSSProperties, px } from "@coli.codes/css";
+import { EdgeInsets } from "@reflect-ui/core";
+
+export function padding(padding: EdgeInsets): CSSProperties {
+  return {
+    "padding-bottom": _makeifRequired(padding?.bottom),
+    "padding-top": _makeifRequired(padding?.top),
+    "padding-left": _makeifRequired(padding?.left),
+    "padding-right": _makeifRequired(padding?.right),
+  };
+}
+
+function _makeifRequired(val: number): string | undefined {
+  if (val && val > 0) {
+    return px(val);
+  }
+}

From 10f315d895b9c6dee05782ae9571d82c4aa191cc Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sun, 6 Jun 2021 08:14:02 +0900
Subject: [PATCH 52/73] add padding support (experimental)

---
 web-builder/core/widget-with-style.ts            | 12 +++++++++++-
 web-builder/react/widgets.native/column/index.ts | 10 ++++++++++
 web-builder/react/widgets.native/row/index.ts    | 14 +++++++++++++-
 3 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/web-builder/core/widget-with-style.ts b/web-builder/core/widget-with-style.ts
index 5e7fa9e8..4b7ec5ed 100644
--- a/web-builder/core/widget-with-style.ts
+++ b/web-builder/core/widget-with-style.ts
@@ -4,10 +4,12 @@ import { CSSProperties } from "@coli.codes/css";
 import { ColiObjectLike } from "@coli.codes/builder";
 import {
   IBoxShadowWidget,
+  IEdgeInsetsWidget,
   IPositionedWidget,
   IWHStyleWidget,
 } from "@reflect-ui/core";
 import { BoxShadowManifest } from "@reflect-ui/core/lib/box-shadow";
+import { EdgeInsetsGeometry } from "@reflect-ui/core/lib/ui/edge-insets-geomatry";
 
 export interface JSXElementConfig {
   tag: ColiObjectLike<JSXIdentifier>;
@@ -24,7 +26,11 @@ export interface IWidgetWithStyle {
  */
 export abstract class WidgetWithStyle
   extends Widget
-  implements IWHStyleWidget, IPositionedWidget, IBoxShadowWidget {
+  implements
+    IWHStyleWidget,
+    IPositionedWidget,
+    IBoxShadowWidget,
+    IEdgeInsetsWidget {
   // IWHStyleWidget
   width?: number;
   height?: number;
@@ -36,6 +42,10 @@ export abstract class WidgetWithStyle
   // IBoxShadowWidget
   boxShadow?: BoxShadowManifest;
 
+  // IEdgeInsetsWidget
+  margin?: EdgeInsetsGeometry;
+  padding?: EdgeInsetsGeometry;
+
   abstract styleData(): CSSProperties;
 
   abstract jsxConfig(): JSXElementConfig;
diff --git a/web-builder/react/widgets.native/column/index.ts b/web-builder/react/widgets.native/column/index.ts
index 26bf4d00..e7e90fae 100644
--- a/web-builder/react/widgets.native/column/index.ts
+++ b/web-builder/react/widgets.native/column/index.ts
@@ -2,11 +2,13 @@ import { boxshadow, CSSProperties } from "@coli.codes/css";
 import { WidgetKey } from "@coli.codes/web-builder-core";
 import {
   CrossAxisAlignment,
+  EdgeInsets,
   MainAxisAlignment,
   VerticalDirection,
 } from "@reflect-ui/core";
 import { MainAxisSize } from "@reflect-ui/core/lib/main-axis-size";
 import { JSX, JSXElementLike } from "coli";
+import { padding } from "../../../styles";
 import { ReactMultiChildWidget, ReactWidget } from "../../widgets/widget";
 
 export class Column extends ReactMultiChildWidget {
@@ -16,6 +18,8 @@ export class Column extends ReactMultiChildWidget {
   mainAxisSize?: MainAxisSize;
   crossAxisAlignment?: CrossAxisAlignment;
   verticalDirection?: VerticalDirection;
+  margin?: EdgeInsets;
+  padding?: EdgeInsets;
 
   constructor(p: {
     key: WidgetKey;
@@ -24,6 +28,8 @@ export class Column extends ReactMultiChildWidget {
     mainAxisSize?: MainAxisSize;
     crossAxisAlignment?: CrossAxisAlignment;
     verticalDirection?: VerticalDirection;
+    margin?: EdgeInsets;
+    padding?: EdgeInsets;
   }) {
     super(p);
 
@@ -31,6 +37,9 @@ export class Column extends ReactMultiChildWidget {
     this.mainAxisSize = p.mainAxisSize;
     this.crossAxisAlignment = p.crossAxisAlignment;
     this.verticalDirection = p.verticalDirection;
+
+    this.margin = p.margin;
+    this.padding = p.padding;
   }
 
   jsxConfig() {
@@ -45,6 +54,7 @@ export class Column extends ReactMultiChildWidget {
       "flex-direction": "column",
       "align-items": this.crossAxisAlignment,
       "box-shadow": boxshadow(this.boxShadow),
+      ...padding(this.padding),
     };
   }
 }
diff --git a/web-builder/react/widgets.native/row/index.ts b/web-builder/react/widgets.native/row/index.ts
index f21834c2..94b932de 100644
--- a/web-builder/react/widgets.native/row/index.ts
+++ b/web-builder/react/widgets.native/row/index.ts
@@ -1,30 +1,41 @@
 import { ReactMultiChildWidget, ReactWidget } from "../../widgets/widget";
 import { JSX, JSXElementLike, css } from "coli";
-import { boxshadow, CSSProperties } from "@coli.codes/css";
+import { boxshadow, CSSProperties, px } from "@coli.codes/css";
 import {
   JSXElementConfig,
   Widget,
   WidgetKey,
 } from "@coli.codes/web-builder-core";
 import { BoxShadowManifest } from "@reflect-ui/core/lib/box-shadow";
+import { EdgeInsets } from "@reflect-ui/core";
+import { padding } from "@web-builder/styles";
 
 export class Row extends ReactMultiChildWidget {
   readonly _type = "row";
 
+  margin?: EdgeInsets;
+  padding?: EdgeInsets;
+
   constructor({
     key,
     children,
     boxShadow,
+    margin,
+    padding,
   }: {
     key: WidgetKey;
     children: Array<ReactWidget>;
     boxShadow?: BoxShadowManifest;
+    margin?: EdgeInsets;
+    padding?: EdgeInsets;
   }) {
     super({
       key: key,
       children: children,
     });
 
+    this.margin = margin;
+    this.padding = padding;
     this.boxShadow = boxShadow;
   }
 
@@ -39,6 +50,7 @@ export class Row extends ReactMultiChildWidget {
       display: "flex",
       "flex-direction": "row",
       "box-shadow": boxshadow(this.boxShadow),
+      ...padding(this.padding),
     };
   }
 }

From 38e8ea6c8248d7de2ca28ac5e49dc10537f168af Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sun, 6 Jun 2021 14:56:59 +0900
Subject: [PATCH 53/73] cleanup

---
 web-builder/core/widget-with-style.ts         |  6 +++---
 web-builder/react/widgets.native/row/index.ts |  1 +
 web-builder/styles/background.ts              | 16 ++++++++++++++++
 3 files changed, 20 insertions(+), 3 deletions(-)
 create mode 100644 web-builder/styles/background.ts

diff --git a/web-builder/core/widget-with-style.ts b/web-builder/core/widget-with-style.ts
index 4b7ec5ed..44eb4e77 100644
--- a/web-builder/core/widget-with-style.ts
+++ b/web-builder/core/widget-with-style.ts
@@ -3,13 +3,13 @@ import { JSXAtrributes, JSXIdentifier } from "coli";
 import { CSSProperties } from "@coli.codes/css";
 import { ColiObjectLike } from "@coli.codes/builder";
 import {
+  EdgeInsets,
   IBoxShadowWidget,
   IEdgeInsetsWidget,
   IPositionedWidget,
   IWHStyleWidget,
 } from "@reflect-ui/core";
 import { BoxShadowManifest } from "@reflect-ui/core/lib/box-shadow";
-import { EdgeInsetsGeometry } from "@reflect-ui/core/lib/ui/edge-insets-geomatry";
 
 export interface JSXElementConfig {
   tag: ColiObjectLike<JSXIdentifier>;
@@ -43,8 +43,8 @@ export abstract class WidgetWithStyle
   boxShadow?: BoxShadowManifest;
 
   // IEdgeInsetsWidget
-  margin?: EdgeInsetsGeometry;
-  padding?: EdgeInsetsGeometry;
+  margin?: EdgeInsets;
+  padding?: EdgeInsets;
 
   abstract styleData(): CSSProperties;
 
diff --git a/web-builder/react/widgets.native/row/index.ts b/web-builder/react/widgets.native/row/index.ts
index 94b932de..75b91cb0 100644
--- a/web-builder/react/widgets.native/row/index.ts
+++ b/web-builder/react/widgets.native/row/index.ts
@@ -15,6 +15,7 @@ export class Row extends ReactMultiChildWidget {
 
   margin?: EdgeInsets;
   padding?: EdgeInsets;
+  // background: Image | Color
 
   constructor({
     key,
diff --git a/web-builder/styles/background.ts b/web-builder/styles/background.ts
new file mode 100644
index 00000000..5d1940ba
--- /dev/null
+++ b/web-builder/styles/background.ts
@@ -0,0 +1,16 @@
+import { CSSProperties } from "@coli.codes/css";
+
+/**
+ * @todo - not implemented
+ * @returns
+ */
+export function background(): CSSProperties {
+  return {
+    // 'background-clip'
+    // 'background-image'
+    // 'background-color'
+    // 'background-size'
+    // 'background-repeat'
+    // 'background-position'
+  };
+}

From df75414193718be601c051f050f2ae325f0f0a6a Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sun, 6 Jun 2021 16:21:27 +0900
Subject: [PATCH 54/73] migrated css builders from coli to @web-builder/styles

---
 .../react/widgets.native/column/index.ts      |  5 +-
 web-builder/react/widgets.native/row/index.ts |  7 +-
 .../react/widgets.native/stack/index.ts       | 11 ++--
 .../react/widgets.native/text/index.ts        | 18 ++----
 web-builder/styles/background/README.md       |  9 +++
 .../{background.ts => background/index.ts}    |  0
 web-builder/styles/box-shadow/index.ts        | 13 ++++
 web-builder/styles/color/index.ts             | 48 ++++++++++++++
 web-builder/styles/dimensions/index.ts        |  1 +
 web-builder/styles/dimensions/px.ts           |  8 +++
 web-builder/styles/flex.ts                    |  4 --
 web-builder/styles/font-weight/index.ts       | 64 +++++++++++++++++++
 .../{geomatry.ts => gradient/README.md}       |  0
 web-builder/styles/gradient/index.ts          |  1 +
 web-builder/styles/index.ts                   |  6 ++
 .../styles/{padding.ts => padding/index.ts}   |  3 +-
 16 files changed, 172 insertions(+), 26 deletions(-)
 create mode 100644 web-builder/styles/background/README.md
 rename web-builder/styles/{background.ts => background/index.ts} (100%)
 create mode 100644 web-builder/styles/box-shadow/index.ts
 create mode 100644 web-builder/styles/color/index.ts
 create mode 100644 web-builder/styles/dimensions/index.ts
 create mode 100644 web-builder/styles/dimensions/px.ts
 delete mode 100644 web-builder/styles/flex.ts
 create mode 100644 web-builder/styles/font-weight/index.ts
 rename web-builder/styles/{geomatry.ts => gradient/README.md} (100%)
 create mode 100644 web-builder/styles/gradient/index.ts
 rename web-builder/styles/{padding.ts => padding/index.ts} (84%)

diff --git a/web-builder/react/widgets.native/column/index.ts b/web-builder/react/widgets.native/column/index.ts
index e7e90fae..e1d360fe 100644
--- a/web-builder/react/widgets.native/column/index.ts
+++ b/web-builder/react/widgets.native/column/index.ts
@@ -1,4 +1,4 @@
-import { boxshadow, CSSProperties } from "@coli.codes/css";
+import { CSSProperties } from "@coli.codes/css";
 import { WidgetKey } from "@coli.codes/web-builder-core";
 import {
   CrossAxisAlignment,
@@ -10,6 +10,7 @@ import { MainAxisSize } from "@reflect-ui/core/lib/main-axis-size";
 import { JSX, JSXElementLike } from "coli";
 import { padding } from "../../../styles";
 import { ReactMultiChildWidget, ReactWidget } from "../../widgets/widget";
+import * as css from "@web-builder/styles";
 
 export class Column extends ReactMultiChildWidget {
   readonly _type = "column";
@@ -53,7 +54,7 @@ export class Column extends ReactMultiChildWidget {
       display: "flex",
       "flex-direction": "column",
       "align-items": this.crossAxisAlignment,
-      "box-shadow": boxshadow(this.boxShadow),
+      "box-shadow": css.boxshadow(this.boxShadow),
       ...padding(this.padding),
     };
   }
diff --git a/web-builder/react/widgets.native/row/index.ts b/web-builder/react/widgets.native/row/index.ts
index 75b91cb0..c0eded86 100644
--- a/web-builder/react/widgets.native/row/index.ts
+++ b/web-builder/react/widgets.native/row/index.ts
@@ -1,6 +1,7 @@
 import { ReactMultiChildWidget, ReactWidget } from "../../widgets/widget";
-import { JSX, JSXElementLike, css } from "coli";
-import { boxshadow, CSSProperties, px } from "@coli.codes/css";
+import { JSX } from "coli";
+import { CSSProperties } from "@coli.codes/css";
+import * as css from "@web-builder/styles";
 import {
   JSXElementConfig,
   Widget,
@@ -50,7 +51,7 @@ export class Row extends ReactMultiChildWidget {
     return {
       display: "flex",
       "flex-direction": "row",
-      "box-shadow": boxshadow(this.boxShadow),
+      "box-shadow": css.boxshadow(this.boxShadow),
       ...padding(this.padding),
     };
   }
diff --git a/web-builder/react/widgets.native/stack/index.ts b/web-builder/react/widgets.native/stack/index.ts
index f5228379..d8b7f30f 100644
--- a/web-builder/react/widgets.native/stack/index.ts
+++ b/web-builder/react/widgets.native/stack/index.ts
@@ -1,8 +1,9 @@
-import { JSX, JSXElementLike, css } from "coli";
+import { JSX } from "coli";
 
 import { ReactMultiChildWidget, ReactWidget } from "../../widgets/widget";
 import { JSXElementConfig, WidgetKey } from "@coli.codes/web-builder-core";
-import { boxshadow, CSSProperties, px } from "@coli.codes/css";
+import { CSSProperties } from "@coli.codes/css";
+import * as css from "@web-builder/styles";
 import { BoxShadowManifest } from "@reflect-ui/core/lib/box-shadow";
 export class Stack extends ReactMultiChildWidget {
   readonly _type = "stack";
@@ -32,9 +33,9 @@ export class Stack extends ReactMultiChildWidget {
 
   styleData(): CSSProperties {
     return {
-      width: px(this.width),
-      height: px(this.height),
-      "box-shadow": boxshadow(this.boxShadow),
+      width: css.px(this.width),
+      height: css.px(this.height),
+      "box-shadow": css.boxshadow(this.boxShadow),
     };
   }
 }
diff --git a/web-builder/react/widgets.native/text/index.ts b/web-builder/react/widgets.native/text/index.ts
index a468c868..5fc23c9e 100644
--- a/web-builder/react/widgets.native/text/index.ts
+++ b/web-builder/react/widgets.native/text/index.ts
@@ -3,14 +3,10 @@ import { PropertiesHyphen } from "csstype";
 import { ReactTextChildWidget } from "../../widgets/widget";
 import * as core from "@reflect-ui/core";
 import { TextOverflow } from "@reflect-ui/core/lib/text-overflow";
-import {
-  convertToCssFontWeight,
-  CSSProperties,
-  color,
-  px,
-} from "@coli.codes/css";
+import { CSSProperties } from "@coli.codes/css";
 import { JSX } from "coli";
 import { RGBA } from "@reflect-ui/core/lib/color";
+import * as css from "@web-builder/styles";
 
 export class Text extends ReactTextChildWidget {
   _type: "Text";
@@ -46,17 +42,17 @@ export class Text extends ReactTextChildWidget {
   styleData(): CSSProperties {
     return <CSSProperties>{
       // todo - name conversion not handled properly.
-      color: color((this.style.color as any) as RGBA),
+      color: css.color((this.style.color as any) as RGBA),
       "text-overflow": this.overflow,
-      "font-size": px(this.style.fontSize),
+      "font-size": css.px(this.style.fontSize),
       "font-family": this.style.fontFamily,
-      "font-weight": convertToCssFontWeight(this.style.fontWeight),
+      "font-weight": css.convertToCssFontWeight(this.style.fontWeight),
       "letter-spacing": this.style.letterSpacing,
       "line-height": this.style.lineHeight,
       "word-spacing": this.style.wordSpacing,
       "text-align": this.alignment,
-      "min-height": px(this.height),
-      width: px(this.width),
+      "min-height": css.px(this.height),
+      width: css.px(this.width),
     };
   }
 
diff --git a/web-builder/styles/background/README.md b/web-builder/styles/background/README.md
new file mode 100644
index 00000000..d4af1fb0
--- /dev/null
+++ b/web-builder/styles/background/README.md
@@ -0,0 +1,9 @@
+# CSS Background options
+
+## Compositions
+
+- multiple background images
+
+## References
+
+- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds
diff --git a/web-builder/styles/background.ts b/web-builder/styles/background/index.ts
similarity index 100%
rename from web-builder/styles/background.ts
rename to web-builder/styles/background/index.ts
diff --git a/web-builder/styles/box-shadow/index.ts b/web-builder/styles/box-shadow/index.ts
new file mode 100644
index 00000000..94063495
--- /dev/null
+++ b/web-builder/styles/box-shadow/index.ts
@@ -0,0 +1,13 @@
+import { BoxShadowManifest } from "@reflect-ui/core/lib/box-shadow";
+import { color } from "../color";
+import { px } from "../dimensions";
+
+export function boxshadow(bs: BoxShadowManifest): string {
+  if (!bs) {
+    return;
+  }
+
+  return `${px(bs.offset.dx)} ${px(bs.offset.dy)} ${px(bs.blurRadius)} ${color(
+    bs.color
+  )}`;
+}
diff --git a/web-builder/styles/color/index.ts b/web-builder/styles/color/index.ts
new file mode 100644
index 00000000..49b1dc20
--- /dev/null
+++ b/web-builder/styles/color/index.ts
@@ -0,0 +1,48 @@
+import { CssNamedColor, ICssRGBA } from "@coli.codes/core/css/css-color";
+import { Color, RGB } from "@reflect-ui/core/lib/color";
+
+type HexColor = string;
+
+type CssColorInputLike = CssNamedColor | HexColor | ICssRGBA;
+
+export function color(input: CssColorInputLike | Color): string {
+  if (!input) {
+    console.warn(
+      'undefined color is passed to "makeCssColorValue". check this.'
+    );
+    return "#000000; /*ERROR*/";
+  }
+  if (typeof input == "string") {
+    // interpret as hex color or named color
+    return input;
+  } else if (input instanceof CssNamedColor) {
+    return input.name;
+  } else if (typeof input == "object") {
+    if ("r" in input && "a" in input) {
+      const rgba = input as ICssRGBA;
+      return `rgba(${validColorValue(rgba.r) ?? 0}, ${
+        validColorValue(rgba.g) ?? 0
+      }, ${validColorValue(rgba.b) ?? 0}, ${rgba.a ?? 1})`;
+    } else if ("r" in input && "a"! in input) {
+      const rgb = input as RGB;
+      return `rgb(${validColorValue(rgb.r) ?? 0}, ${
+        validColorValue(rgb.g) ?? 0
+      }, ${validColorValue(rgb.b) ?? 0})`;
+    }
+  } else {
+    throw `input color "${JSON.stringify(
+      input
+    )}" cannot be interpreted as valid css color value`;
+  }
+}
+
+const validColorValue = (f: number) => {
+  if (f === undefined) {
+    return;
+  }
+  if (f < 1) {
+    return Math.round(f * 255.0);
+  } else {
+    return Math.round(f);
+  }
+};
diff --git a/web-builder/styles/dimensions/index.ts b/web-builder/styles/dimensions/index.ts
new file mode 100644
index 00000000..1c8b0d96
--- /dev/null
+++ b/web-builder/styles/dimensions/index.ts
@@ -0,0 +1 @@
+export * from "./px";
diff --git a/web-builder/styles/dimensions/px.ts b/web-builder/styles/dimensions/px.ts
new file mode 100644
index 00000000..f784028e
--- /dev/null
+++ b/web-builder/styles/dimensions/px.ts
@@ -0,0 +1,8 @@
+export function px(d: number): string | undefined {
+  if (d === undefined) {
+    return;
+  } else {
+    // making to fixed number since css does not support decimal px points.
+    return `${d.toFixed()}px`;
+  }
+}
diff --git a/web-builder/styles/flex.ts b/web-builder/styles/flex.ts
deleted file mode 100644
index 353cd1fc..00000000
--- a/web-builder/styles/flex.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-// import { coli } from "coli";
-export function buildFlexLayoutStyle() {
-  return;
-}
diff --git a/web-builder/styles/font-weight/index.ts b/web-builder/styles/font-weight/index.ts
new file mode 100644
index 00000000..390c7f7e
--- /dev/null
+++ b/web-builder/styles/font-weight/index.ts
@@ -0,0 +1,64 @@
+import { FontWeight } from "@reflect-ui/core";
+
+/**
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
+ */
+export type CSSFontWeight =
+  | "inherit"
+  | "initial"
+  | "unset"
+  //
+  | "normal"
+  | "bold"
+  | "lighter"
+  | "bolder"
+  //
+  | "100"
+  | "200"
+  | "300"
+  | "400"
+  | "500"
+  | "600"
+  | "700"
+  | "800"
+  | "900";
+
+export function convertToCssFontWeight(fontWeight: FontWeight): CSSFontWeight {
+  if (fontWeight === undefined) {
+    return "initial";
+  }
+  if (fontWeight === null) {
+    return "unset";
+  }
+
+  switch (fontWeight) {
+    case FontWeight.normal:
+      return "normal";
+    case FontWeight.bold:
+      return "bold";
+    case FontWeight.lighter:
+      return "lighter";
+    case FontWeight.bolder:
+      return "bolder";
+    case FontWeight.w100:
+      return "100";
+    case FontWeight.w200:
+      return "200";
+    case FontWeight.w300:
+      return "300";
+    case FontWeight.w400:
+      return "400";
+    case FontWeight.w500:
+      return "500";
+    case FontWeight.w600:
+      return "600";
+    case FontWeight.w700:
+      return "700";
+    case FontWeight.w800:
+      return "800";
+    case FontWeight.w900:
+      return "900";
+    default:
+      return "inherit";
+  }
+}
diff --git a/web-builder/styles/geomatry.ts b/web-builder/styles/gradient/README.md
similarity index 100%
rename from web-builder/styles/geomatry.ts
rename to web-builder/styles/gradient/README.md
diff --git a/web-builder/styles/gradient/index.ts b/web-builder/styles/gradient/index.ts
new file mode 100644
index 00000000..91cfd14e
--- /dev/null
+++ b/web-builder/styles/gradient/index.ts
@@ -0,0 +1 @@
+export function lineargradient() {}
diff --git a/web-builder/styles/index.ts b/web-builder/styles/index.ts
index d79d87db..57f89ad6 100644
--- a/web-builder/styles/index.ts
+++ b/web-builder/styles/index.ts
@@ -1 +1,7 @@
+export * from "./background";
+export * from "./box-shadow";
+export * from "./color";
+export * from "./dimensions";
+export * from "./font-weight";
+export * from "./gradient";
 export * from "./padding";
diff --git a/web-builder/styles/padding.ts b/web-builder/styles/padding/index.ts
similarity index 84%
rename from web-builder/styles/padding.ts
rename to web-builder/styles/padding/index.ts
index 215b6a88..531e3e5f 100644
--- a/web-builder/styles/padding.ts
+++ b/web-builder/styles/padding/index.ts
@@ -1,5 +1,6 @@
-import { CSSProperties, px } from "@coli.codes/css";
+import { CSSProperties } from "@coli.codes/css";
 import { EdgeInsets } from "@reflect-ui/core";
+import { px } from "../dimensions";
 
 export function padding(padding: EdgeInsets): CSSProperties {
   return {

From 5c76eb246025d070c328d344a36be7f1942ffe46 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 8 Jun 2021 19:47:45 +0900
Subject: [PATCH 55/73] add container support

---
 .../react/widgets.native/container/index.ts   |  7 +++++-
 .../widgets.native/error-widget/index.ts      | 11 +++++----
 web-builder/react/widgets.native/row/index.ts |  3 +++
 web-builder/react/widgets/widget.ts           | 24 +++++++++++++------
 web-builder/styles/color/index.ts             | 18 +++++++++++++-
 5 files changed, 50 insertions(+), 13 deletions(-)

diff --git a/web-builder/react/widgets.native/container/index.ts b/web-builder/react/widgets.native/container/index.ts
index 2f84d8b8..1d2e1d9f 100644
--- a/web-builder/react/widgets.native/container/index.ts
+++ b/web-builder/react/widgets.native/container/index.ts
@@ -1,11 +1,16 @@
 import { ColiObjectLike } from "@coli.codes/builder";
 import { CSSProperties } from "@coli.codes/css";
-import { JSXElementConfig } from "@coli.codes/web-builder-core";
+import { JSXElementConfig, WidgetKey } from "@coli.codes/web-builder-core";
 import { JSX, JSXElementLike, css } from "coli";
 
 import { ReactWidget } from "../../widgets/widget";
 
 export class Container extends ReactWidget {
+  _type = "Container";
+  constructor(p: { key: WidgetKey }) {
+    super(p);
+  }
+
   styleData(): CSSProperties {
     return {};
   }
diff --git a/web-builder/react/widgets.native/error-widget/index.ts b/web-builder/react/widgets.native/error-widget/index.ts
index 562bae1b..6dbc0bbe 100644
--- a/web-builder/react/widgets.native/error-widget/index.ts
+++ b/web-builder/react/widgets.native/error-widget/index.ts
@@ -2,11 +2,14 @@ import { CSSProperties } from "@coli.codes/css";
 import { JSXElementConfig, WidgetKey } from "@coli.codes/web-builder-core";
 import { JSX, JSXElementLike, css, JSXText } from "coli";
 
-import { ReactWidget } from "../../widgets/widget";
+import { ReactTextChildWidget, ReactWidget } from "../../widgets/widget";
 
-export class ErrorWidget extends ReactWidget {
-  constructor(p: { key: WidgetKey }) {
-    super(p);
+export class ErrorWidget extends ReactTextChildWidget {
+  constructor(p: { key: WidgetKey; errorMessage: string }) {
+    super({
+      key: p.key,
+      data: p.errorMessage,
+    });
   }
   styleData(): CSSProperties {
     return {
diff --git a/web-builder/react/widgets.native/row/index.ts b/web-builder/react/widgets.native/row/index.ts
index c0eded86..79e608dd 100644
--- a/web-builder/react/widgets.native/row/index.ts
+++ b/web-builder/react/widgets.native/row/index.ts
@@ -18,6 +18,9 @@ export class Row extends ReactMultiChildWidget {
   padding?: EdgeInsets;
   // background: Image | Color
 
+  // indicates the spacing between items
+  itemSpacing?: number | undefined;
+
   constructor({
     key,
     children,
diff --git a/web-builder/react/widgets/widget.ts b/web-builder/react/widgets/widget.ts
index 4c7a9121..06e44f79 100644
--- a/web-builder/react/widgets/widget.ts
+++ b/web-builder/react/widgets/widget.ts
@@ -11,6 +11,9 @@ export abstract class ReactWidget extends WidgetWithStyle {
   readonly children?: ReactWidget[];
 }
 
+/**
+ * React widget that contains multiple children in the same depth 1 hierarchy
+ */
 export abstract class ReactMultiChildWidget
   extends ReactWidget
   implements MultiChildWidgetWithStyle {
@@ -22,23 +25,30 @@ export abstract class ReactMultiChildWidget
   }
 }
 
-export abstract class ReactSingleChildWidget extends ReactWidget {
+/**
+ * In JSX, There are no difference between single child and multi child widgets.
+ * This singlechild behaves like a multichild widget with single child,
+ * which is present for representing connection between prebuilt widget that accepts single child,
+ * or for creating constraints for simple layouts such as margin wrap.
+ */
+export abstract class ReactSingleChildWidget extends ReactMultiChildWidget {
   readonly child: ReactWidget;
   constructor(parameters: { key: WidgetKey; child: ReactWidget }) {
     super({
       key: parameters.key,
+      children: [parameters.child],
     });
 
     this.child = parameters.child;
-
-    // clear children, insert child
-    {
-      this.children.length = 0;
-      this.children.push(this.child);
-    }
   }
 }
 
+/**
+ * [SPECIAL] Independant widget that does not follow default builder's children handing logic, but containing it's own prebuilt children jsx
+ * @todo
+ */
+export abstract class ReactIndependantWidget extends ReactWidget {}
+
 /**
  * React widget containing only text values.
  * e.g. <div>I'm Text</div>, <Typography>I'm Text</Typography>, <h1>I'm Text</h1>
diff --git a/web-builder/styles/color/index.ts b/web-builder/styles/color/index.ts
index 49b1dc20..49568781 100644
--- a/web-builder/styles/color/index.ts
+++ b/web-builder/styles/color/index.ts
@@ -19,10 +19,11 @@ export function color(input: CssColorInputLike | Color): string {
     return input.name;
   } else if (typeof input == "object") {
     if ("r" in input && "a" in input) {
+      const a = validAlphaValue(input.a);
       const rgba = input as ICssRGBA;
       return `rgba(${validColorValue(rgba.r) ?? 0}, ${
         validColorValue(rgba.g) ?? 0
-      }, ${validColorValue(rgba.b) ?? 0}, ${rgba.a ?? 1})`;
+      }, ${validColorValue(rgba.b) ?? 0}, ${a ?? 1})`;
     } else if ("r" in input && "a"! in input) {
       const rgb = input as RGB;
       return `rgb(${validColorValue(rgb.r) ?? 0}, ${
@@ -46,3 +47,18 @@ const validColorValue = (f: number) => {
     return Math.round(f);
   }
 };
+
+/**
+ * returns rounded alpha value at decimal point 2.
+ * @param f
+ * @returns
+ */
+const validAlphaValue = (f: number) => {
+  try {
+    // from https://stackoverflow.com/a/11832950/5463235
+    return Math.round((f + Number.EPSILON) * 100) / 100;
+  } catch (_) {
+    // returns undefined
+    return;
+  }
+};

From 516fb9736387ea881ed5c1d07d4bdef054aee04a Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Wed, 9 Jun 2021 02:08:25 +0900
Subject: [PATCH 56/73] add limited single color background support

---
 .../react/widgets.native/column/index.ts      |  5 ++++
 .../react/widgets.native/container/index.ts   |  3 +-
 web-builder/styled/index.ts                   |  2 +-
 web-builder/styles/background/index.ts        | 29 ++++++++++++-------
 4 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/web-builder/react/widgets.native/column/index.ts b/web-builder/react/widgets.native/column/index.ts
index e1d360fe..ceac2aef 100644
--- a/web-builder/react/widgets.native/column/index.ts
+++ b/web-builder/react/widgets.native/column/index.ts
@@ -11,6 +11,7 @@ import { JSX, JSXElementLike } from "coli";
 import { padding } from "../../../styles";
 import { ReactMultiChildWidget, ReactWidget } from "../../widgets/widget";
 import * as css from "@web-builder/styles";
+import { BackgroundPaintLike } from "@reflect-ui/core/lib/background";
 
 export class Column extends ReactMultiChildWidget {
   readonly _type = "column";
@@ -21,6 +22,7 @@ export class Column extends ReactMultiChildWidget {
   verticalDirection?: VerticalDirection;
   margin?: EdgeInsets;
   padding?: EdgeInsets;
+  background?: BackgroundPaintLike[];
 
   constructor(p: {
     key: WidgetKey;
@@ -31,6 +33,7 @@ export class Column extends ReactMultiChildWidget {
     verticalDirection?: VerticalDirection;
     margin?: EdgeInsets;
     padding?: EdgeInsets;
+    background?: BackgroundPaintLike[];
   }) {
     super(p);
 
@@ -41,6 +44,7 @@ export class Column extends ReactMultiChildWidget {
 
     this.margin = p.margin;
     this.padding = p.padding;
+    this.background = p.background;
   }
 
   jsxConfig() {
@@ -55,6 +59,7 @@ export class Column extends ReactMultiChildWidget {
       "flex-direction": "column",
       "align-items": this.crossAxisAlignment,
       "box-shadow": css.boxshadow(this.boxShadow),
+      ...css.background(this.background),
       ...padding(this.padding),
     };
   }
diff --git a/web-builder/react/widgets.native/container/index.ts b/web-builder/react/widgets.native/container/index.ts
index 1d2e1d9f..74b8bbc7 100644
--- a/web-builder/react/widgets.native/container/index.ts
+++ b/web-builder/react/widgets.native/container/index.ts
@@ -1,13 +1,14 @@
 import { ColiObjectLike } from "@coli.codes/builder";
 import { CSSProperties } from "@coli.codes/css";
 import { JSXElementConfig, WidgetKey } from "@coli.codes/web-builder-core";
+import { BackgroundPaintLike } from "@reflect-ui/core/lib/background";
 import { JSX, JSXElementLike, css } from "coli";
 
 import { ReactWidget } from "../../widgets/widget";
 
 export class Container extends ReactWidget {
   _type = "Container";
-  constructor(p: { key: WidgetKey }) {
+  constructor(p: { key: WidgetKey; background?: BackgroundPaintLike[] }) {
     super(p);
   }
 
diff --git a/web-builder/styled/index.ts b/web-builder/styled/index.ts
index ae6884e3..619c7748 100644
--- a/web-builder/styled/index.ts
+++ b/web-builder/styled/index.ts
@@ -38,7 +38,7 @@ export function buildStyledComponentConfig(
     overrideKeyName:
       preferences.context.root &&
       preferences.transformRootName &&
-      "root wrapper " + widget.key.name,
+      "root wrapper " + widget.key.name, // RootWrapper${name}
   };
 
   const styledVar = declareStyledComponentVariable(widget, {
diff --git a/web-builder/styles/background/index.ts b/web-builder/styles/background/index.ts
index 5d1940ba..1684bf62 100644
--- a/web-builder/styles/background/index.ts
+++ b/web-builder/styles/background/index.ts
@@ -1,16 +1,25 @@
 import { CSSProperties } from "@coli.codes/css";
-
+import { BackgroundPaintLike } from "@reflect-ui/core/lib/background";
+import { color } from "../color";
+import { array } from "@reflect-ui/uiutils";
 /**
  * @todo - not implemented
  * @returns
  */
-export function background(): CSSProperties {
-  return {
-    // 'background-clip'
-    // 'background-image'
-    // 'background-color'
-    // 'background-size'
-    // 'background-repeat'
-    // 'background-position'
-  };
+export function background(bg: BackgroundPaintLike[]): CSSProperties {
+  const safebg = bg?.filter(array.filters.notEmpty);
+  if (safebg && safebg.length > 0) {
+    const _primary = safebg[0];
+    return {
+      "background-color": color(_primary),
+      // 'background-clip' // todo
+      // 'background-image' // todo
+      // 'background-color' // todo
+      // 'background-size' // todo
+      // 'background-repeat' // todo
+      // 'background-position' // todo
+    };
+  } else {
+    return;
+  }
 }

From 3c2686c15f8cfbcaeaac48c2c01a7f65a25d0565 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Wed, 9 Jun 2021 05:42:49 +0900
Subject: [PATCH 57/73] add order & align-self

---
 web-builder/styles/align-self/index.ts | 22 ++++++++++++++++++++++
 web-builder/styles/order/index.ts      | 19 +++++++++++++++++++
 2 files changed, 41 insertions(+)
 create mode 100644 web-builder/styles/align-self/index.ts
 create mode 100644 web-builder/styles/order/index.ts

diff --git a/web-builder/styles/align-self/index.ts b/web-builder/styles/align-self/index.ts
new file mode 100644
index 00000000..df797c68
--- /dev/null
+++ b/web-builder/styles/align-self/index.ts
@@ -0,0 +1,22 @@
+import { CrossAxisAlignment } from "@reflect-ui/core";
+
+export function alignself(align: CrossAxisAlignment): string {
+  if (!align) {
+    return;
+  }
+
+  switch (align) {
+    case CrossAxisAlignment.baseline:
+      return "baseline";
+    case CrossAxisAlignment.center:
+      return "center";
+    case CrossAxisAlignment.end:
+      return "end";
+    case CrossAxisAlignment.start:
+      return "start";
+    case CrossAxisAlignment.stretch:
+      return "stretch";
+  }
+
+  throw `input "${align}" is cannot be converted to valid css value.`;
+}
diff --git a/web-builder/styles/order/index.ts b/web-builder/styles/order/index.ts
new file mode 100644
index 00000000..bfb93084
--- /dev/null
+++ b/web-builder/styles/order/index.ts
@@ -0,0 +1,19 @@
+export type CssOrderInputLike = number | "first";
+
+/**
+ * [css#order](https://developer.mozilla.org/en-US/docs/Web/CSS/order)
+ * @param o
+ */
+export function order(o: CssOrderInputLike): number {
+  if (typeof o == "number") {
+    if (!Number.isInteger(o)) {
+      throw "order must be in integer form";
+    }
+
+    return o;
+  }
+  if (o == "first") {
+    return -1;
+  }
+  throw `cannot create css order with givven input. "${o}"`;
+}

From 98fcd3ae4f0282af7067907cdf9824b71d9d7fe9 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Thu, 10 Jun 2021 22:16:17 +0900
Subject: [PATCH 58/73] update import declaration builder usage with coli's
 function name change

---
 .../build-app/import-specifications/react-default.ts   | 10 +++++-----
 web-builder/react/widgets.reflect/reflect-widget.ts    |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/web-builder/react/build-app/import-specifications/react-default.ts b/web-builder/react/build-app/import-specifications/react-default.ts
index 4e279472..a950561a 100644
--- a/web-builder/react/build-app/import-specifications/react-default.ts
+++ b/web-builder/react/build-app/import-specifications/react-default.ts
@@ -18,7 +18,7 @@ const import_react_from_react = new Import()
  */
 const import_react_and_use_state_from_react = new Import()
   .importDefault("React")
-  .import("useState")
+  .imports("useState")
   .from(standard_libraries.react.name)
   .make();
 
@@ -27,8 +27,8 @@ const import_react_and_use_state_from_react = new Import()
  */
 const import_react_and_use_state_and_use_effect_from_react = new Import()
   .importDefault("React")
-  .import("useState")
-  .import("useEffect")
+  .imports("useState")
+  .imports("useEffect")
   .from(standard_libraries.react.name)
   .make();
 
@@ -36,7 +36,7 @@ const import_react_and_use_state_and_use_effect_from_react = new Import()
  * CoLI: `import { useState } from "react";`
  */
 const import_use_state_from_react = new Import()
-  .import("useState")
+  .imports("useState")
   .from(standard_libraries.react.name)
   .make();
 
@@ -44,7 +44,7 @@ const import_use_state_from_react = new Import()
  * CoLI: `import { render } from "react-dom";`
  */
 const import_render_from_react_dom = new Import()
-  .import("render")
+  .imports("render")
   .from(standard_libraries.react_dom.name)
   .make();
 
diff --git a/web-builder/react/widgets.reflect/reflect-widget.ts b/web-builder/react/widgets.reflect/reflect-widget.ts
index 23d64806..a8138cc2 100644
--- a/web-builder/react/widgets.reflect/reflect-widget.ts
+++ b/web-builder/react/widgets.reflect/reflect-widget.ts
@@ -13,7 +13,7 @@ export abstract class ReflectReactWidget<T = any> extends ReactWidget {
   }
 
   buildImportDeclaration(): ImportDeclaration {
-    return new Import().import(this.imports).from("@reflect-ui/react").make();
+    return new Import().imports(this.imports).from("@reflect-ui/react").make();
   }
 
   abstract attributes(): ColiObjectLike<any>;

From 77f4c58ebdd43fa4270572e7c1654f8ae38037e1 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Fri, 11 Jun 2021 13:08:17 +0900
Subject: [PATCH 59/73] change import comment string

---
 web-builder/reflect/imports/index.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web-builder/reflect/imports/index.ts b/web-builder/reflect/imports/index.ts
index b10b369c..3a76d45e 100644
--- a/web-builder/reflect/imports/index.ts
+++ b/web-builder/reflect/imports/index.ts
@@ -3,17 +3,17 @@
 ///
 
 /**
- * import { Button } from "@reflect-ui/\<platform\>/`.`"
+ * _import { Button } from "@reflect-ui/\<platform\>/`.`"
  */
 const IMPORT_BUTTON_NAMED = ".";
 
 /**
- * import { Button } from "@reflect-ui/\<platform\>/`button`"
+ * _import { Button } from "@reflect-ui/\<platform\>/`button`"
  */
 const IMPORT_BUTTON_DEFAULT = "/button";
 
 /**
- * import { `Button` } from "@reflect-ui/<platform>"
+ * _import { `Button` } from "@reflect-ui/<platform>"
  */
 const IMPORT_BUTTON_NAME = "Button";
 

From aa80adbf63930d99c6603da2748bd6883374cfd0 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Fri, 11 Jun 2021 13:35:26 +0900
Subject: [PATCH 60/73] update coli source file import function usage

---
 web-builder/react/export/stringfy/styled-component.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-builder/react/export/stringfy/styled-component.ts b/web-builder/react/export/stringfy/styled-component.ts
index 091e6235..78e9ec24 100644
--- a/web-builder/react/export/stringfy/styled-component.ts
+++ b/web-builder/react/export/stringfy/styled-component.ts
@@ -147,7 +147,7 @@ function buildReactComponentFile(p: {
     path: "src/components",
   });
 
-  file.import(...imports);
+  file.imports(...imports);
   file.declare(component);
   file.declare(...styleVariables);
   file.export(new ExportAssignment(component.id));

From 42fa9d9b57a822066efdf12722dca38eacff2a94 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sat, 12 Jun 2021 12:04:21 +0900
Subject: [PATCH 61/73] update styled-componetns exporter to temporarily not
 use formatter - wip

---
 web-builder/react/export/stringfy/styled-component.ts | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/web-builder/react/export/stringfy/styled-component.ts b/web-builder/react/export/stringfy/styled-component.ts
index 78e9ec24..16c239af 100644
--- a/web-builder/react/export/stringfy/styled-component.ts
+++ b/web-builder/react/export/stringfy/styled-component.ts
@@ -3,7 +3,7 @@ import { ExportAssignment } from "@coli.codes/core/assignment/export-assignment"
 import { stringfy } from "@coli.codes/export-string";
 import { ScopedVariableNamer } from "@coli.codes/naming";
 import { ReservedKeywordPlatformPresets } from "@coli.codes/naming/reserved";
-import { JSXElementConfig } from "@coli.codes/web-builder-core";
+import { JSXElementConfig, WidgetKeyId } from "@coli.codes/web-builder-core";
 import {
   buildStyledComponentConfig,
   StyledComponentJSXElementConfig,
@@ -29,7 +29,6 @@ import {
   ReactSingleChildWidget,
   ReactTextChildWidget,
   ReactWidget,
-  WidgetKeyId,
 } from "../../widgets.native";
 import { ReactComponentExportResult } from "../export-result";
 
@@ -122,10 +121,10 @@ export function stringfyReactWidget_STYLED_COMPONENTS(
 
   const final = stringfy(file.blocks, {
     language: "tsx",
-    formatter: {
-      parser: "typescript",
-      use: "pritter",
-    },
+    // formatter: {
+    //   parser: "typescript",
+    //   use: "pritter",
+    // },
   });
 
   return {

From df8d2ea4886865394f06f106b9e00556280fe0c5 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Thu, 17 Jun 2021 15:42:17 +0900
Subject: [PATCH 62/73] add circle & round rect css support

---
 web-builder/styles/index.ts                  | 4 ++++
 web-builder/styles/shape-circle/README.md    | 3 +++
 web-builder/styles/shape-circle/index.ts     | 3 +++
 web-builder/styles/shape-round-rect/index.ts | 5 +++++
 4 files changed, 15 insertions(+)
 create mode 100644 web-builder/styles/shape-circle/README.md
 create mode 100644 web-builder/styles/shape-circle/index.ts
 create mode 100644 web-builder/styles/shape-round-rect/index.ts

diff --git a/web-builder/styles/index.ts b/web-builder/styles/index.ts
index 57f89ad6..ab317161 100644
--- a/web-builder/styles/index.ts
+++ b/web-builder/styles/index.ts
@@ -5,3 +5,7 @@ export * from "./dimensions";
 export * from "./font-weight";
 export * from "./gradient";
 export * from "./padding";
+
+// shapes
+export * from "./shape-circle";
+export * from "./shape-round-rect";
diff --git a/web-builder/styles/shape-circle/README.md b/web-builder/styles/shape-circle/README.md
new file mode 100644
index 00000000..f8a07ee4
--- /dev/null
+++ b/web-builder/styles/shape-circle/README.md
@@ -0,0 +1,3 @@
+# CSS Circle shape
+
+There is no built-in way to create circle, it is most common to use `border-radius: 50%;`
diff --git a/web-builder/styles/shape-circle/index.ts b/web-builder/styles/shape-circle/index.ts
new file mode 100644
index 00000000..dd14d378
--- /dev/null
+++ b/web-builder/styles/shape-circle/index.ts
@@ -0,0 +1,3 @@
+export function cicrle() {
+  return { "border-radius": "50%" };
+}
diff --git a/web-builder/styles/shape-round-rect/index.ts b/web-builder/styles/shape-round-rect/index.ts
new file mode 100644
index 00000000..1617f411
--- /dev/null
+++ b/web-builder/styles/shape-round-rect/index.ts
@@ -0,0 +1,5 @@
+import { px } from "../dimensions";
+
+export function roundrect(radius: number) {
+  return { "border-radius": px(radius) };
+}

From 86fedc7f4a3e7fac9ff21a76d6e671f2b46aad34 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sat, 10 Jul 2021 20:14:45 +0900
Subject: [PATCH 63/73] fix css module import

---
 web-builder/react/widgets.native/column/index.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/web-builder/react/widgets.native/column/index.ts b/web-builder/react/widgets.native/column/index.ts
index ceac2aef..a9f4d815 100644
--- a/web-builder/react/widgets.native/column/index.ts
+++ b/web-builder/react/widgets.native/column/index.ts
@@ -8,7 +8,6 @@ import {
 } from "@reflect-ui/core";
 import { MainAxisSize } from "@reflect-ui/core/lib/main-axis-size";
 import { JSX, JSXElementLike } from "coli";
-import { padding } from "../../../styles";
 import { ReactMultiChildWidget, ReactWidget } from "../../widgets/widget";
 import * as css from "@web-builder/styles";
 import { BackgroundPaintLike } from "@reflect-ui/core/lib/background";
@@ -60,7 +59,7 @@ export class Column extends ReactMultiChildWidget {
       "align-items": this.crossAxisAlignment,
       "box-shadow": css.boxshadow(this.boxShadow),
       ...css.background(this.background),
-      ...padding(this.padding),
+      ...css.padding(this.padding),
     };
   }
 }

From 885b85071d397030239b8a8c1d296286ae8b11b2 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Mon, 12 Jul 2021 17:06:56 +0900
Subject: [PATCH 64/73] use extenal config onbject

---
 .../react/export/export-result/component.export-result.ts    | 5 ++++-
 web-builder/react/export/stringfy/styled-component.ts        | 2 +-
 web-builder/react/widgets.native/text/index.ts               | 1 -
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/web-builder/react/export/export-result/component.export-result.ts b/web-builder/react/export/export-result/component.export-result.ts
index 11c5b5c8..ea75cc14 100644
--- a/web-builder/react/export/export-result/component.export-result.ts
+++ b/web-builder/react/export/export-result/component.export-result.ts
@@ -1,5 +1,8 @@
+/**
+ * @deprecated use @designto/cofing instead
+ */
 export interface ReactComponentExportResult {
   code: string;
   dependencies: string[];
-  componentName: string;
+  name: string;
 }
diff --git a/web-builder/react/export/stringfy/styled-component.ts b/web-builder/react/export/stringfy/styled-component.ts
index 16c239af..bfeddb9d 100644
--- a/web-builder/react/export/stringfy/styled-component.ts
+++ b/web-builder/react/export/stringfy/styled-component.ts
@@ -129,7 +129,7 @@ export function stringfyReactWidget_STYLED_COMPONENTS(
 
   return {
     code: final,
-    componentName: componentFunction.id.name,
+    name: componentFunction.id.name,
     dependencies: ["@emotion/styled", "react"],
   };
 }
diff --git a/web-builder/react/widgets.native/text/index.ts b/web-builder/react/widgets.native/text/index.ts
index 5fc23c9e..609be232 100644
--- a/web-builder/react/widgets.native/text/index.ts
+++ b/web-builder/react/widgets.native/text/index.ts
@@ -1,5 +1,4 @@
 import { JSXElementConfig, WidgetKey } from "@coli.codes/web-builder-core";
-import { PropertiesHyphen } from "csstype";
 import { ReactTextChildWidget } from "../../widgets/widget";
 import * as core from "@reflect-ui/core";
 import { TextOverflow } from "@reflect-ui/core/lib/text-overflow";

From d721712a13f50876528ba1d9d64fe6807015cf11 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 31 Aug 2021 15:01:21 +0900
Subject: [PATCH 65/73] update web-builder with updated coli css api exports

---
 web-builder/styled/styled-component-declaration.ts | 4 ++--
 web-builder/styles/color/index.ts                  | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/web-builder/styled/styled-component-declaration.ts b/web-builder/styled/styled-component-declaration.ts
index d8d8e788..c2df1233 100644
--- a/web-builder/styled/styled-component-declaration.ts
+++ b/web-builder/styled/styled-component-declaration.ts
@@ -1,9 +1,9 @@
 import {
-  ast,
   Html5IdentifierNames,
   Identifier,
   PropertyAccessExpression,
   TaggedTemplateExpression,
+  TemplateLiteral,
   VariableDeclaration,
 } from "coli";
 import { WidgetWithStyle } from "@coli.codes/web-builder-core";
@@ -51,7 +51,7 @@ export class StyledComponentDeclaration extends VariableDeclaration {
         html5tag
       ),
       {
-        template: new ast.TemplateLiteral(formatedStyleStringWithTab),
+        template: new TemplateLiteral(formatedStyleStringWithTab),
       }
     );
   }
diff --git a/web-builder/styles/color/index.ts b/web-builder/styles/color/index.ts
index 49568781..1268e398 100644
--- a/web-builder/styles/color/index.ts
+++ b/web-builder/styles/color/index.ts
@@ -1,4 +1,4 @@
-import { CssNamedColor, ICssRGBA } from "@coli.codes/core/css/css-color";
+import { CssNamedColor, ICssRGBA } from "@coli.codes/css/css-color";
 import { Color, RGB } from "@reflect-ui/core/lib/color";
 
 type HexColor = string;

From 08198ddd1e2aa66d162c353dd05c90dba8bcd49b Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sat, 11 Sep 2021 18:54:42 +0900
Subject: [PATCH 66/73] =?UTF-8?q?=E2=9A=A0=EF=B8=8F=E2=9A=A0=EF=B8=8F=20fi?=
 =?UTF-8?q?x=20typo=20-=20large=20dependants=20impact=20=E2=9A=A0=EF=B8=8F?=
 =?UTF-8?q?=E2=9A=A0=EF=B8=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web-builder/core/widget-with-style.ts                 | 4 ++--
 web-builder/react/export/builder/index.ts             | 4 ++--
 web-builder/react/export/stringfy/styled-component.ts | 4 ++--
 web-builder/react/widgets.reflect/reflect-widget.ts   | 2 +-
 web-builder/styled/index.ts                           | 4 ++--
 5 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/web-builder/core/widget-with-style.ts b/web-builder/core/widget-with-style.ts
index 44eb4e77..723160c4 100644
--- a/web-builder/core/widget-with-style.ts
+++ b/web-builder/core/widget-with-style.ts
@@ -1,5 +1,5 @@
 import { Widget, IMultiChildWidget, WidgetKey } from "./widget";
-import { JSXAtrributes, JSXIdentifier } from "coli";
+import { JSXAttributes, JSXIdentifier } from "coli";
 import { CSSProperties } from "@coli.codes/css";
 import { ColiObjectLike } from "@coli.codes/builder";
 import {
@@ -13,7 +13,7 @@ import { BoxShadowManifest } from "@reflect-ui/core/lib/box-shadow";
 
 export interface JSXElementConfig {
   tag: ColiObjectLike<JSXIdentifier>;
-  attributes?: JSXAtrributes;
+  attributes?: JSXAttributes;
 }
 
 export interface IWidgetWithStyle {
diff --git a/web-builder/react/export/builder/index.ts b/web-builder/react/export/builder/index.ts
index 583f45ec..eaa7a8c1 100644
--- a/web-builder/react/export/builder/index.ts
+++ b/web-builder/react/export/builder/index.ts
@@ -52,7 +52,7 @@ function buildTextChildJsx(textchildwidget: ReactTextChildWidget) {
 
   return new JSXElement({
     openingElement: new JSXOpeningElement(tag, {
-      atrributes: config.attributes,
+      attributes: config.attributes,
     }),
     children: new JSXText(text),
     closingElement: new JSXClosingElement(tag),
@@ -66,7 +66,7 @@ function buildContainingJsx(
   const tag = handle<JSXIdentifier>(container.tag);
   return new JSXElement({
     openingElement: new JSXOpeningElement(tag, {
-      atrributes: container.attributes,
+      attributes: container.attributes,
     }),
     closingElement: new JSXClosingElement(tag),
     children: children,
diff --git a/web-builder/react/export/stringfy/styled-component.ts b/web-builder/react/export/stringfy/styled-component.ts
index bfeddb9d..a6b81d46 100644
--- a/web-builder/react/export/stringfy/styled-component.ts
+++ b/web-builder/react/export/stringfy/styled-component.ts
@@ -227,7 +227,7 @@ function buildTextChildJsx(
   const jsxtext = new JSXText(text);
   return new JSXElement({
     openingElement: new JSXOpeningElement(tag, {
-      atrributes: config.attributes,
+      attributes: config.attributes,
     }),
     children: jsxtext,
     closingElement: new JSXClosingElement(tag),
@@ -241,7 +241,7 @@ function buildContainingJsx(
   const tag = handle<JSXIdentifier>(container.tag);
   return new JSXElement({
     openingElement: new JSXOpeningElement(tag, {
-      atrributes: container.attributes,
+      attributes: container.attributes,
     }),
     closingElement: new JSXClosingElement(tag),
     children: children,
diff --git a/web-builder/react/widgets.reflect/reflect-widget.ts b/web-builder/react/widgets.reflect/reflect-widget.ts
index a8138cc2..29932b6d 100644
--- a/web-builder/react/widgets.reflect/reflect-widget.ts
+++ b/web-builder/react/widgets.reflect/reflect-widget.ts
@@ -21,7 +21,7 @@ export abstract class ReflectReactWidget<T = any> extends ReactWidget {
   jsxConfig(): JSXElementConfig {
     return {
       tag: JSX.identifier(this.tag),
-      // atrributes: this.attributes() as any,
+      // attributes: this.attributes() as any,
     };
   }
 }
diff --git a/web-builder/styled/index.ts b/web-builder/styled/index.ts
index 619c7748..18753f69 100644
--- a/web-builder/styled/index.ts
+++ b/web-builder/styled/index.ts
@@ -2,7 +2,7 @@ import { ColiObjectLike, handle } from "@coli.codes/builder";
 import { CSSProperties } from "@coli.codes/css";
 import { ScopedVariableNamer } from "@coli.codes/naming";
 import { WidgetWithStyle } from "@coli.codes/web-builder-core";
-import { JSXAtrributes, JSXIdentifier } from "coli";
+import { JSXAttributes, JSXIdentifier } from "coli";
 import {
   declareStyledComponentVariable,
   NamePreference,
@@ -11,7 +11,7 @@ import {
 
 export interface StyledComponentJSXElementConfig {
   tag: JSXIdentifier;
-  attributes?: JSXAtrributes;
+  attributes?: JSXAttributes;
   style: CSSProperties;
   styledComponent: StyledComponentDeclaration;
 }

From fb0001d989e2c3985fd528fa572440ebf3a8e27a Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sat, 11 Sep 2021 20:27:25 +0900
Subject: [PATCH 67/73] bump with updated coli package diversion

---
 web-builder/styled/styled-component-declaration.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-builder/styled/styled-component-declaration.ts b/web-builder/styled/styled-component-declaration.ts
index c2df1233..e3ff7f87 100644
--- a/web-builder/styled/styled-component-declaration.ts
+++ b/web-builder/styled/styled-component-declaration.ts
@@ -7,7 +7,7 @@ import {
   VariableDeclaration,
 } from "coli";
 import { WidgetWithStyle } from "@coli.codes/web-builder-core";
-import { SyntaxKind } from "@coli.codes/core/ast/syntax-kind";
+import { SyntaxKind } from "@coli.codes/core-syntax-kind";
 import {
   nameVariable,
   NameCases,

From 62277e1f1c5d8b8631b547a25fe889801fcc5302 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Wed, 15 Sep 2021 01:12:41 +0900
Subject: [PATCH 68/73] fix web color builder

---
 web-builder/styles/color/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-builder/styles/color/index.ts b/web-builder/styles/color/index.ts
index 1268e398..1ba446ad 100644
--- a/web-builder/styles/color/index.ts
+++ b/web-builder/styles/color/index.ts
@@ -41,7 +41,7 @@ const validColorValue = (f: number) => {
   if (f === undefined) {
     return;
   }
-  if (f < 1) {
+  if (f <= 1) {
     return Math.round(f * 255.0);
   } else {
     return Math.round(f);

From 86320ea0bafd98ab2f648a62fe5db841107b6d86 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Wed, 15 Sep 2021 13:10:30 +0900
Subject: [PATCH 69/73] add border radius, background, position

---
 web-builder/core/widget-with-style.ts         |  3 +
 .../react/widgets.native/container/index.ts   | 25 ++++++-
 web-builder/styles/border-radius/index.ts     | 69 +++++++++++++++++++
 web-builder/styles/index.ts                   |  2 +
 web-builder/styles/position/index.ts          | 18 +++++
 5 files changed, 115 insertions(+), 2 deletions(-)
 create mode 100644 web-builder/styles/border-radius/index.ts
 create mode 100644 web-builder/styles/position/index.ts

diff --git a/web-builder/core/widget-with-style.ts b/web-builder/core/widget-with-style.ts
index 723160c4..d62bd819 100644
--- a/web-builder/core/widget-with-style.ts
+++ b/web-builder/core/widget-with-style.ts
@@ -10,6 +10,7 @@ import {
   IWHStyleWidget,
 } from "@reflect-ui/core";
 import { BoxShadowManifest } from "@reflect-ui/core/lib/box-shadow";
+import { BackgroundPaintLike } from "@reflect-ui/core/lib/background";
 
 export interface JSXElementConfig {
   tag: ColiObjectLike<JSXIdentifier>;
@@ -35,6 +36,8 @@ export abstract class WidgetWithStyle
   width?: number;
   height?: number;
 
+  background?: BackgroundPaintLike[];
+
   // IPositionWidget
   x?: number;
   y?: number;
diff --git a/web-builder/react/widgets.native/container/index.ts b/web-builder/react/widgets.native/container/index.ts
index 74b8bbc7..f77eeaed 100644
--- a/web-builder/react/widgets.native/container/index.ts
+++ b/web-builder/react/widgets.native/container/index.ts
@@ -1,19 +1,40 @@
 import { ColiObjectLike } from "@coli.codes/builder";
 import { CSSProperties } from "@coli.codes/css";
 import { JSXElementConfig, WidgetKey } from "@coli.codes/web-builder-core";
+import { BorderRadiusManifest } from "@reflect-ui/core";
 import { BackgroundPaintLike } from "@reflect-ui/core/lib/background";
+import { borderRadius, positionXY, background, px } from "@web-builder/styles";
 import { JSX, JSXElementLike, css } from "coli";
 
 import { ReactWidget } from "../../widgets/widget";
 
 export class Container extends ReactWidget {
   _type = "Container";
-  constructor(p: { key: WidgetKey; background?: BackgroundPaintLike[] }) {
+
+  borderRadius?: BorderRadiusManifest;
+
+  constructor(p: {
+    key: WidgetKey;
+    background?: BackgroundPaintLike[];
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+    borderRadius?: BorderRadiusManifest;
+  }) {
     super(p);
+    this.borderRadius = p.borderRadius;
   }
 
   styleData(): CSSProperties {
-    return {};
+    return {
+      width: px(this.width),
+      height: px(this.height),
+      ...positionXY(this.x, this.y),
+      ...borderRadius(this.borderRadius),
+      background: "red", // FIXME:
+      ...background(this.background),
+    };
   }
   jsxConfig(): JSXElementConfig {
     return {
diff --git a/web-builder/styles/border-radius/index.ts b/web-builder/styles/border-radius/index.ts
new file mode 100644
index 00000000..a04f3c86
--- /dev/null
+++ b/web-builder/styles/border-radius/index.ts
@@ -0,0 +1,69 @@
+import { CSSProperties } from "@coli.codes/css";
+import {
+  BorderRadiusManifest,
+  isCircularRadius,
+  isEllipticalRadius,
+  isRadius,
+} from "@reflect-ui/core";
+import { px } from "..";
+
+/**
+ * border radius css from BorderRadiusManifest
+ * 
+ * [mdn:border-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius)
+ * 
+ * [border radius by shape](https://css-tricks.com/the-shapes-of-css/)
+ * 
+ * ```css
+# The syntax of the first radius allows one to four values 
+# Radius is set for all 4 sides 
+border-radius: 10px;
+
+# top-left-and-bottom-right | top-right-and-bottom-left 
+border-radius: 10px 5%;
+
+# top-left | top-right-and-bottom-left | bottom-right 
+border-radius: 2px 4px 2px;
+
+# top-left | top-right | bottom-right | bottom-left
+border-radius: 1px 0 3px 4px;
+
+# The syntax of the second radius allows one to four values
+# (first radius values) / radius
+border-radius: 10px / 20px;
+
+# (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left
+border-radius: 10px 5% / 20px 30px;
+
+# (first radius values) / top-left | top-right-and-bottom-left | bottom-right
+border-radius: 10px 5px 2em / 20px 25px 30%;
+
+# (first radius values) / top-left | top-right | bottom-right | bottom-left
+border-radius: 10px 5% / 20px 25em 30px 35em;
+
+# Global values
+border-radius: inherit;
+border-radius: initial;
+border-radius: revert;
+border-radius: unset;
+ * ```
+ * @param r
+ * @returns
+ */
+export function borderRadius(r: BorderRadiusManifest): CSSProperties {
+  if (!r) {
+    return;
+  }
+
+  if (r.all) {
+    if (isCircularRadius(r.all)) {
+      return {
+        "border-radius": px(r.all),
+      };
+    } else {
+      console.warn("elliptical border radius not supported");
+    }
+  } else {
+    console.warn("border radius on each side is not supported");
+  }
+}
diff --git a/web-builder/styles/index.ts b/web-builder/styles/index.ts
index ab317161..8db11af9 100644
--- a/web-builder/styles/index.ts
+++ b/web-builder/styles/index.ts
@@ -5,6 +5,8 @@ export * from "./dimensions";
 export * from "./font-weight";
 export * from "./gradient";
 export * from "./padding";
+export * from "./position";
+export * from "./border-radius";
 
 // shapes
 export * from "./shape-circle";
diff --git a/web-builder/styles/position/index.ts b/web-builder/styles/position/index.ts
new file mode 100644
index 00000000..01964931
--- /dev/null
+++ b/web-builder/styles/position/index.ts
@@ -0,0 +1,18 @@
+import { CSSProperties } from "@coli.codes/css";
+import { px } from "..";
+
+/**
+ * relative position with xy
+ * @param x
+ * @param y
+ * @returns
+ */
+export function positionXY(x: number, y: number): CSSProperties {
+  if (!!x || !!y) {
+    return {
+      position: "relative",
+      top: y && px(y), // if 0, it will be ignored
+      left: x && px(x), // if 0, it will be ignored
+    };
+  }
+}

From 3eaf29d7c22cd8bae8d915e48f0c78ef2c1ccebb Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Wed, 15 Sep 2021 14:08:35 +0900
Subject: [PATCH 70/73] update package meta

---
 packages/designto-web/package.json | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/designto-web/package.json b/packages/designto-web/package.json
index d9c8a439..70561503 100644
--- a/packages/designto-web/package.json
+++ b/packages/designto-web/package.json
@@ -4,10 +4,7 @@
   "description": "design to web (styles and html/jsx)",
   "main": "dist/index.js",
   "repository": "https://github.com/bridgedxyz/design-to-code",
-  "author": "Bridged authors",
+  "author": "Grida authors",
   "license": "Apache 2.0",
-  "private": false,
-  "dependencies": {
-    "@reflect-ui/core": "0.0.2-rc.7-local"
-  }
+  "private": false
 }
\ No newline at end of file

From e3b0c323e2ca61ddb203c3e174668e298c26d871 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Wed, 15 Sep 2021 14:28:56 +0900
Subject: [PATCH 71/73] mv web-builder

---
 {web-builder => packages/web-builder}/.gitignore                  | 0
 {web-builder => packages/web-builder}/LICENSE                     | 0
 {web-builder => packages/web-builder}/README.md                   | 0
 {web-builder => packages/web-builder}/core/index.ts               | 0
 .../web-builder}/core/key-from-reflect-widget.ts                  | 0
 {web-builder => packages/web-builder}/core/package.json           | 0
 {web-builder => packages/web-builder}/core/widget-with-style.ts   | 0
 {web-builder => packages/web-builder}/core/widget.ts              | 0
 {web-builder => packages/web-builder}/examples/index.ts           | 0
 {web-builder => packages/web-builder}/examples/package.json       | 0
 .../web-builder}/examples/with-react/index.ts                     | 0
 {web-builder => packages/web-builder}/jsx/README.md               | 0
 {web-builder => packages/web-builder}/jsx/h/README.md             | 0
 {web-builder => packages/web-builder}/jsx/h/index.ts              | 0
 {web-builder => packages/web-builder}/jsx/index.ts                | 0
 {web-builder => packages/web-builder}/jsx/package.json            | 0
 {web-builder => packages/web-builder}/jsx/tsconfig.json           | 0
 {web-builder => packages/web-builder}/nodejs/README.md            | 0
 {web-builder => packages/web-builder}/nodejs/index.ts             | 0
 {web-builder => packages/web-builder}/nodejs/package.json         | 0
 .../web-builder}/nodejs/package/dependency.ts                     | 0
 {web-builder => packages/web-builder}/nodejs/package/index.ts     | 0
 {web-builder => packages/web-builder}/nodejs/package/manifest.ts  | 0
 {web-builder => packages/web-builder}/nodejs/package/version.ts   | 0
 {web-builder => packages/web-builder}/nodejs/stdlib/README.md     | 0
 {web-builder => packages/web-builder}/nodejs/stdlib/index.ts      | 0
 .../nodejs/templates/create-react-app-typescript/index.ts         | 0
 {web-builder => packages/web-builder}/nodejs/templates/index.ts   | 0
 {web-builder => packages/web-builder}/nodejs/tsconfig.json        | 0
 {web-builder => packages/web-builder}/nodejs/yarn.lock            | 0
 {web-builder => packages/web-builder}/package.json                | 0
 {web-builder => packages/web-builder}/preact/REAMDME.md           | 0
 {web-builder => packages/web-builder}/preact/index.ts             | 0
 {web-builder => packages/web-builder}/react-native/README.md      | 0
 {web-builder => packages/web-builder}/react/.gitignore            | 0
 {web-builder => packages/web-builder}/react/README.md             | 0
 .../web-builder}/react/build-app/import-specifications/index.ts   | 0
 .../react/build-app/import-specifications/react-default.ts        | 0
 .../react/build-app/import-specifications/with-emotion-styled.ts  | 0
 .../build-app/import-specifications/with-styled-components.ts     | 0
 {web-builder => packages/web-builder}/react/build-app/index.ts    | 0
 .../web-builder}/react/export/builder/index.ts                    | 0
 .../react/export/export-result/component.export-result.ts         | 0
 .../web-builder}/react/export/export-result/index.ts              | 0
 .../web-builder}/react/export/exportable/index.ts                 | 0
 {web-builder => packages/web-builder}/react/export/index.ts       | 0
 .../web-builder}/react/export/stringfy/css-in-jsx.ts              | 0
 .../web-builder}/react/export/stringfy/index.ts                   | 0
 .../web-builder}/react/export/stringfy/styled-component.ts        | 0
 {web-builder => packages/web-builder}/react/index.ts              | 0
 {web-builder => packages/web-builder}/react/package.json          | 0
 .../web-builder}/react/widgets.native/button/index.ts             | 0
 .../web-builder}/react/widgets.native/column/index.ts             | 0
 .../web-builder}/react/widgets.native/container/index.ts          | 0
 .../web-builder}/react/widgets.native/error-widget/index.ts       | 0
 .../web-builder}/react/widgets.native/index.ts                    | 0
 .../web-builder}/react/widgets.native/input/index.ts              | 0
 .../web-builder}/react/widgets.native/row/index.ts                | 0
 .../web-builder}/react/widgets.native/stack/index.ts              | 0
 .../web-builder}/react/widgets.native/text/index.ts               | 0
 .../web-builder}/react/widgets.reflect/index.ts                   | 0
 .../web-builder}/react/widgets.reflect/reflect-widget.ts          | 0
 .../web-builder}/react/widgets.reflect/text/index.ts              | 0
 {web-builder => packages/web-builder}/react/widgets/index.ts      | 0
 {web-builder => packages/web-builder}/react/widgets/widget.ts     | 0
 {web-builder => packages/web-builder}/reflect/imports/index.ts    | 0
 {web-builder => packages/web-builder}/reflect/index.ts            | 0
 {web-builder => packages/web-builder}/reflect/package.json        | 0
 {web-builder => packages/web-builder}/styled/README.md            | 0
 {web-builder => packages/web-builder}/styled/formatter.ts         | 0
 {web-builder => packages/web-builder}/styled/index.ts             | 0
 {web-builder => packages/web-builder}/styled/package.json         | 0
 .../web-builder}/styled/styled-component-declaration.ts           | 0
 {web-builder => packages/web-builder}/styles/.gitignore           | 0
 {web-builder => packages/web-builder}/styles/align-self/index.ts  | 0
 {web-builder => packages/web-builder}/styles/background/README.md | 0
 {web-builder => packages/web-builder}/styles/background/index.ts  | 0
 .../web-builder}/styles/border-radius/index.ts                    | 0
 {web-builder => packages/web-builder}/styles/box-shadow/index.ts  | 0
 {web-builder => packages/web-builder}/styles/color/index.ts       | 0
 {web-builder => packages/web-builder}/styles/dimensions/index.ts  | 0
 {web-builder => packages/web-builder}/styles/dimensions/px.ts     | 0
 {web-builder => packages/web-builder}/styles/font-weight/index.ts | 0
 {web-builder => packages/web-builder}/styles/gradient/README.md   | 0
 {web-builder => packages/web-builder}/styles/gradient/index.ts    | 0
 {web-builder => packages/web-builder}/styles/index.ts             | 0
 {web-builder => packages/web-builder}/styles/order/index.ts       | 0
 {web-builder => packages/web-builder}/styles/package.json         | 0
 {web-builder => packages/web-builder}/styles/padding/index.ts     | 0
 {web-builder => packages/web-builder}/styles/position/index.ts    | 0
 .../web-builder}/styles/shape-circle/README.md                    | 0
 .../web-builder}/styles/shape-circle/index.ts                     | 0
 .../web-builder}/styles/shape-round-rect/index.ts                 | 0
 {web-builder => packages/web-builder}/svelte/.gitignore           | 0
 {web-builder => packages/web-builder}/svelte/REAMDME.md           | 0
 {web-builder => packages/web-builder}/svelte/index.ts             | 0
 {web-builder => packages/web-builder}/tsconfig.json               | 0
 {web-builder => packages/web-builder}/vanilla/package.json        | 0
 {web-builder => packages/web-builder}/vue/.gitignore              | 0
 {web-builder => packages/web-builder}/vue/README.md               | 0
 {web-builder => packages/web-builder}/vue/index.ts                | 0
 {web-builder => packages/web-builder}/vue/package.json            | 0
 {web-builder => packages/web-builder}/web-builder/index.ts        | 0
 {web-builder => packages/web-builder}/web-builder/package.json    | 0
 {web-builder => packages/web-builder}/yarn.lock                   | 0
 105 files changed, 0 insertions(+), 0 deletions(-)
 rename {web-builder => packages/web-builder}/.gitignore (100%)
 rename {web-builder => packages/web-builder}/LICENSE (100%)
 rename {web-builder => packages/web-builder}/README.md (100%)
 rename {web-builder => packages/web-builder}/core/index.ts (100%)
 rename {web-builder => packages/web-builder}/core/key-from-reflect-widget.ts (100%)
 rename {web-builder => packages/web-builder}/core/package.json (100%)
 rename {web-builder => packages/web-builder}/core/widget-with-style.ts (100%)
 rename {web-builder => packages/web-builder}/core/widget.ts (100%)
 rename {web-builder => packages/web-builder}/examples/index.ts (100%)
 rename {web-builder => packages/web-builder}/examples/package.json (100%)
 rename {web-builder => packages/web-builder}/examples/with-react/index.ts (100%)
 rename {web-builder => packages/web-builder}/jsx/README.md (100%)
 rename {web-builder => packages/web-builder}/jsx/h/README.md (100%)
 rename {web-builder => packages/web-builder}/jsx/h/index.ts (100%)
 rename {web-builder => packages/web-builder}/jsx/index.ts (100%)
 rename {web-builder => packages/web-builder}/jsx/package.json (100%)
 rename {web-builder => packages/web-builder}/jsx/tsconfig.json (100%)
 rename {web-builder => packages/web-builder}/nodejs/README.md (100%)
 rename {web-builder => packages/web-builder}/nodejs/index.ts (100%)
 rename {web-builder => packages/web-builder}/nodejs/package.json (100%)
 rename {web-builder => packages/web-builder}/nodejs/package/dependency.ts (100%)
 rename {web-builder => packages/web-builder}/nodejs/package/index.ts (100%)
 rename {web-builder => packages/web-builder}/nodejs/package/manifest.ts (100%)
 rename {web-builder => packages/web-builder}/nodejs/package/version.ts (100%)
 rename {web-builder => packages/web-builder}/nodejs/stdlib/README.md (100%)
 rename {web-builder => packages/web-builder}/nodejs/stdlib/index.ts (100%)
 rename {web-builder => packages/web-builder}/nodejs/templates/create-react-app-typescript/index.ts (100%)
 rename {web-builder => packages/web-builder}/nodejs/templates/index.ts (100%)
 rename {web-builder => packages/web-builder}/nodejs/tsconfig.json (100%)
 rename {web-builder => packages/web-builder}/nodejs/yarn.lock (100%)
 rename {web-builder => packages/web-builder}/package.json (100%)
 rename {web-builder => packages/web-builder}/preact/REAMDME.md (100%)
 rename {web-builder => packages/web-builder}/preact/index.ts (100%)
 rename {web-builder => packages/web-builder}/react-native/README.md (100%)
 rename {web-builder => packages/web-builder}/react/.gitignore (100%)
 rename {web-builder => packages/web-builder}/react/README.md (100%)
 rename {web-builder => packages/web-builder}/react/build-app/import-specifications/index.ts (100%)
 rename {web-builder => packages/web-builder}/react/build-app/import-specifications/react-default.ts (100%)
 rename {web-builder => packages/web-builder}/react/build-app/import-specifications/with-emotion-styled.ts (100%)
 rename {web-builder => packages/web-builder}/react/build-app/import-specifications/with-styled-components.ts (100%)
 rename {web-builder => packages/web-builder}/react/build-app/index.ts (100%)
 rename {web-builder => packages/web-builder}/react/export/builder/index.ts (100%)
 rename {web-builder => packages/web-builder}/react/export/export-result/component.export-result.ts (100%)
 rename {web-builder => packages/web-builder}/react/export/export-result/index.ts (100%)
 rename {web-builder => packages/web-builder}/react/export/exportable/index.ts (100%)
 rename {web-builder => packages/web-builder}/react/export/index.ts (100%)
 rename {web-builder => packages/web-builder}/react/export/stringfy/css-in-jsx.ts (100%)
 rename {web-builder => packages/web-builder}/react/export/stringfy/index.ts (100%)
 rename {web-builder => packages/web-builder}/react/export/stringfy/styled-component.ts (100%)
 rename {web-builder => packages/web-builder}/react/index.ts (100%)
 rename {web-builder => packages/web-builder}/react/package.json (100%)
 rename {web-builder => packages/web-builder}/react/widgets.native/button/index.ts (100%)
 rename {web-builder => packages/web-builder}/react/widgets.native/column/index.ts (100%)
 rename {web-builder => packages/web-builder}/react/widgets.native/container/index.ts (100%)
 rename {web-builder => packages/web-builder}/react/widgets.native/error-widget/index.ts (100%)
 rename {web-builder => packages/web-builder}/react/widgets.native/index.ts (100%)
 rename {web-builder => packages/web-builder}/react/widgets.native/input/index.ts (100%)
 rename {web-builder => packages/web-builder}/react/widgets.native/row/index.ts (100%)
 rename {web-builder => packages/web-builder}/react/widgets.native/stack/index.ts (100%)
 rename {web-builder => packages/web-builder}/react/widgets.native/text/index.ts (100%)
 rename {web-builder => packages/web-builder}/react/widgets.reflect/index.ts (100%)
 rename {web-builder => packages/web-builder}/react/widgets.reflect/reflect-widget.ts (100%)
 rename {web-builder => packages/web-builder}/react/widgets.reflect/text/index.ts (100%)
 rename {web-builder => packages/web-builder}/react/widgets/index.ts (100%)
 rename {web-builder => packages/web-builder}/react/widgets/widget.ts (100%)
 rename {web-builder => packages/web-builder}/reflect/imports/index.ts (100%)
 rename {web-builder => packages/web-builder}/reflect/index.ts (100%)
 rename {web-builder => packages/web-builder}/reflect/package.json (100%)
 rename {web-builder => packages/web-builder}/styled/README.md (100%)
 rename {web-builder => packages/web-builder}/styled/formatter.ts (100%)
 rename {web-builder => packages/web-builder}/styled/index.ts (100%)
 rename {web-builder => packages/web-builder}/styled/package.json (100%)
 rename {web-builder => packages/web-builder}/styled/styled-component-declaration.ts (100%)
 rename {web-builder => packages/web-builder}/styles/.gitignore (100%)
 rename {web-builder => packages/web-builder}/styles/align-self/index.ts (100%)
 rename {web-builder => packages/web-builder}/styles/background/README.md (100%)
 rename {web-builder => packages/web-builder}/styles/background/index.ts (100%)
 rename {web-builder => packages/web-builder}/styles/border-radius/index.ts (100%)
 rename {web-builder => packages/web-builder}/styles/box-shadow/index.ts (100%)
 rename {web-builder => packages/web-builder}/styles/color/index.ts (100%)
 rename {web-builder => packages/web-builder}/styles/dimensions/index.ts (100%)
 rename {web-builder => packages/web-builder}/styles/dimensions/px.ts (100%)
 rename {web-builder => packages/web-builder}/styles/font-weight/index.ts (100%)
 rename {web-builder => packages/web-builder}/styles/gradient/README.md (100%)
 rename {web-builder => packages/web-builder}/styles/gradient/index.ts (100%)
 rename {web-builder => packages/web-builder}/styles/index.ts (100%)
 rename {web-builder => packages/web-builder}/styles/order/index.ts (100%)
 rename {web-builder => packages/web-builder}/styles/package.json (100%)
 rename {web-builder => packages/web-builder}/styles/padding/index.ts (100%)
 rename {web-builder => packages/web-builder}/styles/position/index.ts (100%)
 rename {web-builder => packages/web-builder}/styles/shape-circle/README.md (100%)
 rename {web-builder => packages/web-builder}/styles/shape-circle/index.ts (100%)
 rename {web-builder => packages/web-builder}/styles/shape-round-rect/index.ts (100%)
 rename {web-builder => packages/web-builder}/svelte/.gitignore (100%)
 rename {web-builder => packages/web-builder}/svelte/REAMDME.md (100%)
 rename {web-builder => packages/web-builder}/svelte/index.ts (100%)
 rename {web-builder => packages/web-builder}/tsconfig.json (100%)
 rename {web-builder => packages/web-builder}/vanilla/package.json (100%)
 rename {web-builder => packages/web-builder}/vue/.gitignore (100%)
 rename {web-builder => packages/web-builder}/vue/README.md (100%)
 rename {web-builder => packages/web-builder}/vue/index.ts (100%)
 rename {web-builder => packages/web-builder}/vue/package.json (100%)
 rename {web-builder => packages/web-builder}/web-builder/index.ts (100%)
 rename {web-builder => packages/web-builder}/web-builder/package.json (100%)
 rename {web-builder => packages/web-builder}/yarn.lock (100%)

diff --git a/web-builder/.gitignore b/packages/web-builder/.gitignore
similarity index 100%
rename from web-builder/.gitignore
rename to packages/web-builder/.gitignore
diff --git a/web-builder/LICENSE b/packages/web-builder/LICENSE
similarity index 100%
rename from web-builder/LICENSE
rename to packages/web-builder/LICENSE
diff --git a/web-builder/README.md b/packages/web-builder/README.md
similarity index 100%
rename from web-builder/README.md
rename to packages/web-builder/README.md
diff --git a/web-builder/core/index.ts b/packages/web-builder/core/index.ts
similarity index 100%
rename from web-builder/core/index.ts
rename to packages/web-builder/core/index.ts
diff --git a/web-builder/core/key-from-reflect-widget.ts b/packages/web-builder/core/key-from-reflect-widget.ts
similarity index 100%
rename from web-builder/core/key-from-reflect-widget.ts
rename to packages/web-builder/core/key-from-reflect-widget.ts
diff --git a/web-builder/core/package.json b/packages/web-builder/core/package.json
similarity index 100%
rename from web-builder/core/package.json
rename to packages/web-builder/core/package.json
diff --git a/web-builder/core/widget-with-style.ts b/packages/web-builder/core/widget-with-style.ts
similarity index 100%
rename from web-builder/core/widget-with-style.ts
rename to packages/web-builder/core/widget-with-style.ts
diff --git a/web-builder/core/widget.ts b/packages/web-builder/core/widget.ts
similarity index 100%
rename from web-builder/core/widget.ts
rename to packages/web-builder/core/widget.ts
diff --git a/web-builder/examples/index.ts b/packages/web-builder/examples/index.ts
similarity index 100%
rename from web-builder/examples/index.ts
rename to packages/web-builder/examples/index.ts
diff --git a/web-builder/examples/package.json b/packages/web-builder/examples/package.json
similarity index 100%
rename from web-builder/examples/package.json
rename to packages/web-builder/examples/package.json
diff --git a/web-builder/examples/with-react/index.ts b/packages/web-builder/examples/with-react/index.ts
similarity index 100%
rename from web-builder/examples/with-react/index.ts
rename to packages/web-builder/examples/with-react/index.ts
diff --git a/web-builder/jsx/README.md b/packages/web-builder/jsx/README.md
similarity index 100%
rename from web-builder/jsx/README.md
rename to packages/web-builder/jsx/README.md
diff --git a/web-builder/jsx/h/README.md b/packages/web-builder/jsx/h/README.md
similarity index 100%
rename from web-builder/jsx/h/README.md
rename to packages/web-builder/jsx/h/README.md
diff --git a/web-builder/jsx/h/index.ts b/packages/web-builder/jsx/h/index.ts
similarity index 100%
rename from web-builder/jsx/h/index.ts
rename to packages/web-builder/jsx/h/index.ts
diff --git a/web-builder/jsx/index.ts b/packages/web-builder/jsx/index.ts
similarity index 100%
rename from web-builder/jsx/index.ts
rename to packages/web-builder/jsx/index.ts
diff --git a/web-builder/jsx/package.json b/packages/web-builder/jsx/package.json
similarity index 100%
rename from web-builder/jsx/package.json
rename to packages/web-builder/jsx/package.json
diff --git a/web-builder/jsx/tsconfig.json b/packages/web-builder/jsx/tsconfig.json
similarity index 100%
rename from web-builder/jsx/tsconfig.json
rename to packages/web-builder/jsx/tsconfig.json
diff --git a/web-builder/nodejs/README.md b/packages/web-builder/nodejs/README.md
similarity index 100%
rename from web-builder/nodejs/README.md
rename to packages/web-builder/nodejs/README.md
diff --git a/web-builder/nodejs/index.ts b/packages/web-builder/nodejs/index.ts
similarity index 100%
rename from web-builder/nodejs/index.ts
rename to packages/web-builder/nodejs/index.ts
diff --git a/web-builder/nodejs/package.json b/packages/web-builder/nodejs/package.json
similarity index 100%
rename from web-builder/nodejs/package.json
rename to packages/web-builder/nodejs/package.json
diff --git a/web-builder/nodejs/package/dependency.ts b/packages/web-builder/nodejs/package/dependency.ts
similarity index 100%
rename from web-builder/nodejs/package/dependency.ts
rename to packages/web-builder/nodejs/package/dependency.ts
diff --git a/web-builder/nodejs/package/index.ts b/packages/web-builder/nodejs/package/index.ts
similarity index 100%
rename from web-builder/nodejs/package/index.ts
rename to packages/web-builder/nodejs/package/index.ts
diff --git a/web-builder/nodejs/package/manifest.ts b/packages/web-builder/nodejs/package/manifest.ts
similarity index 100%
rename from web-builder/nodejs/package/manifest.ts
rename to packages/web-builder/nodejs/package/manifest.ts
diff --git a/web-builder/nodejs/package/version.ts b/packages/web-builder/nodejs/package/version.ts
similarity index 100%
rename from web-builder/nodejs/package/version.ts
rename to packages/web-builder/nodejs/package/version.ts
diff --git a/web-builder/nodejs/stdlib/README.md b/packages/web-builder/nodejs/stdlib/README.md
similarity index 100%
rename from web-builder/nodejs/stdlib/README.md
rename to packages/web-builder/nodejs/stdlib/README.md
diff --git a/web-builder/nodejs/stdlib/index.ts b/packages/web-builder/nodejs/stdlib/index.ts
similarity index 100%
rename from web-builder/nodejs/stdlib/index.ts
rename to packages/web-builder/nodejs/stdlib/index.ts
diff --git a/web-builder/nodejs/templates/create-react-app-typescript/index.ts b/packages/web-builder/nodejs/templates/create-react-app-typescript/index.ts
similarity index 100%
rename from web-builder/nodejs/templates/create-react-app-typescript/index.ts
rename to packages/web-builder/nodejs/templates/create-react-app-typescript/index.ts
diff --git a/web-builder/nodejs/templates/index.ts b/packages/web-builder/nodejs/templates/index.ts
similarity index 100%
rename from web-builder/nodejs/templates/index.ts
rename to packages/web-builder/nodejs/templates/index.ts
diff --git a/web-builder/nodejs/tsconfig.json b/packages/web-builder/nodejs/tsconfig.json
similarity index 100%
rename from web-builder/nodejs/tsconfig.json
rename to packages/web-builder/nodejs/tsconfig.json
diff --git a/web-builder/nodejs/yarn.lock b/packages/web-builder/nodejs/yarn.lock
similarity index 100%
rename from web-builder/nodejs/yarn.lock
rename to packages/web-builder/nodejs/yarn.lock
diff --git a/web-builder/package.json b/packages/web-builder/package.json
similarity index 100%
rename from web-builder/package.json
rename to packages/web-builder/package.json
diff --git a/web-builder/preact/REAMDME.md b/packages/web-builder/preact/REAMDME.md
similarity index 100%
rename from web-builder/preact/REAMDME.md
rename to packages/web-builder/preact/REAMDME.md
diff --git a/web-builder/preact/index.ts b/packages/web-builder/preact/index.ts
similarity index 100%
rename from web-builder/preact/index.ts
rename to packages/web-builder/preact/index.ts
diff --git a/web-builder/react-native/README.md b/packages/web-builder/react-native/README.md
similarity index 100%
rename from web-builder/react-native/README.md
rename to packages/web-builder/react-native/README.md
diff --git a/web-builder/react/.gitignore b/packages/web-builder/react/.gitignore
similarity index 100%
rename from web-builder/react/.gitignore
rename to packages/web-builder/react/.gitignore
diff --git a/web-builder/react/README.md b/packages/web-builder/react/README.md
similarity index 100%
rename from web-builder/react/README.md
rename to packages/web-builder/react/README.md
diff --git a/web-builder/react/build-app/import-specifications/index.ts b/packages/web-builder/react/build-app/import-specifications/index.ts
similarity index 100%
rename from web-builder/react/build-app/import-specifications/index.ts
rename to packages/web-builder/react/build-app/import-specifications/index.ts
diff --git a/web-builder/react/build-app/import-specifications/react-default.ts b/packages/web-builder/react/build-app/import-specifications/react-default.ts
similarity index 100%
rename from web-builder/react/build-app/import-specifications/react-default.ts
rename to packages/web-builder/react/build-app/import-specifications/react-default.ts
diff --git a/web-builder/react/build-app/import-specifications/with-emotion-styled.ts b/packages/web-builder/react/build-app/import-specifications/with-emotion-styled.ts
similarity index 100%
rename from web-builder/react/build-app/import-specifications/with-emotion-styled.ts
rename to packages/web-builder/react/build-app/import-specifications/with-emotion-styled.ts
diff --git a/web-builder/react/build-app/import-specifications/with-styled-components.ts b/packages/web-builder/react/build-app/import-specifications/with-styled-components.ts
similarity index 100%
rename from web-builder/react/build-app/import-specifications/with-styled-components.ts
rename to packages/web-builder/react/build-app/import-specifications/with-styled-components.ts
diff --git a/web-builder/react/build-app/index.ts b/packages/web-builder/react/build-app/index.ts
similarity index 100%
rename from web-builder/react/build-app/index.ts
rename to packages/web-builder/react/build-app/index.ts
diff --git a/web-builder/react/export/builder/index.ts b/packages/web-builder/react/export/builder/index.ts
similarity index 100%
rename from web-builder/react/export/builder/index.ts
rename to packages/web-builder/react/export/builder/index.ts
diff --git a/web-builder/react/export/export-result/component.export-result.ts b/packages/web-builder/react/export/export-result/component.export-result.ts
similarity index 100%
rename from web-builder/react/export/export-result/component.export-result.ts
rename to packages/web-builder/react/export/export-result/component.export-result.ts
diff --git a/web-builder/react/export/export-result/index.ts b/packages/web-builder/react/export/export-result/index.ts
similarity index 100%
rename from web-builder/react/export/export-result/index.ts
rename to packages/web-builder/react/export/export-result/index.ts
diff --git a/web-builder/react/export/exportable/index.ts b/packages/web-builder/react/export/exportable/index.ts
similarity index 100%
rename from web-builder/react/export/exportable/index.ts
rename to packages/web-builder/react/export/exportable/index.ts
diff --git a/web-builder/react/export/index.ts b/packages/web-builder/react/export/index.ts
similarity index 100%
rename from web-builder/react/export/index.ts
rename to packages/web-builder/react/export/index.ts
diff --git a/web-builder/react/export/stringfy/css-in-jsx.ts b/packages/web-builder/react/export/stringfy/css-in-jsx.ts
similarity index 100%
rename from web-builder/react/export/stringfy/css-in-jsx.ts
rename to packages/web-builder/react/export/stringfy/css-in-jsx.ts
diff --git a/web-builder/react/export/stringfy/index.ts b/packages/web-builder/react/export/stringfy/index.ts
similarity index 100%
rename from web-builder/react/export/stringfy/index.ts
rename to packages/web-builder/react/export/stringfy/index.ts
diff --git a/web-builder/react/export/stringfy/styled-component.ts b/packages/web-builder/react/export/stringfy/styled-component.ts
similarity index 100%
rename from web-builder/react/export/stringfy/styled-component.ts
rename to packages/web-builder/react/export/stringfy/styled-component.ts
diff --git a/web-builder/react/index.ts b/packages/web-builder/react/index.ts
similarity index 100%
rename from web-builder/react/index.ts
rename to packages/web-builder/react/index.ts
diff --git a/web-builder/react/package.json b/packages/web-builder/react/package.json
similarity index 100%
rename from web-builder/react/package.json
rename to packages/web-builder/react/package.json
diff --git a/web-builder/react/widgets.native/button/index.ts b/packages/web-builder/react/widgets.native/button/index.ts
similarity index 100%
rename from web-builder/react/widgets.native/button/index.ts
rename to packages/web-builder/react/widgets.native/button/index.ts
diff --git a/web-builder/react/widgets.native/column/index.ts b/packages/web-builder/react/widgets.native/column/index.ts
similarity index 100%
rename from web-builder/react/widgets.native/column/index.ts
rename to packages/web-builder/react/widgets.native/column/index.ts
diff --git a/web-builder/react/widgets.native/container/index.ts b/packages/web-builder/react/widgets.native/container/index.ts
similarity index 100%
rename from web-builder/react/widgets.native/container/index.ts
rename to packages/web-builder/react/widgets.native/container/index.ts
diff --git a/web-builder/react/widgets.native/error-widget/index.ts b/packages/web-builder/react/widgets.native/error-widget/index.ts
similarity index 100%
rename from web-builder/react/widgets.native/error-widget/index.ts
rename to packages/web-builder/react/widgets.native/error-widget/index.ts
diff --git a/web-builder/react/widgets.native/index.ts b/packages/web-builder/react/widgets.native/index.ts
similarity index 100%
rename from web-builder/react/widgets.native/index.ts
rename to packages/web-builder/react/widgets.native/index.ts
diff --git a/web-builder/react/widgets.native/input/index.ts b/packages/web-builder/react/widgets.native/input/index.ts
similarity index 100%
rename from web-builder/react/widgets.native/input/index.ts
rename to packages/web-builder/react/widgets.native/input/index.ts
diff --git a/web-builder/react/widgets.native/row/index.ts b/packages/web-builder/react/widgets.native/row/index.ts
similarity index 100%
rename from web-builder/react/widgets.native/row/index.ts
rename to packages/web-builder/react/widgets.native/row/index.ts
diff --git a/web-builder/react/widgets.native/stack/index.ts b/packages/web-builder/react/widgets.native/stack/index.ts
similarity index 100%
rename from web-builder/react/widgets.native/stack/index.ts
rename to packages/web-builder/react/widgets.native/stack/index.ts
diff --git a/web-builder/react/widgets.native/text/index.ts b/packages/web-builder/react/widgets.native/text/index.ts
similarity index 100%
rename from web-builder/react/widgets.native/text/index.ts
rename to packages/web-builder/react/widgets.native/text/index.ts
diff --git a/web-builder/react/widgets.reflect/index.ts b/packages/web-builder/react/widgets.reflect/index.ts
similarity index 100%
rename from web-builder/react/widgets.reflect/index.ts
rename to packages/web-builder/react/widgets.reflect/index.ts
diff --git a/web-builder/react/widgets.reflect/reflect-widget.ts b/packages/web-builder/react/widgets.reflect/reflect-widget.ts
similarity index 100%
rename from web-builder/react/widgets.reflect/reflect-widget.ts
rename to packages/web-builder/react/widgets.reflect/reflect-widget.ts
diff --git a/web-builder/react/widgets.reflect/text/index.ts b/packages/web-builder/react/widgets.reflect/text/index.ts
similarity index 100%
rename from web-builder/react/widgets.reflect/text/index.ts
rename to packages/web-builder/react/widgets.reflect/text/index.ts
diff --git a/web-builder/react/widgets/index.ts b/packages/web-builder/react/widgets/index.ts
similarity index 100%
rename from web-builder/react/widgets/index.ts
rename to packages/web-builder/react/widgets/index.ts
diff --git a/web-builder/react/widgets/widget.ts b/packages/web-builder/react/widgets/widget.ts
similarity index 100%
rename from web-builder/react/widgets/widget.ts
rename to packages/web-builder/react/widgets/widget.ts
diff --git a/web-builder/reflect/imports/index.ts b/packages/web-builder/reflect/imports/index.ts
similarity index 100%
rename from web-builder/reflect/imports/index.ts
rename to packages/web-builder/reflect/imports/index.ts
diff --git a/web-builder/reflect/index.ts b/packages/web-builder/reflect/index.ts
similarity index 100%
rename from web-builder/reflect/index.ts
rename to packages/web-builder/reflect/index.ts
diff --git a/web-builder/reflect/package.json b/packages/web-builder/reflect/package.json
similarity index 100%
rename from web-builder/reflect/package.json
rename to packages/web-builder/reflect/package.json
diff --git a/web-builder/styled/README.md b/packages/web-builder/styled/README.md
similarity index 100%
rename from web-builder/styled/README.md
rename to packages/web-builder/styled/README.md
diff --git a/web-builder/styled/formatter.ts b/packages/web-builder/styled/formatter.ts
similarity index 100%
rename from web-builder/styled/formatter.ts
rename to packages/web-builder/styled/formatter.ts
diff --git a/web-builder/styled/index.ts b/packages/web-builder/styled/index.ts
similarity index 100%
rename from web-builder/styled/index.ts
rename to packages/web-builder/styled/index.ts
diff --git a/web-builder/styled/package.json b/packages/web-builder/styled/package.json
similarity index 100%
rename from web-builder/styled/package.json
rename to packages/web-builder/styled/package.json
diff --git a/web-builder/styled/styled-component-declaration.ts b/packages/web-builder/styled/styled-component-declaration.ts
similarity index 100%
rename from web-builder/styled/styled-component-declaration.ts
rename to packages/web-builder/styled/styled-component-declaration.ts
diff --git a/web-builder/styles/.gitignore b/packages/web-builder/styles/.gitignore
similarity index 100%
rename from web-builder/styles/.gitignore
rename to packages/web-builder/styles/.gitignore
diff --git a/web-builder/styles/align-self/index.ts b/packages/web-builder/styles/align-self/index.ts
similarity index 100%
rename from web-builder/styles/align-self/index.ts
rename to packages/web-builder/styles/align-self/index.ts
diff --git a/web-builder/styles/background/README.md b/packages/web-builder/styles/background/README.md
similarity index 100%
rename from web-builder/styles/background/README.md
rename to packages/web-builder/styles/background/README.md
diff --git a/web-builder/styles/background/index.ts b/packages/web-builder/styles/background/index.ts
similarity index 100%
rename from web-builder/styles/background/index.ts
rename to packages/web-builder/styles/background/index.ts
diff --git a/web-builder/styles/border-radius/index.ts b/packages/web-builder/styles/border-radius/index.ts
similarity index 100%
rename from web-builder/styles/border-radius/index.ts
rename to packages/web-builder/styles/border-radius/index.ts
diff --git a/web-builder/styles/box-shadow/index.ts b/packages/web-builder/styles/box-shadow/index.ts
similarity index 100%
rename from web-builder/styles/box-shadow/index.ts
rename to packages/web-builder/styles/box-shadow/index.ts
diff --git a/web-builder/styles/color/index.ts b/packages/web-builder/styles/color/index.ts
similarity index 100%
rename from web-builder/styles/color/index.ts
rename to packages/web-builder/styles/color/index.ts
diff --git a/web-builder/styles/dimensions/index.ts b/packages/web-builder/styles/dimensions/index.ts
similarity index 100%
rename from web-builder/styles/dimensions/index.ts
rename to packages/web-builder/styles/dimensions/index.ts
diff --git a/web-builder/styles/dimensions/px.ts b/packages/web-builder/styles/dimensions/px.ts
similarity index 100%
rename from web-builder/styles/dimensions/px.ts
rename to packages/web-builder/styles/dimensions/px.ts
diff --git a/web-builder/styles/font-weight/index.ts b/packages/web-builder/styles/font-weight/index.ts
similarity index 100%
rename from web-builder/styles/font-weight/index.ts
rename to packages/web-builder/styles/font-weight/index.ts
diff --git a/web-builder/styles/gradient/README.md b/packages/web-builder/styles/gradient/README.md
similarity index 100%
rename from web-builder/styles/gradient/README.md
rename to packages/web-builder/styles/gradient/README.md
diff --git a/web-builder/styles/gradient/index.ts b/packages/web-builder/styles/gradient/index.ts
similarity index 100%
rename from web-builder/styles/gradient/index.ts
rename to packages/web-builder/styles/gradient/index.ts
diff --git a/web-builder/styles/index.ts b/packages/web-builder/styles/index.ts
similarity index 100%
rename from web-builder/styles/index.ts
rename to packages/web-builder/styles/index.ts
diff --git a/web-builder/styles/order/index.ts b/packages/web-builder/styles/order/index.ts
similarity index 100%
rename from web-builder/styles/order/index.ts
rename to packages/web-builder/styles/order/index.ts
diff --git a/web-builder/styles/package.json b/packages/web-builder/styles/package.json
similarity index 100%
rename from web-builder/styles/package.json
rename to packages/web-builder/styles/package.json
diff --git a/web-builder/styles/padding/index.ts b/packages/web-builder/styles/padding/index.ts
similarity index 100%
rename from web-builder/styles/padding/index.ts
rename to packages/web-builder/styles/padding/index.ts
diff --git a/web-builder/styles/position/index.ts b/packages/web-builder/styles/position/index.ts
similarity index 100%
rename from web-builder/styles/position/index.ts
rename to packages/web-builder/styles/position/index.ts
diff --git a/web-builder/styles/shape-circle/README.md b/packages/web-builder/styles/shape-circle/README.md
similarity index 100%
rename from web-builder/styles/shape-circle/README.md
rename to packages/web-builder/styles/shape-circle/README.md
diff --git a/web-builder/styles/shape-circle/index.ts b/packages/web-builder/styles/shape-circle/index.ts
similarity index 100%
rename from web-builder/styles/shape-circle/index.ts
rename to packages/web-builder/styles/shape-circle/index.ts
diff --git a/web-builder/styles/shape-round-rect/index.ts b/packages/web-builder/styles/shape-round-rect/index.ts
similarity index 100%
rename from web-builder/styles/shape-round-rect/index.ts
rename to packages/web-builder/styles/shape-round-rect/index.ts
diff --git a/web-builder/svelte/.gitignore b/packages/web-builder/svelte/.gitignore
similarity index 100%
rename from web-builder/svelte/.gitignore
rename to packages/web-builder/svelte/.gitignore
diff --git a/web-builder/svelte/REAMDME.md b/packages/web-builder/svelte/REAMDME.md
similarity index 100%
rename from web-builder/svelte/REAMDME.md
rename to packages/web-builder/svelte/REAMDME.md
diff --git a/web-builder/svelte/index.ts b/packages/web-builder/svelte/index.ts
similarity index 100%
rename from web-builder/svelte/index.ts
rename to packages/web-builder/svelte/index.ts
diff --git a/web-builder/tsconfig.json b/packages/web-builder/tsconfig.json
similarity index 100%
rename from web-builder/tsconfig.json
rename to packages/web-builder/tsconfig.json
diff --git a/web-builder/vanilla/package.json b/packages/web-builder/vanilla/package.json
similarity index 100%
rename from web-builder/vanilla/package.json
rename to packages/web-builder/vanilla/package.json
diff --git a/web-builder/vue/.gitignore b/packages/web-builder/vue/.gitignore
similarity index 100%
rename from web-builder/vue/.gitignore
rename to packages/web-builder/vue/.gitignore
diff --git a/web-builder/vue/README.md b/packages/web-builder/vue/README.md
similarity index 100%
rename from web-builder/vue/README.md
rename to packages/web-builder/vue/README.md
diff --git a/web-builder/vue/index.ts b/packages/web-builder/vue/index.ts
similarity index 100%
rename from web-builder/vue/index.ts
rename to packages/web-builder/vue/index.ts
diff --git a/web-builder/vue/package.json b/packages/web-builder/vue/package.json
similarity index 100%
rename from web-builder/vue/package.json
rename to packages/web-builder/vue/package.json
diff --git a/web-builder/web-builder/index.ts b/packages/web-builder/web-builder/index.ts
similarity index 100%
rename from web-builder/web-builder/index.ts
rename to packages/web-builder/web-builder/index.ts
diff --git a/web-builder/web-builder/package.json b/packages/web-builder/web-builder/package.json
similarity index 100%
rename from web-builder/web-builder/package.json
rename to packages/web-builder/web-builder/package.json
diff --git a/web-builder/yarn.lock b/packages/web-builder/yarn.lock
similarity index 100%
rename from web-builder/yarn.lock
rename to packages/web-builder/yarn.lock

From fff29acea122588cf9b8c63671e045cee87a8592 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Wed, 15 Sep 2021 14:29:29 +0900
Subject: [PATCH 72/73] rm web-builder as submodule

---
 .gitmodules               | 3 ---
 packages/coli-web-builder | 1 -
 2 files changed, 4 deletions(-)
 delete mode 160000 packages/coli-web-builder

diff --git a/.gitmodules b/.gitmodules
index 49f232e4..be96b70b 100644
--- a/.gitmodules
+++ b/.gitmodules
@@ -10,9 +10,6 @@
 [submodule "packages/reflect-core"]
 	path = packages/reflect-core
 	url = https://github.com/bridgedxyz/reflect-core-ts
-[submodule "packages/coli-web-builder"]
-	path = packages/coli-web-builder
-	url = https://github.com/bridgedxyz/coli-web-builder
 [submodule "ui/editor-ui"]
 	path = ui/editor-ui
 	url = https://github.com/bridgedxyz/reflect-editor-ui
diff --git a/packages/coli-web-builder b/packages/coli-web-builder
deleted file mode 160000
index bc116484..00000000
--- a/packages/coli-web-builder
+++ /dev/null
@@ -1 +0,0 @@
-Subproject commit bc1164840910eb5fe7d80df859d4789be968c19a

From c469ce0f173fa43c4b88b634d2885a68fc75d9af Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Wed, 15 Sep 2021 14:31:54 +0900
Subject: [PATCH 73/73] bump manifest

---
 package.json          | 2 +-
 packages/reflect-core | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index c93adc99..4daa32c2 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,6 @@
         "packages/reflect-core/packages/*",
         "packages/design-sdk/*",
         "packages/coli/packages/*",
-        "packages/coli-web-builder/*"
+        "packages/web-builder/*"
     ]
 }
\ No newline at end of file
diff --git a/packages/reflect-core b/packages/reflect-core
index 7a0d2ed3..9a0b94a6 160000
--- a/packages/reflect-core
+++ b/packages/reflect-core
@@ -1 +1 @@
-Subproject commit 7a0d2ed39033fb27e55f098c8585002d0691f566
+Subproject commit 9a0b94a68cf8fd05bb9a079770d6dcda21e61be3