@aiquants/menu-bar 1.17.9 → 1.18.0

package/src/components/SessionInfo.tsx

@@ -1,3 +1,5 @@
+import ExternalLink from "lucide-react/dist/esm/icons/external-link.js"
+import User from "lucide-react/dist/esm/icons/user.js"
 import type { UserProfile } from "../types/user"
 
 const DEFAULT_USER_ICON =
@@ -48,32 +50,46 @@ export const SessionInfo = (props: SessionInfoProps): React.JSX.Element => {
     const { user, LinkComponent = DefaultLink } = props
 
     return (
-        <div className="max-h-20 max-w-52">
-            <div className="flex grow flex-col">
-                {user ? (
-                    <>
-                        <div className="flex flex-row">
-                            <div className="aiquants-session-photo m-1 h-14 w-14 p-0.5">
-                                <img className="object-contain" src={user.photo || DEFAULT_USER_ICON} aria-label="profile photo" />
+        <div className="w-full">
+            {user ? (
+                <div className="aiquants-session-card group relative flex flex-col gap-1.5 rounded-lg border border-white/20 bg-white/10 p-2 shadow-sm transition-all duration-200 hover:border-white/30 hover:bg-white/15 dark:border-slate-700/60 dark:bg-slate-800/60 dark:hover:border-slate-600/80 dark:hover:bg-slate-800/90">
+                    {/* アバター & ユーザー名 */}
+                    <div className="flex min-w-0 items-center gap-2">
+                        <div className="relative shrink-0">
+                            <div className="h-7 w-7 overflow-hidden rounded-full border border-white/40 shadow-xs dark:border-slate-500">
+                                <img className="h-full w-full rounded-full object-cover" src={user.photo || DEFAULT_USER_ICON} alt={user.displayName || "user profile"} />
                             </div>
-                            <div className="mx-1 flex flex-col">
-                                <LinkComponent className="aiquants-session-link my-1 rounded-lg px-2 text-center text-xs" to="/">
-                                    プロフィールを編集
-                                </LinkComponent>
-                                <LinkComponent className="aiquants-session-link rounded-lg px-2 text-center text-xs" to="/">
-                                    プロフィール
-                                </LinkComponent>
-                                <LinkComponent className="aiquants-session-link my-1 rounded-lg px-2 text-center text-xs" to="https://myaccount.google.com/">
-                                    Google Account
-                                </LinkComponent>
+                            <span className="absolute -right-0.5 -bottom-0.5 h-2 w-2 rounded-full border border-slate-900 bg-emerald-400" title="Online" />
+                        </div>
+                        <div className="min-w-0 flex-1 leading-tight">
+                            <div className="truncate font-semibold text-[11px] text-white tracking-tight dark:text-slate-100" title={user.displayName}>
+                                {user.displayName}
                             </div>
+                            <div className="mt-0.5 text-[9px] text-white/70 tracking-tight dark:text-slate-400">Google Account</div>
                         </div>
-                        <div className="aiquants-session-info mb-1 min-h-[1em] w-full rounded-r-lg px-2 py-0.5 text-xs">{user.displayName}</div>
-                    </>
-                ) : (
-                    <div className="aiquants-session-info mb-1 min-h-[1em] w-9/12 rounded-r-lg py-0.5 pl-1 text-xs">ログインはこちら</div>
-                )}
-            </div>
+                    </div>
+
+                    {/* アクションボタン */}
+                    <div className="grid grid-cols-2 gap-1 border-white/15 border-t pt-1 dark:border-slate-700/50">
+                        <LinkComponent
+                            className="flex items-center justify-center gap-1 rounded border border-white/15 bg-white/10 px-1.5 py-0.5 font-medium text-[10px] text-white transition-all duration-150 hover:bg-white/25 active:scale-95 dark:border-slate-600/50 dark:bg-slate-700/50 dark:text-slate-200 dark:hover:bg-slate-600/80"
+                            to="/">
+                            <User size={10} className="shrink-0 opacity-80" />
+                            <span className="truncate">プロフィール</span>
+                        </LinkComponent>
+                        <LinkComponent
+                            className="flex items-center justify-center gap-1 rounded border border-white/15 bg-white/10 px-1.5 py-0.5 font-medium text-[10px] text-white transition-all duration-150 hover:bg-white/25 active:scale-95 dark:border-slate-600/50 dark:bg-slate-700/50 dark:text-slate-200 dark:hover:bg-slate-600/80"
+                            to="https://myaccount.google.com/">
+                            <ExternalLink size={10} className="shrink-0 opacity-80" />
+                            <span className="truncate">Google</span>
+                        </LinkComponent>
+                    </div>
+                </div>
+            ) : (
+                <div className="aiquants-session-card flex items-center justify-between rounded-lg border border-white/20 bg-white/10 p-2 shadow-xs dark:border-slate-700/60 dark:bg-slate-800/60">
+                    <span className="font-medium text-white/90 text-xs dark:text-slate-200">ログインしてください</span>
+                </div>
+            )}
         </div>
     )
 }

