@seed-design/stackflow 1.1.20 → 1.1.21

package/lib/primitive/GlobalInteraction/constants.js

@@ -0,0 +1,8 @@
+"use client";
+//#region src/primitive/GlobalInteraction/constants.ts
+/** Behind activity's parallax multiplier applied to swipe displacement. */
+var BEHIND_PARALLAX = .3;
+/** Title translate-X multiplier applied to swipe displacement (px). */
+var TITLE_TRANSLATE_RATIO = .15;
+//#endregion
+export { BEHIND_PARALLAX, TITLE_TRANSLATE_RATIO };

package/lib/primitive/GlobalInteraction/dom.cjs

@@ -0,0 +1,147 @@
+"use client";
+const require_anatomy = require("../AppScreen/anatomy.cjs");
+const require_anatomy$1 = require("../AppBar/anatomy.cjs");
+const require_constants = require("./constants.cjs");
+//#region src/primitive/GlobalInteraction/dom.ts
+/**
+* DOM discovery and inline style management for AppScreen transitions.
+*
+* Elements are found via data-part attributes. Inline styles are the
+* source of truth for element positions between animations.
+*/
+function queryParts(activity, part) {
+	return activity?.querySelector(`[data-part='${part}']`) ?? null;
+}
+function queryAllParts(activity, ...parts) {
+	if (!activity) return [];
+	const selector = parts.map((p) => `[data-part='${p}']`).join(", ");
+	return Array.from(activity.querySelectorAll(selector));
+}
+/** Read transition style directly from the top activity DOM element. */
+function readTransitionStyle(stackEl) {
+	return stackEl.querySelector("[data-activity-is-top]")?.dataset["transitionStyle"] ?? "slideFromRightIOS";
+}
+/** Find all transition target elements. Call once per gesture/transition. */
+function findTransitionTargets(stackEl) {
+	const topActivity = stackEl.querySelector("[data-activity-is-top]");
+	let behindActivity = null;
+	if (topActivity) {
+		const all = Array.from(stackEl.querySelectorAll(`[data-part='${require_anatomy.appScreenAnatomy.activity}']`));
+		const topId = topActivity.dataset["activityId"];
+		const topIdx = all.findIndex((el) => el.dataset["activityId"] === topId);
+		for (let i = topIdx - 1; i >= 0; i--) if (all[i].dataset["activityId"]) {
+			behindActivity = all[i];
+			break;
+		}
+	}
+	return {
+		topLayer: queryParts(topActivity, require_anatomy.appScreenAnatomy.layer),
+		topDim: queryParts(topActivity, require_anatomy.appScreenAnatomy.dim),
+		behindLayer: queryParts(behindActivity, require_anatomy.appScreenAnatomy.layer),
+		behindDim: queryParts(behindActivity, require_anatomy.appScreenAnatomy.dim),
+		topTitle: queryParts(topActivity, require_anatomy$1.appBarAnatomy.main),
+		behindTitle: queryParts(behindActivity, require_anatomy$1.appBarAnatomy.main),
+		topIcons: queryAllParts(topActivity, require_anatomy$1.appBarAnatomy.icon, require_anatomy$1.appBarAnatomy.custom),
+		behindIcons: queryAllParts(behindActivity, require_anatomy$1.appBarAnatomy.icon, require_anatomy$1.appBarAnatomy.custom),
+		topAppBarRoot: queryParts(topActivity, require_anatomy$1.appBarAnatomy.root),
+		behindAppBarRoot: queryParts(behindActivity, require_anatomy$1.appBarAnatomy.root),
+		topAppBarBackground: queryParts(topActivity, require_anatomy$1.appBarAnatomy.background),
+		behindAppBarBackground: queryParts(behindActivity, require_anatomy$1.appBarAnatomy.background)
+	};
+}
+function setTransform(el, value) {
+	if (el) el.style.transform = value;
+}
+function setOpacity(el, value) {
+	if (el) el.style.opacity = value;
+}
+function clearStyles(el) {
+	if (!el) return;
+	el.style.transform = "";
+	el.style.opacity = "";
+}
+/**
+* Clear ALL inline styles from every target, including appBar roots.
+* This is the foundation — call before setting any specific positions.
+*/
+function clearAllStyles(t) {
+	const all = [
+		t.topLayer,
+		t.topDim,
+		t.behindLayer,
+		t.behindDim,
+		t.topTitle,
+		t.behindTitle,
+		t.topAppBarRoot,
+		t.behindAppBarRoot,
+		t.topAppBarBackground,
+		t.behindAppBarBackground,
+		...t.topIcons,
+		...t.behindIcons
+	];
+	for (const el of all) clearStyles(el);
+}
+/**
+* Set idle positions after push completes.
+* Pattern: clear everything first, then set only non-default positions.
+*/
+function setIdlePositions(t, style = "slideFromRightIOS") {
+	clearAllStyles(t);
+	if (style === "slideFromRightIOS") {
+		setTransform(t.behindLayer, `translate3d(-30%, 0, 0)`);
+		setOpacity(t.behindTitle, "0");
+		setTransform(t.behindTitle, `translate3d(-25%, 0, 0)`);
+		for (const icon of t.behindIcons) setOpacity(icon, "0");
+	} else setOpacity(t.behindAppBarRoot, "0");
+}
+/**
+* Set positions after pop/swipe-complete.
+* Pattern: clear everything first, then pin top in exit position.
+*/
+function setPostExitPositions(t, style = "slideFromRightIOS") {
+	clearAllStyles(t);
+	setOpacity(t.topDim, "0");
+	setOpacity(t.topAppBarRoot, "0");
+	if (style === "slideFromRightIOS") {
+		setTransform(t.topLayer, "translate3d(100%, 0, 0)");
+		setOpacity(t.topTitle, "0");
+		setTransform(t.topTitle, `translate3d(25%, 0, 0)`);
+		for (const icon of t.topIcons) {
+			setOpacity(icon, "0");
+			setTransform(icon, `translate3d(25%, 0, 0)`);
+		}
+	} else if (style === "fadeFromBottomAndroid") {
+		setOpacity(t.topLayer, "0");
+		setTransform(t.topLayer, "translate3d(0, 8vh, 0)");
+		setTransform(t.topAppBarRoot, "translate3d(0, 8vh, 0)");
+	} else setOpacity(t.topLayer, "0");
+}
+/** Apply inline styles during swiping (touchmove). */
+function applySwipeStyles(t, displacement, ratio) {
+	setTransform(t.topLayer, `translate3d(${displacement}px, 0, 0)`);
+	setTransform(t.behindLayer, `translate3d(calc(-30% + ${displacement * require_constants.BEHIND_PARALLAX}px), 0, 0)`);
+	setOpacity(t.topDim, `${1 - ratio}`);
+	const topFade = Math.max(0, 1 - ratio * 3);
+	if (t.topTitle) {
+		setOpacity(t.topTitle, `${topFade}`);
+		setTransform(t.topTitle, `translate3d(${displacement * require_constants.TITLE_TRANSLATE_RATIO}px, 0, 0)`);
+	}
+	if (t.behindTitle) {
+		setOpacity(t.behindTitle, `${ratio}`);
+		setTransform(t.behindTitle, `translate3d(calc(-25% + ${displacement * require_constants.TITLE_TRANSLATE_RATIO}px), 0, 0)`);
+	}
+	for (const icon of t.topIcons) {
+		setOpacity(icon, `${topFade}`);
+		setTransform(icon, `translate3d(${displacement * require_constants.TITLE_TRANSLATE_RATIO}px, 0, 0)`);
+	}
+	for (const icon of t.behindIcons) setOpacity(icon, `${ratio}`);
+}
+//#endregion
+exports.applySwipeStyles = applySwipeStyles;
+exports.clearAllStyles = clearAllStyles;
+exports.findTransitionTargets = findTransitionTargets;
+exports.readTransitionStyle = readTransitionStyle;
+exports.setIdlePositions = setIdlePositions;
+exports.setOpacity = setOpacity;
+exports.setPostExitPositions = setPostExitPositions;
+exports.setTransform = setTransform;

