@yuktishaalaa/yuktai 4.6.3 → 4.6.5

package/README.md

@@ -1,6 +1,3 @@
-
-
-
 # @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, and an accessible data grid with Agentic AI + WebMCP — zero API keys, zero cost, works offline.
@@ -57,71 +54,49 @@ Plus Grid Assistant capabilities, Grid Agent tools, WebMCP integration, 7 custom
 
 ## What's new
 
-v4.5.0 — Agentic AI + WebMCP for YuktaiGrid
-YuktaiGrid now exposes grid operations as reusable tools for Agentic AI and WebMCP.
-
-Shared Grid Tools layer for agent and WebMCP execution
-
-Search grid rows
-
-Count grid rows
+### v4.6.4 — YuktaiGrid Agentic AI + WebMCP
 
-Get grid columns
+YuktaiGrid now brings Grid UI, Grid AI Assistant, reusable Grid Tools, Agent execution, and WebMCP registration together.
 
-Get a row by ID
+- Shared Grid Tools for Agent and WebMCP execution
 
-Highlight rows
+- Search grid rows
 
-Select a row
+- Count grid rows
 
-Open a row
+- Get grid columns
 
-WebMCP tool registration through document.modelContext
-
-useYuktaiGridAgent for programmatic agent tool execution
-
-Designed around the flow: User → Agent → WebMCP → YuktaiGrid → Data
-
-v4.4.1
-Previous published YuktAI release.
-
----
+- Get a row by ID
 
-**## What's new
+- Highlight rows
 
-### v4.1.2 — grid polish
+- Select a row
 
-- Search icon inside search input
+- Open a row
 
-- Empty-search-results state with "Clear search" action
+- WebMCP registration through document.modelContext
 
-- Attractive pagination with page numbers and ellipsis
+- useYuktaiGridAgent for programmatic Grid tool execution
 
-- Better touch targets (36×36 min)
+- Embedded Grid AI Assistant inside YuktaiGrid
 
-- ARIA `aria-current="page"` on active page
+- English and Telugu AI UI
 
-### v4.1.0 — 7 custom SVG icons
+- English voice input by default with Telugu voice-input support
 
-Zero external icon dependency. All icons: 24×24 viewBox, 2.5 stroke, `currentColor`, accessible.
+- language, inputLanguage, and embedded AI options
 
-- `SearchIcon`, `SortUpIcon`, `SortDownIcon`
+- Functional page-size switching such as 10 → 20 → 50 → 100
 
-- `ChevronLeftIcon`, `ChevronRightIcon`
+- Inline SVG Grid icons with no external icon dependency
 
-- `CheckIcon`, `CloseIcon`
+- Public seven-icon package API
 
-### v4.0.0 — YuktaiGrid ships
+Architecture: User → Agent → WebMCP → YuktaiGrid → Data
 
-Fully accessible data grid. 5 built-in themes. Mobile card view. Search + sort + pagination.
+### v4.6.3
 
-### 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.
+Previous published release before the v4.6.4 Grid fixes and polish.
 
 ---
 
@@ -155,7 +130,7 @@ Requirements: Node.js 18+, npm 8+, Next.js 13+.
 
 const nextConfig = {
 
-  transpilePackages: ["@yuktishaalaa/yuktai"],
+  transpilePackages: ["@yuktishaalaa/yuktai"],
 
 };
 
@@ -177,21 +152,21 @@ import { YuktAIWrapper } from "@yuktishaalaa/yuktai";
 
 export default function YuktaiClient({ children }: { children: ReactNode }) {
 
-  const [mounted, setMounted] = useState(false);
+  const [mounted, setMounted] = useState(false);
 
-  useEffect(() => setMounted(true), []);
+  useEffect(() => setMounted(true), []);
 
-  if (!mounted) return <>{children}</>;
+  if (!mounted) return <>{children}</>;
 
-  return (
+  return (
 
-    <YuktAIWrapper position="left">
+    <YuktAIWrapper position="left">
 
-      {children}
+      {children}
 
-    </YuktAIWrapper>
+    </YuktAIWrapper>
 
-  );
+  );
 
 }
 
@@ -205,23 +180,23 @@ import YuktaiClient from "@/components/YuktaiClient";
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
 
-  return (
+  return (
 
-    <html lang="en">
+    <html lang="en">
 
-      <body>
+      <body>
 
-        <YuktaiClient>
+        <YuktaiClient>
 
-          <main>{children}</main>
+          <main>{children}</main>
 
-        </YuktaiClient>
+        </YuktaiClient>
 
-      </body>
+      </body>
 
-    </html>
+    </html>
 
-  );
+  );
 
 }
 
