@adobe/data 0.9.37 → 0.9.40

package/references/data-react-hello/src/components/counter/counter.tsx

@@ -0,0 +1,26 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+import { useObservableValues } from "@adobe/data-react";
+import { useCounterDatabase } from "../../state/use-counter-database";
+import * as presentation from "./counter-presentation";
+
+export function Counter() {
+  // get your database context (The only context you will ever need)
+  const db = useCounterDatabase();
+  // observe the values you need
+  // when they change we will re-render
+  const values = useObservableValues(() => ({
+    count: db.observe.resources.count,
+  }));
+
+  // if the values are not ready yet, we will render nothing
+  if (!values) return null;
+  // once we have our minimum required values then render,
+  // injecting the current values and any action callbacks.
+  // note we use verbNoun action semantics NEVER onClick event style semantics.
+  return presentation.render({
+    ...values,
+    // increment and all our functions are pure so we never need to bind `this`
+    increment: db.transactions.increment,
+  });
+}

package/references/data-react-hello/src/main.tsx

@@ -0,0 +1,9 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+import { createRoot } from "react-dom/client";
+import { App } from "./app";
+
+const root = document.getElementById("root");
+if (root) {
+  createRoot(root).render(<App />);
+}

package/references/data-react-hello/src/state/counter-plugin.ts

@@ -0,0 +1,14 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+import { Database } from "@adobe/data/ecs";
+
+export const counterPlugin = Database.Plugin.create({
+  resources: {
+    count: { default: 0 as number },
+  },
+  transactions: {
+    increment: (t) => {
+      t.resources.count += 1;
+    },
+  },
+});

package/references/data-react-hello/src/state/use-counter-database.ts

@@ -0,0 +1,6 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+import { useDatabase } from "@adobe/data-react";
+import { counterPlugin } from "./counter-plugin";
+
+export const useCounterDatabase = () => useDatabase(counterPlugin);

package/references/data-react-hello/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true
+  },
+  "include": ["src"]
+}

package/references/data-react-pixie/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "data-react-pixie",
+  "version": "0.9.40",
+  "description": "PixiJS React sample - ECS sprites (bunny, fox) with @adobe/data-react",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite",
+    "publish-public": "true"
+  },
+  "dependencies": {
+    "@adobe/data": "workspace:*",
+    "@adobe/data-react": "workspace:*",
+    "@pixi/react": "8.0.0-beta.25",
+    "pixi.js": "^8.2.6",
+    "react": "^19",
+    "react-dom": "^19"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@vitejs/plugin-react": "^4.3.0",
+    "typescript": "^5.8.3",
+    "vite": "^5.1.1",
+    "vite-plugin-checker": "^0.12.0"
+  }
+}

package/references/data-react-pixie/src/app.tsx

@@ -0,0 +1,21 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+import { Application } from "@pixi/react";
+import { DatabaseProvider } from "@adobe/data-react";
+import { pixiePlugin } from "./state/pixie-plugin";
+import { FilterSelector } from "./components/filter-selector/filter-selector";
+import { PixieTick } from "./components/pixie-scene/pixie-tick";
+import { PixieScene } from "./components/pixie-scene/pixie-scene";
+
+export function App() {
+  return (
+    <DatabaseProvider plugin={pixiePlugin}>
+      <FilterSelector />
+      <Application background="beige" width={640} height={480}>
+        <PixieTick />
+        <PixieScene />
+      </Application>
+    </DatabaseProvider>
+  );
+}
+

package/references/data-react-pixie/src/components/filter-selector/filter-selector-presentation.tsx

@@ -0,0 +1,40 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+import type { FilterType } from "../../types/filter-type";
+
+const FILTER_LABELS: Record<FilterType, string> = {
+  none: "None",
+  sepia: "Sepia",
+  blur: "Blur",
+  vintage: "Vintage",
+  night: "Night",
+};
+
+const FILTER_OPTIONS = (Object.entries(FILTER_LABELS) as [FilterType, string][]).map(([value, label]) => ({
+  value,
+  label,
+}));
+
+export function render(args: {
+  currentFilter: FilterType;
+  setFilterType: (filterType: FilterType) => void;
+}) {
+  const { currentFilter, setFilterType } = args;
+  return (
+    <div style={{ display: "flex", gap: "0.5rem", marginBottom: "0.5rem" }}>
+      {FILTER_OPTIONS.map(({ value, label }) => (
+        <button
+          key={value}
+          type="button"
+          onClick={() => setFilterType(value)}
+          style={{
+            padding: "0.25rem 0.5rem",
+            fontWeight: currentFilter === value ? "bold" : "normal",
+          }}
+        >
+          {label}
+        </button>
+      ))}
+    </div>
+  );
+}

