diff --git a/packages/builder-react-native/index.ts b/packages/builder-react-native/index.ts
index f47f842e..dcff241a 100644
--- a/packages/builder-react-native/index.ts
+++ b/packages/builder-react-native/index.ts
@@ -2,6 +2,14 @@ export * from "./rn-import-specifications";
 export * from "./rn-widgets";
 
 // building strategies
-export * from "./rn-build-inline-style-widget";
-export * from "./rn-build-stylesheet-widget";
-export * from "./rn-build-styled-component-widget";
+import with_inline_style from "./rn-build-inline-style-widget";
+import with_stylesheet from "./rn-build-stylesheet-widget";
+import with_styled_components from "./rn-build-styled-component-widget";
+
+const finilize = {
+  with_inline_style,
+  with_stylesheet,
+  with_styled_components,
+} as const;
+
+export default finilize;
diff --git a/packages/builder-react-native/rn-build-inline-style-widget/from-static-widget-tree.ts b/packages/builder-react-native/rn-build-inline-style-widget/from-static-widget-tree.ts
deleted file mode 100644
index bbc22658..00000000
--- a/packages/builder-react-native/rn-build-inline-style-widget/from-static-widget-tree.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { JsxWidget } from "@web-builder/core";
-import {
-  react as react_config,
-  reactnative as reactnative_config,
-} from "@grida/builder-config";
-import { ReactNativeInlineStyleBuilder } from "./rn-inline-style-module-builder";
-
-export function finalizeReactNativeWidget_InlineStyle(
-  entry: JsxWidget,
-  {
-    styling,
-    exporting,
-  }: {
-    styling: reactnative_config.ReactNativeInlineStyleConfig;
-    exporting: react_config.ReactComponentExportingCofnig;
-  }
-) {
-  const builder = new ReactNativeInlineStyleBuilder({
-    entry,
-    config: styling,
-  });
-  return builder.asExportableModule().finalize(exporting);
-}
diff --git a/packages/builder-react-native/rn-build-inline-style-widget/index.ts b/packages/builder-react-native/rn-build-inline-style-widget/index.ts
index 1fc769f7..667509ee 100644
--- a/packages/builder-react-native/rn-build-inline-style-widget/index.ts
+++ b/packages/builder-react-native/rn-build-inline-style-widget/index.ts
@@ -1 +1,31 @@
-export * from "./from-static-widget-tree";
+import { JsxWidget } from "@web-builder/core";
+import {
+  react as react_config,
+  reactnative as reactnative_config,
+} from "@grida/builder-config";
+import {
+  ReactNativeInlineStyleBuilder,
+  ReactNativeInlineStyleWidgetModuleExportable,
+} from "./rn-inline-style-module-builder";
+
+export default function finalizeReactNativeWidget_InlineStyle(
+  entry: JsxWidget,
+  {
+    styling,
+    exporting,
+  }: {
+    styling: reactnative_config.ReactNativeInlineStyleConfig;
+    exporting: react_config.ReactComponentExportingCofnig;
+  }
+) {
+  const builder = new ReactNativeInlineStyleBuilder({
+    entry,
+    config: styling,
+  });
+  return builder.asExportableModule().finalize(exporting);
+}
+
+export {
+  ReactNativeInlineStyleBuilder,
+  ReactNativeInlineStyleWidgetModuleExportable,
+};
diff --git a/packages/builder-react-native/rn-build-styled-component-widget/from-static-widget-tree.ts b/packages/builder-react-native/rn-build-styled-component-widget/from-static-widget-tree.ts
deleted file mode 100644
index f6df22fa..00000000
--- a/packages/builder-react-native/rn-build-styled-component-widget/from-static-widget-tree.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { JsxWidget } from "@web-builder/core";
-import { ReactComponentExportResult } from "@web-builder/react-core";
-import {
-  reactnative as rn_config,
-  react as react_config,
-} from "@grida/builder-config";
-import { ReactNativeStyledComponentsModuleBuilder } from "./rn-styled-components-module-builder";
-
-/**
- * standard `StyleSheet.create` pattern for react-native
- * @todo - this is not fully implemented
- * @param entry
- * @returns
- */
-export function finalizeReactNativeWidget_StyledComponents(
-  entry: JsxWidget,
-  {
-    styling,
-    exporting,
-  }: {
-    styling: rn_config.ReactNativeStyledComponentsConfig;
-    exporting: react_config.ReactComponentExportingCofnig;
-  }
-): ReactComponentExportResult {
-  const builder = new ReactNativeStyledComponentsModuleBuilder({
-    entry,
-    config: styling,
-  });
-  return builder.asExportableModule().finalize(exporting);
-}
diff --git a/packages/builder-react-native/rn-build-styled-component-widget/index.ts b/packages/builder-react-native/rn-build-styled-component-widget/index.ts
index 1fc769f7..bd2a7a66 100644
--- a/packages/builder-react-native/rn-build-styled-component-widget/index.ts
+++ b/packages/builder-react-native/rn-build-styled-component-widget/index.ts
@@ -1 +1,38 @@
-export * from "./from-static-widget-tree";
+import { JsxWidget } from "@web-builder/core";
+import { ReactComponentExportResult } from "@web-builder/react-core";
+import {
+  reactnative as rn_config,
+  react as react_config,
+} from "@grida/builder-config";
+import {
+  ReactNativeStyledComponentsModuleBuilder,
+  ReactNativeStyledComponentWidgetModuleExportable,
+} from "./rn-styled-components-module-builder";
+
+/**
+ * standard `StyleSheet.create` pattern for react-native
+ * @todo - this is not fully implemented
+ * @param entry
+ * @returns
+ */
+export default function finalizeReactNativeWidget_StyledComponents(
+  entry: JsxWidget,
+  {
+    styling,
+    exporting,
+  }: {
+    styling: rn_config.ReactNativeStyledComponentsConfig;
+    exporting: react_config.ReactComponentExportingCofnig;
+  }
+): ReactComponentExportResult {
+  const builder = new ReactNativeStyledComponentsModuleBuilder({
+    entry,
+    config: styling,
+  });
+  return builder.asExportableModule().finalize(exporting);
+}
+
+export {
+  ReactNativeStyledComponentsModuleBuilder,
+  ReactNativeStyledComponentWidgetModuleExportable,
+};
diff --git a/packages/builder-react-native/rn-build-stylesheet-widget/from-static-widget-tree.ts b/packages/builder-react-native/rn-build-stylesheet-widget/from-static-widget-tree.ts
deleted file mode 100644
index 764d5cec..00000000
--- a/packages/builder-react-native/rn-build-stylesheet-widget/from-static-widget-tree.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { JsxWidget, StylableJsxWidget } from "@web-builder/core";
-import { ReactComponentExportResult } from "@web-builder/react-core";
-import {
-  reactnative as rn_config,
-  react as react_config,
-} from "@grida/builder-config";
-import { ReactNativeStyleSheetModuleBuilder } from "./rn-style-sheet-module-builder";
-
-/**
- * standard `StyleSheet.create` pattern for react-native
- * @todo - this is not fully implemented
- * @param entry
- * @returns
- */
-export function finalizeReactNativeWidget_StyleSheet(
-  entry: JsxWidget,
-  {
-    styling,
-    exporting,
-  }: {
-    styling: rn_config.ReactNativeStyleSheetConfig;
-    exporting: react_config.ReactComponentExportingCofnig;
-  }
-): ReactComponentExportResult {
-  const builder = new ReactNativeStyleSheetModuleBuilder({
-    entry,
-    config: styling,
-  });
-  return builder.asExportableModule().finalize(exporting);
-}
diff --git a/packages/builder-react-native/rn-build-stylesheet-widget/index.ts b/packages/builder-react-native/rn-build-stylesheet-widget/index.ts
index 6368b8c3..c121c488 100644
--- a/packages/builder-react-native/rn-build-stylesheet-widget/index.ts
+++ b/packages/builder-react-native/rn-build-stylesheet-widget/index.ts
@@ -1,2 +1,38 @@
-export * from "./from-static-widget-tree";
-export * from "./rn-style-sheet-module-builder";
+import { JsxWidget } from "@web-builder/core";
+import { ReactComponentExportResult } from "@web-builder/react-core";
+import {
+  reactnative as rn_config,
+  react as react_config,
+} from "@grida/builder-config";
+import {
+  ReactNativeStyleSheetModuleBuilder,
+  ReactNativeStyleSheeteWidgetModuleExportable,
+} from "./rn-style-sheet-module-builder";
+
+/**
+ * standard `StyleSheet.create` pattern for react-native
+ * @todo - this is not fully implemented
+ * @param entry
+ * @returns
+ */
+export default function finalizeReactNativeWidget_StyleSheet(
+  entry: JsxWidget,
+  {
+    styling,
+    exporting,
+  }: {
+    styling: rn_config.ReactNativeStyleSheetConfig;
+    exporting: react_config.ReactComponentExportingCofnig;
+  }
+): ReactComponentExportResult {
+  const builder = new ReactNativeStyleSheetModuleBuilder({
+    entry,
+    config: styling,
+  });
+  return builder.asExportableModule().finalize(exporting);
+}
+
+export {
+  ReactNativeStyleSheetModuleBuilder,
+  ReactNativeStyleSheeteWidgetModuleExportable,
+};
diff --git a/packages/builder-web-react/index.ts b/packages/builder-web-react/index.ts
index 618d900c..af3941c4 100644
--- a/packages/builder-web-react/index.ts
+++ b/packages/builder-web-react/index.ts
@@ -1,5 +1,32 @@
-export * from "./react-styled-component-widget";
-export * from "./react-inline-css-widget";
-export * from "./react-css-module-widget";
+import with_styled_components from "./react-styled-component-widget";
+import with_inline_css from "./react-inline-css-widget";
+import with_css_module from "./react-css-module-widget";
+import type { JsxWidget } from "@web-builder/core";
+import type {
+  ReactComponentExportingCofnig,
+  ReactStyledComponentsConfig,
+  ReactInlineCssConfig,
+  ReactCssModuleConfig,
+  ReactStylingStrategy,
+} from "@grida/builder-config/framework-react";
+import type { ReactComponentExportResult } from "@web-builder/react-core";
+
+const finilize = {
+  with_styled_components:
+    with_styled_components as BuilderFunc<ReactStyledComponentsConfig>,
+  with_inline_css: with_inline_css as BuilderFunc<ReactInlineCssConfig>,
+  with_css_module: with_css_module as BuilderFunc<ReactCssModuleConfig>,
+};
+
+type BuilderFunc<S extends ReactStylingStrategy = ReactStylingStrategy> = (
+  entry: JsxWidget,
+  config: {
+    styling: S;
+    exporting: ReactComponentExportingCofnig;
+  }
+) => ReactComponentExportResult;
+
+export default finilize;
+export type { BuilderFunc };
 export * from "./widgets-native";
 export * from "./widgets-reflect-react";
