indas-ui 0.1.3 → 0.1.4

package/dist/cjs/components/layout/footer.js

@@ -6,6 +6,7 @@ exports.CompactFooter = CompactFooter;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const utils_1 = require("../../lib/utils.js");
 const useTranslation_1 = require("../../hooks/useTranslation.js");
+const number_format_1 = require("../../lib/number-format.js");
 function Footer({ kpis, actions, iconButtons, leftContent, className, sticky = false, compact = false, padding, variant = 'page', gradient = false }) {
     if (!kpis && !actions && !leftContent && !iconButtons) {
         return null;
@@ -45,7 +46,7 @@ function Footer({ kpis, actions, iconButtons, leftContent, className, sticky = f
                     padding === 'normal' ? "py-3 sm:py-4" :
                         compact ? "py-1" :
                             isModal ? "py-1.5 sm:py-2" : "py-3 sm:py-4"), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center gap-2 sm:gap-4 w-full sm:w-auto", children: [leftContent, kpis && kpis.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap items-center gap-3 sm:gap-6 md:gap-8", children: kpis.map((kpi) => ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("flex items-center gap-1.5 sm:gap-2 text-xs sm:text-sm", kpi.onClick && "cursor-pointer hover:text-[rgb(var(--color-primary-hover))] transition-colors"), onClick: kpi.onClick, children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-[rgb(var(--fg-muted))] whitespace-nowrap", children: [kpi.label, ":"] }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium text-[rgb(var(--fg-default))]", children: typeof kpi.value === 'number'
-                                            ? kpi.value.toLocaleString()
+                                            ? (0, number_format_1.formatNumber)(kpi.value)
                                             : kpi.value }), kpi.trend && ((0, jsx_runtime_1.jsxs)("span", { className: (0, utils_1.cn)("text-xs font-medium", kpi.trend.direction === 'up'
                                             ? "text-[rgb(var(--color-success))]"
                                             : "text-[rgb(var(--color-error))]"), children: [kpi.trend.direction === 'up' ? '↑' : '↓', Math.abs(kpi.trend.value), "%"] }))] }, kpi.id))) }))] }), iconButtons && iconButtons.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap items-center gap-1.5 sm:gap-2", children: iconButtons.map((button) => {

package/dist/cjs/components/layout/side-panel.js

