indas-ui 0.1.2 → 0.1.4

package/dist/cjs/components/datagrid/controls/menu/view/CardView.js

@@ -10,6 +10,7 @@ const ui_1 = require("../../../../ui/index.js");
 const SelectionCell_1 = require("../../../cells/SelectionCell.js");
 const skeleton_1 = require("../../../../ui/feedback/skeleton.js");
 const LanguageContext_1 = require("../../../../../contexts/LanguageContext.js");
+const number_format_1 = require("../../../../../lib/number-format.js");
 const sizeConfig = {
     compact: {
         grid: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
@@ -131,7 +132,7 @@ function CardView({ data, columns, onRowClick, selectedRows, onRowSelect, isLoad
             return value ? ((0, jsx_runtime_1.jsx)(ui_1.Badge, { variant: "default", className: "h-4.5 text-[0.6rem] px-1.5 py-0 bg-[rgb(var(--color-success))]/10 text-[rgb(var(--color-success))] border-0 font-medium", children: t('Yes') })) : ((0, jsx_runtime_1.jsx)(ui_1.Badge, { variant: "secondary", className: "h-4.5 text-[0.6rem] px-1.5 py-0 bg-[rgb(var(--bg-subtle))] text-[rgb(var(--fg-muted))] border-0 font-medium", children: t('No') }));
         }
         if (typeof value === 'number')
-            return value.toLocaleString();
+            return (0, number_format_1.formatNumber)(value);
         return value?.toString() || '—';
     }, [t]);
     const getFieldLabel = (0, react_1.useCallback)((column) => {
@@ -154,14 +155,14 @@ function CardView({ data, columns, onRowClick, selectedRows, onRowSelect, isLoad
     return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: "outline-none", tabIndex: 0, onKeyDown: handleKeyDown, children: [(0, jsx_runtime_1.jsx)("div", { className: cfg.pad, children: (0, jsx_runtime_1.jsx)("div", { className: `grid ${cfg.grid} ${cfg.gap}`, children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { initial: false, children: data.map((item, index) => {
                             const isFocused = focusedIndex === index;
                             const itemSelected = isSelected(item);
-                            return ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { ref: (el) => { cardRefs.current[index] = el; }, initial: { opacity: 0, y: 6 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -6 }, transition: { duration: 0.12, delay: Math.min(index * 0.015, 0.15) }, className: "group/card outline-none", tabIndex: -1, onClick: () => setFocusedIndex(index), onDoubleClick: () => handleCardClick(item), children: (0, jsx_runtime_1.jsxs)("div", { className: `
-                    relative rounded-lg border bg-[rgb(var(--bg-surface))] overflow-hidden h-full
-                    transition-all duration-150
+                            return ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { ref: (el) => { cardRefs.current[index] = el; }, initial: { opacity: 0, y: 6 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -6 }, transition: { duration: 0.12, delay: Math.min(index * 0.015, 0.15) }, className: "group/card outline-none", tabIndex: -1, onClick: () => setFocusedIndex(index), onDoubleClick: () => handleCardClick(item), children: (0, jsx_runtime_1.jsxs)("div", { className: `
+                    relative rounded-lg border bg-[rgb(var(--bg-surface))] overflow-hidden h-full
+                    transition-all duration-150
                     ${itemSelected
                                         ? 'border-[rgb(var(--color-primary))] shadow-sm'
-                                        : 'border-[rgb(var(--bd-default))] hover:border-[rgb(var(--color-primary))]/40 hover:shadow-sm'}
-                    ${isFocused ? 'ring-2 ring-[rgb(var(--color-primary))]/30 ring-offset-1' : ''}
-                    ${getCardClassName?.(item) ?? ''}
+                                        : 'border-[rgb(var(--bd-default))] hover:border-[rgb(var(--color-primary))]/40 hover:shadow-sm'}
+                    ${isFocused ? 'ring-2 ring-[rgb(var(--color-primary))]/30 ring-offset-1' : ''}
+                    ${getCardClassName?.(item) ?? ''}
                   `, children: [(0, jsx_runtime_1.jsx)("div", { className: `absolute left-0 top-0 bottom-0 w-[2px] transition-colors duration-150 ${itemSelected ? 'bg-[rgb(var(--color-primary))]' : 'bg-transparent group-hover/card:bg-[rgb(var(--color-primary))]/30'}` }), (0, jsx_runtime_1.jsxs)("div", { className: "pl-3 pr-2.5 py-2.5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [onRowSelect && ((0, jsx_runtime_1.jsx)("div", { className: "flex-shrink-0", onClick: (e) => e.stopPropagation(), children: (0, jsx_runtime_1.jsx)(SelectionCell_1.SelectionCheckbox, { checked: itemSelected, onChange: (checked) => handleCheckboxChange(item, checked), circular: circularCheckboxes, mode: "checkbox" }) })), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 min-w-0 flex items-baseline gap-1.5", children: [(0, jsx_runtime_1.jsx)("p", { className: `${cfg.titleText} font-semibold text-[rgb(var(--fg-default))] truncate leading-tight`, children: displayColumns.length > 0 && getDisplayValue(item, displayColumns[0].accessorKey) }), displayColumns.length > 1 && ((0, jsx_runtime_1.jsx)("p", { className: `${cfg.subtitleText} text-[rgb(var(--color-primary))] font-medium truncate flex-shrink-0`, children: getDisplayValue(item, displayColumns[1].accessorKey) }))] }), (0, jsx_runtime_1.jsx)("div", { className: "flex-shrink-0 opacity-0 group-hover/card:opacity-100 transition-opacity duration-150", onClick: (e) => e.stopPropagation(), children: actionsColumn && actionsColumn.cell?.({
                                                                 row: { original: item },
                                                                 getValue: () => null,

package/dist/cjs/components/datagrid/controls/menu/view/ChartView.js

@@ -48,6 +48,7 @@ const ui_1 = require("../../../../ui/index.js");
 const ui_2 = require("../../../../ui/index.js");
 const components_1 = require("../../../../index.js");
 const ui_3 = require("../../../../ui/index.js");
+const number_format_1 = require("../../../../../lib/number-format.js");
 const CHART_COLORS = [
     '#3b82f6', // Blue
     '#ef4444', // Red
@@ -381,7 +382,7 @@ function DataVisualization({ data, columns, title = "Data Insights" }) {
     if (data.length === 0) {
         return ((0, jsx_runtime_1.jsx)(ui_1.Card, { className: "p-8", children: (0, jsx_runtime_1.jsxs)("div", { className: "text-center text-gray-500", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.BarChart3, { className: "h-12 w-12 mx-auto mb-4 opacity-50" }), (0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-medium mb-2", children: "No Data Available" }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm", children: "Add some data to view visualizations" })] }) }));
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-6 p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-2xl font-bold tracking-tight", children: title }), (0, jsx_runtime_1.jsxs)("p", { className: "text-sm text-gray-600 mt-1", children: ["Visual analysis of ", data.length, " records"] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center space-x-2", children: [(0, jsx_runtime_1.jsxs)(ui_2.Button, { variant: selectedChart === 'bar' ? 'primary' : 'outline', size: "sm", onClick: () => setSelectedChart('bar'), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.BarChart3, { className: "h-4 w-4 mr-2" }), "Bar"] }), (0, jsx_runtime_1.jsxs)(ui_2.Button, { variant: selectedChart === 'line' ? 'primary' : 'outline', size: "sm", onClick: () => setSelectedChart('line'), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.LineChart, { className: "h-4 w-4 mr-2" }), "Line"] }), (0, jsx_runtime_1.jsxs)(ui_2.Button, { variant: selectedChart === 'area' ? 'primary' : 'outline', size: "sm", onClick: () => setSelectedChart('area'), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Activity, { className: "h-4 w-4 mr-2" }), "Area"] }), (0, jsx_runtime_1.jsxs)(ui_2.Button, { variant: selectedChart === 'pie' ? 'primary' : 'outline', size: "sm", onClick: () => setSelectedChart('pie'), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.PieChart, { className: "h-4 w-4 mr-2" }), "Pie"] })] })] }), summaryStats && ((0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", children: [(0, jsx_runtime_1.jsx)(ui_1.Card, { children: (0, jsx_runtime_1.jsxs)(ui_1.CardContent, { className: "p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-bold text-blue-600", children: summaryStats.sum.toLocaleString() }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-gray-600", children: "Total" })] }) }), (0, jsx_runtime_1.jsx)(ui_1.Card, { children: (0, jsx_runtime_1.jsxs)(ui_1.CardContent, { className: "p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-bold text-green-600", children: summaryStats.avg.toFixed(1) }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-gray-600", children: "Average" })] }) }), (0, jsx_runtime_1.jsx)(ui_1.Card, { children: (0, jsx_runtime_1.jsxs)(ui_1.CardContent, { className: "p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-bold text-orange-600", children: summaryStats.min.toLocaleString() }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-gray-600", children: "Minimum" })] }) }), (0, jsx_runtime_1.jsx)(ui_1.Card, { children: (0, jsx_runtime_1.jsxs)(ui_1.CardContent, { className: "p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-bold text-purple-600", children: summaryStats.max.toLocaleString() }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-gray-600", children: "Maximum" })] }) })] })), (0, jsx_runtime_1.jsxs)(ui_1.Card, { children: [(0, jsx_runtime_1.jsx)(ui_1.CardHeader, { children: (0, jsx_runtime_1.jsx)(ui_1.CardTitle, { className: "text-lg", children: "Chart Configuration" }) }), (0, jsx_runtime_1.jsx)(ui_1.CardContent, { children: (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("label", { className: "text-sm font-medium mb-2 block", children: ["X-Axis (", selectedChart === 'pie' ? 'Category' : 'Categories', ")"] }), (0, jsx_runtime_1.jsx)(components_1.Dropdown, { options: categoricalColumns.map((col) => ({
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-6 p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-2xl font-bold tracking-tight", children: title }), (0, jsx_runtime_1.jsxs)("p", { className: "text-sm text-gray-600 mt-1", children: ["Visual analysis of ", data.length, " records"] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center space-x-2", children: [(0, jsx_runtime_1.jsxs)(ui_2.Button, { variant: selectedChart === 'bar' ? 'primary' : 'outline', size: "sm", onClick: () => setSelectedChart('bar'), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.BarChart3, { className: "h-4 w-4 mr-2" }), "Bar"] }), (0, jsx_runtime_1.jsxs)(ui_2.Button, { variant: selectedChart === 'line' ? 'primary' : 'outline', size: "sm", onClick: () => setSelectedChart('line'), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.LineChart, { className: "h-4 w-4 mr-2" }), "Line"] }), (0, jsx_runtime_1.jsxs)(ui_2.Button, { variant: selectedChart === 'area' ? 'primary' : 'outline', size: "sm", onClick: () => setSelectedChart('area'), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Activity, { className: "h-4 w-4 mr-2" }), "Area"] }), (0, jsx_runtime_1.jsxs)(ui_2.Button, { variant: selectedChart === 'pie' ? 'primary' : 'outline', size: "sm", onClick: () => setSelectedChart('pie'), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.PieChart, { className: "h-4 w-4 mr-2" }), "Pie"] })] })] }), summaryStats && ((0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", children: [(0, jsx_runtime_1.jsx)(ui_1.Card, { children: (0, jsx_runtime_1.jsxs)(ui_1.CardContent, { className: "p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-bold text-blue-600", children: (0, number_format_1.formatNumber)(summaryStats.sum) }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-gray-600", children: "Total" })] }) }), (0, jsx_runtime_1.jsx)(ui_1.Card, { children: (0, jsx_runtime_1.jsxs)(ui_1.CardContent, { className: "p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-bold text-green-600", children: summaryStats.avg.toFixed(1) }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-gray-600", children: "Average" })] }) }), (0, jsx_runtime_1.jsx)(ui_1.Card, { children: (0, jsx_runtime_1.jsxs)(ui_1.CardContent, { className: "p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-bold text-orange-600", children: (0, number_format_1.formatNumber)(summaryStats.min) }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-gray-600", children: "Minimum" })] }) }), (0, jsx_runtime_1.jsx)(ui_1.Card, { children: (0, jsx_runtime_1.jsxs)(ui_1.CardContent, { className: "p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-bold text-purple-600", children: (0, number_format_1.formatNumber)(summaryStats.max) }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-gray-600", children: "Maximum" })] }) })] })), (0, jsx_runtime_1.jsxs)(ui_1.Card, { children: [(0, jsx_runtime_1.jsx)(ui_1.CardHeader, { children: (0, jsx_runtime_1.jsx)(ui_1.CardTitle, { className: "text-lg", children: "Chart Configuration" }) }), (0, jsx_runtime_1.jsx)(ui_1.CardContent, { children: (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("label", { className: "text-sm font-medium mb-2 block", children: ["X-Axis (", selectedChart === 'pie' ? 'Category' : 'Categories', ")"] }), (0, jsx_runtime_1.jsx)(components_1.Dropdown, { options: categoricalColumns.map((col) => ({
                                                 value: col.key,
                                                 label: col.label,
                                             })), value: xAxisColumn, onValueChange: (value) => setXAxisColumn(typeof value === 'string' ? value : value[0] || ''), placeholder: "Select column" })] }), selectedChart !== 'pie' && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "text-sm font-medium mb-2 block", children: "Y-Axis (Values)" }), (0, jsx_runtime_1.jsx)(components_1.Dropdown, { options: numericColumns.map((col) => ({

package/dist/cjs/components/datagrid/rows/DraggableRow.js

@@ -20,15 +20,15 @@ navigationState = {}, columnSearches = {}, isColumnSearchActive = {}, onColumnSe
         transition,
         opacity: isDragging ? 0.5 : 1,
     };
-    return ((0, jsx_runtime_1.jsxs)("tr", { ref: setNodeRef, style: style, className: `
-        cursor-pointer group
-        transition-colors duration-150 ease-out
-        ${isDragging ? 'shadow-lg z-50' : ''}
+    return ((0, jsx_runtime_1.jsxs)("tr", { ref: setNodeRef, style: style, className: `
+        cursor-pointer group
+        transition-colors duration-150 ease-out
+        ${isDragging ? 'shadow-lg z-50' : ''}
         ${isHighlighted
             ? 'border-2 border-[rgb(var(--color-primary))] bg-gradient-to-r from-[rgb(var(--color-primary))]/10 to-[rgb(var(--color-primary))]/20 shadow-lg relative'
             : isSelected
                 ? 'bg-[color-mix(in_srgb,rgb(var(--color-primary))_8%,rgb(var(--bg-surface)))] shadow-sm hover:bg-[color-mix(in_srgb,rgb(var(--color-primary))_15%,rgb(var(--bg-surface)))]'
-                : 'hover:bg-[color-mix(in_srgb,rgb(var(--color-primary))_5%,rgb(var(--bg-surface)))]'}
-        ${className ?? ''}
+                : 'hover:bg-[color-mix(in_srgb,rgb(var(--color-primary))_5%,rgb(var(--bg-surface)))]'}
+        ${className ?? ''}
       `, onClick: onRowClick, onDoubleClick: onRowDoubleClick, onContextMenu: onRowContextMenu, children: [showDragHandle && ((0, jsx_runtime_1.jsx)("td", { className: "text-center align-middle cursor-grab active:cursor-grabbing", style: { width: '1.875rem', minWidth: '1.875rem', maxWidth: '1.875rem' }, ...attributes, ...listeners, children: (0, jsx_runtime_1.jsx)("div", { className: "w-full h-full flex items-center justify-center", children: (0, jsx_runtime_1.jsx)(lucide_react_1.GripVertical, { className: "h-4 w-4 text-gray-400" }) }) })), row.getVisibleCells().map((cell, cellIndex) => ((0, jsx_runtime_1.jsx)(CellRenderer_1.CellRenderer, { cell: cell, cellIndex: cellIndex, row: row, enableBacchaSearch: enableBacchaSearch, mainColumnsArray: mainColumnsArray, frozenColumnsState: frozenColumnsState, navigationState: navigationState, columnSearches: columnSearches, isColumnSearchActive: isColumnSearchActive, onColumnSearch: onColumnSearch, onClearColumnSearch: onClearColumnSearch, SearchHighlighter: SearchHighlighter, InlineSearchCell: InlineSearchCell, isSelected: isSelected }, cell.id)))] }));
 }

package/dist/cjs/components/datagrid/search/InlineSearchCell.js

@@ -89,10 +89,10 @@ function InlineSearchCell({ value, columnId, rowId, onSearch, onClearSearch, isS
         return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: parts.map((part, index) => part.toLowerCase() === highlight.toLowerCase() ? ((0, jsx_runtime_1.jsx)("mark", { className: "bg-yellow-200 text-yellow-900 px-0.5 rounded", children: part }, index)) : ((0, jsx_runtime_1.jsx)("span", { children: part }, index))) }));
     };
     const displayValue = value?.toString() || '';
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: cellRef, tabIndex: 0, className: `bacchasearch relative group cursor-pointer outline-none inline-flex items-center w-full ${className}`, onClick: handleCellClick, children: [(0, jsx_runtime_1.jsx)("span", { className: `
-          text-xs flex-1 rounded transition-colors
-          ${isSearchActive ? 'bg-[rgb(var(--color-primary)/0.1)]' : 'hover:bg-[rgb(var(--color-primary)/0.05)]'}
-          ${isTyping ? 'ring-1 ring-[rgb(var(--color-primary)/0.3)] bg-[rgb(var(--color-primary)/0.15)]' : ''}
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: cellRef, tabIndex: 0, className: `bacchasearch relative group cursor-pointer outline-none inline-flex items-center w-full ${className}`, onClick: handleCellClick, children: [(0, jsx_runtime_1.jsx)("span", { className: `
+          text-xs flex-1 rounded transition-colors
+          ${isSearchActive ? 'bg-[rgb(var(--color-primary)/0.1)]' : 'hover:bg-[rgb(var(--color-primary)/0.05)]'}
+          ${isTyping ? 'ring-1 ring-[rgb(var(--color-primary)/0.3)] bg-[rgb(var(--color-primary)/0.15)]' : ''}
         `, children: isSearchActive && searchTerm ?
                     renderHighlightedText(displayValue, searchTerm) :
                     displayValue }), (0, jsx_runtime_1.jsx)(lucide_react_1.Search, { className: `h-3 w-3 text-[rgb(var(--fg-muted))] ml-0.5 flex-shrink-0 transition-opacity ${isTyping ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'}` }), (isTyping || isSearchActive) && ((0, jsx_runtime_1.jsx)("div", { className: "absolute -top-0.5 -right-0.5", children: (0, jsx_runtime_1.jsx)("div", { className: `h-1.5 w-1.5 rounded-full ${isTyping ? 'bg-[rgb(var(--color-success))]' : 'bg-[rgb(var(--color-primary))]'}` }) })), isTyping && localSearchTerm && ((0, jsx_runtime_1.jsxs)("div", { className: "absolute -bottom-5 left-0 bg-[rgb(var(--bg-surface))] text-[rgb(var(--fg-default))] text-xs px-1.5 py-0.5 rounded shadow-lg border border-[rgb(var(--bd-default))] z-10 whitespace-nowrap", children: ["\"", localSearchTerm, "\""] }))] }));

package/dist/cjs/components/datagrid/utils/grid-helpers.js

@@ -1,8 +1,5 @@
 'use client';
 "use strict";
-/**
- * Grid utility functions and helpers
- */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.calculatePaginationInfo = calculatePaginationInfo;
 exports.generatePageNumbers = generatePageNumbers;
@@ -10,6 +7,10 @@ exports.debounce = debounce;
 exports.getRowId = getRowId;
 exports.formatNumber = formatNumber;
 exports.matchesSearch = matchesSearch;
+const number_format_1 = require("../../../lib/number-format.js");
+/**
+ * Grid utility functions and helpers
+ */
 /**
  * Calculate pagination info
  */
@@ -83,10 +84,10 @@ function getRowId(row, index, getRowIdFn) {
     return String(index);
 }
 /**
- * Format large numbers with commas
+ * Format large numbers with grouping, in the library's number locale (Indian by default)
  */
 function formatNumber(num) {
-    return num.toLocaleString();
+    return (0, number_format_1.formatNumber)(num);
 }
 /**
  * Check if value matches search term

package/dist/cjs/components/draft/AutoSaveIndicator.js

@@ -57,14 +57,14 @@ function AutoSaveIndicator({ enabled, lastSaved, isDirty, isSaving, onOpenDraftM
         };
     };
     const status = getStatus();
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs text-[rgb(var(--fg-muted))]", children: "Auto-save:" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => onToggleAutoSave?.(!enabled), className: `
-            relative inline-flex h-5 w-9 items-center rounded-full transition-colors
-            ${enabled ? 'bg-[rgb(var(--color-primary))]' : 'bg-[rgb(var(--bg-muted))]'}
-          `, title: enabled ? 'Disable auto-save' : 'Enable auto-save', children: (0, jsx_runtime_1.jsx)("span", { className: `
-              inline-block h-3.5 w-3.5 transform rounded-full bg-white transition-transform
-              ${enabled ? 'translate-x-5' : 'translate-x-1'}
-            ` }) }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-medium text-[rgb(var(--fg-default))]", children: enabled ? 'ON' : 'OFF' })] }), (0, jsx_runtime_1.jsx)("div", { className: "h-4 w-px bg-[rgb(var(--bd-default))]" }), (0, jsx_runtime_1.jsxs)("button", { onClick: onOpenDraftManager, className: `
-          flex items-center gap-2 px-3 py-1.5 rounded-md transition-colors
-          ${status.bg} ${status.color} hover:opacity-80
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs text-[rgb(var(--fg-muted))]", children: "Auto-save:" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => onToggleAutoSave?.(!enabled), className: `
+            relative inline-flex h-5 w-9 items-center rounded-full transition-colors
+            ${enabled ? 'bg-[rgb(var(--color-primary))]' : 'bg-[rgb(var(--bg-muted))]'}
+          `, title: enabled ? 'Disable auto-save' : 'Enable auto-save', children: (0, jsx_runtime_1.jsx)("span", { className: `
+              inline-block h-3.5 w-3.5 transform rounded-full bg-white transition-transform
+              ${enabled ? 'translate-x-5' : 'translate-x-1'}
+            ` }) }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-medium text-[rgb(var(--fg-default))]", children: enabled ? 'ON' : 'OFF' })] }), (0, jsx_runtime_1.jsx)("div", { className: "h-4 w-px bg-[rgb(var(--bd-default))]" }), (0, jsx_runtime_1.jsxs)("button", { onClick: onOpenDraftManager, className: `
+          flex items-center gap-2 px-3 py-1.5 rounded-md transition-colors
+          ${status.bg} ${status.color} hover:opacity-80
         `, title: "Click to manage drafts", children: [status.icon, (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-medium", children: status.text })] })] }));
 }

package/dist/cjs/components/draft/DraftModal.js

@@ -192,10 +192,10 @@ function DraftModal({ open, onClose, drafts, onLoad, onDelete, isLoading = false
     // Early return after all hooks to comply with Rules of Hooks
     if (!open)
         return null;
-    return ((0, jsx_runtime_1.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm", children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-[rgb(var(--bg-surface))] rounded-lg shadow-2xl w-full max-w-4xl max-h-[85vh] flex flex-col", children: [(0, jsx_runtime_1.jsxs)("div", { className: "px-6 py-3 border-b border-[rgb(var(--bd-default))] flex items-center gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 flex-shrink-0", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileText, { className: "w-5 h-5 text-[rgb(var(--color-primary))]" }), (0, jsx_runtime_1.jsx)("h2", { className: "text-base font-semibold text-[rgb(var(--fg-default))]", children: "Saved Drafts" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-xs text-[rgb(var(--fg-muted))]", children: ["(", drafts.length, ")"] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex-1", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-[rgb(var(--fg-muted))]" }), (0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: "Search...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "\n                w-full pl-9 pr-3 py-1.5 rounded-lg text-sm\n                bg-[rgb(var(--bg-default))]\n                border border-[rgb(var(--bd-default))]\n                text-[rgb(var(--fg-default))]\n                placeholder:text-[rgb(var(--fg-muted))]\n                focus:outline-none focus:ring-2 focus:ring-[rgb(var(--color-primary))]\n              " })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex-shrink-0 w-36", children: (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { options: SORT_OPTIONS, value: sortBy, onValueChange: (val) => setSortBy(val), size: "sm", autoWidth: true }) }), (0, jsx_runtime_1.jsx)("button", { onClick: onClose, className: "p-1.5 rounded-lg hover:bg-[rgb(var(--bg-muted))] text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] transition-colors flex-shrink-0", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "w-5 h-5" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 overflow-y-auto px-6 py-4", children: isLoading ? ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center py-16", children: (0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-12 h-12 rounded-full border-4 border-[rgb(var(--color-primary)_/_0.2)] border-t-[rgb(var(--color-primary))] animate-spin mx-auto mb-3" }), (0, jsx_runtime_1.jsx)("p", { className: "text-[rgb(var(--fg-muted))]", children: "Loading drafts..." })] }) })) : filteredAndSortedDrafts.length === 0 ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center justify-center py-16 text-center", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileText, { className: "w-16 h-16 text-[rgb(var(--fg-muted))] mb-4 opacity-50" }), (0, jsx_runtime_1.jsx)("p", { className: "text-lg font-medium text-[rgb(var(--fg-default))] mb-1", children: searchQuery ? 'No matching drafts' : 'No drafts saved yet' }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-[rgb(var(--fg-muted))]", children: searchQuery ? 'Try a different search term' : 'Start by clicking "Save Draft" button' })] })) : ((0, jsx_runtime_1.jsx)("div", { className: "space-y-3", children: paginatedDrafts.map((draft) => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm", children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-[rgb(var(--bg-surface))] rounded-lg shadow-2xl w-full max-w-4xl max-h-[85vh] flex flex-col", children: [(0, jsx_runtime_1.jsxs)("div", { className: "px-6 py-3 border-b border-[rgb(var(--bd-default))] flex items-center gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 flex-shrink-0", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileText, { className: "w-5 h-5 text-[rgb(var(--color-primary))]" }), (0, jsx_runtime_1.jsx)("h2", { className: "text-base font-semibold text-[rgb(var(--fg-default))]", children: "Saved Drafts" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-xs text-[rgb(var(--fg-muted))]", children: ["(", drafts.length, ")"] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex-1", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-[rgb(var(--fg-muted))]" }), (0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: "Search...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "\r\n                w-full pl-9 pr-3 py-1.5 rounded-lg text-sm\r\n                bg-[rgb(var(--bg-default))]\r\n                border border-[rgb(var(--bd-default))]\r\n                text-[rgb(var(--fg-default))]\r\n                placeholder:text-[rgb(var(--fg-muted))]\r\n                focus:outline-none focus:ring-2 focus:ring-[rgb(var(--color-primary))]\r\n              " })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex-shrink-0 w-36", children: (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { options: SORT_OPTIONS, value: sortBy, onValueChange: (val) => setSortBy(val), size: "sm", autoWidth: true }) }), (0, jsx_runtime_1.jsx)("button", { onClick: onClose, className: "p-1.5 rounded-lg hover:bg-[rgb(var(--bg-muted))] text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] transition-colors flex-shrink-0", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "w-5 h-5" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 overflow-y-auto px-6 py-4", children: isLoading ? ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center py-16", children: (0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-12 h-12 rounded-full border-4 border-[rgb(var(--color-primary)_/_0.2)] border-t-[rgb(var(--color-primary))] animate-spin mx-auto mb-3" }), (0, jsx_runtime_1.jsx)("p", { className: "text-[rgb(var(--fg-muted))]", children: "Loading drafts..." })] }) })) : filteredAndSortedDrafts.length === 0 ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center justify-center py-16 text-center", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileText, { className: "w-16 h-16 text-[rgb(var(--fg-muted))] mb-4 opacity-50" }), (0, jsx_runtime_1.jsx)("p", { className: "text-lg font-medium text-[rgb(var(--fg-default))] mb-1", children: searchQuery ? 'No matching drafts' : 'No drafts saved yet' }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-[rgb(var(--fg-muted))]", children: searchQuery ? 'Try a different search term' : 'Start by clicking "Save Draft" button' })] })) : ((0, jsx_runtime_1.jsx)("div", { className: "space-y-3", children: paginatedDrafts.map((draft) => {
                             const progress = calculateProgress(draft);
                             const preview = draft.previewData || {};
-                            return ((0, jsx_runtime_1.jsx)("div", { className: "\n                      group relative p-3 rounded-lg\n                      bg-[rgb(var(--bg-default))]\n                      border border-[rgb(var(--bd-default))]\n                      hover:border-[rgb(var(--color-primary))]\n                      hover:shadow-lg\n                      transition-all duration-200\n                    ", children: (0, jsx_runtime_1.jsx)("div", { className: "flex items-start gap-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 min-w-0", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex-1 min-w-0", children: [(0, jsx_runtime_1.jsx)("h3", { className: "font-semibold text-[rgb(var(--fg-default))] truncate text-base", children: draft.draftName || 'Untitled Draft' }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 mt-1 text-xs text-[rgb(var(--fg-muted))]", children: [(0, jsx_runtime_1.jsx)("span", { children: formatRelativeTime(draft.lastSaved) }), (0, jsx_runtime_1.jsxs)("span", { className: "hidden group-hover:inline", children: ["\u2022 ", formatFullDate(draft.lastSaved)] }), draft.isAutoSave && ((0, jsx_runtime_1.jsx)("span", { className: "text-[10px] px-2 py-0.5 rounded-full bg-[rgb(var(--color-primary)_/_0.1)] text-[rgb(var(--color-primary))] font-medium", children: "AUTO-SAVE" }))] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => handleLoad(draft.draftId), className: "\n                                px-4 py-2 rounded-lg text-sm font-medium\n                                bg-[rgb(var(--color-primary))]\n                                text-white\n                                hover:opacity-90\n                                transition-opacity\n                                flex items-center gap-2\n                              ", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Download, { className: "w-4 h-4" }), "Load"] }), (0, jsx_runtime_1.jsx)("button", { onClick: () => handleDelete(draft.draftId), disabled: deletingId === draft.draftId, className: "\n                                p-2 rounded-lg\n                                text-[rgb(var(--fg-muted))]\n                                hover:text-red-600\n                                hover:bg-red-50\n                                transition-colors\n                                disabled:opacity-50\n                              ", title: "Delete draft", children: deletingId === draft.draftId ? ((0, jsx_runtime_1.jsx)("div", { className: "w-4 h-4 rounded-full border-2 border-red-200 border-t-red-600 animate-spin" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { className: "w-4 h-4" })) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 gap-x-6 gap-y-1 mt-2 text-sm", children: [preview.jobName && ((0, jsx_runtime_1.jsx)("div", { className: "text-[rgb(var(--fg-muted))] truncate", children: preview.jobName }, "job")), preview.clientName && ((0, jsx_runtime_1.jsx)("div", { className: "text-[rgb(var(--fg-muted))] truncate", children: preview.clientName }, "client")), preview.category && ((0, jsx_runtime_1.jsx)("div", { className: "text-[rgb(var(--fg-muted))] truncate", children: preview.category }, "category")), preview.totalCost !== undefined && preview.totalCost > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "font-medium text-[rgb(var(--color-primary))]", children: [currencySymbol, preview.totalCost.toLocaleString('en-IN')] }, "cost"))] }), progress > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "mt-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between text-xs text-[rgb(var(--fg-muted))] mb-1", children: [(0, jsx_runtime_1.jsx)("span", { children: "Progress" }), (0, jsx_runtime_1.jsxs)("span", { className: "font-medium", children: [progress, "%"] })] }), (0, jsx_runtime_1.jsx)("div", { className: "h-1.5 bg-[rgb(var(--bg-muted))] rounded-full overflow-hidden", children: (0, jsx_runtime_1.jsx)("div", { className: "h-full bg-[rgb(var(--color-primary))] transition-all duration-500 rounded-full", style: { width: `${progress}%` } }) })] }))] }) }) }, draft.draftId));
+                            return ((0, jsx_runtime_1.jsx)("div", { className: "\r\n                      group relative p-3 rounded-lg\r\n                      bg-[rgb(var(--bg-default))]\r\n                      border border-[rgb(var(--bd-default))]\r\n                      hover:border-[rgb(var(--color-primary))]\r\n                      hover:shadow-lg\r\n                      transition-all duration-200\r\n                    ", children: (0, jsx_runtime_1.jsx)("div", { className: "flex items-start gap-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 min-w-0", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex-1 min-w-0", children: [(0, jsx_runtime_1.jsx)("h3", { className: "font-semibold text-[rgb(var(--fg-default))] truncate text-base", children: draft.draftName || 'Untitled Draft' }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 mt-1 text-xs text-[rgb(var(--fg-muted))]", children: [(0, jsx_runtime_1.jsx)("span", { children: formatRelativeTime(draft.lastSaved) }), (0, jsx_runtime_1.jsxs)("span", { className: "hidden group-hover:inline", children: ["\u2022 ", formatFullDate(draft.lastSaved)] }), draft.isAutoSave && ((0, jsx_runtime_1.jsx)("span", { className: "text-[10px] px-2 py-0.5 rounded-full bg-[rgb(var(--color-primary)_/_0.1)] text-[rgb(var(--color-primary))] font-medium", children: "AUTO-SAVE" }))] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => handleLoad(draft.draftId), className: "\r\n                                px-4 py-2 rounded-lg text-sm font-medium\r\n                                bg-[rgb(var(--color-primary))]\r\n                                text-white\r\n                                hover:opacity-90\r\n                                transition-opacity\r\n                                flex items-center gap-2\r\n                              ", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Download, { className: "w-4 h-4" }), "Load"] }), (0, jsx_runtime_1.jsx)("button", { onClick: () => handleDelete(draft.draftId), disabled: deletingId === draft.draftId, className: "\r\n                                p-2 rounded-lg\r\n                                text-[rgb(var(--fg-muted))]\r\n                                hover:text-red-600\r\n                                hover:bg-red-50\r\n                                transition-colors\r\n                                disabled:opacity-50\r\n                              ", title: "Delete draft", children: deletingId === draft.draftId ? ((0, jsx_runtime_1.jsx)("div", { className: "w-4 h-4 rounded-full border-2 border-red-200 border-t-red-600 animate-spin" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { className: "w-4 h-4" })) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 gap-x-6 gap-y-1 mt-2 text-sm", children: [preview.jobName && ((0, jsx_runtime_1.jsx)("div", { className: "text-[rgb(var(--fg-muted))] truncate", children: preview.jobName }, "job")), preview.clientName && ((0, jsx_runtime_1.jsx)("div", { className: "text-[rgb(var(--fg-muted))] truncate", children: preview.clientName }, "client")), preview.category && ((0, jsx_runtime_1.jsx)("div", { className: "text-[rgb(var(--fg-muted))] truncate", children: preview.category }, "category")), preview.totalCost !== undefined && preview.totalCost > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "font-medium text-[rgb(var(--color-primary))]", children: [currencySymbol, preview.totalCost.toLocaleString('en-IN')] }, "cost"))] }), progress > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "mt-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between text-xs text-[rgb(var(--fg-muted))] mb-1", children: [(0, jsx_runtime_1.jsx)("span", { children: "Progress" }), (0, jsx_runtime_1.jsxs)("span", { className: "font-medium", children: [progress, "%"] })] }), (0, jsx_runtime_1.jsx)("div", { className: "h-1.5 bg-[rgb(var(--bg-muted))] rounded-full overflow-hidden", children: (0, jsx_runtime_1.jsx)("div", { className: "h-full bg-[rgb(var(--color-primary))] transition-all duration-500 rounded-full", style: { width: `${progress}%` } }) })] }))] }) }) }, draft.draftId));
                         }) })) }), (0, jsx_runtime_1.jsxs)("div", { className: "px-6 py-4 border-t border-[rgb(var(--bd-default))] flex justify-between items-center bg-[rgb(var(--bg-muted)_/_0.3)]", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm text-[rgb(var(--fg-muted))]", children: filteredAndSortedDrafts.length > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Showing ", ((currentPage - 1) * PAGE_SIZE) + 1, "-", Math.min(currentPage * PAGE_SIZE, filteredAndSortedDrafts.length), " of ", filteredAndSortedDrafts.length, filteredAndSortedDrafts.length !== drafts.length && ` (filtered from ${drafts.length})`] })) : (`0 of ${drafts.length} drafts`) }), totalPages > 1 && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => setCurrentPage(p => Math.max(1, p - 1)), disabled: currentPage === 1, className: "p-1.5 rounded text-[rgb(var(--fg-muted))] hover:bg-[rgb(var(--bg-default))] disabled:opacity-30 disabled:cursor-not-allowed transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { className: "w-4 h-4" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-1", children: Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
                                         let pageNum;
                                         if (totalPages <= 5) {
@@ -210,11 +210,11 @@ function DraftModal({ open, onClose, drafts, onLoad, onDelete, isLoading = false
                                         else {
                                             pageNum = currentPage - 2 + i;
                                         }
-                                        return ((0, jsx_runtime_1.jsx)("button", { onClick: () => setCurrentPage(pageNum), className: `
-                        w-8 h-8 rounded text-sm font-medium transition-colors
+                                        return ((0, jsx_runtime_1.jsx)("button", { onClick: () => setCurrentPage(pageNum), className: `
+                        w-8 h-8 rounded text-sm font-medium transition-colors
                         ${currentPage === pageNum
                                                 ? 'bg-[rgb(var(--color-primary))] text-white'
-                                                : 'text-[rgb(var(--fg-muted))] hover:bg-[rgb(var(--bg-default))]'}
+                                                : 'text-[rgb(var(--fg-muted))] hover:bg-[rgb(var(--bg-default))]'}
                       `, children: pageNum }, pageNum));
-                                    }) }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setCurrentPage(p => Math.min(totalPages, p + 1)), disabled: currentPage === totalPages, className: "p-1.5 rounded text-[rgb(var(--fg-muted))] hover:bg-[rgb(var(--bg-default))] disabled:opacity-30 disabled:cursor-not-allowed transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "w-4 h-4" }) })] })), (0, jsx_runtime_1.jsx)("button", { onClick: onClose, className: "\n              px-5 py-2 rounded-lg text-sm font-medium\n              bg-[rgb(var(--bg-default))]\n              text-[rgb(var(--fg-default))]\n              border border-[rgb(var(--bd-default))]\n              hover:bg-[rgb(var(--bg-muted))]\n              transition-colors\n            ", children: "Close" })] })] }) }));
+                                    }) }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setCurrentPage(p => Math.min(totalPages, p + 1)), disabled: currentPage === totalPages, className: "p-1.5 rounded text-[rgb(var(--fg-muted))] hover:bg-[rgb(var(--bg-default))] disabled:opacity-30 disabled:cursor-not-allowed transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "w-4 h-4" }) })] })), (0, jsx_runtime_1.jsx)("button", { onClick: onClose, className: "\r\n              px-5 py-2 rounded-lg text-sm font-medium\r\n              bg-[rgb(var(--bg-default))]\r\n              text-[rgb(var(--fg-default))]\r\n              border border-[rgb(var(--bd-default))]\r\n              hover:bg-[rgb(var(--bg-muted))]\r\n              transition-colors\r\n            ", children: "Close" })] })] }) }));
 }

package/dist/cjs/components/forms/date-picker/DatePicker.js

@@ -129,20 +129,14 @@ function DatePicker({ id, 'aria-label': ariaLabel, value, onChange, mode = 'sing
     const normalizeDateToMidnight = (date) => {
         return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0);
     };
-    const formatDate = (date) => {
-        const day = date.getDate().toString().padStart(2, '0');
-        const month = shared_utils_1.MONTHS[date.getMonth()].slice(0, 3);
-        const year = date.getFullYear();
-        return `${day} ${month}, ${year}`;
-    };
+    // "1 Sep 2026": built by hand rather than with toLocaleDateString, whose en-GB and en-IN
+    // locales spell September "Sept". parseDate reads it back with or without a comma.
+    const formatDateNoYear = (date) => `${date.getDate()} ${shared_utils_1.MONTHS[date.getMonth()].slice(0, 3)}`;
+    const formatDate = (date) => `${formatDateNoYear(date)} ${date.getFullYear()}`;
     const formatDateShort = (date) => {
         if (!date)
             return '--';
-        return date.toLocaleDateString('en-GB', {
-            day: '2-digit',
-            month: 'short',
-            year: 'numeric'
-        });
+        return formatDate(date);
     };
     const formatDisplayValue = () => {
         if (!value)
@@ -700,9 +694,9 @@ function DatePicker({ id, 'aria-label': ariaLabel, value, onChange, mode = 'sing
     }
     // Default popover mode
     return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('relative w-full', className), ref: containerRef, children: [label && ((0, jsx_runtime_1.jsx)("label", { className: "block text-sm font-medium text-[rgb(var(--fg-muted))] mb-2", children: label })), (0, jsx_runtime_1.jsxs)(Popover.Root, { open: !disabled && isOpen, onOpenChange: (open) => !disabled && setIsOpen(open), children: [(0, jsx_runtime_1.jsx)(Popover.Trigger, { asChild: true, disabled: disabled, children: iconOnly ? ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: (0, utils_1.cn)('relative flex items-center gap-1 text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] transition-colors p-0.5 flex-shrink-0', (selectedRange.from || selectedRange.to) && 'text-[rgb(var(--color-primary))]', className), title: selectedRange.from || selectedRange.to
-                                ? `Date filter: ${selectedRange.from ? new Date(selectedRange.from).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' }) : ''}${selectedRange.to ? ` – ${new Date(selectedRange.to).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })}` : ''}`
+                                ? `Date filter: ${selectedRange.from ? formatDate(new Date(selectedRange.from)) : ''}${selectedRange.to ? ` – ${formatDate(new Date(selectedRange.to))}` : ''}`
                                 : 'Select date range', children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CalendarDays, { className: "h-3.5 w-3.5 flex-shrink-0" }), (0, jsx_runtime_1.jsx)("span", { className: "hidden sm:inline text-xs", children: selectedRange.from || selectedRange.to
-                                        ? `${selectedRange.from ? new Date(selectedRange.from).toLocaleDateString('en-GB', { day: '2-digit', month: 'short' }) : ''}${selectedRange.to ? ` – ${new Date(selectedRange.to).toLocaleDateString('en-GB', { day: '2-digit', month: 'short' })}` : ''}`
+                                        ? `${selectedRange.from ? formatDateNoYear(new Date(selectedRange.from)) : ''}${selectedRange.to ? ` – ${formatDateNoYear(new Date(selectedRange.to))}` : ''}`
                                         : 'Date' }), (selectedRange.from || selectedRange.to) && ((0, jsx_runtime_1.jsx)("span", { className: "absolute -top-0.5 -right-0.5 h-1.5 w-1.5 rounded-full bg-[rgb(var(--color-primary))] ring-1 ring-[rgb(var(--bg-surface))]" }))] })) : ((0, jsx_runtime_1.jsx)("div", { className: "relative", ref: inputWrapperRef, onClick: (e) => e.preventDefault(), children: (0, jsx_runtime_1.jsx)(ui_2.Input, { id: id, "aria-label": ariaLabel, value: inputValue, onChange: handleInputChange, onBlur: handleInputBlur, onKeyDown: handleInputKeyDown, placeholder: getPlaceholder(), disabled: disabled, error: error, className: (0, utils_1.cn)('pl-2 pr-9 text-xs w-full', error && 'border-red-300'), onFocus: () => !disabled && setIsOpen(true), rightIcon: lucide_react_1.Calendar, onRightIconClick: () => !disabled && setIsOpen(!isOpen) }) })) }), (0, jsx_runtime_1.jsx)(Popover.Portal, { container: typeof document !== 'undefined' ? document.body : undefined, children: (0, jsx_runtime_1.jsxs)(Popover.Content, { ref: calendarRef, className: (0, utils_1.cn)("z-[300] bg-[rgb(var(--bg-surface))] rounded-xl shadow-2xl border border-[rgb(var(--bd-default))] backdrop-blur-sm", "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2", mode === 'range' ? 'w-[95vw] sm:w-auto sm:min-w-[580px] p-2' : 'w-[95vw] sm:w-auto sm:min-w-[280px] p-3', 'max-w-[calc(100vw-2rem)]'), side: "bottom", align: popoverAlign ?? (mode === 'range' ? 'end' : 'start'), sideOffset: 8, avoidCollisions: true, collisionPadding: 16, sticky: "always", onOpenAutoFocus: (e) => e.preventDefault(), onKeyDown: handleCalendarKeyDown, tabIndex: -1, onInteractOutside: (e) => {
                                 // Prevent closing when interacting with nested Radix portals (like Dropdowns)
                                 const target = e.target;

package/dist/cjs/components/forms/date-picker/DateTimePicker.js

@@ -76,7 +76,7 @@ function DateTimePicker({ value, onChange, placeholder = 'Select date & time...'
         return returnFormat === 'string' ? date.toISOString() : date;
     };
     const formatDisplayValue = (date) => {
-        const day = date.getDate().toString().padStart(2, '0');
+        const day = date.getDate();
         const month = shared_utils_1.MONTHS[date.getMonth()].slice(0, 3);
         const year = date.getFullYear();
         let timeStr = '';
@@ -90,7 +90,7 @@ function DateTimePicker({ value, onChange, placeholder = 'Select date & time...'
         else {
             timeStr = `${hrs.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')}`;
         }
-        return `${day} ${month}, ${year} ${timeStr}`;
+        return `${day} ${month} ${year} ${timeStr}`;
     };
     const handleDateClick = (date) => {
         setSelectedDate(date);

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/cjs/styles/index.css

@@ -1,5 +1,5 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@import './tokens.css';
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@import './tokens.css';

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;