@mhmo91/schmancy 0.5.45 → 0.5.47

package/ai/content-drawer.md

@@ -1,198 +1,139 @@
 # Content Drawer
 
-Responsive sliding panel that automatically switches between push and overlay modes based on screen size.
-
-## Overview
-
-The content drawer provides a responsive panel system that adapts to different screen sizes:
-- **Large screens**: Panel pushes content aside (push mode)
-- **Small screens**: Panel overlays content (overlay mode)
-- **Automatic switching**: Responds to screen width changes
-
-## Components
-
-```js
-// Main container that manages responsive behavior
-<schmancy-content-drawer
-  ?open="${boolean}"           // Controls drawer visibility (auto-managed)
-  .minWidth="${{main: 360, sheet: 576}}"  // Min widths for main and sheet
->
-  <schmancy-content-drawer-main
-    minWidth="${number}"        // Minimum width for main content (default: 360px)
-  >
-    // Main content area
-  </schmancy-content-drawer-main>
+Responsive sliding panel that switches between push mode (desktop) and overlay mode (mobile).
 
-  <schmancy-content-drawer-sheet
-    minWidth="${number}"        // Minimum width for sheet (default: 576px)
-  >
-    <section slot="placeholder">
-      // Optional placeholder content when sheet is empty
-    </section>
-  </schmancy-content-drawer-sheet>
-</schmancy-content-drawer>
+## Service API
+
+```typescript
+import { schmancyContentDrawer } from '@schmancy/content-drawer'
 ```
 
-## Responsive Behavior
+### `push(options)`
 
-The drawer automatically switches between modes based on viewport width:
-- **Push mode**: When `viewport >= main.minWidth + sheet.minWidth`
-  - Sheet panel appears inline beside main content
-  - Content is pushed to make room for the sheet
-  - Sheet remains visible
-- **Overlay mode**: When `viewport < main.minWidth + sheet.minWidth`
-  - Sheet overlays on top of main content
-  - Opens/closes via the service API
-  - Shows as a modal sheet
+Push a component to the drawer. Component types are passed directly to the area router - no resolution happens in the drawer service.
 
-## Service API
+**Parameters:**
 
-```js
-import { schmancyContentDrawer } from '@schmancy/content-drawer'
+- `options: ComponentType | DrawerPushOptions`
+
+**ComponentType formats (matches area router API):**
 
-// Push API - Recommended for dynamic content rendering
-schmancyContentDrawer.push(component)
-// component can be:
-// - string: 'demo-button' (HTML tag name)
-// - HTMLElement: new DemoButton() (component instance)
-// - Factory: () => new DemoButton() (factory function)
-// - Async: async () => import('./button').then(m => new m.default())
+- `string` - HTML tag name (e.g., `'demo-button'`)
+- `HTMLElement` - Component instance (e.g., `new MyComponent()`)
+- `CustomElementConstructor` - Component class (e.g., `UserDetails`)
+- `LazyComponent<any>` - Lazy import (e.g., `lazy(() => import('./my-component'))`)
 
-// Legacy render API (for backward compatibility)
-schmancyContentDrawer.render(ref, component, title?)
+**DrawerPushOptions object:**
 
-// Dismiss drawer (note: method has typo in implementation)
-schmancyContentDrawer.dimiss(ref)
+```typescript
+{
+  component: ComponentType
+  props?: Record<string, unknown>    // Properties to set on component
+  state?: Record<string, unknown>    // Router state (push mode only)
+  params?: Record<string, unknown>   // Router params (push mode only)
+}
 ```
 
-### Push API Features
+**Usage:**
 
-The `push` API automatically handles re-rendering when the same component instance is pushed with updated properties:
+```typescript
+// String tag
+schmancyContentDrawer.push('demo-button')
 
-```js
-// Create a component instance
-const myComponent = new MyComponent()
-myComponent.variant = 'filled'
+// HTMLElement instance
+schmancyContentDrawer.push(new UserDetail())
 
-// Push it to drawer
-schmancyContentDrawer.push(myComponent)
+// Component class (constructor)
+schmancyContentDrawer.push(UserDetails)
 
-// Later, update properties and push again
-myComponent.variant = 'outlined'
-schmancyContentDrawer.push(myComponent) // Automatically re-renders with new properties
-```
+// With options object (recommended)
+schmancyContentDrawer.push({
+  component: UserDetails,
+  props: { userId: '123' }
+})
 
-## Examples
+// Lazy import
+import { lazy } from '@schmancy/area'
+schmancyContentDrawer.push(lazy(() => import('./my-component')))
+```
 
-### 1. Basic Responsive Drawer
+### `render(ref, component, title?)`
 
-```html
-<schmancy-content-drawer>
-  <schmancy-content-drawer-main>
-    <schmancy-list class="p-0">
-      <schmancy-list-item @click=${() => {
-        schmancyContentDrawer.push('demo-button')
-      }}>
-        Show Button Demo
-      </schmancy-list-item>
-      <schmancy-list-item @click=${() => {
-        schmancyContentDrawer.push(new TypographyDemo())
-      }}>
-        Show Typography Demo
-      </schmancy-list-item>
-    </schmancy-list>
-  </schmancy-content-drawer-main>
+Lower-level API for rendering. Use `push()` instead for most cases.
 
-  <schmancy-content-drawer-sheet class="px-4">
-    <section slot="placeholder">
-      <schmancy-typography>Select an item to view</schmancy-typography>
-    </section>
-  </schmancy-content-drawer-sheet>
-</schmancy-content-drawer>
-```
+**Parameters:**
 
-### 2. Using Different Push API Patterns
+- `ref: Element | Window` - Element to dispatch events from
+- `component: HTMLElement` - Component instance
+- `title?: string` - Optional title
 
-```js
-// String tag name
-schmancyContentDrawer.push('demo-button')
+```typescript
+schmancyContentDrawer.render(window, new UserDetail(), 'User Details')
+```
 
-// Component instance
-const button = new DemoButton()
-button.variant = 'filled'
-schmancyContentDrawer.push(button)
+### `dimiss(ref)`
 
-// Factory function with custom setup
-schmancyContentDrawer.push(() => {
-  const comp = new MyComponent()
-  comp.setAttribute('theme', 'dark')
-  return comp
-})
+Closes the drawer. *Note: typo in actual API*
 
-// Async module loading
-schmancyContentDrawer.push(async () => {
-  const module = await import('./lazy-component')
-  return new module.default()
-})
+```typescript
+schmancyContentDrawer.dimiss(window)
 ```
 
-### 3. Configuring Minimum Widths
+## Component Structure
 
 ```html
 <schmancy-content-drawer>
-  <!-- Main content requires at least 400px -->
-  <schmancy-content-drawer-main minWidth="400">
-    <div>Main application content</div>
+  <schmancy-content-drawer-main>
+    <!-- Main content area -->
   </schmancy-content-drawer-main>
 
-  <!-- Sheet requires at least 600px -->
-  <schmancy-content-drawer-sheet minWidth="600">
-    <div>Detail panel content</div>
+  <schmancy-content-drawer-sheet>
+    <section slot="placeholder">
+      <!-- Empty state content -->
+    </section>
   </schmancy-content-drawer-sheet>
 </schmancy-content-drawer>
 ```
 
-## Integration with Schmancy Systems
-
-The content drawer integrates with:
-- **Area router**: In push mode, uses `schmancy-area` for content routing
-- **Sheet system**: In overlay mode, uses the schmancy sheet for modal presentation
-- **Grid system**: Uses `schmancy-grid` for responsive layout
-
-## CSS Styling
-
-The component uses standard Tailwind classes for styling:
-- Main container uses `overflow-scroll` for scrollable content
-- Sheet positioning handled automatically based on mode
-- Animations use Web Animations API (500ms duration)
-
-## Common Patterns
-
-**Master-Detail View**: List of items in main, details in sheet
-```js
-// In main area - list of items
-<schmancy-list-item @click=${() => {
-  schmancyContentDrawer.push(new ItemDetail(item))
-}}>
-  ${item.name}
-</schmancy-list-item>
-```
-
-**Settings Panel**: Configuration options in the sheet
-```js
-// Push settings component
-schmancyContentDrawer.push(new SettingsPanel())
-```
-
-**Navigation Drawer**: Navigation links in main, content in sheet
-```js
-// Navigation item clicks update sheet content
-schmancyContentDrawer.push(() => import(`./pages/${page}`))
+## Properties
+
+- `minWidth: {main: number, sheet: number}` - Minimum widths (default: `{main: 360, sheet: 576}`)
+- `open: 'open' | 'close'` - Auto-managed based on mode
+- `mode: 'push' | 'overlay'` - Auto-switches at 936px breakpoint
+
+## How It Works
+
+The drawer service is a simple passthrough to the area router:
+
+1. **Push mode (desktop)**: Calls `area.push()` with your component
+2. **Overlay mode (mobile)**: Calls `sheet.open()` with your component
+
+Component resolution is handled entirely by the area router - the drawer service just dispatches events.
+
+## Example
+
+```typescript
+html`
+  <schmancy-content-drawer>
+    <schmancy-content-drawer-main>
+      <schmancy-list>
+        ${items.map(item => html`
+          <schmancy-list-item @click=${() => {
+            // Pass component class directly - area router handles instantiation
+            schmancyContentDrawer.push({
+              component: ItemDetail,
+              props: { item }
+            })
+          }}>
+            ${item.name}
+          </schmancy-list-item>
+        `)}
+      </schmancy-list>
+    </schmancy-content-drawer-main>
+
+    <schmancy-content-drawer-sheet>
+      <section slot="placeholder">Select an item</section>
+    </schmancy-content-drawer-sheet>
+  </schmancy-content-drawer>
+`
 ```
-
-## Related Components
-
-- [Sheet](./sheet.md) - Modal sheet component used in overlay mode
-- [Area](./area.md) - Routing system used in push mode
-- [Grid](./grid.md) - Layout system for responsive design
-- [List](./list.md) - List component for navigation items

package/ai/sheet.md

@@ -2,10 +2,7 @@
 
 The sheet component provides a sliding panel overlay that can be used for forms, details views, or any content that needs to be displayed in a drawer-style interface.
 
-**Important Note about Templates**: The sheet service now only accepts HTMLElement components. If you're using Lit's `html` template literals, you need to either:
-1. Create a wrapper element and use innerHTML (for simple content)
-2. Create a custom element class (for complex interactions)
-3. Use the `render` function from Lit to render into a container element
+**Component Resolution**: The sheet service uses the area router for component resolution, supporting the same component types as `area.push()` and `schmancyContentDrawer.push()`.
 
 ```js
 // Import Options
@@ -14,17 +11,22 @@ import { sheet, $sheet } from '@schmancy/index';
 
 // Sheet Service API
 $sheet.open({
-  component: HTMLElement,                  // Content to display (must be an HTMLElement)
+  component: ComponentType,                // Component to display (same types as area router)
   uid?: string,                            // Unique identifier for the sheet
   position?: 'side' | 'bottom',           // Position (default: responsive based on screen size)
   persist?: boolean,                       // Keep sheet in DOM after closing (default: false)
   close?: () => void,                      // Callback when sheet closes
   lock?: boolean,                          // Prevent dismissal via ESC/overlay click (default: false)
-  handleHistory?: boolean,                 // Integrate with browser back button (default: true)
-  title?: string,                          // Sheet title
-  header?: 'hidden' | 'visible'           // Header visibility (default: 'visible')
+  onBeforeOpen?: (component: HTMLElement) => void,  // Called before sheet opens
+  onAfterOpen?: (component: HTMLElement) => void    // Called after sheet opens
 }) -> void
 
+// ComponentType (matches area router):
+// - string - HTML tag name (e.g., 'my-element')
+// - HTMLElement - Component instance (e.g., new MyElement())
+// - CustomElementConstructor - Component class (e.g., MyElement)
+// - LazyComponent<any> - Lazy import (e.g., lazy(() => import('./my-element')))
+
 // Service Methods
 $sheet.dismiss(uid?: string)    // Close specific sheet or most recent if no uid
 $sheet.isOpen(uid: string)      // Check if a sheet is open
@@ -45,9 +47,9 @@ SchmancySheetPosition.Bottom   // Bottom sheet (mobile)
   title="Sheet Title"
   header="visible|hidden"
   @close=${handleClose}>
-  
-  <!-- Main content goes in default slot -->
-  <div>Sheet content goes here</div>
+
+  <!-- Content managed by area router -->
+  <!-- Use sheet.open() to push components -->
 </schmancy-sheet>
 
 // Sheet Header Component
@@ -59,49 +61,32 @@ SchmancySheetPosition.Bottom   // Bottom sheet (mobile)
 
 // Examples
 
-// 1. Basic Sheet with Form - Using a wrapper element for template content
+// 1. HTMLElement Instance (backward compatible)
 const formContent = document.createElement('div');
 formContent.className = 'p-6';
-formContent.innerHTML = `
-  <schmancy-typography type="headline" token="md" class="mb-4">
-    User Details
-  </schmancy-typography>
-  <schmancy-form>
-    <schmancy-input label="Name" value="John Doe"></schmancy-input>
-    <schmancy-input label="Email" value="john@example.com"></schmancy-input>
-    <schmancy-button type="submit">Save</schmancy-button>
-  </schmancy-form>
-`;
+formContent.innerHTML = '<h1>User Details</h1>';
+$sheet.open({ component: formContent });
 
-$sheet.open({
-  component: formContent,
-  title: "Edit User"
-});
+// 2. Component Class (NEW!)
+class UserDetails extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = '<div>User details content</div>';
+  }
+}
+customElements.define('user-details', UserDetails);
+$sheet.open({ component: UserDetails });
+
+// 3. String Tag (NEW!)
+$sheet.open({ component: 'user-details' });
 
-// 2. Using HTMLElement Component
-const myComponent = document.createElement('my-custom-element');
+// 4. Lazy Import (NEW!)
+import { lazy } from '@schmancy/area';
 $sheet.open({
-  component: myComponent,
-  uid: 'my-custom-element', // Will reuse existing sheet if already open
-  persist: true,            // Keep in DOM after closing
-  title: "Custom Component"
+  component: lazy(() => import('./components/user-details')),
+  uid: 'user-details-sheet'
 });
 
-// 3. Sheet with Lock (using Lit render for interactive content)
-import { render, html } from 'lit';
-
-const lockContent = document.createElement('div');
-render(html`
-  <div class="p-6">
-    <schmancy-typography type="body" token="lg">
-      This action requires confirmation. Please complete the form.
-    </schmancy-typography>
-    <schmancy-button @click=${() => $sheet.dismiss()}>
-      Complete Action
-    </schmancy-button>
-  </div>
-`, lockContent);
-
+// 5. With Options
 $sheet.open({
   component: lockContent,
   lock: true,