diff --git a/.test-esm-loader.mjs b/.test-esm-loader.mjs
new file mode 100644
index 00000000..55d9a85f
--- /dev/null
+++ b/.test-esm-loader.mjs
@@ -0,0 +1,30 @@
+// https://ar.al/2021/05/27/make-anything-a-javascript-module-using-node.js-esm-module-loaders/
+// this is for test cases running `import … from '…svg?raw'`
+
+import { URL } from 'url'
+
+export default {
+  loaders: [
+    {
+      resolve(specifier, opts) {
+        if (specifier.endsWith('.svg')) {
+          let { parentURL } = opts
+          let url = new URL(specifier, parentURL).href
+          return { url }
+        }
+      },
+      format(url, opts) {
+        if (url.endsWith('.svg')) {
+          return { format: 'module' }
+        }
+      },
+      transform(source, opts) {
+        if (opts.url.endsWith('.svg')) {
+          return {
+            source: `export default ${JSON.stringify(source)}`
+          }
+        }
+      }
+    }
+  ]
+}
diff --git a/index.html b/index.html
index ec0102c1..361e5a0e 100644
--- a/index.html
+++ b/index.html
@@ -10,6 +10,9 @@
 html {
   font-size: 10px;
 }
+body {
+  margin: 0;
+}
 
   </style>
 </head>
diff --git a/jest.config.js b/jest.config.mjs
similarity index 87%
rename from jest.config.js
rename to jest.config.mjs
index 8a117493..6ed8f10e 100644
--- a/jest.config.js
+++ b/jest.config.mjs
@@ -1,4 +1,8 @@
-module.exports = {
+import module from 'node:module'
+
+module.register('./.test-esm-loader.mjs', import.meta.url)
+
+export default {
   preset: 'ts-jest/presets/default',
   moduleFileExtensions: ['js', 'ts', 'jsx', 'tsx'],
   // ↓ DO NOT try to make test work w/ node16 esmodule support
@@ -25,4 +29,4 @@ module.exports = {
   },
 
   resetMocks: true
-};
+}
diff --git a/layouts-example/counter/index.tsx b/layouts-example/counter/index.tsx
index 2e7b989f..6bbe779d 100644
--- a/layouts-example/counter/index.tsx
+++ b/layouts-example/counter/index.tsx
@@ -1,7 +1,7 @@
 import { h, Fragment } from 'preact'
 import * as preactHooks from 'preact/hooks'
 
