@craft-ts/core 0.7.0-beta.13

package/src/lib/source$.js

@@ -0,0 +1,171 @@
+import { assertInInjectionContext, DestroyRef, EventEmitter, inject, Injector, signal, } from './host/craft-compat';
+import { takeUntilDestroyed } from './host/craft-compat';
+import { ɵcreateHostTaggedInjector, ɵHOST_TAG_LIST } from './craft-service';
+import { APP_SNAPSHOT_REGISTRY } from './take-app-snapshot';
+import { createNamedPrimitiveGen, } from './craft-primitive-gen';
+import { yieldableInvocation } from './yieldable';
+import { SourceBranded } from './util/util';
+/**
+ * Creates an event emitter with automatic cleanup and signal-based value tracking.
+ *
+ * `source$` provides a lightweight event streaming solution that combines event emission,
+ * automatic subscription cleanup via `DestroyRef`, and signal-based reactive value tracking.
+ *
+ * @template T - The type of values emitted by the source
+ *
+ * @param name - Name matching the variable/property this source is assigned to (used for host
+ * tagging and dev-tools snapshot reporting, consistent with `craftComputed`/`craftEffect`)
+ *
+ * @returns {Source$<T>} A source object that is also a named primitive
+ * generator. Use it directly with `emit()`/`subscribe()`, or consume it with
+ * `yield*` to obtain `{ [name]: source }` and propagate its dependency metadata.
+ * - `emit(value: T)` - Emits a value to all subscribers and updates the internal signal
+ * - `subscribe(callback: (value: T) => void)` - Subscribes to emissions with automatic cleanup
+ * - `value: Signal<T | undefined>` - A read-only signal containing the last emitted value
+ * - `asReadonly()` - Returns a read-only version (only `subscribe` and `value`)
+ * - `preserveLastValue()` - Returns a variant that immediately emits the last value to new subscribers
+ *
+ * @example
+ * Yieldable source service
+ * ```typescript
+ * const { Reset } = craftService(
+ *   { name: 'Reset', providedIn: 'global' },
+ *   function* () {
+ *     const reset$ = yield* source$<void>('reset$');
+ *     return reset$;
+ *   },
+ * );
+ *
+ * const reset = yield* Reset();
+ * reset.emit();
+ * ```
+ *
+ * @example
+ * Basic usage with state coordination
+ * ```typescript
+ * import { source$, state, on$ } from '@craft-ts/core';
+ *
+ * @Component({
+ *   selector: 'app-counter',
+ *   template: `
+ *     <p>Count: {{ counter() }}</p>
+ *     <button (click)="counter.increment()">+1</button>
+ *     <button (click)="reset$.emit()">Reset</button>
+ *   `,
+ * })
+ * export class CounterComponent {
+ *   reset$ = source$<void>('reset$');
+ *
+ *   counter = craftUse(state(0, ({ set, update }) => ({
+ *     increment: () => update((v) => v + 1),
+ *     reset: on$(this.reset$, () => set(0)),
+ *   })));
+ * }
+ * ```
+ *
+ *
+ * @example
+ * Late subscriber with preserved last value
+ * ```typescript
+ * const notifications$ = source$<string>('notifications$').preserveLastValue();
+ *
+ * notifications$.emit('Server started');
+ * notifications$.emit('Database connected');
+ *
+ * // Late subscriber receives the last value immediately
+ * notifications$.subscribe((msg) => {
+ *   console.log(msg); // 'Database connected'
+ * });
+ * ```
+ *
+ * @example
+ * Read-only access pattern
+ * ```typescript
+ * class DataService {
+ *   private dataUpdated$ = source$<Data>('dataUpdated$');
+ *   readonly dataUpdated = this.dataUpdated$.asReadonly();
+ *
+ *   updateData(data: Data) {
+ *     this.dataUpdated$.emit(data);
+ *   }
+ * }
+ * ```
+ *
+ * @see {@link https://craft-ts.dev/utils/source$ | source$ documentation}
+ */
+export function source$(name) {
+    assertInInjectionContext(source$);
+    const injector = inject(Injector);
+    const sourceInjector = ɵcreateHostTaggedInjector(injector, `source:${name}`);
+    const sourceRef$ = new EventEmitter();
+    const destroyRef = inject(DestroyRef);
+    const sourceAsSignal = signal(undefined);
+    const registry = inject(APP_SNAPSHOT_REGISTRY, { optional: true });
+    if (registry) {
+        const from = sourceInjector.get(ɵHOST_TAG_LIST, null) ?? [];
+        registry.triggerSnapshot$
+            .pipe(takeUntilDestroyed(destroyRef))
+            .subscribe(() => {
+            let stateSnapshot;
+            try {
+                stateSnapshot = sourceAsSignal();
+            }
+            catch (error) {
+                stateSnapshot = {
+                    error: error instanceof Error ? error.message : String(error),
+                };
+            }
+            registry.allSnapShot$.next({
+                source: name,
+                from,
+                state: stateSnapshot,
+            });
+        });
+    }
+    const source = {
+        ...SourceBranded,
+        emit: (value) => {
+            sourceRef$.emit(value);
+            sourceAsSignal.set(value);
+            return yieldableInvocation(undefined);
+        },
+        subscribe: (callback) => sourceRef$.subscribe(callback),
+        preserveLastValue: () => {
+            const sourceWithLastValueRef = new EventEmitter();
+            const subscriptionWithLastLastValue = sourceRef$.subscribe((value) => {
+                sourceWithLastValueRef.emit(value);
+            });
+            destroyRef.onDestroy(() => subscriptionWithLastLastValue.unsubscribe());
+            return {
+                ...SourceBranded,
+                emit: (value) => {
+                    sourceWithLastValueRef.emit(value);
+                    sourceAsSignal.set(value);
+                    return yieldableInvocation(undefined);
+                },
+                subscribe: (callback) => {
+                    sourceWithLastValueRef.subscribe(callback);
+                    sourceWithLastValueRef.emit(sourceAsSignal());
+                },
+                asReadonly: () => ({
+                    ...SourceBranded,
+                    subscribe: (callback) => {
+                        sourceWithLastValueRef.subscribe(callback);
+                        sourceWithLastValueRef.emit(sourceAsSignal());
+                    },
+                    value: sourceAsSignal.asReadonly(),
+                }),
+                value: sourceAsSignal.asReadonly(),
+            };
+        },
+        value: sourceAsSignal.asReadonly(),
+        asReadonly: () => ({
+            ...SourceBranded,
+            subscribe: (callback) => sourceRef$.subscribe(callback),
+            value: sourceAsSignal.asReadonly(),
+        }),
+    };
+    const generator = createNamedPrimitiveGen(name, source);
+    return Object.assign(generator, source);
+}
+//# sourceMappingURL=source$.js.map

