From 6960f862b920a4f6e105cf1d4ae98ceb09e2236c Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Thu, 30 Dec 2021 06:23:48 +0900
Subject: [PATCH 01/25] update flag docs placement

---
 docs/{flags.md => flags/index.md} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename docs/{flags.md => flags/index.md} (100%)

diff --git a/docs/flags.md b/docs/flags/index.md
similarity index 100%
rename from docs/flags.md
rename to docs/flags/index.md

From 165ed07d6b0eb94cd918c1be6cc71496fac78fb8 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Thu, 30 Dec 2021 15:29:13 +0900
Subject: [PATCH 02/25] update ci scripts for flags docs gen

---
 .github/workflows/docs-deploy.yml   |  5 +++
 docs/flags/.gitignore               |  7 ++++
 docs/flags/README.md                |  5 +++
 scripts/docs-copy/flags-api-docs.js | 64 +++++++++++++++++++++++++++++
 scripts/docs-deploy/pre-deploy.sh   |  1 +
 5 files changed, 82 insertions(+)
 create mode 100644 docs/flags/.gitignore
 create mode 100644 docs/flags/README.md
 create mode 100644 scripts/docs-copy/flags-api-docs.js
 create mode 100644 scripts/docs-deploy/pre-deploy.sh

diff --git a/.github/workflows/docs-deploy.yml b/.github/workflows/docs-deploy.yml
index 5cfcf1df..b1781c36 100644
--- a/.github/workflows/docs-deploy.yml
+++ b/.github/workflows/docs-deploy.yml
@@ -7,6 +7,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
+      - name: run pre-deploy (build docs and more)
+        run: |
+          chmod +x ./scripts/docs-deploy/pre-deploy.sh
+          ./scripts/docs-deploy/pre-deploy.sh
+        shell: bash
       - name: copy docs to gridaco/grida.co
         uses: DevOpenWRT-Router/github-action-push-to-another-repository@main
         env:
diff --git a/docs/flags/.gitignore b/docs/flags/.gitignore
new file mode 100644
index 00000000..a646b350
--- /dev/null
+++ b/docs/flags/.gitignore
@@ -0,0 +1,7 @@
+## Learn more at scripts/docs-copy/flags-api-docs.js
+# custom
+----ignore.md
+---custom.md
+
+# flags api docs
+--*.md
\ No newline at end of file
diff --git a/docs/flags/README.md b/docs/flags/README.md
new file mode 100644
index 00000000..607c2660
--- /dev/null
+++ b/docs/flags/README.md
@@ -0,0 +1,5 @@
+# Flags Documentation directory.
+
+Go to [Index](./index.md)
+
+## Flags Api references are copied from support-flags package via script - `/scripts/docs-copy/flags-api-docs.sh`
diff --git a/scripts/docs-copy/flags-api-docs.js b/scripts/docs-copy/flags-api-docs.js
new file mode 100644
index 00000000..463bd6bb
--- /dev/null
+++ b/scripts/docs-copy/flags-api-docs.js
@@ -0,0 +1,64 @@
+const fs = require("fs");
+const path = require("path");
+
+const origin = "./packages/support-flags";
+const target = "./docs/flags";
+const github_base_url =
+  "https://github.com/gridaco/designto-code/tree/main/packages/support-flags";
+/**
+ * copies the README.md file under each directory under "origin" to "target"
+ * the README.md content will be preserved, but the file name will be changed to current folder name
+ * for example, if the file is `--action/README.md`, the file will be copied and renamed to `--action.md`
+ *
+ * the origin directory will have multiple subdirectory with one README.md file.
+ * these files under each subdirectory will be copied directly under "target" with above new file name.
+ */
+function copy() {
+  const files = [];
+
+  // read all directories under origin directory with pattern that matches regex `/^--[a-z]+(.*?)$/` as prefix
+  // add README.md files to files array
+  fs.readdirSync(origin).forEach((dir) => {
+    if (dir.match(/^--[a-z]+(.*?)$/)) {
+      const dirPath = path.join(origin, dir);
+      const filesInDir = fs.readdirSync(dirPath);
+      filesInDir.forEach((file) => {
+        if (file === "README.md") {
+          files.push(path.join(dirPath, file));
+        }
+      });
+    }
+  });
+
+  // these are custom directories under origin. [`----disable`, `---custom`]
+  // add README.md under these directory, add to files array
+  ["----disable", "---custom"].forEach((dir) => {
+    const dirPath = path.join(origin, dir);
+    const filesInDir = fs.readdirSync(dirPath);
+    filesInDir.forEach((file) => {
+      if (file === "README.md") {
+        files.push(path.join(dirPath, file));
+      }
+    });
+  });
+
+  // read the content and extension of each file, save it to a map. where key being the file path, value being the content and extension
+  const fileMap = new Map();
+  files.forEach((file) => {
+    const content = fs.readFileSync(file, "utf8");
+    const ext = path.extname(file);
+    // make a key. the key is extracted from var - file, which is a paht. extract last directory name and use it as key. e.g. "../../--action/README.md" -> "--action"
+    const key = path.basename(path.dirname(file));
+    fileMap.set(key, { content, ext });
+  });
+
+  // copy each file to target directory
+  fileMap.forEach((value, key) => {
+    const newFile = path.join(target, `${key}${value.ext}`);
+    fs.writeFileSync(newFile, value.content);
+  });
+}
+
+if (require.main === module) {
+  copy();
+}
diff --git a/scripts/docs-deploy/pre-deploy.sh b/scripts/docs-deploy/pre-deploy.sh
new file mode 100644
index 00000000..6de5a01a
--- /dev/null
+++ b/scripts/docs-deploy/pre-deploy.sh
@@ -0,0 +1 @@
+node ../docs-copy/flags-api-docs.js
\ No newline at end of file

From 68753b926c4c7d6db48c54667802ac72ed6f12a4 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Thu, 30 Dec 2021 16:13:41 +0900
Subject: [PATCH 03/25] (doc) add h1-h6 flags docs

---
 packages/support-flags/--as-h1/README.md | 48 ++++++++++++++++++++++++
 packages/support-flags/--as-h2/README.md | 48 ++++++++++++++++++++++++
 packages/support-flags/--as-h3/README.md | 48 ++++++++++++++++++++++++
 packages/support-flags/--as-h4/README.md | 48 ++++++++++++++++++++++++
 packages/support-flags/--as-h5/README.md | 48 ++++++++++++++++++++++++
 packages/support-flags/--as-h6/README.md | 48 ++++++++++++++++++++++++
 6 files changed, 288 insertions(+)

diff --git a/packages/support-flags/--as-h1/README.md b/packages/support-flags/--as-h1/README.md
index e69de29b..52f458cc 100644
--- a/packages/support-flags/--as-h1/README.md
+++ b/packages/support-flags/--as-h1/README.md
@@ -0,0 +1,48 @@
+# `--as-h1` As Heading1
+
+**Accepted keys**
+
+- `--as-h1`
+- `--as-heading1`
+- `--as-headline1`
+- `--h1`
+- `--heading1`
+- `--headline1`
+
+## Syntax
+
+```ts
+`--h1${"="typeof boolean}`
+```
+
+## Example
+
+```
+--h1
+
+--h1=true
+--h1=false
+
+--h1=yes
+--h1=no
+
+----h1
+```
+
+## Behavior
+
+**Element**
+When applied, this will force the node to be rendered as a `<h1>` element.
+
+**Text style**
+We don't yet support text style matching with `--h1` flag.
+
+## See Also
+
+- [`--as-h2`](../--as-h2)
+- [`--as-h3`](../--as-h3)
+- [`--as-h4`](../--as-h4)
+- [`--as-h5`](../--as-h5)
+- [`--as-h6`](../--as-h6)
+- [`--as-p`](../--as-p)
+- [`--as-br`](../--as-br)
diff --git a/packages/support-flags/--as-h2/README.md b/packages/support-flags/--as-h2/README.md
index e69de29b..fa445f98 100644
--- a/packages/support-flags/--as-h2/README.md
+++ b/packages/support-flags/--as-h2/README.md
@@ -0,0 +1,48 @@
+# `--as-h2` As Heading2
+
+**Accepted keys**
+
+- `--as-h2`
+- `--as-heading2`
+- `--as-headline2`
+- `--h2`
+- `--heading2`
+- `--headline2`
+
+## Syntax
+
+```ts
+`--h2${"="typeof boolean}`
+```
+
+## Example
+
+```
+--h2
+
+--h2=true
+--h2=false
+
+--h2=yes
+--h2=no
+
+----h2
+```
+
+## Behavior
+
+**Element**
+When applied, this will force the node to be rendered as a `<h2>` element.
+
+**Text style**
+We don't yet support text style matching with `--h2` flag.
+
+## See Also
+
+- [`--as-h1`](../--as-h1)
+- [`--as-h3`](../--as-h3)
+- [`--as-h4`](../--as-h4)
+- [`--as-h5`](../--as-h5)
+- [`--as-h6`](../--as-h6)
+- [`--as-p`](../--as-p)
+- [`--as-br`](../--as-br)
diff --git a/packages/support-flags/--as-h3/README.md b/packages/support-flags/--as-h3/README.md
index e69de29b..d023fe75 100644
--- a/packages/support-flags/--as-h3/README.md
+++ b/packages/support-flags/--as-h3/README.md
@@ -0,0 +1,48 @@
+# `--as-h3` As Heading3
+
+**Accepted keys**
+
+- `--as-h3`
+- `--as-heading3`
+- `--as-headline3`
+- `--h3`
+- `--heading3`
+- `--headline3`
+
+## Syntax
+
+```ts
+`--h3${"="typeof boolean}`
+```
+
+## Example
+
+```
+--h3
+
+--h3=true
+--h3=false
+
+--h3=yes
+--h3=no
+
+----h3
+```
+
+## Behavior
+
+**Element**
+When applied, this will force the node to be rendered as a `<h3>` element.
+
+**Text style**
+We don't yet support text style matching with `--h3` flag.
+
+## See Also
+
+- [`--as-h1`](../--as-h1)
+- [`--as-h2`](../--as-h2)
+- [`--as-h4`](../--as-h4)
+- [`--as-h5`](../--as-h5)
+- [`--as-h6`](../--as-h6)
+- [`--as-p`](../--as-p)
+- [`--as-br`](../--as-br)
diff --git a/packages/support-flags/--as-h4/README.md b/packages/support-flags/--as-h4/README.md
index e69de29b..bb654504 100644
--- a/packages/support-flags/--as-h4/README.md
+++ b/packages/support-flags/--as-h4/README.md
@@ -0,0 +1,48 @@
+# `--as-h4` As Heading4
+
+**Accepted keys**
+
+- `--as-h4`
+- `--as-heading4`
+- `--as-headline4`
+- `--h4`
+- `--heading4`
+- `--headline4`
+
+## Syntax
+
+```ts
+`--h4${"="typeof boolean}`
+```
+
+## Example
+
+```
+--h4
+
+--h4=true
+--h4=false
+
+--h4=yes
+--h4=no
+
+----h4
+```
+
+## Behavior
+
+**Element**
+When applied, this will force the node to be rendered as a `<h4>` element.
+
+**Text style**
+We don't yet support text style matching with `--h4` flag.
+
+## See Also
+
+- [`--as-h1`](../--as-h1)
+- [`--as-h2`](../--as-h2)
+- [`--as-h3`](../--as-h3)
+- [`--as-h5`](../--as-h5)
+- [`--as-h6`](../--as-h6)
+- [`--as-p`](../--as-p)
+- [`--as-br`](../--as-br)
diff --git a/packages/support-flags/--as-h5/README.md b/packages/support-flags/--as-h5/README.md
index e69de29b..b3b93aa6 100644
--- a/packages/support-flags/--as-h5/README.md
+++ b/packages/support-flags/--as-h5/README.md
@@ -0,0 +1,48 @@
+# `--as-h5` As Heading5
+
+**Accepted keys**
+
+- `--as-h5`
+- `--as-heading5`
+- `--as-headline5`
+- `--h5`
+- `--heading5`
+- `--headline5`
+
+## Syntax
+
+```ts
+`--h5${"="typeof boolean}`
+```
+
+## Example
+
+```
+--h5
+
+--h5=true
+--h5=false
+
+--h5=yes
+--h5=no
+
+----h5
+```
+
+## Behavior
+
+**Element**
+When applied, this will force the node to be rendered as a `<h5>` element.
+
+**Text style**
+We don't yet support text style matching with `--h5` flag.
+
+## See Also
+
+- [`--as-h1`](../--as-h1)
+- [`--as-h2`](../--as-h2)
+- [`--as-h3`](../--as-h3)
+- [`--as-h4`](../--as-h4)
+- [`--as-h6`](../--as-h6)
+- [`--as-p`](../--as-p)
+- [`--as-br`](../--as-br)
diff --git a/packages/support-flags/--as-h6/README.md b/packages/support-flags/--as-h6/README.md
index e69de29b..c42260d6 100644
--- a/packages/support-flags/--as-h6/README.md
+++ b/packages/support-flags/--as-h6/README.md
@@ -0,0 +1,48 @@
+# `--as-h6` As Heading6
+
+**Accepted keys**
+
+- `--as-h6`
+- `--as-heading6`
+- `--as-headline6`
+- `--h6`
+- `--heading6`
+- `--headline6`
+
+## Syntax
+
+```ts
+`--h6${"="typeof boolean}`
+```
+
+## Example
+
+```
+--h6
+
+--h6=true
+--h6=false
+
+--h6=yes
+--h6=no
+
+----h6
+```
+
+## Behavior
+
+**Element**
+When applied, this will force the node to be rendered as a `<h6>` element.
+
+**Text style**
+We don't yet support text style matching with `--h6` flag.
+
+## See Also
+
+- [`--as-h1`](../--as-h1)
+- [`--as-h2`](../--as-h2)
+- [`--as-h3`](../--as-h3)
+- [`--as-h4`](../--as-h4)
+- [`--as-h5`](../--as-h5)
+- [`--as-p`](../--as-p)
+- [`--as-br`](../--as-br)

From 96795583d7d32cd6e164f2c8c71e1811ff3088c4 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Thu, 30 Dec 2021 16:14:06 +0900
Subject: [PATCH 04/25] (doc) artwork flag docs

---
 packages/support-flags/--artwork/README.md   | 40 ++++++++++++++++++++
 packages/support-flags/--export-as/README.md |  6 +++
 packages/support-flags/--export/README.md    |  0
 3 files changed, 46 insertions(+)
 create mode 100644 packages/support-flags/--artwork/README.md
 create mode 100644 packages/support-flags/--export-as/README.md
 delete mode 100644 packages/support-flags/--export/README.md

diff --git a/packages/support-flags/--artwork/README.md b/packages/support-flags/--artwork/README.md
new file mode 100644
index 00000000..192273c1
--- /dev/null
+++ b/packages/support-flags/--artwork/README.md
@@ -0,0 +1,40 @@
+## Artwork flag
+
+**Accepted keys**
+
+- `--artwork`
+
+## Syntax
+
+```ts
+`--artwork${"="typeof boolean}`
+```
+
+## Example
+
+```
+--artwork
+
+--artwork=true
+--artwork=false
+
+--artwork=yes
+--artwork=no
+
+----artwork
+```
+
+## Behavior
+
+**Interpreter**
+
+When applied, this will force the node to be exported as an image.
+
+**Render**
+
+- HTML: rendered as an `<img>` element.
+- Flutter: rendered as an `Image` widget.
+
+## See Also
+
+- [`--export-as`](../--export-as)
diff --git a/packages/support-flags/--export-as/README.md b/packages/support-flags/--export-as/README.md
new file mode 100644
index 00000000..e892b75d
--- /dev/null
+++ b/packages/support-flags/--export-as/README.md
@@ -0,0 +1,6 @@
+# Export As
+
+**Accepted keys**
+
+- `--export-as`
+- `--export`
diff --git a/packages/support-flags/--export/README.md b/packages/support-flags/--export/README.md
deleted file mode 100644
index e69de29b..00000000

From 545358dfa3532735232638e4c38c93f88bf0812e Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Thu, 30 Dec 2021 16:14:17 +0900
Subject: [PATCH 05/25] (doc) w&h flags docs

---
 packages/support-flags/--height/README.md     | 37 +++++++++++++++++++
 packages/support-flags/--max-height/README.md | 36 ++++++++++++++++++
 packages/support-flags/--max-width/README.md  | 36 ++++++++++++++++++
 packages/support-flags/--min-height/README.md | 36 ++++++++++++++++++
 packages/support-flags/--min-width/README.md  | 36 ++++++++++++++++++
 packages/support-flags/--width/README.md      | 37 +++++++++++++++++++
 6 files changed, 218 insertions(+)
 create mode 100644 packages/support-flags/--height/README.md
 create mode 100644 packages/support-flags/--max-height/README.md
 create mode 100644 packages/support-flags/--max-width/README.md
 create mode 100644 packages/support-flags/--min-height/README.md
 create mode 100644 packages/support-flags/--min-width/README.md
 create mode 100644 packages/support-flags/--width/README.md

diff --git a/packages/support-flags/--height/README.md b/packages/support-flags/--height/README.md
new file mode 100644
index 00000000..5087f605
--- /dev/null
+++ b/packages/support-flags/--height/README.md
@@ -0,0 +1,37 @@
+# `--height` for explicit height
+
+**Accepted keys**
+
+- `--height`
+- `--h`
+
+## Syntax
+
+```ts
+`--height=${typeof length}`;
+```
+
+## Example
+
+```
+--height=100
+--h=100
+
+--height=100px
+
+--height=100vh
+```
+
+## Behavior
+
+**Element**
+There is no impact on element itself, but it can break relative layouts.
+
+**Style**
+When applied, this will force the node to be rendered with a `height` style.
+
+## See Also
+
+- [`--max-height`](../--max-height)
+- [`--min-height`](../--min-height)
+- [`--width`](../--width)
diff --git a/packages/support-flags/--max-height/README.md b/packages/support-flags/--max-height/README.md
new file mode 100644
index 00000000..c5a2f735
--- /dev/null
+++ b/packages/support-flags/--max-height/README.md
@@ -0,0 +1,36 @@
+# Max height
+
+**Accepted keys**
+
+- `--max-height`
+- `--maxheight`
+
+## Syntax
+
+```ts
+`--max-height=${typeof length}`;
+```
+
+## Example
+
+```
+--max-height=100
+
+--max-height=100px
+
+--max-height=100vh
+```
+
+## Behavior
+
+**Element**
+There is no impact on element itself, but it can break relative layouts.
+
+**Style**
+When applied, this will force the node to be rendered with a `max-height` style.
+
+## See Also
+
+- [`--max-width`](../--max-width)
+- [`--min-height`](../--max-height)
+- [`--height`](../--height)
diff --git a/packages/support-flags/--max-width/README.md b/packages/support-flags/--max-width/README.md
new file mode 100644
index 00000000..6dd58b83
--- /dev/null
+++ b/packages/support-flags/--max-width/README.md
@@ -0,0 +1,36 @@
+# Max width
+
+**Accepted keys**
+
+- `--max-width`
+- `--maxwidth`
+
+## Syntax
+
+```ts
+`--max-width=${typeof length}`;
+```
+
+## Example
+
+```
+--max-width=100
+
+--max-width=100px
+
+--max-width=400vw
+```
+
+## Behavior
+
+**Element**
+There is no impact on element itself, but it can break relative layouts.
+
+**Style**
+When applied, this will force the node to be rendered with a max-width style.
+
+## See Also
+
+- [`--max-height`](../--max-height)
+- [`--min-width`](../--max-width)
+- [`--width`](../--max-width)
diff --git a/packages/support-flags/--min-height/README.md b/packages/support-flags/--min-height/README.md
new file mode 100644
index 00000000..059d7771
--- /dev/null
+++ b/packages/support-flags/--min-height/README.md
@@ -0,0 +1,36 @@
+# Min height
+
+**Accepted keys**
+
+- `--min-height`
+- `--minheight`
+
+## Syntax
+
+```ts
+`--min-height=${typeof length}`;
+```
+
+## Example
+
+```
+--min-height=100
+
+--min-height=100px
+
+--min-height=100vh
+```
+
+## Behavior
+
+**Element**
+There is no impact on element itself, but it can break relative layouts.
+
+**Style**
+When applied, this will force the node to be rendered with a `min-height` style.
+
+## See Also
+
+- [`--max-height`](../--max-height)
+- [`--min-width`](../--max-width)
+- [`--height`](../--height)
diff --git a/packages/support-flags/--min-width/README.md b/packages/support-flags/--min-width/README.md
new file mode 100644
index 00000000..28df8815
--- /dev/null
+++ b/packages/support-flags/--min-width/README.md
@@ -0,0 +1,36 @@
+# Min width
+
+**Accepted keys**
+
+- `--min-width`
+- `--minwidth`
+
+## Syntax
+
+```ts
+`--min-width=${typeof length}`;
+```
+
+## Example
+
+```
+--min-width=100
+
+--min-width=100px
+
+--min-width=100vw
+```
+
+## Behavior
+
+**Element**
+There is no impact on element itself, but it can break relative layouts.
+
+**Style**
+When applied, this will force the node to be rendered with a `min-width` style.
+
+## See Also
+
+- [`--max-width`](../--max-width)
+- [`--min-height`](../--min-height)
+- [`--width`](../--width)
diff --git a/packages/support-flags/--width/README.md b/packages/support-flags/--width/README.md
new file mode 100644
index 00000000..0fe8e751
--- /dev/null
+++ b/packages/support-flags/--width/README.md
@@ -0,0 +1,37 @@
+# `--width` for explicit width
+
+**Accepted keys**
+
+- `--width`
+- `--w`
+
+## Syntax
+
+```ts
+`--width=${typeof length}`;
+```
+
+## Example
+
+```
+--width=100
+--w=100
+
+--width=100px
+
+--width=400vw
+```
+
+## Behavior
+
+**Element**
+There is no impact on element itself, but it can break relative layouts.
+
+**Style**
+When applied, this will force the node to be rendered with a width style.
+
+## See Also
+
+- [`--max-width`](../--max-width)
+- [`--min-width`](../--min-width)
+- [`--height`](../--height)

From 818ee2b88110ab0524c2a63fccb08934b9e16102 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Thu, 30 Dec 2021 18:59:32 +0900
Subject: [PATCH 06/25] add h1~h6 flag definition & parsing with alias keys

---
 packages/support-flags/--as-h1/index.ts | 18 +++++
 packages/support-flags/--as-h2/index.ts | 18 +++++
 packages/support-flags/--as-h3/index.ts | 17 +++++
 packages/support-flags/--as-h4/index.ts | 17 +++++
 packages/support-flags/--as-h5/index.ts | 17 +++++
 packages/support-flags/--as-h6/index.ts | 17 +++++
 packages/support-flags/index.ts         | 94 +++++++++++++++++++++++++
 packages/support-flags/types.ts         | 29 +++++++-
 8 files changed, 224 insertions(+), 3 deletions(-)
 create mode 100644 packages/support-flags/--as-h1/index.ts
 create mode 100644 packages/support-flags/--as-h2/index.ts
 create mode 100644 packages/support-flags/--as-h3/index.ts
 create mode 100644 packages/support-flags/--as-h4/index.ts
 create mode 100644 packages/support-flags/--as-h5/index.ts
 create mode 100644 packages/support-flags/--as-h6/index.ts