@@ -110,7 +110,10 @@ function SidePanel({ title, icon: Icon, categories, activeItemId, onItemSelect,
                                                                     return (0, jsx_runtime_1.jsx)(ItemIcon, { className: "w-4 h-4 shrink-0 opacity-50" });
                                                                 })(), (0, jsx_runtime_1.jsx)("span", { className: "truncate flex-1", children: item.label }), item.badge !== undefined && item.badge !== 0 && ((0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)("text-xs px-1.5 py-0.5 rounded-full shrink-0 tabular-nums", activeItemId === item.id
                                                                         ? "bg-[rgb(var(--color-primary))] text-white"
-                                                                        : "bg-[rgb(var(--bg-subtle))] text-[rgb(var(--fg-muted))]"), children: item.badge }))] }), itemContextMenu && ((0, jsx_runtime_1.jsx)("button", { onClick: (e) => handleMenuToggle(e, item.id), className: "absolute right-1.5 top-1/2 -translate-y-1/2 w-6 h-6 rounded-md text-[rgb(var(--fg-muted))]/50 flex items-center justify-center hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] transition-all opacity-0 group-hover:opacity-100", children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreVertical, { className: "w-3.5 h-3.5" }) }))] }, item.id))) }))] }, category.id))))] })) }), footer && !isCollapsed && ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("shrink-0 border-t border-[rgb(var(--bd-default))] transition-opacity duration-200", isAnimating ? "opacity-0" : "opacity-100"), children: footer }))] }), menuOpen !== null && itemContextMenu && ((0, jsx_runtime_1.jsx)("div", { ref: menuRef, className: "fixed bg-[rgb(var(--bg-surface))] border border-[rgb(var(--bd-default))] rounded-lg min-w-[170px] shadow-lg overflow-hidden z-[9999]", style: {
+                                                                        : "bg-[rgb(var(--bg-subtle))] text-[rgb(var(--fg-muted))]"), children: item.badge }))] }), itemContextMenu && (
+                                                        // Named for screen readers, and shown on keyboard focus as well as hover:
+                                                        // it was an unlabelled button nobody tabbing could see.
+                                                        (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: (e) => handleMenuToggle(e, item.id), "aria-label": `More actions for ${item.label}`, "aria-haspopup": "menu", "aria-expanded": menuOpen === item.id, className: "absolute right-1.5 top-1/2 -translate-y-1/2 w-6 h-6 rounded-md text-[rgb(var(--fg-muted))]/50 flex items-center justify-center hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] transition-all opacity-0 group-hover:opacity-100 focus-visible:opacity-100", children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreVertical, { className: "w-3.5 h-3.5" }) }))] }, item.id))) }))] }, category.id))))] })) }), footer && !isCollapsed && ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("shrink-0 border-t border-[rgb(var(--bd-default))] transition-opacity duration-200", isAnimating ? "opacity-0" : "opacity-100"), children: footer }))] }), menuOpen !== null && itemContextMenu && ((0, jsx_runtime_1.jsx)("div", { ref: menuRef, className: "fixed bg-[rgb(var(--bg-surface))] border border-[rgb(var(--bd-default))] rounded-lg min-w-[170px] shadow-lg overflow-hidden z-[9999]", style: {
                         left: `${menuPosition.left}px`,
                         top: `${menuPosition.top}px`,
                         transform: 'translateY(-50%)'

package/dist/cjs/components/ui/display/stats-card.js

@@ -7,6 +7,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const lucide_react_1 = require("lucide-react");
 const utils_1 = require("../../../lib/utils.js");
 const card_1 = require("./card.js");
+const number_format_1 = require("../../../lib/number-format.js");
 const iconVariants = {
     default: "bg-primary text-white",
     accent: "bg-accent text-white",
@@ -16,7 +17,7 @@ const iconVariants = {
 function StatsCard({ title, value, icon: Icon, trend, description, className, variant = 'default' }) {
     const TrendIcon = trend?.direction === 'up' ? lucide_react_1.TrendingUp : lucide_react_1.TrendingDown;
     const trendColor = trend?.direction === 'up' ? 'text-success' : 'text-error';
-    return ((0, jsx_runtime_1.jsx)(card_1.Card, { className: (0, utils_1.cn)("p-6 min-h-[140px] w-full", className), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-start gap-4", children: [Icon && ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex-shrink-0 p-3 rounded-lg", iconVariants[variant]), children: (0, jsx_runtime_1.jsx)(Icon, { className: "h-6 w-6" }) })), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 min-w-0", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-baseline flex-wrap gap-2", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-2xl font-semibold text-fg-default truncate", children: typeof value === 'number' ? value.toLocaleString() : value }), trend && ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("flex items-center text-sm font-semibold", trendColor), children: [(0, jsx_runtime_1.jsx)(TrendIcon, { className: "h-4 w-4 flex-shrink-0" }), (0, jsx_runtime_1.jsxs)("span", { className: "ml-1", children: [Math.abs(trend.value), "%", trend.label && ` ${trend.label}`] })] }))] }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-fg-muted mt-2 line-clamp-2", children: title }), description && ((0, jsx_runtime_1.jsx)("p", { className: "text-sm text-fg-subtle mt-1 line-clamp-1", children: description }))] })] }) }));
+    return ((0, jsx_runtime_1.jsx)(card_1.Card, { className: (0, utils_1.cn)("p-6 min-h-[140px] w-full", className), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-start gap-4", children: [Icon && ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex-shrink-0 p-3 rounded-lg", iconVariants[variant]), children: (0, jsx_runtime_1.jsx)(Icon, { className: "h-6 w-6" }) })), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 min-w-0", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-baseline flex-wrap gap-2", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-2xl font-semibold text-fg-default truncate", children: typeof value === 'number' ? (0, number_format_1.formatNumber)(value) : value }), trend && ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("flex items-center text-sm font-semibold", trendColor), children: [(0, jsx_runtime_1.jsx)(TrendIcon, { className: "h-4 w-4 flex-shrink-0" }), (0, jsx_runtime_1.jsxs)("span", { className: "ml-1", children: [Math.abs(trend.value), "%", trend.label && ` ${trend.label}`] })] }))] }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-fg-muted mt-2 line-clamp-2", children: title }), description && ((0, jsx_runtime_1.jsx)("p", { className: "text-sm text-fg-subtle mt-1 line-clamp-1", children: description }))] })] }) }));
 }
 function StatsGrid({ children, columns = 4, className }) {
     const gridCols = {

package/dist/cjs/lib/number-format.js

@@ -0,0 +1,60 @@
+'use client';
+"use strict";
+/**
+ * How every number in the library is written. Indian grouping by default (20,00,000, not
+ * 2,000,000): the products built on this library keep Indian books, and a bare `toLocaleString()`
+ * follows whatever locale the browser happens to be set to, so the same figure read differently on
+ * two machines.
+ *
+ * A product that needs another convention calls `setNumberLocale()` once at start-up.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setNumberLocale = setNumberLocale;
+exports.getNumberLocale = getNumberLocale;
+exports.formatNumber = formatNumber;
+exports.formatCompactNumber = formatCompactNumber;
+let numberLocale = 'en-IN';
+function setNumberLocale(locale) {
+    numberLocale = locale;
+}
+function getNumberLocale() {
+    return numberLocale;
+}
+/** A full number with grouping, up to two decimals. Empty for null, undefined or NaN. */
+function formatNumber(value, maximumFractionDigits = 2) {
+    if (value == null || value === '')
+        return '';
+    const n = typeof value === 'number' ? value : Number(value);
+    if (!Number.isFinite(n))
+        return typeof value === 'string' ? value : '';
+    return n.toLocaleString(numberLocale, { maximumFractionDigits });
+}
+const trim = (n) => n.toFixed(n >= 100 ? 0 : n >= 10 ? 1 : 2).replace(/\.?0+$/, '');
+/**
+ * A short number for chart axes, where a full figure runs into its neighbour: 12,500 · 20 L ·
+ * 1.4 Cr in Indian grouping; 12.5K · 2M · 1.4B otherwise. Below a lakh (or a thousand) it is the
+ * full number.
+ */
+function formatCompactNumber(value) {
+    if (value == null || value === '')
+        return '';
+    const n = typeof value === 'number' ? value : Number(value);
+    if (!Number.isFinite(n))
+        return String(value);
+    const sign = n < 0 ? '-' : '';
+    const a = Math.abs(n);
+    if (numberLocale === 'en-IN') {
+        if (a >= 1e7)
+            return `${sign}${trim(a / 1e7)} Cr`;
+        if (a >= 1e5)
+            return `${sign}${trim(a / 1e5)} L`;
+        return formatNumber(n, 0);
+    }
+    if (a >= 1e9)
+        return `${sign}${trim(a / 1e9)}B`;
+    if (a >= 1e6)
+        return `${sign}${trim(a / 1e6)}M`;
+    if (a >= 1e3)
+        return `${sign}${trim(a / 1e3)}K`;
+    return formatNumber(n, 0);
+}

package/dist/cjs/lib/utils.js

@@ -11,11 +11,12 @@ exports.getModuleRoutePath = getModuleRoutePath;
 exports.naturalCompare = naturalCompare;
 const clsx_1 = require("clsx");
 const tailwind_merge_1 = require("tailwind-merge");
+const number_format_1 = require("./number-format.js");
 function cn(...inputs) {
     return (0, tailwind_merge_1.twMerge)((0, clsx_1.clsx)(inputs));
 }
-function formatCurrency(amount, currency = 'USD') {
-    return new Intl.NumberFormat('en-US', {
+function formatCurrency(amount, currency = 'INR') {
+    return new Intl.NumberFormat((0, number_format_1.getNumberLocale)(), {
         style: 'currency',
         currency,
     }).format(amount);
@@ -28,7 +29,7 @@ function formatDate(date) {
     }).format(new Date(date));
 }
 function formatNumber(num, decimals = 0) {
-    return new Intl.NumberFormat('en-US', {
+    return new Intl.NumberFormat((0, number_format_1.getNumberLocale)(), {
         minimumFractionDigits: decimals,
         maximumFractionDigits: decimals,
     }).format(num);

package/dist/components/chat/ai-messages.js

@@ -10,6 +10,7 @@ import { cn } from '../../lib/utils.js';
 import { User, Copy, Check, Download, Share2, Pencil, Bot, RotateCcw, ThumbsUp, ThumbsDown } from 'lucide-react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
+import { formatNumber } from '../../lib/number-format.js';
 // Individual Message Bubble Component
 function Message({ message, onSelectItem, onEditMessage, onRegenerateAi, onFeedback, botAvatar, renderBotContent }) {
     const isUser = message.role === 'user';
@@ -158,7 +159,7 @@ function Message({ message, onSelectItem, onEditMessage, onRegenerateAi, onFeedb
                                                 return full;
                                             });
                                             return processed;
-                                        })() }) })) })) })) }), !isEditing && (_jsxs("div", { className: cn('flex items-center gap-2 mt-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200', isUser ? 'justify-end' : 'justify-start'), children: [formattedTimestamp && (_jsx("span", { className: "text-[0.7rem] text-[rgb(var(--fg-muted))]/70 select-none", children: formattedTimestamp })), isUser && onEditMessage && (_jsx("button", { onClick: handleRegenerate, className: "w-7 h-7 rounded-md flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] transition-colors", "aria-label": "Regenerate response", title: "Regenerate", children: _jsx(RotateCcw, { className: "w-3.5 h-3.5" }) })), isUser && onEditMessage && (_jsx("button", { onClick: handleStartEdit, className: "w-7 h-7 rounded-md flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] transition-colors", "aria-label": "Edit message", title: "Edit", children: _jsx(Pencil, { className: "w-3.5 h-3.5" }) })), _jsx("button", { onClick: handleCopy, className: "w-7 h-7 rounded-md flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] transition-colors", "aria-label": "Copy message", title: "Copy", children: copied ? (_jsx(Check, { className: "w-3.5 h-3.5" })) : (_jsx(Copy, { className: "w-3.5 h-3.5" })) }), !isUser && onRegenerateAi && (_jsx("button", { onClick: handleRegenerateAi, className: "w-7 h-7 rounded-md flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] transition-colors", "aria-label": "Regenerate response", title: "Regenerate", children: _jsx(RotateCcw, { className: "w-3.5 h-3.5" }) })), !isUser && (_jsxs(_Fragment, { children: [_jsx("button", { onClick: () => handleFeedback('up'), className: "w-7 h-7 rounded-md flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] transition-colors", "aria-label": "Good response", title: "Good response", children: _jsx(ThumbsUp, { className: "w-3.5 h-3.5", fill: feedback === 'up' ? 'currentColor' : 'none' }) }), _jsx("button", { onClick: () => handleFeedback('down'), className: "w-7 h-7 rounded-md flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] transition-colors", "aria-label": "Bad response", title: "Bad response", children: _jsx(ThumbsDown, { className: "w-3.5 h-3.5", fill: feedback === 'down' ? 'currentColor' : 'none' }) })] })), !isUser && message.tokens && process.env.NEXT_PUBLIC_SHOW_TOKENS === 'true' && (_jsxs("span", { className: "text-[0.65rem] text-[rgb(var(--fg-muted))]/70 font-mono select-none ml-1", children: ["P: ", message.tokens.prompt.toLocaleString(), "  R: ", message.tokens.completion.toLocaleString(), "  T: ", message.tokens.total.toLocaleString()] }))] }))] })] }));
+                                        })() }) })) })) })) }), !isEditing && (_jsxs("div", { className: cn('flex items-center gap-2 mt-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200', isUser ? 'justify-end' : 'justify-start'), children: [formattedTimestamp && (_jsx("span", { className: "text-[0.7rem] text-[rgb(var(--fg-muted))]/70 select-none", children: formattedTimestamp })), isUser && onEditMessage && (_jsx("button", { onClick: handleRegenerate, className: "w-7 h-7 rounded-md flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] transition-colors", "aria-label": "Regenerate response", title: "Regenerate", children: _jsx(RotateCcw, { className: "w-3.5 h-3.5" }) })), isUser && onEditMessage && (_jsx("button", { onClick: handleStartEdit, className: "w-7 h-7 rounded-md flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] transition-colors", "aria-label": "Edit message", title: "Edit", children: _jsx(Pencil, { className: "w-3.5 h-3.5" }) })), _jsx("button", { onClick: handleCopy, className: "w-7 h-7 rounded-md flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] transition-colors", "aria-label": "Copy message", title: "Copy", children: copied ? (_jsx(Check, { className: "w-3.5 h-3.5" })) : (_jsx(Copy, { className: "w-3.5 h-3.5" })) }), !isUser && onRegenerateAi && (_jsx("button", { onClick: handleRegenerateAi, className: "w-7 h-7 rounded-md flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] transition-colors", "aria-label": "Regenerate response", title: "Regenerate", children: _jsx(RotateCcw, { className: "w-3.5 h-3.5" }) })), !isUser && (_jsxs(_Fragment, { children: [_jsx("button", { onClick: () => handleFeedback('up'), className: "w-7 h-7 rounded-md flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] transition-colors", "aria-label": "Good response", title: "Good response", children: _jsx(ThumbsUp, { className: "w-3.5 h-3.5", fill: feedback === 'up' ? 'currentColor' : 'none' }) }), _jsx("button", { onClick: () => handleFeedback('down'), className: "w-7 h-7 rounded-md flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] transition-colors", "aria-label": "Bad response", title: "Bad response", children: _jsx(ThumbsDown, { className: "w-3.5 h-3.5", fill: feedback === 'down' ? 'currentColor' : 'none' }) })] })), !isUser && message.tokens && process.env.NEXT_PUBLIC_SHOW_TOKENS === 'true' && (_jsxs("span", { className: "text-[0.65rem] text-[rgb(var(--fg-muted))]/70 font-mono select-none ml-1", children: ["P: ", formatNumber(message.tokens.prompt), "  R: ", formatNumber(message.tokens.completion), "  T: ", formatNumber(message.tokens.total)] }))] }))] })] }));
 }
 // Synthia thinking phrases — the fun ones
 const SYNTHIA_THINKING = [
@@ -260,6 +261,6 @@ export function Messages({ messages, isLoading = false, onExport, onShare, onSel
                         }, { prompt: 0, completion: 0, total: 0 });
                         if (totals.total === 0)
                             return _jsx("div", {});
-                        return (_jsxs("span", { className: "text-[0.65rem] text-[rgb(var(--fg-muted))] font-mono", children: ["P:", totals.prompt.toLocaleString(), " \u00B7 C:", totals.completion.toLocaleString(), " \u00B7 T:", totals.total.toLocaleString(), " \u00B7 ", messages.filter(m => m.tokens).length, " calls"] }));
+                        return (_jsxs("span", { className: "text-[0.65rem] text-[rgb(var(--fg-muted))] font-mono", children: ["P:", formatNumber(totals.prompt), " \u00B7 C:", formatNumber(totals.completion), " \u00B7 T:", formatNumber(totals.total), " \u00B7 ", messages.filter(m => m.tokens).length, " calls"] }));
                     })() : _jsx("div", {}), _jsxs("div", { className: "flex gap-2", children: [onExport && (_jsxs("button", { onClick: onExport, className: "flex items-center gap-2 px-3 py-1.5 text-sm text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] rounded-lg transition-colors", children: [_jsx(Download, { className: "w-4 h-4" }), "Export"] })), onShare && (_jsxs("button", { onClick: onShare, className: "flex items-center gap-2 px-3 py-1.5 text-sm text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] rounded-lg transition-colors", children: [_jsx(Share2, { className: "w-4 h-4" }), "Share"] }))] })] })), _jsx("div", { className: "flex-1 overflow-y-auto", children: _jsxs("div", { className: "max-w-5xl mx-auto px-3 sm:px-4 py-6 space-y-6 animate-[fadeInUp_0.28s_ease-out]", children: [messages.map((message) => (_jsx(Message, { message: message, onSelectItem: onSelectItem, onEditMessage: onEditMessage, onRegenerateAi: onRegenerateAi, onFeedback: onFeedback, botAvatar: botAvatar, renderBotContent: renderBotContent }, message.id))), isLoading && _jsx(TypingIndicator, { lastUserMessage: messages.filter(m => m.role === 'user').at(-1)?.content }), _jsx("div", { ref: bottomRef })] }, fadeKey) })] }));
 }