package/src/lib/source$.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"source$.js","sourceRoot":"","sources":["../../../../../libs/core/src/lib/source$.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  assertInInjectionContext,\n  DestroyRef,\n  EventEmitter,\n  inject,\n  Injector,\n  Signal,\n  signal,\n} from './host/craft-compat';\nimport { takeUntilDestroyed } from './host/craft-compat';\nimport { ɵcreateHostTaggedInjector, ɵHOST_TAG_LIST } from './craft-service';\nimport { APP_SNAPSHOT_REGISTRY } from './take-app-snapshot';\nimport type {\n  SERVICE_HELPER_DEPENDENCIES,\n  ServiceDependencies,\n} from './craft-service';\nimport {\n  createNamedPrimitiveGen,\n  type NamedCraftPrimitiveGen,\n} from './craft-primitive-gen';\nimport { yieldableInvocation } from './yieldable';\nimport { SourceBranded } from './util/util';\n\nexport type SourceDependency<Name extends string> = {\n  [K in Name]: ServiceDependencies<'function', {}>;\n};\n\ntype SourceDependencyCarrier<Name extends string> = {\n  readonly [SERVICE_HELPER_DEPENDENCIES]?: SourceDependency<Name>;\n};\n\nexport type SourceSubscribe<T> = {\n  subscribe: (\n    callback: (value: T) => void,\n  ) => ReturnType<EventEmitter<T>['subscribe']>;\n};\n\nexport type SourceInstance<\n  T,\n  Name extends string = string,\n> = SourceDependencyCarrier<Name> & {\n  emit: (value: T) => void;\n  subscribe: (\n    callback: (value: T) => void,\n  ) => ReturnType<EventEmitter<T>['subscribe']>;\n  asReadonly: () => ReadonlySource$<T, Name>;\n  preserveLastValue: () => PreservedSource$<T, Name>;\n  value: Signal<T | undefined>;\n};\n\nexport type Source$<T, Name extends string = string> = SourceInstance<T, Name> &\n  NamedCraftPrimitiveGen<Name, SourceInstance<T, Name>>;\n\nexport type PreservedSource$<\n  T,\n  Name extends string = string,\n> = SourceDependencyCarrier<Name> & {\n  emit: (value: T) => void;\n  subscribe: (callback: (value: T) => void) => void;\n  asReadonly: () => ReadonlySource$<T, Name>;\n  value: Signal<T | undefined>;\n};\n\nexport type ReadonlySource$<\n  T,\n  Name extends string = string,\n> = SourceDependencyCarrier<Name> & {\n  subscribe: (\n    callback: (value: T) => void,\n  ) => ReturnType<EventEmitter<T>['subscribe']>;\n  value: Signal<T | undefined>;\n};\n\n/**\n * Creates an event emitter with automatic cleanup and signal-based value tracking.\n *\n * `source$` provides a lightweight event streaming solution that combines event emission,\n * automatic subscription cleanup via `DestroyRef`, and signal-based reactive value tracking.\n *\n * @template T - The type of values emitted by the source\n *\n * @param name - Name matching the variable/property this source is assigned to (used for host\n * tagging and dev-tools snapshot reporting, consistent with `craftComputed`/`craftEffect`)\n *\n * @returns {Source$<T>} A source object that is also a named primitive\n * generator. Use it directly with `emit()`/`subscribe()`, or consume it with\n * `yield*` to obtain `{ [name]: source }` and propagate its dependency metadata.\n * - `emit(value: T)` - Emits a value to all subscribers and updates the internal signal\n * - `subscribe(callback: (value: T) => void)` - Subscribes to emissions with automatic cleanup\n * - `value: Signal<T | undefined>` - A read-only signal containing the last emitted value\n * - `asReadonly()` - Returns a read-only version (only `subscribe` and `value`)\n * - `preserveLastValue()` - Returns a variant that immediately emits the last value to new subscribers\n *\n * @example\n * Yieldable source service\n * ```typescript\n * const { Reset } = craftService(\n *   { name: 'Reset', providedIn: 'global' },\n *   function* () {\n *     const reset$ = yield* source$<void>('reset$');\n *     return reset$;\n *   },\n * );\n *\n * const reset = yield* Reset();\n * reset.emit();\n * ```\n *\n * @example\n * Basic usage with state coordination\n * ```typescript\n * import { source$, state, on$ } from '@craft-ts/core';\n *\n * @Component({\n *   selector: 'app-counter',\n *   template: `\n *     <p>Count: {{ counter() }}</p>\n *     <button (click)=\"counter.increment()\">+1</button>\n *     <button (click)=\"reset$.emit()\">Reset</button>\n *   `,\n * })\n * export class CounterComponent {\n *   reset$ = source$<void>('reset$');\n *\n *   counter = craftUse(state(0, ({ set, update }) => ({\n *     increment: () => update((v) => v + 1),\n *     reset: on$(this.reset$, () => set(0)),\n *   })));\n * }\n * ```\n *\n *\n * @example\n * Late subscriber with preserved last value\n * ```typescript\n * const notifications$ = source$<string>('notifications$').preserveLastValue();\n *\n * notifications$.emit('Server started');\n * notifications$.emit('Database connected');\n *\n * // Late subscriber receives the last value immediately\n * notifications$.subscribe((msg) => {\n *   console.log(msg); // 'Database connected'\n * });\n * ```\n *\n * @example\n * Read-only access pattern\n * ```typescript\n * class DataService {\n *   private dataUpdated$ = source$<Data>('dataUpdated$');\n *   readonly dataUpdated = this.dataUpdated$.asReadonly();\n *\n *   updateData(data: Data) {\n *     this.dataUpdated$.emit(data);\n *   }\n * }\n * ```\n *\n * @see {@link https://craft-ts.dev/utils/source$ | source$ documentation}\n */\nexport function source$<T, Name extends string = string>(\n  name: Name,\n): Source$<T, Name> {\n  assertInInjectionContext(source$);\n  const injector = inject(Injector);\n  const sourceInjector = ɵcreateHostTaggedInjector(injector, `source:${name}`);\n\n  const sourceRef$ = new EventEmitter<T>();\n  const destroyRef = inject(DestroyRef);\n\n  const sourceAsSignal = signal<T | undefined>(undefined);\n\n  const registry = inject(APP_SNAPSHOT_REGISTRY, { optional: true });\n  if (registry) {\n    const from = sourceInjector.get(ɵHOST_TAG_LIST, null) ?? [];\n    registry.triggerSnapshot$\n      .pipe(takeUntilDestroyed(destroyRef))\n      .subscribe(() => {\n        let stateSnapshot: unknown;\n        try {\n          stateSnapshot = sourceAsSignal();\n        } catch (error) {\n          stateSnapshot = {\n            error: error instanceof Error ? error.message : String(error),\n          };\n        }\n        registry.allSnapShot$.next({\n          source: name,\n          from,\n          state: stateSnapshot,\n        });\n      });\n  }\n\n  const source = {\n    ...SourceBranded,\n    emit: (value: T) => {\n      sourceRef$.emit(value);\n      sourceAsSignal.set(value);\n      return yieldableInvocation<never, void>(undefined);\n    },\n    subscribe: (callback: (value: T) => void) => sourceRef$.subscribe(callback),\n    preserveLastValue: () => {\n      const sourceWithLastValueRef = new EventEmitter<T>();\n      const subscriptionWithLastLastValue = sourceRef$.subscribe((value) => {\n        sourceWithLastValueRef.emit(value);\n      });\n\n      destroyRef.onDestroy(() => subscriptionWithLastLastValue.unsubscribe());\n\n      return {\n        ...SourceBranded,\n        emit: (value: T) => {\n          sourceWithLastValueRef.emit(value);\n          sourceAsSignal.set(value);\n          return yieldableInvocation<never, void>(undefined);\n        },\n        subscribe: (callback: (value: T) => void) => {\n          sourceWithLastValueRef.subscribe(callback);\n          sourceWithLastValueRef.emit(sourceAsSignal() as T);\n        },\n        asReadonly: () => ({\n          ...SourceBranded,\n          subscribe: (callback: (value: T) => void) => {\n            sourceWithLastValueRef.subscribe(callback);\n            sourceWithLastValueRef.emit(sourceAsSignal() as T);\n          },\n          value: sourceAsSignal.asReadonly(),\n        }),\n        value: sourceAsSignal.asReadonly(),\n      };\n    },\n    value: sourceAsSignal.asReadonly(),\n    asReadonly: () => ({\n      ...SourceBranded,\n      subscribe: (callback: (value: T) => void) =>\n        sourceRef$.subscribe(callback),\n      value: sourceAsSignal.asReadonly(),\n    }),\n  } as unknown as SourceInstance<T, Name>;\n\n  const generator = createNamedPrimitiveGen(name, source);\n\n  return Object.assign(generator, source) as Source$<T, Name>;\n}\n"]}