@@ -267,27 +242,27 @@ import { wcagPlugin } from "@yuktishaalaa/yuktai";
 
 const report = wcagPlugin.applyFixes({
 
-  enabled:       true,
+  enabled:       true,
 
-  highContrast:  false,
+  highContrast:  false,
 
-  darkMode:      false,
+  darkMode:      false,
 
-  reduceMotion:  false,
+  reduceMotion:  false,
 
-  largeTargets:  false,
+  largeTargets:  false,
 
-  speechEnabled: false,
+  speechEnabled: false,
 
-  colorBlindMode:"none",
+  colorBlindMode:"none",
 
-  autoFix:       true,
+  autoFix:       true,
 
 });
 
-console.log(report.fixed);   // number of fixes applied
+console.log(report.fixed);   // number of fixes applied
 
-console.log(report.score);   // 0–100
+console.log(report.score);   // 0–100
 
 ```
 
@@ -307,67 +282,81 @@ import { YuktaiGrid } from "@yuktishaalaa/yuktai";
 
 const data = [
 
-  { id: 1, name: "Sandeep", role: "Developer", salary: 85000 },
+{ id: 1, name: "Sandeep", role: "Developer", salary: 85000 },
 
-  { id: 2, name: "Priya",   role: "Designer",  salary: 90000 },
+{ id: 2, name: "Priya", role: "Designer", salary: 90000 },
 
 ];
 
 export default function EmployeesPage() {
 
-  return (
+return (
+
+\<YuktaiGrid
+
+  data={data}
 
-    <YuktaiGrid
+  columns={[
 
-      data={data}
+    { key: "name", label: "Name", sortable: true },
 
-      columns={[
+    { key: "role", label: "Role" },
 
-        { key: "name",   label: "Name",   sortable: true },
+    { key: "salary", label: "Salary", type: "number", align: "right" },
 
-        { 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
 
-      theme="default"                 // default | high-contrast | dark | color-blind | dyslexia
+  search={true}                           // real-time filtering
 
-      search={true}                   // real-time filtering
+  ai={true}                               // embedded Grid AI Assistant
 
-      view="auto"                     // auto (card on mobile) | table | card
+  view="auto"                             // auto | table | card
 
-      pagination={{ pageSize: 10 }}   // built-in client pagination
+  pagination={{
+    pageSize: 20,
+    showSizeChanger: true,
+    sizeOptions: [10, 20, 50, 100],
+  }}
 
-    />
+/>
 
-  );
+);
 
 }
 
 ```
 
-### Grid features (12)
+### Grid features
+
+- Search bar with inline SVG icon
+
+- Sort — click a column header to toggle ascending / descending
 
-- Search bar with icon and "Clear" action
+- Functional client-side pagination
 
-- Sort — click column header (asc → desc → cleared)
+- Configurable page-size switching such as 10, 20, 50, 100
 
-- Pagination with page numbers and ellipsis
+- Mobile card view below the configured breakpoint
 
-- Mobile card view (below 768px, no config needed)
+- Loading and empty states
 
-- Loading, empty, and empty-search states
+- 5 WCAG themes
 
-- 5 WCAG themes with 3-line switcher
+- Row selection, custom render, and rowKey
 
-- Row selection, custom render, `rowKey`
+- Row highlighting and optional auto-scroll to highlighted rows
 
-- Keyboard navigation
+- Embedded Grid AI Assistant
 
-- ARIA `role="grid"`, `aria-sort`, `aria-current`
+- English and Telugu Grid UI
 
-- 44×44 touch targets
+- Inline SVG search, sort, selection, and pagination icons
+
+- No external icon dependency
 
 ### Handling large datasets (100K, 200K, 300K rows)
 
@@ -389,51 +378,51 @@ const TTL_MS = 60_000;
 
 async function fetchAll(): Promise<any[]> {
 
-  const now = Date.now();
+  const now = Date.now();
 
-  if (cachedData && now - cacheTime < TTL_MS) return cachedData;
+  if (cachedData && now - cacheTime < TTL_MS) return cachedData;
 
-  const res  = await fetch("https://your-api.com/employees", { cache: "no-store" });
+  const res  = await fetch("https://your-api.com/employees", { cache: "no-store" });
 
-  const json = await res.json();
+  const json = await res.json();
 
-  cachedData = Array.isArray(json) ? json : (json.employees ?? json.data ?? []);
+  cachedData = Array.isArray(json) ? json : (json.employees ?? json.data ?? []);
 
-  cacheTime  = now;
+  cacheTime  = now;
 
-  return cachedData;
+  return cachedData;
 
 }
 
 export async function GET(req: NextRequest) {
 
-  const p = req.nextUrl.searchParams;
+  const p = req.nextUrl.searchParams;
 
-  const page     = Math.max(1, parseInt(p.get("page")     || "1"));
+  const page     = Math.max(1, parseInt(p.get("page")     || "1"));
 
-  const pageSize = Math.max(1, parseInt(p.get("pageSize") || "5000"));
+  const pageSize = Math.max(1, parseInt(p.get("pageSize") || "5000"));
 
-  const search   = (p.get("search") || "").toLowerCase().trim();
+  const search   = (p.get("search") || "").toLowerCase().trim();
 
-  const all      = await fetchAll();
+  const all      = await fetchAll();
 
-  const filtered = search
+  const filtered = search
 
-    ? all.filter(r => Object.values(r).some(v => String(v).toLowerCase().includes(search)))
+    ? all.filter(r => Object.values(r).some(v => String(v).toLowerCase().includes(search)))
 
-    : all;
+    : all;
 
-  const total = filtered.length;
+  const total = filtered.length;
 
-  const rows  = filtered.slice((page - 1) * pageSize, page * pageSize);
+  const rows  = filtered.slice((page - 1) * pageSize, page * pageSize);
 
-  return NextResponse.json({
+  return NextResponse.json({
 
-    rows,
+    rows,
 
-    pagination: { page, pageSize, totalRows: total, totalPages: Math.ceil(total / pageSize) },
+    pagination: { page, pageSize, totalRows: total, totalPages: Math.ceil(total / pageSize) },
 
-  });
+  });
 
 }
 
