impact-nova 1.9.0-alpha.2 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/dist/components/ui/ag-grid-react/cell-renderers/percent-progress-display-renderer.js +4 -4
  2. package/dist/components/ui/ag-grid-react/index.d.ts +2 -1
  3. package/dist/components/ui/ag-grid-react/index.js +136 -129
  4. package/dist/components/ui/ag-grid-react/refreshGridAutoSizeStrategy.d.ts +7 -0
  5. package/dist/components/ui/ag-grid-react/refreshGridAutoSizeStrategy.js +30 -0
  6. package/dist/components/ui/ag-grid-react/useGridAutoSizeStrategyOnResize.d.ts +7 -0
  7. package/dist/components/ui/ag-grid-react/useGridAutoSizeStrategyOnResize.js +33 -0
  8. package/dist/components/ui/empty-container/emptyStateIllustrations.d.ts +15 -31
  9. package/dist/components/ui/empty-container/emptyStateIllustrations.js +32 -21
  10. package/dist/components/ui/empty-container/illustrations/empty-state-1.d.ts +3 -0
  11. package/dist/components/ui/empty-container/illustrations/empty-state-1.js +7 -0
  12. package/dist/components/ui/empty-container/illustrations/empty-state-2.d.ts +3 -0
  13. package/dist/components/ui/empty-container/illustrations/empty-state-2.js +7 -0
  14. package/dist/components/ui/empty-container/illustrations/empty-state-3.d.ts +3 -0
  15. package/dist/components/ui/empty-container/illustrations/empty-state-3.js +7 -0
  16. package/dist/components/ui/empty-container/illustrations/empty-state-4.d.ts +3 -0
  17. package/dist/components/ui/empty-container/illustrations/empty-state-4.js +7 -0
  18. package/dist/components/ui/empty-container/illustrations/empty-state-5.d.ts +3 -0
  19. package/dist/components/ui/empty-container/illustrations/empty-state-5.js +7 -0
  20. package/dist/components/ui/empty-container/illustrations/empty-state-6.d.ts +3 -0
  21. package/dist/components/ui/empty-container/illustrations/empty-state-6.js +7 -0
  22. package/dist/components/ui/empty-container.js +60 -53
  23. package/dist/components/ui/progress-bar.js +4 -0
  24. package/dist/i18n/locales/index.js +10 -0
  25. package/dist/index.d.ts +0 -56
  26. package/dist/index.js +153 -153
  27. package/dist/lib/virtualized/index.js +18 -0
  28. package/dist/llms/rules/ag-grid.js +1 -1
  29. package/dist/llms/rules/best-practices.js +1 -1
  30. package/dist/llms/rules/installation.js +1 -1
  31. package/dist/llms/rules/migration.js +1 -1
  32. package/dist/llms/rules/real-world-patterns.js +1 -1
  33. package/dist/llms/rules/requirements.js +1 -1
  34. package/dist/llms/rules/troubleshooting.js +1 -1
  35. package/package.json +8 -1
package/dist/index.js CHANGED
@@ -64,50 +64,50 @@ import { Tag as Ua, tagVariants as Ka } from "./components/ui/tag.js";
64
64
  import { Textarea as Xa } from "./components/ui/textarea.js";
65
65
  import { Toast as ja, ToastAction as Ja, ToastClose as Qa, ToastDescription as Ya, ToastProvider as $a, ToastTitle as ei, ToastViewport as ri } from "./components/ui/toast.js";
66
66
  import { Toaster as ti } from "./components/ui/toaster.js";