package/src/lib/source-from-event.d.ts

@@ -0,0 +1,350 @@
+import { ValueEqualityFn } from './host/craft-compat';
+import { SignalSource } from './signal-source';
+export type SourceFromEvent<T> = SignalSource<T> & {
+    dispose: () => void;
+};
+/**
+ * Creates a source from DOM events with automatic cleanup on component destruction.
+ *
+ * This function bridges DOM events with craft-ts's reactive system by:
+ * - Converting native DOM events to source emissions
+ * - Automatically removing event listeners on component destruction
+ * - Supporting optional event payload transformation
+ * - Providing manual disposal capability
+ * - Enabling event-driven query/mutation triggering
+ *
+ * @remarks
+ * **Automatic Cleanup:**
+ * - Event listeners are automatically removed when the injection context is destroyed
+ * - Uses Angular's `DestroyRef` for lifecycle management
+ * - Manual cleanup available via `dispose()` method
+ * - Prevents memory leaks from dangling event listeners
+ *
+ * **Use Cases:**
+ * - **User interactions**: Click, input, scroll, keyboard events
+ * - **Window events**: Resize, scroll, focus, online/offline
+ * - **Document events**: Visibility changes, custom events
+ * - **Media events**: Video/audio play, pause, ended
+ * - **Form events**: Submit, change, input
+ * - **Custom events**: Application-specific DOM events
+ *
+ * **Event Transformation:**
+ * - Without `computedValue`: Emits the raw event object
+ * - With `computedValue`: Transforms event before emission
+ * - Useful for extracting specific event properties
+ * - Reduces payload size and improves type safety
+ *
+ * **Integration with Stores:**
+ * - Use source in queries/mutations via `afterRecomputation()`
+ * - Trigger async operations on DOM events
+ * - Coordinate multiple components via event sources
+ *
+ * **Injection Context:**
+ * - Must be called within Angular injection context
+ * - Typically called in component constructor or class fields
+ * - Uses `assertInInjectionContext()` for safety
+ *
+ * @template T - The type of the event object
+ * @template ComputedValue - The type after optional transformation
+ *
+ * @param target - The DOM element or event target to listen to.
+ *   Can be any EventTarget (HTMLElement, Window, Document, etc.)
+ *
+ * @param eventName - The name of the event to listen for.
+ *   Standard DOM event names: 'click', 'input', 'scroll', etc.
+ *
+ * @param options - Optional configuration:
+ *   - `event`: Event listener options (capture, passive, once, etc.)
+ *   - `computedValue`: Function to transform event before emission
+ *   - `source`: Source options (equal)
+ *
+ * @returns A source that emits on DOM events with:
+ *   - All standard source capabilities (set, preserveLastValue)
+ *   - `dispose()`: Method to manually remove event listener
+ *   - Automatic cleanup on component destruction
+ *
+ * @example
+ * Basic click event source
+ * ```ts
+ * @Component({
+ *   selector: 'app-clicker',
+ *   template: '<button>Click me</button>',
+ *   providers: [provideClickTrackerStore()],
+ * })
+ * export class ClickerComponent {
+ *   store = ClickTrackerStore();
+ *
+ *   // Mutation executes automatically on click
+ * }
+ *
+ * const { ClickTrackerStore, provideClickTrackerStore } = craftService(
+ *   { name: 'ClickTrackerStore', providedIn: 'toProvide' },
+ *   function* () {
+ *     const hostElement = inject(ElementRef<HTMLElement>).nativeElement;
+ *     const clickSource = sourceFromEvent<MouseEvent>(hostElement, 'click');
+ *
+ *     const trackClick = yield* mutation({
+ *       method: afterRecomputation(clickSource, (event) => ({
+ *         x: event.clientX,
+ *         y: event.clientY,
+ *       })),
+ *       loader: async ({ params }) => {
+ *         await fetch('/api/track-click', {
+ *           method: 'POST',
+ *           body: JSON.stringify(params),
+ *         });
+ *         return { tracked: true };
+ *       },
+ *     });
+ *
+ *     return { clickSource, trackClick };
+ *   },
+ * );
+ * ```
+ *
+ * @example
+ * Window scroll event with transformation
+ * ```ts
+ * @Component({
+ *   selector: 'app-infinite-scroll',
+ *   template: '...',
+ *   providers: [provideInfiniteScrollStore()],
+ * })
+ * export class InfiniteScrollComponent {
+ *   store = InfiniteScrollStore();
+ * }
+ *
+ * const { InfiniteScrollStore, provideInfiniteScrollStore } = craftService(
+ *   { name: 'InfiniteScrollStore', providedIn: 'toProvide' },
+ *   function* () {
+ *     const scrollSource = sourceFromEvent(window, 'scroll', {
+ *       computedValue: () => ({
+ *         scrollY: window.scrollY,
+ *         scrollHeight: document.documentElement.scrollHeight,
+ *         clientHeight: window.innerHeight,
+ *       }),
+ *       event: { passive: true }, // Optimize performance
+ *     });
+ *
+ *     const checkLoadMore = yield* asyncProcess({
+ *       method: afterRecomputation(scrollSource, (data) => data),
+ *       loader: async ({ params }) => {
+ *         const { scrollY, scrollHeight, clientHeight } = params;
+ *         const nearBottom = scrollY + clientHeight >= scrollHeight - 100;
+ *
+ *         if (nearBottom) {
+ *           // Load more data
+ *           const response = await fetch('/api/load-more');
+ *           return response.json();
+ *         }
+ *         return null;
+ *       },
+ *     });
+ *
+ *     return { scrollSource, checkLoadMore };
+ *   },
+ * );
+ * ```
+ *
+ * @example
+ * Form input event for real-time validation
+ * ```ts
+ * @Component({
+ *   selector: 'app-search',
+ *   template: '<input type="text" placeholder="Search..." />',
+ *   providers: [provideSearchStore()],
+ * })
+ * export class SearchComponent {
+ *   store = SearchStore();
+ *
+ *   // Query executes on input changes
+ * }
+ *
+ * const { SearchStore, provideSearchStore } = craftService(
+ *   { name: 'SearchStore', providedIn: 'toProvide' },
+ *   function* () {
+ *     const hostElement = inject(ElementRef<HTMLElement>).nativeElement;
+ *     const inputSource = sourceFromEvent(hostElement, 'input', {
+ *       computedValue: (event: Event) => {
+ *         const target = event.target as HTMLInputElement;
+ *         return target.value;
+ *       },
+ *     });
+ *
+ *     const results = yield* query({
+ *       method: afterRecomputation(inputSource, (term) => term),
+ *       loader: async ({ params }) => {
+ *         if (params.length < 3) return [];
+ *
+ *         const response = await fetch(`/api/search?q=${params}`);
+ *         return response.json();
+ *       },
+ *     });
+ *
+ *     return { inputSource, results };
+ *   },
+ * );
+ * ```
+ *
+ * @example
+ * Window resize event updating a state
+ * ```ts
+ * @Component({
+ *   selector: 'app-responsive',
+ *   template: '...',
+ * })
+ * export class ResponsiveComponent {
+ *   resizeSource = sourceFromEvent(window, 'resize', {
+ *     computedValue: () => ({
+ *       width: window.innerWidth,
+ *       height: window.innerHeight,
+ *     }),
+ *   });
+ *
+ *   dimensions = craftUse(state(
+ *     { width: window.innerWidth, height: window.innerHeight },
+ *     ({ set }) => ({
+ *       // State updates automatically whenever resizeSource emits
+ *       trackResize: afterRecomputation(this.resizeSource, (data) => {
+ *         set(data);
+ *       }),
+ *     }),
+ *   ));
+ * }
+ * ```
+ *
+ * @example
+ * Custom DOM event
+ * ```ts
+ * @Component({
+ *   selector: 'app-custom-events',
+ *   template: '<div></div>',
+ *   providers: [provideCustomEventsStore()],
+ * })
+ * export class CustomEventsComponent {
+ *   private readonly _elementRef = inject(ElementRef<HTMLElement>);
+ *   store = CustomEventsStore();
+ *
+ *   triggerCustomEvent() {
+ *     const event = new CustomEvent('custom-event', {
+ *       detail: { data: 'Hello from custom event' },
+ *     });
+ *     this._elementRef.nativeElement.dispatchEvent(event);
+ *   }
+ * }
+ *
+ * const { CustomEventsStore, provideCustomEventsStore } = craftService(
+ *   { name: 'CustomEventsStore', providedIn: 'toProvide' },
+ *   function* () {
+ *     const hostElement = inject(ElementRef<HTMLElement>).nativeElement;
+ *     const customEventSource = sourceFromEvent<CustomEvent<{ data: string }>>(
+ *       hostElement,
+ *       'custom-event',
+ *       {
+ *         computedValue: (event) => event.detail.data,
+ *       },
+ *     );
+ *
+ *     const handleCustomEvent = yield* asyncProcess({
+ *       method: afterRecomputation(customEventSource, (data) => data),
+ *       loader: async ({ params }) => {
+ *         console.log('Custom event data:', params);
+ *         return { processed: true };
+ *       },
+ *     });
+ *
+ *     return { customEventSource, handleCustomEvent };
+ *   },
+ * );
+ * ```
+ *
+ * @example
+ * Manual disposal for dynamic elements
+ * ```ts
+ * @Component({
+ *   selector: 'app-dynamic',
+ *   template: '...',
+ * })
+ * export class DynamicComponent {
+ *   private clickSource?: SourceFromEvent<MouseEvent>;
+ *
+ *   attachListener(element: HTMLElement) {
+ *     // Remove previous listener if exists
+ *     this.clickSource?.dispose();
+ *
+ *     // Attach to new element
+ *     this.clickSource = sourceFromEvent<MouseEvent>(element, 'click');
+ *
+ *     // Use in store
+ *     // ...
+ *   }
+ *
+ *   detachListener() {
+ *     // Manually remove listener before component destruction
+ *     this.clickSource?.dispose();
+ *     this.clickSource = undefined;
+ *   }
+ * }
+ * ```
+ *
+ * @example
+ * Multiple event sources for keyboard shortcuts
+ * ```ts
+ * @Component({
+ *   selector: 'app-shortcuts',
+ *   template: '...',
+ *   providers: [provideShortcutsStore()],
+ * })
+ * export class ShortcutsComponent {
+ *   store = ShortcutsStore();
+ * }
+ *
+ * const { ShortcutsStore, provideShortcutsStore } = craftService(
+ *   { name: 'ShortcutsStore', providedIn: 'toProvide' },
+ *   function* () {
+ *     const keydownSource = sourceFromEvent(document, 'keydown', {
+ *       computedValue: (event: KeyboardEvent) => ({
+ *         key: event.key,
+ *         ctrlKey: event.ctrlKey,
+ *         shiftKey: event.shiftKey,
+ *         altKey: event.altKey,
+ *       }),
+ *     });
+ *
+ *     const handleShortcut = yield* asyncProcess({
+ *       method: afterRecomputation(keydownSource, (data) => data),
+ *       loader: async ({ params }) => {
+ *         // Handle Ctrl+S
+ *         if (params.ctrlKey && params.key === 's') {
+ *           // Save action
+ *           return { action: 'save' };
+ *         }
+ *         // Handle Ctrl+Z
+ *         if (params.ctrlKey && params.key === 'z') {
+ *           // Undo action
+ *           return { action: 'undo' };
+ *         }
+ *         return null;
+ *       },
+ *     });
+ *
+ *     return { keydownSource, handleShortcut };
+ *   },
+ * );
+ * ```
+ */
+export declare function sourceFromEvent<T>(target: EventTarget, eventName: string, options?: {
+    event?: boolean | AddEventListenerOptions;
+    computedValue?: never;
+    source: {
+        equal?: ValueEqualityFn<NoInfer<T> | undefined>;
+    };
+}): SourceFromEvent<T>;
+export declare function sourceFromEvent<T, ComputedValue>(target: EventTarget, eventName: string, options?: {
+    event?: boolean | AddEventListenerOptions;
+    computedValue: (event: T) => ComputedValue;
+    source?: {
+        equal?: ValueEqualityFn<NoInfer<T> | undefined>;
+    };
+}): SourceFromEvent<ComputedValue>;
+//# sourceMappingURL=source-from-event.d.ts.map

