eyelang 1.1.12 → 1.1.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eyelang",
-  "version": "1.1.12",
+  "version": "1.1.14",
   "description": "A small Prolog-syntax-subset logic programming language for rules, goals, answers, and proofs.",
   "type": "module",
   "main": "./index.js",

package/playground.html

@@ -16,15 +16,24 @@
       --accent: #0969da;
       --accent-strong: #0757b8;
       --danger: #b42318;
+      --editor-bg: #ffffff;
+      --editor-text: #172033;
+      --editor-caret: #111827;
+      --editor-selection: rgba(9, 105, 218, 0.18);
+      --editor-error-line: #fee2e2;
+      --editor-error-border: #dc2626;
+      --line-number-bg: #f8fafc;
+      --line-number-text: #64748b;
+      --line-number-border: #e2e8f0;
       --code-bg: #0f172a;
       --code-text: #dbeafe;
-      --comment: #94a3b8;
-      --string: #86efac;
-      --number: #fbbf24;
-      --variable: #93c5fd;
-      --keyword: #c084fc;
-      --predicate: #f0abfc;
-      --punctuation: #cbd5e1;
+      --comment: #64748b;
+      --string: #047857;
+      --number: #b45309;
+      --variable: #1d4ed8;
+      --keyword: #7c3aed;
+      --predicate: #be123c;
+      --punctuation: #475569;
     }
 
     @media (prefers-color-scheme: dark) {
@@ -50,15 +59,15 @@
       line-height: 1.45;
     }
 
