@adobe/ecs 0.1.0 → 0.2.1

package/src/guide/20-shared.ts

@@ -0,0 +1,118 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+import { System, Vec2, World } from "../index.js";
+
+const cell = Symbol();
+const offset = Symbol();
+const velocity = Symbol();
+const position = Symbol();
+const camera = Symbol();
+
+/** A camera, as a renderer would give one: which chunks of the world it sees. */
+type Camera = { readonly sees: (chunk: Vec2.I32) => boolean };
+
+declare module "@adobe/ecs" {
+    interface Components {
+        // The chunk of the world an entity is in: each chunk's entities share an archetype.
+        [cell]: { type: Vec2.I32; shared: true };
+        // Where an entity is within its chunk, and in the world.
+        [offset]: { type: Vec2 };
+        [velocity]: { type: Vec2 };
+        [position]: { type: Vec2 };
+    }
+    interface Resources {
+        [camera]: { type: Camera | null };
+    }
+}
+
+const size = 10;
+const Unit = [cell, offset, velocity, position] as const;
+
+// Two units in each of 7 × 7 chunks, all moving east.
+const populate = System.create(({ commands }) => {
+    for (let x = -3; x <= 3; x++) {
+        for (let y = -3; y <= 3; y++) {
+            const spawn = commands.spawn(Unit, { [cell]: [x, y], [velocity]: [4, 0], [position]: [0, 0] });
+            spawn({ [offset]: [2, 3] });
+            spawn({ [offset]: [7, 8] });
+        }
+    }
+});
+
+const place = System.create({ components: { with: [cell, offset, position] } }, row => {
+    row[position] = Vec2.add(Vec2.scale([row[cell][0], row[cell][1]], size), row[offset]);
+});
+
+const drift = System.create({ components: { with: [offset, velocity] } }, row => {
+    row[offset] = Vec2.add(row[offset], row[velocity]);
+});
+
+// A unit past its chunk's edge moves into the next chunk.
+const cross = System.create({ components: { with: [cell, offset] } }, (row, { commands }) => {
+    const [x, y] = row[offset];
+    if (x >= size) commands.add(row.entity, [cell, offset], { [cell]: [row[cell][0] + 1, row[cell][1]], [offset]: [x - size, y] });
+});
+
+let drawn = 0;
+let left = Infinity;
+let right = -Infinity;
+const draw = System.create({
+    observer: true,
+    components: { with: [position], where: { [cell]: (at, { resources }) => resources[camera]?.sees(at) === true } },
+}, row => {
+    drawn += 1;
+    left = Math.min(left, row[position][0]);
+    right = Math.max(right, row[position][0]);
+});
+
+let refreshed = 0;
+const refresh = System.create({
+    observer: true,
+    components: { with: [position], changed: [position], where: { [cell]: (at, { resources }) => resources[camera]?.sees(at) === true } },
+}, () => {
+    refreshed += 1;
+});
+
+// Only chunk [4, 0], which no unit is in until one crosses into it.
+let east = 0;
+const countEast = System.create({ observer: true, components: { with: [position], where: { [cell]: [4, 0] } } }, () => {
+    east += 1;
+});
+
+/** How many chunks cameras were asked about. */
+let asked = 0;
+
+/** A camera over a chunk, seeing the chunks within `radius` of it. */
+const cameraOver = ([overX, overY]: readonly [number, number], radius: number): Camera => ({
+    sees: ([x, y]) => {
+        asked += 1;
+        return Math.max(Math.abs(x - overX), Math.abs(y - overY)) <= radius;
+    },
+});
+
+const look = System.create({}, ({ resources }, input: { readonly x: number; readonly y: number }) => {
+    resources[camera] = cameraOver([input.x, input.y], 1);
+});
+
+const report = async (world: World, what: string): Promise<void> => {
+    drawn = refreshed = east = asked = 0;
+    left = Infinity;
+    right = -Infinity;
+    await world.run(draw);
+    await world.run(refresh);
+    await world.run(countEast);
+    console.log(what, "drew", drawn, "from x", left, "to", right, "refreshed", refreshed, "east", east, "asked", asked);
+};
+
+export const main = async (): Promise<void> => {
+    await using world = World.create({ [camera]: cameraOver([0, 0], 1) });
+    await world.run(populate);
+    await world.run(place);
+    await report(world, "start:");
+    await world.run(drift);
+    await world.run(cross);
+    await world.run(place);
+    await report(world, "after a step:");
+    await report(world, "unchanged:");
+    await world.run(look, { x: 2, y: 2 });
+    await report(world, "camera moved:");
+};

