@adobe/data 0.9.39 → 0.9.40

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (82) hide show
  1. package/AGENTS.md +85 -16
  2. package/package.json +1 -1
  3. package/references/data-lit/package.json +1 -1
  4. package/references/data-lit-tictactoe/package.json +22 -0
  5. package/references/data-lit-tictactoe/src/elements/tictactoe-app/tictactoe-app.css.ts +11 -0
  6. package/references/data-lit-tictactoe/src/elements/tictactoe-app/tictactoe-app.ts +22 -0
  7. package/references/data-lit-tictactoe/src/elements/tictactoe-board/tictactoe-board-presentation.ts +13 -0
  8. package/references/data-lit-tictactoe/src/elements/tictactoe-board/tictactoe-board.css.ts +17 -0
  9. package/references/data-lit-tictactoe/src/elements/tictactoe-board/tictactoe-board.ts +18 -0
  10. package/references/data-lit-tictactoe/src/elements/tictactoe-cell/tictactoe-cell-presentation.ts +22 -0
  11. package/references/data-lit-tictactoe/src/elements/tictactoe-cell/tictactoe-cell.css.ts +31 -0
  12. package/references/data-lit-tictactoe/src/elements/tictactoe-cell/tictactoe-cell.ts +41 -0
  13. package/references/data-lit-tictactoe/src/elements/tictactoe-hud/tictactoe-hud-presentation.ts +16 -0
  14. package/references/data-lit-tictactoe/src/elements/tictactoe-hud/tictactoe-hud.css.ts +18 -0
  15. package/references/data-lit-tictactoe/src/elements/tictactoe-hud/tictactoe-hud.ts +44 -0
  16. package/references/data-lit-tictactoe/src/main.ts +9 -0
  17. package/references/data-lit-tictactoe/src/state/agent-plugin.ts +117 -0
  18. package/references/data-lit-tictactoe/src/state/tictactoe-plugin.ts +56 -0
  19. package/references/data-lit-tictactoe/src/tictactoe-element.ts +10 -0
  20. package/references/data-lit-tictactoe/src/types/board-cell.ts +5 -0
  21. package/references/data-lit-tictactoe/src/types/board-state/board-state.ts +7 -0
  22. package/references/data-lit-tictactoe/src/types/board-state/create-initial-board.ts +5 -0
  23. package/references/data-lit-tictactoe/src/types/board-state/current-player.ts +13 -0
  24. package/references/data-lit-tictactoe/src/types/board-state/derive-status.ts +12 -0
  25. package/references/data-lit-tictactoe/src/types/board-state/get-cell.ts +7 -0
  26. package/references/data-lit-tictactoe/src/types/board-state/get-move-count.ts +6 -0
  27. package/references/data-lit-tictactoe/src/types/board-state/get-winner.ts +14 -0
  28. package/references/data-lit-tictactoe/src/types/board-state/get-winning-line.ts +25 -0
  29. package/references/data-lit-tictactoe/src/types/board-state/is-board-full.ts +5 -0
  30. package/references/data-lit-tictactoe/src/types/board-state/is-cell-playable.ts +13 -0
  31. package/references/data-lit-tictactoe/src/types/board-state/is-cell-winning.ts +9 -0
  32. package/references/data-lit-tictactoe/src/types/board-state/is-game-over.ts +8 -0
  33. package/references/data-lit-tictactoe/src/types/board-state/public.ts +15 -0
  34. package/references/data-lit-tictactoe/src/types/board-state/schema.ts +10 -0
  35. package/references/data-lit-tictactoe/src/types/board-state/set-board-cell.ts +13 -0
  36. package/references/data-lit-tictactoe/src/types/game-status.ts +3 -0
  37. package/references/data-lit-tictactoe/src/types/move-reject-reason.ts +7 -0
  38. package/references/data-lit-tictactoe/src/types/play-move-args/can-play-move.ts +33 -0
  39. package/references/data-lit-tictactoe/src/types/play-move-args/play-move-args.ts +4 -0
  40. package/references/data-lit-tictactoe/src/types/play-move-args/public.ts +3 -0
  41. package/references/data-lit-tictactoe/src/types/player-mark/player-mark.ts +7 -0
  42. package/references/data-lit-tictactoe/src/types/player-mark/public.ts +3 -0
  43. package/references/data-lit-tictactoe/src/types/player-mark/schema.ts +9 -0
  44. package/references/data-lit-tictactoe/src/types/winning-line.ts +3 -0
  45. package/references/data-lit-tictactoe/tsconfig.json +16 -0
  46. package/references/data-lit-todo/package.json +1 -1
  47. package/references/data-react/package.json +1 -1
  48. package/references/data-react-hello/package.json +1 -1
  49. package/references/data-react-hello/src/{App.tsx → app.tsx} +2 -2
  50. package/references/data-react-hello/src/components/counter/counter-presentation.tsx +13 -0
  51. package/references/data-react-hello/src/components/counter/counter.tsx +26 -0
  52. package/references/data-react-hello/src/main.tsx +1 -1
  53. package/references/data-react-hello/src/state/use-counter-database.ts +6 -0
  54. package/references/data-react-pixie/package.json +1 -1
  55. package/references/data-react-pixie/src/{App.tsx → app.tsx} +7 -7
  56. package/references/data-react-pixie/src/{filter-toggle.tsx → components/filter-selector/filter-selector-presentation.tsx} +9 -15
  57. package/references/data-react-pixie/src/components/filter-selector/filter-selector.tsx +22 -0
  58. package/references/data-react-pixie/src/{filters.ts → components/pixie-scene/pixie-filters.ts} +3 -1
  59. package/references/data-react-pixie/src/components/pixie-scene/pixie-scene-presentation.tsx +18 -0
  60. package/references/data-react-pixie/src/components/pixie-scene/pixie-scene.tsx +26 -0
  61. package/references/data-react-pixie/src/components/pixie-scene/pixie-tick.tsx +12 -0
  62. package/references/data-react-pixie/src/components/sprite/sprite-presentation.tsx +39 -0
  63. package/references/data-react-pixie/src/components/sprite/sprite.tsx +37 -0
  64. package/references/data-react-pixie/src/{hooks/use-texture.ts → components/sprite/use-sprite-texture.ts} +3 -1
  65. package/references/data-react-pixie/src/main.tsx +1 -1
  66. package/references/data-react-pixie/src/{pixie-plugin.ts → state/pixie-plugin.ts} +4 -7
  67. package/references/data-react-pixie/src/state/use-pixie-database.ts +6 -0
  68. package/references/data-react-pixie/src/types/filter-type.ts +3 -0
  69. package/references/data-react-pixie/src/types/sprite-type/image.ts +14 -0
  70. package/references/data-react-pixie/src/types/sprite-type/public.ts +4 -0
  71. package/references/data-react-pixie/src/types/sprite-type/schema.ts +5 -0
  72. package/references/data-react-pixie/src/types/sprite-type/sprite-type.ts +7 -0
  73. package/references/data-react-hello/src/Counter.tsx +0 -21
  74. package/references/data-react-pixie/src/hooks/use-database.ts +0 -6
  75. package/references/data-react-pixie/src/pixi-react.d.ts +0 -1
  76. package/references/data-react-pixie/src/sprite-container.tsx +0 -23
  77. package/references/data-react-pixie/src/sprite-urls.ts +0 -9
  78. package/references/data-react-pixie/src/sprite.tsx +0 -35
  79. package/references/data-react-pixie/src/tick.tsx +0 -10
  80. /package/references/data-react-hello/src/{counter-plugin.ts → state/counter-plugin.ts} +0 -0
  81. /package/references/data-react-pixie/src/{bunny.png → types/sprite-type/bunny.png} +0 -0
  82. /package/references/data-react-pixie/src/{fox.png → types/sprite-type/fox.png} +0 -0
