daangn · orionmiz · Feb 3, 2023 · Feb 3, 2023 · Feb 3, 2023 · Feb 3, 2023
diff --git a/.pnp.cjs b/.pnp.cjs
diff --git a/.yarn/cache/@babel-core-npm-7.21.0-fb3817b0e5-357f4dd363.zip b/.yarn/cache/@babel-core-npm-7.21.0-fb3817b0e5-357f4dd363.zip
diff --git a/.yarn/cache/@babel-generator-npm-7.21.1-239f51eac7-69085a211f.zip b/.yarn/cache/@babel-generator-npm-7.21.1-239f51eac7-69085a211f.zip
diff --git a/.yarn/cache/@babel-helper-function-name-npm-7.21.0-a17ce5a05a-d63e63c3e0.zip b/.yarn/cache/@babel-helper-function-name-npm-7.21.0-a17ce5a05a-d63e63c3e0.zip
diff --git a/.yarn/cache/@babel-helper-module-transforms-npm-7.21.2-c33f2d2d0e-8a1c129a4f.zip b/.yarn/cache/@babel-helper-module-transforms-npm-7.21.2-c33f2d2d0e-8a1c129a4f.zip
diff --git a/.yarn/cache/@babel-helpers-npm-7.21.0-083aef3af1-9370dad2bb.zip b/.yarn/cache/@babel-helpers-npm-7.21.0-083aef3af1-9370dad2bb.zip
diff --git a/.yarn/cache/@babel-parser-npm-7.21.2-43751d3737-e2b89de2c6.zip b/.yarn/cache/@babel-parser-npm-7.21.2-43751d3737-e2b89de2c6.zip
diff --git a/.yarn/cache/@babel-plugin-syntax-typescript-npm-7.20.0-21fa6329fe-6189c0b5c3.zip b/.yarn/cache/@babel-plugin-syntax-typescript-npm-7.20.0-21fa6329fe-6189c0b5c3.zip
diff --git a/.yarn/cache/@babel-traverse-npm-7.21.2-2947441720-d851e3f5cf.zip b/.yarn/cache/@babel-traverse-npm-7.21.2-2947441720-d851e3f5cf.zip
diff --git a/.yarn/cache/@babel-types-npm-7.21.2-1446982c93-a45a52acde.zip b/.yarn/cache/@babel-types-npm-7.21.2-1446982c93-a45a52acde.zip
diff --git a/.yarn/cache/@crxjs-vite-plugin-npm-2.0.0-beta.15-80ba3ef979-bb295d7471.zip b/.yarn/cache/@crxjs-vite-plugin-npm-2.0.0-beta.15-80ba3ef979-bb295d7471.zip
diff --git a/.yarn/cache/@emotion-hash-npm-0.9.0-efbc0b3f3f-b63428f7c8.zip b/.yarn/cache/@emotion-hash-npm-0.9.0-efbc0b3f3f-b63428f7c8.zip
diff --git a/.yarn/cache/@rollup-pluginutils-npm-4.2.1-0f52a5eba2-6bc41f22b1.zip b/.yarn/cache/@rollup-pluginutils-npm-4.2.1-0f52a5eba2-6bc41f22b1.zip
diff --git a/.yarn/cache/@swc-core-darwin-arm64-npm-1.3.40-9b6a93bfe9-8.zip b/.yarn/cache/@swc-core-darwin-arm64-npm-1.3.40-9b6a93bfe9-8.zip
diff --git a/.yarn/cache/@swc-core-darwin-x64-npm-1.3.40-0d796610e6-8.zip b/.yarn/cache/@swc-core-darwin-x64-npm-1.3.40-0d796610e6-8.zip
diff --git a/.yarn/cache/@swc-core-linux-arm64-gnu-npm-1.3.40-da0ce1965e-8.zip b/.yarn/cache/@swc-core-linux-arm64-gnu-npm-1.3.40-da0ce1965e-8.zip
diff --git a/.yarn/cache/@swc-core-linux-arm64-musl-npm-1.3.40-30f602c0a9-8.zip b/.yarn/cache/@swc-core-linux-arm64-musl-npm-1.3.40-30f602c0a9-8.zip
diff --git a/.yarn/cache/@swc-core-linux-x64-gnu-npm-1.3.40-f8af91d97a-8.zip b/.yarn/cache/@swc-core-linux-x64-gnu-npm-1.3.40-f8af91d97a-8.zip
diff --git a/.yarn/cache/@swc-core-linux-x64-musl-npm-1.3.40-bfbdb86665-8.zip b/.yarn/cache/@swc-core-linux-x64-musl-npm-1.3.40-bfbdb86665-8.zip
diff --git a/.yarn/cache/@swc-core-npm-1.3.40-e482befac9-3ec2919784.zip b/.yarn/cache/@swc-core-npm-1.3.40-e482befac9-3ec2919784.zip
diff --git a/.yarn/cache/@types-chrome-npm-0.0.223-b09e03d5e8-17cdb32396.zip b/.yarn/cache/@types-chrome-npm-0.0.223-b09e03d5e8-17cdb32396.zip
diff --git a/.yarn/cache/@types-filesystem-npm-0.0.32-f9e6035fd6-4b9079d200.zip b/.yarn/cache/@types-filesystem-npm-0.0.32-f9e6035fd6-4b9079d200.zip
diff --git a/.yarn/cache/@types-filewriter-npm-0.0.29-08151cd903-0c58aa875c.zip b/.yarn/cache/@types-filewriter-npm-0.0.29-08151cd903-0c58aa875c.zip
diff --git a/.yarn/cache/@types-har-format-npm-1.2.10-5a11b22f1e-14c0118d80.zip b/.yarn/cache/@types-har-format-npm-1.2.10-5a11b22f1e-14c0118d80.zip
diff --git a/.yarn/cache/@vanilla-extract-babel-plugin-debug-ids-npm-1.0.2-c786152a3a-4f3e448ae5.zip b/.yarn/cache/@vanilla-extract-babel-plugin-debug-ids-npm-1.0.2-c786152a3a-4f3e448ae5.zip
diff --git a/.yarn/cache/@vanilla-extract-css-npm-1.10.0-824720cf9e-31bbe8ad7b.zip b/.yarn/cache/@vanilla-extract-css-npm-1.10.0-824720cf9e-31bbe8ad7b.zip
diff --git a/.yarn/cache/@vanilla-extract-integration-npm-6.2.1-c4d6e852fb-28bda6804f.zip b/.yarn/cache/@vanilla-extract-integration-npm-6.2.1-c4d6e852fb-28bda6804f.zip
diff --git a/.yarn/cache/@vanilla-extract-vite-plugin-npm-3.8.0-bdc618c39d-475b24ec95.zip b/.yarn/cache/@vanilla-extract-vite-plugin-npm-3.8.0-bdc618c39d-475b24ec95.zip
diff --git a/.yarn/cache/@vitejs-plugin-react-swc-npm-3.2.0-2b39c64989-9df519fee5.zip b/.yarn/cache/@vitejs-plugin-react-swc-npm-3.2.0-2b39c64989-9df519fee5.zip
diff --git a/.yarn/cache/@webcomponents-custom-elements-npm-1.5.1-bb39eda15a-25bd660ede.zip b/.yarn/cache/@webcomponents-custom-elements-npm-1.5.1-bb39eda15a-25bd660ede.zip
diff --git a/.yarn/cache/acorn-npm-8.8.2-9d518fd7d3-f790b99a1b.zip b/.yarn/cache/acorn-npm-8.8.2-9d518fd7d3-f790b99a1b.zip
diff --git a/.yarn/cache/acorn-walk-npm-8.2.0-2f2cac3177-1715e76c01.zip b/.yarn/cache/acorn-walk-npm-8.2.0-2f2cac3177-1715e76c01.zip
diff --git a/.yarn/cache/ahocorasick-npm-1.0.2-b58e0704ac-a13ce44035.zip b/.yarn/cache/ahocorasick-npm-1.0.2-b58e0704ac-a13ce44035.zip
diff --git a/.yarn/cache/boolbase-npm-1.0.0-965fe9af6d-3e25c80ef6.zip b/.yarn/cache/boolbase-npm-1.0.0-965fe9af6d-3e25c80ef6.zip
diff --git a/.yarn/cache/cac-npm-6.7.14-c46284e425-45a2496a94.zip b/.yarn/cache/cac-npm-6.7.14-c46284e425-45a2496a94.zip
diff --git a/.yarn/cache/caniuse-lite-npm-1.0.30001450-728fe790ae-511b360bfc.zip b/.yarn/cache/caniuse-lite-npm-1.0.30001450-728fe790ae-511b360bfc.zip
diff --git a/.yarn/cache/caniuse-lite-npm-1.0.30001451-47fea7d7ec-48a06a7881.zip b/.yarn/cache/caniuse-lite-npm-1.0.30001451-47fea7d7ec-48a06a7881.zip
diff --git a/.yarn/cache/cheerio-npm-1.0.0-rc.12-6785a97c2a-5d4c1b7a53.zip b/.yarn/cache/cheerio-npm-1.0.0-rc.12-6785a97c2a-5d4c1b7a53.zip
diff --git a/.yarn/cache/cheerio-select-npm-2.1.0-e92bc2f296-843d6d4799.zip b/.yarn/cache/cheerio-select-npm-2.1.0-e92bc2f296-843d6d4799.zip
diff --git a/.yarn/cache/chrome-launcher-npm-0.15.1-93903cae0a-b534221b83.zip b/.yarn/cache/chrome-launcher-npm-0.15.1-93903cae0a-b534221b83.zip
diff --git a/.yarn/cache/connect-injector-npm-0.4.4-1bbd6dd323-efb4e775ae.zip b/.yarn/cache/connect-injector-npm-0.4.4-1bbd6dd323-efb4e775ae.zip
diff --git a/.yarn/cache/css-select-npm-5.1.0-9365a79de5-2772c049b1.zip b/.yarn/cache/css-select-npm-5.1.0-9365a79de5-2772c049b1.zip
diff --git a/.yarn/cache/css-what-npm-6.1.0-57f751efbb-b975e547e1.zip b/.yarn/cache/css-what-npm-6.1.0-57f751efbb-b975e547e1.zip
diff --git a/.yarn/cache/deep-object-diff-npm-1.1.9-b3c323e343-ecd42455e4.zip b/.yarn/cache/deep-object-diff-npm-1.1.9-b3c323e343-ecd42455e4.zip
diff --git a/.yarn/cache/dom-serializer-npm-2.0.0-378ebc7200-cd1810544f.zip b/.yarn/cache/dom-serializer-npm-2.0.0-378ebc7200-cd1810544f.zip
diff --git a/.yarn/cache/domelementtype-npm-2.3.0-02de7cbfba-ee837a318f.zip b/.yarn/cache/domelementtype-npm-2.3.0-02de7cbfba-ee837a318f.zip
diff --git a/.yarn/cache/domhandler-npm-5.0.3-3ede73dc10-0f58f4a6af.zip b/.yarn/cache/domhandler-npm-5.0.3-3ede73dc10-0f58f4a6af.zip
diff --git a/.yarn/cache/domutils-npm-3.0.1-7937818218-23aa7a8405.zip b/.yarn/cache/domutils-npm-3.0.1-7937818218-23aa7a8405.zip
diff --git a/...ium-npm-1.4.294-321220ffd3-5c05219b4a.zip → ...ium-npm-1.4.286-94de1ebe37-6b53e2aea6.zip b/...ium-npm-1.4.294-321220ffd3-5c05219b4a.zip → ...ium-npm-1.4.286-94de1ebe37-6b53e2aea6.zip
diff --git a/.yarn/cache/entities-npm-4.4.0-97635dc5cc-84d250329f.zip b/.yarn/cache/entities-npm-4.4.0-97635dc5cc-84d250329f.zip
diff --git a/.yarn/cache/es-module-lexer-npm-0.10.5-d782519b3f-d2f9debd9d.zip b/.yarn/cache/es-module-lexer-npm-0.10.5-d782519b3f-d2f9debd9d.zip
diff --git a/.yarn/cache/estree-walker-npm-2.0.2-dfab42f65c-6151e6f982.zip b/.yarn/cache/estree-walker-npm-2.0.2-dfab42f65c-6151e6f982.zip
diff --git a/.yarn/cache/fast-glob-npm-3.2.12-162763bbae-0b1990f6ce.zip b/.yarn/cache/fast-glob-npm-3.2.12-162763bbae-0b1990f6ce.zip
diff --git a/.yarn/cache/fs-extra-npm-10.1.0-86573680ed-dc94ab3709.zip b/.yarn/cache/fs-extra-npm-10.1.0-86573680ed-dc94ab3709.zip
diff --git a/.yarn/cache/htmlparser2-npm-8.0.1-b432299617-06d5c71e83.zip b/.yarn/cache/htmlparser2-npm-8.0.1-b432299617-06d5c71e83.zip
diff --git a/.yarn/cache/is-docker-npm-2.2.1-3f18a53aff-3fef7ddbf0.zip b/.yarn/cache/is-docker-npm-2.2.1-3f18a53aff-3fef7ddbf0.zip
diff --git a/.yarn/cache/is-wsl-npm-2.2.0-2ba10d6393-20849846ae.zip b/.yarn/cache/is-wsl-npm-2.2.0-2ba10d6393-20849846ae.zip
diff --git a/.yarn/cache/jsesc-npm-3.0.2-3b3b74ec0d-a36d3ca405.zip b/.yarn/cache/jsesc-npm-3.0.2-3b3b74ec0d-a36d3ca405.zip
diff --git a/.yarn/cache/lighthouse-logger-npm-1.3.0-3f60201e4a-82655f1862.zip b/.yarn/cache/lighthouse-logger-npm-1.3.0-3f60201e4a-82655f1862.zip
diff --git a/.yarn/cache/magic-string-npm-0.26.7-07281acc06-89b0d60cbb.zip b/.yarn/cache/magic-string-npm-0.26.7-07281acc06-89b0d60cbb.zip
diff --git a/.yarn/cache/marky-npm-1.2.5-007e6cc885-823b946677.zip b/.yarn/cache/marky-npm-1.2.5-007e6cc885-823b946677.zip
diff --git a/.yarn/cache/mlly-npm-1.2.0-ce7c30e693-640b019eb2.zip b/.yarn/cache/mlly-npm-1.2.0-ce7c30e693-640b019eb2.zip
diff --git a/.yarn/cache/node-releases-npm-2.0.10-f8e2d9a776-d784ecde25.zip b/.yarn/cache/node-releases-npm-2.0.10-f8e2d9a776-d784ecde25.zip
diff --git a/.yarn/cache/node-releases-npm-2.0.9-a918367ca1-3ae6b1b300.zip b/.yarn/cache/node-releases-npm-2.0.9-a918367ca1-3ae6b1b300.zip
diff --git a/.yarn/cache/nth-check-npm-2.1.1-f97afc8169-5afc3dafcd.zip b/.yarn/cache/nth-check-npm-2.1.1-f97afc8169-5afc3dafcd.zip
diff --git a/.yarn/cache/parse5-htmlparser2-tree-adapter-npm-7.0.0-38e1b3a974-fc5d01e077.zip b/.yarn/cache/parse5-htmlparser2-tree-adapter-npm-7.0.0-38e1b3a974-fc5d01e077.zip
diff --git a/.yarn/cache/parse5-npm-7.1.2-aa9a92c270-59465dd05e.zip b/.yarn/cache/parse5-npm-7.1.2-aa9a92c270-59465dd05e.zip
diff --git a/.yarn/cache/pathe-npm-1.1.0-2f6ca9875a-6b9be9968e.zip b/.yarn/cache/pathe-npm-1.1.0-2f6ca9875a-6b9be9968e.zip
diff --git a/.yarn/cache/pkg-types-npm-1.0.2-ec631f0260-2d0a70c172.zip b/.yarn/cache/pkg-types-npm-1.0.2-ec631f0260-2d0a70c172.zip
diff --git a/.yarn/cache/react-refresh-npm-0.13.0-2f61697747-1cf2b87ed9.zip b/.yarn/cache/react-refresh-npm-0.13.0-2f61697747-1cf2b87ed9.zip
diff --git a/.yarn/cache/rollup-npm-2.78.1-25ffe2a567-9034814383.zip b/.yarn/cache/rollup-npm-2.78.1-25ffe2a567-9034814383.zip
diff --git a/.yarn/cache/rollup-npm-3.12.1-2b7cf26bcc-b6b3aa4bcc.zip b/.yarn/cache/rollup-npm-3.12.1-2b7cf26bcc-b6b3aa4bcc.zip
diff --git a/.yarn/cache/rollup-npm-3.15.0-b045ebcfe9-1a75b09503.zip b/.yarn/cache/rollup-npm-3.15.0-b045ebcfe9-1a75b09503.zip
diff --git a/.yarn/cache/rxjs-npm-7.5.7-602d5c56e4-edabcdb73b.zip b/.yarn/cache/rxjs-npm-7.5.7-602d5c56e4-edabcdb73b.zip
diff --git a/.yarn/cache/source-map-support-npm-0.5.21-09ca99e250-43e98d700d.zip b/.yarn/cache/source-map-support-npm-0.5.21-09ca99e250-43e98d700d.zip
diff --git a/.yarn/cache/sourcemap-codec-npm-1.4.8-3a1a9e60b1-b57981c056.zip b/.yarn/cache/sourcemap-codec-npm-1.4.8-3a1a9e60b1-b57981c056.zip
diff --git a/.yarn/cache/stream-buffers-npm-0.2.6-05364a66e3-bd38417da6.zip b/.yarn/cache/stream-buffers-npm-0.2.6-05364a66e3-bd38417da6.zip
diff --git a/.yarn/cache/uberproto-npm-1.2.0-1dae28a2c1-7c117d5ef4.zip b/.yarn/cache/uberproto-npm-1.2.0-1dae28a2c1-7c117d5ef4.zip
diff --git a/.yarn/cache/ufo-npm-1.1.1-5caba43c85-6bd210ed93.zip b/.yarn/cache/ufo-npm-1.1.1-5caba43c85-6bd210ed93.zip
diff --git a/.yarn/cache/vite-node-npm-0.28.5-ca524b9a64-b3813b784f.zip b/.yarn/cache/vite-node-npm-0.28.5-ca524b9a64-b3813b784f.zip
diff --git a/.yarn/cache/vite-npm-4.1.4-224b9db54d-50a9a1f2e2.zip b/.yarn/cache/vite-npm-4.1.4-224b9db54d-50a9a1f2e2.zip
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -15,4 +15,69 @@ supportedArchitectures:
     - darwin
     - linux
 
