@mhmo91/schmancy 0.2.193 → 0.2.195

package/ai/tooltip.md

@@ -0,0 +1,149 @@
+# Schmancy Tooltip - AI Reference
+
+```js
+// Basic Tooltip
+<schmancy-tooltip text="Tooltip text">
+  <schmancy-button>Hover me</schmancy-button>
+</schmancy-tooltip>
+
+// Tooltip with position
+<schmancy-tooltip
+  text="Tooltip content"
+  position="top|right|bottom|left|top-start|top-end|right-start|right-end|bottom-start|bottom-end|left-start|left-end">
+  <div>Hover over this element</div>
+</schmancy-tooltip>
+
+// Tooltip with custom content
+<schmancy-tooltip>
+  <schmancy-button>Hover me</schmancy-button>
+  
+  <div slot="content">
+    <h4>Custom Tooltip</h4>
+    <p>This is a tooltip with custom HTML content.</p>
+  </div>
+</schmancy-tooltip>
+
+// Tooltip with delay and offset
+<schmancy-tooltip
+  text="Delayed tooltip"
+  show-delay="500"
+  hide-delay="200"
+  offset="10">
+  <span>Hover for delayed tooltip</span>
+</schmancy-tooltip>
+
+// Tooltip directive (alternative usage)
+<schmancy-button
+  ${tooltip('Button tooltip', { 
+    position: 'top',
+    showDelay: 300
+  })}>
+  Hover me
+</schmancy-button>
+
+// Tooltip Properties
+text: string           // Text content of the tooltip
+position: string       // Position relative to target: "top", "right", "bottom", "left" and variations
+showDelay: number      // Delay before showing tooltip (milliseconds)
+hideDelay: number      // Delay before hiding tooltip (milliseconds)
+offset: number         // Distance between tooltip and target (pixels)
+maxWidth: string       // Maximum width of the tooltip
+interactive: boolean   // Allow interaction with tooltip content
+disabled: boolean      // Disable the tooltip
+always-visible: boolean // Keep tooltip visible (for testing)
+
+// Tooltip Events
+@show    // Fires when tooltip is shown
+@hide    // Fires when tooltip is hidden
+
+// Tooltip Directive Options
+tooltip(text, {
+  position: string,    // Position relative to target
+  showDelay: number,   // Delay before showing tooltip (milliseconds)
+  hideDelay: number,   // Delay before hiding tooltip (milliseconds)
+  offset: number,      // Distance between tooltip and target (pixels)
+  maxWidth: string,    // Maximum width of the tooltip
+  interactive: boolean // Allow interaction with tooltip content
+})
+
+// Examples
+// Basic usage
+<schmancy-tooltip text="Delete this item">
+  <schmancy-icon-button
+    icon="delete"
+    variant="danger">
+  </schmancy-icon-button>
+</schmancy-tooltip>
+
+// Tooltip with rich content
+<schmancy-tooltip position="right">
+  <schmancy-icon-button icon="info"></schmancy-icon-button>
+  
+  <div slot="content">
+    <h4>Information</h4>
+    <p>This feature allows you to:</p>
+    <ul>
+      <li>Create new records</li>
+      <li>Edit existing data</li>
+      <li>Export as CSV</li>
+    </ul>
+  </div>
+</schmancy-tooltip>
+
+// Interactive tooltip
+<schmancy-tooltip 
+  position="bottom"
+  interactive>
+  <span>Settings</span>
+  
+  <div slot="content">
+    <h4>Quick Settings</h4>
+    <schmancy-checkbox label="Enable notifications"></schmancy-checkbox>
+    <schmancy-checkbox label="Dark mode"></schmancy-checkbox>
+    <schmancy-button size="small">Apply</schmancy-button>
+  </div>
+</schmancy-tooltip>
+
+// Using tooltip directive
+<div>
+  <schmancy-button ${tooltip('Save changes')}>
+    Save
+  </schmancy-button>
+  
+  <schmancy-button ${tooltip('Discard all changes', { position: 'bottom' })}>
+    Cancel
+  </schmancy-button>
+  
+  <schmancy-icon-button 
+    icon="help"
+    ${tooltip('Need help?', { position: 'right', showDelay: 500 })}>
+  </schmancy-icon-button>
+</div>
+
+// Tooltip on disabled elements
+<schmancy-tooltip text="You don't have permission to edit">
+  <span>
+    <schmancy-button disabled>
+      Edit
+    </schmancy-button>
+  </span>
+</schmancy-tooltip>
+
+// Tooltip for form fields
+<div>
+  <schmancy-input 
+    label="Username"
+    ${tooltip('Enter your username or email address')}>
+  </schmancy-input>
+  
+  <schmancy-input 
+    label="Password"
+    type="password">
+    <schmancy-icon 
+      slot="suffix" 
+      icon="info"
+      ${tooltip('Password must be at least 8 characters')}>
+    </schmancy-icon>
+  </schmancy-input>
+</div>
+```

