@mhmo91/schmancy 0.2.193 → 0.2.194

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/dialog.md

@@ -0,0 +1,109 @@
+# 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",
+  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
+});
+
+// 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
+});
+```

package/ai/dropdown.md

@@ -0,0 +1,238 @@
+# Schmancy Dropdown - AI Reference
+
+```js
+// Basic Dropdown
+<schmancy-dropdown>
+  <schmancy-button slot="trigger">
+    Open Dropdown
+  </schmancy-button>
+  
+  <div slot="content">
+    <div>Dropdown content goes here</div>
+  </div>
+</schmancy-dropdown>
+
+// Dropdown with position
+<schmancy-dropdown
+  position="bottom-start|bottom-end|top-start|top-end|left-start|left-end|right-start|right-end">
+  <schmancy-button slot="trigger">
+    Open Dropdown
+  </schmancy-button>
+  
+  <div slot="content">
+    <div>Positioned dropdown content</div>
+  </div>
+</schmancy-dropdown>
+
+// Dropdown with menu items
+<schmancy-dropdown>
+  <schmancy-button slot="trigger">
+    Options
+  </schmancy-button>
+  
+  <schmancy-menu slot="content">
+    <schmancy-menu-item @click=${handleEdit}>Edit</schmancy-menu-item>
+    <schmancy-menu-item @click=${handleDuplicate}>Duplicate</schmancy-menu-item>
+    <schmancy-menu-item @click=${handleArchive}>Archive</schmancy-menu-item>
+    <schmancy-menu-item disabled>Share</schmancy-menu-item>
+    <schmancy-divider></schmancy-divider>
+    <schmancy-menu-item variant="danger" @click=${handleDelete}>Delete</schmancy-menu-item>
+  </schmancy-menu>
+</schmancy-dropdown>
+
+// Dropdown with custom width and offset
+<schmancy-dropdown
+  width="300px"
+  offset="5">
+  <schmancy-button slot="trigger">
+    Wide Dropdown
+  </schmancy-button>
+  
+  <div slot="content" style="padding: 16px;">
+    <h3>Custom Content</h3>
+    <p>This dropdown has custom width and offset.</p>
+  </div>
+</schmancy-dropdown>
+
+// Dropdown Properties
+position: string        // Position relative to trigger: "bottom-start" (default), "top-end", etc.
+width: string           // Width of the dropdown content
+offset: number          // Distance between trigger and content (pixels)
+open: boolean           // Whether the dropdown is open
+disabled: boolean       // Disable the dropdown
+closeOnSelect: boolean  // Close dropdown when an item inside is selected
+closeOnClickOutside: boolean // Close dropdown when clicking outside
+matchTriggerWidth: boolean   // Make content width match trigger width
+
+// Dropdown Events
+@open    // Fires when dropdown opens
+@close   // Fires when dropdown closes
+@select  // Fires when an item is selected (if using menu items)
+
+// Dropdown Methods
+dropdown.open() -> void    // Programmatically open the dropdown
+dropdown.close() -> void   // Programmatically close the dropdown
+dropdown.toggle() -> void  // Toggle the dropdown state
+
+// Examples
+// Basic dropdown menu
+<schmancy-dropdown>
+  <schmancy-button slot="trigger">
+    <span>Actions</span>
+    <schmancy-icon slot="suffix" icon="chevron-down"></schmancy-icon>
+  </schmancy-button>
+  
+  <schmancy-menu slot="content">
+    <schmancy-menu-item @click=${viewItem}>
+      <schmancy-icon slot="prefix" icon="eye"></schmancy-icon>
+      View
+    </schmancy-menu-item>
+    
+    <schmancy-menu-item @click=${editItem}>
+      <schmancy-icon slot="prefix" icon="edit"></schmancy-icon>
+      Edit
+    </schmancy-menu-item>
+    
+    <schmancy-divider></schmancy-divider>
+    
+    <schmancy-menu-item variant="danger" @click=${deleteItem}>
+      <schmancy-icon slot="prefix" icon="trash"></schmancy-icon>
+      Delete
+    </schmancy-menu-item>
+  </schmancy-menu>
+</schmancy-dropdown>
+
+// Profile dropdown
+<schmancy-dropdown position="bottom-end">
+  <div slot="trigger" style="cursor: pointer;">
+    <schmancy-avatar
+      src="path/to/avatar.jpg"
+      size="medium">
+    </schmancy-avatar>
+  </div>
+  
+  <div slot="content">
+    <div style="padding: 16px; text-align: center;">
+      <schmancy-avatar
+        src="path/to/avatar.jpg"
+        size="large">
+      </schmancy-avatar>
+      <h3>John Doe</h3>
+      <p>john@example.com</p>
+    </div>
+    
+    <schmancy-divider></schmancy-divider>
+    
+    <schmancy-menu>
+      <schmancy-menu-item @click=${viewProfile}>
+        <schmancy-icon slot="prefix" icon="user"></schmancy-icon>
+        Profile
+      </schmancy-menu-item>
+      
+      <schmancy-menu-item @click=${openSettings}>
+        <schmancy-icon slot="prefix" icon="settings"></schmancy-icon>
+        Settings
+      </schmancy-menu-item>
+      
+      <schmancy-divider></schmancy-divider>
+      
+      <schmancy-menu-item @click=${signOut}>
+        <schmancy-icon slot="prefix" icon="logout"></schmancy-icon>
+        Sign Out
+      </schmancy-menu-item>
+    </schmancy-menu>
+  </div>
+</schmancy-dropdown>
+
+// Dropdown with form
+<schmancy-dropdown>
+  <schmancy-button slot="trigger">
+    Add User
+  </schmancy-button>
+  
+  <div slot="content" style="padding: 16px; width: 300px;">
+    <h3>Add User</h3>
+    <schmancy-form @submit=${(e) => {
+      addUser(e.detail.values);
+      dropdown.close();
+    }}>
+      <schmancy-input
+        name="name"
+        label="Name"
+        required>
+      </schmancy-input>
+      
+      <schmancy-input
+        name="email"
+        label="Email"
+        type="email"
+        required>
+      </schmancy-input>
+      
+      <div style="display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px;">
+        <schmancy-button
+          type="button"
+          variant="tertiary"
+          @click=${() => dropdown.close()}>
+          Cancel
+        </schmancy-button>
+        
+        <schmancy-button
+          type="submit"
+          variant="primary">
+          Add
+        </schmancy-button>
+      </div>
+    </schmancy-form>
+  </div>
+</schmancy-dropdown>
+
+// Icon button dropdown
+<schmancy-dropdown>
+  <schmancy-icon-button
+    slot="trigger"
+    icon="more-vertical">
+  </schmancy-icon-button>
+  
+  <schmancy-menu slot="content">
+    <schmancy-menu-item>Option 1</schmancy-menu-item>
+    <schmancy-menu-item>Option 2</schmancy-menu-item>
+    <schmancy-menu-item>Option 3</schmancy-menu-item>
+  </schmancy-menu>
+</schmancy-dropdown>
+
+// Filter dropdown
+<schmancy-dropdown>
+  <schmancy-button slot="trigger" variant="tertiary">
+    <schmancy-icon slot="prefix" icon="filter"></schmancy-icon>
+    Filter
+  </schmancy-button>
+  
+  <div slot="content" style="padding: 16px; width: 250px;">
+    <h3>Filters</h3>
+    
+    <div style="margin-bottom: 16px;">
+      <label>Status</label>
+      <schmancy-radio-group>
+        <schmancy-radio-button value="all" label="All"></schmancy-radio-button>
+        <schmancy-radio-button value="active" label="Active"></schmancy-radio-button>
+        <schmancy-radio-button value="inactive" label="Inactive"></schmancy-radio-button>
+      </schmancy-radio-group>
+    </div>
+    
+    <div style="margin-bottom: 16px;">
+      <label>Categories</label>
+      <schmancy-checkbox label="Products"></schmancy-checkbox>
+      <schmancy-checkbox label="Services"></schmancy-checkbox>
+      <schmancy-checkbox label="Resources"></schmancy-checkbox>
+    </div>
+    
+    <schmancy-button 
+      variant="primary" 
+      style="width: 100%;"
+      @click=${applyFilters}>
+      Apply Filters
+    </schmancy-button>
+  </div>
+</schmancy-dropdown>
+```