@brytdesigns/web-component-parallax 1.2.19 → 3.0.0

package/dist/main/hooks/useParallax.js

@@ -1,84 +1,67 @@
-import { splitProps, createEffect, batch, onCleanup, mergeProps } from 'solid-js';
-import { createStore } from 'solid-js/store';
-import { createWithElementContext, getContextFromProvider } from '@brytdesigns/web-component-core/utils';
-import { createContext, provide, consume } from 'component-register';
-import { motionValue, scroll } from 'motion';
-
+import { createGuardedEffect, createRemoteContext, getContextFromProvider } from "@brytdesigns/web-component-core/utils";
+import { motionValue, scroll } from "motion";
+import { createStore, merge, omit, onCleanup } from "solid-js";
+import { consume, createContext, provide } from "component-register";
+//#region src/hooks/useParallax.ts
 function initializeParallaxContext(props) {
-  const [_internal, _state] = splitProps(props, ["root"]);
-  const scrollYProgress = motionValue(-1);
-  const scrollY = motionValue(-1);
-  const [info, setInfo] = createStore({
-    offset: [-1, -1],
-    scrollLength: -1
-  });
-  window.addEventListener("resize", () => {
-  });
-  createEffect(() => {
-    const pages = _state.maxPages;
-    _internal.root.style.height = `${pages * 100}vh`;
-    _internal.root.style.width = `100%`;
-    _internal.root.style.position = "relative";
-    if (!_internal.root.style.display) {
-      _internal.root.style.display = "block";
-    }
-    const remove = scroll(
-      (_, info2) => {
-        const { y } = info2;
-        scrollYProgress.set(y.progress);
-        scrollY.set(y.current);
-        batch(() => {
-          setInfo("offset", 0, y.offset?.at(0) || 0);
-          setInfo("offset", 1, y.offset?.at(1) || 0);
-          setInfo("scrollLength", y.scrollLength);
-        });
-      },
-      {
-        target: _internal.root,
-        axis: "y",
-        offset: ["start start", "end end"]
-      }
-    );
-    onCleanup(() => {
-      if (remove) {
-        remove();
-      }
-      scrollYProgress.destroy();
-      scrollY.destroy();
-    });
-  });
-  return mergeProps(_state, {
-    scrollYProgress,
-    scrollY,
-    info
-  });
+	const _state = omit(props, "root");
+	const scrollYProgress = motionValue(-1);
+	const scrollY = motionValue(-1);
+	const [info, setInfo] = createStore({
+		offset: [-1, -1],
+		scrollLength: -1
+	});
+	createGuardedEffect(() => _state.maxPages, (pages) => {
+		props.root.style.height = `${pages * 100}vh`;
+		props.root.style.width = `100%`;
+		props.root.style.position = "relative";
+		if (!props.root.style.display) props.root.style.display = "block";
+		const remove = scroll((_, info) => {
+			const { y } = info;
+			scrollYProgress.set(y.progress);
+			scrollY.set(y.current);
+			setInfo((draft) => {
+				draft.offset[0] = y.offset?.at(0) || 0;
+				draft.offset[1] = y.offset?.at(1) || 0;
+				draft.scrollLength = y.scrollLength;
+			});
+		}, {
+			target: props.root,
+			axis: "y",
+			offset: ["start start", "end end"]
+		});
+		return () => {
+			if (remove) remove();
+		};
+	});
+	onCleanup(() => {
+		scrollYProgress.destroy();
+		scrollY.destroy();
+	});
+	return merge(_state, {
+		scrollYProgress,
+		scrollY,
+		info
+	});
 }
