@aiquants/menu-bar 1.18.2 → 1.19.0

package/src/events/pinEvent.ts

@@ -1,129 +0,0 @@
-/**
- * @module events/pinEvent
- * @description Event handling and subscription helpers for menu pin state.
- * @description メニューピン留め状態のイベント処理および購読ヘルパー。
- */
-
-import type { MenuPinChangeDetail, MenuPinCustomEvent } from "../types"
-
-/**
- * Canonical Window CustomEvent name for menu pin state changes.
- * メニューのピン留め状態変更を通知する正準 CustomEvent 名。
- */
-export const MENU_PIN_CHANGE_EVENT = "aiquants-menu-pin-change"
-
-/**
- * Cached snapshot object reference to prevent unnecessary re-renders in useSyncExternalStore.
- * 不要な再レンダリングを防止するためのキャッシュスナップショットオブジェクト参照。
- */
-let cachedSnapshot: MenuPinChangeDetail = { pinned: false, width: 0 }
-
-/**
- * Reads initial pin state safely from document CSS variable or localStorage.
- * document の CSS 変数または localStorage から初期のピン留め状態を安全に読み取ります。
- *
- * @param defaultPinnedWidth - Default width in pixels when pinned (default: 240).
- * @returns Current MenuPinChangeDetail object.
- */
-export const getInitialPinState = (defaultPinnedWidth = 240): MenuPinChangeDetail => {
-    if (typeof window === "undefined" || typeof document === "undefined") {
-        return { pinned: false, width: 0 }
-    }
-
-    try {
-        const cssVal = getComputedStyle(document.documentElement).getPropertyValue("--aiquants-menu-pinned-width").trim()
-
-        if (cssVal) {
-            const numericWidth = Number.parseInt(cssVal, 10)
-            if (!Number.isNaN(numericWidth)) {
-                const pinned = numericWidth > 0
-                const width = pinned ? numericWidth || defaultPinnedWidth : 0
-                if (cachedSnapshot.pinned === pinned && cachedSnapshot.width === width) {
-                    return cachedSnapshot
-                }
-                cachedSnapshot = { pinned, width }
-                return cachedSnapshot
-            }
-        }
-
-        const saved = localStorage.getItem("aiquants-menu-pinned")
-        const pinned = saved === "true"
-        const width = pinned ? defaultPinnedWidth : 0
-        if (cachedSnapshot.pinned === pinned && cachedSnapshot.width === width) {
-            return cachedSnapshot
-        }
-        cachedSnapshot = { pinned, width }
-        return cachedSnapshot
-    } catch {
-        return { pinned: false, width: 0 }
-    }
-}
-
-/**
- * Dispatches a CustomEvent on window with menu pin state details.
- * window に対してメニューピン留め状態変更カスタムイベントを発行します。
- *
- * @param pinned - Whether the menu is pinned.
- * @param width - The pinned width in pixels.
- */
-export const dispatchMenuPinChange = (pinned: boolean, width: number): void => {
-    if (typeof window === "undefined") return
-
-    const detail: MenuPinChangeDetail = { pinned, width }
-    if (cachedSnapshot.pinned !== pinned || cachedSnapshot.width !== width) {
-        cachedSnapshot = detail
-    }
-
-    const event: MenuPinCustomEvent = new CustomEvent(MENU_PIN_CHANGE_EVENT, {
-        detail,
-        bubbles: true,
-        cancelable: false,
-    })
-    window.dispatchEvent(event)
-}
-
-/**
- * Options for subscribing to menu pin state changes.
- * メニューピン留め状態購読時のオプション。
- */
-export interface SubscribeMenuPinOptions {
-    /** Whether to immediately invoke the listener with the current state upon subscription (default: true). 購読開始時に即座に現在の状態を通知するかどうか。 */
-    immediate?: boolean
-    /** Default width when pinned (default: 240). ピン留め時のデフォルト幅。 */
-    defaultPinnedWidth?: number
-}
-
-/**
- * Subscribes a listener to menu pin state changes on window.
- * Returns an unsubscription cleanup function.
- * window 上のメニューピン留め状態変更イベントを購読します。
- * クリーンアップ関数を返します。
- *
- * @param listener - Callback invoked on pin state changes.
- * @param options - Subscription options (e.g. immediate notification).
- * @returns Cleanup function to unsubscribe.
- */
-export const subscribeMenuPinChange = (listener: (detail: MenuPinChangeDetail) => void, options?: SubscribeMenuPinOptions): (() => void) => {
-    if (typeof window === "undefined") {
-        return () => {}
-    }
-
-    const { immediate = true, defaultPinnedWidth = 240 } = options ?? {}
-
-    if (immediate) {
-        const currentState = getInitialPinState(defaultPinnedWidth)
-        listener(currentState)
-    }
-
-    const handler = (e: Event) => {
-        const customEvent = e as MenuPinCustomEvent
-        if (customEvent.detail) {
-            listener(customEvent.detail)
-        }
-    }
-
-    window.addEventListener(MENU_PIN_CHANGE_EVENT, handler, { passive: true })
-    return () => {
-        window.removeEventListener(MENU_PIN_CHANGE_EVENT, handler)
-    }
-}

