lego-dom 1.0.0 → 1.3.4

package/docs/guide/sfc.md

@@ -2,11 +2,50 @@
 
 Single File Components (SFCs) let you define components in dedicated `.lego` files when using Vite as your build tool.
 
-## Why SFCs?
+::: tip 🚀 New to LegoDOM?
+Start with our **[Step-by-Step Tutorial](/tutorial/)** to build a complete multi-page app with SFCs!
+:::
+
+## Where Does My Config Go?
+
+The #1 question developers ask: **"I have a `.lego` file – now where do I put my routes?"**
+
+**Answer: Everything goes in your entry file (`app.js` or `main.js`):**
+
+```javascript
+// src/app.js – The control center of your app
+
+import { Lego } from 'lego-dom';
+import registerComponents from 'virtual:lego-components';
+
+// 1. Register all .lego files automatically
+registerComponents();
+
+// 2. Define your routes
+Lego.route('/', 'home-page');           // home-page.lego
+Lego.route('/login', 'login-page');     // login-page.lego
+Lego.route('/users/:id', 'user-profile'); // user-profile.lego
 
-When your project grows, keeping
+// 3. Initialize global state (optional)
+Lego.globals.user = null;
 
- components in separate files makes your codebase more organized and maintainable.
+// 4. Start the engine
+await Lego.init();
+```
+
+Your `index.html` just needs:
+```html
+<lego-router></lego-router>
+<script type="module" src="/src/app.js"></script>
+```
+
+That's the complete pattern! 🎉
+
+---
+
+## Why SFCs?
+
+When your project grows, keeping components in separate files makes your codebase more organized and maintainable.
 
 ### Benefits
 
@@ -43,12 +82,12 @@ Here's a complete example (`user-card.lego`):
 
 ```html
 <template>
-  <img class="avatar" src="{{ avatarUrl }}" alt="{{ name }}">
-  <h2 class="name">{{ name }}</h2>
-  <p class="bio">{{ bio }}</p>
-  <p>Followers: {{ followers }}</p>
+  <img class="avatar" src="[[ avatarUrl ]]" alt="[[ name ]]">
+  <h2 class="name">[[ name ]]</h2>
+  <p class="bio">[[ bio ]]</p>
+  <p>Followers: [[ followers ]]</p>
   <button @click="follow()">
-    {{ isFollowing ? 'Unfollow' : 'Follow' }}
+    [[ isFollowing ? 'Unfollow' : 'Follow' ]]
   </button>
 </template>
 
@@ -214,10 +253,10 @@ Contains your component's HTML markup with Lego directives:
 
 ```html
 <template>
-  <h1>{{ title }}</h1>
-  <p b-show="showContent">{{ content }}</p>
+  <h1>[[ title ]]</h1>
+  <p b-show="showContent">[[ content ]]</p>
   <ul>
-    <li b-for="item in items">{{ item }}</li>
+    <li b-for="item in items">[[ item ]]</li>
   </ul>
 </template>
 ```
@@ -271,6 +310,50 @@ Scoped styles using Shadow DOM. Use `self` to target the component root:
 
 Styles are automatically scoped to your component—they won't affect other components or global styles.
 
+## Dynamic Styles
+
+A powerful feature of LegoDOM SFCs is that **interpolation works inside `<style>` tags too!**
+
+You can use `[[ ]]` to bind CSS values directly to your component's state, props, or logic. Because styles are scoped (Shadow DOM), this is safe and won't leak.
+
+```html
+<template>
+  <button @click="toggleTheme()">Toggle Theme</button>
+</template>
+
+<style>
+  /* Use state variables directly in CSS */
+  self {
+    background-color: [[ theme === 'dark' ? '#333' : '#fff' ]];
+    color: [[ theme === 'dark' ? '#fff' : '#000' ]];
+    
+    /* You can also bind strict values for calculation */
+    --padding: [[ basePadding + 'px' ]];
+    padding: var(--padding);
+  }
+</style>
+
+<script>
+export default {
+  theme: 'light',
+  basePadding: 20,
+  
+  toggleTheme() {
+    this.theme = this.theme === 'light' ? 'dark' : 'light';
+  }
+}
+</script>
+```
+
+::: tip Why this rocks 🤘
+This eliminates the need for CSS-in-JS libraries. You get full reactivity in your CSS with standard syntax.
+:::
+
+::: warning Performance Note
+Binding to CSS properties works great for themes, settings, and layout changes.  
+For high-frequency updates (like drag-and-drop coordinates or 60fps animations), prefer binding to **CSS Variables** on the host element (`style="--x: [[ x ]]"`) to avoid re-parsing the stylesheet on every frame.
+:::
+
 ## Hot Module Replacement
 
 During development, changes to `.lego` files trigger a full page reload. Your changes appear instantly!
@@ -340,7 +423,7 @@ components/
 ```html
 <template b-id="my-component">
   <style>self { padding: 1rem; }</style>
