cross-app-launcher 0.0.0-beta.1

package/README.md

@@ -0,0 +1,209 @@
+# app-launcher
+
+CROSS 생태계 서비스 전체에서 사용하는 통합 앱 런처 메뉴 컴포넌트.
+
+S3에 호스팅된 글로벌 메뉴 메타데이터를 fetch하여 일관된 UI로 렌더링한다. Desktop에서는 Popover, Mobile에서는 오른쪽 Drawer로 자동 전환된다.
+
+## Install
+
+```bash
+npm install cross-app-launcher
+```
+
+### Peer Dependencies
+
+소비자 프로젝트에 아래 패키지가 이미 설치되어 있어야 한다.
+
+- `react` >= 18
+- `react-dom` >= 18
+- `@tanstack/react-query` >= 5
+
+## Quick Start
+
+```tsx
+import {
+  AppLauncher,
+  AppLauncherTrigger,
+  AppLauncherContent,
+} from "cross-app-launcher";
+
+function MyNav() {
+  return (
+    <AppLauncher>
+      <AppLauncherTrigger />
+      <AppLauncherContent />
+    </AppLauncher>
+  );
+}
+```
+
+모든 prop은 optional이며, 별도의 CSS import 없이 스타일이 자동 적용된다.
+
+### Next.js에서 사용
+
+```tsx
+import { useRouter } from "next/navigation";
+
+function MyNav() {
+  const router = useRouter();
+
+  return (
+    <AppLauncher
+      env={process.env.NEXT_PUBLIC_ENV as "dev" | "stage" | "production"}
+      onNavigate={(path) => router.push(path)}
+    >
+      <AppLauncherTrigger />
+      <AppLauncherContent />
+    </AppLauncher>
+  );
+}
+```
+
+## Components
+
+### `<AppLauncher>`
+
+Root 컴포넌트. Context Provider + Popover/Drawer Root 역할.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `env` | `'dev' \| 'stage' \| 'production'` | `'production'` | 환경에 따라 메뉴 아이템의 URL이 결정된다 |
+| `theme` | `'dark' \| 'light'` | `'dark'` | 다크/라이트 테마 |
+| `mobileBreakpoint` | `number` | `768` | 이 px 이하에서 Drawer로 전환 |
+| `onNavigate` | `(path: string) => void` | - | 같은 도메인 내 이동 시 호출. 없으면 `window.location.href`로 풀 리로드 |
+| `domain` | `string` | `window.location.hostname` | 내부/외부 링크 판별 기준 도메인. 보통 넘기지 않아도 된다 |
+
+### `<AppLauncherTrigger>`
+
+Trigger 버튼. children 없이 사용하면 기본 dots grid 아이콘 버튼이 렌더링된다. 열림 상태에서 배경색이 자동 변경된다.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `asChild` | `boolean` | `true` | `true`이면 자식 엘리먼트를 trigger로 사용 (Radix 패턴) |
+
+```tsx
+// 기본 트리거 사용
+<AppLauncherTrigger />
+
+// 커스텀 트리거 사용
+<AppLauncherTrigger>
+  <button>Menu</button>
+</AppLauncherTrigger>
+```
+
+### `<AppLauncherContent>`
+
+메뉴 콘텐츠. 2열 그리드 레이아웃. 패키지가 디자인을 통제한다.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `align` | `'start' \| 'center' \| 'end'` | `'end'` | 팝오버 정렬 위치 (Desktop only) |
+| `sideOffset` | `number` | `12` | trigger와의 간격 px (Desktop) |
+| `className` | `string` | - | 추가 CSS 클래스 |
+
+## Link Handling
+
+패키지가 내부/외부 링크를 자동으로 판별하여 처리한다.
+
+- **같은 도메인** → `onNavigate(path)` 호출 (없으면 `window.location.href`로 이동)
+- **다른 도메인** → `window.open`으로 새 창 열기
+
+도메인 판별은 `window.location.hostname` 기준이므로 `domain` prop을 넘기지 않아도 된다.
+
+### Active State
+
+현재 페이지에 해당하는 메뉴 아이템에 `data-active="true"` 속성이 설정된다. URL의 locale prefix (`/en/` 등)와 dynamic path (`/gametoken/CROSS/CROMx` 등)가 포함된 경우에도 정상 판별된다.
+
+## Responsive
+
+- **Desktop** (`> mobileBreakpoint`): Popover로 렌더링
+- **Mobile** (`<= mobileBreakpoint`): 오른쪽 Drawer로 렌더링 (뒤로가기 화살표 + 닫기 버튼 포함)
+
+소비자는 별도의 분기 처리 없이 패키지가 자동으로 전환한다. 드로어에서 드래그 시 서비스 아이템 클릭이 방지된다.
+
+## Data Source
+
+메뉴 데이터는 S3에서 자동으로 fetch된다.
+
+- `@tanstack/react-query`의 `useQuery` 사용
+- 캐시 전략: `no-cache` (항상 최신 데이터)
+- 메뉴 아이템은 `order` 필드 기준으로 정렬
+
+### `useGlobalMenu` Hook
+
+패키지에서 `useGlobalMenu` hook도 export한다.
+
+```tsx
+import { useGlobalMenu } from "cross-app-launcher";
+
+function MyComponent() {
+  const { data, isLoading } = useGlobalMenu();
+  // data.items: GlobalMenuItem[]
+}
+```
+
+## Styling
+
+- Vanilla CSS + CSS Custom Properties
+- 클래스명은 `al-` 접두사로 네임스페이스 충돌 방지
+- `injectStyle`로 CSS가 JS에 포함되어 별도 CSS import 불필요
+- 테마는 `data-theme` 속성으로 전환
+
+### CSS Custom Properties
+
+필요 시 CSS 변수를 override하여 커스텀 가능:
+
+| Variable | Description |
+| --- | --- |
+| `--al-bg` | 배경색 |
+| `--al-bg-hover` | hover 배경색 |
+| `--al-text` | 기본 텍스트 색 |
+| `--al-text-secondary` | 보조 텍스트 색 |
+| `--al-border` | 테두리 색 |
+| `--al-shadow` | 박스 그림자 |
+| `--al-badge-bg` | 뱃지 배경색 |
+| `--al-badge-text` | 뱃지 텍스트 색 |
+| `--al-badge-new-text` | New 뱃지 텍스트 색 |
+| `--al-drawer-overlay` | Drawer 오버레이 색 |
+
+## Types
+
+```ts
+type Environment = "dev" | "stage" | "production";
+
+interface GlobalMenuItem {
+  id: string;
+  label: string;
+  description: string;
+  url: { dev: string; stage: string; production: string };
+  iconUrl: string;
+  order: number;
+  type: string;
+  badge: string | null;
+  isNew: boolean;
+}
+
+interface GlobalMenu {
+  version: string;
+  items: GlobalMenuItem[];
+}
+```
+
+## Architecture
+
+```
+AppLauncher (Provider + Popover.Root / Drawer.Root)
+├── AppLauncherTrigger (headless - 기본 아이콘 또는 소비자 제공)
+└── AppLauncherContent (styled - 패키지 통제)
+    ├── Desktop → Popover.Content (2열 그리드)
+    └── Mobile  → Drawer.Content  (뒤로가기 + 닫기 헤더, 1열 그리드)
+```
+
+## Development
+
+```bash
+npm install
+npm run build       # 빌드
+npm run dev         # watch 모드
+npm run typecheck   # 타입 체크
+```

