npm - @yuktishaalaa/yuktai - Versions diffs - 5.3.9 → 5.3.10 - Mend

@yuktishaalaa/yuktai 5.3.9 → 5.3.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/README.md CHANGED Viewed

@@ -1,1057 +1,145 @@
 # @yuktishaalaa/yuktai
-> Universal accessibility, AI and data toolkit for Next.js, React **and plain HTML**. One install (or one script tag) brings WCAG 2.2 auto-fix, in-browser RAG, an AI agent, code generation, an accessible data grid with Agentic AI + WebMCP, and an agentic toolkit that audits, explains and fixes pages and answers questions about your data. Zero API keys, zero cost, works offline.
+> Accessibility, AI and data toolkit for **Next.js, React and plain HTML**. One install or one script tag. Runs in the browser: no API keys, no server, no cost, works offline.
 [![npm](https://img.shields.io/npm/v/@yuktishaalaa/yuktai)](https://www.npmjs.com/package/@yuktishaalaa/yuktai)
 [![downloads](https://img.shields.io/npm/dm/@yuktishaalaa/yuktai)](https://www.npmjs.com/package/@yuktishaalaa/yuktai)
 [![license](https://img.shields.io/badge/license-GPL--3.0-blue)](./LICENSE)
-[![node](https://img.shields.io/badge/node-%3E%3D18-blue)](https://nodejs.org)
 [![Next.js](https://img.shields.io/badge/Next.js-13%2B-black)](https://nextjs.org)
+[![Rust](https://img.shields.io/badge/engine-Rust%20%2B%20WebAssembly-orange)](./rust)
+[![docs](https://img.shields.io/badge/docs-live%20demos-0a4a85)](https://yuktaidocs.netlify.app/)
 [![XERJ Corpus Hub contributor](https://hub.xerj.org/contributors/sandeepmiriyala03/badge.svg)](https://hub.xerj.org/contributors/sandeepmiriyala03)
-Built in free time by [Sandeep Miriyala](https://github.com/sandeepmiriyala03).
-**Live demos:**
-- Staff directory (Next.js): https://aksharatantra.miriyala.in/staffdirectory
-- Vanilla JS, plain HTML, installable PWA: https://sandeepmiriyala03.github.io/yuktai/vanilla/
-- Ratnalabala, a Telugu poetry app built on YuktAI Grid: https://ratnalabala.vercel.app/poems?view=grid
-**Recognition:** yuktai is part of the [XERJ Corpus Hub](https://hub.xerj.org). Contributor profile: [hub.xerj.org/contributors/sandeepmiriyala03](https://hub.xerj.org/contributors/sandeepmiriyala03).
----
+📖 **Docs and live demos:** https://yuktaidocs.netlify.app/
-## The story
-I have been building web apps since 2013. In all those years, the same things kept breaking on almost every website I touched: missing ARIA labels, no keyboard navigation, forms that senior citizens couldn't figure out, data grids that broke on mobile, accessibility tools that cost money, and AI tools that needed API keys.
-I wanted something without any of those barriers. Free. Open source. One install. Works on every device. No account. No key. No server.
-So I built yuktai, one weekend and one late night at a time.
+Built in free time by [Sandeep Miriyala](https://github.com/sandeepmiriyala03).
 ---
-## What's inside
-Six modules ship in a single npm package, for React/Next.js and, since v5.3, for plain HTML pages with one script tag:
+## Features
-| Module | Features | What it does |
+| | Feature | What it does |
 |---|---|---|
-| **1. Accessibility Engine** | 16 | WCAG 2.2 auto-fix, speak on focus, colour-blind modes, dyslexia font, skip links |
-| **2. YuktaiGrid** ⭐ | 19 | Accessible data grid with Agentic AI, WebMCP, 5 WCAG themes, English/Telugu UI |
-| **3. In-Tab RAG** | 11 | Ask questions about any page, offline, no API |
-| **4. Autonomous AI Agent** | 13 | Natural-language browser guidance |
-| **5. Vibe Coder** | 19 | Generate full Next.js projects from plain English |
-| **6. Agentic AI Toolkit** | 10 | Accessibility copilot, QA reports, form and design review, smart grid queries, BI answers, multi-step tasks, voice settings |
-| **Vanilla JS build** 🆕 | All | Every module above for plain HTML, CSS and JavaScript: no React, no build step, installable as a PWA |
----
-## What's new in v5.3.9: `YuktAIWrapper` launcher, opt-in buttons, Rust Ask page
-Turn on only the buttons a site needs, put them behind one launcher, and let 💬 Ask page find answers with the Rust RAG first.
-```tsx
-"use client";
-import type { ReactNode } from "react";
-import { YuktAIWrapper } from "@yuktishaalaa/yuktai";
-export default function YuktaiClient({ children }: { children: ReactNode }) {
-  return (
-    <YuktAIWrapper position="left" launcher showAccessibility showRag showAgent showVibeCoder engine="rust">
-      {children}
-    </YuktAIWrapper>
-  );
-}
-```
-| Prop | Button |
-|---|---|
-| `launcher` | ✨ one button that shows/hides the others. Remembers the visitor's choice, closes with Esc, sets `<html data-yuktai-tools="open\|closed">` for styling |
-| `showAccessibility` | ♿ Accessibility preferences |
-| `showRag` | 💬 Ask page |
-| `showAgent` | 🤖 AI Agent |
-| `showVibeCoder` | ⚡ Vibe Coder (a developer tool; leave it off on public sites) |
-| `engine` | 💬 Ask page search: `"rust"`, `"auto"` or `"ts"` |
-- **Opt-in:** as soon as you set `launcher`, `showAccessibility` or `showVibeCoder`, only the buttons you turn on are shown, stacked with no gaps. Without those props the wrapper behaves exactly as before (♿ always; ⚡ with `showAgent`).
-- **💬 with `engine`:** the page RAG finds the best passages first (Rust: fast, offline, Telugu-aware) and shows them at once with "From this page" and the search time. If Gemini Nano or Transformers.js is available, the model then writes the answer from **only those passages**, instead of reading the whole page (Gemini) or embedding every chunk for each question (Transformers.js). It works even with no model at all. Without `engine`, 💬 works exactly as before.
-- **Fixes:** ⚡ Vibe Coder can now be turned off on its own (it used to follow `showAgent`); Esc now closes the Vibe Coder panel too.
----
-## What's new in v5.3.8: Rust RAG for "Ask page" (optional)
-The page + data search behind **Ask page** (`createContextIndex`, used after `askAboutPage`) can now run in **Rust**. Same passages, same BM25 scores (bit for bit), same answers: only faster. Free, offline, and it works in PWAs: the engine (about 33 KB of WebAssembly) is embedded in the package.
-```tsx
-<AgenticPanel engine="rust" />                                  // React / Next.js: Ask page tab
-```
-```js
-yuktai.mountAgenticPanel("#tools", { engine: "rust" })            // plain HTML
-const index = yuktai.createContextIndex({ rows, columns, engine: "rust" })
-await index.ask("Which office handles leave requests?")
-```
-| `engine` | What runs |
-|---|---|
-| `"ts"` (default) | TypeScript, unchanged |
-| `"rust"` | Rust inverted index for every search |
-| `"auto"` | Rust from 1,000 passages |
-- **How it is faster:** TypeScript scans every word of every passage for each question. Rust builds an inverted index once and jumps straight to the passages that contain the question's words (and their longer/shorter forms, as before).
-- **Same results, tested:** TypeScript still tokenizes (Telugu-aware) and computes `idf` with `Math.log`; Rust does the counting and the BM25 arithmetic in the same order, so scores match bit for bit. Tests compare both engines on English and Telugu documents, grid rows and real page text (1,000+ searches).
-- **Measured** (Node 22, median, per question):
-| Content | TypeScript | Rust | Speed-up |
-|---|---|---|---|
-| Long page, 500 passages | 2.3 ms | 0.08 ms | 27× |
-| Help docs, 5,000 passages | 18.8 ms | 0.45 ms | 42× |
-| Grid, 1,00,000 rows | 46.2 ms | 3.4 ms | 14× |
-  Rust builds its index once per content change (240 ms for 1 lakh rows); every question after that is fast.
-- **Also faster for everyone (both engines):** asking again on an unchanged page no longer rebuilds the index (6 ms instead of 183 ms for 5,000 passages). The React Ask tab now reuses its index between questions, like the vanilla panel.
-- **PWA:** the demo's service worker cache is now `yuktai-vanilla-v5.3.8`, so installed apps pick up the new engine.
-Source: [`rust/rag-core`](./rust/rag-core) (no dependencies, `no_std` + `alloc`). Rust tests: `npm run test:rust`.
----
-## What's new in v5.3.5: Rust grid engine (optional)
-The grid's existing search and number/date sorting can now run in **Rust**, compiled to WebAssembly. Nothing else changes: same rows, same order, same API. The default is still TypeScript, so existing apps behave exactly as before.
-```tsx
-<YuktaiGrid data={rows} columns={columns} engine="auto" />   // Rust from 10,000 rows
-```
-```js
-yuktai.renderGrid("#staff", { data: rows, columns, engine: "auto" })
-```
-| `engine` | What runs |
-|---|---|
-| `"ts"` (default) | TypeScript, unchanged |
-| `"rust"` | Rust for search and number/date sorting |
-| `"auto"` | Rust from 10,000 rows, TypeScript below |
-- **Same results, tested:** every grid (`<YuktaiGrid>`, `useGrid`, vanilla `renderGrid`) runs its real code with both engines on random mixed data (Telugu text, empty values, NaN, dates, duplicates) and must return identical rows. Text sorting stays in TypeScript, because Telugu order comes from the browser's locale rules.
-- **Faster on big data** (100,000 rows, Chromium, median of 7 runs):
-| Operation | Grid | TypeScript | Rust | Speed-up |
-|---|---|---|---|---|
-| Search "hyd" | vanilla `renderGrid` | 342 ms | 9 ms | 36× |
-| Search "సీత" | vanilla `renderGrid` | 332 ms | 9 ms | 37× |
-| Sort by date (desc) | vanilla `renderGrid` | 523 ms | 26 ms | 20× |
-| Sort by number | vanilla `renderGrid` | 43 ms | 13 ms | 3× |
-| Search "hyd" | `<YuktaiGrid>` | 25 ms | 4 ms | 6× |
-| Sort by number | `<YuktaiGrid>` | 47 ms | 14 ms | 3× |
-  Rust prepares the search text once per data change (about 130 ms for 100,000 rows), so every keystroke after that is fast. Run it yourself: `node vanilla/test/bench.mjs 100000`.
-- **Small and self-contained:** about 13 KB of WebAssembly, embedded in the package. No extra files, no bundler setup, no Rust needed to use it.
-- **Safe fallback:** if WebAssembly is unavailable, the grid quietly uses TypeScript.
-**Search time (v5.3.7, optional):** show how long each search or sort took and which engine answered, next to the row count, e.g. `12 rows · 0.9 ms · Rust`.
-```tsx
-<YuktaiGrid data={rows} columns={columns} engine="rust" showSearchTime
-  onSearchTime={({ query, ms, rows, engine }) => console.log(query, ms, rows, engine)} />
-```
+| ♿ | **Accessibility** | WCAG 2.2 auto-fix, contrast, dark mode, text size, dyslexia font, colour-blind filters, speak on focus |
+| 📊 | **YuktaiGrid** | Search, sort, pages, CSV export, 5 WCAG themes, Telugu UI, keyboard navigation |
+| 🤖 | **Ask your data** | "salary over 1 lakh in Hyderabad", BI answers, unusual rows, multi-step tasks, WebMCP |
+| 💬 | **Ask page (RAG)** | Answers from your page and data, offline |
+| 🛠 | **Page tools** | QA audit (15 WCAG checks), form and design review, voice commands |
+| 🦀 | **Rust engine** | Up to 42× faster search on big data (optional) |
+| 🎨 | **163 icons** | Any size and colour, outline or filled, safe in Server Components |
+| ⚡ | **Vibe Coder** | Plain English → a full Next.js project ZIP (developer tool) |
+| 📱 | **PWA** | Installable, works offline |
-```js
-yuktai.renderGrid("#staff", { data: rows, columns, engine: "rust", showSearchTime: true })
-grid.getSearchTime()   // { query: "hyd", ms: 0.9, rows: 12, engine: "rust" }
-```
-`useGrid` returns the same object as `grid.searchTime`. The label says **TS** whenever TypeScript did the work (for example a Telugu text sort), so it is always truthful.
+## Supported languages
-Source: [`rust/grid-core`](./rust/grid-core) (no dependencies, `no_std`). To rebuild it: `rustup target add wasm32-unknown-unknown`, then `npm run build:rust`. Rust tests: `npm run test:rust`.
+**Use it with:** HTML · JavaScript · TypeScript · React (JSX) · Next.js (TSX)
+**Built with:** TypeScript + Rust (WebAssembly, embedded; no setup needed)
+**Interface:** English and Telugu. All 22 Indian languages for number and date formats, sorting and voice input.
 ---
-## What's new in v5.3: Vanilla JS (plain HTML)
+## Quick start
-All of yuktai now works on any HTML page, without React or a build step. The vanilla build is bundled from the same source as the npm package, so a question gets the same answer in React and in plain HTML.
+**Plain HTML:** one line, no build step
 ```html
+<script src="https://cdn.jsdelivr.net/npm/@yuktishaalaa/yuktai@5.3.9/vanilla/index.min.js"></script>
 <script>
-  window.YUKTAI_CONFIG = { position: "right", showPageTools: true }  // optional
+  yuktai.renderGrid("#staff", { data: rows, columns, engine: "auto", showSearchTime: true })
 </script>
-<script src="https://cdn.jsdelivr.net/npm/@yuktishaalaa/yuktai@5.3.0/vanilla/index.min.js"></script>
-<div id="staff"></div>
-<script>
-  const grid = yuktai.renderGrid("#staff", {
-    data: rows,
-    rowKey: "id",
-    columns: [
-      { key: "name", label: "Name" },
-      { key: "salary", label: "Salary", type: "number" },
-      { key: "joined", label: "Joined", type: "date" },
-    ],
-    agentic: true,          // question bar: "salary over 1 lakh", "average salary by department"
-    ai: true,               // assistant: custom rules, phrases, grid tools, voice input
-    locale: "en-IN",        // or "te-IN" for Telugu UI and messages
-    webmcp: true,
-  })
-  await grid.ask("salary over 1 lakh in Hyderabad")
-  yuktai.mountAgenticPanel("#tools", { defaultTab: "qa" })   // Copilot, QA, Forms, Design, Ask, Voice
-</script>
-```
-| React / Next.js | Vanilla JS |
-|---|---|
-| `<YuktaiGrid>` | `yuktai.renderGrid(container, options)` |
-| `useAgenticGrid` + `<AgenticGridBar>` | `yuktai.createAgenticGrid()` + `yuktai.mountAgenticGridBar()`, or `agentic: true` |
-| `useYuktaiGridAgent` | `yuktai.createGridAgent()` |
-| `<YuktaiGridWebMCP>` | `yuktai.registerWebMCP()`, or `webmcp: true` |
-| `<AgenticPanel>` | `yuktai.mountAgenticPanel()` |
-| `<YuktAIWrapper>` | Automatic floating accessibility button (and a page tools button with `showPageTools: true`) |
-| Every function (`runQaAudit`, `askInsight`, `parseAmount`, …) | Same names on `window.yuktai` |
-**Grid features in the vanilla build:**
-- search, sort, page-size switching, row selection and CSV export (Excel-safe)
-- table, card or auto view; 5 WCAG themes; Telugu UI
-- loading and empty states; row highlighting that scrolls to the row
-- ARIA grid keyboard navigation: arrow keys, Home/End, Page Up/Down, Space to select, Enter to open
-**Live demo:** https://sandeepmiriyala03.github.io/yuktai/vanilla/. It shows every feature, including a Telugu grid of the 27 poems from *Rangu Rangula Ratnadeepalu*. It is an installable PWA that works offline after the first visit, and it uses only yuktai's own inline SVG icons and the yuktai teal palette.
-**Tested** in Chromium: 37 end-to-end checks pass, with axe-core reporting 0 violations and no console errors (`node vanilla/test/e2e.mjs`). Full API: [`vanilla/README.md`](./vanilla/README.md).
-### Accessibility engine fixes in v5.3 (React and vanilla)
-- Auto-fix no longer adds an `aria-label` to form fields that already have a `<label>`. Before this, it replaced the name that screen readers announce.
-- Buttons and links hidden at scan time are no longer labelled "button" or "link".
-- `<header>` and `<footer>` inside sections and dialogs no longer become page-level banner and contentinfo landmarks.
-- The fix count only includes fixes that were actually applied.
-- Visual alert and skip-link colours use the yuktai teal palette and meet a 4.5:1 contrast ratio.
----
-## What's new in v5.2: Agentic AI Toolkit
-Ten agentic features, all running in the browser. No API keys, and no page or grid data leaves the device unless you plug in your own model through a `generate` or `summarize` hook.
-| # | Feature | What it does | Main export |
-|---|---|---|---|
-| 1 | Accessibility Copilot | Watches the page live, explains each issue in plain English, applies safe fixes and undoes them | `createA11yCopilot` |
-| 2 | Page Understanding | Answers "What does this page do?" and "Which form fields are missing labels?" | `analyzePage`, `askAboutPage` |
-| 3 | Smart Data Grid | Turns "overdue and over ₹10,000" into real filters, finds unusual rows, summarises data | `runGridQuery`, `detectAnomalies`, `summarizeRows` |
-| 4 | Voice Accessibility | "Turn on high contrast", "bigger text", "next row", plus Telugu phrases like "పెద్ద అక్షరాలు" | `createVoiceA11yController` |
-| 5 | QA Tester | 15 checks with WCAG references, a score, pass/fail, and a Markdown or JSON report | `runQaAudit`, `auditToMarkdown` |
-| 6 | Forms Agent | Reviews labels, autocomplete, error messages and senior-friendliness | `reviewForms` |
-| 7 | Page + Data RAG | Answers from page text and grid rows, Telugu-aware, offline | `createContextIndex` |
-| 8 | Multi-Step Tasks | "Show overdue, highlight the errors, then summarise what changed" | `runTasks` |
-| 9 | BI Copilot | "Which region had the highest drop in conversion this week?" | `askInsight`, `comparePeriods` |
-| 10 | Design Review | Hierarchy, readability, focus states, clutter, consistency | `reviewDesign` |
-### Page tools in one panel
-```tsx
-"use client";
-import { AgenticPanel } from "@yuktishaalaa/yuktai";
-export default function A11yTools() {
-  return <AgenticPanel defaultTab="copilot" voiceLang="en-IN" />;
-}
-```
-Tabs: **Copilot**, **QA report**, **Forms**, **Design**, **Ask page**, **Voice**. The panel marks itself with `data-yuktai-panel`, so it never audits its own UI.
-### Ask your grid
-```tsx
-"use client";
-import { YuktaiGrid, useAgenticGrid, AgenticGridBar } from "@yuktishaalaa/yuktai";
-const columns = [
-  { key: "name", label: "Customer" },
-  { key: "status", label: "Status" },
-  { key: "region", label: "Region" },
-  { key: "balance", label: "Balance", type: "number" as const },
-  { key: "dueDate", label: "Due date", type: "date" as const },
-];
-export default function Customers({ rows }: { rows: Customer[] }) {
-  const grid = useAgenticGrid({ data: rows, columns, rowKey: "id" });
-  return (
-    <>
-      <AgenticGridBar
-        grid={grid}
-        examples={[
-          "overdue and over ₹10,000",
-          "anything unusual?",
-          "total balance by region",
-          "show overdue, then sort by balance desc, then summarize what changed",
-        ]}
-      />
-      <YuktaiGrid
-        data={grid.gridData}
-        columns={columns}
-        rowKey="id"
-        highlightIds={grid.highlightIds}
-        autoScrollToHighlight
-      />
-    </>
-  );
-}
-```
-`grid.ask(text)` picks the right tool for the question:
-| Question type | Example | Handled by |
-|---|---|---|
-| Filters and lookups | "customer starting with A and balance between 1k and 9k" | Smart grid query |
-| Unusual data | "anything unusual?" | Outliers and duplicate rows |
-| Group and period questions | "which region had the highest drop in conversion this week?" | BI copilot |
-| Several steps | "show overdue, then highlight errors, then summarise" | Task runner, with a before/after report |
-Amounts like `₹10,000`, `10k`, `1.5 lakh` and `2 crore` are understood.
-### Use the functions directly
-```ts
-import { runQaAudit, auditToMarkdown, askInsight, runGridQuery } from "@yuktishaalaa/yuktai";
-// In the browser: accessibility QA report
-const report = runQaAudit();
-console.log(report.score, report.passed);
-const md = auditToMarkdown(report); // attach to a ticket or PR
-// Anywhere: data questions
-askInsight("which region had the highest drop in conversion this week", rows, columns).answer;
-runGridQuery("overdue and over 10k", { data: rows, columns }).ids;
-```
-### Plug in your own model (optional)
-Everything works offline with rules and keyword search. To get model-written answers, pass a `generate` hook, for example Gemini Nano or your own API:
-```tsx
-<AgenticPanel generate={async (question, context) => myModel(question, context)} />
-```
-### Honest limits
-- Questions are understood with rules, not a language model, so unusual phrasing may need rewording. The parser returns `notes` explaining any assumption it made.
-- The QA and design checks are automatic heuristics. They catch common problems but don't replace testing with real users and assistive technology.
-- Smart grid queries, page answers and BI answers are in English today. Telugu and Hindi data questions are not parsed yet; use `customRules` with your own phrases for them.
-- Voice accessibility commands understand English and Telugu, not yet Hindi or other languages.
----
-## What's new in v4.6.4: YuktaiGrid Agentic AI + WebMCP
-- Shared Grid Tools used by both the Agent and WebMCP
-- Tools: search, count, columns, get row, highlight, select, open
-- WebMCP registration through `document.modelContext`
-- `useYuktaiGridAgent` hook for programmatic tool execution
-- Embedded Grid AI Assistant inside YuktaiGrid
-- English and Telugu AI UI, with English or Telugu voice input
-- Working page-size switching (10 → 20 → 50 → 100)
-- Seven inline SVG icons, no external icon dependency
-**Architecture:** User → Agent / WebMCP → Grid Tools → YuktaiGrid → Data
----
-## Works on every device
-| Device | Browser | Core features | AI engine |
-|---|---|---|---|
-| 🖥 Desktop | Chrome 147+ (needed only for Gemini Nano) | ✅ All | Gemini Nano |
-| 🖥 Desktop | Firefox / Edge / Safari | ✅ All | Transformers.js |
-| 📱 Android | Chrome Mobile | ✅ All | Transformers.js |
-| 📱 iOS | Safari Mobile | ✅ All | Transformers.js |
-| 📲 PWA offline | All browsers | ✅ All | Offline after first load |
-yuktai picks the best AI engine automatically. Users never need to know which one is running.
----
-## Install
-**Next.js 16 + React 19 (recommended)**
-```bash
-npm install @yuktishaalaa/yuktai --legacy-peer-deps
 ```
-**Next.js 13, 14, 15**
+**Next.js / React**
 ```bash
 npm install @yuktishaalaa/yuktai
 ```
-**Yarn / pnpm**
-```bash
-yarn add @yuktishaalaa/yuktai
-pnpm add @yuktishaalaa/yuktai
-```
-**Plain HTML (no install)**
-```html
-<script src="https://cdn.jsdelivr.net/npm/@yuktishaalaa/yuktai@5.3.0/vanilla/index.min.js"></script>
-```
-Requirements: Node.js 18+, npm 8+, Next.js 13+ (React builds only; the vanilla build needs only a browser).
----
-## Quick start
-### Step 1: `next.config.js`
-```js
-const nextConfig = {
-  transpilePackages: ["@yuktishaalaa/yuktai"],
-  async headers() {
-    return [
-      {
-        source: "/(.*)",
-        headers: [
-          // Needed for voice control and voice input
-          { key: "Permissions-Policy", value: "microphone=*, speaker=*" },
-        ],
-      },
-    ];
-  },
-};
-module.exports = nextConfig;
-```
-### Step 2: Client wrapper
 ```tsx
-// components/YuktaiClient.tsx
-"use client";
-import { useState, useEffect, type ReactNode } from "react";
-import { YuktAIWrapper } from "@yuktishaalaa/yuktai";
+// app/YuktaiClient.tsx
+"use client"
+import { YuktAIWrapper } from "@yuktishaalaa/yuktai"
+import type { ReactNode } from "react"
 export default function YuktaiClient({ children }: { children: ReactNode }) {
-  const [mounted, setMounted] = useState(false);
-  useEffect(() => setMounted(true), []);
-  if (!mounted) return <>{children}</>;
   return (
-    <YuktAIWrapper position="left" showRag showAgent>
+    <YuktAIWrapper position="left" launcher showAccessibility showRag engine="rust">
       {children}
     </YuktAIWrapper>
-  );
-}
-```
-### Step 3: `app/layout.tsx`
-```tsx
-import YuktaiClient from "@/components/YuktaiClient";
-export default function RootLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <html lang="en">
-      <body>
-        <YuktaiClient>
-          <main>{children}</main>
-        </YuktaiClient>
-      </body>
-    </html>
-  );
-}
-```
-That's it. Floating buttons appear on every page: ♿ opens the accessibility panel, 💬 opens "Ask this page", and the agent button opens the AI agent.
-To add the v5.2 agentic tools, place `<AgenticPanel />` or `useAgenticGrid` in any client component (see [What's new in v5.2](#whats-new-in-v52-agentic-ai-toolkit)).
-### Wrapper props
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `position` | `"left" \| "right"` | `"left"` | Which side the buttons appear on |
-| `showRag` | `boolean` | `false` | Show the 💬 Ask-this-page button |
-| `showAgent` | `boolean` | `false` | Show the AI agent button |
-| `config` | `Partial<A11yConfig>` | `undefined` | Accessibility config overrides |
-| `children` | `ReactNode` | required | Your app content |
----
-## Module 1: Accessibility Engine
-Scans every element and injects missing accessibility attributes automatically. Covers headings, images, forms, tables, lists, landmarks, and ARIA widgets. Watches for new DOM elements with `MutationObserver`.
-**Features**
-- WCAG 2.2 auto-fix: ARIA, roles, tabindex, scope, autocomplete, alt text
-- Speak on focus using browser SpeechSynthesis
-- Voice control using the SpeechRecognition API
-- Visual alerts for deaf and hard-of-hearing users
-- High contrast, dark mode, reduce motion, large targets (44×44)
-- Colour-blind modes: Deuteranopia, Protanopia, Tritanopia, Greyscale
-- Dyslexia font: Atkinson Hyperlegible
-- Local font picker and font scaling from 80% to 130%
-- Audit badge with a WCAG score from 0 to 100 (localhost only)
-- Skip links, focus trap, saved preferences, reset
-**Direct API**
-```ts
-import { wcagPlugin, type A11yConfig } from "@yuktishaalaa/yuktai";
-const config: A11yConfig = {
-  enabled: true,
-  highContrast: false,
-  darkMode: false,
-  reduceMotion: false,
-  largeTargets: false,
-  speechEnabled: false,
-  colorBlindMode: "none", // none | deuteranopia | protanopia | tritanopia | achromatopsia
-  autoFix: true,
-  showPreferencePanel: true,
-  showSkipLinks: true,
-  showAuditBadge: false, // dev only (localhost)
-  fontSizeMultiplier: 1,
-  timeoutWarning: 0, // seconds, 0 = off
-};
-const report = wcagPlugin.applyFixes(config);
-console.log(report.fixed); // number of fixes applied
-console.log(report.score); // 0–100
-```
-### WCAG coverage
-| Standard | Criteria | Examples |
-|---|---|---|
-| WCAG 2.0 | 19 | Alt text, roles, labels, tables, landmarks, focus |
-| WCAG 2.1 | 7 | Touch targets, reflow, motion, orientation |
-| WCAG 2.2 | 3 | Focus appearance, target size, timeout warning |
-| Beyond WCAG | Extras | Speech, visual alerts, colour-blind modes, dyslexia font, audit score |
----
-## Module 2: YuktaiGrid ⭐
-An accessible data grid for Next.js, with an embedded AI assistant, agent tools, and WebMCP support.
-### Basic usage
-```tsx
-"use client";
-import { YuktaiGrid } from "@yuktishaalaa/yuktai";
-const data = [
-  { id: 1, name: "Sandeep", role: "Developer", salary: 85000 },
-  { id: 2, name: "Priya", role: "Designer", salary: 90000 },
-];
-export default function EmployeesPage() {
-  return (
-    <YuktaiGrid
-      data={data}
-      rowKey="id"
-      columns={[
-        { key: "name", label: "Name", sortable: true },
-        { key: "role", label: "Role" },
-        { key: "salary", label: "Salary", type: "number", align: "right" },
-      ]}
-      theme="default" // default | high-contrast | dark | color-blind | dyslexia
-      locale="en-US" // en-US | te-IN
-      view="auto" // auto | table | card
-      search
-      ai
-      pagination={{
-        pageSize: 20,
-        showSizeChanger: true,
-        sizeOptions: [10, 20, 50, 100],
-      }}
-    />
-  );
+  )
 }
 ```
-### Grid features
-- Real-time search, column sorting, client-side pagination with page-size switching
-- Mobile card view below a configurable breakpoint
-- Loading and empty states
-- 5 WCAG themes
-- Row selection, custom cell render, `rowKey`
-- Row highlighting with optional auto-scroll
-- Keyboard navigation, ARIA grid semantics, 44×44 targets
-- English and Telugu UI
-- Embedded Grid AI Assistant with voice and chat
-- **New in v5.2:** compound natural-language questions, anomaly detection and BI answers through `useAgenticGrid`
-### Grid AI Assistant
-Runs embedded in the grid or as a standalone component. Intent parsing runs locally and supports search, sort, count, highest, lowest, average, total, and row lookup.
-```tsx
-<YuktaiGridAI
-  data={data}
-  columns={columns}
-  onSearch={handleSearch}
-  onSort={handleSort}
-  language="te-IN" // AI UI and responses: en-US | te-IN
-  inputLanguage="te-IN" // voice input: en-IN, en-US or any of the 22 Indian languages
-  embedded
-/>
-```
-Voice recognition depends on browser Web Speech API support.
-### Agent tools
-Generic, reusable grid operations shared by the Agent and WebMCP:
-```ts
-import {
-  searchGrid,
-  countGrid,
-  getColumns,
-  getRow,
-  highlightRows,
-  selectRow,
-  openRow,
-} from "@yuktishaalaa/yuktai";
-```
-Run tools programmatically:
-```tsx
-import { useYuktaiGridAgent, type GridAgentTool } from "@yuktishaalaa/yuktai";
-const tools: GridAgentTool[] = [
-  {
-    name: "search",
-    description: "Search grid rows by a text query",
-    execute: async ({ query }) => searchGrid(data, query),
-  },
-];
-const { executeTool, loading } = useYuktaiGridAgent({ tools });
-```
-**Design principle:** keep generic tools in the package and put app-specific rules in your app.
-```text
-Generic YuktAI tools  +  Your domain rules  =  Your application agent
-```
-### WebMCP
-Exposes grid tools to browser AI agents through `document.modelContext`, so agents call real operations instead of guessing from the DOM. Registration is invisible in the UI.
-```tsx
-<YuktaiGrid
-  data={rows}
-  columns={columns}
-  ai
-  webmcp
-  toolName="my_grid"
-  toolDescriptions={TOOL_DESCRIPTIONS}
-  onWebMCPStatusChange={setStatus} // unsupported | registering | ready | partial | error
-/>
-```
-Or standalone:
 ```tsx
-<YuktaiGridWebMCP data={data} columns={columns} />
-```
-WebMCP is not available in every browser, so always handle the `unsupported` status gracefully.
-### Large datasets (100K+ rows)
-Client-side pagination handles a few thousand rows well. For anything larger, use server-side pagination and disable the grid's built-in search and pagination.
-`src/app/api/employees/route.ts`:
-```ts
-import { NextRequest, NextResponse } from "next/server";
-let cachedData: any[] | null = null;
-let cacheTime = 0;
-const TTL_MS = 60_000;
-async function fetchAll(): Promise<any[]> {
-  const now = Date.now();
-  if (cachedData && now - cacheTime < TTL_MS) return cachedData;
-  const res = await fetch("https://your-api.com/employees", { cache: "no-store" });
-  const json = await res.json();
-  cachedData = Array.isArray(json) ? json : json.employees ?? json.data ?? [];
-  cacheTime = now;
-  return cachedData;
-}
-export async function GET(req: NextRequest) {
-  const p = req.nextUrl.searchParams;
-  const page = Math.max(1, parseInt(p.get("page") || "1"));
-  const pageSize = Math.max(1, parseInt(p.get("pageSize") || "5000"));
-  const search = (p.get("search") || "").toLowerCase().trim();
-  const all = await fetchAll();
-  const filtered = search
-    ? all.filter((r) => Object.values(r).some((v) => String(v).toLowerCase().includes(search)))
-    : all;
-  const total = filtered.length;
-  const rows = filtered.slice((page - 1) * pageSize, page * pageSize);
-  return NextResponse.json({
-    rows,
-    pagination: { page, pageSize, totalRows: total, totalPages: Math.ceil(total / pageSize) },
-  });
-}
+// app/layout.tsx: wrap your app
+<body><YuktaiClient>{children}</YuktaiClient></body>
 ```
-Page:
+**Grid and icons**
 ```tsx
-const [apiResp, setApiResp] = useState<any>(null);
-const [currentPage, setPage] = useState(1);
-useEffect(() => {
-  fetch(`/api/employees?page=${currentPage}&pageSize=5000`)
-    .then((r) => r.json())
-    .then(setApiResp);
-}, [currentPage]);
+import { YuktaiGrid } from "@yuktishaalaa/yuktai"
+import { SearchIcon } from "@yuktishaalaa/yuktai/icons"
-<YuktaiGrid
-  data={apiResp?.rows ?? []}
-  columns={columns}
-  search={false} // handled server-side
-  pagination={false} // handled server-side
-  loading={!apiResp}
-/>;
+<YuktaiGrid data={rows} columns={columns} rowKey="id" engine="auto" showSearchTime />
+<SearchIcon size={24} color="#0a4a85" label="Search" />
 ```
-Render your own pagination bar from `apiResp.pagination`. The browser only ever holds one page in memory.
+More examples for every feature: **https://yuktaidocs.netlify.app/**
----
+### Wrapper buttons
-## Showcase: Ratnalabala (Telugu poetry)
-[Ratnalabala](https://ratnalabala.vercel.app/poems?view=grid) shows that an agentic grid is more than a chatbot next to a table. Users type or speak in Telugu, and the grid acts.
-| User says | Agent action |
+| Prop | Button |
 |---|---|
-| `ఎన్ని పద్యాలు` (how many poems) | `count` → "మొత్తం 36 పద్యాలు ఉన్నాయి." |
-| `గర్వం తెరువు` (open "Garvam") | `open` |
-| `"బుద్ధి" ఉన్న పద్యాలు` (poems with "buddhi") | `search` + highlight |
-| `అక్షర క్రమంలో` (alphabetical) | `sort(title, asc)` |
-| `ఈరోజు పద్యం` (poem of the day) | custom rule + highlight |
-**Stack:** Next.js · React + TypeScript · MUI · YuktAI Grid · FastAPI (Python) · PostgreSQL on Neon · Vercel · Web Speech API · WebMCP
-```text
-PostgreSQL → FastAPI → Next.js API proxy → Ratnalabala UI → YuktAI Grid
-                                                              ├── Agent
-                                                              └── WebMCP
-```
-```tsx
-<YuktaiGrid<PoemRow>
-  data={rows}
-  columns={COLUMNS}
-  rowKey="id"
-  locale="te-IN"
-  inputLanguage="te-IN"
-  customRules={POEM_RULES}
-  search
-  highlightIds={highlightIds}
-  autoScrollToHighlight
-  onRowClick={(row) => onOpenPoem(row.title)}
-  ai
-  webmcp
-  toolName="ratnalabala_poems"
-  toolDescriptions={TOOL_DESCRIPTIONS}
-  onWebMCPStatusChange={setWebmcp}
-/>
-```
----
-## Module 3: In-Tab RAG (Ask This Page)
-Retrieval-Augmented Generation running entirely in the browser. It extracts text chunks from the current page, embeds them, finds the best match for the question, and answers. Offline, no API key.
-| Device | Engine | How it works |
-|---|---|---|
-| Desktop Chrome with Gemini Nano | `window.LanguageModel` | Page text sent as context, instant answer |
-| Mobile and all other browsers | Transformers.js | Embeddings + `flan-t5-small`, q4 quantized |
-- About 30 MB one-time model download on mobile, cached in IndexedDB
-- Works fully offline after first load
-- All processing on device, no data sent anywhere
-**What I learned:** Transformers.js kept crashing on iOS Safari with out-of-memory errors. Quantization (same model, 75% smaller) fixed it. DistilBERT gave short, useless spans; `flan-t5-small` gives real sentences.
-**New in v5.2:** `createContextIndex` also searches grid rows (including rows on other pages of the grid) and your own documents, with keyword search that handles Telugu and Hindi script correctly.
----
-## Module 4: Autonomous AI Agent
-Type a goal in plain English. yuktai reads the page, finds the right elements, plans the steps, and highlights what to do.
-- 9 DOM traversal strategies and 11 form-label strategies
-- Works on static HTML, React, WordPress, and old government portals
-- Gemini Nano planning on desktop, Transformers.js on mobile, rule-based fallback
-- Highlights target fields, scrolls to sections, shows a numbered plan, handles iframes
-Every label strategy came from a real website: old portals put labels in the previous table cell, modern apps use `aria-label`, static pages use `placeholder`.
----
-## Module 5: Vibe Coder
-Type a business requirement and download a full Next.js 16 project as a ZIP.
-- Detects website type (12), pages (21), features (14), theme colour (8), and site name
-- Preview before generating
-- TypeScript, Tailwind + CSS Modules, mobile responsive
-- Navbar, Footer, Home, About, Contact, Services, Pricing, Auth, Dashboard
-- `npm run dev` works immediately
-No AI writes the code. It's pure template engineering.
----
-## Module 6: Agentic AI Toolkit
-The ten v5.2 features, described in detail in [What's new in v5.2](#whats-new-in-v52-agentic-ai-toolkit).
-- **Copilot and QA:** 15 WCAG checks, plain-English explanations, safe fixes with undo, downloadable reports
-- **Forms and design review:** labels, autocomplete, error messages, focus states, hierarchy, clutter, senior-friendly tips
-- **Data:** compound grid questions, outliers and duplicates, group-by, period comparison, trends
-- **Automation:** multi-step instructions with a before/after summary
-- **Voice:** accessibility settings and grid row navigation by voice, in English and Telugu
-- **React:** `AgenticPanel`, `AgenticGridBar`, `useAgenticGrid`
----
-## Gemini Nano setup (desktop Chrome, one time)
-Needed only for Gemini Nano features on desktop Chrome. Mobile and other browsers use Transformers.js automatically.
-1. Open `chrome://flags` and enable: Prompt API for Gemini Nano, Summarization API, Writer API, Rewriter API, Translation API.
-2. Click **Relaunch**.
-3. Open `chrome://components`, find **Optimization Guide On Device Model**, and click **Check for update**.
-4. Refresh your page. AI features unlock automatically.
-**Gemini Nano features:** plain-English rewriting, 3-sentence page summary, AI-generated ARIA labels, page translation in 18 languages.
-> Chrome 147 moved the APIs from `window.ai` to standalone globals such as `window.LanguageModel`. yuktai supports both.
+| `launcher` | ✨ One button that shows or hides the others |
+| `showAccessibility` | ♿ Accessibility |
+| `showRag` | 💬 Ask page |
+| `showAgent` | 🤖 AI agent |
+| `showVibeCoder` | ⚡ Vibe Coder (keep it off on public sites) |
+| `engine` | Ask page search: `"ts"`, `"rust"` or `"auto"` |
 ---
-## Icons
-163 yuktai SVG icons for Next.js and React, with no icon library needed. They are the same icons the vanilla build draws with `yuktai.icon()`.
-### Next.js setup
+## Rust engine (optional)
-```bash
-npm install @yuktishaalaa/yuktai@5.3.4
-```
+Set `engine="rust"` or `"auto"`. Results are identical to TypeScript, proven by tests, only faster. If WebAssembly is unavailable, it falls back to TypeScript.
-Import from **`@yuktishaalaa/yuktai/icons`**. This entry has no hooks and no browser code, so the icons work in **Server Components** (no `"use client"` needed), in Client Components, and in the Pages Router.
-```tsx
-// app/page.tsx — a Server Component
-import { MicIcon, SearchIcon, AccessibilityIcon, YuktaiIcon } from "@yuktishaalaa/yuktai/icons"
-export default function Page() {
-  return (
-    <>
-      {/* decorative: the button text or aria-label names it */}
-      <button type="button" aria-label="Start voice input"><MicIcon /></button>
-      {/* meaningful on its own: give it a label */}
-      <SearchIcon size={24} label="Search" />
-      {/* filled variant: blue square, glyph colour picked for contrast */}
-      <AccessibilityIcon variant="filled" color="#005A9C" size={32} label="Accessibility settings" />
-      {/* any icon by name */}
-      <YuktaiIcon name="wand" />
-    </>
-  )
-}
-```
-Importing from the main entry (`@yuktishaalaa/yuktai`) still works, but the `/icons` entry is smaller (about 30 KB) and safe on the server.
-### Props
-| Prop | Default | What it does |
-|---|---|---|
-| `size` | `20` | Width and height in pixels |
-| `color` | `currentColor` | Outline: the line colour. Filled: the background colour |
-| `variant` | `"outline"` | `"outline"` or `"filled"` |
-| `glyphColor` | auto | Filled only. White or near-black, whichever has more contrast |
-| `shape` | `"rounded"` | Filled only. `"rounded"` square or `"circle"` |
-| `strokeWidth` | `2.5` | Line thickness |
-| `label` | none | Adds `role="img"` and `aria-label`. Without it the icon is decorative (`aria-hidden`) |
-Any other SVG attribute (`className`, `style`, `id`) is passed through.
-### All 163 icons
-| Component | `name` | Component | `name` |
+| Task | TypeScript | Rust | Speed-up |
 |---|---|---|---|
-| `AccessibilityIcon` | accessibility | `CopyIcon` | copy |
-| `ContrastIcon` | contrast | `FilterIcon` | filter |
-| `MoonIcon` | moon | `CheckIcon` | check |
-| `MotionIcon` | motion | `ChevronLeftIcon` | left |
-| `ReadingIcon` | reading | `ChevronRightIcon` | right |
-| `TargetIcon` | target | `FirstIcon` | first |
-| `SpeakerIcon` | speaker | `LastIcon` | last |
-| `PaletteIcon` | palette | `SparkIcon` | spark |
-| `SkipIcon` | skip | `AlertIcon` | alert |
-| `CloseIcon` | close | `InfoIcon` | info |
-| `PlusIcon` | plus | `FormIcon` | form |
-| `MinusIcon` | minus | `EyeIcon` | eye |
-| `ResetIcon` | reset | `LayoutIcon` | layout |
-| `SearchIcon` | search | `WandIcon` | wand |
-| `SortIcon` | sort | `UndoIcon` | undo |
-| `SortUpIcon` | sortUp | `ToolsIcon` | tools |
-| `SortDownIcon` | sortDown | `PlugIcon` | plug |
-| `ChevronsIcon` | chevrons | `GridIcon` | grid |
-| `CardsIcon` | cards | `ChatIcon` | chat |
-| `MicIcon` | mic | `StopIcon` | stop |
-| `DownloadIcon` | download | | |
-**New in v5.3.2 (33):** `HomeIcon` (home), `MenuIcon` (menu), `BookIcon` (book), `CalendarIcon` (calendar), `ClockIcon` (clock), `PersonIcon` (person), `UsersIcon` (users), `GlobeIcon` (globe), `LampIcon` (lamp), `PlayIcon` (play), `PauseIcon` (pause), `SendIcon` (send), `ShareIcon` (share), `GiftIcon` (gift), `ImageIcon` (image), `FileIcon` (file), `ExternalIcon` (external), `ArrowUpIcon` (arrowUp), `ArrowLeftIcon` (arrowLeft), `ArrowRightIcon` (arrowRight), `HeadphonesIcon` (headphones), `MusicIcon` (music), `PinIcon` (pin), `MapIcon` (map), `PenIcon` (pen), `WalletIcon` (wallet), `InstallIcon` (install), `HelpIcon` (help), `TempleIcon` (temple), `MeditateIcon` (meditate), `TrophyIcon` (trophy), `BulbIcon` (bulb), `SunIcon` (sun).
-**New in v5.3.3 (58):** `DeleteIcon` (delete), `RobotIcon` (robot), `HeartIcon` (heart), `HeartFilledIcon` (heartFilled), `HubIcon` (hub), `CodeIcon` (code), `TextIcon` (text), `BoldIcon` (bold), `ItalicIcon` (italic), `UnderlineIcon` (underline), `AlignLeftIcon` (alignLeft), `AlignCenterIcon` (alignCenter), `AlignRightIcon` (alignRight), `AlignJustifyIcon` (alignJustify), `QuoteIcon` (quote), `TitleIcon` (title), `FontIcon` (font), `SpellcheckIcon` (spellcheck), `AbcIcon` (abc), `PageBreakIcon` (pageBreak), `LinkIcon` (link), `StyleIcon` (style), `LockIcon` (lock), `UnlockIcon` (unlock), `KeyIcon` (key), `RedoIcon` (redo), `SwapIcon` (swap), `ShuffleIcon` (shuffle), `FullscreenIcon` (fullscreen), `FullscreenExitIcon` (fullscreenExit), `MergeIcon` (merge), `JoinIcon` (join), `TouchIcon` (touch), `VolumeOffIcon` (volumeOff), `MusicOffIcon` (musicOff), `MusicVideoIcon` (musicVideo), `MovieIcon` (movie), `SlideshowIcon` (slideshow), `StorageIcon` (storage), `ApiIcon` (api), `DataObjectIcon` (dataObject), `ComputerIcon` (computer), `PhoneIcon` (phone), `CloudIcon` (cloud), `WifiIcon` (wifi), `WifiOffIcon` (wifiOff), `SearchOffIcon` (searchOff), `EyeOffIcon` (eyeOff), `BookmarkIcon` (bookmark), `SchoolIcon` (school), `GavelIcon` (gavel), `ArchitectureIcon` (architecture), `BrainIcon` (brain), `VolunteerIcon` (volunteer), `RadioIcon` (radio), `RadioCheckedIcon` (radioChecked), `UploadIcon` (upload), `ArrowDownIcon` (arrowDown).
-**New in v5.3.4 (31):** `FactCheckIcon` (factCheck), `ImageSearchIcon` (imageSearch), `DocumentScannerIcon` (documentScanner), `DashboardIcon` (dashboard), `CleaningIcon` (cleaning), `DragHandleIcon` (dragHandle), `ZoomInIcon` (zoomIn), `ZoomOutIcon` (zoomOut), `InsightsIcon` (insights), `ExploreIcon` (explore), `SaveIcon` (save), `LabelIcon` (label), `KeyboardIcon` (keyboard), `TrendingUpIcon` (trendingUp), `TrendingDownIcon` (trendingDown), `CakeIcon` (cake), `BarChartIcon` (barChart), `AdminIcon` (admin), `BugReportIcon` (bugReport), `SentimentSadIcon` (sentimentSad), `IntegrationIcon` (integration), `NamaskarIcon` (namaskar), `SunriseIcon` (sunrise), `SunsetIcon` (sunset), `LoginIcon` (login), `LogoutIcon` (logout), `SpeedIcon` (speed), `RepeatIcon` (repeat), `LoaderIcon` (loader), `StarIcon` (star), `ShieldCheckIcon` (shieldCheck).
-`heartFilled` and `radioChecked` have a filled part that follows the icon colour, also in the filled variant.
-`ICON_NAMES` lists every name, and the `IconName` type checks it, so `<YuktaiIcon name="mike" />` is a type error.
-### WCAG built in
-- **1.1.1 Non-text content:** decorative by default; pass `label` when the icon carries meaning on its own.
-- **1.4.11 Non-text contrast:** the filled variant picks a glyph colour with at least 3:1 contrast, and warns in the console if a custom `glyphColor` falls below that. For outline icons, choose a `color` with 3:1 against your background, for example W3C blue `#005A9C` on white (7.1:1).
-- **Forced colours (Windows High Contrast):** outline icons follow the text colour; filled icons switch to system colours.
-- **2.5.8 Target size:** an icon is not a target. Put it inside a `<button>` of at least 24×24 px (44×44 is better on touch screens).
-Helpers: `iconContrast(fg, bg)` returns the contrast ratio, `pickGlyphColor(bg)` returns the best glyph colour, and `iconSvg(name, options)` returns SVG markup as a string (for emails or `dangerouslySetInnerHTML`).
-### Plain HTML
-```html
-<span id="mic"></span>
-<script src="https://cdn.jsdelivr.net/npm/@yuktishaalaa/yuktai@5/vanilla/index.min.js"></script>
-<script>
-  document.getElementById("mic").innerHTML = yuktai.icon("mic", { size: 24, label: "Voice input" })
-</script>
-```
+| Grid search, 1 lakh rows | 342 ms | 9 ms | 36× |
+| Ask page, 5,000 passages | 18.8 ms | 0.45 ms | 42× |
 ---
-## Design principles
+## Live demos
-- **Zero API keys, zero cost, zero telemetry.** Everything runs in the browser.
-- **Zero injected ids.** Injected nodes are tracked by JavaScript references, so they never collide with your app's ids.
-- **Zero framework lock-in.** `core/renderer.ts` has no framework imports, and the vanilla build runs on any HTML page.
-- **Never reads its own UI.** Panels are marked with `data-yuktai-panel`.
-- **SSR safe.** No `window` errors on the server.
-- **Every automatic fix can be undone.** The v5.2 copilot records each change it makes.
-- **Honest limits.** Client-side pagination is for a few thousand rows; use server-side beyond that.
----
+- 📖 Docs and playgrounds: https://yuktaidocs.netlify.app/
+- Staff directory (Next.js): https://aksharatantra.miriyala.in/staffdirectory
+- Plain HTML PWA: https://sandeepmiriyala03.github.io/yuktai/vanilla/
+- Ratnalabala, a Telugu poetry app: https://ratnalabala.vercel.app/poems?view=grid
 ## Compatibility
-| | Supported |
-|---|---|
-| Next.js | 13, 14, 15, 16 |
-| Plain HTML | Any page, one script tag (vanilla build) |
-| React | 17, 18, 19 (19 needs `--legacy-peer-deps`) |
-| Node.js | 18+ |
-| Browsers | Chrome 90+, Firefox 90+, Safari 15+, Edge 90+, Samsung Internet 14+ |
----
-## Roadmap
-### Completed
-| Version | What shipped |
-|---|---|
-| **v5.3.4** | 31 more icons (163 in total): charts, zoom, save, login/logout, sunrise/sunset, namaskar, star, shield and more, so AIHACK and VajasaneyaSandhya use yuktai icons everywhere |
-| **v5.3.3** | 58 more icons (132 in total): delete, robot, heart, text-editor set, lock, link, storage, cloud, Wi-Fi and more, so Ratnalabala uses yuktai icons everywhere |
-| **v5.3.2** | 33 more icons (home, menu, book, calendar, sun, lamp, temple, meditate, share, play, pause and more), first used on the Sri Yagnavalkya Jayanti site in place of Font Awesome and Material Icons |
-| **v5.3.1** | **74 icons for Next.js and React** (41 in 5.3.1, 33 more in 5.3.2) from the new `@yuktishaalaa/yuktai/icons` entry, safe in Server Components; outline and filled variants with WCAG 1.4.11 contrast checks; same icons in the vanilla build |
-| | Yuktisárathi brand on the demo: navy and gold logo, W3C blue `#005A9C` for links and controls |
-| **v5.3** | **Vanilla JS build:** every module for plain HTML with one script tag, built from the same source as the npm package |
-| | Vanilla grid: themes, card view, Telugu UI, ARIA grid keyboard navigation, question bar, assistant with custom rules and voice, WebMCP |
-| | Vanilla page tools panel and floating accessibility button |
-| | Live demo on GitHub Pages as an installable, offline PWA with the XERJ contributor badge |
-| | Accessibility engine fixes: real labels are no longer overridden, hidden buttons are named correctly, nested landmarks, honest fix count, teal palette at 4.5:1 contrast |
-| | CDN builds on jsDelivr and unpkg; 37 end-to-end browser checks with axe-core |
-| **v5.2** | **Agentic AI Toolkit:** accessibility copilot, QA tester (15 WCAG checks), form review, design review, page understanding, page and data RAG |
-| | Smart grid queries (lakh, crore, 10k), anomaly finder, BI copilot, multi-step task runner, voice accessibility commands in English and Telugu |
-| | React: `AgenticPanel`, `AgenticGridBar`, `useAgenticGrid` |
-| **v4.6.4** | YuktaiGrid Agentic AI + WebMCP, embedded Grid AI Assistant, English and Telugu UI, page-size switching, 7 inline SVG icons |
-| **v4.x** | Accessibility engine, In-tab RAG (Gemini Nano + Transformers.js), autonomous AI agent, Vibe Coder |
-### Next (v5.4)
-- Expose the v5.2 agentic tools (QA, forms, design, page Q&A) to browser AI agents through WebMCP
-- Telugu and Hindi data questions in the smart grid parser, without needing custom rules
-- Hindi voice accessibility commands
-- More grid agent tools: group, export and compare
-- Server-side paging helpers for the vanilla grid (100K+ rows)
-### Later
-- Multilingual RAG: Telugu, Hindi, Tamil, Bengali
-- RTL layout support (Urdu, Sindhi, Kashmiri)
-- Richer browser-native AI as Chrome's built-in APIs mature
-- Multimodal grid experiences (images and charts in rows)
-- A web component build (`<yuktai-grid>`) for any framework
+Next.js 13–16 · React 17–19 (19 needs `--legacy-peer-deps`) · Node 18+ · Chrome, Edge, Firefox, Safari, Samsung Internet
----
-## Contributing
+## Honest limits
-Issues and pull requests are welcome at [github.com/sandeepmiriyala03/yuktai](https://github.com/sandeepmiriyala03/yuktai). For security issues, see [SECURITY.md](./SECURITY.md).
+- Grid questions use rules, not a language model; unusual phrasing may need rewording.
+- Ask page uses keyword search (BM25), not embeddings.
+- Telugu and Hindi data questions need `customRules` for now.
+- Automatic checks don't replace testing with real users and screen readers.
----
-## Links
+## Roadmap
-- npm: [@yuktishaalaa/yuktai](https://www.npmjs.com/package/@yuktishaalaa/yuktai)
-- GitHub: [sandeepmiriyala03/yuktai](https://github.com/sandeepmiriyala03/yuktai)
-- Demo: [aksharatantra.miriyala.in/staffdirectory](https://aksharatantra.miriyala.in/staffdirectory)
-- Showcase: [ratnalabala.vercel.app](https://ratnalabala.vercel.app/poems?view=grid)
-- Vanilla JS demo (PWA): [sandeepmiriyala03.github.io/yuktai/vanilla](https://sandeepmiriyala03.github.io/yuktai/vanilla/)
-- Vanilla JS (CDN): [cdn.jsdelivr.net/npm/@yuktishaalaa/yuktai/vanilla/index.min.js](https://cdn.jsdelivr.net/npm/@yuktishaalaa/yuktai/vanilla/index.min.js)
-- XERJ Corpus Hub: [hub.xerj.org](https://hub.xerj.org)
-- XERJ contributor profile: [hub.xerj.org/contributors/sandeepmiriyala03](https://hub.xerj.org/contributors/sandeepmiriyala03)
+- **Next:** more Rust (filters, BI, typo-tolerant search, Telugu typed in English letters), Hindi voice commands
+- **Later:** semantic RAG (hybrid search), a Python package, Angular/Vue and .NET support, more Indian-language interfaces
 ---
-## License
+**Recognition:** part of the [XERJ Corpus Hub](https://hub.xerj.org) · [contributor profile](https://hub.xerj.org/contributors/sandeepmiriyala03)
-GPL-3.0 © Sandeep Miriyala, [Yuktishaalaa AI Lab](https://github.com/sandeepmiriyala03)
+**Contributing:** issues and PRs welcome at [GitHub](https://github.com/sandeepmiriyala03/yuktai). Security: [SECURITY.md](./SECURITY.md)
-Built in free time. AI coding assistants (Claude, GPT and Gemini) helped me learn, and helped write and test parts of the code. Every design decision, review and release is mine.
+**License:** GPL-3.0 © Sandeep Miriyala, Yuktishaalaa AI Lab. AI coding assistants helped with learning, writing and testing; every design decision and release is mine.
-**Free forever. Open source. Built for every user.**
+**Free forever. Open source. Built for every user.**