npm - eyelang - Versions diffs - 1.6.0 → 1.7.0 - Mend

eyelang 1.6.0 → 1.7.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 (1072) hide show

package/playground.html CHANGED Viewed

@@ -3,1373 +3,1237 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>eyelang Playground</title>
+  <title>Eyelang Playground</title>
   <style>
     :root {
-      color-scheme: light;
-      --bg: #f8fafc;
+      color-scheme: light dark;
+      --bg: #f7f8fb;
       --panel: #ffffff;
-      --panel-soft: #f1f5f9;
+      --panel-soft: #eef2f7;
       --text: #172033;
-      --muted: #667085;
-      --border: #d0d5dd;
-      --accent: #315efb;
-      --accent-strong: #2448c7;
+      --muted: #64748b;
+      --border: #d7dce5;
+      --accent: #0969da;
+      --accent-strong: #0757b8;
       --danger: #b42318;
-      --ok: #067647;
-      --warn-bg: #fff7e6;
-      --warn-border: #fdb022;
-      --code-bg: #ffffff;
-      --code-text: #111827;
-      --syn-comment: #667085;
-      --syn-string: #067647;
-      --syn-quoted: #9a3412;
-      --syn-number: #6d28d9;
-      --syn-variable: #175cd3;
-      --syn-predicate: #b42318;
-      --syn-builtin: #0e7490;
-      --syn-punctuation: #475467;
+      --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: #64748b;
+      --string: #047857;
+      --number: #b45309;
+      --variable: #1d4ed8;
+      --keyword: #7c3aed;
+      --predicate: #be123c;
+      --punctuation: #475569;
+    }
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --bg: #0b1020;
+        --panel: #111827;
+        --panel-soft: #1f2937;
+        --text: #e5e7eb;
+        --muted: #9ca3af;
+        --border: #374151;
+        --accent: #60a5fa;
+        --accent-strong: #93c5fd;
+      }
     }
     * { box-sizing: border-box; }
     body {
       margin: 0;
-      min-height: 100vh;
       background: var(--bg);
       color: var(--text);
-      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      line-height: 1.45;
     }
