@adobe/data 0.9.36 → 0.9.39

package/references/data-lit/src/hooks/use-draggable.ts

@@ -0,0 +1,112 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+import { Vec2 } from '@adobe/data/math';
+import { useEffect } from './use-effect.js';
+
+function toCssUnitString(value: number): string {
+    return `${value}px`;
+}
+
+export interface DraggableProps {
+    //  onDragStart should return the initial position of the element
+    onDragStart: (e: PointerEvent) => Vec2 | void;
+    onDrag: (e: PointerEvent, newPosition: Vec2, delta: Vec2) => void;
+    onDragEnd?: (e: PointerEvent, newPosition: Vec2, delta: Vec2) => void;
+    /**
+     * Called if this hook is destroyed before the drag is completed.
+     */
+    onDragCancel?: () => void;
+    minDragDistance?: number;
+    dragCursor?: string;
+    addPlaceholder?: boolean;
+    stopPropagation?: boolean;
+}
+
+export function useDraggable(element: HTMLElement, props: DraggableProps, dependencies: unknown[]) {
+    const { minDragDistance = 10, dragCursor = 'grab', addPlaceholder = false, stopPropagation = false } = props;
+    useEffect(() => {
+        let downPosition: Vec2 | null = null;
+        // the bounds of the element when the pointer was first pressed down.
+        let dragStartOffset: Vec2 | null = null;
+        let originalCursor = '';
+        let placeholder: HTMLElement | null = null;
+        let movePosition: Vec2 = [0, 0];
+        function notify(e: PointerEvent, dragListener: DraggableProps["onDrag"]) {
+            const delta = Vec2.subtract(movePosition, downPosition!);
+            dragListener(e, Vec2.add(dragStartOffset!, delta), delta);
+        }
+
+        function onPointerMove(e: PointerEvent) {
+            movePosition = [e.clientX, e.clientY];
+            if (Vec2.length(Vec2.subtract(movePosition, downPosition!)) >= minDragDistance) {
+                if (!dragStartOffset) {
+                    dragStartOffset = [element.offsetLeft, element.offsetTop];
+                    props.onDragStart(e);
+                    if (dragCursor) {
+                        originalCursor = element.style.cursor;
+                        element.style.cursor = dragCursor;
+                    }
+                    // add a placeholder so the parent element doesn't change size when the element is dragged.
+                    if (addPlaceholder) {
+                        placeholder = document.createElement('div');
+                        Object.assign(placeholder.style, {
+                            position: 'absolute',
+                            backgroundColor: 'pink',
+                            left: toCssUnitString(element.offsetLeft),
+                            top: toCssUnitString(element.offsetTop),
+                            width: toCssUnitString(element.offsetWidth),
+                            height: toCssUnitString(element.offsetHeight),
+                            visibility: 'hidden',
+                        });
+                        element.parentElement?.appendChild(placeholder);
+                    }
+                }
+            }
+            if (dragStartOffset) {
+                notify(e, props.onDrag);
+            }
+            if (stopPropagation) e.stopPropagation();
+        }
+        function cleanup() {
+            // eslint-disable-next-line @typescript-eslint/no-use-before-define
+            window.removeEventListener('pointerup', onPointerUp);
+            window.removeEventListener('pointermove', onPointerMove);
+            if (dragCursor) {
+                element.style.cursor = originalCursor;
+            }
+            if (placeholder) {
+                placeholder.remove();
+                placeholder = null;
+            }
+        }
+        function onPointerUp(e: PointerEvent) {
+            cleanup();
+            if (dragStartOffset && props.onDragEnd) {
+                notify(e, props.onDragEnd);
+            }
+            if (stopPropagation) e.stopPropagation();
+            downPosition = null;
+            dragStartOffset = null;
+        }
+        function onPointerDown(e: PointerEvent) {
+            // Only start drag transaction for left mouse button clicks
+            if (e.button !== 0) return;
+
+            window.addEventListener('pointermove', onPointerMove);
+            window.addEventListener('pointerup', onPointerUp);
+            downPosition = [e.clientX, e.clientY];
+            if (stopPropagation) e.stopPropagation();
+        }
+
+        element?.addEventListener('pointerdown', onPointerDown);
+        return () => {
+            element?.removeEventListener('pointerdown', onPointerDown);
+            if (downPosition) {
+                cleanup();
+            }
+            if (dragStartOffset) {
+                props.onDragCancel?.();
+            }
+        };
+    }, [element, ...(dependencies ?? [])]);
+}