-  <h1>{{ title }}</h1>
+  <h1>[[ title ]]</h1>
 </template>
 
 <my-component b-data="{ title: 'Hello' }"></my-component>
@@ -351,7 +434,7 @@ components/
 ```html
 <!-- my-component.lego -->
 <template>
-  <h1>{{ title }}</h1>
+  <h1>[[ title ]]</h1>
 </template>
 
 <style>

package/docs/guide/templating.md

@@ -4,38 +4,38 @@ Learn about Lego templating features and syntax.
 
 ## Interpolation
 
-Use `{{ }}` to insert dynamic content:
+Use `[[ ]]` to insert dynamic content:
 
 ### Simple Values
 
 ```html
-<p>{{ message }}</p>
-<h1>{{ title }}</h1>
-<span>{{ count }}</span>
+<p>[[ message ]]</p>
+<h1>[[ title ]]</h1>
+<span>[[ count ]]</span>
 ```
 
 ### Expressions
 
 ```html
-<p>{{ count * 2 }}</p>
-<span>{{ price.toFixed(2) }}</span>
-<div>{{ firstName + ' ' + lastName }}</div>
+<p>[[ count * 2 ]]</p>
+<span>[[ price.toFixed(2) ]]</span>
+<div>[[ firstName + ' ' + lastName ]]</div>
 ```
 
 ### Method Calls
 
 ```html
-<p>{{ formatDate(timestamp) }}</p>
-<span>{{ calculateTotal() }}</span>
-<div>{{ getUsername() }}</div>
+<p>[[ formatDate(timestamp) ]]</p>
+<span>[[ calculateTotal() ]]</span>
+<div>[[ getUsername() ]]</div>
 ```
 
 ### Conditional (Ternary)
 
 ```html
-<p>{{ age >= 18 ? 'Adult' : 'Minor' }}</p>
-<span>{{ isOnline ? '🟢 Online' : '🔴 Offline' }}</span>
-<div>{{ items.length > 0 ? items.length + ' items' : 'Empty' }}</div>
+<p>[[ age >= 18 ? 'Adult' : 'Minor' ]]</p>
+<span>[[ isOnline ? '🟢 Online' : '🔴 Offline' ]]</span>
+<div>[[ items.length > 0 ? items.length + ' items' : 'Empty' ]]</div>
 ```
 
 ## Attribute Binding
@@ -45,29 +45,29 @@ Interpolate in any attribute:
 ### Simple Attributes
 
 ```html
-<img src="/avatars/{{ userId }}.png" alt="{{ username }}">
-<a href="/user/{{ userId }}">{{ username }}</a>
-<input placeholder="{{ defaultText }}">
+<img src="/avatars/[[ userId ]].png" alt="[[ username ]]">
+<a href="/user/[[ userId ]]">[[ username ]]</a>
+<input placeholder="[[ defaultText ]]">
 ```
 
 ### Class Names
 
 ```html
-<div class="card {{ isActive ? 'active' : '' }}">...</div>
-<button class="{{ isDisabled ? 'disabled' : 'enabled' }}">...</button>
-<li class="item status-{{ status }}">...</li>
+<div class="card [[ isActive ? 'active' : '' ]]">...</div>
+<button class="[[ isDisabled ? 'disabled' : 'enabled' ]]">...</button>
+<li class="item status-[[ status ]]">...</li>
 ```
 
 ### Data Attributes
 
 ```html
-<div data-id="{{ itemId }}" data-type="{{ itemType }}">...</div>
+<div data-id="[[ itemId ]]" data-type="[[ itemType ]]">...</div>
 ```
 
 ### Style (Inline)
 
 ```html
-<div style="color: {{ textColor }}; background: {{ bgColor }}">...</div>
+<div style="color: [[ textColor ]]; background: [[ bgColor ]]">...</div>
 ```
 
 ## Escaping
@@ -81,11 +81,16 @@ Lego automatically escapes HTML to prevent XSS:
 ```
 
 ```html
-<p>{{ userInput }}</p>
+<p>[[ userInput ]]</p>
 <!-- Renders as: &lt;script&gt;alert("XSS")&lt;/script&gt; -->
 ```
 
