From 27dfa81f9260f7942b358ad612cc28c86878f18b Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sat, 11 Dec 2021 19:17:02 +0900
Subject: [PATCH 1/6] add vanilla hover inspection

---
 .../app-runner/vanilla-app-runner.tsx         | 63 ++++++++++++++++---
 1 file changed, 54 insertions(+), 9 deletions(-)

diff --git a/editor/components/app-runner/vanilla-app-runner.tsx b/editor/components/app-runner/vanilla-app-runner.tsx
index 2c8b7b2f..a5a10b15 100644
--- a/editor/components/app-runner/vanilla-app-runner.tsx
+++ b/editor/components/app-runner/vanilla-app-runner.tsx
@@ -1,24 +1,69 @@
-import React from "react";
+import React, { useEffect, useRef } from "react";
 
 export function VanillaRunner({
   width,
   height,
   source,
+  enableInspector = true,
 }: {
   width: string;
   height: string;
   source: string;
   componentName: string;
+  enableInspector?: boolean;
 }) {
+  const ref = useRef<HTMLIFrameElement>();
+
+  useEffect(() => {
+    if (ref.current && enableInspector) {
+      ref.current.onload = () => {
+        const matches = ref.current.contentDocument.querySelectorAll(
+          "div, span, button, img, image, svg"
+        );
+        matches.forEach((el) => {
+          const tint = "rgba(20, 0, 255, 0.2)";
+          const tintl = "rgba(20, 0, 255, 0.5)";
+          const originstyle = {
+            //@ts-ignore
+            ...el.style,
+          };
+
+          if (el.id.includes("RootWrapper")) {
+          } else {
+            el.addEventListener("mouseenter", (e) => {
+              //@ts-ignore
+              e.target.style.background = tint;
+              //@ts-ignore
+              e.target.style.color = tint;
+              //@ts-ignore
+              e.target.style.outline = `${tintl} solid 1px`;
+            });
+            el.addEventListener("mouseleave", (e) => {
+              //@ts-ignore
+              e.target.style.background = originstyle.background;
+              //@ts-ignore
+              e.target.style.color = originstyle.color;
+              //@ts-ignore
+              e.target.style.outline = originstyle.outline;
+            });
+          }
+        });
+
+        ref.current.contentWindow.addEventListener("click", (e) => {
+          console.log("click", e);
+        });
+      };
+    }
+  }, [ref.current, enableInspector]);
+
   const inlinesource = source || `<div></div>`;
   return (
-    <>
-      <iframe
-        sandbox="allow-same-origin"
-        srcDoc={inlinesource}
-        width={width}
-        height={height}
-      />
-    </>
+    <iframe
+      ref={ref}
+      sandbox="allow-same-origin"
+      srcDoc={inlinesource}
+      width={width}
+      height={height}
+    />
   );
 }

From 4d2951507ca3c0bdd476b104e1f5184a666b5820 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sun, 12 Dec 2021 01:20:36 +0900
Subject: [PATCH 2/6] add whole file fetch support

---
 .../app-runner/vanilla-app-runner.tsx         |  4 -
 .../editor-appbar-fragment-for-canvas.tsx     |  2 +-
 .../editor-layer-hierarchy-tree.tsx           | 32 ++++----
 .../editor-pages-list/editor-page-item.tsx    | 36 +++++++-
 .../editor-pages-list/editor-pages-list.tsx   | 55 ++++++++++++-
 .../editor/editor-pages-list/index.ts         |  2 +-
 .../editor/editor-sidebar/editor-sidebar.tsx  | 18 +++-
 .../side-navigation/side-navigation.tsx       |  2 +
 editor/core/reducers/editor-reducer.ts        |  9 +-
 editor/core/states/editor-state.ts            | 10 +--
 editor/hooks/use-design.ts                    | 27 ++++++
 editor/pages/to-code/index.tsx                | 82 +++++++++++++++++--
 editor/scaffolds/editor/index.tsx             |  2 +-
 externals/design-sdk                          |  2 +-
 14 files changed, 240 insertions(+), 43 deletions(-)

diff --git a/editor/components/app-runner/vanilla-app-runner.tsx b/editor/components/app-runner/vanilla-app-runner.tsx
index a5a10b15..d9a52e2f 100644
--- a/editor/components/app-runner/vanilla-app-runner.tsx
+++ b/editor/components/app-runner/vanilla-app-runner.tsx
@@ -34,16 +34,12 @@ export function VanillaRunner({
               //@ts-ignore
               e.target.style.background = tint;
               //@ts-ignore
-              e.target.style.color = tint;
-              //@ts-ignore
               e.target.style.outline = `${tintl} solid 1px`;
             });
             el.addEventListener("mouseleave", (e) => {
               //@ts-ignore
               e.target.style.background = originstyle.background;
               //@ts-ignore
-              e.target.style.color = originstyle.color;
-              //@ts-ignore
               e.target.style.outline = originstyle.outline;
             });
           }
diff --git a/editor/components/editor/editor-appbar/editor-appbar-fragment-for-canvas.tsx b/editor/components/editor/editor-appbar/editor-appbar-fragment-for-canvas.tsx
index 1353d701..f8496a3c 100644
--- a/editor/components/editor/editor-appbar/editor-appbar-fragment-for-canvas.tsx
+++ b/editor/components/editor/editor-appbar/editor-appbar-fragment-for-canvas.tsx
@@ -6,7 +6,7 @@ export function AppbarFragmentForCanvas() {
   const [state] = useEditorState();
   return (
     <RootWrapperAppbarFragmentForCanvas>
-      <Breadcrumbs>{state.design?.current?.name}</Breadcrumbs>
+      <Breadcrumbs>{state.design?.input?.name}</Breadcrumbs>
     </RootWrapperAppbarFragmentForCanvas>
   );
 }
