snice 7.5.0 → 7.7.0

package/docs/ai/events.md

@@ -142,7 +142,8 @@ handleTextInput(event: Event) {}
 ```
 
 - `currentTarget` is the listener's HOST, not the matched element — derive the match with `event.target.closest(selector)`.
-- Shadow retargeting: an event crossing a shadow boundary retargets to the shadow host, so a selector stops matching when rows move into a child component. Listen on the container; carry identity in `detail`.
+- Delegation matches in both the shadow tree and the light DOM by default; narrow with `light`/`shadow` (see OnOptions). Clicks on content slotted into a matching shadow wrapper match that wrapper.
+- Shadow retargeting: an event crossing a shadow boundary retargets to the shadow host, so a selector never matches a child component's internals. Listen on the container; carry identity in `detail`.
 
 Keyboard events with `@on` (`:` notation):
 
@@ -176,7 +177,7 @@ class MyButton extends HTMLElement {
 interface OnOptions {
   // Standard event listener options
   capture?: boolean;           // Use capture phase instead of bubble phase
-  once?: boolean;              // Remove listener after first trigger
+  once?: boolean;              // Handler runs exactly once; non-matching selector/key events don't consume it
   passive?: boolean;           // Passive listener (can't preventDefault)
 
   // Automatic event handling
@@ -184,17 +185,32 @@ interface OnOptions {
   stopPropagation?: boolean;   // Automatically call stopPropagation on the event
 
   // Timing controls
-  debounce?: number;           // Debounce the handler by specified milliseconds
-  throttle?: number;           // Throttle the handler by specified milliseconds
+  debounce?: EventTiming;
+  throttle?: EventTiming;
 
-  // Shadow DOM delegation
-  target?: string;             // CSS selector to target specific elements within shadow root
+  // Delegation
+  target?: string;             // CSS selector for delegation; same as the positional selector argument
+
+  // Tree toggles — same light/shadow pair as @query; both default to true.
+  // Direct: shadow → shadow-root listener, light → host listener.
+  // Delegated: which tree(s) the selector matches in.
+  // Both false → warn + skip. Ignored (warned) with scope/daemon.
+  light?: boolean;
+  shadow?: boolean;
 
   // Where to attach the listener (see scope below)
   scope?: 'global' | string | EventTarget | ((this: HTMLElement) => EventTarget | null);
 }
+type EventTiming = number | ((this: any) => number);
 ```
 
+- Number intervals remain supported.
+- Resolver: called with the decorated element/controller as `this` when the
+  listener is set up (and set up again after reconnect).
+- Result must be finite and non-negative. `0` disables; invalid/negative/`NaN`
+  throws `TypeError`.
+- Use method/function syntax, not an arrow, to read `this`.
+
 ### scope — listener attachment target
 
 Default: host element. `scope` redirects attachment to another target — how Snice expresses cross-cutting events.
@@ -240,6 +256,11 @@ handleScroll(event: Event) {}
 // Debounce input events by 300ms
 @on('input', 'input[type="search"]', { debounce: 300 })
 handleSearch(event: Event) {}
+
+@on('input', 'input[type="search"]', {
+  debounce() { return this.searchDebounce; }
+})
+handleAdaptiveSearch(event: Event) {}
 ```
 
 ## @dispatch decorator
@@ -276,13 +297,26 @@ updateStatus(status: string) {
 ```typescript
 interface DispatchOptions extends EventInit {
   dispatchOnUndefined?: boolean; // Undefined return still dispatches unless false (default: true)
-  debounce?: number;             // Debounce dispatch by ms
-  throttle?: number;             // Throttle dispatch by ms
+  debounce?: EventTiming;
+  throttle?: EventTiming;
   // Where to dispatch the event (see scope below)
   scope?: 'global' | string | EventTarget | ((this: HTMLElement) => EventTarget | null);
 }
 ```
 
+`EventTiming = number | ((this: any) => number)`. A resolver runs against the
+decorated element/controller on every method invocation. Result validation is
+the same as `@on`. Async methods dispatch only after resolution. Disconnect
+drops work queued before disconnect and decorated async invocations that began
+before disconnect. Teardown hooks keep the real element as `this`; calls they
+make after cancellation are new invocations, using current timing state after
+reconnect.
+
+Each invocation supersedes that method's pending timed work. Resolved `0`
+cancels an older timer and dispatches the new result immediately. Throttle
+trailing detail is latest-wins; its deadline is last actual dispatch + the
+newly resolved interval.
+
 ### scope — dispatch target
 
 Default: `this.dispatchEvent(event)` — event originates from the host element. `scope` redirects the dispatch to another target so the event behaves as if it originated there. Use with `@on({ scope })` to express cross-cutting events without bubbling.
@@ -321,6 +355,9 @@ If `scope` cannot resolve (selector matches no ancestor, resolver returns `null`
 ```typescript
 @dispatch('search-query', { debounce: 300 })
 emitSearch(query: string) { return { query }; }
