@adobe/data 0.9.36 → 0.9.39

package/references/data-lit-todo/src/services/state-service/transactions/delete-todo.test.ts

@@ -0,0 +1,25 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+import { createTodo } from './create-todo.js';
+import { deleteTodo } from './delete-todo.js';
+import { describe, expect, it } from 'vitest';
+
+import { createTodoStore } from '../create-todo-store.js';
+
+describe('deleteTodo', () => {
+  describe('when deleting a todo', () => {
+    it('should remove it from the archetype', () => {
+      const t = createTodoStore();
+      const todoA = createTodo(t, { name: 'A' });
+      const todoB = createTodo(t, { name: 'B' });
+      const todoC = createTodo(t, { name: 'C' });
+      deleteTodo(t, todoA);
+      const values = t.read(todoA);
+      expect(values).toBeNull();
+      const valuesB = t.read(todoB);
+      expect(valuesB).toBeDefined();
+      const valuesC = t.read(todoC);
+      expect(valuesC).toBeDefined();
+      expect(t.archetypes.Todo.rowCount).toBe(2);
+    });
+  });
+});

package/references/data-lit-todo/src/services/state-service/transactions/delete-todo.ts

@@ -0,0 +1,11 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+import { reorderTodos } from './reorder-todos.js';
+import type { Entity } from "@adobe/data/ecs";
+
+import { type TodoStore } from '../create-todo-store.js';
+
+export const deleteTodo = (t: TodoStore, id: Entity) => {
+  t.undoable = { coalesce: false };
+  t.delete(id);
+  reorderTodos(t);
+};

package/references/data-lit-todo/src/services/state-service/transactions/drag-todo.ts

@@ -0,0 +1,19 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+import { reorderTodos } from './reorder-todos.js';
+import type { Entity } from "@adobe/data/ecs";
+
+import { type TodoStore } from '../create-todo-store.js';
+
+export const dragTodo = (t: TodoStore, props: { todo: Entity; dragPosition: number; finalIndex?: number }) => {
+  t.undoable = { coalesce: false };
+  const { todo, dragPosition, finalIndex } = props;
+  const completed = finalIndex !== undefined;
+  if (!completed) {
+    t.update(todo, { dragPosition });
+  } else {
+    // insert it with an order value 0.5 less than the final index
+    t.update(todo, { dragPosition: null, order: finalIndex - 0.5 });
+    // then we call reorderTodos which will reorder everything to integer order values
+    reorderTodos(t); // this is an example of calling another transaction from a transaction
+  }
+};

package/references/data-lit-todo/src/services/state-service/transactions/index.ts

@@ -0,0 +1,8 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+export * from './create-todo.js';
+export * from './delete-todo.js';
+export * from './toggle-complete.js';
+export * from './create-bulk-todos.js';
+export * from './drag-todo.js';
+// This is used by the undo-redo actions, the implementation is in the data package.
+export { applyOperations } from "@adobe/data/ecs";

package/references/data-lit-todo/src/services/state-service/transactions/reorder-todos.ts

@@ -0,0 +1,13 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+import { TodoStore } from '../create-todo-store.js';
+
+/**
+ * Ensures each todo has an monotonically increasing integer order value.
+ * You might call this after inserting a todo with a floating point order value for insertion.
+ */
+export const reorderTodos = (t: TodoStore) => {
+  const todos = t.select(t.archetypes.Todo.components, { order: { order: true } });
+  for (let i = 0; i < todos.length; i++) {
+    t.update(todos[i], { order: i });
+  }
+};

package/references/data-lit-todo/src/services/state-service/transactions/toggle-complete.test.ts

