adminator-admin-dashboard 2.9.0 → 4.1.5

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 (179) hide show
  1. package/CHANGELOG.md +422 -0
  2. package/CLAUDE.md +126 -154
  3. package/README.md +322 -376
  4. package/dist/2026.js +8751 -0
  5. package/dist/2026.js.map +1 -0
  6. package/dist/404.html +36 -16
  7. package/dist/500.html +36 -16
  8. package/dist/assets/static/images/logo.svg +3 -3
  9. package/dist/basic-table.html +152 -699
  10. package/dist/blank.html +42 -507
  11. package/dist/buttons.html +152 -448
  12. package/dist/calendar.html +246 -658
  13. package/dist/charts.html +124 -658
  14. package/dist/chat.html +209 -706
  15. package/dist/compose.html +141 -618
  16. package/dist/datatable.html +467 -991
  17. package/dist/email.html +430 -943
  18. package/dist/forms.html +208 -733
  19. package/dist/google-maps.html +123 -513
  20. package/dist/index.html +436 -1041
  21. package/dist/runtime.js +1299 -0
  22. package/dist/runtime.js.map +1 -0
  23. package/dist/signin.html +92 -92
  24. package/dist/signup.html +106 -91
  25. package/dist/ui.html +268 -897
  26. package/dist/vector-maps.html +132 -511
  27. package/dist/vendor-chartjs.js +14593 -0
  28. package/dist/vendor-chartjs.js.map +1 -0
  29. package/dist/vendor-fullcalendar.js +14793 -0
  30. package/dist/vendor-fullcalendar.js.map +1 -0
  31. package/dist/vendors.js +3758 -0
  32. package/dist/vendors.js.map +1 -0
  33. package/package.json +47 -50
  34. package/src/404.html +35 -15
  35. package/src/500.html +35 -15
  36. package/src/assets/scripts/2026/Shell.js +312 -0
  37. package/src/assets/scripts/2026/calendar.js +123 -0
  38. package/src/assets/scripts/2026/charts.js +259 -0
  39. package/src/assets/scripts/2026/index.js +35 -0
  40. package/src/assets/scripts/2026/init.js +207 -0
  41. package/src/assets/scripts/2026/maps.js +78 -0
  42. package/src/assets/scripts/2026/palette.js +266 -0
  43. package/src/assets/static/images/logo.svg +3 -3
  44. package/src/assets/styles/2026/_animations.scss +14 -0
  45. package/src/assets/styles/2026/_auth.scss +215 -0
  46. package/src/assets/styles/2026/_base.scss +37 -0
  47. package/src/assets/styles/2026/_calendar.scss +380 -0
  48. package/src/assets/styles/2026/_charts.scss +44 -0
  49. package/src/assets/styles/2026/_chat.scss +350 -0
  50. package/src/assets/styles/2026/_components.scss +140 -0
  51. package/src/assets/styles/2026/_dashboard.scss +520 -0
  52. package/src/assets/styles/2026/_data.scss +130 -0
  53. package/src/assets/styles/2026/_dropdowns.scss +128 -0
  54. package/src/assets/styles/2026/_email.scss +599 -0
  55. package/src/assets/styles/2026/_error.scss +98 -0
  56. package/src/assets/styles/2026/_forms.scss +215 -0
  57. package/src/assets/styles/2026/_fullcalendar.scss +134 -0
  58. package/src/assets/styles/2026/_palette.scss +173 -0
  59. package/src/assets/styles/2026/_responsive.scss +229 -0
  60. package/src/assets/styles/2026/_shell.scss +290 -0
  61. package/src/assets/styles/2026/_tokens.scss +80 -0
  62. package/src/assets/styles/2026/_ui.scss +365 -0
  63. package/src/assets/styles/2026/index.scss +23 -0
  64. package/src/basic-table.html +153 -710
  65. package/src/blank.html +42 -517
  66. package/src/buttons.html +152 -458
  67. package/src/calendar.html +246 -668
  68. package/src/charts.html +124 -668
  69. package/src/chat.html +209 -716
  70. package/src/compose.html +142 -629
  71. package/src/datatable.html +466 -1000
  72. package/src/email.html +429 -952
  73. package/src/forms.html +207 -742
  74. package/src/google-maps.html +128 -523
  75. package/src/index.html +438 -1050
  76. package/src/signin.html +92 -92
  77. package/src/signup.html +106 -91
  78. package/src/ui.html +267 -906
  79. package/src/vector-maps.html +133 -522
  80. package/dist/1e59d2330b4c6deb84b3.ttf +0 -0
  81. package/dist/20fd1704ea223900efa9.woff2 +0 -0
  82. package/dist/29b39089170885ae2967.woff +0 -0
  83. package/dist/8b43027f47b20503057d.eot +0 -0
  84. package/dist/9bad94440d49256265a5.eot +0 -0
  85. package/dist/assets/fontawesome-webfont.svg +0 -2671
  86. package/dist/assets/themify.svg +0 -362
  87. package/dist/eda8b94308c6f538f04a.ttf +0 -0
  88. package/dist/f691f37e57f04c152e23.woff +0 -0
  89. package/dist/main.js +0 -61331
  90. package/dist/main.js.map +0 -1
  91. package/src/assets/scripts/app 2.js +0 -645
  92. package/src/assets/scripts/app.js +0 -645
  93. package/src/assets/scripts/charts/chartJS/index.js +0 -148
  94. package/src/assets/scripts/charts/easyPieChart/index.js +0 -200
  95. package/src/assets/scripts/charts/index.js +0 -3
  96. package/src/assets/scripts/charts/sparkline/index.js +0 -208
  97. package/src/assets/scripts/chat/index.js +0 -11
  98. package/src/assets/scripts/components/Chart.js +0 -1390
  99. package/src/assets/scripts/components/Sidebar.js +0 -241
  100. package/src/assets/scripts/constants/colors.js +0 -274
  101. package/src/assets/scripts/datatable/index.js +0 -379
  102. package/src/assets/scripts/datepicker/index.js +0 -302
  103. package/src/assets/scripts/email/index.js +0 -25
  104. package/src/assets/scripts/fullcalendar/index.js +0 -86
  105. package/src/assets/scripts/googleMaps/index.js +0 -93
  106. package/src/assets/scripts/index.js +0 -18
  107. package/src/assets/scripts/masonry/index.js +0 -14
  108. package/src/assets/scripts/popover/index.js +0 -109
  109. package/src/assets/scripts/scrollbar/index.js +0 -10
  110. package/src/assets/scripts/search/index.js +0 -15
  111. package/src/assets/scripts/sidebar/index.js +0 -140
  112. package/src/assets/scripts/skycons/index.js +0 -52
  113. package/src/assets/scripts/ui/index.js +0 -412
  114. package/src/assets/scripts/utils/date.js +0 -242
  115. package/src/assets/scripts/utils/dom.js +0 -349
  116. package/src/assets/scripts/utils/index.js +0 -45
  117. package/src/assets/scripts/utils/theme.js +0 -107
  118. package/src/assets/scripts/vectorMaps/index.js +0 -277
  119. package/src/assets/styles/index.scss +0 -801
  120. package/src/assets/styles/spec/components/easyPieChart.scss +0 -11
  121. package/src/assets/styles/spec/components/footer.scss +0 -4
  122. package/src/assets/styles/spec/components/forms.scss +0 -288
  123. package/src/assets/styles/spec/components/index.scss +0 -9
  124. package/src/assets/styles/spec/components/loader.scss +0 -46
  125. package/src/assets/styles/spec/components/masonry.scss +0 -1
  126. package/src/assets/styles/spec/components/pageContainer.scss +0 -255
  127. package/src/assets/styles/spec/components/progressBar.scss +0 -6
  128. package/src/assets/styles/spec/components/sidebar.scss +0 -642
  129. package/src/assets/styles/spec/components/topbar.scss +0 -455
  130. package/src/assets/styles/spec/generic/base.scss +0 -102
  131. package/src/assets/styles/spec/generic/index.scss +0 -1
  132. package/src/assets/styles/spec/index.scss +0 -4
  133. package/src/assets/styles/spec/screens/chat.scss +0 -147
  134. package/src/assets/styles/spec/screens/email.scss +0 -108
  135. package/src/assets/styles/spec/screens/index.scss +0 -2
  136. package/src/assets/styles/spec/settings/baseColors.scss +0 -103
  137. package/src/assets/styles/spec/settings/borders.scss +0 -6
  138. package/src/assets/styles/spec/settings/breakpoints.scss +0 -26
  139. package/src/assets/styles/spec/settings/fonts.scss +0 -4
  140. package/src/assets/styles/spec/settings/index.scss +0 -4
  141. package/src/assets/styles/spec/settings/materialColors.scss +0 -550
  142. package/src/assets/styles/spec/tools/index.scss +0 -1
  143. package/src/assets/styles/spec/tools/mixins/clearfix.scss +0 -15
  144. package/src/assets/styles/spec/tools/mixins/index.scss +0 -3
  145. package/src/assets/styles/spec/tools/mixins/mediaQueriesRanges.scss +0 -58
  146. package/src/assets/styles/spec/tools/mixins/placeholder.scss +0 -10
  147. package/src/assets/styles/spec/utils/colors.scss +0 -33
  148. package/src/assets/styles/spec/utils/index.scss +0 -2
  149. package/src/assets/styles/spec/utils/layout/helpers/border.scss +0 -78
  150. package/src/assets/styles/spec/utils/layout/helpers/flex.scss +0 -220
  151. package/src/assets/styles/spec/utils/layout/helpers/index.scss +0 -11
  152. package/src/assets/styles/spec/utils/layout/helpers/layout.scss +0 -137
  153. package/src/assets/styles/spec/utils/layout/helpers/lists.scss +0 -23
  154. package/src/assets/styles/spec/utils/layout/helpers/margin.scss +0 -266
  155. package/src/assets/styles/spec/utils/layout/helpers/objects.scss +0 -91
  156. package/src/assets/styles/spec/utils/layout/helpers/padding.scss +0 -147
  157. package/src/assets/styles/spec/utils/layout/helpers/positions.scss +0 -118
  158. package/src/assets/styles/spec/utils/layout/helpers/pseudo.scss +0 -6
  159. package/src/assets/styles/spec/utils/layout/helpers/sizes.scss +0 -157
  160. package/src/assets/styles/spec/utils/layout/helpers/typography.scss +0 -127
  161. package/src/assets/styles/spec/utils/layout/index.scss +0 -3
  162. package/src/assets/styles/spec/utils/layout/mixins/generateResponsive.scss +0 -25
  163. package/src/assets/styles/spec/utils/layout/mixins/index.scss +0 -2
  164. package/src/assets/styles/spec/utils/layout/mixins/mediaQueryCondition.scss +0 -28
  165. package/src/assets/styles/spec/utils/layout/utils/center.scss +0 -54
  166. package/src/assets/styles/spec/utils/layout/utils/gap.scss +0 -229
  167. package/src/assets/styles/spec/utils/layout/utils/index.scss +0 -5
  168. package/src/assets/styles/spec/utils/layout/utils/layers.scss +0 -5
  169. package/src/assets/styles/spec/utils/layout/utils/peers.scss +0 -35
  170. package/src/assets/styles/utils/mobile.scss +0 -954
  171. package/src/assets/styles/utils/theme.css +0 -97
  172. package/src/assets/styles/vendor/datepicker.scss +0 -183
  173. package/src/assets/styles/vendor/font-awesome.css +0 -2337
  174. package/src/assets/styles/vendor/fullcalendar.scss +0 -217
  175. package/src/assets/styles/vendor/index.scss +0 -8
  176. package/src/assets/styles/vendor/jquery.datatables.scss +0 -162
  177. package/src/assets/styles/vendor/perfectScrollbar.scss +0 -4
  178. package/src/assets/styles/vendor/sparkline.scss +0 -6
  179. package/src/assets/styles/vendor/themify-icons.css +0 -1081
