rip-lang 3.14.4 → 3.15.0

package/docs/example/index.json

@@ -1,14 +1,14 @@
 {
-  "css": "@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');\n\n/**\n * Rip UI Demo — Self-contained styles\n * No external dependencies (no Tailwind)\n */\n\n/* ============================================\n   Design Tokens\n   ============================================ */\n\n:root {\n    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n    --gray-50:  #f9fafb;\n    --gray-100: #f3f4f6;\n    --gray-200: #e5e7eb;\n    --gray-300: #d1d5db;\n    --gray-400: #9ca3af;\n    --gray-500: #6b7280;\n    --gray-600: #4b5563;\n    --gray-700: #374151;\n    --gray-800: #1f2937;\n    --gray-900: #111827;\n\n    --blue-50:  #eff6ff;\n    --blue-100: #dbeafe;\n    --blue-500: #3b82f6;\n    --blue-600: #2563eb;\n    --blue-700: #1d4ed8;\n\n    --green-50:  #f0fdf4;\n    --green-500: #22c55e;\n    --green-600: #16a34a;\n\n    --red-50:  #fef2f2;\n    --red-500: #ef4444;\n\n    --surface: var(--gray-50);\n    --card: #ffffff;\n    --text: var(--gray-900);\n    --text-secondary: var(--gray-500);\n    --text-muted: var(--gray-400);\n    --border: var(--gray-200);\n    --accent: var(--blue-600);\n    --accent-hover: var(--blue-700);\n\n    --radius: 0.75rem;\n    --radius-lg: 1rem;\n    --shadow: 0 1px 3px rgb(0 0 0 / 0.1), 0 1px 2px rgb(0 0 0 / 0.06);\n    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n    --transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* ============================================\n   Reset\n   ============================================ */\n\n*, *::before, *::after { box-sizing: border-box; }\n* { margin: 0; }\n\nhtml { -webkit-text-size-adjust: 100%; }\n\nbody {\n    font-family: var(--font);\n    line-height: 1.6;\n    color: var(--text);\n    background: var(--surface);\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n}\n\na { color: inherit; text-decoration: none; }\nimg, svg { display: block; max-width: 100%; }\ninput, button, textarea, select { font: inherit; }\n\n#app {\n    max-width: 52rem;\n    margin: 0 auto;\n    padding: 2rem;\n}\n\n/* ============================================\n   Layout Shell\n   ============================================ */\n\n.app-layout {\n    min-height: 100vh;\n    display: flex;\n    flex-direction: column;\n}\n\n.app-nav {\n    background: var(--card);\n    border-bottom: 1px solid var(--border);\n    border-radius: var(--radius);\n    padding: 0 1.5rem;\n    position: sticky;\n    top: 0;\n    z-index: 100;\n}\n\n.nav-inner {\n    max-width: 48rem;\n    margin: 0 auto;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    height: 3.5rem;\n}\n\n.nav-brand {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    font-weight: 600;\n    font-size: 0.9375rem;\n    letter-spacing: -0.02em;\n}\n\n.nav-links {\n    display: flex;\n    align-items: center;\n    gap: 0.25rem;\n}\n\n.nav-link {\n    padding: 0.375rem 0.75rem;\n    border-radius: 0.5rem;\n    color: var(--text-secondary);\n    font-size: 0.8125rem;\n    font-weight: 500;\n    transition: color var(--transition), background-color var(--transition);\n}\n\n.nav-link:hover {\n    color: var(--text);\n    background-color: var(--gray-100);\n}\n\n.nav-link.active {\n    color: var(--accent);\n    background: var(--blue-50);\n}\n\n.app-main {\n    flex: 1;\n    max-width: 48rem;\n    width: 100%;\n    margin: 0 auto;\n    padding: 2rem 1.5rem;\n}\n\n/* ============================================\n   Page Sections\n   ============================================ */\n\n.page-header {\n    margin-bottom: 2rem;\n}\n\n.page-title {\n    font-size: 1.5rem;\n    font-weight: 700;\n    letter-spacing: -0.03em;\n    line-height: 1.2;\n    color: var(--text);\n}\n\n.page-subtitle {\n    font-size: 0.875rem;\n    color: var(--text-secondary);\n    margin-top: 0.25rem;\n}\n\n/* ============================================\n   Card\n   ============================================ */\n\n.card {\n    background: var(--card);\n    border: 1px solid var(--border);\n    border-radius: var(--radius-lg);\n    box-shadow: var(--shadow);\n    padding: 1.5rem;\n}\n\n.card + .card {\n    margin-top: 1rem;\n}\n\n.card-title {\n    font-size: 0.8125rem;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    color: var(--text-secondary);\n    margin-bottom: 1rem;\n}\n\n/* ============================================\n   Button\n   ============================================ */\n\n.btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.5rem;\n    padding: 0.5rem 1rem;\n    border: 1px solid var(--border);\n    border-radius: 0.5rem;\n    background-color: var(--card);\n    color: var(--text);\n    font-size: 0.8125rem;\n    font-weight: 500;\n    cursor: pointer;\n    transition: color var(--transition), background-color var(--transition), border-color var(--transition), transform var(--transition);\n    user-select: none;\n}\n\n.btn:hover { background-color: var(--gray-50); border-color: var(--gray-300); }\n.btn:active { transform: scale(0.98); }\n\n.btn-primary {\n    background: var(--accent);\n    border-color: var(--accent);\n    color: white;\n}\n\n.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }\n\n.btn-danger {\n    color: var(--red-500);\n    border-color: var(--red-500);\n}\n\n.btn-danger:hover { background: var(--red-50); }\n\n.btn-sm {\n    padding: 0.25rem 0.5rem;\n    font-size: 0.75rem;\n}\n\n.btn-group {\n    display: flex;\n    gap: 0.5rem;\n    flex-wrap: wrap;\n}\n\n/* ============================================\n   Counter Display\n   ============================================ */\n\n.counter-display {\n    font-size: 4rem;\n    font-weight: 700;\n    letter-spacing: -0.04em;\n    text-align: center;\n    padding: 2rem 0;\n    font-variant-numeric: tabular-nums;\n    color: var(--text);\n    transition: color var(--transition);\n}\n\n.counter-display.positive { color: var(--green-600); }\n.counter-display.negative { color: var(--red-500); }\n\n.counter-controls {\n    display: flex;\n    justify-content: center;\n    gap: 0.5rem;\n}\n\n/* ============================================\n   Input\n   ============================================ */\n\n.input {\n    width: 100%;\n    padding: 0.5rem 0.75rem;\n    border: 1px solid var(--border);\n    border-radius: 0.5rem;\n    background-color: var(--card);\n    color: var(--text);\n    font-size: 0.875rem;\n    transition: border-color var(--transition), box-shadow var(--transition);\n}\n\n.input::placeholder { color: var(--text-muted); }\n.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--blue-100); }\n\n/* ============================================\n   Todo List\n   ============================================ */\n\n.todo-input-row {\n    display: flex;\n    gap: 0.5rem;\n    margin-bottom: 1rem;\n}\n\n.todo-input-row .input { flex: 1; }\n\n.todo-list {\n    list-style: none;\n    padding: 0;\n}\n\n.todo-item {\n    display: flex;\n    align-items: center;\n    gap: 0.75rem;\n    padding: 0.75rem 0;\n    border-bottom: 1px solid var(--gray-100);\n    transition: opacity var(--transition);\n}\n\n.todo-item:last-child { border-bottom: none; }\n\n.todo-checkbox {\n    width: 1.25rem;\n    height: 1.25rem;\n    border: 2px solid var(--gray-300);\n    border-radius: 0.375rem;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: background-color var(--transition), border-color var(--transition);\n    flex-shrink: 0;\n}\n\n.todo-checkbox:hover { border-color: var(--accent); }\n\n.todo-checkbox.checked {\n    background: var(--accent);\n    border-color: var(--accent);\n}\n\n.todo-checkbox.checked::after {\n    content: '';\n    width: 0.4rem;\n    height: 0.25rem;\n    border-left: 2px solid white;\n    border-bottom: 2px solid white;\n    transform: rotate(-45deg);\n    margin-bottom: 1px;\n}\n\n.todo-text {\n    flex: 1;\n    font-size: 0.875rem;\n    color: var(--text);\n}\n\n.todo-text.done {\n    text-decoration: line-through;\n    color: var(--text-muted);\n}\n\n.todo-delete {\n    opacity: 0;\n    padding: 0.125rem 0.375rem;\n    border: none;\n    background: none;\n    color: var(--text-muted);\n    cursor: pointer;\n    border-radius: 0.25rem;\n    font-size: 0.75rem;\n    transition: opacity var(--transition), color var(--transition), background-color var(--transition);\n}\n\n.todo-item:hover .todo-delete { opacity: 1; }\n.todo-delete:hover { color: var(--red-500); background: var(--red-50); }\n\n.todo-stats {\n    display: flex;\n    justify-content: space-between;\n    padding-top: 0.75rem;\n    border-top: 1px solid var(--gray-100);\n    font-size: 0.75rem;\n    color: var(--text-secondary);\n}\n\n/* ============================================\n   Feature Grid (Home page)\n   ============================================ */\n\n.feature-grid {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 1rem;\n}\n\n@media (max-width: 640px) {\n    .feature-grid { grid-template-columns: 1fr; }\n}\n\n.feature-card {\n    background-color: var(--card);\n    border: 1px solid var(--border);\n    border-radius: var(--radius);\n    padding: 1.25rem;\n    transition: border-color var(--transition), box-shadow var(--transition);\n}\n\n.feature-card:hover {\n    border-color: var(--gray-300);\n    box-shadow: var(--shadow);\n}\n\n.feature-icon {\n    font-size: 1.5rem;\n    margin-bottom: 0.75rem;\n}\n\n.feature-name {\n    font-size: 0.875rem;\n    font-weight: 600;\n    color: var(--text);\n    margin-bottom: 0.25rem;\n}\n\n.feature-desc {\n    font-size: 0.8125rem;\n    color: var(--text-secondary);\n    line-height: 1.5;\n}\n\n/* ============================================\n   Code Block\n   ============================================ */\n\n.code-block {\n    background: var(--gray-800);\n    color: var(--gray-100);\n    padding: 1rem 1.25rem;\n    border-radius: var(--radius);\n    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;\n    font-size: 0.8125rem;\n    line-height: 1.6;\n    overflow-x: auto;\n    white-space: pre;\n}\n\n.code-keyword { color: #c084fc; }\n.code-string  { color: #86efac; }\n.code-comment { color: var(--gray-500); }\n.code-number  { color: #fbbf24; }\n\n/* ============================================\n   Stat badge\n   ============================================ */\n\n.stat {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.375rem;\n    padding: 0.375rem 0.75rem;\n    background: var(--gray-100);\n    border-radius: var(--radius);\n    font-size: 0.8125rem;\n    font-weight: 500;\n    color: var(--text-secondary);\n}\n\n.stat-value {\n    font-weight: 700;\n    color: var(--text);\n    font-variant-numeric: tabular-nums;\n}",
+  "css": "@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');\n\n/**\n * Rip App Demo — Self-contained styles\n * No external dependencies (no Tailwind)\n */\n\n/* ============================================\n   Design Tokens\n   ============================================ */\n\n:root {\n    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n    --gray-50:  #f9fafb;\n    --gray-100: #f3f4f6;\n    --gray-200: #e5e7eb;\n    --gray-300: #d1d5db;\n    --gray-400: #9ca3af;\n    --gray-500: #6b7280;\n    --gray-600: #4b5563;\n    --gray-700: #374151;\n    --gray-800: #1f2937;\n    --gray-900: #111827;\n\n    --blue-50:  #eff6ff;\n    --blue-100: #dbeafe;\n    --blue-500: #3b82f6;\n    --blue-600: #2563eb;\n    --blue-700: #1d4ed8;\n\n    --green-50:  #f0fdf4;\n    --green-500: #22c55e;\n    --green-600: #16a34a;\n\n    --red-50:  #fef2f2;\n    --red-500: #ef4444;\n\n    --surface: var(--gray-50);\n    --card: #ffffff;\n    --text: var(--gray-900);\n    --text-secondary: var(--gray-500);\n    --text-muted: var(--gray-400);\n    --border: var(--gray-200);\n    --accent: var(--blue-600);\n    --accent-hover: var(--blue-700);\n\n    --radius: 0.75rem;\n    --radius-lg: 1rem;\n    --shadow: 0 1px 3px rgb(0 0 0 / 0.1), 0 1px 2px rgb(0 0 0 / 0.06);\n    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n    --transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* ============================================\n   Reset\n   ============================================ */\n\n*, *::before, *::after { box-sizing: border-box; }\n* { margin: 0; }\n\nhtml { -webkit-text-size-adjust: 100%; }\n\nbody {\n    font-family: var(--font);\n    line-height: 1.6;\n    color: var(--text);\n    background: var(--surface);\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n}\n\na { color: inherit; text-decoration: none; }\nimg, svg { display: block; max-width: 100%; }\ninput, button, textarea, select { font: inherit; }\n\n#app {\n    max-width: 52rem;\n    margin: 0 auto;\n    padding: 2rem;\n}\n\n/* ============================================\n   Layout Shell\n   ============================================ */\n\n.app-layout {\n    min-height: 100vh;\n    display: flex;\n    flex-direction: column;\n}\n\n.app-nav {\n    background: var(--card);\n    border-bottom: 1px solid var(--border);\n    border-radius: var(--radius);\n    padding: 0 1.5rem;\n    position: sticky;\n    top: 0;\n    z-index: 100;\n}\n\n.nav-inner {\n    max-width: 48rem;\n    margin: 0 auto;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    height: 3.5rem;\n}\n\n.nav-brand {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    font-weight: 600;\n    font-size: 0.9375rem;\n    letter-spacing: -0.02em;\n}\n\n.nav-links {\n    display: flex;\n    align-items: center;\n    gap: 0.25rem;\n}\n\n.nav-link {\n    padding: 0.375rem 0.75rem;\n    border-radius: 0.5rem;\n    color: var(--text-secondary);\n    font-size: 0.8125rem;\n    font-weight: 500;\n    transition: color var(--transition), background-color var(--transition);\n}\n\n.nav-link:hover {\n    color: var(--text);\n    background-color: var(--gray-100);\n}\n\n.nav-link.active {\n    color: var(--accent);\n    background: var(--blue-50);\n}\n\n.app-main {\n    flex: 1;\n    max-width: 48rem;\n    width: 100%;\n    margin: 0 auto;\n    padding: 2rem 1.5rem;\n}\n\n/* ============================================\n   Page Sections\n   ============================================ */\n\n.page-header {\n    margin-bottom: 2rem;\n}\n\n.page-title {\n    font-size: 1.5rem;\n    font-weight: 700;\n    letter-spacing: -0.03em;\n    line-height: 1.2;\n    color: var(--text);\n}\n\n.page-subtitle {\n    font-size: 0.875rem;\n    color: var(--text-secondary);\n    margin-top: 0.25rem;\n}\n\n/* ============================================\n   Card\n   ============================================ */\n\n.card {\n    background: var(--card);\n    border: 1px solid var(--border);\n    border-radius: var(--radius-lg);\n    box-shadow: var(--shadow);\n    padding: 1.5rem;\n}\n\n.card + .card {\n    margin-top: 1rem;\n}\n\n.card-title {\n    font-size: 0.8125rem;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    color: var(--text-secondary);\n    margin-bottom: 1rem;\n}\n\n/* ============================================\n   Button\n   ============================================ */\n\n.btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.5rem;\n    padding: 0.5rem 1rem;\n    border: 1px solid var(--border);\n    border-radius: 0.5rem;\n    background-color: var(--card);\n    color: var(--text);\n    font-size: 0.8125rem;\n    font-weight: 500;\n    cursor: pointer;\n    transition: color var(--transition), background-color var(--transition), border-color var(--transition), transform var(--transition);\n    user-select: none;\n}\n\n.btn:hover { background-color: var(--gray-50); border-color: var(--gray-300); }\n.btn:active { transform: scale(0.98); }\n\n.btn-primary {\n    background: var(--accent);\n    border-color: var(--accent);\n    color: white;\n}\n\n.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }\n\n.btn-danger {\n    color: var(--red-500);\n    border-color: var(--red-500);\n}\n\n.btn-danger:hover { background: var(--red-50); }\n\n.btn-sm {\n    padding: 0.25rem 0.5rem;\n    font-size: 0.75rem;\n}\n\n.btn-group {\n    display: flex;\n    gap: 0.5rem;\n    flex-wrap: wrap;\n}\n\n/* ============================================\n   Counter Display\n   ============================================ */\n\n.counter-display {\n    font-size: 4rem;\n    font-weight: 700;\n    letter-spacing: -0.04em;\n    text-align: center;\n    padding: 2rem 0;\n    font-variant-numeric: tabular-nums;\n    color: var(--text);\n    transition: color var(--transition);\n}\n\n.counter-display.positive { color: var(--green-600); }\n.counter-display.negative { color: var(--red-500); }\n\n.counter-controls {\n    display: flex;\n    justify-content: center;\n    gap: 0.5rem;\n}\n\n/* ============================================\n   Input\n   ============================================ */\n\n.input {\n    width: 100%;\n    padding: 0.5rem 0.75rem;\n    border: 1px solid var(--border);\n    border-radius: 0.5rem;\n    background-color: var(--card);\n    color: var(--text);\n    font-size: 0.875rem;\n    transition: border-color var(--transition), box-shadow var(--transition);\n}\n\n.input::placeholder { color: var(--text-muted); }\n.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--blue-100); }\n\n/* ============================================\n   Todo List\n   ============================================ */\n\n.todo-input-row {\n    display: flex;\n    gap: 0.5rem;\n    margin-bottom: 1rem;\n}\n\n.todo-input-row .input { flex: 1; }\n\n.todo-list {\n    list-style: none;\n    padding: 0;\n}\n\n.todo-item {\n    display: flex;\n    align-items: center;\n    gap: 0.75rem;\n    padding: 0.75rem 0;\n    border-bottom: 1px solid var(--gray-100);\n    transition: opacity var(--transition);\n}\n\n.todo-item:last-child { border-bottom: none; }\n\n.todo-checkbox {\n    width: 1.25rem;\n    height: 1.25rem;\n    border: 2px solid var(--gray-300);\n    border-radius: 0.375rem;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: background-color var(--transition), border-color var(--transition);\n    flex-shrink: 0;\n}\n\n.todo-checkbox:hover { border-color: var(--accent); }\n\n.todo-checkbox.checked {\n    background: var(--accent);\n    border-color: var(--accent);\n}\n\n.todo-checkbox.checked::after {\n    content: '';\n    width: 0.4rem;\n    height: 0.25rem;\n    border-left: 2px solid white;\n    border-bottom: 2px solid white;\n    transform: rotate(-45deg);\n    margin-bottom: 1px;\n}\n\n.todo-text {\n    flex: 1;\n    font-size: 0.875rem;\n    color: var(--text);\n}\n\n.todo-text.done {\n    text-decoration: line-through;\n    color: var(--text-muted);\n}\n\n.todo-delete {\n    opacity: 0;\n    padding: 0.125rem 0.375rem;\n    border: none;\n    background: none;\n    color: var(--text-muted);\n    cursor: pointer;\n    border-radius: 0.25rem;\n    font-size: 0.75rem;\n    transition: opacity var(--transition), color var(--transition), background-color var(--transition);\n}\n\n.todo-item:hover .todo-delete { opacity: 1; }\n.todo-delete:hover { color: var(--red-500); background: var(--red-50); }\n\n.todo-stats {\n    display: flex;\n    justify-content: space-between;\n    padding-top: 0.75rem;\n    border-top: 1px solid var(--gray-100);\n    font-size: 0.75rem;\n    color: var(--text-secondary);\n}\n\n/* ============================================\n   Feature Grid (Home page)\n   ============================================ */\n\n.feature-grid {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 1rem;\n}\n\n@media (max-width: 640px) {\n    .feature-grid { grid-template-columns: 1fr; }\n}\n\n.feature-card {\n    background-color: var(--card);\n    border: 1px solid var(--border);\n    border-radius: var(--radius);\n    padding: 1.25rem;\n    transition: border-color var(--transition), box-shadow var(--transition);\n}\n\n.feature-card:hover {\n    border-color: var(--gray-300);\n    box-shadow: var(--shadow);\n}\n\n.feature-icon {\n    font-size: 1.5rem;\n    margin-bottom: 0.75rem;\n}\n\n.feature-name {\n    font-size: 0.875rem;\n    font-weight: 600;\n    color: var(--text);\n    margin-bottom: 0.25rem;\n}\n\n.feature-desc {\n    font-size: 0.8125rem;\n    color: var(--text-secondary);\n    line-height: 1.5;\n}\n\n/* ============================================\n   Code Block\n   ============================================ */\n\n.code-block {\n    background: var(--gray-800);\n    color: var(--gray-100);\n    padding: 1rem 1.25rem;\n    border-radius: var(--radius);\n    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;\n    font-size: 0.8125rem;\n    line-height: 1.6;\n    overflow-x: auto;\n    white-space: pre;\n}\n\n.code-keyword { color: #c084fc; }\n.code-string  { color: #86efac; }\n.code-comment { color: var(--gray-500); }\n.code-number  { color: #fbbf24; }\n\n/* ============================================\n   Stat badge\n   ============================================ */\n\n.stat {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.375rem;\n    padding: 0.375rem 0.75rem;\n    background: var(--gray-100);\n    border-radius: var(--radius);\n    font-size: 0.8125rem;\n    font-weight: 500;\n    color: var(--text-secondary);\n}\n\n.stat-value {\n    font-weight: 700;\n    color: var(--text);\n    font-variant-numeric: tabular-nums;\n}",
   "components": {
     "components/counter.rip": "# Counter Page\n\nexport Counter = component\n  count := @app.data.count or 0\n  step  := 1\n\n  ~> @app.data.count = count\n\n  increment: -> count += step\n  decrement: -> count -= step\n  reset:     -> count = 0\n\n  render\n    div\n      .page-header\n        h1.page-title \"Counter\"\n        p.page-subtitle \"Reactive state — persists across reload\"\n\n      .card\n        .counter-display \"#{count}\"\n\n        .counter-controls\n          button.btn @click: @decrement, \"- #{step}\"\n          button.btn @click: @reset, \"Reset\"\n          button.btn.btn-primary @click: @increment, \"+ #{step}\"\n\n      .card\n        .card-title \"Step Size\"\n        .btn-group\n          button.btn @click: (-> step = 1), \"1\"\n          button.btn @click: (-> step = 5), \"5\"\n          button.btn @click: (-> step = 10), \"10\"\n          button.btn @click: (-> step = 100), \"100\"\n",
-    "components/index.rip": "# Home Page\n\nexport Home = component\n\n  render\n    div\n      .page-header\n        h1.page-title \"Rip UI Framework\"\n        p.page-subtitle \"Zero-build reactive web apps\"\n\n      .feature-grid\n        .feature-card\n          .feature-icon \"🗂\"\n          .feature-name \"Component Store\"\n          .feature-desc \"Component source files loaded on demand. Compiled in the browser.\"\n\n        .feature-card\n          .feature-icon \"🔀\"\n          .feature-name \"File-Based Router\"\n          .feature-desc \"URLs map to components. Dynamic segments and nested layouts.\"\n\n        .feature-card\n          .feature-icon \"⚡\"\n          .feature-name \"Reactive Stash\"\n          .feature-desc \"Deep state tree with path navigation. Every property tracked.\"\n\n        .feature-card\n          .feature-icon \"🎯\"\n          .feature-name \"Fine-Grained Rendering\"\n          .feature-desc \"No virtual DOM. Direct DOM updates via reactive effects.\"\n",
-    "components/todos.rip": "# Todos Page\n\nexport Todos = component\n  newTodo := ''\n  todos := @app.data.todos or []\n  nextId := (@app.data.nextId or 1)\n\n  ~> @app.data.todos = todos\n  ~> @app.data.nextId = nextId\n\n  remaining ~= todos.filter((t) -> not t.done).length\n\n  addTodo: ->\n    if newTodo.trim()\n      todos = [...todos, { id: nextId, text: newTodo.trim(), done: false }]\n      nextId++\n      newTodo = ''\n\n  deleteTodo: (id) ->\n    todos = todos.filter (t) -> t.id isnt id\n\n  clearAll: ->\n    todos = []\n\n  handleKey: (e) ->\n    if e.key is 'Enter'\n      @addTodo()\n\n  render\n    div\n      .page-header\n        h1.page-title \"Todos\"\n        p.page-subtitle \"List rendering and state management\"\n\n      .card\n        .todo-input-row\n          input.input type: \"text\", value: newTodo, placeholder: \"What needs to be done?\", @keydown: @handleKey\n          button.btn.btn-primary @click: @addTodo, \"Add\"\n\n        ul.todo-list\n          for todo in todos\n            li.todo-item\n              span.todo-text todo.text\n              button.todo-delete @click: (=> @deleteTodo(todo.id)), \"x\"\n\n        .todo-stats\n          span \"#{remaining} remaining\"\n          button.btn.btn-sm @click: @clearAll, \"Clear all\"\n",
+    "components/index.rip": "# Home Page\n\nexport Home = component\n\n  render\n    div\n      .page-header\n        h1.page-title \"Rip App Framework\"\n        p.page-subtitle \"Zero-build reactive web apps\"\n\n      .feature-grid\n        .feature-card\n          .feature-icon \"🗂\"\n          .feature-name \"Component Store\"\n          .feature-desc \"Component source files loaded on demand. Compiled in the browser.\"\n\n        .feature-card\n          .feature-icon \"🔀\"\n          .feature-name \"File-Based Router\"\n          .feature-desc \"URLs map to components. Dynamic segments and nested layouts.\"\n\n        .feature-card\n          .feature-icon \"⚡\"\n          .feature-name \"Reactive Stash\"\n          .feature-desc \"Deep state tree with path navigation. Every property tracked.\"\n\n        .feature-card\n          .feature-icon \"🎯\"\n          .feature-name \"Fine-Grained Rendering\"\n          .feature-desc \"No virtual DOM. Direct DOM updates via reactive effects.\"\n",
+    "components/todos.rip": "# Todos Page\n\nexport Todos = component\n  newTodo := ''\n  todos := @app.data.todos or []\n  nextId := (@app.data.nextId or 1)\n\n  ~> @app.data.todos = todos\n  ~> @app.data.nextId = nextId\n\n  remaining ~= todos.filter((t) -> not t.done).length\n\n  addTodo: ->\n    if newTodo.trim()\n      todos = [...todos, { id: nextId, text: newTodo.trim(), done: false }]\n      nextId++\n      newTodo = ''\n\n  deleteTodo: (id) ->\n    todos = todos.filter (t) -> t.id isnt id\n\n  clearAll: ->\n    todos = []\n\n  handleKey: (e) ->\n    if e.key is 'Enter'\n      @addTodo()\n\n  render\n    div\n      .page-header\n        h1.page-title \"Todos\"\n        p.page-subtitle \"List rendering and state management\"\n\n      .card\n        .todo-input-row\n          input.input type: \"text\", value <=> newTodo, placeholder: \"What needs to be done?\", @keydown: @handleKey\n          button.btn.btn-primary @click: @addTodo, \"Add\"\n\n        ul.todo-list\n          for todo in todos\n            li.todo-item\n              span.todo-text todo.text\n              button.todo-delete @click: (=> @deleteTodo(todo.id)), \"x\"\n\n        .todo-stats\n          span \"#{remaining} remaining\"\n          button.btn.btn-sm @click: @clearAll, \"Clear all\"\n",
     "components/card.rip": "# Card — reusable content card component\n\nexport Card = component\n  title =! \"\"\n\n  render\n    div.card\n      if title\n        h3 \"#{title}\"\n      @children\n",
-    "components/about.rip": "# About Page — uses the Card component for content sections\n\nexport About = component\n\n  render\n    div\n      .page-header\n        h1.page-title \"About Rip UI\"\n        p.page-subtitle \"Zero-build reactive web apps!\"\n\n      Card title: \"The Idea\"\n        p \"Traditional frameworks build and bundle on the server, then ship static artifacts. Rip UI ships the 40KB compiler to the browser instead. Components arrive as .rip source files, are compiled on demand, and render with fine-grained reactivity. No build step, no bundler, no configuration files.\"\n\n      Card title: \"Two Keywords\"\n        p \"The component model adds exactly two keywords to the Rip language: component and render. Everything else — reactive state (:=), computed values (~=), effects (~>), methods, lifecycle hooks — is standard Rip syntax that already exists.\"\n\n      Card title: \"Architecture\"\n        p \"Components live as source files in the unified stash. The Router maps URLs to components using file-based conventions (like Next.js). When you navigate, the Renderer compiles the matching .rip file and mounts the resulting component. Each reactive binding creates a direct DOM effect — no virtual DOM diffing.\"\n\n      Card title: \"Stack\"\n        .btn-group\n          .stat\n            span \"Compiler \"\n            span.stat-value \"40KB\"\n          .stat\n            span \"Framework \"\n            span.stat-value \"~8KB\"\n          .stat\n            span \"Build step \"\n            span.stat-value \"None\"\n          .stat\n            span \"Dependencies \"\n            span.stat-value \"Zero\"\n\n      Card title: \"Modules\"\n        p \"The framework lives in one file: ui.rip. It uses Rip's built-in reactive primitives directly — the same signals that power := and ~= in components. Deep reactive stash with path navigation. Component store for source management. File-based router mapping URLs to components. Renderer that compiles and mounts components with layout support.\"\n",
-    "components/_layout.rip": "# Root Layout (with error boundary and navigation indicator)\n\nexport Layout = component\n  errorMsg := null\n\n  ~> localStorage.setItem '__rip_route', @router.path\n\n  onError: (err) ->\n    errorMsg = err.message\n\n  render\n    .app-layout\n      nav.app-nav\n        .nav-inner\n          a.nav-brand \"Rip UI\"\n          .nav-links\n            a.('nav-link', @router.path is '/' and 'active') href: \"#/\", \"Home\"\n            a.('nav-link', @router.path is '/counter' and 'active') href: \"#counter\", \"Counter\"\n            a.('nav-link', @router.path is '/todos' and 'active') href: \"#todos\", \"Todos\"\n            a.('nav-link', @router.path is '/about' and 'active') href: \"#about\", \"About\"\n            if @router.navigating\n              span.nav-loading \"Loading...\"\n      main.app-main\n        if errorMsg\n          .error-banner\n            p \"Something went wrong: #{errorMsg}\"\n            button.btn @click: (-> errorMsg = null), \"Dismiss\"\n        #content\n"
+    "components/about.rip": "# About Page — uses the Card component for content sections\n\nexport About = component\n\n  render\n    div\n      .page-header\n        h1.page-title \"About Rip App\"\n        p.page-subtitle \"Zero-build reactive web apps!\"\n\n      Card title: \"The Idea\"\n        p \"Traditional frameworks build and bundle on the server, then ship static artifacts. Rip App ships the 40KB compiler to the browser instead. Components arrive as .rip source files, are compiled on demand, and render with fine-grained reactivity. No build step, no bundler, no configuration files.\"\n\n      Card title: \"Two Keywords\"\n        p \"The component model adds exactly two keywords to the Rip language: component and render. Everything else — reactive state (:=), computed values (~=), effects (~>), methods, lifecycle hooks — is standard Rip syntax that already exists.\"\n\n      Card title: \"Architecture\"\n        p \"Components live as source files in the unified stash. The Router maps URLs to components using file-based conventions (like Next.js). When you navigate, the Renderer compiles the matching .rip file and mounts the resulting component. Each reactive binding creates a direct DOM effect — no virtual DOM diffing.\"\n\n      Card title: \"Stack\"\n        .btn-group\n          .stat\n            span \"Compiler \"\n            span.stat-value \"40KB\"\n          .stat\n            span \"Framework \"\n            span.stat-value \"~8KB\"\n          .stat\n            span \"Build step \"\n            span.stat-value \"None\"\n          .stat\n            span \"Dependencies \"\n            span.stat-value \"Zero\"\n\n      Card title: \"Modules\"\n        p \"The framework lives in one file: app.rip. It uses Rip's built-in reactive primitives directly — the same signals that power := and ~= in components. Deep reactive stash with path navigation. Component store for source management. File-based router mapping URLs to components. Renderer that compiles and mounts components with layout support.\"\n",
+    "components/_layout.rip": "# Root Layout (with error boundary and navigation indicator)\n\nexport Layout = component\n  errorMsg := null\n\n  ~> localStorage.setItem '__rip_route', @router.path\n\n  onError: (err) ->\n    errorMsg = err.message\n\n  render\n    .app-layout\n      nav.app-nav\n        .nav-inner\n          a.nav-brand \"Rip App\"\n          .nav-links\n            a.('nav-link', @router.path is '/' and 'active') href: \"#/\", \"Home\"\n            a.('nav-link', @router.path is '/counter' and 'active') href: \"#counter\", \"Counter\"\n            a.('nav-link', @router.path is '/todos' and 'active') href: \"#todos\", \"Todos\"\n            a.('nav-link', @router.path is '/about' and 'active') href: \"#about\", \"About\"\n            if @router.navigating\n              span.nav-loading \"Loading...\"\n      main.app-main\n        if errorMsg\n          .error-banner\n            p \"Something went wrong: #{errorMsg}\"\n            button.btn @click: (-> errorMsg = null), \"Dismiss\"\n        #content\n"
   },
   "data": {
-    "title": "Rip UI Demo"
+    "title": "Rip App Demo"
   }
 }