package/lib/primitive/GlobalInteraction/dom.d.ts

@@ -0,0 +1,44 @@
+/**
+ * DOM discovery and inline style management for AppScreen transitions.
+ *
+ * Elements are found via data-part attributes. Inline styles are the
+ * source of truth for element positions between animations.
+ */
+export interface TransitionTargets {
+    topLayer: HTMLElement | null;
+    topDim: HTMLElement | null;
+    behindLayer: HTMLElement | null;
+    behindDim: HTMLElement | null;
+    topTitle: HTMLElement | null;
+    behindTitle: HTMLElement | null;
+    topIcons: HTMLElement[];
+    behindIcons: HTMLElement[];
+    topAppBarRoot: HTMLElement | null;
+    behindAppBarRoot: HTMLElement | null;
+    topAppBarBackground: HTMLElement | null;
+    behindAppBarBackground: HTMLElement | null;
+}
+export type TransitionStyle = "slideFromRightIOS" | "fadeFromBottomAndroid" | "fadeIn";
+/** Read transition style directly from the top activity DOM element. */
+export declare function readTransitionStyle(stackEl: HTMLElement): TransitionStyle;
+/** Find all transition target elements. Call once per gesture/transition. */
+export declare function findTransitionTargets(stackEl: HTMLElement): TransitionTargets;
+export declare function setTransform(el: HTMLElement | null, value: string): void;
+export declare function setOpacity(el: HTMLElement | null, value: string): void;
+/**
+ * Clear ALL inline styles from every target, including appBar roots.
+ * This is the foundation — call before setting any specific positions.
+ */
+export declare function clearAllStyles(t: TransitionTargets): void;
+/**
+ * Set idle positions after push completes.
+ * Pattern: clear everything first, then set only non-default positions.
+ */
+export declare function setIdlePositions(t: TransitionTargets, style?: TransitionStyle): void;
+/**
+ * Set positions after pop/swipe-complete.
+ * Pattern: clear everything first, then pin top in exit position.
+ */
+export declare function setPostExitPositions(t: TransitionTargets, style?: TransitionStyle): void;
+/** Apply inline styles during swiping (touchmove). */
+export declare function applySwipeStyles(t: TransitionTargets, displacement: number, ratio: number): void;

