@yuktishaalaa/yuktai 5.3.0 → 5.3.2

package/vanilla/README.md

@@ -1,162 +1,162 @@
-# yuktai — Vanilla JS
-
-The whole yuktai 5.2 toolkit for plain HTML pages: one script file, no React, no build step, no API keys.
-
-- **Data grid you can talk to**: search, sort, pagination, selection, CSV export, five WCAG themes, table/card views, Telugu UI, and keyboard navigation with ARIA grid roles.
-- **Agents**: smart grid queries, BI answers, multi-step tasks, an anomaly finder, a grid assistant with custom rules and voice, and WebMCP.
-- **Page tools**: Accessibility Copilot, QA report (15 WCAG checks), form review, design review, page Q&A and voice commands.
-- **Accessibility engine**: WCAG auto-fixes, high contrast, dark mode, reduced motion, large targets, colour-blind filters, a dyslexia font, text size 80–130%, skip links and speak-on-focus.
-
-The logic is bundled from this repo's `src/` (the same code as the npm package), so a question gets the same answer in React and in plain HTML. Only the React components and hooks are rewritten, in `vanilla/src/`.
-
-## Use it
-
-```html
-<script>
-  window.YUKTAI_CONFIG = { position: "right", showPageTools: true }  // optional
-</script>
-<script src="./index.js"></script>   <!-- or index.min.js -->
-
-<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" },
-      { key: "status", label: "Status", type: "badge" },
-    ],
-    agentic: true,   // question bar: "salary over 1 lakh", "average salary by department"
-    ai: true,        // assistant: custom rules → phrases → tools, with voice input
-  })
-</script>
-```
-
-Open `index.html` in this folder to see every feature with working examples, including a Telugu grid.
-
-## `YUKTAI_CONFIG` (floating buttons)
-
-| Option | Default | Purpose |
-| --- | --- | --- |
-| `position` | `"left"` | Side for the floating buttons: `"left"` or `"right"` |
-| `primaryColor` | `#0f766e` | Accent colour (keep 4.5:1 against white) |
-| `title` | `"Accessibility"` | Settings dialog title |
-| `showPageTools` | `false` | Adds the 🛠 button that opens the six page tools |
-| `defaultTab`, `voiceLang` | `"qa"`, `"en-IN"` | Settings for the page tools |
-| `generate(q, ctx)`, `summarize(text)` | — | Optional hooks for your own model (Ask tab) |
-| `config` | — | Engine overrides, for example `{ autoFix: false }` |
-| `applyOnLoad` | `true` | Run the engine once on page load (restores saved settings) |
-| `autoInit` | `true` | Set `false` to call `yuktai.init()` yourself |
-
-`yuktai.open()`, `yuktai.close()`, `yuktai.openTools("forms")`, `yuktai.apply({ highContrast: true })`, `yuktai.reset()` and `yuktai.getSettings()` control the widget from code. Settings are saved in `localStorage` (`yuktai-a11y-prefs`), the same key the npm package uses.
-
-## `renderGrid(container, options)`
-
-The v5.1 vanilla signature `renderGrid(container, rows, columns, options)` still works.
-
-| Option | Purpose |
-| --- | --- |
-| `data`, `columns`, `rowKey` (`"id"`) | Rows, columns, row ID field |
-| column: `key`, `label`, `type` (`text`/`number`/`date`/`boolean`/`badge`), `align`, `sortable`, `render(value, row, index)` returns text or a DOM node, `hiddenOnMobile`, `width` | |
-| `label` | Accessible name of the grid |
-| `locale` | `"en-IN"` (default), `"te-IN"` for Telugu UI and messages, or any Indian locale code |
-| `theme` | `default`, `high-contrast`, `dark`, `color-blind`, `dyslexia` |
-| `view`, `mobileBreakpoint` | `table`, `card` or `auto` (cards below 640px) |
-| `pagination` | `{ pageSize, showSizeChanger, sizeOptions }`, or `false` |
-| `search`, `selectable`, `exportable` | `false` turns each one off |
-| `selectedKeys`, `highlightIds`, `autoScrollToHighlight` | Initial state |
-| `loading`, `empty` | Loading state; empty message (text or a node) |
-| `agentic` | `true` or `{ title, placeholder, examples, hint }`: the question bar |
-| `ai`, `inputLanguage`, `assistantExamples` | Built-in assistant with voice input |
-| `customRules` | `[{ name, phrases, description, execute({ input, data, columns, executeTool }) }]`, in any language |
-| `parseIntent(text, ctx)` | Replace the built-in phrase parser |
-| `webmcp`, `toolName`, `toolDescriptions`, `onWebMCPStatusChange` | Expose the 11 grid tools to browser AI agents |
-| `referenceDate` | "Now" for "this month" questions |
-| `onRowClick(row)`, `onOpenRow(id)` | Enables the `open` tool and "open Ravi" |
-| `onSelectionChange(keys)`, `onSortChange(sort)`, `onFiltersChange(filters)`, `onAgentResult(r)` | Events |
-| `wrap`, `maxHeight`, `showTitle`, `className` | Layout |
-
-**Keyboard:** Tab into the table, then use the arrow keys to move between cells.
-
-- Home / End go to the first or last cell in a row; Ctrl+Home / Ctrl+End go to the first or last cell in the table.
-- Page Up / Page Down change the page.
-- Space selects a row; Enter sorts (on a column header) or opens the row.
-- Only one cell is in the Tab order.
-
-### Grid API
-
-```js
-await grid.ask("salary over 1 lakh in Hyderabad")      // answer text (useAgenticGrid)
-await grid.askDetailed("average salary by department")  // { answer, kind, table, steps, gridData, … }
-await grid.assistantAsk("sort by salary desc")          // assistant pipeline result
-await grid.executeTool("filter", { key: "salary", operator: "greaterThan", value: 100000 })
-grid.search("Pune"); grid.setFilters([...]); grid.clearFilters(); grid.sortBy("name", "desc"); grid.clearSort()
-grid.highlight(["1001"]); grid.clearHighlight(); grid.select(["1001"]); grid.getSelectedRows()
-grid.goToPage(3); grid.nextPage(); grid.prevPage(); grid.setPageSize(50); grid.getPage()
-grid.setTheme("dark"); grid.setView("card"); grid.setLoading(true)
-grid.getRows(); grid.getPageRows(); grid.getData(); grid.refresh(newRows); grid.setData(rows, columns)
-grid.biSummary(); grid.anomalies(); grid.exportCSV(); grid.reset(); grid.destroy()
-grid.tools; grid.agent; grid.agentic; grid.webmcpStatus
-```
-
-Tool results are always `{ success, message, data?, error?: { code } }` and never throw. The error codes are `NOT_FOUND`, `NOT_SUPPORTED`, `INVALID_INPUT`, `INTERNAL` and `NOT_UNDERSTOOD`.
-
-## Without a grid
-
-```js
-const agentic = yuktai.createAgenticGrid({ data: rows, columns, rowKey: "id" })   // useAgenticGrid
-yuktai.mountAgenticGridBar("#bar", agentic, { examples: ["salary under 50k"] })   // AgenticGridBar
-agentic.subscribe((s) => drawMyTable(s.gridData, s.highlightIds))
-
-const tools = yuktai.createGridTools({ data: rows, columns, rowKey: "id", onFiltersChange, onSortChange }, { name: "my_grid" })
-const agent = yuktai.createGridAgent({ tools, columns, customRules, locale: "te" })  // useYuktaiGridAgent
-await agent.ask("ఎన్ని")
-yuktai.registerWebMCP(tools, { onStatusChange: console.log })                        // YuktaiGridWebMCP
-```
-
-## Page tools
-
-```js
-yuktai.mountAgenticPanel("#tools", { defaultTab: "qa", voiceLang: "te-IN" })  // AgenticPanel, six tabs
-```
-
-The panel is marked `data-yuktai-panel`, so the agents never audit their own UI.
-
-## Core functions (same as npm)
-
-- **Grid queries:** `parseAmount`, `parseGridQuery`, `executeGridQuery`, `runGridQuery`, `answerGridQuestion`, `detectAnomalies`, `summarizeRows`
-- **BI:** `askInsight`, `groupBy`, `comparePeriods`, `trend`, `aggregate`
-- **Tasks:** `planTasks`, `runTasks`
-- **QA:** `runQaAudit`, `auditToMarkdown`, `auditToJSON`, `AUDIT_RULES`
-- **Copilot:** `createA11yCopilot`
-- **Page understanding:** `askAboutPage`, `analyzePage`, `detectPageIntent`
-- **Page and data RAG:** `createContextIndex`, `tokenize`
-- **Forms and design:** `reviewForms`, `reviewForm`, `readFormFields`, `reviewDesign`
-- **Voice:** `parseVoiceA11yCommand`, `createVoiceA11yController`, `moveGridRowFocus`
-- **Grid tools:** `createGridTools`, `getRowId`, `applyGridFilters`, `toGridToolColumns`, and each tool function
-- **Other:** `contrastRatio`, `parseColor`, `relativeLuminance`, `accessibleName`, `wcagPlugin`
-- **Icons:** `icon(name, size, label?)` and `iconNames`
-
-## Build and test
-
-```bash
-npm i -D esbuild           # once
-node vanilla/build.mjs     # → vanilla/index.js and vanilla/index.min.js
-
-# End-to-end checks in real Chromium (37 checks plus axe-core)
-npm i -D playwright-core axe-core
-CHROME=/path/to/chrome node vanilla/test/e2e.mjs
-```
-
-Edit `vanilla/src/*` or `src/*`, then rebuild. Do not edit `vanilla/index.js` by hand.
-
-## Honest limits
-
-- Questions are understood with rules, not a language model, so unusual phrasing may need rewording. Telugu and Hindi data questions need custom rules.
-- QA, form and design checks are heuristics. Test with a keyboard and a screen reader before release.
-- Voice depends on the browser's speech recognition. Typed commands always work.
-- WebMCP needs `document.modelContext`. The real status is always reported.
-- Filtering and paging run in the browser and suit a few thousand rows. For 100K+ rows, page on the server and call `grid.refresh(pageRows)`.
-- The floating buttons are added under `<html>` (not `<body>`), so the colour-blind filter on `<body>` cannot move them.
+# yuktai — Vanilla JS
+
+The whole yuktai 5.2 toolkit for plain HTML pages: one script file, no React, no build step, no API keys.
+
+- **Data grid you can talk to**: search, sort, pagination, selection, CSV export, five WCAG themes, table/card views, Telugu UI, and keyboard navigation with ARIA grid roles.
+- **Agents**: smart grid queries, BI answers, multi-step tasks, an anomaly finder, a grid assistant with custom rules and voice, and WebMCP.
+- **Page tools**: Accessibility Copilot, QA report (15 WCAG checks), form review, design review, page Q&A and voice commands.
+- **Accessibility engine**: WCAG auto-fixes, high contrast, dark mode, reduced motion, large targets, colour-blind filters, a dyslexia font, text size 80–130%, skip links and speak-on-focus.
+
+The logic is bundled from this repo's `src/` (the same code as the npm package), so a question gets the same answer in React and in plain HTML. Only the React components and hooks are rewritten, in `vanilla/src/`.
+
+## Use it
+
+```html
+<script>
+  window.YUKTAI_CONFIG = { position: "right", showPageTools: true }  // optional
+</script>
+<script src="./index.js"></script>   <!-- or index.min.js -->
+
+<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" },
+      { key: "status", label: "Status", type: "badge" },
+    ],
+    agentic: true,   // question bar: "salary over 1 lakh", "average salary by department"
+    ai: true,        // assistant: custom rules → phrases → tools, with voice input
+  })
+</script>
+```
+
+Open `index.html` in this folder to see every feature with working examples, including a Telugu grid.
+
+## `YUKTAI_CONFIG` (floating buttons)
+
+| Option | Default | Purpose |
+| --- | --- | --- |
+| `position` | `"left"` | Side for the floating buttons: `"left"` or `"right"` |
+| `primaryColor` | `#0f766e` | Accent colour (keep 4.5:1 against white) |
+| `title` | `"Accessibility"` | Settings dialog title |
+| `showPageTools` | `false` | Adds the 🛠 button that opens the six page tools |
+| `defaultTab`, `voiceLang` | `"qa"`, `"en-IN"` | Settings for the page tools |
+| `generate(q, ctx)`, `summarize(text)` | — | Optional hooks for your own model (Ask tab) |
+| `config` | — | Engine overrides, for example `{ autoFix: false }` |
+| `applyOnLoad` | `true` | Run the engine once on page load (restores saved settings) |
+| `autoInit` | `true` | Set `false` to call `yuktai.init()` yourself |
+
+`yuktai.open()`, `yuktai.close()`, `yuktai.openTools("forms")`, `yuktai.apply({ highContrast: true })`, `yuktai.reset()` and `yuktai.getSettings()` control the widget from code. Settings are saved in `localStorage` (`yuktai-a11y-prefs`), the same key the npm package uses.
+
+## `renderGrid(container, options)`
+
+The v5.1 vanilla signature `renderGrid(container, rows, columns, options)` still works.
+
+| Option | Purpose |
+| --- | --- |
+| `data`, `columns`, `rowKey` (`"id"`) | Rows, columns, row ID field |
+| column: `key`, `label`, `type` (`text`/`number`/`date`/`boolean`/`badge`), `align`, `sortable`, `render(value, row, index)` returns text or a DOM node, `hiddenOnMobile`, `width` | |
+| `label` | Accessible name of the grid |
+| `locale` | `"en-IN"` (default), `"te-IN"` for Telugu UI and messages, or any Indian locale code |
+| `theme` | `default`, `high-contrast`, `dark`, `color-blind`, `dyslexia` |
+| `view`, `mobileBreakpoint` | `table`, `card` or `auto` (cards below 640px) |
+| `pagination` | `{ pageSize, showSizeChanger, sizeOptions }`, or `false` |
+| `search`, `selectable`, `exportable` | `false` turns each one off |
+| `selectedKeys`, `highlightIds`, `autoScrollToHighlight` | Initial state |
+| `loading`, `empty` | Loading state; empty message (text or a node) |
+| `agentic` | `true` or `{ title, placeholder, examples, hint }`: the question bar |
+| `ai`, `inputLanguage`, `assistantExamples` | Built-in assistant with voice input |
+| `customRules` | `[{ name, phrases, description, execute({ input, data, columns, executeTool }) }]`, in any language |
+| `parseIntent(text, ctx)` | Replace the built-in phrase parser |
+| `webmcp`, `toolName`, `toolDescriptions`, `onWebMCPStatusChange` | Expose the 11 grid tools to browser AI agents |
+| `referenceDate` | "Now" for "this month" questions |
+| `onRowClick(row)`, `onOpenRow(id)` | Enables the `open` tool and "open Ravi" |
+| `onSelectionChange(keys)`, `onSortChange(sort)`, `onFiltersChange(filters)`, `onAgentResult(r)` | Events |
+| `wrap`, `maxHeight`, `showTitle`, `className` | Layout |
+
+**Keyboard:** Tab into the table, then use the arrow keys to move between cells.
+
+- Home / End go to the first or last cell in a row; Ctrl+Home / Ctrl+End go to the first or last cell in the table.
+- Page Up / Page Down change the page.
+- Space selects a row; Enter sorts (on a column header) or opens the row.
+- Only one cell is in the Tab order.
+
+### Grid API
+
+```js
+await grid.ask("salary over 1 lakh in Hyderabad")      // answer text (useAgenticGrid)
+await grid.askDetailed("average salary by department")  // { answer, kind, table, steps, gridData, … }
+await grid.assistantAsk("sort by salary desc")          // assistant pipeline result
+await grid.executeTool("filter", { key: "salary", operator: "greaterThan", value: 100000 })
+grid.search("Pune"); grid.setFilters([...]); grid.clearFilters(); grid.sortBy("name", "desc"); grid.clearSort()
+grid.highlight(["1001"]); grid.clearHighlight(); grid.select(["1001"]); grid.getSelectedRows()
+grid.goToPage(3); grid.nextPage(); grid.prevPage(); grid.setPageSize(50); grid.getPage()
+grid.setTheme("dark"); grid.setView("card"); grid.setLoading(true)
+grid.getRows(); grid.getPageRows(); grid.getData(); grid.refresh(newRows); grid.setData(rows, columns)
+grid.biSummary(); grid.anomalies(); grid.exportCSV(); grid.reset(); grid.destroy()
+grid.tools; grid.agent; grid.agentic; grid.webmcpStatus
+```
+
+Tool results are always `{ success, message, data?, error?: { code } }` and never throw. The error codes are `NOT_FOUND`, `NOT_SUPPORTED`, `INVALID_INPUT`, `INTERNAL` and `NOT_UNDERSTOOD`.
+
+## Without a grid
+
+```js
+const agentic = yuktai.createAgenticGrid({ data: rows, columns, rowKey: "id" })   // useAgenticGrid
+yuktai.mountAgenticGridBar("#bar", agentic, { examples: ["salary under 50k"] })   // AgenticGridBar
+agentic.subscribe((s) => drawMyTable(s.gridData, s.highlightIds))
+
+const tools = yuktai.createGridTools({ data: rows, columns, rowKey: "id", onFiltersChange, onSortChange }, { name: "my_grid" })
+const agent = yuktai.createGridAgent({ tools, columns, customRules, locale: "te" })  // useYuktaiGridAgent
+await agent.ask("ఎన్ని")
+yuktai.registerWebMCP(tools, { onStatusChange: console.log })                        // YuktaiGridWebMCP
+```
+
+## Page tools
+
+```js
+yuktai.mountAgenticPanel("#tools", { defaultTab: "qa", voiceLang: "te-IN" })  // AgenticPanel, six tabs
+```
+
+The panel is marked `data-yuktai-panel`, so the agents never audit their own UI.
+
+## Core functions (same as npm)
+
+- **Grid queries:** `parseAmount`, `parseGridQuery`, `executeGridQuery`, `runGridQuery`, `answerGridQuestion`, `detectAnomalies`, `summarizeRows`
+- **BI:** `askInsight`, `groupBy`, `comparePeriods`, `trend`, `aggregate`
+- **Tasks:** `planTasks`, `runTasks`
+- **QA:** `runQaAudit`, `auditToMarkdown`, `auditToJSON`, `AUDIT_RULES`
+- **Copilot:** `createA11yCopilot`
+- **Page understanding:** `askAboutPage`, `analyzePage`, `detectPageIntent`
+- **Page and data RAG:** `createContextIndex`, `tokenize`
+- **Forms and design:** `reviewForms`, `reviewForm`, `readFormFields`, `reviewDesign`
+- **Voice:** `parseVoiceA11yCommand`, `createVoiceA11yController`, `moveGridRowFocus`
+- **Grid tools:** `createGridTools`, `getRowId`, `applyGridFilters`, `toGridToolColumns`, and each tool function
+- **Other:** `contrastRatio`, `parseColor`, `relativeLuminance`, `accessibleName`, `wcagPlugin`
+- **Icons:** `icon(name, size, label?)` and `iconNames`
+
+## Build and test
+
+```bash
+npm i -D esbuild           # once
+node vanilla/build.mjs     # → vanilla/index.js and vanilla/index.min.js
+
+# End-to-end checks in real Chromium (37 checks plus axe-core)
+npm i -D playwright-core axe-core
+CHROME=/path/to/chrome node vanilla/test/e2e.mjs
+```
+
+Edit `vanilla/src/*` or `src/*`, then rebuild. Do not edit `vanilla/index.js` by hand.
+
+## Honest limits
+
+- Questions are understood with rules, not a language model, so unusual phrasing may need rewording. Telugu and Hindi data questions need custom rules.
+- QA, form and design checks are heuristics. Test with a keyboard and a screen reader before release.
+- Voice depends on the browser's speech recognition. Typed commands always work.
+- WebMCP needs `document.modelContext`. The real status is always reported.
+- Filtering and paging run in the browser and suit a few thousand rows. For 100K+ rows, page on the server and call `grid.refresh(pageRows)`.
+- The floating buttons are added under `<html>` (not `<body>`), so the colour-blind filter on `<body>` cannot move them.