package/src/hooks/useMenuPinState.ts

@@ -1,58 +0,0 @@
-/**
- * @module hooks/useMenuPinState
- * @description Custom React hook to subscribe to menu pin state changes using useSyncExternalStore.
- * @description useSyncExternalStore を用いてメニューのピン留め状態および幅の変化をシームレスに購読するカスタム React フック。
- */
-
-import { useCallback, useSyncExternalStore } from "react"
-import { getInitialPinState, subscribeMenuPinChange } from "../events/pinEvent"
-import type { MenuPinChangeDetail } from "../types"
-
-/**
- * Options for the useMenuPinState hook.
- * useMenuPinState フックのオプション。
- */
-export interface UseMenuPinStateOptions {
-    /** Initial pinned state for server-side rendering (default: false). SSR 時の初期ピン留め状態。 */
-    initialPinned?: boolean
-    /** Default width when pinned in pixels (default: 240). デフォルトのピン留め幅。 */
-    defaultPinnedWidth?: number
-}
-
-/**
- * React hook for consuming components to seamlessly subscribe to menu pin state changes.
- * Hydration-safe, re-render optimized via React 18 useSyncExternalStore.
- * 利用側 React コンポーネントがメニューのピン留め状態および幅をシームレスに購読するためのカスタムフック。
- *
- * @param options - Optional initial pin state and width configuration.
- * @returns Current MenuPinChangeDetail ({ pinned: boolean, width: number }).
- */
-export const useMenuPinState = (options?: UseMenuPinStateOptions): MenuPinChangeDetail => {
-    const defaultPinnedWidth = options?.defaultPinnedWidth ?? 240
-    const initialPinned = options?.initialPinned ?? false
-
-    const subscribe = useCallback(
-        (onStoreChange: () => void) => {
-            return subscribeMenuPinChange(
-                () => {
-                    onStoreChange()
-                },
-                { immediate: false, defaultPinnedWidth },
-            )
-        },
-        [defaultPinnedWidth],
-    )
-
-    const getSnapshot = useCallback(() => {
-        return getInitialPinState(defaultPinnedWidth)
-    }, [defaultPinnedWidth])
-
-    const getServerSnapshot = useCallback((): MenuPinChangeDetail => {
-        return {
-            pinned: initialPinned,
-            width: initialPinned ? defaultPinnedWidth : 0,
-        }
-    }, [initialPinned, defaultPinnedWidth])
-
-    return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
-}

package/src/index.ts

