Respo · NoEgAm · Mar 10, 2026 · Jan 20, 2026 · Jan 20, 2026 · Jan 21, 2026
diff --git a/Agents.md b/Agents.md
diff --git a/calcit.cirru b/calcit.cirru
diff --git a/camel b/camel
diff --git a/compact.cirru b/compact.cirru
diff --git a/deps.cirru b/deps.cirru
@@ -1,5 +1,5 @@
 
-{} (:calcit-version |0.10.6)
+{} (:calcit-version |0.10.11)
   :dependencies $ {} (|calcit-lang/calcit-test |0.0.6)
     |calcit-lang/lilac |main
     |calcit-lang/memof |0.0.17
diff --git a/docs/Respo-Agent.md b/docs/Respo-Agent.md
@@ -266,18 +266,48 @@ cr libs readme respo
 caps
 ```
 
-### 7. Code Analysis
+### 7. Architectural Exploration (Structure & Patterns)
+
+To quickly understand a project's architecture, combine **Top-Down call graphs** with **Pattern-based structure search**.
+
+#### A. Top-Down: Call Graph Analysis
+
+Use `call-graph` to visualize the component tree and data flow starting from an entry point.
+
+```bash
+# Visualize the app structure from the render entry point
+cr analyze call-graph --root respo.app.core/render-app! --ns-prefix respo.app. --max-depth 3
+
+# This reveals the component hierarchy:
+# └── render-app!
+#     ├── comp-container
+#     │   ├── comp-todolist
+#     │   │   ├── comp-task
+#     │   │   └── comp-wrap
+#     └── dispatch! -> updater
+```
+
+#### B. Pattern-Based: Structure Search
+
+Use `search-expr` to find functional patterns (like state management or event handling) across the whole project.
 
 ```bash
-# Call graph analysis from init-fn (or custom root)
-cr analyze call-graph
-cr analyze call-graph --root app.main/main! --ns-prefix app. --include-core --max-depth 5 --format json
+# How is state being navigated?
+cr query search-expr '>> states' -l
 
-# Call count statistics
-cr analyze count-calls
-cr analyze count-calls --root app.main/main! --ns-prefix app. --include-core --format json --sort count
+# Where are local state changes dispatched?
+cr query search-expr 'd! cursor' -l
+
+# Find all component event handler signatures
+cr query search-expr 'fn (e d!)' -l
 ```
 
+**Strategy:**
+
+1. Use `call-graph` to find **WHO** calls **WHOM**.
+2. Use `search-expr` to find **HOW** certain features are implemented project-wide.
+3. Use `query usages` to find **WHERE** a specific function is integrated.
-1. Use `call-graph` to find **WHO** calls **WHOM**.
-2. Use `search-expr` to find **HOW** certain features are implemented project-wide.
-3. Use `query usages` to find **WHERE** a specific function is integrated.
+1. Start with `call-graph` to find **WHO** calls **WHOM**.
+2. Apply `search-expr` to see **HOW** features are implemented project-wide.
+3. Use `query usages` to locate **WHERE** a specific function is integrated.
-1. Use `call-graph` to find **WHO** calls **WHOM**.
-2. Use `search-expr` to find **HOW** certain features are implemented project-wide.
-3. Use `query usages` to find **WHERE** a specific function is integrated.
+1. Start with `call-graph` to find **WHO** calls **WHOM**.
+2. Apply `search-expr` to see **HOW** features are implemented project-wide.
+3. Use `query usages` to locate **WHERE** a specific function is integrated.
+
 ---
 
 ## Development Workflow for LLM Agents
@@ -449,6 +479,8 @@ list-> $ {}
 
 ### 5. Styling Pattern
 
+**A. Dynamic Inline Styles (Style Maps)**
+
 ```cirru
 ; Define styles as maps
 def style-container $ {}
@@ -469,6 +501,52 @@ let
   extended
 ```
 
+**B. Static CSS Styles with `defstyle` (Recommended for Performance)**
+
+`defstyle` is a macro that generates CSS classes and injects them into `<style>` tags. Use it for static styles that don't need runtime computation.
+
+```cirru
+; Import from respo.css
+ns my.namespace
+  :require (respo.css :refer $ defstyle)
+
+; Basic usage: & refers to current element
+defstyle style-button $ {}
+  |& $ {} (:padding "|8px 16px") (:border-radius "|4px")
+    :background-color $ hsl 200 80 50
+    :color "|white"
+
+; Pseudo-classes: :hover, :focus, :active, etc.
+defstyle style-link $ {}
+  |& $ {} (:color "|blue") (:text-decoration :none)
+  |&:hover $ {} (:text-decoration :underline)
+
+; Pseudo-elements: ::before, ::after
+defstyle style-text $ {}
+  |& $ {} (:font-size "|14px") (:line-height "|1.6")
+  |&::before $ {} (:content "|\"→ \"")
+
+; Media queries using 'contained
+defstyle style-responsive $ {}
+  |& $ {} (:font-family "|Avenir,Verdana")
+  |& $ {} ('contained "|@media only screen and (max-width: 600px)")
+    :background-color $ hsl 0 0 90
+
+; Usage in component (returns className string)
+div
+  {} $ :class-name style-button
+  <> "|Click Me"
+```
+
+**Key Points:**
+
+- `|&` refers to the current element (required)
+- Use string prefix `|` for CSS selectors like `|&:hover`, `|&::before`
+- `'contained` for media queries and container queries
+- `defstyle` generates unique class names automatically
+- Styles are injected into `<head>` before render
+- For SSR: read from `@*style-list-in-nodejs` to extract CSS
+
 **Testing Style to String Conversion:**
 
 ```bash
@@ -808,12 +886,10 @@ cr query ns namespace-name  # Check imports
 ### ⚠️ Critical Rules
 
 1. **NEVER directly edit `calcit.cirru` or `compact.cirru`** with text editors
-
    - Use `cr edit` commands instead
    - These are serialized AST structures, not human-readable code
 
 2. **ALWAYS use relative paths for documentation links**
-
    - Use `../` and `../../` for navigation
    - This allows easy file discovery for LLM tools
 

diff --git a/edn b/edn
diff --git a/package.json b/package.json
@@ -1,9 +1,9 @@
 {
   "dependencies": {
-    "@calcit/procs": "0.10.6"
+    "@calcit/procs": "0.10.11"
   },
   "scripts": {
-    "test": "cr --once --emit-js --init-fn=respo.test.main/main! && node test.mjs"
+    "test": "cr --once --init-fn 'respo.test.main/main!' js && node test.mjs"
   },
   "devDependencies": {
     "bottom-tip": "^0.1.5",