package/references/data-lit/src/hooks/use-effect.ts

@@ -0,0 +1,19 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+import { equalsShallow } from "@adobe/data/equals-shallow";
+import type { Component } from "./component/component.js"
+import { Component_stack } from "./component/stack.js";
+
+export type EffectCallback = () => (void | (() => void))
+type EffectHookState = { dispose?: () => void, dependencies: unknown[] };
+
+export function useEffect<T extends Component>(callback: EffectCallback, dependencies: unknown[] = []) {
+    const component = Component_stack.active() as T;
+    const hookIndex = component.hookIndex++;
+    const oldHookState = component.hooks[hookIndex] as EffectHookState | undefined;
+    const rerunEffect = !oldHookState || !equalsShallow(dependencies, oldHookState.dependencies);
+    if (rerunEffect) {
+        oldHookState?.dispose?.();
+        component.hooks[hookIndex] = { dispose: callback.call(component) ?? undefined, dependencies };
+    }
+}

package/references/data-lit/src/hooks/use-element.ts

@@ -0,0 +1,83 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+import { Component_stack } from "./component/stack.js";
+import { useEffect } from "./use-effect.js";
+import { useState } from "./use-state.js";
+
+/**
+ * Hook that returns the currently active component.
+ * If a querySelector is provided, it dynamically observes for child elements
+ * matching the selector and triggers rerender when found.
+ */
+export function useElement<K extends keyof HTMLElementTagNameMap>(querySelector: K): HTMLElementTagNameMap[K] | null
+export function useElement<T = HTMLElement>(): T
+export function useElement<T = HTMLElement>(querySelector?: string): T | null {
+    const component = Component_stack.active();
+    
+    // If no querySelector provided, return the active component
+    if (!querySelector) {
+        return component as unknown as T;
+    }
+
+    // Use state to track the found element
+    const [foundElement, setFoundElement] = useState<T | null>(null);
+    
+    useEffect(() => {
+        const element = component as unknown as HTMLElement;
+        
+        // Check if element already exists
+        const existingElement = element.querySelector(querySelector) as T | null;
+        if (existingElement) {
+            setFoundElement(existingElement);
+            return;
+        }
+        
+        // Set up MutationObserver to watch for new child elements
+        const observer = new MutationObserver((mutations) => {
+            for (const mutation of mutations) {
+                if (mutation.type === 'childList') {
+                    // Check if any added nodes match the selector
+                    for (const node of mutation.addedNodes) {
+                        if (node.nodeType === Node.ELEMENT_NODE) {
+                            const element = node as Element;
+                            // Check if the added node itself matches
+                            if (element.matches(querySelector)) {
+                                setFoundElement(element as T);
+                                observer.disconnect();
+                                return;
+                            }
+                            // Check if any descendant matches
+                            const descendant = element.querySelector(querySelector) as T | null;
+                            if (descendant) {
+                                setFoundElement(descendant);
+                                observer.disconnect();
+                                return;
+                            }
+                        }
+                    }
+                }
+            }
+        });
+        
+        // Start observing both element and shadowRoot
+        for (const observe of [element.shadowRoot, element]) {
+            if (observe) {
+                observer.observe(observe, {
+                    childList: true,
+                    subtree: true
+                });
+            }
+        }
+        observer.observe(element.shadowRoot ?? element, {
+            childList: true,
+            subtree: true
+        });
+        
+        // Cleanup function
+        return () => {
+            observer.disconnect();
+        };
+    }, [querySelector]);
+    
+    return foundElement;
+}