package/ai/tree.md

@@ -0,0 +1,279 @@
+# Schmancy Tree - AI Reference
+
+```js
+// Basic Tree
+<schmancy-tree>
+  <schmancy-tree-item label="Root">
+    <schmancy-tree-item label="Child 1"></schmancy-tree-item>
+    <schmancy-tree-item label="Child 2">
+      <schmancy-tree-item label="Grandchild 1"></schmancy-tree-item>
+      <schmancy-tree-item label="Grandchild 2"></schmancy-tree-item>
+    </schmancy-tree-item>
+    <schmancy-tree-item label="Child 3"></schmancy-tree-item>
+  </schmancy-tree-item>
+</schmancy-tree>
+
+// Tree with selection
+<schmancy-tree
+  selectable
+  @select=${handleSelection}>
+  <!-- Tree items -->
+</schmancy-tree>
+
+// Tree with custom items
+<schmancy-tree>
+  <schmancy-tree-item value="item1">
+    <div slot="label">
+      <schmancy-icon icon="folder"></schmancy-icon>
+      <span>Documents</span>
+    </div>
+    
+    <schmancy-tree-item value="item1.1">
+      <div slot="label">
+        <schmancy-icon icon="file-text"></schmancy-icon>
+        <span>Report.pdf</span>
+      </div>
+    </schmancy-tree-item>
+    
+    <schmancy-tree-item value="item1.2">
+      <div slot="label">
+        <schmancy-icon icon="file-text"></schmancy-icon>
+        <span>Presentation.pptx</span>
+      </div>
+    </schmancy-tree-item>
+  </schmancy-tree-item>
+</schmancy-tree>
+
+// Tree Properties
+selectable: boolean       // Enable item selection
+multiselect: boolean      // Allow multiple selections
+expandOnSelect: boolean   // Expand items when selected
+compact: boolean          // Reduce padding and spacing
+indentSize: number        // Indentation size in pixels (default: 20)
+expandedItems: string[]   // Initially expanded items (by value)
+selectedItems: string[]   // Initially selected items (by value)
+
+// Tree Item Properties
+label: string             // Text label for the item
+value: string             // Value for selection/identification
+expanded: boolean         // Whether the item is expanded
+selected: boolean         // Whether the item is selected
+disabled: boolean         // Disable the item
+icon: string              // Icon to display (if using default rendering)
+loading: boolean          // Show loading indicator
+checkable: boolean        // Show checkbox for selection
+childrenCount: number     // Number of children (for lazy loading)
+
+// Tree Events
+@select   // Fires when selection changes, with { detail: { selected } }
+@expand   // Fires when item expands, with { detail: { value, expanded } }
+@collapse // Fires when item collapses, with { detail: { value, expanded } }
+@toggle   // Fires when item expands/collapses, with { detail: { value, expanded } }
+
+// Tree Methods
+tree.expandAll() -> void            // Expand all items
+tree.collapseAll() -> void          // Collapse all items
+tree.getSelectedItems() -> string[] // Get selected item values
+tree.selectItem(value) -> void      // Select an item
+tree.deselectItem(value) -> void    // Deselect an item
+tree.expandItem(value) -> void      // Expand an item
+tree.collapseItem(value) -> void    // Collapse an item
+
+// Examples
+// File explorer tree
+<schmancy-tree
+  selectable
+  expandOnSelect
+  @select=${(e) => handleFileSelection(e.detail.selected)}>
+  
+  <schmancy-tree-item value="documents" expanded>
+    <div slot="label">
+      <schmancy-icon icon="folder"></schmancy-icon>
+      <span>Documents</span>
+    </div>
+    
+    <schmancy-tree-item value="documents/reports">
+      <div slot="label">
+        <schmancy-icon icon="folder"></schmancy-icon>
+        <span>Reports</span>
+      </div>
+      
+      <schmancy-tree-item value="documents/reports/q1.pdf">
+        <div slot="label">
+          <schmancy-icon icon="file-text"></schmancy-icon>
+          <span>Q1 Report.pdf</span>
+        </div>
+      </schmancy-tree-item>
+      
+      <schmancy-tree-item value="documents/reports/q2.pdf">
+        <div slot="label">
+          <schmancy-icon icon="file-text"></schmancy-icon>
+          <span>Q2 Report.pdf</span>
+        </div>
+      </schmancy-tree-item>
+    </schmancy-tree-item>
+    
+    <schmancy-tree-item value="documents/presentations">
+      <div slot="label">
+        <schmancy-icon icon="folder"></schmancy-icon>
+        <span>Presentations</span>
+      </div>
+      
+      <schmancy-tree-item value="documents/presentations/product.pptx">
+        <div slot="label">
+          <schmancy-icon icon="file-presentation"></schmancy-icon>
+          <span>Product Roadmap.pptx</span>
+        </div>
+      </schmancy-tree-item>
+    </schmancy-tree-item>
+  </schmancy-tree-item>
+  
+  <schmancy-tree-item value="images">
+    <div slot="label">
+      <schmancy-icon icon="folder"></schmancy-icon>
+      <span>Images</span>
+    </div>
+    
+    <schmancy-tree-item value="images/logo.png">
+      <div slot="label">
+        <schmancy-icon icon="image"></schmancy-icon>
+        <span>Logo.png</span>
+      </div>
+    </schmancy-tree-item>
+    
+    <schmancy-tree-item value="images/banner.jpg">
+      <div slot="label">
+        <schmancy-icon icon="image"></schmancy-icon>
+        <span>Banner.jpg</span>
+      </div>
+    </schmancy-tree-item>
+  </schmancy-tree-item>
+</schmancy-tree>
+
+// Organization tree with checkboxes
+<schmancy-tree
+  selectable
+  multiselect
+  @select=${(e) => updateSelectedDepartments(e.detail.selected)}>
+  
+  <schmancy-tree-item value="company" checkable expanded>
+    <div slot="label">
+      <strong>Acme Inc.</strong>
+    </div>
+    
+    <schmancy-tree-item value="engineering" checkable>
+      <div slot="label">Engineering</div>
+      
+      <schmancy-tree-item value="frontend" checkable>
+        <div slot="label">Frontend</div>
+      </schmancy-tree-item>
+      
+      <schmancy-tree-item value="backend" checkable>
+        <div slot="label">Backend</div>
+      </schmancy-tree-item>
+      
+      <schmancy-tree-item value="qa" checkable>
+        <div slot="label">QA</div>
+      </schmancy-tree-item>
+    </schmancy-tree-item>
+    
+    <schmancy-tree-item value="design" checkable>
+      <div slot="label">Design</div>
+      
+      <schmancy-tree-item value="ux" checkable>
+        <div slot="label">UX</div>
+      </schmancy-tree-item>
+      
+      <schmancy-tree-item value="ui" checkable>
+        <div slot="label">UI</div>
+      </schmancy-tree-item>
+    </schmancy-tree-item>
+    
+    <schmancy-tree-item value="marketing" checkable>
+      <div slot="label">Marketing</div>
+    </schmancy-tree-item>
+    
+    <schmancy-tree-item value="sales" checkable>
+      <div slot="label">Sales</div>
+    </schmancy-tree-item>
+  </schmancy-tree-item>
+</schmancy-tree>
+
+// Dynamic tree from data
+<schmancy-tree
+  selectable
+  .expandedItems=${expandedItems}
+  .selectedItems=${selectedItems}
+  @select=${handleSelection}
+  @toggle=${handleToggle}>
+  
+  ${renderTree(treeData)}
+</schmancy-tree>
+
+// Helper function to render tree recursively
+function renderTree(items) {
+  return items.map(item => html`
+    <schmancy-tree-item
+      value=${item.id}
+      label=${item.label}
+      ?expanded=${expandedItems.includes(item.id)}
+      ?selected=${selectedItems.includes(item.id)}
+      ?disabled=${item.disabled}
+      ?loading=${item.loading}>
+      
+      ${item.children ? renderTree(item.children) : ''}
+    </schmancy-tree-item>
+  `);
+}
+
+// Lazy loading tree
+<schmancy-tree @toggle=${handleToggle}>
+  <schmancy-tree-item
+    value="root"
+    label="Root Folder"
+    expanded
+    childrenCount=${3}>
+    
+    ${loadedChildren.root ? loadedChildren.root.map(child => html`
+      <schmancy-tree-item
+        value=${child.id}
+        label=${child.name}
+        childrenCount=${child.hasChildren ? 1 : 0}
+        ?loading=${loadingItems.includes(child.id)}>
+        
+        ${loadedChildren[child.id] ? loadedChildren[child.id].map(grandchild => html`
+          <schmancy-tree-item
+            value=${grandchild.id}
+            label=${grandchild.name}
+            childrenCount=${grandchild.hasChildren ? 1 : 0}>
+          </schmancy-tree-item>
+        `) : ''}
+      </schmancy-tree-item>
+    `) : html`
+      <schmancy-tree-item loading>Loading...</schmancy-tree-item>
+    `}
+  </schmancy-tree-item>
+</schmancy-tree>
+
+// Handling toggle for lazy loading
+async function handleToggle(e) {
+  const { value, expanded } = e.detail;
+  
+  if (expanded && !loadedChildren[value]) {
+    // Mark item as loading
+    loadingItems = [...loadingItems, value];
+    
+    // Load children
+    const children = await fetchChildren(value);
+    
+    // Update loaded children
+    loadedChildren = {
+      ...loadedChildren,
+      [value]: children
+    };
+    
+    // Remove from loading items
+    loadingItems = loadingItems.filter(id => id !== value);
+  }
+}
+```

