diff --git a/.github/workflows/tests.yaml b/.github/workflows/tests.yaml
index 913932a..53fab82 100644
--- a/.github/workflows/tests.yaml
+++ b/.github/workflows/tests.yaml
@@ -10,44 +10,44 @@ jobs:
   test:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
-
-    - uses: actions/setup-node@v6
-      with:
-        node-version: 24
-
-    - name: Enable Corepack
-      run: |
-        corepack enable
-        corepack prepare yarn@4.12.0 --activate
-        yarn --version
-
-    - uses: calcit-lang/setup-cr@0.0.8
-
-    - name: "load deps"
-      run: caps --ci && yarn
-
-    - name: "test js"
-      run: >
-        cr --init-fn respo.test.main/main! js
-        && node test.mjs
-
-    - name: "build js"
-      run: >
-        cr js
-        && yarn vite build --base=./
-
-    - name: Deploy to server
-      id: deploy
-      uses: Pendect/action-rsyncer@v2.0.0
-      env:
-        DEPLOY_KEY: ${{secrets.rsync_private_key}}
-      with:
-        flags: '-avzr --progress'
-        options: ''
-        ssh_options: ''
-        src: 'dist/*'
-        dest: 'rsync-user@tiye.me:/web-assets/repo/${{ github.repository }}'
-
-    - name: Display status from deploy
-      run: echo "${{ steps.deploy.outputs.status }}"
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v6
+        with:
+          node-version: 24
+
+      - name: Enable Corepack
+        run: |
+          corepack enable
+          corepack prepare yarn@4.12.0 --activate
+          yarn --version
+
+      - uses: calcit-lang/setup-cr@0.0.8
+
+      - name: "load deps"
+        run: caps --ci && yarn
+
+      - name: "test js"
+        run: >
+          cr --init-fn respo.test.main/main! js
+          && node test.mjs
+
+      - name: "build js"
+        run: >
+          cr js
+          && yarn vite build --base=./
+
+      - name: Deploy to server
+        id: deploy
+        uses: Pendect/action-rsyncer@v2.0.0
+        env:
+          DEPLOY_KEY: ${{secrets.rsync_private_key}}
+        with:
+          flags: "-avzr --progress"
+          options: ""
+          ssh_options: ""
+          src: "dist/*"
+          dest: "rsync-user@tiye.me:/web-assets/repo/${{ github.repository }}"
+
+      - name: Display status from deploy
+        run: echo "${{ steps.deploy.outputs.status }}"
diff --git a/.gitignore b/.gitignore
index 6bd40c3..bbde022 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,3 +11,5 @@ tmp/
 draft/
 
 .yarn/*.gz
+
+.calcit-snippets/
\ No newline at end of file
diff --git a/Agents.md b/Agents.md
index 7c5b6f8..88242ce 100644
--- a/Agents.md
+++ b/Agents.md
@@ -29,6 +29,14 @@ cr docs agents --full
 - 若代码块是“示意片段”而非可独立运行程序，优先标记为 `cirru.no-check`。
 - 若需要在单个代码块里串联多个表达式并共享中间值，使用 `let` 显式绑定；默认不会把前面表达式自动注册为全局定义。
 
+Respo 特有约束（不要上推到 Calcit 主程序）:
+
+- `defstyle`、`:class-name`、DOM props、样式字符串等约定，只放在 Respo 文档或 Agent 文件中说明，不要要求 Calcit CLI/Rust 主程序内置这些领域知识。
+- 编辑 `defstyle` 时，selector 使用字符串叶子，如 `|&`、`|&:hover`、`|input&`；不要写裸符号 `&`。
+- 样式值只要带空格或特殊字符，优先按字符串处理，并尽量复用 CLI 已输出的序列化形式。例如 `"|4px 10px"`、`"|1px solid "`、`"|calc(100vh - 76px)"`。
+- 遇到这类字符串，不要期待 Calcit 主程序理解它们的前端语义；应通过 Respo 文档里的工作流来规避误写：先 `cr query def` 看当前序列化，再用 `cr edit def --overwrite -f ...` 覆盖。
+- 相关细节统一收敛到 `docs/guide/styles.md`，Agent 文件只保留高频提醒，避免重复扩写。
+
 CLI 查询速查(面向 Agent):
 
 - 列出命名空间:
diff --git a/compact.cirru b/compact.cirru
index 4a7ee7a..e516cf6 100644
--- a/compact.cirru
+++ b/compact.cirru
@@ -1,7 +1,7 @@
 
 {} (:about "|file is generated - never edit directly; learn cr edit/tree workflows before changing") (:package |respo)
-  :configs $ {} (:init-fn |respo.main/main!) (:reload-fn |respo.main/reload!) (:version |0.16.30)
-    :modules $ [] |memof/ |lilac/ |calcit-test/
+  :configs $ {} (:init-fn |respo.main/main!) (:reload-fn |respo.main/reload!) (:version |0.16.33)
+    :modules $ [] |memof/ |calcit-test/
   :entries $ {}
   :files $ {}
     |respo.app.comp.container $ %{} :FileEntry
@@ -25,15 +25,15 @@
         |style-global $ %{} :CodeEntry (:doc |) (:schema :string)
           :code $ quote
             defstyle style-global $ {}
-              "\"&" $ {} (:font-family |Avenir,Verdana)
-              "\"&" $ {} ('contained "\"@media only screen and (max-width: 600px)")
+              |& $ {} (:font-family |Avenir,Verdana)
+              |& $ {} ('contained "|@media only screen and (max-width: 600px)")
                 :background-color $ hsl 0 0 90
           :examples $ []
-        |style-states $ %{} :CodeEntry (:doc |) (:schema nil)
+        |style-states $ %{} :CodeEntry (:doc |) (:schema :map)
           :code $ quote
             def style-states $ {} (:padding 8)
           :examples $ []
-      :ns $ %{} :CodeEntry (:doc |) (:schema :unit)
+      :ns $ %{} :NsEntry (:doc |)
         :code $ quote
           ns respo.app.comp.container $ :require
             respo.core :refer $ defcomp div span <> >> a
@@ -42,7 +42,6 @@
             respo.app.comp.todolist :refer $ comp-todolist
             respo.comp.space :refer $ =<
             respo.comp.inspect :refer $ highlight-defcomp
-        :examples $ []
     |respo.app.comp.task $ %{} :FileEntry
       :defs $ {}
         |comp-task $ %{} :CodeEntry (:doc |)
@@ -85,17 +84,20 @@
           :schema $ :: :fn
             {} (:return 'respo.schema/Component)
               :args $ [] :dynamic :dynamic
-        |effect-log $ %{} :CodeEntry (:doc |) (:schema nil)
+        |effect-log $ %{} :CodeEntry (:doc |)
           :code $ quote
-            defeffect effect-log (task) (action parent at-place?) (; js/console.log "\"Task effect" action at-place?)
+            defeffect effect-log (task) (action parent at-place?) (; js/console.log "|Task effect" action at-place?)
               case-default action nil
                 :mount $ let
                     x0 $ js/Math.random
-                  ; println "\"Stored" x0
+                  ; println |Stored x0
                   , nil
-                :update (; println "\"read") nil
-                :unmount (; println "\"read") nil
+                :update (; println |read) nil
+                :unmount (; println |read) nil
           :examples $ []
+          :schema $ :: :fn
+            {} (:return 'respo.schema/Effect)
+              :args $ [] :dynamic
         |style-done $ %{} :CodeEntry (:doc |) (:schema :string)
           :code $ quote
             defstyle style-done $ {}
@@ -104,9 +106,9 @@
         |style-task $ %{} :CodeEntry (:doc |) (:schema :string)
           :code $ quote
             defstyle style-task $ {}
-              "\"&" $ {} (:display :flex) (:padding "|4px 0px")
+              |& $ {} (:display :flex) (:padding "|4px 0px")
           :examples $ []
-      :ns $ %{} :CodeEntry (:doc |) (:schema :unit)
+      :ns $ %{} :NsEntry (:doc |)
         :code $ quote
           ns respo.app.comp.task $ :require
             respo.core :refer $ defcomp div input span button <> defeffect
@@ -115,7 +117,6 @@
             respo.comp.inspect :refer $ comp-inspect
             respo.app.style.widget :as widget
             respo.css :refer $ defstyle
-        :examples $ []
     |respo.app.comp.todolist $ %{} :FileEntry
       :defs $ {}
         |comp-todolist $ %{} :CodeEntry (:doc |)
@@ -125,13 +126,14 @@
                   cursor $ either (:cursor states) ([])
                   state $ either (:data states)
                     {} (:draft |) (:locked? false) (:message "|Press Ctrl+M to change message")
-                [] (on-keydown cursor state) (effect-focus)
+                [] (on-keydown cursor state) (effect-focus |#draft-input)
                   div
                     {} (:class-name style-todo-root) (:data-name |todolist)
                     comp-inspect |States state $ {} (:left |80px)
                     div
                       {} $ :style style-panel
                       input $ {} (:placeholder |Text)
+                        :id |draft-input
                         :value $ :draft state
                         :class-name widget/style-input
                         :style $ {}
@@ -194,11 +196,18 @@
           :schema $ :: :fn
             {} (:return 'respo.schema/Component)
               :args $ [] :dynamic :dynamic
-        |effect-focus $ %{} :CodeEntry (:doc |) (:schema nil)
+        |effect-focus $ %{} :CodeEntry (:doc |)
           :code $ quote
-            defeffect effect-focus () $ action parent at-place?
+            defeffect effect-focus (pattern) (action parent at-place?)
+              when (= action :mount)
+                if-let
+                  target $ js/document.querySelector pattern
+                  .!select target
           :examples $ []
-        |make-keydown-listener $ %{} :CodeEntry (:doc "|DEPRECATED: Factory function approach for creating listeners. This was an experimental approach that did not work due to Record serialization issues. Use on-keydown function instead.") (:schema nil)
+          :schema $ :: :fn
+            {} (:return 'respo.schema/Effect)
+              :args $ [] :string
+        |make-keydown-listener $ %{} :CodeEntry (:doc "|DEPRECATED: Factory function approach for creating listeners. This was an experimental approach that did not work due to Record serialization issues. Use on-keydown function instead.")
           :code $ quote
             defn make-keydown-listener (cursor state)
               %{} respo.schema/RespoListener (:name :on-keydown)
@@ -215,16 +224,25 @@
                           fn () $ dispatch! cursor (assoc state :message "|Press Ctrl+M to change message")
                           , 2000
           :examples $ []
-        |number-order $ %{} :CodeEntry (:doc |) (:schema nil)
+          :schema $ :: :fn
+            {} (:return 'respo.schema/RespoListener)
+              :args $ [] :list :map
+        |number-order $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn number-order (a b)
               if (&< a b) -1 $ if (&> a b) 1 0
           :examples $ []
-        |on-focus $ %{} :CodeEntry (:doc |) (:schema nil)
+          :schema $ :: :fn
+            {} (:return :number)
+              :args $ [] :number :number
+        |on-focus $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn on-focus (e dispatch!) (println "|Just focused~")
           :examples $ []
-        |on-keydown $ %{} :CodeEntry (:doc "|Creates a keyboard listener for Ctrl+M shortcut. This function demonstrates how to create component-local listeners that can access component state through closures. Returns a RespoListener that updates the message state when Ctrl+M is pressed.") (:schema nil)
+          :schema $ :: :fn
+            {} (:return :unit)
+              :args $ [] :dynamic :fn
+        |on-keydown $ %{} :CodeEntry (:doc "|Creates a keyboard listener for Ctrl+M shortcut. This function demonstrates how to create component-local listeners that can access component state through closures. Returns a RespoListener that updates the message state when Ctrl+M is pressed.")
           :code $ quote
             defn on-keydown (cursor state)
               %{} respo.schema/RespoListener (:name :on-keydown)
@@ -243,41 +261,47 @@
                           , 2000
           :examples $ []
             quote $ on-keydown cursor state
-        |on-test $ %{} :CodeEntry (:doc |) (:schema nil)
+          :schema $ :: :fn
+            {} (:return 'respo.schema/RespoListener)
+              :args $ [] :list :map
+        |on-test $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn on-test (e dispatch!) (println "|trigger test!")
               try-test! dispatch! $ []
           :examples $ []
+          :schema $ :: :fn
+            {} (:return :unit)
+              :args $ [] :dynamic :fn
         |style-bold! $ %{} :CodeEntry (:doc |) (:schema :string)
           :code $ quote
             defstyle style-bold! $ {}
-              "\"&" $ {} (:font-weight "\"bold !important")
+              |& $ {} (:font-weight "|bold !important")
           :examples $ []
-        |style-list $ %{} :CodeEntry (:doc |) (:schema nil)
+        |style-list $ %{} :CodeEntry (:doc |) (:schema :map)
           :code $ quote
             def style-list $ {} (:color :black)
               :background-color $ hsl 120 20 98
           :examples $ []
-        |style-panel $ %{} :CodeEntry (:doc |) (:schema nil)
+        |style-panel $ %{} :CodeEntry (:doc |) (:schema :map)
           :code $ quote
             def style-panel $ {} (:display :flex) (:margin-bottom 4)
           :examples $ []
         |style-todo-root $ %{} :CodeEntry (:doc |) (:schema :string)
           :code $ quote
             defstyle style-todo-root $ {}
-              "\"&" $ {} (:color :black)
+              |& $ {} (:color :black)
                 :background-color $ hsl 120 20 98
                 :line-height |24px
-                "\"font-size" 16
+                |font-size 16
                 :padding 10
                 :font-family "|\"微软雅黑\", Verdana"
           :examples $ []
         |style-toolbar $ %{} :CodeEntry (:doc |) (:schema :string)
           :code $ quote
             defstyle style-toolbar $ {}
-              "\"&" $ {} (:display :flex) (:flex-direction :row) (:justify-content :start) (:padding "\"4px 0") (:white-space :nowrap)
+              |& $ {} (:display :flex) (:flex-direction :row) (:justify-content :start) (:padding "|4px 0") (:white-space :nowrap)
           :examples $ []
-        |try-test! $ %{} :CodeEntry (:doc |) (:schema nil)
+        |try-test! $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn try-test! (dispatch! acc)
               let
@@ -308,7 +332,10 @@
                       , 0
                     println |result: $ sort acc number-order
           :examples $ []
-      :ns $ %{} :CodeEntry (:doc |) (:schema :unit)
+          :schema $ :: :fn
+            {} (:return :unit)
+              :args $ [] :fn (:: :list :number)
+      :ns $ %{} :NsEntry (:doc |)
         :code $ quote
           ns respo.app.comp.todolist $ :require
             respo.core :refer $ defcomp div span input <> list-> defeffect >> a
@@ -322,7 +349,6 @@
             respo.app.style.widget :as widget
             memof.once :refer $ memof1-call-by
             respo.css :refer $ defstyle
-        :examples $ []
     |respo.app.comp.wrap $ %{} :FileEntry
       :defs $ {}
         |comp-wrap $ %{} :CodeEntry (:doc |)
@@ -333,11 +359,10 @@
           :schema $ :: :fn
             {} (:return 'respo.schema/Component)
               :args $ [] :dynamic
-      :ns $ %{} :CodeEntry (:doc |) (:schema :unit)
+      :ns $ %{} :NsEntry (:doc |)
         :code $ quote
           ns respo.app.comp.wrap $ :require
             respo.core :refer $ defcomp div
-        :examples $ []
     |respo.app.comp.zero $ %{} :FileEntry
       :defs $ {}
         |comp-zero $ %{} :CodeEntry (:doc |)
@@ -348,17 +373,16 @@
           :schema $ :: :fn
             {} (:return 'respo.schema/Component)
               :args $ []
-      :ns $ %{} :CodeEntry (:doc |) (:schema :unit)
+      :ns $ %{} :NsEntry (:doc |)
         :code $ quote
           ns respo.app.comp.zero $ :require
             respo.core :refer $ defcomp div
-        :examples $ []
     |respo.app.core $ %{} :FileEntry
       :defs $ {}
-        |*store $ %{} :CodeEntry (:doc "|Global state storage Atom for the Respo application.\n\nThis is an atom containing all application state data, initialized with the structure defined by schema/store.\nIn Respo applications, all component states are stored in this global store and updated through the dispatch mechanism.") (:schema nil)
+        |*store $ %{} :CodeEntry (:doc "|Global state storage Atom for the Respo application.\n\nThis is an atom containing all application state data, initialized with the structure defined by schema/store.\nIn Respo applications, all component states are stored in this global store and updated through the dispatch mechanism.") (:schema :ref)
           :code $ quote (defatom *store schema/store)
           :examples $ []
-        |dispatch! $ %{} :CodeEntry (:doc |) (:schema nil)
+        |dispatch! $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn dispatch! (op ? op-data)
               if dev? $ js/console.log op op-data
@@ -366,21 +390,33 @@
                   store $ updater @*store op (generate-id!)
                 reset! *store store
           :examples $ []
-        |handle-ssr! $ %{} :CodeEntry (:doc |) (:schema nil)
+          :schema $ :: :fn
+            {} (:return :unit)
+              :args $ [] :dynamic (:: :optional :dynamic)
+        |handle-ssr! $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn handle-ssr! (mount-target)
               realize-ssr! mount-target (comp-container @*store) dispatch!
           :examples $ []
-        |new-fn $ %{} :CodeEntry (:doc |) (:schema nil)
+          :schema $ :: :fn
+            {} (:return :unit)
+              :args $ [] :dynamic
+        |new-fn $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn new-fn () $ println |hello
           :examples $ []
-        |render-app! $ %{} :CodeEntry (:doc |) (:schema nil)
+          :schema $ :: :fn
+            {} (:return :unit)
+              :args $ []
+        |render-app! $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn render-app! (mount-target)
               render! mount-target (comp-container @*store) dispatch!
           :examples $ []
-      :ns $ %{} :CodeEntry (:doc |) (:schema :unit)
+          :schema $ :: :fn
+            {} (:return :unit)
+              :args $ [] :dynamic
+      :ns $ %{} :NsEntry (:doc |)
         :code $ quote
           ns respo.app.core $ :require
             respo.app.comp.container :refer $ comp-container
@@ -388,55 +424,52 @@
             respo.schema :refer $ dev?
             respo.app.schema :as schema
             respo.app.updater :refer $ updater
-        :examples $ []
     |respo.app.schema $ %{} :FileEntry
       :defs $ {}
-        |store $ %{} :CodeEntry (:doc |) (:schema nil)
+        |store $ %{} :CodeEntry (:doc |) (:schema :map)
           :code $ quote
             def store $ {}
               :tasks $ []
               :states $ {}
               :cursor $ []
           :examples $ []
-        |task $ %{} :CodeEntry (:doc |) (:schema nil)
+        |task $ %{} :CodeEntry (:doc |) (:schema :map)
           :code $ quote
             def task $ {} (:id nil) (:text |) (:done? false)
           :examples $ []
-      :ns $ %{} :CodeEntry (:doc |) (:schema :unit)
+      :ns $ %{} :NsEntry (:doc |)
         :code $ quote (ns respo.app.schema)
-        :examples $ []
     |respo.app.style.widget $ %{} :FileEntry
       :defs $ {}
-        |button $ %{} :CodeEntry (:doc |) (:schema nil)
+        |button $ %{} :CodeEntry (:doc |) (:schema :map)
           :code $ quote
-            def button $ {} (:display :inline-block) (:padding "\"0 6px 0 6px") (:font-family |Avenir,Verdana) (:cursor :pointer)
+            def button $ {} (:display :inline-block) (:padding "|0 6px 0 6px") (:font-family |Avenir,Verdana) (:cursor :pointer)
               :background-color $ hsl 0 80 70.9
               :color $ hsl 0 0 100
               :height 28
-              :line-height "\"28px"
-              :transition-duration "\"200ms"
+              :line-height |28px
+              :transition-duration |200ms
           :examples $ []
         |style-button $ %{} :CodeEntry (:doc |) (:schema :string)
           :code $ quote
             defstyle style-button $ {} (:& button)
-              "\"&:hover" $ {} (:transform "\"scale(1.04)")
+              |&:hover $ {} (:transform "|scale(1.04)")
           :examples $ []
         |style-input $ %{} :CodeEntry (:doc |) (:schema :string)
           :code $ quote
             defstyle style-input $ {}
-              "\"&" $ {} (:font-size |16px) (:line-height |24px) (:padding "|0px 8px") (:outline :none) (:min-width |300px)
+              |& $ {} (:font-size |16px) (:line-height |24px) (:padding "|0px 8px") (:outline :none) (:min-width |300px)
                 :background-color $ hsl 0 0 94
                 :border :none
           :examples $ []
-      :ns $ %{} :CodeEntry (:doc |) (:schema :unit)
+      :ns $ %{} :NsEntry (:doc |)
         :code $ quote
           ns respo.app.style.widget $ :require
             respo.util.format :refer $ hsl
             respo.css :refer $ defstyle
-        :examples $ []
     |respo.app.updater $ %{} :FileEntry
       :defs $ {}
-        |updater $ %{} :CodeEntry (:doc |) (:schema nil)
+        |updater $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn updater (store op op-id) (; println store op)
               tag-match op
@@ -473,19 +506,21 @@
                           = (:id task) task-id
                           update task :done? not
                           , task
-                _ $ do (eprintln "\"Unknown op:" op) store
+                _ $ do (eprintln "|Unknown op:" op) store
           :examples $ []
-      :ns $ %{} :CodeEntry (:doc |) (:schema :unit)
+          :schema $ :: :fn
+            {} (:return :map)
+              :args $ [] :map :dynamic :dynamic
+      :ns $ %{} :NsEntry (:doc |)
         :code $ quote
           ns respo.app.updater $ :require
             respo.cursor :refer $ update-states update-states-kv update-states-merge
-        :examples $ []
     |respo.comp.global-keydown $ %{} :FileEntry
       :defs $ {}
         |comp-global-keydown $ %{} :CodeEntry (:doc |)
           :code $ quote
-            defcomp comp-global-keydown (options on-event) (; "\"dirty solution: proxy window keydown event to a `<span/>`, comes with some restrictions. however Respo does not allow effects to modify states.")
-              [] (effect-listen-keyboard options "\"keydown")
+            defcomp comp-global-keydown (options on-event) (; "|dirty solution: proxy window keydown event to a `<span/>`, comes with some restrictions. however Respo does not allow effects to modify states.")
+              [] (effect-listen-keyboard options |keydown)
                 span $ {}
                   :on-keydown $ fn (e d!) (on-event e d!)
           :examples $ []
@@ -494,25 +529,25 @@
               :args $ [] :dynamic :dynamic
         |comp-global-keyup $ %{} :CodeEntry (:doc |)
           :code $ quote
-            defcomp comp-global-keyup (options on-event) (; "\"dirty solution: proxy window keydown event to a `<span/>`, comes with some restrictions. however Respo does not allow effects to modify states.")
-              [] (effect-listen-keyboard options "\"keyup")
+            defcomp comp-global-keyup (options on-event) (; "|dirty solution: proxy window keydown event to a `<span/>`, comes with some restrictions. however Respo does not allow effects to modify states.")
+              [] (effect-listen-keyboard options |keyup)
                 span $ {}
                   :on-keyup $ fn (e d!) (on-event e d!)
           :examples $ []
           :schema $ :: :fn
             {} (:return 'respo.schema/Component)
               :args $ [] :dynamic :dynamic
-        |dirty-field $ %{} :CodeEntry (:doc "|Constant string key for the global keyboard listener.") (:schema nil)
-          :code $ quote (def dirty-field "\"_global_listener")
+        |dirty-field $ %{} :CodeEntry (:doc "|Constant string key for the global keyboard listener.") (:schema :string)
+          :code $ quote (def dirty-field |_global_listener)
           :examples $ []
-        |effect-listen-keyboard $ %{} :CodeEntry (:doc "|Effect for listening to global keyboard events on the window object.") (:schema nil)
+        |effect-listen-keyboard $ %{} :CodeEntry (:doc "|Effect for listening to global keyboard events on the window object.")
           :code $ quote
             defeffect effect-listen-keyboard (options event-name) (action el at?)
               cond
                   or (= action :mount) (= action :update)
                   let
-                      disabled-commands $ noted "\"copied event does not support `event.preventDefault()`, so we need to pass a set of configs"
-                        either (:disabled-commands options) (#{} "\"p" "\"s")
+                      disabled-commands $ noted "|copied event does not support `event.preventDefault()`, so we need to pass a set of configs"
+                        either (:disabled-commands options) (#{} |p |s)
                       handler $ fn (event)
                         if
                           and
@@ -532,11 +567,13 @@
                     js-delete el dirty-field
                 true nil
           :examples $ []
-      :ns $ %{} :CodeEntry (:doc |) (:schema :unit)
+          :schema $ :: :fn
+            {} (:return 'respo.schema/Effect)
+              :args $ [] :dynamic :string
+      :ns $ %{} :NsEntry (:doc |)
         :code $ quote
           ns respo.comp.global-keydown $ :require
             respo.core :refer $ defcomp defeffect <> >> div button textarea span input a list->
-        :examples $ []
     |respo.comp.inspect $ %{} :FileEntry
       :defs $ {}
         |comp-inspect $ %{} :CodeEntry (:doc "|put a label in tag with absolute position, click it to print data.\n\n3 parameters are,\n- `tip` a string of comment,\n- `data` Calcit data to inspect, which will be printed in Console,\n- `style` string of className, or hashmap of styles")
@@ -576,21 +613,20 @@
         |highlight-defcomp $ %{} :CodeEntry (:doc |) (:schema :string)
           :code $ quote
             defstyle highlight-defcomp $ {}
-              "\"& *" $ {}
-                :outline $ str "\"1px dashed " (hsl 200 40 50 0.5)
+              "|& *" $ {}
+                :outline $ str "|1px dashed " (hsl 200 40 50 0.5)
           :examples $ []
         |style-data $ %{} :CodeEntry (:doc |) (:schema :string)
           :code $ quote
             defstyle style-data $ {}
-              "\"&" $ {} (:position :absolute) (:background-color "\"hsl(240,100%,0%)") (:color :white) (:opacity 0.2) (:font-size |12px) (:font-family |Avenir,Verdana) (:line-height "\"1.4em") (:padding "|2px 6px") (:border-radius |4px) (:max-width 160) (:max-height 32) (:white-space :normal) (:text-overflow :ellipsis) (:cursor :default)
+              |& $ {} (:position :absolute) (:background-color "|hsl(240,100%,0%)") (:color :white) (:opacity 0.2) (:font-size |12px) (:font-family |Avenir,Verdana) (:line-height |1.4em) (:padding "|2px 6px") (:border-radius |4px) (:max-width 160) (:max-height 32) (:white-space :normal) (:text-overflow :ellipsis) (:cursor :default)
           :examples $ []
-      :ns $ %{} :CodeEntry (:doc |) (:schema :unit)
+      :ns $ %{} :NsEntry (:doc |)
         :code $ quote
           ns respo.comp.inspect $ :require
             respo.core :refer $ defcomp pre <>
             respo.css :refer $ defstyle
             respo.util.format :refer $ hsl
-        :examples $ []
     |respo.comp.space $ %{} :FileEntry
       :defs $ {}
         |=< $ %{} :CodeEntry (:doc "|insert a tiny space, horizontally or verticaly.\n\n- `8 nil` for horizontal width 8px,\n- `nil 8` for vertical height 8px.\n")
@@ -619,15 +655,14 @@
             defstyle style-space $ {}
               :& $ {} (:height 1) (:width 1) (:display :inline-block)
           :examples $ []
-      :ns $ %{} :CodeEntry (:doc |) (:schema :unit)
+      :ns $ %{} :NsEntry (:doc |)
         :code $ quote
           ns respo.comp.space $ :require
             respo.core :refer $ div defcomp
             respo.css :refer $ defstyle
-        :examples $ []
     |respo.controller.client $ %{} :FileEntry
       :defs $ {}
-        |activate-instance! $ %{} :CodeEntry (:doc "|Initializes the application by mounting the root element to the DOM.") (:schema nil)
+        |activate-instance! $ %{} :CodeEntry (:doc "|Initializes the application by mounting the root element to the DOM.")
           :code $ quote
             defn activate-instance! (entire-dom mount-point deliver-event)
               let
@@ -635,7 +670,10 @@
                 set! (.-innerHTML mount-point) |
                 .!appendChild mount-point $ make-element entire-dom listener-builder ([])
           :examples $ []
-        |build-listener $ %{} :CodeEntry (:doc "|Creates a DOM event listener that converts events and dispatches them to Respo.") (:schema nil)
+          :schema $ :: :fn
+            {} (:return :unit)
+              :args $ [] 'respo.schema/Component :dynamic :fn
+        |build-listener $ %{} :CodeEntry (:doc "|Creates a DOM event listener that converts events and dispatches them to Respo.")
           :code $ quote
             defn build-listener (event-name deliver-event)
               fn (event coord)
@@ -643,13 +681,19 @@
                     simple-event $ event->edn event
                   deliver-event coord event-name simple-event
           :examples $ []
-        |patch-instance! $ %{} :CodeEntry (:doc "|Applies collected changes to the DOM and updates event listeners.") (:schema nil)
+          :schema $ :: :fn
+            {} (:return :fn)
+              :args $ [] :dynamic :fn
+        |patch-instance! $ %{} :CodeEntry (:doc "|Applies collected changes to the DOM and updates event listeners.")
           :code $ quote
             defn patch-instance! (changes mount-point deliver-event)
               let
                   listener-builder $ fn (event-name) (build-listener event-name deliver-event)
                 apply-dom-changes changes mount-point listener-builder
           :examples $ []
+          :schema $ :: :fn
+            {} (:return :unit)
+              :args $ [] :list :dynamic :fn
         |send-to-component! $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn send-to-component! (event-tuple) (assert-type event-tuple :tuple)
@@ -661,7 +705,7 @@
           :schema $ :: :fn
             {} (:return :tag)
               :args $ [] :tuple
-        |traverse-and-call $ %{} :CodeEntry (:doc |) (:schema nil)
+        |traverse-and-call $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn traverse-and-call (element event-tuple dispatch!)
               when (some? element)
@@ -681,7 +725,10 @@
                           child $ get pair 1
                         traverse-and-call child event-tuple dispatch!
           :examples $ []
-        |wrap-dispatch $ %{} :CodeEntry (:doc "|Wraps a raw dispatch function to automatically handle different operation types (list, tag, or direct).") (:schema nil)
+          :schema $ :: :fn
+            {} (:return :unit)
+              :args $ [] :dynamic :tuple :fn
+        |wrap-dispatch $ %{} :CodeEntry (:doc "|Wraps a raw dispatch function to automatically handle different operation types (list, tag, or direct).")
           :code $ quote
             defn wrap-dispatch (*dispatch-fn)
               fn (op ? data)
@@ -693,7 +740,10 @@
                       dispatch! $ :: op data
                       dispatch! op
           :examples $ []
-      :ns $ %{} :CodeEntry (:doc |) (:schema :unit)
+          :schema $ :: :fn
+            {} (:return :fn)
+              :args $ [] :ref
+      :ns $ %{} :NsEntry (:doc |)
         :code $ quote
           ns respo.controller.client $ :require
             respo.render.patch :refer $ apply-dom-changes
@@ -702,24 +752,26 @@
             respo.core :refer $ *dispatch-fn *global-element
             respo.util.detect :refer $ component? element?
             respo.controller.resolve :refer $ extract-listeners
-        :examples $ []
     |respo.controller.resolve $ %{} :FileEntry
       :defs $ {}
-        |build-deliver-event $ %{} :CodeEntry (:doc "|Creates a function to dispatch events from the DOM to Respo's event handling system.") (:schema nil)
+        |build-deliver-event $ %{} :CodeEntry (:doc "|Creates a function to dispatch events from the DOM to Respo's event handling system.")
           :code $ quote
             defn build-deliver-event (*global-element *dispatch-fn)
-              fn (coord event-name simple-event) (; echo "\"event coord" coord)
+              fn (coord event-name simple-event) (; echo "|event coord" coord)
                 let
                     target-element $ find-event-target @*global-element coord event-name
                     target-listener $ if (some? target-element)
                       get (:event target-element) event-name
-                      do (js/console.warn "\"found no element" coord event-name) nil
+                      do (js/console.warn "|found no element" coord event-name) nil
                     dispatch-wrap $ wrap-dispatch *dispatch-fn
                   if (some? target-listener)
                     do (; println "|listener found:" coord event-name) (target-listener simple-event dispatch-wrap)
                     ; println "|found no listener:" coord event-name
           :examples $ []
-        |extract-listeners $ %{} :CodeEntry (:doc |) (:schema nil)
+          :schema $ :: :fn
+            {} (:return :fn)
+              :args $ [] :ref :ref
+        |extract-listeners $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn extract-listeners (component-result)
               if (list? component-result)
@@ -734,11 +786,14 @@
                   :listeners $ []
                   :element component-result
           :examples $ []
-        |find-event-target $ %{} :CodeEntry (:doc "|Traverses the virtual DOM to find the element that should handle a specific event.") (:schema nil)
+          :schema $ :: :fn
+            {} (:return :map)
+              :args $ [] :dynamic
+        |find-event-target $ %{} :CodeEntry (:doc "|Traverses the virtual DOM to find the element that should handle a specific event.")
           :code $ quote
-            defn find-event-target (element coord event-name) (; echo "\"looking for" coord event-name)
-              assert "\"element cannot be nil" $ some? element
-              assert "\"coord cannot be nil" $ some? coord
+            defn find-event-target (element coord event-name) (; echo "|looking for" coord event-name)
+              assert "|element cannot be nil" $ some? element
+              assert "|coord cannot be nil" $ some? coord
               let
                   target-element $ loop
                       m $ get-markup-at element coord
@@ -757,7 +812,10 @@
                         , event-name
                       , nil
           :examples $ []
-        |get-markup-at $ %{} :CodeEntry (:doc "|Retrieves the virtual DOM element at the specified coordinate.") (:schema nil)
+          :schema $ :: :fn
+            {} (:return :dynamic)
+              :args $ [] :dynamic :list :dynamic
+        |get-markup-at $ %{} :CodeEntry (:doc "|Retrieves the virtual DOM element at the specified coordinate.")
           :code $ quote
             defn get-markup-at (markup coord)
               ; println |markup: $ to-lispy-string coord
@@ -775,23 +833,25 @@
                         raise $ str "|child not found:" coord
                           map (:children markup) first
           :examples $ []
-      :ns $ %{} :CodeEntry (:doc |) (:schema :unit)
+          :schema $ :: :fn
+            {} (:return :dynamic)
+              :args $ [] :dynamic :list
+      :ns $ %{} :NsEntry (:doc |)
         :code $ quote
           ns respo.controller.resolve $ :require
             respo.util.detect :refer $ component? element? listener?
             respo.controller.client :refer $ wrap-dispatch
-        :examples $ []
     |respo.core $ %{} :FileEntry
       :defs $ {}
-        |*changes-logger $ %{} :CodeEntry (:doc "|Atom to hold a logging function for observing changes during rerenders. Function signature: (old-tree new-tree changes).") (:schema nil)
+        |*changes-logger $ %{} :CodeEntry (:doc "|Atom to hold a logging function for observing changes during rerenders. Function signature: (old-tree new-tree changes).") (:schema :ref)
           :code $ quote (defatom *changes-logger nil)
           :examples $ []
             quote $ reset! *changes-logger
               fn (old new changes) (println changes)
-        |*dispatch-fn $ %{} :CodeEntry (:doc "|internal atom storing the dispatch function. used to handle events and state updates throughout the application.") (:schema nil)
+        |*dispatch-fn $ %{} :CodeEntry (:doc "|internal atom storing the dispatch function. used to handle events and state updates throughout the application.") (:schema :ref)
           :code $ quote (defatom *dispatch-fn nil)
           :examples $ []
-        |*global-element $ %{} :CodeEntry (:doc "|internal atom storing the current virtual DOM tree. used by render! to track and update the application state.") (:schema nil)
+        |*global-element $ %{} :CodeEntry (:doc "|internal atom storing the current virtual DOM tree. used by render! to track and update the application state.") (:schema :ref)
           :code $ quote (defatom *global-element nil)
           :examples $ []
         |<> $ %{} :CodeEntry (:doc "|create a text node using span element. first argument is the text content. optional second argument is style (hashmap) or class-name (string).")
@@ -827,11 +887,14 @@
           :schema $ :: :fn
             {} (:rest :dynamic) (:return :tag)
               :args $ [] (:: :optional :map)
-        |blockquote $ %{} :CodeEntry (:doc |) (:schema nil)
+        |blockquote $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn blockquote (props & children) (create-element :blockquote props & children)
           :examples $ []
-        |body $ %{} :CodeEntry (:doc "|create a body element with properties and children. first argument is a hashmap for properties, rest arguments are children elements.") (:schema nil)
+          :schema $ :: :fn
+            {} (:rest :dynamic) (:return :tag)
+              :args $ [] (:: :optional :map)
+        |body $ %{} :CodeEntry (:doc "|create a body element with properties and children. first argument is a hashmap for properties, rest arguments are children elements.")
           :code $ quote
             defn body (props & children) (create-element :body props & children)
           :examples $ []
@@ -840,6 +903,9 @@
             quote $ body
               {} $ :style
                 {} $ :margin |0
+          :schema $ :: :fn
+            {} (:rest :dynamic) (:return :tag)
+              :args $ [] (:: :optional :map)
         |button $ %{} :CodeEntry (:doc "|Renders a <button> element. Wrapper around create-element.")
           :code $ quote
             defn button (props & children)
@@ -854,31 +920,43 @@
           :schema $ :: :fn
             {} (:rest :dynamic) (:return :tag)
               :args $ [] (:: :optional :map)
-        |clear-cache! $ %{} :CodeEntry (:doc |) (:schema nil)
+        |clear-cache! $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn clear-cache! () $ reset-memof1-caches!
           :examples $ []
-        |code $ %{} :CodeEntry (:doc |) (:schema nil)
+          :schema $ :: :fn
+            {} (:return :unit)
+              :args $ []
+        |code $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn code (props & children) (assert-type props :map) (create-element :code props & children)
           :examples $ []
-        |confirm-child $ %{} :CodeEntry (:doc "|Validates if the item is a valid Respo node (element, component, or nil). Returns the item.") (:schema nil)
+          :schema $ :: :fn
+            {} (:rest :dynamic) (:return :tag)
+              :args $ [] :map
+        |confirm-child $ %{} :CodeEntry (:doc "|Validates if the item is a valid Respo node (element, component, or nil). Returns the item.")
           :code $ quote
             defn confirm-child (x)
-              assert "\"Invalid data in elements tree: " $ or (nil? x) (element? x) (component? x)
+              assert "|Invalid data in elements tree: " $ or (nil? x) (element? x) (component? x)
               , x
           :examples $ []
-        |confirm-child-pair $ %{} :CodeEntry (:doc |) (:schema nil)
+          :schema $ :: :fn
+            {} (:return :dynamic)
+              :args $ [] :dynamic
+        |confirm-child-pair $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn confirm-child-pair (pair)
-              assert "\"expected pair" $ and (list? pair)
+              assert "|expected pair" $ and (list? pair)
                 &= 2 $ count pair
               &let
                 x $ nth pair 1
-                assert "\"Invalid data in elements tree: " $ or (nil? x) (element? x) (component? x)
+                assert "|Invalid data in elements tree: " $ or (nil? x) (element? x) (component? x)
               , pair
           :examples $ []
-        |create-element $ %{} :CodeEntry (:doc "|create a virtual DOM element with tag name, properties and children. used internally by element macros like div, span, etc.") (:schema nil)
+          :schema $ :: :fn
+            {} (:return :dynamic)
+              :args $ [] :dynamic
+        |create-element $ %{} :CodeEntry (:doc "|create a virtual DOM element with tag name, properties and children. used internally by element macros like div, span, etc.")
           :code $ quote
             defn create-element (tag-name props & children) (assert-type tag-name :keyword)
               assert-type props $ :: :optional :map
@@ -906,7 +984,10 @@
             quote $ create-element :a
               {} $ :href |/home
               <> |Home
-        |create-list-element $ %{} :CodeEntry (:doc "|Creates a virtual DOM element for list rendering. Arguments: tag-name, props, child-map (map of key -> child).") (:schema nil)
+          :schema $ :: :fn
+            {} (:rest :dynamic) (:return 'respo.schema/Element)
+              :args $ [] :tag (:: :optional :map)
+        |create-list-element $ %{} :CodeEntry (:doc "|Creates a virtual DOM element for list rendering. Arguments: tag-name, props, child-map (map of key -> child).")
           :code $ quote
             defn create-list-element (tag-name props child-map) (assert-type tag-name :keyword)
               assert-type props $ :: :optional :map
@@ -926,7 +1007,10 @@
               {} $ :class-name |list
               [] $ [] :item-1
                 span $ {}
-        |decorate-defcomp $ %{} :CodeEntry (:doc "|detect root element under component and add `data-defcomp` mark") (:schema nil)
+          :schema $ :: :fn
+            {} (:return 'respo.schema/Element)
+              :args $ [] :tag (:: :optional :map) :map
+        |decorate-defcomp $ %{} :CodeEntry (:doc "|detect root element under component and add `data-defcomp` mark")
           :code $ quote
             defn decorate-defcomp (c name)
               update c :tree $ fn (tree)
@@ -937,12 +1021,15 @@
                     conj attrs $ [] :data-comp name
                   , tree
           :examples $ []
+          :schema $ :: :fn
+            {} (:return 'respo.schema/Component)
+              :args $ [] 'respo.schema/Component :string
         |defcomp $ %{} :CodeEntry (:doc "|Respo component can be plain functions. However `defcomp` is provided as a macro to transform effects into component effects, and it returns component instead of element.\n\nparameters are:\n\n- component name\n- a list of params\n- spreading argument of body, last item used as returned value") (:schema nil)
           :code $ quote
             defmacro defcomp (comp-name params & body)
-              assert "\"expected symbol of comp-name" $ symbol? comp-name
-              assert "\"expected list for params" $ list? params
-              assert "\"some component retured" $ &> (count body) 0
+              assert "|expected symbol of comp-name" $ symbol? comp-name
+              assert "|expected list for params" $ list? params
+              assert "|some component retured" $ &> (count body) 0
               quasiquote $ defn ~comp-name (~ params)
                 decorate-defcomp
                   extract-effects-list $ %{} schema/Component
@@ -966,11 +1053,11 @@
         |defeffect $ %{} :CodeEntry (:doc "|a macro for defining a effect. if returns an function.\n\nparameters:\n\n- effect name\n- list of arguments\n- list of effect lifecycle arguments\n  - action name\n  - element that take place\n  - boolean if happen at current element\n- spreading arguments of body\n") (:schema nil)
           :code $ quote
             defmacro defeffect (effect-name args params & body)
-              assert "\"args in symbol" $ and (list? args) (every? args symbol?)
-              assert "\"params like [action el at-place?]" $ and (list? params) (every? params symbol?)
+              assert "|args in symbol" $ and (list? args) (every? args symbol?)
+              assert "|params like [action el at-place?]" $ and (list? params) (every? params symbol?)
               let
-                  args-var $ gensym "\"args"
-                  params-var $ gensym "\"params"
+                  args-var $ gensym |args
+                  params-var $ gensym |params
                 quasiquote $ defn ~effect-name ~args
                   %{} schema/Effect
                     :name $ ~ (turn-tag effect-name)
@@ -978,18 +1065,19 @@
                     :args $ [] ~@args
                     :method $ fn (~args-var ~params-var)
                       let[] ~args ~args-var $ let[] ~params ~params-var
-                        ~@ $ if (empty? body)
-                          quasiquote $ println "\"WARNING:" ~effect-name "\"lack code for handling effects!"
-                          , body
+                        ~ $ if (empty? body)
+                          quasiquote $ do
+                            println $ str-spaced |WARNING: ~effect-name "|lack code for handling effects!"
+                          quasiquote $ do ~@body
           :examples $ []
             quote $ defeffect log-message [message] [action el at-place?]
               if (= action :mount) (js/console.log message)
         |defplugin $ %{} :CodeEntry (:doc |) (:schema nil)
           :code $ quote
             defmacro defplugin (x params & body)
-              assert "\"expected symbol" $ symbol? x
-              assert "\"expected params" $ list? params
-              assert "\"expected some result" $ > (count body) 0
+              assert "|expected symbol" $ symbol? x
+              assert "|expected params" $ list? params
+              assert "|expected some result" $ > (count body) 0
               quasiquote $ defn ~x ~params ~@body
           :examples $ []
         |div $ %{} :CodeEntry (:doc "|create a div element with properties and children. first argument is a hashmap for properties like :class-name, :style, :on. rest arguments are children elements.")
@@ -1013,11 +1101,11 @@
           :schema $ :: :fn
             {} (:rest :dynamic) (:return :tag)
               :args $ [] (:: :optional :map)
-        |element-type $ %{} :CodeEntry (:doc |) (:schema nil)
+        |element-type $ %{} :CodeEntry (:doc |) (:schema :dynamic)
           :code $ quote
             def element-type $ if (exists? js/Element) js/Element js/Error
           :examples $ []
-        |extract-effects-list $ %{} :CodeEntry (:doc |) (:schema nil)
+        |extract-effects-list $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn extract-effects-list (markup)
               &let
@@ -1036,6 +1124,9 @@
                       -> markup (assoc :tree node-tree) (assoc :effects effects-list) (assoc :listeners listeners-list)
                   true markup
           :examples $ []
+          :schema $ :: :fn
+            {} (:return 'respo.schema/Component)
+              :args $ [] 'respo.schema/Component
         |h1 $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn h1 (props & children)
@@ -1063,35 +1154,56 @@
           :schema $ :: :fn
             {} (:rest :dynamic) (:return :tag)
               :args $ [] (:: :optional :map)
-        |h4 $ %{} :CodeEntry (:doc |) (:schema nil)
+        |h4 $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn h4 (props & children) (create-element :h4 props & children)
           :examples $ []
-        |h5 $ %{} :CodeEntry (:doc |) (:schema nil)
+          :schema $ :: :fn
+            {} (:rest :dynamic) (:return :tag)
+              :args $ [] (:: :optional :map)
+        |h5 $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn h5 (props & children) (create-element :h5 props & children)
           :examples $ []
-        |h6 $ %{} :CodeEntry (:doc |) (:schema nil)
+          :schema $ :: :fn
+            {} (:rest :dynamic) (:return :tag)
+              :args $ [] (:: :optional :map)
+        |h6 $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn h6 (props & children) (create-element :h6 props & children)
           :examples $ []
-        |head $ %{} :CodeEntry (:doc |) (:schema nil)
+          :schema $ :: :fn
+            {} (:rest :dynamic) (:return :tag)
+              :args $ [] (:: :optional :map)
+        |head $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn head (props & children) (create-element :head props & children)
           :examples $ []
-        |hr $ %{} :CodeEntry (:doc |) (:schema nil)
+          :schema $ :: :fn
+            {} (:rest :dynamic) (:return :tag)
+              :args $ [] (:: :optional :map)
+        |hr $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn hr (props) (create-element :hr props)
           :examples $ []
-        |html $ %{} :CodeEntry (:doc |) (:schema nil)
+          :schema $ :: :fn
+            {} (:return :tag)
+              :args $ [] (:: :optional :map)
+        |html $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn html (props & children)
               create-element :html props & $ map children confirm-child
           :examples $ []
-        |img $ %{} :CodeEntry (:doc |) (:schema nil)
+          :schema $ :: :fn
+            {} (:rest :dynamic) (:return :tag)
+              :args $ [] (:: :optional :map)
+        |img $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn img (props & children) (create-element :img props & children)
           :examples $ []
+          :schema $ :: :fn
+            {} (:rest :dynamic) (:return :tag)
+              :args $ [] (:: :optional :map)
         |input $ %{} :CodeEntry (:doc "|Creates HTML input element (input tag).\n\nParameters:\n  props - Attribute map, can include standard HTML attributes and event handlers like type, value, placeholder, on-input, etc.\n  & children - Variable arguments for child elements, usually empty since input is self-closing\n\nReturns:\n  Created input element component\n\nUsed to create various form input controls, supports text, password, number and other input types.")
           :code $ quote
             defn input (props & children)
@@ -1112,10 +1224,13 @@
           :schema $ :: :fn
             {} (:rest :dynamic) (:return :tag)
               :args $ [] (:: :optional :map)
-        |link $ %{} :CodeEntry (:doc |) (:schema nil)
+        |link $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn link (props & children) (create-element :link props & children)
           :examples $ []
+          :schema $ :: :fn
+            {} (:rest :dynamic) (:return :tag)
+              :args $ [] (:: :optional :map)
         |list-> $ %{} :CodeEntry (:doc "|Renders a list of items inside a <div>. Uses key reconciliation for efficient updates.")
           :code $ quote
             defn list-> (props children)
@@ -1129,7 +1244,7 @@
           :schema $ :: :fn
             {} (:return :tag)
               :args $ [] (:: :optional :map) :map
-        |mount-app! $ %{} :CodeEntry (:doc "|Mounts the Respo application to the DOM. Initializes the global element and event listeners.") (:schema nil)
+        |mount-app! $ %{} :CodeEntry (:doc "|Mounts the Respo application to the DOM. Initializes the global element and event listeners.")
           :code $ quote
             defn mount-app! (target element *dispatch-fn)
               ; assert "|1st argument should be an element" $ or (nil? target) (instance? element-type target)
@@ -1145,6 +1260,9 @@
                 reset! *global-element element
           :examples $ []
             quote $ mount-app! mount-target (comp-app) *dispatch-fn
+          :schema $ :: :fn
+            {} (:return :unit)
+              :args $ [] :dynamic 'respo.schema/Component :ref
         |ol $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn ol (props & children)
@@ -1154,10 +1272,13 @@
           :schema $ :: :fn
             {} (:rest :dynamic) (:return :tag)
               :args $ [] (:: :optional :map)
-        |option $ %{} :CodeEntry (:doc |) (:schema nil)
+        |option $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn option (props & children) (create-element :option props & children)
           :examples $ []
+          :schema $ :: :fn
+            {} (:rest :dynamic) (:return :tag)
+              :args $ [] (:: :optional :map)
         |p $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn p (props & children)
@@ -1180,7 +1301,7 @@
           :schema $ :: :fn
             {} (:rest :dynamic) (:return :tag)
               :args $ [] (:: :optional :map)
-        |realize-ssr! $ %{} :CodeEntry (:doc |) (:schema nil)
+        |realize-ssr! $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn realize-ssr! (target element dispatch!)
               assert (instance? element-type target) "|1st argument should be an element"
@@ -1191,19 +1312,25 @@
                   collect! $ fn (op coord n-coord v)
                     swap! *changes conj $ [] op coord n-coord v
                   deliver-event $ build-deliver-event *global-element dispatch!
-                if (nil? app-element) (raise "\"Detected no element from SSR!")
+                if (nil? app-element) (raise "|Detected no element from SSR!")
                 compare-to-dom! (purify-element element) app-element
                 collect-mounting collect! ([]) ([]) element true
                 patch-instance! @*changes target deliver-event
                 reset! *global-element $ mute-element element
           :examples $ []
-        |render! $ %{} :CodeEntry (:doc "|sync virtual DOM to real DOM. newly creating for the first time, and diff/patch for reset of calls:\n\ntakes arguments:\n- `target`, the mount point,\n- `markup` which is the virtual DOM,\n- `dispatch!` the dispatcher function for handling actions.") (:schema nil)
+          :schema $ :: :fn
+            {} (:return :unit)
+              :args $ [] :dynamic 'respo.schema/Component :fn
+        |render! $ %{} :CodeEntry (:doc "|sync virtual DOM to real DOM. newly creating for the first time, and diff/patch for reset of calls:\n\ntakes arguments:\n- `target`, the mount point,\n- `markup` which is the virtual DOM,\n- `dispatch!` the dispatcher function for handling actions.")
           :code $ quote
             defn render! (target markup dispatch!) (assert-type dispatch! :fn) (reset! *dispatch-fn dispatch!)
               if (some? @*global-element) (rerender-app! target markup *dispatch-fn) (mount-app! target markup *dispatch-fn)
           :examples $ []
             quote $ render! mount-target (comp-container @*store) dispatch!
-        |rerender-app! $ %{} :CodeEntry (:doc "|Diffs the new element against the global element and patches the DOM. Used internally by render!.") (:schema nil)
+          :schema $ :: :fn
+            {} (:return :unit)
+              :args $ [] :dynamic 'respo.schema/Component :fn
+        |rerender-app! $ %{} :CodeEntry (:doc "|Diffs the new element against the global element and patches the DOM. Used internally by render!.")
           :code $ quote
             defn rerender-app! (target element *dispatch-fn)
               let
@@ -1218,10 +1345,16 @@
                 reset! *global-element element
           :examples $ []
             quote $ rerender-app! mount-target (comp-demo) *dispatch-fn
-        |script $ %{} :CodeEntry (:doc |) (:schema nil)
+          :schema $ :: :fn
+            {} (:return :unit)
+              :args $ [] :dynamic 'respo.schema/Component :ref
+        |script $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn script (props & children) (create-element :script props & children)
           :examples $ []
+          :schema $ :: :fn
+            {} (:rest :dynamic) (:return :tag)
+              :args $ [] (:: :optional :map)
         |select $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn select (props & children)
@@ -1245,16 +1378,22 @@
           :schema $ :: :fn
             {} (:rest :dynamic) (:return :tag)
               :args $ [] (:: :optional :map)
-        |strong $ %{} :CodeEntry (:doc |) (:schema nil)
+        |strong $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn strong (props & children) (create-element :strong props & children)
           :examples $ []
-        |style $ %{} :CodeEntry (:doc "|Creates HTML style element for defining CSS styles.\n\nParameters:\n  props - Attribute map, can include standard HTML attributes for style elements\n  & children - Variable arguments for child elements, typically CSS style content\n\nReturns:\n  Created style element component\n\nUsed to dynamically define CSS styles within components, supports nested and dynamic style generation.") (:schema nil)
+          :schema $ :: :fn
+            {} (:rest :dynamic) (:return :tag)
+              :args $ [] (:: :optional :map)
+        |style $ %{} :CodeEntry (:doc "|Creates HTML style element for defining CSS styles.\n\nParameters:\n  props - Attribute map, can include standard HTML attributes for style elements\n  & children - Variable arguments for child elements, typically CSS style content\n\nReturns:\n  Created style element component\n\nUsed to dynamically define CSS styles within components, supports nested and dynamic style generation.")
           :code $ quote
             defn style (props & children) (create-element :style props & children)
           :examples $ []
             quote $ style
               {} $ :innerHTML "|body { margin: 0; padding: 0; }"
+          :schema $ :: :fn
+            {} (:rest :dynamic) (:return :tag)
+              :args $ [] (:: :optional :map)
         |textarea $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn textarea (props & children)
@@ -1264,10 +1403,13 @@
           :schema $ :: :fn
             {} (:rest :dynamic) (:return :tag)
               :args $ [] (:: :optional :map)
-        |title $ %{} :CodeEntry (:doc |) (:schema nil)
+        |title $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn title (props & children) (create-element :title props & children)
           :examples $ []
+          :schema $ :: :fn
+            {} (:rest :dynamic) (:return :tag)
+              :args $ [] (:: :optional :map)
         |ul $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn ul (props & children)
@@ -1277,7 +1419,7 @@
           :schema $ :: :fn
             {} (:rest :dynamic) (:return :tag)
               :args $ [] (:: :optional :map)
-      :ns $ %{} :CodeEntry (:doc "|provide core APIs for Respo, many of them are elements. if expected element is not defined yet, use `create-element :tag-name ...` to use it dynamically.\n") (:schema :unit)
+      :ns $ %{} :NsEntry (:doc "|provide core APIs for Respo, many of them are elements. if expected element is not defined yet, use `create-element :tag-name ...` to use it dynamically.\n")
         :code $ quote
           ns respo.core $ :require
             respo.controller.resolve :refer $ build-deliver-event
@@ -1290,21 +1432,20 @@
             respo.util.dom :refer $ compare-to-dom!
             memof.once :refer $ reset-memof1-caches!
             respo.util.detect :refer $ component? element? effect? listener?
-        :examples $ []
     |respo.css $ %{} :FileEntry
       :defs $ {}
-        |*style-caches $ %{} :CodeEntry (:doc "|Atom for caching style information.") (:schema nil)
+        |*style-caches $ %{} :CodeEntry (:doc "|Atom for caching style information.") (:schema :ref)
           :code $ quote
             defatom *style-caches $ {}
           :examples $ []
-        |*style-list-in-nodejs $ %{} :CodeEntry (:doc |) (:schema nil)
+        |*style-list-in-nodejs $ %{} :CodeEntry (:doc |) (:schema :ref)
           :code $ quote
             defatom *style-list-in-nodejs $ []
           :examples $ []
         |create-style! $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn create-style! (style-name rules) (assert-type style-name :string)
-              assert "\"expected rules in map" $ map? rules
+              assert "|expected rules in map" $ map? rules
               if (contains? @*style-caches style-name)
                 if
                   = rules $ get-in @*style-caches ([] style-name :rules)
@@ -1318,7 +1459,7 @@
                     css-block $ render-css-block style-name rules
                   if nodejs? (swap! *style-list-in-nodejs conj css-block)
                     let
-                        style-el $ js/document.createElement "\"style"
+                        style-el $ js/document.createElement |style
                       set! (.-innerHTML style-el) css-block
                       set! (.-id style-el) style-name
                       js/document.head.appendChild style-el
@@ -1331,10 +1472,10 @@
         |defstyle $ %{} :CodeEntry (:doc "|a macro for turning CSS rules into className, and only works for JavaScript.\n\nuse `defstyle` like:\n\n```cirru\ndefstyle style-demo $ {}\n  |& $ {} (:color :red)\n  \"|&:hover\" $ {}\n    :background-color :blue\n```\n\nwhere `&` refers to current element.\n\nIn the rules, it's nested hashmaps. `|&` and `|&:hover` are CSS queries. and in nested hashmaps there are CSS properties defined in calcit data.\n")
           :code $ quote
             defmacro defstyle (style-name rules)
-              assert "\"expected symbol of style-name" $ symbol? style-name
+              assert "|expected symbol of style-name" $ symbol? style-name
               if-let
                 query0 $ &list:nth rules 1
-                assert "\"expected rule 0 to be hashmap or symbol, use `defstyle` like:\n\n```cirru\ndefstyle style-demo $ {}\n  |& $ {}\n    :color :red\n```\n\nwhere `&` refers to current element.\n" $ if-let
+                assert "|expected rule 0 to be hashmap or symbol, use `defstyle` like:\n\n```cirru\ndefstyle style-demo $ {}\n  |& $ {}\n    :color :red\n```\n\nwhere `&` refers to current element.\n" $ if-let
                   rule0 $ &list:nth query0 1
                   or (symbol? rule0)
                     and (list? rule0)
@@ -1343,7 +1484,7 @@
                         or (&= '{} h) (&= 'merge h)
               if-let
                 query1 $ &list:nth rules 2
-                assert "\"expected rule 1 to be hashmap or symbol, use `defstyle` like:\n\n```cirru\ndefstyle style-demo $ {}\n  |& $ {} (:color :red)\n  \"|&:hover\" $ {}\n    :background-color :blue\n```\n\nwhere `&` refers to current element" $ if-let
+                assert "|expected rule 1 to be hashmap or symbol, use `defstyle` like:\n\n```cirru\ndefstyle style-demo $ {}\n  |& $ {} (:color :red)\n  \"|&:hover\" $ {}\n    :background-color :blue\n```\n\nwhere `&` refers to current element" $ if-let
                   rule1 $ &list:nth query1 1
                   or (symbol? rule1)
                     and (list? rule1)
@@ -1352,12 +1493,12 @@
                         or (&= '{} h) (&= 'merge h)
               let
                   style-name-str $ str
-                    -> (turn-string style-name) (&str:replace "\"!" "\"_EX_") (&str:replace "\"?" "\"_QU_")
-                    , "\"__"
+                    -> (turn-string style-name) (&str:replace |! |_EX_) (&str:replace |? |_QU_)
+                    , |__
                       ->
                         :ns $ &extract-code-into-edn style-name
                         turn-string
-                        &str:replace "\"." "\"_"
+                        &str:replace |. |_
                 quasiquote $ def ~style-name (create-style! ~style-name-str ~rules)
           :examples $ []
             quote $ defstyle style-button
@@ -1400,7 +1541,7 @@
             {} $ :args ([] :symbol :map)
         |nodejs? $ %{} :CodeEntry (:doc |) (:schema :bool)
           :code $ quote
-            def nodejs? $ and (exists? js/process) (= js/process.release.name "\"node")
+            def nodejs? $ and (exists? js/process) (= js/process.release.name |node)
           :examples $ []
         |render-css-block $ %{} :CodeEntry (:doc "|Generates a CSS string block from a map of style rules.")
           :code $ quote
@@ -1410,61 +1551,68 @@
                   let
                       k $ turn-string (nth pair 0)
                       v $ nth pair 1
-                    assert "\"expected rule name in string" $ string? k
-                    assert "\"expected rule styles in map" $ map? v
+                    assert "|expected rule name in string" $ string? k
+                    assert "|expected rule styles in map" $ map? v
                     let
-                        class-rule $ str "\"." style-name
-                        rule-name $ -> k (.!replace "\"$0" class-rule) (.!replace "\"&" class-rule)
+                        class-rule $ str |. style-name
+                        rule-name $ -> k (.!replace |$0 class-rule) (.!replace |& class-rule)
                         contained $ get v 'contained
                         css-line $ style->string (.to-list v)
-                      if (some? contained) (str contained "\" {" &newline rule-name "\" {" &newline css-line &newline "\"}" &newline "\"}") (str rule-name "\" {" &newline css-line &newline "\"}")
+                      if (some? contained) (str contained "| {" &newline rule-name "| {" &newline css-line &newline |} &newline |}) (str rule-name "| {" &newline css-line &newline |})
                 .to-list
                 .join-str $ str &newline &newline
           :examples $ []
           :schema $ :: :fn
             {} (:return :string)
               :args $ [] :string :map
-      :ns $ %{} :CodeEntry (:doc |) (:schema :unit)
+      :ns $ %{} :NsEntry (:doc |)
         :code $ quote
           ns respo.css $ :require
             respo.render.dom :refer $ style->string
-        :examples $ []
     |respo.cursor $ %{} :FileEntry
       :defs $ {}
-        |update-states $ %{} :CodeEntry (:doc |) (:schema nil)
+        |update-states $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn update-states (store cursor new-state) (assert-type store :map) (assert-type cursor :list)
               assoc-in store
                 concat ([] :states) cursor $ [] :data
                 , new-state
           :examples $ []
-        |update-states-kv $ %{} :CodeEntry (:doc "|a quick dirty trick to partially update component state.\n\nnotice: need to handle empty state manually.") (:schema nil)
+          :schema $ :: :fn
+            {} (:return :map)
+              :args $ [] :map :list :dynamic
+        |update-states-kv $ %{} :CodeEntry (:doc "|a quick dirty trick to partially update component state.\n\nnotice: need to handle empty state manually.")
           :code $ quote
             defn update-states-kv (store cursor k v) (assert-type store :map) (assert-type cursor :list)
               update-in store
                 concat ([] :states) cursor $ [] :data
                 fn (s)
                   if (map? s) (assoc s k v)
-                    do (js/console.warn "\":states-kv expected hashmap, got:" s) s
+                    do (js/console.warn "|:states-kv expected hashmap, got:" s) s
           :examples $ []
-        |update-states-merge $ %{} :CodeEntry (:doc |) (:schema nil)
+          :schema $ :: :fn
+            {} (:return :map)
+              :args $ [] :map :list :dynamic :dynamic
+        |update-states-merge $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn update-states-merge (store cursor state0 changes) (assert-type store :map) (assert-type cursor :list) (assert-type state0 :map) (assert-type changes :map)
               update-in store
                 concat ([] :states) cursor $ [] :data
                 fn (s)
                   if (nil? s)
-                    noted "\"merge base initial state" $ merge state0 changes
+                    noted "|merge base initial state" $ merge state0 changes
                     if (map? s)
-                      noted "\"merge base latest state" $ merge s changes
-                      do (js/console.warn "\"unknown data to merge:" s) s
+                      noted "|merge base latest state" $ merge s changes
+                      do (js/console.warn "|unknown data to merge:" s) s
           :examples $ []
-      :ns $ %{} :CodeEntry (:doc |) (:schema :unit)
+          :schema $ :: :fn
+            {} (:return :map)
+              :args $ [] :map :list :map :map
+      :ns $ %{} :NsEntry (:doc |)
         :code $ quote (ns respo.cursor)
-        :examples $ []
     |respo.main $ %{} :FileEntry
       :defs $ {}
-        |main! $ %{} :CodeEntry (:doc |) (:schema nil)
+        |main! $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn main! () (; handle-ssr! mount-target) (load-console-formatter!)
               if-let
@@ -1482,38 +1630,46 @@
                         :meta $ .-metaKey event
                   send-to-component! event-tuple
               add-watch *store :rerender $ fn (store prev) (render-app! mount-target)
-              ; reset! *changes-logger $ fn (old-tree new-tree changes) (js/console.log "\"Patch" changes)
+              ; reset! *changes-logger $ fn (old-tree new-tree changes) (js/console.log |Patch changes)
               println |Loaded. $ js/performance.now
               set! js/window.onbeforeunload $ fn (event) (save-store!)
           :examples $ []
-        |mount-target $ %{} :CodeEntry (:doc "|Default DOM element selector (.app) for mounting the application.") (:schema nil)
+          :schema $ :: :fn
+            {} (:return :unit)
+              :args $ []
+        |mount-target $ %{} :CodeEntry (:doc "|Default DOM element selector (.app) for mounting the application.") (:schema :dynamic)
           :code $ quote
             def mount-target $ if (exists? js/document) (js/document.querySelector |.app) nil
           :examples $ []
-        |reload! $ %{} :CodeEntry (:doc |) (:schema nil)
+        |reload! $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn reload () $ if (nil? build-errors)
               do (remove-watch *store :rerender) (clear-cache!) (render-app! mount-target)
                 add-watch *store :rerender $ fn (store prev) (render-app! mount-target)
-                hud! "\"ok~" "\"Ok"
+                hud! |ok~ |Ok
                 js/console.log "|code updated."
-              hud! "\"error" build-errors
+              hud! |error build-errors
           :examples $ []
-        |save-store! $ %{} :CodeEntry (:doc |) (:schema nil)
+          :schema $ :: :fn
+            {} (:return :unit)
+              :args $ []
+        |save-store! $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn save-store! () $ js/window.localStorage.setItem |respo.calcit
               format-cirru-edn $ :tasks @*store
           :examples $ []
-      :ns $ %{} :CodeEntry (:doc |) (:schema :unit)
+          :schema $ :: :fn
+            {} (:return :unit)
+              :args $ []
+      :ns $ %{} :NsEntry (:doc |)
         :code $ quote
           ns respo.main $ :require
             respo.core :refer $ *changes-logger clear-cache!
             respo.app.core :refer $ render-app! *store
             respo.app.core :refer $ handle-ssr!
-            "\"./calcit.build-errors" :default build-errors
-            "\"bottom-tip" :default hud!
+            |./calcit.build-errors :default build-errors
+            |bottom-tip :default hud!
             respo.controller.client :refer $ send-to-component!
-        :examples $ []
     |respo.render.diff $ %{} :FileEntry
       :defs $ {}
         |detect-keys-dup $ %{} :CodeEntry (:doc "|Checks for duplicate keys in a list of children. Useful for development mode warnings.") (:schema nil)
@@ -1529,7 +1685,7 @@
                     if
                       &= (nth child-keys p) (nth child-keys q)
                       do
-                        eprintln "\"duplicated key" $ nth child-keys p
+                        eprintln "|duplicated key" $ nth child-keys p
                         , true
                       if (&< q last-pos)
                         recur p $ inc q
@@ -1577,8 +1733,8 @@
                       y1-existed? $ any? old-keys match-y1
                       old-follows $ rest old-children
                       new-follows $ rest new-children
-                    if (nil? y1) (js/console.warn "\"nil key is bad in Respo")
-                    ; println "\"compare:" x1 new-keys x1-remains? y1 y1-existed? old-keys
+                    if (nil? y1) (js/console.warn "|nil key is bad in Respo")
+                    ; println |compare: x1 new-keys x1-remains? y1 y1-existed? old-keys
                     cond
                         &= x1 y1
                         let
@@ -1627,7 +1783,7 @@
           :examples $ []
         |find-element-diffs $ %{} :CodeEntry (:doc "|Core algorithm to find differences between old and new virtual DOM trees. `collect!` is a callback for effects.") (:schema nil)
           :code $ quote
-            defn find-element-diffs (collect! coord n-coord old-tree new-tree) (; js/console.log "|element diffing:" n-coord old-tree new-tree) (; echo "\"element coord" coord)
+            defn find-element-diffs (collect! coord n-coord old-tree new-tree) (; js/console.log "|element diffing:" n-coord old-tree new-tree) (; echo "|element coord" coord)
               cond
                   identical? old-tree new-tree
                   , nil
@@ -1684,9 +1840,9 @@
                           new-children $ &record:get new-tree :children
                         if
                           and dev? $ detect-keys-dup (map new-children first)
-                          js/console.error "\"Parent that has dups" new-tree
+                          js/console.error "|Parent that has dups" new-tree
                         find-children-diffs collect! coord n-coord 0 old-children new-children
-                true $ js/console.warn "\"Diffing unknown params" old-tree new-tree
+                true $ js/console.warn "|Diffing unknown params" old-tree new-tree
           :examples $ []
         |find-props-diffs $ %{} :CodeEntry (:doc "|Compares old and new properties maps to identify additions, removals, and updates.") (:schema nil)
           :code $ quote
@@ -1717,7 +1873,7 @@
                       old-follows $ rest old-props
                       new-follows $ rest new-props
                     ; js/console.log old-k new-k old-v new-v
-                    case-default (&compare old-k new-k) (eprintln "\"[Respo] unknown compare result for props keys")
+                    case-default (&compare old-k new-k) (eprintln "|[Respo] unknown compare result for props keys")
                       -1 $ do
                         collect! $ :: :rm-prop coord n-coord old-k
                         recur collect! coord n-coord old-follows new-props
@@ -1757,7 +1913,7 @@
                       new-follows $ rest new-style
                     case-default
                       &compare (first old-entry) (first new-entry)
-                      eprintln "\"[Respo] unknown compare result for style keys"
+                      eprintln "|[Respo] unknown compare result for style keys"
                       -1 $ do
                         collect! $ :: :rm-style c-coord coord (first old-entry)
                         recur collect! c-coord coord old-follows new-style
@@ -1770,7 +1926,7 @@
                           collect! $ :: :replace-style c-coord coord new-entry
                         recur collect! c-coord coord old-follows new-follows
           :examples $ []
-      :ns $ %{} :CodeEntry (:doc |) (:schema :unit)
+      :ns $ %{} :NsEntry (:doc |)
         :code $ quote
           ns respo.render.diff $ :require
             respo.util.format :refer $ purify-element
@@ -1778,13 +1934,12 @@
             respo.render.effect :refer $ collect-mounting collect-updating collect-unmounting
             respo.util.list :refer $ val-of-first
             respo.schema :refer $ dev?
-        :examples $ []
     |respo.render.dom $ %{} :FileEntry
       :defs $ {}
         |make-element $ %{} :CodeEntry (:doc "|internal function to create a DOM element from a virtual element. handles properties, styles, events, and recursively creates child elements.") (:schema nil)
           :code $ quote
             defn make-element (virtual-element listener-builder coord)
-              assert "\"coord is required" $ some? coord
+              assert "|coord is required" $ some? coord
               if (component? virtual-element)
                 make-element (&record:get virtual-element :tree) listener-builder $ conj coord (&record:get virtual-element :name)
                 let
@@ -1796,17 +1951,17 @@
                     element $ js/document.createElement tag-name
                     child-elements $ -> children
                       map $ fn (pair)
-                        assert "\"expect pair of key/element" $ and (list? pair)
+                        assert "|expect pair of key/element" $ and (list? pair)
                           &= 2 $ count pair
                         let[] (k child) pair
-                          when (nil? k) (js/console.warn "\"nil key is bad for Respo")
+                          when (nil? k) (js/console.warn "|nil key is bad for Respo")
                           when (some? child)
                             make-element child listener-builder $ conj coord k
                   each attrs $ fn (entry)
                     let
                         prop-str $ turn-string (first entry)
                         v $ last entry
-                      if (.!startsWith prop-str "\"data-")
+                      if (.!startsWith prop-str |data-)
                         -> element .-dataset $ js-set (.!slice prop-str 5) v
                         let
                             k $ dashed->camel prop-str
@@ -1833,7 +1988,7 @@
           :code $ quote
             defn style->string (styles) (assert-type styles :list)
               loop
-                  acc "\""
+                  acc |
                   xs styles
                 if (empty? xs) acc $ let
                     entry $ first xs
@@ -1845,12 +2000,11 @@
                         v $ get-style-value (last entry) style-name
                       recur (str acc style-name |: v |;) (rest xs)
           :examples $ []
-      :ns $ %{} :CodeEntry (:doc |) (:schema :unit)
+      :ns $ %{} :NsEntry (:doc |)
         :code $ quote
           ns respo.render.dom $ :require
             respo.util.format :refer $ dashed->camel event->prop get-style-value
             respo.util.detect :refer $ component?
-        :examples $ []
     |respo.render.effect $ %{} :FileEntry
       :defs $ {}
         |collect-mounting $ %{} :CodeEntry (:doc "|internal function to collect mounting effects from component tree. recursively traverses the virtual DOM and collects effect:mount callbacks.") (:schema nil)
@@ -1881,7 +2035,7 @@
                           k $ first pair
                         collect-mounting collect! (conj coord k) (conj n-coord idx) (last pair) false
                       recur (rest children) (inc idx)
-                true $ js/console.warn "\"Unknown entry for mounting:" tree
+                true $ js/console.warn "|Unknown entry for mounting:" tree
           :examples $ []
         |collect-unmounting $ %{} :CodeEntry (:doc "|internal function to collect unmounting effects from component tree. recursively traverses the virtual DOM and collects effect:unmount callbacks.") (:schema nil)
           :code $ quote
@@ -1911,18 +2065,18 @@
                           k $ first pair
                         collect-unmounting collect! (conj coord k) (conj n-coord idx) (last pair) false
                       recur (rest children) (inc idx)
-                true $ js/console.warn "\"Unknown entry for unmounting:" tree
+                true $ js/console.warn "|Unknown entry for unmounting:" tree
           :examples $ []
         |collect-updating $ %{} :CodeEntry (:doc "|Compares effects between component updates and collects effect actions if arguments change.") (:schema nil)
           :code $ quote
             defn collect-updating (collect! action coord n-coord old-tree new-tree)
-              assert "\"expects component" $ component? new-tree
+              assert "|expects component" $ component? new-tree
               let
                   effects $ :effects new-tree
                   next-coord $ conj coord (:name new-tree)
                 when
                   not $ empty? effects
-                  ; js/console.log "\"collect update" n-coord $ :effects new-tree
+                  ; js/console.log "|collect update" n-coord $ :effects new-tree
                   &doseq
                     idx $ range (count effects)
                     let
@@ -1938,12 +2092,11 @@
                             fn (target)
                               method (:args new-effect) ([] action target)
           :examples $ []
-      :ns $ %{} :CodeEntry (:doc |) (:schema :unit)
+      :ns $ %{} :NsEntry (:doc |)
         :code $ quote
           ns respo.render.effect $ :require (respo.schema.op :as op)
             respo.util.detect :refer $ component? element? =seq
             respo.util.list :refer $ val-of-first
-        :examples $ []
     |respo.render.html $ %{} :FileEntry
       :defs $ {}
         |element->string $ %{} :CodeEntry (:doc "|which is actually `element->html`") (:schema nil)
@@ -1999,7 +2152,7 @@
         |escape-html $ %{} :CodeEntry (:doc |) (:schema nil)
           :code $ quote
             defn escape-html (text)
-              if (nil? text) "\"" $ -> text (.replace "|\"" |&quot;) (.replace |< |&lt;) (.replace |> |&gt;) (.replace &newline "\"&#13;&#10;")
+              if (nil? text) | $ -> text (.replace "|\"" |&quot;) (.replace |< |&lt;) (.replace |> |&gt;) (.replace &newline |&#13;&#10;)
           :examples $ []
         |make-string $ %{} :CodeEntry (:doc |) (:schema nil)
           :code $ quote
@@ -2022,7 +2175,7 @@
           :examples $ []
         |self-closing $ %{} :CodeEntry (:doc |) (:schema nil)
           :code $ quote
-            def self-closing $ #{} "\"area" "\"base" "\"br" "\"col" "\"embed" "\"hr" "\"img" "\"input" "\"link" "\"meta" "\"param" "\"source" "\"track" "\"wbr"
+            def self-closing $ #{} |area |base |br |col |embed |hr |img |input |link |meta |param |source |track |wbr
           :examples $ []
         |style->html $ %{} :CodeEntry (:doc "|this function is intended for HTML rendering since it escaped characters.") (:schema nil)
           :code $ quote
@@ -2036,12 +2189,11 @@
                     str style-name |: (escape-html v) |;
                 join-str |
           :examples $ []
-      :ns $ %{} :CodeEntry (:doc |) (:schema :unit)
+      :ns $ %{} :NsEntry (:doc |)
         :code $ quote
           ns respo.render.html $ :require
             respo.util.format :refer $ prop->attr purify-element mute-element text->html get-style-value dashed->camel
             respo.util.detect :refer $ component? element?
-        :examples $ []
     |respo.render.patch $ %{} :FileEntry
       :defs $ {}
         |add-element $ %{} :CodeEntry (:doc "|Inserts a new DOM element before a target element.") (:schema nil)
@@ -2066,7 +2218,7 @@
             defn add-prop (target p prop-value)
               let
                   prop-str $ turn-string p
-                if (.!startsWith prop-str "\"data-")
+                if (.!startsWith prop-str |data-)
                   -> target .-dataset $ js-set (.!slice prop-str 5) prop-value
                   let
                       prop-name $ dashed->camel prop-str
@@ -2143,7 +2295,7 @@
             defn replace-prop (target p prop-value)
               let
                   prop-str $ turn-string p
-                if (.!startsWith prop-str "\"data-")
+                if (.!startsWith prop-str |data-)
                   let
                       name $ .!slice prop-str 5
                     if
@@ -2183,16 +2335,16 @@
               case-default op
                 let
                     prop-str $ turn-string op
-                  if (.!startsWith prop-str "\"data-")
+                  if (.!startsWith prop-str |data-)
                     -> target .-dataset $ js-delete (.!slice prop-str 5)
                     let
                         k $ dashed->camel prop-str
                         ; ks $ prop->attr prop-str
                       aset target k nil
-                :class-name $ .!removeAttribute target "\"class"
-                :href $ .!removeAttribute target "\"href"
-                :inner-text $ set! (.-innerText target) "\""
-                :innerHTML $ set! (.-innerHTML target) "\""
+                :class-name $ .!removeAttribute target |class
+                :href $ .!removeAttribute target |href
+                :inner-text $ set! (.-innerText target) |
+                :innerHTML $ set! (.-innerHTML target) |
                 :checked $ set! (.-checked target) false
                 :disabled $ set! (.-disabled target) false
                 :selected $ set! (.-selected target) false
@@ -2207,15 +2359,14 @@
         |run-effect $ %{} :CodeEntry (:doc "|Runs side effect functions.\n\nParameters:\n  target - Target DOM element or component instance, nil if target not found\n  method - Method function to execute on the target\n  coord - Coordinate information for identifying location in console warnings\n\nFunctionality:\n  If target exists, calls method function on target; if target is nil, outputs warning to console.\n  Mainly used to execute various side effects during rendering patch process, such as event listening, DOM operations, etc.") (:schema nil)
           :code $ quote
             defn run-effect (target method coord)
-              if (some? target) (method target) (js/console.warn "\"Unknown effects target:" coord)
+              if (some? target) (method target) (js/console.warn "|Unknown effects target:" coord)
           :examples $ []
-      :ns $ %{} :CodeEntry (:doc |) (:schema :unit)
+      :ns $ %{} :NsEntry (:doc |)
         :code $ quote
           ns respo.render.patch $ :require
             respo.util.format :refer $ dashed->camel event->prop get-style-value prop->attr
             respo.render.dom :refer $ make-element style->string
             respo.schema.op :as op
-        :examples $ []
     |respo.schema $ %{} :FileEntry
       :defs $ {}
         |Component $ %{} :CodeEntry (:doc |) (:schema nil)
@@ -2234,15 +2385,15 @@
           :code $ quote
             defstruct RespoListener (:name :any) (:handler :any)
           :examples $ []
-        |cache-info $ %{} :CodeEntry (:doc |) (:schema nil)
+        |cache-info $ %{} :CodeEntry (:doc |) (:schema :map)
           :code $ quote
             def cache-info $ {} (:value nil) (:initial-loop nil) (:last-hit nil) (:hit-times 0)
           :examples $ []
-        |dev? $ %{} :CodeEntry (:doc "|Boolean flag indicating if the application is running in development mode.") (:schema nil)
+        |dev? $ %{} :CodeEntry (:doc "|Boolean flag indicating if the application is running in development mode.") (:schema :bool)
           :code $ quote
-            def dev? $ &= "\"dev" (get-env "\"mode" "\"release")
+            def dev? $ &= |dev (get-env |mode |release)
           :examples $ []
-        |effect $ %{} :CodeEntry (:doc |) (:schema nil)
+        |effect $ %{} :CodeEntry (:doc |) (:schema :map)
           :code $ quote
             def effect $ {} (:name nil) (:respo-node :effect)
               :coord $ []
@@ -2250,14 +2401,12 @@
               :method $ fn (props args)
                 ; args $ [] action parent at-place?
           :examples $ []
-      :ns $ %{} :CodeEntry (:doc |) (:schema :unit)
+      :ns $ %{} :NsEntry (:doc |)
         :code $ quote (ns respo.schema)
-        :examples $ []
     |respo.schema.listener $ %{} :FileEntry
       :defs $ {}
-      :ns $ %{} :CodeEntry (:doc |) (:schema :unit)
+      :ns $ %{} :NsEntry (:doc |)
         :code $ quote (ns respo.schema.listener)
-        :examples $ []
     |respo.test.comp.task $ %{} :FileEntry
       :defs $ {}
         |comp-task $ %{} :CodeEntry (:doc |)
@@ -2270,12 +2419,11 @@
           :schema $ :: :fn
             {} (:return 'respo.schema/Component)
               :args $ [] :dynamic
-      :ns $ %{} :CodeEntry (:doc |) (:schema :unit)
+      :ns $ %{} :NsEntry (:doc |)
         :code $ quote
           ns respo.test.comp.task $ :require
             respo.util.format :refer $ hsl
             respo.core :refer $ defcomp div span
-        :examples $ []
     |respo.test.comp.todolist $ %{} :FileEntry
       :defs $ {}
         |comp-todolist $ %{} :CodeEntry (:doc |)
@@ -2291,16 +2439,16 @@
           :schema $ :: :fn
             {} (:return 'respo.schema/Component)
               :args $ [] :dynamic
-        |style-todolist $ %{} :CodeEntry (:doc |) (:schema nil)
+        |style-todolist $ %{} :CodeEntry (:doc |) (:schema :map)
           :code $ quote
             def style-todolist $ {} (:color :blue) (:font-family "|\"微软雅黑\", Verdana")
           :examples $ []
-      :ns $ %{} :CodeEntry (:doc |) (:schema :unit)
+      :ns $ %{} :NsEntry (:doc |)
         :code $ quote
           ns respo.test.comp.todolist $ :require
             respo.test.comp.task :refer $ comp-task
             respo.core :refer $ defcomp div list->
-        :examples $ []
+            respo.test.comp.todolist :refer $ comp-todolist
     |respo.test.html $ %{} :FileEntry
       :defs $ {}
         |html-quote-test $ %{} :CodeEntry (:doc |) (:schema nil)
@@ -2323,14 +2471,17 @@
           :code $ quote
             deftest nil-prop-test $ let
                 piece $ script
-                  {} (:src "\"a.js") (:defer nil)
+                  {} (:src |a.js) (:defer nil)
               testing "|test generate script with nil" $ is
                 = "|<script src=\"a.js\"></script>" $ make-string piece
           :examples $ []
-        |run-tests $ %{} :CodeEntry (:doc |) (:schema nil)
+        |run-tests $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn run-tests () (html-quote-test) (nil-prop-test) (simple-html-test) (textarea-test)
           :examples $ []
+          :schema $ :: :fn
+            {} (:return :unit)
+              :args $ []
         |simple-html-test $ %{} :CodeEntry (:doc |) (:schema nil)
           :code $ quote
             deftest simple-html-test $ let
@@ -2358,29 +2509,35 @@
               testing "|test generated HTML from component" $ is
                 = "|<textarea value=\"a&#13;&#10;b&#13;&#10;c&#13;&#10;&quot;&#13;&#10;d\">a&#13;&#10;b&#13;&#10;c&#13;&#10;&quot;&#13;&#10;d</textarea>" $ make-string piece
           :examples $ []
-        |todolist-store $ %{} :CodeEntry (:doc |) (:schema nil)
+        |todolist-store $ %{} :CodeEntry (:doc |) (:schema :list)
           :code $ quote
             def todolist-store $ []
               {} (:id 101) (:text |101)
               {} (:id 102) (:text |102)
           :examples $ []
-      :ns $ %{} :CodeEntry (:doc |) (:schema :unit)
+      :ns $ %{} :NsEntry (:doc |)
         :code $ quote
           ns respo.test.html $ :require
             calcit-test.core :refer $ deftest is testing
             respo.core :refer $ html head title script div link textarea body
             respo.render.html :refer $ make-string
-        :examples $ []
+            respo.test.comp.todolist :refer $ comp-todolist
     |respo.test.main $ %{} :FileEntry
       :defs $ {}
-        |main! $ %{} :CodeEntry (:doc |) (:schema nil)
+        |main! $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn main! () (html/run-tests) (test-pick-attrs) (test-pick-event)
           :examples $ []
-        |reload! $ %{} :CodeEntry (:doc |) (:schema nil)
+          :schema $ :: :fn
+            {} (:return :unit)
+              :args $ []
+        |reload! $ %{} :CodeEntry (:doc |)
           :code $ quote
-            defn reload! () $ println "\"reload."
+            defn reload! () $ println |reload.
           :examples $ []
+          :schema $ :: :fn
+            {} (:return :unit)
+              :args $ []
         |test-pick-attrs $ %{} :CodeEntry (:doc |) (:schema nil)
           :code $ quote
             deftest test-pick-attrs $ is
@@ -2402,15 +2559,14 @@
                     :on $ {} (:input f)
                   {} (:click f) (:input f)
           :examples $ []
-      :ns $ %{} :CodeEntry (:doc |) (:schema :unit)
+      :ns $ %{} :NsEntry (:doc |)
         :code $ quote
           ns respo.test.main $ :require (respo.test.html :as html)
             calcit-test.core :refer $ deftest testing is
             respo.util.list :refer $ pick-attrs pick-event
-        :examples $ []
     |respo.util.detect $ %{} :FileEntry
       :defs $ {}
-        |=seq $ %{} :CodeEntry (:doc "|Recursively checks if two sequences are equal.") (:schema nil)
+        |=seq $ %{} :CodeEntry (:doc "|Recursively checks if two sequences are equal.")
           :code $ quote
             defn =seq (xs ys)
               let
@@ -2424,6 +2580,9 @@
                     recur (rest xs) (rest ys)
                   true false
           :examples $ []
+          :schema $ :: :fn
+            {} (:return :bool)
+              :args $ [] :list :list
         |component? $ %{} :CodeEntry (:doc "|check if value is a Respo component. returns true for component records, false otherwise.")
           :code $ quote
             defn component? (x)
@@ -2472,23 +2631,22 @@
           :schema $ :: :fn
             {} (:return :bool)
               :args $ [] :dynamic
-      :ns $ %{} :CodeEntry (:doc |) (:schema :unit)
+      :ns $ %{} :NsEntry (:doc |)
         :code $ quote
           ns respo.util.detect $ :require (respo.schema :as schema)
-        :examples $ []
     |respo.util.dom $ %{} :FileEntry
       :defs $ {}
         |compare-to-dom! $ %{} :CodeEntry (:doc |) (:schema nil)
           :code $ quote
             defn compare-to-dom! (vdom element)
-              ; println "\"compare" (:name vdom)
+              ; println |compare (:name vdom)
                 map :name $ vals (:children vdom)
               ; js/console.log element
               let
                   virtual-name $ turn-string (:name vdom)
                   real-name $ .!toLowerCase (.-tagName element)
                 when (not= virtual-name real-name)
-                  js/console.warn "\"SSR checking: tag names do not match:"
+                  js/console.warn "|SSR checking: tag names do not match:"
                     to-lispy-string $ dissoc vdom :children
                     , element
               if
@@ -2501,10 +2659,10 @@
                   if (some? maybe-html)
                     when
                       = maybe-html $ .-innerHTML element
-                      js/console.warn "\"SSR checking: noticed dom containing innerHTML:" element
-                    do (js/console.error "\"SSR checking: children sizes do not match!")
-                      js/console.log "\"virtual:" $ -> vdom :children (map last) (map :name) to-lispy-string
-                      js/console.log "\"real:" $ .-children element
+                      js/console.warn "|SSR checking: noticed dom containing innerHTML:" element
+                    do (js/console.error "|SSR checking: children sizes do not match!")
+                      js/console.log |virtual: $ -> vdom :children (map last) (map :name) to-lispy-string
+                      js/console.log |real: $ .-children element
                 let
                     real-children $ .-children element
                   loop
@@ -2515,14 +2673,14 @@
                       compare-to-dom! (val-of-first other-children) (aget real-children acc)
                       recur (inc acc) (rest other-children)
           :examples $ []
-        |shared-canvas-context $ %{} :CodeEntry (:doc "|Shared Canvas 2D context for measuring text width or other canvas operations.") (:schema nil)
+        |shared-canvas-context $ %{} :CodeEntry (:doc "|Shared Canvas 2D context for measuring text width or other canvas operations.") (:schema :dynamic)
           :code $ quote
             def shared-canvas-context $ if
               and (exists? js/window) (exists? js/document)
               .!getContext (js/document.createElement |canvas) |2d
               , nil
           :examples $ []
-        |text-width $ %{} :CodeEntry (:doc |) (:schema nil)
+        |text-width $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn text-width (content font-size font-family) (assert-type content :string) (assert-type font-size :number) (assert-type font-family :string)
               if (some? shared-canvas-context)
@@ -2531,11 +2689,13 @@
                   .-width $ .!measureText shared-canvas-context content
                 , nil
           :examples $ []
-      :ns $ %{} :CodeEntry (:doc |) (:schema :unit)
+          :schema $ :: :fn
+            {} (:return :dynamic)
+              :args $ [] :string :number :string
+      :ns $ %{} :NsEntry (:doc |)
         :code $ quote
           ns respo.util.dom $ :require
             respo.util.list :refer $ val-of-first
-        :examples $ []
     |respo.util.format $ %{} :FileEntry
       :defs $ {}
         |dashed->camel $ %{} :CodeEntry (:doc "|convert dashed-case CSS property names to camelCase. e.g. \"background-color\" -> \"backgroundColor\".")
@@ -2550,51 +2710,57 @@
           :schema $ :: :fn
             {} (:return :string)
               :args $ [] :string
-        |dashed-letter-pattern $ %{} :CodeEntry (:doc "|Regex pattern for finding dashed-case letters (e.g. -a) to convert to camelCase.") (:schema nil)
+        |dashed-letter-pattern $ %{} :CodeEntry (:doc "|Regex pattern for finding dashed-case letters (e.g. -a) to convert to camelCase.") (:schema :dynamic)
           :code $ quote
-            def dashed-letter-pattern $ new js/RegExp "\"-[a-z]" "\"g"
+            def dashed-letter-pattern $ new js/RegExp |-[a-z] |g
           :examples $ []
         |event->edn $ %{} :CodeEntry (:doc "|Converts a native DOM event into a Respo EDN event structure.")
           :code $ quote
-            defn event->edn (event) (; js/console.log "\"simplify event:" event)
+            defn event->edn (event) (; js/console.log "|simplify event:" event)
               ->
                 case-default (.-type event)
                   {}
                     :type $ .-type event
                     :msg $ str "|Unhandled event: " (.-type event)
-                  "\"click" $ {} (:type :click)
-                  "\"keydown" $ merge (map-keyboard-event event)
+                  |click $ {} (:type :click)
+                  |keydown $ merge (map-keyboard-event event)
                     {} (:type :keydown)
                       :key-code $ .-keyCode event
                       :keycode $ .-keyCode event
-                  "\"keypress" $ merge (map-keyboard-event event)
+                  |keypress $ merge (map-keyboard-event event)
                     {} $ :type :keypress
-                  "\"keyup" $ merge (map-keyboard-event event)
+                  |keyup $ merge (map-keyboard-event event)
                     {} $ :type :keyup
-                  "\"input" $ {} (:type :input)
-                    :value $ aget (.-target event) "\"value"
+                  |input $ {} (:type :input)
+                    :value $ aget (.-target event) |value
                     :checked $ -> event .-target .-checked
-                  "\"change" $ {} (:type :change)
+                  |change $ {} (:type :change)
                     :value $ aget (.-target event) |value
-                  "\"focus" $ {} (:type :focus)
+                  |focus $ {} (:type :focus)
                 assoc :original-event event
                 assoc :event event
           :examples $ []
           :schema $ :: :fn
             {} (:return :map)
               :args $ [] :dynamic
-        |event->prop $ %{} :CodeEntry (:doc "|Converts an event keyword (e.g. :click) to a prop name string (e.g. 'onclick').") (:schema nil)
+        |event->prop $ %{} :CodeEntry (:doc "|Converts an event keyword (e.g. :click) to a prop name string (e.g. 'onclick').")
           :code $ quote
             defn event->prop (x)
               str |on $ turn-string x
           :examples $ []
             quote $ event->prop :click
-        |event->string $ %{} :CodeEntry (:doc |) (:schema nil)
+          :schema $ :: :fn
+            {} (:return :string)
+              :args $ [] :dynamic
+        |event->string $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn event->string (x)
               &str:slice (turn-string x) 3
           :examples $ []
-        |get-style-value $ %{} :CodeEntry (:doc "|Formats a style value for a given property. Adds 'px' to numbers if the property expects units.") (:schema nil)
+          :schema $ :: :fn
+            {} (:return :string)
+              :args $ [] :dynamic
+        |get-style-value $ %{} :CodeEntry (:doc "|Formats a style value for a given property. Adds 'px' to numbers if the property expects units.")
           :code $ quote
             defn get-style-value (x prop)
               cond
@@ -2602,22 +2768,28 @@
                   , x
                 (tag? x) (turn-string x)
                 (number? x)
-                  if (contains? unitless-props prop) (str x) (str x "\"px")
+                  if (contains? unitless-props prop) (str x) (str x |px)
                 (nil? x) nil
                 true $ str x
           :examples $ []
             quote $ get-style-value 10 :width
             quote $ get-style-value 1 :opacity
-        |hsl $ %{} :CodeEntry (:doc "|Generates HSL color string. Arguments: h, s (percent), l (percent), optional alpha (0-1).") (:schema nil)
+          :schema $ :: :fn
+            {} (:return :dynamic)
+              :args $ [] :dynamic :dynamic
+        |hsl $ %{} :CodeEntry (:doc "|Generates HSL color string. Arguments: h, s (percent), l (percent), optional alpha (0-1).")
           :code $ quote
             defn hsl (h s l ? arg) (assert-type h :number) (assert-type s :number) (assert-type l :number)
               hint-fn $ {} (:return :string)
               let
                   a $ either arg 1
-                str "\"hsl(" h "\"," s "\"%," l "\"%," a "\")"
+                str "|hsl(" h |, s |%, l |%, a "|)"
           :examples $ []
             quote $ hsl 200 80 50
             quote $ hsl 0 100 50 0.5
+          :schema $ :: :fn
+            {} (:return :string)
+              :args $ [] :number :number :number :dynamic
         |map-keyboard-event $ %{} :CodeEntry (:doc "|Extracts key information from a JavaScript KeyboardEvent.")
           :code $ quote
             defn map-keyboard-event (event)
@@ -2632,7 +2804,7 @@
           :schema $ :: :fn
             {} (:return :map)
               :args $ [] :dynamic
-        |mute-element $ %{} :CodeEntry (:doc |) (:schema nil)
+        |mute-element $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn mute-element (element)
               if (component? element) (update element :tree mute-element)
@@ -2644,13 +2816,19 @@
                         [] (first entry)
                           mute-element $ last entry
           :examples $ []
-        |prop->attr $ %{} :CodeEntry (:doc |) (:schema nil)
+          :schema $ :: :fn
+            {} (:return :dynamic)
+              :args $ [] :dynamic
+        |prop->attr $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn prop->attr (x)
-              when (includes? x "\"?") (println "\"[Respo] warning: property includes `?` in" x)
+              when (includes? x |?) (println "|[Respo] warning: property includes `?` in" x)
               case-default x x (|class-name |class) (|tab-index |tabindex) (|read-only |readonly)
           :examples $ []
-        |purify-element $ %{} :CodeEntry (:doc |) (:schema nil)
+          :schema $ :: :fn
+            {} (:return :string)
+              :args $ [] :string
+        |purify-element $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn purify-element (markup)
               cond
@@ -2659,7 +2837,7 @@
                 (component? markup)
                   purify-element $ &let
                     t $ :tree markup
-                    when (nil? t) (raise "\"tree is empty")
+                    when (nil? t) (raise "|tree is empty")
                     , t
                 (element? markup)
                   -> markup (update :event purify-events)
@@ -2670,9 +2848,12 @@
                               k $ first pair
                               child $ last pair
                             [] k $ purify-element child
-                true $ do (js/console.warn "\"Unknown markup during purify:" markup) nil
+                true $ do (js/console.warn "|Unknown markup during purify:" markup) nil
           :examples $ []
-        |purify-events $ %{} :CodeEntry (:doc |) (:schema nil)
+          :schema $ :: :fn
+            {} (:return :dynamic)
+              :args $ [] :dynamic
+        |purify-events $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn purify-events (events)
               reduce events ([])
@@ -2682,25 +2863,30 @@
                     conj acc $ first pair
                     , acc
           :examples $ []
-        |text->html $ %{} :CodeEntry (:doc |) (:schema nil)
+          :schema $ :: :fn
+            {} (:return :list)
+              :args $ [] :map
+        |text->html $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn text->html (x)
               if (some? x)
                 -> (str x) (.replace |> |&gt;) (.replace |< |&lt;)
                 , nil
           :examples $ []
-        |unitless-props $ %{} :CodeEntry (:doc "|gemini suggested from popular libs\n") (:schema nil)
+          :schema $ :: :fn
+            {} (:return :dynamic)
+              :args $ [] :dynamic
+        |unitless-props $ %{} :CodeEntry (:doc "|gemini suggested from popular libs\n") (:schema :map)
           :code $ quote
             def unitless-props $ {} (|animationDelay true) (|animationDuration true) (|animationIterationCount true) (|aspectRatio true) (|borderImageOutset true) (|borderImageSlice true) (|borderImageWidth true) (|boxFlex true) (|boxFlexGroup true) (|boxOrdinalGroup true) (|columnCount true) (|columns true) (|fillOpacity true) (|flex true) (|flexGrow true) (|flexNegative true) (|flexPositive true) (|flexShrink true) (|floodOpacity true) (|fontSizeAdjust true) (|fontWeight true) (|gridArea true) (|gridColumn true) (|gridColumnEnd true) (|gridColumnSpan true) (|gridColumnStart true) (|gridRow true) (|gridRowEnd true) (|gridRowSpan true) (|gridRowStart true) (|lineClamp true) (|lineHeight true) (|opacity true) (|order true) (|orphans true) (|stopOpacity true) (|strokeDasharray true) (|strokeDashoffset true) (|strokeMiterlimit true) (|strokeOpacity true) (|strokeWidth true) (|tabSize true) (|transitionDelay true) (|transitionDuration true) (|widows true) (|zIndex true) (|zoom true)
           :examples $ []
-      :ns $ %{} :CodeEntry (:doc |) (:schema :unit)
+      :ns $ %{} :NsEntry (:doc |)
         :code $ quote
           ns respo.util.format $ :require
             respo.util.detect :refer $ component? element?
-        :examples $ []
     |respo.util.list $ %{} :FileEntry
       :defs $ {}
-        |map-with-idx $ %{} :CodeEntry (:doc |) (:schema nil)
+        |map-with-idx $ %{} :CodeEntry (:doc |)
           :code $ quote
             defn map-with-idx (xs f)
               assert (fn? f) "|expects function"
@@ -2708,7 +2894,10 @@
               map-indexed xs $ fn (idx x)
                 [] idx $ f x
           :examples $ []
-        |pick-attrs $ %{} :CodeEntry (:doc "|Extracts HTML attributes from a properties map, filtering out internal keys like :on, :event, :style.") (:schema nil)
+          :schema $ :: :fn
+            {} (:return :list)
+              :args $ [] :list :fn
+        |pick-attrs $ %{} :CodeEntry (:doc "|Extracts HTML attributes from a properties map, filtering out internal keys like :on, :event, :style.")
           :code $ quote
             defn pick-attrs (props)
               if (nil? props) ([])
@@ -2717,10 +2906,13 @@
                     let
                         k $ nth pair 0
                         v $ nth pair 1
-                      not $ starts-with? (turn-string k) "\"on-"
+                      not $ starts-with? (turn-string k) |on-
                   sort $ fn (x y)
                     &compare (nth x 0) (nth y 0)
           :examples $ []
+          :schema $ :: :fn
+            {} (:return :list)
+              :args $ [] (:: :optional :map)
         |pick-event $ %{} :CodeEntry (:doc "|Extracts event listeners from a properties map. Handles both :on map and on-* keys.")
           :code $ quote
             defn pick-event (props)
@@ -2747,7 +2939,7 @@
           :schema $ :: :fn
             {} (:return :bool)
               :args $ [] :dynamic
-        |val-of-first $ %{} :CodeEntry (:doc "|Extracts the value (second item) from the first entry of a list.") (:schema nil)
+        |val-of-first $ %{} :CodeEntry (:doc "|Extracts the value (second item) from the first entry of a list.")
           :code $ quote
             defn val-of-first (x)
               last $ first x
@@ -2755,8 +2947,10 @@
             quote $ val-of-first
                 [] :a 1
                 [] :b 2
-      :ns $ %{} :CodeEntry (:doc |) (:schema :unit)
+          :schema $ :: :fn
+            {} (:return :dynamic)
+              :args $ [] :list
+      :ns $ %{} :NsEntry (:doc |)
         :code $ quote
           ns respo.util.list $ :require
             respo.util.detect :refer $ component? element?
-        :examples $ []
diff --git a/deps.cirru b/deps.cirru
index 4cb0b18..e048339 100644
--- a/deps.cirru
+++ b/deps.cirru
@@ -1,5 +1,4 @@
 
-{} (:calcit-version |0.12.9)
+{} (:calcit-version |0.12.14)
   :dependencies $ {} (|calcit-lang/calcit-test |0.0.6)
-    |calcit-lang/lilac |main
     |calcit-lang/memof |0.0.23
diff --git a/docs/Respo-Agent.md b/docs/Respo-Agent.md
index 77c4ab1..5ee6ed1 100644
--- a/docs/Respo-Agent.md
+++ b/docs/Respo-Agent.md
@@ -1,3 +1,17 @@
+---
+title: "Respo Development Guide for LLM Agents"
+scope: "module"
+kind: "agent"
+category: "docs"
+aliases:
+  - "Respo-Agent"
+  - "Respo Agent"
+  - "agent guide"
+entry_for:
+  - "docs agents"
+  - "llm agent"
+---
+
 # Respo Development Guide for LLM Agents
 
 **🤖 This guide is specifically designed for LLM agents to develop, debug, and maintain Respo applications.**
@@ -134,7 +148,7 @@ For LLM Agents, **JSON inline (`-j`) is the most reliable method** for code gene
 
 - Function: `(defn f (x) x)` -> `["defn", "f", ["x"], "x"]`
 - Map: `{:a 1}` -> `["{}", [":a", "1"]]`
-- String: `"|hello"` -> `"|hello"` (in JSON string: `"\"|hello\""`)
+- String: `"|hello"` -> `"|hello"` (in JSON string: `"hello"`)
 - Keyword: `:key` -> `":key"`
 
 **Common Commands:**
@@ -142,7 +156,7 @@ For LLM Agents, **JSON inline (`-j`) is the most reliable method** for code gene
 ```bash
 # 1. Add/Update Definition (JSON)
 # (defn greet (name) (println "|Hello" name))
-cr edit def respo.demo/greet -j '["defn", "greet", ["name"], ["println", "\"|Hello\"", "name"]]'
+cr edit def respo.demo/greet -j '["defn", "greet", ["name"], ["println", "|Hello", "name"]]'
 
 # 2. Add Definition (Cirru One-liner - risky for complex code)
 cr edit def respo.demo/simple -e 'defn simple (x) (+ x 1)'
@@ -202,7 +216,7 @@ Define the component logic.
 
 ```bash
 # Cirru: (defcomp comp-x (data) (div {} (<> "Feature X")))
-cr edit def respo.app.feature-x/comp-x -j '["defcomp", "comp-x", ["data"], ["div", ["{}"], ["<>", "\"|Feature X\""]]]'
+cr edit def respo.app.feature-x/comp-x -j '["defcomp", "comp-x", ["data"], ["div", ["{}"], ["<>", "|Feature X"]]]'
 ```
 
 **Step 4: Verify**
@@ -293,13 +307,13 @@ Use `search-expr` to find functional patterns (like state management or event ha
 
 ```bash
 # How is state being navigated?
-cr query search-expr '>> states' -l
+cr query search-expr '>> states'
 
 # Where are local state changes dispatched?
-cr query search-expr 'd! cursor' -l
+cr query search-expr 'd! cursor'
 
 # Find all component event handler signatures
-cr query search-expr 'fn (e d!)' -l
+cr query search-expr 'fn (e d!)'
 ```
 
 **Strategy:**
diff --git a/docs/api.md b/docs/api.md
index 281af60..c9518aa 100644
--- a/docs/api.md
+++ b/docs/api.md
@@ -1,3 +1,20 @@
+---
+title: "Respo API"
+scope: "module"
+kind: "overview"
+category: "reference"
+aliases:
+  - "API"
+  - "API Overview"
+  - "respo api"
+  - "api docs"
+  - "respo.core"
+entry_for:
+  - "api reference"
+  - "respo.core"
+  - "component api"
+---
+
 ## Respo API
 
 **📚 Documentation Index**
diff --git a/docs/apis/activate-instance.md b/docs/apis/activate-instance.md
index d4e7ed7..b534c20 100644
--- a/docs/apis/activate-instance.md
+++ b/docs/apis/activate-instance.md
@@ -1,3 +1,15 @@
+---
+title: "activate-instance"
+scope: "module"
+kind: "reference"
+category: "reference"
+aliases:
+  - "respo.core/activate-instance"
+entry_for:
+  - "initialize app"
+  - "mount app"
+---
+
 ## `activate-instance`
 
 Function for initializing app:
diff --git a/docs/apis/apply-dom-changes.md b/docs/apis/apply-dom-changes.md
index acf4daa..5022200 100644
--- a/docs/apis/apply-dom-changes.md
+++ b/docs/apis/apply-dom-changes.md
@@ -1,3 +1,14 @@
+---
+title: "apply-dom-changes"
+scope: "module"
+kind: "reference"
+category: "reference"
+aliases:
+  - "respo.core/apply-dom-changes"
+entry_for:
+  - "patch real dom"
+---
+
 ## `apply-dom-changes`
 
 Apply patches on the real DOM.
diff --git a/docs/apis/clear-cache!.md b/docs/apis/clear-cache!.md
index 6f5ad4d..0e975e9 100644
--- a/docs/apis/clear-cache!.md
+++ b/docs/apis/clear-cache!.md
@@ -1,3 +1,16 @@
+---
+title: "clear-cache!"
+scope: "module"
+kind: "reference"
+category: "reference"
+aliases:
+  - "respo.core/clear-cache!"
+  - "clear cache"
+entry_for:
+  - "hot reload"
+  - "clear render cache"
+---
+
 ## `clear-cache!`
 
 **📚 Documentation Index**
diff --git a/docs/apis/comp-inspect.md b/docs/apis/comp-inspect.md
index 8f3e867..91096aa 100644
--- a/docs/apis/comp-inspect.md
+++ b/docs/apis/comp-inspect.md
@@ -1,3 +1,15 @@
+---
+title: "comp-inspect"
+scope: "module"
+kind: "reference"
+category: "reference"
+aliases:
+  - "respo.comp/comp-inspect"
+entry_for:
+  - "inspect component"
+  - "debug value"
+---
+
 ## `comp-inspect`
 
 This component is similiar to `comp-text`, it shows data in string with styles.
diff --git a/docs/apis/comp-space.md b/docs/apis/comp-space.md
index 5b2caf4..d3fc083 100644
--- a/docs/apis/comp-space.md
+++ b/docs/apis/comp-space.md
@@ -1,3 +1,15 @@
+---
+title: "comp-space"
+scope: "module"
+kind: "reference"
+category: "reference"
+aliases:
+  - "respo.comp/comp-space"
+entry_for:
+  - "spacing component"
+  - "horizontal space"
+---
+
 ## `comp-space`
 
 This is the component to add spaces.
diff --git a/docs/apis/create-element.md b/docs/apis/create-element.md
index 3ca2749..3b55eb0 100644
--- a/docs/apis/create-element.md
+++ b/docs/apis/create-element.md
@@ -1,3 +1,15 @@
+---
+title: "create-element"
+scope: "module"
+kind: "reference"
+category: "reference"
+aliases:
+  - "respo.core/create-element"
+entry_for:
+  - "virtual dom element"
+  - "create vnode"
+---
+
 ## `create-element`
 
 **📚 Documentation Index**
diff --git a/docs/apis/defcomp.md b/docs/apis/defcomp.md
index b66e0a4..9223836 100644
--- a/docs/apis/defcomp.md
+++ b/docs/apis/defcomp.md
@@ -1,5 +1,27 @@
+---
+title: "defcomp"
+scope: "module"
+kind: "reference"
+category: "reference"
+aliases:
+  - "defcomp"
+  - "respo.core/defcomp"
+  - "defcomp macro"
+  - "component definition"
+  - "component component"
+entry_for:
+  - "defcomp"
+  - "define component"
+  - "component macro"
+  - "props component"
+---
+
 ## `defcomp`
 
+## Define a component
+
+Use `defcomp` to declare a reusable component that receives props and renders virtual DOM.
+
 **📚 Documentation Index**
 
 - [← Back to README](../../README.md)
diff --git a/docs/apis/defeffect.md b/docs/apis/defeffect.md
index 00b9d7d..33bc815 100644
--- a/docs/apis/defeffect.md
+++ b/docs/apis/defeffect.md
@@ -1,3 +1,15 @@
+---
+title: "defeffect"
+scope: "module"
+kind: "reference"
+category: "reference"
+aliases:
+  - "respo.core/defeffect"
+entry_for:
+  - "define effect"
+  - "effect hook"
+---
+
 ## `defeffect`
 
 **📚 Documentation Index**
diff --git a/docs/apis/div.md b/docs/apis/div.md
index 93df454..978f998 100644
--- a/docs/apis/div.md
+++ b/docs/apis/div.md
@@ -1,3 +1,15 @@
+---
+title: "div"
+scope: "module"
+kind: "reference"
+category: "reference"
+aliases:
+  - "respo.core/div"
+entry_for:
+  - "div element"
+  - "dom macro"
+---
+
 ## `div`
 
 **📚 Documentation Index**
diff --git a/docs/apis/expand-tag.md b/docs/apis/expand-tag.md
index 08d67ef..54c5ed5 100644
--- a/docs/apis/expand-tag.md
+++ b/docs/apis/expand-tag.md
@@ -1,3 +1,19 @@
+---
+title: "<>"
+scope: "module"
+kind: "reference"
+category: "reference"
+aliases:
+  - "expand-tag"
+  - "respo.core/<>"
+  - "<>"
+  - "text component"
+entry_for:
+  - "text macro"
+  - "span shorthand"
+  - "render text"
+---
+
 ## `<>`
 
 This macro expands
diff --git a/docs/apis/find-element-diffs.md b/docs/apis/find-element-diffs.md
index 6020654..ab5efc1 100644
--- a/docs/apis/find-element-diffs.md
+++ b/docs/apis/find-element-diffs.md
@@ -1,3 +1,14 @@
+---
+title: "find-element-diffs"
+scope: "module"
+kind: "reference"
+category: "reference"
+aliases:
+  - "respo.core/find-element-diffs"
+entry_for:
+  - "virtual dom diff"
+---
+
 ## `find-element-diffs`
 
 Find diffs of virtual DOMs.
diff --git a/docs/apis/list->.md b/docs/apis/list->.md
index 479a2ba..397295f 100644
--- a/docs/apis/list->.md
+++ b/docs/apis/list->.md
@@ -1,3 +1,15 @@
+---
+title: "list->"
+scope: "module"
+kind: "reference"
+category: "reference"
+aliases:
+  - "respo.core/list->"
+entry_for:
+  - "render list"
+  - "keyed children"
+---
+
 ## `list->`
 
 A macro for rendering lists:
diff --git a/docs/apis/make-html.md b/docs/apis/make-html.md
index 21c0414..5fd46c6 100644
--- a/docs/apis/make-html.md
+++ b/docs/apis/make-html.md
@@ -1,3 +1,15 @@
+---
+title: "make-html"
+scope: "module"
+kind: "reference"
+category: "reference"
+aliases:
+  - "respo.core/make-html"
+entry_for:
+  - "html output"
+  - "template engine"
+---
+
 ## `make-html`
 
 Generate HTML from virtual DOM:
diff --git a/docs/apis/make-string.md b/docs/apis/make-string.md
index 37d799b..a67a121 100644
--- a/docs/apis/make-string.md
+++ b/docs/apis/make-string.md
@@ -1,3 +1,15 @@
+---
+title: "make-string"
+scope: "module"
+kind: "reference"
+category: "reference"
+aliases:
+  - "respo.core/make-string"
+entry_for:
+  - "stringify html"
+  - "ssr markup"
+---
+
 ## `make-string`
 
 Generate HTML from a virtual DOM. Stringified HTML contains a lot of markups, such as `:data-coord`:
diff --git a/docs/apis/mute-element.md b/docs/apis/mute-element.md
index b9c6ad1..79428a7 100644
--- a/docs/apis/mute-element.md
+++ b/docs/apis/mute-element.md
@@ -1,3 +1,15 @@
+---
+title: "mute-element"
+scope: "module"
+kind: "reference"
+category: "reference"
+aliases:
+  - "respo.core/mute-element"
+entry_for:
+  - "remove events"
+  - "mute vnode"
+---
+
 ## `mute-element`
 
 This function removes events from a virtual DOM tree:
diff --git a/docs/apis/patch-instance.md b/docs/apis/patch-instance.md
index 393e55c..f6d5842 100644
--- a/docs/apis/patch-instance.md
+++ b/docs/apis/patch-instance.md
@@ -1,3 +1,15 @@
+---
+title: "patch-instance"
+scope: "module"
+kind: "reference"
+category: "reference"
+aliases:
+  - "respo.core/patch-instance"
+entry_for:
+  - "update instance"
+  - "patch vnode"
+---
+
 ## `patch-instance`
 
 Update based on virtual DOM.
diff --git a/docs/apis/pick-states.md b/docs/apis/pick-states.md
index bf29064..305f44c 100644
--- a/docs/apis/pick-states.md
+++ b/docs/apis/pick-states.md
@@ -1,5 +1,29 @@
+---
+title: ">>"
+scope: "module"
+kind: "reference"
+category: "reference"
+aliases:
+  - "pick-states"
+  - "respo.core/>>"
+  - ">>"
+  - "states cursor"
+  - "state cursor"
+  - "local state"
+  - ">> states"
+entry_for:
+  - "state cursor"
+  - "branch states"
+  - "local states"
+  - "cursor path"
+---
+
 ## `>>`
 
+## State cursor
+
+`>>` creates a state cursor for a nested branch so a child component can manage its own local state.
+
 Creating a branch of states, as well as a new cursor:
 
 ```cirru
diff --git a/docs/apis/purify-element.md b/docs/apis/purify-element.md
index b9e0d1e..56d2158 100644
--- a/docs/apis/purify-element.md
+++ b/docs/apis/purify-element.md
@@ -1,3 +1,15 @@
+---
+title: "purify-element"
+scope: "module"
+kind: "reference"
+category: "reference"
+aliases:
+  - "respo.core/purify-element"
+entry_for:
+  - "flatten events"
+  - "serialize vnode"
+---
+
 ## `purify-element`
 
 This function flattens `:data-events` in the virtual DOM tree:
diff --git a/docs/apis/realize-ssr_.md b/docs/apis/realize-ssr_.md
index 6a81645..db5e8e4 100644
--- a/docs/apis/realize-ssr_.md
+++ b/docs/apis/realize-ssr_.md
@@ -1,3 +1,16 @@
+---
+title: "realize-ssr!"
+scope: "module"
+kind: "reference"
+category: "reference"
+aliases:
+  - "realize-ssr_"
+  - "respo.core/realize-ssr!"
+entry_for:
+  - "progressive ssr"
+  - "hydrate ssr"
+---
+
 ## `realize-ssr!`
 
 This one is complicated. I wrote [a long post before trying to explain this new feature][progressive].
diff --git a/docs/apis/render!.md b/docs/apis/render!.md
index f8457f0..8781377 100644
--- a/docs/apis/render!.md
+++ b/docs/apis/render!.md
@@ -1,3 +1,18 @@
+---
+title: "render!"
+scope: "module"
+kind: "reference"
+category: "reference"
+aliases:
+  - "respo.core/render!"
+  - "rerender app"
+  - "mount app"
+entry_for:
+  - "render app"
+  - "mount pointer"
+  - "update dom"
+---
+
 ## `render!`
 
 **📚 Documentation Index**
diff --git a/docs/apis/render-app.md b/docs/apis/render-app.md
index dc0e6ff..149fbe0 100644
--- a/docs/apis/render-app.md
+++ b/docs/apis/render-app.md
@@ -1,3 +1,15 @@
+---
+title: "render-app"
+scope: "module"
+kind: "reference"
+category: "reference"
+aliases:
+  - "respo.core/render-app"
+entry_for:
+  - "render virtual dom"
+  - "cached render"
+---
+
 ## `render-app`
 
 This function renders virtual DOM markups into virtual DOM data:
diff --git a/docs/beginner-guide.md b/docs/beginner-guide.md
index 207f804..6dfd706 100644
--- a/docs/beginner-guide.md
+++ b/docs/beginner-guide.md
@@ -1,3 +1,17 @@
+---
+title: "Respo Beginner Guide"
+scope: "module"
+kind: "guide"
+category: "intro"
+aliases:
+  - "beginner guide"
+  - "getting started"
+  - "quick start"
+entry_for:
+  - "start respo"
+  - "learn respo"
+---
+
 ## Respo Beginner Guide
 
 **📚 Documentation Index**
diff --git a/docs/guide/base-components.md b/docs/guide/base-components.md
index d51149e..c4d6960 100644
--- a/docs/guide/base-components.md
+++ b/docs/guide/base-components.md
@@ -1,3 +1,16 @@
+---
+title: "Base components"
+scope: "module"
+kind: "guide"
+category: "ecosystem"
+aliases:
+  - "base components"
+  - "built-in components"
+entry_for:
+  - "component library"
+  - "respo components"
+---
+
 ## Base components
 
 **📚 Documentation Index**
@@ -35,8 +48,8 @@ It's tricky to listen to global events since Respo does not allow `useEffect` or
 respo.comp.global-keydown :refer $ comp-global-keydown
 
 comp-global-keydown
-  {} $ :disabled-commands (#{} "\"s" "\"p")
-  fn (e d!) (js/console.log "\"keydown" e)
+  {} $ :disabled-commands (#{} |s |p)
+  fn (e d!) (js/console.log |keydown e)
 ```
 
 Internally it listens events on `window` and dispatches events to a `<span/>` element.
diff --git a/docs/guide/component-states.md b/docs/guide/component-states.md
index 9b48918..4e1a901 100644
--- a/docs/guide/component-states.md
+++ b/docs/guide/component-states.md
@@ -1,5 +1,27 @@
+---
+title: "Component States"
+scope: "module"
+kind: "guide"
+category: "ecosystem"
+aliases:
+  - "component states"
+  - "state tree"
+  - "local states"
+  - "state cursor"
+  - ">> states"
+entry_for:
+  - "local state"
+  - "state cursor"
+  - "pick-states"
+  - "hot swapping states"
+---
+
 ## Component States
 
+## Local state and state cursor
+
+Interactive components usually pass `states` downward and branch it with `>>` to keep local state isolated.
+
 **📚 Documentation Index**
 
 - [← Back to README](../../README.md)
diff --git a/docs/guide/dom-elements.md b/docs/guide/dom-elements.md
index 32c72de..595d764 100644
--- a/docs/guide/dom-elements.md
+++ b/docs/guide/dom-elements.md
@@ -1,3 +1,16 @@
+---
+title: "DOM elements"
+scope: "module"
+kind: "guide"
+category: "ecosystem"
+aliases:
+  - "dom elements"
+  - "html elements"
+entry_for:
+  - "element syntax"
+  - "create dom"
+---
+
 ## DOM elements
 
 **📚 Documentation Index**
diff --git a/docs/guide/dom-events.md b/docs/guide/dom-events.md
index 8b889a5..418ef08 100644
--- a/docs/guide/dom-events.md
+++ b/docs/guide/dom-events.md
@@ -1,3 +1,16 @@
+---
+title: "DOM events"
+scope: "module"
+kind: "guide"
+category: "ecosystem"
+aliases:
+  - "dom events"
+  - "event handling"
+entry_for:
+  - "input events"
+  - "event props"
+---
+
 ## DOM events
 
 **📚 Documentation Index**
diff --git a/docs/guide/dom-properties.md b/docs/guide/dom-properties.md
index 3e6fcb5..5a7351c 100644
--- a/docs/guide/dom-properties.md
+++ b/docs/guide/dom-properties.md
@@ -1,3 +1,19 @@
+---
+title: "DOM properties"
+scope: "module"
+kind: "guide"
+category: "ecosystem"
+aliases:
+  - "dom properties"
+  - "props mapping"
+  - "dom props"
+  - ":class-name"
+entry_for:
+  - "class-name"
+  - "property naming"
+  - "dom attributes"
+---
+
 ## DOM properties
 
 **📚 Documentation Index**
diff --git a/docs/guide/hot-swapping.md b/docs/guide/hot-swapping.md
index ec95bfe..ceb75bb 100644
--- a/docs/guide/hot-swapping.md
+++ b/docs/guide/hot-swapping.md
@@ -1,3 +1,16 @@
+---
+title: "Hot swapping"
+scope: "module"
+kind: "guide"
+category: "ecosystem"
+aliases:
+  - "hot swapping"
+  - "hot reload"
+entry_for:
+  - "clear-cache!"
+  - "reload components"
+---
+
 ## Hot swapping
 
 **📚 Documentation Index**
diff --git a/docs/guide/pros-and-cons.md b/docs/guide/pros-and-cons.md
index 497d3d4..ed933c9 100644
--- a/docs/guide/pros-and-cons.md
+++ b/docs/guide/pros-and-cons.md
@@ -1,3 +1,16 @@
+---
+title: "Pros and Cons"
+scope: "module"
+kind: "guide"
+category: "intro"
+aliases:
+  - "pros and cons"
+  - "tradeoffs"
+entry_for:
+  - "why choose respo"
+  - "limitations"
+---
+
 ## Pros and Cons
 
 **📚 Documentation Index**
diff --git a/docs/guide/render-list.md b/docs/guide/render-list.md
index 33f0846..b73c45a 100644
--- a/docs/guide/render-list.md
+++ b/docs/guide/render-list.md
@@ -1,3 +1,16 @@
+---
+title: "Render list"
+scope: "module"
+kind: "guide"
+category: "ecosystem"
+aliases:
+  - "render list"
+  - "list rendering"
+entry_for:
+  - "list->"
+  - "keyed list"
+---
+
 ## Render list
 
 **📚 Documentation Index**
diff --git a/docs/guide/server-rendering.md b/docs/guide/server-rendering.md
index 27fe28d..7a5865a 100644
--- a/docs/guide/server-rendering.md
+++ b/docs/guide/server-rendering.md
@@ -1,3 +1,20 @@
+---
+title: "Server Rendering"
+scope: "module"
+kind: "guide"
+category: "ecosystem"
+aliases:
+  - "server rendering"
+  - "SSR"
+  - "server side rendering"
+  - "ssr"
+entry_for:
+  - "make-string"
+  - "realize-ssr!"
+  - "first screen html"
+  - "hydrate app"
+---
+
 For more details please read <https://github.com/Respo/ssr-stages>
 
 ### Rendering assumptions
diff --git a/docs/guide/styles.md b/docs/guide/styles.md
index 90afab3..2fca3ee 100644
--- a/docs/guide/styles.md
+++ b/docs/guide/styles.md
@@ -1,5 +1,31 @@
+---
+title: "Styles"
+scope: "module"
+kind: "guide"
+category: "ecosystem"
+aliases:
+  - "styles"
+  - "defstyle"
+  - "respo.css/defstyle"
+  - "defstyle guide"
+  - "class-name"
+  - ":class-name"
+  - "inline style"
+  - "style map"
+entry_for:
+  - "defstyle"
+  - "css"
+  - "style map"
+  - "static styles"
+  - "style extraction"
+---
+
 ## Styles
 
+## defstyle
+
+Use `defstyle` for static reusable styles, and combine it with `:class-name` on elements.
+
 **📚 Documentation Index**
 
 - [← Back to README](../../README.md)
@@ -61,7 +87,7 @@ define style:
 
 ```cirru
 defstyle style-input $ {}
-  "\"$0" $ {} (:font-size |16px)
+  |& $ {} (:font-size |16px)
     :line-height |24px
     :padding "|0px 8px"
     :outline :none
@@ -70,10 +96,93 @@ defstyle style-input $ {}
     :border :none
 ```
 
-`$0` will be replace by a string of `className`. So if you want to add rules for `:hover`, just write `$0:hover`.
+Use string selectors such as `|&`, `|&:hover`, or `|input&`. Avoid writing bare symbol `&` as the selector key in `defstyle`.
+
+#### When to use `defstyle`
+
+`defstyle` works best for static styles: fixed font sizes, colors, gaps, borders, paddings, hover rules, and reusable layout rules.
+Keep runtime-dependent values in `:style`, for example dynamic width, position, height, or values computed from state.
+
+```cirru
+defstyle style-card $ {}
+  |& $ {} (:padding |12px 16px)
+    :border-radius |12px
+    :background-color $ hsl 0 0 100
+
+div $ {}
+  :class-name style-card
+  :style $ {}
+    :width $ &max 200
+      + 24 $ text-width title 16 |BlinkMacSystemFont
+```
+
+#### Extract from `:style`
+
+When moving an inline style map into `defstyle`, keep the change mechanical:
+
+1. locate the target props node;
+2. extract only the static style map;
+3. wrap the extracted map with `defstyle` using `|&` as the selector key;
+4. replace the original `:style` usage with `:class-name`.
+
+```cirru
+div $ {}
+  :class-name $ str-spaced css/row style-preview-row
+```
+
+```cirru
+defstyle style-preview-row $ {}
+  |& $ {} (:gap |8px) (:flex-wrap :wrap)
+    :align-items :flex-start
+```
+
+Be careful with string values like `|4px 10px`, `|1px solid `, or long text literals. If the code is generated or transformed by CLI tools, prefer the exact serialized form that the tool prints, instead of hand-editing token boundaries.
+
+#### Calcit CLI workflow
+
+When the source is stored in `compact.cirru`, a stable workflow is:
+
+```bash
+# 1. locate the inline style leaf
+cr query search ':style' -f app.comp.container/comp-env-card
+
+# 2. inspect the surrounding props and find the actual style map path
+cr tree show app.comp.container/comp-env-card -p '3.2.4.2'
+
+# 3. extract the style map itself, not the :style leaf
+cr edit split-def app.comp.container/comp-env-card -p '3.2.4.2.1.2.1' -n style-env-card-preview
+```
+
+After extraction, the new definition is often still a raw map. Wrap it into a `defstyle` definition:
+
+```bash
+cr query def app.comp.container/style-env-card-preview
+```
+
+If the style contains tricky string values, prefer a snippet file instead of shell inline code:
+
+```bash
+cr edit def app.comp.container/style-env-card-preview --overwrite -f .calcit-snippets/style-env-card-preview.cirru
+```
+
+Then switch the original node from `:style` to `:class-name`:
+
+```bash
+cr tree replace app.comp.container/comp-env-card -p '3.2.4.2.1' -e '{}
+  :class-name $ str-spaced css/row-middle css/gap8 style-env-card-preview'
+```
+
+Validate the extraction after each batch:
+
+```bash
+cr query search ':style' -f app.comp.container/comp-env-card
+cr js
+```
+
+`|&` will be replace by a string of `className`. So if you want to add rules for `:hover`, use the string selector `|&:hover`.
 
 ```cirru
-input $ {} (:placeholder "\"Text")
+input $ {} (:placeholder "|Text")
   :value $ :draft state
   :class-name style-input
   :style $ {}
diff --git a/docs/guide/virtual-dom.md b/docs/guide/virtual-dom.md
index 5f45fb6..bd47993 100644
--- a/docs/guide/virtual-dom.md
+++ b/docs/guide/virtual-dom.md
@@ -1,3 +1,16 @@
+---
+title: "Virtual DOM"
+scope: "module"
+kind: "guide"
+category: "ecosystem"
+aliases:
+  - "virtual dom"
+  - "vdom"
+entry_for:
+  - "element tree"
+  - "virtual nodes"
+---
+
 ## Virtual DOM
 
 **📚 Documentation Index**
diff --git a/docs/guide/why-respo.md b/docs/guide/why-respo.md
index 8a69bd4..40ee3da 100644
--- a/docs/guide/why-respo.md
+++ b/docs/guide/why-respo.md
@@ -1,3 +1,16 @@
+---
+title: "Why Respo"
+scope: "module"
+kind: "guide"
+category: "intro"
+aliases:
+  - "why respo"
+  - "introduction"
+entry_for:
+  - "what is respo"
+  - "respo overview"
+---
+
 ## Why Respo
 
 **📚 Documentation Index**
diff --git a/package.json b/package.json
index e123697..a77d5d6 100644
--- a/package.json
+++ b/package.json
@@ -1,13 +1,13 @@
 {
   "dependencies": {
-    "@calcit/procs": "0.12.9"
+    "@calcit/procs": "0.12.14"
   },
   "scripts": {
     "test": "cr --init-fn 'respo.test.main/main!' js && node test.mjs"
   },
   "devDependencies": {
     "bottom-tip": "^0.1.5",
-    "vite": "^8.0.0"
+    "vite": "^8.0.3"
   },
   "packageManager": "yarn@4.12.0"
 }
diff --git a/yarn.lock b/yarn.lock
index 1c4b065..dad64c7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5,14 +5,14 @@ __metadata:
   version: 8
   cacheKey: 10c0
 
-"@calcit/procs@npm:0.12.9":
-  version: 0.12.9
-  resolution: "@calcit/procs@npm:0.12.9"
+"@calcit/procs@npm:0.12.14":
+  version: 0.12.14
+  resolution: "@calcit/procs@npm:0.12.14"
   dependencies:
     "@calcit/ternary-tree": "npm:0.0.25"
     "@cirru/parser.ts": "npm:^0.0.9"
     "@cirru/writer.ts": "npm:^0.1.7"
-  checksum: 10c0/505737046f3f4194e19542f1614779f77495b74169f832777f3d02360462d7902cb2d1853da4952848c772a41a63a56dc94676a505176ae63267300eda64d572
+  checksum: 10c0/2976708a64b2ae844f4b45a1f79de2e87f2a92f63376e26c5d7e410e06246a1eefa375046762de99686e9d38a828488c453a20e8b7c321f45183e31f29f469b1
   languageName: node
   linkType: hard
 
@@ -123,131 +123,124 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxc-project/runtime@npm:0.115.0":
-  version: 0.115.0
-  resolution: "@oxc-project/runtime@npm:0.115.0"
-  checksum: 10c0/88905181724fcad06d2852969e706a25a7b6c4fadac22dd6aece24b882a947eda7487451e0824781c9dc87b40b2c6ee582790e47fec5a9ba5d27c6e8c6c35bc1
+"@oxc-project/types@npm:=0.122.0":
+  version: 0.122.0
+  resolution: "@oxc-project/types@npm:0.122.0"
+  checksum: 10c0/2c64dd0db949426fd0c86d4f61eded5902e7b7b166356a825bd3a248aeaa29a495f78918f66ab78e99644b67bd7556096e2a8123cec74ca4141c604f424f4f74
   languageName: node
   linkType: hard
 
-"@oxc-project/types@npm:=0.115.0":
-  version: 0.115.0
-  resolution: "@oxc-project/types@npm:0.115.0"
-  checksum: 10c0/47fc31eb3fb3fcf4119955339f92ba2003f9b445834c1a28ed945cd6b9cd833c7ba66fca88aa5277336c2c55df300a593bc67970e544691eceaa486ebe12cb58
-  languageName: node
-  linkType: hard
-
-"@rolldown/binding-android-arm64@npm:1.0.0-rc.9":
-  version: 1.0.0-rc.9
-  resolution: "@rolldown/binding-android-arm64@npm:1.0.0-rc.9"
+"@rolldown/binding-android-arm64@npm:1.0.0-rc.12":
+  version: 1.0.0-rc.12
+  resolution: "@rolldown/binding-android-arm64@npm:1.0.0-rc.12"
   conditions: os=android & cpu=arm64
   languageName: node
   linkType: hard
 
-"@rolldown/binding-darwin-arm64@npm:1.0.0-rc.9":
-  version: 1.0.0-rc.9
-  resolution: "@rolldown/binding-darwin-arm64@npm:1.0.0-rc.9"
+"@rolldown/binding-darwin-arm64@npm:1.0.0-rc.12":
+  version: 1.0.0-rc.12
+  resolution: "@rolldown/binding-darwin-arm64@npm:1.0.0-rc.12"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"@rolldown/binding-darwin-x64@npm:1.0.0-rc.9":
-  version: 1.0.0-rc.9
-  resolution: "@rolldown/binding-darwin-x64@npm:1.0.0-rc.9"
+"@rolldown/binding-darwin-x64@npm:1.0.0-rc.12":
+  version: 1.0.0-rc.12
+  resolution: "@rolldown/binding-darwin-x64@npm:1.0.0-rc.12"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"@rolldown/binding-freebsd-x64@npm:1.0.0-rc.9":
-  version: 1.0.0-rc.9
-  resolution: "@rolldown/binding-freebsd-x64@npm:1.0.0-rc.9"
+"@rolldown/binding-freebsd-x64@npm:1.0.0-rc.12":
+  version: 1.0.0-rc.12
+  resolution: "@rolldown/binding-freebsd-x64@npm:1.0.0-rc.12"
   conditions: os=freebsd & cpu=x64
   languageName: node
   linkType: hard
 
-"@rolldown/binding-linux-arm-gnueabihf@npm:1.0.0-rc.9":
-  version: 1.0.0-rc.9
-  resolution: "@rolldown/binding-linux-arm-gnueabihf@npm:1.0.0-rc.9"
+"@rolldown/binding-linux-arm-gnueabihf@npm:1.0.0-rc.12":
+  version: 1.0.0-rc.12
+  resolution: "@rolldown/binding-linux-arm-gnueabihf@npm:1.0.0-rc.12"
   conditions: os=linux & cpu=arm
   languageName: node
   linkType: hard
 
-"@rolldown/binding-linux-arm64-gnu@npm:1.0.0-rc.9":
-  version: 1.0.0-rc.9
-  resolution: "@rolldown/binding-linux-arm64-gnu@npm:1.0.0-rc.9"
+"@rolldown/binding-linux-arm64-gnu@npm:1.0.0-rc.12":
+  version: 1.0.0-rc.12
+  resolution: "@rolldown/binding-linux-arm64-gnu@npm:1.0.0-rc.12"
   conditions: os=linux & cpu=arm64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@rolldown/binding-linux-arm64-musl@npm:1.0.0-rc.9":
-  version: 1.0.0-rc.9
-  resolution: "@rolldown/binding-linux-arm64-musl@npm:1.0.0-rc.9"
+"@rolldown/binding-linux-arm64-musl@npm:1.0.0-rc.12":
+  version: 1.0.0-rc.12
+  resolution: "@rolldown/binding-linux-arm64-musl@npm:1.0.0-rc.12"
   conditions: os=linux & cpu=arm64 & libc=musl
   languageName: node
   linkType: hard
 
-"@rolldown/binding-linux-ppc64-gnu@npm:1.0.0-rc.9":
-  version: 1.0.0-rc.9
-  resolution: "@rolldown/binding-linux-ppc64-gnu@npm:1.0.0-rc.9"
+"@rolldown/binding-linux-ppc64-gnu@npm:1.0.0-rc.12":
+  version: 1.0.0-rc.12
+  resolution: "@rolldown/binding-linux-ppc64-gnu@npm:1.0.0-rc.12"
   conditions: os=linux & cpu=ppc64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@rolldown/binding-linux-s390x-gnu@npm:1.0.0-rc.9":
-  version: 1.0.0-rc.9
-  resolution: "@rolldown/binding-linux-s390x-gnu@npm:1.0.0-rc.9"
+"@rolldown/binding-linux-s390x-gnu@npm:1.0.0-rc.12":
+  version: 1.0.0-rc.12
+  resolution: "@rolldown/binding-linux-s390x-gnu@npm:1.0.0-rc.12"
   conditions: os=linux & cpu=s390x & libc=glibc
   languageName: node
   linkType: hard
 
-"@rolldown/binding-linux-x64-gnu@npm:1.0.0-rc.9":
-  version: 1.0.0-rc.9
-  resolution: "@rolldown/binding-linux-x64-gnu@npm:1.0.0-rc.9"
+"@rolldown/binding-linux-x64-gnu@npm:1.0.0-rc.12":
+  version: 1.0.0-rc.12
+  resolution: "@rolldown/binding-linux-x64-gnu@npm:1.0.0-rc.12"
   conditions: os=linux & cpu=x64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@rolldown/binding-linux-x64-musl@npm:1.0.0-rc.9":
-  version: 1.0.0-rc.9
-  resolution: "@rolldown/binding-linux-x64-musl@npm:1.0.0-rc.9"
+"@rolldown/binding-linux-x64-musl@npm:1.0.0-rc.12":
+  version: 1.0.0-rc.12
+  resolution: "@rolldown/binding-linux-x64-musl@npm:1.0.0-rc.12"
   conditions: os=linux & cpu=x64 & libc=musl
   languageName: node
   linkType: hard
 
-"@rolldown/binding-openharmony-arm64@npm:1.0.0-rc.9":
-  version: 1.0.0-rc.9
-  resolution: "@rolldown/binding-openharmony-arm64@npm:1.0.0-rc.9"
+"@rolldown/binding-openharmony-arm64@npm:1.0.0-rc.12":
+  version: 1.0.0-rc.12
+  resolution: "@rolldown/binding-openharmony-arm64@npm:1.0.0-rc.12"
   conditions: os=openharmony & cpu=arm64
   languageName: node
   linkType: hard
 
-"@rolldown/binding-wasm32-wasi@npm:1.0.0-rc.9":
-  version: 1.0.0-rc.9
-  resolution: "@rolldown/binding-wasm32-wasi@npm:1.0.0-rc.9"
+"@rolldown/binding-wasm32-wasi@npm:1.0.0-rc.12":
+  version: 1.0.0-rc.12
+  resolution: "@rolldown/binding-wasm32-wasi@npm:1.0.0-rc.12"
   dependencies:
     "@napi-rs/wasm-runtime": "npm:^1.1.1"
   conditions: cpu=wasm32
   languageName: node
   linkType: hard
 
-"@rolldown/binding-win32-arm64-msvc@npm:1.0.0-rc.9":
-  version: 1.0.0-rc.9
-  resolution: "@rolldown/binding-win32-arm64-msvc@npm:1.0.0-rc.9"
+"@rolldown/binding-win32-arm64-msvc@npm:1.0.0-rc.12":
+  version: 1.0.0-rc.12
+  resolution: "@rolldown/binding-win32-arm64-msvc@npm:1.0.0-rc.12"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
 
-"@rolldown/binding-win32-x64-msvc@npm:1.0.0-rc.9":
-  version: 1.0.0-rc.9
-  resolution: "@rolldown/binding-win32-x64-msvc@npm:1.0.0-rc.9"
+"@rolldown/binding-win32-x64-msvc@npm:1.0.0-rc.12":
+  version: 1.0.0-rc.12
+  resolution: "@rolldown/binding-win32-x64-msvc@npm:1.0.0-rc.12"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
 
-"@rolldown/pluginutils@npm:1.0.0-rc.9":
-  version: 1.0.0-rc.9
-  resolution: "@rolldown/pluginutils@npm:1.0.0-rc.9"
-  checksum: 10c0/fca488fb96b134ccf95b42632b6112b4abb8b3a9688f166fbd627410def2538ee201953717d234ddecbff62dfe4edc4e72c657b01a9d0750134608d767eea5fd
+"@rolldown/pluginutils@npm:1.0.0-rc.12":
+  version: 1.0.0-rc.12
+  resolution: "@rolldown/pluginutils@npm:1.0.0-rc.12"
+  checksum: 10c0/f785d1180ea4876bf6a6a67135822808d1c07f902409524ff1088779f7d5318f6e603d281fb107a5145c1ca54b7cabebd359629ec474ebbc2812f2cf53db4023
   languageName: node
   linkType: hard
 
@@ -880,6 +873,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"picomatch@npm:^4.0.4":
+  version: 4.0.4
+  resolution: "picomatch@npm:4.0.4"
+  checksum: 10c0/e2c6023372cc7b5764719a5ffb9da0f8e781212fa7ca4bd0562db929df8e117460f00dff3cb7509dacfc06b86de924b247f504d0ce1806a37fac4633081466b0
+  languageName: node
+  linkType: hard
+
 "postcss@npm:^8.5.8":
   version: 8.5.8
   resolution: "postcss@npm:8.5.8"
@@ -922,27 +922,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rolldown@npm:1.0.0-rc.9":
-  version: 1.0.0-rc.9
-  resolution: "rolldown@npm:1.0.0-rc.9"
+"rolldown@npm:1.0.0-rc.12":
+  version: 1.0.0-rc.12
+  resolution: "rolldown@npm:1.0.0-rc.12"
   dependencies:
-    "@oxc-project/types": "npm:=0.115.0"
-    "@rolldown/binding-android-arm64": "npm:1.0.0-rc.9"
-    "@rolldown/binding-darwin-arm64": "npm:1.0.0-rc.9"
-    "@rolldown/binding-darwin-x64": "npm:1.0.0-rc.9"
-    "@rolldown/binding-freebsd-x64": "npm:1.0.0-rc.9"
-    "@rolldown/binding-linux-arm-gnueabihf": "npm:1.0.0-rc.9"
-    "@rolldown/binding-linux-arm64-gnu": "npm:1.0.0-rc.9"
-    "@rolldown/binding-linux-arm64-musl": "npm:1.0.0-rc.9"
-    "@rolldown/binding-linux-ppc64-gnu": "npm:1.0.0-rc.9"
-    "@rolldown/binding-linux-s390x-gnu": "npm:1.0.0-rc.9"
-    "@rolldown/binding-linux-x64-gnu": "npm:1.0.0-rc.9"
-    "@rolldown/binding-linux-x64-musl": "npm:1.0.0-rc.9"
-    "@rolldown/binding-openharmony-arm64": "npm:1.0.0-rc.9"
-    "@rolldown/binding-wasm32-wasi": "npm:1.0.0-rc.9"
-    "@rolldown/binding-win32-arm64-msvc": "npm:1.0.0-rc.9"
-    "@rolldown/binding-win32-x64-msvc": "npm:1.0.0-rc.9"
-    "@rolldown/pluginutils": "npm:1.0.0-rc.9"
+    "@oxc-project/types": "npm:=0.122.0"
+    "@rolldown/binding-android-arm64": "npm:1.0.0-rc.12"
+    "@rolldown/binding-darwin-arm64": "npm:1.0.0-rc.12"
+    "@rolldown/binding-darwin-x64": "npm:1.0.0-rc.12"
+    "@rolldown/binding-freebsd-x64": "npm:1.0.0-rc.12"
+    "@rolldown/binding-linux-arm-gnueabihf": "npm:1.0.0-rc.12"
+    "@rolldown/binding-linux-arm64-gnu": "npm:1.0.0-rc.12"
+    "@rolldown/binding-linux-arm64-musl": "npm:1.0.0-rc.12"
+    "@rolldown/binding-linux-ppc64-gnu": "npm:1.0.0-rc.12"
+    "@rolldown/binding-linux-s390x-gnu": "npm:1.0.0-rc.12"
+    "@rolldown/binding-linux-x64-gnu": "npm:1.0.0-rc.12"
+    "@rolldown/binding-linux-x64-musl": "npm:1.0.0-rc.12"
+    "@rolldown/binding-openharmony-arm64": "npm:1.0.0-rc.12"
+    "@rolldown/binding-wasm32-wasi": "npm:1.0.0-rc.12"
+    "@rolldown/binding-win32-arm64-msvc": "npm:1.0.0-rc.12"
+    "@rolldown/binding-win32-x64-msvc": "npm:1.0.0-rc.12"
+    "@rolldown/pluginutils": "npm:1.0.0-rc.12"
   dependenciesMeta:
     "@rolldown/binding-android-arm64":
       optional: true
@@ -976,7 +976,7 @@ __metadata:
       optional: true
   bin:
     rolldown: bin/cli.mjs
-  checksum: 10c0/d19af14dccf569dc25c0c3c2f1142b7a6f7cec291d55bba80cea71099f89c6d634145bb1b6487626ddd41d578f183f7065ed68067e49d2b964ad6242693b0f79
+  checksum: 10c0/0c4e5e3cdcdddce282cb2d84e1c98d6ad8d4e452d5c1402e498b35ec1060026e552dd783efc9f4ba876d7c0863b5973edc79b6a546f565e9832dc1077ec18c2c
   languageName: node
   linkType: hard
 
@@ -984,9 +984,9 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "root-workspace-0b6124@workspace:."
   dependencies:
-    "@calcit/procs": "npm:0.12.9"
+    "@calcit/procs": "npm:0.12.14"
     bottom-tip: "npm:^0.1.5"
-    vite: "npm:^8.0.0"
+    vite: "npm:^8.0.3"
   languageName: unknown
   linkType: soft
 
@@ -1121,20 +1121,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite@npm:^8.0.0":
-  version: 8.0.0
-  resolution: "vite@npm:8.0.0"
+"vite@npm:^8.0.3":
+  version: 8.0.3
+  resolution: "vite@npm:8.0.3"
   dependencies:
-    "@oxc-project/runtime": "npm:0.115.0"
     fsevents: "npm:~2.3.3"
     lightningcss: "npm:^1.32.0"
-    picomatch: "npm:^4.0.3"
+    picomatch: "npm:^4.0.4"
     postcss: "npm:^8.5.8"
-    rolldown: "npm:1.0.0-rc.9"
+    rolldown: "npm:1.0.0-rc.12"
     tinyglobby: "npm:^0.2.15"
   peerDependencies:
     "@types/node": ^20.19.0 || >=22.12.0
-    "@vitejs/devtools": ^0.0.0-alpha.31
+    "@vitejs/devtools": ^0.1.0
     esbuild: ^0.27.0
     jiti: ">=1.21.0"
     less: ^4.0.0
@@ -1175,7 +1174,7 @@ __metadata:
       optional: true
   bin:
     vite: bin/vite.js
-  checksum: 10c0/2246d3d54788dcd53c39da82da3f934a760756642ba9a575c84c5ef9f310bc47697f7f9fde6721fa566675e93e408736b4ac068008d2ddbd75b0ed99c7fd4c67
+  checksum: 10c0/bed9520358080393a02fe22565b3309b4b3b8f916afe4c97577528f3efb05c1bf4b29f7b552179bc5b3938629e50fbd316231727457411dbc96648fa5c9d14bf
   languageName: node
   linkType: hard