-    header, main {
-      width: min(920px, calc(100vw - 24px));
+    header,
+    main,
+    footer {
+      width: min(100% - 2rem, 72rem);
       margin: 0 auto;
     }
-    header { padding: 24px 0 16px; }
-    h1 { margin: 0; font-size: clamp(2rem, 11vw, 3.4rem); letter-spacing: -0.055em; }
-    h2 { margin: 0 0 12px; font-size: 1.05rem; }
-    p { line-height: 1.55; }
-    a { color: var(--accent); }
-    code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
-    .lead { max-width: 760px; color: var(--muted); margin: 10px 0 0; }
-    .meta { margin: 10px 0 0; color: var(--muted); font-size: 0.92rem; }
-    .version-badge {
-      display: inline-flex;
-      align-items: center;
-      min-height: 28px;
-      padding: 3px 10px;
-      border: 1px solid var(--border);
-      border-radius: 999px;
-      background: var(--panel-soft);
-      color: var(--text);
-      font-variant-numeric: tabular-nums;
+    header { padding: 1.25rem 0 0.9rem; }
+    h1 {
+      margin: 0;
+      font-size: clamp(1.35rem, 4vw, 2rem);
     }
-    .stack {
-      display: flex;
-      flex-direction: column;
-      gap: 16px;
-      padding-bottom: 32px;
+    header p { margin: 0.35rem 0 0; color: var(--muted); }
+    main {
+      display: block;
+      padding: 0 0 2rem;
     }
-    .card {
+    section {
       background: var(--panel);
       border: 1px solid var(--border);
-      border-radius: 20px;
-      box-shadow: 0 10px 28px rgba(16, 24, 40, 0.08);
+      border-radius: 0.9rem;
+      box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
       overflow: hidden;
+      margin: 1rem 0;
     }
-    .card-header { padding: 16px 16px 0; }
-    .card-body { padding: 16px; }
-    .toolbar, .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
-    .toolbar { margin: 12px 0; }
-    .toolbar.grow > input[type="text"] { flex: 1 1 280px; }
-    label { font-size: 0.9rem; color: var(--muted); }
-    select, input[type="text"], textarea, button { font: inherit; }
-    select, input[type="text"] {
-      min-height: 42px;
-      border: 1px solid var(--border);
-      border-radius: 12px;
-      padding: 8px 10px;
-      background: var(--panel);
-      color: var(--text);
-    }
-    select { max-width: 100%; }
-    textarea {
-      width: 100%;
-      min-height: 44vh;
-      resize: vertical;
-      border: 1px solid var(--border);
-      border-radius: 16px;
-      padding: 14px;
-      background: var(--code-bg);
-      color: var(--code-text);
-      line-height: 1.45;
-      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
-      font-size: 0.95rem;
-      tab-size: 2;
-    }
-    .editor-shell {
-      position: relative;
-      min-height: 44vh;
-      border: 1px solid var(--border);
-      border-radius: 16px;
-      background: var(--code-bg);
-      overflow: hidden;
+    .panel-body { padding: 1rem; }
+    .toolbar,
+    .example-row,
+    .button-row,
+    .option-row,
+    .background-row {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.6rem;
+      align-items: center;
     }
-    .editor-shell textarea,
-    .syntax-layer {
-      width: 100%;
-      min-height: 44vh;
-      margin: 0;
-      padding: 14px;
-      line-height: 1.45;
-      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
-      font-size: 0.95rem;
-      tab-size: 2;
-      white-space: pre-wrap;
-      word-break: break-word;
-      overflow-wrap: break-word;
+    .toolbar {
+      padding: 0.85rem 1rem;
+      border-bottom: 1px solid var(--border);
+      background: var(--panel-soft);
     }
-    .editor-shell textarea {
-      position: relative;
-      z-index: 2;
-      display: block;
-      resize: vertical;
-      border: 0;
-      border-radius: 0;
-      background: transparent;
-      color: transparent;
-      caret-color: var(--code-text);
-      outline: none;
-      overflow: auto;
-      -webkit-text-fill-color: transparent;
+    .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);
     }
-    .editor-shell textarea::selection {
-      background: #dbeafe;
+    details:not([open]) summary { border-bottom: 0; }
+    label { font-weight: 650; }
+    select,
+    input,
+    textarea,
+    button {
+      font: inherit;
+      font-size: 1rem;
     }
-    .syntax-layer {
-      position: absolute;
-      inset: 0;
-      z-index: 1;
-      pointer-events: none;
-      color: var(--code-text);
-      border: 0;
-      background: transparent;
-      overflow: auto;
+    select,
+    input[type="url"],
+    input[type="search"] {
+      min-height: 2.65rem;
+      padding: 0.55rem 0.7rem;
+      border: 1px solid var(--border);
+      border-radius: 0.55rem;
+      background: var(--panel);
+      color: var(--text);
     }
-    .syn-comment { color: var(--syn-comment); font-style: italic; }
-    .syn-string { color: var(--syn-string); }
-    .syn-quoted { color: var(--syn-quoted); }
-    .syn-number { color: var(--syn-number); }
-    .syn-variable { color: var(--syn-variable); }
-    .syn-predicate { color: var(--syn-predicate); font-weight: 600; }
-    .syn-builtin { color: var(--syn-builtin); font-weight: 600; }
-    .syn-punctuation { color: var(--syn-punctuation); }
+    select { min-width: min(100%, 18rem); flex: 1; }
+    input[type="url"] { flex: 1 1 20rem; min-width: 12rem; }
+    input[type="search"] { flex: 1 1 12rem; min-width: 10rem; }
     button {
       border: 1px solid var(--border);
-      border-radius: 999px;
-      padding: 9px 14px;
+      border-radius: 0.55rem;
+      padding: 0.58rem 0.78rem;
+      min-height: 2.65rem;
       background: var(--panel);
       color: var(--text);
       cursor: pointer;
     }
-    button.primary { border-color: var(--accent); background: var(--accent); color: white; }
-    button.primary:hover { background: var(--accent-strong); }
-    button:disabled { opacity: 0.55; cursor: not-allowed; }
-    .run-options {
-      margin-top: 10px;
-      align-items: flex-start;
-    }
-    .command-preview {
-      display: block;
-      margin-top: 8px;
-      padding: 8px 10px;
-      border: 1px solid var(--border);
-      border-radius: 12px;
-      background: var(--panel-soft);
-      color: var(--muted);
-      flex: 1 1 100%;
-      overflow-x: auto;
-      white-space: nowrap;
-    }
-    .status { min-height: 1.4em; color: var(--muted); font-size: 0.92rem; }
-    .status.ok { color: var(--ok); }
-    .status.error { color: var(--danger); }
-    .output-header { justify-content: space-between; }
-    .output-tabs { display: inline-flex; padding: 3px; border: 1px solid var(--border); border-radius: 999px; gap: 3px; }
-    .output-tabs button { border: 0; padding: 6px 12px; }
-    .output-tabs button.active { background: var(--accent); color: white; }
-    pre {
-      margin: 0;
-      min-height: 280px;
-      white-space: pre-wrap;
-      word-break: break-word;
-      border: 1px solid var(--border);
-      border-radius: 16px;
-      padding: 14px;
-      background: var(--code-bg);
-      color: var(--code-text);
-      overflow: auto;
-      line-height: 1.45;
-      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
-      font-size: 0.95rem;
+    button.primary {
+      border-color: var(--accent);
+      background: var(--accent);
+      color: white;
+      font-weight: 700;
     }
-    .notice, .background-note {
-      margin-top: 10px;
-      border-radius: 14px;
-      padding: 10px 12px;
+    button.primary:hover { background: var(--accent-strong); }
+    button:disabled { cursor: not-allowed; opacity: 0.6; }
+    .option-row label,
+    .background-row label {
+      display: inline-flex;
+      gap: 0.35rem;
+      align-items: center;
+      font-weight: 500;
       color: var(--muted);
-      font-size: 0.92rem;
-    }
-    .notice {
-      border: 1px solid var(--warn-border);
-      background: var(--warn-bg);
-      color: var(--text);
     }
-    .background-note { border: 1px dashed var(--border); }
-    .hidden { display: none !important; }
-    .small { font-size: 0.86rem; color: var(--muted); }
+    .editor-shell { padding: 0; }
-    .editor-shell {
-      display: grid;
-      grid-template-columns: 4.2rem minmax(0, 1fr);
-      height: 56vh;
-      min-height: 360px;
-      border: 1px solid var(--border);
-      border-radius: 16px;
-      background: var(--code-bg);
+    .editor-label {
+      display: flex;
+      justify-content: space-between;
+      gap: 1rem;
+      padding: 0.7rem 1rem;
+      border-bottom: 1px solid var(--border);
+      background: var(--panel);
+    }
+    .editor {
+      position: relative;
+      min-height: 56vh;
+      background: var(--editor-bg);
       overflow: hidden;
     }
-    .line-gutter {
-      padding: 14px 10px 14px 6px;
-      border-right: 1px solid var(--border);
-      background: var(--panel-soft);
-      color: #475467;
-      text-align: right;
-      line-height: 1.45;
+    .line-numbers,
+    .editor pre,
+    .editor textarea {
       font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
       font-size: 0.95rem;
-      white-space: pre;
+      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;
-      font-variant-numeric: tabular-nums;
+      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-gutter .error-line { color: var(--danger); font-weight: 700; }
-    .editor-code { position: relative; min-width: 0; height: 100%; background: var(--code-bg); overflow: hidden; }
-    .program-syntax,
-    .editor-shell textarea.program-textarea {
+    .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;
-      width: 100%;
-      height: 100%;
-      min-height: 0;
       margin: 0;
-      padding: 14px;
+      padding: 1rem 1rem 1rem 4.35rem;
       border: 0;
-      border-radius: 0;
-      line-height: 1.45;
-      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
-      font-size: 0.95rem;
-      tab-size: 2;
-      white-space: pre-wrap;
-      overflow-wrap: anywhere;
-      word-break: normal;
-    }
-    .program-syntax {
-      z-index: 1;
-      pointer-events: none;
-      color: var(--code-text);
-      background: transparent;
-      /* Keep the highlighted text as a full-height document layer.
-         The parent clips the viewport; this layer itself must not clip,
-         otherwise longer programs disappear after the first editor screen. */
-      bottom: auto;
-      min-height: 100%;
-      height: auto;
-      overflow: visible;
-      box-sizing: border-box;
-    }
-    .editor-shell textarea.program-textarea {
-      z-index: 3;
-      display: block;
+      width: 100%;
+      height: 100%;
       resize: none;
-      background: transparent;
-      color: transparent;
-      -webkit-text-fill-color: transparent;
-      caret-color: var(--code-text);
-      outline: none;
       overflow: auto;
-      overflow-x: hidden;
-    }
-    .editor-shell textarea.program-textarea::selection {
-      background: rgba(37, 99, 235, 0.22);
+      white-space: pre;
+      tab-size: 2;
     }
-    .error-band {
+    .error-line-marker {
       position: absolute;
-      z-index: 2;
       left: 0;
       right: 0;
-      height: calc(1em * 1.45);
-      background: rgba(244, 63, 94, 0.16);
-      border-left: 4px solid var(--danger);
+      top: 0;
+      display: none;
       pointer-events: none;
+      background: var(--editor-error-line);
+      border-left: 0.28rem solid var(--editor-error-border);
+      z-index: 0;
     }
-    .output-shell {
-      display: grid;
-      grid-template-columns: 4.2rem minmax(0, 1fr);
-      min-height: 280px;
-      max-height: 60vh;
-      border: 1px solid var(--border);
-      border-radius: 16px;
-      background: var(--code-bg);
-      overflow: hidden;
+    .editor pre {
+      pointer-events: none;
+      color: var(--editor-text);
+      z-index: 1;
     }
-    .output-shell pre {
-      min-height: 280px;
-      max-height: 60vh;
-      border: 0;
-      border-radius: 0;
-      padding: 14px;
+    .editor textarea {
+      background: transparent;
+      color: rgba(17, 24, 39, 0.025);
+      caret-color: var(--editor-caret);
+      outline: none;
+      z-index: 2;
+      -webkit-text-fill-color: rgba(17, 24, 39, 0.025);
+    }
+    .editor textarea::selection { background: var(--editor-selection); }
+    .tok-comment { color: var(--comment); font-style: italic; }
+    .tok-string { color: var(--string); }
+    .tok-number { color: var(--number); }
+    .tok-variable { color: var(--variable); }
+    .tok-keyword { color: var(--keyword); font-weight: 700; }
+    .tok-predicate { color: var(--predicate); }
+    .tok-punctuation { color: var(--punctuation); }
+    .output {
+      min-height: 18rem;
+      max-height: 58vh;
+      overflow: auto;
+      padding: 1rem;
+      margin: 0;
+      background: var(--code-bg);
+      color: var(--code-text);
+      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+      font-size: 0.9rem;
+      line-height: 1.55;
       white-space: pre-wrap;
       overflow-wrap: anywhere;
-      overflow: auto;
-      user-select: text;
-    }
-    .output-shell .line-gutter { max-height: 60vh; }
-    .stderr-label { color: var(--danger); font-weight: 700; }
-    .stderr-text { color: var(--danger); }
-    @media (max-width: 620px) {
-      header, main { width: min(100vw - 14px, 920px); }
-      header { padding-top: 18px; }
-      .card { border-radius: 16px; }
-      .card-header, .card-body { padding-left: 12px; padding-right: 12px; }
-      .toolbar { align-items: stretch; }
-      .toolbar > label:first-child { flex-basis: 100%; }
-      .toolbar button,
-      .toolbar select,
-      .toolbar input[type="text"] { width: 100%; }
-      .toolbar label.row { width: 100%; }
-      .output-header { align-items: flex-start; }
-      .output-tabs { width: 100%; }
-      .output-tabs button { flex: 1; }
-      textarea, .editor-shell, .editor-shell textarea, .syntax-layer { min-height: 360px; font-size: 0.9rem; }
-      pre { min-height: 240px; font-size: 0.9rem; }
+    }
+    .status {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 0.75rem;
+      padding: 0.65rem 1rem;
+      border-top: 1px solid var(--border);
+      color: var(--muted);
+      font-size: 0.95rem;
+    }
+    .hint {
+      color: var(--muted);
+      font-size: 0.95rem;
+      margin: 0.4rem 0 0;
+    }
+    .error { color: var(--danger); }
+    footer {
+      color: var(--muted);
+      padding: 0 0 1.5rem;
+      text-align: center;
+      font-size: 0.95rem;
+    }
+    footer a { color: var(--accent); }
+    @media (max-width: 560px) {
+      header,
+      main,
+      footer { width: min(100% - 1rem, 72rem); }
+      .toolbar,
+      .panel-body,
+      .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; }
+      .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>
 <body>
   <header>
-    <h1>eyelang Playground</h1>
-    <p class="lead">Edit an eyelang program, run it with the JavaScript engine entirely in your browser, load examples or URLs, autosave locally, and share a compact link.</p>
-    <p class="meta"><span id="versionBadge" class="version-badge">eyelang 1.1.0</span></p>
+    <h1>The Eyelang Playground</h1>
+    <p>Run Eyelang programs in your browser with syntax coloring, examples, proofs, and shareable editor links.</p>
   </header>
-  <main class="stack">
-    <section id="fileProtocolNotice" class="notice hidden">
-      This page is open as a local <code>file://</code> URL. Browser security rules usually block module workers and example loading in that mode. Serve this directory with <code>python3 -m http.server 8000</code> and open <code>http://localhost:8000/playground.html</code>.
+  <main>
+    <section aria-labelledby="examples-heading">
+      <div class="toolbar" aria-label="Example loader">
+        <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 example</button>
+      </div>
     </section>
-    <section class="card">
-      <div class="card-header">
-        <h2>Input program</h2>
-        <div class="toolbar">
-          <label for="exampleSelect">Example</label>
-          <select id="exampleSelect"></select>
-          <button id="loadExampleButton" type="button">Load example</button>
-          <button id="resetButton" type="button">Reset</button>
+    <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.eye">
+          <button id="load-url" type="button">Load from URL</button>
         </div>
-        <div class="toolbar grow">
-          <input id="urlInput" type="text" placeholder="Load .pl from URL, for example examples/ancestor.pl" spellcheck="false">
-          <button id="loadUrlButton" type="button">Load from URL</button>
-          <label class="row"><input id="backgroundToggle" type="checkbox"> add as background</label>
+        <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 id="backgroundNote" class="background-note hidden"></div>
-      </div>
-      <div class="card-body">
-        <div class="editor-shell" id="programEditor">
-          <div id="programGutter" class="line-gutter" aria-hidden="true">1</div>
-          <div class="editor-code">
-            <div id="programSyntax" class="program-syntax" aria-hidden="true"></div>
-            <div id="programErrorBand" class="error-band hidden" aria-hidden="true"></div>
-            <textarea id="programInput" class="program-textarea" spellcheck="false" autocapitalize="off" autocomplete="off" wrap="soft" aria-label="Editable eyelang program"></textarea>
-          </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>
-        <div class="toolbar run-options">
-          <label class="row"><input id="statsToggle" type="checkbox"> include <code>--stats</code> counters</label>
-          <label class="row"><input id="proofToggle" type="checkbox"> include <code>--proof</code> explanations</label>
-          <code id="commandPreview" class="command-preview" aria-label="Equivalent CLI command">eyelang input.pl</code>
+      </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="toolbar">
-          <button id="runButton" class="primary" type="button">Run eyelang</button>
-          <button id="stopButton" type="button" disabled>Stop</button>
-          <button id="copyLinkButton" type="button">Copy share link</button>
-          <button id="clearSavedButton" type="button">Clear autosave</button>
-          <span id="status" class="status" role="status">Idle.</span>
+        <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>
-        <p class="small">The playground concatenates loaded background programs before the editor contents. Use <code>materialize/2</code> declarations to focus output and the <code>--stats</code> toggle for counters. Output is ordinary eyelang syntax: answer facts by default, with <code>why/2</code> explanations added when <code>--proof</code> is selected.</p>
+      </div>
+      <div class="toolbar button-row">
+        <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 class="card">
-      <div class="card-header row output-header">
-        <h2>Output</h2>
+    <section aria-labelledby="output-heading">
+      <div class="editor-label">
+        <strong id="output-heading">Output</strong>
+        <span id="elapsed" class="hint">Idle.</span>
       </div>
-      <div class="card-body">
-        <div class="output-shell">
-          <div id="outputGutter" class="line-gutter" aria-hidden="true">1</div>
-          <pre id="combinedOutput" class="output-view">(no output yet)</pre>
-        </div>
+      <pre id="output" class="output">(no output yet)</pre>
+      <div class="status">
+        <span id="status">Ready.</span>
+        <span id="version">eyelang v…</span>
+      </div>
+      <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>
     </section>
   </main>
+  <footer>
+    Powered by <a href="https://github.com/eyereasoner/eyelang">Eyelang</a>.
+  </footer>
   <script type="module">
     const EXAMPLES = [
-  "access-control-policy",
-  "ackermann",
-  "age",
-  "aliases-and-namespaces",
-  "alignment-demo",
-  "allen-interval-calculus",
-  "ancestor",
-  "animal",
-  "annotation",
-  "auroracare",
-  "backward",
-  "basic-monadic",
-  "bayes-diagnosis",
-  "bayes-therapy",
-  "beam-deflection",
-  "blocks-world-planning",
-  "bmi",
-  "braking-safety-worlds",
-  "buck-converter-design",
-  "cache-performance",
-  "canary-release",
-  "cat-koko",
-  "clinical-trial-screening",
-  "collatz-1000",
-  "combinatorics-findall-sort",
-  "competitive-enzyme-kinetics",
-  "complex",
-  "complex-matrix-stability",
-  "composition-of-injective-functions-is-injective",
-  "context-association",
-  "control-system",
-  "cryptarithmetic-send-more-money",
-  "cyclic-path",
-  "d3-group",
-  "dairy-energy-balance",
-  "data-negotiation",
-  "deep-taxonomy-10",
-  "deep-taxonomy-100",
-  "deep-taxonomy-1000",
-  "deep-taxonomy-10000",
-  "deep-taxonomy-100000",
-  "delfour",
-  "dense-hamiltonian-cycle",
-  "deontic-logic",
-  "derived-backward-rule",
-  "derived-rule",
-  "diamond-property",
-  "dijkstra",
-  "dijkstra-findall-sort",
-  "dijkstra-risk-path",
-  "dining-philosophers",
-  "dog",
-  "drone-corridor-planner",
-  "easter-computus",
-  "electrical-rc-filter",
-  "epidemic-policy",
-  "equivalence-classes-overlap-implies-same-class",
-  "eulerian-path",
-  "ev-range-worlds",
-  "exact-cover-sudoku",
-  "existential-rule",
-  "exoplanet-validation-worlds",
-  "expression-eval",
-  "family-cousins",
-  "fastpow",
-  "fft8-numeric",
-  "fibonacci",
-  "field-nitrogen-balance",
-  "floating-point",
-  "flandor",
-  "four-color-map",
-  "fundamental-theorem-arithmetic",
-  "gcd-bezout-identity",
-  "gd-step-certified",
-  "gdpr-compliance",
-  "goldbach-1000",
-  "good-cobbler",
-  "gps",
-  "graph-reachability",
-  "gray-code-counter",
-  "greatest-lower-bound-uniqueness",
-  "group-inverse-uniqueness",
-  "hamiltonian-cycle",
-  "hamiltonian-path",
-  "hamming-code",
-  "hanoi",
-  "heat-loss",
-  "heron-theorem",
-  "ideal-gas-law",
-  "illegitimate-reasoning",
-  "kaprekar",
-  "law-of-cosines",
-  "least-squares-regression",
-  "list-collection",
-  "lldm",
-  "manufacturing-quality-control",
-  "matrix",
-  "microgrid-dispatch",
-  "monkey-bananas",
-  "n-queens",
-  "network-sla",
-  "newton-raphson",
-  "nixon-diamond",
-  "odrl-dpv-healthcare-risk-ranked",
-  "odrl-dpv-risk-ranked",
-  "orbital-transfer-design",
-  "path-discovery",
-  "peano-arithmetic",
-  "peasant",
-  "pendulum-period",
-  "polynomial",
-  "project-portfolio-optimization",
-  "proof-contrapositive",
-  "quadratic-formula",
-  "quine-mccluskey",
-  "radioactive-decay",
-  "resilient-city-orchestration",
-  "riemann-hypothesis",
-  "sat-dpll",
-  "security-incident-correlation",
-  "service-impact",
-  "sieve",
-  "skolem-functions",
-  "socket-age",
-  "socket-family",
-  "socrates",
-  "statistics-summary",
-  "sudoku",
-  "superdense-coding",
-  "traveling-salesman",
-  "turing",
-  "vector-similarity",
-  "witch",
-  "wolf-goat-cabbage",
-  "zebra"
-];
-    const DEFAULT_PROGRAM = "% Socrates is mortal.\n\nmaterialize(type, 2).\nmaterialize(is, 2).\n\ntype(socrates, man).\n\ntype(X, mortal) :-\n  type(X, man).\n\nis(test, true) :-\n  type(socrates, mortal).";
-    const STORAGE_KEY = 'eyelang.playground.v7';
-    const programInput = document.getElementById('programInput');
-    const programSyntax = document.getElementById('programSyntax');
-    const programGutter = document.getElementById('programGutter');
-    const programErrorBand = document.getElementById('programErrorBand');
-    const statsToggle = document.getElementById('statsToggle');
-    const proofToggle = document.getElementById('proofToggle');
-    const commandPreview = document.getElementById('commandPreview');
-    const exampleSelect = document.getElementById('exampleSelect');
-    const loadExampleButton = document.getElementById('loadExampleButton');
-    const resetButton = document.getElementById('resetButton');
-    const urlInput = document.getElementById('urlInput');
-    const loadUrlButton = document.getElementById('loadUrlButton');
-    const backgroundToggle = document.getElementById('backgroundToggle');
-    const backgroundNote = document.getElementById('backgroundNote');
-    const runButton = document.getElementById('runButton');
-    const stopButton = document.getElementById('stopButton');
-    const copyLinkButton = document.getElementById('copyLinkButton');
-    const clearSavedButton = document.getElementById('clearSavedButton');
-    const statusEl = document.getElementById('status');
-    const combinedOutput = document.getElementById('combinedOutput');
-    const outputGutter = document.getElementById('outputGutter');
-    const fileProtocolNotice = document.getElementById('fileProtocolNotice');
-    const versionBadge = document.getElementById('versionBadge');
-    const workerUrl = new URL('./playground-worker.mjs', location.href).href;
-    let backgroundPrograms = [];
-    let worker = null;
-    let workerReady = false;
-    let workerLoadError = null;
-    let preloadPromise = null;
-    let preloadResolve = null;
-    let preloadReject = null;
-    let currentRunId = null;
-    let runStarted = 0;
-    let saveTimer = 0;
-    let currentProgramUrl = null;
-    let currentProgramSource = null;
-    for (const name of EXAMPLES) {
-      const option = document.createElement('option');
-      option.value = name;
-      option.textContent = name;
-      if (name === 'socrates') option.selected = true;
-      exampleSelect.append(option);
-    }
-    function setStatus(text, kind = '') {
-      statusEl.textContent = text;
-      statusEl.className = `status ${kind}`;
-    }
-    function showTab(_) {
-      // Output is a single combined window. Kept as a no-op for older call sites.
+          "access-control-policy",
+          "ackermann",
+          "age",
+          "aliases-and-namespaces",
+          "alignment-demo",
+          "allen-interval-calculus",
+          "ancestor",
+          "animal",
+          "annotation",
+          "auroracare",
+          "backward",
+          "basic-monadic",
+          "bayes-diagnosis",
+          "bayes-therapy",
+          "beam-deflection",
+          "binomial-vandermonde",
+          "blocks-world-planning",
+          "bmi",
+          "braking-safety-worlds",
+          "buck-converter-design",
+          "cache-performance",
+          "canary-release",
+          "cat-koko",
+          "catalan-convolution",
+          "chart-parser",
+          "clinical-trial-screening",
+          "collatz-1000",
+          "combinatorics-findall-sort",
+          "competitive-enzyme-kinetics",
+          "complex",
+          "composition-of-injective-functions-is-injective",
+          "context-association",
+          "context-schema-audit",
+          "continued-fraction-sqrt2",
+          "control-system",
+          "critical-path-schedule",
+          "cyclic-path",
+          "d3-group",
+          "dairy-energy-balance",
+          "data-negotiation",
+          "deep-taxonomy-10",
+          "deep-taxonomy-100",
+          "deep-taxonomy-1000",
+          "deep-taxonomy-10000",
+          "deep-taxonomy-100000",
+          "delfour",
+          "deontic-logic",
+          "derived-backward-rule",
+          "derived-rule",
+          "diamond-property",
+          "dijkstra",
+          "dijkstra-findall-sort",
+          "dijkstra-risk-path",
+          "dining-philosophers",
+          "dog",
+          "dpv-odrl-purpose-mapping",
+          "drone-corridor-planner",
+          "easter-computus",
+          "electrical-rc-filter",
+          "epidemic-policy",
+          "equivalence-classes-overlap-implies-same-class",
+          "eulerian-path",
+          "ev-range-worlds",
+          "existential-rule",
+          "exoplanet-validation-worlds",
+          "expression-eval",
+          "family-cousins",
+          "fastpow",
+          "fft8-numeric",
+          "fibonacci",
+          "field-nitrogen-balance",
+          "flandor",
+          "floating-point",
+          "four-color-map",
+          "fundamental-theorem-arithmetic",
+          "gd-step-certified",
+          "gdpr-compliance",
+          "good-cobbler",
+          "gps",
+          "graph",
+          "graph-reachability",
+          "gray-code-counter",
+          "greatest-lower-bound-uniqueness",
+          "group-inverse-uniqueness",
+          "hamiltonian-path",
+          "hamming-code",
+          "hanoi",
+          "heat-loss",
+          "heron-theorem",
+          "ideal-gas-law",
+          "illegitimate-reasoning",
+          "integer-partitions",
+          "intuitionistic-logic-kripke",
+          "job-shop-scheduling",
+          "knapsack-optimization",
+          "knowledge-engineering-alignment-flow",
+          "language",
+          "law-of-cosines",
+          "least-squares-regression",
+          "linear-logic-resources",
+          "list-collection",
+          "lldm",
+          "manufacturing-quality-control",
+          "matrix-chain-order",
+          "microgrid-dispatch",
+          "missionaries-cannibals",
+          "modal-logic-kripke",
+          "modular-exponentiation",
+          "monkey-bananas",
+          "n-queens-8",
+          "network-sla",
+          "newton-raphson",
+          "nixon-diamond",
+          "observability-log-correlation",
+          "odrl-dpv-fpv-trust-flow",
+          "odrl-dpv-healthcare-risk-ranked",
+          "odrl-dpv-risk-ranked",
+          "orbital-transfer-design",
+          "path-discovery",
+          "peano-arithmetic",
+          "peasant",
+          "pell-equation",
+          "pendulum-period",
+          "polynomial",
+          "proof-contrapositive",
+          "quadratic-formula",
+          "radioactive-decay",
+          "reusable-builtins",
+          "riemann-hypothesis",
+          "security-incident-correlation",
+          "send-more-money",
+          "service-impact",
+          "sieve",
+          "skolem-functions",
+          "socket-age",
+          "socket-family",
+          "socrates",
+          "stable-marriage",
+          "statistics-summary",
+          "stirling-bell-numbers",
+          "sudoku-4x4",
+          "superdense-coding",
+          "term-tools",
+          "totient-summatory",
+          "trust-flow-provenance-threshold",
+          "turing",
+          "vector-similarity",
+          "vulnerability-impact",
+          "web-names",
+          "weighted-interval-scheduling",
+          "witch",
+          "wolf-goat-cabbage",
+          "zebra"
+    ];
+    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', 'table']);
+    const BUILTINS = new Set([
+            "abs",
+            "acos",
+            "add",
+            "aggregate_max",
+            "aggregate_min",
+            "append",
+            "arg",
+            "asin",
+            "atan2",
+            "atom_string",
+            "between",
+            "ceiling",
+            "compound_name_arguments",
+            "contains",
+            "cos",
+            "countall",
+            "difference",
+            "div",
+            "drop",
+            "eq",
+            "exp",
+            "findall",
+            "floor",
+            "forall",
+            "functor",
+            "ge",
+            "gt",
+            "head",
+            "holds",
+            "join",
+            "last",
+            "le",
+            "length",
+            "list_to_set",
+            "local_time",
+            "log",
+            "lowercase",
+            "lt",
+            "matches",
+            "max",
+            "max_list",
+            "member",
+            "min",
+            "min_list",
+            "mod",
+            "mul",
+            "neg",
+            "neq",
+            "not",
+            "not_matches",
+            "not_member",
+            "nth0",
+            "number_string",
+            "once",
+            "pow",
+            "replace",
+            "rest",
+            "reverse",
+            "rounded",
+            "select",
+            "set_nth0",
+            "sin",
+            "slice",
+            "smallest_divisor_from",
+            "sort",
+            "split",
+            "sqrt",
+            "str_concat",
+            "sub",
+            "substring",
+            "sum_list",
+            "sumall",
+            "take",
+            "tan",
+            "term_string",
+            "trim",
+            "trunc",
+            "uppercase"
+      ]);
+    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);
+    await restoreFromHashOrLoadDefault();
+    loadVersion();
+    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;
+      exampleSelect.replaceChildren(...names.map((name) => {
+        const option = document.createElement('option');
+        option.value = name;
+        option.textContent = name;
+        return option;
+      }));
+      if (names.includes(current)) exampleSelect.value = current;
+      else if (names.length) exampleSelect.value = names[0];
+    }
+    function filterExamples(query) {
+      const needle = query.trim().toLowerCase();
+      if (!needle) return EXAMPLES;
+      return EXAMPLES.filter((name) => name.includes(needle));
+    }
+    async function loadExample(name) {
+      if (!name) return;
+      try {
+        setStatus(`Loading ${name}…`);
+        const exampleUrl = new URL(`./examples/${name}.eye`, 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}.eye`, { kind: 'example', name });
+        setStatus(`Loaded examples/${name}.eye.`);
+      } catch (error) {
+        setSource(FALLBACK_SOURCE, 'fallback program');
+        setStatus(`Could not load examples/${name}.eye: ${formatError(error)}`, true);
+      }
     }
-    function escapeHtml(text) {
-      return text.replace(/[&<>"']/g, char => ({
-        '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
-      })[char]);
-    }
-    const BUILTIN_NAMES = new Set([
-      "abs",
-      "acos",
-      "add",
-      "aggregate_max",
-      "aggregate_min",
-      "append",
-      "asin",
-      "atan",
-      "between",
-      "ceil",
-      "cos",
-      "countall",
-      "difference",
-      "div",
-      "eq",
-      "equal",
-      "exp",
-      "findall",
-      "floor",
-      "formula_atom",
-      "formula_binary",
-      "ge",
-      "greater",
-      "gt",
-      "is_list",
-      "le",
-      "length",
-      "local_time",
-      "log",
-      "lt",
-      "max",
-      "member",
-      "min",
-      "mod",
-      "mul",
-      "neq",
-      "not",
-      "not_equal",
-      "not_member",
-      "nth0",
-      "once",
-      "pow",
-      "rest",
-      "reverse",
-      "round",
-      "select",
-      "set_nth0",
-      "sin",
-      "smallest_divisor_from",
-      "sort",
-      "sqrt",
-      "sub",
-      "sudoku",
-      "sumall",
-      "tan"
-]);
-    function isAlpha(char) { return /[A-Za-z]/.test(char); }
-    function isDigit(char) { return /[0-9]/.test(char); }
-    function isIdentChar(char) { return /[A-Za-z0-9_]/.test(char); }
-    function nextNonSpace(text, index) {
-      while (index < text.length && /[ \t\r\n]/.test(text[index])) index++;
-      return text[index] || '';
-    }
-    function span(className, text) {
-      return `<span class="${className}">${escapeHtml(text)}</span>`;
-    }
-    function highlightProlog(text) {
-      let html = '';
-      let i = 0;
-      while (i < text.length) {
-        const char = text[i];
-        if (char === '%') {
-          let j = i + 1;
-          while (j < text.length && text[j] !== '\n') j++;
-          html += span('syn-comment', text.slice(i, j));
-          i = j;
-          continue;
+    async function loadUrl() {
+      const url = document.querySelector('#source-url').value.trim();
+      if (!url) return;
+      try {
+        setStatus(`Loading ${url}…`);
+        const response = await fetch(url);
+        if (!response.ok) throw new Error(`${response.status} ${response.statusText}`);
+        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 clearBackground() {
+      backgroundSource = '';
+      backgroundName = '';
+      backgroundReference = null;
+      updateBackgroundStatus();
+      setStatus('Background knowledge cleared.');
+    }
-        if (char === '"' || char === "'") {
-          const quote = char;
+    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() {
+      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) {
+      let out = '';
+      for (let i = 0; i < text.length;) {
+        const ch = text[i];
+        if (ch === '%') {
+          const end = text.indexOf('\n', i);
+          const stop = end === -1 ? text.length : end;
+          out += span('comment', text.slice(i, stop));
+          i = stop;
+        } else if (ch === '"' || ch === "'") {
+          const quote = ch;
           let j = i + 1;
           while (j < text.length) {
-            if (text[j] === '\\') {
-              j += 2;
-              continue;
-            }
-            if (quote === "'" && text[j] === "'" && text[j + 1] === "'") {
-              j += 2;
-              continue;
-            }
-            if (text[j] === quote) {
-              j++;
-              break;
-            }
-            j++;
+            if (text[j] === '\\') j += 2;
+            else if (text[j] === quote) { j++; break; }
+            else j++;
           }
-          html += span(quote === '"' ? 'syn-string' : 'syn-quoted', text.slice(i, j));
+          out += span('string', text.slice(i, j));
           i = j;
-          continue;
-        }
-        if ((char === '-' && isDigit(text[i + 1] || '')) || isDigit(char)) {
-          let j = i + (char === '-' ? 1 : 0);
-          while (isDigit(text[j] || '')) j++;
-          if (text[j] === '.' && isDigit(text[j + 1] || '')) {
-            j++;
-            while (isDigit(text[j] || '')) j++;
-          }
-          if ((text[j] === 'e' || text[j] === 'E') && (isDigit(text[j + 1] || '') || ((text[j + 1] === '+' || text[j + 1] === '-') && isDigit(text[j + 2] || '')))) {
-            j++;
-            if (text[j] === '+' || text[j] === '-') j++;
-            while (isDigit(text[j] || '')) j++;
-          }
-          html += span('syn-number', text.slice(i, j));
+        } else if (/\d/.test(ch)) {
+          let j = i + 1;
+          while (j < text.length && /[\d.]/.test(text[j])) j++;
+          out += span('number', text.slice(i, j));
           i = j;
-          continue;
-        }
-        if (isAlpha(char) || char === '_') {
+        } else if (ch === '?' && /[A-Za-z_]/.test(text[i + 1] || '')) {
+          let j = i + 2;
+          while (j < text.length && /[A-Za-z0-9_]/.test(text[j])) j++;
+          out += span('variable', text.slice(i, j));
+          i = j;
+        } else if (/[a-z]/.test(ch)) {
           let j = i + 1;
-          while (isIdentChar(text[j] || '')) j++;
+          while (j < text.length && /[A-Za-z0-9_]/.test(text[j])) j++;
           const word = text.slice(i, j);
-          if (/[A-Z_]/.test(char)) {
-            html += span('syn-variable', word);
-          } else if (BUILTIN_NAMES.has(word)) {
-            html += span('syn-builtin', word);
-          } else if (nextNonSpace(text, j) === '(') {
-            html += span('syn-predicate', word);
-          } else {
-            html += escapeHtml(word);
-          }
+          if (KEYWORDS.has(word)) out += span('keyword', word);
+          else if (BUILTINS.has(word) || text[j] === '(') out += span('predicate', word);
+          else out += escapeHtml(word);
           i = j;
-          continue;
-        }
-        if (':-.,;()[]{}|'.includes(char)) {
-          html += span('syn-punctuation', char);
+        } else if ('()[]{},.;|:-'.includes(ch)) {
+          out += span('punctuation', ch);
+          i++;
+        } else {
+          out += escapeHtml(ch);
           i++;
-          continue;
         }
-        html += escapeHtml(char);
-        i++;
       }
+      return out;
+    }
+    function span(kind, text) { return `<span class="tok-${kind}">${escapeHtml(text)}</span>`; }
-      return html || ' ';
+    function escapeHtml(text) {
+      return text.replace(/[&<>]/g, (ch) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;' }[ch]));
+    }
+    function runProgram() {
+      stopProgram(false);
+      clearSyntaxError();
+      output.textContent = '';
+      elapsed.textContent = 'Running…';
+      setStatus('Running Eyelang…');
+      runButton.disabled = true;
+      stopButton.disabled = false;
+      const engineUrl = new URL('./src/index.js', location.href).href;
+      const workerCode = `
+        import { run } from ${JSON.stringify(engineUrl)};
+        self.onmessage = (event) => {
+          const started = performance.now();
+          try {
+            const result = run(event.data.source, event.data.options);
+            self.postMessage({
+              ok: true,
+              stdout: result.stdout,
+              stats: result.stats,
+              elapsedMs: performance.now() - started,
+            });
+          } catch (error) {
+            self.postMessage({ ok: false, error: error?.stack || error?.message || String(error) });
+          }
+        };
+      `;
+      activeWorkerUrl = URL.createObjectURL(new Blob([workerCode], { type: 'text/javascript' }));
+      activeWorker = new Worker(activeWorkerUrl, { type: 'module' });
+      activeWorker.onmessage = (event) => finishRun(event.data);
+      activeWorker.onerror = (event) => finishRun({ ok: false, error: event.message || 'worker error' });
+      activeWorker.postMessage({
+        source: combinedSource(),
+        options: { proof: proof.checked, stats: stats.checked },
+      });
     }
-    let currentErrorLine = 0;
+    function combinedSource() {
+      if (!backgroundSource.trim()) return source.value;
+      return `${backgroundSource}\n${source.value}`;
+    }
-    function lineCount(text) {
-      return Math.max(1, String(text || '').split('\n').length);
+    function extractParseErrorLine(text) {
+      const match = String(text).match(/parse line (\d+)/i);
+      return match ? Number(match[1]) : null;
     }
-    function renderLineNumbers(target, count, errorLine = 0) {
-      let html = '';
-      for (let i = 1; i <= count; i++) {
-        const escaped = String(i);
-        html += i === errorLine ? `<span class="error-line">${escaped}</span>` : escaped;
-        if (i < count) html += '\n';
-      }
-      target.innerHTML = html;
+    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 updateProgramLineNumbers() {
-      renderLineNumbers(programGutter, lineCount(programInput.value), currentErrorLine);
-      programGutter.scrollTop = programInput.scrollTop;
-      updateErrorBand();
+    function markSyntaxErrorLine(line) {
+      syntaxErrorLine = line;
+      updateLineNumbers();
+      revealLine(line);
+      updateErrorLineMarker();
     }
-    function updateErrorBand() {
-      if (!currentErrorLine) {
-        programErrorBand.classList.add('hidden');
-        return;
-      }
-      const style = getComputedStyle(programInput);
-      const lineHeight = parseFloat(style.lineHeight) || (parseFloat(style.fontSize) || 16) * 1.45;
-      const top = parseFloat(style.paddingTop || '0') + (currentErrorLine - 1) * lineHeight - programInput.scrollTop;
-      programErrorBand.style.top = `${top}px`;
-      programErrorBand.style.height = `${lineHeight}px`;
-      programErrorBand.classList.remove('hidden');
+    function clearSyntaxError() {
+      syntaxErrorLine = null;
+      updateLineNumbers();
+      updateErrorLineMarker();
     }
-    function clearErrorLine() {
-      currentErrorLine = 0;
-      updateProgramLineNumbers();
+    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 markErrorLine(line) {
-      const count = lineCount(programInput.value);
-      const parsed = Number(line);
-      if (!Number.isFinite(parsed) || parsed <= 0) {
-        clearErrorLine();
+    function updateErrorLineMarker() {
+      if (syntaxErrorLine == null) {
+        errorLineMarker.style.display = 'none';
         return;
       }
-      currentErrorLine = Math.min(count, Math.max(1, Math.floor(parsed)));
-      updateProgramLineNumbers();
-      const style = getComputedStyle(programInput);
-      const lineHeight = parseFloat(style.lineHeight) || (parseFloat(style.fontSize) || 16) * 1.45;
-      programInput.scrollTop = Math.max(0, (currentErrorLine - 3) * lineHeight);
-      updateProgramLineNumbers();
-      const lines = programInput.value.split('\n');
-      let start = 0;
-      for (let i = 0; i < currentErrorLine - 1; i++) start += lines[i].length + 1;
-      const end = start + (lines[currentErrorLine - 1] || '').length;
-      try { programInput.setSelectionRange(start, end); } catch (_) {}
-    }
-    function updateProgramSyntax() {
-      if (!programSyntax) return;
-      programSyntax.innerHTML = highlightProlog(programInput.value || ' ');
-      // Match the textarea's scrollable content height. Without this, the
-      // passive syntax layer can be clipped to the visible editor height,
-      // making everything below the first screen look blank.
-      const scrollHeight = Math.max(programInput.scrollHeight, programInput.clientHeight);
-      programSyntax.style.minHeight = `${scrollHeight}px`;
-      programSyntax.style.transform = `translateY(${-programInput.scrollTop}px)`;
-    }
-    function updateProgramHighlight() {
-      updateProgramSyntax();
-      updateProgramLineNumbers();
-    }
-    function setProgramValue(value) {
-      programInput.value = value;
-      clearErrorLine();
-      updateProgramHighlight();
-    }
-    function cleanStderr(text) {
-      const raw = String(text || '').trim();
-      if (!raw) return '';
-      if (/Maximum call stack size exceeded|call stack|stack overflow/i.test(raw)) {
-        return 'eyelang exhausted the browser JavaScript call stack. Try a smaller example in the playground, or run this program with the Node CLI.';
-      }
-      return raw;
-    }
-    function extractDiagnosticLine(text) {
-      const value = String(text || '');
-      const patterns = [
-        /(?:line|Line)\s+(\d+)/,
-        /:(\d+):\d+:/,
-        /syntax[^\n]*?(\d+)/i,
-        /parse[^\n]*?(\d+)/i,
-      ];
-      for (const pattern of patterns) {
-        const match = value.match(pattern);
-        if (match) return Number(match[1]);
+      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) {
+      cleanupWorker();
+      runButton.disabled = false;
+      stopButton.disabled = true;
+      if (!message.ok) {
+        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(editorLine == null ? 'Run failed.' : `Syntax error on line ${editorLine}.`, true);
+        return;
       }
-      return 0;
+      let text = message.stdout || '(no materialized output)\n';
+      if (stats.checked && message.stats) text += '\n% stats\n' + formatStats(message.stats);
+      output.textContent = text;
+      const seconds = (message.elapsedMs / 1000).toFixed(3);
+      elapsed.textContent = `${seconds} sec`;
+      setStatus('Run complete.');
     }
-    function combinedText(stdout, stderr) {
-      const out = String(stdout || '').trimEnd();
-      const err = cleanStderr(stderr);
-      if (out && err) return `${out}\n\nstderr\n${err}`;
-      if (out) return out;
-      if (err) return `stderr\n${err}`;
-      return '(no output)';
+    function stopProgram(report = true) {
+      if (!activeWorker) return;
+      cleanupWorker();
+      runButton.disabled = false;
+      stopButton.disabled = true;
+      elapsed.textContent = 'Stopped.';
+      if (report) setStatus('Run stopped.');
     }
-    function setOutputText(text) {
-      combinedOutput.innerHTML = highlightProlog(String(text || ''));
-      renderLineNumbers(outputGutter, lineCount(String(text || '')));
-      outputGutter.scrollTop = combinedOutput.scrollTop;
+    function cleanupWorker() {
+      if (activeWorker) activeWorker.terminate();
+      activeWorker = null;
+      if (activeWorkerUrl) URL.revokeObjectURL(activeWorkerUrl);
+      activeWorkerUrl = null;
     }
-    function setRunOutput(stdout, stderr) {
-      const text = combinedText(stdout, stderr);
-      setOutputText(text);
-      const line = extractDiagnosticLine(stderr) || extractDiagnosticLine(stdout);
-      if (line) markErrorLine(line);
+    function formatStats(values) {
+      return Object.entries(values).map(([key, value]) => `${key}: ${value}`).join('\n') + '\n';
     }
-    function updateBackgroundNote() {
-      if (!backgroundPrograms.length) {
-        backgroundNote.classList.add('hidden');
-        backgroundNote.textContent = '';
+    async function copyText(text, message) {
+      try {
+        await navigator.clipboard.writeText(text);
+        setStatus(message);
+      } catch (_) {
+        setStatus('Clipboard access is not available in this browser.', true);
+      }
+    }
+    async function copyShareLink() {
+      const link = buildShareLink();
+      if (link != null) {
+        await copyText(link, 'Share link copied.');
         return;
       }
-      const names = backgroundPrograms.map(item => item.name).join(', ');
-      backgroundNote.classList.remove('hidden');
-      backgroundNote.innerHTML = `<strong>${backgroundPrograms.length}</strong> background program(s): ${escapeHtml(names)} <button id="clearBackgroundInline" type="button">Clear background</button>`;
-      document.getElementById('clearBackgroundInline').addEventListener('click', () => {
-        backgroundPrograms = [];
-        updateBackgroundNote();
-        saveState();
+      await createGistShare({
+        reason: 'This program is too large for an inline URL, so Copy share link will create a Gist share instead.',
       });
     }
-    function combinedProgram() {
-      const parts = backgroundPrograms.map(item => `% background: ${item.name}\n${item.source.trim()}`);
-      parts.push(programInput.value.trim());
-      return parts.filter(Boolean).join('\n\n');
+    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 saveState() {
-      clearTimeout(saveTimer);
-      updateCommandPreview();
-      saveTimer = setTimeout(() => {
-        localStorage.setItem(STORAGE_KEY, JSON.stringify({
-          program: programInput.value,
-          stats: statsToggle.checked,
-          proof: proofToggle.checked,
-          backgroundPrograms,
-          currentProgramUrl,
-        }));
-      }, 150);
+    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(options = {}) {
+      const stateText = JSON.stringify(currentShareState(), null, 2);
+      if (options.reason) setStatus(options.reason);
+      const token = prompt(`${options.reason ? `${options.reason}\n\n` : ''}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 and open gist.github.com.`);
+      if (token === null) {
+        setStatus('Gist share cancelled.');
+        return;
+      }
+      if (!token.trim()) {
+        await copyText(stateText, `Gist-ready state copied. Create a Gist file named ${GIST_STATE_FILENAME}, paste it, then copy its raw URL into a playground #state-url link.`);
+        window.open('https://gist.github.com/', '_blank', 'noopener');
+        return;
+      }
+      try {
+        setStatus('Creating GitHub Gist…');
+        const files = {
+          [GIST_STATE_FILENAME]: { content: stateText },
+          'program.eye': { content: source.value },
+        };
+        if (backgroundSource.trim()) files['background.eye'] = { 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 encodePayload(text) {
-      const bytes = new TextEncoder().encode(text);
-      let binary = '';
-      for (const byte of bytes) binary += String.fromCharCode(byte);
-      return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/g, '');
+    function currentShareState() {
+      return {
+        source: source.value,
+        proof: proof.checked,
+        stats: stats.checked,
+        backgroundSource,
+        backgroundName,
+      };
     }
-    function decodePayload(text) {
-      const padded = text.replace(/-/g, '+').replace(/_/g, '/').padEnd(Math.ceil(text.length / 4) * 4, '=');
-      const binary = atob(padded);
-      const bytes = Uint8Array.from(binary, char => char.charCodeAt(0));
-      return new TextDecoder().decode(bytes);
+    function encodeState(payload) {
+      const data = new TextEncoder().encode(JSON.stringify(payload));
+      let binary = '';
+      for (const byte of data) binary += String.fromCharCode(byte);
+      return btoa(binary).replaceAll('+', '-').replaceAll('/', '_').replace(/=+$/, '');
     }
-    function parseFlag(value) {
-      return /^(1|true|yes|on)$/i.test(String(value || ''));
+    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 shellQuote(text) {
-      if (!text) return "''";
-      return "'" + String(text).replace(/'/g, "'\\''") + "'";
+    function basePlaygroundUrl() {
+      return location.href.split('#')[0];
     }
-    function updateCommandPreview() {
-      const args = ['eyelang'];
-      if (statsToggle.checked) args.push('--stats');
-      if (proofToggle.checked) args.push('--proof');
-      args.push(currentProgramStillMatchesUrl() ? currentProgramUrl : 'input.pl');
-      commandPreview.textContent = args.join(' ');
+    async function restoreFromHashOrLoadDefault() {
+      if (!(await restoreFromHash())) await loadExample('ancestor');
     }
-    async function restoreState() {
-      const searchParams = new URLSearchParams(location.search);
-      if (searchParams.has('url')) {
-        const sourceUrl = searchParams.get('url');
-        urlInput.value = sourceUrl;
-        statsToggle.checked = parseFlag(searchParams.get('stats') || searchParams.get('s'));
-        proofToggle.checked = parseFlag(searchParams.get('proof') || searchParams.get('pr'));
-        updateCommandPreview();
-        try {
-          await loadIntoEditor(sourceUrl, false, { save: false });
-          setStatus(`Loaded ${sourceUrl}.`, 'ok');
-          return;
-        } catch (error) {
-          setStatus(`Could not load URL parameter: ${error.message}`, 'error');
+    async function restoreFromHash() {
+      if (!location.hash || location.hash === '#') return false;
+      const params = new URLSearchParams(location.hash.slice(1));
+      try {
+        if (params.has('state')) {
+          applySharedState(decodeState(params.get('state')), 'shared program');
+          setStatus('Loaded shared program.');
+          return true;
         }
-      }
-      const params = new URLSearchParams(location.hash.startsWith('#') ? location.hash.slice(1) : location.hash);
-      if (params.has('p')) {
-        try {
-          setProgramValue(decodePayload(params.get('p')));
-          statsToggle.checked = parseFlag(params.get('s'));
-          proofToggle.checked = parseFlag(params.get('r'));
-          currentProgramUrl = null;
-          currentProgramSource = null;
-          setStatus('Loaded shared program.', 'ok');
-          return;
-        } catch (error) {
-          setStatus(`Could not decode shared link: ${error.message}`, 'error');
+        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;
         }
-      }
-      try {
-        const raw = localStorage.getItem(STORAGE_KEY) || localStorage.getItem('eyelang.playground.v6') || localStorage.getItem('eyelang.playground.v5') || localStorage.getItem('eyelang.playground.v4') || localStorage.getItem('eyelang.playground.v3') || localStorage.getItem('eyelang.playground.v2') || localStorage.getItem('eyelang.playground.v1');
-        if (raw) {
-          const payload = JSON.parse(raw);
-          setProgramValue(payload.program || DEFAULT_PROGRAM);
-          statsToggle.checked = Boolean(payload.stats);
-          proofToggle.checked = Boolean(payload.proof);
-          backgroundPrograms = Array.isArray(payload.backgroundPrograms) ? payload.backgroundPrograms : [];
-          currentProgramUrl = payload.currentProgramUrl || null;
-          currentProgramSource = currentProgramUrl ? programInput.value : null;
-          if (currentProgramUrl) urlInput.value = currentProgramUrl;
-          updateBackgroundNote();
-          updateCommandPreview();
-          setStatus('Restored autosave.', 'ok');
-          return;
+        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) {
-        console.warn(error);
+        setStatus(`Could not read shared state: ${formatError(error)}`, true);
+        return false;
       }
-      setProgramValue(DEFAULT_PROGRAM);
-      statsToggle.checked = false;
-      proofToggle.checked = false;
-      currentProgramUrl = null;
-      currentProgramSource = null;
-      updateCommandPreview();
+      return false;
     }
-    async function loadVersion() {
-      if (!versionBadge || location.protocol === 'file:') return;
-      try {
-        const response = await fetch(new URL('./package.json', location.href), { cache: 'no-store' });
-        if (!response.ok) throw new Error(`${response.status} ${response.statusText}`);
-        const pkg = await response.json();
-        if (pkg && pkg.version) versionBadge.textContent = `eyelang ${pkg.version}`;
-      } catch (error) {
-        console.warn('Could not load eyelang package version:', error);
-      }
+    async function restoreBackgroundUrl(params) {
+      const url = params.get('background-url');
+      if (!url) return;
+      await loadSourceFromUrl(url, true);
     }
-    async function loadText(url) {
-      if (location.protocol === 'file:') {
-        throw new Error('Local file mode cannot fetch examples or module assets. Serve the directory over HTTP first.');
-      }
-      const response = await fetch(url, { cache: 'no-store' });
+    async function loadSourceFromUrl(url, asBackground) {
+      const response = await fetch(url);
       if (!response.ok) throw new Error(`${response.status} ${response.statusText}`);
-      return response.text();
-    }
-    async function loadIntoEditor(url, asBackground = false, options = {}) {
-      setStatus(`Loading ${url}…`);
-      const source = await loadText(url);
+      const text = await response.text();
       if (asBackground) {
-        backgroundPrograms.push({ name: url, source });
-        updateBackgroundNote();
+        backgroundSource = text;
+        backgroundName = url;
+        backgroundReference = { kind: 'url', url };
+        updateBackgroundStatus();
       } else {
-        setProgramValue(source.trimEnd());
-        currentProgramUrl = url;
-        currentProgramSource = programInput.value;
-        urlInput.value = url;
-        updateCommandPreview();
-      }
-      setStatus(`Loaded ${url}.`, 'ok');
-      if (options.save !== false) saveState();
-    }
-    function setRunning(isRunning) {
-      // Keep Run clickable while the engine is preloading. A click will wait for
-      // preload to finish, which avoids the UI looking dead on slow first loads.
-      runButton.disabled = isRunning;
-      stopButton.disabled = !isRunning;
-    }
-    function newRequestId() {
-      return crypto.randomUUID ? crypto.randomUUID() : `${Date.now()}-${Math.random()}`;
-    }
-    function localFileMessage() {
-      return [
-        'This page is open as file://, so the browser cannot reliably load module workers or examples.',
-        '',
-        'From the repository directory, run:',
-        '',
-        '  python3 -m http.server 8000',
-        '',
-        'Then open:',
-        '',
-        '  http://localhost:8000/playground.html',
-      ].join('\n');
-    }
-    function buildMissingMessage(error) {
-      return [
-        error && error.message ? error.message : String(error),
-        '',
-        'Expected JavaScript playground files:',
-        '',
-        '  playground-worker.mjs',
-        '  src/index.js',
-        '  src/builtins/*.js',
-        '',
-        'Serve the repository root over HTTP so browser module imports can resolve.',
-      ].join('\n');
-    }
-    function formatWorkerError(error) {
-      const message = error && error.message ? String(error.message) : String(error);
-      if (/Maximum call stack size exceeded|call stack|stack overflow/i.test(message)) {
-        return [
-          message,
-          '',
-          'eyelang exhausted the browser JavaScript call stack.',
-          'Try a smaller example in the playground, or run this program with the Node CLI.',
-        ].join('\n');
+        setSource(text, url, { kind: 'url', url });
       }
-      return buildMissingMessage(error);
     }
-    function handleWorkerMessage(event) {
-      const data = event.data || {};
-      if (data.type === 'ready') {
-        workerReady = true;
-        workerLoadError = null;
-        preloadResolve?.();
-        setRunning(false);
-        if (!currentRunId) setStatus('Engine ready.', 'ok');
-        return;
-      }
-      if (data.type === 'init-error') {
-        workerReady = false;
-        workerLoadError = data.stderr || 'JavaScript engine could not be loaded.';
-        preloadReject?.(new Error(workerLoadError));
-        setRunOutput('', buildMissingMessage(new Error(workerLoadError)));
-        setStatus('JavaScript engine could not be loaded.', 'error');
-        setRunning(false);
-        return;
-      }
-      if (data.type !== 'result' || data.id !== currentRunId) return;
-      const elapsed = Math.max(1, Math.round(performance.now() - runStarted));
-      setRunOutput(data.stdout || '', data.stderr || '');
-      if (data.exitCode === 0) {
-        setStatus(`Finished in ${elapsed} ms.`, 'ok');
-      } else {
-        setStatus(`Failed while ${data.phase}.`, 'error');
-        showTab('stderr');
-      }
-      currentRunId = null;
-      setRunning(false);
-    }
-    function handleWorkerError(error) {
-      setRunOutput('', formatWorkerError(error));
-      setStatus('JavaScript engine could not be loaded.', 'error');
-      currentRunId = null;
-      workerReady = false;
-      workerLoadError = formatWorkerError(error);
-      setRunning(false);
-      preloadReject?.(new Error(workerLoadError));
-      worker?.terminate();
-      worker = null;
-    }
-    function startPlaygroundWorker(statusText = 'Loading engine…') {
-      if (location.protocol === 'file:') return Promise.reject(new Error(localFileMessage()));
-      if (worker) worker.terminate();
-      worker = null;
-      workerReady = false;
-      workerLoadError = null;
-      currentRunId = null;
-      setRunning(false);
-      setStatus(statusText);
-      preloadPromise = new Promise((resolve, reject) => {
-        preloadResolve = resolve;
-        preloadReject = reject;
-      });
-      try {
-        worker = new Worker(workerUrl, { type: 'module' });
-      } catch (error) {
-        handleWorkerError(error);
-        return preloadPromise;
-      }
-      worker.onmessage = handleWorkerMessage;
-      worker.onerror = handleWorkerError;
-      worker.postMessage({ type: 'init', id: newRequestId() });
-      return preloadPromise;
+    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();
     }
-    async function runEyelang() {
-      if (location.protocol === 'file:') {
-        setRunOutput('', localFileMessage());
-        setStatus('Serve the playground over HTTP first.', 'error');
-        return;
-      }
-      if (currentRunId) return;
-      if (!worker || !preloadPromise) startPlaygroundWorker();
-      if (!workerReady) {
-        if (workerLoadError) {
-          setRunOutput('', buildMissingMessage(new Error(workerLoadError)));
-          setStatus('JavaScript engine could not be loaded.', 'error');
-          return;
-        }
-        try {
-          setStatus('Finishing engine load…');
-          await preloadPromise;
-        } catch (_) {
-          return;
-        }
-      }
-      runStarted = performance.now();
-      clearErrorLine();
-      setOutputText('Running…');
-      setStatus('Running eyelang…');
-      currentRunId = newRequestId();
-      setRunning(true);
-      worker.postMessage({
-        type: 'run',
-        id: currentRunId,
-        program: combinedProgram(),
-        stats: statsToggle.checked,
-        proof: proofToggle.checked,
-      });
+    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 copyText(text) {
-      if (navigator.clipboard && window.isSecureContext) {
-        await navigator.clipboard.writeText(text);
-        return 'clipboard';
-      }
-      const textarea = document.createElement('textarea');
-      textarea.value = text;
-      textarea.setAttribute('readonly', '');
-      textarea.style.position = 'fixed';
-      textarea.style.top = '0';
-      textarea.style.left = '-9999px';
-      document.body.append(textarea);
-      textarea.focus();
-      textarea.select();
+    async function loadVersion() {
       try {
-        if (document.execCommand && document.execCommand('copy')) {
-          return 'fallback';
-        }
-      } finally {
-        textarea.remove();
-      }
-      window.prompt('Copy this eyelang playground link:', text);
-      return 'manual';
-    }
-    function currentProgramStillMatchesUrl() {
-      return currentProgramUrl &&
-        currentProgramSource !== null &&
-        programInput.value === currentProgramSource &&
-        backgroundPrograms.length === 0;
-    }
-    function markProgramEdited() {
-      if (currentProgramUrl && programInput.value !== currentProgramSource) {
-        currentProgramUrl = null;
-        currentProgramSource = null;
+        const response = await fetch('package.json', { cache: 'no-store' });
+        if (!response.ok) return;
+        const pkg = await response.json();
+        if (pkg.version) document.querySelector('#version').textContent = `eyelang v${pkg.version}`;
+      } catch (_) {
+        // Package metadata is optional when the page is copied elsewhere.
       }
-      saveState();
     }
-    async function copyShareLink() {
-      const url = new URL(location.href);
-      url.hash = '';
-      if (currentProgramStillMatchesUrl()) {
-        url.search = '';
-        url.searchParams.set('url', currentProgramUrl);
-        if (statsToggle.checked) url.searchParams.set('stats', '1');
-        if (proofToggle.checked) url.searchParams.set('proof', '1');
-      } else {
-        const params = new URLSearchParams();
-        params.set('p', encodePayload(programInput.value));
-        if (statsToggle.checked) params.set('s', '1');
-        if (proofToggle.checked) params.set('r', '1');
-        url.search = '';
-        url.hash = params.toString();
-      }
-      const method = await copyText(url.href);
-      setStatus(method === 'manual' ? 'Share link shown for manual copy.' : 'Share link copied.', 'ok');
-    }
-    loadExampleButton.addEventListener('click', () => loadIntoEditor(`examples/${exampleSelect.value}.pl`, false).catch(error => setStatus(error.message, 'error')));
-    resetButton.addEventListener('click', () => {
-      setProgramValue(DEFAULT_PROGRAM);
-      statsToggle.checked = false;
-      proofToggle.checked = false;
-      backgroundPrograms = [];
-      currentProgramUrl = null;
-      currentProgramSource = null;
-      urlInput.value = '';
-      updateBackgroundNote();
-      updateCommandPreview();
-      setOutputText('(no output yet)');
-      setStatus('Reset to the built-in Socrates example.', 'ok');
-      saveState();
-    });
-    loadUrlButton.addEventListener('click', () => {
-      const url = urlInput.value.trim();
-      if (!url) return setStatus('Enter a URL first.', 'error');
-      loadIntoEditor(url, backgroundToggle.checked).catch(error => setStatus(`Could not load URL: ${error.message}`, 'error'));
-    });
-    runButton.addEventListener('click', runEyelang);
-    stopButton.addEventListener('click', () => {
-      if (worker) {
-        worker.terminate();
-        worker = null;
-      }
-      currentRunId = null;
-      workerReady = false;
-      setRunning(false);
-      setStatus('Stopped. Reloading engine…', 'error');
-      startPlaygroundWorker('Reloading engine…').catch(() => {});
-    });
-    copyLinkButton.addEventListener('click', () => copyShareLink().catch(error => setStatus(`Could not copy link: ${error.message}`, 'error')));
-    clearSavedButton.addEventListener('click', () => {
-      localStorage.removeItem(STORAGE_KEY);
-      localStorage.removeItem('eyelang.playground.v6');
-      localStorage.removeItem('eyelang.playground.v5');
-      localStorage.removeItem('eyelang.playground.v4');
-      localStorage.removeItem('eyelang.playground.v3');
-      localStorage.removeItem('eyelang.playground.v2');
-      localStorage.removeItem('eyelang.playground.v1');
-      setStatus('Autosave cleared.', 'ok');
-    });
-    programInput.addEventListener('input', () => { clearErrorLine(); updateProgramSyntax(); markProgramEdited(); });
-    programInput.addEventListener('scroll', updateProgramHighlight);
-    combinedOutput.addEventListener('scroll', () => { outputGutter.scrollTop = combinedOutput.scrollTop; });
-    statsToggle.addEventListener('change', saveState);
-    proofToggle.addEventListener('change', saveState);
-    async function initializePage() {
-      updateProgramHighlight();
-      setOutputText('(no output yet)');
-      loadVersion();
-      await restoreState();
-      updateCommandPreview();
-      if (location.protocol === 'file:') {
-        fileProtocolNotice.classList.remove('hidden');
-        setStatus('Serve over HTTP before running.', 'error');
-      } else {
-        startPlaygroundWorker().catch(() => {});
-      }
+    function setStatus(message, isError = false) {
+      status.textContent = message;
+      status.classList.toggle('error', isError);
     }
-    initializePage();
+    function formatError(error) { return error?.message || String(error); }
   </script>
 </body>
 </html>