package/references/data-react-pixie/src/components/filter-selector/filter-selector.tsx

@@ -0,0 +1,22 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+import { useObservableValues } from "@adobe/data-react";
+import { usePixieDatabase } from "../../state/use-pixie-database";
+import * as presentation from "./filter-selector-presentation";
+
+export function FilterSelector() {
+  const db = usePixieDatabase();
+  const values = useObservableValues(
+    () => ({
+      filterType: db.observe.resources.filterType,
+    }),
+    [],
+  );
+
+  const currentFilter = values?.filterType ?? "none";
+
+  return presentation.render({
+    currentFilter,
+    setFilterType: (filterType) => db.transactions.setFilterType({ filterType }),
+  });
+}

package/references/data-react-pixie/src/components/pixie-scene/pixie-filters.ts

@@ -0,0 +1,24 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+import { BlurFilter, ColorMatrixFilter } from "pixi.js";
+import type { FilterType } from "../../types/filter-type";
+
+const blurFilter = new BlurFilter({ strength: 2, quality: 2 });
+const sepiaFilter = new ColorMatrixFilter();
+sepiaFilter.sepia(false);
+const vintageFilter = new ColorMatrixFilter();
+vintageFilter.vintage(false);
+const nightFilter = new ColorMatrixFilter();
+nightFilter.night(0.3, false);
+
+const filterMap: Record<FilterType, import("pixi.js").Filter[]> = {
+  none: [],
+  sepia: [sepiaFilter],
+  blur: [blurFilter],
+  vintage: [vintageFilter],
+  night: [nightFilter],
+};
+
+export function getFiltersForType(filterType: FilterType) {
+  return filterMap[filterType];
+}

package/references/data-react-pixie/src/components/pixie-scene/pixie-scene-presentation.tsx

@@ -0,0 +1,18 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+import type { Filter } from "pixi.js";
+import { Sprite } from "../sprite/sprite";
+
+export function render(args: {
+  filters: Filter[];
+  sprites: readonly number[];
+}) {
+  const { filters, sprites } = args;
+  return (
+    <pixiContainer filters={filters}>
+      {sprites.map((entity) => (
+        <Sprite key={entity} entity={entity} />
+      ))}
+    </pixiContainer>
+  );
+}

package/references/data-react-pixie/src/components/pixie-scene/pixie-scene.tsx

@@ -0,0 +1,26 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+import { useObservableValues } from "@adobe/data-react";
+import { usePixieDatabase } from "../../state/use-pixie-database";
+import { getFiltersForType } from "./pixie-filters";
+import * as presentation from "./pixie-scene-presentation";
+
+export function PixieScene() {
+  const db = usePixieDatabase();
+  const values = useObservableValues(
+    () => ({
+      sprites: db.observe.select(db.archetypes.Sprite.components),
+      filterType: db.observe.resources.filterType,
+    }),
+    [],
+  );
+
+  if (!values) return null;
+
+  const filters = getFiltersForType(values.filterType ?? "none");
+
+  return presentation.render({
+    filters,
+    sprites: values.sprites,
+  });
+}

package/references/data-react-pixie/src/components/pixie-scene/pixie-tick.tsx

@@ -0,0 +1,12 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+import { useTick } from "@pixi/react";
+import { usePixieDatabase } from "../../state/use-pixie-database";
+
+export function PixieTick() {
+  const db = usePixieDatabase();
+  useTick((ticker) => {
+    db.transactions.tick(ticker.deltaTime);
+  });
+  return null;
+}

package/references/data-react-pixie/src/components/sprite/sprite-presentation.tsx