package/dist/index.cjs

@@ -0,0 +1,378 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AppLauncher: () => AppLauncher,
+  AppLauncherContent: () => AppLauncherContent,
+  AppLauncherTrigger: () => AppLauncherTrigger,
+  useGlobalMenu: () => useGlobalMenu
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/AppLauncher.tsx
+var React = __toESM(require("react"), 1);
+var Popover = __toESM(require("@radix-ui/react-popover"), 1);
+var import_vaul = require("vaul");
+
+// src/context.ts
+var import_react = require("react");
+var AppLauncherContext = (0, import_react.createContext)(
+  null
+);
+function useAppLauncherContext() {
+  const ctx = (0, import_react.useContext)(AppLauncherContext);
+  if (!ctx) {
+    throw new Error(
+      "AppLauncher compound components must be used within <AppLauncher>"
+    );
+  }
+  return ctx;
+}
+
+// src/hooks/useMediaQuery.ts
+var import_react2 = require("react");
+function useMediaQuery(query) {
+  const [matches, setMatches] = (0, import_react2.useState)(false);
+  (0, import_react2.useEffect)(() => {
+    const mql = window.matchMedia(query);
+    setMatches(mql.matches);
+    const handler = (e) => setMatches(e.matches);
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
+  }, [query]);
+  return matches;
+}
+
+// src/components/AppLauncher.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function AppLauncher({
+  env = "production",
+  theme = "dark",
+  mobileBreakpoint = 768,
+  domain,
+  onNavigate,
+  children
+}) {
+  const isMobile = useMediaQuery(`(max-width: ${mobileBreakpoint}px)`);
+  const [open, setOpen] = React.useState(false);
+  const close = React.useCallback(() => setOpen(false), []);
+  const contextValue = React.useMemo(
+    () => ({ env, theme, isMobile, open, domain, onNavigate, close }),
+    [env, theme, isMobile, open, domain, onNavigate, close]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AppLauncherContext.Provider, { value: contextValue, children: isMobile ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_vaul.Drawer.Root,
+    {
+      direction: "right",
+      open,
+      onOpenChange: setOpen,
+      children
+    },
+    "drawer"
+  ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Popover.Root, { open, onOpenChange: setOpen, children }, "popover") });
+}
+
+// src/components/AppLauncherTrigger.tsx
+var Popover2 = __toESM(require("@radix-ui/react-popover"), 1);
+var import_vaul2 = require("vaul");
+
+// src/components/icons.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function DotsGridIcon({ size = 18 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "svg",
+    {
+      className: "al-trigger-icon",
+      width: size,
+      height: size,
+      viewBox: "0 0 18 18",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { width: "4", height: "4", fill: "currentColor" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "7", width: "4", height: "4", fill: "currentColor" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "14", width: "4", height: "4", fill: "currentColor" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { y: "7", width: "4", height: "4", fill: "currentColor" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "7", y: "7", width: "4", height: "4", fill: "currentColor" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "14", y: "7", width: "4", height: "4", fill: "currentColor" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { y: "14", width: "4", height: "4", fill: "currentColor" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "7", y: "14", width: "4", height: "4", fill: "currentColor" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "14", y: "14", width: "4", height: "4", fill: "currentColor" })
+      ]
+    }
+  );
+}
+function BackArrowIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "path",
+        {
+          d: "M12 19L5 12M5 12L12 5M5 12H19",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function CloseIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "path",
+        {
+          d: "M15 5L5 15M5 5L15 15",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+
+// src/components/AppLauncherTrigger.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function AppLauncherTrigger({
+  asChild,
+  children
+}) {
+  const { isMobile, theme } = useAppLauncherContext();
+  const hasChildren = children != null;
+  const shouldAsChild = asChild ?? true;
+  const triggerContent = hasChildren ? children : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", className: "al-trigger-btn", "data-theme": theme, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DotsGridIcon, { size: isMobile ? 12 : 18 }) });
+  if (isMobile) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_vaul2.Drawer.Trigger, { asChild: shouldAsChild, children: triggerContent });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Popover2.Trigger, { asChild: shouldAsChild, children: triggerContent });
+}
+
+// src/components/AppLauncherContent.tsx
+var React2 = __toESM(require("react"), 1);
+var Popover3 = __toESM(require("@radix-ui/react-popover"), 1);
+var import_vaul3 = require("vaul");
+
+// src/hooks/useGlobalMenu.ts
+var import_react_query = require("@tanstack/react-query");
+var GLOBAL_MENU_URL = "https://contents.crosstoken.io/frontend/common/app-launcher/app-launcher.json";
+function useGlobalMenu() {
+  return (0, import_react_query.useQuery)({
+    queryKey: ["global-menu"],
+    queryFn: async () => {
+      const res = await fetch(GLOBAL_MENU_URL, { cache: "no-store" });
+      if (!res.ok) {
+        throw new Error(`Failed to fetch global menu: ${res.status}`);
+      }
+      return res.json();
+    },
+    staleTime: 0,
+    gcTime: 0,
+    refetchOnMount: true
+  });
+}
+
+// #style-inject:#style-inject
+function styleInject(css, { insertAt } = {}) {
+  if (!css || typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+// src/styles.css
+styleInject("[data-theme=dark] {\n  --al-bg: #1e232e;\n  --al-bg-hover: #252b39;\n  --al-text: hsla(200, 19%, 94%, 1);\n  --al-text-secondary: hsla(200, 10%, 70%, 1);\n  --al-border: #3b4153;\n  --al-shadow: 0 2px 8px -1px rgba(0, 0, 0, 0.15);\n  --al-badge-bg: #123f3c;\n  --al-badge-text: hsla(168, 85%, 47%, 1);\n  --al-badge-new-text: #000;\n  --al-drawer-overlay: rgba(0, 0, 0, 0.6);\n}\n[data-theme=light] {\n  --al-bg: #fff;\n  --al-bg-hover: #f3f6f8;\n  --al-text: hsla(221, 21%, 15%, 1);\n  --al-text-secondary: hsla(220, 10%, 40%, 1);\n  --al-border: #ecf0f2;\n  --al-shadow: 0 2px 8px -1px rgba(0, 0, 0, 0.15);\n  --al-badge-bg: #cdf4ed;\n  --al-badge-text: hsla(170, 82%, 32%, 1);\n  --al-badge-new-text: #fff;\n  --al-drawer-overlay: rgba(0, 0, 0, 0.4);\n}\n.al-trigger-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 8px;\n  border: none;\n  background: transparent;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n}\n.al-trigger-btn:hover {\n  background: rgba(128, 128, 128, 0.1);\n}\n.al-trigger-btn[data-theme=dark] {\n  color: hsla(200, 19%, 94%, 1);\n}\n.al-trigger-btn[data-theme=light] {\n  color: hsla(221, 21%, 15%, 1);\n}\n[data-state=open] > .al-trigger-btn[data-theme=dark],\n.al-trigger-btn[data-state=open][data-theme=dark] {\n  border-radius: 14px;\n  background: #161b22;\n}\n[data-state=open] > .al-trigger-btn[data-theme=light],\n.al-trigger-btn[data-state=open][data-theme=light] {\n  border-radius: 14px;\n  background: #ecf0f2;\n}\n.al-popover-content {\n  z-index: 50;\n  border-radius: 12px;\n  background: var(--al-bg);\n  border: 1px solid var(--al-border);\n  box-shadow: var(--al-shadow);\n  animation: al-fade-in 0.15s ease-out;\n  max-height: 80vh;\n  overflow-x: hidden;\n  overflow-y: auto;\n}\n@keyframes al-fade-in {\n  from {\n    opacity: 0;\n    transform: translateY(-4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n.al-drawer-overlay {\n  position: fixed;\n  inset: 0;\n  z-index: 49;\n  background: var(--al-drawer-overlay);\n}\n.al-drawer-content {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 50;\n  width: 360px;\n  max-width: 100vw;\n  background: var(--al-bg);\n  overflow-x: hidden;\n  overflow-y: hidden;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n}\n.al-drawer-body {\n  flex: 1;\n  overflow-y: auto;\n  overscroll-behavior-y: contain;\n  min-height: 0;\n}\n.al-drawer-content .al-grid {\n  grid-template-columns: 1fr;\n  max-width: 100%;\n  overflow: hidden;\n  flex-shrink: 0;\n  gap: 4px;\n}\n.al-drawer-content .al-grid-item {\n  max-width: 100%;\n  overflow: hidden;\n}\n.al-drawer-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  flex-shrink: 0;\n}\n.al-drawer-title {\n  font-family: Inter, sans-serif;\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--al-text);\n  margin: 0;\n}\n.al-drawer-close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 4px;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  color: var(--al-text);\n  transition: opacity 0.15s ease;\n}\n.al-drawer-close:hover {\n  opacity: 0.7;\n}\n.al-grid {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 4px;\n  padding: 8px;\n}\n.al-grid-item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 10px;\n  padding: 16px 12px;\n  border: none;\n  background: transparent;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n  color: var(--al-text);\n  text-align: left;\n  font-family: Inter, sans-serif;\n  flex-shrink: 0;\n}\n.al-grid-item:hover,\n.al-grid-item[data-active=true] {\n  background: var(--al-bg-hover);\n}\n.al-grid-item-left {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n  overflow: hidden;\n}\n.al-grid-item-right {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-shrink: 0;\n}\n.al-grid-item-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  flex-shrink: 0;\n}\n.al-grid-item-icon img {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n}\n.al-grid-item-label {\n  font-family: Inter, sans-serif;\n  font-size: 16px;\n  font-weight: 500;\n  line-height: 150%;\n  letter-spacing: -0.16px;\n  color: var(--al-text);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.al-badge {\n  display: flex;\n  padding: 1px 4px 2px 4px;\n  justify-content: center;\n  align-items: center;\n  gap: 2px;\n  border-radius: 3px;\n  background: var(--al-badge-bg);\n  color: var(--al-badge-text);\n  font-family:\n    Pretendard,\n    Inter,\n    sans-serif;\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 150%;\n  letter-spacing: -0.1px;\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n.al-badge-new {\n  display: flex;\n  width: 16px;\n  height: 16px;\n  justify-content: center;\n  align-items: center;\n  aspect-ratio: 1/1;\n  border-radius: 12px;\n  background: #7346f3;\n  color: var(--al-badge-new-text);\n  font-family:\n    Pretendard,\n    Inter,\n    sans-serif;\n  font-size: 9px;\n  font-weight: 700;\n  flex-shrink: 0;\n}\n");
+
+// src/components/AppLauncherContent.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function AppLauncherContent({
+  align = "end",
+  sideOffset = 12,
+  className
+}) {
+  const { env, theme, isMobile, domain, onNavigate, close } = useAppLauncherContext();
+  const { data } = useGlobalMenu();
+  const items = React2.useMemo(
+    () => (data?.items ?? []).sort((a, b) => a.order - b.order),
+    [data]
+  );
+  const DRAG_THRESHOLD = 8;
+  const pointerStart = React2.useRef(null);
+  const handlePointerDown = React2.useCallback((e) => {
+    pointerStart.current = { x: e.clientX, y: e.clientY };
+  }, []);
+  const handleItemClick = React2.useCallback(
+    (e, item) => {
+      if (pointerStart.current) {
+        const dx = e.clientX - pointerStart.current.x;
+        const dy = e.clientY - pointerStart.current.y;
+        pointerStart.current = null;
+        if (Math.abs(dx) > DRAG_THRESHOLD || Math.abs(dy) > DRAG_THRESHOLD) {
+          return;
+        }
+      }
+      const url = item.url[env] ?? item.url.production;
+      const isExternal = isExternalLink(url, domain);
+      if (isExternal) {
+        window.open(url, "_blank", "noopener,noreferrer");
+      } else {
+        const path = new URL(url).pathname;
+        if (onNavigate) {
+          onNavigate(path);
+        } else {
+          window.location.href = path;
+        }
+      }
+      close();
+    },
+    [env, domain, onNavigate, close]
+  );
+  const currentPathname = typeof window !== "undefined" ? window.location.pathname : "";
+  const menuContent = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "al-grid", "data-theme": theme, children: items.map((item) => {
+    const url = item.url[env] ?? item.url.production;
+    const isExternal = isExternalLink(url, domain);
+    let isActive = false;
+    if (!isExternal) {
+      try {
+        const urlPathname = new URL(url).pathname;
+        isActive = currentPathname === urlPathname || currentPathname.startsWith(urlPathname + "/");
+      } catch {
+        isActive = false;
+      }
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "button",
+      {
+        type: "button",
+        className: "al-grid-item",
+        "data-active": isActive || void 0,
+        onPointerDown: handlePointerDown,
+        onClick: (e) => handleItemClick(e, item),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "al-grid-item-left", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "al-grid-item-icon", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "img",
+              {
+                src: item.iconUrl,
+                alt: item.label,
+                width: 24,
+                height: 24,
+                loading: "lazy"
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "al-grid-item-label", children: item.label }),
+            item.isNew && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "al-badge-new", children: "N" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "al-grid-item-right", children: item.badge && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "al-badge", children: item.badge }) })
+        ]
+      },
+      item.id
+    );
+  }) });
+  if (isMobile) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_vaul3.Drawer.Portal, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_vaul3.Drawer.Overlay, { className: "al-drawer-overlay" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        import_vaul3.Drawer.Content,
+        {
+          className: cn("al-drawer-content", className),
+          "data-theme": theme,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "al-drawer-header", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_vaul3.Drawer.Close, { className: "al-drawer-close", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BackArrowIcon, {}) }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_vaul3.Drawer.Title, { className: "al-drawer-title", children: "CROSS Services" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_vaul3.Drawer.Close, { className: "al-drawer-close", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CloseIcon, {}) })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "al-drawer-body", children: menuContent })
+          ]
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Popover3.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    Popover3.Content,
+    {
+      align,
+      sideOffset,
+      className: cn("al-popover-content", className),
+      "data-theme": theme,
+      children: menuContent
+    }
+  ) });
+}
+function isExternalLink(url, domain) {
+  try {
+    const linkHostname = new URL(url).hostname;
+    if (typeof window === "undefined") return true;
+    return linkHostname !== (domain ?? window.location.hostname);
+  } catch {
+    return false;
+  }
+}
+function cn(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AppLauncher,
+  AppLauncherContent,
+  AppLauncherTrigger,
+  useGlobalMenu
+});