+
+@dispatch('search-query', { debounce() { return this.searchDebounce; } })
+emitAdaptiveSearch(query: string) { return { query }; }
 ```
 
 ### Async methods

package/docs/ai/rendering.md

@@ -73,6 +73,13 @@ html`${asyncIterable}`
 - Promise/AsyncIterable values work directly in node expressions; stale replaced sources are ignored.
 - Async iterators receive a best-effort `return()` on replacement or disconnect. Promise cancellation stays caller-owned.
 
+## Authoring diagnostics
+
+- Template parse/authoring failures rendered by a Snice element identify the authoritative registered `<tag>` and, when safely available, the class, plus a nearby static-template excerpt when available. Minified CDN constructors may have no class name, so tag-only attribution is expected. Identity is attached to the exact constructor/immediate prototype only after successful `@element`, `@layout`, or Router registration (or an exact existing registration); undecorated subclasses stay generic, while document adoption preserves that identity.
+- Context follows nested/iterable/async `TemplateResult` values in open/closed shadow roots and light DOM.
+- Host-free preparation stays generic; runtime diagnostics do not invent a source filename or component.
+- Contextual errors retain the original error as `cause` (and therefore its stack).
+
 ## Control flow
 
 ```typescript

package/docs/ai/routing.md

@@ -192,7 +192,12 @@ class OverridePage extends HTMLElement {}
 
 ## Route parameters
 
-- `:param` segments in `routes` auto-map to `@property()` fields of the same name on the page element, set before `@ready()` fires. `@property({ attribute: false })` opts OUT — the Router binds through attributes, so such a field silently keeps its initializer.
+- Named `:param` segments and named splats (`*path`, including optional splats) in string routes and `{ path, order }` routes bind through attributes before `@ready()` fires; normally declare a plain `@property()` field of the same name.
+- The route-param spelling must match the observed attribute after HTML lowercasing. `HTMLElement`: `:articleId` -> plain `articleId` (`articleid`). `SniceElement`: plain `articleId` observes `article-id`, so use `:article-id` or `@property({ attribute: 'articleId' }) articleId`.
+- Explicit alias: `@property({ attribute: 'article-id' }) articleId` binds from `:article-id`, not `:articleId`.
+- `@property({ attribute: false })` opts OUT — Router cannot set it, so it silently keeps its initializer.
+- A reflected native HTMLElement attribute such as `id` is already a binding target when no Snice property overrides it. An explicit `@property({ attribute: false }) id` or differently aliased `id` overrides the native channel and does not bind from `:id`. A custom element can also consume a statically declared `observedAttributes` entry in `attributeChangedCallback`; do not redeclare native IDL properties merely to satisfy the analyzer.
+- A subclass `@state()` member disables an inherited `@property()` channel of the same name. With Snice's stage-3 field transformation, a plain subclass field initializer or authored accessor still runs through the inherited transformed property accessor and remains bindable.
 - Multiple `:param`s all populate independently, e.g. `/posts/:postId/comments/:commentId` → `postId`, `commentId` properties.
 - Query params: declare directly in the route pattern, e.g. `routes: ['/search?q=:query']` — extracted as a route param (`ctx.navigation.params.query`), not parsed from `location.search`.
 

package/docs/ai/testing.md

@@ -42,6 +42,23 @@ Gotcha: awaiting `ready` on an element that never connects hangs — append it t
 - `ready` rejects with the first thrown/rejected `@ready()` failure; always await it.
 - jsdom's partial `ElementInternals` is supported; form controls keep native-input/proxy fallback behavior when `setFormValue`/`setValidity` are absent.
 