package/vanilla/index.js

@@ -1,4 +1,4 @@
-/*! yuktai vanilla 5.2.0 — accessible data grid, page agents and WCAG tools for plain HTML.
+/*! yuktai vanilla 5.3.0 — accessible data grid, page agents and WCAG tools for plain HTML.
  *  No framework, no API keys, runs in the browser. ISC © Sandeep Miriyala, Yuktishaalaa AI Lab.
  *  Built from github.com/sandeepmiriyala03/yuktai (vanilla/src + src/agentic, src/grid, src/core). */
 "use strict";
@@ -3083,7 +3083,8 @@ Missing landmarks: ${missing.join(", ")}.` : ""}`,
       success: { bg: "#0a7a44", border: "#075e34", icon: "\u2713" },
       error: { bg: "#b52a1c", border: "#8f2116", icon: "\u2715" },
       warning: { bg: "#a35f00", border: "#7a4700", icon: "\u26A0" },
-      info: { bg: "#1557b0", border: "#0f4287", icon: "\u2139" }
+      info: { bg: "#005A9C", border: "#003F6E", icon: "\u2139" }
+      // W3C blue
     };
     const c = colors[type];
     if (!_visualAlertNode) {
@@ -3170,7 +3171,7 @@ Missing landmarks: ${missing.join(", ")}.` : ""}`,
     flex-wrap: wrap;
     gap: 4px;
     padding: 4px;
-    background: #111;
+    background: #001124;
     transform: translateY(-100%);
     transition: transform 0.2s ease;
     font-family: system-ui, sans-serif;
@@ -3188,7 +3189,7 @@ Missing landmarks: ${missing.join(", ")}.` : ""}`,
       link.textContent = label;
       link.style.cssText = `
       color: #fff;
-      background: #1a73e8;
+      background: #005A9C;
       padding: 8px 14px;
       border-radius: 4px;
       font-size: 13px;
@@ -4722,39 +4723,8 @@ Missing landmarks: ${missing.join(", ")}.` : ""}`,
     };
   }
 
-  // vanilla/src/dom.js
-  var isBrowser2 = () => typeof window !== "undefined" && typeof document !== "undefined";
-  function esc(value) {
-    return String(value == null ? "" : value).replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
-  }
-  function h(tag, attrs, ...children) {
-    const el = document.createElement(tag);
-    if (attrs) {
-      for (const [key, value] of Object.entries(attrs)) {
-        if (value == null || value === false) continue;
-        if (key.startsWith("on") && typeof value === "function") el.addEventListener(key.slice(2), value);
-        else if (key === "html") el.innerHTML = value;
-        else if (key === "text") el.textContent = value;
-        else if (value === true) el.setAttribute(key, "");
-        else el.setAttribute(key, String(value));
-      }
-    }
-    for (const child of children.flat()) {
-      if (child == null || child === false) continue;
-      el.append(child instanceof Node ? child : document.createTextNode(String(child)));
-    }
-    return el;
-  }
-  var uid = 0;
-  var nextId = (prefix = "yv") => `${prefix}-${++uid}`;
-  function safeColor(value, fallback) {
-    if (typeof value !== "string" || !isBrowser2()) return fallback;
-    const probe = document.createElement("span");
-    probe.style.color = value;
-    return probe.style.color ? value : fallback;
-  }
-  var prefersReducedMotion = () => isBrowser2() && (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches || document.documentElement.hasAttribute("data-yuktai-reduce-motion"));
-  var PATHS = {
+  // src/icons/paths.ts
+  var ICON_PATHS = {
     accessibility: '<circle cx="12" cy="4" r="2"/><path d="M4 8l8-1 8 1M12 7v5m-5 9 5-8 5 8M7 12l-2 5m12-5 2 5"/>',
     contrast: '<circle cx="12" cy="12" r="9"/><path d="M12 3a9 9 0 0 0 0 18z"/>',
     moon: '<path d="M20 14.5A8.5 8.5 0 0 1 9.5 4 8.5 8.5 0 1 0 20 14.5z"/>',
@@ -4795,12 +4765,129 @@ Missing landmarks: ${missing.join(", ")}.` : ""}`,
     wand: '<path d="m15 4 5 5L9 20H4v-5z"/><path d="m13 6 5 5"/>',
     undo: '<path d="M9 14 4 9l5-5"/><path d="M4 9h10a6 6 0 0 1 0 12h-3"/>',
     tools: '<path d="M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.5 2.5-2.4-.6-.6-2.4z"/>',
-    plug: '<path d="M9 2v6M15 2v6M6 8h12v4a6 6 0 0 1-12 0zM12 18v4"/>'
+    plug: '<path d="M9 2v6M15 2v6M6 8h12v4a6 6 0 0 1-12 0zM12 18v4"/>',
+    // v5.3.2 — 33 more, first used on the Sri Yagnavalkya Jayanti site
+    home: '<path d="M3 11 12 4l9 7"/><path d="M5 10v10h5v-6h4v6h5V10"/>',
+    menu: '<path d="M4 6h16M4 12h16M4 18h16"/>',
+    book: '<path d="M12 6c-2-1.5-5-2-8-2v14c3 0 6 .5 8 2 2-1.5 5-2 8-2V4c-3 0-6 .5-8 2zM12 6v14"/>',
+    calendar: '<rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4M7.5 14h2M14.5 14h2M7.5 17.5h2"/>',
+    clock: '<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>',
+    person: '<circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/>',
+    users: '<circle cx="9" cy="8" r="3.5"/><path d="M2 20a7 7 0 0 1 14 0"/><path d="M16 4.5a3.5 3.5 0 0 1 0 7M18 13.5a7 7 0 0 1 4 6.5"/>',
+    globe: '<circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/>',
+    lamp: '<path d="M12 3c2 2.6 3 4.3 3 6a3 3 0 0 1-6 0c0-1.7 1-3.4 3-6z"/><path d="M3 14h18c0 3.5-4 6-9 6s-9-2.5-9-6z"/><path d="M12 12v2"/>',
+    play: '<circle cx="12" cy="12" r="9"/><path d="M10 8.5v7l6-3.5z"/>',
+    pause: '<circle cx="12" cy="12" r="9"/><path d="M10 9v6M14 9v6"/>',
+    send: '<path d="M21 3 3 10.5l7 3 3 7.5z"/><path d="m10 13.5 4.5-4.5"/>',
+    share: '<circle cx="18" cy="5" r="2.5"/><circle cx="6" cy="12" r="2.5"/><circle cx="18" cy="19" r="2.5"/><path d="m8.2 10.8 7.6-4.6M8.2 13.2l7.6 4.6"/>',
+    gift: '<rect x="3" y="8" width="18" height="4" rx="1"/><path d="M5 12v9h14v-9M12 8v13M12 8C10.5 5 7 4 7 6.5S10 8 12 8zm0 0c1.5-3 5-4 5-1.5S14 8 12 8z"/>',
+    image: '<rect x="3" y="4" width="18" height="16" rx="2"/><circle cx="8.5" cy="9.5" r="1.5"/><path d="m21 15-5-5-10 10"/>',
+    file: '<path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5M9 13h6M9 17h6"/>',
+    external: '<path d="M14 4h6v6M20 4l-9 9"/><path d="M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5"/>',
+    arrowUp: '<path d="M12 19V5m-6 6 6-6 6 6"/>',
+    arrowLeft: '<path d="M19 12H5m6-6-6 6 6 6"/>',
+    arrowRight: '<path d="M5 12h14m-6-6 6 6-6 6"/>',
+    headphones: '<path d="M4 15v-3a8 8 0 0 1 16 0v3"/><rect x="3" y="14" width="4" height="7" rx="1.5"/><rect x="17" y="14" width="4" height="7" rx="1.5"/>',
+    music: '<path d="M9 18V5l11-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="17" cy="16" r="3"/>',
+    pin: '<path d="M12 21s7-6.2 7-11.5a7 7 0 0 0-14 0C5 14.8 12 21 12 21z"/><circle cx="12" cy="9.5" r="2.5"/>',
+    map: '<path d="M3 6l6-3 6 3 6-3v15l-6 3-6-3-6 3z"/><path d="M9 3v15M15 6v15"/>',
+    pen: '<path d="M12 3 6 9l1.5 8h9L18 9z"/><path d="M12 3v7.5"/><circle cx="12" cy="12" r="1.5"/><path d="M8 21h8"/>',
+    wallet: '<rect x="3" y="7" width="18" height="13" rx="2"/><path d="M16 13.5h2M6 7l9-4 2 4"/>',
+    install: '<rect x="6" y="2" width="12" height="20" rx="2"/><path d="M12 6v8m-3-3 3 3 3-3M10 18h4"/>',
+    help: '<circle cx="12" cy="12" r="9"/><path d="M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.6.3-1 .9-1 1.6v.6M12 17h.01"/>',
+    temple: '<path d="M12 2v2M10 4h4l1 3H9zM8 7h8l1.5 4h-11zM6.5 11h11L19 15H5zM4 15h16v6H4z"/><path d="M10 21v-3a2 2 0 0 1 4 0v3"/>',
+    meditate: '<circle cx="12" cy="4.5" r="2.2"/><path d="M12 8c-2.2 0-3.3 1.3-3.7 3.2L7.5 16M12 8c2.2 0 3.3 1.3 3.7 3.2l.8 4.8"/><path d="M4 18c3 2 5.5 2.4 8 1.2 2.5 1.2 5 .8 8-1.2"/><path d="M7.5 16c1.4 1.4 3 2 4.5 2s3.1-.6 4.5-2"/>',
+    trophy: '<path d="M8 4h8v5a4 4 0 0 1-8 0z"/><path d="M8 6H5a3 3 0 0 0 3 4M16 6h3a3 3 0 0 1-3 4M12 13v4M8 21h8M9 17h6"/>',
+    bulb: '<path d="M9 18h6M10 21h4"/><path d="M12 3a6 6 0 0 0-4 10.5c.7.7 1 1.5 1 2.5h6c0-1 .3-1.8 1-2.5A6 6 0 0 0 12 3z"/>',
+    sun: '<circle cx="12" cy="12" r="4"/><path d="M12 2v2.5M12 19.5V22M4.9 4.9l1.8 1.8M17.3 17.3l1.8 1.8M2 12h2.5M19.5 12H22M4.9 19.1l1.8-1.8M17.3 6.7l1.8-1.8"/>'
   };
-  var ICON_NAMES = Object.keys(PATHS);
-  function icon(name, size = 20, label) {
-    const a11y = label ? `role="img" aria-label="${esc(label)}"` : 'aria-hidden="true" focusable="false"';
-    return `<svg ${a11y} width="${Number(size) || 20}" height="${Number(size) || 20}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">${PATHS[name] || PATHS.spark}</svg>`;
+  var ICON_NAMES = Object.keys(ICON_PATHS);
+
+  // src/icons/variant.ts
+  var ICON_MIN_CONTRAST = 3;
+  var WHITE = "#ffffff";
+  var INK = "#111827";
+  function iconContrast(fg, bg) {
+    const a = parseColor(fg);
+    const b = parseColor(bg);
+    return a && b ? contrastRatio(a, b) : null;
+  }
+  function pickGlyphColor(background) {
+    const white = iconContrast(WHITE, background);
+    const ink = iconContrast(INK, background);
+    if (white === null || ink === null) return WHITE;
+    return white >= ink ? WHITE : INK;
+  }
+  var warned = /* @__PURE__ */ new Set();
+  function warnOnce(key, message) {
+    if (warned.has(key)) return;
+    warned.add(key);
+    if (typeof console !== "undefined") console.warn(`[yuktai icons] ${message}`);
+  }
+  function resolveIconColours(options = {}) {
+    const variant = options.variant === "filled" ? "filled" : "outline";
+    const color = options.color || "currentColor";
+    if (variant === "outline") return { variant, color, glyph: color, contrast: null };
+    const glyph = options.glyphColor || pickGlyphColor(color);
+    const contrast = iconContrast(glyph, color);
+    if (contrast !== null && contrast < ICON_MIN_CONTRAST) {
+      warnOnce(`${glyph}|${color}`, `glyph ${glyph} on ${color} is ${contrast}:1. WCAG 1.4.11 needs at least 3:1 for icons.`);
+    }
+    return { variant, color, glyph, contrast };
+  }
+  var FILLED_GLYPH_TRANSFORM = "translate(3.6 3.6) scale(0.7)";
+  var FORCED_COLORS_CSS = "@media (forced-colors: active){.yi-bg{fill:CanvasText}.yi-glyph{stroke:Canvas}}";
+  var escAttr = (v) => String(v).replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
+  function iconSvg(name, options = {}) {
+    const paths = ICON_PATHS[name] ?? ICON_PATHS.spark;
+    const size = options.size ?? 20;
+    const { variant, color, glyph } = resolveIconColours(options);
+    const sw = options.strokeWidth ?? (variant === "filled" ? 2.4 : 1.9);
+    const a11y = options.label ? `role="img" aria-label="${escAttr(options.label)}"` : 'aria-hidden="true"';
+    const open = `<svg xmlns="http://www.w3.org/2000/svg" ${a11y} focusable="false" width="${escAttr(size)}" height="${escAttr(size)}" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round" data-variant="${variant}">`;
+    if (variant === "outline") {
+      return `${open}<g stroke="${escAttr(color)}" stroke-width="${sw}">${paths}</g></svg>`;
+    }
+    const bg = options.shape === "circle" ? `<circle class="yi-bg" cx="12" cy="12" r="12" fill="${escAttr(color)}"/>` : `<rect class="yi-bg" width="24" height="24" rx="6" fill="${escAttr(color)}"/>`;
+    return `${open}<style>${FORCED_COLORS_CSS}</style>${bg}<g class="yi-glyph" stroke="${escAttr(glyph)}" stroke-width="${sw}" transform="${FILLED_GLYPH_TRANSFORM}">${paths}</g></svg>`;
+  }
+
+  // vanilla/src/dom.js
+  var isBrowser2 = () => typeof window !== "undefined" && typeof document !== "undefined";
+  function esc(value) {
+    return String(value == null ? "" : value).replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
+  }
+  function h(tag, attrs, ...children) {
+    const el = document.createElement(tag);
+    if (attrs) {
+      for (const [key, value] of Object.entries(attrs)) {
+        if (value == null || value === false) continue;
+        if (key.startsWith("on") && typeof value === "function") el.addEventListener(key.slice(2), value);
+        else if (key === "html") el.innerHTML = value;
+        else if (key === "text") el.textContent = value;
+        else if (value === true) el.setAttribute(key, "");
+        else el.setAttribute(key, String(value));
+      }
+    }
+    for (const child of children.flat()) {
+      if (child == null || child === false) continue;
+      el.append(child instanceof Node ? child : document.createTextNode(String(child)));
+    }
+    return el;
+  }
+  var uid = 0;
+  var nextId = (prefix = "yv") => `${prefix}-${++uid}`;
+  function safeColor(value, fallback) {
+    if (typeof value !== "string" || !isBrowser2()) return fallback;
+    const probe = document.createElement("span");
+    probe.style.color = value;
+    return probe.style.color ? value : fallback;
+  }
+  var prefersReducedMotion = () => isBrowser2() && (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches || document.documentElement.hasAttribute("data-yuktai-reduce-motion"));
+  var ICON_NAMES2 = Object.keys(ICON_PATHS);
+  function icon(name, size = 20, label, options) {
+    const opts = typeof size === "object" && size !== null ? { ...size } : { ...options || {}, size, label };
+    return iconSvg(name, opts);
   }
   function iconEl(name, size, label) {
     const span = document.createElement("span");
@@ -4897,8 +4984,8 @@ Missing landmarks: ${missing.join(", ")}.` : ""}`,
 .yv-sev-high{color:#b91c1c}.yv-sev-medium{color:#a16207}.yv-sev-low{color:#475569}
 
 /* themes (shared by grid, boxes and dialogs) */
-.yv-grid,.yv-box,.yv-dialog{--yv-bg:#fff;--yv-surface:#fff;--yv-soft:#f8fafc;--yv-head:#f8fafc;--yv-hover:#f1f5f9;--yv-text:#0f172a;--yv-muted:#475569;--yv-border:#e2e8f0;--yv-border-strong:#94a3b8;--yv-accent-bg:#ccfbf1;--yv-accent-text:#115e59;--yv-hl-bg:#fef3c7;--yv-hl-edge:#b45309;--yv-sel-bg:#f0fdfa}
-.yv-theme-dark{--yv-bg:#0f172a;--yv-surface:#111c33;--yv-soft:#16233f;--yv-head:#16233f;--yv-hover:#1e2d4d;--yv-text:#f1f5f9;--yv-muted:#cbd5e1;--yv-border:#334155;--yv-border-strong:#64748b;--yv-accent-bg:#134e4a;--yv-accent-text:#ccfbf1;--yv-hl-bg:#4a3a0c;--yv-hl-edge:#fbbf24;--yv-sel-bg:#123a3a}
+.yv-grid,.yv-box,.yv-dialog{--yv-bg:#fff;--yv-surface:#fff;--yv-soft:#f8fafc;--yv-head:#f8fafc;--yv-hover:#f1f5f9;--yv-text:#0f172a;--yv-muted:#475569;--yv-border:#e2e8f0;--yv-border-strong:#94a3b8;--yv-accent-bg:#E8F1F8;--yv-accent-text:#003F6E;--yv-hl-bg:#fef3c7;--yv-hl-edge:#b45309;--yv-sel-bg:#EEF5FB}
+.yv-theme-dark{--yv-bg:#0f172a;--yv-surface:#111c33;--yv-soft:#16233f;--yv-head:#16233f;--yv-hover:#1e2d4d;--yv-text:#f1f5f9;--yv-muted:#cbd5e1;--yv-border:#334155;--yv-border-strong:#64748b;--yv-accent-bg:#0B2A4A;--yv-accent-text:#DCEBFA;--yv-hl-bg:#4a3a0c;--yv-hl-edge:#fbbf24;--yv-sel-bg:#12304f}
 .yv-theme-high-contrast{--yv-bg:#fff;--yv-surface:#fff;--yv-soft:#fff;--yv-head:#fff;--yv-hover:#e5e5e5;--yv-text:#000;--yv-muted:#000;--yv-border:#000;--yv-border-strong:#000;--yv-accent-bg:#000;--yv-accent-text:#fff;--yv-hl-bg:#ffff00;--yv-hl-edge:#000;--yv-sel-bg:#e5e5e5}
 .yv-theme-high-contrast.yv-grid,.yv-theme-high-contrast .yv-btn,.yv-theme-high-contrast .yv-input{border-width:2px}
 .yv-theme-high-contrast .yv-btn.yv-primary{background:#000;border-color:#000}
@@ -4984,7 +5071,8 @@ Missing landmarks: ${missing.join(", ")}.` : ""}`,
 /* floating buttons and dialogs */
 .yv-fabs{position:fixed;bottom:max(16px,env(safe-area-inset-bottom));${side}:16px;display:flex;flex-direction:column;gap:10px;z-index:2147483000}
 .yv-fab{width:56px;height:56px;display:grid;place-items:center;border:2px solid #fff;border-radius:50%;background:var(--yv-primary);color:#fff;box-shadow:0 4px 16px rgba(0,0,0,.25);cursor:pointer}
-.yv-fab.yv-fab-alt{background:#1e293b}
+.yv-fab.yv-fab-alt{background:#fff;color:var(--yv-primary);border-color:var(--yv-primary)}
+.yv-fab:hover{filter:brightness(1.08)}
 .yv-dialog{position:fixed;bottom:max(90px,calc(env(safe-area-inset-bottom) + 84px));${side}:12px;width:min(440px,calc(100vw - 24px));max-height:calc(100dvh - 110px);overflow:auto;background:var(--yv-bg);color:var(--yv-text);border:1px solid var(--yv-border);border-radius:16px;box-shadow:0 12px 40px rgba(15,23,42,.25);z-index:2147483001;font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}
 .yv-dialog.yv-wide{width:min(620px,calc(100vw - 24px))}
 .yv-dialog-head{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:14px 16px;border-bottom:1px solid var(--yv-border);background:var(--yv-bg)}
@@ -6494,7 +6582,7 @@ ${command ? command.say : "Not a voice command. Try: make text bigger, high cont
   function createWidget(userConfig = {}) {
     const cfg = { position: "left", title: "Accessibility", showPageTools: false, ...userConfig };
     const side = cfg.position === "right" ? "right" : "left";
-    const primary = safeColor(cfg.primaryColor, "#0f766e");
+    const primary = safeColor(cfg.primaryColor, "#005A9C");
     const base = {
       enabled: true,
       autoFix: true,
@@ -6721,12 +6809,12 @@ ${command ? command.say : "Not a voice command. Try: make text bigger, high cont
   }
 
   // vanilla/src/index.js
-  var VERSION = "5.2.0";
+  var VERSION = "5.3.0";
   (function boot() {
     if (!isBrowser2()) return;
     if (window.yuktai && window.yuktai.__vanillaInitialized) return;
     const cfg = window.YUKTAI_CONFIG || {};
-    const primary = safeColor(cfg.primaryColor, "#0f766e");
+    const primary = safeColor(cfg.primaryColor, "#005A9C");
     const side = cfg.position === "right" ? "right" : "left";
     const widget = createWidget(cfg);
     const ensureStyles = () => addStyles(primary, side);
@@ -6765,7 +6853,9 @@ ${command ? command.say : "Not a voice command. Try: make text bigger, high cont
       //     <YuktaiGridWebMCP>
       // ── icons ──
       icon,
-      iconNames: ICON_NAMES.slice(),
+      iconNames: ICON_NAMES2.slice(),
+      iconContrast,
+      pickGlyphColor,
       // ── everything from the package core (same code as npm) ──
       ...core_exports,
       // ── v5.1 vanilla compatibility ──