@whykusanagi/corrupted-theme 0.1.6 → 0.1.7

package/docs/governance/VERSION_REFERENCES.md

@@ -2,7 +2,7 @@
 
 **Purpose**: Complete list of all files containing version numbers that must be updated when releasing a new version.
 
-**Current Version**: 0.1.4
+**Current Version**: 0.1.7
 
 ---
 
@@ -12,7 +12,7 @@
 **Location**: `/package.json`
 **Line**: 3
 ```json
-"version": "0.1.4"
+"version": "0.1.7"
 ```
 
 ### 2. CHANGELOG.md
@@ -62,10 +62,10 @@
 ### 7. showcase-complete.html
 **Location**: `/examples/showcase-complete.html`
 **Lines to update**:
-- Line 1135: "NEW v0.1.4" badge (keep for current release, change to version number after)
-- Line 1317: "NEW v0.1.4" badge (keep for current release, change to version number after)
+- Line 1135: "NEW v0.1.7" badge (keep for current release, change to version number after)
+- Line 1317: "NEW v0.1.7" badge (keep for current release, change to version number after)
 - Line 1697: Footer version `v0.1.X`
-- Line 1835: Comment `<!-- NEW v0.1.4: ... -->`
+- Line 1835: Comment `<!-- NEW v0.1.7: ... -->`
 - Line 1922: Toast message `Welcome to Corrupted Theme v0.1.X!`
 
 ### 8. Other Example Pages
@@ -77,13 +77,13 @@ All have footer version references like:
 <p>... • Corrupted Theme v0.1.0</p>
 ```
 
-**Update these to current version** (currently showing v0.1.0, should be v0.1.4)
+**Update these to current version** (updated to v0.1.7 as of 2026-02-09)
 
 ---
 
 ## Version Bump Procedure
 
-When releasing a new version (e.g., 0.1.4 → 0.1.4):
+When releasing a new version (e.g., 0.1.7 → 0.1.7):
 
 ### Step 1: Core Files
 ```bash
@@ -115,7 +115,7 @@ npm version patch  # or minor, or major
 #    - Footer
 
 # 7. Update showcase-complete.html
-#    - Change "NEW v0.1.4" badges to just version number
+#    - Change "NEW v0.1.7" badges to just version number
 #    - Update footer
 #    - Update toast message
 
@@ -143,7 +143,7 @@ Create `/scripts/bump-version.sh`:
 
 ```bash
 #!/bin/bash
-# Usage: ./scripts/bump-version.sh 0.1.4
+# Usage: ./scripts/bump-version.sh 0.1.7
 
 NEW_VERSION=$1
 OLD_VERSION=$(node -p "require('./package.json').version")
@@ -171,59 +171,57 @@ When updating, search for these patterns:
 
 ```bash
 # Version with v prefix
-"v0.1.4"
+"v0.1.7"
 "v0\.1\.3"
 
 # Version without v prefix
-"0.1.4"
+"0.1.7"
 "0\.1\.3"
 
 # NPM package version
-"@whykusanagi/corrupted-theme@0.1.4"
+"@whykusanagi/corrupted-theme@0.1.7"
 
 # NEW badge references
