@yuktishaalaa/yuktai 5.2.0 → 5.3.0

package/README.md

@@ -1,12 +1,13 @@
 # @yuktishaalaa/yuktai
 
-> 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, 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.
+> 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.
 
 [![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)
+[![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)
+[![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).
 
@@ -28,7 +29,7 @@ So I built yuktai, one weekend and one late night at a time.
 
 ## What's inside
 
-Six modules ship in a single npm package:
+Six modules ship in a single npm package, for React/Next.js and, since v5.3, for plain HTML pages with one script tag:
 
 | Module | Features | What it does |
 |---|---|---|
@@ -37,11 +38,71 @@ Six modules ship in a single npm package:
 | **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 |
+| **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 |
 
 ---
 
-## What's new in v5.1: Agentic AI Toolkit
+## What's new in v5.3: Vanilla JS (plain HTML)
+
+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.
+
+```html
+<script>
+  window.YUKTAI_CONFIG = { position: "right", showPageTools: true }  // optional
+</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 ♿ button (and 🛠 page tools 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
+
+**Tested** in Chromium: 37 end-to-end checks pass, with axe-core reporting 0 violations and no console errors. Open `vanilla/index.html` in the repo for a demo of every feature, including a Telugu grid. 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 colours now 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.
 
@@ -149,6 +210,8 @@ Everything works offline with rules and keyword search. To get model-written ans
 
 - 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.
 
 ---
 
@@ -171,7 +234,7 @@ Everything works offline with rules and keyword search. To get model-written ans
 
 | Device | Browser | Core features | AI engine |
 |---|---|---|---|
-| 🖥 Desktop | Chrome 147+ | ✅ All | Gemini Nano |
+| 🖥 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 |
@@ -202,7 +265,13 @@ yarn add @yuktishaalaa/yuktai
 pnpm add @yuktishaalaa/yuktai
 ```
 
-Requirements: Node.js 18+, npm 8+, Next.js 13+.
+**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).
 
 ---
 
@@ -272,7 +341,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 
 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.1 agentic tools, place `<AgenticPanel />` or `useAgenticGrid` in any client component (see [What's new in v5.1](#whats-new-in-v51-agentic-ai-toolkit)).
+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
 
@@ -392,7 +461,7 @@ export default function EmployeesPage() {
 - Keyboard navigation, ARIA grid semantics, 44×44 targets
 - English and Telugu UI
 - Embedded Grid AI Assistant with voice and chat
-- **New in v5.1:** compound natural-language questions, anomaly detection and BI answers through `useAgenticGrid`
+- **New in v5.2:** compound natural-language questions, anomaly detection and BI answers through `useAgenticGrid`
 
 ### Grid AI Assistant
 
@@ -405,7 +474,7 @@ Runs embedded in the grid or as a standalone component. Intent parsing runs loca
   onSearch={handleSearch}
   onSort={handleSort}
   language="te-IN" // AI UI and responses: en-US | te-IN
-  inputLanguage="te-IN" // voice input: en-US | te-IN
+  inputLanguage="te-IN" // voice input: en-IN, en-US or any of the 22 Indian languages
   embedded
 />
 ```
@@ -600,7 +669,7 @@ Retrieval-Augmented Generation running entirely in the browser. It extracts text
 
 **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.1:** `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.
+**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.
 
 ---
 
@@ -633,7 +702,7 @@ No AI writes the code. It's pure template engineering.
 
 ## Module 6: Agentic AI Toolkit 🆕
 
-The ten v5.1 features, described in detail in [What's new in v5.1](#whats-new-in-v51-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
@@ -686,10 +755,10 @@ Props: `size` (default 20), `color` (default `currentColor`), `strokeWidth` (def
 
 - **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.
+- **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.1 copilot records each change it makes.
+- **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.
 
 ---
@@ -699,6 +768,7 @@ Props: `size` (default 20), `color` (default `currentColor`), `strokeWidth` (def
 | | 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+ |
@@ -707,9 +777,10 @@ Props: `size` (default 20), `color` (default `currentColor`), `strokeWidth` (def
 
 ## Roadmap
 
-- **Shipped (v5.1):** Agentic AI Toolkit: accessibility copilot, QA reports, form and design review, smart grid queries, BI answers, multi-step tasks, page + data RAG, voice accessibility commands
+- **Shipped (v5.3):** Vanilla JS build of every module for plain HTML pages, plus accessibility engine fixes
+- **Shipped (v5.2):** Agentic AI Toolkit: accessibility copilot, QA reports, form and design review, smart grid queries, BI answers, multi-step tasks, page + data RAG, voice accessibility commands
 - **Shipped (v4.6.4):** YuktaiGrid Agentic AI + WebMCP, embedded Grid AI Assistant, English/Telugu UI, page-size switching, icon polish
-- **Next:** expose the v5.1 agentic tools through WebMCP, more Grid Agent tools, multilingual RAG (Telugu, Hindi, Tamil, Bengali)
+- **Next:** expose the v5.2 agentic tools through WebMCP, more Grid Agent tools, multilingual RAG (Telugu, Hindi, Tamil, Bengali)
 - **Later:** RTL support, richer browser-native AI, multimodal grid experiences
 
 ---
@@ -726,13 +797,14 @@ Issues and pull requests are welcome at [github.com/sandeepmiriyala03/yuktai](ht
 - 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 (CDN): [cdn.jsdelivr.net/npm/@yuktishaalaa/yuktai/vanilla/index.min.js](https://cdn.jsdelivr.net/npm/@yuktishaalaa/yuktai/vanilla/index.min.js)
 
 ---
 
 ## License
 
-ISC © Sandeep Miriyala, [Yuktishaalaa AI Lab](https://github.com/sandeepmiriyala03)
+GPL-3.0 © Sandeep Miriyala, [Yuktishaalaa AI Lab](https://github.com/sandeepmiriyala03)
 
 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.
 
-**Free forever. Open source. Built for every user.** 🏺
+**Free forever. Open source. Built for every user.**