@adobe/data 0.9.36 → 0.9.39

package/references/data-lit-todo/src/elements/todo-row/todo-row.css.ts

@@ -0,0 +1,49 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+import { css } from 'lit';
+
+export const styles = css`
+  :host {
+    display: block;
+  }
+
+  .todo-row {
+    --todo-row-height: 56px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    gap: var(--spectrum-spacing-200);
+    padding: var(--spectrum-spacing-200) var(--spectrum-spacing-300);
+    border-bottom: 1px solid var(--spectrum-gray-200);
+    min-height: var(--todo-row-height);
+    height: var(--todo-row-height);
+    contain: layout paint style;            /* or at least paint/layout */
+    content-visibility: auto;               /* skip offscreen work: https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility */
+    contain-intrinsic-size: 500px var(--todo-row-height);     /* reserve space so auto can skip paint: https://developer.mozilla.org/en-US/docs/Web/CSS/contain-intrinsic-size */
+    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+  }
+
+  .todo-row.dragging {
+    background-color: var(--spectrum-gray-100);
+    z-index: 100;
+    box-shadow: 0 0 10px var(--spectrum-gray-300);
+  }
+
+  .todo-row:hover {
+    background-color: var(--spectrum-gray-100);
+  }
+
+  .todo-name {
+    flex: 1;
+    font-size: var(--spectrum-font-size-100);
+    line-height: var(--spectrum-line-height-100);
+    color: var(--spectrum-gray-800);
+  }
+
+  sp-checkbox {
+    flex-shrink: 0;
+  }
+
+  sp-action-button {
+    flex-shrink: 0;
+  }
+`; 

package/references/data-lit-todo/src/elements/todo-row/todo-row.ts

@@ -0,0 +1,46 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+import * as presentation from './todo-row-presentation.js';
+import { styles } from './todo-row.css.js';
+import type { Entity } from "@adobe/data/ecs";
+import { customElement, property } from 'lit/decorators.js';
+
+import { useObservableValues } from "@adobe/data-lit";
+import { TodoElement } from '../../todo-element.js';
+
+export const tagName = 'data-todo-row';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [tagName]: TodoRow;
+  }
+}
+
+@customElement(tagName)
+export class TodoRow extends TodoElement {
+  static styles = styles;
+
+  @property({ type: Number })
+  entity!: Entity;
+
+  @property({ type: Number })
+  index!: number;
+
+  render() {
+    const localized = { toggleComplete: 'Toggle complete', deleteTodo: 'Delete' } as const;
+    const values = useObservableValues(() => ({
+      todo: this.service.state.observe.entity(this.entity, this.service.state.archetypes.Todo),
+    }));
+
+    if (!values || !values.todo) return;
+
+    return presentation.render({
+      ...values,
+      localized,
+      todo: values.todo,
+      toggleComplete: () => this.service.state.transactions.toggleComplete(this.entity),
+      deleteTodo: () => this.service.state.transactions.deleteTodo(this.entity),
+      dragTodo: this.service.state.transactions.dragTodo,
+      index: this.index,
+    });
+  }
+}

package/references/data-lit-todo/src/elements/todo-toolbar/index.ts

@@ -0,0 +1,2 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+export * from './todo-toolbar.js';

package/references/data-lit-todo/src/elements/todo-toolbar/todo-toolbar-presentation.ts

@@ -0,0 +1,55 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+import { html } from 'lit';
+
+import '../todo-undo-redo/index.js';
+import '@spectrum-web-components/action-button/sp-action-button.js';
+
+// Temporarily disable localization for the sample
+// import { Localized, Unlocalized } from '../../../../services/locale-service/locale-service.js';
+
+// Simplified localization for sample - using static strings
+const localizedStrings = {
+  add1Todo: 'Add 1 Todo',
+  add10Todos: 'Add 10 Todos',
+  add1000Todos: 'Add 1000 Todos',
+  clearCompleted: 'Clear Completed',
+  toggleAll: 'Toggle All',
+  todoCount: 'todos',
+  completedCount: 'completed',
+} as const;
+
+type RenderArgs = {
+  localized: typeof localizedStrings;
+  todoCount: number;
+  completedCount: number;
+  isGenerating: boolean;
+  createBulkTodos: (count: number) => void;
+  clearCompleted: () => void;
+  toggleAll: () => void;
+};
+
+export function render(args: RenderArgs) {
+  const { localized, todoCount, completedCount, isGenerating, createBulkTodos, clearCompleted, toggleAll } = args;
+
+  return html`
+    <div class="todo-toolbar">
+      <div class="toolbar-left">
+        <data-todo-undo-redo></data-todo-undo-redo>
+        <sp-action-button @click=${toggleAll} ?disabled=${isGenerating} quiet> ${localized.toggleAll} </sp-action-button>
+      </div>
+
+      <div class="toolbar-center">
+        <sp-action-button @click=${() => createBulkTodos(1)} ?disabled=${isGenerating}> ${localized.add1Todo} </sp-action-button>
+        <sp-action-button @click=${() => createBulkTodos(10)} ?disabled=${isGenerating}> ${localized.add10Todos} </sp-action-button>
+        <sp-action-button @click=${() => createBulkTodos(1000)} ?disabled=${isGenerating}> ${localized.add1000Todos} </sp-action-button>
+      </div>
+
+      <div class="toolbar-right">
+        <sp-action-button @click=${clearCompleted} ?disabled=${completedCount === 0 || isGenerating} quiet>
+          ${localized.clearCompleted}
+        </sp-action-button>
+        <span class="todo-stats"> ${completedCount} / ${todoCount} </span>
+      </div>
+    </div>
+  `;
+}