package/docs/extensions/duckdb/index.html

@@ -36,15 +36,17 @@
 <p class="lead">A custom DuckDB extension repository. Install <code>ripdb</code> directly from this URL.</p>
 
 <h2>Install</h2>
-<pre><code>SET allow_unsigned_extensions = true;
+<pre><code>$ duckdb -unsigned
 INSTALL ripdb FROM 'PAGE_BASE_URL';
 LOAD ripdb;</code></pre>
 
 <p>
-  Custom-repository extensions are unsigned, so you need the
-  <code>allow_unsigned_extensions</code> setting — pass it on startup
-  (<code>duckdb -unsigned</code>) or <code>SET</code> it at the top of your
-  session before <code>LOAD</code>.
+  Custom-repository extensions are unsigned. Start DuckDB with the
+  <code>-unsigned</code> CLI flag — that's the only supported way to
+  enable unsigned-extension support. <code>SET allow_unsigned_extensions
+  = true;</code> from a running session is rejected with
+  <em>"Cannot change allow_unsigned_extensions setting while database is
+  running."</em>
 </p>
 
 <h2>Currently published</h2>

package/docs/extensions/duckdb/manifest.json

@@ -1,7 +1,7 @@
 {
   "extension": "ripdb",
   "base_url": "https://shreeve.github.io/rip-lang/extensions/duckdb",
-  "updated_at": "2026-04-21T12:35:40Z",
+  "updated_at": "2026-04-27T04:14:31Z",
   "versions": {
     "v1.5.2": [
       "linux_amd64",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rip-lang",
-  "version": "3.14.4",
+  "version": "3.15.0",
   "description": "A modern language that compiles to JavaScript",
   "type": "module",
   "main": "src/compiler.js",
@@ -17,6 +17,9 @@
     },
     "./loader": "./rip-loader.js"
   },
+  "dependencies": {
+    "@rip-lang/schema": "0.1.0"
+  },
   "bin": {
     "rip": "bin/rip"
   },
@@ -34,6 +37,7 @@
     "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'",
     "parser": "bun src/grammar/solar.rip -o src/parser.js src/grammar/grammar.rip",
     "postinstall": "bun scripts/link-local.js --quiet && bun scripts/link-check.js --quiet",
     "link-local": "bun scripts/link-local.js",
@@ -42,10 +46,14 @@
     "serve": "bun scripts/serve.js",
     "test": "bun test/runner.js",
     "test:types": "bun test/types/runner.js",
-    "test:singleton": "bun test/schema-singleton.test.js",
+    "test:schema": "bun run --cwd packages/schema test",
+    "test:schema-fresh": "bun run --cwd packages/schema test:runtime-fresh",
+    "build:schema-runtime": "bun run --cwd packages/schema build:runtime",
+    "test:bundle": "bun test/bundle.test.js",
+    "test:graph": "bun scripts/check-bundle-graph.js",
     "test:server": "./bin/rip packages/server/tests/runner.rip",
     "test:time": "bun run --cwd packages/time test",
-    "test:all": "bun run test && bun run test:types && bun run test:singleton && bun run test:server && bun run test:time",
+    "test:all": "bun run test && bun run test:types && bun run test:schema && bun run test:schema-fresh && bun run test:graph && bun run test:bundle && bun run test:server && bun run test:time",
     "test:ui": "bun run --cwd packages/ui test:e2e",
     "test:ui:chromium": "bun run --cwd packages/ui test:e2e:chromium",
     "test:ui:axe": "bun run --cwd packages/ui test:e2e:axe",

package/src/AGENTS.md

@@ -1,6 +1,77 @@
 # Compiler Subsystem — Agent Guide
 
-This covers `compiler.js`, `lexer.js`, `components.js`, `browser.js`, `types.js`, `typecheck.js`, and the `grammar/` directory.
+This covers `compiler.js`, `lexer.js`, `components.js`, `browser.js`, `types.js`, `types-emit.js`, `app.rip`, `typecheck.js`, and the `grammar/` directory. The schema feature lives in `packages/schema/` (entry point `packages/schema/src/schema.js`, imported here as `@rip-lang/schema`); see `packages/schema/README.md` for its layout.
+
+---
+
+## 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.
+
+| 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 |
+| `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 |
+| `packages/schema/src/schema.js` | yes (via `@rip-lang/schema`) | lexer rewrite + body parser + emitSchema codegen + `setSchemaRuntimeProvider` hook (no fragment imports) |
+| `packages/schema/src/loader-browser.js` | yes (browser only, via `@rip-lang/schema/loader-browser`) | imports validate + browser-stubs fragments; eager-installs browser runtime; registers provider |
+| `packages/schema/src/loader-server.js` | **no** (CLI / server / tests, via `@rip-lang/schema/loader-server`) | imports all five fragments; eager-installs migration runtime; registers provider |
+| `packages/schema/src/runtime.generated.js` | yes (browser uses 2 of 5 exports) | autogen from `runtime-*.js` fragments; CI staleness check via `bun run test:schema-fresh` |
+| `packages/schema/src/runtime-validate.js` | source for the `validate` fragment (universal) |
+| `packages/schema/src/runtime-db-naming.js` | source for `db-naming` fragment (server + migration) |
+| `packages/schema/src/runtime-orm.js` | source for `orm` fragment (server + migration) |
+| `packages/schema/src/runtime-ddl.js` | source for `ddl` fragment (migration only) |
+| `packages/schema/src/runtime-browser-stubs.js` | source for `browser-stubs` fragment (browser only) |
+| `src/types.js` | yes | only `installTypeSupport(Lexer)` — token-stream type stripper |
+| `src/error.js` | yes | runtime error formatting |
+| `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 |
+| `packages/schema/src/dts-emit.js` | **no** | schema `.d.ts` emitter — CLI / typecheck only |
+| `src/typecheck.js` | **no** | TypeScript LSP integration — CLI only |
+| `src/repl.js` | **no** | interactive CLI REPL |
+
+The forbidden list in `scripts/check-bundle-graph.js` enforces this. If a code change would put a forbidden module on the browser graph, `bun run build` aborts before the bundler runs.
+
+### Registration-hook pattern (`setTypesEmitter`, `setSchemaRuntimeProvider`)
+
+The same pattern is used twice — once for `.d.ts` emission, once for the schema runtime body. Both make the bundler's tree-shaker keep CLI/server-only code out of the browser bundle.
+
+`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`:
+
+```javascript
+// CLI entry — bin/rip
+import '../src/types-emit.js';   // installs emitter
+
+// LSP integration
+import { ... } from './types-emit.js';
+
+// Test runner that exercises type emission
+import '../src/types-emit.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.
+
+**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';`.
+
+The schema runtime uses an analogous hook: `packages/schema/src/schema.js` exports `setSchemaRuntimeProvider(fn)`, default null. `packages/schema/src/loader-server.js` and `packages/schema/src/loader-browser.js` are the two providers. CLI / tests / server side-effect-import `@rip-lang/schema/loader-server` (full migration runtime, all four modes). The browser bundle (`src/browser.js`) side-effect-imports `@rip-lang/schema/loader-browser` (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.
+
+The mode matrix exposed by `getSchemaRuntime({ mode })`:
+
+| mode | composition | typical caller |
+| --- | --- | --- |
+| `validate` | VALIDATE | isomorphic validate-only contexts |
+| `browser` | VALIDATE + BROWSER_STUBS | the `<script type="text/rip">` runtime |
+| `server` | VALIDATE + DB_NAMING + ORM | `@rip-lang/server` and friends |
+| `migration` | VALIDATE + DB_NAMING + ORM + DDL | CLI / migration tool / tests (default) |
+
+Edits to `packages/schema/src/runtime-*.js` require running `bun run build:schema-runtime` (delegates to the schema package) to regenerate `runtime.generated.js`. CI fails (`bun run test:schema-fresh`) if the generated file is stale.
 
 ---
 
@@ -552,12 +623,14 @@ enum Status
 
 ### Architecture
 
-Type emission logic lives in `types.js`. Type-checking integration and diagnostic filtering live in `typecheck.js`.
+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()`.
+
+`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.
 
-- `installTypeSupport(Lexer)` adds `rewriteTypes()`
-- `emitTypes(tokens)` emits `.d.ts`
-- `emitEnum()` emits runtime JS for enums
-- `typecheck.js` drives `rip check` and mediates TypeScript diagnostics
+`typecheck.js` (CLI only) drives `rip check`, mediates TypeScript diagnostics, and side-effect-imports `types-emit.js` for the intrinsic decl tables.
 
 Types are processed at the token layer before parsing.
 
@@ -569,8 +642,31 @@ Types are processed at the token layer before parsing.
 
 ## Schema System
 
-Inline schemas are a third compiler sidecar — `schema.js` — that parallels
-`types.js` and `components.js`.
+Inline schemas are a compiler sidecar that parallels `types.js` and
+`components.js`, but unlike those two it lives in its own workspace
+package — `packages/schema/`, imported here as `@rip-lang/schema`. The
+implementation is split across several files by execution context:
+
+- `packages/schema/src/schema.js` (browser + server) — lexer rewrite,
+  body parsers, `emitSchema` codegen, and `setSchemaRuntimeProvider`
+  hook. The runtime body itself is **not** here; this file imports zero
+  fragments so the bundler can decide per-entry which fragments to include.
+- `packages/schema/src/runtime-{validate,db-naming,orm,ddl,browser-stubs}.js`
+  (sources) and `packages/schema/src/runtime.generated.js` (autogen) —
+  five runtime fragments composed at call time by `getSchemaRuntime({ mode })`.
+  Edit a source fragment, run `bun run build:schema-runtime` to refresh
+  the generated file, commit. CI's `test:schema-fresh` fails on staleness.
+- `@rip-lang/schema/loader-server` and `@rip-lang/schema/loader-browser`
+  — the import boundary that decides which fragments end up in which
+  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`.
+- `@rip-lang/schema/dts-emit` (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`. Lives inside `packages/schema/src/`
+  so all schema-related code is colocated; the `dts-emit` name signals
+  that this is a compile-time `.d.ts` emitter, not a `runtime-*` fragment.
 
 ### Lexer path
 
@@ -669,7 +765,7 @@ signatures both enforce this.
   `@ensure` entirely (trusted data). Runtime method name
   `_applyEnsures` mirrors the directive (parallel to
   `_applyTransforms` for `-> transform` and `_applyEagerDerived` for
-  `!> derived`). See `src/schema.js`.
+  `!> derived`). See `packages/schema/src/schema.js`.
 
 ### Shadow TS
 

package/src/{ui.rip → app.rip}

@@ -761,7 +761,16 @@ compileAndImport = (source, compile, components = null, path = null, resolver =
     resolver.compiling ?= {}
     resolver.compiling[path] = true
 
-  js = compile(source)
+  # Browser-debugger support — when enabled, compile with an inline source
+  # map keyed to the component's logical path. We still need to compensate
+  # for line shifts introduced by the header + preamble we prepend below;
+  # `prefixLines` tracks that and we apply `offsetSourceMap` once at the end.
+  debug = globalThis?.__ripDebug?.enabled and path
+  prefixLines = 0
+  js = if debug
+    compile(source, sourceMap: 'inline', filename: path)
+  else
+    compile(source)
 
   if resolver
     importedNames = new Set()
@@ -812,9 +821,21 @@ compileAndImport = (source, compile, components = null, path = null, resolver =
     if names.length > 0
       preamble = "const {#{names.join(', ')}} = globalThis['#{resolver.key}'];\n"
       js = preamble + js
+      prefixLines += 1
 
   header = if path then "// #{path}\n" else ''
-  blob = new Blob([header + js], { type: 'application/javascript' })
+  prefixLines += 1 if header
+  finalJs = header + js
+
+  # Source-map post-processing: prepend N semicolons to map.mappings so
+  # generated lines line up with `header + preamble + js`. The Blob URL
+  # itself becomes the source identity in DevTools, so an explicit
+  # //# sourceURL pragma isn't needed here (only for eval'd code).
+  if debug and prefixLines > 0
+    offset = globalThis?.__ripDebug?.offsetSourceMap
+    finalJs = offset(finalJs, prefixLines) if offset
+
+  blob = new Blob([finalJs], { type: 'application/javascript' })
   url = URL.createObjectURL(blob)
 
   # Cache blob URL so other files can rewrite imports to point here
@@ -1171,6 +1192,7 @@ export launch = (appBase = '', opts = {}) ->
       components: appComponents
       router: router
       renderer: renderer
+      resolver: resolver
       cache: renderer.cache
       version: '0.3.0'
 

package/src/browser.js

@@ -1,6 +1,12 @@
 // Browser-compatible entry point for Rip compiler
 // Includes runtime for <script type="text/rip"> support
 
+// Side-effect import — registers the BROWSER schema runtime provider.
+// Pulls in only the validate + browser-stubs fragments; tree-shakes
+// db-naming, orm, and ddl fragments out of the bundle. Must be the
+// first import so any later module-load eager-installs see it.
+import '@rip-lang/schema/loader-browser';
+
 export { Lexer } from './lexer.js';
 export { parser } from './parser.js';
 export { CodeEmitter, Compiler, compile, compileToJS, formatSExpr, getStdlibCode, getReactiveRuntime, getComponentRuntime, RipError, formatError, formatErrorHTML } from './compiler.js';
@@ -14,7 +20,7 @@ export const BUILD_DATE = "0000-00-00@00:00:00GMT";
 import { compile, compileToJS, formatSExpr, getReactiveRuntime, getComponentRuntime } from './compiler.js';
 
 // Eagerly register Rip's reactive and component runtimes on globalThis so that
-// framework code (ui.rip) and browser-compiled scripts can use them directly
+// framework code (app.rip) and browser-compiled scripts can use them directly
 if (typeof globalThis !== 'undefined') {
   if (!globalThis.__rip) new Function(getReactiveRuntime())();
   if (!globalThis.__ripComponent) new Function(getComponentRuntime())();
@@ -26,6 +32,90 @@ const dedent = s => {
   return s.replace(RegExp(`^[ \t]{${i}}`, 'gm'), '').trim();
 }
 
+// ---------------------------------------------------------------------------
+// Source-map helpers — for browser-side debugger + DevTools navigation.
+//
+// `compileToJS(src, { sourceMap: 'inline', filename: <name>.rip })` returns
+// JS with a trailing `//# sourceMappingURL=data:application/json;base64,...`
+// comment. We add a leading `//# sourceURL=<name>.rip.js` so DevTools shows
+// the eval'd code as a navigable virtual file (named differently than the
+// source-map's `sources[]` entry to avoid DevTools merging entries).
+//
+// CR/LF in the `sourceURL` would let an attacker inject another pragma; sanitize.
+// ---------------------------------------------------------------------------
+
+const sanitizeSourceURL = (url) =>
+  String(url).replace(/[\r\n]/g, '').replace(/\s+$/g, '');
+
+// Insert `//# sourceURL=<name>` BEFORE the existing `//# sourceMappingURL=...`
+// comment (or append at end if none). NEVER prepend — that would shift every
+// generated-line mapping by 1 line, breaking line-only source maps.
+function addSourceURL(js, generatedName) {
+  const safe = sanitizeSourceURL(generatedName);
+  const pragma = `//# sourceURL=${safe}`;
+  const mapRe = /\n?\/\/# sourceMappingURL=[^\n]*\s*$/;
+  const m = js.match(mapRe);
+  if (m) return js.slice(0, m.index) + '\n' + pragma + js.slice(m.index);
+  return js + '\n' + pragma;
+}
+
+// Shift all generated-line mappings by N lines by prepending N semicolons to
+// the `mappings` field. Each `;` in source-map V3 mappings represents an empty
+// generated line. Used to compensate for a runtime async IIFE wrapper that
+// adds N lines BEFORE the compiled code.
+function offsetSourceMap(js, offsetLines) {
+  if (!offsetLines) return js;
+  return js.replace(
+    /\/\/# sourceMappingURL=data:application\/json;base64,([A-Za-z0-9+/=]+)/,
+    (_, b64) => {
+      let json;
+      try {
+        // UTF-8-safe decode: counterpart of the encode in compiler.js. The
+        // map JSON may contain non-ASCII chars (sourcesContent), so we go
+        // bytes -> string via TextDecoder.
+        const bin = atob(b64);
+        const bytes = new Uint8Array(bin.length);
+        for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);
+        json = new TextDecoder().decode(bytes);
+      } catch { return _; /* leave unchanged on decode failure */ }
+      let map;
+      try { map = JSON.parse(json); } catch { return _; }
+      map.mappings = ';'.repeat(offsetLines) + map.mappings;
+      // UTF-8-safe re-encode.
+      const bytes = new TextEncoder().encode(JSON.stringify(map));
+      let out = '';
+      for (let i = 0; i < bytes.length; i++) out += String.fromCharCode(bytes[i]);
+      return `//# sourceMappingURL=data:application/json;base64,${btoa(out)}`;
+    }
+  );
+}
+
+// Wrap compiled JS in an async IIFE for top-level await support, applying the
+// 1-line source-map offset that the wrapper introduces, AND adding a
+// `sourceURL` pragma so DevTools shows the eval'd code with a sensible name.
+function wrapForEval(js, ripName) {
+  const generatedName = `${sanitizeSourceURL(ripName)}.js`;
+  const shifted = offsetSourceMap(js, 1);
+  const tagged = addSourceURL(shifted, generatedName);
+  return `(async()=>{\n${tagged}\n})()`;
+}
+
+// Expose the helpers on globalThis so `app.rip` (compiled separately into
+// the bundle) can apply the same source-map post-processing to its
+// component-load path. The `enabled` flag is owned by processRipScripts —
+// when it reads `data-debug` from the runtime <script> tag, it sets this
+// flag accordingly. Code paths outside processRipScripts (notably
+// `app.launch()`'s component compile path) gate their source-map work on
+// __ripDebug.enabled.
+if (typeof globalThis !== 'undefined') {
+  globalThis.__ripDebug = {
+    enabled: true,    // default ON — processRipScripts may flip to false
+    offsetSourceMap,
+    addSourceURL,
+    sanitizeSourceURL,
+  };
+}
+
 // Browser runtime: collect all sources (inline scripts, data-src files, bundles),
 // compile them in a shared scope, and execute as one async IIFE.
 //
@@ -85,27 +175,35 @@ async function processRipScripts() {
     // for full routing support. Otherwise compile everything upfront.
     if (hasRouter && bundles.length > 0) {
       // Compile non-bundle sources (inline scripts, individual .rip files)
-      const opts = { skipRuntimes: true, skipExports: true, skipImports: true };
-      if (individual.length > 0) {
-        let js = '';
-        for (const s of individual) {
-          try { js += compileToJS(s.code, opts) + '\n'; }
-          catch (e) { console.error(_formatError(e, { source: s.code, file: s.url || 'inline', color: false })); }
-        }
-        if (js) {
-          try { await (0, eval)(`(async()=>{\n${js}\n})()`); }
-          catch (e) { console.error('Rip runtime error:', e); }
-        }
+      // with per-component source maps for browser-debugger support. The
+      // bundle itself is launched separately via `app.launch(bundle)` —
+      // its components get source maps too via `globalThis.__ripDebug`,
+      // which `app.rip`'s component-compile path reads to apply the same
+      // offset+sourceURL treatment we apply here.
+      const debug = runtimeTag?.getAttribute('data-debug') !== 'false';
+      if (globalThis.__ripDebug) globalThis.__ripDebug.enabled = debug;
+      const baseOpts = { skipRuntimes: true, skipExports: true, skipImports: true };
+      let inlineCounter = 0;
+      for (const s of individual) {
+        const ripName = s.url || `inline-${++inlineCounter}.rip`;
+        const opts = debug
+          ? { ...baseOpts, sourceMap: 'inline', filename: ripName }
+          : baseOpts;
+        let js;
+        try { js = compileToJS(s.code, opts); }
+        catch (e) { console.error(_formatError(e, { source: s.code, file: ripName, color: false })); continue; }
+        try { await (0, eval)(debug ? wrapForEval(js, ripName) : `(async()=>{\n${js}\n})()`); }
+        catch (e) { console.error(`Rip runtime error in ${ripName}:`, e); }
       }
 
       // Launch with the last bundle (app bundle) — handles router, renderer, stash
-      const ui = importRip.modules?.['ui.rip'];
-      if (ui?.launch) {
+      const app = importRip.modules?.['app.rip'];
+      if (app?.launch) {
         const appBundle = bundles[bundles.length - 1];
         const persistAttr = runtimeTag.getAttribute('data-persist');
         const launchOpts = { bundle: appBundle, hash: routerAttr === 'hash' };
         if (persistAttr != null) launchOpts.persist = persistAttr === 'local' ? 'local' : true;
-        await ui.launch('', launchOpts);
+        await app.launch('', launchOpts);
       }
     } else {
       // No routing — expand bundles into individual sources, compile everything
@@ -124,15 +222,29 @@ async function processRipScripts() {
       }
       expanded.push(...individual);
 
-      const opts = { skipRuntimes: true, skipExports: true, skipImports: true };
+      // Source maps are ON by default — `data-debug="false"` opts out.
+      // Individually compile each source with its own source map; we'll
+      // sequentially eval them per-component so each has a self-consistent
+      // map (DevTools only honours the last sourceMappingURL inside an
+      // eval, so concatenating maps doesn't work).
+      const debug = runtimeTag?.getAttribute('data-debug') !== 'false';
+      // Update the global flag so app.launch()'s compile path (in app.rip)
+      // sees the same setting as our local `debug` variable.
+      if (globalThis.__ripDebug) globalThis.__ripDebug.enabled = debug;
+      const baseOpts = { skipRuntimes: true, skipExports: true, skipImports: true };
       const compiled = [];
+      let inlineCounter = 0;
       for (const s of expanded) {
         if (!s.code) continue;
+        const ripName = s.url || `inline-${++inlineCounter}.rip`;
+        const opts = debug
+          ? { ...baseOpts, sourceMap: 'inline', filename: ripName }
+          : baseOpts;
         try {
           const js = compileToJS(s.code, opts);
-          compiled.push({ js, url: s.url || 'inline' });
+          compiled.push({ js, url: ripName });
         } catch (e) {
-          console.error(_formatError(e, { source: s.code, file: s.url || 'inline', color: false }));
+          console.error(_formatError(e, { source: s.code, file: ripName, color: false }));
         }
       }
 
@@ -157,30 +269,35 @@ async function processRipScripts() {
         }
       }
 
-      // Execute all compiled code in shared scope
+      // Execute compiled code per-component so each has its own valid
+      // source map (DevTools only honours the last `sourceMappingURL`
+      // pragma inside one evaluated chunk, so concatenating multiple
+      // source-mapped chunks would lose all but the last). Components
+      // share scope via globalThis attachment — typical Rip definitions
+      // (`Foo = component`, `Bar = ...`) compile to globalThis-attached
+      // bindings under `skipExports/skipImports`, which survive between
+      // the per-component evals.
       if (compiled.length > 0) {
-        let js = compiled.map(c => c.js).join('\n');
+        let anyError = false;
+        for (const c of compiled) {
+          try {
+            await (0, eval)(debug ? wrapForEval(c.js, c.url) : `(async()=>{\n${c.js}\n})()`);
+          } catch (e) {
+            anyError = true;
+            if (e instanceof SyntaxError) console.error(`Rip syntax error in ${c.url}: ${e.message}`);
+            else console.error(`Rip runtime error in ${c.url}:`, e);
+          }
+        }
 
+        // Final mount step — runs after all components are defined.
         const mount = runtimeTag?.getAttribute('data-mount');
         if (mount) {
           const target = runtimeTag.getAttribute('data-target') || 'body';
-          js += `\n${mount}.mount(${JSON.stringify(target)});`;
+          try { await (0, eval)(`(async()=>{ ${mount}.mount(${JSON.stringify(target)}); })()`); }
+          catch (e) { console.error(`Rip mount error (${mount}):`, e); }
         }
 
-        try {
-          await (0, eval)(`(async()=>{\n${js}\n})()`);
-          document.body.classList.add('ready');
-        } catch (e) {
-          if (e instanceof SyntaxError) {
-            console.error(`Rip syntax error in combined output: ${e.message}`);
-            for (const c of compiled) {
-              try { new Function(`(async()=>{\n${c.js}\n})()`); }
-              catch (e2) { console.error(`  → source: ${c.url}`, e2.message); }
-            }
-          } else {
-            console.error('Rip runtime error:', e);
-          }
-        }
+        if (!anyError) document.body.classList.add('ready');
       }
     }
   }
@@ -232,10 +349,10 @@ export { processRipScripts };
 /**
  * Import a .rip file as an ES module
  * Fetches the URL, compiles Rip→JS, dynamically imports via Blob URL
- * Usage: const { launch } = await importRip('/ui.rip')
+ * Usage: const { launch } = await importRip('/app.rip')
  *
  * Pre-compiled modules can be registered on importRip.modules to skip fetching.
- * The browser bundle uses this to embed ui.rip without a server round-trip.
+ * The browser bundle uses this to embed app.rip without a server round-trip.
  */
 export async function importRip(url) {
   for (const [key, mod] of Object.entries(importRip.modules)) {