@aiquants/menu-bar 1.16.1 → 1.17.0

package/src/contents/MenuContent.tsx

@@ -0,0 +1,83 @@
+/**
+ * @module MenuContent
+ * @description This module provides the content for the menu bar.
+ * @description このモジュールは、メニューバーのコンテンツを提供します。
+ */
+
+import { Pin, PinOff } from "lucide-react"
+import type { Theme } from "../types"
+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[]
+    menuHeader?: React.ReactNode
+    open: boolean
+    onMenuSelected(payload: MenuNavigationPayload): void
+    onClickSignout(): void
+    theme: Theme
+    toggleTheme: () => void
+    isPinned: boolean
+    onTogglePin(): void
+    pinnedSubmenuIds: number[]
+    onToggleSubmenuPin(id: number): void
+}
+
+/**
+ * Renders the content of the menu bar.
+ * メニューバーのコンテンツを描画します。
+ * @param {IMenuContentProps} props - The properties for the MenuContent component.
+ * @returns {React.JSX.Element} The rendered menu content.
+ */
+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">
+                <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">
+                    <button
+                        type="button"
+                        onClick={onTogglePin}
+                        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"}`}
+                        title={isPinned ? "ピン留め解除" : "ピン留め"}>
+                        {isPinned ? <Pin size={14} /> : <PinOff size={14} />}
+                    </button>
+                    <button
+                        type="button"
+                        onClick={toggleTheme}
+                        className="group relative flex flex-1 items-center gap-2 rounded-lg border border-white/15 bg-white/10 px-3 py-2 font-medium 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">
+                        <div className="flex h-5 w-5 items-center justify-center rounded-full bg-white/20 backdrop-blur-sm transition-all duration-300 group-hover:scale-110 group-hover:bg-white/30 dark:bg-gray-600/60 dark:group-hover:bg-gray-500/70">
+                            <span className="text-sm transition-transform duration-300 group-hover:scale-110">{theme === "dark" ? "🌞" : "🌙"}</span>
+                        </div>
+                        <span className="text-white transition-colors duration-300 group-hover:text-white/90 dark:text-gray-200 dark:group-hover:text-white">{theme === "dark" ? "Light" : "Dark"}</span>
+                        <div className="absolute inset-0 rounded-lg bg-gradient-to-r from-transparent via-white/5 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100 dark:via-gray-400/10" />
+                    </button>
+                    <button
+                        type="button"
+                        className="aiquants-signout-button flex items-center justify-center 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"
+                        onClick={onClickSignout}>
+                        サインアウト
+                    </button>
+                </div>
+            </div>
+        </div>
+    )
+}

package/src/contents/MenuList.tsx

