@mhmo91/schmancy 0.9.3 → 0.9.4

package/src/typewriter/IMPROVEMENTS.md

@@ -1,174 +0,0 @@
-# Schmancy Typewriter - v2.0 Improvements
-
-## Overview
-The typewriter component has been significantly enhanced with a cleaner, more intuitive API that eliminates manual character counting and makes cycling text effortless.
-
-## Key Improvements
-
-### 1. **Cycle API - No More Manual Counting! 🎉**
-
-**Before (Error-prone):**
-```html
-<schmancy-typewriter>
-  We are developers
-  <span action="delete" value="10"></span>  <!-- Had to count: "developers" = 10 chars -->
-  designers
-  <span action="delete" value="9"></span>   <!-- Had to count: "designers" = 9 chars -->
-  innovators
-</schmancy-typewriter>
-```
-
-**After (Clean & Simple):**
-```html
-<schmancy-typewriter>
-  We are <span cycle="developers | designers | innovators"></span>
-</schmancy-typewriter>
-```
-
-**Benefits:**
-- ✅ Automatic character deletion
-- ✅ No counting required
-- ✅ Less error-prone
-- ✅ Easier to maintain
-- ✅ More readable
-
-### 2. **Infinite Looping Support**
-
-```html
-<schmancy-typewriter loop>
-  <span cycle="Amazing | Incredible | Fantastic"></span>
-</schmancy-typewriter>
-```
-
-The animation now supports infinite cycling - perfect for hero sections and attention-grabbing headlines.
-
-### 3. **Flexible Pause Controls**
-
-```html
-<!-- Global pause for all cycles -->
-<schmancy-typewriter cyclePause="2000">
-  <span cycle="Fast | Secure | Reliable"></span>
-</schmancy-typewriter>
-
-<!-- Override pause for specific cycle -->
-<span cycle="Option1 | Option2 | Option3" pause="800"></span>
-```
-
-### 4. **Backward Compatible**
-
-All old features still work:
-- `action="pause"`
-- `action="delete"`
-- All existing properties
-
-## New Properties
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `cyclePause` | `number` | `1500` | Default pause between cycle items (ms) |
-| `loop` | `boolean` | `false` | Loop animation infinitely |
-
-## New Attributes (on `<span>` elements)
-
-| Attribute | Type | Description |
-|-----------|------|-------------|
-| `cycle` | `string` | Pipe-separated list of text to cycle through |
-| `pause` | `number` | Override cyclePause for this specific cycle |
-
-## Real-World Example
-
-**Samwa Homepage - Before:**
-```html
-<schmancy-typewriter speed="80" delay="500">
-  Building systems that are
-  <span action="pause" value="800"></span>
-  <br />
-  Trustless
-  <span action="pause" value="1200"></span>
-  <span action="delete" value="9"></span>
-  Permissionless
-  <span action="pause" value="1200"></span>
-  <span action="delete" value="14"></span>
-  Transparent
-  <span action="pause" value="1200"></span>
-  <span action="delete" value="11"></span>
-  Borderless
-  <span action="pause" value="1200"></span>
-  <span action="delete" value="10"></span>
-  Resilient
-  <span action="pause" value="1500"></span>
-  <br />
-  empowering everyone to operate freely.
-</schmancy-typewriter>
-```
-
-**Samwa Homepage - After:**
-```html
-<schmancy-typewriter speed="80" delay="500" cyclePause="1200">
-  Building systems that are
-  <span action="pause" value="800"></span>
-  <br />
-  <span cycle="Trustless | Permissionless | Transparent | Borderless | Resilient" pause="1500"></span>
-  <br />
-  empowering everyone to operate freely.
-</schmancy-typewriter>
-```
-
-**Line reduction:** 20 lines → 10 lines (50% reduction!)
-
-## Migration Guide
-
-### Simple Cycle Pattern
-
-```diff
-- We are developers
-- <span action="delete" value="10"></span>
-- designers
-- <span action="delete" value="9"></span>
-- innovators
-+ We are <span cycle="developers | designers | innovators"></span>
-```
-
-### With Pauses
-
-```diff
-- Feature 1
-- <span action="pause" value="1500"></span>
-- <span action="delete" value="9"></span>
-- Feature 2
-- <span action="pause" value="1500"></span>
-- <span action="delete" value="9"></span>
-- Feature 3
-+ <span cycle="Feature 1 | Feature 2 | Feature 3" pause="1500"></span>
-```
-
-## Use Cases
-
-Perfect for:
-1. **Hero headlines** - Rotating value propositions
-2. **Product features** - Cycling through benefits
-3. **Job postings** - Dynamic role descriptions
-4. **Testimonials** - Rotating quotes
-5. **Brand values** - Cycling through company values
-
-## Technical Details
-
-### Implementation
-- Auto-calculates string lengths for deletion
-- Respects global `cyclePause` or element-specific `pause`
-- Integrates seamlessly with TypeIt library
-- Supports `loop` mode for infinite cycling
-- Maintains backward compatibility
-
-### Performance
-- No performance impact
-- Same TypeIt engine underneath
-- Just smarter API on top
-
-## Testing
-
-See `test-typewriter.html` for interactive examples.
-
-## Documentation
-
-Full documentation updated in `/packages/schmancy/ai/typewriter.md`