diff --git a/editor/components/editor/editor-layer-hierarchy/editor-layer-hierarchy-tree.tsx b/editor/components/editor/editor-layer-hierarchy/editor-layer-hierarchy-tree.tsx
index ad746412..a8f9fd88 100644
--- a/editor/components/editor/editor-layer-hierarchy/editor-layer-hierarchy-tree.tsx
+++ b/editor/components/editor/editor-layer-hierarchy/editor-layer-hierarchy-tree.tsx
@@ -12,8 +12,13 @@ import { useDispatch } from "core/dispatch";
 export function EditorLayerHierarchy() {
   const [state] = useEditorState();
   const dispatch = useDispatch();
-  const root = state.design?.current?.entry;
-  const layers = root ? flatten(root, ["origin"]) : [];
+  const root = state.selectedPage
+    ? state.design.pages.find((p) => p.id == state.selectedPage).children
+    : [state.design?.input?.entry];
+
+  const layers: FlattenedNode[][] = root
+    ? root.filter((l) => !!l).map((layer) => flatten(layer))
+    : [];
 
   const renderItem = useCallback(
     ({ id, name, depth, type }) => {
@@ -48,14 +53,14 @@ export function EditorLayerHierarchy() {
 
   const haschildren = useCallback(
     (id: string) => {
-      return layers.some((layer) => layer.parent === id);
+      return layers.some((l) => l.some((layer) => layer.parent === id));
     },
-    [layers.length]
+    [layers]
   );
 
   return (
     <TreeView.Root
-      data={layers}
+      data={layers.flat()}
       keyExtractor={useCallback((item: any) => item.id, [])}
       renderItem={renderItem}
     />
@@ -79,11 +84,14 @@ interface FlattenedNode {
 
 const flatten = <T extends ITreeNode>(
   tree: T,
-  properties?: string[],
   parent?: string,
   depth: number = 0
 ): FlattenedNode[] => {
-  const convert = (node: T, properties, depth: number, parent?: string) => {
+  const convert = (node: T, depth: number, parent?: string) => {
+    if (!node) {
+      return;
+    }
+
     const result: FlattenedNode = {
       id: node.id,
       name: node.name,
@@ -92,17 +100,13 @@ const flatten = <T extends ITreeNode>(
       parent,
     };
 
-    properties?.forEach((property) => {
-      (result as object)[property] = node[property];
-    });
-
     return result;
   };
 
   const final = [];
-  final.push(convert(tree, properties, depth, parent));
-  for (const child of tree.children || []) {
-    final.push(...flatten(child, null, tree.id, depth + 1));
+  final.push(convert(tree, depth, parent));
+  for (const child of tree?.children || []) {
+    final.push(...flatten(child, tree.id, depth + 1));
   }
   return final;
 };
diff --git a/editor/components/editor/editor-pages-list/editor-page-item.tsx b/editor/components/editor/editor-pages-list/editor-page-item.tsx
index d466e1a5..4199389a 100644
--- a/editor/components/editor/editor-pages-list/editor-page-item.tsx
+++ b/editor/components/editor/editor-pages-list/editor-page-item.tsx
@@ -1 +1,35 @@
-export const dummy = "";
+import React from "react";
+import { FileIcon } from "@radix-ui/react-icons";
+import styled from "@emotion/styled";
+import { useTheme } from "@emotion/react";
+import { TreeView } from "@editor-ui/hierarchy";
+
+export function EditorPageItem({
+  id,
+  name,
+  selected,
+  onPress,
+}: {
+  id: string;
+  name: string;
+  selected: boolean;
+  onPress: () => void;
+}) {
+  const { icon: iconColor, iconSelected: iconSelectedColor } =
+    useTheme().colors;
+
+  return (
+    <TreeView.Row
+      depth={0}
+      id={id}
+      key={id}
+      sortable={false}
+      selected={selected}
+      onPress={onPress}
+      onDoubleClick={() => {}}
+      icon={<FileIcon color={selected ? iconSelectedColor : iconColor} />}
+    >
+      {name}
+    </TreeView.Row>
+  );
+}
diff --git a/editor/components/editor/editor-pages-list/editor-pages-list.tsx b/editor/components/editor/editor-pages-list/editor-pages-list.tsx
index d466e1a5..d77d1bb4 100644
--- a/editor/components/editor/editor-pages-list/editor-pages-list.tsx
+++ b/editor/components/editor/editor-pages-list/editor-pages-list.tsx
@@ -1 +1,54 @@
-export const dummy = "";
+import React, { useCallback } from "react";
+import styled from "@emotion/styled";
+import { TreeView } from "@editor-ui/hierarchy";
+import { EditorPageItem } from "./editor-page-item";
+import { useEditorState } from "core/states";
+import { useDispatch } from "core/dispatch";
+
+const Container = styled.div<{ expanded: boolean }>(({ theme, expanded }) => ({
+  ...(expanded ? { height: "200px" } : { flex: "0 0 auto" }),
+  display: "flex",
+  flexDirection: "column",
+}));
+
+type PageInfo = {
+  id: string;
+  name: string;
+  type: "design" | "components" | "styles" | "assets";
+};
+
+export function EditorPagesList() {
+  const [state] = useEditorState();
+  const dispatch = useDispatch();
+  const pages = state.design?.pages ?? [];
+
+  return (
+    <Container expanded={true}>
+      <TreeView.Root
+        sortable={false}
+        scrollable={false}
+        data={pages}
+        keyExtractor={useCallback((item: PageInfo) => item.id, [])}
+        renderItem={useCallback(
+          (page: PageInfo, index) => {
+            const selected = page.id === state.selectedPage;
+            return (
+              <EditorPageItem
+                selected={selected}
+                id={page.id}
+                name={page.name}
+                onPress={() => {
+                  dispatch({
+                    type: "select-page",
+                    page: page.id,
+                  });
+                }}
+              />
+            );
+          },
+          [state.selectedPage]
+        )}
+      />
+    </Container>
+  );
+}
diff --git a/editor/components/editor/editor-pages-list/index.ts b/editor/components/editor/editor-pages-list/index.ts
index d466e1a5..62dab1c9 100644
--- a/editor/components/editor/editor-pages-list/index.ts
+++ b/editor/components/editor/editor-pages-list/index.ts
@@ -1 +1 @@
-export const dummy = "";
+export { EditorPagesList } from "./editor-pages-list";
diff --git a/editor/components/editor/editor-sidebar/editor-sidebar.tsx b/editor/components/editor/editor-sidebar/editor-sidebar.tsx
index b68633c1..d3b4165b 100644
--- a/editor/components/editor/editor-sidebar/editor-sidebar.tsx
+++ b/editor/components/editor/editor-sidebar/editor-sidebar.tsx
@@ -1,13 +1,25 @@
-import { SideNavigation } from "components/side-navigation";
 import React from "react";
+import styled from "@emotion/styled";
+import { SideNavigation } from "components/side-navigation";
 import { EditorAppbarFragments } from "../editor-appbar";
 import { EditorLayerHierarchy } from "../editor-layer-hierarchy";
+import { EditorPagesList } from "../editor-pages-list";
 
 export function EditorSidebar() {
   return (
     <SideNavigation>
-      {/* <EditorAppbarFragments.Sidebar /> */}
-      <EditorLayerHierarchy />
+      <EditorAppbarFragments.Sidebar />
+      <SidebarSegment flex={"none"}>
+        <EditorPagesList />
+      </SidebarSegment>
+      <SidebarSegment flex={1}>
+        <EditorLayerHierarchy />
+      </SidebarSegment>
     </SideNavigation>
   );
 }
+
+const SidebarSegment = styled.div<{ flex: number | "none" }>`
+  flex: ${(p) => p.flex};
+  overflow-y: scroll;
+`;
diff --git a/editor/components/side-navigation/side-navigation.tsx b/editor/components/side-navigation/side-navigation.tsx
index baf4478a..8aabec23 100644
--- a/editor/components/side-navigation/side-navigation.tsx
+++ b/editor/components/side-navigation/side-navigation.tsx
@@ -15,4 +15,6 @@ const Wrapper = styled.div`
   align-items: stretch;
   flex-direction: column;
   min-height: 100%;
+  height: 100vh;
+  overflow-y: hidden;
 `;
diff --git a/editor/core/reducers/editor-reducer.ts b/editor/core/reducers/editor-reducer.ts
index da5e499f..b6ae9fa9 100644
--- a/editor/core/reducers/editor-reducer.ts
+++ b/editor/core/reducers/editor-reducer.ts
@@ -1,5 +1,5 @@
 import produce from "immer";
-import { Action, SelectNodeAction } from "core/actions";
+import { Action, SelectNodeAction, SelectPageAction } from "core/actions";
 import { EditorState } from "core/states";
 
 export function editorReducer(state: EditorState, action: Action): EditorState {
@@ -12,8 +12,13 @@ export function editorReducer(state: EditorState, action: Action): EditorState {
       });
     }
     case "select-page": {
-      // return pageReducer(state, action);
+      const { page } = <SelectPageAction>action;
+      return produce(state, (draft) => {
+        draft.selectedPage = page;
+      });
     }
+    default:
+      throw new Error(`Unhandled action type: ${action["type"]}`);
   }
 
   return state;
diff --git a/editor/core/states/editor-state.ts b/editor/core/states/editor-state.ts
index 74f4e6e5..e0441504 100644
--- a/editor/core/states/editor-state.ts
+++ b/editor/core/states/editor-state.ts
@@ -5,23 +5,23 @@ export interface EditorState {
   selectedPage: string;
   selectedNodes: string[];
   selectedLayersOnPreview: string[];
-  design: ReflectRepository;
+  design: FigmaReflectRepository;
 }
 
 export interface EditorSnapshot {
   selectedPage: string;
   selectedNodes: string[];
   selectedLayersOnPreview: string[];
-  design: ReflectRepository;
+  design: FigmaReflectRepository;
 }
 
-interface ReflectRepository {
+interface FigmaReflectRepository {
   /**
    * fileid; filekey
    */
   key: string;
 
   // TODO:
-  pages: [];
-  current: DesignInput;
+  pages: { id: string; name: string; children: ReflectSceneNode[] }[];
+  input: DesignInput;
 }
diff --git a/editor/hooks/use-design.ts b/editor/hooks/use-design.ts
index 8544cea9..a456e3c0 100644
--- a/editor/hooks/use-design.ts
+++ b/editor/hooks/use-design.ts
@@ -14,6 +14,7 @@ import { RemoteDesignSessionCacheStore } from "../store";
 import { convert } from "@design-sdk/figma-node-conversion";
 import { mapFigmaRemoteToFigma } from "@design-sdk/figma-remote/lib/mapper";
 import { useFigmaAccessToken } from ".";
+import { FileResponse } from "@design-sdk/figma-remote-types";
 
 // globally configure auth credentials for interacting with `@design-sdk/figma-remote`
 configure_auth_credentials({
@@ -167,6 +168,32 @@ export function useDesign({
   return design;
 }
 
+export function useDesignFile({ file }: { file: string }) {
+  const [designfile, setDesignFile] = useState<FileResponse>(null);
+  const figmaAccessToken = useFigmaAccessToken();
+  const figmaPersonalAccessToken = personal.get_safe();
+  useEffect(() => {
+    if (file && (figmaAccessToken || figmaPersonalAccessToken)) {
+      async function handle() {
+        const iterator = fetch.fetchFile({
+          file,
+          auth: {
+            personalAccessToken: figmaPersonalAccessToken,
+            accessToken: figmaAccessToken,
+          },
+        });
+        let next: IteratorResult<FileResponse>;
+        while ((next = await iterator.next()).done === false) {
+          setDesignFile(next.value);
+        }
+      }
+      handle();
+    }
+  }, [file, figmaAccessToken]);
+
+  return designfile;
+}
+
 const analyze = (query: string): "id" | DesignProvider => {
   const _r = analyzeDesignUrl(query);
   if (_r == "unknown") {
diff --git a/editor/pages/to-code/index.tsx b/editor/pages/to-code/index.tsx
index 61cecdc7..ed625b25 100644
--- a/editor/pages/to-code/index.tsx
+++ b/editor/pages/to-code/index.tsx
@@ -1,4 +1,10 @@
-import React, { useEffect, useState, useCallback, useReducer } from "react";
+import React, {
+  useEffect,
+  useState,
+  useCallback,
+  useReducer,
+  useMemo,
+} from "react";
 import { useRouter } from "next/router";
 import { SigninToContinueBannerPrmoptProvider } from "components/prompt-banner-signin-to-continue";
 import { Editor } from "scaffolds/editor";
@@ -11,7 +17,7 @@ import {
 import { WorkspaceAction } from "core/actions";
 import { createInitialWorkspaceState } from "core/states";
 import { workspaceReducer } from "core/reducers";
-import { useDesign } from "hooks";
+import { useDesign, useDesignFile } from "hooks";
 import {
   get_enable_components_config_from_query,
   get_framework_config_from_query,
@@ -19,6 +25,7 @@ import {
 } from "query/to-code-options-from-query";
 import { PendingState } from "core/utility-types";
 import { DesignInput } from "@designto/config/input";
+import { convert } from "@design-sdk/figma-node-conversion";
 
 const pending_workspace_state = createPendingWorkspaceState();
 //
@@ -26,7 +33,7 @@ type InitializationAction =
   | { type: "set"; value: EditorSnapshot }
   | { type: "update"; value: WorkspaceAction };
 
-function reducer(
+function initialReducer(
   state: PendingState<WorkspaceState>,
   action: InitializationAction
 ): PendingState<WorkspaceState> {
@@ -52,17 +59,19 @@ export default function Page() {
   const router = useRouter();
 
   // region global state
-  const [state, dispatch] = useReducer(reducer, { type: "pending" });
+  const [initialState, initialDispatcher] = useReducer(initialReducer, {
+    type: "pending",
+  });
 
   const handleDispatch = useCallback((action: WorkspaceAction) => {
-    dispatch({ type: "update", value: action });
+    initialDispatcher({ type: "update", value: action });
   }, []);
   // endregion global state
 
   const design = useDesign({ type: "use-router", router: router });
 
   useEffect(() => {
-    if (state.type === "success") return;
+    if (initialState.type === "success") return;
 
     if (design) {
       // TODO: set preferences to workspace state.
@@ -74,7 +83,7 @@ export default function Page() {
       const enable_components = get_enable_components_config_from_query(
         router.query
       );
-      dispatch({
+      initialDispatcher({
         type: "set",
         value: {
           selectedNodes: [design.node],
@@ -83,7 +92,7 @@ export default function Page() {
           design: {
             pages: [], // TODO:
             key: design.file,
-            current: DesignInput.fromApiResponse({
+            input: DesignInput.fromApiResponse({
               ...design,
               entry: design.reflect,
             }),
@@ -93,8 +102,52 @@ export default function Page() {
     }
   }, [design, router]);
 
+  // background whole file fetching
+  const file = useDesignFile({ file: design?.file });
+  const prevstate =
+    initialState.type == "success" && initialState.value.history.present;
+  const selectedPage = useMemo(() => {
+    if (prevstate.selectedNodes && file?.document?.children) {
+      return prevstate.selectedNodes.length > 0
+        ? file.document.children.find((page) => {
+            return isChildrenOf(prevstate.selectedNodes[0], page);
+          })?.id ?? null
+        : // find page of current selection.
+          null;
+    }
+    return null;
+  }, [file?.document?.children]);
+
+  useEffect(() => {
+    if (file && prevstate) {
+      const val: EditorSnapshot = {
+        ...prevstate,
+        design: {
+          ...prevstate.design,
+          pages: file.document.children.map((page) => ({
+            id: page.id,
+            name: page.name,
+            children: page["children"]?.map((child) => {
+              return convert.intoReflectNode(child);
+            }),
+            type: "design",
+          })),
+        },
+        selectedPage: selectedPage,
+      };
+
+      initialDispatcher({
+        type: "set",
+        value: val,
+      });
+    }
+  }, [file?.document?.children]);
+  // endregion
+
   const safe_value =
-    state.type === "success" ? state.value : pending_workspace_state;
+    initialState.type === "success"
+      ? initialState.value
+      : pending_workspace_state;
 
   return (
     <SigninToContinueBannerPrmoptProvider>
@@ -104,3 +157,14 @@ export default function Page() {
     </SigninToContinueBannerPrmoptProvider>
   );
 }
+
+type Tree = {
+  readonly id: string;
+  readonly children?: ReadonlyArray<Tree>;
+};
+
+function isChildrenOf(child: string, parent: Tree) {
+  if (child === parent.id) return true;
+  if (parent.children?.length === 0) return false;
+  return parent.children?.some((c) => isChildrenOf(child, c)) ?? false;
+}
diff --git a/editor/scaffolds/editor/index.tsx b/editor/scaffolds/editor/index.tsx
index b4ff74a8..664fd895 100644
--- a/editor/scaffolds/editor/index.tsx
+++ b/editor/scaffolds/editor/index.tsx
@@ -42,7 +42,7 @@ export function Editor() {
     wstate.preferences.preview_runner_framework_config;
   const enable_components =
     wstate.preferences.enable_preview_feature_components_support;
-  const design = state.design?.current;
+  const design = state.design?.input;
   const focusid =
     state?.selectedNodes?.length === 1 ? state.selectedNodes[0] : null;
   const focused =
diff --git a/externals/design-sdk b/externals/design-sdk
index 663a1b9f..9be0c1a6 160000
--- a/externals/design-sdk
+++ b/externals/design-sdk
@@ -1 +1 @@
-Subproject commit 663a1b9f2b08dd88d2cb9770cec828513ac41bf0
+Subproject commit 9be0c1a60bcc1787100df2f20afb7bcc1a7c6e65

From 3f7be40bee6c7cb48d98ee7628e2f4c7038cff34 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sun, 12 Dec 2021 01:23:04 +0900
Subject: [PATCH 3/6] update design sdk

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

diff --git a/externals/design-sdk b/externals/design-sdk
index 9be0c1a6..9fa7aa75 160000
--- a/externals/design-sdk
+++ b/externals/design-sdk
@@ -1 +1 @@
-Subproject commit 9be0c1a60bcc1787100df2f20afb7bcc1a7c6e65
+Subproject commit 9fa7aa7504a15ee609000d97e22750d1c5fcf9ae

From c4e1a3908b86e35edad12e577c4ba620828c4f59 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sun, 12 Dec 2021 03:57:42 +0900
Subject: [PATCH 4/6] sanitizing

---
 .../editor-pages-list/editor-pages-list.tsx   |   1 +
 editor/hooks/use-design.ts                    |   1 -
 editor/scaffolds/canvas/canvas.tsx            |  63 ++++++
 editor/scaffolds/canvas/index.ts              |   1 +
 .../editor/{index.tsx => editor.tsx}          | 182 +++++++-----------
 editor/scaffolds/editor/index.ts              |   1 +
 editor/utils/design-query/index.ts            |  29 +++
 packages/builder-config/input/design-input.ts |  13 +-
 .../designto-token/token-masking/index.ts     |  19 +-
 9 files changed, 190 insertions(+), 120 deletions(-)
 create mode 100644 editor/scaffolds/canvas/canvas.tsx
 create mode 100644 editor/scaffolds/canvas/index.ts
 rename editor/scaffolds/editor/{index.tsx => editor.tsx} (65%)
 create mode 100644 editor/scaffolds/editor/index.ts
 create mode 100644 editor/utils/design-query/index.ts

diff --git a/editor/components/editor/editor-pages-list/editor-pages-list.tsx b/editor/components/editor/editor-pages-list/editor-pages-list.tsx
index d77d1bb4..4e2c844e 100644
--- a/editor/components/editor/editor-pages-list/editor-pages-list.tsx
+++ b/editor/components/editor/editor-pages-list/editor-pages-list.tsx
@@ -34,6 +34,7 @@ export function EditorPagesList() {
             const selected = page.id === state.selectedPage;
             return (
               <EditorPageItem
+                key={page.id}
                 selected={selected}
                 id={page.id}
                 name={page.name}
diff --git a/editor/hooks/use-design.ts b/editor/hooks/use-design.ts
index a456e3c0..0c3b808a 100644
--- a/editor/hooks/use-design.ts
+++ b/editor/hooks/use-design.ts
@@ -63,7 +63,6 @@ export function useDesign({
 
   useEffect(() => {
     let targetnodeconfig: FigmaTargetNodeConfig;
-    console.log("type", type);
     switch (type) {
       case "use-file-node-id": {
         if (props["file"] && props["node"]) {
diff --git a/editor/scaffolds/canvas/canvas.tsx b/editor/scaffolds/canvas/canvas.tsx
new file mode 100644
index 00000000..0e3a33fa
--- /dev/null
+++ b/editor/scaffolds/canvas/canvas.tsx
@@ -0,0 +1,63 @@
+import React, { useEffect, useState } from "react";
+import styled from "@emotion/styled";
+import { PreviewAndRunPanel } from "components/preview-and-run";
+import { EditorAppbarFragments, EditorSidebar } from "components/editor";
+import { Result } from "@designto/code";
+
+export function Canvas({
+  preview,
+  originsize,
+  fileid,
+  sceneid,
+}: {
+  fileid: string;
+  sceneid: string;
+  originsize: { width: number; height: number };
+  preview: Result;
+}) {
+  return (
+    <>
+      <EditorAppbarFragments.Canvas />
+      {preview ? (
+        <PreviewAndRunPanel
+          // key={_key_for_preview}
+          config={{
+            src: preview.scaffold.raw,
+            platform: "vanilla",
+            componentName: preview.name,
+            sceneSize: originsize && {
+              w: originsize.width,
+              h: originsize.height,
+            },
+            initialMode: "run",
+            fileid: fileid,
+            sceneid: sceneid,
+            hideModeChangeControls: true,
+          }}
+        />
+      ) : (
+        <EditorCanvasSkeleton />
+      )}
+    </>
+  );
+}
+
+const EditorCanvasSkeleton = () => {
+  return (
+    <PreviewAndRunPanel
+      config={{
+        src: "",
+        platform: "vanilla",
+        componentName: "loading",
+        sceneSize: {
+          w: 375,
+          h: 812,
+        },
+        initialMode: "run",
+        fileid: "loading",
+        sceneid: "loading",
+        hideModeChangeControls: true,
+      }}
+    />
+  );
+};
diff --git a/editor/scaffolds/canvas/index.ts b/editor/scaffolds/canvas/index.ts
new file mode 100644
index 00000000..c57c194f
--- /dev/null
+++ b/editor/scaffolds/canvas/index.ts
@@ -0,0 +1 @@
+export { Canvas } from "./canvas";
diff --git a/editor/scaffolds/editor/index.tsx b/editor/scaffolds/editor/editor.tsx
similarity index 65%
rename from editor/scaffolds/editor/index.tsx
rename to editor/scaffolds/editor/editor.tsx
index 664fd895..78cd80fc 100644
--- a/editor/scaffolds/editor/index.tsx
+++ b/editor/scaffolds/editor/editor.tsx
@@ -11,7 +11,7 @@ import { WorkspaceBottomPanelDockLayout } from "layouts/panel/workspace-bottom-p
 import { CodeEditor } from "components/code-editor";
 import { ClearRemoteDesignSessionCache } from "components/clear-remote-design-session-cache";
 import { WidgetTree } from "components/visualization/json-visualization/json-tree";
-import { EditorAppbarFragments, EditorSidebar } from "components/editor";
+import { EditorSidebar } from "components/editor";
 import { useEditorState, useWorkspaceState } from "core/states";
 import { designToCode, Result } from "@designto/code";
 import { RemoteImageRepositories } from "@design-sdk/figma-remote/lib/asset-repository/image-repository";
@@ -22,9 +22,15 @@ import {
 } from "@design-sdk/core/assets-repository";
 import { personal } from "@design-sdk/figma-auth-store";
 import { useFigmaAccessToken } from "hooks";
-import { ReflectSceneNode } from "@design-sdk/figma-node";
 import { get_framework_config } from "query/to-code-options-from-query";
 import { CodeOptionsControl } from "components/codeui-code-options-control";
+import { DesignInput } from "@designto/config/input";
+import { Canvas } from "scaffolds/canvas";
+import {
+  find_node_by_id_under_entry,
+  find_node_by_id_under_inpage_nodes,
+} from "utils/design-query";
+import { vanilla_presets } from "@grida/builder-config-preset";
 
 export function Editor() {
   const router = useRouter();
@@ -38,17 +44,26 @@ export function Editor() {
   const [framework_config, set_framework_config] = useState(
     wstate.preferences.framework_config
   );
-  const preview_runner_framework =
-    wstate.preferences.preview_runner_framework_config;
+
   const enable_components =
     wstate.preferences.enable_preview_feature_components_support;
-  const design = state.design?.input;
-  const focusid =
+
+  const thisPageNodes = state.selectedPage
+    ? state.design.pages.find((p) => p.id == state.selectedPage).children
+    : null;
+
+  const targetId =
     state?.selectedNodes?.length === 1 ? state.selectedNodes[0] : null;
-  const focused =
-    find_node_by_id_under_entry(focusid, design?.entry) ?? design?.entry;
 
-  // const focusdesign = design?.nodes.find((n) => n.id === focusid);
+  const container_of_target =
+    find_node_by_id_under_inpage_nodes(targetId, thisPageNodes) || null;
+
+  const root = thisPageNodes
+    ? container_of_target && DesignInput.fromDesign(container_of_target)
+    : state.design?.input;
+
+  const targetted =
+    find_node_by_id_under_entry(targetId, root?.entry) ?? root?.entry;
 
   useEffect(() => {
     // ------------------------------------------------------------
@@ -75,12 +90,12 @@ export function Editor() {
   }, [state.design?.key, fat]);
 
   useEffect(() => {
-    if (focused && framework_config) {
-      const input = {
-        id: focused.id,
-        name: focused.name,
-        entry: focused,
-        repository: design.repository,
+    if (targetted && framework_config) {
+      const _input = {
+        id: targetted.id,
+        name: targetted.name,
+        entry: targetted,
+        repository: root.repository,
       };
       const build_config = {
         ...config.default_build_configuration,
@@ -88,15 +103,14 @@ export function Editor() {
       };
 
       const on_result = (result: Result) => {
-        setResult(result);
-        if (framework_config.framework == preview_runner_framework.framework) {
-          setPreview(result);
+        if (result.id == targetted.id) {
+          setResult(result);
         }
       };
 
       // build code without assets fetch
       designToCode({
-        input: input,
+        input: _input,
         framework: framework_config,
         asset_config: { skip_asset_replacement: true },
         build_config: build_config,
@@ -104,48 +118,49 @@ export function Editor() {
 
       // build final code with asset fetch
       designToCode({
-        input: input,
+        input: root,
         framework: framework_config,
         asset_config: { asset_repository: MainImageRepository.instance },
         build_config: build_config,
       }).then(on_result);
     }
-  }, [focused?.id, framework_config?.framework]);
+  }, [targetted?.id, framework_config?.framework]);
 
   useEffect(() => {
-    if (design) {
-      const { id, name } = design.entry;
-      const input = {
+    if (root) {
+      const { id, name } = root.entry;
+      const _input = {
         id: id,
         name: name,
-        entry: design.entry,
+        entry: root.entry,
       };
       const build_config = {
         ...config.default_build_configuration,
         disable_components: true,
       };
-      // ----- for preview -----
-      if (framework_config?.framework !== preview_runner_framework.framework) {
-        designToCode({
-          input: input,
-          build_config: build_config,
-          framework: preview_runner_framework,
-          asset_config: { skip_asset_replacement: true },
-        }).then((result) => {
-          setPreview(result);
-        });
 
-        designToCode({
-          input: input,
-          build_config: build_config,
-          framework: preview_runner_framework,
-          asset_config: { asset_repository: MainImageRepository.instance },
-        }).then((result) => {
+      const on_preview_result = (result: Result) => {
+        if (result.id == targetId) {
           setPreview(result);
-        });
-      }
+        }
+      };
+
+      // ----- for preview -----
+      designToCode({
+        input: _input,
+        build_config: build_config,
+        framework: vanilla_presets.vanilla_default,
+        asset_config: { skip_asset_replacement: true },
+      }).then(on_preview_result);
+
+      designToCode({
+        input: root,
+        build_config: build_config,
+        framework: vanilla_presets.vanilla_default,
+        asset_config: { asset_repository: MainImageRepository.instance },
+      }).then(on_preview_result);
     }
-  }, [design?.id]);
+  }, [root?.id]);
 
   const { code, scaffold, name: componentName } = result ?? {};
 
@@ -156,29 +171,15 @@ export function Editor() {
     >
       <WorkspaceContentPanelGridLayout>
         <WorkspaceContentPanel>
-          <>
-            <EditorAppbarFragments.Canvas />
-            {preview ? (
-              <PreviewAndRunPanel
-                // key={_key_for_preview}
-                config={{
-                  src: preview.scaffold.raw,
-                  platform: preview_runner_framework.framework,
-                  componentName: componentName,
-                  sceneSize: {
-                    w: design.entry?.width,
-                    h: design.entry?.height,
-                  },
-                  initialMode: "run",
-                  fileid: state.design.key,
-                  sceneid: design.id,
-                  hideModeChangeControls: true,
-                }}
-              />
-            ) : (
-              <EditorCanvasSkeleton />
-            )}
-          </>
+          <Canvas
+            preview={preview}
+            fileid={state?.design?.key}
+            sceneid={root?.id}
+            originsize={{
+              width: root?.entry?.width,
+              height: root?.entry?.height,
+            }}
+          />
         </WorkspaceContentPanel>
         <WorkspaceContentPanel backgroundColor={"rgba(30, 30, 30, 1)"}>
           <CodeEditorContainer>
@@ -228,13 +229,13 @@ export function Editor() {
               >
                 <div style={{ flex: 1 }}>
                   <ClearRemoteDesignSessionCache
-                    key={design.id}
+                    key={root.id}
                     file={state.design.key}
-                    node={design.id}
+                    node={root.id}
                   />
                   <br />
-                  {(design.entry.origin === "INSTANCE" ||
-                    design.entry.origin === "COMPONENT") && (
+                  {(root.entry.origin === "INSTANCE" ||
+                    root.entry.origin === "COMPONENT") && (
                     <button
                       onClick={() => {
                         router.push({
@@ -249,7 +250,7 @@ export function Editor() {
                 </div>
 
                 <div style={{ flex: 2 }}>
-                  <WidgetTree data={design.entry} />
+                  <WidgetTree data={root.entry} />
                 </div>
                 <div style={{ flex: 2 }}>
                   <WidgetTree data={result.widget} />
@@ -263,45 +264,8 @@ export function Editor() {
   );
 }
 
-const EditorCanvasSkeleton = () => {
-  return (
-    <PreviewAndRunPanel
-      // key={_key_for_preview}
-      config={{
-        src: "",
-        platform: "vanilla",
-        componentName: "loading",
-        sceneSize: {
-          w: 375,
-          h: 812,
-        },
-        initialMode: "run",
-        fileid: "loading",
-        sceneid: "loading",
-        hideModeChangeControls: true,
-      }}
-    />
-  );
-};
-
 const CodeEditorContainer = styled.div`
   display: flex;
   flex-direction: column;
   align-items: stretch;
 `;
-
-const find_node_by_id_under_entry = (id: string, entry: ReflectSceneNode) => {
-  if (!entry) return null;
-  if (entry.id === id) {
-    return entry;
-  }
-  if (entry.children) {
-    for (const child of entry.children) {
-      const found = find_node_by_id_under_entry(id, child);
-      if (found) {
-        return found;
-      }
-    }
-  }
-  return null;
-};
diff --git a/editor/scaffolds/editor/index.ts b/editor/scaffolds/editor/index.ts
new file mode 100644
index 00000000..f1298df8
--- /dev/null
+++ b/editor/scaffolds/editor/index.ts
@@ -0,0 +1 @@
+export { Editor } from "./editor";
diff --git a/editor/utils/design-query/index.ts b/editor/utils/design-query/index.ts
new file mode 100644
index 00000000..536fd49e
--- /dev/null
+++ b/editor/utils/design-query/index.ts
@@ -0,0 +1,29 @@
+import { ReflectSceneNode } from "@design-sdk/figma-node";
+
+export const find_node_by_id_under_entry = (
+  id: string,
+  entry: ReflectSceneNode
+): ReflectSceneNode => {
+  if (!entry) return null;
+  if (entry.id === id) {
+    return entry;
+  }
+  if (entry.children) {
+    for (const child of entry.children) {
+      const found = find_node_by_id_under_entry(id, child);
+      if (found) {
+        return found;
+      }
+    }
+  }
+  return null;
+};
+
+export const find_node_by_id_under_inpage_nodes = (
+  id: string,
+  nodes: ReflectSceneNode[]
+): ReflectSceneNode => {
+  return nodes?.find((node) => {
+    return find_node_by_id_under_entry(id, node);
+  });
+};
diff --git a/packages/builder-config/input/design-input.ts b/packages/builder-config/input/design-input.ts
index 477f22d4..33ba45ba 100644
--- a/packages/builder-config/input/design-input.ts
+++ b/packages/builder-config/input/design-input.ts
@@ -35,7 +35,18 @@ export class DesignInput implements IDesignInput {
   }
 
   static fromDesign(design: ReflectSceneNode): DesignInput {
-    return new DesignInput({ entry: design });
+    const _allnodes = mapGrandchildren(design, 0, {
+      includeThis: true,
+      ignoreGroup: false,
+    });
+
+    const repository = new NodeRepository({
+      // TODO: components not supported for `fromdesign`
+      components: [],
+      nodes: [...(_allnodes as any)],
+    });
+
+    return new DesignInput({ entry: design, repository: repository });
   }
 
   static fromApiResponse({
diff --git a/packages/designto-token/token-masking/index.ts b/packages/designto-token/token-masking/index.ts
index f2e40610..1eb83806 100644
--- a/packages/designto-token/token-masking/index.ts
+++ b/packages/designto-token/token-masking/index.ts
@@ -91,14 +91,15 @@ function fromMultichild(
     // endregion
     // --------------------------------------------------
 
-    const clippedcontents_new_layout_except_irrelavents = tokenizeLayout.fromFrameOrGroup(
-      cloned_container,
-      maskitee,
-      {
-        is_root: cloned_container.isRoot,
-      },
-      config
-    );
+    const clippedcontents_new_layout_except_irrelavents =
+      tokenizeLayout.fromFrameOrGroup(
+        cloned_container,
+        maskitee,
+        {
+          is_root: cloned_container.isRoot,
+        },
+        config
+      );
 
     const raw_maskier_key = keyFromNode(maskier); // we do not override key for clipped because maskier it self is not being nested, but being converted as a container-like.
     let clipped;
@@ -130,7 +131,7 @@ function fromMultichild(
         case ReflectSceneNodeType.vector:
           // TODO: multi path vector is not supported
           const vector_asset_data = (maskier as ReflectVectorNode)
-            .vectorPaths[0]?.data;
+            .vectorPaths?.[0]?.data;
 
           clipped = new ClipPath({
             key: raw_maskier_key,

From 263f3c75571f6d9ce73dcac256af753c517a3b5d Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sun, 12 Dec 2021 04:20:40 +0900
Subject: [PATCH 5/6] add full figma file import support (with buggy preview)

---
 editor/hooks/use-design.ts     | 2 +-
 editor/pages/to-code/index.tsx | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/editor/hooks/use-design.ts b/editor/hooks/use-design.ts
index 0c3b808a..4cae517d 100644
--- a/editor/hooks/use-design.ts
+++ b/editor/hooks/use-design.ts
@@ -52,7 +52,7 @@ interface UseDesignFromFileAndNode {
 }
 
 export function useDesign({
-  use_session_cache = true,
+  use_session_cache = false,
   type,
   ...props
 }: UseDesignProp) {
diff --git a/editor/pages/to-code/index.tsx b/editor/pages/to-code/index.tsx
index ed625b25..595ef3ab 100644
--- a/editor/pages/to-code/index.tsx
+++ b/editor/pages/to-code/index.tsx
@@ -26,6 +26,7 @@ import {
 import { PendingState } from "core/utility-types";
 import { DesignInput } from "@designto/config/input";
 import { convert } from "@design-sdk/figma-node-conversion";
+import { mapper } from "@design-sdk/figma-remote";
 
 const pending_workspace_state = createPendingWorkspaceState();
 //
@@ -128,7 +129,8 @@ export default function Page() {
             id: page.id,
             name: page.name,
             children: page["children"]?.map((child) => {
-              return convert.intoReflectNode(child);
+              const _mapped = mapper.mapFigmaRemoteToFigma(child);
+              return convert.intoReflectNode(_mapped);
             }),
             type: "design",
           })),

From 937ee127320dd0ac43e24dc8521967520cfdb17b Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Sun, 12 Dec 2021 04:40:31 +0900
Subject: [PATCH 6/6] update canvas to response to selected layer

---
 editor/scaffolds/editor/editor.tsx | 77 ++++++++++++++++--------------
 1 file changed, 41 insertions(+), 36 deletions(-)

diff --git a/editor/scaffolds/editor/editor.tsx b/editor/scaffolds/editor/editor.tsx
index 78cd80fc..c25c582b 100644
--- a/editor/scaffolds/editor/editor.tsx
+++ b/editor/scaffolds/editor/editor.tsx
@@ -90,11 +90,12 @@ export function Editor() {
   }, [state.design?.key, fat]);
 
   useEffect(() => {
-    if (targetted && framework_config) {
+    const __target = targetted;
+    if (__target && framework_config) {
       const _input = {
-        id: targetted.id,
-        name: targetted.name,
-        entry: targetted,
+        id: __target.id,
+        name: __target.name,
+        entry: __target,
         repository: root.repository,
       };
       const build_config = {
@@ -126,41 +127,45 @@ export function Editor() {
     }
   }, [targetted?.id, framework_config?.framework]);
 
-  useEffect(() => {
-    if (root) {
-      const { id, name } = root.entry;
-      const _input = {
-        id: id,
-        name: name,
-        entry: root.entry,
-      };
-      const build_config = {
-        ...config.default_build_configuration,
-        disable_components: true,
-      };
+  useEffect(
+    () => {
+      const __target = targetted; // root.entry;
+      if (__target) {
+        const _input = {
+          id: __target.id,
+          name: __target.name,
+          entry: __target,
+        };
+        const build_config = {
+          ...config.default_build_configuration,
+          disable_components: true,
+        };
 
-      const on_preview_result = (result: Result) => {
-        if (result.id == targetId) {
-          setPreview(result);
-        }
-      };
+        const on_preview_result = (result: Result) => {
+          if (result.id == targetId) {
+            setPreview(result);
+          }
+        };
 
-      // ----- for preview -----
-      designToCode({
-        input: _input,
-        build_config: build_config,
-        framework: vanilla_presets.vanilla_default,
-        asset_config: { skip_asset_replacement: true },
-      }).then(on_preview_result);
+        // ----- for preview -----
+        designToCode({
+          input: _input,
+          build_config: build_config,
+          framework: vanilla_presets.vanilla_default,
+          asset_config: { skip_asset_replacement: true },
+        }).then(on_preview_result);
 
-      designToCode({
-        input: root,
-        build_config: build_config,
-        framework: vanilla_presets.vanilla_default,
-        asset_config: { asset_repository: MainImageRepository.instance },
-      }).then(on_preview_result);
-    }
-  }, [root?.id]);
+        designToCode({
+          input: root,
+          build_config: build_config,
+          framework: vanilla_presets.vanilla_default,
+          asset_config: { asset_repository: MainImageRepository.instance },
+        }).then(on_preview_result);
+      }
+    },
+    [targetted?.id]
+    // [root?.id]
+  );
 
   const { code, scaffold, name: componentName } = result ?? {};