@@ -0,0 +1,12 @@
1
+ // © 2026 Adobe. MIT License. See /LICENSE for details.
2
+
3
+ import type { BoardState } from "./board-state";
4
+ import type { GameStatus } from "../game-status";
5
+ import { getWinningLine } from "./get-winning-line";
6
+ import { isBoardFull } from "./is-board-full";
7
+
8
+ export const deriveStatus = (board: BoardState): GameStatus => {
9
+ if (getWinningLine(board)) return "won";
10
+ if (isBoardFull(board)) return "draw";
11
+ return (board.match(/[XO]/g) ?? []).length > 0 ? "in_progress" : "idle";
12
+ };
@@ -0,0 +1,7 @@
1
+ // © 2026 Adobe. MIT License. See /LICENSE for details.
2
+
3
+ import type { BoardState } from "./board-state";
4
+ import type { BoardCell } from "../board-cell";
5
+
6
+ export const getCell = (board: BoardState, index: number): BoardCell =>
7
+ (board[index] as BoardCell) ?? " ";
@@ -0,0 +1,6 @@
1
+ // © 2026 Adobe. MIT License. See /LICENSE for details.
2
+
3
+ import type { BoardState } from "./board-state";
4
+
5
+ export const getMoveCount = (board: BoardState): number =>
6
+ (board.match(/[XO]/g) ?? []).length;
@@ -0,0 +1,14 @@
1
+ // © 2026 Adobe. MIT License. See /LICENSE for details.
2
+
3
+ import type { BoardState } from "./board-state";
4
+ import type { PlayerMark } from "../player-mark/player-mark";
5
+ import { getWinningLine } from "./get-winning-line";
6
+ import { isBoardFull } from "./is-board-full";
7
+
8
+ export const getWinner = (
9
+ board: BoardState,
10
+ ): PlayerMark | "cat" | null => {
11
+ const line = getWinningLine(board);
12
+ if (line) return board[line[0]] as PlayerMark;
13
+ return isBoardFull(board) ? "cat" : null;
14
+ };
@@ -0,0 +1,25 @@
1
+ // © 2026 Adobe. MIT License. See /LICENSE for details.
2
+
3
+ import type { BoardState } from "./board-state";
4
+ import type { WinningLine } from "../winning-line";
5
+
6
+ const LINES: readonly WinningLine[] = [
7
+ [0, 1, 2],
8
+ [3, 4, 5],
9
+ [6, 7, 8],
10
+ [0, 3, 6],
11
+ [1, 4, 7],
12
+ [2, 5, 8],
13
+ [0, 4, 8],
14
+ [2, 4, 6],
15
+ ];
16
+
17
+ export const getWinningLine = (board: BoardState): WinningLine | null => {
18
+ for (const [a, b, c] of LINES) {
19
+ const mark = board[a];
20
+ if (mark !== " " && mark === board[b] && mark === board[c]) {
21
+ return [a, b, c];
22
+ }
23
+ }
24
+ return null;
25
+ };
@@ -0,0 +1,5 @@
1
+ // © 2026 Adobe. MIT License. See /LICENSE for details.
2
+
3
+ import type { BoardState } from "./board-state";
4
+
5
+ export const isBoardFull = (board: BoardState): boolean => !board.includes(" ");
@@ -0,0 +1,13 @@
1
+ // © 2026 Adobe. MIT License. See /LICENSE for details.
2
+
3
+ import type { BoardState } from "./board-state";
4
+ import { deriveStatus } from "./derive-status";
5
+ import { getCell } from "./get-cell";
6
+
7
+ export const isCellPlayable = (board: BoardState, index: number): boolean => {
8
+ const status = deriveStatus(board);
9
+ const cell = getCell(board, index);
10
+ return (
11
+ (status === "in_progress" || status === "idle") && cell === " "
12
+ );
13
+ };
@@ -0,0 +1,9 @@
1
+ // © 2026 Adobe. MIT License. See /LICENSE for details.
2
+
3
+ import type { BoardState } from "./board-state";
4
+ import { getWinningLine } from "./get-winning-line";
5
+
6
+ export const isCellWinning = (board: BoardState, index: number): boolean => {
7
+ const line = getWinningLine(board);
8
+ return line !== null && line.includes(index);
9
+ };
@@ -0,0 +1,8 @@
1
+ // © 2026 Adobe. MIT License. See /LICENSE for details.
2
+
3
+ import type { BoardState } from "./board-state";
4
+ import { getWinningLine } from "./get-winning-line";
5
+ import { isBoardFull } from "./is-board-full";
6
+
7
+ export const isGameOver = (board: BoardState): boolean =>
8
+ getWinningLine(board) !== null || isBoardFull(board);
@@ -0,0 +1,15 @@
1
+ // © 2026 Adobe. MIT License. See /LICENSE for details.
2
+
3
+ export { schema } from "./schema";
4
+ export { createInitialBoard } from "./create-initial-board";
5
+ export { currentPlayer } from "./current-player";
6
+ export { deriveStatus } from "./derive-status";
7
+ export { getCell } from "./get-cell";
8
+ export { getWinningLine } from "./get-winning-line";
9
+ export { isCellPlayable } from "./is-cell-playable";
10
+ export { isCellWinning } from "./is-cell-winning";
11
+ export { getWinner } from "./get-winner";
12
+ export { getMoveCount } from "./get-move-count";
13
+ export { isBoardFull } from "./is-board-full";
14
+ export { isGameOver } from "./is-game-over";
15
+ export { setBoardCell } from "./set-board-cell";
@@ -0,0 +1,10 @@
1
+ // © 2026 Adobe. MIT License. See /LICENSE for details.
2
+
3
+ import { Schema } from "@adobe/data/schema";
4
+
5
+ export const schema = {
6
+ type: "string",
7
+ description: "Tic-Tac-Toe board top left to bottom right",
8
+ minLength: 9,
9
+ maxLength: 9,
10
+ } as const satisfies Schema;
@@ -0,0 +1,13 @@
1
+ // © 2026 Adobe. MIT License. See /LICENSE for details.
2
+
3
+ import type { BoardState } from "./board-state";
4
+ import type { PlayerMark } from "../player-mark/player-mark";
5
+
6
+ export const setBoardCell = (args: {
7
+ board: BoardState;
8
+ index: number;
9
+ mark: PlayerMark;
10
+ }): BoardState => {
11
+ const { board, index, mark } = args;
12
+ return board.slice(0, index) + mark + board.slice(index + 1);
13
+ };
@@ -0,0 +1,3 @@
1
+ // © 2026 Adobe. MIT License. See /LICENSE for details.
2
+
3
+ export type GameStatus = "idle" | "in_progress" | "won" | "draw";
@@ -0,0 +1,7 @@
1
+ // © 2026 Adobe. MIT License. See /LICENSE for details.
2
+
3
+ export type MoveRejectReason =
4
+ | "index_out_of_bounds"
5
+ | "game_not_active"
6
+ | "cell_occupied"
7
+ | "game_over";
@@ -0,0 +1,33 @@
1
+ // © 2026 Adobe. MIT License. See /LICENSE for details.
2
+
3
+ import { BoardState } from "../board-state/board-state";
4
+ import type { MoveRejectReason } from "../move-reject-reason";
5
+
6
+ export type CanPlayMoveArgs = {
7
+ readonly board: BoardState;
8
+ readonly index: number;
9
+ };
10
+
11
+ export type CanPlayMoveResult =
12
+ | { readonly ok: true }
13
+ | { readonly ok: false; readonly reason: MoveRejectReason };
14
+
15
+ export const canPlayMove = ({
16
+ board,
17
+ index,
18
+ }: CanPlayMoveArgs): CanPlayMoveResult => {
19
+ if (!Number.isInteger(index) || index < 0 || index > 8) {
20
+ return { ok: false, reason: "index_out_of_bounds" };
21
+ }
22
+
23
+ const status = BoardState.deriveStatus(board);
24
+ if (status === "won" || status === "draw") {
25
+ return { ok: false, reason: "game_over" };
26
+ }
27
+
28
+ if (board[index] !== " ") {
29
+ return { ok: false, reason: "cell_occupied" };
30
+ }
31
+
32
+ return { ok: true };
33
+ };
@@ -0,0 +1,4 @@
1
+ // © 2026 Adobe. MIT License. See /LICENSE for details.
2
+
3
+ export type PlayMoveArgs = { readonly index: number };
4
+ export * as PlayMoveArgs from "./public";
@@ -0,0 +1,3 @@
1
+ // © 2026 Adobe. MIT License. See /LICENSE for details.
2
+
3
+ export { canPlayMove } from "./can-play-move";
@@ -0,0 +1,7 @@
1
+ // © 2026 Adobe. MIT License. See /LICENSE for details.
2
+
3
+ import { Schema } from "@adobe/data/schema";
4
+ import { schema } from "./schema";
5
+
6
+ export type PlayerMark = Schema.ToType<typeof schema>;
7
+ export * as PlayerMark from "./public";
@@ -0,0 +1,3 @@
1
+ // © 2026 Adobe. MIT License. See /LICENSE for details.
2
+
3
+ export { schema } from "./schema";
@@ -0,0 +1,9 @@
1
+ // © 2026 Adobe. MIT License. See /LICENSE for details.
2
+
3
+ import { Schema } from "@adobe/data/schema";
4
+
5
+ export const schema = {
6
+ type: "string",
7
+ enum: ["X", "O"],
8
+ description: "Player mark",
9
+ } as const satisfies Schema;
@@ -0,0 +1,3 @@
1
+ // © 2026 Adobe. MIT License. See /LICENSE for details.
2
+
3
+ export type WinningLine = readonly [number, number, number];
@@ -0,0 +1,16 @@
1
+ {
2
+ "compilerOptions": {
3
+ "target": "ES2020",
4
+ "useDefineForClassFields": false,
5
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
6
+ "module": "ESNext",
7
+ "skipLibCheck": true,
8
+ "moduleResolution": "bundler",
9
+ "resolveJsonModule": true,
10
+ "isolatedModules": true,
11
+ "noEmit": true,
12
+ "experimentalDecorators": true,
13
+ "strict": true
14
+ },
15
+ "include": ["src"]
16
+ }
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "data-lit-todo",
3
- "version": "0.9.39",
3
+ "version": "0.9.38",
4
4
  "description": "Todo sample app demonstrating @adobe/data with Lit",
