npm - rip-lang - Versions diffs - 3.9.0 → 3.9.1 - Mend

rip-lang 3.9.0 → 3.9.1

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 (24) hide show

package/CHANGELOG.md +29 -0
package/README.md +14 -14
package/docs/RIP-LANG.md +10 -1
package/docs/dist/rip-ui.min.js +119 -119
package/docs/dist/rip-ui.min.js.br +0 -0
package/docs/dist/rip.browser.min.js +143 -143
package/docs/dist/rip.browser.min.js.br +0 -0
package/docs/example/index.html +34 -0
package/docs/example/index.json +14 -0
package/docs/index.html +1475 -3
package/docs/sierpinski.html +114 -0
package/package.json +1 -1
package/src/browser.js +18 -9
package/src/compiler.js +3 -0
package/src/components.js +63 -16
package/src/grammar/grammar.rip +2 -2
package/src/grammar/parser.js +360 -0
package/src/lexer.js +10 -0
package/src/parser.js +5 -6
package/docs/demo.html +0 -342
package/docs/playground-app.html +0 -1022
package/docs/playground-js.html +0 -1645
package/docs/playground-rip-ui.html +0 -1419
package/docs/playground-rip.html +0 -1450

package/docs/playground-js.html DELETED Viewed

@@ -1,1645 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Rip Playground</title>
-  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg width='420' height='420' viewBox='0 0 420 420' fill='none' xmlns='http://www.w3.org/2000/svg'><circle cx='210' cy='210' r='210' fill='white'/><path d='M114.5 263C79.772 263 45.7872 275.051 34.271 283.579C33.4994 284.151 34.012 285.229 34.9656 285.117C73.1916 280.629 115.309 292.74 146.5 304C178.5 315.552 221 336 269 336C314.651 336 372.074 310.499 386.401 293.944C387.038 293.208 386.301 292.353 385.435 292.799C376.614 297.341 364.243 306.018 316.073 306.948C265.273 307.928 159 263 114.5 263Z' fill='%230389FF'/><path d='M223.46 84C239.53 84 253.592 86.9253 265.645 92.7754C277.697 98.6254 287.071 107.048 293.767 118.043C300.462 129.038 303.811 142.219 303.811 157.584C303.811 173.09 300.357 186.165 293.449 196.808C287.068 206.742 278.259 214.402 267.026 219.792L309.603 297.958C297.885 297.851 283.094 295.413 266.52 291.62C257.58 289.574 248.214 287.157 238.645 284.547L209.127 229.054H188.782V270.333C176.996 266.968 165.515 263.788 154.823 261.15C146.038 258.984 137.665 257.152 130 255.885V84H223.46ZM188.782 183.381H209.505C216.412 183.381 222.297 182.535 227.16 180.844C232.094 179.082 235.865 176.297 238.473 172.491C241.151 168.685 242.49 163.716 242.49 157.584C242.49 151.382 241.151 146.342 238.473 142.466C235.865 138.519 232.094 135.628 227.16 133.796C222.297 131.893 216.412 130.941 209.505 130.941H188.782V183.381Z' fill='%23BB0000'/></svg>">
-  <style>
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
-    /* Hide body until fully initialized to prevent render flicker */
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      background: #1e1e1e;
-      color: #d4d4d4;
-      height: 100vh;
-      display: flex;
-      flex-direction: column;
-      opacity: 0;
-      visibility: hidden;
-    }
-    body.ready {
-      visibility: visible;
-      opacity: 1;
-      transition: opacity 0.15s ease-in;
-    }
-    .header {
-      background: #252526;
-      padding: 15px 20px;
-      border-bottom: 1px solid #3e3e42;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-    .header-left {
-      display: flex;
-      flex-direction: column;
-    }
-    h1 {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      font-size: 20px;
-      font-weight: 600;
-      color: #cccccc;
-      margin-bottom: 5px;
-    }
-    .logo {
-      height: 32px;
-      width: auto;
-    }
-    .subtitle {
-      font-size: 13px;
-      color: #858585;
-    }
-    .github-link {
-      color: #858585;
-      transition: color 0.2s;
-      align-self: flex-start;
-      margin-top: 4px;
-    }
-    .github-link:hover {
-      color: #ffffff;
-    }
-    .github-link svg {
-      width: 24px;
-      height: 24px;
-      fill: currentColor;
-    }
-    .tabs {
-      display: flex;
-      background: #2d2d30;
-      border-bottom: 1px solid #3e3e42;
-    }
-    .tab {
-      padding: 12px 24px;
-      background: transparent;
-      border: none;
-      color: #858585;
-      cursor: pointer;
-      font-size: 13px;
-      font-weight: 500;
-      border-bottom: 2px solid transparent;
-      transition: all 0.2s;
-    }
-    .tab:hover {
-      color: #cccccc;
-      background: #2a2a2d;
-    }
-    .tab.active {
-      color: #ffffff;
-      border-bottom-color: #007acc;
-      background: #1e1e1e;
-    }
-    .content {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-    }
-    .pane {
-      display: none;
-      flex: 1;
-      overflow: hidden;
-    }
-    .pane.active {
-      display: flex;
-      flex-direction: column;
-    }
-    /* REPL Styles */
-    .repl-container {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      padding: 20px;
-      overflow: hidden;
-    }
-    .repl-output {
-      flex: 1;
-      overflow-y: auto;
-      font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
-      font-size: 14px;
-      line-height: 1.6;
-      padding: 10px;
-      background: #1e1e1e;
-      border: 1px solid #3e3e42;
-      border-radius: 4px;
-      margin-bottom: 10px;
-    }
-    .repl-line {
-      margin-bottom: 8px;
-    }
-    .prompt {
-      color: #4ec9b0;
-      font-weight: 600;
-    }
-    .repl-code {
-      display: inline;
-    }
-    .repl-code > span {
-      display: inline !important;
-      background: none !important;
-      padding: 0 !important;
-    }
-    .result {
-      color: #ce9178;
-      margin-left: 20px;
-    }
-    .error {
-      color: #f48771;
-      margin-left: 20px;
-    }
-    .command-output {
-      color: #858585;
-      margin-left: 20px;
-      white-space: pre-wrap;
-    }
-    .repl-input-area {
-      display: flex;
-      align-items: flex-start;
-      gap: 4px;
-      background: #2d2d30;
-      padding: 8px 10px;
-      border: 1px solid #3e3e42;
-      border-radius: 4px;
-    }
-    .repl-prompt-text {
-      color: #4ec9b0;
-      font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
-      font-weight: 600;
-      font-size: 14px;
-      line-height: 24px;
-      margin-top: 0;
-    }
-    #repl-editor-container {
-      flex: 1;
-      overflow: hidden;
-      border-radius: 4px;
-    }
-    #repl-editor-container .monaco-editor,
-    #repl-editor-container .monaco-editor .focused,
-    #repl-editor-container .monaco-editor-background {
-      outline: none !important;
-      box-shadow: none !important;
-    }
-    #repl-editor-container .monaco-editor,
-    #repl-editor-container .monaco-editor .overflow-guard {
-      border-radius: 0;
-    }
-    #repl-editor-container .monaco-editor .lines-content {
-      padding-right: 0 !important;
-    }
-    /* Compiler Styles */
-    .compiler-container {
-      flex: 1;
-      min-height: 0;
-      display: flex;
-      background: #3e3e42;
-      padding: 20px;
-      position: relative;
-    }
-    .resizer {
-      width: 10px;
-      background: #3e3e42;
-      cursor: col-resize;
-      position: relative;
-      flex-shrink: 0;
-    }
-    .resizer:hover {
-      background: #007acc;
-    }
-    .resizer::after {
-      content: '';
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      width: 4px;
-      height: 40px;
-      background: #888888;
-      border-radius: 2px;
-    }
-    .editor-pane {
-      display: flex;
-      flex-direction: column;
-      background: #1e1e1e;
-      border-radius: 4px;
-      overflow: hidden;
-      min-height: 0;
-      flex: 1;
-      min-width: 200px;
-    }
-    #editor-left {
-      flex-basis: 50%;
-    }
-    #editor-right {
-      flex-basis: 50%;
-    }
-    .pane-header {
-      background: #2d2d30;
-      padding: 10px 15px;
-      border-bottom: 1px solid #3e3e42;
-      font-size: 13px;
-      font-weight: 600;
-      color: #cccccc;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      min-height: 49px;
-      box-sizing: border-box;
-    }
-    .pane-header-buttons {
-      display: flex;
-      gap: 8px;
-    }
-    .pane-header button {
-      background: #5a5a5d;
-      color: #ffffff;
-      border: none;
-      padding: 6px 12px;
-      border-radius: 3px;
-      font-size: 12px;
-      font-weight: 500;
-      cursor: pointer;
-      transition: background 0.2s;
-    }
-    .pane-header button:hover {
-      background: #6e6e71;
-    }
-    .pane-header button.active {
-      background: #007acc;
-    }
-    .pane-header button.active:hover {
-      background: #005a9e;
-    }
-    .editor-wrapper {
-      flex: 1;
-      min-height: 0;
-      overflow: hidden;
-    }
-    .theme-select {
-      background: #3c3c3c;
-      color: #cccccc;
-      border: 1px solid #5a5a5d;
-      padding: 4px 8px;
-      border-radius: 3px;
-      font-size: 12px;
-      cursor: pointer;
-      outline: none;
-    }
-    .theme-select:hover {
-      border-color: #007acc;
-    }
-    /* Scrollbar styling */
-    ::-webkit-scrollbar {
-      width: 10px;
-      height: 10px;
-    }
-    ::-webkit-scrollbar-track {
-      background: #1e1e1e;
-    }
-    ::-webkit-scrollbar-thumb {
-      background: #555555;
-      border-radius: 5px;
-    }
-    ::-webkit-scrollbar-thumb:hover {
-      background: #686868;
-    }
-    ::-webkit-scrollbar-corner {
-      background: #1e1e1e;
-    }
-    .monaco-editor .slider {
-      border-radius: 5px !important;
-    }
-    .monaco-editor .deprecated {
-      text-decoration: none !important;
-    }
-    /* Welcome message */
-    .welcome {
-      color: #858585;
-      font-style: italic;
-      margin-bottom: 15px;
-    }
-    .help-text {
-      color: #6a9955;
-    }
-    .command {
-      color: #4fc1ff;
-    }
-    .var-name {
-      color: #9cdcfe;
-    }
-    .var-value {
-      color: #ce9178;
-    }
-    /* Light/Dark mode toggle */
-    .mode-toggle {
-      background: none;
-      border: 1px solid #5a5a5d;
-      border-radius: 4px;
-      color: #858585;
-      cursor: pointer;
-      width: 32px;
-      height: 32px;
-      font-size: 16px;
-      line-height: 32px;
-      text-align: center;
-      padding: 0;
-      transition: all 0.2s;
-      margin-right: 8px;
-    }
-    .mode-toggle:hover {
-      color: #ffffff;
-      border-color: #007acc;
-    }
-    .header-right {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-    }
-    /* Light mode overrides */
-    body.light {
-      background: #ffffff;
-      color: #1e1e1e;
-    }
-    body.light .header {
-      background: #f3f3f3;
-      border-bottom-color: #d4d4d4;
-    }
-    body.light h1 { color: #333333; }
-    body.light .subtitle { color: #666666; }
-    body.light .github-link { color: #666666; }
-    body.light .github-link:hover { color: #000000; }
-    body.light .mode-toggle { color: #666666; border-color: #cccccc; }
-    body.light .mode-toggle:hover { color: #000000; border-color: #007acc; }
-    body.light .tabs {
-      background: #f3f3f3;
-      border-bottom-color: #d4d4d4;
-    }
-    body.light .tab { color: #666666; }
-    body.light .tab:hover { color: #333333; background: #e8e8e8; }
-    body.light .tab.active { color: #333333; border-bottom-color: #007acc; background: #ffffff; }
-    body.light .compiler-container { background: #e0e0e0; }
-    body.light .editor-pane { background: #ffffff; border-color: #d4d4d4; }
-    body.light .content { background: #ffffff; }
-    body.light .pane-header {
-      background: #f3f3f3;
-      border-bottom-color: #d4d4d4;
-      color: #333333;
-    }
-    body.light .pane-header button { background: #cccccc; color: #333333; }
-    body.light .pane-header button:hover { background: #bbbbbb; }
-    body.light .pane-header button.active { background: #007acc; color: #ffffff; }
-    body.light .theme-select { background: #f3f3f3; color: #333333; border-color: #cccccc; }
-    body.light .resizer { background: #e0e0e0; }
-    body.light .resizer:hover { background: #007acc; }
-    body.light ::-webkit-scrollbar-track { background: #f3f3f3; }
-    body.light ::-webkit-scrollbar-thumb { background: #c1c1c1; }
-    body.light ::-webkit-scrollbar-thumb:hover { background: #a0a0a0; }
-    body.light ::-webkit-scrollbar-corner { background: #f3f3f3; }
-    body.light .repl-container { background: #e8e8e8; }
-    body.light .repl-output { background: #ffffff; border-color: #d4d4d4; color: #1e1e1e; }
-    body.light .repl-output .prompt { color: #007acc; }
-    body.light .repl-output .result { color: #a31515; }
-    body.light .repl-output .error { color: #d32f2f; }
-    body.light .repl-output .welcome { color: #666666; }
-    body.light .repl-output .command { color: #0070c1; }
-    body.light .repl-output .command-output { color: #555555; }
-    body.light .repl-input-area { background: #f3f3f3; border-color: #d4d4d4; border-radius: 6px; }
-    body.light .repl-prompt-text { color: #007acc; }
-  </style>
-  <link rel="preload" href="https://cdn.jsdelivr.net/npm/monaco-editor@0.52.0/min/vs/loader.js" as="script">
-  <script type="module" src="dist/rip.browser.min.js"></script>
-  <script type="text/rip" src="examples.rip"></script>
-</head>
-<body>
-  <div class="header">
-    <div class="header-left">
-      <h1>
-        <img src="rip.svg" alt="Rip" class="logo" style="background-color: #fff; border-radius: 5px; padding: 4px;">
-        Rip Playground
-      </h1>
-      <div class="subtitle"></div>
-    </div>
-    <div class="header-right">
-      <button id="mode-toggle" class="mode-toggle" title="Toggle light/dark mode">&#9790;</button>
-      <a href="https://github.com/shreeve/rip-lang" target="_blank" class="github-link" title="View on GitHub">
-        <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
-      </a>
-    </div>
-  </div>
-  <div class="tabs">
-    <button class="tab active" data-tab="compiler">Live Compiler</button>
-    <button class="tab" data-tab="repl">REPL Console</button>
-  </div>
-  <div class="content">
-    <!-- Compiler Pane -->
-    <div class="pane active" id="compiler-pane">
-      <div class="compiler-container">
-        <div class="editor-pane" id="editor-left">
-          <div class="pane-header">
-            <span>Rip Source</span>
-            <div class="pane-header-buttons">
-              <select id="example-select" class="theme-select" title="Load example">
-                <option value="demo">Full Demo</option>
-                <option value="basics">Basics</option>
-                <option value="reactive">Reactive State</option>
-                <option value="classes">Classes</option>
-                <option value="regex">Regex & Strings</option>
-                <option value="async">Async & Dammit</option>
-                <option value="custom">Custom</option>
-              </select>
-              <select id="theme-select" class="theme-select" title="Editor theme">
-                <optgroup label="Dark Themes">
-                  <option value="vs-dark">Dark+ (default)</option>
-                  <option value="hc-black">High Contrast Dark</option>
-                  <option value="cdn:GitHub Dark">GitHub Dark</option>
-                  <option value="cdn:Dracula">Dracula</option>
-                  <option value="cdn:Monokai">Monokai</option>
-                  <option value="cdn:Nord">Nord</option>
-                </optgroup>
-                <optgroup label="Light Themes">
-                  <option value="vs">Light+</option>
-                  <option value="hc-light">High Contrast Light</option>
-                  <option value="cdn:GitHub Light">GitHub Light</option>
-                  <option value="cdn:Solarized-light">Solarized Light</option>
-                </optgroup>
-              </select>
-              <button id="clear-btn" title="Clear the editor">Clear</button>
-              <button class="active" id="run-btn" title="Execute code and output to browser console (F5, Cmd+Enter, Ctrl+Enter)">Run</button>
-            </div>
-          </div>
-          <div class="editor-wrapper" id="editor-container"></div>
-        </div>
-        <div class="resizer" id="resizer"></div>
-        <div class="editor-pane" id="editor-right">
-          <div class="pane-header">
-            <span>Output</span>
-            <div class="pane-header-buttons">
-              <button id="show-tokens" title="Toggle token stream display">Tokens</button>
-              <button id="show-sexp" title="Toggle S-expression display">S-Expressions</button>
-              <button id="show-preamble" title="Toggle preamble code display">Preamble</button>
-              <button id="show-types" title="Toggle .d.ts type declarations">Types</button>
-              <button id="show-js" title="Toggle JavaScript output">JS</button>
-            </div>
-          </div>
-          <div class="editor-wrapper" id="output-container"></div>
-        </div>
-      </div>
-    </div>
-    <!-- REPL Pane -->
-    <div class="pane" id="repl-pane">
-      <div class="repl-container">
-        <div class="repl-output" id="repl-output">
-          <div class="welcome">
-            <strong>Rip Playground</strong> - Interactive Environment<br>
-            Type <span class="command">.help</span> for commands, try Rip expressions!
-          </div>
-        </div>
-        <div class="repl-input-area">
-          <span class="repl-prompt-text" id="prompt">rip&gt;</span>
-          <div id="repl-editor-container" style="flex: 1; height: 24px;"></div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <script type="module">
-    // ========================================================================
-    // Monaco Editor Setup
-    // ========================================================================
-    // Load Monaco from CDN
-    const MONACO_CDN = 'https://cdn.jsdelivr.net/npm/monaco-editor@0.52.0';
-    // Configure Monaco AMD loader
-    const loaderScript = document.createElement('script');
-    loaderScript.src = `${MONACO_CDN}/min/vs/loader.js`;
-    document.head.appendChild(loaderScript);
-    await new Promise(resolve => loaderScript.onload = resolve);
-    require.config({ paths: { vs: `${MONACO_CDN}/min/vs` } });
-    const monaco = await new Promise(resolve => {
-      require(['vs/editor/editor.main'], resolve);
-    });
-    // ========================================================================
-    // Rip Monarch Grammar (Monaco-native syntax highlighting)
-    // ========================================================================
-    monaco.languages.register({ id: 'rip', extensions: ['.rip'] });
-    monaco.languages.setMonarchTokensProvider('rip', {
-      defaultToken: '',
-      tokenPostfix: '.rip',
-      keywords: [
-        'if', 'else', 'unless', 'then', 'switch', 'when', 'for', 'while', 'until',
-        'loop', 'do', 'return', 'break', 'continue', 'throw', 'try', 'catch', 'finally',
-        'yield', 'await', 'import', 'export', 'from', 'default', 'delete', 'typeof',
-        'instanceof', 'new', 'super', 'debugger', 'use', 'own', 'extends', 'in', 'of',
-        'by', 'as', 'class', 'def', 'enum', 'interface', 'component', 'render',
-      ],
-      logicalWords: ['and', 'or', 'not', 'is', 'isnt'],
-      booleans: ['true', 'false', 'yes', 'no', 'on', 'off'],
-      constants: ['null', 'undefined', 'NaN', 'Infinity', 'this'],
-      typeKeywords: ['number', 'string', 'boolean', 'void', 'any', 'never', 'unknown', 'object', 'symbol', 'bigint'],
-      operators: [
-        '|>', '::=', '::', ':=', '~=', '~>', '<=>', '=!', '!?', '=~', '??', '?.', '...',
-        '..', '**', '//', '%%', '++', '--', '&&', '||', '===', '!==', '==', '!=',
-        '<=', '>=', '=>', '->', '+=', '-=', '*=', '/=', '%=', '**=', '&&=', '||=',
-        '??=', '<<=', '>>=', '>>>=', '&=', '|=', '^=', '>>>', '>>', '<<',
-        '+', '-', '*', '/', '%', '&', '|', '^', '~', '<', '>', '=', '!', '?',
-      ],
-      symbols: /[=><!~?:&|+\-*\/\^%\.#]+/,
-      escapes: /\\(?:[abfnrtv\\"']|x[0-9A-Fa-f]{1,4}|u[0-9A-Fa-f]{4}|U[0-9A-Fa-f]{8})/,
-      tokenizer: {
-        root: [
-          // Block comments ###...###
-          [/###/, 'comment', '@blockComment'],
-          // Line comments
-          [/#(?!\{).*$/, 'comment'],
-          // Heredocs (before regular strings)
-          [/"""/, 'string', '@heredocDouble'],
-          [/'''/, 'string', '@heredocSingle'],
-          // Strings
-          [/"/, 'string', '@stringDouble'],
-          [/'/, 'string', '@stringSingle'],
-          // Heregex
-          [/\/\/\//, 'regexp', '@heregex'],
-          // Regex (after operator context)
-          [/\/(?![/*])(?:[^[\/\n\\]|\\.|\[(?:\\[^\n]|[^\]\n\\])*\])*(\/)([gimsuy]*)/, 'regexp'],
-          // Inline JavaScript
-          [/`[^`]*`/, 'string.other'],
-          // Instance variables @name
-          [/@[a-zA-Z_$][\w$]*/, 'variable.instance'],
-          [/@/, 'variable.instance'],
-          // Type names (PascalCase) — before identifiers
-          [/[A-Z][\w]*/, 'type.identifier'],
-          // Identifiers and keywords
-          [/[a-zA-Z_$][\w$]*[!?]?/, {
-            cases: {
-              '@keywords': 'keyword',
-              '@logicalWords': 'keyword.operator',
-              '@booleans': 'constant.language',
-              '@constants': 'constant.language',
-              '@typeKeywords': 'support.type',
-              '@default': 'identifier',
-            }
-          }],
-          // Numbers
-          [/0x[0-9a-fA-F](?:_?[0-9a-fA-F])*n?/, 'number.hex'],
-          [/0o[0-7](?:_?[0-7])*n?/, 'number.octal'],
-          [/0b[01](?:_?[01])*n?/, 'number.binary'],
-          [/\d[\d_]*(?:\.[\d][\d_]*)?(?:[eE][+-]?\d+)?n?/, 'number'],
-          // Operators (multi-char first)
-          [/::=/, 'keyword.operator.type'],
-          [/::(?!=)/, 'keyword.operator.type'],
-          [/~=|:=|~>|<=>/, 'keyword.operator.reactive'],
-          [/=!/, 'keyword.operator.readonly'],
-          [/!\?/, 'keyword.operator'],
-          [/=~/, 'keyword.operator'],
-          [/\?\?/, 'keyword.operator'],
-          [/\?\./, 'keyword.operator'],
-          [/\.\.\./, 'keyword.operator'],
-          [/\.\./, 'keyword.operator'],
-          [/===|!==|==|!=|<=|>=/, 'keyword.operator.comparison'],
-          [/=>|->/, 'keyword.operator.arrow'],
-          [/\*\*|\/\/|%%/, 'keyword.operator.arithmetic'],
-          [/&&=|\|\|=|\?\?=|\+=|-=|\*=|\/=|%=/, 'keyword.operator.assignment'],
-          [/&&|\|\|/, 'keyword.operator.logical'],
-          [/>>>|>>|<</, 'keyword.operator.bitwise'],
-          [/[+\-*\/%]/, 'keyword.operator.arithmetic'],
-          [/[&|^~]/, 'keyword.operator.bitwise'],
-          [/[<>]/, 'keyword.operator.comparison'],
-          [/=/, 'keyword.operator.assignment'],
-          [/!/, 'keyword.operator'],
-          [/\?/, 'keyword.operator'],
-          // Brackets
-          [/[{}()\[\]]/, '@brackets'],
-          // Delimiters
-          [/[;,.]/, 'delimiter'],
-        ],
-        blockComment: [
-          [/###/, 'comment', '@pop'],
-          [/./, 'comment'],
-        ],
-        heredocDouble: [
-          [/"""/, 'string', '@pop'],
-          [/#\{/, { token: 'string.interpolation', next: '@interpolation' }],
-          [/@escapes/, 'string.escape'],
-          [/./, 'string'],
-        ],
-        heredocSingle: [
-          [/'''/, 'string', '@pop'],
-          [/@escapes/, 'string.escape'],
-          [/./, 'string'],
-        ],
-        stringDouble: [
-          [/"/, 'string', '@pop'],
-          [/#\{/, { token: 'string.interpolation', next: '@interpolation' }],
-          [/@escapes/, 'string.escape'],
-          [/[^"\\#]+/, 'string'],
-          [/./, 'string'],
-        ],
-        stringSingle: [
-          [/'/, 'string', '@pop'],
-          [/@escapes/, 'string.escape'],
-          [/[^'\\]+/, 'string'],
-          [/./, 'string'],
-        ],
-        interpolation: [
-          [/\}/, { token: 'string.interpolation', next: '@pop' }],
-          { include: 'root' },
-        ],
-        heregex: [
-          [/\/\/\/[gimsuy]*/, 'regexp', '@pop'],
-          [/#.*$/, 'comment'],
-          [/@escapes/, 'regexp.escape'],
-          [/#\{/, { token: 'string.interpolation', next: '@interpolation' }],
-          [/./, 'regexp'],
-        ],
-      },
-    });
-    // Language configuration (brackets, comments, etc.)
-    monaco.languages.setLanguageConfiguration('rip', {
-      comments: { lineComment: '#', blockComment: ['###', '###'] },
-      brackets: [['{', '}'], ['[', ']'], ['(', ')']],
-      autoClosingPairs: [
-        { open: '{', close: '}' },
-        { open: '[', close: ']' },
-        { open: '(', close: ')' },
-        { open: '"', close: '"', notIn: ['string'] },
-        { open: "'", close: "'", notIn: ['string'] },
-      ],
-      surroundingPairs: [
-        { open: '{', close: '}' },
-        { open: '[', close: ']' },
-        { open: '(', close: ')' },
-        { open: '"', close: '"' },
-        { open: "'", close: "'" },
-      ],
-      indentationRules: {
-        increaseIndentPattern: /^\s*(?:def|class|component|render|if|unless|else|for|while|until|loop|switch|when|try|catch|finally|enum|interface)\b.*$|[-=]>\s*$/,
-        decreaseIndentPattern: /^\s*(else|catch|finally)\b/,
-      },
-      folding: { offSide: true },
-    });
-    // ========================================================================
-    // Create Monaco Editor Instance
-    // ========================================================================
-    // Examples loaded from external examples.rip
-    const examples = globalThis.ripExamples;
-    const defaultCode = examples.demo;
-    // Restore saved source (or default)
-    const savedSource = localStorage.getItem('rip-playground-source');
-    const savedExample = localStorage.getItem('rip-playground-example') || 'demo';
-    const initialCode = savedSource != null ? savedSource : defaultCode;
-    // Shared editor configuration
-    const sharedConfig = {
-      theme: 'vs-dark',
-      fontSize: 14,
-      fontFamily: "'Monaco', 'Menlo', 'Consolas', monospace",
-      lineHeight: 22,
-      minimap: { enabled: false },
-      scrollBeyondLastLine: false,
-      automaticLayout: true,
-      overviewRulerLanes: 0,
-      hideCursorInOverviewRuler: true,
-      renderWhitespace: 'none',
-      scrollbar: { verticalScrollbarSize: 10, horizontalScrollbarSize: 10, verticalSliderSize: 10, horizontalSliderSize: 10 },
-      padding: { top: 10 },
-    };
-    const monacoEditor = monaco.editor.create(document.getElementById('editor-container'), {
-      ...sharedConfig,
-      value: initialCode,
-      language: 'rip',
-      tabSize: 2,
-      insertSpaces: true,
-    });
-    // Output editor (read-only JavaScript display)
-    const outputEditor = monaco.editor.create(document.getElementById('output-container'), {
-      ...sharedConfig,
-      value: '',
-      language: 'javascript',
-      readOnly: true,
-      domReadOnly: true,
-      lineNumbers: 'off',
-      folding: false,
-      glyphMargin: false,
-      contextmenu: false,
-    });
-    // Theme selector (dropdown) with lazy CDN loading
-    const themeSelect = document.getElementById('theme-select');
-    const THEME_CDN = 'https://cdn.jsdelivr.net/npm/monaco-themes@0.4.4/themes';
-    const loadedThemes = new Set(['vs', 'vs-dark', 'hc-black', 'hc-light']);
-    async function setTheme(value) {
-      let themeId = value;
-      if (value.startsWith('cdn:')) {
-        const themeName = value.slice(4);
-        themeId = themeName.toLowerCase().replace(/[\s_]+/g, '-');
-        if (!loadedThemes.has(themeId)) {
-          try {
-            const res = await fetch(`${THEME_CDN}/${encodeURIComponent(themeName)}.json`);
-            const data = await res.json();
-            monaco.editor.defineTheme(themeId, data);
-            loadedThemes.add(themeId);
-          } catch (err) {
-            console.error(`Failed to load theme: ${themeName}`, err);
-            return;
-          }
-        }
-      }
-      monaco.editor.setTheme(themeId);
-      localStorage.setItem('rip-repl-theme', value);
-    }
-    themeSelect.addEventListener('change', async (e) => await setTheme(e.target.value));
-    // Light/dark mode toggle (persisted via localStorage)
-    const savedMode = localStorage.getItem('rip-repl-mode');
-    let isDark = savedMode ? savedMode !== 'light' : !window.matchMedia('(prefers-color-scheme: light)').matches;
-    const modeToggle = document.getElementById('mode-toggle');
-    function applyMode() {
-      document.body.classList.toggle('light', !isDark);
-      modeToggle.innerHTML = isDark ? '&#9790;' : '&#9788;';
-      modeToggle.title = isDark ? 'Switch to light mode' : 'Switch to dark mode';
-      localStorage.setItem('rip-repl-mode', isDark ? 'dark' : 'light');
-    }
-    applyMode();
-    modeToggle.addEventListener('click', () => {
-      isDark = !isDark;
-      applyMode();
-      // Only reset theme if currently using a built-in default
-      const current = themeSelect.value;
-      if (current === 'vs' || current === 'vs-dark') {
-        const defaultTheme = isDark ? 'vs-dark' : 'vs';
-        themeSelect.value = defaultTheme;
-        setTheme(defaultTheme);
-      }
-    });
-    // ========================================================================
-    // Load Rip Compiler + Examples
-    // ========================================================================
-    // Compiler already loaded via <script type="module" src="dist/rip.browser.min.js">
-    const { compile, formatSExpr, VERSION, BUILD_DATE } = window.__ripExports;
-    window.compile = compile;
-    window.toSexpr = formatSExpr;
-    const localBuildDate = new Date(BUILD_DATE.replace('@', 'T').replace('GMT', 'Z'))
-      .toLocaleString(undefined, {
-        year: 'numeric', month: 'short', day: 'numeric',
-        hour: 'numeric', minute: '2-digit', timeZoneName: 'short'
-      });
-    document.querySelector('.subtitle').textContent =
-      `Interactive environment • Version ${VERSION} • Built ${localBuildDate}`;
-    // Reveal page immediately — layout is ready, editors will populate shortly
-    document.body.classList.add('ready');
-    // Wait for external examples.rip to be processed
-    await globalThis.__ripScriptsReady;
-    // ========================================================================
-    // DOM Element References
-    // ========================================================================
-    const showTokensBtn = document.getElementById('show-tokens');
-    const showSexpBtn = document.getElementById('show-sexp');
-    const showPreambleBtn = document.getElementById('show-preamble');
-    const showTypesBtn = document.getElementById('show-types');
-    const showJSBtn = document.getElementById('show-js');
-    const replOutput = document.getElementById('repl-output');
-    const promptSpan = document.getElementById('prompt');
-    // REPL input editor (single-line Monaco)
-    const replEditor = monaco.editor.create(document.getElementById('repl-editor-container'), {
-      value: '',
-      language: 'rip',
-      theme: isDark ? 'vs-dark' : 'vs',
-      fontSize: 14,
-      fontFamily: "'Monaco', 'Menlo', 'Consolas', monospace",
-      lineHeight: 24,
-      minimap: { enabled: false },
-      scrollBeyondLastLine: false,
-      automaticLayout: true,
-      lineNumbers: 'off',
-      glyphMargin: false,
-      folding: false,
-      lineDecorationsWidth: 6,
-      lineNumbersMinChars: 0,
-      overviewRulerLanes: 0,
-      hideCursorInOverviewRuler: true,
-      scrollbar: { vertical: 'hidden', horizontal: 'hidden', handleMouseWheel: false, verticalScrollbarSize: 0, horizontalScrollbarSize: 0 },
-      overviewRulerBorder: false,
-      renderLineHighlight: 'none',
-      wordWrap: 'off',
-      contextmenu: false,
-      tabSize: 2,
-      insertSpaces: true,
-      padding: { top: 0, bottom: 0 },
-      quickSuggestions: false,
-      suggestOnTriggerCharacters: false,
-      acceptSuggestionOnEnter: 'off',
-      tabCompletion: 'off',
-      parameterHints: { enabled: false },
-      find: { addExtraSpaceOnTop: false, autoFindInSelection: 'never' },
-    });
-    const resizer = document.getElementById('resizer');
-    const leftPane = document.getElementById('editor-left');
-    const rightPane = document.getElementById('editor-right');
-    // ========================================================================
-    // Compiler Implementation
-    // ========================================================================
-    let showTokens = localStorage.getItem('rip-repl-tokens') === 'true';
-    let showSexp = localStorage.getItem('rip-repl-sexp') === 'true';
-    let showPreamble = localStorage.getItem('rip-preamble') === 'true';
-    let showTypes = localStorage.getItem('rip-types') === 'true';
-    let showJS = localStorage.getItem('rip-repl-js') !== 'false';  // default true
-    // Format tokens for display — clean, minimal output
-    const SUPPRESS_VALUE = new Set([
-      'DEF', 'IF', 'ELSE', 'UNLESS', 'FOR', 'WHILE', 'UNTIL', 'LOOP',
-      'SWITCH', 'WHEN', 'TRY', 'CATCH', 'FINALLY', 'THROW', 'RETURN',
-      'CLASS', 'EXTENDS', 'SUPER', 'NEW', 'DELETE', 'TYPEOF', 'INSTANCEOF',
-      'IMPORT', 'FROM', 'EXPORT', 'DEFAULT', 'ENUM', 'INTERFACE',
-      'AND', 'OR', 'NOT', 'IS', 'ISNT', 'IN', 'OF',
-      'TRUE', 'FALSE', 'NULL', 'UNDEFINED', 'YES', 'NO',
-      'CALL_START', 'CALL_END', 'PARAM_START', 'PARAM_END',
-      'INDEX_START', 'INDEX_END', 'TERMINATOR',
-    ]);
-    function formatTokens(tokens) {
-      let maxTag = 0;
-      for (const t of tokens) maxTag = Math.max(maxTag, t[0].length);
-      return tokens.map(t => {
-        let tag = t[0], val = t[1];
-        if (SUPPRESS_VALUE.has(tag)) return tag;
-        if (tag === val || tag.toLowerCase() === val) return tag;
-        if (tag === 'INDENT' || tag === 'OUTDENT') return `${tag.padEnd(maxTag)}  ${val}`;
-        if (tag === 'STRING' || tag === 'REGEX') return `${tag.padEnd(maxTag)}  ${val}`;
-        return `${tag.padEnd(maxTag)}  ${JSON.stringify(val)}`;
-      }).join('\n');
-    }
-    function compileCode() {
-      try {
-        const source = monacoEditor.getValue();
-        const opts = {};
-        if (!showPreamble) opts.skipPreamble = true;
-        if (showTypes) opts.types = 'emit';
-        const result = compile(source, opts);
-        let parts = [];
-        if (showTokens) {
-          parts.push(formatTokens(result.tokens));
-        }
-        if (showSexp) {
-          parts.push(window.toSexpr ? window.toSexpr(result.sexpr, 0, true) : JSON.stringify(result.sexpr, null, 1));
-        }
-        if (showTypes && result.dts) {
-          parts.push('// .d.ts\n' + result.dts.trim());
-        }
-        if (showJS) {
-          parts.push(result.code);
-        }
-        const outputText = parts.join('\n\n');
-        // Update output editor language and content
-        const model = outputEditor.getModel();
-        let lang = (showTokens || showSexp) ? 'plaintext' : (showTypes && !showJS) ? 'typescript' : 'javascript';
-        monaco.editor.setModelLanguage(model, lang);
-        outputEditor.setValue(outputText);
-      } catch (error) {
-        const model = outputEditor.getModel();
-        monaco.editor.setModelLanguage(model, 'plaintext');
-        outputEditor.setValue(`Error: ${error.message}`);
-      }
-    }
-    // ========================================================================
-    // Tab Switching
-    // ========================================================================
-    async function switchToTab(tabName) {
-      // Update URL hash
-      window.location.hash = tabName;
-      // Update active tab
-      document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
-      document.querySelector(`.tab[data-tab="${tabName}"]`).classList.add('active');
-      // Update active pane
-      document.querySelectorAll('.pane').forEach(p => p.classList.remove('active'));
-      document.getElementById(`${tabName}-pane`).classList.add('active');
-      // Focus appropriate input and run setup
-      if (tabName === 'repl') {
-        // REPL uses simple light/dark based on page mode
-        monaco.editor.setTheme(isDark ? 'vs-dark' : 'vs');
-        replEditor.focus();
-      } else if (tabName === 'compiler') {
-        // Compiler restores user's selected theme
-        await setTheme(themeSelect.value);
-        compileCode();
-      }
-    }
-    document.querySelectorAll('.tab').forEach(tab => {
-      tab.addEventListener('click', () => switchToTab(tab.dataset.tab));
-    });
-    // Handle browser back/forward
-    window.addEventListener('hashchange', () => {
-      const hash = window.location.hash.slice(1);
-      if (['compiler', 'repl'].includes(hash)) {
-        switchToTab(hash);
-      }
-    });
-    // Restore toggle button states from localStorage (before page reveal)
-    showTokensBtn.classList.toggle('active', showTokens);
-    showSexpBtn.classList.toggle('active', showSexp);
-    showPreambleBtn.classList.toggle('active', showPreamble);
-    showTypesBtn.classList.toggle('active', showTypes);
-    showJSBtn.classList.toggle('active', showJS);
-    // Initialize from URL hash on page load (default to compiler)
-    const initialTab = window.location.hash.slice(1);
-    if (['compiler', 'repl'].includes(initialTab)) {
-      await switchToTab(initialTab);
-    } else {
-      // No hash - compiler is default
-      compileCode();
-    }
-    // Restore saved theme (after all editors are created and initialized)
-    const savedTheme = localStorage.getItem('rip-repl-theme');
-    if (savedTheme) {
-      themeSelect.value = savedTheme;
-      await setTheme(savedTheme);
-    } else {
-      await setTheme(isDark ? 'vs-dark' : 'vs');
-    }
-    // ========================================================================
-    // Resizable Panes (Live Compiler)
-    // ========================================================================
-    if (resizer && leftPane && rightPane) {
-      let isResizing = false;
-      resizer.addEventListener('mousedown', (e) => {
-        isResizing = true;
-        document.body.style.cursor = 'col-resize';
-        e.preventDefault();
-      });
-      document.addEventListener('mousemove', (e) => {
-        if (!isResizing) return;
-        const container = document.querySelector('.compiler-container');
-        const containerRect = container.getBoundingClientRect();
-        const offsetX = e.clientX - containerRect.left;
-        const containerWidth = containerRect.width;
-        // Calculate percentage (20% min, 80% max for each side)
-        let leftPercent = (offsetX / containerWidth) * 100;
-        leftPercent = Math.max(20, Math.min(80, leftPercent));
-        leftPane.style.flexBasis = `${leftPercent}%`;
-        rightPane.style.flexBasis = `${100 - leftPercent}%`;
-      });
-      document.addEventListener('mouseup', () => {
-        if (isResizing) {
-          isResizing = false;
-          document.body.style.cursor = 'default';
-        }
-      });
-    }
-    // ========================================================================
-    // REPL Implementation
-    // ========================================================================
-    let replHistory = [];
-    let historyIndex = -1;
-    let replBuffer = '';
-    let reactiveVars = new Set();  // Track reactive variables across evaluations
-    // Create isolated iframe context for REPL (like vm.createContext in Node)
-    const iframe = document.createElement('iframe');
-    iframe.style.display = 'none';
-    document.body.appendChild(iframe);
-    const replContext = iframe.contentWindow;
-    // Add builtins to iframe context
-    replContext.console = console;
-    replContext.showSexp = false;
-    replContext.showTokens = false;
-    replContext.__reactiveVars = {};  // Store reactive objects persistently
-    // Inject reactive preamble into iframe context
-    (function injectReactivePreamble() {
-      const ctx = replContext;
-      ctx.__currentEffect = null;
-      ctx.__pendingEffects = new Set();
-      ctx.__state = function(v) {
-        const subs = new Set();
-        let notifying = false, locked = false, dead = false;
-        const s = {
-          get value() { if (dead) return v; if (ctx.__currentEffect) { subs.add(ctx.__currentEffect); ctx.__currentEffect.dependencies.add(subs); } return v; },
-          set value(n) {
-            if (dead || locked || n === v || notifying) return;
-            v = n;
-            notifying = true;
-            for (const sub of subs) if (sub.markDirty) sub.markDirty();
-            for (const sub of subs) if (!sub.markDirty) ctx.__pendingEffects.add(sub);
-            const fx = [...ctx.__pendingEffects]; ctx.__pendingEffects.clear();
-            for (const e of fx) e.run();
-            notifying = false;
-          },
-          read() { return v; },
-          lock() { locked = true; return s; },
-          free() { subs.clear(); return s; },
-          kill() { dead = true; subs.clear(); return v; },
-          valueOf() { return this.value; },
-          toString() { return String(this.value); },
-          [Symbol.toPrimitive](hint) { return hint === 'string' ? this.toString() : this.valueOf(); }
-        };
-        return s;
-      };
-      ctx.__computed = function(fn) {
-        let v, dirty = true, locked = false, dead = false;
-        const subs = new Set();
-        const c = {
-          dependencies: new Set(),
-          markDirty() {
-            if (dead || locked || dirty) return;
-            dirty = true;
-            for (const s of subs) if (s.markDirty) s.markDirty();
-            for (const s of subs) if (!s.markDirty) ctx.__pendingEffects.add(s);
-          },
-          get value() {
-            if (dead) return v;
-            if (ctx.__currentEffect) { subs.add(ctx.__currentEffect); ctx.__currentEffect.dependencies.add(subs); }
-            if (dirty && !locked) {
-              for (const d of c.dependencies) d.delete(c); c.dependencies.clear();
-              const prev = ctx.__currentEffect; ctx.__currentEffect = c;
-              try { v = fn(); } finally { ctx.__currentEffect = prev; }
-              dirty = false;
-            }
-            return v;
-          },
-          read() { return dead ? v : c.value; },
-          lock() { locked = true; c.value; return c; },
-          free() { for (const d of c.dependencies) d.delete(c); c.dependencies.clear(); subs.clear(); return c; },
-          kill() { dead = true; const result = v; c.free(); return result; },
-          valueOf() { return this.value; },
-          toString() { return String(this.value); },
-          [Symbol.toPrimitive](hint) { return hint === 'string' ? this.toString() : this.valueOf(); }
-        };
-        return c;
-      };
-      ctx.__effect = function(fn) {
-        const e = {
-          dependencies: new Set(),
-          run() {
-            for (const d of e.dependencies) d.delete(e); e.dependencies.clear();
-            const prev = ctx.__currentEffect; ctx.__currentEffect = e;
-            try { fn(); } finally { ctx.__currentEffect = prev; }
-          },
-          free() { for (const d of e.dependencies) d.delete(e); e.dependencies.clear(); }
-        };
-        e.run();
-        return () => e.free();
-      };
-      ctx.__batch = function(fn) { fn(); };
-      ctx.__readonly = function(v) { return Object.freeze({ value: v }); };
-    })();
-    function addOutput(content, className = '') {
-      const line = document.createElement('div');
-      line.className = `repl-line ${className}`;
-      line.innerHTML = content;
-      replOutput.appendChild(line);
-      replOutput.scrollTop = replOutput.scrollHeight;
-    }
-    function evaluateRip(code) {
-      try {
-        // Pass reactiveVars to compiler so it knows which vars need .value access
-        const result = compile(code, { reactiveVars, skipPreamble: true });
-        let js = result.code;
-        // Track new reactive variables
-        if (result.reactiveVars) {
-          for (const v of result.reactiveVars) {
-            reactiveVars.add(v);
-          }
-        }
-        // REPL strategy: Strip let/const declarations entirely
-        // Assignments will create properties on iframe's window (global scope)
-        // This allows variables to persist between eval() calls
-        // Remove: let x, y, z;\n
-        js = js.replace(/^let\s+[^;]+;\s*\n+/m, '');
-        // Transform reactive declarations to persist in __reactiveVars
-        // const x = __state(...) → x = __reactiveVars.x ?? (__reactiveVars.x = __state(...))
-        js = js.replace(
-          /^const\s+(\w+)\s*=\s*((?:__state|__computed|__effect)\(.+\));?$/gm,
-          (match, varName, rhs) => {
-            return `${varName} = __reactiveVars['${varName}'] ?? (__reactiveVars['${varName}'] = ${rhs});`;
-          }
-        );
-        // Remove remaining const (but keep the assignment) for non-reactive
-        js = js.replace(/^const\s+(\w+)\s*=/gm, '$1 =');
-        // Evaluate in iframe context - assignments create globals
-        const evalResult = replContext.eval(js);
-        // Store in _ (unwrap reactive values)
-        if (evalResult !== undefined) {
-          replContext._ = evalResult;
-        }
-        return { success: true, value: evalResult, result };
-      } catch (error) {
-        return { success: false, error: error.message };
-      }
-    }
-    // Built-in properties to preserve when clearing REPL context
-    const replBuiltins = new Set([
-      'console', 'showSexp', 'showTokens', 'eval', 'window', 'document',
-      'location', 'navigator', 'self', 'top', 'parent', 'frames',
-      '__state', '__computed', '__effect', '__batch', '__readonly',
-      '__currentEffect', '__pendingEffects', '__reactiveVars',
-      '__rip', '__flushEffects', '__primitiveCoercion',
-      '__setErrorHandler', '__handleError', '__catchErrors', '__errorHandler',
-      '__batching',
-    ]);
-    function handleCommand(cmd) {
-      switch (cmd) {
-        case '.help':
-          addOutput(`
-<span class="help-text">Rip Playground Commands:</span>
-<span class="command">.help</span>     - Show this help
-<span class="command">.clear</span>    - Clear output
-<span class="command">.vars</span>     - Show variables
-<span class="command">.sexp</span>     - Toggle s-expression display
-<span class="command">.tokens</span>   - Toggle token display
-<span class="help-text">Features:</span>
-- Variables persist across evaluations
-- Previous result in <span class="var-name">_</span> variable
-- Shift+Enter for multi-line input
-- All Rip features: heregex, regex+, classes, etc.
-          `, 'command-output');
-          break;
-        case '.clear':
-          replOutput.innerHTML = '';
-          // Reset reactive tracking
-          reactiveVars.clear();
-          replContext.__reactiveVars = {};
-          // Clear all user-defined globals in iframe
-          for (const key of Object.keys(replContext)) {
-            if (!replBuiltins.has(key) && !key.startsWith('__')) {
-              try { delete replContext[key]; } catch {}
-            }
-          }
-          addOutput('<div class="welcome">Output and context cleared.</div>');
-          break;
-        case '.vars':
-          const vars = Object.keys(replContext).filter(k =>
-            !replBuiltins.has(k) && !k.startsWith('__') || k === '_'
-          );
-          if (vars.length === 0 || (vars.length === 1 && vars[0] === '_' && replContext._ === undefined)) {
-            addOutput('<span class="help-text">No variables defined</span>', 'command-output');
-          } else {
-            let output = '<span class="help-text">Variables:</span>\\n';
-            vars.forEach(v => {
-              try {
-                let val = replContext[v];
-                let typeIndicator = '=';
-                // Check if it's a reactive value
-                if (val && typeof val === 'object' && 'value' in val) {
-                  if (typeof val.markDirty === 'function') {
-                    typeIndicator = '<span style="color:#c586c0">~=</span>';  // computed
-                  } else if (typeof val === 'function') {
-                    typeIndicator = '<span style="color:#c586c0">~&gt;</span>';  // effect
-                  } else {
-                    typeIndicator = '<span style="color:#c586c0">:=</span>';  // state
-                  }
-                  val = val.value;
-                }
-                const formatted = formatValue(val);
-                output += `  <span class="var-name">${v}</span> ${typeIndicator} <span class="var-value">${escapeHtml(formatted)}</span>\\n`;
-              } catch {
-                output += `  <span class="var-name">${v}</span> = <span class="var-value">[object]</span>\\n`;
-              }
-            });
-            addOutput(output, 'command-output');
-          }
-          break;
-        case '.sexp':
-          replContext.showSexp = !replContext.showSexp;
-          addOutput(`S-expression display: ${replContext.showSexp ? 'ON' : 'OFF'}`, 'command-output');
-          break;
-        case '.tokens':
-          replContext.showTokens = !replContext.showTokens;
-          addOutput(`Token display: ${replContext.showTokens ? 'ON' : 'OFF'}`, 'command-output');
-          break;
-        default:
-          addOutput(`Unknown command: ${cmd}`, 'error');
-          addOutput('Type .help for available commands', 'help-text');
-      }
-    }
-    function handleLine(line) {
-      // Add to history
-      if (line.trim() && (replHistory.length === 0 || replHistory[replHistory.length - 1] !== line)) {
-        replHistory.push(line);
-      }
-      historyIndex = replHistory.length;
-      // Show input with syntax highlighting
-      const promptText = replBuffer ? '....>' : 'rip>';
-      const codeId = `repl-code-${Date.now()}`;
-      addOutput(`<span class="prompt">${promptText}</span> <span class="repl-code" id="${codeId}">${escapeHtml(line)}</span>`);
-      monaco.editor.colorize(line, 'rip', {}).then(highlighted => {
-        const el = document.getElementById(codeId);
-        if (el) el.innerHTML = highlighted;
-      });
-      // Handle commands
-      if (line.startsWith('.')) {
-        handleCommand(line);
-        return;
-      }
-      // Add to buffer
-      replBuffer = replBuffer ? replBuffer + '\n' + line : line;
-      // Try to evaluate
-      const evalResult = evaluateRip(replBuffer);
-      if (evalResult.success) {
-        // Show debug info if enabled
-        if (replContext.showTokens) {
-          addOutput(formatTokens(evalResult.result.tokens).replace(/\n/g, '<br>'), 'command-output');
-        }
-        if (replContext.showSexp) {
-          const sexp = window.toSexpr ? window.toSexpr(evalResult.result.sexpr, 0, true) : JSON.stringify(evalResult.result.sexpr, null, 1);
-          const formatted = sexp.replace(/\n/g, '<br>').replace(/ /g, '&nbsp;');
-          addOutput(`${formatted}`, 'command-output');
-        }
-        // Show result (unwrap reactive values)
-        if (evalResult.value !== undefined) {
-          let displayValue = evalResult.value;
-          // Unwrap reactive objects to show their .value
-          if (displayValue && typeof displayValue === 'object' && 'value' in displayValue) {
-            displayValue = displayValue.value;
-          }
-          const formatted = formatValue(displayValue);
-          addOutput(`<span class="result">→ ${escapeHtml(formatted)}</span>`);
-        }
-        replBuffer = '';
-        promptSpan.textContent = 'rip>';
-      } else if (evalResult.error.includes('Unexpected end')) {
-        // Incomplete - wait for more input
-        promptSpan.textContent = '....>';
-      } else {
-        // Real error
-        addOutput(`<span class="error">✗ ${escapeHtml(evalResult.error)}</span>`);
-        replBuffer = '';
-        promptSpan.textContent = 'rip>';
-      }
-    }
-    function escapeHtml(str) {
-      return String(str)
-        .replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;');
-    }
-    // Format values for display (like Node's util.inspect)
-    function formatValue(val) {
-      if (val === null) return 'null';
-      if (val === undefined) return 'undefined';
-      if (val instanceof RegExp) return val.toString();
-      if (typeof val === 'function') return val.toString();
-      if (typeof val === 'string') return JSON.stringify(val);
-      if (typeof val === 'number' || typeof val === 'boolean') return String(val);
-      if (Array.isArray(val)) {
-        try { return JSON.stringify(val); } catch { return '[Array]'; }
-      }
-      if (typeof val === 'object') {
-        try { return JSON.stringify(val, null, 2); } catch { return '[Object]'; }
-      }
-      return String(val);
-    }
-    // Auto-resize REPL input as lines are added
-    const replEditorEl = document.getElementById('repl-editor-container');
-    const replLineHeight = 24;
-    function resizeReplInput() {
-      const lineCount = replEditor.getModel().getLineCount();
-      const newHeight = Math.max(replLineHeight, lineCount * replLineHeight);
-      replEditorEl.style.height = newHeight + 'px';
-      replEditor.layout();
-    }
-    replEditor.onDidChangeModelContent(() => resizeReplInput());
-    // REPL input handling (Monaco keybindings)
-    replEditor.onKeyDown((e) => {
-      if (e.keyCode === monaco.KeyCode.Enter && !e.shiftKey) {
-        e.preventDefault();
-        e.stopPropagation();
-        const line = replEditor.getValue();
-        replEditor.setValue('');
-        resizeReplInput();
-        if (line.trim()) handleLine(line);
-      } else if (e.keyCode === monaco.KeyCode.Enter && e.shiftKey) {
-        // Allow Shift+Enter to insert newline (Monaco default)
-        return;
-      } else if (e.keyCode === monaco.KeyCode.UpArrow) {
-        e.preventDefault();
-        e.stopPropagation();
-        if (historyIndex > 0) {
-          historyIndex--;
-          replEditor.setValue(replHistory[historyIndex] || '');
-          const model = replEditor.getModel();
-          const lastCol = model.getLineMaxColumn(1);
-          replEditor.setPosition({ lineNumber: 1, column: lastCol });
-        }
-      } else if (e.keyCode === monaco.KeyCode.DownArrow) {
-        e.preventDefault();
-        e.stopPropagation();
-        if (historyIndex < replHistory.length) {
-          historyIndex++;
-          replEditor.setValue(replHistory[historyIndex] || '');
-          const model = replEditor.getModel();
-          const lastCol = model.getLineMaxColumn(1);
-          replEditor.setPosition({ lineNumber: 1, column: lastCol });
-        }
-      }
-    });
-    // ========================================================================
-    // Compiler Event Handlers
-    // ========================================================================
-    // ========================================================================
-    // Source Persistence & Example Snippets
-    // ========================================================================
-    const exampleSelect = document.getElementById('example-select');
-    exampleSelect.value = savedExample;
-    let settingExample = false;
-    let saveTimer = null;
-    function saveSource() {
-      if (saveTimer) clearTimeout(saveTimer);
-      saveTimer = setTimeout(() => {
-        localStorage.setItem('rip-playground-source', monacoEditor.getValue());
-      }, 2000);
-    }
-    // Auto-compile on change + persist + track example
-    monacoEditor.onDidChangeModelContent(() => {
-      compileCode();
-      saveSource();
-      if (!settingExample && exampleSelect.value !== 'custom') {
-        exampleSelect.value = 'custom';
-        localStorage.setItem('rip-playground-example', 'custom');
-      }
-    });
-    // Example dropdown handler
-    exampleSelect.addEventListener('change', (e) => {
-      const name = e.target.value;
-      if (name === 'custom') {
-        localStorage.setItem('rip-playground-example', 'custom');
-      } else if (examples[name]) {
-        settingExample = true;
-        monacoEditor.setValue(examples[name]);
-        settingExample = false;
-        localStorage.setItem('rip-playground-example', name);
-        localStorage.setItem('rip-playground-source', examples[name]);
-      }
-    });
-    const toggles = [
-      { btn: showTokensBtn,   key: 'rip-repl-tokens', get: () => showTokens,   set: v => showTokens = v },
-      { btn: showSexpBtn,     key: 'rip-repl-sexp',   get: () => showSexp,     set: v => showSexp = v },
-      { btn: showPreambleBtn, key: 'rip-preamble',     get: () => showPreamble, set: v => showPreamble = v },
-      { btn: showTypesBtn,    key: 'rip-types',        get: () => showTypes,    set: v => showTypes = v },
-      { btn: showJSBtn,       key: 'rip-repl-js',      get: () => showJS,       set: v => showJS = v },
-    ];
-    for (const { btn, key, get, set } of toggles) {
-      btn.addEventListener('click', () => {
-        set(!get());
-        btn.classList.toggle('active', get());
-        localStorage.setItem(key, get());
-        compileCode();
-      });
-    }
-    // Clear button - clears the Rip source editor
-    document.getElementById('clear-btn').addEventListener('click', () => {
-      monacoEditor.setValue('');
-      compileCode();
-      monacoEditor.focus();
-    });
-    // Run button - executes the Rip code and outputs to console
-    async function runCode() {
-      try {
-        const source = monacoEditor.getValue();
-        const result = compile(source);
-        const js = result.code;
-        // Execute the compiled JavaScript and log to console
-        console.clear();
-        console.log('%c=== Rip Code Execution ===', 'color: #007acc; font-weight: bold');
-        await (0, eval)(`(async()=>{\n${js}\n})()`);
-        console.log('%c=== Execution Complete ===', 'color: #4ec9b0; font-weight: bold');
-      } catch (error) {
-        console.error('Execution Error:', error);
-      }
-    }
-    document.getElementById('run-btn').addEventListener('click', runCode);
-    // Keyboard shortcuts: Cmd+Enter (Mac), Ctrl+Enter (Windows/Linux)
-    monacoEditor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, runCode);
-    // F5 runs code from anywhere on the page
-    document.addEventListener('keydown', (e) => {
-      if (e.key === 'F5') {
-        e.preventDefault();
-        runCode();
-      }
-    });
-  </script>
-</body>
-</html>