@mhmo91/schmancy 0.2.194 → 0.2.195

package/ai/area.md

@@ -1,125 +1,205 @@
-# Schmancy Area - AI Reference
+# Schmancy Area
 
-```js
-// Area Router Component
-<schmancy-area
-  name="root"
+Schmancy Area is a lightweight, reactive routing and state management system for web components with RxJS integration.
+
+## Component Usage
+
+```html
+<!-- Basic router outlet -->
+<schmancy-area 
+  name="main"
   default="home-component">
 </schmancy-area>
+```
 
-// Area Service
+## Properties
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `name` | `string` | **Required**. Unique identifier for this router outlet. |
+| `default` | `string \| Promise<NodeModule> \| CustomElementConstructor \| TemplateResult` | Default component to display if none is specified. |
+
+## Service API
+
+```ts
+// Import the area service
 import { area } from '@schmancy/area';
 
 // Navigation methods
 area.push({
-  component: UserProfileComponent,  // Component constructor, string tag name, or element instance
-  area: 'root',                     // Target area name
-  state?: { view: 'profile' },      // Optional state object
-  params?: { id: '123' },           // Optional parameters
-  historyStrategy: 'push'           // 'push', 'replace', 'pop', 'silent'
+  component: 'user-profile',      // Component constructor, string tag name, or element instance
+  area: 'main',                   // Target area name
+  state?: { view: 'profile' },    // Optional state object
+  params?: { id: '123' },         // Optional parameters
+  historyStrategy: 'push',        // 'push', 'replace', 'pop', 'silent'
+  clearQueryParams?: ['sort']     // Clear specific query params
 });
 
-area.pop('sidebar');                // Remove an area
+area.pop('sidebar');              // Remove an area
 
-// Subscription methods
-area.on(areaName, skipCurrent?) -> Observable<ActiveRoute>
-area.all(skipCurrent?) -> Observable<Map<string, ActiveRoute>>
-area.getState<T>(areaName) -> Observable<T>
-area.params<T>(areaName) -> Observable<T>
-area.param<T>(areaName, key) -> Observable<T>
+// Subscription methods (return RxJS Observables)
+area.on(areaName, skipCurrent?)   // Subscribe to an area
+area.all(skipCurrent?)            // Subscribe to all areas 
+area.getState<T>(areaName)        // Get typed state from an area
+area.params<T>(areaName)          // Get typed params from an area
+area.param<T>(areaName, key)      // Get a specific param value
+```
 
-// Event name format for DOM event listeners
-schmancy-area-${areaName}-changed
+## Examples
 
-// Examples
-// 1. Basic navigation
+### Basic Navigation
+
+```ts
+// Navigate to a component
 area.push({
   component: 'home-page',
-  area: 'main',
-  historyStrategy: 'push'
+  area: 'main'
 });
 
-// 2. Navigation with params
+// Navigate with parameters and state
 area.push({
   component: ProductDetailComponent,
   area: 'main',
   params: { productId: '12345' },
+  state: { showReviews: true },
   historyStrategy: 'push'
 });
+```
 
-// 3. Subscribe to an area
+### Multiple Independent Areas
+
+```ts
+// Update multiple areas independently
+area.push({ component: 'product-list', area: 'main' });
+area.push({ component: 'filter-panel', area: 'sidebar' });
+
+// Open a modal dialog
+area.push({ 
+  component: 'dialog-component', 
+  area: 'modal',
+  params: { id: '123' }
+});
+
+// Close a modal
+area.pop('modal');
+```
+
+### Reactive Subscriptions
+
+```ts
+// Subscribe to area changes
 area.on('main').subscribe(route => {
-  console.log(`Component: ${route.component}, Params: ${route.params}`);
+  console.log(`Component: ${route.component}`);
+  console.log(`Params:`, route.params);
+});
+
+// Type-safe state and params
+interface UserState { name: string; role: string; }
+interface UserParams { id: string; tab?: string; }
+
+area.getState<UserState>('user').subscribe(state => {
+  updateUserInfo(state.name, state.role);
 });
 
-// 4. Get and react to a specific param
+area.params<UserParams>('user').subscribe(params => {
+  fetchUser(params.id);
+  setActiveTab(params.tab || 'profile');
+});
+
+// Get a specific parameter
 area.param<string>('product', 'productId').subscribe(id => {
   fetchProductDetails(id);
 });