5
5
  "type": "module",
6
6
  "private": true,
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@adobe/data-react",
3
- "version": "0.9.39",
3
+ "version": "0.9.40",
4
4
  "description": "Adobe data React bindings — hooks and context for ECS database",
5
5
  "type": "module",
6
6
  "private": false,
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "data-react-hello",
3
- "version": "0.9.39",
3
+ "version": "0.9.40",
4
4
  "description": "Hello World sample - click counter using @adobe/data-react",
5
5
  "type": "module",
6
6
  "private": true,
@@ -1,8 +1,8 @@
1
1
  // © 2026 Adobe. MIT License. See /LICENSE for details.
2
2
 
3
3
  import { DatabaseProvider } from "@adobe/data-react";
4
- import { counterPlugin } from "./counter-plugin";
5
- import { Counter } from "./Counter";
4
+ import { counterPlugin } from "./state/counter-plugin";
5
+ import { Counter } from "./components/counter/counter";
6
6
 
7
7
  export function App() {
8
8
  return (
@@ -0,0 +1,13 @@
1
+ // © 2026 Adobe. MIT License. See /LICENSE for details.
2
+
3
+ export function render(args: { count: number; increment: () => void }) {
4
+ const { count, increment } = args;
5
+ return (
6
+ <div>
7
+ <p className="counter">Count: {count}</p>
8
+ <button type="button" onClick={increment}>
9
+ Increment
10
+ </button>
11
+ </div>
12
+ );
13
+ }
@@ -0,0 +1,26 @@
1
+ // © 2026 Adobe. MIT License. See /LICENSE for details.
2
+
3
+ import { useObservableValues } from "@adobe/data-react";
4
+ import { useCounterDatabase } from "../../state/use-counter-database";
5
+ import * as presentation from "./counter-presentation";
6
+
7
+ export function Counter() {
8
+ // get your database context (The only context you will ever need)
9
+ const db = useCounterDatabase();
10
+ // observe the values you need
11
+ // when they change we will re-render
12
+ const values = useObservableValues(() => ({
13
+ count: db.observe.resources.count,
14
+ }));
15
+
16
+ // if the values are not ready yet, we will render nothing
17
+ if (!values) return null;
18
+ // once we have our minimum required values then render,
19
+ // injecting the current values and any action callbacks.
20
+ // note we use verbNoun action semantics NEVER onClick event style semantics.
21
+ return presentation.render({
22
+ ...values,
23
+ // increment and all our functions are pure so we never need to bind `this`
24
+ increment: db.transactions.increment,
25
+ });
26
+ }
@@ -1,7 +1,7 @@
1
1
  // © 2026 Adobe. MIT License. See /LICENSE for details.
2
2
 
3
3
  import { createRoot } from "react-dom/client";
4
- import { App } from "./App";
4
+ import { App } from "./app";
5
5
 
6
6
  const root = document.getElementById("root");
7
7
  if (root) {
@@ -0,0 +1,6 @@
1
+ // © 2026 Adobe. MIT License. See /LICENSE for details.
2
+
3
+ import { useDatabase } from "@adobe/data-react";
4
+ import { counterPlugin } from "./counter-plugin";
5
+
6
+ export const useCounterDatabase = () => useDatabase(counterPlugin);
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "data-react-pixie",
3
- "version": "0.9.39",
3
+ "version": "0.9.40",
4
4
  "description": "PixiJS React sample - ECS sprites (bunny, fox) with @adobe/data-react",
5
5
  "type": "module",
6
6
  "private": true,
@@ -2,18 +2,18 @@
2
2
 
3
3
  import { Application } from "@pixi/react";
4
4
  import { DatabaseProvider } from "@adobe/data-react";
5
- import { pixiePlugin } from "./pixie-plugin.js";
6
- import { FilterToggle } from "./filter-toggle.js";
7
- import { SpriteContainer } from "./sprite-container.js";
8
- import { Tick } from "./tick.js";
5
+ import { pixiePlugin } from "./state/pixie-plugin";
6
+ import { FilterSelector } from "./components/filter-selector/filter-selector";
7
+ import { PixieTick } from "./components/pixie-scene/pixie-tick";
8
+ import { PixieScene } from "./components/pixie-scene/pixie-scene";
9
9
 
10
10
  export function App() {
11
11
  return (
12
12
  <DatabaseProvider plugin={pixiePlugin}>
13
- <FilterToggle />
13
+ <FilterSelector />
14
14
  <Application background="beige" width={640} height={480}>
15
- <Tick />
16
- <SpriteContainer />
15
+ <PixieTick />
16
+ <PixieScene />
17
17
  </Application>
18
18
  </DatabaseProvider>
19
19
  );
@@ -1,6 +1,6 @@
1
- import { useObservableValues } from "@adobe/data-react";
2
- import { useDatabase } from "./hooks/use-database";
3
- import type { FilterType } from "./pixie-plugin.js";
1
+ // © 2026 Adobe. MIT License. See /LICENSE for details.
2
+
3
+ import type { FilterType } from "../../types/filter-type";
4
4
 
5
5
  const FILTER_LABELS: Record<FilterType, string> = {
6
6
  none: "None",
@@ -15,24 +15,18 @@ const FILTER_OPTIONS = (Object.entries(FILTER_LABELS) as [FilterType, string][])
15
15
  label,
16
16
  }));
17
17
 
18
- export function FilterToggle() {
19
- const db = useDatabase();
20
- const values = useObservableValues(
21
- () => ({
22
- filterType: db.observe.resources.filterType,
23
- }),
24
- [],
25
- );
26
-
27
- const currentFilter = values?.filterType ?? "none";
28
-
18
+ export function render(args: {
19
+ currentFilter: FilterType;
20
+ setFilterType: (filterType: FilterType) => void;
21
+ }) {
22
+ const { currentFilter, setFilterType } = args;
29
23
  return (
30
24
  <div style={{ display: "flex", gap: "0.5rem", marginBottom: "0.5rem" }}>
31
25
  {FILTER_OPTIONS.map(({ value, label }) => (
32
26
  <button
33
27
  key={value}
34
28
  type="button"
35
- onClick={() => db.transactions.setFilterType({ filterType: value })}
29
+ onClick={() => setFilterType(value)}
36
30
  style={{
37
31
  padding: "0.25rem 0.5rem",
38
32
  fontWeight: currentFilter === value ? "bold" : "normal",
@@ -0,0 +1,22 @@
1
+ // © 2026 Adobe. MIT License. See /LICENSE for details.
2
+
3
+ import { useObservableValues } from "@adobe/data-react";
4
+ import { usePixieDatabase } from "../../state/use-pixie-database";
5
+ import * as presentation from "./filter-selector-presentation";
6
+
7
+ export function FilterSelector() {
8
+ const db = usePixieDatabase();
9
+ const values = useObservableValues(
10
+ () => ({
11
+ filterType: db.observe.resources.filterType,
12
+ }),
13
+ [],
14
+ );
15
+
16
+ const currentFilter = values?.filterType ?? "none";
17
+
18
+ return presentation.render({
19
+ currentFilter,
20
+ setFilterType: (filterType) => db.transactions.setFilterType({ filterType }),
21
+ });
22
+ }
@@ -1,5 +1,7 @@
1
+ // © 2026 Adobe. MIT License. See /LICENSE for details.
2
+
1
3
  import { BlurFilter, ColorMatrixFilter } from "pixi.js";
2
- import type { FilterType } from "./pixie-plugin.js";
4
+ import type { FilterType } from "../../types/filter-type";
3
5
 
4
6
  const blurFilter = new BlurFilter({ strength: 2, quality: 2 });
5
7
  const sepiaFilter = new ColorMatrixFilter();
@@ -0,0 +1,18 @@
1
+ // © 2026 Adobe. MIT License. See /LICENSE for details.
2
+
3
+ import type { Filter } from "pixi.js";
4
+ import { Sprite } from "../sprite/sprite";
5
+
6
+ export function render(args: {
7
+ filters: Filter[];
8
+ sprites: readonly number[];
9
+ }) {
10
+ const { filters, sprites } = args;
11
+ return (
12
+ <pixiContainer filters={filters}>
13
+ {sprites.map((entity) => (
14
+ <Sprite key={entity} entity={entity} />
15
+ ))}
16
+ </pixiContainer>
17
+ );
18
+ }
@@ -0,0 +1,26 @@
1
+ // © 2026 Adobe. MIT License. See /LICENSE for details.
2
+
3
+ import { useObservableValues } from "@adobe/data-react";
4
+ import { usePixieDatabase } from "../../state/use-pixie-database";
5
+ import { getFiltersForType } from "./pixie-filters";
6
+ import * as presentation from "./pixie-scene-presentation";
7
+
8
+ export function PixieScene() {
9
+ const db = usePixieDatabase();
10
+ const values = useObservableValues(
11
+ () => ({
12
+ sprites: db.observe.select(db.archetypes.Sprite.components),
13
+ filterType: db.observe.resources.filterType,
14
+ }),
15
+ [],
16
+ );
17
+
18
+ if (!values) return null;
19
+
20
+ const filters = getFiltersForType(values.filterType ?? "none");
21
+
22
+ return presentation.render({
23
+ filters,
24
+ sprites: values.sprites,
25
+ });
26
+ }
@@ -0,0 +1,12 @@
1
+ // © 2026 Adobe. MIT License. See /LICENSE for details.
2
+
3
+ import { useTick } from "@pixi/react";
4
+ import { usePixieDatabase } from "../../state/use-pixie-database";
5
+
6
+ export function PixieTick() {
7
+ const db = usePixieDatabase();
8
+ useTick((ticker) => {
9
+ db.transactions.tick(ticker.deltaTime);
10
+ });
11
+ return null;
12
+ }
@@ -0,0 +1,39 @@
1
+ // © 2026 Adobe. MIT License. See /LICENSE for details.
2
+
3
+ import type { Texture } from "pixi.js";
4
+
5
+ export function render(args: {
6
+ texture: Texture;
7
+ x: number;
8
+ y: number;
9
+ rotation: number;
10
+ scale: number;
11
+ toggleSpriteActive: () => void;
12
+ setSpriteHoveredTrue: () => void;
13
+ setSpriteHoveredFalse: () => void;
14
+ }) {
15
+ const {
16
+ texture,
17
+ x,
18
+ y,
19
+ rotation,
20
+ scale,
21
+ toggleSpriteActive,
22
+ setSpriteHoveredTrue,
23
+ setSpriteHoveredFalse,
24
+ } = args;
25
+ return (
26
+ <pixiSprite
27
+ anchor={0.5}
28
+ eventMode="static"
29
+ onClick={toggleSpriteActive}
30
+ onPointerOver={setSpriteHoveredTrue}
31
+ onPointerOut={setSpriteHoveredFalse}
32
+ scale={scale}
33
+ texture={texture}
34
+ x={x}
35
+ y={y}
36
+ rotation={rotation}
37
+ />
38
+ );
39
+ }
@@ -0,0 +1,37 @@
1
+ // © 2026 Adobe. MIT License. See /LICENSE for details.
2
+
3
+ import type { Entity } from "@adobe/data/ecs";
4
+ import { useObservableValues } from "@adobe/data-react";
5
+ import { usePixieDatabase } from "../../state/use-pixie-database";
6
+ import { SpriteType } from "../../types/sprite-type/sprite-type";
7
+ import { useSpriteTexture } from "./use-sprite-texture";
8
+ import * as presentation from "./sprite-presentation";
9
+
10
+ export function Sprite({ entity }: { entity: Entity }) {
11
+ const db = usePixieDatabase();
12
+ const values = useObservableValues(
13
+ () => ({
14
+ sprite: db.observe.entity(entity, db.archetypes.Sprite),
15
+ }),
16
+ [entity],
17
+ );
18
+
19
+ const spriteType = values?.sprite?.sprite ?? "bunny";
20
+ const texture = useSpriteTexture(SpriteType.image[spriteType]);
21
+
22
+ if (!values?.sprite || !texture) return null;
23
+
24
+ const { sprite } = values;
25
+ const scale = sprite.active ? 1.5 : sprite.hovered ? 1.25 : 1;
26
+
27
+ return presentation.render({
28
+ texture,
29
+ x: sprite.position[0],
30
+ y: sprite.position[1],
31
+ rotation: sprite.rotation,
32
+ scale,
33
+ toggleSpriteActive: () => db.transactions.toggleSpriteActive({ entity }),
34
+ setSpriteHoveredTrue: () => db.transactions.setSpriteHovered({ entity, hovered: true }),
35
+ setSpriteHoveredFalse: () => db.transactions.setSpriteHovered({ entity, hovered: false }),
36
+ });
37
+ }
@@ -1,7 +1,9 @@
1
+ // © 2026 Adobe. MIT License. See /LICENSE for details.
2
+
1
3
  import { Assets, type Texture } from "pixi.js";
2
4
  import { useEffect, useState } from "react";
3
5
 
4
- export function useTexture(url: string): Texture | undefined {
6
+ export function useSpriteTexture(url: string): Texture | undefined {
5
7
  const [texture, setTexture] = useState<Texture | undefined>();
6
8
 
7
9
  useEffect(() => {
@@ -3,7 +3,7 @@
3
3
  import { createRoot } from "react-dom/client";
4
4
  import { Container, Graphics, Sprite } from "pixi.js";
5
5
  import { extend } from "@pixi/react";
6
- import { App } from "./App.jsx";
6
+ import { App } from "./app";
7
7
 
8
8
  // Register PixiJS components for @pixi/react (pixiSprite, pixiContainer)
9
9
  extend({ Container, Graphics, Sprite });