-import PreactLayout from '../../src/layout/preact'
+import { PreactLayout } from '@day1co/fastcomposer-layout/layouts'
 
 export default new PreactLayout({
   id: 'counter',
diff --git a/package.json b/package.json
index b51ab4bb..369bacd6 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,14 @@
 {
   "name": "@day1co/fastcomposer",
-  "version": "2.1.7",
+  "version": "2.2.0",
   "author": "fastcampus",
   "main": "./dist/fastcomposer.js",
+  "workspaces": [
+    "./src/layout",
+    "./src/page",
+    "./src/state"
+  ],
+  "type": "module",
   "exports": {
     ".": {
       "import": "./dist/fastcomposer.mjs",
@@ -19,33 +25,20 @@
   "scripts": {
     "serve": "vite",
     "build": "vite build",
-    "lint": "vue-cli-service lint",
+    "build-all": "npm run build --workspaces && vite build",
     "build-layouts": "node layouts/build.js",
-    "test": "jest",
-    "test:e2e": "cypress run --browser chrome --headless",
-    "test:e2e-visible": "cypress open",
-    "ci:test": "./ci_test.sh"
+    "test": "jest"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/day1co/fastcomposer.git"
   },
   "dependencies": {
-    "@types/lodash.template": "^4.5.1",
     "@vue-a11y/focus-loop": "^0.2.0",
-    "lodash": "^4.17.20",
-    "lodash.template": "^4.5.0",
-    "marked": "^4.0.18",
-    "normalize.css": "^8.0.1",
-    "sass-mq": "^5.0.1",
     "splitpanes": "^2.4.1",
     "vue": "^2.6.12",
     "vue-smooth-dnd": "^0.8.1"
   },
-  "peerDependencies": {
-    "preact": "^10.11.2",
-    "preact-render-to-string": "^5.2.6"
-  },
   "devDependencies": {
     "@babel/core": "^7.12.10",
     "@babel/preset-env": "^7.12.11",
@@ -66,10 +59,11 @@
     "jest": "^29.0.2",
     "jsdom": "^20.0.2",
     "prettier": "2.0.5",
-    "sass": "^1.32.8",
+    "sass": "1.32.x",
     "ts-jest": "^29.0.3",
-    "typescript": "^4.8.3",
-    "vite": "^4.4.9",
+    "typescript": "^5.5.4",
+    "vite": "^5.4.3",
+    "vite-plugin-dts": "^4.1.0",
     "vite-plugin-raw": "^1.0.3",
     "vue-eslint-parser": "^7.1.0",
     "vue-template-compiler": "^2.6.12"
diff --git a/src/_tsconfig.json b/src/_tsconfig.json
new file mode 100644
index 00000000..c68b0a2d
--- /dev/null
+++ b/src/_tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": [
+    "./*.ts",
+    "./**/*.ts"
+  ],
+  "exclude": [
+    "./test"
+  ]
+}
diff --git a/src/_vite.config.mjs b/src/_vite.config.mjs
new file mode 100644
index 00000000..81f54704
--- /dev/null
+++ b/src/_vite.config.mjs
@@ -0,0 +1,23 @@
+import path from 'node:path'
+import { defineConfig } from 'vite'
+import dts from 'vite-plugin-dts'
+import viteRawPlugin from 'vite-plugin-raw'
+
+export default dirname => defineConfig({
+  root: dirname,
+  plugins: [
+    dts(),
+    viteRawPlugin({
+      match: /\.(ejs|svg)$/i
+    })
+  ],
+  build: {
+    sourcemap: true,
+    lib: {
+      entry: {
+        index: path.join(dirname, './index.ts')
+      },
+      formats: ['es']
+    }
+  }
+})
diff --git a/src/layout/index.ts b/src/layout/index.ts
index aa6cd4f8..4f6d35bf 100644
--- a/src/layout/index.ts
+++ b/src/layout/index.ts
@@ -1,8 +1,4 @@
-import type LayoutMeta from '../structs/LayoutMeta'
-import type LayoutParameter from '../structs/LayoutParameter'
-import type { ListLayoutParameter } from '../structs/LayoutParameter'
-
-import { clone } from '../util'
+import type { LayoutMeta, LayoutParameter, ListLayoutParameter } from './structs'
 
 export interface LayoutOptions {
   id: string
@@ -32,7 +28,7 @@ abstract class LayoutBase {
     } else if(!this.defaultValues) {
       params = this.params
     } else {
-      return clone(this.defaultValues)
+      return structuredClone(this.defaultValues)
     }
 
     const entries = [ ...params.entries() ]
@@ -79,8 +75,8 @@ export default LayoutBase
 
 ///
 
-export abstract class DynamicLayoutBase extends LayoutBase {
-  override template: (opt: any, ctx: any) => any
+export interface DynamicLayoutBase extends LayoutBase {
+  template: (opt: any, ctx: any) => any
 
   // hydrate above
   hydrate?(el: HTMLElement, opt: any): void
diff --git a/src/layout/layouts/broken.ts b/src/layout/layouts/broken.ts
new file mode 100644
index 00000000..f0ff426a
--- /dev/null
+++ b/src/layout/layouts/broken.ts
@@ -0,0 +1,11 @@
+import LegacyLayout from './legacy'
+
+// Some pages
+export default new LegacyLayout({
+  id: 'broken',
+  meta: {
+    description: '다른 레이아웃으로 새 레이어를 만들고 이 레이어는 삭제하세요',
+    icon: ''
+  },
+  params: new Map()
+})
diff --git a/src/layout/layouts/index.ts b/src/layout/layouts/index.ts
new file mode 100644
index 00000000..cec27fdd
--- /dev/null
+++ b/src/layout/layouts/index.ts
@@ -0,0 +1,2 @@
+export { default as LegacyLayout } from './legacy'
+export { default as PreactLayout } from './preact'
diff --git a/src/layout/legacy.ts b/src/layout/layouts/legacy.ts
similarity index 96%
rename from src/layout/legacy.ts
rename to src/layout/layouts/legacy.ts
index cef9a138..41f765fd 100644
--- a/src/layout/legacy.ts
+++ b/src/layout/layouts/legacy.ts
@@ -1,6 +1,6 @@
 import type LayoutMeta from '../structs/LayoutMeta'
 import type LayoutParameter from '../structs/LayoutParameter'
-import type { LayoutOptions } from '.'
+import type { LayoutOptions } from '..'
 import type {
   SingularLayoutParameter,
   ListLayoutParameter,
@@ -11,7 +11,7 @@ import type {
 import lotemplate from 'lodash.template'
 import { marked } from 'marked'
 
-import LayoutBase from '.'
+import LayoutBase from '..'
 
 const paramArrayToMap = (params: Array<LegacyLayoutParameter>):
   Map<string, LayoutParameter> =>
diff --git a/src/layout/preact.ts b/src/layout/layouts/preact.ts
similarity index 52%
rename from src/layout/preact.ts
rename to src/layout/layouts/preact.ts
index 51fad5d2..143f95e0 100644
--- a/src/layout/preact.ts
+++ b/src/layout/layouts/preact.ts
@@ -1,27 +1,27 @@
-import type { LayoutOptions } from '.'
+import type { LayoutOptions } from '..'
 
 import renderToString from 'preact-render-to-string'
-import preact from 'preact'
+import * as preact from 'preact'
 import { h, Fragment } from 'preact'
 
-import { DynamicLayoutBase } from '.'
+import { DynamicLayoutBase } from '..'
 
 export default class PreactLayout extends DynamicLayoutBase {
 
   constructor(layout: LayoutOptions) {
     super(layout)
 
-    this.component = opt => h(layout.template, { opt })
+    this.template = opt => h(layout.template, { opt })
   }
 
   render(el: HTMLElement, opt: any): unknown {
-    return preact.render(this.component(opt), el)
+    return preact.render(this.template(opt, null), el)
   }
   renderToString(opt: any): string {
-    return renderToString(this.component(opt))
+    return renderToString(this.template(opt, null))
   }
   hydrate(el: HTMLElement, opt: any): void {
-    return preact.hydrate(this.component(opt), el)
+    return preact.hydrate(this.template(opt, null), el)
   }
 
 }
diff --git a/src/layout/package.json b/src/layout/package.json
new file mode 100644
index 00000000..1f46dfbe
--- /dev/null
+++ b/src/layout/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "@day1co/fastcomposer-layout",
+  "version": "2.2.0",
+  "type": "module",
+  "files": [
+    "dist",
+    "layouts",
+    "structs",
+    "*.d.ts"
+  ],
+  "main": "./dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./layouts": "./dist/layouts.js",
+    "./structs": "./dist/structs.js"
+  },
+  "scripts": {
+    "build": "vite build",
+    "prepack": "vite build",
+    "clean": "rm -rf ./dist ./node_modules"
+  },
+  "dependencies": {
+    "@types/lodash.template": "^4.5.1",
+    "lodash.template": "^4.5.0",
+    "marked": "^4.0.18"
+  },
+  "peerDependencies": {
+    "preact": "^10.11.2",
+    "preact-render-to-string": "^5.2.6"
+  }
+}
diff --git a/src/Structs/LayoutMeta.ts b/src/layout/structs/LayoutMeta.ts
similarity index 100%
rename from src/Structs/LayoutMeta.ts
rename to src/layout/structs/LayoutMeta.ts
diff --git a/src/layout/structs/LayoutMigration.ts b/src/layout/structs/LayoutMigration.ts
new file mode 100644
index 00000000..d53d6ae7
--- /dev/null
+++ b/src/layout/structs/LayoutMigration.ts
@@ -0,0 +1,9 @@
+type LayoutMigration = {
+  name: string
+  options: any
+  // TODO fix type of options (was typeof this.options)
+  requires(options, layout, values): boolean
+  migrate(options, layout, values): any
+}
+
+export default LayoutMigration
diff --git a/src/Structs/LayoutParameter.ts b/src/layout/structs/LayoutParameter.ts
similarity index 100%
rename from src/Structs/LayoutParameter.ts
rename to src/layout/structs/LayoutParameter.ts
diff --git a/src/Structs/Snippet.ts b/src/layout/structs/Snippet.ts
similarity index 78%
rename from src/Structs/Snippet.ts
rename to src/layout/structs/Snippet.ts
index c30ca42c..0137fc57 100644
--- a/src/Structs/Snippet.ts
+++ b/src/layout/structs/Snippet.ts
@@ -1,4 +1,4 @@
-import type { LayerMeta } from '../page/layer'
+import type { LayerMeta } from '../../page/layer'
 
 export type SnippetItem = {
   layout: string,
diff --git a/src/layout/structs/index.ts b/src/layout/structs/index.ts
new file mode 100644
index 00000000..5b1c0b6b
--- /dev/null
+++ b/src/layout/structs/index.ts
@@ -0,0 +1,10 @@
+export type { default as LayoutMeta } from './LayoutMeta'
+export type * from './LayoutMeta'
+
+export type { default as LayoutMigration } from './LayoutMigration'
+
+export type { default as LayoutParameter } from './LayoutParameter'
+export type * from './LayoutParameter'
+
+export type { default as Snippet } from './Snippet'
+export type * from './Snippet'
diff --git a/src/layout/test/layouts/legacy.ts b/src/layout/test/layouts/legacy.ts
index 2d35455b..3048047f 100644
--- a/src/layout/test/layouts/legacy.ts
+++ b/src/layout/test/layouts/legacy.ts
@@ -1,4 +1,4 @@
-import LegacyLayout from '../../legacy'
+import LegacyLayout from '../../layouts/legacy'
 
 export default LegacyLayout.fromDefinition({
   id: 'list',
diff --git a/src/layout/test/layouts/preact.tsx b/src/layout/test/layouts/preact.tsx
index e0279a18..29f194ae 100644
--- a/src/layout/test/layouts/preact.tsx
+++ b/src/layout/test/layouts/preact.tsx
@@ -1,7 +1,7 @@
 import { h, Fragment } from 'preact'
 import preactHooks from 'preact/hooks'
 
-import PreactLayoutBase from '../../preact'
+import PreactLayoutBase from '../../layouts/preact'
 
 export default new PreactLayoutBase({
   id: 'preact-example',
diff --git a/src/layout/tsconfig.json b/src/layout/tsconfig.json
new file mode 120000
index 00000000..81195eb7
--- /dev/null
+++ b/src/layout/tsconfig.json
@@ -0,0 +1 @@
+../_tsconfig.json
\ No newline at end of file
diff --git a/src/layout/vite.config.mjs b/src/layout/vite.config.mjs
new file mode 100644
index 00000000..775a9cdd
--- /dev/null
+++ b/src/layout/vite.config.mjs
@@ -0,0 +1,17 @@
+import path from 'node:path'
+import { defineConfig, mergeConfig } from 'vite'
+import config from '../_vite.config.mjs'
+
+export default defineConfig(
+  mergeConfig(config(__dirname), {
+    build: {
+      lib: {
+        entry: {
+          index: path.join(__dirname, './index.ts'),
+          layouts: path.join(__dirname, './layouts/index.ts'),
+          structs: path.join(__dirname, './structs/index.ts'),
+        },
+      },
+    }
+  })
+)
diff --git a/src/legacy/assets/scss/style.scss b/src/legacy/assets/scss/style.scss
index c53eb8c2..b0b583d0 100644
--- a/src/legacy/assets/scss/style.scss
+++ b/src/legacy/assets/scss/style.scss
@@ -2,12 +2,11 @@
 @import 'utils/utilities';
 
 // vendors
-@import 'sass-mq';
-@import 'normalize.css';
 @import 'splitpanes';
-@import 'pane';
 
 // base
+@import 'pane';
+
 @import 'base/color-scheme';
 @import 'base/fonts';
 @import 'base/helpers';
diff --git a/src/legacy/components/edit/file.vue b/src/legacy/components/edit/file.vue
index b122ca87..8aff87a2 100644
--- a/src/legacy/components/edit/file.vue
+++ b/src/legacy/components/edit/file.vue
@@ -32,7 +32,7 @@
 
 <script>
 
-import { uniqueId } from '../../../util'
+import { uniqueId } from '../../utils'
 
 import EventBus from '../../event-bus.vue'
 import mixin from './mixin.js'
diff --git a/src/legacy/components/edit/index.vue b/src/legacy/components/edit/index.vue
index 18d0f7ac..68cf851f 100644
--- a/src/legacy/components/edit/index.vue
+++ b/src/legacy/components/edit/index.vue
@@ -13,8 +13,7 @@
 
 <script>
 
-import Layer from '../../../page/layer'
-import Path from '../../../page/path'
+import { Layer, Path } from '@day1co/fastcomposer-page'
 import EditEntry from './entry.vue'
 
 export default {
diff --git a/src/legacy/components/edit/mixin.js b/src/legacy/components/edit/mixin.js
index 36a80c4b..bbc0284c 100644
--- a/src/legacy/components/edit/mixin.js
+++ b/src/legacy/components/edit/mixin.js
@@ -1,6 +1,5 @@
-import Layer from '../../../page/layer'
-import Path from '../../../page/path'
-import Act from '../../../state/act'
+import { Layer, Path } from '@day1co/fastcomposer-page'
+import { Act } from '@day1co/fastcomposer-state'
 
 export default {
   inject: ['state'],
diff --git a/src/legacy/components/layout-info.vue b/src/legacy/components/layout-info.vue
index d3549487..8beaca5a 100644
--- a/src/legacy/components/layout-info.vue
+++ b/src/legacy/components/layout-info.vue
@@ -4,6 +4,14 @@
     <figcaption class="fcc-layout-info__label">
       <strong class="fcc-layout-info__id"> {{ layout.id }} </strong>
       <span class="fcc-layout-info__index" v-if="index != null"> #{{ index }} </span>
+      <span class="fcc-layout-info__indicators">
+        <i
+          v-for="(icon, index) in validIndicators"
+          :key="index"
+          class="material-icons">
+          {{ icon }}
+        </i>
+      </span>
       <br />
       <span
         v-if="!isEditing"
@@ -26,7 +34,7 @@
 
 <script>
 
-import { iconToUri } from '../../util/index.ts'
+import { iconToUri } from '../utils'
 
 export default {
   props: {
@@ -36,7 +44,8 @@ export default {
       required: true
     },
     index: Number,
-    label: String
+    label: String,
+    indicators: [Array, Object]
   },
   data() {
     return {
@@ -48,6 +57,14 @@ export default {
     icon() {
       return iconToUri(this.layout.meta.icon)
     },
+    validIndicators() {
+      if(Array.isArray(this.indicators))
+        return this.indicators.filter(_ => _)
+      else if(typeof this.indicators === 'object')
+        return Object.entries(this.indicators)
+          .filter(([ k, v ]) => v)
+          .map(([ k, v ]) => k)
+    },
     canEdit() {
       return this.label !== null && this.label !== undefined
     }
@@ -109,6 +126,12 @@ export default {
   &__index {
     opacity: 0.5;
   }
+  &__indicators {
+    > i {
+      font-size: inherit;
+      vertical-align: -0.5ex;
+    }
+  }
   &__label {
     line-height: 2.2rem;
     font-size: 1.8rem;
diff --git a/src/legacy/utils/index.js b/src/legacy/utils/index.js
index 831eb8f9..b7c8ebc2 100644
--- a/src/legacy/utils/index.js
+++ b/src/legacy/utils/index.js
@@ -16,3 +16,14 @@ export const uniqueId = (prefix = 'fc-block') => {
     .substr(2, 9);
   return `${prefix}-${seq}-${nonce}`;
 };
+
+export function iconToUri(icon) {
+  if(!icon)
+    return
+  else if(/^<(?:\?xml |svg )/.test(icon))
+    return 'data:image/svg+xml;utf8,' + encodeURIComponent(icon)
+  else if(/^data:image\//.test(icon))
+    return icon
+  else
+    return null
+}
diff --git a/src/legacy/views/editor.vue b/src/legacy/views/editor.vue
index 96c2fcf0..6390d0df 100644
--- a/src/legacy/views/editor.vue
+++ b/src/legacy/views/editor.vue
@@ -3,22 +3,64 @@
     <layout-info :layout="layer.layout" />
 
     <focus-loop is-visible>
+      <section class="fcc-editor__duration fcc-edit-row">
+        <label class="fcc-edit-row-label--text label">
+          <strong class="name"> 표시 기간 </strong>
+          <small class="type">
+            {{ durationStatus }}
+          </small>
+
+          <tooltip message="
+            <b>- 일부 사이트에서만 사용할 수 있습니다!!!</b><br />
+            - 둘 중 하나만 지정해도 됩니다.<br />
+            <b>- 시작보다 종료가 늦으면 기능이 반대로 작동할 수 있습니다!!</b> (두 시각 사이에만 안 보임)<br />
+            - 제대로 입력되면 '시각 설정됨'이 표시됩니다. 꼭 확인해주세요.<br />
+            - 오전 12시가 밤, 오후 12시가 낮입니다. (추후 개선 예정)"
+          />
+        </label>
+        <div class="fcc-editor__duration-wrap fcc-edit-input">
+          <input
+            type="datetime-local"
+            v-model="visibleSince"
+            :key="layer.path.toString() + '#visibleSince'" />
+          <input
+            type="datetime-local"
+            v-model="visibleUntil"
+            :key="layer.path.toString() + '#visibleUntil'" />
+        </div>
+      </section>
+
       <edit :layer="layer" />
     </focus-loop>
   </div>
 </template>
 
 <script>
+import Tooltip from '../components/tooltip.vue';
 import { FocusLoop } from '@vue-a11y/focus-loop'
 
+import Page from '@day1co/fastcomposer-page'
+import State, { Act } from '@day1co/fastcomposer-state'
+
 import EventBus from '../event-bus.vue';
 import LayoutInfo from '../components/layout-info.vue';
 import Edit from '../components/edit/index.vue'
-import Page from '../../page'
-import State from '../../state'
+
+const mapVisibleMeta = key => ({
+  [key]: {
+    get() {
+      return this.layer.meta?.[key]
+    },
+    set(v) {
+      const act = new Act('layer.edit.meta', this.layer.path, [key, v || null])
+      this.state.perform(act, null)
+    }
+  }
+})
 
 export default {
   components: {
+    Tooltip,
     FocusLoop,
     LayoutInfo,
     Edit
@@ -69,6 +111,28 @@ export default {
       })
     }
   },
+  computed: {
+    durationStatus() {
+      const since = +new Date(this.visibleSince)
+      const until = +new Date(this.visibleUntil)
+      if(since)
+        if(until)
+          if(since > until)
+            return '시작-종료 뒤집힘'
+          else if(since === until)
+            return '시작-종료가 같음'
+          else
+            return '시작-종료 시각 설정됨'
+        else
+          return '시작 시각 설정됨'
+      else if(until)
+        return '종료 시각 설정됨'
+      else
+        return '설정되지 않음'
+    },
+    ...mapVisibleMeta('visibleSince'),
+    ...mapVisibleMeta('visibleUntil')
+  },
   watch: {
     ['page.focus'](to) {
       if(to?.child)
@@ -96,146 +160,35 @@ export default {
     position: relative;
     margin: 0 1.8rem 1.2rem;
   }
-  /* TODO will be refactored into separated components (all below this) */
-  &__form {
 
-    &__fieldset {
-      padding: 0.4rem 0;
-    }
+  &__duration {
+    container-type: inline-size;
 
-    &__label {
-      @include readable-font-features;
+    &-wrap {
       display: flex;
-      font-size: 1.4rem;
-      align-items: baseline;
+      flex-wrap: wrap;
 
-      user-select: none;
-
-      > small {
-        font-size: 1.4rem;
-        margin-left: 0.4rem;
-      }
-      > .spacer {
-        flex-grow: 10000;
+      > input {
+        display: block;
+        letter-spacing: -0.1ex;
+        width: unset;
+        flex: 1 0 50%;
       }
-      .fcc-tooltip-icon {
-        align-self: center;
-        margin-right: 0.2rem;
-        opacity: 0.5;
-      }
-    }
-
-    &__name {
-      display: inline-block;
-      font-size: 1.6rem;
-    }
-
-    &__textarea, &__text, &__select {
-      @include readable-font-features;
-      font-family: inherit;
-      box-sizing: border-box;
-      border: none;
-      padding: 0 0 0 0.8rem;
-
-      font-size: 1.5rem;
-      line-height: 2.4rem;
 
-      background-color: $input-background;
-      color: $input-foreground;
-      outline: 0 none;
-      border: 0.1rem solid #555;
+      @container (min-height: 3rem) {
+        > input {
+          color: red !important;
 
-      transition: background-color 250ms ease, border-color 250ms ease;
+          &::after {
+            display: block;
+            content: attr(data-label);
 
-      &:focus {
-        background-color: $input-background-active;
-        border-color: $input-foreground-active;
-        color: $input-foreground-active;
-      }
-
-      &::placeholder {
-        color: #888;
-      }
-      &::selection {
-        background: $primary-active;
-      }
-    }
-
-    &__textarea, &__text, &__select {
-      display: block;
-      width: 100%;
-    }
-
-    &__textarea {
-      resize: vertical;
-      padding-top: 0.4rem;
-      min-height: 3.4rem;
-      max-height: 32rem;
-
-      &--short {
-        height: 3.4rem;
-      }
-    }
-
-    &__text, &__select {
-      height: 3.6rem;
-    }
-
-    &__select {
-      padding: 0.8rem 0.4rem;
-    }
-
-    .required {
-      color: #f44;
-      background: none;
-      font-weight: bold;
-      margin-right: 0.4rem;
-    }
-  }
-  &__list {
-    &-item {
-      border-left: 0.4rem solid $primary;
-      padding-left: 1.2rem;
-      margin-bottom: 1.2rem;
-
-      &:nth-child(2n + 1) {
-        border-left-color: #8884;
-      }
-    }
-    &-tools {
-      display: flex;
-      margin-left: -0.6rem;
-      line-height: 2.6rem;
-
-      button {
-        line-height: 1;
-        color: inherit;
-        > i {
-          vertical-align: top;
+            line-height: 3.6rem;
+            word-break: keep-all;
+          }
         }
       }
     }
   }
-  &__add-btn {
-    display: flex;
-    justify-content: center;
-    button {
-      width: 100%;
-      height: 100%;
-      padding: 1rem 0;
-      background-color: $primary-active;
-      color: inherit;
-      font: inherit;
-      &[disabled] {
-        opacity: 0.6;
-      }
-    }
-    span {
-      font-weight: bold;
-    }
-  }
-  &__remove-btn {
-    margin-left: auto;
-  }
 }
 </style>
diff --git a/src/legacy/views/header.vue b/src/legacy/views/header.vue
index d6a9d4c6..e501efe5 100644
--- a/src/legacy/views/header.vue
+++ b/src/legacy/views/header.vue
@@ -26,7 +26,7 @@
 
 <script>
   import packageinfo from '../../../package.json';
-  import { iconToUri } from '../../util/index.ts'
+  import { iconToUri } from '../utils'
 
   export default {
     methods: {
diff --git a/src/legacy/views/index.vue b/src/legacy/views/index.vue
index 5d4ef97e..60dc8ac2 100644
--- a/src/legacy/views/index.vue
+++ b/src/legacy/views/index.vue
@@ -187,10 +187,11 @@
 
 <script>
   import { Splitpanes, Pane } from 'splitpanes';
-  import { cloneDeep } from 'lodash';
-  import { uniqueId, restructureLayouts } from '../utils';
+
+  import Page from '@day1co/fastcomposer-page';
+  import State from '@day1co/fastcomposer-state';
+
   import EventBus from '../event-bus.vue';
-  import { parse as marked } from 'marked';
   import Toast from '../components/toast.vue';
   import Dialog from '../components/dialog.vue';
   import ComposerHeader from './header.vue';
@@ -202,8 +203,6 @@
   import History from './history/index.vue';
   import Changelog from './changelog.vue'
 
-  import Page from '../../page';
-  import State from '../../state';
 
   export default {
     components: {
diff --git a/src/legacy/views/layers.vue b/src/legacy/views/layers.vue
index 822c1f37..761e91b1 100644
--- a/src/legacy/views/layers.vue
+++ b/src/legacy/views/layers.vue
@@ -92,10 +92,13 @@
             <i class="material-icons">{{ checked[layer.id]? 'check_box' : 'check_box_outline_blank' }}</i>
           </label>
           <layout-info
+            class="small"
             :layout="layer.layout"
             :index="index"
-            class="small"
             :label="layer.meta.label"
+            :indicators="{
+              'schedule': layer.meta.visibleSince || layer.meta.visibleUntil
+            }"
             @update:label="v => state.act('layer.edit.meta', layer.path, ['label', v])"></layout-info>
         </div>
         <div class="fcc-layer-buttons">
@@ -116,13 +119,12 @@
   </div>
 </template>
 <script>
-  import Page from '../../page'
-  import State from '../../state'
+  import Page, { Paths } from '@day1co/fastcomposer-page'
+  import State, { Act } from '@day1co/fastcomposer-state'
+
   import LayoutInfo from '../components/layout-info.vue';
   import { Container, Draggable } from "vue-smooth-dnd";
   import EventBus from '../event-bus.vue';
-  import { Paths } from '../../page/path'
-  import Act from '../../state/act'
 
   export default {
     components: {
diff --git a/src/legacy/views/preview.vue b/src/legacy/views/preview.vue
index b5c58a4b..4180edd9 100644
--- a/src/legacy/views/preview.vue
+++ b/src/legacy/views/preview.vue
@@ -30,10 +30,11 @@
 </template>
 
 <script>
-  import EventBus from '../event-bus.vue';
   import { parse as marked } from 'marked';
   import { template } from 'lodash';
 
+  import EventBus from '../event-bus.vue';
+
   export default {
     props: {
       blocks: {
diff --git a/src/legacy/views/snippets.vue b/src/legacy/views/snippets.vue
index 7d42f5ed..f8918d04 100644
--- a/src/legacy/views/snippets.vue
+++ b/src/legacy/views/snippets.vue
@@ -26,10 +26,10 @@
 
 <script>
 
-import Page from '../../page'
+import Page from '@day1co/fastcomposer-page'
 
 import LayoutInfo from '../components/layout-info.vue';
-import { iconToUri } from '../../util/index.ts'
+import { iconToUri } from '../utils'
 
 export default {
   components: {
diff --git a/src/page/actions/Layer.Duplicate.ts b/src/page/actions/Layer.Duplicate.ts
index 38e51670..9ca8d458 100644
--- a/src/page/actions/Layer.Duplicate.ts
+++ b/src/page/actions/Layer.Duplicate.ts
@@ -1,5 +1,5 @@
-import type Action from '../../state/action'
-import type Page from '..'
+import type Action from '@day1co/fastcomposer-state/action'
+import type Page from '../page'
 import type Path from '../path'
 
 import icon from './icons/Layer.Duplicate.svg?raw'
diff --git a/src/page/actions/Layer.Edit.Meta.ts b/src/page/actions/Layer.Edit.Meta.ts
index a352083d..65c26706 100644
--- a/src/page/actions/Layer.Edit.Meta.ts
+++ b/src/page/actions/Layer.Edit.Meta.ts
@@ -12,14 +12,15 @@ export default <Action<Page, Path>>{
   perform(root, self, act) {
     const path = act.target
     const [key, value] = act.arg as [keyof LayerMeta, string]
-    if(key == null || value == null)
-      throw new TypeError('invalid arg on Layer.Edit.Meta')
+    if(key == null)
+      throw new TypeError('empty arg on Layer.Edit.Meta')
 
     const layer = self.getLayerByPath(path)
     if(!layer)
       throw new ReferenceError('attempted to edit meta of nonexistent layer')
 
-    act.remember(layer.meta[key])
+    act.meta = self.describe(path) + ' ' + key
+    act.remember([key, layer.meta[key]])
     if(act.remembered)
       self.setFocus(path)
 
@@ -28,9 +29,13 @@ export default <Action<Page, Path>>{
     return act
   },
   compose(root, self, previousAct, act) {
-    previousAct.update(act.arg)
-    if(previousAct.arg === previousAct.capturedState)
-      return null
+    if(act.arg[0] === previousAct.arg[0])
+      if(act.arg[1] === previousAct.capturedState[1])
+        return null
+      else
+        previousAct.update(act.arg)
+    else
+      return act
 
     return previousAct
   },
diff --git a/src/page/actions/Layer.Edit.ts b/src/page/actions/Layer.Edit.ts
index f5074fc3..a27a4771 100644
--- a/src/page/actions/Layer.Edit.ts
+++ b/src/page/actions/Layer.Edit.ts
@@ -1,5 +1,5 @@
-import type Action from '../../state/action'
-import type Page from '..'
+import type Action from '@day1co/fastcomposer-state/action'
+import type Page from '../page'
 import type Path from '../path'
 
 import icon from './icons/Layer.Edit.svg?raw'
diff --git a/src/page/actions/Layer.Hide.ts b/src/page/actions/Layer.Hide.ts
index 60c091c2..e61db8fb 100644
--- a/src/page/actions/Layer.Hide.ts
+++ b/src/page/actions/Layer.Hide.ts
@@ -1,5 +1,5 @@
-import type Action from '../../state/action'
-import type Page from '..'
+import type Action from '@day1co/fastcomposer-state/action'
+import type Page from '../page'
 import type Path from '../path'
 import type { Paths } from '../path'
 
diff --git a/src/page/actions/Layer.Item.New.ts b/src/page/actions/Layer.Item.New.ts
index cd88f0fa..d038fdba 100644
--- a/src/page/actions/Layer.Item.New.ts
+++ b/src/page/actions/Layer.Item.New.ts
@@ -1,5 +1,5 @@
-import type Action from '../../state/action'
-import type Page from '..'
+import type Action from '@day1co/fastcomposer-state/action'
+import type Page from '../page'
 
 import Path from '../path'
 
diff --git a/src/page/actions/Layer.Item.Remove.ts b/src/page/actions/Layer.Item.Remove.ts
index 1863fb32..6df372eb 100644
--- a/src/page/actions/Layer.Item.Remove.ts
+++ b/src/page/actions/Layer.Item.Remove.ts
@@ -1,5 +1,5 @@
-import type Action from '../../state/action'
-import type Page from '..'
+import type Action from '@day1co/fastcomposer-state/action'
+import type Page from '../page'
 import type Path from '../path'
 
 import icon from './icons/Layer.Item.Remove.svg?raw'
diff --git a/src/page/actions/Layer.New.ts b/src/page/actions/Layer.New.ts
index c4271460..3decadf1 100644
--- a/src/page/actions/Layer.New.ts
+++ b/src/page/actions/Layer.New.ts
@@ -1,5 +1,5 @@
-import type Action from '../../state/action'
-import type Page from '..'
+import type Action from '@day1co/fastcomposer-state/action'
+import type Page from '../page'
 import type Path from '../path'
 
 import icon from './icons/Layer.New.svg?raw'
diff --git a/src/page/actions/Layer.Remove.ts b/src/page/actions/Layer.Remove.ts
index c470c6c3..b620bf86 100644
--- a/src/page/actions/Layer.Remove.ts
+++ b/src/page/actions/Layer.Remove.ts
@@ -1,5 +1,5 @@
-import type Action from '../../state/action'
-import type Page from '..'
+import type Action from '@day1co/fastcomposer-state/action'
+import type Page from '../page'
 import type Path from '../path'
 
 import { Paths } from '../path'
diff --git a/src/page/actions/Layer.Reorder.ts b/src/page/actions/Layer.Reorder.ts
index 7d5892ca..c4d73b8b 100644
--- a/src/page/actions/Layer.Reorder.ts
+++ b/src/page/actions/Layer.Reorder.ts
@@ -1,5 +1,5 @@
-import type Action from '../../state/action'
-import type Page from '..'
+import type Action from '@day1co/fastcomposer-state/action'
+import type Page from '../page'
 import type Path from '../path'
 
 import { Paths } from '../path'
@@ -38,7 +38,6 @@ export default <Action<Page, Path | Paths>>{
     }
   },
   compose(root, self, previousAct, act) {
-    console.log(previousAct.target.type, act.target.type)
     if(previousAct.target.type === 'paths' && act.target.type === 'paths') {
       const pre = previousAct.capturedState.from
       const post = act.capturedState.from
diff --git a/src/page/actions/Layer.Restore.ts b/src/page/actions/Layer.Restore.ts
index 8b1044fe..603a891a 100644
--- a/src/page/actions/Layer.Restore.ts
+++ b/src/page/actions/Layer.Restore.ts
@@ -1,8 +1,8 @@
 import type Action from '../../state/action'
 import type Act from '../../state/act'
-import type Page from '..'
+import type Page from '../page'
 import type Path from '../path'
-import type Snippets from '../../structs/Snippet'
+import type Snippets from '../../layout/structs/Snippet'
 
 import { Paths } from '../path'
 
diff --git a/src/page/actions/index.ts b/src/page/actions/index.ts
index 56588cd9..fceae9da 100644
--- a/src/page/actions/index.ts
+++ b/src/page/actions/index.ts
@@ -1,7 +1,3 @@
-import type Action from '../../state/action'
-import type ActTarget from '../../state/acttarget'
-import type Page from '..'
-
 // FIXME: ?????
 // './Document.Clear',
 import Layer_New from './Layer.New'
diff --git a/src/page/index.ts b/src/page/index.ts
index 752adfbb..16f1d234 100644
--- a/src/page/index.ts
+++ b/src/page/index.ts
@@ -1,300 +1,4 @@
-import type Action from '../state/action'
-import type ActTarget from '../state/acttarget'
-import type { LayerMeta } from './layer'
+export { default as Layer } from './layer'
+export { default as Path, Paths } from './path'
 
-import Module from '../state/module'
-import Actions from './actions'
-import Path, { Paths } from './path'
-import Layer from './layer'
-import LayoutBase from '../layout'
-import LegacyLayout from '../layout/legacy'
-import { uniqueId } from '../util'
-
-type LayoutMap = Map<string, LayoutBase>
-type LooseLayoutMap = LayoutMap | object
-
-export default class Page extends Module {
-
-  id: 'page'
-
-  actions: Map<string, Action<Page, ActTarget>>
-  state: Array<Layer> = []
-
-  focus: Path | null = null
-
-  _layouts: Map<string, LayoutBase>
-
-  _stateLookup: { [K: Layer['id']]: number } = {}
-
-  constructor(
-    layouts: Map<string, LayoutBase> | object,
-    actions: Map<string, Action<Page, ActTarget>> = Actions
-  ) {
-    super(actions)
-
-    this._layouts = Page.tightenLooseLayouts(layouts)
-  }
-
-  static tightenLooseLayouts(layouts: LooseLayoutMap): LayoutMap {
-    return Object.freeze(
-      layouts instanceof Map
-      ? layouts
-      : new Map(
-          Object.values(layouts)
-                .map(def => [ def.id, LegacyLayout.fromDefinition(def) ])
-        )
-    )
-  }
-
-  // save/load
-
-  static fromDump(state: Array<any>, providedLayouts?: LooseLayoutMap) {
-    const layouts = providedLayouts !== null
-      ? Page.tightenLooseLayouts(providedLayouts)
-      : <LayoutMap>new Map()
-
-    const page = new Page(layouts)
-    page.replaceState(state)
-    return page
-  }
-  replaceState(state: Array<any>, providedLayouts?: LooseLayoutMap) {
-    const result = state.map(layerdef => {
-      const { id, layout } = layerdef
-      const layoutId = typeof layout === 'string'? layout : layout.id
-      const foundLayout = <LegacyLayout>this.getLayout(layoutId) // FIXME: will not work with non-legacy layout
-      const recoveredLayout = layout.id? LegacyLayout.fromDefinition(layout) : null
-
-      // TODO: reconsider recover level; now using lv1
-      // lv0: throw
-      // lv1: use layout from layer, or throw
-      // lv2: use 'broken' layout even for worst case
-
-      if(!recoveredLayout && (providedLayouts && !foundLayout)) {
-        throw new ReferenceError(`layout '${layoutId}' of layer '${id}' `
-          + `couldn't be found from provided layout list`)
-      }
-
-      // foundLayout will automatically fill missing layout definitions
-      // AND prevent re-initialize Layouts, this is bit tricky
-      // so TODO: should we consider inconsistent layout defs between layers?
-      const layer = Layer.fromDump(layerdef, foundLayout || recoveredLayout)
-
-      if(!foundLayout && recoveredLayout)
-        this._layouts.set(layer.layout.id, recoveredLayout)
-
-      return layer
-    })
-
-    this.state = result
-  }
-  dump(includeLayout = false) {
-    const includedLayouts = new Set()
-
-    return this.state.map(layer => {
-      if(!includeLayout) {
-        return layer.dump()
-      } else {
-        const dump = layer.dump(includeLayout && !includedLayouts.has(layer.layout.id))
-        includedLayouts.add(layer.layout.id)
-        return dump
-      }
-    }).filter(_ => _)
-  }
-  render(reportError: boolean = false) {
-    // TODO isolate?
-    return this.state.flatMap(layer => [
-      `<section class="fc-block fc-layout fc-layout-${layer.layout.id}">`,
-      layer.render(null, reportError),
-      `</section>`
-    ]).join('\n')
-  }
-  validateAll() {
-    return this.state.flatMap(layer => layer.updateValidity())
-  }
-
-  // state utils
-
-  _updateLookup() {
-    this._stateLookup = {}
-    for(const index in this.state) {
-      this._stateLookup[this.state[index].id] = +index // 아오 망할 ts
-    }
-  }
-  getLayerByPath(path: Path): Layer | undefined {
-    return /*this.state[this._stateLookup[path.layer]] ??*/ this.state.find((layer: Layer) => layer.id === path.layer)
-  }
-  pathToIndex(path: Path): number | undefined {
-    let found
-
-    // found = this._stateLookup[path.layer]
-    // if(found != null) return found
-
-    found = this.state.findIndex((layer: Layer) => layer.id === path.layer)
-    return found >= 0? found : undefined; // INTENDED
-  }
-  indexToPath(index: number): Path | undefined {
-    return this.state[index]?.path
-  }
-
-  // layout
-
-  getLayout(id: string): LayoutBase | undefined {
-    return this._layouts.get(id)
-  }
-  createLayer(layoutId: string, layerId: string = uniqueId(), values?: any, meta?: LayerMeta) {
-    const layout = this.getLayout(layoutId)
-    return new Layer(layerId, layout, values, meta)
-  }
-
-  // editor actions
-
-  appendLayer(after: Path | undefined, layoutId: string, layerId?: string, values?: any, meta?: LayerMeta) {
-    const layer = this.createLayer(layoutId, layerId, values, meta)
-    const length = this.state.length
-    const index = (after? this.pathToIndex(after) ?? length : length) + 1
-
-    this.state.splice(index, 0, layer)
-
-    this._updateLookup()
-    return layer
-  }
-  restoreLayer(after: Path | undefined, oldLayer: Layer) {
-    // FIXME gonna throw them as-is?
-    const index = after? this.pathToIndex(after) ?? 0 : 0
-
-    this.state.splice(index, 0, oldLayer)
-
-    this._updateLookup()
-    return oldLayer
-  }
-  duplicateLayer(after: Path, layerId?: string) {
-    const index = this.pathToIndex(after)
-    if(index == null)
-      throw new Error()
-    const oldLayer = this.state[index]
-    const newLayer = oldLayer.clone(layerId)
-
-    this.state.splice(index + 1, 0, newLayer)
-
-    this._updateLookup()
-    return newLayer
-  }
-  reorderLayer(at: Path | number, toWhere: Path | number) {
-    const from = typeof at === 'number'? at : this.pathToIndex(at)!
-    const to = typeof toWhere === 'number'? toWhere : this.pathToIndex(toWhere)!
-    // console.log(`moving layer #${from} (path ${at.toString()} id ${this.state[from].id}) to #${to} (path ${toWhere.toString()} id ${this.state[to].id})`)
-    const [ target ] = this.state.splice(from, 1)
-    this.state.splice(to, 0, target)
-
-    this._updateLookup()
-    // kindly tell back as indexes
-    return [ from, to ]
-  }
-  reorderMultipleLayers(layers: Array<Path>, toWhere: Path | number): [[number, number][], number] {
-    const originalTo = typeof toWhere === 'number'? toWhere : this.pathToIndex(toWhere)!
-    let to = originalTo
-    let fromDelta = 0
-    const indexes = layers.map(path => this.pathToIndex(path)!).sort((a, b) => a - b)
-
-    let left, right
-
-    if(indexes.includes(to)) {
-      const chunks = indexes.reduce((p, c) => {
-        if(p.at(-1)?.at(-1) - c !== -1)
-          p.push([c])
-        else
-          p.at(-1).push(c)
-        return p
-      }, [])
-      const center = chunks.findIndex(_ => _.includes(to))
-
-      left = chunks.slice(0, center).flat()
-      right = chunks.slice(center + 1).flat()
-    } else {
-      let center = indexes.findIndex(i => to <= i)
-
-      if(center === -1)
-        if(indexes[indexes.length - 1] < to)
-          center = indexes.length
-        else
-          center = 0
-
-      left = indexes.slice(0, center)
-      right = indexes.slice(indexes[center] === to? center + 1 : center)
-    }
-
-
-    const history = [
-      ...left.map(_ => [_, _ + 1]).reverse(),
-      ...right.map(_ => [_, _ - 1])
-    ]
-
-    for(const [from, to] of history) {
-      this.reorderLayer(from, to)
-    }
-
-    return [ history, originalTo ]
-  }
-  restoreMultipleLayers(history: Array<[number, number]>) {
-    for(let i = history.length - 1; i >= 0; i--) {
-      let [from, to] = history[i]
-      this.reorderLayer(to, from)
-    }
-  }
-  removeLayer(path: Path): number | undefined {
-    const index = this.pathToIndex(path) ?? -1
-    if(index < 0)
-      return
-
-    this.state.splice(index, 1)
-
-    this._updateLookup()
-    return index
-  }
-
-  setFocus(path?: Path | Paths) {
-    // TODO: onfocuschange?
-    if(!path)
-      return
-    if(path.type === 'paths')
-      this.focus = path.paths[0]
-    else
-      this.focus = path ?? null
-  }
-  setFocusByIndex(index: number) {
-    this.focus = this.indexToPath(index)
-  }
-  get focusedIndex() {
-    return this.focus? this.pathToIndex(this.focus) : -1
-  }
-  get currentLayer() {
-    return this.focus? this.getLayerByPath(this.focus) : null
-  }
-
-  describe(path?: Path | Paths): string | null {
-    if(!path) return ''
-
-    let suffix = ''
-    if(path.type === 'paths') {
-      suffix = `…+${path.paths.length - 1}`
-      path = path.paths[0]
-    }
-    if(!path) return;
-    const layout = this.getLayerByPath(path)?.layout
-    if(!layout) return;
-    const index = this.pathToIndex(path)
-
-    const child = layout.params.get(path.child)
-
-    if(!child)
-      return `${layout.id} #${index}${suffix}`
-
-    const grandchild = layout.getListParams(path.child)?.get(path.grandchild)
-
-    if(!grandchild)
-      return `${layout.id} #${index} ${child.label ?? child.name}${suffix}`
-
-    return `${layout.id} #${index} ${child.label ?? child.name} #${path.index + 1} ${grandchild.label ?? grandchild.name}${suffix}`
-  }
-
-}
+export { default as default } from './page'
diff --git a/src/page/layer.ts b/src/page/layer.ts
index d74a8e5c..8cf6a5ef 100644
--- a/src/page/layer.ts
+++ b/src/page/layer.ts
@@ -1,18 +1,19 @@
-import type LayoutParameter from '../structs/LayoutParameter'
-import type { ListLayoutParameter } from '../structs/LayoutParameter'
-import LayoutBase, { DynamicLayoutBase } from '../layout'
-import LegacyLayout from '../layout/legacy'
+import type { ListLayoutParameter } from '@day1co/fastcomposer-layout/structs'
+import LayoutBase, { DynamicLayoutBase } from '@day1co/fastcomposer-layout'
+import { LegacyLayout } from '@day1co/fastcomposer-layout/layouts'
+
 
 import Path from './path'
-import { clone, uniqueId } from '../util'
-import * as html from '../util/html'
+import * as util from './util'
 
 /**
  * Stores miscellaneous attributes of layer. This will be preserved.
  */
 export type LayerMeta = {
   hidden: boolean,
-  label: string
+  label: string,
+  visibleSince?: string,
+  visibleUntil?: string
 }
 /**
  * Stores temporal states of layer. This won't be saved.
@@ -85,10 +86,10 @@ export default class Layer {
       Array.isArray(value)?
         value.flatMap((item, index) =>
           Object.entries(item).map(([ grandchild, value ]) =>
-            html.validate(value) || this.path.override({ child, index, grandchild })
+            util.html.validate(value) || this.path.override({ child, index, grandchild })
           )
         )
-      : html.validate(value) || [ this.path.override({ child }) ]
+      : util.html.validate(value) || [ this.path.override({ child }) ]
     ).filter(v => v instanceof Path)
   }
   updateValidity() {
@@ -102,8 +103,8 @@ export default class Layer {
     return new Path(this.id)
   }
 
-  clone(id = uniqueId()) {
-    return new Layer(id, this.layout, clone(this.values))
+  clone(id = util.uniqueId()) {
+    return new Layer(id, this.layout, structuredClone(this.values))
   }
 
   _getDef(key: string) {
@@ -161,6 +162,8 @@ export default class Layer {
       throw new ReferenceError('attempted to set nowhere on layer')
   }
   setMeta<K extends keyof LayerMeta>(key: K, value: LayerMeta[K]) {
-    this.meta[key] = value;
+    this.meta = Object.assign({}, this.meta, { [key]: value ?? undefined })
+    if(value == null)
+      delete this.meta[key]
   }
 }
diff --git a/src/page/package.json b/src/page/package.json
new file mode 100644
index 00000000..29c4e51f
--- /dev/null
+++ b/src/page/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "@day1co/fastcomposer-page",
+  "version": "2.2.0",
+  "type": "module",
+  "files": [
+    "dist",
+    "actions",
+    "*.d.ts"
+  ],
+  "main": "./dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./actions": "./dist/actions.js"
+  },
+  "scripts": {
+    "build": "vite build",
+    "prepack": "vite build",
+    "clean": "rm -rf ./dist ./node_modules"
+  },
+  "dependencies": {
+    "@day1co/fastcomposer-layout": "@day1co/fastcomposer-layout@latest",
+    "@day1co/fastcomposer-state": "@day1co/fastcomposer-state@latest"
+  }
+}
diff --git a/src/page/page.ts b/src/page/page.ts
new file mode 100644
index 00000000..68bd0821
--- /dev/null
+++ b/src/page/page.ts
@@ -0,0 +1,302 @@
+import type Action from '@day1co/fastcomposer-state/action'
+import type ActTarget from '@day1co/fastcomposer-state/acttarget'
+import type { LayerMeta } from './layer'
+
+import Module from '@day1co/fastcomposer-state/module'
+import LayoutBase from '@day1co/fastcomposer-layout'
+import { LegacyLayout } from '@day1co/fastcomposer-layout/layouts'
+
+import Actions from './actions'
+import Path, { Paths } from './path'
+import Layer from './layer'
+
+import { uniqueId } from './util'
+
+type LayoutMap = Map<string, LayoutBase>
+type LooseLayoutMap = LayoutMap | object
+
+export default class Page extends Module {
+
+  id: 'page'
+
+  actions: Map<string, Action<Page, ActTarget>>
+  state: Array<Layer> = []
+
+  focus: Path | null = null
+
+  _layouts: Map<string, LayoutBase>
+
+  _stateLookup: { [K: Layer['id']]: number } = {}
+
+  constructor(
+    layouts: Map<string, LayoutBase> | object,
+    actions: Map<string, Action<Page, ActTarget>> = Actions
+  ) {
+    super(actions)
+
+    this._layouts = Page.tightenLooseLayouts(layouts)
+  }
+
+  static tightenLooseLayouts(layouts: LooseLayoutMap): LayoutMap {
+    return Object.freeze(
+      layouts instanceof Map
+      ? layouts
+      : new Map(
+          Object.values(layouts)
+                .map(def => [ def.id, LegacyLayout.fromDefinition(def) ])
+        )
+    )
+  }
+
+  // save/load
+
+  static fromDump(state: Array<any>, providedLayouts?: LooseLayoutMap) {
+    const layouts = providedLayouts != null
+      ? Page.tightenLooseLayouts(providedLayouts)
+      : <LayoutMap>new Map()
+
+    const page = new Page(layouts)
+    page.replaceState(state)
+    return page
+  }
+  replaceState(state: Array<any>, providedLayouts?: LooseLayoutMap) {
+    const result = state.map(layerdef => {
+      const { id, layout } = layerdef
+      const layoutId = typeof layout === 'string'? layout : layout.id
+      const foundLayout = <LegacyLayout>this.getLayout(layoutId) // FIXME: will not work with non-legacy layout
+      const recoveredLayout = layout.id? LegacyLayout.fromDefinition(layout) : null
+
+      // TODO: reconsider recover level; now using lv1
+      // lv0: throw
+      // lv1: use layout from layer, or throw
+      // lv2: use 'broken' layout even for worst case
+
+      if(!recoveredLayout && (providedLayouts && !foundLayout)) {
+        throw new ReferenceError(`layout '${layoutId}' of layer '${id}' `
+          + `couldn't be found from provided layout list`)
+      }
+
+      // foundLayout will automatically fill missing layout definitions
+      // AND prevent re-initialize Layouts, this is bit tricky
+      // so TODO: should we consider inconsistent layout defs between layers?
+      const layer = Layer.fromDump(layerdef, foundLayout || recoveredLayout)
+
+      if(!foundLayout && recoveredLayout)
+        this._layouts.set(layer.layout.id, recoveredLayout)
+
+      return layer
+    })
+
+    this.state = result
+  }
+  dump(includeLayout = false) {
+    const includedLayouts = new Set()
+
+    return this.state.map(layer => {
+      if(!includeLayout) {
+        return layer.dump()
+      } else {
+        const dump = layer.dump(includeLayout && !includedLayouts.has(layer.layout.id))
+        includedLayouts.add(layer.layout.id)
+        return dump
+      }
+    }).filter(_ => _)
+  }
+  render(reportError: boolean = false) {
+    // TODO isolate?
+    return this.state.flatMap(layer => [
+      `<section class="fc-block fc-layout fc-layout-${layer.layout.id}">`,
+      layer.render(null, reportError),
+      `</section>`
+    ]).join('\n')
+  }
+  validateAll() {
+    return this.state.flatMap(layer => layer.updateValidity())
+  }
+
+  // state utils
+
+  _updateLookup() {
+    this._stateLookup = {}
+    for(const index in this.state) {
+      this._stateLookup[this.state[index].id] = +index // 아오 망할 ts
+    }
+  }
+  getLayerByPath(path: Path): Layer | undefined {
+    return /*this.state[this._stateLookup[path.layer]] ??*/ this.state.find((layer: Layer) => layer.id === path.layer)
+  }
+  pathToIndex(path: Path): number | undefined {
+    let found
+
+    // found = this._stateLookup[path.layer]
+    // if(found != null) return found
+
+    found = this.state.findIndex((layer: Layer) => layer.id === path.layer)
+    return found >= 0? found : undefined; // INTENDED
+  }
+  indexToPath(index: number): Path | undefined {
+    return this.state[index]?.path
+  }
+
+  // layout
+
+  getLayout(id: string): LayoutBase | undefined {
+    return this._layouts.get(id)
+  }
+  createLayer(layoutId: string, layerId: string = uniqueId(), values?: any, meta?: LayerMeta) {
+    const layout = this.getLayout(layoutId)
+    return new Layer(layerId, layout, values, meta)
+  }
+
+  // editor actions
+
+  appendLayer(after: Path | undefined, layoutId: string, layerId?: string, values?: any, meta?: LayerMeta) {
+    const layer = this.createLayer(layoutId, layerId, values, meta)
+    const length = this.state.length
+    const index = (after? this.pathToIndex(after) ?? length : length) + 1
+
+    this.state.splice(index, 0, layer)
+
+    this._updateLookup()
+    return layer
+  }
+  restoreLayer(after: Path | undefined, oldLayer: Layer) {
+    // FIXME gonna throw them as-is?
+    const index = after? this.pathToIndex(after) ?? 0 : 0
+
+    this.state.splice(index, 0, oldLayer)
+
+    this._updateLookup()
+    return oldLayer
+  }
+  duplicateLayer(after: Path, layerId?: string) {
+    const index = this.pathToIndex(after)
+    if(index == null)
+      throw new Error()
+    const oldLayer = this.state[index]
+    const newLayer = oldLayer.clone(layerId)
+
+    this.state.splice(index + 1, 0, newLayer)
+
+    this._updateLookup()
+    return newLayer
+  }
+  reorderLayer(at: Path | number, toWhere: Path | number) {
+    const from = typeof at === 'number'? at : this.pathToIndex(at)!
+    const to = typeof toWhere === 'number'? toWhere : this.pathToIndex(toWhere)!
+    // console.log(`moving layer #${from} (path ${at.toString()} id ${this.state[from].id}) to #${to} (path ${toWhere.toString()} id ${this.state[to].id})`)
+    const [ target ] = this.state.splice(from, 1)
+    this.state.splice(to, 0, target)
+
+    this._updateLookup()
+    // kindly tell back as indexes
+    return [ from, to ]
+  }
+  reorderMultipleLayers(layers: Array<Path>, toWhere: Path | number): [[number, number][], number] {
+    const originalTo = typeof toWhere === 'number'? toWhere : this.pathToIndex(toWhere)!
+    let to = originalTo
+    let fromDelta = 0
+    const indexes = layers.map(path => this.pathToIndex(path)!).sort((a, b) => a - b)
+
+    let left, right
+
+    if(indexes.includes(to)) {
+      const chunks = indexes.reduce((p, c) => {
+        if(p.at(-1)?.at(-1) - c !== -1)
+          p.push([c])
+        else
+          p.at(-1).push(c)
+        return p
+      }, [])
+      const center = chunks.findIndex(_ => _.includes(to))
+
+      left = chunks.slice(0, center).flat()
+      right = chunks.slice(center + 1).flat()
+    } else {
+      let center = indexes.findIndex(i => to <= i)
+
+      if(center === -1)
+        if(indexes[indexes.length - 1] < to)
+          center = indexes.length
+        else
+          center = 0
+
+      left = indexes.slice(0, center)
+      right = indexes.slice(indexes[center] === to? center + 1 : center)
+    }
+
+
+    const history = [
+      ...left.map(_ => [_, _ + 1]).reverse(),
+      ...right.map(_ => [_, _ - 1])
+    ]
+
+    for(const [from, to] of history) {
+      this.reorderLayer(from, to)
+    }
+
+    return [ history, originalTo ]
+  }
+  restoreMultipleLayers(history: Array<[number, number]>) {
+    for(let i = history.length - 1; i >= 0; i--) {
+      let [from, to] = history[i]
+      this.reorderLayer(to, from)
+    }
+  }
+  removeLayer(path: Path): number | undefined {
+    const index = this.pathToIndex(path) ?? -1
+    if(index < 0)
+      return
+
+    this.state.splice(index, 1)
+
+    this._updateLookup()
+    return index
+  }
+
+  setFocus(path?: Path | Paths) {
+    // TODO: onfocuschange?
+    if(!path)
+      return
+    if(path.type === 'paths')
+      this.focus = path.paths[0]
+    else
+      this.focus = path ?? null
+  }
+  setFocusByIndex(index: number) {
+    this.focus = this.indexToPath(index)
+  }
+  get focusedIndex() {
+    return this.focus? this.pathToIndex(this.focus) : -1
+  }
+  get currentLayer() {
+    return this.focus? this.getLayerByPath(this.focus) : null
+  }
+
+  describe(path?: Path | Paths): string | null {
+    if(!path) return ''
+
+    let suffix = ''
+    if(path.type === 'paths') {
+      suffix = `…+${path.paths.length - 1}`
+      path = path.paths[0]
+    }
+    if(!path) return;
+    const layout = this.getLayerByPath(path)?.layout
+    if(!layout) return;
+    const index = this.pathToIndex(path)
+
+    const child = layout.params.get(path.child)
+
+    if(!child)
+      return `${layout.id} #${index}${suffix}`
+
+    const grandchild = layout.getListParams(path.child)?.get(path.grandchild)
+
+    if(!grandchild)
+      return `${layout.id} #${index} ${child.label ?? child.name}${suffix}`
+
+    return `${layout.id} #${index} ${child.label ?? child.name} #${path.index + 1} ${grandchild.label ?? grandchild.name}${suffix}`
+  }
+
+}
diff --git a/src/page/path.ts b/src/page/path.ts
index 43188d40..6580075a 100644
--- a/src/page/path.ts
+++ b/src/page/path.ts
@@ -1,4 +1,4 @@
-import ActTarget from '../state/acttarget'
+import ActTarget from '@day1co/fastcomposer-state/acttarget'
 
 export default class Path implements ActTarget {
 
diff --git a/src/page/raw.d.ts b/src/page/raw.d.ts
new file mode 100644
index 00000000..2843008e
--- /dev/null
+++ b/src/page/raw.d.ts
@@ -0,0 +1,4 @@
+declare module '*?raw' {
+  const content: string
+  export default content
+}
diff --git a/src/page/test/Layer.spec.ts b/src/page/test/Layer.spec.ts
index a41fdb34..7831877d 100644
--- a/src/page/test/Layer.spec.ts
+++ b/src/page/test/Layer.spec.ts
@@ -17,6 +17,7 @@ describe('Composer.Page: Layer', () => {
 
     expect(dump).toEqual({
       id: 'test1',
+      hidden: false,
       layout: setup.ListLayoutDefinition.id,
       hidden: false,
       values: {
diff --git a/src/page/test/Legacy.spec.ts b/src/page/test/Legacy.spec.ts
index 0e06a18a..d50d43d1 100644
--- a/src/page/test/Legacy.spec.ts
+++ b/src/page/test/Legacy.spec.ts
@@ -1,4 +1,4 @@
-import Page from '..';
+import Page from '../page';
 
 const layouts = [
   {
diff --git a/src/page/test/Path.spec.ts b/src/page/test/Path.spec.ts
index bb3b9309..7b55511e 100644
--- a/src/page/test/Path.spec.ts
+++ b/src/page/test/Path.spec.ts
@@ -1,4 +1,4 @@
-import Path from "../path"
+import Path from '../path'
 
 describe('Composer.Page: Path descriptor', () => {
 
diff --git a/src/page/test/actions/Layer.Duplicate.spec.ts b/src/page/test/actions/Layer.Duplicate.spec.ts
index 5001dd24..879d07c7 100644
--- a/src/page/test/actions/Layer.Duplicate.spec.ts
+++ b/src/page/test/actions/Layer.Duplicate.spec.ts
@@ -1,7 +1,7 @@
 import describeAction from './describe-action'
 import * as setup from '../setup'
 import Path from '../../path'
-import Act from '../../../state/act'
+import Act from '@day1co/fastcomposer-state/act'
 
 describeAction('layer.duplicate', ['layer.new'], helpers => {
 
@@ -10,7 +10,7 @@ describeAction('layer.duplicate', ['layer.new'], helpers => {
 
     let actNew = helpers.createAct('layer.new', null, setup.MinimalLayout.id)
     actNew.remember(null, new Path('a'))
-    actNew = <Act>state.perform(actNew)
+    actNew = <Act<Path>>state.perform(actNew)
 
     expect(actNew.destination.layer).toBe('a')
 
diff --git a/src/page/test/actions/Layer.Item.New.spec.ts b/src/page/test/actions/Layer.Item.New.spec.ts
index 712cee79..b7e48b95 100644
--- a/src/page/test/actions/Layer.Item.New.spec.ts
+++ b/src/page/test/actions/Layer.Item.New.spec.ts
@@ -1,7 +1,7 @@
 import describeAction from './describe-action'
 import * as setup from '../setup'
 
-import type { ListLayoutParameter } from '../../../structs/LayoutParameter'
+import type { ListLayoutParameter } from '@day1co/fastcomposer-layout/structs'
 
 import Path from '../../path'
 
diff --git a/src/page/test/actions/Layer.Item.Remove.spec.ts b/src/page/test/actions/Layer.Item.Remove.spec.ts
index 88fdaa86..b8a73336 100644
--- a/src/page/test/actions/Layer.Item.Remove.spec.ts
+++ b/src/page/test/actions/Layer.Item.Remove.spec.ts
@@ -1,7 +1,7 @@
 import describeAction from './describe-action'
 import * as setup from '../setup'
 
-import type Act from '../../../state/act'
+import type Act from '@day1co/fastcomposer-state/act'
 
 import Path from '../../path'
 
@@ -14,7 +14,7 @@ describeAction('layer.item.remove', ['layer.new', 'layer.item.new', 'layer.edit'
   it('should work: do, undo, redo', () => {
     const [ page, state ] = helpers.createState(setup.ListLayout)
 
-    const actNew = <Act>state.perform(
+    const actNew = <Act<Path>>state.perform(
       helpers
         .createAct('layer.new', null, setup.ListLayout.id)
         .remember(null, path)
diff --git a/src/page/test/actions/Layer.Remove.spec.ts b/src/page/test/actions/Layer.Remove.spec.ts
index 1722ab4d..4cb7b648 100644
--- a/src/page/test/actions/Layer.Remove.spec.ts
+++ b/src/page/test/actions/Layer.Remove.spec.ts
@@ -1,7 +1,7 @@
 import describeAction from './describe-action'
 import * as setup from '../setup'
 
-import type Act from '../../../state/act'
+import type Act from '@day1co/fastcomposer-state/act'
 
 import Path from '../../path'
 import { Paths } from '../../path'
@@ -13,7 +13,7 @@ describeAction('layer.remove', ['layer.new'], helpers => {
 
     let actNew = helpers.createAct('layer.new', null, setup.MinimalLayout.id)
     helpers.mocked.uniqueId.mockReturnValueOnce('a')
-    actNew = <Act>state.perform(actNew)
+    actNew = <Act<Path>>state.perform(actNew)
 
     expect(actNew.destination.layer).toBe('a')
 
diff --git a/src/page/test/actions/describe-action.ts b/src/page/test/actions/describe-action.ts
index 8bd48cdb..098b188d 100644
--- a/src/page/test/actions/describe-action.ts
+++ b/src/page/test/actions/describe-action.ts
@@ -7,17 +7,17 @@ jest.mock('../../../util', () => ({
 
 import { uniqueId } from '../../../util'
 
-import Act from '../../../state/act'
+import Act from '@day1co/fastcomposer-state/act'
 import Actions from '../../actions'
-import State from '../../../state'
-import type Action from '../../../state/action'
-import type ActTarget from '../../../state/acttarget'
+import State from '@day1co/fastcomposer-state'
+import type Action from '@day1co/fastcomposer-state/action'
+import type ActTarget from '@day1co/fastcomposer-state/acttarget'
 import type Path from '../../path'
 import type { Paths } from '../../path'
 
 import * as setup from '../setup'
-import Layout from '../../../layout/legacy'
-import Page from '../..'
+import { LegacyLayout as Layout } from '@day1co/fastcomposer-layout/layouts'
+import Page from '../../page'
 
 type GetActionT<C extends Action<any, any>> = C extends Action<any, infer T> ? T : never
 type KeyOfMap<M extends Map<unknown, unknown>> = M extends Map<infer K, unknown> ? K : never
diff --git a/src/page/test/setup.ts b/src/page/test/setup.ts
index 108fa733..177c2f71 100644
--- a/src/page/test/setup.ts
+++ b/src/page/test/setup.ts
@@ -1,11 +1,11 @@
-export * from '../../state/test/setup'
+export * from '@day1co/fastcomposer-state/test/setup'
 
-import {
+import type {
   SingularLayoutParameter,
   ListLayoutParameter,
   LegacyListLayoutParameter
-} from '../../structs/LayoutParameter'
-import LegacyLayout from '../../layout/legacy'
+} from '@day1co/fastcomposer-layout/structs/LayoutParameter'
+import { LegacyLayout } from '@day1co/fastcomposer-layout/layouts'
 
 export const DEFAULT_VALUE = 'default value'
 
diff --git a/src/page/tsconfig.json b/src/page/tsconfig.json
new file mode 120000
index 00000000..81195eb7
--- /dev/null
+++ b/src/page/tsconfig.json
@@ -0,0 +1 @@
+../_tsconfig.json
\ No newline at end of file
diff --git a/src/page/util.ts b/src/page/util.ts
new file mode 100644
index 00000000..2d224c07
--- /dev/null
+++ b/src/page/util.ts
@@ -0,0 +1,48 @@
+export function uniqueId() {
+  return Math.random().toString(36).slice(2, 10)
+}
+
+export const html = {
+  lint(value: string) {
+    const el = document.createElement('div')
+    el.innerHTML = value
+    return el.innerHTML
+  },
+
+  validate(value: any) {
+    if(typeof value !== 'string')
+      return true
+
+    try {
+      // <hr /> closes <p>
+      const doc = new DOMParser().parseFromString(value + '<hr>', 'text/html')
+      if(doc.querySelector('parseerror'))
+        return false
+      if((<HTMLElement>doc.body.lastChild).tagName !== 'HR')
+        return false
+    } catch(e) {
+      return false
+    }
+
+    return true
+  },
+
+  validateLegacy(value: any) {
+    const selfClosingTags = ['img', 'br', 'hr'];
+
+    let tags = typeof value === 'string' ? <Array<any>>value.match(/(<([^>]+)>)/igm) : null;
+
+    if (tags) {
+      tags = tags.map((tag) => tag.replace(/ .*?=('*.*'?|"*.*"?)/gim,'>'));
+
+      return tags.every((tag, index, array) => {
+        const tagName = tag.match(/[A-Z0-9]/gim).join('')
+        const openingLen = array.filter((item) => `<${ tagName }>` === item).length
+        const closingLen = array.filter((item) => `</${ tagName }>` === item).length
+        const hasSelfClosingTagLen = selfClosingTags.filter((item) => item === tagName).length
+
+        return openingLen === closingLen || hasSelfClosingTagLen
+      })
+    } else return true
+  }
+}
diff --git a/src/page/vite.config.mjs b/src/page/vite.config.mjs
new file mode 100644
index 00000000..e57cf917
--- /dev/null
+++ b/src/page/vite.config.mjs
@@ -0,0 +1,6 @@
+import { defineConfig, mergeConfig } from 'vite'
+import config from '../_vite.config.mjs'
+
+export default defineConfig(
+  mergeConfig(config(__dirname), {})
+)
diff --git a/src/state/act.ts b/src/state/act.ts
index 3d84fc41..50e060f8 100644
--- a/src/state/act.ts
+++ b/src/state/act.ts
@@ -1,8 +1,15 @@
-import type Path from '../page/path'
-import { uniqueId } from '../util'
 import ActTarget from './acttarget'
 
-export default class Act<Target extends ActTarget = Path> {
+const generateId = () => {
+  // 24 bits timestamp
+  const upper = ((performance.now() * 10) & 0xffffff) << 16
+  // 16 bits entropy
+  const lower = (Math.random() * 0xffff & 0xffff)
+  // 40 bits = 8 letters in base32
+  return (upper + lower).toString(32)
+}
+
+export default class Act<Target extends ActTarget> {
   capturedState?: any
   destination?: Target
   remembered: boolean = false
@@ -16,7 +23,7 @@ export default class Act<Target extends ActTarget = Path> {
     public target: Target,
     public arg?: any,
     public sealed: boolean = false,
-    public id: string = action + '#' + uniqueId()
+    public id: string = action + '#' + generateId()
   ) {}
 
   isComposableWith(act: Act<Target>) {
diff --git a/src/state/action.ts b/src/state/action.ts
index 2a9d7de8..2ec95d60 100644
--- a/src/state/action.ts
+++ b/src/state/action.ts
@@ -1,6 +1,5 @@
 import type Act from './act'
-import type State from './index'
-import type Path from '../page/path'
+import type State from './state'
 import type ActTarget from './acttarget'
 import Module from './module'
 
@@ -11,7 +10,7 @@ export default interface Action<T extends Module, Target extends ActTarget> {
   perform(root: State, self: T, act: Act<Target>): Act<Target>
   // return null to discard current act
   compose?(root: State, self: T, previousAct: Act<Target>, act: Act<Target>): Act<Target> | null
-  rollback(root: State, self: T, rememberedAct: Act<Target>): Path | undefined
+  rollback(root: State, self: T, rememberedAct: Act<Target>): Target | undefined
   doNotRemember?: boolean
   // TODO: icon/stringifier/whatever for user interfaces
   // TODO: whatever
diff --git a/src/state/index.ts b/src/state/index.ts
index 3c714841..1bbf70a7 100644
--- a/src/state/index.ts
+++ b/src/state/index.ts
@@ -1,136 +1,6 @@
-import type Action from './action'
-import Act from './act'
-import Module from './module'
-import ActTarget from './acttarget'
+export { default as Act } from './act'
+export type { default as Action } from './action'
+export type { default as ActTarget } from './acttarget'
+export type { default as Module } from './module'
 
-export default class State {
-
-  modules: { [key: string]: Module } = {}
-
-  past: Array<Act<ActTarget>> = []
-  future: Array<Act<ActTarget>> = []
-
-  _actionMap: Map<string, string> = new Map()
-
-  constructor({ modules = {} } = {}) {
-    for(const key in modules) {
-      const module = modules[key]
-      this.registerModule(key, module)
-    }
-  }
-
-  // modules
-
-  registerModule(key: string, module: Module) {
-    const alreadyExists = this.modules[key] != null
-    this.modules[key] = module
-
-    for(const [id] of module.actions) {
-      const alreadyMappedTo = this._actionMap.get(id)
-      if(!alreadyExists && alreadyMappedTo != null && alreadyMappedTo !== id)
-        throw new TypeError(`action '${id}' from module '${key}' conflicts with '${alreadyMappedTo}'`)
-
-      this._actionMap.set(id, key)
-    }
-  }
-  resolveAction(key: string): [ Module, Action<any, ActTarget> ] {
-    // TODO: WTF
-    const moduleMappedTo = this._actionMap.get(key)
-    if(!moduleMappedTo)
-      throw new ReferenceError(`action '${key}' couldn't be found in actionMap, did module registered correctly?`)
-
-    const module = this.modules[moduleMappedTo]
-    const action = module.actions.get(key)
-    if(!action)
-      throw new ReferenceError(`action '${key}' found in module '${module}', but action couldn't be found`)
-
-    return [ module, action ]
-  }
-
-  // history helpers
-
-  get lastAct() {
-    return this.past[this.past.length - 1]
-  }
-
-  _getPast(): Act<ActTarget> | undefined {
-    const present = this.past.pop()
-    if(!present) return
-    this.future.push(present)
-    return present
-  }
-  _discardPast(): void {
-    this.past.pop()
-  }
-  _writePresent(act: Act<ActTarget>) {
-    this.past.push(act)
-    this.future.splice(0, this.future.length)
-  }
-  _getFuture(): Act<ActTarget> | undefined {
-    const present = this.future.pop()
-    if(!present) return
-    this.past.push(present)
-    return present
-  }
-
-  act(...params: ConstructorParameters<typeof Act>) {
-    const act = new Act(...params)
-    return this.perform(act, false)
-  }
-
-  perform(act: Act<ActTarget>, isRedo?: boolean, doNotCompose?: boolean) {
-    const [ module, action ] = this.resolveAction(act.action)
-
-    if(action.compose && !doNotCompose && this.lastAct?.isComposableWith(act)) {
-      action.perform(this, module, act)
-
-      const shouldDiscardCurrentAct = !action.compose(this, module, this.lastAct, act)
-      if(shouldDiscardCurrentAct)
-        this._discardPast()
-
-      return this.lastAct
-    } else {
-      act.meta ||= module.describe?.(act.target)
-      action.perform(this, module, act)
-
-      // TODO: move focus
-
-      if(!action.doNotRemember && !isRedo)
-        this._writePresent(act)
-
-      if(!action.compose)
-        act.seal()
-
-      return act
-    }
-  }
-
-  rollback(history: Act<ActTarget>) {
-    const [ module, action ] = this.resolveAction(history.action)
-
-    history.seal()
-
-    if(action.rollback) {
-      // eslint-disable-next-line no-unused-vars
-      // TODO: move focus
-      const target = action.rollback(this, module, history)
-    } else {
-      // means we have nothing able to undo, do nothing
-      // why it did even registered on history then???
-      // ¯\_(ツ)_/¯
-      // originally meant to be multiple redo methods, but idk huh
-    }
-  }
-
-  redo() {
-    const present = this._getFuture()
-    if(!present) return
-    this.perform(present, true)
-  }
-  undo() {
-    const present = this._getPast()
-    if(!present) return
-    this.rollback(present)
-  }
-
-}
+export { default as default } from './state'
diff --git a/src/state/module.ts b/src/state/module.ts
index bd2f063b..6d460e01 100644
--- a/src/state/module.ts
+++ b/src/state/module.ts
@@ -1,4 +1,3 @@
-import Path from '../page/path'
 import Action from './action'
 import type ActTarget from './acttarget'
 
diff --git a/src/state/package.json b/src/state/package.json
new file mode 100644
index 00000000..2ae76013
--- /dev/null
+++ b/src/state/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "@day1co/fastcomposer-state",
+  "version": "2.2.0",
+  "type": "module",
+  "files": [
+    "dist",
+    "*.d.ts"
+  ],
+  "main": "./dist/index.js",
+  "scripts": {
+    "build": "vite build",
+    "prepack": "vite build",
+    "clean": "rm -rf ./dist ./node_modules"
+  }
+}
diff --git a/src/state/state.ts b/src/state/state.ts
new file mode 100644
index 00000000..6f0f8e7d
--- /dev/null
+++ b/src/state/state.ts
@@ -0,0 +1,142 @@
+import Act from './act'
+import type Action from './action'
+import type ActTarget from './acttarget'
+import Module from './module'
+
+export default class State {
+
+  modules: { [key: string]: Module } = {}
+
+  past: Array<Act<ActTarget>> = []
+  future: Array<Act<ActTarget>> = []
+
+  _actionMap: Map<string, string> = new Map()
+
+  constructor({ modules = {} } = {}) {
+    for(const key in modules) {
+      const module = modules[key]
+      this.registerModule(key, module)
+    }
+  }
+
+  // modules
+
+  registerModule(key: string, module: Module) {
+    const alreadyExists = this.modules[key] != null
+    this.modules[key] = module
+
+    for(const [id] of module.actions) {
+      const alreadyMappedTo = this._actionMap.get(id)
+      if(!alreadyExists && alreadyMappedTo != null && alreadyMappedTo !== id)
+        throw new TypeError(`action '${id}' from module '${key}' conflicts with '${alreadyMappedTo}'`)
+
+      this._actionMap.set(id, key)
+    }
+  }
+  resolveAction(key: string): [ Module, Action<any, ActTarget> ] {
+    // TODO: WTF
+    const moduleMappedTo = this._actionMap.get(key)
+    if(!moduleMappedTo)
+      throw new ReferenceError(`action '${key}' couldn't be found in actionMap, did module registered correctly?`)
+
+    const module = this.modules[moduleMappedTo]
+    const action = module.actions.get(key)
+    if(!action)
+      throw new ReferenceError(`action '${key}' found in module '${module}', but action couldn't be found`)
+
+    return [ module, action ]
+  }
+
+  // history helpers
+
+  get lastAct() {
+    return this.past[this.past.length - 1]
+  }
+
+  _getPast(): Act<ActTarget> | undefined {
+    const present = this.past.pop()
+    if(!present) return
+    this.future.push(present)
+    return present
+  }
+  _discardPast(): void {
+    this.past.pop()
+  }
+  _writePresent(act: Act<ActTarget>) {
+    this.past.push(act)
+    this.future.splice(0, this.future.length)
+  }
+  _getFuture(): Act<ActTarget> | undefined {
+    const present = this.future.pop()
+    if(!present) return
+    this.past.push(present)
+    return present
+  }
+
+  act(...params: ConstructorParameters<typeof Act>) {
+    const act = new Act(...params)
+    return this.perform(act, false)
+  }
+
+  perform(act: Act<ActTarget>, isRedo?: boolean, doNotCompose?: boolean) {
+    const [ module, action ] = this.resolveAction(act.action)
+
+    if(action.compose && !doNotCompose && this.lastAct?.isComposableWith(act)) {
+      action.perform(this, module, act)
+
+      const updatedAct = action.compose(this, module, this.lastAct, act)
+      // if nothing returned, consider act has been 'nullified'
+      if(!updatedAct)
+        this._discardPast()
+      // if new act (instead of updated lastAct) returned, consider it uncomposable and write present
+      else if(Object.is(act, updatedAct) && !action.doNotRemember && !isRedo) {
+        act.meta ||= module.describe?.(act.target)
+        this._writePresent(act)
+      }
+
+      return updatedAct
+    } else {
+      act.meta ||= module.describe?.(act.target)
+      action.perform(this, module, act)
+
+      // TODO: move focus
+
+      if(!action.doNotRemember && !isRedo)
+        this._writePresent(act)
+
+      if(!action.compose)
+        act.seal()
+
+      return act
+    }
+  }
+
+  rollback(history: Act<ActTarget>) {
+    const [ module, action ] = this.resolveAction(history.action)
+
+    history.seal()
+
+    if(action.rollback) {
+      // eslint-disable-next-line no-unused-vars
+      // TODO: move focus
+      const target = action.rollback(this, module, history)
+    } else {
+      // means we have nothing able to undo, do nothing
+      // why it did even registered on history then???
+      // ¯\_(ツ)_/¯
+      // originally meant to be multiple redo methods, but idk huh
+    }
+  }
+
+  redo() {
+    const present = this._getFuture()
+    if(!present) return
+    this.perform(present, true)
+  }
+  undo() {
+    const present = this._getPast()
+    if(!present) return
+    this.rollback(present)
+  }
+
+}
diff --git a/src/state/test/index.spec.ts b/src/state/test/index.spec.ts
index 6ffe703a..2ef159e1 100644
--- a/src/state/test/index.spec.ts
+++ b/src/state/test/index.spec.ts
@@ -3,7 +3,7 @@ import { jest } from '@jest/globals'
 import * as setup from './setup'
 
 import Act from '../act'
-import State from '..'
+import State from '../state'
 
 describe('Main State Manager', () => {
 
diff --git a/src/state/tsconfig.json b/src/state/tsconfig.json
new file mode 120000
index 00000000..81195eb7
--- /dev/null
+++ b/src/state/tsconfig.json
@@ -0,0 +1 @@
+../_tsconfig.json
\ No newline at end of file
diff --git a/src/state/vite.config.mjs b/src/state/vite.config.mjs
new file mode 100644
index 00000000..e57cf917
--- /dev/null
+++ b/src/state/vite.config.mjs
@@ -0,0 +1,6 @@
+import { defineConfig, mergeConfig } from 'vite'
+import config from '../_vite.config.mjs'
+
+export default defineConfig(
+  mergeConfig(config(__dirname), {})
+)
diff --git a/src/util/html.ts b/src/util/html.ts
deleted file mode 100644
index 0d771890..00000000
--- a/src/util/html.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-export function lint(value: string) {
-  const el = document.createElement('div')
-  el.innerHTML = value
-  return el.innerHTML
-}
-
-export function validate(value: any) {
-  if(typeof value !== 'string')
-    return true
-
-  try {
-    // <hr /> closes <p>
-    const doc = new DOMParser().parseFromString(value + '<hr>', 'text/html')
-    if(doc.querySelector('parseerror'))
-      return false
-    if((<HTMLElement>doc.body.lastChild).tagName !== 'HR')
-      return false
-  } catch(e) {
-    return false
-  }
-
-  return true
-}
-
-export function validateLegacy(value: any) {
-  const selfClosingTags = ['img', 'br', 'hr'];
-
-  let tags = typeof value === 'string' ? <Array<any>>value.match(/(<([^>]+)>)/igm) : null;
-
-  if (tags) {
-    tags = tags.map((tag) => tag.replace(/ .*?=('*.*'?|"*.*"?)/gim,'>'));
-
-    return tags.every((tag, index, array) => {
-      const tagName = tag.match(/[A-Z0-9]/gim).join('')
-      const openingLen = array.filter((item) => `<${ tagName }>` === item).length
-      const closingLen = array.filter((item) => `</${ tagName }>` === item).length
-      const hasSelfClosingTagLen = selfClosingTags.filter((item) => item === tagName).length
-
-      return openingLen === closingLen || hasSelfClosingTagLen
-    })
-  } else return true
-}
diff --git a/src/util/index.ts b/src/util/index.ts
deleted file mode 100644
index aacca38e..00000000
--- a/src/util/index.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-export function clone(o: object) {
-  return structuredClone(o)
-}
-
-export function uniqueId() {
-  return Math.random().toString(36).slice(2, 10)
-}
-
-export function iconToUri(icon) {
-  if(!icon)
-    return
-  else if(/^<(?:\?xml |svg )/.test(icon))
-    return 'data:image/svg+xml;utf8,' + encodeURIComponent(icon)
-  else if(/^data:image\//.test(icon))
-    return icon
-  else
-    return null
-}
diff --git a/tsconfig.json b/tsconfig.json
index 5c34dbce..08146e9c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,12 +3,16 @@
     "allowJs": true,
     "module": "ES2022",
     "moduleResolution": "node",
-    "target": "ES2018",
+    "target": "ES2022",
     "esModuleInterop": true,
     "jsx": "react",
     "jsxFragmentFactory": "Fragment",
     "jsxFactory": "h",
-    "outDir": "./dist"
+    "outDir": "./dist",
+
+    "useDefineForClassFields": false,
+    "declaration": true,
+    "skipLibCheck": true
   },
   "include": [
     "src/**/*.ts",
diff --git a/vite.config.js b/vite.config.js
index 83fefdad..e1c8a27f 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,8 +1,14 @@
+import process from 'node:process'
 import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue2'
 import viteRawPlugin from 'vite-plugin-raw'
 
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const isProd = process.env.NODE_ENV === 'production'
+
 export default defineConfig({
   root: __dirname,
   plugins: [
@@ -21,6 +27,9 @@ export default defineConfig({
       entry: path.join(__dirname, './src/legacy/index.js'),
       formats: ['es', 'cjs']
     },
+    optimizeDeps: isProd? {} : {
+      exclude: ['@day1co/fastcomposer-layout', '@day1co/fastcomposer-page', '@day1co/fastcomposer-state']
+    },
   },
   server: {
     port: 18080,