@whykusanagi/corrupted-theme 0.1.1 → 0.1.3

package/CHANGELOG.md

@@ -21,6 +21,259 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [0.1.3] - 2025-12-15
+
+### Added
+
+#### Character-Level Corruption System (`src/lib/character-corruption.js`)
+**NEW: CLI Brand Parity** - Matches Celeste CLI's translation-failure aesthetic
+
+- `corruptTextJapanese(text, intensity)` - Character-level Japanese mixing
+  - Mixes Japanese characters INTO English (e.g., "USAGE ANALYTICS" → "US使AGE ANア統LYTICS")
+  - Semantic character selection (Katakana 50%, Kanji 25%, Hiragana 10%, insertions 15%)
+  - Intensity constants: `INTENSITY.MINIMAL` (15%), `INTENSITY.LOW` (25%), `INTENSITY.MEDIUM` (35%), `INTENSITY.HIGH` (45%)
+  - Maximum 45% intensity for accessibility (WCAG AA compliance)
+- `corruptTextSemantic(text, context, intensity)` - Context-aware corruption (future enhancement)
+- `initAutoCorruption()` - Auto-corrupt elements with `.auto-corrupt` class
+- `createCorruptedElement(text, options)` - Programmatically create corrupted elements
+- `stopAutoCorruption(element)`, `restartAutoCorruption(element)` - Control helpers
+
+**Use Cases:**
+- Dashboard titles and headers (recommended: 35% intensity)
+- Section labels and navigation
+- UI text matching CLI branding
+- Randomizes on interval to show dynamic corruption
+
+#### Bootstrap-Equivalent Components (680+ lines added to `components.css`)
+**GOAL: 1:1 Bootstrap Parity** - Build sites without writing custom CSS
+
+**Accordion/Collapse:**
+- `.accordion`, `.accordion-item` - Collapsible panels with glassmorphism
+- `.accordion-header`, `.accordion-body` - Header/content areas
+- `.collapse`, `.collapse.show` - Standalone collapsible utility
+- Auto +/− indicators on active state
+
+**Toast Notifications:**
+- `.toast-container` - Fixed position container (bottom-right)
+- `.toast` with variants: `.success`, `.warning`, `.error`, `.info`
+- `.toast-header`, `.toast-body`, `.toast-close` - Toast structure
+- Slide-in/slide-out animations (300ms)
+- Auto-dismiss support
+- JavaScript API for programmatic toasts
+
+**Button Groups:**
+- `.btn-group` - Horizontal button clusters (no gaps, merged borders)
+- `.btn-group-vertical` - Vertical button stacks
+- `.btn-toolbar` - Toolbar layout with proper spacing
+- `.btn.active` state for grouped buttons
+
+**Input Groups:**
+- `.input-group` - Combined input + button/text addons
+- `.input-group-text` - Prepend/append text labels
+- `.input-group-prepend`, `.input-group-append` - Positioning helpers
+- Seamless border merging with glassmorphism
+
+**Form Enhancements:**
+- `.form-check`, `.form-check-input`, `.form-check-label` - Custom checkboxes/radios
+  - Styled with accent gradient on :checked
+  - ✓ checkmark and ● radio indicators
+- `.form-switch`, `.form-switch-input`, `.form-switch-label` - Toggle switches
+  - Animated slide transition (150ms)
+  - Accent gradient when active
+- `.form-range` - Custom range slider with accent styling
+- `.form-select` - Styled select dropdown with custom arrow
+- `.form-floating` - Material Design-style floating labels
+- `.form-file`, `.form-file-label` - Custom file upload button
+
+**Utility Classes:**
+- `.btn-close` - Standardized close button (× symbol)
+- `.visually-hidden` - Screen reader only content (WCAG)
+- `.text-truncate` - Overflow ellipsis
+- `.ratio`, `.ratio-1x1`, `.ratio-4x3`, `.ratio-16x9`, `.ratio-21x9` - Aspect ratio containers
+
+#### Component JavaScript Helpers (`src/lib/components.js`)
+Interactive functionality for new components:
+
+- `initAccordions()` - Auto-initialize all accordions (click to toggle)
+- `toggleCollapse(element)`, `showCollapse(element)`, `hideCollapse(element)` - Collapse controls
+- `showToast(options)` - Display toast notifications programmatically
+- `toast.success(message, title, duration)` - Convenience method
+- `toast.warning(message, title, duration)` - Convenience method
+- `toast.error(message, title, duration)` - Convenience method
+- `toast.info(message, title, duration)` - Convenience method
+- `toast.dismiss(toastEl, callback)`, `toast.dismissAll()` - Dismissal methods
+- Auto-initialization on DOMContentLoaded
+
+#### Package Exports
+```javascript
+'@whykusanagi/corrupted-theme/character-corruption'  // character-corruption.js
+'@whykusanagi/corrupted-theme/components-js'         // components.js
+```
+
+### Changed
+
+**Component Coverage:** Now 95%+ Bootstrap parity (up from 62%)
+- 40+ existing components (v0.1.2)
+- 25+ new components added (v0.1.3)
+- **Total: 65+ components** - True 1:1 Bootstrap equivalent
+
+**Philosophy:** "Build sites without writing custom CSS"
+- All common UI patterns available as classes
+- No need for bespoke styles in most cases
+- Matches Bootstrap's utility-first approach
+
+### Documentation
+
+#### Branding Standards Integration
+- Character-level corruption matches `docs/brand/TRANSLATION_FAILURE_AESTHETIC.md`
+- Implements CLI's `CorruptTextJapanese()` function in JavaScript
+- Dual corruption systems:
+  - **`corrupted-text.js`** (existing) - Multilingual cycling for loading animations
+  - **`character-corruption.js`** (new) - Character-level mixing for UI text
+- Non-breaking: Both systems coexist for different use cases
+
+#### Usage Guidelines
+- Corruption intensity levels documented (15%, 25%, 35%, 45%)
+- Anti-patterns explicitly banned (leet speak, over-corruption, word replacement)
+- Accessibility compliance maintained (WCAG AA contrast, max 45% intensity)
+- Responsive considerations for new form components
+
+### Performance
+
+- Form components use CSS-only where possible (no JS required)
+- Accordion animations use `max-height` transitions (GPU-accelerated)
+- Toast system reuses single container (no DOM thrashing)
+- Auto-corruption uses `requestAnimationFrame` for smooth updates
+
+### Browser Support
+
+- All new components tested in Chrome 90+, Firefox 88+, Safari 14+
+- Custom form controls use `appearance: none` with fallbacks
+- Range slider styled for both WebKit and Firefox
+- Aspect ratio containers use modern `aspect-ratio` property with padding fallback
+
+---
+
+## [0.1.2] - 2025-11-26
+
+### Added
+
+#### Extension Components (`src/css/extensions.css`)
+Production-tested components from whykusanagi.xyz, now part of the core package:
+
+- **Gallery System**
+  - `.gallery-container` - Responsive grid layout with variants (compact, large)
+  - `.gallery-item` - Image cards with aspect ratio options (square, portrait, landscape)
+  - `.filter-bar` and `.filter-btn` - Category filtering with animated transitions
+  - `gallery.js` - JavaScript module for filtering, lightbox, and NSFW handling
+
+- **Lightbox Component**
+  - `.lightbox` - Fullscreen image viewer overlay
+  - `.lightbox-image`, `.lightbox-close`, `.lightbox-prev`, `.lightbox-next`
+  - `.lightbox-caption`, `.lightbox-counter`
+  - Keyboard navigation (Arrow keys, Escape)
+  - Touch gesture support for mobile
+
+- **NSFW Content Blur**
+  - `.nsfw-content` - Click-to-reveal blur overlay
+  - Custom warning text via `data-warning` attribute
+  - `.revealed` state for toggling visibility
+  - Auto-reveal in lightbox mode
+
+- **Social Links List**
+  - `.social-links-container` - Link-in-bio layout
+  - `.profile-avatar` - Circular avatar with glow (sm, default, lg sizes)
+  - `.profile-name`, `.profile-bio` - Profile text components
+  - `.link-list`, `.link-item` - Styled link buttons
+  - Platform-specific hover colors (twitter, instagram, youtube, github, discord, twitch)
+
+- **Countdown Widget**
+  - `.countdown-container`, `.shape-container` - Event countdown layout
+  - Shape variants: diamond, circle, heart, star, hexagon, octagon
+  - `.countdown-box`, `.countdown-timer` - Timer display
+  - `.countdown-popup` - Animated popup messages
+  - `.countdown-character`, `.countdown-overlay-wrapper` - Image support
+  - `countdown-widget.js` - JavaScript module with JSON config support
+
+#### New JavaScript Modules (`src/lib/`)
+- `gallery.js` - Gallery system with filtering, lightbox, and NSFW handling
+- `countdown-widget.js` - Countdown widget with JSON configuration
+
+#### New Package Exports
+```javascript
+'@whykusanagi/corrupted-theme/extensions' // extensions.css
+'@whykusanagi/corrupted-theme/gallery'    // gallery.js
+'@whykusanagi/corrupted-theme/countdown'  // countdown-widget.js
+```
+
+#### Example Pages
+- `examples/extensions-showcase.html` - Interactive demo for all extension components
+- `examples/index.html` - Central landing hub for the design system with categorized navigation
+- `examples/assets/celeste-avatar.png` - Local avatar image for demos
+
+#### Design System Architecture
+- **Central Landing Hub** (`examples/index.html`)
+  - Hero section with quick install instructions
+  - Categorized cards linking to Core Components, Extensions, Glass Components, API Docs, Nikke, Animations
+  - Quick links for common component pages
+  - Professional Netflix/Meta-level information architecture
+
+- **Global Navigation System**
+  - Consistent navigation bar across all 9 example pages
+  - Home, Components (dropdown), Extensions (dropdown), Examples (dropdown), Docs links
+  - Section anchors in dropdowns for quick navigation
+  - Proper active state highlighting
+
+### Fixed
+
+#### Chrome White Background Flash
+- **Added:** `background-color: var(--bg)` to both `html` and `body` in `typography.css`
+- **Why:** Chrome browsers showed white flash before CSS variables loaded
+- **Impact:** Consistent dark background across all browsers immediately on load
+
+#### Navigation Consistency
+- **Updated:** All 9 example pages now have identical global navigation
+- **Why:** Some pages (button.html, card.html, form.html, layout.html) had minimal "Back" links only
+- **Impact:** Users can navigate the entire design system from any page
+
+#### Dead Links Fixed
+- **Fixed:** "Customization" links pointed to non-existent `CUSTOMIZATION.md`
+- **Changed to:** `COMPONENTS_REFERENCE.md#customization`
+- **Fixed:** Backgrounds section link added to Components dropdown
+
+#### Image Hotlinking
+- **Removed:** All Unsplash hotlinks (9 instances)
+- **Replaced with:** Local `assets/celeste-avatar.png` and `placehold.co` placeholders
+- **Why:** External hotlinks may break, cause CORS issues, or violate terms
+- **Impact:** All demo images load reliably in any environment
+
+### Changed
+
+#### Documentation Updates
+- **README.md** - Added "Extension Components" section with usage examples
+- **COMPONENTS_REFERENCE.md** - Added full documentation for all extension components
+- Updated table of contents in both files
+
+#### CSS Architecture
+- `theme.css` now imports `extensions.css` automatically
+- Cleaned up duplicate NSFW styles (now in extensions.css only)
+- Added explicit background color to `html` element for faster paint
+
+#### Example Page Updates
+- All example pages updated with consistent global navigation
+- `showcase-complete.html` - Added `id="backgrounds"` anchor and dropdown link
+- `index.html` - Transformed into design system landing hub
+- Layouts page added to Examples dropdown across all pages
+
+### Files Added
+- `src/css/extensions.css`
+- `src/lib/gallery.js`
+- `src/lib/countdown-widget.js`
+- `examples/extensions-showcase.html`
+- `examples/assets/celeste-avatar.png`
+
+---
+
 ## [0.1.1] - 2025-11-26
 
 ### Fixed