+packageExtensions:
+  # "@bhch/react-json-form@*":
+  #   dependencies:
+  #     "react-modal": "*"
+  uniforms@*:
+    dependencies:
+      "react": "*"
+  "@crxjs/vite-plugin@*":
+    dependencies:
+      vite: "*"
+  # "@rjsf/chakra-ui@*":
+  #   dependencies:
+  #     "@chakra-ui/react": "*"
+  #     "@chakra-ui/icons": "*"
+  #     "chakra-react-select": "*"
+  #     "@emotion/react": "*"
+  #     "@emotion/cache": "*"
+  #     "@emotion/weak-memoize": "*"
+  # chakra-react-select@*:
+  #   dependencies:
+  #     "@chakra-ui/menu": "*"
+  #     "@chakra-ui/spinner": "*"
+  #     "@chakra-ui/media-query": "*"
+  #     "@chakra-ui/system": "*"
+  #     "@chakra-ui/form-control": "*"
+  #     "@chakra-ui/layout": "*"
+  #     "@chakra-ui/icon": "*"
+  # react-select@*:
+  #   dependencies:
+  #     react-dom: "*"
+  # "@chakra-ui/toast@*":
+  #   dependencies:
+  #     framer-motion: "*"
+  # "@chakra-ui/transition@*":
+  #   dependencies:
+  #     framer-motion: "*"
+  # "@chakra-ui/modal@*":
+  #   dependencies:
+  #     framer-motion: "*"
+  # "@chakra-ui/popover@*":
+  #   dependencies:
+  #     framer-motion: "*"
+  # "@chakra-ui/portal@*":
+  #   dependencies:
+  #     react-dom: "*"
+  # "@chakra-ui/menu@*":
+  #   dependencies:
+  #     framer-motion: "*"
+  # "@chakra-ui/tooltip@*":
+  #   dependencies:
+  #     framer-motion: "*"
+  # "@chakra-ui/system@*":
+  #   dependencies:
+  #     "@emotion/styled": "*"
+  #     "@emotion/react": "*"
+  # "@chakra-ui/icon@*":
+  #   dependencies:
+  #     "@chakra-ui/system": "*"
+  # "@emotion/styled@*":
+  #   dependencies:
+  #     "@emotion/react": "*"
+  # "@chakra-ui/css-reset@*":
+  #   dependencies:
+  #     "@emotion/react": "*"
+
 yarnPath: .yarn/releases/yarn-3.2.4.cjs