+```
+
+### DOM Events
 
-// 5. DOM event listening (non-RxJS approach)
+Areas also dispatch DOM events for non-RxJS consumers:
+
+```js
+// Format: schmancy-area-${areaName}-changed
 window.addEventListener('schmancy-area-main-changed', event => {
-  const { component, params } = event.detail;
-  updateUI(component, params);
+  const { component, params, state } = event.detail;
+  updateUI(component, params, state);
 });
 ```
 
-## Related Components
-- **[Teleport](./teleport.md)**: Can be used with Area for advanced component transportation
-- **[Store](./store.md)**: Complements Area for more complex state management
-- **[Layout](./layout.md)**: Often used as a container for areas
+## Advanced Usage
 
-## Technical Details
+### Lazy Loading Components
 
-### ActiveRoute Interface
-```typescript
-interface ActiveRoute {
-  component: string;        // Component tag name
-  area: string;             // Area name
-  state?: Record<string, unknown>;  // Optional state
-  params?: Record<string, unknown>; // Optional parameters
-}
+```ts
+area.push({
+  component: import('./components/heavy-dashboard.js'),
+  area: 'main'
+});
+```
+
+### Navigation Guards
+
+```ts
+import { switchMap, EMPTY, of } from 'rxjs';
+
+area.on('protected-area').pipe(
+  switchMap(route => {
+    if (!isAuthenticated()) {
+      area.push({ component: 'login-page', area: 'main' });
+      return EMPTY;
+    }
+    return of(route);
+  })
+).subscribe(handleProtectedRoute);
 ```
 
-### RouteAction Interface
-```typescript
+### Component Reloading Pattern
+
+When updating the same component with different parameters, use this pattern to ensure re-rendering:
+
+```ts
+// First push to the main routing area to force component re-creation
+area.push({
+  area: 'main-area',
+  component: 'user-profile',
+  params: { userId: '456' },
+  historyStrategy: 'push'
+});
+
+// Then update any subscription areas with the silent history strategy
+area.push({
+  area: 'user-area',
+  component: 'user-profile',
+  params: { userId: '456' },
+  historyStrategy: 'silent' // Don't create history entry
+});
+```
+
+This works around the `distinctUntilChanged` behavior in the Area component that compares only component names, not params.
+
+## Related Components
+
+- **[Store](./store.md)** - For more complex state management
+- **[Layout](./layout.md)** - For responsive layouts
+- **[Teleport](./teleport.md)** - For advanced component transportation
+- **[Sheet](./sheet.md)** - For modal overlays
+
+## Type Definitions
+
+```ts
+// Route Action - used for navigation
 interface RouteAction {
-  component: CustomElementConstructor | string | HTMLElement;
+  component: CustomElementConstructor | string | HTMLElement | Promise<NodeModule>;
   area: string;
   state?: Record<string, unknown>;
   params?: Record<string, unknown>;
   historyStrategy?: 'push' | 'replace' | 'pop' | 'silent';
   clearQueryParams?: string[] | null;
 }
-```
 
-### Common Use Cases
-
-1. **Single Page Applications**: Define multiple areas for different sections of your app
-   ```html
-   <schmancy-area name="main"></schmancy-area>
-   <schmancy-area name="sidebar"></schmancy-area>
-   <schmancy-area name="modal"></schmancy-area>
-   ```
-
-2. **Typed Params and State**: Use TypeScript generics for type safety
-   ```typescript
-   interface UserParams { id: string; tab?: string; }
-   area.params<UserParams>('user').subscribe(params => {
-     fetchUser(params.id);
-     setActiveTab(params.tab || 'profile');
-   });
-   ```
-
-3. **Navigation Guards**: Implement navigation guards with RxJS operators
-   ```typescript
-   area.on('protected').pipe(
-     switchMap(route => {
-       if (!isAuthenticated()) {
-         area.push({ component: 'login-page', area: 'main' });
-         return EMPTY;
-       }
-       return of(route);
-     })
-   ).subscribe(handleProtectedRoute);
-   ```
+// Active Route - current state of an area
+interface ActiveRoute {
+  component: string;
+  area: string;
+  state?: Record<string, unknown>;
+  params?: Record<string, unknown>;
+}
+```

