caspian-utils 0.1.3 → 0.1.4

package/dist/docs/pulsepoint-runtime-map.md

@@ -37,12 +37,12 @@ If an inspected browser DOM disagrees with authored template source, remember th
 | State | `pp.state(initial)` | `pp-reactive-v2.js` | setters accept values or updater functions, state belongs to the component instance |
 | Effects | `pp.effect(...)`, `pp.layoutEffect(...)` | `pp-reactive-v2.js` | callbacks may return cleanup functions, promises are not awaited |
 | Refs | `pp.ref(...)`, `pp-ref` | `pp-reactive-v2.js` | generated ref internals are runtime-managed; do not author `data-pp-ref` |
-| Context | `pp.createContext(...)`, lowercase `<themecontext.provider>`, `pp.context(token)` | `TemplateCompiler.ts`, `NestedBoundaryManager.ts`, `pp-reactive-v2.js` | authored provider tags are HTML-first and lowercase; `TemplateCompiler.transformContextProviderTags(...)` rewrites `*.provider` to runtime-owned `pp-context-provider`; ancestry is logical component ancestry; do not invent `pp-context` or `pp.provideContext` |
+| Context | `pp.createContext(...)`, lowercase `<themecontext.provider>`, `pp.context(token)` | `TemplateCompiler.ts`, `NestedBoundaryManager.ts`, `pp-reactive-v2.js` | authored provider tags are HTML-first and lowercase; `TemplateCompiler.transformContextProviderTags(...)` rewrites `*.provider` to runtime-owned `pp-context-provider`; ancestry is logical component ancestry; do not invent `pp-context` or `pp.provideContext` |
 | Portals | `pp.portal(ref, target?)` | `pp-reactive-v2.js` | context should preserve logical ancestry through the registry |
 | Lists | `<template pp-for="item in items">` | `pp-reactive-v2.js` | `pp-for` belongs on `<template>`, use plain `key`, not `pp-key` |
-| Events | native `onclick`, `oninput`, `onchange`, `onsubmit` | `pp-reactive-v2.js` | first-party events belong in `on*` attributes; event scope exposes `event`, `e`, `$event`, `target`, `currentTarget`, and `el`; normal form submits should use `Object.fromEntries(new FormData(event.currentTarget).entries())` instead of per-input refs; avoid id-driven `querySelector`/`addEventListener` for normal UI |
+| Events | native `onclick`, `oninput`, `onchange`, `onsubmit` | `pp-reactive-v2.js` | first-party events belong in `on*` attributes; event scope exposes `event`, `e`, `$event`, `target`, `currentTarget`, and `el`; normal form submits should use `Object.fromEntries(new FormData(event.currentTarget).entries())` instead of per-input refs; avoid id-driven `querySelector`/`addEventListener` for normal UI |
 | RPC | `pp.rpc(...)` in scripts, `@rpc()` in Python | `pp-reactive-v2.js`, `casp/rpc.py` | use `pp.rpc`, not legacy `pp.fetchFunction`; protected actions use `@rpc(require_auth=True)` |
-| Upload progress | `pp.rpc(..., { onUploadProgress })` | `pp-reactive-v2.js`, `casp/rpc.py` | XHR path is used for progress callbacks; replace state from returned payload |
+| Upload progress | `pp.rpc(..., { onUploadProgress })` | `pp-reactive-v2.js`, `casp/rpc.py` | XHR path is used for progress callbacks; the callback receives `{ loaded, total, percent }` and `percent` can be `null` when length is not computable; replace state from returned payload |
 | Streaming | `pp.rpc(..., { onStream })` | `pp-reactive-v2.js`, `casp/rpc.py`, `casp/streaming.py` | server generators become SSE responses |
 | SPA navigation | `body[pp-spa="true"]`, links | `pp-reactive-v2.js`, `main.py` | same-origin eligible links intercept; root-layout mismatches hard reload |
 | Scroll restoration | `pp-reset-scroll="true"` | `pp-reactive-v2.js` | push navigation resets window; mark only content panes that should reset |
@@ -63,32 +63,32 @@ If an inspected browser DOM disagrees with authored template source, remember th
 - Author one root element or one imported `x-*` root per route, layout, or component template.
 - Keep any owned plain `<script>` inside that same root.
 - Do not handwrite `pp-component`, `type="text/pp"`, `data-pp-ref`, `pp-owner`, `pp-event-owner`, or other runtime-managed attributes.
-- Use `pp.rpc(...)` for current browser-to-server calls.
-- Use native `on*` attributes for button clicks, form submits, input changes, filters, toggles, and menus instead of adding ids and manual listeners.
-- For ordinary form submits, bind `onsubmit` on the form and read named fields with `Object.fromEntries(new FormData(event.currentTarget).entries())`; reserve `pp-ref` for imperative access rather than routine payload collection.
-- Use lowercase provider tags such as `<themecontext.provider>` and `pp.context(...)` for context.
+- Use `pp.rpc(...)` for current browser-to-server calls.
+- Use native `on*` attributes for button clicks, form submits, input changes, filters, toggles, and menus instead of adding ids and manual listeners.
+- For ordinary form submits, bind `onsubmit` on the form and read named fields with `Object.fromEntries(new FormData(event.currentTarget).entries())`; reserve `pp-ref` for imperative access rather than routine payload collection.
+- Use lowercase provider tags such as `<themecontext.provider>` and `pp.context(...)` for context.
 - Use `pp-for` only on `<template>` and plain `key` for keyed lists.
 - Prefer PulsePoint state and directives over manual `innerHTML` repainting.
 - Keep direct DOM APIs inside `pp.ref(...)` plus `pp.effect(...)` only when a third-party or browser API integration actually requires them.
 
 ## Compact Examples
 
-Context provider:
-
-```html
-<section>
-  <script>
-    const ThemeContext = pp.createContext("light");
+Context provider:
+
+```html
+<section>
+  <script>
+    const ThemeContext = pp.createContext("light");
     const [theme, setTheme] = pp.state("dark");
   </script>
 