@@ -0,0 +1,393 @@
+/**
+ * @module MenuList
+ * @description This module provides the list of menu items.
+ * @description このモジュールは、メニュー項目のリストを提供します。
+ */
+
+import { BarChart, Download, FileText, Link as LinkIcon, Lock, Pin, PinOff, Table } from "lucide-react"
+import { type ReactNode, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react"
+import { Link, useLocation } from "react-router-dom"
+
+// SSR 環境では useLayoutEffect が警告を出すため useEffect にフォールバックする
+const useSafeLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect
+
+// メニューバーのスクロール位置を永続化する sessionStorage のキー
+const SCROLL_STORAGE_KEY = "aiquants-menu-scroll"
+
+/**
+ * @interface ISubmenu
+ * @description Interface for a submenu item.
+ * @description サブメニュー項目のインターフェース。
+ * @property {number} subid - The unique ID of the submenu item. サブメニュー項目の一意の ID。
+ * @property {string} [title] - The title of the submenu item. サブメニュー項目のタイトル。
+ * @property {string} href - The URL for the submenu item. サブメニュー項目の URL。
+ * @property {string} [mark] - The type of mark to display next to the item. 項目の横に表示するマークの種類。
+ * @property {boolean} [new] - Whether the item is a new link. 新しいリンクかどうか。
+ */
+export interface ISubmenu {
+    subid: number
+    title?: string
+    href: string
+    mark?: string
+    new?: boolean
+}
+
+/**
+ * @interface IMenu
+ * @description Interface for a menu item.
+ * @description メニュー項目のインターフェース。
+ * @property {number} id - The unique ID of the menu item. メニュー項目の一意の ID。
+ * @property {string} title - The title of the menu item. メニュー項目のタイトル。
+ * @property {string} [href] - The URL for the menu item. メニュー項目の URL。
+ * @property {ISubmenu[]} submenu - The list of submenu items. サブメニュー項目のリスト。
+ */
+export interface IMenu {
+    id: number
+    title: string
+    href?: string
+    submenu: ISubmenu[]
+}
+
+/**
+ * @typedef MenuNavigationPayload
+ * @description Payload emitted when a menu or submenu item is selected.
+ * @description メニューまたはサブメニューが選択された際に発火するペイロード。
+ * @property {{ id: number; title: string; href?: string }} menu - Selected menu metadata.
+ * @property {{ subid: number; title?: string; href: string; mark?: string; new?: boolean }} [submenu] - Selected submenu metadata.
+ */
+export type MenuNavigationPayload = {
+    menu: Pick<IMenu, "id" | "title" | "href">
+    submenu?: Pick<ISubmenu, "subid" | "title" | "href" | "mark" | "new">
+}
+
+/**
+ * @interface IMenuListProps
+ * @description Props for the MenuList component.
+ * @description MenuList コンポーネントの Props。
+ * @property {IMenu[]} menuList - The list of menu items. メニュー項目のリスト。
+ * @property {(payload: MenuNavigationPayload) => void} [onMenuSelected] - Function to handle menu item selection. メニュー項目選択を処理する関数。
+ */
+interface IMenuListProps {
+    menuList: IMenu[]
+    onMenuSelected?(payload: MenuNavigationPayload): void
+    pinnedSubmenuIds?: number[]
+    onToggleSubmenuPin?(id: number): void
+}
+
+const regexp = new RegExp(/(^https?:\/\/)|(\.(html|htm)?$)/)
+
+const markIcons: Record<string, React.ElementType> = {
+    report: FileText,
+    slip: FileText,
+    table: Table,
+    chart: BarChart,
+    download: Download,
+    lock: Lock,
+    href: LinkIcon,
+}
+
+/**
+ * @function StyledLinkText
+ * @description A component that renders a styled link with an optional icon.
+ * @description オプションのアイコンを持つスタイル付きリンクを描画するコンポーネント。
+ * @param {{ mark?: string; children: ReactNode }} props - The props for the component.
+ * @returns {React.JSX.Element} The rendered styled link text.
+ */
+const StyledLinkText = ({ mark, children }: { mark?: string; children: ReactNode }) => {
+    const Icon = mark ? markIcons[mark] : undefined
+    if (!Icon) {
+        return <span className="mx-1 text-sky-600 hover:underline dark:text-sky-400">{children}</span>
+    }
+    return (
+        <div className="flex flex-nowrap items-center">
+            <Icon className="h-4 w-4" />
+            <div className="aiquants-menu-link mx-1 hover:underline">{children}</div>
+        </div>
+    )
+}
+
+/**
+ * @function buildMenuPayload
+ * @description Creates a navigation payload from menu metadata.
+ * @description メニューのメタデータからナビゲーション用ペイロードを生成します。
+ * @param {IMenu} menu - The parent menu item. 親メニュー項目。
+ * @param {ISubmenu} [submenu] - The selected submenu item if any. 選択されたサブメニュー項目。
+ * @returns {MenuNavigationPayload} The constructed payload.
+ */
+const buildMenuPayload = (menu: IMenu, submenu?: ISubmenu): MenuNavigationPayload => {
+    if (!submenu) {
+        return {
+            menu: {
+                id: menu.id,
+                title: menu.title,
+                href: menu.href,
+            },
+        }
+    }
+    return {
+        menu: {
+            id: menu.id,
+            title: menu.title,
+            href: menu.href,
+        },
+        submenu: {
+            subid: submenu.subid,
+            title: submenu.title,
+            href: submenu.href,
+            mark: submenu.mark,
+            new: submenu.new,
+        },
+    }
+}
+
+/**
+ * @function SubMenuItem
+ * @description A component that renders a single submenu item.
+ * @description 単一のサブメニュー項目を描画するコンポーネント。
+ * @param {{ item: ISubmenu; parentMenu: IMenu; onMenuSelected?: (payload: MenuNavigationPayload) => void }} props - The props for the component.
+ * @returns {React.JSX.Element} The rendered submenu item.
+ */
+const SubMenuItem = ({ item, parentMenu, onMenuSelected }: { item: ISubmenu; parentMenu: IMenu; onMenuSelected?: (payload: MenuNavigationPayload) => void }) => {
+    if (item.href === "separator") {
+        return <hr className="aiquants-menu-separator mx-2 my-1 h-px" />
+    }
+
+    const linkContent = <StyledLinkText mark={item.mark}>{item.title}</StyledLinkText>
+
+    const commonProps = {
+        onClick: () => {
+            if (!onMenuSelected) {
+                return
+            }
+            onMenuSelected(buildMenuPayload(parentMenu, item))
+        },
+    }
+
+    if (item.new) {
+        return (
+            <a href={item.href} rel="noopener noreferrer" target="_blank" {...commonProps}>
+                {linkContent}
+            </a>
+        )
+    }
+
+    if (regexp.test(item.href)) {
+        return (
+            <a href={item.href} {...commonProps}>
+                {linkContent}
+            </a>
+        )
+    }
+
+    return (
+        <Link to={item.href} {...commonProps}>
+            {linkContent}
+        </Link>
+    )
+}
+
+/**
+ * @function MenuList
+ * @description A component that renders the list of menu items.
+ * @description メニュー項目のリストを描画するコンポーネント。
+ * @param {IMenuListProps} props - The props for the component.
+ * @returns {React.JSX.Element} The rendered menu list.
+ */
+/**
+ * href からクエリパラメータやハッシュ、末尾のスラッシュを除去して正規化します。
+ */
+const normalizeHref = (href: string | undefined): string => {
+    if (!href) return ""
+    return href.split(/[?#]/)[0].replace(/(?!^\/)\/$/, "")
+}
+
+/**
+ * 現在のパス名に合致するメニュー項目またはサブメニュー項目の親メニューIDを検索します。
+ */
+const getActiveMenuId = (menuList: IMenu[], pathname: string): number | null => {
+    const normalizedPath = pathname !== "/" && pathname.endsWith("/") ? pathname.slice(0, -1) : pathname
+    for (const item of menuList) {
+        if (normalizeHref(item.href) === normalizedPath) {
+            return item.id
+        }
+        if (item.submenu) {
+            for (const sub of item.submenu) {
+                if (normalizeHref(sub.href) === normalizedPath) {
+                    return item.id
+                }
+            }
+        }
+    }
+    return null
+}
+
+export const MenuList = (props: IMenuListProps): React.JSX.Element => {
+    const { menuList, onMenuSelected, pinnedSubmenuIds = [], onToggleSubmenuPin } = props
+
+    // 現在のパス名を取得 (非Router環境のテスト用フォールバック付き)
+    let locationPathname = ""
+    try {
+        const location = useLocation()
+        locationPathname = location.pathname
+    } catch {
+        if (typeof window !== "undefined") {
+            locationPathname = window.location.pathname
+        }
+    }
+
+    // 初回の開閉状態をパス名から特定
+    const initialOpenMenuId = useMemo(() => {
+        return getActiveMenuId(menuList, locationPathname)
+    }, [menuList, locationPathname])
+
+    const [openMenuId, setOpenMenuId] = useState<number | null>(initialOpenMenuId)
+
+    // 自動展開済みのパス名と状態を追跡するRef。
+    // これにより、非同期メニュー読込による menuList 更新時に、ユーザーが手動で閉じたアコーディオンが勝手に再展開されるのを防ぎます。
+    const lastPathnameRef = useRef<string | null>(locationPathname)
+    const hasAutoOpenedRef = useRef<boolean>(initialOpenMenuId !== null)
+
+    useEffect(() => {
+        // パス名変更時にフラグをリセットし、メニューを一旦閉じる
+        if (lastPathnameRef.current !== locationPathname) {
+            lastPathnameRef.current = locationPathname
+            hasAutoOpenedRef.current = false
+        }
+
+        // 現在のパスに対して自動展開が未完了の場合のみ実行
+        if (!hasAutoOpenedRef.current) {
+            const activeId = getActiveMenuId(menuList, locationPathname)
+            if (activeId !== null) {
+                setOpenMenuId(activeId)
+                hasAutoOpenedRef.current = true
+            }
+        }
+    }, [locationPathname, menuList])
+
+    const handleToggle = useCallback(
+        (id: number) => {
+            const isPinned = pinnedSubmenuIds.includes(id)
+            if (isPinned) {
+                // Keep the expanded state of the submenu when it is pinned
+                return
+            }
+            setOpenMenuId((prevId) => (prevId === id ? null : id))
+        },
+        [pinnedSubmenuIds],
+    )
+
+    // スクロールコンテナへの参照。ページ遷移で再マウントされてもスクロール位置を維持するために使用する。
+    const scrollRef = useRef<HTMLDivElement>(null)
+
+    // マウント時に保存済みのスクロール位置を復元する。
+    // サブメニューのピン留め展開状態と同様に、ページ遷移をまたいでもメニューバーのスクロール位置を保持する。
+    // ペイント前に復元してスクロール位置のちらつきを防ぐため useLayoutEffect を使用する。
+    useSafeLayoutEffect(() => {
+        const el = scrollRef.current
+        if (!el) {
+            return
+        }
+        try {
+            const saved = sessionStorage.getItem(SCROLL_STORAGE_KEY)
+            if (saved !== null) {
+                const top = Number.parseFloat(saved)
+                if (!Number.isNaN(top)) {
+                    el.scrollTop = top
+                }
+            }
+        } catch {}
+    }, [])
+
+    // スクロール時に現在位置を sessionStorage へ保存する。
+    const handleScroll = useCallback(() => {
+        const el = scrollRef.current
+        if (!el) {
+            return
+        }
+        try {
+            sessionStorage.setItem(SCROLL_STORAGE_KEY, String(el.scrollTop))
+        } catch {}
+    }, [])
+
+    const MenuListContent = useMemo(() => {
+        return (
+            <>
+                {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-['']">
+                                {regexp.test(item.href) ? (
+                                    <a
+                                        href={item.href}
+                                        onClick={() => {
+                                            if (!onMenuSelected) {
+                                                return
+                                            }
+                                            onMenuSelected(buildMenuPayload(item))
+                                        }}>
+                                        <span className="aiquants-menu-link hover:underline">{item.title}</span>
+                                    </a>
+                                ) : (
+                                    <Link
+                                        to={item.href}
+                                        onClick={() => {
+                                            if (!onMenuSelected) {
+                                                return
+                                            }
+                                            onMenuSelected(buildMenuPayload(item))
+                                        }}>
+                                        <span className="aiquants-menu-link hover:underline">{item.title}</span>
+                                    </Link>
+                                )}
+                            </div>
+                        ) : (
+                            <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-['']"
+                                    onClick={(e) => {
+                                        e.preventDefault()
+                                        handleToggle(item.id)
+                                    }}
+                                    onKeyDown={(e) => {
+                                        if (e.key === "Enter" || e.key === " ") {
+                                            e.preventDefault()
+                                            handleToggle(item.id)
+                                        }
+                                    }}>
+                                    <span>{item.title}</span>
+                                    <button
+                                        type="button"
+                                        onClick={(e) => {
+                                            e.stopPropagation()
+                                            e.preventDefault()
+                                            if (onToggleSubmenuPin) {
+                                                onToggleSubmenuPin(item.id)
+                                            }
+                                        }}
+                                        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} />}
+                                    </button>
+                                </summary>
+                                <div className="aiquants-menu-submenu pointer-events-auto my-1 mr-1 ml-4 rounded p-2 shadow-md">
+                                    {item.submenu.map((subitem) => (
+                                        <div key={subitem.subid} className="aiquants-menu-accordion-container block w-full whitespace-nowrap text-sm">
+                                            <SubMenuItem item={subitem} parentMenu={item} onMenuSelected={onMenuSelected} />
+                                        </div>
+                                    ))}
+                                </div>
+                            </details>
+                        )}
+                    </div>
+                ))}
+            </>
+        )
+    }, [menuList, onMenuSelected, openMenuId, handleToggle, pinnedSubmenuIds])
+
+    return (
+        <div ref={scrollRef} onScroll={handleScroll} className="hidden-scrollbar h-0 grow overflow-y-scroll">
+            {MenuListContent}
+        </div>
+    )
+}

