@whykusanagi/corrupted-theme 0.1.1 → 0.1.2

package/CHANGELOG.md

@@ -21,6 +21,126 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [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,14 @@ 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)
 
 ## Overview
 - **Glassmorphism-first** visual language with layered depth, gradients, and scanlines.
@@ -403,6 +404,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/COMPONENTS_REFERENCE.md

@@ -17,6 +17,12 @@ This document provides a comprehensive reference for all components available in
 6. [API Documentation](#api-documentation)
 7. [Nikke Components](#nikke-components)
 8. [Background & Images](#background--images)
+9. [Extension Components](#extension-components)
+   - [Gallery System](#gallery-system)
+   - [Lightbox](#lightbox)
+   - [NSFW Content Blur](#nsfw-content-blur)
+   - [Social Links List](#social-links-list)
+   - [Countdown Widget](#countdown-widget)
 
 ---
 
@@ -445,7 +451,7 @@ Complete API documentation components for building readable API docs.
 
 ## Nikke Components
 
-Game-specific components for Nikke applications. See [NIKKE_COMPONENTS.md](./NIKKE_COMPONENTS.md) for complete documentation.
+Game-specific components for Nikke applications.
 
 ### Element Badges
 
@@ -632,7 +638,7 @@ All components follow accessibility best practices:
 
 ## Customization
 
-All components use CSS variables for easy customization. See [VARIABLES_REFERENCE.md](./VARIABLES_REFERENCE.md) for complete variable list.
+All components use CSS variables for easy customization. See `src/css/variables.css` for the complete variable list.
 
 ```css
 :root {
@@ -644,16 +650,297 @@ All components use CSS variables for easy customization. See [VARIABLES_REFERENC
 
 ---
 
+## Extension Components
+
+Production-tested components from whykusanagi.xyz for galleries, social links, countdowns, and more. Import via `extensions.css` (included in `theme.css`) or individually.
+
+### Gallery System
+
+Responsive gallery grid with filtering and lightbox integration.
+
+**Filter Bar:**
+```html
+<div class="filter-bar">
+  <button class="filter-btn active" data-filter="all">All</button>
+  <button class="filter-btn" data-filter="photos">Photos</button>
+  <button class="filter-btn" data-filter="art">Art</button>
+</div>
+```
+
+**Gallery Container:**
+```html
+<div class="gallery-container" id="my-gallery">
+  <div class="gallery-item" data-tags="photos">
+    <img src="image.jpg" alt="Description">
+    <div class="gallery-caption">
+      <div class="title">Image Title</div>
+      <div class="meta">Category • Date</div>
+    </div>
+  </div>
+</div>
+```
+
+**Variants:**
+- `.gallery-container.compact` - Smaller grid items (200px min)
+- `.gallery-container.large` - Larger grid items (350px min)
+- `.gallery-item.square` - 1:1 aspect ratio
+- `.gallery-item.portrait` - 3:4 aspect ratio
+- `.gallery-item.landscape` - 16:9 aspect ratio
+- `.filter-bar.left` - Left-aligned filters
+- `.filter-bar.right` - Right-aligned filters
+
+**JavaScript Integration:**
+```javascript
+import { initGallery } from '@whykusanagi/corrupted-theme/gallery';
+
+const gallery = initGallery('#my-gallery', {
+  filterBarSelector: '.filter-bar .filter-btn',
+  enableLightbox: true,
+  enableNsfw: true,
+  filterAnimation: true,
+  onFilter: (filter) => console.log('Filtered:', filter)
+});
+
+// Manual filter
+gallery.filter('photos');
+```
+
+---
+
+### Lightbox
+
+Fullscreen image viewer with keyboard navigation and touch gestures.
+
+```html
+<!-- Lightbox is auto-created by gallery.js -->
+<!-- Manual creation (if needed): -->
+<div class="lightbox" id="my-lightbox">
+  <button class="lightbox-close">&times;</button>
+  <button class="lightbox-prev"><i class="fas fa-chevron-left"></i></button>
+  <img class="lightbox-image" src="" alt="">
+  <button class="lightbox-next"><i class="fas fa-chevron-right"></i></button>
+  <div class="lightbox-caption"></div>
+  <div class="lightbox-counter"></div>
+</div>
+```
+
+**Features:**
+- Keyboard navigation (Arrow keys, Escape)
+- Touch swipe gestures on mobile
+- Click outside to close
+- Image counter display
+- Automatic caption display
+
+**JavaScript API:**
+```javascript
+const gallery = initGallery('#gallery');
+
+// Open specific image
+gallery.openLightbox(0);
+
+// Close lightbox
+gallery.closeLightbox();
+```
+
+---
+
+### NSFW Content Blur
+
+Content warning overlay with click-to-reveal functionality.
+
+```html
+<!-- Default warning text -->
+<div class="gallery-item nsfw-content">
+  <img src="sensitive-image.jpg" alt="Description">
+</div>
+
+<!-- Custom warning text -->
+<div class="gallery-item nsfw-content" data-warning="Sensitive Content">
+  <img src="image.jpg" alt="Description">
+</div>
+```
+
+**States:**
+- Default: Blurred with "18+ Click to View" overlay
+- `.revealed`: Blur removed, overlay hidden
+
+**JavaScript API:**
+```javascript
+const gallery = initGallery('#gallery', {
+  enableNsfw: true,
+  nsfwWarning: 'Click to View',
+  onNsfwReveal: (element) => console.log('Revealed:', element)
+});
+
+// Manual reveal
+gallery.revealNsfw(element);
+```
+
+---
+
+### Social Links List
+
+Link-in-bio style layout for social profiles.
+
+```html
+<div class="social-links-container">
+  <img src="avatar.jpg" alt="Profile" class="profile-avatar">
+  <h1 class="profile-name">@username</h1>
+  <p class="profile-bio">Your bio text here.</p>
+  
+  <div class="link-list">
+    <!-- Platform-specific hover colors -->
+    <a href="#" class="link-item twitter">
+      <i class="fab fa-twitter"></i> Twitter
+    </a>
+    <a href="#" class="link-item instagram">
+      <i class="fab fa-instagram"></i> Instagram
+    </a>
+    <a href="#" class="link-item youtube">
+      <i class="fab fa-youtube"></i> YouTube
+    </a>
+    <a href="#" class="link-item github">
+      <i class="fab fa-github"></i> GitHub
+    </a>
+    <a href="#" class="link-item discord">
+      <i class="fab fa-discord"></i> Discord
+    </a>
+    <a href="#" class="link-item twitch">
+      <i class="fab fa-twitch"></i> Twitch
+    </a>
+    <!-- Default accent color -->
+    <a href="#" class="link-item">
+      <i class="fas fa-globe"></i> Website
+    </a>
+  </div>
+</div>
+```
+
+**Avatar Sizes:**
+- `.profile-avatar.sm` - 100px diameter
+- `.profile-avatar` - 140px diameter (default)
+- `.profile-avatar.lg` - 180px diameter
+
+**Platform Classes:**
+Each platform class applies branded hover colors:
+- `.twitter` - Twitter blue
+- `.instagram` - Instagram gradient
+- `.youtube` - YouTube red
+- `.github` - GitHub dark
+- `.discord` - Discord purple
+- `.twitch` - Twitch purple
+
+---
+
+### Countdown Widget
+
+Event countdown with configurable shapes and animations.
+
+**HTML Container:**
+```html
+<div id="countdown-widget"></div>
+```
+
+**JavaScript Initialization:**
+```javascript
+import { initCountdown } from '@whykusanagi/corrupted-theme/countdown';
+
+// Inline configuration
+initCountdown({
+  config: {
+    title: 'Product Launch',
+    eventDate: '2025-04-01T00:00:00-07:00',
+    completedMessage: 'Now Available!',
+    character: {
+      image: 'character.png',
+      rotation: 0,
+      background: {
+        type: 'diamond',
+        color: 'radial-gradient(circle, rgba(54, 83, 161, 0.6), rgba(217, 79, 144, 0.6))',
+        borderColor: '#4c2967'
+      },
+      overlay: {
+        image: 'overlay.png',
+        position: 'behind',
+        animation: 'float'
+      }
+    },
+    popup: {
+      message: '<strong>Pre-order now!</strong>',
+      frequency: 15000,
+      duration: 5000
+    }
+  }
+});
+
+// Or load from JSON via URL parameter
+// Access: page.html?event=kirara loads /data/countdown/kirara.json
+initCountdown();
+```
+
+**Shape Types:**
+- `diamond` - Rotated square (default)
+- `circle` - Round container
+- `heart` - Heart shape
+- `star` - 5-point star
+- `hexagon` - 6-sided polygon
+- `octagon` - 8-sided polygon
+
+**Configuration Schema:**
+```javascript
+{
+  title: string,              // Display title
+  eventDate: string,          // ISO 8601 date
+  completedMessage: string,   // Message when countdown ends
+  character: {
+    image: string,            // Image URL
+    rotation: number,         // Degrees (0-360)
+    objectPosition: string,   // CSS object-position
+    background: {
+      type: string,           // Shape type
+      color: string,          // CSS background
+      borderColor: string     // Hex color
+    },
+    overlay: {
+      image: string,          // Overlay image URL
+      position: 'behind'|'front',
+      animation: 'float'|null,
+      rotation: number
+    }
+  },
+  popup: {
+    message: string,          // HTML content
+    frequency: number,        // Ms between popups
+    duration: number,         // Ms popup visible
+    colors: {
+      bg: string,
+      border: string,
+      text: string
+    }
+  }
+}
+```
+
+**CSS Classes:**
+- `.countdown-container` - Main wrapper (600×600px)
+- `.shape-container` - Shape wrapper (375×375px)
+- `.shape-container.diamond|circle|heart|star|hexagon|octagon`
+- `.countdown-box` - Timer display
+- `.countdown-popup` - Popup message
+- `.countdown-character` - Character image
+- `.countdown-overlay-wrapper` - Overlay container
+
+---
+
 ## Related Documentation
 
-- [VARIABLES_REFERENCE.md](./VARIABLES_REFERENCE.md) - Complete CSS variables reference
-- [NIKKE_COMPONENTS.md](./NIKKE_COMPONENTS.md) - Nikke-specific components
-- [CUSTOMIZATION.md](./CUSTOMIZATION.md) - Customization guide
-- [ACCESSIBILITY.md](./ACCESSIBILITY.md) - Accessibility standards
+- [README.md](../README.md) - Main documentation and quick start guide
+- [Variables Reference](#customization) - CSS variables for customization (see Customization section above)
+- [Nikke Components](#nikke-components) - Game-specific components (see section above)
 
 ---
 
-**Last Updated:** 2025-11-24  
-**Version:** 1.0  
+**Last Updated:** 2025-11-26  
+**Version:** 1.1  
 **Status:** Complete and Production Ready
 

package/examples/button.html

@@ -116,17 +116,29 @@
   </style>
 </head>
 <body>
+  <!-- Global Navigation -->
   <nav class="navbar">
     <div class="navbar-content">
-      <a href="index.html" class="navbar-logo"><i class="fas fa-arrow-left"></i> Back</a>
-      <div class="navbar-links">
-        <a href="#basic">Basic</a>
-        <a href="#variants">Variants</a>
-        <a href="#sizes">Sizes</a>
-        <a href="#states">States</a>
-        <a href="#icons">Icons</a>
-        <a href="#groups">Groups</a>
-      </div>
+      <a href="index.html" class="navbar-logo"><i class="fas fa-palette"></i> Corrupted Theme</a>
+      <ul class="navbar-links">
+        <li><a href="index.html"><i class="fas fa-home"></i> Home</a></li>
+        <li><a href="showcase-complete.html"><i class="fas fa-cube"></i> Components</a></li>
+        <li><a href="extensions-showcase.html"><i class="fas fa-puzzle-piece"></i> Extensions</a></li>
+        <li class="has-submenu">
+          <a href="#" class="active">
+            <i class="fas fa-flask"></i> Examples
+            <i class="fas fa-chevron-down" style="font-size: 0.7em; margin-left: 4px;"></i>
+          </a>
+          <div class="submenu">
+            <a href="nikke-team-builder.html"><i class="fas fa-users"></i> Nikke Team Builder</a>
+            <a href="button.html" class="active"><i class="fas fa-hand-pointer"></i> Buttons</a>
+            <a href="card.html"><i class="fas fa-square"></i> Cards</a>
+            <a href="form.html"><i class="fas fa-edit"></i> Forms</a>
+            <a href="layout.html"><i class="fas fa-columns"></i> Layouts</a>
+          </div>
+        </li>
+        <li><a href="../docs/COMPONENTS_REFERENCE.md"><i class="fas fa-book"></i> Docs</a></li>
+      </ul>
     </div>
   </nav>
 

package/examples/card.html

@@ -225,16 +225,29 @@
   </style>
 </head>
 <body>
+  <!-- Global Navigation -->
   <nav class="navbar">
     <div class="navbar-content">
-      <a href="index.html" class="navbar-logo"><i class="fas fa-arrow-left"></i> Back</a>
-      <div class="navbar-links">
-        <a href="#basic">Basic</a>
-        <a href="#with-image">Images</a>
-        <a href="#testimonial">Testimonials</a>
-        <a href="#stats">Stats</a>
-        <a href="#product">Product</a>
-      </div>
+      <a href="index.html" class="navbar-logo"><i class="fas fa-palette"></i> Corrupted Theme</a>
+      <ul class="navbar-links">
+        <li><a href="index.html"><i class="fas fa-home"></i> Home</a></li>
+        <li><a href="showcase-complete.html"><i class="fas fa-cube"></i> Components</a></li>
+        <li><a href="extensions-showcase.html"><i class="fas fa-puzzle-piece"></i> Extensions</a></li>
+        <li class="has-submenu">
+          <a href="#" class="active">
+            <i class="fas fa-flask"></i> Examples
+            <i class="fas fa-chevron-down" style="font-size: 0.7em; margin-left: 4px;"></i>
+          </a>
+          <div class="submenu">
+            <a href="nikke-team-builder.html"><i class="fas fa-users"></i> Nikke Team Builder</a>
+            <a href="button.html"><i class="fas fa-hand-pointer"></i> Buttons</a>
+            <a href="card.html" class="active"><i class="fas fa-square"></i> Cards</a>
+            <a href="form.html"><i class="fas fa-edit"></i> Forms</a>
+            <a href="layout.html"><i class="fas fa-columns"></i> Layouts</a>
+          </div>
+        </li>
+        <li><a href="../docs/COMPONENTS_REFERENCE.md"><i class="fas fa-book"></i> Docs</a></li>
+      </ul>
     </div>
   </nav>