+## Strict render errors
+
+```typescript
+try {
+  setStrictRenderErrors(true);
+  expect(() => { element.invalid = true; }).toThrow(/<my-element> \(MyElement\)/);
+} finally {
+  setStrictRenderErrors(false);
+}
+```
+
+- Default: log render failure, retain previous DOM. Strict: synchronously rethrow synchronous render failures.
+- Template authoring errors include the authoritative registered tag, an optional safely available class name, and a nearby static-template excerpt when a host exists. Minified CDN output may correctly report only the tag. Attribution is exact-constructor/immediate-prototype metadata recorded after successful Snice registration; undecorated subclasses are generic, and adopted instances retain the registered identity.
+- Host-free preparation stays generic. Runtime does not claim a source filename it cannot know.
+- Original error is `cause`; inspect `cause.stack` for the underlying stack.
+- Promise/AsyncIterable failures happen after the render call and remain `console.error` reports in strict mode; await settlement and assert the `Error` argument.
+
 ## Partial DOM compatibility
 
 In a simulated DOM, opt into Snice's standards compatibility layer from the

package/docs/cli.md

@@ -52,6 +52,25 @@ npx snice validate    # source analyzer only
 - deep imports that were never released package paths, such as `snice/decorators`
 - a Router without `target`, `type`, or a project-wide `initialize()` call
 - a routed class combining `@page` with redundant `@element`
+- a path/query `:param` or named `*splat` whose page has no reachable attribute
+  target (`snice/route-param-has-no-binding-target`, warning), including
+  `attribute: false` and mismatched explicit aliases
+- a controller `@context()` handler that starts load/reload/refresh/fetch work
+  without `{ once: true }`, a first-delivery guard, or an update diff
+  (`snice/unguarded-context-load`, warning)
+
+The route-param check follows proven local declarations, direct relative
+re-exports, and named or namespace Snice imports, so an inherited bindable
+property satisfies it. It deliberately defers a missing-target warning for an
+unresolved/ambiguous base or dynamic route/attribute contract; locally visible
+disabled or mismatched properties are still diagnosed. Native reflected IDL
+attributes such as an unmodified `id`, and statically known custom
+`observedAttributes` handlers, also satisfy the attribute target.
+
+The route-param rule is non-blocking because its dependency-free static lexer
+cannot model every valid JavaScript/TypeScript grammar edge. Treat the warning
+as a strong prompt to verify the Router attribute channel; `validate` and
+`check` fail only when another error-level diagnostic is present.
 
 It also gives non-blocking architecture suggestions: keep `@page`, `@element`,
 `@controller`, and `@daemon` classes under `src/pages`, `src/components`,

package/docs/components/avatar.md

@@ -22,6 +22,7 @@ Displays a user profile image with automatic fallback to name-based initials or
 | `name` | `string` | `''` | User's name (used for initials and color generation) |
 | `size` | `'xs' \| 'small' \| 'medium' \| 'large' \| 'xl' \| 'xxl'` | `'medium'` | Avatar size |
 | `shape` | `'circle' \| 'square' \| 'rounded'` | `'circle'` | Avatar shape |
+| `loading` | `'lazy' \| 'eager'` | `'lazy'` | Image loading strategy; use `eager` for above-the-fold or tiny thumbnail avatars |
 | `fallbackColor` (attr: `fallback-color`) | `string` | `'#ffffff'` | Text color for initials fallback |
 | `fallbackBackground` (attr: `fallback-background`) | `string` | `''` | Background color for initials fallback (overrides auto-color) |
 

package/docs/components/calendar.md

@@ -25,6 +25,8 @@ Display and select dates with event support, date restrictions, and locale-aware
 | `maxDate` (attr: `max-date`) | `Date \| string` | `''` | Maximum selectable date |
 | `disabledDates` | `(Date \| string)[]` | `[]` | Disabled dates (JS-only; no attribute) |
 | `highlightToday` (attr: `highlight-today`) | `boolean` | `true` | Highlight today's date |
