npm - rip-lang - Versions diffs - 3.2.1 → 3.3.0 - Mend

rip-lang 3.2.1 → 3.3.0

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

package/docs/dist/rip.browser.js +2 -2
package/docs/dist/rip.browser.min.js +1 -1
package/docs/dist/rip.browser.min.js.br +0 -0
package/docs/index.html +1574 -2
package/docs/rip-square.png +0 -0
package/package.json +1 -1
package/docs/repl.html +0 -1079

package/docs/repl.html DELETED Viewed

@@ -1,1079 +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 REPL - Interactive Browser Environment</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;
-    }
-    body.ready {
-      opacity: 1;
-    }
-    .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;
-      gap: 0;
-      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;
-    }
-    .prompt-continuation {
-      color: #666;
-    }
-    .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: center;
-      gap: 10px;
-      background: #252526;
-      padding: 10px;
-      border: 1px solid #3e3e42;
-      border-radius: 4px;
-    }
-    .repl-prompt-text {
-      color: #4ec9b0;
-      font-family: 'Monaco', 'Menlo', monospace;
-      font-weight: 600;
-      font-size: 14px;
-    }
-    .repl-input {
-      flex: 1;
-      background: transparent;
-      border: none;
-      outline: none;
-      color: #d4d4d4;
-      font-family: 'Monaco', 'Menlo', monospace;
-      font-size: 14px;
-    }
-    /* Compiler Styles */
-    .compiler-container {
-      flex: 1;
-      min-height: 0;
-      display: flex;
-      gap: 0;
-      background: #3e3e42;
-      padding: 20px;
-      position: relative;
-    }
-    .resizer {
-      width: 6px;
-      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: 2px;
-      height: 40px;
-      background: #858585;
-      border-radius: 1px;
-    }
-    .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, .output-code {
-      flex: 1;
-      min-height: 0;
-      padding: 15px;
-      font-family: 'Monaco', 'Menlo', monospace;
-      font-size: 14px;
-      line-height: 1.6;
-      background: #1e1e1e;
-      color: #d4d4d4;
-      border: none;
-      outline: none;
-      resize: none;
-      overflow: auto;
-    }
-    .output-code {
-      background: #1e1e1e;
-      white-space: pre;
-      overflow: auto;
-    }
-    /* Scrollbar styling */
-    ::-webkit-scrollbar {
-      width: 10px;
-      height: 10px;
-    }
-    ::-webkit-scrollbar-track {
-      background: #1e1e1e;
-    }
-    ::-webkit-scrollbar-thumb {
-      background: #424242;
-      border-radius: 5px;
-    }
-    ::-webkit-scrollbar-thumb:hover {
-      background: #4e4e4e;
-    }
-    /* 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;
-    }
-    /* Syntax highlighting for JavaScript output */
-    .output-code .hl-keyword { color: #569cd6; }
-    .output-code .hl-string { color: #ce9178; }
-    .output-code .hl-number { color: #b5cea8; }
-    .output-code .hl-comment { color: #6a9955; font-style: italic; }
-    .output-code .hl-function { color: #dcdcaa; }
-    .output-code .hl-operator { color: #d4d4d4; }
-  </style>
-</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 Browser REPL
-      </h1>
-      <div class="subtitle">Interactive environment with REPL console and live compiler</div>
-    </div>
-    <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 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">
-    <!-- REPL Pane -->
-    <div class="pane" id="repl-pane">
-      <div class="repl-container">
-        <div class="repl-output" id="repl-output">
-          <div class="welcome">
-            <strong>Rip REPL</strong> - Interactive Browser 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>
-          <input type="text" class="repl-input" id="repl-input" placeholder="Enter Rip code..." autofocus>
-        </div>
-      </div>
-    </div>
-    <!-- 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">
-              <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>
-          <textarea class="editor" id="editor" spellcheck="false"># Rip code - edit me!
-def fibonacci(n)
-  if n <= 1
-    n
-  else
-    fibonacci(n - 1) + fibonacci(n - 2)
-# Try heregex
-pattern = ///
-  ^ \\d+      # digits
-  \\s*        # space
-  [a-z]+     # letters
-  $
-///i
-# Try regex features
-email = "user@example.com"
-domain = email[/@(.+)$/, 1]
-console.log "Fib(10):", fibonacci(10)
-console.log "Domain:", domain</textarea>
-        </div>
-        <div class="resizer" id="resizer"></div>
-        <div class="editor-pane" id="editor-right">
-          <div class="pane-header">
-            <span>Generated JavaScript</span>
-            <div class="pane-header-buttons">
-              <button id="show-sexp" title="Toggle S-expression display">S-Expressions</button>
-              <button id="show-tokens" title="Toggle token stream display">Tokens</button>
-            </div>
-          </div>
-          <pre class="output-code" id="output"></pre>
-        </div>
-      </div>
-    </div>
-  </div>
-  <script type="module">
-    // Add timestamp to bust browser cache for ES modules
-    const timestamp = Date.now();
-    const module = await import(`./dist/rip.browser.min.js?v=${timestamp}`);
-    const { compile, formatSExpr, VERSION, BUILD_DATE } = module;
-    // Make compile and formatSExpr available globally for the script
-    window.compile = compile;
-    window.toSexpr = formatSExpr;
-    // Update subtitle with version and build time
-    // Convert GMT timestamp to local time for display
-    const buildDate = BUILD_DATE; // GMT timestamp from build
-    const localBuildDate = new Date(buildDate.replace('@', 'T').replace('GMT', 'Z'))
-      .toLocaleString(undefined, {
-        year: 'numeric', month: 'short', day: 'numeric',
-        hour: '2-digit', minute: '2-digit', timeZoneName: 'short'
-      });
-    document.querySelector('.subtitle').textContent =
-      `Interactive environment • Version ${VERSION} • Built ${localBuildDate}`;
-    // ========================================================================
-    // DOM Element References (must be before functions that use them)
-    // ========================================================================
-    const editor = document.getElementById('editor');
-    const output = document.getElementById('output');
-    const showSexpBtn = document.getElementById('show-sexp');
-    const showTokensBtn = document.getElementById('show-tokens');
-    const replOutput = document.getElementById('repl-output');
-    const replInput = document.getElementById('repl-input');
-    const promptSpan = document.getElementById('prompt');
-    const resizer = document.getElementById('resizer');
-    const leftPane = document.getElementById('editor-left');
-    const rightPane = document.getElementById('editor-right');
-    // ========================================================================
-    // Compiler Implementation (must be before tab switching)
-    // ========================================================================
-    // Track toggle state
-    let showSexp = false;
-    let showTokens = false;
-    // Strip utility helper functions for cleaner display
-    function stripHelpers(code) {
-      // Remove helper function definitions (slice, modulo, toSearchable)
-      code = code.replace(/^const slice = \[\]\.slice;\n/m, '');
-      code = code.replace(/^const modulo = \(n, d\) => \{[^}]+\};\n/m, '');
-      code = code.replace(/^const toSearchable = \(v, allowNewlines\) => \{[\s\S]+?\n\};\n/m, '');
-      // Remove empty lines at the start
-      code = code.replace(/^\n+/, '');
-      return code;
-    }
-    // Simple syntax highlighter for JavaScript
-    function highlightJS(code) {
-      return code
-        // Keywords
-        .replace(/\\b(def|function|async|const|let|var|if|else|return|while|for|class|extends|super|new|this|try|catch|finally|throw|switch|case|default|break|continue)\\b/g,
-          '<span class="hl-keyword">$1</span>')
-        // Strings
-        .replace(/("(?:[^"\\\\]|\\\\.)*"|'(?:[^'\\\\]|\\\\.)*'|`(?:[^`\\\\]|\\\\.)*`)/g,
-          '<span class="hl-string">$1</span>')
-        // Numbers
-        .replace(/\\b(\\d+\\.?\\d*|0x[0-9a-fA-F]+|0b[01]+|0o[0-7]+)\\b/g,
-          '<span class="hl-number">$1</span>')
-        // Comments
-        .replace(/(\/\/.*$|\/\*[\s\S]*?\*\/)/gm,
-          '<span class="hl-comment">$1</span>')
-        // Function names (simple: word before parenthesis)
-        .replace(/\b([a-zA-Z_$][a-zA-Z0-9_$]*)(?=\s*\()/g,
-          '<span class="hl-function">$1</span>');
-    }
-    function compileCode() {
-      try {
-        const source = editor.value;
-        const result = compile(source);
-        let outputText = '';
-        if (showTokens) {
-          result.tokens.forEach(t => {
-            outputText += `${t[0].padEnd(12)} ${JSON.stringify(t[1])}\n`;
-          });
-          outputText += '\n';
-        }
-        if (showSexp) {
-          outputText += window.toSexpr ? window.toSexpr(result.sexpr, 0, true) : JSON.stringify(result.sexpr, null, 1);
-          outputText += '\n\n';
-        }
-        // JavaScript output with syntax highlighting (strip helpers for cleaner display)
-        const cleanCode = stripHelpers(result.code);
-        const highlightedCode = highlightJS(cleanCode);
-        output.innerHTML = outputText.replace(/</g, '&lt;').replace(/>/g, '&gt;') + highlightedCode;
-      } catch (error) {
-        output.textContent = `Error: ${error.message}`;
-      }
-    }
-    // ========================================================================
-    // Tab Switching
-    // ========================================================================
-    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') {
-        replInput.focus();
-      } else if (tabName === 'compiler') {
-        compileCode();  // Update compiler output
-      }
-    }
-    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);
-      }
-    });
-    // Initialize from URL hash on page load (default to compiler)
-    const initialTab = window.location.hash.slice(1);
-    if (['compiler', 'repl'].includes(initialTab)) {
-      switchToTab(initialTab);
-    } else {
-      // No hash - compiler is default
-      compileCode();
-    }
-    // Show page now that everything is initialized (prevents flicker)
-    document.body.classList.add('ready');
-    // ========================================================================
-    // 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 runtime into iframe context
-    (function injectReactiveRuntime() {
-      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, skipReactiveRuntime: 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 };
-      }
-    }
-    function handleCommand(cmd) {
-      switch (cmd) {
-        case '.help':
-          addOutput(`
-<span class="help-text">Rip Browser REPL 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
-- Multi-line input (type incomplete expression)
-- 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
-          const builtinsToKeep = ['console', 'showSexp', 'showTokens', 'eval', 'window', 'document',
-            'location', 'navigator', 'self', 'top', 'parent', 'frames', '__state', '__computed',
-            '__effect', '__batch', '__readonly', '__currentEffect', '__pendingEffects', '__reactiveVars'];
-          for (const key of Object.keys(replContext)) {
-            if (!builtinsToKeep.includes(key) && !key.startsWith('__')) {
-              try { delete replContext[key]; } catch {}
-            }
-          }
-          addOutput('<div class="welcome">Output and context cleared.</div>');
-          break;
-        case '.vars':
-          const builtins = ['console', 'showSexp', 'showTokens', 'eval', 'window', 'document',
-            'location', 'navigator', 'self', 'top', 'parent', 'frames', '__state', '__computed',
-            '__effect', '__batch', '__readonly', '__currentEffect', '__pendingEffects', '__reactiveVars'];
-          const vars = Object.keys(replContext).filter(k =>
-            !builtins.includes(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
-      const promptText = replBuffer ? '....>' : 'rip>';
-      addOutput(`<span class="prompt">${promptText}</span> ${escapeHtml(line)}`);
-      // 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) {
-          let tokenOutput = '';
-          evalResult.result.tokens.forEach(t => {
-            tokenOutput += `${t[0].padEnd(12)} ${JSON.stringify(t[1])}<br>`;
-          });
-          addOutput(tokenOutput, '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);
-    }
-    // REPL input handling
-    replInput.addEventListener('keydown', (e) => {
-      if (e.key === 'Enter') {
-        const line = e.target.value;
-        e.target.value = '';
-        handleLine(line);
-      } else if (e.key === 'ArrowUp') {
-        e.preventDefault();
-        if (historyIndex > 0) {
-          historyIndex--;
-          e.target.value = replHistory[historyIndex] || '';
-        }
-      } else if (e.key === 'ArrowDown') {
-        e.preventDefault();
-        if (historyIndex < replHistory.length) {
-          historyIndex++;
-          e.target.value = replHistory[historyIndex] || '';
-        }
-      }
-    });
-    // ========================================================================
-    // Compiler Event Handlers
-    // ========================================================================
-    // Auto-compile on changes
-    editor.addEventListener('input', compileCode);
-    // Toggle buttons for S-Expressions and Tokens
-    showSexpBtn.addEventListener('click', () => {
-      showSexp = !showSexp;
-      showSexpBtn.classList.toggle('active', showSexp);
-      compileCode();
-    });
-    showTokensBtn.addEventListener('click', () => {
-      showTokens = !showTokens;
-      showTokensBtn.classList.toggle('active', showTokens);
-      compileCode();
-    });
-    // Clear button - clears the Rip source editor
-    document.getElementById('clear-btn').addEventListener('click', () => {
-      editor.value = '';
-      compileCode();
-      editor.focus();
-    });
-    // Run button - executes the Rip code and outputs to console
-    function runCode() {
-      try {
-        const source = editor.value;
-        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');
-        eval(js);
-        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 for Run button
-    // F5, Cmd+Enter (Mac), Ctrl+Enter (Windows/Linux)
-    document.addEventListener('keydown', (e) => {
-      // F5 - Run code
-      if (e.key === 'F5') {
-        e.preventDefault();
-        runCode();
-        return;
-      }
-      // Cmd+Enter (Mac) or Ctrl+Enter (Windows/Linux) - Run code
-      if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
-        e.preventDefault();
-        runCode();
-        return;
-      }
-    });
-    // Initial compile
-    compileCode();
-  </script>
-</body>
-</html>