-  <themecontext.provider value="{theme}">
-    <button onclick="setTheme(theme === 'dark' ? 'light' : 'dark')">
-      Theme: {theme}
-    </button>
-  </themecontext.provider>
-</section>
-```
+  <themecontext.provider value="{theme}">
+    <button onclick="setTheme(theme === 'dark' ? 'light' : 'dark')">
+      Theme: {theme}
+    </button>
+  </themecontext.provider>
+</section>
+```
 
 Upload progress:
 
@@ -104,7 +104,7 @@ Upload progress:
       if (!file) return;
 
       await pp.rpc("upload_asset", { file }, {
-        onUploadProgress: (event) => setProgress(event.percentage ?? 0),
+        onUploadProgress: (event) => setProgress(Math.round(event.percent ?? 0)),
       });
     }
   </script>
@@ -115,11 +115,11 @@ Grouped shell scroll reset:
 
 ```html
 <section class="dashboard-shell">
-  <aside class="dashboard-sidebar">...</aside>
-  <main class="dashboard-content" pp-reset-scroll="true">
-    <slot />
-  </main>
-</section>
+  <aside class="dashboard-sidebar">...</aside>
+  <main class="dashboard-content" pp-reset-scroll="true">
+    <slot />
+  </main>
+</section>
 ```
 
 ## Verification Prompts

package/dist/docs/pulsepoint.md

@@ -26,6 +26,19 @@ PulsePoint is the default reactive frontend layer for Caspian. In the current ru
 
 Do not assume React, Vue, Svelte, JSX, Alpine, HTMX, or older PulsePoint docs unless the task explicitly asks for a different frontend contract.
 
+## Hard Invariants
+
+Apply these before generating any template, even without reading the rest of this page:
+
+1. One authored top-level root per route, layout, or component template; the owned plain `<script>` lives inside that root, never as a sibling.
+2. Never handwrite `pp-component`, `type="text/pp"`, `data-pp-ref`, or other runtime-managed attributes; the render pipeline injects them.
+3. Bind first-party events with native `on*` attributes in the HTML; never wire normal UI with ids, `querySelector`, `addEventListener`, or manual `innerHTML`.
+4. For ordinary form submits, use `onsubmit="{handler(event)}"` plus `Object.fromEntries(new FormData(event.currentTarget).entries())`; refs are for imperative access only.
+5. Keep reactive values in `pp.state(...)`; keep template-facing bindings at the top level of the script.
+6. Call the backend with `pp.rpc(...)` backed by Python `@rpc()` actions; do not invent fetch wrappers or `pp.fetchFunction()`.
+7. `pp-for` goes only on `<template>` with plain `key`; context uses `pp.createContext(...)`, a lowercase `<token.provider>` tag, and `pp.context(token)`.
+8. If an API is not in `public/js/pp-reactive-v2.js`, it does not exist; do not invent hooks, directives, or globals.
+
 ## Source Of Truth
 
 When documenting or generating PulsePoint code, follow this order:
@@ -48,245 +61,209 @@ Use [core-runtime-map.md](./core-runtime-map.md) when the controlling runtime fi
 
 Use [pulsepoint-runtime-map.md](./pulsepoint-runtime-map.md) when the task names a specific PulsePoint feature or directive and you need a quick feature-to-runtime lookup before reading the full guide.
 