diff --git a/packages/builder-web-react/react-css-module-widget/from-static-widget-tree.ts b/packages/builder-web-react/react-css-module-widget/from-static-widget-tree.ts
deleted file mode 100644
index d11df097..00000000
--- a/packages/builder-web-react/react-css-module-widget/from-static-widget-tree.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { JsxWidget } from "@web-builder/core";
-import { ReactComponentExportResult } from "@web-builder/react-core";
-import { react as react_config } from "@grida/builder-config";
-import { ReactCssModuleBuilder } from "./react-css-module-module-builder";
-
-/**
- * css-module pattern with
- */
-export function finalizeReactWidget_CssModule(
-  entry: JsxWidget,
-  {
-    styling,
-    exporting,
-  }: {
-    styling: react_config.ReactCssModuleConfig;
-    exporting: react_config.ReactComponentExportingCofnig;
-  }
-): ReactComponentExportResult {
-  const builder = new ReactCssModuleBuilder({ entry, config: styling });
-  return builder.asExportableModule().finalize(exporting);
-}
diff --git a/packages/builder-web-react/react-css-module-widget/index.ts b/packages/builder-web-react/react-css-module-widget/index.ts
index 978fa2eb..5d6a2654 100644
--- a/packages/builder-web-react/react-css-module-widget/index.ts
+++ b/packages/builder-web-react/react-css-module-widget/index.ts
@@ -1,2 +1,25 @@
-export * from "./from-static-widget-tree";
-export * from "./react-css-module-module-builder";
+import { JsxWidget } from "@web-builder/core";
+import { ReactComponentExportResult } from "@web-builder/react-core";
+import { react as react_config } from "@grida/builder-config";
+import {
+  ReactCssModuleBuilder,
+  ReactCssModuleWidgetModuleExportable,
+} from "./react-css-module-module-builder";
+
+interface Config {
+  styling: react_config.ReactCssModuleConfig;
+  exporting: react_config.ReactComponentExportingCofnig;
+}
+
+/**
+ * css-module pattern with
+ */
+export default function finalizeReactWidget_CssModule(
+  entry: JsxWidget,
+  { styling, exporting }: Config
+): ReactComponentExportResult {
+  const builder = new ReactCssModuleBuilder({ entry, config: styling });
+  return builder.asExportableModule().finalize(exporting);
+}
+
+export { ReactCssModuleBuilder, ReactCssModuleWidgetModuleExportable };
diff --git a/packages/builder-web-react/react-inline-css-widget/from-static-widget-tree.ts b/packages/builder-web-react/react-inline-css-widget/from-static-widget-tree.ts
deleted file mode 100644
index e4ee44b4..00000000
--- a/packages/builder-web-react/react-inline-css-widget/from-static-widget-tree.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { JsxWidget } from "@web-builder/core";
-import { react as react_config } from "@grida/builder-config";
-import { ReactInlineCssBuilder } from "./react-inline-css-module-builder";
-
-export function finalizeReactWidget_InlineCss(
-  entry: JsxWidget,
-  {
-    styling,
-    exporting,
-  }: {
-    styling: react_config.ReactInlineCssConfig;
-    exporting: react_config.ReactComponentExportingCofnig;
-  }
-) {
-  const builder = new ReactInlineCssBuilder({
-    entry,
-    config: styling,
-  });
-  return builder.asExportableModule().finalize(exporting);
-}
diff --git a/packages/builder-web-react/react-inline-css-widget/index.ts b/packages/builder-web-react/react-inline-css-widget/index.ts
index b4da182b..5dd9a5b0 100644
--- a/packages/builder-web-react/react-inline-css-widget/index.ts
+++ b/packages/builder-web-react/react-inline-css-widget/index.ts
@@ -1,2 +1,24 @@
-export * from "./react-inline-css-module-builder";
-export * from "./from-static-widget-tree";
+import { JsxWidget } from "@web-builder/core";
+import { react as react_config } from "@grida/builder-config";
+import {
+  ReactInlineCssBuilder,
+  ReactInlineCssWidgetModuleExportable,
+} from "./react-inline-css-module-builder";
+
+interface Config {
+  styling: react_config.ReactInlineCssConfig;
+  exporting: react_config.ReactComponentExportingCofnig;
+}
+
+export default function finalizeReactWidget_InlineCss(
+  entry: JsxWidget,
+  { styling, exporting }: Config
+) {
+  const builder = new ReactInlineCssBuilder({
+    entry,
+    config: styling,
+  });
+  return builder.asExportableModule().finalize(exporting);
+}
+
+export { ReactInlineCssBuilder, ReactInlineCssWidgetModuleExportable };
diff --git a/packages/builder-web-react/react-styled-component-widget/from-reusable-widget-tree.ts b/packages/builder-web-react/react-styled-component-widget/from-reusable-widget-tree.ts
index 6a3e8e2f..5517bb59 100644
--- a/packages/builder-web-react/react-styled-component-widget/from-reusable-widget-tree.ts
+++ b/packages/builder-web-react/react-styled-component-widget/from-reusable-widget-tree.ts
@@ -1,9 +1,13 @@
+////
+//// LEGACY
+////
+
 import {
   InstanceMetaToken,
   InstanceWidget,
 } from "@code-features/component/tokens/token-instance";
 import { MasterComponentWidget } from "@code-features/component/tokens/token-master-component";