-**There is no way to render raw HTML.** This is by design—for security.
+**By default,## Raw HTML
+
+To render raw HTML content, use the `b-html` directive.
+
+> [!WARNING]
+> Never use `b-html` on untrusted user input (e.g., comments, messages). It can lead to XSS attacks.
 
 ## Whitespace
 
@@ -93,7 +98,7 @@ Templates preserve whitespace:
 
 ```html
 <p>
-  {{ message }}
+  [[ message ]]
 </p>
 <!-- Renders with newlines and indentation -->
 ```
@@ -101,25 +106,25 @@ Templates preserve whitespace:
 Trim manually if needed:
 
 ```html
-<p>{{ message.trim() }}</p>
+<p>[[ message.trim() ]]</p>
 ```
 
 ## Context
 
-Inside `{{ }}`, you have access to:
+Inside `[[ ]]`, you have access to:
 
 ### Component State (`this`)
 
 ```html
-<p>{{ count }}</p>  <!-- this.count -->
-<span>{{ user.name }}</span>  <!-- this.user.name -->
+<p>[[ count ]]</p>  <!-- this.count -->
+<span>[[ user.name ]]</span>  <!-- this.user.name -->
 ```
 
 ### Methods
 
 ```html
-<p>{{ formatDate(timestamp) }}</p>
-<div>{{ calculateTotal() }}</div>
+<p>[[ formatDate(timestamp) ]]</p>
+<div>[[ calculateTotal() ]]</div>
 ```
 
 ### Special Keywords
@@ -129,7 +134,7 @@ Inside `{{ }}`, you have access to:
 - `self` - Reference to component element (rare)
 
 ```html
-<p>{{ global.user.name }}</p>
+<p>[[ global.user.name ]]</p>
 <button @click="console.log(event)">Click</button>
 ```
 
@@ -147,7 +152,7 @@ Inside `{{ }}`, you have access to:
 ```
 
 ```html
-<p>Price: {{ formatCurrency(price) }}</p>
+<p>Price: [[ formatCurrency(price) ]]</p>
 ```
 
 ### Date Formatting
@@ -162,7 +167,7 @@ Inside `{{ }}`, you have access to:
 ```
 
 ```html
-<time>{{ formatDate(timestamp) }}</time>
+<time>[[ formatDate(timestamp) ]]</time>
 ```
 
 ### Pluralization
@@ -177,7 +182,7 @@ Inside `{{ }}`, you have access to:
 ```
 
 ```html
-<p>{{ items.length }} {{ plural(items.length, 'item', 'items') }}</p>
+<p>[[ items.length ]] [[ plural(items.length, 'item', 'items') ]]</p>
 ```
 
 ### Truncation
@@ -194,7 +199,7 @@ Inside `{{ }}`, you have access to:
 ```
 
 ```html
-<p>{{ truncate(description, 100) }}</p>
+<p>[[ truncate(description, 100) ]]</p>
 ```
 
 ## Limitations
@@ -205,12 +210,12 @@ Can't use statements—only expressions:
 
 ```html
 <!-- ❌ Doesn't work -->
-<p>{{ if (condition) { return 'yes'; } }}</p>
-<p>{{ for (let i = 0; i < 10; i++) { } }}</p>
+<p>[[ if (condition) { return 'yes'; } ]]</p>
+<p>[[ for (let i = 0; i < 10; i++) { } ]]</p>
 
 <!-- ✅ Use ternary or methods -->
-<p>{{ condition ? 'yes' : 'no' }}</p>
-<p>{{ renderList() }}</p>
+<p>[[ condition ? 'yes' : 'no' ]]</p>
+<p>[[ renderList() ]]</p>
 ```
 
 ### No Declarations
@@ -219,10 +224,10 @@ Can't declare variables:
 
 ```html
 <!-- ❌ Doesn't work -->
-<p>{{ const total = price * qty; total }}</p>
+<p>[[ const total = price * qty; total ]]</p>
 
 <!-- ✅ Use methods -->
-<p>{{ getTotal() }}</p>
+<p>[[ getTotal() ]]</p>
 ```
 
 ```js
@@ -242,10 +247,10 @@ If logic is complex, use methods:
 
 ```html
 <!-- ❌ Too complex -->
-<p>{{ items.filter(x => x.active).map(x => x.name).join(', ') }}</p>
+<p>[[ items.filter(x => x.active).map(x => x.name).join(', ') ]]</p>
 
 <!-- ✅ Better -->