+| `noDaySelect` (attr: `no-day-select`) | `boolean` | `false` | Display-only mode: day clicks neither select/highlight nor fire `calendar-change`; event bars stay interactive |
+| `cellSizing` (attr: `cell-sizing`) | `'square' \| 'stretch'` | `'square'` | `square` keeps day cells as tall as the column is wide; `stretch` lets rows collapse to their content and event-lane reservation |
 | `showWeekNumbers` (attr: `show-week-numbers`) | `boolean` | `false` | Show week numbers |
 | `firstDayOfWeek` (attr: `first-day-of-week`) | `number` | `0` | First day of week (0=Sun, 1=Mon) |
 | `locale` | `string` | `'en-US'` | Locale for formatting |
@@ -37,9 +39,19 @@ interface CalendarEvent {
   title: string;
   start: Date | string;
   end?: Date | string;
-  color?: string;
+  color?: string;      // bar background
+  className?: string;  // extra class(es) on the bars, also exposed as ::part names
+  avatar?: string | CalendarEventAvatar; // string is shorthand for { src }
+  tooltip?: string;    // static tooltip text for the bars
+  popover?: boolean | string | Node | (() => Node); // click-to-open details card (see Event Popovers)
   data?: any;
 }
+
+interface CalendarEventAvatar {
+  src?: string;   // image URL
+  name?: string;  // initials fallback (rendered with <snice-avatar>)
+  alt?: string;
+}
 ```
 
 ## Methods
@@ -109,10 +121,108 @@ Use the `events` property to display events on the calendar.
 ```typescript
 calendar.events = [
   { id: 1, title: 'Team Meeting', start: new Date(2024, 5, 15, 10, 0), color: '#2196f3' },
-  { id: 2, title: 'Project Deadline', start: new Date(2024, 5, 20), color: '#f44336' }
+  { id: 2, title: 'Project Deadline', start: new Date(2024, 5, 20), color: '#f44336' },
+  { id: 3, title: 'Conference', start: new Date(2024, 5, 18), end: new Date(2024, 5, 24), color: '#16a34a' }
 ];
 ```
 
+Events render as continuous stripes, the way professional calendars draw them:
+an event with an `end` date spans all of its days as one bar per week row,
+chopped at week boundaries with squared corners so consecutive rows read as a
+single bar (the title repeats on each row). Concurrent events stack into
+lanes — earlier start first, longer event first on ties. Up to three lanes are
+shown; days with deeper stacks get a `+N more` chip. Each bar exposes a
+`part="event-bar"` for styling and dispatches `calendar-event-click` when
+clicked.
+
+Bars are styleable per event: `color` sets the background, `avatar` renders a
+small `<snice-avatar>` at the start of each bar (`part="event-avatar"`) — an
+image when `src` is given, initials from `name` otherwise — and `className` is
+added to the bar's classes **and** its part list, so a specific kind of event
+can be themed from outside the component:
+
+```css
+snice-calendar::part(event-bar) { font-weight: 500; }
+snice-calendar::part(urgent) { background: crimson; }
+```
+
+```typescript
+calendar.events = [
+  { id: 1, title: 'Incident review', start: '2024-06-18', className: 'urgent',
+    avatar: { src: '/avatars/sre-lead.png', name: 'Robin Kim' } }
+];
+```
+
+### Event Tooltips
+
+A per-event `tooltip` string shows on hover. For rich or lazily-loaded
+content, set the `eventTooltip` provider on the calendar — it runs when the
+pointer enters a bar and may return text, a DOM node, or a promise of either;
+results that resolve after the pointer left are discarded. The provider wins
+over `event.tooltip`. The overlay exposes `part="event-tooltip"`.
+
+```typescript
+calendar.eventTooltip = async (event) => {
+  const details = await fetchEventDetails(event.id);
+  const node = document.createElement('div');
+  node.innerHTML = `<strong>${event.title}</strong><p>${details.attendees} attendees</p>`;
+  return node;
+};
+```
+
+### Event Popovers
+
+Tooltips are for glancing; popovers are for interacting. An event that sets
+`popover` opens a click-anchored details card (`role="dialog"`,
+`part="event-popover"`) that holds focus, and closes on Escape (focus returns
+to the bar) or an outside click. `calendar-event-click` still dispatches.
+Popovers are **strictly per-event opt-in** — events without `popover` never
+open a card and never issue a request.
+
+Content resolves in this order:
+
+1. **Inline** — `popover` is a string, a Node, or a Node factory.
+2. **Provider** — `popover: true` and the element's `eventPopover` callback:
+   `(event) => string | Node | Promise<string | Node>`. A loading state shows
+   while a promise is pending; results arriving after close are discarded.
+3. **Request channel** — `popover: true` with no provider issues
+   `@request('calendar/event-popover')` with `{ event }`; any
+   `@respond('calendar/event-popover')` controller can return the content.
+   With no responder either, the card closes and a dev warning is logged.
+
+```typescript
+// Inline
+calendar.events = [
+  { id: 1, title: 'Standup', start: '2024-06-18', popover: 'Room 4, 10:00' }
+];
+
+// Lazy provider
+calendar.events = [{ id: 2, title: 'Conf', start: '2024-06-20', popover: true }];
+calendar.eventPopover = async (event) => detailsCard(await fetchEvent(event.id));
+
+// Request channel — the calendar stays generic, a controller owns the data
+@controller('agenda-controller')
+class AgendaController implements IController {
+  element: HTMLElement | null = null;
+  private ctx!: Context;
+  async attach() {}
+  async detach() {}
+
+  @context()
+  receiveContext(ctx: Context) { this.ctx = ctx; }
+
+  @respond('calendar/event-popover')
+  async details({ event }: { event: CalendarEvent }) {
+    const data = await this.ctx.fetch(`/api/events/${event.id}`).then(r => r.json());
+    return renderDetailsCard(data);
+  }
+}
+```
+
+Bars with a popover are keyboard-operable (`role="button"`, `tabindex="0"`,
+Enter/Space opens). Close programmatically with
+`calendar.closeEventPopover()`.
+
 ### Date Restrictions
 
 Use `min-date` and `max-date` to constrain the selectable date range.

package/docs/components/switch.md

@@ -64,6 +64,8 @@ A toggle switch input for boolean selections. Supports on/off labels, form integ
 | `thumb` | Switch thumb |
 | `spinner` | Loading spinner |
 | `label` | Label text |
+| `label-on` | On-state text inside the track (renders when `label-on` is set) |
+| `label-off` | Off-state text inside the track (renders when `label-off` is set) |
 
 ## Basic Usage
 
@@ -102,10 +104,14 @@ Use `size` to change the switch dimensions.
 
 ### With On/Off Labels
 
-Use `label-on` and `label-off` for text inside the switch track.
+Use `label-on` and `label-off` for text inside the switch track. The track
+sizes itself to the widest label (medium and large sizes; small hides state
+labels), and the thumb's travel follows the actual track width — so long
+labels and `::part(track)` width overrides both stay aligned.
 
 ```html
 <snice-switch label="Dark mode" label-on="ON" label-off="OFF"></snice-switch>