diff --git a/packages/support-flags/--as-h1/index.ts b/packages/support-flags/--as-h1/index.ts
new file mode 100644
index 00000000..f9c77b55
--- /dev/null
+++ b/packages/support-flags/--as-h1/index.ts
@@ -0,0 +1,18 @@
+export const flag_key__as_h1 = "as-h1";
+export const flag_key__as_heading1 = "as-heading1";
+export const flag_key__as_headline1 = "as-headline1";
+export const flag_key__h1 = "h1";
+export const flag_key__heading1 = "heading1";
+export const flag_key__headline1 = "headline1";
+
+export interface AsHeading1Flag {
+  flag:
+    | typeof flag_key__as_h1
+    | typeof flag_key__as_heading1
+    | typeof flag_key__as_headline1
+    | typeof flag_key__h1
+    | typeof flag_key__heading1
+    | typeof flag_key__headline1;
+
+  value?: boolean;
+}
diff --git a/packages/support-flags/--as-h2/index.ts b/packages/support-flags/--as-h2/index.ts
new file mode 100644
index 00000000..76a67f0e
--- /dev/null
+++ b/packages/support-flags/--as-h2/index.ts
@@ -0,0 +1,18 @@
+export const flag_key__as_h2 = "as-h2";
+export const flag_key__as_heading2 = "as-heading2";
+export const flag_key__as_headline2 = "as-headline2";
+export const flag_key__h2 = "h2";
+export const flag_key__heading2 = "heading2";
+export const flag_key__headline2 = "headline2";
+
+export interface AsHeading2Flag {
+  flag:
+    | typeof flag_key__as_h2
+    | typeof flag_key__as_heading2
+    | typeof flag_key__as_headline2
+    | typeof flag_key__h2
+    | typeof flag_key__heading2
+    | typeof flag_key__headline2;
+
+  value?: boolean;
+}
diff --git a/packages/support-flags/--as-h3/index.ts b/packages/support-flags/--as-h3/index.ts
new file mode 100644
index 00000000..5dcf23dc
--- /dev/null
+++ b/packages/support-flags/--as-h3/index.ts
@@ -0,0 +1,17 @@
+export const flag_key__as_h3 = "as-h3";
+export const flag_key__as_heading3 = "as-heading3";
+export const flag_key__as_headline3 = "as-headline3";
+export const flag_key__h3 = "h3";
+export const flag_key__heading3 = "heading3";
+export const flag_key__headline3 = "headline3";
+
+export interface AsHeading3Flag {
+  flag:
+    | typeof flag_key__as_h3
+    | typeof flag_key__as_heading3
+    | typeof flag_key__as_headline3
+    | typeof flag_key__h3
+    | typeof flag_key__heading3
+    | typeof flag_key__headline3;
+  value?: boolean;
+}
diff --git a/packages/support-flags/--as-h4/index.ts b/packages/support-flags/--as-h4/index.ts
new file mode 100644
index 00000000..b2ab0eaf
--- /dev/null
+++ b/packages/support-flags/--as-h4/index.ts
@@ -0,0 +1,17 @@
+export const flag_key__as_h4 = "as-h4";
+export const flag_key__as_heading4 = "as-heading4";
+export const flag_key__as_headline4 = "as-headline4";
+export const flag_key__h4 = "h4";
+export const flag_key__heading4 = "heading4";
+export const flag_key__headline4 = "headline4";
+
+export interface AsHeading4Flag {
+  flag:
+    | typeof flag_key__as_h4
+    | typeof flag_key__as_heading4
+    | typeof flag_key__as_headline4
+    | typeof flag_key__h4
+    | typeof flag_key__heading4
+    | typeof flag_key__headline4;
+  value?: boolean;
+}
diff --git a/packages/support-flags/--as-h5/index.ts b/packages/support-flags/--as-h5/index.ts
new file mode 100644
index 00000000..d1555508
--- /dev/null
+++ b/packages/support-flags/--as-h5/index.ts
@@ -0,0 +1,17 @@
+export const flag_key__as_h5 = "as-h5";
+export const flag_key__as_heading5 = "as-heading5";
+export const flag_key__as_headline5 = "as-headline5";
+export const flag_key__h5 = "h5";
+export const flag_key__heading5 = "heading5";
+export const flag_key__headline5 = "headline5";
+
+export interface AsHeading5Flag {
+  flag:
+    | typeof flag_key__as_h5
+    | typeof flag_key__as_heading5
+    | typeof flag_key__as_headline5
+    | typeof flag_key__h5
+    | typeof flag_key__heading5
+    | typeof flag_key__headline5;
+  value?: boolean;
+}
diff --git a/packages/support-flags/--as-h6/index.ts b/packages/support-flags/--as-h6/index.ts
new file mode 100644
index 00000000..07d1b47e
--- /dev/null
+++ b/packages/support-flags/--as-h6/index.ts
@@ -0,0 +1,17 @@
+export const flag_key__as_h6 = "as-h6";
+export const flag_key__as_heading6 = "as-heading6";
+export const flag_key__as_headline6 = "as-headline6";
+export const flag_key__h6 = "h6";
+export const flag_key__heading6 = "heading6";
+export const flag_key__headline6 = "headline6";
+
+export interface AsHeading6Flag {
+  flag:
+    | typeof flag_key__as_h6
+    | typeof flag_key__as_heading6
+    | typeof flag_key__as_headline6
+    | typeof flag_key__h6
+    | typeof flag_key__heading6
+    | typeof flag_key__headline6;
+  value?: boolean;
+}
diff --git a/packages/support-flags/index.ts b/packages/support-flags/index.ts
index a1d48997..f37fb7b8 100644
--- a/packages/support-flags/index.ts
+++ b/packages/support-flags/index.ts
@@ -2,6 +2,20 @@ import { parse as parseflags } from "@design-sdk/flags/parsing-strategy-dashdash
 
 import { flag_key__artwork } from "./--artwork";
 import { flag_key__as_wrap } from "./--as-wrap";
+
+// prettier-ignore
+import { flag_key__as_h1, flag_key__as_heading1, flag_key__as_headline1, flag_key__h1, flag_key__heading1, flag_key__headline1 } from "./--as-h1";
+// prettier-ignore
+import { flag_key__as_h2, flag_key__as_heading2, flag_key__as_headline2, flag_key__h2, flag_key__heading2, flag_key__headline2 } from "./--as-h2";
+// prettier-ignore
+import { flag_key__as_h3, flag_key__as_heading3, flag_key__as_headline3, flag_key__h3, flag_key__heading3, flag_key__headline3 } from "./--as-h3";
+// prettier-ignore
+import { flag_key__as_h4, flag_key__as_heading4, flag_key__as_headline4, flag_key__h4, flag_key__heading4, flag_key__headline4 } from "./--as-h4";
+// prettier-ignore
+import { flag_key__as_h5, flag_key__as_heading5, flag_key__as_headline5, flag_key__h5, flag_key__heading5, flag_key__headline5 } from "./--as-h5";
+// prettier-ignore
+import { flag_key__as_h6, flag_key__as_heading6, flag_key__as_headline6, flag_key__h6, flag_key__heading6, flag_key__headline6 } from "./--as-h6";
+
 import { flag_key__module } from "./--module";
 export * from "./types";
 
@@ -16,6 +30,14 @@ export function parse(name: string) {
         name: flag_key__as_wrap,
         type: "bool",
       },
+      //#region
+      ...__h1_alias,
+      ...__h2_alias,
+      ...__h3_alias,
+      ...__h4_alias,
+      ...__h5_alias,
+      ...__h6_alias,
+      //#endregion
       {
         name: flag_key__module,
         type: "bool", // TODO: support string also.
@@ -27,3 +49,75 @@ export function parse(name: string) {
     return {};
   }
 }
+
+const __h1_alias = [
+  flag_key__as_h1,
+  flag_key__as_heading1,
+  flag_key__as_headline1,
+  flag_key__h1,
+  flag_key__heading1,
+  flag_key__headline1,
+].map((k) => ({
+  name: k,
+  type: "bool",
+}));
+
+const __h2_alias = [
+  flag_key__as_h2,
+  flag_key__as_heading2,
+  flag_key__as_headline2,
+  flag_key__h2,
+  flag_key__heading2,
+  flag_key__headline2,
+].map((k) => ({
+  name: k,
+  type: "bool",
+}));
+
+const __h3_alias = [
+  flag_key__as_h3,
+  flag_key__as_heading3,
+  flag_key__as_headline3,
+  flag_key__h3,
+  flag_key__heading3,
+  flag_key__headline3,
+].map((k) => ({
+  name: k,
+  type: "bool",
+}));
+
+const __h4_alias = [
+  flag_key__as_h4,
+  flag_key__as_heading4,
+  flag_key__as_headline4,
+  flag_key__h4,
+  flag_key__heading4,
+  flag_key__headline4,
+].map((k) => ({
+  name: k,
+  type: "bool",
+}));
+
+const __h5_alias = [
+  flag_key__as_h5,
+  flag_key__as_heading5,
+  flag_key__as_headline5,
+  flag_key__h5,
+  flag_key__heading5,
+  flag_key__headline5,
+].map((k) => ({
+  name: k,
+  type: "bool",
+}));
+
+const __h6_alias = [
+  flag_key__as_h6,
+  flag_key__as_heading6,
+  flag_key__as_headline6,
+  flag_key__h6,
+  flag_key__heading6,
+  flag_key__headline6,
+].map((k) => ({
+  name: k,
+  type: "bool",
+}));
diff --git a/packages/support-flags/types.ts b/packages/support-flags/types.ts
index fdfec241..099e7d6f 100644
--- a/packages/support-flags/types.ts
+++ b/packages/support-flags/types.ts
@@ -1,5 +1,28 @@
-import { ArtworkFlag } from "./--artwork";
+import type { ArtworkFlag } from "./--artwork";
+import type { AsHeading1Flag } from "./--as-h1";
+import type { AsHeading2Flag } from "./--as-h2";
+import type { AsHeading3Flag } from "./--as-h3";
+import type { AsHeading4Flag } from "./--as-h4";
+import type { AsHeading5Flag } from "./--as-h5";
+import type { AsHeading6Flag } from "./--as-h6";
 
-// export { ArtworkFlag };
+export type Flag = ArtworkFlag | HeadingFlag;
 
-export type Flag = ArtworkFlag;
+/**
+ * Type alias for a flag that can be used to set the heading level.
+ * from 1 to 6.
+ *
+ * - `--as-h1`
+ * - `--as-h2`
+ * - `--as-h3`
+ * - `--as-h4`
+ * - `--as-h5`
+ * - `--as-h6`
+ */
+export type HeadingFlag =
+  | AsHeading1Flag
+  | AsHeading2Flag
+  | AsHeading3Flag
+  | AsHeading4Flag
+  | AsHeading5Flag
+  | AsHeading6Flag;

From 00383af575b97780fe6529a1b6d827786ace0c65 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Thu, 30 Dec 2021 20:47:31 +0900
Subject: [PATCH 07/25] split flag parsing & type declarations

---
 packages/support-flags/index.ts | 124 +---------------------
 packages/support-flags/keys.ts  |  66 ++++++++++++
 packages/support-flags/parse.ts | 181 ++++++++++++++++++++++++++++++++
 packages/support-flags/types.ts |   8 ++
 4 files changed, 257 insertions(+), 122 deletions(-)
 create mode 100644 packages/support-flags/keys.ts
 create mode 100644 packages/support-flags/parse.ts

diff --git a/packages/support-flags/index.ts b/packages/support-flags/index.ts
index f37fb7b8..021943c6 100644
--- a/packages/support-flags/index.ts
+++ b/packages/support-flags/index.ts
@@ -1,123 +1,3 @@
-import { parse as parseflags } from "@design-sdk/flags/parsing-strategy-dashdash";
-
-import { flag_key__artwork } from "./--artwork";
-import { flag_key__as_wrap } from "./--as-wrap";
-
-// prettier-ignore
-import { flag_key__as_h1, flag_key__as_heading1, flag_key__as_headline1, flag_key__h1, flag_key__heading1, flag_key__headline1 } from "./--as-h1";
-// prettier-ignore
-import { flag_key__as_h2, flag_key__as_heading2, flag_key__as_headline2, flag_key__h2, flag_key__heading2, flag_key__headline2 } from "./--as-h2";
-// prettier-ignore
-import { flag_key__as_h3, flag_key__as_heading3, flag_key__as_headline3, flag_key__h3, flag_key__heading3, flag_key__headline3 } from "./--as-h3";
-// prettier-ignore
-import { flag_key__as_h4, flag_key__as_heading4, flag_key__as_headline4, flag_key__h4, flag_key__heading4, flag_key__headline4 } from "./--as-h4";
-// prettier-ignore
-import { flag_key__as_h5, flag_key__as_heading5, flag_key__as_headline5, flag_key__h5, flag_key__heading5, flag_key__headline5 } from "./--as-h5";
-// prettier-ignore
-import { flag_key__as_h6, flag_key__as_heading6, flag_key__as_headline6, flag_key__h6, flag_key__heading6, flag_key__headline6 } from "./--as-h6";
-
-import { flag_key__module } from "./--module";
 export * from "./types";
-
-export function parse(name: string) {
-  try {
-    return parseflags(name, [
-      {
-        name: flag_key__artwork,
-        type: "bool",
-      },
-      {
-        name: flag_key__as_wrap,
-        type: "bool",
-      },
-      //#region
-      ...__h1_alias,
-      ...__h2_alias,
-      ...__h3_alias,
-      ...__h4_alias,
-      ...__h5_alias,
-      ...__h6_alias,
-      //#endregion
-      {
-        name: flag_key__module,
-        type: "bool", // TODO: support string also.
-      },
-      //. TODO: add other flags under here.
-    ]);
-  } catch (_) {
-    console.error("error while parsing flags", _);
-    return {};
-  }
-}
-
-const __h1_alias = [
-  flag_key__as_h1,
-  flag_key__as_heading1,
-  flag_key__as_headline1,
-  flag_key__h1,
-  flag_key__heading1,
-  flag_key__headline1,
-].map((k) => ({
-  name: k,
-  type: "bool",
-}));
-
-const __h2_alias = [
-  flag_key__as_h2,
-  flag_key__as_heading2,
-  flag_key__as_headline2,
-  flag_key__h2,
-  flag_key__heading2,
-  flag_key__headline2,
-].map((k) => ({
-  name: k,
-  type: "bool",
-}));
-
-const __h3_alias = [
-  flag_key__as_h3,
-  flag_key__as_heading3,
-  flag_key__as_headline3,
-  flag_key__h3,
-  flag_key__heading3,
-  flag_key__headline3,
-].map((k) => ({
-  name: k,
-  type: "bool",
-}));
-
-const __h4_alias = [
-  flag_key__as_h4,
-  flag_key__as_heading4,
-  flag_key__as_headline4,
-  flag_key__h4,
-  flag_key__heading4,
-  flag_key__headline4,
-].map((k) => ({
-  name: k,
-  type: "bool",
-}));
-
-const __h5_alias = [
-  flag_key__as_h5,
-  flag_key__as_heading5,
-  flag_key__as_headline5,
-  flag_key__h5,
-  flag_key__heading5,
-  flag_key__headline5,
-].map((k) => ({
-  name: k,
-  type: "bool",
-}));
-
-const __h6_alias = [
-  flag_key__as_h6,
-  flag_key__as_heading6,
-  flag_key__as_headline6,
-  flag_key__h6,
-  flag_key__heading6,
-  flag_key__headline6,
-].map((k) => ({
-  name: k,
-  type: "bool",
-}));
+export * as keys from "./keys";
+export { parse } from "./parse";
diff --git a/packages/support-flags/keys.ts b/packages/support-flags/keys.ts
new file mode 100644
index 00000000..b2036dce
--- /dev/null
+++ b/packages/support-flags/keys.ts
@@ -0,0 +1,66 @@
+// prettier-ignore
+import { flag_key__as_h1, flag_key__as_heading1, flag_key__as_headline1, flag_key__h1, flag_key__heading1, flag_key__headline1 } from "./--as-h1";
+// prettier-ignore
+import { flag_key__as_h2, flag_key__as_heading2, flag_key__as_headline2, flag_key__h2, flag_key__heading2, flag_key__headline2 } from "./--as-h2";
+// prettier-ignore
+import { flag_key__as_h3, flag_key__as_heading3, flag_key__as_headline3, flag_key__h3, flag_key__heading3, flag_key__headline3 } from "./--as-h3";
+// prettier-ignore
+import { flag_key__as_h4, flag_key__as_heading4, flag_key__as_headline4, flag_key__h4, flag_key__heading4, flag_key__headline4 } from "./--as-h4";
+// prettier-ignore
+import { flag_key__as_h5, flag_key__as_heading5, flag_key__as_headline5, flag_key__h5, flag_key__heading5, flag_key__headline5 } from "./--as-h5";
+// prettier-ignore
+import { flag_key__as_h6, flag_key__as_heading6, flag_key__as_headline6, flag_key__h6, flag_key__heading6, flag_key__headline6 } from "./--as-h6";
+
+export {
+  flag_key__as_h1,
+  flag_key__as_heading1,
+  flag_key__as_headline1,
+  flag_key__h1,
+  flag_key__heading1,
+  flag_key__headline1,
+};
+
+export {
+  flag_key__as_h2,
+  flag_key__as_heading2,
+  flag_key__as_headline2,
+  flag_key__h2,
+  flag_key__heading2,
+  flag_key__headline2,
+};
+
+export {
+  flag_key__as_h3,
+  flag_key__as_heading3,
+  flag_key__as_headline3,
+  flag_key__h3,
+  flag_key__heading3,
+  flag_key__headline3,
+};
+
+export {
+  flag_key__as_h4,
+  flag_key__as_heading4,
+  flag_key__as_headline4,
+  flag_key__h4,
+  flag_key__heading4,
+  flag_key__headline4,
+};
+
+export {
+  flag_key__as_h5,
+  flag_key__as_heading5,
+  flag_key__as_headline5,
+  flag_key__h5,
+  flag_key__heading5,
+  flag_key__headline5,
+};
+
+export {
+  flag_key__as_h6,
+  flag_key__as_heading6,
+  flag_key__as_headline6,
+  flag_key__h6,
+  flag_key__heading6,
+  flag_key__headline6,
+};
diff --git a/packages/support-flags/parse.ts b/packages/support-flags/parse.ts
new file mode 100644
index 00000000..daed4e4c
--- /dev/null
+++ b/packages/support-flags/parse.ts
@@ -0,0 +1,181 @@
+import { parse as parseflags } from "@design-sdk/flags/parsing-strategy-dashdash";
+
+import * as keys from "./keys";
+
+import { flag_key__artwork } from "./--artwork";
+import { flag_key__as_wrap } from "./--as-wrap";
+import { flag_key__module } from "./--module";
+import type {
+  HeadingFlag,
+  AsHeading1Flag,
+  AsHeading2Flag,
+  AsHeading3Flag,
+  AsHeading4Flag,
+  AsHeading5Flag,
+  AsHeading6Flag,
+} from "./types";
+
+export function parse(name: string) {
+  try {
+    const _raw_parsed = parseflags(name, [
+      {
+        name: flag_key__artwork,
+        type: "bool",
+      },
+      {
+        name: flag_key__as_wrap,
+        type: "bool",
+      },
+      //#region
+      ...__h1_alias_pref,
+      ...__h2_alias_pref,
+      ...__h3_alias_pref,
+      ...__h4_alias_pref,
+      ...__h5_alias_pref,
+      ...__h6_alias_pref,
+      //#endregion
+      {
+        name: flag_key__module,
+        type: "bool", // TODO: support string also.
+      },
+      //. TODO: add other flags under here.
+    ]);
+
+    const heading_flag = transform_heading_alias_from_raw(_raw_parsed);
+
+    return {
+      ..._raw_parsed,
+      ...heading_flag,
+      __meta: {
+        contains_heading_flag: !!Object.keys(heading_flag).length,
+      },
+    };
+  } catch (_) {
+    console.error("error while parsing flags", _);
+    return {};
+  }
+}
+
+function transform_heading_alias_from_raw(raw: { [key: string]: boolean }): {
+  [key: string]: HeadingFlag;
+} {
+  function handle_single_heading_alias(alias: string[]) {
+    // e.g. `[ { h1: true } ]`
+    const mapped: { key: string; value: boolean }[] = alias.map((_) => ({
+      key: _,
+      value: raw[_],
+    }));
+
+    // e.g `{ h1: {flag: "h1", value: true} }`
+    const converted: { [key: string]: HeadingFlag } = mapped.reduce(
+      (acc, c, i) => {
+        if (raw[c.key]) {
+          return {
+            ...acc,
+            [c.key]: <HeadingFlag>{ flag: c.key, value: raw[c.key] },
+          };
+        }
+        return acc;
+      },
+      {}
+    );
+
+    if (Object.keys(converted).length > 0) return converted;
+  }
+
+  const _h1_alias = handle_single_heading_alias(__h1_alias);
+  if (_h1_alias) return _h1_alias;
+
+  const _h2_alias = handle_single_heading_alias(__h2_alias);
+  if (_h2_alias) return _h2_alias;
+
+  const _h3_alias = handle_single_heading_alias(__h3_alias);
+  if (_h3_alias) return _h3_alias;
+
+  const _h4_alias = handle_single_heading_alias(__h4_alias);
+  if (_h4_alias) return _h4_alias;
+
+  const _h5_alias = handle_single_heading_alias(__h5_alias);
+  if (_h5_alias) return _h5_alias;
+
+  const _h6_alias = handle_single_heading_alias(__h6_alias);
+  if (_h6_alias) return _h6_alias;
+}
+
+const __h1_alias = [
+  keys.flag_key__as_h1,
+  keys.flag_key__as_heading1,
+  keys.flag_key__as_headline1,
+  keys.flag_key__h1,
+  keys.flag_key__heading1,
+  keys.flag_key__headline1,
+];
+const __h1_alias_pref = __h1_alias.map((k) => ({
+  name: k,
+  type: "bool",
+}));
+
+const __h2_alias = [
+  keys.flag_key__as_h2,
+  keys.flag_key__as_heading2,
+  keys.flag_key__as_headline2,
+  keys.flag_key__h2,
+  keys.flag_key__heading2,
+  keys.flag_key__headline2,
+];
+const __h2_alias_pref = __h2_alias.map((k) => ({
+  name: k,
+  type: "bool",
+}));
+
+const __h3_alias = [
+  keys.flag_key__as_h3,
+  keys.flag_key__as_heading3,
+  keys.flag_key__as_headline3,
+  keys.flag_key__h3,
+  keys.flag_key__heading3,
+  keys.flag_key__headline3,
+];
+const __h3_alias_pref = __h3_alias.map((k) => ({
+  name: k,
+  type: "bool",
+}));
+
+const __h4_alias = [
+  keys.flag_key__as_h4,
+  keys.flag_key__as_heading4,
+  keys.flag_key__as_headline4,
+  keys.flag_key__h4,
+  keys.flag_key__heading4,
+  keys.flag_key__headline4,
+];
+const __h4_alias_pref = __h4_alias.map((k) => ({
+  name: k,
+  type: "bool",
+}));
+
+const __h5_alias = [
+  keys.flag_key__as_h5,
+  keys.flag_key__as_heading5,
+  keys.flag_key__as_headline5,
+  keys.flag_key__h5,
+  keys.flag_key__heading5,
+  keys.flag_key__headline5,
+];
+const __h5_alias_pref = __h5_alias.map((k) => ({
+  name: k,
+  type: "bool",
+}));
+
+const __h6_alias = [
+  keys.flag_key__as_h6,
+  keys.flag_key__as_heading6,
+  keys.flag_key__as_headline6,
+  keys.flag_key__h6,
+  keys.flag_key__heading6,
+  keys.flag_key__headline6,
+];
+const __h6_alias_pref = __h6_alias.map((k) => ({
+  name: k,
+  type: "bool",
+}));
diff --git a/packages/support-flags/types.ts b/packages/support-flags/types.ts
index 099e7d6f..b73a3496 100644
--- a/packages/support-flags/types.ts
+++ b/packages/support-flags/types.ts
@@ -26,3 +26,11 @@ export type HeadingFlag =
   | AsHeading4Flag
   | AsHeading5Flag
   | AsHeading6Flag;
+
+export type { ArtworkFlag };
+export type { AsHeading1Flag };
+export type { AsHeading2Flag };
+export type { AsHeading3Flag };
+export type { AsHeading4Flag };
+export type { AsHeading5Flag };
+export type { AsHeading6Flag };

From 10ebba1aed7fb2d5c9456117d4397aceb6ed624a Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Thu, 30 Dec 2021 20:48:33 +0900
Subject: [PATCH 08/25] add h1  - h6 element tagging support for html based web
 frameworks with flag (e.g. --h1).

---
 externals/reflect-core                        |  2 +-
 .../index.ts                                  | 35 ++++++---
 .../builder-web-core/widgets-native/index.ts  |  2 +-
 .../designto-token/support-flags/index.ts     | 55 +++++++++++++-
 .../support-flags/token-heading/index.ts      | 72 +++++++++++++++++++
 .../support-flags/token-wrap/index.ts         |  6 +-
 .../tokens-to-web-widget/index.ts             |  4 +-
 7 files changed, 160 insertions(+), 16 deletions(-)
 rename packages/builder-web-core/widgets-native/{html-text-span => html-text-element}/index.ts (72%)
 create mode 100644 packages/designto-token/support-flags/token-heading/index.ts

diff --git a/externals/reflect-core b/externals/reflect-core
index cc76dca6..5c5edf1f 160000
--- a/externals/reflect-core
+++ b/externals/reflect-core
@@ -1 +1 @@
-Subproject commit cc76dca6a282d323353fbc1fa9d784fa06e949bd
+Subproject commit 5c5edf1fab4dbf2b0c7c1cae36f1a715e234061c
diff --git a/packages/builder-web-core/widgets-native/html-text-span/index.ts b/packages/builder-web-core/widgets-native/html-text-element/index.ts
similarity index 72%
rename from packages/builder-web-core/widgets-native/html-text-span/index.ts
rename to packages/builder-web-core/widgets-native/html-text-element/index.ts
index 88cd91ab..8611aaee 100644
--- a/packages/builder-web-core/widgets-native/html-text-span/index.ts
+++ b/packages/builder-web-core/widgets-native/html-text-element/index.ts
@@ -1,17 +1,18 @@
-import { JSXElementConfig, StylableJSXElementConfig, WidgetKey } from "../..";
-import {
-  TextDataWidget,
-  TextChildWidget,
-  StylableJsxWidget,
-} from "@web-builder/core";
+import { StylableJSXElementConfig, WidgetKey } from "../..";
+import { TextDataWidget, TextChildWidget } from "@web-builder/core";
 import * as core from "@reflect-ui/core";
-import { TextOverflow } from "@reflect-ui/core";
+import { TextOverflow, WebTextElement } from "@reflect-ui/core";
 import { CSSProperties } from "@coli.codes/css";
 import { JSX } from "coli";
 import { RGBA } from "@reflect-ui/core";
 import * as css from "@web-builder/styles";
 import { Dynamic } from "@reflect-ui/core/lib/_utility-types";
 