-<p>{{ getActiveNames() }}</p>
+<p>[[ getActiveNames() ]]</p>
 ```
 
 ```js
@@ -265,10 +270,10 @@ Don't put formatting logic in templates:
 
 ```html
 <!-- ❌ Messy -->
-<p>${{ (price * 1.2).toFixed(2) }}</p>
+<p>$[[ (price * 1.2).toFixed(2) ]]</p>
 
 <!-- ✅ Clean -->
-<p>{{ formatPrice(price) }}</p>
+<p>[[ formatPrice(price) ]]</p>
 ```
 
 ### 3. Avoid Side Effects
@@ -277,10 +282,10 @@ Don't mutate state in templates:
 
 ```html
 <!-- ❌ Bad -->
-<p>{{ count++ }}</p>
+<p>[[ count++ ]]</p>
 
 <!-- ✅ Good -->
-<p>{{ count }}</p>
+<p>[[ count ]]</p>
 <button @click="count++">Increment</button>
 ```
 
@@ -323,10 +328,10 @@ If a calculation is expensive, cache it:
 
 ```html
 <!-- ❌ Runs on every render -->
-<p>{{ expensiveCalculation() }}</p>
+<p>[[ expensiveCalculation() ]]</p>
 
 <!-- ✅ Calculate once, store result -->
-<p>{{ cachedResult }}</p>
+<p>[[ cachedResult ]]</p>
 ```
 
 ```js
@@ -343,7 +348,7 @@ If a calculation is expensive, cache it:
 ### Show/Hide Based on Condition
 
 ```html
-<p b-show="user">Welcome, {{ user.name }}!</p>
+<p b-show="user">Welcome, [[ user.name ]]!</p>
 <p b-show="!user">Please log in</p>
 ```
 
@@ -352,7 +357,7 @@ If a calculation is expensive, cache it:
 ```html
 <ul>
   <li b-for="item in items">
-    #{{ $index + 1 }}: {{ item.name }}
+    #[[ $index + 1 ]]: [[ item.name ]]
   </li>
 </ul>
 ```
@@ -360,8 +365,8 @@ If a calculation is expensive, cache it:
 ### Conditional Classes
 
 ```html
-<div class="item {{ item.active ? 'active' : '' }} {{ item.featured ? 'featured' : '' }}">
-  {{ item.name }}
+<div class="item [[ item.active ? 'active' : '' ]] [[ item.featured ? 'featured' : '' ]]">
+  [[ item.name ]]
 </div>
 ```
 
@@ -369,10 +374,10 @@ If a calculation is expensive, cache it:
 
 ```html
 <a 
-  href="/product/{{ product.id }}" 
-  class="product-link {{ product.inStock ? '' : 'out-of-stock' }}"
-  title="{{ product.name }} - ${{ product.price }}">
-  {{ product.name }}
+  href="/product/[[ product.id ]]" 
+  class="product-link [[ product.inStock ? '' : 'out-of-stock' ]]"
+  title="[[ product.name ]] - $[[ product.price ]]">
+  [[ product.name ]]
 </a>
 ```
 

package/docs/index.md

@@ -7,14 +7,14 @@ hero:
   tagline: A tiny, zero-dependency Web library for creating reactive Web Components directly in the browser
   image:
     src: /logo.svg
-    alt: Lego
+    alt: LegoDOM
   actions:
     - theme: brand
       text: Get Started
       link: /guide/getting-started
     - theme: alt
       text: View on GitHub
-      link: https://github.com/rayattack/Lego
+      link: https://github.com/rayattack/LegoDOM
     - theme: alt
       text: Try Examples
       link: /examples/
@@ -59,7 +59,7 @@ features:
 
 ## Components & Naming
 
-How you name your components depends on how you use Lego:
+How you name your components depends on how you use LegoDOM:
 
 ### 1. Vite / Build Tools (Recommended)
 **Convention over Configuration.** The filename *is* the tag name.
@@ -109,21 +109,21 @@ Since there are no files, you must explicitly name your components using the `b-
 <script src="https://unpkg.com/lego-dom/main.js"></script>
 <script>
   // Complete the initialization