package/CLAUDE.md CHANGED
@@ -2,161 +2,133 @@
2
2
 
3
3
  This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
4
4
 
5
- ## Development Commands
6
-
7
- ### Core Development
8
- - `npm start` - Start development server with hot reload (available at http://localhost:4000)
9
- - `npm run dev` - Start development server with webpack dashboard
10
- - `npm run build` - Build for production (optimized)
11
- - `npm run release:minified` - Build production with minification
12
- - `npm run release:unminified` - Build production without minification
13
- - `npm run preview` - Preview production build locally
14
-
15
- ### Code Quality
16
- - `npm run lint` - Run all linters (JavaScript + SCSS)
17
- - `npm run lint:js` - Lint JavaScript files using ESLint 9.x flat config
18
- - `npm run lint:scss` - Lint SCSS files using Stylelint
19
-
20
- ### Utility Commands
21
- - `npm run clean` - Clean the dist directory
22
-
23
- ## Project Architecture
24
-
25
- ### Technology Stack
26
- - **Build System**: Webpack 5.101.3 with modern configuration
27
- - **JavaScript**: ES6+ with Babel transpilation, ESLint 9.x flat config
28
- - **CSS**: Sass/SCSS with PostCSS processing, Bootstrap 5.3.8
29
- - **Frontend Framework**: **100% jQuery-free** vanilla JavaScript with modern class-based architecture
30
- - **Theme System**: CSS variables-based dark/light mode system
31
-
32
- ### Core Application Structure
33
- The application follows a modular class-based architecture:
34
-
35
- **Main Application Class** (`src/assets/scripts/app.js`):
36
- - `AdminatorApp` - Main application controller with component management
37
- - Handles initialization, mobile optimizations, and global event coordination
38
- - Component registry system for managing feature modules
39
-
40
- **Core Components**:
41
- - `Sidebar` (`src/assets/scripts/components/Sidebar.js`) - Navigation sidebar logic
42
- - `ChartComponent` (`src/assets/scripts/components/Chart.js`) - Chart rendering and theme integration
43
- - `Theme` (`src/assets/scripts/utils/theme.js`) - Theme management with localStorage persistence
44
-
45
- **Utility Modules**:
46
- - `DOM` (`src/assets/scripts/utils/dom.js`) - DOM manipulation helpers
47
- - `DateUtils` (`src/assets/scripts/utils/date.js`) - Date handling with Day.js integration
48
-
49
- ### Dark Mode System
50
- The project features a comprehensive dark mode implementation:
51
-
52
- **Theme Toggle Integration**:
53
- - Automatically injects theme toggle into navigation if missing
54
- - Detects OS preference on first visit
55
- - Persists theme choice in localStorage
56
- - Real-time theme switching without page reload
57
-
58
- **Component Theme Awareness**:
59
- - Chart.js integration with dynamic color schemes
60
- - FullCalendar dark mode support
61
- - Vector maps with theme-specific palettes
62
- - All UI components use CSS variables for theming
63
-
64
- **CSS Variables Architecture**:
65
- - Semantic color variables (e.g., `--c-bkg-body`, `--c-text-base`)
66
- - Component-specific theme variables
67
- - Automatic contrast and accessibility considerations
68
-
69
- ### Mobile Optimization
70
- The application includes extensive mobile enhancements:
71
-
72
- **Responsive Features**:
73
- - Full-width search overlay for mobile
74
- - Enhanced dropdown behavior with overlay management
75
- - Touch-friendly interactions
76
- - Viewport-based responsive breakpoints
77
-
78
- **Mobile-Specific Behavior**:
79
- - Prevents horizontal scrolling on mobile
80
- - Auto-focus management for form inputs
81
- - Gesture-based navigation support
82
-
83
- ### File Organization
84
- ```
5
+ ## Architecture (2026 redesign)
6
+
7
+ This is the **Adminator 2026** template — a vanilla-JS admin dashboard with a token-driven CSS-variable design system. There is **one** entry bundle, **one** stylesheet root, **one** shell renderer.
8
+
9
+ - No jQuery. No Bootstrap. No legacy admin.js / Sidebar component.
10
+ - Theme (light/dark) is a `data-theme` attribute on `<html>`, set by an early-paint script in each page and toggled at runtime via `init.js`.
11
+ - Sidebar, topbar, and footer are rendered by `Shell.js` from a single `NAV` manifest. Pages provide three placeholder divs (`data-shell-sidebar`, `data-shell-topbar`, `data-shell-footer`) plus `<body data-active="..." data-crumbs="...">`.
12
+ - Heavy widgets: real **Chart.js** (`charts.js`), real **FullCalendar** (`calendar.js`), real **jsvectormap** (`maps.js`). All three read CSS variables at render and re-render on theme toggle via a `MutationObserver` on `data-theme`.
13
+
14
+ ## File layout
15
+
16
+ ```text
85
17
  src/
18
+ ├── *.html # 18 pages — each ~500 lines, mostly content
86
19
  ├── assets/
87
- │ ├── scripts/ # JavaScript modules
88
- │ │ ├── components/ # Reusable UI components
89
- │ │ ├── utils/ # Utility functions
90
- │ │ ├── charts/ # Chart initialization modules
91
- │ │ ├── fullcalendar/ # Calendar integration
92
- │ │ └── app.js # Main application entry point
93
- │ ├── styles/ # SCSS stylesheets
94
- │ │ ├── spec/ # Custom component styles
95
- │ │ └── vendor/ # Third-party plugin styles
96
- │ └── static/ # Static assets (fonts, images)
97
- ├── *.html # HTML template pages
20
+ │ ├── scripts/2026/ # The only JS
21
+ │ │ ├── index.js # entry — imports SCSS, mounts shell, runs init
22
+ │ │ ├── Shell.js # NAV manifest + sidebar/topbar/footer renderers
23
+ │ │ ├── init.js # theme toggle, dropdowns, nav-groups, todos, accordions, tabs
24
+ │ │ ├── charts.js # Chart.js seeds + tokens()
25
+ │ │ ├── calendar.js # FullCalendar seed events + toolbar binding
26
+ │ │ └── maps.js # jsvectormap world map
27
+ │ ├── styles/2026/ # The only SCSS
28
+ │ │ ├── index.scss # entry — imports all partials below
29
+ │ │ ├── _tokens.scss # CSS variables, light + dark
30
+ │ │ ├── _base.scss # reset, body, .eyebrow, .mono
31
+ │ │ ├── _animations.scss # rise-in / bar-in / fade-in / draw / spin
32
+ │ │ ├── _shell.scss # .shell, sidebar, topbar, footer chrome
33
+ │ │ ├── _dropdowns.scss # .dd-* (notifications, messages, profile)
34
+ │ │ ├── _components.scss # .hero, .btn, .card, .grid, .table, .tag
35
+ │ │ ├── _forms.scss # inputs, select, textarea, check, radio, switch
36
+ │ │ ├── _ui.scss # alerts, badges, progress, spinner, tabs, accordion, modal
37
+ │ │ ├── _auth.scss # signin/signup split-screen shell
38
+ │ │ ├── _error.scss # 404 / 500 cards
39
+ │ │ ├── _chat.scss # 2-pane chat layout
40
+ │ │ ├── _data.scss # data-table, pager
41
+ │ │ ├── _charts.scss # chart-canvas-wrap, legend
42
+ │ │ ├── _dashboard.scss # KPIs, sv-* (site visits), todo, weather
43
+ │ │ ├── _email.scss # 3-pane email layout
44
+ │ │ ├── _calendar.scss # mini-cal, rail, upcoming list
45
+ │ │ ├── _fullcalendar.scss # FullCalendar token overrides
46
+ │ │ └── _responsive.scss # all media queries in one place
47
+ │ └── static/ # fonts, images, icons (copy-pluginned to dist/)
48
+ ```
49
+
50
+ The 2026 webpack entry produces: `runtime.js`, `2026.js`, plus auto-split `vendor-fullcalendar.js` / `vendor-chartjs.js` / `vendors.js`. Every page links the same chunks via HtmlWebpackPlugin.
51
+
52
+ ## Page anatomy
53
+
54
+ Every shell page is structured the same way:
55
+
56
+ ```html
57
+ <!DOCTYPE html>
58
+ <html lang="en">
59
+ <head>
60
+ <meta charset="utf-8">
61
+ <meta name="viewport" content="width=device-width, initial-scale=1">
62
+ <title>...</title>
63
+ <script>
64
+ // Early-paint theme bootstrap — sets data-theme before CSS arrives,
65
+ // so dark-mode users don't see a light flash.
66
+ (function () {
67
+ try {
68
+ var saved = localStorage.getItem('dash26-theme');
69
+ var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
70
+ document.documentElement.setAttribute('data-theme', saved || (prefersDark ? 'dark' : 'light'));
71
+ } catch (e) { document.documentElement.setAttribute('data-theme', 'light'); }
72
+ })();
73
+ </script>
74
+ </head>
75
+ <body data-active="dashboard" data-crumbs="Workspace | Dashboard">
76
+ <div class="shell">
77
+ <div data-shell-sidebar></div>
78
+ <div class="main">
79
+ <div data-shell-topbar></div>
80
+ <main class="content">
81
+ <!-- Page-specific content here -->
82
+ </main>
83
+ <div data-shell-footer></div>
84
+ </div>
85
+ </div>
86
+ </body>
87
+ </html>
88
+ ```
89
+
90
+ `data-active` matches a `key` in `Shell.js`'s `NAV` manifest (e.g. `dashboard`, `email`, `calendar`, `charts`). `data-crumbs` is a `|`-separated list — last segment is highlighted as the current page.
91
+
92
+ Standalone pages (signin, signup, 404, 500) skip the `.shell` wrapper and use their own layout (`.auth-shell`, `.error-shell`).
93
+
94
+ ## Adding a new page
95
+
96
+ 1. Create `src/foo.html` with the body anatomy above.
97
+ 2. Add `'foo': 'Adminator · Foo'` to the `titles` map in `webpack/plugins/htmlPlugin.js`.
98
+ 3. Add a sidebar entry to `NAV` in `src/assets/scripts/2026/Shell.js`. Set `key: 'foo'`, `href: 'foo.html'`, and an inline SVG path for the icon.
99
+ 4. Restart the dev server (the webpack config picks up new templates only on restart).
100
+
101
+ ## Adding a new chart
102
+
103
+ Add a seed function to `SEEDS` in `src/assets/scripts/2026/charts.js`, keyed by a slug:
104
+
105
+ ```js
106
+ 'my-chart': (t) => ({ type: 'line', data: { ... }, options: { ... } }),
98
107
  ```
99
108
 
100
- ### Build Configuration
101
- **Webpack Setup**:
102
- - Modern flat ESLint configuration
103
- - Sass compilation with PostCSS processing
104
- - Source map generation for development
105
- - Production optimization with minification
106
- - Hot module replacement for development
107
-
108
- **Development Server**:
109
- - Webpack dev server on port 4000
110
- - Live reload and hot module replacement
111
- - Proxy configuration for API endpoints
112
-
113
- ## Working with This Codebase
114
-
115
- ### Adding New Components
116
- 1. Create component class in `src/assets/scripts/components/`
117
- 2. Register component in `AdminatorApp.init()` method
118
- 3. Add component-specific styles in `src/assets/styles/spec/components/`
119
- 4. Ensure theme compatibility using CSS variables
120
-
121
- ### Modifying Themes
122
- - Theme logic is centralized in `src/assets/scripts/utils/theme.js`
123
- - CSS variables are defined in `src/assets/styles/utils/theme.css`
124
- - Chart.js theme integration is automatic via `Chart.defaults` configuration
125
-
126
- ### Testing Changes
127
- - Always run `npm run lint` before committing
128
- - Test both light and dark themes
129
- - Verify mobile responsiveness at various breakpoints
130
- - Check component integration via browser developer tools
131
-
132
- ### Development Workflow
133
- 1. Run `npm start` for development server
134
- 2. Use `npm run dev` for enhanced debugging with webpack dashboard
135
- 3. Lint code with `npm run lint` before commits
136
- 4. Build production assets with `npm run build`
137
- 5. Preview production build with `npm run preview`
138
-
139
- ### Key Dependencies
140
- - **Bootstrap 5.3.8**: UI framework and CSS components (JS components replaced with vanilla alternatives)
141
- - **Chart.js 4.5.0**: Interactive charts with theme support (replaces jQuery Sparkline)
142
- - **FullCalendar 6.1.17**: Calendar component with dark mode
143
- - **Day.js 1.11.18**: Lightweight date manipulation
144
- - **Perfect Scrollbar 1.5.6**: Custom scrollbar implementation
145
- - **Masonry Layout 4.2.2**: Grid layouts (vanilla JS compatible)
146
-
147
- ### Removed jQuery Dependencies
148
- **Successfully removed all jQuery dependencies (~600KB bundle reduction):**
149
- - ❌ `jquery` (3.7.1) - Replaced with vanilla JS DOM manipulation
150
- - ❌ `jquery-sparkline` (2.4.0) - Replaced with Chart.js mini charts
151
- - ❌ `bootstrap-datepicker` (1.10.0) - Replaced with HTML5 date inputs + vanilla JS
152
- - ❌ `datatables` (1.10.18) - Replaced with vanilla JS table component
153
- - ❌ `easy-pie-chart` (2.1.7) - Replaced with vanilla JS SVG pie charts
154
- - ❌ `jvectormap` (2.0.4) - Replaced with jsvectormap 1.7.0 vanilla JS SVG world map
155
-
156
- ### Modern Vanilla JS Implementations
157
- - **Sparkline Charts**: Chart.js-based mini charts with theme support
158
- - **Pie Charts**: Custom SVG-based circular progress indicators
159
- - **Data Tables**: Full-featured table with sorting, pagination, and search
160
- - **Date Pickers**: Enhanced HTML5 date inputs with custom styling
161
- - **Vector Maps**: SVG-based world map with markers and interactions
162
- - **Bootstrap 5 Components**: Vanilla JS implementations of modals, dropdowns, popovers, tooltips, and accordions
109
+ Then in any page: `<canvas data-chart-key="my-chart"></canvas>`. The `t` argument is a tokens object with the active theme's `primary`, `success`, `danger`, etc. — use `t.primary`, ``` `${t.primary}24` ``` for transparency, etc., never hex literals.
110
+
111
+ ## Adding a new theme variable
112
+
113
+ 1. Add it to both `:root[data-theme="light"]` and `:root[data-theme="dark"]` in `_tokens.scss`.
114
+ 2. Use it via `var(--your-token)` anywhere.
115
+ 3. If charts/maps need it, add it to `tokens()` in `charts.js` / `maps.js` so they pick it up at render.
116
+
117
+ ## Commands
118
+
119
+ - `npm start` — dev server at <http://localhost:4000> (HMR enabled).
120
+ - `npm run build` — production build to `dist/`.
121
+ - `npm run release:minified` — production build with minification.
122
+ - `npm run lint` — ESLint + Stylelint, must be 0/0.
123
+ - `npm run build:analyze` — bundle analyzer report.
124
+ - `npm run clean` — wipe `dist/`.
125
+
126
+ There are currently no tests — Phase 5 cleanup deleted the legacy ones along with the legacy utils they tested. New tests for `init.js`, `Shell.js`, etc. would go in `tests/` if/when added.
127
+
128
+ ## Conventions
129
+
130
+ - **CSS variables, never hex.** All colors live in `_tokens.scss`.
131
+ - **`is-active` / `is-open` / `is-done`** for state classes (BEM-ish modifiers).
132
+ - **`data-` attributes drive JS**, never `id`s except for `themeToggle` and `heroDate`.
133
+ - **Inline `<svg>` icons** (24×24 viewBox, `stroke-width: 1.75–2`, `fill: none`). Avoid icon-font dependencies.
134
+ - **`'Inter'` for body, `'Inter Tight'` for display, `'JetBrains Mono'` for numerics/eyebrows.** Loaded once via the `index.scss` `@import url(...)` at the top.