@@ -1,29 +0,0 @@
-/**
- * @module index
- * @description Entry point for @aiquants/menu-bar package exports.
- * @description @aiquants/menu-bar パッケージのエクスポートエントリーポイント。
- */
-
-/** @deprecated Use MenuBarLinkProps instead to avoid namespace collisions. */
-export type { LinkProps as MenuBarLinkProps, LinkProps, SessionInfoProps as MenuBarSessionInfoProps, SessionInfoProps } from "./components/SessionInfo"
-export { DefaultLink, SessionInfo } from "./components/SessionInfo"
-/** @deprecated Use IMenuBarMenu instead to avoid namespace collisions. */
-/** @deprecated Use IMenuBarSubmenu instead to avoid namespace collisions. */
-export type { IMenu as IMenuBarMenu, IMenu, ISubmenu as IMenuBarSubmenu, ISubmenu, MenuNavigationPayload } from "./contents/MenuList"
-export type { SubscribeMenuPinOptions } from "./events/pinEvent"
-export {
-    dispatchMenuPinChange,
-    getInitialPinState,
-    MENU_PIN_CHANGE_EVENT,
-    subscribeMenuPinChange,
-} from "./events/pinEvent"
-
-export type { UseMenuPinStateOptions } from "./hooks/useMenuPinState"
-export { useMenuPinState } from "./hooks/useMenuPinState"
-
-export type { IMenuBarProps } from "./MenuBar"
-export { MenuBar } from "./MenuBar"
-/** @deprecated Use MenuBarTheme instead to avoid namespace collisions. */
-export type { MenuPinChangeDetail, MenuPinCustomEvent, Theme as MenuBarTheme, Theme } from "./types"
-/** @deprecated Use MenuBarUserProfile instead to avoid namespace collisions. */
-export type { UserProfile as MenuBarUserProfile, UserProfile } from "./types/user"

package/src/lucide-icons.d.ts

@@ -1,6 +0,0 @@
-declare module "lucide-react/dist/esm/icons/*" {
-    import type { LucideIcon } from "lucide-react"
-
-    const component: LucideIcon
-    export default component
-}

package/src/styles/components.entry.css

@@ -1,11 +0,0 @@
-/*
- * Artifact A: components-only CSS (Tailwind ホスト向け).
- * theme(reference) によりテーマトークンは var(--token, fallback) 形式で参照され、
- * :root へのテーマ変数放出・ユーティリティ・preflight は一切含まない。
- * ホストは @import "@aiquants/menu-bar/styles/menu-bar.css" layer(components) で読み込み、
- * JSX ユーティリティはホスト側の @source スキャンで単一正準ビルドに生成する。
- */
-@import "tailwindcss/theme.css" theme(reference);
-@layer components {
-  @import "./menu-bar.css";
-}

package/src/styles/menu-bar.css

