@yuktishaalaa/yuktai 4.4.0 → 4.5.0

package/README.md

@@ -1,99 +1,92 @@
 # @yuktishaalaa/yuktai
 
-> Universal runtime accessibility plugin — automatically fixes WCAG 2.2 violations on every page, for every user, with zero configuration. 
+> Universal Next.js plugin for accessibility, AI, and data. One install brings WCAG 2.2 auto-fix, in-browser RAG, an AI agent, code generation, and an accessible data grid with voice + chat — zero API keys, zero 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-ISC-brightgreen)](./LICENSE)
 [![node](https://img.shields.io/badge/node-%3E%3D18-blue)](https://nodejs.org)
+[![Next.js](https://img.shields.io/badge/Next.js-16%2B-black)](https://nextjs.org)
 
----
-
-## What's new in v2.0.0
+**7,000+ developers** already installed yuktai. Built entirely in free time by [Sandeep Miriyala](https://github.com/sandeepmiriyala03) with help from Claude, GPT, and Gemini.
 
-- ✅ Built-in SpeechSynthesis — browser speaks on focus, zero install
-- ✅ Visual alerts — sliding banner for deaf users, no audio needed
-- ✅ Keyboard navigation — arrow keys, Escape, focus trap, no AT needed
-- ✅ Skip links — multi-target (main, nav, search), always visible on mobile
-- ✅ Preference panel — blind / deaf / motor / colour blind presets
-- ✅ Persistent preferences — saved to localStorage across pages
-- ✅ WCAG 2.2 — focus appearance, target size 44×44px, timeout warning
-- ✅ Audit score — 0–100 with issue breakdown (localhost dev only)
-- ✅ Dyslexia font — Atkinson Hyperlegible (research-backed)
-- ✅ React 17, 18, 19 supported
-- ✅ TypeScript declarations — full `index.d.ts` generated
+Live demo → [https://aksharatantra.miriyala.in/staffdirectory](https://aksharatantra.miriyala.in/staffdirectory)
 
 ---
 
-## Install
+## The story
 
-### React 17 or 18
-```bash
-npm i @yuktishaalaa/yuktai
-```
+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. AI tools that needed API keys.
 
-### React 19 or MUI v5 conflict
-```bash
-npm i @yuktishaalaa/yuktai --legacy-peer-deps
-```
+I wanted something without any of those barriers.
 
-### MUI v5 + React 19 permanent fix
-```bash
-npm i @mui/material@6 @mui/icons-material@6 --legacy-peer-deps
-```
+Free. Open source. One install. Works on every device. No account. No key. No server.
 
-### Requirements
-- Node.js 18 or higher
-- npm 8 or higher
+So I built yuktai — one weekend and one late-night at a time. This README is the map of everything that shipped.
 
 ---
 
-## What it does
+## What's inside
 
-yuktai scans every HTML element on the page and automatically injects missing accessibility attributes — `aria-label`, `alt`, `role`, `tabindex`, `scope`, `autocomplete`, `aria-required`, `aria-expanded`, and more. It also:
+Five modules ship in the single npm package:
 
-- Injects multi-target skip links — main content, navigation, search
-- Ensures `<html lang>` and `<title>` are present
-- Fixes `<meta viewport>` if it blocks user zoom
-- Watches for new DOM elements via `MutationObserver`
-- Applies user-controlled visual preferences — high contrast, dark mode, reduce motion, large targets, font scale, dyslexia font, colour blind simulation
-- Speaks focused elements aloud via browser SpeechSynthesis — zero install
-- Shows visual alert banners for deaf users — no audio dependency
-- Enforces keyboard navigation — arrow keys, Escape, focus trap in modals
-- Saves user preferences to localStorage across sessions
-- Shows accessibility audit score 0–100 in development
+| Module | Features | What it does |
+|---|---|---|
+| **1. Accessibility Engine** | 16 | WCAG 2.2 auto-fix, speak on focus, colour-blind modes, dyslexia font, skip links |
+| **2. YuktaiGrid** ⭐ NEW | 12 | Accessible data grid with 5 WCAG themes, search, sort, pagination, mobile card view |
+| **3. In-Tab RAG** | 11 | Ask questions about any page — offline, no API |
+| **4. Autonomous AI Agent** | 13 | Natural-language browser automation |
+| **5. Vibe Coder** | 19 | Generate full Next.js projects from plain English |
 
-The floating ♿ button appears bottom-right. Click it, choose preferences, click **Apply settings**.
+Plus 7 custom SVG icons, a voice + chat assistant, and a growing icon library.
 
 ---
 
-## React
+## What's new
 
-```tsx
-// src/App.tsx
-import { YuktAIWrapper } from "@yuktishaalaa/yuktai";
+### v4.1.2 — grid polish
+- Search icon inside search input
+- Empty-search-results state with "Clear search" action
+- Attractive pagination with page numbers and ellipsis
+- Better touch targets (36×36 min)
+- ARIA `aria-current="page"` on active page
 
-export default function App() {
-  return (
-    <YuktAIWrapper position="left">
-      <YourAppContent />
-    </YuktAIWrapper>
-  );
-}
+### v4.1.0 — 7 custom SVG icons
+Zero external icon dependency. All icons: 24×24 viewBox, 2.5 stroke, `currentColor`, accessible.
+- `SearchIcon`, `SortUpIcon`, `SortDownIcon`
+- `ChevronLeftIcon`, `ChevronRightIcon`
+- `CheckIcon`, `CloseIcon`
+
+### v4.0.0 — YuktaiGrid ships
+Fully accessible data grid. 5 built-in themes. Mobile card view. Search + sort + pagination.
+
+### v3.0.0 — Voice + chat AI assistant
+Floating chat panel. Voice input via Web Speech API. TTS for AI replies. Zero LLM download.
+
+### v2.0.0 — Accessibility engine
+Auto-injects ARIA labels, `alt`, `role`, `tabindex`. MutationObserver watches for new elements.
+
+---
+
+## Install
+
+### Next.js 16 + React 19 (recommended)
+```bash
+npm install @yuktishaalaa/yuktai --legacy-peer-deps
 ```
 
-**Props**
+### Older Next.js (13, 14, 15)
+```bash
+npm install @yuktishaalaa/yuktai
+```
 
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `position` | `"left" \| "right"` | `"left"` | Side the FAB appears on |
-| `children` | `ReactNode` | required | Your app content |
+Requirements: Node.js 18+, npm 8+, Next.js 13+.
 
 ---
 
-## Next.js — App Router
+## Quick start
 
-**Step 1 — next.config.js**
+### Step 1 — `next.config.js`
 
 ```js
 const nextConfig = {
@@ -102,7 +95,7 @@ const nextConfig = {
 module.exports = nextConfig;
 ```
 
-**Step 2 — Create a client wrapper**
+### Step 2 — Client wrapper
 
 ```tsx
 // components/YuktaiClient.tsx
@@ -113,8 +106,6 @@ import { YuktAIWrapper } from "@yuktishaalaa/yuktai";
 export default function YuktaiClient({ children }: { children: ReactNode }) {
   const [mounted, setMounted] = useState(false);
   useEffect(() => setMounted(true), []);
-
-  // Prevents React hydration mismatch error #418
   if (!mounted) return <>{children}</>;
 
   return (
@@ -125,7 +116,7 @@ export default function YuktaiClient({ children }: { children: ReactNode }) {
 }
 ```
 
-**Step 3 — app/layout.tsx**
+### Step 3 — `app/layout.tsx`
 
 ```tsx
 import YuktaiClient from "@/components/YuktaiClient";
@@ -143,259 +134,311 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 }
 ```
 
-**Pages Router — pages/_app.tsx**
-
-```tsx
-import { YuktAIWrapper } from "@yuktishaalaa/yuktai";
-import type { AppProps } from "next/app";
-
-export default function MyApp({ Component, pageProps }: AppProps) {
-  return (
-    <YuktAIWrapper position="left">
-      <Component {...pageProps} />
-    </YuktAIWrapper>
-  );
-}
-```
+That's it. Three AI-powered buttons appear on every page. Click the ♿ button bottom-right to open the accessibility panel.
 
 ---
 
-## Vue 3 / Nuxt 3
+## Module 1 — Accessibility Engine
 
-```vue
-<!-- App.vue -->
-<script setup lang="ts">
-import YuktAIWrapper from "@yuktishaalaa/yuktai/vue";
-</script>
+Scans every element and injects missing accessibility attributes automatically.
 
-<template>
-  <YuktAIWrapper position="left">
-    <RouterView />
-  </YuktAIWrapper>
-</template>
-```
-
-**Nuxt 3 — app.vue**
+Covers: headings, images, forms, tables, lists, landmarks, ARIA widgets. Watches for new DOM elements via `MutationObserver`.
 
-```vue
-<script setup lang="ts">
-import YuktAIWrapper from "@yuktishaalaa/yuktai/vue";
-</script>
+### Features (16)
 
-<template>
-  <YuktAIWrapper position="left">
-    <NuxtLayout>
-      <NuxtPage />
-    </NuxtLayout>
-  </YuktAIWrapper>
-</template>
-```
+- WCAG 2.2 auto-fix — ARIA, roles, tabindex, scope, autocomplete
+- Speak on focus — browser speech synthesis
+- Voice control — say commands to navigate
+- High contrast · Dark mode · Reduce motion · Large targets (44×44)
+- Colour-blind modes — Deuteranopia, Protanopia, Tritanopia, Greyscale
+- Dyslexia font — Atkinson Hyperlegible (research-backed)
+- Local font picker, font scaling 80–130%
+- Audit badge — WCAG score 0–100 (localhost only)
+- Skip links, focus trap, preference persistence, reset
 
-**Nuxt 3 — client plugin** (`plugins/yuktai.client.ts`)
+### Direct API
 
 ```ts
-import YuktAIWrapper from "@yuktishaalaa/yuktai/vue";
+import { wcagPlugin } from "@yuktishaalaa/yuktai";
 
-export default defineNuxtPlugin((nuxtApp) => {
-  nuxtApp.vueApp.component("YuktAIWrapper", YuktAIWrapper);
+// Apply fixes
+const report = wcagPlugin.applyFixes({
+  enabled:       true,
+  highContrast:  false,
+  darkMode:      false,
+  reduceMotion:  false,
+  largeTargets:  false,
+  speechEnabled: false,
+  colorBlindMode:"none",
+  autoFix:       true,
 });
+
+console.log(report.fixed);   // number of fixes applied
+console.log(report.score);   // 0–100
 ```
 
 ---
 
-## Angular
+## Module 2 — YuktaiGrid ⭐
 
-**app.module.ts**
+An accessible data grid built for Next.js. Handles small tables and large datasets. Works with any API. Ships with the 5 accessibility themes.
 
-```ts
-import { YuktAIModule } from "@yuktishaalaa/yuktai/angular";
+### Usage
 
-@NgModule({
-  imports: [BrowserModule, YuktAIModule],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
-```
+```tsx
+"use client";
+import { YuktaiGrid } from "@yuktishaalaa/yuktai";
 
-**app.component.html**
+const data = [
+  { id: 1, name: "Sandeep", role: "Developer", salary: 85000 },
+  { id: 2, name: "Priya",   role: "Designer",  salary: 90000 },
+];
 
-```html
-<yuktai-a11y position="left">
-  <router-outlet></router-outlet>
-</yuktai-a11y>
+export default function EmployeesPage() {
+  return (
+    <YuktaiGrid
+      data={data}
+      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
+      search={true}                   // real-time filtering
+      view="auto"                     // auto (card on mobile) | table | card
+      pagination={{ pageSize: 10 }}   // built-in client pagination
+    />
+  );
+}
 ```
 
-**Angular 17+ standalone**
+### Grid features (12)
 
-```ts
-import { YuktAIComponent } from "@yuktishaalaa/yuktai/angular";
-
-@Component({
-  standalone: true,
-  imports: [RouterOutlet, YuktAIComponent],
-  template: `
-    <yuktai-a11y position="left">
-      <router-outlet />
-    </yuktai-a11y>
-  `,
-})
-export class AppComponent {}
-```
+- Search bar with icon and "Clear" action
+- Sort — click column header (asc → desc → cleared)
+- Pagination with page numbers and ellipsis
+- Mobile card view (below 768px, no config needed)
+- Loading, empty, and empty-search states
+- 5 WCAG themes with 3-line switcher
+- Row selection, custom render, `rowKey`
+- Keyboard navigation
+- ARIA `role="grid"`, `aria-sort`, `aria-current`
+- 44×44 touch targets
 
----
+### Handling large datasets (100K, 200K, 300K rows)
 
-## Vanilla JavaScript
+**Client-side pagination handles a few thousand rows well.** For anything larger, use **server-side pagination** — fetch only the page you need.
 
-**CDN — no install needed**
+Here's the pattern with a Next.js API proxy that also solves CORS.
 
-```html
-<!-- Add before </body> -->
-<script src="https://cdn.jsdelivr.net/npm/@yuktishaalaa/yuktai/vanilla/index.js"></script>
-```
+**`src/app/api/employees/route.ts`** — the proxy:
 
-**npm import**
+```ts
+import { NextRequest, NextResponse } from "next/server";
 
-```js
-import "@yuktishaalaa/yuktai/vanilla";
-```
+let cachedData: any[] | null = null;
+let cacheTime = 0;
+const TTL_MS = 60_000;
 
-**Configure position**
+async function fetchAll(): Promise<any[]> {
+  const now = Date.now();
+  if (cachedData && now - cacheTime < TTL_MS) return cachedData;
 
-```html
-<script>
-  window.YUKTAI_CONFIG = { position: "right" };
-</script>
-<script src="cdn.../vanilla/index.js"></script>
+  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) },
+  });
+}
 ```
 
-**Programmatic API**
+**Page — call the paginated API and disable the grid's built-in pagination:**
 
-```js
-window.yuktai.apply();
-window.yuktai.reset();
-window.yuktai.wcagPlugin.scan();
+```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]);
+
+<YuktaiGrid
+  data={apiResp?.rows ?? []}
+  columns={columns}
+  search={false}         // disable — we handle search server-side
+  pagination={false}     // disable — we handle pagination server-side
+  loading={!apiResp}
+/>
 ```
 
+Then render your own pagination bar backed by `apiResp.pagination`. This pattern works for 100K, 200K, 300K rows — the browser only ever holds 5,000 rows in memory.
+
 ---
 
-## Web Component
+## Module 3 — In-Tab RAG (Ask This Page)
 
-Works in every framework and plain HTML — uses native Custom Elements.
+Retrieval-Augmented Generation running entirely in the browser. Extracts semantic chunks from the current DOM, embeds them, finds the best match for the user's question, and answers — offline, no API key.
 
-**Plain HTML**
+### Features (11)
 
-```html
-<script type="module"
-  src="https://cdn.jsdelivr.net/npm/@yuktishaalaa/yuktai/web-component/index.js">
-</script>
+- Ask any question about any page
+- Gemini Nano on desktop Chrome — zero download, zero API
+- Transformers.js on mobile — 30 MB one-time model load
+- Auto engine detection and switching
+- Works offline after first load
+- q4 quantization on mobile (32-bit → 4-bit weights)
+- `flan-t5-small` for full-sentence answers
+- Cosine similarity semantic search
+- Deduped DOM text extraction
 
-<yuktai-a11y position="left">
-  <!-- your content -->
-</yuktai-a11y>
-```
+### What I learned
 
-**Inside React**
+The hardest part was mobile. Transformers.js kept crashing on iOS Safari with out-of-memory errors. Learning about quantization — same model, 75% smaller — fixed it. DistilBERT gives short useless spans; flan-t5-small gives real sentences. None of that was in any tutorial. Found on a Saturday by breaking things until something worked.
 
-```tsx
-import "@yuktishaalaa/yuktai/web-component";
+---
 
-// @ts-ignore
-<yuktai-a11y position="left">
-  <App />
-</yuktai-a11y>
-```
+## Module 4 — Autonomous AI Agent
 
-**Inside Vue** — add to `vite.config.ts` first:
+User types a goal in plain English. Yuktai reads the DOM, finds the right elements, plans steps, and highlights what to do.
 
-```ts
-plugins: [vue({
-  template: {
-    compilerOptions: {
-      isCustomElement: (tag) => tag === "yuktai-a11y",
-    }
-  }
-})]
-```
+### Features (13)
 
-```vue
-<script setup>
-import "@yuktishaalaa/yuktai/web-component";
-</script>
-<template>
-  <yuktai-a11y position="left">
-    <RouterView />
-  </yuktai-a11y>
-</template>
-```
+- Plain-English goal input
+- Reads full page DOM — 9 traversal strategies
+- Scans all form fields — 11 label strategies
+- Works on static HTML, React, WordPress, and old government portals
+- Gemini Nano planning on desktop, Transformers.js on mobile
+- Rule-based fallback if AI fails
+- Highlights target field with teal outline
+- Scrolls to relevant section by keyword
+- Numbered step-by-step plan
+- Handles iframes
+
+The 11 label strategies came from real websites — old government portals put labels in the previous table cell, modern apps use `aria-label`, static pages use `placeholder`. Every strategy solved a problem I had actually hit.
 
 ---
 
-## Direct engine API
+## Module 5 — Vibe Coder
 
-```ts
-import { wcagPlugin } from "@yuktishaalaa/yuktai";
+Type a business requirement. Yuktai generates a full Next.js 16 project as a downloadable ZIP.
 
-// Apply all WCAG rules
-const report = wcagPlugin.applyFixes({
-  enabled:       true,
-  highContrast:  false,
-  darkMode:      false,
-  reduceMotion:  false,
-  largeTargets:  false,
-  speechEnabled: false,
-  colorBlindMode:"none",
-  autoFix:       true,
-});
+### Features (19)
+
+- Detects website type (12 types), pages needed (21 types), features (14 types)
+- Detects theme colour (8), extracts site name
+- Preview before generating
+- Full Next.js 16 project — Tailwind + CSS Modules, TypeScript, mobile responsive
+- Navbar, Footer, Home, About, Contact, Services, Pricing, Auth, Dashboard pages
+- Downloads as ZIP · `npm run dev` works immediately
+- Pure templates — no AI writes the code
 
-console.log(report.fixed);      // number of fixes applied
-console.log(report.scanned);    // number of nodes scanned
-console.log(report.renderTime); // time in ms
-console.log(report.score);      // accessibility score 0–100
-console.log(report.details);    // array of A11yFix objects
+No AI writes a single line. Pure template engineering. Same reusable-utility thinking from 2013 jQuery — now generating entire Next.js projects.
 
-// Scan only — no DOM changes
-const violations = wcagPlugin.scan();
+---
+
+## Voice + Chat Assistant
 
-// Announce to screen readers + visual alert + speech
-wcagPlugin.announce("Form submitted successfully", "success");
-wcagPlugin.announce("Email is required", "error");
+A floating 🤖 button bottom-right opens a chat panel. Voice in via Web Speech API. TTS out via SpeechSynthesis. Intent parsing runs locally — no LLM, no API.
 
-// Browser speech — zero install
-wcagPlugin.speak("Welcome to the dashboard");
+Understands:
+- "highest salary" → analyzes visible grid rows
+- "how many employees" → counts
+- "average age" → calculates
+- "who is Sandeep" → looks up
+- "search for developer" → filters grid
+- "sort by salary descending" → sorts
 
-// Visual alert for deaf users
-wcagPlugin.showVisualAlert("Settings saved", "success");
+Chrome + Edge give the best voice recognition. Firefox needs a flag. iOS Safari is limited.
+
+---
 
-// Focus trap for modals
-const modal = document.querySelector("#my-modal") as HTMLElement;
-wcagPlugin.trapFocus(modal);
+## Icon library
 
-// Auto-fix new DOM elements
-wcagPlugin.startObserver({ enabled: true, autoFix: true });
-wcagPlugin.stopObserver();
+7 custom SVG icons. Zero external dependency.
+
+```tsx
+import {
+  SearchIcon,
+  SortUpIcon,
+  SortDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  CheckIcon,
+  CloseIcon,
+} from "@yuktishaalaa/yuktai";
+
+<SearchIcon        size={20} />
+<SortUpIcon        size={20} color="#0D9488" />
+<CheckIcon         size={20} color="#10b981" label="Task complete" />
+<CloseIcon         size={20} color="#dc2626" />
+<ChevronLeftIcon   size={24} label="Previous" />
+<ChevronRightIcon  size={24} label="Next" />
 ```
 
+Props: `size` (default 20), `color` (default `currentColor`), `strokeWidth` (default 2.5), `label` (adds ARIA — decorative if omitted).
+
 ---
 
-## A11yConfig options
+## Gemini Nano (Chrome 147+)
+
+- Plain-English mode — rewrites complex text
+- Summarise page — 3-sentence summary
+- Smart ARIA labels — AI generates labels
+- Translate page — 18 languages
+- Chrome 147+ standalone globals (`window.LanguageModel`)
+- Fallback to old `window.ai` namespace
+
+Chrome 147 silently removed `window.ai` and moved everything to standalone globals. Debugged for an evening before finding it in the release notes.
+
+---
+
+## Technical (17 features)
+
+Zero API keys · Zero cost · Zero telemetry · Works on all browsers · Works on mobile (Android + iOS) · Works offline after first load · PWA compatible · Next.js 16 compatible · React 19 compatible · TypeScript throughout · SSR safe (no window errors) · Escape closes all panels · Each panel closes others · `data-yuktai-panel` — never reads own UI · Three stacked FAB buttons · Mobile full-screen panels · Tablet responsive · `showRag`, `showAgent`, `position` props.
+
+---
+
+## Configuration
 
 ```ts
 import { wcagPlugin, A11yConfig } from "@yuktishaalaa/yuktai";
 
 const config: A11yConfig = {
   enabled:             true,   // required
-  highContrast:        false,  // increase contrast
-  darkMode:            false,  // invert colours
-  reduceMotion:        false,  // disable animations
-  largeTargets:        false,  // 44×44px minimum touch targets
-  speechEnabled:       false,  // speak focused elements aloud
+  highContrast:        false,
+  darkMode:            false,
+  reduceMotion:        false,
+  largeTargets:        false,
+  speechEnabled:       false,
   colorBlindMode:      "none", // none | deuteranopia | protanopia | tritanopia | achromatopsia
-  autoFix:             true,   // MutationObserver watches for new elements
-  showPreferencePanel: true,   // floating ♿ button + panel
-  showSkipLinks:       true,   // multi-target skip links
-  showAuditBadge:      false,  // score badge — dev only (localhost)
-  fontSizeMultiplier:  1,      // font scale multiplier
-  timeoutWarning:      0,      // seconds before session timeout warning (0 = off)
+  autoFix:             true,
+  showPreferencePanel: true,
+  showSkipLinks:       true,
+  showAuditBadge:      false,  // dev only (localhost)
+  fontSizeMultiplier:  1,
+  timeoutWarning:      0,      // seconds (0 = off)
 };
 
 await wcagPlugin.execute(config);
@@ -403,21 +446,6 @@ await wcagPlugin.execute(config);
 
 ---
 
-## HTML elements covered
-
-- **Headings** — `h1` through `h6`
-- **Text** — `p`, `span`, `abbr`, `mark`, `time`, `meter`, `progress`, all inline elements
-- **Images & media** — `img`, `area`, `svg`, `canvas`, `video`, `audio`, `iframe`, `object`, `embed`, `figure`
-- **Interactive** — `button`, `a`, clickable `div` / `span`
-- **Forms** — `input` (all types), `select`, `textarea`, `fieldset`, `label`
-- **Tables** — `table`, `th`, `td`, `caption`
-- **Lists** — `ul`, `ol`, `dl`, `li`, `dt`, `dd`
-- **Landmarks** — `nav`, `header`, `footer`, `main`, `aside`, `section`, `article`, `details`, `summary`, `dialog`
-- **Document** — `html`, `head`, `meta viewport`, `body`
-- **ARIA widgets** — `role=tab`, `alert`, `tooltip`, `menu`, `listbox`, `slider`, `checkbox`, `combobox`, `grid`, `tree`, `spinbutton`
-
----
-
 ## WCAG coverage
 
 | Standard | Criteria covered |
@@ -425,79 +453,62 @@ await wcagPlugin.execute(config);
 | WCAG 2.0 | 19 criteria |
 | WCAG 2.1 | 7 criteria |
 | WCAG 2.2 | 3 criteria (focus appearance, target size, timeout) |
-| Beyond WCAG | SpeechSynthesis, visual alerts, keyboard cheatsheet, audit score, colour blind modes, dyslexia font |
+| Beyond WCAG | SpeechSynthesis, visual alerts, keyboard cheatsheet, audit score, colour-blind modes, dyslexia font |
 
 ---
 
-## Accessibility features — no screen reader software needed
+## Design principles
 
-| Feature | Who it helps | How |
-|---|---|---|
-| SpeechSynthesis | Blind users without screen reader | Browser reads focused element aloud |
-| Visual alerts | Deaf users | Sliding banner — no audio |
-| Skip links | All keyboard users | Jump to main, nav, search |
-| Focus trap | Keyboard users | Tab stays inside modals |
-| Arrow key nav | Keyboard users | Navigate menus, tabs, listbox |
-| Keyboard cheatsheet | All users | Press Alt+A |
-| Colour blind modes | Colour blind users | Deuteranopia, protanopia, tritanopia, greyscale |
-| High contrast | Low vision users | Filter-based contrast boost |
-| Dark mode | Light sensitivity | Invert + hue rotate |
-| Large targets | Motor impaired | 44×44px minimum |
-| Timeout warning | Motor impaired | Warning before session expires |
-| Dyslexia font | Dyslexia users | Atkinson Hyperlegible |
-| Reduce motion | Vestibular disorder | Disables all animations |
+- **Zero id attributes** — no injected node ever gets an `id`. Tracked via module-level JavaScript references. Never collides with host app ids.
+- **Zero API keys** — runs entirely in the browser. No external calls, no telemetry, no cost.
+- **Zero framework lock-in** — `core/renderer.ts` has no framework imports. Works in Node.js, browsers, and test environments.
+- **Honest limits** — client-side grid pagination works for a few thousand rows. Beyond that, use server-side pagination (pattern shown above).
 
 ---
 
-## The report
+## Compatibility
 
-After clicking **Apply settings**, the panel shows:
+### Next.js versions
+| Version | Supported |
+|---|---|
+| Next.js 16 | ✅ |
+| Next.js 15 | ✅ |
+| Next.js 14 | ✅ |
+| Next.js 13 | ✅ |
 
-```
-✓ 12 fixes · 534 nodes · 1.2ms · Score: 88/100
-✓ 0 fixes needed · 534 nodes clean · 0.8ms · Score: 100/100
-```
+### React versions
+| Version | Supported | Install flag |
+|---|---|---|
+| React 19 | ✅ | `--legacy-peer-deps` |
+| React 18 | ✅ | none |
+| React 17 | ✅ | none |
 
-> **Note:** A score of 100/100 means yuktai found no issues it could automatically detect and fix. Automated scanning covers a significant portion of WCAG criteria but cannot substitute for manual testing and real user feedback. We recommend combining yuktai with periodic manual audits for comprehensive accessibility coverage.
+### Browsers
+Chrome 90+ · Firefox 90+ · Safari 15+ · Edge 90+ · Samsung Internet 14+
 
 ---
 
-## Design principles
+## Roadmap
 
-- **Zero id attributes** — no injected node ever gets an `id`. All injected nodes tracked via module-level JavaScript references. Never collides with host app ids.
-- **Zero API keys** — runs entirely in the browser. No external calls, no telemetry, no cost.
-- **Zero framework lock-in** — `core/renderer.ts` has no framework imports. Works in Node.js, browsers, and test environments.
-- **One engine, many adapters** — all adapters import from `core/renderer.ts`. WCAG logic written once.
+Shipped: v4.1.2 (grid polish)  
+Next: v4.2.0 — Voice search inside `YuktaiGrid` (mic button + Web Speech API)  
+After that: v4.3.0 — AI Summary button, TTS row reader  
+Long term: v5.0.0 — WebLLM + WebMCP + multimodal
 
 ---
 
-## Browser support
+## Links
 
-| Browser | Supported |
-|---|---|
-| Chrome 90+ | ✅ |
-| Firefox 90+ | ✅ |
-| Safari 15+ | ✅ |
-| Edge 90+ | ✅ |
-| Samsung Internet 14+ | ✅ |
+- npm — [@yuktishaalaa/yuktai](https://www.npmjs.com/package/@yuktishaalaa/yuktai)
+- GitHub — [sandeepmiriyala03/yuktai](https://github.com/sandeepmiriyala03/yuktai)
+- Live demo — [aksharatantra.vercel.app](https://aksharatantra.vercel.app)
 
 ---
 
-## Framework compatibility
-
-| Framework | Version | Supported |
-|---|---|---|
-| React | 17, 18, 19 | ✅ |
-| Next.js | 13, 14, 15 | ✅ |
-| Vue | 3+ | ✅ |
-| Nuxt | 3+ | ✅ |
-| Angular | 15+ | ✅ |
-| Remix | Any | ✅ |
-| Astro | Any | ✅ |
-| Vanilla JS | ES2020+ | ✅ |
+## License
 
----
+ISC © Sandeep Miriyala — [Yuktishaalaa AI Lab](https://github.com/sandeepmiriyala03)
 
-## License
+Built in free time. With help from Claude, GPT, and Gemini for learning — but every line written, every bug fixed, every decision made by me.
 
-ISC © Sandeep Miriyala — [Yuktishaalaa AI Lab]
+Free forever. Open source.