-"NEW v0.1.4"
-"NEW in v0.1.4"
+"NEW v0.1.7"
+"NEW in v0.1.7"
 ```
 
 ---
 
-## Current Version Discrepancies (As of 2025-12-15)
+## Current Version Discrepancies (As of 2026-02-09)
 
-**Files showing OLD versions that need updating:**
+**All version references have been synchronized to v0.1.7.**
 
-1. `/examples/showcase.html` - Shows v0.1.0 (should be v0.1.4)
-2. `/examples/form.html` - Shows v0.1.0 (should be v0.1.4)
-3. `/examples/layout.html` - Shows v0.1.0 (should be v0.1.4)
-4. `/examples/card.html` - Shows v0.1.0 (should be v0.1.4)
-5. `/examples/button.html` - Shows v0.1.0 (should be v0.1.4)
-6. `/examples/nikke-team-builder.html` - Shows v0.1.0 (should be v0.1.4)
-7. `/examples/showcase-complete.html` footer - Shows v0.1.0 (should be v0.1.4)
-8. `/examples/index.html` - Shows v0.1.2 (should be v0.1.4)
-9. `/docs/platforms/NPM_PACKAGE.md` - Shows v0.1.2 (should be v0.1.4)
-10. `/docs/governance/VERSION_MANAGEMENT.md` - Shows v0.1.2 (should be v0.1.4)
+No outstanding discrepancies. All example footers, documentation files, and package files
+are consistent.
 
-**Action Required**: Update all example footers and documentation to v0.1.4
+### Note: package-lock.json
+
+`package-lock.json` is listed in `.gitignore` and is not tracked by git. This is
+intentional — npm recommends not committing lockfiles for library packages (only for
+applications). CLAUDE.md section 5 references syncing `package-lock.json`, but since
+it's local-only, version sync is handled automatically by `npm version` and does not
+require manual updates.
 
 ---
 
 ## Next Version Release Checklist
 
-When preparing v0.1.4 (or next version):
+When preparing the next version:
 
 - [ ] Update `package.json` version
 - [ ] Add CHANGELOG.md entry with release date
 - [ ] Update NPM_PACKAGE.md (6 locations)
 - [ ] Update VERSION_MANAGEMENT.md (3 locations)
 - [ ] Update index.html hero and footer
-- [ ] Update showcase-complete.html (5 locations)
-- [ ] Update all example page footers (6 files)
+- [ ] Update showcase-complete.html (footer, toast, badges)
+- [ ] Update all example page footers (8 files)
 - [ ] Run version search to verify no old references remain
 - [ ] Build and test Docker container
-- [ ] Git tag release: `git tag v0.1.4`
+- [ ] Git tag release
 - [ ] Publish to npm: `npm publish`
 
 ---
 
-**Last Updated**: 2025-12-15
+**Last Updated**: 2026-02-09
 **Maintained By**: whykusanagi team

package/docs/platforms/NPM_PACKAGE.md

@@ -31,7 +31,7 @@
 ```json
 {
   "name": "@whykusanagi/corrupted-theme",
-  "version": "0.1.4",
+  "version": "0.1.7",
   "description": "Premium corrupted AI aesthetic with glassmorphism and translation-failure linguistics",
   "author": "Kusanagi <you@example.com>",
   "license": "MIT",
@@ -80,7 +80,7 @@ pnpm add @whykusanagi/corrupted-theme
 
 ```html
 <!-- Full theme (8.2KB gzipped) -->
-<link rel="stylesheet" href="https://unpkg.com/@whykusanagi/corrupted-theme@0.1.4/dist/theme.css">
+<link rel="stylesheet" href="https://unpkg.com/@whykusanagi/corrupted-theme@0.1.7/dist/theme.css">
 ```
 
 ### Local Development
@@ -664,7 +664,7 @@ The package follows [Semantic Versioning 2.0.0](https://semver.org/):
 ```
 MAJOR.MINOR.PATCH
 
-Example: 0.1.4
+Example: 0.1.7
          │ │ └─ Patch: Bug fixes (backward compatible)
          │ └─── Minor: New features (backward compatible)
          └───── Major: Breaking changes
@@ -674,8 +674,9 @@ Example: 0.1.4
 
 | Version | Date | Changes | Migration |
 |---------|------|---------|-----------|
-| **0.1.4** | 2025-12-10 | Current stable release | N/A |
-| 0.1.1 | 2025-11-15 | Added interactive states | None required |
+| **0.1.7** | 2026-02-07 | Security, lifecycle, new components | N/A |
+| 0.1.6 | 2026-01-15 | Package cleanup | N/A |
+| 0.1.4 | 2025-12-10 | Character corruption, components | N/A |
 | 0.1.0 | 2025-10-01 | Initial public release | N/A |
 
 ### Upgrade Strategy
@@ -691,7 +692,7 @@ npm update @whykusanagi/corrupted-theme
 npm install @whykusanagi/corrupted-theme@^0.2.0
 
 # Update to specific version
-npm install @whykusanagi/corrupted-theme@0.1.4
+npm install @whykusanagi/corrupted-theme@0.1.7
 
 # Update to latest (including major - may have breaking changes)
 npm install @whykusanagi/corrupted-theme@latest
@@ -849,6 +850,6 @@ import '@whykusanagi/corrupted-theme/src/css/components.css';
 
 **Last Updated**: 2025-12-13
 **Version**: 1.0.0
-**Package Version**: 0.1.4
+**Package Version**: 0.1.7
 **Maintainer**: Celeste Brand System
 **Status**: ✅ Production Ready

package/examples/basic/multi-gallery.html

@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Corrupted Theme - Multi-Gallery Demo</title>
+  <link rel="stylesheet" href="../../src/css/theme.css">
+  <style>
+    body {
+      background: var(--bg);
+      color: var(--text);
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+      line-height: 1.6;
+      padding: 0;
+      margin: 0;
+    }
+
+    .demo {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: var(--spacing-xl);
+    }
+
+    .demo h1 {
+      color: var(--accent);
+      margin-bottom: var(--spacing-sm);
+    }
+
+    .demo h2 {
+      color: var(--accent-light);
+      border-bottom: 1px solid var(--border);
+      padding-bottom: var(--spacing-sm);
+      margin-top: var(--spacing-2xl);
+    }
+
+    .demo-note {
+      color: var(--text-secondary);
+      font-size: 0.9rem;
+      margin-bottom: var(--spacing-lg);
+    }
+
+    /* Placeholder images */
+    .gallery-item img {
+      width: 100%;
+      height: 200px;
+      object-fit: cover;
+      display: block;
+      background: var(--glass);
+    }
+
+    .placeholder-img {
+      width: 100%;
+      height: 200px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--glass);
+      color: var(--text-secondary);
+      font-size: 0.9rem;
+      border-radius: var(--radius-md);
+    }
+  </style>
+</head>
+<body>
+
+<div class="demo">
+  <h1>Multi-Gallery Demo</h1>
+  <p class="demo-note">
+    Two independent gallery instances on the same page.
+    Each has its own filters, lightbox, and state.
+  </p>
+
+  <!-- ==================== GALLERY 1 ==================== -->
+  <h2>Gallery 1 — Landscapes</h2>
+
+  <div class="filter-bar" id="filter-bar-1">
+    <button class="filter-btn active" data-filter="all">All</button>
+    <button class="filter-btn" data-filter="mountains">Mountains</button>
+    <button class="filter-btn" data-filter="ocean">Ocean</button>
+  </div>
+
+  <div class="gallery-container" id="gallery-1">
+    <div class="gallery-item" data-tags="mountains">
+      <div class="placeholder-img">Mountain 1</div>
+      <div class="gallery-caption">Alpine Peak</div>
+    </div>
+    <div class="gallery-item" data-tags="ocean">
+      <div class="placeholder-img">Ocean 1</div>
+      <div class="gallery-caption">Pacific Coast</div>
+    </div>
+    <div class="gallery-item" data-tags="mountains">
+      <div class="placeholder-img">Mountain 2</div>
+      <div class="gallery-caption">Rocky Ridge</div>
+    </div>
+    <div class="gallery-item" data-tags="ocean">
+      <div class="placeholder-img">Ocean 2</div>
+      <div class="gallery-caption">Coral Bay</div>
+    </div>
+  </div>
+
+  <!-- ==================== GALLERY 2 ==================== -->
+  <h2>Gallery 2 — Art</h2>
+
+  <div class="filter-bar" id="filter-bar-2">
+    <button class="filter-btn active" data-filter="all">All</button>
+    <button class="filter-btn" data-filter="digital">Digital</button>
+    <button class="filter-btn" data-filter="traditional">Traditional</button>
+  </div>
+
+  <div class="gallery-container" id="gallery-2">
+    <div class="gallery-item" data-tags="digital">
+      <div class="placeholder-img">Digital Art 1</div>
+      <div class="gallery-caption">Neon Dreams</div>
+    </div>
+    <div class="gallery-item" data-tags="traditional">
+      <div class="placeholder-img">Traditional Art 1</div>
+      <div class="gallery-caption">Ink Wash</div>
+    </div>
+    <div class="gallery-item" data-tags="digital">
+      <div class="placeholder-img">Digital Art 2</div>
+      <div class="gallery-caption">Glitch Portrait</div>
+    </div>
+  </div>
+
+  <div class="glass-card" style="padding: 1.5rem; margin-top: var(--spacing-2xl);">
+    <h3 style="color: var(--accent);">How it works</h3>
+    <p>Each gallery is initialized as a separate instance with its own lightbox and filter state:</p>
+    <pre><code>const g1 = initGallery('#gallery-1');
+const g2 = initGallery('#gallery-2');
+
+// Destroy only one
+g1.destroy();
+// g2 continues working independently</code></pre>
+  </div>
+</div>
+
+<script type="module">
+  import { initGallery } from '../../src/lib/gallery.js';
+
+  // Initialize two independent galleries
+  const gallery1 = initGallery('#gallery-1', {
+    filterBarSelector: '#filter-bar-1 .filter-btn'
+  });
+
+  const gallery2 = initGallery('#gallery-2', {
+    filterBarSelector: '#filter-bar-2 .filter-btn'
+  });
+
+  // Expose for console debugging
+  window._gallery1 = gallery1;
+  window._gallery2 = gallery2;
+</script>
+
+</body>
+</html>

package/examples/button.html

@@ -135,9 +135,12 @@
             <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>
+            <a href="basic/corrupted-text.html"><i class="fas fa-terminal"></i> Character Corruption</a>
+            <a href="basic/typing-animation.html"><i class="fas fa-keyboard"></i> Buffer Corruption</a>
+            <a href="advanced/nsfw-corruption.html"><i class="fas fa-exclamation-triangle"></i> NSFW (18+)</a>
           </div>
         </li>
-        <li><a href="../showcase-complete.html"><i class="fas fa-book"></i> Docs</a></li>
+        <li><a href="showcase-complete.html"><i class="fas fa-book"></i> Docs</a></li>
       </ul>
     </div>
   </nav>
@@ -438,7 +441,7 @@
     </section>
 
     <footer style="text-align: center; padding: var(--spacing-2xl) var(--spacing-lg); margin-top: var(--spacing-2xl); border-top: 1px solid var(--border); color: var(--text-secondary);">
-      <p>Button Component Documentation • Corrupted Theme v0.1.4</p>
+      <p>Button Component Documentation • Corrupted Theme v0.1.7</p>
       <p style="font-size: 0.875rem; margin-top: var(--spacing-md);">
         <a href="index.html" style="color: var(--accent); text-decoration: none;">← Back to Showcase</a>
       </p>

package/examples/card.html

@@ -244,9 +244,12 @@
             <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>
+            <a href="basic/corrupted-text.html"><i class="fas fa-terminal"></i> Character Corruption</a>
+            <a href="basic/typing-animation.html"><i class="fas fa-keyboard"></i> Buffer Corruption</a>
+            <a href="advanced/nsfw-corruption.html"><i class="fas fa-exclamation-triangle"></i> NSFW (18+)</a>
           </div>
         </li>
-        <li><a href="../showcase-complete.html"><i class="fas fa-book"></i> Docs</a></li>
+        <li><a href="showcase-complete.html"><i class="fas fa-book"></i> Docs</a></li>
       </ul>
     </div>
   </nav>
@@ -681,7 +684,7 @@
     </section>
 
     <footer style="text-align: center; padding: var(--spacing-2xl) var(--spacing-lg); margin-top: var(--spacing-2xl); border-top: 1px solid var(--border); color: var(--text-secondary);">
-      <p>Card Components Documentation • Corrupted Theme v0.1.4</p>
+      <p>Card Components Documentation • Corrupted Theme v0.1.7</p>
       <p style="font-size: 0.875rem; margin-top: var(--spacing-md);">
         <a href="index.html" style="color: var(--accent); text-decoration: none;">← Back to Showcase</a>
       </p>

package/examples/extensions-showcase.html

@@ -160,9 +160,12 @@
             <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>
+            <a href="basic/corrupted-text.html"><i class="fas fa-terminal"></i> Character Corruption</a>
+            <a href="basic/typing-animation.html"><i class="fas fa-keyboard"></i> Buffer Corruption</a>
+            <a href="advanced/nsfw-corruption.html"><i class="fas fa-exclamation-triangle"></i> NSFW (18+)</a>
           </div>
         </li>
-        <li><a href="../showcase-complete.html"><i class="fas fa-book"></i> Docs</a></li>
+        <li><a href="showcase-complete.html"><i class="fas fa-book"></i> Docs</a></li>
       </ul>
     </div>
   </nav>
@@ -633,7 +636,7 @@
     <footer style="text-align: center; padding: var(--spacing-2xl) var(--spacing-lg); margin-top: var(--spacing-xl); border-top: 1px solid var(--border); color: var(--text-secondary);">
       <p><strong>Corrupted Theme Extensions</strong> • Production-tested components from whykusanagi.xyz</p>
       <p style="font-size: 0.875rem; margin-top: var(--spacing-md);">
-        <a href="../README.md" class="link">Documentation</a> •
+        <a href="https://github.com/whykusanagi/corrupted-theme#readme" class="link">Documentation</a> •
         <a href="showcase-complete.html" class="link">Full Component Library</a> •
         <a href="https://github.com/whykusanagi/corrupted-theme" class="link">GitHub</a>
       </p>

package/examples/form.html

@@ -201,9 +201,12 @@
             <a href="card.html"><i class="fas fa-square"></i> Cards</a>
             <a href="form.html" class="active"><i class="fas fa-edit"></i> Forms</a>
             <a href="layout.html"><i class="fas fa-columns"></i> Layouts</a>
+            <a href="basic/corrupted-text.html"><i class="fas fa-terminal"></i> Character Corruption</a>
+            <a href="basic/typing-animation.html"><i class="fas fa-keyboard"></i> Buffer Corruption</a>
+            <a href="advanced/nsfw-corruption.html"><i class="fas fa-exclamation-triangle"></i> NSFW (18+)</a>
           </div>
         </li>
-        <li><a href="../showcase-complete.html"><i class="fas fa-book"></i> Docs</a></li>
+        <li><a href="showcase-complete.html"><i class="fas fa-book"></i> Docs</a></li>
       </ul>
     </div>
   </nav>
@@ -550,7 +553,7 @@
     </section>
 
     <footer style="text-align: center; padding: var(--spacing-2xl) var(--spacing-lg); margin-top: var(--spacing-2xl); border-top: 1px solid var(--border); color: var(--text-secondary);">
-      <p>Form Components Documentation • Corrupted Theme v0.1.4</p>
+      <p>Form Components Documentation • Corrupted Theme v0.1.7</p>
       <p style="font-size: 0.875rem; margin-top: var(--spacing-md);">
         <a href="index.html" style="color: var(--accent); text-decoration: none;">← Back to Showcase</a>
       </p>

package/examples/index.html

@@ -461,9 +461,12 @@
             <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>
+            <a href="basic/corrupted-text.html"><i class="fas fa-terminal"></i> Character Corruption</a>
+            <a href="basic/typing-animation.html"><i class="fas fa-keyboard"></i> Buffer Corruption</a>
+            <a href="advanced/nsfw-corruption.html"><i class="fas fa-exclamation-triangle"></i> NSFW (18+)</a>
           </div>
         </li>
-        <li><a href="../showcase-complete.html"><i class="fas fa-book"></i> Docs</a></li>
+        <li><a href="showcase-complete.html"><i class="fas fa-book"></i> Docs</a></li>
       </ul>
     </div>
   </nav>
@@ -473,7 +476,7 @@
     <div class="hero-content">
       <div class="hero-badge">
         <i class="fas fa-sparkles"></i>
-        <span>v0.1.4 — Production Ready</span>
+        <span>v0.1.7 — Production Ready</span>
       </div>
       <h1>Corrupted Theme</h1>
       <p class="hero-description">
@@ -742,13 +745,13 @@
   <footer class="landing-footer">
     <div class="footer-content">
       <div class="footer-links">
-        <a href="../README.md"><i class="fas fa-book"></i> Documentation</a>
-        <a href="../showcase-complete.html"><i class="fas fa-list"></i> Component Reference</a>
+        <a href="https://github.com/whykusanagi/corrupted-theme#readme"><i class="fas fa-book"></i> Documentation</a>
+        <a href="showcase-complete.html"><i class="fas fa-list"></i> Component Reference</a>
         <a href="https://github.com/whykusanagi/corrupted-theme" target="_blank"><i class="fab fa-github"></i> GitHub</a>
         <a href="https://www.npmjs.com/package/@whykusanagi/corrupted-theme" target="_blank"><i class="fab fa-npm"></i> npm</a>
       </div>
       <p class="footer-meta">
-        Corrupted Theme v0.1.4 • Built with <i class="fas fa-heart" style="color: var(--accent);"></i> by 
+        Corrupted Theme v0.1.7 • Built with <i class="fas fa-heart" style="color: var(--accent);"></i> by 
         <a href="https://whykusanagi.xyz" target="_blank">@whykusanagi</a>
       </p>
     </div>