package/src/contents/OverlayShadow.tsx

@@ -0,0 +1,30 @@
+/**
+ * @module OverlayShadow
+ * @description This module provides an overlay shadow component.
+ * @description このモジュールは、オーバーレイシャドウコンポーネントを提供します。
+ */
+
+/**
+ * @interface IOverlayProps
+ * @description Props for the OverlayShadow component.
+ * @description OverlayShadow コンポーネントの Props。
+ * @property {boolean} isOverlay - Whether the overlay is visible. オーバーレイが表示されているかどうか。
+ * @property {() => void} [onOverlayClick] - Function to handle overlay click. オーバーレイのクリックを処理する関数。
+ */
+interface IOverlayProps {
+    isOverlay: boolean
+    onOverlayClick?(): void
+}
+
+/**
+ * @function OverlayShadow
+ * @description A component that renders an overlay shadow.
+ * @description オーバーレイシャドウを描画するコンポーネント。
+ * @param {IOverlayProps} props - The props for the component.
+ * @returns {React.JSX.Element} The rendered overlay shadow.
+ */
+export const OverlayShadow = (props: IOverlayProps): React.JSX.Element => {
+    const { isOverlay, onOverlayClick } = props
+
+    return <button type="button" className={`fixed inset-0 z-2147483640 cursor-default bg-black/50 transition-opacity duration-500 ${isOverlay ? "opacity-100" : "pointer-events-none opacity-0"}`} onClick={onOverlayClick} />
+}

