@adobe/data 0.9.37 → 0.9.40

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

@@ -0,0 +1,45 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+import * as presentation from './todo-list-presentation.js';
+import { styles } from './todo-list.css.js';
+import { customElement } from 'lit/decorators.js';
+import { css } from 'lit';
+
+import { useObservableValues } from "@adobe/data-lit";
+import { TodoElement } from '../../todo-element.js';
+import '../todo-row/todo-row.js';
+
+export const tagName = 'data-todo-list';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [tagName]: TodoList;
+  }
+}
+
+@customElement(tagName)
+export class TodoList extends TodoElement {
+  static styles = [
+    styles,
+    css`
+      :host {
+        display: block;
+        height: 100%;
+        width: 100%;
+        overflow-y: auto;
+        position: relative;
+      }
+    `
+  ];
+
+  render() {
+    const values = useObservableValues(() => ({
+      todos: this.service.dependentState.allTodos,
+    }));
+
+    if (!values) return;
+
+    return presentation.render({
+      ...values,
+    });
+  }
+}

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

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

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

@@ -0,0 +1,68 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+import { html } from 'lit';
+
+import { useDragTransaction } from "@adobe/data-lit";
+import '@spectrum-web-components/action-button/sp-action-button.js';
+import '@spectrum-web-components/checkbox/sp-checkbox.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-delete.js';
+
+// Temporarily disable localization for the sample
+// import { Localized, Unlocalized } from '../../../../services/locale-service/locale-service.js';
+import { DragTodoFunction, Todo } from '../../services/state-service/todo-state-service.js';
+
+const TODO_ROW_HEIGHT = 56;
+
+// Simplified localization for sample - using static strings
+const localizedStrings = {
+  deleteTodo: 'Delete',
+  toggleComplete: 'Toggle complete',
+} as const;
+
+type RenderArgs = {
+  localized: typeof localizedStrings;
+  todo: Todo;
+  toggleComplete: () => void;
+  deleteTodo: () => void;
+  dragTodo: DragTodoFunction;
+  index: number;
+};
+
+export function render(args: RenderArgs) {
+  const { localized, todo, toggleComplete, deleteTodo, index, dragTodo } = args;
+
+  useDragTransaction({
+    transaction: dragTodo,
+    update: (value) => {
+      if (value.type === 'move') {
+        return {
+          todo: todo.id,
+          dragPosition: value.delta[1],
+        };
+      } else if (value.type === 'end') {
+        const finalIndex = index + Math.round(value.position[1] / TODO_ROW_HEIGHT);
+        return {
+          todo: todo.id,
+          dragPosition: index,
+          finalIndex,
+        };
+      }
+    },
+  }, [dragTodo, todo.id, index]);
+
+  const dragging = todo.dragPosition !== null;
+  const position = index * TODO_ROW_HEIGHT + (todo.dragPosition ?? 0);
+
+  return html`
+    <div
+      class="todo-row ${dragging ? 'dragging' : ''}"
+      style="height: ${TODO_ROW_HEIGHT}px; position: absolute; top: ${position}px; left: 0; right: 0;">
+      <sp-checkbox @change=${toggleComplete} title=${localized.toggleComplete} ?checked=${todo.complete}> </sp-checkbox>
+
+      <span class="todo-name"> ${index}: ${todo.name} </span>
+
+      <sp-action-button @click=${deleteTodo} quiet title=${localized.deleteTodo}>
+        <sp-icon-delete slot="icon"></sp-icon-delete>
+      </sp-action-button>
+    </div>
+  `;
+}

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>;