@fraczak/k 6.7.0 → 6.9.0

package/scripts/build-repl-html.mjs

@@ -12,7 +12,40 @@ const workspaceRoot = path.resolve(projectRoot, "..");
 
 console.log("=== Building Self-Contained K REPL HTML ===");
 
-// 1. Scan and generate browser/vfs-data.mjs
+// 1. Node shims plugin for esbuild
+const nodeShimsPlugin = {
+  name: "node-shims",
+  setup(build) {
+    const shims = {
+      "fs": path.join(projectRoot, "browser/shims/fs.mjs"),
+      "node:fs": path.join(projectRoot, "browser/shims/fs.mjs"),
+      "path": path.join(projectRoot, "browser/shims/path.mjs"),
+      "node:path": path.join(projectRoot, "browser/shims/path.mjs"),
+      "crypto": path.join(projectRoot, "browser/shims/crypto.mjs"),
+      "node:crypto": path.join(projectRoot, "browser/shims/crypto.mjs"),
+      "buffer": path.join(projectRoot, "browser/shims/buffer.mjs"),
+      "node:buffer": path.join(projectRoot, "browser/shims/buffer.mjs"),
+      "os": path.join(projectRoot, "browser/shims/os.mjs"),
+      "node:os": path.join(projectRoot, "browser/shims/os.mjs"),
+      "process": path.join(projectRoot, "browser/shims/process.mjs"),
+      "node:process": path.join(projectRoot, "browser/shims/process.mjs"),
+      "readline": path.join(projectRoot, "browser/shims/readline.mjs"),
+      "node:readline": path.join(projectRoot, "browser/shims/readline.mjs"),
+      "url": path.join(projectRoot, "browser/shims/url.mjs"),
+      "node:url": path.join(projectRoot, "browser/shims/url.mjs"),
+      "assert": path.join(projectRoot, "browser/shims/assert.mjs"),
+      "node:assert": path.join(projectRoot, "browser/shims/assert.mjs"),
+    };
+
+    build.onResolve({ filter: /^(node:)?(fs|path|crypto|buffer|os|process|readline|url|assert)$/ }, (args) => {
+      if (shims[args.path]) {
+        return { path: shims[args.path] };
+      }
+    });
+  }
+};
+
+// 2. Scan and generate browser/vfs-data.mjs
 console.log("1. Generating VFS data...");
 const vfsFiles = {};
 
@@ -28,8 +61,8 @@ if (fs.existsSync(coreKPath)) {
   vfsFiles["core.k"] = fs.readFileSync(coreKPath, "utf8");
 }
 
-// Add verified k-code files: arithmetics.k, ieee.k
-const verifiedExamples = ["arithmetics.k", "ieee.k"];
+// Add verified k-code files: arithmetics.k, ieee.k, poly.k
+const verifiedExamples = ["arithmetics.k", "ieee.k", "poly.k"];
 const examplesDir = path.join(projectRoot, "Examples");
 for (const filename of verifiedExamples) {
   const fullPath = path.join(examplesDir, filename);
@@ -40,15 +73,48 @@ for (const filename of verifiedExamples) {
   }
 }
 
-// Add verified codecs: json.mjs, utf8.mjs, int.mjs, unit.mjs, ieee.mjs
+// Bundle verified codecs for browser VFS as 100% self-contained ES modules
 const verifiedCodecs = ["json.mjs", "utf8.mjs", "int.mjs", "unit.mjs", "ieee.mjs"];
 const codecsDir = path.join(projectRoot, "codecs");
+
+const browserCodecSdkShim = `
+export { Value, isProduct, isVariant, withPattern } from "../../Value.mjs";
+export function runCodecCLI() {}
+export function encodeToWire() {}
+export function decodeWire() {}
+export function patternFromFilter(script, options) {
+  if (typeof globalThis !== "undefined" && typeof globalThis.patternFromFilter === "function") {
+    return globalThis.patternFromFilter(script, options);
+  }
+  throw new Error("patternFromFilter is not available in browser environment");
+}
+`;
+
 for (const filename of verifiedCodecs) {
   const fullPath = path.join(codecsDir, filename);
   if (fs.existsSync(fullPath) && fs.statSync(fullPath).isFile()) {
-    const content = fs.readFileSync(fullPath, "utf8");
-    vfsFiles[filename] = content;
-    vfsFiles[`codecs/${filename}`] = content;
+    const buildRes = await esbuild.build({
+      entryPoints: [fullPath],
+      bundle: true,
+      format: "esm",
+      write: false,
+      plugins: [{
+        name: "codec-sdk-shim",
+        setup(build) {
+          build.onResolve({ filter: /(codec-sdk|pattern-k)\.mjs$/ }, (args) => ({
+            path: args.path,
+            namespace: "codec-sdk-shim"
+          }));
+          build.onLoad({ filter: /.*/, namespace: "codec-sdk-shim" }, () => ({
+            contents: browserCodecSdkShim,
+            resolveDir: path.join(codecsDir, "runtime")
+          }));
+        }
+      }]
+    });
+    const bundledContent = buildRes.outputFiles[0].text;
+    vfsFiles[filename] = bundledContent;
+    vfsFiles[`codecs/${filename}`] = bundledContent;
   }
 }
 
