@ahnseungchan/webviewkit 1.0.8 → 1.2.0

package/README.md

@@ -1,149 +1,94 @@
-# WebViewKit
+# @ahnseungchan/webviewkit
 
-A modern React library for building stack-based navigation in WebView applications, providing smooth transitions and native-like navigation experience.
+React **WebView·하이브리드 앱**용 스택(push/back) 네비게이션 라이브러리입니다.  
+`history.pushState`와 CSS 슬라이드 전환으로 네이티브 앱에 가까운 화면 이동을 구현합니다.
 
-## Features
+## 설치
 
-- 🚀 **Stack-based Navigation**: Native-like navigation with push/pop transitions
-- 🎨 **Smooth Animations**: GSAP-powered animations for fluid page transitions
-- 📱 **Mobile-First**: Designed specifically for WebView and mobile applications
-- 🔧 **TypeScript Support**: Full TypeScript support with comprehensive type definitions
-- 🎯 **Flexible**: Customizable animations, layouts, and navigation behavior
+```bash
+npm install @ahnseungchan/webviewkit
+```
 
-## Installation
+**Peer dependencies** (프로젝트에 직접 설치):
 
 ```bash
-npm install @webviewkit
-# or
-yarn add @webviewkit
-# or
-pnpm add @webviewkit
+npm install react react-dom @emotion/react @emotion/styled
 ```
 
 ## Quick Start
 
 ```tsx
-import React from "react";
-import { StackRouterProvider } from "@webviewkit";
+import { StackRouterProvider, useStackRouter } from "@ahnseungchan/webviewkit";
+
+function Home() {
+  const { push } = useStackRouter();
+  return <button onClick={() => push("/about")}>About</button>;
+}
 
-function App() {
+function About() {
+  const { back } = useStackRouter();
+  return <button onClick={back}>Back</button>;
+}
+
+export default function App() {
   return (
     <StackRouterProvider
       maxWidth="600px"
+      enableDevTools
       Activities={[
-        {
-          path: "/",
-          element: <HomePage />,
-        },
-        {
-          path: "/about",
-          element: <AboutPage />,
-        },
+        { path: "/", element: <Home /> },
+        { path: "/about", element: <About /> },
       ]}
-      initialActivity={{ path: "/", element: <HomePage /> }}
+      initialActivity={{ path: "/", element: <Home /> }}
     />
   );
 }
 ```
 
-## Usage
+## Dev Stack Roadmap (1.2.0)
 
-### Basic Navigation
+개발 모드에서 스택이 몇 장 쌓였는지 **눈으로** 확인할 수 있습니다.
 
-```tsx
-import { useStackRouter } from "@webviewkit/core";
+| 옵션 | 동작 |
+|------|------|
+| `enableDevTools={true}` | 우하단 로드맵 항상 표시 |
+| `enableDevTools={false}` | 숨김 |
+| 생략 | `development`에서만 표시, production에서는 숨김 |
 
-function HomePage() {
-  const { push, back } = useStackRouter();
+로드맵에 표시되는 정보:
 
-  return (
-    <div>
-      <h1>Home</h1>
-      <button onClick={() => push("/about")}>Go to About</button>
-      <button onClick={back}>Back</button>
-    </div>
-  );
-}
-```
-
-### History Management
+- **stack × N** — 현재 스택 깊이
+- **점→선** — 쌓인 페이지 순서
+- **경로 목록** — 각 `path`, 최상단에 `← top`
 
 ```tsx
-import { history } from "@webviewkit";
-
-// Navigate to a new page
-await history.push("/new-page", { data: "some data" });
-
-// Replace current page
-await history.replace("/replacement-page", { data: "replacement data" });
-
-// Go back
-await history.back();
+import { StackDevRoadmap } from "@ahnseungchan/webviewkit";
 
-// Go forward
-await history.forward();
+// StackRouterProvider 없이 디버그 UI만 쓸 때
+<StackDevRoadmap
+  pages={[{ path: "/" }, { path: "/detail" }]}
+  currentPath="/detail"
+/>
 ```
 
-## API Reference
+## API
 
