@docyrus/animaguru 0.6.0

package/vendor/pixijs-skills/skills/pixijs-events/SKILL.md

@@ -0,0 +1,387 @@
+---
+name: pixijs-events
+description: "Use this skill when handling pointer, mouse, touch, or wheel input in PixiJS v8. Covers eventMode (none, passive, auto, static, dynamic), FederatedEvent types, propagation and capture phase, hitArea, interactiveChildren, cursor and cursorStyles, global move events for drag, eventFeatures config. Triggers on: eventMode, FederatedPointerEvent, pointerdown, click, tap, globalpointermove, drag, hitArea, cursor, stopPropagation, persistentDeviceId, contextmenu, rightclick."
+license: MIT
+---
+
+PixiJS's federated event system mirrors DOM events on the scene graph. Set `container.eventMode = 'static'` to opt an object in, then listen with `.on()`, `addEventListener()`, or `onEventName` property handlers. Move events fire only over the listening object; use `globalpointermove` for drag.
+
+## Quick Start
+
+```ts
+const button = new Sprite(await Assets.load("button.png"));
+button.eventMode = "static";
+button.cursor = "pointer";
+app.stage.addChild(button);
+
+button.on("pointertap", (event) => {
+  console.log("clicked at", event.global.x, event.global.y);
+});
+
+let dragging = false;
+button.on("pointerdown", () => {
+  dragging = true;
+});
+button.on("pointerup", () => {
+  dragging = false;
+});
+button.on("pointerupoutside", () => {
+  dragging = false;
+});
+button.on("globalpointermove", (event) => {
+  if (dragging) button.parent.toLocal(event.global, undefined, button.position);
+});
+```
+
+**Related skills:** `pixijs-accessibility` (screen reader + keyboard), `pixijs-scene-dom-container` (HTML overlays), `pixijs-performance` (event-heavy scenes).
+
+## Core Patterns
+
+### eventMode values
+
+```ts
+import { Sprite } from "pixi.js";
+
+const sprite = new Sprite();
+
+// No interaction at all; children also ignored
+sprite.eventMode = "none";
+
+// Default. Self not interactive; interactive children still work
+sprite.eventMode = "passive";
+
+// Hit tested only when a parent is interactive
+sprite.eventMode = "auto";
+
+// Standard interaction: receives pointer/mouse/touch events
+sprite.eventMode = "static";
+
+// Like static, but also fires synthetic events from the ticker
+// when the pointer is stationary (for animated objects under cursor)
+sprite.eventMode = "dynamic";
+```
+
+Use `'static'` for buttons, UI elements, and drag targets. Use `'dynamic'` only for objects that move under a stationary cursor and need continuous hover updates.
+
+Use `isInteractive()` to check whether an object can receive events:
+
+```ts
+sprite.eventMode = "static";
+sprite.isInteractive(); // true
+
+sprite.eventMode = "passive";
+sprite.isInteractive(); // false
+```
+
+### Event types
+
+Pointer events (recommended for cross-device compatibility): `pointerdown`, `pointerup`, `pointerupoutside`, `pointermove`, `pointerover`, `pointerout`, `pointerenter`, `pointerleave`, `pointertap`, `pointercancel`.
+
+Mouse events: `mousedown`, `mouseup`, `mouseupoutside`, `mousemove`, `mouseover`, `mouseout`, `mouseenter`, `mouseleave`, `click`, `rightdown`, `rightup`, `rightupoutside`, `rightclick`, `contextmenu`, `wheel`. PixiJS doesn't block the browser's context menu; call `event.preventDefault()` in a `contextmenu` listener to keep it closed. Canceling `rightdown`, `rightup`, or `rightclick` doesn't keep it closed. On macOS, ctrl + click also fires `contextmenu`, and the browser can report it as a left click.
+
+Touch events: `touchstart`, `touchend`, `touchendoutside`, `touchmove`, `touchcancel`, `tap`. Each touch carries `altKey`, `ctrlKey`, `metaKey`, and `shiftKey` copied from the native `TouchEvent`, so modifier keys work the same as with mouse or pointer events.
+
+Global move events: `globalpointermove`, `globalmousemove`, `globaltouchmove`. These fire on every pointer movement regardless of whether the pointer is over the listening object.
+
+Container lifecycle events (no `eventMode` required): `added`, `removed`, `destroyed`, `childAdded`, `childRemoved`, `visibleChanged`.
+
+### Listening styles
+
+```ts
+import { Sprite } from "pixi.js";
+
+const sprite = new Sprite();
+sprite.eventMode = "static";
+
+// EventEmitter style (recommended)
+const handler = (e) => console.log("clicked");
+sprite.on("pointerdown", handler);
+sprite.once("pointerdown", handler); // one-time
+sprite.off("pointerdown", handler);
+
+// DOM style
+sprite.addEventListener(
+  "click",
+  (event) => {
+    console.log("Clicked!", event.detail);
+  },
+  { once: true },
+);
+
+// Property-based handlers
+sprite.onclick = (event) => {
+  console.log("Clicked!", event.detail);
+};
+```
+
+### Pointer events and propagation
+
+```ts
+import { Sprite, Container } from "pixi.js";
+
+const parent = new Container();
+parent.eventMode = "static";
+
+const child = new Sprite();
+child.eventMode = "static";
+parent.addChild(child);
+
+child.on("pointerdown", (event) => {
+  console.log("child pressed");
+  event.stopPropagation(); // prevent parent from receiving this event
+});
+
+parent.on("pointerdown", () => {
+  console.log("parent pressed (only if child did not stop propagation)");
+});
+```
+
+### Capture phase events
+
+All events support capture phase by appending `capture` to the event name (e.g., `pointerdowncapture`, `clickcapture`). Capture listeners fire during the capturing phase, before the event reaches its target.
+
+```ts
+container.addEventListener(
+  "pointerdown",
+  (event) => {
+    event.stopImmediatePropagation(); // blocks event from reaching children
+  },
+  { capture: true },
+);
+```
+
+### Hit testing
+
+When a pointer event fires, PixiJS walks the display tree to find the top-most interactive element under the pointer. The traversal follows these rules:
+
+- `eventMode = 'none'` on a container skips that element and its entire subtree.
+- `interactiveChildren = false` on a container skips its children (the container itself can still be tested).
+- A `hitArea` overrides bounds-based testing; only the shape is checked.
+- Objects that are not visible, not renderable, or not measurable are skipped.
+
+Set a custom `hitArea` to override bounds-based testing. This also speeds up hit tests on large or complex objects by reducing the geometry checked:
+
+```ts
+import { Sprite, Rectangle, Circle, Polygon } from "pixi.js";
+
+const sprite = new Sprite();
+sprite.eventMode = "static";
+
+// Rectangular hit area
+sprite.hitArea = new Rectangle(0, 0, 100, 50);
+
+// Circular hit area
+sprite.hitArea = new Circle(50, 50, 40);
+
+// Polygon hit area
+sprite.hitArea = new Polygon([0, 0, 100, 0, 50, 100]);
+
+// Custom hit test via contains()
+sprite.hitArea = {
+  contains(x: number, y: number): boolean {
+    return x >= 0 && x <= 100 && y >= 0 && y <= 100;
+  },
+};
+```
+
+### Global move events and drag
+
+```ts
+import { Sprite, FederatedPointerEvent } from "pixi.js";
+
+const sprite = new Sprite();
+sprite.eventMode = "static";
+sprite.cursor = "grab";
+
+let dragging = false;
+
+sprite.on("pointerdown", (event: FederatedPointerEvent) => {
+  dragging = true;
+  sprite.cursor = "grabbing";
+});
+
+// globalpointermove fires even when pointer leaves the object
+sprite.on("globalpointermove", (event: FederatedPointerEvent) => {
+  if (dragging) {
+    sprite.position.set(event.global.x, event.global.y);
+  }
+});
+
+sprite.on("pointerup", () => {
+  dragging = false;
+  sprite.cursor = "grab";
+});
+
+sprite.on("pointerupoutside", () => {
+  dragging = false;
+  sprite.cursor = "grab";
+});
+```
+
+### Cursor styles
+
+Basic usage sets the `cursor` property per-object. For reusable cursors, register named styles on the event system:
+
+```ts
+app.renderer.events.cursorStyles.default = "url('bunny.png'), auto";
+app.renderer.events.cursorStyles.hover = "url('bunny_saturated.png'), auto";
+
+sprite.eventMode = "static";
+sprite.cursor = "hover"; // uses the registered 'hover' style
+```
+
+Cursor styles can be strings (CSS cursor values), objects (applied as CSS styles), or functions (called with the mode string).
+
+### Event properties
+
+`FederatedPointerEvent` carries rich input data; the more useful fields are:
+
+```ts
+sprite.on("pointerdown", (event: FederatedPointerEvent) => {
+  event.global; // scene-space Point where the event happened
+  event.client; // CSS-pixel Point relative to the viewport
+  event.offset; // Point w.r.t. target Container in world space (not supported at the moment)
+  event.target; // the Container that received the event
+  event.currentTarget; // the Container whose listener is running
+
+  event.pointerType; // 'mouse' | 'pen' | 'touch'
+  event.pointerId; // unique id for multi-touch tracking
+  event.isPrimary; // first pointer in a multi-pointer gesture
+  event.persistentDeviceId; // always 0; present for DOM PointerEvent type compatibility
+  event.pressure; // 0-1 pen/touch pressure
+  event.button; // 0 left, 1 middle, 2 right
+  event.buttons; // bitmask of held buttons
+  event.altKey; // modifier key state
+  event.ctrlKey;
+  event.shiftKey;
+  event.metaKey;
+
+  event.nativeEvent; // the underlying DOM PointerEvent / MouseEvent / Touch
+  event.preventDefault();
+  event.stopPropagation();
+  event.stopImmediatePropagation();
+});
+```
+
+`FederatedWheelEvent` adds `deltaX`, `deltaY`, `deltaZ`, and `deltaMode`. Wheel events fire on the same hit-tested object as pointer events.
+
+### Event features
+
+Toggle event categories globally for performance:
+
+```ts
+await app.init({
+  eventFeatures: {
+    move: true, // pointer/mouse/touch move events
+    globalMove: true, // global move events (globalpointermove, etc.)
+    click: true, // click/tap/press and contextmenu events
+    wheel: true, // mouse wheel events
+  },
+});
+
+// or configure after init
+app.renderer.events.features.globalMove = false;
+```
+
+### Performance tips
+
+- Set `eventMode = 'none'` on non-interactive subtrees to skip hit testing entirely.
+- Set `interactiveChildren = false` on containers where only the container itself needs interaction.
+- Use `hitArea` on large or complex objects to replace bounds-based hit testing with a cheap shape check.
+- Prefer `'static'` for stationary elements; reserve `'dynamic'` for objects that move or animate under a stationary pointer.
+- Disable unused event features via `eventFeatures` (e.g., `globalMove: false`) to cut per-frame work.
+
+## Common Mistakes
+
+### [HIGH] Default eventMode is passive
+
+Wrong:
+
+```ts
+const sprite = new Sprite(texture);
+sprite.on("pointerdown", () => {
+  console.log("clicked");
+});
+```
+
+Correct:
+
+```ts
+const sprite = new Sprite(texture);
+sprite.eventMode = "static";
+sprite.on("pointerdown", () => {
+  console.log("clicked");
+});
+```
+
+The default `eventMode` is `'passive'`, which means the object itself receives no events. You must explicitly set `eventMode` to `'static'` or `'dynamic'` before any listener will fire.
+
+
+### [HIGH] buttonMode removed; use cursor
+
+Wrong:
+
+```ts
+sprite.interactive = true;
+sprite.buttonMode = true;
+```
+
+Correct:
+
+```ts
+sprite.eventMode = "static";
+sprite.cursor = "pointer";
+```
+
+`buttonMode` was removed in v8. Use `cursor = 'pointer'` to show a hand cursor on hover. `interactive = true` still works as an alias for `eventMode = 'static'`, but `eventMode` is preferred.
+
+
+### [HIGH] Move events only fire over the object in v8
+
+Wrong:
+
+```ts
+sprite.eventMode = "static";
+sprite.on("pointermove", (event) => {
+  // expects to fire everywhere; only fires inside sprite bounds
+  updateDrag(event.global.x, event.global.y);
+});
+```
+
+Correct:
+
+```ts
+sprite.eventMode = "static";
+sprite.on("globalpointermove", (event) => {
+  // fires everywhere, even outside sprite bounds
+  updateDrag(event.global.x, event.global.y);
+});
+```
+
+In v8, `pointermove`, `mousemove`, and `touchmove` only fire when the pointer is over the display object. In v7 they fired on any canvas move. For drag operations or global tracking, use `globalpointermove`, `globalmousemove`, or `globaltouchmove`.
+
+
+### [MEDIUM] Cursor does not inherit from parent
+
+Setting `cursor` on a parent container has no effect on its children. Only the direct hit target's `cursor` value is applied.
+
+```ts
+// This does NOT make children show a pointer cursor
+parent.cursor = "pointer";
+
+// Each interactive child needs its own cursor
+child.eventMode = "static";
+child.cursor = "pointer";
+```
+
+If you want a uniform cursor for all children, set `cursor` on each interactive child individually, or set `hitArea` on the parent and make children non-interactive.
+
+
+## API Reference
+
+- [EventSystem](https://pixijs.download/release/docs/events.EventSystem.html.md)
+- [FederatedEvent](https://pixijs.download/release/docs/events.FederatedEvent.html.md)
+- [FederatedPointerEvent](https://pixijs.download/release/docs/events.FederatedPointerEvent.html.md)
+- [FederatedMouseEvent](https://pixijs.download/release/docs/events.FederatedMouseEvent.html.md)
+- [FederatedWheelEvent](https://pixijs.download/release/docs/events.FederatedWheelEvent.html.md)
+- [EventBoundary](https://pixijs.download/release/docs/events.EventBoundary.html.md)

package/vendor/pixijs-skills/skills/pixijs-filters/SKILL.md

@@ -0,0 +1,300 @@
+---
+name: pixijs-filters
+description: "Use this skill when applying visual effects to PixiJS v8 containers via the filter pipeline. Covers built-in filters (AlphaFilter, BlurFilter, ColorMatrixFilter, DisplacementFilter, NoiseFilter), custom Filter.from() with GLSL/WGSL, options (resolution, padding, antialias, blendRequired), filterArea optimization, pixi-filters community package. Triggers on: filters, BlurFilter, ColorMatrixFilter, DisplacementFilter, NoiseFilter, Filter.from, GLSL filter, pixi-filters, filterArea."
+license: MIT
+---
+
+Attach visual effects by assigning one filter (or an array for chaining) to `container.filters`. Built-in filters cover blur, color matrix, displacement, alpha, and noise; custom filters wrap a GLSL/WGSL fragment shader via `Filter.from(...)`.
+
+## Quick Start
+
+```ts
+const sprite = new Sprite(await Assets.load("hero.png"));
+app.stage.addChild(sprite);
+
+const blur = new BlurFilter({ strength: 4, quality: 4 });
+const colorMatrix = new ColorMatrixFilter();
+colorMatrix.brightness(1.2, false);
+
+sprite.filters = [blur, colorMatrix];
+
+const container = new Container();
+container.filters = [new BlurFilter({ strength: 2 })];
+container.filterArea = new Rectangle(0, 0, 800, 600);
+app.stage.addChild(container);
+```
+
+**Related skills:** `pixijs-custom-rendering` (shader internals, uniform types), `pixijs-blend-modes` (composing with filters), `pixijs-performance` (filter tuning, filterArea).
+
+## Core Patterns
+
+### Built-in filters
+
+```ts
+import {
+  AlphaFilter,
+  BlurFilter,
+  ColorMatrixFilter,
+  DisplacementFilter,
+  NoiseFilter,
+  Assets,
+  Sprite,
+} from "pixi.js";
+
+// Alpha (uniform transparency without per-child layering)
+const alpha = new AlphaFilter({ alpha: 0.5 });
+
+// Blur — strength/quality are uniform; strengthX/strengthY split axes;
+// kernelSize must be odd (5, 7, 9, ... 15); repeatEdgePixels avoids transparent edges
+const blur = new BlurFilter({
+  strength: 4,
+  quality: 4,
+  kernelSize: 5,
+  repeatEdgePixels: false,
+});
+
+// Color matrix — brightness is one of many presets. Others: tint, hue,
+// contrast, saturate, desaturate, greyscale/grayscale, blackAndWhite,
+// negative, sepia, technicolor, polaroid, kodachrome, browni, vintage,
+// colorTone, night, predator, lsd, reset. Direct access via
+// `colorMatrix.matrix` (20-element array) and `colorMatrix.alpha` (blend
+// between original and transformed).
+const colorMatrix = new ColorMatrixFilter();
+colorMatrix.brightness(1.5, false);
+colorMatrix.contrast(0.5, true); // multiply stacks on top of existing matrix
+colorMatrix.alpha = 0.7; // blend at 70% strength
+
+// Displacement — scale is a number or PointData
+const displacementTexture = await Assets.load("displacement_map.png");
+const displacementSprite = new Sprite(displacementTexture);
+const displacement = new DisplacementFilter({
+  sprite: displacementSprite,
+  scale: { x: 20, y: 10 },
+});
+
+// Noise — seed is an arbitrary number that determines the noise pattern; same seed reproduces the same pattern
+const noise = new NoiseFilter({ noise: 0.5, seed: Math.random() });
+
+sprite.filters = [blur, colorMatrix];
+```
+
+### Custom filter with Filter.from()
+
+The simplest way to create a custom filter. Only a fragment shader is needed; PixiJS provides a default vertex shader.
+
+```ts
+import { Filter } from "pixi.js";
+
+const filter = Filter.from({
+  gl: {
+    fragment: `
+            in vec2 vTextureCoord;
+            out vec4 finalColor;
+            uniform sampler2D uTexture;
+            uniform float uTime;
+
+            void main() {
+                vec2 uv = vTextureCoord;
+                uv.x += sin(uv.y * 10.0 + uTime) * 0.02;
+                finalColor = texture(uTexture, uv);
+            }
+        `,
+  },
+  resources: {
+    timeUniforms: {
+      uTime: { value: 0, type: "f32" },
+    },
+  },
+});
+
+sprite.filters = filter;
+
+app.ticker.add((ticker) => {
+  filter.resources.timeUniforms.uniforms.uTime += 0.04 * ticker.deltaTime;
+});
+```
+
+For more control, construct `GlProgram`/`GpuProgram` objects directly:
+
+```ts
+import { Filter, GlProgram } from "pixi.js";
+
+const glProgram = GlProgram.from({ fragment: fragmentSrc, vertex: vertexSrc });
+
+const filter = new Filter({
+  glProgram,
+  resources: {
+    timeUniforms: {
+      uTime: { value: 0, type: "f32" },
+    },
+  },
+});
+```
+
+Key points:
+
+- Use `out vec4 finalColor` in fragment shaders, not `gl_FragColor` (GLSL ES 3.0).
+- Use `texture()` to sample, not `texture2D`.
+- `glProgram` for WebGL, `gpuProgram` for WebGPU. Omitting one skips that renderer.
+- Textures go in `resources`, not uniforms. The filter system auto-provides `uTexture` (the input).
+- Access uniform values via `filter.resources.{groupName}.uniforms.{name}`.
+
+### Filter options
+
+```ts
+import { Filter, GlProgram, Rectangle } from "pixi.js";
+
+const filter = new Filter({
+  glProgram: GlProgram.from({ fragment }),
+  resources: {},
+  resolution: 0.5, // default 1. Lower = faster, blurrier. 'inherit' matches the render target resolution
+  padding: 10, // default 0. Extra pixels for effects that extend bounds
+  antialias: "off", // default 'off'. 'on' | 'off' | 'inherit'
+  blendMode: "normal", // default 'normal'
+  blendRequired: false, // default false. true if shader samples uBackTexture
+  clipToViewport: true, // default true
+});
+
+// Optimization: set known bounds to avoid per-frame measurement
+container.filterArea = new Rectangle(0, 0, 800, 600);
+
+// Toggle without rebuilding the filter array
+filter.enabled = false;
+
+// Share one filter instance across many display objects
+sprite1.filters = [filter];
+sprite2.filters = [filter];
+```
+
+### Community filters (pixi-filters)
+
+```ts
+import { AdjustmentFilter } from "pixi-filters/adjustment";
+import { GlowFilter } from "pixi-filters/glow";
+
+sprite.filters = [
+  new AdjustmentFilter({ brightness: 1.2, contrast: 1.1 }),
+  new GlowFilter({ distance: 15, outerStrength: 2 }),
+];
+```
+
+For v8, community filters use `pixi-filters/{name}` imports, not the old `@pixi/filter-*` packages.
+
+### Advanced blend modes
+
+Advanced blend modes (`color-burn`, `overlay`, `hard-light`, etc.) are powered by the filter system and must be imported before use. They also require `useBackBuffer: true` on WebGL; see the `pixijs-blend-modes` skill for the full list.
+
+```ts
+import "pixi.js/advanced-blend-modes";
+
+await app.init({ useBackBuffer: true });
+sprite.blendMode = "color-burn";
+```
+
+Advanced blend modes are filter-based, so they inherit `Filter.defaultOptions`, whose `resolution` defaults to `1`. On high-DPI render targets this can make a blend mode look clipped, scaled, or only partially applied. Set `Filter.defaultOptions.resolution = 'inherit'` before creating the affected objects to render at the render target resolution, at higher memory and runtime cost:
+
+```ts
+import { Filter } from "pixi.js";
+import "pixi.js/advanced-blend-modes";
+
+Filter.defaultOptions.resolution = "inherit";
+sprite.blendMode = "overlay";
+```
+
+## Common Mistakes
+
+### [CRITICAL] Using old Filter constructor (vertex, fragment, uniforms)
+
+Wrong:
+
+```ts
+import { Filter } from "pixi.js";
+
+const filter = new Filter(vertex, fragment, { uTime: 0 });
+```
+
+Correct:
+
+```ts
+import { Filter, GlProgram } from "pixi.js";
+
+const filter = new Filter({
+  glProgram: GlProgram.from({ fragment, vertex }),
+  resources: {
+    timeUniforms: { uTime: { value: 0, type: "f32" } },
+  },
+});
+```
+
+v8 uses an options object. Shaders must be wrapped in `GlProgram.from()` or `GpuProgram.from()`. Uniforms are grouped in `resources` with explicit types. Textures are resources, not uniforms.
+
+
+### [HIGH] Using @pixi/filter-\* packages for v8
+
+Wrong:
+
+```ts
+import { AdjustmentFilter } from "@pixi/filter-adjustment";
+```
+
+Correct:
+
+```ts
+import { AdjustmentFilter } from "pixi-filters/adjustment";
+```
+
+`@pixi/filter-*` packages are v7 only. For v8, the community filters package restructured to `pixi-filters/{name}`.
+
+
+### [HIGH] Using too many filters without containerizing
+
+Each filter application requires a framebuffer switch, bounds measurement, and render-to-texture pass. One filter on a parent container is much cheaper than the same filter on each child.
+
+Wrong:
+
+```ts
+for (const child of container.children) {
+  child.filters = [new BlurFilter({ strength: 4 })];
+}
+```
+
+Correct:
+
+```ts
+container.filters = [new BlurFilter({ strength: 4 })];
+```
+
+
+### [HIGH] Using a blendRequired filter without useBackBuffer on WebGL
+
+Custom filters and most advanced community filters that set `blendRequired: true` sample the back buffer. On WebGL that only works if the renderer was initialized with `useBackBuffer: true`; otherwise PixiJS logs a warning and the filter silently falls back:
+
+```ts
+await app.init({ useBackBuffer: true });
+```
+
+WebGPU enables the back buffer unconditionally, so this only affects WebGL.
+
+
+### [MEDIUM] Not setting filterArea for known-size containers
+
+Without `filterArea`, PixiJS measures the container bounds every frame via `getGlobalBounds()`, which recursively walks all children. For containers with known dimensions, set `filterArea` to avoid this cost:
+
+```ts
+import { Rectangle } from "pixi.js";
+
+container.filterArea = new Rectangle(0, 0, 800, 600);
+container.filters = [someFilter];
+```
+
+
+## API Reference
+
+- [Filter](https://pixijs.download/release/docs/filters.Filter.html.md)
+- [AlphaFilter](https://pixijs.download/release/docs/filters.AlphaFilter.html.md)
+- [BlurFilter](https://pixijs.download/release/docs/filters.BlurFilter.html.md)
+- [BlurFilterPass](https://pixijs.download/release/docs/filters.BlurFilterPass.html.md)
+- [ColorMatrixFilter](https://pixijs.download/release/docs/filters.ColorMatrixFilter.html.md)
+- [DisplacementFilter](https://pixijs.download/release/docs/filters.DisplacementFilter.html.md)
+- [NoiseFilter](https://pixijs.download/release/docs/filters.NoiseFilter.html.md)
+- [FilterSystem](https://pixijs.download/release/docs/rendering.FilterSystem.html.md)