@pastweb/vue 2.0.0

package/dist/useColorScheme/useColorScheme.d.cts

@@ -0,0 +1,29 @@
+import { ColorSchemeInfo, MatchScheme, SchemeOptions } from "@pastweb/tools/createMatchScheme/types";
+
+//#region src/useColorScheme/useColorScheme.d.ts
+/**
+ * Vue composable for reading and updating the current color scheme.
+ *
+ * The signature mirrors `useColorScheme` from `@pastweb/tools` and the React
+ * package: pass options to create an internal `MatchScheme`, or pass a
+ * pre-created `matchScheme` as the second argument. The Vue wrapper subscribes
+ * to mode/system changes and cleans those listeners up before component
+ * unmount.
+ *
+ * @param options - Options passed to `createMatchScheme` when `matchScheme` is not provided.
+ * @param matchScheme - Optional pre-created `MatchScheme` instance.
+ * @returns A tuple with the current color scheme info and the mode setter.
+ *
+ * @example
+ * ```ts
+ * import { useColorScheme } from '@pastweb/vue';
+ *
+ * const [scheme, setMode] = useColorScheme({ defaultMode: 'auto' });
+ *
+ * setMode(scheme.selected === 'dark' ? 'light' : 'dark');
+ * ```
+ */
+declare function useColorScheme(options?: SchemeOptions, matchScheme?: MatchScheme): [ColorSchemeInfo, (mode: string) => void];
+//#endregion
+export { useColorScheme };
+//# sourceMappingURL=useColorScheme.d.cts.map

package/dist/useColorScheme/useColorScheme.d.ts

@@ -0,0 +1,29 @@
+import { ColorSchemeInfo, MatchScheme, SchemeOptions } from "@pastweb/tools/createMatchScheme/types";
+
+//#region src/useColorScheme/useColorScheme.d.ts
+/**
+ * Vue composable for reading and updating the current color scheme.
+ *
+ * The signature mirrors `useColorScheme` from `@pastweb/tools` and the React
+ * package: pass options to create an internal `MatchScheme`, or pass a
+ * pre-created `matchScheme` as the second argument. The Vue wrapper subscribes
+ * to mode/system changes and cleans those listeners up before component
+ * unmount.
+ *
+ * @param options - Options passed to `createMatchScheme` when `matchScheme` is not provided.
+ * @param matchScheme - Optional pre-created `MatchScheme` instance.
+ * @returns A tuple with the current color scheme info and the mode setter.
+ *
+ * @example
+ * ```ts
+ * import { useColorScheme } from '@pastweb/vue';
+ *
+ * const [scheme, setMode] = useColorScheme({ defaultMode: 'auto' });
+ *
+ * setMode(scheme.selected === 'dark' ? 'light' : 'dark');
+ * ```
+ */
+declare function useColorScheme(options?: SchemeOptions, matchScheme?: MatchScheme): [ColorSchemeInfo, (mode: string) => void];
+//#endregion
+export { useColorScheme };
+//# sourceMappingURL=useColorScheme.d.ts.map

package/dist/useColorScheme/useColorScheme.js

@@ -0,0 +1,45 @@
+import { useBeforeUnmount } from "../useBeforeUnmount/useBeforeUnmount.js";
+import "../useBeforeUnmount/index.js";
+import { shallowReactive } from "vue";
+import { update } from "@pastweb/tools/update";
+import { createMatchScheme } from "@pastweb/tools/createMatchScheme";
+//#region src/useColorScheme/useColorScheme.ts
+/**
+* Vue composable for reading and updating the current color scheme.
+*
+* The signature mirrors `useColorScheme` from `@pastweb/tools` and the React
+* package: pass options to create an internal `MatchScheme`, or pass a
+* pre-created `matchScheme` as the second argument. The Vue wrapper subscribes
+* to mode/system changes and cleans those listeners up before component
+* unmount.
+*
+* @param options - Options passed to `createMatchScheme` when `matchScheme` is not provided.
+* @param matchScheme - Optional pre-created `MatchScheme` instance.
+* @returns A tuple with the current color scheme info and the mode setter.
+*
+* @example
+* ```ts
+* import { useColorScheme } from '@pastweb/vue';
+*
+* const [scheme, setMode] = useColorScheme({ defaultMode: 'auto' });
+*
+* setMode(scheme.selected === 'dark' ? 'light' : 'dark');
+* ```
+*/
+function useColorScheme(options = {}, matchScheme) {
+	const scheme = matchScheme ?? createMatchScheme(options);
+	const current = shallowReactive(scheme.getInfo());
+	const updateCurrent = () => update(current, scheme.getInfo());
+	const onModeChange = scheme.onModeChange(updateCurrent);
+	const onSysChange = scheme.onSysSchemeChange(updateCurrent);
+	updateCurrent();
+	useBeforeUnmount(() => {
+		onModeChange.removeListener();
+		onSysChange.removeListener();
+	});
+	return [current, scheme.setMode];
+}
+//#endregion
+export { useColorScheme };
+
+//# sourceMappingURL=useColorScheme.js.map