67
- import { Tooltip as ii, TooltipContent as ni, TooltipProvider as pi, TooltipTrigger as di } from "./components/ui/tooltip.js";
68
- import { DataTable as mi, DataTableContent as si, DataTableToolbar as ci } from "./components/ui/data-table/data-table.js";
69
- import { DATA_TABLE_SCOPED_SHEET_HOST_MIN_HEIGHT_PX as fi, TABLE_VIEWPORT_SHELL_EXPANDED_CLASS as Si } from "./components/ui/data-table/data-table-constants.js";
70
- import { DataTableColumnList as Ci } from "./components/ui/data-table/data-table-column-list.js";
71
- import { DataTableContext as gi, DataTableSheetPortalContext as bi, useDataTable as Ti, useDataTableSheetPortal as Pi } from "./components/ui/data-table/data-table-context.js";
72
- import { DataTableFormatOptions as Ii } from "./components/ui/data-table/data-table-format-options.js";
73
- import { DataTableSheet as Mi, DataTableSheetContent as yi, DataTableSheetHeader as wi, DataTableSheetTrigger as vi, useDataTableSheet as Fi, useDataTableSheetApi as Li } from "./components/ui/data-table/data-table-sheet.js";
74
- import { DataTableViewMenuContent as Hi, DataTableViewMenuDensity as Ei, DataTableViewMenuSettingsItem as ki, DataTableViewMenuTrigger as Ri, DataTableViewMenuViewportExpand as Vi } from "./components/ui/data-table/data-table-view-menu.js";
75
- import { DataTableSavedViews as Oi } from "./components/ui/data-table/data-table-saved-views.js";
76
- import { PinSwitch as Gi } from "./components/ui/data-table/pin-switch.js";
77
- import { ColumnIndicator as _i } from "./components/ui/data-table/column-indicator.js";
78
- import { IndicatorLegend as Ki } from "./components/ui/data-table/indicator-legend.js";
79
- import { BROWSER_SHORTCUTS as Xi, COMMAND_SOURCE_LABELS as Zi, deserialiseOverrides as ji, fuzzyFilter as Ji, fuzzyScore as Qi, getBrowserShortcutInfo as Yi, getKeySymbol as $i, isMac as en, isReservedShortcut as rn, keybindingFromEvent as on, keybindingToString as tn, keybindingToSymbols as an, keybindingsEqual as nn, matchesKeybinding as pn, parseKeybinding as dn, scopePriority as ln, serialiseOverrides as mn } from "./components/ui/command-palette/utils.js";
80
- import { LocalStorageAdapter as cn, ShortcutRegistry as un } from "./components/ui/command-palette/shortcut-registry.js";
81
- import { CommandPaletteProvider as Sn, useCommandPalette as xn } from "./components/ui/command-palette/command-palette-context.js";
82
- import { useShortcut as Dn } from "./components/ui/command-palette/use-shortcut.js";
83
- import { useGlobalShortcut as bn } from "./components/ui/command-palette/use-global-shortcut.js";
84
- import { useBrowserShortcuts as Pn } from "./components/ui/command-palette/use-browser-shortcuts.js";
85
- import { ShortcutScopeProvider as In } from "./components/ui/command-palette/shortcut-scope-provider.js";
86
- import { CommandPalette as Mn, CommandPaletteEmpty as yn, CommandPaletteFooter as wn, CommandPaletteGroup as vn, CommandPaletteInput as Fn, CommandPaletteItem as Ln, CommandPaletteList as Bn, CommandPaletteSeparator as Hn, CommandPaletteShortcut as En } from "./components/ui/command-palette/command-palette.js";
87
- import { Kbd as Rn } from "./components/ui/command-palette/kbd.js";
88
- import { ShortcutOverlayProvider as Nn, useShortcutOverlay as On } from "./components/ui/command-palette/shortcut-overlay-context.js";
89
- import { ShortcutOverlay as Gn } from "./components/ui/command-palette/shortcut-overlay.js";
90
- import { toast as _n, useToast as Un } from "./hooks/use-toast.js";
91
- import { WizardBody as qn, WizardContent as Xn, WizardDescription as Zn, WizardFooter as jn, WizardHeader as Jn, WizardLayout as Qn, WizardMedia as Yn, WizardProgress as $n, WizardRoot as ep, WizardSidebar as rp, WizardStep as op, WizardStepDescription as tp, WizardTitle as ap, useWizard as ip } from "./components/ui/wizard/wizard.js";
92
- import { ChoiceCard as pp, ChoiceCardContent as dp, ChoiceCardDescription as lp, ChoiceCardGroup as mp, ChoiceCardHeader as sp, ChoiceCardIndicator as cp, ChoiceCardMedia as up, ChoiceCardTitle as fp, useChoiceCardGroup as Sp } from "./components/ui/choice-card/choice-card.js";
93
- import { AG_GRID_VALUE_FORMATTERS as Cp } from "./components/ui/ag-grid-react/value-formatters.js";
94
- import { ImpactNovaI18nProvider as gp, useImpactNovaI18n as bp } from "./i18n/ImpactNovaI18nContext.js";
95
- import { buildSectionedFlatList as Pp } from "./lib/virtualized/sectioned.js";
96
- import { de as Ip } from "./i18n/locales/de.js";
97
- import { defaultMessages as Mp } from "./i18n/defaultMessages.js";
98
- import { es as wp } from "./i18n/locales/es.js";
99
- import { getDateFnsLocale as Fp, getIntlLocale as Lp } from "./i18n/getDateFnsLocale.js";
100
- import { getSelectionCountsFromState as Hp } from "./lib/virtualized/selection-counts.js";
101
- import { hi as kp } from "./i18n/locales/hi.js";
102
- import { kn as Vp } from "./i18n/locales/kn.js";
103
- import { useDataGridVirtualRows as Op } from "./lib/virtualized/useDataGrid.js";
104
- import { useDataSource as Gp } from "./lib/virtualized/useDataSource.js";
105
- import { useDebouncedValue as _p } from "./lib/virtualized/useDebouncedValue.js";
106
- import { useRowState as Kp } from "./lib/virtualized/useRowState.js";
107
- import { useVirtualizedList as Xp } from "./lib/virtualized/useVirtualizedList.js";
108
- import { useVirtualizedRows as jp } from "./lib/virtualized/useVirtualizedRows.js";
67
+ import { getSelectionCountsFromState as ii } from "./lib/virtualized/selection-counts.js";
68
+ import { useDataSource as pi } from "./lib/virtualized/useDataSource.js";
69
+ import { useRowState as li } from "./lib/virtualized/useRowState.js";
70
+ import { useVirtualizedRows as si } from "./lib/virtualized/useVirtualizedRows.js";
71
+ import { useVirtualizedList as ui } from "./lib/virtualized/useVirtualizedList.js";
72
+ import { buildSectionedFlatList as Si } from "./lib/virtualized/sectioned.js";
73
+ import { useDebouncedValue as Ci } from "./lib/virtualized/useDebouncedValue.js";
74
+ import { useDataGridVirtualRows as gi } from "./lib/virtualized/useDataGrid.js";
75
+ import { Tooltip as Ti, TooltipContent as Pi, TooltipProvider as hi, TooltipTrigger as Ii } from "./components/ui/tooltip.js";
76
+ import { DataTable as Mi, DataTableContent as yi, DataTableToolbar as wi } from "./components/ui/data-table/data-table.js";
77
+ import { DATA_TABLE_SCOPED_SHEET_HOST_MIN_HEIGHT_PX as Fi, TABLE_VIEWPORT_SHELL_EXPANDED_CLASS as Li } from "./components/ui/data-table/data-table-constants.js";
78
+ import { DataTableColumnList as Hi } from "./components/ui/data-table/data-table-column-list.js";
79
+ import { DataTableContext as ki, DataTableSheetPortalContext as Ri, useDataTable as Vi, useDataTableSheetPortal as Ni } from "./components/ui/data-table/data-table-context.js";
80
+ import { DataTableFormatOptions as zi } from "./components/ui/data-table/data-table-format-options.js";
81
+ import { DataTableSheet as Wi, DataTableSheetContent as _i, DataTableSheetHeader as Ui, DataTableSheetTrigger as Ki, useDataTableSheet as qi, useDataTableSheetApi as Xi } from "./components/ui/data-table/data-table-sheet.js";
82
+ import { DataTableViewMenuContent as ji, DataTableViewMenuDensity as Ji, DataTableViewMenuSettingsItem as Qi, DataTableViewMenuTrigger as Yi, DataTableViewMenuViewportExpand as $i } from "./components/ui/data-table/data-table-view-menu.js";
83
+ import { DataTableSavedViews as rn } from "./components/ui/data-table/data-table-saved-views.js";
84
+ import { PinSwitch as tn } from "./components/ui/data-table/pin-switch.js";
85
+ import { ColumnIndicator as nn } from "./components/ui/data-table/column-indicator.js";
86
+ import { IndicatorLegend as dn } from "./components/ui/data-table/indicator-legend.js";
87
+ import { BROWSER_SHORTCUTS as mn, COMMAND_SOURCE_LABELS as sn, deserialiseOverrides as cn, fuzzyFilter as un, fuzzyScore as fn, getBrowserShortcutInfo as Sn, getKeySymbol as xn, isMac as Cn, isReservedShortcut as Dn, keybindingFromEvent as gn, keybindingToString as bn, keybindingToSymbols as Tn, keybindingsEqual as Pn, matchesKeybinding as hn, parseKeybinding as In, scopePriority as An, serialiseOverrides as Mn } from "./components/ui/command-palette/utils.js";
88
+ import { LocalStorageAdapter as wn, ShortcutRegistry as vn } from "./components/ui/command-palette/shortcut-registry.js";
89
+ import { CommandPaletteProvider as Ln, useCommandPalette as Bn } from "./components/ui/command-palette/command-palette-context.js";
90
+ import { useShortcut as En } from "./components/ui/command-palette/use-shortcut.js";
91
+ import { useGlobalShortcut as Rn } from "./components/ui/command-palette/use-global-shortcut.js";
92
+ import { useBrowserShortcuts as Nn } from "./components/ui/command-palette/use-browser-shortcuts.js";
93
+ import { ShortcutScopeProvider as zn } from "./components/ui/command-palette/shortcut-scope-provider.js";
94
+ import { CommandPalette as Wn, CommandPaletteEmpty as _n, CommandPaletteFooter as Un, CommandPaletteGroup as Kn, CommandPaletteInput as qn, CommandPaletteItem as Xn, CommandPaletteList as Zn, CommandPaletteSeparator as jn, CommandPaletteShortcut as Jn } from "./components/ui/command-palette/command-palette.js";
95
+ import { Kbd as Yn } from "./components/ui/command-palette/kbd.js";
96
+ import { ShortcutOverlayProvider as ep, useShortcutOverlay as rp } from "./components/ui/command-palette/shortcut-overlay-context.js";
97
+ import { ShortcutOverlay as tp } from "./components/ui/command-palette/shortcut-overlay.js";
98
+ import { toast as ip, useToast as np } from "./hooks/use-toast.js";
99
+ import { WizardBody as dp, WizardContent as lp, WizardDescription as mp, WizardFooter as sp, WizardHeader as cp, WizardLayout as up, WizardMedia as fp, WizardProgress as Sp, WizardRoot as xp, WizardSidebar as Cp, WizardStep as Dp, WizardStepDescription as gp, WizardTitle as bp, useWizard as Tp } from "./components/ui/wizard/wizard.js";
100
+ import { ChoiceCard as hp, ChoiceCardContent as Ip, ChoiceCardDescription as Ap, ChoiceCardGroup as Mp, ChoiceCardHeader as yp, ChoiceCardIndicator as wp, ChoiceCardMedia as vp, ChoiceCardTitle as Fp, useChoiceCardGroup as Lp } from "./components/ui/choice-card/choice-card.js";
101
+ import { AG_GRID_VALUE_FORMATTERS as Hp } from "./components/ui/ag-grid-react/value-formatters.js";
102
+ import { ImpactNovaI18nProvider as kp, useImpactNovaI18n as Rp } from "./i18n/ImpactNovaI18nContext.js";
103
+ import { de as Np } from "./i18n/locales/de.js";
104
+ import { defaultMessages as zp } from "./i18n/defaultMessages.js";
105
+ import { es as Wp } from "./i18n/locales/es.js";
106
+ import { getDateFnsLocale as Up, getIntlLocale as Kp } from "./i18n/getDateFnsLocale.js";
107
+ import { hi as Xp } from "./i18n/locales/hi.js";
108
+ import { kn as jp } from "./i18n/locales/kn.js";
109
109
  export {
110
- Cp as AG_GRID_VALUE_FORMATTERS,
110
+ Hp as AG_GRID_VALUE_FORMATTERS,
111
111
  i as Accordion,
112
112
  n as AccordionContent,
113
113
  p as AccordionItem,
@@ -131,7 +131,7 @@ export {
131
131
  w as Avatar,
132
132
  v as AvatarFallback,
133
133
  F as AvatarImage,
134
- Xi as BROWSER_SHORTCUTS,
134
+ mn as BROWSER_SHORTCUTS,
135
135
  H as Badge,
136
136
  R as Breadcrumb,
137
137
  V as BreadcrumbArrowSeparator,
@@ -144,7 +144,7 @@ export {
144
144
  U as BreadcrumbSeparator,
145
145
  j as Button,
146
146
  X as ButtonGroup,
147
- Zi as COMMAND_SOURCE_LABELS,
147
+ sn as COMMAND_SOURCE_LABELS,
148
148
  Q as Calendar,
149
149
  Y as CalendarDayButton,
150
150
  ee as Card,
@@ -162,44 +162,44 @@ export {
162
162
  ue as ChartTitle,
163
163
  Ce as Checkbox,
164
164
  ge as Chip,
165
- pp as ChoiceCard,
166
- dp as ChoiceCardContent,
167
- lp as ChoiceCardDescription,
168
- mp as ChoiceCardGroup,
169
- sp as ChoiceCardHeader,
170
- cp as ChoiceCardIndicator,
171
- up as ChoiceCardMedia,
172
- fp as ChoiceCardTitle,
173
- _i as ColumnIndicator,
165
+ hp as ChoiceCard,
166
+ Ip as ChoiceCardContent,
167
+ Ap as ChoiceCardDescription,
168
+ Mp as ChoiceCardGroup,
169
+ yp as ChoiceCardHeader,
170
+ wp as ChoiceCardIndicator,
171
+ vp as ChoiceCardMedia,
172
+ Fp as ChoiceCardTitle,
173
+ nn as ColumnIndicator,
174
174
  Te as Combobox,
175
- Mn as CommandPalette,
176
- yn as CommandPaletteEmpty,
177
- wn as CommandPaletteFooter,
178
- vn as CommandPaletteGroup,
179
- Fn as CommandPaletteInput,
180
- Ln as CommandPaletteItem,
181
- Bn as CommandPaletteList,
182
- Sn as CommandPaletteProvider,
183
- Hn as CommandPaletteSeparator,
184
- En as CommandPaletteShortcut,
185
- fi as DATA_TABLE_SCOPED_SHEET_HOST_MIN_HEIGHT_PX,
186
- mi as DataTable,
187
- Ci as DataTableColumnList,
188
- si as DataTableContent,
189
- gi as DataTableContext,
190
- Ii as DataTableFormatOptions,
191
- Oi as DataTableSavedViews,
192
- Mi as DataTableSheet,
193
- yi as DataTableSheetContent,
194
- wi as DataTableSheetHeader,
195
- bi as DataTableSheetPortalContext,
196
- vi as DataTableSheetTrigger,
197
- ci as DataTableToolbar,
198
- Hi as DataTableViewMenuContent,
199
- Ei as DataTableViewMenuDensity,
200
- ki as DataTableViewMenuSettingsItem,
201
- Ri as DataTableViewMenuTrigger,
202
- Vi as DataTableViewMenuViewportExpand,
175
+ Wn as CommandPalette,
176
+ _n as CommandPaletteEmpty,
177
+ Un as CommandPaletteFooter,
178
+ Kn as CommandPaletteGroup,
179
+ qn as CommandPaletteInput,
180
+ Xn as CommandPaletteItem,
181
+ Zn as CommandPaletteList,
182
+ Ln as CommandPaletteProvider,
183
+ jn as CommandPaletteSeparator,
184
+ Jn as CommandPaletteShortcut,
185
+ Fi as DATA_TABLE_SCOPED_SHEET_HOST_MIN_HEIGHT_PX,
186
+ Mi as DataTable,
187
+ Hi as DataTableColumnList,
188
+ yi as DataTableContent,
189
+ ki as DataTableContext,
190
+ zi as DataTableFormatOptions,
191
+ rn as DataTableSavedViews,
192
+ Wi as DataTableSheet,
193
+ _i as DataTableSheetContent,
194
+ Ui as DataTableSheetHeader,
195
+ Ri as DataTableSheetPortalContext,
196
+ Ki as DataTableSheetTrigger,
197
+ wi as DataTableToolbar,
198
+ ji as DataTableViewMenuContent,
199
+ Ji as DataTableViewMenuDensity,
200
+ Qi as DataTableViewMenuSettingsItem,
201
+ Yi as DataTableViewMenuTrigger,
202
+ $i as DataTableViewMenuViewportExpand,
203
203
  he as DatePicker,
204
204
  ve as DateRangePicker,
205
205
  Ge as Dialog,
@@ -274,12 +274,12 @@ export {
274
274
  co as HoverCard,
275
275
  uo as HoverCardContent,
276
276
  fo as HoverCardTrigger,
277
- gp as ImpactNovaI18nProvider,
278
- Ki as IndicatorLegend,
277
+ kp as ImpactNovaI18nProvider,
278
+ dn as IndicatorLegend,
279
279
  xo as Input,
280
- Rn as Kbd,
280
+ Yn as Kbd,
281
281
  Do as Loader,
282
- cn as LocalStorageAdapter,
282
+ wn as LocalStorageAdapter,
283
283
  Ae as MonthPicker,
284
284
  ye as MonthRangePicker,
285
285
  ke as MultiDatePicker,
@@ -301,7 +301,7 @@ export {
301
301
  yo as NotificationPanelContent,
302
302
  wo as NotificationPanelFooter,
303
303
  vo as NotificationPanelHeader,
304
- Gi as PinSwitch,
304
+ tn as PinSwitch,
305
305
  _o as Popover,
306
306
  Uo as PopoverAnchor,
307
307
  Ko as PopoverBody,
@@ -332,10 +332,10 @@ export {
332
332
  Bt as SheetPortal,
333
333
  Ht as SheetTitle,
334
334
  Et as SheetTrigger,
335
- Gn as ShortcutOverlay,
336
- Nn as ShortcutOverlayProvider,
337
- un as ShortcutRegistry,
338
- In as ShortcutScopeProvider,
335
+ tp as ShortcutOverlay,
336
+ ep as ShortcutOverlayProvider,
337
+ vn as ShortcutRegistry,
338
+ zn as ShortcutScopeProvider,
339
339
  Rt as Sidebar,
340
340
  Vt as SidebarContent,
341
341
  Nt as SidebarFooter,
@@ -377,7 +377,7 @@ export {
377
377
  ya as StatisticsCardTitleTooltip,
378
378
  va as Stepper,
379
379
  Ha as Switch,
380
- Si as TABLE_VIEWPORT_SHELL_EXPANDED_CLASS,
380
+ Li as TABLE_VIEWPORT_SHELL_EXPANDED_CLASS,
381
381
  ka as Tabs,
382
382
  Ra as TabsContent,
383
383
  Va as TabsImage,
@@ -394,88 +394,88 @@ export {
394
394
  ei as ToastTitle,
395
395
  ri as ToastViewport,
396
396
  ti as Toaster,
397
- ii as Tooltip,
398
- ni as TooltipContent,
399
- pi as TooltipProvider,
400
- di as TooltipTrigger,
397
+ Ti as Tooltip,
398
+ Pi as TooltipContent,
399
+ hi as TooltipProvider,
400
+ Ii as TooltipTrigger,
401
401
  Le as WeekPicker,
402
402
  He as WeekRangePicker,
403
- qn as WizardBody,
404
- Xn as WizardContent,
405
- Zn as WizardDescription,
406
- jn as WizardFooter,
407
- Jn as WizardHeader,
408
- Qn as WizardLayout,
409
- Yn as WizardMedia,
410
- $n as WizardProgress,
411
- ep as WizardRoot,
412
- rp as WizardSidebar,
413
- op as WizardStep,
414
- tp as WizardStepDescription,
415
- ap as WizardTitle,
403
+ dp as WizardBody,
404
+ lp as WizardContent,
405
+ mp as WizardDescription,
406
+ sp as WizardFooter,
407
+ cp as WizardHeader,
408
+ up as WizardLayout,
409
+ fp as WizardMedia,
410
+ Sp as WizardProgress,
411
+ xp as WizardRoot,
412
+ Cp as WizardSidebar,
413
+ Dp as WizardStep,
414
+ gp as WizardStepDescription,
415
+ bp as WizardTitle,
416
416
  M as alertVariants,
417
417
  L as avatarVariants,
418
418
  E as badgeVariants,
419
- Pp as buildSectionedFlatList,
419
+ Si as buildSectionedFlatList,
420
420
  ut as cx,
421
- Ip as de,
422
- Mp as defaultMessages,
423
- ji as deserialiseOverrides,
421
+ Np as de,
422
+ zp as defaultMessages,
423
+ cn as deserialiseOverrides,
424
424
  wr as dynamicLayoutVariants,
425
- wp as es,
426
- Ji as fuzzyFilter,
427
- Qi as fuzzyScore,
425
+ Wp as es,
426
+ un as fuzzyFilter,
427
+ fn as fuzzyScore,
428
428
  Se as getBaseChartOptions,
429
- Yi as getBrowserShortcutInfo,
430
- Fp as getDateFnsLocale,
429
+ Sn as getBrowserShortcutInfo,
430
+ Up as getDateFnsLocale,
431
431
  ft as getIndeterminateState,
432
- Lp as getIntlLocale,
433
- $i as getKeySymbol,
432
+ Kp as getIntlLocale,
433
+ xn as getKeySymbol,
434
434
  St as getLeafOptions,
435
435
  xt as getSelectedCount,
436
- Hp as getSelectionCountsFromState,
436
+ ii as getSelectionCountsFromState,
437
437
  Ct as getSequence,
438
- kp as hi,
438
+ Xp as hi,
439
439
  Dt as isInvertedSelection,
440
- en as isMac,
440
+ Cn as isMac,
441
441
  gt as isOptionArray,
442
- rn as isReservedShortcut,
442
+ Dn as isReservedShortcut,
443
443
  bt as isSelected,
444
- on as keybindingFromEvent,
445
- tn as keybindingToString,
446
- an as keybindingToSymbols,
447
- nn as keybindingsEqual,
448
- Vp as kn,
444
+ gn as keybindingFromEvent,
445
+ bn as keybindingToString,
446
+ Tn as keybindingToSymbols,
447
+ Pn as keybindingsEqual,
448
+ jp as kn,
449
449
  go as loaderVariants,
450
- pn as matchesKeybinding,
451
- dn as parseKeybinding,
450
+ hn as matchesKeybinding,
451
+ In as parseKeybinding,
452
452
  nt as promptVariants,
453
- ln as scopePriority,
454
- mn as serialiseOverrides,
453
+ An as scopePriority,
454
+ Mn as serialiseOverrides,
455
455
  Fa as stepVariants,
456
456
  La as stepperVariants,
457
457
  Wa as tagGroupVariants,
458
458
  Ka as tagVariants,
459
- _n as toast,
460
- Pn as useBrowserShortcuts,
461
- Sp as useChoiceCardGroup,
462
- xn as useCommandPalette,
463
- Op as useDataGridVirtualRows,
464
- Gp as useDataSource,
465
- Ti as useDataTable,
466
- Fi as useDataTableSheet,
467
- Li as useDataTableSheetApi,
468
- Pi as useDataTableSheetPortal,
469
- _p as useDebouncedValue,
470
- bn as useGlobalShortcut,
471
- bp as useImpactNovaI18n,
459
+ ip as toast,
460
+ Nn as useBrowserShortcuts,
461
+ Lp as useChoiceCardGroup,
462
+ Bn as useCommandPalette,
463
+ gi as useDataGridVirtualRows,
464
+ pi as useDataSource,
465
+ Vi as useDataTable,
466
+ qi as useDataTableSheet,
467
+ Xi as useDataTableSheetApi,
468
+ Ni as useDataTableSheetPortal,
469
+ Ci as useDebouncedValue,
470
+ Rn as useGlobalShortcut,
471
+ Rp as useImpactNovaI18n,
472
472
  Fo as useNotificationContext,
473
- Kp as useRowState,
474
- Dn as useShortcut,
475
- On as useShortcutOverlay,
473
+ li as useRowState,
474
+ En as useShortcut,
475
+ rp as useShortcutOverlay,
476
476
  pa as useSidebar,
477
- Un as useToast,
478
- Xp as useVirtualizedList,
479
- jp as useVirtualizedRows,
480
- ip as useWizard
477
+ np as useToast,
478
+ ui as useVirtualizedList,
479
+ si as useVirtualizedRows,
480
+ Tp as useWizard
481
481
  };
@@ -0,0 +1,18 @@
1
+ import { getSelectionCountsFromState as t } from "./selection-counts.js";
2
+ import { useDataSource as u } from "./useDataSource.js";
3
+ import { useRowState as i } from "./useRowState.js";
4
+ import { useVirtualizedRows as m } from "./useVirtualizedRows.js";
5
+ import { useVirtualizedList as p } from "./useVirtualizedList.js";
6
+ import { buildSectionedFlatList as l } from "./sectioned.js";
7
+ import { useDebouncedValue as S } from "./useDebouncedValue.js";
8
+ import { useDataGridVirtualRows as n } from "./useDataGrid.js";
9
+ export {
10
+ l as buildSectionedFlatList,
11
+ t as getSelectionCountsFromState,
12
+ n as useDataGridVirtualRows,
13
+ u as useDataSource,
14
+ S as useDebouncedValue,
15
+ i as useRowState,
16
+ p as useVirtualizedList,
17
+ m as useVirtualizedRows
18
+ };
@@ -1 +1 @@
1
- export default "# AG Grid & Data Table — Mandatory Rules\n\n**When working with DataTable, or any data table that uses AG Grid (including Impact Nova's grid components), the following rules are mandatory. Do not deviate.**\n\n---\n\n## 1. Use AG Grid documentation only\n\n- **Refer only to AG Grid's official documentation** for grid behavior, APIs, column definitions, filtering, sorting, and all grid features.\n- Do not rely on third-party tutorials or generic \"data grid\" patterns that contradict or bypass AG Grid's docs.\n- Official docs: [ag-grid.com/documentation](https://www.ag-grid.com/documentation/) (React: [AG Grid React](https://www.ag-grid.com/react-data-grid/)).\n\n---\n\n## 2. Follow AG Grid recommended patterns\n\n- **Always follow AG Grid's recommended patterns** for:\n - Column definitions (`ColDef`, `ColGroupDef`)\n - Cell renderers and editors\n - Filtering, sorting, and row selection\n - API ref access (`gridRef.current?.api`)\n - Theming and styling (AG Grid theme / CSS variables)\n- Do not invent custom patterns that bypass or replace AG Grid's intended usage.\n\n---\n\n## 3. Use the AG Grid API only\n\n- **Rely on the AG Grid API only** for all grid operations:\n - Getting/setting data, refreshing cells, updating columns\n - Export (CSV/Excel if using Enterprise)\n - Filter/sort state, row selection, pinned columns\n - Any behavior that AG Grid exposes via its API\n- Do not manipulate the DOM or internal structure of the grid directly. Do not use non-API workarounds unless AG Grid docs explicitly suggest them.\n\n---\n\n## 4. Collaboration with ag-mcp (when installed)\n\n- **If the user has installed the ag-mcp server** (AG Grid MCP), this MCP can collaborate with it:\n - Use **ag-mcp** for AG Grid–specific questions: API reference, column config, React integration, and official examples.\n - Use **impact-nova-mcp** for Impact Nova wrappers (`DataTable`, `DataTableContent`, `processBackendColumnDefs`, `BackendColDef`, cell renderers from `impact-nova/ag-grid-react/cell-renderers`).\n - When generating or editing grid code: prefer fetching AG Grid details from ag-mcp when available, and combine with Impact Nova's DataTable/column/cell-renderer patterns from this MCP.\n- If ag-mcp is not installed, still follow rules 1–3 using AG Grid's official documentation only.\n\n---\n\n**Summary:** For any code or design involving AG Grid or Impact Nova's DataTable (which uses AG Grid), use **only** AG Grid documentation, **only** AG Grid recommended patterns, and **only** the AG Grid API—with no deviation. When ag-mcp is available, use it to get accurate AG Grid API and docs; use this MCP for Impact Nova–specific integration.\n\n---\n\n## 5. Mandatory Data Table component usage\n\n**CRITICAL RULE:** If you see a table in a screenshot, or if the user asks for a table by default, you **MUST** consider using the custom component at `src/components/ui/data-table/data-table.tsx` (`Impact Nova DataTable`). **Do not build a raw AG Grid or HTML table.**\n\nA typical Default Data Table in Impact Nova features this exact structure:\n\n```tsx\nconst DataTableWithFilters = () => {\n const { tStory } = useStorybookStoryI18n();\n const [sheetOpen, setSheetOpen] = useState(false);\n const [activeTab, setActiveTab] = useState(\"columns\");\n const [showFilterStrip, setShowFilterStrip] = useState(false);\n\n return (\n <div className=\"h-[800px] w-full p-8 bg-slate-50 flex flex-col items-center justify-center\">\n <div className=\"w-full max-w-[1200px] h-[600px] bg-white rounded-lg overflow-hidden flex flex-col [box-shadow:0px_0px_4px_0px_rgba(0,0,0,0.12)]\">\n <DataTable className=\"h-full\">\n <DataTableToolbar className=\"border-b border-[#e6e8f0]\">\n <div className=\"flex items-center gap-2\">\n <h2 className=\"font-bold text-sm text-slate-800\">Sales Report</h2>\n </div>\n \n <div className=\"flex items-center gap-2\">\n <Button \n variant=\"secondary\" \n size=\"icon\" \n onClick={() => setShowFilterStrip(!showFilterStrip)}\n aria-label={showFilterStrip ? tStory('filterStrip.hideFilters') : tStory('filterStrip.showFilters')}\n >\n {showFilterStrip ? <FunnelHide size=\"xs\" /> : <FunnelShow size=\"xs\" />}\n </Button>\n\n <div className=\"h-4 w-[1px] bg-[#e6e8f0] mx-1\" />\n\n {/* Scoped Sheet for Settings - Renders inside this relative container */}\n <DataTableSheet open={sheetOpen} onOpenChange={setSheetOpen}>\n <DropdownMenu>\n <DataTableViewMenuTrigger />\n <DataTableViewMenuContent>\n <DataTableViewMenuSettingsItem />\n <DataTableViewMenuDensity />\n </DataTableViewMenuContent>\n </DropdownMenu>\n \n <DataTableSheetContent>\n <DataTableSheetHeader title=\"Table Settings\" />\n <Tabs value={activeTab} onValueChange={setActiveTab} variant=\"line\" hideInactiveLabel tooltipClassName=\"z-[110]\" className=\"flex-1 flex flex-col min-h-0 w-full px-4\">\n <TabsList>\n <TabsTrigger \n value=\"columns\" \n icon={<Column size={16} />}\n >\n Columns\n </TabsTrigger>\n <TabsTrigger \n value=\"format\" \n icon={<Font size={16} />}\n >\n Format\n </TabsTrigger>\n <TabsTrigger \n value=\"custom-filters\" \n icon={<Filter size={16} />}\n >\n Filters\n </TabsTrigger>\n </TabsList>\n \n <TabsContent value=\"columns\" className=\"flex-1 min-h-0 relative p-0 data-[state=inactive]:hidden mt-0\">\n <div className=\"flex-1 h-full p-2\">\n <DataTableColumnList />\n </div>\n </TabsContent>\n <TabsContent value=\"format\" className=\"flex-1 min-h-0 relative p-4 pt-1 data-[state=inactive]:hidden overflow-y-auto mt-0\">\n <DataTableFormatOptions />\n </TabsContent>\n <TabsContent value=\"custom-filters\" className=\"flex-1 min-h-0 relative p-4 pt-1 data-[state=inactive]:hidden overflow-y-auto mt-0\">\n <div className=\"flex flex-col gap-4 text-sm text-[#60697d]\">\n <p>Custom filter configuration would go here.</p>\n <Button variant=\"outline\" className=\"w-full justify-start\">\n + Add Condition\n </Button>\n </div>\n </TabsContent>\n </Tabs>\n </DataTableSheetContent>\n </DataTableSheet>\n </div>\n </DataTableToolbar>\n \n <DataTableContent\n rowData={rowData}\n columnDefs={columnDefs}\n // Standard AG Grid props work here\n pagination={true}\n paginationPageSize={20}\n />\n </DataTable>\n </div>\n <p className=\"mt-4 text-slate-400 text-sm\">\n Note: The settings panel opens *inside* the table container, respecting its boundaries.\n </p>\n </div>\n );\n};\n```\nNote: This component (`DataTable`) internally uses `ag-grid-react` as a customized version. Rely on it rather than naked AG Grid.\n\n---\n\n## 6. Built-in Clipboard Handlers for JSON Objects\n\n**All DataTable and AG Grid instances in Impact Nova automatically support copying and pasting JSON objects.**\n\nThe `AgGridWrapper` component includes built-in clipboard handlers that:\n- **When copying**: Automatically stringify object values to JSON format\n- **When pasting**: Automatically parse JSON strings back to objects\n\n### How it works\n\n```tsx\n// When you copy a cell with an object value like:\n{ \n wp: { value: 6479, _isDisabled: true, cellMetadata: {...} },\n iaf: { value: 6090, _isDisabled: true, cellMetadata: {...} }\n}\n\n// It's automatically converted and split into separate Excel columns:\n// Column 1 Column 2\n// WP: 6479 IAF: 6090\n\n// Technical metadata (_isDisabled, cellMetadata) is hidden for clarity\n// Only the meaningful \"value\" is shown - perfect for PMs and non-technical users\n// Tab-separated format automatically expands into multiple columns in Excel\n```\n\n**Example with simple properties:**\n```tsx\n// Copy this object:\n{ name: \"John\", age: 30, status: \"active\" }\n\n// Expands into 3 Excel columns:\n// Column 1 Column 2 Column 3\n// name: John age: 30 status: active\n```\n\n**When pasting:**\n```tsx\n// You can paste JSON strings and they'll be parsed back to objects:\n'{\"name\":\"Jane\",\"age\":25}' → { name: \"Jane\", age: 25 }\n```\n\n**Benefits:**\n- ✅ Simple and readable for non-technical users (PMs, stakeholders)\n- ✅ Extracts only meaningful values, hides technical metadata\n- ✅ Automatically expands object properties into separate Excel columns\n- ✅ Perfect for analysis - each property gets its own column\n- ✅ Works seamlessly for both single-cell and multi-cell copy operations\n- ✅ Still supports pasting JSON back for developers\n\n### Usage\n\n**No configuration needed!** This works automatically for all DataTable instances:\n\n```tsx\n<DataTable>\n <DataTableContent\n rowData={data}\n columnDefs={columns}\n // Clipboard handlers are already active ✅\n />\n</DataTable>\n```\n\n### Override if needed\n\nYou can override the default behavior by passing your own handlers:\n\n```tsx\n<DataTableContent\n rowData={data}\n columnDefs={columns}\n processCellForClipboard={(params) => {\n // Custom copy logic\n return customFormat(params.value);\n }}\n processCellFromClipboard={(params) => {\n // Custom paste logic\n return customParse(params.value);\n }}\n/>\n```\n\n**Key benefits:**\n- ✅ Works automatically for all tables\n- ✅ No code duplication needed\n- ✅ Handles complex object structures\n- ✅ Gracefully falls back to string if JSON parsing fails\n- ✅ Can be overridden when custom behavior is needed\n\n---\n";
1
+ export default "# AG Grid & Data Table — Mandatory Rules\n\n**When working with DataTable, or any data table that uses AG Grid (including Impact Nova's grid components), the following rules are mandatory. Do not deviate.**\n\n---\n\n## 1. Use AG Grid documentation only\n\n- **Refer only to AG Grid's official documentation** for grid behavior, APIs, column definitions, filtering, sorting, and all grid features.\n- Do not rely on third-party tutorials or generic \"data grid\" patterns that contradict or bypass AG Grid's docs.\n- Official docs: [ag-grid.com/documentation](https://www.ag-grid.com/documentation/) (React: [AG Grid React](https://www.ag-grid.com/react-data-grid/)).\n\n---\n\n## 2. Follow AG Grid recommended patterns\n\n- **Always follow AG Grid's recommended patterns** for:\n - Column definitions (`ColDef`, `ColGroupDef`)\n - Cell renderers and editors\n - Filtering, sorting, and row selection\n - API ref access (`gridRef.current?.api`)\n - Theming and styling (AG Grid theme / CSS variables)\n- Do not invent custom patterns that bypass or replace AG Grid's intended usage.\n\n---\n\n## 3. Use the AG Grid API only\n\n- **Rely on the AG Grid API only** for all grid operations:\n - Getting/setting data, refreshing cells, updating columns\n - Export (CSV/Excel if using Enterprise)\n - Filter/sort state, row selection, pinned columns\n - Any behavior that AG Grid exposes via its API\n- Do not manipulate the DOM or internal structure of the grid directly. Do not use non-API workarounds unless AG Grid docs explicitly suggest them.\n\n---\n\n## 4. Collaboration with ag-mcp (when installed)\n\n- **If the user has installed the ag-mcp server** (AG Grid MCP), this MCP can collaborate with it:\n - Use **ag-mcp** for AG Grid–specific questions: API reference, column config, React integration, and official examples.\n - Use **impact-nova-mcp** for Impact Nova wrappers (`DataTable`, `DataTableContent`, `processBackendColumnDefs`, `BackendColDef`, cell renderers from `impact-nova/ag-grid-react/cell-renderers`).\n - When generating or editing grid code: prefer fetching AG Grid details from ag-mcp when available, and combine with Impact Nova's DataTable/column/cell-renderer patterns from this MCP.\n- If ag-mcp is not installed, still follow rules 1–3 using AG Grid's official documentation only.\n\n---\n\n**Summary:** For any code or design involving AG Grid or Impact Nova's DataTable (which uses AG Grid), use **only** AG Grid documentation, **only** AG Grid recommended patterns, and **only** the AG Grid API—with no deviation. When ag-mcp is available, use it to get accurate AG Grid API and docs; use this MCP for Impact Nova–specific integration.\n\n---\n\n## 5. Mandatory Data Table component usage\n\n**CRITICAL RULE:** If you see a table in a screenshot, or if the user asks for a table by default, you **MUST** use **Impact Nova DataTable** from `impact-nova/data-table`. **Do not build a raw AG Grid or HTML table.**\n\n```tsx\nimport {\n DataTable,\n DataTableContent,\n DataTableToolbar,\n useDataTable,\n} from 'impact-nova/data-table';\n```\n\nA typical Default Data Table in Impact Nova features this exact structure:\n\n```tsx\nconst DataTableWithFilters = () => {\n const { tStory } = useStorybookStoryI18n();\n const [sheetOpen, setSheetOpen] = useState(false);\n const [activeTab, setActiveTab] = useState(\"columns\");\n const [showFilterStrip, setShowFilterStrip] = useState(false);\n\n return (\n <div className=\"h-[800px] w-full p-8 bg-slate-50 flex flex-col items-center justify-center\">\n <div className=\"w-full max-w-[1200px] h-[600px] bg-white rounded-lg overflow-hidden flex flex-col [box-shadow:0px_0px_4px_0px_rgba(0,0,0,0.12)]\">\n <DataTable className=\"h-full\">\n <DataTableToolbar className=\"border-b border-[#e6e8f0]\">\n <div className=\"flex items-center gap-2\">\n <h2 className=\"font-bold text-sm text-slate-800\">Sales Report</h2>\n </div>\n \n <div className=\"flex items-center gap-2\">\n <Button \n variant=\"secondary\" \n size=\"icon\" \n onClick={() => setShowFilterStrip(!showFilterStrip)}\n aria-label={showFilterStrip ? tStory('filterStrip.hideFilters') : tStory('filterStrip.showFilters')}\n >\n {showFilterStrip ? <FunnelHide size=\"xs\" /> : <FunnelShow size=\"xs\" />}\n </Button>\n\n <div className=\"h-4 w-[1px] bg-[#e6e8f0] mx-1\" />\n\n {/* Scoped Sheet for Settings - Renders inside this relative container */}\n <DataTableSheet open={sheetOpen} onOpenChange={setSheetOpen}>\n <DropdownMenu>\n <DataTableViewMenuTrigger />\n <DataTableViewMenuContent>\n <DataTableViewMenuSettingsItem />\n <DataTableViewMenuDensity />\n </DataTableViewMenuContent>\n </DropdownMenu>\n \n <DataTableSheetContent>\n <DataTableSheetHeader title=\"Table Settings\" />\n <Tabs value={activeTab} onValueChange={setActiveTab} variant=\"line\" hideInactiveLabel tooltipClassName=\"z-[110]\" className=\"flex-1 flex flex-col min-h-0 w-full px-4\">\n <TabsList>\n <TabsTrigger \n value=\"columns\" \n icon={<Column size={16} />}\n >\n Columns\n </TabsTrigger>\n <TabsTrigger \n value=\"format\" \n icon={<Font size={16} />}\n >\n Format\n </TabsTrigger>\n <TabsTrigger \n value=\"custom-filters\" \n icon={<Filter size={16} />}\n >\n Filters\n </TabsTrigger>\n </TabsList>\n \n <TabsContent value=\"columns\" className=\"flex-1 min-h-0 relative p-0 data-[state=inactive]:hidden mt-0\">\n <div className=\"flex-1 h-full p-2\">\n <DataTableColumnList />\n </div>\n </TabsContent>\n <TabsContent value=\"format\" className=\"flex-1 min-h-0 relative p-4 pt-1 data-[state=inactive]:hidden overflow-y-auto mt-0\">\n <DataTableFormatOptions />\n </TabsContent>\n <TabsContent value=\"custom-filters\" className=\"flex-1 min-h-0 relative p-4 pt-1 data-[state=inactive]:hidden overflow-y-auto mt-0\">\n <div className=\"flex flex-col gap-4 text-sm text-[#60697d]\">\n <p>Custom filter configuration would go here.</p>\n <Button variant=\"outline\" className=\"w-full justify-start\">\n + Add Condition\n </Button>\n </div>\n </TabsContent>\n </Tabs>\n </DataTableSheetContent>\n </DataTableSheet>\n </div>\n </DataTableToolbar>\n \n <DataTableContent\n rowData={rowData}\n columnDefs={columnDefs}\n // Standard AG Grid props work here\n pagination={true}\n paginationPageSize={20}\n />\n </DataTable>\n </div>\n <p className=\"mt-4 text-slate-400 text-sm\">\n Note: The settings panel opens *inside* the table container, respecting its boundaries.\n </p>\n </div>\n );\n};\n```\nNote: This component (`DataTable`) internally uses `ag-grid-react` as a customized version. Rely on it rather than naked AG Grid.\n\n---\n\n## 6. Built-in Clipboard Handlers for JSON Objects\n\n**All DataTable and AG Grid instances in Impact Nova automatically support copying and pasting JSON objects.**\n\nThe `AgGridWrapper` component includes built-in clipboard handlers that:\n- **When copying**: Automatically stringify object values to JSON format\n- **When pasting**: Automatically parse JSON strings back to objects\n\n### How it works\n\n```tsx\n// When you copy a cell with an object value like:\n{ \n wp: { value: 6479, _isDisabled: true, cellMetadata: {...} },\n iaf: { value: 6090, _isDisabled: true, cellMetadata: {...} }\n}\n\n// It's automatically converted and split into separate Excel columns:\n// Column 1 Column 2\n// WP: 6479 IAF: 6090\n\n// Technical metadata (_isDisabled, cellMetadata) is hidden for clarity\n// Only the meaningful \"value\" is shown - perfect for PMs and non-technical users\n// Tab-separated format automatically expands into multiple columns in Excel\n```\n\n**Example with simple properties:**\n```tsx\n// Copy this object:\n{ name: \"John\", age: 30, status: \"active\" }\n\n// Expands into 3 Excel columns:\n// Column 1 Column 2 Column 3\n// name: John age: 30 status: active\n```\n\n**When pasting:**\n```tsx\n// You can paste JSON strings and they'll be parsed back to objects:\n'{\"name\":\"Jane\",\"age\":25}' → { name: \"Jane\", age: 25 }\n```\n\n**Benefits:**\n- ✅ Simple and readable for non-technical users (PMs, stakeholders)\n- ✅ Extracts only meaningful values, hides technical metadata\n- ✅ Automatically expands object properties into separate Excel columns\n- ✅ Perfect for analysis - each property gets its own column\n- ✅ Works seamlessly for both single-cell and multi-cell copy operations\n- ✅ Still supports pasting JSON back for developers\n\n### Usage\n\n**No configuration needed!** This works automatically for all DataTable instances:\n\n```tsx\n<DataTable>\n <DataTableContent\n rowData={data}\n columnDefs={columns}\n // Clipboard handlers are already active ✅\n />\n</DataTable>\n```\n\n### Override if needed\n\nYou can override the default behavior by passing your own handlers:\n\n```tsx\n<DataTableContent\n rowData={data}\n columnDefs={columns}\n processCellForClipboard={(params) => {\n // Custom copy logic\n return customFormat(params.value);\n }}\n processCellFromClipboard={(params) => {\n // Custom paste logic\n return customParse(params.value);\n }}\n/>\n```\n\n**Key benefits:**\n- ✅ Works automatically for all tables\n- ✅ No code duplication needed\n- ✅ Handles complex object structures\n- ✅ Gracefully falls back to string if JSON parsing fails\n- ✅ Can be overridden when custom behavior is needed\n\n---\n\n## 6. Column autosize on container resize\n\n**AgGridWrapper** (from `impact-nova/ag-grid-react`) automatically re-runs `autoSizeStrategy` when the grid container width changes (accordion expand, viewport resize, responsive layout).\n\n- Pass `autoSizeStrategy` to DataTable/AgGridWrapper props (e.g. `{ type: 'fitCellContents', scaleUpToFitGridWidth: true }`).\n- **Do not** add app-level ResizeObserver hacks or deferred grid mount delays — the framework handles this.\n- When applying saved column views, wait for `firstDataRendered` or `newColumnsLoaded` grid events before applying column state — not `setTimeout(0)`.\n- Strip `width`/`flex` from saved column state when applying structural views so autosize can recalculate correctly.\n\n---\n";
@@ -1 +1 @@
1
- export default "# Impact Nova — Best Practices & Do's and Don'ts\n\n## Use Impact Nova components only\n\n**When building with Impact Nova, use the components that are present in this design system only.** The library includes a full set of UI components (forms, navigation, feedback, data display, layout, etc.). There is no need to create new custom components for standard UI—use what Impact Nova provides. Check `list_components` or the component catalog to see what's available; use `get_component` for the spec and usage of any component. Prefer composing existing Impact Nova components over building from scratch.\n\n## Do's\n\n1. **Use compound components** — Use subcomponents (e.g. `Dialog.Content`, `Card.Header`, `Select.Trigger`) for full control without prop drilling.\n2. **Use `cn()` and Tailwind token classes** — Merge classNames with the `cn()` helper; use design token classes (e.g. `bg-brand`, `text-content`, `border-stroke`) not raw hex or arbitrary values.\n3. **Use design tokens** — Prefer Tailwind theme tokens (colors, spacing, radius from the design system). No arbitrary values where a token exists.\n4. **Accessibility first** — Components are built on Radix UI; preserve aria-labels, keyboard support, and screen reader compatibility. Add `aria-label` for icon-only buttons.\n5. **i18n for user-facing strings** — Use `ImpactNovaI18nProvider` and `useImpactNovaI18n()` / `t()` for labels, placeholders, and button text. Override via props when needed.\n6. **File naming** — Use `kebab-case.tsx` for files (e.g. `file-upload.tsx`).\n7. **TypeScript** — Import and extend component props (e.g. `ButtonProps`) for type-safe wrappers.\n8. **Use `variant` and `size` props** — For appearance, use the component's built-in variant and size props (e.g. `Button variant=\"primary\" size=\"lg\"`). Add `className` only for layout (e.g. margin, gap) or intentional overrides.\n\n## Don'ts\n\n1. **No inline styles for token-backed values** — Don't use `style={{ color: '...' }}` or inline hex for colors that exist as tokens.\n2. **Don't bypass tokens** — Avoid hardcoded spacing or colors; use Tailwind token classes.\n3. **Don't skip i18n** — For any user-facing label, placeholder, or message, use the i18n context or pass overrides via props.\n4. **Don't add unnecessary classNames for styling** — Components are already styled to the design standard. Use `variant` and `size` for appearance. Use `className` only for layout (e.g. `mt-4`, `flex gap-2`) or intentional overrides, not for duplicating built-in styles (e.g. don't add `rounded-lg` if the component already applies it).\n5. **Don't use non-token colors** — Stick to the design token palette (primary, secondary, accent, destructive, muted, etc.).\n6. **Don't create new components when Impact Nova already provides one** — The design system has the components you need. Use `list_components` / `get_component` to find and use them instead of building custom equivalents.\n7. **Error and empty states** — Use **Alert** for form or API errors; use **EmptyContainer** when there is no data to show (with optional action like \"Select filter\" or \"Add item\").\n\n## Composition over inheritance\n\nFavor composition. Compose subcomponents rather than extending or wrapping with custom styling that overrides the design system.\n\n## Imports\n\n- **Barrel (many exports)**: `import { Button, Card, DataTable } from 'impact-nova';`\n- **Subpath (tree-shaking)**: Prefer when you need one component or a small set: `import { Button } from 'impact-nova/button';`, `import { Sheet, SheetContent } from 'impact-nova/sheet';`, `import { FilterPanel, FilterPanelSidebar } from 'impact-nova/filter-panel';`\n- **Icons**: `import { Pin, Chart } from 'impact-nova-icons';` — use `createIconResolver` from `impact-nova-icons/resolver` for dynamic lookup\n- **Types only**: `import type { Option } from 'impact-nova/select';`, `import type { BackendColDef } from 'impact-nova';`, `import type { FilterSidebarItem } from 'impact-nova/filter-panel';`, `import type { NestedListItem } from 'impact-nova/nested-list';`\n- **i18n**: `import { ImpactNovaI18nProvider, useImpactNovaI18n } from 'impact-nova';`\n- **Locale packs**: `import { de } from 'impact-nova/locale/de';`\n- **CSS (once at root)**: `import 'impact-nova/dist/impact-nova.css';`\n\nWhen using Vite with impact-nova, add `dedupe: ['react', 'react-dom', 'ag-grid-community', 'ag-grid-enterprise', 'ag-grid-react']` in resolve to avoid dual React/AG Grid instances.\n\n## AG Grid / Data tables (mandatory)\n\n**When working with DataTable, or any data table that uses AG Grid:**\n- **CRITICAL RULE:** If you see a table in a screenshot, or if the user asks for a table by default, you **MUST** consider using the custom component at `src/components/ui/data-table/data-table.tsx` (`Impact Nova DataTable`). **Do not build a raw AG Grid or HTML table.**\n- Use **only** AG Grid's official documentation.\n- Follow **only** AG Grid recommended patterns.\n- Rely **only** on the AG Grid API for grid behavior. No deviation.\n- If the user has **ag-mcp** installed, use it for AG Grid API and docs and combine with this MCP for Impact Nova DataTable/column/cell-renderer integration. See resource `impact-nova://ag-grid-rules` for full rules and the default table structure.\n";
1
+ export default "# Impact Nova — Best Practices & Do's and Don'ts\n\n## Use Impact Nova components only\n\n**When building with Impact Nova, use the components that are present in this design system only.** The library includes a full set of UI components (forms, navigation, feedback, data display, layout, etc.). There is no need to create new custom components for standard UI—use what Impact Nova provides. Check `list_components` or the component catalog to see what's available; use `get_component` for the spec and usage of any component. Prefer composing existing Impact Nova components over building from scratch.\n\n## Do's\n\n1. **Use compound components** — Use subcomponents (e.g. `Dialog.Content`, `Card.Header`, `Select.Trigger`) for full control without prop drilling.\n2. **Use `cn()` and Tailwind token classes** — Merge classNames with the `cn()` helper; use design token classes (e.g. `bg-brand`, `text-content`, `border-stroke`) not raw hex or arbitrary values.\n3. **Use design tokens** — Prefer Tailwind theme tokens (colors, spacing, radius from the design system). No arbitrary values where a token exists.\n4. **Accessibility first** — Components are built on Radix UI; preserve aria-labels, keyboard support, and screen reader compatibility. Add `aria-label` for icon-only buttons.\n5. **i18n for user-facing strings** — Use `ImpactNovaI18nProvider` and `useImpactNovaI18n()` / `t()` for labels, placeholders, and button text. Override via props when needed.\n6. **File naming** — Use `kebab-case.tsx` for files (e.g. `file-upload.tsx`).\n7. **TypeScript** — Import and extend component props (e.g. `ButtonProps`) for type-safe wrappers.\n8. **Use `variant` and `size` props** — For appearance, use the component's built-in variant and size props (e.g. `Button variant=\"primary\" size=\"lg\"`). Add `className` only for layout (e.g. margin, gap) or intentional overrides.\n\n## Don'ts\n\n1. **No inline styles for token-backed values** — Don't use `style={{ color: '...' }}` or inline hex for colors that exist as tokens.\n2. **Don't bypass tokens** — Avoid hardcoded spacing or colors; use Tailwind token classes.\n3. **Don't skip i18n** — For any user-facing label, placeholder, or message, use the i18n context or pass overrides via props.\n4. **Don't add unnecessary classNames for styling** — Components are already styled to the design standard. Use `variant` and `size` for appearance. Use `className` only for layout (e.g. `mt-4`, `flex gap-2`) or intentional overrides, not for duplicating built-in styles (e.g. don't add `rounded-lg` if the component already applies it).\n5. **Don't use non-token colors** — Stick to the design token palette (primary, secondary, accent, destructive, muted, etc.).\n6. **Don't create new components when Impact Nova already provides one** — The design system has the components you need. Use `list_components` / `get_component` to find and use them instead of building custom equivalents.\n7. **Error and empty states** — Use **Alert** for form or API errors; use **EmptyContainer** when there is no data to show (with optional action like \"Select filter\" or \"Add item\").\n\n## Composition over inheritance\n\nFavor composition. Compose subcomponents rather than extending or wrapping with custom styling that overrides the design system.\n\n## Imports\n\n**Prefer subpath imports** in production apps for tree-shaking (~98% smaller bundles vs full barrel). Use the barrel only for i18n bootstrapping or when importing many symbols from one area in a single file.\n\n- **Subpath (preferred)**: `import { Button } from 'impact-nova/button';`, `import { Card, CardContent } from 'impact-nova/card';`, `import { DataTable, DataTableContent, useDataTable } from 'impact-nova/data-table';`, `import { FilterPanel, FilterPanelSidebar } from 'impact-nova/filter-panel';`, `import { Combobox } from 'impact-nova/combobox';`\n- **Barrel (convenience)**: `import { ImpactNovaI18nProvider, useImpactNovaI18n, de } from 'impact-nova';` — OK for app root setup; avoid for feature modules\n- **Icons (required peer)**: `npm install impact-nova-icons@^0.1.1` then `import { Pin, Chart } from 'impact-nova-icons';` — use `createIconResolver` from `impact-nova-icons/resolver` for dynamic lookup. Icons are **not** exported from `impact-nova`\n- **Types only**: `import type { Option } from 'impact-nova/select';`, `import type { SavedTableViewItem } from 'impact-nova/data-table';`, `import type { RowSelectionState } from 'impact-nova/virtualized';`\n- **i18n provider**: `import { ImpactNovaI18nProvider, useImpactNovaI18n } from 'impact-nova';`\n- **Locale packs**: `import { de } from 'impact-nova/locale/de';` (also `es`, `hi`, `kn`)\n- **CSS (once at root)**: `import 'impact-nova/dist/impact-nova.css';` or split layers: `impact-nova/impact-nova-tokens.scss`, `impact-nova/impact-nova-base.scss`, `impact-nova/impact-nova-components.css`\n\n**Vite consumers:** add `resolve.dedupe: ['react', 'react-dom', 'ag-grid-community', 'ag-grid-enterprise', 'ag-grid-react']` to avoid dual React/AG Grid instances. Exclude `impact-nova-icons` from `optimizeDeps` to prevent SVG asset warnings. Pre-bundle Highcharts modules in `optimizeDeps.include` if using Chart.\n\n## AG Grid / Data tables (mandatory)\n\n**When working with DataTable, or any data table that uses AG Grid:**\n- **CRITICAL RULE:** If you see a table in a screenshot, or if the user asks for a table by default, you **MUST** use **Impact Nova DataTable** from `impact-nova/data-table`. **Do not build a raw AG Grid or HTML table.**\n- Use **only** AG Grid's official documentation.\n- Follow **only** AG Grid recommended patterns.\n- Rely **only** on the AG Grid API for grid behavior. No deviation.\n- If the user has **ag-mcp** installed, use it for AG Grid API and docs and combine with this MCP for Impact Nova DataTable/column/cell-renderer integration. See resource `impact-nova://ag-grid-rules` for full rules and the default table structure.\n";
@@ -1 +1 @@
1
- export default "# Install and configure Impact Nova\n\nUse these steps to add Impact Nova to an existing project. Run the commands in your project root and apply the code changes to your entry file and layout.\n\n## 1. Install the package and peer dependencies\n\n```bash\nnpm install impact-nova\nnpm install react@^19 react-dom@^19\n```\n\nIf you use AG Grid or Highcharts in your app, also install:\n\n```bash\nnpm install ag-grid-react@35.0.1 ag-grid-enterprise@35.0.1\n# Optional, for charts:\nnpm install highcharts@^12 highcharts-react-official@^3 highcharts-border-radius@^0.0.4\n```\n\n## 2. Import styles in your root entry\n\nIn your app root (e.g. `main.tsx`, `App.tsx`, or `layout.tsx`), **import the CSS before your app component**:\n\n```tsx\nimport 'impact-nova/dist/impact-nova.css';\nimport App from './App';\n// ... rest of your bootstrap\n```\n\n## 3. Add Manrope font (recommended)\n\nIn your `index.html` or layout:\n\n```html\n<link href=\"https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap\" rel=\"stylesheet\" />\n```\n\nIn your global CSS or Tailwind base:\n\n```css\n@layer base {\n body {\n font-family: 'Manrope', sans-serif;\n }\n}\n```\n\n## 4. Wrap your app with i18n (recommended)\n\nWrap your app with `ImpactNovaI18nProvider` so date pickers, selects, and other components use the correct locale and labels:\n\n```tsx\nimport { ImpactNovaI18nProvider } from 'impact-nova';\n\nfunction Root() {\n return (\n <ImpactNovaI18nProvider locale=\"en\">\n <App />\n </ImpactNovaI18nProvider>\n );\n}\n```\n\nFor another locale, use a locale pack:\n\n```tsx\nimport { ImpactNovaI18nProvider, de } from 'impact-nova';\n\n<ImpactNovaI18nProvider locale=\"de\" messages={de}>\n <App />\n</ImpactNovaI18nProvider>\n```\n\n## 5. Using Impact Nova with CSS or SCSS (no Tailwind)\n\nIf your app uses **plain CSS or SCSS** and does **not** use Tailwind, you can still use Impact Nova. Tailwind is optional. Impact Nova ships a single built CSS file (no SCSS source).\n\n- **Import the library CSS** in your app root (e.g. `main.tsx`, `App.tsx`):\n ```tsx\n import 'impact-nova/dist/impact-nova.css';\n ```\n Or from your main stylesheet: `@import 'impact-nova/dist/impact-nova.css';` in your main.css or main.scss.\n- **Component styling** comes from Impact Nova's CSS. Use each component's `variant` and `size` props; no Tailwind classes are required.\n- **Your layout and spacing** stay in your CSS or SCSS (margins, padding, flexbox, grid). Use your usual class names; the design system does not require Tailwind utilities.\n- **Manrope font:** Add the font link in `index.html` and in your CSS/SCSS set `body { font-family: 'Manrope', sans-serif; }` (see section 3).\n- **Summary:** No Tailwind, no Tailwind config. Load `impact-nova.css` once; use components with their props; use your existing CSS/SCSS for the rest.\n\n## 6. Using Impact Nova with Webpack\n\nIf your app is built with **Webpack** (including Create React App, which uses Webpack):\n\n- **CSS import:** Webpack will bundle the library CSS as long as you have a rule for `.css`. Ensure your config includes something like:\n ```js\n module: {\n rules: [\n {\n test: /\\.css$/,\n use: ['style-loader', 'css-loader'],\n // or with MiniCssExtractPlugin:\n // use: [MiniCssExtractPlugin.loader, 'css-loader'],\n },\n // ... other rules (e.g. for .tsx, .js)\n ],\n },\n ```\n Then in your root component or entry:\n ```tsx\n import 'impact-nova/dist/impact-nova.css';\n ```\n- **Create React App (CRA):** No extra config. Add `import 'impact-nova/dist/impact-nova.css';` in `index.tsx` or `App.tsx`.\n- **Dedupe React / AG Grid:** If you see “multiple copies of React” or AG Grid issues, use Webpack’s `resolve.alias` so the app uses a single version:\n ```js\n resolve: {\n alias: {\n react: path.resolve(__dirname, 'node_modules/react'),\n 'react-dom': path.resolve(__dirname, 'node_modules/react-dom'),\n // If using AG Grid:\n 'ag-grid-react': path.resolve(__dirname, 'node_modules/ag-grid-react'),\n 'ag-grid-community': path.resolve(__dirname, 'node_modules/ag-grid-community'),\n 'ag-grid-enterprise': path.resolve(__dirname, 'node_modules/ag-grid-enterprise'),\n },\n },\n ```\n- **Tailwind + Webpack:** If you use Tailwind, add the Impact Nova preset and include the package in `content` (see section 7 below).\n\n## 7. Optional: extend Tailwind with Impact Nova preset\n\nIf your project uses Tailwind and you want the same theme (colors, radius), extend your `tailwind.config.js` with the preset from the package:\n\n```js\n// tailwind.config.js\nimport impactNovaPreset from 'impact-nova/tailwind.config.js';\n\nexport default {\n presets: [impactNovaPreset],\n content: [\n './index.html',\n './src/**/*.{js,ts,jsx,tsx}',\n './node_modules/impact-nova/dist/**/*.js',\n ],\n // ... rest of your config\n};\n```\n\n## Summary checklist\n\n- [ ] `npm install impact-nova` (and react, react-dom; optional: ag-grid, highcharts)\n- [ ] `import 'impact-nova/dist/impact-nova.css'` in root entry (or @import in main.css/main.scss if using CSS or SCSS without Tailwind; see §5)\n- [ ] Add Manrope font link and body font-family\n- [ ] Wrap app with `<ImpactNovaI18nProvider locale=\"en\">`\n- [ ] (Optional) Add Tailwind preset and content path for impact-nova\n- [ ] **Webpack:** Ensure a CSS rule (style-loader + css-loader) and, if needed, resolve.alias for React/AG Grid\n\nAfter this, you can import components: `import { Button, Card } from 'impact-nova';`\n";
1
+ export default "# Install and configure Impact Nova\n\nUse these steps to add Impact Nova to an existing project. Run the commands in your project root and apply the code changes to your entry file and layout.\n\n## 1. Install the package and peer dependencies\n\n```bash\nnpm install impact-nova impact-nova-icons\nnpm install react@^19 react-dom@^19\n```\n\n**Required peers:** `react@^19`, `react-dom@^19`, `impact-nova-icons@^0.1.1`\n\n**Optional peers** (install when you use these features):\n\n| Package | Version | When needed |\n|---------|---------|-------------|\n| `ag-grid-react` | `35.0.1` | DataTable / AG Grid |\n| `ag-grid-enterprise` | `35.0.1` | Enterprise grid features |\n| `highcharts` | `^12` | Chart component |\n| `highcharts-react-official` | `^3` | Chart component |\n| `highcharts-border-radius` | `^0.0.4` | Rounded chart corners |\n| `@tanstack/react-table` | `^8.20` | Optional table utilities |\n\nIf you use AG Grid or Highcharts in your app, also install:\n\n```bash\nnpm install ag-grid-react@35.0.1 ag-grid-enterprise@35.0.1\n# Optional, for charts:\nnpm install highcharts@^12 highcharts-react-official@^3 highcharts-border-radius@^0.0.4\n```\n\n## 2. Import styles in your root entry\n\nIn your app root (e.g. `main.tsx`, `App.tsx`, or `layout.tsx`), **import the CSS before your app component**:\n\n```tsx\nimport 'impact-nova/dist/impact-nova.css';\nimport App from './App';\n// ... rest of your bootstrap\n```\n\n## 3. Add Manrope font (recommended)\n\nIn your `index.html` or layout:\n\n```html\n<link href=\"https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap\" rel=\"stylesheet\" />\n```\n\nIn your global CSS or Tailwind base:\n\n```css\n@layer base {\n body {\n font-family: 'Manrope', sans-serif;\n }\n}\n```\n\n## 4. Wrap your app with i18n (recommended)\n\nWrap your app with `ImpactNovaI18nProvider` so date pickers, selects, and other components use the correct locale and labels:\n\n```tsx\nimport { ImpactNovaI18nProvider } from 'impact-nova';\n\nfunction Root() {\n return (\n <ImpactNovaI18nProvider locale=\"en\">\n <App />\n </ImpactNovaI18nProvider>\n );\n}\n```\n\nFor another locale, use a locale pack:\n\n```tsx\nimport { ImpactNovaI18nProvider } from 'impact-nova';\nimport { de } from 'impact-nova/locale/de';\n\n<ImpactNovaI18nProvider locale=\"de\" messages={de}>\n <App />\n</ImpactNovaI18nProvider>\n```\n\n## 5. Subpath imports (recommended)\n\nPrefer subpath imports in feature code for tree-shaking:\n\n```tsx\nimport { Button } from 'impact-nova/button';\nimport { Card, CardContent } from 'impact-nova/card';\nimport { DataTable, DataTableContent, useDataTable } from 'impact-nova/data-table';\nimport { CheckCircle } from 'impact-nova-icons';\n```\n\nThe barrel `import { Button } from 'impact-nova'` still works but pulls a larger module graph. Use subpaths in production apps.\n\n## 6. Using Impact Nova with CSS or SCSS (no Tailwind)\n\nIf your app uses **plain CSS or SCSS** and does **not** use Tailwind, you can still use Impact Nova. Tailwind is optional. Impact Nova ships a single built CSS file (no SCSS source).\n\n- **Import the library CSS** in your app root (e.g. `main.tsx`, `App.tsx`):\n ```tsx\n import 'impact-nova/dist/impact-nova.css';\n ```\n **CSS split exports** (optional, for layered theming): `impact-nova/impact-nova-tokens.scss`, `impact-nova/impact-nova-base.scss`, `impact-nova/impact-nova-components.css`\n Or from your main stylesheet: `@import 'impact-nova/dist/impact-nova.css';` in your main.css or main.scss.\n- **Component styling** comes from Impact Nova's CSS. Use each component's `variant` and `size` props; no Tailwind classes are required.\n- **Your layout and spacing** stay in your CSS or SCSS (margins, padding, flexbox, grid). Use your usual class names; the design system does not require Tailwind utilities.\n- **Manrope font:** Add the font link in `index.html` and in your CSS/SCSS set `body { font-family: 'Manrope', sans-serif; }` (see section 3).\n- **Summary:** No Tailwind, no Tailwind config. Load `impact-nova.css` once; use components with their props; use your existing CSS/SCSS for the rest.\n\n## 7. Using Impact Nova with Webpack\n\nIf your app is built with **Webpack** (including Create React App, which uses Webpack):\n\n- **CSS import:** Webpack will bundle the library CSS as long as you have a rule for `.css`. Ensure your config includes something like:\n ```js\n module: {\n rules: [\n {\n test: /\\.css$/,\n use: ['style-loader', 'css-loader'],\n // or with MiniCssExtractPlugin:\n // use: [MiniCssExtractPlugin.loader, 'css-loader'],\n },\n // ... other rules (e.g. for .tsx, .js)\n ],\n },\n ```\n Then in your root component or entry:\n ```tsx\n import 'impact-nova/dist/impact-nova.css';\n ```\n- **Create React App (CRA):** No extra config. Add `import 'impact-nova/dist/impact-nova.css';` in `index.tsx` or `App.tsx`.\n- **Dedupe React / AG Grid:** If you see “multiple copies of React” or AG Grid issues, use Webpack’s `resolve.alias` so the app uses a single version:\n ```js\n resolve: {\n alias: {\n react: path.resolve(__dirname, 'node_modules/react'),\n 'react-dom': path.resolve(__dirname, 'node_modules/react-dom'),\n // If using AG Grid:\n 'ag-grid-react': path.resolve(__dirname, 'node_modules/ag-grid-react'),\n 'ag-grid-community': path.resolve(__dirname, 'node_modules/ag-grid-community'),\n 'ag-grid-enterprise': path.resolve(__dirname, 'node_modules/ag-grid-enterprise'),\n },\n },\n ```\n- **Tailwind + Webpack:** If you use Tailwind, add the Impact Nova preset and include the package in `content` (see section 7 below).\n\n## 8. Optional: extend Tailwind with Impact Nova preset\n\nIf your project uses Tailwind and you want the same theme (colors, radius), extend your `tailwind.config.js` with the preset from the package:\n\n```js\n// tailwind.config.js\nimport impactNovaPreset from 'impact-nova/tailwind.config.js';\n\nexport default {\n presets: [impactNovaPreset],\n content: [\n './index.html',\n './src/**/*.{js,ts,jsx,tsx}',\n './node_modules/impact-nova/dist/**/*.js',\n ],\n // ... rest of your config\n};\n```\n\n## Summary checklist\n\n- [ ] `npm install impact-nova impact-nova-icons` (and react, react-dom; optional: ag-grid, highcharts)\n- [ ] `import 'impact-nova/dist/impact-nova.css'` in root entry (or @import in main.css/main.scss if using CSS or SCSS without Tailwind; see §6)\n- [ ] Add Manrope font link and body font-family\n- [ ] Wrap app with `<ImpactNovaI18nProvider locale=\"en\">`\n- [ ] Use subpath imports in feature code (see §5)\n- [ ] (Optional) Add Tailwind preset and content path for impact-nova\n- [ ] **Webpack:** Ensure a CSS rule (style-loader + css-loader) and, if needed, resolve.alias for React/AG Grid\n\nAfter this, import components via subpaths: `import { Button } from 'impact-nova/button';`\n";
@@ -1 +1 @@
1
- export default "# Migration: Impact UI → Impact Nova\n\nGuide for migrating from **Impact UI** (or similar legacy UI) to **Impact Nova**. Use with other Impact Nova MCP tools: `get_component`, `get_installation_and_config`, `get_real_world_patterns`, `validate_usage`.\n\n---\n\n## 1. Prerequisites & MCP usage\n\n**Impact UI MCP:** Impact UI has `impact-ui-mcp-server`. Keep it enabled during migration.\n\n- **impact-ui-mcp-server** — Source API: Impact UI component names, props, import paths. Use to map usages and prop renames (e.g. `severity` → `variant`).\n- **Impact Nova MCP** — Target API: Nova imports, compound components, patterns; validate with `validate_usage`.\n\nWorkflow: per screen/component, use Impact UI MCP for current usage → Impact Nova MCP for replacement (`get_component`) and validation. After migration, disable `impact-ui-mcp-server`.\n\n**Impact Nova MCP tools:** `list_components` | `get_component` | `get_installation_and_config` | `get_real_world_patterns` | `validate_usage` | `suggest_components_for_ui`.\n\nBefore migrating: find all usages of the old UI library; choose big-bang or incremental strategy.\n\n---\n\n## 2. Phase 1 — Install and configure Impact Nova\n\n**Dependencies:**\n```bash\nnpm install impact-nova\nnpm install react@^19 react-dom@^19\n```\nWith AG Grid: `ag-grid-react@35.0.1 ag-grid-enterprise@35.0.1`. Optional charts: `highcharts@^12 highcharts-react-official@^3`. Then `npm uninstall impact-ui` when ready.\n\n**Styles:** In app root: `import 'impact-nova/dist/impact-nova.css';`\n\n**Font (Manrope):** Link in HTML; set `body { font-family: 'Manrope', sans-serif; }` in global CSS.\n\n**i18n:** Wrap app with `<ImpactNovaI18nProvider locale=\"en\">` (from `impact-nova`). Use locale packs (e.g. `de`) for other locales.\n\n**Tailwind (optional):** Preset `impact-nova/tailwind.config.js`; add `node_modules/impact-nova/dist/**/*.js` to `content`.\n\n**Vite:** Add `resolve.dedupe: ['react','react-dom','ag-grid-community','ag-grid-enterprise','ag-grid-react']`.\n\nUse MCP **`get_installation_and_config`** for project-specific steps.\n\n---\n\n## 3. Phase 2 — Component mapping (Impact UI → Impact Nova)\n\nUse **`get_component`** for exact API of each Nova component.\n\n| Legacy (Impact UI / common) | Impact Nova | Import |\n|-----------------------------|-------------|--------|\n| Button | Button | `impact-nova` / `impact-nova/button` |\n| Modal / Dialog | Dialog, AlertDialog, Prompt | `impact-nova`, `impact-nova/prompt` |\n| Slide-out / Drawer | Sheet | `impact-nova/sheet` |\n| Select / Dropdown | Select | `impact-nova/select` |\n| Input, TextField | Input, SmartInput | `impact-nova/input`, `impact-nova/smart-input` |\n| Textarea | Textarea | `impact-nova/textarea` |\n| Checkbox | Checkbox | `impact-nova/checkbox` |\n| Radio group | RadioGroup, RadioGroupItem | `impact-nova/radio-group` |\n| Switch / Toggle | Switch | `impact-nova/switch` |\n| Date picker / range | DatePicker, DateRangePicker, WeekRangePicker, MonthRangePicker | `impact-nova/date-picker` |\n| Tabs | Tabs, TabsList, TabsTrigger, TabsContent | `impact-nova/tabs` |\n| Alert / Banner | Alert, AlertTitle, AlertDescription, AlertIcon | `impact-nova/alert` |\n| Toast / Snackbar | toast, Toaster, useToast | `impact-nova` |\n| Badge / Tag | Badge, Tag, Chips | `impact-nova/badge`, `impact-nova`, `impact-nova/chips` |\n| Loader / Spinner | Loader, LoadingSpinner (icons) | `impact-nova/loader`, `impact-nova-icons` |\n| Accordion | Accordion, AccordionItem, AccordionTrigger, AccordionContent | `impact-nova/accordion` |\n| Sidebar / Nav | Sidebar | `impact-nova/sidebar` |\n| Header / AppBar | Header + subcomponents | `impact-nova/header` |\n| Breadcrumb | Breadcrumb, BreadcrumbList, etc. | `impact-nova/breadcrumb` |\n| Avatar | Avatar, AvatarFallback | `impact-nova/avatar` |\n| Tooltip | Tooltip, TooltipTrigger, TooltipContent | `impact-nova/tooltip` |\n| File upload | FileUpload (composition) | `impact-nova/file-upload` |\n| Data grid / Table | DataTable, AG Grid | `impact-nova`, `impact-nova/ag-grid-react/cell-renderers` |\n| Filter panel / strip | FilterPanel, FilterStrip | `impact-nova/filter-panel`, `impact-nova` |\n| Empty state | EmptyContainer + subcomponents | `impact-nova/empty-container` |\n| Confirmation dialog | Prompt, AlertDialog | `impact-nova/prompt`, `impact-nova` |\n| Nested list / Tree | NestedList | `impact-nova/nested-list` |\n| Chart | Chart | `impact-nova/chart` |\n| Horizontal scroll list | HorizontalScroller | `impact-nova/horizontal-scroller` |\n\nIcons: `impact-nova-icons` (e.g. Pin, Chart, LoadingSpinner) + `createIconResolver` for string lookup.\n\n---\n\n## 4. Phase 3 — Import and API changes\n\n**Imports:** Barrel `import { Button, Card } from 'impact-nova';` | Subpath `import { Button } from 'impact-nova/button';` | Types `import type { Option, MultiValue } from 'impact-nova/select';`, `import type { BackendColDef } from 'impact-nova';`, `import type { FilterItem, SavedFilterItem } from 'impact-nova/filter-strip';`, `import type { NestedListItem } from 'impact-nova/nested-list';`.\n\n**API:** Severity/type → `variant` (e.g. `variant=\"destructive\"`). Alert: use AlertTitle, AlertDescription, AlertIcon. Toast: `toast()`, Toaster, useToast. Dialog: compound components; confirmations → Prompt or AlertDialog. Select options: type `Option` from `impact-nova/select`. Prefer compound components (e.g. SheetContent, SheetHeader, SheetTitle, SheetBody, SheetFooter). Use **`validate_usage`** on snippets.\n\n---\n\n## 5. Phase 4 — Compound patterns\n\nUse **`get_real_world_patterns`** for more detail.\n\n- **Filter UI:** FilterPanel + FilterPanelSidebar, FilterPanelBody, FilterPanelFooter; FilterStrip; types FilterItem, SavedFilterItem, FilterSidebarItem.\n- **Data table + AG Grid:** DataTable, DataTableContent, processBackendColumnDefs, BackendColDef; AG_GRID_CELL_COMPONENTS, LinkCellRenderer from `impact-nova/ag-grid-react/cell-renderers`.\n- **Sheet:** Sheet, SheetContent, SheetHeader, SheetTitle, SheetBody, SheetFooter from `impact-nova/sheet`; pair with react-hook-form.\n- **Empty state:** EmptyContainer, EmptyContainerImage, EmptyContainerTitle, EmptyContainerDescription, EmptyContainerAction.\n- **Toast + Alert:** Toaster + toast()/useToast; Alert + AlertTitle, AlertDescription, AlertIcon from `impact-nova/alert`.\n- **Tabs + NestedList + Accordion:** Tabs components; NestedList + NestedListItem; Accordion components.\n\n---\n\n## 6. Phase 5 — Verification\n\n**Setup:** Impact Nova MCP enabled; keep impact-ui-mcp-server during migration. Nova + peers installed; CSS + Manrope + ImpactNovaI18nProvider; optional Tailwind + Vite dedupe.\n\n**Migration:** All legacy imports → Nova (barrel/subpath); Alert/Toast/Dialog use Nova variants and compounds; Option/MultiValue from `impact-nova/select`; types via `import type`; use tokens and variant/size.\n\n**MCP:** Use `validate_usage`, `get_component`, `suggest_components_for_ui`.\n\n**Build/tests:** `npm run build`, lint, manual test of forms, filters, tables, toasts, dialogs.\n";
1
+ export default "# Migration: Impact UI → Impact Nova\n\nGuide for migrating from **Impact UI** (or similar legacy UI) to **Impact Nova**. Use with other Impact Nova MCP tools: `get_component`, `get_installation_and_config`, `get_real_world_patterns`, `validate_usage`.\n\n---\n\n## 1. Prerequisites & MCP usage\n\n**Impact UI MCP (optional):** If migrating from Impact UI, `impact-ui-mcp-server` can help map legacy component names during transition. Disable it after migration completes.\n\n- **impact-ui-mcp-server** (optional) — Source API: Impact UI component names, props, import paths.\n- **Impact Nova MCP** — Target API: Nova imports, compound components, patterns; validate with `validate_usage`.\n\n**Impact Nova MCP tools:** `list_components` | `get_component` | `get_installation_and_config` | `get_real_world_patterns` | `validate_usage` | `suggest_components_for_ui`.\n\nBefore migrating: find all usages of the old UI library; choose big-bang or incremental strategy.\n\n---\n\n## 2. Phase 1 — Install and configure Impact Nova\n\n**Dependencies:**\n```bash\nnpm install impact-nova impact-nova-icons\nnpm install react@^19 react-dom@^19\n```\nWith AG Grid: `ag-grid-react@35.0.1 ag-grid-enterprise@35.0.1`. Optional charts: `highcharts@^12 highcharts-react-official@^3`. Then `npm uninstall impact-ui` when ready.\n\n**Styles:** In app root: `import 'impact-nova/dist/impact-nova.css';`\n\n**Font (Manrope):** Link in HTML; set `body { font-family: 'Manrope', sans-serif; }` in global CSS.\n\n**i18n:** Wrap app with `<ImpactNovaI18nProvider locale=\"en\">` (from `impact-nova`). Use locale packs (e.g. `de`) for other locales.\n\n**Tailwind (optional):** Preset `impact-nova/tailwind.config.js`; add `node_modules/impact-nova/dist/**/*.js` to `content`.\n\n**Vite:** Add `resolve.dedupe: ['react','react-dom','ag-grid-community','ag-grid-enterprise','ag-grid-react']`.\n\nUse MCP **`get_installation_and_config`** for project-specific steps.\n\n---\n\n## 3. Phase 2 — Component mapping (Impact UI → Impact Nova)\n\nUse **`get_component`** for exact API of each Nova component.\n\n| Legacy (Impact UI / common) | Impact Nova | Import |\n|-----------------------------|-------------|--------|\n| Button | Button | `impact-nova` / `impact-nova/button` |\n| Modal / Dialog | Dialog, AlertDialog, Prompt | `impact-nova`, `impact-nova/prompt` |\n| Slide-out / Drawer | Sheet | `impact-nova/sheet` |\n| Select / Dropdown | Select | `impact-nova/select` |\n| Input, TextField | Input, SmartInput | `impact-nova/input`, `impact-nova/smart-input` |\n| Textarea | Textarea | `impact-nova/textarea` |\n| Checkbox | Checkbox | `impact-nova/checkbox` |\n| Radio group | RadioGroup, RadioGroupItem | `impact-nova/radio-group` |\n| Switch / Toggle | Switch | `impact-nova/switch` |\n| Date picker / range | DatePicker, DateRangePicker, WeekRangePicker, MonthRangePicker | `impact-nova/date-picker` |\n| Tabs | Tabs, TabsList, TabsTrigger, TabsContent | `impact-nova/tabs` |\n| Alert / Banner | Alert, AlertTitle, AlertDescription, AlertIcon | `impact-nova/alert` |\n| Toast / Snackbar | toast, Toaster, useToast | `impact-nova` |\n| Badge / Tag | Badge, Tag, Chips | `impact-nova/badge`, `impact-nova`, `impact-nova/chips` |\n| Loader / Spinner | Loader, LoadingSpinner (icons) | `impact-nova/loader`, `impact-nova-icons` |\n| Accordion | Accordion, AccordionItem, AccordionTrigger, AccordionContent | `impact-nova/accordion` |\n| Sidebar / Nav | Sidebar | `impact-nova/sidebar` |\n| Header / AppBar | Header + subcomponents | `impact-nova/header` |\n| Breadcrumb | Breadcrumb, BreadcrumbList, etc. | `impact-nova/breadcrumb` |\n| Avatar | Avatar, AvatarFallback | `impact-nova/avatar` |\n| Tooltip | Tooltip, TooltipTrigger, TooltipContent | `impact-nova/tooltip` |\n| File upload | FileUpload (composition) | `impact-nova/file-upload` |\n| Data grid / Table | DataTable, AG Grid | `impact-nova`, `impact-nova/ag-grid-react/cell-renderers` |\n| Filter panel / strip | FilterPanel, FilterStrip | `impact-nova/filter-panel`, `impact-nova` |\n| Empty state | EmptyContainer + subcomponents | `impact-nova/empty-container` |\n| Confirmation dialog | Prompt, AlertDialog | `impact-nova/prompt`, `impact-nova` |\n| Nested list / Tree | NestedList | `impact-nova/nested-list` |\n| Chart | Chart | `impact-nova/chart` |\n| Horizontal scroll list | HorizontalScroller | `impact-nova/horizontal-scroller` |\n\nIcons: `impact-nova-icons` (e.g. Pin, Chart, LoadingSpinner) + `createIconResolver` for string lookup.\n\n---\n\n## 4. Phase 3 — Import and API changes\n\n**Imports:** **Prefer subpath imports** in all feature code. Run a codemod or migrate manually:\n\n```tsx\n// Before (barrel)\nimport { Button, Select, DataTable } from 'impact-nova';\n\n// After (subpath preferred)\nimport { Button } from 'impact-nova/button';\nimport { Select } from 'impact-nova/select';\nimport { DataTable, useDataTable } from 'impact-nova/data-table';\nimport { CheckCircle } from 'impact-nova-icons';\n```\n\nBarrel OK for i18n: `import { ImpactNovaI18nProvider, de } from 'impact-nova';`\n\nTypes: `import type { Option } from 'impact-nova/select';`, `import type { SavedTableViewItem } from 'impact-nova/data-table';`, `import type { RowSelectionState } from 'impact-nova/virtualized';`\n\n**API:** Severity/type → `variant` (e.g. `variant=\"destructive\"`). Alert: use AlertTitle, AlertDescription, AlertIcon. Toast: `toast()`, Toaster, useToast. Dialog: compound components; confirmations → Prompt or AlertDialog. Select options: type `Option` from `impact-nova/select`. Prefer compound components (e.g. SheetContent, SheetHeader, SheetTitle, SheetBody, SheetFooter). Use **`validate_usage`** on snippets.\n\n---\n\n## 5. Phase 4 — Compound patterns\n\nUse **`get_real_world_patterns`** for more detail.\n\n- **Filter UI:** FilterPanel + FilterPanelSidebar, FilterPanelBody, FilterPanelFooter; FilterStrip; types FilterItem, SavedFilterItem, FilterSidebarItem.\n- **Data table + AG Grid:** DataTable, DataTableContent, processBackendColumnDefs, BackendColDef; AG_GRID_CELL_COMPONENTS, LinkCellRenderer from `impact-nova/ag-grid-react/cell-renderers`.\n- **Sheet:** Sheet, SheetContent, SheetHeader, SheetTitle, SheetBody, SheetFooter from `impact-nova/sheet`; pair with react-hook-form.\n- **Empty state:** EmptyContainer, EmptyContainerImage, EmptyContainerTitle, EmptyContainerDescription, EmptyContainerAction.\n- **Toast + Alert:** Toaster + toast()/useToast; Alert + AlertTitle, AlertDescription, AlertIcon from `impact-nova/alert`.\n- **Tabs + NestedList + Accordion:** Tabs components; NestedList + NestedListItem; Accordion components.\n\n---\n\n## 6. Phase 5 — Verification\n\n**Setup:** Impact Nova MCP enabled; keep impact-ui-mcp-server during migration. Nova + peers installed; CSS + Manrope + ImpactNovaI18nProvider; optional Tailwind + Vite dedupe.\n\n**Migration:** All legacy imports → Nova (barrel/subpath); Alert/Toast/Dialog use Nova variants and compounds; Option/MultiValue from `impact-nova/select`; types via `import type`; use tokens and variant/size.\n\n**MCP:** Use `validate_usage`, `get_component`, `suggest_components_for_ui`.\n\n**Build/tests:** `npm run build`, lint, manual test of forms, filters, tables, toasts, dialogs.\n";