package/src/guide/21-dom.md

@@ -0,0 +1,22 @@
+# Animating elements
+
+Systems can drive the page: the world holds what it shows, and systems write it to elements after each tick. Both UI
+chapters animate particles bouncing inside `#output`, the element the guide's Output tab gives, which a resource
+holds. Without a page, as in node, a stand-in takes its place, so the systems run the same and the program prints the
+same.
+
+- Objects live on the thread that shows them: [the dot and the stage](21-dom.ts#L22-L27) are `thread: "main"`, so the
+  systems touching them run on the page's thread.
+- A fixed `cadence` of 60 ticks a second, with `always`, makes [a velocity per tick a speed](21-dom.ts#L107),
+  whatever the display's rate.
+
+Each tick runs one composite:
+
+1. [`move`](21-dom.ts#L38-L44) moves every particle and turns it back from the walls.
+2. [`create`](21-dom.ts#L46-L51) gives each particle without a dot an element, with `commands.add`. Observers can't
+   issue commands, so it ticks, and its condition `is: [stage]` waits for a stage.
+3. [`draw`](21-dom.ts#L52-L60), an observer, sets each moved dot's `style.translate`, a transform, which the page
+   doesn't lay out again. `changed: [position]` skips the dots that didn't move.
+
+[A finalizer](21-dom.ts#L61-L63) removes a particle's element when the particle goes, and every element when the
+world is disposed, so one fewer dot is left once the traced particle is despawned.

package/src/guide/21-dom.out

@@ -0,0 +1,5 @@
+frame 1: 99.5cqw 49.25cqh
+frame 2: 100cqw 48.5cqh
+frame 3: 98.5cqw 47.75cqh
+60 dots drawn
+59 dots once the traced particle is gone

package/src/guide/21-dom.ts

@@ -0,0 +1,117 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+import { always, cadence, clock, Finalizer, System, Vec2, World } from "../index.js";
+
+const position = Symbol();
+const velocity = Symbol();
+const traced = Symbol();
+const dot = Symbol();
+const stage = Symbol();
+const tracing = Symbol();
+
+/** An element showing a particle, as the systems drawing use it. */
+type Dot = { readonly style: { translate: string; background: string }; readonly remove: () => void };
+/** Where particles are drawn: an element of the page, or a stand-in where there's no page. */
+type Stage = { readonly add: () => Dot; readonly count: () => number };
+
+declare module "@adobe/ecs" {
+    interface Components {
+        // Percents of the stage's width and height.
+        [position]: { type: Vec2 };
+        [velocity]: { type: Vec2 };
+        [traced]: { type: true };
+        [dot]: { type: Dot; thread: "main" };
+    }
+    interface Resources {
+        [stage]: { type: Stage | null; thread: "main" };
+        // Called with each frame of the traced particle's dot.
+        [tracing]: { type: ((frame: number, dot: Dot) => void) | null; thread: "main" };
+    }
+}
+
+const spawn = System.create(({ commands }) => {
+    commands.spawn([position, velocity, traced])({ [position]: [98, 50], [velocity]: [1.5, -0.75] });
+    for (let i = 1; i < 60; i++) {
+        commands.spawn([position, velocity])({ [position]: [(i * 37) % 100, (i * 61) % 100], [velocity]: [Math.cos(i * 2.4) * 0.6, Math.sin(i * 2.4) * 0.6] });
+    }
+});
+
+// Each tick moves every particle by its velocity, turning it back from the walls.
+const move = System.create({ components: { with: [position, velocity] } }, row => {
+    const [x, y] = Vec2.add(row[position], row[velocity]);
+    const [vx, vy] = row[velocity];
+    row[velocity] = [x < 0 || x > 100 ? -vx : vx, y < 0 || y > 100 ? -vy : vy];
+    row[position] = [Math.min(Math.max(x, 0), 100), Math.min(Math.max(y, 0), 100)];
+});
+
+// Gives each particle a dot: not an observer, since it issues commands.
+const create = System.create({ components: { with: [position], not: [dot] }, resources: { is: [stage] } }, (row, { resources, commands }) => {
+    const element = resources[stage].add();
+    element.style.background = `hsl(${row.entity * 47 % 360} 80% 60%)`;
+    commands.add(row.entity, dot, element);
+});
+// Moves each dot whose particle moved, by a transform, which the page doesn't lay out again.
+const draw = System.create({
+    observer: true,
+    components: { with: [position, dot], optional: [traced], changed: [position] },
+}, (row, { resources }) => {
+    const [x, y] = row[position];
+    row[dot].style.translate = `${x}cqw ${y}cqh`;
+    if (row[traced] !== undefined) resources[tracing]?.(resources[clock].tick + 1, row[dot]);
+});
+Finalizer.create({ components: { with: [dot] } }, row => {
+    row[dot].remove();
+});
+
+const despawnTraced = System.create({ components: { with: [traced] } }, (row, { commands }) => {
+    commands.despawn(row.entity);
+});
+
+/** The page's `#output`: dots move inside a field a dot's radius in from its edges, by percents of it. */
+const pageStage = (output: HTMLElement): Stage => {
+    const field = output.appendChild(document.createElement("div"));
+    field.style.cssText = "position: absolute; inset: 6px; container-type: size";
+    return {
+        add: () => {
+            const element = field.appendChild(document.createElement("div"));
+            element.style.cssText = "position: absolute; width: 12px; height: 12px; margin: -6px; border-radius: 50%";
+            return element;
+        },
+        count: () => field.childElementCount,
+    };
+};
+
+/** Where there's no page, as in node: dots that keep what's written to them. */
+const standIn = (): Stage => {
+    const dots = new Set<Dot>();
+    return {
+        add: () => {
+            const added: Dot = { style: { translate: "", background: "" }, remove: () => void dots.delete(added) };
+            dots.add(added);
+            return added;
+        },
+        count: () => dots.size,
+    };
+};
+
+export const main = async (): Promise<void> => {
+    // The guide's Output tab has an element #output; elsewhere, as in node, there's none.
+    const output = globalThis.document?.querySelector<HTMLElement>("#output") ?? null;
+    const shown = output === null ? standIn() : pageStage(output);
+    const traceDone = Promise.withResolvers<void>();
+    const logFrame = (frame: number, traced: Dot): void => {
+        if (frame > 3) return;
+        console.log(`frame ${frame}: ${traced.style.translate}`);
+        if (frame === 3) traceDone.resolve();
+    };
+    // 60 ticks a second, whatever the display's rate.
+    await using world = World.create({ [cadence]: { kind: "fixed", step: 1000 / 60 }, [always]: true, [stage]: shown, [tracing]: logFrame });
+    await world.run(spawn);
+    world.add(System.create([move, create, draw]));
+    // The first three frames, or two seconds should they never be drawn.
+    await Promise.race([traceDone.promise, new Promise(resolve => setTimeout(resolve, 2000))]);
+    console.log(shown.count(), "dots drawn");
+    await world.run(despawnTraced);
+    console.log(shown.count(), "dots once the traced particle is gone");
+    // In a page it animates until the page goes; elsewhere it ends, its world disposed.
+    if (output !== null) await new Promise(resolve => addEventListener("pagehide", resolve));
+};

package/src/guide/22-canvas.md

@@ -0,0 +1,15 @@
+# Drawing on a canvas
+
+The same particles, drawn in immediate mode: each frame, the canvas is cleared and drawn again whole.
+
+[`draw`](22-canvas.ts#L52-L80) is one observer without components, so it runs once per tick, not per particle.
+
+- `changed: [clock]` runs it after every tick, and `is: [pen]` waits for a 2D context.
+- It reads every particle through [an index without a key](22-canvas.ts#L50-L51), `key: []`, and the traced one
+  through a second.
+- It sizes the canvas's pixels to its size on the page, then calls `clearRect(`, and `arc(` and `fill()` for each
+  particle.
+
+Without a page, the stand-in keeps the circles filled since it was last cleared, and its `getImageData(` answers
+whether a pixel is covered, as a canvas does. So the program checks that the traced particle is drawn, frame by
+frame, the same in node and on the page.

package/src/guide/22-canvas.out

@@ -0,0 +1,3 @@
+frame 1: the traced particle is drawn
+frame 2: the traced particle is drawn
+frame 3: the traced particle is drawn

package/src/guide/22-canvas.ts

@@ -0,0 +1,119 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+import { always, cadence, clock, Index, System, Vec2, World } from "../index.js";
+
+const position = Symbol();
+const velocity = Symbol();
+const traced = Symbol();
+const pen = Symbol();
+const tracing = Symbol();
+
+/** What the drawing system uses of a canvas's 2D context, which a stand-in gives where there's no page. */
+type Pen = {
+    readonly canvas: { width: number; height: number; readonly clientWidth: number; readonly clientHeight: number };
+    fillStyle: string | CanvasGradient | CanvasPattern;
+    clearRect(x: number, y: number, width: number, height: number): void;
+    beginPath(): void;
+    arc(x: number, y: number, radius: number, start: number, end: number): void;
+    fill(): void;
+    getImageData(x: number, y: number, width: number, height: number): { readonly data: ArrayLike<number> };
+};
+
+declare module "@adobe/ecs" {
+    interface Components {
+        // Percents of the canvas's width and height.
+        [position]: { type: Vec2 };
+        [velocity]: { type: Vec2 };
+        [traced]: { type: true };
+    }
+    interface Resources {
+        [pen]: { type: Pen | null; thread: "main" };
+        // Called with each frame drawn, and where the traced particle was drawn, in the canvas's pixels.
+        [tracing]: { type: ((frame: number, at: Vec2) => void) | null; thread: "main" };
+    }
+}
+
+const spawn = System.create(({ commands }) => {
+    commands.spawn([position, velocity, traced])({ [position]: [98, 50], [velocity]: [1.5, -0.75] });
+    for (let i = 1; i < 400; i++) {
+        commands.spawn([position, velocity])({ [position]: [(i * 37) % 100, (i * 61) % 100], [velocity]: [Math.cos(i * 2.4) * 0.6, Math.sin(i * 2.4) * 0.6] });
+    }
+});
+
+// Each tick moves every particle by its velocity, turning it back from the walls.
+const move = System.create({ components: { with: [position, velocity] } }, row => {
+    const [x, y] = Vec2.add(row[position], row[velocity]);
+    const [vx, vy] = row[velocity];
+    row[velocity] = [x < 0 || x > 100 ? -vx : vx, y < 0 || y > 100 ? -vy : vy];
+    row[position] = [Math.min(Math.max(x, 0), 100), Math.min(Math.max(y, 0), 100)];
+});
+
+const particles = Index.create({ key: [], components: { with: [position] } });
+const tracedOnes = Index.create({ key: [], components: { with: [position, traced] } });
+// Clears the canvas and draws every particle, after each tick.
+const draw = System.create({
+    observer: true,
+    resources: { is: [pen], changed: [clock] },
+    lookup: { particles: { index: particles }, traced: { index: tracedOnes } },
+}, ({ resources, lookup }) => {
+    const context = resources[pen];
+    const { canvas } = context;
+    // The canvas's pixels follow its size on the page.
+    const scale = globalThis.devicePixelRatio ?? 1;
+    const width = Math.round(canvas.clientWidth * scale);
+    const height = Math.round(canvas.clientHeight * scale);
+    if (canvas.width !== width) canvas.width = width;
+    if (canvas.height !== height) canvas.height = height;
+    const radius = 4 * scale;
+    const at = ([x, y]: Vec2): Vec2 => [radius + x / 100 * (width - 2 * radius), radius + y / 100 * (height - 2 * radius)];
+    context.clearRect(0, 0, width, height);
+    const list = lookup.particles();
+    for (let i = 0; i < list.length; i++) {
+        const particle = list.at(i);
+        const [x, y] = at(particle[position]);
+        context.fillStyle = `hsl(${particle.entity * 47 % 360} 80% 60%)`;
+        context.beginPath();
+        context.arc(x, y, radius, 0, 2 * Math.PI);
+        context.fill();
+    }
+    const followed = lookup.traced();
+    if (followed.length > 0) resources[tracing]?.(resources[clock].tick + 1, at(followed.at(0)[position]));
+});
+
+/** Where there's no page, as in node: a canvas of a fixed size that keeps the circles filled since it was last cleared. */
+const standIn = (): Pen => {
+    const filled: { readonly x: number; readonly y: number; readonly radius: number }[] = [];
+    let path = { x: 0, y: 0, radius: 0 };
+    return {
+        canvas: { width: 0, height: 0, clientWidth: 400, clientHeight: 300 },
+        fillStyle: "",
+        clearRect: () => void filled.splice(0),
+        beginPath: () => void (path = { x: 0, y: 0, radius: 0 }),
+        arc: (x, y, radius) => void (path = { x, y, radius }),
+        fill: () => void filled.push(path),
+        getImageData: (x, y) => ({ data: [0, 0, 0, filled.some(circle => Math.hypot(circle.x - x, circle.y - y) < circle.radius) ? 255 : 0] }),
+    };
+};
+
+export const main = async (): Promise<void> => {
+    // The guide's Output tab has an element #output; elsewhere, as in node, there's none.
+    const output = globalThis.document?.querySelector<HTMLElement>("#output") ?? null;
+    const canvas = output?.appendChild(document.createElement("canvas")) ?? null;
+    canvas?.setAttribute("style", "display: block; width: 100%; height: 100%");
+    const context = canvas === null ? standIn() : canvas.getContext("2d");
+    const traceDone = Promise.withResolvers<void>();
+    const logFrame = (frame: number, [x, y]: Vec2): void => {
+        if (frame > 3 || context === null) return;
+        // Whether the traced particle's place is drawn on: its pixel's opacity.
+        const covered = context.getImageData(Math.floor(x), Math.floor(y), 1, 1).data[3] === 255;
+        console.log(`frame ${frame}: the traced particle is ${covered ? "drawn" : "missing"}`);
+        if (frame === 3) traceDone.resolve();
+    };
+    // 60 ticks a second, whatever the display's rate.
+    await using world = World.create({ [cadence]: { kind: "fixed", step: 1000 / 60 }, [always]: true, [pen]: context, [tracing]: logFrame });
+    await world.run(spawn);
+    world.add(System.create([move, draw]));
+    // The first three frames, or two seconds should they never be drawn.
+    await Promise.race([traceDone.promise, new Promise(resolve => setTimeout(resolve, 2000))]);
+    // In a page it animates until the page goes; elsewhere it ends, its world disposed.
+    if (canvas !== null) await new Promise(resolve => addEventListener("pagehide", resolve));
+};

package/src/guide/CLAUDE.md

@@ -1,34 +1,49 @@
 # The guide
 
-`guide.md` in this folder teaches the ECS to someone who has just started using it. The files beside it are the
-code it shows: every excerpt comes from a file here that runs as a test, so the guide can't drift from the API.
+This folder teaches the ECS to someone who has just started using it, in chapters. `README.md` is its index: the
+chapters by part, in order, the unnumbered `Setup` and `Keys and declarations` first, numbered `00-`. Each chapter is
+its prose, `NN-name.md`, under a `# Title` that the index gives too, and a program, `NN-name.ts`, whose exported `main`
+runs it, and what it prints is in `NN-name.out` beside it. `Setup` has prose alone. The interactive guide, `packages/ecs-guide`, shows each chapter's prose beside its program
+in an editor, and runs it.
 
-## Writing the guide
+`guide.test.ts` runs every program and compares what it logged with its `.out`, which mustn't be empty. It checks
+that every program has prose and the index lists every chapter by its title; that each chapter's prose names, as code,
+what the chapter teaches, its list in `teaches`, and its program does it, outside comments; that each link to a
+program's lines points at whole code of the chapter's own files; that code in the prose stays a line or two; and, by
+`mutations`, that taking a point a program teaches away changes what it prints, or prints the failure a broken rule
+gives. A chapter that shows a type error does
+it in `NN-name.type-test.ts`, under a `// @ts-expect-error` that the package's build checks.
 
-- Teach how to use the API, concisely. A reader is learning, so show the common case and stop.
-- Prefer concise TypeScript with a few comments for what isn't obvious over prose that explains the code.
-- Explain behaviour only as far as using it needs: "you're notified when values change, at most once per frame", not
-  the exact timing rules. Detailed rules belong in a glossary or appendix, not in a lesson.
-- Don't document what throws. Throws aren't part of the documented contract; readers meet them when they happen, and
-  compile-time checks prevent most mistakes.
-- Never mention `@adobe/data` or any other package that isn't this one. It means nothing to a consumer.
-- Describe only the current API, with no history.
-- Keep it small. Write sections for the basics and intermediate topics; advanced topics are placeholders until the
-  API settles.
+## Writing the prose
 
-## Structure
-
-- **Setup:** its own short section before the basics: the build plugin and how keys are registered and declared.
-- **Basics:** resources, then entities, components and archetypes, which together are the whole data model, then
-  systems, and ticks and cadence: everything needed to build and run a world and its loop. Topics that belong together
-  share a section; entities are taught with components, and archetypes, named lists of components, with them.
-- **Intermediate:** scheduling and composites, sync points, change filters and conditions, input, rules, finalizers
-  and change sets, and traits with within and references.
-- **Advanced:** placeholders only.
+- The readers are experienced engineers. Keep it concise: short paragraphs and lists, no padding, no marketing, and
+  no repeating what the code shows.
+- Introduce the chapter's concept, define each term in italics where it first appears, and say how it behaves: what
+  runs when, what's kept, and what's rejected and why.
+- Code in the prose only where a sentence needs a shape: inline, or a block of a line or two. The program in the
+  editor is the demonstration.
+- Link the program's lines a sentence speaks of: `[spawns an entity](02-entities.ts#L19-L22)`, or `#L17` for one line.
+  On GitHub the link opens the file at those lines; in the interactive guide it selects them in the editor. A link
+  covers whole statements or whole members of a declaration. Link another chapter by its prose, `[Reductions](15-reductions.md)`.
+- Don't repeat the output, which the run window shows; mention a line of it only where a sentence points at it.
+- Never mention `@adobe/data` or any other package that isn't this one. Describe only the current API, with no history.
 
 ## Code conventions
 
-- Keys are short: `Symbol("position")`, never a path like `"guide/components/position"`. A resource's description says
-  nothing about components.
-- Archetypes are types, so their names are PascalCase: `const Particle = Archetype.create([position, velocity])`.
+- An example imports only the package, as `../index.js`, declares what it uses, and exports `main`, an async function
+  that creates its worlds with `World.create()`, runs systems, logs what they did with `console.log`, and disposes its
+  worlds before it resolves. Never top-level await.
+- Comments are reading aids, short, for what the code doesn't say; the prose carries the explanation.
+- What it prints shows the effect of each point it teaches, so leaving one out changes the output: enough entities
+  that a filter or a target matters, the values a system wrote read back, what a finalizer did. Add each to
+  `mutations`.
+- An example that draws finds the element to draw in as `#output`, which the interactive guide's Output tab gives, and
+  holds what it draws with in a resource; where there's no page, as in node, a small stand-in takes its place and
+  keeps what's drawn, so the systems run the same and the program prints the same. It logs a few deterministic frames,
+  ticking at a fixed cadence, then animates until its page goes, or, without one, ends.
+- What it prints is deterministic: no timings or random values, and rows in an order the API doesn't define are sorted
+  before they're printed.
+- Keys are `Symbol()` with no description: the build's id names each by its binding.
+- Archetypes are types, so their names are PascalCase: `const Particle = [position, velocity] as const`.
 - Use the public API only, as a consumer imports it, not internal modules. Read a world through observer systems.
+- Lines change as code does: the test of links fails on any that no longer covers whole code, so move them with it.

package/src/guide/README.md

@@ -0,0 +1,42 @@
+# Guide
+
+How to use the ECS, in chapters. Each chapter is its prose, `NN-name.md`, and a program, `NN-name.ts`, whose output is
+`NN-name.out`. The [interactive guide](../../../ecs-guide) shows each chapter's prose beside its program, which you edit
+and run in the browser.
+
+- [Setup](00-setup.md)
+- [Keys and declarations](00-keys.md)
+
+## Basics
+
+1. [Resources](01-resources.md)
+2. [Entities, components and archetypes](02-entities.md)
+3. [Systems](03-systems.md)
+4. [Ticks and cadence](04-ticks.md)
+
+## Intermediate
+
+5. [Scheduling and composites](05-scheduling.md)
+6. [Sync points](06-sync-points.md)
+7. [Change filters and conditions](07-change-filters.md)
+8. [Input](08-input.md)
+9. [Rules](09-rules.md)
+10. [Finalizers and change sets](10-finalizers.md)
+11. [Traits, within and references](11-traits.md)
+
+## Advanced
+
+12. [Lookups](12-lookups.md)
+13. [Indexes](13-indexes.md)
+14. [Kernels](14-kernels.md)
+15. [Reductions](15-reductions.md)
+16. [GPU kernels and render systems](16-gpu.md)
+17. [Hierarchies](17-hierarchies.md)
+18. [Identity and ids](18-identity.md)
+19. [Threads](19-threads.md)
+20. [Shared components and where](20-shared.md)
+
+## UI
+
+21. [Animating elements](21-dom.md)
+22. [Drawing on a canvas](22-canvas.md)