-### StackRouterProvider Props
-
-| Prop              | Type                                              | Default   | Description                           |
-| ----------------- | ------------------------------------------------- | --------- | ------------------------------------- |
-| `maxWidth`        | `string`                                          | `"600px"` | Maximum width of the layout container |
-| `isShowHeader`    | `boolean`                                         | `true`    | Whether to show the header            |
-| `Activities`      | `Array<{path: string, element: React.ReactNode}>` | `[]`      | Array of available routes             |
-| `initialActivity` | `{path: string, element: React.ReactNode}`        | -         | Initial route to display              |
-
-### useStackRouter Hook
-
-Returns an object with navigation methods:
-
-- `currentPath`: Current active path
-- `currentState`: Current history state
-- `push(path, data?)`: Navigate to a new page
-- `replace(path, data?)`: Replace current page
-- `back()`: Go back to previous page
-- `forward()`: Go forward to next page
-
-### History API
-
-- `history.push(path, data?)`: Add new history entry
-- `history.replace(path, data?)`: Replace current history entry
-- `history.back()`: Go back to previous entry
-- `history.forward()`: Go forward to next entry
-- `history.go(delta)`: Go to specific history entry
-- `history.getCurrentState()`: Get current history state
-- `history.addListener(listener)`: Add history change listener
-
-## Examples
-
-See the `packages/browser` directory for complete examples.
-
-## Development
-
-```bash
-# Install dependencies
-pnpm install
-
-# Build all packages
-pnpm build
-
-# Run tests
-pnpm test
-
-# Run linting
-pnpm lint
-```
+| Export | 설명 |
+|--------|------|
+| `StackRouterProvider` | 스택 라우터 루트 |
+| `useStackRouter` | `push`, `back`, `replace`, `forward`, `visiblePages` |
+| `history` | `pushState` / `popstate` 래퍼 (SSR-safe) |
+| `BackRouter` | 뒤로가기 버튼 |
+| `StackHeader` | 경로 표시 헤더 |
+| `StackDevRoadmap` | 스택 로드맵 오버레이 |
+| `STACK_TRANSITION_MS` | 전환 ms 상수 (`500`) |
+| `Direction`, `HistoryAction` | 타입·enum |
 
-## Contributing
+## 골디 앱 연동 참고
 
-1. Fork the repository
-2. Create your feature branch (`git checkout -b feature/amazing-feature`)
-3. Commit your changes (`git commit -m 'Add some amazing feature'`)
-4. Push to the branch (`git push origin feature/amazing-feature`)
-5. Open a Pull Request
+B2C WebView에서는 앱 브릿지(`stackRouterBridge`)와 함께 쓰는 경우가 많습니다.  
+이 패키지는 **웹 단독 스택 UI**이며, RN 브릿지와는 별도 레이어입니다.
 
 ## License
 
-This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+MIT

package/dist/constants.d.ts

@@ -0,0 +1,3 @@
+/** push/back 애니메이션·history 지연과 동기화 */
+export declare const STACK_TRANSITION_MS = 500;
+//# sourceMappingURL=constants.d.ts.map

package/dist/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,eAAO,MAAM,mBAAmB,MAAM,CAAC"}

package/dist/constants.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.STACK_TRANSITION_MS = void 0;
+/** push/back 애니메이션·history 지연과 동기화 */
+exports.STACK_TRANSITION_MS = 500;

package/dist/{packages/core/src/history.d.ts → history.d.ts}

@@ -1,10 +1,11 @@
 import { HistoryListener, HistoryState } from "./type";
 export declare const history: {
-    push: (path: string, data?: any) => Promise<void>;
-    replace: (path: string, data: any) => Promise<void>;
+    push: (path: string, data?: unknown) => Promise<void>;
+    replace: (path: string, data?: unknown) => Promise<void>;
     back: () => Promise<void>;
     forward: () => Promise<void>;
     go: (delta: number) => Promise<void>;
     getCurrentState: () => HistoryState;
     addListener: (listener: HistoryListener) => () => boolean;
 };
+//# sourceMappingURL=history.d.ts.map

package/dist/history.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"history.d.ts","sourceRoot":"","sources":["../src/history.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,eAAe,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AAqBtE,eAAO,MAAM,OAAO;iBACC,MAAM,SAAS,OAAO;oBAYnB,MAAM,SAAS,OAAO;;;gBAwC1B,MAAM;2BAUH,YAAY;4BAWT,eAAe;CAIxC,CAAC"}

package/dist/history.js

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.history = void 0;
+const type_1 = require("./type");
+const constants_1 = require("./constants");
+const isBrowser = typeof window !== "undefined";
+const listeners = new Set();
+const notifyListeners = (state) => {
+    listeners.forEach((listener) => listener(state));
+};
+if (isBrowser) {
+    window.addEventListener("popstate", (event) => {
+        const state = event.state;
+        notifyListeners(state);
+    });
+}
+const delay = () => new Promise((resolve) => setTimeout(resolve, constants_1.STACK_TRANSITION_MS * 0.6));
+exports.history = {
+    push: async (path, data) => {
+        if (!isBrowser)
+            return;
+        const state = {
+            path,
+            data,
+            action: type_1.HistoryAction.PUSH,
+        };
+        window.history.pushState(state, "", path);
+        await delay();
+        notifyListeners(state);
+    },
+    replace: async (path, data) => {
+        if (!isBrowser)
+            return;
+        const state = {
+            path,
+            data,
+            action: type_1.HistoryAction.REPLACE,
+        };
+        window.history.replaceState(state, "", path);
+        await delay();
+        notifyListeners(state);
+    },
+    back: async () => {
+        if (!isBrowser)
+            return;
+        window.history.back();
+        await new Promise((resolve) => {
+            const onPop = () => {
+                window.removeEventListener("popstate", onPop);
+                resolve();
+            };
+            window.addEventListener("popstate", onPop);
+        });
+        notifyListeners({
+            path: window.location.pathname,
+            action: type_1.HistoryAction.POP,
+        });
+    },
+    forward: async () => {
+        if (!isBrowser)
+            return;
+        window.history.forward();
+        await delay();
+        notifyListeners({
+            path: window.location.pathname,
+            action: type_1.HistoryAction.PUSH,
+        });
+    },
+    go: async (delta) => {
+        if (!isBrowser)
+            return;
+        window.history.go(delta);
+        await delay();
+        notifyListeners({
+            path: window.location.pathname,
+            action: type_1.HistoryAction.PUSH,
+        });
+    },
+    getCurrentState: () => {
+        if (!isBrowser) {
+            return { path: "/" };
+        }
+        return (window.history.state || {
+            path: window.location.pathname,
+        });
+    },
+    addListener: (listener) => {
+        listeners.add(listener);
+        return () => listeners.delete(listener);
+    },
+};

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export { STACK_TRANSITION_MS } from "./constants";
+export { Direction, HistoryAction } from "./type";
+export type { StackRouterProviderProps, VisiblePage, HistoryState, HistoryListener, DirectionType, } from "./type";
+export { history } from "./history";
+export { default as StackRouterProvider, useStackRouter, } from "./stack-router/stack-router-provider";
+export { default as BackRouter } from "./stack-router/_components/back-router";
+export { default as StackHeader } from "./stack-router/_components/header";
+export { StackDevRoadmap } from "./stack-dev/stack-dev-roadmap";
+//# 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,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAClD,YAAY,EACV,wBAAwB,EACxB,WAAW,EACX,YAAY,EACZ,eAAe,EACf,aAAa,GACd,MAAM,QAAQ,CAAC;AAEhB,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EACL,OAAO,IAAI,mBAAmB,EAC9B,cAAc,GACf,MAAM,sCAAsC,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wCAAwC,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/index.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StackDevRoadmap = exports.StackHeader = exports.BackRouter = exports.useStackRouter = exports.StackRouterProvider = exports.history = exports.HistoryAction = exports.Direction = exports.STACK_TRANSITION_MS = void 0;
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "STACK_TRANSITION_MS", { enumerable: true, get: function () { return constants_1.STACK_TRANSITION_MS; } });
+var type_1 = require("./type");
+Object.defineProperty(exports, "Direction", { enumerable: true, get: function () { return type_1.Direction; } });
+Object.defineProperty(exports, "HistoryAction", { enumerable: true, get: function () { return type_1.HistoryAction; } });
+var history_1 = require("./history");
+Object.defineProperty(exports, "history", { enumerable: true, get: function () { return history_1.history; } });
+var stack_router_provider_1 = require("./stack-router/stack-router-provider");
+Object.defineProperty(exports, "StackRouterProvider", { enumerable: true, get: function () { return __importDefault(stack_router_provider_1).default; } });
+Object.defineProperty(exports, "useStackRouter", { enumerable: true, get: function () { return stack_router_provider_1.useStackRouter; } });
+var back_router_1 = require("./stack-router/_components/back-router");
+Object.defineProperty(exports, "BackRouter", { enumerable: true, get: function () { return __importDefault(back_router_1).default; } });
+var header_1 = require("./stack-router/_components/header");
+Object.defineProperty(exports, "StackHeader", { enumerable: true, get: function () { return __importDefault(header_1).default; } });
+var stack_dev_roadmap_1 = require("./stack-dev/stack-dev-roadmap");
+Object.defineProperty(exports, "StackDevRoadmap", { enumerable: true, get: function () { return stack_dev_roadmap_1.StackDevRoadmap; } });

package/dist/stack-dev/stack-dev-roadmap.d.ts

@@ -0,0 +1,15 @@
+export interface StackDevRoadmapProps {
+    /** 스택에 쌓인 페이지 경로 (아래 → 위 순) */
+    pages: {
+        path: string;
+    }[];
+    currentPath: string;
+    /** false면 렌더하지 않음 */
+    visible?: boolean;
+}
+/**
+ * 개발 환경에서 스택 깊이·경로를 눈으로 확인하는 로드맵 오버레이.
+ * StackRouterProvider `enableDevTools` 와 함께 사용합니다.
+ */
+export declare function StackDevRoadmap({ pages, currentPath, visible, }: StackDevRoadmapProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=stack-dev-roadmap.d.ts.map

package/dist/stack-dev/stack-dev-roadmap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack-dev-roadmap.d.ts","sourceRoot":"","sources":["../../src/stack-dev/stack-dev-roadmap.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,oBAAoB;IACnC,+BAA+B;IAC/B,KAAK,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC1B,WAAW,EAAE,MAAM,CAAC;IACpB,qBAAqB;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,WAAW,EACX,OAAc,GACf,EAAE,oBAAoB,2DAkGtB"}

package/dist/stack-dev/stack-dev-roadmap.js

@@ -0,0 +1,66 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StackDevRoadmap = StackDevRoadmap;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+/**
+ * 개발 환경에서 스택 깊이·경로를 눈으로 확인하는 로드맵 오버레이.
+ * StackRouterProvider `enableDevTools` 와 함께 사용합니다.
+ */
+function StackDevRoadmap({ pages, currentPath, visible = true, }) {
+    if (!visible || pages.length === 0)
+        return null;
+    const depth = pages.length;
+    return ((0, jsx_runtime_1.jsxs)("div", { role: "status", "aria-live": "polite", "aria-label": `WebViewKit stack depth ${depth}`, style: {
+            position: "fixed",
+            bottom: 12,
+            right: 12,
+            zIndex: 2147483646,
+            minWidth: 200,
+            maxWidth: 320,
+            padding: "10px 12px",
+            borderRadius: 10,
+            background: "rgba(7, 11, 18, 0.92)",
+            border: "1px solid rgba(0, 232, 184, 0.35)",
+            color: "#e8eef4",
+            fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace',
+            fontSize: 11,
+            lineHeight: 1.45,
+            boxShadow: "0 8px 24px rgba(0,0,0,0.35)",
+            pointerEvents: "none",
+        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", gap: 8 }, children: [(0, jsx_runtime_1.jsx)("span", { style: { color: "#00e8b8", fontWeight: 700 }, children: "WebViewKit" }), (0, jsx_runtime_1.jsxs)("span", { style: { color: "#94a3b8" }, children: ["stack \u00D7 ", depth] })] }), (0, jsx_runtime_1.jsx)("div", { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 0,
+                    marginTop: 10,
+                    padding: "4px 0",
+                }, children: pages.map((page, index) => {
+                    const isCurrent = page.path === currentPath;
+                    const isLast = index === pages.length - 1;
+                    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [index > 0 && ((0, jsx_runtime_1.jsx)("span", { style: {
+                                    width: 14,
+                                    height: 2,
+                                    background: isLast
+                                        ? "linear-gradient(90deg,#334155,#00e8b8)"
+                                        : "#334155",
+                                    flexShrink: 0,
+                                } })), (0, jsx_runtime_1.jsx)("span", { title: page.path, style: {
+                                    width: isCurrent ? 12 : 8,
+                                    height: isCurrent ? 12 : 8,
+                                    borderRadius: "50%",
+                                    flexShrink: 0,
+                                    background: isCurrent ? "#00e8b8" : "#475569",
+                                    boxShadow: isCurrent ? "0 0 10px rgba(0,232,184,0.85)" : "none",
+                                    transition: "all 0.2s ease",
+                                } })] }, `${page.path}-${index}`));
+                }) }), (0, jsx_runtime_1.jsx)("ol", { style: { margin: "8px 0 0", paddingLeft: 18, color: "#cbd5e1" }, children: pages.map((page, index) => {
+                    const isCurrent = index === pages.length - 1;
+                    return ((0, jsx_runtime_1.jsxs)("li", { style: {
+                            fontWeight: isCurrent ? 600 : 400,
+                            color: isCurrent ? "#00e8b8" : "#94a3b8",
+                        }, children: [page.path, isCurrent ? " ← top" : ""] }, `${page.path}-${index}`));
+                }) })] }));
+}

package/dist/stack-router/_components/back-router.d.ts

@@ -0,0 +1,3 @@
+declare const BackRouter: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export default BackRouter;
+//# sourceMappingURL=back-router.d.ts.map

package/dist/stack-router/_components/back-router.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"back-router.d.ts","sourceRoot":"","sources":["../../../src/stack-router/_components/back-router.tsx"],"names":[],"mappings":"AAIA,QAAA,MAAM,UAAU,wDAOf,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/stack-router/_components/back-router.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const stack_router_provider_1 = require("../stack-router-provider");
+const BackRouter = () => {
+    const { back } = (0, stack_router_provider_1.useStackRouter)();
+    return ((0, jsx_runtime_1.jsx)(BackButton, { onClick: back, children: (0, jsx_runtime_1.jsx)(BackIcon, {}) }));
+};
+exports.default = BackRouter;
+/**
+ styles
+ */
+const BackButton = styled_1.default.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 50%;
+  transition: all 0.2s;
+  color: #000000;
+
+  &:hover {
+    color: #666666;
+  }
+
+  &:active {
+    color: #999999;
+  }
+`;
+const BackIcon = () => ((0, jsx_runtime_1.jsx)("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M12 20L4 12L12 4", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));

package/dist/stack-router/_components/header.d.ts

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

package/dist/stack-router/_components/header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../src/stack-router/_components/header.tsx"],"names":[],"mappings":"AAMA,QAAA,MAAM,MAAM,wDAmBX,CAAC;AAsBF,eAAe,MAAM,CAAC"}

package/dist/stack-router/_components/header.js

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const back_router_1 = __importDefault(require("./back-router"));
+const stack_router_provider_1 = require("../stack-router-provider");
+const constants_1 = require("../../constants");
+const Header = () => {
+    const { currentPath, visiblePages } = (0, stack_router_provider_1.useStackRouter)();
+    const [displayPath, setDisplayPath] = (0, react_1.useState)(currentPath);
+    const [isVisible, setIsVisible] = (0, react_1.useState)(visiblePages.length > 1);
+    (0, react_1.useEffect)(() => {
+        const timer = setTimeout(() => {
+            setDisplayPath(currentPath);
+            setIsVisible(visiblePages.length > 1);
+        }, constants_1.STACK_TRANSITION_MS);
+        return () => clearTimeout(timer);
+    }, [currentPath, visiblePages]);
+    return ((0, jsx_runtime_1.jsxs)(StyledHeader, { children: [isVisible && (0, jsx_runtime_1.jsx)(back_router_1.default, {}), (0, jsx_runtime_1.jsx)(StyledTitle, { children: displayPath })] }));
+};
+/**
+ styles
+ */
+const StyledHeader = styled_1.default.header `
+  width: 100%;
+  height: 64px;
+  background-color: white;
+  border-bottom: 1px solid #e5e7eb;
+  display: flex;
+  align-items: center;
+  padding: 0 1rem;
+`;
+const StyledTitle = styled_1.default.h1 `
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #111827;
+`;
+exports.default = Header;

package/dist/{packages/core/src/stack-router → stack-router}/stack-router-provider.d.ts

@@ -19,10 +19,9 @@ interface StackRouterContextProps {
         path: string;
         element: React.ReactNode;
     }[];
-    ActivitysLayout?: React.ComponentType<{
-        children: React.ReactNode;
-    }>;
 }
 export declare const useStackRouter: () => StackRouterContextProps;
-declare const StackRouter: ({ maxWidth, Activities, initialActivity, ActivitysLayout, }: StackRouterProviderProps) => import("react/jsx-runtime").JSX.Element;
-export default StackRouter;
+declare const StackRouterProvider: ({ maxWidth, Activities, initialActivity, enableDevTools, }: StackRouterProviderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default StackRouterProvider;
+export { StackRouterProvider };
+//# sourceMappingURL=stack-router-provider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stack-router-provider.d.ts","sourceRoot":"","sources":["../../src/stack-router/stack-router-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AAMvF,OAAO,EAEL,YAAY,EAGZ,wBAAwB,EAEzB,MAAM,SAAS,CAAC;AAEjB,UAAU,uBAAuB;IAC/B,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,YAAY,CAAC;IAC3B,UAAU,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,EAAE,CAAC;IACzD,eAAe,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,CAAC;IAC5D,IAAI,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IACzC,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAC5C,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,EAAE,CAAC;CAC5D;AAID,eAAO,MAAM,cAAc,+BAM1B,CAAC;AAEF,QAAA,MAAM,mBAAmB,GAAI,4DAK1B,wBAAwB,qDAiI1B,CAAC;AAEF,eAAe,mBAAmB,CAAC;AACnC,OAAO,EAAE,mBAAmB,EAAE,CAAC"}