diff --git a/demo/package.json b/demo/package.json
@@ -30,16 +30,17 @@
   "dependencies": {
     "@seed-design/design-token": "^1.0.0-alpha.0",
     "@seed-design/stylesheet": "^1.0.0-alpha.0",
-    "@stackflow/compat-await-push": "^1.1.1",
-    "@stackflow/core": "^1.0.4",
+    "@stackflow/compat-await-push": "^1.0.3",
+    "@stackflow/core": "^1.0.3",
     "@stackflow/eslint-config": "^1.0.0",
-    "@stackflow/link": "^1.3.2",
-    "@stackflow/plugin-basic-ui": "^1.2.2",
-    "@stackflow/plugin-history-sync": "^1.3.2",
-    "@stackflow/plugin-preload": "^1.2.2",
-    "@stackflow/plugin-renderer-basic": "^1.1.1",
-    "@stackflow/plugin-stack-depth-change": "^1.0.4",
-    "@stackflow/react": "^1.1.1",
+    "@stackflow/link": "^1.2.0",
+    "@stackflow/plugin-basic-ui": "^1.0.4",
+    "@stackflow/plugin-devtools": "workspace:^",
+    "@stackflow/plugin-history-sync": "^1.2.0",
+    "@stackflow/plugin-preload": "^1.1.0",
+    "@stackflow/plugin-renderer-basic": "^1.0.3",
+    "@stackflow/plugin-stack-depth-change": "^1.0.3",
+    "@stackflow/react": "^1.0.3",
     "@typescript-eslint/eslint-plugin": "^5.32.0",
     "@typescript-eslint/parser": "^5.20.0",
     "eslint": "^8.13.0",

diff --git a/demo/src/stackflow.ts b/demo/src/stackflow.ts
@@ -1,5 +1,6 @@
 import { vars } from "@seed-design/design-token";
 import { basicUIPlugin } from "@stackflow/plugin-basic-ui";
+import { devtoolsPlugin } from "@stackflow/plugin-devtools";
 import { historySyncPlugin } from "@stackflow/plugin-history-sync";
 import { basicRendererPlugin } from "@stackflow/plugin-renderer-basic";
 import { stackflow } from "@stackflow/react";
@@ -28,6 +29,7 @@ export const { Stack, activities } = stackflow({
     },
   },
   plugins: [
+    devtoolsPlugin(),
     basicRendererPlugin(),
     basicUIPlugin({
       theme: "cupertino",

diff --git a/devtools/.gitignore b/devtools/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/devtools/index.html b/devtools/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+      integrity="sha384 BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
+      crossorigin="anonymous"
+    /> -->
+    <!-- <link async rel="stylesheet" href="./src/semantic.css" /> -->
+    <title>Stackflow Devtools</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/devtools/package.json b/devtools/package.json
@@ -0,0 +1,45 @@
+{
+  "name": "@stackflow/devtools",
+  "private": true,
+  "version": "0.1.6",
+  "type": "module",
+  "scripts": {
+    "dev": "yarn workspace @stackflow/core build && vite",
+    "build": "yarn tsc && yarn vite build",
+    "preview": "vite preview",
+    "test": "yarn jest",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@vanilla-extract/css": "^1.9.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@crxjs/vite-plugin": "beta",
+    "@stackflow/core": "workspace:^",
+    "@stackflow/plugin-devtools": "workspace:^",
+    "@swc/core": "^1.3.30",
+    "@swc/jest": "^0.2.21",
+    "@types/chrome": "^0.0.223",
+    "@types/jest": "^28.1.6",
+    "@types/json-schema": "^7.0.11",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.5",
+    "@vanilla-extract/vite-plugin": "^3.7.1",
+    "@vitejs/plugin-react-swc": "^3.1.0",
+    "chrome-launcher": "^0.15.1",
+    "jest": "^28.1.0",
+    "typescript": "^4.7.4",
+    "vite": "^4.1.0"
+  },
+  "jest": {
+    "coveragePathIgnorePatterns": [
+      "index.ts",
+      "index.tsx"
+    ],
+    "transform": {
+      "^.+\\.(t|j)sx?$": "@swc/jest"
+    }
+  }
+}
diff --git a/devtools/src/App.css b/devtools/src/App.css
diff --git a/devtools/src/App.tsx b/devtools/src/App.tsx
@@ -0,0 +1,13 @@
+import "./App.css";
+import Layout from "./components/Layout";
+import ActivitiesTab from "./tabs/ActivitiesTab";
+
+function App() {
+  return (
+    <Layout>
+      <ActivitiesTab />
+    </Layout>
+  );
+}
+
+export default App;
diff --git a/devtools/src/components/Button.tsx b/devtools/src/components/Button.tsx
@@ -0,0 +1,3 @@
+export default function Button() {
+  return <div></div>;
+}
diff --git a/devtools/src/components/Collapse.tsx b/devtools/src/components/Collapse.tsx
@@ -0,0 +1,53 @@
+import { useEffect, useRef, useState } from "react";
+
+const duration = 200;
+
+export default function Collapse({
+  opened,
+  children,
+}: {
+  opened: boolean;
+  children: React.ReactNode;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  const [followed, setFollowed] = useState(false);
+
+  useEffect(() => {
+    if (opened) {
+      const delay = setTimeout(() => {
+        setFollowed(true);
+      }, duration);
+      return () => clearTimeout(delay);
+    } else {
+      setFollowed(false);
+      const delay = setTimeout(() => {}, duration);
+      return () => clearTimeout(delay);
+    }
+  }, [opened]);
+
+  // heights
+  // opened: (false -> true) = (0 -> clientHeight(instantly) -> auto(after 0.3s by timeout))
+  // opened: (true -> false) = (auto -> clientHeight(instantly) -> 0(instantly))
+
+  const height =
+    followed && opened
+      ? "auto"
+      : followed || opened
+      ? `${ref.current?.scrollHeight ?? 0}px`
+      : "0";
+
+  return (
+    <div
+      style={{
+        height,
+        overflow: "hidden",
+        transition: `height .2s ease, opacity ${opened ? ".4s" : ".17s"} ease`,
+        opacity: opened ? 1 : 0,
+      }}
+      ref={ref}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/devtools/src/components/FloatingButton.tsx b/devtools/src/components/FloatingButton.tsx
@@ -0,0 +1,51 @@
+import { useReducer } from "react";
+
+export default function FloatingButton({
+  icon,
+  children,
+}: {
+  icon: React.ReactNode;
+  children: React.ReactNode;
+}) {
+  const [open, toggle] = useReducer((open) => !open, false);
+
+  return (
+    <div
+      style={{
+        position: "relative",
+        zIndex: 1,
+      }}
+    >
+      <div
+        style={{
+          width: "1.5rem",
+          height: "1.5rem",
+          opacity: 0.5,
+          display: "inline-block",
+          padding: "0.25rem",
+          cursor: "pointer",
+          userSelect: "none",
+        }}
+        onClick={toggle}
+      >
+        {icon}
+      </div>
+      <div
+        style={{
+          position: "absolute",
+          right: 0,
+          border: "1px solid gray",
+          borderRadius: "0.5rem",
+          padding: "0.5rem",
+          transition: "opacity 0.1s ease-in-out",
+          opacity: open ? 1 : 0,
+          visibility: open ? "visible" : "hidden",
+          backgroundColor: "#242424",
+          zIndex: 2,
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/devtools/src/components/Header.css.ts b/devtools/src/components/Header.css.ts
@@ -0,0 +1,52 @@
+import { style } from "@vanilla-extract/css";
+
+export const header = style({
+  display: "flex",
+  alignItems: "center",
+  backgroundColor: "#1f2937",
+  padding: "1rem",
+});
+
+export const tabs = style({
+  display: "flex",
+  flexDirection: "column",
+  padding: "1rem",
+});
+
+export const leftContents = style({
+  flex: "1 1 auto",
+  display: "flex",
+});
+
+export const rightContents = style({
+  flex: "0 0",
+  display: "flex",
+  gap: "0.5rem",
+  alignItems: "center",
+});
+
+export const footer = style({
+  flex: "0 0",
+  color: "white",
+});
+
+export const button = style({
+  padding: "0.5rem 1rem",
+  backgroundColor: "transparent",
+  borderRadius: "1rem",
+  border: "none",
+  color: "white",
+  cursor: "pointer",
+  transition: "background-color 0.2s ease",
+  ":hover": {
+    backgroundColor: "#e5e7eb",
+  },
+});
+
+export const buttonActive = style([
+  button,
+  {
+    backgroundColor: "#111827",
+    color: "white",
+  },
+]);
diff --git a/devtools/src/components/Header.tsx b/devtools/src/components/Header.tsx
@@ -0,0 +1,16 @@
+import Logo from "./Logo";
+import * as css from "./Header.css";
+import Github from "./icons/Github";
+
+export default function Header() {
+  return (
+    <div className={css.header}>
+      <div className={css.leftContents}>
+        <Logo />
+      </div>
+      <div className={css.rightContents}>
+        <Github />
+      </div>
+    </div>
+  );
+}