snice 7.3.0 → 7.4.0

package/dist/react/SniceProvider.js

@@ -1,5 +1,5 @@
 /*!
- * snice v7.2.0
+ * snice v7.3.0
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
  * (c) 2024
  * Released under the MIT License.

package/dist/react/SniceRouter.js

@@ -1,5 +1,5 @@
 /*!
- * snice v7.2.0
+ * snice v7.3.0
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
  * (c) 2024
  * Released under the MIT License.

package/dist/react/index.js

@@ -1,5 +1,5 @@
 /*!
- * snice v7.2.0
+ * snice v7.3.0
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
  * (c) 2024
  * Released under the MIT License.

package/dist/react/matchRoute.js

@@ -1,5 +1,5 @@
 /*!
- * snice v7.2.0
+ * snice v7.3.0
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
  * (c) 2024
  * Released under the MIT License.

package/dist/react/useRequestHandler.js

@@ -1,5 +1,5 @@
 /*!
- * snice v7.2.0
+ * snice v7.3.0
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
  * (c) 2024
  * Released under the MIT License.

package/dist/symbols.cjs

@@ -1,5 +1,5 @@
 /*!
- * snice v7.2.0
+ * snice v7.3.0
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
  * (c) 2024
  * Released under the MIT License.

package/dist/symbols.esm.js

@@ -1,5 +1,5 @@
 /*!
- * snice v7.2.0
+ * snice v7.3.0
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
  * (c) 2024
  * Released under the MIT License.

package/dist/testing-dom.cjs

@@ -0,0 +1,48 @@
+/*!
+ * snice v7.3.0
+ * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
+ * (c) 2024
+ * Released under the MIT License.
+ *
+ * GENERATED FILE — DO NOT EDIT. Source: src/. Rebuild: npm run build:core
+ */
+'use strict';
+
+/**
+ * Standards-shaped DOM compatibility for non-browser test runners.
+ *
+ * This module only fills missing IDL surface. It never replaces an existing
+ * implementation and does not attempt to simulate layout, paint, or browser
+ * focus navigation.
+ */
+/**
+ * Fill proven DOM-runner IDL gaps without replacing native implementations.
+ * Safe to call more than once.
+ */
+function installDOMTestingCompatibility(scope = globalThis) {
+    const installed = [];
+    const HTMLElementConstructor = scope.HTMLElement;
+    if (!HTMLElementConstructor)
+        return { installed };
+    const prototype = HTMLElementConstructor.prototype;
+    if (!('autofocus' in prototype)) {
+        Object.defineProperty(prototype, 'autofocus', {
+            configurable: true,
+            enumerable: true,
+            get() {
+                return this.hasAttribute('autofocus');
+            },
+            set(value) {
+                this.toggleAttribute('autofocus', Boolean(value));
+            },
+        });
+        installed.push('HTMLElement.autofocus');
+    }
+    return { installed };
+}
+/** Result of the side-effect installation performed by `snice/testing/dom`. */
+const domTestingCompatibility = installDOMTestingCompatibility();
+
+exports.domTestingCompatibility = domTestingCompatibility;
+exports.installDOMTestingCompatibility = installDOMTestingCompatibility;
+//# sourceMappingURL=testing-dom.cjs.map