@@ -0,0 +1,78 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+import { createTodo } from './create-todo.js';
+import { toggleComplete } from './toggle-complete.js';
+import { describe, expect, it } from 'vitest';
+
+import { createTodoStore } from '../create-todo-store.js';
+
+describe('toggleComplete', () => {
+  describe('when toggling a complete todo', () => {
+    it('should mark it as incomplete', () => {
+      const t = createTodoStore();
+      const todoId = createTodo(t, { name: 'Test todo' });
+      // First mark as complete
+      t.update(todoId, { complete: true });
+      expect(t.read(todoId)?.complete).toBe(true);
+
+      // Then toggle it
+      toggleComplete(t, todoId);
+      expect(t.read(todoId)?.complete).toBe(false);
+    });
+  });
+
+  describe('when toggling an incomplete todo', () => {
+    it('should mark it as complete', () => {
+      const t = createTodoStore();
+      const todoId = createTodo(t, { name: 'Test todo' });
+      expect(t.read(todoId)?.complete).toBe(false);
+
+      toggleComplete(t, todoId);
+      expect(t.read(todoId)?.complete).toBe(true);
+    });
+  });
+
+  describe('when toggling multiple times', () => {
+    it('should alternate between complete and incomplete', () => {
+      const t = createTodoStore();
+      const todoId = createTodo(t, { name: 'Test todo' });
+      expect(t.read(todoId)?.complete).toBe(false);
+
+      // First toggle
+      toggleComplete(t, todoId);
+      expect(t.read(todoId)?.complete).toBe(true);
+
+      // Second toggle
+      toggleComplete(t, todoId);
+      expect(t.read(todoId)?.complete).toBe(false);
+
+      // Third toggle
+      toggleComplete(t, todoId);
+      expect(t.read(todoId)?.complete).toBe(true);
+    });
+  });
+
+  describe('when toggling a non-existent todo', () => {
+    it('should not throw an error and should no-op', () => {
+      const t = createTodoStore();
+      const nonExistentId = 999;
+      expect(t.read(nonExistentId)).toBeNull();
+
+      // Should not throw
+      expect(() => toggleComplete(t, nonExistentId)).not.toThrow();
+
+      // Should still be null
+      expect(t.read(nonExistentId)).toBeNull();
+    });
+  });
+
+  describe('when toggling with invalid entity id', () => {
+    it('should not throw an error and should no-op', () => {
+      const t = createTodoStore();
+      const invalidId = -1;
+
+      // Should not throw
+      toggleComplete(t, invalidId);
+      expect(() => toggleComplete(t, invalidId)).not.toThrow();
+    });
+  });
+});

package/references/data-lit-todo/src/services/state-service/transactions/toggle-complete.ts

@@ -0,0 +1,15 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+import type { Entity } from "@adobe/data/ecs";
+
+import { type TodoStore } from '../create-todo-store.js';
+
+export const toggleComplete = (t: TodoStore, id: Entity) => {
+  t.undoable = { coalesce: false };
+  const todo = t.read(id);
+  // actions must never throw errors.
+  // if state is invalid they must no op.
+  // this is important for resolving concurrency conflicts.
+  if (todo) {
+    t.update(id, { complete: !todo.complete });
+  }
+};

package/references/data-lit-todo/src/todo-element.ts

@@ -0,0 +1,6 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+import { TodoMainService } from './services/main-service/todo-main-service.js';
+
+import { ApplicationElement } from "@adobe/data-lit";
+
+export class TodoElement extends ApplicationElement<TodoMainService> { }

package/references/data-lit-todo/src/todo-host.ts