package/ai/content-drawer.md

@@ -0,0 +1,190 @@
+# Content Drawer
+
+Sliding panel system for navigation, overlays, and responsive layouts.
+
+## Components
+
+```js
+// Main container that manages drawer behavior
+<schmancy-content-drawer
+  ?open="${boolean}"           // Controls drawer visibility
+  position="left|right|top|bottom"  // Drawer position (default: left)
+  variant="standard|modal|persistent"  // Behavior type
+  breakpoint="1024px"          // Responsive breakpoint
+  ?backdrop="${boolean}"       // Show backdrop when open
+>
+  <schmancy-content-drawer-main>
+    // Main content that shifts when drawer opens
+  </schmancy-content-drawer-main>
+  
+  <schmancy-content-drawer-sheet
+    width="256px"              // Width for left/right drawers
+    height="auto"              // Height for top/bottom drawers
+    offset="0"                 // Offset for nested drawers
+  >
+    // Drawer content
+  </schmancy-content-drawer-sheet>
+</schmancy-content-drawer>
+```
+
+## Context API
+
+```js
+import { contentDrawerContext } from '@schmancy/content-drawer'
+
+// Create drawer controller
+const drawer = contentDrawerContext.create('drawer-id')
+
+// Control methods
+drawer.open()
+drawer.close() 
+drawer.toggle()
+drawer.lock()      // Prevent closing
+drawer.unlock()
+drawer.setPersistent(boolean)
+
+// State access
+drawer.isOpen -> boolean
+drawer.state$ -> Observable<DrawerState>
+
+// Events
+@drawer-opened
+@drawer-closed
+@drawer-toggled -> { open: boolean }
+@before-open
+@before-close
+```
+
+## Examples
+
+### 1. Basic Navigation Drawer
+```html
+<schmancy-content-drawer ?open="${drawerOpen}">
+  <schmancy-content-drawer-main>
+    <button @click="${() => drawerOpen = !drawerOpen}">Menu</button>
+    <main>App content</main>
+  </schmancy-content-drawer-main>
+  
+  <schmancy-content-drawer-sheet width="280px">
+    <nav>
+      <a href="/home">Home</a>
+      <a href="/about">About</a>
+    </nav>
+  </schmancy-content-drawer-sheet>
+</schmancy-content-drawer>
+```
+
+### 2. Bottom Sheet
+```html
+<schmancy-content-drawer 
+  ?open="${sheetOpen}"
+  position="bottom"
+  @drawer-closed="${() => sheetOpen = false}"
+>
+  <schmancy-content-drawer-main>
+    <button @click="${() => sheetOpen = true}">Show Options</button>
+  </schmancy-content-drawer-main>
+  
+  <schmancy-content-drawer-sheet height="auto" max-height="50vh">
+    <div class="sheet-handle"></div>
+    <h3>Select Option</h3>
+    <schmancy-list>
+      <schmancy-list-item>Option 1</schmancy-list-item>
+      <schmancy-list-item>Option 2</schmancy-list-item>
+    </schmancy-list>
+  </schmancy-content-drawer-sheet>
+</schmancy-content-drawer>
+```
+
+### 3. Persistent Sidebar
+```js
+// Responsive persistent drawer
+const drawer = contentDrawerContext.create('sidebar')
+
+// Auto-persist on large screens
+const mediaQuery = window.matchMedia('(min-width: 1024px)')
+drawer.setPersistent(mediaQuery.matches)
+mediaQuery.addEventListener('change', e => drawer.setPersistent(e.matches))
+```
+
+```html
+<schmancy-content-drawer
+  .context="${drawer}"
+  variant="persistent"
+  breakpoint="1024px"
+>
+  <schmancy-content-drawer-main>
+    <schmancy-app-bar>
+      <schmancy-icon-button 
+        icon="menu"
+        @click="${() => drawer.toggle()}"
+      ></schmancy-icon-button>
+    </schmancy-app-bar>
+    <main>Dashboard content</main>
+  </schmancy-content-drawer-main>
+  
+  <schmancy-content-drawer-sheet width="240px">
+    <aside>Sidebar content</aside>
+  </schmancy-content-drawer-sheet>
+</schmancy-content-drawer>
+```
+
+### 4. Nested Drawers
+```js
+const mainDrawer = contentDrawerContext.create('main')
+const subDrawer = contentDrawerContext.create('sub')
+```
+
+```html
+<schmancy-content-drawer .context="${mainDrawer}">
+  <schmancy-content-drawer-main>
+    <!-- Nested drawer container -->
+    <schmancy-content-drawer .context="${subDrawer}">
+      <schmancy-content-drawer-main>
+        <button @click="${() => mainDrawer.open()}">Menu</button>
+      </schmancy-content-drawer-main>
+      
+      <!-- Sub drawer -->
+      <schmancy-content-drawer-sheet width="280px" offset="240px">
+        <button @click="${() => subDrawer.close()}">Back</button>
+        <div>Sub menu content</div>
+      </schmancy-content-drawer-sheet>
+    </schmancy-content-drawer>
+  </schmancy-content-drawer-main>
+  
+  <!-- Main drawer -->
+  <schmancy-content-drawer-sheet width="240px">
+    <button @click="${() => subDrawer.open()}">Open Submenu</button>
+    <div>Main menu content</div>
+  </schmancy-content-drawer-sheet>
+</schmancy-content-drawer>
+```
+
+## CSS Variables
+
+```css
+schmancy-content-drawer {
+  --drawer-width: 256px;
+  --drawer-background: var(--md-sys-color-surface);
+  --drawer-shadow: 0 8px 10px -5px rgba(0,0,0,0.2);
+  --drawer-transition-duration: 250ms;
+  --drawer-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+  --backdrop-color: rgba(0, 0, 0, 0.5);
+  --drawer-z-index: 200;
+}
+```
+
+## Related Components
+
+- [Sheet](./sheet.md) - Simpler sheet component for modals
+- [Navigation Drawer](./nav-drawer.md) - Specialized navigation component
+- [Dialog](./dialog.md) - Modal dialogs
+- [Layout](./layout.md) - Layout utilities
+
+## Common Patterns
+
+**Command Palette**: Top drawer with search input
+**Help Panel**: Right drawer with contextual help
+**Mobile Menu**: Left drawer for navigation
+**Action Sheet**: Bottom drawer for mobile actions
+**Settings Panel**: Persistent right drawer