package/dist/testing-dom.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"testing-dom.cjs","sources":["../src/testing-dom.ts"],"sourcesContent":["/**\n * Standards-shaped DOM compatibility for non-browser test runners.\n *\n * This module only fills missing IDL surface. It never replaces an existing\n * implementation and does not attempt to simulate layout, paint, or browser\n * focus navigation.\n */\n\nexport type DOMTestingCompatibilityFeature = 'HTMLElement.autofocus';\n\nexport interface DOMTestingCompatibilityReport {\n  /** Standards features installed because the current DOM omitted them. */\n  installed: readonly DOMTestingCompatibilityFeature[];\n}\n\ninterface DOMTestingGlobal {\n  HTMLElement?: typeof HTMLElement;\n}\n\n/**\n * Fill proven DOM-runner IDL gaps without replacing native implementations.\n * Safe to call more than once.\n */\nexport function installDOMTestingCompatibility(\n  scope: DOMTestingGlobal = globalThis as DOMTestingGlobal\n): DOMTestingCompatibilityReport {\n  const installed: DOMTestingCompatibilityFeature[] = [];\n  const HTMLElementConstructor = scope.HTMLElement;\n  if (!HTMLElementConstructor) return { installed };\n\n  const prototype = HTMLElementConstructor.prototype;\n  if (!('autofocus' in prototype)) {\n    Object.defineProperty(prototype, 'autofocus', {\n      configurable: true,\n      enumerable: true,\n      get(this: HTMLElement): boolean {\n        return this.hasAttribute('autofocus');\n      },\n      set(this: HTMLElement, value: boolean) {\n        this.toggleAttribute('autofocus', Boolean(value));\n      },\n    });\n    installed.push('HTMLElement.autofocus');\n  }\n\n  return { installed };\n}\n\n/** Result of the side-effect installation performed by `snice/testing/dom`. */\nexport const domTestingCompatibility = installDOMTestingCompatibility();\n"],"names":[],"mappings":";;;;;;;;;;AAAA;;;;;;AAMG;AAaH;;;AAGG;AACG,SAAU,8BAA8B,CAC5C,KAAA,GAA0B,UAA8B,EAAA;IAExD,MAAM,SAAS,GAAqC,EAAE;AACtD,IAAA,MAAM,sBAAsB,GAAG,KAAK,CAAC,WAAW;AAChD,IAAA,IAAI,CAAC,sBAAsB;QAAE,OAAO,EAAE,SAAS,EAAE;AAEjD,IAAA,MAAM,SAAS,GAAG,sBAAsB,CAAC,SAAS;AAClD,IAAA,IAAI,EAAE,WAAW,IAAI,SAAS,CAAC,EAAE;AAC/B,QAAA,MAAM,CAAC,cAAc,CAAC,SAAS,EAAE,WAAW,EAAE;AAC5C,YAAA,YAAY,EAAE,IAAI;AAClB,YAAA,UAAU,EAAE,IAAI;YAChB,GAAG,GAAA;AACD,gBAAA,OAAO,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC;YACvC,CAAC;AACD,YAAA,GAAG,CAAoB,KAAc,EAAA;gBACnC,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;YACnD,CAAC;AACF,SAAA,CAAC;AACF,QAAA,SAAS,CAAC,IAAI,CAAC,uBAAuB,CAAC;IACzC;IAEA,OAAO,EAAE,SAAS,EAAE;AACtB;AAEA;AACO,MAAM,uBAAuB,GAAG,8BAA8B;;;;;"}

package/dist/testing-dom.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Standards-shaped DOM compatibility for non-browser test runners.
+ *
+ * This module only fills missing IDL surface. It never replaces an existing
+ * implementation and does not attempt to simulate layout, paint, or browser
+ * focus navigation.
+ */
+export type DOMTestingCompatibilityFeature = 'HTMLElement.autofocus';
+export interface DOMTestingCompatibilityReport {
+    /** Standards features installed because the current DOM omitted them. */
+    installed: readonly DOMTestingCompatibilityFeature[];
+}
+interface DOMTestingGlobal {
+    HTMLElement?: typeof HTMLElement;
+}
+/**
+ * Fill proven DOM-runner IDL gaps without replacing native implementations.
+ * Safe to call more than once.
+ */
+export declare function installDOMTestingCompatibility(scope?: DOMTestingGlobal): DOMTestingCompatibilityReport;
+/** Result of the side-effect installation performed by `snice/testing/dom`. */
+export declare const domTestingCompatibility: DOMTestingCompatibilityReport;
+export {};

package/dist/testing-dom.esm.js