package/references/data-lit-todo/src/elements/todo-toolbar/todo-toolbar.css.ts

@@ -0,0 +1,34 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+import { css } from 'lit';
+
+export const styles = css`
+  .todo-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--spectrum-spacing-200) var(--spectrum-spacing-300);
+    background-color: var(--spectrum-gray-100);
+    border-bottom: 1px solid var(--spectrum-gray-300);
+    gap: var(--spectrum-spacing-200);
+  }
+
+  .toolbar-left,
+  .toolbar-center,
+  .toolbar-right {
+    display: flex;
+    align-items: center;
+    gap: var(--spectrum-spacing-100);
+  }
+
+  .toolbar-center {
+    flex: 1;
+    justify-content: center;
+  }
+
+  .todo-stats {
+    font-size: var(--spectrum-font-size-100);
+    color: var(--spectrum-gray-600);
+    margin-left: var(--spectrum-spacing-200);
+    width: 100px;
+  }
+`; 

package/references/data-lit-todo/src/elements/todo-toolbar/todo-toolbar.ts

@@ -0,0 +1,62 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+import * as presentation from './todo-toolbar-presentation.js';
+import { styles } from './todo-toolbar.css.js';
+import { Observe } from "@adobe/data/observe";
+import { customElement } from 'lit/decorators.js';
+import { css } from 'lit';
+
+import { useObservableValues } from "@adobe/data-lit";
+import { TodoElement } from '../../todo-element.js';
+
+export const tagName = 'data-todo-toolbar';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [tagName]: TodoToolbar;
+  }
+}
+
+@customElement(tagName)
+export class TodoToolbar extends TodoElement {
+  static styles = [
+    styles,
+    css`
+      :host {
+        display: block;
+        flex-shrink: 0;
+        width: 100%;
+      }
+    `
+  ];
+
+  render() {
+    const localized = {
+      add1Todo: 'Add 1 Todo',
+      add10Todos: 'Add 10 Todos',
+      add1000Todos: 'Add 1000 Todos',
+      clearCompleted: 'Clear Completed',
+      toggleAll: 'Toggle All',
+      todoCount: 'todos',
+      completedCount: 'completed',
+    } as const;
+    const values = useObservableValues(() => ({
+      completedCount: Observe.withMap(this.service.dependentState.completeTodos, (todos: unknown) => (todos as { length: number }).length),
+      todoCount: Observe.withMap(this.service.dependentState.allTodos, (todos: unknown) => (todos as { length: number }).length),
+    }));
+
+    if (!values) return;
+
+    return presentation.render({
+      ...values,
+      localized,
+      isGenerating: false,
+      createBulkTodos: this.service.state.transactions.createBulkTodos,
+      clearCompleted: () => {
+        // Placeholder - would need to implement this transaction
+      },
+      toggleAll: () => {
+        // Placeholder - would need to implement this transaction
+      },
+    });
+  }
+}

package/references/data-lit-todo/src/elements/todo-undo-redo/index.ts

@@ -0,0 +1,3 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+export * from './todo-undo-redo.js';

package/references/data-lit-todo/src/elements/todo-undo-redo/todo-undo-redo-presentation.ts