package/ai/typography.md

@@ -0,0 +1,170 @@
+# Schmancy Typography - AI Reference
+
+```js
+// Basic Typography
+<schmancy-typography
+  variant="h1|h2|h3|h4|h5|h6|subtitle1|subtitle2|body1|body2|button|caption|overline"
+  color="primary|secondary|tertiary|error|text-primary|text-secondary|text-disabled"
+  align="left|center|right|justify"
+  weight="thin|light|regular|medium|bold"
+  transform="none|uppercase|lowercase|capitalize"
+  truncate?
+  no-wrap?
+  gutter-bottom?>
+  Text content goes here
+</schmancy-typography>
+
+// Typography heading variants
+<schmancy-typography variant="h1">Heading 1</schmancy-typography>
+<schmancy-typography variant="h2">Heading 2</schmancy-typography>
+<schmancy-typography variant="h3">Heading 3</schmancy-typography>
+<schmancy-typography variant="h4">Heading 4</schmancy-typography>
+<schmancy-typography variant="h5">Heading 5</schmancy-typography>
+<schmancy-typography variant="h6">Heading 6</schmancy-typography>
+
+// Typography body variants
+<schmancy-typography variant="subtitle1">Subtitle 1</schmancy-typography>
+<schmancy-typography variant="subtitle2">Subtitle 2</schmancy-typography>
+<schmancy-typography variant="body1">Body 1 text</schmancy-typography>
+<schmancy-typography variant="body2">Body 2 text</schmancy-typography>
+<schmancy-typography variant="button">Button text</schmancy-typography>
+<schmancy-typography variant="caption">Caption text</schmancy-typography>
+<schmancy-typography variant="overline">Overline text</schmancy-typography>
+
+// Typography Properties
+variant: string        // Text style variant
+color: string          // Text color
+align: string          // Text alignment
+weight: string         // Font weight
+transform: string      // Text transformation
+truncate: boolean      // Truncate overflow with ellipsis
+noWrap: boolean        // Prevent text wrapping
+gutterBottom: boolean  // Add margin at the bottom
+italic: boolean        // Italic style
+underline: boolean     // Underline text
+lineHeight: string     // Line height
+letterSpacing: string  // Letter spacing
+fontFamily: string     // Font family
+size: string           // Custom font size (overrides variant)
+responsive: boolean    // Apply responsive sizing
+
+// Examples
+// Basic usage
+<schmancy-typography variant="h2" color="primary">
+  Welcome to Our Application
+</schmancy-typography>
+
+<schmancy-typography variant="body1">
+  This is a paragraph of text that demonstrates the body1 typography variant.
+  It's commonly used for the main content text on a page.
+</schmancy-typography>
+
+// Styled text
+<schmancy-typography
+  variant="subtitle1"
+  weight="bold"
+  color="secondary"
+  transform="uppercase">
+  Important Notice
+</schmancy-typography>
+
+// Truncated text
+<schmancy-typography
+  variant="body2"
+  truncate
+  style="max-width: 200px;">
+  This is a very long text that will be truncated with an ellipsis when it exceeds the container width.
+</schmancy-typography>
+
+// Responsive headings
+<schmancy-typography
+  variant="h1"
+  responsive
+  align="center"
+  gutter-bottom>
+  Responsive Heading
+</schmancy-typography>
+
+// Text with custom styling
+<schmancy-typography
+  variant="body1"
+  italic
+  letter-spacing="0.5px"
+  line-height="1.8">
+  This text has custom letter spacing and line height, with italic styling.
+</schmancy-typography>
+
+// Text with different weights
+<div>
+  <schmancy-typography variant="body1" weight="thin">
+    This text has thin weight.
+  </schmancy-typography>
+  
+  <schmancy-typography variant="body1" weight="light">
+    This text has light weight.
+  </schmancy-typography>
+  
+  <schmancy-typography variant="body1" weight="regular">
+    This text has regular weight.
+  </schmancy-typography>
+  
+  <schmancy-typography variant="body1" weight="medium">
+    This text has medium weight.
+  </schmancy-typography>
+  
+  <schmancy-typography variant="body1" weight="bold">
+    This text has bold weight.
+  </schmancy-typography>
+</div>
+
+// Typography in a card
+<schmancy-card>
+  <schmancy-card-content>
+    <schmancy-typography variant="h4" gutter-bottom>
+      Card Title
+    </schmancy-typography>
+    
+    <schmancy-typography variant="body2" color="text-secondary" gutter-bottom>
+      Posted on January 1, 2023
+    </schmancy-typography>
+    
+    <schmancy-typography variant="body1">
+      This is the main content of the card. It uses the body1 typography variant
+      which is suitable for longer text content.
+    </schmancy-typography>
+  </schmancy-card-content>
+  
+  <schmancy-card-actions>
+    <schmancy-button>
+      <schmancy-typography variant="button">
+        Read More
+      </schmancy-typography>
+    </schmancy-button>
+  </schmancy-card-actions>
+</schmancy-card>
+
+// Error message
+<schmancy-typography
+  variant="body2"
+  color="error"
+  gutter-bottom>
+  The username or password you entered is incorrect.
+</schmancy-typography>
+
+// Caption with custom size
+<schmancy-typography
+  variant="caption"
+  color="text-secondary"
+  size="10px">
+  * Terms and conditions apply
+</schmancy-typography>
+
+// Paragraph with custom font family
+<schmancy-typography
+  variant="body1"
+  font-family="'Georgia', serif"
+  line-height="1.7">
+  This paragraph uses a serif font for a more traditional typographic style.
+  Custom font families can be specified when needed for special sections.
+</schmancy-typography>
+```

package/dist/_headers

@@ -0,0 +1,2 @@
+/*
+  Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-eval' 'unsafe-inline' https://cdn.jsdelivr.net/npm/ https://www.claudeusercontent.com https://cdnjs.cloudflare.com https://cdn.jsdelivr.net/pyodide/; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net/npm/; font-src 'self' data: https://cdn.jsdelivr.net/npm/; img-src 'self' data: https: blob:; connect-src 'self' https: