@cher1shrxd/webview-stack-kit 1.0.0

package/dist/components/NavigationStack.d.ts

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from "react";
+export declare const NavigationStack: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=NavigationStack.d.ts.map

package/dist/components/NavigationStack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationStack.d.ts","sourceRoot":"","sources":["../../src/components/NavigationStack.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAuB,MAAM,OAAO,CAAC;AAK/D,eAAO,MAAM,eAAe,GAAI,cAAc,iBAAiB,4CAyB9D,CAAC"}

package/dist/components/NavigationStack.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { StackProvider } from "../context/stack-provider";
+import { NavigationStackView } from "./NavigationStackView";
+import { getSearchParams } from "../utils/get-search-params";
+export const NavigationStack = ({ children }) => {
+    const [dynamicPadding, setDynamicPadding] = useState({
+        paddingTop: 0,
+        paddingBottom: 0,
+    });
+    useEffect(() => {
+        const searchParams = getSearchParams();
+        const topPadding = Number(searchParams["top"] || 0);
+        const bottomPadding = Number(searchParams["bottom"] || 0);
+        setDynamicPadding({ paddingTop: topPadding, paddingBottom: bottomPadding });
+    }, []);
+    return (_jsxs(StackProvider, { children: [_jsx(NavigationStackView, {}), _jsx("div", { style: {
+                    paddingTop: dynamicPadding.paddingTop,
+                    paddingBottom: dynamicPadding.paddingBottom,
+                }, children: children })] }));
+};

package/dist/components/NavigationStackView.d.ts

@@ -0,0 +1,2 @@
+export declare const NavigationStackView: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=NavigationStackView.d.ts.map

package/dist/components/NavigationStackView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationStackView.d.ts","sourceRoot":"","sources":["../../src/components/NavigationStackView.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,mBAAmB,+CAoG/B,CAAC"}

package/dist/components/NavigationStackView.js

@@ -0,0 +1,84 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StackScreen } from "./StackScreen";
+import { useStack } from "../hooks/useStack";
+import { useRef, useCallback, useEffect } from "react";
+export const NavigationStackView = () => {
+    const { stack, pop, remove } = useStack();
+    const topScreenRef = useRef(null);
+    const dragInfo = useRef(null);
+    const handleDragEnd = useCallback(() => {
+        if (!dragInfo.current?.isDragging)
+            return;
+        const { startX, lastX, startTime } = dragInfo.current;
+        const distance = lastX - startX;
+        const time = Date.now() - startTime;
+        const velocity = distance / time;
+        const screenWidth = window.innerWidth;
+        const isClosed = distance > screenWidth * 0.35 || velocity > 0.5;
+        if (topScreenRef.current) {
+            topScreenRef.current.style.transition = 'transform 0.5s cubic-bezier(0.32, 0.72, 0, 1)';
+            topScreenRef.current.style.transform = isClosed ? 'translateX(100%)' : '';
+            if (isClosed) {
+                pop();
+            }
+        }
+        dragInfo.current = null;
+    }, [pop]);
+    const handleDragMove = useCallback((e) => {
+        if (!dragInfo.current?.isDragging)
+            return;
+        let clientX;
+        if (e.type === 'touchmove') {
+            clientX = e.touches[0].clientX;
+        }
+        else {
+            clientX = e.clientX;
+        }
+        dragInfo.current.lastX = clientX;
+        if (topScreenRef.current) {
+            topScreenRef.current.style.transform = `translateX(${clientX - dragInfo.current.startX}px)`;
+        }
+    }, []);
+    const handleDragStart = useCallback((e, index) => {
+        if (index !== stack.length - 1)
+            return;
+        if (stack[index].transition === 'pop')
+            return;
+        let clientX;
+        if ('touches' in e) {
+            clientX = e.touches[0].clientX;
+        }
+        else {
+            clientX = e.clientX;
+        }
+        dragInfo.current = {
+            isDragging: true,
+            startX: clientX,
+            lastX: clientX,
+            startTime: Date.now(),
+            index,
+        };
+        if (topScreenRef.current) {
+            topScreenRef.current.style.transition = 'none';
+        }
+        window.addEventListener('mousemove', handleDragMove);
+        window.addEventListener('mouseup', handleDragEnd, { once: true });
+        window.addEventListener('touchmove', handleDragMove);
+        window.addEventListener('touchend', handleDragEnd, { once: true });
+    }, [stack, handleDragMove, handleDragEnd]);
+    useEffect(() => {
+        return () => {
+            window.removeEventListener('mousemove', handleDragMove);
+            window.removeEventListener('mouseup', handleDragEnd);
+            window.removeEventListener('touchmove', handleDragMove);
+            window.removeEventListener('touchend', handleDragEnd);
+        };
+    }, [handleDragMove, handleDragEnd]);
+    return (_jsx("div", { style: {
+            position: 'fixed',
+            inset: 0,
+            zIndex: 9999,
+            pointerEvents: 'none',
+        }, children: stack.map((item, index) => (_jsx(StackScreen, { ref: index === stack.length - 1 ? topScreenRef : null, item: item, index: index, totalCount: stack.length, onExitComplete: remove, onDragStart: handleDragStart }, item.id))) }));
+};

package/dist/components/Stack.d.ts

@@ -0,0 +1,3 @@
+import { ComponentProps } from "react";
+export declare const Stack: (props: ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Stack.d.ts.map

package/dist/components/Stack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../src/components/Stack.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,eAAO,MAAM,KAAK,GAAI,OAAO,cAAc,CAAC,KAAK,CAAC,4CASjD,CAAC"}

package/dist/components/Stack.js

@@ -0,0 +1,5 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Stack = (props) => {
+    return (_jsx("div", { ...props, className: `stack-view ${props.className || ""}`, style: { ...props.style, width: "100%", height: "100%" }, children: props.children }));
+};

package/dist/components/StackScreen.d.ts

@@ -0,0 +1,11 @@
+import { MouseEvent, TouchEvent } from "react";
+import { StackItem } from "../types";
+export declare const StackScreen: import("react").ForwardRefExoticComponent<Omit<{
+    [key: string]: any;
+    item: StackItem;
+    index: number;
+    totalCount: number;
+    onExitComplete: (id: string) => void;
+    onDragStart: (e: TouchEvent | MouseEvent, index: number) => void;
+}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=StackScreen.d.ts.map

package/dist/components/StackScreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackScreen.d.ts","sourceRoot":"","sources":["../../src/components/StackScreen.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,UAAU,EACV,UAAU,EACX,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAiBrC,eAAO,MAAM,WAAW;;UAGd,SAAS;WACR,MAAM;gBACD,MAAM;oBACF,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI;iBACvB,CAAC,CAAC,EAAE,UAAU,GAAG,UAAU,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI;0DA8ElE,CAAC"}

package/dist/components/StackScreen.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect, forwardRef, useRef, useLayoutEffect, } from "react";
+import { getSearchParams } from "../utils/get-search-params";
+const stackScreenStyle = {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100svh",
+    background: "#fff",
+    boxSizing: "border-box",
+    boxShadow: "0 2px 8px rgba(0,0,0,0.08)",
+    willChange: "transform, opacity",
+    overflow: "hidden",
+    transition: `transform 0.5s cubic-bezier(0.32, 0.72, 0, 1), filter 0.5s cubic-bezier(0.32, 0.72, 0, 1)`,
+};
+export const StackScreen = forwardRef(({ item, index, totalCount, onExitComplete, onDragStart, ...rest }, ref) => {
+    const [isMounted, setIsMounted] = useState(false);
+    const [dynamicPadding, setDynamicPadding] = useState({
+        paddingTop: 0,
+        paddingBottom: 0,
+    });
+    const isExiting = item.transition === "pop";
+    const containerRef = useRef(null);
+    useLayoutEffect(() => {
+        const elList = containerRef.current?.querySelectorAll(".stack-view");
+        if (!elList)
+            return;
+        elList.forEach((el) => {
+            el.style.paddingTop = `${dynamicPadding.paddingTop}px`;
+            el.style.paddingBottom = `${dynamicPadding.paddingBottom}px`;
+        });
+    }, [dynamicPadding.paddingTop, dynamicPadding.paddingBottom]);
+    useEffect(() => {
+        const frame = requestAnimationFrame(() => {
+            setIsMounted(true);
+        });
+        return () => cancelAnimationFrame(frame);
+    }, []);
+    useEffect(() => {
+        if (isExiting) {
+            const timer = setTimeout(() => {
+                onExitComplete(item.id);
+            }, 500);
+            return () => clearTimeout(timer);
+        }
+    }, [isExiting, item.id, onExitComplete]);
+    useEffect(() => {
+        const searchParams = getSearchParams();
+        setDynamicPadding({
+            paddingTop: Number(searchParams["top"] || 0),
+            paddingBottom: Number(searchParams["bottom"] || 0),
+        });
+    }, []);
+    const isTop = index === totalCount - 1;
+    const style = {
+        ...stackScreenStyle,
+        display: "block",
+        zIndex: index,
+        pointerEvents: isTop ? "auto" : "none",
+    };
+    if (isExiting) {
+        style.transform = `translateX(100%)`;
+    }
+    else if (isTop) {
+        style.transform = isMounted ? "translateX(0)" : "translateX(100%)";
+    }
+    else {
+        style.transform = `translateX(0)`;
+        style.filter = `none`;
+    }
+    return (_jsx("div", { ref: (node) => {
+            if (typeof ref === "function")
+                ref(node);
+            else if (ref)
+                ref.current = node;
+            containerRef.current = node;
+        }, style: style, onTouchStart: (e) => onDragStart(e, index), onMouseDown: (e) => onDragStart(e, index), ...rest, children: _jsx(item.Component, { ...item.props, isTop: isTop }) }));
+});