package/src/typewriter/QUICK_REFERENCE.md

@@ -1,166 +0,0 @@
-# Typewriter Quick Reference
-
-## Basic Usage
-
-```html
-<!-- Simple typing -->
-<schmancy-typewriter>
-  Hello, World!
-</schmancy-typewriter>
-
-<!-- With speed and delay -->
-<schmancy-typewriter speed="80" delay="500">
-  This starts typing after 500ms at 80ms per character
-</schmancy-typewriter>
-```
-
-## Cycling Text (NEW! ⭐)
-
-```html
-<!-- Simple cycle -->
-<span cycle="Option1 | Option2 | Option3"></span>
-
-<!-- With custom pause -->
-<span cycle="Fast | Quick | Rapid" pause="800"></span>
-
-<!-- Complete example -->
-<schmancy-typewriter speed="80" cyclePause="1200">
-  We are <span cycle="developers | designers | innovators"></span>
-</schmancy-typewriter>
-```
-
-## Looping (NEW! ⭐)
-
-```html
-<!-- Cycle forever -->
-<schmancy-typewriter loop>
-  <span cycle="Amazing | Incredible | Fantastic"></span>
-</schmancy-typewriter>
-
-<!-- With cursor -->
-<schmancy-typewriter loop cursorChar="|">
-  <span cycle="Fast ⚡ | Secure 🔒 | Reliable ✅"></span>
-</schmancy-typewriter>
-```
-
-## Actions (Classic API)
-
-```html
-<!-- Pause -->
-<span action="pause" value="1000"></span>
-
-<!-- Manual delete -->
-<span action="delete" value="5"></span>
-
-<!-- Combined -->
-<schmancy-typewriter>
-  Type this first.
-  <span action="pause" value="1000"></span>
-  Then this after a pause.
-</schmancy-typewriter>
-```
-
-## Properties
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `speed` | number | 50 | Typing speed (ms per char) |
-| `delay` | number | 0 | Initial delay (ms) |
-| `deleteSpeed` | number | 25 | Delete speed (ms per char) |
-| `cyclePause` | number | 1500 | Pause between cycles (ms) |
-| `cursorChar` | string | '' | Cursor character (empty = none) |
-| `loop` | boolean | false | Loop infinitely |
-| `once` | boolean | true | Only animate once per session |
-| `autoStart` | boolean | true | Start automatically |
-
-## Common Patterns
-
-### Hero Headline
-```html
-<schmancy-typewriter speed="100" delay="300">
-  Welcome to the <span cycle="Future | Innovation | Revolution"></span>
-</schmancy-typewriter>
-```
-
-### Product Features
-```html
-<schmancy-typewriter cyclePause="2000">
-  Our product is <span cycle="Fast ⚡ | Secure 🔒 | Reliable ✅ | Modern 🚀"></span>
-</schmancy-typewriter>
-```
-
-### Job Posting
-```html
-<h2>
-  We're hiring <span cycle="Frontend Developers | Backend Engineers | UI/UX Designers"></span>
-</h2>
-```
-
-### Value Propositions
-```html
-<schmancy-typewriter speed="80" cyclePause="1200">
-  Building systems that are
-  <br />
-  <span cycle="Trustless | Permissionless | Transparent | Borderless | Resilient" pause="1500"></span>
-  <br />
-  empowering everyone to operate freely.
-</schmancy-typewriter>
-```
-
-### Terminal Effect
-```html
-<schmancy-typewriter cursorChar="|" speed="30">
-  $ npm install schmancy-ui
-  <span action="pause" value="500"></span>
-  <p>Installing dependencies...</p>
-  <span action="pause" value="1000"></span>
-  <p>✓ Installation complete!</p>
-</schmancy-typewriter>
-```
-
-## Events
-
-```javascript
-element.addEventListener('typeit-complete', () => {
-  console.log('Typing finished!');
-});
-```
-
-## Tips
-
-1. **Speed**: 40-80ms for comfortable reading
-2. **Delays**: Use pauses for emphasis
-3. **Cycling**: Use for rotating content
-4. **Looping**: Great for hero sections
-5. **Cursor**: Only use when needed (terminal effects)
-
-## When to Use What
-
-| Use Case | Recommended API |
-|----------|----------------|
-| Rotating words | `cycle` attribute |
-| Simple pause | `action="pause"` |
-| Manual delete | `action="delete"` |
-| Forever animation | `loop` property |
-| Hero headlines | `cycle` + `cyclePause` |
-| Complex timing | Classic `action` API |
-
-## Migration Examples
-
-### Before (Manual counting)
-```html
-Fast
-<span action="pause" value="1500"></span>
-<span action="delete" value="4"></span>
-Secure
-<span action="pause" value="1500"></span>
-<span action="delete" value="6"></span>
-Reliable
-```
-
-### After (Automatic)
-```html
-<span cycle="Fast | Secure | Reliable" pause="1500"></span>
-```
-
-**Lines reduced:** 7 → 1 (86% reduction!)