@@ -0,0 +1,39 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+import type { Texture } from "pixi.js";
+
+export function render(args: {
+  texture: Texture;
+  x: number;
+  y: number;
+  rotation: number;
+  scale: number;
+  toggleSpriteActive: () => void;
+  setSpriteHoveredTrue: () => void;
+  setSpriteHoveredFalse: () => void;
+}) {
+  const {
+    texture,
+    x,
+    y,
+    rotation,
+    scale,
+    toggleSpriteActive,
+    setSpriteHoveredTrue,
+    setSpriteHoveredFalse,
+  } = args;
+  return (
+    <pixiSprite
+      anchor={0.5}
+      eventMode="static"
+      onClick={toggleSpriteActive}
+      onPointerOver={setSpriteHoveredTrue}
+      onPointerOut={setSpriteHoveredFalse}
+      scale={scale}
+      texture={texture}
+      x={x}
+      y={y}
+      rotation={rotation}
+    />
+  );
+}

package/references/data-react-pixie/src/components/sprite/sprite.tsx

@@ -0,0 +1,37 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+import type { Entity } from "@adobe/data/ecs";
+import { useObservableValues } from "@adobe/data-react";
+import { usePixieDatabase } from "../../state/use-pixie-database";
+import { SpriteType } from "../../types/sprite-type/sprite-type";
+import { useSpriteTexture } from "./use-sprite-texture";
+import * as presentation from "./sprite-presentation";
+
+export function Sprite({ entity }: { entity: Entity }) {
+  const db = usePixieDatabase();
+  const values = useObservableValues(
+    () => ({
+      sprite: db.observe.entity(entity, db.archetypes.Sprite),
+    }),
+    [entity],
+  );
+
+  const spriteType = values?.sprite?.sprite ?? "bunny";
+  const texture = useSpriteTexture(SpriteType.image[spriteType]);
+
+  if (!values?.sprite || !texture) return null;
+
+  const { sprite } = values;
+  const scale = sprite.active ? 1.5 : sprite.hovered ? 1.25 : 1;
+
+  return presentation.render({
+    texture,
+    x: sprite.position[0],
+    y: sprite.position[1],
+    rotation: sprite.rotation,
+    scale,
+    toggleSpriteActive: () => db.transactions.toggleSpriteActive({ entity }),
+    setSpriteHoveredTrue: () => db.transactions.setSpriteHovered({ entity, hovered: true }),
+    setSpriteHoveredFalse: () => db.transactions.setSpriteHovered({ entity, hovered: false }),
+  });
+}

package/references/data-react-pixie/src/components/sprite/use-sprite-texture.ts