@@ -0,0 +1,41 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+import { html } from 'lit';
+
+import '@spectrum-web-components/action-button/sp-action-button.js';
+import '@spectrum-web-components/action-group/sp-action-group.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-redo.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-undo.js';
+
+// Temporarily disable localization for the sample
+// import { Localized, Unlocalized } from '../../../../services/locale-service/locale-service.js';
+
+// Simplified localization for sample - using static strings
+const localizedStrings = {
+  undo: 'Undo',
+  redo: 'Redo',
+} as const;
+
+type RenderArgs = {
+  localized: typeof localizedStrings;
+  hasUndo: boolean;
+  hasRedo: boolean;
+  undo: () => void;
+  redo: () => void;
+};
+
+export function render(args: RenderArgs) {
+  const { localized, hasUndo, hasRedo, undo, redo } = args;
+
+  return html`
+    <sp-action-group>
+      <sp-action-button @click=${undo} ?disabled=${!hasUndo} quiet>
+        <sp-icon-undo slot="icon"></sp-icon-undo>
+        ${localized.undo}
+      </sp-action-button>
+      <sp-action-button @click=${redo} ?disabled=${!hasRedo} quiet>
+        <sp-icon-redo slot="icon"></sp-icon-redo>
+        ${localized.redo}
+      </sp-action-button>
+    </sp-action-group>
+  `;
+}

package/references/data-lit-todo/src/elements/todo-undo-redo/todo-undo-redo.css.ts

@@ -0,0 +1,12 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+import { css } from 'lit';
+
+export const styles = css`
+  sp-action-group {
+    gap: var(--spectrum-global-dimension-size-100);
+  }
+
+  sp-action-button {
+    min-width: var(--spectrum-global-dimension-size-300);
+  }
+`;

package/references/data-lit-todo/src/elements/todo-undo-redo/todo-undo-redo.ts

@@ -0,0 +1,37 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+import * as presentation from './todo-undo-redo-presentation.js';
+import { styles } from './todo-undo-redo.css.js';
+import { customElement } from 'lit/decorators.js';
+
+import { useObservableValues } from "@adobe/data-lit";
+import { TodoElement } from '../../todo-element.js';
+
+export const tagName = 'data-todo-undo-redo';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [tagName]: TodoUndoRedo;
+  }
+}
+
+@customElement(tagName)
+export class TodoUndoRedo extends TodoElement {
+  static styles = styles;
+
+  render() {
+    const localized = { undo: 'Undo', redo: 'Redo' } as const;
+    const values = useObservableValues(() => ({
+      hasUndo: this.service.undoRedo.undoEnabled,
+      hasRedo: this.service.undoRedo.redoEnabled,
+    }));
+
+    if (!values) return;
+
+    return presentation.render({
+      ...values,
+      localized,
+      undo: this.service.undoRedo.undo,
+      redo: this.service.undoRedo.redo,
+    });
+  }
+}

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

@@ -0,0 +1,9 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+export type { SampleMetadata, Sample } from "./sample-types.js";
+
+import type { Sample } from "./sample-types.js";
+import { todoSample } from "./todo-sample.js";
+import "./todo-host.js"; // Ensure todo-host is registered
+
+export const samples: readonly Sample[] = [todoSample];

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

@@ -0,0 +1,29 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+import "@spectrum-web-components/theme/sp-theme.js";
+import "@spectrum-web-components/theme/theme-light.js";
+import "@spectrum-web-components/theme/scale-medium.js";
+import "@spectrum-web-components/styles/all-medium-light.css";
+import { samples } from "./index.js";
+
+const app = document.getElementById("app");
+if (app) {
+  app.innerHTML = samples
+    .map(
+      (s) =>
+        `<div style="margin-bottom: 1rem;">
+          <h2>${s.title}</h2>
+          <p>${s.description}</p>
+          <div id="sample-${s.id}"></div>
+        </div>`
+    )
+    .join("");
+
+  samples.forEach((s) => {
+    const container = document.getElementById(`sample-${s.id}`);
+    if (container) {
+      const el = document.createElement(s.elementTag);
+      container.appendChild(el);
+    }
+  });
+}

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

@@ -0,0 +1,14 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+export interface SampleMetadata {
+  readonly id: string;
+  readonly title: string;
+  readonly description: string;
+  readonly category: string;
+  readonly difficulty: "beginner" | "intermediate" | "advanced";
+  readonly features: readonly string[];
+}
+
+export interface Sample extends SampleMetadata {
+  readonly elementTag: string;
+}

package/references/data-lit-todo/src/services/dependent-state-service/create-dependent-state-service.ts