-import { buildWebWidgetFromTokens } from "@designto/web/tokens-to-web-widget";
+import { buildWebWidgetFromTokens } from "@designto/web";
 import { ReactStyledComponentsModuleBuilder } from "./react-styled-components-module-builder";
 
 /**
diff --git a/packages/builder-web-react/react-styled-component-widget/from-static-widget-tree.ts b/packages/builder-web-react/react-styled-component-widget/from-static-widget-tree.ts
deleted file mode 100644
index 276dd225..00000000
--- a/packages/builder-web-react/react-styled-component-widget/from-static-widget-tree.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { JsxWidget, StylableJsxWidget } from "@web-builder/core";
-import { ReactComponentExportResult } from "@web-builder/react-core";
-import { react as react_config } from "@grida/builder-config";
-import { ReactStyledComponentsModuleBuilder } from "./react-styled-components-module-builder";
-
-interface Config {
-  styling: react_config.ReactStyledComponentsConfig;
-  exporting: react_config.ReactComponentExportingCofnig;
-}
-
-/**
- * styled components pattern with either emotion or styled-component
- * @todo - this is not fully implemented
- * @param entry
- * @returns
- */
-export function finalizeReactWidget_StyledComponents(
-  entry: JsxWidget,
-  { styling, exporting }: Config
-): ReactComponentExportResult {
-  const builder = new ReactStyledComponentsModuleBuilder({
-    entry,
-    config: styling,
-  });
-  return builder.asExportableModule().finalize(exporting);
-}
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 f260f304..3b14533e 100644
--- a/packages/builder-web-react/react-styled-component-widget/index.ts
+++ b/packages/builder-web-react/react-styled-component-widget/index.ts
@@ -1,2 +1,36 @@
-export * from "./from-static-widget-tree";
 export * from "./from-reusable-widget-tree";
