lego-dom 1.0.0 → 1.3.4

package/docs/contributing/12-render.md

@@ -20,16 +20,34 @@ const render = (el) => {
     if (!shadow) return;
     if (!data.bindings) data.bindings = scanForBindings(shadow);
 
+    if (config.metrics?.onRenderStart) config.metrics.onRenderStart(el);
+
     data.bindings.forEach(b => {
+      // 1. Conditionals (b-if)
+      if (b.type === 'b-if') {
+          const condition = !!safeEval(b.expr, { state, global: Lego.globals, self: b.node });
+          const isAttached = !!b.node.parentNode;
+          if (condition && !isAttached) b.anchor.parentNode.replaceChild(b.node, b.anchor);
+          else if (!condition && isAttached) b.node.parentNode.replaceChild(b.anchor, b.node);
+      }
+      
+      // 2. Visibility (b-show)
       if (b.type === 'b-show') b.node.style.display = safeEval(b.expr, { state, self: b.node }) ? '' : 'none';
+      
+      // 3. Text (b-text, b-html)
       if (b.type === 'b-text') b.node.textContent = escapeHTML(resolve(b.path, state));
+      if (b.type === 'b-html') b.node.innerHTML = safeEval(b.expr, { state, self: b.node }); // Trusted HTML
+      
+      // 4. Sync (b-sync)
       if (b.type === 'b-sync') syncModelValue(b.node, resolve(b.node.getAttribute('b-sync'), state));
+      
+      // 5. Mustaches 
       if (b.type === 'text') {
-        const out = b.template.replace(/{{(.*?)}}/g, (_, k) => escapeHTML(safeEval(k.trim(), { state, self: b.node }) ?? ''));
+        const out = b.template.replace(/\[\[(.*?)\]\]/g, (_, k) => escapeHTML(safeEval(k.trim(), { state, self: b.node }) ?? ''));
         if (b.node.textContent !== out) b.node.textContent = out;
       }
       if (b.type === 'attr') {
-        const out = b.template.replace(/{{(.*?)}}/g, (_, k) => escapeHTML(safeEval(k.trim(), { state, self: b.node }) ?? ''));
+        const out = b.template.replace(/\[\[(.*?)\]\]/g, (_, k) => escapeHTML(safeEval(k.trim(), { state, self: b.node }) ?? ''));
         if (b.node.getAttribute(b.attrName) !== out) {
           b.node.setAttribute(b.attrName, out);
           if (b.attrName === 'class') b.node.className = out;
@@ -69,8 +87,11 @@ const render = (el) => {
       }
     });
   } finally {
+  } finally {
+    if (config.metrics?.onRenderEnd) config.metrics.onRenderEnd(el);
     data.rendering = false;
   }
+  }
 };
 ```
 
@@ -96,16 +117,17 @@ The function loops through `data.bindings` and performs specific actions based o
 -   **`attr`**: It updates attributes like `src`, `href`, or `class`. It even has a special check: if the attribute is `class`, it also updates `node.className` to ensure the browser applies the styles correctly.
     
 
-### 3. The `safeEval` Bridge
+### 3. The `safeEval` Bridge & Security
 
-You’ll notice that for things like `b-show` or <code v-pre>{{mustaches}}</code>, the library calls `safeEval(expr, { state, self: b.node })`.
+You’ll notice that for things like `b-show` or mustaches, the library calls `safeEval(expr, { state, self: b.node })`.
 
--   This allows your HTML to handle more than just simple variables.
-    
--   You can write logic directly in your template, like <code v-pre>{{ count > 10 ? 'Big' : 'Small' }}</code>.
-    
--   `render` passes the current state as the "context," so those expressions know exactly what `count` refers to.
-    
+**Why not just `eval()`?**
+`eval()` executes code in the global scope, which is a massive security hole and performance killer.
+
+`safeEval` uses `new Function` with a **Proxy Sandbox**:
+1.  **Block List**: It immediately throws if it sees dangerous keywords like `eval`, `Function`, `import`, or global objects like `window`, `document`, `fetch` (unless explicitly provided).
+2.  **Scope Proxy**: The execution context is a `Proxy` (`with(proxy) { ... }`). If the code tries to access `document.cookie` effectively, the proxy intercepts it.
+3.  **Configurable Syntax**: As of v2.0, this also handles the dynamic regex for `[[ ]]` vs `{{ }}` support via `Lego.config.syntax`.
 
 ### 4. Directives vs. Mustache Priority
 

package/docs/contributing/13-directives.md

@@ -79,6 +79,24 @@ By using `getPrivateData` (which is a `WeakMap`), we ensure that if the componen
 **In short:** The anchor is the "Reserved Seat" sign at a theater. `getPrivateData` is the list that remembers which seat belongs to which person while they are out in the lobby.
 
 
+## Raw HTML Injection (`b-html`)
+
+LegoDOM is secure by default: all text interpolation is escaped. If your data contains `<b>Bold</b>`, it detects it as text, not HTML.
+
+`b-html` is the **only** hatch to render raw HTML.
+
+```javascript
+if (b.type === 'b-html') {
+    // SECURITY CRITICAL: This is the only place we set innerHTML directly.
+    b.node.innerHTML = safeEval(b.expr, { state, self: b.node });
+}
+```
+
+**Why separate directive?**
+By forcing you to use `b-html="..."`, we make it obvious during code reviews that "This part is dangerous." It prevents accidental XSS where a developer thought `{{ content }}` would render HTML.
+
+
+
 ## Simple Text Interpolation (`b-text`)
 
 While you can use <code v-pre>{{mustaches}}</code>, `b-text` is the "cleaner" way to bind the entire content of an element to a single variable.
@@ -109,7 +127,7 @@ Because both of these were "mapped" during the `scanForBindings` phase (Topic 11
 
 The library looks for the pattern `item in list` (e.g., `user in users`).
 
--   **Capture**: During the scanning phase, it saves the inner HTML of the element as a "template string" and then empties the element so it can be filled dynamically.
+-   **Capture**: During the scanning phase, it saves a deep clone of the `b-for` element itself as the "template node" (using `node.cloneNode(true)`) and then empties the element so it can be filled dynamically. This approach handles both element children and text-only content correctly.
     
 
 ### The Concept of "The Pool" (`forPools`)

package/docs/contributing/14-events.md

@@ -38,7 +38,7 @@ The library is flexible with how you call these methods:
     
 -   **Parameterized Call**: `@click="deleteItem(5)"`. The library uses a regex to check if there are parentheses. If it finds them, it parses the arguments (like `5`) and passes them to your function.
     
--   **The "Magic" `$event`**: If you write `@click="move($event, 10)"`, the library intelligently injects the native browser event object into that specific slot.
+-   **The "Native" `event`**: If you write `@click="move(event, 10)"`, the library injects the native browser event object into that specific slot. (Note: use `event`, not `$event`).
     
 
 ### 4. Event Modifiers

package/docs/contributing/15-router.md

@@ -2,8 +2,56 @@
 
 The true power of the Lego router isn't just changing the URL; it's the **targeted DOM injection** that allows you to swap _any_ part of the page with _any_ component, without writing a single line of `fetch` or `innerHTML` logic.
 
+## The "Surgical" Philosophy
 
-## LegoDOM Router
+Most SPAs use a **Replacer Strategy**:
+`URL Change -> Match Route -> Destroy App -> Rebuild App with new Page.`
 
+LegoDOM uses a **Surgical Strategy**:
+`URL Change -> Match Route -> Find Targets (#sidebar, #main) -> Modify ONLY those nodes.`
 
+### The Implementation
 
+The core function is `_go` (exposed as `$go`). It doesn't just look for a `<router-outlet>`. It accepts a list of targets.
+
+```javascript
+/* main.js (simplified) */
+const _go = (path, ...targets) => {
+  // 1. Update History API
+  history.pushState({ legoTargets: targets }, "", path);
+  
+  // 2. Find the component for this route
+  const route = routes.find(r => r.path === path);
+  const template = registry[route.tagName];
+
+  // 3. Surgical Swap
+  targets.forEach(selector => {
+    const el = document.querySelector(selector);
+    // CRITICAL: We don't touch the parent, we only replace children.
+    // This preserves the element's own state (scroll, attributes).
+    el.replaceChildren(template.cloneNode(true));
+    
+    // 4. Trigger Snap (Reactivity & Lifecycle) on new content
+    snap(el); 
+  });
+};
+```
+
+### Why this matters
+
+This architecture enables **Persistent Shells**. You can have a sidebar that plays music or holds chat state, while the main content navigates freely. Traditional routers usually require complex "Layout Components" to achieve this. LegoDOM does it by simply *not touching the sidebar*.
+
+## Intelligent Defaults
+
+While surgical routing is powerful, sometimes you just want standard navigation.
+LegoDOM checks for a default `<lego-router>` element if no targets are specified.
+
+```javascript
+/* main.js */
+const resolveTargets = (query) => {
+  if (!query) return [document.querySelector('lego-router')];
+  // ...
+};
+```
+
+This hybrid approach gives you the best of both worlds: Rapid prototyping (defaults) and App-like fidelity (surgical targets).

package/docs/contributing/16-state.md

@@ -9,22 +9,21 @@ In Lego, the code is designed to allow a component in the footer to talk to a co
 
 In most frameworks, data flows down like a waterfall. If a deeply nested component needs a piece of data, every parent above it must "pass it down." The code in `main.js` avoids this by creating a centralized, reactive hub.
 
-### 2. The Implementation: The "Universal Proxy"
+### 2. The Implementation: "The Body is the Root"
 
-When you define `Lego.globals`, the library doesn't just store your object. It wraps the entire thing in the same `reactive()` proxy used for individual components.
+When you define `Lego.globals`, the library doesn't just store your object. It wraps it in the same `reactive()` proxy, but binds it to `document.body`.
 
--   **The Code**: `Lego.globals = reactive(userDefinedGlobals, null)`.
-    
--   **The Magic of `null`**: Notice that when a component's state is made reactive, we pass the `el` (the element) so it knows what to render. When we create `Lego.globals`, we pass `null`. This tells the proxy: "You don't belong to one element; you belong to everyone".
+-   **The Code**: `Globals = reactive(userState, document.body)`.
     
+-   **The Effect**: This means the entire `<body>` is technically the "component" for global state.
 
-### 3. The `$global` Prefix and Subscriptions
+### 3. The `$global` Dependency Check (Smart Broadcast)
 
-The library uses a specific naming convention to trigger its "Global Watcher" logic. Whenever the `render()` engine or a `b-sync` sees a variable starting with `$`, it knows to ignore the local component state (`_studs`) and look into `Lego.globals` instead.
+The library uses a specific optimization to avoid re-rendering the whole world.
 
--   **The Subscription Logic**: In the `render()` function, if a global is accessed, the code automatically adds that component to a "Global Subscribers" list.
-    
--   **The Update Loop**: When you change a global (e.g., `Lego.globals.theme = 'dark'`), the Proxy's `set` trap fires. Because this proxy is global, it iterates through **every single component** currently on the page and tells them to check if they need a re-render.
+-   **Depenedency Tracking**: During `scanForBindings`, if the parser sees a variable that looks global (e.g. `[[ global.user ]]`), it marks that specific component with a `hasGlobalDependency` flag.
+
+-   **The Broadcast Loop**: When you change a global (e.g., `Lego.globals.theme = 'dark'`), the Proxy's `set` trap fires on `document.body`. The `render` function sees this is a global update and iterates through **activeComponents**, checking which ones have the flag. Only those components re-render.
     
 
 ### 4. Why `Object.defineProperty` is avoided for Globals

package/docs/contributing/17-legodom.md

@@ -5,14 +5,7 @@ Everything we’ve discussed i.e. the Scanner, the Registry, the Router, and the
 
 The code for `init()` is deceptively small because its primary job is to flip the switches on the systems we've already built.
 
-### 1. The Singleton Guard
-
-The very first thing `init()` does is check a internal flag: `if (initialized) return;`.
-
--   **The Why**: In a complex app, you might accidentally call `init()` multiple times. Without this guard, you would attach multiple `MutationObservers` to the body, causing every component to "snap" and "render" twice for every single change.
-    
-
-### 2. Bootstrapping the Watchdog
+### 1. Bootstrapping the Watchdog
 
 The core of the initialization is setting up the `MutationObserver` we discussed in Topic 7.
 

package/docs/contributing/index.md

@@ -1,5 +1,24 @@
-# Welcome to the LegoDOM Source Code Explainer Series ;-)
+# Architectural Deep Dive
 
-Here I will give a sneak peek into my brain and thinking when designing the LegoDOM library. Some
-decisions might suck to you - I am happy to hear your honest feedback on the
-[community chat](https://github.com/rayattack/lego-dom/discussions).
+Welcome to the internal documentation of LegoDOM.
+
+This isn't a "how to use" guide. This is a **"how it works"** guide. I believe that understanding the soul of LegoDOM should/could make you a better contributor.
+
+## The Philosophy
+**"The Platform is the Runtime."**
+We avoid compilers, transpilers, and VDOMs. We use:
+- **Proxies** for state.
+- **TreeWalkers** for scanning.
+- **Regex** for parsing.
+- **MutationObservers** for efficiency.
+
+## The Journey
+Follow the path of a component from HTML string to Pixel:
+
+1.  [**Init**](./06-init) - How the library wakes up.
+2.  [**Scanner**](./11-scanner) - How we find holes in your HTML (Regex vs AST).
+3.  [**Studs**](./10-studs) - The Reactivity Engine (Proxies).
+4.  [**Render**](./12-render) - The "Loop of Truth" & Security.
+5.  [**Router**](./15-router) - The "Surgical" Update philosophy.
+
+Dive in.

package/docs/examples/form.md

@@ -17,7 +17,7 @@ Handling forms in Lego.
       <input type="password" b-sync="password">
     </div>
     
-    <p b-show="error" style="color: red">{{ error }}</p>
+    <p b-show="error" style="color: red">[[ error ]]</p>
     
     <button type="submit">Login</button>
   </form>

package/docs/examples/index.md

@@ -13,7 +13,7 @@ A simple reactive counter demonstrating basic state and events.
   <style>
     button { font-size: 1.2rem; padding: 0.5rem 1rem; }
   </style>
-  <p>Count: {{ count }}</p>
+  <p>Count: [[ count ]]</p>
   <button @click="count++">Increment</button>
 </template>
 
@@ -27,7 +27,7 @@ Two-way data binding with `b-sync`.
 ```html
 <template b-id="name-input">
   <input b-sync="name" placeholder="Enter your name">
-  <p b-show="name">Hello, {{ name }}!</p>
+  <p b-show="name">Hello, [[ name ]]!</p>
 </template>
 
 <name-input b-data="{ name: '' }"></name-input>
@@ -42,7 +42,7 @@ Lists with `b-for`.
   <ul>
     <li b-for="todo in todos">
       <input type="checkbox" b-sync="todo.done">
-      <span class="{{ todo.done ? 'done' : '' }}">{{ todo.text }}</span>
+      <span class="[[ todo.done ? 'done' : '' ]]">[[ todo.text ]]</span>
     </li>
   </ul>
 </template>

package/docs/examples/routing.md

@@ -152,10 +152,10 @@ A multi-page application demonstrating client-side routing.
     
     <div class="user-card" b-for="user in users">
       <div>
-        <strong>{{ user.name }}</strong>
-        <p style="margin:0;color:#666;">{{ user.email }}</p>
+        <strong>[[ user.name ]]</strong>
+        <p style="margin:0;color:#666;">[[ user.email ]]</p>
       </div>
-      <a href="/users/{{ user.id }}" b-link>View Profile →</a>
+      <a href="/users/[[ user.id ]]" b-link>View Profile →</a>
     </div>
   </template>
   
@@ -181,17 +181,17 @@ A multi-page application demonstrating client-side routing.
     </div>
     
     <div b-show="!loading && user" class="profile">
-      <h1>{{ user.name }}</h1>
-      <p><strong>Email:</strong> {{ user.email }}</p>
-      <p><strong>Phone:</strong> {{ user.phone }}</p>
-      <p><strong>Website:</strong> {{ user.website }}</p>
+      <h1>[[ user.name ]]</h1>
+      <p><strong>Email:</strong> [[ user.email ]]</p>
+      <p><strong>Phone:</strong> [[ user.phone ]]</p>
+      <p><strong>Website:</strong> [[ user.website ]]</p>
       
       <hr>
       
       <h3>Address</h3>
       <p>
-        {{ user.address.street }}<br>
-        {{ user.address.city }}, {{ user.address.zipcode }}
+        [[ user.address.street ]]<br>
+        [[ user.address.city ]], [[ user.address.zipcode ]]
       </p>
       
       <p><a href="/users" b-link>← Back to users</a></p>
@@ -264,7 +264,7 @@ A multi-page application demonstrating client-side routing.
     
     <div b-show="submitted" class="success">
       <h3>✅ Message Sent!</h3>
-      <p>Thank you for contacting us, {{ form.name }}. We'll respond to {{ form.email }} soon.</p>
+      <p>Thank you for contacting us, [[ form.name ]]. We'll respond to [[ form.email ]] soon.</p>
       <button @click="submitted = false">Send Another</button>
     </div>
   </template>

package/docs/examples/sfc-showcase.md

@@ -7,7 +7,7 @@ Using `.lego` files with Vite.
 **Counter.lego**
 ```html
 <template>
-  <button @click="count++">Count: {{ count }}</button>
+  <button @click="count++">Count: [[ count ]]</button>
 </template>
 
 <style>

package/docs/examples/todo-app.md

@@ -182,17 +182,17 @@ A complete todo application demonstrating Lego features.
     
     <div class="filters">
       <button 
-        class="filter-btn {{ filter === 'all' ? 'active' : '' }}"
+        class="filter-btn [[ filter === 'all' ? 'active' : '' ]]"
         @click="filter = 'all'">
         All
       </button>
       <button 
-        class="filter-btn {{ filter === 'active' ? 'active' : '' }}"
+        class="filter-btn [[ filter === 'active' ? 'active' : '' ]]"
         @click="filter = 'active'">
         Active
       </button>
       <button 
-        class="filter-btn {{ filter === 'completed' ? 'active' : '' }}"
+        class="filter-btn [[ filter === 'completed' ? 'active' : '' ]]"
         @click="filter = 'completed'">
         Completed
       </button>
@@ -201,20 +201,20 @@ A complete todo application demonstrating Lego features.
     <ul>
       <li b-for="todo in filteredTodos()">
         <input type="checkbox" b-sync="todo.done">
-        <span class="todo-text {{ todo.done ? 'done' : '' }}">
-          {{ todo.text }}
+        <span class="todo-text [[ todo.done ? 'done' : '' ]]">
+          [[ todo.text ]]
         </span>
         <button class="delete-btn" @click="deleteTodo(todo)">Delete</button>
       </li>
     </ul>
     
     <div class="stats">
-      <span>{{ remaining() }} item{{ remaining() === 1 ? '' : 's' }} left</span>
+      <span>[[ remaining() ]] item[[ remaining() === 1 ? '' : 's' ]] left</span>
       <button 
         class="clear-completed" 
         b-show="completedCount() > 0"
         @click="clearCompleted()">
-        Clear completed ({{ completedCount() }})
+        Clear completed ([[ completedCount() ]])
       </button>
     </div>
   </template>

package/docs/guide/cdn-usage.md

@@ -13,7 +13,7 @@ Lego works perfectly without any build tools. Just include it via CDN and start
 <body>
   <!-- Define your component -->
   <template b-id="hello-world">
-    <h1>{{ message }}</h1>
+    <h1>[[ message ]]</h1>
   </template>
   
   <!-- Use it -->
@@ -39,7 +39,7 @@ That's it! Open this file in any browser and it works.
 <script src="https://unpkg.com/lego-dom/main.js"></script>
 
 <!-- Specific version -->
-<script src="https://unpkg.com/lego-dom@0.0.7/main.js"></script>
+<script src="https://unpkg.com/lego-dom@1.3.4/main.js"></script>
 ```
 
 ### jsdelivr
@@ -49,14 +49,10 @@ That's it! Open this file in any browser and it works.
 <script src="https://cdn.jsdelivr.net/npm/lego-dom/main.js"></script>
 
 <!-- Specific version -->
-<script src="https://cdn.jsdelivr.net/npm/lego-dom@0.0.7/main.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/lego-dom@1.3.4/main.js"></script>
 ```
 
-### cdnjs
 
-```html
-<script src="https://cdnjs.cloudflare.com/ajax/libs/lego-dom/0.0.7/main.js"></script>
-```
 
 ## Complete Example
 
@@ -133,13 +129,13 @@ Here's a full working application using only CDN:
     <ul>
       <li b-for="todo in todos">
         <input type="checkbox" b-sync="todo.done">
-        <span class="{{ todo.done ? 'done' : '' }}">
-          {{ todo.text }}
+        <span class="[[ todo.done ? 'done' : '' ]]">
+          [[ todo.text ]]
         </span>
       </li>
     </ul>
     
-    <p>{{ remaining() }} remaining</p>
+    <p>[[ remaining() ]] remaining</p>
   </template>
 
   <script src="https://unpkg.com/lego-dom/main.js"></script>
@@ -198,7 +194,7 @@ Lego is perfect for progressively enhancing existing sites:
       box-shadow: 0 2px 10px rgba(0,0,0,0.1);
     }
   </style>
-  <p>Welcome, {{ username }}!</p>
+  <p>Welcome, [[ username ]]!</p>
   <button @click="logout()">Logout</button>
 </template>
 
@@ -246,7 +242,7 @@ Lego components work alongside other frameworks:
 Always pin to a specific version:
 
 ```html
-<script src="https://unpkg.com/lego-dom@0.0.7/main.js"></script>
+<script src="https://unpkg.com/lego-dom@1.3.4/main.js"></script>
 ```
 
 ### For Development/Prototyping
@@ -271,7 +267,7 @@ For maximum security:
 
 ```html
 <script 
-  src="https://unpkg.com/lego-dom@0.0.7/main.js"
+  src="https://unpkg.com/lego-dom@1.3.4/main.js"
   integrity="sha384-..."
   crossorigin="anonymous">
 </script>
@@ -288,9 +284,42 @@ Lego works in all modern browsers:
 
 No polyfills needed for these browsers!
 
+## Using .lego Files without Build Tools
+
+You can use full Single File Components (`.lego` files) directly in the browser without any build step! 
+Lego provides a `loader` configuration that lets you fetch component files on demand.
+
+### How it Works
+
+1. **Serve your files**: Make sure your `.lego` files are accessible via HTTP (e.g., in a `/components` folder).
+2. **Configure the loader**: Tell Lego how to fetch a component when it encounters an unknown tag.
+
+### Example
+
+```html
+<script>
+  Lego.init(document.body, {
+    // The loader function receives the tag name (e.g., 'user-card')
+    // and must return a Promise that resolves to the component's source code.
+    loader: (tagName) => {
+      // Fetch the raw text content of the .lego file
+      return fetch(`/components/${tagName}.lego`).then(res => res.text());
+    }
+  });
+</script>
+
+<!-- Now just use the tag! Lego will fetch, compile, and render it automatically. -->
+<user-card></user-card>
+```
+
+This is perfect for:
+- **Micro-frontends**: Load components from different services.
+- **CMS Integration**: Store component code in a database.
+- **Dynamic Apps**: Load features only when they are needed.
+
 ## Pros and Cons
 
-### ✅ Advantages
+### Advantages
 
 - **No build step** - Instant development
 - **No npm** - No dependency management
@@ -298,11 +327,8 @@ No polyfills needed for these browsers!
 - **Progressive enhancement** - Add to existing sites easily
 - **Low barrier** - Great for beginners
 
-### ⚠️ Limitations
+### Limitations
 
-- No tree-shaking (you get the whole library)
-- No TypeScript compilation
-- No `.lego` SFC support
 - No hot module replacement
 - Slower for large apps compared to bundled versions
 

package/docs/guide/components.md

@@ -6,6 +6,12 @@ Learn how to create and use components in Lego.
 
 A component is a reusable, self-contained piece of UI with its own template, styles, and logic.
 
+
+::: warning Note That
+`style` tags inside NON SFC components are inside the `<template>` tag. And outside the tag in SFCs.
+:::
+
+
 ```html
 <template b-id="user-badge">
   <style>
@@ -24,8 +30,8 @@ A component is a reusable, self-contained piece of UI with its own template, sty
     }
   </style>
   