package/dist/index.d.cts

@@ -0,0 +1,52 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import * as _tanstack_react_query from '@tanstack/react-query';
+
+type Environment = "dev" | "stage" | "production";
+interface GlobalMenuItemUrl {
+    dev: string;
+    stage: string;
+    production: string;
+}
+interface GlobalMenuItem {
+    id: string;
+    label: string;
+    description: string;
+    url: GlobalMenuItemUrl;
+    iconUrl: string;
+    order: number;
+    type: string;
+    badge: string | null;
+    isNew: boolean;
+}
+interface GlobalMenu {
+    version: string;
+    items: GlobalMenuItem[];
+}
+
+interface AppLauncherProps {
+    env?: Environment;
+    theme?: "dark" | "light";
+    mobileBreakpoint?: number;
+    domain?: string;
+    onNavigate?: (path: string) => void;
+    children: React.ReactNode;
+}
+declare function AppLauncher({ env, theme, mobileBreakpoint, domain, onNavigate, children, }: AppLauncherProps): react_jsx_runtime.JSX.Element;
+
+interface AppLauncherTriggerProps {
+    asChild?: boolean;
+    children?: React.ReactNode;
+}
+declare function AppLauncherTrigger({ asChild, children, }: AppLauncherTriggerProps): react_jsx_runtime.JSX.Element;
+
+interface AppLauncherContentProps {
+    align?: "start" | "center" | "end";
+    sideOffset?: number;
+    className?: string;
+}
+declare function AppLauncherContent({ align, sideOffset, className, }: AppLauncherContentProps): react_jsx_runtime.JSX.Element;
+
+declare function useGlobalMenu(): _tanstack_react_query.UseQueryResult<GlobalMenu, Error>;
+
+export { AppLauncher, AppLauncherContent, type AppLauncherContentProps, type AppLauncherProps, AppLauncherTrigger, type AppLauncherTriggerProps, type Environment, type GlobalMenu, type GlobalMenuItem, type GlobalMenuItemUrl, useGlobalMenu };