+
+import { JsxWidget } from "@web-builder/core";
+import { ReactComponentExportResult } from "@web-builder/react-core";
+import { react as react_config } from "@grida/builder-config";
+import {
+  ReactStyledComponentsModuleBuilder,
+  ReactStyledComponentWidgetModuleExportable,
+} from "./react-styled-components-module-builder";
+
+interface Config {
+  styling: react_config.ReactStyledComponentsConfig;
+  exporting: react_config.ReactComponentExportingCofnig;
+}
+
+/**
+ * styled components pattern with either emotion or styled-component
+ * @todo - this is not fully implemented
+ * @param entry
+ * @returns
+ */
+export default function finalizeReactWidget_StyledComponents(
+  entry: JsxWidget,
+  { styling, exporting }: Config
+): ReactComponentExportResult {
+  const builder = new ReactStyledComponentsModuleBuilder({
+    entry,
+    config: styling,
+  });
+  return builder.asExportableModule().finalize(exporting);
+}
+
+export {
+  ReactStyledComponentsModuleBuilder,
+  ReactStyledComponentWidgetModuleExportable,
+};
diff --git a/packages/builder-web-solid/index.ts b/packages/builder-web-solid/index.ts
index 082606b6..98da5986 100644
--- a/packages/builder-web-solid/index.ts
+++ b/packages/builder-web-solid/index.ts
@@ -1,3 +1,10 @@
 export * from "./solid-import-specifications";