@@ -59,39 +125,6 @@ const vfsDataPath = path.join(projectRoot, "browser/vfs-data.mjs");
 fs.writeFileSync(vfsDataPath, vfsDataContent, "utf8");
 console.log(`   Generated ${vfsDataPath} with ${Object.keys(vfsFiles).length} files.`);
 
-// 2. Node shims plugin for esbuild
-const nodeShimsPlugin = {
-  name: "node-shims",
-  setup(build) {
-    const shims = {
-      "fs": path.join(projectRoot, "browser/shims/fs.mjs"),
-      "node:fs": path.join(projectRoot, "browser/shims/fs.mjs"),
-      "path": path.join(projectRoot, "browser/shims/path.mjs"),
-      "node:path": path.join(projectRoot, "browser/shims/path.mjs"),
-      "crypto": path.join(projectRoot, "browser/shims/crypto.mjs"),
-      "node:crypto": path.join(projectRoot, "browser/shims/crypto.mjs"),
-      "buffer": path.join(projectRoot, "browser/shims/buffer.mjs"),
-      "node:buffer": path.join(projectRoot, "browser/shims/buffer.mjs"),
-      "os": path.join(projectRoot, "browser/shims/os.mjs"),
-      "node:os": path.join(projectRoot, "browser/shims/os.mjs"),
-      "process": path.join(projectRoot, "browser/shims/process.mjs"),
-      "node:process": path.join(projectRoot, "browser/shims/process.mjs"),
-      "readline": path.join(projectRoot, "browser/shims/readline.mjs"),
-      "node:readline": path.join(projectRoot, "browser/shims/readline.mjs"),
-      "url": path.join(projectRoot, "browser/shims/url.mjs"),
-      "node:url": path.join(projectRoot, "browser/shims/url.mjs"),
-      "assert": path.join(projectRoot, "browser/shims/assert.mjs"),
-      "node:assert": path.join(projectRoot, "browser/shims/assert.mjs"),
-    };
-
-    build.onResolve({ filter: /^(node:)?(fs|path|crypto|buffer|os|process|readline|url|assert)$/ }, (args) => {
-      if (shims[args.path]) {
-        return { path: shims[args.path] };
-      }
-    });
-  }
-};
-
 // 3. Bundle browser/repl-browser.mjs
 console.log("2. Bundling with esbuild...");
 const entryPoint = path.join(projectRoot, "browser/repl-browser.mjs");
@@ -173,21 +206,24 @@ const htmlContent = `<!DOCTYPE html>
 
     /* Header */
     .navbar {
-      height: 48px;
+      min-height: 48px;
+      height: auto;
       background: var(--bg-surface);
       border-bottom: 1px solid var(--border-color);
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: 0 16px;
+      padding: 6px 16px;
       flex-shrink: 0;
-      gap: 12px;
+      flex-wrap: wrap;
+      gap: 8px 12px;
     }
 
     .nav-left {
       display: flex;
       align-items: center;
       gap: 12px;
+      flex-shrink: 0;
     }
 
     .brand {
@@ -199,12 +235,6 @@ const htmlContent = `<!DOCTYPE html>
       user-select: none;
     }
 
-    .brand-lambda {
-      color: var(--color-prompt);
-      font-size: 20px;
-      line-height: 1;
-    }
-
     .brand-name {
       letter-spacing: 0.5px;
     }
@@ -253,8 +283,11 @@ const htmlContent = `<!DOCTYPE html>
     .nav-right {
       display: flex;
       align-items: center;
-      gap: 8px;
-      flex-wrap: nowrap;
+      gap: 6px 8px;
+      flex-wrap: wrap;
+      justify-content: flex-end;
+      flex: 1 1 auto;
+      min-width: 0;
     }
 
     .control-group {
@@ -320,7 +353,8 @@ const htmlContent = `<!DOCTYPE html>
 
     /* Terminal */
     .terminal-main {
-      flex: 1;
+      flex: 1 1 auto;
+      min-height: 0;
       display: flex;
       flex-direction: column;
       overflow: hidden;
@@ -758,7 +792,7 @@ const htmlContent = `<!DOCTYPE html>
 
     /* Welcome banner */
     .welcome-banner {
-      padding: 16px;
+      padding: 12px 16px;
       background: var(--bg-surface);
       border: 1px solid var(--border-color);
       border-radius: 8px;
@@ -766,10 +800,10 @@ const htmlContent = `<!DOCTYPE html>
     }
 
     .welcome-title {
-      font-size: 18px;
+      font-size: 16px;
       font-weight: 700;
       color: var(--color-prompt);
-      margin-bottom: 4px;
+      margin-bottom: 0;
     }
 
     .welcome-desc {
@@ -990,6 +1024,17 @@ const htmlContent = `<!DOCTYPE html>
       font-size: 13px;
     }
 
+    .help-table th {
+      text-align: left;
+      padding: 6px 10px;
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--text-muted);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      border-bottom: 1px solid var(--border-color);
+    }
+
     .help-table td {
       padding: 6px 10px;
       border-bottom: 1px solid rgba(48, 54, 61, 0.4);
@@ -1001,6 +1046,27 @@ const htmlContent = `<!DOCTYPE html>
       color: var(--color-cyan);
     }
 