package/dist/index.d.ts

@@ -0,0 +1,52 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import * as _tanstack_react_query from '@tanstack/react-query';
+
+type Environment = "dev" | "stage" | "production";
+interface GlobalMenuItemUrl {
+    dev: string;
+    stage: string;
+    production: string;
+}
+interface GlobalMenuItem {
+    id: string;
+    label: string;
+    description: string;
+    url: GlobalMenuItemUrl;
+    iconUrl: string;
+    order: number;
+    type: string;
+    badge: string | null;
+    isNew: boolean;
+}
+interface GlobalMenu {
+    version: string;
+    items: GlobalMenuItem[];
+}
+
+interface AppLauncherProps {
+    env?: Environment;
+    theme?: "dark" | "light";
+    mobileBreakpoint?: number;
+    domain?: string;
+    onNavigate?: (path: string) => void;
+    children: React.ReactNode;
+}
+declare function AppLauncher({ env, theme, mobileBreakpoint, domain, onNavigate, children, }: AppLauncherProps): react_jsx_runtime.JSX.Element;
+
+interface AppLauncherTriggerProps {
+    asChild?: boolean;
+    children?: React.ReactNode;
+}
+declare function AppLauncherTrigger({ asChild, children, }: AppLauncherTriggerProps): react_jsx_runtime.JSX.Element;
+
+interface AppLauncherContentProps {
+    align?: "start" | "center" | "end";
+    sideOffset?: number;
+    className?: string;
+}
+declare function AppLauncherContent({ align, sideOffset, className, }: AppLauncherContentProps): react_jsx_runtime.JSX.Element;
+
+declare function useGlobalMenu(): _tanstack_react_query.UseQueryResult<GlobalMenu, Error>;
+
+export { AppLauncher, AppLauncherContent, type AppLauncherContentProps, type AppLauncherProps, AppLauncherTrigger, type AppLauncherTriggerProps, type Environment, type GlobalMenu, type GlobalMenuItem, type GlobalMenuItemUrl, useGlobalMenu };

