From 62ea077749b8ca5c4fc5f0e52e864cce4df43a82 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Wed, 13 Jul 2022 00:11:07 +0900
Subject: [PATCH 01/68] init with simple blueprints

---
 packages/support-module/README.md    | 42 ++++++++++++++++++++++++++++
 packages/support-module/package.json |  4 +++
 2 files changed, 46 insertions(+)
 create mode 100644 packages/support-module/package.json

diff --git a/packages/support-module/README.md b/packages/support-module/README.md
index fd9b47c3..928ff907 100644
--- a/packages/support-module/README.md
+++ b/packages/support-module/README.md
@@ -1,3 +1,45 @@
 # Moduling support
 
 Here, "Module" means a file that contains a exported component
+
+Module is a single file or a directory containing developer-friendly api exports. It should consider the following:
+
+- Is the import statement simple and understandable?
+- Is the import statement well allocating the origin design?
+- Does each directory contains readme.md and well documented?
+- Does this module on file system can be exported between different platforms? - e.g. (git / github / git submodule / npm / ...)
+- Does this module contains meta data to be tracked by grida when user decides to?
+- Is this module well structured for manual user edits?
+- Is this module tolerant to manual user edits?
+- Can developer (user) extend widgets with custom styles?
+- Can developer (user) extend widgets with custom props?
+- Can developer (user) extend components with custom functions?
+
+## Module Composition Styles
+
+A. **Single file component composition**
+
+```
+- {module-name}.tsx
+```
+
+B. **Multi file component composition / (flat)**
+
+```
+- {module-name}/
+  - styles.ts
+  - index.ts
+  - {module-name}.tsx (root widget)
+```
+
+C. **Multi file component composition / (nested)**
+
+```
+- {module-name}/
+  - styles/
+    - index.ts
+    - {widget-0}.style.ts
+    - {widget-1}.style.ts
+  - index.ts
+  - {module-name}.tsx (root widget)
+```
diff --git a/packages/support-module/package.json b/packages/support-module/package.json
new file mode 100644
index 00000000..d81443cc
--- /dev/null
+++ b/packages/support-module/package.json
@@ -0,0 +1,4 @@
+{
+  "name": "@code-features/module",
+  "version": "0.0.0"
+}
\ No newline at end of file

From d86629e95f34596aefd724ce4559708e37d30eb7 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Fri, 15 Jul 2022 00:55:37 +0900
Subject: [PATCH 02/68] add fresh packages

---
 packages/support-readme/package.json               | 4 ++++
 packages/support-widget-documentation/index.ts     | 0
 packages/support-widget-documentation/package.json | 4 ++++
 3 files changed, 8 insertions(+)
 create mode 100644 packages/support-readme/package.json
 create mode 100644 packages/support-widget-documentation/index.ts
 create mode 100644 packages/support-widget-documentation/package.json

diff --git a/packages/support-readme/package.json b/packages/support-readme/package.json
new file mode 100644
index 00000000..137223f5
--- /dev/null
+++ b/packages/support-readme/package.json
@@ -0,0 +1,4 @@
+{
+  "name": "@code-features/readme",
+  "version": "0.0.0"
+}
\ No newline at end of file
diff --git a/packages/support-widget-documentation/index.ts b/packages/support-widget-documentation/index.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/support-widget-documentation/package.json b/packages/support-widget-documentation/package.json
new file mode 100644
index 00000000..a0cc5654
--- /dev/null
+++ b/packages/support-widget-documentation/package.json
@@ -0,0 +1,4 @@
+{
+  "name": "@code-features/widget-documents",
+  "version": "0.0.0"
+}
\ No newline at end of file

From 23c16aad5fbea3ad8f5820ceb3b18e9d3a1fc552 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Fri, 15 Jul 2022 01:58:10 +0900
Subject: [PATCH 03/68] update doc package with readme

---
 packages/support-documentation/README.md      | 11 ++++++
 .../doc-widget-props-interface}/index.ts      |  0
 .../doc-widget-props-interface/readme.md      | 24 ++++++++++++
 .../support-documentation/doc-widget/index.ts |  0
 .../doc-widget/readme.md                      | 37 +++++++++++++++++++
 packages/support-documentation/index.ts       |  0
 packages/support-documentation/package.json   |  4 ++
 .../support-widget-documentation/package.json |  4 --
 8 files changed, 76 insertions(+), 4 deletions(-)
 create mode 100644 packages/support-documentation/README.md
 rename packages/{support-widget-documentation => support-documentation/doc-widget-props-interface}/index.ts (100%)
 create mode 100644 packages/support-documentation/doc-widget-props-interface/readme.md
 create mode 100644 packages/support-documentation/doc-widget/index.ts
 create mode 100644 packages/support-documentation/doc-widget/readme.md
 create mode 100644 packages/support-documentation/index.ts
 create mode 100644 packages/support-documentation/package.json
 delete mode 100644 packages/support-widget-documentation/package.json

diff --git a/packages/support-documentation/README.md b/packages/support-documentation/README.md
new file mode 100644
index 00000000..c3ba85a9
--- /dev/null
+++ b/packages/support-documentation/README.md
@@ -0,0 +1,11 @@
+# inline code documentations support (e.g. jsdoc)
+
+The generated results should follow the vscode render compatibilities.
+
+## Supported languages
+
+- jsdoc (.js, .ts, .tsx, .jsx)
+
+## References
+
+- [tsdoc](https://tsdoc.org/)
diff --git a/packages/support-widget-documentation/index.ts b/packages/support-documentation/doc-widget-props-interface/index.ts
similarity index 100%
rename from packages/support-widget-documentation/index.ts
rename to packages/support-documentation/doc-widget-props-interface/index.ts
diff --git a/packages/support-documentation/doc-widget-props-interface/readme.md b/packages/support-documentation/doc-widget-props-interface/readme.md
new file mode 100644
index 00000000..2df159b4
--- /dev/null
+++ b/packages/support-documentation/doc-widget-props-interface/readme.md
@@ -0,0 +1,24 @@
+# doc for widget props interface
+
+example.
+
+```ts
+/**
+ * Properties of the {widget-name} widget.
+ *
+ * - [Open in Figma](https://www.figma.com/file/{file-id}/{file-name})
+ * - [Open in Grida](https://grida.co/:project/:widget/props)
+ * - [Learn more](https://grida.co/docs/widget-props)
+ *
+ *
+ * ---
+ * meta infos:
+ * ---
+ */
+interface WidgetProps {
+  /**
+   *
+   */
+  onClick?: (e) => void;
+}
+```
diff --git a/packages/support-documentation/doc-widget/index.ts b/packages/support-documentation/doc-widget/index.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/support-documentation/doc-widget/readme.md b/packages/support-documentation/doc-widget/readme.md
new file mode 100644
index 00000000..9d36e0ed
--- /dev/null
+++ b/packages/support-documentation/doc-widget/readme.md
@@ -0,0 +1,37 @@
+# doc for widget (class / function)
+
+example (react, functional component).
+
+````tsx
+/**
+ * - [Open in Figma](https://www.figma.com/file/{file-id}/{file-name})
+ * - [Open in Grida](https://grida.co/:project/:widget/props)
+ * - [Learn more](https://grida.co/docs/widget-props)
+ *
+ * @example
+ * ```tsx
+ * import Widget from "{package-name}";
+ *
+ * function (){
+ *  return <Widget
+ *    onClick={(e?) => {}}
+ *    title="..."
+ *    description="..."
+ *  />;
+ * }
+ * ```
+ *
+ * ---
+ * meta infos:
+ * ---
+ *
+ * ---
+ * preview
+ *
+ * ![preview](cdn.grida.co/widgets/{widget-name}/preview.png)
+ * ---
+ */
+function Widget({ ...props }: WidgetProps) {
+  // ...
+}
+````
diff --git a/packages/support-documentation/index.ts b/packages/support-documentation/index.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/support-documentation/package.json b/packages/support-documentation/package.json
new file mode 100644
index 00000000..9103cad1
--- /dev/null
+++ b/packages/support-documentation/package.json
@@ -0,0 +1,4 @@
+{
+  "name": "@code-features/documentation",
+  "version": "0.0.0"
+}
\ No newline at end of file
diff --git a/packages/support-widget-documentation/package.json b/packages/support-widget-documentation/package.json
deleted file mode 100644
index a0cc5654..00000000
--- a/packages/support-widget-documentation/package.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "name": "@code-features/widget-documents",
-  "version": "0.0.0"
-}
\ No newline at end of file

From d46708e09c2b822fa8b82e8711c283d460ae872b Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Fri, 15 Jul 2022 01:58:21 +0900
Subject: [PATCH 04/68] add dts support package (empty)

---
 packages/support-dts/index.ts     | 0
 packages/support-dts/package.json | 5 +++++
 2 files changed, 5 insertions(+)
 create mode 100644 packages/support-dts/index.ts
 create mode 100644 packages/support-dts/package.json

diff --git a/packages/support-dts/index.ts b/packages/support-dts/index.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/support-dts/package.json b/packages/support-dts/package.json
new file mode 100644
index 00000000..1beee91a
--- /dev/null
+++ b/packages/support-dts/package.json
@@ -0,0 +1,5 @@
+{
+  "name": "@code-features/dts",
+  "version": "0.0.0",
+  "description": ".d.ts codegen support for plain js outputs"
+}
\ No newline at end of file

From 5d591fd7f90cfebbdf5bdef14b0d2a0632453ebe Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Fri, 15 Jul 2022 08:54:22 +0900
Subject: [PATCH 05/68] refactor

---
 .../project-part-snapshot-build-default-params.ts            | 4 ++--
 packages/builder-config/output/output-module/index.ts        | 5 ++++-
 packages/builder-config/output/output-part-project/index.ts  | 4 ++--
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/builder-config/output/make-output/project-part-snapshot-build-default-params.ts b/packages/builder-config/output/make-output/project-part-snapshot-build-default-params.ts
index e31d9062..5b920eeb 100644
--- a/packages/builder-config/output/make-output/project-part-snapshot-build-default-params.ts
+++ b/packages/builder-config/output/make-output/project-part-snapshot-build-default-params.ts
@@ -1,6 +1,6 @@
 import type { ProjectPart } from "../output-part-project";
 import type { File } from "../output-file";
-import type { Module } from "../output-module";
+import type { ModuleFile } from "../output-module";
 import * as k from "../../k";
 
 export function make_project_part_output({
@@ -16,7 +16,7 @@ export function make_project_part_output({
   version?: string;
   main: string;
   files: File[];
-  modules: Module[];
+  modules: ModuleFile[];
   os?: string[];
   engines?: {
     [key: string]: string;
diff --git a/packages/builder-config/output/output-module/index.ts b/packages/builder-config/output/output-module/index.ts
index 382e6c6d..ee85d1bd 100644
--- a/packages/builder-config/output/output-module/index.ts
+++ b/packages/builder-config/output/output-module/index.ts
@@ -1,4 +1,7 @@
-export interface Module extends File {
+/**
+ * a
+ */
+export interface ModuleFile extends File {
   _type: "module";
   language: "ts" | "tsx" | "js" | "jsx" | "vue" | "dart" | "svelte";
 
diff --git a/packages/builder-config/output/output-part-project/index.ts b/packages/builder-config/output/output-part-project/index.ts
index 9d81f1c7..e1fabc81 100644
--- a/packages/builder-config/output/output-part-project/index.ts
+++ b/packages/builder-config/output/output-part-project/index.ts
@@ -1,5 +1,5 @@
 import { File } from "../output-file";
-import type { Module } from "../output-module";
+import type { ModuleFile } from "../output-module";
 
 /**
  * PartProject interface.
@@ -36,7 +36,7 @@ export interface ProjectPart {
 
   license?: string;
 
-  modules: Module[];
+  modules: ModuleFile[];
 
   files: File[];
 

From e016962ae7328ce7dbef04d47f83bfa11c06a76e Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Mon, 18 Jul 2022 17:25:01 +0900
Subject: [PATCH 06/68] add single file multi widget composition doc

---
 .../readme.md                                 | 54 +++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 packages/support-module/module-composition-style-single-file/readme.md

diff --git a/packages/support-module/module-composition-style-single-file/readme.md b/packages/support-module/module-composition-style-single-file/readme.md
new file mode 100644
index 00000000..374b077a
--- /dev/null
+++ b/packages/support-module/module-composition-style-single-file/readme.md
@@ -0,0 +1,54 @@
+# Signle file module composition
+
+This directory contains logics & documents for composing a module in a single file (e.g. widget.tsx) having multiple exports.
+
+On web platform, this style **DOES NOT** support importing css files. (.css, .module.css)
+
+## Considerations
+
+- exporting rules
+
+## Example `single-file-multi-widget` module
+
+**Super simple example. - no variables, no conflicting names, no extra styles**
+
+```tsx
+import React from "react";
+
+function RootWidget() {
+  return (
+    <div>
+      <Widget1 />
+      <Widget2 />
+    </div>
+  );
+}
+
+function Widget1() {
+  return <div>widget1 - i have no child</div>;
+}
+
+function Widget2() {
+  return <div>widget2 - i have no child</div>;
+}
+
+export { RootWidget, Widget1, Widget2 };
+export default RootWidget;
+```
+
+## Abstraction
+
+Let's make the widget names abstract and anonymous for clearer understanding.
+
+```tsx
+import React from "react";
+
+function _() {}
+
+function __() {}
+
+function ___() {}
+
+export { _, __, ___ };
+export default _;
+```

From d2eeb23729a2876579f30bb814198fceed23012e Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Mon, 18 Jul 2022 17:25:16 +0900
Subject: [PATCH 07/68] init default props pkg

---
 .../support-module/props-default/index.ts     |  0
 .../props-default/on-change/index.ts          |  0
 .../props-default/on-click/index.ts           |  0
 .../support-module/props-default/readme.md    | 93 +++++++++++++++++++
 4 files changed, 93 insertions(+)
 create mode 100644 packages/support-module/props-default/index.ts
 create mode 100644 packages/support-module/props-default/on-change/index.ts
 create mode 100644 packages/support-module/props-default/on-click/index.ts
 create mode 100644 packages/support-module/props-default/readme.md

diff --git a/packages/support-module/props-default/index.ts b/packages/support-module/props-default/index.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/support-module/props-default/on-change/index.ts b/packages/support-module/props-default/on-change/index.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/support-module/props-default/on-click/index.ts b/packages/support-module/props-default/on-click/index.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/support-module/props-default/readme.md b/packages/support-module/props-default/readme.md
new file mode 100644
index 00000000..7b6cec2a
--- /dev/null
+++ b/packages/support-module/props-default/readme.md
@@ -0,0 +1,93 @@
+# default props for widget modules
+
+**form events**
+
+- onblur: Fires the moment that the element loses focus
+- onchange: Fires the moment when the value of the element is changed
+- oncontextmenu: Script to be run when a context menu is triggered
+- onfocus: Fires the moment when the element gets focus
+- oninput: Script to be run when an element gets user input
+- oninvalid: Script to be run when an element is invalid
+- onreset: Fires when the Reset button in a form is clicked
+- onsearch: Fires when the user writes something in a search field (for `<input="search">`)
+- onselect: Fires after some text has been selected in an element
+- onsubmit: Fires when a form is submitted
+
+**keyboard events**
+
+- onkeydown
+- onkeypress
+- onkeyup
+
+**mouse events**
+
+- onclick
+- ondbclick
+- onmousedown
+- onmousemove
+- onmouseout
+- onmouseover
+- onmouseup
+- onmousewheel
+- onwheel
+
+**drag events**
+
+- ondrag
+- ondragend
+- ondragenter
+- ondragleave
+- ondragover
+- ondragstart
+- ondrop
+- onscroll
+
+**clipboard events**
+
+- oncopy
+- oncut
+- onpaste
+
+## props field name handling
+
+No deligation (asis)
+
+```tsx
+function Child({ onClick }: { onClick?: (e) => void }) {
+  return <div onClick={onClick} />;
+}
+```
+
+With deligation (tobe)
+
+```tsx
+function Parent({
+  onClick,
+  onChildClick,
+}: {
+  onClick?: (e) => void;
+  onChildClick?: (e) => void;
+}) {
+  return (
+    <div onClick={onClick}>
+      <Child onClick={onChildClick} />
+    </div>
+  );
+}
+
+// or with .d.ts representation..
+interface ParentProps {
+  onClick?: (e) => void;
+} & {
+  /**
+   * ChildProps#onClick
+   */
+  onChildClick?: ChildProps['onClick'];
+};
+```
+
+You can see that `onClick` keyword always represents to the callback to the caller, and the deligated callback will be renamed to `onChildClick`.
+
+## References
+
+- https://reactjs.org/docs/events.html

From de8a5af3679235e395e3ca7ba27cef1d0399f715 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Mon, 18 Jul 2022 17:25:32 +0900
Subject: [PATCH 08/68] add child props deligation doc

---
 .../props-children-deligation/readme.md       | 58 +++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 packages/support-module/props-children-deligation/readme.md

diff --git a/packages/support-module/props-children-deligation/readme.md b/packages/support-module/props-children-deligation/readme.md
new file mode 100644
index 00000000..0a1e9391
--- /dev/null
+++ b/packages/support-module/props-children-deligation/readme.md
@@ -0,0 +1,58 @@
+# Children as props deligation
+
+```
+- Widget (module)
+  - Container1 (module)
+  - Container2 (module)
+    - Button (module)
+      - Image
+      - Text
+```
+
+In above case, the `Widget` should contain available slots (optional props field) for Container1, 2 and Button override (with props handling logic aside).
+
+Full example output with code below
+
+```tsx
+import React from "react";
+
+function Widget() {
+  return (
+    <div>
+      <Container1 />
+      <Container2 />
+    </div>
+  );
+}
+
+function Container1(props) {
+  return <div>container1 - i have no child</div>;
+}
+
+type Container2Props = ({} & ButtonProps) | {};
+
+function Container2() {
+  return (
+    <div>
+      <Button />
+    </div>
+  );
+}
+
+interface ButtonProps {
+  image: string;
+  /**
+   * @default "click me"
+   */
+  text?: string;
+}
+
+function Button({ image, text = "click me" }: ButtonProps) {
+  return (
+    <button>
+      <image src={image} />
+      <div>{text}</div>
+    </button>
+  );
+}
+```

From 99f51a66e969ac6b353a1e7aca2fbe91f4ef9311 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Mon, 18 Jul 2022 18:24:43 +0900
Subject: [PATCH 09/68] cleanup

---
 .../designto-token/support-flags/token-heading/index.ts    | 2 +-
 packages/designto-token/support-flags/token-p/index.ts     | 2 +-
 .../designto-token/support-flags/token-progress/index.ts   | 7 +++++--
 .../designto-token/support-flags/token-slider/index.ts     | 2 +-
 packages/designto-token/support-flags/token-span/index.ts  | 2 +-
 .../designto-token/support-flags/token-wh-fix/index.ts     | 2 +-
 packages/designto-token/support-flags/token-wh/index.ts    | 2 +-
 packages/designto-token/support-flags/token-wrap/index.ts  | 2 +-
 8 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/packages/designto-token/support-flags/token-heading/index.ts b/packages/designto-token/support-flags/token-heading/index.ts
index ea22eb3d..b3f84ef5 100644
--- a/packages/designto-token/support-flags/token-heading/index.ts
+++ b/packages/designto-token/support-flags/token-heading/index.ts
@@ -8,7 +8,7 @@ type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 export function tokenize_flagged_heading(
   node: ReflectSceneNode,
   flag: HeadingFlag
-): Text {
+): Text | undefined {
   if (flag.value === false) return;
   if (node.type !== "TEXT") return;
 
diff --git a/packages/designto-token/support-flags/token-p/index.ts b/packages/designto-token/support-flags/token-p/index.ts
index ff71ef56..79626110 100644
--- a/packages/designto-token/support-flags/token-p/index.ts
+++ b/packages/designto-token/support-flags/token-p/index.ts
@@ -6,7 +6,7 @@ import { tokenizeText } from "../../token-text";
 export function tokenize_flagged_paragraph(
   node: ReflectSceneNode,
   flag: AsParagraphFlag
-): Text {
+): Text | undefined {
   if (flag.value === false) return;
   if (node.type !== "TEXT") return;
 
diff --git a/packages/designto-token/support-flags/token-progress/index.ts b/packages/designto-token/support-flags/token-progress/index.ts
index 852d3349..fed62515 100644
--- a/packages/designto-token/support-flags/token-progress/index.ts
+++ b/packages/designto-token/support-flags/token-progress/index.ts
@@ -18,7 +18,10 @@ import { WrappingContainer } from "../../tokens";
 export function tokenize_flagged_progress(
   node: ReflectSceneNode,
   flag: AsProgressFlag
-): LinearProgressIndicator | WrappingContainer<LinearProgressIndicator> {
+):
+  | LinearProgressIndicator
+  | WrappingContainer<LinearProgressIndicator>
+  | undefined {
   if (flag.value === false) return;
 
   const validated = validate_progress(node);
@@ -38,7 +41,7 @@ export function tokenize_flagged_progress(
         // calculate percentage of value by its width, round to 2 decimal point
         const _initial_value =
           // if the value node is floating, it means it is indeterminate, -0
-          value.x <= 1
+          value?.x ?? 0 <= 1
             ? Math.round((v_w / p_w + Number.EPSILON) * 100) / 100
             : -0;
         // -------------------------------------------
diff --git a/packages/designto-token/support-flags/token-slider/index.ts b/packages/designto-token/support-flags/token-slider/index.ts
index abffa078..7e67ba0d 100644
--- a/packages/designto-token/support-flags/token-slider/index.ts
+++ b/packages/designto-token/support-flags/token-slider/index.ts
@@ -19,7 +19,7 @@ import { WrappingContainer } from "../../tokens";
 export function tokenize_flagged_slider(
   node: ReflectSceneNode,
   flag: AsSliderFlag
-): Slider | WrappingContainer {
+): Slider | WrappingContainer | undefined {
   if (flag.value === false) return;
 
   const validated = validate_slider(node);
diff --git a/packages/designto-token/support-flags/token-span/index.ts b/packages/designto-token/support-flags/token-span/index.ts
index db4b51fd..8f9d991e 100644
--- a/packages/designto-token/support-flags/token-span/index.ts
+++ b/packages/designto-token/support-flags/token-span/index.ts
@@ -6,7 +6,7 @@ import { tokenizeText } from "../../token-text";
 export function tokenize_flagged_span(
   node: ReflectSceneNode,
   flag: AsTextSpanFlag
-): Text {
+): Text | undefined {
   if (flag.value === false) return;
   if (node.type !== "TEXT") return;
 
diff --git a/packages/designto-token/support-flags/token-wh-fix/index.ts b/packages/designto-token/support-flags/token-wh-fix/index.ts
index 1c366f34..b94fbe36 100644
--- a/packages/designto-token/support-flags/token-wh-fix/index.ts
+++ b/packages/designto-token/support-flags/token-wh-fix/index.ts
@@ -7,7 +7,7 @@ import { unwrappedChild } from "../../wrappings";
 export function tokenize_flagged_fix_wh(
   node: ReflectSceneNode,
   flag: FixWHFlag[]
-): Widget {
+): Widget | undefined {
   if (!flag.length) return;
   const widget = tokenize(node, {
     should_ignore_flag: (n) => {
diff --git a/packages/designto-token/support-flags/token-wh/index.ts b/packages/designto-token/support-flags/token-wh/index.ts
index 3aab303f..9709f073 100644
--- a/packages/designto-token/support-flags/token-wh/index.ts
+++ b/packages/designto-token/support-flags/token-wh/index.ts
@@ -14,7 +14,7 @@ import { unwrappedChild } from "../../wrappings";
 export function tokenize_flagged_wh_declaration(
   node: ReflectSceneNode,
   flag: WHDeclarationFlag[]
-): Widget {
+): Widget | undefined {
   if (!flag.length) return;
 
   const merged = flag
diff --git a/packages/designto-token/support-flags/token-wrap/index.ts b/packages/designto-token/support-flags/token-wrap/index.ts
index a159e7d5..229ed02f 100644
--- a/packages/designto-token/support-flags/token-wrap/index.ts
+++ b/packages/designto-token/support-flags/token-wrap/index.ts
@@ -35,7 +35,7 @@ import { unwrappedChild } from "../../wrappings";
 export function tokenize_flagged_wrap(
   node: ReflectSceneNode,
   flag: AsWrapFlag
-): Wrap {
+): Wrap | undefined {
   if (flag.value === false) return;
 
   const validated = validate_input(node as any);

From 363487b797eae7e677ab5a9b4bb979ac22d66475 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Mon, 18 Jul 2022 19:19:30 +0900
Subject: [PATCH 10/68] update declare docs

---
 packages/support-flags/--declare/index.ts | 15 +++++++++++++++
 packages/support-flags/docs/--declare.md  |  2 +-
 packages/support-flags/parse.ts           |  8 +++++---
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/packages/support-flags/--declare/index.ts b/packages/support-flags/--declare/index.ts
index 56a6bb33..1c78d318 100644
--- a/packages/support-flags/--declare/index.ts
+++ b/packages/support-flags/--declare/index.ts
@@ -8,7 +8,22 @@ export const flag_key_alias__declare = [flag_key__declare];
  */
 export interface DeclareSpecificationFlag {
   flag: typeof flag_key__declare;
+  /**
+   * rather this declaration to be exported of not. (public or not)
+   */
+  export?: boolean;
 
+  /**
+   * explit name to use when exporting this declaration.
+   * when not provided, uses the default name with passed coli namer
+   */
+  identifier?: string;
+
+  /**
+   * value. of the flag (automatically handled by parser)
+   * - true = declare
+   * - false = don't declare
+   */
   value: boolean;
   _raw?: string;
 }
diff --git a/packages/support-flags/docs/--declare.md b/packages/support-flags/docs/--declare.md
index 591f87ce..f4c44e55 100644
--- a/packages/support-flags/docs/--declare.md
+++ b/packages/support-flags/docs/--declare.md
@@ -39,7 +39,7 @@ stage:
 
 ## When to use
 
-Baes on this tsx react example - assuming the input design has a deep-depthed children structure, you can specify the `--declare` flag to split one of the child as a in-module component and transformt the module tree.
+Based on this tsx react example - assuming the input design has a deep-depthed children structure, you can specify the `--declare` flag to split one of the child as a in-module component and transformt the module tree.
 
 In result,
 
diff --git a/packages/support-flags/parse.ts b/packages/support-flags/parse.ts
index 96b6e83e..72310120 100644
--- a/packages/support-flags/parse.ts
+++ b/packages/support-flags/parse.ts
@@ -314,9 +314,11 @@ function handle_single_boolean_flag_alias<T extends SimpleBooleanValueFlag>(
   return handle_single_typed_value_flag_alias<T>(raw, alias);
 }
 
-function transform_heading_alias_from_raw(raw: { [key: string]: boolean }): {
-  [key: string]: HeadingFlag;
-} {
+function transform_heading_alias_from_raw(raw: { [key: string]: boolean }):
+  | {
+      [key: string]: HeadingFlag;
+    }
+  | undefined {
   const _h1_alias = handle_single_boolean_flag_alias<HeadingFlag>(
     raw,
     keys.alias.as_h1

From f60c54e7f16b8386270000fc5d3838953cbb2555 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Mon, 18 Jul 2022 19:21:08 +0900
Subject: [PATCH 11/68] rename default props to builtin props

---
 .../support-module/{props-default => props-builtin}/index.ts    | 0
 .../{props-default => props-builtin}/on-change/index.ts         | 0
 .../{props-default => props-builtin}/on-click/index.ts          | 0
 .../support-module/{props-default => props-builtin}/readme.md   | 2 +-
 packages/support-module/props-default-value/readme.md           | 1 +
 5 files changed, 2 insertions(+), 1 deletion(-)
 rename packages/support-module/{props-default => props-builtin}/index.ts (100%)
 rename packages/support-module/{props-default => props-builtin}/on-change/index.ts (100%)
 rename packages/support-module/{props-default => props-builtin}/on-click/index.ts (100%)
 rename packages/support-module/{props-default => props-builtin}/readme.md (98%)
 create mode 100644 packages/support-module/props-default-value/readme.md

diff --git a/packages/support-module/props-default/index.ts b/packages/support-module/props-builtin/index.ts
similarity index 100%
rename from packages/support-module/props-default/index.ts
rename to packages/support-module/props-builtin/index.ts
diff --git a/packages/support-module/props-default/on-change/index.ts b/packages/support-module/props-builtin/on-change/index.ts
similarity index 100%
rename from packages/support-module/props-default/on-change/index.ts
rename to packages/support-module/props-builtin/on-change/index.ts
diff --git a/packages/support-module/props-default/on-click/index.ts b/packages/support-module/props-builtin/on-click/index.ts
similarity index 100%
rename from packages/support-module/props-default/on-click/index.ts
rename to packages/support-module/props-builtin/on-click/index.ts
diff --git a/packages/support-module/props-default/readme.md b/packages/support-module/props-builtin/readme.md
similarity index 98%
rename from packages/support-module/props-default/readme.md
rename to packages/support-module/props-builtin/readme.md
index 7b6cec2a..21306831 100644
--- a/packages/support-module/props-default/readme.md
+++ b/packages/support-module/props-builtin/readme.md
@@ -1,4 +1,4 @@
-# default props for widget modules
+# builtin props for widget modules
 
 **form events**
 
diff --git a/packages/support-module/props-default-value/readme.md b/packages/support-module/props-default-value/readme.md
new file mode 100644
index 00000000..2e5d4a09
--- /dev/null
+++ b/packages/support-module/props-default-value/readme.md
@@ -0,0 +1 @@
+# default value & props deligation

From 3042d51bcf482272b5bdc1c41e1dc0d6bb0ee2a8 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Mon, 18 Jul 2022 19:21:37 +0900
Subject: [PATCH 12/68] add module tokens

---
 packages/support-module/tokens/index.ts       |  1 +
 .../tokens/token-exportable-widget.ts         | 56 +++++++++++++++++++
 .../support-module/tokens/token-module.ts     |  5 ++
 3 files changed, 62 insertions(+)
 create mode 100644 packages/support-module/tokens/index.ts
 create mode 100644 packages/support-module/tokens/token-exportable-widget.ts
 create mode 100644 packages/support-module/tokens/token-module.ts

diff --git a/packages/support-module/tokens/index.ts b/packages/support-module/tokens/index.ts
new file mode 100644
index 00000000..af8ad565
--- /dev/null
+++ b/packages/support-module/tokens/index.ts
@@ -0,0 +1 @@
+export { ExportableWidgetToken } from "./token-exportable-widget";
diff --git a/packages/support-module/tokens/token-exportable-widget.ts b/packages/support-module/tokens/token-exportable-widget.ts
new file mode 100644
index 00000000..9fa575ee
--- /dev/null
+++ b/packages/support-module/tokens/token-exportable-widget.ts
@@ -0,0 +1,56 @@
+import { SingleChildRenderObjectWidget } from "@reflect-ui/core";
+
+/**
+ * specifies a exportable widget. when applied to a WidgetTree, the widget will be considered as a separate widget (a function or class)
+ * rather to export or not is up to the user.
+ *
+ * ### Usage
+ * - This can be applied by the `--declare` flag on the input source
+ *
+ * @example
+ * ```tsx
+ * // from
+ * function _(){
+ *    return (
+ *      <_1>
+ *        <_2/>
+ *      </_1>
+ *   );
+ * }
+ *
+ * const _1 = styled.div``
+ * const _2 = styled.div``
+ *
+ *
+ * // to (assuming the `_1` is the explicit widget)
+ *
+ * function _(){
+ *   return (
+ *    <_1>
+ *    <_2/>
+ *   </_1>
+ *  );
+ * }
+ *
+ * function _1({children}:{children: React.ReactNode}){
+ *  return (
+ *    <_1Container>
+ *      {children}
+ *    </_1Container>
+ *  );
+ * }
+ *
+ * const _1Container = styled.div``
+ *
+ * function _2(){
+ *   return <_2Container/>
+ * }
+ *
+ * const _2Container = styled.div``
+ *
+ * ```
+ */
+export class ExportableWidgetToken extends SingleChildRenderObjectWidget {
+  readonly _type = "ExportableWidgetToken";
+  //
+}
diff --git a/packages/support-module/tokens/token-module.ts b/packages/support-module/tokens/token-module.ts
new file mode 100644
index 00000000..8c953c50
--- /dev/null
+++ b/packages/support-module/tokens/token-module.ts
@@ -0,0 +1,5 @@
+/**
+ * @deprecated WIP
+ * @experimental
+ */
+export class ModuleToken {}

From 08d1fd69153b7564964a5101f998dd90873dbd8e Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Mon, 18 Jul 2022 19:21:51 +0900
Subject: [PATCH 13/68] update nextjs config with new pkg

---
 editor/next.config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/editor/next.config.js b/editor/next.config.js
index 4b5c5020..b4fc7d7c 100644
--- a/editor/next.config.js
+++ b/editor/next.config.js
@@ -26,6 +26,7 @@ const withTM = require("next-transpile-modules")([
   "@designto/react-native",
 
   "@code-features/assets",
+  "@code-features/module",
   "@code-features/component",
   "@code-features/flags",
   // -----------------------------

From 27d6c14babae51449b0ac314dc4a0ef87429ae6a Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Mon, 18 Jul 2022 19:22:37 +0900
Subject: [PATCH 14/68] add module readme gen

---
 .../module-readme-gen/README.md               | 25 +++++++++++++++++++
 .../module-readme-gen/readme.template.md.js   |  5 ++++
 2 files changed, 30 insertions(+)
 create mode 100644 packages/support-module/module-readme-gen/README.md
 create mode 100644 packages/support-module/module-readme-gen/readme.template.md.js

diff --git a/packages/support-module/module-readme-gen/README.md b/packages/support-module/module-readme-gen/README.md
new file mode 100644
index 00000000..9f1f2df1
--- /dev/null
+++ b/packages/support-module/module-readme-gen/README.md
@@ -0,0 +1,25 @@
+# This is a README.md file generator for the "@code-features/module" package.
+
+this package will generate output as below.
+
+---
+
+copy & paste version:
+
+- readme for generated module, used with copy & paste ux
+
+---
+
+# {package-name}
+
+> This is a generated README for the {package-name} package by [grida.co](https://grida.co). [Learn more](https://grida.co/docs/tutorials/usage-modes). _We do not recommend you to modify this file directly._
+
+## Usage
+
+```tsx
+// import widget root
+import Widget from "{package-name}";
+
+// import styles
+import styles from "{package-name}/styles";
+```
diff --git a/packages/support-module/module-readme-gen/readme.template.md.js b/packages/support-module/module-readme-gen/readme.template.md.js
new file mode 100644
index 00000000..b1308723
--- /dev/null
+++ b/packages/support-module/module-readme-gen/readme.template.md.js
@@ -0,0 +1,5 @@
+// TODO: add readme template here (use handlebars?)
+
+export default `
+# Readme
+`;

From 9c118903dd6ee8e201e1c36f3cca2b532f964db2 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Mon, 18 Jul 2022 19:22:59 +0900
Subject: [PATCH 15/68] update module support pkg exports

---
 packages/support-module/README.md | 38 ++++++++++++++++++++++++++++++-
 packages/support-module/index.ts  |  2 ++
 2 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/packages/support-module/README.md b/packages/support-module/README.md
index 928ff907..35f0acfd 100644
--- a/packages/support-module/README.md
+++ b/packages/support-module/README.md
@@ -1,6 +1,14 @@
 # Moduling support
 
-Here, "Module" means a file that contains a exported component
+## Specs
+
+| name                    | default | version |
+| ----------------------- | ------- | ------- |
+| `@code-features/module` | YES     | \*      |
+
+## Abstract
+
+Here, "Module" means a file that contains a exported component.
 
 Module is a single file or a directory containing developer-friendly api exports. It should consider the following:
 
@@ -11,9 +19,19 @@ Module is a single file or a directory containing developer-friendly api exports
 - Does this module contains meta data to be tracked by grida when user decides to?
 - Is this module well structured for manual user edits?
 - Is this module tolerant to manual user edits?
+- Is this module tolerant to future updates and successful merge?
 - Can developer (user) extend widgets with custom styles?
 - Can developer (user) extend widgets with custom props?
 - Can developer (user) extend components with custom functions?
+- Can developer (user) re-export module with manual subdirectory modules composition
+- Do all subdirectory modules have consistent naming convention?
+- Do this module contains any 3rd party dependencies?
+- Can this module be used with monorepo (yarn workspaces)?
+
+## Prerequisite
+
+- The input source should be sanitized via lint.
+- The entry widget (module) should be named by user.
 
 ## Module Composition Styles
 
@@ -43,3 +61,21 @@ C. **Multi file component composition / (nested)**
   - index.ts
   - {module-name}.tsx (root widget)
 ```
+
+## Consider: Import statements best practices
+
+```ts
+import Widget from "./{module-name}";
+import { Widgets } from "./{module-name}";
+// <Widgets.{widget-name}/>
+import { styles } from "./{module-name}";
+import styles from "./{module-name}/styles";
+import SubWidgetA from "./{module-name}/component-a";
+import { SubWidgetA } from "./{module-name}/components";
+```
+
+## Consider: Re-exporting coding conventions
+
+```ts
+// TODO:
+```
diff --git a/packages/support-module/index.ts b/packages/support-module/index.ts
index eb27e20d..853acfe8 100644
--- a/packages/support-module/index.ts
+++ b/packages/support-module/index.ts
@@ -1 +1,3 @@
 // wip
+
+export * from "./tokens";

From ae8eedceedc48affccd651901a510d2344865a09 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Mon, 18 Jul 2022 19:23:32 +0900
Subject: [PATCH 16/68] add declare token handling

---
 .../designto-token/support-flags/index.ts     |  9 ++++++
 .../support-flags/token-declare/index.ts      | 29 +++++++++++++++++++
 2 files changed, 38 insertions(+)
 create mode 100644 packages/designto-token/support-flags/token-declare/index.ts

diff --git a/packages/designto-token/support-flags/index.ts b/packages/designto-token/support-flags/index.ts
index 3948a5db..3af8912c 100644
--- a/packages/designto-token/support-flags/index.ts
+++ b/packages/designto-token/support-flags/index.ts
@@ -23,6 +23,9 @@ import { tokenize_flagged_youtube_view } from "./token-x-youtube-view";
 import { tokenize_flagged_camera_view } from "./token-x-camera-display";
 import { tokenize_flagged_checkbox } from "./token-checkbox";
 
+// module related
+import { tokenize_flagged_declare } from "./token-declare";
+
 export default function handleWithFlags(node: ReflectSceneNode) {
   const flags = parse(node.name);
   return _handle_with_flags(node, flags);
@@ -140,4 +143,10 @@ function _handle_with_flags(node, flags: FlagsParseResult) {
     return tokenize_flagged_fix_wh(node, fix_wh_flags);
   }
   // #endregion style extension flags
+
+  // #region module related flags
+  if (flags.__meta?.contains_declare_flag) {
+    return tokenize_flagged_declare(node, flags[keys.flag_key__declare]);
+  }
+  // #endregion module related flags
 }
diff --git a/packages/designto-token/support-flags/token-declare/index.ts b/packages/designto-token/support-flags/token-declare/index.ts
new file mode 100644
index 00000000..a9c68e8f
--- /dev/null
+++ b/packages/designto-token/support-flags/token-declare/index.ts
@@ -0,0 +1,29 @@
+import type { DeclareSpecificationFlag } from "@code-features/flags/--declare";
+import { tokenize } from "../..";
+import { default_tokenizer_config } from "../../config";
+import type { ReflectSceneNode } from "@design-sdk/figma-node";
+import { ExportableWidgetToken } from "@code-features/module";
+import { WidgetKey } from "@reflect-ui/core";
+
+export function tokenize_flagged_declare(
+  node: ReflectSceneNode,
+  flag: DeclareSpecificationFlag
+): ExportableWidgetToken | undefined {
+  const { export: _export, identifier, value } = flag;
+
+  if (!value) return; // return if flag is silenced.
+
+  const child = tokenize(node, {
+    ...default_tokenizer_config,
+    should_ignore_flag: (n) => {
+      return node.id == n.id;
+    },
+  });
+
+  const _key = child.key!;
+
+  return new ExportableWidgetToken({
+    key: WidgetKey.copyWith(_key, { id: _key.id + "--declare" }),
+    child: child,
+  });
+}

From e280d141b8abe9dbfb247fdc0f0a741ac2d4457a Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Mon, 18 Jul 2022 19:23:54 +0900
Subject: [PATCH 17/68] update types

---
 packages/designto-token/main.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/designto-token/main.ts b/packages/designto-token/main.ts
index efb42e68..94dad1d4 100644
--- a/packages/designto-token/main.ts
+++ b/packages/designto-token/main.ts
@@ -150,7 +150,7 @@ function handleNode(
     return;
   }
 
-  let tokenizedTarget: Widget = null;
+  let tokenizedTarget: Widget | null | undefined = null;
 
   // flags handler
   if (!tokenizedTarget) {
@@ -160,6 +160,7 @@ function handleNode(
     ) {
       try {
         tokenizedTarget = flags_handling_gate(node);
+        console.log("handled flags", tokenizedTarget);
       } catch (e) {
         console.error("error while interpreting flags.. skipping", e);
       }

From c1f1e7ee4e21f4b3cc670a38ddc5d22d6d66f47a Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Mon, 18 Jul 2022 19:24:37 +0900
Subject: [PATCH 18/68] add module tokens to main special token exports

---
 packages/builder-css-styles/length/index.ts   |  4 ++--
 .../widgets-native/stack/index.ts             | 24 +++++++++----------
 packages/designto-token/tokens/index.ts       |  3 +++
 3 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/packages/builder-css-styles/length/index.ts b/packages/builder-css-styles/length/index.ts
index e4e558bb..4a0c3b5c 100644
--- a/packages/builder-css-styles/length/index.ts
+++ b/packages/builder-css-styles/length/index.ts
@@ -3,7 +3,7 @@ import { calc, operation } from "../calc";
 import { px, vw, vh } from "../dimensions";
 import { percent } from "../percent";
 
-export function length(d: DimensionLength | string, a?: Axis) {
+export function length(d: DimensionLength | string | undefined, a?: Axis) {
   if (d === undefined || d === null) {
     return;
   }
@@ -50,7 +50,7 @@ export function length(d: DimensionLength | string, a?: Axis) {
   }
 
   if (d.type == "calc") {
-    return calc(d.operations, a);
+    return calc(d.operations, a!);
   }
 
   if (d.type == "op") {
diff --git a/packages/builder-web-core/widgets-native/stack/index.ts b/packages/builder-web-core/widgets-native/stack/index.ts
index 9b7b371b..904a7201 100644
--- a/packages/builder-web-core/widgets-native/stack/index.ts
+++ b/packages/builder-web-core/widgets-native/stack/index.ts
@@ -20,12 +20,12 @@ import { CssMinHeightMixin } from "../../widgets";
 export class Stack extends MultiChildWidget implements CssMinHeightMixin {
   readonly _type = "stack";
 
-  width: DimensionLength;
-  height: DimensionLength;
-  minWidth?: DimensionLength;
-  maxWidth?: DimensionLength;
-  minHeight?: DimensionLength;
-  maxHeight?: DimensionLength;
+  width: DimensionLength | undefined;
+  height: DimensionLength | undefined;
+  minWidth?: DimensionLength | undefined;
+  maxWidth?: DimensionLength | undefined;
+  minHeight?: DimensionLength | undefined;
+  maxHeight?: DimensionLength | undefined;
 
   borderRadius?: BorderRadiusManifest;
   border?: Border;
@@ -35,12 +35,12 @@ export class Stack extends MultiChildWidget implements CssMinHeightMixin {
     key: WidgetKey;
     children: Array<StylableJsxWidget>;
 
-    width: DimensionLength;
-    height: DimensionLength;
-    minWidth?: DimensionLength;
-    maxWidth?: DimensionLength;
-    minHeight?: DimensionLength;
-    maxHeight?: DimensionLength;
+    width: DimensionLength | undefined;
+    height: DimensionLength | undefined;
+    minWidth?: DimensionLength | undefined;
+    maxWidth?: DimensionLength | undefined;
+    minHeight?: DimensionLength | undefined;
+    maxHeight?: DimensionLength | undefined;
 
     boxShadow?: BoxShadowManifest[];
     borderRadius?: BorderRadiusManifest;
diff --git a/packages/designto-token/tokens/index.ts b/packages/designto-token/tokens/index.ts
index 7e08bc2e..61e395d8 100644
--- a/packages/designto-token/tokens/index.ts
+++ b/packages/designto-token/tokens/index.ts
@@ -6,3 +6,6 @@ export * from "./x-figma-embed-view";
 export * from "./x-google-maps-view";
 export * from "./x-osm-view";
 export * from "./x-youtube-view";
+
+// module tokens
+export * from "@code-features/module/tokens";

From 2b826b42ef0c549780bc5fd43c9087fd8d0ca0bc Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Mon, 18 Jul 2022 19:25:21 +0900
Subject: [PATCH 19/68] update react styled components module builder class
 name

---
 .../from-reusable-widget-tree.ts                          | 5 +++--
 .../from-static-widget-tree.ts                            | 7 +++++--
 .../react-styled-components-module-builder.ts             | 8 ++++++--
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/builder-web-react/react-styled-component-widget/from-reusable-widget-tree.ts b/packages/builder-web-react/react-styled-component-widget/from-reusable-widget-tree.ts
index 8c633f84..6a3e8e2f 100644
--- a/packages/builder-web-react/react-styled-component-widget/from-reusable-widget-tree.ts
+++ b/packages/builder-web-react/react-styled-component-widget/from-reusable-widget-tree.ts
@@ -4,12 +4,13 @@ import {
 } from "@code-features/component/tokens/token-instance";
 import { MasterComponentWidget } from "@code-features/component/tokens/token-master-component";
 import { buildWebWidgetFromTokens } from "@designto/web/tokens-to-web-widget";
-import { ReactStyledComponentsBuilder } from "./react-styled-components-module-builder";
+import { ReactStyledComponentsModuleBuilder } from "./react-styled-components-module-builder";
 
 /**
  * @deprecated wip
  * @param param0
  * @returns
+ * @experimental
  */
 export function finalizeReactReusable_StyledComponents__Experimental({
   tree,
@@ -32,7 +33,7 @@ export function finalizeReactReusable_StyledComponents__Experimental({
 
   const token = hanlde(tree);
   const webwi = buildWebWidgetFromTokens(token, {});
-  const builder = new ReactStyledComponentsBuilder({
+  const builder = new ReactStyledComponentsModuleBuilder({
     entry: webwi,
     config: {
       type: "styled-components",
diff --git a/packages/builder-web-react/react-styled-component-widget/from-static-widget-tree.ts b/packages/builder-web-react/react-styled-component-widget/from-static-widget-tree.ts
index bceca63e..69fe82ad 100644
--- a/packages/builder-web-react/react-styled-component-widget/from-static-widget-tree.ts
+++ b/packages/builder-web-react/react-styled-component-widget/from-static-widget-tree.ts
@@ -1,7 +1,7 @@
 import { JsxWidget, StylableJsxWidget } from "@web-builder/core";
 import { ReactComponentExportResult } from "@web-builder/react-core";
 import { react as react_config } from "@designto/config";
-import { ReactStyledComponentsBuilder } from "./react-styled-components-module-builder";
+import { ReactStyledComponentsModuleBuilder } from "./react-styled-components-module-builder";
 
 /**
  * styled components pattern with either emotion or styled-component
@@ -19,6 +19,9 @@ export function finalizeReactWidget_StyledComponents(
     exporting: react_config.ReactComponentExportingCofnig;
   }
 ): ReactComponentExportResult {
-  const builder = new ReactStyledComponentsBuilder({ entry, config: styling });
+  const builder = new ReactStyledComponentsModuleBuilder({
+    entry,
+    config: styling,
+  });
   return builder.asExportableModule().finalize(exporting);
 }
diff --git a/packages/builder-web-react/react-styled-component-widget/react-styled-components-module-builder.ts b/packages/builder-web-react/react-styled-component-widget/react-styled-components-module-builder.ts
index 9f5e770e..3d55f800 100644
--- a/packages/builder-web-react/react-styled-component-widget/react-styled-components-module-builder.ts
+++ b/packages/builder-web-react/react-styled-component-widget/react-styled-components-module-builder.ts
@@ -28,7 +28,7 @@ import { makeEsWidgetModuleFile } from "@web-builder/module-es";
 import { Framework } from "@grida/builder-platform-types";
 import { JsxComponentModuleBuilder } from "@web-builder/module-jsx";
 
-export class ReactStyledComponentsBuilder extends JsxComponentModuleBuilder<react_config.ReactStyledComponentsConfig> {
+export class ReactStyledComponentsModuleBuilder extends JsxComponentModuleBuilder<react_config.ReactStyledComponentsConfig> {
   constructor({
     entry,
     config,
@@ -99,7 +99,7 @@ export class ReactStyledComponentsBuilder extends JsxComponentModuleBuilder<reac
     return new BlockStatement(new Return(jsxTree));
   }
 
-  protected partDeclarations() {
+  private partStyledComponentsDeclarations() {
     return Array.from(this.stylesRepository.uniques())
       .map((k) => {
         return (this.stylesRepository.get(k) as StyledComponentJSXElementConfig)
@@ -108,6 +108,10 @@ export class ReactStyledComponentsBuilder extends JsxComponentModuleBuilder<reac
       .filter((s) => s);
   }
 
+  protected partDeclarations() {
+    return this.partStyledComponentsDeclarations();
+  }
+
   public asExportableModule() {
     const body = this.partBody();
     const imports = this.partImports();

From 133f3ecc2c1dab39f3b2a2a0102fe59fa67bfcca Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 19 Jul 2022 08:25:32 +0900
Subject: [PATCH 20/68] bump subpackages

---
 externals/coli         | 2 +-
 externals/reflect-core | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/externals/coli b/externals/coli
index 4d6db9ef..c6ddb8ef 160000
--- a/externals/coli
+++ b/externals/coli
@@ -1 +1 @@
-Subproject commit 4d6db9efd29783e03836f1a86e4832f32bd982f0
+Subproject commit c6ddb8ef67b90db847c8489b2ab5d387afef74a0
diff --git a/externals/reflect-core b/externals/reflect-core
index 5683eb31..4b1d7dd7 160000
--- a/externals/reflect-core
+++ b/externals/reflect-core
@@ -1 +1 @@
-Subproject commit 5683eb31a1eda7e218ba1b6063c8075b7c280c58
+Subproject commit 4b1d7dd7bcdb76c9fe034f698bdc010ff1e27316

From 0ba46c3625ac67d930ac433259db8cecd314d16b Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 19 Jul 2022 09:28:43 +0900
Subject: [PATCH 21/68] update class names

---
 packages/builder-module-jsx/index.ts                     | 2 +-
 .../rn-inline-style-module-builder.ts                    | 4 ++--
 .../rn-styled-components-module-builder.ts               | 4 ++--
 .../rn-style-sheet-module-builder.ts                     | 4 ++--
 .../react-css-module-module-builder.ts                   | 4 ++--
 .../react-inline-css-module-builder.ts                   | 4 ++--
 .../react-styled-components-module-builder.ts            | 9 +++------
 .../solid-inline-css-module-builder.ts                   | 4 ++--
 .../solid-styled-components-module-builder.ts            | 4 ++--
 .../designto-token/support-flags/token-declare/index.ts  | 6 +++---
 packages/support-module/tokens/index.ts                  | 2 +-
 .../support-module/tokens/token-exportable-widget.ts     | 4 ++--
 12 files changed, 24 insertions(+), 27 deletions(-)

diff --git a/packages/builder-module-jsx/index.ts b/packages/builder-module-jsx/index.ts
index dfecd511..430fbe35 100644
--- a/packages/builder-module-jsx/index.ts
+++ b/packages/builder-module-jsx/index.ts
@@ -1 +1 @@
-export { JsxComponentModuleBuilder } from "./jsx-component-module-builder";
+export { JSXWidgetModuleBuilder } from "./jsx-component-module-builder";
diff --git a/packages/builder-react-native/rn-build-inline-style-widget/rn-inline-style-module-builder.ts b/packages/builder-react-native/rn-build-inline-style-widget/rn-inline-style-module-builder.ts
index c18d44a7..8da33769 100644
--- a/packages/builder-react-native/rn-build-inline-style-widget/rn-inline-style-module-builder.ts
+++ b/packages/builder-react-native/rn-build-inline-style-widget/rn-inline-style-module-builder.ts
@@ -30,7 +30,7 @@ import { cssToJson } from "@web-builder/styles/_utils";
 import { CSSProperties } from "@coli.codes/css";
 import { reactnative_imports } from "..";
 import { makeEsWidgetModuleFile } from "@web-builder/module-es";
-import { JsxComponentModuleBuilder } from "@web-builder/module-jsx";
+import { JSXWidgetModuleBuilder } from "@web-builder/module-jsx";
 
 /**
  * CSS In JS Style builder for React Framework
@@ -44,7 +44,7 @@ import { JsxComponentModuleBuilder } from "@web-builder/module-jsx";
  * ```
  *
  */
-export class ReactNativeInlineStyleBuilder extends JsxComponentModuleBuilder<reactnative_config.ReactNativeInlineStyleConfig> {
+export class ReactNativeInlineStyleBuilder extends JSXWidgetModuleBuilder<reactnative_config.ReactNativeInlineStyleConfig> {
   constructor({
     entry,
     config,
diff --git a/packages/builder-react-native/rn-build-styled-component-widget/rn-styled-components-module-builder.ts b/packages/builder-react-native/rn-build-styled-component-widget/rn-styled-components-module-builder.ts
index 00376af7..e32eaf48 100644
--- a/packages/builder-react-native/rn-build-styled-component-widget/rn-styled-components-module-builder.ts
+++ b/packages/builder-react-native/rn-build-styled-component-widget/rn-styled-components-module-builder.ts
@@ -26,9 +26,9 @@ import {
 } from "@web-builder/styled";
 import { makeEsWidgetModuleFile } from "@web-builder/module-es";
 import { Framework } from "@grida/builder-platform-types";
-import { JsxComponentModuleBuilder } from "@web-builder/module-jsx";
+import { JSXWidgetModuleBuilder } from "@web-builder/module-jsx";
 
-export class ReactNativeStyledComponentsModuleBuilder extends JsxComponentModuleBuilder<rn_config.ReactNativeStyledComponentsConfig> {
+export class ReactNativeStyledComponentsModuleBuilder extends JSXWidgetModuleBuilder<rn_config.ReactNativeStyledComponentsConfig> {
   constructor({
     entry,
     config,
diff --git a/packages/builder-react-native/rn-build-stylesheet-widget/rn-style-sheet-module-builder.ts b/packages/builder-react-native/rn-build-stylesheet-widget/rn-style-sheet-module-builder.ts
index c2e46b8d..d2710325 100644
--- a/packages/builder-react-native/rn-build-stylesheet-widget/rn-style-sheet-module-builder.ts
+++ b/packages/builder-react-native/rn-build-stylesheet-widget/rn-style-sheet-module-builder.ts
@@ -29,8 +29,8 @@ import { StyleSheetDeclaration } from "../rn-style-sheet";
 import { create_duplication_reduction_map } from "@web-builder/styled";
 import { makeEsWidgetModuleFile } from "@web-builder/module-es";
 import { Framework } from "@grida/builder-platform-types";
-import { JsxComponentModuleBuilder } from "@web-builder/module-jsx";
-export class ReactNativeStyleSheetModuleBuilder extends JsxComponentModuleBuilder<rn_config.ReactNativeStyleSheetConfig> {
+import { JSXWidgetModuleBuilder } from "@web-builder/module-jsx";
+export class ReactNativeStyleSheetModuleBuilder extends JSXWidgetModuleBuilder<rn_config.ReactNativeStyleSheetConfig> {
   constructor({
     entry,
     config,
diff --git a/packages/builder-web-react/react-css-module-widget/react-css-module-module-builder.ts b/packages/builder-web-react/react-css-module-widget/react-css-module-module-builder.ts
index 8d70ccab..d9890aaf 100644
--- a/packages/builder-web-react/react-css-module-widget/react-css-module-module-builder.ts
+++ b/packages/builder-web-react/react-css-module-widget/react-css-module-module-builder.ts
@@ -24,7 +24,7 @@ import { react as react_config } from "@designto/config";
 import { create_duplication_reduction_map } from "@web-builder/styled";
 import { makeEsWidgetModuleFile } from "@web-builder/module-es";
 import { Framework } from "@grida/builder-platform-types";
-import { JsxComponentModuleBuilder } from "@web-builder/module-jsx";
+import { JSXWidgetModuleBuilder } from "@web-builder/module-jsx";
 
 /**
  * CSS Module Builder for React Framework
@@ -32,7 +32,7 @@ import { JsxComponentModuleBuilder } from "@web-builder/module-jsx";
  *
  * - @todo: css file not built
  */
-export class ReactCssModuleBuilder extends JsxComponentModuleBuilder<react_config.ReactCssModuleConfig> {
+export class ReactCssModuleBuilder extends JSXWidgetModuleBuilder<react_config.ReactCssModuleConfig> {
   constructor({
     entry,
     config,
diff --git a/packages/builder-web-react/react-inline-css-widget/react-inline-css-module-builder.ts b/packages/builder-web-react/react-inline-css-widget/react-inline-css-module-builder.ts
index 89e654f3..4a30bcab 100644
--- a/packages/builder-web-react/react-inline-css-widget/react-inline-css-module-builder.ts
+++ b/packages/builder-web-react/react-inline-css-widget/react-inline-css-module-builder.ts
@@ -26,7 +26,7 @@ import { cssToJson } from "@web-builder/styles/_utils";
 import { CSSProperties } from "@coli.codes/css";
 import { makeEsWidgetModuleFile } from "@web-builder/module-es";
 import { Framework } from "@grida/builder-platform-types";
-import { JsxComponentModuleBuilder } from "@web-builder/module-jsx";
+import { JSXWidgetModuleBuilder } from "@web-builder/module-jsx";
 
 /**
  * InlineCss Style builder for React Framework
@@ -40,7 +40,7 @@ import { JsxComponentModuleBuilder } from "@web-builder/module-jsx";
  * ```
  *
  */
-export class ReactInlineCssBuilder extends JsxComponentModuleBuilder<react_config.ReactInlineCssConfig> {
+export class ReactInlineCssBuilder extends JSXWidgetModuleBuilder<react_config.ReactInlineCssConfig> {
   constructor({
     entry,
     config,
diff --git a/packages/builder-web-react/react-styled-component-widget/react-styled-components-module-builder.ts b/packages/builder-web-react/react-styled-component-widget/react-styled-components-module-builder.ts
index 3d55f800..ff3380e2 100644
--- a/packages/builder-web-react/react-styled-component-widget/react-styled-components-module-builder.ts
+++ b/packages/builder-web-react/react-styled-component-widget/react-styled-components-module-builder.ts
@@ -2,10 +2,7 @@ import {
   ScopedVariableNamer,
   ReservedKeywordPlatformPresets,
 } from "@coli.codes/naming";
-import {
-  NoStyleJSXElementConfig,
-  StyledComponentJSXElementConfig,
-} from "@web-builder/styled";
+import { StyledComponentJSXElementConfig } from "@web-builder/styled";
 import {
   react_imports,
   ReactWidgetModuleExportable,
@@ -26,9 +23,9 @@ import {
 } from "@web-builder/styled";
 import { makeEsWidgetModuleFile } from "@web-builder/module-es";
 import { Framework } from "@grida/builder-platform-types";
-import { JsxComponentModuleBuilder } from "@web-builder/module-jsx";
+import { JSXWidgetModuleBuilder } from "@web-builder/module-jsx";
 
-export class ReactStyledComponentsModuleBuilder extends JsxComponentModuleBuilder<react_config.ReactStyledComponentsConfig> {
+export class ReactStyledComponentsModuleBuilder extends JSXWidgetModuleBuilder<react_config.ReactStyledComponentsConfig> {
   constructor({
     entry,
     config,
diff --git a/packages/builder-web-solid/solid-inline-css-widget/solid-inline-css-module-builder.ts b/packages/builder-web-solid/solid-inline-css-widget/solid-inline-css-module-builder.ts
index 3012d3ef..e339acf6 100644
--- a/packages/builder-web-solid/solid-inline-css-widget/solid-inline-css-module-builder.ts
+++ b/packages/builder-web-solid/solid-inline-css-widget/solid-inline-css-module-builder.ts
@@ -28,7 +28,7 @@ import {
   makeEsWidgetModuleFile,
 } from "@web-builder/module-es";
 import { Framework } from "@grida/builder-platform-types";
-import { JsxComponentModuleBuilder } from "@web-builder/module-jsx";
+import { JSXWidgetModuleBuilder } from "@web-builder/module-jsx";
 
 /**
  * InlineCss Style builder for SolidJS Framework
@@ -42,7 +42,7 @@ import { JsxComponentModuleBuilder } from "@web-builder/module-jsx";
  * ```
  *
  */
-export class SolidInlineCssBuilder extends JsxComponentModuleBuilder<solid_config.SolidInlineCssConfig> {
+export class SolidInlineCssBuilder extends JSXWidgetModuleBuilder<solid_config.SolidInlineCssConfig> {
   constructor({
     entry,
     config,
diff --git a/packages/builder-web-solid/solid-styled-component-widget/solid-styled-components-module-builder.ts b/packages/builder-web-solid/solid-styled-component-widget/solid-styled-components-module-builder.ts
index 7ba7a8b0..f38a4dc7 100644
--- a/packages/builder-web-solid/solid-styled-component-widget/solid-styled-components-module-builder.ts
+++ b/packages/builder-web-solid/solid-styled-component-widget/solid-styled-components-module-builder.ts
@@ -22,9 +22,9 @@ import {
   makeEsWidgetModuleFile,
 } from "@web-builder/module-es";
 import { Framework } from "@grida/builder-platform-types";
-import { JsxComponentModuleBuilder } from "@web-builder/module-jsx";
+import { JSXWidgetModuleBuilder } from "@web-builder/module-jsx";
 
-export class SolidStyledComponentsBuilder extends JsxComponentModuleBuilder<solid_config.SolidStyledComponentsConfig> {
+export class SolidStyledComponentsBuilder extends JSXWidgetModuleBuilder<solid_config.SolidStyledComponentsConfig> {
   constructor({
     entry,
     config,
diff --git a/packages/designto-token/support-flags/token-declare/index.ts b/packages/designto-token/support-flags/token-declare/index.ts
index a9c68e8f..6dd0a750 100644
--- a/packages/designto-token/support-flags/token-declare/index.ts
+++ b/packages/designto-token/support-flags/token-declare/index.ts
@@ -2,13 +2,13 @@ import type { DeclareSpecificationFlag } from "@code-features/flags/--declare";
 import { tokenize } from "../..";
 import { default_tokenizer_config } from "../../config";
 import type { ReflectSceneNode } from "@design-sdk/figma-node";
-import { ExportableWidgetToken } from "@code-features/module";
+import { DeclarationWidgetToken } from "@code-features/module";
 import { WidgetKey } from "@reflect-ui/core";
 
 export function tokenize_flagged_declare(
   node: ReflectSceneNode,
   flag: DeclareSpecificationFlag
-): ExportableWidgetToken | undefined {
+): DeclarationWidgetToken | undefined {
   const { export: _export, identifier, value } = flag;
 
   if (!value) return; // return if flag is silenced.
@@ -22,7 +22,7 @@ export function tokenize_flagged_declare(
 
   const _key = child.key!;
 
-  return new ExportableWidgetToken({
+  return new DeclarationWidgetToken({
     key: WidgetKey.copyWith(_key, { id: _key.id + "--declare" }),
     child: child,
   });
diff --git a/packages/support-module/tokens/index.ts b/packages/support-module/tokens/index.ts
index af8ad565..b3198731 100644
--- a/packages/support-module/tokens/index.ts
+++ b/packages/support-module/tokens/index.ts
@@ -1 +1 @@
-export { ExportableWidgetToken } from "./token-exportable-widget";
+export { DeclarationWidgetToken } from "./token-exportable-widget";
diff --git a/packages/support-module/tokens/token-exportable-widget.ts b/packages/support-module/tokens/token-exportable-widget.ts
index 9fa575ee..7dd3a749 100644
--- a/packages/support-module/tokens/token-exportable-widget.ts
+++ b/packages/support-module/tokens/token-exportable-widget.ts
@@ -50,7 +50,7 @@ import { SingleChildRenderObjectWidget } from "@reflect-ui/core";
  *
  * ```
  */
-export class ExportableWidgetToken extends SingleChildRenderObjectWidget {
-  readonly _type = "ExportableWidgetToken";
+export class DeclarationWidgetToken extends SingleChildRenderObjectWidget {
+  readonly _type = "DeclarationWidgetToken";
   //
 }

From 6246c6c44af99af9abef444ffaa51b2377c4fd0c Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 19 Jul 2022 09:28:51 +0900
Subject: [PATCH 22/68] update pkgs

---
 externals/coli         | 2 +-
 externals/reflect-core | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/externals/coli b/externals/coli
index c6ddb8ef..459e2c4f 160000
--- a/externals/coli
+++ b/externals/coli
@@ -1 +1 @@
-Subproject commit c6ddb8ef67b90db847c8489b2ab5d387afef74a0
+Subproject commit 459e2c4f48146e32850f568aadc14cc8745072fb
diff --git a/externals/reflect-core b/externals/reflect-core
index 4b1d7dd7..e4676071 160000
--- a/externals/reflect-core
+++ b/externals/reflect-core
@@ -1 +1 @@
-Subproject commit 4b1d7dd7bcdb76c9fe034f698bdc010ff1e27316
+Subproject commit e46760712a3b944c286f9ed84112310e953698c9

From 1c1b3197e4fa001261edca15ff9dd25b047998a8 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 19 Jul 2022 09:29:12 +0900
Subject: [PATCH 23/68] update doc

---
 packages/builder-config/output/output-module/index.ts | 11 ++++++++++-
 .../output/output-part-project/index.ts               |  2 ++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/builder-config/output/output-module/index.ts b/packages/builder-config/output/output-module/index.ts
index ee85d1bd..60390020 100644
--- a/packages/builder-config/output/output-module/index.ts
+++ b/packages/builder-config/output/output-module/index.ts
@@ -1,9 +1,18 @@
+type SupportedLanguagesExt =
+  | "ts"
+  | "tsx"
+  | "js"
+  | "jsx"
+  | "vue"
+  | "dart"
+  | "svelte";
+
 /**
  * a
  */
 export interface ModuleFile extends File {
   _type: "module";
-  language: "ts" | "tsx" | "js" | "jsx" | "vue" | "dart" | "svelte";
+  language: SupportedLanguagesExt;
 
   /**
    * list of exporting member identifiers
diff --git a/packages/builder-config/output/output-part-project/index.ts b/packages/builder-config/output/output-part-project/index.ts
index e1fabc81..0e82bb84 100644
--- a/packages/builder-config/output/output-part-project/index.ts
+++ b/packages/builder-config/output/output-part-project/index.ts
@@ -61,6 +61,8 @@ export interface ProjectPart {
 
   /**
    * the main entry point of the project (just like in package.json for example)
+   *
+   * to locate the main file
    */
   main: string;
 }

From eac7af63cb939c07e4d4d8bec70451fac7f25e6b Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 19 Jul 2022 09:30:03 +0900
Subject: [PATCH 24/68] sync

---
 .../builder-module-jsx/jsx-component-module-builder/index.ts    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder-module-jsx/jsx-component-module-builder/index.ts b/packages/builder-module-jsx/jsx-component-module-builder/index.ts
index 5fbcf2c4..b444ea59 100644
--- a/packages/builder-module-jsx/jsx-component-module-builder/index.ts
+++ b/packages/builder-module-jsx/jsx-component-module-builder/index.ts
@@ -13,7 +13,7 @@ import {
   ScopedVariableNamer,
 } from "coli";
 
-export abstract class JsxComponentModuleBuilder<CONFIG> {
+export abstract class JSXWidgetModuleBuilder<CONFIG> {
   readonly entry: JsxWidget;
   readonly widgetName: string;
   readonly config: CONFIG;

From 6d9436a2c7dae96cf15367ee29a8900cf65c8805 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 19 Jul 2022 09:30:57 +0900
Subject: [PATCH 25/68] reserve

---
 .../support-module/module-composition-style-multi-file/readme.md  | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 packages/support-module/module-composition-style-multi-file/readme.md

diff --git a/packages/support-module/module-composition-style-multi-file/readme.md b/packages/support-module/module-composition-style-multi-file/readme.md
new file mode 100644
index 00000000..e69de29b

From 46c9e38dd5fbec03027c8c70109bbcd4407a159e Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 19 Jul 2022 09:31:40 +0900
Subject: [PATCH 26/68] reserve

---
 .../support-flags/token-module/index.ts             | 13 +++++++++++++
 1 file changed, 13 insertions(+)
 create mode 100644 packages/designto-token/support-flags/token-module/index.ts

diff --git a/packages/designto-token/support-flags/token-module/index.ts b/packages/designto-token/support-flags/token-module/index.ts
new file mode 100644
index 00000000..7956afd3
--- /dev/null
+++ b/packages/designto-token/support-flags/token-module/index.ts
@@ -0,0 +1,13 @@
+import type { ModuleFlag } from "@code-features/flags/--module";
+import { keyFromNode } from "../../key";
+import { tokenize } from "../..";
+import { default_tokenizer_config } from "../../config";
+import { handleChildren } from "../../main";
+import type { ReflectSceneNode } from "@design-sdk/figma-node";
+
+export function tokenize_flagged_module(
+  flag: ModuleFlag,
+  node: ReflectSceneNode
+) {
+  throw new Error("Method not implemented.");
+}

From ec27b0243d7a51c4359c87661e44adf4b3312b0d Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 19 Jul 2022 09:33:12 +0900
Subject: [PATCH 27/68] reserve

---
 .../tokens-to-web-widget/compose-declaration.ts       | 11 +++++++++++
 packages/designto-web/tokens-to-web-widget/index.ts   | 11 +++++++++--
 2 files changed, 20 insertions(+), 2 deletions(-)
 create mode 100644 packages/designto-web/tokens-to-web-widget/compose-declaration.ts

diff --git a/packages/designto-web/tokens-to-web-widget/compose-declaration.ts b/packages/designto-web/tokens-to-web-widget/compose-declaration.ts
new file mode 100644
index 00000000..fde91c0e
--- /dev/null
+++ b/packages/designto-web/tokens-to-web-widget/compose-declaration.ts
@@ -0,0 +1,11 @@
+import { Composer } from ".";
+import * as web from "@web-builder/core";
+import { nameit, NameCases } from "coli";
+import { DeclarationWidgetToken } from "@code-features/module";
+
+export function compose_declaration(
+  widget: DeclarationWidgetToken,
+  child_composer: Composer // not used
+) {
+  throw new Error("declaration token handling not implemented");
+}
diff --git a/packages/designto-web/tokens-to-web-widget/index.ts b/packages/designto-web/tokens-to-web-widget/index.ts
index 9b675bb0..2f1d78dd 100644
--- a/packages/designto-web/tokens-to-web-widget/index.ts
+++ b/packages/designto-web/tokens-to-web-widget/index.ts
@@ -21,6 +21,7 @@ import { compose_unwrapped_checkbox } from "./compose-unwrapped-checkbox";
 import { compose_unwrapped_slider } from "./compose-unwrapped-slider";
 import { compose_unwrapped_progress } from "./compose-unwrapped-progress";
 import { compose_instanciation } from "./compose-instanciation";
+import { compose_declaration } from "./compose-declaration";
 import { compose_xtended_views } from "./compose-xtended-views";
 import { IWHStyleWidget } from "@reflect-ui/core";
 import * as reusable from "@code-features/component/tokens";
@@ -155,7 +156,7 @@ function compose<T extends JsxWidget>(
   else if (widget instanceof core.ClipRRect) {
     thisWebWidget = compose_wrapped_with_clip_rrect(widget, handleChild);
   } else if (widget instanceof core.ClipPath) {
-    const child = handleChild<StylableJsxWidget>(widget.child);
+    const child = handleChild<StylableJsxWidget>(widget.child!);
     child.extendStyle({
       ...css.clipPath(widget),
       top: undefined,
@@ -295,7 +296,7 @@ function compose<T extends JsxWidget>(
         widget.child
       );
       throw new Error(
-        `Unsupported web widget type: ${widget.child.constructor.name}`
+        `\`@designto/web\`:: Unsupported web widget type: ${widget.child.constructor.name}`
       );
     }
   }
@@ -325,6 +326,12 @@ function compose<T extends JsxWidget>(
   }
   // -------------------------------------
   // -------------------------------------
+  // module related
+  else if (widget instanceof special.DeclarationWidgetToken) {
+    thisWebWidget = compose_declaration(widget, handleChild);
+  }
+  // -------------------------------------
+  // -------------------------------------
   // support component / instance
   else if (widget instanceof reusable.InstanceWidget) {
     thisWebWidget = compose_instanciation(widget, handleChild);

From 1fb94718bde1e252ff0da0c5f335b06513772512 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 19 Jul 2022 09:33:49 +0900
Subject: [PATCH 28/68] add jsx widget tsdoc

---
 packages/builder-web-core/widget-core/widget.ts | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/builder-web-core/widget-core/widget.ts b/packages/builder-web-core/widget-core/widget.ts
index 7d29b1b4..f6348b80 100644
--- a/packages/builder-web-core/widget-core/widget.ts
+++ b/packages/builder-web-core/widget-core/widget.ts
@@ -2,6 +2,14 @@ import type { WidgetKey, WidgetKeyLike } from "../widget-key";
 import type { JSXAttributes, JSXChildLike, JSXIdentifier } from "coli";
 import type { ColiObjectLike } from "@coli.codes/builder";
 
+// import { DeclarationWidgetToken } from "@code-features/module";
+// export type WebWidget = JsxWidget | DeclarationWidgetToken;
+
+/**
+ * TODO: rename to JSXWidgetElement
+ *
+ * A Tree style representation of a jsx widget.
+ */
 export abstract class JsxWidget {
   readonly _type: string;
   readonly key: WidgetKeyLike;
@@ -26,11 +34,10 @@ interface StaticTree<T = ColiObjectLike<JSXChildLike>> {
   tree: T;
 }
 
-export type UnstylableJSXElementConfig<
-  T = ColiObjectLike<JSXChildLike>
-> = StaticTree<T> & {
-  type?: "static-tree";
-};
+export type UnstylableJSXElementConfig<T = ColiObjectLike<JSXChildLike>> =
+  StaticTree<T> & {
+    type?: "static-tree";
+  };
 
 export type StylableJSXElementConfig = TagAndAttributeSegment & {
   type?: "tag-and-attr";

From ed0a396cb315d6c6242669b0939017282d715647 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 19 Jul 2022 09:35:53 +0900
Subject: [PATCH 29/68] rename

---
 .../{doc-widget => doc-widget-declaration}/index.ts               | 0
 .../{doc-widget => doc-widget-declaration}/readme.md              | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 rename packages/support-documentation/{doc-widget => doc-widget-declaration}/index.ts (100%)
 rename packages/support-documentation/{doc-widget => doc-widget-declaration}/readme.md (100%)

diff --git a/packages/support-documentation/doc-widget/index.ts b/packages/support-documentation/doc-widget-declaration/index.ts
similarity index 100%
rename from packages/support-documentation/doc-widget/index.ts
rename to packages/support-documentation/doc-widget-declaration/index.ts
diff --git a/packages/support-documentation/doc-widget/readme.md b/packages/support-documentation/doc-widget-declaration/readme.md
similarity index 100%
rename from packages/support-documentation/doc-widget/readme.md
rename to packages/support-documentation/doc-widget-declaration/readme.md

From 249d181ccbc7ae826bb61e02dc1c6e24e2d2bf73 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Wed, 20 Jul 2022 13:16:07 +0900
Subject: [PATCH 30/68] update widget docs example

---
 .../__test__/vscode-tsdoc-render.test.ts      | 49 +++++++++++++++
 .../doc-widget-declaration/readme.md          | 59 +++++++++++++++++++
 2 files changed, 108 insertions(+)
 create mode 100644 packages/support-documentation/doc-widget-declaration/__test__/vscode-tsdoc-render.test.ts

diff --git a/packages/support-documentation/doc-widget-declaration/__test__/vscode-tsdoc-render.test.ts b/packages/support-documentation/doc-widget-declaration/__test__/vscode-tsdoc-render.test.ts
new file mode 100644
index 00000000..fadcbf22
--- /dev/null
+++ b/packages/support-documentation/doc-widget-declaration/__test__/vscode-tsdoc-render.test.ts
@@ -0,0 +1,49 @@
+// THIS IS NOT A SPEC TEST FILE.
+// USED FOR TSDOC PREVIEW INSIDE VSCODE.
+// THE BELOW CONTENT SHALL MATCH THE TEMPLATE ON README.MD
+
+/**
+ * ${Widget} from design - {@link https://grida.co/files/xxx/yyy}
+ *
+ * ---
+ * @example
+ * ```tsx
+ * import React from "react";
+ *
+ * export default function (){
+ *    return (
+ *      <>
+ *        👇 instanciate widget like below. 👇
+ *        <Widget/>
+ *      </>
+ *    );
+ * }
+ * ```
+ * ---
+ * @param props (any) - this widget does not contains any typed props, but you can pass dynamic props as you want.
+ *
+ * ---
+ * @preview
+ * ![widget render preview](https://bridged-service-static.s3.us-west-1.amazonaws.com/device-frames/iphone-11-fit-black-no-shadow.png)
+ *
+ * [view on browser](https://grida.co)
+ *
+ * ---
+ * @remarks
+ * @see {@link https://grida.co/docs/widgets} for more information.
+ *
+ * ---
+ * @privateRemarks
+ * Code generated by grida.co | engine v2022.1.0 (Apache-2.0) | Generated code under CC0 (public domain)
+ * *This code is free to use, modify, and redistribute. (aknowledgment is not required)*
+ *
+ * ![Made with Grida](https://bridged-service-static.s3.us-west-1.amazonaws.com/branding/logo/32.png)
+ *
+ * ![](https://bridged-service-static.s3.us-west-1.amazonaws.com/opengraph/og-image-gif.gif)
+ *
+ * <!-- Info: Please do not remove this comment unless intended. removing this section will break grida integrations. -->
+ * <!-- grida.meta | engine: v2022.1.0 | source: ${id} | uri: ${resource-uri} -->
+ */
+function Widget() {
+  // ...
+}
diff --git a/packages/support-documentation/doc-widget-declaration/readme.md b/packages/support-documentation/doc-widget-declaration/readme.md
index 9d36e0ed..29ddb97d 100644
--- a/packages/support-documentation/doc-widget-declaration/readme.md
+++ b/packages/support-documentation/doc-widget-declaration/readme.md
@@ -35,3 +35,62 @@ function Widget({ ...props }: WidgetProps) {
   // ...
 }
 ````
+
+### Simple widget documentation (No params)
+
+**ToC**
+
+- Widget name
+- preview image
+- origin design link (e.g. open in Figma)
+- grida design link (open in Grida)
+- example (instanciation code) - (e.g. `<Widget/>`)
+- static description - e.g. "This widget is automatically generated by grida.co. It does not accept any arguments (props)"
+
+````tsx
+/**
+ * ${Widget} from design - {@link https://grida.co/files/xxx/yyy}
+ *
+ * ---
+ * @example
+ * ```tsx
+ * import React from "react";
+ *
+ * export default function (){
+ *    return (
+ *      <>
+ *        👇 instanciate widget like below. 👇
+ *        <Widget/>
+ *      </>
+ *    );
+ * }
+ * ```
+ * ---
+ * @param props (any) - this widget does not contains any typed props, but you can pass dynamic props as you want.
+ *
+ * ---
+ * @preview
+ * ![widget render preview](https://bridged-service-static.s3.us-west-1.amazonaws.com/device-frames/iphone-11-fit-black-no-shadow.png)
+ *
+ * [view on browser](https://grida.co)
+ *
+ * ---
+ * @remarks
+ * @see {@link https://grida.co/docs/widgets} for more information.
+ *
+ * ---
+ * @privateRemarks
+ * Code generated by grida.co | engine v2022.1.0 (Apache-2.0) | Generated code under CC0 (public domain)
+ * *This code is free to use, modify, and redistribute. (aknowledgment is not required)*
+ *
+ * ![Made with Grida](https://bridged-service-static.s3.us-west-1.amazonaws.com/branding/logo/32.png)
+ *
+ * ![](https://bridged-service-static.s3.us-west-1.amazonaws.com/opengraph/og-image-gif.gif)
+ *
+ * <!-- Info: Please do not remove this comment unless intended. removing this section will break grida integrations. -->
+ * <!-- grida.meta | engine: v2022.1.0 | source: ${id} | uri: ${resource-uri} -->
+ */
+function Widget() {
+  // ...
+}
+````

From b4db2e045437e4745a66686e29eb99bc9197594c Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Wed, 20 Jul 2022 14:29:32 +0900
Subject: [PATCH 31/68] add doc meta module

---
 .../support-documentation/doc-meta/index.ts   |  2 +
 .../support-documentation/doc-meta/manager.ts | 54 ++++++++++++
 .../support-documentation/doc-meta/readme.md  | 28 ++++++
 .../doc-meta/serializer.ts                    | 88 +++++++++++++++++++
 4 files changed, 172 insertions(+)
 create mode 100644 packages/support-documentation/doc-meta/index.ts
 create mode 100644 packages/support-documentation/doc-meta/manager.ts
 create mode 100644 packages/support-documentation/doc-meta/readme.md
 create mode 100644 packages/support-documentation/doc-meta/serializer.ts

diff --git a/packages/support-documentation/doc-meta/index.ts b/packages/support-documentation/doc-meta/index.ts
new file mode 100644
index 00000000..c97cd39c
--- /dev/null
+++ b/packages/support-documentation/doc-meta/index.ts
@@ -0,0 +1,2 @@
+export * from "./serializer";
+export { GridaTSDocWidgetDeclarationMetaManager } from "./manager";
diff --git a/packages/support-documentation/doc-meta/manager.ts b/packages/support-documentation/doc-meta/manager.ts
new file mode 100644
index 00000000..548f4a09
--- /dev/null
+++ b/packages/support-documentation/doc-meta/manager.ts
@@ -0,0 +1,54 @@
+import docmeta from "./serializer";
+
+export const grida_doc_meta_delimiters = {
+  widget_declaraton: "grida.meta.widget_declaration",
+};
+
+export interface GridaWidgetDeclarationDocumentationMeta {
+  delimiter: typeof grida_doc_meta_delimiters.widget_declaraton;
+  engine: string;
+  uri: string;
+  source: string;
+}
+
+class DocMetaManager {}
+
+class GridaDocMetaManager extends DocMetaManager {}
+
+/**
+ * This manager class parse or makes comment string for widget declaration tsdoc as in markdown format.
+ * The comment follows the html comment format, which is - `<!-- content -->`
+ *
+ * The meta will contain fields from interface {@link GridaWidgetDeclarationDocumentationMeta}
+ */
+class GridaTSDocMetaManager extends GridaDocMetaManager {}
+
+export class GridaTSDocWidgetDeclarationMetaManager extends GridaTSDocMetaManager {
+  static parse(
+    docstring: string
+  ): GridaWidgetDeclarationDocumentationMeta | undefined {
+    if (docstring.includes(grida_doc_meta_delimiters.widget_declaraton)) {
+      // use regex to parse lines with markdown comments
+      const match = docstring.match(
+        /^\s*<!--\s*grida.meta.widget_declaration\s*(.*)\s*-->\s*$/
+      );
+      if (match) {
+        const meta = docmeta.decode(match[1]);
+        if (meta[grida_doc_meta_delimiters.widget_declaraton]) {
+          return {
+            delimiter: "grida.meta.widget_declaration",
+            engine: meta["engine"],
+            uri: meta["uri"],
+            source: meta["source"],
+          };
+        } else {
+          // broken meta
+        }
+      }
+    }
+  }
+
+  make(meta: GridaWidgetDeclarationDocumentationMeta) {
+    return docmeta.encode(meta);
+  }
+}
diff --git a/packages/support-documentation/doc-meta/readme.md b/packages/support-documentation/doc-meta/readme.md
new file mode 100644
index 00000000..a23b9ea8
--- /dev/null
+++ b/packages/support-documentation/doc-meta/readme.md
@@ -0,0 +1,28 @@
+# documentation meta
+
+Grida requires certain meta data of the generated tokens (declarations) to keep sync between updated designs and previously genrerated codes. Doc meta allows grida to add comments (hidden doc) to store and read metadatas.
+
+## Doc meta in Markdown format
+
+markdown format docmeta uses html comment format to store hidden metadatas.
+
+Markdown is used on languages listed below. (VSCode well supports markdown in below docstrings.)
+
+- tsdoc
+- jsdoc
+
+For example:
+
+```html
+<!-- grida.meta.widget_declaration | engine : 20222.1.2 | uri : grida.co/scenes/xxx -->
+```
+
+Which can be decoded in json format like below.
+
+```json
+// grida.meta.widget_declaration
+{
+  "engine": "20222.1.2",
+  "uri": "grida.co/scenes/xxx"
+}
+```
diff --git a/packages/support-documentation/doc-meta/serializer.ts b/packages/support-documentation/doc-meta/serializer.ts
new file mode 100644
index 00000000..413e31b2
--- /dev/null
+++ b/packages/support-documentation/doc-meta/serializer.ts
@@ -0,0 +1,88 @@
+/**
+ * @param comment <!-- content --> format markdown comment
+ *
+ * @example
+ * ```html
+ * <!-- grida.meta.widget_declaration | engine: v2022.1.0 | source: ${id} | uri: ${resource-uri} -->
+ * ```
+ *
+ * yields
+ *
+ * ```json
+ * {
+ *    "grida.meta.widget_declaration": true,
+ *    "engine": "v2022.1.0",
+ *    "uri": "https://grida.co/files/xxx/yyy",
+ *    "source": "${id}"
+ * }
+ * ```
+ */
+export function parseMetaFromMarkdownComment<
+  T extends { [key: string]: string | boolean } | object
+>(comment: string): T {
+  // transform below e.g.:
+  // <!-- grida.meta.widget_declaration | engine: v2022.1.0 | source: ${id} | uri: ${resource-uri} -->
+  // to { engine: "v2022.1.0", uri: "https://grida.co/files/xxx/yyy", source: "${id}" }
+  // 1. split fields with `|`
+  // 2. split fields with `:` as in key:value (ignore spaces around `:` -> ` : ` -> ok)
+  // 3. return as object
+
+  const fields = comment.split("|");
+  const meta = {};
+  for (const field of fields) {
+    if (field.includes(":")) {
+      const [key, value] = field.split(/\s*:\s*/);
+      meta[key] = value;
+    } else {
+      const __meta = field.trim();
+      meta[__meta] = true;
+    }
+  }
+
+  return meta as T;
+}
+
+/**
+ * creates markdown meta string from json
+ *
+ * - boolean value: -> e.g. `"on": true` -> `... | a | ...`
+ * - string value: -> e.g. `"name": "grida.co"` -> `... | name : grida.co | ...`
+ *
+ * @example
+ *
+ * ```json
+ * {"on": true, "name": "grida.co", "createdat": "2022-12-25"}
+ * ```
+ *
+ * yields
+ *
+ * ```html
+ * <!-- on | name : grida.co | createdat: 2022-12-25 -->
+ * ```
+ *
+ * @param meta
+ * @returns
+ */
+export function makeMarkdownCommentFromMeta<
+  T extends { [key: string]: string | boolean } | object
+>(meta: T): string {
+  const fields: string[] = [];
+
+  Object.keys(meta).forEach((k) => {
+    const v = meta[k];
+    if (typeof v === "boolean") {
+      fields.push(k);
+    } else {
+      fields.push(`${k}\s:\s${v}`);
+    }
+  });
+
+  return `<!-- ${fields.join("|")} -->`;
+}
+
+const _ = {
+  encode: makeMarkdownCommentFromMeta,
+  decode: parseMetaFromMarkdownComment,
+};
+
+export default _;

From d310e438c050927b215adebb1c2e41a8e689375c Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Wed, 20 Jul 2022 15:27:27 +0900
Subject: [PATCH 32/68] widget declaration doc builder wip

---
 .../doc-widget-declaration/index.ts           | 11 +++
 .../doc-widget-declaration/readme.md          |  3 +-
 .../doc-widget-declaration/types.ts           |  5 +
 .../widget-declaration-doc-builder-react.ts   | 91 +++++++++++++++++++
 .../widget-declaration-doc-builder.ts         | 64 +++++++++++++
 5 files changed, 173 insertions(+), 1 deletion(-)
 create mode 100644 packages/support-documentation/doc-widget-declaration/types.ts
 create mode 100644 packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder-react.ts
 create mode 100644 packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder.ts

diff --git a/packages/support-documentation/doc-widget-declaration/index.ts b/packages/support-documentation/doc-widget-declaration/index.ts
index e69de29b..84e469e1 100644
--- a/packages/support-documentation/doc-widget-declaration/index.ts
+++ b/packages/support-documentation/doc-widget-declaration/index.ts
@@ -0,0 +1,11 @@
+export function makeWidgetDoc() {}
+
+function makeWidgetDoc_React() {
+  return;
+}
+
+const make_widget_declaration_doc_for = {
+  react: makeWidgetDoc_React,
+};
+
+export default make_widget_declaration_doc_for;
diff --git a/packages/support-documentation/doc-widget-declaration/readme.md b/packages/support-documentation/doc-widget-declaration/readme.md
index 29ddb97d..07bc0a90 100644
--- a/packages/support-documentation/doc-widget-declaration/readme.md
+++ b/packages/support-documentation/doc-widget-declaration/readme.md
@@ -46,6 +46,7 @@ function Widget({ ...props }: WidgetProps) {
 - grida design link (open in Grida)
 - example (instanciation code) - (e.g. `<Widget/>`)
 - static description - e.g. "This widget is automatically generated by grida.co. It does not accept any arguments (props)"
+- applied flags info
 
 ````tsx
 /**
@@ -88,7 +89,7 @@ function Widget({ ...props }: WidgetProps) {
  * ![](https://bridged-service-static.s3.us-west-1.amazonaws.com/opengraph/og-image-gif.gif)
  *
  * <!-- Info: Please do not remove this comment unless intended. removing this section will break grida integrations. -->
- * <!-- grida.meta | engine: v2022.1.0 | source: ${id} | uri: ${resource-uri} -->
+ * <!-- grida.meta.widget_declaration | engine: v2022.1.0 | source: ${id} | uri: ${resource-uri} -->
  */
 function Widget() {
   // ...
diff --git a/packages/support-documentation/doc-widget-declaration/types.ts b/packages/support-documentation/doc-widget-declaration/types.ts
new file mode 100644
index 00000000..11940251
--- /dev/null
+++ b/packages/support-documentation/doc-widget-declaration/types.ts
@@ -0,0 +1,5 @@
+import type { Literal, Parameter } from "coli";
+
+export interface WidgetModuleInfo {}
+export type PropsInfo = Array<Parameter>;
+export type PropsDefaultValues = { [key: string]: Literal };
diff --git a/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder-react.ts b/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder-react.ts
new file mode 100644
index 00000000..d5d5bf3d
--- /dev/null
+++ b/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder-react.ts
@@ -0,0 +1,91 @@
+import type { Declaration, FunctionDeclaration, Identifier } from "coli";
+import { WidgetDeclarationDocBuilder } from "./widget-declaration-doc-builder";
+import { react_imports } from "@web-builder/react-core";
+import type { WidgetModuleInfo } from "./types";
+class ReactWidgetDeclarationDocUsageExampleBuilder {
+  protected readonly identifier: Identifier;
+  protected readonly params;
+  protected readonly module: WidgetModuleInfo;
+  protected partImportReact() {
+    return react_imports.import_react_minimal;
+  }
+  protected partImport() {}
+  protected partUsage() {}
+  protected partInstanciation() {
+    if (this.params) {
+      throw "examples with params not supported yet.";
+    } else {
+      //
+    }
+  }
+  protected partBody() {}
+  public snippet() {
+    return "example snippet: >>todo<<";
+  }
+}
+
+export class ReactWidgetDeclarationDocBuilder extends WidgetDeclarationDocBuilder {
+  constructor() {
+    super();
+  }
+
+  protected partIntro() {
+    if (this.anonymous) {
+      return ""; // TODO:
+    } else {
+      return `${this.widgetname}`;
+    }
+  }
+
+  protected partExample() {
+    return new ReactWidgetDeclarationDocUsageExampleBuilder().snippet();
+  }
+
+  protected partParams() {
+    return "TODO";
+  }
+  protected partPreview() {
+    return "TODO";
+  }
+  protected partRemarks() {
+    return "TODO";
+  }
+
+  protected partBrandingFooter() {
+    return "TODO";
+  }
+  protected partGridaMetaComment() {
+    return "TODO";
+  }
+  protected divider() {
+    return "---";
+  }
+  protected break() {
+    return "\n";
+  }
+  //
+
+  public make() {
+    const hr = this.divider;
+    const br = this.break;
+
+    return [
+      this.partIntro(),
+      br(),
+      hr(),
+      this.partExample(),
+      hr(),
+      this.partParams(),
+      br(),
+      hr(),
+      this.partRemarks(),
+      br(),
+      hr(),
+      this.partPrivateRemarks(),
+      this.partBrandingFooter(),
+      this.partGridaMetaComment(),
+    ]
+      .map((i) => i.toString())
+      .join("\n");
+  }
+}
diff --git a/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder.ts b/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder.ts
new file mode 100644
index 00000000..ef5b35e3
--- /dev/null
+++ b/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder.ts
@@ -0,0 +1,64 @@
+import type { Declaration, FunctionDeclaration, Identifier } from "coli";
+import type { WidgetModuleInfo, PropsInfo, PropsDefaultValues } from "./types";
+export abstract class WidgetDeclarationDocBuilder {
+  /**
+   * package info
+   *
+   * @alpha TODO: not supported
+   */
+  readonly module: WidgetModuleInfo;
+
+  /**
+   * the widget declaration token
+   */
+  readonly declaration: FunctionDeclaration;
+
+  /**
+   * @alpha TODO: not supported
+   */
+  readonly params: PropsInfo;
+
+  /**
+   * @alpha TODO: not supported
+   */
+  readonly defaultValues: PropsDefaultValues;
+
+  constructor() {
+    //
+  }
+
+  protected get anonymous(): boolean {
+    return this.declaration.id === undefined;
+  }
+
+  protected get widgetname(): string {
+    if (this.anonymous) {
+      // anonymous default export
+      return "Widget"; // for building example
+    } else {
+      return this.declaration.id!.name;
+    }
+  }
+
+  protected abstract partIntro();
+
+  protected abstract partExample();
+
+  protected abstract partParams();
+
+  protected abstract partPreview();
+
+  protected abstract partRemarks();
+
+  protected partPrivateRemarks() {
+    return `Code generated by grida.co | engine v2022.1.0 (Apache-2.0) | Generated code under CC0 (public domain) *This code is free to use, modify, and redistribute. (aknowledgment is not required)*`;
+  }
+
+  protected partBrandingFooter() {
+    //
+    const img_logo_32_madewithgrida = "";
+    const img_artwork_footer_branding = "";
+  }
+
+  protected abstract partGridaMetaComment();
+}

From e88e2d3c60c57872c5c4906d21d830fca5f594c6 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Wed, 20 Jul 2022 15:27:49 +0900
Subject: [PATCH 33/68] fix build

---
 packages/designto-web/tokens-to-web-widget/index.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/designto-web/tokens-to-web-widget/index.ts b/packages/designto-web/tokens-to-web-widget/index.ts
index 2f1d78dd..51807b88 100644
--- a/packages/designto-web/tokens-to-web-widget/index.ts
+++ b/packages/designto-web/tokens-to-web-widget/index.ts
@@ -328,6 +328,8 @@ function compose<T extends JsxWidget>(
   // -------------------------------------
   // module related
   else if (widget instanceof special.DeclarationWidgetToken) {
+    throw "explicit declaration not supported yet";
+    // @ts-ignore
     thisWebWidget = compose_declaration(widget, handleChild);
   }
   // -------------------------------------

From 918e41a90e64c7084c2731b7e5c4c840d27b8a54 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Thu, 21 Jul 2022 14:47:47 +0900
Subject: [PATCH 34/68] update coli with comments support

---
 externals/coli | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/externals/coli b/externals/coli
index 459e2c4f..dd06be3f 160000
--- a/externals/coli
+++ b/externals/coli
@@ -1 +1 @@
-Subproject commit 459e2c4f48146e32850f568aadc14cc8745072fb
+Subproject commit dd06be3ff4000dff5de6d725fa318087fdb1ac59

From 49beadceb7a023a88e4b7ff841f6285e6f6fb94b Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Thu, 21 Jul 2022 16:24:51 +0900
Subject: [PATCH 35/68] bump coli with comemnts support

---
 externals/coli | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/externals/coli b/externals/coli
index dd06be3f..06b4f1d0 160000
--- a/externals/coli
+++ b/externals/coli
@@ -1 +1 @@
-Subproject commit dd06be3ff4000dff5de6d725fa318087fdb1ac59
+Subproject commit 06b4f1d0f40df59c8506a0628dd7c7c2a6317219

From 74ac267967328b33dab86e52efb8a4619bdb1ba3 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Thu, 21 Jul 2022 16:25:00 +0900
Subject: [PATCH 36/68] b config

---
 editor/next.config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/editor/next.config.js b/editor/next.config.js
index b4fc7d7c..2f4cfde3 100644
--- a/editor/next.config.js
+++ b/editor/next.config.js
@@ -27,6 +27,7 @@ const withTM = require("next-transpile-modules")([
 
   "@code-features/assets",
   "@code-features/module",
+  "@code-features/documentation",
   "@code-features/component",
   "@code-features/flags",
   // -----------------------------

From 3832c29a30ace318b5ccf4be82fde489d5a920e9 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Thu, 21 Jul 2022 16:25:32 +0900
Subject: [PATCH 37/68] bump coli with jsx text nesting

---
 externals/coli | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/externals/coli b/externals/coli
index 06b4f1d0..96ea51f4 160000
--- a/externals/coli
+++ b/externals/coli
@@ -1 +1 @@
-Subproject commit 06b4f1d0f40df59c8506a0628dd7c7c2a6317219
+Subproject commit 96ea51f4a13734c540f8770603afdc4f2b0d06d7

From 49276535b6cd8e46595107999585e68a5c961cee Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Thu, 21 Jul 2022 16:25:58 +0900
Subject: [PATCH 38/68] fix meta manager formatting

---
 packages/support-documentation/doc-meta/manager.ts    | 11 ++++++++---
 packages/support-documentation/doc-meta/serializer.ts |  4 ++--
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/support-documentation/doc-meta/manager.ts b/packages/support-documentation/doc-meta/manager.ts
index 548f4a09..63ace6c6 100644
--- a/packages/support-documentation/doc-meta/manager.ts
+++ b/packages/support-documentation/doc-meta/manager.ts
@@ -5,7 +5,7 @@ export const grida_doc_meta_delimiters = {
 };
 
 export interface GridaWidgetDeclarationDocumentationMeta {
-  delimiter: typeof grida_doc_meta_delimiters.widget_declaraton;
+  delimiter: "grida.meta.widget_declaration";
   engine: string;
   uri: string;
   source: string;
@@ -48,7 +48,12 @@ export class GridaTSDocWidgetDeclarationMetaManager extends GridaTSDocMetaManage
     }
   }
 
-  make(meta: GridaWidgetDeclarationDocumentationMeta) {
-    return docmeta.encode(meta);
+  static make(
+    meta: Omit<GridaWidgetDeclarationDocumentationMeta, "delimiter">
+  ) {
+    return docmeta.encode(<GridaWidgetDeclarationDocumentationMeta>{
+      ...meta,
+      delimiter: "grida.meta.widget_declaration",
+    });
   }
 }
diff --git a/packages/support-documentation/doc-meta/serializer.ts b/packages/support-documentation/doc-meta/serializer.ts
index 413e31b2..caaac0cf 100644
--- a/packages/support-documentation/doc-meta/serializer.ts
+++ b/packages/support-documentation/doc-meta/serializer.ts
@@ -73,11 +73,11 @@ export function makeMarkdownCommentFromMeta<
     if (typeof v === "boolean") {
       fields.push(k);
     } else {
-      fields.push(`${k}\s:\s${v}`);
+      fields.push(`${k} : ${v}`);
     }
   });
 
-  return `<!-- ${fields.join("|")} -->`;
+  return `<!-- ${fields.join(" | ")} -->`;
 }
 
 const _ = {

From 0ce5dabb540a3b542e18bd899b8a65ba09d941b9 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Thu, 21 Jul 2022 16:26:25 +0900
Subject: [PATCH 39/68] add widget declaration info type for doc

---
 .../doc-widget-declaration/types.ts                      | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/support-documentation/doc-widget-declaration/types.ts b/packages/support-documentation/doc-widget-declaration/types.ts
index 11940251..c1a5fb02 100644
--- a/packages/support-documentation/doc-widget-declaration/types.ts
+++ b/packages/support-documentation/doc-widget-declaration/types.ts
@@ -1,5 +1,12 @@
-import type { Literal, Parameter } from "coli";
+import type { EsComponentExportingCofnig } from "@designto/config/module-es";
+import type { FunctionDeclaration, Literal, Parameter } from "coli";
 
 export interface WidgetModuleInfo {}
 export type PropsInfo = Array<Parameter>;
 export type PropsDefaultValues = { [key: string]: Literal };
+export type WidgetDeclarationInfo =
+  | FunctionDeclaration
+  | {
+      type: EsComponentExportingCofnig["type"] | "unknown";
+      identifier: string;
+    };

From 92232342da3e82a5676a0c4762c7e66edc8686d1 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Thu, 21 Jul 2022 16:26:55 +0900
Subject: [PATCH 40/68] initial experimental tsdoc support on react styled
 components widget

---
 .../es-module-exportable-declaration.ts       |  14 +-
 packages/builder-module-es/es-module-file.ts  |  31 ++++-
 .../jsx-component-module-builder/index.ts     |  14 +-
 .../rn-inline-style-module-builder.ts         |   4 +
 .../rn-styled-components-module-builder.ts    |   4 +
 .../rn-style-sheet-module-builder.ts          |   4 +
 .../react-css-module-module-builder.ts        |   4 +
 .../react-inline-css-module-builder.ts        |   4 +
 .../react-styled-components-module-builder.ts |  29 +++-
 .../solid-inline-css-module-builder.ts        |   4 +
 .../solid-styled-components-module-builder.ts |   4 +
 .../doc-widget-declaration/index.ts           |   4 +
 .../doc-widget-declaration/readme.md          |   2 +-
 .../widget-declaration-doc-builder-react.ts   | 128 +++++++++++++++---
 .../widget-declaration-doc-builder.ts         |  46 +++++--
 packages/support-documentation/index.ts       |   1 +
 16 files changed, 253 insertions(+), 44 deletions(-)

diff --git a/packages/builder-module-es/es-module-exportable-declaration.ts b/packages/builder-module-es/es-module-exportable-declaration.ts
index c3887a8c..32cd6e17 100644
--- a/packages/builder-module-es/es-module-exportable-declaration.ts
+++ b/packages/builder-module-es/es-module-exportable-declaration.ts
@@ -2,10 +2,15 @@ import { BlockStatement, ImportDeclaration } from "coli";
 import { stringfy } from "@coli.codes/export-string";
 import { EsWidgetModuleFile } from "@web-builder/module-es";
 import { react as react_config } from "@designto/config";
+import type { WidgetDeclarationDocumentation } from "@code-features/documentation";
 
 export abstract class EsWidgetModuleExportable {
   readonly name: string;
   readonly dependencies: string[];
+  /**
+   * main widget documentation
+   */
+  readonly documentation?: WidgetDeclarationDocumentation | undefined;
   readonly body: BlockStatement;
   readonly imports: ImportDeclaration[];
 
@@ -13,15 +18,18 @@ export abstract class EsWidgetModuleExportable {
     name,
     body,
     imports,
+    documentation,
     dependencies = [],
   }: {
-    name;
-    body;
-    imports;
+    name: string;
+    body: BlockStatement;
+    imports: ImportDeclaration[];
+    documentation?: WidgetDeclarationDocumentation;
     dependencies?: string[];
   }) {
     this.name = name;
     this.body = body;
+    this.documentation = documentation;
     this.imports = imports;
     this.dependencies = dependencies;
   }
diff --git a/packages/builder-module-es/es-module-file.ts b/packages/builder-module-es/es-module-file.ts
index 68df05e6..fe962358 100644
--- a/packages/builder-module-es/es-module-file.ts
+++ b/packages/builder-module-es/es-module-file.ts
@@ -2,10 +2,9 @@ import {
   SourceFile,
   BlockStatement,
   FunctionDeclaration,
-  Import,
   ImportDeclaration,
-  Return,
   Declaration,
+  MultilineCommentTrivia,
 } from "coli";
 import { SyntaxKind } from "@coli.codes/core-syntax-kind";
 import { EsComponentExportingCofnig } from "@designto/config/module-es";
@@ -13,6 +12,7 @@ import {
   add_export_keyword_modifier_to_declaration,
   wrap_with_export_assignment_jsx_component_identifier,
 } from "./es-component-exporting";
+import type { WidgetDeclarationDocumentation } from "@code-features/documentation";
 
 export class EsWidgetModuleFile extends SourceFile {
   constructor({ name, path }: { name: string; path: string }) {
@@ -25,18 +25,20 @@ export function makeEsWidgetModuleFile({
   path,
   imports,
   body,
-  declarations,
+  documentation,
+  declarations = [],
   config,
 }: {
   name: string;
   path: string;
   imports: ImportDeclaration[];
   body: BlockStatement;
-  declarations: Declaration[];
+  documentation?: WidgetDeclarationDocumentation;
+  declarations?: Declaration[];
   config: {
     exporting: EsComponentExportingCofnig;
   };
-}) {
+}): EsWidgetModuleFile {
   const { exporting } = config;
   const file = new EsWidgetModuleFile({
     name: `${name}.tsx`,
@@ -59,6 +61,12 @@ export function makeEsWidgetModuleFile({
             export: SyntaxKind.ExportKeyword,
           },
         });
+
+      addWidgetDocumentIfPresent(
+        export_default_anaonymous_functional_component,
+        documentation
+      );
+
       file.declare(export_default_anaonymous_functional_component);
       file.declare(...declarations);
       break;
@@ -71,6 +79,8 @@ export function makeEsWidgetModuleFile({
         body: body,
       });
 
+      addWidgetDocumentIfPresent(named_function_declaration, documentation);
+
       switch (exporting.exporting_position) {
         case "after-declaration":
           file.declare(named_function_declaration);
@@ -109,3 +119,14 @@ export function makeEsWidgetModuleFile({
 
   return file;
 }
+
+function addWidgetDocumentIfPresent(
+  declaration: FunctionDeclaration,
+  documentation?: WidgetDeclarationDocumentation
+) {
+  if (documentation) {
+    declaration.withDocument(
+      new MultilineCommentTrivia({ text: documentation })
+    );
+  }
+}
diff --git a/packages/builder-module-jsx/jsx-component-module-builder/index.ts b/packages/builder-module-jsx/jsx-component-module-builder/index.ts
index b444ea59..20ffdbdb 100644
--- a/packages/builder-module-jsx/jsx-component-module-builder/index.ts
+++ b/packages/builder-module-jsx/jsx-component-module-builder/index.ts
@@ -1,12 +1,14 @@
-import { Framework } from "@grida/builder-platform-types";
+import type { Framework } from "@grida/builder-platform-types";
 import type { JsxWidget } from "@web-builder/core";
-import {
+import type {
   StylesConfigMapBuilder,
   JSXWithoutStyleElementConfig,
   JSXWithStyleElementConfig,
   StylesRepository,
 } from "@web-builder/core/builders";
-import {
+import type { WidgetDeclarationDocumentation } from "@code-features/documentation";
+import type { EsWidgetModuleExportable } from "@web-builder/module-es";
+import type {
   BlockStatement,
   ImportDeclaration,
   JSXChildLike,
@@ -57,9 +59,13 @@ export abstract class JSXWidgetModuleBuilder<CONFIG> {
 
   protected abstract jsxBuilder(widget: JsxWidget): JSXChildLike;
 
+  protected abstract partDocumentation():
+    | WidgetDeclarationDocumentation
+    | undefined;
+
   protected abstract partImports(): Array<ImportDeclaration>;
 
   protected abstract partBody(): BlockStatement;
 
-  abstract asExportableModule();
+  abstract asExportableModule(): EsWidgetModuleExportable;
 }
diff --git a/packages/builder-react-native/rn-build-inline-style-widget/rn-inline-style-module-builder.ts b/packages/builder-react-native/rn-build-inline-style-widget/rn-inline-style-module-builder.ts
index 8da33769..d2eaf2c0 100644
--- a/packages/builder-react-native/rn-build-inline-style-widget/rn-inline-style-module-builder.ts
+++ b/packages/builder-react-native/rn-build-inline-style-widget/rn-inline-style-module-builder.ts
@@ -151,6 +151,10 @@ export class ReactNativeInlineStyleBuilder extends JSXWidgetModuleBuilder<reactn
     return new BlockStatement(new Return(jsxTree));
   }
 
+  protected partDocumentation() {
+    return undefined;
+  }
+
   asExportableModule() {
     const body = this.partBody();
     const imports = this.partImports();
diff --git a/packages/builder-react-native/rn-build-styled-component-widget/rn-styled-components-module-builder.ts b/packages/builder-react-native/rn-build-styled-component-widget/rn-styled-components-module-builder.ts
index e32eaf48..beeea23a 100644
--- a/packages/builder-react-native/rn-build-styled-component-widget/rn-styled-components-module-builder.ts
+++ b/packages/builder-react-native/rn-build-styled-component-widget/rn-styled-components-module-builder.ts
@@ -107,6 +107,10 @@ export class ReactNativeStyledComponentsModuleBuilder extends JSXWidgetModuleBui
     return new BlockStatement(new Return(jsxTree));
   }
 
+  protected partDocumentation() {
+    return undefined;
+  }
+
   protected partDeclarations() {
     return Array.from(this.stylesRepository.uniques())
       .map((k) => {
diff --git a/packages/builder-react-native/rn-build-stylesheet-widget/rn-style-sheet-module-builder.ts b/packages/builder-react-native/rn-build-stylesheet-widget/rn-style-sheet-module-builder.ts
index d2710325..d3db2d7a 100644
--- a/packages/builder-react-native/rn-build-stylesheet-widget/rn-style-sheet-module-builder.ts
+++ b/packages/builder-react-native/rn-build-stylesheet-widget/rn-style-sheet-module-builder.ts
@@ -139,6 +139,10 @@ export class ReactNativeStyleSheetModuleBuilder extends JSXWidgetModuleBuilder<r
     return new BlockStatement(new Return(jsxTree));
   }
 
+  protected partDocumentation() {
+    return undefined;
+  }
+
   protected partStyleSheetDeclaration(): StyleSheetDeclaration<any> {
     const styles = Array.from(this.stylesRepository.uniques()).reduce(
       (p, c) => {
diff --git a/packages/builder-web-react/react-css-module-widget/react-css-module-module-builder.ts b/packages/builder-web-react/react-css-module-widget/react-css-module-module-builder.ts
index d9890aaf..2effcccb 100644
--- a/packages/builder-web-react/react-css-module-widget/react-css-module-module-builder.ts
+++ b/packages/builder-web-react/react-css-module-widget/react-css-module-module-builder.ts
@@ -146,6 +146,10 @@ export class ReactCssModuleBuilder extends JSXWidgetModuleBuilder<react_config.R
     return new BlockStatement(new Return(jsxTree));
   }
 
+  protected partDocumentation() {
+    return undefined;
+  }
+
   public asExportableModule() {
     const body = this.partBody();
     const imports = this.partImports();
diff --git a/packages/builder-web-react/react-inline-css-widget/react-inline-css-module-builder.ts b/packages/builder-web-react/react-inline-css-widget/react-inline-css-module-builder.ts
index 4a30bcab..16f297ce 100644
--- a/packages/builder-web-react/react-inline-css-widget/react-inline-css-module-builder.ts
+++ b/packages/builder-web-react/react-inline-css-widget/react-inline-css-module-builder.ts
@@ -150,6 +150,10 @@ export class ReactInlineCssBuilder extends JSXWidgetModuleBuilder<react_config.R
     return new BlockStatement(new Return(jsxTree));
   }
 
+  protected partDocumentation() {
+    return undefined;
+  }
+
   asExportableModule() {
     const body = this.partBody();
     const imports = this.partImports();
diff --git a/packages/builder-web-react/react-styled-component-widget/react-styled-components-module-builder.ts b/packages/builder-web-react/react-styled-component-widget/react-styled-components-module-builder.ts
index ff3380e2..10e9ab38 100644
--- a/packages/builder-web-react/react-styled-component-widget/react-styled-components-module-builder.ts
+++ b/packages/builder-web-react/react-styled-component-widget/react-styled-components-module-builder.ts
@@ -24,6 +24,8 @@ import {
 import { makeEsWidgetModuleFile } from "@web-builder/module-es";
 import { Framework } from "@grida/builder-platform-types";
 import { JSXWidgetModuleBuilder } from "@web-builder/module-jsx";
+import type { WidgetDeclarationDocumentation } from "@code-features/documentation";
+import { ReactWidgetDeclarationDocBuilder } from "@code-features/documentation";
 
 export class ReactStyledComponentsModuleBuilder extends JSXWidgetModuleBuilder<react_config.ReactStyledComponentsConfig> {
   constructor({
@@ -91,6 +93,19 @@ export class ReactStyledComponentsModuleBuilder extends JSXWidgetModuleBuilder<r
     return react_imports.import_react_from_react;
   }
 
+  protected partDocumentation(): string {
+    const docstr = new ReactWidgetDeclarationDocBuilder({
+      module: {}, // TODO: add module info support
+      declaration: {
+        type: "unknown",
+        identifier: this.widgetName,
+      },
+      params: undefined,
+      defaultValues: undefined,
+    }).make();
+    return docstr;
+  }
+
   protected partBody(): BlockStatement {
     let jsxTree = this.jsxBuilder(this.entry);
     return new BlockStatement(new Return(jsxTree));
@@ -110,6 +125,7 @@ export class ReactStyledComponentsModuleBuilder extends JSXWidgetModuleBuilder<r
   }
 
   public asExportableModule() {
+    const doc = this.partDocumentation();
     const body = this.partBody();
     const imports = this.partImports();
     const styled_declarations = this.partDeclarations();
@@ -118,7 +134,8 @@ export class ReactStyledComponentsModuleBuilder extends JSXWidgetModuleBuilder<r
       {
         body,
         imports,
-        declarations: styled_declarations,
+        documentation: doc,
+        styledDeclarations: styled_declarations,
       },
       {
         dependencies: ["react", this.config.module],
@@ -135,11 +152,13 @@ export class ReactStyledComponentWidgetModuleExportable extends ReactWidgetModul
     {
       body,
       imports,
-      declarations,
+      documentation,
+      styledDeclarations,
     }: {
       body: BlockStatement;
       imports: ImportDeclaration[];
-      declarations: StyledComponentDeclaration[];
+      documentation: WidgetDeclarationDocumentation;
+      styledDeclarations: StyledComponentDeclaration[];
     },
     {
       dependencies = [],
@@ -151,9 +170,10 @@ export class ReactStyledComponentWidgetModuleExportable extends ReactWidgetModul
       name,
       body,
       imports,
+      documentation,
     });
 
-    this.declarations = declarations;
+    this.declarations = styledDeclarations;
   }
 
   asFile({
@@ -167,6 +187,7 @@ export class ReactStyledComponentWidgetModuleExportable extends ReactWidgetModul
       imports: this.imports,
       declarations: this.declarations,
       body: this.body,
+      documentation: this.documentation,
       config: {
         exporting: exporting,
       },
diff --git a/packages/builder-web-solid/solid-inline-css-widget/solid-inline-css-module-builder.ts b/packages/builder-web-solid/solid-inline-css-widget/solid-inline-css-module-builder.ts
index e339acf6..50da2bda 100644
--- a/packages/builder-web-solid/solid-inline-css-widget/solid-inline-css-module-builder.ts
+++ b/packages/builder-web-solid/solid-inline-css-widget/solid-inline-css-module-builder.ts
@@ -149,6 +149,10 @@ export class SolidInlineCssBuilder extends JSXWidgetModuleBuilder<solid_config.S
     return new BlockStatement(new Return(jsxTree));
   }
 
+  protected partDocumentation() {
+    return undefined;
+  }
+
   public asExportableModule() {
     const body = this.partBody();
     const imports = this.partImports();
diff --git a/packages/builder-web-solid/solid-styled-component-widget/solid-styled-components-module-builder.ts b/packages/builder-web-solid/solid-styled-component-widget/solid-styled-components-module-builder.ts
index f38a4dc7..830abae0 100644
--- a/packages/builder-web-solid/solid-styled-component-widget/solid-styled-components-module-builder.ts
+++ b/packages/builder-web-solid/solid-styled-component-widget/solid-styled-components-module-builder.ts
@@ -97,6 +97,10 @@ export class SolidStyledComponentsBuilder extends JSXWidgetModuleBuilder<solid_c
     return new BlockStatement(new Return(jsxTree));
   }
 
+  protected partDocumentation() {
+    return undefined;
+  }
+
   protected partDeclarations() {
     return Array.from(this.stylesRepository.uniques())
       .map((k) => {
diff --git a/packages/support-documentation/doc-widget-declaration/index.ts b/packages/support-documentation/doc-widget-declaration/index.ts
index 84e469e1..4a800297 100644
--- a/packages/support-documentation/doc-widget-declaration/index.ts
+++ b/packages/support-documentation/doc-widget-declaration/index.ts
@@ -9,3 +9,7 @@ const make_widget_declaration_doc_for = {
 };
 
 export default make_widget_declaration_doc_for;
+
+export type WidgetDeclarationDocumentation = string;
+
+export { ReactWidgetDeclarationDocBuilder } from "./widget-declaration-doc-builder-react";
diff --git a/packages/support-documentation/doc-widget-declaration/readme.md b/packages/support-documentation/doc-widget-declaration/readme.md
index 07bc0a90..f52ec4ff 100644
--- a/packages/support-documentation/doc-widget-declaration/readme.md
+++ b/packages/support-documentation/doc-widget-declaration/readme.md
@@ -67,7 +67,7 @@ function Widget({ ...props }: WidgetProps) {
  * }
  * ```
  * ---
- * @param props (any) - this widget does not contains any typed props, but you can pass dynamic props as you want.
+ * @param props (any) - this widget does not requires props. you can pass custom dynamic props to the widget as you want (on typescript, it will raise type check issues).
  *
  * ---
  * @preview
diff --git a/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder-react.ts b/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder-react.ts
index d5d5bf3d..1e5c2ec3 100644
--- a/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder-react.ts
+++ b/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder-react.ts
@@ -1,65 +1,152 @@
-import type { Declaration, FunctionDeclaration, Identifier } from "coli";
+import { BlockStatement, ImportDeclaration, JSX, Return } from "coli";
+import { stringfy } from "@coli.codes/export-string";
 import { WidgetDeclarationDocBuilder } from "./widget-declaration-doc-builder";
 import { react_imports } from "@web-builder/react-core";
-import type { WidgetModuleInfo } from "./types";
+import type { WidgetDeclarationInfo, WidgetModuleInfo } from "./types";
+import { GridaTSDocWidgetDeclarationMetaManager } from "../doc-meta";
+import { makeEsWidgetModuleFile } from "@web-builder/module-es";
+
 class ReactWidgetDeclarationDocUsageExampleBuilder {
-  protected readonly identifier: Identifier;
+  protected readonly sourceuri?: string | undefined;
+  protected readonly identifier: string;
   protected readonly params;
   protected readonly module: WidgetModuleInfo;
+
+  constructor({
+    identifier,
+    sourceuri,
+  }: {
+    identifier: string;
+    sourceuri?: string;
+  }) {
+    this.identifier = identifier;
+    this.sourceuri = sourceuri;
+  }
+
   protected partImportReact() {
     return react_imports.import_react_minimal;
   }
-  protected partImport() {}
-  protected partUsage() {}
+  protected partImport(): ImportDeclaration | undefined {
+    // TODO: module import example not supproted
+    return undefined;
+  }
+
   protected partInstanciation() {
     if (this.params) {
-      throw "examples with params not supported yet.";
+      return JSX.tag(this.identifier, this.params);
     } else {
-      //
+      return JSX.tag(this.identifier);
     }
   }
-  protected partBody() {}
+
+  protected partBody() {
+    return new BlockStatement(
+      new Return(
+        JSX.fragment({
+          children: [
+            JSX.text("👇 instanciate widget like below. 👇"),
+            this.partInstanciation(),
+          ],
+        }).make()
+      )
+    );
+  }
+
   public snippet() {
-    return "example snippet: >>todo<<";
+    const file = makeEsWidgetModuleFile({
+      name: "example.tsx",
+      path: "tmp/examples",
+      imports: [this.partImportReact(), this.partImport()].filter(
+        Boolean
+      ) as ImportDeclaration[],
+      body: this.partBody(),
+      config: {
+        exporting: {
+          type: "export-default-anonymous-functional-component",
+          exporting_position: "with-declaration",
+          declaration_syntax_choice: "inlinefunction",
+          export_declaration_syntax_choice: "export-default",
+        },
+      },
+    });
+
+    const code = stringfy(file, {
+      language: "tsx",
+    });
+    return `\`\`\`tsx\n${code}\`\`\``;
   }
 }
 
 export class ReactWidgetDeclarationDocBuilder extends WidgetDeclarationDocBuilder {
-  constructor() {
-    super();
+  protected readonly sourceuri?: string | undefined;
+
+  constructor({
+    sourceuri,
+    ...p
+  }: {
+    module: WidgetModuleInfo;
+    declaration: WidgetDeclarationInfo;
+    params: any;
+    defaultValues: any;
+    sourceuri?: string;
+  }) {
+    super(p);
+
+    this.sourceuri = sourceuri;
   }
 
   protected partIntro() {
     if (this.anonymous) {
-      return ""; // TODO:
+      return "Anonymous Widget";
     } else {
       return `${this.widgetname}`;
     }
   }
 
   protected partExample() {
-    return new ReactWidgetDeclarationDocUsageExampleBuilder().snippet();
+    const snippet = new ReactWidgetDeclarationDocUsageExampleBuilder({
+      identifier: this.widgetname,
+      sourceuri: this.sourceuri,
+    }).snippet();
+    return `${snippet}`;
   }
 
   protected partParams() {
-    return "TODO";
+    if (this.params) {
+      return "TODO: params";
+    } else {
+      // provide default params document
+      return "@params {any} props - this widget does not requires props. you can pass custom dynamic props to the widget as you want (on typescript, it will raise type check issues).";
+    }
   }
   protected partPreview() {
-    return "TODO";
+    return "@preview TODO: preview";
   }
   protected partRemarks() {
-    return "TODO";
+    return "@remarks\n@see {@link https://grida.co/docs/widgets} for more information.";
   }
 
   protected partBrandingFooter() {
-    return "TODO";
+    return [
+      "![Made with Grida](https://bridged-service-static.s3.us-west-1.amazonaws.com/branding/logo/32.png)",
+    ].join("\n");
   }
+
   protected partGridaMetaComment() {
-    return "TODO";
+    const infoline =
+      "<!-- Info: Please do not remove this comment unless intended. removing this section will break grida integrations. -->";
+    const dataline = GridaTSDocWidgetDeclarationMetaManager.make({
+      engine: "v2022.07",
+      source: "https://todo.com",
+      uri: "https://todo.com",
+    });
+    return [infoline, dataline].join("\n");
   }
+
   protected divider() {
     return "---";
   }
+
   protected break() {
     return "\n";
   }
@@ -82,10 +169,13 @@ export class ReactWidgetDeclarationDocBuilder extends WidgetDeclarationDocBuilde
       br(),
       hr(),
       this.partPrivateRemarks(),
+      br(),
       this.partBrandingFooter(),
+      br(),
       this.partGridaMetaComment(),
     ]
-      .map((i) => i.toString())
+      .map((i) => i?.toString())
+      .filter(Boolean)
       .join("\n");
   }
 }
diff --git a/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder.ts b/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder.ts
index ef5b35e3..537e14d3 100644
--- a/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder.ts
+++ b/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder.ts
@@ -1,5 +1,10 @@
-import type { Declaration, FunctionDeclaration, Identifier } from "coli";
-import type { WidgetModuleInfo, PropsInfo, PropsDefaultValues } from "./types";
+import { FunctionDeclaration, Identifier } from "coli";
+import type {
+  WidgetModuleInfo,
+  PropsInfo,
+  PropsDefaultValues,
+  WidgetDeclarationInfo,
+} from "./types";
 export abstract class WidgetDeclarationDocBuilder {
   /**
    * package info
@@ -11,7 +16,7 @@ export abstract class WidgetDeclarationDocBuilder {
   /**
    * the widget declaration token
    */
-  readonly declaration: FunctionDeclaration;
+  readonly declaration: WidgetDeclarationInfo;
 
   /**
    * @alpha TODO: not supported
@@ -21,14 +26,35 @@ export abstract class WidgetDeclarationDocBuilder {
   /**
    * @alpha TODO: not supported
    */
-  readonly defaultValues: PropsDefaultValues;
+  readonly defaultValues?: PropsDefaultValues | undefined;
 
-  constructor() {
-    //
+  constructor({
+    module,
+    declaration,
+    params,
+    defaultValues,
+  }: {
+    module: WidgetModuleInfo;
+    declaration: WidgetDeclarationInfo;
+    params: PropsInfo;
+    defaultValues?: PropsDefaultValues;
+  }) {
+    this.module = module;
+    this.declaration = declaration;
+    this.params = params;
+    this.defaultValues = defaultValues;
   }
 
   protected get anonymous(): boolean {
-    return this.declaration.id === undefined;
+    if (this.declaration instanceof FunctionDeclaration) {
+      return this.declaration.id === undefined;
+    } else {
+      return (
+        this.declaration.type === "export-anonymous-class-component" ||
+        this.declaration.type ===
+          "export-default-anonymous-functional-component"
+      );
+    }
   }
 
   protected get widgetname(): string {
@@ -36,7 +62,11 @@ export abstract class WidgetDeclarationDocBuilder {
       // anonymous default export
       return "Widget"; // for building example
     } else {
-      return this.declaration.id!.name;
+      if (this.declaration instanceof FunctionDeclaration) {
+        return this.declaration.id!.name;
+      } else {
+        return this.declaration.identifier;
+      }
     }
   }
 
diff --git a/packages/support-documentation/index.ts b/packages/support-documentation/index.ts
index e69de29b..62689ed3 100644
--- a/packages/support-documentation/index.ts
+++ b/packages/support-documentation/index.ts
@@ -0,0 +1 @@
+export * from "./doc-widget-declaration";

From 6664410518b1649dcd5fafdee481a729ec0ba264 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Thu, 21 Jul 2022 17:56:33 +0900
Subject: [PATCH 41/68] add platforms field to meta

---
 packages/support-documentation/doc-meta/manager.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/support-documentation/doc-meta/manager.ts b/packages/support-documentation/doc-meta/manager.ts
index 63ace6c6..99f94086 100644
--- a/packages/support-documentation/doc-meta/manager.ts
+++ b/packages/support-documentation/doc-meta/manager.ts
@@ -6,9 +6,10 @@ export const grida_doc_meta_delimiters = {
 
 export interface GridaWidgetDeclarationDocumentationMeta {
   delimiter: "grida.meta.widget_declaration";
-  engine: string;
-  uri: string;
-  source: string;
+  engine: string; // e.g. v.2.0.0
+  platform?: string; // e.g. cli:v1.0.0 / code.grida.co:v2022.08 / grida:v0.0.0
+  uri: string; // e.g. grida.co/scenes/xxx
+  source: string; // e.g. figma.com/files/xxx/yyy
 }
 
 class DocMetaManager {}

From 5ec4de53ca577acf51e0e700e6d258df93b3a8bc Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sat, 23 Jul 2022 15:14:15 +0900
Subject: [PATCH 42/68] rm log

---
 packages/designto-token/tokenizer.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/designto-token/tokenizer.ts b/packages/designto-token/tokenizer.ts
index f54f9429..8436006e 100644
--- a/packages/designto-token/tokenizer.ts
+++ b/packages/designto-token/tokenizer.ts
@@ -160,7 +160,7 @@ function handleNode(
     ) {
       try {
         tokenizedTarget = flags_handling_gate(node);
-        console.log("handled flags", tokenizedTarget);
+        // console.log("handled flags", tokenizedTarget);
       } catch (e) {
         console.error("error while interpreting flags.. skipping", e);
       }

From 09fd4d341a7f1c1a9bf716e295d3260b006a1472 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sat, 23 Jul 2022 15:14:26 +0900
Subject: [PATCH 43/68] add dirty package

---
 editor/next.config.js                                    | 2 ++
 ...hard-replace-widget-declaration-documentation-meta.ts | 9 +++++++++
 packages/dirty/package.json                              | 5 +++++
 3 files changed, 16 insertions(+)
 create mode 100644 packages/dirty/hard-replace-widget-declaration-documentation-meta.ts
 create mode 100644 packages/dirty/package.json

diff --git a/editor/next.config.js b/editor/next.config.js
index 2f4cfde3..56fad81d 100644
--- a/editor/next.config.js
+++ b/editor/next.config.js
@@ -1,5 +1,7 @@
 const TerserPlugin = require("terser-webpack-plugin");
 const withTM = require("next-transpile-modules")([
+  "dirty",
+
   // region @editor-app
   "@editor-app/live-session",
   "@code-editor/preview-pip", // TODO: remove me. this is for development. for production, use npm ver instead.
diff --git a/packages/dirty/hard-replace-widget-declaration-documentation-meta.ts b/packages/dirty/hard-replace-widget-declaration-documentation-meta.ts
new file mode 100644
index 00000000..12ec463d
--- /dev/null
+++ b/packages/dirty/hard-replace-widget-declaration-documentation-meta.ts
@@ -0,0 +1,9 @@
+import Postprocessing from "coli-plugin-postprocessing";
+
+export const dirty_widget_doc_meta_postprocessing_replacer =
+  Postprocessing.create("widget-doc-meta-postprocessing-replacer");
+
+export const dirty_widget_doc_meta_postprocessing_replacer_keys = {
+  designsource: "designsource",
+  filekey: "filekey",
+} as const;
diff --git a/packages/dirty/package.json b/packages/dirty/package.json
new file mode 100644
index 00000000..0f000da3
--- /dev/null
+++ b/packages/dirty/package.json
@@ -0,0 +1,5 @@
+{
+  "name": "dirty",
+  "version": "0.0.0",
+  "description": "dirtly application logics needs to be cleaned up."
+}
\ No newline at end of file

From e146bf0a6f596c3f9ae7d653de6994954f7cdd5c Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sat, 23 Jul 2022 15:24:56 +0900
Subject: [PATCH 44/68] add debugger package

---
 editor/next.config.js                        |  1 +
 packages/designto-code-debugger/index.ts     | 12 ++++++++++++
 packages/designto-code-debugger/package.json |  5 +++++
 3 files changed, 18 insertions(+)
 create mode 100644 packages/designto-code-debugger/index.ts
 create mode 100644 packages/designto-code-debugger/package.json

diff --git a/editor/next.config.js b/editor/next.config.js
index 56fad81d..c4a24fce 100644
--- a/editor/next.config.js
+++ b/editor/next.config.js
@@ -14,6 +14,7 @@ const withTM = require("next-transpile-modules")([
 
   // -----------------------------
   // region @designto-code
+  "@designto/debugger",
   "@designto/config",
   "@grida/builder-config-preset",
   "@grida/builder-platform-types",
diff --git a/packages/designto-code-debugger/index.ts b/packages/designto-code-debugger/index.ts
new file mode 100644
index 00000000..78149673
--- /dev/null
+++ b/packages/designto-code-debugger/index.ts
@@ -0,0 +1,12 @@
+export function debug(...messages) {
+  if (process.env.NODE_ENV === "development") {
+    console.log(...messages);
+  }
+}
+
+export function debugIf(condition: boolean | (() => boolean), ...messages) {
+  const _continue = typeof condition === "function" ? condition() : condition;
+  if (_continue) {
+    debug(...messages);
+  }
+}
diff --git a/packages/designto-code-debugger/package.json b/packages/designto-code-debugger/package.json
new file mode 100644
index 00000000..161eb99c
--- /dev/null
+++ b/packages/designto-code-debugger/package.json
@@ -0,0 +1,5 @@
+{
+  "name": "@designto/debugger",
+  "version": "0.0.0",
+  "private": false
+}
\ No newline at end of file

From e5ac8f3da50f602f704482a5b17937985bddb48c Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sat, 23 Jul 2022 15:25:18 +0900
Subject: [PATCH 45/68] replace console logs to debugger logs

---
 .../designto-code/universal/design-to-code.ts | 42 ++++++++-----------
 1 file changed, 18 insertions(+), 24 deletions(-)

diff --git a/packages/designto-code/universal/design-to-code.ts b/packages/designto-code/universal/design-to-code.ts
index 8fe3e474..23e80643 100644
--- a/packages/designto-code/universal/design-to-code.ts
+++ b/packages/designto-code/universal/design-to-code.ts
@@ -19,6 +19,7 @@ import {
 import { default_build_configuration, FrameworkConfig } from "@designto/config";
 // import { reusable } from "@code-features/component";
 import assert from "assert";
+import { debug, debugIf } from "@designto/debugger";
 
 interface AssetsConfig {
   asset_repository?: BaseImageRepositories<string>;
@@ -47,18 +48,14 @@ export async function designToCode({
   build_config = config.default_build_configuration,
 }: DesignToCodeInput): Promise<Result> {
   assert(input, "input is required");
-  if (process.env.NODE_ENV === "development") {
-    if (framework_config.framework == "vanilla") {
-    } else {
-      console.info(
-        "dev: starting designtocode with user input",
-        input,
-        framework_config,
-        build_config,
-        asset_config
-      );
-    }
-  }
+  debugIf(
+    framework_config.framework !== "vanilla",
+    "dev: starting designtocode with user input",
+    input,
+    framework_config,
+    build_config,
+    asset_config
+  );
 
   // post token processing
   let tokenizer_config: TokenizerConfig = {
@@ -209,12 +206,10 @@ export async function designToReact({
     !input.reusable_widget_tree
   ) {
     const reactwidget = toReact.buildReactWidget(input.widget);
-    if (process.env.NODE_ENV === "development") {
-      console.info("dev::", "final web token composed", {
-        input: input.widget,
-        reactwidget,
-      });
-    }
+    debug("dev::", "final web token composed", {
+      input: input.widget,
+      reactwidget,
+    });
 
     const res = toReact.buildReactApp(reactwidget, react_config);
     // ------------------------------------------------------------------------
@@ -332,12 +327,11 @@ export async function designToSolid({
     !input.reusable_widget_tree
   ) {
     const reactwidget = toReact.buildReactWidget(input.widget);
-    if (process.env.NODE_ENV === "development") {
-      console.info("dev::", "final web token composed", {
-        input: input.widget,
-        reactwidget,
-      });
-    }
+
+    debug("dev::", "final web token composed", {
+      input: input.widget,
+      reactwidget,
+    });
 
     const res = toSolid.buildSolidApp(reactwidget, solid_config);
     // ------------------------------------------------------------------------

From 696c87a5e73aa0621263917727ce0df4061ea906 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sat, 23 Jul 2022 15:33:34 +0900
Subject: [PATCH 46/68] add mute, unmute command with postmessage interface to
 debugger

---
 packages/designto-code-debugger/index.ts | 25 +++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/packages/designto-code-debugger/index.ts b/packages/designto-code-debugger/index.ts
index 78149673..74cc3d3b 100644
--- a/packages/designto-code-debugger/index.ts
+++ b/packages/designto-code-debugger/index.ts
@@ -1,5 +1,28 @@
+const IS_DEV = process.env.NODE_ENV === "development";
+let MUTED = false;
+
+// if browser
+if (typeof window !== "undefined") {
+  ///
+  /// on console, type
+  /// - window.postMessage("mute") to mute
+  /// - window.postMessage("unmute") to unmute
+  ///
+  addEventListener("message", function (event) {
+    var data = event.data;
+    if (data === "mute") {
+      MUTED = true;
+      console.log("muted");
+    }
+    if (data === "unmute") {
+      MUTED = false;
+      console.log("unmuted");
+    }
+  });
+}
+
 export function debug(...messages) {
-  if (process.env.NODE_ENV === "development") {
+  if (!MUTED && IS_DEV) {
     console.log(...messages);
   }
 }

From 68b4abc32b88dcbd7dc0ec56751217c1d8dbbb52 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sat, 23 Jul 2022 15:34:08 +0900
Subject: [PATCH 47/68] bump packages

---
 externals/coli       | 2 +-
 externals/design-sdk | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/externals/coli b/externals/coli
index 96ea51f4..b03b829f 160000
--- a/externals/coli
+++ b/externals/coli
@@ -1 +1 @@
-Subproject commit 96ea51f4a13734c540f8770603afdc4f2b0d06d7
+Subproject commit b03b829f3aeafae23057354597852ac80bf59c28
diff --git a/externals/design-sdk b/externals/design-sdk
index 0ecc068f..fd4af9f7 160000
--- a/externals/design-sdk
+++ b/externals/design-sdk
@@ -1 +1 @@
-Subproject commit 0ecc068f7399d31ccb99d98fbfc0e56e72717385
+Subproject commit fd4af9f7533827074d2a79cedb2bd3e9a25472d5

From 8ff6a45d42f1ae6de368f204922d3ea85df60516 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sat, 23 Jul 2022 15:34:36 +0900
Subject: [PATCH 48/68] format

---
 packages/builder-config/input/design-input.ts       |  5 ++++-
 .../from-static-widget-tree.ts                      | 13 ++++++-------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/builder-config/input/design-input.ts b/packages/builder-config/input/design-input.ts
index e1966a43..d807b241 100644
--- a/packages/builder-config/input/design-input.ts
+++ b/packages/builder-config/input/design-input.ts
@@ -42,7 +42,10 @@ export class DesignInput implements IDesignInput {
       nodes: this._flat_all(design),
     });
 
-    return new DesignInput({ entry: design, repository: repository });
+    return new DesignInput({
+      entry: design,
+      repository: repository,
+    });
   }
 
   static fromDesignWithComponents({
diff --git a/packages/builder-web-react/react-styled-component-widget/from-static-widget-tree.ts b/packages/builder-web-react/react-styled-component-widget/from-static-widget-tree.ts
index 69fe82ad..3ed58213 100644
--- a/packages/builder-web-react/react-styled-component-widget/from-static-widget-tree.ts
+++ b/packages/builder-web-react/react-styled-component-widget/from-static-widget-tree.ts
@@ -3,6 +3,11 @@ import { ReactComponentExportResult } from "@web-builder/react-core";
 import { react as react_config } from "@designto/config";
 import { ReactStyledComponentsModuleBuilder } from "./react-styled-components-module-builder";
 
+interface Config {
+  styling: react_config.ReactStyledComponentsConfig;
+  exporting: react_config.ReactComponentExportingCofnig;
+}
+
 /**
  * styled components pattern with either emotion or styled-component
  * @todo - this is not fully implemented
@@ -11,13 +16,7 @@ import { ReactStyledComponentsModuleBuilder } from "./react-styled-components-mo
  */
 export function finalizeReactWidget_StyledComponents(
   entry: JsxWidget,
-  {
-    styling,
-    exporting,
-  }: {
-    styling: react_config.ReactStyledComponentsConfig;
-    exporting: react_config.ReactComponentExportingCofnig;
-  }
+  { styling, exporting }: Config
 ): ReactComponentExportResult {
   const builder = new ReactStyledComponentsModuleBuilder({
     entry,

From c7fe95271edfad1c53d2c8286bbd27ccd3370d67 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sat, 23 Jul 2022 15:35:10 +0900
Subject: [PATCH 49/68] add docs gen with widget meta

---
 .../react-styled-components-module-builder.ts        | 12 +++++++++++-
 .../doc-widget-declaration/types.ts                  |  7 ++++++-
 .../widget-declaration-doc-builder-react.ts          |  9 ++++++++-
 3 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/packages/builder-web-react/react-styled-component-widget/react-styled-components-module-builder.ts b/packages/builder-web-react/react-styled-component-widget/react-styled-components-module-builder.ts
index 10e9ab38..5cf4158f 100644
--- a/packages/builder-web-react/react-styled-component-widget/react-styled-components-module-builder.ts
+++ b/packages/builder-web-react/react-styled-component-widget/react-styled-components-module-builder.ts
@@ -26,6 +26,10 @@ import { Framework } from "@grida/builder-platform-types";
 import { JSXWidgetModuleBuilder } from "@web-builder/module-jsx";
 import type { WidgetDeclarationDocumentation } from "@code-features/documentation";
 import { ReactWidgetDeclarationDocBuilder } from "@code-features/documentation";
+import {
+  dirty_widget_doc_meta_postprocessing_replacer as replacer,
+  dirty_widget_doc_meta_postprocessing_replacer_keys as replacer_keys,
+} from "dirty/hard-replace-widget-declaration-documentation-meta";
 
 export class ReactStyledComponentsModuleBuilder extends JSXWidgetModuleBuilder<react_config.ReactStyledComponentsConfig> {
   constructor({
@@ -95,7 +99,13 @@ export class ReactStyledComponentsModuleBuilder extends JSXWidgetModuleBuilder<r
 
   protected partDocumentation(): string {
     const docstr = new ReactWidgetDeclarationDocBuilder({
-      module: {}, // TODO: add module info support
+      module: {
+        // TODO: add proper module info support (accept info from builder's constructor)
+        designsource: replacer.reserve(replacer_keys.designsource, "unknown"),
+        filekey: replacer.reserve(replacer_keys.filekey, "unknown"),
+        name: this.entry.key.name,
+        id: this.entry.key.id,
+      },
       declaration: {
         type: "unknown",
         identifier: this.widgetName,
diff --git a/packages/support-documentation/doc-widget-declaration/types.ts b/packages/support-documentation/doc-widget-declaration/types.ts
index c1a5fb02..d22d21d3 100644
--- a/packages/support-documentation/doc-widget-declaration/types.ts
+++ b/packages/support-documentation/doc-widget-declaration/types.ts
@@ -1,7 +1,12 @@
 import type { EsComponentExportingCofnig } from "@designto/config/module-es";
 import type { FunctionDeclaration, Literal, Parameter } from "coli";
 
-export interface WidgetModuleInfo {}
+export interface WidgetModuleInfo {
+  designsource?: string;
+  filekey?: string;
+  id: string;
+  name: string;
+}
 export type PropsInfo = Array<Parameter>;
 export type PropsDefaultValues = { [key: string]: Literal };
 export type WidgetDeclarationInfo =
diff --git a/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder-react.ts b/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder-react.ts
index 1e5c2ec3..c8b32a4a 100644
--- a/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder-react.ts
+++ b/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder-react.ts
@@ -95,7 +95,7 @@ export class ReactWidgetDeclarationDocBuilder extends WidgetDeclarationDocBuilde
     this.sourceuri = sourceuri;
   }
 
-  protected partIntro() {
+  private get _widgetname(): string {
     if (this.anonymous) {
       return "Anonymous Widget";
     } else {
@@ -103,6 +103,13 @@ export class ReactWidgetDeclarationDocBuilder extends WidgetDeclarationDocBuilde
     }
   }
 
+  protected partIntro() {
+    if (this.module.designsource) {
+      return `${this._widgetname} - from design {@link ${this.module.designsource}}`;
+    }
+    return this._widgetname;
+  }
+
   protected partExample() {
     const snippet = new ReactWidgetDeclarationDocUsageExampleBuilder({
       identifier: this.widgetname,

From 2d8f60d3cb3e2b3f72a1166dc245babc0a1025fb Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sat, 23 Jul 2022 16:32:52 +0900
Subject: [PATCH 50/68] add resolutions & fix `@reflect-ui/core`version to
 0.0.3

---
 editor-packages/base-sdk                      |    2 +-
 .../canvas-event-target.tsx                   |    2 +
 .../editor-preview-pip/lib/pip.tsx            |    1 +
 externals/design-sdk                          |    2 +-
 externals/reflect-core                        |    2 +-
 package.json                                  |    6 +-
 .../builder-css-styles/font-weight/index.ts   |   46 +-
 .../rn-widgets/rn-text/index.ts               |    4 +-
 packages/designto-token/package.json          |    2 +-
 packages/reflect-detection                    |    2 +-
 yarn.lock                                     | 1012 ++++++++++++++++-
 11 files changed, 1030 insertions(+), 51 deletions(-)

diff --git a/editor-packages/base-sdk b/editor-packages/base-sdk
index 784f2b52..cc58a11b 160000
--- a/editor-packages/base-sdk
+++ b/editor-packages/base-sdk
@@ -1 +1 @@
-Subproject commit 784f2b52435bef9d13a483f67871c8da83bf7b7c
+Subproject commit cc58a11b0a543a33fa1964f667510f1d232e90f3
diff --git a/editor-packages/editor-canvas/canvas-event-target/canvas-event-target.tsx b/editor-packages/editor-canvas/canvas-event-target/canvas-event-target.tsx
index 97c21e56..ac55cbdf 100644
--- a/editor-packages/editor-canvas/canvas-event-target/canvas-event-target.tsx
+++ b/editor-packages/editor-canvas/canvas-event-target/canvas-event-target.tsx
@@ -182,6 +182,7 @@ export function CanvasEventTarget({
         set_drag_start_emitted(false);
         onDragEnd(s);
       },
+      // @ts-ignore
       onMouseDown: onPointerDown,
       onMoveStart: onPointerMoveStart,
       onMoveEnd: onPointerMoveEnd,
@@ -209,6 +210,7 @@ export function CanvasEventTarget({
         WebkitUserSelect: "none",
       }}
       id="gesture-event-listener"
+      // @ts-ignore
       ref={interactionEventTargetRef}
     >
       {children}
diff --git a/editor-packages/editor-preview-pip/lib/pip.tsx b/editor-packages/editor-preview-pip/lib/pip.tsx
index 67ea8328..bb0c7a89 100644
--- a/editor-packages/editor-preview-pip/lib/pip.tsx
+++ b/editor-packages/editor-preview-pip/lib/pip.tsx
@@ -61,6 +61,7 @@ function PIP({
   backgroundColor?: string;
 }) {
   return (
+    // @ts-ignore
     <Draggable handle=".handle" bounds="parent">
       <PipWindow
         className="handle"
diff --git a/externals/design-sdk b/externals/design-sdk
index fd4af9f7..5b246792 160000
--- a/externals/design-sdk
+++ b/externals/design-sdk
@@ -1 +1 @@
-Subproject commit fd4af9f7533827074d2a79cedb2bd3e9a25472d5
+Subproject commit 5b24679244fae19746469067ec07de9977bb3f09
diff --git a/externals/reflect-core b/externals/reflect-core
index e4676071..7c5e131d 160000
--- a/externals/reflect-core
+++ b/externals/reflect-core
@@ -1 +1 @@
-Subproject commit e46760712a3b944c286f9ed84112310e953698c9
+Subproject commit 7c5e131df2287102c2ad7c6d9a8342b3841b16bb
diff --git a/package.json b/package.json
index f8385ac3..db6a2485 100644
--- a/package.json
+++ b/package.json
@@ -17,5 +17,9 @@
         "externals/reflect-core/packages/*",
         "externals/design-sdk/*",
         "externals/coli/packages/*"
-    ]
+    ],
+    "resolutions": {
+        "@reflect-ui/core": "0.0.3",
+        "csstype": "3.1.0"
+    }
 }
\ No newline at end of file
diff --git a/packages/builder-css-styles/font-weight/index.ts b/packages/builder-css-styles/font-weight/index.ts
index 5fc51ebb..09d55dd0 100644
--- a/packages/builder-css-styles/font-weight/index.ts
+++ b/packages/builder-css-styles/font-weight/index.ts
@@ -16,17 +16,19 @@ export type CSSFontWeight =
 type CSSNumericFontWeight =
   | "normal"
   | "bold"
-  | "100"
-  | "200"
-  | "300"
-  | "400"
-  | "500"
-  | "600"
-  | "700"
-  | "800"
-  | "900";
+  | 100
+  | 200
+  | 300
+  | 400
+  | 500
+  | 600
+  | 700
+  | 800
+  | 900;
 
-export function convertToCssFontWeight(fontWeight: FontWeight): CSSFontWeight {
+export function convertToCssFontWeight(
+  fontWeight: FontWeight
+): CSSFontWeight | undefined {
   if (fontWeight === undefined) {
     return "initial";
   }
@@ -60,34 +62,34 @@ export function convertToCssFontWeight(fontWeight: FontWeight): CSSFontWeight {
 
 export function numericFontWeight(
   fontWeight: FontWeight
-): CSSNumericFontWeight {
+): CSSNumericFontWeight | undefined {
   switch (fontWeight) {
     case FontWeight.normal:
       return "normal";
     case FontWeight.bold:
       return "bold";
     case FontWeight.lighter:
-      return "300";
+      return 300;
     case FontWeight.bolder:
-      return "900";
+      return 900;
     case FontWeight.w100:
-      return "100";
+      return 100;
     case FontWeight.w200:
-      return "200";
+      return 200;
     case FontWeight.w300:
-      return "300";
+      return 300;
     case FontWeight.w400:
-      return "400";
+      return 400;
     case FontWeight.w500:
-      return "500";
+      return 500;
     case FontWeight.w600:
-      return "600";
+      return 600;
     case FontWeight.w700:
-      return "700";
+      return 700;
     case FontWeight.w800:
-      return "800";
+      return 800;
     case FontWeight.w900:
-      return "900";
+      return 900;
     default:
       return undefined;
   }
diff --git a/packages/builder-react-native/rn-widgets/rn-text/index.ts b/packages/builder-react-native/rn-widgets/rn-text/index.ts
index 3a611d32..3b80b3df 100644
--- a/packages/builder-react-native/rn-widgets/rn-text/index.ts
+++ b/packages/builder-react-native/rn-widgets/rn-text/index.ts
@@ -67,7 +67,9 @@ export class Text extends TextChildWidget<ViewStyle> {
 
       fontSize: this.textStyle.fontSize,
       fontFamily: css.fontFamily(this.textStyle.fontFamily),
-      fontWeight: css.numericFontWeight(this.textStyle.fontWeight),
+      fontWeight: css
+        .numericFontWeight(this.textStyle.fontWeight)
+        ?.toString() as TextStyle["fontWeight"],
       // FIXME: non numeric value can be passed
       letterSpacing: css.letterSpacing(
         this.textStyle.letterSpacing
diff --git a/packages/designto-token/package.json b/packages/designto-token/package.json
index 7aae44d8..77b155ce 100644
--- a/packages/designto-token/package.json
+++ b/packages/designto-token/package.json
@@ -8,6 +8,6 @@
   "license": "Apache 2.0",
   "private": false,
   "dependencies": {
-    "@reflect-ui/core": "0.0.2-rc.7-local"
+    "@reflect-ui/core": "0.0.3"
   }
 }
\ No newline at end of file
diff --git a/packages/reflect-detection b/packages/reflect-detection
index 1a5c7194..638e3258 160000
--- a/packages/reflect-detection
+++ b/packages/reflect-detection
@@ -1 +1 @@
-Subproject commit 1a5c71946b10c4034d975926ea5283feca9ef556
+Subproject commit 638e32583fc0b21039059bcfcaa73ea4daa5ecdb
diff --git a/yarn.lock b/yarn.lock
index bf45fa15..97c1f218 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -43,11 +43,23 @@
   dependencies:
     "@babel/highlight" "^7.16.7"
 
+"@babel/code-frame@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.18.6.tgz#3b25d38c89600baa2dcc219edfa88a74eb2c427a"
+  integrity sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==
+  dependencies:
+    "@babel/highlight" "^7.18.6"
+
 "@babel/compat-data@^7.13.11", "@babel/compat-data@^7.16.8", "@babel/compat-data@^7.17.0", "@babel/compat-data@^7.17.7":
   version "7.17.7"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.17.7.tgz#078d8b833fbbcc95286613be8c716cef2b519fa2"
   integrity sha512-p8pdE6j0a29TNGebNm7NzYZWB3xVZJBZ7XGs42uAKzQo8VQ3F0By/cQCtUEABwIqw5zo6WA4NbmxsfzADzMKnQ==
 
+"@babel/compat-data@^7.18.8":
+  version "7.18.8"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.18.8.tgz#2483f565faca607b8535590e84e7de323f27764d"
+  integrity sha512-HSmX4WZPPK3FUxYp7g2T6EyO8j96HlZJlxmKPSh6KAcqwyDrfx7hKjXpAW/0FhFfTJsR0Yt4lAjLI2coMptIHQ==
+
 "@babel/core@7.12.9":
   version "7.12.9"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.12.9.tgz#fd450c4ec10cdbb980e2928b7aa7a28484593fc8"
@@ -91,6 +103,27 @@
     json5 "^2.1.2"
     semver "^6.3.0"
 
+"@babel/core@^7.11.6":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.18.9.tgz#805461f967c77ff46c74ca0460ccf4fe933ddd59"
+  integrity sha512-1LIb1eL8APMy91/IMW+31ckrfBM4yCoLaVzoDhZUKSM4cu1L1nIidyxkCgzPAgrC5WEz36IPEr/eSeSF9pIn+g==
+  dependencies:
+    "@ampproject/remapping" "^2.1.0"
+    "@babel/code-frame" "^7.18.6"
+    "@babel/generator" "^7.18.9"
+    "@babel/helper-compilation-targets" "^7.18.9"
+    "@babel/helper-module-transforms" "^7.18.9"
+    "@babel/helpers" "^7.18.9"
+    "@babel/parser" "^7.18.9"
+    "@babel/template" "^7.18.6"
+    "@babel/traverse" "^7.18.9"
+    "@babel/types" "^7.18.9"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.2.1"
+    semver "^6.3.0"
+
 "@babel/generator@^7.12.11", "@babel/generator@^7.12.5", "@babel/generator@^7.17.3", "@babel/generator@^7.17.7", "@babel/generator@^7.7.2":
   version "7.17.7"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.17.7.tgz#8da2599beb4a86194a3b24df6c085931d9ee45ad"
@@ -100,6 +133,15 @@
     jsesc "^2.5.1"
     source-map "^0.5.0"
 
+"@babel/generator@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.18.9.tgz#68337e9ea8044d6ddc690fb29acae39359cca0a5"
+  integrity sha512-wt5Naw6lJrL1/SGkipMiFxJjtyczUWTP38deiP1PO60HsBjDeKk08CGC3S8iVuvf0FmTdgKwU1KIXzSKL1G0Ug==
+  dependencies:
+    "@babel/types" "^7.18.9"
+    "@jridgewell/gen-mapping" "^0.3.2"
+    jsesc "^2.5.1"
+
 "@babel/helper-annotate-as-pure@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz#bb2339a7534a9c128e3102024c60760a3a7f3862"
@@ -125,6 +167,16 @@
     browserslist "^4.17.5"
     semver "^6.3.0"
 
+"@babel/helper-compilation-targets@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.18.9.tgz#69e64f57b524cde3e5ff6cc5a9f4a387ee5563bf"
+  integrity sha512-tzLCyVmqUiFlcFoAPLA/gL9TeYrF61VLNtb+hvkuVaB5SUjW7jcfrglBIX1vUIoT7CLP3bBlIMeyEsIl2eFQNg==
+  dependencies:
+    "@babel/compat-data" "^7.18.8"
+    "@babel/helper-validator-option" "^7.18.6"
+    browserslist "^4.20.2"
+    semver "^6.3.0"
+
 "@babel/helper-create-class-features-plugin@^7.16.10", "@babel/helper-create-class-features-plugin@^7.16.7", "@babel/helper-create-class-features-plugin@^7.17.6":
   version "7.17.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.17.6.tgz#3778c1ed09a7f3e65e6d6e0f6fbfcc53809d92c9"
@@ -181,6 +233,11 @@
   dependencies:
     "@babel/types" "^7.16.7"
 
+"@babel/helper-environment-visitor@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz#0c0cee9b35d2ca190478756865bb3528422f51be"
+  integrity sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==
+
 "@babel/helper-explode-assignable-expression@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.16.7.tgz#12a6d8522fdd834f194e868af6354e8650242b7a"
@@ -197,6 +254,14 @@
     "@babel/template" "^7.16.7"
     "@babel/types" "^7.16.7"
 
+"@babel/helper-function-name@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.18.9.tgz#940e6084a55dee867d33b4e487da2676365e86b0"
+  integrity sha512-fJgWlZt7nxGksJS9a0XdSaI4XvpExnNIgRP+rVefWh5U7BL8pPuir6SJUmFKRfjWQ51OtWSzwOxhaH/EBWWc0A==
+  dependencies:
+    "@babel/template" "^7.18.6"
+    "@babel/types" "^7.18.9"
+
 "@babel/helper-get-function-arity@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.7.tgz#ea08ac753117a669f1508ba06ebcc49156387419"
@@ -211,6 +276,13 @@
   dependencies:
     "@babel/types" "^7.16.7"
 
+"@babel/helper-hoist-variables@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz#d4d2c8fb4baeaa5c68b99cc8245c56554f926678"
+  integrity sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
 "@babel/helper-member-expression-to-functions@^7.16.7":
   version "7.17.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.17.7.tgz#a34013b57d8542a8c4ff8ba3f747c02452a4d8c4"
@@ -225,6 +297,13 @@
   dependencies:
     "@babel/types" "^7.16.7"
 
+"@babel/helper-module-imports@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz#1e3ebdbbd08aad1437b428c50204db13c5a3ca6e"
+  integrity sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
 "@babel/helper-module-transforms@^7.12.1", "@babel/helper-module-transforms@^7.16.7", "@babel/helper-module-transforms@^7.17.7":
   version "7.17.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.17.7.tgz#3943c7f777139e7954a5355c815263741a9c1cbd"
@@ -239,6 +318,20 @@
     "@babel/traverse" "^7.17.3"
     "@babel/types" "^7.17.0"
 
+"@babel/helper-module-transforms@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.18.9.tgz#5a1079c005135ed627442df31a42887e80fcb712"
+  integrity sha512-KYNqY0ICwfv19b31XzvmI/mfcylOzbLtowkw+mfvGPAQ3kfCnMLYbED3YecL5tPd8nAYFQFAd6JHp2LxZk/J1g==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-module-imports" "^7.18.6"
+    "@babel/helper-simple-access" "^7.18.6"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/helper-validator-identifier" "^7.18.6"
+    "@babel/template" "^7.18.6"
+    "@babel/traverse" "^7.18.9"
+    "@babel/types" "^7.18.9"
+
 "@babel/helper-optimise-call-expression@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.16.7.tgz#a34e3560605abbd31a18546bd2aad3e6d9a174f2"
@@ -283,6 +376,13 @@
   dependencies:
     "@babel/types" "^7.17.0"
 
+"@babel/helper-simple-access@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.18.6.tgz#d6d8f51f4ac2978068df934b569f08f29788c7ea"
+  integrity sha512-iNpIgTgyAvDQpDj76POqg+YEt8fPxx3yaNBg3S30dxNKm2SWfYhD0TGrK/Eu9wHpUW63VQU894TsTg+GLbUa1g==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
 "@babel/helper-skip-transparent-expression-wrappers@^7.16.0":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.16.0.tgz#0ee3388070147c3ae051e487eca3ebb0e2e8bb09"
@@ -297,16 +397,33 @@
   dependencies:
     "@babel/types" "^7.16.7"
 
+"@babel/helper-split-export-declaration@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz#7367949bc75b20c6d5a5d4a97bba2824ae8ef075"
+  integrity sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
 "@babel/helper-validator-identifier@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz#e8c602438c4a8195751243da9031d1607d247cad"
   integrity sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==
 
+"@babel/helper-validator-identifier@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.18.6.tgz#9c97e30d31b2b8c72a1d08984f2ca9b574d7a076"
+  integrity sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g==
+
 "@babel/helper-validator-option@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.16.7.tgz#b203ce62ce5fe153899b617c08957de860de4d23"
   integrity sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ==
 
+"@babel/helper-validator-option@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz#bf0d2b5a509b1f336099e4ff36e1a63aa5db4db8"
+  integrity sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==
+
 "@babel/helper-wrap-function@^7.16.8":
   version "7.16.8"
   resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.16.8.tgz#58afda087c4cd235de92f7ceedebca2c41274200"
@@ -326,6 +443,15 @@
     "@babel/traverse" "^7.17.3"
     "@babel/types" "^7.17.0"
 
+"@babel/helpers@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.18.9.tgz#4bef3b893f253a1eced04516824ede94dcfe7ff9"
+  integrity sha512-Jf5a+rbrLoR4eNdUmnFu8cN5eNJT6qdTdOg5IHIzq87WwyRw9PwguLFOWYgktN/60IP4fgDUawJvs7PjQIzELQ==
+  dependencies:
+    "@babel/template" "^7.18.6"
+    "@babel/traverse" "^7.18.9"
+    "@babel/types" "^7.18.9"
+
 "@babel/highlight@^7.16.7":
   version "7.16.10"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.16.10.tgz#744f2eb81579d6eea753c227b0f570ad785aba88"
@@ -335,11 +461,25 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
+"@babel/highlight@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.18.6.tgz#81158601e93e2563795adcbfbdf5d64be3f2ecdf"
+  integrity sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.18.6"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
 "@babel/parser@^7.1.0", "@babel/parser@^7.12.11", "@babel/parser@^7.12.7", "@babel/parser@^7.14.7", "@babel/parser@^7.16.7", "@babel/parser@^7.17.3", "@babel/parser@^7.17.8":
   version "7.17.8"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.8.tgz#2817fb9d885dd8132ea0f8eb615a6388cca1c240"
   integrity sha512-BoHhDJrJXqcg+ZL16Xv39H9n+AqJ4pcDrQBGZN+wHxIysrLZ3/ECwCBUch/1zUNhnsXULcONU3Ei5Hmkfk6kiQ==
 
+"@babel/parser@^7.18.6", "@babel/parser@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.18.9.tgz#f2dde0c682ccc264a9a8595efd030a5cc8fd2539"
+  integrity sha512-9uJveS9eY9DJ0t64YbIBZICtJy8a5QrDEVdiLCG97fVLpDTpGX7t8mMSb6OWw6Lrnjqj4O8zwjELX3dhoMgiBg==
+
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.16.7.tgz#4eda6d6c2a0aa79c70fa7b6da67763dfe2141050"
@@ -1151,6 +1291,15 @@
     "@babel/parser" "^7.16.7"
     "@babel/types" "^7.16.7"
 
+"@babel/template@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.18.6.tgz#1283f4993e00b929d6e2d3c72fdc9168a2977a31"
+  integrity sha512-JoDWzPe+wgBsTTgdnIma3iHNFC7YVJoPssVBDjiHfNlyt4YcunDtcDOUmfVDfCK5MfdsaIoX9PkijPhjH3nYUw==
+  dependencies:
+    "@babel/code-frame" "^7.18.6"
+    "@babel/parser" "^7.18.6"
+    "@babel/types" "^7.18.6"
+
 "@babel/traverse@^7.1.6", "@babel/traverse@^7.12.11", "@babel/traverse@^7.12.9", "@babel/traverse@^7.13.0", "@babel/traverse@^7.16.7", "@babel/traverse@^7.16.8", "@babel/traverse@^7.17.3", "@babel/traverse@^7.7.2":
   version "7.17.3"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.17.3.tgz#0ae0f15b27d9a92ba1f2263358ea7c4e7db47b57"
@@ -1167,6 +1316,22 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
+"@babel/traverse@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.18.9.tgz#deeff3e8f1bad9786874cb2feda7a2d77a904f98"
+  integrity sha512-LcPAnujXGwBgv3/WHv01pHtb2tihcyW1XuL9wd7jqh1Z8AQkTd+QVjMrMijrln0T7ED3UXLIy36P9Ao7W75rYg==
+  dependencies:
+    "@babel/code-frame" "^7.18.6"
+    "@babel/generator" "^7.18.9"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-function-name" "^7.18.9"
+    "@babel/helper-hoist-variables" "^7.18.6"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/parser" "^7.18.9"
+    "@babel/types" "^7.18.9"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
 "@babel/types@^7.0.0", "@babel/types@^7.12.11", "@babel/types@^7.12.7", "@babel/types@^7.16.0", "@babel/types@^7.16.7", "@babel/types@^7.16.8", "@babel/types@^7.17.0", "@babel/types@^7.2.0", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4":
   version "7.17.0"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.17.0.tgz#a826e368bccb6b3d84acd76acad5c0d87342390b"
@@ -1175,6 +1340,25 @@
     "@babel/helper-validator-identifier" "^7.16.7"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.18.6", "@babel/types@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.18.9.tgz#7148d64ba133d8d73a41b3172ac4b83a1452205f"
+  integrity sha512-WwMLAg2MvJmt/rKEVQBBhIVffMmnilX4oe0sRe7iPOHIGsqpruFHHdrfj4O1CMMtgMtCU4oPafZjDPCRgO57Wg==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.18.6"
+    to-fast-properties "^2.0.0"
+
+"@base-sdk/base@0.1.0-5":
+  version "0.1.0-5"
+  resolved "https://registry.yarnpkg.com/@base-sdk/base/-/base-0.1.0-5.tgz#3a08c23586e61147075d4b214ecd1f7934cf1292"
+  integrity sha512-ZSvYdFXMt0ik9fSyXygH7eRkojPP39njVLiVuo4P3IYwZOKShX4IZoLEbFuBhasir0DVa+niwivxYXjLqBG9cQ==
+  dependencies:
+    "@base-sdk/build" "0.1.0-3"
+    "@base-sdk/core" "0.1.0"
+    "@base-sdk/hosting" "0.1.0-1"
+    "@base-sdk/resources" "0.1.0"
+    "@base-sdk/url" "0.1.0-1"
+
 "@base-sdk/base@^0.1.3":
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/@base-sdk/base/-/base-0.1.3.tgz#3d6125444c7f83f27987cb49de9ed102db920380"
@@ -1186,6 +1370,16 @@
     "@base-sdk/resources" "0.1.3"
     "@base-sdk/url" "0.1.3"
 
+"@base-sdk/build@0.1.0-3":
+  version "0.1.0-3"
+  resolved "https://registry.yarnpkg.com/@base-sdk/build/-/build-0.1.0-3.tgz#73363bb2c93361a87dc67abeb1c295faf4abbc0e"
+  integrity sha512-1+KdkIsriFT59+uIc8T5xSYupUCLBCX9Da3EAI5RLZsWgKsmKzhLiUgyRPhar3eH+zS12tFfc1NfYDczlmPbjQ==
+  dependencies:
+    "@base-sdk/core" "0.1.0"
+    "@base-sdk/hosting" "0.1.0-1"
+    "@base-sdk/url" "0.1.0"
+    dart-services "^0.2.3"
+
 "@base-sdk/build@0.1.3":
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/@base-sdk/build/-/build-0.1.3.tgz#7a10728756f4515f2a22db85a1a8bbad4659f1c2"
@@ -1226,6 +1420,14 @@
   dependencies:
     axios "^0.21.0"
 
+"@base-sdk/hosting@0.1.0-1":
+  version "0.1.0-1"
+  resolved "https://registry.yarnpkg.com/@base-sdk/hosting/-/hosting-0.1.0-1.tgz#bf16050cadd1c766f0813bc7bb14344b28e9910d"
+  integrity sha512-LX0A17LE0GWt8rozCPIe1cLDlFKojnciAqWeGaib+UvDttTXkxkCksLslch/gcmuzWtfDZtDLbgwNExo9Hvi5w==
+  dependencies:
+    "@base-sdk/core" "0.1.0"
+    form-data "^3.0.0"
+
 "@base-sdk/hosting@0.1.3":
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/@base-sdk/hosting/-/hosting-0.1.3.tgz#70abd65e7baa5557c711004ffbbcc16a37c8f6b2"
@@ -1234,6 +1436,13 @@
     "@base-sdk/core" "0.1.0"
     form-data "^3.0.0"
 
+"@base-sdk/resources@0.1.0":
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/@base-sdk/resources/-/resources-0.1.0.tgz#ea99550a53caa8e04c0735e16866d8a91001b319"
+  integrity sha512-Mi3P+zDd61N4iUTEvsXuHjN6MIJGz2Kzb09mlmYS5RL+vLtGAv12w4dkLFmKwo6JPzmtNss5R4erbSOfjOhyew==
+  dependencies:
+    "@base-sdk/core" "0.1.0"
+
 "@base-sdk/resources@0.1.3":
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/@base-sdk/resources/-/resources-0.1.3.tgz#13543f139688e27b6d1a480fb13beb04d8798c51"
@@ -1248,6 +1457,13 @@
   dependencies:
     "@base-sdk/core" "0.1.0"
 
+"@base-sdk/url@0.1.0-1":
+  version "0.1.0-1"
+  resolved "https://registry.yarnpkg.com/@base-sdk/url/-/url-0.1.0-1.tgz#47ac3f50955e8df43c90f0efa3878a31e34cbd7c"
+  integrity sha512-39GSoHRiCerEEWtFYH60s4nWP124SEdJjdIarglZmZOsM2VUdEuv3VuOgdh8AK2z0/5jjLBL1n5Fe5n96eE1yg==
+  dependencies:
+    "@base-sdk/core" "0.1.0"
+
 "@base-sdk/url@0.1.3":
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/@base-sdk/url/-/url-0.1.3.tgz#2be0bbd618b0e90a7da40b2ff535e3b5ff7d7229"
@@ -1342,11 +1558,6 @@
   dependencies:
     "@date-io/core" "^2.13.1"
 
-"@design-sdk/figma-remote-api@0.0.0":
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/@design-sdk/figma-remote-api/-/figma-remote-api-0.0.0.tgz#c1937575bbf824ca8fc45141db5327dd98d789ff"
-  integrity sha512-AA+LelJSudE2fEIvrecgcc7nmXTeRZy8WEdqhqZV4SuvgqZUH8i+t2m3dw/L/NmbxxdduRmltzTuX78MxwGntA==
-
 "@design-sdk/figma-url@0.0.2":
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/@design-sdk/figma-url/-/figma-url-0.0.2.tgz#6cdac717440def04f419efea080f95dae23e9d6f"
@@ -2385,6 +2596,18 @@
     jest-util "^27.5.1"
     slash "^3.0.0"
 
+"@jest/console@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/@jest/console/-/console-28.1.3.tgz#2030606ec03a18c31803b8a36382762e447655df"
+  integrity sha512-QPAkP5EwKdK/bxIr6C1I4Vs0rm2nHiANzj/Z5X2JQkrZo6IqvC4ldZ9K95tF0HdidhA8Bo6egxSzUFPYKcEXLw==
+  dependencies:
+    "@jest/types" "^28.1.3"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    jest-message-util "^28.1.3"
+    jest-util "^28.1.3"
+    slash "^3.0.0"
+
 "@jest/core@^27.5.1":
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/@jest/core/-/core-27.5.1.tgz#267ac5f704e09dc52de2922cbf3af9edcd64b626"
@@ -2419,6 +2642,41 @@
     slash "^3.0.0"
     strip-ansi "^6.0.0"
 
+"@jest/core@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/@jest/core/-/core-28.1.3.tgz#0ebf2bd39840f1233cd5f2d1e6fc8b71bd5a1ac7"
+  integrity sha512-CIKBrlaKOzA7YG19BEqCw3SLIsEwjZkeJzf5bdooVnW4bH5cktqe3JX+G2YV1aK5vP8N9na1IGWFzYaTp6k6NA==
+  dependencies:
+    "@jest/console" "^28.1.3"
+    "@jest/reporters" "^28.1.3"
+    "@jest/test-result" "^28.1.3"
+    "@jest/transform" "^28.1.3"
+    "@jest/types" "^28.1.3"
+    "@types/node" "*"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    ci-info "^3.2.0"
+    exit "^0.1.2"
+    graceful-fs "^4.2.9"
+    jest-changed-files "^28.1.3"
+    jest-config "^28.1.3"
+    jest-haste-map "^28.1.3"
+    jest-message-util "^28.1.3"
+    jest-regex-util "^28.0.2"
+    jest-resolve "^28.1.3"
+    jest-resolve-dependencies "^28.1.3"
+    jest-runner "^28.1.3"
+    jest-runtime "^28.1.3"
+    jest-snapshot "^28.1.3"
+    jest-util "^28.1.3"
+    jest-validate "^28.1.3"
+    jest-watcher "^28.1.3"
+    micromatch "^4.0.4"
+    pretty-format "^28.1.3"
+    rimraf "^3.0.0"
+    slash "^3.0.0"
+    strip-ansi "^6.0.0"
+
 "@jest/environment@^27.5.1":
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-27.5.1.tgz#d7425820511fe7158abbecc010140c3fd3be9c74"
@@ -2429,6 +2687,31 @@
     "@types/node" "*"
     jest-mock "^27.5.1"
 
+"@jest/environment@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-28.1.3.tgz#abed43a6b040a4c24fdcb69eab1f97589b2d663e"
+  integrity sha512-1bf40cMFTEkKyEf585R9Iz1WayDjHoHqvts0XFYEqyKM3cFWDpeMoqKKTAF9LSYQModPUlh8FKptoM2YcMWAXA==
+  dependencies:
+    "@jest/fake-timers" "^28.1.3"
+    "@jest/types" "^28.1.3"
+    "@types/node" "*"
+    jest-mock "^28.1.3"
+
+"@jest/expect-utils@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/@jest/expect-utils/-/expect-utils-28.1.3.tgz#58561ce5db7cd253a7edddbc051fb39dda50f525"
+  integrity sha512-wvbi9LUrHJLn3NlDW6wF2hvIMtd4JUl2QNVrjq+IBSHirgfrR3o9RnVtxzdEGO2n9JyIWwHnLfby5KzqBGg2YA==
+  dependencies:
+    jest-get-type "^28.0.2"
+
+"@jest/expect@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/@jest/expect/-/expect-28.1.3.tgz#9ac57e1d4491baca550f6bdbd232487177ad6a72"
+  integrity sha512-lzc8CpUbSoE4dqT0U+g1qODQjBRHPpCPXissXD4mS9+sWQdmmpeJ9zSH1rS1HEkrsMN0fb7nKrJ9giAR1d3wBw==
+  dependencies:
+    expect "^28.1.3"
+    jest-snapshot "^28.1.3"
+
 "@jest/fake-timers@^27.5.1":
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-27.5.1.tgz#76979745ce0579c8a94a4678af7a748eda8ada74"
@@ -2441,6 +2724,18 @@
     jest-mock "^27.5.1"
     jest-util "^27.5.1"
 
+"@jest/fake-timers@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-28.1.3.tgz#230255b3ad0a3d4978f1d06f70685baea91c640e"
+  integrity sha512-D/wOkL2POHv52h+ok5Oj/1gOG9HSywdoPtFsRCUmlCILXNn5eIWmcnd3DIiWlJnpGvQtmajqBP95Ei0EimxfLw==
+  dependencies:
+    "@jest/types" "^28.1.3"
+    "@sinonjs/fake-timers" "^9.1.2"
+    "@types/node" "*"
+    jest-message-util "^28.1.3"
+    jest-mock "^28.1.3"
+    jest-util "^28.1.3"
+
 "@jest/globals@^27.5.1":
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/@jest/globals/-/globals-27.5.1.tgz#7ac06ce57ab966566c7963431cef458434601b2b"
@@ -2450,6 +2745,15 @@
     "@jest/types" "^27.5.1"
     expect "^27.5.1"
 
+"@jest/globals@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/@jest/globals/-/globals-28.1.3.tgz#a601d78ddc5fdef542728309894895b4a42dc333"
+  integrity sha512-XFU4P4phyryCXu1pbcqMO0GSQcYe1IsalYCDzRNyhetyeyxMcIxa11qPNDpVNLeretItNqEmYYQn1UYz/5x1NA==
+  dependencies:
+    "@jest/environment" "^28.1.3"
+    "@jest/expect" "^28.1.3"
+    "@jest/types" "^28.1.3"
+
 "@jest/reporters@^27.5.1":
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-27.5.1.tgz#ceda7be96170b03c923c37987b64015812ffec04"
@@ -2481,6 +2785,44 @@
     terminal-link "^2.0.0"
     v8-to-istanbul "^8.1.0"
 
+"@jest/reporters@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-28.1.3.tgz#9adf6d265edafc5fc4a434cfb31e2df5a67a369a"
+  integrity sha512-JuAy7wkxQZVNU/V6g9xKzCGC5LVXx9FDcABKsSXp5MiKPEE2144a/vXTEDoyzjUpZKfVwp08Wqg5A4WfTMAzjg==
+  dependencies:
+    "@bcoe/v8-coverage" "^0.2.3"
+    "@jest/console" "^28.1.3"
+    "@jest/test-result" "^28.1.3"
+    "@jest/transform" "^28.1.3"
+    "@jest/types" "^28.1.3"
+    "@jridgewell/trace-mapping" "^0.3.13"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    collect-v8-coverage "^1.0.0"
+    exit "^0.1.2"
+    glob "^7.1.3"
+    graceful-fs "^4.2.9"
+    istanbul-lib-coverage "^3.0.0"
+    istanbul-lib-instrument "^5.1.0"
+    istanbul-lib-report "^3.0.0"
+    istanbul-lib-source-maps "^4.0.0"
+    istanbul-reports "^3.1.3"
+    jest-message-util "^28.1.3"
+    jest-util "^28.1.3"
+    jest-worker "^28.1.3"
+    slash "^3.0.0"
+    string-length "^4.0.1"
+    strip-ansi "^6.0.0"
+    terminal-link "^2.0.0"
+    v8-to-istanbul "^9.0.1"
+
+"@jest/schemas@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/@jest/schemas/-/schemas-28.1.3.tgz#ad8b86a66f11f33619e3d7e1dcddd7f2d40ff905"
+  integrity sha512-/l/VWsdt/aBXgjshLWOFyFt3IVdYypu5y2Wn2rOO1un6nkqIn8SLXzgIMYXFyYsRWDyF5EthmKJMIdJvk08grg==
+  dependencies:
+    "@sinclair/typebox" "^0.24.1"
+
 "@jest/source-map@^27.5.1":
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-27.5.1.tgz#6608391e465add4205eae073b55e7f279e04e8cf"
@@ -2490,6 +2832,15 @@
     graceful-fs "^4.2.9"
     source-map "^0.6.0"
 
+"@jest/source-map@^28.1.2":
+  version "28.1.2"
+  resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-28.1.2.tgz#7fe832b172b497d6663cdff6c13b0a920e139e24"
+  integrity sha512-cV8Lx3BeStJb8ipPHnqVw/IM2VCMWO3crWZzYodSIkxXnRcXJipCdx1JCK0K5MsJJouZQTH73mzf4vgxRaH9ww==
+  dependencies:
+    "@jridgewell/trace-mapping" "^0.3.13"
+    callsites "^3.0.0"
+    graceful-fs "^4.2.9"
+
 "@jest/test-result@^27.5.1":
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-27.5.1.tgz#56a6585fa80f7cdab72b8c5fc2e871d03832f5bb"
@@ -2500,6 +2851,16 @@
     "@types/istanbul-lib-coverage" "^2.0.0"
     collect-v8-coverage "^1.0.0"
 
+"@jest/test-result@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-28.1.3.tgz#5eae945fd9f4b8fcfce74d239e6f725b6bf076c5"
+  integrity sha512-kZAkxnSE+FqE8YjW8gNuoVkkC9I7S1qmenl8sGcDOLropASP+BkcGKwhXoyqQuGOGeYY0y/ixjrd/iERpEXHNg==
+  dependencies:
+    "@jest/console" "^28.1.3"
+    "@jest/types" "^28.1.3"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    collect-v8-coverage "^1.0.0"
+
 "@jest/test-sequencer@^27.5.1":
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-27.5.1.tgz#4057e0e9cea4439e544c6353c6affe58d095745b"
@@ -2510,6 +2871,16 @@
     jest-haste-map "^27.5.1"
     jest-runtime "^27.5.1"
 
+"@jest/test-sequencer@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-28.1.3.tgz#9d0c283d906ac599c74bde464bc0d7e6a82886c3"
+  integrity sha512-NIMPEqqa59MWnDi1kvXXpYbqsfQmSJsIbnd85mdVGkiDfQ9WQQTXOLsvISUfonmnBT+w85WEgneCigEEdHDFxw==
+  dependencies:
+    "@jest/test-result" "^28.1.3"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^28.1.3"
+    slash "^3.0.0"
+
 "@jest/transform@^26.6.2":
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-26.6.2.tgz#5ac57c5fa1ad17b2aae83e73e45813894dcf2e4b"
@@ -2552,6 +2923,27 @@
     source-map "^0.6.1"
     write-file-atomic "^3.0.0"
 
+"@jest/transform@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-28.1.3.tgz#59d8098e50ab07950e0f2fc0fc7ec462371281b0"
+  integrity sha512-u5dT5di+oFI6hfcLOHGTAfmUxFRrjK+vnaP0kkVow9Md/M7V/MxqQMOz/VV25UZO8pzeA9PjfTpOu6BDuwSPQA==
+  dependencies:
+    "@babel/core" "^7.11.6"
+    "@jest/types" "^28.1.3"
+    "@jridgewell/trace-mapping" "^0.3.13"
+    babel-plugin-istanbul "^6.1.1"
+    chalk "^4.0.0"
+    convert-source-map "^1.4.0"
+    fast-json-stable-stringify "^2.0.0"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^28.1.3"
+    jest-regex-util "^28.0.2"
+    jest-util "^28.1.3"
+    micromatch "^4.0.4"
+    pirates "^4.0.4"
+    slash "^3.0.0"
+    write-file-atomic "^4.0.1"
+
 "@jest/types@^26.6.2":
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/@jest/types/-/types-26.6.2.tgz#bef5a532030e1d88a2f5a6d933f84e97226ed48e"
@@ -2574,11 +2966,37 @@
     "@types/yargs" "^16.0.0"
     chalk "^4.0.0"
 
+"@jest/types@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-28.1.3.tgz#b05de80996ff12512bc5ceb1d208285a7d11748b"
+  integrity sha512-RyjiyMUZrKz/c+zlMFO1pm70DcIlST8AeWTkoUdZevew44wcNZQHsEVOiCVtgVnlFFD82FPaXycys58cf2muVQ==
+  dependencies:
+    "@jest/schemas" "^28.1.3"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^3.0.0"
+    "@types/node" "*"
+    "@types/yargs" "^17.0.8"
+    chalk "^4.0.0"
+
+"@jridgewell/gen-mapping@^0.3.2":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz#c1aedc61e853f2bb9f5dfe6d4442d3b565b253b9"
+  integrity sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==
+  dependencies:
+    "@jridgewell/set-array" "^1.0.1"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+    "@jridgewell/trace-mapping" "^0.3.9"
+
 "@jridgewell/resolve-uri@^3.0.3":
   version "3.0.5"
   resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.0.5.tgz#68eb521368db76d040a6315cdb24bf2483037b9c"
   integrity sha512-VPeQ7+wH0itvQxnG+lIzWgkysKIr3L9sslimFW55rHMdGu/qCQ5z5h9zq4gI8uBtqkpHhsF4Z/OwExufUCThew==
 
+"@jridgewell/set-array@^1.0.1":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.2.tgz#7c6cf998d6d20b914c0a55a91ae928ff25965e72"
+  integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==
+
 "@jridgewell/sourcemap-codec@^1.4.10":
   version "1.4.11"
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.11.tgz#771a1d8d744eeb71b6adb35808e1a6c7b9b8c8ec"
@@ -2592,6 +3010,14 @@
     "@jridgewell/resolve-uri" "^3.0.3"
     "@jridgewell/sourcemap-codec" "^1.4.10"
 
+"@jridgewell/trace-mapping@^0.3.12", "@jridgewell/trace-mapping@^0.3.13", "@jridgewell/trace-mapping@^0.3.9":
+  version "0.3.14"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.14.tgz#b231a081d8f66796e475ad588a1ef473112701ed"
+  integrity sha512-bJWEfQ9lPTvm3SneWwRFVLzrh6nhjwqw7TUFFBEMzwvg7t7PCDenf2lDwqo4NQXzdpgBXyFgDWnQA+2vkruksQ==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.0.3"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+
 "@mdx-js/loader@^1.6.22":
   version "1.6.22"
   resolved "https://registry.yarnpkg.com/@mdx-js/loader/-/loader-1.6.22.tgz#d9e8fe7f8185ff13c9c8639c048b123e30d322c4"
@@ -4411,9 +4837,9 @@
     "@design-sdk/figma-url" "^0.0.4"
 
 "@reflect-ui/core@0.0.2-rc.7":
-  version "0.0.2-rc.7"
-  resolved "https://registry.yarnpkg.com/@reflect-ui/core/-/core-0.0.2-rc.7.tgz#9d531f5a0b9caab31e7563020044b753700e2bbc"
-  integrity sha512-EqF4SRU57bfa5DOPET1rv5lROFyMVHLv1xTEIlN6N2gDpXt71QceImWfQp3z3Khqnb4R/p9OhNK6DXGUpozWKw==
+  version "0.0.3"
+  dependencies:
+    "@reflect-ui/uiutils" "^0.1.2-1"
 
 "@reflect-ui/namings@0.0.3":
   version "0.0.3"
@@ -4430,6 +4856,11 @@
   resolved "https://registry.yarnpkg.com/@reflect-ui/uiutils/-/uiutils-0.1.2-2.tgz#56b80dd920be63d424cbb0478223e50acb95a50d"
   integrity sha512-PGmoG2zP34P8+JeXawY4kogmaGeP0kaWnHsOxxbl+p2v1TeD8ORR9VW9boNn0knldJb9+63W6v5lpB1N4icwnA==
 
+"@sinclair/typebox@^0.24.1":
+  version "0.24.20"
+  resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.24.20.tgz#11a657875de6008622d53f56e063a6347c51a6dd"
+  integrity sha512-kVaO5aEFZb33nPMTZBxiPEkY+slxiPtqC7QX8f9B3eGOMBvEfuMfxp9DSTTCsRJPumPKjrge4yagyssO4q6qzQ==
+
 "@sinonjs/commons@^1.7.0":
   version "1.8.3"
   resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.3.tgz#3802ddd21a50a949b6721ddd72da36e67e7f1b2d"
@@ -4444,6 +4875,13 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
+"@sinonjs/fake-timers@^9.1.2":
+  version "9.1.2"
+  resolved "https://registry.yarnpkg.com/@sinonjs/fake-timers/-/fake-timers-9.1.2.tgz#4eaab737fab77332ab132d396a3c0d364bd0ea8c"
+  integrity sha512-BPS4ynJW/o92PUR4wgriz2Ud5gpST5vz6GQfMixEDK0Z8ZCUv2M7SkBLykH56T++Xs+8ln9zTGbOvNGIe02/jw==
+  dependencies:
+    "@sinonjs/commons" "^1.7.0"
+
 "@stitches/react@1.2.6":
   version "1.2.6"
   resolved "https://registry.yarnpkg.com/@stitches/react/-/react-1.2.6.tgz#61f2a3d1110334ecd33bcb7463650127d42470cb"
@@ -5510,7 +5948,7 @@
     "@types/minimatch" "*"
     "@types/node" "*"
 
-"@types/graceful-fs@^4.1.2":
+"@types/graceful-fs@^4.1.2", "@types/graceful-fs@^4.1.3":
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/@types/graceful-fs/-/graceful-fs-4.1.5.tgz#21ffba0d98da4350db64891f92a9e5db3cdb4e15"
   integrity sha512-anKkLmZZ+xm4p8JWBf4hElkM4XR+EZeA2M9BAkkTldmcyDY4mbdIJnRghDJH3Ov5ooY7/UAoENtmdMSkaAd7Cw==
@@ -5576,6 +6014,14 @@
     jest-diff "^26.0.0"
     pretty-format "^26.0.0"
 
+"@types/jest@^28.1.6":
+  version "28.1.6"
+  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-28.1.6.tgz#d6a9cdd38967d2d746861fb5be6b120e38284dd4"
+  integrity sha512-0RbGAFMfcBJKOmqRazM8L98uokwuwD5F8rHrv/ZMbrZBwVOWZUyPG6VFNscjYr/vjM3Vu4fRrCPbOs42AfemaQ==
+  dependencies:
+    jest-matcher-utils "^28.0.0"
+    pretty-format "^28.0.0"
+
 "@types/json-schema@7.0.9":
   version "7.0.9"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.9.tgz#97edc9037ea0c38585320b28964dde3b39e4660d"
@@ -5651,6 +6097,11 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-16.11.26.tgz#63d204d136c9916fb4dcd1b50f9740fe86884e47"
   integrity sha512-GZ7bu5A6+4DtG7q9GsoHXy3ALcgeIHP4NnL0Vv2wu0uUB/yQex26v0tf6/na1mm0+bS9Uw+0DFex7aaKr2qawQ==
 
+"@types/node@^18.0.6":
+  version "18.0.6"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.0.6.tgz#0ba49ac517ad69abe7a1508bc9b3a5483df9d5d7"
+  integrity sha512-/xUq6H2aQm261exT6iZTMifUySEt4GR5KX8eYyY+C4MSNPqSh9oNIP7tz2GLKTlFaiBbgZNxffoR3CVRG+cljw==
+
 "@types/normalize-package-data@^2.4.0":
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301"
@@ -5890,6 +6341,13 @@
   dependencies:
     "@types/yargs-parser" "*"
 
+"@types/yargs@^17.0.8":
+  version "17.0.10"
+  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-17.0.10.tgz#591522fce85d8739bca7b8bb90d048e4478d186a"
+  integrity sha512-gmEaFwpj/7f/ROdtIlci1R1VYU1J4j95m8T+Tj3iBgiBFKg1foE/PSl93bBd5T9LDXNPo8UlNN6W0qwD8O5OaA==
+  dependencies:
+    "@types/yargs-parser" "*"
+
 "@use-gesture/core@10.2.11":
   version "10.2.11"
   resolved "https://registry.yarnpkg.com/@use-gesture/core/-/core-10.2.11.tgz#914c36f190bcf452500d11a11fc294fe56e5dc2f"
@@ -6660,6 +7118,19 @@ babel-jest@^27.5.1:
     graceful-fs "^4.2.9"
     slash "^3.0.0"
 
+babel-jest@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-28.1.3.tgz#c1187258197c099072156a0a121c11ee1e3917d5"
+  integrity sha512-epUaPOEWMk3cWX0M/sPvCHHCe9fMFAa/9hXEgKP8nFfNl/jlGkE9ucq9NqkZGXLDduCJYS0UvSlPUwC0S+rH6Q==
+  dependencies:
+    "@jest/transform" "^28.1.3"
+    "@types/babel__core" "^7.1.14"
+    babel-plugin-istanbul "^6.1.1"
+    babel-preset-jest "^28.1.3"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.9"
+    slash "^3.0.0"
+
 babel-loader@^8.0.0, babel-loader@^8.2.3:
   version "8.2.4"
   resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.2.4.tgz#95f5023c791b2e9e2ca6f67b0984f39c82ff384b"
@@ -6734,6 +7205,16 @@ babel-plugin-jest-hoist@^27.5.1:
     "@types/babel__core" "^7.0.0"
     "@types/babel__traverse" "^7.0.6"
 
+babel-plugin-jest-hoist@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-28.1.3.tgz#1952c4d0ea50f2d6d794353762278d1d8cca3fbe"
+  integrity sha512-Ys3tUKAmfnkRUpPdpa98eYrAR0nV+sSFUZZEGuQ2EbFd1y4SOLtD5QDNHAq+bb9a+bbXvYQC4b+ID/THIMcU6Q==
+  dependencies:
+    "@babel/template" "^7.3.3"
+    "@babel/types" "^7.3.3"
+    "@types/babel__core" "^7.1.14"
+    "@types/babel__traverse" "^7.0.6"
+
 babel-plugin-macros@^2.0.0, babel-plugin-macros@^2.6.1, babel-plugin-macros@^2.8.0:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138"
@@ -6840,6 +7321,14 @@ babel-preset-jest@^27.5.1:
     babel-plugin-jest-hoist "^27.5.1"
     babel-preset-current-node-syntax "^1.0.0"
 
+babel-preset-jest@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-28.1.3.tgz#5dfc20b99abed5db994406c2b9ab94c73aaa419d"
+  integrity sha512-L+fupJvlWAHbQfn74coNX3zf60LXMJsezNvvx8eIh7iOR1luJ1poxYgQk1F8PYtNq/6QODDHCqsSnTFSWC491A==
+  dependencies:
+    babel-plugin-jest-hoist "^28.1.3"
+    babel-preset-current-node-syntax "^1.0.0"
+
 bail@^1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/bail/-/bail-1.0.5.tgz#b6fa133404a392cbc1f8c4bf63f5953351e7a776"
@@ -7140,6 +7629,16 @@ browserslist@^4.12.0, browserslist@^4.17.5, browserslist@^4.19.1:
     node-releases "^2.0.2"
     picocolors "^1.0.0"
 
+browserslist@^4.20.2:
+  version "4.21.2"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.2.tgz#59a400757465535954946a400b841ed37e2b4ecf"
+  integrity sha512-MonuOgAtUB46uP5CezYbRaYKBNt2LxP0yX+Pmj4LkcDFGkn9Cbpi83d9sCjwQDErXsIJSzY5oKGDbgOlF/LPAA==
+  dependencies:
+    caniuse-lite "^1.0.30001366"
+    electron-to-chromium "^1.4.188"
+    node-releases "^2.0.6"
+    update-browserslist-db "^1.0.4"
+
 bs-logger@0.x:
   version "0.2.6"
   resolved "https://registry.yarnpkg.com/bs-logger/-/bs-logger-0.2.6.tgz#eb7d365307a72cf974cc6cda76b68354ad336bd8"
@@ -7407,6 +7906,11 @@ caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001283, caniuse-lite@^1.0.300013
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001325.tgz#2b4ad19b77aa36f61f2eaf72e636d7481d55e606"
   integrity sha512-sB1bZHjseSjDtijV1Hb7PB2Zd58Kyx+n/9EotvZ4Qcz2K3d0lWB8dB4nb8wN/TsOGFq3UuAm0zQZNQ4SoR7TrQ==
 
+caniuse-lite@^1.0.30001366:
+  version "1.0.30001369"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001369.tgz#58ca6974acf839a72a02003258a005cbb0cb340d"
+  integrity sha512-OY1SBHaodJc4wflDIKnlkdqWzJZd1Ls/2zbVJHBSv3AT7vgOJ58yAhd2CN4d57l2kPJrgMb7P9+N1Mhy4tNSQA==
+
 capture-exit@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"
@@ -8291,15 +8795,10 @@ cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
-csstype@^2.5.7:
-  version "2.6.20"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.20.tgz#9229c65ea0b260cf4d3d997cb06288e36a8d6dda"
-  integrity sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==
-
-csstype@^3.0.10, csstype@^3.0.11, csstype@^3.0.2, csstype@^3.0.4, csstype@^3.0.8:
-  version "3.0.11"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.11.tgz#d66700c5eacfac1940deb4e3ee5642792d85cd33"
-  integrity sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==
+csstype@3.1.0, csstype@^2.5.7, csstype@^3.0.10, csstype@^3.0.11, csstype@^3.0.2, csstype@^3.0.4, csstype@^3.0.8:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.0.tgz#4ddcac3718d787cf9df0d1b7d15033925c8f29f2"
+  integrity sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==
 
 cuid@^2.1.8:
   version "2.1.8"
@@ -8632,6 +9131,11 @@ diff-sequences@^27.5.1:
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-27.5.1.tgz#eaecc0d327fd68c8d9672a1e64ab8dccb2ef5327"
   integrity sha512-k1gCAXAsNgLwEL+Y8Wvl+M6oEFj5bgazfZULpS5CneoPPXRaCCW7dm+q21Ky2VEE5X+VeRDBVg1Pcvvsr4TtNQ==
 
+diff-sequences@^28.1.1:
+  version "28.1.1"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-28.1.1.tgz#9989dc731266dc2903457a70e996f3a041913ac6"
+  integrity sha512-FU0iFaH/E23a+a718l8Qa/19bF9p06kgE0KipMOMadwa3SjnaElKzPaUC0vnibs6/B/9ni97s61mcejk8W1fQw==
+
 diff@^4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/diff/-/diff-4.0.2.tgz#60f3aecb89d5fae520c11aa19efc2bb982aade7d"
@@ -8803,6 +9307,11 @@ ee-first@1.1.1:
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
   integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
 
+electron-to-chromium@^1.4.188:
+  version "1.4.199"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.199.tgz#e0384fde79fdda89880e8be58196a9153e04db3b"
+  integrity sha512-WIGME0Cs7oob3mxsJwHbeWkH0tYkIE/sjkJ8ML2BYmuRcjhRl/q5kVDXG7W9LOOKwzPU5M0LBlXRq9rlSgnNlg==
+
 electron-to-chromium@^1.4.84:
   version "1.4.103"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.103.tgz#abfe376a4d70fa1e1b4b353b95df5d6dfd05da3a"
@@ -8828,6 +9337,11 @@ elliptic@^6.5.3:
     minimalistic-assert "^1.0.1"
     minimalistic-crypto-utils "^1.0.1"
 
+emittery@^0.10.2:
+  version "0.10.2"
+  resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.10.2.tgz#902eec8aedb8c41938c46e9385e9db7e03182933"
+  integrity sha512-aITqOwnLanpHLNXZJENbOgjUBeHocD+xsSJmNrjovKBW5HbSpW3d1pEls7GFQPUWXiwG9+0P4GtHfEqC/4M0Iw==
+
 emittery@^0.8.1:
   version "0.8.1"
   resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.8.1.tgz#bb23cc86d03b30aa75a7f734819dee2e1ba70860"
@@ -9285,6 +9799,17 @@ expect@^27.5.1:
     jest-matcher-utils "^27.5.1"
     jest-message-util "^27.5.1"
 
+expect@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/expect/-/expect-28.1.3.tgz#90a7c1a124f1824133dd4533cce2d2bdcb6603ec"
+  integrity sha512-eEh0xn8HlsuOBxFgIss+2mX85VAS4Qy3OSkjV7rlBWljtA4oWH37glVGyOZSZvErDT/yBywZdPGwCXuTvSG85g==
+  dependencies:
+    "@jest/expect-utils" "^28.1.3"
+    jest-get-type "^28.0.2"
+    jest-matcher-utils "^28.1.3"
+    jest-message-util "^28.1.3"
+    jest-util "^28.1.3"
+
 express@4.17.1:
   version "4.17.1"
   resolved "https://registry.yarnpkg.com/express/-/express-4.17.1.tgz#4491fc38605cf51f8629d39c2b5d026f98a4c134"
@@ -11457,6 +11982,14 @@ jest-changed-files@^27.5.1:
     execa "^5.0.0"
     throat "^6.0.1"
 
+jest-changed-files@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-28.1.3.tgz#d9aeee6792be3686c47cb988a8eaf82ff4238831"
+  integrity sha512-esaOfUWJXk2nfZt9SPyC8gA1kNfdKLkQWyzsMlqq8msYSlNKfmZxfRgZn4Cd4MGVUF+7v6dBs0d5TOAKa7iIiA==
+  dependencies:
+    execa "^5.0.0"
+    p-limit "^3.1.0"
+
 jest-circus@^27.5.1:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/jest-circus/-/jest-circus-27.5.1.tgz#37a5a4459b7bf4406e53d637b49d22c65d125ecc"
@@ -11482,6 +12015,31 @@ jest-circus@^27.5.1:
     stack-utils "^2.0.3"
     throat "^6.0.1"
 
+jest-circus@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-circus/-/jest-circus-28.1.3.tgz#d14bd11cf8ee1a03d69902dc47b6bd4634ee00e4"
+  integrity sha512-cZ+eS5zc79MBwt+IhQhiEp0OeBddpc1n8MBo1nMB8A7oPMKEO+Sre+wHaLJexQUj9Ya/8NOBY0RESUgYjB6fow==
+  dependencies:
+    "@jest/environment" "^28.1.3"
+    "@jest/expect" "^28.1.3"
+    "@jest/test-result" "^28.1.3"
+    "@jest/types" "^28.1.3"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    co "^4.6.0"
+    dedent "^0.7.0"
+    is-generator-fn "^2.0.0"
+    jest-each "^28.1.3"
+    jest-matcher-utils "^28.1.3"
+    jest-message-util "^28.1.3"
+    jest-runtime "^28.1.3"
+    jest-snapshot "^28.1.3"
+    jest-util "^28.1.3"
+    p-limit "^3.1.0"
+    pretty-format "^28.1.3"
+    slash "^3.0.0"
+    stack-utils "^2.0.3"
+
 jest-cli@^27.5.1:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-27.5.1.tgz#278794a6e6458ea8029547e6c6cbf673bd30b145"
@@ -11500,6 +12058,24 @@ jest-cli@^27.5.1:
     prompts "^2.0.1"
     yargs "^16.2.0"
 
+jest-cli@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-28.1.3.tgz#558b33c577d06de55087b8448d373b9f654e46b2"
+  integrity sha512-roY3kvrv57Azn1yPgdTebPAXvdR2xfezaKKYzVxZ6It/5NCxzJym6tUI5P1zkdWhfUYkxEI9uZWcQdaFLo8mJQ==
+  dependencies:
+    "@jest/core" "^28.1.3"
+    "@jest/test-result" "^28.1.3"
+    "@jest/types" "^28.1.3"
+    chalk "^4.0.0"
+    exit "^0.1.2"
+    graceful-fs "^4.2.9"
+    import-local "^3.0.2"
+    jest-config "^28.1.3"
+    jest-util "^28.1.3"
+    jest-validate "^28.1.3"
+    prompts "^2.0.1"
+    yargs "^17.3.1"
+
 jest-config@^27.5.1:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-27.5.1.tgz#5c387de33dca3f99ad6357ddeccd91bf3a0e4a41"
@@ -11530,6 +12106,34 @@ jest-config@^27.5.1:
     slash "^3.0.0"
     strip-json-comments "^3.1.1"
 
+jest-config@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-28.1.3.tgz#e315e1f73df3cac31447eed8b8740a477392ec60"
+  integrity sha512-MG3INjByJ0J4AsNBm7T3hsuxKQqFIiRo/AUqb1q9LRKI5UU6Aar9JHbr9Ivn1TVwfUD9KirRoM/T6u8XlcQPHQ==
+  dependencies:
+    "@babel/core" "^7.11.6"
+    "@jest/test-sequencer" "^28.1.3"
+    "@jest/types" "^28.1.3"
+    babel-jest "^28.1.3"
+    chalk "^4.0.0"
+    ci-info "^3.2.0"
+    deepmerge "^4.2.2"
+    glob "^7.1.3"
+    graceful-fs "^4.2.9"
+    jest-circus "^28.1.3"
+    jest-environment-node "^28.1.3"
+    jest-get-type "^28.0.2"
+    jest-regex-util "^28.0.2"
+    jest-resolve "^28.1.3"
+    jest-runner "^28.1.3"
+    jest-util "^28.1.3"
+    jest-validate "^28.1.3"
+    micromatch "^4.0.4"
+    parse-json "^5.2.0"
+    pretty-format "^28.1.3"
+    slash "^3.0.0"
+    strip-json-comments "^3.1.1"
+
 jest-diff@^26.0.0:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-26.6.2.tgz#1aa7468b52c3a68d7d5c5fdcdfcd5e49bd164394"
@@ -11550,6 +12154,16 @@ jest-diff@^27.5.1:
     jest-get-type "^27.5.1"
     pretty-format "^27.5.1"
 
+jest-diff@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-28.1.3.tgz#948a192d86f4e7a64c5264ad4da4877133d8792f"
+  integrity sha512-8RqP1B/OXzjjTWkqMX67iqgwBVJRgCyKD3L9nq+6ZqJMdvjE8RgHktqZ6jNrkdMT+dJuYNI3rhQpxaz7drJHfw==
+  dependencies:
+    chalk "^4.0.0"
+    diff-sequences "^28.1.1"
+    jest-get-type "^28.0.2"
+    pretty-format "^28.1.3"
+
 jest-docblock@^27.5.1:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-27.5.1.tgz#14092f364a42c6108d42c33c8cf30e058e25f6c0"
@@ -11557,6 +12171,13 @@ jest-docblock@^27.5.1:
   dependencies:
     detect-newline "^3.0.0"
 
+jest-docblock@^28.1.1:
+  version "28.1.1"
+  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-28.1.1.tgz#6f515c3bf841516d82ecd57a62eed9204c2f42a8"
+  integrity sha512-3wayBVNiOYx0cwAbl9rwm5kKFP8yHH3d/fkEaL02NPTkDojPtheGB7HZSFY4wzX+DxyrvhXz0KSCVksmCknCuA==
+  dependencies:
+    detect-newline "^3.0.0"
+
 jest-each@^27.5.1:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-27.5.1.tgz#5bc87016f45ed9507fed6e4702a5b468a5b2c44e"
@@ -11568,6 +12189,17 @@ jest-each@^27.5.1:
     jest-util "^27.5.1"
     pretty-format "^27.5.1"
 
+jest-each@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-28.1.3.tgz#bdd1516edbe2b1f3569cfdad9acd543040028f81"
+  integrity sha512-arT1z4sg2yABU5uogObVPvSlSMQlDA48owx07BDPAiasW0yYpYHYOo4HHLz9q0BVzDVU4hILFjzJw0So9aCL/g==
+  dependencies:
+    "@jest/types" "^28.1.3"
+    chalk "^4.0.0"
+    jest-get-type "^28.0.2"
+    jest-util "^28.1.3"
+    pretty-format "^28.1.3"
+
 jest-environment-jsdom@^27.5.1:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-27.5.1.tgz#ea9ccd1fc610209655a77898f86b2b559516a546"
@@ -11593,6 +12225,18 @@ jest-environment-node@^27.5.1:
     jest-mock "^27.5.1"
     jest-util "^27.5.1"
 
+jest-environment-node@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-28.1.3.tgz#7e74fe40eb645b9d56c0c4b70ca4357faa349be5"
+  integrity sha512-ugP6XOhEpjAEhGYvp5Xj989ns5cB1K6ZdjBYuS30umT4CQEETaxSiPcZ/E1kFktX4GkrcM4qu07IIlDYX1gp+A==
+  dependencies:
+    "@jest/environment" "^28.1.3"
+    "@jest/fake-timers" "^28.1.3"
+    "@jest/types" "^28.1.3"
+    "@types/node" "*"
+    jest-mock "^28.1.3"
+    jest-util "^28.1.3"
+
 jest-get-type@^26.3.0:
   version "26.3.0"
   resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-26.3.0.tgz#e97dc3c3f53c2b406ca7afaed4493b1d099199e0"
@@ -11603,6 +12247,11 @@ jest-get-type@^27.5.1:
   resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-27.5.1.tgz#3cd613c507b0f7ace013df407a1c1cd578bcb4f1"
   integrity sha512-2KY95ksYSaK7DMBWQn6dQz3kqAf3BB64y2udeG+hv4KfSOb9qwcYQstTJc1KCbsix+wLZWZYN8t7nwX3GOBLRw==
 
+jest-get-type@^28.0.2:
+  version "28.0.2"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-28.0.2.tgz#34622e628e4fdcd793d46db8a242227901fcf203"
+  integrity sha512-ioj2w9/DxSYHfOm5lJKCdcAmPJzQXmbM/Url3rhlghrPvT3tt+7a/+oXc9azkKmLvoiXjtV83bEWqi+vs5nlPA==
+
 jest-haste-map@^26.6.2:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-26.6.2.tgz#dd7e60fe7dc0e9f911a23d79c5ff7fb5c2cafeaa"
@@ -11644,6 +12293,25 @@ jest-haste-map@^27.5.1:
   optionalDependencies:
     fsevents "^2.3.2"
 
+jest-haste-map@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-28.1.3.tgz#abd5451129a38d9841049644f34b034308944e2b"
+  integrity sha512-3S+RQWDXccXDKSWnkHa/dPwt+2qwA8CJzR61w3FoYCvoo3Pn8tvGcysmMF0Bj0EX5RYvAI2EIvC57OmotfdtKA==
+  dependencies:
+    "@jest/types" "^28.1.3"
+    "@types/graceful-fs" "^4.1.3"
+    "@types/node" "*"
+    anymatch "^3.0.3"
+    fb-watchman "^2.0.0"
+    graceful-fs "^4.2.9"
+    jest-regex-util "^28.0.2"
+    jest-util "^28.1.3"
+    jest-worker "^28.1.3"
+    micromatch "^4.0.4"
+    walker "^1.0.8"
+  optionalDependencies:
+    fsevents "^2.3.2"
+
 jest-jasmine2@^27.5.1:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-27.5.1.tgz#a037b0034ef49a9f3d71c4375a796f3b230d1ac4"
@@ -11675,6 +12343,14 @@ jest-leak-detector@^27.5.1:
     jest-get-type "^27.5.1"
     pretty-format "^27.5.1"
 
+jest-leak-detector@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-28.1.3.tgz#a6685d9b074be99e3adee816ce84fd30795e654d"
+  integrity sha512-WFVJhnQsiKtDEo5lG2mM0v40QWnBM+zMdHHyJs8AWZ7J0QZJS59MsyKeJHWhpBZBH32S48FOVvGyOFT1h0DlqA==
+  dependencies:
+    jest-get-type "^28.0.2"
+    pretty-format "^28.1.3"
+
 jest-matcher-utils@^27.0.0, jest-matcher-utils@^27.5.1:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-27.5.1.tgz#9c0cdbda8245bc22d2331729d1091308b40cf8ab"
@@ -11685,6 +12361,16 @@ jest-matcher-utils@^27.0.0, jest-matcher-utils@^27.5.1:
     jest-get-type "^27.5.1"
     pretty-format "^27.5.1"
 
+jest-matcher-utils@^28.0.0, jest-matcher-utils@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-28.1.3.tgz#5a77f1c129dd5ba3b4d7fc20728806c78893146e"
+  integrity sha512-kQeJ7qHemKfbzKoGjHHrRKH6atgxMk8Enkk2iPQ3XwO6oE/KYD8lMYOziCkeSB9G4adPM4nR1DE8Tf5JeWH6Bw==
+  dependencies:
+    chalk "^4.0.0"
+    jest-diff "^28.1.3"
+    jest-get-type "^28.0.2"
+    pretty-format "^28.1.3"
+
 jest-message-util@^27.5.1:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-27.5.1.tgz#bdda72806da10d9ed6425e12afff38cd1458b6cf"
@@ -11700,6 +12386,21 @@ jest-message-util@^27.5.1:
     slash "^3.0.0"
     stack-utils "^2.0.3"
 
+jest-message-util@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-28.1.3.tgz#232def7f2e333f1eecc90649b5b94b0055e7c43d"
+  integrity sha512-PFdn9Iewbt575zKPf1286Ht9EPoJmYT7P0kY+RibeYZ2XtOr53pDLEFoTWXbd1h4JiGiWpTBC84fc8xMXQMb7g==
+  dependencies:
+    "@babel/code-frame" "^7.12.13"
+    "@jest/types" "^28.1.3"
+    "@types/stack-utils" "^2.0.0"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.9"
+    micromatch "^4.0.4"
+    pretty-format "^28.1.3"
+    slash "^3.0.0"
+    stack-utils "^2.0.3"
+
 jest-mock@^27.5.1:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-27.5.1.tgz#19948336d49ef4d9c52021d34ac7b5f36ff967d6"
@@ -11708,6 +12409,14 @@ jest-mock@^27.5.1:
     "@jest/types" "^27.5.1"
     "@types/node" "*"
 
+jest-mock@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-28.1.3.tgz#d4e9b1fc838bea595c77ab73672ebf513ab249da"
+  integrity sha512-o3J2jr6dMMWYVH4Lh/NKmDXdosrsJgi4AviS8oXLujcjpCMBb1FMsblDnOXKZKfSiHLxYub1eS0IHuRXsio9eA==
+  dependencies:
+    "@jest/types" "^28.1.3"
+    "@types/node" "*"
+
 jest-pnp-resolver@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz#b704ac0ae028a89108a4d040b3f919dfddc8e33c"
@@ -11723,6 +12432,11 @@ jest-regex-util@^27.5.1:
   resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-27.5.1.tgz#4da143f7e9fd1e542d4aa69617b38e4a78365b95"
   integrity sha512-4bfKq2zie+x16okqDXjXn9ql2B0dScQu+vcwe4TvFVhkVyuWLqpZrZtXxLLWoXYgn0E87I6r6GRYHF7wFZBUvg==
 
+jest-regex-util@^28.0.2:
+  version "28.0.2"
+  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-28.0.2.tgz#afdc377a3b25fb6e80825adcf76c854e5bf47ead"
+  integrity sha512-4s0IgyNIy0y9FK+cjoVYoxamT7Zeo7MhzqRGx7YDYmaQn1wucY9rotiGkBzzcMXTtjrCAP/f7f+E0F7+fxPNdw==
+
 jest-resolve-dependencies@^27.5.1:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-27.5.1.tgz#d811ecc8305e731cc86dd79741ee98fed06f1da8"
@@ -11732,6 +12446,14 @@ jest-resolve-dependencies@^27.5.1:
     jest-regex-util "^27.5.1"
     jest-snapshot "^27.5.1"
 
+jest-resolve-dependencies@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-28.1.3.tgz#8c65d7583460df7275c6ea2791901fa975c1fe66"
+  integrity sha512-qa0QO2Q0XzQoNPouMbCc7Bvtsem8eQgVPNkwn9LnS+R2n8DaVDPL/U1gngC0LTl1RYXJU0uJa2BMC2DbTfFrHA==
+  dependencies:
+    jest-regex-util "^28.0.2"
+    jest-snapshot "^28.1.3"
+
 jest-resolve@^27.5.1:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-27.5.1.tgz#a2f1c5a0796ec18fe9eb1536ac3814c23617b384"
@@ -11748,6 +12470,21 @@ jest-resolve@^27.5.1:
     resolve.exports "^1.1.0"
     slash "^3.0.0"
 
+jest-resolve@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-28.1.3.tgz#cfb36100341ddbb061ec781426b3c31eb51aa0a8"
+  integrity sha512-Z1W3tTjE6QaNI90qo/BJpfnvpxtaFTFw5CDgwpyE/Kz8U/06N1Hjf4ia9quUhCh39qIGWF1ZuxFiBiJQwSEYKQ==
+  dependencies:
+    chalk "^4.0.0"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^28.1.3"
+    jest-pnp-resolver "^1.2.2"
+    jest-util "^28.1.3"
+    jest-validate "^28.1.3"
+    resolve "^1.20.0"
+    resolve.exports "^1.1.0"
+    slash "^3.0.0"
+
 jest-runner@^27.5.1:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-27.5.1.tgz#071b27c1fa30d90540805c5645a0ec167c7b62e5"
@@ -11775,6 +12512,33 @@ jest-runner@^27.5.1:
     source-map-support "^0.5.6"
     throat "^6.0.1"
 
+jest-runner@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-28.1.3.tgz#5eee25febd730b4713a2cdfd76bdd5557840f9a1"
+  integrity sha512-GkMw4D/0USd62OVO0oEgjn23TM+YJa2U2Wu5zz9xsQB1MxWKDOlrnykPxnMsN0tnJllfLPinHTka61u0QhaxBA==
+  dependencies:
+    "@jest/console" "^28.1.3"
+    "@jest/environment" "^28.1.3"
+    "@jest/test-result" "^28.1.3"
+    "@jest/transform" "^28.1.3"
+    "@jest/types" "^28.1.3"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    emittery "^0.10.2"
+    graceful-fs "^4.2.9"
+    jest-docblock "^28.1.1"
+    jest-environment-node "^28.1.3"
+    jest-haste-map "^28.1.3"
+    jest-leak-detector "^28.1.3"
+    jest-message-util "^28.1.3"
+    jest-resolve "^28.1.3"
+    jest-runtime "^28.1.3"
+    jest-util "^28.1.3"
+    jest-watcher "^28.1.3"
+    jest-worker "^28.1.3"
+    p-limit "^3.1.0"
+    source-map-support "0.5.13"
+
 jest-runtime@^27.5.1:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-27.5.1.tgz#4896003d7a334f7e8e4a53ba93fb9bcd3db0a1af"
@@ -11803,6 +12567,34 @@ jest-runtime@^27.5.1:
     slash "^3.0.0"
     strip-bom "^4.0.0"
 
+jest-runtime@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-28.1.3.tgz#a57643458235aa53e8ec7821949e728960d0605f"
+  integrity sha512-NU+881ScBQQLc1JHG5eJGU7Ui3kLKrmwCPPtYsJtBykixrM2OhVQlpMmFWJjMyDfdkGgBMNjXCGB/ebzsgNGQw==
+  dependencies:
+    "@jest/environment" "^28.1.3"
+    "@jest/fake-timers" "^28.1.3"
+    "@jest/globals" "^28.1.3"
+    "@jest/source-map" "^28.1.2"
+    "@jest/test-result" "^28.1.3"
+    "@jest/transform" "^28.1.3"
+    "@jest/types" "^28.1.3"
+    chalk "^4.0.0"
+    cjs-module-lexer "^1.0.0"
+    collect-v8-coverage "^1.0.0"
+    execa "^5.0.0"
+    glob "^7.1.3"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^28.1.3"
+    jest-message-util "^28.1.3"
+    jest-mock "^28.1.3"
+    jest-regex-util "^28.0.2"
+    jest-resolve "^28.1.3"
+    jest-snapshot "^28.1.3"
+    jest-util "^28.1.3"
+    slash "^3.0.0"
+    strip-bom "^4.0.0"
+
 jest-serializer@^26.6.2:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-26.6.2.tgz#d139aafd46957d3a448f3a6cdabe2919ba0742d1"
@@ -11847,6 +12639,35 @@ jest-snapshot@^27.5.1:
     pretty-format "^27.5.1"
     semver "^7.3.2"
 
+jest-snapshot@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-28.1.3.tgz#17467b3ab8ddb81e2f605db05583d69388fc0668"
+  integrity sha512-4lzMgtiNlc3DU/8lZfmqxN3AYD6GGLbl+72rdBpXvcV+whX7mDrREzkPdp2RnmfIiWBg1YbuFSkXduF2JcafJg==
+  dependencies:
+    "@babel/core" "^7.11.6"
+    "@babel/generator" "^7.7.2"
+    "@babel/plugin-syntax-typescript" "^7.7.2"
+    "@babel/traverse" "^7.7.2"
+    "@babel/types" "^7.3.3"
+    "@jest/expect-utils" "^28.1.3"
+    "@jest/transform" "^28.1.3"
+    "@jest/types" "^28.1.3"
+    "@types/babel__traverse" "^7.0.6"
+    "@types/prettier" "^2.1.5"
+    babel-preset-current-node-syntax "^1.0.0"
+    chalk "^4.0.0"
+    expect "^28.1.3"
+    graceful-fs "^4.2.9"
+    jest-diff "^28.1.3"
+    jest-get-type "^28.0.2"
+    jest-haste-map "^28.1.3"
+    jest-matcher-utils "^28.1.3"
+    jest-message-util "^28.1.3"
+    jest-util "^28.1.3"
+    natural-compare "^1.4.0"
+    pretty-format "^28.1.3"
+    semver "^7.3.5"
+
 jest-util@^26.6.2:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-26.6.2.tgz#907535dbe4d5a6cb4c47ac9b926f6af29576cbc1"
@@ -11871,6 +12692,18 @@ jest-util@^27.0.0, jest-util@^27.5.1:
     graceful-fs "^4.2.9"
     picomatch "^2.2.3"
 
+jest-util@^28.0.0, jest-util@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-28.1.3.tgz#f4f932aa0074f0679943220ff9cbba7e497028b0"
+  integrity sha512-XdqfpHwpcSRko/C35uLYFM2emRAltIIKZiJ9eAmhjsj0CqZMa0p1ib0R5fWIqGhn1a103DebTbpqIaP1qCQ6tQ==
+  dependencies:
+    "@jest/types" "^28.1.3"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    ci-info "^3.2.0"
+    graceful-fs "^4.2.9"
+    picomatch "^2.2.3"
+
 jest-validate@^27.5.1:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-27.5.1.tgz#9197d54dc0bdb52260b8db40b46ae668e04df067"
@@ -11883,6 +12716,18 @@ jest-validate@^27.5.1:
     leven "^3.1.0"
     pretty-format "^27.5.1"
 
+jest-validate@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-28.1.3.tgz#e322267fd5e7c64cea4629612c357bbda96229df"
+  integrity sha512-SZbOGBWEsaTxBGCOpsRWlXlvNkvTkY0XxRfh7zYmvd8uL5Qzyg0CHAXiXKROflh801quA6+/DsT4ODDthOC/OA==
+  dependencies:
+    "@jest/types" "^28.1.3"
+    camelcase "^6.2.0"
+    chalk "^4.0.0"
+    jest-get-type "^28.0.2"
+    leven "^3.1.0"
+    pretty-format "^28.1.3"
+
 jest-watcher@^27.5.1:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-27.5.1.tgz#71bd85fb9bde3a2c2ec4dc353437971c43c642a2"
@@ -11896,6 +12741,20 @@ jest-watcher@^27.5.1:
     jest-util "^27.5.1"
     string-length "^4.0.1"
 
+jest-watcher@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-28.1.3.tgz#c6023a59ba2255e3b4c57179fc94164b3e73abd4"
+  integrity sha512-t4qcqj9hze+jviFPUN3YAtAEeFnr/azITXQEMARf5cMwKY2SMBRnCQTXLixTl20OR6mLh9KLMrgVJgJISym+1g==
+  dependencies:
+    "@jest/test-result" "^28.1.3"
+    "@jest/types" "^28.1.3"
+    "@types/node" "*"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    emittery "^0.10.2"
+    jest-util "^28.1.3"
+    string-length "^4.0.1"
+
 jest-worker@^26.5.0, jest-worker@^26.6.2:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-26.6.2.tgz#7f72cbc4d643c365e27b9fd775f9d0eaa9c7a8ed"
@@ -11914,6 +12773,15 @@ jest-worker@^27.5.1:
     merge-stream "^2.0.0"
     supports-color "^8.0.0"
 
+jest-worker@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-28.1.3.tgz#7e3c4ce3fa23d1bb6accb169e7f396f98ed4bb98"
+  integrity sha512-CqRA220YV/6jCo8VWvAt1KKx6eek1VIHMPeLEbpcfSfkEeWyBNppynM/o6q+Wmw+sOhos2ml34wZbSX3G13//g==
+  dependencies:
+    "@types/node" "*"
+    merge-stream "^2.0.0"
+    supports-color "^8.0.0"
+
 jest@^27.0.3, jest@^27.0.4, jest@^27.0.6, jest@^27.1.0, jest@^27.2.0, jest@^27.2.4:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/jest/-/jest-27.5.1.tgz#dadf33ba70a779be7a6fc33015843b51494f63fc"
@@ -11923,6 +12791,16 @@ jest@^27.0.3, jest@^27.0.4, jest@^27.0.6, jest@^27.1.0, jest@^27.2.0, jest@^27.2
     import-local "^3.0.2"
     jest-cli "^27.5.1"
 
+jest@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest/-/jest-28.1.3.tgz#e9c6a7eecdebe3548ca2b18894a50f45b36dfc6b"
+  integrity sha512-N4GT5on8UkZgH0O5LUavMRV1EDEhNTL0KEfRmDIeZHSV7p2XgLoY9t9VDUgL6o+yfdgYHVxuz81G8oB9VG5uyA==
+  dependencies:
+    "@jest/core" "^28.1.3"
+    "@jest/types" "^28.1.3"
+    import-local "^3.0.2"
+    jest-cli "^28.1.3"
+
 js-string-escape@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/js-string-escape/-/js-string-escape-1.0.1.tgz#e2625badbc0d67c7533e9edc1068c587ae4137ef"
@@ -12004,7 +12882,7 @@ json-schema-traverse@^0.4.1:
   resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
   integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
 
-json5@2.x, json5@^2.1.2, json5@^2.1.3:
+json5@2.x, json5@^2.1.2, json5@^2.1.3, json5@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.1.tgz#655d50ed1e6f95ad1a3caababd2b0efda10b395c"
   integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==
@@ -13013,6 +13891,11 @@ node-releases@^2.0.2:
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.2.tgz#7139fe71e2f4f11b47d4d2986aaf8c48699e0c01"
   integrity sha512-XxYDdcQ6eKqp/YjI+tb2C5WM2LgjnZrfYg4vgQt49EK268b6gYCHsBLrK2qvJo4FmCtqmKezb0WZFK4fkrZNsg==
 
+node-releases@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.6.tgz#8a7088c63a55e493845683ebf3c828d8c51c5503"
+  integrity sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==
+
 normalize-package-data@^2.4.0, normalize-package-data@^2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
@@ -14198,6 +15081,16 @@ pretty-format@^27.0.0, pretty-format@^27.5.1:
     ansi-styles "^5.0.0"
     react-is "^17.0.1"
 
+pretty-format@^28.0.0, pretty-format@^28.1.3:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-28.1.3.tgz#c9fba8cedf99ce50963a11b27d982a9ae90970d5"
+  integrity sha512-8gFb/To0OmxHR9+ZTb14Df2vNxdGCX8g1xWGUTqUw5TiZvcQf5sHKObd5UcPyLLyowNwDAMTF3XWOG1B6mxl1Q==
+  dependencies:
+    "@jest/schemas" "^28.1.3"
+    ansi-regex "^5.0.1"
+    ansi-styles "^5.0.0"
+    react-is "^18.0.0"
+
 pretty-hrtime@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
@@ -14633,6 +15526,11 @@ react-is@^16.13.1, react-is@^16.7.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-is@^18.0.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
+  integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
+
 react-json-tree@^0.15.0:
   version "0.15.2"
   resolved "https://registry.yarnpkg.com/react-json-tree/-/react-json-tree-0.15.2.tgz#581f48bc8e925fc2d3802dd6c9075570666b358a"
@@ -15624,7 +16522,7 @@ side-channel@^1.0.4:
     get-intrinsic "^1.0.2"
     object-inspect "^1.9.0"
 
-signal-exit@^3.0.0, signal-exit@^3.0.2, signal-exit@^3.0.3:
+signal-exit@^3.0.0, signal-exit@^3.0.2, signal-exit@^3.0.3, signal-exit@^3.0.7:
   version "3.0.7"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
   integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
@@ -15731,6 +16629,14 @@ source-map-resolve@^0.6.0:
     atob "^2.1.2"
     decode-uri-component "^0.2.0"
 
+source-map-support@0.5.13:
+  version "0.5.13"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.13.tgz#31b24a9c2e73c2de85066c0feb7d44767ed52932"
+  integrity sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==
+  dependencies:
+    buffer-from "^1.0.0"
+    source-map "^0.6.0"
+
 source-map-support@^0.5.16, source-map-support@^0.5.17, source-map-support@^0.5.6, source-map-support@~0.5.12, source-map-support@~0.5.20:
   version "0.5.21"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.21.tgz#04fe7c7f9e1ed2d662233c28cb2b35b9f63f6e4f"
@@ -16498,6 +17404,20 @@ ts-jest@^27.0.2, ts-jest@^27.0.3, ts-jest@^27.0.5:
     semver "7.x"
     yargs-parser "20.x"
 
+ts-jest@^28.0.7:
+  version "28.0.7"
+  resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-28.0.7.tgz#e18757a9e44693da9980a79127e5df5a98b37ac6"
+  integrity sha512-wWXCSmTwBVmdvWrOpYhal79bDpioDy4rTT+0vyUnE3ZzM7LOAAGG9NXwzkEL/a516rQEgnMmS/WKP9jBPCVJyA==
+  dependencies:
+    bs-logger "0.x"
+    fast-json-stable-stringify "2.x"
+    jest-util "^28.0.0"
+    json5 "^2.2.1"
+    lodash.memoize "4.x"
+    make-error "1.x"
+    semver "7.x"
+    yargs-parser "^21.0.1"
+
 ts-node@^9.1.1:
   version "9.1.1"
   resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-9.1.1.tgz#51a9a450a3e959401bda5f004a72d54b936d376d"
@@ -16587,11 +17507,16 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@^4.0.5, typescript@^4.1.2, typescript@^4.2.3, typescript@^4.2.4, typescript@^4.3.2, typescript@^4.3.5, typescript@^4.4.2, typescript@^4.4.3, typescript@^4.4.4:
+typescript@^4.0.5, typescript@^4.2.3, typescript@^4.2.4, typescript@^4.3.2, typescript@^4.3.5, typescript@^4.4.2, typescript@^4.4.3, typescript@^4.4.4:
   version "4.6.3"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.6.3.tgz#eefeafa6afdd31d725584c67a0eaba80f6fc6c6c"
   integrity sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw==
 
+typescript@^4.7.4:
+  version "4.7.4"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.4.tgz#1a88596d1cf47d59507a1bcdfb5b9dfe4d488235"
+  integrity sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==
+
 uglify-js@^3.1.4:
   version "3.15.3"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.15.3.tgz#9aa82ca22419ba4c0137642ba0df800cb06e0471"
@@ -16793,6 +17718,14 @@ upath@^1.1.1:
   resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894"
   integrity sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==
 
+update-browserslist-db@^1.0.4:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.5.tgz#be06a5eedd62f107b7c19eb5bcefb194411abf38"
+  integrity sha512-dteFFpCyvuDdr9S/ff1ISkKt/9YZxKjI9WlRR99c180GaztJtRa/fn18FdxGVKVsnPY7/a/FDN68mcvUmP4U7Q==
+  dependencies:
+    escalade "^3.1.1"
+    picocolors "^1.0.0"
+
 update-notifier@^2.2.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-2.5.0.tgz#d0744593e13f161e406acb1d9408b72cad08aff6"
@@ -16953,6 +17886,15 @@ v8-to-istanbul@^8.0.0, v8-to-istanbul@^8.1.0:
     convert-source-map "^1.6.0"
     source-map "^0.7.3"
 
+v8-to-istanbul@^9.0.1:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-9.0.1.tgz#b6f994b0b5d4ef255e17a0d17dc444a9f5132fa4"
+  integrity sha512-74Y4LqY74kLE6IFyIjPtkSTWzUZmj8tdHT9Ii/26dvQ6K9Dl2NbEfj0XgU2sHCtKgt5VupqhlO/5aWuqS+IY1w==
+  dependencies:
+    "@jridgewell/trace-mapping" "^0.3.12"
+    "@types/istanbul-lib-coverage" "^2.0.1"
+    convert-source-map "^1.6.0"
+
 validate-npm-package-license@^3.0.1:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"
@@ -17025,7 +17967,7 @@ w3c-xmlserializer@^2.0.0:
   dependencies:
     xml-name-validator "^3.0.0"
 
-walker@^1.0.7, walker@~1.0.5:
+walker@^1.0.7, walker@^1.0.8, walker@~1.0.5:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.8.tgz#bd498db477afe573dc04185f011d3ab8a8d7653f"
   integrity sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==
@@ -17336,6 +18278,14 @@ write-file-atomic@^3.0.0:
     signal-exit "^3.0.2"
     typedarray-to-buffer "^3.1.5"
 
+write-file-atomic@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-4.0.1.tgz#9faa33a964c1c85ff6f849b80b42a88c2c537c8f"
+  integrity sha512-nSKUxgAbyioruk6hU87QzVbY279oYT6uiwgDoujth2ju4mJ+TZau7SQBhtbTmUyuNYTuXnSyRn66FV0+eCgcrQ==
+  dependencies:
+    imurmurhash "^0.1.4"
+    signal-exit "^3.0.7"
+
 ws@>=7.4.6, ws@^8.2.3:
   version "8.5.0"
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.5.0.tgz#bfb4be96600757fe5382de12c670dab984a1ed4f"
@@ -17406,6 +18356,11 @@ yargs-parser@20.x, yargs-parser@^20.2.2, yargs-parser@^20.2.7:
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.9.tgz#2eb7dc3b0289718fc295f362753845c41a0c94ee"
   integrity sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==
 
+yargs-parser@^21.0.0, yargs-parser@^21.0.1:
+  version "21.0.1"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.0.1.tgz#0267f286c877a4f0f728fceb6f8a3e4cb95c6e35"
+  integrity sha512-9BK1jFpLzJROCI5TzwZL/TU4gqjK5xiHV/RfWLOahrjAko/e4DJkRDZQXfvqAsiZzzYhgAzbgz6lg48jcm4GLg==
+
 yargs@^16.2.0:
   version "16.2.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-16.2.0.tgz#1c82bf0f6b6a66eafce7ef30e376f49a12477f66"
@@ -17419,6 +18374,19 @@ yargs@^16.2.0:
     y18n "^5.0.5"
     yargs-parser "^20.2.2"
 
+yargs@^17.3.1:
+  version "17.5.1"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.5.1.tgz#e109900cab6fcb7fd44b1d8249166feb0b36e58e"
+  integrity sha512-t6YAJcxDkNX7NFYiVtKvWUz8l+PaKTLiL63mJYWR2GnHq2gjEWISzsLp9wg3aY36dY1j+gfIEL3pIF+XlJJfbA==
+  dependencies:
+    cliui "^7.0.2"
+    escalade "^3.1.1"
+    get-caller-file "^2.0.5"
+    require-directory "^2.1.1"
+    string-width "^4.2.3"
+    y18n "^5.0.5"
+    yargs-parser "^21.0.0"
+
 yn@3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/yn/-/yn-3.1.1.tgz#1e87401a09d767c1d5eab26a6e4c185182d2eb50"

From 6993f00cda9892a088e5296608bd26801087ca61 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sat, 23 Jul 2022 18:56:41 +0900
Subject: [PATCH 51/68] bump coli with fixed astformatter

---
 externals/coli | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/externals/coli b/externals/coli
index b03b829f..49a1f374 160000
--- a/externals/coli
+++ b/externals/coli
@@ -1 +1 @@
-Subproject commit b03b829f3aeafae23057354597852ac80bf59c28
+Subproject commit 49a1f3746b8d003ebde41d945e162500362499a9

From 8da1f10ad36b6bd6dfe75b342d77d0561d231853 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sat, 23 Jul 2022 19:31:47 +0900
Subject: [PATCH 52/68] link version info to doc

---
 packages/designto-code/index.ts                                | 3 +++
 packages/designto-code/package.json                            | 1 +
 packages/designto-code/version/index.ts                        | 3 +++
 .../widget-declaration-doc-builder-react.ts                    | 3 ++-
 .../doc-widget-declaration/widget-declaration-doc-builder.ts   | 3 ++-
 5 files changed, 11 insertions(+), 2 deletions(-)
 create mode 100644 packages/designto-code/version/index.ts

diff --git a/packages/designto-code/index.ts b/packages/designto-code/index.ts
index e62241a6..5992c195 100644
--- a/packages/designto-code/index.ts
+++ b/packages/designto-code/index.ts
@@ -7,3 +7,6 @@ export * as token from "@designto/token";
 /* main function */
 export { designToCode, designTo } from "./universal";
 export type { Result } from "./universal";
+
+/* engine version */
+export { version, license } from "./version";
diff --git a/packages/designto-code/package.json b/packages/designto-code/package.json
index 268aadfb..46712c1a 100644
--- a/packages/designto-code/package.json
+++ b/packages/designto-code/package.json
@@ -1,6 +1,7 @@
 {
   "name": "@designto/code",
   "version": "0.0.1",
+  "license": "Apache-2.0",
   "main": "lib/index.js",
   "homepage": "https://designto.codes",
   "dependencies": {
diff --git a/packages/designto-code/version/index.ts b/packages/designto-code/version/index.ts
new file mode 100644
index 00000000..1b1083d4
--- /dev/null
+++ b/packages/designto-code/version/index.ts
@@ -0,0 +1,3 @@
+import { version, license } from "../package.json";
+
+export { version, license };
diff --git a/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder-react.ts b/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder-react.ts
index c8b32a4a..873014e9 100644
--- a/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder-react.ts
+++ b/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder-react.ts
@@ -5,6 +5,7 @@ import { react_imports } from "@web-builder/react-core";
 import type { WidgetDeclarationInfo, WidgetModuleInfo } from "./types";
 import { GridaTSDocWidgetDeclarationMetaManager } from "../doc-meta";
 import { makeEsWidgetModuleFile } from "@web-builder/module-es";
+import { version } from "@designto/code";
 
 class ReactWidgetDeclarationDocUsageExampleBuilder {
   protected readonly sourceuri?: string | undefined;
@@ -143,7 +144,7 @@ export class ReactWidgetDeclarationDocBuilder extends WidgetDeclarationDocBuilde
     const infoline =
       "<!-- Info: Please do not remove this comment unless intended. removing this section will break grida integrations. -->";
     const dataline = GridaTSDocWidgetDeclarationMetaManager.make({
-      engine: "v2022.07",
+      engine: version,
       source: "https://todo.com",
       uri: "https://todo.com",
     });
diff --git a/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder.ts b/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder.ts
index 537e14d3..9c4a3ef6 100644
--- a/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder.ts
+++ b/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder.ts
@@ -1,3 +1,4 @@
+import { license, version } from "@designto/code";
 import { FunctionDeclaration, Identifier } from "coli";
 import type {
   WidgetModuleInfo,
@@ -81,7 +82,7 @@ export abstract class WidgetDeclarationDocBuilder {
   protected abstract partRemarks();
 
   protected partPrivateRemarks() {
-    return `Code generated by grida.co | engine v2022.1.0 (Apache-2.0) | Generated code under CC0 (public domain) *This code is free to use, modify, and redistribute. (aknowledgment is not required)*`;
+    return `Code generated by grida.co | engine ${version} (${license}) | Generated code under CC0 (public domain) *This code is free to use, modify, and redistribute. (aknowledgment is not required)*`;
   }
 
   protected partBrandingFooter() {

From 0de24fd2fa6503ba88ed14d63b721e112f0d2948 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sat, 23 Jul 2022 20:18:23 +0900
Subject: [PATCH 53/68] update prettier config on monaco to use double quote

---
 .../editor-services-prettier/workers/prettier.worker.js       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/editor-packages/editor-services-prettier/workers/prettier.worker.js b/editor-packages/editor-services-prettier/workers/prettier.worker.js
index e17d4350..42c38487 100644
--- a/editor-packages/editor-services-prettier/workers/prettier.worker.js
+++ b/editor-packages/editor-services-prettier/workers/prettier.worker.js
@@ -19,7 +19,7 @@ const options = {
     printWidth: 100,
     semi: true,
     useTabs: false,
-    singleQuote: true,
+    singleQuote: false,
   }),
   typescript: async () => ({
     parser: "babel",
@@ -27,7 +27,7 @@ const options = {
     printWidth: 100,
     semi: true,
     useTabs: false,
-    singleQuote: true,
+    singleQuote: false,
   }),
 };
 

From 73e93b1bf809f5576ae2117bf51dd9a8eea52fe9 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sat, 23 Jul 2022 20:18:48 +0900
Subject: [PATCH 54/68] update function formatting

---
 externals/coli | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/externals/coli b/externals/coli
index 49a1f374..c96f1b22 160000
--- a/externals/coli
+++ b/externals/coli
@@ -1 +1 @@
-Subproject commit 49a1f3746b8d003ebde41d945e162500362499a9
+Subproject commit c96f1b2292588cbd510d000f982dc7cdcee8249c

From 986035f6f59294ef47f801c2cec609b93fcd12e9 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sun, 24 Jul 2022 06:47:22 +0900
Subject: [PATCH 55/68] remove explicit filekey extension type for editor - now
 natively supported

---
 editor-packages/editor-canvas/canvas/canvas.tsx | 5 ++---
 editor/scaffolds/preview/index.tsx              | 9 +++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/editor-packages/editor-canvas/canvas/canvas.tsx b/editor-packages/editor-canvas/canvas/canvas.tsx
index 671d6e14..2e90e86d 100644
--- a/editor-packages/editor-canvas/canvas/canvas.tsx
+++ b/editor-packages/editor-canvas/canvas/canvas.tsx
@@ -47,7 +47,7 @@ interface CanvasState {
 type CanvasCustomRenderers = HudCustomRenderers & {
   renderItem: (
     p: {
-      node: ReflectSceneNode & { filekey: string };
+      node: ReflectSceneNode;
     } & FrameOptimizationFactors
   ) => React.ReactNode;
 };
@@ -309,14 +309,13 @@ export function Canvas({
 
   const items = useMemo(() => {
     return nodes?.map((node) => {
-      node["filekey"] = filekey;
       return (
         <LazyFrame key={node.id} xy={[node.x, node.y]} size={node}>
           {/* 👇 dev only (for performance tracking) 👇 */}
           {/* <div style={{ width: "100%", height: "100%", background: "grey" }} /> */}
           {/* 👆 ----------------------------------- 👆 */}
           {renderItem({
-            node: node as ReflectSceneNode & { filekey: string },
+            node: node as ReflectSceneNode,
             zoom, // ? use scaled_zoom ?
             inViewport: true, // TODO:
             isZooming: isZooming,
diff --git a/editor/scaffolds/preview/index.tsx b/editor/scaffolds/preview/index.tsx
index cb8a51a8..c42bc4f6 100644
--- a/editor/scaffolds/preview/index.tsx
+++ b/editor/scaffolds/preview/index.tsx
@@ -60,9 +60,7 @@ const blurred_bg_fill = (target: ReflectSceneNode) => {
 };
 
 type VanillaPreviewProps = {
-  target: ReflectSceneNode & {
-    filekey: string;
-  };
+  target: ReflectSceneNode;
 } & FrameOptimizationFactors;
 
 export function D2CVanillaPreview({
@@ -80,7 +78,10 @@ export function D2CVanillaPreview({
       }
     }
     setPreview(result);
-    cache.set(target.filekey, { ...result, __image });
+
+    if (typeof target.filekey == "string") {
+      cache.set(target.filekey, { ...result, __image });
+    }
   };
 
   const hide_preview = isZooming || isPanning;

From abbef6b465c96c4c4a35f4a8df7d779e44292e3f Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sun, 24 Jul 2022 06:48:15 +0900
Subject: [PATCH 56/68] update figma converters to seed filekey (mandatory)

---
 editor/hooks/use-design.ts                              | 5 +++--
 editor/pages/files/[key]/index.tsx                      | 4 ++--
 editor/scaffolds/editor/warmup.ts                       | 7 +++++--
 externals/design-sdk                                    | 2 +-
 packages/support-components/tokenize-component/index.ts | 7 +------
 5 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/editor/hooks/use-design.ts b/editor/hooks/use-design.ts
index 3e4a7f0f..fb1bd21e 100644
--- a/editor/hooks/use-design.ts
+++ b/editor/hooks/use-design.ts
@@ -101,8 +101,8 @@ export function useDesign({
     }
 
     if (targetnodeconfig) {
+      const filekey = targetnodeconfig.file;
       // load design from local storage or remote figma
-
       const cacheStore = new RemoteDesignSessionCacheStore({
         file: targetnodeconfig.file,
         node: targetnodeconfig.node,
@@ -116,7 +116,8 @@ export function useDesign({
         const _2_converted_to_reflect = convert.intoReflectNode(
           _1_converted_to_figma,
           null,
-          "rest"
+          "rest",
+          filekey
         );
 
         const res = <TargetNodeConfig>{
diff --git a/editor/pages/files/[key]/index.tsx b/editor/pages/files/[key]/index.tsx
index e3169c2d..0a183a72 100644
--- a/editor/pages/files/[key]/index.tsx
+++ b/editor/pages/files/[key]/index.tsx
@@ -6,8 +6,8 @@ import { EditorSnapshot, StateProvider } from "core/states";
 import { WorkspaceAction } from "core/actions";
 import { useDesignFile, TUseDesignFile } from "hooks";
 import { warmup } from "scaffolds/editor";
-import { FileResponse } from "@design-sdk/figma-remote-types";
 import { EditorBrowserMetaHead } from "components/editor";
+import type { FileResponse } from "@design-sdk/figma-remote-types";
 
 export default function FileEntryEditor() {
   const router = useRouter();
@@ -78,7 +78,7 @@ function SetupEditor({
     // ->> file.styles;
 
     const components = warmup.componentsFrom(file);
-    const pages = warmup.pagesFrom(file);
+    const pages = warmup.pagesFrom(filekey, file);
 
     if (prevstate) {
       val = {
diff --git a/editor/scaffolds/editor/warmup.ts b/editor/scaffolds/editor/warmup.ts
index 51a42aee..faf589d9 100644
--- a/editor/scaffolds/editor/warmup.ts
+++ b/editor/scaffolds/editor/warmup.ts
@@ -41,13 +41,16 @@ export function initialReducer(
   }
 }
 
-export function pagesFrom(file: FileResponse): FigmaReflectRepository["pages"] {
+export function pagesFrom(
+  filekey: string,
+  file: FileResponse
+): FigmaReflectRepository["pages"] {
   return file.document.children.map((page) => ({
     id: page.id,
     name: page.name,
     children: page["children"]?.map((child) => {
       const _mapped = mapper.mapFigmaRemoteToFigma(child);
-      return convert.intoReflectNode(_mapped, null, "rest");
+      return convert.intoReflectNode(_mapped, null, "rest", filekey);
     }),
     type: "design",
   }));
diff --git a/externals/design-sdk b/externals/design-sdk
index 5b246792..3940ab4a 160000
--- a/externals/design-sdk
+++ b/externals/design-sdk
@@ -1 +1 @@
-Subproject commit 5b24679244fae19746469067ec07de9977bb3f09
+Subproject commit 3940ab4ac87cd00eb89c9f004306a3d2afe264d6
diff --git a/packages/support-components/tokenize-component/index.ts b/packages/support-components/tokenize-component/index.ts
index 6005e822..6f27c6af 100644
--- a/packages/support-components/tokenize-component/index.ts
+++ b/packages/support-components/tokenize-component/index.ts
@@ -8,13 +8,8 @@ import { ReflectSceneNode } from "@design-sdk/figma-node";
 function fromComponentNode(component: ComponentNode) {
   assert(component);
 
-  // FIXME:
-  // FIXME:
   // FIXME: setting "rest" temporarily. this should be set to match the environment. (currently development is done with web editor, so rest is set to true)
-  const reflect = convert.intoReflectNode(component, null, "rest");
-  // FIXME:
-  // FIXME:
-  // FIXME:
+  const reflect = convert.intoReflectNode(component, null, "rest"); // TODO: pass filekey
 
   return handleNode(reflect);
 }

From 3d69aa8d9903b9de215988a42cafe77dd6e0ba5f Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sun, 24 Jul 2022 06:55:12 +0900
Subject: [PATCH 57/68] update default indentations

---
 packages/builder-module-es/es-module-exportable-declaration.ts   | 1 +
 .../html-css-id-widget/html-css-id-module-builder.ts             | 1 +
 .../widget-declaration-doc-builder-react.ts                      | 1 +
 3 files changed, 3 insertions(+)

diff --git a/packages/builder-module-es/es-module-exportable-declaration.ts b/packages/builder-module-es/es-module-exportable-declaration.ts
index 32cd6e17..8862afcb 100644
--- a/packages/builder-module-es/es-module-exportable-declaration.ts
+++ b/packages/builder-module-es/es-module-exportable-declaration.ts
@@ -44,6 +44,7 @@ export abstract class EsWidgetModuleExportable {
     const file = this.asFile({ exporting: config });
     const final = stringfy(file.blocks, {
       language: "tsx",
+      indentation: 2,
     });
     return {
       code: final,
diff --git a/packages/builder-web-vanilla/html-css-id-widget/html-css-id-module-builder.ts b/packages/builder-web-vanilla/html-css-id-widget/html-css-id-module-builder.ts
index 8917c344..25087c4f 100644
--- a/packages/builder-web-vanilla/html-css-id-widget/html-css-id-module-builder.ts
+++ b/packages/builder-web-vanilla/html-css-id-widget/html-css-id-module-builder.ts
@@ -176,6 +176,7 @@ export class HtmlIdCssModuleBuilder {
   render(): string {
     const strfied_body = stringfy(this.partBody(), {
       language: "jsx",
+      indentation: "\t",
     });
 
     const final = html_render({
diff --git a/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder-react.ts b/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder-react.ts
index 873014e9..4255fb56 100644
--- a/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder-react.ts
+++ b/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder-react.ts
@@ -73,6 +73,7 @@ class ReactWidgetDeclarationDocUsageExampleBuilder {
 
     const code = stringfy(file, {
       language: "tsx",
+      indentation: 2,
     });
     return `\`\`\`tsx\n${code}\`\`\``;
   }

From 2a7ef65d07da7098275bf371593b6aac39bc9575 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sun, 24 Jul 2022 06:55:43 +0900
Subject: [PATCH 58/68] mimic fixes

---
 .../designto-token/support-flags/token-x-osm-view/index.ts  | 2 +-
 packages/support-components/define.ts                       | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/designto-token/support-flags/token-x-osm-view/index.ts b/packages/designto-token/support-flags/token-x-osm-view/index.ts
index 7d4b8502..f95255c2 100644
--- a/packages/designto-token/support-flags/token-x-osm-view/index.ts
+++ b/packages/designto-token/support-flags/token-x-osm-view/index.ts
@@ -32,8 +32,8 @@ export function tokenize_flagged_osm_view(
       ...container,
       key: keyFromNode(node),
       child: new XOSMView({
-        key: _key,
         ...container,
+        key: _key,
         latlng: typeof v === "boolean" ? undefined : v, // passing null will cause the default latlng to be used
       }),
     });
diff --git a/packages/support-components/define.ts b/packages/support-components/define.ts
index d7656589..927e8764 100644
--- a/packages/support-components/define.ts
+++ b/packages/support-components/define.ts
@@ -184,7 +184,8 @@ export function make_instance_component_meta({ entry, components }: Input) {
   };
 
   const masterMeta = new MasterComponentMetaToken({
-    key: keyFromNode(findIn(components, masterId)),
+    // TODO: remove casting after component node support on reflect nodes
+    key: keyFromNode(findIn(components, masterId) as any as ReflectSceneNode),
     properties: properties.map((p) => {
       return <Property<any>>{
         key: get_property_key(p.type, p.master),
@@ -205,7 +206,8 @@ export function make_instance_component_meta({ entry, components }: Input) {
 
   const entryInstanceMeta = new InstanceMetaToken({
     master: masterMeta,
-    key: keyFromNode(entry),
+    // TODO: remove casting after component node support on reflect nodes
+    key: keyFromNode(entry as any as ReflectSceneNode),
     arguments: properties.reduce(function (result, item, index, array) {
       result[item.type] = {
         key: get_property_key(item.type, item.master),

From 44e2ff0c8cfab2e8a8f997eca487a6dd185c2e84 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sun, 24 Jul 2022 06:56:04 +0900
Subject: [PATCH 59/68] add FigmaWidgetKey support with filekey info

---
 packages/designto-token/key/index.ts           |  1 +
 packages/designto-token/key/key-from-node.ts   | 14 +++++++++-----
 .../designto-token/key/widget-key-figma.ts     | 18 ++++++++++++++++++
 3 files changed, 28 insertions(+), 5 deletions(-)
 create mode 100644 packages/designto-token/key/widget-key-figma.ts

diff --git a/packages/designto-token/key/index.ts b/packages/designto-token/key/index.ts
index 82149a9b..81dac2d9 100644
--- a/packages/designto-token/key/index.ts
+++ b/packages/designto-token/key/index.ts
@@ -1 +1,2 @@
 export * from "./key-from-node";
+export { FigmaWidgetKey } from "./widget-key-figma";
diff --git a/packages/designto-token/key/key-from-node.ts b/packages/designto-token/key/key-from-node.ts
index 1fc5e6ca..50219b16 100644
--- a/packages/designto-token/key/key-from-node.ts
+++ b/packages/designto-token/key/key-from-node.ts
@@ -1,9 +1,13 @@
-import { nodes } from "@design-sdk/core";
-import { WidgetKey } from "@reflect-ui/core";
+import type { ReflectSceneNode } from "@design-sdk/core";
+import type { WidgetKey } from "@reflect-ui/core";
+import { FigmaWidgetKey } from "../key";
 
-export function keyFromNode(node: { id: string; name: string }): WidgetKey {
-  return new WidgetKey({
+export function keyFromNode(node: ReflectSceneNode): WidgetKey {
+  // TODO: refactor this after multiple design origin support. now fixed to figma.
+  // e.g. - if (node.$schema === 'figma'){ ... }
+  return new FigmaWidgetKey({
     id: node.id,
-    originName: node.name,
+    name: node.name,
+    filekey: node.filekey,
   });
 }
diff --git a/packages/designto-token/key/widget-key-figma.ts b/packages/designto-token/key/widget-key-figma.ts
new file mode 100644
index 00000000..c6c82c11
--- /dev/null
+++ b/packages/designto-token/key/widget-key-figma.ts
@@ -0,0 +1,18 @@
+import type { FigmaFileKey } from "@design-sdk/figma";
+import { WidgetKey } from "@reflect-ui/core";
+
+export class FigmaWidgetKey extends WidgetKey {
+  readonly filekey: FigmaFileKey;
+  constructor({
+    id,
+    name,
+    filekey,
+  }: {
+    id: string;
+    name: string;
+    filekey: FigmaFileKey;
+  }) {
+    super({ id, originName: name });
+    this.filekey = filekey;
+  }
+}

From 2d85f5d5b1858b56e7ce03d32a4377d0db950d4b Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sun, 24 Jul 2022 07:37:34 +0900
Subject: [PATCH 60/68] bump reflect core with update widget key - copyWith,
 rename

---
 externals/reflect-core | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/externals/reflect-core b/externals/reflect-core
index 7c5e131d..80dd0365 160000
--- a/externals/reflect-core
+++ b/externals/reflect-core
@@ -1 +1 @@
-Subproject commit 7c5e131df2287102c2ad7c6d9a8342b3841b16bb
+Subproject commit 80dd0365653ae563f79d658c1c999ef33a3810ce

From 02bcd54071929285c50b07f2a337ffc5229b0319 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sun, 24 Jul 2022 07:39:13 +0900
Subject: [PATCH 61/68] remove web widget key, use core widget key. update
 usage (might have major impact, not tested)

---
 .../rn-svg/rn-svg-with-path.ts                |  2 +-
 .../rn-widgets/rn-error-widget/index.ts       |  2 +-
 .../rn-widgets/rn-text/index.ts               |  2 +-
 .../widget-key/key-from-reflect-widget.ts     |  3 ++-
 .../builder-web-core/widget-key/widget-key.ts | 19 +++----------------
 .../widgets-native/error-widget/index.ts      |  2 +-
 .../widgets-native/html-button/index.ts       |  2 +-
 .../widgets-native/html-svg/index.ts          | 10 +++++-----
 .../widgets-native/html-text-element/index.ts |  2 +-
 9 files changed, 16 insertions(+), 28 deletions(-)

diff --git a/packages/builder-react-native/rn-svg/rn-svg-with-path.ts b/packages/builder-react-native/rn-svg/rn-svg-with-path.ts
index f3e7d6b6..b10fbb7d 100644
--- a/packages/builder-react-native/rn-svg/rn-svg-with-path.ts
+++ b/packages/builder-react-native/rn-svg/rn-svg-with-path.ts
@@ -9,7 +9,7 @@ import { JSX, JSXAttribute, StringLiteral } from "coli";
 export class SvgWithPathElement extends SvgElement {
   path({ fill }: { fill: string | false }) {
     return <StylableJsxWidget>{
-      key: new WidgetKey(`${this.key.id}.svg-path`, "svg-path"),
+      key: new WidgetKey({ id: `${this.key.id}.svg-path`, name: "svg-path" }),
       styleData: () => null,
       jsxConfig: () => {
         // from `import Svg, { Path } from "react-native-svg";`
diff --git a/packages/builder-react-native/rn-widgets/rn-error-widget/index.ts b/packages/builder-react-native/rn-widgets/rn-error-widget/index.ts
index c79e178c..551df559 100644
--- a/packages/builder-react-native/rn-widgets/rn-error-widget/index.ts
+++ b/packages/builder-react-native/rn-widgets/rn-error-widget/index.ts
@@ -17,7 +17,7 @@ export class ErrorWidget extends TextChildWidget<TextStyle> {
 
   textData() {
     return new TextDataWidget({
-      key: { ...this.key, id: this.key.id + ".text-data" },
+      key: WidgetKey.copyWith(this.key, { id: this.key.id + ".text-data" }),
       data: this.errorMessage,
     });
   }
diff --git a/packages/builder-react-native/rn-widgets/rn-text/index.ts b/packages/builder-react-native/rn-widgets/rn-text/index.ts
index 3b80b3df..60415553 100644
--- a/packages/builder-react-native/rn-widgets/rn-text/index.ts
+++ b/packages/builder-react-native/rn-widgets/rn-text/index.ts
@@ -53,7 +53,7 @@ export class Text extends TextChildWidget<ViewStyle> {
 
   textData() {
     return new TextDataWidget({
-      key: { ...this.key, id: this.key.id + ".text-data" },
+      key: WidgetKey.copyWith(this.key, { id: this.key.id + ".text-data" }),
       data: this.data,
     });
   }
diff --git a/packages/builder-web-core/widget-key/key-from-reflect-widget.ts b/packages/builder-web-core/widget-key/key-from-reflect-widget.ts
index 46cc1e04..00911e86 100644
--- a/packages/builder-web-core/widget-key/key-from-reflect-widget.ts
+++ b/packages/builder-web-core/widget-key/key-from-reflect-widget.ts
@@ -10,5 +10,6 @@ export function keyFromWidget(widget: core.Widget): WidgetKey {
   const name = nameit(widget.key.originName, {
     case: NameCases.pascal,
   });
-  return new WidgetKey(widget.key.id, name.name);
+
+  return widget.key.rename(name.name);
 }
diff --git a/packages/builder-web-core/widget-key/widget-key.ts b/packages/builder-web-core/widget-key/widget-key.ts
index b11ed7f9..314d51e2 100644
--- a/packages/builder-web-core/widget-key/widget-key.ts
+++ b/packages/builder-web-core/widget-key/widget-key.ts
@@ -1,18 +1,5 @@
-export type WidgetKeyId = string;
-
-export class WidgetKey {
-  id: WidgetKeyId;
-  name: string;
-
-  constructor(id: WidgetKeyId, name: string) {
-    this.id = id;
-    this.name = name;
-  }
-}
-
-export interface WidgetKey {
-  id: WidgetKeyId;
-  name: string;
-}
+import { WidgetKey } from "@reflect-ui/core";
 
+export type WidgetKeyId = string;
+export { WidgetKey };
 export type WidgetKeyLike = WidgetKey;
diff --git a/packages/builder-web-core/widgets-native/error-widget/index.ts b/packages/builder-web-core/widgets-native/error-widget/index.ts
index 033a5f4e..2bed6658 100644
--- a/packages/builder-web-core/widgets-native/error-widget/index.ts
+++ b/packages/builder-web-core/widgets-native/error-widget/index.ts
@@ -18,7 +18,7 @@ export class ErrorWidget extends TextChildWidget {
 
   textData() {
     return new TextDataWidget({
-      key: { ...this.key, id: this.key.id + ".text-data" },
+      key: WidgetKey.copyWith(this.key, { id: this.key.id + ".text-data" }),
       data: this.errorMessage,
     });
   }
diff --git a/packages/builder-web-core/widgets-native/html-button/index.ts b/packages/builder-web-core/widgets-native/html-button/index.ts
index 26e69324..3ce73ccc 100644
--- a/packages/builder-web-core/widgets-native/html-button/index.ts
+++ b/packages/builder-web-core/widgets-native/html-button/index.ts
@@ -87,7 +87,7 @@ export class HtmlButton extends Container implements IButtonStyleButton {
     if (this.child instanceof Text) {
       return [
         <StylableJsxWidget>{
-          key: new WidgetKey(`${this.key.id}.text`, "text"),
+          key: new WidgetKey({ id: `${this.key.id}.text`, name: "text" }),
           styleData: () => null,
           jsxConfig: () => {
             return <JSXElementConfig>{
diff --git a/packages/builder-web-core/widgets-native/html-svg/index.ts b/packages/builder-web-core/widgets-native/html-svg/index.ts
index 1315134d..232b3023 100644
--- a/packages/builder-web-core/widgets-native/html-svg/index.ts
+++ b/packages/builder-web-core/widgets-native/html-svg/index.ts
@@ -83,7 +83,7 @@ export class SvgElement extends StylableJsxWidget {
 
   path({ fill }: { fill: string | false }) {
     return <StylableJsxWidget>{
-      key: new WidgetKey(`${this.key.id}.svg-path`, "svg-path"),
+      key: new WidgetKey({ id: `${this.key.id}.svg-path`, name: "svg-path" }),
       styleData: () => null,
       jsxConfig: () => {
         const _tag = JSX.identifier("path");
@@ -156,10 +156,10 @@ export class SvgElement extends StylableJsxWidget {
               });
 
               const fill = <StylableJsxWidget>{
-                key: new WidgetKey(
-                  `${this.key.id}.linear-gradient-fill`,
-                  "linear-gradient-fill"
-                ),
+                key: new WidgetKey({
+                  id: `${this.key.id}.linear-gradient-fill`,
+                  name: "linear-gradient-fill",
+                }),
                 styleData: () => null,
                 jsxConfig: (): UnstylableJSXElementConfig => {
                   return {
diff --git a/packages/builder-web-core/widgets-native/html-text-element/index.ts b/packages/builder-web-core/widgets-native/html-text-element/index.ts
index 366eac0b..1807af95 100644
--- a/packages/builder-web-core/widgets-native/html-text-element/index.ts
+++ b/packages/builder-web-core/widgets-native/html-text-element/index.ts
@@ -53,7 +53,7 @@ export class Text extends TextChildWidget {
 
   textData() {
     return new TextDataWidget({
-      key: { ...this.key, id: this.key.id + ".text-data" },
+      key: WidgetKey.copyWith(this.key, { id: this.key.id + ".text-data" }),
       data: this.data,
     });
   }

From 304b77b6f5a2d576b8284d4c35e5369ac45446d7 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sun, 24 Jul 2022 07:40:55 +0900
Subject: [PATCH 62/68] add design origin link building feature to widget
 declaration docgen

---
 .../react-styled-components-module-builder.ts | 12 +++------
 .../key/extract-meta-data-from-widget-key.ts  | 25 +++++++++++++++++++
 packages/designto-token/key/index.ts          |  1 +
 packages/designto-token/tokenizer.ts          |  2 +-
 .../compose-instanciation.ts                  |  8 +++---
 ...e-widget-declaration-documentation-meta.ts |  9 -------
 packages/dirty/index.ts                       |  1 +
 .../doc-widget-declaration/types.ts           |  2 +-
 .../widget-declaration-doc-builder-react.ts   | 18 +++++++++++--
 9 files changed, 52 insertions(+), 26 deletions(-)
 create mode 100644 packages/designto-token/key/extract-meta-data-from-widget-key.ts
 delete mode 100644 packages/dirty/hard-replace-widget-declaration-documentation-meta.ts
 create mode 100644 packages/dirty/index.ts

diff --git a/packages/builder-web-react/react-styled-component-widget/react-styled-components-module-builder.ts b/packages/builder-web-react/react-styled-component-widget/react-styled-components-module-builder.ts
index 5cf4158f..e74ab191 100644
--- a/packages/builder-web-react/react-styled-component-widget/react-styled-components-module-builder.ts
+++ b/packages/builder-web-react/react-styled-component-widget/react-styled-components-module-builder.ts
@@ -26,10 +26,7 @@ import { Framework } from "@grida/builder-platform-types";
 import { JSXWidgetModuleBuilder } from "@web-builder/module-jsx";
 import type { WidgetDeclarationDocumentation } from "@code-features/documentation";
 import { ReactWidgetDeclarationDocBuilder } from "@code-features/documentation";
-import {
-  dirty_widget_doc_meta_postprocessing_replacer as replacer,
-  dirty_widget_doc_meta_postprocessing_replacer_keys as replacer_keys,
-} from "dirty/hard-replace-widget-declaration-documentation-meta";
+import { extractMetaFromWidgetKey } from "@designto/token/key";
 
 export class ReactStyledComponentsModuleBuilder extends JSXWidgetModuleBuilder<react_config.ReactStyledComponentsConfig> {
   constructor({
@@ -98,13 +95,10 @@ export class ReactStyledComponentsModuleBuilder extends JSXWidgetModuleBuilder<r
   }
 
   protected partDocumentation(): string {
+    const metafromkey = extractMetaFromWidgetKey(this.entry.key);
     const docstr = new ReactWidgetDeclarationDocBuilder({
       module: {
-        // TODO: add proper module info support (accept info from builder's constructor)
-        designsource: replacer.reserve(replacer_keys.designsource, "unknown"),
-        filekey: replacer.reserve(replacer_keys.filekey, "unknown"),
-        name: this.entry.key.name,
-        id: this.entry.key.id,
+        ...metafromkey,
       },
       declaration: {
         type: "unknown",
diff --git a/packages/designto-token/key/extract-meta-data-from-widget-key.ts b/packages/designto-token/key/extract-meta-data-from-widget-key.ts
new file mode 100644
index 00000000..499791e2
--- /dev/null
+++ b/packages/designto-token/key/extract-meta-data-from-widget-key.ts
@@ -0,0 +1,25 @@
+import { WidgetKey } from "@reflect-ui/core";
+import { FigmaWidgetKey } from "./widget-key-figma";
+
+export function extractMetaFromWidgetKey(key: WidgetKey): {
+  designsource: "figma" | "unknown";
+  filekey: string | undefined;
+  id: string;
+  name: string;
+} {
+  if (key instanceof FigmaWidgetKey) {
+    return {
+      designsource: "figma",
+      filekey: typeof key.filekey === "string" ? key.filekey : undefined,
+      id: key.id,
+      name: key.name,
+    };
+  }
+
+  return {
+    designsource: "unknown",
+    filekey: undefined,
+    id: key.id,
+    name: key.name,
+  };
+}
diff --git a/packages/designto-token/key/index.ts b/packages/designto-token/key/index.ts
index 81dac2d9..b33b1117 100644
--- a/packages/designto-token/key/index.ts
+++ b/packages/designto-token/key/index.ts
@@ -1,2 +1,3 @@
 export * from "./key-from-node";
+export * from "./extract-meta-data-from-widget-key";
 export { FigmaWidgetKey } from "./widget-key-figma";
diff --git a/packages/designto-token/tokenizer.ts b/packages/designto-token/tokenizer.ts
index 8436006e..83f88b8c 100644
--- a/packages/designto-token/tokenizer.ts
+++ b/packages/designto-token/tokenizer.ts
@@ -367,7 +367,7 @@ function handle_by_types(
     default:
       console.error(`${node["type"]} is not yet handled by "@designto/token"`);
       tokenizedTarget = tokenizeGraphics.fromAnyNode(node); // this is expensive
-      tokenizedTarget.key!.originName = `fallback: from - "${
+      tokenizedTarget.key!.name = `fallback: from - "${
         tokenizedTarget.key!.originName
       }"`;
       break;
diff --git a/packages/designto-web/tokens-to-web-widget/compose-instanciation.ts b/packages/designto-web/tokens-to-web-widget/compose-instanciation.ts
index cb9e8671..cfd4f933 100644
--- a/packages/designto-web/tokens-to-web-widget/compose-instanciation.ts
+++ b/packages/designto-web/tokens-to-web-widget/compose-instanciation.ts
@@ -2,6 +2,7 @@ import { Composer } from ".";
 import * as reusable from "@code-features/component/tokens";
 import * as web from "@web-builder/core";
 import { nameit, NameCases } from "coli";
+import { WidgetKey } from "@web-builder/core";
 
 export function compose_instanciation(
   widget: reusable.InstanceWidget,
@@ -14,10 +15,9 @@ export function compose_instanciation(
   }).name;
 
   return new web.InstanciationElement({
-    key: {
-      name: "ExampleUsageOf_" + identifier, // FIXME: should not use identifier as name
-      id: widget.key.id,
-    },
+    key: WidgetKey.copyWith(widget.key, {
+      name: "ExampleUsageOf_" + identifier,
+    }),
     identifier: identifier,
     arguments: widget.meta.arguments,
   });
diff --git a/packages/dirty/hard-replace-widget-declaration-documentation-meta.ts b/packages/dirty/hard-replace-widget-declaration-documentation-meta.ts
deleted file mode 100644
index 12ec463d..00000000
--- a/packages/dirty/hard-replace-widget-declaration-documentation-meta.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import Postprocessing from "coli-plugin-postprocessing";
-
-export const dirty_widget_doc_meta_postprocessing_replacer =
-  Postprocessing.create("widget-doc-meta-postprocessing-replacer");
-
-export const dirty_widget_doc_meta_postprocessing_replacer_keys = {
-  designsource: "designsource",
-  filekey: "filekey",
-} as const;
diff --git a/packages/dirty/index.ts b/packages/dirty/index.ts
new file mode 100644
index 00000000..d466e1a5
--- /dev/null
+++ b/packages/dirty/index.ts
@@ -0,0 +1 @@
+export const dummy = "";
diff --git a/packages/support-documentation/doc-widget-declaration/types.ts b/packages/support-documentation/doc-widget-declaration/types.ts
index d22d21d3..4ca23cc7 100644
--- a/packages/support-documentation/doc-widget-declaration/types.ts
+++ b/packages/support-documentation/doc-widget-declaration/types.ts
@@ -2,7 +2,7 @@ import type { EsComponentExportingCofnig } from "@designto/config/module-es";
 import type { FunctionDeclaration, Literal, Parameter } from "coli";
 
 export interface WidgetModuleInfo {
-  designsource?: string;
+  designsource?: "figma" | "unknown";
   filekey?: string;
   id: string;
   name: string;
diff --git a/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder-react.ts b/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder-react.ts
index 4255fb56..c6d36a4c 100644
--- a/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder-react.ts
+++ b/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder-react.ts
@@ -106,8 +106,9 @@ export class ReactWidgetDeclarationDocBuilder extends WidgetDeclarationDocBuilde
   }
 
   protected partIntro() {
-    if (this.module.designsource) {
-      return `${this._widgetname} - from design {@link ${this.module.designsource}}`;
+    const link = buildOriginDesignLinkIfPossible(this.module);
+    if (link) {
+      return `${this._widgetname} - from design {@link ${link}}`;
     }
     return this._widgetname;
   }
@@ -188,3 +189,16 @@ export class ReactWidgetDeclarationDocBuilder extends WidgetDeclarationDocBuilde
       .join("\n");
   }
 }
+
+function buildOriginDesignLinkIfPossible(
+  module: WidgetModuleInfo
+): string | undefined {
+  if (module.designsource) {
+    if (module.designsource === "figma") {
+      if (module.filekey) {
+        return `https://figma.com/file/${module.filekey}?node-id=${module.id}`;
+      }
+    }
+  }
+  return;
+}

From 8441f1fb2e240a5cddc76fe26d3456848e8acb70 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sun, 24 Jul 2022 09:55:42 +0900
Subject: [PATCH 63/68] fix serializer

---
 .../support-documentation/doc-meta/serializer.ts    | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/support-documentation/doc-meta/serializer.ts b/packages/support-documentation/doc-meta/serializer.ts
index caaac0cf..0350e2ef 100644
--- a/packages/support-documentation/doc-meta/serializer.ts
+++ b/packages/support-documentation/doc-meta/serializer.ts
@@ -66,18 +66,23 @@ export function parseMetaFromMarkdownComment<
 export function makeMarkdownCommentFromMeta<
   T extends { [key: string]: string | boolean } | object
 >(meta: T): string {
+  const flags: string[] = [];
   const fields: string[] = [];
 
   Object.keys(meta).forEach((k) => {
     const v = meta[k];
-    if (typeof v === "boolean") {
-      fields.push(k);
+    if (typeof v === "boolean" && v) {
+      flags.push(k);
     } else {
-      fields.push(`${k} : ${v}`);
+      if (v) {
+        fields.push(`${k} : ${v}`);
+      }
     }
   });
 
-  return `<!-- ${fields.join(" | ")} -->`;
+  const items = [...flags, ...fields];
+
+  return `<!-- ${items.join(" | ")} -->`;
 }
 
 const _ = {

From 48a2c80a27315da9c6a75add96ec44154965adaf Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sun, 24 Jul 2022 09:55:57 +0900
Subject: [PATCH 64/68] add preview image & name info to docgen

---
 .../key/extract-meta-data-from-widget-key.ts  |   3 +
 packages/dirty/test.tsx                       | 186 ++++++++++++++++++
 .../support-documentation/doc-meta/manager.ts |  10 +-
 .../doc-widget-declaration/types.ts           |   1 +
 .../widget-declaration-doc-builder-react.ts   |  67 +++++--
 5 files changed, 245 insertions(+), 22 deletions(-)
 create mode 100644 packages/dirty/test.tsx

diff --git a/packages/designto-token/key/extract-meta-data-from-widget-key.ts b/packages/designto-token/key/extract-meta-data-from-widget-key.ts
index 499791e2..f721c60d 100644
--- a/packages/designto-token/key/extract-meta-data-from-widget-key.ts
+++ b/packages/designto-token/key/extract-meta-data-from-widget-key.ts
@@ -6,6 +6,7 @@ export function extractMetaFromWidgetKey(key: WidgetKey): {
   filekey: string | undefined;
   id: string;
   name: string;
+  originalname?: string | undefined;
 } {
   if (key instanceof FigmaWidgetKey) {
     return {
@@ -13,6 +14,7 @@ export function extractMetaFromWidgetKey(key: WidgetKey): {
       filekey: typeof key.filekey === "string" ? key.filekey : undefined,
       id: key.id,
       name: key.name,
+      originalname: key.originName,
     };
   }
 
@@ -21,5 +23,6 @@ export function extractMetaFromWidgetKey(key: WidgetKey): {
     filekey: undefined,
     id: key.id,
     name: key.name,
+    originalname: key.originName,
   };
 }
diff --git a/packages/dirty/test.tsx b/packages/dirty/test.tsx
new file mode 100644
index 00000000..b85bc68d
--- /dev/null
+++ b/packages/dirty/test.tsx
@@ -0,0 +1,186 @@
+import React from "react";
+import styled from "styled-components";
+/**
+ * `<Entry>` ('entry')
+ * - [Open in Figma](https://figma.com/file/x7RRK6RwWtZuNakmbMLTVH?node-id=2422:10181)
+ * - [Open in Grida](https://code.grida.co/files/x7RRK6RwWtZuNakmbMLTVH?node=2422:10181)
+ *
+ *
+ * ---
+ * @example
+ * ```tsx
+ * import React from "react";
+ *
+ * export default function () {
+ *   return (
+ *     <>
+ *       👇 instanciate widget like below. 👇
+ *       <Entry/>
+ *     </>
+ *   )
+ * }
+ * ```
+ * ---
+ * @params {any} props - this widget does not requires props. you can pass custom dynamic props to the widget as you want (on typescript, it will raise type check issues).
+ * ---
+ * @preview
+ * ![](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/20e3d978-4b57-4e3d-a1c2-b974b680e507)
+ * ---
+ * @remarks
+ * @see {@link https://grida.co/docs/widgets} for more information.
+ * ---
+ * Code generated by grida.co | engine 0.0.1 (Apache-2.0) | Generated code under CC0 (public domain) *This code is free to use, modify, and redistribute. (aknowledgment is not required)*
+ *
+ *
+ * ![Made with Grida](https://bridged-service-static.s3.us-west-1.amazonaws.com/branding/logo/32.png)
+ * <!-- Info: Please do not remove this comment unless intended. removing this section will break grida integrations. -->
+ * <!-- grida.meta.widget_declaration | engine : 0.0.1 | source : figma://x7RRK6RwWtZuNakmbMLTVH/2422:10181 -->
+ */
+export function Entry() {
+  return (
+    <RootWrapperEntry>
+      <BigCover>
+        <_2022>2022</_2022>
+        <NwvLayout>
+          <Nwv>NWV</Nwv>
+        </NwvLayout>
+      </BigCover>
+      <AppnameAsH1>Newest World Vibes</AppnameAsH1>
+      <Description>
+        Vibes More than 30,000 + All around the world. Stay tuned, Stay updated.
+      </Description>
+      <ActionArea>
+        <ButtonMaxWidth400AsButton>Get started</ButtonMaxWidth400AsButton>
+      </ActionArea>
+    </RootWrapperEntry>
+  );
+}
+
+const RootWrapperEntry = styled.div`
+  min-height: 100vh;
+  background-color: white;
+  border-radius: 4px;
+  position: relative;
+  box-shadow: 0px 4px 32px rgba(0, 0, 0, 0.08);
+`;
+
+const BigCover = styled.div`
+  height: 263px;
+  position: absolute;
+  left: 0px;
+  top: 231px;
+  right: 0px;
+`;
+
+const _2022 = styled.span`
+  color: black;
+  text-overflow: ellipsis;
+  font-size: 292px;
+  font-family: Sen, sans-serif;
+  font-weight: 800;
+  letter-spacing: -4px;
+  line-height: 90%;
+  text-align: center;
+  position: absolute;
+  left: calc((calc((50% + -71px)) - 336px));
+  top: calc((calc((50% + 0px)) - 132px));
+`;
+
+const NwvLayout = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+  box-sizing: border-box;
+  padding: 10px 28px;
+  position: absolute;
+  left: 0px;
+  top: 226px;
+  right: 0px;
+  height: 42px;
+`;
+
+const Nwv = styled.span`
+  color: black;
+  text-overflow: ellipsis;
+  font-size: 24px;
+  font-family: Sen, sans-serif;
+  font-weight: 800;
+  line-height: 90%;
+  text-align: right;
+  width: 319px;
+  flex: 1;
+`;
+
+const AppnameAsH1 = styled.h1`
+  color: black;
+  text-overflow: ellipsis;
+  font-size: 49px;
+  font-family: Sen, sans-serif;
+  font-weight: 800;
+  letter-spacing: -1px;
+  line-height: 90%;
+  text-align: left;
+  width: 296px;
+  position: absolute;
+  left: 40px;
+  top: 65px;
+`;
+
+const Description = styled.span`
+  color: rgb(164, 164, 164);
+  text-overflow: ellipsis;
+  font-size: 14px;
+  font-family: Roboto, sans-serif;
+  font-weight: 400;
+  text-align: center;
+  width: 296px;
+  position: absolute;
+  left: calc((calc((50% + -2px)) - 148px));
+  bottom: 193px;
+`;
+
+const ActionArea = styled.div`
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+  box-sizing: border-box;
+  padding: 0px 40px;
+  position: absolute;
+  left: 0px;
+  top: 676px;
+  right: 0px;
+  height: 53px;
+`;
+
+const ButtonMaxWidth400AsButton = styled.button`
+  background-color: black;
+  border-radius: 4px;
+  padding: 16px;
+  color: white;
+  font-size: 16px;
+  font-family: Roboto, sans-serif;
+  font-weight: 700;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  flex: 1;
+
+  :hover {
+    opacity: 0.8;
+  }
+
+  :disabled {
+    opacity: 0.5;
+  }
+
+  :active {
+    opacity: 1;
+  }
+
+  :focus {
+  }
+`;
diff --git a/packages/support-documentation/doc-meta/manager.ts b/packages/support-documentation/doc-meta/manager.ts
index 99f94086..554f2e43 100644
--- a/packages/support-documentation/doc-meta/manager.ts
+++ b/packages/support-documentation/doc-meta/manager.ts
@@ -8,8 +8,8 @@ export interface GridaWidgetDeclarationDocumentationMeta {
   delimiter: "grida.meta.widget_declaration";
   engine: string; // e.g. v.2.0.0
   platform?: string; // e.g. cli:v1.0.0 / code.grida.co:v2022.08 / grida:v0.0.0
-  uri: string; // e.g. grida.co/scenes/xxx
-  source: string; // e.g. figma.com/files/xxx/yyy
+  uri?: string; // e.g. grida.co/scenes/xxx
+  source?: string; // e.g. figma.com/files/xxx/yyy
 }
 
 class DocMetaManager {}
@@ -52,9 +52,11 @@ export class GridaTSDocWidgetDeclarationMetaManager extends GridaTSDocMetaManage
   static make(
     meta: Omit<GridaWidgetDeclarationDocumentationMeta, "delimiter">
   ) {
-    return docmeta.encode(<GridaWidgetDeclarationDocumentationMeta>{
+    return docmeta.encode(<
+      Omit<GridaWidgetDeclarationDocumentationMeta, "delimiter">
+    >{
       ...meta,
-      delimiter: "grida.meta.widget_declaration",
+      "grida.meta.widget_declaration": true,
     });
   }
 }
diff --git a/packages/support-documentation/doc-widget-declaration/types.ts b/packages/support-documentation/doc-widget-declaration/types.ts
index 4ca23cc7..a5482201 100644
--- a/packages/support-documentation/doc-widget-declaration/types.ts
+++ b/packages/support-documentation/doc-widget-declaration/types.ts
@@ -5,6 +5,7 @@ export interface WidgetModuleInfo {
   designsource?: "figma" | "unknown";
   filekey?: string;
   id: string;
+  originalname?: string;
   name: string;
 }
 export type PropsInfo = Array<Parameter>;
diff --git a/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder-react.ts b/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder-react.ts
index c6d36a4c..727cef22 100644
--- a/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder-react.ts
+++ b/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder-react.ts
@@ -6,6 +6,7 @@ import type { WidgetDeclarationInfo, WidgetModuleInfo } from "./types";
 import { GridaTSDocWidgetDeclarationMetaManager } from "../doc-meta";
 import { makeEsWidgetModuleFile } from "@web-builder/module-es";
 import { version } from "@designto/code";
+import { MainImageRepository } from "@design-sdk/core/assets-repository";
 
 class ReactWidgetDeclarationDocUsageExampleBuilder {
   protected readonly sourceuri?: string | undefined;
@@ -71,10 +72,11 @@ class ReactWidgetDeclarationDocUsageExampleBuilder {
       },
     });
 
-    const code = stringfy(file, {
-      language: "tsx",
-      indentation: 2,
-    });
+    const code =
+      stringfy(file, {
+        language: "tsx",
+        indentation: 2,
+      }).trimEnd() + "\n";
     return `\`\`\`tsx\n${code}\`\`\``;
   }
 }
@@ -106,11 +108,16 @@ export class ReactWidgetDeclarationDocBuilder extends WidgetDeclarationDocBuilde
   }
 
   protected partIntro() {
-    const link = buildOriginDesignLinkIfPossible(this.module);
-    if (link) {
-      return `${this._widgetname} - from design {@link ${link}}`;
-    }
-    return this._widgetname;
+    const nameinfo = `\`<${this.module.name}>\` ('${this.module.originalname}')`;
+    const designlink = buildOriginDesignLinkIfPossible(this.module);
+    const gridalink = buildGridaCodeLinkIfPossible(this.module);
+    return [
+      nameinfo,
+      designlink ? `- [${designlink.name}](${designlink.url})` : undefined,
+      gridalink ? `- [${gridalink.name}](${gridalink.url})` : undefined,
+    ]
+      .filter(Boolean)
+      .join("\n");
   }
 
   protected partExample() {
@@ -118,7 +125,7 @@ export class ReactWidgetDeclarationDocBuilder extends WidgetDeclarationDocBuilde
       identifier: this.widgetname,
       sourceuri: this.sourceuri,
     }).snippet();
-    return `${snippet}`;
+    return `@example\n${snippet}`;
   }
 
   protected partParams() {
@@ -130,7 +137,15 @@ export class ReactWidgetDeclarationDocBuilder extends WidgetDeclarationDocBuilde
     }
   }
   protected partPreview() {
-    return "@preview TODO: preview";
+    /**
+     * @deprecated TODO: update the asset repository pattern.
+     */
+    const _asset_key = "fill-later-assets";
+    const _tmp_img = MainImageRepository.instance.get(_asset_key).addImage({
+      key: this.module.id,
+    });
+
+    return `@preview\n![](${_tmp_img.url})`;
   }
   protected partRemarks() {
     return "@remarks\n@see {@link https://grida.co/docs/widgets} for more information.";
@@ -147,8 +162,8 @@ export class ReactWidgetDeclarationDocBuilder extends WidgetDeclarationDocBuilde
       "<!-- Info: Please do not remove this comment unless intended. removing this section will break grida integrations. -->";
     const dataline = GridaTSDocWidgetDeclarationMetaManager.make({
       engine: version,
-      source: "https://todo.com",
-      uri: "https://todo.com",
+      source: `${this.module.designsource}://${this.module.filekey}/${this.module.id}`,
+      uri: undefined,
     });
     return [infoline, dataline].join("\n");
   }
@@ -173,15 +188,14 @@ export class ReactWidgetDeclarationDocBuilder extends WidgetDeclarationDocBuilde
       this.partExample(),
       hr(),
       this.partParams(),
-      br(),
+      hr(),
+      this.partPreview(),
       hr(),
       this.partRemarks(),
-      br(),
       hr(),
       this.partPrivateRemarks(),
       br(),
       this.partBrandingFooter(),
-      br(),
       this.partGridaMetaComment(),
     ]
       .map((i) => i?.toString())
@@ -192,13 +206,30 @@ export class ReactWidgetDeclarationDocBuilder extends WidgetDeclarationDocBuilde
 
 function buildOriginDesignLinkIfPossible(
   module: WidgetModuleInfo
-): string | undefined {
+): { name: string; url: string } | undefined {
   if (module.designsource) {
     if (module.designsource === "figma") {
       if (module.filekey) {
-        return `https://figma.com/file/${module.filekey}?node-id=${module.id}`;
+        return {
+          name: "Open in Figma",
+          url: `https://figma.com/file/${module.filekey}?node-id=${module.id}`,
+        };
       }
     }
   }
   return;
 }
+
+function buildGridaCodeLinkIfPossible(
+  module: WidgetModuleInfo
+): { name: string; url: string } | undefined {
+  if (module.designsource) {
+    if (module.filekey) {
+      return {
+        name: "Open in Grida",
+        url: `https://code.grida.co/files/${module.filekey}?node=${module.id}`,
+      };
+    }
+  }
+  return;
+}

From 16c6ff32d0cc693ab00457a311cc6d7691228cf3 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sun, 24 Jul 2022 09:59:24 +0900
Subject: [PATCH 65/68] rm test

---
 packages/dirty/test.tsx | 186 ----------------------------------------
 1 file changed, 186 deletions(-)
 delete mode 100644 packages/dirty/test.tsx

diff --git a/packages/dirty/test.tsx b/packages/dirty/test.tsx
deleted file mode 100644
index b85bc68d..00000000
--- a/packages/dirty/test.tsx
+++ /dev/null
@@ -1,186 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-/**
- * `<Entry>` ('entry')
- * - [Open in Figma](https://figma.com/file/x7RRK6RwWtZuNakmbMLTVH?node-id=2422:10181)
- * - [Open in Grida](https://code.grida.co/files/x7RRK6RwWtZuNakmbMLTVH?node=2422:10181)
- *
- *
- * ---
- * @example
- * ```tsx
- * import React from "react";
- *
- * export default function () {
- *   return (
- *     <>
- *       👇 instanciate widget like below. 👇
- *       <Entry/>
- *     </>
- *   )
- * }
- * ```
- * ---
- * @params {any} props - this widget does not requires props. you can pass custom dynamic props to the widget as you want (on typescript, it will raise type check issues).
- * ---
- * @preview
- * ![](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/20e3d978-4b57-4e3d-a1c2-b974b680e507)
- * ---
- * @remarks
- * @see {@link https://grida.co/docs/widgets} for more information.
- * ---
- * Code generated by grida.co | engine 0.0.1 (Apache-2.0) | Generated code under CC0 (public domain) *This code is free to use, modify, and redistribute. (aknowledgment is not required)*
- *
- *
- * ![Made with Grida](https://bridged-service-static.s3.us-west-1.amazonaws.com/branding/logo/32.png)
- * <!-- Info: Please do not remove this comment unless intended. removing this section will break grida integrations. -->
- * <!-- grida.meta.widget_declaration | engine : 0.0.1 | source : figma://x7RRK6RwWtZuNakmbMLTVH/2422:10181 -->
- */
-export function Entry() {
-  return (
-    <RootWrapperEntry>
-      <BigCover>
-        <_2022>2022</_2022>
-        <NwvLayout>
-          <Nwv>NWV</Nwv>
-        </NwvLayout>
-      </BigCover>
-      <AppnameAsH1>Newest World Vibes</AppnameAsH1>
-      <Description>
-        Vibes More than 30,000 + All around the world. Stay tuned, Stay updated.
-      </Description>
-      <ActionArea>
-        <ButtonMaxWidth400AsButton>Get started</ButtonMaxWidth400AsButton>
-      </ActionArea>
-    </RootWrapperEntry>
-  );
-}
-
-const RootWrapperEntry = styled.div`
-  min-height: 100vh;
-  background-color: white;
-  border-radius: 4px;
-  position: relative;
-  box-shadow: 0px 4px 32px rgba(0, 0, 0, 0.08);
-`;
-
-const BigCover = styled.div`
-  height: 263px;
-  position: absolute;
-  left: 0px;
-  top: 231px;
-  right: 0px;
-`;
-
-const _2022 = styled.span`
-  color: black;
-  text-overflow: ellipsis;
-  font-size: 292px;
-  font-family: Sen, sans-serif;
-  font-weight: 800;
-  letter-spacing: -4px;
-  line-height: 90%;
-  text-align: center;
-  position: absolute;
-  left: calc((calc((50% + -71px)) - 336px));
-  top: calc((calc((50% + 0px)) - 132px));
-`;
-
-const NwvLayout = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  flex-direction: row;
-  align-items: center;
-  gap: 10px;
-  box-sizing: border-box;
-  padding: 10px 28px;
-  position: absolute;
-  left: 0px;
-  top: 226px;
-  right: 0px;
-  height: 42px;
-`;
-
-const Nwv = styled.span`
-  color: black;
-  text-overflow: ellipsis;
-  font-size: 24px;
-  font-family: Sen, sans-serif;
-  font-weight: 800;
-  line-height: 90%;
-  text-align: right;
-  width: 319px;
-  flex: 1;
-`;
-
-const AppnameAsH1 = styled.h1`
-  color: black;
-  text-overflow: ellipsis;
-  font-size: 49px;
-  font-family: Sen, sans-serif;
-  font-weight: 800;
-  letter-spacing: -1px;
-  line-height: 90%;
-  text-align: left;
-  width: 296px;
-  position: absolute;
-  left: 40px;
-  top: 65px;
-`;
-
-const Description = styled.span`
-  color: rgb(164, 164, 164);
-  text-overflow: ellipsis;
-  font-size: 14px;
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  text-align: center;
-  width: 296px;
-  position: absolute;
-  left: calc((calc((50% + -2px)) - 148px));
-  bottom: 193px;
-`;
-
-const ActionArea = styled.div`
-  display: flex;
-  justify-content: center;
-  flex-direction: row;
-  align-items: center;
-  gap: 10px;
-  box-sizing: border-box;
-  padding: 0px 40px;
-  position: absolute;
-  left: 0px;
-  top: 676px;
-  right: 0px;
-  height: 53px;
-`;
-
-const ButtonMaxWidth400AsButton = styled.button`
-  background-color: black;
-  border-radius: 4px;
-  padding: 16px;
-  color: white;
-  font-size: 16px;
-  font-family: Roboto, sans-serif;
-  font-weight: 700;
-  border: none;
-  outline: none;
-  cursor: pointer;
-  flex: 1;
-
-  :hover {
-    opacity: 0.8;
-  }
-
-  :disabled {
-    opacity: 0.5;
-  }
-
-  :active {
-    opacity: 1;
-  }
-
-  :focus {
-  }
-`;

From 967ef8c20a13f53e6d17920c39339f1ed9edcac5 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sun, 24 Jul 2022 10:05:19 +0900
Subject: [PATCH 66/68] add example output

---
 .../__test__/vscode-tsdoc-render-real.test.ts | 40 +++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 packages/support-documentation/doc-widget-declaration/__test__/vscode-tsdoc-render-real.test.ts

diff --git a/packages/support-documentation/doc-widget-declaration/__test__/vscode-tsdoc-render-real.test.ts b/packages/support-documentation/doc-widget-declaration/__test__/vscode-tsdoc-render-real.test.ts
new file mode 100644
index 00000000..cc015b78
--- /dev/null
+++ b/packages/support-documentation/doc-widget-declaration/__test__/vscode-tsdoc-render-real.test.ts
@@ -0,0 +1,40 @@
+/// real output from d2c
+/**
+ * `<MusicHome>` ('music-home')
+ * - [Open in Figma](https://figma.com/file/x7RRK6RwWtZuNakmbMLTVH?node-id=2422:10298)
+ * - [Open in Grida](https://code.grida.co/files/x7RRK6RwWtZuNakmbMLTVH?node=2422:10298)
+ *
+ *
+ * ---
+ * @example
+ * ```tsx
+ * import React from "react";
+ *
+ * export default function () {
+ *   return (
+ *     <>
+ *       👇 instanciate widget like below. 👇
+ *       <MusicHome/>
+ *     </>
+ *   )
+ * }
+ * ```
+ * ---
+ * @params {any} props - this widget does not requires props. you can pass custom dynamic props to the widget as you want (on typescript, it will raise type check issues).
+ * ---
+ * @preview
+ * ![](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/ab378a33-de99-457f-8937-d7f1f0537968)
+ * ---
+ * @remarks
+ * @see {@link https://grida.co/docs/widgets} for more information.
+ * ---
+ * Code generated by grida.co | engine 0.0.1 (Apache-2.0) | Generated code under CC0 (public domain) *This code is free to use, modify, and redistribute. (aknowledgment is not required)*
+ *
+ *
+ * ![Made with Grida](https://bridged-service-static.s3.us-west-1.amazonaws.com/branding/logo/32.png)
+ * <!-- Info: Please do not remove this comment unless intended. removing this section will break grida integrations. -->
+ * <!-- grida.meta.widget_declaration | engine : 0.0.1 | source : figma://x7RRK6RwWtZuNakmbMLTVH/2422:10298 -->
+ */
+export function MusicHome() {
+  // ...
+}

From 4133140b3274a011422bf28615a1bae625268188 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Mon, 25 Jul 2022 11:05:45 +0900
Subject: [PATCH 67/68] add docgen support for react native, solidjs (with some
 abstraction)

---
 .../rn-inline-style-module-builder.ts         |  27 ++-
 .../rn-styled-components-module-builder.ts    |  27 ++-
 .../rn-style-sheet-module-builder.ts          |  31 ++-
 .../rn-import-specifications/rn-default.ts    |   2 +-
 .../react-css-module-module-builder.ts        |  25 +-
 .../react-inline-css-module-builder.ts        |  25 +-
 .../solid-inline-css-module-builder.ts        |  25 +-
 .../solid-styled-components-module-builder.ts |  25 +-
 .../doc-widget-declaration/index.ts           |   2 +
 .../widget-declaration-doc-builder-jsx.ts     | 224 ++++++++++++++++++
 ...et-declaration-doc-builder-react-native.ts |  47 ++++
 .../widget-declaration-doc-builder-react.ts   | 219 ++---------------
 .../widget-declaration-doc-builder-solidjs.ts |  46 ++++
 .../widget-declaration-doc-builder.ts         |   2 +-
 14 files changed, 509 insertions(+), 218 deletions(-)
 create mode 100644 packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder-jsx.ts
 create mode 100644 packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder-react-native.ts
 create mode 100644 packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder-solidjs.ts

diff --git a/packages/builder-react-native/rn-build-inline-style-widget/rn-inline-style-module-builder.ts b/packages/builder-react-native/rn-build-inline-style-widget/rn-inline-style-module-builder.ts
index d2eaf2c0..a1feee5d 100644
--- a/packages/builder-react-native/rn-build-inline-style-widget/rn-inline-style-module-builder.ts
+++ b/packages/builder-react-native/rn-build-inline-style-widget/rn-inline-style-module-builder.ts
@@ -31,6 +31,11 @@ import { CSSProperties } from "@coli.codes/css";
 import { reactnative_imports } from "..";
 import { makeEsWidgetModuleFile } from "@web-builder/module-es";
 import { JSXWidgetModuleBuilder } from "@web-builder/module-jsx";
+import { extractMetaFromWidgetKey } from "@designto/token/key";
+import {
+  ReactNativeWidgetDeclarationDocBuilder,
+  WidgetDeclarationDocumentation,
+} from "@code-features/documentation";
 
 /**
  * CSS In JS Style builder for React Framework
@@ -142,7 +147,7 @@ export class ReactNativeInlineStyleBuilder extends JSXWidgetModuleBuilder<reactn
   protected partImports() {
     return [
       react_imports.import_react_from_react,
-      reactnative_imports.import_react_prepacked,
+      reactnative_imports.import_react_native_prepacked,
     ];
   }
 
@@ -152,15 +157,29 @@ export class ReactNativeInlineStyleBuilder extends JSXWidgetModuleBuilder<reactn
   }
 
   protected partDocumentation() {
-    return undefined;
+    const metafromkey = extractMetaFromWidgetKey(this.entry.key);
+    const docstr = new ReactNativeWidgetDeclarationDocBuilder({
+      module: {
+        ...metafromkey,
+      },
+      declaration: {
+        type: "unknown",
+        identifier: this.widgetName,
+      },
+      params: undefined,
+      defaultValues: undefined,
+    }).make();
+    return docstr;
   }
 
   asExportableModule() {
+    const doc = this.partDocumentation();
     const body = this.partBody();
     const imports = this.partImports();
     return new ReactNativeInlineStyleWidgetModuleExportable(this.widgetName, {
       body,
       imports,
+      documentation: doc,
     });
   }
 }
@@ -171,15 +190,18 @@ export class ReactNativeInlineStyleWidgetModuleExportable extends ReactWidgetMod
     {
       body,
       imports,
+      documentation,
     }: {
       body: BlockStatement;
       imports: ImportDeclaration[];
+      documentation: WidgetDeclarationDocumentation;
     }
   ) {
     super({
       name,
       body,
       imports,
+      documentation: documentation,
     });
   }
 
@@ -194,6 +216,7 @@ export class ReactNativeInlineStyleWidgetModuleExportable extends ReactWidgetMod
       imports: this.imports,
       declarations: [],
       body: this.body,
+      documentation: this.documentation,
       config: {
         exporting: exporting,
       },
diff --git a/packages/builder-react-native/rn-build-styled-component-widget/rn-styled-components-module-builder.ts b/packages/builder-react-native/rn-build-styled-component-widget/rn-styled-components-module-builder.ts
index beeea23a..b3856e8f 100644
--- a/packages/builder-react-native/rn-build-styled-component-widget/rn-styled-components-module-builder.ts
+++ b/packages/builder-react-native/rn-build-styled-component-widget/rn-styled-components-module-builder.ts
@@ -27,6 +27,11 @@ import {
 import { makeEsWidgetModuleFile } from "@web-builder/module-es";
 import { Framework } from "@grida/builder-platform-types";
 import { JSXWidgetModuleBuilder } from "@web-builder/module-jsx";
+import { extractMetaFromWidgetKey } from "@designto/token/key";
+import {
+  ReactNativeWidgetDeclarationDocBuilder,
+  WidgetDeclarationDocumentation,
+} from "@code-features/documentation";
 
 export class ReactNativeStyledComponentsModuleBuilder extends JSXWidgetModuleBuilder<rn_config.ReactNativeStyledComponentsConfig> {
   constructor({
@@ -99,7 +104,7 @@ export class ReactNativeStyledComponentsModuleBuilder extends JSXWidgetModuleBui
   }
 
   protected partImportReactNative() {
-    return reactnative_imports.import_react_prepacked;
+    return reactnative_imports.import_react_native_prepacked;
   }
 
   protected partBody(): BlockStatement {
@@ -108,7 +113,19 @@ export class ReactNativeStyledComponentsModuleBuilder extends JSXWidgetModuleBui
   }
 
   protected partDocumentation() {
-    return undefined;
+    const metafromkey = extractMetaFromWidgetKey(this.entry.key);
+    const docstr = new ReactNativeWidgetDeclarationDocBuilder({
+      module: {
+        ...metafromkey,
+      },
+      declaration: {
+        type: "unknown",
+        identifier: this.widgetName,
+      },
+      params: undefined,
+      defaultValues: undefined,
+    }).make();
+    return docstr;
   }
 
   protected partDeclarations() {
@@ -121,6 +138,7 @@ export class ReactNativeStyledComponentsModuleBuilder extends JSXWidgetModuleBui
   }
 
   public asExportableModule() {
+    const doc = this.partDocumentation();
     const body = this.partBody();
     const imports = this.partImports();
     const styled_declarations = this.partDeclarations();
@@ -129,6 +147,7 @@ export class ReactNativeStyledComponentsModuleBuilder extends JSXWidgetModuleBui
       {
         body,
         imports,
+        documentation: doc,
         declarations: styled_declarations,
       },
       {
@@ -146,10 +165,12 @@ export class ReactNativeStyledComponentWidgetModuleExportable extends ReactWidge
     {
       body,
       imports,
+      documentation,
       declarations,
     }: {
       body: BlockStatement;
       imports: ImportDeclaration[];
+      documentation: WidgetDeclarationDocumentation;
       declarations: StyledComponentDeclaration[];
     },
     {
@@ -162,6 +183,7 @@ export class ReactNativeStyledComponentWidgetModuleExportable extends ReactWidge
       name,
       body,
       imports,
+      documentation,
     });
 
     this.declarations = declarations;
@@ -178,6 +200,7 @@ export class ReactNativeStyledComponentWidgetModuleExportable extends ReactWidge
       imports: this.imports,
       declarations: this.declarations,
       body: this.body,
+      documentation: this.documentation,
       config: {
         exporting: exporting,
       },
diff --git a/packages/builder-react-native/rn-build-stylesheet-widget/rn-style-sheet-module-builder.ts b/packages/builder-react-native/rn-build-stylesheet-widget/rn-style-sheet-module-builder.ts
index d3db2d7a..4a0a6eb2 100644
--- a/packages/builder-react-native/rn-build-stylesheet-widget/rn-style-sheet-module-builder.ts
+++ b/packages/builder-react-native/rn-build-stylesheet-widget/rn-style-sheet-module-builder.ts
@@ -30,6 +30,11 @@ import { create_duplication_reduction_map } from "@web-builder/styled";
 import { makeEsWidgetModuleFile } from "@web-builder/module-es";
 import { Framework } from "@grida/builder-platform-types";
 import { JSXWidgetModuleBuilder } from "@web-builder/module-jsx";
+import { extractMetaFromWidgetKey } from "@designto/token/key";
+import {
+  ReactNativeWidgetDeclarationDocBuilder,
+  WidgetDeclarationDocumentation,
+} from "@code-features/documentation";
 export class ReactNativeStyleSheetModuleBuilder extends JSXWidgetModuleBuilder<rn_config.ReactNativeStyleSheetConfig> {
   constructor({
     entry,
@@ -131,7 +136,7 @@ export class ReactNativeStyleSheetModuleBuilder extends JSXWidgetModuleBuilder<r
   }
 
   protected partImportReactNative(): ImportDeclaration {
-    return reactnative_imports.import_react_prepacked;
+    return reactnative_imports.import_react_native_prepacked;
   }
 
   protected partBody(): BlockStatement {
@@ -140,7 +145,19 @@ export class ReactNativeStyleSheetModuleBuilder extends JSXWidgetModuleBuilder<r
   }
 
   protected partDocumentation() {
-    return undefined;
+    const metafromkey = extractMetaFromWidgetKey(this.entry.key);
+    const docstr = new ReactNativeWidgetDeclarationDocBuilder({
+      module: {
+        ...metafromkey,
+      },
+      declaration: {
+        type: "unknown",
+        identifier: this.widgetName,
+      },
+      params: undefined,
+      defaultValues: undefined,
+    }).make();
+    return docstr;
   }
 
   protected partStyleSheetDeclaration(): StyleSheetDeclaration<any> {
@@ -161,28 +178,32 @@ export class ReactNativeStyleSheetModuleBuilder extends JSXWidgetModuleBuilder<r
   }
 
   public asExportableModule() {
+    const doc = this.partDocumentation();
     const body = this.partBody();
     const imports = this.partImports();
     const declarations = this.partStyleSheetDeclaration();
-    return new ReactStyleSheeteWidgetModuleExportable(this.widgetName, {
+    return new ReactNativeStyleSheeteWidgetModuleExportable(this.widgetName, {
       body,
       imports,
+      documentation: doc,
       stylesheetDeclaraion: declarations,
     });
   }
 }
 
-export class ReactStyleSheeteWidgetModuleExportable extends ReactWidgetModuleExportable {
+export class ReactNativeStyleSheeteWidgetModuleExportable extends ReactWidgetModuleExportable {
   readonly declarations: Declaration[];
   constructor(
     name,
     {
       body,
       imports,
+      documentation,
       stylesheetDeclaraion,
     }: {
       body: BlockStatement;
       imports: ImportDeclaration[];
+      documentation: WidgetDeclarationDocumentation;
       stylesheetDeclaraion: StyleSheetDeclaration<any>;
     }
   ) {
@@ -190,6 +211,7 @@ export class ReactStyleSheeteWidgetModuleExportable extends ReactWidgetModuleExp
       name,
       body,
       imports,
+      documentation,
     });
 
     this.declarations = [stylesheetDeclaraion];
@@ -205,6 +227,7 @@ export class ReactStyleSheeteWidgetModuleExportable extends ReactWidgetModuleExp
       path: "src/components",
       imports: this.imports,
       declarations: this.declarations,
+      documentation: this.documentation,
       body: this.body,
       config: {
         exporting: exporting,
diff --git a/packages/builder-react-native/rn-import-specifications/rn-default.ts b/packages/builder-react-native/rn-import-specifications/rn-default.ts
index b1a4116a..44fbf96e 100644
--- a/packages/builder-react-native/rn-import-specifications/rn-default.ts
+++ b/packages/builder-react-native/rn-import-specifications/rn-default.ts
@@ -79,5 +79,5 @@ export const reactnative_imports = {
    *
    * `import { StyleSheet, Text, View } from "react-native";`
    */
-  import_react_prepacked: import_stylesheet_text_view_from_react_native,
+  import_react_native_prepacked: import_stylesheet_text_view_from_react_native,
 };
diff --git a/packages/builder-web-react/react-css-module-widget/react-css-module-module-builder.ts b/packages/builder-web-react/react-css-module-widget/react-css-module-module-builder.ts
index 2effcccb..a35e5110 100644
--- a/packages/builder-web-react/react-css-module-widget/react-css-module-module-builder.ts
+++ b/packages/builder-web-react/react-css-module-widget/react-css-module-module-builder.ts
@@ -25,6 +25,11 @@ import { create_duplication_reduction_map } from "@web-builder/styled";
 import { makeEsWidgetModuleFile } from "@web-builder/module-es";
 import { Framework } from "@grida/builder-platform-types";
 import { JSXWidgetModuleBuilder } from "@web-builder/module-jsx";
+import { extractMetaFromWidgetKey } from "@designto/token/key";
+import {
+  ReactWidgetDeclarationDocBuilder,
+  WidgetDeclarationDocumentation,
+} from "@code-features/documentation";
 
 /**
  * CSS Module Builder for React Framework
@@ -147,14 +152,28 @@ export class ReactCssModuleBuilder extends JSXWidgetModuleBuilder<react_config.R
   }
 
   protected partDocumentation() {
-    return undefined;
+    const metafromkey = extractMetaFromWidgetKey(this.entry.key);
+    const docstr = new ReactWidgetDeclarationDocBuilder({
+      module: {
+        ...metafromkey,
+      },
+      declaration: {
+        type: "unknown",
+        identifier: this.widgetName,
+      },
+      params: undefined,
+      defaultValues: undefined,
+    }).make();
+    return docstr;
   }
 
   public asExportableModule() {
+    const doc = this.partDocumentation();
     const body = this.partBody();
     const imports = this.partImports();
     return new ReactCssModuleWidgetModuleExportable(this.widgetName, {
       body,
+      documentation: doc,
       imports,
     });
   }
@@ -166,8 +185,10 @@ export class ReactCssModuleWidgetModuleExportable extends ReactWidgetModuleExpor
     {
       body,
       imports,
+      documentation,
     }: {
       body: BlockStatement;
+      documentation: WidgetDeclarationDocumentation;
       imports: ImportDeclaration[];
     }
   ) {
@@ -175,6 +196,7 @@ export class ReactCssModuleWidgetModuleExportable extends ReactWidgetModuleExpor
       name,
       body,
       imports,
+      documentation,
     });
   }
 
@@ -189,6 +211,7 @@ export class ReactCssModuleWidgetModuleExportable extends ReactWidgetModuleExpor
       imports: this.imports,
       declarations: [],
       body: this.body,
+      documentation: this.documentation,
       config: {
         exporting: exporting,
       },
diff --git a/packages/builder-web-react/react-inline-css-widget/react-inline-css-module-builder.ts b/packages/builder-web-react/react-inline-css-widget/react-inline-css-module-builder.ts
index 16f297ce..8d1d743a 100644
--- a/packages/builder-web-react/react-inline-css-widget/react-inline-css-module-builder.ts
+++ b/packages/builder-web-react/react-inline-css-widget/react-inline-css-module-builder.ts
@@ -27,6 +27,11 @@ import { CSSProperties } from "@coli.codes/css";
 import { makeEsWidgetModuleFile } from "@web-builder/module-es";
 import { Framework } from "@grida/builder-platform-types";
 import { JSXWidgetModuleBuilder } from "@web-builder/module-jsx";
+import { extractMetaFromWidgetKey } from "@designto/token/key";
+import {
+  ReactWidgetDeclarationDocBuilder,
+  WidgetDeclarationDocumentation,
+} from "@code-features/documentation";
 
 /**
  * InlineCss Style builder for React Framework
@@ -151,15 +156,29 @@ export class ReactInlineCssBuilder extends JSXWidgetModuleBuilder<react_config.R
   }
 
   protected partDocumentation() {
-    return undefined;
+    const metafromkey = extractMetaFromWidgetKey(this.entry.key);
+    const docstr = new ReactWidgetDeclarationDocBuilder({
+      module: {
+        ...metafromkey,
+      },
+      declaration: {
+        type: "unknown",
+        identifier: this.widgetName,
+      },
+      params: undefined,
+      defaultValues: undefined,
+    }).make();
+    return docstr;
   }
 
   asExportableModule() {
+    const doc = this.partDocumentation();
     const body = this.partBody();
     const imports = this.partImports();
     return new ReactInlineCssWidgetModuleExportable(this.widgetName, {
       body,
       imports,
+      documentation: doc,
     });
   }
 }
@@ -170,15 +189,18 @@ export class ReactInlineCssWidgetModuleExportable extends ReactWidgetModuleExpor
     {
       body,
       imports,
+      documentation,
     }: {
       body: BlockStatement;
       imports: ImportDeclaration[];
+      documentation: WidgetDeclarationDocumentation;
     }
   ) {
     super({
       name,
       body,
       imports,
+      documentation,
     });
   }
 
@@ -193,6 +215,7 @@ export class ReactInlineCssWidgetModuleExportable extends ReactWidgetModuleExpor
       imports: this.imports,
       declarations: [],
       body: this.body,
+      documentation: this.documentation,
       config: {
         exporting: exporting,
       },
diff --git a/packages/builder-web-solid/solid-inline-css-widget/solid-inline-css-module-builder.ts b/packages/builder-web-solid/solid-inline-css-widget/solid-inline-css-module-builder.ts
index 50da2bda..c5e0312a 100644
--- a/packages/builder-web-solid/solid-inline-css-widget/solid-inline-css-module-builder.ts
+++ b/packages/builder-web-solid/solid-inline-css-widget/solid-inline-css-module-builder.ts
@@ -29,6 +29,11 @@ import {
 } from "@web-builder/module-es";
 import { Framework } from "@grida/builder-platform-types";
 import { JSXWidgetModuleBuilder } from "@web-builder/module-jsx";
+import { extractMetaFromWidgetKey } from "@designto/token/key";
+import {
+  SolidJSWidgetDeclarationDocBuilder,
+  WidgetDeclarationDocumentation,
+} from "@code-features/documentation";
 
 /**
  * InlineCss Style builder for SolidJS Framework
@@ -150,14 +155,28 @@ export class SolidInlineCssBuilder extends JSXWidgetModuleBuilder<solid_config.S
   }
 
   protected partDocumentation() {
-    return undefined;
+    const metafromkey = extractMetaFromWidgetKey(this.entry.key);
+    const docstr = new SolidJSWidgetDeclarationDocBuilder({
+      module: {
+        ...metafromkey,
+      },
+      declaration: {
+        type: "unknown",
+        identifier: this.widgetName,
+      },
+      params: undefined,
+      defaultValues: undefined,
+    }).make();
+    return docstr;
   }
 
   public asExportableModule() {
+    const doc = this.partDocumentation();
     const body = this.partBody();
     const imports = this.partImports();
     return new SolidInlineCssWidgetModuleExportable(this.widgetName, {
       body,
+      documentation: doc,
       imports,
     });
   }
@@ -168,9 +187,11 @@ export class SolidInlineCssWidgetModuleExportable extends EsWidgetModuleExportab
     name,
     {
       body,
+      documentation,
       imports,
     }: {
       body: BlockStatement;
+      documentation: WidgetDeclarationDocumentation;
       imports: ImportDeclaration[];
     }
   ) {
@@ -178,6 +199,7 @@ export class SolidInlineCssWidgetModuleExportable extends EsWidgetModuleExportab
       name,
       body,
       imports,
+      documentation,
     });
   }
 
@@ -192,6 +214,7 @@ export class SolidInlineCssWidgetModuleExportable extends EsWidgetModuleExportab
       imports: this.imports,
       declarations: [],
       body: this.body,
+      documentation: this.documentation,
       config: {
         exporting: exporting,
       },
diff --git a/packages/builder-web-solid/solid-styled-component-widget/solid-styled-components-module-builder.ts b/packages/builder-web-solid/solid-styled-component-widget/solid-styled-components-module-builder.ts
index 830abae0..424395d8 100644
--- a/packages/builder-web-solid/solid-styled-component-widget/solid-styled-components-module-builder.ts
+++ b/packages/builder-web-solid/solid-styled-component-widget/solid-styled-components-module-builder.ts
@@ -23,6 +23,11 @@ import {
 } from "@web-builder/module-es";
 import { Framework } from "@grida/builder-platform-types";
 import { JSXWidgetModuleBuilder } from "@web-builder/module-jsx";
+import { extractMetaFromWidgetKey } from "@designto/token/key";
+import {
+  SolidJSWidgetDeclarationDocBuilder,
+  WidgetDeclarationDocumentation,
+} from "@code-features/documentation";
 
 export class SolidStyledComponentsBuilder extends JSXWidgetModuleBuilder<solid_config.SolidStyledComponentsConfig> {
   constructor({
@@ -98,7 +103,19 @@ export class SolidStyledComponentsBuilder extends JSXWidgetModuleBuilder<solid_c
   }
 
   protected partDocumentation() {
-    return undefined;
+    const metafromkey = extractMetaFromWidgetKey(this.entry.key);
+    const docstr = new SolidJSWidgetDeclarationDocBuilder({
+      module: {
+        ...metafromkey,
+      },
+      declaration: {
+        type: "unknown",
+        identifier: this.widgetName,
+      },
+      params: undefined,
+      defaultValues: undefined,
+    }).make();
+    return docstr;
   }
 
   protected partDeclarations() {
@@ -111,6 +128,7 @@ export class SolidStyledComponentsBuilder extends JSXWidgetModuleBuilder<solid_c
   }
 
   public asExportableModule() {
+    const doc = this.partDocumentation();
     const body = this.partBody();
     const imports = this.partImports();
     const styled_declarations = this.partDeclarations();
@@ -119,6 +137,7 @@ export class SolidStyledComponentsBuilder extends JSXWidgetModuleBuilder<solid_c
       {
         body,
         imports,
+        documentation: doc,
         declarations: styled_declarations,
       },
       {
@@ -136,10 +155,12 @@ export class SolidStyledComponentWidgetModuleExportable extends EsWidgetModuleEx
     {
       body,
       imports,
+      documentation,
       declarations,
     }: {
       body: BlockStatement;
       imports: ImportDeclaration[];
+      documentation: WidgetDeclarationDocumentation;
       declarations: StyledComponentDeclaration[];
     },
     {
@@ -152,6 +173,7 @@ export class SolidStyledComponentWidgetModuleExportable extends EsWidgetModuleEx
       name,
       body,
       imports,
+      documentation,
     });
 
     this.declarations = declarations;
@@ -167,6 +189,7 @@ export class SolidStyledComponentWidgetModuleExportable extends EsWidgetModuleEx
       path: "src/components",
       imports: this.imports,
       declarations: this.declarations,
+      documentation: this.documentation,
       body: this.body,
       config: {
         exporting: exporting,
diff --git a/packages/support-documentation/doc-widget-declaration/index.ts b/packages/support-documentation/doc-widget-declaration/index.ts
index 4a800297..aac12da2 100644
--- a/packages/support-documentation/doc-widget-declaration/index.ts
+++ b/packages/support-documentation/doc-widget-declaration/index.ts
@@ -13,3 +13,5 @@ export default make_widget_declaration_doc_for;
 export type WidgetDeclarationDocumentation = string;
 
 export { ReactWidgetDeclarationDocBuilder } from "./widget-declaration-doc-builder-react";
+export { ReactNativeWidgetDeclarationDocBuilder } from "./widget-declaration-doc-builder-react-native";
+export { SolidJSWidgetDeclarationDocBuilder } from "./widget-declaration-doc-builder-solidjs";
diff --git a/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder-jsx.ts b/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder-jsx.ts
new file mode 100644
index 00000000..73c431a9
--- /dev/null
+++ b/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder-jsx.ts
@@ -0,0 +1,224 @@
+import { license, version } from "@designto/code";
+import { WidgetDeclarationDocBuilder } from "./widget-declaration-doc-builder";
+import { MainImageRepository } from "@design-sdk/core/assets-repository";
+import { GridaTSDocWidgetDeclarationMetaManager } from "../doc-meta";
+import type { WidgetModuleInfo, WidgetDeclarationInfo } from "./types";
+import { BlockStatement, ImportDeclaration, JSX, Return } from "coli";
+import { stringfy } from "@coli.codes/export-string";
+import { makeEsWidgetModuleFile } from "@web-builder/module-es";
+
+export abstract class JsxWidgetDeclarationDocUsageExampleBuilder {
+  protected readonly sourceuri?: string | undefined;
+  protected readonly identifier: string;
+  protected readonly params;
+  protected readonly module: WidgetModuleInfo;
+
+  constructor({
+    identifier,
+    sourceuri,
+  }: {
+    identifier: string;
+    sourceuri?: string;
+  }) {
+    this.identifier = identifier;
+    this.sourceuri = sourceuri;
+  }
+
+  protected abstract partImportFramework();
+
+  protected abstract partImport(): ImportDeclaration | undefined;
+
+  protected partInstanciation() {
+    if (this.params) {
+      return JSX.tag(this.identifier, this.params);
+    } else {
+      return JSX.tag(this.identifier);
+    }
+  }
+
+  protected partBody() {
+    return new BlockStatement(
+      new Return(
+        JSX.fragment({
+          children: [
+            JSX.text("👇 instanciate widget like below. 👇"),
+            this.partInstanciation(),
+          ],
+        }).make()
+      )
+    );
+  }
+
+  public snippet() {
+    const file = makeEsWidgetModuleFile({
+      name: "example.tsx",
+      path: "tmp/examples",
+      imports: [this.partImportFramework(), this.partImport()].filter(
+        Boolean
+      ) as ImportDeclaration[],
+      body: this.partBody(),
+      config: {
+        exporting: {
+          type: "export-default-anonymous-functional-component",
+          exporting_position: "with-declaration",
+          declaration_syntax_choice: "inlinefunction",
+          export_declaration_syntax_choice: "export-default",
+        },
+      },
+    });
+
+    const code =
+      stringfy(file, {
+        language: "tsx",
+        indentation: 2,
+      }).trimEnd() + "\n";
+    return `\`\`\`tsx\n${code}\`\`\``;
+  }
+}
+
+export abstract class JsxWidgetDeclarationDocBuilder extends WidgetDeclarationDocBuilder {
+  protected readonly sourceuri?: string | undefined;
+
+  constructor({
+    sourceuri,
+    ...p
+  }: {
+    module: WidgetModuleInfo;
+    declaration: WidgetDeclarationInfo;
+    params: any;
+    defaultValues: any;
+    sourceuri?: string;
+  }) {
+    super(p);
+
+    this.sourceuri = sourceuri;
+  }
+
+  private get _widgetname(): string {
+    if (this.anonymous) {
+      return "Anonymous Widget";
+    } else {
+      return `${this.widgetname}`;
+    }
+  }
+
+  protected partIntro() {
+    const nameinfo = `\`<${this.module.name}>\` ('${this.module.originalname}')`;
+    const designlink = buildOriginDesignLinkIfPossible(this.module);
+    const gridalink = buildGridaCodeLinkIfPossible(this.module);
+    return [
+      nameinfo,
+      designlink ? `- [${designlink.name}](${designlink.url})` : undefined,
+      gridalink ? `- [${gridalink.name}](${gridalink.url})` : undefined,
+    ]
+      .filter(Boolean)
+      .join("\n");
+  }
+
+  protected abstract partExample();
+
+  protected partParams() {
+    if (this.params) {
+      return "TODO: params";
+    } else {
+      // provide default params document
+      return "@params {any} props - this widget does not requires props. you can pass custom dynamic props to the widget as you want (on typescript, it will raise type check issues).";
+    }
+  }
+  protected partPreview() {
+    /**
+     * @deprecated TODO: update the asset repository pattern.
+     */
+    const _asset_key = "fill-later-assets";
+    const _tmp_img = MainImageRepository.instance.get(_asset_key).addImage({
+      key: this.module.id,
+    });
+
+    return `@preview\n![](${_tmp_img.url})`;
+  }
+  protected partRemarks() {
+    return "@remarks\n@see {@link https://grida.co/docs} for more information.";
+  }
+
+  protected partBrandingFooter() {
+    return [
+      "![Made with Grida](https://bridged-service-static.s3.us-west-1.amazonaws.com/branding/logo/32.png)",
+    ].join("\n");
+  }
+
+  protected partGridaMetaComment() {
+    const infoline =
+      "<!-- Info: Please do not remove this comment unless intended. removing this section will break grida integrations. -->";
+    const dataline = GridaTSDocWidgetDeclarationMetaManager.make({
+      engine: version,
+      source: `${this.module.designsource}://${this.module.filekey}/${this.module.id}`,
+      uri: undefined,
+    });
+    return [infoline, dataline].join("\n");
+  }
+
+  protected divider() {
+    return "---";
+  }
+
+  protected break() {
+    return "\n";
+  }
+  //
+
+  public make() {
+    const hr = this.divider;
+    const br = this.break;
+
+    return [
+      this.partIntro(),
+      br(),
+      hr(),
+      this.partExample(),
+      hr(),
+      this.partParams(),
+      hr(),
+      this.partPreview(),
+      hr(),
+      this.partRemarks(),
+      hr(),
+      this.partPrivateRemarks(),
+      br(),
+      this.partBrandingFooter(),
+      this.partGridaMetaComment(),
+    ]
+      .map((i) => i?.toString())
+      .filter(Boolean)
+      .join("\n");
+  }
+}
+
+function buildOriginDesignLinkIfPossible(
+  module: WidgetModuleInfo
+): { name: string; url: string } | undefined {
+  if (module.designsource) {
+    if (module.designsource === "figma") {
+      if (module.filekey) {
+        return {
+          name: "Open in Figma",
+          url: `https://figma.com/file/${module.filekey}?node-id=${module.id}`,
+        };
+      }
+    }
+  }
+  return;
+}
+
+function buildGridaCodeLinkIfPossible(
+  module: WidgetModuleInfo
+): { name: string; url: string } | undefined {
+  if (module.designsource) {
+    if (module.filekey) {
+      return {
+        name: "Open in Grida",
+        url: `https://code.grida.co/files/${module.filekey}?node=${module.id}`,
+      };
+    }
+  }
+  return;
+}
diff --git a/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder-react-native.ts b/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder-react-native.ts
new file mode 100644
index 00000000..23c279bb
--- /dev/null
+++ b/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder-react-native.ts
@@ -0,0 +1,47 @@
+import type { ImportDeclaration } from "coli";
+import {
+  JsxWidgetDeclarationDocBuilder,
+  JsxWidgetDeclarationDocUsageExampleBuilder,
+} from "./widget-declaration-doc-builder-jsx";
+import { reactnative_imports } from "@web-builder/react-native";
+import type { WidgetDeclarationInfo, WidgetModuleInfo } from "./types";
+import { ReactWidgetDeclarationDocBuilder } from "./widget-declaration-doc-builder-react";
+
+class ReactNativeWidgetDeclarationDocUsageExampleBuilder extends JsxWidgetDeclarationDocUsageExampleBuilder {
+  constructor(p: { identifier: string; sourceuri?: string }) {
+    super(p);
+  }
+
+  protected partImportReactNative() {
+    return reactnative_imports.import_react_native_prepacked;
+  }
+
+  protected partImportFramework() {
+    return this.partImportReactNative();
+  }
+
+  protected partImport(): ImportDeclaration | undefined {
+    // TODO: module import example not supproted
+    return undefined;
+  }
+}
+
+export class ReactNativeWidgetDeclarationDocBuilder extends ReactWidgetDeclarationDocBuilder {
+  constructor(p: {
+    module: WidgetModuleInfo;
+    declaration: WidgetDeclarationInfo;
+    params: any;
+    defaultValues: any;
+    sourceuri?: string;
+  }) {
+    super(p);
+  }
+
+  protected partExample() {
+    const snippet = new ReactNativeWidgetDeclarationDocUsageExampleBuilder({
+      identifier: this.widgetname,
+      sourceuri: this.sourceuri,
+    }).snippet();
+    return `@example\n${snippet}`;
+  }
+}
diff --git a/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder-react.ts b/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder-react.ts
index 727cef22..a69b059c 100644
--- a/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder-react.ts
+++ b/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder-react.ts
@@ -1,93 +1,32 @@
-import { BlockStatement, ImportDeclaration, JSX, Return } from "coli";
-import { stringfy } from "@coli.codes/export-string";
-import { WidgetDeclarationDocBuilder } from "./widget-declaration-doc-builder";
+import type { ImportDeclaration } from "coli";
+import {
+  JsxWidgetDeclarationDocBuilder,
+  JsxWidgetDeclarationDocUsageExampleBuilder,
+} from "./widget-declaration-doc-builder-jsx";
 import { react_imports } from "@web-builder/react-core";
 import type { WidgetDeclarationInfo, WidgetModuleInfo } from "./types";
-import { GridaTSDocWidgetDeclarationMetaManager } from "../doc-meta";
-import { makeEsWidgetModuleFile } from "@web-builder/module-es";
-import { version } from "@designto/code";
-import { MainImageRepository } from "@design-sdk/core/assets-repository";
 
-class ReactWidgetDeclarationDocUsageExampleBuilder {
-  protected readonly sourceuri?: string | undefined;
-  protected readonly identifier: string;
-  protected readonly params;
-  protected readonly module: WidgetModuleInfo;
-
-  constructor({
-    identifier,
-    sourceuri,
-  }: {
-    identifier: string;
-    sourceuri?: string;
-  }) {
-    this.identifier = identifier;
-    this.sourceuri = sourceuri;
+class ReactWidgetDeclarationDocUsageExampleBuilder extends JsxWidgetDeclarationDocUsageExampleBuilder {
+  constructor(p: { identifier: string; sourceuri?: string }) {
+    super(p);
   }
 
   protected partImportReact() {
     return react_imports.import_react_minimal;
   }
-  protected partImport(): ImportDeclaration | undefined {
-    // TODO: module import example not supproted
-    return undefined;
-  }
 
-  protected partInstanciation() {
-    if (this.params) {
-      return JSX.tag(this.identifier, this.params);
-    } else {
-      return JSX.tag(this.identifier);
-    }
+  protected partImportFramework() {
+    return this.partImportReact();
   }
 
-  protected partBody() {
-    return new BlockStatement(
-      new Return(
-        JSX.fragment({
-          children: [
-            JSX.text("👇 instanciate widget like below. 👇"),
-            this.partInstanciation(),
-          ],
-        }).make()
-      )
-    );
-  }
-
-  public snippet() {
-    const file = makeEsWidgetModuleFile({
-      name: "example.tsx",
-      path: "tmp/examples",
-      imports: [this.partImportReact(), this.partImport()].filter(
-        Boolean
-      ) as ImportDeclaration[],
-      body: this.partBody(),
-      config: {
-        exporting: {
-          type: "export-default-anonymous-functional-component",
-          exporting_position: "with-declaration",
-          declaration_syntax_choice: "inlinefunction",
-          export_declaration_syntax_choice: "export-default",
-        },
-      },
-    });
-
-    const code =
-      stringfy(file, {
-        language: "tsx",
-        indentation: 2,
-      }).trimEnd() + "\n";
-    return `\`\`\`tsx\n${code}\`\`\``;
+  protected partImport(): ImportDeclaration | undefined {
+    // TODO: module import example not supproted
+    return undefined;
   }
 }
 
-export class ReactWidgetDeclarationDocBuilder extends WidgetDeclarationDocBuilder {
-  protected readonly sourceuri?: string | undefined;
-
-  constructor({
-    sourceuri,
-    ...p
-  }: {
+export class ReactWidgetDeclarationDocBuilder extends JsxWidgetDeclarationDocBuilder {
+  constructor(p: {
     module: WidgetModuleInfo;
     declaration: WidgetDeclarationInfo;
     params: any;
@@ -95,29 +34,6 @@ export class ReactWidgetDeclarationDocBuilder extends WidgetDeclarationDocBuilde
     sourceuri?: string;
   }) {
     super(p);
-
-    this.sourceuri = sourceuri;
-  }
-
-  private get _widgetname(): string {
-    if (this.anonymous) {
-      return "Anonymous Widget";
-    } else {
-      return `${this.widgetname}`;
-    }
-  }
-
-  protected partIntro() {
-    const nameinfo = `\`<${this.module.name}>\` ('${this.module.originalname}')`;
-    const designlink = buildOriginDesignLinkIfPossible(this.module);
-    const gridalink = buildGridaCodeLinkIfPossible(this.module);
-    return [
-      nameinfo,
-      designlink ? `- [${designlink.name}](${designlink.url})` : undefined,
-      gridalink ? `- [${gridalink.name}](${gridalink.url})` : undefined,
-    ]
-      .filter(Boolean)
-      .join("\n");
   }
 
   protected partExample() {
@@ -127,109 +43,4 @@ export class ReactWidgetDeclarationDocBuilder extends WidgetDeclarationDocBuilde
     }).snippet();
     return `@example\n${snippet}`;
   }
-
-  protected partParams() {
-    if (this.params) {
-      return "TODO: params";
-    } else {
-      // provide default params document
-      return "@params {any} props - this widget does not requires props. you can pass custom dynamic props to the widget as you want (on typescript, it will raise type check issues).";
-    }
-  }
-  protected partPreview() {
-    /**
-     * @deprecated TODO: update the asset repository pattern.
-     */
-    const _asset_key = "fill-later-assets";
-    const _tmp_img = MainImageRepository.instance.get(_asset_key).addImage({
-      key: this.module.id,
-    });
-
-    return `@preview\n![](${_tmp_img.url})`;
-  }
-  protected partRemarks() {
-    return "@remarks\n@see {@link https://grida.co/docs/widgets} for more information.";
-  }
-
-  protected partBrandingFooter() {
-    return [
-      "![Made with Grida](https://bridged-service-static.s3.us-west-1.amazonaws.com/branding/logo/32.png)",
-    ].join("\n");
-  }
-
-  protected partGridaMetaComment() {
-    const infoline =
-      "<!-- Info: Please do not remove this comment unless intended. removing this section will break grida integrations. -->";
-    const dataline = GridaTSDocWidgetDeclarationMetaManager.make({
-      engine: version,
-      source: `${this.module.designsource}://${this.module.filekey}/${this.module.id}`,
-      uri: undefined,
-    });
-    return [infoline, dataline].join("\n");
-  }
-
-  protected divider() {
-    return "---";
-  }
-
-  protected break() {
-    return "\n";
-  }
-  //
-
-  public make() {
-    const hr = this.divider;
-    const br = this.break;
-
-    return [
-      this.partIntro(),
-      br(),
-      hr(),
-      this.partExample(),
-      hr(),
-      this.partParams(),
-      hr(),
-      this.partPreview(),
-      hr(),
-      this.partRemarks(),
-      hr(),
-      this.partPrivateRemarks(),
-      br(),
-      this.partBrandingFooter(),
-      this.partGridaMetaComment(),
-    ]
-      .map((i) => i?.toString())
-      .filter(Boolean)
-      .join("\n");
-  }
-}
-
-function buildOriginDesignLinkIfPossible(
-  module: WidgetModuleInfo
-): { name: string; url: string } | undefined {
-  if (module.designsource) {
-    if (module.designsource === "figma") {
-      if (module.filekey) {
-        return {
-          name: "Open in Figma",
-          url: `https://figma.com/file/${module.filekey}?node-id=${module.id}`,
-        };
-      }
-    }
-  }
-  return;
-}
-
-function buildGridaCodeLinkIfPossible(
-  module: WidgetModuleInfo
-): { name: string; url: string } | undefined {
-  if (module.designsource) {
-    if (module.filekey) {
-      return {
-        name: "Open in Grida",
-        url: `https://code.grida.co/files/${module.filekey}?node=${module.id}`,
-      };
-    }
-  }
-  return;
 }
diff --git a/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder-solidjs.ts b/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder-solidjs.ts
new file mode 100644
index 00000000..caa5d8a6
--- /dev/null
+++ b/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder-solidjs.ts
@@ -0,0 +1,46 @@
+import type { ImportDeclaration } from "coli";
+import {
+  JsxWidgetDeclarationDocBuilder,
+  JsxWidgetDeclarationDocUsageExampleBuilder,
+} from "./widget-declaration-doc-builder-jsx";
+import { solid_js_imports } from "@web-builder/solid-js";
+import type { WidgetDeclarationInfo, WidgetModuleInfo } from "./types";
+
+class SolidJSWidgetDeclarationDocUsageExampleBuilder extends JsxWidgetDeclarationDocUsageExampleBuilder {
+  constructor(p: { identifier: string; sourceuri?: string }) {
+    super(p);
+  }
+
+  protected partImportSolid() {
+    return solid_js_imports.render;
+  }
+
+  protected partImportFramework() {
+    return this.partImportSolid();
+  }
+
+  protected partImport(): ImportDeclaration | undefined {
+    // TODO: module import example not supproted
+    return undefined;
+  }
+}
+
+export class SolidJSWidgetDeclarationDocBuilder extends JsxWidgetDeclarationDocBuilder {
+  constructor(p: {
+    module: WidgetModuleInfo;
+    declaration: WidgetDeclarationInfo;
+    params: any;
+    defaultValues: any;
+    sourceuri?: string;
+  }) {
+    super(p);
+  }
+
+  protected partExample() {
+    const snippet = new SolidJSWidgetDeclarationDocUsageExampleBuilder({
+      identifier: this.widgetname,
+      sourceuri: this.sourceuri,
+    }).snippet();
+    return `@example\n${snippet}`;
+  }
+}
diff --git a/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder.ts b/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder.ts
index 9c4a3ef6..86c30657 100644
--- a/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder.ts
+++ b/packages/support-documentation/doc-widget-declaration/widget-declaration-doc-builder.ts
@@ -1,5 +1,5 @@
 import { license, version } from "@designto/code";
-import { FunctionDeclaration, Identifier } from "coli";
+import { FunctionDeclaration } from "coli";
 import type {
   WidgetModuleInfo,
   PropsInfo,

From dd5a037b2aa4624c7ffc6a08cb06db358395a009 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Mon, 25 Jul 2022 11:12:27 +0900
Subject: [PATCH 68/68] bump reflect core with new widget key interface

---
 externals/reflect-core                             |  2 +-
 .../rn-widgets/rn-error-widget/index.ts            |  2 +-
 .../rn-widgets/rn-text/index.ts                    |  2 +-
 .../widgets-native/error-widget/index.ts           |  2 +-
 .../widgets-native/html-text-element/index.ts      |  2 +-
 packages/designto-token/key/widget-key-figma.ts    | 14 ++++++++++++++
 .../support-flags/token-declare/index.ts           |  3 +--
 .../designto-token/token-widgets/button-widget.ts  |  2 +-
 .../tokens-to-web-widget/compose-instanciation.ts  |  3 +--
 9 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/externals/reflect-core b/externals/reflect-core
index 80dd0365..4dc3224b 160000
--- a/externals/reflect-core
+++ b/externals/reflect-core
@@ -1 +1 @@
-Subproject commit 80dd0365653ae563f79d658c1c999ef33a3810ce
+Subproject commit 4dc3224b9b793f827034d8b38c70f43ec91acf59
diff --git a/packages/builder-react-native/rn-widgets/rn-error-widget/index.ts b/packages/builder-react-native/rn-widgets/rn-error-widget/index.ts
index 551df559..9f00c6d5 100644
--- a/packages/builder-react-native/rn-widgets/rn-error-widget/index.ts
+++ b/packages/builder-react-native/rn-widgets/rn-error-widget/index.ts
@@ -17,7 +17,7 @@ export class ErrorWidget extends TextChildWidget<TextStyle> {
 
   textData() {
     return new TextDataWidget({
-      key: WidgetKey.copyWith(this.key, { id: this.key.id + ".text-data" }),
+      key: this.key.copyWith({ id: this.key.id + ".text-data" }),
       data: this.errorMessage,
     });
   }
diff --git a/packages/builder-react-native/rn-widgets/rn-text/index.ts b/packages/builder-react-native/rn-widgets/rn-text/index.ts
index 60415553..e8a0292e 100644
--- a/packages/builder-react-native/rn-widgets/rn-text/index.ts
+++ b/packages/builder-react-native/rn-widgets/rn-text/index.ts
@@ -53,7 +53,7 @@ export class Text extends TextChildWidget<ViewStyle> {
 
   textData() {
     return new TextDataWidget({
-      key: WidgetKey.copyWith(this.key, { id: this.key.id + ".text-data" }),
+      key: this.key.copyWith({ id: this.key.id + ".text-data" }),
       data: this.data,
     });
   }
diff --git a/packages/builder-web-core/widgets-native/error-widget/index.ts b/packages/builder-web-core/widgets-native/error-widget/index.ts
index 2bed6658..33072eed 100644
--- a/packages/builder-web-core/widgets-native/error-widget/index.ts
+++ b/packages/builder-web-core/widgets-native/error-widget/index.ts
@@ -18,7 +18,7 @@ export class ErrorWidget extends TextChildWidget {
 
   textData() {
     return new TextDataWidget({
-      key: WidgetKey.copyWith(this.key, { id: this.key.id + ".text-data" }),
+      key: this.key.copyWith({ id: this.key.id + ".text-data" }),
       data: this.errorMessage,
     });
   }
diff --git a/packages/builder-web-core/widgets-native/html-text-element/index.ts b/packages/builder-web-core/widgets-native/html-text-element/index.ts
index 1807af95..75995876 100644
--- a/packages/builder-web-core/widgets-native/html-text-element/index.ts
+++ b/packages/builder-web-core/widgets-native/html-text-element/index.ts
@@ -53,7 +53,7 @@ export class Text extends TextChildWidget {
 
   textData() {
     return new TextDataWidget({
-      key: WidgetKey.copyWith(this.key, { id: this.key.id + ".text-data" }),
+      key: this.key.copyWith({ id: this.key.id + ".text-data" }),
       data: this.data,
     });
   }
diff --git a/packages/designto-token/key/widget-key-figma.ts b/packages/designto-token/key/widget-key-figma.ts
index c6c82c11..f9a9dd09 100644
--- a/packages/designto-token/key/widget-key-figma.ts
+++ b/packages/designto-token/key/widget-key-figma.ts
@@ -15,4 +15,18 @@ export class FigmaWidgetKey extends WidgetKey {
     super({ id, originName: name });
     this.filekey = filekey;
   }
+
+  copyWith({
+    id,
+    name,
+  }: {
+    id?: string | undefined;
+    name?: string | undefined;
+  }): WidgetKey {
+    return new FigmaWidgetKey({
+      id: id ?? this.id,
+      name: name ?? this.name,
+      filekey: this.filekey,
+    });
+  }
 }
diff --git a/packages/designto-token/support-flags/token-declare/index.ts b/packages/designto-token/support-flags/token-declare/index.ts
index 6dd0a750..3b0ba0c0 100644
--- a/packages/designto-token/support-flags/token-declare/index.ts
+++ b/packages/designto-token/support-flags/token-declare/index.ts
@@ -3,7 +3,6 @@ import { tokenize } from "../..";
 import { default_tokenizer_config } from "../../config";
 import type { ReflectSceneNode } from "@design-sdk/figma-node";
 import { DeclarationWidgetToken } from "@code-features/module";
-import { WidgetKey } from "@reflect-ui/core";
 
 export function tokenize_flagged_declare(
   node: ReflectSceneNode,
@@ -23,7 +22,7 @@ export function tokenize_flagged_declare(
   const _key = child.key!;
 
   return new DeclarationWidgetToken({
-    key: WidgetKey.copyWith(_key, { id: _key.id + "--declare" }),
+    key: _key.copyWith({ id: _key.id + "--declare" }),
     child: child,
   });
 }
diff --git a/packages/designto-token/token-widgets/button-widget.ts b/packages/designto-token/token-widgets/button-widget.ts
index 497bfa53..6f959f5b 100644
--- a/packages/designto-token/token-widgets/button-widget.ts
+++ b/packages/designto-token/token-widgets/button-widget.ts
@@ -76,7 +76,7 @@ function button(
   }
 
   return new WrappingContainer({
-    key: WidgetKey.copyWith(_key, { id: _key.id + ".sizedbox" }),
+    key: _key.copyWith({ id: _key.id + ".sizedbox" }),
     width: sizing.width,
     height: sizing.height,
     child: button,
diff --git a/packages/designto-web/tokens-to-web-widget/compose-instanciation.ts b/packages/designto-web/tokens-to-web-widget/compose-instanciation.ts
index cfd4f933..71c739bb 100644
--- a/packages/designto-web/tokens-to-web-widget/compose-instanciation.ts
+++ b/packages/designto-web/tokens-to-web-widget/compose-instanciation.ts
@@ -2,7 +2,6 @@ import { Composer } from ".";
 import * as reusable from "@code-features/component/tokens";
 import * as web from "@web-builder/core";
 import { nameit, NameCases } from "coli";
-import { WidgetKey } from "@web-builder/core";
 
 export function compose_instanciation(
   widget: reusable.InstanceWidget,
@@ -15,7 +14,7 @@ export function compose_instanciation(
   }).name;
 
   return new web.InstanciationElement({
-    key: WidgetKey.copyWith(widget.key, {
+    key: widget.key.copyWith({
       name: "ExampleUsageOf_" + identifier,
     }),
     identifier: identifier,