package/src/lib/source-from-event.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"source-from-event.d.ts","sourceRoot":"","sources":["../../../../../libs/core/src/lib/source-from-event.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,eAAe,EAChB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,YAAY,EAAgB,MAAM,iBAAiB,CAAC;AAE7D,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,YAAY,CAAC,CAAC,CAAC,GAAG;IACjD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyUG;AACH,wBAAgB,eAAe,CAAC,CAAC,EAC/B,MAAM,EAAE,WAAW,EACnB,SAAS,EAAE,MAAM,EACjB,OAAO,CAAC,EAAE;IACR,KAAK,CAAC,EAAE,OAAO,GAAG,uBAAuB,CAAC;IAC1C,aAAa,CAAC,EAAE,KAAK,CAAC;IACtB,MAAM,EAAE;QACN,KAAK,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC;KACjD,CAAC;CACH,GACA,eAAe,CAAC,CAAC,CAAC,CAAC;AACtB,wBAAgB,eAAe,CAAC,CAAC,EAAE,aAAa,EAC9C,MAAM,EAAE,WAAW,EACnB,SAAS,EAAE,MAAM,EACjB,OAAO,CAAC,EAAE;IACR,KAAK,CAAC,EAAE,OAAO,GAAG,uBAAuB,CAAC;IAC1C,aAAa,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,aAAa,CAAC;IAC3C,MAAM,CAAC,EAAE;QACP,KAAK,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC;KACjD,CAAC;CACH,GACA,eAAe,CAAC,aAAa,CAAC,CAAC"}

package/src/lib/source-from-event.js

@@ -0,0 +1,26 @@
+import { assertInInjectionContext, DestroyRef, inject, } from './host/craft-compat';
+import { signalSource } from './signal-source';
+export function sourceFromEvent(target, eventName, options) {
+    assertInInjectionContext(sourceFromEvent);
+    const eventSignalSource = signalSource(eventName, options?.source);
+    const listener = (event) => {
+        if (options?.computedValue) {
+            const computed = options.computedValue(event);
+            eventSignalSource.set(computed);
+            return;
+        }
+        eventSignalSource.set(event);
+    };
+    target.addEventListener(eventName, listener, options?.event);
+    const destroyRef = inject(DestroyRef);
+    const dispose = () => {
+        target.removeEventListener(eventName, listener, options?.event);
+    };
+    destroyRef.onDestroy(() => {
+        dispose();
+    });
+    return Object.assign(eventSignalSource, {
+        dispose,
+    });
+}
+//# sourceMappingURL=source-from-event.js.map

package/src/lib/source-from-event.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"source-from-event.js","sourceRoot":"","sources":["../../../../../libs/core/src/lib/source-from-event.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,wBAAwB,EACxB,UAAU,EACV,MAAM,GAEP,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAgB,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAsW7D,MAAM,UAAU,eAAe,CAC7B,MAAmB,EACnB,SAAiB,EACjB,OAMC;IAED,wBAAwB,CAAC,eAAe,CAAC,CAAC;IAC1C,MAAM,iBAAiB,GAAG,YAAY,CAAU,SAAS,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;IAE5E,MAAM,QAAQ,GAAG,CAAC,KAAY,EAAE,EAAE;QAChC,IAAI,OAAO,EAAE,aAAa,EAAE,CAAC;YAC3B,MAAM,QAAQ,GAAG,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YAC9C,iBAAiB,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;YAChC,OAAO;QACT,CAAC;QACD,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;IAE7D,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;IAEtC,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;IAClE,CAAC,CAAC;IAEF,UAAU,CAAC,SAAS,CAAC,GAAG,EAAE;QACxB,OAAO,EAAE,CAAC;IACZ,CAAC,CAAC,CAAC;IAEH,OAAO,MAAM,CAAC,MAAM,CAAC,iBAAiB,EAAE;QACtC,OAAO;KACR,CAAC,CAAC;AACL,CAAC","sourcesContent":["import {\n  assertInInjectionContext,\n  DestroyRef,\n  inject,\n  ValueEqualityFn,\n} from './host/craft-compat';\nimport { SignalSource, signalSource } from './signal-source';\n\nexport type SourceFromEvent<T> = SignalSource<T> & {\n  dispose: () => void;\n};\n\n/**\n * Creates a source from DOM events with automatic cleanup on component destruction.\n *\n * This function bridges DOM events with craft-ts's reactive system by:\n * - Converting native DOM events to source emissions\n * - Automatically removing event listeners on component destruction\n * - Supporting optional event payload transformation\n * - Providing manual disposal capability\n * - Enabling event-driven query/mutation triggering\n *\n * @remarks\n * **Automatic Cleanup:**\n * - Event listeners are automatically removed when the injection context is destroyed\n * - Uses Angular's `DestroyRef` for lifecycle management\n * - Manual cleanup available via `dispose()` method\n * - Prevents memory leaks from dangling event listeners\n *\n * **Use Cases:**\n * - **User interactions**: Click, input, scroll, keyboard events\n * - **Window events**: Resize, scroll, focus, online/offline\n * - **Document events**: Visibility changes, custom events\n * - **Media events**: Video/audio play, pause, ended\n * - **Form events**: Submit, change, input\n * - **Custom events**: Application-specific DOM events\n *\n * **Event Transformation:**\n * - Without `computedValue`: Emits the raw event object\n * - With `computedValue`: Transforms event before emission\n * - Useful for extracting specific event properties\n * - Reduces payload size and improves type safety\n *\n * **Integration with Stores:**\n * - Use source in queries/mutations via `afterRecomputation()`\n * - Trigger async operations on DOM events\n * - Coordinate multiple components via event sources\n *\n * **Injection Context:**\n * - Must be called within Angular injection context\n * - Typically called in component constructor or class fields\n * - Uses `assertInInjectionContext()` for safety\n *\n * @template T - The type of the event object\n * @template ComputedValue - The type after optional transformation\n *\n * @param target - The DOM element or event target to listen to.\n *   Can be any EventTarget (HTMLElement, Window, Document, etc.)\n *\n * @param eventName - The name of the event to listen for.\n *   Standard DOM event names: 'click', 'input', 'scroll', etc.\n *\n * @param options - Optional configuration:\n *   - `event`: Event listener options (capture, passive, once, etc.)\n *   - `computedValue`: Function to transform event before emission\n *   - `source`: Source options (equal)\n *\n * @returns A source that emits on DOM events with:\n *   - All standard source capabilities (set, preserveLastValue)\n *   - `dispose()`: Method to manually remove event listener\n *   - Automatic cleanup on component destruction\n *\n * @example\n * Basic click event source\n * ```ts\n * @Component({\n *   selector: 'app-clicker',\n *   template: '<button>Click me</button>',\n *   providers: [provideClickTrackerStore()],\n * })\n * export class ClickerComponent {\n *   store = ClickTrackerStore();\n *\n *   // Mutation executes automatically on click\n * }\n *\n * const { ClickTrackerStore, provideClickTrackerStore } = craftService(\n *   { name: 'ClickTrackerStore', providedIn: 'toProvide' },\n *   function* () {\n *     const hostElement = inject(ElementRef<HTMLElement>).nativeElement;\n *     const clickSource = sourceFromEvent<MouseEvent>(hostElement, 'click');\n *\n *     const trackClick = yield* mutation({\n *       method: afterRecomputation(clickSource, (event) => ({\n *         x: event.clientX,\n *         y: event.clientY,\n *       })),\n *       loader: async ({ params }) => {\n *         await fetch('/api/track-click', {\n *           method: 'POST',\n *           body: JSON.stringify(params),\n *         });\n *         return { tracked: true };\n *       },\n *     });\n *\n *     return { clickSource, trackClick };\n *   },\n * );\n * ```\n *\n * @example\n * Window scroll event with transformation\n * ```ts\n * @Component({\n *   selector: 'app-infinite-scroll',\n *   template: '...',\n *   providers: [provideInfiniteScrollStore()],\n * })\n * export class InfiniteScrollComponent {\n *   store = InfiniteScrollStore();\n * }\n *\n * const { InfiniteScrollStore, provideInfiniteScrollStore } = craftService(\n *   { name: 'InfiniteScrollStore', providedIn: 'toProvide' },\n *   function* () {\n *     const scrollSource = sourceFromEvent(window, 'scroll', {\n *       computedValue: () => ({\n *         scrollY: window.scrollY,\n *         scrollHeight: document.documentElement.scrollHeight,\n *         clientHeight: window.innerHeight,\n *       }),\n *       event: { passive: true }, // Optimize performance\n *     });\n *\n *     const checkLoadMore = yield* asyncProcess({\n *       method: afterRecomputation(scrollSource, (data) => data),\n *       loader: async ({ params }) => {\n *         const { scrollY, scrollHeight, clientHeight } = params;\n *         const nearBottom = scrollY + clientHeight >= scrollHeight - 100;\n *\n *         if (nearBottom) {\n *           // Load more data\n *           const response = await fetch('/api/load-more');\n *           return response.json();\n *         }\n *         return null;\n *       },\n *     });\n *\n *     return { scrollSource, checkLoadMore };\n *   },\n * );\n * ```\n *\n * @example\n * Form input event for real-time validation\n * ```ts\n * @Component({\n *   selector: 'app-search',\n *   template: '<input type=\"text\" placeholder=\"Search...\" />',\n *   providers: [provideSearchStore()],\n * })\n * export class SearchComponent {\n *   store = SearchStore();\n *\n *   // Query executes on input changes\n * }\n *\n * const { SearchStore, provideSearchStore } = craftService(\n *   { name: 'SearchStore', providedIn: 'toProvide' },\n *   function* () {\n *     const hostElement = inject(ElementRef<HTMLElement>).nativeElement;\n *     const inputSource = sourceFromEvent(hostElement, 'input', {\n *       computedValue: (event: Event) => {\n *         const target = event.target as HTMLInputElement;\n *         return target.value;\n *       },\n *     });\n *\n *     const results = yield* query({\n *       method: afterRecomputation(inputSource, (term) => term),\n *       loader: async ({ params }) => {\n *         if (params.length < 3) return [];\n *\n *         const response = await fetch(`/api/search?q=${params}`);\n *         return response.json();\n *       },\n *     });\n *\n *     return { inputSource, results };\n *   },\n * );\n * ```\n *\n * @example\n * Window resize event updating a state\n * ```ts\n * @Component({\n *   selector: 'app-responsive',\n *   template: '...',\n * })\n * export class ResponsiveComponent {\n *   resizeSource = sourceFromEvent(window, 'resize', {\n *     computedValue: () => ({\n *       width: window.innerWidth,\n *       height: window.innerHeight,\n *     }),\n *   });\n *\n *   dimensions = craftUse(state(\n *     { width: window.innerWidth, height: window.innerHeight },\n *     ({ set }) => ({\n *       // State updates automatically whenever resizeSource emits\n *       trackResize: afterRecomputation(this.resizeSource, (data) => {\n *         set(data);\n *       }),\n *     }),\n *   ));\n * }\n * ```\n *\n * @example\n * Custom DOM event\n * ```ts\n * @Component({\n *   selector: 'app-custom-events',\n *   template: '<div></div>',\n *   providers: [provideCustomEventsStore()],\n * })\n * export class CustomEventsComponent {\n *   private readonly _elementRef = inject(ElementRef<HTMLElement>);\n *   store = CustomEventsStore();\n *\n *   triggerCustomEvent() {\n *     const event = new CustomEvent('custom-event', {\n *       detail: { data: 'Hello from custom event' },\n *     });\n *     this._elementRef.nativeElement.dispatchEvent(event);\n *   }\n * }\n *\n * const { CustomEventsStore, provideCustomEventsStore } = craftService(\n *   { name: 'CustomEventsStore', providedIn: 'toProvide' },\n *   function* () {\n *     const hostElement = inject(ElementRef<HTMLElement>).nativeElement;\n *     const customEventSource = sourceFromEvent<CustomEvent<{ data: string }>>(\n *       hostElement,\n *       'custom-event',\n *       {\n *         computedValue: (event) => event.detail.data,\n *       },\n *     );\n *\n *     const handleCustomEvent = yield* asyncProcess({\n *       method: afterRecomputation(customEventSource, (data) => data),\n *       loader: async ({ params }) => {\n *         console.log('Custom event data:', params);\n *         return { processed: true };\n *       },\n *     });\n *\n *     return { customEventSource, handleCustomEvent };\n *   },\n * );\n * ```\n *\n * @example\n * Manual disposal for dynamic elements\n * ```ts\n * @Component({\n *   selector: 'app-dynamic',\n *   template: '...',\n * })\n * export class DynamicComponent {\n *   private clickSource?: SourceFromEvent<MouseEvent>;\n *\n *   attachListener(element: HTMLElement) {\n *     // Remove previous listener if exists\n *     this.clickSource?.dispose();\n *\n *     // Attach to new element\n *     this.clickSource = sourceFromEvent<MouseEvent>(element, 'click');\n *\n *     // Use in store\n *     // ...\n *   }\n *\n *   detachListener() {\n *     // Manually remove listener before component destruction\n *     this.clickSource?.dispose();\n *     this.clickSource = undefined;\n *   }\n * }\n * ```\n *\n * @example\n * Multiple event sources for keyboard shortcuts\n * ```ts\n * @Component({\n *   selector: 'app-shortcuts',\n *   template: '...',\n *   providers: [provideShortcutsStore()],\n * })\n * export class ShortcutsComponent {\n *   store = ShortcutsStore();\n * }\n *\n * const { ShortcutsStore, provideShortcutsStore } = craftService(\n *   { name: 'ShortcutsStore', providedIn: 'toProvide' },\n *   function* () {\n *     const keydownSource = sourceFromEvent(document, 'keydown', {\n *       computedValue: (event: KeyboardEvent) => ({\n *         key: event.key,\n *         ctrlKey: event.ctrlKey,\n *         shiftKey: event.shiftKey,\n *         altKey: event.altKey,\n *       }),\n *     });\n *\n *     const handleShortcut = yield* asyncProcess({\n *       method: afterRecomputation(keydownSource, (data) => data),\n *       loader: async ({ params }) => {\n *         // Handle Ctrl+S\n *         if (params.ctrlKey && params.key === 's') {\n *           // Save action\n *           return { action: 'save' };\n *         }\n *         // Handle Ctrl+Z\n *         if (params.ctrlKey && params.key === 'z') {\n *           // Undo action\n *           return { action: 'undo' };\n *         }\n *         return null;\n *       },\n *     });\n *\n *     return { keydownSource, handleShortcut };\n *   },\n * );\n * ```\n */\nexport function sourceFromEvent<T>(\n  target: EventTarget,\n  eventName: string,\n  options?: {\n    event?: boolean | AddEventListenerOptions;\n    computedValue?: never;\n    source: {\n      equal?: ValueEqualityFn<NoInfer<T> | undefined>;\n    };\n  },\n): SourceFromEvent<T>;\nexport function sourceFromEvent<T, ComputedValue>(\n  target: EventTarget,\n  eventName: string,\n  options?: {\n    event?: boolean | AddEventListenerOptions;\n    computedValue: (event: T) => ComputedValue;\n    source?: {\n      equal?: ValueEqualityFn<NoInfer<T> | undefined>;\n    };\n  },\n): SourceFromEvent<ComputedValue>;\nexport function sourceFromEvent(\n  target: EventTarget,\n  eventName: string,\n  options?: {\n    event?: boolean | AddEventListenerOptions;\n    computedValue?: (event: Event) => unknown;\n    source?: {\n      equal?: ValueEqualityFn<NoInfer<unknown> | undefined>;\n    };\n  },\n): SourceFromEvent<unknown> {\n  assertInInjectionContext(sourceFromEvent);\n  const eventSignalSource = signalSource<unknown>(eventName, options?.source);\n\n  const listener = (event: Event) => {\n    if (options?.computedValue) {\n      const computed = options.computedValue(event);\n      eventSignalSource.set(computed);\n      return;\n    }\n    eventSignalSource.set(event);\n  };\n\n  target.addEventListener(eventName, listener, options?.event);\n\n  const destroyRef = inject(DestroyRef);\n\n  const dispose = () => {\n    target.removeEventListener(eventName, listener, options?.event);\n  };\n\n  destroyRef.onDestroy(() => {\n    dispose();\n  });\n\n  return Object.assign(eventSignalSource, {\n    dispose,\n  });\n}\n"]}

package/src/lib/stacked-source.d.ts

@@ -0,0 +1,6 @@
+import { Signal } from './host/craft-compat';
+export type StackSource<T> = Signal<T[] | undefined> & {
+    set: (value: T) => void;
+};
+export declare function stackedSource<T>(): StackSource<T>;
+//# sourceMappingURL=stacked-source.d.ts.map

package/src/lib/stacked-source.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stacked-source.d.ts","sourceRoot":"","sources":["../../../../../libs/core/src/lib/stacked-source.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,MAAM,EAAU,MAAM,qBAAqB,CAAC;AAEnE,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC,EAAE,GAAG,SAAS,CAAC,GAAG;IACrD,GAAG,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;CACzB,CAAC;AAGF,wBAAgB,aAAa,CAAC,CAAC,KAAK,WAAW,CAAC,CAAC,CAAC,CA8BjD"}

package/src/lib/stacked-source.js

@@ -0,0 +1,29 @@
+import { linkedSignal, signal } from './host/craft-compat';
+// ! this algo only works with object
+export function stackedSource() {
+    const stack = [];
+    const s2 = signal(undefined);
+    const l = linkedSignal({
+        source: s2,
+        computation: (current, previousData) => {
+            if (!previousData) {
+                stack.length = 0;
+                return undefined;
+            }
+            const result = [...stack];
+            stack.length = 0;
+            return result;
+        },
+    });
+    const set = (value) => {
+        console.log('custom set', value);
+        stack.push(value);
+        console.log('stack', stack);
+        s2.set(value);
+        return;
+    };
+    return Object.assign(l, {
+        set,
+    });
+}
+//# sourceMappingURL=stacked-source.js.map

package/src/lib/stacked-source.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stacked-source.js","sourceRoot":"","sources":["../../../../../libs/core/src/lib/stacked-source.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAU,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAMnE,qCAAqC;AACrC,MAAM,UAAU,aAAa;IAC3B,MAAM,KAAK,GAAc,EAAE,CAAC;IAC5B,MAAM,EAAE,GAAG,MAAM,CAAgB,SAAS,CAAC,CAAC;IAE5C,MAAM,CAAC,GAAG,YAAY,CAAC;QACrB,MAAM,EAAE,EAAE;QACV,WAAW,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,EAAE;YACrC,IAAI,CAAC,YAAY,EAAE,CAAC;gBAClB,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;gBACjB,OAAO,SAAS,CAAC;YACnB,CAAC;YAED,MAAM,MAAM,GAAG,CAAC,GAAG,KAAK,CAAC,CAAC;YAC1B,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;YACjB,OAAO,MAAM,CAAC;QAChB,CAAC;KACF,CAAC,CAAC;IAEH,MAAM,GAAG,GAAG,CAAC,KAAQ,EAAE,EAAE;QACvB,OAAO,CAAC,GAAG,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;QACjC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAClB,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;QAE5B,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QACd,OAAO;IACT,CAAC,CAAC;IAEF,OAAO,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE;QACtB,GAAG;KACJ,CAAmB,CAAC;AACvB,CAAC","sourcesContent":["import { linkedSignal, Signal, signal } from './host/craft-compat';\n\nexport type StackSource<T> = Signal<T[] | undefined> & {\n  set: (value: T) => void;\n};\n\n// ! this algo only works with object\nexport function stackedSource<T>(): StackSource<T> {\n  const stack: unknown[] = [];\n  const s2 = signal<T | undefined>(undefined);\n\n  const l = linkedSignal({\n    source: s2,\n    computation: (current, previousData) => {\n      if (!previousData) {\n        stack.length = 0;\n        return undefined;\n      }\n\n      const result = [...stack];\n      stack.length = 0;\n      return result;\n    },\n  });\n\n  const set = (value: T) => {\n    console.log('custom set', value);\n    stack.push(value);\n    console.log('stack', stack);\n\n    s2.set(value);\n    return;\n  };\n\n  return Object.assign(l, {\n    set,\n  }) as StackSource<T>;\n}\n"]}