+    .help-bridge-box {
+      background: rgba(88, 166, 255, 0.08);
+      border: 1px solid rgba(88, 166, 255, 0.25);
+      border-left: 3px solid var(--color-prompt);
+      border-radius: 4px;
+      padding: 10px 14px;
+      margin: 12px 0 16px 0;
+      font-size: 12px;
+      line-height: 1.5;
+    }
+
+    .help-category-title {
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--text-main);
+      margin: 16px 0 6px 0;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+
     .help-section ul {
       padding-left: 24px;
       font-size: 13px;
@@ -1312,6 +1378,12 @@ const htmlContent = `<!DOCTYPE html>
       border-color: rgba(210, 153, 34, 0.3);
     }
 
+    .badge-type.parameterized {
+      background: rgba(187, 128, 179, 0.15);
+      color: var(--color-purple);
+      border-color: rgba(187, 128, 179, 0.3);
+    }
+
     .codecs-table-container {
       background: var(--bg-base);
       border: 1px solid var(--border-color);
@@ -1492,122 +1564,31 @@ const htmlContent = `<!DOCTYPE html>
       min-height: 20px;
     }
 
-    /* Input Popup Modal */
-    .input-popup-dialog {
-      max-width: 580px;
-      width: 90%;
-    }
-
-    .input-popup-body {
-      padding: 16px 20px;
-      display: flex;
-      flex-direction: column;
-      gap: 12px;
-    }
-
-    .input-popup-banner {
-      background: var(--bg-base);
-      border: 1px solid var(--border-color);
-      border-radius: 6px;
-      padding: 10px 14px;
-      font-size: 12px;
-      color: var(--text-main);
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-
-    .input-popup-form-row {
-      display: flex;
-      gap: 12px;
-      flex-wrap: wrap;
-    }
-
-    .input-popup-field {
-      display: flex;
-      flex-direction: column;
-    }
-
-    .input-popup-textarea {
-      width: 100%;
-      background: #090d12;
-      color: var(--text-main);
-      border: 1px solid var(--border-color);
-      border-radius: 6px;
-      padding: 10px 12px;
-      font-family: var(--font-mono);
-      font-size: 13px;
-      line-height: 1.4;
-      resize: vertical;
-      min-height: 90px;
-      max-height: 280px;
-    }
-
-    .input-popup-textarea:focus {
-      border-color: var(--border-focus);
-      box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.2);
-      outline: none;
-    }
-
-    .input-popup-samples {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      font-size: 11px;
-      color: var(--text-muted);
-      flex-wrap: wrap;
-    }
-
-    .samples-list {
-      display: flex;
-      gap: 6px;
-      flex-wrap: wrap;
-    }
-
-    .sample-pill {
-      background: var(--bg-subtle);
-      border: 1px solid var(--border-color);
-      color: var(--color-prompt);
-      padding: 2px 8px;
-      border-radius: 12px;
-      cursor: pointer;
-      font-family: var(--font-mono);
-      font-size: 11px;
-      transition: all 0.15s;
-    }
-
-    .sample-pill:hover {
-      background: rgba(88, 166, 255, 0.2);
-      border-color: var(--border-focus);
-    }
-
-    .input-popup-status {
-      font-size: 12px;
-      min-height: 22px;
-      border-radius: 4px;
-      padding: 4px 8px;
-      background: rgba(22, 27, 34, 0.5);
-    }
-
-    .input-popup-actions {
-      display: flex;
-      justify-content: flex-end;
-      gap: 8px;
-      border-top: 1px solid var(--border-color);
-      padding-top: 12px;
-    }
 
     /* Responsive */
     @media (max-width: 768px) {
       .navbar {
-        height: auto;
-        flex-direction: column;
         padding: 8px 12px;
-        align-items: stretch;
+        gap: 8px;
+      }
+      .nav-left {
+        width: 100%;
+        justify-content: space-between;
       }
       .nav-right {
-        overflow-x: auto;
-        padding-bottom: 4px;
+        width: 100%;
+        justify-content: flex-start;
+        overflow-x: visible;
+        flex-wrap: wrap;
+        gap: 6px;
+      }
+      .control-group {
+        flex: 1 1 180px;
+      }
+      .control-group select {
+        flex: 1 1 auto;
+        max-width: 100%;
+        min-width: 120px;
       }
       .vfs-body {
         flex-direction: column;
@@ -1627,7 +1608,6 @@ const htmlContent = `<!DOCTYPE html>
     <header class="navbar">
       <div class="nav-left">
         <div class="brand">
-          <span class="brand-lambda">λ</span>
           <span class="brand-name">k repl</span>
           <span class="engine-badge">wasm-in-process</span>
         </div>
@@ -1646,27 +1626,28 @@ const htmlContent = `<!DOCTYPE html>
               <option value="core.k">core.k</option>
               <option value="arithmetics.k">arithmetics.k</option>
               <option value="ieee.k">ieee.k</option>
+              <option value="poly.k">poly.k</option>
             </optgroup>
             <optgroup label="Quick Expressions">
-              <option value="expr:10">10</option>
-              <option value="expr:{10 int x, 5 int y} plus">{10 int x, 5 int y} plus</option>
+              <option value="expr:{} | ok">{} | ok</option>
+              <option value="expr:()">()</option>
+              <option value="expr:$ bool = &lt; {} true, {} false &gt;; not = $ bool &lt; / true | false, {} | true &gt; $ bool; {} | true not">not (boolean relation with fallback)</option>
+              <option value="expr:{10 x, 5 y} plus">{10 x, 5 y} plus (bits)</option>
               <option value="expr:1 succ">1 succ</option>
-              <option value="expr:() ()">()</option>
-              <option value="expr::t plus">:t plus</option>
-              <option value="expr::d plus">:d plus</option>
-              <option value="expr::codes">:codes</option>
-              <option value="expr::rels">:rels</option>
-              <option value="expr::val">:val</option>
+              <option value="expr:{10 int x, 5 int y} plus">{10 int x, 5 int y} plus (int)</option>
+              <option value="expr::codes">:codes (list types)</option>
+              <option value="expr::rels">:rels (list relations)</option>
             </optgroup>
-            <optgroup label="Codecs &amp; Serializers">
+            <optgroup label="Codecs &amp; Format Adapters">
               <option value="expr::codecs">:codecs</option>
-              <option value="expr::input">:input (codec popup)</option>
-              <option value="expr::codec load int">:codec load int</option>
-              <option value="expr:10 int">10 int</option>
-              <option value="expr::codec load utf8">:codec load utf8</option>
-              <option value="expr::codec load json">:codec load json</option>
-              <option value="expr::codec load ieee">:codec load ieee</option>
-              <option value="expr::codec load unit">:codec load unit</option>
+              <option value="expr::input">:input (interactive dialog)</option>
+              <option value="expr::codec load int.mjs">:codec load int.mjs</option>
+              <option value="expr::codec load utf8.mjs">:codec load utf8.mjs</option>
+              <option value="expr::codec load json.mjs">:codec load json.mjs</option>
+              <option value="expr::codec load ieee.mjs">:codec load ieee.mjs</option>
+              <option value="expr::codec load unit.mjs">:codec load unit.mjs</option>
+              <option value="expr::input json.mjs {&quot;a&quot;:12,&quot;b&quot;:&quot;hello&quot;}">:input json.mjs {"a":12,"b":"hello"}</option>
+              <option value="expr::input int.mjs [0,1,2]">:input int.mjs [0,1,2]</option>
             </optgroup>
           </select>
           <button id="btn-load-example" class="btn btn-primary">Load</button>
@@ -1684,15 +1665,10 @@ const htmlContent = `<!DOCTYPE html>
         <!-- Codecs Subsystem -->
         <button id="btn-codecs" class="btn btn-secondary" title="Codecs &amp; Custom Serializers (:codecs)">⚙ Codecs <span id="codecs-count-badge" class="badge-count">0</span></button>
 
-        <!-- Codec Input Popup -->
-        <button id="btn-input-popup" class="btn btn-secondary" title="Open Codec Input Popup (:input)">📥 Input</button>
 
         <!-- Clear -->
         <button id="btn-clear" class="btn btn-secondary" title="Clear terminal screen (Ctrl+L)">⌫ Clear</button>
 
-        <!-- Reset -->
-        <button id="btn-reset" class="btn btn-secondary" title="Reset REPL state (:reset)">↺ Reset</button>
-
         <!-- Export -->
         <button id="btn-export" class="btn btn-secondary" title="Export session to .klib">💾 Save .klib</button>
 
@@ -1757,245 +1733,25 @@ const htmlContent = `<!DOCTYPE html>
       <div class="modal-dialog codecs-dialog">
         <div class="modal-header">
           <div style="display: flex; align-items: center; gap: 10px;">
-            <h3>Codecs &amp; Custom Serializers / Deserializers</h3>
+            <h3>Enabled Codecs</h3>
             <span class="engine-badge">:codecs subsystem</span>
           </div>
           <button id="btn-close-codecs" class="btn-close">&times;</button>
         </div>
         <div class="modal-body codecs-body">
-          <!-- Section 1: Standard Built-in Codecs -->
           <div class="codecs-section">
             <div class="codecs-section-header">
-              <h4>Standard Built-in Codecs</h4>
-              <span class="section-subtitle">Click 'Load' to activate bidirectional serialization in the REPL session</span>
+              <h4>Active Codecs in Current Session</h4>
+              <span class="section-subtitle">Codecs format evaluation results and parse input for <code>:input &lt;codec.mjs&gt; [text]</code>. Codecs can only be loaded through <code>:codec load &lt;file.mjs&gt;</code> in the REPL or through the <b>Files</b> explorer.</span>
             </div>
-            <div class="codec-grid">
-              <!-- int card -->
-              <div class="codec-card" id="card-codec-int">
-                <div class="codec-card-top">
-                  <div class="codec-card-title">
-                    <span class="codec-icon">🔢</span>
-                    <span class="codec-name">int</span>
-                    <span id="codec-badge-int" class="codec-status-badge">Inactive</span>
-                  </div>
-                  <div class="codec-types">Target: <span class="badge-type">$int</span></div>
-                  <div class="codec-desc">Arbitrary-precision signed integers serialized to/from sign-magnitude bit sequences.</div>
-                </div>
-                <div class="codec-card-footer">
-                  <div class="codec-caps">
-                    <span class="cap-badge print">Serializer</span>
-                    <span class="cap-badge parse">Deserializer</span>
-                  </div>
-                  <button id="btn-toggle-codec-int" class="btn btn-sm btn-primary">Load</button>
-                </div>
-              </div>
-
-              <!-- utf8 card -->
-              <div class="codec-card" id="card-codec-utf8">
-                <div class="codec-card-top">
-                  <div class="codec-card-title">
-                    <span class="codec-icon">🔤</span>
-                    <span class="codec-name">utf8</span>
-                    <span id="codec-badge-utf8" class="codec-status-badge">Inactive</span>
-                  </div>
-                  <div class="codec-types">Target: <span class="badge-type">$list $byte</span></div>
-                  <div class="codec-desc">UTF-8 strings serialized to/from linked lists of 8-bit bytes ($byte).</div>
-                </div>
-                <div class="codec-card-footer">
-                  <div class="codec-caps">
-                    <span class="cap-badge print">Serializer</span>
-                    <span class="cap-badge parse">Deserializer</span>
-                  </div>
-                  <button id="btn-toggle-codec-utf8" class="btn btn-sm btn-primary">Load</button>
-                </div>
-              </div>
-
-              <!-- json card -->
-              <div class="codec-card" id="card-codec-json">
-                <div class="codec-card-top">
-                  <div class="codec-card-title">
-                    <span class="codec-icon">📋</span>
-                    <span class="codec-name">json</span>
-                    <span id="codec-badge-json" class="codec-status-badge">Inactive</span>
-                  </div>
-                  <div class="codec-types">Target: <span class="badge-type universal">Universal (*)</span></div>
-                  <div class="codec-desc">Arbitrary algebraic products and variants mapped to standard JSON objects and values.</div>
-                </div>
-                <div class="codec-card-footer">
-                  <div class="codec-caps">
-                    <span class="cap-badge print">Serializer</span>
-                    <span class="cap-badge parse">Deserializer</span>
-                  </div>
-                  <button id="btn-toggle-codec-json" class="btn btn-sm btn-primary">Load</button>
-                </div>
-              </div>
-
-              <!-- ieee card -->
-              <div class="codec-card" id="card-codec-ieee">
-                <div class="codec-card-top">
-                  <div class="codec-card-title">
-                    <span class="codec-icon">🧮</span>
-                    <span class="codec-name">ieee</span>
-                    <span id="codec-badge-ieee" class="codec-status-badge">Inactive</span>
-                  </div>
-                  <div class="codec-types">Target: <span class="badge-type">$float</span></div>
-                  <div class="codec-desc">IEEE 754 floating point numbers serialized to sign, exponent, and mantissa fields.</div>
-                </div>
-                <div class="codec-card-footer">
-                  <div class="codec-caps">
-                    <span class="cap-badge print">Serializer</span>
-                    <span class="cap-badge parse">Deserializer</span>
-                  </div>
-                  <button id="btn-toggle-codec-ieee" class="btn btn-sm btn-primary">Load</button>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- Section 2: Active Registered Codecs -->
-          <div class="codecs-section">
-            <div class="codecs-section-header">
-              <h4>Active Registered Codecs in Current Session</h4>
-              <span class="section-subtitle">Active codecs intercept evaluation formatting and :input commands</span>
-            </div>
-            <div class="codecs-table-container">
-              <table class="codec-table">
-                <thead>
-                  <tr>
-                    <th>Codec Name</th>
-                    <th>Target Type Binding</th>
-                    <th>Capabilities</th>
-                    <th>Source</th>
-                    <th>Action</th>
-                  </tr>
-                </thead>
-                <tbody id="active-codecs-tbody">
-                  <!-- dynamically populated by renderCodecsModal() -->
-                </tbody>
-              </table>
-            </div>
-          </div>
-
-          <!-- Section 3: Custom Codec Studio -->
-          <div class="codecs-section">
-            <div class="codecs-section-header">
-              <h4>Custom Serializer &amp; Deserializer Studio</h4>
-              <span class="section-subtitle">Create and test custom domain formats (e.g. Yes/No booleans, Hex, Currency, Dates)</span>
-            </div>
-
-            <div class="codec-studio-box">
-              <div class="studio-top-bar">
-                <div class="studio-field">
-                  <label for="codec-preset-select">Preset Template:</label>
-                  <select id="codec-preset-select">
-                    <option value="yn">Yes / No ($bool)</option>
-                    <option value="hex">Hexadecimal 0x... ($int)</option>
-                    <option value="currency">Currency $XX.YY ($int cents)</option>
-                    <option value="blank">Blank / Custom</option>
-                  </select>
-                </div>
-
-                <div class="studio-field">
-                  <label for="codec-custom-name">Codec Name:</label>
-                  <input type="text" id="codec-custom-name" placeholder="e.g. yn" value="yn">
-                </div>
-
-                <div class="studio-field" style="flex: 1;">
-                  <label for="codec-custom-type">Target Type:</label>
-                  <select id="codec-custom-type">
-                    <!-- populated dynamically from state.typeAliases -->
-                  </select>
-                </div>
-              </div>
-
-              <div class="studio-editors-grid">
-                <div class="studio-editor-pane">
-                  <div class="pane-title">
-                    <span class="cap-badge parse">Deserializer (parse)</span>
-                    <span class="pane-hint"><code>(text, context) =&gt; Value</code></span>
-                  </div>
-                  <textarea id="codec-custom-parse" class="codec-code-area" spellcheck="false" rows="7"></textarea>
-                </div>
-
-                <div class="studio-editor-pane">
-                  <div class="pane-title">
-                    <span class="cap-badge print">Serializer (print)</span>
-                    <span class="pane-hint"><code>(value, context) =&gt; string</code></span>
-                  </div>
-                  <textarea id="codec-custom-print" class="codec-code-area" spellcheck="false" rows="7"></textarea>
-                </div>
-              </div>
-
-              <div class="studio-test-bar">
-                <div class="studio-test-input-wrap">
-                  <label for="codec-test-input">Test Input:</label>
-                  <input type="text" id="codec-test-input" placeholder="e.g. yes or 0xFF or $42.50" value="yes">
-                </div>
-                <button id="btn-test-parse" class="btn btn-secondary btn-sm" title="Test parse function against test input">🧪 Test Parse</button>
-                <button id="btn-test-print" class="btn btn-secondary btn-sm" title="Test print function against current REPL value (:val)">🖨 Test Print</button>
-                <button id="btn-register-codec" class="btn btn-primary btn-sm" title="Register codec in active REPL state">✓ Register in REPL</button>
-                <button id="btn-save-codec-vfs" class="btn btn-secondary btn-sm" title="Export as standalone .mjs file to VFS">💾 Save to VFS</button>
-              </div>
-
-              <div id="codec-studio-status" class="studio-status-box"></div>
+            <div id="enabled-codecs-grid" class="codec-grid">
+              <!-- dynamically populated: cards for only enabled/loaded codecs -->
             </div>
           </div>
         </div>
       </div>
     </div>
 
-    <!-- Input Popup Modal -->
-    <div id="input-popup-modal" class="modal">
-      <div class="modal-dialog input-popup-dialog">
-        <div class="modal-header">
-          <div style="display: flex; align-items: center; gap: 10px;">
-            <h3>📥 Codec Input</h3>
-            <span class="engine-badge">:input directive</span>
-          </div>
-          <button id="btn-close-input-popup" class="btn-close">&times;</button>
-        </div>
-        <div class="modal-body input-popup-body">
-          <div id="input-popup-banner" class="input-popup-banner">
-            <span id="input-popup-hint">Enter input string to deserialize into a K algebraic value:</span>
-          </div>
-
-          <div class="input-popup-form-row">
-            <div class="studio-field" style="flex: 1;">
-              <label for="input-popup-type">Target Type:</label>
-              <select id="input-popup-type">
-                <!-- populated dynamically -->
-              </select>
-            </div>
-            <div class="studio-field" style="flex: 1;">
-              <label for="input-popup-codec">Deserializer Codec:</label>
-              <select id="input-popup-codec">
-                <!-- populated dynamically -->
-              </select>
-            </div>
-          </div>
-
-          <div class="input-popup-field">
-            <div class="pane-title" style="margin-bottom: 6px;">
-              <label for="input-popup-text" style="font-size: 11px; color: var(--text-muted); font-weight: 500;">Input String / Payload:</label>
-              <span class="pane-hint">Enter: submit &bull; Shift+Enter: newline</span>
-            </div>
-            <textarea id="input-popup-text" class="input-popup-textarea" rows="4" spellcheck="false" placeholder="Type or paste input string (e.g. 42, yes, hello, {...})..."></textarea>
-          </div>
-
-          <div id="input-popup-samples" class="input-popup-samples">
-            <span class="samples-label">Quick samples:</span>
-            <div id="input-samples-list" class="samples-list"></div>
-          </div>
-
-          <div id="input-popup-status" class="input-popup-status"></div>
-
-          <div class="input-popup-actions">
-            <button id="btn-cancel-input" class="btn btn-secondary">Cancel</button>
-            <button id="btn-submit-input" class="btn btn-primary">✓ Submit to REPL</button>
-          </div>
-        </div>
-      </div>
-    </div>
 
     <!-- Help Modal -->
     <div id="help-modal" class="modal">
@@ -2005,22 +1761,112 @@ const htmlContent = `<!DOCTYPE html>
           <button id="btn-close-help" class="btn-close">&times;</button>
         </div>
         <div class="modal-body help-body">
+          <div class="help-section">
+            <h4>Language Overview</h4>
+            <p style="margin-bottom: 8px; color: var(--text-muted); line-height: 1.45;">
+              <b>k</b> is a concise language of <b>types</b> and <b>relations</b> (functions) over tree-like (JSON-like) documents. Every expression denotes a relation that transforms an input document into an output document.
+            </p>
+            <p style="margin-bottom: 10px; color: var(--text-muted); line-height: 1.45;">
+              <b>Content-Addressed:</b> Functions and types are identified by their canonical content hash (<code>@...</code>) derived directly from their structure. Local names are just temporary aliases used for recursion and readability.
+            </p>
+
+            <div class="help-category-title">1. Definitions (Local Aliases)</div>
+            <p style="margin-bottom: 6px; color: var(--text-muted); font-size: 12px;">Definitions introduce local aliases for recursion and convenience (terminated by <code>;</code>):</p>
+            <table class="help-table">
+              <thead>
+                <tr><th style="width: 38%;">Syntax</th><th>Description &amp; Example</th></tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td><code>name = relExpr;</code></td>
+                  <td><b>Relation Alias:</b> Defines a local alias for a relation expression.<br><i>e.g.</i> <code>swap = { . y x, . x y };</code></td>
+                </tr>
+                <tr>
+                  <td><code>$ name = typeExpr;</code></td>
+                  <td><b>Type Alias:</b> Defines a local alias for a type schema.<br><i>e.g.</i> <code>$ bool = &lt; {} true, {} false &gt;;</code></td>
+                </tr>
+              </tbody>
+            </table>
+
+            <div class="help-category-title">2. Type Expressions (<code>typeExpr</code>)</div>
+            <p style="margin-bottom: 6px; color: var(--text-muted); font-size: 12px;">Schemas describing tree-like documents:</p>
+            <table class="help-table">
+              <thead>
+                <tr><th style="width: 45%;">Syntax</th><th>Description</th></tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td><code>{ Type_1 label_1, ..., Type_k label_k }</code></td>
+                  <td><b>Product Type:</b> Labeled record of arity <i>k</i> (e.g. <code>{float64 x, string n}</code>; special case: <code>{}</code> is the 0-ary product)</td>
+                </tr>
+                <tr>
+                  <td><code>&lt; Type_1 tag_1, ..., Type_k tag_k &gt;</code></td>
+                  <td><b>Union Type:</b> Tagged sum of <i>k</i> variants (e.g. <code>&lt;int ok, string err&gt;</code>)</td>
+                </tr>
+                <tr>
+                  <td><code>name</code> / <code>@hash</code></td>
+                  <td><b>Type Reference:</b> References a type by local alias or canonical content hash</td>
+                </tr>
+              </tbody>
+            </table>
+
+            <div class="help-category-title">3. Relation Expressions (<code>relExpr</code>)</div>
+            <p style="margin-bottom: 6px; color: var(--text-muted); font-size: 12px;">Functions transforming an input document to an output document:</p>
+            <table class="help-table">
+              <thead>
+                <tr><th style="width: 45%;">Syntax</th><th>Description</th></tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td><code>{ rel_1 label_1, ..., rel_k label_k }</code></td>
+                  <td><b>Product:</b> Evaluates <i>k</i> relations into record fields (special case: <code>{}</code> evaluates 0 relations, producing empty record <code>{}</code>)</td>
+                </tr>
+                <tr>
+                  <td><code>&lt; rel_1, ..., rel_k &gt;</code></td>
+                  <td><b>Union (Choice):</b> Evaluates relations in order of arity <i>k</i> (tries <code>rel_1</code>; if it fails, tries <code>rel_2</code>, ..., <code>rel_k</code>)</td>
+                </tr>
+                <tr>
+                  <td><code>( rel_1 ... rel_k )</code></td>
+                  <td><b>Composition:</b> Sequentially composes <i>k</i> relations (special case: <code>()</code> is the 0-ary composition, denoting identity; parentheses may be omitted when non-empty: <code>f g</code>)</td>
+                </tr>
+                <tr>
+                  <td><code>. label</code></td>
+                  <td><b>Field Projection:</b> Extracts field <code>label</code> from a record</td>
+                </tr>
+                <tr>
+                  <td><code>/ tag</code></td>
+                  <td><b>Variant Branch:</b> Extracts payload of variant <code>tag</code> (fails if tag differs)</td>
+                </tr>
+                <tr>
+                  <td><code>| tag</code></td>
+                  <td><b>Variant Constructor:</b> Wraps document into variant <code>tag</code></td>
+                </tr>
+                <tr>
+                  <td><code>$ typeExpr</code></td>
+                  <td><b>Type Constraint:</b> Asserts input matches <code>typeExpr</code> (compile-time Type Error on mismatch)</td>
+                </tr>
+                <tr>
+                  <td><code>name</code> / <code>@hash</code></td>
+                  <td><b>Relation Reference:</b> Calls a relation by local alias or canonical content hash</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
           <div class="help-section">
             <h4>REPL Commands</h4>
             <table class="help-table">
               <tr><td><code>:load &lt;file&gt;</code></td><td>Load a <code>.k</code> source or <code>.klib</code> library into current state</td></tr>
               <tr><td><code>:t &lt;name&gt;</code></td><td>Display the derived type of relation <code>&lt;name&gt;</code></td></tr>
               <tr><td><code>:d &lt;name&gt;</code></td><td>Display definition of relation <code>&lt;name&gt;</code></td></tr>
-              <tr><td><code>:type &lt;name&gt;</code></td><td>Show or define a type (<code>:type name = &lt;...&gt;</code>)</td></tr>
-              <tr><td><code>:rel &lt;name&gt; = expr</code></td><td>Define a relation alias</td></tr>
-              <tr><td><code>:codes</code></td><td>List all type aliases</td></tr>
+              <tr><td><code>:type &lt;name&gt;</code></td><td>Display definition of type <code>&lt;name&gt;</code></td></tr>
+              <tr><td><code>:codes</code></td><td>List all type aliases and canonical hashes</td></tr>
               <tr><td><code>:rels</code></td><td>List all relation aliases</td></tr>
-              <tr><td><code>:codecs</code></td><td>List all loaded codecs / serializers</td></tr>
-              <tr><td><code>:codec load &lt;name|file&gt;</code></td><td>Load a built-in codec (<code>int</code>, <code>utf8</code>, <code>json</code>, <code>ieee</code>) or file</td></tr>
-              <tr><td><code>:codec define n t b</code></td><td>Define inline custom codec: <code>name type { parse: ..., print: ... }</code></td></tr>
-              <tr><td><code>:codec unload &lt;name&gt;</code></td><td>Unload a registered codec</td></tr>
-              <tr><td><code>:input &lt;type&gt; [codec]</code></td><td>Read next input line using specified codec</td></tr>
-              <tr><td><code>:val</code></td><td>Print current accumulator value</td></tr>
+              <tr><td><code>:codecs</code></td><td>List all loaded format codecs</td></tr>
+              <tr><td><code>:codec load &lt;file.mjs&gt;</code></td><td>Load a codec from file (or load through Files)</td></tr>
+              <tr><td><code>:codec unload &lt;file.mjs&gt;</code></td><td>Unload a loaded codec</td></tr>
+              <tr><td><code>:input &lt;codec.mjs&gt; [text]</code></td><td>Parse input using specified codec (opens dialog if text omitted)</td></tr>
+              <tr><td><code>:time &lt;expr&gt;</code></td><td>Evaluate <code>&lt;expr&gt;</code> and report execution time</td></tr>
               <tr><td><code>:klib &lt;file&gt;</code></td><td>Export current state as a <code>.klib</code> binary file</td></tr>
               <tr><td><code>:reset</code></td><td>Clear state and reset to initial environment</td></tr>
               <tr><td><code>:help</code></td><td>Show command reference</td></tr>
@@ -2031,10 +1877,13 @@ const htmlContent = `<!DOCTYPE html>
             <h4>Expressions &amp; Snippets</h4>
             <p style="margin-bottom: 8px; color: var(--text-muted);">Any raw K expression entered at the prompt is compiled and evaluated on top of the current state using WebAssembly.</p>
             <ul>
-              <li><code>10</code> &mdash; Integer literal (encodes to bit-path via arithmetics)</li>
-              <li><code>{10 int x, 5 int y} plus</code> &mdash; Composition / function call</li>
-              <li><code>succ = {inv x, _ y} _inc;</code> &mdash; Define a relation (ends with <code>;</code>)</li>
-              <li><code>$ bit = &lt; {} 0, {} 1 &gt;;</code> &mdash; Define a type</li>
+              <li><code>{} | ok</code> &mdash; Constant relation producing variant <code>ok</code> with empty document payload <code>{}</code></li>
+              <li><code>not = &lt; / true | false, / false | true &gt;;</code> &mdash; Polymorphic negation via branch projections and ordered choice</li>
+              <li><code>{} | true not</code> &mdash; Compose constant relation <code>{} | true</code> with <code>not</code> (evaluates to <code>{} | false</code>)</li>
+              <li><code>$ bool = &lt; {} true, {} false &gt;;</code> &mdash; Define a boolean union type schema</li>
+              <li><code>not = $ bool &lt; / true | false, {} | true &gt; $ bool;</code> &mdash; Typed boolean negation: guarded by <code>$ bool</code>, defaulting to <code>{} | true</code></li>
+              <li><code>swap = { . y x, . x y };</code> &mdash; Define a product field-swapping relation</li>
+              <li><code>{ {} | ok x, {} | nil y } swap</code> &mdash; Construct a product and pass it through <code>swap</code></li>
             </ul>
           </div>