-    header {
-      padding: 1rem clamp(1rem, 4vw, 2rem);
-      border-bottom: 1px solid var(--border);
-      background: var(--panel);
-      position: sticky;
-      top: 0;
-      z-index: 5;
+    header,
+    main,
+    footer {
+      width: min(100% - 2rem, 72rem);
+      margin: 0 auto;
     }
 
+    header { padding: 1.25rem 0 0.9rem; }
+
     h1 {
       margin: 0;
       font-size: clamp(1.35rem, 4vw, 2rem);
@@ -67,21 +76,17 @@
     header p { margin: 0.35rem 0 0; color: var(--muted); }
 
     main {
-      display: grid;
-      grid-template-columns: minmax(0, 1fr) minmax(18rem, 32rem);
-      gap: 1rem;
-      padding: 1rem clamp(1rem, 4vw, 2rem) 2rem;
-      max-width: 1500px;
-      margin: 0 auto;
+      display: block;
+      padding: 0 0 2rem;
     }
 
-    section,
-    aside {
+    section {
       background: var(--panel);
       border: 1px solid var(--border);
       border-radius: 0.9rem;
       box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
       overflow: hidden;
+      margin: 1rem 0;
     }
 
     .panel-body { padding: 1rem; }
@@ -89,7 +94,8 @@
     .toolbar,
     .example-row,
     .button-row,
-    .option-row {
+    .option-row,
+    .background-row {
       display: flex;
       flex-wrap: wrap;
       gap: 0.6rem;
@@ -102,6 +108,18 @@
       background: var(--panel-soft);
     }
 
+    .toolbar:last-child { border-bottom: 0; }
+
+    details summary {
+      cursor: pointer;
+      font-weight: 700;
+      padding: 0.85rem 1rem;
+      background: var(--panel-soft);
+      border-bottom: 1px solid var(--border);
+    }
+
+    details:not([open]) summary { border-bottom: 0; }
+
     label { font-weight: 650; }
 
     select,
@@ -147,7 +165,8 @@
     button.primary:hover { background: var(--accent-strong); }
     button:disabled { cursor: not-allowed; opacity: 0.6; }
 
-    .option-row label {
+    .option-row label,
+    .background-row label {
       display: inline-flex;
       gap: 0.35rem;
       align-items: center;
@@ -168,17 +187,56 @@
 
     .editor {
       position: relative;
-      min-height: 58vh;
-      background: var(--code-bg);
+      min-height: 56vh;
+      background: var(--editor-bg);
       overflow: hidden;
     }
 
+    .line-numbers,
+    .editor pre,
+    .editor textarea {
+      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+      font-size: 0.95rem;
+      line-height: 1.55;
+    }
+
+    .line-numbers {
+      position: absolute;
+      inset: 0 auto 0 0;
+      width: 3.6rem;
+      padding: 1rem 0.65rem 1rem 0.35rem;
+      overflow: hidden;
+      text-align: right;
+      color: var(--line-number-text);
+      background: var(--line-number-bg);
+      border-right: 1px solid var(--line-number-border);
+      user-select: none;
+      pointer-events: none;
+      z-index: 3;
+    }
+
+    .line-numbers-inner { will-change: transform; }
+
+    .line-number {
+      display: block;
+      min-height: 1.55em;
+      padding-right: 0.1rem;
+    }
+
+    .line-number.error {
+      color: var(--danger);
+      background: var(--editor-error-line);
+      font-weight: 700;
+      margin: 0 -0.65rem 0 -0.35rem;
+      padding: 0 0.65rem 0 0.35rem;
+    }
+
     .editor pre,
     .editor textarea {
       position: absolute;
       inset: 0;
       margin: 0;
-      padding: 1rem;
+      padding: 1rem 1rem 1rem 4.35rem;
       border: 0;
       width: 100%;
       height: 100%;
@@ -186,25 +244,36 @@
       overflow: auto;
       white-space: pre;
       tab-size: 2;
-      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
-      font-size: 0.95rem;
-      line-height: 1.55;
+    }
+
+    .error-line-marker {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      display: none;
+      pointer-events: none;
+      background: var(--editor-error-line);
+      border-left: 0.28rem solid var(--editor-error-border);
+      z-index: 0;
     }
 
     .editor pre {
       pointer-events: none;
-      color: var(--code-text);
+      color: var(--editor-text);
+      z-index: 1;
     }
 
     .editor textarea {
       background: transparent;
-      color: rgba(255, 255, 255, 0.02);
-      caret-color: white;
+      color: rgba(17, 24, 39, 0.025);
+      caret-color: var(--editor-caret);
       outline: none;
-      -webkit-text-fill-color: rgba(255, 255, 255, 0.02);
+      z-index: 2;
+      -webkit-text-fill-color: rgba(17, 24, 39, 0.025);
     }
 
-    .editor textarea::selection { background: rgba(96, 165, 250, 0.35); }
+    .editor textarea::selection { background: var(--editor-selection); }
 
     .tok-comment { color: var(--comment); font-style: italic; }
     .tok-string { color: var(--string); }
@@ -250,31 +319,34 @@
 
     footer {
       color: var(--muted);
-      padding: 0 1rem 1.5rem;
+      padding: 0 0 1.5rem;
       text-align: center;
       font-size: 0.95rem;
     }
 
     footer a { color: var(--accent); }
 
-    @media (max-width: 900px) {
-      header { position: static; }
-      main { grid-template-columns: 1fr; }
-      .editor { min-height: 54vh; }
-      .output { max-height: 42vh; }
-    }
-
     @media (max-width: 560px) {
+      header,
+      main,
+      footer { width: min(100% - 1rem, 72rem); }
       .toolbar,
       .panel-body,
-      .editor-label { padding: 0.8rem; }
+      .editor-label,
+      details summary { padding: 0.8rem; }
       button,
       select,
       input[type="url"],
       input[type="search"] { width: 100%; }
       .button-row > button { flex: 1 1 8rem; }
+      .editor { min-height: 58vh; }
+      .line-numbers,
       .editor pre,
-      .editor textarea { font-size: 0.9rem; padding: 0.8rem; }
+      .editor textarea { font-size: 0.9rem; }
+      .line-numbers { width: 3.2rem; padding: 0.8rem 0.55rem 0.8rem 0.25rem; }
+      .line-number.error { margin: 0 -0.55rem 0 -0.25rem; padding: 0 0.55rem 0 0.25rem; }
+      .editor pre,
+      .editor textarea { padding: 0.8rem 0.8rem 0.8rem 3.85rem; }
     }
   </style>
 </head>
@@ -285,45 +357,62 @@
   </header>
 
   <main>
-    <section aria-labelledby="editor-heading">
+    <section aria-labelledby="examples-heading">
       <div class="toolbar" aria-label="Example loader">
-        <label for="example-search">Load example</label>
+        <label id="examples-heading" for="example-search">Load an example</label>
         <input id="example-search" type="search" placeholder="Filter examples" autocomplete="off">
         <select id="examples" aria-label="Examples"></select>
-        <button id="load-example" type="button">Load</button>
-      </div>
-
-      <div class="toolbar" aria-label="URL loader">
-        <label for="source-url">Load from URL</label>
-        <input id="source-url" type="url" placeholder="https://example.org/program.pl">
-        <button id="load-url" type="button">Load URL</button>
+        <button id="load-example" type="button">Load example</button>
       </div>
+    </section>
 
-      <div class="toolbar option-row" aria-label="Run options">
-        <label><input id="proof" type="checkbox"> proof explanations</label>
-        <label><input id="stats" type="checkbox"> show stats</label>
-      </div>
+    <section aria-labelledby="advanced-heading">
+      <details>
+        <summary id="advanced-heading">⚙ Advanced configuration</summary>
+        <div class="toolbar" aria-label="URL loader">
+          <label for="source-url">Load Eyelang from URL</label>
+          <input id="source-url" type="url" placeholder="https://example.org/program.pl">
+          <button id="load-url" type="button">Load from URL</button>
+        </div>
+        <div class="toolbar background-row">
+          <label><input id="load-background" type="checkbox"> Load into background knowledge instead of overwriting the editor</label>
+          <span id="background-status" class="hint">No background knowledge loaded.</span>
+          <button id="clear-background" type="button">Clear background</button>
+        </div>
+        <div class="toolbar option-row" aria-label="Run options">
+          <label><input id="proof" type="checkbox"> Show proof explanations</label>
+          <label><input id="stats" type="checkbox"> Show stats</label>
+        </div>
+        <div class="panel-body">
+          <p class="hint">Enter any Eyelang file URL and click “Load from URL”. Background knowledge is prepended when the program runs.</p>
+        </div>
+      </details>
+    </section>
 
+    <section aria-labelledby="editor-heading">
       <div class="editor-shell">
         <div class="editor-label">
           <strong id="editor-heading">Editable Eyelang program</strong>
           <span id="source-name" class="hint">custom program</span>
         </div>
         <div class="editor">
+          <div id="line-numbers" class="line-numbers" aria-hidden="true"><div class="line-numbers-inner"></div></div>
+          <div id="error-line-marker" class="error-line-marker" aria-hidden="true"></div>
           <pre id="highlight" aria-hidden="true"><code></code></pre>
           <textarea id="source" spellcheck="false" autocapitalize="off" autocomplete="off" aria-label="Editable Eyelang source"></textarea>
         </div>
       </div>
-    </section>
-
-    <aside aria-labelledby="output-heading">
       <div class="toolbar button-row">
-        <button id="run" type="button" class="primary">Run</button>
+        <button id="run" type="button" class="primary">Run reasoning</button>
         <button id="stop" type="button" disabled>Stop</button>
         <button id="copy-source" type="button">Copy source</button>
         <button id="copy-output" type="button">Copy output</button>
         <button id="share" type="button">Copy share link</button>
+        <button id="create-gist" type="button">Create Gist share</button>
       </div>
+    </section>
+
+    <section aria-labelledby="output-heading">
       <div class="editor-label">
         <strong id="output-heading">Output</strong>
         <span id="elapsed" class="hint">Idle.</span>
@@ -336,7 +425,7 @@
       <div class="panel-body">
         <p class="hint">For local use, serve the checkout with a small HTTP server first; browser modules and example loading usually do not work from <code>file://</code>.</p>
       </div>
-    </aside>
+    </section>
   </main>
 
   <footer>
@@ -477,6 +566,9 @@
     const FALLBACK_SOURCE = `materialize(answer, 1).
 answer(ok) :- eq(ok, ok).
 `;
+    const HIGHLIGHT_LIMIT = 200000;
+    const MAX_SHARE_URL_LENGTH = 1900;
+    const GIST_STATE_FILENAME = 'eyelang-playground-state.json';
     const KEYWORDS = new Set(['materialize', 'memoize']);
     const BUILTINS = new Set([
             "abs",
@@ -561,33 +653,52 @@ answer(ok) :- eq(ok, ok).
 
     const source = document.querySelector('#source');
     const highlight = document.querySelector('#highlight');
+    const lineNumbers = document.querySelector('#line-numbers');
+    const lineNumbersInner = lineNumbers.firstElementChild;
+    const errorLineMarker = document.querySelector('#error-line-marker');
     const exampleSelect = document.querySelector('#examples');
     const exampleSearch = document.querySelector('#example-search');
     const output = document.querySelector('#output');
     const status = document.querySelector('#status');
     const elapsed = document.querySelector('#elapsed');
     const sourceName = document.querySelector('#source-name');
+    const backgroundStatus = document.querySelector('#background-status');
+    const loadBackground = document.querySelector('#load-background');
     const proof = document.querySelector('#proof');
     const stats = document.querySelector('#stats');
     const runButton = document.querySelector('#run');
     const stopButton = document.querySelector('#stop');
+    let backgroundSource = '';
+    let backgroundName = '';
     let activeWorker = null;
     let activeWorkerUrl = null;
+    let renderToken = 0;
+    let syntaxErrorLine = null;
+    let sourceReference = { kind: 'custom' };
+    let sourceDirty = false;
+    let backgroundReference = null;
 
     populateExamples(EXAMPLES);
-    restoreFromHash() || loadExample('ancestor');
+    await restoreFromHashOrLoadDefault();
     loadVersion();
 
-    source.addEventListener('input', render);
+    source.addEventListener('input', () => {
+      sourceDirty = true;
+      sourceReference = { kind: 'custom' };
+      clearSyntaxError();
+      render();
+    });
     source.addEventListener('scroll', syncScroll);
     exampleSearch.addEventListener('input', () => populateExamples(filterExamples(exampleSearch.value)));
     document.querySelector('#load-example').addEventListener('click', () => loadExample(exampleSelect.value));
     document.querySelector('#load-url').addEventListener('click', loadUrl);
+    document.querySelector('#clear-background').addEventListener('click', clearBackground);
     document.querySelector('#run').addEventListener('click', runProgram);
     document.querySelector('#stop').addEventListener('click', stopProgram);
     document.querySelector('#copy-source').addEventListener('click', () => copyText(source.value, 'Source copied.'));
     document.querySelector('#copy-output').addEventListener('click', () => copyText(output.textContent, 'Output copied.'));
     document.querySelector('#share').addEventListener('click', copyShareLink);
+    document.querySelector('#create-gist').addEventListener('click', createGistShare);
 
     function populateExamples(names) {
       const current = exampleSelect.value;
@@ -614,7 +725,7 @@ answer(ok) :- eq(ok, ok).
         const exampleUrl = new URL(`./examples/${name}.pl`, location.href);
         const response = await fetch(exampleUrl, { cache: 'no-store' });
         if (!response.ok) throw new Error(`${response.status} ${response.statusText}`);
-        setSource(await response.text(), `examples/${name}.pl`);
+        setSource(await response.text(), `examples/${name}.pl`, { kind: 'example', name });
         setStatus(`Loaded examples/${name}.pl.`);
       } catch (error) {
         setSource(FALLBACK_SOURCE, 'fallback program');
@@ -629,27 +740,75 @@ answer(ok) :- eq(ok, ok).
         setStatus(`Loading ${url}…`);
         const response = await fetch(url);
         if (!response.ok) throw new Error(`${response.status} ${response.statusText}`);
-        setSource(await response.text(), url);
-        setStatus(`Loaded ${url}.`);
+        const text = await response.text();
+        if (loadBackground.checked) {
+          backgroundSource = text;
+          backgroundName = url;
+          backgroundReference = { kind: 'url', url };
+          updateBackgroundStatus();
+          setStatus(`Loaded background knowledge from ${url}.`);
+        } else {
+          setSource(text, url, { kind: 'url', url });
+          setStatus(`Loaded ${url}.`);
+        }
       } catch (error) {
         setStatus(`Could not load URL: ${formatError(error)}`, true);
       }
     }
 
-    function setSource(text, name) {
+    function clearBackground() {
+      backgroundSource = '';
+      backgroundName = '';
+      backgroundReference = null;
+      updateBackgroundStatus();
+      setStatus('Background knowledge cleared.');
+    }
+
+    function updateBackgroundStatus() {
+      backgroundStatus.textContent = backgroundSource
+        ? `Background loaded from ${backgroundName} (${backgroundSource.length.toLocaleString()} chars).`
+        : 'No background knowledge loaded.';
+    }
+
+    function setSource(text, name, reference = { kind: 'custom' }) {
       source.value = text;
       sourceName.textContent = name;
+      sourceReference = reference;
+      sourceDirty = false;
+      clearSyntaxError();
       render();
     }
 
     function render() {
-      highlight.firstElementChild.innerHTML = colorize(source.value) + (source.value.endsWith('\n') ? ' ' : '');
-      syncScroll();
+      const token = ++renderToken;
+      const text = source.value;
+      requestAnimationFrame(() => {
+        if (token !== renderToken) return;
+        highlight.firstElementChild.innerHTML = renderHighlightedSource(text);
+        updateLineNumbers(text);
+        syncScroll();
+      });
+    }
+
+    function renderHighlightedSource(text) {
+      const rendered = text.length > HIGHLIGHT_LIMIT ? escapeHtml(text) : colorize(text);
+      return rendered + (text.endsWith('\n') ? ' ' : '');
     }
 
     function syncScroll() {
       highlight.scrollTop = source.scrollTop;
       highlight.scrollLeft = source.scrollLeft;
+      lineNumbersInner.style.transform = `translateY(${-source.scrollTop}px)`;
+      updateErrorLineMarker();
+    }
+
+    function updateLineNumbers(text = source.value) {
+      const count = Math.max(1, text.split('\n').length);
+      lineNumbersInner.innerHTML = Array.from({ length: count }, (_, index) => {
+        const line = index + 1;
+        const className = line === syntaxErrorLine ? 'line-number error' : 'line-number';
+        return `<span class="${className}">${line}</span>`;
+      }).join('');
     }
 
     function colorize(text) {
@@ -708,6 +867,7 @@ answer(ok) :- eq(ok, ok).
 
     function runProgram() {
       stopProgram(false);
+      clearSyntaxError();
       output.textContent = '';
       elapsed.textContent = 'Running…';
       setStatus('Running Eyelang…');
@@ -737,20 +897,83 @@ answer(ok) :- eq(ok, ok).
       activeWorker.onmessage = (event) => finishRun(event.data);
       activeWorker.onerror = (event) => finishRun({ ok: false, error: event.message || 'worker error' });
       activeWorker.postMessage({
-        source: source.value,
+        source: combinedSource(),
         options: { proof: proof.checked, stats: stats.checked },
       });
     }
 
+    function combinedSource() {
+      if (!backgroundSource.trim()) return source.value;
+      return `${backgroundSource}\n${source.value}`;
+    }
+
+    function extractParseErrorLine(text) {
+      const match = String(text).match(/parse line (\d+)/i);
+      return match ? Number(match[1]) : null;
+    }
+
+    function editorLineForParseLine(parseLine) {
+      if (!Number.isFinite(parseLine) || parseLine < 1) return null;
+      if (!backgroundSource.trim()) return parseLine;
+      const backgroundLines = backgroundSource.split('\n').length;
+      const editorLine = parseLine - backgroundLines;
+      return editorLine >= 1 ? editorLine : null;
+    }
+
+    function markSyntaxErrorLine(line) {
+      syntaxErrorLine = line;
+      updateLineNumbers();
+      revealLine(line);
+      updateErrorLineMarker();
+    }
+
+    function clearSyntaxError() {
+      syntaxErrorLine = null;
+      updateLineNumbers();
+      updateErrorLineMarker();
+    }
+
+    function revealLine(line) {
+      const metrics = editorMetrics();
+      const y = metrics.paddingTop + (line - 1) * metrics.lineHeight;
+      const top = source.scrollTop;
+      const bottom = top + source.clientHeight - metrics.lineHeight;
+      if (y < top || y > bottom) {
+        source.scrollTop = Math.max(0, y - source.clientHeight / 3);
+      }
+    }
+
+    function updateErrorLineMarker() {
+      if (syntaxErrorLine == null) {
+        errorLineMarker.style.display = 'none';
+        return;
+      }
+      const metrics = editorMetrics();
+      errorLineMarker.style.display = 'block';
+      errorLineMarker.style.height = `${metrics.lineHeight}px`;
+      errorLineMarker.style.top = `${metrics.paddingTop + (syntaxErrorLine - 1) * metrics.lineHeight - source.scrollTop}px`;
+    }
+
+    function editorMetrics() {
+      const style = getComputedStyle(source);
+      const fontSize = parseFloat(style.fontSize) || 15;
+      const lineHeight = parseFloat(style.lineHeight) || fontSize * 1.55;
+      const paddingTop = parseFloat(style.paddingTop) || 0;
+      return { lineHeight, paddingTop };
+    }
+
     function finishRun(message) {
-      const worker = activeWorker;
       cleanupWorker();
       runButton.disabled = false;
       stopButton.disabled = true;
       if (!message.ok) {
-        output.textContent = message.error || 'Unknown error.';
+        const errorText = message.error || 'Unknown error.';
+        const parseLine = extractParseErrorLine(errorText);
+        const editorLine = editorLineForParseLine(parseLine);
+        if (editorLine != null) markSyntaxErrorLine(editorLine);
+        output.textContent = errorText;
         elapsed.textContent = 'Failed.';
-        setStatus('Run failed.', true);
+        setStatus(editorLine == null ? 'Run failed.' : `Syntax error on line ${editorLine}.`, true);
         return;
       }
       let text = message.stdout || '(no materialized output)\n';
@@ -758,7 +981,7 @@ answer(ok) :- eq(ok, ok).
       output.textContent = text;
       const seconds = (message.elapsedMs / 1000).toFixed(3);
       elapsed.textContent = `${seconds} sec`;
-      setStatus(worker ? 'Run complete.' : 'Run complete.');
+      setStatus('Run complete.');
     }
 
     function stopProgram(report = true) {
@@ -791,30 +1014,176 @@ answer(ok) :- eq(ok, ok).
     }
 
     async function copyShareLink() {
-      const payload = JSON.stringify({ source: source.value, proof: proof.checked, stats: stats.checked });
-      const data = new TextEncoder().encode(payload);
+      const link = buildShareLink();
+      if (link == null) {
+        setStatus('This program is too large for a reliable URL. Use “Create Gist share” instead.', true);
+        return;
+      }
+      await copyText(link, 'Share link copied.');
+    }
+
+    function buildShareLink() {
+      const referenced = buildReferenceShareLink();
+      if (referenced && referenced.length <= MAX_SHARE_URL_LENGTH) return referenced;
+      const embedded = `${basePlaygroundUrl()}#state=${encodeState(currentShareState())}`;
+      return embedded.length <= MAX_SHARE_URL_LENGTH ? embedded : null;
+    }
+
+    function buildReferenceShareLink() {
+      const params = new URLSearchParams();
+      if (proof.checked) params.set('proof', '1');
+      if (stats.checked) params.set('stats', '1');
+      if (backgroundSource.trim()) {
+        if (backgroundReference?.kind !== 'url') return null;
+        params.set('background-url', backgroundReference.url);
+      }
+      if (!sourceDirty && sourceReference.kind === 'example') params.set('example', sourceReference.name);
+      else if (!sourceDirty && sourceReference.kind === 'url') params.set('url', sourceReference.url);
+      else return null;
+      return `${basePlaygroundUrl()}#${params.toString()}`;
+    }
+
+    async function createGistShare() {
+      const stateText = JSON.stringify(currentShareState(), null, 2);
+      const token = prompt('Optional GitHub token with gist scope. It is only sent to api.github.com and is not stored. Leave blank to copy Gist-ready state instead.');
+      if (token === null) return;
+      if (!token.trim()) {
+        await copyText(stateText, `Gist-ready state copied. Create a Gist file named ${GIST_STATE_FILENAME}, paste it, then share its raw URL with #state-url=...`);
+        window.open('https://gist.github.com/', '_blank', 'noopener');
+        return;
+      }
+
+      try {
+        setStatus('Creating GitHub Gist…');
+        const files = {
+          [GIST_STATE_FILENAME]: { content: stateText },
+          'program.pl': { content: source.value },
+        };
+        if (backgroundSource.trim()) files['background.pl'] = { content: backgroundSource };
+        const response = await fetch('https://api.github.com/gists', {
+          method: 'POST',
+          headers: {
+            Accept: 'application/vnd.github+json',
+            Authorization: `Bearer ${token.trim()}`,
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            description: 'Eyelang playground share',
+            public: false,
+            files,
+          }),
+        });
+        const gist = await response.json().catch(() => ({}));
+        if (!response.ok) throw new Error(gist.message || `${response.status} ${response.statusText}`);
+        const rawUrl = gist.files?.[GIST_STATE_FILENAME]?.raw_url;
+        if (!rawUrl) throw new Error('Gist response did not include a raw state URL.');
+        await copyText(`${basePlaygroundUrl()}#state-url=${encodeURIComponent(rawUrl)}`, 'Gist share link copied.');
+      } catch (error) {
+        await copyText(stateText, `Could not create Gist: ${formatError(error)}. Gist-ready state copied instead.`);
+      }
+    }
+
+    function currentShareState() {
+      return {
+        source: source.value,
+        proof: proof.checked,
+        stats: stats.checked,
+        backgroundSource,
+        backgroundName,
+      };
+    }
+
+    function encodeState(payload) {
+      const data = new TextEncoder().encode(JSON.stringify(payload));
       let binary = '';
       for (const byte of data) binary += String.fromCharCode(byte);
-      const encoded = btoa(binary).replaceAll('+', '-').replaceAll('/', '_').replace(/=+$/, '');
-      await copyText(`${location.href.split('#')[0]}#state=${encoded}`, 'Share link copied.');
+      return btoa(binary).replaceAll('+', '-').replaceAll('/', '_').replace(/=+$/, '');
+    }
+
+    function decodeState(encoded) {
+      const base64 = encoded.replaceAll('-', '+').replaceAll('_', '/');
+      const padded = base64 + '='.repeat((4 - base64.length % 4) % 4);
+      const bytes = Uint8Array.from(atob(padded), (ch) => ch.charCodeAt(0));
+      return JSON.parse(new TextDecoder().decode(bytes));
+    }
+
+    function basePlaygroundUrl() {
+      return location.href.split('#')[0];
+    }
+
+    async function restoreFromHashOrLoadDefault() {
+      if (!(await restoreFromHash())) await loadExample('ancestor');
     }
 
-    function restoreFromHash() {
-      if (!location.hash.startsWith('#state=')) return false;
+    async function restoreFromHash() {
+      if (!location.hash || location.hash === '#') return false;
+      const params = new URLSearchParams(location.hash.slice(1));
       try {
-        const encoded = location.hash.slice(7).replaceAll('-', '+').replaceAll('_', '/');
-        const padded = encoded + '='.repeat((4 - encoded.length % 4) % 4);
-        const bytes = Uint8Array.from(atob(padded), (ch) => ch.charCodeAt(0));
-        const payload = JSON.parse(new TextDecoder().decode(bytes));
-        setSource(String(payload.source || ''), 'shared program');
-        proof.checked = Boolean(payload.proof);
-        stats.checked = Boolean(payload.stats);
-        setStatus('Loaded shared program.');
-        return true;
+        if (params.has('state')) {
+          applySharedState(decodeState(params.get('state')), 'shared program');
+          setStatus('Loaded shared program.');
+          return true;
+        }
+        if (params.has('state-url')) {
+          const stateUrl = params.get('state-url');
+          const response = await fetch(stateUrl);
+          if (!response.ok) throw new Error(`${response.status} ${response.statusText}`);
+          applySharedState(await response.json(), `shared state from ${stateUrl}`);
+          setStatus('Loaded shared Gist state.');
+          return true;
+        }
+        await restoreBackgroundUrl(params);
+        applyOptionParams(params);
+        if (params.has('example')) {
+          await loadExample(params.get('example'));
+          applyOptionParams(params);
+          return true;
+        }
+        if (params.has('url')) {
+          await loadSourceFromUrl(params.get('url'), false);
+          applyOptionParams(params);
+          return true;
+        }
       } catch (error) {
         setStatus(`Could not read shared state: ${formatError(error)}`, true);
         return false;
       }
+      return false;
+    }
+
+    async function restoreBackgroundUrl(params) {
+      const url = params.get('background-url');
+      if (!url) return;
+      await loadSourceFromUrl(url, true);
+    }
+
+    async function loadSourceFromUrl(url, asBackground) {
+      const response = await fetch(url);
+      if (!response.ok) throw new Error(`${response.status} ${response.statusText}`);
+      const text = await response.text();
+      if (asBackground) {
+        backgroundSource = text;
+        backgroundName = url;
+        backgroundReference = { kind: 'url', url };
+        updateBackgroundStatus();
+      } else {
+        setSource(text, url, { kind: 'url', url });
+      }
+    }
+
+    function applySharedState(payload, label) {
+      setSource(String(payload.source || ''), label, { kind: 'custom' });
+      proof.checked = Boolean(payload.proof);
+      stats.checked = Boolean(payload.stats);
+      backgroundSource = String(payload.backgroundSource || '');
+      backgroundName = String(payload.backgroundName || 'shared background');
+      backgroundReference = null;
+      updateBackgroundStatus();
+    }
+
+    function applyOptionParams(params) {
+      proof.checked = params.get('proof') === '1' || params.get('proof') === 'true';
+      stats.checked = params.get('stats') === '1' || params.get('stats') === 'true';
     }
 
     async function loadVersion() {

package/src/solver.js

@@ -38,50 +38,122 @@ export class Solver {
   }
 
   *solve(goals, env = new Env(), depth = 0) {
-    this.stats.solve_goals_calls++;
-    this.stats.max_depth = Math.max(this.stats.max_depth, depth);
-    this.stats.max_goal_count = Math.max(this.stats.max_goal_count, goals.length);
-    if (depth > this.maxDepth || this.solutionsSeen >= this.solutionLimit) return;
     if (!Array.isArray(goals)) goals = [goals];
 
-    if (goals.length === 0) {
-      this.solutionsSeen++;
-      this.stats.completed_goal_lists++;
-      yield env;
-      return;
-    }
+    const savedActive = this.active;
+    try {
+      const stack = [{ kind: 'goals', goals, env, depth, active: savedActive.slice() }];
+      while (stack.length) {
+      const frame = stack.pop();
+      if (frame.kind === 'completeMemo') {
+        frame.entry.computing = false;
+        frame.entry.complete = true;
+        continue;
+      }
 
-    // eyelang normally solves left-to-right, but ready deterministic builtins can
-    // be run early as pure filters. This gives large pruning wins without
-    // reordering user predicates or nondeterministic generators.
-    const selectedIndex = selectReadyDeterministicBuiltin(goals, env, this.registry);
-    const goal = goals[selectedIndex];
-    const rest = selectedIndex === 0 ? goals.slice(1) : [...goals.slice(0, selectedIndex), ...goals.slice(selectedIndex + 1)];
-    if (goal.type === COMPOUND && goal.name === ',' && goal.arity === 2) {
-      yield* this.solve([...flattenConjunction(goal), ...rest], env, depth + 1);
-      return;
-    }
+      goals = frame.goals;
+      env = frame.env;
+      depth = frame.depth;
+      let active = frame.active;
 
-    const def = goal.type === COMPOUND ? this.registry.get(goal.name, goal.arity) : null;
-    if (def && builtinIsReadyOrAuthoritative(def, this, goal, env)) {
-      let produced = false;
-      for (const next of def.handler({ solver: this, goal, env })) {
-        produced = true;
-        yield* this.solve(rest, next, depth + 1);
-        if (this.solutionsSeen >= this.solutionLimit) return;
+      while (true) {
+        this.stats.solve_goals_calls++;
+        this.stats.max_depth = Math.max(this.stats.max_depth, depth);
+        this.stats.max_goal_count = Math.max(this.stats.max_goal_count, goals.length);
+        if (depth > this.maxDepth || this.solutionsSeen >= this.solutionLimit) break;
+
+        if (goals.length === 0) {
+          this.solutionsSeen++;
+          this.stats.completed_goal_lists++;
+          this.active = active;
+          yield env;
+          break;
+        }
+
+        const first = goals[0];
+        if (first?.kind === 'releaseActive') {
+          active = active.slice(0, -1);
+          goals = goals.slice(1);
+          continue;
+        }
+        if (first?.kind === 'memoStore') {
+          rememberMemoAnswer(first.entry, first.goal, env);
+          goals = goals.slice(1);
+          continue;
+        }
+
+        // eyelang normally solves left-to-right, but ready deterministic builtins can
+        // be run early as pure filters. Stop at internal sentinels so rule-body
+        // active guards are released before the caller's remaining goals are seen.
+        const selectedIndex = selectReadyDeterministicBuiltin(goals, env, this.registry);
+        const goal = goals[selectedIndex];
+        const rest = selectedIndex === 0 ? goals.slice(1) : [...goals.slice(0, selectedIndex), ...goals.slice(selectedIndex + 1)];
+        if (goal.type === COMPOUND && goal.name === ',' && goal.arity === 2) {
+          goals = [...flattenConjunction(goal), ...rest];
+          depth++;
+          continue;
+        }
+
+        const def = goal.type === COMPOUND ? this.registry.get(goal.name, goal.arity) : null;
+        this.active = active;
+        if (def && builtinIsReadyOrAuthoritative(def, this, goal, env)) {
+          const nextEnvs = [];
+          for (const next of def.handler({ solver: this, goal, env })) nextEnvs.push(next);
+          if (def.deterministic) {
+            if (nextEnvs.length) this.stats.deterministic_builtin_successes++;
+            else this.stats.deterministic_builtin_failures++;
+          }
+          if (nextEnvs.length === 0) break;
+          if (nextEnvs.length === 1) {
+            goals = rest;
+            env = nextEnvs[0];
+            depth++;
+            continue;
+          }
+          for (let i = nextEnvs.length - 1; i >= 0; i--) {
+            stack.push({ kind: 'goals', goals: rest, env: nextEnvs[i], depth: depth + 1, active });
+          }
+          break;
+        }
+
+        this.stats.solve_one_goal_calls++;
+        if (goal.type !== COMPOUND) break;
+        const group = this.program.findGroup(goal.name, goal.arity);
+        if (!group) break;
+
+        if (group.memoized) {
+          const key = memoKey(goal, env);
+          if (key.hasBound) {
+            const mapKey = `${goal.name}/${goal.arity}:${key.text}`;
+            let entry = this.memo.get(mapKey);
+            if (!entry) {
+              entry = { computing: false, complete: false, answers: [], answerKeys: new Set() };
+              this.memo.set(mapKey, entry);
+            }
+            if (entry.complete) {
+              pushMemoAnswerFrames(stack, entry, goal, rest, env, depth, active, this);
+              break;
+            }
+            if (!entry.computing) {
+              entry.computing = true;
+              stack.push({ kind: 'completeMemo', entry });
+              pushUserGoalUncachedFrames(stack, this, group, goal, [{ kind: 'memoStore', entry, goal }, ...rest], env, depth, active);
+              break;
+            }
+          }
+        }
+
+        pushUserGoalUncachedFrames(stack, this, group, goal, rest, env, depth, active);
+        break;
       }
-      if (def.deterministic) {
-        if (produced) this.stats.deterministic_builtin_successes++;
-        else this.stats.deterministic_builtin_failures++;
       }
-      return;
+    } finally {
+      this.active = savedActive;
     }
-
-    yield* this.solveUserGoal(goal, rest, env, depth);
   }
 
   activeVariant(goal, env) {
-    return this.active.some((entry) => variantTerms(goal, env, entry.goal, entry.env));
+    return activeVariantIn(goal, env, this.active);
   }
 
   *solveUserGoal(goal, rest, env, depth) {
@@ -180,6 +252,61 @@ export class Solver {
 }
 
 
+function pushMemoAnswerFrames(stack, entry, goal, rest, env, depth, active, solver) {
+  for (let answerIndex = entry.answers.length - 1; answerIndex >= 0; answerIndex--) {
+    const answerArgs = entry.answers[answerIndex];
+    const next = env.clone();
+    let ok = true;
+    for (let i = 0; i < goal.arity; i++) {
+      solver.stats.unify_calls++;
+      if (!unify(goal.args[i], answerArgs[i], next)) { ok = false; break; }
+    }
+    if (ok) stack.push({ kind: 'goals', goals: rest, env: next, depth: depth + 1, active });
+  }
+}
+
+function pushUserGoalUncachedFrames(stack, solver, group, goal, rest, env, depth, active) {
+  if (activeVariantIn(goal, env, active)) return;
+  const candidates = selectClauseCandidates(group, goal, env);
+  const frames = [];
+  for (const pass of [candidates.primary, candidates.fallback]) {
+    for (const clause of pass) {
+      if (headCannotMatch(goal, clause.head, env)) continue;
+      const id = nextFreshId();
+      const freshHead = freshTerm(clause.head, id);
+      const freshBody = clause.body.map((term) => freshTerm(term, id));
+      const next = env.clone();
+      solver.stats.unify_calls++;
+      if (!unify(goal, freshHead, next)) continue;
+      if (freshBody.length === 0) {
+        frames.push({ kind: 'goals', goals: rest, env: next, depth: depth + 1, active });
+      } else {
+        frames.push({
+          kind: 'goals',
+          goals: [...freshBody, { kind: 'releaseActive' }, ...rest],
+          env: next,
+          depth: depth + 1,
+          active: [...active, { goal, env }],
+        });
+      }
+    }
+  }
+  for (let i = frames.length - 1; i >= 0; i--) stack.push(frames[i]);
+}
+
+function rememberMemoAnswer(entry, goal, env) {
+  const answerArgs = goal.args.map((arg) => importResolved(arg, env));
+  const key = answerArgs.map((arg) => termToString(arg, new Env(), true)).join('\x1f');
+  if (entry.answerKeys.has(key)) return;
+  entry.answerKeys.add(key);
+  entry.answers.push(answerArgs);
+}
+
+function activeVariantIn(goal, env, active) {
+  return active.some((entry) => variantTerms(goal, env, entry.goal, entry.env));
+}
+
+
 function builtinIsReadyOrAuthoritative(def, solver, goal, env) {
   if (typeof def.shouldUse === 'function' && !def.shouldUse({ solver, goal, env })) return false;
   if (typeof def.ready !== 'function') return true;
@@ -190,6 +317,7 @@ function builtinIsReadyOrAuthoritative(def, solver, goal, env) {
 function selectReadyDeterministicBuiltin(goals, env, registry) {
   for (let i = 0; i < goals.length; i++) {
     const goal = goals[i];
+    if (goal?.kind === 'releaseActive' || goal?.kind === 'memoStore') return 0;
     if (goal.type !== COMPOUND) continue;
     const def = registry.get(goal.name, goal.arity);
     if (!def?.deterministic || typeof def.ready !== 'function') continue;

package/test/run-regression.mjs

@@ -360,6 +360,16 @@ function apiCases() {
         assertEqual(result.stdout, 'q(a, b).\n', 'stdout');
       },
     },
+    {
+      name: 'run keeps recursive materializations independent in one solver',
+      run: () => {
+        const text = fs.readFileSync(path.join(packageRoot, 'examples', 'alignment-demo.pl'), 'utf8');
+        const program = Program.parseSources([{ text, filename: 'alignment-demo.pl' }]);
+        const result = run(program);
+        assertIncludes(result.stdout, 'broaderTransitive(anpr_passenger_car, ref_car).\n', 'stdout');
+        assertIncludes(result.stdout, 'narrowerOrEqualOf(anpr_passenger_car, ref_car).\n', 'stdout');
+      },
+    },
     {
       name: 'makeProgram creates indexed programs',
       run: () => {
@@ -525,6 +535,20 @@ function whiteBoxCases() {
         assertEqual(group.recursive, true, 'collatz/2 recursive');
       },
     },
+    {
+      name: 'collatz example remains stack-safe for browser-sized stacks',
+      run: () => {
+        // Use a deliberately tiny stack to catch browser-worker recursion regressions.
+        const result = spawnSync(process.execPath, ['--stack-size=100', bin, 'examples/collatz-1000.pl'], {
+          cwd: packageRoot,
+          encoding: 'utf8',
+        });
+        assertEqual(result.status, 0, `exit status${result.stderr ? `\nstderr: ${result.stderr}` : ''}`);
+        assertEqual(result.stderr, '', 'stderr');
+        assertIncludes(result.stdout, 'collatzTrajectory(1000, [1000, 500, 250, 125', 'stdout');
+        assertIncludes(result.stdout, 'collatzTrajectory(1, [1]).\n', 'stdout');
+      },
+    },
   ];
 }
 
@@ -625,17 +649,44 @@ function playgroundStaticIssues() {
   if (!pkg.files?.includes('playground.html')) issues.push('package files must include playground.html');
   if (!readme.includes('[Playground](https://eyereasoner.github.io/eyelang/playground)')) issues.push('README must link to the GitHub Pages playground URL');
   if (!html.includes('<meta name="viewport" content="width=device-width, initial-scale=1">')) issues.push('missing mobile viewport meta');
-  if (!html.includes('@media (max-width: 900px)') || !html.includes('main { grid-template-columns: 1fr; }')) {
-    issues.push('playground must collapse the editor/output grid on tablet/mobile widths');
+  if (!html.includes('main {') || !html.includes('display: block;')) {
+    issues.push('playground must use a simple vertical layout');
   }
   if (!html.includes('@media (max-width: 560px)') || !html.includes('button,') || !html.includes('width: 100%')) {
     issues.push('playground must make controls usable at phone widths');
   }
+  if (!html.includes('<summary id="advanced-heading">⚙ Advanced configuration</summary>')) {
+    issues.push('playground must keep URL/proof controls inside advanced configuration');
+  }
+  if (!html.includes('id="load-background"') || !html.includes('backgroundSource') || !html.includes('combinedSource()')) {
+    issues.push('playground must support loading URL content as background knowledge');
+  }
+  if (!html.includes('HIGHLIGHT_LIMIT') || !html.includes('text.length > HIGHLIGHT_LIMIT')) {
+    issues.push('playground must avoid full syntax coloring for very large examples');
+  }
   if (!html.includes('<script type="module">')) issues.push('playground script must be an ES module');
   if (!html.includes("new URL('./src/index.js', location.href)")) issues.push('playground must import the public browser API');
   if (!html.includes('class="editor"') || !html.includes('id="highlight"') || !html.includes('id="source"')) {
     issues.push('playground must include layered syntax-colored editor');
   }
+  if (!html.includes('--editor-bg: #ffffff') || !html.includes('background: var(--editor-bg)')) {
+    issues.push('playground editor must use a light editor background');
+  }
+  if (!html.includes('id="error-line-marker"') || !html.includes('extractParseErrorLine') || !html.includes('markSyntaxErrorLine') || !html.includes('--editor-error-line')) {
+    issues.push('playground must highlight syntax-error lines in the editor');
+  }
+  if (!html.includes('id="line-numbers"') || !html.includes('updateLineNumbers') || !html.includes('lineNumbersInner.style.transform') || !html.includes('--line-number-bg')) {
+    issues.push('playground editor must include synced line numbers');
+  }
+  if (!html.includes('MAX_SHARE_URL_LENGTH') || !html.includes('buildReferenceShareLink') || !html.includes("params.set('example'") || !html.includes("params.set('url'")) {
+    issues.push('playground share links must avoid embedding large example or URL-loaded sources');
+  }
+  if (!html.includes('id="create-gist"') || !html.includes('createGistShare') || !html.includes('GIST_STATE_FILENAME') || !html.includes("fetch('https://api.github.com/gists'")) {
+    issues.push('playground must support Gist-backed sharing for large programs');
+  }
+  if (!html.includes("params.has('state-url')") || !html.includes('#state-url=')) {
+    issues.push('playground must restore state from raw Gist state URLs');
+  }
   if (!html.includes('id="example-search"') || !html.includes('id="examples"')) issues.push('playground must include searchable examples');
   const scriptMatch = html.match(new RegExp('<script type="module">\\n([\\s\\S]*?)\\n  <\\/script>'));
   if (scriptMatch == null) {