@mhmo91/schmancy 0.2.193 → 0.2.195

package/ai/chips.md

@@ -0,0 +1,180 @@
+# Schmancy Chips - AI Reference
+
+```js
+// Single Chip
+<schmancy-chip
+  text="Chip Text"
+  variant="default|primary|secondary|success|warning|danger|info"
+  size="small|medium|large"
+  closable?
+  disabled?
+  @close=${handleClose}
+  @click=${handleClick}>
+</schmancy-chip>
+
+// Chip with icon
+<schmancy-chip text="JavaScript">
+  <schmancy-icon slot="prefix" icon="code"></schmancy-icon>
+</schmancy-chip>
+
+// Chip with avatar
+<schmancy-chip text="John Doe">
+  <schmancy-avatar slot="prefix" src="path/to/avatar.jpg" size="small"></schmancy-avatar>
+</schmancy-chip>
+
+// Chips Container
+<schmancy-chips
+  @change=${handleSelectionChange}>
+  <schmancy-chip text="Option 1" value="1"></schmancy-chip>
+  <schmancy-chip text="Option 2" value="2"></schmancy-chip>
+  <schmancy-chip text="Option 3" value="3"></schmancy-chip>
+</schmancy-chips>
+
+// Chips Container with selection mode
+<schmancy-chips
+  selection="single|multiple|none"
+  .value=${selectedValues}
+  @change=${handleSelectionChange}>
+  <schmancy-chip text="Red" value="red"></schmancy-chip>
+  <schmancy-chip text="Green" value="green"></schmancy-chip>
+  <schmancy-chip text="Blue" value="blue"></schmancy-chip>
+</schmancy-chips>
+
+// Input with chip creation
+<schmancy-chips
+  input?
+  placeholder="Add tag..."
+  @add=${handleAddChip}
+  @remove=${handleRemoveChip}>
+  <schmancy-chip text="React" closable></schmancy-chip>
+  <schmancy-chip text="Vue" closable></schmancy-chip>
+  <schmancy-chip text="Angular" closable></schmancy-chip>
+</schmancy-chips>
+
+// Chip Properties
+text: string            // Text content of the chip
+value: string           // Value for selection purposes
+variant: string         // Visual style: "default", "primary", "secondary", etc.
+size: string            // Size: "small", "medium", "large"
+closable: boolean       // Show close button
+disabled: boolean       // Disable the chip
+selected: boolean       // Whether the chip is selected
+
+// Chips Container Properties
+selection: string       // Selection mode: "none", "single", "multiple"
+value: string[]         // Selected values
+input: boolean          // Show input for adding new chips
+placeholder: string     // Placeholder for the input
+max: number             // Maximum number of chips allowed
+disabled: boolean       // Disable the entire container
+
+// Chip Events
+@click   // Fires when chip is clicked
+@close   // Fires when close button is clicked
+@keydown // Fires on keydown events
+
+// Chips Container Events
+@change  // Fires when selection changes, with { detail: { value } }
+@add     // Fires when a chip is added, with { detail: { text, value } }
+@remove  // Fires when a chip is removed, with { detail: { text, value } }
+
+// Examples
+// Basic chips
+<div>
+  <schmancy-chip text="Basic"></schmancy-chip>
+  <schmancy-chip text="Primary" variant="primary"></schmancy-chip>
+  <schmancy-chip text="Success" variant="success"></schmancy-chip>
+  <schmancy-chip text="Warning" variant="warning"></schmancy-chip>
+  <schmancy-chip text="Danger" variant="danger"></schmancy-chip>
+</div>
+
+// Closable chips
+<div>
+  <schmancy-chip 
+    text="JavaScript" 
+    closable
+    @close=${() => removeTag('javascript')}>
+    <schmancy-icon slot="prefix" icon="code"></schmancy-icon>
+  </schmancy-chip>
+  
+  <schmancy-chip 
+    text="TypeScript" 
+    closable
+    @close=${() => removeTag('typescript')}>
+    <schmancy-icon slot="prefix" icon="code"></schmancy-icon>
+  </schmancy-chip>
+</div>
+
+// Single selection chips
+<schmancy-chips
+  selection="single"
+  .value=${[selectedSize]}
+  @change=${(e) => selectedSize = e.detail.value[0]}>
+  <schmancy-chip text="Small" value="sm"></schmancy-chip>
+  <schmancy-chip text="Medium" value="md"></schmancy-chip>
+  <schmancy-chip text="Large" value="lg"></schmancy-chip>
+</schmancy-chips>
+
+// Multiple selection chips
+<schmancy-chips
+  selection="multiple"
+  .value=${selectedToppings}
+  @change=${(e) => selectedToppings = e.detail.value}>
+  <schmancy-chip text="Cheese" value="cheese"></schmancy-chip>
+  <schmancy-chip text="Pepperoni" value="pepperoni"></schmancy-chip>
+  <schmancy-chip text="Mushrooms" value="mushrooms"></schmancy-chip>
+  <schmancy-chip text="Onions" value="onions"></schmancy-chip>
+  <schmancy-chip text="Peppers" value="peppers"></schmancy-chip>
+</schmancy-chips>
+
+// Input chips for tags
+<schmancy-chips
+  input
+  placeholder="Add tag..."
+  @add=${(e) => addTag(e.detail.text)}
+  @remove=${(e) => removeTag(e.detail.text)}>
+  ${tags.map(tag => html`
+    <schmancy-chip 
+      text=${tag} 
+      closable>
+    </schmancy-chip>
+  `)}
+</schmancy-chips>
+
+// Email recipient chips
+<schmancy-chips
+  input
+  placeholder="Add recipient..."
+  @add=${addRecipient}
+  @remove=${removeRecipient}>
+  ${recipients.map(recipient => html`
+    <schmancy-chip text=${recipient.name} closable>
+      <schmancy-avatar
+        slot="prefix"
+        src=${recipient.avatar}
+        size="small">
+      </schmancy-avatar>
+    </schmancy-chip>
+  `)}
+</schmancy-chips>
+
+// Filter chips
+<div>
+  <div>Filters:</div>
+  <schmancy-chips>
+    ${filters.map(filter => html`
+      <schmancy-chip
+        text=${filter.label}
+        closable
+        @close=${() => removeFilter(filter.id)}>
+      </schmancy-chip>
+    `)}
+    
+    <schmancy-chip
+      text="Add Filter"
+      @click=${openFilterDialog}>
+      <schmancy-icon slot="prefix" icon="add"></schmancy-icon>
+    </schmancy-chip>
+  </schmancy-chips>
+</div>
+```

package/ai/component-relationships.md

@@ -0,0 +1,93 @@
+# Schmancy Component Relationships
+
+This document maps the relationships between Schmancy components to provide a holistic understanding of the library.
+
+## Component Categories
+
+### Core Infrastructure
+- **Area**: Routing and application area management
+- **Store**: State management system
+- **Teleport**: Component transportation across DOM
+- **RxJS Utils**: Reactive programming utilities
+
+### Layout Components
+- **Layout**: Container layout (flex, grid)
+- **Surface**: Style-able container with consistent theming
+- **Card**: Content containers with various layouts
+- **Divider**: Visual separation element
+
+### Navigation & Structure
+- **Tabs**: Tabbed interface components
+- **Menu**: Dropdown/contextual menus
+- **Nav-Drawer**: Navigation drawer with app bar
+- **Content-Drawer**: Side panel content drawers
+- **Sheet**: Modal slide-up panels
+- **Dialog**: Modal dialog boxes
+
+### Form Controls
+- **Form**: Form container with validation
+- **Input**: Text input fields
+- **Textarea**: Multi-line text input
+- **Select**: Dropdown selection
+- **Autocomplete**: Text input with suggestions
+- **Checkbox**: Boolean selection control
+- **Radio-Group**: Exclusive option selection
+- **Option**: Selection option item
+
+### Interactive Elements
+- **Button**: Action triggers (primary, secondary, tertiary)
+- **Dropdown**: Togglable content containers
+- **Chips**: Compact interactive elements
+- **List**: Interactive list items
+- **Tree**: Hierarchical data display
+- **Table**: Tabular data display
+
+### Feedback & Status
+- **Notification**: Toast messages and alerts
+- **Tooltip**: Contextual information on hover
+- **Badge**: Numeric/status indicators
+- **Busy**: Loading indicators
+- **Avatar**: User/entity visual representation
+
+### Typography & Visual
+- **Typography**: Text styling system
+- **Icons**: Iconography system
+- **Animated-Text**: Text animation utilities
+- **Typewriter**: Typing animation effect
+
+### Utilities
+- **Directives**: DOM behavior extensions
+- **Theme**: Theming system
+- **Theme-Button**: Theme toggle control
+- **Utils**: General utility functions
+- **Types**: TypeScript type definitions
+- **Delay**: Timing utilities
+- **Date-Range**: Date selection utilities
+- **Steps**: Multi-step process visualization
+
+## Key Component Interactions
+
+### Form System Interactions
+- **Form** → Contains and validates: Input, Textarea, Select, Checkbox, Radio-Group
+- **Input/Select/Autocomplete** → Can contain: Icons
+- **Option** → Used by: Select, Autocomplete
+
+### Layout System Interactions
+- **Surface** → Used by: Card, Dialog, Sheet, Table
+- **Layout** → Container for: most visible components
+- **Card** → Contains: Card-Media, Card-Content, Card-Actions
+
+### Navigation System Interactions
+- **Area** → Controls routing for: any component
+- **Tabs** → Contains: Tab components
+- **Nav-Drawer** → Contains: AppBar, Drawer, Content
+- **Content-Drawer** → Specialized Sheet with context
+
+### State Management
+- **Store** → Can be used with: any component
+- **Area** → Manages routing state via reactive observables
+
+### Notification System
+- **Notification** → Uses: Surface
+- **Dialog** → Uses: Surface
+- **Tooltip** → Can attach to: any component

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

