rip-lang 3.15.4 → 3.16.1

package/docs/ui/index.css

@@ -130,6 +130,11 @@ button { font: inherit; cursor: pointer; }
   &[data-selected] { font-weight: 600; color: #18181b; }
 }
 
+.gallery [role="status"][data-empty] {
+  display: block; padding: 8px 12px; border-radius: 4px;
+  font-size: 14px; line-height: 21px; color: #71717a;
+}
+
 /* ── Combobox clear button ── */
 
 .gallery [data-clear] {
@@ -260,8 +265,18 @@ button { font: inherit; cursor: pointer; }
   display: inline-flex; align-items: center; gap: 8px;
   padding: 6px 12px; border: 1px solid #d4d4d8; border-radius: 12px;
   background: white; cursor: pointer; font-size: 14px;
+}
+
+.gallery [role="checkbox"][data-checked] {
+  background: #fafafa; border-color: #18181b; color: #18181b;
+}
+
+.gallery [role="switch"] {
+  border-radius: 999px;
+}
 
-  &[data-checked] { background: #fafafa; border-color: #18181b; color: #18181b; }
+.gallery [role="switch"][data-checked] {
+  background: #dbeafe; border-color: #60a5fa; color: #1d4ed8;
 }
 
 /* ── Menu ── */
@@ -612,26 +627,32 @@ select.rip-grid-editor { cursor: pointer; padding-left: 4px; }
 /* ── MultiSelect ── */
 
 .gallery [data-chips] {
-  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
-  padding: 4px 8px; border: 1px solid #d4d4d8; border-radius: 12px;
-  background: white; min-height: 38px; cursor: text;
+  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
+  padding: 6px 12px; border: 1px solid #d4d4d8; border-radius: 16px;
+  background: white; min-height: 42px; cursor: text;
 
   &:focus-within { border-color: #18181b; box-shadow: 0 0 0 2px rgba(59,130,246,0.15); }
 
-  input {
-    border: none; outline: none; font: inherit; min-width: 80px;
-    flex: 1; padding: 4px 0; background: transparent;
+  input,
+  input[type="text"] {
+    appearance: none; -webkit-appearance: none;
+    border: none !important; outline: none; box-shadow: none !important; border-radius: 0 !important;
+    font: inherit; font-size: 14px; line-height: 1.2;
+    min-width: 88px; margin: 0;
+    flex: 1 1 120px; height: 28px; min-height: 28px; padding: 0 2px !important;
+    background: transparent !important;
   }
 }
 
 .gallery [data-chip] {
   display: inline-flex; align-items: center; gap: 4px;
-  padding: 2px 8px; background: #fafafa; color: #18181b;
-  border-radius: 4px; font-size: 12px; font-weight: 500;
+  min-height: 28px; padding: 0 10px; background: #fafafa; color: #18181b;
+  border: 1px solid #e4e4e7; border-radius: 10px; font-size: 12px; font-weight: 500;
 
   [data-remove] {
     border: none; background: none; color: #18181b; cursor: pointer;
-    font-size: 11px; padding: 0 2px; line-height: 1; border-radius: 2px;
+    width: 16px; height: 16px; font-size: 11px; padding: 0; line-height: 1; border-radius: 999px;
+    display: inline-flex; align-items: center; justify-content: center;
 
     &:hover { background: #f4f4f5; }
   }
@@ -767,6 +788,11 @@ select.rip-grid-editor { cursor: pointer; padding-left: 4px; }
   animation: fadeIn 0.15s ease;
 }
 
+.gallery #preview-card [data-content] {
+  padding: 0; margin: 0; border: none; border-radius: 0;
+  background: transparent; box-shadow: none; min-width: 0;
+}
+
 /* ── Menubar ── */
 
 .gallery [role="menubar"] {
@@ -946,7 +972,7 @@ html { scroll-behavior: auto; }
 html.no-transition, html.no-transition * { transition: none !important; }
 
 .toc {
-  display: grid; grid-template-columns: 1fr 1fr;
+  display: grid; grid-template-columns: 58% 42%;
   margin-bottom: 36px;
   background: white; border: 1px solid #e4e4e7; border-radius: 12px;
   overflow: hidden;
@@ -954,14 +980,14 @@ html.no-transition, html.no-transition * { transition: none !important; }
 
 .toc-nav {
   display: flex; flex-wrap: wrap; align-content: flex-start;
-  gap: 12px 20px; padding: 16px 20px;
+  gap: 14px 24px; padding: 18px 22px;
 }
 
-.toc-group { display: flex; flex-direction: column; gap: 3px; }
+.toc-group { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
 
 .toc-label {
   font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
-  text-transform: uppercase; color: #71717a; margin-bottom: 2px;
+  text-transform: uppercase; color: #71717a; margin-bottom: 3px;
 }
 
 .toc-search {
@@ -975,11 +1001,14 @@ html.no-transition, html.no-transition * { transition: none !important; }
 }
 
 .toc a {
+  display: inline-flex; align-items: center; width: fit-content; max-width: 100%;
   font-size: 12px; color: #3f3f46; text-decoration: none;
-  padding: 2px 8px; border-radius: 4px; background: #f5f5f5;
-  cursor: pointer; transition: transform 0.12s; outline: none;
+  padding: 6px 10px; border-radius: 10px; background: #f5f5f5;
+  border: 1px solid transparent; cursor: pointer; outline: none;
+  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
 
-  &:hover, &[data-active] { background: #f4f4f5; color: #18181b; transform: scale(1.05); }
+  &:hover { background: #f4f4f5; border-color: #e4e4e7; color: #18181b; }
+  &[data-active] { background: #f4f4f5; border-color: #d4d4d8; color: #18181b; box-shadow: inset 0 0 0 1px rgba(24,24,27,0.04); }
   &:focus-visible { background: #f4f4f5; color: #18181b; outline: 2px solid #18181b; outline-offset: 1px; }
   &[data-hidden] { display: none; }
 }
@@ -1344,17 +1373,29 @@ body:has(.source-overlay) { overflow: hidden; }
 
 /* ── Collapsible ── */
 
-.gallery [data-trigger]:has(+ [data-content]) {
+.gallery .collapsible-demo [data-trigger]:has(+ [data-content]) {
   padding: 8px 14px; border: 1px solid #d4d4d8; border-radius: 12px;
   background: white; cursor: pointer; font-size: 14px; width: 100%; text-align: left;
+  transition: border-color 0.15s ease, background-color 0.15s ease, border-radius 0.15s ease;
 
-  &[aria-expanded="true"] { border-color: #71717a; }
+  &[aria-expanded="true"] { border-color: #a1a1aa; }
   &:hover { background: #fafafa; }
 }
 
 .gallery .collapsible-demo [data-content] {
   padding: 12px 14px; color: #52525b; font-size: 13px;
-  border: 1px solid #e4e4e7; border-top: none; border-radius: 0 0 6px 6px;
+  margin-top: -1px;
+  border: 1px solid #e4e4e7; border-top: none; border-radius: 0 0 12px 12px;
+  background: white;
+}
+
+.gallery .collapsible-demo [data-open] [data-trigger]:has(+ [data-content]) {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.gallery .collapsible-demo [data-open] [data-content] {
+  border-color: #a1a1aa;
 }
 
 /* ── Pagination ── */
@@ -1460,8 +1501,9 @@ body:has(.source-overlay) { overflow: hidden; }
   .toc-search { border-color: #334155; background: #0f172a; color: #e4e4e7; }
   .toc-search::placeholder { color: #52525b; }
   .toc-label { color: #52525b; }
-  .toc a { color: #71717a; background: #0f172a; }
-  .toc a:hover, .toc a[data-active] { background: #172554; color: #71717a; }
+  .toc a { color: #71717a; background: #0f172a; border-color: transparent; }
+  .toc a:hover { background: #172554; border-color: #1e3a8a; color: #a1a1aa; }
+  .toc a[data-active] { background: #172554; border-color: #1e3a8a; color: #e4e4e7; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04); }
   .toc-detail { border-left-color: #334155; background: #0f172a; }
   .toc-detail h3 { color: #e4e4e7; }
   .toc-detail .toc-desc { color: #71717a; }
@@ -1516,7 +1558,8 @@ body:has(.source-overlay) { overflow: hidden; }
 
   /* Checkbox / Switch */
   .gallery [role="checkbox"], .gallery [role="switch"] { border-color: #3f3f46; background: #1e293b; color: #e4e4e7; }
-  .gallery [role="checkbox"][data-checked], .gallery [role="switch"][data-checked] { background: #172554; border-color: #18181b; color: #71717a; }
+  .gallery [role="checkbox"][data-checked] { background: #172554; border-color: #18181b; color: #a1a1aa; }
+  .gallery [role="switch"][data-checked] { background: #1d4ed8; border-color: #2563eb; color: #eff6ff; }
 
   /* Menu */
   .gallery [aria-haspopup="menu"] { border-color: #3f3f46; background: #1e293b; color: #e4e4e7; }

package/docs/ui/index.html

@@ -9,7 +9,7 @@
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="index.css">
   <style>body { opacity: 0; } body.ready { opacity: 1; transition: opacity 200ms ease-in; }</style>
-  <script defer src="../dist/rip.min.js" data-src="bundle" data-mount="WidgetGallery" data-reload>
+  <script defer src="../dist/rip.min.js" data-src="bundle.json" data-mount="WidgetGallery">
   </script>
 </head>
 <body>
@@ -103,8 +103,9 @@ export WidgetGallery = component
     return unless entry
     sourceName = entry.name
     sourceLines = entry.lines
-    resp = fetch! "components/#{id}.rip"
-    sourceCode = resp.text!
+    src = window.__RIP__?.components?.read("_pkg/ui/#{id}.rip")
+    return unless src
+    sourceCode = src
   _closeSource: -> sourceCode = null
   _stopProp: (e) -> e.stopPropagation()
   _ensureHljs: (cb) ->
@@ -228,7 +229,7 @@ export WidgetGallery = component
   tocData := [
     { id: 'select', name: 'Select', lines: 135, desc: 'Dropdown with typeahead, keyboard nav, ARIA listbox.', props: ['@value', '@placeholder', '@disabled'], events: ['change'], keys: ['↕', 'Enter', 'Space', 'Esc', 'Home', 'End', 'type-ahead'], attrs: ['$open', '$placeholder', '$disabled', '$value', '$highlighted', '$selected'] }
     { id: 'combobox', name: 'Combobox', lines: 118, desc: 'Filterable input + listbox for search-as-you-type.', props: ['@query', '@items', '@placeholder', '@disabled', '@autoHighlight'], events: ['filter', 'select'], keys: ['↕', 'Enter', 'Esc', 'Tab'], attrs: ['$open', '$disabled', '$clear', '$value', '$highlighted', '$empty'] }
-    { id: 'multi-select', name: 'MultiSelect', lines: 146, desc: 'Multi-select with chips, filtering, and keyboard nav.', props: ['@value', '@items', '@placeholder', '@disabled'], events: ['change'], keys: ['↕', 'Enter', 'Esc', 'Backspace', 'Tab'], attrs: ['$open', '$disabled', '$chips', '$chip', '$remove', '$clear', '$highlighted', '$selected'] }
+    { id: 'multi-select', name: 'MultiSelect', lines: 204, desc: 'Multi-select with chips, filtering, and keyboard nav.', props: ['@value', '@items', '@placeholder', '@disabled'], events: ['change'], keys: ['↕', 'Enter', 'Esc', 'Backspace', 'Tab'], attrs: ['$open', '$disabled', '$chips', '$chip', '$remove', '$highlighted', '$selected'] }
     { id: 'autocomplete', name: 'Autocomplete', lines: 113, desc: 'Suggestion input — type to filter, select to fill.', props: ['@value', '@items', '@placeholder', '@disabled'], events: ['select'], keys: ['↕', 'Enter', 'Esc', 'Tab'], attrs: ['$open', '$disabled', '$clear'] }
     { id: 'checkbox', name: 'Checkbox', lines: 18, desc: 'Toggle with checkbox or switch semantics.', props: ['@checked', '@disabled', '@indeterminate', '@switch'], events: ['change'], keys: [], attrs: ['$checked', '$indeterminate', '$disabled'] }
     { id: 'toggle', name: 'Toggle', lines: 14, desc: 'Two-state toggle button with pressed state.', props: ['@pressed', '@disabled'], events: ['change'], keys: [], attrs: ['$pressed', '$disabled'] }
@@ -646,7 +647,7 @@ export WidgetGallery = component
       # MULTI-SELECT
       # ========================================================================
       .section id: "multi-select"
-        SectionHead tag: "multi-select", name: "MultiSelect", lines: 146
+        SectionHead tag: "multi-select", name: "MultiSelect", lines: 204
         .section-desc "Multi-select with chips, filtering, and keyboard navigation."
         .demo-row
           .demo-label "Pick colors"
@@ -677,7 +678,6 @@ export WidgetGallery = component
               code "$chips"
               code "$chip"
               code "$remove"
-              code "$clear"
               code "$highlighted"
               code "$selected"
 

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "rip-lang",
-  "version": "3.15.4",
+  "version": "3.16.1",
   "description": "A modern language that compiles to JavaScript",
   "type": "module",
   "main": "src/compiler.js",
   "workspaces": [
+    "examples/*",
     "packages/*"
   ],
+  "catalog": {
+    "typescript": "5.9.3"
+  },
   "browser": "docs/dist/rip.min.js",
   "exports": {
     ".": {
@@ -35,7 +39,8 @@
     "bump": "bun scripts/bump.js",
     "gen:dom": "bun scripts/gen-dom.js",
     "gallery": "bun scripts/gallery.js",
-    "bundle:demo": "bun scripts/bundle-app.js docs/demo -o docs/example/index.json -t 'Rip App Demo'",
+    "bundle:demo": "bun scripts/bundle-app.js docs/demo/routes --prefix _route --css docs/demo/css -o docs/example/index.json -t 'Rip App Demo'",
+    "bundle:ui": "bun scripts/bundle-app.js packages/ui/browser/components --prefix _pkg/ui -o docs/ui/bundle.json -t 'Rip UI'",
     "parser": "bun src/grammar/solar.rip -o src/parser.js src/grammar/grammar.rip",
     "postinstall": "node scripts/postinstall.js --quiet",
     "link-local": "bun scripts/link-local.js",
@@ -86,6 +91,7 @@
   "author": "Steve Shreeve <steve.shreeve@gmail.com>",
   "license": "MIT",
   "devDependencies": {
-    "typescript": "5.9.3"
+    "@types/bun": "1.3.14",
+    "typescript": "catalog:"
   }
 }

package/rip-loader.js

@@ -2,13 +2,74 @@
 
 import { plugin } from "bun";
 import { fileURLToPath } from "url";
+import { dirname, resolve as resolvePath } from "path";
+import { readFileSync, existsSync } from "fs";
 import { compileToJS, formatError } from "./src/compiler.js";
+// Register the full schema runtime provider so .rip files containing
+// `schema :model` blocks compile correctly inside spawned workers.
+// Workers are launched with `--preload rip-loader.js` and otherwise
+// would call compileToJS without ever registering a provider.
+import "./src/schema/loader-server.js";
+
+// ── Undeclared-import diagnostic ────────────────────────────────────────
+// Walk up from an importer to its nearest package.json, then verify that any
+// `@rip-lang/<pkg>` specifier is declared in dependencies/devDependencies/
+// peerDependencies/optionalDependencies (or is the package's own self-import).
+//
+// Throws a clear error before `import.meta.resolve` is even attempted, so
+// "works on my machine" failures rooted in link-global rescue surface loudly
+// instead of silently shipping.
+const declarationCache = new Map(); // importerDir → { pkgName, declared } | null
+
+function getDeclarationInfo(importerPath) {
+  const start = dirname(importerPath);
+  if (declarationCache.has(start)) return declarationCache.get(start);
+  let cur = start;
+  let info = null;
+  while (true) {
+    const pkgPath = resolvePath(cur, 'package.json');
+    if (existsSync(pkgPath)) {
+      try {
+        const pkg = JSON.parse(readFileSync(pkgPath, 'utf8'));
+        info = {
+          pkgName: pkg.name || null,
+          declared: new Set([
+            ...Object.keys(pkg.dependencies || {}),
+            ...Object.keys(pkg.devDependencies || {}),
+            ...Object.keys(pkg.peerDependencies || {}),
+            ...Object.keys(pkg.optionalDependencies || {}),
+          ]),
+        };
+      } catch {
+        info = { pkgName: null, declared: new Set() };
+      }
+      break;
+    }
+    const parent = dirname(cur);
+    if (parent === cur) break;
+    cur = parent;
+  }
+  declarationCache.set(start, info);
+  return info;
+}
+
+export function assertDeclaredRipImport(importerPath, specifier) {
+  const m = specifier.match(/^(@rip-lang\/[^\/]+)/);
+  if (!m) return;
+  const pkgKey = m[1];
+  const info = getDeclarationInfo(importerPath);
+  if (!info) return; // ad-hoc script outside any package — don't block
+  if (info.pkgName === pkgKey) return; // self-import
+  if (info.declared.has(pkgKey)) return;
+  throw new Error(
+    `Import of '${pkgKey}' is not declared in package.json. ` +
+    `Run \`bun add ${pkgKey}\` (or use \`workspace:*\` inside this monorepo).`
+  );
+}
 
 await plugin({
   name: "rip-loader",
   async setup(build) {
-    const { readFileSync } = await import("fs");
-
     // Handle .rip files
     build.onLoad({ filter: /\.rip$/ }, async (args) => {
       try {
@@ -20,6 +81,7 @@ await plugin({
         // is broken in plugin handlers — so we use import.meta.resolve, which
         // resolves from this file's location (inside the global node_modules tree).
         js = js.replace(/(from\s+|import\s*\()(['"])(@rip-lang\/[^'"]+)\2/g, (match, prefix, quote, specifier) => {
+          assertDeclaredRipImport(args.path, specifier);
           try {
             return `${prefix}${quote}${fileURLToPath(import.meta.resolve(specifier))}${quote}`;
           } catch {

package/src/AGENTS.md

@@ -1,21 +1,24 @@
 # Compiler Subsystem — Agent Guide
 
-This covers `compiler.js`, `lexer.js`, `components.js`, `browser.js`, `types.js`, `types-emit.js`, `app.rip`, `typecheck.js`, the `schema/` subdirectory, and the `grammar/` directory. The schema feature lives in `src/schema/` (entry `src/schema/schema.js`, imported via relative paths like `./schema/schema.js` from sibling modules).
+This covers `compiler.js`, `lexer.js`, `components.js`, `browser.js`, `stdlib.js`, `types.js`, `dts.js`, `typecheck.js`, the `schema/` subdirectory, and the `grammar/` directory. The schema feature lives in `src/schema/` (entry `src/schema/schema.js`, imported via relative paths like `./schema/schema.js` from sibling modules).
+
+The Rip App framework — stash, resource, timing, components store, router, renderer, launch, ARIA helpers — used to live alongside the compiler at `src/app.rip`. It now lives at `packages/app/index.rip` (peer of `packages/server/`, `packages/ui/`, etc.). The browser bundle still includes it via `scripts/build.js`; the source-tree split just reflects that it's user-land Rip code, not a compiler internal.
 
 ---
 
 ## Module Map — browser-side vs CLI-only
 
-The browser bundle (`docs/dist/rip.min.js`) is built from `src/browser.js` plus the compiled `src/app.rip`. Every module statically reachable from either entry ends up in the bundle. `scripts/check-bundle-graph.js` walks both entries on every `bun run build` and fails if any reachable file matches a forbidden list.
+The browser bundle (`docs/dist/rip.min.js`) is built from `src/browser.js` plus the compiled `packages/app/index.rip`. Every module statically reachable from either entry ends up in the bundle. `scripts/check-bundle-graph.js` walks both entries on every `bun run build` and fails if any reachable file matches a forbidden list.
 
 | Module | Browser? | Purpose |
 | --- | --- | --- |
 | `src/browser.js` | yes (entry) | `<script type="text/rip">` discovery, `processRipScripts`, `importRip`, REPL |
-| `src/app.rip` | yes (entry) | Rip App framework runtime: stash, resource, timing, components store, router, renderer, launch, ARIA helpers |
+| `packages/app/index.rip` | yes (entry) | Rip App framework runtime: stash, resource, timing, components store, router, renderer, launch, ARIA helpers |
 | `src/parser.js` | yes | generated LR table |
 | `src/lexer.js` | yes | tokenizer + rewriter pipeline |
 | `src/compiler.js` | yes | codegen + reactive runtime + component runtime + `compileToJS` + `setTypesEmitter` hook + `emitEnum` |
 | `src/components.js` | yes | render rewriter + component runtime |
+| `src/stdlib.js` | yes | `getStdlibCode()` runtime preamble (p / pp / pr / pj / kind / abort / ...) + importable `stringify(value)` + `STDLIB_TYPE_DECLS` for typecheck.js |
 | `src/schema/schema.js` | yes (via `./schema/schema.js`) | lexer rewrite + body parser + emitSchema codegen + `setSchemaRuntimeProvider` hook (no fragment imports) |
 | `src/schema/loader-browser.js` | yes (browser only, via `./schema/loader-browser.js`) | imports validate + browser-stubs fragments; eager-installs browser runtime; registers provider |
 | `src/schema/loader-server.js` | **no** (CLI / server / tests, via `./schema/loader-server.js`) | imports all five fragments; eager-installs migration runtime; registers provider |
@@ -30,8 +33,8 @@ The browser bundle (`docs/dist/rip.min.js`) is built from `src/browser.js` plus
 | `src/sourcemaps.js` | yes | inline source-map generation |
 | `src/generated/dom-tags.js` | yes | HTML/SVG tag set for render-block tag detection |
 | `src/generated/dom-events.js` | yes | event-name set for `onClick`/`onKeydown` auto-wire |
-| `src/types-emit.js` | **no** | `.d.ts` emitter + intrinsic decl tables — CLI / typecheck only |
-| `src/schema/dts-emit.js` | **no** | schema `.d.ts` emitter — CLI / typecheck only |
+| `src/dts.js` | **no** | `.d.ts` emitter + intrinsic decl tables for the type system — CLI / typecheck only |
+| `src/schema/dts.js` | **no** | `.d.ts` emitter for schema declarations — CLI / typecheck only |
 | `src/typecheck.js` | **no** | TypeScript LSP integration — CLI only |
 | `src/repl.js` | **no** | interactive CLI REPL |
 
@@ -43,22 +46,22 @@ The same pattern is used twice — once for `.d.ts` emission, once for the schem
 
 `compiler.js` exports `setTypesEmitter(fn)`. The default emitter is `null`. The two `compile()` callsites that produce `.d.ts` output guard with `(typeTokens && _typesEmitter)` and silently skip if no emitter is registered.
 
-`src/types-emit.js` calls `setTypesEmitter(emitTypes)` at module load. Any caller that wants `.d.ts` output side-effect-imports `types-emit.js`:
+`src/dts.js` calls `setTypesEmitter(emitTypes)` at module load. Any caller that wants `.d.ts` output side-effect-imports `dts.js`:
 
 ```javascript
 // CLI entry — bin/rip
-import '../src/types-emit.js';   // installs emitter
+import '../src/dts.js';          // installs emitter
 
 // LSP integration
-import { ... } from './types-emit.js';
+import { ... } from './dts.js';
 
 // Test runner that exercises type emission
-import '../src/types-emit.js';
+import '../src/dts.js';
 ```
 
-The browser bundle never imports `types-emit.js`, so the emitter stays null and the `.d.ts` path is dead code that the bundler prunes.
+The browser bundle never imports `dts.js`, so the emitter stays null and the `.d.ts` path is dead code that the bundler prunes.
 
-**Failure mode to remember:** If you write code that calls `compile(source, { types: 'emit' })` and inspects `result.dts`, you **must** import `src/types-emit.js` (directly or indirectly) somewhere in that code path. Without it, `result.dts` is `null` regardless of source content. Symptom: types emission "silently does nothing" — no error, no warning, just empty output. The fix is one line: `import '../src/types-emit.js';`.
+**Failure mode to remember:** If you write code that calls `compile(source, { types: 'emit' })` and inspects `result.dts`, you **must** import `src/dts.js` (directly or indirectly) somewhere in that code path. Without it, `result.dts` is `null` regardless of source content. Symptom: types emission "silently does nothing" — no error, no warning, just empty output. The fix is one line: `import '../src/dts.js';`.
 
 The schema runtime uses an analogous hook: `src/schema/schema.js` exports `setSchemaRuntimeProvider(fn)`, default null. `src/schema/loader-server.js` and `src/schema/loader-browser.js` are the two providers. CLI / tests / server side-effect-import `./schema/loader-server.js` (full migration runtime, all four modes). The browser bundle (`src/browser.js`) side-effect-imports `./schema/loader-browser.js` (validate + browser-stubs only). Same failure mode applies — call `getSchemaRuntime()` without registering a provider and you get a clear error pointing at which loader to import.
 
@@ -185,6 +188,8 @@ Complete node reference:
 ['++', expr, isPostfix]  ['--', expr, isPostfix]
 
 // Control Flow
+// `elseBlock` may itself be another `['if', ...]` to form an `else if` chain
+// (right-recursive nesting), or any other branch shape for a terminal else.
 ['if', condition, thenBlock, elseBlock?]
 ['unless', condition, body]
 ['?:', condition, thenExpr, elseExpr]
@@ -236,15 +241,15 @@ Complete node reference:
 Tokens are `[tag, val]` arrays with extra properties:
 
 - `.pre` — whitespace count before token
-- `.data` — metadata like `{ await, predicate, quote, invert, parsedValue }`
+- `.data` — metadata like `{ await, optional, quote, invert, parsedValue }`
 - `.loc` — `{ r, c, n }`
 - `.spaced` — sugar for `.pre > 0`
 - `.newLine` — whether preceded by newline
 
 Identifier suffixes:
 
-- `!` sets `.data.await = true`
-- `?` sets `.data.predicate = true`
+- `!` sets `.data.bang = true` — a neutral "trailing `!`" flag resolved by context downstream: dammit/`await` at a call site (`fetch!` → `await fetch()`), or the void marker at a function definition (`foo! = ->`, `def foo!` → no implicit return). Void-ness is stamped onto the function node as `isVoid` by `applyVoidMarker` and read locally by the arrow emitters; `def` reads `meta(name, 'bang')` directly.
+- `?` sets `.data.optional = true` (existence check on values; optional marker on prop/type-field names)
 - `as!` in loops emits `FORASAWAIT` for `for await`
 
 Tagged template bridge:
@@ -410,7 +415,7 @@ Block factories need locals and `ctx.member` references instead of `this._elN` a
 - `_factoryVars` — variables that need local `let` declarations
 - `_fragChildren` — fragment-to-children tracking for removals
 - `_pushEffect(body)` — emits `__effect(...)` or `disposers.push(__effect(...))`
-- `_loopVarStack` — threads loop variables through nested factories
+- `_loopVarStack` — threads loop variables through nested factories. Each frame is `{ itemVar, indexVar, reactiveSource }`; `reactiveSource` is computed once when the loop is emitted (via `hasReactiveDeps(collection)`) and tells `hasReactiveDeps` to treat direct member access rooted at `itemVar`/`indexVar` (`item.foo`, `item[0]`, `item.a.b`) as reactive. Alias and destructuring forms are not tracked.
 
 Factory mode is entered in `emitConditionBranch` and `emitTemplateLoop` via save/restore of `[_createLines, _setupLines, _factoryMode, _factoryVars]`.
 
@@ -425,6 +430,13 @@ Methods named `onClick`, `onKeydown`, `onMouseenter`, etc. automatically bind to
 - lifecycle exclusion: `onError` is not auto-wired
 - after bumping `typescript`, refresh the generated DOM metadata with `bun run gen:dom`
 
+### Inherited Props (`extends <tag>`)
+
+User-facing docs: [docs/RIP-LANG.md](../docs/RIP-LANG.md) → "Inherited Props".
+Runtime entry points to grep when working on this: `_bindInheritedTarget`,
+`_setRestProp`, `_applyRestToInheritedEl`, `_inheritsTag`. Tests:
+[test/rip/components.rip](../test/rip/components.rip) under "extends ...".
+
 ### Generated DOM Tag Sets
 
 - `src/generated/dom-tags.js` is generated from TypeScript's `HTMLElementTagNameMap` and `SVGElementTagNameMap`
@@ -461,30 +473,35 @@ Compile-time optimizations:
 - array-based `state.blocks[]`
 - `state.keys = items.slice()` for default item-as-key behavior
 
-### Nested Loop Variable Collision (known gotcha)
+### Nested Loop Variable Collision (fixed)
 
-The emitted patch function for a reactive block is named `p` and takes
-every enclosing loop variable as a positional parameter:
+Historically, `emitTemplateLoop` would auto-allocate `i` for any
+outer loop with no explicit index. An inner `for v, i in ...` then
+explicitly bound `i`, and both ended up as positional parameters of
+the deepest factory's patch function:
 
 ```javascript
-// For a render with `for item in items` containing `for v, i in item.enum`
-p(ctx, v, i, item, i) { ... }   // duplicate `i` — invalid in strict mode
+// Pre-fix output:
+p(ctx, v, i, item, i) { ... }   // duplicate `i` — strict-mode SyntaxError
 ```
 
-The outer `for item in items` allocates an implicit `i` counter even
-when the user wrote no explicit index. If the inner loop uses `i` as an
-explicit index, both end up in `p`'s signature and V8 throws
-`Duplicate parameter name not allowed in this context` at parse time.
+The fix in `emitTemplateLoop` (`src/components.js`) calls
+`_collectExplicitLoopIdentifiers(body, usedNames)` to pre-scan the
+entire loop body for every explicit `for-in`/`for-of`/`for-as` var,
+then picks the first conventional letter (`i,j,k,l,m,n`) that's not
+in `usedNames`. If every letter collides, it falls back to
+`__rip_idx${depth}` — a name no normal user identifier writes.
 
-Current workaround (author-facing, documented in
-`packages/ui/AGENTS.md`): use a different inner index name (`idx`, `n`,
-`j`).
+The same nested case now compiles cleanly:
+
+```javascript
+function create_block_outer(ctx, item, j) { ... }
+function create_block_inner(ctx, v, i, item, j) { ... }   // unique
+```
 
-Long-term fix: the emitter should generate unique internal names for
-auto-allocated loop counters (e.g. `__i0`, `__i1`) rather than reusing
-`i`, so no user-chosen name can ever collide. The fix lives in whichever
-`emitFor*` path closes over the block into a patch function — search
-for sites that build the `p(ctx, ...args)` signature in `compiler.js`.
+User-explicit collisions (`for x, i in xs / for y, i in ys`) are
+still a real strict-mode error and are intentionally left to the
+user — the compiler doesn't silently rewrite the names you typed.
 
 ### Error Boundaries
 
@@ -556,6 +573,16 @@ The browser bundle is an IIFE loaded with `<script defer>`, not `type="module"`,
 
 `let` declarations are stripped so values can persist in sloppy-mode eval, while `const` is hoisted to `globalThis`.
 
+### `window.__RIP__` — same surface on both compile paths (don't break this)
+
+`processRipScripts()` has two compile paths: with `data-router` it calls `app.launch()`; without `data-router` it inlines the bundles into one async-IIFE eval. Both paths expose the **same** debug surface on `window.__RIP__`, and consumers (e.g. the docs UI gallery's view-source feature) read from it indiscriminately:
+
+- `window.__RIP__.components.read("components/<id>.rip")` — returns the bundled `.rip` source text.
+
+`launch()` already wires this up (see `app.rip` ~1190). The no-router path used to silently skip it, so `window.__RIP__` was undefined for any deploy that used `data-src="bundle.json"` alone — view-source UIs would silently fail. The fix mirrors `launch()`'s setup: build a `createComponents()` store from the bundles and expose it on `window.__RIP__.components` (see `browser.js` ~226–239).
+
+**Invariant:** any future refactor of either compile path must keep `window.__RIP__.components.read(path)` working after boot. The regression test that locks this in lives in `test/bundle.test.js` (boot-simulation driver — fakes a `<script src="rip.min.js" data-src="bundle.json">` runtime tag and a synthetic bundle, awaits `globalThis.__ripScriptsReady`, asserts `read()` returns the source). If you delete or move that block in `browser.js`, that test will fail with `window.__RIP__ missing — no-router path did not wire components store`.
+
 ---
 
 ## Reactivity Implementation
@@ -626,11 +653,11 @@ enum Status
 Type emission is split across two files by execution context:
 
 - `types.js` (browser-side, ~21 KB) — `installTypeSupport(Lexer)` adds `rewriteTypes()` to strip type annotations from the token stream so user-typed Rip parses. This is the only thing the browser needs from type machinery.
-- `types-emit.js` (CLI/LSP only, ~38 KB) — `emitTypes(tokens, sexpr, source)` generates `.d.ts`, plus `expandSuffixes`, `emitComponentTypes`, and the intrinsic declaration tables (`INTRINSIC_TYPE_DECLS`, `SIGNAL_*`, `COMPUTED_*`, `EFFECT_*`, etc.). Registers itself with the compiler at module load via `setTypesEmitter()`.
+- `dts.js` (CLI/LSP only, ~38 KB) — `emitTypes(tokens, sexpr, source)` generates `.d.ts`, plus `tsType`, `emitComponentTypes`, and the intrinsic declaration tables (`INTRINSIC_TYPE_DECLS`, `SIGNAL_*`, `COMPUTED_*`, `EFFECT_*`, etc.). Registers itself with the compiler at module load via `setTypesEmitter()`.
 
 `emitEnum` (runtime JS for `enum` blocks) lives in `compiler.js` next to the rest of the codegen dispatch — it's not type machinery, it's real runtime emission.
 
-`typecheck.js` (CLI only) drives `rip check`, mediates TypeScript diagnostics, and side-effect-imports `types-emit.js` for the intrinsic decl tables.
+`typecheck.js` (CLI only) drives `rip check`, mediates TypeScript diagnostics, and side-effect-imports `dts.js` for the intrinsic decl tables.
 
 Types are processed at the token layer before parsing.
 
@@ -664,10 +691,10 @@ several files by execution context:
   bundle. Server loader pulls all five; browser loader pulls only
   validate + browser-stubs. Bun's tree-shaker uses these import sets to
   omit server-only fragments from `docs/dist/rip.min.js`.
-- `src/schema/dts-emit.js` (CLI/LSP only) — `emitSchemaTypes` walks
+- `src/schema/dts.js` (CLI/LSP only) — `emitSchemaTypes` walks
   parsed schema s-expressions and emits `declare const Foo: Schema<...>`
   lines for the TypeScript language service. Imported only by
-  `types-emit.js` and `typecheck.js`. The `dts-emit` name signals
+  `dts.js` and `typecheck.js`. The `dts` name signals
   that this is a compile-time `.d.ts` emitter, not a `runtime-*` fragment.
 
 ### Lexer path