npm - @whykusanagi/corrupted-theme - Versions diffs - 0.1.3 → 0.1.5 - Mend

@whykusanagi/corrupted-theme 0.1.3 → 0.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (28) hide show

package/CHANGELOG.md +45 -7
package/README.md +79 -15
package/docs/governance/DESIGN_SYSTEM_GOVERNANCE.md +2 -2
package/docs/governance/VERSION_REFERENCES.md +25 -25
package/docs/platforms/NPM_PACKAGE.md +6 -6
package/examples/advanced/nsfw-corruption.html +348 -0
package/examples/basic/corrupted-text.html +254 -0
package/examples/basic/typing-animation.html +344 -0
package/examples/button.html +2 -2
package/examples/card.html +2 -2
package/examples/extensions-showcase.html +1 -1
package/examples/form.html +2 -2
package/examples/index.html +31 -5
package/examples/layout.html +2 -2
package/examples/nikke-team-builder.html +3 -3
package/examples/showcase-complete.html +9 -9
package/examples/showcase.html +3 -3
package/package.json +13 -2
package/src/core/corrupted-text.js +280 -0
package/src/core/corruption-phrases.js +285 -0
package/src/core/typing-animation.js +390 -0
package/docs/CAPABILITIES.md +0 -209
package/docs/FUTURE_WORK.md +0 -189
package/docs/IMPLEMENTATION_VALIDATION.md +0 -401
package/docs/LLM_PROVIDERS.md +0 -345
package/docs/PERSONALITY.md +0 -128
package/docs/ROUTING.md +0 -324
package/docs/platforms/CLI_IMPLEMENTATION.md +0 -1025

package/examples/advanced/nsfw-corruption.html ADDED Viewed