package/lib/primitive/GlobalInteraction/dom.js

@@ -0,0 +1,140 @@
+"use client";
+import { appScreenAnatomy } from "../AppScreen/anatomy.js";
+import { appBarAnatomy } from "../AppBar/anatomy.js";
+import { BEHIND_PARALLAX, TITLE_TRANSLATE_RATIO } from "./constants.js";
+//#region src/primitive/GlobalInteraction/dom.ts
+/**
+* DOM discovery and inline style management for AppScreen transitions.
+*
+* Elements are found via data-part attributes. Inline styles are the
+* source of truth for element positions between animations.
+*/
+function queryParts(activity, part) {
+	return activity?.querySelector(`[data-part='${part}']`) ?? null;
+}
+function queryAllParts(activity, ...parts) {
+	if (!activity) return [];
+	const selector = parts.map((p) => `[data-part='${p}']`).join(", ");
+	return Array.from(activity.querySelectorAll(selector));
+}
+/** Read transition style directly from the top activity DOM element. */
+function readTransitionStyle(stackEl) {
+	return stackEl.querySelector("[data-activity-is-top]")?.dataset["transitionStyle"] ?? "slideFromRightIOS";
+}
+/** Find all transition target elements. Call once per gesture/transition. */
+function findTransitionTargets(stackEl) {
+	const topActivity = stackEl.querySelector("[data-activity-is-top]");
+	let behindActivity = null;
+	if (topActivity) {
+		const all = Array.from(stackEl.querySelectorAll(`[data-part='${appScreenAnatomy.activity}']`));
+		const topId = topActivity.dataset["activityId"];
+		const topIdx = all.findIndex((el) => el.dataset["activityId"] === topId);
+		for (let i = topIdx - 1; i >= 0; i--) if (all[i].dataset["activityId"]) {
+			behindActivity = all[i];
+			break;
+		}
+	}
+	return {
+		topLayer: queryParts(topActivity, appScreenAnatomy.layer),
+		topDim: queryParts(topActivity, appScreenAnatomy.dim),
+		behindLayer: queryParts(behindActivity, appScreenAnatomy.layer),
+		behindDim: queryParts(behindActivity, appScreenAnatomy.dim),
+		topTitle: queryParts(topActivity, appBarAnatomy.main),
+		behindTitle: queryParts(behindActivity, appBarAnatomy.main),
+		topIcons: queryAllParts(topActivity, appBarAnatomy.icon, appBarAnatomy.custom),
+		behindIcons: queryAllParts(behindActivity, appBarAnatomy.icon, appBarAnatomy.custom),
+		topAppBarRoot: queryParts(topActivity, appBarAnatomy.root),
+		behindAppBarRoot: queryParts(behindActivity, appBarAnatomy.root),
+		topAppBarBackground: queryParts(topActivity, appBarAnatomy.background),
+		behindAppBarBackground: queryParts(behindActivity, appBarAnatomy.background)
+	};
+}
+function setTransform(el, value) {
+	if (el) el.style.transform = value;
+}
+function setOpacity(el, value) {
+	if (el) el.style.opacity = value;
+}
+function clearStyles(el) {
+	if (!el) return;
+	el.style.transform = "";
+	el.style.opacity = "";
+}
+/**
+* Clear ALL inline styles from every target, including appBar roots.
+* This is the foundation — call before setting any specific positions.
+*/
+function clearAllStyles(t) {
+	const all = [
+		t.topLayer,
+		t.topDim,
+		t.behindLayer,
+		t.behindDim,
+		t.topTitle,
+		t.behindTitle,
+		t.topAppBarRoot,
+		t.behindAppBarRoot,
+		t.topAppBarBackground,
+		t.behindAppBarBackground,
+		...t.topIcons,
+		...t.behindIcons
+	];
+	for (const el of all) clearStyles(el);
+}
+/**
+* Set idle positions after push completes.
+* Pattern: clear everything first, then set only non-default positions.
+*/
+function setIdlePositions(t, style = "slideFromRightIOS") {
+	clearAllStyles(t);
+	if (style === "slideFromRightIOS") {
+		setTransform(t.behindLayer, `translate3d(-30%, 0, 0)`);
+		setOpacity(t.behindTitle, "0");
+		setTransform(t.behindTitle, `translate3d(-25%, 0, 0)`);
+		for (const icon of t.behindIcons) setOpacity(icon, "0");
+	} else setOpacity(t.behindAppBarRoot, "0");
+}
+/**
+* Set positions after pop/swipe-complete.
+* Pattern: clear everything first, then pin top in exit position.
+*/
+function setPostExitPositions(t, style = "slideFromRightIOS") {
+	clearAllStyles(t);
+	setOpacity(t.topDim, "0");
+	setOpacity(t.topAppBarRoot, "0");
+	if (style === "slideFromRightIOS") {
+		setTransform(t.topLayer, "translate3d(100%, 0, 0)");
+		setOpacity(t.topTitle, "0");
+		setTransform(t.topTitle, `translate3d(25%, 0, 0)`);
+		for (const icon of t.topIcons) {
+			setOpacity(icon, "0");
+			setTransform(icon, `translate3d(25%, 0, 0)`);
+		}
+	} else if (style === "fadeFromBottomAndroid") {
+		setOpacity(t.topLayer, "0");
+		setTransform(t.topLayer, "translate3d(0, 8vh, 0)");
+		setTransform(t.topAppBarRoot, "translate3d(0, 8vh, 0)");
+	} else setOpacity(t.topLayer, "0");
+}
+/** Apply inline styles during swiping (touchmove). */
+function applySwipeStyles(t, displacement, ratio) {
+	setTransform(t.topLayer, `translate3d(${displacement}px, 0, 0)`);
+	setTransform(t.behindLayer, `translate3d(calc(-30% + ${displacement * BEHIND_PARALLAX}px), 0, 0)`);
+	setOpacity(t.topDim, `${1 - ratio}`);
+	const topFade = Math.max(0, 1 - ratio * 3);
+	if (t.topTitle) {
+		setOpacity(t.topTitle, `${topFade}`);
+		setTransform(t.topTitle, `translate3d(${displacement * TITLE_TRANSLATE_RATIO}px, 0, 0)`);
+	}
+	if (t.behindTitle) {
+		setOpacity(t.behindTitle, `${ratio}`);
+		setTransform(t.behindTitle, `translate3d(calc(-25% + ${displacement * TITLE_TRANSLATE_RATIO}px), 0, 0)`);
+	}
+	for (const icon of t.topIcons) {
+		setOpacity(icon, `${topFade}`);
+		setTransform(icon, `translate3d(${displacement * TITLE_TRANSLATE_RATIO}px, 0, 0)`);
+	}
+	for (const icon of t.behindIcons) setOpacity(icon, `${ratio}`);
+}
+//#endregion
+export { applySwipeStyles, clearAllStyles, findTransitionTargets, readTransitionStyle, setIdlePositions, setOpacity, setPostExitPositions, setTransform };

package/lib/primitive/GlobalInteraction/index.cjs

@@ -1,11 +1,5 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const GlobalInteraction = require('./GlobalInteraction.cjs');
-const useGlobalInteractionContext = require('./useGlobalInteractionContext.cjs');
-
-
-
-exports.GlobalInteraction = GlobalInteraction.GlobalInteraction;
-exports.useGlobalInteractionContext = useGlobalInteractionContext.useGlobalInteractionContext;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_useGlobalInteractionContext = require("./useGlobalInteractionContext.cjs");
+const require_GlobalInteraction = require("./GlobalInteraction.cjs");
+exports.GlobalInteraction = require_GlobalInteraction.GlobalInteraction;
+exports.useGlobalInteractionContext = require_useGlobalInteractionContext.useGlobalInteractionContext;

package/lib/primitive/GlobalInteraction/index.js

@@ -1,2 +1,3 @@
-export { GlobalInteraction } from './GlobalInteraction.js';
-export { useGlobalInteractionContext } from './useGlobalInteractionContext.js';
+import { useGlobalInteractionContext } from "./useGlobalInteractionContext.js";
+import { GlobalInteraction } from "./GlobalInteraction.js";
+export { GlobalInteraction, useGlobalInteractionContext };