-## Default Frontend Rule
-
-When a Caspian page needs reactive browser behavior, use PulsePoint.
-
-- Use PulsePoint component roots, scripts, directives, and runtime helpers for interactive UI.
-- Use PulsePoint state, effects, refs, and template directives as the default reactivity model in authored Caspian templates.
-- Bind first-party events in the HTML with PulsePoint-handled native `on*` attributes such as `onclick`, `oninput`, `onchange`, and `onsubmit`.
-- For ordinary forms, bind the submit event in the `<form>` and collect named fields with `Object.fromEntries(new FormData(event.currentTarget).entries())`. Let input `name` attributes define the payload keys, then validate and normalize those values in Python. Do not use `pp.ref(...)` on every input or an effect-managed listener just to read submitted values.
-- When the browser needs CRUD operations or follow-up reads from the backend, call `pp.rpc()` from PulsePoint code and back it with route or backend `@rpc()` actions.
-- Keep server-rendered HTML plus PulsePoint enhancement as the baseline architecture.
-- For dashboards, admin areas, account sections, docs sections, and other grouped subtrees, keep shared shell markup and shared PulsePoint behavior in the parent folder's `layout.html`, then keep child-route PulsePoint state local to each `index.html`. Follow the same mental model as the Next.js App Router.
-- Only introduce another frontend runtime when the user explicitly asks for it or the project already depends on one.
-
-## PulsePoint-First Events And Reactivity
-
-For first-party Caspian HTML, PulsePoint is not a later enhancement after ordinary JavaScript. It is the event, state, and reactivity model AI should use from the start.
-
-Default to this workflow:
-
-- Put the button, form, input, toggle, menu, filter, upload control, or list markup directly in the route, layout, or component HTML template.
-- Bind events with native `on*` attributes handled by PulsePoint, for example `onclick="save()"`, `oninput="setQuery(event.target.value)"`, or `onsubmit="{submitForm(event)}"`.
-- This is the PulsePoint `onClick`/native event-attribute model. Authored examples use lowercase HTML spellings such as `onclick` because browser HTML normalizes attribute names, but the important rule is to bind the event in the template instead of wiring it later with DOM selectors.
-- For simple form submissions, let HTML own the form shape and let the submit event carry the values: use `const data = Object.fromEntries(new FormData(event.currentTarget).entries())` inside the handler, then pass that object directly to `pp.rpc(...)`. In a form-level submit handler, `event.target` is usually the form too, but `event.currentTarget` is the copy-safe default because it always means the element that owns the handler.
-- Keep reactive values in `pp.state(...)`.
-- Render conditional text, classes, attributes, lists, and styles with template expressions, `pp-for`, `pp-style`, `pp-spread`, and other PulsePoint-supported template features.
-- Use `pp.ref(...)` and `pp-ref` when a real imperative element reference is needed, such as focus, measurement, media, canvas, third-party widgets, or resetting a specific file/password input after a successful action.
-- Use `pp.effect(...)` or `pp.layoutEffect(...)` for lifecycle work that must happen after render.
-- Use `pp.rpc(...)` for browser-triggered backend reads and writes.
-
-Avoid building a parallel JavaScript layer for normal UI behavior:
-
-- Do not add ids only so a script can find elements with `document.querySelector(...)` or `document.getElementById(...)`.
-- Do not use `data-*` attributes as a private client state system when PulsePoint state or props should own the data.
-- Do not create click-in buttons by placing intent in `data-*` attributes and then scanning for those attributes. Put the action directly on the element with `onclick`, `oninput`, `onchange`, `onsubmit`, or another native `on*` event attribute.
-- Do not bind normal first-party clicks, input changes, submits, filters, menus, or toggles with `addEventListener(...)`.
-- Do not use form refs plus input refs plus `pp.effect(...)` solely to construct an RPC payload from normal submitted fields.
-- Do not repaint first-party lists or panels with manual `innerHTML` writes when `pp.state(...)` plus `pp-for` can express the same UI.
-- Do not create a custom client-side store, event bus, or hydration routine for behavior that belongs in a PulsePoint component script.
-
-Use direct DOM APIs only as a narrow escape hatch: third-party widgets, browser APIs that require imperative access, measurements, focus, media, canvas, or behavior the current PulsePoint runtime cannot express declaratively. Even then, keep the imperative code inside the owning PulsePoint component script, usually through `pp.ref(...)` plus `pp.effect(...)`, so PulsePoint still owns the component's state, cleanup, and event flow.
-
-Preferred authored pattern:
-
-```html
-<section>
-  <input value="{query}" oninput="setQuery(event.target.value)" />
-  <button onclick="clearSearch()" disabled="{query.length === 0}">Clear</button>
-
-  <ul>
-    <template pp-for="item in filteredItems">
-      <li key="{item.id}">{item.label}</li>
-    </template>
-  </ul>
-
-  <script>
-    const [query, setQuery] = pp.state("");
-    const items = pp.props.items ?? [];
-    const filteredItems = items.filter((item) =>
-      item.label.toLowerCase().includes(query.toLowerCase())
-    );
-
-    function clearSearch() {
-      setQuery("");
-    }
-  </script>
-</section>
-```
-
-Avoid this first-party pattern:
-
-```html
-<section>
-  <input id="search" />
-  <button id="clear-search">Clear</button>
-  <ul id="results"></ul>
-
-  <script>
-    const input = document.querySelector("#search");
-    const button = document.querySelector("#clear-search");
-    const results = document.querySelector("#results");
-
-    button.addEventListener("click", () => {
-      input.value = "";
-      results.innerHTML = "";
-    });
-  </script>
-</section>
-```
-
-That second shape recreates a separate event and rendering system inside a Caspian component. It is harder to maintain because it bypasses PulsePoint's rerender, event rebinding, refs, cleanup, and backend RPC conventions.
-
-Preferred form submit pattern:
-
-```html
-<section>
-  <form onsubmit="{saveProfile(event)}" class="grid gap-4" novalidate>
-    <input name="name" value="{{ user_name }}" autocomplete="name" required />
-    <input name="email" type="email" value="{{ user_email }}" autocomplete="email" required />
-    <input name="password" type="password" autocomplete="new-password" />
-
-    <button type="submit" disabled="{isSubmitting}">
-      {isSubmitting ? "Saving..." : "Save changes"}
-    </button>
-  </form>
-
-  <script>
-    const [isSubmitting, setIsSubmitting] = pp.state(false);
-
-    async function saveProfile(event) {
-      event.preventDefault();
-      if (isSubmitting) return;
-
-      const data = Object.fromEntries(new FormData(event.currentTarget).entries());
-
-      setIsSubmitting(true);
-      try {
-        await pp.rpc("save_profile", data, { abortPrevious: true });
-      } finally {
-        setIsSubmitting(false);
-      }
-    }
-  </script>
-</section>
-```
-
-Avoid this for a normal form:
-
-```html
-<section>
-  <form pp-ref="{formRef}">
-    <input pp-ref="{nameRef}" name="name" />
-    <input pp-ref="{emailRef}" name="email" />
-  </form>
-
-  <script>
-    const formRef = pp.ref(null);
-    const nameRef = pp.ref(null);
-    const emailRef = pp.ref(null);
-
-    pp.effect(() => {
-      const form = formRef.current;
-      if (!form) return;
-
-      const submit = (event) => {
-        event.preventDefault();
-        return pp.rpc("save_profile", {
-          name: nameRef.current?.value ?? "",
-          email: emailRef.current?.value ?? "",
-        });
-      };
-
-      form.addEventListener("submit", submit);
-      return () => form.removeEventListener("submit", submit);
-    }, []);
-  </script>
-</section>
-```
-
-Refs are still useful when the feature actually requires imperative access. They are not the first choice for reading standard form fields that the browser already exposes through the submit event. Keep client code minimal and put reviewable data normalization in the route's Python `@rpc()` action unless the client must transform values for UX before submitting.
-
-Basic two-way state pattern:
-
-```html
-<section>
-  <label>
-    Name
-    <input name="name" value="{name}" oninput="setName(event.target.value)" />
-  </label>
-
-  <p>Hello, {name || "friend"}.</p>
-  <button onclick="setName('')">Clear</button>
-
-  <script>
-    const [name, setName] = pp.state("");
-  </script>
-</section>
-```
-
-Basic RPC-backed form pattern:
-
-```html
-<section>
-  <form onsubmit="{saveContact(event)}" novalidate>
-    <input name="name" value="{name}" oninput="setName(event.target.value)" required />
-    <input name="email" type="email" required />
-
-    <button type="submit" disabled="{isSaving}">
-      {isSaving ? "Saving..." : "Save"}
-    </button>
-  </form>
-
-  <script>
-    const [name, setName] = pp.state("");
-    const [isSaving, setIsSaving] = pp.state(false);
-
-    async function saveContact(event) {
-      event.preventDefault();
-      if (isSaving) return;
-
-      const data = Object.fromEntries(new FormData(event.currentTarget).entries());
-
-      setIsSaving(true);
-      try {
-        await pp.rpc("save_contact", data, { abortPrevious: true });
-      } finally {
-        setIsSaving(false);
-      }
-    }
-  </script>
-</section>
-```
-
-Back that form with a route-owned `@rpc()` action in the sibling `index.py`. If Prisma is enabled, the action should use the generated Prisma Python ORM for persistence.
-
-```python
-from casp.rpc import rpc
-from casp.validate import Validate
-from src.lib.prisma import prisma
-
-
-@rpc()
-async def save_contact(name: str, email: str):
-    name = name.strip()
-    email = email.strip().lower()
-
-    if not name:
-        raise ValueError("Name is required.")
-    if Validate.with_rules(email, "required|email") is not True:
-        raise ValueError("A valid email address is required.")
-
-    contact = await prisma.contact.create(
-        data={
-            "name": name,
-            "email": email,
-        }
-    )
-
-    return contact.to_dict()
-```
+## Default Frontend Rule
+
+When a Caspian page needs reactive browser behavior, use PulsePoint.
+
+- Use PulsePoint component roots, scripts, directives, and runtime helpers for interactive UI.
+- Use PulsePoint state, effects, refs, and template directives as the default reactivity model in authored Caspian templates.
+- Bind first-party events in the HTML with PulsePoint-handled native `on*` attributes such as `onclick`, `oninput`, `onchange`, and `onsubmit`.
+- For ordinary forms, bind the submit event in the `<form>` and collect named fields with `Object.fromEntries(new FormData(event.currentTarget).entries())`. Let input `name` attributes define the payload keys, then validate and normalize those values in Python. Do not use `pp.ref(...)` on every input or an effect-managed listener just to read submitted values.
+- When the browser needs CRUD operations or follow-up reads from the backend, call `pp.rpc()` from PulsePoint code and back it with route or backend `@rpc()` actions.
+- Keep server-rendered HTML plus PulsePoint enhancement as the baseline architecture.
+- For dashboards, admin areas, account sections, docs sections, and other grouped subtrees, keep shared shell markup and shared PulsePoint behavior in the parent folder's `layout.html`, then keep child-route PulsePoint state local to each `index.html`. Follow the same mental model as the Next.js App Router.
+- Only introduce another frontend runtime when the user explicitly asks for it or the project already depends on one.
+
+## PulsePoint-First Events And Reactivity
+
+For first-party Caspian HTML, PulsePoint is not a later enhancement after ordinary JavaScript. It is the event, state, and reactivity model AI should use from the start.
+
+Default to this workflow:
+
+- Put the button, form, input, toggle, menu, filter, upload control, or list markup directly in the route, layout, or component HTML template.
+- Bind events with native `on*` attributes handled by PulsePoint, for example `onclick="save()"`, `oninput="setQuery(event.target.value)"`, or `onsubmit="{submitForm(event)}"`.
+- This is the PulsePoint `onClick`/native event-attribute model. Authored examples use lowercase HTML spellings such as `onclick` because browser HTML normalizes attribute names, but the important rule is to bind the event in the template instead of wiring it later with DOM selectors.
+- For simple form submissions, let HTML own the form shape and let the submit event carry the values: use `const data = Object.fromEntries(new FormData(event.currentTarget).entries())` inside the handler, then pass that object directly to `pp.rpc(...)`. In a form-level submit handler, `event.target` is usually the form too, but `event.currentTarget` is the copy-safe default because it always means the element that owns the handler.
+- Keep reactive values in `pp.state(...)`.
+- Render conditional text, classes, attributes, lists, and styles with template expressions, `pp-for`, `pp-style`, `pp-spread`, and other PulsePoint-supported template features.
+- Use `pp.ref(...)` and `pp-ref` when a real imperative element reference is needed, such as focus, measurement, media, canvas, third-party widgets, or resetting a specific file/password input after a successful action.
+- Use `pp.effect(...)` or `pp.layoutEffect(...)` for lifecycle work that must happen after render.
+- Use `pp.rpc(...)` for browser-triggered backend reads and writes.
+
+Avoid building a parallel JavaScript layer for normal UI behavior:
+
+- Do not add ids only so a script can find elements with `document.querySelector(...)` or `document.getElementById(...)`.
+- Do not use `data-*` attributes as a private client state system when PulsePoint state or props should own the data.
+- Do not create click-in buttons by placing intent in `data-*` attributes and then scanning for those attributes. Put the action directly on the element with `onclick`, `oninput`, `onchange`, `onsubmit`, or another native `on*` event attribute.
+- Do not bind normal first-party clicks, input changes, submits, filters, menus, or toggles with `addEventListener(...)`.
+- Do not use form refs plus input refs plus `pp.effect(...)` solely to construct an RPC payload from normal submitted fields.
+- Do not repaint first-party lists or panels with manual `innerHTML` writes when `pp.state(...)` plus `pp-for` can express the same UI.
+- Do not create a custom client-side store, event bus, or hydration routine for behavior that belongs in a PulsePoint component script.
+
+Use direct DOM APIs only as a narrow escape hatch: third-party widgets, browser APIs that require imperative access, measurements, focus, media, canvas, or behavior the current PulsePoint runtime cannot express declaratively. Even then, keep the imperative code inside the owning PulsePoint component script, usually through `pp.ref(...)` plus `pp.effect(...)`, so PulsePoint still owns the component's state, cleanup, and event flow.
+
+Preferred authored pattern:
+
+```html
+<section>
+  <input value="{query}" oninput="setQuery(event.target.value)" />
+  <button onclick="clearSearch()" disabled="{query.length === 0}">Clear</button>
+
+  <ul>
+    <template pp-for="item in filteredItems">
+      <li key="{item.id}">{item.label}</li>
+    </template>
+  </ul>
+
+  <script>
+    const [query, setQuery] = pp.state("");
+    const items = pp.props.items ?? [];
+    const filteredItems = items.filter((item) =>
+      item.label.toLowerCase().includes(query.toLowerCase())
+    );
+
+    function clearSearch() {
+      setQuery("");
+    }
+  </script>
+</section>
+```
+
+Avoid this first-party pattern:
+
+```html
+<section>
+  <input id="search" />
+  <button id="clear-search">Clear</button>
+  <ul id="results"></ul>
+
+  <script>
+    const input = document.querySelector("#search");
+    const button = document.querySelector("#clear-search");
+    const results = document.querySelector("#results");
+
+    button.addEventListener("click", () => {
+      input.value = "";
+      results.innerHTML = "";
+    });
+  </script>
+</section>
+```
+
+That second shape recreates a separate event and rendering system inside a Caspian component. It is harder to maintain because it bypasses PulsePoint's rerender, event rebinding, refs, cleanup, and backend RPC conventions.
+
+Preferred form submit pattern:
+
+```html
+<section>
+  <form onsubmit="{saveProfile(event)}" class="grid gap-4" novalidate>
+    <input name="name" value="{{ user_name }}" autocomplete="name" required />
+    <input name="email" type="email" value="{{ user_email }}" autocomplete="email" required />
+    <input name="password" type="password" autocomplete="new-password" />
+
+    <button type="submit" disabled="{isSubmitting}">
+      {isSubmitting ? "Saving..." : "Save changes"}
+    </button>
+  </form>
+
+  <script>
+    const [isSubmitting, setIsSubmitting] = pp.state(false);
+
+    async function saveProfile(event) {
+      event.preventDefault();
+      if (isSubmitting) return;
+
+      const data = Object.fromEntries(new FormData(event.currentTarget).entries());
+
+      setIsSubmitting(true);
+      try {
+        await pp.rpc("save_profile", data, { abortPrevious: true });
+      } finally {
+        setIsSubmitting(false);
+      }
+    }
+  </script>
+</section>
+```
+
+Avoid this for a normal form:
+
+```html
+<section>
+  <form pp-ref="{formRef}">
+    <input pp-ref="{nameRef}" name="name" />
+    <input pp-ref="{emailRef}" name="email" />
+  </form>
+
+  <script>
+    const formRef = pp.ref(null);
+    const nameRef = pp.ref(null);
+    const emailRef = pp.ref(null);
+
+    pp.effect(() => {
+      const form = formRef.current;
+      if (!form) return;
+
+      const submit = (event) => {
+        event.preventDefault();
+        return pp.rpc("save_profile", {
+          name: nameRef.current?.value ?? "",
+          email: emailRef.current?.value ?? "",
+        });
+      };
+
+      form.addEventListener("submit", submit);
+      return () => form.removeEventListener("submit", submit);
+    }, []);
+  </script>
+</section>
+```
+
+Refs are still useful when the feature actually requires imperative access. They are not the first choice for reading standard form fields that the browser already exposes through the submit event. Keep client code minimal and put reviewable data normalization in the route's Python `@rpc()` action unless the client must transform values for UX before submitting.
+
+Back the form with a route-owned `@rpc()` action in the sibling `index.py`. If Prisma is enabled, the action should use the generated Prisma Python ORM for persistence.
+
+```python
+from casp.rpc import rpc
+from casp.validate import Validate
+from src.lib.prisma import prisma
+
+
+@rpc()
+async def save_profile(name: str, email: str, password: str = ""):
+    name = name.strip()
+    email = email.strip().lower()
+
+    if not name:
+        raise ValueError("Name is required.")
+    if Validate.with_rules(email, "required|email") is not True:
+        raise ValueError("A valid email address is required.")
+
+    profile = await prisma.user.update(
+        where={"email": email},
+        data={"name": name},
+    )
+
+    return profile.to_dict()
+```
+
+Basic two-way state pattern:
+
+```html
+<section>
+  <label>
+    Name
+    <input name="name" value="{name}" oninput="setName(event.target.value)" />
+  </label>
+
+  <p>Hello, {name || "friend"}.</p>
+  <button onclick="setName('')">Clear</button>
+
+  <script>
+    const [name, setName] = pp.state("");
+  </script>
+</section>
+```
 
 ## Authoring Model
 
