@mhmo91/schmancy 0.8.6 → 0.9.2

package/ai/teleport.md

@@ -1,197 +0,0 @@
-# Teleport Component
-
-An advanced component that enables smooth FLIP (First, Last, Invert, Play) animations for elements transitioning between different DOM positions.
-
-## Quick Start
-
-```html
-<!-- Source element -->
-<schmancy-teleport id="user-avatar">
-  <schmancy-avatar src="/user.jpg" name="John Doe"></schmancy-avatar>
-</schmancy-teleport>
-
-<!-- Target location (different part of DOM) -->
-<schmancy-teleport id="user-avatar">
-  <schmancy-avatar src="/user.jpg" name="John Doe"></schmancy-avatar>
-</schmancy-teleport>
-```
-
-## Properties
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `id` | `string` | - | **Required** - Unique identifier for teleportation pair |
-| `uuid` | `number` | `random` | Auto-generated unique instance ID |
-| `delay` | `number` | `0` | Animation delay in milliseconds |
-
-## How It Works
-
-The teleport component uses a sophisticated event system to coordinate animations:
-
-1. **Discovery Phase**: Components with same `id` find each other
-2. **Position Tracking**: Monitors element positions using ResizeObserver
-3. **FLIP Animation**: Smoothly animates between positions
-4. **State Management**: Maintains teleportation state across the app
-
-## Examples
-
-### Page Transition Animation
-```html
-<!-- List view -->
-<schmancy-list>
-  ${items.map(item => html`
-    <schmancy-list-item @click="${() => selectItem(item)}">
-      <schmancy-teleport id="item-${item.id}">
-        <schmancy-card>
-          <img src="${item.thumbnail}" />
-          <h3>${item.title}</h3>
-        </schmancy-card>
-      </schmancy-teleport>
-    </schmancy-list-item>
-  `)}
-</schmancy-list>
-
-<!-- Detail view -->
-${selectedItem ? html`
-  <div class="detail-view">
-    <schmancy-teleport id="item-${selectedItem.id}">
-      <schmancy-card>
-        <img src="${selectedItem.thumbnail}" />
-        <h3>${selectedItem.title}</h3>
-        <p>${selectedItem.description}</p>
-      </schmancy-card>
-    </schmancy-teleport>
-  </div>
-` : ''}
-```
-
-### Navigation Avatar Animation
-```html
-<!-- Collapsed navbar -->
-<nav class="navbar-collapsed">
-  <schmancy-teleport id="nav-user">
-    <schmancy-avatar size="sm" src="/user.jpg"></schmancy-avatar>
-  </schmancy-teleport>
-</nav>
-
-<!-- Expanded sidebar -->
-<aside class="sidebar-expanded">
-  <schmancy-teleport id="nav-user">
-    <div class="user-profile">
-      <schmancy-avatar size="lg" src="/user.jpg"></schmancy-avatar>
-      <h3>John Doe</h3>
-      <p>john@example.com</p>
-    </div>
-  </schmancy-teleport>
-</aside>
-```
-
-### Tab Content Transitions
-```html
-<!-- Tab headers -->
-<schmancy-tabs>
-  ${tabs.map(tab => html`
-    <schmancy-tab>
-      <schmancy-teleport id="tab-icon-${tab.id}">
-        <schmancy-icon>${tab.icon}</schmancy-icon>
-      </schmancy-teleport>
-      ${tab.label}
-    </schmancy-tab>
-  `)}
-</schmancy-tabs>
-
-<!-- Tab content -->
-<div class="tab-content">
-  <schmancy-teleport id="tab-icon-${activeTab.id}">
-    <schmancy-icon size="xl">${activeTab.icon}</schmancy-icon>
-  </schmancy-teleport>
-  <h2>${activeTab.title}</h2>
-  <div>${activeTab.content}</div>
-</div>
-```
-
-## Event System
-
-The component uses custom events for coordination:
-
-### Internal Events
-- `WhereAreYouRicky`: Discovery broadcast
-- `HereMorty`: Response to discovery
-- `FINDING_MORTIES`: Global search event
-- `HERE_RICKY`: Component announcement
-
-## Service Integration
-
-The teleport system uses a central service for state management:
-
-```typescript
-// Access active teleportations
-import { teleportationService } from '@schmancy/index';
-// Or specific import: import { teleportationService } from '@schmancy/teleport';
-
-// Get current positions
-const positions = teleportationService.activeTeleportations;
-
-// Subscribe to animations
-teleportationService.flipRequests.subscribe(({ from, to }) => {
-  console.log('Animating from', from.rect, 'to', to.rect);
-});
-```
-
-## Advanced Features
-
-### Position Watching
-Uses `watchElementRect` to monitor element position changes:
-- Handles resize events
-- Tracks DOM mutations
-- Updates on scroll
-
-### FLIP Animation
-Implements the FLIP technique for performant animations:
-- **F**irst: Record initial position
-- **L**ast: Record final position
-- **I**nvert: Calculate the difference
-- **P**lay: Animate to final position
-
-### Visibility Management
-- Initially hidden until position calculated
-- Prevents layout jumps
-- Smooth appearance after teleportation
-
-## Performance Considerations
-
-1. **Unique IDs**: Ensure IDs are unique per teleportation pair
-2. **Cleanup**: Components automatically cleanup on disconnect
-3. **Debouncing**: Position updates are optimized
-4. **Observer Management**: Efficient use of ResizeObserver
-
-## Debugging
-
-Enable debug mode in development:
-```javascript
-// The component has built-in debugging
-debugging = import.meta.env.DEV ? true : false
-```
-
-## Best Practices
-
-1. **Unique IDs**: Always use unique, stable IDs
-2. **Matching Content**: Ensure teleported content is identical
-3. **Performance**: Limit active teleportations
-4. **Transitions**: Combine with route transitions
-5. **Fallbacks**: Handle cases where pairs don't exist
-
-## Related Components
-
-- [Avatar](./avatar.md) - Common teleportation target
-- [Card](./card.md) - Container animations
-- [Icon](./icons.md) - Icon transitions
-- [Area](./area.md) - Route-based animations
-
-## Use Cases
-
-1. **Shared Element Transitions**: Seamless page transitions
-2. **Master-Detail Views**: List to detail animations
-3. **Navigation Morphing**: Navbar state changes
-4. **Tab Transitions**: Content switching animations
-5. **Gallery Effects**: Image zoom transitions