@@ -0,0 +1,45 @@
+/*!
+ * snice v7.3.0
+ * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
+ * (c) 2024
+ * Released under the MIT License.
+ *
+ * GENERATED FILE — DO NOT EDIT. Source: src/. Rebuild: npm run build:core
+ */
+/**
+ * Standards-shaped DOM compatibility for non-browser test runners.
+ *
+ * This module only fills missing IDL surface. It never replaces an existing
+ * implementation and does not attempt to simulate layout, paint, or browser
+ * focus navigation.
+ */
+/**
+ * Fill proven DOM-runner IDL gaps without replacing native implementations.
+ * Safe to call more than once.
+ */
+function installDOMTestingCompatibility(scope = globalThis) {
+    const installed = [];
+    const HTMLElementConstructor = scope.HTMLElement;
+    if (!HTMLElementConstructor)
+        return { installed };
+    const prototype = HTMLElementConstructor.prototype;
+    if (!('autofocus' in prototype)) {
+        Object.defineProperty(prototype, 'autofocus', {
+            configurable: true,
+            enumerable: true,
+            get() {
+                return this.hasAttribute('autofocus');
+            },
+            set(value) {
+                this.toggleAttribute('autofocus', Boolean(value));
+            },
+        });
+        installed.push('HTMLElement.autofocus');
+    }
+    return { installed };
+}
+/** Result of the side-effect installation performed by `snice/testing/dom`. */
+const domTestingCompatibility = installDOMTestingCompatibility();
+
+export { domTestingCompatibility, installDOMTestingCompatibility };
+//# sourceMappingURL=testing-dom.esm.js.map

package/dist/testing-dom.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"testing-dom.esm.js","sources":["../src/testing-dom.ts"],"sourcesContent":["/**\n * Standards-shaped DOM compatibility for non-browser test runners.\n *\n * This module only fills missing IDL surface. It never replaces an existing\n * implementation and does not attempt to simulate layout, paint, or browser\n * focus navigation.\n */\n\nexport type DOMTestingCompatibilityFeature = 'HTMLElement.autofocus';\n\nexport interface DOMTestingCompatibilityReport {\n  /** Standards features installed because the current DOM omitted them. */\n  installed: readonly DOMTestingCompatibilityFeature[];\n}\n\ninterface DOMTestingGlobal {\n  HTMLElement?: typeof HTMLElement;\n}\n\n/**\n * Fill proven DOM-runner IDL gaps without replacing native implementations.\n * Safe to call more than once.\n */\nexport function installDOMTestingCompatibility(\n  scope: DOMTestingGlobal = globalThis as DOMTestingGlobal\n): DOMTestingCompatibilityReport {\n  const installed: DOMTestingCompatibilityFeature[] = [];\n  const HTMLElementConstructor = scope.HTMLElement;\n  if (!HTMLElementConstructor) return { installed };\n\n  const prototype = HTMLElementConstructor.prototype;\n  if (!('autofocus' in prototype)) {\n    Object.defineProperty(prototype, 'autofocus', {\n      configurable: true,\n      enumerable: true,\n      get(this: HTMLElement): boolean {\n        return this.hasAttribute('autofocus');\n      },\n      set(this: HTMLElement, value: boolean) {\n        this.toggleAttribute('autofocus', Boolean(value));\n      },\n    });\n    installed.push('HTMLElement.autofocus');\n  }\n\n  return { installed };\n}\n\n/** Result of the side-effect installation performed by `snice/testing/dom`. */\nexport const domTestingCompatibility = installDOMTestingCompatibility();\n"],"names":[],"mappings":";;;;;;;;AAAA;;;;;;AAMG;AAaH;;;AAGG;AACG,SAAU,8BAA8B,CAC5C,KAAA,GAA0B,UAA8B,EAAA;IAExD,MAAM,SAAS,GAAqC,EAAE;AACtD,IAAA,MAAM,sBAAsB,GAAG,KAAK,CAAC,WAAW;AAChD,IAAA,IAAI,CAAC,sBAAsB;QAAE,OAAO,EAAE,SAAS,EAAE;AAEjD,IAAA,MAAM,SAAS,GAAG,sBAAsB,CAAC,SAAS;AAClD,IAAA,IAAI,EAAE,WAAW,IAAI,SAAS,CAAC,EAAE;AAC/B,QAAA,MAAM,CAAC,cAAc,CAAC,SAAS,EAAE,WAAW,EAAE;AAC5C,YAAA,YAAY,EAAE,IAAI;AAClB,YAAA,UAAU,EAAE,IAAI;YAChB,GAAG,GAAA;AACD,gBAAA,OAAO,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC;YACvC,CAAC;AACD,YAAA,GAAG,CAAoB,KAAc,EAAA;gBACnC,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;YACnD,CAAC;AACF,SAAA,CAAC;AACF,QAAA,SAAS,CAAC,IAAI,CAAC,uBAAuB,CAAC;IACzC;IAEA,OAAO,EAAE,SAAS,EAAE;AACtB;AAEA;AACO,MAAM,uBAAuB,GAAG,8BAA8B;;;;"}

