snice 4.10.0 → 4.11.0

package/adapters/react/carousel.d.ts

@@ -12,6 +12,7 @@ export interface CarouselProps extends SniceBaseProps {
     showIndicators?: any;
     slidesPerView?: any;
     spaceBetween?: any;
+    slideCount?: any;
 }
 /**
  * Carousel - React adapter for snice-carousel

package/adapters/react/carousel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["carousel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C;;GAEG;AACH,MAAM,WAAW,aAAc,SAAQ,cAAc;IACnD,WAAW,CAAC,EAAE,GAAG,CAAC;IAClB,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,gBAAgB,CAAC,EAAE,GAAG,CAAC;IACvB,iBAAiB,CAAC,EAAE,GAAG,CAAC;IACxB,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,cAAc,CAAC,EAAE,GAAG,CAAC;IACrB,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,YAAY,CAAC,EAAE,GAAG,CAAC;CAEpB;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,QAAQ,4GAKnB,CAAC"}
+{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["carousel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C;;GAEG;AACH,MAAM,WAAW,aAAc,SAAQ,cAAc;IACnD,WAAW,CAAC,EAAE,GAAG,CAAC;IAClB,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,gBAAgB,CAAC,EAAE,GAAG,CAAC;IACvB,iBAAiB,CAAC,EAAE,GAAG,CAAC;IACxB,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,cAAc,CAAC,EAAE,GAAG,CAAC;IACrB,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,UAAU,CAAC,EAAE,GAAG,CAAC;CAElB;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,QAAQ,4GAKnB,CAAC"}

package/adapters/react/carousel.js

@@ -17,7 +17,7 @@ import { createReactAdapter } from './wrapper';
  */
 export const Carousel = createReactAdapter({
     tagName: 'snice-carousel',
-    properties: ["activeIndex", "autoplay", "autoplayInterval", "autoplayDirection", "loop", "showControls", "showIndicators", "slidesPerView", "spaceBetween"],
+    properties: ["activeIndex", "autoplay", "autoplayInterval", "autoplayDirection", "loop", "showControls", "showIndicators", "slidesPerView", "spaceBetween", "slideCount"],
     events: {},
     formAssociated: false
 });