package/src/elements/MenuSwitch.tsx

@@ -0,0 +1,118 @@
+import type { FocusEvent, MouseEvent } from "react"
+import { useCallback, useEffect, useRef } from "react"
+import type { Theme } from "../types"
+
+interface IMenuSwitchProps {
+    open: boolean
+    onMenuOpen?: () => void
+    onMenuClose?: () => void
+    theme: Theme
+}
+
+/**
+ * Renders the toggle button that switches the main menu visibility.
+ * メインメニューの表示状態を切り替えるトグルボタンを描画。
+ */
+export const MenuSwitch = (props: IMenuSwitchProps): React.JSX.Element => {
+    const { open, onMenuOpen, onMenuClose, theme } = props
+    const state = useRef(open)
+    const refSpan1 = useRef<HTMLSpanElement>(null)
+    const refSpan2 = useRef<HTMLSpanElement>(null)
+    const refSpan3 = useRef<HTMLSpanElement>(null)
+    const refSpan4 = useRef<HTMLSpanElement>(null)
+    const refMenuString = useRef<HTMLDivElement>(null)
+
+    const styleOpen = useCallback(() => {
+        if (refSpan1.current && refSpan2.current && refSpan3.current && refSpan4.current && refMenuString.current) {
+            const color = theme === "dark" ? "#fff" : "#000"
+            refSpan1.current.style.backgroundColor = color
+            refSpan1.current.style.width = "100%"
+            refSpan1.current.style.height = "3px"
+            refSpan1.current.style.transform = ""
+            refSpan2.current.style.opacity = "1"
+            refSpan2.current.style.backgroundColor = color
+            refSpan3.current.style.opacity = "1"
+            refSpan3.current.style.backgroundColor = color
+            refSpan4.current.style.backgroundColor = color
+            refSpan4.current.style.width = "100%"
+            refSpan4.current.style.height = "3px"
+            refSpan4.current.style.transform = ""
+            refMenuString.current.style.color = color
+            refMenuString.current.classList.remove("after:content-['close']")
+            refMenuString.current.classList.remove("after:ml-0.5")
+            refMenuString.current.classList.add("after:content-['menu']")
+            refMenuString.current.classList.add("after:-ml-0.5")
+            state.current = true
+        }
+    }, [theme])
+
+    const styleClose = useCallback(() => {
+        if (refSpan1.current && refSpan2.current && refSpan3.current && refSpan4.current && refMenuString.current) {
+            // クローズボタンは背景オーバーレイが暗いため、常に白色
+            refSpan1.current.style.backgroundColor = "#fff"
+            refSpan1.current.style.width = "32px"
+            refSpan1.current.style.height = "4px"
+            refSpan1.current.style.transform = "translateY(9px) rotate(-45deg)"
+            refSpan2.current.style.opacity = "0"
+            refSpan3.current.style.opacity = "0"
+            refSpan4.current.style.backgroundColor = "#fff"
+            refSpan4.current.style.width = "32px"
+            refSpan4.current.style.height = "4px"
+            refSpan4.current.style.transform = "translateY(-9px) rotate(45deg)"
+            refMenuString.current.style.color = "#fff"
+            refMenuString.current.classList.remove("after:content-['menu']")
+            refMenuString.current.classList.remove("after:-ml-0.5")
+            refMenuString.current.classList.add("after:content-['close']")
+            refMenuString.current.classList.add("after:ml-0.5")
+            state.current = false
+        }
+    }, [])
+
+    const handleOpen = useCallback(() => {
+        styleOpen()
+        if (onMenuClose) {
+            onMenuClose()
+        }
+    }, [styleOpen, onMenuClose])
+
+    const handleClose = useCallback(() => {
+        styleClose()
+        if (onMenuOpen) {
+            onMenuOpen()
+        }
+    }, [styleClose, onMenuOpen])
+
+    const handleToggle = useCallback(() => {
+        if (state.current) {
+            handleClose()
+        } else {
+            handleOpen()
+        }
+    }, [handleOpen, handleClose])
+
+    const handleFocus = useCallback((event: FocusEvent<HTMLButtonElement>) => {
+        event.currentTarget.blur()
+    }, [])
+
+    const handleMouseDown = useCallback((event: MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault()
+    }, [])
+
+    useEffect(() => {
+        if (open) {
+            styleOpen()
+        } else {
+            styleClose()
+        }
+    }, [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}>
+            <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} />
+            <span className="absolute top-[18px] left-0 box-border inline-block h-[3px] w-full select-none" ref={refSpan4} />
+            <div className="absolute w-full text-xs after:mt-2 after:block" ref={refMenuString} />
+        </button>
+    )
+}

package/src/index.ts

@@ -0,0 +1,6 @@
+export type { LinkProps, SessionInfoProps } from "./components/SessionInfo"
+export { DefaultLink, SessionInfo } from "./components/SessionInfo"
+export type { IMenu, ISubmenu, MenuNavigationPayload } from "./contents/MenuList"
+export { MenuBar } from "./MenuBar"
+export type { Theme } from "./types"
+export type { UserProfile } from "./types/user"

package/src/styles/components.entry.css

@@ -0,0 +1,9 @@
+/*
+ * 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);
+@import "./menu-bar.css";