package/src/typewriter/test-typewriter.html

@@ -1,97 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Typewriter Test</title>
-  <style>
-    body {
-      font-family: system-ui, -apple-system, sans-serif;
-      max-width: 800px;
-      margin: 40px auto;
-      padding: 20px;
-      line-height: 1.6;
-    }
-    .example {
-      margin: 40px 0;
-      padding: 20px;
-      border: 1px solid #ddd;
-      border-radius: 8px;
-    }
-    h2 {
-      margin-top: 0;
-      color: #333;
-    }
-    .result {
-      min-height: 60px;
-      padding: 20px;
-      background: #f5f5f5;
-      border-radius: 4px;
-      font-size: 18px;
-    }
-  </style>
-</head>
-<body>
-  <h1>Typewriter Component Tests</h1>
-
-  <div class="example">
-    <h2>1. Basic Cycling (New API)</h2>
-    <div class="result">
-      <schmancy-typewriter speed="80">
-        We are <span cycle="developers | designers | innovators"></span>
-      </schmancy-typewriter>
-    </div>
-  </div>
-
-  <div class="example">
-    <h2>2. Hero with Cycling Values</h2>
-    <div class="result">
-      <schmancy-typewriter speed="80" cyclePause="1200">
-        Building systems that are
-        <br />
-        <span cycle="Trustless | Permissionless | Transparent | Borderless | Resilient" pause="1500"></span>
-        <br />
-        empowering everyone to operate freely.
-      </schmancy-typewriter>
-    </div>
-  </div>
-
-  <div class="example">
-    <h2>3. Infinite Loop</h2>
-    <div class="result">
-      <schmancy-typewriter loop cursorChar="|" speed="60">
-        <span cycle="Amazing | Incredible | Fantastic"></span>
-      </schmancy-typewriter>
-    </div>
-  </div>
-
-  <div class="example">
-    <h2>4. Custom Pause per Cycle</h2>
-    <div class="result">
-      <schmancy-typewriter>
-        Our product is <span cycle="Fast ⚡ | Secure 🔒 | Reliable ✅" pause="800"></span>
-      </schmancy-typewriter>
-    </div>
-  </div>
-
-  <div class="example">
-    <h2>5. Mixed Actions (Old API still works)</h2>
-    <div class="result">
-      <schmancy-typewriter>
-        Type this first.
-        <span action="pause" value="1000"></span>
-        Then this after a pause.
-      </schmancy-typewriter>
-    </div>
-  </div>
-
-  <!-- Load your typewriter component here -->
-  <script type="module">
-    // Import your built typewriter component
-    // import './typewriter.js'
-
-    console.log('Typewriter test page loaded');
-    console.log('Make sure to build the component and import it above');
-  </script>
-</body>
-</html>