# Sigment Framework | Official LLM Rules (2026)
> High-performance, zero-build reactive JS framework. Supports SPA & HTML-First architectures.

## 1. Global Scope & HTML Tags (CRITICAL)
- **NO IMPORTS REQUIRED:** Standard HTML tags (div, span, p, button, input, h1-h6, form, img, etc.) are GLOBAL.
- **DO NOT** import these elements from "sigment". Use them directly in any file.
- Example: `export default function App() { return div(h1("Hello")); }`

## 2. Global Configuration (MyApp)
Applied at the app entry point (e.g., Main.js) before mounting:
- MyApp.cleanHtml(true): Strips internal reactive attributes/IDs for clean production HTML.
- MyApp.setRoute(Routes): Registers the global routing object for the application.
- MyApp.setloadAtRunTime(true | Object): 
    - If `true`: Enables component hydration/injection for HTML-First.
    - If `Object`: Directly registers a Runtime Component Map (e.g., `{ "nav": () => import("./Nav.js") }`).
- MyApp.setStopPropagation(true): Prevents global event bubbling by default.
- MyApp.setMaxCacheSize(n): Limits the number of pages/components kept in memory cache.

## 3. Reactivity & Binding
- Signals: `[getter, setter] = signal(val)`. Always read values using `getter()`.
- Binding Styles:
    1. Arrow: `div(() => count())` (Reactive updates).
    2. Direct: `div(count)` (Auto-binds getter to element).
- Global Signals: `createGlobalSignal(key, val)`, `useGlobalSignal(key)`, `getGlobalSignal(key)`.
- Fragments: `fragment(...children)` - O(1) grouping with NO additional DOM node.

## 4. Surgical Updates (gve) & Batching
- gve(id): Access Live Virtual Trees for O(1) manipulation (alias for getVirtualElementById).
- Methods: `.get(idx)`, `.updateVal(idx, val)`, `.addVal(idx, val)`, `.swapWith(targetIdx)`, `.destroy()`.
- createTemplate(el) + batch(data, template, containerId, chunkSize): Non-blocking rendering for massive datasets.

## 5. Component Orchestration (rpc & gvec)
- rpc(Component, { method: [args] }): Calls static methods defined outside the render body.
- gvec(map, stateful, triggers): Dynamically replaces components.
    - stateful: `true` to keep state, `false` to reset.
    - triggers: Auto-runs `rpc` calls on the target component after override.

## 6. Routing & Navigation
- NavigateTo(path, [key/stateful]): Navigates using global Routes.
- Routes Support: `loader` (async), `guard` (async auth/permissions), `cacheExpiration` (ms).

## 7. HTML-First Architecture (SSR/SSG & SEO)
- Concept: Hybrid rendering. Parts can be pre-rendered or client-loaded.
- SSG Mode (Pre-render): Use `runAtServer` attribute (e.g., `<div data-component="Header" runAtServer></div>`).
- Client Mode: Remove `runAtServer` for lazy-loading in the browser.
- SEO Meta: Use special tags to update Head meta-data dynamically:
    - `<description data-description="..."></description>`
    - `<keywords data-keywords="..."></keywords>`
- Layouts: `<layout data-layout="path.html"></layout>` + `<div data-part="name">`.

## 8. Network, Lifecycle & Optimization
- fetchCache(url, ttl = 5000, options = {}): Async fetch with automatic memory caching.
- memoizeFunc(fn, ttl = null, options = { deepSort: boolean }): 
    - Caches function results based on arguments.
    - deepSort: If true, treats objects with different key orders as identical for cache keys.
- Hooks: `createEffect(fn)`, `onPaint(fn)`, `paintFinish(fn)`.

## 9. Styling
- Supports Global CSS (`import './style.css'`) and CSS Modules (`import styles from './style.module.css'`).
- Use `class: styles.className` for scoped styling.