snice 7.2.0 → 7.3.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 (200) hide show
  1. package/.agents/skills/snice/SKILL.md +40 -13
  2. package/README.md +6 -5
  3. package/adapters/react/SniceProvider.js +1 -1
  4. package/adapters/react/SniceRouter.d.ts +2 -0
  5. package/adapters/react/SniceRouter.js +3 -2
  6. package/adapters/react/SniceRouter.js.map +1 -1
  7. package/adapters/react/matchRoute.d.ts +4 -1
  8. package/adapters/react/matchRoute.js +13 -3
  9. package/adapters/react/matchRoute.js.map +1 -1
  10. package/adapters/react/useRequestHandler.js +1 -1
  11. package/bin/analyzer-contracts.js +2 -1
  12. package/bin/project-analyzer.js +302 -14
  13. package/bin/templates/AI_GUIDANCE.md +6 -1
  14. package/bin/templates/default/README.md +1 -1
  15. package/bin/templates/default/src/components/app-header.ts +11 -16
  16. package/bin/templates/default/src/components/notification-badge.ts +5 -14
  17. package/bin/templates/default/src/components/search-bar.ts +21 -65
  18. package/bin/templates/default/src/pages/dashboard.ts +15 -11
  19. package/bin/templates/default/src/pages/data.ts +10 -13
  20. package/bin/templates/default/src/pages/notifications.ts +4 -9
  21. package/bin/templates/default/src/pages/profile.ts +2 -8
  22. package/bin/templates/default/src/pages/settings.ts +16 -16
  23. package/dist/cdn/accordion/snice-accordion.js +1 -1
  24. package/dist/cdn/action-bar/snice-action-bar.js +1 -1
  25. package/dist/cdn/activity-feed/snice-activity-feed.js +1 -1
  26. package/dist/cdn/alert/snice-alert.js +1 -1
  27. package/dist/cdn/app-tiles/snice-app-tiles.js +1 -1
  28. package/dist/cdn/approval-flow/snice-approval-flow.js +1 -1
  29. package/dist/cdn/audio-recorder/snice-audio-recorder.js +1 -1
  30. package/dist/cdn/availability/snice-availability.js +1 -1
  31. package/dist/cdn/avatar/snice-avatar.js +1 -1
  32. package/dist/cdn/avatar-group/snice-avatar-group.js +1 -1
  33. package/dist/cdn/badge/snice-badge.js +1 -1
  34. package/dist/cdn/banner/snice-banner.js +1 -1
  35. package/dist/cdn/binpack/snice-binpack.js +1 -1
  36. package/dist/cdn/book/snice-book.js +1 -1
  37. package/dist/cdn/booking/snice-booking.js +1 -1
  38. package/dist/cdn/breadcrumbs/snice-breadcrumbs.js +1 -1
  39. package/dist/cdn/button/snice-button.js +1 -1
  40. package/dist/cdn/calendar/snice-calendar.js +1 -1
  41. package/dist/cdn/camera/snice-camera.js +1 -1
  42. package/dist/cdn/camera-annotate/snice-camera-annotate.js +1 -1
  43. package/dist/cdn/candlestick/snice-candlestick.js +1 -1
  44. package/dist/cdn/card/snice-card.js +1 -1
  45. package/dist/cdn/carousel/snice-carousel.js +1 -1
  46. package/dist/cdn/cart/snice-cart.js +1 -1
  47. package/dist/cdn/chart/snice-chart.js +1 -1
  48. package/dist/cdn/chat/snice-chat.js +1 -1
  49. package/dist/cdn/checkbox/snice-checkbox.js +1 -1
  50. package/dist/cdn/chip/snice-chip.js +1 -1
  51. package/dist/cdn/code-block/snice-code-block.js +1 -1
  52. package/dist/cdn/color-display/snice-color-display.js +1 -1
  53. package/dist/cdn/color-picker/snice-color-picker.js +1 -1
  54. package/dist/cdn/command-palette/snice-command-palette.js +1 -1
  55. package/dist/cdn/comments/snice-comments.js +1 -1
  56. package/dist/cdn/countdown/snice-countdown.js +1 -1
  57. package/dist/cdn/cropper/snice-cropper.js +1 -1
  58. package/dist/cdn/data-card/snice-data-card.js +1 -1
  59. package/dist/cdn/date-picker/snice-date-picker.js +1 -1
  60. package/dist/cdn/date-range-picker/snice-date-range-picker.js +1 -1
  61. package/dist/cdn/date-time-picker/snice-date-time-picker.js +1 -1
  62. package/dist/cdn/diff/snice-diff.js +1 -1
  63. package/dist/cdn/divider/snice-divider.js +1 -1
  64. package/dist/cdn/doc/snice-doc.js +1 -1
  65. package/dist/cdn/draw/snice-draw.js +1 -1
  66. package/dist/cdn/drawer/snice-drawer.js +1 -1
  67. package/dist/cdn/empty-state/snice-empty-state.js +1 -1
  68. package/dist/cdn/estimate/snice-estimate.js +1 -1
  69. package/dist/cdn/file-gallery/snice-file-gallery.js +1 -1
  70. package/dist/cdn/file-upload/snice-file-upload.js +1 -1
  71. package/dist/cdn/flip-card/snice-flip-card.js +1 -1
  72. package/dist/cdn/flow/snice-flow.js +1 -1
  73. package/dist/cdn/form-layout/snice-form-layout.js +1 -1
  74. package/dist/cdn/funnel/snice-funnel.js +1 -1
  75. package/dist/cdn/gantt/snice-gantt.js +1 -1
  76. package/dist/cdn/gauge/snice-gauge.js +1 -1
  77. package/dist/cdn/grid/snice-grid.js +1 -1
  78. package/dist/cdn/heatmap/snice-heatmap.js +1 -1
  79. package/dist/cdn/image/snice-image.js +1 -1
  80. package/dist/cdn/input/snice-input.js +1 -1
  81. package/dist/cdn/invoice/snice-invoice.js +1 -1
  82. package/dist/cdn/kanban/snice-kanban.js +1 -1
  83. package/dist/cdn/key-value/snice-key-value.js +1 -1
  84. package/dist/cdn/kpi/snice-kpi.js +1 -1
  85. package/dist/cdn/layout/snice-layout.js +1 -1
  86. package/dist/cdn/leaderboard/snice-leaderboard.js +1 -1
  87. package/dist/cdn/link/snice-link.js +1 -1
  88. package/dist/cdn/link-preview/snice-link-preview.js +1 -1
  89. package/dist/cdn/list/snice-list.js +1 -1
  90. package/dist/cdn/location/snice-location.js +1 -1
  91. package/dist/cdn/login/snice-login.js +1 -1
  92. package/dist/cdn/map/snice-map.js +1 -1
  93. package/dist/cdn/markdown/snice-markdown.js +1 -1
  94. package/dist/cdn/masonry/snice-masonry.js +1 -1
  95. package/dist/cdn/menu/snice-menu.js +1 -1
  96. package/dist/cdn/message-strip/snice-message-strip.js +1 -1
  97. package/dist/cdn/modal/snice-modal.js +1 -1
  98. package/dist/cdn/music-player/snice-music-player.js +1 -1
  99. package/dist/cdn/nav/snice-nav.js +1 -1
  100. package/dist/cdn/network-graph/snice-network-graph.js +1 -1
  101. package/dist/cdn/notification-center/snice-notification-center.js +1 -1
  102. package/dist/cdn/order-tracker/snice-order-tracker.js +1 -1
  103. package/dist/cdn/org-chart/snice-org-chart.js +1 -1
  104. package/dist/cdn/pagination/snice-pagination.js +1 -1
  105. package/dist/cdn/paint/snice-paint.js +1 -1
  106. package/dist/cdn/pdf-viewer/snice-pdf-viewer.js +1 -1
  107. package/dist/cdn/permission-matrix/snice-permission-matrix.js +1 -1
  108. package/dist/cdn/podcast-player/snice-podcast-player.js +1 -1
  109. package/dist/cdn/popover/snice-popover.js +1 -1
  110. package/dist/cdn/pricing-table/snice-pricing-table.js +1 -1
  111. package/dist/cdn/product-card/snice-product-card.js +1 -1
  112. package/dist/cdn/progress/snice-progress.js +1 -1
  113. package/dist/cdn/progress-ring/snice-progress-ring.js +1 -1
  114. package/dist/cdn/qr-code/snice-qr-code.js +1 -1
  115. package/dist/cdn/qr-reader/snice-qr-reader.js +1 -1
  116. package/dist/cdn/radio/snice-radio.js +1 -1
  117. package/dist/cdn/range-slider/snice-range-slider.js +1 -1
  118. package/dist/cdn/rating/snice-rating.js +1 -1
  119. package/dist/cdn/receipt/snice-receipt.js +1 -1
  120. package/dist/cdn/recipe/snice-recipe.js +1 -1
  121. package/dist/cdn/runtime/README.md +2 -2
  122. package/dist/cdn/runtime/snice-runtime.esm.js +28 -8
  123. package/dist/cdn/runtime/snice-runtime.esm.js.map +1 -1
  124. package/dist/cdn/runtime/snice-runtime.esm.min.js +1 -1
  125. package/dist/cdn/runtime/snice-runtime.esm.min.js.map +1 -1
  126. package/dist/cdn/runtime/snice-runtime.js +28 -8
  127. package/dist/cdn/runtime/snice-runtime.js.map +1 -1
  128. package/dist/cdn/runtime/snice-runtime.min.js +1 -1
  129. package/dist/cdn/runtime/snice-runtime.min.js.map +1 -1
  130. package/dist/cdn/sankey/snice-sankey.js +1 -1
  131. package/dist/cdn/segmented-control/snice-segmented-control.js +1 -1
  132. package/dist/cdn/select/snice-select.js +1 -1
  133. package/dist/cdn/skeleton/snice-skeleton.js +1 -1
  134. package/dist/cdn/slider/snice-slider.js +1 -1
  135. package/dist/cdn/sortable/snice-sortable.js +1 -1
  136. package/dist/cdn/sparkline/snice-sparkline.js +1 -1
  137. package/dist/cdn/spinner/snice-spinner.js +1 -1
  138. package/dist/cdn/split-button/snice-split-button.js +1 -1
  139. package/dist/cdn/split-pane/snice-split-pane.js +1 -1
  140. package/dist/cdn/spotlight/snice-spotlight.js +1 -1
  141. package/dist/cdn/stat-group/snice-stat-group.js +1 -1
  142. package/dist/cdn/step-input/snice-step-input.js +1 -1
  143. package/dist/cdn/stepper/snice-stepper.js +1 -1
  144. package/dist/cdn/switch/snice-switch.js +1 -1
  145. package/dist/cdn/table/snice-table.esm.js +1 -1
  146. package/dist/cdn/table/snice-table.js +1 -1
  147. package/dist/cdn/tabs/snice-tabs.js +1 -1
  148. package/dist/cdn/tag/snice-tag.js +1 -1
  149. package/dist/cdn/tag-input/snice-tag-input.js +1 -1
  150. package/dist/cdn/terminal/snice-terminal.js +1 -1
  151. package/dist/cdn/testimonial/snice-testimonial.js +1 -1
  152. package/dist/cdn/textarea/snice-textarea.js +1 -1
  153. package/dist/cdn/time-picker/snice-time-picker.js +1 -1
  154. package/dist/cdn/time-range-picker/snice-time-range-picker.js +1 -1
  155. package/dist/cdn/timeline/snice-timeline.js +1 -1
  156. package/dist/cdn/timer/snice-timer.js +1 -1
  157. package/dist/cdn/toast/snice-toast.js +1 -1
  158. package/dist/cdn/tooltip/snice-tooltip.js +1 -1
  159. package/dist/cdn/tree/snice-tree.js +1 -1
  160. package/dist/cdn/treemap/snice-treemap.js +1 -1
  161. package/dist/cdn/user-card/snice-user-card.js +1 -1
  162. package/dist/cdn/video-player/snice-video-player.js +1 -1
  163. package/dist/cdn/virtual-scroller/snice-virtual-scroller.js +1 -1
  164. package/dist/cdn/waterfall/snice-waterfall.js +1 -1
  165. package/dist/cdn/weather/snice-weather.js +1 -1
  166. package/dist/cdn/work-order/snice-work-order.js +1 -1
  167. package/dist/index.cjs +25 -5
  168. package/dist/index.cjs.map +1 -1
  169. package/dist/index.esm.js +25 -5
  170. package/dist/index.esm.js.map +1 -1
  171. package/dist/index.iife.js +25 -5
  172. package/dist/index.iife.js.map +1 -1
  173. package/dist/react/SniceProvider.js +1 -1
  174. package/dist/react/SniceRouter.d.ts +2 -0
  175. package/dist/react/SniceRouter.js +3 -2
  176. package/dist/react/SniceRouter.js.map +1 -1
  177. package/dist/react/index.js +1 -1
  178. package/dist/react/matchRoute.d.ts +4 -1
  179. package/dist/react/matchRoute.js +13 -3
  180. package/dist/react/matchRoute.js.map +1 -1
  181. package/dist/react/useRequestHandler.js +1 -1
  182. package/dist/symbols.cjs +1 -1
  183. package/dist/symbols.esm.js +1 -1
  184. package/dist/transitions.cjs +1 -1
  185. package/dist/transitions.esm.js +1 -1
  186. package/dist/types/page-options.d.ts +15 -1
  187. package/dist/types/router-instance.d.ts +2 -1
  188. package/docs/ai/README.md +6 -4
  189. package/docs/ai/api.md +1 -1
  190. package/docs/ai/architecture.md +21 -8
  191. package/docs/ai/cli.md +4 -1
  192. package/docs/ai/controllers.md +11 -1
  193. package/docs/ai/decorators.md +1 -1
  194. package/docs/ai/react-integration.md +1 -0
  195. package/docs/ai/routing.md +25 -3
  196. package/docs/cli.md +4 -2
  197. package/docs/controllers.md +16 -4
  198. package/docs/react-integration.md +1 -0
  199. package/docs/routing.md +29 -2
  200. package/package.json +1 -1