@@ -0,0 +1,8 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+import { applyArg } from "@adobe/data/functions";
+
+import * as dependentState from './dependent-state/index.js';
+
+import { TodoCoreService } from '../main-service/todo-main-service.js';
+
+export const createDependentStateService = (service: TodoCoreService) => applyArg(service, dependentState);

package/references/data-lit-todo/src/services/dependent-state-service/dependent-state/all-todos.ts

@@ -0,0 +1,5 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+import { TodoCoreService } from '../../main-service/todo-main-service.js';
+
+export const allTodos = (service: TodoCoreService) =>
+  service.state.observe.select(service.state.archetypes.Todo.components, { order: { order: true } });

package/references/data-lit-todo/src/services/dependent-state-service/dependent-state/complete-todos.ts

@@ -0,0 +1,5 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+import { TodoCoreService } from '../../main-service/todo-main-service.js';
+
+export const completeTodos = (service: TodoCoreService) =>
+  service.state.observe.select(service.state.archetypes.Todo.components, { where: { complete: true } });

package/references/data-lit-todo/src/services/dependent-state-service/dependent-state/incomplete-todos.ts

@@ -0,0 +1,5 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+import { TodoCoreService } from '../../main-service/todo-main-service.js';
+
+export const incompleteTodos = (service: TodoCoreService) =>
+  service.state.observe.select(service.state.archetypes.Todo.components, { where: { complete: false } });

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

@@ -0,0 +1,4 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+export * from './all-todos.js';
+export * from './complete-todos.js';
+export * from './incomplete-todos.js';

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

@@ -0,0 +1,4 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+import { createDependentStateService } from './create-dependent-state-service.js';
+
+export type DependentStateService = ReturnType<typeof createDependentStateService>;

package/references/data-lit-todo/src/services/main-service/create-main-service.ts

@@ -0,0 +1,53 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+import { TodoCoreService, TodoMainService } from './todo-main-service.js';
+import { createStoragePersistenceService, createUndoRedoService } from "@adobe/data/ecs";
+import { createDependentStateService } from '../dependent-state-service/create-dependent-state-service.js';
+import { createTodoDatabase } from '../state-service/create-todo-database.js';
+import { todoStoreSchemaVersion } from '../state-service/create-todo-store.js';
+import { TodoStateService } from '../state-service/todo-state-service.js';
+
+/**
+ * Initializes any core services and returns a new todo main service.
+ */
+export async function createMainService(services: {
+  state?: TodoStateService;
+} = {}): Promise<TodoMainService> {
+  {
+    const {
+      state = createTodoDatabase(),
+      ...rest
+    } = services;
+
+    state.transactions.createTodo({ name: 'Buy groceries' });
+    state.transactions.createTodo({ name: 'Pickup dry cleaning' });
+    state.transactions.createTodo({ name: 'Buy flowers', complete: true });
+
+    const persistence = await createStoragePersistenceService({
+      database: state,
+      storage: sessionStorage,
+      defaultFileId: `todo-database-v${todoStoreSchemaVersion}`,
+      autoSaveOnChange: true,
+      autoLoadOnStart: true,
+    });
+
+    // Create the undo-redo actions
+    const undoRedo = createUndoRedoService(state);
+
+    // The core service is what we call the service without the dependent state service
+    const coreService = {
+      serviceName: 'todo-core-service' as const,
+      ...rest,
+      state,
+      undoRedo,
+      persistence,
+    } satisfies TodoCoreService;
+
+    // We create the dependent state from the core service.
+    const dependentState = createDependentStateService(coreService);
+
+    return {
+      ...coreService,
+      dependentState,
+    } satisfies TodoMainService;
+  }
+}

package/references/data-lit-todo/src/services/main-service/todo-main-service.ts

@@ -0,0 +1,20 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+import { PersistenceService, UndoRedoService } from "@adobe/data/ecs";
+import { Service } from "@adobe/data/service";
+import { DependentStateService } from '../dependent-state-service/dependent-state-service.js';
+import { TodoStateService } from '../state-service/todo-state-service.js';
+
+export interface TodoMainService extends Service {
+  readonly serviceName: string;
+  state: TodoStateService;
+  dependentState: DependentStateService;
+  undoRedo: UndoRedoService;
+  persistence: PersistenceService;
+}
+
+export type TodoCoreService = Omit<TodoMainService, 'dependentState'>;
+
+/**
+ * The main service as used by the UI. We only allow access to the observe and actions properties.
+ */
+export type TodoUIMainService = Omit<TodoMainService, 'state'> & { state: Omit<TodoStateService, 'resources'> };

