index.html (15118B)
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="color-scheme" content="light dark"> 8 <meta name="theme-color" content="#f5f2ea" media="(prefers-color-scheme: light)"> 9 <meta name="theme-color" content="#141e1a" media="(prefers-color-scheme: dark)"> 10 <link rel="icon" href="./images/favicon.png" type="image/png" sizes="32x32"> 11 <link rel="icon" href="./images/icon.svg" type="image/svg+xml"> 12 <link rel="apple-touch-icon" href="./images/apple-touch-icon.png" sizes="180x180"> 13 <meta property="og:type" content="website"> 14 <meta property="og:site_name" content="Arboricx"> 15 <meta property="og:title" content="Portable programs. All trees."> 16 <meta property="og:description" content="Write familiar-looking code and explore how it becomes a tree you can run, inspect, and share."> 17 <meta property="og:url" content="https://arbori.cx/"> 18 <meta property="og:image" content="https://arbori.cx/images/preview.png"> 19 <meta property="og:image:type" content="image/png"> 20 <meta property="og:image:width" content="1200"> 21 <meta property="og:image:height" content="630"> 22 <meta property="og:image:alt" content="Arboricx: Portable programs. All trees. Leaf, Stem and Fork diagrams on a warm cream background."> 23 <link rel="help" type="text/plain" href="./llms.txt" title="Documentation for AI assistants"> 24 <title>Arboricx: tricu and portable tree programs</title> 25 <script src="./theme.js"></script> 26 <link rel="stylesheet" href="./style.css"><script type="module" src="./dist/app.js"></script> 27 </head> 28 <body> 29 <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><span id="theme-separator" aria-hidden="true" hidden>|</span><button id="theme-toggle" type="button" aria-label="Switch color theme" hidden><span data-theme-icon aria-hidden="true">☾</span></button></nav></header> 30 <main> 31 <section class="hero wrap" data-inspector-background> 32 <p class="eyebrow">Arboricx / <span class="pronunciation" aria-label="arbor-icks">ˈɑːrbərɪks</span></p> 33 <h1>Portable programs.<br><span>All trees.</span></h1> 34 <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> 35 <div class="shapes" aria-label="The three tree shapes"> 36 <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> 37 <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> 38 <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> 39 </div> 40 <a class="button primary" href="#editor">Start writing tricu ↓</a> 41 </section> 42 <section id="editor" class="workspace" aria-label="tricu editor"> 43 <div class="editor-toolbar" data-inspector-background> 44 <div class="toolbar-selection"><label for="program-picker">Program</label><select id="program-picker" disabled><option value="">Loading Names and values…</option></select></div> 45 <div class="toolbar-actions"><button id="add-import" disabled>Libraries</button><button id="stop" disabled hidden>Stop</button><button id="reload-playground" title="Reload the page to restart all runtimes. Local drafts, output and opened modules are cleared.">Restart</button><button id="settings-toggle" aria-controls="settings-panel" aria-expanded="false">Settings</button></div> 46 <span id="status" role="status">Loading Names and values</span> 47 </div> 48 <div id="editor-body" class="editor-body"> 49 <div class="editor-main" data-inspector-background> 50 <section class="source-panel" aria-labelledby="source-title"> 51 <div class="source-heading"><h2 id="source-title">Source</h2><span id="source-label">tricu / stable</span></div> 52 <p id="authorship">Published package</p><p id="source-availability" class="hint" hidden></p> 53 <label class="sr-only" id="source-editor-label">tricu source (up to 16,384 characters)</label> 54 <div id="source-editor" hidden></div> 55 <pre id="source-notes"><code id="source">Loading Names and values…</code></pre> 56 <section id="package-definitions" hidden><label for="package-definition-search">Search stored definitions</label><input id="package-definition-search" type="search"><div id="package-definition-list"></div><div id="package-definition-view"></div></section> 57 <p id="operation-diagnostic" class="error" role="status" hidden></p> 58 <p id="compile-diagnostic" class="error" role="status" hidden></p><p id="compile-activity" class="hint" role="status" hidden></p> 59 <div class="source-actions"><button id="reload-package" hidden>Reload package</button><button id="restore-source" disabled hidden>Restore published source</button><span class="hint">Edits compile after a pause. Underlined names inspect; Run IO executes.</span></div> 60 </section> 61 </div> 62 <aside id="settings-panel" aria-labelledby="settings-title" hidden> 63 <div class="inspector-heading"><h2 id="settings-title">Editor settings</h2><button id="settings-close" aria-label="Close settings">Close</button></div> 64 <section><h3>Execution</h3> 65 <p class="hint">Click an underlined definition name to inspect. Recognized IO programs offer an explicit Run IO button. Stop discards the active runtime.</p> 66 <button id="reset">Clear inspection</button><button id="share" disabled>Copy published selection link</button> 67 </section> 68 <section id="package-selection"><h3>Published package</h3> 69 <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> 70 <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> 71 <button id="download-bundle" disabled>Download .arboricx</button></div> 72 <details><summary>Stored definition export</summary><p class="hint">Export original package records without reducing the definition or running IO.</p><label for="stored-definition">Definition</label><select id="stored-definition"></select><label for="stored-format">Format</label><select id="stored-format"><option value="tricu">tricu source</option><option value="triangle">△ source</option><option value="dag">DAG</option><option value="ternary">Ternary</option></select><button id="stored-download" disabled>Download stored definition</button><p id="stored-status" role="status"></p></details> 73 <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> 74 </section> 75 <section id="local-modules"><h3>Local modules</h3> 76 <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> 77 <label for="local-module-file">Open local module</label><input id="local-module-file" type="file" accept=".arboricx"> 78 <button id="cancel-local-module" hidden>Cancel file check</button> 79 <p id="local-module-status" class="hint" role="status"></p><ul id="local-module-list"></ul> 80 <button id="export-compiled-module" disabled>Export compiled module</button> 81 <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> 82 <p id="compiled-module-status" class="hint" role="status"></p> 83 </section> 84 <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> 85 <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> 86 <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 can be inspected without source; downloads use complete observed trees. Stop remains available during computation; browser memory is finite.</p></details> 87 </aside> 88 </div> 89 </section> 90 <div id="settings-backdrop" hidden></div> 91 <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"> 92 <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> 93 <article><h3>A web server made of trees.</h3><p>This Playground gets its demo, library and compiler bundles from a live Arboricx content store server written in tricu. When you load a demo, import a published library or compile your own source, this page fetches the pinned bundles from that server and verifies their hashes before using them.</p><p><a href="https://git.eversole.co/James/tricu/file/lib/arboricx/server.tri.html">Explore the registry server</a></p></article> 94 <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> 95 <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> 96 <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> 97 <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> 98 </div></section> 99 </main> 100 <dialog id="import-dialog" aria-labelledby="import-dialog-title"> 101 <div class="import-heading"><h2 id="import-dialog-title">Explore libraries</h2><button id="import-cancel">Close</button></div> 102 <div id="import-content" class="import-content"> 103 <div id="import-browse"><label for="import-search">Search libraries or exported names</label><input id="import-search" type="search" autocomplete="off"></div> 104 <div id="import-results" aria-label="Libraries"></div> 105 <section id="import-detail" hidden> 106 <button id="import-back">← Back to libraries</button><h3 id="import-title" tabindex="-1"></h3><p id="import-description"></p> 107 <label id="import-version-label" for="import-version">Version</label><select id="import-version"></select> 108 <p id="import-definition" class="hint"></p><button id="try-library">Try in Playground</button><button id="copy-qualified" hidden>Copy qualified name</button> 109 <label for="import-alias">Import as</label><input id="import-alias" maxlength="128" spellcheck="false" autocomplete="off"> 110 <pre id="import-preview" tabindex="0"></pre> 111 <p><a id="import-reference" target="_blank" rel="noopener">Calling conventions and source reference ↗</a></p> 112 <label for="import-export-search">Filter exports</label><input id="import-export-search" type="search" autocomplete="off"><pre id="import-exports" tabindex="0"></pre> 113 <details id="import-usage-details"><summary>Calling conventions</summary><p id="import-usage"></p></details> 114 <details id="import-example-details"><summary>Complete example</summary><pre id="import-example"></pre></details> 115 </section> 116 </div> 117 <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> 118 <p id="import-status" role="status" tabindex="0"></p> 119 </dialog><noscript><p class="wrap">Enable JavaScript to use the editor.</p></noscript> 120 <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> 121 </body> 122 </html>