@@ -447,14 +424,101 @@ Notes:
 - Keep template-facing bindings at the top level so the AST-based exporter can see them.
 - For predictable code generation, prefer passing an explicit dependency array to `pp.effect`, `pp.layoutEffect`, `pp.memo`, and `pp.callback`.
 
+Effect with cleanup and dependencies:
+
+```html
+<section>
+  <p>Elapsed: {seconds}s</p>
+  <button onclick="setRunning(!running)">{running ? "Pause" : "Resume"}</button>
+
+  <script>
+    const [seconds, setSeconds] = pp.state(0);
+    const [running, setRunning] = pp.state(true);
+
+    pp.effect(() => {
+      if (!running) return;
+      const id = setInterval(() => setSeconds((s) => s + 1), 1000);
+      return () => clearInterval(id);
+    }, [running]);
+  </script>
+</section>
+```
+
+Use the same shape for any subscription: attach in the effect body, detach in the returned cleanup. The cleanup also runs on component disposal, which is why route-owned `WebSocket` clients close their socket from a cleanup effect.
+
+Memoized derived value:
+
+```html
+<section>
+  <input value="{query}" oninput="setQuery(event.target.value)" />
+  <p>{visible.length} of {items.length} items</p>
+
+  <script>
+    const [query, setQuery] = pp.state("");
+    const items = pp.props.items ?? [];
+
+    const visible = pp.memo(
+      () => items.filter((item) => item.label.toLowerCase().includes(query.toLowerCase())),
+      [query]
+    );
+  </script>
+</section>
+```
+
+For cheap derivations, a plain top-level `const` recomputed each render is fine; reach for `pp.memo` when the computation is heavy or the result identity matters for dependencies.
+
+Reducer for multi-field update logic:
+
+```html
+<section>
+  <p>{cart.count} items, total {cart.total}</p>
+  <button onclick="dispatch({ type: 'add', price: 10 })">Add</button>
+  <button onclick="dispatch({ type: 'clear' })">Clear</button>
+
+  <script>
+    const [cart, dispatch] = pp.reducer((state, action) => {
+      if (action.type === "add") {
+        return { count: state.count + 1, total: state.total + action.price };
+      }
+      if (action.type === "clear") {
+        return { count: 0, total: 0 };
+      }
+      return state;
+    }, { count: 0, total: 0 });
+  </script>
+</section>
+```
+
+Portal pattern for overlays that must escape clipping ancestors:
+
+```html
+<div>
+  <button onclick="setOpen(true)">Open dialog</button>
+
+  <div pp-ref="dialogRef" hidden="{!open}" class="modal">
+    <p>Rendered under document.body.</p>
+    <button onclick="setOpen(false)">Close</button>
+  </div>
+
+  <script>
+    const [open, setOpen] = pp.state(false);
+    const dialogRef = pp.ref(null);
+
+    pp.portal(dialogRef);
+  </script>
+</div>
+```
+
+`pp.portal(ref)` moves the ref-managed element to `document.body` by default, or to the element passed as the second argument. Portaled content keeps its logical component ancestry, so context, props, and events keep working.
+
 ## Context
 