-  <img class="avatar" src="{{ avatarUrl }}" alt="{{ name }}">
-  <span>{{ name }}</span>
+  <img class="avatar" src="[[ avatarUrl ]]" alt="[[ name ]]">
+  <span>[[ name ]]</span>
 </template>
 ```
 
@@ -37,7 +43,7 @@ Define components directly in your HTML with `<template b-id>`:
 
 ```html
 <template b-id="hello-world" b-data="{ name: 'Default User' }">
-  <h1>Hello {{ name }}!</h1>
+  <h1>Hello [[ name ]]!</h1>
 </template>
 
 <!-- Uses the default "Default User" -->
@@ -53,7 +59,7 @@ Use `Lego.define()` for programmatic component creation:
 
 ```js
 Lego.define('hello-world', `
-  <h1>Hello {{ name }}!</h1>
+  <h1>Hello [[ name ]]!</h1>
 `, {
   name: 'Alice'
 });
@@ -66,7 +72,7 @@ With Vite, use `.lego` files:
 ```html
 <!-- hello-world.lego -->
 <template>
-  <h1>Hello {{ name }}!</h1>
+  <h1>Hello [[ name ]]!</h1>
 </template>
 
 <script>
@@ -98,10 +104,10 @@ State is defined in the component's logic object:
 }
 ```
 
-Access state in templates using `{{ }}`:
+Access state in templates using `[[ ]]`:
 
 ```html
-<p>Count: {{ count }}</p>
+<p>Count: [[ count ]]</p>
 <button @click="increment()">+1</button>
 ```
 
@@ -182,7 +188,7 @@ Use `$ancestors()` to read parent component state:
 
 ```html
 <!-- In nested component -->
-<p>App title: {{ $ancestors('app-root').title }}</p>
+<p>App title: [[ $ancestors('app-root').title ]]</p>
 ```
 
 ::: warning Read-Only
@@ -346,11 +352,11 @@ Clear timers, remove listeners:
 ```html
 <div b-show="loading">Loading...</div>
 <div b-show="!loading && data">
-  <h2>{{ data.title }}</h2>
-  <p>{{ data.content }}</p>
+  <h2>[[ data.title ]]</h2>
+  <p>[[ data.content ]]</p>
 </div>
 <div b-show="!loading && error">
-  Error: {{ error }}
+  Error: [[ error ]]
 </div>
 ```
 
@@ -402,7 +408,7 @@ Use methods for computed values:
 ```
 
 ```html
-<p>Total: ${{ total().toFixed(2) }}</p>
+<p>Total: $[[ total().toFixed(2) ]]</p>
 ```
 
 ## Next Steps