@@ -0,0 +1,24 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+import { Assets, type Texture } from "pixi.js";
+import { useEffect, useState } from "react";
+
+export function useSpriteTexture(url: string): Texture | undefined {
+  const [texture, setTexture] = useState<Texture | undefined>();
+
+  useEffect(() => {
+    let cancelled = false;
+    Assets.load(url)
+      .then((result) => {
+        if (!cancelled) setTexture(result);
+      })
+      .catch((err) => {
+        if (!cancelled) console.error("Failed to load texture:", url, err);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [url]);
+
+  return texture;
+}

package/references/data-react-pixie/src/main.tsx

@@ -0,0 +1,14 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+import { createRoot } from "react-dom/client";
+import { Container, Graphics, Sprite } from "pixi.js";
+import { extend } from "@pixi/react";
+import { App } from "./app";
+
+// Register PixiJS components for @pixi/react (pixiSprite, pixiContainer)
+extend({ Container, Graphics, Sprite });
+
+const root = document.getElementById("root");
+if (root) {
+  createRoot(root).render(<App />);
+}

package/references/data-react-pixie/src/state/pixie-plugin.ts

@@ -0,0 +1,97 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+import { Database } from "@adobe/data/ecs";
+import { Boolean } from "@adobe/data/schema";
+import { Vec2, F32 } from "@adobe/data/math";
+import type { FilterType } from "../types/filter-type";
+import { SpriteType } from "../types/sprite-type/sprite-type";
+
+export const pixiePlugin = Database.Plugin.create({
+  components: {
+    position: Vec2.schema,
+    rotation: F32.schema,
+    sprite: SpriteType.schema,
+    hovered: Boolean.schema,
+    active: Boolean.schema,
+  },
+  resources: {
+    filterType: { default: "none" as FilterType },
+  },
+  archetypes: {
+    Sprite: ["position", "rotation", "sprite", "hovered", "active"],
+  },
+  transactions: {
+    tick: (t, delta: number) => {
+      const entities = t.select(["position", "rotation", "sprite", "hovered", "active"]);
+      for (const entity of entities) {
+        const row = t.read(entity);
+        if (row?.rotation !== undefined) {
+          t.update(entity, { rotation: row.rotation + delta * 0.1 });
+        }
+      }
+    },
+    createSprite: (
+      t,
+      args: { position: [number, number]; rotation?: number; sprite: "bunny" | "fox" },
+    ) => {
+      return t.archetypes.Sprite.insert({
+        position: args.position,
+        rotation: args.rotation ?? 0,
+        sprite: args.sprite,
+        hovered: false,
+        active: false,
+      });
+    },
+    setSpriteHovered: (t, args: { entity: number; hovered: boolean }) => {
+      t.update(args.entity, { hovered: args.hovered });
+    },
+    setSpriteActive: (t, args: { entity: number; active: boolean }) => {
+      t.update(args.entity, { active: args.active });
+    },
+    toggleSpriteActive: (t, args: { entity: number }) => {
+      const row = t.read(args.entity);
+      if (row?.active !== undefined) {
+        t.update(args.entity, { active: !row.active });
+      }
+    },
+    setFilterType: (t, args: { filterType: FilterType }) => {
+      t.resources.filterType = args.filterType;
+    },
+  },
+  systems: {
+    pixie_plugin_initialize: {
+      create: (db) => {
+        db.store.archetypes.Sprite.insert({
+          position: [100, 100],
+          rotation: 0,
+          sprite: "bunny",
+          hovered: false,
+          active: false,
+        });
+        db.store.archetypes.Sprite.insert({
+          position: [200, 150],
+          rotation: 0.5,
+          sprite: "bunny",
+          hovered: false,
+          active: false,
+        });
+        db.store.archetypes.Sprite.insert({
+          position: [300, 200],
+          rotation: 1,
+          sprite: "fox",
+          hovered: false,
+          active: false,
+        });
+        db.store.archetypes.Sprite.insert({
+          position: [150, 250],
+          rotation: 0.2,
+          sprite: "fox",
+          hovered: false,
+          active: false,
+        });
+      }
+    }
+  }
+});
+
+export type PixieDatabase = Database.FromPlugin<typeof pixiePlugin>;

package/references/data-react-pixie/src/state/use-pixie-database.ts

@@ -0,0 +1,6 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+import { useDatabase as useDatabaseHook } from "@adobe/data-react";
+import { pixiePlugin } from "./pixie-plugin";
+
+export const usePixieDatabase = () => useDatabaseHook(pixiePlugin);

package/references/data-react-pixie/src/types/filter-type.ts

@@ -0,0 +1,3 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+export type FilterType = "none" | "sepia" | "blur" | "vintage" | "night";

package/references/data-react-pixie/src/types/sprite-type/image.ts

@@ -0,0 +1,14 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+import { Schema } from "@adobe/data/schema";
+import { schema } from "./schema";
+
+import bunnyUrl from "./bunny.png";
+import foxUrl from "./fox.png";
+
+type SpriteType = Schema.ToType<typeof schema>;
+
+export const image = {
+  bunny: bunnyUrl,
+  fox: foxUrl,
+} as const satisfies Record<SpriteType, string>;

package/references/data-react-pixie/src/types/sprite-type/public.ts

@@ -0,0 +1,4 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+export { schema } from "./schema";
+export { image } from "./image";

package/references/data-react-pixie/src/types/sprite-type/schema.ts

@@ -0,0 +1,5 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+import { Schema } from "@adobe/data/schema";
+
+export const schema = { enum: ["bunny", "fox"] } as const satisfies Schema;

package/references/data-react-pixie/src/types/sprite-type/sprite-type.ts

@@ -0,0 +1,7 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+import { Schema } from "@adobe/data/schema";
+import { schema } from "./schema";
+
+export type SpriteType = Schema.ToType<typeof schema>;
+export * as SpriteType from "./public";

package/references/data-react-pixie/src/vite-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="vite/client" />
+
+declare module "*.png" {
+    const src: string;
+    export default src;
+}

package/references/data-react-pixie/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true
+  },
+  "include": ["src"]
+}

package/dist/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2025-2026 Adobe, Inc.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.