package/dist/components/chat/chat.js

@@ -18,6 +18,7 @@ import { MultimodalInput } from './multimodal-input.js';
 import { ChatPromptNavigator } from './chat-prompt-navigator.js';
 import { DatePicker } from '../forms/date-picker/index.js';
 import { getLocalDateString } from '../../lib/utils.js';
+import { formatNumber } from '../../lib/number-format.js';
 function buildSendPayload(ctx, message, autoTitle) {
     if (ctx.mode === 'new') {
         return { message, conversationId: undefined, newChat: true, title: autoTitle };
@@ -1019,7 +1020,7 @@ export function Chat({ mode = 'fullpage', externalMuted, title = 'Chat', sidebar
                                 }, { prompt: 0, completion: 0, total: 0 });
                                 if (totals.total === 0)
                                     return null;
-                                return (_jsxs("span", { className: "text-[0.65rem] text-[rgb(var(--fg-muted))] font-mono", children: ["Prompt: ", totals.prompt.toLocaleString(), " \u00B7 Response: ", totals.completion.toLocaleString(), " \u00B7 Total: ", totals.total.toLocaleString(), " tokens \u00B7 ", messages.filter(m => m.tokens).length, " calls"] }));
+                                return (_jsxs("span", { className: "text-[0.65rem] text-[rgb(var(--fg-muted))] font-mono", children: ["Prompt: ", formatNumber(totals.prompt), " \u00B7 Response: ", formatNumber(totals.completion), " \u00B7 Total: ", formatNumber(totals.total), " tokens \u00B7 ", messages.filter(m => m.tokens).length, " calls"] }));
                             })(), _jsxs("div", { className: "absolute right-3 flex items-center gap-0.5", children: [headerActions, _jsx("button", { onClick: () => setIsMuted(!isMuted), className: "w-7 h-7 flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] rounded-md transition-colors", title: isMuted ? "Unmute sounds" : "Mute sounds", children: isMuted ? _jsx(VolumeX, { className: "w-3.5 h-3.5" }) : _jsx(Volume2, { className: "w-3.5 h-3.5" }) }), messages.length > 0 && (_jsxs(_Fragment, { children: [_jsx("button", { onClick: handleExport, className: "w-7 h-7 flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] rounded-md transition-colors", title: t('Export'), children: _jsx(Download, { className: "w-3.5 h-3.5" }) }), _jsx("button", { onClick: handleShare, className: "w-7 h-7 flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] rounded-md transition-colors", title: t('Share'), children: _jsx(Share2, { className: "w-3.5 h-3.5" }) })] })), fullpagePath && mode === 'modal' && (_jsx("button", { onClick: () => {
                                             const target = currentConversationId
                                                 ? `${fullpagePath}?c=${currentConversationId}`

package/dist/components/dashboard/charts/Area.d.ts

@@ -20,9 +20,13 @@ export interface AreaChartProps {
     showLegend?: boolean;
     showGrid?: boolean;
     smooth?: boolean;
+    /** How a value reads in the tooltip. Default: the full number, Indian grouping (20,00,000). */
+    valueFormatter?: (value: number) => string;
+    /** How a value reads on the value axis. Default: compact (12,500 · 20 L · 1.4 Cr). */
+    axisFormatter?: (value: number) => string;
     className?: string;
 }
 /**
  * AreaChart - ECharts Area Chart component
  */
-export declare function AreaChart({ data, xKey, series, height, showLegend, showGrid, smooth, className }: AreaChartProps): import("react").JSX.Element;
+export declare function AreaChart({ data, xKey, series, height, showLegend, showGrid, smooth, valueFormatter, axisFormatter, className }: AreaChartProps): import("react").JSX.Element;

package/dist/components/dashboard/charts/Area.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import ReactECharts from 'echarts-for-react';
 import { cn } from '../../../lib/utils.js';
+import { formatCompactNumber, formatNumber } from '../../../lib/number-format.js';
 // Convert any color (hex, rgb(), rgba(), space-separated rgb()) to rgba() with given alpha (0–1).
 // Hex+alpha-suffix concat (e.g. color + 'cc') breaks for non-hex inputs and crashes canvas gradients.
 function withAlpha(color, alpha) {
@@ -31,10 +32,11 @@ function withAlpha(color, alpha) {
 /**
  * AreaChart - ECharts Area Chart component
  */
-export function AreaChart({ data, xKey, series, height = 300, showLegend = true, showGrid = true, smooth = true, className }) {
+export function AreaChart({ data, xKey, series, height = 300, showLegend = true, showGrid = true, smooth = true, valueFormatter, axisFormatter, className }) {
     const option = {
         tooltip: {
             trigger: 'axis',
+            valueFormatter: (v) => (typeof v === 'number' ? (valueFormatter ?? formatNumber)(v) : String(v ?? '')),
             backgroundColor: 'rgba(255, 255, 255, 0.95)',
             borderColor: '#e9ecef',
             borderWidth: 1,
@@ -70,13 +72,13 @@ export function AreaChart({ data, xKey, series, height = 300, showLegend = true,
         },
         yAxis: series.some(s => s.secondaryAxis)
             ? [
-                { type: 'value', axisLine: { show: false }, axisLabel: { color: '#6c757d', fontSize: 11 }, splitLine: { show: showGrid, lineStyle: { color: '#f0f0f0', type: 'dashed' } } },
-                { type: 'value', axisLine: { show: false }, axisLabel: { color: '#6c757d', fontSize: 11 }, splitLine: { show: false } },
+                { type: 'value', axisLine: { show: false }, axisLabel: { color: '#6c757d', fontSize: 11, formatter: (v) => (axisFormatter ?? formatCompactNumber)(v) }, splitLine: { show: showGrid, lineStyle: { color: '#f0f0f0', type: 'dashed' } } },
+                { type: 'value', axisLine: { show: false }, axisLabel: { color: '#6c757d', fontSize: 11, formatter: (v) => (axisFormatter ?? formatCompactNumber)(v) }, splitLine: { show: false } },
             ]
             : {
                 type: 'value',
                 axisLine: { show: false },
-                axisLabel: { color: '#6c757d', fontSize: 11 },
+                axisLabel: { color: '#6c757d', fontSize: 11, formatter: (v) => (axisFormatter ?? formatCompactNumber)(v) },
                 splitLine: { show: showGrid, lineStyle: { color: '#f0f0f0', type: 'dashed' } }
             },
         series: series.map((s, index) => {

package/dist/components/dashboard/charts/Bar.d.ts

@@ -19,9 +19,13 @@ export interface BarChartProps {
      * Renders a KPI-vs-target bullet (track + actual fill + target marker + achievement %).
      */
     targetKey?: string;
+    /** How a value reads in the tooltip. Default: the full number, Indian grouping (20,00,000). */
+    valueFormatter?: (value: number) => string;
+    /** How a value reads on the value axis. Default: compact (12,500 · 20 L · 1.4 Cr). */
+    axisFormatter?: (value: number) => string;
     className?: string;
 }
 /**
  * BarChart - ECharts Bar Chart component
  */
-export declare function BarChart({ data, xKey, series, height, showLegend, showGrid, horizontal, targetKey, className }: BarChartProps): import("react").JSX.Element;
+export declare function BarChart({ data, xKey, series, height, showLegend, showGrid, horizontal, targetKey, valueFormatter, axisFormatter, className }: BarChartProps): import("react").JSX.Element;

package/dist/components/dashboard/charts/Bar.js

@@ -2,10 +2,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ReactECharts from 'echarts-for-react';
 import { cn } from '../../../lib/utils.js';
+import { formatCompactNumber, formatNumber } from '../../../lib/number-format.js';
 /**
  * BarChart - ECharts Bar Chart component
  */
-export function BarChart({ data, xKey, series, height = 300, showLegend = true, showGrid = true, horizontal = false, targetKey, className }) {
+export function BarChart({ data, xKey, series, height = 300, showLegend = true, showGrid = true, horizontal = false, targetKey, valueFormatter, axisFormatter, className }) {
     // Bullet mode: horizontal KPI-vs-target rows (CSS-rendered, not ECharts).
     if (horizontal && targetKey) {
         const actualKey = series[0]?.key;
@@ -25,13 +26,14 @@ export function BarChart({ data, xKey, series, height = 300, showLegend = true,
                     : met
                         ? 'linear-gradient(90deg, #34d399 0%, #10b981 100%)'
                         : 'linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%)';
-                return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [_jsx("span", { className: "text-xs font-medium text-[rgb(var(--fg-default))] truncate", children: name }), _jsxs("span", { className: "text-xs font-semibold tabular-nums shrink-0", style: { color: barColor }, children: [achievement.toFixed(0), "%"] })] }), _jsxs("div", { className: "relative h-2.5 rounded-full bg-[rgb(var(--bg-subtle))] overflow-visible", children: [_jsx("div", { className: "absolute inset-y-0 left-0 rounded-full transition-all duration-300", style: { width: `${actualPct}%`, background: barGradient } }), _jsx("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-1 h-4 rounded-full ring-2 ring-[rgb(var(--bg-surface))]", style: { left: `${targetPct}%`, backgroundColor: '#475569' }, title: `Target: ${target.toLocaleString()}` })] }), _jsxs("div", { className: "flex items-baseline justify-between gap-2 text-[0.65rem] text-[rgb(var(--fg-muted))] tabular-nums", children: [_jsx("span", { children: actual.toLocaleString() }), _jsx("span", { children: `Target ${target.toLocaleString()}` })] })] }, `${name}-${idx}`));
+                return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [_jsx("span", { className: "text-xs font-medium text-[rgb(var(--fg-default))] truncate", children: name }), _jsxs("span", { className: "text-xs font-semibold tabular-nums shrink-0", style: { color: barColor }, children: [achievement.toFixed(0), "%"] })] }), _jsxs("div", { className: "relative h-2.5 rounded-full bg-[rgb(var(--bg-subtle))] overflow-visible", children: [_jsx("div", { className: "absolute inset-y-0 left-0 rounded-full transition-all duration-300", style: { width: `${actualPct}%`, background: barGradient } }), _jsx("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-1 h-4 rounded-full ring-2 ring-[rgb(var(--bg-surface))]", style: { left: `${targetPct}%`, backgroundColor: '#475569' }, title: `Target: ${formatNumber(target)}` })] }), _jsxs("div", { className: "flex items-baseline justify-between gap-2 text-[0.65rem] text-[rgb(var(--fg-muted))] tabular-nums", children: [_jsx("span", { children: formatNumber(actual) }), _jsx("span", { children: `Target ${formatNumber(target)}` })] })] }, `${name}-${idx}`));
             }) }));
     }
     const categoryData = data.map(item => item[xKey]);
     const option = {
         tooltip: {
             trigger: 'item',
+            valueFormatter: (v) => (typeof v === 'number' ? (valueFormatter ?? formatNumber)(v) : String(v ?? '')),
             backgroundColor: 'rgba(255, 255, 255, 0.98)',
             borderColor: '#e9ecef',
             borderWidth: 1,
@@ -64,7 +66,7 @@ export function BarChart({ data, xKey, series, height = 300, showLegend = true,
             type: horizontal ? 'value' : 'category',
             data: horizontal ? undefined : categoryData,
             axisLine: { lineStyle: { color: '#dee2e6' } },
-            axisLabel: { color: '#6c757d', fontSize: 11 },
+            axisLabel: horizontal ? { color: '#6c757d', fontSize: 11, hideOverlap: true, alignMaxLabel: 'right', formatter: (v) => (axisFormatter ?? formatCompactNumber)(v) } : { color: '#6c757d', fontSize: 11 },
             axisTick: { show: false },
             splitLine: horizontal && showGrid ? {
                 lineStyle: { color: '#f0f0f0', type: 'dashed' }
@@ -74,7 +76,7 @@ export function BarChart({ data, xKey, series, height = 300, showLegend = true,
             type: horizontal ? 'category' : 'value',
             data: horizontal ? categoryData : undefined,
             axisLine: { show: false },
-            axisLabel: { color: '#6c757d', fontSize: 11 },
+            axisLabel: horizontal ? { color: '#6c757d', fontSize: 11 } : { color: '#6c757d', fontSize: 11, formatter: (v) => (axisFormatter ?? formatCompactNumber)(v) },
             splitLine: !horizontal && showGrid ? {
                 lineStyle: { color: '#f0f0f0', type: 'dashed' }
             } : { show: false }

package/dist/components/dashboard/charts/FlowMap.js

@@ -6,6 +6,7 @@ import * as echarts from 'echarts/core';
 import { cn } from '../../../lib/utils.js';
 import { INDIA_GEOJSON } from './india-map.js';
 import { getChartTheme } from './theme.js';
+import { formatNumber } from '../../../lib/number-format.js';
 /**
  * FlowMap - Geographic flow/route visualization
  *
@@ -161,7 +162,7 @@ export function FlowMap({ markers = [], lines = [], height = 400, markerColor =
                 }
                 if (params.seriesType === 'effectScatter' || params.seriesType === 'scatter') {
                     const value = params.value?.[2];
-                    return `<strong>${params.name}</strong>${value ? `<br/>Value: ${value.toLocaleString()}` : ''}`;
+                    return `<strong>${params.name}</strong>${value ? `<br/>Value: ${formatNumber(value)}` : ''}`;
                 }
                 return `<strong>${params.name}</strong>`;
             }

package/dist/components/dashboard/charts/Funnel.js

@@ -2,6 +2,7 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import { cn } from '../../../lib/utils.js';
+import { formatNumber } from '../../../lib/number-format.js';
 const FUNNEL_COLORS = ['#5470c6', '#3ba272', '#fac858', '#ee6666', '#73c0de', '#9a60b4', '#fc8452', '#91cc75'];
 /**
  * FunnelChart — centered, tapering stage-bar funnel for conversion/process flows.
@@ -30,6 +31,6 @@ export function FunnelChart({ data, height = 300, sort = 'descending', className
                                 background: `linear-gradient(90deg, ${color}, ${color}cc)`,
                                 transform: isHover ? 'translateY(-1px)' : 'none',
                                 boxShadow: isHover ? `0 4px 14px ${color}55` : `0 1px 2px rgba(0,0,0,0.06)`,
-                            }, title: `${item.name}: ${item.value.toLocaleString()} (${pct.toFixed(1)}%)`, children: [_jsx("span", { className: "text-sm font-semibold text-white truncate", children: item.name }), _jsx("span", { className: "text-xs font-medium text-white/90 tabular-nums shrink-0", children: item.value.toLocaleString() })] }) })] }, item.name));
+                            }, title: `${item.name}: ${formatNumber(item.value)} (${pct.toFixed(1)}%)`, children: [_jsx("span", { className: "text-sm font-semibold text-white truncate", children: item.name }), _jsx("span", { className: "text-xs font-medium text-white/90 tabular-nums shrink-0", children: formatNumber(item.value) })] }) })] }, item.name));
         }) }));
 }

package/dist/components/dashboard/charts/GeoMap.js

@@ -5,6 +5,7 @@ import ReactECharts from 'echarts-for-react';
 import * as echarts from 'echarts/core';
 import { cn } from '../../../lib/utils.js';
 import { INDIA_GEOJSON } from './india-map.js';
+import { formatNumber } from '../../../lib/number-format.js';
 /**
  * GeoMap - Geographic scatter/bubble map for India
  * Shows location markers with optional size based on values
@@ -47,7 +48,7 @@ export function GeoMap({ markers = [], height = 400, markerColor = '#5470c6', ma
             formatter: (params) => {
                 if (params.seriesType === 'effectScatter' || params.seriesType === 'scatter') {
                     const value = params.value?.[2];
-                    return `<strong>${params.name}</strong>${value ? `<br/>Production: ${value.toLocaleString()} units` : ''}`;
+                    return `<strong>${params.name}</strong>${value ? `<br/>Production: ${formatNumber(value)} units` : ''}`;
                 }
                 return `<strong>${params.name}</strong>`;
             }

package/dist/components/dashboard/charts/Line.d.ts

@@ -25,9 +25,13 @@ export interface LineChartProps {
     yMin?: number;
     /** Y-axis maximum value */
     yMax?: number;
+    /** How a value reads in the tooltip. Default: the full number, Indian grouping (20,00,000). */
+    valueFormatter?: (value: number) => string;
+    /** How a value reads on the value axis. Default: compact (12,500 · 20 L · 1.4 Cr). */
+    axisFormatter?: (value: number) => string;
     className?: string;
 }
 /**
  * LineChart - ECharts Line Chart component (no area fill)
  */
-export declare function LineChart({ data, xKey, series, height, showLegend, showGrid, smooth, showLabels, yMin, yMax, className }: LineChartProps): import("react").JSX.Element;
+export declare function LineChart({ data, xKey, series, height, showLegend, showGrid, smooth, showLabels, yMin, yMax, valueFormatter, axisFormatter, className }: LineChartProps): import("react").JSX.Element;

package/dist/components/dashboard/charts/Line.js

@@ -3,16 +3,18 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import ReactECharts from 'echarts-for-react';
 import { cn } from '../../../lib/utils.js';
 import { getChartTheme, getTooltipConfig, getLegendConfig, getAxisConfig, getGridConfig } from './theme.js';
+import { formatCompactNumber, formatNumber } from '../../../lib/number-format.js';
 /**
  * LineChart - ECharts Line Chart component (no area fill)
  */
-export function LineChart({ data, xKey, series, height = 300, showLegend = true, showGrid = true, smooth = false, showLabels = false, yMin, yMax, className }) {
+export function LineChart({ data, xKey, series, height = 300, showLegend = true, showGrid = true, smooth = false, showLabels = false, yMin, yMax, valueFormatter, axisFormatter, className }) {
     const theme = getChartTheme();
     const axisConfig = getAxisConfig();
     const option = {
         tooltip: {
             trigger: 'axis',
-            ...getTooltipConfig()
+            ...getTooltipConfig(),
+            valueFormatter: (v) => (typeof v === 'number' ? (valueFormatter ?? formatNumber)(v) : String(v ?? '')),
         },
         legend: showLegend ? getLegendConfig('top') : undefined,
         grid: getGridConfig(showLegend),
@@ -27,7 +29,7 @@ export function LineChart({ data, xKey, series, height = 300, showLegend = true,
             min: yMin,
             max: yMax,
             axisLine: { show: false },
-            axisLabel: axisConfig.axisLabel,
+            axisLabel: { ...axisConfig.axisLabel, formatter: (v) => (axisFormatter ?? formatCompactNumber)(v) },
             splitLine: {
                 show: showGrid,
                 ...axisConfig.splitLine

package/dist/components/dashboard/charts/Pareto.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import ReactECharts from 'echarts-for-react';
 import { cn } from '../../../lib/utils.js';
+import { formatNumber } from '../../../lib/number-format.js';
 /**
  * ParetoChart - Combined bar and line chart showing values and cumulative percentage
  * Used for identifying the "vital few" from the "trivial many" (80/20 rule)
@@ -28,7 +29,7 @@ export function ParetoChart({ data, height = 300, showLegend = true, barColor =
                 const bar = params.find((p) => p.seriesType === 'bar');
                 const line = params.find((p) => p.seriesType === 'line');
                 return `${bar?.name}<br/>
-          Value: ${bar?.value?.toLocaleString()}<br/>
+          Value: ${formatNumber(bar?.value)}<br/>
           Cumulative: ${line?.value}%`;
             }
         },

package/dist/components/dashboard/charts/Sankey.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import ReactECharts from 'echarts-for-react';
 import { cn } from '../../../lib/utils.js';
+import { formatNumber } from '../../../lib/number-format.js';
 /**
  * SankeyChart - Flow/relationship visualization
  * Great for: Material flow, process flow, cost flow, conversion funnels
@@ -35,9 +36,9 @@ export function SankeyChart({ nodes, links, height = 300, orient = 'horizontal',
             textStyle: { color: '#344767', fontSize: 12 },
             formatter: (params) => {
                 if (params.dataType === 'edge') {
-                    return `<strong>${params.data.source}</strong> → <strong>${params.data.target}</strong><br/>Value: ${params.data.value?.toLocaleString()}`;
+                    return `<strong>${params.data.source}</strong> → <strong>${params.data.target}</strong><br/>Value: ${formatNumber(params.data.value)}`;
                 }
-                return `<strong>${params.name}</strong><br/>Value: ${params.value?.toLocaleString() || '-'}`;
+                return `<strong>${params.name}</strong><br/>Value: ${formatNumber(params.value) || '-'}`;
             }
         },
         series: [{
@@ -73,7 +74,7 @@ export function SankeyChart({ nodes, links, height = 300, orient = 'horizontal',
                     color: '#344767',
                     fontSize: 11,
                     fontWeight: 500,
-                    formatter: (p) => `${p.name} (${p.value?.toLocaleString() ?? '-'})`
+                    formatter: (p) => `${p.name} (${formatNumber(p.value) || '-'})`
                 },
                 data: nodesWithColors,
                 links: links.map(link => ({

package/dist/components/dashboard/charts/Sparkline.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import ReactECharts from 'echarts-for-react';
 import { cn } from '../../../lib/utils.js';
+import { formatNumber } from '../../../lib/number-format.js';
 // Convert any color (hex, rgb(), rgba(), space-separated rgb()) to rgba() with given alpha (0–1).
 // Hex+alpha-suffix concat (e.g. color + '40') breaks for non-hex inputs and crashes canvas gradients.
 function withAlpha(color, alpha) {
@@ -97,7 +98,7 @@ export function Sparkline({ data, type = 'line', height = 40, width = '100%', co
             formatter: (params) => {
                 const p = Array.isArray(params) ? params[0] : params;
                 const cat = hasLabels && p.axisValue ? `${p.axisValue}<br/>` : '';
-                return `${cat}<strong>${valuePrefix}${Number(p.value).toLocaleString()}${valueSuffix}</strong>`;
+                return `${cat}<strong>${valuePrefix}${formatNumber(Number(p.value))}${valueSuffix}</strong>`;
             }
         } : undefined,
         grid: {

package/dist/components/dashboard/charts/Treemap.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import ReactECharts from 'echarts-for-react';
 import { cn } from '../../../lib/utils.js';
+import { formatNumber } from '../../../lib/number-format.js';
 /**
  * TreemapChart - Hierarchical data visualization
  * Great for: Cost breakdown, category distribution, budget allocation
@@ -22,7 +23,7 @@ export function TreemapChart({ data, height = 300, showBreadcrumb = false, color
                     .map((node) => node.name)
                     .filter((name) => name)
                     .join(' → ');
-                return `<strong>${path || params.name}</strong><br/>Value: ${params.value?.toLocaleString() || '-'}`;
+                return `<strong>${path || params.name}</strong><br/>Value: ${formatNumber(params.value) || '-'}`;
             }
         },
         series: [{

package/dist/components/dashboard/charts/index.d.ts

@@ -36,3 +36,4 @@ export { FlowMap } from './FlowMap.js';
 export type { FlowMapProps, FlowMapLine, FlowMapMarker } from './FlowMap.js';
 export { ChartCard } from './DashboardCard.js';
 export type { ChartCardProps } from './DashboardCard.js';
+export { formatNumber, formatCompactNumber, setNumberLocale, getNumberLocale } from '../../../lib/number-format.js';

package/dist/components/dashboard/charts/index.js

@@ -21,3 +21,5 @@ export { GanttChart } from './Gantt.js';
 export { FlowMap } from './FlowMap.js';
 // Chart Wrapper
 export { ChartCard } from './DashboardCard.js';
+// Number formatting: Indian grouping by default; setNumberLocale() switches it for a whole app
+export { formatNumber, formatCompactNumber, setNumberLocale, getNumberLocale } from '../../../lib/number-format.js';

package/dist/components/dashboard/kpi/KpiBreakdown.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '../../../lib/utils.js';
 import { KpiCardSkeleton } from './kpi-shell.js';
+import { formatNumber } from '../../../lib/number-format.js';
 /**
  * KpiBreakdown - KPI card with list breakdown
  *
@@ -29,11 +30,11 @@ export function KpiBreakdown({ title, total, items, showPercentage = false, load
     };
     const totalValue = typeof total === 'number' ? total :
         items.reduce((sum, item) => sum + (typeof item.value === 'number' ? item.value : 0), 0);
-    return (_jsxs("div", { className: cn('bg-[rgb(var(--bg-surface))] rounded-xl border border-[rgb(var(--bd-default))] shadow-sm', compact ? 'p-4' : 'p-5', className), children: [_jsxs("div", { className: cn('flex items-center justify-between', compact ? 'mb-2' : 'mb-3'), children: [_jsx("p", { className: "text-sm text-[rgb(var(--fg-muted))]", children: title }), total !== undefined && (_jsx("p", { className: "text-lg font-bold text-[rgb(var(--fg-default))]", children: typeof total === 'number' ? total.toLocaleString() : total }))] }), _jsx("div", { className: compact ? 'space-y-1' : 'space-y-2', children: items.map((item, index) => {
+    return (_jsxs("div", { className: cn('bg-[rgb(var(--bg-surface))] rounded-xl border border-[rgb(var(--bd-default))] shadow-sm', compact ? 'p-4' : 'p-5', className), children: [_jsxs("div", { className: cn('flex items-center justify-between', compact ? 'mb-2' : 'mb-3'), children: [_jsx("p", { className: "text-sm text-[rgb(var(--fg-muted))]", children: title }), total !== undefined && (_jsx("p", { className: "text-lg font-bold text-[rgb(var(--fg-default))]", children: typeof total === 'number' ? formatNumber(total) : total }))] }), _jsx("div", { className: compact ? 'space-y-1' : 'space-y-2', children: items.map((item, index) => {
                     const colorClass = getColorClass(item.color);
                     const isCustomColor = item.color?.startsWith('#') || item.color?.startsWith('rgb');
                     const numValue = typeof item.value === 'number' ? item.value : 0;
                     const percentage = totalValue > 0 ? Math.round((numValue / totalValue) * 100) : 0;
-                    return (_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: cn('w-2 h-2 rounded-full', colorClass), style: isCustomColor ? { backgroundColor: item.color } : undefined }), _jsx("span", { className: "text-sm text-[rgb(var(--fg-default))]", children: item.label })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm font-medium", children: typeof item.value === 'number' ? item.value.toLocaleString() : item.value }), showPercentage && (_jsxs("span", { className: "text-xs text-[rgb(var(--fg-muted))]", children: ["(", percentage, "%)"] }))] })] }, index));
+                    return (_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: cn('w-2 h-2 rounded-full', colorClass), style: isCustomColor ? { backgroundColor: item.color } : undefined }), _jsx("span", { className: "text-sm text-[rgb(var(--fg-default))]", children: item.label })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm font-medium", children: typeof item.value === 'number' ? formatNumber(item.value) : item.value }), showPercentage && (_jsxs("span", { className: "text-xs text-[rgb(var(--fg-muted))]", children: ["(", percentage, "%)"] }))] })] }, index));
                 }) })] }));
 }

package/dist/components/dashboard/kpi/KpiComparison.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '../../../lib/utils.js';
 import { KpiCardSkeleton } from './kpi-shell.js';
+import { formatNumber } from '../../../lib/number-format.js';
 /**
  * KpiComparison - KPI card with comparison progress bars
  *
@@ -34,5 +35,5 @@ export function KpiComparison({ title, value, target, status, bars, loading, cla
                 return 'bg-[rgb(var(--color-error))]/10 text-[rgb(var(--color-error))]';
         }
     };
-    return (_jsxs("div", { className: cn('bg-[rgb(var(--bg-surface))] rounded-xl p-5 border border-[rgb(var(--bd-default))] shadow-sm', className), children: [_jsxs("div", { className: "flex items-center justify-between mb-1", children: [_jsx("p", { className: "text-sm text-[rgb(var(--fg-muted))]", children: title }), status && (_jsx("span", { className: cn('text-xs px-2 py-0.5 rounded-full', getStatusStyles(status.type)), children: status.label }))] }), _jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("p", { className: "text-3xl font-bold text-[rgb(var(--fg-default))]", children: value }), target && (_jsxs("span", { className: "text-sm text-[rgb(var(--fg-muted))]", children: ["/ ", target, " target"] }))] }), _jsx("div", { className: "mt-4 space-y-2", children: bars.map((bar, index) => (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: "text-xs text-[rgb(var(--fg-muted))] w-16", children: bar.label }), _jsx("div", { className: "flex-1 h-3 bg-[rgb(var(--bg-subtle))] rounded", children: _jsx("div", { className: cn('h-full rounded', getBarColor(bar.color)), style: { width: `${Math.min(bar.percentage, 100)}%` } }) }), _jsx("span", { className: "text-xs font-medium w-12 text-right", children: typeof bar.value === 'number' ? bar.value.toLocaleString() : bar.value })] }, index))) })] }));
+    return (_jsxs("div", { className: cn('bg-[rgb(var(--bg-surface))] rounded-xl p-5 border border-[rgb(var(--bd-default))] shadow-sm', className), children: [_jsxs("div", { className: "flex items-center justify-between mb-1", children: [_jsx("p", { className: "text-sm text-[rgb(var(--fg-muted))]", children: title }), status && (_jsx("span", { className: cn('text-xs px-2 py-0.5 rounded-full', getStatusStyles(status.type)), children: status.label }))] }), _jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("p", { className: "text-3xl font-bold text-[rgb(var(--fg-default))]", children: value }), target && (_jsxs("span", { className: "text-sm text-[rgb(var(--fg-muted))]", children: ["/ ", target, " target"] }))] }), _jsx("div", { className: "mt-4 space-y-2", children: bars.map((bar, index) => (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: "text-xs text-[rgb(var(--fg-muted))] w-16", children: bar.label }), _jsx("div", { className: "flex-1 h-3 bg-[rgb(var(--bg-subtle))] rounded", children: _jsx("div", { className: cn('h-full rounded', getBarColor(bar.color)), style: { width: `${Math.min(bar.percentage, 100)}%` } }) }), _jsx("span", { className: "text-xs font-medium w-12 text-right", children: typeof bar.value === 'number' ? formatNumber(bar.value) : bar.value })] }, index))) })] }));
 }

package/dist/components/dashboard/kpi/KpiQuickStats.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '../../../lib/utils.js';
 import { KpiCardSkeleton } from './kpi-shell.js';
+import { formatNumber } from '../../../lib/number-format.js';
 /**
  * KpiQuickStats - KPI card with grid of icon stats
  *
@@ -33,6 +34,6 @@ export function KpiQuickStats({ title, stats, columns = 2, loading, className })
     };
     return (_jsxs("div", { className: cn('bg-[rgb(var(--bg-surface))] rounded-xl p-5 border border-[rgb(var(--bd-default))] shadow-sm', className), children: [_jsx("p", { className: "text-sm text-[rgb(var(--fg-muted))] mb-3", children: title }), _jsx("div", { className: cn('grid gap-x-3 gap-y-2', gridClasses[columns]), children: stats.map((stat, index) => {
                     const Icon = stat.icon;
-                    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Icon, { className: cn('w-4 h-4', getIconColorClass(stat.iconColor)) }), _jsxs("div", { children: [_jsx("p", { className: "text-lg font-bold text-[rgb(var(--fg-default))]", children: typeof stat.value === 'number' ? stat.value.toLocaleString() : stat.value }), _jsx("p", { className: "text-xs text-[rgb(var(--fg-muted))]", children: stat.label })] })] }, index));
+                    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Icon, { className: cn('w-4 h-4', getIconColorClass(stat.iconColor)) }), _jsxs("div", { children: [_jsx("p", { className: "text-lg font-bold text-[rgb(var(--fg-default))]", children: typeof stat.value === 'number' ? formatNumber(stat.value) : stat.value }), _jsx("p", { className: "text-xs text-[rgb(var(--fg-muted))]", children: stat.label })] })] }, index));
                 }) })] }));
 }