tjs-lang 0.6.45 → 0.7.4

package/docs/diagrams/icon-riff-2.svg

@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Riff 2: "The Prism Owl" — the owl's screen/face has a prism effect
+     suggesting one input (TS) becomes multiple outputs. The three colored
+     beams represent the three pillars. Background shifts from the animation's
+     day palette to something more energetic. -->
+<svg viewBox="0 0 48 48" width="48" height="48" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    .bg { fill: #181340; }
+    .screen { fill: #ffffff; stroke: #000; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
+    .outline { fill: none; stroke: #000; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
+    .wing { fill: #6e6e8e; stroke: #000; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
+    .body { fill: #9e9ebe; stroke: #000; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
+    .feet { fill: none; stroke: #fbed21; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
+    .beam-red { stroke: #ff1c24; stroke-width: 1.5; fill: none; stroke-linecap: round; }
+    .beam-green { stroke: #006736; stroke-width: 1.5; fill: none; stroke-linecap: round; }
+    .beam-blue { stroke: #3da8f4; stroke-width: 1.5; fill: none; stroke-linecap: round; }
+    .beam-in { stroke: #ffffff; stroke-width: 1.5; fill: none; stroke-linecap: round; opacity: 0.7; }
+    .star { fill: #fbed21; }
+  </style>
+
+  <!-- Background: dark navy (night/moon from animation) -->
+  <rect width="48" height="48" rx="8" class="bg"/>
+
+  <!-- Stars -->
+  <circle cx="5" cy="6" r="1" class="star"/>
+  <circle cx="42" cy="4" r="0.8" class="star"/>
+  <circle cx="38" cy="10" r="0.6" class="star"/>
+  <circle cx="3" cy="14" r="0.7" class="star"/>
+  <circle cx="44" cy="18" r="0.5" class="star"/>
+
+  <!-- Left wing -->
+  <path d="M7.5,16 C4.5,16,2,18.5,2,21.5 C2,24,4,26,6.5,26 L6.6,26 C7.4,26,8,26.6,8,27.4 C8,29.9,10.1,32,12.6,32 L16,32 C18.6,32,20.7,29.9,20.7,27.3 L20.7,21.4 C20.7,18.4,18.3,16,15.3,16 Z" class="wing"/>
+
+  <!-- Right wing -->
+  <path d="M40.5,16 C43.5,16,46,18.5,46,21.5 C46,24,44,26,41.5,26 L41.4,26 C40.6,26,40,26.6,40,27.4 C40,29.9,37.9,32,35.4,32 L32,32 C29.4,32,27.3,29.9,27.3,27.3 L27.3,21.4 C27.3,18.4,29.7,16,32.7,16 Z" class="wing"/>
+
+  <!-- Body -->
+  <path d="M17,29 L33,29 C33,34.5,28.5,39,23,39 C19.7,39,17,36.3,17,33 Z" class="body"/>
+
+  <!-- Feet (golden like sun) -->
+  <path d="M20,43 L18,41 L16,43" class="feet"/>
+  <path d="M32,43 L30,41 L28,43" class="feet"/>
+
+  <!-- Head/Screen -->
+  <rect x="6" y="6" width="30" height="23" rx="4" class="screen"/>
+
+  <!-- Input beam (white, entering left of screen) -->
+  <line x1="2" y1="17" x2="14" y2="17" class="beam-in"/>
+
+  <!-- Prism triangle on the screen face -->
+  <polygon points="14,11 14,23 25,17" fill="none" stroke="#000" stroke-width="1.5" stroke-linejoin="round"/>
+
+  <!-- Three output beams exiting right -->
+  <line x1="25" y1="14" x2="35" y2="10" class="beam-red"/>
+  <line x1="25" y1="17" x2="36" y2="17" class="beam-green"/>
+  <line x1="25" y1="20" x2="35" y2="24" class="beam-blue"/>
+
+  <!-- Tiny labels at beam ends -->
+  <text x="36" y="11" fill="#ff1c24" font-size="3.5" font-family="system-ui, sans-serif" font-weight="700">TS</text>
+  <text x="37" y="18" fill="#006736" font-size="3.5" font-family="system-ui, sans-serif" font-weight="700">TJS</text>
+  <text x="36" y="26" fill="#3da8f4" font-size="3.5" font-family="system-ui, sans-serif" font-weight="700">AJS</text>
+</svg>

package/docs/diagrams/icon-riff-3.svg

@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Riff 3: "Dawn Owl" — transitional sky (the animation goes day->storm->night)
+     This captures the sunrise moment. The owl's screen shows { } braces,
+     the most universal "code" symbol. Warm gradient background.
+     The owl is the same character but the palette says "new era." -->
+<svg viewBox="0 0 48 48" width="48" height="48" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#3da8f4"/>
+      <stop offset="60%" stop-color="#fdbe52"/>
+      <stop offset="100%" stop-color="#fbed21"/>
+    </linearGradient>
+  </defs>
+  <style>
+    .screen { fill: #ffffff; stroke: #000; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
+    .outline { fill: none; stroke: #000; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
+    .wing { fill: #9e9e9e; stroke: #000; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
+    .body { fill: #e4e4e4; stroke: #000; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
+    .feet { fill: none; stroke: #000; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
+    .code { fill: none; stroke: #181340; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+    .eye-line { fill: none; stroke: #000; stroke-width: 2; stroke-linecap: round; }
+    .sun-glow { fill: #fbed21; opacity: 0.3; }
+  </style>
+
+  <!-- Background: dawn gradient -->
+  <rect width="48" height="48" rx="8" fill="url(#sky)"/>
+
+  <!-- Sun peeking up from bottom -->
+  <circle cx="24" cy="48" r="12" class="sun-glow"/>
+  <circle cx="24" cy="48" r="8" fill="#fbed21" opacity="0.5"/>
+
+  <!-- Left wing -->
+  <path d="M7.5,16 C4.5,16,2,18.5,2,21.5 C2,24,4,26,6.5,26 L6.6,26 C7.4,26,8,26.6,8,27.4 C8,29.9,10.1,32,12.6,32 L16,32 C18.6,32,20.7,29.9,20.7,27.3 L20.7,21.4 C20.7,18.4,18.3,16,15.3,16 Z" class="wing"/>
+
+  <!-- Right wing -->
+  <path d="M40.5,16 C43.5,16,46,18.5,46,21.5 C46,24,44,26,41.5,26 L41.4,26 C40.6,26,40,26.6,40,27.4 C40,29.9,37.9,32,35.4,32 L32,32 C29.4,32,27.3,29.9,27.3,27.3 L27.3,21.4 C27.3,18.4,29.7,16,32.7,16 Z" class="wing"/>
+
+  <!-- Body -->
+  <path d="M17,29 L33,29 C33,34.5,28.5,39,23,39 C19.7,39,17,36.3,17,33 Z" class="body"/>
+
+  <!-- Feet -->
+  <path d="M20,43 L18,41 L16,43" class="feet"/>
+  <path d="M32,43 L30,41 L28,43" class="feet"/>
+
+  <!-- Rain lines (the storm is passing) -->
+  <path d="M35,35 L32.2,35 L32.2,37.8" class="feet"/>
+
+  <!-- Head/Screen -->
+  <rect x="6" y="6" width="30" height="23" rx="4" class="screen"/>
+
+  <!-- Nose line -->
+  <line x1="21" y1="11" x2="21" y2="23" class="outline"/>
+
+  <!-- Eyes — simple lines, owl is calm/confident -->
+  <line x1="11" y1="16" x2="17" y2="16" class="eye-line"/>
+  <line x1="25" y1="16" x2="31" y2="16" class="eye-line"/>
+
+  <!-- Code braces on forehead — { } -->
+  <path d="M13,8 C11.5,8 11,9 11,10 C11,11 10.5,11.5 10,11.5 C10.5,11.5 11,12 11,13 C11,14 11.5,15 13,15" class="code"/>
+  <path d="M29,8 C30.5,8 31,9 31,10 C31,11 31.5,11.5 32,11.5 C31.5,11.5 31,12 31,13 C31,14 30.5,15 29,15" class="code"/>
+</svg>

package/docs/diagrams/platform-overview.svg

@@ -0,0 +1,114 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 350" font-family="system-ui, -apple-system, sans-serif">
+  <style>
+    /* TJS Brand Palette (from icon + Lottie animation) */
+    :root {
+      --blue: #3da8f4;
+      --navy: #181340;
+      --yellow: #fbed21;
+      --amber: #fdbe52;
+      --red: #ff1c24;
+      --green: #006736;
+      --gray-light: #e4e4e4;
+      --gray-mid: #9e9e9e;
+    }
+
+    .bg { fill: #fafafa; stroke: #e4e4e4; }
+    .title-bar { fill: #181340; }
+    .title-text { fill: white; font-size: 20px; font-weight: 700; }
+
+    .col-bg { fill: white; stroke: #e4e4e4; }
+    .col-header { fill: #3da8f4; }
+    .col-header-text { fill: white; font-size: 14px; font-weight: 600; }
+
+    .box-ts { fill: #fff3f3; stroke: #ff1c24; }
+    .box-ts text { fill: #cc1118; }
+    .box-tjs { fill: #f0fff5; stroke: #006736; }
+    .box-tjs text { fill: #005028; }
+    .box-js { fill: #fffbe6; stroke: #fdbe52; }
+    .box-js text { fill: #8b6914; }
+    .box-neutral { fill: #f5f5f5; stroke: #9e9e9e; }
+    .box-neutral text { fill: #444; }
+    .box-safe { fill: #eef6ff; stroke: #3da8f4; }
+    .box-safe text { fill: #1a6ab5; }
+
+    .arrow-text { fill: #9e9e9e; font-size: 18px; }
+    .label { font-size: 13px; font-weight: 500; }
+    .label-bold { font-size: 13px; font-weight: 600; }
+    .label-sm { font-size: 10px; }
+    .label-lg { font-size: 12px; font-weight: 500; }
+
+    .shadow { filter: drop-shadow(0 2px 3px rgba(0,0,0,0.1)); }
+  </style>
+
+  <!-- Background -->
+  <rect width="720" height="340" rx="12" class="bg"/>
+
+  <!-- Title bar -->
+  <rect width="720" height="48" rx="12" class="title-bar"/>
+  <rect y="36" width="720" height="12" class="title-bar"/>
+  <text x="360" y="32" text-anchor="middle" class="title-text">TJS Platform</text>
+
+  <!-- Column: Language -->
+  <g class="shadow">
+    <rect x="20" y="68" width="220" height="262" rx="8" class="col-bg"/>
+  </g>
+  <rect x="20" y="68" width="220" height="36" rx="8" class="col-header"/>
+  <rect x="20" y="92" width="220" height="12" class="col-header"/>
+  <text x="130" y="92" text-anchor="middle" class="col-header-text">Language</text>
+
+  <g class="box-ts"><rect x="52" y="120" width="156" height="32" rx="6"/></g>
+  <text x="130" y="141" text-anchor="middle" class="label" fill="#cc1118">TypeScript</text>
+
+  <text x="130" y="166" text-anchor="middle" class="arrow-text">&#x2193;</text>
+
+  <g class="box-tjs"><rect x="52" y="178" width="156" height="32" rx="6"/></g>
+  <text x="130" y="199" text-anchor="middle" class="label-bold" fill="#005028">TJS</text>
+
+  <text x="130" y="228" text-anchor="middle" class="arrow-text">&#x2193;</text>
+
+  <g class="box-js"><rect x="52" y="240" width="156" height="32" rx="6"/></g>
+  <text x="130" y="261" text-anchor="middle" class="label" fill="#8b6914">JavaScript</text>
+
+  <!-- Column: Runtime -->
+  <g class="shadow">
+    <rect x="250" y="68" width="220" height="262" rx="8" class="col-bg"/>
+  </g>
+  <rect x="250" y="68" width="220" height="36" rx="8" class="col-header"/>
+  <rect x="250" y="92" width="220" height="12" class="col-header"/>
+  <text x="360" y="92" text-anchor="middle" class="col-header-text">Runtime</text>
+
+  <g class="box-neutral"><rect x="282" y="120" width="156" height="32" rx="6"/></g>
+  <text x="360" y="141" text-anchor="middle" class="label" fill="#444">__tjs metadata</text>
+
+  <text x="360" y="166" text-anchor="middle" class="arrow-text">&#x2193;</text>
+
+  <g class="box-neutral"><rect x="282" y="178" width="156" height="32" rx="6"/></g>
+  <text x="360" y="199" text-anchor="middle" class="label" fill="#444">Runtime Validation</text>
+
+  <text x="360" y="228" text-anchor="middle" class="arrow-text">&#x2193;</text>
+
+  <g class="box-neutral"><rect x="282" y="240" width="156" height="32" rx="6"/></g>
+  <text x="360" y="261" text-anchor="middle" class="label" fill="#444">Auto Documentation</text>
+
+  <!-- Column: Safe Execution -->
+  <g class="shadow">
+    <rect x="480" y="68" width="220" height="262" rx="8" class="col-bg"/>
+  </g>
+  <rect x="480" y="68" width="220" height="36" rx="8" class="col-header"/>
+  <rect x="480" y="92" width="220" height="12" class="col-header"/>
+  <text x="590" y="92" text-anchor="middle" class="col-header-text">Safe Execution</text>
+
+  <g class="box-safe"><rect x="512" y="120" width="156" height="32" rx="6"/></g>
+  <text x="590" y="141" text-anchor="middle" class="label" fill="#1a6ab5">AJS Agent</text>
+
+  <text x="590" y="166" text-anchor="middle" class="arrow-text">&#x2193;</text>
+
+  <g class="box-neutral"><rect x="512" y="178" width="156" height="32" rx="6"/></g>
+  <text x="590" y="199" text-anchor="middle" class="label" fill="#444">JSON AST</text>
+
+  <text x="590" y="228" text-anchor="middle" class="arrow-text">&#x2193;</text>
+
+  <g class="box-tjs"><rect x="512" y="236" width="156" height="44" rx="6"/></g>
+  <text x="590" y="255" text-anchor="middle" class="label-lg" fill="#005028">Gas-Limited VM</text>
+  <text x="590" y="270" text-anchor="middle" class="label-sm" fill="#005028">+ Injected Capabilities</text>
+</svg>

package/docs/diagrams/safe-eval.svg

@@ -0,0 +1,147 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 420" font-family="system-ui, -apple-system, sans-serif">
+  <style>
+    /* TJS Brand Palette */
+    .bg { fill: #fafafa; stroke: #e4e4e4; }
+
+    .box-untrusted { fill: #fff3f3; stroke: #ff1c24; stroke-width: 1.5; }
+    .box-cap { fill: #f5f5f5; stroke: #9e9e9e; }
+    .box-granted { fill: #f0fff5; stroke: #006736; stroke-width: 1.5; }
+    .box-blocked { fill: #fff3f3; stroke: #ff1c24; stroke-width: 1.5; }
+
+    .diamond { fill: #fffbe6; stroke: #fdbe52; stroke-width: 1.2; }
+    .diamond-text { fill: #8b6914; font-size: 10px; font-weight: 500; }
+
+    .arrow { stroke: #9e9e9e; stroke-width: 1.2; fill: none; }
+    .branch { stroke: #9e9e9e; stroke-width: 1.2; fill: none; }
+    .line-yes { stroke: #006736; stroke-width: 1.2; }
+    .line-no { stroke: #ff1c24; stroke-width: 1.2; }
+
+    .text-untrusted { fill: #cc1118; font-size: 14px; font-weight: 600; }
+    .text-cap { fill: #444; font-size: 12px; font-family: monospace; }
+    .text-granted { fill: #005028; font-size: 11px; font-weight: 500; }
+    .text-granted-mono { fill: #005028; font-size: 11px; font-family: monospace; font-weight: 500; }
+    .text-blocked { fill: #cc1118; font-size: 12px; font-weight: 600; }
+    .text-yes { fill: #006736; font-size: 9px; font-weight: 600; }
+    .text-no { fill: #ff1c24; font-size: 9px; font-weight: 600; }
+
+    .legend-bg { fill: white; stroke: #e4e4e4; }
+    .legend-title { fill: #181340; font-size: 11px; font-weight: 600; }
+    .legend-text { fill: #444; font-size: 11px; }
+    .legend-dot-yes { fill: #f0fff5; stroke: #006736; stroke-width: 1.2; }
+    .legend-dot-no { fill: #fff3f3; stroke: #ff1c24; stroke-width: 1.2; }
+
+    .shadow { filter: drop-shadow(0 2px 3px rgba(0,0,0,0.1)); }
+
+    .ah { fill: #9e9e9e; }
+    .ah-no { fill: #ff1c24; }
+  </style>
+
+  <defs>
+    <marker id="a" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+      <path d="M0 0 L10 5 L0 10z" class="ah"/>
+    </marker>
+    <marker id="an" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+      <path d="M0 0 L10 5 L0 10z" class="ah-no"/>
+    </marker>
+  </defs>
+
+  <rect width="600" height="420" rx="12" class="bg"/>
+
+  <!-- Untrusted Code -->
+  <g id="node-untrusted" class="node shadow">
+    <rect x="210" y="16" width="180" height="40" rx="8" class="box-untrusted"/>
+    <text x="300" y="41" text-anchor="middle" class="text-untrusted">Untrusted Code</text>
+  </g>
+
+  <!-- Trunk -->
+  <line x1="300" y1="56" x2="300" y2="86" class="arrow"/>
+
+  <!-- Branches -->
+  <line x1="300" y1="86" x2="80" y2="120" class="branch"/>
+  <line x1="300" y1="86" x2="230" y2="120" class="branch"/>
+  <line x1="300" y1="86" x2="370" y2="120" class="branch"/>
+  <line x1="300" y1="86" x2="520" y2="120" class="branch"/>
+
+  <!-- Capability boxes -->
+  <rect x="30" y="120" width="100" height="32" rx="6" class="box-cap"/>
+  <text x="80" y="140" text-anchor="middle" class="text-cap">fetch()</text>
+
+  <rect x="180" y="120" width="100" height="32" rx="6" class="box-cap"/>
+  <text x="230" y="140" text-anchor="middle" class="text-cap">fs.read()</text>
+
+  <rect x="320" y="120" width="100" height="32" rx="6" class="box-cap"/>
+  <text x="370" y="140" text-anchor="middle" class="text-cap">loop</text>
+
+  <rect x="470" y="120" width="100" height="32" rx="6" class="box-cap"/>
+  <text x="520" y="140" text-anchor="middle" class="text-cap">console</text>
+
+  <!-- Arrows to diamonds -->
+  <line x1="80" y1="152" x2="80" y2="182" class="arrow" marker-end="url(#a)"/>
+  <line x1="230" y1="152" x2="230" y2="182" class="arrow" marker-end="url(#a)"/>
+  <line x1="370" y1="152" x2="370" y2="182" class="arrow" marker-end="url(#a)"/>
+  <line x1="520" y1="152" x2="520" y2="182" class="arrow" marker-end="url(#a)"/>
+
+  <!-- Diamonds -->
+  <polygon points="80,186 120,206 80,226 40,206" class="diamond"/>
+  <text x="80" y="210" text-anchor="middle" class="diamond-text">Granted?</text>
+
+  <polygon points="230,186 270,206 230,226 190,206" class="diamond"/>
+  <text x="230" y="210" text-anchor="middle" class="diamond-text">Granted?</text>
+
+  <polygon points="370,186 414,206 370,226 326,206" class="diamond"/>
+  <text x="370" y="210" text-anchor="middle" class="diamond-text">Fuel left?</text>
+
+  <polygon points="520,186 560,206 520,226 480,206" class="diamond"/>
+  <text x="520" y="210" text-anchor="middle" class="diamond-text">Granted?</text>
+
+  <!-- fetch: Y -> safeFetch -->
+  <line x1="55" y1="216" x2="20" y2="250" class="line-yes"/>
+  <text x="28" y="238" class="text-yes">Y</text>
+
+  <g class="shadow">
+    <rect x="0" y="254" width="110" height="44" rx="6" class="box-granted"/>
+  </g>
+  <text x="55" y="272" text-anchor="middle" class="text-granted">Your</text>
+  <text x="55" y="286" text-anchor="middle" class="text-granted-mono">safeFetch</text>
+
+  <!-- fetch: N -> Block -->
+  <line x1="105" y1="216" x2="135" y2="250" class="line-no"/>
+  <text x="127" y="238" class="text-no">N</text>
+
+  <rect x="115" y="254" width="70" height="28" rx="6" class="box-blocked"/>
+  <text x="150" y="273" text-anchor="middle" class="text-blocked">Block</text>
+
+  <!-- fs.read: N -> Block -->
+  <line x1="230" y1="226" x2="230" y2="250" class="line-no" marker-end="url(#an)"/>
+  <text x="240" y="242" class="text-no">N</text>
+  <rect x="195" y="254" width="70" height="28" rx="6" class="box-blocked"/>
+  <text x="230" y="273" text-anchor="middle" class="text-blocked">Block</text>
+
+  <!-- loop: Y -> Continue -->
+  <line x1="345" y1="216" x2="315" y2="250" class="line-yes"/>
+  <text x="322" y="238" class="text-yes">Y</text>
+  <rect x="285" y="254" width="80" height="28" rx="6" class="box-granted"/>
+  <text x="325" y="273" text-anchor="middle" class="text-granted">Continue</text>
+
+  <!-- loop: N -> Halt -->
+  <line x1="395" y1="216" x2="420" y2="250" class="line-no"/>
+  <text x="415" y="238" class="text-no">N</text>
+  <rect x="400" y="254" width="60" height="28" rx="6" class="box-blocked"/>
+  <text x="430" y="273" text-anchor="middle" class="text-blocked">Halt</text>
+
+  <!-- console: N -> Block -->
+  <line x1="520" y1="226" x2="520" y2="250" class="line-no" marker-end="url(#an)"/>
+  <text x="530" y="242" class="text-no">N</text>
+  <rect x="485" y="254" width="70" height="28" rx="6" class="box-blocked"/>
+  <text x="520" y="273" text-anchor="middle" class="text-blocked">Block</text>
+
+  <!-- Legend -->
+  <rect x="130" y="320" width="340" height="80" rx="8" class="legend-bg"/>
+  <text x="300" y="342" text-anchor="middle" class="legend-title">Capability-Based Security</text>
+
+  <circle cx="165" cy="362" r="6" class="legend-dot-yes"/>
+  <text x="180" y="366" class="legend-text">Granted = your wrapper runs</text>
+
+  <circle cx="165" cy="384" r="6" class="legend-dot-no"/>
+  <text x="180" y="388" class="legend-text">Not granted = silently blocked</text>
+</svg>