index.html (17395B)
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"> 5 <meta name="description" content="Explore Tree Calculus through tricu: familiar syntax, portable Arboricx packages, interactive IO and a self-hosting compiler."> 6 <link rel="canonical" href="https://arbori.cx/"> 7 <meta name="theme-color" content="#f5f2ea"> 8 <link rel="icon" href="./images/favicon.png" type="image/png" sizes="32x32"> 9 <link rel="icon" href="./images/icon.svg" type="image/svg+xml"> 10 <link rel="apple-touch-icon" href="./images/apple-touch-icon.png" sizes="180x180"> 11 <meta property="og:type" content="website"> 12 <meta property="og:site_name" content="Arboricx"> 13 <meta property="og:title" content="Portable programs. All trees."> 14 <meta property="og:description" content="Write familiar-looking code and explore how it becomes a tree you can run, inspect, and share."> 15 <meta property="og:url" content="https://arbori.cx/"> 16 <meta property="og:image" content="https://arbori.cx/images/preview.png"> 17 <meta property="og:image:type" content="image/png"> 18 <meta property="og:image:width" content="1200"> 19 <meta property="og:image:height" content="630"> 20 <meta property="og:image:alt" content="Arboricx: Portable programs. All trees. Leaf, Stem and Fork diagrams on a warm cream background."> 21 <link rel="help" type="text/plain" href="./llms.txt" title="Documentation for AI assistants"> 22 <title>Arboricx: tricu and portable tree programs</title> 23 <link rel="stylesheet" href="./style.css"><script type="module" src="./dist/app.js"></script> 24 </head> 25 <body> 26 <header class="wrap" data-inspector-background><a class="wordmark" href="#">arbori.cx<span> / portable trees</span></a><nav aria-label="Main"><a href="https://git.eversole.co/James/tricu">Source</a></nav></header> 27 <main> 28 <section class="hero wrap" data-inspector-background> 29 <p class="eyebrow">Arboricx / <span class="pronunciation" aria-label="arbor-icks">ˈɑːrbərɪks</span></p> 30 <h1>Portable programs.<br><span>All trees.</span></h1> 31 <p class="intro">Tree Calculus makes functions and data out of the same three shapes. tricu builds a language around them, and Arboricx carries the resulting programs between hosts. Write familiar-looking code and explore how it becomes a tree you can run, inspect, and share.</p> 32 <div class="shapes" aria-label="The three tree shapes"> 33 <div><svg viewBox="0 0 100 80" aria-hidden="true"><circle cx="50" cy="25" r="7"/></svg><strong>Leaf</strong><code>t</code></div> 34 <div><svg viewBox="0 0 100 80" aria-hidden="true"><path d="M50 25L50 62"/><circle cx="50" cy="25" r="7"/><circle cx="50" cy="62" r="7"/></svg><strong>Stem</strong><code>t x</code></div> 35 <div><svg viewBox="0 0 100 80" aria-hidden="true"><path d="M50 25L25 62M50 25L75 62"/><circle cx="50" cy="25" r="7"/><circle cx="25" cy="62" r="7"/><circle cx="75" cy="62" r="7"/></svg><strong>Fork</strong><code>t x y</code></div> 36 </div> 37 <a class="button primary" href="#editor">Start writing tricu ↓</a> 38 </section> 39 <section id="editor" class="workspace" aria-label="tricu editor"> 40 <div class="editor-toolbar" data-inspector-background> 41 <div class="toolbar-selection"><label for="program-picker">Program</label><select id="program-picker" disabled><option value="">Loading Names and values…</option></select></div> 42 <div class="toolbar-runtime"><label for="runtime-backend">Runtime</label><select id="runtime-backend"><option value="haskell-wasm" selected>Haskell</option><option value="zig-wasm">Zig</option></select></div> 43 <div class="toolbar-actions"><button id="stop" disabled hidden>Stop</button><button id="settings-toggle" aria-controls="settings-panel" aria-expanded="false">Settings</button></div> 44 <span id="status" role="status">Loading Names and values</span> 45 </div> 46 <div id="editor-body" class="editor-body"> 47 <div class="editor-main" data-inspector-background> 48 <section class="source-panel" aria-labelledby="source-title"> 49 <div class="source-heading"><h2 id="source-title">Source</h2><span id="source-label">tricu / stable</span></div> 50 <p id="authorship">Published package</p><p id="source-availability" class="hint" hidden></p> 51 <label class="sr-only" for="source-editor">tricu source (up to 16,384 characters)</label> 52 <textarea id="source-editor" rows="18" maxlength="32768" spellcheck="false" autocapitalize="off" autocorrect="off" hidden></textarea> 53 <pre id="source-notes"><code id="source">Loading Names and values…</code></pre> 54 <p id="compile-diagnostic" class="error" role="status" hidden></p><p id="compile-activity" class="hint" role="status" hidden></p> 55 <div class="source-actions"><button id="add-import" disabled hidden>Add import…</button><button id="restore-source" disabled hidden>Restore published source</button><span class="hint">Edits compile after a pause. Evaluation is always explicit.</span></div> 56 </section> 57 <section class="expression-dock" aria-label="Evaluation"> 58 <div class="output-toolbar" role="group" aria-label="Evaluation settings"> 59 <div><label for="output-target">Output</label><select id="output-target"><option value="result">Evaluated result</option><option value="definition">Stored definition</option></select></div> 60 <div><label for="export" title="Select a stored definition or seed the expression with a call">Definition</label><select id="export" disabled></select></div> 61 <div><label for="output-type">Interpretation</label><select id="output-type"><option value="tricu">tricu · t source</option><option value="triangle">△ source</option><option value="dag">DAG · shared △</option><option value="ternary">Ternary</option><option value="string">Text</option><option value="number">Natural number</option><option value="bool">Boolean</option><option value="bytes">Bytes</option><option value="record">Scalar record</option></select></div> 62 <div><label for="mode">Execution</label><select id="mode"><option value="pure">Pure value</option><option value="io">Text / line IO</option></select></div> 63 </div> 64 <div id="expression-inputs"><label for="expression-editor">Expression <span>· use the loaded definitions</span></label><textarea id="expression-editor" rows="3" maxlength="32768" spellcheck="false" autocapitalize="off" autocorrect="off" aria-describedby="expression-help"></textarea><p id="expression-help" class="hint">Use literals, applications and bindings from the current scope. Declare imports in the source editor.</p></div> 65 <div id="guided-inputs" hidden><div class="argument-heading"><h3>Structured arguments</h3><button id="add-argument">Add argument</button></div><div id="argument-fields"></div></div> 66 <p id="draft-run-note" class="hint" role="status" hidden></p> 67 <div class="evaluation-actions"><button id="run" class="primary" disabled>Evaluate</button><button id="stop-run" disabled>Stop</button></div> 68 </section> 69 <section class="output-panel" aria-label="Output"> 70 <p id="result-stale" class="hint" role="status" hidden>Previous output · source or settings changed. Evaluate or show the definition to refresh.</p> 71 <p id="output-provenance" class="hint" role="status"></p> 72 <pre id="result" tabindex="0" aria-label="Result output"></pre> 73 <div class="output-actions"><button id="copy-output" disabled>Copy</button><button id="download-output" disabled>Download</button><button id="next" disabled hidden>Next IO action</button></div> 74 <section id="io-console" aria-label="Program IO" hidden><h3>Program IO</h3><pre id="terminal" tabindex="0" aria-label="Program output"></pre><form id="input-form" hidden><label for="line-input">One line, up to 256 characters</label><div class="input-row"><input id="line-input" maxlength="512" autocomplete="off"><button type="submit">Send ↵</button></div></form></section> 75 <details class="trace-panel"><summary>Interaction trace</summary><p id="trace-empty" class="hint">IO actions and responses appear here.</p><ol id="trace"></ol></details> 76 </section> 77 </div> 78 <aside id="settings-panel" aria-labelledby="settings-title" hidden> 79 <div class="inspector-heading"><h2 id="settings-title">Editor settings</h2><button id="settings-close" aria-label="Close settings">Close</button></div> 80 <section><h3>Execution</h3> 81 <label class="check"><input id="use-guided-inputs" type="checkbox"> Use structured arguments</label> 82 <label class="check"><input id="step-mode" type="checkbox"> Pause before each IO action</label> 83 <p class="hint">Stop terminates active work. Evaluate runs the compiled program.</p> 84 <button id="reset">Clear output</button><button id="share" disabled>Copy published selection link</button> 85 </section> 86 <details><summary>Structured argument encoding</summary><p class="hint">One literal per field: 42, "hello", [1 2 3], or (t t t). No fields means no arguments. Use raw JSON for exact wire kinds or deeply nested trees.</p><label class="check"><input id="raw-arguments" type="checkbox"> Raw typed JSON</label><label class="sr-only" for="arguments">Typed argument array</label><textarea id="arguments" rows="5" maxlength="16000" spellcheck="false" hidden>[]</textarea></details> 87 <section id="package-selection"><h3>Published package</h3> 88 <div id="package-toolbar" hidden><div id="program-release" hidden><label for="package-version">Version</label><div class="input-row"><select id="package-version"></select><button id="load-release" disabled>Load</button></div></div> 89 <form id="program-hash" hidden><label for="bundle-hash">Bundle SHA-256</label><div class="input-row"><input id="bundle-hash" maxlength="64" spellcheck="false" autocomplete="off" aria-describedby="bundle-hash-help"><button id="load">Load</button></div></form> 90 <button id="download-bundle" disabled>Download .arboricx</button></div> 91 <p id="bundle-hash-help" class="hint" hidden>Load a published executable by its exact 64-character hash.</p><p id="bundle-download-status" class="hint" role="status"></p><p id="release-info" class="hint"></p><p id="module-import-help" class="hint" hidden>Import in source: <code id="module-import-source"></code> (then declare <code>!export</code>).</p><p id="package-info" class="hint">Verifying package…</p> 92 </section> 93 <section id="local-modules"><h3>Local modules</h3> 94 <p class="hint">Open a .arboricx file locally and import it by manifest hash. Reloading clears the collection. Limits: 16 MiB/file, 32 modules / 64 MiB total.</p> 95 <label for="local-module-file">Open local module</label><input id="local-module-file" type="file" accept=".arboricx"> 96 <button id="cancel-local-module" hidden>Cancel file check</button> 97 <p id="local-module-status" class="hint" role="status"></p><ul id="local-module-list"></ul> 98 <button id="export-compiled-module" disabled>Export compiled module</button> 99 <p class="hint">Exports the current draft's public interface as executable trees. Export may take time or diverge; Stop remains available. Exports must be complete and within size limits.</p> 100 <p id="compiled-module-status" class="hint" role="status"></p> 101 </section> 102 <section><h3>Scratch examples</h3><p class="hint">Standalone source with contract helpers, or native modules with explicit imports. Choosing an example replaces the editor contents.</p><div class="demo-picker"><button data-compiler-example="identity">Identity</button><button data-compiler-example="contracts">Checked identity</button><button data-compiler-example="pair">Pair</button><button data-compiler-example="definitions">Definitions</button><button data-compiler-example="input">Line input</button><button data-compiler-example="module">Module imports</button></div></section> 103 <section><h3>Runtime / compilation</h3><button id="compile" disabled hidden>Compile now</button><p id="compiler-stats" class="hint">Compilation starts after an editing pause.</p><p class="hint">Source stays in this page. Copy it before leaving.</p></section> 104 <details><summary>Output boundaries</summary><p class="hint">Tree results demand a complete finite tree, up to 100,000 observed nodes. Expanded files allow 32 MiB; DAG files allow 128 MiB. Export requires a complete snapshot. Stored definitions use the original bundle records. Stop remains available during computation; browser memory is finite.</p></details> 105 </aside> 106 </div> 107 </section> 108 <div id="settings-backdrop" hidden></div> 109 <section id="ecosystem" class="explanation wrap" data-inspector-background><p class="eyebrow">One calculus, a growing ecosystem</p><h2>Trees all the way down.</h2><div class="explanation-grid"> 110 <article><h3>Portable Arboricx packages.</h3><p>Arboricx bundles hold named exports and shared tree structure. Content-addressed storage gives trees and modules stable identities. Package a function, move it to another compatible host and apply it there.</p><p><a href="https://git.eversole.co/James/tricu/file/docs/modules.md.html">Explore modules and packages</a></p></article> 111 <article><h3>A web server made of trees.</h3><p>The ecosystem includes HTTP support and an Arboricx registry written in tricu. Tree programs handle requests, build responses and work with the content store through host IO. The same language used for the examples can serve its own packages.</p><p><a href="https://git.eversole.co/James/tricu/file/lib/arboricx/server.tri.html">Explore the registry server</a></p></article> 112 <article><h3>A compiler that compiles itself.</h3><p>Lexing, parsing, name resolution and lambda elimination are tricu programs. The compiler can compile its own source into Arboricx packages. The editor runs that packaged compiler so you can follow the journey from source to tree.</p><p><a href="https://git.eversole.co/James/tricu/file/docs/compiler.md.html">Explore the self-hosting compiler</a></p></article> 113 <article><h3>Programs that inspect programs.</h3><p>Tree Calculus combines computation with structural inspection. Leaf, Stem and Fork represent both functions and data. A program can examine another program's shape, count its nodes or compare its structure. Try the tree microscope in the editor.</p><p><a href="https://treecalcul.us/">Explore Tree Calculus</a></p></article> 114 <article><h3>IO as an interaction tree.</h3><p>A tricu program describes actions and their continuations as trees. The host responds to each request and execution proceeds with that response. The conversation example puts text output, line input and composition into practice.</p><p><a href="https://git.eversole.co/James/tricu/file/lib/io.tri.html">Explore the IO library</a></p></article> 115 <article><h3>Familiar syntax.</h3><p>tricu brings names, lambdas, recursion, pattern matching and familiar literals to Tree Calculus. Write <code>id = (x : x)</code>, compose functions and organize modules. The compiler turns that source into executable trees.</p><p><a href="https://git.eversole.co/James/tricu/file/docs/language.md.html">Read the source language guide</a></p></article> 116 </div></section> 117 </main> 118 <dialog id="import-dialog" aria-labelledby="import-dialog-title"> 119 <div class="import-heading"><h2 id="import-dialog-title">Add a library</h2><button id="import-cancel">Cancel</button></div> 120 <div id="import-content" class="import-content"> 121 <div id="import-browse"><label for="import-search">Search libraries or exported names</label><input id="import-search" type="search" autocomplete="off"></div> 122 <div id="import-results" aria-label="Libraries"></div> 123 <section id="import-detail" hidden> 124 <button id="import-back">← Back to libraries</button><h3 id="import-title" tabindex="-1"></h3><p id="import-description"></p> 125 <label id="import-version-label" for="import-version">Version</label><select id="import-version"></select> 126 <label for="import-alias">Import as</label><input id="import-alias" maxlength="128" spellcheck="false" autocomplete="off"> 127 <pre id="import-preview" tabindex="0"></pre> 128 <p><a id="import-reference" target="_blank" rel="noopener">Calling conventions and source reference ↗</a></p> 129 <label for="import-export-search">Filter exports</label><input id="import-export-search" type="search" autocomplete="off"><pre id="import-exports" tabindex="0"></pre> 130 <details id="import-usage-details"><summary>Calling conventions</summary><p id="import-usage"></p></details> 131 <details id="import-example-details"><summary>Complete example</summary><pre id="import-example"></pre></details> 132 </section> 133 </div> 134 <div id="import-actions" class="import-actions" hidden><button id="copy-import">Copy import</button><button id="insert-import" class="primary" disabled>Insert import</button></div> 135 <p id="import-status" role="status" tabindex="0"></p> 136 </dialog><noscript><p class="wrap">Enable JavaScript to use the editor.</p></noscript> 137 <footer class="wrap" data-inspector-background><p>Copyright 2026 <a href="https://eversole.co">James Eversole</a> · <a href="mailto:james@eversole.co">Email feedback</a> · <a href="./llms.txt">For AI assistants</a></p></footer> 138 </body> 139 </html>