-export * from "./solid-inline-css-widget";
-export * from "./solid-styled-component-widget";
+import with_inline_css from "./solid-inline-css-widget";
+import with_styled_components from "./solid-styled-component-widget";
+
+const finilize = {
+  with_inline_css,
+  with_styled_components,
+} as const;
+
+export default finilize;
diff --git a/packages/builder-web-solid/solid-inline-css-widget/from-static-widget-tree.ts b/packages/builder-web-solid/solid-inline-css-widget/from-static-widget-tree.ts
deleted file mode 100644
index 8ad17ea6..00000000
--- a/packages/builder-web-solid/solid-inline-css-widget/from-static-widget-tree.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import type { JsxWidget } from "@web-builder/core";
-import { solid as solid_config } from "@grida/builder-config";
-import { SolidInlineCssBuilder } from "./solid-inline-css-module-builder";
-
-export function finalizeSolidWidget_InlineCSS(
-  entry: JsxWidget,
-  {
-    styling,
-    exporting,
-  }: {
-    styling: solid_config.SolidInlineCssConfig;
-    exporting: solid_config.SolidComponentExportingCofnig;
-  }
-) {
-  const builder = new SolidInlineCssBuilder({ entry, config: styling });
-  return builder.asExportableModule().finalize(exporting);
-}
diff --git a/packages/builder-web-solid/solid-inline-css-widget/index.ts b/packages/builder-web-solid/solid-inline-css-widget/index.ts
index e475c3c4..50c8527f 100644
--- a/packages/builder-web-solid/solid-inline-css-widget/index.ts
+++ b/packages/builder-web-solid/solid-inline-css-widget/index.ts
@@ -1 +1,22 @@
-export { finalizeSolidWidget_InlineCSS } from "./from-static-widget-tree";
+import type { JsxWidget } from "@web-builder/core";
+import { solid as solid_config } from "@grida/builder-config";
+import {
+  SolidInlineCssBuilder,
+  SolidInlineCssWidgetModuleExportable,
+} from "./solid-inline-css-module-builder";
+
+export default function finalizeSolidWidget_InlineCSS(
+  entry: JsxWidget,
+  {
+    styling,
+    exporting,
+  }: {
+    styling: solid_config.SolidInlineCssConfig;
+    exporting: solid_config.SolidComponentExportingCofnig;
+  }
+) {
+  const builder = new SolidInlineCssBuilder({ entry, config: styling });
+  return builder.asExportableModule().finalize(exporting);
+}
+
+export { SolidInlineCssBuilder, SolidInlineCssWidgetModuleExportable };
diff --git a/packages/builder-web-solid/solid-styled-component-widget/from-static-widget-tree.ts b/packages/builder-web-solid/solid-styled-component-widget/from-static-widget-tree.ts
deleted file mode 100644
index 7a1ce90c..00000000
--- a/packages/builder-web-solid/solid-styled-component-widget/from-static-widget-tree.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { JsxWidget, StylableJsxWidget } from "@web-builder/core";
-import { solid as solid_config } from "@grida/builder-config";
-import { SolidStyledComponentsBuilder } from "./solid-styled-components-module-builder";
-
-export function finalizeSolidWidget_StyledComponents(
-  entry: JsxWidget,
-  {
-    styling,
-    exporting,
-  }: {
-    styling: solid_config.SolidStyledComponentsConfig;
-    exporting: solid_config.SolidComponentExportingCofnig;
-  }
-) {
-  const builder = new SolidStyledComponentsBuilder({ entry, config: styling });
-  return builder.asExportableModule().finalize(exporting);
-}
diff --git a/packages/builder-web-solid/solid-styled-component-widget/index.ts b/packages/builder-web-solid/solid-styled-component-widget/index.ts
index 580f8090..f72ae435 100644
--- a/packages/builder-web-solid/solid-styled-component-widget/index.ts
+++ b/packages/builder-web-solid/solid-styled-component-widget/index.ts
@@ -1,2 +1,25 @@
-export * from "./from-static-widget-tree";
-export * from "./solid-styled-components-module-builder";
+import { JsxWidget } from "@web-builder/core";
+import { solid as solid_config } from "@grida/builder-config";
+import {
+  SolidStyledComponentsBuilder,
+  SolidStyledComponentWidgetModuleExportable,
+} from "./solid-styled-components-module-builder";
+
+export default function finalizeSolidWidget_StyledComponents(
+  entry: JsxWidget,
+  {
+    styling,
+    exporting,
+  }: {
+    styling: solid_config.SolidStyledComponentsConfig;
+    exporting: solid_config.SolidComponentExportingCofnig;
+  }
+) {
+  const builder = new SolidStyledComponentsBuilder({ entry, config: styling });
+  return builder.asExportableModule().finalize(exporting);
+}
+
+export {
+  SolidStyledComponentsBuilder,
+  SolidStyledComponentWidgetModuleExportable,
+};
diff --git a/packages/designto-react-native/app/index.ts b/packages/designto-react-native/app/index.ts
index 62fdfc75..9fef3193 100644
--- a/packages/designto-react-native/app/index.ts
+++ b/packages/designto-react-native/app/index.ts
@@ -2,13 +2,15 @@ import { Widget } from "@reflect-ui/core";
 import { reactnative as config } from "@grida/builder-config";
 import { JsxWidget } from "@web-builder/react";
 import assert from "assert";
-import {
-  finalizeReactNativeWidget_StyleSheet,
-  finalizeReactNativeWidget_StyledComponents,
-  finalizeReactNativeWidget_InlineStyle,
-} from "@web-builder/react-native";
+import build from "@web-builder/react-native";
 import { buildRNWidgetFromTokens } from "../tokens-to-rn-widget";
 
+const builders = {
+  "react-native-stylesheet": build.with_stylesheet,
+  "styled-components": build.with_styled_components,
+  "inline-css": build.with_inline_style,
+} as const;
+
 /**
  *
  */
