@sticky-aside/core 0.0.0-stage → 1.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 maprox
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,38 @@
-# Temporary Holding Version
+# @sticky-aside/core
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A short panel stays pinned to the top. A tall panel scrolls with the page, pins to the bottom while you scroll down, and pins to the top while you scroll up.
+
+```bash
+npm install @sticky-aside/core
+```
+
+```html
+<aside class="column">
+  <div class="panel">…</div>
+</aside>
+```
+
+```ts
+import { createStickyAside } from '@sticky-aside/core'
+import '@sticky-aside/core/offsets.css'
+
+const wrapper = document.querySelector('.column')
+const content = document.querySelector('.panel')
+
+const aside = createStickyAside({ wrapper, content })
+```
+
+`wrapper` is the column that stays in the layout. `content` is the panel that moves and pins. The core sets `position: relative` and `height: 100%` on the wrapper.
+
+`offsets.css` defines `sticky-aside-top` and `sticky-aside-bottom`. Set the gap with CSS variables on an ancestor (default `0px`):
+
+```css
+.column {
+  --sticky-aside-top: 40px;
+  --sticky-aside-bottom: 16px;
+}
+```
+
+Or skip that stylesheet and pass your own `topClass` / `bottomClass` to `createStickyAside` / `setClasses`.
+
+Vue, React, and Svelte adapters are `@sticky-aside/vue`, `@sticky-aside/react`, and `@sticky-aside/svelte`. The full guide is in the [repository README](https://github.com/maprox/sticky-aside#readme).

package/dist/headless.d.ts

@@ -0,0 +1,10 @@
+import { _ as StickyFrame, b as StickyReason, c as StickyAsideView, d as StickyPaintFlow, f as StickyPaintLocked, g as Box, h as StickyReading, i as StickyAsideHandlers, l as StickyPaint, m as StickyPaintTop, o as StickyAsidePresenterOptions, p as StickyPaintOff, r as StickyAsideController, t as ScrollMetrics, u as StickyPaintBottom, v as StickyMode, y as StickyModel } from "./types.js";
+//#region src/presenter/presenter.d.ts
+export declare function createStickyAsidePresenter(view: StickyAsideView, options: StickyAsidePresenterOptions): StickyAsideController;
+//#endregion
+//#region src/model/step.d.ts
+export declare function getInitialStickyModel(): StickyModel;
+export declare function getNewStickyModel(model: StickyModel, frame: StickyFrame): StickyModel;
+//#endregion
+export type { Box, ScrollMetrics, StickyAsideHandlers, StickyAsideView, StickyFrame, StickyMode, StickyModel, StickyPaint, StickyPaintBottom, StickyPaintFlow, StickyPaintLocked, StickyPaintOff, StickyPaintTop, StickyReading, StickyReason };
+//# sourceMappingURL=headless.d.ts.map

package/dist/headless.js

@@ -0,0 +1,3 @@
+import { n as getInitialStickyModel, r as getNewStickyModel, t as createStickyAsidePresenter } from "./presenter.js";
+
+export { createStickyAsidePresenter, getInitialStickyModel, getNewStickyModel };

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+import { a as StickyAsideOptions, g as Box, n as StickyAsideClasses, o as StickyAsidePresenterOptions, r as StickyAsideController, s as StickyAsideState, t as ScrollMetrics } from "./types.js";
+//#region src/view/constants.d.ts
+export declare const OFFSET_CLASS: {
+  readonly top: "sticky-aside-top";
+  readonly bottom: "sticky-aside-bottom";
+};
+//#endregion
+//#region src/create-sticky-aside.d.ts
+export declare function createStickyAside(options: StickyAsideOptions): StickyAsideController;
+//#endregion
+export type { Box, ScrollMetrics, StickyAsideClasses, StickyAsideController, StickyAsideOptions, StickyAsidePresenterOptions, StickyAsideState };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -0,0 +1,164 @@
+import { t as createStickyAsidePresenter } from "./presenter.js";
+
+//#region src/view/constants.ts
+const OFFSET_CLASS = {
+	top: "sticky-aside-top",
+	bottom: "sticky-aside-bottom"
+};
+const DATASET = {
+	measure: "stickyMeasure",
+	aside: "stickyAside"
+};
+const ASIDE_STATE = {
+	off: "off",
+	flow: "flow",
+	bottom: "bottom",
+	locked: "locked",
+	top: "top"
+};
+const MEASURE_STYLE = {
+	position: "fixed",
+	visibility: "hidden",
+	pointerEvents: "none",
+	left: "0",
+	width: "0"
+};
+const WRAPPER_STYLE = {
+	position: "relative",
+	height: "100%"
+};
+
+//#endregion
+//#region src/view/browser-view.ts
+function createBrowserView(options) {
+	const measure = document.createElement("div");
+	measure.dataset[DATASET.measure] = "";
+	Object.assign(measure.style, MEASURE_STYLE);
+	options.wrapper.append(measure);
+	Object.assign(options.wrapper.style, WRAPPER_STYLE);
+	let resizeObserver;
+	let onScroll;
+	let onResize;
+	let topClass = options.topClass ?? OFFSET_CLASS.top;
+	let bottomClass = options.bottomClass ?? OFFSET_CLASS.bottom;
+	let contentClass = options.contentClass ?? "";
+	let appliedMeasure = [];
+	let appliedContent = [];
+	function getClassTokens(value) {
+		return value.split(/\s+/).filter((token) => token.length > 0);
+	}
+	function syncClassTokens(element, previous, next) {
+		for (const token of previous) if (!next.includes(token)) element.classList.remove(token);
+		for (const token of next) element.classList.add(token);
+		return next;
+	}
+	function clearContentStyle() {
+		options.content.style.position = "";
+		options.content.style.top = "";
+		options.content.style.bottom = "";
+		options.content.style.width = "";
+	}
+	function getBox(element) {
+		if (options.readRect) return options.readRect(element);
+		const rect = element.getBoundingClientRect();
+		return {
+			top: rect.top,
+			bottom: rect.bottom,
+			width: rect.width,
+			height: rect.height
+		};
+	}
+	function getMetrics() {
+		if (options.getScrollMetrics) return options.getScrollMetrics();
+		return {
+			scrollY: window.scrollY,
+			viewportHeight: window.innerHeight,
+			documentHeight: document.body.clientHeight
+		};
+	}
+	function read() {
+		return {
+			metrics: getMetrics(),
+			wrapper: getBox(options.wrapper),
+			content: getBox(options.content),
+			measure: getBox(measure)
+		};
+	}
+	function setClasses(next) {
+		if (next.topClass !== void 0) topClass = next.topClass;
+		if (next.bottomClass !== void 0) bottomClass = next.bottomClass;
+		if (next.contentClass !== void 0) contentClass = next.contentClass;
+	}
+	function paintMeasure() {
+		const contentBox = getBox(options.content);
+		measure.style.top = "";
+		measure.style.bottom = "";
+		measure.style.maxHeight = `${contentBox.height}px`;
+		appliedMeasure = syncClassTokens(measure, appliedMeasure, [...getClassTokens(topClass), ...getClassTokens(bottomClass)]);
+	}
+	function paint(next) {
+		clearContentStyle();
+		options.content.dataset[DATASET.aside] = ASIDE_STATE[next.state];
+		const nextTokens = getClassTokens(contentClass);
+		if (next.state === "off") options.content.style.position = "relative";
+		else if (next.state === "flow") {
+			options.content.style.position = "relative";
+			options.content.style.top = `${next.top}px`;
+		} else if (next.state === "bottom") {
+			options.content.style.position = "fixed";
+			options.content.style.width = `${next.width}px`;
+			nextTokens.push(...getClassTokens(bottomClass));
+		} else if (next.state === "locked") {
+			options.content.style.position = "fixed";
+			options.content.style.width = `${next.width}px`;
+			options.content.style.top = `${next.top}px`;
+		} else {
+			options.content.style.position = "fixed";
+			options.content.style.width = `${next.width}px`;
+			nextTokens.push(...getClassTokens(topClass));
+		}
+		appliedContent = syncClassTokens(options.content, appliedContent, nextTokens);
+	}
+	function unsubscribe() {
+		resizeObserver?.disconnect();
+		resizeObserver = void 0;
+		if (onScroll) window.removeEventListener("scroll", onScroll);
+		if (onResize) window.removeEventListener("resize", onResize);
+		onScroll = void 0;
+		onResize = void 0;
+	}
+	function subscribe(handlers) {
+		onScroll = () => handlers.scroll();
+		onResize = () => handlers.resize();
+		resizeObserver = new ResizeObserver(() => handlers.resize());
+		resizeObserver.observe(options.content);
+		resizeObserver.observe(measure);
+		window.addEventListener("scroll", onScroll, { passive: true });
+		window.addEventListener("resize", onResize, { passive: true });
+		return unsubscribe;
+	}
+	function destroy() {
+		appliedContent = syncClassTokens(options.content, appliedContent, []);
+		appliedMeasure = syncClassTokens(measure, appliedMeasure, []);
+		measure.remove();
+		clearContentStyle();
+	}
+	return {
+		read,
+		setClasses,
+		paintMeasure,
+		paint,
+		subscribe,
+		destroy
+	};
+}
+
+//#endregion
+//#region src/create-sticky-aside.ts
+function createStickyAside(options) {
+	return createStickyAsidePresenter(createBrowserView(options), options);
+}
+
+//#endregion
+export { OFFSET_CLASS, createStickyAside };
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../src/view/constants.ts","../src/view/browser-view.ts","../src/create-sticky-aside.ts"],"sourcesContent":["export const OFFSET_CLASS = {\n  top: 'sticky-aside-top',\n  bottom: 'sticky-aside-bottom',\n} as const\n\nexport const DATASET = {\n  measure: 'stickyMeasure',\n  aside: 'stickyAside',\n} as const\n\nexport const ASIDE_STATE = {\n  off: 'off',\n  flow: 'flow',\n  bottom: 'bottom',\n  locked: 'locked',\n  top: 'top',\n} as const\n\nexport const MEASURE_STYLE = {\n  position: 'fixed',\n  visibility: 'hidden',\n  pointerEvents: 'none',\n  left: '0',\n  width: '0',\n} as const\n\nexport const WRAPPER_STYLE = {\n  position: 'relative',\n  height: '100%',\n} as const\n","import type { Box } from '#core/model/types.ts'\nimport type {\n  ScrollMetrics,\n  StickyAsideClasses,\n  StickyAsideHandlers,\n  StickyAsideOptions,\n  StickyAsideView,\n  StickyPaint,\n  StickyReading,\n} from '#core/types.ts'\nimport { ASIDE_STATE, DATASET, MEASURE_STYLE, OFFSET_CLASS, WRAPPER_STYLE } from '#core/view/constants.ts'\n\nexport function createBrowserView(options: StickyAsideOptions): StickyAsideView {\n  const measure = document.createElement('div')\n  measure.dataset[DATASET.measure] = ''\n  Object.assign(measure.style, MEASURE_STYLE)\n  options.wrapper.append(measure)\n  Object.assign(options.wrapper.style, WRAPPER_STYLE)\n\n  let resizeObserver: ResizeObserver | undefined\n  let onScroll: (() => void) | undefined\n  let onResize: (() => void) | undefined\n  let topClass = options.topClass ?? OFFSET_CLASS.top\n  let bottomClass = options.bottomClass ?? OFFSET_CLASS.bottom\n  let contentClass = options.contentClass ?? ''\n  let appliedMeasure: string[] = []\n  let appliedContent: string[] = []\n\n  function getClassTokens(value: string): string[] {\n    return value.split(/\\s+/).filter((token) => token.length > 0)\n  }\n\n  function syncClassTokens(element: HTMLElement, previous: string[], next: string[]): string[] {\n    for (const token of previous) {\n      if (!next.includes(token)) {\n        element.classList.remove(token)\n      }\n    }\n\n    for (const token of next) {\n      element.classList.add(token)\n    }\n\n    return next\n  }\n\n  function clearContentStyle() {\n    options.content.style.position = ''\n    options.content.style.top = ''\n    options.content.style.bottom = ''\n    options.content.style.width = ''\n  }\n\n  function getBox(element: HTMLElement): Box {\n    if (options.readRect) {\n      return options.readRect(element)\n    }\n\n    const rect = element.getBoundingClientRect()\n\n    return {\n      top: rect.top,\n      bottom: rect.bottom,\n      width: rect.width,\n      height: rect.height,\n    }\n  }\n\n  function getMetrics(): ScrollMetrics {\n    if (options.getScrollMetrics) {\n      return options.getScrollMetrics()\n    }\n\n    return {\n      scrollY: window.scrollY,\n      viewportHeight: window.innerHeight,\n      documentHeight: document.body.clientHeight,\n    }\n  }\n\n  function read(): StickyReading {\n    return {\n      metrics: getMetrics(),\n      wrapper: getBox(options.wrapper),\n      content: getBox(options.content),\n      measure: getBox(measure),\n    }\n  }\n\n  function setClasses(next: StickyAsideClasses) {\n    if (next.topClass !== undefined) {\n      topClass = next.topClass\n    }\n\n    if (next.bottomClass !== undefined) {\n      bottomClass = next.bottomClass\n    }\n\n    if (next.contentClass !== undefined) {\n      contentClass = next.contentClass\n    }\n  }\n\n  function paintMeasure() {\n    const contentBox = getBox(options.content)\n    measure.style.top = ''\n    measure.style.bottom = ''\n    measure.style.maxHeight = `${contentBox.height}px`\n    appliedMeasure = syncClassTokens(measure, appliedMeasure, [\n      ...getClassTokens(topClass),\n      ...getClassTokens(bottomClass),\n    ])\n  }\n\n  function paint(next: StickyPaint) {\n    clearContentStyle()\n    options.content.dataset[DATASET.aside] = ASIDE_STATE[next.state]\n    const nextTokens = getClassTokens(contentClass)\n    if (next.state === 'off') {\n      options.content.style.position = 'relative'\n    } else if (next.state === 'flow') {\n      options.content.style.position = 'relative'\n      options.content.style.top = `${next.top}px`\n    } else if (next.state === 'bottom') {\n      options.content.style.position = 'fixed'\n      options.content.style.width = `${next.width}px`\n      nextTokens.push(...getClassTokens(bottomClass))\n    } else if (next.state === 'locked') {\n      options.content.style.position = 'fixed'\n      options.content.style.width = `${next.width}px`\n      options.content.style.top = `${next.top}px`\n    } else {\n      options.content.style.position = 'fixed'\n      options.content.style.width = `${next.width}px`\n      nextTokens.push(...getClassTokens(topClass))\n    }\n\n    appliedContent = syncClassTokens(options.content, appliedContent, nextTokens)\n  }\n\n  function unsubscribe() {\n    resizeObserver?.disconnect()\n    resizeObserver = undefined\n    if (onScroll) {\n      window.removeEventListener('scroll', onScroll)\n    }\n\n    if (onResize) {\n      window.removeEventListener('resize', onResize)\n    }\n\n    onScroll = undefined\n    onResize = undefined\n  }\n\n  function subscribe(handlers: StickyAsideHandlers) {\n    onScroll = () => handlers.scroll()\n    onResize = () => handlers.resize()\n    resizeObserver = new ResizeObserver(() => handlers.resize())\n    resizeObserver.observe(options.content)\n    resizeObserver.observe(measure)\n    window.addEventListener('scroll', onScroll, {\n      passive: true,\n    })\n    window.addEventListener('resize', onResize, {\n      passive: true,\n    })\n\n    return unsubscribe\n  }\n\n  function destroy() {\n    appliedContent = syncClassTokens(options.content, appliedContent, [])\n    appliedMeasure = syncClassTokens(measure, appliedMeasure, [])\n    measure.remove()\n    clearContentStyle()\n  }\n\n  return {\n    read,\n    setClasses,\n    paintMeasure,\n    paint,\n    subscribe,\n    destroy,\n  }\n}\n","import { createStickyAsidePresenter } from '#core/presenter/presenter.ts'\nimport type { StickyAsideController, StickyAsideOptions } from '#core/types.ts'\nimport { createBrowserView } from '#core/view/browser-view.ts'\n\nexport function createStickyAside(options: StickyAsideOptions): StickyAsideController {\n  return createStickyAsidePresenter(createBrowserView(options), options)\n}\n"],"mappings":"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"}

package/dist/offsets.css

@@ -0,0 +1,7 @@
+.sticky-aside-top {
+  top: var(--sticky-aside-top, 0px);
+}
+
+.sticky-aside-bottom {
+  bottom: var(--sticky-aside-bottom, 0px);
+}

package/dist/presenter.js

@@ -0,0 +1,304 @@
+//#region src/model/constants.ts
+const MODE = {
+	relative: "relative",
+	fixedTop: "fixed-top",
+	fixedBottom: "fixed-bottom",
+	fixedLocked: "fixed-locked"
+};
+const REASON = {
+	scroll: "scroll",
+	resize: "resize",
+	lock: "lock",
+	unlock: "unlock"
+};
+
+//#endregion
+//#region src/model/utils.ts
+function getClearedLockModel(model) {
+	return {
+		...model,
+		locked: false,
+		lockedTop: null
+	};
+}
+function getPinnedStickyModel(model, edge) {
+	return {
+		...model,
+		mode: edge === "top" ? MODE.fixedTop : MODE.fixedBottom,
+		locked: false
+	};
+}
+function getLockedStickyModel({ model, frame }) {
+	const lockedTop = model.lockedTop ?? frame.content.top;
+	const isPastTop = !frame.allowLockedOverflowTop && frame.wrapper.top > lockedTop;
+	const isPastBottom = !frame.allowLockedOverflowBottom && lockedTop + frame.content.height > frame.wrapper.top + frame.wrapper.height;
+	if (isPastTop || isPastBottom) return getRelativeStickyModel({
+		model: {
+			...model,
+			locked: true,
+			lockedTop
+		},
+		frame
+	});
+	return {
+		...model,
+		mode: MODE.fixedLocked,
+		locked: true,
+		lockedTop
+	};
+}
+function getRelativeStickyModel({ model, frame }) {
+	let containerTop = Math.max(frame.content.top - frame.wrapper.top, 0);
+	if (!allowsBottomGap(frame)) containerTop = getClampedContainerTop(containerTop, frame);
+	return {
+		mode: MODE.relative,
+		containerTop,
+		locked: model.locked,
+		lockedTop: model.locked ? model.lockedTop : null
+	};
+}
+function getStickyModelAtEdges({ model, frame }) {
+	const isMeasureBelow = frame.measure.bottom > frame.wrapper.bottom;
+	const isAlreadyAtBottom = Math.round(frame.content.bottom) === Math.round(frame.wrapper.bottom);
+	const isAlreadyAtTop = frame.content.top === 0;
+	if (isMeasureBelow && isAlreadyAtBottom || !isMeasureBelow && isAlreadyAtTop) return model;
+	const containerTop = getClampedContainerTop(isMeasureBelow ? frame.wrapper.height : 0, frame);
+	return {
+		mode: MODE.relative,
+		containerTop,
+		locked: false,
+		lockedTop: null
+	};
+}
+function isFullyVisible(frame) {
+	return frame.measure.height >= frame.content.height;
+}
+function isCoveringTopOffset(frame) {
+	return frame.content.top >= 0 && frame.content.top < frame.measure.top;
+}
+function isMeasureInside(frame) {
+	return frame.measure.top >= frame.wrapper.top && frame.measure.bottom <= frame.wrapper.bottom;
+}
+function isOutsideViewport(frame) {
+	return frame.scrollY < 0 || frame.scrollY > frame.documentHeight - frame.viewportHeight;
+}
+function isFixed(model) {
+	return model.mode !== MODE.relative;
+}
+function isScrollingOpposite({ model, frame }) {
+	const isFixedTop = model.mode === MODE.fixedTop || model.mode === MODE.fixedLocked;
+	return frame.scrollingUp && !isFixedTop || !frame.scrollingUp && isFixedTop;
+}
+function allowsBottomGap(frame) {
+	return frame.reason === REASON.unlock && frame.allowLockedOverflowBottom;
+}
+function getClampedContainerTop(containerTop, frame) {
+	const bottomGap = frame.wrapper.height - (containerTop + frame.content.height);
+	let next = containerTop;
+	if (bottomGap < 0) next += bottomGap;
+	return next < 0 ? 0 : next;
+}
+
+//#endregion
+//#region src/model/step.ts
+function getInitialStickyModel() {
+	return {
+		mode: MODE.relative,
+		containerTop: 0,
+		locked: false,
+		lockedTop: null
+	};
+}
+function getNewStickyModel(model, frame) {
+	if (frame.disabled) return model;
+	if (frame.reason === REASON.unlock) return getRelativeStickyModel({
+		model: getClearedLockModel(model),
+		frame
+	});
+	if (frame.reason === REASON.lock) return getLockedStickyModel({
+		model: {
+			...model,
+			locked: true,
+			lockedTop: frame.content.top
+		},
+		frame
+	});
+	if (frame.locked) return getLockedStickyModel({
+		model,
+		frame
+	});
+	if (frame.reason === REASON.resize) {
+		if (isMeasureInside(frame)) {
+			if (isFullyVisible(frame) || isCoveringTopOffset(frame)) return getPinnedStickyModel(model, "top");
+			return model;
+		}
+		return getRelativeStickyModel({
+			model: getClearedLockModel(model),
+			frame
+		});
+	}
+	if (isFixed(model)) return !isMeasureInside(frame) && !isOutsideViewport(frame) || !isFullyVisible(frame) && isScrollingOpposite({
+		model,
+		frame
+	}) ? getRelativeStickyModel({
+		model: getClearedLockModel(model),
+		frame
+	}) : model;
+	if (isMeasureInside(frame)) {
+		if (isFullyVisible(frame)) return getPinnedStickyModel(model, "top");
+		if (frame.scrollingUp && frame.content.top > frame.measure.top) return getPinnedStickyModel(model, "top");
+		if (!frame.scrollingUp && frame.content.bottom < frame.measure.bottom) return getPinnedStickyModel(model, "bottom");
+		return model;
+	}
+	return getStickyModelAtEdges({
+		model,
+		frame
+	});
+}
+
+//#endregion
+//#region src/presenter/constants.ts
+const DEFAULTS = {
+	disabled: false,
+	locked: false,
+	allowLockedOverflowTop: false,
+	allowLockedOverflowBottom: false
+};
+
+//#endregion
+//#region src/presenter/utils.ts
+function getSession(options) {
+	return {
+		disabled: options.disabled ?? DEFAULTS.disabled,
+		locked: options.locked ?? DEFAULTS.locked,
+		allowLockedOverflowTop: options.allowLockedOverflowTop ?? DEFAULTS.allowLockedOverflowTop,
+		allowLockedOverflowBottom: options.allowLockedOverflowBottom ?? DEFAULTS.allowLockedOverflowBottom
+	};
+}
+function getStickyFrame(session, reading, isScrollingUp, reason) {
+	return {
+		disabled: session.disabled,
+		locked: session.locked,
+		allowLockedOverflowTop: session.allowLockedOverflowTop,
+		allowLockedOverflowBottom: session.allowLockedOverflowBottom,
+		scrollingUp: isScrollingUp,
+		scrollY: reading.metrics.scrollY,
+		viewportHeight: reading.metrics.viewportHeight,
+		documentHeight: reading.metrics.documentHeight,
+		wrapper: reading.wrapper,
+		content: reading.content,
+		measure: reading.measure,
+		reason
+	};
+}
+function getStickyPaint(model, session, wrapperWidth) {
+	if (session.disabled) return { state: "off" };
+	if (model.mode === MODE.relative) return {
+		state: "flow",
+		top: model.containerTop
+	};
+	if (model.mode === MODE.fixedBottom) return {
+		state: "bottom",
+		width: wrapperWidth
+	};
+	if (model.mode === MODE.fixedLocked) return {
+		state: "locked",
+		top: model.lockedTop ?? 0,
+		width: wrapperWidth
+	};
+	return {
+		state: "top",
+		width: wrapperWidth
+	};
+}
+
+//#endregion
+//#region src/presenter/presenter.ts
+function createStickyAsidePresenter(view, options) {
+	const session = getSession(options);
+	let model = getInitialStickyModel();
+	let isScrollingUp = false;
+	let isStopped = false;
+	let painted;
+	let lastScrollY = view.read().metrics.scrollY;
+	function report(state) {
+		if (isStopped || state === painted) return;
+		painted = state;
+		options.onStateChange?.(state);
+	}
+	function apply(reason) {
+		if (isStopped) return;
+		const previousState = painted;
+		view.paintMeasure();
+		const reading = view.read();
+		model = getNewStickyModel(model, getStickyFrame(session, reading, isScrollingUp, reason));
+		const paint = getStickyPaint(model, session, reading.wrapper.width);
+		view.paint(paint);
+		report(paint.state);
+		if (reason === REASON.scroll && previousState !== void 0 && previousState !== "flow" && previousState !== "off" && paint.state === "flow") apply(REASON.scroll);
+	}
+	function onScroll() {
+		const scrollY = view.read().metrics.scrollY;
+		isScrollingUp = scrollY < lastScrollY;
+		lastScrollY = scrollY;
+		apply(REASON.scroll);
+	}
+	function onResize() {
+		apply(REASON.resize);
+	}
+	function update(reason = REASON.resize) {
+		apply(reason);
+	}
+	function setLocked(isLocked) {
+		if (isStopped || isLocked === session.locked) return;
+		session.locked = isLocked;
+		apply(isLocked ? REASON.lock : REASON.unlock);
+	}
+	function setDisabled(isDisabled) {
+		if (isStopped || isDisabled === session.disabled) return;
+		session.disabled = isDisabled;
+		apply(REASON.resize);
+	}
+	function setClasses(next) {
+		if (isStopped) return;
+		view.setClasses(next);
+		apply(REASON.resize);
+	}
+	function setAllowLockedOverflow(isAllowTop, isAllowBottom) {
+		if (isStopped) return;
+		session.allowLockedOverflowTop = isAllowTop;
+		session.allowLockedOverflowBottom = isAllowBottom;
+		apply(REASON.resize);
+	}
+	function getState() {
+		return painted ?? "off";
+	}
+	function getModel() {
+		return model;
+	}
+	const unsubscribe = view.subscribe({
+		scroll: onScroll,
+		resize: onResize
+	});
+	function destroy() {
+		if (isStopped) return;
+		isStopped = true;
+		unsubscribe();
+		view.destroy();
+	}
+	apply(session.locked ? REASON.lock : REASON.resize);
+	return {
+		update,
+		setLocked,
+		setDisabled,
+		setClasses,
+		setAllowLockedOverflow,
+		destroy,
+		getState,
+		getModel
+	};
+}
+
+//#endregion
+export { getInitialStickyModel as n, getNewStickyModel as r, createStickyAsidePresenter as t };
+//# sourceMappingURL=presenter.js.map

package/dist/presenter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presenter.js","names":[],"sources":["../src/model/constants.ts","../src/model/utils.ts","../src/model/step.ts","../src/presenter/constants.ts","../src/presenter/utils.ts","../src/presenter/presenter.ts"],"sourcesContent":["export const MODE = {\n  relative: 'relative',\n  fixedTop: 'fixed-top',\n  fixedBottom: 'fixed-bottom',\n  fixedLocked: 'fixed-locked',\n} as const\n\nexport const REASON = {\n  scroll: 'scroll',\n  resize: 'resize',\n  lock: 'lock',\n  unlock: 'unlock',\n} as const\n","import { MODE, REASON } from '#core/model/constants.ts'\nimport type { StickyFrame, StickyModel } from '#core/model/types.ts'\n\nexport interface StickyStep {\n  model: StickyModel\n  frame: StickyFrame\n}\n\nexport function getClearedLockModel(model: StickyModel): StickyModel {\n  return {\n    ...model,\n    locked: false,\n    lockedTop: null,\n  }\n}\n\nexport function getPinnedStickyModel(model: StickyModel, edge: 'top' | 'bottom'): StickyModel {\n  return {\n    ...model,\n    mode: edge === 'top' ? MODE.fixedTop : MODE.fixedBottom,\n    locked: false,\n  }\n}\n\nexport function getLockedStickyModel({ model, frame }: StickyStep): StickyModel {\n  const lockedTop = model.lockedTop ?? frame.content.top\n  const isPastTop = !frame.allowLockedOverflowTop && frame.wrapper.top > lockedTop\n  const isPastBottom = !frame.allowLockedOverflowBottom &&\n    lockedTop + frame.content.height > frame.wrapper.top + frame.wrapper.height\n\n  if (isPastTop || isPastBottom) {\n    return getRelativeStickyModel({\n      model: {\n        ...model,\n        locked: true,\n        lockedTop,\n      },\n      frame,\n    })\n  }\n\n  return {\n    ...model,\n    mode: MODE.fixedLocked,\n    locked: true,\n    lockedTop,\n  }\n}\n\nexport function getRelativeStickyModel({ model, frame }: StickyStep): StickyModel {\n  let containerTop = Math.max(frame.content.top - frame.wrapper.top, 0)\n  if (!allowsBottomGap(frame)) {\n    containerTop = getClampedContainerTop(containerTop, frame)\n  }\n\n  return {\n    mode: MODE.relative,\n    containerTop,\n    locked: model.locked,\n    lockedTop: model.locked ? model.lockedTop : null,\n  }\n}\n\nexport function getStickyModelAtEdges({ model, frame }: StickyStep): StickyModel {\n  const isMeasureBelow = frame.measure.bottom > frame.wrapper.bottom\n  const isAlreadyAtBottom = Math.round(frame.content.bottom) === Math.round(frame.wrapper.bottom)\n  const isAlreadyAtTop = frame.content.top === 0\n\n  if ((isMeasureBelow && isAlreadyAtBottom) || (!isMeasureBelow && isAlreadyAtTop)) {\n    return model\n  }\n\n  const containerTop = getClampedContainerTop(isMeasureBelow ? frame.wrapper.height : 0, frame)\n\n  return {\n    mode: MODE.relative,\n    containerTop,\n    locked: false,\n    lockedTop: null,\n  }\n}\n\nexport function isFullyVisible(frame: StickyFrame): boolean {\n  return frame.measure.height >= frame.content.height\n}\n\nexport function isCoveringTopOffset(frame: StickyFrame): boolean {\n  return frame.content.top >= 0 && frame.content.top < frame.measure.top\n}\n\nexport function isMeasureInside(frame: StickyFrame): boolean {\n  return frame.measure.top >= frame.wrapper.top && frame.measure.bottom <= frame.wrapper.bottom\n}\n\nexport function isOutsideViewport(frame: StickyFrame): boolean {\n  return frame.scrollY < 0 || frame.scrollY > frame.documentHeight - frame.viewportHeight\n}\n\nexport function isFixed(model: StickyModel): boolean {\n  return model.mode !== MODE.relative\n}\n\nexport function isScrollingOpposite({ model, frame }: StickyStep): boolean {\n  const isFixedTop = model.mode === MODE.fixedTop || model.mode === MODE.fixedLocked\n\n  return (frame.scrollingUp && !isFixedTop) || (!frame.scrollingUp && isFixedTop)\n}\n\nfunction allowsBottomGap(frame: StickyFrame): boolean {\n  return frame.reason === REASON.unlock && frame.allowLockedOverflowBottom\n}\n\nfunction getClampedContainerTop(containerTop: number, frame: StickyFrame): number {\n  const bottomGap = frame.wrapper.height - (containerTop + frame.content.height)\n  let next = containerTop\n  if (bottomGap < 0) {\n    next += bottomGap\n  }\n\n  return next < 0 ? 0 : next\n}\n","import { MODE, REASON } from '#core/model/constants.ts'\nimport type { Box, StickyFrame, StickyModel } from '#core/model/types.ts'\nimport {\n  getClearedLockModel,\n  getLockedStickyModel,\n  getPinnedStickyModel,\n  getRelativeStickyModel,\n  getStickyModelAtEdges,\n  isCoveringTopOffset,\n  isFixed,\n  isFullyVisible,\n  isMeasureInside,\n  isOutsideViewport,\n  isScrollingOpposite,\n} from '#core/model/utils.ts'\n\nexport type { Box, StickyFrame, StickyModel }\n\nexport function getInitialStickyModel(): StickyModel {\n  return {\n    mode: MODE.relative,\n    containerTop: 0,\n    locked: false,\n    lockedTop: null,\n  }\n}\n\nexport function getNewStickyModel(model: StickyModel, frame: StickyFrame): StickyModel {\n  if (frame.disabled) {\n    return model\n  }\n\n  if (frame.reason === REASON.unlock) {\n    return getRelativeStickyModel({ model: getClearedLockModel(model), frame })\n  }\n\n  if (frame.reason === REASON.lock) {\n    return getLockedStickyModel({\n      model: {\n        ...model,\n        locked: true,\n        lockedTop: frame.content.top,\n      },\n      frame,\n    })\n  }\n\n  if (frame.locked) {\n    return getLockedStickyModel({ model, frame })\n  }\n\n  if (frame.reason === REASON.resize) {\n    if (isMeasureInside(frame)) {\n      if (isFullyVisible(frame) || isCoveringTopOffset(frame)) {\n        return getPinnedStickyModel(model, 'top')\n      }\n\n      return model\n    }\n\n    return getRelativeStickyModel({ model: getClearedLockModel(model), frame })\n  }\n\n  if (isFixed(model)) {\n    const isReleasing =\n      (!isMeasureInside(frame) && !isOutsideViewport(frame)) ||\n      (!isFullyVisible(frame) && isScrollingOpposite({ model, frame }))\n\n    return isReleasing ? getRelativeStickyModel({ model: getClearedLockModel(model), frame }) : model\n  }\n\n  if (isMeasureInside(frame)) {\n    if (isFullyVisible(frame)) {\n      return getPinnedStickyModel(model, 'top')\n    }\n\n    if (frame.scrollingUp && frame.content.top > frame.measure.top) {\n      return getPinnedStickyModel(model, 'top')\n    }\n\n    if (!frame.scrollingUp && frame.content.bottom < frame.measure.bottom) {\n      return getPinnedStickyModel(model, 'bottom')\n    }\n\n    return model\n  }\n\n  return getStickyModelAtEdges({ model, frame })\n}\n","export const DEFAULTS = {\n  disabled: false,\n  locked: false,\n  allowLockedOverflowTop: false,\n  allowLockedOverflowBottom: false,\n} as const\n","import { MODE } from '#core/model/constants.ts'\nimport type { StickyFrame, StickyModel, StickyReason } from '#core/model/types.ts'\nimport { DEFAULTS } from '#core/presenter/constants.ts'\nimport type { Session } from '#core/presenter/types.ts'\nimport type { StickyAsidePresenterOptions, StickyPaint, StickyReading } from '#core/types.ts'\n\nexport function getSession(options: StickyAsidePresenterOptions): Session {\n  return {\n    disabled: options.disabled ?? DEFAULTS.disabled,\n    locked: options.locked ?? DEFAULTS.locked,\n    allowLockedOverflowTop: options.allowLockedOverflowTop ?? DEFAULTS.allowLockedOverflowTop,\n    allowLockedOverflowBottom: options.allowLockedOverflowBottom ?? DEFAULTS.allowLockedOverflowBottom,\n  }\n}\n\nexport function getStickyFrame(\n  session: Session,\n  reading: StickyReading,\n  isScrollingUp: boolean,\n  reason: StickyReason,\n): StickyFrame {\n  return {\n    disabled: session.disabled,\n    locked: session.locked,\n    allowLockedOverflowTop: session.allowLockedOverflowTop,\n    allowLockedOverflowBottom: session.allowLockedOverflowBottom,\n    scrollingUp: isScrollingUp,\n    scrollY: reading.metrics.scrollY,\n    viewportHeight: reading.metrics.viewportHeight,\n    documentHeight: reading.metrics.documentHeight,\n    wrapper: reading.wrapper,\n    content: reading.content,\n    measure: reading.measure,\n    reason,\n  }\n}\n\nexport function getStickyPaint(model: StickyModel, session: Session, wrapperWidth: number): StickyPaint {\n  if (session.disabled) {\n    return {\n      state: 'off',\n    }\n  }\n\n  if (model.mode === MODE.relative) {\n    return {\n      state: 'flow',\n      top: model.containerTop,\n    }\n  }\n\n  if (model.mode === MODE.fixedBottom) {\n    return {\n      state: 'bottom',\n      width: wrapperWidth,\n    }\n  }\n\n  if (model.mode === MODE.fixedLocked) {\n    return {\n      state: 'locked',\n      top: model.lockedTop ?? 0,\n      width: wrapperWidth,\n    }\n  }\n\n  return {\n    state: 'top',\n    width: wrapperWidth,\n  }\n}\n","import { REASON } from '#core/model/constants.ts'\nimport { getInitialStickyModel, getNewStickyModel } from '#core/model/step.ts'\nimport type { StickyReason } from '#core/model/types.ts'\nimport { getSession, getStickyFrame, getStickyPaint } from '#core/presenter/utils.ts'\nimport type {\n  StickyAsideClasses,\n  StickyAsideController,\n  StickyAsidePresenterOptions,\n  StickyAsideState,\n  StickyAsideView,\n} from '#core/types.ts'\n\nexport function createStickyAsidePresenter(\n  view: StickyAsideView,\n  options: StickyAsidePresenterOptions,\n): StickyAsideController {\n  const session = getSession(options)\n  let model = getInitialStickyModel()\n  let isScrollingUp = false\n  let isStopped = false\n  let painted: StickyAsideState | undefined\n  let lastScrollY = view.read().metrics.scrollY\n\n  function report(state: StickyAsideState) {\n    if (isStopped || state === painted) {\n      return\n    }\n\n    painted = state\n    options.onStateChange?.(state)\n  }\n\n  function apply(reason: StickyReason) {\n    if (isStopped) {\n      return\n    }\n\n    const previousState = painted\n    view.paintMeasure()\n    const reading = view.read()\n    model = getNewStickyModel(model, getStickyFrame(session, reading, isScrollingUp, reason))\n    const paint = getStickyPaint(model, session, reading.wrapper.width)\n    view.paint(paint)\n    report(paint.state)\n\n    const didReleaseToFlow = reason === REASON.scroll &&\n      previousState !== undefined &&\n      previousState !== 'flow' &&\n      previousState !== 'off' &&\n      paint.state === 'flow'\n    if (didReleaseToFlow) {\n      apply(REASON.scroll)\n    }\n  }\n\n  function onScroll() {\n    const scrollY = view.read().metrics.scrollY\n    isScrollingUp = scrollY < lastScrollY\n    lastScrollY = scrollY\n    apply(REASON.scroll)\n  }\n\n  function onResize() {\n    apply(REASON.resize)\n  }\n\n  function update(reason: Extract<StickyReason, 'scroll' | 'resize'> = REASON.resize) {\n    apply(reason)\n  }\n\n  function setLocked(isLocked: boolean) {\n    if (isStopped || isLocked === session.locked) {\n      return\n    }\n\n    session.locked = isLocked\n    apply(isLocked ? REASON.lock : REASON.unlock)\n  }\n\n  function setDisabled(isDisabled: boolean) {\n    if (isStopped || isDisabled === session.disabled) {\n      return\n    }\n\n    session.disabled = isDisabled\n    apply(REASON.resize)\n  }\n\n  function setClasses(next: StickyAsideClasses) {\n    if (isStopped) {\n      return\n    }\n\n    view.setClasses(next)\n    apply(REASON.resize)\n  }\n\n  function setAllowLockedOverflow(isAllowTop: boolean, isAllowBottom: boolean) {\n    if (isStopped) {\n      return\n    }\n\n    session.allowLockedOverflowTop = isAllowTop\n    session.allowLockedOverflowBottom = isAllowBottom\n    apply(REASON.resize)\n  }\n\n  function getState() {\n    return painted ?? 'off'\n  }\n\n  function getModel() {\n    return model\n  }\n\n  const unsubscribe = view.subscribe({\n    scroll: onScroll,\n    resize: onResize,\n  })\n\n  function destroy() {\n    if (isStopped) {\n      return\n    }\n\n    isStopped = true\n    unsubscribe()\n    view.destroy()\n  }\n\n  apply(session.locked ? REASON.lock : REASON.resize)\n\n  return {\n    update,\n    setLocked,\n    setDisabled,\n    setClasses,\n    setAllowLockedOverflow,\n    destroy,\n    getState,\n    getModel,\n  }\n}\n"],"mappings":"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"}

package/dist/types.d.ts

@@ -0,0 +1,124 @@
+//#region src/model/constants.d.ts
+declare const MODE: {
+  readonly relative: "relative";
+  readonly fixedTop: "fixed-top";
+  readonly fixedBottom: "fixed-bottom";
+  readonly fixedLocked: "fixed-locked";
+};
+declare const REASON: {
+  readonly scroll: "scroll";
+  readonly resize: "resize";
+  readonly lock: "lock";
+  readonly unlock: "unlock";
+};
+//#endregion
+//#region src/model/types.d.ts
+type StickyMode = (typeof MODE)[keyof typeof MODE];
+type StickyReason = (typeof REASON)[keyof typeof REASON];
+interface Box {
+  top: number;
+  bottom: number;
+  width: number;
+  height: number;
+}
+interface StickyModel {
+  mode: StickyMode;
+  containerTop: number;
+  locked: boolean;
+  lockedTop: number | null;
+}
+interface StickyFrame {
+  disabled: boolean;
+  locked: boolean;
+  allowLockedOverflowTop: boolean;
+  allowLockedOverflowBottom: boolean;
+  scrollingUp: boolean;
+  scrollY: number;
+  viewportHeight: number;
+  documentHeight: number;
+  wrapper: Box;
+  content: Box;
+  measure: Box;
+  reason: StickyReason;
+}
+//#endregion
+//#region src/types.d.ts
+interface ScrollMetrics {
+  scrollY: number;
+  viewportHeight: number;
+  documentHeight: number;
+}
+type StickyAsideState = 'flow' | 'top' | 'bottom' | 'locked' | 'off';
+interface StickyAsidePresenterOptions {
+  disabled?: boolean;
+  locked?: boolean;
+  allowLockedOverflowTop?: boolean;
+  allowLockedOverflowBottom?: boolean;
+  onStateChange?: (state: StickyAsideState) => void;
+}
+interface StickyAsideClasses {
+  topClass?: string;
+  bottomClass?: string;
+  contentClass?: string;
+}
+interface StickyAsideOptions extends StickyAsidePresenterOptions {
+  wrapper: HTMLElement;
+  content: HTMLElement;
+  topClass?: string;
+  bottomClass?: string;
+  contentClass?: string;
+  getScrollMetrics?: () => ScrollMetrics;
+  readRect?: (element: HTMLElement) => Box;
+}
+interface StickyReading {
+  metrics: ScrollMetrics;
+  wrapper: Box;
+  content: Box;
+  measure: Box;
+}
+interface StickyPaintOff {
+  state: 'off';
+}
+interface StickyPaintFlow {
+  state: 'flow';
+  top: number;
+}
+interface StickyPaintTop {
+  state: 'top';
+  width: number;
+}
+interface StickyPaintBottom {
+  state: 'bottom';
+  width: number;
+}
+interface StickyPaintLocked {
+  state: 'locked';
+  top: number;
+  width: number;
+}
+type StickyPaint = StickyPaintOff | StickyPaintFlow | StickyPaintTop | StickyPaintBottom | StickyPaintLocked;
+interface StickyAsideHandlers {
+  scroll(): void;
+  resize(): void;
+}
+interface StickyAsideView {
+  read(): StickyReading;
+  setClasses(classes: StickyAsideClasses): void;
+  paintMeasure(): void;
+  paint(paint: StickyPaint): void;
+  subscribe(handlers: StickyAsideHandlers): () => void;
+  destroy(): void;
+}
+interface StickyAsideController {
+  update: (reason?: Extract<StickyReason, 'scroll' | 'resize'>) => void;
+  setLocked: (isLocked: boolean) => void;
+  setDisabled: (isDisabled: boolean) => void;
+  setClasses: (classes: StickyAsideClasses) => void;
+  setAllowLockedOverflow: (isAllowTop: boolean, isAllowBottom: boolean) => void;
+  destroy: () => void;
+  getState: () => StickyAsideState;
+  getModel: () => StickyModel;
+}
+//#endregion
+export { StickyFrame as _, StickyAsideOptions as a, StickyReason as b, StickyAsideView as c, StickyPaintFlow as d, StickyPaintLocked as f, Box as g, StickyReading as h, StickyAsideHandlers as i, StickyPaint as l, StickyPaintTop as m, StickyAsideClasses as n, StickyAsidePresenterOptions as o, StickyPaintOff as p, StickyAsideController as r, StickyAsideState as s, ScrollMetrics as t, StickyPaintBottom as u, StickyMode as v, StickyModel as y };
+//# sourceMappingURL=types.d.ts.map

package/package.json

@@ -1,6 +1,44 @@
 {
   "name": "@sticky-aside/core",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.0.1",
+  "description": "A panel that follows page scroll and pins to the edge you are scrolling toward.",
+  "keywords": [
+    "sticky",
+    "sidebar",
+    "aside",
+    "scroll"
+  ],
+  "license": "MIT",
+  "author": "maprox",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/maprox/sticky-aside.git",
+    "directory": "packages/core"
+  },
+  "homepage": "https://github.com/maprox/sticky-aside#readme",
+  "bugs": "https://github.com/maprox/sticky-aside/issues",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "imports": {
+    "#core/*": "./src/*"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./headless": {
+      "types": "./dist/headless.d.ts",
+      "import": "./dist/headless.js"
+    },
+    "./offsets.css": "./dist/offsets.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsdown --config tsdown.config.mjs"
+  }
 }