package/dist/index.js

@@ -0,0 +1,338 @@
+// src/components/AppLauncher.tsx
+import * as React from "react";
+import * as Popover from "@radix-ui/react-popover";
+import { Drawer } from "vaul";
+
+// src/context.ts
+import { createContext, useContext } from "react";
+var AppLauncherContext = createContext(
+  null
+);
+function useAppLauncherContext() {
+  const ctx = useContext(AppLauncherContext);
+  if (!ctx) {
+    throw new Error(
+      "AppLauncher compound components must be used within <AppLauncher>"
+    );
+  }
+  return ctx;
+}
+
+// src/hooks/useMediaQuery.ts
+import { useState, useEffect } from "react";
+function useMediaQuery(query) {
+  const [matches, setMatches] = useState(false);
+  useEffect(() => {
+    const mql = window.matchMedia(query);
+    setMatches(mql.matches);
+    const handler = (e) => setMatches(e.matches);
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
+  }, [query]);
+  return matches;
+}
+
+// src/components/AppLauncher.tsx
+import { jsx } from "react/jsx-runtime";
+function AppLauncher({
+  env = "production",
+  theme = "dark",
+  mobileBreakpoint = 768,
+  domain,
+  onNavigate,
+  children
+}) {
+  const isMobile = useMediaQuery(`(max-width: ${mobileBreakpoint}px)`);
+  const [open, setOpen] = React.useState(false);
+  const close = React.useCallback(() => setOpen(false), []);
+  const contextValue = React.useMemo(
+    () => ({ env, theme, isMobile, open, domain, onNavigate, close }),
+    [env, theme, isMobile, open, domain, onNavigate, close]
+  );
+  return /* @__PURE__ */ jsx(AppLauncherContext.Provider, { value: contextValue, children: isMobile ? /* @__PURE__ */ jsx(
+    Drawer.Root,
+    {
+      direction: "right",
+      open,
+      onOpenChange: setOpen,
+      children
+    },
+    "drawer"
+  ) : /* @__PURE__ */ jsx(Popover.Root, { open, onOpenChange: setOpen, children }, "popover") });
+}
+
+// src/components/AppLauncherTrigger.tsx
+import * as Popover2 from "@radix-ui/react-popover";
+import { Drawer as Drawer2 } from "vaul";
+
+// src/components/icons.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function DotsGridIcon({ size = 18 }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: "al-trigger-icon",
+      width: size,
+      height: size,
+      viewBox: "0 0 18 18",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx2("rect", { width: "4", height: "4", fill: "currentColor" }),
+        /* @__PURE__ */ jsx2("rect", { x: "7", width: "4", height: "4", fill: "currentColor" }),
+        /* @__PURE__ */ jsx2("rect", { x: "14", width: "4", height: "4", fill: "currentColor" }),
+        /* @__PURE__ */ jsx2("rect", { y: "7", width: "4", height: "4", fill: "currentColor" }),
+        /* @__PURE__ */ jsx2("rect", { x: "7", y: "7", width: "4", height: "4", fill: "currentColor" }),
+        /* @__PURE__ */ jsx2("rect", { x: "14", y: "7", width: "4", height: "4", fill: "currentColor" }),
+        /* @__PURE__ */ jsx2("rect", { y: "14", width: "4", height: "4", fill: "currentColor" }),
+        /* @__PURE__ */ jsx2("rect", { x: "7", y: "14", width: "4", height: "4", fill: "currentColor" }),
+        /* @__PURE__ */ jsx2("rect", { x: "14", y: "14", width: "4", height: "4", fill: "currentColor" })
+      ]
+    }
+  );
+}
+function BackArrowIcon() {
+  return /* @__PURE__ */ jsx2(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx2(
+        "path",
+        {
+          d: "M12 19L5 12M5 12L12 5M5 12H19",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function CloseIcon() {
+  return /* @__PURE__ */ jsx2(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx2(
+        "path",
+        {
+          d: "M15 5L5 15M5 5L15 15",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+
+// src/components/AppLauncherTrigger.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function AppLauncherTrigger({
+  asChild,
+  children
+}) {
+  const { isMobile, theme } = useAppLauncherContext();
+  const hasChildren = children != null;
+  const shouldAsChild = asChild ?? true;
+  const triggerContent = hasChildren ? children : /* @__PURE__ */ jsx3("button", { type: "button", className: "al-trigger-btn", "data-theme": theme, children: /* @__PURE__ */ jsx3(DotsGridIcon, { size: isMobile ? 12 : 18 }) });
+  if (isMobile) {
+    return /* @__PURE__ */ jsx3(Drawer2.Trigger, { asChild: shouldAsChild, children: triggerContent });
+  }
+  return /* @__PURE__ */ jsx3(Popover2.Trigger, { asChild: shouldAsChild, children: triggerContent });
+}
+
+// src/components/AppLauncherContent.tsx
+import * as React2 from "react";
+import * as Popover3 from "@radix-ui/react-popover";
+import { Drawer as Drawer3 } from "vaul";
+
+// src/hooks/useGlobalMenu.ts
+import { useQuery } from "@tanstack/react-query";
+var GLOBAL_MENU_URL = "https://contents.crosstoken.io/frontend/common/app-launcher/app-launcher.json";
+function useGlobalMenu() {
+  return useQuery({
+    queryKey: ["global-menu"],
+    queryFn: async () => {
+      const res = await fetch(GLOBAL_MENU_URL, { cache: "no-store" });
+      if (!res.ok) {
+        throw new Error(`Failed to fetch global menu: ${res.status}`);
+      }
+      return res.json();
+    },
+    staleTime: 0,
+    gcTime: 0,
+    refetchOnMount: true
+  });
+}
+
+// #style-inject:#style-inject
+function styleInject(css, { insertAt } = {}) {
+  if (!css || typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+// src/styles.css
+styleInject("[data-theme=dark] {\n  --al-bg: #1e232e;\n  --al-bg-hover: #252b39;\n  --al-text: hsla(200, 19%, 94%, 1);\n  --al-text-secondary: hsla(200, 10%, 70%, 1);\n  --al-border: #3b4153;\n  --al-shadow: 0 2px 8px -1px rgba(0, 0, 0, 0.15);\n  --al-badge-bg: #123f3c;\n  --al-badge-text: hsla(168, 85%, 47%, 1);\n  --al-badge-new-text: #000;\n  --al-drawer-overlay: rgba(0, 0, 0, 0.6);\n}\n[data-theme=light] {\n  --al-bg: #fff;\n  --al-bg-hover: #f3f6f8;\n  --al-text: hsla(221, 21%, 15%, 1);\n  --al-text-secondary: hsla(220, 10%, 40%, 1);\n  --al-border: #ecf0f2;\n  --al-shadow: 0 2px 8px -1px rgba(0, 0, 0, 0.15);\n  --al-badge-bg: #cdf4ed;\n  --al-badge-text: hsla(170, 82%, 32%, 1);\n  --al-badge-new-text: #fff;\n  --al-drawer-overlay: rgba(0, 0, 0, 0.4);\n}\n.al-trigger-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 8px;\n  border: none;\n  background: transparent;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n}\n.al-trigger-btn:hover {\n  background: rgba(128, 128, 128, 0.1);\n}\n.al-trigger-btn[data-theme=dark] {\n  color: hsla(200, 19%, 94%, 1);\n}\n.al-trigger-btn[data-theme=light] {\n  color: hsla(221, 21%, 15%, 1);\n}\n[data-state=open] > .al-trigger-btn[data-theme=dark],\n.al-trigger-btn[data-state=open][data-theme=dark] {\n  border-radius: 14px;\n  background: #161b22;\n}\n[data-state=open] > .al-trigger-btn[data-theme=light],\n.al-trigger-btn[data-state=open][data-theme=light] {\n  border-radius: 14px;\n  background: #ecf0f2;\n}\n.al-popover-content {\n  z-index: 50;\n  border-radius: 12px;\n  background: var(--al-bg);\n  border: 1px solid var(--al-border);\n  box-shadow: var(--al-shadow);\n  animation: al-fade-in 0.15s ease-out;\n  max-height: 80vh;\n  overflow-x: hidden;\n  overflow-y: auto;\n}\n@keyframes al-fade-in {\n  from {\n    opacity: 0;\n    transform: translateY(-4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n.al-drawer-overlay {\n  position: fixed;\n  inset: 0;\n  z-index: 49;\n  background: var(--al-drawer-overlay);\n}\n.al-drawer-content {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 50;\n  width: 360px;\n  max-width: 100vw;\n  background: var(--al-bg);\n  overflow-x: hidden;\n  overflow-y: hidden;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n}\n.al-drawer-body {\n  flex: 1;\n  overflow-y: auto;\n  overscroll-behavior-y: contain;\n  min-height: 0;\n}\n.al-drawer-content .al-grid {\n  grid-template-columns: 1fr;\n  max-width: 100%;\n  overflow: hidden;\n  flex-shrink: 0;\n  gap: 4px;\n}\n.al-drawer-content .al-grid-item {\n  max-width: 100%;\n  overflow: hidden;\n}\n.al-drawer-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  flex-shrink: 0;\n}\n.al-drawer-title {\n  font-family: Inter, sans-serif;\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--al-text);\n  margin: 0;\n}\n.al-drawer-close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 4px;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  color: var(--al-text);\n  transition: opacity 0.15s ease;\n}\n.al-drawer-close:hover {\n  opacity: 0.7;\n}\n.al-grid {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 4px;\n  padding: 8px;\n}\n.al-grid-item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 10px;\n  padding: 16px 12px;\n  border: none;\n  background: transparent;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n  color: var(--al-text);\n  text-align: left;\n  font-family: Inter, sans-serif;\n  flex-shrink: 0;\n}\n.al-grid-item:hover,\n.al-grid-item[data-active=true] {\n  background: var(--al-bg-hover);\n}\n.al-grid-item-left {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n  overflow: hidden;\n}\n.al-grid-item-right {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-shrink: 0;\n}\n.al-grid-item-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  flex-shrink: 0;\n}\n.al-grid-item-icon img {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n}\n.al-grid-item-label {\n  font-family: Inter, sans-serif;\n  font-size: 16px;\n  font-weight: 500;\n  line-height: 150%;\n  letter-spacing: -0.16px;\n  color: var(--al-text);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.al-badge {\n  display: flex;\n  padding: 1px 4px 2px 4px;\n  justify-content: center;\n  align-items: center;\n  gap: 2px;\n  border-radius: 3px;\n  background: var(--al-badge-bg);\n  color: var(--al-badge-text);\n  font-family:\n    Pretendard,\n    Inter,\n    sans-serif;\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 150%;\n  letter-spacing: -0.1px;\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n.al-badge-new {\n  display: flex;\n  width: 16px;\n  height: 16px;\n  justify-content: center;\n  align-items: center;\n  aspect-ratio: 1/1;\n  border-radius: 12px;\n  background: #7346f3;\n  color: var(--al-badge-new-text);\n  font-family:\n    Pretendard,\n    Inter,\n    sans-serif;\n  font-size: 9px;\n  font-weight: 700;\n  flex-shrink: 0;\n}\n");
+
+// src/components/AppLauncherContent.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function AppLauncherContent({
+  align = "end",
+  sideOffset = 12,
+  className
+}) {
+  const { env, theme, isMobile, domain, onNavigate, close } = useAppLauncherContext();
+  const { data } = useGlobalMenu();
+  const items = React2.useMemo(
+    () => (data?.items ?? []).sort((a, b) => a.order - b.order),
+    [data]
+  );
+  const DRAG_THRESHOLD = 8;
+  const pointerStart = React2.useRef(null);
+  const handlePointerDown = React2.useCallback((e) => {
+    pointerStart.current = { x: e.clientX, y: e.clientY };
+  }, []);
+  const handleItemClick = React2.useCallback(
+    (e, item) => {
+      if (pointerStart.current) {
+        const dx = e.clientX - pointerStart.current.x;
+        const dy = e.clientY - pointerStart.current.y;
+        pointerStart.current = null;
+        if (Math.abs(dx) > DRAG_THRESHOLD || Math.abs(dy) > DRAG_THRESHOLD) {
+          return;
+        }
+      }
+      const url = item.url[env] ?? item.url.production;
+      const isExternal = isExternalLink(url, domain);
+      if (isExternal) {
+        window.open(url, "_blank", "noopener,noreferrer");
+      } else {
+        const path = new URL(url).pathname;
+        if (onNavigate) {
+          onNavigate(path);
+        } else {
+          window.location.href = path;
+        }
+      }
+      close();
+    },
+    [env, domain, onNavigate, close]
+  );
+  const currentPathname = typeof window !== "undefined" ? window.location.pathname : "";
+  const menuContent = /* @__PURE__ */ jsx4("div", { className: "al-grid", "data-theme": theme, children: items.map((item) => {
+    const url = item.url[env] ?? item.url.production;
+    const isExternal = isExternalLink(url, domain);
+    let isActive = false;
+    if (!isExternal) {
+      try {
+        const urlPathname = new URL(url).pathname;
+        isActive = currentPathname === urlPathname || currentPathname.startsWith(urlPathname + "/");
+      } catch {
+        isActive = false;
+      }
+    }
+    return /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        type: "button",
+        className: "al-grid-item",
+        "data-active": isActive || void 0,
+        onPointerDown: handlePointerDown,
+        onClick: (e) => handleItemClick(e, item),
+        children: [
+          /* @__PURE__ */ jsxs2("div", { className: "al-grid-item-left", children: [
+            /* @__PURE__ */ jsx4("div", { className: "al-grid-item-icon", children: /* @__PURE__ */ jsx4(
+              "img",
+              {
+                src: item.iconUrl,
+                alt: item.label,
+                width: 24,
+                height: 24,
+                loading: "lazy"
+              }
+            ) }),
+            /* @__PURE__ */ jsx4("span", { className: "al-grid-item-label", children: item.label }),
+            item.isNew && /* @__PURE__ */ jsx4("span", { className: "al-badge-new", children: "N" })
+          ] }),
+          /* @__PURE__ */ jsx4("div", { className: "al-grid-item-right", children: item.badge && /* @__PURE__ */ jsx4("span", { className: "al-badge", children: item.badge }) })
+        ]
+      },
+      item.id
+    );
+  }) });
+  if (isMobile) {
+    return /* @__PURE__ */ jsxs2(Drawer3.Portal, { children: [
+      /* @__PURE__ */ jsx4(Drawer3.Overlay, { className: "al-drawer-overlay" }),
+      /* @__PURE__ */ jsxs2(
+        Drawer3.Content,
+        {
+          className: cn("al-drawer-content", className),
+          "data-theme": theme,
+          children: [
+            /* @__PURE__ */ jsxs2("div", { className: "al-drawer-header", children: [
+              /* @__PURE__ */ jsx4(Drawer3.Close, { className: "al-drawer-close", children: /* @__PURE__ */ jsx4(BackArrowIcon, {}) }),
+              /* @__PURE__ */ jsx4(Drawer3.Title, { className: "al-drawer-title", children: "CROSS Services" }),
+              /* @__PURE__ */ jsx4(Drawer3.Close, { className: "al-drawer-close", children: /* @__PURE__ */ jsx4(CloseIcon, {}) })
+            ] }),
+            /* @__PURE__ */ jsx4("div", { className: "al-drawer-body", children: menuContent })
+          ]
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx4(Popover3.Portal, { children: /* @__PURE__ */ jsx4(
+    Popover3.Content,
+    {
+      align,
+      sideOffset,
+      className: cn("al-popover-content", className),
+      "data-theme": theme,
+      children: menuContent
+    }
+  ) });
+}
+function isExternalLink(url, domain) {
+  try {
+    const linkHostname = new URL(url).hostname;
+    if (typeof window === "undefined") return true;
+    return linkHostname !== (domain ?? window.location.hostname);
+  } catch {
+    return false;
+  }
+}
+function cn(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+export {
+  AppLauncher,
+  AppLauncherContent,
+  AppLauncherTrigger,
+  useGlobalMenu
+};

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "cross-app-launcher",
+  "version": "0.0.0-beta.1",
+  "description": "Unified app launcher menu component for CROSS ecosystem services",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@radix-ui/react-popover": "^1.1.6",
+    "vaul": "^1.1.2"
+  },
+  "peerDependencies": {
+    "@tanstack/react-query": ">=5",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@tanstack/react-query": "^5.64.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.4.0",
+    "typescript": "^5.7.0"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/to-nexus/app-launcher-frontend.git"
+  },
+  "license": "MIT"
+}