package/dist/useColorScheme/useColorScheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useColorScheme.js","names":[],"sources":["../../src/useColorScheme/useColorScheme.ts"],"sourcesContent":["import { shallowReactive } from 'vue';\nimport { createMatchScheme } from '@pastweb/tools/createMatchScheme';\nimport { update } from '@pastweb/tools/update';\nimport { useBeforeUnmount } from '../useBeforeUnmount';\nimport type { RemoveListener } from '@pastweb/tools/createEventEmitter/types';\nimport type { MatchScheme, ColorSchemeInfo, SchemeOptions } from '@pastweb/tools/createMatchScheme/types';\n\n/**\n * Vue composable for reading and updating the current color scheme.\n *\n * The signature mirrors `useColorScheme` from `@pastweb/tools` and the React\n * package: pass options to create an internal `MatchScheme`, or pass a\n * pre-created `matchScheme` as the second argument. The Vue wrapper subscribes\n * to mode/system changes and cleans those listeners up before component\n * unmount.\n *\n * @param options - Options passed to `createMatchScheme` when `matchScheme` is not provided.\n * @param matchScheme - Optional pre-created `MatchScheme` instance.\n * @returns A tuple with the current color scheme info and the mode setter.\n *\n * @example\n * ```ts\n * import { useColorScheme } from '@pastweb/vue';\n *\n * const [scheme, setMode] = useColorScheme({ defaultMode: 'auto' });\n *\n * setMode(scheme.selected === 'dark' ? 'light' : 'dark');\n * ```\n */\nexport function useColorScheme(options: SchemeOptions = {}, matchScheme?: MatchScheme): [ColorSchemeInfo, (mode: string) => void] {\n  const scheme = matchScheme ?? createMatchScheme(options);\n  const current = shallowReactive(scheme.getInfo()) as ColorSchemeInfo;\n\n  const updateCurrent = () => update(current, scheme.getInfo());\n\n  const onModeChange: RemoveListener = scheme.onModeChange(updateCurrent);\n  const onSysChange: RemoveListener = scheme.onSysSchemeChange(updateCurrent);\n\n  updateCurrent();\n\n  useBeforeUnmount(() => {\n    onModeChange.removeListener();\n    onSysChange.removeListener();\n  });\n\n  return [current, scheme.setMode];\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,SAAgB,eAAe,UAAyB,CAAC,GAAG,aAAsE;CAChI,MAAM,SAAS,eAAe,kBAAkB,OAAO;CACvD,MAAM,UAAU,gBAAgB,OAAO,QAAQ,CAAC;CAEhD,MAAM,sBAAsB,OAAO,SAAS,OAAO,QAAQ,CAAC;CAE5D,MAAM,eAA+B,OAAO,aAAa,aAAa;CACtE,MAAM,cAA8B,OAAO,kBAAkB,aAAa;CAE1E,cAAc;CAEd,uBAAuB;EACrB,aAAa,eAAe;EAC5B,YAAY,eAAe;CAC7B,CAAC;CAED,OAAO,CAAC,SAAS,OAAO,OAAO;AACjC"}

package/dist/useMediator/index.cjs

@@ -0,0 +1,3 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_useMediator_useMediator = require("./useMediator.cjs");
+exports.useMediator = require_useMediator_useMediator.useMediator;

package/dist/useMediator/index.d.cts

@@ -0,0 +1,3 @@
+import { ContextUtils, Mediator, MediatorFunction } from "./types.cjs";
+import { useMediator } from "./useMediator.cjs";
+export { type ContextUtils, type Mediator, type MediatorFunction, useMediator };

package/dist/useMediator/index.d.ts

@@ -0,0 +1,3 @@
+import { ContextUtils, Mediator, MediatorFunction } from "./types.js";
+import { useMediator } from "./useMediator.js";
+export { type ContextUtils, type Mediator, type MediatorFunction, useMediator };

package/dist/useMediator/index.js

@@ -0,0 +1,2 @@
+import { useMediator } from "./useMediator.js";
+export { useMediator };

package/dist/useMediator/types.d.cts

@@ -0,0 +1,2 @@
+import { ContextUtils, Extras, Mediator, MediatorFunction, Props } from "@pastweb/tools";
+export type { ContextUtils, Extras, Mediator, MediatorFunction, Props };

package/dist/useMediator/types.d.ts

@@ -0,0 +1,2 @@
+import { ContextUtils, Extras, Mediator, MediatorFunction, Props } from "@pastweb/tools";
+export type { ContextUtils, Extras, Mediator, MediatorFunction, Props };

package/dist/useMediator/useMediator.cjs

@@ -0,0 +1,137 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_getContext_getContext = require("../getContext/getContext.cjs");
+require("../getContext/index.cjs");
+const require_setContext_setContext = require("../setContext/setContext.cjs");
+require("../setContext/index.cjs");
+const require_useMediator_utils = require("./utils.cjs");
+let vue = require("vue");
+let _pastweb_tools_reactivity = require("@pastweb/tools/reactivity");
+let _pastweb_tools_update = require("@pastweb/tools/update");
+let _pastweb_tools_getFunctionSignature = require("@pastweb/tools/getFunctionSignature");
+let _pastweb_tools_globalContext_createMediatorContextUtils = require("@pastweb/tools/globalContext/createMediatorContextUtils");
+let _pastweb_tools_isHMREnabled = require("@pastweb/tools/isHMREnabled");
+//#region src/useMediator/useMediator.ts
+/**
+* Creates a tools mediator inside a Vue component.
+*
+* The mediator is created once for the component instance. Props and extras are
+* copied into tools reactive objects and kept in sync with Vue updates, while
+* mediator state is mirrored into Vue shallow reactivity for rendering.
+*
+* Vue does not need React's render-time mediator store because `setup()` runs
+* once per component instance. This hook still keeps an instance-local store so
+* mediator state persists across prop updates and Vue watchers are stopped on
+* unmount. During development HMR, a changed mediator source signature
+* reinitializes the mediator in place and refreshes the Vue state mirror.
+*
+* @typeParam T - Mediator return type.
+* @param mediator - Tools mediator factory.
+* @param props - Props passed to the mediator. `children` is ignored.
+* @param extras - Extra values passed to the mediator.
+* @returns Mediator return value with Vue-rendered state.
+*
+* @example
+* counterMediator.ts
+*
+* ```ts
+* import { reactive } from '@pastweb/tools';
+*
+* export function createCounter(props: { initial: number }) {
+*   const state = reactive({ count: props.initial });
+*
+*   return {
+*     state,
+*     increment: () => {
+*       state.count += 1;
+*     },
+*   };
+* }
+* ```
+*
+* CounterButton.vue
+*
+* ```vue
+* <script setup lang="ts">
+* import { useMediator } from '@pastweb/vue';
+* import { createCounter } from './counterMediator';
+*
+* const counter = useMediator(createCounter, { initial: 0 });
+* <\/script>
+*
+* <template>
+*   <button @click="counter.increment">
+*     {{ counter.state.count }}
+*   </button>
+* </template>
+* ```
+*/
+const useMediator = (mediator, props = {}, extras = {}) => {
+	const { children: _children, ...restProps } = props;
+	const stops = /* @__PURE__ */ new Set();
+	const hmr = (0, _pastweb_tools_isHMREnabled.isHMREnabled)();
+	let isDisposed = false;
+	let activeGeneration = 0;
+	let storedMediator = mediator;
+	let storedMediatorSignature = (0, _pastweb_tools_getFunctionSignature.getFunctionSignature)(storedMediator);
+	const storedProps = (0, _pastweb_tools_reactivity.reactive)({ ...restProps });
+	const storedExtras = (0, _pastweb_tools_reactivity.reactive)({ ...extras });
+	const contextUtils = {
+		getContext: require_getContext_getContext.getContext,
+		setContext: require_setContext_setContext.setContext
+	};
+	let mediatorResult = createMediator();
+	const state = (0, vue.shallowReactive)({ ...mediatorResult.state || {} });
+	const output = {
+		...mediatorResult,
+		state
+	};
+	function createMediator() {
+		return (0, _pastweb_tools_globalContext_createMediatorContextUtils.createMediatorContextUtils)(storedMediator, storedProps, storedExtras, contextUtils);
+	}
+	function syncOutput() {
+		Object.keys(output).forEach((key) => {
+			if (key !== "state" && !(key in mediatorResult)) delete output[key];
+		});
+		Object.entries(mediatorResult).forEach(([key, value]) => {
+			if (key !== "state") output[key] = value;
+		});
+	}
+	function bridgeState() {
+		const generation = ++activeGeneration;
+		require_useMediator_utils.syncRecord(state, mediatorResult.state || {});
+		if (mediatorResult.state) (0, _pastweb_tools_reactivity.effect)(() => {
+			if (!isDisposed && generation === activeGeneration && mediatorResult.state) (0, _pastweb_tools_update.update)(state, mediatorResult.state);
+		}, mediatorResult.state);
+	}
+	function reinitializeMediator(nextMediator) {
+		storedMediator = nextMediator;
+		storedMediatorSignature = (0, _pastweb_tools_getFunctionSignature.getFunctionSignature)(storedMediator);
+		mediatorResult = createMediator();
+		syncOutput();
+		bridgeState();
+	}
+	syncOutput();
+	bridgeState();
+	stops.add((0, vue.watchEffect)(() => {
+		const { children: _children, ...nextProps } = props;
+		require_useMediator_utils.syncRecord(storedProps, nextProps);
+		if (hmr) {
+			const nextSignature = (0, _pastweb_tools_getFunctionSignature.getFunctionSignature)(mediator);
+			if (storedMediatorSignature !== nextSignature) reinitializeMediator(mediator);
+		}
+	}));
+	stops.add((0, vue.watchEffect)(() => {
+		require_useMediator_utils.syncRecord(storedExtras, extras);
+	}));
+	(0, vue.onBeforeUnmount)(() => {
+		isDisposed = true;
+		activeGeneration += 1;
+		stops.forEach((stop) => stop());
+		stops.clear();
+	});
+	return output;
+};
+//#endregion
+exports.useMediator = useMediator;
+
+//# sourceMappingURL=useMediator.cjs.map

package/dist/useMediator/useMediator.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMediator.cjs","names":[],"sources":["../../src/useMediator/useMediator.ts"],"sourcesContent":["import { onBeforeUnmount, shallowReactive as vueReactive, watchEffect, type WatchHandle } from 'vue';\nimport { getFunctionSignature } from '@pastweb/tools/getFunctionSignature';\nimport { createMediatorContextUtils } from '@pastweb/tools/globalContext/createMediatorContextUtils';\nimport { isHMREnabled } from '@pastweb/tools/isHMREnabled';\nimport { effect, reactive } from '@pastweb/tools/reactivity';\nimport { update } from '@pastweb/tools/update';\nimport { getContext } from '../getContext';\nimport { setContext } from '../setContext';\nimport { syncRecord } from './utils';\nimport type { ContextUtils, Extras, Mediator, MediatorFunction, Props } from './types';\n\n/**\n * Creates a tools mediator inside a Vue component.\n *\n * The mediator is created once for the component instance. Props and extras are\n * copied into tools reactive objects and kept in sync with Vue updates, while\n * mediator state is mirrored into Vue shallow reactivity for rendering.\n *\n * Vue does not need React's render-time mediator store because `setup()` runs\n * once per component instance. This hook still keeps an instance-local store so\n * mediator state persists across prop updates and Vue watchers are stopped on\n * unmount. During development HMR, a changed mediator source signature\n * reinitializes the mediator in place and refreshes the Vue state mirror.\n *\n * @typeParam T - Mediator return type.\n * @param mediator - Tools mediator factory.\n * @param props - Props passed to the mediator. `children` is ignored.\n * @param extras - Extra values passed to the mediator.\n * @returns Mediator return value with Vue-rendered state.\n *\n * @example\n * counterMediator.ts\n *\n * ```ts\n * import { reactive } from '@pastweb/tools';\n *\n * export function createCounter(props: { initial: number }) {\n *   const state = reactive({ count: props.initial });\n *\n *   return {\n *     state,\n *     increment: () => {\n *       state.count += 1;\n *     },\n *   };\n * }\n * ```\n *\n * CounterButton.vue\n *\n * ```vue\n * <script setup lang=\"ts\">\n * import { useMediator } from '@pastweb/vue';\n * import { createCounter } from './counterMediator';\n *\n * const counter = useMediator(createCounter, { initial: 0 });\n * </script>\n *\n * <template>\n *   <button @click=\"counter.increment\">\n *     {{ counter.state.count }}\n *   </button>\n * </template>\n * ```\n */\nexport const useMediator = <T>(mediator: MediatorFunction<T>, props: Props = {}, extras: Extras = {}): T => {\n  const { children: _children, ...restProps } = props;\n  const stops = new Set<WatchHandle>();\n  const hmr = isHMREnabled();\n  let isDisposed = false;\n  let activeGeneration = 0;\n  let storedMediator = mediator;\n  let storedMediatorSignature = getFunctionSignature(storedMediator);\n\n  const storedProps = reactive({ ...restProps });\n  const storedExtras = reactive({ ...extras });\n  const contextUtils: ContextUtils = {\n    getContext,\n    setContext,\n  };\n  let mediatorResult = createMediator();\n  const state: Record<string, any> = vueReactive({ ...(mediatorResult.state || {}) });\n  const output = { ...mediatorResult, state } as Mediator & Record<string, any>;\n\n  function createMediator(): Mediator & Record<string, any> {\n    return createMediatorContextUtils(\n      storedMediator,\n      storedProps,\n      storedExtras,\n      contextUtils,\n    ) as Mediator & Record<string, any>;\n  }\n\n  function syncOutput(): void {\n    Object.keys(output).forEach(key => {\n      if (key !== 'state' && !(key in mediatorResult)) delete output[key];\n    });\n\n    Object.entries(mediatorResult).forEach(([key, value]) => {\n      if (key !== 'state') output[key] = value;\n    });\n  }\n\n  function bridgeState(): void {\n    const generation = ++activeGeneration;\n\n    syncRecord(state, mediatorResult.state || {});\n\n    if (mediatorResult.state) {\n      effect(() => {\n        if (!isDisposed && generation === activeGeneration && mediatorResult.state) {\n          update(state, mediatorResult.state);\n        }\n      }, mediatorResult.state);\n    }\n  }\n\n  function reinitializeMediator(nextMediator: MediatorFunction<T>): void {\n    storedMediator = nextMediator;\n    storedMediatorSignature = getFunctionSignature(storedMediator);\n    mediatorResult = createMediator();\n\n    syncOutput();\n    bridgeState();\n  }\n\n  syncOutput();\n  bridgeState();\n\n  stops.add(watchEffect(() => {\n    const { children: _children, ...nextProps } = props;\n    syncRecord(storedProps, nextProps);\n\n    if (hmr) {\n      const nextSignature = getFunctionSignature(mediator);\n\n      if (storedMediatorSignature !== nextSignature) {\n        reinitializeMediator(mediator);\n      }\n    }\n  }));\n\n  stops.add(watchEffect(() => {\n    syncRecord(storedExtras, extras);\n  }));\n\n  onBeforeUnmount(() => {\n    isDisposed = true;\n    activeGeneration += 1;\n    stops.forEach(stop => stop());\n    stops.clear();\n  });\n\n  return output as T;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiEA,MAAa,eAAkB,UAA+B,QAAe,CAAC,GAAG,SAAiB,CAAC,MAAS;CAC1G,MAAM,EAAE,UAAU,WAAW,GAAG,cAAc;CAC9C,MAAM,wBAAQ,IAAI,IAAiB;CACnC,MAAM,OAAA,GAAA,4BAAA,aAAA,CAAmB;CACzB,IAAI,aAAa;CACjB,IAAI,mBAAmB;CACvB,IAAI,iBAAiB;CACrB,IAAI,2BAAA,GAAA,oCAAA,qBAAA,CAA+C,cAAc;CAEjE,MAAM,eAAA,GAAA,0BAAA,SAAA,CAAuB,EAAE,GAAG,UAAU,CAAC;CAC7C,MAAM,gBAAA,GAAA,0BAAA,SAAA,CAAwB,EAAE,GAAG,OAAO,CAAC;CAC3C,MAAM,eAA6B;EACjC,YAAA,8BAAA;EACA,YAAA,8BAAA;CACF;CACA,IAAI,iBAAiB,eAAe;CACpC,MAAM,SAAA,GAAA,IAAA,gBAAA,CAAyC,EAAE,GAAI,eAAe,SAAS,CAAC,EAAG,CAAC;CAClF,MAAM,SAAS;EAAE,GAAG;EAAgB;CAAM;CAE1C,SAAS,iBAAiD;EACxD,QAAA,GAAA,wDAAA,2BAAA,CACE,gBACA,aACA,cACA,YACF;CACF;CAEA,SAAS,aAAmB;EAC1B,OAAO,KAAK,MAAM,CAAC,CAAC,SAAQ,QAAO;GACjC,IAAI,QAAQ,WAAW,EAAE,OAAO,iBAAiB,OAAO,OAAO;EACjE,CAAC;EAED,OAAO,QAAQ,cAAc,CAAC,CAAC,SAAS,CAAC,KAAK,WAAW;GACvD,IAAI,QAAQ,SAAS,OAAO,OAAO;EACrC,CAAC;CACH;CAEA,SAAS,cAAoB;EAC3B,MAAM,aAAa,EAAE;EAErB,0BAAA,WAAW,OAAO,eAAe,SAAS,CAAC,CAAC;EAE5C,IAAI,eAAe,OACjB,CAAA,GAAA,0BAAA,OAAA,OAAa;GACX,IAAI,CAAC,cAAc,eAAe,oBAAoB,eAAe,OACnE,CAAA,GAAA,sBAAA,OAAA,CAAO,OAAO,eAAe,KAAK;EAEtC,GAAG,eAAe,KAAK;CAE3B;CAEA,SAAS,qBAAqB,cAAyC;EACrE,iBAAiB;EACjB,2BAAA,GAAA,oCAAA,qBAAA,CAA+C,cAAc;EAC7D,iBAAiB,eAAe;EAEhC,WAAW;EACX,YAAY;CACd;CAEA,WAAW;CACX,YAAY;CAEZ,MAAM,KAAA,GAAA,IAAA,YAAA,OAAsB;EAC1B,MAAM,EAAE,UAAU,WAAW,GAAG,cAAc;EAC9C,0BAAA,WAAW,aAAa,SAAS;EAEjC,IAAI,KAAK;GACP,MAAM,iBAAA,GAAA,oCAAA,qBAAA,CAAqC,QAAQ;GAEnD,IAAI,4BAA4B,eAC9B,qBAAqB,QAAQ;EAEjC;CACF,CAAC,CAAC;CAEF,MAAM,KAAA,GAAA,IAAA,YAAA,OAAsB;EAC1B,0BAAA,WAAW,cAAc,MAAM;CACjC,CAAC,CAAC;CAEF,CAAA,GAAA,IAAA,gBAAA,OAAsB;EACpB,aAAa;EACb,oBAAoB;EACpB,MAAM,SAAQ,SAAQ,KAAK,CAAC;EAC5B,MAAM,MAAM;CACd,CAAC;CAED,OAAO;AACT"}

package/dist/useMediator/useMediator.d.cts

@@ -0,0 +1,61 @@
+import { Extras, MediatorFunction, Props } from "./types.cjs";
+
+//#region src/useMediator/useMediator.d.ts
+/**
+ * Creates a tools mediator inside a Vue component.
+ *
+ * The mediator is created once for the component instance. Props and extras are
+ * copied into tools reactive objects and kept in sync with Vue updates, while
+ * mediator state is mirrored into Vue shallow reactivity for rendering.
+ *
+ * Vue does not need React's render-time mediator store because `setup()` runs
+ * once per component instance. This hook still keeps an instance-local store so
+ * mediator state persists across prop updates and Vue watchers are stopped on
+ * unmount. During development HMR, a changed mediator source signature
+ * reinitializes the mediator in place and refreshes the Vue state mirror.
+ *
+ * @typeParam T - Mediator return type.
+ * @param mediator - Tools mediator factory.
+ * @param props - Props passed to the mediator. `children` is ignored.
+ * @param extras - Extra values passed to the mediator.
+ * @returns Mediator return value with Vue-rendered state.
+ *
+ * @example
+ * counterMediator.ts
+ *
+ * ```ts
+ * import { reactive } from '@pastweb/tools';
+ *
+ * export function createCounter(props: { initial: number }) {
+ *   const state = reactive({ count: props.initial });
+ *
+ *   return {
+ *     state,
+ *     increment: () => {
+ *       state.count += 1;
+ *     },
+ *   };
+ * }
+ * ```
+ *
+ * CounterButton.vue
+ *
+ * ```vue
+ * <script setup lang="ts">
+ * import { useMediator } from '@pastweb/vue';
+ * import { createCounter } from './counterMediator';
+ *
+ * const counter = useMediator(createCounter, { initial: 0 });
+ * </script>
+ *
+ * <template>
+ *   <button @click="counter.increment">
+ *     {{ counter.state.count }}
+ *   </button>
+ * </template>
+ * ```
+ */
+declare const useMediator: <T>(mediator: MediatorFunction<T>, props?: Props, extras?: Extras) => T;
+//#endregion
+export { useMediator };
+//# sourceMappingURL=useMediator.d.cts.map

package/dist/useMediator/useMediator.d.ts

@@ -0,0 +1,61 @@
+import { Extras, MediatorFunction, Props } from "./types.js";
+
+//#region src/useMediator/useMediator.d.ts
+/**
+ * Creates a tools mediator inside a Vue component.
+ *
+ * The mediator is created once for the component instance. Props and extras are
+ * copied into tools reactive objects and kept in sync with Vue updates, while
+ * mediator state is mirrored into Vue shallow reactivity for rendering.
+ *
+ * Vue does not need React's render-time mediator store because `setup()` runs
+ * once per component instance. This hook still keeps an instance-local store so
+ * mediator state persists across prop updates and Vue watchers are stopped on
+ * unmount. During development HMR, a changed mediator source signature
+ * reinitializes the mediator in place and refreshes the Vue state mirror.
+ *
+ * @typeParam T - Mediator return type.
+ * @param mediator - Tools mediator factory.
+ * @param props - Props passed to the mediator. `children` is ignored.
+ * @param extras - Extra values passed to the mediator.
+ * @returns Mediator return value with Vue-rendered state.
+ *
+ * @example
+ * counterMediator.ts
+ *
+ * ```ts
+ * import { reactive } from '@pastweb/tools';
+ *
+ * export function createCounter(props: { initial: number }) {
+ *   const state = reactive({ count: props.initial });
+ *
+ *   return {
+ *     state,
+ *     increment: () => {
+ *       state.count += 1;
+ *     },
+ *   };
+ * }
+ * ```
+ *
+ * CounterButton.vue
+ *
+ * ```vue
+ * <script setup lang="ts">
+ * import { useMediator } from '@pastweb/vue';
+ * import { createCounter } from './counterMediator';
+ *
+ * const counter = useMediator(createCounter, { initial: 0 });
+ * </script>
+ *
+ * <template>
+ *   <button @click="counter.increment">
+ *     {{ counter.state.count }}
+ *   </button>
+ * </template>
+ * ```
+ */
+declare const useMediator: <T>(mediator: MediatorFunction<T>, props?: Props, extras?: Extras) => T;
+//#endregion
+export { useMediator };
+//# sourceMappingURL=useMediator.d.ts.map

package/dist/useMediator/useMediator.js

@@ -0,0 +1,136 @@
+import { getContext } from "../getContext/getContext.js";
+import "../getContext/index.js";
+import { setContext } from "../setContext/setContext.js";
+import "../setContext/index.js";
+import { syncRecord } from "./utils.js";
+import { onBeforeUnmount, shallowReactive, watchEffect } from "vue";
+import { effect, reactive as reactive$1 } from "@pastweb/tools/reactivity";
+import { update } from "@pastweb/tools/update";
+import { getFunctionSignature } from "@pastweb/tools/getFunctionSignature";
+import { createMediatorContextUtils } from "@pastweb/tools/globalContext/createMediatorContextUtils";
+import { isHMREnabled } from "@pastweb/tools/isHMREnabled";
+//#region src/useMediator/useMediator.ts
+/**
+* Creates a tools mediator inside a Vue component.
+*
+* The mediator is created once for the component instance. Props and extras are
+* copied into tools reactive objects and kept in sync with Vue updates, while
+* mediator state is mirrored into Vue shallow reactivity for rendering.
+*
+* Vue does not need React's render-time mediator store because `setup()` runs
+* once per component instance. This hook still keeps an instance-local store so
+* mediator state persists across prop updates and Vue watchers are stopped on
+* unmount. During development HMR, a changed mediator source signature
+* reinitializes the mediator in place and refreshes the Vue state mirror.
+*
+* @typeParam T - Mediator return type.
+* @param mediator - Tools mediator factory.
+* @param props - Props passed to the mediator. `children` is ignored.
+* @param extras - Extra values passed to the mediator.
+* @returns Mediator return value with Vue-rendered state.
+*
+* @example
+* counterMediator.ts
+*
+* ```ts
+* import { reactive } from '@pastweb/tools';
+*
+* export function createCounter(props: { initial: number }) {
+*   const state = reactive({ count: props.initial });
+*
+*   return {
+*     state,
+*     increment: () => {
+*       state.count += 1;
+*     },
+*   };
+* }
+* ```
+*
+* CounterButton.vue
+*
+* ```vue
+* <script setup lang="ts">
+* import { useMediator } from '@pastweb/vue';
+* import { createCounter } from './counterMediator';
+*
+* const counter = useMediator(createCounter, { initial: 0 });
+* <\/script>
+*
+* <template>
+*   <button @click="counter.increment">
+*     {{ counter.state.count }}
+*   </button>
+* </template>
+* ```
+*/
+const useMediator = (mediator, props = {}, extras = {}) => {
+	const { children: _children, ...restProps } = props;
+	const stops = /* @__PURE__ */ new Set();
+	const hmr = isHMREnabled();
+	let isDisposed = false;
+	let activeGeneration = 0;
+	let storedMediator = mediator;
+	let storedMediatorSignature = getFunctionSignature(storedMediator);
+	const storedProps = reactive$1({ ...restProps });
+	const storedExtras = reactive$1({ ...extras });
+	const contextUtils = {
+		getContext,
+		setContext
+	};
+	let mediatorResult = createMediator();
+	const state = shallowReactive({ ...mediatorResult.state || {} });
+	const output = {
+		...mediatorResult,
+		state
+	};
+	function createMediator() {
+		return createMediatorContextUtils(storedMediator, storedProps, storedExtras, contextUtils);
+	}
+	function syncOutput() {
+		Object.keys(output).forEach((key) => {
+			if (key !== "state" && !(key in mediatorResult)) delete output[key];
+		});
+		Object.entries(mediatorResult).forEach(([key, value]) => {
+			if (key !== "state") output[key] = value;
+		});
+	}
+	function bridgeState() {
+		const generation = ++activeGeneration;
+		syncRecord(state, mediatorResult.state || {});
+		if (mediatorResult.state) effect(() => {
+			if (!isDisposed && generation === activeGeneration && mediatorResult.state) update(state, mediatorResult.state);
+		}, mediatorResult.state);
+	}
+	function reinitializeMediator(nextMediator) {
+		storedMediator = nextMediator;
+		storedMediatorSignature = getFunctionSignature(storedMediator);
+		mediatorResult = createMediator();
+		syncOutput();
+		bridgeState();
+	}
+	syncOutput();
+	bridgeState();
+	stops.add(watchEffect(() => {
+		const { children: _children, ...nextProps } = props;
+		syncRecord(storedProps, nextProps);
+		if (hmr) {
+			const nextSignature = getFunctionSignature(mediator);
+			if (storedMediatorSignature !== nextSignature) reinitializeMediator(mediator);
+		}
+	}));
+	stops.add(watchEffect(() => {
+		syncRecord(storedExtras, extras);
+	}));
+	onBeforeUnmount(() => {
+		isDisposed = true;
+		activeGeneration += 1;
+		stops.forEach((stop) => stop());
+		stops.clear();
+	});
+	return output;
+};
+//#endregion
+export { useMediator };
+
+//# sourceMappingURL=useMediator.js.map

package/dist/useMediator/useMediator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMediator.js","names":["reactive","vueReactive"],"sources":["../../src/useMediator/useMediator.ts"],"sourcesContent":["import { onBeforeUnmount, shallowReactive as vueReactive, watchEffect, type WatchHandle } from 'vue';\nimport { getFunctionSignature } from '@pastweb/tools/getFunctionSignature';\nimport { createMediatorContextUtils } from '@pastweb/tools/globalContext/createMediatorContextUtils';\nimport { isHMREnabled } from '@pastweb/tools/isHMREnabled';\nimport { effect, reactive } from '@pastweb/tools/reactivity';\nimport { update } from '@pastweb/tools/update';\nimport { getContext } from '../getContext';\nimport { setContext } from '../setContext';\nimport { syncRecord } from './utils';\nimport type { ContextUtils, Extras, Mediator, MediatorFunction, Props } from './types';\n\n/**\n * Creates a tools mediator inside a Vue component.\n *\n * The mediator is created once for the component instance. Props and extras are\n * copied into tools reactive objects and kept in sync with Vue updates, while\n * mediator state is mirrored into Vue shallow reactivity for rendering.\n *\n * Vue does not need React's render-time mediator store because `setup()` runs\n * once per component instance. This hook still keeps an instance-local store so\n * mediator state persists across prop updates and Vue watchers are stopped on\n * unmount. During development HMR, a changed mediator source signature\n * reinitializes the mediator in place and refreshes the Vue state mirror.\n *\n * @typeParam T - Mediator return type.\n * @param mediator - Tools mediator factory.\n * @param props - Props passed to the mediator. `children` is ignored.\n * @param extras - Extra values passed to the mediator.\n * @returns Mediator return value with Vue-rendered state.\n *\n * @example\n * counterMediator.ts\n *\n * ```ts\n * import { reactive } from '@pastweb/tools';\n *\n * export function createCounter(props: { initial: number }) {\n *   const state = reactive({ count: props.initial });\n *\n *   return {\n *     state,\n *     increment: () => {\n *       state.count += 1;\n *     },\n *   };\n * }\n * ```\n *\n * CounterButton.vue\n *\n * ```vue\n * <script setup lang=\"ts\">\n * import { useMediator } from '@pastweb/vue';\n * import { createCounter } from './counterMediator';\n *\n * const counter = useMediator(createCounter, { initial: 0 });\n * </script>\n *\n * <template>\n *   <button @click=\"counter.increment\">\n *     {{ counter.state.count }}\n *   </button>\n * </template>\n * ```\n */\nexport const useMediator = <T>(mediator: MediatorFunction<T>, props: Props = {}, extras: Extras = {}): T => {\n  const { children: _children, ...restProps } = props;\n  const stops = new Set<WatchHandle>();\n  const hmr = isHMREnabled();\n  let isDisposed = false;\n  let activeGeneration = 0;\n  let storedMediator = mediator;\n  let storedMediatorSignature = getFunctionSignature(storedMediator);\n\n  const storedProps = reactive({ ...restProps });\n  const storedExtras = reactive({ ...extras });\n  const contextUtils: ContextUtils = {\n    getContext,\n    setContext,\n  };\n  let mediatorResult = createMediator();\n  const state: Record<string, any> = vueReactive({ ...(mediatorResult.state || {}) });\n  const output = { ...mediatorResult, state } as Mediator & Record<string, any>;\n\n  function createMediator(): Mediator & Record<string, any> {\n    return createMediatorContextUtils(\n      storedMediator,\n      storedProps,\n      storedExtras,\n      contextUtils,\n    ) as Mediator & Record<string, any>;\n  }\n\n  function syncOutput(): void {\n    Object.keys(output).forEach(key => {\n      if (key !== 'state' && !(key in mediatorResult)) delete output[key];\n    });\n\n    Object.entries(mediatorResult).forEach(([key, value]) => {\n      if (key !== 'state') output[key] = value;\n    });\n  }\n\n  function bridgeState(): void {\n    const generation = ++activeGeneration;\n\n    syncRecord(state, mediatorResult.state || {});\n\n    if (mediatorResult.state) {\n      effect(() => {\n        if (!isDisposed && generation === activeGeneration && mediatorResult.state) {\n          update(state, mediatorResult.state);\n        }\n      }, mediatorResult.state);\n    }\n  }\n\n  function reinitializeMediator(nextMediator: MediatorFunction<T>): void {\n    storedMediator = nextMediator;\n    storedMediatorSignature = getFunctionSignature(storedMediator);\n    mediatorResult = createMediator();\n\n    syncOutput();\n    bridgeState();\n  }\n\n  syncOutput();\n  bridgeState();\n\n  stops.add(watchEffect(() => {\n    const { children: _children, ...nextProps } = props;\n    syncRecord(storedProps, nextProps);\n\n    if (hmr) {\n      const nextSignature = getFunctionSignature(mediator);\n\n      if (storedMediatorSignature !== nextSignature) {\n        reinitializeMediator(mediator);\n      }\n    }\n  }));\n\n  stops.add(watchEffect(() => {\n    syncRecord(storedExtras, extras);\n  }));\n\n  onBeforeUnmount(() => {\n    isDisposed = true;\n    activeGeneration += 1;\n    stops.forEach(stop => stop());\n    stops.clear();\n  });\n\n  return output as T;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiEA,MAAa,eAAkB,UAA+B,QAAe,CAAC,GAAG,SAAiB,CAAC,MAAS;CAC1G,MAAM,EAAE,UAAU,WAAW,GAAG,cAAc;CAC9C,MAAM,wBAAQ,IAAI,IAAiB;CACnC,MAAM,MAAM,aAAa;CACzB,IAAI,aAAa;CACjB,IAAI,mBAAmB;CACvB,IAAI,iBAAiB;CACrB,IAAI,0BAA0B,qBAAqB,cAAc;CAEjE,MAAM,cAAcA,WAAS,EAAE,GAAG,UAAU,CAAC;CAC7C,MAAM,eAAeA,WAAS,EAAE,GAAG,OAAO,CAAC;CAC3C,MAAM,eAA6B;EACjC;EACA;CACF;CACA,IAAI,iBAAiB,eAAe;CACpC,MAAM,QAA6BC,gBAAY,EAAE,GAAI,eAAe,SAAS,CAAC,EAAG,CAAC;CAClF,MAAM,SAAS;EAAE,GAAG;EAAgB;CAAM;CAE1C,SAAS,iBAAiD;EACxD,OAAO,2BACL,gBACA,aACA,cACA,YACF;CACF;CAEA,SAAS,aAAmB;EAC1B,OAAO,KAAK,MAAM,CAAC,CAAC,SAAQ,QAAO;GACjC,IAAI,QAAQ,WAAW,EAAE,OAAO,iBAAiB,OAAO,OAAO;EACjE,CAAC;EAED,OAAO,QAAQ,cAAc,CAAC,CAAC,SAAS,CAAC,KAAK,WAAW;GACvD,IAAI,QAAQ,SAAS,OAAO,OAAO;EACrC,CAAC;CACH;CAEA,SAAS,cAAoB;EAC3B,MAAM,aAAa,EAAE;EAErB,WAAW,OAAO,eAAe,SAAS,CAAC,CAAC;EAE5C,IAAI,eAAe,OACjB,aAAa;GACX,IAAI,CAAC,cAAc,eAAe,oBAAoB,eAAe,OACnE,OAAO,OAAO,eAAe,KAAK;EAEtC,GAAG,eAAe,KAAK;CAE3B;CAEA,SAAS,qBAAqB,cAAyC;EACrE,iBAAiB;EACjB,0BAA0B,qBAAqB,cAAc;EAC7D,iBAAiB,eAAe;EAEhC,WAAW;EACX,YAAY;CACd;CAEA,WAAW;CACX,YAAY;CAEZ,MAAM,IAAI,kBAAkB;EAC1B,MAAM,EAAE,UAAU,WAAW,GAAG,cAAc;EAC9C,WAAW,aAAa,SAAS;EAEjC,IAAI,KAAK;GACP,MAAM,gBAAgB,qBAAqB,QAAQ;GAEnD,IAAI,4BAA4B,eAC9B,qBAAqB,QAAQ;EAEjC;CACF,CAAC,CAAC;CAEF,MAAM,IAAI,kBAAkB;EAC1B,WAAW,cAAc,MAAM;CACjC,CAAC,CAAC;CAEF,sBAAsB;EACpB,aAAa;EACb,oBAAoB;EACpB,MAAM,SAAQ,SAAQ,KAAK,CAAC;EAC5B,MAAM,MAAM;CACd,CAAC;CAED,OAAO;AACT"}

package/dist/useMediator/utils.cjs

@@ -0,0 +1,22 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let _pastweb_tools_update = require("@pastweb/tools/update");
+//#region src/useMediator/utils.ts
+/**
+* Synchronizes a mutable record with a source object.
+*
+* Keys missing from the source are removed from the target, then remaining
+* values are merged with the shared tools `update` helper.
+*
+* @param target - Mutable record to update in place.
+* @param source - Source values that should remain on the target.
+*/
+function syncRecord(target, source) {
+	Object.keys(target).forEach((key) => {
+		if (!(key in source)) delete target[key];
+	});
+	(0, _pastweb_tools_update.update)(target, source);
+}
+//#endregion
+exports.syncRecord = syncRecord;
+
+//# sourceMappingURL=utils.cjs.map

package/dist/useMediator/utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.cjs","names":[],"sources":["../../src/useMediator/utils.ts"],"sourcesContent":["import { update } from '@pastweb/tools/update';\n\n/**\n * Synchronizes a mutable record with a source object.\n *\n * Keys missing from the source are removed from the target, then remaining\n * values are merged with the shared tools `update` helper.\n *\n * @param target - Mutable record to update in place.\n * @param source - Source values that should remain on the target.\n */\nexport function syncRecord(target: Record<string, any>, source: Record<string, any>): void {\n  Object.keys(target).forEach(key => {\n    if (!(key in source)) delete target[key];\n  });\n\n  update(target, source);\n}\n"],"mappings":";;;;;;;;;;;;AAWA,SAAgB,WAAW,QAA6B,QAAmC;CACzF,OAAO,KAAK,MAAM,CAAC,CAAC,SAAQ,QAAO;EACjC,IAAI,EAAE,OAAO,SAAS,OAAO,OAAO;CACtC,CAAC;CAED,CAAA,GAAA,sBAAA,OAAA,CAAO,QAAQ,MAAM;AACvB"}

package/dist/useMediator/utils.d.cts

@@ -0,0 +1,14 @@
+//#region src/useMediator/utils.d.ts
+/**
+ * Synchronizes a mutable record with a source object.
+ *
+ * Keys missing from the source are removed from the target, then remaining
+ * values are merged with the shared tools `update` helper.
+ *
+ * @param target - Mutable record to update in place.
+ * @param source - Source values that should remain on the target.
+ */
+declare function syncRecord(target: Record<string, any>, source: Record<string, any>): void;
+//#endregion
+export { syncRecord };
+//# sourceMappingURL=utils.d.cts.map

package/dist/useMediator/utils.d.ts

@@ -0,0 +1,14 @@
+//#region src/useMediator/utils.d.ts
+/**
+ * Synchronizes a mutable record with a source object.
+ *
+ * Keys missing from the source are removed from the target, then remaining
+ * values are merged with the shared tools `update` helper.
+ *
+ * @param target - Mutable record to update in place.
+ * @param source - Source values that should remain on the target.
+ */
+declare function syncRecord(target: Record<string, any>, source: Record<string, any>): void;
+//#endregion
+export { syncRecord };
+//# sourceMappingURL=utils.d.ts.map

package/dist/useMediator/utils.js

@@ -0,0 +1,21 @@
+import { update } from "@pastweb/tools/update";
+//#region src/useMediator/utils.ts
+/**
+* Synchronizes a mutable record with a source object.
+*
+* Keys missing from the source are removed from the target, then remaining
+* values are merged with the shared tools `update` helper.
+*
+* @param target - Mutable record to update in place.
+* @param source - Source values that should remain on the target.
+*/
+function syncRecord(target, source) {
+	Object.keys(target).forEach((key) => {
+		if (!(key in source)) delete target[key];
+	});
+	update(target, source);
+}
+//#endregion
+export { syncRecord };
+
+//# sourceMappingURL=utils.js.map