@whykusanagi/corrupted-theme 0.1.5 → 0.1.7

package/CHANGELOG.md

@@ -14,6 +14,59 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [0.1.7] - 2026-02-07
+
+### Security
+- **XSS hardening in celeste-widget.js** - `addMessage()` now uses `textContent` via safe DOM construction instead of `innerHTML` interpolation
+- **HTML injection fix in countdown-widget.js** - `config.popup.message` now rendered with `textContent` instead of `innerHTML`
+- **XSS hardening in components.js** - `showToast()` rebuilt with safe DOM methods (`createElement`/`textContent`) instead of `innerHTML` template
+
+### Added
+- **Lifecycle utilities** - New `TimerRegistry` and `EventTracker` classes (`src/core/`) for consistent timer/listener cleanup across all components
+- **Modal JS** - `ModalManager` with open/close, overlay click-to-close, Escape key, body scroll lock, and `modal:open`/`modal:close` custom events
+- **Dropdown JS** - `DropdownManager` with toggle behavior and click-outside-to-close
+- **Tab JS** - `TabManager` with panel switching via `data-ct-target` attributes
+- **Collapse auto-init** - Existing `toggleCollapse()` wired to `data-ct-toggle="collapse"` data attributes
+- **Carousel component** - New `src/lib/carousel.js` with autoplay, prev/next controls, dot indicators, touch/swipe, keyboard navigation, and pause on hover. CSS added to `components.css`
+- **Unified auto-init** - All interactive components auto-initialize via `data-ct-*` attributes on DOMContentLoaded
+- **`destroyComponents()`** - Tears down all component managers (modal, dropdown, tab, toast) at once
+- **`destroyAllAutoCorruption()`** - Stops all active character corruption intervals
+- **Multi-gallery example** - `examples/basic/multi-gallery.html` demonstrates two independent galleries
+- **Interactive components example** - `examples/interactive-components.html` demonstrates Modal, Dropdown, Tabs, Collapse, Accordion, Carousel, and Toast
+- **`"./carousel"` package export** - Carousel available via `@whykusanagi/corrupted-theme/carousel`
+
+### Fixed
+- **Memory leak: celeste-widget.js** - Added `destroy()` method, tracked all event listeners, popstate handler now calls `updateContext()` instead of re-initializing
+- **Memory leak: gallery.js** - Refactored from singleton to `Gallery` class with per-instance `EventTracker` and `TimerRegistry`. Each instance gets a unique lightbox. `destroy()` removes all listeners and DOM
+- **Memory leak: corruption-loading.js** - All `setTimeout`/`setInterval` calls tracked; added `cancelLoading()` to stop mid-animation
+- **Memory leak: corrupted-text.js** - Tracked `_startDelayId`, `_animateTimeoutId`, `_corruptTimeoutId`; added `destroy()` method
+- **Memory leak: components.js** - Toast auto-dismiss timeout stored on element, cleared on early dismiss; added `destroy()` to `ToastManager`
+- **Memory leak: character-corruption.js** - Replaced unreliable `dataset` string storage with `WeakMap` for interval ID tracking
+- **Memory leak: countdown-widget.js** - Popup `setTimeout` calls tracked in state, cleared in `destroyCountdown()`
+
+### Changed
+- **Dev dependency updates** - Updated `cssnano` ^6 to ^7, `postcss-cli` ^10 to ^11
+- **Node.js engine requirement** - Bumped minimum from >=14.0.0 to >=18.0.0
+- **Gallery multi-instance** - `initGallery()` now returns a `Gallery` instance; backward-compatible `destroyGallery()` still works for default instance
+- **COMPONENTS_REFERENCE.md** - Updated Interactive Components section with `data-ct-*` usage, added Carousel and Lifecycle Management sections
+
+---
+
+## [0.1.6] - 2026-01-16
+
+### Changed
+- **Package Cleanup** - Removed internal documentation from NPM package
+  - Created `docs/planning/` directory for internal planning documents
+  - Moved `COMPONENT_INTEGRATION_PLAN.md` to `docs/planning/`
+  - Moved `CONTENT_CLASSIFICATION_NORMALIZATION.md` to `docs/planning/`
+  - Moved `TERMINOLOGY_CLARIFICATION.md` to `docs/planning/`
+  - Updated `.npmignore` to exclude `docs/planning/` directory
+  - Added `CORRUPTED_THEME_SPEC.md` and `CORRUPTION_BUFFER_IMPLEMENTATIONS.md` to `.npmignore`
+  - No functional changes - purely package cleanup
+  - **Note:** v0.1.5 contained internal planning docs and should not be used. Please upgrade to 0.1.6.
+
+---
+
 ## [0.1.5] - 2026-01-15
 
 ### Fixed