package/dist/context/stack-provider.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+import { StackApi } from "../types";
+export declare const StackContext: import("react").Context<StackApi | null>;
+export declare const StackProvider: ({ children }: {
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=stack-provider.d.ts.map

package/dist/context/stack-provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack-provider.d.ts","sourceRoot":"","sources":["../../src/context/stack-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAuB,MAAM,OAAO,CAAA;AAGrE,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AAEnC,eAAO,MAAM,YAAY,0CAAuC,CAAA;AAEhE,eAAO,MAAM,aAAa,GAAI,cAAc;IAAE,QAAQ,EAAE,SAAS,CAAA;CAC/D,4CAkBD,CAAA"}

package/dist/context/stack-provider.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useMemo, useReducer } from "react";
+import { stackReducer } from "./stack-reducer";
+import { createStackActions } from "../utils/create-stack-actions";
+export const StackContext = createContext(null);
+export const StackProvider = ({ children }) => {
+    const [state, dispatch] = useReducer(stackReducer, { stack: [] });
+    const actions = useMemo(() => createStackActions(dispatch), [dispatch]);
+    const api = {
+        stack: state.stack,
+        ...actions,
+    };
+    return (_jsx(StackContext.Provider, { value: api, children: children }));
+};

package/dist/context/stack-reducer.d.ts

@@ -0,0 +1,3 @@
+import { StackAction, StackState } from "../types";
+export declare const stackReducer: (state: StackState, action: StackAction) => StackState;
+//# sourceMappingURL=stack-reducer.d.ts.map

package/dist/context/stack-reducer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack-reducer.d.ts","sourceRoot":"","sources":["../../src/context/stack-reducer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAElD,eAAO,MAAM,YAAY,GAAI,OAAO,UAAU,EAAE,QAAQ,WAAW,KAAG,UAqBrE,CAAA"}

package/dist/context/stack-reducer.js

@@ -0,0 +1,22 @@
+export const stackReducer = (state, action) => {
+    switch (action.type) {
+        case 'PUSH':
+            return { stack: [...state.stack, { ...action.item, transition: 'push' }] };
+        case 'POP':
+            return {
+                ...state,
+                stack: state.stack.map((item, index) => {
+                    if (index === state.stack.length - 1) {
+                        return { ...item, transition: 'pop' };
+                    }
+                    return item;
+                }),
+            };
+        case 'REMOVE':
+            return {
+                ...state,
+                stack: state.stack.filter(item => item.id !== action.id),
+            };
+    }
+    return state;
+};

package/dist/hooks/useStack.d.ts

@@ -0,0 +1,2 @@
+export declare const useStack: () => import("../types").StackApi;
+//# sourceMappingURL=useStack.d.ts.map

package/dist/hooks/useStack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStack.d.ts","sourceRoot":"","sources":["../../src/hooks/useStack.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ,mCAMpB,CAAA"}

package/dist/hooks/useStack.js

@@ -0,0 +1,9 @@
+import { useContext } from "react";
+import { StackContext } from "../context/stack-provider";
+export const useStack = () => {
+    const ctx = useContext(StackContext);
+    if (!ctx) {
+        throw new Error('useStack must be used inside StackProvider');
+    }
+    return ctx;
+};

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { NavigationStack } from "./components/NavigationStack";
+export { useStack } from "./hooks/useStack";
+export { Stack } from "./components/Stack";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/index.js

@@ -0,0 +1,3 @@
+export { NavigationStack } from "./components/NavigationStack";
+export { useStack } from "./hooks/useStack";
+export { Stack } from "./components/Stack";

package/dist/types.d.ts

@@ -0,0 +1,26 @@
+import type { ComponentType } from "react";
+export interface StackItem<P = any> {
+    id: string;
+    Component: ComponentType<P>;
+    props: P;
+    transition?: "push" | "pop";
+}
+export interface StackState {
+    stack: StackItem[];
+}
+export type StackAction = {
+    type: "PUSH";
+    item: StackItem;
+} | {
+    type: "POP";
+} | {
+    type: "REMOVE";
+    id: string;
+};
+export interface StackApi {
+    stack: StackItem[];
+    push<P>(component: ComponentType<P>, props: P): void;
+    pop(): void;
+    remove(id: string): void;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,MAAM,WAAW,SAAS,CAAC,CAAC,GAAG,GAAG;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IAC5B,KAAK,EAAE,CAAC,CAAC;IACT,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CAC7B;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,SAAS,EAAE,CAAC;CACpB;AAED,MAAM,MAAM,WAAW,GACnB;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,SAAS,CAAA;CAAE,GACjC;IAAE,IAAI,EAAE,KAAK,CAAA;CAAE,GACf;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC;AAEnC,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,SAAS,EAAE,CAAC;IAEnB,IAAI,CAAC,CAAC,EAAE,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IAErD,GAAG,IAAI,IAAI,CAAC;IAEZ,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B"}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/create-stack-actions.d.ts

@@ -0,0 +1,7 @@
+import { StackAction } from "../types";
+export declare const createStackActions: (dispatch: React.Dispatch<StackAction>) => {
+    push<P>(Component: React.ComponentType<P>, props: P): void;
+    pop(): void;
+    remove(id: string): void;
+};
+//# sourceMappingURL=create-stack-actions.d.ts.map

package/dist/utils/create-stack-actions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-stack-actions.d.ts","sourceRoot":"","sources":["../../src/utils/create-stack-actions.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,eAAO,MAAM,kBAAkB,GAAI,UAAU,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC;SAE/D,CAAC,aAAa,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC;;eAexC,MAAM;CAIpB,CAAC"}

package/dist/utils/create-stack-actions.js

@@ -0,0 +1,21 @@
+import { nanoid } from "nanoid";
+export const createStackActions = (dispatch) => {
+    return {
+        push(Component, props) {
+            dispatch({
+                type: "PUSH",
+                item: {
+                    id: nanoid(),
+                    Component,
+                    props,
+                },
+            });
+        },
+        pop() {
+            dispatch({ type: "POP" });
+        },
+        remove(id) {
+            dispatch({ type: "REMOVE", id });
+        },
+    };
+};

package/dist/utils/get-search-params.d.ts

@@ -0,0 +1,2 @@
+export declare const getSearchParams: () => Record<string, string>;
+//# sourceMappingURL=get-search-params.d.ts.map

package/dist/utils/get-search-params.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-search-params.d.ts","sourceRoot":"","sources":["../../src/utils/get-search-params.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,QAAO,MAAM,CAAC,MAAM,EAAE,MAAM,CAWvD,CAAC"}

package/dist/utils/get-search-params.js

@@ -0,0 +1,11 @@
+export const getSearchParams = () => {
+    if (typeof window === 'undefined') {
+        return {};
+    }
+    const searchParams = new URLSearchParams(window.location.search);
+    const params = {};
+    for (const [key, value] of searchParams.entries()) {
+        params[key] = value;
+    }
+    return params;
+};

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@cher1shrxd/webview-stack-kit",
+  "version": "1.0.0",
+  "private": false,
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "prepack": "pnpm run build",
+    "typecheck": "tsc -b"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-dom": ">=19",
+    "nanoid": ">=3"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.10",
+    "@types/react-dom": "^19.2.3",
+    "typescript": "^5.9.3"
+  }
+}