-const ParallaxContextState = createContext(initializeParallaxContext);
-const provideParallaxContext = (initialState, element) => {
-  const props = mergeProps(initialState, { root: element });
-  return provide(ParallaxContextState, props, element);
+var ParallaxContextState = createContext(initializeParallaxContext);
+var provideParallaxContext = (initialState, element) => {
+	const props = merge(initialState, { root: element });
+	return provide(ParallaxContextState, props, element);
 };
-const useParallaxContext = (context) => {
-  return context;
+var useParallaxContext = (context) => {
+	return context;
 };
-const useParallax = (element) => {
-  const context = consume(ParallaxContextState, element);
-  if (!context) {
-    throw console.error(
-      "ParallaxContext not found! Please ensure to wrap your custom element with parallax-container element."
-    );
-  }
-  return useParallaxContext(context);
+var useParallax = (element) => {
+	const context = consume(ParallaxContextState, element);
+	if (!context) throw new Error("ParallaxContext not found! Please ensure to wrap your custom element with parallax-container element.");
+	return useParallaxContext(context);
 };
-const withParallaxElementContext = createWithElementContext(ParallaxContextState);
-const getParallaxContext = (element) => {
-  const context = getContextFromProvider(
-    ParallaxContextState,
-    element
-  );
-  return useParallaxContext(context);
+var useParallaxAt = createRemoteContext(ParallaxContextState);
+var getParallaxContext = (element) => {
+	return useParallaxContext(getContextFromProvider(ParallaxContextState, element));
 };
+//#endregion
+export { getParallaxContext, provideParallaxContext, useParallax, useParallaxAt, useParallaxContext };
 
-export { getParallaxContext, provideParallaxContext, useParallax, useParallaxContext, withParallaxElementContext };
-//# sourceMappingURL=useParallax.js.map
 //# sourceMappingURL=useParallax.js.map

package/dist/main/hooks/useParallax.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/useParallax.ts"],"names":["info"],"mappings":"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","file":"useParallax.js","sourcesContent":["import {\n  onCleanup,\n  createEffect,\n  splitProps,\n  mergeProps,\n  batch,\n} from \"solid-js\";\nimport { createStore } from \"solid-js/store\";\nimport {\n  getContextFromProvider,\n  createWithElementContext,\n} from \"@brytdesigns/web-component-core/utils\";\nimport {\n  type ICustomElement,\n  createContext,\n  provide,\n  consume,\n} from \"component-register\";\nimport { scroll, motionValue } from \"motion\";\n\ntype CreateContextOptions = {\n  root: HTMLElement & ICustomElement;\n  maxPages: number;\n};\n\ntype WalkableNode = Parameters<typeof provide>[2];\n\ntype ParallaxContext = ReturnType<typeof initializeParallaxContext>;\n\nfunction initializeParallaxContext(props: CreateContextOptions) {\n  const [_internal, _state] = splitProps(props, [\"root\"]);\n\n  const scrollYProgress = motionValue(-1);\n  const scrollY = motionValue(-1);\n  const [info, setInfo] = createStore({\n    offset: [-1, -1],\n    scrollLength: -1,\n  });\n\n  window.addEventListener(\"resize\", () => {});\n\n  createEffect(() => {\n    const pages = _state.maxPages;\n\n    _internal.root.style.height = `${pages * 100}vh`;\n    _internal.root.style.width = `100%`;\n    _internal.root.style.position = \"relative\";\n    if (!_internal.root.style.display) {\n      _internal.root.style.display = \"block\";\n    }\n\n    const remove = scroll(\n      (_, info) => {\n        const { y } = info;\n\n        scrollYProgress.set(y.progress);\n        scrollY.set(y.current);\n        batch(() => {\n          setInfo(\"offset\", 0, y.offset?.at(0) || 0);\n          setInfo(\"offset\", 1, y.offset?.at(1) || 0);\n          setInfo(\"scrollLength\", y.scrollLength);\n        });\n      },\n      {\n        target: _internal.root,\n        axis: \"y\",\n        offset: [\"start start\", \"end end\"],\n      },\n    );\n\n    onCleanup(() => {\n      if (remove) {\n        remove();\n      }\n      scrollYProgress.destroy();\n      scrollY.destroy();\n    });\n  });\n\n  return mergeProps(_state, {\n    scrollYProgress,\n    scrollY,\n    info,\n  });\n}\n\nconst ParallaxContextState = createContext(initializeParallaxContext);\n\nexport const provideParallaxContext = (\n  initialState: Omit<CreateContextOptions, \"root\">,\n  element: WalkableNode,\n): ParallaxContext => {\n  const props = mergeProps(initialState, { root: element });\n  return provide(ParallaxContextState, props, element);\n};\n\nexport const useParallaxContext = (context: ParallaxContext) => {\n  return context;\n};\n\nexport const useParallax = (element: HTMLElement & ICustomElement) => {\n  const context: ParallaxContext = consume(ParallaxContextState, element);\n\n  if (!context) {\n    throw console.error(\n      \"ParallaxContext not found! Please ensure to wrap your custom element with parallax-container element.\",\n    );\n  }\n\n  return useParallaxContext(context);\n};\n\nexport const withParallaxElementContext = createWithElementContext<\n  typeof ParallaxContextState,\n  ParallaxContext\n>(ParallaxContextState);\n\nexport const getParallaxContext = (element: Element) => {\n  const context = getContextFromProvider<ParallaxContext>(\n    ParallaxContextState,\n    element,\n  );\n  return useParallaxContext(context);\n};\n"]}
+{"version":3,"file":"useParallax.js","names":[],"sources":["../../../src/hooks/useParallax.ts"],"sourcesContent":["import {\n\tcreateGuardedEffect,\n\tcreateRemoteContext,\n\tgetContextFromProvider,\n} from \"@brytdesigns/web-component-core/utils\";\nimport {\n\tconsume,\n\tcreateContext,\n\ttype ICustomElement,\n\tprovide,\n} from \"component-register\";\nimport { motionValue, scroll } from \"motion\";\nimport { createStore, merge, omit, onCleanup } from \"solid-js\";\n\ntype CreateContextOptions = {\n\troot: HTMLElement & ICustomElement;\n\tmaxPages: number;\n};\n\ntype WalkableNode = Parameters<typeof provide>[2];\n\ntype ParallaxContext = ReturnType<typeof initializeParallaxContext>;\n\nfunction initializeParallaxContext(props: CreateContextOptions) {\n\t// `omit` returns only the rest; `root` is read straight off `props`.\n\tconst _state = omit(props, \"root\");\n\n\tconst scrollYProgress = motionValue(-1);\n\tconst scrollY = motionValue(-1);\n\tconst [info, setInfo] = createStore({\n\t\toffset: [-1, -1],\n\t\tscrollLength: -1,\n\t});\n\n\tcreateGuardedEffect(\n\t\t() => _state.maxPages,\n\t\t(pages) => {\n\t\t\tprops.root.style.height = `${pages * 100}vh`;\n\t\t\tprops.root.style.width = `100%`;\n\t\t\tprops.root.style.position = \"relative\";\n\t\t\tif (!props.root.style.display) {\n\t\t\t\tprops.root.style.display = \"block\";\n\t\t\t}\n\n\t\t\tconst remove = scroll(\n\t\t\t\t(_, info) => {\n\t\t\t\t\tconst { y } = info;\n\n\t\t\t\t\tscrollYProgress.set(y.progress);\n\t\t\t\t\tscrollY.set(y.current);\n\t\t\t\t\t// No `batch` in v2 — writes stage and flush together by default.\n\t\t\t\t\t// v2 store setters are draft-first: mutate in place, no paths.\n\t\t\t\t\tsetInfo((draft) => {\n\t\t\t\t\t\tdraft.offset[0] = y.offset?.at(0) || 0;\n\t\t\t\t\t\tdraft.offset[1] = y.offset?.at(1) || 0;\n\t\t\t\t\t\tdraft.scrollLength = y.scrollLength;\n\t\t\t\t\t});\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttarget: props.root,\n\t\t\t\t\taxis: \"y\",\n\t\t\t\t\toffset: [\"start start\", \"end end\"],\n\t\t\t\t},\n\t\t\t);\n\n\t\t\treturn () => {\n\t\t\t\tif (remove) {\n\t\t\t\t\tremove();\n\t\t\t\t}\n\t\t\t};\n\t\t},\n\t);\n\n\t// Context scope, not the effect's cleanup. These two are created here and\n\t// never recreated, but `destroy()` used to run every time `maxPages`\n\t// changed and the effect re-ran — and `destroy()` calls `clearListeners()`,\n\t// which drops every subscriber including each `parallax-sticky-layer`'s.\n\t// Layers happen to re-subscribe because their own effect also depends on\n\t// `maxPages`, so this worked by ordering rather than by design.\n\tonCleanup(() => {\n\t\tscrollYProgress.destroy();\n\t\tscrollY.destroy();\n\t});\n\n\treturn merge(_state, {\n\t\tscrollYProgress,\n\t\tscrollY,\n\t\tinfo,\n\t});\n}\n\nconst ParallaxContextState = createContext(initializeParallaxContext);\n\nexport const provideParallaxContext = (\n\tinitialState: Omit<CreateContextOptions, \"root\">,\n\telement: WalkableNode,\n): ParallaxContext => {\n\tconst props = merge(initialState, { root: element });\n\treturn provide(ParallaxContextState, props, element);\n};\n\nexport const useParallaxContext = (context: ParallaxContext) => {\n\treturn context;\n};\n\nexport const useParallax = (element: HTMLElement & ICustomElement) => {\n\tconst context: ParallaxContext = consume(ParallaxContextState, element);\n\n\tif (!context) {\n\t\tthrow new Error(\n\t\t\t\"ParallaxContext not found! Please ensure to wrap your custom element with parallax-container element.\",\n\t\t);\n\t}\n\n\treturn useParallaxContext(context);\n};\n\nexport const useParallaxAt =\n\tcreateRemoteContext<ParallaxContext>(ParallaxContextState);\n\nexport const getParallaxContext = (element: Element) => {\n\tconst context = getContextFromProvider<ParallaxContext>(\n\t\tParallaxContextState,\n\t\telement,\n\t);\n\treturn useParallaxContext(context);\n};\n"],"mappings":";;;;;AAuBA,SAAS,0BAA0B,OAA6B;CAE/D,MAAM,SAAS,KAAK,OAAO,MAAM;CAEjC,MAAM,kBAAkB,YAAY,EAAE;CACtC,MAAM,UAAU,YAAY,EAAE;CAC9B,MAAM,CAAC,MAAM,WAAW,YAAY;EACnC,QAAQ,CAAC,IAAI,EAAE;EACf,cAAc;CACf,CAAC;CAED,0BACO,OAAO,WACZ,UAAU;EACV,MAAM,KAAK,MAAM,SAAS,GAAG,QAAQ,IAAI;EACzC,MAAM,KAAK,MAAM,QAAQ;EACzB,MAAM,KAAK,MAAM,WAAW;EAC5B,IAAI,CAAC,MAAM,KAAK,MAAM,SACrB,MAAM,KAAK,MAAM,UAAU;EAG5B,MAAM,SAAS,QACb,GAAG,SAAS;GACZ,MAAM,EAAE,MAAM;GAEd,gBAAgB,IAAI,EAAE,QAAQ;GAC9B,QAAQ,IAAI,EAAE,OAAO;GAGrB,SAAS,UAAU;IAClB,MAAM,OAAO,KAAK,EAAE,QAAQ,GAAG,CAAC,KAAK;IACrC,MAAM,OAAO,KAAK,EAAE,QAAQ,GAAG,CAAC,KAAK;IACrC,MAAM,eAAe,EAAE;GACxB,CAAC;EACF,GACA;GACC,QAAQ,MAAM;GACd,MAAM;GACN,QAAQ,CAAC,eAAe,SAAS;EAClC,CACD;EAEA,aAAa;GACZ,IAAI,QACH,OAAO;EAET;CACD,CACD;CAQA,gBAAgB;EACf,gBAAgB,QAAQ;EACxB,QAAQ,QAAQ;CACjB,CAAC;CAED,OAAO,MAAM,QAAQ;EACpB;EACA;EACA;CACD,CAAC;AACF;AAEA,IAAM,uBAAuB,cAAc,yBAAyB;AAEpE,IAAa,0BACZ,cACA,YACqB;CACrB,MAAM,QAAQ,MAAM,cAAc,EAAE,MAAM,QAAQ,CAAC;CACnD,OAAO,QAAQ,sBAAsB,OAAO,OAAO;AACpD;AAEA,IAAa,sBAAsB,YAA6B;CAC/D,OAAO;AACR;AAEA,IAAa,eAAe,YAA0C;CACrE,MAAM,UAA2B,QAAQ,sBAAsB,OAAO;CAEtE,IAAI,CAAC,SACJ,MAAM,IAAI,MACT,uGACD;CAGD,OAAO,mBAAmB,OAAO;AAClC;AAEA,IAAa,gBACZ,oBAAqC,oBAAoB;AAE1D,IAAa,sBAAsB,YAAqB;CAKvD,OAAO,mBAJS,uBACf,sBACA,OAEyB,CAAO;AAClC"}

package/dist/main/hooks/useParallaxStickyLayer.js

@@ -1,124 +1,111 @@
-import { splitProps, createEffect, onCleanup, mergeProps } from 'solid-js';
-import { createContext, provide, consume } from 'component-register';
-import { motionValue, transformValue, transform, frame, animate } from 'motion';
-import { awaitAllAnimations } from '@brytdesigns/web-component-core/animation';
-import { abortablePromise } from '@brytdesigns/web-component-core/promise';
-import { createWithElementContext, getContextFromProvider } from '@brytdesigns/web-component-core/utils';
-import { useParallax } from './useParallax';
-import { normalizeTuple, isInRange } from '../utils';
-
+import { useParallax } from "./useParallax.js";
+import { isInRange, normalizeTuple } from "../utils.js";
+import { createGuardedEffect, createRemoteContext, getContextFromProvider } from "@brytdesigns/web-component-core/utils";
+import { awaitAllAnimations } from "@brytdesigns/web-component-core/animation";
+import { animate, frame, motionValue, transform, transformValue } from "motion";
+import { merge, omit, onCleanup } from "solid-js";
+import { consume, createContext, provide } from "component-register";
+import { abortablePromise } from "@brytdesigns/web-component-core/promise";
+//#region src/hooks/useParallaxStickyLayer.ts
 function initializeParallaxStickyLayerContext(props) {
-  const [_internal, _state] = splitProps(props, ["root", "start", "end"]);
-  const parallax = useParallax(_internal.root);
-  const progress = motionValue(-1);
-  const inRange = motionValue(false);
-  const belowRange = motionValue(false);
-  const aboveRange = motionValue(false);
-  const position = transformValue(
-    () => inRange.get() ? "sticky" : "absolute"
-  );
-  const transform$1 = transformValue(() => {
-    const isInRange2 = inRange.get();
-    const isBelowRange = belowRange.get();
-    const isAboveRange = aboveRange.get();
-    if (isInRange2) return "none";
-    if (isBelowRange) return `translate(0px, ${(_internal.start - 1) * 100}vh)`;
-    if (isAboveRange) return `translate(0px, ${(_internal.end - 1) * 100}vh)`;
-  });
-  const animations = motionValue([]);
-  const styles = transformValue(() => ({
-    position: position.get(),
-    transform: transform$1.get()
-  }));
-  _internal.root.style.top = "0px";
-  _internal.root.style.right = "0px";
-  _internal.root.style.bottom = "0px";
-  _internal.root.style.left = "0px";
-  _internal.root.style.height = `100dvh`;
-  _internal.root.style.overflowX = "hidden";
-  _internal.root.style.maxWidth = "100%";
-  if (window.getComputedStyle(_internal.root).display === "inline") {
-    _internal.root.style.display = "block";
-  }
-  createEffect(() => {
-    const range = [_internal.start, _internal.end];
-    const maxPages = parallax.maxPages;
-    const normalizedRange = normalizeTuple(range, maxPages);
-    const [normStart, normEnd] = normalizedRange;
-    const transformer = transform(normalizedRange, [0, 1]);
-    const unsubscribe = parallax.scrollYProgress.on("change", (value) => {
-      inRange.set(isInRange({ range: normalizedRange, value }));
-      belowRange.set(value <= normStart);
-      aboveRange.set(value >= normEnd);
-      progress.set(transformer(value));
-    });
-    return onCleanup(() => {
-      unsubscribe();
-    });
-  });
-  function updateStyles() {
-    const s = styles.get();
-    _internal.root.style.position = s.position;
-    _internal.root.style.transform = s.transform;
-  }
-  function renderStyles() {
-    frame.render(updateStyles);
-  }
-  function waitForAnimations() {
-    const a = animations.get();
-    const controller = new AbortController();
-    abortablePromise(awaitAllAnimations(a), controller.signal).then(() => {
-      animations.set([]);
-      renderStyles();
-    });
-  }
-  const unsubStyles = styles.on("change", (_) => {
-    if (progress.get() === 1 || progress.get() === 0)
-      return waitForAnimations();
-    animations.set([]);
-    renderStyles();
-  });
-  function _animate(...args) {
-    const animation = animate(...args);
-    animations.set([...animations.get(), animation]);
-    return animation;
-  }
-  onCleanup(() => {
-    unsubStyles();
-  });
-  return [progress, { animate: _animate }];
+	omit(props, "root", "start", "end");
+	const parallax = useParallax(props.root);
+	const progress = motionValue(-1);
+	const inRange = motionValue(false);
+	const belowRange = motionValue(false);
+	const aboveRange = motionValue(false);
+	const position = transformValue(() => inRange.get() ? "sticky" : "absolute");
+	const transform$1 = transformValue(() => {
+		const isInRange = inRange.get();
+		const isBelowRange = belowRange.get();
+		const isAboveRange = aboveRange.get();
+		if (isInRange) return "none";
+		if (isBelowRange) return `translate(0px, ${(props.start - 1) * 100}vh)`;
+		if (isAboveRange) return `translate(0px, ${(props.end - 1) * 100}vh)`;
+	});
+	const animations = motionValue([]);
+	const styles = transformValue(() => ({
+		position: position.get(),
+		transform: transform$1.get()
+	}));
+	props.root.style.top = "0px";
+	props.root.style.right = "0px";
+	props.root.style.bottom = "0px";
+	props.root.style.left = "0px";
+	props.root.style.height = `100dvh`;
+	props.root.style.overflowX = "hidden";
+	props.root.style.maxWidth = "100%";
+	if (window.getComputedStyle(props.root).display === "inline") props.root.style.display = "block";
+	createGuardedEffect(() => ({
+		start: props.start,
+		end: props.end,
+		maxPages: parallax.maxPages
+	}), ({ start, end, maxPages }) => {
+		const normalizedRange = normalizeTuple([start, end], maxPages);
+		const [normStart, normEnd] = normalizedRange;
+		const transformer = transform(normalizedRange, [0, 1]);
+		const unsubscribe = parallax.scrollYProgress.on("change", (value) => {
+			inRange.set(isInRange({
+				range: normalizedRange,
+				value
+			}));
+			belowRange.set(value <= normStart);
+			aboveRange.set(value >= normEnd);
+			progress.set(transformer(value));
+		});
+		return () => {
+			unsubscribe();
+		};
+	});
+	function updateStyles() {
+		const s = styles.get();
+		props.root.style.position = s.position;
+		props.root.style.transform = s.transform;
+	}
+	function renderStyles() {
+		frame.render(updateStyles);
+	}
+	function waitForAnimations() {
+		const a = animations.get();
+		const controller = new AbortController();
+		abortablePromise(awaitAllAnimations(a), controller.signal).then(() => {
+			animations.set([]);
+			renderStyles();
+		});
+	}
+	const unsubStyles = styles.on("change", (_) => {
+		if (progress.get() === 1 || progress.get() === 0) return waitForAnimations();
+		animations.set([]);
+		renderStyles();
+	});
+	function _animate(...args) {
+		const animation = animate(...args);
+		animations.set([...animations.get(), animation]);
+		return animation;
+	}
+	onCleanup(() => {
+		unsubStyles();
+	});
+	return [progress, { animate: _animate }];
 }
-const ParallaxStickyLayerContextState = createContext(
-  initializeParallaxStickyLayerContext
-);
-const provideParallaxStickyLayerContext = (initialState, element) => {
-  const props = mergeProps(initialState, { root: element });
-  return provide(ParallaxStickyLayerContextState, props, element);
+var ParallaxStickyLayerContextState = createContext(initializeParallaxStickyLayerContext);
+var provideParallaxStickyLayerContext = (initialState, element) => {
+	const props = merge(initialState, { root: element });
+	return provide(ParallaxStickyLayerContextState, props, element);
 };
-const useParallaxStickyLayerContext = (context) => {
-  return context;
+var useParallaxStickyLayerContext = (context) => {
+	return context;
 };
-const useParallaxStickyLayer = (element) => {
-  const context = consume(
-    ParallaxStickyLayerContextState,
-    element
-  );
-  if (!context) {
-    throw console.error(
-      "ParallaxContext not found! Please ensure to wrap your custom element with parallax-container element."
-    );
-  }
-  return useParallaxStickyLayerContext(context);
+var useParallaxStickyLayer = (element) => {
+	const context = consume(ParallaxStickyLayerContextState, element);
+	if (!context) throw new Error("ParallaxContext not found! Please ensure to wrap your custom element with parallax-container element.");
+	return useParallaxStickyLayerContext(context);
 };
-const withParallaxStickyLayerContext = createWithElementContext(ParallaxStickyLayerContextState);
-const getParallaxStickyLayerContext = (element) => {
-  const context = getContextFromProvider(
-    ParallaxStickyLayerContextState,
-    element
-  );
-  return useParallaxStickyLayerContext(context);
+var useParallaxStickyLayerAt = createRemoteContext(ParallaxStickyLayerContextState);
+var getParallaxStickyLayerContext = (element) => {
+	return useParallaxStickyLayerContext(getContextFromProvider(ParallaxStickyLayerContextState, element));
 };
+//#endregion
+export { getParallaxStickyLayerContext, provideParallaxStickyLayerContext, useParallaxStickyLayer, useParallaxStickyLayerAt, useParallaxStickyLayerContext };
 
-export { getParallaxStickyLayerContext, provideParallaxStickyLayerContext, useParallaxStickyLayer, useParallaxStickyLayerContext, withParallaxStickyLayerContext };
-//# sourceMappingURL=useParallaxStickyLayer.js.map
 //# sourceMappingURL=useParallaxStickyLayer.js.map

package/dist/main/hooks/useParallaxStickyLayer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/useParallaxStickyLayer.ts"],"names":["transform","isInRange","mTransform"],"mappings":"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","file":"useParallaxStickyLayer.js","sourcesContent":["import { onCleanup, createEffect, splitProps, mergeProps } from \"solid-js\";\nimport {\n\ttype ICustomElement,\n\tcreateContext,\n\tprovide,\n\tconsume,\n} from \"component-register\";\nimport {\n\tmotionValue,\n\ttransformValue,\n\ttransform as mTransform,\n\tframe,\n\tanimate,\n\ttype AnimationPlaybackControlsWithThen,\n} from \"motion\";\nimport { awaitAllAnimations } from \"@brytdesigns/web-component-core/animation\";\nimport { abortablePromise } from \"@brytdesigns/web-component-core/promise\";\nimport {\n\tgetContextFromProvider,\n\tcreateWithElementContext,\n} from \"@brytdesigns/web-component-core/utils\";\n\nimport { useParallax } from \"./useParallax\";\nimport { normalizeTuple, isInRange } from \"../utils\";\n\ntype CreateContextOptions = {\n\troot: HTMLElement & ICustomElement;\n\tstart: number;\n\tend: number;\n};\n\ntype WalkableNode = Parameters<typeof provide>[2];\n\ntype ParallaxStickyLayerContext = ReturnType<\n\ttypeof initializeParallaxStickyLayerContext\n>;\n\nfunction initializeParallaxStickyLayerContext(props: CreateContextOptions) {\n\tconst [_internal, _state] = splitProps(props, [\"root\", \"start\", \"end\"]);\n\tconst parallax = useParallax(_internal.root);\n\n\tconst progress = motionValue(-1);\n\tconst inRange = motionValue(false);\n\tconst belowRange = motionValue(false);\n\tconst aboveRange = motionValue(false);\n\n\tconst position = transformValue(() =>\n\t\tinRange.get() ? \"sticky\" : \"absolute\",\n\t);\n\tconst transform = transformValue(() => {\n\t\tconst isInRange = inRange.get();\n\t\tconst isBelowRange = belowRange.get();\n\t\tconst isAboveRange = aboveRange.get();\n\t\tif (isInRange) return \"none\";\n\t\tif (isBelowRange) return `translate(0px, ${(_internal.start - 1) * 100}vh)`;\n\t\tif (isAboveRange) return `translate(0px, ${(_internal.end - 1) * 100}vh)`;\n\t});\n\tconst animations = motionValue<AnimationPlaybackControlsWithThen[]>([]);\n\n\tconst styles = transformValue(() => ({\n\t\tposition: position.get(),\n\t\ttransform: transform.get(),\n\t}));\n\n\t_internal.root.style.top = \"0px\";\n\t_internal.root.style.right = \"0px\";\n\t_internal.root.style.bottom = \"0px\";\n\t_internal.root.style.left = \"0px\";\n\t_internal.root.style.height = `100dvh`;\n\t_internal.root.style.overflowX = \"hidden\";\n\t_internal.root.style.maxWidth = \"100%\";\n\tif (window.getComputedStyle(_internal.root).display === \"inline\") {\n\t\t_internal.root.style.display = \"block\";\n\t}\n\n\tcreateEffect(() => {\n\t\tconst range = [_internal.start, _internal.end];\n\t\tconst maxPages = parallax.maxPages;\n\t\tconst normalizedRange = normalizeTuple(range as any, maxPages);\n\t\tconst [normStart, normEnd] = normalizedRange;\n\t\tconst transformer = mTransform(normalizedRange as any, [0, 1]);\n\n\t\tconst unsubscribe = parallax.scrollYProgress.on(\"change\", (value) => {\n\t\t\tinRange.set(isInRange({ range: normalizedRange as any, value }));\n\t\t\tbelowRange.set(value <= normStart);\n\t\t\taboveRange.set(value >= normEnd);\n\t\t\tprogress.set(transformer(value));\n\t\t});\n\n\t\treturn onCleanup(() => {\n\t\t\tunsubscribe();\n\t\t});\n\t});\n\n\tfunction updateStyles() {\n\t\tconst s = styles.get();\n\t\t_internal.root.style.position = s.position;\n\t\t_internal.root.style.transform = s.transform;\n\t}\n\n\tfunction renderStyles() {\n\t\tframe.render(updateStyles);\n\t}\n\n\tfunction waitForAnimations() {\n\t\tconst a = animations.get();\n\t\tconst controller = new AbortController();\n\t\tabortablePromise(awaitAllAnimations(a), controller.signal).then(() => {\n\t\t\tanimations.set([]);\n\t\t\trenderStyles();\n\t\t});\n\t}\n\n\tconst unsubStyles = styles.on(\"change\", (_) => {\n\t\tif (progress.get() === 1 || progress.get() === 0)\n\t\t\treturn waitForAnimations();\n\t\tanimations.set([]);\n\t\trenderStyles();\n\t});\n\n\tfunction _animate(...args: Parameters<typeof animate>) {\n\t\tconst animation = animate(...args);\n\t\tanimations.set([...animations.get(), animation]);\n\t\treturn animation;\n\t}\n\n\tonCleanup(() => {\n\t\tunsubStyles();\n\t});\n\n\treturn [progress, { animate: _animate }] as const;\n}\n\nconst ParallaxStickyLayerContextState = createContext(\n\tinitializeParallaxStickyLayerContext,\n);\n\nexport const provideParallaxStickyLayerContext = (\n\tinitialState: Omit<CreateContextOptions, \"root\">,\n\telement: WalkableNode,\n): ParallaxStickyLayerContext => {\n\tconst props = mergeProps(initialState, { root: element });\n\treturn provide(ParallaxStickyLayerContextState, props, element);\n};\n\nexport const useParallaxStickyLayerContext = (\n\tcontext: ParallaxStickyLayerContext,\n) => {\n\treturn context;\n};\n\nexport const useParallaxStickyLayer = (\n\telement: HTMLElement & ICustomElement,\n) => {\n\tconst context: ParallaxStickyLayerContext = consume(\n\t\tParallaxStickyLayerContextState,\n\t\telement,\n\t);\n\n\tif (!context) {\n\t\tthrow console.error(\n\t\t\t\"ParallaxContext not found! Please ensure to wrap your custom element with parallax-container element.\",\n\t\t);\n\t}\n\n\treturn useParallaxStickyLayerContext(context);\n};\n\nexport const withParallaxStickyLayerContext = createWithElementContext<\n\ttypeof ParallaxStickyLayerContextState,\n\tParallaxStickyLayerContext\n>(ParallaxStickyLayerContextState);\n\nexport const getParallaxStickyLayerContext = (element: Element) => {\n\tconst context = getContextFromProvider<ParallaxStickyLayerContext>(\n\t\tParallaxStickyLayerContextState,\n\t\telement,\n\t);\n\treturn useParallaxStickyLayerContext(context);\n};\n"]}
+{"version":3,"file":"useParallaxStickyLayer.js","names":[],"sources":["../../../src/hooks/useParallaxStickyLayer.ts"],"sourcesContent":["import { awaitAllAnimations } from \"@brytdesigns/web-component-core/animation\";\nimport { abortablePromise } from \"@brytdesigns/web-component-core/promise\";\nimport {\n\tcreateGuardedEffect,\n\tcreateRemoteContext,\n\tgetContextFromProvider,\n} from \"@brytdesigns/web-component-core/utils\";\nimport {\n\tconsume,\n\tcreateContext,\n\ttype ICustomElement,\n\tprovide,\n} from \"component-register\";\nimport {\n\ttype AnimationPlaybackControlsWithThen,\n\tanimate,\n\tframe,\n\tmotionValue,\n\ttransform as mTransform,\n\ttransformValue,\n} from \"motion\";\nimport { merge, omit, onCleanup } from \"solid-js\";\nimport { isInRange, normalizeTuple } from \"../utils\";\nimport { useParallax } from \"./useParallax\";\n\ntype CreateContextOptions = {\n\troot: HTMLElement & ICustomElement;\n\tstart: number;\n\tend: number;\n};\n\ntype WalkableNode = Parameters<typeof provide>[2];\n\ntype ParallaxStickyLayerContext = ReturnType<\n\ttypeof initializeParallaxStickyLayerContext\n>;\n\nfunction initializeParallaxStickyLayerContext(props: CreateContextOptions) {\n\t// `omit` returns only the rest; picked keys come straight off `props`.\n\tconst _state = omit(props, \"root\", \"start\", \"end\");\n\tconst parallax = useParallax(props.root);\n\n\tconst progress = motionValue(-1);\n\tconst inRange = motionValue(false);\n\tconst belowRange = motionValue(false);\n\tconst aboveRange = motionValue(false);\n\n\tconst position = transformValue(() =>\n\t\tinRange.get() ? \"sticky\" : \"absolute\",\n\t);\n\tconst transform = transformValue(() => {\n\t\tconst isInRange = inRange.get();\n\t\tconst isBelowRange = belowRange.get();\n\t\tconst isAboveRange = aboveRange.get();\n\t\tif (isInRange) return \"none\";\n\t\tif (isBelowRange) return `translate(0px, ${(props.start - 1) * 100}vh)`;\n\t\tif (isAboveRange) return `translate(0px, ${(props.end - 1) * 100}vh)`;\n\t});\n\tconst animations = motionValue<AnimationPlaybackControlsWithThen[]>([]);\n\n\tconst styles = transformValue(() => ({\n\t\tposition: position.get(),\n\t\ttransform: transform.get(),\n\t}));\n\n\tprops.root.style.top = \"0px\";\n\tprops.root.style.right = \"0px\";\n\tprops.root.style.bottom = \"0px\";\n\tprops.root.style.left = \"0px\";\n\tprops.root.style.height = `100dvh`;\n\tprops.root.style.overflowX = \"hidden\";\n\tprops.root.style.maxWidth = \"100%\";\n\tif (window.getComputedStyle(props.root).display === \"inline\") {\n\t\tprops.root.style.display = \"block\";\n\t}\n\n\tcreateGuardedEffect(\n\t\t() => ({ start: props.start, end: props.end, maxPages: parallax.maxPages }),\n\t\t({ start, end, maxPages }) => {\n\t\t\tconst range = [start, end];\n\t\t\tconst normalizedRange = normalizeTuple(range as any, maxPages);\n\t\t\tconst [normStart, normEnd] = normalizedRange;\n\t\t\tconst transformer = mTransform(normalizedRange as any, [0, 1]);\n\n\t\t\tconst unsubscribe = parallax.scrollYProgress.on(\"change\", (value) => {\n\t\t\t\tinRange.set(isInRange({ range: normalizedRange as any, value }));\n\t\t\t\tbelowRange.set(value <= normStart);\n\t\t\t\taboveRange.set(value >= normEnd);\n\t\t\t\tprogress.set(transformer(value));\n\t\t\t});\n\n\t\t\treturn () => {\n\t\t\t\tunsubscribe();\n\t\t\t};\n\t\t},\n\t);\n\n\tfunction updateStyles() {\n\t\tconst s = styles.get();\n\t\tprops.root.style.position = s.position;\n\t\tprops.root.style.transform = s.transform;\n\t}\n\n\tfunction renderStyles() {\n\t\tframe.render(updateStyles);\n\t}\n\n\tfunction waitForAnimations() {\n\t\tconst a = animations.get();\n\t\tconst controller = new AbortController();\n\t\tabortablePromise(awaitAllAnimations(a), controller.signal).then(() => {\n\t\t\tanimations.set([]);\n\t\t\trenderStyles();\n\t\t});\n\t}\n\n\tconst unsubStyles = styles.on(\"change\", (_) => {\n\t\tif (progress.get() === 1 || progress.get() === 0)\n\t\t\treturn waitForAnimations();\n\t\tanimations.set([]);\n\t\trenderStyles();\n\t});\n\n\tfunction _animate(...args: Parameters<typeof animate>) {\n\t\tconst animation = animate(...args);\n\t\tanimations.set([...animations.get(), animation]);\n\t\treturn animation;\n\t}\n\n\tonCleanup(() => {\n\t\tunsubStyles();\n\t});\n\n\treturn [progress, { animate: _animate }] as const;\n}\n\nconst ParallaxStickyLayerContextState = createContext(\n\tinitializeParallaxStickyLayerContext,\n);\n\nexport const provideParallaxStickyLayerContext = (\n\tinitialState: Omit<CreateContextOptions, \"root\">,\n\telement: WalkableNode,\n): ParallaxStickyLayerContext => {\n\tconst props = merge(initialState, { root: element });\n\treturn provide(ParallaxStickyLayerContextState, props, element);\n};\n\nexport const useParallaxStickyLayerContext = (\n\tcontext: ParallaxStickyLayerContext,\n) => {\n\treturn context;\n};\n\nexport const useParallaxStickyLayer = (\n\telement: HTMLElement & ICustomElement,\n) => {\n\tconst context: ParallaxStickyLayerContext = consume(\n\t\tParallaxStickyLayerContextState,\n\t\telement,\n\t);\n\n\tif (!context) {\n\t\tthrow new Error(\n\t\t\t\"ParallaxContext not found! Please ensure to wrap your custom element with parallax-container element.\",\n\t\t);\n\t}\n\n\treturn useParallaxStickyLayerContext(context);\n};\n\nexport const useParallaxStickyLayerAt =\n\tcreateRemoteContext<ParallaxStickyLayerContext>(\n\t\tParallaxStickyLayerContextState,\n\t);\n\nexport const getParallaxStickyLayerContext = (element: Element) => {\n\tconst context = getContextFromProvider<ParallaxStickyLayerContext>(\n\t\tParallaxStickyLayerContextState,\n\t\telement,\n\t);\n\treturn useParallaxStickyLayerContext(context);\n};\n"],"mappings":";;;;;;;;;AAqCA,SAAS,qCAAqC,OAA6B;CAE3D,KAAK,OAAO,QAAQ,SAAS,KAAK;CACjD,MAAM,WAAW,YAAY,MAAM,IAAI;CAEvC,MAAM,WAAW,YAAY,EAAE;CAC/B,MAAM,UAAU,YAAY,KAAK;CACjC,MAAM,aAAa,YAAY,KAAK;CACpC,MAAM,aAAa,YAAY,KAAK;CAEpC,MAAM,WAAW,qBAChB,QAAQ,IAAI,IAAI,WAAW,UAC5B;CACA,MAAM,cAAY,qBAAqB;EACtC,MAAM,YAAY,QAAQ,IAAI;EAC9B,MAAM,eAAe,WAAW,IAAI;EACpC,MAAM,eAAe,WAAW,IAAI;EACpC,IAAI,WAAW,OAAO;EACtB,IAAI,cAAc,OAAO,mBAAmB,MAAM,QAAQ,KAAK,IAAI;EACnE,IAAI,cAAc,OAAO,mBAAmB,MAAM,MAAM,KAAK,IAAI;CAClE,CAAC;CACD,MAAM,aAAa,YAAiD,CAAC,CAAC;CAEtE,MAAM,SAAS,sBAAsB;EACpC,UAAU,SAAS,IAAI;EACvB,WAAW,YAAU,IAAI;CAC1B,EAAE;CAEF,MAAM,KAAK,MAAM,MAAM;CACvB,MAAM,KAAK,MAAM,QAAQ;CACzB,MAAM,KAAK,MAAM,SAAS;CAC1B,MAAM,KAAK,MAAM,OAAO;CACxB,MAAM,KAAK,MAAM,SAAS;CAC1B,MAAM,KAAK,MAAM,YAAY;CAC7B,MAAM,KAAK,MAAM,WAAW;CAC5B,IAAI,OAAO,iBAAiB,MAAM,IAAI,CAAC,CAAC,YAAY,UACnD,MAAM,KAAK,MAAM,UAAU;CAG5B,2BACQ;EAAE,OAAO,MAAM;EAAO,KAAK,MAAM;EAAK,UAAU,SAAS;CAAS,KACxE,EAAE,OAAO,KAAK,eAAe;EAE7B,MAAM,kBAAkB,eAAe,CADxB,OAAO,GACiB,GAAc,QAAQ;EAC7D,MAAM,CAAC,WAAW,WAAW;EAC7B,MAAM,cAAc,UAAW,iBAAwB,CAAC,GAAG,CAAC,CAAC;EAE7D,MAAM,cAAc,SAAS,gBAAgB,GAAG,WAAW,UAAU;GACpE,QAAQ,IAAI,UAAU;IAAE,OAAO;IAAwB;GAAM,CAAC,CAAC;GAC/D,WAAW,IAAI,SAAS,SAAS;GACjC,WAAW,IAAI,SAAS,OAAO;GAC/B,SAAS,IAAI,YAAY,KAAK,CAAC;EAChC,CAAC;EAED,aAAa;GACZ,YAAY;EACb;CACD,CACD;CAEA,SAAS,eAAe;EACvB,MAAM,IAAI,OAAO,IAAI;EACrB,MAAM,KAAK,MAAM,WAAW,EAAE;EAC9B,MAAM,KAAK,MAAM,YAAY,EAAE;CAChC;CAEA,SAAS,eAAe;EACvB,MAAM,OAAO,YAAY;CAC1B;CAEA,SAAS,oBAAoB;EAC5B,MAAM,IAAI,WAAW,IAAI;EACzB,MAAM,aAAa,IAAI,gBAAgB;EACvC,iBAAiB,mBAAmB,CAAC,GAAG,WAAW,MAAM,CAAC,CAAC,WAAW;GACrE,WAAW,IAAI,CAAC,CAAC;GACjB,aAAa;EACd,CAAC;CACF;CAEA,MAAM,cAAc,OAAO,GAAG,WAAW,MAAM;EAC9C,IAAI,SAAS,IAAI,MAAM,KAAK,SAAS,IAAI,MAAM,GAC9C,OAAO,kBAAkB;EAC1B,WAAW,IAAI,CAAC,CAAC;EACjB,aAAa;CACd,CAAC;CAED,SAAS,SAAS,GAAG,MAAkC;EACtD,MAAM,YAAY,QAAQ,GAAG,IAAI;EACjC,WAAW,IAAI,CAAC,GAAG,WAAW,IAAI,GAAG,SAAS,CAAC;EAC/C,OAAO;CACR;CAEA,gBAAgB;EACf,YAAY;CACb,CAAC;CAED,OAAO,CAAC,UAAU,EAAE,SAAS,SAAS,CAAC;AACxC;AAEA,IAAM,kCAAkC,cACvC,oCACD;AAEA,IAAa,qCACZ,cACA,YACgC;CAChC,MAAM,QAAQ,MAAM,cAAc,EAAE,MAAM,QAAQ,CAAC;CACnD,OAAO,QAAQ,iCAAiC,OAAO,OAAO;AAC/D;AAEA,IAAa,iCACZ,YACI;CACJ,OAAO;AACR;AAEA,IAAa,0BACZ,YACI;CACJ,MAAM,UAAsC,QAC3C,iCACA,OACD;CAEA,IAAI,CAAC,SACJ,MAAM,IAAI,MACT,uGACD;CAGD,OAAO,8BAA8B,OAAO;AAC7C;AAEA,IAAa,2BACZ,oBACC,+BACD;AAED,IAAa,iCAAiC,YAAqB;CAKlE,OAAO,8BAJS,uBACf,iCACA,OAEoC,CAAO;AAC7C"}

package/dist/main/index.d.ts

@@ -3,23 +3,17 @@
 import { ICustomElement } from 'component-register';
 import { AnimationPlaybackControlsWithThen } from 'motion';
 
+/**
+ * `component-register` types `options.element` as a bare `ICustomElement`, but
+ * at runtime it is always also an `HTMLElement`. Every component in this repo
+ * needs the DOM half.
+ */
 export type CorrectComponentOptions = {
 	element: HTMLElement & ICustomElement;
 };
 export type CorrectComponentType<T> = (props: T, options: CorrectComponentOptions) => unknown;
-export type Props = {
-	maxPages: number;
-};
-declare const Name = "parallax-container";
-declare const Component: CorrectComponentType<Props>;
-type Props$1 = {
-	start: number;
-	end: number;
-};
-declare const Name$1 = "parallax-sticky-layer";
-declare const Component$1: CorrectComponentType<Props$1>;
 export type AnimatableArray = Array<string | number> | null;
-type Props$2 = {
+export type Props = {
 	breakpoints: string[];
 	range: number[] | number[][];
 	y: AnimatableArray | AnimatableArray[];
@@ -30,7 +24,7 @@ type Props$2 = {
 	backgroundColor: AnimatableArray | AnimatableArray[];
 	borderRadius: AnimatableArray | AnimatableArray[];
 };
-declare const Name$2 = "parallax-animation";
+declare const Name = "parallax-animation";
 declare const PROPS: {
 	breakpoints: string[];
 	range: number[];
@@ -43,6 +37,17 @@ declare const PROPS: {
 	backgroundColor: null;
 	borderRadius: null;
 };
+declare const Component: CorrectComponentType<Props>;
+type Props$1 = {
+	maxPages: number;
+};
+declare const Name$1 = "parallax-container";
+declare const Component$1: CorrectComponentType<Props$1>;
+type Props$2 = {
+	start: number;
+	end: number;
+};
+declare const Name$2 = "parallax-sticky-layer";
 declare const Component$2: CorrectComponentType<Props$2>;
 export declare const useParallax: (element: HTMLElement & ICustomElement) => {
 	maxPages: number;
@@ -53,7 +58,7 @@ export declare const useParallax: (element: HTMLElement & ICustomElement) => {
 		scrollLength: number;
 	};
 };
-export declare const withParallaxElementContext: <D extends unknown>(target: string | import("solid-js").Accessor<string> | import("solid-js").Accessor<() => Element>, dependencies: import("solid-js").Accessor<D> | undefined, cb: (context: {
+export declare const useParallaxAt: (target: () => string | undefined, host: HTMLElement) => import("solid-js").SourceAccessor<{
 	maxPages: number;
 	scrollYProgress: import("motion").MotionValue<number>;
 	scrollY: import("motion").MotionValue<number>;
@@ -61,7 +66,7 @@ export declare const withParallaxElementContext: <D extends unknown>(target: str
 		offset: number[];
 		scrollLength: number;
 	};
-}, dependencies: D) => void | (() => void)) => void;
+}>;
 export declare const getParallaxContext: (element: Element) => {
 	maxPages: number;
 	scrollYProgress: import("motion").MotionValue<number>;
@@ -77,24 +82,24 @@ export declare const useParallaxStickyLayer: (element: HTMLElement & ICustomElem
 		readonly animate: (object: {} | {}[], keyframes: import("motion").ObjectTarget<{}>, options?: import("motion").AnimationOptions | undefined) => AnimationPlaybackControlsWithThen;
 	}
 ];
-export declare const withParallaxStickyLayerContext: <D extends unknown>(target: string | import("solid-js").Accessor<string> | import("solid-js").Accessor<() => Element>, dependencies: import("solid-js").Accessor<D> | undefined, cb: (context: readonly [
+export declare const useParallaxStickyLayerAt: (target: () => string | undefined, host: HTMLElement) => import("solid-js").SourceAccessor<readonly [
 	import("motion").MotionValue<number>,
 	{
 		readonly animate: (object: {} | {}[], keyframes: import("motion").ObjectTarget<{}>, options?: import("motion").AnimationOptions | undefined) => AnimationPlaybackControlsWithThen;
 	}
-], dependencies: D) => void | (() => void)) => void;
+]>;
 export declare const getParallaxStickyLayerContext: (element: Element) => readonly [
 	import("motion").MotionValue<number>,
 	{
 		readonly animate: (object: {} | {}[], keyframes: import("motion").ObjectTarget<{}>, options?: import("motion").AnimationOptions | undefined) => AnimationPlaybackControlsWithThen;
 	}
 ];
-export type ParallaxContainerProps = Props;
-export type ParallaxStickyLayerProps = Props$1;
-export type ParallaxAnimationProps = ParallaxAnimation.Props;
+export type ParallaxContainerProps = Props$1;
+export type ParallaxStickyLayerProps = ParallaxStickyLayer.Props;
+export type ParallaxAnimationProps = Props;
 
-declare namespace ParallaxAnimation {
-	export { Component$2 as Component, Name$2 as Name, PROPS, Props$2 as Props };
+declare namespace ParallaxStickyLayer {
+	export { Component$2 as Component, Name$2 as Name, Props$2 as Props };
 }
 
 export {};

package/dist/main/index.js

@@ -1,26 +1,19 @@
-import { customShadowlessElement, correctElementType } from '@brytdesigns/web-component-core/utils';
-import { ParallaxContainer, ParallaxStickyLayer, ParallaxAnimation } from './components/index.js';
-export { getParallaxContext, getParallaxStickyLayerContext, useParallax, useParallaxStickyLayer, withParallaxElementContext, withParallaxStickyLayerContext } from './hooks/index.js';
+import { getParallaxContext, useParallax, useParallaxAt } from "./hooks/useParallax.js";
+import { getParallaxStickyLayerContext, useParallaxStickyLayer, useParallaxStickyLayerAt } from "./hooks/useParallaxStickyLayer.js";
+import "./hooks/index.js";
+import { Component, Name, PROPS } from "./components/parallax-animation/index.js";
+import { Component as Component$1, Name as Name$1 } from "./components/parallax-container/index.js";
+import { Component as Component$2, Name as Name$2 } from "./components/parallax-sticky-layer/index.js";
+import "./components/index.js";
+import { customShadowlessElement } from "@brytdesigns/web-component-core/utils";
+//#region src/index.ts
+customShadowlessElement(Name$1, { maxPages: 2 }, Component$1);
+customShadowlessElement(Name$2, {
+	start: 1,
+	end: 2
+}, Component$2);
+customShadowlessElement(Name, PROPS, Component);
+//#endregion
+export { getParallaxContext, getParallaxStickyLayerContext, useParallax, useParallaxAt, useParallaxStickyLayer, useParallaxStickyLayerAt };
 
-customShadowlessElement(
-  ParallaxContainer.Name,
-  {
-    maxPages: 2
-  },
-  correctElementType(ParallaxContainer.Component)
-);
-customShadowlessElement(
-  ParallaxStickyLayer.Name,
-  {
-    start: 1,
-    end: 2
-  },
-  correctElementType(ParallaxStickyLayer.Component)
-);
-customShadowlessElement(
-  ParallaxAnimation.Name,
-  ParallaxAnimation.PROPS,
-  correctElementType(ParallaxAnimation.Component)
-);
-//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/main/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"names":[],"mappings":";;;;AAeA,uBAAA;AAAA,EACE,iBAAkB,CAAA,IAAA;AAAA,EAClB;AAAA,IACE,QAAU,EAAA;AAAA,GACZ;AAAA,EACA,kBAAA,CAAmB,kBAAkB,SAAS;AAChD,CAAA;AAEA,uBAAA;AAAA,EACE,mBAAoB,CAAA,IAAA;AAAA,EACpB;AAAA,IACE,KAAO,EAAA,CAAA;AAAA,IACP,GAAK,EAAA;AAAA,GACP;AAAA,EACA,kBAAA,CAAmB,oBAAoB,SAAS;AAClD,CAAA;AAEA,uBAAA;AAAA,EACE,iBAAkB,CAAA,IAAA;AAAA,EAClB,iBAAkB,CAAA,KAAA;AAAA,EAClB,kBAAA,CAAmB,kBAAkB,SAAS;AAChD,CAAA","file":"index.js","sourcesContent":["import {\n  customShadowlessElement,\n  correctElementType,\n} from \"@brytdesigns/web-component-core/utils\";\n\nimport {\n  ParallaxContainer,\n  ParallaxStickyLayer,\n  ParallaxAnimation,\n} from \"./components/index.js\";\n\nexport type ParallaxContainerProps = ParallaxContainer.Props;\nexport type ParallaxStickyLayerProps = ParallaxStickyLayer.Props;\nexport type ParallaxAnimationProps = ParallaxAnimation.Props;\n\ncustomShadowlessElement(\n  ParallaxContainer.Name,\n  {\n    maxPages: 2,\n  },\n  correctElementType(ParallaxContainer.Component),\n);\n\ncustomShadowlessElement(\n  ParallaxStickyLayer.Name,\n  {\n    start: 1,\n    end: 2,\n  },\n  correctElementType(ParallaxStickyLayer.Component),\n);\n\ncustomShadowlessElement(\n  ParallaxAnimation.Name,\n  ParallaxAnimation.PROPS,\n  correctElementType(ParallaxAnimation.Component),\n);\n\nexport {\n  useParallax,\n  getParallaxContext,\n  useParallaxStickyLayer,\n  getParallaxStickyLayerContext,\n  withParallaxElementContext,\n  withParallaxStickyLayerContext,\n} from \"./hooks/index.js\";\n"]}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/index.ts"],"sourcesContent":["import { customShadowlessElement } from \"@brytdesigns/web-component-core/utils\";\n\nimport {\n\tParallaxAnimation,\n\tParallaxContainer,\n\tParallaxStickyLayer,\n} from \"./components/index.js\";\n\nexport type ParallaxContainerProps = ParallaxContainer.Props;\nexport type ParallaxStickyLayerProps = ParallaxStickyLayer.Props;\nexport type ParallaxAnimationProps = ParallaxAnimation.Props;\n\ncustomShadowlessElement(\n\tParallaxContainer.Name,\n\t{\n\t\tmaxPages: 2,\n\t},\n\tParallaxContainer.Component,\n);\n\ncustomShadowlessElement(\n\tParallaxStickyLayer.Name,\n\t{\n\t\tstart: 1,\n\t\tend: 2,\n\t},\n\tParallaxStickyLayer.Component,\n);\n\ncustomShadowlessElement(\n\tParallaxAnimation.Name,\n\tParallaxAnimation.PROPS,\n\tParallaxAnimation.Component,\n);\n\nexport {\n\tgetParallaxContext,\n\tgetParallaxStickyLayerContext,\n\tuseParallax,\n\tuseParallaxAt,\n\tuseParallaxStickyLayer,\n\tuseParallaxStickyLayerAt,\n} from \"./hooks/index.js\";\n"],"mappings":";;;;;;;;;AAYA,wBACC,QACA,EACC,UAAU,EACX,GACA,WACD;AAEA,wBACC,QACA;CACC,OAAO;CACP,KAAK;AACN,GACA,WACD;AAEA,wBACC,MACA,OACA,SACD"}