@@ -1,224 +0,0 @@
-/* biome-ignore-all lint: menu-bar stylesheet */
-/* メニューバー専用のスコープ化されたスタイル */
-
-:root {
-  --aiquants-menu-pinned-width: 0px;
-
-  /* 中立なメニュースイッチのカスタムプロパティ・デフォルト値 */
-  --aqmb-switch-position: fixed;
-  --aqmb-switch-top: 6px;
-  --aqmb-switch-right: 8px;
-  --aqmb-switch-left: auto;
-  --aqmb-switch-bottom: auto;
-  --aqmb-switch-z-index: 2147483647;
-}
-
-/* メニューバーコンテナ内でのみTailwindスタイルを適用 */
-.aiquants-menu-bar {
-  position: relative;
-  /* 基本的なフォントスタイル */
-  font-size: 1rem;
-  line-height: 1.5;
-
-  /* メニューバー内の要素のリセット */
-  * {
-    box-sizing: border-box;
-  }
-
-  /* メニューバー内のリンクとボタンの基本スタイル */
-  a,
-  button {
-    text-decoration: none;
-    border: none;
-    background: none;
-    cursor: pointer;
-  }
-}
-
-/* ダークモード用のスタイル */
-.aiquants-menu-bar.dark {
-  color-scheme: dark;
-}
-
-/* ダークモード時のメニューコンテンツの背景色 */
-.aiquants-menu-bar.dark .aiquants-menu-content {
-  background-color: rgb(15 23 42); /* slate-900 */
-}
-
-/* ライトモード時のメニューコンテンツの背景色 */
-.aiquants-menu-bar.light .aiquants-menu-content,
-.aiquants-menu-bar .aiquants-menu-content {
-  background-color: rgb(3 105 161); /* sky-700 */
-}
-
-/* ダークモード時のボタンスタイル */
-.aiquants-menu-bar.dark .aiquants-signout-button {
-  background-color: rgb(51 65 85); /* slate-700 */
-}
-
-.aiquants-menu-bar.dark .aiquants-signout-button:hover {
-  background-color: rgb(71 85 105); /* slate-600 */
-}
-
-/* ライトモード時のボタンスタイル */
-.aiquants-menu-bar.light .aiquants-signout-button,
-.aiquants-menu-bar .aiquants-signout-button {
-  background-color: rgb(37 99 235); /* blue-600 */
-  white-space: nowrap;
-  min-width: 0;
-}
-
-.aiquants-menu-bar.light .aiquants-signout-button:hover,
-.aiquants-menu-bar .aiquants-signout-button:hover {
-  background-color: rgb(30 64 175); /* blue-800 */
-}
-
-/* ダークモード時のメニューリストアイテム */
-.aiquants-menu-bar.dark .aiquants-menu-list-item {
-  background-color: rgb(51 65 85); /* slate-700 */
-  color: rgb(209 213 219); /* gray-300 */
-}
-
-.aiquants-menu-bar.dark .aiquants-menu-list-item::before {
-  background-color: rgb(148 163 184); /* slate-400 */
-}
-
-.aiquants-menu-bar.dark .aiquants-menu-submenu {
-  background-color: rgb(30 41 59); /* slate-800 */
-}
-
-.aiquants-menu-bar.dark .aiquants-menu-link {
-  color: rgb(56 189 248); /* sky-400 */
-}
-
-.aiquants-menu-bar.dark .aiquants-menu-separator {
-  border-color: rgb(75 85 99); /* gray-500 */
-}
-
-/* ライトモード時のメニューリストアイテム */
-.aiquants-menu-bar.light .aiquants-menu-list-item,
-.aiquants-menu-bar .aiquants-menu-list-item {
-  background-color: rgb(186 230 253); /* sky-200 */
-  color: rgb(75 85 99); /* gray-600 */
-}
-
-.aiquants-menu-bar.light .aiquants-menu-list-item::before,
-.aiquants-menu-bar .aiquants-menu-list-item::before {
-  background-color: rgb(255 255 255); /* white */
-}
-
-.aiquants-menu-bar.light .aiquants-menu-submenu,
-.aiquants-menu-bar .aiquants-menu-submenu {
-  background-color: rgb(250 250 250); /* zinc-50 */
-}
-
-.aiquants-menu-bar.light .aiquants-menu-link,
-.aiquants-menu-bar .aiquants-menu-link {
-  color: rgb(2 132 199); /* sky-600 */
-}
-
-.aiquants-menu-bar.light .aiquants-menu-separator,
-.aiquants-menu-bar .aiquants-menu-separator {
-  border-color: rgb(75 85 99); /* gray-600 */
-}
-
-.aiquants-menu-bar .aiquants-menu-separator {
-  border-top: 1px solid;
-  height: 0;
-}
-
-/* SessionInfo グラスカード用基本スタイル */
-.aiquants-menu-bar .aiquants-session-card {
-  backdrop-filter: blur(8px);
-}
-
-/* アコーディオンメニューの詳細部分のスタイル */
-.aiquants-menu-accordion-details {
-  /* max-inline-size: 40rem; */
-}
-
-/* アコーディオンメニューのサマリー（ヘッダー）部分のスタイル */
-.aiquants-menu-accordion-summary {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  cursor: pointer;
-
-  /* デフォルトの詳細マーカー（通常は三角形）を非表示にする */
-  &::-webkit-details-marker {
-    display: none;
-  }
-}
-
-.aiquants-menu-accordion-summary span {
-  flex-grow: 1;
-  text-align: left;
-}
-
-/* サブメニューピンボタンのスタイル */
-.aiquants-submenu-pin-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.15rem;
-  border-radius: 0.25rem;
-  transition: all 0.3s;
-}
-
-.aiquants-menu-bar.light .aiquants-submenu-pin-button {
-  color: rgba(75, 85, 99, 0.4);
-}
-.aiquants-menu-bar.light .aiquants-submenu-pin-button:hover {
-  color: rgba(75, 85, 99, 0.8);
-  background-color: rgba(75, 85, 99, 0.1);
-}
-.aiquants-menu-bar.light .aiquants-submenu-pin-button.pinned {
-  color: rgb(217 119 6); /* amber-600 */
-}
-.aiquants-menu-bar.light .aiquants-submenu-pin-button.pinned:hover {
-  color: rgb(180 83 9); /* amber-700 */
-  background-color: rgba(217, 119, 6, 0.1);
-}
-
-.aiquants-menu-bar.dark .aiquants-submenu-pin-button {
-  color: rgba(255, 255, 255, 0.4);
-}
-.aiquants-menu-bar.dark .aiquants-submenu-pin-button:hover {
-  color: rgba(255, 255, 255, 0.8);
-  background-color: rgba(255, 255, 255, 0.1);
-}
-.aiquants-menu-bar.dark .aiquants-submenu-pin-button.pinned {
-  color: rgb(245 158 11); /* amber-500 */
-}
-.aiquants-menu-bar.dark .aiquants-submenu-pin-button.pinned:hover {
-  color: rgb(251 191 36); /* amber-400 */
-  background-color: rgba(245, 158, 11, 0.15);
-}
-
-/* アコーディオンメニューのコンテナ全体のスタイル */
-.aiquants-menu-accordion-container {
-  /* 高さの変化を0.5秒かけてアニメーションさせる */
-  transition: block-size 0.5s;
-  /* 要素のサイズ計算を最適化する */
-  contain: content;
-}
-
-/* メニューの開閉状態に応じたスタイル */
-/* X軸方向に0px移動させる（メニューが開いた状態） */
-.aiquants-menu-translate-x-0 {
-  transform: translateX(0px);
-}
-
-/* X軸方向に250px移動させる（メニューが閉じた状態） */
-.aiquants-menu-translate-x-250 {
-  transform: translateX(250px);
-}
-
-.aiquants-menu-switch {
-  position: var(--aqmb-switch-position, fixed);
-  top: var(--aqmb-switch-top, 6px);
-  right: var(--aqmb-switch-right, 8px);
-  left: var(--aqmb-switch-left, auto);
-  bottom: var(--aqmb-switch-bottom, auto);
-  z-index: var(--aqmb-switch-z-index, 2147483647);
-}