+/**
+ * Html Text Representative.
+ *
+ * You can select wich element to render with `elementPreference`. - choose between h1 ~ h6, p, span, etc.
+ */
 export class Text extends TextChildWidget {
   _type: "Text";
 
@@ -23,6 +24,9 @@ export class Text extends TextChildWidget {
   width?: number;
   height?: number;
 
+  // experimental
+  elementPreference?: WebTextElement;
+
   constructor(p: {
     key: WidgetKey;
     data: string;
@@ -31,6 +35,7 @@ export class Text extends TextChildWidget {
     textAlign: core.TextAlign;
     width?: number;
     height?: number;
+    elementPreference?: WebTextElement;
   }) {
     super(p);
 
@@ -41,6 +46,9 @@ export class Text extends TextChildWidget {
     this.textAlign = p.textAlign;
     this.width = p.width;
     this.height = p.height;
+
+    // experimental
+    this.elementPreference = p.elementPreference;
   }
 
   textData() {
@@ -54,7 +62,7 @@ export class Text extends TextChildWidget {
     let textStyle: any = {
       // text style
       // ------------------------------------------
-      color: css.color((this.textStyle.color as any) as RGBA),
+      color: css.color(this.textStyle.color as any as RGBA),
       "text-overflow": this.overflow,
       "font-size": css.px(this.textStyle.fontSize),
       "font-family": css.fontFamily(this.textStyle.fontFamily),
@@ -78,7 +86,16 @@ export class Text extends TextChildWidget {
   jsxConfig(): StylableJSXElementConfig {
     return <StylableJSXElementConfig>{
       type: "tag-and-attr",
-      tag: JSX.identifier("span"),
+      tag: JSX.identifier(__get_dedicated_element_tag(this.elementPreference)),
     };
   }
 }
+
+const __default_element_tag = "span";
+const __get_dedicated_element_tag = (t?: WebTextElement | undefined) => {
+  if (t) {
+    return t;
+  } else {
+    return __default_element_tag;
+  }
+};
diff --git a/packages/builder-web-core/widgets-native/index.ts b/packages/builder-web-core/widgets-native/index.ts
index 4ab9432e..428e10d6 100644
--- a/packages/builder-web-core/widgets-native/index.ts
+++ b/packages/builder-web-core/widgets-native/index.ts
@@ -3,7 +3,7 @@ export * from "./container";
 export * from "./row";
 export * from "./flex";
 export * from "./stack";
-export * from "./html-text-span";
+export * from "./html-text-element";
 export * from "./html-svg";
 export * from "./html-image";
 export * from "./error-widget";
diff --git a/packages/designto-token/support-flags/index.ts b/packages/designto-token/support-flags/index.ts
index 4125c2da..5116bc66 100644
--- a/packages/designto-token/support-flags/index.ts
+++ b/packages/designto-token/support-flags/index.ts
@@ -1,6 +1,7 @@
-import { parse } from "@code-features/flags";
+import { parse, keys } from "@code-features/flags";
 import type { ReflectSceneNode } from "@design-sdk/figma";
 import { tokenize_flagged_artwork } from "./token-artwork";
+import { tokenize_flagged_heading } from "./token-heading";
 import { tokenize_flagged_wrap } from "./token-wrap";
 
 export default function (node: ReflectSceneNode) {
@@ -9,6 +10,10 @@ export default function (node: ReflectSceneNode) {
 }
 
 function handle_with_flags(node, flags) {
+  // process.env.NODE_ENV === "development" &&
+  //   console.log("tokenize_flagged_node", node, flags);
+
+  // artwork
   const artwork_flag_alias =
     flags["artwork"] ||
     flags["export-as"] ||
@@ -23,8 +28,56 @@ function handle_with_flags(node, flags) {
     return tokenize_flagged_artwork(node, artwork_flag_alias);
   }
 
+  // wrap
   const wrap_flag_alias = flags["wrap"] || flags["as-wrap"] || flags["is-wrap"];
   if (wrap_flag_alias) {
     return tokenize_flagged_wrap(node, wrap_flag_alias);
   }
+
+  // heading
+  const heading_flag_alias =
+    flags[keys.flag_key__h1] ||
+    flags[keys.flag_key__as_h1] ||
+    flags[keys.flag_key__heading1] ||
+    flags[keys.flag_key__as_heading1] ||
+    flags[keys.flag_key__headline1] ||
+    flags[keys.flag_key__as_headline1] ||
+    //
+    flags[keys.flag_key__h2] ||
+    flags[keys.flag_key__as_h2] ||
+    flags[keys.flag_key__heading2] ||
+    flags[keys.flag_key__as_heading2] ||
+    flags[keys.flag_key__headline2] ||
+    flags[keys.flag_key__as_headline2] ||
+    //
+    flags[keys.flag_key__h3] ||
+    flags[keys.flag_key__as_h3] ||
+    flags[keys.flag_key__heading3] ||
+    flags[keys.flag_key__as_heading3] ||
+    flags[keys.flag_key__headline3] ||
+    flags[keys.flag_key__as_headline3] ||
+    //
+    flags[keys.flag_key__h4] ||
+    flags[keys.flag_key__as_h4] ||
+    flags[keys.flag_key__heading4] ||
+    flags[keys.flag_key__as_heading4] ||
+    flags[keys.flag_key__headline4] ||
+    flags[keys.flag_key__as_headline4] ||
+    //
+    flags[keys.flag_key__h5] ||
+    flags[keys.flag_key__as_h5] ||
+    flags[keys.flag_key__heading5] ||
+    flags[keys.flag_key__as_heading5] ||
+    flags[keys.flag_key__headline5] ||
+    flags[keys.flag_key__as_headline5] ||
+    //
+    flags[keys.flag_key__h6] ||
+    flags[keys.flag_key__as_h6] ||
+    flags[keys.flag_key__heading6] ||
+    flags[keys.flag_key__as_heading6] ||
+    flags[keys.flag_key__headline6] ||
+    flags[keys.flag_key__as_headline6];
+  if (heading_flag_alias) {
+    return tokenize_flagged_heading(node, heading_flag_alias);
+  }
 }
diff --git a/packages/designto-token/support-flags/token-heading/index.ts b/packages/designto-token/support-flags/token-heading/index.ts
new file mode 100644
index 00000000..2aa5f717
--- /dev/null
+++ b/packages/designto-token/support-flags/token-heading/index.ts
@@ -0,0 +1,72 @@
+import { HeadingFlag } from "@code-features/flags";
+import { ReflectSceneNode } from "@design-sdk/figma-node";
+import type { Text } from "@reflect-ui/core";
+import { tokenizeText } from "../../token-text";
+
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+
+export function tokenize_flagged_heading(
+  node: ReflectSceneNode,
+  flag: HeadingFlag
+) {
+  if (flag.value === false) return node;
+  if (node.type !== "TEXT") return node;
+
+  const level = get_level(flag);
+
+  const text = tokenizeText.fromText(node);
+  text.element_preference_experimental = `h${level}`;
+  return text;
+}
+
+function get_level(flag: HeadingFlag): HeadingLevel {
+  switch (flag.flag) {
+    case "h1":
+    case "as-h1":
+    case "as-heading1":
+    case "heading1":
+    case "as-headline1":
+    case "headline1":
+      return 1;
+
+    case "h2":
+    case "as-h2":
+    case "as-heading2":
+    case "heading2":
+    case "as-headline2":
+    case "headline2":
+      return 2;
+
+    case "h3":
+    case "as-h3":
+    case "as-heading3":
+    case "heading3":
+    case "as-headline3":
+    case "headline3":
+      return 3;
+
+    case "h4":
+    case "as-h4":
+    case "as-heading4":
+    case "heading4":
+    case "as-headline4":
+    case "headline4":
+      return 4;
+
+    case "h5":
+    case "as-h5":
+    case "as-heading5":
+    case "heading5":
+    case "as-headline5":
+    case "headline5":
+      return 5;
+
+    case "h6":
+    case "as-h6":
+    case "as-heading6":
+    case "heading6":
+    case "as-headline6":
+    case "headline6":
+      return 6;
+  }
+}
diff --git a/packages/designto-token/support-flags/token-wrap/index.ts b/packages/designto-token/support-flags/token-wrap/index.ts
index bc29c8f3..e0b19338 100644
--- a/packages/designto-token/support-flags/token-wrap/index.ts
+++ b/packages/designto-token/support-flags/token-wrap/index.ts
@@ -36,6 +36,8 @@ export function tokenize_flagged_wrap(
   node: ReflectSceneNode,
   flag: AsWrapFlag
 ) {
+  if (flag.value === false) return node;
+
   const validated = validate_input(node as any);
   if (validated.error === false) {
     // console.log("validated as wrap", validated);
@@ -73,9 +75,7 @@ export function tokenize_flagged_wrap(
  * 2. the children should be columns or rows
  * @param input
  */
-function validate_input(
-  node: ReflectFrameNode
-):
+function validate_input(node: ReflectFrameNode):
   | {
       error: false;
       wrap_root: ReflectFrameNode;
diff --git a/packages/designto-web/tokens-to-web-widget/index.ts b/packages/designto-web/tokens-to-web-widget/index.ts
index 54d17d52..959a2c60 100644
--- a/packages/designto-web/tokens-to-web-widget/index.ts
+++ b/packages/designto-web/tokens-to-web-widget/index.ts
@@ -141,10 +141,12 @@ function compose<T extends JsxWidget>(
   else if (widget instanceof core.RenderedText) {
     thisWebWidget = new web.Text({
       ...widget,
+      key: _key,
       textStyle:
         widget.style /** explicit assignment - field name is different */,
       data: widget.data,
-      key: _key,
+      // experimental element specification
+      elementPreference: widget.element_preference_experimental,
     });
   } else if (widget instanceof core.VectorWidget) {
     thisWebWidget = new web.SvgElement({

From aea9c22624d6ce60b55424449eb325f51881f390 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Thu, 30 Dec 2021 21:35:07 +0900
Subject: [PATCH 09/25] add meta to h1-h6 docs (stage info)

---
 packages/support-flags/--as-h1/README.md | 7 +++++++
 packages/support-flags/--as-h2/README.md | 7 +++++++
 packages/support-flags/--as-h3/README.md | 7 +++++++
 packages/support-flags/--as-h4/README.md | 7 +++++++
 packages/support-flags/--as-h5/README.md | 7 +++++++
 packages/support-flags/--as-h6/README.md | 7 +++++++
 6 files changed, 42 insertions(+)

diff --git a/packages/support-flags/--as-h1/README.md b/packages/support-flags/--as-h1/README.md
index 52f458cc..e5cd9812 100644
--- a/packages/support-flags/--as-h1/README.md
+++ b/packages/support-flags/--as-h1/README.md
@@ -1,3 +1,10 @@
+---
+stage:
+  - production
+  - staging
+  - experimental
+---
+
 # `--as-h1` As Heading1
 
 **Accepted keys**
diff --git a/packages/support-flags/--as-h2/README.md b/packages/support-flags/--as-h2/README.md
index fa445f98..9bd9cc32 100644
--- a/packages/support-flags/--as-h2/README.md
+++ b/packages/support-flags/--as-h2/README.md
@@ -1,3 +1,10 @@
+---
+stage:
+  - production
+  - staging
+  - experimental
+---
+
 # `--as-h2` As Heading2
 
 **Accepted keys**
diff --git a/packages/support-flags/--as-h3/README.md b/packages/support-flags/--as-h3/README.md
index d023fe75..8adfd930 100644
--- a/packages/support-flags/--as-h3/README.md
+++ b/packages/support-flags/--as-h3/README.md
@@ -1,3 +1,10 @@
+---
+stage:
+  - production
+  - staging
+  - experimental
+---
+
 # `--as-h3` As Heading3
 
 **Accepted keys**
diff --git a/packages/support-flags/--as-h4/README.md b/packages/support-flags/--as-h4/README.md
index bb654504..bbae2a70 100644
--- a/packages/support-flags/--as-h4/README.md
+++ b/packages/support-flags/--as-h4/README.md
@@ -1,3 +1,10 @@
+---
+stage:
+  - production
+  - staging
+  - experimental
+---
+
 # `--as-h4` As Heading4
 
 **Accepted keys**
diff --git a/packages/support-flags/--as-h5/README.md b/packages/support-flags/--as-h5/README.md
index b3b93aa6..5503a80a 100644
--- a/packages/support-flags/--as-h5/README.md
+++ b/packages/support-flags/--as-h5/README.md
@@ -1,3 +1,10 @@
+---
+stage:
+  - production
+  - staging
+  - experimental
+---
+
 # `--as-h5` As Heading5
 
 **Accepted keys**
diff --git a/packages/support-flags/--as-h6/README.md b/packages/support-flags/--as-h6/README.md
index c42260d6..3db14248 100644
--- a/packages/support-flags/--as-h6/README.md
+++ b/packages/support-flags/--as-h6/README.md
@@ -1,3 +1,10 @@
+---
+stage:
+  - production
+  - staging
+  - experimental
+---
+
 # `--as-h6` As Heading6
 
 **Accepted keys**

From 0dcce078af7502a0a70025220c36e6d00de9b66c Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Thu, 30 Dec 2021 21:50:31 +0900
Subject: [PATCH 10/25] add mimic heading level parsing safety for flags

---
 packages/designto-token/support-flags/token-heading/index.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/designto-token/support-flags/token-heading/index.ts b/packages/designto-token/support-flags/token-heading/index.ts
index 2aa5f717..59cc3e95 100644
--- a/packages/designto-token/support-flags/token-heading/index.ts
+++ b/packages/designto-token/support-flags/token-heading/index.ts
@@ -13,6 +13,7 @@ export function tokenize_flagged_heading(
   if (node.type !== "TEXT") return node;
 
   const level = get_level(flag);
+  if (level === undefined) return node; // this won't be happening
 
   const text = tokenizeText.fromText(node);
   text.element_preference_experimental = `h${level}`;
@@ -69,4 +70,6 @@ function get_level(flag: HeadingFlag): HeadingLevel {
     case "headline6":
       return 6;
   }
+
+  console.trace("level parsing from heading flag failed.");
 }

From c45109dea15ad3b4ba1056ea7ef0944495f66ba3 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Thu, 30 Dec 2021 22:52:21 +0900
Subject: [PATCH 11/25] fix build error;

---
 .../designto-token/support-flags/token-heading/index.ts     | 6 +++---
 packages/designto-token/support-flags/token-wrap/index.ts   | 2 +-
 packages/support-flags/--as-h1/index.ts                     | 3 ++-
 packages/support-flags/--as-h2/index.ts                     | 3 ++-
 packages/support-flags/--as-h3/index.ts                     | 4 +++-
 packages/support-flags/--as-h4/index.ts                     | 4 +++-
 packages/support-flags/--as-h5/index.ts                     | 4 +++-
 packages/support-flags/--as-h6/index.ts                     | 4 +++-
 8 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/packages/designto-token/support-flags/token-heading/index.ts b/packages/designto-token/support-flags/token-heading/index.ts
index 59cc3e95..68c8d6f8 100644
--- a/packages/designto-token/support-flags/token-heading/index.ts
+++ b/packages/designto-token/support-flags/token-heading/index.ts
@@ -9,11 +9,11 @@ export function tokenize_flagged_heading(
   node: ReflectSceneNode,
   flag: HeadingFlag
 ) {
-  if (flag.value === false) return node;
-  if (node.type !== "TEXT") return node;
+  if (flag.value === false) return;
+  if (node.type !== "TEXT") return;
 
   const level = get_level(flag);
-  if (level === undefined) return node; // this won't be happening
+  if (level === undefined) return; // this won't be happening
 
   const text = tokenizeText.fromText(node);
   text.element_preference_experimental = `h${level}`;
diff --git a/packages/designto-token/support-flags/token-wrap/index.ts b/packages/designto-token/support-flags/token-wrap/index.ts
index e0b19338..00ae47ae 100644
--- a/packages/designto-token/support-flags/token-wrap/index.ts
+++ b/packages/designto-token/support-flags/token-wrap/index.ts
@@ -36,7 +36,7 @@ export function tokenize_flagged_wrap(
   node: ReflectSceneNode,
   flag: AsWrapFlag
 ) {
-  if (flag.value === false) return node;
+  if (flag.value === false) return;
 
   const validated = validate_input(node as any);
   if (validated.error === false) {
diff --git a/packages/support-flags/--as-h1/index.ts b/packages/support-flags/--as-h1/index.ts
index f9c77b55..f1957a7a 100644
--- a/packages/support-flags/--as-h1/index.ts
+++ b/packages/support-flags/--as-h1/index.ts
@@ -14,5 +14,6 @@ export interface AsHeading1Flag {
     | typeof flag_key__heading1
     | typeof flag_key__headline1;
 
-  value?: boolean;
+  value: boolean;
+  _raw?: string;
 }
diff --git a/packages/support-flags/--as-h2/index.ts b/packages/support-flags/--as-h2/index.ts
index 76a67f0e..3afda2a1 100644
--- a/packages/support-flags/--as-h2/index.ts
+++ b/packages/support-flags/--as-h2/index.ts
@@ -14,5 +14,6 @@ export interface AsHeading2Flag {
     | typeof flag_key__heading2
     | typeof flag_key__headline2;
 
-  value?: boolean;
+  value: boolean;
+  _raw?: string;
 }
diff --git a/packages/support-flags/--as-h3/index.ts b/packages/support-flags/--as-h3/index.ts
index 5dcf23dc..0f37133f 100644
--- a/packages/support-flags/--as-h3/index.ts
+++ b/packages/support-flags/--as-h3/index.ts
@@ -13,5 +13,7 @@ export interface AsHeading3Flag {
     | typeof flag_key__h3
     | typeof flag_key__heading3
     | typeof flag_key__headline3;
-  value?: boolean;
+
+  value: boolean;
+  _raw?: string;
 }
diff --git a/packages/support-flags/--as-h4/index.ts b/packages/support-flags/--as-h4/index.ts
index b2ab0eaf..002806ca 100644
--- a/packages/support-flags/--as-h4/index.ts
+++ b/packages/support-flags/--as-h4/index.ts
@@ -13,5 +13,7 @@ export interface AsHeading4Flag {
     | typeof flag_key__h4
     | typeof flag_key__heading4
     | typeof flag_key__headline4;
-  value?: boolean;
+
+  value: boolean;
+  _raw?: string;
 }
diff --git a/packages/support-flags/--as-h5/index.ts b/packages/support-flags/--as-h5/index.ts
index d1555508..6346a8b5 100644
--- a/packages/support-flags/--as-h5/index.ts
+++ b/packages/support-flags/--as-h5/index.ts
@@ -13,5 +13,7 @@ export interface AsHeading5Flag {
     | typeof flag_key__h5
     | typeof flag_key__heading5
     | typeof flag_key__headline5;
-  value?: boolean;
+
+  value: boolean;
+  _raw?: string;
 }
diff --git a/packages/support-flags/--as-h6/index.ts b/packages/support-flags/--as-h6/index.ts
index 07d1b47e..36d10515 100644
--- a/packages/support-flags/--as-h6/index.ts
+++ b/packages/support-flags/--as-h6/index.ts
@@ -13,5 +13,7 @@ export interface AsHeading6Flag {
     | typeof flag_key__h6
     | typeof flag_key__heading6
     | typeof flag_key__headline6;
-  value?: boolean;
+
+  value: boolean;
+  _raw?: string;
 }

From a1ce56a90078cb4b0b5d37a740913af514e5fa10 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Thu, 30 Dec 2021 22:53:22 +0900
Subject: [PATCH 12/25] add `span` and `p` support wih flags - text element
 preference flag annotation

---
 .../designto-token/support-flags/index.ts     |  20 ++
 .../support-flags/token-p/index.ts            |  16 ++
 .../support-flags/token-span/index.ts         |  16 ++
 packages/support-flags/--as-p/README.md       |  48 +++++
 packages/support-flags/--as-p/index.ts        |  13 ++
 packages/support-flags/--as-span/README.md    |  59 ++++++
 packages/support-flags/--as-span/index.ts     |  17 ++
 packages/support-flags/keys.ts                |  19 ++
 packages/support-flags/parse.ts               | 181 ++++++++++++------
 packages/support-flags/types.ts               |  46 ++++-
 10 files changed, 366 insertions(+), 69 deletions(-)
 create mode 100644 packages/designto-token/support-flags/token-p/index.ts
 create mode 100644 packages/designto-token/support-flags/token-span/index.ts
 create mode 100644 packages/support-flags/--as-p/index.ts
 create mode 100644 packages/support-flags/--as-span/README.md
 create mode 100644 packages/support-flags/--as-span/index.ts

diff --git a/packages/designto-token/support-flags/index.ts b/packages/designto-token/support-flags/index.ts
index 5116bc66..7bfeb09e 100644
--- a/packages/designto-token/support-flags/index.ts
+++ b/packages/designto-token/support-flags/index.ts
@@ -2,6 +2,8 @@ import { parse, keys } from "@code-features/flags";
 import type { ReflectSceneNode } from "@design-sdk/figma";
 import { tokenize_flagged_artwork } from "./token-artwork";
 import { tokenize_flagged_heading } from "./token-heading";
+import { tokenize_flagged_paragraph } from "./token-p";
+import { tokenize_flagged_span } from "./token-span";
 import { tokenize_flagged_wrap } from "./token-wrap";
 
 export default function (node: ReflectSceneNode) {
@@ -80,4 +82,22 @@ function handle_with_flags(node, flags) {
   if (heading_flag_alias) {
     return tokenize_flagged_heading(node, heading_flag_alias);
   }
+
+  const span_flag_alias =
+    flags[keys.flag_key__as_span] ||
+    flags[keys.flag_key__as_text_span] ||
+    flags[keys.flag_key__as_textspan] ||
+    flags[keys.flag_key__text_span] ||
+    flags[keys.flag_key__textspan];
+  if (span_flag_alias) {
+    return tokenize_flagged_span(node, span_flag_alias);
+  }
+
+  const paragraph_flag_alias =
+    flags[keys.flag_key__as_p] ||
+    flags[keys.flag_key__paragraph] ||
+    flags[keys.flag_key__as_paragraph];
+  if (paragraph_flag_alias) {
+    return tokenize_flagged_paragraph(node, paragraph_flag_alias);
+  }
 }
diff --git a/packages/designto-token/support-flags/token-p/index.ts b/packages/designto-token/support-flags/token-p/index.ts
new file mode 100644
index 00000000..766c8a61
--- /dev/null
+++ b/packages/designto-token/support-flags/token-p/index.ts
@@ -0,0 +1,16 @@
+import { AsParagraphFlag } from "@code-features/flags";
+import { ReflectSceneNode } from "@design-sdk/figma-node";
+import type { Text } from "@reflect-ui/core";
+import { tokenizeText } from "../../token-text";
+
+export function tokenize_flagged_paragraph(
+  node: ReflectSceneNode,
+  flag: AsParagraphFlag
+) {
+  if (flag.value === false) return;
+  if (node.type !== "TEXT") return;
+
+  const text = tokenizeText.fromText(node);
+  text.element_preference_experimental = `p`;
+  return text;
+}
diff --git a/packages/designto-token/support-flags/token-span/index.ts b/packages/designto-token/support-flags/token-span/index.ts
new file mode 100644
index 00000000..4232fc19
--- /dev/null
+++ b/packages/designto-token/support-flags/token-span/index.ts
@@ -0,0 +1,16 @@
+import { AsTextSpanFlag } from "@code-features/flags";
+import { ReflectSceneNode } from "@design-sdk/figma-node";
+import type { Text } from "@reflect-ui/core";
+import { tokenizeText } from "../../token-text";
+
+export function tokenize_flagged_span(
+  node: ReflectSceneNode,
+  flag: AsTextSpanFlag
+) {
+  if (flag.value === false) return node;
+  if (node.type !== "TEXT") return node;
+
+  const text = tokenizeText.fromText(node);
+  text.element_preference_experimental = `span`;
+  return text;
+}
diff --git a/packages/support-flags/--as-p/README.md b/packages/support-flags/--as-p/README.md
index e69de29b..c33c2aca 100644
--- a/packages/support-flags/--as-p/README.md
+++ b/packages/support-flags/--as-p/README.md
@@ -0,0 +1,48 @@
+# `--as-p` As Paragraph (Text)
+
+> This flag is for web platform. Otherwise, it will be ignored, have no impact on the final output.
+
+**Accepted keys**
+
+- `--as-p`
+- `--as-paragraph`
+- `--paragraph`
+
+## Syntax
+
+```ts
+`--as-p${"="typeof boolean}`
+```
+
+## Example
+
+```
+--paragraph
+
+--paragraph=true
+--paragraph=false
+
+--paragraph=yes
+--paragraph=no
+
+----paragraph
+```
+
+## Behavior
+
+**Element**
+When applied, this will force the node to be rendered as a `<p>` element.
+
+**Text style**
+We don't yet support text style matching with `--p` flag.
+
+## See Also
+
+- [`--as-h1`](../--as-h1)
+- [`--as-h2`](../--as-h2)
+- [`--as-h3`](../--as-h3)
+- [`--as-h4`](../--as-h4)
+- [`--as-h5`](../--as-h5)
+- [`--as-h6`](../--as-h6)
+- [`--as-p`](../--as-p)
+- [`--as-br`](../--as-br)
diff --git a/packages/support-flags/--as-p/index.ts b/packages/support-flags/--as-p/index.ts
new file mode 100644
index 00000000..2b8f2f52
--- /dev/null
+++ b/packages/support-flags/--as-p/index.ts
@@ -0,0 +1,13 @@
+export const flag_key__as_p = "as-p";
+export const flag_key__as_paragraph = "as-paragraph";
+export const flag_key__paragraph = "paragraph";
+
+export interface AsParagraphFlag {
+  flag:
+    | typeof flag_key__as_p
+    | typeof flag_key__as_paragraph
+    | typeof flag_key__paragraph;
+
+  value: boolean;
+  _raw?: string;
+}
diff --git a/packages/support-flags/--as-span/README.md b/packages/support-flags/--as-span/README.md
new file mode 100644
index 00000000..85325de1
--- /dev/null
+++ b/packages/support-flags/--as-span/README.md
@@ -0,0 +1,59 @@
+# `--as-span` As TextSpan (Text)
+
+> This flag is for web platform. Otherwise, it will be ignored, have no impact on the final output.
+
+**Accepted keys**
+
+- `--as-span`
+- `--as-text-span`
+- `--as-textspan`
+- `--text-span`
+- `--textspan`
+
+## Syntax
+
+```ts
+`--as-span${"="typeof boolean}`
+```
+
+## Example
+
+```
+--as-span
+
+--as-span=true
+--as-span=false
+
+--as-span=yes
+--as-span=no
+
+----as-span
+```
+
+## Behavior
+
+**Element**
+When applied, this will force the node to be rendered as a `<span>` element.
+
+**Text style**
+We don't yet support text style matching with `--as-span` flag.
+
+## Anatomy
+
+```ts
+export interface AsSpanFlag {
+  flag: "as-span" | "as-text-span" | "as-textspan" | "text-span" | "textspan";
+
+  value?: boolean;
+}
+```
+
+## See Also
+
+- [`--as-h1`](../--as-h1)
+- [`--as-h2`](../--as-h2)
+- [`--as-h3`](../--as-h3)
+- [`--as-h4`](../--as-h4)
+- [`--as-h5`](../--as-h5)
+- [`--as-h6`](../--as-h6)
+- [`--as-p`](../--as-p)
diff --git a/packages/support-flags/--as-span/index.ts b/packages/support-flags/--as-span/index.ts
new file mode 100644
index 00000000..d731fcf2
--- /dev/null
+++ b/packages/support-flags/--as-span/index.ts
@@ -0,0 +1,17 @@
+export const flag_key__as_span = "as-span";
+export const flag_key__as_text_span = "as-text-span";
+export const flag_key__as_textspan = "as-textspan";
+export const flag_key__text_span = "text-span";
+export const flag_key__textspan = "textspan";
+
+export interface AsTextSpanFlag {
+  flag:
+    | typeof flag_key__as_span
+    | typeof flag_key__as_text_span
+    | typeof flag_key__as_textspan
+    | typeof flag_key__text_span
+    | typeof flag_key__textspan;
+
+  value: boolean;
+  _raw?: string;
+}
diff --git a/packages/support-flags/keys.ts b/packages/support-flags/keys.ts
index b2036dce..7a9fb050 100644
--- a/packages/support-flags/keys.ts
+++ b/packages/support-flags/keys.ts
@@ -10,6 +10,10 @@ import { flag_key__as_h4, flag_key__as_heading4, flag_key__as_headline4, flag_ke
 import { flag_key__as_h5, flag_key__as_heading5, flag_key__as_headline5, flag_key__h5, flag_key__heading5, flag_key__headline5 } from "./--as-h5";
 // prettier-ignore
 import { flag_key__as_h6, flag_key__as_heading6, flag_key__as_headline6, flag_key__h6, flag_key__heading6, flag_key__headline6 } from "./--as-h6";
+// prettier-ignore
+import { flag_key__as_p, flag_key__as_paragraph, flag_key__paragraph } from "./--as-p";
+// prettier-ignore
+import { flag_key__as_span, flag_key__as_text_span, flag_key__as_textspan, flag_key__text_span, flag_key__textspan } from "./--as-span";
 
 export {
   flag_key__as_h1,
@@ -64,3 +68,18 @@ export {
   flag_key__heading6,
   flag_key__headline6,
 };
+
+export {
+  //
+  flag_key__as_p,
+  flag_key__as_paragraph,
+  flag_key__paragraph,
+};
+
+export {
+  flag_key__as_span,
+  flag_key__as_text_span,
+  flag_key__as_textspan,
+  flag_key__text_span,
+  flag_key__textspan,
+};
diff --git a/packages/support-flags/parse.ts b/packages/support-flags/parse.ts
index daed4e4c..43b12d0d 100644
--- a/packages/support-flags/parse.ts
+++ b/packages/support-flags/parse.ts
@@ -7,12 +7,10 @@ import { flag_key__as_wrap } from "./--as-wrap";
 import { flag_key__module } from "./--module";
 import type {
   HeadingFlag,
-  AsHeading1Flag,
-  AsHeading2Flag,
-  AsHeading3Flag,
-  AsHeading4Flag,
-  AsHeading5Flag,
-  AsHeading6Flag,
+  TextElementPreferenceFlag,
+  AsParagraphFlag,
+  AsTextSpanFlag,
+  SimpleBooleanValueFlag,
 } from "./types";
 
 export function parse(name: string) {
@@ -33,6 +31,8 @@ export function parse(name: string) {
       ...__h4_alias_pref,
       ...__h5_alias_pref,
       ...__h6_alias_pref,
+      ...__p_alias_pref,
+      ...__textspan_alias_pref,
       //#endregion
       {
         name: flag_key__module,
@@ -41,13 +41,25 @@ export function parse(name: string) {
       //. TODO: add other flags under here.
     ]);
 
-    const heading_flag = transform_heading_alias_from_raw(_raw_parsed);
+    const as_heading_flag = transform_heading_alias_from_raw(_raw_parsed);
+    const as_paragraph_flag = handle_single_boolean_flag_alias<AsParagraphFlag>(
+      _raw_parsed,
+      __p_alias
+    );
+    const as_span_flag = handle_single_boolean_flag_alias<AsTextSpanFlag>(
+      _raw_parsed,
+      __textspan_alias
+    );
 
     return {
       ..._raw_parsed,
-      ...heading_flag,
+      ...as_heading_flag,
+      ...(as_paragraph_flag ?? {}),
+      ...(as_span_flag ?? {}),
       __meta: {
-        contains_heading_flag: !!Object.keys(heading_flag).length,
+        contains_heading_flag: notempty(as_heading_flag),
+        contains_paragraph_flag: notempty(as_paragraph_flag),
+        contains_span_flag: notempty(as_span_flag),
       },
     };
   } catch (_) {
@@ -56,49 +68,74 @@ export function parse(name: string) {
   }
 }
 
+const notempty = (obj) => Object.keys(obj ?? {}).length > 0;
+
+const _simple_boolean_value_flag_prefernce_mapper = (k) => ({
+  name: k,
+  type: "bool",
+});
+
+function handle_single_boolean_flag_alias<T extends SimpleBooleanValueFlag>(
+  raw: { [key: string]: boolean },
+  alias: string[]
+) {
+  // e.g. `[ { h1: true } ]`
+  const mapped: { key: string; value: boolean }[] = alias.map((_) => ({
+    key: _,
+    value: raw[_],
+  }));
+
+  // e.g `{ h1: {flag: "h1", value: true} }`
+  const converted: { [key: string]: T } = mapped.reduce((acc, c, i) => {
+    if (raw[c.key]) {
+      return {
+        ...acc,
+        [c.key]: <T>{ flag: c.key, value: raw[c.key] },
+      };
+    }
+    return acc;
+  }, {});
+
+  if (Object.keys(converted).length > 0) return converted;
+}
+
 function transform_heading_alias_from_raw(raw: { [key: string]: boolean }): {
   [key: string]: HeadingFlag;
 } {
-  function handle_single_heading_alias(alias: string[]) {
-    // e.g. `[ { h1: true } ]`
-    const mapped: { key: string; value: boolean }[] = alias.map((_) => ({
-      key: _,
-      value: raw[_],
-    }));
-
-    // e.g `{ h1: {flag: "h1", value: true} }`
-    const converted: { [key: string]: HeadingFlag } = mapped.reduce(
-      (acc, c, i) => {
-        if (raw[c.key]) {
-          return {
-            ...acc,
-            [c.key]: <HeadingFlag>{ flag: c.key, value: raw[c.key] },
-          };
-        }
-        return acc;
-      },
-      {}
-    );
-
-    if (Object.keys(converted).length > 0) return converted;
-  }
-
-  const _h1_alias = handle_single_heading_alias(__h1_alias);
+  const _h1_alias = handle_single_boolean_flag_alias<HeadingFlag>(
+    raw,
+    __h1_alias
+  );
   if (_h1_alias) return _h1_alias;
 
-  const _h2_alias = handle_single_heading_alias(__h2_alias);
+  const _h2_alias = handle_single_boolean_flag_alias<HeadingFlag>(
+    raw,
+    __h2_alias
+  );
   if (_h2_alias) return _h2_alias;
 
-  const _h3_alias = handle_single_heading_alias(__h3_alias);
+  const _h3_alias = handle_single_boolean_flag_alias<HeadingFlag>(
+    raw,
+    __h3_alias
+  );
   if (_h3_alias) return _h3_alias;
 
-  const _h4_alias = handle_single_heading_alias(__h4_alias);
+  const _h4_alias = handle_single_boolean_flag_alias<HeadingFlag>(
+    raw,
+    __h4_alias
+  );
   if (_h4_alias) return _h4_alias;
 
-  const _h5_alias = handle_single_heading_alias(__h5_alias);
+  const _h5_alias = handle_single_boolean_flag_alias<HeadingFlag>(
+    raw,
+    __h5_alias
+  );
   if (_h5_alias) return _h5_alias;
 
-  const _h6_alias = handle_single_heading_alias(__h6_alias);
+  const _h6_alias = handle_single_boolean_flag_alias<HeadingFlag>(
+    raw,
+    __h6_alias
+  );
   if (_h6_alias) return _h6_alias;
 }
 
@@ -110,10 +147,9 @@ const __h1_alias = [
   keys.flag_key__heading1,
   keys.flag_key__headline1,
 ];
-const __h1_alias_pref = __h1_alias.map((k) => ({
-  name: k,
-  type: "bool",
-}));
+const __h1_alias_pref = __h1_alias.map(
+  _simple_boolean_value_flag_prefernce_mapper
+);
 
 const __h2_alias = [
   keys.flag_key__as_h2,
@@ -123,10 +159,9 @@ const __h2_alias = [
   keys.flag_key__heading2,
   keys.flag_key__headline2,
 ];
-const __h2_alias_pref = __h2_alias.map((k) => ({
-  name: k,
-  type: "bool",
-}));
+const __h2_alias_pref = __h2_alias.map(
+  _simple_boolean_value_flag_prefernce_mapper
+);
 
 const __h3_alias = [
   keys.flag_key__as_h3,
@@ -136,10 +171,9 @@ const __h3_alias = [
   keys.flag_key__heading3,
   keys.flag_key__headline3,
 ];
-const __h3_alias_pref = __h3_alias.map((k) => ({
-  name: k,
-  type: "bool",
-}));
+const __h3_alias_pref = __h3_alias.map(
+  _simple_boolean_value_flag_prefernce_mapper
+);
 
 const __h4_alias = [
   keys.flag_key__as_h4,
@@ -149,10 +183,9 @@ const __h4_alias = [
   keys.flag_key__heading4,
   keys.flag_key__headline4,
 ];
-const __h4_alias_pref = __h4_alias.map((k) => ({
-  name: k,
-  type: "bool",
-}));
+const __h4_alias_pref = __h4_alias.map(
+  _simple_boolean_value_flag_prefernce_mapper
+);
 
 const __h5_alias = [
   keys.flag_key__as_h5,
@@ -162,10 +195,9 @@ const __h5_alias = [
   keys.flag_key__heading5,
   keys.flag_key__headline5,
 ];
-const __h5_alias_pref = __h5_alias.map((k) => ({
-  name: k,
-  type: "bool",
-}));
+const __h5_alias_pref = __h5_alias.map(
+  _simple_boolean_value_flag_prefernce_mapper
+);
 
 const __h6_alias = [
   keys.flag_key__as_h6,
@@ -175,7 +207,30 @@ const __h6_alias = [
   keys.flag_key__heading6,
   keys.flag_key__headline6,
 ];
-const __h6_alias_pref = __h6_alias.map((k) => ({
-  name: k,
-  type: "bool",
-}));
+const __h6_alias_pref = __h6_alias.map(
+  _simple_boolean_value_flag_prefernce_mapper
+);
+
+// -----------------------------------------------------------------------------
+// -----------------------------------------------------------------------------
+// -----------------------------------------------------------------------------
+
+const __p_alias = [
+  keys.flag_key__as_p,
+  keys.flag_key__as_paragraph,
+  keys.flag_key__paragraph,
+];
+const __p_alias_pref = __p_alias.map(
+  _simple_boolean_value_flag_prefernce_mapper
+);
+
+const __textspan_alias = [
+  keys.flag_key__as_span,
+  keys.flag_key__as_text_span,
+  keys.flag_key__as_textspan,
+  keys.flag_key__text_span,
+  keys.flag_key__textspan,
+];
+const __textspan_alias_pref = __textspan_alias.map(
+  _simple_boolean_value_flag_prefernce_mapper
+);
diff --git a/packages/support-flags/types.ts b/packages/support-flags/types.ts
index b73a3496..f320a59a 100644
--- a/packages/support-flags/types.ts
+++ b/packages/support-flags/types.ts
@@ -5,9 +5,33 @@ import type { AsHeading3Flag } from "./--as-h3";
 import type { AsHeading4Flag } from "./--as-h4";
 import type { AsHeading5Flag } from "./--as-h5";
 import type { AsHeading6Flag } from "./--as-h6";
+import type { AsParagraphFlag } from "./--as-p";
+import type { AsTextSpanFlag } from "./--as-span";
 
 export type Flag = ArtworkFlag | HeadingFlag;
 
+export interface SimpleBooleanValueFlag {
+  flag: string;
+  value: boolean;
+}
+
+/**
+ * Type alias for a flag that can be used to set the element preference to render a text
+ *
+ * - `h1`
+ * - `h2`
+ * - `h3`
+ * - `h4`
+ * - `h5`
+ * - `h6`
+ * - `p`
+ * - `span`
+ */
+export type TextElementPreferenceFlag =
+  | HeadingFlag
+  | AsParagraphFlag
+  | AsTextSpanFlag;
+
 /**
  * Type alias for a flag that can be used to set the heading level.
  * from 1 to 6.
@@ -28,9 +52,19 @@ export type HeadingFlag =
   | AsHeading6Flag;
 
 export type { ArtworkFlag };
-export type { AsHeading1Flag };
-export type { AsHeading2Flag };
-export type { AsHeading3Flag };
-export type { AsHeading4Flag };
-export type { AsHeading5Flag };
-export type { AsHeading6Flag };
+export type {
+  AsHeading1Flag,
+  AsHeading2Flag,
+  AsHeading3Flag,
+  AsHeading4Flag,
+  AsHeading5Flag,
+  AsHeading6Flag,
+};
+export type { AsParagraphFlag };
+export type { AsTextSpanFlag };
+
+// export type {  };
+// export type {  };
+// export type {  };
+// export type {  };
+// export type {  };

From 827d0f4ef18c973ea5bf12c52fe3b62b6fd56be5 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Thu, 30 Dec 2021 23:07:26 +0900
Subject: [PATCH 13/25] add flags proposal docs (as-br, as-char, as-text-group,
 as-nbsp)

---
 packages/support-flags/--as-br/README.md      | 16 +++++++-
 packages/support-flags/--as-char/README.md    | 18 ++++++++
 packages/support-flags/--as-nbsp/README.md    | 36 ++++++++++++++++
 .../support-flags/--as-text-group/README.md   |  3 ++
 packages/support-flags/v/README.md            | 41 +++++++++++++++++++
 5 files changed, 113 insertions(+), 1 deletion(-)
 create mode 100644 packages/support-flags/--as-char/README.md
 create mode 100644 packages/support-flags/--as-nbsp/README.md
 create mode 100644 packages/support-flags/--as-text-group/README.md
 create mode 100644 packages/support-flags/v/README.md

diff --git a/packages/support-flags/--as-br/README.md b/packages/support-flags/--as-br/README.md
index 840be114..b6054b02 100644
--- a/packages/support-flags/--as-br/README.md
+++ b/packages/support-flags/--as-br/README.md
@@ -1,3 +1,17 @@
-# As Break
+---
+stage:
+  - proposal
+  - draft
+---
+
+<!-- Insider's note. -->
+<!-- We haven't find the correct scenario that this flag is required. -->
+<!-- Leaving this feature as proposal -->
+
+# (Draft) `--as-br` As Break
 
 ## Interprets the flagged element as break (`<br/>`).
+
+## When to use
+
+While designing a text layout, or a paragraph, we tend to use autolayout (a flex layout) to contain multiple text to be visually displayed as single text.
diff --git a/packages/support-flags/--as-char/README.md b/packages/support-flags/--as-char/README.md
new file mode 100644
index 00000000..659c2e40
--- /dev/null
+++ b/packages/support-flags/--as-char/README.md
@@ -0,0 +1,18 @@
+# As Character
+
+## See also
+
+- `--as-space`
+- `--as-text-group`
+
+## When to use
+
+Some characters can't be displayed in design tool with only using pure text.
+
+Special characters, custom emoji, custom image, etc.
+
+## Example
+
+```
+--as-char="🤔"
+```
diff --git a/packages/support-flags/--as-nbsp/README.md b/packages/support-flags/--as-nbsp/README.md
new file mode 100644
index 00000000..b0630ed3
--- /dev/null
+++ b/packages/support-flags/--as-nbsp/README.md
@@ -0,0 +1,36 @@
+# `--as-nbsp` As Non-Breaking Space
+
+**Accepted keys**
+
+- `--as-nbsp`
+- `--as-space`
+- `--nbsp`
+
+**`--as-nbsp` Extends `--as-char`**
+
+> `--as-nbsp` is equivalent to `--as-char=&nbsp;` or `--as-char=" "`
+
+## Syntax
+
+```ts
+`--nbsp${"="typeof number}`
+```
+
+## Example
+
+```
+--nbsp       // 1 space, with `"&nbsp;"` on html
+--as-nbsp    // 1 space, with `"&nbsp;"` on html
+--as-space   // 1 space, with `" "` on html, if not available, e.g. on trailing, uses `"&nbsp;"`.
+
+
+--nbsp=2     // 2 spaces
+--nbsp=3     // 3 spaces
+
+
+----nbsp=2   // commented out
+```
+
+## See also
+
+- [`--as-char`](../--as-char)
diff --git a/packages/support-flags/--as-text-group/README.md b/packages/support-flags/--as-text-group/README.md
new file mode 100644
index 00000000..69332d0e
--- /dev/null
+++ b/packages/support-flags/--as-text-group/README.md
@@ -0,0 +1,3 @@
+## (Draft) Text group
+
+While creating a multilined, complex text, for example, inserting a custom emoji, or a custom image, we need to use a text group. This is usually done by using a autolayout or col-row oriented multiple autolayouts.
diff --git a/packages/support-flags/v/README.md b/packages/support-flags/v/README.md
new file mode 100644
index 00000000..d495213b
--- /dev/null
+++ b/packages/support-flags/v/README.md
@@ -0,0 +1,41 @@
+# Reserved Values
+
+## Falsy Values
+
+- true
+- False
+- yes
+
+## Truthy Values
+
+- True
+- false
+- no
+
+## Units
+
+- vw
+- vh
+- em
+- px
+
+## Length
+
+## Keywords
+
+- this
+
+## Explicit String
+
+- "string value"
+
+**Example**
+
+> When specific key only excepts a string value, it will be treated as a string value. Otherwise, by default, It will be ignored. (It may also break whole process. be careful with it)
+
+```
+--name=0 // invalid 🚫
+--name="0" // valid 👍
+--name=true // invalid 🚫
+--name=true // valid 👍
+```

From be8c1e4a34eee420f421d5ba9b8ce4aabac88be2 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Thu, 30 Dec 2021 23:08:41 +0900
Subject: [PATCH 14/25] (mimic) fix build issue

---
 .../designto-token/support-flags/token-heading/index.ts     | 2 +-
 packages/designto-token/support-flags/token-p/index.ts      | 2 +-
 packages/designto-token/support-flags/token-span/index.ts   | 6 +++---
 packages/designto-token/support-flags/token-wrap/index.ts   | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/designto-token/support-flags/token-heading/index.ts b/packages/designto-token/support-flags/token-heading/index.ts
index 68c8d6f8..ea22eb3d 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 {
   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 766c8a61..ff71ef56 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 {
   if (flag.value === false) return;
   if (node.type !== "TEXT") return;
 
diff --git a/packages/designto-token/support-flags/token-span/index.ts b/packages/designto-token/support-flags/token-span/index.ts
index 4232fc19..db4b51fd 100644
--- a/packages/designto-token/support-flags/token-span/index.ts
+++ b/packages/designto-token/support-flags/token-span/index.ts
@@ -6,9 +6,9 @@ import { tokenizeText } from "../../token-text";
 export function tokenize_flagged_span(
   node: ReflectSceneNode,
   flag: AsTextSpanFlag
-) {
-  if (flag.value === false) return node;
-  if (node.type !== "TEXT") return node;
+): Text {
+  if (flag.value === false) return;
+  if (node.type !== "TEXT") return;
 
   const text = tokenizeText.fromText(node);
   text.element_preference_experimental = `span`;
diff --git a/packages/designto-token/support-flags/token-wrap/index.ts b/packages/designto-token/support-flags/token-wrap/index.ts
index 00ae47ae..a159e7d5 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 {
   if (flag.value === false) return;
 
   const validated = validate_input(node as any);

From 040077d4e745005465e58bf2ab2eec96b62228d2 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Thu, 30 Dec 2021 23:43:30 +0900
Subject: [PATCH 15/25] (docs/proposal) update docs for advanced in-line
 min-max value assignment for width and height

---
 packages/support-flags/--height/README.md | 80 ++++++++++++++++++++++
 packages/support-flags/--width/README.md  | 82 ++++++++++++++++++++++-
 2 files changed, 161 insertions(+), 1 deletion(-)

diff --git a/packages/support-flags/--height/README.md b/packages/support-flags/--height/README.md
index 5087f605..275732a6 100644
--- a/packages/support-flags/--height/README.md
+++ b/packages/support-flags/--height/README.md
@@ -30,6 +30,86 @@ There is no impact on element itself, but it can break relative layouts.
 **Style**
 When applied, this will force the node to be rendered with a `height` style.
 
+## (Proposal) (Draft) Advanced use
+
+> This feature is a proposal, won't work on production use.
+
+height and height support specifying min, max, and initial values.
+
+This is how it looks like:
+
+`--height=(initial)` or `--height=(min)-(max)-(initial)`
+
+```
+--height=100px                // initial only
+--height=100px-1080px-50vh    // min, max, initial
+--height=100px-1080px         // min, max
+--height=?-1080px             // min (none), max
+--height=100px-?              // min , max (none)
+--height=100px-?-50vh         // min , max (none), initial
+```
+
+you can skip the declaration with `?` keyword. this is a special keyword, interpreted as `undefined`
+
+"`--height=100px-?-50vh`" this will make css for example, as below.
+
+```css
+.foo {
+  min-height: 100px;
+  height: 50vh;
+}
+```
+
+"`--height=100px-1080px`" this indicates only min and max, yet, still the height will be specified based on current height of the origin design.
+
+```css
+.foo {
+  min-height: 100px;
+  max-height: 1080px;
+  height: 400px; /* this is from the design */
+}
+```
+
+### Ignoring one of the property
+
+**Using explicit `--ignore` flag**
+to ignore the height, you can use new flag `--ignore` set to height. like so - `--ignore=height`
+
+```css
+.foo {
+  min-height: 100px;
+  max-height: 1080px;
+  /* height: 400px; this is ignored by --ignore flag */
+}
+```
+
+**Using `?` keyword**
+Otherwise, you can simply use silincer keyword `?` to ignore the height, like so - `--height=100px-1080px-?`
+
+This will also generate style like below.
+
+```css
+.foo {
+  min-height: 100px;
+  max-height: 1080px;
+  /* height: 400px; this is ignored by "?" keyword */
+}
+```
+
+### Referencing current value with `.`
+
+Setting max-height to current height (based on design) with - `--height=100px-.-.`
+
+This will generate style like below.
+
+```css
+.foo {
+  min-height: 100px;
+  max-height: 400px; /* the current height from design */
+  height: 400px; /* the current height from design */
+}
+```
+
 ## See Also
 
 - [`--max-height`](../--max-height)
diff --git a/packages/support-flags/--width/README.md b/packages/support-flags/--width/README.md
index 0fe8e751..40beb9cb 100644
--- a/packages/support-flags/--width/README.md
+++ b/packages/support-flags/--width/README.md
@@ -28,7 +28,87 @@
 There is no impact on element itself, but it can break relative layouts.
 
 **Style**
-When applied, this will force the node to be rendered with a width style.
+When applied, this will force the node to be rendered with a `width` style.
+
+## (Proposal) (Draft) Advanced use
+
+> This feature is a proposal, won't work on production use.
+
+width and height support specifying min, max, and initial values.
+
+This is how it looks like:
+
+`--width=(initial)` or `--width=(min)-(max)-(initial)`
+
+```
+--width=100px                // initial only
+--width=100px-1080px-50vw    // min, max, initial
+--width=100px-1080px         // min, max
+--width=?-1080px             // min (none), max
+--width=100px-?              // min , max (none)
+--width=100px-?-50vw         // min , max (none), initial
+```
+
+you can skip the declaration with `?` keyword. this is a special keyword, interpreted as `undefined`
+
+"`--width=100px-?-50vw`" this will make css for example, as below.
+
+```css
+.foo {
+  min-width: 100px;
+  width: 50vw;
+}
+```
+
+"`--width=100px-1080px`" this indicates only min and max, yet, still the width will be specified based on current width of the origin design.
+
+```css
+.foo {
+  min-width: 100px;
+  max-width: 1080px;
+  width: 400px; /* this is from the design */
+}
+```
+
+### Ignoring one of the property
+
+**Using explicit `--ignore` flag**
+to ignore the width, you can use new flag `--ignore` set to width. like so - `--ignore=width`
+
+```css
+.foo {
+  min-width: 100px;
+  max-width: 1080px;
+  /* width: 400px; this is ignored by --ignore flag */
+}
+```
+
+**Using `?` keyword**
+Otherwise, you can simply use silincer keyword `?` to ignore the width, like so - `--width=100px-1080px-?`
+
+This will also generate style like below.
+
+```css
+.foo {
+  min-width: 100px;
+  max-width: 1080px;
+  /* width: 400px; this is ignored by "?" keyword */
+}
+```
+
+### Referencing current value with `.`
+
+Setting max-width to current width (based on design) with - `--width=100px-.-.`
+
+This will generate style like below.
+
+```css
+.foo {
+  min-width: 100px;
+  max-width: 400px; /* the current width from design */
+  width: 400px; /* the current width from design */
+}
+```
 
 ## See Also
 

From 16351014668d0c3bb740411594675d1d14db2201 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Fri, 31 Dec 2021 00:22:31 +0900
Subject: [PATCH 16/25] improve docs

---
 .../support-flags/--exact-height/README.md    | 24 -------------------
 .../support-flags/--exact-width/README.md     | 24 -------------------
 packages/support-flags/--fix-bottom/README.md |  7 ++++++
 packages/support-flags/--fix-height/README.md | 24 +++++++++++++++++++
 packages/support-flags/--fix-width/README.md  | 24 +++++++++++++++++++
 .../support-flags/--position-sticky/README.md |  1 +
 6 files changed, 56 insertions(+), 48 deletions(-)
 delete mode 100644 packages/support-flags/--exact-height/README.md
 delete mode 100644 packages/support-flags/--exact-width/README.md
 create mode 100644 packages/support-flags/--fix-bottom/README.md
 create mode 100644 packages/support-flags/--fix-height/README.md
 create mode 100644 packages/support-flags/--fix-width/README.md
 create mode 100644 packages/support-flags/--position-sticky/README.md

diff --git a/packages/support-flags/--exact-height/README.md b/packages/support-flags/--exact-height/README.md
deleted file mode 100644
index 26cdc8a5..00000000
--- a/packages/support-flags/--exact-height/README.md
+++ /dev/null
@@ -1,24 +0,0 @@
-# `--exact-height` Flag (Draft)
-
-When applied, this will force dedicated layer's height to be ignore responsive height, use current height as fixed height instead.
-
-## Syntax
-
-```ts
-`--exact-height${"="typeof boolean}`
-```
-
-## Example
-
-```
---exact-height
-
---exact-height=true
---exact-height=false
-
---exact-height=True
---exact-height=False
-
---exact-height=yes
---exact-height=no
-```
diff --git a/packages/support-flags/--exact-width/README.md b/packages/support-flags/--exact-width/README.md
deleted file mode 100644
index 1f2c3d00..00000000
--- a/packages/support-flags/--exact-width/README.md
+++ /dev/null
@@ -1,24 +0,0 @@
-# `--exact-width` Flag (Draft)
-
-When applied, this will force dedicated layer's `width` to be ignore responsive width, use current width as fixed width instead.
-
-## Syntax
-
-```ts
-`--exact-width${"="typeof boolean}`
-```
-
-## Example
-
-```
---exact-width
-
---exact-width=true
---exact-width=false
-
---exact-width=True
---exact-width=False
-
---exact-width=yes
---exact-width=no
-```
diff --git a/packages/support-flags/--fix-bottom/README.md b/packages/support-flags/--fix-bottom/README.md
new file mode 100644
index 00000000..216594a6
--- /dev/null
+++ b/packages/support-flags/--fix-bottom/README.md
@@ -0,0 +1,7 @@
+# `--fix-bottom` Flag (Draft)
+
+When applied, this will force dedicated layer's bottom to be ignore responsive bottom, use current bottom as fixed bottom instead.
+
+> ⚠️ This is different from `--position-fixed`. In general, this flag is not used for designing a footer.
+
+## See also
diff --git a/packages/support-flags/--fix-height/README.md b/packages/support-flags/--fix-height/README.md
new file mode 100644
index 00000000..e6e13e7a
--- /dev/null
+++ b/packages/support-flags/--fix-height/README.md
@@ -0,0 +1,24 @@
+# `--fix-height` Flag (Draft)
+
+When applied, this will force dedicated layer's `height` to be ignore responsive `height`, use current `height` as fixed `height` instead.
+
+## Syntax
+
+```ts
+`--fix-height${"="typeof boolean}`
+```
+
+## Example
+
+```
+--fix-height
+
+--fix-height=true
+--fix-height=false
+
+--fix-height=True
+--fix-height=False
+
+--fix-height=yes
+--fix-height=no
+```
diff --git a/packages/support-flags/--fix-width/README.md b/packages/support-flags/--fix-width/README.md
new file mode 100644
index 00000000..b428fa3c
--- /dev/null
+++ b/packages/support-flags/--fix-width/README.md
@@ -0,0 +1,24 @@
+# `--fix-width` Flag (Draft)
+
+When applied, this will force dedicated layer's `width` to be ignore responsive width, use current width as fixed width instead.
+
+## Syntax
+
+```ts
+`--fix-width${"="typeof boolean}`
+```
+
+## Example
+
+```
+--fix-width
+
+--fix-width=true
+--fix-width=false
+
+--fix-width=True
+--fix-width=False
+
+--fix-width=yes
+--fix-width=no
+```
diff --git a/packages/support-flags/--position-sticky/README.md b/packages/support-flags/--position-sticky/README.md
new file mode 100644
index 00000000..79ed0a42
--- /dev/null
+++ b/packages/support-flags/--position-sticky/README.md
@@ -0,0 +1 @@
+# (WIP) Position as Sticky.

From e83e98010502a4bcc2e827dddc7f97e435e0876a Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Fri, 31 Dec 2021 00:52:53 +0900
Subject: [PATCH 17/25] update alias ex/import

---
 packages/support-flags/--as-h1/index.ts      |   9 ++
 packages/support-flags/--as-h2/index.ts      |   9 ++
 packages/support-flags/--as-h3/index.ts      |   9 ++
 packages/support-flags/--as-h4/index.ts      |   9 ++
 packages/support-flags/--as-h5/index.ts      |   9 ++
 packages/support-flags/--as-h6/index.ts      |   9 ++
 packages/support-flags/--as-p/index.ts       |   6 ++
 packages/support-flags/--as-span/index.ts    |   8 ++
 packages/support-flags/--fix-width/README.md |   4 +
 packages/support-flags/--fix-width/index.ts  |  10 ++
 packages/support-flags/--height/index.ts     |  18 ++++
 packages/support-flags/--max-height/index.ts |  16 +++
 packages/support-flags/--max-width/index.ts  |  16 +++
 packages/support-flags/--min-height/index.ts |  16 +++
 packages/support-flags/--min-width/index.ts  |  16 +++
 packages/support-flags/--width/index.ts      |  18 ++++
 packages/support-flags/keys.ts               |  52 ++++++++--
 packages/support-flags/parse.ts              | 104 +++++--------------
 packages/support-flags/types.ts              |  34 +++++-
 19 files changed, 284 insertions(+), 88 deletions(-)
 create mode 100644 packages/support-flags/--fix-width/index.ts
 create mode 100644 packages/support-flags/--height/index.ts
 create mode 100644 packages/support-flags/--max-height/index.ts
 create mode 100644 packages/support-flags/--max-width/index.ts
 create mode 100644 packages/support-flags/--min-height/index.ts
 create mode 100644 packages/support-flags/--min-width/index.ts
 create mode 100644 packages/support-flags/--width/index.ts

diff --git a/packages/support-flags/--as-h1/index.ts b/packages/support-flags/--as-h1/index.ts
index f1957a7a..b81d231d 100644
--- a/packages/support-flags/--as-h1/index.ts
+++ b/packages/support-flags/--as-h1/index.ts
@@ -5,6 +5,15 @@ export const flag_key__h1 = "h1";
 export const flag_key__heading1 = "heading1";
 export const flag_key__headline1 = "headline1";
 
+export const flag_key_alias__as_h1 = [
+  flag_key__as_h1,
+  flag_key__as_heading1,
+  flag_key__as_headline1,
+  flag_key__h1,
+  flag_key__heading1,
+  flag_key__headline1,
+];
+
 export interface AsHeading1Flag {
   flag:
     | typeof flag_key__as_h1
diff --git a/packages/support-flags/--as-h2/index.ts b/packages/support-flags/--as-h2/index.ts
index 3afda2a1..2ff45f44 100644
--- a/packages/support-flags/--as-h2/index.ts
+++ b/packages/support-flags/--as-h2/index.ts
@@ -5,6 +5,15 @@ export const flag_key__h2 = "h2";
 export const flag_key__heading2 = "heading2";
 export const flag_key__headline2 = "headline2";
 
+export const flag_key_alias__as_h2 = [
+  flag_key__as_h2,
+  flag_key__as_heading2,
+  flag_key__as_headline2,
+  flag_key__h2,
+  flag_key__heading2,
+  flag_key__headline2,
+];
+
 export interface AsHeading2Flag {
   flag:
     | typeof flag_key__as_h2
diff --git a/packages/support-flags/--as-h3/index.ts b/packages/support-flags/--as-h3/index.ts
index 0f37133f..28a252a5 100644
--- a/packages/support-flags/--as-h3/index.ts
+++ b/packages/support-flags/--as-h3/index.ts
@@ -5,6 +5,15 @@ export const flag_key__h3 = "h3";
 export const flag_key__heading3 = "heading3";
 export const flag_key__headline3 = "headline3";
 
+export const flag_key_alias__as_h3 = [
+  flag_key__as_h3,
+  flag_key__as_heading3,
+  flag_key__as_headline3,
+  flag_key__h3,
+  flag_key__heading3,
+  flag_key__headline3,
+];
+
 export interface AsHeading3Flag {
   flag:
     | typeof flag_key__as_h3
diff --git a/packages/support-flags/--as-h4/index.ts b/packages/support-flags/--as-h4/index.ts
index 002806ca..e7172362 100644
--- a/packages/support-flags/--as-h4/index.ts
+++ b/packages/support-flags/--as-h4/index.ts
@@ -5,6 +5,15 @@ export const flag_key__h4 = "h4";
 export const flag_key__heading4 = "heading4";
 export const flag_key__headline4 = "headline4";
 
+export const flag_key_alias__as_h4 = [
+  flag_key__as_h4,
+  flag_key__as_heading4,
+  flag_key__as_headline4,
+  flag_key__h4,
+  flag_key__heading4,
+  flag_key__headline4,
+];
+
 export interface AsHeading4Flag {
   flag:
     | typeof flag_key__as_h4
diff --git a/packages/support-flags/--as-h5/index.ts b/packages/support-flags/--as-h5/index.ts
index 6346a8b5..3d4864f5 100644
--- a/packages/support-flags/--as-h5/index.ts
+++ b/packages/support-flags/--as-h5/index.ts
@@ -5,6 +5,15 @@ export const flag_key__h5 = "h5";
 export const flag_key__heading5 = "heading5";
 export const flag_key__headline5 = "headline5";
 
+export const flag_key_alias__as_h5 = [
+  flag_key__as_h5,
+  flag_key__as_heading5,
+  flag_key__as_headline5,
+  flag_key__h5,
+  flag_key__heading5,
+  flag_key__headline5,
+];
+
 export interface AsHeading5Flag {
   flag:
     | typeof flag_key__as_h5
diff --git a/packages/support-flags/--as-h6/index.ts b/packages/support-flags/--as-h6/index.ts
index 36d10515..53da6035 100644
--- a/packages/support-flags/--as-h6/index.ts
+++ b/packages/support-flags/--as-h6/index.ts
@@ -5,6 +5,15 @@ export const flag_key__h6 = "h6";
 export const flag_key__heading6 = "heading6";
 export const flag_key__headline6 = "headline6";
 
+export const flag_key_alias__as_h6 = [
+  flag_key__as_h6,
+  flag_key__as_heading6,
+  flag_key__as_headline6,
+  flag_key__h6,
+  flag_key__heading6,
+  flag_key__headline6,
+];
+
 export interface AsHeading6Flag {
   flag:
     | typeof flag_key__as_h6
diff --git a/packages/support-flags/--as-p/index.ts b/packages/support-flags/--as-p/index.ts
index 2b8f2f52..efb4a80e 100644
--- a/packages/support-flags/--as-p/index.ts
+++ b/packages/support-flags/--as-p/index.ts
@@ -2,6 +2,12 @@ export const flag_key__as_p = "as-p";
 export const flag_key__as_paragraph = "as-paragraph";
 export const flag_key__paragraph = "paragraph";
 
+export const flag_key_alias__as_p = [
+  flag_key__as_p,
+  flag_key__as_paragraph,
+  flag_key__paragraph,
+];
+
 export interface AsParagraphFlag {
   flag:
     | typeof flag_key__as_p
diff --git a/packages/support-flags/--as-span/index.ts b/packages/support-flags/--as-span/index.ts
index d731fcf2..c9cefc64 100644
--- a/packages/support-flags/--as-span/index.ts
+++ b/packages/support-flags/--as-span/index.ts
@@ -4,6 +4,14 @@ export const flag_key__as_textspan = "as-textspan";
 export const flag_key__text_span = "text-span";
 export const flag_key__textspan = "textspan";
 
+export const flag_key_alias__as_span = [
+  flag_key__as_span,
+  flag_key__as_text_span,
+  flag_key__as_textspan,
+  flag_key__text_span,
+  flag_key__textspan,
+];
+
 export interface AsTextSpanFlag {
   flag:
     | typeof flag_key__as_span
diff --git a/packages/support-flags/--fix-width/README.md b/packages/support-flags/--fix-width/README.md
index b428fa3c..5e7b57f9 100644
--- a/packages/support-flags/--fix-width/README.md
+++ b/packages/support-flags/--fix-width/README.md
@@ -2,6 +2,10 @@
 
 When applied, this will force dedicated layer's `width` to be ignore responsive width, use current width as fixed width instead.
 
+**Accepted keys**
+
+- `--fix-width`
+
 ## Syntax
 
 ```ts
diff --git a/packages/support-flags/--fix-width/index.ts b/packages/support-flags/--fix-width/index.ts
new file mode 100644
index 00000000..d389f42e
--- /dev/null
+++ b/packages/support-flags/--fix-width/index.ts
@@ -0,0 +1,10 @@
+import { DimensionLength } from "@reflect-ui/core";
+
+export const flag_key__fix_width = "fixed-width";
+
+export interface FixWidthFlag {
+  flag: typeof flag_key__fix_width;
+
+  value: DimensionLength;
+  _raw?: string;
+}
diff --git a/packages/support-flags/--height/index.ts b/packages/support-flags/--height/index.ts
new file mode 100644
index 00000000..52409ceb
--- /dev/null
+++ b/packages/support-flags/--height/index.ts
@@ -0,0 +1,18 @@
+import { DimensionLength } from "@reflect-ui/core";
+
+export const flag_key__height = "height";
+
+export const flag_key_alias__height = [flag_key__height];
+
+export interface HeightFlag {
+  flag: typeof flag_key__height;
+
+  value:
+    | DimensionLength
+    | {
+        min?: DimensionLength;
+        max?: DimensionLength;
+        initial?: DimensionLength;
+      };
+  _raw?: string;
+}
diff --git a/packages/support-flags/--max-height/index.ts b/packages/support-flags/--max-height/index.ts
new file mode 100644
index 00000000..4f718c40
--- /dev/null
+++ b/packages/support-flags/--max-height/index.ts
@@ -0,0 +1,16 @@
+import { DimensionLength } from "@reflect-ui/core";
+
+export const flag_key__max_height = "max-height";
+export const flag_key__maxheight = "maxheight";
+
+export const flag_key_alias__max_height = [
+  flag_key__max_height,
+  flag_key__maxheight,
+];
+
+export interface MaxHeightFlag {
+  flag: typeof flag_key__max_height | typeof flag_key__maxheight;
+
+  value: DimensionLength;
+  _raw?: string;
+}
diff --git a/packages/support-flags/--max-width/index.ts b/packages/support-flags/--max-width/index.ts
new file mode 100644
index 00000000..3ebf190e
--- /dev/null
+++ b/packages/support-flags/--max-width/index.ts
@@ -0,0 +1,16 @@
+import { DimensionLength } from "@reflect-ui/core";
+
+export const flag_key__max_width = "max-width";
+export const flag_key__maxwidth = "maxwidth";
+
+export const flag_key_alias__max_width = [
+  flag_key__max_width,
+  flag_key__maxwidth,
+];
+
+export interface MaxWidthFlag {
+  flag: typeof flag_key__max_width | typeof flag_key__maxwidth;
+
+  value: DimensionLength;
+  _raw?: string;
+}
diff --git a/packages/support-flags/--min-height/index.ts b/packages/support-flags/--min-height/index.ts
new file mode 100644
index 00000000..2bf4780a
--- /dev/null
+++ b/packages/support-flags/--min-height/index.ts
@@ -0,0 +1,16 @@
+import { DimensionLength } from "@reflect-ui/core";
+
+export const flag_key__min_height = "min-height";
+export const flag_key__minheight = "minheight";
+
+export const flag_key_alias__min_height = [
+  flag_key__min_height,
+  flag_key__minheight,
+];
+
+export interface MinHeightFlag {
+  flag: typeof flag_key__min_height | typeof flag_key__minheight;
+
+  value: DimensionLength;
+  _raw?: string;
+}
diff --git a/packages/support-flags/--min-width/index.ts b/packages/support-flags/--min-width/index.ts
new file mode 100644
index 00000000..cc612a7d
--- /dev/null
+++ b/packages/support-flags/--min-width/index.ts
@@ -0,0 +1,16 @@
+import { DimensionLength } from "@reflect-ui/core";
+
+export const flag_key__min_width = "min-width";
+export const flag_key__minwidth = "minwidth";
+
+export const flag_key_alias__min_width = [
+  flag_key__min_width,
+  flag_key__minwidth,
+];
+
+export interface MinWidthFlag {
+  flag: typeof flag_key__min_width | typeof flag_key__minwidth;
+
+  value: DimensionLength;
+  _raw?: string;
+}
diff --git a/packages/support-flags/--width/index.ts b/packages/support-flags/--width/index.ts
new file mode 100644
index 00000000..44b9fabb
--- /dev/null
+++ b/packages/support-flags/--width/index.ts
@@ -0,0 +1,18 @@
+import { DimensionLength } from "@reflect-ui/core";
+
+export const flag_key__width = "width";
+
+export const flag_key_alias__width = [flag_key__width];
+
+export interface WidthFlag {
+  flag: typeof flag_key__width;
+
+  value:
+    | DimensionLength
+    | {
+        min?: DimensionLength;
+        max?: DimensionLength;
+        initial?: DimensionLength;
+      };
+  _raw?: string;
+}
diff --git a/packages/support-flags/keys.ts b/packages/support-flags/keys.ts
index 7a9fb050..04824c4e 100644
--- a/packages/support-flags/keys.ts
+++ b/packages/support-flags/keys.ts
@@ -1,19 +1,31 @@
 // prettier-ignore
-import { flag_key__as_h1, flag_key__as_heading1, flag_key__as_headline1, flag_key__h1, flag_key__heading1, flag_key__headline1 } from "./--as-h1";
+import { flag_key_alias__as_h1, flag_key__as_h1, flag_key__as_heading1, flag_key__as_headline1, flag_key__h1, flag_key__heading1, flag_key__headline1 } from "./--as-h1";
 // prettier-ignore
-import { flag_key__as_h2, flag_key__as_heading2, flag_key__as_headline2, flag_key__h2, flag_key__heading2, flag_key__headline2 } from "./--as-h2";
+import { flag_key_alias__as_h2, flag_key__as_h2, flag_key__as_heading2, flag_key__as_headline2, flag_key__h2, flag_key__heading2, flag_key__headline2 } from "./--as-h2";
 // prettier-ignore
-import { flag_key__as_h3, flag_key__as_heading3, flag_key__as_headline3, flag_key__h3, flag_key__heading3, flag_key__headline3 } from "./--as-h3";
+import { flag_key_alias__as_h3, flag_key__as_h3, flag_key__as_heading3, flag_key__as_headline3, flag_key__h3, flag_key__heading3, flag_key__headline3 } from "./--as-h3";
 // prettier-ignore
-import { flag_key__as_h4, flag_key__as_heading4, flag_key__as_headline4, flag_key__h4, flag_key__heading4, flag_key__headline4 } from "./--as-h4";
+import { flag_key_alias__as_h4, flag_key__as_h4, flag_key__as_heading4, flag_key__as_headline4, flag_key__h4, flag_key__heading4, flag_key__headline4 } from "./--as-h4";
 // prettier-ignore
-import { flag_key__as_h5, flag_key__as_heading5, flag_key__as_headline5, flag_key__h5, flag_key__heading5, flag_key__headline5 } from "./--as-h5";
+import { flag_key_alias__as_h5, flag_key__as_h5, flag_key__as_heading5, flag_key__as_headline5, flag_key__h5, flag_key__heading5, flag_key__headline5 } from "./--as-h5";
 // prettier-ignore
-import { flag_key__as_h6, flag_key__as_heading6, flag_key__as_headline6, flag_key__h6, flag_key__heading6, flag_key__headline6 } from "./--as-h6";
+import { flag_key_alias__as_h6, flag_key__as_h6, flag_key__as_heading6, flag_key__as_headline6, flag_key__h6, flag_key__heading6, flag_key__headline6 } from "./--as-h6";
 // prettier-ignore
-import { flag_key__as_p, flag_key__as_paragraph, flag_key__paragraph } from "./--as-p";
+import { flag_key_alias__as_p, flag_key__as_p, flag_key__as_paragraph, flag_key__paragraph } from "./--as-p";
 // prettier-ignore
-import { flag_key__as_span, flag_key__as_text_span, flag_key__as_textspan, flag_key__text_span, flag_key__textspan } from "./--as-span";
+import { flag_key_alias__as_span, flag_key__as_span, flag_key__as_text_span, flag_key__as_textspan, flag_key__text_span, flag_key__textspan } from "./--as-span";
+
+import { flag_key_alias__width, flag_key__width } from "./--width";
+// prettier-ignore
+import { flag_key_alias__min_width, flag_key__min_width, flag_key__minwidth } from "./--min-width";
+// prettier-ignore
+import { flag_key_alias__max_width, flag_key__max_width, flag_key__maxwidth } from "./--max-width";
+
+import { flag_key_alias__height, flag_key__height } from "./--height";
+// prettier-ignore
+import { flag_key_alias__min_height, flag_key__min_height, flag_key__minheight } from "./--min-height";
+// prettier-ignore
+import { flag_key_alias__max_height, flag_key__max_height, flag_key__maxheight } from "./--max-height";
 
 export {
   flag_key__as_h1,
@@ -83,3 +95,27 @@ export {
   flag_key__text_span,
   flag_key__textspan,
 };
+
+export { flag_key__width };
+export { flag_key__min_width, flag_key__minwidth };
+export { flag_key__max_width, flag_key__maxwidth };
+export { flag_key__height };
+export { flag_key__min_height, flag_key__minheight };
+export { flag_key__max_height, flag_key__maxheight };
+
+export const alias = {
+  as_h1: flag_key_alias__as_h1,
+  as_h2: flag_key_alias__as_h2,
+  as_h3: flag_key_alias__as_h3,
+  as_h4: flag_key_alias__as_h4,
+  as_h5: flag_key_alias__as_h5,
+  as_h6: flag_key_alias__as_h6,
+  as_p: flag_key_alias__as_p,
+  as_span: flag_key_alias__as_span,
+  width: flag_key_alias__width,
+  min_width: flag_key_alias__min_width,
+  max_width: flag_key_alias__max_width,
+  height: flag_key_alias__height,
+  min_height: flag_key_alias__min_height,
+  max_height: flag_key_alias__max_height,
+};
diff --git a/packages/support-flags/parse.ts b/packages/support-flags/parse.ts
index 43b12d0d..c546aaef 100644
--- a/packages/support-flags/parse.ts
+++ b/packages/support-flags/parse.ts
@@ -44,11 +44,11 @@ export function parse(name: string) {
     const as_heading_flag = transform_heading_alias_from_raw(_raw_parsed);
     const as_paragraph_flag = handle_single_boolean_flag_alias<AsParagraphFlag>(
       _raw_parsed,
-      __p_alias
+      keys.alias.as_p
     );
     const as_span_flag = handle_single_boolean_flag_alias<AsTextSpanFlag>(
       _raw_parsed,
-      __textspan_alias
+      keys.alias.as_span
     );
 
     return {
@@ -104,110 +104,62 @@ function transform_heading_alias_from_raw(raw: { [key: string]: boolean }): {
 } {
   const _h1_alias = handle_single_boolean_flag_alias<HeadingFlag>(
     raw,
-    __h1_alias
+    keys.alias.as_h1
   );
   if (_h1_alias) return _h1_alias;
 
   const _h2_alias = handle_single_boolean_flag_alias<HeadingFlag>(
     raw,
-    __h2_alias
+    keys.alias.as_h2
   );
   if (_h2_alias) return _h2_alias;
 
   const _h3_alias = handle_single_boolean_flag_alias<HeadingFlag>(
     raw,
-    __h3_alias
+    keys.alias.as_h3
   );
   if (_h3_alias) return _h3_alias;
 
   const _h4_alias = handle_single_boolean_flag_alias<HeadingFlag>(
     raw,
-    __h4_alias
+    keys.alias.as_h4
   );
   if (_h4_alias) return _h4_alias;
 
   const _h5_alias = handle_single_boolean_flag_alias<HeadingFlag>(
     raw,
-    __h5_alias
+    keys.alias.as_h5
   );
   if (_h5_alias) return _h5_alias;
 
   const _h6_alias = handle_single_boolean_flag_alias<HeadingFlag>(
     raw,
-    __h6_alias
+    keys.alias.as_h6
   );
   if (_h6_alias) return _h6_alias;
 }
 
-const __h1_alias = [
-  keys.flag_key__as_h1,
-  keys.flag_key__as_heading1,
-  keys.flag_key__as_headline1,
-  keys.flag_key__h1,
-  keys.flag_key__heading1,
-  keys.flag_key__headline1,
-];
-const __h1_alias_pref = __h1_alias.map(
+const __h1_alias_pref = keys.alias.as_h1.map(
   _simple_boolean_value_flag_prefernce_mapper
 );
 
-const __h2_alias = [
-  keys.flag_key__as_h2,
-  keys.flag_key__as_heading2,
-  keys.flag_key__as_headline2,
-  keys.flag_key__h2,
-  keys.flag_key__heading2,
-  keys.flag_key__headline2,
-];
-const __h2_alias_pref = __h2_alias.map(
+const __h2_alias_pref = keys.alias.as_h2.map(
   _simple_boolean_value_flag_prefernce_mapper
 );
 
-const __h3_alias = [
-  keys.flag_key__as_h3,
-  keys.flag_key__as_heading3,
-  keys.flag_key__as_headline3,
-  keys.flag_key__h3,
-  keys.flag_key__heading3,
-  keys.flag_key__headline3,
-];
-const __h3_alias_pref = __h3_alias.map(
+const __h3_alias_pref = keys.alias.as_h3.map(
   _simple_boolean_value_flag_prefernce_mapper
 );
 
-const __h4_alias = [
-  keys.flag_key__as_h4,
-  keys.flag_key__as_heading4,
-  keys.flag_key__as_headline4,
-  keys.flag_key__h4,
-  keys.flag_key__heading4,
-  keys.flag_key__headline4,
-];
-const __h4_alias_pref = __h4_alias.map(
+const __h4_alias_pref = keys.alias.as_h4.map(
   _simple_boolean_value_flag_prefernce_mapper
 );
 
-const __h5_alias = [
-  keys.flag_key__as_h5,
-  keys.flag_key__as_heading5,
-  keys.flag_key__as_headline5,
-  keys.flag_key__h5,
-  keys.flag_key__heading5,
-  keys.flag_key__headline5,
-];
-const __h5_alias_pref = __h5_alias.map(
+const __h5_alias_pref = keys.alias.as_h5.map(
   _simple_boolean_value_flag_prefernce_mapper
 );
 
-const __h6_alias = [
-  keys.flag_key__as_h6,
-  keys.flag_key__as_heading6,
-  keys.flag_key__as_headline6,
-  keys.flag_key__h6,
-  keys.flag_key__heading6,
-  keys.flag_key__headline6,
-];
-const __h6_alias_pref = __h6_alias.map(
+const __h6_alias_pref = keys.alias.as_h6.map(
   _simple_boolean_value_flag_prefernce_mapper
 );
 
@@ -215,22 +167,22 @@ const __h6_alias_pref = __h6_alias.map(
 // -----------------------------------------------------------------------------
 // -----------------------------------------------------------------------------
 
-const __p_alias = [
-  keys.flag_key__as_p,
-  keys.flag_key__as_paragraph,
-  keys.flag_key__paragraph,
-];
-const __p_alias_pref = __p_alias.map(
+const __p_alias_pref = keys.alias.as_p.map(
   _simple_boolean_value_flag_prefernce_mapper
 );
 
-const __textspan_alias = [
-  keys.flag_key__as_span,
-  keys.flag_key__as_text_span,
-  keys.flag_key__as_textspan,
-  keys.flag_key__text_span,
-  keys.flag_key__textspan,
-];
-const __textspan_alias_pref = __textspan_alias.map(
+const __textspan_alias_pref = keys.alias.as_span.map(
   _simple_boolean_value_flag_prefernce_mapper
 );
+
+// -----------------------------------------------------------------------------
+// -----------------------------------------------------------------------------
+// -----------------------------------------------------------------------------
+
+const __width_alias_pref = 0;
+const __max_width_alias_pref = 0;
+const __min_width_alias_pref = 0;
+
+const __height_alias_pref = 0;
+const __max_height_alias_pref = 0;
+const __min_height_alias_pref = 0;
diff --git a/packages/support-flags/types.ts b/packages/support-flags/types.ts
index f320a59a..5bf33b40 100644
--- a/packages/support-flags/types.ts
+++ b/packages/support-flags/types.ts
@@ -7,14 +7,26 @@ import type { AsHeading5Flag } from "./--as-h5";
 import type { AsHeading6Flag } from "./--as-h6";
 import type { AsParagraphFlag } from "./--as-p";
 import type { AsTextSpanFlag } from "./--as-span";
+import type { WidthFlag } from "./--width";
+import type { MinWidthFlag } from "./--min-width";
+import type { MaxWidthFlag } from "./--max-width";
+import type { HeightFlag } from "./--height";
+import type { MinHeightFlag } from "./--min-height";
+import type { MaxHeightFlag } from "./--max-height";
 
-export type Flag = ArtworkFlag | HeadingFlag;
+export type Flag =
+  //
+  ArtworkFlag | TextElementPreferenceFlag | WHDeclarationFlag;
 
 export interface SimpleBooleanValueFlag {
   flag: string;
   value: boolean;
 }
 
+export type WHDeclarationFlag = WidthDeclarationFlag | HeightDeclarationFlag;
+export type WidthDeclarationFlag = WidthFlag | MinWidthFlag | MaxWidthFlag;
+export type HeightDeclarationFlag = HeightFlag | MinHeightFlag | MaxHeightFlag;
+
 /**
  * Type alias for a flag that can be used to set the element preference to render a text
  *
@@ -51,7 +63,14 @@ export type HeadingFlag =
   | AsHeading5Flag
   | AsHeading6Flag;
 
+// ---------------------------------------------------------------------------
+// ---------------------------------------------------------------------------
+
 export type { ArtworkFlag };
+
+// ---------------------------------------------------------------------------
+// ---------------------------------------------------------------------------
+
 export type {
   AsHeading1Flag,
   AsHeading2Flag,
@@ -60,11 +79,18 @@ export type {
   AsHeading5Flag,
   AsHeading6Flag,
 };
+
+// ---------------------------------------------------------------------------
+// ---------------------------------------------------------------------------
+
 export type { AsParagraphFlag };
 export type { AsTextSpanFlag };
 
-// export type {  };
-// export type {  };
-// export type {  };
+// ---------------------------------------------------------------------------
+// ---------------------------------------------------------------------------
+
+export type { WidthFlag, MinWidthFlag, MaxWidthFlag };
+export type { HeightFlag, MinHeightFlag, MaxHeightFlag };
+
 // export type {  };
 // export type {  };

From 5ea5147ee88a057b743954f4cb22b209134fe330 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Fri, 31 Dec 2021 01:11:59 +0900
Subject: [PATCH 18/25] grouping alias, using flag-parser's alias option

---
 externals/design-sdk            |   2 +-
 packages/support-flags/parse.ts | 115 ++++++++++++++++++++++----------
 2 files changed, 81 insertions(+), 36 deletions(-)

diff --git a/externals/design-sdk b/externals/design-sdk
index 54d7aae0..d6ee49fb 160000
--- a/externals/design-sdk
+++ b/externals/design-sdk
@@ -1 +1 @@
-Subproject commit 54d7aae0b6b1b41ca7de23f063f09de2c32e3fc0
+Subproject commit d6ee49fb9c02bf62e686e3ac8463ea1b59d459fc
diff --git a/packages/support-flags/parse.ts b/packages/support-flags/parse.ts
index c546aaef..3f019f8c 100644
--- a/packages/support-flags/parse.ts
+++ b/packages/support-flags/parse.ts
@@ -1,4 +1,7 @@
-import { parse as parseflags } from "@design-sdk/flags/parsing-strategy-dashdash";
+import {
+  parse as parseflags,
+  Option,
+} from "@design-sdk/flags/parsing-strategy-dashdash";
 
 import * as keys from "./keys";
 
@@ -25,14 +28,23 @@ export function parse(name: string) {
         type: "bool",
       },
       //#region
-      ...__h1_alias_pref,
-      ...__h2_alias_pref,
-      ...__h3_alias_pref,
-      ...__h4_alias_pref,
-      ...__h5_alias_pref,
-      ...__h6_alias_pref,
-      ...__p_alias_pref,
-      ...__textspan_alias_pref,
+      __h1_alias_pref,
+      __h2_alias_pref,
+      __h3_alias_pref,
+      __h4_alias_pref,
+      __h5_alias_pref,
+      __h6_alias_pref,
+      __p_alias_pref,
+      __textspan_alias_pref,
+      //#endregion
+
+      //#region
+      __width_alias_pref,
+      __max_width_alias_pref,
+      __min_width_alias_pref,
+      __height_alias_pref,
+      __max_height_alias_pref,
+      __min_height_alias_pref,
       //#endregion
       {
         name: flag_key__module,
@@ -51,6 +63,8 @@ export function parse(name: string) {
       keys.alias.as_span
     );
 
+    console.log("_raw_parsed", _raw_parsed);
+
     return {
       ..._raw_parsed,
       ...as_heading_flag,
@@ -70,10 +84,18 @@ export function parse(name: string) {
 
 const notempty = (obj) => Object.keys(obj ?? {}).length > 0;
 
-const _simple_boolean_value_flag_prefernce_mapper = (k) => ({
-  name: k,
-  type: "bool",
-});
+const _simple_boolean_value_flag_prefernce_mapper = (
+  k: string | Array<string>
+): Option =>
+  Array.isArray(k)
+    ? {
+        names: k,
+        type: "bool",
+      }
+    : {
+        name: k,
+        type: "bool",
+      };
 
 function handle_single_boolean_flag_alias<T extends SimpleBooleanValueFlag>(
   raw: { [key: string]: boolean },
@@ -139,50 +161,73 @@ function transform_heading_alias_from_raw(raw: { [key: string]: boolean }): {
   if (_h6_alias) return _h6_alias;
 }
 
-const __h1_alias_pref = keys.alias.as_h1.map(
-  _simple_boolean_value_flag_prefernce_mapper
+const __h1_alias_pref = _simple_boolean_value_flag_prefernce_mapper(
+  keys.alias.as_h1
 );
 
-const __h2_alias_pref = keys.alias.as_h2.map(
-  _simple_boolean_value_flag_prefernce_mapper
+const __h2_alias_pref = _simple_boolean_value_flag_prefernce_mapper(
+  keys.alias.as_h2
 );
 
-const __h3_alias_pref = keys.alias.as_h3.map(
-  _simple_boolean_value_flag_prefernce_mapper
+const __h3_alias_pref = _simple_boolean_value_flag_prefernce_mapper(
+  keys.alias.as_h3
 );
 
-const __h4_alias_pref = keys.alias.as_h4.map(
-  _simple_boolean_value_flag_prefernce_mapper
+const __h4_alias_pref = _simple_boolean_value_flag_prefernce_mapper(
+  keys.alias.as_h4
 );
 
-const __h5_alias_pref = keys.alias.as_h5.map(
-  _simple_boolean_value_flag_prefernce_mapper
+const __h5_alias_pref = _simple_boolean_value_flag_prefernce_mapper(
+  keys.alias.as_h5
 );
 
-const __h6_alias_pref = keys.alias.as_h6.map(
-  _simple_boolean_value_flag_prefernce_mapper
+const __h6_alias_pref = _simple_boolean_value_flag_prefernce_mapper(
+  keys.alias.as_h6
 );
 
 // -----------------------------------------------------------------------------
 // -----------------------------------------------------------------------------
 // -----------------------------------------------------------------------------
 
-const __p_alias_pref = keys.alias.as_p.map(
-  _simple_boolean_value_flag_prefernce_mapper
+const __p_alias_pref = _simple_boolean_value_flag_prefernce_mapper(
+  keys.alias.as_p
 );
 
-const __textspan_alias_pref = keys.alias.as_span.map(
-  _simple_boolean_value_flag_prefernce_mapper
+const __textspan_alias_pref = _simple_boolean_value_flag_prefernce_mapper(
+  keys.alias.as_span
 );
 
 // -----------------------------------------------------------------------------
 // -----------------------------------------------------------------------------
 // -----------------------------------------------------------------------------
 
-const __width_alias_pref = 0;
-const __max_width_alias_pref = 0;
-const __min_width_alias_pref = 0;
+const _simple_custom_string_value_flag_prefernce_mapper = (
+  k: string | Array<string>
+): Option =>
+  Array.isArray(k)
+    ? {
+        names: k,
+        // e.g. 100, 100px, 100%, .
+        type: "string",
+      }
+    : {
+        name: k,
+        // e.g. 100, 100px, 100%, .
+        type: "string",
+      };
 
-const __height_alias_pref = 0;
-const __max_height_alias_pref = 0;
-const __min_height_alias_pref = 0;
+const __width_alias_pref = _simple_custom_string_value_flag_prefernce_mapper(
+  keys.alias.width
+);
+const __max_width_alias_pref =
+  _simple_custom_string_value_flag_prefernce_mapper(keys.alias.max_width);
+const __min_width_alias_pref =
+  _simple_custom_string_value_flag_prefernce_mapper(keys.alias.min_width);
+
+const __height_alias_pref = _simple_custom_string_value_flag_prefernce_mapper(
+  keys.alias.height
+);
+const __max_height_alias_pref =
+  _simple_custom_string_value_flag_prefernce_mapper(keys.alias.max_height);
+const __min_height_alias_pref =
+  _simple_custom_string_value_flag_prefernce_mapper(keys.alias.min_height);

From ec21bf37acd2048e01242513c3853fbaa462a6fa Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Fri, 31 Dec 2021 01:31:40 +0900
Subject: [PATCH 19/25] remove export of secondary alias keys

---
 packages/support-flags/--as-h1/index.ts      |  12 ++-
 packages/support-flags/--as-h2/index.ts      |  12 ++-
 packages/support-flags/--as-h3/index.ts      |  12 ++-
 packages/support-flags/--as-h4/index.ts      |  12 ++-
 packages/support-flags/--as-h5/index.ts      |  12 ++-
 packages/support-flags/--as-h6/index.ts      |  12 ++-
 packages/support-flags/--as-p/index.ts       |   6 +-
 packages/support-flags/--as-span/index.ts    |  10 +-
 packages/support-flags/--max-height/index.ts |   4 +-
 packages/support-flags/--max-width/index.ts  |   4 +-
 packages/support-flags/--min-height/index.ts |   4 +-
 packages/support-flags/--min-width/index.ts  |   4 +-
 packages/support-flags/keys.ts               | 104 ++++---------------
 13 files changed, 82 insertions(+), 126 deletions(-)

diff --git a/packages/support-flags/--as-h1/index.ts b/packages/support-flags/--as-h1/index.ts
index b81d231d..e0ec0afb 100644
--- a/packages/support-flags/--as-h1/index.ts
+++ b/packages/support-flags/--as-h1/index.ts
@@ -1,9 +1,11 @@
+// primary
 export const flag_key__as_h1 = "as-h1";
-export const flag_key__as_heading1 = "as-heading1";
-export const flag_key__as_headline1 = "as-headline1";
-export const flag_key__h1 = "h1";
-export const flag_key__heading1 = "heading1";
-export const flag_key__headline1 = "headline1";
+// alias
+const flag_key__as_heading1 = "as-heading1";
+const flag_key__as_headline1 = "as-headline1";
+const flag_key__h1 = "h1";
+const flag_key__heading1 = "heading1";
+const flag_key__headline1 = "headline1";
 
 export const flag_key_alias__as_h1 = [
   flag_key__as_h1,
diff --git a/packages/support-flags/--as-h2/index.ts b/packages/support-flags/--as-h2/index.ts
index 2ff45f44..ecb238db 100644
--- a/packages/support-flags/--as-h2/index.ts
+++ b/packages/support-flags/--as-h2/index.ts
@@ -1,9 +1,11 @@
+// primary
 export const flag_key__as_h2 = "as-h2";
-export const flag_key__as_heading2 = "as-heading2";
-export const flag_key__as_headline2 = "as-headline2";
-export const flag_key__h2 = "h2";
-export const flag_key__heading2 = "heading2";
-export const flag_key__headline2 = "headline2";
+// alias
+const flag_key__as_heading2 = "as-heading2";
+const flag_key__as_headline2 = "as-headline2";
+const flag_key__h2 = "h2";
+const flag_key__heading2 = "heading2";
+const flag_key__headline2 = "headline2";
 
 export const flag_key_alias__as_h2 = [
   flag_key__as_h2,
diff --git a/packages/support-flags/--as-h3/index.ts b/packages/support-flags/--as-h3/index.ts
index 28a252a5..96e53acf 100644
--- a/packages/support-flags/--as-h3/index.ts
+++ b/packages/support-flags/--as-h3/index.ts
@@ -1,9 +1,11 @@
+// primary
 export const flag_key__as_h3 = "as-h3";
-export const flag_key__as_heading3 = "as-heading3";
-export const flag_key__as_headline3 = "as-headline3";
-export const flag_key__h3 = "h3";
-export const flag_key__heading3 = "heading3";
-export const flag_key__headline3 = "headline3";
+// alias
+const flag_key__as_heading3 = "as-heading3";
+const flag_key__as_headline3 = "as-headline3";
+const flag_key__h3 = "h3";
+const flag_key__heading3 = "heading3";
+const flag_key__headline3 = "headline3";
 
 export const flag_key_alias__as_h3 = [
   flag_key__as_h3,
diff --git a/packages/support-flags/--as-h4/index.ts b/packages/support-flags/--as-h4/index.ts
index e7172362..7e76d91e 100644
--- a/packages/support-flags/--as-h4/index.ts
+++ b/packages/support-flags/--as-h4/index.ts
@@ -1,9 +1,11 @@
+// primary
 export const flag_key__as_h4 = "as-h4";
-export const flag_key__as_heading4 = "as-heading4";
-export const flag_key__as_headline4 = "as-headline4";
-export const flag_key__h4 = "h4";
-export const flag_key__heading4 = "heading4";
-export const flag_key__headline4 = "headline4";
+// alias
+const flag_key__as_heading4 = "as-heading4";
+const flag_key__as_headline4 = "as-headline4";
+const flag_key__h4 = "h4";
+const flag_key__heading4 = "heading4";
+const flag_key__headline4 = "headline4";
 
 export const flag_key_alias__as_h4 = [
   flag_key__as_h4,
diff --git a/packages/support-flags/--as-h5/index.ts b/packages/support-flags/--as-h5/index.ts
index 3d4864f5..34d1e7ef 100644
--- a/packages/support-flags/--as-h5/index.ts
+++ b/packages/support-flags/--as-h5/index.ts
@@ -1,9 +1,11 @@
+// primary
 export const flag_key__as_h5 = "as-h5";
-export const flag_key__as_heading5 = "as-heading5";
-export const flag_key__as_headline5 = "as-headline5";
-export const flag_key__h5 = "h5";
-export const flag_key__heading5 = "heading5";
-export const flag_key__headline5 = "headline5";
+// alias
+const flag_key__as_heading5 = "as-heading5";
+const flag_key__as_headline5 = "as-headline5";
+const flag_key__h5 = "h5";
+const flag_key__heading5 = "heading5";
+const flag_key__headline5 = "headline5";
 
 export const flag_key_alias__as_h5 = [
   flag_key__as_h5,
diff --git a/packages/support-flags/--as-h6/index.ts b/packages/support-flags/--as-h6/index.ts
index 53da6035..e70c8949 100644
--- a/packages/support-flags/--as-h6/index.ts
+++ b/packages/support-flags/--as-h6/index.ts
@@ -1,9 +1,11 @@
+// primary
 export const flag_key__as_h6 = "as-h6";
-export const flag_key__as_heading6 = "as-heading6";
-export const flag_key__as_headline6 = "as-headline6";
-export const flag_key__h6 = "h6";
-export const flag_key__heading6 = "heading6";
-export const flag_key__headline6 = "headline6";
+// alias
+const flag_key__as_heading6 = "as-heading6";
+const flag_key__as_headline6 = "as-headline6";
+const flag_key__h6 = "h6";
+const flag_key__heading6 = "heading6";
+const flag_key__headline6 = "headline6";
 
 export const flag_key_alias__as_h6 = [
   flag_key__as_h6,
diff --git a/packages/support-flags/--as-p/index.ts b/packages/support-flags/--as-p/index.ts
index efb4a80e..5157b7cb 100644
--- a/packages/support-flags/--as-p/index.ts
+++ b/packages/support-flags/--as-p/index.ts
@@ -1,6 +1,8 @@
+// priamry
 export const flag_key__as_p = "as-p";
-export const flag_key__as_paragraph = "as-paragraph";
-export const flag_key__paragraph = "paragraph";
+// alias
+const flag_key__as_paragraph = "as-paragraph";
+const flag_key__paragraph = "paragraph";
 
 export const flag_key_alias__as_p = [
   flag_key__as_p,
diff --git a/packages/support-flags/--as-span/index.ts b/packages/support-flags/--as-span/index.ts
index c9cefc64..4ccad77c 100644
--- a/packages/support-flags/--as-span/index.ts
+++ b/packages/support-flags/--as-span/index.ts
@@ -1,8 +1,10 @@
+// primary
 export const flag_key__as_span = "as-span";
-export const flag_key__as_text_span = "as-text-span";
-export const flag_key__as_textspan = "as-textspan";
-export const flag_key__text_span = "text-span";
-export const flag_key__textspan = "textspan";
+// alias
+const flag_key__as_text_span = "as-text-span";
+const flag_key__as_textspan = "as-textspan";
+const flag_key__text_span = "text-span";
+const flag_key__textspan = "textspan";
 
 export const flag_key_alias__as_span = [
   flag_key__as_span,
diff --git a/packages/support-flags/--max-height/index.ts b/packages/support-flags/--max-height/index.ts
index 4f718c40..c5bf888a 100644
--- a/packages/support-flags/--max-height/index.ts
+++ b/packages/support-flags/--max-height/index.ts
@@ -1,7 +1,9 @@
 import { DimensionLength } from "@reflect-ui/core";
 
+// primary
 export const flag_key__max_height = "max-height";
-export const flag_key__maxheight = "maxheight";
+// alias
+const flag_key__maxheight = "maxheight";
 
 export const flag_key_alias__max_height = [
   flag_key__max_height,
diff --git a/packages/support-flags/--max-width/index.ts b/packages/support-flags/--max-width/index.ts
index 3ebf190e..00b8afa1 100644
--- a/packages/support-flags/--max-width/index.ts
+++ b/packages/support-flags/--max-width/index.ts
@@ -1,7 +1,9 @@
 import { DimensionLength } from "@reflect-ui/core";
 
+// primary
 export const flag_key__max_width = "max-width";
-export const flag_key__maxwidth = "maxwidth";
+// alias
+const flag_key__maxwidth = "maxwidth";
 
 export const flag_key_alias__max_width = [
   flag_key__max_width,
diff --git a/packages/support-flags/--min-height/index.ts b/packages/support-flags/--min-height/index.ts
index 2bf4780a..e8b59db3 100644
--- a/packages/support-flags/--min-height/index.ts
+++ b/packages/support-flags/--min-height/index.ts
@@ -1,7 +1,9 @@
 import { DimensionLength } from "@reflect-ui/core";
 
+// primary
 export const flag_key__min_height = "min-height";
-export const flag_key__minheight = "minheight";
+// alias
+const flag_key__minheight = "minheight";
 
 export const flag_key_alias__min_height = [
   flag_key__min_height,
diff --git a/packages/support-flags/--min-width/index.ts b/packages/support-flags/--min-width/index.ts
index cc612a7d..bd5be19c 100644
--- a/packages/support-flags/--min-width/index.ts
+++ b/packages/support-flags/--min-width/index.ts
@@ -1,7 +1,9 @@
 import { DimensionLength } from "@reflect-ui/core";
 
+// primary
 export const flag_key__min_width = "min-width";
-export const flag_key__minwidth = "minwidth";
+// alias
+const flag_key__minwidth = "minwidth";
 
 export const flag_key_alias__min_width = [
   flag_key__min_width,
diff --git a/packages/support-flags/keys.ts b/packages/support-flags/keys.ts
index 04824c4e..9a66743a 100644
--- a/packages/support-flags/keys.ts
+++ b/packages/support-flags/keys.ts
@@ -1,107 +1,39 @@
-// prettier-ignore
-import { flag_key_alias__as_h1, flag_key__as_h1, flag_key__as_heading1, flag_key__as_headline1, flag_key__h1, flag_key__heading1, flag_key__headline1 } from "./--as-h1";
-// prettier-ignore
-import { flag_key_alias__as_h2, flag_key__as_h2, flag_key__as_heading2, flag_key__as_headline2, flag_key__h2, flag_key__heading2, flag_key__headline2 } from "./--as-h2";
-// prettier-ignore
-import { flag_key_alias__as_h3, flag_key__as_h3, flag_key__as_heading3, flag_key__as_headline3, flag_key__h3, flag_key__heading3, flag_key__headline3 } from "./--as-h3";
-// prettier-ignore
-import { flag_key_alias__as_h4, flag_key__as_h4, flag_key__as_heading4, flag_key__as_headline4, flag_key__h4, flag_key__heading4, flag_key__headline4 } from "./--as-h4";
-// prettier-ignore
-import { flag_key_alias__as_h5, flag_key__as_h5, flag_key__as_heading5, flag_key__as_headline5, flag_key__h5, flag_key__heading5, flag_key__headline5 } from "./--as-h5";
-// prettier-ignore
-import { flag_key_alias__as_h6, flag_key__as_h6, flag_key__as_heading6, flag_key__as_headline6, flag_key__h6, flag_key__heading6, flag_key__headline6 } from "./--as-h6";
-// prettier-ignore
-import { flag_key_alias__as_p, flag_key__as_p, flag_key__as_paragraph, flag_key__paragraph } from "./--as-p";
-// prettier-ignore
-import { flag_key_alias__as_span, flag_key__as_span, flag_key__as_text_span, flag_key__as_textspan, flag_key__text_span, flag_key__textspan } from "./--as-span";
+import { flag_key_alias__as_h1, flag_key__as_h1 } from "./--as-h1";
+import { flag_key_alias__as_h2, flag_key__as_h2 } from "./--as-h2";
+import { flag_key_alias__as_h3, flag_key__as_h3 } from "./--as-h3";
+import { flag_key_alias__as_h4, flag_key__as_h4 } from "./--as-h4";
+import { flag_key_alias__as_h5, flag_key__as_h5 } from "./--as-h5";
+import { flag_key_alias__as_h6, flag_key__as_h6 } from "./--as-h6";
+import { flag_key_alias__as_p, flag_key__as_p } from "./--as-p";
+import { flag_key_alias__as_span, flag_key__as_span } from "./--as-span";
 
 import { flag_key_alias__width, flag_key__width } from "./--width";
-// prettier-ignore
-import { flag_key_alias__min_width, flag_key__min_width, flag_key__minwidth } from "./--min-width";
-// prettier-ignore
-import { flag_key_alias__max_width, flag_key__max_width, flag_key__maxwidth } from "./--max-width";
+import { flag_key_alias__min_width, flag_key__min_width } from "./--min-width";
+import { flag_key_alias__max_width, flag_key__max_width } from "./--max-width";
 
 import { flag_key_alias__height, flag_key__height } from "./--height";
 // prettier-ignore
-import { flag_key_alias__min_height, flag_key__min_height, flag_key__minheight } from "./--min-height";
+import { flag_key_alias__min_height, flag_key__min_height } from "./--min-height";
 // prettier-ignore
-import { flag_key_alias__max_height, flag_key__max_height, flag_key__maxheight } from "./--max-height";
+import { flag_key_alias__max_height, flag_key__max_height } from "./--max-height";
 
 export {
   flag_key__as_h1,
-  flag_key__as_heading1,
-  flag_key__as_headline1,
-  flag_key__h1,
-  flag_key__heading1,
-  flag_key__headline1,
-};
-
-export {
   flag_key__as_h2,
-  flag_key__as_heading2,
-  flag_key__as_headline2,
-  flag_key__h2,
-  flag_key__heading2,
-  flag_key__headline2,
-};
-
-export {
   flag_key__as_h3,
-  flag_key__as_heading3,
-  flag_key__as_headline3,
-  flag_key__h3,
-  flag_key__heading3,
-  flag_key__headline3,
-};
-
-export {
   flag_key__as_h4,
-  flag_key__as_heading4,
-  flag_key__as_headline4,
-  flag_key__h4,
-  flag_key__heading4,
-  flag_key__headline4,
-};
-
-export {
   flag_key__as_h5,
-  flag_key__as_heading5,
-  flag_key__as_headline5,
-  flag_key__h5,
-  flag_key__heading5,
-  flag_key__headline5,
-};
-
-export {
   flag_key__as_h6,
-  flag_key__as_heading6,
-  flag_key__as_headline6,
-  flag_key__h6,
-  flag_key__heading6,
-  flag_key__headline6,
-};
-
-export {
-  //
-  flag_key__as_p,
-  flag_key__as_paragraph,
-  flag_key__paragraph,
-};
-
-export {
-  flag_key__as_span,
-  flag_key__as_text_span,
-  flag_key__as_textspan,
-  flag_key__text_span,
-  flag_key__textspan,
 };
+export { flag_key__as_p };
+export { flag_key__as_span };
 
 export { flag_key__width };
-export { flag_key__min_width, flag_key__minwidth };
-export { flag_key__max_width, flag_key__maxwidth };
+export { flag_key__min_width };
+export { flag_key__max_width };
 export { flag_key__height };
-export { flag_key__min_height, flag_key__minheight };
-export { flag_key__max_height, flag_key__maxheight };
+export { flag_key__min_height };
+export { flag_key__max_height };
 
 export const alias = {
   as_h1: flag_key_alias__as_h1,

From 2bfc127ba7aeb7fa4d254d9da32e52983cedd37f Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Fri, 31 Dec 2021 01:36:54 +0900
Subject: [PATCH 20/25] add types support for flags (internal)

---
 externals/design-sdk                          |  2 +-
 .../designto-token/support-flags/index.ts     | 57 ++-----------------
 packages/support-flags/index.ts               |  1 +
 packages/support-flags/parse.ts               | 11 +++-
 4 files changed, 17 insertions(+), 54 deletions(-)

diff --git a/externals/design-sdk b/externals/design-sdk
index d6ee49fb..a958b264 160000
--- a/externals/design-sdk
+++ b/externals/design-sdk
@@ -1 +1 @@
-Subproject commit d6ee49fb9c02bf62e686e3ac8463ea1b59d459fc
+Subproject commit a958b264ac2f37fe67e7b9c5dc3eed047b5756c6
diff --git a/packages/designto-token/support-flags/index.ts b/packages/designto-token/support-flags/index.ts
index 7bfeb09e..20c48e16 100644
--- a/packages/designto-token/support-flags/index.ts
+++ b/packages/designto-token/support-flags/index.ts
@@ -1,4 +1,4 @@
-import { parse, keys } from "@code-features/flags";
+import { parse, keys, FlagsParseResult } from "@code-features/flags";
 import type { ReflectSceneNode } from "@design-sdk/figma";
 import { tokenize_flagged_artwork } from "./token-artwork";
 import { tokenize_flagged_heading } from "./token-heading";
@@ -11,10 +11,7 @@ export default function (node: ReflectSceneNode) {
   return handle_with_flags(node, flags);
 }
 
-function handle_with_flags(node, flags) {
-  // process.env.NODE_ENV === "development" &&
-  //   console.log("tokenize_flagged_node", node, flags);
-
+function handle_with_flags(node, flags: FlagsParseResult) {
   // artwork
   const artwork_flag_alias =
     flags["artwork"] ||
@@ -38,65 +35,23 @@ function handle_with_flags(node, flags) {
 
   // heading
   const heading_flag_alias =
-    flags[keys.flag_key__h1] ||
     flags[keys.flag_key__as_h1] ||
-    flags[keys.flag_key__heading1] ||
-    flags[keys.flag_key__as_heading1] ||
-    flags[keys.flag_key__headline1] ||
-    flags[keys.flag_key__as_headline1] ||
-    //
-    flags[keys.flag_key__h2] ||
     flags[keys.flag_key__as_h2] ||
-    flags[keys.flag_key__heading2] ||
-    flags[keys.flag_key__as_heading2] ||
-    flags[keys.flag_key__headline2] ||
-    flags[keys.flag_key__as_headline2] ||
-    //
-    flags[keys.flag_key__h3] ||
     flags[keys.flag_key__as_h3] ||
-    flags[keys.flag_key__heading3] ||
-    flags[keys.flag_key__as_heading3] ||
-    flags[keys.flag_key__headline3] ||
-    flags[keys.flag_key__as_headline3] ||
-    //
-    flags[keys.flag_key__h4] ||
     flags[keys.flag_key__as_h4] ||
-    flags[keys.flag_key__heading4] ||
-    flags[keys.flag_key__as_heading4] ||
-    flags[keys.flag_key__headline4] ||
-    flags[keys.flag_key__as_headline4] ||
-    //
-    flags[keys.flag_key__h5] ||
     flags[keys.flag_key__as_h5] ||
-    flags[keys.flag_key__heading5] ||
-    flags[keys.flag_key__as_heading5] ||
-    flags[keys.flag_key__headline5] ||
-    flags[keys.flag_key__as_headline5] ||
-    //
-    flags[keys.flag_key__h6] ||
-    flags[keys.flag_key__as_h6] ||
-    flags[keys.flag_key__heading6] ||
-    flags[keys.flag_key__as_heading6] ||
-    flags[keys.flag_key__headline6] ||
-    flags[keys.flag_key__as_headline6];
+    flags[keys.flag_key__as_h6];
+
   if (heading_flag_alias) {
     return tokenize_flagged_heading(node, heading_flag_alias);
   }
 
-  const span_flag_alias =
-    flags[keys.flag_key__as_span] ||
-    flags[keys.flag_key__as_text_span] ||
-    flags[keys.flag_key__as_textspan] ||
-    flags[keys.flag_key__text_span] ||
-    flags[keys.flag_key__textspan];
+  const span_flag_alias = flags[keys.flag_key__as_span];
   if (span_flag_alias) {
     return tokenize_flagged_span(node, span_flag_alias);
   }
 
-  const paragraph_flag_alias =
-    flags[keys.flag_key__as_p] ||
-    flags[keys.flag_key__paragraph] ||
-    flags[keys.flag_key__as_paragraph];
+  const paragraph_flag_alias = flags[keys.flag_key__as_p];
   if (paragraph_flag_alias) {
     return tokenize_flagged_paragraph(node, paragraph_flag_alias);
   }
diff --git a/packages/support-flags/index.ts b/packages/support-flags/index.ts
index 021943c6..85d4a3ef 100644
--- a/packages/support-flags/index.ts
+++ b/packages/support-flags/index.ts
@@ -1,3 +1,4 @@
 export * from "./types";
 export * as keys from "./keys";
 export { parse } from "./parse";
+export type { FlagsParseResult } from "./parse";
diff --git a/packages/support-flags/parse.ts b/packages/support-flags/parse.ts
index 3f019f8c..e534ac9e 100644
--- a/packages/support-flags/parse.ts
+++ b/packages/support-flags/parse.ts
@@ -1,6 +1,7 @@
 import {
   parse as parseflags,
   Option,
+  Results,
 } from "@design-sdk/flags/parsing-strategy-dashdash";
 
 import * as keys from "./keys";
@@ -16,7 +17,13 @@ import type {
   SimpleBooleanValueFlag,
 } from "./types";
 
-export function parse(name: string) {
+export type FlagsParseResult = Results & {
+  __meta: {
+    [key: string]: boolean;
+  };
+};
+
+export function parse(name: string): FlagsParseResult {
   try {
     const _raw_parsed = parseflags(name, [
       {
@@ -78,7 +85,7 @@ export function parse(name: string) {
     };
   } catch (_) {
     console.error("error while parsing flags", _);
-    return {};
+    return {} as any;
   }
 }
 

From 1688d1639ad48a2cd0f9384fec621f3a0e1b4263 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Fri, 31 Dec 2021 02:03:37 +0900
Subject: [PATCH 21/25] update widgets wh type to have dynamic length, not
 static number by default

---
 externals/reflect-core                            |  2 +-
 .../widget-core/widget-with-style.ts              | 10 ++++++----
 .../widgets-native/container/index.ts             | 12 +++++++-----
 .../builder-web-core/widgets-native/flex/index.ts | 12 ++++++------
 .../widgets-native/html-svg/index.ts              | 15 +++++++--------
 .../widgets-native/stack/index.ts                 | 12 ++++++------
 .../compose-wrapped-with-positioned.ts            |  4 ++--
 7 files changed, 35 insertions(+), 32 deletions(-)

diff --git a/externals/reflect-core b/externals/reflect-core
index 5c5edf1f..7a05dbd1 160000
--- a/externals/reflect-core
+++ b/externals/reflect-core
@@ -1 +1 @@
-Subproject commit 5c5edf1fab4dbf2b0c7c1cae36f1a715e234061c
+Subproject commit 7a05dbd1f38b91b0be1002830496a572f3d952fe
diff --git a/packages/builder-web-core/widget-core/widget-with-style.ts b/packages/builder-web-core/widget-core/widget-with-style.ts
index c7fd8b45..19919100 100644
--- a/packages/builder-web-core/widget-core/widget-with-style.ts
+++ b/packages/builder-web-core/widget-core/widget-with-style.ts
@@ -27,9 +27,10 @@ export abstract class WidgetWithStyle
     IWHStyleWidget,
     IPositionedWidget,
     IBoxShadowWidget,
-    IEdgeInsetsWidget {
-  width?: number;
-  height?: number;
+    IEdgeInsetsWidget
+{
+  width?: DimensionLength;
+  height?: DimensionLength;
 
   constraint?: {
     left?: DimensionLength;
@@ -90,7 +91,8 @@ export abstract class WidgetWithStyle
  */
 export abstract class MultiChildWidgetWithStyle
   extends WidgetWithStyle
-  implements IWidgetWithStyle, IMultiChildJsxWidget {
+  implements IWidgetWithStyle, IMultiChildJsxWidget
+{
   readonly children: Array<JsxWidget> = [];
 
   constructor({ key }: { key: WidgetKey }) {
diff --git a/packages/builder-web-core/widgets-native/container/index.ts b/packages/builder-web-core/widgets-native/container/index.ts
index 26755c90..bb21acc5 100644
--- a/packages/builder-web-core/widgets-native/container/index.ts
+++ b/packages/builder-web-core/widgets-native/container/index.ts
@@ -4,6 +4,7 @@ import {
   Border,
   BorderRadiusManifest,
   BoxShadowManifest,
+  DimensionLength,
 } from "@reflect-ui/core";
 import { Background } from "@reflect-ui/core/lib/background";
 import * as css from "@web-builder/styles";
@@ -21,8 +22,8 @@ export class Container extends StylableJsxWidget {
     key: WidgetKey;
     x?: number;
     y?: number;
-    width?: number;
-    height?: number;
+    width?: DimensionLength;
+    height?: DimensionLength;
     background?: Background;
     borderRadius?: BorderRadiusManifest;
     boxShadow?: BoxShadowManifest[];
@@ -41,8 +42,8 @@ export class Container extends StylableJsxWidget {
 
   styleData(): CSSProperties {
     return {
-      width: css.px(this.width),
-      height: css.px(this.height),
+      width: css.length(this.width),
+      height: css.length(this.height),
       "box-shadow": css.boxshadow(...(this.boxShadow ?? [])),
       ...css.background(this.background),
       ...css.border(this.border),
@@ -59,6 +60,7 @@ export class Container extends StylableJsxWidget {
 
 export abstract class SelfClosingContainer
   extends Container
-  implements Omit<Container, "children"> {
+  implements Omit<Container, "children">
+{
   readonly children?: undefined;
 }
diff --git a/packages/builder-web-core/widgets-native/flex/index.ts b/packages/builder-web-core/widgets-native/flex/index.ts
index 54aea003..973ee3aa 100644
--- a/packages/builder-web-core/widgets-native/flex/index.ts
+++ b/packages/builder-web-core/widgets-native/flex/index.ts
@@ -52,8 +52,8 @@ export class Flex extends MultiChildWidget implements CssMinHeightMixin {
     p: IFlexManifest<StylableJsxWidget> & {
       // direction: "row" | "column";
       key: WidgetKey;
-      width?: number;
-      height?: number;
+      width?: DimensionLength;
+      height?: DimensionLength;
       minHeight?: DimensionLength;
       mainAxisAlignment?: MainAxisAlignment;
       mainAxisSize?: MainAxisSize;
@@ -146,8 +146,8 @@ function flexsizing({
 }: {
   direction: Axis;
   mainAxisSize?: MainAxisSize;
-  width?: number;
-  height?: number;
+  width?: DimensionLength;
+  height?: DimensionLength;
   flex?: number;
 }): CSSProperties {
   switch (mainAxisSize) {
@@ -163,8 +163,8 @@ function flexsizing({
         case Axis.vertical:
           return {
             flex: "none",
-            width: width && css.px(width),
-            height: height && css.px(height),
+            width: width && css.length(width),
+            height: height && css.length(height),
           };
       }
     }
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 8709f1d0..76a7def5 100644
--- a/packages/builder-web-core/widgets-native/html-svg/index.ts
+++ b/packages/builder-web-core/widgets-native/html-svg/index.ts
@@ -1,7 +1,7 @@
 import { StylableJsxWidget } from "@web-builder/core/widget-tree/widget";
 import { CSSProperties } from "@coli.codes/css";
-import { JSXElementConfig, StylableJSXElementConfig, WidgetKey } from "../..";
-import { px, color } from "@web-builder/styles";
+import { StylableJSXElementConfig, WidgetKey } from "../..";
+import * as css from "@web-builder/styles";
 import {
   JSX,
   JSXAttribute,
@@ -10,7 +10,6 @@ import {
   JSXIdentifier,
   JSXOpeningElement,
   JSXSelfClosingElement,
-  Snippet,
   StringLiteral,
 } from "coli";
 import { Color, GradientType } from "@reflect-ui/core";
@@ -110,7 +109,7 @@ export class SvgElement extends StylableJsxWidget {
     } else {
       switch (this.fill.type) {
         case "solid-color": {
-          return [path_with_fill(color(this.fill as Color))];
+          return [path_with_fill(css.color(this.fill as Color))];
         }
         case "graphics": {
           console.error("graphics fill for svg not supported.");
@@ -127,7 +126,7 @@ export class SvgElement extends StylableJsxWidget {
                     new JSXAttribute("offset", new StringLiteral(`${stop}%`)),
                     new JSXAttribute(
                       "style",
-                      new StringLiteral(`stop-color: ${color(c)}`)
+                      new StringLiteral(`stop-color: ${css.color(c)}`)
                     ),
                   ],
                 });
@@ -194,9 +193,9 @@ export class SvgElement extends StylableJsxWidget {
       };
     }
     return {
-      width: px(this.width),
-      height: px(this.height),
-      color: color(this.color),
+      width: css.length(this.width),
+      height: css.length(this.height),
+      color: css.color(this.color),
     };
   }
 
diff --git a/packages/builder-web-core/widgets-native/stack/index.ts b/packages/builder-web-core/widgets-native/stack/index.ts
index 36c384e2..75d1a5e6 100644
--- a/packages/builder-web-core/widgets-native/stack/index.ts
+++ b/packages/builder-web-core/widgets-native/stack/index.ts
@@ -20,8 +20,8 @@ import { Background } from "@reflect-ui/core/lib/background";
 export class Stack extends MultiChildWidget implements CssMinHeightMixin {
   readonly _type = "stack";
 
-  width: number;
-  height: number;
+  width: DimensionLength;
+  height: DimensionLength;
   minHeight?: DimensionLength;
   borderRadius?: BorderRadiusManifest;
   border?: Border;
@@ -30,8 +30,8 @@ export class Stack extends MultiChildWidget implements CssMinHeightMixin {
   constructor(p: {
     key: WidgetKey;
     children: Array<StylableJsxWidget>;
-    width: number;
-    height: number;
+    width: DimensionLength;
+    height: DimensionLength;
     minHeight?: DimensionLength;
     boxShadow?: BoxShadowManifest[];
     borderRadius?: BorderRadiusManifest;
@@ -63,8 +63,8 @@ export class Stack extends MultiChildWidget implements CssMinHeightMixin {
 
   styleData(): CSSProperties {
     return {
-      width: css.px(this.width),
-      height: css.px(this.height),
+      width: css.length(this.width),
+      height: css.length(this.height),
 
       "min-height": css.minHeight(this.minHeight),
       overflow: clip(this.clipBehavior),
diff --git a/packages/designto-web/tokens-to-web-widget/compose-wrapped-with-positioned.ts b/packages/designto-web/tokens-to-web-widget/compose-wrapped-with-positioned.ts
index bfe612aa..2cc495e6 100644
--- a/packages/designto-web/tokens-to-web-widget/compose-wrapped-with-positioned.ts
+++ b/packages/designto-web/tokens-to-web-widget/compose-wrapped-with-positioned.ts
@@ -10,8 +10,8 @@ export function compose_wrapped_with_positioned(
   // -------------------------------------
   // override w & h with position provided w/h
   child.extendStyle({
-    width: css.px(widget.width),
-    height: css.px(widget.height),
+    width: css.length(widget.width),
+    height: css.length(widget.height),
   });
   // -------------------------------------
   child.constraint = {

From bd20fbefe3121b00f9dc357d9679b39fa617e16d Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Fri, 31 Dec 2021 02:41:45 +0900
Subject: [PATCH 22/25] initially add support for wh declaration flag.
 (multiple flags not supported for single layer for now.)

---
 externals/reflect-core                        |  2 +-
 packages/designto-token/config/config.ts      |  2 +-
 .../designto-token/support-flags/index.ts     | 13 +++
 .../support-flags/token-wh/index.ts           | 82 +++++++++++++++++++
 packages/support-flags/parse.ts               | 43 +++++++++-
 5 files changed, 139 insertions(+), 3 deletions(-)
 create mode 100644 packages/designto-token/support-flags/token-wh/index.ts

diff --git a/externals/reflect-core b/externals/reflect-core
index 7a05dbd1..f0663b2a 160000
--- a/externals/reflect-core
+++ b/externals/reflect-core
@@ -1 +1 @@
-Subproject commit 7a05dbd1f38b91b0be1002830496a572f3d952fe
+Subproject commit f0663b2aa0b76ace158fef054a67a520b01d94eb
diff --git a/packages/designto-token/config/config.ts b/packages/designto-token/config/config.ts
index abf13be3..90e58bf9 100644
--- a/packages/designto-token/config/config.ts
+++ b/packages/designto-token/config/config.ts
@@ -12,7 +12,7 @@ export interface TokenizerConfig {
    */
   id?: string;
 
-  sanitizer_ignore_masking_node: boolean;
+  sanitizer_ignore_masking_node?: boolean;
 
   /**
    * @default false - flags support enabled by default.
diff --git a/packages/designto-token/support-flags/index.ts b/packages/designto-token/support-flags/index.ts
index 20c48e16..acf75038 100644
--- a/packages/designto-token/support-flags/index.ts
+++ b/packages/designto-token/support-flags/index.ts
@@ -5,6 +5,7 @@ import { tokenize_flagged_heading } from "./token-heading";
 import { tokenize_flagged_paragraph } from "./token-p";
 import { tokenize_flagged_span } from "./token-span";
 import { tokenize_flagged_wrap } from "./token-wrap";
+import { tokenize_flagged_wh_declaration } from "./token-wh";
 
 export default function (node: ReflectSceneNode) {
   const flags = parse(node.name);
@@ -55,4 +56,16 @@ function handle_with_flags(node, flags: FlagsParseResult) {
   if (paragraph_flag_alias) {
     return tokenize_flagged_paragraph(node, paragraph_flag_alias);
   }
+
+  const wh_declaration_flag_alias =
+    flags[keys.flag_key__width] ||
+    flags[keys.flag_key__min_width] ||
+    flags[keys.flag_key__max_width] ||
+    flags[keys.flag_key__height] ||
+    flags[keys.flag_key__min_height] ||
+    flags[keys.flag_key__max_height];
+
+  if (wh_declaration_flag_alias) {
+    return tokenize_flagged_wh_declaration(node, wh_declaration_flag_alias);
+  }
 }
diff --git a/packages/designto-token/support-flags/token-wh/index.ts b/packages/designto-token/support-flags/token-wh/index.ts
new file mode 100644
index 00000000..2b5c0094
--- /dev/null
+++ b/packages/designto-token/support-flags/token-wh/index.ts
@@ -0,0 +1,82 @@
+import { WHDeclarationFlag } from "@code-features/flags";
+import { ReflectSceneNode } from "@design-sdk/figma-node";
+import {
+  DimensionLength,
+  isPossibleDimensionLength,
+  IWHStyleWidget,
+  Widget,
+} from "@reflect-ui/core";
+import { tokenize } from "../../main";
+import { unwrappedChild } from "../../wrappings";
+
+export function tokenize_flagged_wh_declaration(
+  node: ReflectSceneNode,
+  flag: WHDeclarationFlag
+): Widget {
+  if (!flag.value) return;
+
+  const widget = tokenize(node, {
+    should_ignore_flag: (n) => {
+      return node.id == n.id;
+    },
+  });
+
+  const flag_target = unwrappedChild(widget) as IWHStyleWidget;
+
+  const inject_width = () => {
+    flag_target.width = flag.value as DimensionLength;
+  };
+
+  const inject_min_width = () => {
+    flag_target.minWidth = flag.value as DimensionLength;
+  };
+
+  const inject_max_width = () => {
+    flag_target.maxWidth = flag.value as DimensionLength;
+  };
+
+  const inject_height = () => {
+    flag_target.height = flag.value as DimensionLength;
+  };
+
+  const inject_min_height = () => {
+    flag_target.minHeight = flag.value as DimensionLength;
+  };
+
+  const inject_max_height = () => {
+    flag_target.maxHeight = flag.value as DimensionLength;
+  };
+
+  switch (flag.flag) {
+    case "width":
+      if (isPossibleDimensionLength(flag.value)) {
+        inject_width();
+      } else {
+        // TODO:
+      }
+      break;
+    case "min-width":
+      inject_min_width();
+      break;
+    case "max-width":
+      inject_max_width();
+      break;
+    case "height":
+      if (isPossibleDimensionLength(flag.value)) {
+        inject_height();
+      } else {
+        // TODO:
+      }
+      break;
+    case "min-height":
+      inject_min_height();
+      break;
+    case "max-height":
+      inject_max_height();
+      break;
+  }
+
+  console.log("whinjection", flag, flag.flag, widget, flag_target);
+
+  return widget;
+}
diff --git a/packages/support-flags/parse.ts b/packages/support-flags/parse.ts
index e534ac9e..a0a8a182 100644
--- a/packages/support-flags/parse.ts
+++ b/packages/support-flags/parse.ts
@@ -16,6 +16,7 @@ import type {
   AsTextSpanFlag,
   SimpleBooleanValueFlag,
 } from "./types";
+import { WHDeclarationFlag } from ".";
 
 export type FlagsParseResult = Results & {
   __meta: {
@@ -70,17 +71,22 @@ export function parse(name: string): FlagsParseResult {
       keys.alias.as_span
     );
 
-    console.log("_raw_parsed", _raw_parsed);
+    const wh_declaration_flag =
+      transform_wh_declaration_alias_from_raw(_raw_parsed);
+
+    // console.log("_raw_parsed", _raw_parsed);
 
     return {
       ..._raw_parsed,
       ...as_heading_flag,
       ...(as_paragraph_flag ?? {}),
       ...(as_span_flag ?? {}),
+      ...(wh_declaration_flag ?? {}),
       __meta: {
         contains_heading_flag: notempty(as_heading_flag),
         contains_paragraph_flag: notempty(as_paragraph_flag),
         contains_span_flag: notempty(as_span_flag),
+        contains_wh_declaration_flag: notempty(as_span_flag),
       },
     };
   } catch (_) {
@@ -238,3 +244,38 @@ const __max_height_alias_pref =
   _simple_custom_string_value_flag_prefernce_mapper(keys.alias.max_height);
 const __min_height_alias_pref =
   _simple_custom_string_value_flag_prefernce_mapper(keys.alias.min_height);
+
+function transform_wh_declaration_alias_from_raw(raw: { [key: string]: any }): {
+  [key: string]: WHDeclarationFlag;
+} {
+  const handle = (key) => {
+    if (raw[key]) {
+      return {
+        [key]: {
+          flag: key,
+          value: Number(raw[key]), // TODO: add more parser
+          _raw: raw[key] as string,
+        } as WHDeclarationFlag,
+      };
+    }
+  };
+
+  return [
+    keys.flag_key__width,
+    keys.flag_key__min_width,
+    keys.flag_key__max_width,
+
+    keys.flag_key__height,
+    keys.flag_key__min_height,
+    keys.flag_key__max_height,
+  ].reduce((acc, c) => {
+    const d = handle(c);
+    if (d) {
+      return {
+        ...acc,
+        ...d,
+      };
+    }
+    return acc;
+  }, {});
+}

From 558704a2b54a403a53fcc6bd105e146e3ea448a6 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Fri, 31 Dec 2021 16:41:36 +0900
Subject: [PATCH 23/25] add multiple inline wh flag declaration merging

---
 .../designto-token/support-flags/index.ts     | 19 ++--
 .../support-flags/token-wh/index.ts           | 99 ++++++++-----------
 2 files changed, 53 insertions(+), 65 deletions(-)

diff --git a/packages/designto-token/support-flags/index.ts b/packages/designto-token/support-flags/index.ts
index acf75038..ce985171 100644
--- a/packages/designto-token/support-flags/index.ts
+++ b/packages/designto-token/support-flags/index.ts
@@ -57,15 +57,16 @@ function handle_with_flags(node, flags: FlagsParseResult) {
     return tokenize_flagged_paragraph(node, paragraph_flag_alias);
   }
 
-  const wh_declaration_flag_alias =
-    flags[keys.flag_key__width] ||
-    flags[keys.flag_key__min_width] ||
-    flags[keys.flag_key__max_width] ||
-    flags[keys.flag_key__height] ||
-    flags[keys.flag_key__min_height] ||
-    flags[keys.flag_key__max_height];
+  const wh_declaration_flags = [
+    flags[keys.flag_key__width],
+    flags[keys.flag_key__min_width],
+    flags[keys.flag_key__max_width],
+    flags[keys.flag_key__height],
+    flags[keys.flag_key__min_height],
+    flags[keys.flag_key__max_height],
+  ].filter(Boolean);
 
-  if (wh_declaration_flag_alias) {
-    return tokenize_flagged_wh_declaration(node, wh_declaration_flag_alias);
+  if (wh_declaration_flags.length) {
+    return tokenize_flagged_wh_declaration(node, wh_declaration_flags);
   }
 }
diff --git a/packages/designto-token/support-flags/token-wh/index.ts b/packages/designto-token/support-flags/token-wh/index.ts
index 2b5c0094..aa873f71 100644
--- a/packages/designto-token/support-flags/token-wh/index.ts
+++ b/packages/designto-token/support-flags/token-wh/index.ts
@@ -11,9 +11,44 @@ import { unwrappedChild } from "../../wrappings";
 
 export function tokenize_flagged_wh_declaration(
   node: ReflectSceneNode,
-  flag: WHDeclarationFlag
+  flag: WHDeclarationFlag[]
 ): Widget {
-  if (!flag.value) return;
+  if (!flag.length) return;
+
+  const merged = flag
+    .map((f) => f)
+    .reduce<IWHStyleWidget>((a, b) => {
+      if (isPossibleDimensionLength(b.value)) {
+        let rec: IWHStyleWidget = {};
+        switch (b.flag) {
+          case "width":
+            rec["width"] = b.value as DimensionLength;
+            break;
+          case "min-width":
+            rec["minWidth"] = b.value;
+            break;
+          case "max-width":
+            rec["maxWidth"] = b.value;
+            break;
+          case "height":
+            rec["height"] = b.value as DimensionLength;
+            break;
+          case "min-height":
+            rec["minHeight"] = b.value;
+            break;
+          case "max-height":
+            rec["maxHeight"] = b.value;
+            break;
+        }
+        return {
+          ...a,
+          ...rec,
+        };
+      } else {
+        // TODO: support complex values
+      }
+      return a;
+    }, {});
 
   const widget = tokenize(node, {
     should_ignore_flag: (n) => {
@@ -23,60 +58,12 @@ export function tokenize_flagged_wh_declaration(
 
   const flag_target = unwrappedChild(widget) as IWHStyleWidget;
 
-  const inject_width = () => {
-    flag_target.width = flag.value as DimensionLength;
-  };
-
-  const inject_min_width = () => {
-    flag_target.minWidth = flag.value as DimensionLength;
-  };
-
-  const inject_max_width = () => {
-    flag_target.maxWidth = flag.value as DimensionLength;
-  };
-
-  const inject_height = () => {
-    flag_target.height = flag.value as DimensionLength;
-  };
-
-  const inject_min_height = () => {
-    flag_target.minHeight = flag.value as DimensionLength;
-  };
-
-  const inject_max_height = () => {
-    flag_target.maxHeight = flag.value as DimensionLength;
-  };
-
-  switch (flag.flag) {
-    case "width":
-      if (isPossibleDimensionLength(flag.value)) {
-        inject_width();
-      } else {
-        // TODO:
-      }
-      break;
-    case "min-width":
-      inject_min_width();
-      break;
-    case "max-width":
-      inject_max_width();
-      break;
-    case "height":
-      if (isPossibleDimensionLength(flag.value)) {
-        inject_height();
-      } else {
-        // TODO:
-      }
-      break;
-    case "min-height":
-      inject_min_height();
-      break;
-    case "max-height":
-      inject_max_height();
-      break;
-  }
-
-  console.log("whinjection", flag, flag.flag, widget, flag_target);
+  merged.width && (flag_target.width = merged.width);
+  merged.minWidth && (flag_target.minWidth = merged.minWidth);
+  merged.maxWidth && (flag_target.maxWidth = merged.maxWidth);
+  merged.height && (flag_target.height = merged.height);
+  merged.minHeight && (flag_target.minHeight = merged.minHeight);
+  merged.maxHeight && (flag_target.maxHeight = merged.maxHeight);
 
   return widget;
 }

From 6020248118cc4c59a63cc442b0a214ee7339ee9f Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Fri, 31 Dec 2021 17:26:55 +0900
Subject: [PATCH 24/25] add final wh min max support - add property to web
 widgets

---
 .../widget-core/widget-with-style.ts          |  4 ++++
 .../widgets-native/container/index.ts         | 17 +++++++++++++++
 .../widgets-native/flex/index.ts              | 21 +++++++++++++++++--
 .../widgets-native/stack/index.ts             | 19 +++++++++++++++--
 4 files changed, 57 insertions(+), 4 deletions(-)

diff --git a/packages/builder-web-core/widget-core/widget-with-style.ts b/packages/builder-web-core/widget-core/widget-with-style.ts
index 19919100..1dd1995e 100644
--- a/packages/builder-web-core/widget-core/widget-with-style.ts
+++ b/packages/builder-web-core/widget-core/widget-with-style.ts
@@ -31,6 +31,10 @@ export abstract class WidgetWithStyle
 {
   width?: DimensionLength;
   height?: DimensionLength;
+  minWidth?: DimensionLength;
+  minHeight?: DimensionLength;
+  maxWidth?: DimensionLength;
+  maxHeight?: DimensionLength;
 
   constraint?: {
     left?: DimensionLength;
diff --git a/packages/builder-web-core/widgets-native/container/index.ts b/packages/builder-web-core/widgets-native/container/index.ts
index bb21acc5..2c4a9e41 100644
--- a/packages/builder-web-core/widgets-native/container/index.ts
+++ b/packages/builder-web-core/widgets-native/container/index.ts
@@ -22,16 +22,28 @@ export class Container extends StylableJsxWidget {
     key: WidgetKey;
     x?: number;
     y?: number;
+
     width?: DimensionLength;
     height?: DimensionLength;
+    minWidth?: DimensionLength;
+    maxWidth?: DimensionLength;
+    minHeight?: DimensionLength;
+    maxHeight?: DimensionLength;
+
     background?: Background;
     borderRadius?: BorderRadiusManifest;
     boxShadow?: BoxShadowManifest[];
     border?: Border;
   }) {
     super(p);
+
     this.width = p.width;
     this.height = p.height;
+    this.minWidth = p.minWidth;
+    this.maxWidth = p.maxWidth;
+    this.minHeight = p.minHeight;
+    this.maxHeight = p.maxHeight;
+
     this.x = p.x;
     this.y = p.y;
     this.background = p.background;
@@ -44,6 +56,11 @@ export class Container extends StylableJsxWidget {
     return {
       width: css.length(this.width),
       height: css.length(this.height),
+      "min-width": css.length(this.minWidth),
+      "max-width": css.length(this.maxWidth),
+      "min-height": css.length(this.minHeight),
+      "max-height": css.length(this.maxHeight),
+
       "box-shadow": css.boxshadow(...(this.boxShadow ?? [])),
       ...css.background(this.background),
       ...css.border(this.border),
diff --git a/packages/builder-web-core/widgets-native/flex/index.ts b/packages/builder-web-core/widgets-native/flex/index.ts
index 973ee3aa..9c4baa2c 100644
--- a/packages/builder-web-core/widgets-native/flex/index.ts
+++ b/packages/builder-web-core/widgets-native/flex/index.ts
@@ -45,7 +45,12 @@ export class Flex extends MultiChildWidget implements CssMinHeightMixin {
 
   borderRadius?: BorderRadiusManifest;
   border?: Border;
+
+  minWidth?: DimensionLength;
+  maxWidth?: DimensionLength;
   minHeight?: DimensionLength;
+  maxHeight?: DimensionLength;
+
   flexWrap?: FlexWrap;
 
   constructor(
@@ -54,7 +59,10 @@ export class Flex extends MultiChildWidget implements CssMinHeightMixin {
       key: WidgetKey;
       width?: DimensionLength;
       height?: DimensionLength;
+      minWidth?: DimensionLength;
+      maxWidth?: DimensionLength;
       minHeight?: DimensionLength;
+      maxHeight?: DimensionLength;
       mainAxisAlignment?: MainAxisAlignment;
       mainAxisSize?: MainAxisSize;
       crossAxisAlignment?: CrossAxisAlignment;
@@ -74,6 +82,11 @@ export class Flex extends MultiChildWidget implements CssMinHeightMixin {
     this.width = p.width;
     this.height = p.height;
 
+    this.minWidth = p.minWidth;
+    this.maxWidth = p.maxWidth;
+    this.minHeight = p.minHeight;
+    this.maxHeight = p.maxHeight;
+
     // flex related
     this.direction = p.direction;
     this.itemSpacing = p.itemSpacing;
@@ -94,7 +107,6 @@ export class Flex extends MultiChildWidget implements CssMinHeightMixin {
 
     // css only
     this.overflow = p.overflow;
-    this.minHeight = p.minHeight;
     this.flexWrap = p.flexWrap;
   }
 
@@ -119,7 +131,12 @@ export class Flex extends MultiChildWidget implements CssMinHeightMixin {
       ...css.border(this.border),
       ...css.borderRadius(this.borderRadius),
       ...flexsizing({ ...this }),
-      "min-height": css.minHeight(this.minHeight),
+
+      "min-width": css.length(this.minWidth),
+      "max-width": css.length(this.maxWidth),
+      "min-height": css.length(this.minHeight),
+      "max-height": css.length(this.maxHeight),
+
       ...css.background(this.background),
       "box-sizing": (this.padding && "border-box") || undefined,
       ...css.padding(this.padding),
diff --git a/packages/builder-web-core/widgets-native/stack/index.ts b/packages/builder-web-core/widgets-native/stack/index.ts
index 75d1a5e6..2315b0d8 100644
--- a/packages/builder-web-core/widgets-native/stack/index.ts
+++ b/packages/builder-web-core/widgets-native/stack/index.ts
@@ -22,7 +22,11 @@ export class Stack extends MultiChildWidget implements CssMinHeightMixin {
 
   width: DimensionLength;
   height: DimensionLength;
+  minWidth?: DimensionLength;
+  maxWidth?: DimensionLength;
   minHeight?: DimensionLength;
+  maxHeight?: DimensionLength;
+
   borderRadius?: BorderRadiusManifest;
   border?: Border;
   clipBehavior?: Clip;
@@ -30,9 +34,14 @@ export class Stack extends MultiChildWidget implements CssMinHeightMixin {
   constructor(p: {
     key: WidgetKey;
     children: Array<StylableJsxWidget>;
+
     width: DimensionLength;
     height: DimensionLength;
+    minWidth?: DimensionLength;
+    maxWidth?: DimensionLength;
     minHeight?: DimensionLength;
+    maxHeight?: DimensionLength;
+
     boxShadow?: BoxShadowManifest[];
     borderRadius?: BorderRadiusManifest;
     border?: Border;
@@ -40,10 +49,13 @@ export class Stack extends MultiChildWidget implements CssMinHeightMixin {
     clipBehavior?: Clip;
   }) {
     super(p);
+
     this.width = p.width;
     this.height = p.height;
-
+    this.minWidth = p.minWidth;
+    this.maxWidth = p.maxWidth;
     this.minHeight = p.minHeight;
+    this.maxHeight = p.maxHeight;
 
     this.background = p.background;
     this.borderRadius = p.borderRadius;
@@ -65,8 +77,11 @@ export class Stack extends MultiChildWidget implements CssMinHeightMixin {
     return {
       width: css.length(this.width),
       height: css.length(this.height),
+      "min-width": css.length(this.minWidth),
+      "max-width": css.length(this.maxWidth),
+      "min-height": css.length(this.minHeight),
+      "max-height": css.length(this.maxHeight),
 
-      "min-height": css.minHeight(this.minHeight),
       overflow: clip(this.clipBehavior),
       ...css.background(this.background),
       ...css.border(this.border),

From cefa0df1d42e5bfb279bbfc75a06ee2a46107465 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Fri, 31 Dec 2021 18:20:35 +0900
Subject: [PATCH 25/25] add `--fix-width` and `--fix-height` flag support

---
 .../designto-token/support-flags/index.ts     | 19 ++++++-
 .../support-flags/token-wh-fix/index.ts       | 57 +++++++++++++++++++
 packages/support-flags/--fix-height/index.ts  | 10 ++++
 packages/support-flags/--fix-width/index.ts   |  7 +--
 packages/support-flags/keys.ts                | 20 +++++--
 packages/support-flags/parse.ts               | 26 ++++++++-
 packages/support-flags/types.ts               | 12 ++--
 7 files changed, 132 insertions(+), 19 deletions(-)
 create mode 100644 packages/designto-token/support-flags/token-wh-fix/index.ts
 create mode 100644 packages/support-flags/--fix-height/index.ts

diff --git a/packages/designto-token/support-flags/index.ts b/packages/designto-token/support-flags/index.ts
index ce985171..d0184e63 100644
--- a/packages/designto-token/support-flags/index.ts
+++ b/packages/designto-token/support-flags/index.ts
@@ -1,4 +1,10 @@
-import { parse, keys, FlagsParseResult } from "@code-features/flags";
+import {
+  parse,
+  keys,
+  FlagsParseResult,
+  WHDeclarationFlag,
+  FixWHFlag,
+} from "@code-features/flags";
 import type { ReflectSceneNode } from "@design-sdk/figma";
 import { tokenize_flagged_artwork } from "./token-artwork";
 import { tokenize_flagged_heading } from "./token-heading";
@@ -6,6 +12,7 @@ import { tokenize_flagged_paragraph } from "./token-p";
 import { tokenize_flagged_span } from "./token-span";
 import { tokenize_flagged_wrap } from "./token-wrap";
 import { tokenize_flagged_wh_declaration } from "./token-wh";
+import { tokenize_flagged_fix_wh } from "./token-wh-fix";
 
 export default function (node: ReflectSceneNode) {
   const flags = parse(node.name);
@@ -57,7 +64,7 @@ function handle_with_flags(node, flags: FlagsParseResult) {
     return tokenize_flagged_paragraph(node, paragraph_flag_alias);
   }
 
-  const wh_declaration_flags = [
+  const wh_declaration_flags: WHDeclarationFlag[] = [
     flags[keys.flag_key__width],
     flags[keys.flag_key__min_width],
     flags[keys.flag_key__max_width],
@@ -69,4 +76,12 @@ function handle_with_flags(node, flags: FlagsParseResult) {
   if (wh_declaration_flags.length) {
     return tokenize_flagged_wh_declaration(node, wh_declaration_flags);
   }
+
+  const fix_wh_flags: FixWHFlag[] = [
+    flags[keys.flag_key__fix_width],
+    flags[keys.flag_key__fix_height],
+  ].filter(Boolean);
+  if (fix_wh_flags.length) {
+    return tokenize_flagged_fix_wh(node, fix_wh_flags);
+  }
 }
diff --git a/packages/designto-token/support-flags/token-wh-fix/index.ts b/packages/designto-token/support-flags/token-wh-fix/index.ts
new file mode 100644
index 00000000..1c366f34
--- /dev/null
+++ b/packages/designto-token/support-flags/token-wh-fix/index.ts
@@ -0,0 +1,57 @@
+import { FixWHFlag } from "@code-features/flags";
+import { ReflectSceneNode } from "@design-sdk/figma-node";
+import { IWHStyleWidget, Widget } from "@reflect-ui/core";
+import { tokenize } from "../../main";
+import { unwrappedChild } from "../../wrappings";
+
+export function tokenize_flagged_fix_wh(
+  node: ReflectSceneNode,
+  flag: FixWHFlag[]
+): Widget {
+  if (!flag.length) return;
+  const widget = tokenize(node, {
+    should_ignore_flag: (n) => {
+      return node.id == n.id;
+    },
+  });
+
+  const flag_target = unwrappedChild(widget) as IWHStyleWidget;
+
+  const merged = flag
+    .map((f) => f)
+    .reduce<IWHStyleWidget>((a, b) => {
+      let rec: IWHStyleWidget = {};
+      ///
+      /// NOTE:
+      /// we are currently fixing the width of the target by specifying all of the current, min, max value.
+      /// this is not ideal, but it is the best we can do for now.
+      /// why we are also specifying min, max is because we yet don't have a correct handling system to determine if the current token's value is modified by flag or not.
+      /// so it is very possible that width/height will be modified, or remvoed by other logic gates. to prevent this, we also specify min, max.
+      ///
+      switch (b.flag) {
+        case "fix-width":
+          rec["width"] = flag_target.width;
+          rec["minWidth"] = flag_target.width;
+          rec["maxWidth"] = flag_target.width;
+          break;
+        case "fix-height":
+          rec["height"] = flag_target.height;
+          rec["minHeight"] = flag_target.height;
+          rec["maxHeight"] = flag_target.height;
+          break;
+      }
+      return {
+        ...a,
+        ...rec,
+      };
+    }, {});
+
+  merged.width && (flag_target.width = merged.width);
+  merged.minWidth && (flag_target.minWidth = merged.minWidth);
+  merged.maxWidth && (flag_target.maxWidth = merged.maxWidth);
+  merged.height && (flag_target.height = merged.height);
+  merged.minHeight && (flag_target.minHeight = merged.minHeight);
+  merged.maxHeight && (flag_target.maxHeight = merged.maxHeight);
+
+  return widget;
+}
diff --git a/packages/support-flags/--fix-height/index.ts b/packages/support-flags/--fix-height/index.ts
new file mode 100644
index 00000000..72a8d0c5
--- /dev/null
+++ b/packages/support-flags/--fix-height/index.ts
@@ -0,0 +1,10 @@
+export const flag_key__fix_height = "fix-height";
+
+export const flag_key_alias__fix_height = [flag_key__fix_height];
+
+export interface FixHeightFlag {
+  flag: typeof flag_key__fix_height;
+
+  value: true;
+  _raw?: string;
+}
diff --git a/packages/support-flags/--fix-width/index.ts b/packages/support-flags/--fix-width/index.ts
index d389f42e..1d8d23c8 100644
--- a/packages/support-flags/--fix-width/index.ts
+++ b/packages/support-flags/--fix-width/index.ts
@@ -1,10 +1,9 @@
-import { DimensionLength } from "@reflect-ui/core";
-
-export const flag_key__fix_width = "fixed-width";
+export const flag_key__fix_width = "fix-width";
 
+export const flag_key_alias__fix_width = [flag_key__fix_width];
 export interface FixWidthFlag {
   flag: typeof flag_key__fix_width;
 
-  value: DimensionLength;
+  value: true;
   _raw?: string;
 }
diff --git a/packages/support-flags/keys.ts b/packages/support-flags/keys.ts
index 9a66743a..3761cb8e 100644
--- a/packages/support-flags/keys.ts
+++ b/packages/support-flags/keys.ts
@@ -16,6 +16,9 @@ import { flag_key_alias__height, flag_key__height } from "./--height";
 import { flag_key_alias__min_height, flag_key__min_height } from "./--min-height";
 // prettier-ignore
 import { flag_key_alias__max_height, flag_key__max_height } from "./--max-height";
+import { flag_key_alias__fix_width, flag_key__fix_width } from "./--fix-width";
+// prettier-ignore
+import { flag_key_alias__fix_height, flag_key__fix_height } from "./--fix-height";
 
 export {
   flag_key__as_h1,
@@ -28,12 +31,15 @@ export {
 export { flag_key__as_p };
 export { flag_key__as_span };
 
-export { flag_key__width };
-export { flag_key__min_width };
-export { flag_key__max_width };
-export { flag_key__height };
-export { flag_key__min_height };
-export { flag_key__max_height };
+export {
+  flag_key__width,
+  flag_key__min_width,
+  flag_key__max_width,
+  flag_key__height,
+  flag_key__min_height,
+  flag_key__max_height,
+};
+export { flag_key__fix_width, flag_key__fix_height };
 
 export const alias = {
   as_h1: flag_key_alias__as_h1,
@@ -50,4 +56,6 @@ export const alias = {
   height: flag_key_alias__height,
   min_height: flag_key_alias__min_height,
   max_height: flag_key_alias__max_height,
+  fix_width: flag_key_alias__fix_width,
+  fix_height: flag_key_alias__fix_height,
 };
diff --git a/packages/support-flags/parse.ts b/packages/support-flags/parse.ts
index a0a8a182..319fc834 100644
--- a/packages/support-flags/parse.ts
+++ b/packages/support-flags/parse.ts
@@ -15,8 +15,9 @@ import type {
   AsParagraphFlag,
   AsTextSpanFlag,
   SimpleBooleanValueFlag,
+  FixWHFlag,
+  WHDeclarationFlag,
 } from "./types";
-import { WHDeclarationFlag } from ".";
 
 export type FlagsParseResult = Results & {
   __meta: {
@@ -54,6 +55,12 @@ export function parse(name: string): FlagsParseResult {
       __max_height_alias_pref,
       __min_height_alias_pref,
       //#endregion
+
+      //#region
+      __fix_width_alias_pref,
+      __fix_height_alias_pref,
+      //#endregion
+
       {
         name: flag_key__module,
         type: "bool", // TODO: support string also.
@@ -73,7 +80,10 @@ export function parse(name: string): FlagsParseResult {
 
     const wh_declaration_flag =
       transform_wh_declaration_alias_from_raw(_raw_parsed);
-
+    const fix_wh_flag = handle_single_boolean_flag_alias<FixWHFlag>(
+      _raw_parsed,
+      [...keys.alias.fix_width, ...keys.alias.fix_height]
+    );
     // console.log("_raw_parsed", _raw_parsed);
 
     return {
@@ -82,14 +92,17 @@ export function parse(name: string): FlagsParseResult {
       ...(as_paragraph_flag ?? {}),
       ...(as_span_flag ?? {}),
       ...(wh_declaration_flag ?? {}),
+      ...(fix_wh_flag ?? {}),
       __meta: {
         contains_heading_flag: notempty(as_heading_flag),
         contains_paragraph_flag: notempty(as_paragraph_flag),
         contains_span_flag: notempty(as_span_flag),
         contains_wh_declaration_flag: notempty(as_span_flag),
+        contains_fix_wh_flag: notempty(fix_wh_flag),
       },
     };
   } catch (_) {
+    // TODO: this can happen when unregistered flag is used. this will be fixed.
     console.error("error while parsing flags", _);
     return {} as any;
   }
@@ -125,7 +138,7 @@ function handle_single_boolean_flag_alias<T extends SimpleBooleanValueFlag>(
     if (raw[c.key]) {
       return {
         ...acc,
-        [c.key]: <T>{ flag: c.key, value: raw[c.key] },
+        [c.key]: <T>{ flag: c.key, value: raw[c.key], _raw: String(raw) },
       };
     }
     return acc;
@@ -279,3 +292,10 @@ function transform_wh_declaration_alias_from_raw(raw: { [key: string]: any }): {
     return acc;
   }, {});
 }
+
+const __fix_width_alias_pref = _simple_boolean_value_flag_prefernce_mapper(
+  keys.alias.fix_width
+);
+const __fix_height_alias_pref = _simple_boolean_value_flag_prefernce_mapper(
+  keys.alias.fix_height
+);
diff --git a/packages/support-flags/types.ts b/packages/support-flags/types.ts
index 5bf33b40..8fc6ca12 100644
--- a/packages/support-flags/types.ts
+++ b/packages/support-flags/types.ts
@@ -13,20 +13,26 @@ import type { MaxWidthFlag } from "./--max-width";
 import type { HeightFlag } from "./--height";
 import type { MinHeightFlag } from "./--min-height";
 import type { MaxHeightFlag } from "./--max-height";
+import { FixWidthFlag } from "./--fix-width";
+import { FixHeightFlag } from "./--fix-height";
 
 export type Flag =
   //
-  ArtworkFlag | TextElementPreferenceFlag | WHDeclarationFlag;
+  ArtworkFlag | TextElementPreferenceFlag | WHDeclarationFlag | FixWHFlag;
 
 export interface SimpleBooleanValueFlag {
   flag: string;
   value: boolean;
+  _raw?: string;
 }
 
 export type WHDeclarationFlag = WidthDeclarationFlag | HeightDeclarationFlag;
+
 export type WidthDeclarationFlag = WidthFlag | MinWidthFlag | MaxWidthFlag;
 export type HeightDeclarationFlag = HeightFlag | MinHeightFlag | MaxHeightFlag;
 
+export type FixWHFlag = FixWidthFlag | FixHeightFlag;
+
 /**
  * Type alias for a flag that can be used to set the element preference to render a text
  *
@@ -91,6 +97,4 @@ export type { AsTextSpanFlag };
 
 export type { WidthFlag, MinWidthFlag, MaxWidthFlag };
 export type { HeightFlag, MinHeightFlag, MaxHeightFlag };
-
-// export type {  };
-// export type {  };
+export type { FixWidthFlag, FixHeightFlag };