package/README.md

@@ -11,13 +11,20 @@ A production-ready glassmorphic design system for cinematic, cyberpunk-inspired
 6. [Component Quick Reference](#component-quick-reference)
 7. [Animations & Experience Layer](#animations--experience-layer)
 8. [Nikke Utilities](#nikke-utilities)
-9. [Customization & Tokens](#customization--tokens)
-10. [Coding Standards](#coding-standards)
-11. [Development Workflow](#development-workflow)
-12. [Testing & QA Expectations](#testing--qa-expectations)
-13. [Support](#support)
-14. [Celeste Widget Integration](#celeste-widget-integration-optional)
-15. [License](#license)
+9. [Extension Components](#extension-components)
+10. [Customization & Tokens](#customization--tokens)
+11. [Coding Standards](#coding-standards)
+12. [Development Workflow](#development-workflow)
+13. [Testing & QA Expectations](#testing--qa-expectations)
+14. [Support](#support)
+15. [Celeste Widget Integration](#celeste-widget-integration-optional)
+16. [License](#license)
+
+<div align="center" style="margin: 2rem 0;">
+
+![Corrupted Theme - Glassmorphic Design System](https://s3.whykusanagi.xyz/art/cyber_sailor_moon_trans.png)
+
+</div>
 
 ## Overview
 - **Glassmorphism-first** visual language with layered depth, gradients, and scanlines.
@@ -403,6 +410,89 @@ Class | Behavior
 ```
 All Nikke-specific helpers live alongside the main utilities (`src/css/nikke-utilities.css`) and observe the same token set, so there are no visual disconnects between game-specific and general UI.
 
+## Extension Components
+
+Production-tested components from whykusanagi.xyz for galleries, social links, countdowns, and more. All extension styles are included in `theme.css` or can be imported separately via `extensions.css`.
+
+### Gallery System
+
+Responsive gallery grid with filtering, lightbox, and NSFW content support.
+
+```html
+<div class="filter-bar">
+  <button class="filter-btn active" data-filter="all">All</button>
+  <button class="filter-btn" data-filter="photos">Photos</button>
+</div>
+
+<div class="gallery-container" id="my-gallery">
+  <div class="gallery-item" data-tags="photos">
+    <img src="image.jpg" alt="Description">
+    <div class="gallery-caption">Caption text</div>
+  </div>
+</div>
+```
+
+```javascript
+import { initGallery } from '@whykusanagi/corrupted-theme/gallery';
+
+const gallery = initGallery('#my-gallery', {
+  enableLightbox: true,
+  enableNsfw: true,
+  filterAnimation: true
+});
+
+gallery.filter('photos');     // Filter by category
+gallery.openLightbox(0);      // Open first image
+```
+
+### Social Links List
+
+Link-in-bio style layout with branded platform colors.
+
+```html
+<div class="social-links-container">
+  <img src="avatar.jpg" class="profile-avatar">
+  <h1 class="profile-name">@username</h1>
+  <p class="profile-bio">Your bio here</p>
+  <div class="link-list">
+    <a href="#" class="link-item twitter"><i class="fab fa-twitter"></i> Twitter</a>
+    <a href="#" class="link-item github"><i class="fab fa-github"></i> GitHub</a>
+  </div>
+</div>
+```
+
+### Countdown Widget
+
+Event countdown with configurable shapes (diamond, circle, heart, star, hexagon, octagon).
+
+```javascript
+import { initCountdown } from '@whykusanagi/corrupted-theme/countdown';
+
+initCountdown({
+  config: {
+    title: 'Launch Countdown',
+    eventDate: '2025-04-01T00:00:00-07:00',
+    completedMessage: 'Now Live!',
+    character: {
+      image: 'character.png',
+      background: { type: 'diamond' }
+    }
+  }
+});
+```
+
+### NSFW Content Blur
+
+Click-to-reveal overlay for sensitive content.
+
+```html
+<div class="gallery-item nsfw-content" data-warning="18+ Click to View">
+  <img src="sensitive-image.jpg" alt="Description">
+</div>
+```
+
+See `examples/extensions-showcase.html` for interactive demos and `docs/COMPONENTS_REFERENCE.md` for complete API documentation.
+
 ## Customization & Tokens
 Override only the tokens you need. The defaults intentionally mirror the showcase.
 ```css

package/docs/CAPABILITIES.md

@@ -0,0 +1,209 @@
+# What Can Celeste Do?
+
+Celeste is implemented across 7 different projects and platforms. Here's what you can do with her:
+
+## 🎭 Main Chat & Personality
+
+- **Interactive Chat** - Talk to Celeste with personality responses
+- **Streaming Mode** - Live stream integration with Twitch chat moderation
+- **Text-to-Speech** - Convert responses to audio (ElevenLabs TTS)
+- **User Profiling** - Track behavior and personalize interactions
+- **Behavior Scoring** - Rate user interactions from 0-100
+
+## 📱 Platforms & Channels
+
+### Web
+- **Website Chat Widget** - Chat on whykusanagi.xyz (all pages context-aware)
+- **Art Gallery** - Browse commissioned artwork with NSFW filtering
+- **Character References** - View Celeste design documentation
+- **Social Links** - Aggregated links to all social platforms
+
+### Streaming
+- **Twitch Integration** - Chat moderation, personality injection, events
+- **Stream Announcements** - Hype stream starts with personality
+- **Channel Point Redemptions** - Custom interactive rewards
+- **Chat History** - Learn user patterns for personalized responses
+
+### Content Creation
+- **Social Media Posts** - Generate tweets, TikTok captions, YouTube scripts
+- **Ad Reads** - Product promotion in Celeste's voice (Otaku Tears)
+- **Stream Titles** - Auto-generate attention-grabbing titles
+- **Discord Announcements** - Server-wide updates with personality
+
+### Gaming
+- **Union Raid (NIKKE)** - Game companion for NIKKE: Goddess of Victory
+  - Character database & stats
+  - Team building recommendations
+  - Tier lists by strategy
+  - Farm route guides
+  - Raid strategies & guides
+  - Interception combat tips
+
+### Communication Platforms
+- **Discord Bot** - Custom commands and chat integration
+  - `/vndb` - Visual novel lookups
+  - `/anilist` - Anime/manga lookups
+  - `/steamcharts` - Game statistics
+  - `/illustration` - Art recommendations
+  - Chat responses with personality
+
+### Specialized
+- **Flipper Zero App** - Custom app with animations and personality
+- **CLI Tool (Go)** - Command-line interface for all features
+
+---
+
+## 🧠 Knowledge & Intelligence
+
+- **OpenSearch Integration** - Fast retrieval of facts and data
+- **User Profile Lookup** - Fetch behavior history and patterns
+- **Emote RAG** - Context-aware emoji/emote recommendations
+- **Lore Awareness** - Reference "Abyss" lore (without revealing secrets)
+- **External Data** - VNDB (anime), IGDB (games), Steam API
+
+---
+
+## 🎨 Content Generation
+
+### Text Content
+- Tweets (≤280 chars with hooks + CTAs)
+- TikTok captions (engaging with emotes)
+- YouTube scripts (hook → context → breakdown → recap → CTA)
+- Discord announcements (server updates)
+- Twitch titles (attention-grabbing)
+- Birthday messages, quote tweets, snark replies
+
+### Game Content (via Union Raid)
+- Character recommendations
+- Equipment build guides
+- Squad composition analysis
+- Farm efficiency strategies
+- Raid boss strategies
+- Tier list generation
+
+### Ad Reads
+- Otaku Tears promotion with code "whykusanagi"
+- Playful product integration
+- Wink-nudge humor
+
+---
+
+## 🎯 Behavioral Features
+
+### Chat Moderation
+- Real-time behavior scoring
+- Playful warnings (policy-safe)
+- User infractions tracking
+- Channel point redemptions (e.g., "Beg for Mercy")
+
+### Personality Adaptation
+- **Score ≥20:** Ruthless, dominant, dismissive
+- **Score ≥10:** Full insult mode with mocking
+- **Score ≥5:** Sassy, playful, corrective
+- **Score <5:** Chaotic, seductive, expressive
+
+### Interaction Styles
+- Gaslighting/teasing (playful denial)
+- Hype announcements (kinetic energy)
+- Playful roasts (policy-safe)
+- Wholesome comfort (sincere reassurance)
+- Lore teasing (foreshadow without revealing)
+- Corrective clapback (fix misinformation)
+
+---
+
+## 🚀 Advanced Features
+
+### Routing to Sub-Agents
+- **NIKKE Sub-Agent:** Game-specific queries about characters, tiers, builds
+- Automatic intent detection
+- Graceful fallbacks if unavailable
+- Seamless response formatting
+
+### Environment & Config
+- Secure API key injection via Cloudflare Workers
+- Environment-based configuration (no keys in code)
+- Auto-deployment from GitLab
+- Health monitoring and uptime checks
+
+### Identity & Security
+- Law 0 verification (PGP signatures for Kusanagi)
+- Follower status validation
+- Protected data access (encrypted)
+- Audit logging
+
+---
+
+## 📊 Analytics & Monitoring
+
+- Chat event logging (messages, subs, raids, etc.)
+- User behavior tracking
+- Response quality scoring (0-100)
+- Tone vector analysis (tease/menace/affection/hype)
+- Content archetype classification
+
+---
+
+## 🛠️ Developer Features
+
+- **CLI Tool:** Direct command-line access to all functions
+- **API Contracts:** Well-defined routes and schemas
+- **SDK Guidance:** Go implementation patterns
+- **Comprehensive Documentation:** This file + 50+ capability details
+- **OpenSearch Integration:** RAG-based knowledge retrieval
+
+---
+
+## ❌ What Celeste WON'T Do
+
+- Reveal secret Abyss lore (parentage, late-stage twists)
+- Participate in real-world harassment or threats
+- Provide explicit pornographic content or instructions
+- Encourage self-harm or dangerous behavior
+- Store sensitive PII beyond usernames and IDs
+- Violate platform terms of service
+
+---
+
+## 🔗 Where to Find Celeste
+
+| Platform | URL | Feature |
+|----------|-----|---------|
+| **Website** | https://whykusanagi.xyz | Chat widget on all pages |
+| **Union Raid** | https://raid.whykusanagi.xyz | NIKKE game companion |
+| **Twitch** | https://twitch.tv/whykusanagi | Live chat moderation |
+| **Discord** | [Invite Link] | Custom commands + chat |
+| **Twitter/X** | @whykusanagi | Social media posts |
+| **TikTok** | @whykusanagi | Short-form video captions |
+| **GitHub** | github.com/whykusanagi | Source code & CLI |
+
+---
+
+## 💡 Quick Tips
+
+**Want to see Celeste in action?**
+1. Visit https://whykusanagi.xyz and use the chat widget
+2. Ask her "What can you do?" - she'll explain her capabilities
+3. Try a NIKKE question on Union Raid
+4. Join the Discord for custom commands
+
+**Want to use her in your own project?**
+1. Check out `celesteCLI` on GitHub
+2. Review the API contracts in docs
+3. Deploy to your own infrastructure
+4. Use environment variables for API keys (never hardcode!)
+
+**Want to understand her personality?**
+1. Read `docs/PERSONALITY.md` (this repo)
+2. Check `celeste_essence.json` for the core system prompt
+3. See `content_archetypes.json` for content patterns
+4. Review `insult_library.json` for examples of her voice
+
+---
+
+For detailed technical documentation, see:
+- `../Celeste_Capabilities.json` - Complete capability list
+- `../celeste_essence.json` - System prompt
+- `../routing/routing_rules.json` - Routing logic
+- `PERSONALITY.md` - Personality quick ref
+- `ROUTING.md` - Sub-agent architecture