package/src/styles/standalone.entry.css

@@ -1,12 +0,0 @@
-/*! @aiquants/menu-bar standalone CSS — 非 Tailwind ホスト専用。ホストの Tailwind ビルドと混在させないこと (同名ユーティリティ重複でカスケード反転が起きる) */
-/*
- * Artifact B: components + JSX ユーティリティを単一ビルドで自己完結生成する.
- * source(none) で自動検出を無効化し src のみをスキャン (README/demo クラス混入を防止)。
- * dark: は .dark クラス基準 (ホストは <html> に .dark を付与する)。
- */
-@layer theme, base, components, utilities;
-@import "tailwindcss/theme.css" layer(theme);
-@import "tailwindcss/utilities.css" layer(utilities) source(none);
-@import "./menu-bar.css" layer(components);
-@source "../**/*.{ts,tsx}";
-@custom-variant dark (&:where(.dark, .dark *));

package/src/types/user.ts

@@ -1,12 +0,0 @@
-/**
- * Google user profile information.
- * Googleユーザープロフィール情報。
- */
-export interface UserProfile {
-    /** User display name */
-    displayName: string
-    /** user photo url */
-    photo: string
-    /** User ID */
-    id?: string
-}

package/src/types.ts

@@ -1,24 +0,0 @@
-/**
- * @module types
- * @description Common type definitions for @aiquants/menu-bar.
- * @description @aiquants/menu-bar の共通型定義。
- */
-
-export type Theme = "light" | "dark"
-
-/**
- * Menu pin change event payload detail interface.
- * メニューピン留め状態変更イベントの詳細ペイロード。
- */
-export interface MenuPinChangeDetail {
-    /** Whether the menu is currently pinned open. メニューが現在ピン留めされているかどうか。 */
-    pinned: boolean
-    /** Pinned width in pixels (e.g. 240 or 0). ピン留め時の幅 (ピクセル単位)。 */
-    width: number
-}
-
-/**
- * Custom Event type for menu pin change events.
- * メニューピン留め状態変更カスタムイベントの型。
- */
-export type MenuPinCustomEvent = CustomEvent<MenuPinChangeDetail>