package/ai/template.md

@@ -1,144 +0,0 @@
-# Schmancy AI Documentation Guidelines
-
-This document provides a template and guidelines for creating consistent AI-friendly documentation for Schmancy components.
-
-## Documentation Format
-
-Each component's documentation should follow this structure:
-
-1. **Component Title**: `# Schmancy [Component] - AI Reference`
-2. **Code Block**: Main syntax reference with component usage patterns
-3. **Related Components**: List of related components with links and relationship descriptions
-4. **Technical Details**: Interfaces, types, CSS custom properties, etc.
-5. **Common Use Cases**: Practical examples with explanations
-
-## Code Block Template
-
-```js
-// Component Tag
-<schmancy-[component]
-  [primary-attribute]="value"
-  [boolean-attribute]?
-  @[event-name]=${handler}>
-  <!-- Content/children if applicable -->
-</schmancy-[component]>
-
-// Component Variations (if applicable)
-<schmancy-[component] 
-  variant="[variant]"
-  size="small|medium|large">
-</schmancy-[component]>
-
-// Component Methods
-component.method() -> returnType
-component.property = value
-
-// Event details
-@event-name // { detail: { relevantData } }
-
-// Examples (always number examples for clarity)
-// 1. Basic example
-<schmancy-[component] [primary-attribute]="value">
-  Content
-</schmancy-[component]>
-
-// 2. Advanced example
-<schmancy-[component]
-  [attribute]="value"
-  @[event]=${() => handleEvent()}>
-  <!-- Structured content -->
-</schmancy-[component]>
-```
-
-## Related Components Section
-
-Always include a "Related Components" section that links to other relevant components:
-
-```markdown
-## Related Components
-- **[Related-1](./related-1.md)**: Brief description of relationship
-- **[Related-2](./related-2.md)**: Brief description of relationship
-- **[Related-3](./related-3.md)**: Brief description of relationship
-```
-
-## Technical Details Section
-
-Include relevant technical information:
-
-```markdown
-## Technical Details
-
-### Interfaces
-```typescript
-interface ComponentProps {
-  property: type;
-  optionalProperty?: type;
-}
-```
-
-### CSS Custom Properties (if applicable)
-```css
---schmancy-component-color: /* Controls the component color */
---schmancy-component-spacing: /* Controls internal spacing */
-```
-```
-
-## Common Use Cases Section
-
-Provide 2-4 practical use cases with code examples:
-
-```markdown
-### Common Use Cases
-
-1. **Use Case 1**: Brief description
-   ```html
-   <schmancy-[component] specific-attribute="value"></schmancy-[component]>
-   ```
-
-2. **Use Case 2**: Brief description
-   ```html
-   <schmancy-[component] with="specific-configuration"></schmancy-[component]>
-   ```
-```
-
-## Style Guide
-
-1. **Code Examples**:
-   - Number all examples sequentially (e.g., `// 1. Basic example`)
-   - Include descriptive comments
-   - Ensure examples are realistic and complete
-
-2. **Component Descriptions**:
-   - Focus on functionality and API usage
-   - Avoid marketing language
-   - Provide context for when and why to use the component
-
-3. **Cross-Referencing**:
-   - Always link to related components
-   - Explain the relationship (e.g., "Used within", "Alternative to", "Extends")
-
-4. **Formatting**:
-   - Use backticks for inline code references
-   - Use proper markdown headers for sections
-   - Use TypeScript for type definitions
-
-## Component Categories
-
-Organize components according to these categories for better cross-referencing:
-
-1. **Core Infrastructure**: Area, Store, Teleport, RxJS Utils
-2. **Layout Components**: Layout, Surface, Card, Divider
-3. **Navigation & Structure**: Tabs, Menu, Nav-Drawer, Content-Drawer, Sheet, Dialog
-4. **Form Controls**: Form, Input, Textarea, Select, Autocomplete, Checkbox, Radio-Group, Option
-5. **Interactive Elements**: Button, Dropdown, Chips, List, Tree, Table
-6. **Feedback & Status**: Notification, Tooltip, Badge, Busy, Avatar
-7. **Typography & Visual**: Typography, Icons, Animated-Text, Typewriter
-8. **Utilities**: Directives, Theme, Theme-Button, Utils, Types, Delay, Date-Range, Steps
-
-## Examples
-
-See these files for examples of well-formatted component documentation:
-- [area.md](./area.md): Complex service component
-- [form.md](./form.md): Container component
-- [input.md](./input.md): Form field component
-- [store.md](./store.md): State management