@@ -0,0 +1,29 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+import { LitElement, html, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { createMainService } from './services/main-service/create-main-service.js';
+import './todo-main-element.js';  // Side effect: registers custom elements
+import "@adobe/data-lit"; // Side effect: registers ApplicationHost and other elements
+
+export const tagName = 'todo-host';
+
+@customElement(tagName)
+export class TodoHost extends LitElement {
+    static styles = css`
+        :host {
+            display: flex;
+            flex: 1 1 auto;
+            color: red;
+        }
+    `;
+
+    render() {
+        return html`
+            <application-host 
+                .createService=${createMainService} 
+                .renderElement=${() => html`<data-todo></data-todo>`}>
+            </application-host>
+        `;
+    }
+}

package/references/data-lit-todo/src/todo-main-element.ts

@@ -0,0 +1,40 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+import './elements/todo-list/todo-list.js';
+import './elements/todo-row/todo-row.js';
+import './elements/todo-toolbar/todo-toolbar.js';
+import './elements/todo-undo-redo/todo-undo-redo.js';
+import { TodoElement } from './todo-element.js';
+import { html, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+export const tagName = 'data-todo';
+
+@customElement(tagName)
+export class TodoMainElement extends TodoElement {
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      height: 400px;
+      max-height: 400px;
+      overflow: hidden;
+    }
+    
+    data-todo-toolbar {
+      flex-shrink: 0;
+    }
+    
+    data-todo-list {
+      flex: 1;
+      overflow-y: auto;
+      min-height: 0;
+    }
+  `;
+
+  render() {
+    return html`
+      <data-todo-toolbar></data-todo-toolbar>
+      <data-todo-list></data-todo-list>
+    `;
+  }
+}

package/references/data-lit-todo/src/todo-sample.ts

@@ -0,0 +1,21 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+import type { Sample } from "./sample-types.js";
+import "./todo-host.js"; // Side effect: registers todo-host
+
+export const todoSample: Sample = {
+    id: 'todo',
+    title: 'Todo Application',
+    description: 'A complete todo application demonstrating ECS architecture, state management, undo/redo, and persistence.',
+    category: 'Application Examples',
+    difficulty: 'intermediate',
+    features: [
+        'Entity-Component-System (ECS)',
+        'State Management',
+        'Undo/Redo System',
+        'Local Storage Persistence',
+        'Drag and Drop Reordering',
+        'Reactive UI Updates'
+    ],
+    elementTag: 'todo-host'
+};

package/references/data-lit-todo/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*"]
+}

package/references/data-react/README.md

@@ -0,0 +1,47 @@
+# @adobe/data-react
+
+React bindings for [@adobe/data](https://www.npmjs.com/package/@adobe/data) — hooks and context for the ECS database and observables.
+
+## Install
+
+```bash
+pnpm add @adobe/data @adobe/data-react react
+```
+
+## Peer Dependency
+
+Requires `react >= 17.0.0` (supports React 17, 18, 19).
+
+## Usage
+
+Use `useObservableValues` for everything you need to observe — pass a factory that returns an object of observables:
+
+```tsx
+import { DatabaseProvider, useDatabase, useObservableValues } from "@adobe/data-react";
+import { Database } from "@adobe/data/ecs";
+
+const myPlugin = Database.Plugin.create({ /* ... */ });
+
+function App() {
+  return (
+    <DatabaseProvider plugin={myPlugin}>
+      <Counter />
+    </DatabaseProvider>
+  );
+}
+
+function Counter() {
+  const db = useDatabase(myPlugin);
+  const values = useObservableValues(() => ({
+    count: db.observe.resources.count,
+  }));
+
+  if (!values) return null;
+  return (
+    <div>
+      <p>Count: {values.count}</p>
+      <button onClick={() => db.transactions.increment()}>Increment</button>
+    </div>
+  );
+}
+```

package/references/data-react/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@adobe/data-react",
+  "version": "0.9.39",
+  "description": "Adobe data React bindings — hooks and context for ECS database",
+  "type": "module",
+  "private": false,
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "scripts": {
+    "build": "cp ../../LICENSE . && tsc -b",
+    "dev": "tsc -b -w",
+    "link": "pnpm build && pnpm link --global",
+    "test": "vitest --run --passWithNoTests",
+    "publish-public": "pnpm build && pnpm publish --no-git-checks --access public"
+  },
+  "dependencies": {
+    "@adobe/data": "workspace:*"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "react": "^19",
+    "typescript": "^5.8.3",
+    "vitest": "^1.6.0"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  }
+}

package/references/data-react/src/context/database-context.tsx

@@ -0,0 +1,41 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+import {
+  createContext,
+  useMemo,
+  useContext,
+  type ReactNode,
+  type ReactElement,
+} from "react";
+import { Database } from "@adobe/data/ecs";
+
+export const DatabaseContext = createContext<Database | null>(null);
+
+export type DatabaseProviderProps<P extends Database.Plugin> = {
+  plugin: P;
+  database?: Database.FromPlugin<P>;
+  children: ReactNode;
+};
+
+export function DatabaseProvider<P extends Database.Plugin>(
+  props: DatabaseProviderProps<P>,
+): ReactElement {
+  const { plugin, database: providedDatabase, children } = props;
+  const ancestor = useContext(DatabaseContext);
+
+  const database = useMemo(() => {
+    if (providedDatabase) {
+      return providedDatabase;
+    }
+    if (ancestor) {
+      return ancestor.extend(plugin) as unknown as Database.FromPlugin<P>;
+    }
+    return Database.create(plugin) as unknown as Database.FromPlugin<P>;
+  }, [plugin, providedDatabase, ancestor]);
+
+  return (
+    <DatabaseContext.Provider value={database as unknown as Database}>
+      {children}
+    </DatabaseContext.Provider>
+  );
+}

package/references/data-react/src/hooks/index.ts

@@ -0,0 +1,5 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+export { useDatabase } from "./use-database.js";
+export { useObservable } from "./use-observable.js";
+export { useObservableValues } from "./use-observable-values.js";

package/references/data-react/src/hooks/use-database.ts

@@ -0,0 +1,13 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+import { useContext } from "react";
+import { Database } from "@adobe/data/ecs";
+import { DatabaseContext } from "../context/database-context.js";
+
+export function useDatabase<T extends Database.Plugin>(plugin: T): Database.FromPlugin<T> {
+  const ancestor = useContext(DatabaseContext);
+  if (ancestor) {
+    return ancestor.extend(plugin) as unknown as Database.FromPlugin<T>;
+  }
+  return Database.create(plugin) as unknown as Database.FromPlugin<T>;
+}

package/references/data-react/src/hooks/use-observable-values.ts

@@ -0,0 +1,15 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+import { useMemo } from "react";
+import { Observe } from "@adobe/data/observe";
+import { useObservable } from "./use-observable.js";
+
+export function useObservableValues<
+  T extends Record<string, Observe<unknown>>,
+>(
+  factory: () => T,
+  deps: unknown[] = [],
+): { [K in keyof T]: T[K] extends Observe<infer U> ? U : never } | undefined {
+  const observable = useMemo(() => Observe.fromProperties(factory()), deps);
+  return useObservable(observable);
+}

package/references/data-react/src/hooks/use-observable.ts

@@ -0,0 +1,14 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+import { useState, useEffect } from "react";
+import type { Observe } from "@adobe/data/observe";
+
+export function useObservable<T>(observable: Observe<T>): T | undefined {
+  const [value, setValue] = useState<T | undefined>(undefined);
+  useEffect(() => {
+    return observable((newValue) => {
+      setValue(newValue);
+    });
+  }, [observable]);
+  return value;
+}

package/references/data-react/src/index.ts

@@ -0,0 +1,7 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+export { DatabaseContext, DatabaseProvider } from "./context/database-context.js";
+export type { DatabaseProviderProps } from "./context/database-context.js";
+export { useDatabase } from "./hooks/use-database.js";
+export { useObservable } from "./hooks/use-observable.js";
+export { useObservableValues } from "./hooks/use-observable-values.js";

package/references/data-react/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../data/tsconfig-base.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist",
+    "composite": true,
+    "types": ["react"],
+    "jsx": "react-jsx"
+  },
+  "include": ["src/**/*"],
+  "references": []
+}

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

@@ -0,0 +1,25 @@
+{
+  "name": "data-react-hello",
+  "version": "0.9.39",
+  "description": "Hello World sample - click counter using @adobe/data-react",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite",
+    "publish-public": "true"
+  },
+  "dependencies": {
+    "@adobe/data": "workspace:*",
+    "@adobe/data-react": "workspace:*",
+    "react": "^19",
+    "react-dom": "^19"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "typescript": "^5.8.3",
+    "vite": "^5.1.1",
+    "@vitejs/plugin-react": "^4.3.0"
+  }
+}

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

@@ -0,0 +1,13 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+import { DatabaseProvider } from "@adobe/data-react";
+import { counterPlugin } from "./counter-plugin";
+import { Counter } from "./Counter";
+
+export function App() {
+  return (
+    <DatabaseProvider plugin={counterPlugin}>
+      <Counter />
+    </DatabaseProvider>
+  );
+}

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

@@ -0,0 +1,21 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+import { useDatabase, useObservableValues } from "@adobe/data-react";
+import { counterPlugin } from "./counter-plugin";
+
+export function Counter() {
+  const db = useDatabase(counterPlugin);
+  const values = useObservableValues(() => ({
+    count: db.observe.resources.count,
+  }));
+
+  if (!values) return null;
+  return (
+    <div>
+      <p className="counter">Count: {values.count}</p>
+      <button type="button" onClick={() => db.transactions.increment()}>
+        Increment
+      </button>
+    </div>
+  );
+}

package/references/data-react-hello/src/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/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/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.39",
+  "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 "./pixie-plugin.js";
+import { FilterToggle } from "./filter-toggle.js";
+import { SpriteContainer } from "./sprite-container.js";
+import { Tick } from "./tick.js";
+
+export function App() {
+  return (
+    <DatabaseProvider plugin={pixiePlugin}>
+      <FilterToggle />
+      <Application background="beige" width={640} height={480}>
+        <Tick />
+        <SpriteContainer />
+      </Application>
+    </DatabaseProvider>
+  );
+}
+