@@ -1,5 +1,5 @@
1
1
  import { page } from '../router';
2
- import { render, styles, html, css, context, observe, dispose } from 'snice';
2
+ import { render, styles, html, css, context, observe, dispose, state } from 'snice';
3
3
  import type { Placard, Context } from 'snice';
4
4
  import type { ApplicationContext } from '../context';
5
5
  import { isAuthenticated } from '../guards/auth';
@@ -15,9 +15,9 @@ const placard: Placard = {
15
15
 
16
16
  @page({ tag: 'dashboard-page', routes: ['/', '/dashboard'], guards: [isAuthenticated], placard })
17
17
  export class DashboardPage extends HTMLElement {
18
- userName = '';
19
- notificationCount = 0;
20
- isCompact = false;
18
+ @state() userName = '';
19
+ @state() notificationCount = 0;
20
+ @state() isCompact = false;
21
21
  private unsubscribe: (() => void) | null = null;
22
22
 
23
23
  @context()
@@ -48,7 +48,7 @@ export class DashboardPage extends HTMLElement {
48
48
  @render()
49
49
  renderContent() {
50
50
  return html`
51
- <div class="container">
51
+ <div class="container" class:compact=${this.isCompact}>
52
52
  <div class="welcome">
53
53
  <h1>Welcome, ${this.userName}!</h1>
54
54
  <p class="subtitle">This is your dashboard</p>
@@ -87,12 +87,12 @@ export class DashboardPage extends HTMLElement {
87
87
  <snice-card>
88
88
  <h3>Architecture</h3>
89
89
  <ul>
90
- <li><strong>Pages:</strong> Route orchestrators</li>
91
- <li><strong>Components:</strong> Reusable UI</li>
92
- <li><strong>Controllers:</strong> Behavior modules</li>
93
- <li><strong>Services:</strong> Business logic</li>
90
+ <li><strong>Pages:</strong> Element orchestration</li>
91
+ <li><strong>Components:</strong> Reusable visual behavior</li>
92
+ <li><strong>Controllers:</strong> Application behavior for a set of elements</li>
93
+ <li><strong>Services:</strong> Host-free functions in this project</li>
94
94
  <li><strong>Middleware:</strong> Fetch interceptors</li>
95
- <li><strong>Daemons:</strong> Lifecycle classes</li>
95
+ <li><strong>Daemons:</strong> Explicit state and lifecycle</li>
96
96
  <li><strong>Guards:</strong> Route protection</li>
97
97
  </ul>
98
98
  </snice-card>
@@ -102,7 +102,7 @@ export class DashboardPage extends HTMLElement {
102
102
  <ul>
103
103
  <li><code>@page</code> - Route pages</li>
104
104
  <li><code>@element</code> - Custom elements</li>
105
- <li><code>@controller</code> - Behavior modules</li>
105
+ <li><code>@controller</code> - Element-specific application behavior</li>
106
106
  <li><code>@context</code> - Global state</li>
107
107
  <li><code>@observe</code> - DOM observers</li>
108
108
  <li><code>@watch</code> - Property watchers</li>
@@ -140,6 +140,10 @@ export class DashboardPage extends HTMLElement {
140
140
  margin: 0 auto;
141
141
  }
142
142
 
143
+ .container.compact {
144
+ padding: 1rem;
145
+ }
146
+
143
147
  .welcome {
144
148
  margin-bottom: 2rem;
145
149
  }
@@ -1,5 +1,5 @@
1
1
  import { page } from '../router';
2
- import { render, styles, observe, property, ready, html, css } from 'snice';
2
+ import { render, styles, observe, ready, html, css, state } from 'snice';
3
3
  import type { Placard } from 'snice';
4
4
  import { isAuthenticated } from '../guards/auth';
5
5
 
@@ -34,19 +34,16 @@ const MOCK_ITEMS: DataItem[] = [
34
34
 
35
35
  @page({ tag: 'data-page', routes: ['/data'], guards: [isAuthenticated], placard })
36
36
  export class DataPage extends HTMLElement {
37
- allItems: DataItem[] = [];
38
- filteredItems: DataItem[] = [];
39
- searchQuery = '';
40
- statusFilter: 'all' | 'active' | 'pending' | 'archived' = 'all';
41
- @property({ type: Boolean }) loading = true;
37
+ @state() allItems: DataItem[] = [];
38
+ @state() filteredItems: DataItem[] = [];
39
+ @state() searchQuery = '';
40
+ @state() statusFilter: 'all' | 'active' | 'pending' | 'archived' = 'all';
41
+ @state() loading = true;
42
+ @state() compact = false;
42
43
 
43
44
  @observe('resize')
44
45
  handleResize(entries: ResizeObserverEntry[]) {
45
- const width = entries[0].contentRect.width;
46
- const table = this.shadowRoot?.querySelector('.data-table');
47
- if (table) {
48
- table.classList.toggle('compact', width < 600);
49
- }
46
+ this.compact = entries[0].contentRect.width < 600;
50
47
  }
51
48
 
52
49
  @ready()
@@ -145,7 +142,7 @@ export class DataPage extends HTMLElement {
145
142
  ></snice-empty-state>
146
143
  </when>
147
144
  <default>
148
- <div class="data-table">
145
+ <div class="data-table" class:compact=${this.compact}>
149
146
  <div class="table-header">
150
147
  <span class="col-title">Title</span>
151
148
  <span class="col-status">Status</span>
@@ -158,7 +155,7 @@ export class DataPage extends HTMLElement {
158
155
  <span class="description">${item.description}</span>
159
156
  </div>
160
157
  <div class="col-status">
161
- <span class="status-dot" style="background: ${this.getStatusColor(item.status)}"></span>
158
+ <span class="status-dot" style:background=${this.getStatusColor(item.status)}></span>
162
159
  ${item.status}
163
160
  </div>
164
161
  <div class="col-date">${item.createdAt}</div>
@@ -1,5 +1,5 @@
1
1
  import { page } from '../router';
2
- import { render, styles, html, css, context, dispose, watch, on } from 'snice';
2
+ import { render, styles, html, css, context, dispose, on, state } from 'snice';
3
3
  import type { Placard, Context } from 'snice';
4
4
  import type { ApplicationContext } from '../context';
5
5
  import { isAuthenticated } from '../guards/auth';
@@ -16,8 +16,8 @@ const placard: Placard = {
16
16
 
17
17
  @page({ tag: 'notifications-page', routes: ['/notifications'], guards: [isAuthenticated], placard })
18
18
  export class NotificationsPage extends HTMLElement {
19
- notifications: Notification[] = [];
20
- filter: NotificationType | 'all' = 'all';
19
+ @state() notifications: Notification[] = [];
20
+ @state() filter: NotificationType | 'all' = 'all';
21
21
  private unsubscribe: (() => void) | null = null;
22
22
 
23
23
  @context()
@@ -38,11 +38,6 @@ export class NotificationsPage extends HTMLElement {
38
38
  }
39
39
  }
40
40
 
41
- @watch('filter')
42
- onFilterChange() {
43
- // Re-render triggers automatically via property change
44
- }
45
-
46
41
  get filteredNotifications(): Notification[] {
47
42
  if (this.filter === 'all') return this.notifications;
48
43
  return this.notifications.filter(n => n.type === this.filter);
@@ -124,7 +119,7 @@ export class NotificationsPage extends HTMLElement {
124
119
  key=${notification.id}
125
120
  .variant=${notification.type}
126
121
  dismissible
127
- @dismiss=${() => this.removeNotification(notification.id)}
122
+ @alert-dismiss=${() => this.removeNotification(notification.id)}
128
123
  >
129
124
  <strong>${notification.title}</strong>
130
125
  <p>${notification.message}</p>
@@ -1,5 +1,5 @@
1
1
  import { page } from '../router';
2
- import { render, styles, html, css, context, dispatch, observe } from 'snice';
2
+ import { render, styles, html, css, context, dispatch, state } from 'snice';
3
3
  import type { Placard, Context } from 'snice';
4
4
  import type { Principal, User } from '../types/auth';
5
5
  import { isAuthenticated } from '../guards/auth';
@@ -16,9 +16,8 @@ const placard: Placard = {
16
16
 
17
17
  @page({ tag: 'profile-page', routes: ['/profile'], guards: [isAuthenticated], placard })
18
18
  export class ProfilePage extends HTMLElement {
19
- user: User | null = null;
19
+ @state() user: User | null = null;
20
20
  private ctx?: Context;
21
- isMobile = false;
22
21
 
23
22
  @context()
24
23
  handleContext(ctx: Context) {
@@ -27,11 +26,6 @@ export class ProfilePage extends HTMLElement {
27
26
  this.user = principal?.user || null;
28
27
  }
29
28
 
30
- @observe('media:(max-width: 640px)')
31
- handleMediaChange(matches: boolean) {
32
- this.isMobile = matches;
33
- }
34
-
35
29
  @dispatch('user-logout')
36
30
  async handleLogout() {
37
31
  await logout();
@@ -1,5 +1,5 @@
1
1
  import { page } from '../router';
2
- import { render, styles, context, dispatch, on, html, css } from 'snice';
2
+ import { render, styles, context, dispatch, on, html, css, live, state } from 'snice';
3
3
  import type { Placard, Context } from 'snice';
4
4
  import { isAuthenticated } from '../guards/auth';
5
5
  import type { Principal, User } from '../types/auth';
@@ -17,11 +17,11 @@ const placard: Placard = {
17
17
  @page({ tag: 'settings-page', routes: ['/settings'], guards: [isAuthenticated], placard })
18
18
  export class SettingsPage extends HTMLElement {
19
19
  private ctx?: Context;
20
- displayName = '';
21
- email = '';
22
- theme: 'light' | 'dark' | 'system' = 'system';
23
- notificationsEnabled = true;
24
- saved = false;
20
+ @state() displayName = '';
21
+ @state() email = '';
22
+ @state() theme: 'light' | 'dark' | 'system' = 'system';
23
+ @state() notificationsEnabled = true;
24
+ @state() saved = false;
25
25
 
26
26
  @context()
27
27
  handleContext(ctx: Context) {
@@ -37,12 +37,12 @@ export class SettingsPage extends HTMLElement {
37
37
  this.notificationsEnabled = localStorage.getItem('notifications-enabled') !== 'false';
38
38
  }
39
39
 
40
- handleNameInput(e: Event) {
41
- this.displayName = (e.target as HTMLInputElement).value;
40
+ handleNameInput(e: CustomEvent<{ value: string }>) {
41
+ this.displayName = e.detail.value;
42
42
  }
43
43
 
44
- handleEmailInput(e: Event) {
45
- this.email = (e.target as HTMLInputElement).value;
44
+ handleEmailInput(e: CustomEvent<{ value: string }>) {
45
+ this.email = e.detail.value;
46
46
  }
47
47
 
48
48
  setTheme(theme: 'light' | 'dark' | 'system') {
@@ -51,8 +51,8 @@ export class SettingsPage extends HTMLElement {
51
51
  this.applyTheme(theme);
52
52
  }
53
53
 
54
- toggleNotifications() {
55
- this.notificationsEnabled = !this.notificationsEnabled;
54
+ handleNotificationsChange(e: CustomEvent<{ checked: boolean }>) {
55
+ this.notificationsEnabled = e.detail.checked;
56
56
  localStorage.setItem('notifications-enabled', String(this.notificationsEnabled));
57
57
  }
58
58
 
@@ -106,7 +106,7 @@ export class SettingsPage extends HTMLElement {
106
106
  <div class="form-group">
107
107
  <label>Display Name</label>
108
108
  <snice-input
109
- .value=${this.displayName}
109
+ .value=${live(this.displayName)}
110
110
  @input-input=${this.handleNameInput}
111
111
  placeholder="Your name"
112
112
  ></snice-input>
@@ -114,7 +114,7 @@ export class SettingsPage extends HTMLElement {
114
114
  <div class="form-group">
115
115
  <label>Email</label>
116
116
  <snice-input
117
- .value=${this.email}
117
+ .value=${live(this.email)}
118
118
  @input-input=${this.handleEmailInput}
119
119
  placeholder="your@email.com"
120
120
  ></snice-input>
@@ -156,8 +156,8 @@ export class SettingsPage extends HTMLElement {
156
156
  <p class="toggle-desc">Receive real-time notification alerts</p>
157
157
  </div>
158
158
  <snice-switch
159
- ?checked=${this.notificationsEnabled}
160
- @change=${this.toggleNotifications}
159
+ .checked=${live(this.notificationsEnabled)}
160
+ @switch-change=${this.handleNotificationsChange}
161
161
  ></snice-switch>
162
162
  </div>
163
163
  </snice-card>
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * snice v7.2.0
2
+ * snice v7.3.0
3
3
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
4
4
  * (c) 2024
5
5
  * Released under the MIT License.
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * snice v7.2.0
2
+ * snice v7.3.0
3
3
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
4
4
  * (c) 2024
5
5
  * Released under the MIT License.
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * snice v7.2.0
2
+ * snice v7.3.0
3
3
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
4
4
  * (c) 2024
5
5
  * Released under the MIT License.
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * snice v7.2.0
2
+ * snice v7.3.0
3
3
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
4
4
  * (c) 2024
5
5
  * Released under the MIT License.
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * snice v7.2.0
2
+ * snice v7.3.0
3
3
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
4
4
  * (c) 2024
5
5
  * Released under the MIT License.
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * snice v7.2.0
2
+ * snice v7.3.0
3
3
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
4
4
  * (c) 2024
5
5
  * Released under the MIT License.
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * snice v7.2.0
2
+ * snice v7.3.0
3
3
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
4
4
  * (c) 2024
5
5
  * Released under the MIT License.
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * snice v7.2.0
2
+ * snice v7.3.0
3
3
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
4
4
  * (c) 2024
5
5
  * Released under the MIT License.
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * snice v7.2.0
2
+ * snice v7.3.0
3
3
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
4
4
  * (c) 2024
5
5
  * Released under the MIT License.
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * snice v7.2.0
2
+ * snice v7.3.0
3
3
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
4
4
  * (c) 2024
5
5
  * Released under the MIT License.
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * snice v7.2.0
2
+ * snice v7.3.0
3
3
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
4
4
  * (c) 2024
5
5
  * Released under the MIT License.
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * snice v7.2.0
2
+ * snice v7.3.0
3
3
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
4
4
  * (c) 2024
5
5
  * Released under the MIT License.
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * snice v7.2.0
2
+ * snice v7.3.0
3
3
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
4
4
  * (c) 2024
5
5
  * Released under the MIT License.
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * snice v7.2.0
2
+ * snice v7.3.0
3
3
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
4
4
  * (c) 2024
5
5
  * Released under the MIT License.
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * snice v7.2.0
2
+ * snice v7.3.0
3
3
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
4
4
  * (c) 2024
5
5
  * Released under the MIT License.
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * snice v7.2.0
2
+ * snice v7.3.0
3
3
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
4
4
  * (c) 2024
5
5
  * Released under the MIT License.
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * snice v7.2.0
2
+ * snice v7.3.0
3
3
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
4
4
  * (c) 2024
5
5
  * Released under the MIT License.
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * snice v7.2.0
2
+ * snice v7.3.0
3
3
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
4
4
  * (c) 2024
5
5
  * Released under the MIT License.
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * snice v7.2.0
2
+ * snice v7.3.0
3
3
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
4
4
  * (c) 2024
5
5
  * Released under the MIT License.
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * snice v7.2.0
2
+ * snice v7.3.0
3
3
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
4
4
  * (c) 2024
5
5
  * Released under the MIT License.
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * snice v7.2.0
2
+ * snice v7.3.0
3
3
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
4
4
  * (c) 2024
5
5
  * Released under the MIT License.
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * snice v7.2.0
2
+ * snice v7.3.0
3
3
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
4
4
  * (c) 2024
5
5
  * Released under the MIT License.
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * snice v7.2.0
2
+ * snice v7.3.0
3
3
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
4
4
  * (c) 2024
5
5
  * Released under the MIT License.
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * snice v7.2.0
2
+ * snice v7.3.0
3
3
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
4
4
  * (c) 2024
5
5
  * Released under the MIT License.
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * snice v7.2.0
2
+ * snice v7.3.0
3
3
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
4
4
  * (c) 2024
5
5
  * Released under the MIT License.
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * snice v7.2.0
2
+ * snice v7.3.0
3
3
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
4
4
  * (c) 2024
5
5
  * Released under the MIT License.
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * snice v7.2.0
2
+ * snice v7.3.0
3
3
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
4
4
  * (c) 2024
5
5
  * Released under the MIT License.
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * snice v7.2.0
2
+ * snice v7.3.0
3
3
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
4
4
  * (c) 2024
5
5
  * Released under the MIT License.
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * snice v7.2.0
2
+ * snice v7.3.0
3
3
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
4
4
  * (c) 2024
5
5
  * Released under the MIT License.
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * snice v7.2.0
2
+ * snice v7.3.0
3
3
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
4
4
  * (c) 2024
5
5
  * Released under the MIT License.
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * snice v7.2.0
2
+ * snice v7.3.0
3
3
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
4
4
  * (c) 2024
5
5
  * Released under the MIT License.
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * snice v7.2.0
2
+ * snice v7.3.0
3
3
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
4
4
  * (c) 2024
5
5
  * Released under the MIT License.
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * snice v7.2.0
2
+ * snice v7.3.0
3
3
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
4
4
  * (c) 2024
5
5
  * Released under the MIT License.
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * snice v7.2.0
2
+ * snice v7.3.0
3
3
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
4
4
  * (c) 2024
5
5
  * Released under the MIT License.
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * snice v7.2.0
2
+ * snice v7.3.0
3
3
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
4
4
  * (c) 2024
5
5
  * Released under the MIT License.
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * snice v7.2.0
2
+ * snice v7.3.0
3
3
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
4
4
  * (c) 2024
5
5
  * Released under the MIT License.
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * snice v7.2.0
2
+ * snice v7.3.0
3
3
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
4
4
  * (c) 2024
5
5
  * Released under the MIT License.
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * snice v7.2.0
2
+ * snice v7.3.0
3
3
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
4
4
  * (c) 2024
5
5
  * Released under the MIT License.
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * snice v7.2.0
2
+ * snice v7.3.0
3
3
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
4
4
  * (c) 2024
5
5
  * Released under the MIT License.
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * snice v7.2.0
2
+ * snice v7.3.0
3
3
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
4
4
  * (c) 2024
5
5
  * Released under the MIT License.
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * snice v7.2.0
2
+ * snice v7.3.0
3
3
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
4
4
  * (c) 2024
5
5
  * Released under the MIT License.
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * snice v7.2.0
2
+ * snice v7.3.0
3
3
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
4
4
  * (c) 2024
5
5
  * Released under the MIT License.
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * snice v7.2.0
2
+ * snice v7.3.0
3
3
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
4
4
  * (c) 2024
5
5
  * Released under the MIT License.
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * snice v7.2.0
2
+ * snice v7.3.0
3
3
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
4
4
  * (c) 2024
5
5
  * Released under the MIT License.
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * snice v7.2.0
2
+ * snice v7.3.0
3
3
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
4
4
  * (c) 2024
5
5
  * Released under the MIT License.