Webe Tori Model 01-05 Now

// 4️⃣ Mount to the DOM app.mount('#root');

# 1️⃣ Install the core package (size ~ 62 KB gzipped) npm i @webe/tori@01.05.0

Version 01‑05 is the in the first major line (01‑xx). It adds a robust modular kernel , a type‑safe TypeScript API , and GPU‑accelerated layout calculations via WebGPU. Bottom line: Think of the torus not as a visual metaphor but as a mathematical engine that drives layout, interaction, and animation in a way that is deterministic, resolution‑independent, and easily parallelisable. 2. Core Architectural Pillars | Pillar | Description | Why It Matters | |--------|-------------|----------------| | Parametric Layout Engine (PLE) | All UI elements are placed using toroidal coordinates (θ ∈ [0, 2π), φ ∈ [0, 2π)). The engine resolves these to pixel coordinates via a configurable projection (equirectangular, Mercator, custom). | Guarantees continuous layout updates across device rotations, split‑screen, and multi‑window environments without “jump” artifacts. | | GPU‑Backed Constraint Solver | Constraints (e.g., “button A must stay 10 % of the torus radius from button B”) are compiled to WGSL and executed on the GPU. | Near‑real‑time recomputation even for thousands of elements – ideal for dashboards, AR/VR UI layers, and data‑heavy visualisations. | | Component‑First Modular System (CFMS) | Components are pure functions that accept a torus‑state and return a render‑node . The library ships with a curated set of 120+ UI primitives (cards, sliders, radial menus, 3‑D charts). | Encourages composition over inheritance , reduces bundle size (tree‑shakable), and makes it trivial to publish custom components to the WebE Marketplace. | | Unified Theming & Tokens (UTT) | A single JSON‑schema defines colour, spacing, typography, and torus curvature tokens. Themes can be hot‑reloaded at runtime, and tokens can be interpolated across the torus surface. | Provides a global design language that respects both 2‑D and 3‑D contexts (e.g., “surface‑glow” varies with φ). | | Progressive Enhancement & Graceful Degradation | When WebGPU isn’t available, the engine falls back to a WebGL‑based solver; if neither is present, a CPU fallback runs at 30 fps max. | Guarantees usable experiences on older browsers while still rewarding modern hardware. | 3. What’s New in 01‑05? | Feature | Technical Details | Real‑World Benefit | |---------|-------------------|--------------------| | Dynamic “Torus‑Warp” Animation API | Exposes a warp('φ', speed: number, easing: string) method. Internally uses a time‑varying parametric map (θ → θ + ωt). | Enables eye‑catching “infinite carousel” effects without duplicating DOM nodes. | | Lazy‑Load Layout Slices | The layout engine partitions the torus into slices (default 12° each). Slices out of view are detached from the render tree. | Cuts initial bundle weight by up to 40 % for large dashboards. | | Type‑Safe Reactive Store ( toriStore<T> ) | Built on Proxy + Signal pattern, fully typed via TypeScript 5.5. Stores can be scoped to a toroidal region, enabling per‑slice state isolation. | Eliminates race‑conditions when multiple components animate the same region. | | WebE Marketplace CLI | webe-tori publish , webe-tori install , webe-tori audit . Packages are signed with Ed25519 and hosted on a CDN with integrity checks. | Makes it safe and painless to share custom UI primitives across teams. | | Accessibility Layer (A‑Tori) | Generates ARIA‑compatible landmarks based on toroidal coordinates; adds screen‑reader‑aware “wrap‑around” navigation (e.g., pressing “right” at θ = 2π jumps to θ = 0). | Brings the model in line with WCAG 2.2 AA. | | Performance Dashboard | New Chrome‑DevTools panel ( tori‑panel ) visualises frame‑time, GPU‑kernel utilisation, and slice‑culling statistics. | Allows engineers to measure the impact of each component, not just guess. | 4. Getting Started – Step‑by‑Step Below is a minimal “Hello‑World” that renders a rotating torus‑wrapped card stack. webe tori model 01-05

# 2️⃣ Initialise a new project (optional CLI helper) npx webe-tori init my‑tori‑demo cd my‑tori‑demo

// 1️⃣ Create the root app const app = createTorusApp( // Projection: equirectangular (default) projection: 'equirect', // Optional global theme tokens theme: colors: primary: '#0066ff', surface: '#fafafa' , curvature: 0.8, // 0 = flat, 1 = perfect torus , ); // 4️⃣ Mount to the DOM app

// 3️⃣ Add a perpetual warp animation (rotate around θ) warp( axis: 'θ', speed: 0.25, // radians per second easing: 'linear', );

data.forEach((item, i) => // θ = i * 90° (π/2 rad), φ = 0 for all cards const theta = (i * Math.PI) / 2; const phi = 0; // 0 = flat

| Problem | Classical Approach | Torus‑Based Insight | |---------|-------------------|---------------------| | | Fixed‑size viewports, scroll‑jacking, “infinite scroll” hacks | The torus’s periodic boundary conditions enable a seamless wrap‑around of content without duplication. | | Responsive component scaling | Media‑queries, break‑points, CSS grid/flex hacks | By mapping UI elements onto a 2‑D parametric surface (θ, φ) the framework computes continuous scaling based on user‑device coordinates. |