diff --git a/docs/component-property-interfacing-auto.md b/docs/component-property-interfacing-auto.md
index f8c7c282..e7779a4e 100644
--- a/docs/component-property-interfacing-auto.md
+++ b/docs/component-property-interfacing-auto.md
@@ -14,6 +14,7 @@ This is based on diff checking of master `A` and instance `A'`, supporting below
 
 - text data
 - color on **single fill**
+- image as src uri on **single image fill**
 - item spacing
 - margin / padding
 
diff --git a/editor/pages/figma/to-react.tsx b/editor/pages/figma/to-react.tsx
index edcad2b9..dc8d93e0 100644
--- a/editor/pages/figma/to-react.tsx
+++ b/editor/pages/figma/to-react.tsx
@@ -17,6 +17,7 @@ import { WidgetTree as WebWidgetTree } from "@web-builder/core";
 import * as core from "@reflect-ui/core";
 import { react as reactconfig } from "@designto/config";
 import { useReflectTargetNode } from "../../query/from-figma";
+import { react_presets } from "@grida/builder-config-preset";
 
 export default function FigmaToReactDemoPage() {
   const [targetSelectionNodeId, setTargetSelectionNodeId] = useState<string>();
@@ -42,9 +43,10 @@ export default function FigmaToReactDemoPage() {
   if (reflect) {
     reflectWidget = tokenize(reflect);
     widgetTree = react.buildReactWidget(reflectWidget);
-    const _stringfiedReactwidget = react.buildReactApp(widgetTree, {
-      template: "cra",
-    });
+    const _stringfiedReactwidget = react.buildReactApp(
+      widgetTree,
+      react_presets.react_default
+    );
 
     reactComponent = _stringfiedReactwidget;
   }
diff --git a/editor/pages/to-code/index.tsx b/editor/pages/to-code/index.tsx
index 295462df..5f21e23f 100644
--- a/editor/pages/to-code/index.tsx
+++ b/editor/pages/to-code/index.tsx
@@ -174,6 +174,10 @@ function get_framework_config(framework: string) {
     case "react-default":
     case "react.default":
       return react_presets.react_default;
+    case "react-with-styled-components":
+      return react_presets.react_with_styled_components;
+    case "react-with-emotion-styled":
+      return react_presets.react_with_emotion_styled;
     case "flutter":
     case "flutter_default":
     case "flutter-default":
diff --git a/packages/builder-config-preset/index.ts b/packages/builder-config-preset/index.ts
index e451da49..8e010de3 100644
--- a/packages/builder-config-preset/index.ts
+++ b/packages/builder-config-preset/index.ts
@@ -1,6 +1,15 @@
 import { config, react } from "@designto/config";
 import { Framework, Language } from "@grida/builder-platform-types";
 
+const _react_component_declaration_style = {
+  exporting_style: {
+    type: "export-named-functional-component",
+    exporting_position: "with-declaration",
+    declaration_syntax_choice: "function",
+    export_declaration_syntax_choice: "export",
+  },
+};
+
 export const react_presets = {
   react_default: <config.ReactFrameworkConfig>{
     framework: Framework.react,
@@ -9,6 +18,7 @@ export const react_presets = {
       type: "styled-components",
       module: "@emotion/styled",
     },
+    component_declaration_style: _react_component_declaration_style,
   },
   react_with_styled_components: <config.ReactFrameworkConfig>{
     framework: Framework.react,
@@ -17,6 +27,7 @@ export const react_presets = {
       type: "styled-components",
       module: "styled-components",
     },
+    component_declaration_style: _react_component_declaration_style,
   },
   react_with_emotion_styled: <config.ReactFrameworkConfig>{
     framework: Framework.react,
@@ -25,6 +36,7 @@ export const react_presets = {
       type: "styled-components",
       module: "@emotion/styled",
     },
+    component_declaration_style: _react_component_declaration_style,
   },
   react_with_css_in_jsx: <config.ReactFrameworkConfig>{
     framework: Framework.react,
@@ -32,12 +44,14 @@ export const react_presets = {
     styling: {
       type: "css-in-jsx",
     },
+    component_declaration_style: _react_component_declaration_style,
   },
   react_with_css: <config.ReactFrameworkConfig>{
     framework: Framework.react,
     language: Language.tsx,
     styling: { type: "css" },
   },
+  component_declaration_style: _react_component_declaration_style,
 };
 
 export const vanilla_presets = {
diff --git a/packages/builder-config/framework-react/react-config-styling.ts b/packages/builder-config/framework-react/react-config-styling.ts
index 3a789000..4eeca13d 100644
--- a/packages/builder-config/framework-react/react-config-styling.ts
+++ b/packages/builder-config/framework-react/react-config-styling.ts
@@ -19,7 +19,7 @@ interface ScssStylingConfig {
   lang: "scss";
 }
 
-type ReactStyledComponentsConfig =
+export type ReactStyledComponentsConfig =
   | ReactTheStyledComponentsConfig
   | ReactEmotionStyledConfig;
 
diff --git a/packages/builder-web-react/react-component-exporting/index.ts b/packages/builder-web-react/react-component-exporting/index.ts
index 549f2165..4b31b678 100644
--- a/packages/builder-web-react/react-component-exporting/index.ts
+++ b/packages/builder-web-react/react-component-exporting/index.ts
@@ -7,27 +7,38 @@ import {
   VariableStatement,
 } from "coli";
 
-export function add_export_keyword_modifier_to_declaration(
+type ExportAssignable = VariableStatement | FunctionDeclaration;
+/**
+ * Makes `function Component` to `export function Compinent`
+ */
+export function add_export_keyword_modifier_to_declaration<
+  O extends ExportAssignable = ExportAssignable
+>(
   declaration: FunctionDeclaration | VariableDeclaration | VariableStatement
-): FunctionDeclaration | VariableStatement {
+): O {
   if (declaration instanceof FunctionDeclaration) {
     declaration.modifiers.export = SyntaxKind.ExportKeyword;
-    return declaration;
+    return declaration as O;
   }
   if (declaration instanceof VariableDeclaration) {
     return new VariableStatement({
       kind: declaration.kind,
       modifiers: { export: SyntaxKind.ExportKeyword },
       declarations: [declaration],
-    });
+    }) as O;
   }
 
   if (declaration instanceof VariableStatement) {
     declaration.modifiers.export = SyntaxKind.ExportKeyword;
-    return declaration;
+    return declaration as O;
   }
 }
 
+/**
+ * Makes `Component` to `export Component`
+ * @param id
+ * @returns
+ */
 export function wrap_with_export_assignment_react_component_identifier(
   id: Identifier
 ) {
diff --git a/packages/builder-web-react/react-module-file/index.ts b/packages/builder-web-react/react-module-file/index.ts
new file mode 100644
index 00000000..76ff02c6
--- /dev/null
+++ b/packages/builder-web-react/react-module-file/index.ts
@@ -0,0 +1,7 @@
+import { SourceFile } from "coli";
+
+export class ReactModuleFile extends SourceFile {
+  constructor({ name, path }: { name: string; path: string }) {
+    super({ name, path });
+  }
+}
diff --git a/packages/builder-web-react/react-styled-component-widget/index.ts b/packages/builder-web-react/react-styled-component-widget/index.ts
index d5defd1f..a35f1af7 100644
--- a/packages/builder-web-react/react-styled-component-widget/index.ts
+++ b/packages/builder-web-react/react-styled-component-widget/index.ts
@@ -26,141 +26,308 @@ import {
   getWidgetStylesConfigMap,
   WidgetStyleConfigMap,
 } from "@web-builder/core/builders";
-import { wrap_with_export_assignment_react_component_identifier } from "../react-component-exporting";
-
-const IMPORT_DEFAULT_STYLED_FROM_EMOTION_STYLED = new Import()
-  .importDefault("styled")
-  .from("@emotion/styled")
-  .make();
-
-const imports = [
-  react_imports.import_react_from_react,
-  IMPORT_DEFAULT_STYLED_FROM_EMOTION_STYLED,
-];
+import {
+  add_export_keyword_modifier_to_declaration,
+  wrap_with_export_assignment_react_component_identifier,
+} from "../react-component-exporting";
+import { react } from "@designto/config";
+import { ReactModuleFile } from "../react-module-file";
+import { StyledComponentDeclaration } from "@web-builder/styled/styled-component-declaration";
+import { SyntaxKind } from "@coli.codes/core-syntax-kind";
+import { InstanceMetaToken } from "@code-features/component/tokens/token-instance";
 
 /**
  * styled components pattern with either emotion or styled-component
  * @todo - this is not fully implemented
- * @param component
+ * @param entry
  * @returns
  */
-export function stringfyReactWidget_STYLED_COMPONENTS(
-  component: WidgetTree
+export function finalizeReactWidget_StyledComponents(
+  entry: WidgetTree,
+  {
+    styling,
+    exporting,
+  }: {
+    styling: react.ReactStyledComponentsConfig;
+    exporting: react.ReactComponentExportingCofnig;
+  }
 ): ReactComponentExportResult {
-  const componentName = component.key.name;
-  const styledComponentNamer = new ScopedVariableNamer(
-    component.key.id,
-    ReservedKeywordPlatformPresets.react
-  );
-  // buildWidgetExportable(component);
-
-  const styledConfigWidgetMap: WidgetStyleConfigMap = getWidgetStylesConfigMap(
-    component,
-    {
-      namer: styledComponentNamer,
-      rename_tag: true /** styled component tag shoule be renamed */,
+  const builder = new ReactStyledComponentsBuilder({ entry, config: styling });
+  return builder.asExportableModule().finalize(exporting);
+}
+
+/**
+ * @deprecated wip
+ * @param param0
+ * @returns
+ */
+export function finalizeReactReusable_StyledComponents__Experimental({
+  tree,
+  components,
+}: {
+  tree;
+  components;
+}) {
+  const hanlde = (token) => {
+    if (token instanceof InstanceMetaToken) {
+      const children = token.master["children"]?.map(hanlde);
+      return {
+        ...token.master,
+        children,
+      };
+    } else {
+      return token;
     }
-  );
+  };
+
+  const token = hanlde(tree);
+  //
+  console.log("reusable", tree, components, token);
+
+  return {
+    code: "wip",
+  };
+}
 
-  function getStyledConfigById(
+class ReactStyledComponentsBuilder {
+  private readonly entry: WidgetTree;
+  private readonly widgetName: string;
+  private readonly styledConfigWidgetMap: WidgetStyleConfigMap;
+  private readonly namer: ScopedVariableNamer;
+  readonly config: react.ReactStyledComponentsConfig;
+
+  constructor({
+    entry,
+    config,
+  }: {
+    entry: WidgetTree;
+    config: react.ReactStyledComponentsConfig;
+  }) {
+    this.entry = entry;
+    this.widgetName = entry.key.name;
+    this.namer = new ScopedVariableNamer(
+      entry.key.id,
+      ReservedKeywordPlatformPresets.react
+    );
+    this.styledConfigWidgetMap = getWidgetStylesConfigMap(entry, {
+      namer: this.namer,
+      rename_tag: true /** styled component tag shoule be renamed */,
+    });
+    this.config = config;
+  }
+
+  private styledConfig(
     id: string
   ): StyledComponentJSXElementConfig | NoStyleJSXElementConfig {
-    return styledConfigWidgetMap.get(id);
+    return this.styledConfigWidgetMap.get(id);
   }
 
-  function buildComponentFunction(): FunctionDeclaration {
-    function jsxBuilder(widget: WidgetTree) {
-      const _jsxcfg = widget.jsxConfig();
-      if (_jsxcfg.type === "static-tree") {
-        return _jsxcfg.tree;
-      }
-
-      const children = widget.children?.map((comp) => {
-        const config = getStyledConfigById(comp.key.id);
-        if (comp instanceof TextChildWidget) {
-          return buildTextChildJsx(comp, config);
-        }
-
-        const childrenJSX = comp.children?.map((cc) => jsxBuilder(cc));
-        return new JSXElement({
-          openingElement: new JSXOpeningElement(config.tag, {
-            attributes: config.attributes,
-          }),
-          closingElement: new JSXClosingElement(config.tag),
-          children: childrenJSX,
-        });
-      });
+  private jsxBuilder(widget: WidgetTree) {
+    const _jsxcfg = widget.jsxConfig();
+    if (_jsxcfg.type === "static-tree") {
+      return _jsxcfg.tree;
+    }
 
-      const config = getStyledConfigById(widget.key.id);
-      if (widget instanceof TextChildWidget) {
-        return buildTextChildJsx(widget, config);
+    const children = widget.children?.map((comp) => {
+      const config = this.styledConfig(comp.key.id);
+      if (comp instanceof TextChildWidget) {
+        return buildTextChildJsx(comp, config);
       }
+
+      const childrenJSX = comp.children?.map((cc) => this.jsxBuilder(cc));
       return new JSXElement({
         openingElement: new JSXOpeningElement(config.tag, {
           attributes: config.attributes,
         }),
         closingElement: new JSXClosingElement(config.tag),
-        children: children,
+        children: childrenJSX,
       });
-    }
+    });
 
-    let jsxTree = jsxBuilder(component);
-    const componentFunction = new FunctionDeclaration(componentName, {
-      body: new BlockStatement(new Return(jsxTree)),
+    const config = this.styledConfig(widget.key.id);
+    if (widget instanceof TextChildWidget) {
+      return buildTextChildJsx(widget, config);
+    }
+    return new JSXElement({
+      openingElement: new JSXOpeningElement(config.tag, {
+        attributes: config.attributes,
+      }),
+      closingElement: new JSXClosingElement(config.tag),
+      children: children,
     });
+  }
 
-    return componentFunction;
+  partImports() {
+    return [this.partImportReact(), this.partImportStyled()];
   }
 
-  const componentFunction = buildComponentFunction();
-
-  const styledComponentDeclarations = Array.from(styledConfigWidgetMap.keys())
-    .map((k) => {
-      return (styledConfigWidgetMap.get(k) as StyledComponentJSXElementConfig)
-        .styledComponent;
-    })
-    .filter((s) => s);
-
-  const file = buildReactComponentFile({
-    componentName: componentName,
-    imports: imports,
-    component: componentFunction,
-    styleVariables: styledComponentDeclarations,
-  });
-
-  const final = stringfy(file.blocks, {
-    language: "tsx",
-    // formatter: {
-    //   parser: "typescript",
-    //   use: "pritter",
-    // },
-  });
+  partImportStyled() {
+    switch (this.config.module) {
+      case "@emotion/styled":
+        return new Import()
+          .importDefault("styled")
+          .from("@emotion/styled")
+          .make();
+      case "styled-components":
+        return new Import()
+          .importDefault("styled")
+          .from("styled-components")
+          .make();
+    }
+  }
 
-  return {
-    code: final,
-    name: componentFunction.id.name,
-    dependencies: ["@emotion/styled", "react"],
-  };
+  partImportReact() {
+    return react_imports.import_react_from_react;
+  }
+
+  partBody(): BlockStatement {
+    let jsxTree = this.jsxBuilder(this.entry);
+    return new BlockStatement(new Return(jsxTree));
+  }
+
+  partDeclarations() {
+    return Array.from(this.styledConfigWidgetMap.keys())
+      .map((k) => {
+        return (this.styledConfigWidgetMap.get(
+          k
+        ) as StyledComponentJSXElementConfig).styledComponent;
+      })
+      .filter((s) => s);
+  }
+
+  asExportableModule() {
+    const body = this.partBody();
+    const imports = this.partImports();
+    const styled_declarations = this.partDeclarations();
+    return new ReactStyledComponentWidgetModuleExportable(
+      this.widgetName,
+      {
+        body,
+        imports,
+        declarations: styled_declarations,
+      },
+      {
+        dependencies: ["react", this.config.module],
+      }
+    );
+  }
 }
 
-function buildReactComponentFile(p: {
-  componentName: string;
-  imports: Array<ImportDeclaration>;
-  component: FunctionDeclaration;
-  styleVariables: Array<VariableDeclaration>;
-}): SourceFile {
-  const { imports, componentName, component, styleVariables } = p;
-  const file = new SourceFile({
-    name: `${componentName}.tsx`,
-    path: "src/components",
-  });
-
-  file.imports(...imports);
-  file.declare(component);
-  file.declare(...styleVariables);
-  file.export(
-    wrap_with_export_assignment_react_component_identifier(component.id)
-  );
-
-  return file;
+class ReactStyledComponentWidgetModuleExportable {
+  readonly name: string;
+  readonly dependencies: string[];
+  readonly body: BlockStatement;
+  readonly imports: ImportDeclaration[];
+  readonly declarations: StyledComponentDeclaration[];
+
+  constructor(
+    name,
+    {
+      body,
+      imports,
+      declarations,
+    }: {
+      body: BlockStatement;
+      imports: ImportDeclaration[];
+      declarations: StyledComponentDeclaration[];
+    },
+    {
+      dependencies = [],
+    }: {
+      dependencies?: string[];
+    }
+  ) {
+    this.name = name;
+    this.body = body;
+    this.imports = imports;
+    this.declarations = declarations;
+
+    this.dependencies = dependencies;
+  }
+
+  asFile({ exporting }: { exporting: react.ReactComponentExportingCofnig }) {
+    const file = new ReactModuleFile({
+      name: `${this.name}.tsx`,
+      path: "src/components",
+    });
+    file.imports(...this.imports);
+
+    console.log("exporting", exporting);
+    switch (exporting.type) {
+      case "export-default-anonymous-functional-component": {
+        // exporting.declaration_syntax_choice;
+        // exporting.export_declaration_syntax_choice;
+        // exporting.exporting_position;
+
+        const export_default_anaonymous_functional_component = new FunctionDeclaration(
+          undefined,
+          {
+            body: this.body,
+            modifiers: {
+              default: SyntaxKind.DefaultKeyword,
+              export: SyntaxKind.ExportKeyword,
+            },
+          }
+        );
+        file.declare(export_default_anaonymous_functional_component);
+        file.declare(...this.declarations);
+        break;
+      }
+      case "export-named-functional-component": {
+        // exporting.declaration_syntax_choice;
+        // exporting.export_declaration_syntax_choice;
+
+        const named_function_declaration = new FunctionDeclaration(this.name, {
+          body: this.body,
+        });
+
+        switch (exporting.exporting_position) {
+          case "after-declaration":
+            file.declare(named_function_declaration);
+            file.export(
+              wrap_with_export_assignment_react_component_identifier(
+                named_function_declaration.id
+              )
+            );
+            file.declare(...this.declarations);
+            break;
+          case "end-of-file":
+            file.declare(named_function_declaration);
+            file.declare(...this.declarations);
+            file.export(
+              wrap_with_export_assignment_react_component_identifier(
+                named_function_declaration.id
+              )
+            );
+            break;
+          case "with-declaration":
+            const _exported_named_function_declaration = add_export_keyword_modifier_to_declaration<FunctionDeclaration>(
+              named_function_declaration
+            );
+            file.declare(_exported_named_function_declaration);
+            file.declare(...this.declarations);
+            break;
+        }
+        break;
+      }
+      case "export-named-class-component":
+        break;
+      case "export-anonymous-class-component":
+        throw new Error("Class component not supported");
+    }
+
+    return file;
+  }
+
+  finalize(config: react.ReactComponentExportingCofnig) {
+    const file = this.asFile({ exporting: config });
+    const final = stringfy(file.blocks, {
+      language: "tsx",
+    });
+    return {
+      code: final,
+      name: this.name,
+      dependencies: this.dependencies,
+    };
+  }
 }
diff --git a/packages/coli b/packages/coli
index 519de9d7..efc1ab6b 160000
--- a/packages/coli
+++ b/packages/coli
@@ -1 +1 @@
-Subproject commit 519de9d7ebe17cd7b5d0f97d966ee5f239434edd
+Subproject commit efc1ab6b7ec6a55c68f70f029d3e8e306336a5c2
diff --git a/packages/design-sdk b/packages/design-sdk
index a6ad2b5d..0153bd7d 160000
--- a/packages/design-sdk
+++ b/packages/design-sdk
@@ -1 +1 @@
-Subproject commit a6ad2b5d60e1ee62fa2d79502ebde40220bb5d0f
+Subproject commit 0153bd7df6857ac65643fb0f2e4f6caadfb4a46d
diff --git a/packages/designto-code/universal/design-to-code.ts b/packages/designto-code/universal/design-to-code.ts
index e2539ce2..48a96fe2 100644
--- a/packages/designto-code/universal/design-to-code.ts
+++ b/packages/designto-code/universal/design-to-code.ts
@@ -1,4 +1,4 @@
-import { input, output, config } from "../proc";
+import { input, output, config, build } from "../proc";
 import { tokenize, wrap } from "@designto/token";
 import { Widget } from "@reflect-ui/core";
 import * as toreact from "@designto/react";
@@ -53,18 +53,26 @@ export async function designToCode({
       return false;
     };
   }
-  const token = tokenize(input.entry, config);
+  const vanilla_token = tokenize(input.entry, config);
 
   // post token processing for componentization
+  let reusable_widget_tree;
   if (!build_config.disable_components) {
-    const reusableTokensTree = reusable({
-      token,
-      repository: input.repository,
-    });
-    // TODO: WIP
+    try {
+      reusable_widget_tree = reusable({
+        entry: vanilla_token,
+        repository: input.repository,
+      });
+      // TODO: WIP
+    } catch (_) {
+      console.error(_);
+    }
   }
 
-  const _tokenized_widget_input = { widget: token };
+  const _tokenized_widget_input = {
+    widget: vanilla_token,
+    reusable_widget_tree: reusable_widget_tree,
+  };
   switch (framework.framework) {
     case "vanilla":
       return designToVanilla({
@@ -104,7 +112,7 @@ export async function designToReact({
   build_config,
   asset_config,
 }: {
-  input: { widget: Widget };
+  input: { widget: Widget; reusable_widget_tree? };
   react_config: config.ReactFrameworkConfig;
   /**
    * TODO: pass this to tokenizer +@
@@ -112,26 +120,36 @@ export async function designToReact({
   build_config: config.BuildConfiguration;
   asset_config?: AssetsConfig;
 }): Promise<output.ICodeOutput> {
-  const reactwidget = toreact.buildReactWidget(input.widget);
-
-  const res = toreact.buildReactApp(reactwidget, {
-    template: "cra",
-  });
-
-  // ------------------------------------------------------------------------
-  // finilize temporary assets
-  // this should be placed somewhere else
-  if (asset_config?.asset_repository && !asset_config.skip_asset_replacement) {
-    const assets = await fetch_all_assets(asset_config.asset_repository);
-    res.code.raw = dangerous_temporary_asset_replacer(res.code.raw, assets);
-    res.scaffold.raw = dangerous_temporary_asset_replacer(
-      res.scaffold.raw,
-      assets
-    );
+  if (
+    build_config.disable_components ||
+    // automatically fallbacks if no valid data was passed
+    !input.reusable_widget_tree
+  ) {
+    const reactwidget = toreact.buildReactWidget(input.widget);
+
+    const res = toreact.buildReactApp(reactwidget, react_config);
+    // ------------------------------------------------------------------------
+    // finilize temporary assets
+    // this should be placed somewhere else
+    if (
+      asset_config?.asset_repository &&
+      !asset_config.skip_asset_replacement
+    ) {
+      const assets = await fetch_all_assets(asset_config.asset_repository);
+      res.code.raw = dangerous_temporary_asset_replacer(res.code.raw, assets);
+      res.scaffold.raw = dangerous_temporary_asset_replacer(
+        res.scaffold.raw,
+        assets
+      );
+    }
+    // ------------------------------------------------------------------------
+
+    return res;
+  } else {
+    return toreact.buildReusableReactApp__Experimental(
+      input.reusable_widget_tree
+    ) as any;
   }
-  // ------------------------------------------------------------------------
-
-  return res;
 }
 
 export async function designToFlutter({
diff --git a/packages/designto-flutter/length/index.ts b/packages/designto-flutter/length/index.ts
index 02ec5f3c..0a477d87 100644
--- a/packages/designto-flutter/length/index.ts
+++ b/packages/designto-flutter/length/index.ts
@@ -1,4 +1,4 @@
 // export * from "./calc";
 export * from "./length";
 export * from "./multiple";
-export * from "./dimension-multiple";
+export * from "./letter-spacing";
diff --git a/packages/designto-flutter/length/dimension-multiple.ts b/packages/designto-flutter/length/letter-spacing.ts
similarity index 50%
rename from packages/designto-flutter/length/dimension-multiple.ts
rename to packages/designto-flutter/length/letter-spacing.ts
index 7786bde6..d91e74fe 100644
--- a/packages/designto-flutter/length/dimension-multiple.ts
+++ b/packages/designto-flutter/length/letter-spacing.ts
@@ -1,10 +1,7 @@
-/**
- * FIXME: To be merged with multiple in the future
- */
-import { Dimension } from "@reflect-ui/core";
+import { LetterSpacing } from "@design-sdk/figma-types";
 import { rd } from "../_utils";
 
-export function multipleToDimension(origin: number, target: Dimension) {
+export function letterSpacing(origin: number, target: LetterSpacing) {
   if (target.unit === "PIXELS") {
     return rd(target.value / origin);
   }
@@ -12,5 +9,4 @@ export function multipleToDimension(origin: number, target: Dimension) {
   if (target.unit === "PERCENT") {
     return rd(origin * (target.value / 100));
   }
-  return 0;
 }
diff --git a/packages/designto-flutter/length/multiple.ts b/packages/designto-flutter/length/multiple.ts
index d001be4e..7fdb2d6f 100644
--- a/packages/designto-flutter/length/multiple.ts
+++ b/packages/designto-flutter/length/multiple.ts
@@ -1,4 +1,3 @@
-import * as flutter from "@flutter-builder/flutter";
 import { DimensionLength } from "@reflect-ui/core";
 
 export function multiple(origin: number, target: DimensionLength) {
diff --git a/packages/designto-flutter/painting/painting-text-style.ts b/packages/designto-flutter/painting/painting-text-style.ts
index b679c7b8..5b5610c8 100644
--- a/packages/designto-flutter/painting/painting-text-style.ts
+++ b/packages/designto-flutter/painting/painting-text-style.ts
@@ -4,7 +4,7 @@ import { textDecoration } from "./painting-text-decoration";
 import { fontStyle } from "./painting-font-style";
 import * as dartui from "../dart-ui";
 import { rd } from "../_utils";
-import { multiple, multipleToDimension } from "../length";
+import * as length from "../length";
 
 export function textStyle(style: ITextStyle): flutter.TextStyle {
   const { fontFamily, letterSpacing } = style;
@@ -16,8 +16,8 @@ export function textStyle(style: ITextStyle): flutter.TextStyle {
     fontFamily: fontFamily,
     color: dartui.color(style.color),
     fontStyle: fontStyle(style.fontStyle),
-    letterSpacing: multipleToDimension(style.fontSize, letterSpacing),
-    height: multiple(style.fontSize, style.lineHeight),
+    letterSpacing: length.letterSpacing(style.fontSize, letterSpacing),
+    height: length.multiple(style.fontSize, style.lineHeight),
     decoration: decoration,
   });
 }
diff --git a/packages/designto-flutter/tokens-to-flutter-widget/index.ts b/packages/designto-flutter/tokens-to-flutter-widget/index.ts
index a488d2c7..004793af 100644
--- a/packages/designto-flutter/tokens-to-flutter-widget/index.ts
+++ b/packages/designto-flutter/tokens-to-flutter-widget/index.ts
@@ -16,7 +16,7 @@ import {
 import { rd } from "../_utils";
 
 export function buildFlutterWidgetFromTokens(
-  widget: core.Widget
+  widget: core.DefaultStyleWidget
 ): flutter.Widget {
   const composed = compose(widget, {
     is_root: true,
@@ -29,14 +29,19 @@ export function buildFlutterWidgetFromTokens(
   return composed;
 }
 
-function compose(widget: core.Widget, context: { is_root: boolean }) {
-  const handleChildren = (children: core.Widget[]): flutter.Widget[] => {
+function compose(
+  widget: core.DefaultStyleWidget,
+  context: { is_root: boolean }
+) {
+  const handleChildren = (
+    children: core.DefaultStyleWidget[]
+  ): flutter.Widget[] => {
     return children?.map((c) => {
       return handleChild(c);
     });
   };
 
-  const handleChild = (child: core.Widget): flutter.Widget => {
+  const handleChild = (child: core.DefaultStyleWidget): flutter.Widget => {
     return compose(child, { ...context, is_root: false });
   };
 
@@ -191,7 +196,7 @@ function compose(widget: core.Widget, context: { is_root: boolean }) {
     thisFlutterWidget = handleChild(widget.child);
   }
   // ----- endregion clip path ------
-  else if (widget instanceof core.Text) {
+  else if (widget instanceof core.RenderedText) {
     const _escaped_dart_string = escapeDartString(widget.data);
     thisFlutterWidget = new flutter.Text(_escaped_dart_string, {
       ...widget,
@@ -347,7 +352,7 @@ function compose(widget: core.Widget, context: { is_root: boolean }) {
  * ```
  */
 function compose_item_spacing_children(
-  children: core.Widget[],
+  children: core.DefaultStyleWidget[],
   args: {
     itemspacing: number;
     axis: Axis;
@@ -371,7 +376,7 @@ function compose_item_spacing_children(
  * ```
  */
 function compoes_children_with_injection(
-  children: core.Widget[],
+  children: core.DefaultStyleWidget[],
   between?: flutter.Widget
 ): flutter.Widget[] {
   const composedchildren = children.map((c) => {
diff --git a/packages/designto-react/app/index.ts b/packages/designto-react/app/index.ts
index 98183081..0454dc30 100644
--- a/packages/designto-react/app/index.ts
+++ b/packages/designto-react/app/index.ts
@@ -2,26 +2,60 @@ import { Widget } from "@reflect-ui/core";
 import { buildWebWidgetFromTokens } from "@designto/web/tokens-to-web-widget";
 import {
   WidgetTree,
-  stringfyReactWidget_STYLED_COMPONENTS,
+  finalizeReactWidget_StyledComponents,
+  finalizeReactReusable_StyledComponents__Experimental,
 } from "@web-builder/react";
-import { react as config } from "@designto/config";
-
+import { react as config, react } from "@designto/config";
+import assert from "assert";
 export function buildReactApp(
-  widget: WidgetTree,
-  options: { template: "cra" | "nextjs" }
+  entry: WidgetTree,
+  config: react.ReactFrameworkConfig
 ): config.ReactComponentOutput {
-  const res = stringfyReactWidget_STYLED_COMPONENTS(widget);
-  return {
-    id: widget.key.id,
-    name: widget.key.name,
-    code: { raw: res.code },
-    scaffold: { raw: res.code },
-  };
+  switch (config.styling.type) {
+    case "styled-components": {
+      const res = finalizeReactWidget_StyledComponents(entry, {
+        styling: config.styling,
+        exporting: config.component_declaration_style.exporting_style,
+      });
+      return {
+        id: entry.key.id,
+        name: entry.key.name,
+        code: { raw: res.code },
+        scaffold: { raw: res.code },
+      };
+    }
+    case "css":
+    case "css-in-jsx":
+      throw new Error(`${config.styling.type} not supported yet`);
+      break;
+  }
 }
 
 export function buildReactWidget(widget: Widget) {
-  if (!widget) {
-    throw "A valid reflect widget manifest should be passed as an input. none was passed.";
-  }
+  assert(
+    widget,
+    "A valid reflect widget manifest should be passed as an input. none was passed."
+  );
+
   return buildWebWidgetFromTokens(widget);
 }
+
+export function buildReusableReactApp__Experimental({
+  tree,
+  components,
+}: {
+  tree;
+  components;
+}) {
+  const res = finalizeReactReusable_StyledComponents__Experimental({
+    tree,
+    components,
+  });
+
+  return {
+    id: tree.key.id,
+    name: tree.key.name,
+    code: { raw: res.code }, //res.code
+    scaffold: { raw: res.code }, //res.code
+  };
+}
diff --git a/packages/designto-token/main.ts b/packages/designto-token/main.ts
index 55e43745..aecc5e19 100644
--- a/packages/designto-token/main.ts
+++ b/packages/designto-token/main.ts
@@ -259,11 +259,9 @@ function handle_by_types(
   config: TokenizerConfig
 ): Widget {
   let tokenizedTarget: Widget;
-  switch (node.type as string) {
+  switch (node.type) {
     case nodes.ReflectSceneNodeType.rectangle:
-      tokenizedTarget = tokenizeContainer.fromRectangle(
-        node as nodes.ReflectRectangleNode
-      );
+      tokenizedTarget = tokenizeContainer.fromRectangle(node);
       break;
 
     case nodes.ReflectSceneNodeType.text:
@@ -271,10 +269,9 @@ function handle_by_types(
       break;
 
     case nodes.ReflectSceneNodeType.frame:
-      const _frame = node as nodes.ReflectFrameNode;
       tokenizedTarget = tokenizeLayout.fromFrame(
-        _frame,
-        _frame.children,
+        node,
+        node.children,
         {
           is_root: node.isRoot,
         },
@@ -283,49 +280,43 @@ function handle_by_types(
       break;
 
     case nodes.ReflectSceneNodeType.vector:
-      const _vector = node as nodes.ReflectVectorNode;
-      tokenizedTarget = tokenizeVector.fromVector(_vector);
+      tokenizedTarget = tokenizeVector.fromVector(node);
       break;
 
-    case nodes.ReflectSceneNodeType.star:
-      tokenizedTarget = tokenizeVector.fromStar();
-      break;
+    // case nodes.ReflectSceneNodeType.star:
+    //   tokenizedTarget = tokenizeVector.fromStar();
+    //   break;
 
-    case nodes.ReflectSceneNodeType.poligon:
-      tokenizedTarget = tokenizeVector.fromPoligon();
-      break;
+    // case nodes.ReflectSceneNodeType.poligon:
+    //   tokenizedTarget = tokenizeVector.fromPoligon();
+    //   break;
 
     case nodes.ReflectSceneNodeType.group:
-      const _group = node as nodes.ReflectGroupNode;
       tokenizedTarget = tokenizeLayout.fromGroup(
-        _group,
-        _group.children,
+        node,
+        node.children,
         undefined,
         config
       );
       break;
 
     case nodes.ReflectSceneNodeType.ellipse:
-      const _ellipse = node as nodes.ReflectEllipseNode;
-      tokenizedTarget = tokenizeContainer.fromEllipse(_ellipse);
+      tokenizedTarget = tokenizeContainer.fromEllipse(node);
       break;
 
     case nodes.ReflectSceneNodeType.boolean_operation:
-      const _bool_op = node as nodes.ReflectBooleanOperationNode;
-      tokenizedTarget = tokenizeGraphics.fromBooleanOperation(_bool_op);
+      tokenizedTarget = tokenizeGraphics.fromBooleanOperation(node);
       break;
 
     case nodes.ReflectSceneNodeType.line:
       // FIXME: this is a temporary fallback. line should be handled with unique handler. (using rect's handler instead.)
-      tokenizedTarget = tokenizeContainer.fromRectangle(
-        node as nodes.ReflectRectangleNode
-      );
+      tokenizedTarget = tokenizeContainer.fromRectangle(node as any);
       break;
     // const _line = node as nodes.ReflectLineNode;
     // tokenizedTarget = tokenizeDivider.fromLine(_line);
 
     default:
-      console.error(`${node.type} is not yet handled by "@designto/token"`);
+      console.error(`${node["type"]} is not yet handled by "@designto/token"`);
       tokenizedTarget = tokenizeGraphics.fromAnyNode(node); // this is expensive
       tokenizedTarget.key.originName = `Fallbacked to image from - "${tokenizedTarget.key.originName}". this is a bug.`;
       break;
diff --git a/packages/designto-token/token-container/index.ts b/packages/designto-token/token-container/index.ts
index eb693b18..522a2dbd 100644
--- a/packages/designto-token/token-container/index.ts
+++ b/packages/designto-token/token-container/index.ts
@@ -7,7 +7,6 @@ import { tokenizeBorder } from "../token-border";
 function fromRectangle(rect: nodes.ReflectRectangleNode): core.Container {
   const container = new core.Container({
     key: keyFromNode(rect),
-    children: undefined,
     width: rect.width,
     height: rect.height,
     borderRadius: rect.cornerRadius,
@@ -25,7 +24,6 @@ function fromRectangle(rect: nodes.ReflectRectangleNode): core.Container {
 function fromEllipse(ellipse: nodes.ReflectEllipseNode): core.Container {
   const container = new core.Container({
     key: keyFromNode(ellipse),
-    children: undefined,
     width: ellipse.width,
     height: ellipse.height,
     boxShadow: ellipse.primaryShadow,
diff --git a/packages/designto-token/token-layout/index.ts b/packages/designto-token/token-layout/index.ts
index e8a99d08..e4c1713c 100644
--- a/packages/designto-token/token-layout/index.ts
+++ b/packages/designto-token/token-layout/index.ts
@@ -22,6 +22,7 @@ import {
   ClipRRect,
   Blurred,
   Rotation,
+  IWHStyleWidget,
 } from "@reflect-ui/core";
 import { Background } from "@reflect-ui/core/lib/background";
 import { IFlexManifest } from "@reflect-ui/core/lib/flex/flex.manifest";
@@ -250,10 +251,11 @@ function stackChild({
     bottom: undefined,
   };
 
-  const unwrapped = unwrappedChild(child);
   /// this is a snapshot of a w, h. under logic will remove or preserve each property for constraint assignment.
   /// use unswrapped child - since the property we're trying to get is wh
-  const _unwrappedChild = unwrappedChild(child);
+  const _unwrappedChild: IWHStyleWidget = unwrappedChild(
+    child
+  ) as IWHStyleWidget;
   const wh = {
     width: _unwrappedChild.width,
     height: _unwrappedChild.height,
diff --git a/packages/designto-token/token-text/index.ts b/packages/designto-token/token-text/index.ts
index f82e66a0..1af0f391 100644
--- a/packages/designto-token/token-text/index.ts
+++ b/packages/designto-token/token-text/index.ts
@@ -1,5 +1,5 @@
 import { nodes } from "@design-sdk/core";
-import { Text, TextStyle } from "@reflect-ui/core";
+import { RenderedText, TextStyle } from "@reflect-ui/core";
 import { keyFromNode } from "../key";
 
 /**
@@ -7,7 +7,7 @@ import { keyFromNode } from "../key";
  * @param node
  * @returns
  */
-export function fromText(node: nodes.ReflectTextNode): Text {
+export function fromText(node: nodes.ReflectTextNode): RenderedText {
   // 1. check if text is rich text
   // if () //
 
@@ -35,7 +35,7 @@ export function fromText(node: nodes.ReflectTextNode): Text {
   }
   // -------------------------------
 
-  return new Text({
+  return new RenderedText({
     key: keyFromNode(node),
     data: node.data,
     textAlign: node.textAlign,
diff --git a/packages/designto-web/tokens-to-web-widget/index.ts b/packages/designto-web/tokens-to-web-widget/index.ts
index 38b022a2..8cbbe537 100644
--- a/packages/designto-web/tokens-to-web-widget/index.ts
+++ b/packages/designto-web/tokens-to-web-widget/index.ts
@@ -14,6 +14,7 @@ import { compose_wrapped_with_positioned } from "./compose-wrapped-with-position
 import { compose_wrapped_with_clip_stretched } from "./compose-wrapped-with-stretched";
 import { compose_wrapped_with_sized_box } from "./compose-wrapped-with-sized-box";
 import { compose_wrapped_with_overflow_box } from "./compose-wrapped-with-overflow-box";
+import { IWHStyleWidget } from "@reflect-ui/core";
 
 export function buildWebWidgetFromTokens(widget: core.Widget): WidgetTree {
   const composed = compose(widget, {
@@ -44,8 +45,8 @@ function compose(widget: core.Widget, context: { is_root: boolean }) {
   };
 
   const _remove_width_height_if_root_wh = {
-    width: context.is_root ? undefined : widget.width,
-    height: context.is_root ? undefined : widget.height,
+    width: context.is_root ? undefined : (widget as IWHStyleWidget).width,
+    height: context.is_root ? undefined : (widget as IWHStyleWidget).height,
   };
 
   const default_props_for_layout = {
@@ -133,7 +134,7 @@ function compose(widget: core.Widget, context: { is_root: boolean }) {
     });
   }
   // ----- endregion clip path ------
-  else if (widget instanceof core.Text) {
+  else if (widget instanceof core.RenderedText) {
     thisWebWidget = new web.Text({
       ...widget,
       textStyle:
diff --git a/packages/reflect-core b/packages/reflect-core
index 928563c6..e21ba881 160000
--- a/packages/reflect-core
+++ b/packages/reflect-core
@@ -1 +1 @@
-Subproject commit 928563c608a903f0e589d81d7818a29872b988d8
+Subproject commit e21ba88193a38fbb1197c983f45b3ed199e22a30
diff --git a/packages/reflect-detection b/packages/reflect-detection
index a586b48a..e9529d2a 160000
--- a/packages/reflect-detection
+++ b/packages/reflect-detection
@@ -1 +1 @@
-Subproject commit a586b48a15263a83a0b69b0bd8e620d589a43ccf
+Subproject commit e9529d2ad7bbade587dbe38a15b5ba02e665a9da
diff --git a/packages/support-components/main.ts b/packages/support-components/main.ts
index 4907540a..f3af4aa0 100644
--- a/packages/support-components/main.ts
+++ b/packages/support-components/main.ts
@@ -1,68 +1,97 @@
-import { NodeRepository } from "@design-sdk/figma";
+import { ComponentNode, InstanceNode, NodeRepository } from "@design-sdk/figma";
 import { unwrappedChild } from "@designto/token/wrappings";
-import { Widget, WidgetKey } from "@reflect-ui/core";
+import {
+  RenderObjectWidget,
+  MultiChildRenderObjectWidget,
+} from "@reflect-ui/core";
 import { ComponentsUsageRepository } from "./components-usage-repository";
 import { make_instance_component_meta } from "./define";
+import { tokenizeComponent } from "./tokenize-component";
 
 /**
  * make widget tree with reusable components
  */
 export function reusable({
   repository,
-  token,
+  entry,
 }: {
   repository: NodeRepository;
   /**
    * tokenized widget tree (entry) from previous result
    */
-  token: Widget;
+  entry: RenderObjectWidget;
 }): ReusableWidgetResult {
   const instances = repository.nodes.filter(
     (node) => node.origin === "INSTANCE"
   );
   const component_use_repository = make_component_use_repository({
-    instances: instances,
+    instances: instances as any,
     components: repository.components,
   });
-  console.log("reusable", {
-    repository,
-    token,
-    component_use_repository,
-    instances,
-  });
 
-  const _handle = (widget: Widget) => {
-    widget = unwrappedChild(widget); // unwrap child to reach original input.
-    const { key, _type: _widget_type } = widget;
-    const node = repository.get(key.id);
-    if (node.origin === "INSTANCE") {
-      const instanciation = component_use_repository.getUsageOf(node.id);
-      console.log("instanciation", instanciation);
-      return instanciation;
-    } else {
-      let child;
-      let children;
-      if (Array.isArray(widget.children) && widget.children.length > 0) {
-        children = widget.children.map(_handle);
-      } else if ("child" in widget) {
-        child = _handle((widget as any).child);
-      }
+  const components = component_use_repository.components.map((component) => {
+    const componentNode = component.body as ComponentNode;
+    const componentTokenizedBody = tokenizeComponent.fromComponentNode(
+      componentNode
+    );
 
-      const tree = {
-        ...widget,
-        children: children,
-        child: child,
-      };
-      return tree;
-    }
-  };
+    // .body = componentTokenizedBody;
+    return {
+      ...component,
+      body: componentTokenizedBody,
+    };
+  });
 
   return {
     // asumming root is always a multi child widget
-    tree: _handle(token),
+    tree: composeInstanciationTree(entry, repository, component_use_repository),
+    components: components,
   };
 }
 
+const composeInstanciationTree = (
+  widget: RenderObjectWidget,
+  repository: NodeRepository,
+  componentsUsageRepository: ComponentsUsageRepository
+) => {
+  widget = unwrappedChild(widget); // unwrap child to reach original input.
+  const { key, _type: _widget_type } = widget;
+  const node = repository.get(key.id);
+  if (node.origin === "INSTANCE") {
+    const instanciation = componentsUsageRepository.getUsageOf(node.id);
+    return instanciation;
+  } else {
+    let child;
+    let children;
+    if (
+      widget instanceof MultiChildRenderObjectWidget &&
+      widget.children.length > 0
+    ) {
+      children = widget.children.map((c) => {
+        return composeInstanciationTree(
+          c,
+          repository,
+          componentsUsageRepository
+        );
+      });
+    } else if ("child" in widget) {
+      child = composeInstanciationTree(
+        (widget as any).child,
+        repository,
+        componentsUsageRepository
+      );
+    }
+
+    const tree = {
+      ...widget,
+      children: children,
+      child: child,
+    };
+
+    return tree;
+  }
+};
+
 /**
  * make full component use repository based on all used instances & component map.
  * @returns
@@ -71,8 +100,8 @@ function make_component_use_repository({
   components,
   instances,
 }: {
-  components;
-  instances;
+  components: ComponentNode[];
+  instances: InstanceNode[];
 }) {
   const make_meta = (instance) => {
     return make_instance_component_meta({
@@ -82,23 +111,20 @@ function make_component_use_repository({
   };
 
   let component_use_repository = new ComponentsUsageRepository({
-    components: components,
+    components: [],
     usage: {},
   });
+
   for (const instance of instances) {
     component_use_repository = component_use_repository.merge(
       make_meta(instance)
     );
   }
 
-  console.log("make_component_use_repository", {
-    components,
-    instances,
-    component_use_repository,
-  });
   return component_use_repository;
 }
 
 interface ReusableWidgetResult {
   tree;
+  components;
 }
diff --git a/packages/support-components/proxied-value/index.ts b/packages/support-components/proxied-value/index.ts
deleted file mode 100644
index fca215d3..00000000
--- a/packages/support-components/proxied-value/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export type ProxiedValue<T> = T | (() => T) | AccessorValue;
-
-/**
- * e.g. in `<p>{props.text}</p>`, `props.text` is a AccessorValue
- */
-interface AccessorValue {
-  accessor: string;
-}
diff --git a/packages/support-components/proxied-widget/text/index.ts b/packages/support-components/proxied-widget/text/index.ts
deleted file mode 100644
index 3bfba082..00000000
--- a/packages/support-components/proxied-widget/text/index.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Text } from "@reflect-ui/core";
-
-// export class ProxyText
-//   extends Text
-//   implements
-//     Modify<
-//       Text,
-//       {
-//         data: string | number;
-//       }
-//     > {
-//   data: string | number;
-// }
-
-// type Modify<T, R> = Omit<T, keyof R> & R;
diff --git a/packages/support-components/proxied/README.md b/packages/support-components/proxied/README.md
new file mode 100644
index 00000000..7a709da6
--- /dev/null
+++ b/packages/support-components/proxied/README.md
@@ -0,0 +1,3 @@
+# Proxy values definitions for Reflect UI Core elements.
+
+See [@reflect-ui/core](https://github.com/reflect-ui/reflect-core-ts/tree/main/packages/reflect-core)
diff --git a/packages/support-components/proxied/index.ts b/packages/support-components/proxied/index.ts
new file mode 100644
index 00000000..e20cd3f8
--- /dev/null
+++ b/packages/support-components/proxied/index.ts
@@ -0,0 +1 @@
+export * from "./text";
diff --git a/packages/support-components/proxied/text/index.ts b/packages/support-components/proxied/text/index.ts
new file mode 100644
index 00000000..348a5a10
--- /dev/null
+++ b/packages/support-components/proxied/text/index.ts
@@ -0,0 +1,2 @@
+export * from "./text";
+export * from "./text-data";
diff --git a/packages/support-components/proxied/text/text-data.ts b/packages/support-components/proxied/text/text-data.ts
new file mode 100644
index 00000000..974e6e46
--- /dev/null
+++ b/packages/support-components/proxied/text/text-data.ts
@@ -0,0 +1,11 @@
+import { Proxied } from "@reflect-ui/core/lib/_utility-types";
+import { ArgumentProxy, ParameterProxy } from "../types";
+export type TextDataProxied = TextDataParameter | TextDataArgument;
+
+export class TextDataParameter extends ParameterProxy<string> {
+  readonly type: "text.data" = "text.data";
+}
+
+export class TextDataArgument extends ArgumentProxy<string> {
+  readonly type: "text.data" = "text.data";
+}
diff --git a/packages/support-components/proxied/text/text.ts b/packages/support-components/proxied/text/text.ts
new file mode 100644
index 00000000..b80944b8
--- /dev/null
+++ b/packages/support-components/proxied/text/text.ts
@@ -0,0 +1,71 @@
+import {
+  Text,
+  ITextStyle,
+  TextAlign,
+  TextAlignManifest,
+  TextManifest,
+  TextOverflow,
+  TextStyleManifest,
+  WidgetKey,
+} from "@reflect-ui/core";
+import { Proxied, Rendered } from "@reflect-ui/core/lib/_utility-types";
+import { TextDataProxied } from "./text-data";
+
+interface ProxiedTextManifest extends TextManifest {
+  data: TextDataProxied;
+  style: Rendered<TextStyleManifest>;
+  overflow: Rendered<TextOverflow>;
+  textAlign: Rendered<TextAlignManifest>;
+  //   textAlignVertical?: Proxied<TextAlignVerticalManifest>;
+  maxLines?: Rendered<number>;
+}
+
+export class ProxiedText extends Text implements ProxiedTextManifest {
+  // #region text manifest
+  readonly _type: "Text" = "Text";
+  readonly data: TextDataProxied;
+  readonly overflow: Rendered<TextOverflow>;
+  readonly style: Rendered<ITextStyle>;
+  readonly textAlign: Rendered<TextAlign>;
+  // textAlignVertical: TextAlignVertical;
+  readonly maxLines?: Rendered<number>;
+  // #endregion text manifest
+
+  width?: number;
+  height?: number;
+
+  constructor({
+    key,
+    data,
+    overflow = TextOverflow.ellipsis,
+    style,
+    textAlign,
+    maxLines,
+    width,
+    height,
+  }: {
+    key?: WidgetKey;
+    width?: number;
+    height?: number;
+  } & Omit<ProxiedTextManifest, "overflow"> & {
+      overflow?: TextOverflow;
+    }) {
+    super({
+      key: key,
+      data,
+      overflow,
+      style,
+      textAlign,
+      maxLines,
+    });
+
+    this.data = data;
+    this.overflow = overflow;
+    this.style = style;
+    this.textAlign = textAlign;
+    this.maxLines = maxLines;
+
+    this.width = width;
+    this.height = height;
+  }
+}
diff --git a/packages/support-components/proxied/types.ts b/packages/support-components/proxied/types.ts
new file mode 100644
index 00000000..c3582dea
--- /dev/null
+++ b/packages/support-components/proxied/types.ts
@@ -0,0 +1,21 @@
+import { Proxied } from "@reflect-ui/core/lib/_utility-types";
+
+export class ParameterProxy<T> extends Proxied<T> {
+  readonly key: string;
+  readonly defaultValue: T;
+  constructor({ key, defaultValue }: { key: string; defaultValue: T }) {
+    super();
+
+    this.key = key;
+    this.defaultValue = defaultValue;
+  }
+}
+
+export class ArgumentProxy<T> extends Proxied<T> {}
+
+/**
+ * e.g. in `<p>{props.text}</p>`, `props.text` is a AccessorValue
+ */
+interface PropertyAccessor {
+  accessor: string;
+}
diff --git a/packages/support-components/tokenize-component/index.ts b/packages/support-components/tokenize-component/index.ts
new file mode 100644
index 00000000..3029feca
--- /dev/null
+++ b/packages/support-components/tokenize-component/index.ts
@@ -0,0 +1,47 @@
+import { convert } from "@design-sdk/figma-node-conversion";
+import type { ComponentNode } from "@design-sdk/figma-types";
+import { tokenize as normalTokenize, tokenizeText } from "@designto/token";
+import { TextDataParameter, ProxiedText } from "../proxied";
+import assert from "assert";
+import { ReflectSceneNode } from "@design-sdk/figma-node";
+
+function fromComponentNode(component: ComponentNode) {
+  assert(component);
+
+  const reflect = convert.intoReflectNode(component);
+
+  return handleNode(reflect);
+}
+
+function handleNode(node: ReflectSceneNode) {
+  switch (node.type) {
+    case "TEXT": {
+      const _normal_text_token = tokenizeText.fromText(node);
+      return new ProxiedText({
+        ..._normal_text_token,
+        data: new TextDataParameter({
+          key: node.id,
+          defaultValue: _normal_text_token.data,
+        }),
+      });
+    }
+    default: {
+      if ("children" in node) {
+        return {
+          ...normalTokenize(node),
+          children: handleChildren(node.children),
+        };
+      }
+      // other types are currently not supported as a component
+      return normalTokenize(node);
+    }
+  }
+}
+
+function handleChildren(children: ReflectSceneNode[]) {
+  return children.map(handleNode);
+}
+
+export const tokenizeComponent = {
+  fromComponentNode: fromComponentNode,
+};
diff --git a/packages/support-components/tokens/token-master-component.ts b/packages/support-components/tokens/token-master-component.ts
index 4c0367ec..12e4b40b 100644
--- a/packages/support-components/tokens/token-master-component.ts
+++ b/packages/support-components/tokens/token-master-component.ts
@@ -10,7 +10,7 @@ export class MasterComponentMetaToken<T> {
   /**
    * property link to design property
    */
-  readonly child: T;
+  readonly body: T;
 
   constructor({
     key,
@@ -23,7 +23,7 @@ export class MasterComponentMetaToken<T> {
   }) {
     this.key = key;
     this.properties = properties;
-    this.child = child;
+    this.body = child;
   }
 }
 