package/references/data-lit-todo/src/services/state-service/create-todo-database.ts

@@ -0,0 +1,16 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+import { todoStoreSchema } from './create-todo-store.js';
+import { Database } from "@adobe/data/ecs";
+
+import * as transactions from './transactions/index.js';
+
+export const createTodoDatabase = () => {
+  return Database.create(Database.Plugin.create({
+    components: todoStoreSchema.components,
+    resources: todoStoreSchema.resources,
+    archetypes: todoStoreSchema.archetypes,
+    transactions,
+  }));
+};
+
+export type TodoDatabase = ReturnType<typeof createTodoDatabase>;

package/references/data-lit-todo/src/services/state-service/create-todo-store.ts

@@ -0,0 +1,28 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+import { Store } from "@adobe/data/ecs";
+import { F32, True, Schema } from "@adobe/data/schema";
+
+// Increment this value if you change the schema in a non-backwards compatible way
+export const todoStoreSchemaVersion = 1;
+
+export const todoStoreSchema = {
+  components: {
+    todo: True.schema, // a tag that indicates an entity is a todo item.
+    complete: { type: 'boolean' as const },
+    name: { type: 'string' as const },
+    order: F32.schema,
+    dragPosition: Schema.Nullable(F32.schema), // null = not being dragged
+  },
+  resources: {
+    displayCompleted: { type: 'boolean' as const, default: false },
+  },
+  archetypes: {
+    Todo: ['todo', 'complete', 'name', 'order', 'dragPosition'],
+  }
+} as const;
+
+export const createTodoStore = () => {
+  return Store.create(todoStoreSchema);
+};
+
+export type TodoStore = ReturnType<typeof createTodoStore>;

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

@@ -0,0 +1,9 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+import { type TodoDatabase } from './create-todo-database.js';
+import { FromArchetype } from "@adobe/data/ecs";
+
+export type TodoStateService = TodoDatabase;
+
+export type Todo = FromArchetype<TodoDatabase['archetypes']['Todo']>;
+
+export type DragTodoFunction = TodoStateService['transactions']['dragTodo'];

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

@@ -0,0 +1,12 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+import { createTodo } from './create-todo.js';
+
+import { type TodoStore } from '../create-todo-store.js';
+
+export const createBulkTodos = (t: TodoStore, count: number) => {
+  t.undoable = { coalesce: false };
+  const currentCount = t.archetypes.Todo.rowCount;
+  for (let i = 0; i < count; i++) {
+    createTodo(t, { name: `Todo ${currentCount + i}`, complete: false });
+  }
+};

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

@@ -0,0 +1,17 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+import { createTodo } from './create-todo.js';
+import { describe, expect, it } from 'vitest';
+
+import { createTodoStore } from '../create-todo-store.js';
+
+describe('createTodo', () => {
+  describe('when creating a new todo', () => {
+    it('should return the created todo entity id and create the todo', () => {
+      const t = createTodoStore();
+      const todoId = createTodo(t, { name: 'Buy groceries' });
+      expect(todoId).toBeGreaterThanOrEqual(0);
+      const values = t.read(todoId);
+      expect(values).toEqual({ id: todoId, name: 'Buy groceries', dragPosition: null, complete: false, todo: true, order: 0 });
+    });
+  });
+});

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

@@ -0,0 +1,15 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+import { type TodoStore } from '../create-todo-store.js';
+
+export const createTodo = (t: TodoStore, props: { name: string; complete?: boolean }) => {
+  t.undoable = { coalesce: false };
+  const order = t.archetypes.Todo.rowCount;
+  // TODO: Figure out why the order seems to be zero on each added row.
+  return t.archetypes.Todo.insert({
+    ...props,
+    complete: props.complete ?? false,
+    todo: true,
+    order,
+    dragPosition: null,
+  });
+};

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

@@ -0,0 +1,18 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+import { type TodoStore } from '../create-todo-store.js';
+
+export const deleteAllTodos = (t: TodoStore) => {
+  t.undoable = { coalesce: false };
+  // query for all specific archetypes which satisfy the general todo archetype
+  for (const archetype of t.queryArchetypes(t.archetypes.Todo.components)) {
+    // traverse each row in reverse order
+    // it's slightly more efficient to delete in this order
+    // since we don't need to swap the final row to fill in the hole on delete.
+    for (let row = archetype.rowCount - 1; row >= 0; row--) {
+      // get the id for this row from the id column
+      const entityId = archetype.columns.id.get(row);
+      // delete the entity
+      t.delete(entityId);
+    }
+  }
+};