@@ -16,50 +18,25 @@ export function buildReactNativeApp(
   entry: JsxWidget,
   config: config.ReactNativeFrameworkConfig
 ): config.ReactNativeComponentOutput {
-  switch (config.styling.type) {
-    case "react-native-stylesheet": {
-      const res = finalizeReactNativeWidget_StyleSheet(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 "styled-components": {
-      const res = finalizeReactNativeWidget_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 "inline-style": {
-      const res = finalizeReactNativeWidget_InlineStyle(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 },
-      };
-    }
-  }
-  throw new Error(
-    `RN: Unsupported styling type: ${
-      // @ts-ignore
-      config.styling.type
-    }`
-  );
+  if (!builders[config.styling.type])
+    throw new Error(
+      `RN: Unsupported styling type: ${
+        // @ts-ignore
+        config.styling.type
+      }`
+    );
+
+  const res = builders[config.styling.type](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 },
+  };
 }
 
 export function buildReactNativeWidget(widget: Widget) {
diff --git a/packages/designto-react-native/tokens-to-rn-widget/compose-instanciation.ts b/packages/designto-react-native/tokens-to-rn-widget/compose-instanciation.ts
deleted file mode 100644
index fd15c819..00000000
--- a/packages/designto-react-native/tokens-to-rn-widget/compose-instanciation.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Composer } from ".";
-import * as reusable from "@code-features/component/tokens";
-import * as rn from "@web-builder/react-native";
-import { nameit, NameCases } from "coli";
-
-export function compose_instanciation(
-  widget: reusable.InstanceWidget,
-  child_composer: Composer // not used
-) {
-  const masterkey = widget.meta.master.key;
-
-  const identifier = nameit(widget.meta.master.key.originName, {
-    case: NameCases.pascal,
-  }).name;
-
-  // return new rn.InstanciationElement({
-  //   key: {
-  //     name: "ExampleUsageOf_" + identifier, // FIXME: should not use identifier as name
-  //     id: widget.key.id,
-  //   },
-  //   identifier: identifier,
-  //   arguments: widget.meta.arguments,
-  // });
-  throw "instanciation for rn is not ready";
-}
diff --git a/packages/designto-react-native/tokens-to-rn-widget/index.ts b/packages/designto-react-native/tokens-to-rn-widget/index.ts
index 8bb33271..862a07a3 100644
--- a/packages/designto-react-native/tokens-to-rn-widget/index.ts
+++ b/packages/designto-react-native/tokens-to-rn-widget/index.ts
@@ -3,7 +3,6 @@ import { tokens as special } from "@designto/token";
 import * as rn from "@web-builder/react-native";
 import { JsxWidget, StylableJsxWidget, keyFromWidget } from "@web-builder/core";
 import { MainImageRepository } from "@design-sdk/asset-repository";
-import * as css from "@web-builder/styles";
 import { compose_wrap } from "./compose-wrap";
 import { compose_wrapped_with_clip_rrect } from "./compose-wrapped-with-clip-rrect";
 import { compose_wrapped_with_rotation } from "./compose-wrapped-with-rotation";
@@ -13,7 +12,6 @@ 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 { compose_instanciation } from "./compose-instanciation";
 import { IWHStyleWidget } from "@reflect-ui/core";
 import * as reusable from "@code-features/component/tokens";
 import assert from "assert";
diff --git a/packages/designto-react/app/index.ts b/packages/designto-react/app/index.ts
index 25148bd8..8946dc56 100644
--- a/packages/designto-react/app/index.ts
+++ b/packages/designto-react/app/index.ts
@@ -1,62 +1,35 @@
 import { Widget } from "@reflect-ui/core";
-import { buildWebWidgetFromTokens } from "@designto/web/tokens-to-web-widget";
-import {
-  finalizeReactWidget_StyledComponents,
-  finalizeReactWidget_InlineCss,
-  finalizeReactWidget_CssModule,
-  finalizeReactReusable_StyledComponents__Experimental,
-  JsxWidget,
-} from "@web-builder/react";
+import { buildWebWidgetFromTokens } from "@designto/web";
+import build, { BuilderFunc, JsxWidget } from "@web-builder/react";
 import { react as config, react } from "@grida/builder-config";
 import assert from "assert";
 
+const builders: {
+  [key in react.ReactFrameworkConfig["styling"]["type"]]: BuilderFunc<any>;
+} = {
+  "styled-components": build.with_styled_components,
+  "inline-css": build.with_inline_css,
+  "css-module": build.with_css_module,
+  css: () => {
+    throw "not implemented";
+  },
+} as const;
+
 export function buildReactApp(
   entry: JsxWidget,
   config: react.ReactFrameworkConfig
 ): config.ReactComponentOutput {
-  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 "inline-css": {
-      const res = finalizeReactWidget_InlineCss(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-module": {
-      const res = finalizeReactWidget_CssModule(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":
-    default: {
-      throw new Error(`${config.styling.type} not supported yet`);
-      break;
-    }
-  }
+  const res = builders[config.styling.type](entry, {
+    exporting: config.component_declaration_style.exporting_style,
+    styling: config.styling,
+  });
+
+  return {
+    id: entry.key.id,
+    name: entry.key.name,
+    code: { raw: res.code },
+    scaffold: { raw: res.code },
+  };
 }
 
 export function buildReactWidget(widget: Widget) {
@@ -68,6 +41,9 @@ export function buildReactWidget(widget: Widget) {
   return buildWebWidgetFromTokens(widget, {});
 }
 
+// EXPERIMENTAL
+import { finalizeReactReusable_StyledComponents__Experimental } from "@web-builder/react/react-styled-component-widget";
+
 /**
  * Experimental components support for react
  */
diff --git a/packages/designto-solid-js/app/index.ts b/packages/designto-solid-js/app/index.ts
index b305ad48..a89d7657 100644
--- a/packages/designto-solid-js/app/index.ts
+++ b/packages/designto-solid-js/app/index.ts
@@ -1,49 +1,29 @@
-import { Widget } from "@reflect-ui/core";
-import { buildWebWidgetFromTokens } from "@designto/web/tokens-to-web-widget";
 import { JsxWidget } from "@web-builder/core";
 import { solid as config } from "@grida/builder-config";
-import {
-  finalizeSolidWidget_StyledComponents,
-  finalizeSolidWidget_InlineCSS,
-} from "@web-builder/solid-js";
+import build from "@web-builder/solid-js";
+
+const builders = {
+  "inline-css": build.with_inline_css,
+  "styled-components": build.with_styled_components,
+} as const;
+
 export function buildSolidApp(
   entry: JsxWidget,
   config: config.SolidFrameworkConfig
 ): config.SolidComponentOutput {
-  switch (config.styling.type) {
-    // TODO:
-    case "inline-css": {
-      const res = finalizeSolidWidget_InlineCSS(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 },
-      };
-      break;
-    }
-    case "styled-components": {
-      const res = finalizeSolidWidget_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 },
-      };
-    }
-    default: {
-      throw (
-        "Unexpected styling type for solid-js framework: " +
-        // @ts-ignore
-        config.styling.type
-      );
-    }
-  }
-  // return;
+  if (!builders[config.styling.type])
+    throw "Unexpected styling type for solid-js: " + config.styling.type;
+
+  const res = builders[config.styling.type](entry, {
+    // @ts-ignore
+    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 },
+  };
 }
diff --git a/packages/designto-token/support-flags/token-declare/index.ts b/packages/designto-token/support-flags/token-declare/index.ts
index 3b0ba0c0..21d7c3dd 100644
--- a/packages/designto-token/support-flags/token-declare/index.ts
+++ b/packages/designto-token/support-flags/token-declare/index.ts
@@ -2,12 +2,12 @@ import type { DeclareSpecificationFlag } from "@code-features/flags/--declare";
 import { tokenize } from "../..";
 import { default_tokenizer_config } from "../../config";
 import type { ReflectSceneNode } from "@design-sdk/figma-node";
-import { DeclarationWidgetToken } from "@code-features/module";
+import { WidgetDeclarationToken } from "@code-features/module";
 
 export function tokenize_flagged_declare(
   node: ReflectSceneNode,
   flag: DeclareSpecificationFlag
-): DeclarationWidgetToken | undefined {
+): WidgetDeclarationToken | undefined {
   const { export: _export, identifier, value } = flag;
 
   if (!value) return; // return if flag is silenced.
@@ -21,7 +21,7 @@ export function tokenize_flagged_declare(
 
   const _key = child.key!;
 
-  return new DeclarationWidgetToken({
+  return new WidgetDeclarationToken({
     key: _key.copyWith({ id: _key.id + "--declare" }),
     child: child,
   });
diff --git a/packages/designto-web/index.ts b/packages/designto-web/index.ts
index e69de29b..b2f0e1ff 100644
--- a/packages/designto-web/index.ts
+++ b/packages/designto-web/index.ts
@@ -0,0 +1,3 @@
+import { buildWebWidgetFromTokens } from "./tokens-to-web-widget";
+
+export { buildWebWidgetFromTokens };
diff --git a/packages/designto-web/tokens-to-web-widget/compose-declaration.ts b/packages/designto-web/tokens-to-web-widget/compose-declaration.ts
index fde91c0e..ee500428 100644
--- a/packages/designto-web/tokens-to-web-widget/compose-declaration.ts
+++ b/packages/designto-web/tokens-to-web-widget/compose-declaration.ts
@@ -1,10 +1,10 @@
 import { Composer } from ".";
 import * as web from "@web-builder/core";
 import { nameit, NameCases } from "coli";
-import { DeclarationWidgetToken } from "@code-features/module";
+import { WidgetDeclarationToken } from "@code-features/module";
 
 export function compose_declaration(
-  widget: DeclarationWidgetToken,
+  widget: WidgetDeclarationToken,
   child_composer: Composer // not used
 ) {
   throw new Error("declaration token handling not implemented");
diff --git a/packages/designto-web/tokens-to-web-widget/index.ts b/packages/designto-web/tokens-to-web-widget/index.ts
index 8fd52a2a..46ea62c8 100644
--- a/packages/designto-web/tokens-to-web-widget/index.ts
+++ b/packages/designto-web/tokens-to-web-widget/index.ts
@@ -20,13 +20,10 @@ import { compose_unwrapped_button } from "./compose-unwrapped-button";
 import { compose_unwrapped_checkbox } from "./compose-unwrapped-checkbox";
 import { compose_unwrapped_slider } from "./compose-unwrapped-slider";
 import { compose_unwrapped_progress } from "./compose-unwrapped-progress";
-import { compose_instanciation } from "./compose-instanciation";
-import { compose_declaration } from "./compose-declaration";
 import { compose_xtended_views } from "./compose-xtended-views";
 import { IWHStyleWidget } from "@reflect-ui/core";
-import * as reusable from "@code-features/component/tokens";
-import assert from "assert";
 import { WrappingContainer } from "@designto/token/tokens";
+import assert from "assert";
 
 interface WebWidgetComposerConfig {
   /**
@@ -324,20 +321,6 @@ function compose<T extends JsxWidget>(
   else if (widget instanceof special.Stretched) {
     thisWebWidget = compose_wrapped_with_clip_stretched(widget, handleChild);
   }
-  // -------------------------------------
-  // -------------------------------------
-  // module related
-  else if (widget instanceof special.DeclarationWidgetToken) {
-    throw "explicit declaration not supported yet";
-    // @ts-ignore
-    thisWebWidget = compose_declaration(widget, handleChild);
-  }
-  // -------------------------------------
-  // -------------------------------------
-  // support component / instance
-  else if (widget instanceof reusable.InstanceWidget) {
-    thisWebWidget = compose_instanciation(widget, handleChild);
-  }
   //
   // -------------------------------------
   // -------------------------------------
diff --git a/packages/support-components/README.md b/packages/support-components/README.md
index 8b358118..8c38632f 100644
--- a/packages/support-components/README.md
+++ b/packages/support-components/README.md
@@ -1,4 +1,4 @@
-# Components support
+# Components support (subset of @code-features/module)
 
 ## 1. Simplest scenario - master:instance with POJO values
 
diff --git a/packages/support-module/module-composition-style-multi-file/readme.md b/packages/support-module/module-composition-multi-file/readme.md
similarity index 100%
rename from packages/support-module/module-composition-style-multi-file/readme.md
rename to packages/support-module/module-composition-multi-file/readme.md
diff --git a/packages/support-module/module-composition-single-file/readme.md b/packages/support-module/module-composition-single-file/readme.md
new file mode 100644
index 00000000..5fc1b30f
--- /dev/null
+++ b/packages/support-module/module-composition-single-file/readme.md
@@ -0,0 +1,135 @@
+# Signle file module composition
+
+This directory contains logics & documents for composing a module in a single file (e.g. widget.tsx) having multiple exports.
+
+On web platform, this style **DOES NOT** support importing css files. (.css, .module.css)
+
+## Considerations
+
+- exporting rules
+
+## Example `single-file-multi-widget` module
+
+**Super simple example. - no variables, no conflicting names, no extra styles**
+
+```tsx
+import React from "react";
+
+function RootWidget() {
+  return (
+    <div>
+      <Widget1 />
+      <Widget2 />
+    </div>
+  );
+}
+
+function Widget1() {
+  return <div>widget1 - i have no child</div>;
+}
+
+function Widget2() {
+  return <div>widget2 - i have no child</div>;
+}
+
+export { RootWidget, Widget1, Widget2 };
+export default RootWidget;
+```
+
+## Abstraction
+
+Let's make the widget names abstract and anonymous for clearer understanding.
+
+```tsx
+import React from "react";
+
+function _() {}
+
+function __() {}
+
+function ___() {}
+
+export { _, __, ___ };
+export default _;
+```
+
+While..
+
+- `D` stands for declaration
+- `I` stands for instanciation
+
+```
+- D
+  - D
+  - I
+  - I
+    - D
+      - I
+      - I
+  - I
+```
+
+```
+- D
+  - I:D1
+  - I
+  - I
+    - I:D2
+- D1
+- D2
+```
+
+```tsx
+const D = (
+  <>
+    <D1 />
+    <I />
+    <I>
+      <D2 />
+      <I />
+      <I />
+    </I>
+  </>
+);
+
+const D1 = <></>;
+
+const D2 = (
+  <>
+    <I />
+    <I />
+  </>
+);
+```
+
+There are few ways to handle the input tree like above.
+
+- Iterative declaration: declare required components while looping through the input tree.
+- Pre-iteration declarations: declare abstraction with pre-iteration and declare with plain array (non nested)
+
+Pro & Cons:
+Iterative declaration is more human like and easy to understand the progress. But this recursive approach can cause unexpected behavior.
+
+Pre iteration has more structure and abstraction, can be also used for multi-file declaration. But this approach is considered non human-like (Not the way human developers think)
+
+## Input Model
+
+```ts
+import type { Widget } from "@reflect-ui/core";
+type Token = Widget | WidgetDeclarationToken | WidgetInstanciationToken;
+
+type Input = {
+  entry: DeclarationToken;
+};
+
+abstract class DeclarationToken {}
+abstract class InstanciationToken {}
+
+class WidgetDeclarationToken extends DeclarationToken {
+  declaration: Widget;
+}
+
+class WidgetInstanciationToken extends InstanciationToken {
+  instanciation: WidgetDeclarationToken;
+}
+```
diff --git a/packages/support-module/module-composition-style-single-file/readme.md b/packages/support-module/module-composition-style-single-file/readme.md
deleted file mode 100644
index 374b077a..00000000
--- a/packages/support-module/module-composition-style-single-file/readme.md
+++ /dev/null
@@ -1,54 +0,0 @@
-# Signle file module composition
-
-This directory contains logics & documents for composing a module in a single file (e.g. widget.tsx) having multiple exports.
-
-On web platform, this style **DOES NOT** support importing css files. (.css, .module.css)
-
-## Considerations
-
-- exporting rules
-
-## Example `single-file-multi-widget` module
-
-**Super simple example. - no variables, no conflicting names, no extra styles**
-
-```tsx
-import React from "react";
-
-function RootWidget() {
-  return (
-    <div>
-      <Widget1 />
-      <Widget2 />
-    </div>
-  );
-}
-
-function Widget1() {
-  return <div>widget1 - i have no child</div>;
-}
-
-function Widget2() {
-  return <div>widget2 - i have no child</div>;
-}
-
-export { RootWidget, Widget1, Widget2 };
-export default RootWidget;
-```
-
-## Abstraction
-
-Let's make the widget names abstract and anonymous for clearer understanding.
-
-```tsx
-import React from "react";
-
-function _() {}
-
-function __() {}
-
-function ___() {}
-
-export { _, __, ___ };
-export default _;
-```
diff --git a/packages/support-module/tokens/index.ts b/packages/support-module/tokens/index.ts
index b3198731..c34dfcbb 100644
--- a/packages/support-module/tokens/index.ts
+++ b/packages/support-module/tokens/index.ts
@@ -1 +1 @@
-export { DeclarationWidgetToken } from "./token-exportable-widget";
+export { WidgetDeclarationToken } from "./token-exportable-widget";
diff --git a/packages/support-module/tokens/token-exportable-widget.ts b/packages/support-module/tokens/token-exportable-widget.ts
index 7dd3a749..4916e661 100644
--- a/packages/support-module/tokens/token-exportable-widget.ts
+++ b/packages/support-module/tokens/token-exportable-widget.ts
@@ -50,7 +50,7 @@ import { SingleChildRenderObjectWidget } from "@reflect-ui/core";
  *
  * ```
  */
-export class DeclarationWidgetToken extends SingleChildRenderObjectWidget {
-  readonly _type = "DeclarationWidgetToken";
+export class WidgetDeclarationToken extends SingleChildRenderObjectWidget {
+  readonly _type = "widget-declaration";
   //
 }