neo.mjs 10.6.0 → 10.8.0

package/.github/AI_QUICK_START.md

@@ -1,33 +1,100 @@
-# AI Knowledge Base Quick Start
+# AI Knowledge Base Quick Start Guide
 
-This guide assumes you have already cloned the `neo` repository and have all the necessary files.
+This guide provides a comprehensive walkthrough for setting up and using the local AI Knowledge Base
+for the Neo.mjs repository.
 
-## Prerequisites
+## 1. Prerequisites
 
-1.  **Node.js**: v18 or later
-2.  **Google AI API Key**: A `GEMINI_API_KEY` from Google AI Studio.
+Before you begin, ensure you have the following:
 
-## Setup Steps
+1.  **Google Account**: You'll need one to access Google AI Studio for an API key. If you don't have one,
+    you can create it at [accounts.google.com](https://accounts.google.com).
+2.  **Node.js**: Version 18 or later. If you don't have it, you can install it from [nodejs.org](https://nodejs.org).
+3.  **Forked & Cloned Neo.mjs Repository**: To contribute, you should first fork the repository on GitHub,
+    and then clone your personal fork.
+    ```bash
+    # In your browser, visit https://github.com/neomjs/neo and click the "Fork" button.
+    # Then, clone your fork (replace YOUR_USERNAME):
+    git clone https://github.com/YOUR_USERNAME/neo.git
+    cd neo
+    ```
+4.  **Internet Access**: Required for the initial installation of tools and for generating your API key.
+
+## 2. A Note on Cost
+
+This entire process uses the free tier of the Google Gemini API. The free tier is generous and more than sufficient for
+this development workflow, typically allowing up to **60 queries per minute** for the embedding model used here.
+You can check your specific limits in the Google AI Studio.
+
+## 3. Setup and Configuration
+
+### Step 3.1: Obtain a Gemini API Key
+
+The API key authenticates your requests to Google's Gemini models.
+
+1.  **Visit Google AI Studio**: Go to [https://aistudio.google.com/app/apikey](https://aistudio.google.com/app/apikey).
+2.  **Sign In**: Use your Google account credentials. Complete any two-factor authentication (2FA) if prompted.
+3.  **Create API Key**: Click the "Create API key" button. The key will be generated instantly.
+4.  **Copy and Secure the Key**: Click the copy icon next to the key. **Treat this key like a password and never commit
+    it to version control.**
+
+### Step 3.2: Configure Your Local Environment
+
+1.  **Navigate to Repo Root**: Make sure you are in the root directory of your cloned `neo` repository.
+2.  **Create `.env` file**: Create a new file named `.env`.
+3.  **Add API Key**: Add the following line to the `.env` file, replacing `YOUR_API_KEY_HERE` with the key you just copied:
+    ```
+    GEMINI_API_KEY="YOUR_API_KEY_HERE"
+    ```
+    This file is already listed in `.gitignore` to prevent you from accidentally committing your key.
+
+## 4. Build the Knowledge Base
 
-1.  **Configure Environment**
-    - Create a `.env` file in the root of the repository.
-    - Add your API key to it: `GEMINI_API_KEY="YOUR_API_KEY_HERE"`
+With the configuration in place, you can now build the local vector database.
 
-2.  **Start the AI Server**
-    In a separate terminal, run:
+1.  **Start the AI Server**: In a new terminal window, start the ChromaDB server. Keep this process running in the background.
     ```bash
     npm run ai:server
     ```
-    Keep this server running.
-
-3.  **Build the Knowledge Base**
-    In another terminal, run:
+2.  **Build the Knowledge Base**: In another terminal, run the following commands sequentially. This may take a few
+    minutes on the first run.
     ```bash
+    # 1. Generates docs/output/structure.json for codebase mapping
     npm run generate-docs-json
+
+    # 2. Creates, embeds, and stores all content in the local ChromaDB
     npm run ai:build-kb
     ```
 
-4.  **Query the Knowledge Base**
+## 5. The AI-Native Workflow in Action
+
+The goal of this system is not for you to manually run queries, but to empower an AI agent to do it for you. Here’s how
+the intended workflow looks:
+
+1.  **Start your AI Agent**: From the repo root, launch your AI agent of choice (e.g., Gemini CLI).
     ```bash
-    npm run ai:query -- -q "Your query here"
+    gemini
     ```
+2.  **Give a High-Level Prompt**: Instead of feeding the AI context, you give it a goal and instruct it to use the tools
+    available in the repository.
+
+    > **Your Prompt:** "Explain the Neo.mjs two-tier reactivity model and provide a simple code example."
+
+3.  **The AI Takes Over**: An AI agent following the `AGENTS.md` protocol will then:
+    *   **Formulate a query**: It will determine that "reactivity" is the key concept.
+    *   **Execute the tool**: It will run `npm run ai:query -- -q "reactivity" -t guide` and
+        `npm run ai:query -- -q "reactivity" -t src` on its own.
+    *   **Synthesize the answer**: After getting the paths to the most relevant guides and source files, it will read
+        them and use that fresh, accurate context to generate a comprehensive explanation and code example.
+
+This is the crucial difference: you are delegating the *research* task to the AI, making it a true partner that can
+autonomously navigate and understand your codebase.
+
+## 6. Common Troubleshooting
+
+-   **API Key Errors**: If queries fail with authentication issues, try regenerating the key in Google AI Studio or
+    check your usage quotas.
+-   **`gemini` Command Not Found**: If you installed the Gemini CLI but the command isn't found, ensure your system's
+    PATH includes the global npm binaries directory. You can find this directory by running `npm bin -g`.
+-   **Memory Issues during Build**: The `ai:build-kb` script can be memory-intensive. If it fails, you can try increasing
+    the heap size available to Node.js: `node --max-old-space-size=4096 ./buildScripts/ai/embedKnowledgeBase.mjs`.

package/.github/RELEASE_NOTES/v10.7.0.md

@@ -0,0 +1,41 @@
+---
+date: 2025-09-21
+version: 10.7.0
+---
+# Neo.mjs v10.7.0 Release Notes
+
+Version 10.7.0 massively enhances the **AI-Native Developer Experience** introduced in v10.6.0, making it more powerful, scalable, and deeply integrated into the development workflow. This release also delivers substantial new learning content to accelerate developer onboarding.
+
+## 🚀 Highlights
+
+-   **Major AI Knowledge Base Upgrade:** Building on the foundation from v10.6.0, the AI Knowledge Base has been re-architected for scalability and enriched with more content. It now uses a streaming pipeline for memory-efficient processing and includes all blog posts, making it a more comprehensive and performant resource.
+-   **Formalized AI-Driven Development:** The new `AGENTS.md` file provides a comprehensive operational manual for AI agents, formalizing the process for AI-driven development within the repository.
+-   **Extensive New Learning Content:** This version adds three major new guides covering **Styling and Theming**, **Unit Testing**, and **Application Routing**, plus a new blog post on the framework's AI-native architecture.
+
+## ✨ New Features
+
+-   **AI Agent Guidelines (`#7220`, `#7221`):** A new `AGENTS.md` file has been created to provide a comprehensive operational manual for AI agents working within the repository.
+-   **New Guide: [Styling and Theming](https://github.com/neomjs/neo/blob/dev/learn/guides/uibuildingblocks/StylingAndTheming.md) (`#6778`):** A new, in-depth guide covering all aspects of styling and theming in Neo.mjs.
+-   **New Guide: [Unit Testing with Siesta](https://github.com/neomjs/neo/blob/dev/learn/guides/testing/UnitTestingWithSiesta.md) (`#7222`):** A new guide providing a step-by-step introduction to the unit testing workflow.
+-   **New Tutorial: [Multi-Page App Routing](https://github.com/neomjs/neo/blob/dev/learn/tutorials/Routing.md) (`#7223`):** A new tutorial that walks developers through building a simple single-page application with client-side routing.
+-   **New Blog Post (`#7226`, `d7492da61`):** Added the blog post "[The UI Revolution: How JSON Blueprints & Shared Workers Power Next-Gen AI Interfaces](https://github.com/neomjs/neo/blob/dev/learn/blog/json-blueprints-and-shared-workers.md)" to the repository.
+
+## 💡 Enhancements
+
+-   **AI Knowledge Base:**
+    -   **Blog Integration (`#7216`):** The knowledge base now includes content from all blog posts.
+    -   **Streaming for Memory Efficiency (`#7215`):** The knowledge base generation scripts now use a streaming pipeline, significantly lowering memory footprint.
+    -   **Query Scoring Refactor (`#7218`):** The query scoring algorithm has been refactored for improved performance and relevance.
+    -   **Query Performance (`0a667b35d`):** Query script performance has been drastically improved by moving score adjustment logic to the embedding phase.
+    -   **Content Filtering (`#7217`):** The `learn/comparisons` folder is now excluded from the knowledge base.
+-   **AI Tooling & Developer Experience:**
+    -   **Intent-Driven JSDoc Comments (`#7219`):** Core AI scripts have been enhanced with intent-driven JSDoc comments.
+-   **README.md (`d7e3c6ebe`):** The main README now includes a section on the "AI-Native by Design" philosophy.
+
+---
+
+## Try the AI-Native Experience
+
+With the significant enhancements to the AI Knowledge Base and the new `AGENTS.md` guidelines, the Neo.mjs repository is now fully equipped for AI-driven development. We encourage you to try it out using tools like Gemini CLI or your own custom agents.
+
+Get started in minutes by following our **[AI Quick Start Guide](./AI_QUICK_START.md)**.

package/.github/RELEASE_NOTES/v10.8.0.md

@@ -0,0 +1,33 @@
+# Neo.mjs v10.8.0 Release Notes
+
+## Summary
+
+Version 10.8.0 is a significant minor release focused on enhancing the AI-Native development experience. This version formalizes a more advanced, query-driven documentation strategy and introduces a new blog post detailing the philosophy and architecture behind Neo.mjs's AI-first approach.
+
+## Key Enhancements
+
+### 1. Refined AI Agent Workflow & Query Tool
+
+The AI agent guidelines (`AGENTS.md`) and the underlying query engine have been significantly enhanced to improve the entire AI-native development workflow.
+
+-   **Advanced Query Filtering:** The knowledge base query script (`queryKnowledgeBase.mjs`) was refactored to use `commander` and now includes a powerful `--type` flag. This allows developers and AI agents to filter search results by content type (`all`, `blog`, `guide`, `src`, `example`), making it much easier to find specific kinds of information.
+-   **Query-Driven Documentation:** The agent protocol was updated with the "Contributing Queryable, Intent-Driven Comments" strategy. This requires agents to enrich source code with conceptual keywords, `@summary` tags, and `@see` links, turning our codebase into a more discoverable knowledge base.
+-   **Structural Improvements:** The `AGENTS.md` document flow was improved by relocating key sections and fixing cross-references for better readability.
+-   **Regression Testing:** The agent guidelines now include a prompt to create regression tests for all bug fixes, with a direct link to the `UnitTestingWithSiesta.md` guide to ensure issues, once solved, stay solved.
+
+This change transforms the AI from a simple code generator into a true contributor to the project's long-term health and maintainability.
+
+### 2. Enhanced StateProvider Example
+
+As the first implementation of our new documentation strategy, the advanced StateProvider example (`examples/stateProvider/advanced/`) has been updated with comprehensive, intent-driven JSDoc comments. This makes the example a much clearer, self-documenting resource for understanding hierarchical state management in Neo.mjs.
+
+### 3. New Blog Post: "AI-Native, Not AI-Assisted"
+
+A new in-depth article has been added to our blog, which covers:
+
+-   The core philosophy behind building an AI-Native framework.
+-   A technical deep-dive into our local-first, Retrieval-Augmented Generation (RAG) system.
+-   A comparison of Neo.mjs's approach with other industry implementations like Angular's MCP.
+-   The future roadmap for extending these AI capabilities to user-created workspaces.
+
+This article is now accessible via the documentation portal.

package/AGENTS.md

@@ -0,0 +1,237 @@
+# AI Agent Guidelines
+
+Welcome, AI assistant! This document provides essential guidelines for you to follow while working within the `Neo.mjs`
+repository. Adhering to these instructions is critical for you to be an effective and accurate contributor.
+
+## 1. Your Role and Primary Directive
+
+Your role is that of an **expert Neo.mjs developer and architect**. Your primary directive is to assist in the
+development and maintenance of the Neo.mjs framework.
+
+**CRITICAL:** Your training data is outdated regarding Neo.mjs. You **MUST NOT** rely on any prior knowledge you have
+about the framework. The **ONLY** source of truth is the content within this repository.
+
+## 2. Session Initialization
+
+At the beginning of every new session, you **MUST** perform the following steps to ground your understanding of the framework:
+
+1.  **Read the Codebase Structure:** Parse the file `docs/output/structure.json`. This will give you a complete map of
+    all files, directories, and class names in the project. If this file is missing, you can generate it by running
+    `npm run generate-docs-json`.
+
+2.  **Read the Core Concepts (`src/Neo.mjs`):** When reading this file, focus on understanding:
+    - `Neo.setupClass()`: The final processing step for all classes. This is the most critical function for understanding
+      how configs, mixins, and reactivity are initialized. Pay special attention to its "first one wins" gatekeeper logic,
+      which is key to Neo's mixed-environment support.
+    - `Neo.create()`: The factory method for creating instances.
+    - The distinction between class namespaces (e.g., `Neo.component.Base`) and `ntype` shortcuts (e.g., `'button'`).
+
+3.  **Read the Base Class (`src/core/Base.mjs`):** This is the foundation for all components and classes. Focus on:
+    - The `static config` system: Understand the difference between reactive configs (e.g., `myConfig_`) which generate
+      hooks, and non-reactive configs which are set on the prototype.
+    - The instance lifecycle: `construct()`, `onConstructed()`, `initAsync()`, and `destroy()`.
+    - The reactivity hooks: `beforeGet*`, `beforeSet*`, `afterSet*`.
+
+4.  **Understand the Two Component Models:** Read the file `learn/gettingstarted/DescribingTheUI.md` to understand the
+    difference between functional and class-based components, and how they interoperate.
+
+## 3. The Knowledge Base: Your Primary Source of Truth
+
+Your primary directive is to rely on the project's internal knowledge base, not your pre-existing training data.
+
+### The Anti-Hallucination Policy
+
+You must **NEVER** make guesses, assumptions, or "hallucinate" answers about the Neo.mjs framework. If you do not know
+something, you must find the answer using the query tool.
+
+- **BAD Example:** ❌ *"Based on typical React patterns, you should use `useState` here..."*
+- **GOOD Example:** ✅ *"Let me query the knowledge base to understand Neo.mjs state management patterns..."*
+
+### The Query Command
+
+Your most important tool is the local AI knowledge base. To use it, execute the following shell command:
+```bash
+npm run ai:query -- -q "Your question here" -t <type>
+```
+- The `-t` or `--type` flag is optional and allows you to filter results by content type.
+- Supported types are: `all` (default), `blog`, `guide`, `src`, `example`.
+
+### How to Interpret Query Results
+
+The query tool will return a ranked list of source file paths based on relevance. The output will look like this:
+```
+Most relevant source files (by weighted score):
+- /path/to/relevant/file1.mjs (Score: 350)
+- /path/to/relevant/file2.md (Score: 210)
+- /path/to/relevant/file3.mjs (Score: 150)
+
+Top result: /path/to/relevant/file1.mjs
+```
+You should always start by reading the top-ranked file. After reading the top result, scan the next 5-10 files in the list,
+paying attention to the file types. Since `.md` guides often provide valuable conceptual context that `.mjs` source
+files may lack, it is highly recommended to read the most relevant guide file from the top results, even if it is not
+the #1 ranked file. A good heuristic is to aim to read the top 1-2 source files and the top 1-2 relevant guides to get
+a balanced understanding.
+
+### Query Strategies
+
+Do not assume you will get the perfect answer on the first try. Use a systematic approach to querying.
+
+#### 1. Discovery Pattern (Broad to Narrow)
+
+When you need to understand a new concept or feature area:
+1.  **Start broad:** Use conceptual queries to get a high-level overview.
+    - `npm run ai:query -- -q "framework architecture"`
+    - `npm run ai:query -- -q "show me examples for Neo.tab.Container"`
+2.  **Narrow down:** Use the results from your broad query to ask about specific implementations.
+    - `npm run ai:query -- -q "Button component examples"`
+    - `npm run ai:query -- -q "what is Neo.component.Base?"`
+3.  **Find related patterns:** Look for common conventions and approaches.
+    - `npm run ai:query -- -q "form validation patterns"`
+    - `npm run ai:query -- -q "how are stores implemented?"`
+
+#### 2. Targeted Content-Type Searching
+
+Use the `--type` (`-t`) flag to focus your search on specific types of content.
+This is a powerful way to get more relevant results.
+
+-   **To find conceptual explanations:**
+    - `npm run ai:query -- -q "state management" -t guide`
+-   **To find concrete usage examples:**
+    - `npm run ai:query -- -q "Button component" -t example`
+-   **To dive deep into implementation details:**
+    - `npm run ai:query -- -q "afterSet hook" -t src`
+
+**Strategy:** If a broad query returns too many source files and not enough conceptual documents, re-run the query with
+`-t guide`. Conversely, if you have read the guides but need to see the actual implementation,
+re-run with `-t src` or `-t example`.
+
+#### 3. Knowledge Base Enhancement Strategy: Contributing Queryable, Intent-Driven Comments
+
+When analyzing source files (e.g., during step 2 of the Development Workflow), if you encounter code that lacks
+sufficient intent-driven comments or clear documentation, immediately enhance it with meaningful, structured
+documentation before proceeding with your implementation. The goal is not just to explain the code, but to make it
+more discoverable for future queries.
+
+1.  **Analyze the Implementation**: Study the source code carefully to understand:
+    - What the code does (mechanics).
+    - Why it does it (intent).
+    - How it fits into the broader architecture.
+    - What patterns it follows.
+
+2.  **Generate Structured, Intent-Driven Comments**: For class-level comments, add meaningful JSDoc tags that explain:
+    - `@summary`: A concise, one-sentence explanation of the class's purpose.
+    - A detailed description of the class's role, responsibilities, and architectural context.
+    - `@see`: Links to other relevant classes, guides, or examples.
+
+3.  **Anticipate Future Queries**: After documenting the class's purpose, think like a user. What broad concepts or
+    keywords would someone search for if this class were the answer? Explicitly include these concepts in the
+    class description. This acts as a "semantic signpost" that makes the class more discoverable. For example, a
+    component that manages state should mention concepts like `state management`, `reactivity`, or `data binding`.
+
+4.  **Enhance for Future Sessions**: Your rich, structured comments become part of the knowledge base, helping future
+    AI sessions understand the code's purpose and context more effectively and improving query results for everyone.
+
+**Example of a Good Query-Driven Class Comment:**
+```javascript
+/**
+ * @summary Manages the state and lifecycle of a tab container's header.
+ *
+ * This class is a core part of the tab container's view logic. It is responsible for rendering the tab
+ * buttons, handling user interactions (like clicks and keyboard navigation), and synchronizing the
+ * header's UI with the active tab in the main container. It works closely with the main Tab.Container
+ * and its layout to ensure a seamless user experience.
+ *
+ * This class is a key example of the framework's **reactivity** model and demonstrates concepts like
+ * **component composition**, **event handling**, and **data binding**.
+ *
+ * @see Neo.tab.Container
+ * @see Neo.examples.tab.Container
+ */
+class TabHeader extends Component {
+    // Implementation details...
+}
+```
+
+#### 4. When Queries Fail to Find Information
+
+If you cannot find relevant information after systematic querying (including using the Knowledge Base Enhancement Strategy):
+
+1. **Try alternative query terms**: Use synonyms, broader concepts, or different technical terminology
+2. **Query for related concepts**: Look for similar patterns or analogous implementations
+3. **Check fundamental concepts**: Ensure you understand the basic architecture before seeking specific solutions
+
+If queries consistently return no relevant results for your task:
+
+**STOP implementation and document the gap:**
+- Clearly describe what you were trying to accomplish
+- List the queries you attempted
+- Explain why existing results were insufficient
+- Suggest what type of documentation would help (guide, example, architectural explanation)
+
+**Example escalation:**
+```
+Unable to find information about: "implementing custom layout managers in Neo.mjs"
+
+Queries attempted:
+- "custom layout manager"
+- "layout implementation patterns"
+- "extending layout base class"
+
+Gap identified: Need learning guide covering layout manager development patterns,
+lifecycle methods, and integration with container components.
+```
+
+**Do NOT:**
+- Implement solutions based on incomplete information
+- Use patterns from other frameworks inappropriately
+- Create code based on assumptions or training data
+
+### Handling Technical Failures
+
+If a query search returns no results, do not guess. Rephrase your query. Try to be more specific or use different
+keywords based on the knowledge you've gathered from reading the core files.
+
+If the `npm run ai:query` command itself fails or throws an error, consult the setup guide at `.github/AI_QUICK_START.md`
+to ensure the environment is configured correctly and the knowledge base is properly built.
+
+## 4. Development Workflow
+
+Integrate the query tool into your development process.
+
+1.  **Understand the Task & Query:** For any new task (e.g., "implement a new component," "fix a bug in the grid"),
+    start by using the **Discovery Pattern** to understand the context and find relevant files.
+2.  **Analyze Existing Code & Enhance Documentation:** Read the top 1-3 files returned by your queries. When reading,
+    focus on understanding the existing class structure, method signatures, configuration patterns, and overall architecture.
+    **If you encounter source code lacking intent-driven comments, apply the "Knowledge Base Enhancement Strategy" to add
+    meaningful documentation before proceeding.** Your goal is to make your changes fit in seamlessly.
+3.  **Implement Changes:** Write or modify the code, strictly adhering to the conventions you observed.
+4.  **Verify:** After making changes, run any relevant verification tools, such as tests, to ensure your changes are
+    correct and meet the project's standards. For bug fixes, ensure you've created regression tests
+    (see `learn/guides/UnitTestingWithSiesta.md` for guidance).
+5.  **Use `text` over `html` in VDOM:** When creating VDOM nodes, always prefer using the `text` property over the `html`
+    property. `text` is mapped to the `textContent` DOM attribute, which is inherently secure against XSS attacks. `html`
+    is mapped to `innerHTML` and should be avoided unless you are intentionally rendering trusted HTML content.
+    This is especially important as the framework defaults to a `domApiRenderer` where `textContent` is also more performant.
+
+## This Changes the Workflow
+
+The enhanced workflow becomes:
+
+1. **Query for understanding** (as before)
+2. **Read available documentation** 
+3. **If source lacks context**: Analyze the code and **add meaningful comments**
+4. **Implement your changes** with the new understanding
+5. **The knowledge base gets richer** for the next session
+
+This approach transforms the AI agent from just a consumer of documentation to a **contributor** to the project's
+long-term maintainability.
+
+## 5. Session Maintenance
+
+Your initialization is a snapshot in time. The codebase can change. If you pull new changes from the repository, you
+should consider re-running your initialization steps (reading `structure.json`, `Neo.mjs`, and `core/Base.mjs`) to
+ensure your understanding is up-to-date.
+
+Furthermore, after pulling changes, the local knowledge base may be out of sync.
+You should run `npm run ai:build-kb` to re-embed the latest changes into the database.

package/README.md

@@ -141,6 +141,8 @@ That’s Neo.mjs in action — solving problems others can’t touch.
 
 * **Async-Aware Component Lifecycle**: With the `initAsync()` lifecycle method, components can handle asynchronous setup (like fetching data or lazy-loading modules) *before* they are considered "ready." This eliminates entire classes of race conditions and UI flicker, allowing you to build complex, data-dependent components with confidence.
 
+* **AI-Native by Design**: Neo.mjs is architected to be developed *by* AI agents. With a deterministic structure, a local knowledge base for querying, and clear guidelines ([AGENTS.md](./AGENTS.md)), the framework is ready for the next generation of software development. This architectural discipline not only enables AI collaboration but also results in a cleaner, more predictable, and more maintainable codebase for human developers.
+
 <p align="center">
   <img src="./resources/images/workers-focus.svg" alt="Neo.mjs Worker Architecture Diagram - Shows Main Thread, App Worker, VDom Worker, Canvas Worker, Data Worker, Service Worker, Backend connections.">
 </p>

package/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='10.6.0'
+         * @member {String} version='10.8.0'
          */
-        version: '10.6.0'
+        version: '10.8.0'
     }
 
     /**

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2025-09-19",
+      "datePublished": "2025-09-23",
       "publisher": {
         "@type": "Organization",
         "name": "Neo.mjs"

package/apps/portal/resources/data/blog.json

@@ -1,4 +1,16 @@
 [{
+    "author"      : "Tobias Uhlig",
+    "authorImage" : "author_TobiasUhlig.jpeg",
+    "date"        : "Sep 23, 2025",
+    "id"          : 71,
+    "image"       : "PlatformAnswersQuestions.jpg",
+    "name"        : "AI-Native, Not AI-Assisted: A Platform That Answers Your Questions",
+    "provider"    : "Medium",
+    "publisher"   : "",
+    "selectedInto": [],
+    "type"        : "Blog Post",
+    "url"         : "https://tobiasuhlig.medium.com/ai-native-not-ai-assisted-a-platform-that-answers-your-questions-0c08f5a336ae?source=friends_link&sk=45cc238e4f342672d3eb3244136b7770"
+}, {
     "author"      : "Tobias Uhlig",
     "authorImage" : "author_TobiasUhlig.jpeg",
     "date"        : "Sep 17, 2025",

package/apps/portal/view/Viewport.mjs

@@ -123,9 +123,9 @@ class Viewport extends BaseViewport {
      * @returns {String}
      */
     getSize(width) {
-        if (width <=  640) {return 'x-small'}
-        if (width <= 1024) {return 'small'}
-        if (width <= 1296) {return 'medium'}
+        if (width <=  640) return 'x-small';
+        if (width <= 1024) return 'small';
+        if (width <= 1296) return 'medium';
         return 'large'
     }
 

package/apps/portal/view/home/FooterContainer.mjs

@@ -108,7 +108,7 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                text  : 'v10.6.0'
+                text  : 'v10.8.0'
             }]
         }],
         /**

package/apps/portal/view/learn/ContentComponent.mjs

@@ -8,7 +8,7 @@ const
     regexLabOpen      = /<!--\s*lab\s*-->/g,
     regexLivePreview  = /```(javascript|html|css|json)\s+live-preview\s*\n([\s\S]*?)\n\s*```/g,
     regexNeoComponent = /```json\s+neo-component\s*\n([\s\S]*?)\n\s*```/g,
-    regexReadonly     = /```(javascript|html|css|json)\s+readonly\s*\n([\s\S]*?)\n\s*```/g;
+    regexReadonly     = /```(bash|javascript|html|css|json|scss)\s+readonly\s*\n([\s\S]*?)\n\s*```/g;
 
 /**
  * @class Portal.view.learn.ContentComponent