package/ai/dialog.md

@@ -27,6 +27,7 @@ $dialog.confirm({
   confirmText?,
   cancelText?,
   variant?: "default"|"danger",
+  confirmColor?: "primary"|"error"|"warning"|"success",  // Button color for confirm action
   position?: {x,y}|MouseEvent|TouchEvent,
   width?: string,
   content?: TemplateResult|HTMLElement|Function,
@@ -85,6 +86,15 @@ const confirmed = await $dialog.confirm({
   position: event
 });
 
+// Confirmation with colored button
+const confirmed = await $dialog.confirm({
+  title: "Delete Transaction",
+  message: `Are you sure you want to delete this transaction of ${amount} units?`,
+  confirmText: "Delete",
+  cancelText: "Cancel",
+  confirmColor: "error",  // Makes confirm button red
+});
+
 // Dialog with custom content
 const result = await $dialog.component(html`
   <div>

package/ai/index.md

@@ -6,6 +6,7 @@ This directory contains concise reference documentation for the Schmancy compone
 
 - [Area](./area.md) - Routing and subscription API for application areas
 - [Button](./button.md) - Primary, secondary, and tertiary buttons with various states
+- [Content Drawer](./content-drawer.md) - Sliding panel system for navigation and overlays
 - [Dialog](./dialog.md) - Modal dialog boxes for confirmations and custom content
 - [Form](./form.md) - Form containers with validation capabilities
 - [Input](./input.md) - Text input fields with various types and features

package/ai/table.md

@@ -50,6 +50,35 @@
   </tbody>
 </schmancy-table>
 
+// Data Table with programmatic columns and custom sorting
+<schmancy-table
+  .columns=${[
+    { 
+      name: 'Name', 
+      key: 'name', 
+      sortable: true 
+    },
+    { 
+      name: 'Date Joined', 
+      key: 'dateJoined', 
+      sortable: true,
+      // Custom sort by Unix timestamp
+      value: (item) => new Date(item.dateJoined).getTime()
+    },
+    { 
+      name: 'Profile Completion', 
+      key: 'profile',
+      sortable: true,
+      // Sort by completion percentage 
+      value: (item) => item.profile.completionPercentage,
+      // Display with custom rendering
+      render: (item) => html`${item.profile.completionPercentage}%`
+    }
+  ]}
+  .data=${users}
+  sortable>
+</schmancy-table>
+
 // Table Properties
 striped: boolean          // Apply alternating row colors
 bordered: boolean         // Add borders to cells
@@ -60,6 +89,15 @@ sortable: boolean         // Enable column sorting
 selectable: boolean       // Enable row selection
 loading: boolean          // Show loading state
 
+// Column Configuration Properties (when using programmatic columns)
+name: string              // Display name for the column header
+key?: keyof T             // Object property to access for this column
+align?: string            // Text alignment ('left', 'right', 'center')
+weight?: string           // Font weight ('normal', 'bold')
+render?: function         // Custom render function for complex content: (item) => TemplateResult
+sortable?: boolean        // Whether this column supports sorting
+value?: function          // Custom value function for sorting: (item) => any
+
 // Row Properties
 selected: boolean         // Whether the row is selected
 data: object              // Data object for the row
@@ -105,7 +143,7 @@ data: object              // Data object for the row
   </tbody>
 </schmancy-table>
 
-// Sortable table
+// Sortable table - standard HTML structure
 <schmancy-table
   sortable
   @sort=${(e) => sortData(e.detail.column, e.detail.direction)}>
@@ -142,6 +180,66 @@ data: object              // Data object for the row
   </tbody>
 </schmancy-table>
 
+// Sortable table - programmatic with custom value functions
+<schmancy-table
+  .data=${userData}
+  .columns=${[
+    {
+      name: 'ID', 
+      key: 'id', 
+      sortable: true
+    },
+    {
+      name: 'User', 
+      key: 'user', 
+      sortable: true,
+      // Sort by last name for "user" column
+      value: (item) => item.user.lastName,
+      // Custom render function for complex data
+      render: (item) => html`
+        <div class="flex items-center">
+          <schmancy-avatar src=${item.user.avatar} size="sm"></schmancy-avatar>
+          <div class="ml-2">
+            <div>${item.user.firstName} ${item.user.lastName}</div>
+            <div class="text-sm text-gray-500">${item.user.email}</div>
+          </div>
+        </div>
+      `
+    },
+    {
+      name: 'Status', 
+      key: 'status', 
+      sortable: true,
+      // Sort by status priority (numeric value) but display text
+      value: (item) => statusPriorities[item.status] || 0,
+      render: (item) => html`
+        <schmancy-badge variant=${getStatusVariant(item.status)}>
+          ${item.status}
+        </schmancy-badge>
+      `
+    },
+    {
+      name: 'Created', 
+      key: 'createdAt', 
+      sortable: true,
+      // Sort by timestamp but display formatted date
+      value: (item) => new Date(item.createdAt).getTime(),
+      render: (item) => formatDate(item.createdAt)
+    },
+    {
+      name: 'Actions',
+      render: (item) => html`
+        <div class="flex space-x-2">
+          <schmancy-icon-button icon="edit" @click=${() => editItem(item)}></schmancy-icon-button>
+          <schmancy-icon-button icon="delete" @click=${() => deleteItem(item)}></schmancy-icon-button>
+        </div>
+      `
+    }
+  ]}
+  sortable
+  @sort=${(e) => console.log('Sort changed:', e.detail)}>
+</schmancy-table>
+
 // Selectable table
 <schmancy-table
   selectable

package/dist/_headers

@@ -0,0 +1,2 @@
+/*
+  Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-eval' 'unsafe-inline' https://cdn.jsdelivr.net/npm/ https://www.claudeusercontent.com https://cdnjs.cloudflare.com https://cdn.jsdelivr.net/pyodide/; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net/npm/; font-src 'self' data: https://cdn.jsdelivr.net/npm/; img-src 'self' data: https: blob:; connect-src 'self' https: