@mhmo91/schmancy 0.5.45 → 0.5.46

package/ai/content-drawer.md

@@ -1,198 +1,128 @@
 # 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. Automatically resolves different component types.
 
-## Service API
+**Parameters:**
 
-```js
-import { schmancyContentDrawer } from '@schmancy/content-drawer'
+- `options: ComponentType | DrawerPushOptions`
+
+**ComponentType formats:**
 
-// 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()`)
+- `() => HTMLElement` - Factory function
+- `() => Promise<{default: any}>` - Async import
 
-// 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)
+// With options object (recommended)
+schmancyContentDrawer.push({
+  component: new UserDetail(),
+  props: { userId: '123' }
+})
 
-// Later, update properties and push again
-myComponent.variant = 'outlined'
-schmancyContentDrawer.push(myComponent) // Automatically re-renders with new properties
-```
+// Factory function
+schmancyContentDrawer.push(() => new MyComponent())
 
-## Examples
+// Async import
+schmancyContentDrawer.push(() => 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
+
+## Example
+
+```typescript
+html`
+  <schmancy-content-drawer>
+    <schmancy-content-drawer-main>
+      <schmancy-list>
+        ${items.map(item => html`
+          <schmancy-list-item @click=${() => {
+            schmancyContentDrawer.push({
+              component: new 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/dist/ai/content-drawer.md

@@ -1,198 +1,128 @@
 # 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. Automatically resolves different component types.
 
-## Service API
+**Parameters:**
 
-```js
-import { schmancyContentDrawer } from '@schmancy/content-drawer'
+- `options: ComponentType | DrawerPushOptions`
+
+**ComponentType formats:**
 
-// 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()`)
+- `() => HTMLElement` - Factory function
+- `() => Promise<{default: any}>` - Async import
 
-// 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)
+// With options object (recommended)
+schmancyContentDrawer.push({
+  component: new UserDetail(),
+  props: { userId: '123' }
+})
 
-// Later, update properties and push again
-myComponent.variant = 'outlined'
-schmancyContentDrawer.push(myComponent) // Automatically re-renders with new properties
-```
+// Factory function
+schmancyContentDrawer.push(() => new MyComponent())
 
-## Examples
+// Async import
+schmancyContentDrawer.push(() => 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
+
+## Example
+
+```typescript
+html`
+  <schmancy-content-drawer>
+    <schmancy-content-drawer-main>
+      <schmancy-list>
+        ${items.map(item => html`
+          <schmancy-list-item @click=${() => {
+            schmancyContentDrawer.push({
+              component: new 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