package/dist/transitions.cjs

@@ -1,5 +1,5 @@
 /*!
- * snice v7.2.0
+ * snice v7.3.0
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
  * (c) 2024
  * Released under the MIT License.

package/dist/transitions.esm.js

@@ -1,5 +1,5 @@
 /*!
- * snice v7.2.0
+ * snice v7.3.0
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
  * (c) 2024
  * Released under the MIT License.

package/dist/types/context.d.ts

@@ -9,21 +9,21 @@ declare const REGISTERED_ELEMENTS_SET: unique symbol;
  * Represents the bundled router state that can notify registered elements of changes
  */
 export declare class Context {
-    [REGISTERED_ELEMENTS]: WeakMap<HTMLElement, Set<string>>;
+    [REGISTERED_ELEMENTS]: WeakMap<object, Set<string>>;
     [IS_UPDATING]: boolean;
     /**
-     * Register an element to receive context updates
+     * Register an element or controller to receive context updates
      * @internal Used by @context decorator
      */
-    [CONTEXT_REGISTER]: (element: HTMLElement, methodName: string) => void;
+    [CONTEXT_REGISTER]: (element: object, methodName: string) => void;
     /**
-     * Unregister an element from receiving context updates. With a methodName,
+     * Unregister a subscriber from context updates. With a methodName,
      * removes only that one handler (so a `once` handler tearing itself down
      * doesn't kill the element's other @context handlers); without one, removes
-     * the element entirely (used on disconnect).
+     * the subscriber entirely (used on disconnect/detach).
      * @internal Used by @context decorator cleanup
      */
-    [CONTEXT_UNREGISTER]: (element: HTMLElement, methodName?: string) => void;
+    [CONTEXT_UNREGISTER]: (element: object, methodName?: string) => void;
     /**
      * Update the context and notify all registered elements
      * Prevents infinite loops by tracking update state
@@ -31,10 +31,10 @@ export declare class Context {
      */
     [CONTEXT_UPDATE]: (context: AppContext, placards: Placard[], currentRoute: string, routeParams: RouteParams) => void;
     /**
-     * Notify a specific element of the current context state
+     * Notify a specific subscriber of the current context state
      * @internal Used by @context decorator
      */
-    [CONTEXT_NOTIFY_ELEMENT]: (element: HTMLElement) => void;
+    [CONTEXT_NOTIFY_ELEMENT]: (element: object) => void;
     private [REGISTERED_ELEMENTS_SET];
     /**
      * Unique immutable identifier for this context instance

package/dist/utils.d.ts

@@ -101,7 +101,9 @@ export declare function invokeImmediateWatchers(instance: any, constructor: any)
 /**
  * Create a debounced version of a function
  */
-export declare function createDebounced<T extends (...args: any[]) => any>(fn: T, delay: number): T;
+export declare function createDebounced<T extends (...args: any[]) => any>(fn: T, delay: number): T & {
+    cancel(): void;
+};
 /**
  * Create a throttled version of a function (leading + trailing edge)
  */

package/docs/ai/api.md

@@ -122,7 +122,7 @@ html`
 @dispatch(eventName: string, options?: { debounce?, throttle?, dispatchOnUndefined?, scope?, daemon?, ...EventInit })
 // Fires CustomEvent after method, detail = return value
 // Supports async methods (dispatches after promise resolves)
-// dispatchOnUndefined: false (default) — skips dispatch if method returns undefined
+// dispatchOnUndefined: false — skips when return is undefined; omitted/true still dispatches
 // scope: 'global' | selector | EventTarget | () => EventTarget | null — redirects dispatch target
 ```
 
@@ -178,6 +178,8 @@ html`
 // Example:
 //   @respond('fetch-user')
 //   async handleFetchUser(payload: { id: string }) {
+//     const fetch = getContextFetch(this);
+//     if (!fetch) throw new Error('Controller requires context fetch');
 //     const user = await fetch(`/api/users/${payload.id}`).then(r => r.json());
 //     return user;
 //   }
@@ -191,6 +193,14 @@ const context = getContext(elementOrController);
 // Provide before connect/attach. Call release() during app/test teardown.
 ```
 
+Context transport:
+```typescript
+const release = provideContext(appRoot, appContext, { fetch: appFetch });
+const fetch = getContextFetch(elementOrController);
+// Router supplies its ContextAwareFetcher-bound Context.fetch automatically.
+// AppContext is not mutated with a reserved transport key.
+```
+
 ## Observers
 
 ```typescript
@@ -222,6 +232,7 @@ const context = getContext(elementOrController);
 
 @context(options?: { debounce?, throttle?, once? })
 // Method decorator: receives Context on navigation and ctx.update() calls
+// Supported on pages, descendant elements, and attached controllers.
 // Called on: initial load, route change, ctx.update()
 // Example:
 //   @context() handleContext(ctx: Context) {

package/docs/ai/architecture.md

@@ -103,8 +103,9 @@ decomposition suggestions.
 2. ControllerPart commit / attributeChangedCallback detects change
 3. Detach old controller (if any)
 4. Attach new controller (class refs skip the registry; reference-deduped)
-5. setupEventHandlers for controller
-6. On detach: cleanupEventHandlers
+5. Register `@context` and catch up with the current Router context
+6. Set up `@observe`, `@respond`, and `@on` handlers
+7. On detach: clean up every managed decorator
 - Class bindings own the element; their decorator name is reflected as a diagnostic-only `controller="name"` marker
 - Native elements: class bindings attach via ControllerPart; string attrs via MutationObserver
 
@@ -184,9 +185,12 @@ async *fetchData(): Response<Data> {
 }
 
 // Controller responds (receives payload, returns result directly)
+private ctx!: Context;
+@context() receiveContext(ctx: Context) { this.ctx = ctx; }
+
 @respond('fetch-data')
 async handleFetch(payload: { id: string }) {
-  return await fetch(`/api/${payload.id}`).then(r => r.json());
+  return await this.ctx.fetch(`/api/${payload.id}`).then(r => r.json());
 }
 // Wiring: html`<my-element controller=${MyController}></my-element>` (or controller="my-controller" in raw HTML)
 ```

package/docs/ai/bindings.md

@@ -48,7 +48,7 @@ Ordinary attributes/comments support multiple expressions. Property, boolean, ev
 - Direct JS assignment; preserves type and identity.
 - null/undefined/false assigned unchanged; `nothing` assigns undefined; `noChange` skips.
 - Same committed value skips write.
-- `live(value)` compares value to the current DOM property instead of last commit; use only in property bindings when controlled native state must be reasserted after DOM/user mutation.
+- `live(value)` compares value to the current DOM property instead of last commit; use only in property bindings when controlled native or custom-element state must be reasserted after the user or element mutates it.
 - `live()` does not observe DOM mutations or schedule a render. It reasserts only when the owning template renders. A modal open-state change can supply that render when reopening should restore an unchanged seed value.
 
 ```typescript

package/docs/ai/cli.md

@@ -59,6 +59,28 @@ Non-blocking architecture suggestions:
 
 Both `doctor` and `validate` accept `--json`.
 
+## Diagnostic codes and `.sniceignore`
+
+Every error, warning, and suggestion has a stable `code` in JSON and text
+output. Create `.sniceignore` at the project root to suppress an accepted
+diagnostic. Entries are exact; glob patterns are not used.
+
+```text
+# One exact diagnostic (preferred)
+snice/prefer-dispatch-decorator src/components/legacy-filter.ts:42:5
+
+# Every instance in one file
+snice/prefer-dispatch-decorator src/components/legacy-filter.ts
+
+# The rule everywhere in the project
+snice/prefer-dispatch-decorator
+```
+
+`code path:line` is also accepted. Paths are project-relative. A code-only
+entry suppresses the rule globally, including its effect on the command's exit
+status; use it only when the project intentionally rejects that rule. The same
+file applies to `check`, `doctor`, and `validate`.
+
 ## init-ai
 
 ```bash

package/docs/ai/components/badge.md

@@ -19,6 +19,10 @@ showZero: boolean = false;          // attr: show-zero — render 0 instead of h
 offset: number = 0;
 ```
 
+The indicator is hidden when there is no dot, non-empty `content`, positive
+`count`, or `showZero`. Slotted content remains available as the element the
+badge would overlay.
+
 ## Methods
 
 - `setBadgeContent(content)` - Set text content

package/docs/ai/components/pagination.md

@@ -57,9 +57,11 @@ variant: 'default'|'rounded'|'text' = 'default';
 
 ```typescript
 import 'snice/components/pagination/snice-pagination';
+import type { PaginationChangeDetail } from 'snice/components/pagination/snice-pagination.types';
 
-pagination.addEventListener('pagination-change', (e) => {
-  console.log('Page:', e.detail.page);
+pagination.addEventListener('pagination-change', (event) => {
+  const { detail } = event as CustomEvent<PaginationChangeDetail>;
+  console.log('Page:', detail.page);
 });
 ```
 

package/docs/ai/components/segmented-control.md

@@ -5,7 +5,7 @@ Multi-option switcher with sliding indicator. One selected at a time.
 ## Properties
 
 ```typescript
-value: string = '';
+value: string = '';  // user selection updates this before value-change dispatches
 options: SegmentedControlOption[] = [];  // JS only: { value, label, icon?, disabled? }
 size: 'small'|'medium'|'large' = 'medium';
 disabled: boolean = false;
@@ -15,6 +15,10 @@ disabled: boolean = false;
 
 - `value-change` → `{ value: string, previousValue: string, option: SegmentedControlOption, control }`
 
+`value` is self-mutating: selecting an option assigns it before the event is
+dispatched. An owner that must reassert an unchanged value on a later render
+should use a `.value=${live(value)}` property binding.
+
 ## CSS Parts
 
 - `base` - Root container

package/docs/ai/controllers.md

@@ -75,13 +75,14 @@ el.controller = UserController;                  // snice elements
 **Attachment flow:**
 1. Controller instance created
 2. `element` property set
-3. Router context passed (if available)
+3. Router application context passed (if available)
 4. Element's `ready` promise awaited
 5. `attach()` called
-6. Observers set up
-7. Channel/response handlers set up
-8. Event handlers set up
-9. `controller-attached` event dispatched
+6. `@context` handlers registered and caught up with the current Router context
+7. Observers set up
+8. Channel/response handlers set up
+9. Event handlers set up
+10. `controller-attached` event dispatched
 
 Exception to step 4: `await attachController(this, ControllerClass)` inside the
 host's own `@ready` handler attaches immediately because initial render is
@@ -96,8 +97,9 @@ good architecture; pages should orchestrate directly.
 3. Observers cleaned up
 4. Channel/response handlers cleaned up
 5. Event handlers cleaned up
-6. Controller scope cleaned up
-7. `controller-detached` event dispatched
+6. `@context` handlers cleaned up
+7. Controller scope cleaned up
+8. `controller-detached` event dispatched
 
 ## Native Element Controllers
 
@@ -113,7 +115,7 @@ Controllers provide specific behaviors (fetch/sort/filter) to generic visual com
 
 ## Resource Cleanup
 
-Framework auto-cleans `@on`, `@observe`, `@respond` handlers. Clean up your own resources (WebSockets, timers, manual listeners) in `detach`:
+Framework auto-cleans `@on`, `@observe`, `@respond`, and `@context` handlers. Clean up your own resources (WebSockets, timers, manual listeners) in `detach`:
 
 ```typescript
 @controller('resource-controller')
@@ -192,6 +194,8 @@ the element's reactive public API. Dispatch outcome events, never mutate the
 element's rendered DOM.
 
 ```typescript
+import { context, type Context } from 'snice';
+
 interface DataHost<T> extends HTMLElement {
   loading: boolean;
   error: string;
@@ -202,17 +206,24 @@ interface DataHost<T> extends HTMLElement {
 @controller('data-controller')
 class DataController<T> implements IController<DataHost<T>> {
   element: DataHost<T> | null = null;
+  private ctx?: Context;
   private abort?: AbortController;
   private version = 0;
 
-  async attach(element: DataHost<T>) {
+  attach(element: DataHost<T>) {
     this.element = element;
-    await this.reload();
+  }
+
+  @context()
+  receiveContext(ctx: Context) {
+    this.ctx = ctx;
+    void this.reload();
   }
 
   async detach() {
     this.version++;
     this.abort?.abort();
+    this.ctx = undefined;
   }
 
   async reload() {
@@ -226,7 +237,9 @@ class DataController<T> implements IController<DataHost<T>> {
     host.empty = false;
 
     try {
-      const response = await fetch('/api/data', { signal: abort.signal });
+      const ctx = this.ctx;
+      if (!ctx) throw new Error('DataController requires Router context');
+      const response = await ctx.fetch('/api/data', { signal: abort.signal });
       if (!response.ok) throw new Error(`Request failed (${response.status})`);
       const data = await response.json() as T[];
       if (version !== this.version || this.element !== host) return;
@@ -251,6 +264,12 @@ class DataController<T> implements IController<DataHost<T>> {
 }
 ```
 
+`@context()` works on controllers as well as elements. It receives the same
+long-lived `Context` instance, including `application`, navigation state, and
+the Router's middleware-aware `fetch`. Managed decorators are activated after
+`attach()`, so start context-dependent work in the `@context()` handler (or in
+an event handled later), not in `attach()`.
+
 Required pieces: abort previous work, increment a version for stale-response
 guarding, reset loading/error/empty before fetch, check version + host identity
 before every commit, expose retry as `reload()`, and render all four states in

package/docs/ai/decorators.md

@@ -66,8 +66,8 @@ Resolver re-runs on reconnect — listeners track DOM moves.
 ## Communication
 - `@request(channel, options?)` - Async generator request pattern; `{ daemon: 'name' }` targets an app-context daemon
 - `@respond(channel, options?)` - Handle requests from `@request`; `{ daemon: 'name' }` installs on that daemon target
-- `@context(options?)` - Receive router navigation context updates
-- `provideContext(root, context)` / `getContext(participant)` - Explicit raw app-context provisioning and lookup
+- `@context(options?)` - Receive router navigation context updates on pages, descendant elements, and attached controllers
+- `provideContext(root, context, { fetch? })` / `getContext(participant)` / `getContextFetch(participant)` - Explicit app-context and transport provisioning/lookup
 
 ## Observers
 - `@observe(target, selector?, options?)` - Watch intersection, resize, media query, mutation

package/docs/ai/events.md

@@ -272,7 +272,7 @@ updateStatus(status: string) {
 
 ```typescript
 interface DispatchOptions extends EventInit {
-  dispatchOnUndefined?: boolean; // Skip dispatch when return is undefined (default: true)
+  dispatchOnUndefined?: boolean; // Undefined return still dispatches unless false (default: true)
   debounce?: number;             // Debounce dispatch by ms
   throttle?: number;             // Throttle dispatch by ms
   // Where to dispatch the event (see scope below)
@@ -379,7 +379,13 @@ methods themselves default to their own private target. See
 
 ## Custom events
 
-Dispatching manually:
+Prefer `@dispatch` for a static custom event emitted from a Snice element or a
+controller's host. It supplies the standard bubbling/composed behavior, uses
+the method return value as `detail`, and keeps event timing options declarative.
+
+Manual dispatch remains a valid low-level escape hatch when code needs the
+Event object, a dynamic event name, `dispatchEvent()`'s cancellation boolean,
+or a non-host target:
 
 ```typescript
 notify() {

package/docs/ai/fetcher.md

@@ -30,7 +30,13 @@ const router = Router({ target: '#app', context: { auth: null }, fetcher });
 router.initialize();
 ```
 
-## `ctx.fetch` in pages
+Pages, descendant elements, and attached controllers receive the Router's
+long-lived `Context` through `@context()`; its `ctx.fetch` is the bound,
+middleware-aware function. `getContextFetch(this)` remains the lower-level
+lookup for code using an explicit non-router
+`provideContext(root, appContext, { fetch })` boundary.
+
+## `ctx.fetch` in pages, elements, and controllers
 
 Available on any `Context` obtained via `@context()`; middleware applies automatically:
 
@@ -45,6 +51,31 @@ class UserPage extends HTMLElement {
 }
 ```
 
+Controllers use the same decorator. Managed decorators are activated after
+`attach()`, so start context-dependent work from the handler:
+
+```typescript
+@controller('user-data')
+class UserDataController implements IController<HTMLElement> {
+  element: HTMLElement | null = null;
+  private ctx?: Context;
+
+  attach(element: HTMLElement) { this.element = element; }
+  detach() { this.ctx = undefined; }
+
+  @context()
+  receiveContext(ctx: Context) {
+    this.ctx = ctx;
+    void this.load();
+  }
+
+  async load() {
+    const response = await this.ctx!.fetch('/api/users');
+    // Commit through the host's public API.
+  }
+}
+```
+
 ## Middleware types
 
 ### Request middleware — runs before the `fetch()` call

package/docs/ai/lifecycle.md

@@ -120,7 +120,10 @@ Options object always comes after the property names — works with multiple wat
 
 ## @context()
 
-Receives router context updates. Called whenever the router context changes (navigation, app context update, etc.):
+Receives router context updates on pages, descendant elements, and attached
+controllers. Called whenever the router context changes (navigation, app
+context update, etc.). A controller's managed decorators activate after
+`attach()`, so context-dependent startup belongs in this handler:
 
 ```typescript
 @property({ type: Array }) placards: Placard[] = [];

package/docs/ai/patterns.md

@@ -170,17 +170,17 @@ import { page } from '../router';  // NOT from 'snice'!
 @page({ tag: 'user-page', routes: ['/users/:id'], guards: [isAuthenticated] })
 class UserPage extends HTMLElement {
   @property() id = '';
-  private appContext?: AppContext;
+  private ctx?: Context;
 
   @context()
   handleContext(ctx: Context) {
-    this.appContext = ctx.application;
+    this.ctx = ctx;
     this.requestRender();
   }
 
   @ready()
   async load() {
-    const user = await fetch(`/api/users/${this.id}`).then(r => r.json());
+    const user = await this.ctx!.fetch(`/api/users/${this.id}`).then(r => r.json());
     // ...
   }
 }
@@ -219,9 +219,14 @@ Mock controller for tests, real API controller in production — same element.
 // Controller responds to requests (receives payload, returns result directly)
 @controller('api')
 class API {
+  private ctx!: Context;
+
+  @context()
+  receiveContext(ctx: Context) { this.ctx = ctx; }
+
   @respond('fetch-user')
   async handleFetchUser(payload: { id: string }) {
-    const user = await fetch(`/api/users/${payload.id}`).then(r => r.json());
+    const user = await this.ctx.fetch(`/api/users/${payload.id}`).then(r => r.json());
     return user;  // Direct return, not callback
   }
 }