package/ai/theme-button.md

@@ -1,173 +0,0 @@
-# Theme Button Component
-
-A simple, animated button component for theme switching functionality with a rotating palette icon.
-
-## Quick Start
-
-```html
-<!-- Basic theme button -->
-<schmancy-theme-button></schmancy-theme-button>
-
-<!-- In a toolbar -->
-<schmancy-appbar>
-  <h1 slot="title">My App</h1>
-  <schmancy-theme-button slot="actions"></schmancy-theme-button>
-</schmancy-appbar>
-```
-
-## Properties
-
-The component inherits all properties from the base button component through `TailwindElement`.
-
-## Features
-
-### Animated Icon
-The palette icon rotates 360 degrees when clicked:
-
-```javascript
-this.color.animate([
-  { transform: 'rotate(0deg)' },
-  { transform: 'rotate(360deg)' }
-], {
-  duration: 300
-});
-```
-
-### Native Web Animations
-Uses the Web Animations API for smooth, performant animations without external dependencies.
-
-## Examples
-
-### In Navigation Bar
-```html
-<nav class="flex items-center justify-between p-4">
-  <h1>Brand</h1>
-  <div class="flex gap-2">
-    <schmancy-theme-button></schmancy-theme-button>
-    <schmancy-icon-button>settings</schmancy-icon-button>
-  </div>
-</nav>
-```
-
-### With Custom Theme Logic
-```html
-<schmancy-theme-button @click="${() => {
-  // Toggle between themes
-  const currentTheme = document.querySelector('schmancy-theme');
-  currentTheme.scheme = currentTheme.scheme === 'light' ? 'dark' : 'light';
-}}"></schmancy-theme-button>
-```
-
-### In a Settings Panel
-```html
-<schmancy-card>
-  <h3 slot="header">Appearance Settings</h3>
-  
-  <div class="space-y-4">
-    <div class="flex items-center justify-between">
-      <span>Theme</span>
-      <schmancy-theme-button></schmancy-theme-button>
-    </div>
-    
-    <schmancy-divider></schmancy-divider>
-    
-    <schmancy-select label="Color Scheme">
-      <schmancy-option value="auto">Auto</schmancy-option>
-      <schmancy-option value="light">Light</schmancy-option>
-      <schmancy-option value="dark">Dark</schmancy-option>
-    </schmancy-select>
-  </div>
-</schmancy-card>
-```
-
-### With Tooltip
-```html
-<schmancy-tooltip content="Change theme">
-  <schmancy-theme-button></schmancy-theme-button>
-</schmancy-tooltip>
-```
-
-## Implementation Details
-
-The component structure:
-- Uses `schmancy-button` with text variant
-- Contains `schmancy-icon` with palette icon
-- Applies rotation animation on click
-- Maintains reference to icon element via `@query`
-
-## Styling
-
-Since it uses the base button component, all button styling applies:
-
-```css
-/* Custom positioning in toolbar */
-schmancy-theme-button {
-  margin-left: auto;
-}
-
-/* Adjust icon size */
-schmancy-theme-button schmancy-icon {
-  font-size: 1.25rem;
-}
-```
-
-## Animation Customization
-
-You can extend the animation behavior:
-
-```javascript
-// Custom animation options
-{
-  duration: 300,
-  easing: 'ease-out',
-  fill: 'forwards'  // Keep final rotation state
-}
-```
-
-## Integration with Theme System
-
-While the button provides the UI, you'll need to implement the theme switching logic:
-
-```javascript
-// Example theme toggle implementation
-class MyApp extends LitElement {
-  toggleTheme() {
-    const theme = this.shadowRoot.querySelector('schmancy-theme');
-    const themes = ['#6750A4', '#00695C', '#D32F2F', '#1976D2'];
-    const currentIndex = themes.indexOf(theme.color);
-    theme.color = themes[(currentIndex + 1) % themes.length];
-  }
-  
-  render() {
-    return html`
-      <schmancy-theme>
-        <schmancy-theme-button @click="${this.toggleTheme}">
-        </schmancy-theme-button>
-      </schmancy-theme>
-    `;
-  }
-}
-```
-
-## Best Practices
-
-1. **Placement**: Put in consistent location (usually top-right)
-2. **Feedback**: The rotation provides immediate feedback
-3. **Persistence**: Save theme preference to localStorage
-4. **Accessibility**: Include proper ARIA labels
-5. **Mobile**: Ensure adequate touch target size
-
-## Related Components
-
-- [Theme](./theme.md) - The theming system
-- [Button](./button.md) - Base button component
-- [Icon](./icons.md) - Icon system
-- [Tooltip](./tooltip.md) - Help text
-
-## Use Cases
-
-1. **App Headers**: Quick theme toggle in navigation
-2. **Settings Pages**: Part of appearance settings
-3. **Demos**: Showcase theme capabilities
-4. **User Preferences**: Personalization options
-5. **Accessibility**: High contrast mode switching