-Context is implemented in the current runtime with a React-style provider pattern rather than a legacy `pp.provideContext(...)` helper. Because Caspian templates are HTML-first, authored provider tags should be written in lowercase HTML form, for example `<themecontext.provider>`, even when the JavaScript token is named `ThemeContext`.
+Context is implemented in the current runtime with a React-style provider pattern rather than a legacy `pp.provideContext(...)` helper. Because Caspian templates are HTML-first, authored provider tags should be written in lowercase HTML form, for example `<themecontext.provider>`, even when the JavaScript token is named `ThemeContext`.
 
 How it works:
 
 - Create a token with `pp.createContext(defaultValue)`.
-- Provide a value with a lowercase provider tag such as `<themecontext.provider value="{theme}">`.
+- Provide a value with a lowercase provider tag such as `<themecontext.provider value="{theme}">`.
 - Read it in a descendant component with `pp.context(token)`.
 - Resolution walks the logical component parent chain stored in the registry, not the live DOM.
 - Portaled descendants still resolve providers through component ancestry.
@@ -468,24 +532,24 @@ Important:
 - Context is component-level, not directive-based. There is no `pp-context` attribute.
 - `pp.context(token)` resolves from ancestors. A component does not consume the value it provides in the same render.
 - If provider and consumer live in different component script scopes, pass the token through props or store it in shared outer or global state.