package/src/contents/MenuContent.tsx

@@ -4,6 +4,7 @@
  * @description このモジュールは、メニューバーのコンテンツを提供します。
  */
 
+import LogOut from "lucide-react/dist/esm/icons/log-out.js"
 import Pin from "lucide-react/dist/esm/icons/pin.js"
 import PinOff from "lucide-react/dist/esm/icons/pin-off.js"
 import type { Theme } from "../types"
@@ -13,15 +14,6 @@ import { type IMenu, MenuList, type MenuNavigationPayload } from "./MenuList"
  * @interface IMenuContentProps
  * @description Props for the MenuContent component.
  * @description MenuContent コンポーネントの Props。
- * @property {IMenu[]} menuList - The list of menu items. メニュー項目のリスト。
- * @property {React.ReactNode} [menuHeader] - The header content of the menu. メニューのヘッダーコンテンツ。
- * @property {boolean} open - Whether the menu is open. メニューが開いているかどうか。
- * @property {(payload: MenuNavigationPayload) => void} onMenuSelected - Function to handle menu item selection. メニュー項目選択を処理する関数。
- * @property {() => void} onClickSignout - Function to handle sign out. サインアウトを処理する関数。
- * @property {Theme} theme - The current theme.
- * @property {() => void} toggleTheme - Function to toggle the theme.
- * @property {boolean} isPinned - Whether the menu is pinned open. メニューがピン留めされているかどうか。
- * @property {() => void} onTogglePin - Function to toggle pin state. ピン留め状態をトグルする関数。
  */
 interface IMenuContentProps {
     menuList: IMenu[]
@@ -47,36 +39,37 @@ export const MenuContent = (props: IMenuContentProps): React.JSX.Element => {
     const { menuList, menuHeader, open, onMenuSelected, onClickSignout, theme, toggleTheme, isPinned, onTogglePin, pinnedSubmenuIds, onToggleSubmenuPin } = props
 
     return (
-        <div className={`aiquants-menu-content fixed top-0 right-0 z-2147483642 flex min-h-dvh w-[250px] select-none flex-col transition-transform duration-500 ${open ? "aiquants-menu-translate-x-0" : "aiquants-menu-translate-x-250"}`}>
-            <div className="flex h-[100px] flex-col">{menuHeader}</div>
-            <div className="flex grow flex-col">
+        <div className={`aiquants-menu-content fixed top-0 right-0 z-2147483642 flex min-h-dvh w-[240px] select-none flex-col transition-transform duration-500 ${open ? "aiquants-menu-translate-x-0" : "aiquants-menu-translate-x-250"}`}>
+            <div className="flex shrink-0 flex-col justify-center border-white/15 border-b px-2.5 py-2 dark:border-slate-700/60">{menuHeader}</div>
+            <div className="flex grow flex-col overflow-y-auto">
                 <MenuList menuList={menuList} onMenuSelected={onMenuSelected} pinnedSubmenuIds={pinnedSubmenuIds} onToggleSubmenuPin={onToggleSubmenuPin} />
             </div>
-            <div className="px-4 pt-2 pb-4">
-                <div className="flex items-center justify-between gap-2">
+            <div className="border-white/15 border-t px-2.5 py-1.5 dark:border-slate-700/60">
+                <div className="flex items-center justify-between gap-1.5">
                     <button
                         type="button"
                         onClick={onTogglePin}
                         data-aqmb-pin-button
-                        className={`flex items-center justify-center rounded-md px-3 py-2 text-white text-xs shadow-sm transition-colors duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-300/60 ${isPinned ? "bg-amber-500/90 hover:bg-amber-600" : "border border-white/15 bg-white/10 hover:bg-white/20"}`}
+                        className={`flex h-7 items-center justify-center rounded-md px-2 text-[11px] text-white shadow-2xs transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-300/60 ${isPinned ? "bg-amber-500 hover:bg-amber-600 dark:bg-amber-600 dark:hover:bg-amber-500" : "border border-white/20 bg-white/10 hover:bg-white/20 dark:border-slate-600/60 dark:bg-slate-700/60 dark:hover:bg-slate-600"}`}
                         title={isPinned ? "ピン留め解除" : "ピン留め"}
                         aria-label={isPinned ? "ピン留め解除" : "ピン留め"}>
-                        {isPinned ? <Pin size={14} /> : <PinOff size={14} />}
+                        {isPinned ? <Pin size={12} /> : <PinOff size={12} />}
                     </button>
                     <button
                         type="button"
                         onClick={toggleTheme}
                         data-aqmb-theme-button
-                        className="group relative flex items-center justify-center rounded-md border border-white/15 bg-white/10 px-3 py-2 text-white text-xs shadow-sm backdrop-blur-sm transition-all duration-300 hover:border-white/25 hover:bg-white/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40 focus-visible:ring-offset-0 dark:border-gray-600/40 dark:bg-gray-800/80 dark:hover:border-gray-500/60 dark:hover:bg-gray-700"
+                        className="group relative flex h-7 items-center justify-center rounded-md border border-white/20 bg-white/10 px-2 text-[11px] text-white shadow-2xs backdrop-blur-xs transition-all duration-200 hover:bg-white/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40 dark:border-slate-600/60 dark:bg-slate-700/60 dark:hover:bg-slate-600"
                         title={theme === "dark" ? "ライトモードに切り替え" : "ダークモードに切り替え"}
                         aria-label={theme === "dark" ? "ライトモードに切り替え" : "ダークモードに切り替え"}>
-                        <span className="text-sm transition-transform duration-300 group-hover:scale-110">{theme === "dark" ? "🌞" : "🌙"}</span>
+                        <span className="text-xs transition-transform duration-200 group-hover:scale-110">{theme === "dark" ? "🌞" : "🌙"}</span>
                     </button>
                     <button
                         type="button"
                         data-aqmb-signout-button
-                        className="aiquants-signout-button flex flex-1 items-center justify-center whitespace-nowrap rounded-md bg-red-500/90 px-3 py-2 font-medium text-white text-xs shadow-sm transition-colors duration-300 hover:bg-red-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-300/60"
+                        className="aiquants-signout-button flex h-7 flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md bg-red-500/90 px-2.5 font-medium text-[11px] text-white shadow-2xs transition-colors duration-200 hover:bg-red-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-300/60 dark:bg-red-600/90 dark:hover:bg-red-500"
                         onClick={onClickSignout}>
+                        <LogOut size={11} className="shrink-0" />
                         <span>サインアウト</span>
                     </button>
                 </div>

package/src/contents/MenuList.tsx

@@ -107,7 +107,7 @@ const StyledLinkText = ({ mark, children }: { mark?: string; children: ReactNode
     }
     return (
         <div className="flex flex-nowrap items-center">
-            <Icon className="h-4 w-4" />
+            <Icon className="h-3.5 w-3.5 shrink-0" />
             <div className="aiquants-menu-link mx-1 hover:underline">{children}</div>
         </div>
     )
@@ -322,7 +322,7 @@ export const MenuList = (props: IMenuListProps): React.JSX.Element => {
                 {menuList.map((item) => (
                     <div key={item.id}>
                         {item.href ? (
-                            <div className="aiquants-menu-list-item relative mb-1 ml-1 h-full rounded-l-2xl p-2 align-middle text-sm before:-mt-1 before:mr-2 before:inline-block before:h-4 before:w-4 before:rounded-full before:align-middle before:content-['']">
+                            <div className="aiquants-menu-list-item relative mb-0.5 ml-1 flex items-center rounded-l-xl px-2.5 py-1 text-xs before:mr-2 before:inline-block before:h-2 before:w-2 before:shrink-0 before:rounded-full before:content-[''] sm:text-sm">
                                 {regexp.test(item.href) ? (
                                     <a
                                         href={item.href}
@@ -351,7 +351,7 @@ export const MenuList = (props: IMenuListProps): React.JSX.Element => {
                             <details className="aiquants-menu-accordion-details" open={item.id === openMenuId || pinnedSubmenuIds.includes(item.id)}>
                                 {/** biome-ignore lint/a11y/noStaticElementInteractions: summary toggles submenu visibility */}
                                 <summary
-                                    className="aiquants-menu-list-item aiquants-menu-accordion-summary relative mb-1 ml-1 h-full list-none rounded-l-2xl p-2 text-sm outline-none before:mr-2 before:inline-block before:h-4 before:w-4 before:rounded-full before:content-['']"
+                                    className="aiquants-menu-list-item aiquants-menu-accordion-summary relative mb-0.5 ml-1 list-none rounded-l-xl px-2.5 py-1 text-xs outline-none before:mr-2 before:inline-block before:h-2 before:w-2 before:shrink-0 before:rounded-full before:content-[''] sm:text-sm"
                                     onClick={(e) => {
                                         e.preventDefault()
                                         handleToggle(item.id)
@@ -374,12 +374,12 @@ export const MenuList = (props: IMenuListProps): React.JSX.Element => {
                                         }}
                                         className={`aiquants-submenu-pin-button ${pinnedSubmenuIds.includes(item.id) ? "pinned" : ""}`}
                                         title={pinnedSubmenuIds.includes(item.id) ? "ピン留め解除" : "ピン留め"}>
-                                        {pinnedSubmenuIds.includes(item.id) ? <Pin size={14} /> : <PinOff size={14} />}
+                                        {pinnedSubmenuIds.includes(item.id) ? <Pin size={13} /> : <PinOff size={13} />}
                                     </button>
                                 </summary>
-                                <div className="aiquants-menu-submenu pointer-events-auto my-1 mr-1 ml-4 rounded p-2 shadow-md">
+                                <div className="aiquants-menu-submenu pointer-events-auto my-0.5 mr-1 ml-3.5 rounded-lg px-2 py-1 shadow-sm">
                                     {item.submenu.map((subitem) => (
-                                        <div key={subitem.subid} className="aiquants-menu-accordion-container block w-full whitespace-nowrap text-sm">
+                                        <div key={subitem.subid} className="aiquants-menu-accordion-container block w-full whitespace-nowrap py-0.5 text-xs">
                                             <SubMenuItem item={subitem} parentMenu={item} onMenuSelected={onMenuSelected} />
                                         </div>
                                     ))}

package/src/elements/MenuSwitch.tsx

@@ -107,7 +107,7 @@ export const MenuSwitch = (props: IMenuSwitchProps): React.JSX.Element => {
     }, [open, styleOpen, styleClose])
 
     return (
-        <button type="button" data-aqmb-menu-switch className="aiquants-menu-switch fixed z-2147483647 inline-block h-[27px] w-[27px] cursor-pointer align-middle outline-hidden" onClick={handleToggle} onFocus={handleFocus} onMouseDown={handleMouseDown} tabIndex={-1}>
+        <button type="button" data-aqmb-menu-switch className="aiquants-menu-switch inline-block h-[27px] w-[27px] cursor-pointer align-middle outline-hidden" onClick={handleToggle} onFocus={handleFocus} onMouseDown={handleMouseDown} tabIndex={-1}>
             <span className="absolute top-0 left-0 box-border inline-block h-[3px] w-full select-none" ref={refSpan1} />
             <span className="absolute top-1.5 left-0 box-border inline-block h-[3px] w-full select-none" ref={refSpan2} />
             <span className="absolute top-3 left-0 box-border inline-block h-[3px] w-full select-none" ref={refSpan3} />

package/src/events/pinEvent.ts

@@ -0,0 +1,129 @@
+/**
+ * @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

@@ -0,0 +1,58 @@
+/**
+ * @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,6 +1,29 @@
-export type { LinkProps, SessionInfoProps } from "./components/SessionInfo"
+/**
+ * @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"
-export type { IMenu, ISubmenu, MenuNavigationPayload } from "./contents/MenuList"
+/** @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"
-export type { Theme } from "./types"
-export type { UserProfile } from "./types/user"
+/** @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/styles/menu-bar.css

@@ -3,10 +3,19 @@
 
 :root {
   --aiquants-menu-pinned-width: 0px;
+
+  /* 中立なメニュースイッチのカスタムプロパティ・デフォルト値 */
+  --aqmb-switch-position: fixed;
+  --aqmb-switch-top: calc(var(--spacing, 0.25rem) * 2);
+  --aqmb-switch-right: calc(var(--spacing, 0.25rem) * 2);
+  --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;
@@ -118,29 +127,9 @@
   height: 0;
 }
 
-/* ダークモード時のSessionInfo */
-.aiquants-menu-bar.dark .aiquants-session-photo {
-  background-color: rgb(39 39 42); /* zinc-800 */
-}
-
-.aiquants-menu-bar.dark .aiquants-session-link,
-.aiquants-menu-bar.dark .aiquants-session-info {
-  background-color: rgb(51 65 85); /* slate-700 */
-  color: rgb(226 232 240); /* slate-200 */
-}
-
-/* ライトモード時のSessionInfo */
-.aiquants-menu-bar.light .aiquants-session-photo,
-.aiquants-menu-bar .aiquants-session-photo {
-  background-color: rgb(250 250 250); /* zinc-50 */
-}
-
-.aiquants-menu-bar.light .aiquants-session-link,
-.aiquants-menu-bar .aiquants-session-link,
-.aiquants-menu-bar.light .aiquants-session-info,
-.aiquants-menu-bar .aiquants-session-info {
-  background-color: rgb(220 252 231); /* green-100 */
-  color: rgb(0 0 0); /* black */
+/* SessionInfo グラスカード用基本スタイル */
+.aiquants-menu-bar .aiquants-session-card {
+  backdrop-filter: blur(8px);
 }
 
 /* アコーディオンメニューの詳細部分のスタイル */
@@ -171,8 +160,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 0.25rem;
-  border-radius: 0.375rem;
+  padding: 0.15rem;
+  border-radius: 0.25rem;
   transition: all 0.3s;
 }
 
@@ -226,13 +215,17 @@
 }
 
 .aiquants-menu-switch {
-  top: calc(var(--spacing) * 2);
-  right: calc(var(--spacing) * 2);
+  position: var(--aqmb-switch-position, fixed);
+  top: var(--aqmb-switch-top, calc(var(--spacing, 0.25rem) * 2));
+  right: var(--aqmb-switch-right, calc(var(--spacing, 0.25rem) * 2));
+  left: var(--aqmb-switch-left, auto);
+  bottom: var(--aqmb-switch-bottom, auto);
+  z-index: var(--aqmb-switch-z-index, 2147483647);
 }
 
 @media (width >= 40rem) {
   .aiquants-menu-switch {
-    top: calc(var(--spacing) * 3);
-    right: calc(var(--spacing) * 3);
+    top: var(--aqmb-switch-top, calc(var(--spacing, 0.25rem) * 3));
+    right: var(--aqmb-switch-right, calc(var(--spacing, 0.25rem) * 3));
   }
 }

package/src/types.ts

@@ -1 +1,24 @@
+/**
+ * @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>