@@ -0,0 +1,348 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>NSFW Corruption (18+) - Corrupted Theme</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
+  <link rel="stylesheet" href="../../src/css/theme.css">
+  <style>
+    .container {
+      max-width: 1000px;
+      margin: 0 auto;
+      padding: var(--spacing-lg);
+    }
+    .example-group {
+      margin-bottom: var(--spacing-2xl);
+      background: var(--glass);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-lg);
+      padding: var(--spacing-lg);
+    }
+    .example-group h3 {
+      color: var(--accent);
+      margin-bottom: var(--spacing-lg);
+      font-size: 1.25rem;
+    }
+    .warning-box {
+      background: rgba(255, 0, 0, 0.1);
+      border: 3px solid var(--corrupted-red);
+      border-radius: var(--radius-lg);
+      padding: var(--spacing-xl);
+      margin-bottom: var(--spacing-2xl);
+      box-shadow: 0 0 30px rgba(255, 0, 0, 0.3);
+    }
+    .warning-box h2 {
+      color: var(--corrupted-red);
+      margin-top: 0;
+      font-size: 1.75rem;
+      text-align: center;
+    }
+    .warning-box p {
+      color: var(--text);
+      line-height: 1.6;
+    }
+    .warning-box ul {
+      color: var(--text-secondary);
+      line-height: 1.8;
+    }
+    .demo-area {
+      background: var(--bg-secondary);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-md);
+      padding: var(--spacing-xl);
+      margin-bottom: var(--spacing-md);
+      min-height: 100px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .typing-output {
+      font-size: 1.25rem;
+      min-height: 40px;
+      letter-spacing: 1px;
+      font-family: 'Courier New', monospace;
+      text-align: center;
+      width: 100%;
+    }
+    .controls {
+      display: flex;
+      gap: var(--spacing-md);
+      margin-top: var(--spacing-md);
+      flex-wrap: wrap;
+    }
+    .code-block {
+      background: var(--bg);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-md);
+      padding: var(--spacing-md);
+      margin-top: var(--spacing-md);
+      font-family: 'Courier New', monospace;
+      font-size: 0.875rem;
+      color: var(--text-secondary);
+      overflow-x: auto;
+    }
+    .info-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--spacing-sm);
+      background: var(--glass);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-full);
+      padding: var(--spacing-sm) var(--spacing-md);
+      font-size: 0.875rem;
+      color: var(--text-secondary);
+      margin-bottom: var(--spacing-md);
+    }
+    .nsfw-badge {
+      background: rgba(255, 0, 0, 0.2);
+      border-color: var(--corrupted-red);
+      color: var(--corrupted-red);
+    }
+    .comparison-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: var(--spacing-lg);
+      margin-bottom: var(--spacing-md);
+    }
+    .comparison-box {
+      background: var(--bg-secondary);
+      border: 2px solid;
+      border-radius: var(--radius-md);
+      padding: var(--spacing-lg);
+    }
+    .comparison-box.sfw {
+      border-color: var(--corrupted-magenta2);
+    }
+    .comparison-box.nsfw {
+      border-color: var(--corrupted-purple);
+    }
+    .comparison-box h4 {
+      margin-top: 0;
+      font-size: 1rem;
+    }
+    .comparison-box.sfw h4 {
+      color: var(--corrupted-magenta2);
+    }
+    .comparison-box.nsfw h4 {
+      color: var(--corrupted-purple);
+    }
+    @media (max-width: 768px) {
+      .comparison-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+  </style>
+</head>
+<body>
+  <!-- Global Navigation -->
+  <nav class="navbar">
+    <div class="navbar-content">
+      <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"><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="nsfw-corruption.html" class="active"><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>
+      </ul>
+    </div>
+  </nav>
+  <div class="container">
+    <!-- Content Warning -->
+    <div class="warning-box">
+      <h2><i class="fas fa-exclamation-triangle"></i> 18+ Content Warning</h2>
+      <p style="text-align: center;"><strong>This page contains explicit mature content (NSFW mode).</strong></p>
+      <p>This example demonstrates the NSFW mode of TypingAnimation, which includes:</p>
+      <ul>
+        <li>Explicit intimate/sexual phrases</li>
+        <li>Loss of control themes</li>
+        <li>Adult-oriented corruption aesthetics</li>
+      </ul>
+      <p><strong>NOT suitable for:</strong></p>
+      <ul>
+        <li>Professional/corporate projects</li>
+        <li>Public streams without 18+ rating</li>
+        <li>Educational contexts</li>
+        <li>All-ages content</li>
+      </ul>
+      <p style="text-align: center; margin-top: var(--spacing-lg); font-weight: bold;">
+        By continuing, you confirm you are 18+ and accept viewing explicit content.
+      </p>
+    </div>
+    <h1><i class="fas fa-exclamation-triangle"></i> NSFW Buffer Corruption</h1>
+    <p style="color: var(--text-secondary); margin-bottom: var(--spacing-lg);">
+      Pattern 2: Phrase flickering with explicit adult content (18+ only).
+    </p>
+    <div class="info-badge nsfw-badge">
+      <i class="fas fa-exclamation-triangle"></i>
+      <span>18+ ONLY - Explicit Content</span>
+    </div>
+    <!-- SFW vs NSFW Comparison -->
+    <section id="comparison" class="example-group">
+      <h3>SFW vs NSFW Comparison</h3>
+      <p>See the difference between default SFW mode and explicit NSFW mode side-by-side.</p>
+      <div class="comparison-grid">
+        <div class="comparison-box sfw">
+          <h4><i class="fas fa-check-circle"></i> SFW Mode (Default)</h4>
+          <div class="demo-area">
+            <div class="typing-output" id="outputSFW"></div>
+          </div>
+        </div>
+        <div class="comparison-box nsfw">
+          <h4><i class="fas fa-exclamation-triangle"></i> NSFW Mode (Explicit)</h4>
+          <div class="demo-area">
+            <div class="typing-output" id="outputNSFW"></div>
+          </div>
+        </div>
+      </div>
+      <div class="controls">
+        <button class="btn" onclick="startComparison()">
+          <i class="fas fa-play"></i> Start Comparison
+        </button>
+      </div>
+      <div class="code-block">// SFW mode (default - safe for all audiences)
+const typingSFW = new TypingAnimation(element, {
+  nsfw: false  // Default behavior
+});
+// NSFW mode (explicit opt-in required)
+const typingNSFW = new TypingAnimation(element, {
+  nsfw: true   // ⚠️ Enables 18+ explicit content
+});</div>
+    </section>
+    <!-- NSFW-Only Example -->
+    <section id="nsfw-only" class="example-group">
+      <h3>NSFW-Only Example</h3>
+      <p>Pure NSFW buffer corruption with explicit phrases in purple (#8b5cf6).</p>
+      <div class="demo-area">
+        <div class="typing-output" id="outputNSFWOnly"></div>
+      </div>
+      <div class="controls">
+        <button class="btn" onclick="startNSFWOnly()">
+          <i class="fas fa-play"></i> Start NSFW Animation
+        </button>
+        <button class="btn btn-secondary" onclick="stopNSFWOnly()">
+          <i class="fas fa-stop"></i> Stop
+        </button>
+      </div>
+      <div class="code-block">const typing = new TypingAnimation(element, {
+  nsfw: true,           // ⚠️ NSFW mode enabled
+  typingSpeed: 35,
+  glitchChance: 0.12
+});
+typing.start('Neural corruption detected...');</div>
+    </section>
+    <!-- Component Info -->
+    <section class="example-group">
+      <h3><i class="fas fa-info-circle"></i> NSFW Mode Configuration</h3>
+      <ul style="color: var(--text-secondary); line-height: 1.8;">
+        <li><strong>Requires Explicit Opt-in:</strong> <code>{ nsfw: true }</code></li>
+        <li><strong>Phrase Examples:</strong> "壊れちゃう...", "Pleasure protocols loading...", "変態", "えっち"</li>
+        <li><strong>Color:</strong> Deep Purple (#8b5cf6) for NSFW corruption</li>
+        <li><strong>Default Behavior:</strong> SFW mode (safe for all audiences)</li>
+        <li><strong>Content Rating:</strong> 18+ only, explicit intimate content</li>
+      </ul>
+      <div class="alert alert-warning" style="margin-top: var(--spacing-md);">
+        <i class="fas fa-shield-alt"></i>
+        <strong>Important:</strong> NSFW phrases are ONLY shown when <code>nsfw: true</code> is explicitly set.
+        The default behavior is always SFW for safety.
+      </div>
+    </section>
+  </div>
+  <script type="module">
+    import { TypingAnimation } from '../../src/core/typing-animation.js';
+    // SFW vs NSFW Comparison
+    const outputSFW = document.getElementById('outputSFW');
+    const outputNSFW = document.getElementById('outputNSFW');
+    window.startComparison = () => {
+      // SFW instance
+      const typingSFW = new TypingAnimation(outputSFW, {
+        nsfw: false,
+        glitchChance: 0.10
+      });
+      // NSFW instance
+      const typingNSFW = new TypingAnimation(outputNSFW, {
+        nsfw: true,
+        glitchChance: 0.10
+      });
+      // Start both simultaneously
+      typingSFW.start('System Online');
+      typingNSFW.start('System Online');
+    };
+    // NSFW-only example
+    const outputNSFWOnly = document.getElementById('outputNSFWOnly');
+    let typingNSFWOnly = new TypingAnimation(outputNSFWOnly, {
+      nsfw: true,
+      typingSpeed: 35,
+      glitchChance: 0.12
+    });
+    window.startNSFWOnly = () => {
+      typingNSFWOnly.start('Neural corruption detected... Decoding data buffer...');
+    };
+    window.stopNSFWOnly = () => {
+      typingNSFWOnly.stop();
+    };
+    // Auto-start comparison on load
+    setTimeout(() => startComparison(), 1000);
+  </script>
+</body>
+</html>

package/examples/basic/corrupted-text.html ADDED Viewed

@@ -0,0 +1,254 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Character Corruption - Corrupted Theme</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
+  <link rel="stylesheet" href="../../src/css/theme.css">
+  <style>
+    .container {
+      max-width: 1000px;
+      margin: 0 auto;
+      padding: var(--spacing-lg);
+    }
+    .example-group {
+      margin-bottom: var(--spacing-2xl);
+      background: var(--glass);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-lg);
+      padding: var(--spacing-lg);
+    }
+    .example-group h3 {
+      color: var(--accent);
+      margin-bottom: var(--spacing-lg);
+      font-size: 1.25rem;
+    }
+    .demo-area {
+      background: var(--bg-secondary);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-md);
+      padding: var(--spacing-xl);
+      margin-bottom: var(--spacing-md);
+      min-height: 100px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .corrupted-text {
+      font-size: 2rem;
+      font-weight: bold;
+      letter-spacing: 2px;
+      text-align: center;
+    }
+    .controls {
+      display: flex;
+      gap: var(--spacing-md);
+      margin-top: var(--spacing-md);
+      flex-wrap: wrap;
+    }
+    .code-block {
+      background: var(--bg);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-md);
+      padding: var(--spacing-md);
+      margin-top: var(--spacing-md);
+      font-family: 'Courier New', monospace;
+      font-size: 0.875rem;
+      color: var(--text-secondary);
+      overflow-x: auto;
+    }
+    .info-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--spacing-sm);
+      background: var(--glass);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-full);
+      padding: var(--spacing-sm) var(--spacing-md);
+      font-size: 0.875rem;
+      color: var(--text-secondary);
+      margin-bottom: var(--spacing-md);
+    }
+    .sfw-badge {
+      background: rgba(217, 79, 144, 0.2);
+      border-color: var(--corrupted-magenta2);
+      color: var(--corrupted-magenta2);
+    }
+  </style>
+</head>
+<body>
+  <!-- Global Navigation -->
+  <nav class="navbar">
+    <div class="navbar-content">
+      <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"><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="corrupted-text.html" class="active"><i class="fas fa-terminal"></i> Character Corruption</a>
+            <a href="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>
+      </ul>
+    </div>
+  </nav>
+  <div class="container">
+    <h1><i class="fas fa-terminal"></i> Character Corruption</h1>
+    <p style="color: var(--text-secondary); margin-bottom: var(--spacing-lg);">
+      Pattern 1: Character-level visual corruption with multi-language cycling.
+    </p>
+    <div class="info-badge sfw-badge">
+      <i class="fas fa-check-circle"></i>
+      <span>SFW - Always Safe</span>
+    </div>
+    <!-- Multi-Language Cycling -->
+    <section id="multilang" class="example-group">
+      <h3>Multi-Language Cycling</h3>
+      <p>Cycles through English, Romaji, Hiragana, Katakana, and Kanji variants continuously.</p>
+      <div class="demo-area">
+        <span class="corrupted-text corrupted-multilang"
+              data-english="Hello World"
+              data-romaji="konnichiwa"
+              data-hiragana="こんにちは"
+              data-katakana="コンニチハ"
+              data-kanji="今日は">
+        </span>
+      </div>
+      <div class="code-block">&lt;span class="corrupted-multilang"
+      data-english="Hello World"
+      data-romaji="konnichiwa"
+      data-hiragana="こんにちは"
+      data-katakana="コンニチハ"
+      data-kanji="今日は"&gt;
+&lt;/span&gt;</div>
+    </section>
+    <!-- English-Only Decoding -->
+    <section id="english" class="example-group">
+      <h3>English-Only Decoding</h3>
+      <p>Decodes from random character chaos to clean English text with manual controls.</p>
+      <div class="demo-area">
+        <span class="corrupted-text corrupted-multilang"
+              data-english="Neural corruption detected"
+              id="example2">
+        </span>
+      </div>
+      <div class="controls">
+        <button class="btn" onclick="restartExample2()">
+          <i class="fas fa-redo"></i> Restart
+        </button>
+        <button class="btn btn-secondary" onclick="settleExample2()">
+          <i class="fas fa-stop"></i> Settle
+        </button>
+      </div>
+      <div class="code-block">// Manual control
+const element = document.getElementById('example2');
+const instance = element.corruptedTextInstance;
+// Restart corruption
+instance.restart();
+// Settle on final text
+instance.settle('Neural corruption detected');</div>
+    </section>
+    <!-- One-Shot Decoding -->
+    <section id="oneshot" class="example-group">
+      <h3>One-Shot Decoding (No Loop)</h3>
+      <p>Decodes once and settles on the final text without looping.</p>
+      <div class="demo-area">
+        <span class="corrupted-text corrupted-multilang"
+              data-english="System Online"
+              id="example3">
+        </span>
+      </div>
+      <div class="code-block">// One-shot configuration
+const instance = element.corruptedTextInstance;
+instance.stop();
+instance.options.loop = false;
+instance.options.finalText = 'System Online';
+instance.start();</div>
+    </section>
+    <!-- Component Info -->
+    <section class="example-group">
+      <h3><i class="fas fa-info-circle"></i> Component Information</h3>
+      <ul style="color: var(--text-secondary); line-height: 1.8;">
+        <li><strong>Type:</strong> Character-Level Corruption (Pattern 1)</li>
+        <li><strong>Content:</strong> Always SFW (no phrases, just random characters)</li>
+        <li><strong>Character Sets:</strong> Katakana, Hiragana, Romaji, Symbols for visual glitch</li>
+        <li><strong>Colors:</strong> Magenta/Purple corruption, White for decoded text</li>
+        <li><strong>Auto-initialization:</strong> Elements with class <code>corrupted-multilang</code></li>
+        <li><strong>Script:</strong> <code>src/core/corrupted-text.js</code></li>
+      </ul>
+    </section>
+  </div>
+  <script src="../../src/core/corrupted-text.js"></script>
+  <script>
+    // Example 2: Manual control
+    const example2 = document.getElementById('example2');
+    let example2Instance = null;
+    // Wait for auto-init, then store reference
+    setTimeout(() => {
+      example2Instance = example2.corruptedTextInstance;
+    }, 100);
+    function restartExample2() {
+      if (example2Instance) {
+        example2Instance.restart();
+      }
+    }
+    function settleExample2() {
+      if (example2Instance) {
+        example2Instance.settle('Neural corruption detected');
+      }
+    }
+    // Example 3: One-shot configuration
+    const example3 = document.getElementById('example3');
+    setTimeout(() => {
+      if (example3.corruptedTextInstance) {
+        example3.corruptedTextInstance.stop();
+        example3.corruptedTextInstance.options.loop = false;
+        example3.corruptedTextInstance.options.finalText = 'System Online';
+        example3.corruptedTextInstance.start();
+      }
+    }, 100);
+  </script>
+</body>
+</html>