-  Lego.init();
+  LegoDOM.init();
 </script>
 ```
 
 That's it. No build step, no npm, no configuration.
 
 > [!IMPORTANT]
-> **Why call `Lego.init()`?**
-> While `Lego.define()` will "snap" your components into the page immediately, you must call `Lego.init()` to start the background engine. Without it:
+> **Why call `LegoDOM.init()`?**
+> While `LegoDOM.define()` will "snap" your components into the page immediately, you must call `LegoDOM.init()` to start the background engine. Without it:
 > - **Reactivity** to data changes won't work.
 > - **Mustaches** (<code v-pre>{{...}}</code>) outside of components won't hydrate.
 > - **Single Page Routing** won't be activated.
 > - **New components** added to the DOM dynamically won't be auto-initialized.
 
-## Why Lego?
+## Why LegoDOM?
 
 **For small projects**, you get reactive components without the overhead of a full framework.
 
@@ -133,7 +133,7 @@ That's it. No build step, no npm, no configuration.
 
 ## Comparison
 
-| Feature | Lego | Vue | React |
+| Feature | LegoDOM | Vue | React |
 |---------|--------|-----|-------|
 | Size | < 17KB | ~33KB | ~40KB |
 | Dependencies | 0 | Many | Many |
@@ -146,7 +146,7 @@ That's it. No build step, no npm, no configuration.
 
 ## Browser Support
 
-Lego works in all modern browsers that support:
+LegoDOM works in all modern browsers that support:
 - Web Components
 - Shadow DOM
 - ES6 Proxy

package/docs/router/basic-routing.md

@@ -1,6 +1,6 @@
 # Basic Routing: The Global Outlet
 
-Before we dive into surgical swaps, we must understand how LegoJS handles the initial entry into your application. Every application needs a primary gateway—a place where the main content lives. In Lego, this is the `<lego-router>`.
+Before we dive into surgical swaps, we must understand how LegoDOM handles the initial entry into your application. Every application needs a primary gateway—a place where the main content lives. In LegoDOM, this is the `<lego-router>`.
 
 ## The Entry Point
 
@@ -15,7 +15,7 @@ In your `index.html`, you define a single custom element that acts as the "Maste
 ```
 
 
-When the page loads, the LegoJS router looks at the current browser URL and searches its internal "Route Map" for a match.
+When the page loads, the LegoDOM router looks at the current browser URL and searches its internal "Route Map" for a match.
 
 ## Defining Your First Routes
 
@@ -32,16 +32,16 @@ Lego.route('/user/:id', 'profile-page');
 
 ### How the Matching Works
 
-1.  **The Match**: Lego uses Regex to compare the window location with your defined paths.
+1.  **The Match**: LegoDOM uses Regex to compare the window location with your defined paths.
     
-2.  **The Injection**: If a match is found, Lego creates an instance of the associated component (e.g., `<home-page>`) and injects it into the `<lego-router>` tag.
+2.  **The Injection**: If a match is found, LegoDOM creates an instance of the associated component (e.g., `<home-page>`) and injects it into the `<lego-router>` tag.
     
 3.  **The Hydration**: The framework then "snaps" the component to life, initializing its state and running its `mounted()` lifecycle hook.
     
 
 ## The Global Fallback
 
-If no route matches the current URL, LegoJS looks for a special fallback route. This is essential for handling **404 Not Found** states gracefully.
+If no route matches the current URL, LegoDOM looks for a special fallback route. This is essential for handling **404 Not Found** states gracefully.
 
 ```js
 Lego.route('*', 'not-found-page');
@@ -50,14 +50,14 @@ Lego.route('*', 'not-found-page');
 
 ## Handling Parameters (`$params`)
 
-When you use a dynamic path like `/user/:id`, Lego automatically parses the URL and makes the data available to the component via the global `$route` object.
+When you use a dynamic path like `/user/:id`, LegoDOM automatically parses the URL and makes the data available to the component via the global `$route` object.
 
 In your component template:
 
 ```html
 <template b-id="profile-page">
   <h1>User Profile</h1>