@@ -443,31 +432,31 @@ export async function GET(req: NextRequest) {
 
 ```tsx
 
-const [apiResp, setApiResp]     = useState<any>(null);
+const [apiResp, setApiResp]     = useState<any>(null);
 
-const [currentPage, setPage]    = useState(1);
+const [currentPage, setPage]    = useState(1);
 
 useEffect(() => {
 
-  fetch(`/api/employees?page=${currentPage}&pageSize=5000`)
+  fetch(`/api/employees?page=${currentPage}&pageSize=5000`)
 
-    .then(r => r.json())
+    .then(r => r.json())
 
-    .then(setApiResp);
+    .then(setApiResp);
 
 }, [currentPage]);
 
 <YuktaiGrid
 
-  data={apiResp?.rows ?? []}
+  data={apiResp?.rows ?? []}
 
-  columns={columns}
+  columns={columns}
 
-  search={false}         // disable — we handle search server-side
+  search={false}         // disable — we handle search server-side
 
-  pagination={false}     // disable — we handle pagination server-side
+  pagination={false}     // disable — we handle pagination server-side
 
-  loading={!apiResp}
+  loading={!apiResp}
 
 />
 
@@ -477,6 +466,101 @@ Then render your own pagination bar backed by `apiResp.pagination`. This pattern
 
 ---
 
+---
+
+## Grid Agentic AI + WebMCP
+
+YuktaiGrid exposes reusable Grid operations so an Agent can work with grid data through a shared tool layer and WebMCP.
+
+### Grid tools
+
+```ts
+
+import {
+searchGrid,
+countGrid,
+getColumns,
+getRow,
+highlightRows,
+selectRow,
+openRow,
+} from "@yuktishaalaa/yuktai";
+
+```
+
+These operations form the common execution layer for programmatic Agent tools and WebMCP.
+
+### Agent execution
+
+```tsx
+
+import {
+useYuktaiGridAgent,
+type GridAgentTool,
+} from "@yuktishaalaa/yuktai";
+
+const tools: GridAgentTool[] = [
+{
+name: "search",
+description: "Search grid rows",
+execute: async ({ query }) => {
+return { query };
+},
+},
+];
+
+const { executeTool, loading } =
+useYuktaiGridAgent({ tools });
+
+```
+
+### WebMCP
+
+```tsx
+
+import {
+YuktaiGridWebMCP,
+} from "@yuktishaalaa/yuktai";
+
+<YuktaiGridWebMCP
+data={data}
+columns={columns}
+/>
+
+```
+
+WebMCP registration is invisible in the UI and uses document.modelContext when available.
+
+### Embedded Grid AI Assistant
+
+```tsx
+
+<YuktaiGrid
+data={data}
+columns={columns}
+locale="te-IN"
+ai={true}
+pagination={{
+pageSize: 20,
+showSizeChanger: true,
+sizeOptions: [10, 20, 50, 100],
+}}
+/>
+
+```
+
+Grid AI supports:
+
+- language="en-US" or language="te-IN" for AI UI and responses
+
+- inputLanguage="en-US" or inputLanguage="te-IN" for voice input
+
+- embedded mode for rendering AI inside the Grid
+
+- Local intent parsing for search, sort, count, highest, lowest, average, total, and lookup
+
+---
+
 ## Module 3 — In-Tab RAG (Ask This Page)
 
 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.
@@ -561,63 +645,91 @@ No AI writes a single line. Pure template engineering. Same reusable-utility thi
 
 ---
 
-## Voice + Chat Assistant
+## Grid AI Assistant — Voice + Chat
+
+The Grid AI Assistant can run embedded inside YuktaiGrid or as a standalone component.
+
+Voice input uses the browser Web Speech API. AI responses can be spoken with SpeechSynthesis. Intent parsing runs locally for the supported Grid operations.
+
+Supports:
+
+- Search
 
-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.
+- Sort
 
-Understands:
+- Count
 
-- "highest salary" → analyzes visible grid rows
+- Highest / maximum
 
-- "how many employees" → counts
+- Lowest / minimum
 
-- "average age" → calculates
+- Average
 
-- "who is Sandeep" → looks up
+- Total
 
-- "search for developer" → filters grid
+- Row lookup
 
-- "sort by salary descending" → sorts
+- English and Telugu AI UI
 
-Chrome + Edge give the best voice recognition. Firefox needs a flag. iOS Safari is limited.
+- English voice input by default
+
+- Telugu voice input with inputLanguage="te-IN"
+
+Example:
+
+```tsx
+
+<YuktaiGridAI
+data={data}
+columns={columns}
+onSearch={handleSearch}
+onSort={handleSort}
+language="te-IN"
+inputLanguage="en-US"
+embedded
+/>
+
+```
+
+Voice recognition depends on browser Web Speech API support.
 
 ---
 
 ## Icon library
 
-7 custom SVG icons. Zero external dependency.
+7 custom SVG icons. Zero external dependency. All seven remain part of the public package API.
 
 ```tsx
 
 import {
 
-  SearchIcon,
+  SearchIcon,
 
-  SortUpIcon,
+  SortUpIcon,
 
-  SortDownIcon,
+  SortDownIcon,
 
-  ChevronLeftIcon,
+  ChevronLeftIcon,
 
-  ChevronRightIcon,
+  ChevronRightIcon,
 
-  CheckIcon,
+  CheckIcon,
 
-  CloseIcon,
+  CloseIcon,
 
 } from "@yuktishaalaa/yuktai";
 
-<SearchIcon        size={20} />
+<SearchIcon        size={20} />
 
-<SortUpIcon        size={20} color="#0D9488" />
+<SortUpIcon        size={20} color="#0D9488" />
 
-<CheckIcon         size={20} color="#10b981" label="Task complete" />
+<CheckIcon         size={20} color="#10b981" label="Task complete" />
 
-<CloseIcon         size={20} color="#dc2626" />
+<CloseIcon         size={20} color="#dc2626" />
 
-<ChevronLeftIcon   size={24} label="Previous" />
+<ChevronLeftIcon   size={24} label="Previous" />
 
-<ChevronRightIcon  size={24} label="Next" />
+<ChevronRightIcon  size={24} label="Next" />
 
 ```
 
@@ -657,31 +769,31 @@ import { wcagPlugin, A11yConfig } from "@yuktishaalaa/yuktai";
 
 const config: A11yConfig = {
 
-  enabled:             true,   // required
+  enabled:             true,   // required
 
-  highContrast:        false,
+  highContrast:        false,
 
-  darkMode:            false,
+  darkMode:            false,
 
-  reduceMotion:        false,
+  reduceMotion:        false,
 
-  largeTargets:        false,
+  largeTargets:        false,
 
-  speechEnabled:       false,
+  speechEnabled:       false,
 
-  colorBlindMode:      "none", // none | deuteranopia | protanopia | tritanopia | achromatopsia
+  colorBlindMode:      "none", // none | deuteranopia | protanopia | tritanopia | achromatopsia
 
-  autoFix:             true,
+  autoFix:             true,
 
-  showPreferencePanel: true,
+  showPreferencePanel: true,
 
-  showSkipLinks:       true,
+  showSkipLinks:       true,
 
-  showAuditBadge:      false,  // dev only (localhost)
+  showAuditBadge:      false,  // dev only (localhost)
 
-  fontSizeMultiplier:  1,
+  fontSizeMultiplier:  1,
 
-  timeoutWarning:      0,      // seconds (0 = off)
+  timeoutWarning:      0,      // seconds (0 = off)
 
 };
 
@@ -755,13 +867,11 @@ Chrome 90+ · Firefox 90+ · Safari 15+ · Edge 90+ · Samsung Internet 14+
 
 ## Roadmap
 
-Shipped: v4.1.2 (grid polish)  
-
-Next: v4.2.0 — Voice search inside `YuktaiGrid` (mic button + Web Speech API)  
+Shipped: v4.6.4 — YuktaiGrid Agentic AI + WebMCP integration, embedded Grid AI Assistant, English/Telugu Grid UI, functional page-size switching, and Grid icon polish.
 
-After that: v4.3.0 — AI Summary button, TTS row reader  
+Next: expand Grid Agent tools and WebMCP capabilities.
 
-Long term: v5.0.0 — WebLLM + WebMCP + multimodal
+Long term: richer browser-native AI and multimodal Grid experiences.
 
 ---