package/adapters/react/carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"carousel.js","sourceRoot":"","sources":["carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAmB/C;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,kBAAkB,CAAgB;IACxD,OAAO,EAAE,gBAAgB;IACzB,UAAU,EAAE,CAAC,aAAa,EAAC,UAAU,EAAC,kBAAkB,EAAC,mBAAmB,EAAC,MAAM,EAAC,cAAc,EAAC,gBAAgB,EAAC,eAAe,EAAC,cAAc,CAAC;IACnJ,MAAM,EAAE,EAAE;IACV,cAAc,EAAE,KAAK;CACtB,CAAC,CAAC"}
+{"version":3,"file":"carousel.js","sourceRoot":"","sources":["carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAoB/C;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,kBAAkB,CAAgB;IACxD,OAAO,EAAE,gBAAgB;IACzB,UAAU,EAAE,CAAC,aAAa,EAAC,UAAU,EAAC,kBAAkB,EAAC,mBAAmB,EAAC,MAAM,EAAC,cAAc,EAAC,gBAAgB,EAAC,eAAe,EAAC,cAAc,EAAC,YAAY,CAAC;IAChK,MAAM,EAAE,EAAE;IACV,cAAc,EAAE,KAAK;CACtB,CAAC,CAAC"}

package/adapters/react/carousel.tsx

@@ -14,6 +14,7 @@ export interface CarouselProps extends SniceBaseProps {
   showIndicators?: any;
   slidesPerView?: any;
   spaceBetween?: any;
+  slideCount?: any;
 
 }
 
@@ -35,7 +36,7 @@ export interface CarouselProps extends SniceBaseProps {
  */
 export const Carousel = createReactAdapter<CarouselProps>({
   tagName: 'snice-carousel',
-  properties: ["activeIndex","autoplay","autoplayInterval","autoplayDirection","loop","showControls","showIndicators","slidesPerView","spaceBetween"],
+  properties: ["activeIndex","autoplay","autoplayInterval","autoplayDirection","loop","showControls","showIndicators","slidesPerView","spaceBetween","slideCount"],
   events: {},
   formAssociated: false
 });

package/bin/templates/CLAUDE.md

@@ -1,14 +1,33 @@
 # Snice Project - AI Assistant Guide
 
+## IMMEDIATELY: Install the Snice MCP Server
+
+Snice ships an MCP server that gives you access to component docs, decorator reference, code validation, and component scaffolding. Install it before doing any work:
+
+```bash
+claude mcp add snice -- npx snice mcp
+```
+
+This gives you these tools:
+- `list_components` — List all available UI components
+- `get_component_docs` — Get docs for a specific component
+- `get_decorator_docs` — Get decorator reference
+- `get_overview` — Framework overview
+- `generate_component` — Scaffold new components
+- `search_docs` — Search documentation
+- `validate_code` — Check code for common Snice mistakes
+
+**Use these tools instead of guessing.** If you're unsure about a component's API, call `get_component_docs`. If you're writing a new component, call `generate_component` for the scaffold.
+
 ## Documentation Location
 
-AI-optimized docs shipped in: `node_modules/snice/docs/ai/`
+AI-optimized docs are shipped in: `node_modules/snice/docs/ai/`
 
 **Read these files:**
-- `api.md` - Complete API reference
-- `patterns.md` - Usage examples
-- `architecture.md` - System design
-- `components/*.md` - Component docs (read only as needed)
+- `api.md` — Complete API reference
+- `patterns.md` — Usage examples for every feature
+- `architecture.md` — System design
+- `components/*.md` — Component docs (read only as needed)
 
 ## Project Structure
 
@@ -26,154 +45,190 @@ src/
   styles/         # Global CSS
 ```
 
-**Separation of concerns:**
-- **Pages** - Orchestrate elements, handle URLs, most logic happens here
-- **Components** - Pure presentation, no business logic
-- **Controllers** - Attach to elements, add business behavior unsuitable for the page or components
-- **Services** - Stateless business logic, API calls
-- **Daemons** - Lifecycle-managed (WebSocket, P2P, intervals)
-- **Middleware** - Composable functions (auth, retry)
-- **Utils** - Pure helper functions
+## Critical Architecture Rules
+
+**Separation of concerns — DO NOT violate these:**
+- **Elements** — Pure visual presentation. NO fetch(), NO API calls, NO business logic. Receive data via properties, emit events for actions.
+- **Pages** — Orchestrate elements. Handle routing, call APIs, coordinate data flow. Most app logic lives here.
+- **Controllers** — Attach to elements via `controller="name"`. Add reusable non-visual behavior (data loading, validation). NOT global services.
+- **Services** — Stateless functions for business logic, API calls. Importable anywhere.
+- **Daemons** — Stateful lifecycle classes (WebSocket connections, polling intervals).
+- **Middleware** — Composable fetch middleware (auth headers, retry, error handling).
+
+## Snice is NOT Lit
 
-## Decorators
+Do NOT import from `lit` or extend `LitElement`. Snice has its own decorator system:
+- No `@customElement()` — use `@element('tag-name')`
+- No `@state()` — use plain class fields for internal state, `@property()` for attributes
+- No `render()` lifecycle method — use `@render()` decorator
+- No `static styles` — use `@styles()` decorator
+- No `reflect: true` — attributes sync automatically
+
+## Decorators Quick Reference
 
 ```typescript
 // Class decorators
-@page({ tag, routes, guards?, placard? })
-@element('tag-name')
-@controller('name')
-@layout('name')
-
-// Property/method decorators
-@property() name = 'default'
-@render() fn() { return html`...` }
-@styles() fn() { return css`...` }
-@ready() async fn() { ... }
-@dispose() fn() { ... }
-@watch('name') fn(oldVal, newVal) { ... }
-@query('input') input!: HTMLInputElement
-@queryAll('.item') items!: NodeListOf<HTMLElement>
-@on('click', 'button') fn(e: Event) { ... }
-@dispatch('value-changed') fn(val: string) => Event Detail
-@context() fn(ctx: Context) { ... }
-@request('user') fn(): () => Request
-@respond('user') fn(req) => Response
-@observe(() => this.el, options) fn(mutations) { ... }
+@element('tag-name')          // Define custom element
+@page({ tag, routes, guards?, placard? })  // Routable page (from Router(), NOT 'snice')
+@controller('name')           // Behavior module
+@layout('name')               // Page wrapper
+
+// Properties & reactivity
+@property({ type?, attribute? }) name = 'default'  // Reactive attribute
+@watch('propName')             // React to property changes: (oldVal, newVal, propName)
+@context()                     // Receive router Context on navigation
+
+// Rendering
+@render()                      // Declarative template: return html`...`
+@render({ once: true })        // Imperative: render once, update via @watch + @query
+@styles()                      // Scoped CSS: return css`...`
+
+// DOM
+@query('selector')             // Single shadow DOM element
+@queryAll('selector')          // Multiple shadow DOM elements
+
+// Lifecycle
+@ready()                       // After first render
+@dispose()                     // On disconnect
+
+// Events
+@on('click', 'button')                      // Event listener
+@on('input', 'input', { debounce: 300 })    // Debounced
+@on('keydown:ctrl+s')                        // Keyboard shortcut
+@dispatch('event-name')                      // Fire CustomEvent (detail = return value)
+
+// Communication
+@request('channel')            // Async generator: const result = await (yield payload)
+@respond('channel')            // Handle requests: receives payload, returns response
+
+// Observers
+@observe('resize', '.el')                    // ResizeObserver
+@observe('intersection', '.el')              // IntersectionObserver
+@observe('media:(min-width: 768px)')         // Media query
+@observe('mutation:childList', '.el')        // MutationObserver
 ```
 
-## Quick Examples
+## Router — Common Mistakes
 
-**Element:**
 ```typescript
-@element('my-counter')
-class Counter extends HTMLElement {
-  @property({ type: Number }) count = 0;
-
-  @render()
-  renderContent() {
-    return html`
-      <div>${this.count}</div>
-      <button @click=${() => this.count++}>+</button>
-    `;
-  }
-
-  @styles()
-  componentStyles() {
-    return css`:host { display: block; }`;
-  }
-}
+// router.ts — CORRECT setup
+import { Router } from 'snice';
+
+export const { page, navigate, initialize } = Router({
+  target: '#app',
+  type: 'hash',        // REQUIRED: 'hash' or 'pushstate'
+  layout: 'app-shell',
+  context: { user: null, theme: 'light' }
+});
+
+// pages import `page` from './router', NOT from 'snice'
+import { page } from '../router';
 ```
 
-**Page:**
+**Guards signature — TWO parameters:**
 ```typescript
-@page({ tag: 'user-page', routes: ['/users/:id'] })
-class UserPage extends HTMLElement {
-  @property() id = '';
-
-  @ready()
-  async load() {
-    const user = await fetch(`/api/users/${this.id}`).then(r => r.json());
-  }
-}
+// CORRECT:
+const isAuthenticated = (context: any, params: any) => context.principal?.isAuthenticated === true;
+
+// WRONG:
+const isAuth = (ctx) => ctx.isAuthenticated; // Missing params, wrong property access
 ```
 
-**Controller:**
+**Navigation — use hash URLs:**
 ```typescript
-@controller('data-loader')
-class DataLoader implements IController {
-  element: HTMLElement;
+// CORRECT:
+html`<a href="/#/users/123">View User</a>`
 
-  async attach(el: HTMLElement) {
-    this.element = el;
-  }
+// WRONG:
+navigate('/users/123')  // Does not change the URL
+```
 
-  async detach() {}
+## Native Element Controllers
 
-  @on('click', '.item')
-  handleClick(e: Event) {}
-}
+Controllers work on ANY HTML element, not just custom elements:
+```typescript
+import { useNativeElementControllers } from 'snice';
+useNativeElementControllers(); // Call once in main.ts
 
-// Usage: <my-list controller="data-loader"></my-list>
+// Then use in HTML:
+// <form controller="checkout-form">...</form>
+// <div controller="data-loader">...</div>
 ```
 
-**Lists:**
-```typescript
-html`
-  ${items.map(item => html`
-    <li key=${item.id}>${item.name}</li>
-  `)}
-`
-```
+## Templates
 
-**Conditionals:**
 ```typescript
 html`
-  <if ${condition}>Content</if>
+  <!-- Attribute binding -->
+  <div class="${cls}">
+
+  <!-- Property binding (objects/arrays) -->
+  <my-el .items=${array}>
+
+  <!-- Boolean attribute toggle -->
+  <button ?disabled=${isLoading}>
+
+  <!-- Event handler (auto-bound to this) -->
+  <button @click=${this.handleClick}>
+
+  <!-- Keyboard shortcut -->
+  <input @keydown:Enter=${this.submit}>
+  <input @keydown:ctrl+s=${this.save}>
+
+  <!-- Conditionals -->
+  <if ${isLoggedIn}><span>Welcome</span></if>
+  <case ${status}>
+    <when value="loading"><spinner></spinner></when>
+    <when value="error"><p>Error</p></when>
+    <default><p>Ready</p></default>
+  </case>
+
+  <!-- Lists with keys -->
+  ${items.map(item => html`<li key=${item.id}>${item.name}</li>`)}
 `
 ```
 
-## Communication
+## Communication Patterns
 
 - **Parent → Child:** Properties (`.prop=${value}`)
 - **Child → Parent:** Events (`@dispatch`)
-- **Element ↔ Controller:** Request/Response (`@request`, `@respond`)
-- **Global State:** Context (`@context()`)
+- **Element ↔ Controller:** Request/Response (`@request` / `@respond`)
+- **Global State:** Context (`@context()` — receives updates on navigation and `ctx.update()`)
 
-**Event Handling:**
-All component events use unprefixed names (e.g., `tab-change`, `menu-open`):
+**@request uses async generators:**
 ```typescript
-// Listening to events:
-html`<snice-tabs @tab-change=${handler}></snice-tabs>`
-
-// Dispatching events:
-@dispatch('tab-change')
-handleChange() { return { index: 0 }; }
+@request('fetch-user')
+async *fetchUser(id: string): any {
+  const user = await (yield { id });  // yield = send, await = receive
+  return user;
+}
+// Usage: const user = await this.fetchUser('123');
 ```
 
-## Navigation
+## Imperative Rendering
 
-**Use hash-based URLs, NOT router.navigate():**
+For fixed-structure templates where only content changes:
 ```typescript
-// Correct:
-html`<a href="/#/users/123">View User</a>`
-window.location.hash = '#/users/123'
+@render({ once: true })
+template() { return html`<div class="content"></div>`; }
 
-// Wrong:
-router.navigate('/users/123')
+@query('.content') $content!: HTMLElement;
+
+@watch('data')
+updateContent() {
+  if (!this.$content) return;  // Guard: watcher fires before first render
+  this.$content.textContent = this.data;
+}
 ```
-`router.navigate()` does not change the URL.
 
 ## Common Mistakes
 
-**Controllers are NOT global services.** They attach to elements via `controller="name"`. Use `utils/` for shared logic like API calls, auth, toasts.
-
-**@request/@respond is NOT a service bus.** It's for element-to-element or element-to-controller communication only. Use utility functions for app-wide features.
-
-**Guards receive Context, not AppContext.** Check `ctx.application.property`, not `ctx.property`. Guards: `(ctx: Context) => boolean`
-
-**Context must be mutated then signaled.** After changing `ctx.application`, call `ctx.update()` to signal subscribers. Pages need `@context()` to get context reference.
-
-**@property is for parent-provided attributes.** Internal component state should be regular properties, not decorated. Only use `@property()` when the value comes from a parent element via attributes.
+- **Controllers are NOT global services.** They attach to elements. Use `services/` or `utils/` for shared logic.
+- **@request/@respond is NOT a service bus.** Element-to-controller communication only.
+- **Context must be mutated then signaled.** Change `ctx.application.theme = 'dark'`, then call `ctx.update()`.
+- **@property is for parent-provided attributes.** Internal state should be plain class fields.
+- **Events use kebab-case:** `count-changed`, not `countChanged`. Access via `e.detail`.
+- **No `reflect` option.** Attributes sync automatically for `:host([attr])` CSS selectors.
 
 ## Build Commands
 
@@ -181,4 +236,5 @@ router.navigate('/users/123')
 npm run dev        # Dev server
 npm run build      # Production build
 npm run type-check # TypeScript check
+npm run test       # Run tests (if configured)
 ```

package/bin/templates/pwa/README.md

@@ -4,14 +4,21 @@ A Progressive Web App (PWA) built with [Snice](https://github.com/sniceio/snice)
 
 ## Features
 
-- ⚡ **JWT Authentication** - Token-based auth with automatic refresh
-- 🔒 **Protected Routes** - Route guards for authenticated pages
-- 🎯 **Middleware Pattern** - Composable fetch middleware (auth, error, retry)
-- 📱 **PWA Ready** - Service worker, offline support, installable
-- 🔔 **Live Notifications** - WebSocket daemon for real-time updates
-- 🎨 **Snice Components** - Pre-built UI components
-- 📦 **Type-Safe** - Full TypeScript support
-- 🚀 **Fast Build** - Vite + SWC for blazing fast dev and builds
+- **JWT Authentication** - Token-based auth with automatic refresh and middleware
+- **Protected Routes** - Guards with `(context, params) => boolean` signature
+- **Middleware Pattern** - Composable fetch middleware (auth headers, error handling, retry)
+- **PWA Ready** - Service worker, offline support, installable
+- **Live Notifications** - WebSocket daemon with real-time updates and badge counter
+- **Theme Switching** - Light, dark, and system theme with persistence
+- **Data Listing** - Filterable table with debounced search
+- **Controllers** - Notification controller with `@respond` pattern
+- **Native Element Controllers** - Attach controllers to any HTML element
+- **Imperative Rendering** - `@render({ once: true })` with `@watch` + `@query`
+- **Observers** - `@observe('resize')`, `@observe('media:(...)')` for responsive behavior
+- **Keyboard Shortcuts** - Ctrl+S to save settings, Ctrl+Backspace to clear notifications, Escape to close menus
+- **Snice Components** - Pre-built UI (cards, alerts, avatars, switches, badges, dividers, tabs)
+- **Type-Safe** - Full TypeScript support
+- **Fast Build** - Vite + SWC
 
 ## Getting Started
 
@@ -41,97 +48,69 @@ npm run type-check
 
 ```
 src/
-  utils/          # Pure helper functions
+  components/     # @element decorated UI components
+    app-header.ts       # Nav bar with user avatar, menu, @context
+    search-bar.ts       # Debounced search with @on('input', { debounce: 300 })
+    notification-badge.ts # Imperative rendering with @render({ once: true })
+  controllers/    # @controller decorated behavior modules
+    notification-controller.ts  # @respond('get-notifications')
+  pages/          # Routable pages (@page decorator)
+    login.ts            # Login form with @respond('login-user')
+    dashboard.ts        # Stats, @observe('media:...'), notification counter
+    profile.ts          # User info, @dispatch, @observe, <case>/<when>
+    notifications.ts    # Live feed, filters, @watch, keyboard shortcuts
+    settings.ts         # Theme toggle, form bindings, @context, Ctrl+S save
+    data.ts             # Data table, search-bar, @observe('resize'), filters
   services/       # Business logic (auth, storage, jwt)
-  middleware/     # Fetch middleware (auth, error, retry)
+  middleware/      # Fetch middleware (auth, error, retry)
   daemons/        # Lifecycle-managed classes (notifications WebSocket)
   guards/         # Route guards (auth)
   types/          # TypeScript types
-  pages/          # Routable pages (@page decorator)
-  styles/         # Global styles
-```
-
-## Architecture Patterns
-
-### Context-Aware Fetcher
-
-Built-in middleware system with context access:
-
-```typescript
-// fetcher.ts - Setup
-import { ContextAwareFetcher } from 'snice';
-
-const fetcher = new ContextAwareFetcher();
-fetcher.use('request', authMiddleware);
-fetcher.use('response', errorMiddleware);
-
-// Middleware with context access
-export async function authMiddleware(
-  this: Context,
-  request: Request,
-  next: () => Promise<Response>
-): Promise<Response> {
-  const token = getToken();
-  if (token) {
-    request.headers.set('Authorization', `Bearer ${token}`);
-  }
-  return next();
-}
-
-// Usage in pages via ctx.fetch()
-async loadData() {
-  const response = await this.ctx.fetch('/api/data');
-  const data = await response.json();
-}
-```
-
-### Daemons for Lifecycle Management
-
-Use daemons for resources that need start/stop/dispose:
-
-```typescript
-const daemon = getNotificationsDaemon();
-daemon.start(); // In main.ts
-
-// In component
-const unsubscribe = daemon.subscribe((notification) => {
-  console.log(notification);
-});
-
-// Cleanup
-unsubscribe();
-```
-
-### Route Guards
-
-Protect routes with guards:
-
-```typescript
-import { authGuard } from './guards/auth';
-
-@page({
-  tag: 'dashboard-page',
-  routes: ['/dashboard'],
-  guards: [authGuard]
-})
-export class DashboardPage extends HTMLElement {
-  // ...
-}
+  styles/         # Global styles with dark/light theme support
 ```
 
-### Context for Global State
-
-Access shared state via context:
-
-```typescript
-import type { Principal } from './types/auth';
-
-@context()
-handleContext(ctx: Context) {
-  const principal = ctx.application.principal as Principal | undefined;
-  this.user = principal?.user;
-}
-```
+## Snice Features Demonstrated
+
+### Decorators
+
+| Decorator | Used In |
+|-----------|---------|
+| `@page` | All pages |
+| `@element` | app-header, search-bar, notification-badge |
+| `@controller` | notification-controller |
+| `@property` | Multiple components |
+| `@render` | All components |
+| `@render({ once: true })` | notification-badge (imperative) |
+| `@styles` | All components |
+| `@context` | dashboard, profile, settings, app-header |
+| `@watch` | notification-badge, notifications page |
+| `@query` | notification-badge, app-header |
+| `@on` | search-bar, settings, notifications, app-header |
+| `@dispatch` | search-bar, profile, settings, app-header |
+| `@respond` | login page, notification-controller |
+| `@observe` | dashboard (media), profile (media), data (resize) |
+| `@ready` | dashboard, notifications, notification-badge |
+| `@dispose` | dashboard, notifications, notification-badge |
+
+### Template Features
+
+| Feature | Used In |
+|---------|---------|
+| `<if>` conditionals | dashboard, notifications, data, app-header |
+| `<case>/<when>/<default>` | profile, notifications, data |
+| `.prop` binding | search-bar, settings |
+| `?attr` boolean binding | settings (switch) |
+| `@event` binding | All components |
+| `@keydown:modifier` | settings (Ctrl+S), app-header (Escape), notifications (Ctrl+Backspace) |
+| `key` attribute | notifications list, data table |
+
+### Architecture Patterns
+
+- **Context-Aware Fetcher** with auth, error, and retry middleware
+- **Daemons** for WebSocket lifecycle management
+- **Guards** with `(context, params) => boolean` signature
+- **Request/Response** for element-to-controller communication
+- **Native Element Controllers** via `useNativeElementControllers()`
 
 ## Customization
 
@@ -146,7 +125,6 @@ export async function login(credentials: LoginCredentials) {
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify(credentials)
   });
-
   const data = await response.json();
   setToken(data.token);
   setUser(data.user);