package/README.md

@@ -9,16 +9,18 @@ A production-ready glassmorphic design system for cinematic, cyberpunk-inspired
 4. [Base Layout & Background](#base-layout--background)
 5. [CSS & JS Imports](#css--js-imports)
 6. [Component Quick Reference](#component-quick-reference)
-7. [Animations & Experience Layer](#animations--experience-layer)
-8. [Nikke Utilities](#nikke-utilities)
-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)
+7. [Interactive Components](#interactive-components)
+8. [Animations & Experience Layer](#animations--experience-layer)
+9. [Lifecycle Management](#lifecycle-management)
+10. [Nikke Utilities](#nikke-utilities)
+11. [Extension Components](#extension-components)
+12. [Customization & Tokens](#customization--tokens)
+13. [Coding Standards](#coding-standards)
+14. [Development Workflow](#development-workflow)
+15. [Testing & QA Expectations](#testing--qa-expectations)
+16. [Support](#support)
+17. [Celeste Widget Integration](#celeste-widget-integration-optional)
+18. [License](#license)
 
 <div align="center" style="margin: 2rem 0;">
 
@@ -82,20 +84,30 @@ Copy `src/css` into your project (or use `dist/theme.min.css`) and import it loc
 .
 ├── src/
 │   ├── css/
-│   │   ├── variables.css        # design tokens
-│   │   ├── typography.css       # font stack + hierarchy
-│   │   ├── glassmorphism.css    # shared glass utilities
-│   │   ├── animations.css       # motion + corruption keyframes
-│   │   ├── components.css       # UI primitives + layouts
-│   │   ├── utilities.css        # spacing, flex, layout utilities
-│   │   └── theme.css            # entry point (imports all modules)
+│   │   ├── variables.css          # design tokens
+│   │   ├── typography.css         # font stack + hierarchy
+│   │   ├── glassmorphism.css      # shared glass utilities
+│   │   ├── animations.css         # motion + corruption keyframes
+│   │   ├── components.css         # UI primitives + layouts (incl. carousel)
+│   │   ├── utilities.css          # spacing, flex, layout utilities
+│   │   └── theme.css              # entry point (imports all modules)
+│   ├── core/
+│   │   ├── timer-registry.js      # lifecycle: tracked setTimeout/setInterval/rAF
+│   │   └── event-tracker.js       # lifecycle: tracked addEventListener
 │   └── lib/
-│       ├── corrupted-text.js    # multi-language glitch animation
-│       └── corruption-loading.js# cinematic loading curtain
-├── dist/theme.min.css            # postcss + cssnano build output
-├── examples/showcase-complete.html
-├── scripts/static-server.js      # ESM static server (Docker)
-└── docs/COMPONENTS_REFERENCE.md  # exhaustive snippets
+│       ├── carousel.js            # carousel/slideshow with autoplay + swipe
+│       ├── character-corruption.js# auto-corruption for individual characters
+│       ├── components.js          # modal, dropdown, tabs, collapse, accordion, toast
+│       ├── corrupted-text.js      # multi-language glitch animation
+│       ├── corruption-loading.js  # cinematic loading curtain
+│       ├── countdown-widget.js    # event countdown with shapes
+│       └── gallery.js             # gallery grid with filtering + lightbox
+├── dist/theme.min.css              # postcss + cssnano build output
+├── examples/
+│   ├── showcase-complete.html      # full design system demo
+│   └── interactive-components.html # modal, dropdown, tabs, carousel demo
+├── scripts/static-server.js        # ESM static server (Docker)
+└── docs/COMPONENTS_REFERENCE.md    # exhaustive snippets
 ```
 
 **npm scripts**
@@ -232,21 +244,25 @@ Import only the modules you need for smaller bundle sizes.
 
 ### JavaScript Imports
 
-```html
-<!-- HTML -->
-<script type="module" src="@whykusanagi/corrupted-theme/src/lib/corrupted-text.js"></script>
-<script type="module" src="@whykusanagi/corrupted-theme/src/lib/corruption-loading.js"></script>
+```js
+// Interactive components (modal, dropdown, tabs, collapse, accordion, toast)
+import { initComponents, destroyComponents, showToast, toast }
+  from '@whykusanagi/corrupted-theme/components-js';
+
+// Carousel (separate module)
+import { initCarousel } from '@whykusanagi/corrupted-theme/carousel';
+
+// Corruption effects
+import { initCorruptedText } from '@whykusanagi/corrupted-theme/corrupted-text';
+import { initGallery, destroyGallery } from '@whykusanagi/corrupted-theme/gallery';
+import { initCountdown } from '@whykusanagi/corrupted-theme/countdown';
 ```
 
-```js
-// ES Modules
-import { initCorruptedText } from '@whykusanagi/corrupted-theme/src/lib/corrupted-text.js';
-import { showCorruptionLoading } from '@whykusanagi/corrupted-theme/src/lib/corruption-loading.js';
+Components auto-initialize on `DOMContentLoaded` when imported. For manual control:
 
-document.addEventListener('DOMContentLoaded', () => {
-  initCorruptedText();                       // Initialize glitch text effects
-  // showCorruptionLoading({ force: true }); // Force loader outside 72h cadence
-});
+```js
+initComponents();    // scan DOM for data-ct-* attributes
+destroyComponents(); // tear down all managers and tracked listeners
 ```
 
 ## Component Quick Reference
@@ -317,9 +333,11 @@ function toggleNavbar(button) {
 ```
 
 ### Dropdown
+
+**Zero-JS (data attributes):**
 ```html
 <div class="dropdown">
-  <button class="dropdown-toggle" onclick="toggleDropdown(this)">Menu <i class="fas fa-chevron-down"></i></button>
+  <button class="dropdown-toggle" data-ct-toggle="dropdown">Menu</button>
   <div class="dropdown-menu">
     <a class="dropdown-item">Action</a>
     <a class="dropdown-item">Settings</a>
@@ -328,16 +346,23 @@ function toggleNavbar(button) {
   </div>
 </div>
 ```
+
+**Manual JS (legacy):**
+```html
+<div class="dropdown">
+  <button class="dropdown-toggle" onclick="toggleDropdown(this)">Menu</button>
+  <div class="dropdown-menu">
+    <a class="dropdown-item">Action</a>
+  </div>
+</div>
+```
 ```js
 function toggleDropdown(button) {
   const menu = button.nextElementSibling;
   const open = menu.classList.contains('active');
   document.querySelectorAll('.dropdown-menu').forEach(m => m.classList.remove('active'));
   document.querySelectorAll('.dropdown-toggle').forEach(b => b.classList.remove('active'));
-  if (!open) {
-    menu.classList.add('active');
-    button.classList.add('active');
-  }
+  if (!open) { menu.classList.add('active'); button.classList.add('active'); }
 }
 document.addEventListener('click', e => {
   if (!e.target.closest('.dropdown')) {
@@ -416,6 +441,105 @@ typing.start('Neural corruption detected... System Online');
 
 See `examples/basic/` for SFW examples and `examples/advanced/nsfw-corruption.html` for NSFW demo.
 
+## Interactive Components
+
+v0.1.7 adds JS-driven interactive components that self-initialize via `data-ct-*` attributes. Import the components module and everything wires up automatically on `DOMContentLoaded`.
+
+```html
+<script type="module">
+  import '@whykusanagi/corrupted-theme/components-js';
+  import { initCarousel } from '@whykusanagi/corrupted-theme/carousel';
+</script>
+```
+
+### Modal
+
+```html
+<button class="btn" data-ct-toggle="modal" data-ct-target="#my-modal">Open</button>
+
+<div class="modal-overlay" id="my-modal">
+  <div class="modal">
+    <div class="modal-header">
+      <h3 class="modal-title">Title</h3>
+      <button class="modal-close">&times;</button>
+    </div>
+    <div class="modal-body"><p>Content here.</p></div>
+    <div class="modal-footer">
+      <button class="btn secondary" data-ct-toggle="modal" data-ct-target="#my-modal">Cancel</button>
+      <button class="btn" data-ct-toggle="modal" data-ct-target="#my-modal">Confirm</button>
+    </div>
+  </div>
+</div>
+```
+
+Closes via X button, overlay click, or Escape key. Dispatches `modal:open` / `modal:close` custom events.
+
+### Tabs
+
+```html
+<div class="tabs">
+  <button class="tab active" data-ct-target="#panel-1">Tab 1</button>
+  <button class="tab" data-ct-target="#panel-2">Tab 2</button>
+</div>
+<div class="tab-content active" id="panel-1">Panel 1 content</div>
+<div class="tab-content" id="panel-2">Panel 2 content</div>
+```
+
+### Collapse
+
+```html
+<button class="btn" data-ct-toggle="collapse" data-ct-target="#details">Toggle</button>
+<div class="collapse" id="details">
+  <p>Collapsible content.</p>
+</div>
+```
+
+### Carousel
+
+```html
+<div class="carousel" data-ct-autoplay data-ct-interval="4000">
+  <div class="carousel-inner">
+    <div class="carousel-slide active">Slide 1</div>
+    <div class="carousel-slide">Slide 2</div>
+    <div class="carousel-slide">Slide 3</div>
+  </div>
+</div>
+```
+
+Features: autoplay, prev/next controls, dot indicators, touch/swipe, keyboard navigation (ArrowLeft/Right). Import separately:
+
+```js
+import { initCarousel } from '@whykusanagi/corrupted-theme/carousel';
+```
+
+### Accordion
+
+```html
+<div class="accordion">
+  <div class="accordion-item active">
+    <div class="accordion-header">Question 1</div>
+    <div class="accordion-body"><p>Answer 1</p></div>
+  </div>
+  <div class="accordion-item">
+    <div class="accordion-header">Question 2</div>
+    <div class="accordion-body"><p>Answer 2</p></div>
+  </div>
+</div>
+```
+
+### Toast Notifications
+
+```js
+import { toast } from '@whykusanagi/corrupted-theme/components-js';
+
+toast.success('Operation completed.');
+toast.warning('Check your input.');
+toast.error('Something went wrong.');
+toast.info('FYI: update available.');
+```
+
+See `examples/interactive-components.html` for a live demo of all interactive components.
+
 ## Animations & Experience Layer
 
 ### Standard CSS Animations
@@ -448,6 +572,46 @@ Class | Behavior
 - Helper functions for random phrase selection
 - Module: `src/core/corruption-phrases.js`
 
+## Lifecycle Management
+
+All JS components follow a consistent init/destroy pattern to prevent memory leaks in SPAs and dynamic UIs.
+
+### Destroying Components
+
+```js
+import { destroyComponents } from '@whykusanagi/corrupted-theme/components-js';
+import { destroyGallery } from '@whykusanagi/corrupted-theme/gallery';
+
+// Tear down all interactive components (modal, dropdown, tabs, accordion, toast)
+destroyComponents();
+
+// Destroy default gallery instance
+destroyGallery();
+```
+
+### Multi-Instance Gallery
+
+```js
+import { initGallery } from '@whykusanagi/corrupted-theme/gallery';
+
+const g1 = initGallery('#gallery-1', { enableLightbox: true });
+const g2 = initGallery('#gallery-2', { enableLightbox: true });
+
+// Each instance has independent filters, lightbox, and state
+g1.destroy();  // only tears down gallery-1
+```
+
+See `examples/basic/multi-gallery.html` for a working multi-instance demo.
+
+### Core Utilities
+
+The `src/core/` directory provides lifecycle primitives used by all components:
+
+- **TimerRegistry** (`timer-registry.js`) — wraps `setTimeout`, `setInterval`, and `requestAnimationFrame` with bulk `clearAll()`
+- **EventTracker** (`event-tracker.js`) — wraps `addEventListener` with bulk `removeAll()`
+
+These ensure no orphaned timers or listeners remain after `destroy()`.
+
 ## Nikke Utilities
 ```html
 <div class="element-pills">
@@ -480,7 +644,7 @@ Production-tested components from whykusanagi.xyz for galleries, social links, c
 
 ### Gallery System
 
-Responsive gallery grid with filtering, lightbox, and NSFW content support.
+Responsive gallery grid with filtering, lightbox, and NSFW content support. Supports multiple independent instances on the same page.
 
 ```html
 <div class="filter-bar">
@@ -497,7 +661,7 @@ Responsive gallery grid with filtering, lightbox, and NSFW content support.
 ```
 
 ```javascript
-import { initGallery } from '@whykusanagi/corrupted-theme/gallery';
+import { initGallery, destroyGallery } from '@whykusanagi/corrupted-theme/gallery';
 
 const gallery = initGallery('#my-gallery', {
   enableLightbox: true,
@@ -507,6 +671,7 @@ const gallery = initGallery('#my-gallery', {
 
 gallery.filter('photos');     // Filter by category
 gallery.openLightbox(0);      // Open first image
+gallery.destroy();            // Clean up (removes lightbox, listeners, timers)
 ```
 
 ### Social Links List

package/docs/COMPONENTS_REFERENCE.md

@@ -12,17 +12,19 @@ This document provides a comprehensive reference for all components available in
 1. [Glass Components](#glass-components)
 2. [Standard Components](#standard-components)
 3. [Interactive Components](#interactive-components)
-4. [Data Display](#data-display)
-5. [Navigation](#navigation)
-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)
+   - [Modals](#modals) | [Tooltips](#tooltips) | [Dropdowns](#dropdowns) | [Tabs](#tabs) | [Collapse](#collapse) | [Carousel](#carousel)
+4. [Lifecycle Management](#lifecycle-management)
+5. [Data Display](#data-display)
+6. [Navigation](#navigation)
+7. [API Documentation](#api-documentation)
+8. [Nikke Components](#nikke-components)
+9. [Background & Images](#background--images)
+10. [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)
 
 ---
 
@@ -155,41 +157,47 @@ Code block display component.
 
 ## Interactive Components
 
+All interactive components support **data-attribute initialization** via `data-ct-*` attributes and **programmatic control** via JS imports. Import the components module:
+
+```javascript
+import { openModal, closeModal, destroyComponents } from '@whykusanagi/corrupted-theme/components-js';
+```
+
 ### Modals
 
 ```html
-<!-- Trigger Button -->
-<button class="btn" onclick="openModal('my-modal')">Open Modal</button>
+<!-- Trigger via data attribute -->
+<button class="btn" data-ct-toggle="modal" data-ct-target="#my-modal">Open Modal</button>
 
-<!-- Modal -->
+<!-- Modal overlay -->
 <div class="modal-overlay" id="my-modal">
   <div class="modal">
     <div class="modal-header">
       <h3 class="modal-title">Modal Title</h3>
-      <button class="modal-close" onclick="closeModal('my-modal')">&times;</button>
+      <button class="modal-close">&times;</button>
     </div>
     <div class="modal-body">
       <p>Modal content goes here</p>
     </div>
     <div class="modal-footer">
-      <button class="btn secondary" onclick="closeModal('my-modal')">Cancel</button>
-      <button class="btn" onclick="closeModal('my-modal')">Confirm</button>
+      <button class="btn secondary" data-ct-toggle="modal" data-ct-target="#my-modal">Cancel</button>
+      <button class="btn">Confirm</button>
     </div>
   </div>
 </div>
 ```
 
-**JavaScript:**
-```javascript
-function openModal(id) {
-  document.getElementById(id).classList.add('active');
-  document.body.style.overflow = 'hidden';
-}
+**Features:**
+- Close button (`.modal-close`) auto-wired
+- Click overlay background to close
+- Escape key closes active modals
+- Body scroll lock while open
+- Custom events: `modal:open`, `modal:close`
 
-function closeModal(id) {
-  document.getElementById(id).classList.remove('active');
-  document.body.style.overflow = '';
-}
+**Programmatic API:**
+```javascript
+openModal('#my-modal');
+closeModal('#my-modal');
 ```
 
 ### Tooltips
@@ -210,8 +218,8 @@ function closeModal(id) {
 
 ```html
 <div class="dropdown">
-  <button class="dropdown-toggle" onclick="toggleDropdown(this)">
-    Dropdown <i class="fas fa-chevron-down"></i>
+  <button class="dropdown-toggle" data-ct-toggle="dropdown">
+    Dropdown
   </button>
   <div class="dropdown-menu">
     <a href="#" class="dropdown-item">Action 1</a>
@@ -222,16 +230,115 @@ function closeModal(id) {
 </div>
 ```
 
+**Features:**
+- Click toggle to open/close
+- Click outside to close
+- Multiple dropdowns don't conflict
+
 ### Tabs
 
 ```html
 <div class="tabs">
-  <button class="tab active" onclick="switchTab(this, 'tab-1')">Tab 1</button>
-  <button class="tab" onclick="switchTab(this, 'tab-2')">Tab 2</button>
+  <button class="tab active" data-ct-target="#panel-1">Tab 1</button>
+  <button class="tab" data-ct-target="#panel-2">Tab 2</button>
+</div>
+
+<div id="panel-1" class="tab-content active">Tab 1 content</div>
+<div id="panel-2" class="tab-content">Tab 2 content</div>
+```
+
+### Collapse
+
+```html
+<button class="btn" data-ct-toggle="collapse" data-ct-target="#details">
+  Toggle Details
+</button>
+<div class="collapse" id="details">
+  <p>Collapsible content here.</p>
 </div>
+```
+
+### Carousel
+
+```html
+<div class="carousel" data-ct-autoplay data-ct-interval="5000">
+  <div class="carousel-inner">
+    <div class="carousel-slide active">
+      <img src="slide1.jpg" alt="Slide 1">
+    </div>
+    <div class="carousel-slide">
+      <img src="slide2.jpg" alt="Slide 2">
+    </div>
+    <div class="carousel-slide">
+      <img src="slide3.jpg" alt="Slide 3">
+    </div>
+  </div>
+</div>
+```
+
+**Programmatic API:**
+```javascript
+import { initCarousel } from '@whykusanagi/corrupted-theme/carousel';
+
+const carousel = initCarousel('.carousel', {
+  autoplay: true,
+  interval: 5000,
+  indicators: true,
+  controls: true,
+  keyboard: true,
+  touch: true,
+  pauseOnHover: true
+});
+
+carousel.next();
+carousel.prev();
+carousel.goTo(2);
+carousel.destroy();
+```
+
+**Features:**
+- Autoplay with pause on hover
+- Prev/next controls (glassmorphic)
+- Dot indicators
+- Touch/swipe support
+- Keyboard navigation (arrow keys)
+
+---
+
+## Lifecycle Management
+
+All JS-driven components support proper initialization and teardown.
+
+### Init / Destroy Pattern
+
+```javascript
+import { initGallery, destroyGallery } from '@whykusanagi/corrupted-theme/gallery';
+import { initCarousel, destroyCarousel } from '@whykusanagi/corrupted-theme/carousel';
+import { destroyComponents } from '@whykusanagi/corrupted-theme/components-js';
+
+// Components auto-initialize on DOMContentLoaded when data-ct-* attributes
+// are present. For manual control:
+const gallery = initGallery('#my-gallery');
+const carousel = initCarousel('.my-carousel', { autoplay: true });
+
+// Tear down individual components
+gallery.destroy();
+carousel.destroy();
+
+// Or tear down all component managers at once
+destroyComponents();
+```
+
+### Multi-Instance Support
+
+Gallery and Carousel support multiple independent instances on the same page:
+
+```javascript
+const gallery1 = initGallery('#gallery-1');
+const gallery2 = initGallery('#gallery-2');
+// Each has independent filters, lightbox, and state
 
-<div id="tab-1" class="tab-content active">Tab 1 content</div>
-<div id="tab-2" class="tab-content">Tab 2 content</div>
+gallery1.destroy(); // Only destroys gallery1
 ```
 
 ---
@@ -940,7 +1047,7 @@ initCountdown();
 
 ---
 
-**Last Updated:** 2025-11-26  
-**Version:** 1.1  
+**Last Updated:** 2026-02-07
+**Version:** 2.0
 **Status:** Complete and Production Ready
 

package/docs/governance/VERSION_MANAGEMENT.md

@@ -104,7 +104,7 @@ Increment when you make **backward-compatible bug fixes**:
 - **Public API**: Not stable yet
 - **Use case**: Early adopters, experimentation
 
-**Current Celeste version**: `0.1.2` (pre-1.0.0)
+**Current Celeste version**: `0.1.7` (pre-1.0.0)
 
 ### Post-1.0.0 (Stable)
 
@@ -441,7 +441,7 @@ npm view @whykusanagi/corrupted-theme version
 
 **Last Updated**: 2025-12-13
 **Version**: 1.0.0
-**Current Celeste Version**: 0.1.2
+**Current Celeste Version**: 0.1.7
 **Versioning Spec**: Semantic Versioning 2.0.0
 **Maintainer**: Celeste Brand System
 **Status**: ✅ Active Policy