-- The preferred authoring style is a lowercase provider tag in the template. The TypeScript runtime's `TemplateCompiler.transformContextProviderTags(...)` recognizes `*.provider` tags case-insensitively and rewrites them to runtime-owned `<pp-context-provider>` boundaries. The runtime context lookup is also case-insensitive, so `<themecontext.provider>` can resolve a script binding named `ThemeContext`.
-- The runtime also supports imperative `ThemeContext.Provider({ value })` calls during render, but that form provides from the component boundary rather than documenting the HTML subtree shape. Use it only when component-wide provision is intended.
-- Do not invent or document `pp.provideContext`. The current runtime explicitly does not expose it.
+- The preferred authoring style is a lowercase provider tag in the template. The TypeScript runtime's `TemplateCompiler.transformContextProviderTags(...)` recognizes `*.provider` tags case-insensitively and rewrites them to runtime-owned `<pp-context-provider>` boundaries. The runtime context lookup is also case-insensitive, so `<themecontext.provider>` can resolve a script binding named `ThemeContext`.
+- The runtime also supports imperative `ThemeContext.Provider({ value })` calls during render, but that form provides from the component boundary rather than documenting the HTML subtree shape. Use it only when component-wide provision is intended.
+- Do not invent or document `pp.provideContext`. The current runtime explicitly does not expose it.
 
 Provider example:
 
 ```html
 <section>
-  <script>
-    const ThemeContext = pp.createContext("light");
-    const [theme] = pp.state("dark");
-  </script>
-
-  <themecontext.provider value="{theme}">
-    <p>This subtree receives the provided theme.</p>
-  </themecontext.provider>
-</section>
-```
+  <script>
+    const ThemeContext = pp.createContext("light");
+    const [theme] = pp.state("dark");
+  </script>
+
+  <themecontext.provider value="{theme}">
+    <p>This subtree receives the provided theme.</p>
+  </themecontext.provider>
+</section>
+```
 
 Consumer example for a child component that receives the token through props:
 
@@ -555,10 +619,10 @@ Example:
 </div>
 ```
 
-## Refs
-
-- Refs are for imperative element access. Do not use `pp-ref` as the default way to read normal form input values on submit; prefer the form's `onsubmit` event plus `Object.fromEntries(new FormData(event.currentTarget).entries())`.
-- Use `pp-ref="nameInput"` when the ref object or callback is already available in scope.
+## Refs
+
+- Refs are for imperative element access. Do not use `pp-ref` as the default way to read normal form input values on submit; prefer the form's `onsubmit` event plus `Object.fromEntries(new FormData(event.currentTarget).entries())`.
+- Use `pp-ref="nameInput"` when the ref object or callback is already available in scope.
 - Use `pp-ref="{registerRef(id)}"` when you want the compiler to capture a dynamic ref expression.
 - `pp.ref(null)` is the normal way to create a ref object.
 - Callback refs and `{ current }` refs are both supported.