-  <p>Viewing ID: {{ $route.params.id }}</p>
+  <p>Viewing ID: [[ $route.params.id ]]</p>
 </template>
 
 ```
@@ -83,7 +83,7 @@ mounted() {
 
 <template>
   <h1>User Profile</h1>
-  <p>Viewing ID: {{ $params.id }}</p>
+  <p>Viewing ID: [[ $params.id ]]</p>
 </template>
 
 <script>

package/docs/router/cold-entry.md

@@ -3,7 +3,7 @@
 
 In the previous section, we learned how to use `b-target` to surgically swap fragments while the app is running. But what happens when a user types `myapp.com/messaging/123` directly into the address bar or hits **Refresh (F5)**?
 
-In a traditional nested router, the framework handles this automatically. In LegoJS, we use a more powerful, explicit pattern called **Self-Healing Layouts**.
+In a traditional nested router, the framework handles this automatically. In LegoDOM, we use a more powerful, explicit pattern called **Self-Healing Layouts**.
 
 ## The Cold Entry/Start Challenge
 
@@ -13,7 +13,7 @@ When a "Cold Start" occurs:
     
 2.  The server returns the base `index.html`.
     
-3.  LegoJS matches the route `/messaging/:id` to the `messaging-shell` component.
+3.  LegoDOM matches the route `/messaging/:id` to the `messaging-shell` component.
     
 4.  The `messaging-shell` mounts, but the `#chat-window` target is empty (or showing its default "Select a conversation" text).
     

package/docs/router/history.md

@@ -3,7 +3,7 @@
 
 One of the biggest frustrations in modern web development is "breaking the back button." When you use JavaScript to update only part of a page, the browser often doesn't realize a navigation event occurred. If the user hits "Back," they might be booted out of your app entirely.
 
-LegoJS solves this using a system called **Smart History**. It ensures that even surgical, fragment-level updates are recorded and reversible.
+LegoDOM solves this using a system called **Smart History**. It ensures that even surgical, fragment-level updates are recorded and reversible.
 
 ## How Traditional Routers Fail
 
@@ -18,9 +18,9 @@ In a standard SPA, the router usually manages a single "current view." When you
 
 Because the whole page (or the main outlet) is replaced, the browser's history stack is simple: Page A -> Page B. But in a complex layout like LinkedIn, you might have changed the chat window 5 times while the sidebar stayed exactly the same. Users expect the "Back" button to cycle through those chats, not take them back to the login screen.
 
-## The LegoJS Approach: Target Tracking
+## The LegoDOM Approach: Target Tracking
 
-When you use `b-link` with a `b-target`, LegoJS does two things simultaneously:
+When you use `b-link` with a `b-target`, LegoDOM does two things simultaneously:
 
 1.  It updates the browser URL using the History API.
     
@@ -29,7 +29,7 @@ When you use `b-link` with a `b-target`, LegoJS does two things simultaneously:
 
 ### Inside the History State
 
-Every time a surgical swap happens, LegoJS saves the target selector in the `history.state`. It looks something like this:
+Every time a surgical swap happens, LegoDOM saves the target selector in the `history.state`. It looks something like this:
 
 ```js
 // Internal representation
@@ -41,9 +41,9 @@ history.pushState({
 
 ## The "Popstate" Magic
 
-When a user hits the **Back** or **Forward** button, the browser triggers a `popstate` event. LegoJS intercepts this event and checks if the incoming state contains `legoTargets`.
+When a user hits the **Back** or **Forward** button, the browser triggers a `popstate` event. LegoDOM intercepts this event and checks if the incoming state contains `legoTargets`.
 
--   **If `legoTargets` exists:** LegoJS performs a surgical swap. It takes the URL the browser is moving to and renders it _only_ into the specified target (e.g., `#chat-window`).
+-   **If `legoTargets` exists:** LegoDOM performs a surgical swap. It takes the URL the browser is moving to and renders it _only_ into the specified target (e.g., `#chat-window`).
     
 -   **If no target exists:** It performs a global swap in the `<lego-router>`.
     
@@ -66,4 +66,4 @@ Because the history state uses the same URLs as your standard links, a "Back" na
 
 Smart History is the "glue" that makes a multi-fragment interface feel like a single, cohesive application. It respects the user's intent by making the browser's navigation tools work for specific parts of the page, not just the whole page.
 
-Next, we'll dive into the mechanics of how LegoJS finds these targets in complex, nested DOM trees in **Target Resolver: Scoping and Logic**.
+Next, we'll dive into the mechanics of how LegoDOM finds these targets in complex, nested DOM trees in **Target Resolver: Scoping and Logic**.

package/docs/router/index.md

@@ -3,7 +3,7 @@
 
 Traditional Single Page Application (SPA) routers (like React Router, Vue Router, or Angular's Router) rely on a **Centralized Configuration Tree**. As your project grows, this JSON or JavaScript object becomes a "source of truth" that is fragile, hard to maintain, and forces a rigid hierarchy on your UI.
 
-**LegoJS breaks this pattern.**
+**LegoDOM breaks this pattern.**
 
 In Lego, we don't nest routes in a config file. Instead, we use the **URL as the Data Source** and the **DOM as the Layout Engine**.