+<snice-switch label="Door" label-on="Open" label-off="Closed"></snice-switch>
 ```
 
 ### Form Integration

package/docs/components/table.md

@@ -153,7 +153,8 @@ Column capability flags default to enabled unless explicitly set to `false` when
 `formatter` is the row-aware display override for every built-in cell.
 `valueFormatter` is the fallback display formatter and is also used by the
 editing pipeline, aggregate output, and formatted clipboard export.
-`valueGetter` participates in local sorting and aggregation. `valueParser` and
+`valueGetter` derives the working value for cell display, local sorting, and
+aggregation. `valueParser` and
 `valueSetter` run during editing; a setter may return either the final field
 value or an updated row object.
 

package/docs/events.md

@@ -354,17 +354,23 @@ class ListController implements IController {
 }
 ```
 
-Two delegation rules worth knowing:
+Three delegation rules worth knowing:
 
 - **`currentTarget` is the listener's host, not the matched element.** Inside
   `@on('click', '.delete-button')` the handler receives the raw event, so
   derive the match with `event.target.closest('.delete-button')` when you need
   the element itself (as above).
+- **Delegation matches in both trees by default.** The selector matches
+  elements in the component's shadow tree and its light-DOM children. A click
+  on content slotted into a matching shadow wrapper matches that wrapper.
+  Narrow the search with the `light`/`shadow` options — the same tree toggles
+  `@query` uses (see [@on Options](#on-options)).
 - **Shadow DOM retargeting changes what the selector matches.** An event
   crossing a shadow boundary is retargeted to the shadow host, so
   `@on('row-clicked', 'my-row')` stops matching when rows move into a list
-  component — from outside, the event's target is the list host. Listen on the
-  container and carry the row identity in the event `detail` instead.
+  component — from outside, the event's target is the list host. A selector
+  never matches a child component's internals. Listen on the container and
+  carry the row identity in the event `detail` instead.
 
 ### Keyboard Events with @on
 
@@ -410,7 +416,7 @@ class EditorController implements IController {
 interface OnOptions {
   // Standard event listener options
   capture?: boolean;           // Use capture phase instead of bubble phase
-  once?: boolean;              // Remove listener after first trigger
+  once?: boolean;              // Handler runs exactly once; non-matching selector/key events don't consume it
   passive?: boolean;           // Passive listener (can't preventDefault)
 
   // Automatic event handling
@@ -418,11 +424,15 @@ interface OnOptions {
   stopPropagation?: boolean;   // Automatically call stopPropagation on the event
 
   // Timing controls
-  debounce?: number;           // Debounce the handler by specified milliseconds
-  throttle?: number;           // Throttle the handler by specified milliseconds
+  debounce?: EventTiming;      // Debounce the handler
+  throttle?: EventTiming;      // Throttle the handler
 
-  // Shadow DOM delegation
-  target?: string;             // CSS selector to target specific elements within shadow root
+  // Delegation
+  target?: string;             // CSS selector for delegation; same as the positional selector argument
+
+  // Tree toggles — the same light/shadow pair @query uses; both default to true
+  light?: boolean;             // Listen in the light DOM (host element + light children)
+  shadow?: boolean;            // Listen in the shadow tree (the component's shadow root)
 
   // Where to attach the listener (see scope section below)
   scope?: 'global' | string | EventTarget | ((this: HTMLElement) => EventTarget | null);
@@ -430,8 +440,39 @@ interface OnOptions {
   // Named daemon from the nearest provided app context
   daemon?: string;
 }
+
+type EventTiming = number | ((this: any) => number);
+```
+
+Numeric intervals remain supported. A resolver can instead read a value from
+the decorated element or controller instance. For `@on`, it runs when the
+managed listener is set up and again when it is set up after reconnect. The
+resolved value must be a finite, non-negative number; `0` disables that timing
+option, while invalid, negative, and `NaN` values throw `TypeError`.
+
+#### light / shadow — choosing the tree
+
+`light` and `shadow` are the same tree toggles `@query` uses. Both default to
+`true`, so `@on` hears events from the shadow tree and the light DOM alike.
+Set one to `false` to narrow the listener:
+
+```typescript
+// Only the component's shadow tree
+@on('click', '.item', { light: false })
+onShadowItem(e: MouseEvent) { /* ... */ }
+
+// Only light-DOM children (and the host itself)
+@on('click', '.item', { shadow: false })
+onLightItem(e: MouseEvent) { /* ... */ }
 ```
 
+For direct handlers the flags choose where the listener attaches: `shadow`
+controls the shadow-root listener, `light` controls the host listener. For
+delegated handlers they choose which tree(s) the selector matches in. Setting
+both to `false` warns and skips the listener, and the flags are ignored (with
+a warning) when `scope` or `daemon` is set — those own the listener target
+outright.
+
 #### scope — controlling the listener target
 
 By default, `@on` attaches the listener to the host element. The `scope` option redirects
@@ -522,6 +563,19 @@ class SearchController implements IController {
 }
 ```
 
+Per-instance interval:
+
+```typescript
+@on('input', 'input[type="search"]', {
+  debounce() { return this.searchDebounce; }
+})
+handleSearch(event: Event) { /* ... */ }
+```
+
+Use method syntax (or a normal function), not an arrow, when reading `this`.
+Controllers receive the controller instance as `this`; elements receive the
+element instance.
+
 ### Using @on in Elements (Alternative)
 
 While template syntax is preferred, `@on` can also be used in elements:
@@ -623,8 +677,8 @@ class StatusIndicator extends HTMLElement {
 ```typescript
 interface DispatchOptions extends EventInit {
   dispatchOnUndefined?: boolean; // Undefined return still dispatches unless false (default: true)
-  debounce?: number;             // Debounce dispatch by ms
-  throttle?: number;             // Throttle dispatch by ms
+  debounce?: EventTiming;        // Debounce dispatch
+  throttle?: EventTiming;        // Throttle dispatch
   // Where to dispatch the event (see scope section below)
   scope?: 'global' | string | EventTarget | ((this: HTMLElement) => EventTarget | null);
   // Named daemon from the nearest provided app context
@@ -632,6 +686,23 @@ interface DispatchOptions extends EventInit {
 }
 ```
 
+`EventTiming` is the same `number | ((this: any) => number)` type used by
+`@on`. `@dispatch` resolves it against the decorated instance on every method
+invocation, so an element or controller can change its interval at runtime.
+The same finite, non-negative validation applies. Debounced async methods still
+dispatch only after the method resolves. Disconnect synchronously drops timed
+dispatches already queued and decorated async invocations that started before
+disconnect. Lifecycle hooks always run with the real element as `this`; an
+`@dispatch` method called by teardown code after that cancellation is a new,
+ordinary invocation (and, after reconnect, participates in the current timing
+state).
+
+Each invocation supersedes pending timed work for that decorated method. A
+resolved `0` therefore cancels an older debounce/throttle timer and dispatches
+the new result without delay. For throttle, a suppressed invocation replaces
+the trailing detail and recalculates its deadline as the last actual dispatch
+plus the newly resolved interval.
+
 #### scope — controlling the dispatch target
 
 By default, `@dispatch` originates from the element or a controller's host; on a
@@ -696,6 +767,15 @@ class SearchBox extends HTMLElement {
 }
 ```
 
+```typescript
+@dispatch('search-query', {
+  debounce() { return this.searchDebounce; }
+})
+emitSearch(query: string) {
+  return { query };
+}
+```
+
 ### Async Methods
 
 `@dispatch` works with async methods — the event dispatches after the promise resolves:

package/docs/rendering.md

@@ -51,6 +51,16 @@ isSafeUrl(objectUrl, { allowed: ['blob:'] });
 
 By default, relative references and absolute `http:`, `https:`, `mailto:`, and `tel:` URLs are accepted. Network-path references must resolve to an allowed protocol. Malformed URLs, raw ASCII control characters, and every other explicit scheme are rejected. Passing `allowed` replaces the absolute-protocol list but does not disable relative references. `snice-button` applies this policy automatically to its `href` property.
 
+### Authoring diagnostics
+
+Malformed declarative syntax fails when its `TemplateResult` is prepared for rendering. When the template belongs to a Snice element, the error identifies the owning host by its authoritative registered tag and, when safely available, its JavaScript class, then includes a nearby static-template excerpt where possible:
+
+```text
+snice: render failed for <user-editor> (UserEditor): ... Near "<button ${…}>...".
+```
+
+Minified CDN builds commonly strip constructor names, so a tag-only identity such as `<user-editor>` is normal and intentional. Identity is recorded only after a successful Snice `@element`, `@layout`, or Router page registration (or when that exact constructor is already registered). It belongs to that exact constructor and immediate prototype: an undecorated subclass stays generic, while an instance adopted into another document keeps its original registered identity. This context follows nested templates, keyed/iterable templates, promises, and async iterables, including templates rendered into open or closed shadow roots and light DOM. A template prepared without a component render host keeps the generic authoring error and nearby excerpt; Snice does not invent a component, source filename, or callsite it cannot know at runtime. Contextual errors retain the original error as `cause`, so its stack remains available for debugging.
+
 ## Bindings
 
 This section is the quick syntax overview. See [Binding Channels](./bindings.md) for the complete value, cleanup, event, spread, sentinel, and form-control semantics.

package/docs/routing.md

@@ -447,11 +447,32 @@ window.history.go(-2);
 ### Accessing Parameters
 
 Route parameters are automatically mapped to element properties — a `:param`
-segment binds to a **plain `@property()`** of the same name. A field declared
+segment or named splat such as `*path` (including an optional splat) normally
+binds to a **plain `@property()`** of the same name. A field declared
 `@property({ attribute: false })` is opted OUT of route-param binding: the
 Router never sets it and it silently keeps its initializer. (The Router sets
 params through attributes; `attribute: false` fields have none.)
 
+The parameter spelling must reach the property's observed attribute. On an
+`HTMLElement` page, `:articleId` reaches a plain `articleId` property through
+the lowercased `articleid` attribute. A `SniceElement` page uses kebab-case
+implicit attributes, so its plain `articleId` property needs `:article-id` (or
+an explicit `@property({ attribute: 'articleId' })`). Explicit aliases follow
+the same rule: `@property({ attribute: 'article-id' }) articleId` binds from
+`:article-id`, not `:articleId`.
+
+A reflected native HTMLElement attribute such as `id` is already reachable
+when no Snice property overrides it. An explicit
+`@property({ attribute: false }) id` or differently aliased `id` overrides that
+native channel, so `:id` no longer populates the property. A statically declared
+`observedAttributes` entry paired with `attributeChangedCallback` can also
+consume a route attribute.
+
+Inheritance follows Snice's decorator transformation: a subclass `@state()`
+member disables an inherited `@property()` channel of the same name, while a
+plain field initializer or authored accessor still uses the inherited
+transformed property accessor and remains bindable.
+
 ```typescript
 @page({
   tag: 'article-page',

package/docs/testing.md

@@ -47,6 +47,25 @@ element. Snice form controls also retain their native-input/proxy fallback in
 DOM runners such as jsdom that expose only the ARIA subset of
 `ElementInternals`.
 
+## Strict Render Errors
+
+Rendering logs failures by default and retains the previous DOM. Tests that need a synchronous render failure to fail the assertion directly can temporarily enable strict mode:
+
+```typescript
+import { setStrictRenderErrors } from 'snice';
+
+try {
+  setStrictRenderErrors(true);
+  expect(() => { element.invalid = true; }).toThrow(/<my-element> \(MyElement\)/);
+} finally {
+  setStrictRenderErrors(false);
+}
+```
+
+Template parse and authoring errors identify the owning component by its authoritative registered tag and, when safely available, its class, and include a nearby static-template excerpt. Minified CDN constructors may have no class name, so tests should accept tag-only attribution. Attribution requires the exact constructor and immediate prototype successfully registered by `@element`, `@layout`, or Router (or that exact constructor already present in the registry): undecorated subclasses stay generic, and document adoption does not change an instance's captured registration identity. The original error is retained as `cause`, so assertions and debugging can inspect its stack. Snice cannot recover a source filename from a runtime tagged-template value and does not fabricate one. A template prepared outside a component render therefore keeps the generic nearby-template diagnostic.
+
+Promise and async-iterable values settle after the synchronous render call has returned, so their failures are reported through `console.error` even while strict mode is enabled. Spy on `console.error`, wait for the deferred value to settle, and assert against the `Error` argument; it carries the same owning-component context.
+
 ## Partial DOM Compatibility
 
 In a simulated DOM, opt into Snice's standards compatibility layer from your

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "snice",
-  "version": "7.5.0",
+  "version": "7.7.0",
   "type": "module",
   "description": "A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.",
   "main": "dist/index.cjs",
@@ -117,7 +117,7 @@
     "build:distribution": "rm -rf dist && npm run generate:metadata && rollup -c && npm run build:types && node tooling/build/embed-sourcemap-sources.mjs dist",
     "build:types": "tsc --project packages/components/tsconfig.json --emitDeclarationOnly && cp packages/components/custom-elements.d.ts dist/components/custom-elements.d.ts",
     "prebuild:cdn": "test -f dist/index.esm.js || npm run build:distribution",
-    "build:cdn": "rollup -c rollup.config.cdn.js && node tooling/website/sync-component-assets.js && node tooling/website/update-cdn-sizes.js",
+    "build:cdn": "node tooling/build/parallel-cdn-build.mjs && node tooling/website/sync-component-assets.js && node tooling/website/update-cdn-sizes.js",
     "prebuild:react": "test -f dist/index.d.ts || npm run build:distribution",
     "build:react": "npm run generate:react-adapters && tsc --project adapters/react/tsconfig.json && node tooling/build/embed-sourcemap-sources.mjs adapters/react",
     "build:testing": "rollup -c rollup.config.test.js && node tooling/build/embed-sourcemap-sources.mjs dist",