@@ -0,0 +1,119 @@
+# Schmancy Dialog - AI Reference
+
+```js
+// Basic Dialog Component
+<schmancy-dialog>
+  <!-- Dialog content goes here -->
+  <div>Dialog content</div>
+</schmancy-dialog>
+
+// Dialog Component Methods
+dialog.show(position?) -> Promise<boolean>   // Show dialog, optionally at a specific position
+dialog.hide(result?) -> void                 // Hide dialog with optional result (true/false)
+
+// Position can be:
+// - Undefined: Centers dialog in viewport
+// - Coordinates: { x: number, y: number }
+// - MouseEvent: Uses click coordinates
+// - TouchEvent: Uses touch coordinates
+
+// Dialog Events
+@close   // Fires when dialog is closed
+
+// Service API (higher-level abstraction with additional components)
+$dialog.confirm({
+  title?,
+  message?,
+  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,
+  onConfirm?: Function,
+  onCancel?: Function
+}) -> Promise<boolean>
+
+$dialog.ask(message, event?) -> Promise<boolean>
+$dialog.danger({...options}) -> Promise<boolean>
+$dialog.component(content, options?) -> Promise<boolean>
+
+// Examples
+// Basic dialog usage
+const dialog = document.querySelector('schmancy-dialog');
+// Show dialog centered
+const result = await dialog.show();
+// Show dialog at specific coordinates
+const result = await dialog.show({ x: 100, y: 200 });
+// Show dialog at click position
+button.addEventListener('click', async (e) => {
+  const result = await dialog.show(e);
+  console.log('Dialog result:', result);
+});
+
+// Manually hiding dialog
+dialog.hide(true);  // Hide with positive result
+dialog.hide(false); // Hide with negative result
+
+// Dialog with confirm/cancel buttons
+<schmancy-dialog id="confirmDialog">
+  <div style="padding: 16px;">
+    <h3>Confirm Action</h3>
+    <p>Are you sure you want to proceed?</p>
+    <div style="display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px;">
+      <schmancy-button variant="text" @click=${() => dialog.hide(false)}>
+        Cancel
+      </schmancy-button>
+      <schmancy-button variant="filled" @click=${() => dialog.hide(true)}>
+        Confirm
+      </schmancy-button>
+    </div>
+  </div>
+</schmancy-dialog>
+
+// Using the dialog service
+// Simple confirmation
+const confirmed = await $dialog.ask("Save changes?", event);
+
+// Confirmation with custom options
+const confirmed = await $dialog.confirm({
+  title: "Confirm Deletion",
+  message: "Are you sure you want to delete this item? This action cannot be undone.",
+  confirmText: "Delete",
+  cancelText: "Cancel",
+  variant: "danger",
+  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>
+    <schmancy-input id="nameInput" label="Your Name"></schmancy-input>
+  </div>
+`, {
+  title: "Enter Name",
+  confirmText: "Submit",
+  onConfirm: () => {
+    const value = document.getElementById("nameInput").value;
+    return value ? true : false;
+  }
+});
+
+// Dialog for dangerous actions
+const confirmed = await $dialog.danger({
+  title: "Warning",
+  message: "You are about to delete your account. This action is permanent.",
+  confirmText: "Delete Account",
+  position: event
+});
+```