@@ -618,19 +682,19 @@ Example:
 </div>
 ```
 
-## Events
-
-- Use native `on*` attributes such as `onclick`, `oninput`, `onchange`, and `onsubmit` for first-party events.
-- Treat this as the HTML form of `onClick`-style PulsePoint event binding. Prefer lowercase examples in authored HTML because the browser normalizes attribute names.
-- Event values may be raw code or wrapped in `{...}`.
-- The runtime injects `event`, `e`, `$event`, `target`, `currentTarget`, and `el`.
-- For form submit handlers, prefer `onsubmit="{submitForm(event)}"` and `Object.fromEntries(new FormData(event.currentTarget).entries())` when collecting named fields for `pp.rpc(...)`.
-- `event.target` can also work for form-level submit handlers, but examples use `event.currentTarget` so nested event origins do not change which element becomes the `FormData` source.
-- Do not use hyphenated event attrs like `on-click`.
-- Event attributes are removed from the live DOM after binding and rebound after DOM morphing.
-- Owned template/event-owner internals are runtime-managed. Do not author them directly.
-- Do not replace normal PulsePoint event attributes with id-driven `querySelector(...)` plus `addEventListener(...)` wiring. If an imperative listener is unavoidable for an integration, attach and clean it up from `pp.effect(...)`.
-- Do not replace a normal `onclick` with a `data-action`, `data-target`, or similar attribute plus a script that scans the DOM. PulsePoint event attributes are the event contract for first-party Caspian UI.
+## Events
+
+- Use native `on*` attributes such as `onclick`, `oninput`, `onchange`, and `onsubmit` for first-party events.
+- Treat this as the HTML form of `onClick`-style PulsePoint event binding. Prefer lowercase examples in authored HTML because the browser normalizes attribute names.
+- Event values may be raw code or wrapped in `{...}`.
+- The runtime injects `event`, `e`, `$event`, `target`, `currentTarget`, and `el`.
+- For form submit handlers, prefer `onsubmit="{submitForm(event)}"` and `Object.fromEntries(new FormData(event.currentTarget).entries())` when collecting named fields for `pp.rpc(...)`.
+- `event.target` can also work for form-level submit handlers, but examples use `event.currentTarget` so nested event origins do not change which element becomes the `FormData` source.
+- Do not use hyphenated event attrs like `on-click`.
+- Event attributes are removed from the live DOM after binding and rebound after DOM morphing.
+- Owned template/event-owner internals are runtime-managed. Do not author them directly.
+- Do not replace normal PulsePoint event attributes with id-driven `querySelector(...)` plus `addEventListener(...)` wiring. If an imperative listener is unavoidable for an integration, attach and clean it up from `pp.effect(...)`.
+- Do not replace a normal `onclick` with a `data-action`, `data-target`, or similar attribute plus a script that scans the DOM. PulsePoint event attributes are the event contract for first-party Caspian UI.
 
 ## SPA, loading, and navigation helpers
 
@@ -654,8 +718,9 @@ RPC notes:
 - Passing `true` as the third argument means `abortPrevious: true`.
 - The options object supports `abortPrevious`, `onStream`, `onStreamError`, `onStreamComplete`, `onUploadProgress`, and `onUploadComplete`.
 - File uploads switch to the XHR path when upload progress callbacks are needed.
+- The `onUploadProgress` callback receives `{ loaded, total, percent }`. `percent` is a 0-100 number, and both `total` and `percent` are `null` when the browser cannot compute the upload length. Do not document or generate `event.percentage`.
 - For file managers, use upload callbacks for progress UI but replace the asset list from returned RPC state with `pp.state(...)` and `pp-for` instead of manual DOM repainting. See [file-uploads.md](./file-uploads.md).
-- Streamed `text/event-stream` responses are supported when a stream handler is provided.
+- Streamed `text/event-stream` responses are supported when a stream handler is provided. Each `onStream` chunk is JSON-parsed when the event data looks like JSON; otherwise the raw string is passed through. If the response streams but no `onStream` handler was given, the runtime warns and discards the stream.
 - Redirect headers are honored through `pp.redirect()`.
 
 Notes:
@@ -664,6 +729,53 @@ Notes:
 - Root-layout mismatches during SPA navigation trigger a hard reload.
 - `pp.mount()` bootstraps every `[pp-component]` it finds, so generated code should call it only through the global runtime if you are manually mounting at all.
 
+Upload with progress pattern:
+
+```html
+<section>
+  <input type="file" onchange="{uploadFile(event.target.files?.[0])}" />
+  <progress max="100" value="{percent ?? 0}"></progress>
+
+  <script>
+    const [percent, setPercent] = pp.state(null);
+
+    async function uploadFile(file) {
+      if (!file) return;
+
+      await pp.rpc("upload_asset", { file }, {
+        onUploadProgress: ({ percent }) => setPercent(percent),
+        onUploadComplete: () => setPercent(100),
+      });
+    }
+  </script>
+</section>
+```
+
+Streaming pattern for server generators that return `text/event-stream`:
+
+```html
+<section>
+  <button onclick="ask()" disabled="{isStreaming}">Ask</button>
+  <pre>{answer}</pre>
+
+  <script>
+    const [answer, setAnswer] = pp.state("");
+    const [isStreaming, setIsStreaming] = pp.state(false);
+
+    function ask() {
+      setAnswer("");
+      setIsStreaming(true);
+
+      pp.rpc("ask_question", { topic: "caspian" }, {
+        onStream: (chunk) => setAnswer((current) => current + chunk),
+        onStreamError: () => setIsStreaming(false),
+        onStreamComplete: () => setIsStreaming(false),
+      });
+    }
+  </script>
+</section>
+```
+
 ## Runtime Output And Debugging
 
 When you inspect rendered HTML in the browser, you should expect to see runtime-managed attributes and elements that are not part of authored source.
@@ -684,23 +796,23 @@ These are runtime details.
 
 Use these rules when generating or editing PulsePoint runtime code:
 
-- Treat PulsePoint as the default reactive frontend for Caspian app code.
-- For first-party HTML interactions, use PulsePoint `on*` event attributes, state, refs, effects, directives, and `pp.rpc()` before reaching for DOM APIs.
-- For simple forms, bind `onsubmit` in the authored HTML and read named fields with `Object.fromEntries(new FormData(event.currentTarget).entries())`; do not generate per-input refs or effect-managed submit listeners just to gather values.
-- Treat `pp.rpc()` as the default browser-to-server path for CRUD operations and interactive backend reads.
+- Treat PulsePoint as the default reactive frontend for Caspian app code.
+- For first-party HTML interactions, use PulsePoint `on*` event attributes, state, refs, effects, directives, and `pp.rpc()` before reaching for DOM APIs.
+- For simple forms, bind `onsubmit` in the authored HTML and read named fields with `Object.fromEntries(new FormData(event.currentTarget).entries())`; do not generate per-input refs or effect-managed submit listeners just to gather values.
+- Treat `pp.rpc()` as the default browser-to-server path for CRUD operations and interactive backend reads.
 - Use `public/js/pp-reactive-v2.js` as the shipped runtime contract AI should follow.
 - Keep `main.py` in view because it injects the runtime-facing attributes and rewrites authored scripts before the browser sees them.
 - If a development-only source tree exists behind the shipped runtime, treat it as optional implementation detail rather than something generated apps are guaranteed to contain.
 - In authored Caspian templates, do not handwrite `pp-component` or `type="text/pp"`; let the render pipeline inject them.
 - For grouped subtrees, follow the section layout pattern in [routing.md](./routing.md), keep the shared interactive shell in the parent folder's `layout.html`, and keep route-specific PulsePoint code in each child `index.html`.
 - For grouped shells with independent shell and content scrolling, put `pp-reset-scroll="true"` on the content pane rather than the whole shell when only the page content should reset between child-route navigations.
-- Prefer PulsePoint state and template directives over manual DOM mutation for reactive updates.
-- Avoid generating ids, `data-*` state, `querySelector`, `getElementById`, `addEventListener`, manual `innerHTML`, or custom event buses for normal Caspian UI behavior.
-- Avoid data-attribute click wiring such as `data-action="save"` plus a delegated listener. Use `onclick="save()"` or `onsubmit="{save(event)}"` in authored HTML and keep reactive state in `pp.state(...)`.
+- Prefer PulsePoint state and template directives over manual DOM mutation for reactive updates.
+- Avoid generating ids, `data-*` state, `querySelector`, `getElementById`, `addEventListener`, manual `innerHTML`, or custom event buses for normal Caspian UI behavior.
+- Avoid data-attribute click wiring such as `data-action="save"` plus a delegated listener. Use `onclick="save()"` or `onsubmit="{save(event)}"` in authored HTML and keep reactive state in `pp.state(...)`.
 - If you are explicitly editing raw runtime HTML or internals, keep `pp-component` unique per live instance.
 - In authored templates, use a plain `<script>` inside the root. In runtime HTML, the owned script appears as `script[type="text/pp"]`.
 - Keep template-facing variables at top level.
-- Follow the HTML-first context pattern: `pp.createContext(...)`, a lowercase provider tag such as `<themecontext.provider value="{...}">`, and `pp.context(token)`.
+- Follow the HTML-first context pattern: `pp.createContext(...)`, a lowercase provider tag such as `<themecontext.provider value="{...}">`, and `pp.context(token)`.
 - Do not invent `pp.provideContext`, `pp-context`, or other legacy context helpers.
 - Keep `pp-for` on `<template>` and use plain `key`.
 - Use native `on*` attributes, not framework-specific event syntax.
@@ -715,9 +827,9 @@ Use these rules when generating or editing PulsePoint runtime code:
 
 Do not generate these unless the current source explicitly adds support:
 
-- React, Vue, Svelte, Alpine, HTMX, or JSX-first patterns as the default Caspian frontend approach
-- standard DOM scripting as the default first-party interaction model, including id/data-attribute driven `querySelector(...)`, `addEventListener(...)`, or manual `innerHTML` rendering for normal buttons, forms, filters, toggles, uploads, and reactive lists
-- `pp-context`
+- React, Vue, Svelte, Alpine, HTMX, or JSX-first patterns as the default Caspian frontend approach
+- standard DOM scripting as the default first-party interaction model, including id/data-attribute driven `querySelector(...)`, `addEventListener(...)`, or manual `innerHTML` rendering for normal buttons, forms, filters, toggles, uploads, and reactive lists
+- `pp-context`
 - `pp-key`
 - `data-pp-ref`
 - `pp-context-provider`
@@ -741,7 +853,7 @@ These are current runtime caveats that matter for authors and AI tools:
 - The global `pp` singleton auto-mounts on DOM ready, and `pp.mount()` is idempotent.
 - `pp.effect` and `pp.layoutEffect` are cleanup-style hooks. Their callbacks are not promise-aware.
 - `pp.context()` resolves through ancestor components, not the current component's own pending providers.
-- `pp.provideContext` is not part of the current runtime API. Use an HTML-first lowercase provider tag such as `<themecontext.provider>`.
+- `pp.provideContext` is not part of the current runtime API. Use an HTML-first lowercase provider tag such as `<themecontext.provider>`.
 - `pp.portal()` preserves logical ancestry through the registry, so context and prop refresh behavior continue to work through portaled descendants.
 
 ## Final reminder

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "caspian-utils",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Caspian tooling",
   "main": "index.js",
   "scripts": {