fix(0.2.1): bundle dist CSS + JSON-attribute browser compat

CHANGELOG.md

@@ -9,6 +9,28 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [0.2.1] - 2026-05-23
+
+> **Bundle-fix patch.** Restores foundational class styling (`.card`, `.btn`, `.glass-container*`, etc.) on CDN consumers and fixes a silent browser-compat regression in five JS modules. No source API changes — drop-in replacement for 0.2.0.
+
+### Fixed
+
+- **`dist/theme.min.css` now bundles all partials.** 0.2.0 shipped a build that preserved `@import './variables.css'` etc. verbatim, so CDN consumers of `dist/theme.min.css` got an effectively empty stylesheet (all of `glassmorphism`, `components`, `utilities`, `typography`, `extensions` 404'd). Added `postcss-import` to the postcss pipeline so dist is a real single-file bundle (3.9 kB → 79.5 kB). Symptom: `.card` lost its glassmorphism on `@latest` even though the source CSS was unchanged.
+- **`toast.css` and `seamless-background.css` are now reachable from the main bundle.** They shipped in 0.2.0 only as deep-import endpoints; anyone using `<div class="corrupted-toast">` or `.seamless-bg-host` after loading the main stylesheet got unstyled markup. Both are now `@import`ed by `src/css/theme.css`.
+- **JSON imports replaced with codegen ES modules.** Five JS modules used `import x from '../data/foo.json' with { type: 'json' }`, which only parses in Chromium 123+. Safari and Firefox raised SyntaxError on `<script type="module">` loads. Affected: `corruption-charsets.js`, `corruption-phrases.js`, `typing-animation.js`, `corruption-loading.js`, `character-corruption.js`. The canonical JSON in `src/data/` stays the source of truth; a build step (`scripts/inline-data.js`, wired via `prebuild`/`pretest`/`prepublishOnly`) emits sibling `*.data.js` modules that re-export the parsed JSON via plain `export default`. Cross-language consumers (Go CLI, etc.) continue to read the JSON files unchanged.
+
+### Added
+
+- `npm run data:generate` — regenerates `src/data/*.data.js` from canonical JSON. Runs automatically before `build`, `test`, and `publish`.
+- `prepublishOnly` script — guarantees codegen + build + tests pass before any `npm publish` attempt.
+
+### Internal
+
+- Added `postcss-import@^16.1.1` to devDependencies.
+- `src/data/charsets.data.js`, `colors.data.js`, `phrases.data.js` are committed generated artifacts; do not hand-edit (header comment notes this).
+
+---
+
 ## [0.2.0] - 2026-05-18
 
 > **Significant release.** Reframes corrupted-theme as a durable cross-project foundation. Canonical JSON source of truth, CDN distribution, 14 new base components, drift reconvergence with downstream sites, and a `.container` redesign that is a breaking change.

README.md

@@ -81,7 +81,7 @@ npm install @whykusanagi/corrupted-theme
 ```html
 <!-- Pinned version (recommended for production) -->
 <link rel="stylesheet"
-      href="https://cdn.nikkers.cc/corrupted-theme/@0.2.0/dist/theme.min.css">
+      href="https://cdn.nikkers.cc/corrupted-theme/@0.2.1/dist/theme.min.css">
 
 <!-- Floating @latest (use only for sites you control and update together) -->
 <link rel="stylesheet"
@@ -105,9 +105,9 @@ Both domains serve the same content. Use the domain that matches your site's roo
 **Pinned version** (production-safe — breaking changes never auto-propagate):
 ```html
 <link rel="stylesheet"
-      href="https://cdn.nikkers.cc/corrupted-theme/@0.2.0/dist/theme.min.css">
+      href="https://cdn.nikkers.cc/corrupted-theme/@0.2.1/dist/theme.min.css">
 <script type="module"
-        src="https://cdn.nikkers.cc/corrupted-theme/@0.2.0/dist/corrupted-text.min.js"></script>
+        src="https://cdn.nikkers.cc/corrupted-theme/@0.2.1/dist/corrupted-text.min.js"></script>
 ```
 
 **Floating `@latest`** (first-party sites that publish together — updates within ~5 minutes):

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.2.0` (pre-1.0.0)
+**Current Celeste version**: `0.2.1` (pre-1.0.0)
 
 ### Post-1.0.0 (Stable)
 
@@ -484,7 +484,7 @@ context.
 
 **Last Updated**: 2025-12-13
 **Version**: 1.0.0
-**Current Celeste Version**: 0.2.0
+**Current Celeste Version**: 0.2.1
 **Versioning Spec**: Semantic Versioning 2.0.0
 **Maintainer**: Celeste Brand System
 **Status**: ✅ Active Policy

docs/governance/VERSION_REFERENCES.md

@@ -2,16 +2,16 @@
 
 **Purpose**: Canonical list of every file containing a version number. Update all of these when releasing a new version.
 
-**Current Version**: 0.2.0
+**Current Version**: 0.2.1
 
 ---
 
 ## Files That MUST Be Updated on Every Release
 
 | # | File | Location(s) | What to change |
 |---|------|-------------|----------------|
-| 1 | `package.json` | line 3 | `"version": "0.2.0"` |
-| 2 | `package-lock.json` | lines 3 and 9 | `"version": "0.2.0"` (both occurrences) |
+| 1 | `package.json` | line 3 | `"version": "0.2.1"` |
+| 2 | `package-lock.json` | lines 3 and 9 | `"version": "0.2.1"` (both occurrences) |
 | 3 | `CHANGELOG.md` | top of file | Add new `## [0.1.X] - YYYY-MM-DD` section |
 | 4 | `README.md` | search for old ver | Any install/usage examples with pinned version |
 | 5 | `index.html` *(root)* | lines 476, 725 | Hero badge `v0.1.X` and footer `Corrupted Theme v0.1.X` |
@@ -49,8 +49,8 @@
 ```bash
 # Set these BEFORE running — OLD must be the current version on main,
 # NEW must be the version you're bumping to. They must differ.
-NEW=0.2.1    # ← target version
-OLD=0.2.0    # ← currently shipped version (matches package.json today)
+NEW=0.2.2    # ← target version
+OLD=0.2.1    # ← currently shipped version (matches package.json today)
 
 # 1. Core package files (auto-syncs both package.json and package-lock.json)
 npm version patch --no-git-tag-version   # or minor / major
@@ -79,7 +79,7 @@ grep -rn "${OLD}" . --include="*.html" --include="*.md" --include="*.json" \
 ## Verify Current State
 
 ```bash
-# Quick check — should only show 0.2.0 in live files, old versions only in CHANGELOG
+# Quick check — should only show 0.2.1 in live files, old versions only in CHANGELOG
 grep -rn "0\.1\.[0-9]" . --include="*.html" --include="*.json" \
   | grep -v node_modules | grep -v ".git"
 ```

docs/platforms/NPM_PACKAGE.md

@@ -39,7 +39,7 @@ All examples in this package are deployed to **[corrupted.whykusanagi.xyz](https
 ```json
 {
   "name": "@whykusanagi/corrupted-theme",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Premium corrupted AI aesthetic with glassmorphism and translation-failure linguistics",
   "author": "Kusanagi <you@example.com>",
   "license": "MIT",
@@ -88,7 +88,7 @@ pnpm add @whykusanagi/corrupted-theme
 
 ```html
 <!-- Full theme (8.2KB gzipped) -->
-<link rel="stylesheet" href="https://unpkg.com/@whykusanagi/corrupted-theme@0.2.0/dist/theme.css">
+<link rel="stylesheet" href="https://unpkg.com/@whykusanagi/corrupted-theme@0.2.1/dist/theme.css">
 ```
 
 > **Preferred CDN**: Use the live-site CDN for zero-latency delivery and SRI-verified assets. See [`docs/CDN_CONSUMPTION.md`](../CDN_CONSUMPTION.md) for details.
@@ -674,7 +674,7 @@ The package follows [Semantic Versioning 2.0.0](https://semver.org/):
 ```
 MAJOR.MINOR.PATCH
 
-Example: 0.2.0
+Example: 0.2.1
          │ │ └─ Patch: Bug fixes (backward compatible)
          │ └─── Minor: New features (backward compatible)
          └───── Major: Breaking changes
@@ -684,7 +684,8 @@ Example: 0.2.0
 
 | Version | Date | Changes | Migration |
 |---------|------|---------|-----------|
-| **0.2.0** | 2026-05-18 | Canonical JSON data layer, CDN distribution, DecryptReveal, CRTEffects, animation-blocks (10 classes), 7 new widgets, 5 utility modules, glassmorphism CSS merge, UMD build, .container redesign | [Migration guide](../MIGRATION_CONTAINER_0.2.0.md) |
+| **0.2.1** | 2026-05-23 | Bundle-fix patch: `dist/theme.min.css` now inlines all `@import`s (restores `.card` etc. on CDN); `toast.css` + `seamless-background.css` reachable from main bundle; JSON imports converted to codegen ES modules for Safari/Firefox compat | N/A — drop-in replacement |
+| 0.2.0 | 2026-05-18 | Canonical JSON data layer, CDN distribution, DecryptReveal, CRTEffects, animation-blocks (10 classes), 7 new widgets, 5 utility modules, glassmorphism CSS merge, UMD build, .container redesign | [Migration guide](../MIGRATION_CONTAINER_0.2.0.md) |
 | 0.1.9 | 2026-04-19 | CorruptedText dedup, TypingAnimation buffer redesign, NSFW page consolidation, layout fix, orphan docs removed, CI workflow | N/A |
 | 0.1.8 | 2026-03-01 | GLSL vortex, Canvas particles, new JS components | N/A |
 | 0.1.7 | 2026-02-07 | Security, lifecycle, new components | N/A |
@@ -702,10 +703,10 @@ npm list @whykusanagi/corrupted-theme
 npm update @whykusanagi/corrupted-theme
 
 # Update to latest minor version
-npm install @whykusanagi/corrupted-theme@^0.2.0
+npm install @whykusanagi/corrupted-theme@^0.2.1
 
 # Update to specific version
-npm install @whykusanagi/corrupted-theme@0.2.0
+npm install @whykusanagi/corrupted-theme@0.2.1
 
 # Update to latest (including major - may have breaking changes)
 npm install @whykusanagi/corrupted-theme@latest
@@ -844,6 +845,6 @@ import '@whykusanagi/corrupted-theme/src/css/components.css';
 
 **Last Updated**: 2025-12-13
 **Version**: 1.0.0
-**Package Version**: 0.2.0
+**Package Version**: 0.2.1
 **Maintainer**: Celeste Brand System
 **Status**: ✅ Production Ready

examples/button.html

@@ -440,7 +440,7 @@ <h3><i class="fas fa-code"></i> Customization via Variables</h3>
     </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.2.0</p>
+      <p>Button Component Documentation • Corrupted Theme v0.2.1</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>

examples/card.html

@@ -683,7 +683,7 @@ <h4>Lightning Fast</h4>
     </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.2.0</p>
+      <p>Card Components Documentation • Corrupted Theme v0.2.1</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>

examples/form.html

@@ -552,7 +552,7 @@ <h3><i class="fas fa-file-alt"></i> Complete Form Example</h3>
     </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.2.0</p>
+      <p>Form Components Documentation • Corrupted Theme v0.2.1</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>

examples/index.html

@@ -492,7 +492,7 @@
     <div class="hero-content">
       <div class="hero-badge">
         <i class="fas fa-sparkles"></i>
-        <span>v0.2.0 — Production Ready</span>
+        <span>v0.2.1 — Production Ready</span>
       </div>
       <h1>Corrupted Theme</h1>
       <p class="hero-description">
@@ -843,7 +843,7 @@ <h4>Production Tested</h4>
         <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.2.0 • Built with <i class="fas fa-heart" style="color: var(--accent);"></i> by
+        Corrupted Theme v0.2.1 • Built with <i class="fas fa-heart" style="color: var(--accent);"></i> by
         <a href="https://whykusanagi.xyz" target="_blank">@whykusanagi</a>
       </p>
     </div>

examples/layout.html

@@ -513,7 +513,7 @@ <h4>Flexbox Wrap</h4>
     </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>Layout Patterns Documentation • Corrupted Theme v0.2.0</p>
+      <p>Layout Patterns Documentation • Corrupted Theme v0.2.1</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>

examples/nikke-team-builder.html

@@ -565,7 +565,7 @@ <h3 style="color: var(--accent); margin-bottom: var(--spacing-md);">Unit Selecti
     </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>Nikke Team Builder Example • Corrupted Theme v0.2.0</p>
+      <p>Nikke Team Builder Example • Corrupted Theme v0.2.1</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> •
         <a href="showcase-complete.html#nikke" style="color: var(--accent); text-decoration: none;">Documentation</a>

examples/showcase-complete.html

@@ -1805,7 +1805,7 @@ <h4 style="color: white;">Dark Overlay</h4>
 
     <!-- Footer -->
     <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><strong>Corrupted Theme</strong> v0.2.0 • Built with <i class="fas fa-heart" style="color: var(--accent);"></i> by whykusanagi</p>
+      <p><strong>Corrupted Theme</strong> v0.2.1 • Built with <i class="fas fa-heart" style="color: var(--accent);"></i> by whykusanagi</p>
       <p style="font-size: 0.875rem; margin-top: var(--spacing-md);">
         <a href="https://github.com/whykusanagi/corrupted-theme#readme" class="link">Documentation</a> •
         <a href="#customization" class="link">Customization</a> •
@@ -2028,7 +2028,7 @@ <h4 style="color: white;">Dark Overlay</h4>
 
     // Auto-show welcome message on page load
     setTimeout(() => {
-      toast.success('Welcome to Corrupted Theme v0.2.0!', 'Welcome', 5000);
+      toast.success('Welcome to Corrupted Theme v0.2.1!', 'Welcome', 5000);
     }, 1000);
   </script>
 </body>

examples/showcase.html

@@ -489,7 +489,7 @@ <h2><i class="fas fa-palette"></i> Color Palette</h2>
 
     <!-- Footer -->
     <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><strong>Corrupted Theme</strong> v0.2.0 • Built with <i class="fas fa-heart" style="color: var(--accent);"></i> by whykusanagi</p>
+      <p><strong>Corrupted Theme</strong> v0.2.1 • Built with <i class="fas fa-heart" style="color: var(--accent);"></i> by whykusanagi</p>
       <p style="font-size: 0.875rem; margin-top: var(--spacing-md);">
         <a href="https://github.com/whykusanagi/corrupted-theme#readme" class="link">Documentation</a> •
         <a href="#customization" class="link">Customization</a> •

index.html

@@ -473,7 +473,7 @@
     <div class="hero-content">
       <div class="hero-badge">
         <i class="fas fa-sparkles"></i>
-        <span>v0.2.0 — Production Ready</span>
+        <span>v0.2.1 — Production Ready</span>
       </div>
       <h1>Corrupted Theme</h1>
       <p class="hero-description">
@@ -790,7 +790,7 @@ <h4>Production Tested</h4>
         <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.2.0 • Built with <i class="fas fa-heart" style="color: var(--accent);"></i> by
+        Corrupted Theme v0.2.1 • Built with <i class="fas fa-heart" style="color: var(--accent);"></i> by
         <a href="https://whykusanagi.xyz" target="_blank">@whykusanagi</a>
       </p>
     </div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whykusanagi/corrupted-theme",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "type": "module",
   "description": "A dark, glassmorphic design system with pink/purple accents. Perfect for creating modern, visually striking web applications.",
   "main": "src/css/theme.css",
@@ -105,19 +105,24 @@
     "cssnano": "^7.1.9",
     "postcss": "^8.5.14",
     "postcss-cli": "^11.0.1",
+    "postcss-import": "^16.1.1",
     "rollup": "^4.60.4"
   },
   "scripts": {
+    "data:generate": "node scripts/inline-data.js",
+    "prebuild": "npm run data:generate",
     "build": "postcss src/css/theme.css -o dist/theme.min.css",
     "build:umd": "rollup -c rollup.config.js",
     "watch": "postcss --watch src/css/theme.css -o dist/theme.min.css",
     "dev:proxy": "node scripts/celeste-proxy-server.js",
     "dev:static": "node scripts/static-server.js",
     "start": "npm run dev:static",
     "validate-data": "node scripts/validate-data.js",
+    "pretest": "npm run data:generate",
     "test": "node --test --test-reporter=spec 'tests/**/*.test.js'",
     "publish-cdn": "bash scripts/publish-to-cdn.sh",
-    "generate-sri": "bash scripts/generate-sri.sh"
+    "generate-sri": "bash scripts/generate-sri.sh",
+    "prepublishOnly": "npm run data:generate && npm run build && npm test"
   },
   "homepage": "https://github.com/whykusanagi/corrupted-theme#readme",
   "bugs": {

postcss.config.js

@@ -1,7 +1,14 @@
+import postcssImport from 'postcss-import';
 import cssnano from 'cssnano';
 
+// postcss-import MUST run first so cssnano sees a single, fully-inlined
+// stylesheet. Without it, dist/theme.min.css keeps the @import statements
+// verbatim — and since dist/ ships no sibling partials on the CDN, every
+// @import 404s and consumers get an effectively empty stylesheet
+// (the 0.2.0 regression: .card lost its glass styling on @latest).
 export default {
   plugins: [
+    postcssImport(),
     cssnano({
       preset: ['default', {
         discardComments: {

scripts/inline-data.js

@@ -0,0 +1,53 @@
+#!/usr/bin/env node
+// scripts/inline-data.js
+//
+// Generates browser-safe ES modules from each src/data/*.json.
+//
+// Why: source modules historically used
+//   import x from '../data/foo.json' with { type: 'json' };
+// to keep the canonical JSON as the single source of truth. But import
+// attributes (`with { type: 'json' }`) only parse in Chromium 123+ — Safari
+// and Firefox throw a SyntaxError before the module body runs. CDN consumers
+// loading these as <script type="module"> get a silent breakage across two
+// of the three major browsers (the 0.2.0 regression).
+//
+// This script emits a sibling `.data.js` for each JSON file that re-exports
+// the parsed content as `export default`. The .data.js files are committed
+// (so the package works out-of-the-box without a build step) and regenerated
+// on every build/test/publish.
+//
+// Canonical source remains src/data/*.json — non-JS consumers (Go CLI, etc.)
+// keep reading the JSON files unchanged.
+
+import { readFileSync, writeFileSync, readdirSync, statSync } from 'node:fs';
+import { join, basename, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const DATA_DIR = join(dirname(fileURLToPath(import.meta.url)), '..', 'src', 'data');
+
+const entries = readdirSync(DATA_DIR);
+let generated = 0;
+
+for (const entry of entries) {
+  if (!entry.endsWith('.json')) continue;
+  const fullPath = join(DATA_DIR, entry);
+  if (!statSync(fullPath).isFile()) continue;
+
+  const outName = basename(entry, '.json') + '.data.js';
+  const outPath = join(DATA_DIR, outName);
+  const raw = readFileSync(fullPath, 'utf8');
+
+  // Parse to validate; re-emit JSON so trailing whitespace / formatting
+  // differences in the source don't leak into the JS module.
+  const parsed = JSON.parse(raw);
+  const body =
+    `// AUTO-GENERATED from ${entry} by scripts/inline-data.js — do not edit by hand.\n` +
+    `// Run \`npm run data:generate\` to regenerate.\n` +
+    `export default ${JSON.stringify(parsed, null, 2)};\n`;
+
+  writeFileSync(outPath, body);
+  console.log(`  ${entry}  →  ${outName}`);
+  generated++;
+}
+
+console.log(`\nGenerated ${generated} data module(s) in src/data/.`);