package/references/data-lit/src/hooks/use-memo.ts

@@ -0,0 +1,16 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+import { useEffect } from "./use-effect.js";
+import { useState } from "./use-state.js";
+
+export function useMemo<T>(calculateValue: () => T, dependencies: unknown[] = []): T {
+    const [state, setState] = useState<T | undefined>(undefined);
+    let currentValue = state;
+
+    useEffect(() => {
+        currentValue = calculateValue();
+        setState(currentValue);
+    }, dependencies);
+
+    return currentValue!;
+}

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

@@ -0,0 +1,10 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+import { Observe } from "@adobe/data/observe";
+import { useMemo } from "./use-memo.js";
+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-lit/src/hooks/use-observable.ts

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

package/references/data-lit/src/hooks/use-ref.ts

@@ -0,0 +1,8 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+import { useState } from "./use-state.js";
+
+export function useRef<T>(initialValue: T): { current: T } {
+    const [state] = useState({ current: initialValue });
+    return state;
+}

package/references/data-lit/src/hooks/use-resize-observer.ts

@@ -0,0 +1,31 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+import { useEffect } from "./use-effect.js";
+import { useElement } from "./use-element.js";
+
+export interface ResizeInfo {
+    width: number;
+    height: number;
+    entry: ResizeObserverEntry;
+}
+
+/**
+ * Hook to observe element resizes. Calls callback with width, height, and the original entry
+ * when the element's size changes.
+ * 
+ * @param onResize - Callback invoked when element size changes
+ */
+export function useResizeObserver(onResize: (info: ResizeInfo) => void) {
+    const element = useElement();
+
+    useEffect(() => {
+        const observer = new ResizeObserver(entries => {
+            for (const entry of entries) {
+                const { width, height } = entry.contentRect;
+                onResize({ width, height, entry });
+            }
+        });
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [element, onResize]);
+} 

package/references/data-lit/src/hooks/use-state.ts

@@ -0,0 +1,19 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+import { Component_stack } from "./component/stack.js";
+
+export function useState<T>(initializer: () => T): [T, (value: T) => void]
+export function useState<T>(initialValue: T): [T, (value: T) => void]
+export function useState<T>(initial: () => T) {
+    const component = Component_stack.active();
+    const hookIndex = component.hookIndex++;
+    const value = component.hooks[hookIndex] ??= (typeof initial === "function" ? initial() : initial);
+    return [
+        value,
+        (newValue: T) => {
+            component.hooks[hookIndex] = newValue;
+            component.requestUpdate();
+        }
+    ];
+
+}

package/references/data-lit/src/hooks/use-updated.ts

@@ -0,0 +1,56 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+import { useElement } from "./use-element.js";
+import { useEffect } from "./use-effect.js";
+
+export interface UpdateEventHost {
+    updateListeners: Set<() => void>;
+}
+
+function hasUpdateListeners(el: unknown): el is UpdateEventHost {
+    return (
+        typeof el === 'object' &&
+        el !== null &&
+        'updateListeners' in el &&
+        el['updateListeners'] instanceof Set
+    );
+}
+
+function makeUpdateEventHost<T extends Element>(
+    el: T
+): T & UpdateEventHost {
+    if (hasUpdateListeners(el)) return el as T & UpdateEventHost;
+
+    const updateListeners = new Set<() => void>();
+    Object.defineProperty(el, 'updateListeners', {
+        value: updateListeners,
+        writable: false,
+        enumerable: false,
+    });
+
+    if (!('updated' in el)) {
+        throw new Error('Element does not have an updated method');
+    }
+
+    const element = el as unknown as T & {
+        updated: (changedProps: Map<PropertyKey, unknown>) => void;
+    } & UpdateEventHost;
+    const orig = element.updated.bind(el);
+
+    element.updated = (changedProps) => {
+        orig(changedProps);
+        for (const fn of updateListeners) fn();
+    };
+
+    return element;
+}
+
+
+export function useUpdated(listener: () => void, dependencies: unknown[] = []) {
+    const element = makeUpdateEventHost(useElement());
+    useEffect(() => {
+        element.updateListeners.add(listener);
+        return () => {
+            element.updateListeners.delete(listener);
+        }
+    }, dependencies);
+}

package/references/data-lit/src/hooks/use-window-event.ts

@@ -0,0 +1,16 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+import { useEffect } from "./use-effect.js";
+import { useMemo } from "./use-memo.js";
+
+export function useWindowEvent<K extends keyof WindowEventMap>(
+    event: K,
+    callbackFactory: () => (e: WindowEventMap[K]) => void,
+    deps: any[] = []
+) {
+    const callback = useMemo(callbackFactory, deps);
+    useEffect(() => {
+        window.addEventListener(event, callback);
+        return () => window.removeEventListener(event, callback);
+    }, [callback]);
+}

package/references/data-lit/src/hooks/with-hooks.ts

@@ -0,0 +1,22 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+import type { Component } from "./component/component.js";
+import { Component_stack } from "./component/stack.js";
+
+export function withHooks<This extends Component, Args extends any[], Return>(
+    target: object,
+    propertyKey: string,
+    descriptor: TypedPropertyDescriptor<(this: This, ...args: Args) => Return>
+): TypedPropertyDescriptor<(this: This, ...args: Args) => Return> {
+    const originalMethod = descriptor.value!;
+    descriptor.value = function (this: This, ...args: Args): Return {
+        Component_stack.push(this);
+        try {
+            return originalMethod.apply(this, args);
+        }
+        finally {
+            Component_stack.pop();
+        }
+    }
+    return descriptor;
+}

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

@@ -0,0 +1,6 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+export * from "./hooks/index.js";
+export * from "./elements/index.js";
+export * from "./decorators/index.js";
+export type { Vec2 } from "@adobe/data/math";

package/references/data-lit/tsconfig.json

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

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

@@ -0,0 +1,30 @@
+{
+  "name": "data-lit-todo",
+  "version": "0.9.39",
+  "description": "Todo sample app demonstrating @adobe/data with Lit",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite",
+    "publish-public": "true"
+  },
+  "dependencies": {
+    "@adobe/data": "workspace:*",
+    "@adobe/data-lit": "workspace:*",
+    "@spectrum-web-components/action-button": "^1.7.0",
+    "@spectrum-web-components/action-group": "^1.7.0",
+    "@spectrum-web-components/button": "^1.7.0",
+    "@spectrum-web-components/card": "^1.7.0",
+    "@spectrum-web-components/checkbox": "^1.7.0",
+    "@spectrum-web-components/icons-workflow": "^1.7.0",
+    "@spectrum-web-components/styles": "^1.7.0",
+    "@spectrum-web-components/theme": "^1.7.0",
+    "lit": "^3.3.1"
+  },
+  "devDependencies": {
+    "typescript": "^5.8.3",
+    "vite": "^6.4.0",
+    "vitest": "^1.6.0"
+  }
+}

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

@@ -0,0 +1,22 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+import type { Entity } from "@adobe/data/ecs";
+import { html } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
+import '@spectrum-web-components/action-button/sp-action-button.js';
+import '../todo-row/todo-row.js';
+
+type RenderArgs = {
+  todos: readonly Entity[];
+};
+
+export function render(args: RenderArgs) {
+  return html`
+    <div class="todo-list">
+      ${repeat(
+    args.todos,
+    todo => todo,
+    (todo, index) => html` <data-todo-row .entity=${todo} .index=${index}></data-todo-row> `
+  )}
+    </div>
+  `;
+}

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

@@ -0,0 +1,12 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+import { css } from 'lit';
+
+export const styles = css`
+    .todo-list {
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        user-select: none;
+    }
+`; 

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>
+  `;
+}