@exegia/corpora-ui 0.17.0 → 0.18.0

package/dist-lib/lib/ease.d.ts

@@ -1,3 +1,4 @@
+import { Transition, Variants } from 'motion/react';
 export declare const EASE_OUT: readonly [0.16, 1, 0.3, 1];
 export declare const EASE_IN_OUT: readonly [0.77, 0, 0.175, 1];
 export declare const EASE_DRAWER: readonly [0.32, 0.72, 0, 1];
@@ -44,3 +45,5 @@ export declare const SPRING_GLIDE: {
     readonly damping: 50;
     readonly mass: 0.5;
 };
+export declare const SHELL_TRANSITION: Transition;
+export declare const ICON_VARIANTS: Variants;

package/dist-lib/lib/hooks/use-hover-capable.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Returns true only on devices that have a true hover (mouse / trackpad).
+ * Touch devices fire phantom `:hover` on tap that sticks until tap-elsewhere
+ * — gate hover-only effects (scale lifts, magnetic pulls) behind this.
+ */
+export declare function useHoverCapable(): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exegia/corpora-ui",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "description": "shadcn-ready React UI library for the corpora manuscript-research apps.",
   "license": "MIT",
   "repository": {
@@ -46,6 +46,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cuelume": "^0.2.1",
+    "iconsax-reactjs": "^0.0.8",
     "lucide-react": "^1.31.0",
     "motion": "^12.43.0",
     "motion-icons-react": "^1.1.0",

package/src/components/beste/piece/browser-frame.tsx

@@ -22,7 +22,7 @@ export function BrowserFrame({
         className
       )}
     >
-      <div className="flex min-h-96 w-full flex-col overflow-hidden rounded-lg border border-border bg-neutral-50 shadow-lg dark:bg-neutral-900 relative">
+      <div className="flex min-h-32 w-full max-h-[500px] flex-col overflow-hidden rounded-lg border border-border bg-neutral-50 shadow-lg dark:bg-neutral-900 relative">
         <div id="title-bar" className={cn("flex flex-1 w-full items-center gap-2 px-4 py-3 z-20", titleBarStyle(titleStyle, 'title'))}>
           <div className="flex items-center gap-2" aria-hidden="true">
             <span className="size-3 cursor-pointer rounded-full bg-rose-500 shadow-md outline outline-rose-800" />
@@ -46,7 +46,7 @@ export function BrowserFrame({
             </div>
           )}
         </div>
-        <div className={cn("flex flex-1 ", titleBarStyle(titleStyle, "frame"))}>
+        <div className={cn("flex flex-1", titleBarStyle(titleStyle, "frame"))}>
           {children}
         </div>
       </div>

package/src/components/blocks/nav/sidebar-block.tsx

@@ -4,7 +4,9 @@ import { PanelLeftIcon } from "lucide-react"
 import * as React from "react"
 
 import {
-  AnimatedSidebar,
+  AnimatedPanel as AnimatedSidebar,
+  AnimatedPanelProvider as AnimatedSidebarProvider,
+  AnimatedPanelTrigger as AnimatedSidebarTrigger,
   AnimatedSidebarContent,
   AnimatedSidebarFooter,
   AnimatedSidebarGroup,
@@ -12,9 +14,7 @@ import {
   AnimatedSidebarGroupLabel,
   AnimatedSidebarHeader,
   AnimatedSidebarMenu,
-  AnimatedSidebarProvider,
-  AnimatedSidebarTrigger,
-} from "@/components/motion/animated-sidebar"
+} from "@/components/blocks/shell"
 import { cn } from "@/lib/utils"
 import { SidebarNavRow } from "@/components/blocks/nav/sidebar-nav-row"
 
@@ -34,7 +34,7 @@ export type {
  * beside your own content. It owns its own sidebar context (⌘B toggles it);
  * pass `open`/`onOpenChange` to drive the rail, and `openMobile`/
  * `onOpenMobileChange` to open the drawer from a header button of your own.
- * Compose the underlying `AnimatedSidebar*` parts directly when a screen
+ * Compose the underlying `AnimatedPanel*` parts directly when a screen
  * needs something this API does not cover.
  */
 export function SidebarBlock({

package/src/components/blocks/nav/sidebar-nav-row.tsx

@@ -2,16 +2,15 @@
 
 import * as React from "react"
 
+import type { IRowProps, ISidebarNavItem, ISidebarNavSubItem } from "@/components/blocks/nav/types"
+import { isActive } from "@/components/blocks/nav/utils"
 import {
   AnimatedSidebarMenuButton,
   AnimatedSidebarMenuItem,
   AnimatedSidebarMenuSub,
   AnimatedSidebarMenuSubButton,
   AnimatedSidebarMenuSubItem,
-} from "@/components/motion/animated-sidebar"
-
-import type { IRowProps, ISidebarNavItem, ISidebarNavSubItem } from "@/components/blocks/nav/types"
-import { isActive } from "@/components/blocks/nav/utils"
+} from "@/components/blocks/shell"
 
 export function SidebarNavRow({ item, activeId, onNavigate }: IRowProps) {
   const children = item.items ?? []
@@ -76,4 +75,4 @@ export function SidebarNavRow({ item, activeId, onNavigate }: IRowProps) {
       ) : null}
     </AnimatedSidebarMenuItem>
   )
-}
+}

package/src/components/blocks/scaffold/__tests__/scaffold.test.tsx

@@ -0,0 +1,203 @@
+import { describe, expect, mock, test } from "bun:test"
+import { render, screen, waitFor } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+
+import { Scaffold, useScaffold } from "../index"
+import type { TScaffoldPanelChild } from "../type"
+
+function Strip() {
+  return <span>Strip</span>
+}
+
+function Workspace({
+  onClose,
+  onSwap,
+  onAdd,
+  overflowCount,
+  SecondaryPanel = <Strip />,
+}: {
+  onClose?: () => void
+  onSwap?: () => void
+  onAdd?: () => void
+  overflowCount?: number
+  /** Pass null to render the panel without a secondary strip. */
+  SecondaryPanel?: TScaffoldPanelChild | null
+}) {
+  const scaffold = useScaffold()
+
+  return (
+    <Scaffold.Root {...scaffold.providerProps}>
+      <Scaffold.Sidebar>
+        <button onClick={scaffold.toggleInspector} type="button">
+          Toggle inspector
+        </button>
+      </Scaffold.Sidebar>
+      <Scaffold.Main>
+        <Scaffold.Actions onAdd={onAdd} overflowCount={overflowCount} />
+        <Scaffold.Canvas>
+          <Scaffold.Panel
+            key="alpha"
+            name="Alpha"
+            onClose={onClose}
+            onSwap={onSwap}
+            SecondaryPanel={SecondaryPanel ?? undefined}
+          >
+            <span>Primary body</span>
+          </Scaffold.Panel>
+        </Scaffold.Canvas>
+        <Scaffold.Inspector>
+          <span>Inspector body</span>
+        </Scaffold.Inspector>
+      </Scaffold.Main>
+    </Scaffold.Root>
+  )
+}
+
+/** The seam menu's compact toggle (icon-only, named by `swapLabel`). */
+const menuToggle = () =>
+  screen.queryByRole("button", { name: "Swap panel content" })
+
+describe("Scaffold", () => {
+  test("renders rail, panel surfaces and secondary strip", () => {
+    render(<Workspace />)
+
+    expect(screen.getByRole("navigation", { name: "Primary" })).toBeDefined()
+    const panel = screen.getByRole("region", { name: "Alpha" })
+    expect(panel.textContent).toContain("Primary body")
+    expect(panel.textContent).toContain("Strip")
+  })
+
+  test("close and menu buttons render only with their callbacks", async () => {
+    const user = userEvent.setup()
+    const onClose = mock(() => {})
+
+    const { rerender } = render(<Workspace />)
+    expect(screen.queryByRole("button", { name: "Close panel" })).toBeNull()
+    expect(menuToggle()).toBeNull()
+
+    rerender(<Workspace onClose={onClose} onSwap={() => {}} />)
+    await user.click(screen.getByRole("button", { name: "Close panel" }))
+    expect(onClose).toHaveBeenCalledTimes(1)
+    expect(menuToggle()).toBeDefined()
+  })
+
+  test("seam menu opens; Swap fires onSwap, flips the panel and collapses the menu", async () => {
+    const user = userEvent.setup()
+    const onSwap = mock(() => {})
+    render(<Workspace onSwap={onSwap} />)
+
+    const panel = screen.getByRole("region", { name: "Alpha" })
+    expect(panel.getAttribute("data-swapped")).toBeNull()
+
+    // The compact toggle trades places with the Expand | Swap actions.
+    await user.click(menuToggle() as HTMLElement)
+    await user.click(await screen.findByRole("button", { name: "Swap" }))
+
+    expect(onSwap).toHaveBeenCalledTimes(1)
+    expect(panel.getAttribute("data-swapped")).toBe("")
+
+    // Acting collapses the menu back to the compact toggle; the actions
+    // leave with their exit animation.
+    expect(
+      await screen.findByRole("button", { name: "Swap panel content" })
+    ).toBeDefined()
+    await waitFor(() =>
+      expect(screen.queryByRole("button", { name: "Swap" })).toBeNull()
+    )
+  })
+
+  test("expand trades the flexible slot and flips the chevron", async () => {
+    const user = userEvent.setup()
+    render(<Workspace onSwap={() => {}} />)
+
+    const panel = screen.getByRole("region", { name: "Alpha" })
+    const [top, bottom] = Array.from(
+      panel.querySelectorAll('[data-slot^="scaffold-sub-panel"]')
+    )
+    expect(top.getAttribute("data-expanded")).toBe("")
+    expect(bottom.getAttribute("data-expanded")).toBeNull()
+
+    await user.click(menuToggle() as HTMLElement)
+    await user.click(await screen.findByRole("button", { name: "Expand" }))
+
+    expect(top.getAttribute("data-expanded")).toBeNull()
+    expect(bottom.getAttribute("data-expanded")).toBe("")
+
+    // Reopen: the chevron reflects the flipped state.
+    await user.click(
+      await screen.findByRole("button", { name: "Swap panel content" })
+    )
+    const expandButton = await screen.findByRole("button", { name: "Expand" })
+    expect(
+      expandButton
+        .querySelector("svg.lucide-chevron-down")
+        ?.classList.contains("rotate-180")
+    ).toBe(true)
+
+    // Expanding again restores the primary slot.
+    await user.click(expandButton)
+    expect(top.getAttribute("data-expanded")).toBe("")
+    expect(bottom.getAttribute("data-expanded")).toBeNull()
+  })
+
+  test("seam menu needs a secondary strip", () => {
+    render(<Workspace onSwap={() => {}} SecondaryPanel={null} />)
+
+    expect(menuToggle()).toBeNull()
+  })
+
+  test("actions cluster: Add fires, overflow segment follows the count", async () => {
+    const user = userEvent.setup()
+    const onAdd = mock(() => {})
+
+    const { rerender } = render(<Workspace onAdd={onAdd} />)
+    expect(screen.queryByRole("button", { name: "Browse panels" })).toBeNull()
+
+    await user.click(screen.getByRole("button", { name: "Panel" }))
+    expect(onAdd).toHaveBeenCalledTimes(1)
+
+    // Zero overflowed panels: the segment shows without a badge.
+    rerender(<Workspace overflowCount={0} onAdd={onAdd} />)
+    expect(
+      screen.getByRole("button", { name: "Browse panels" }).textContent
+    ).toBe("")
+
+    rerender(<Workspace overflowCount={2} onAdd={onAdd} />)
+    const browse = screen.getByRole("button", { name: "Browse panels" })
+    expect(browse.textContent).toContain("2")
+  })
+
+  test("inspector opens from outside state and hides again", async () => {
+    const user = userEvent.setup()
+    render(<Workspace />)
+
+    const inspector = () =>
+      screen.getByText("Inspector body").closest("aside") as HTMLElement
+    expect(inspector().getAttribute("aria-hidden")).toBe("true")
+
+    await user.click(screen.getByRole("button", { name: "Toggle inspector" }))
+    expect(inspector().getAttribute("aria-hidden")).toBeNull()
+    expect(
+      screen.getByRole("complementary", { name: "Inspector" })
+    ).toBeDefined()
+
+    await user.click(screen.getByRole("button", { name: "Toggle inspector" }))
+    expect(inspector().getAttribute("aria-hidden")).toBe("true")
+  })
+
+  test("root manages inspector state itself when uncontrolled", () => {
+    render(
+      <Scaffold.Root defaultInspectorOpen>
+        <Scaffold.Main>
+          <Scaffold.Inspector>
+            <span>Drawer</span>
+          </Scaffold.Inspector>
+        </Scaffold.Main>
+      </Scaffold.Root>
+    )
+
+    expect(
+      screen.getByRole("complementary", { name: "Inspector" })
+    ).toBeDefined()
+  })
+})

package/src/components/blocks/scaffold/constants.ts

@@ -0,0 +1,28 @@
+/** Icon-rail width in px (the rail sits directly on the desktop backdrop). */
+export const SCAFFOLD_SIDEBAR_WIDTH = 64
+
+/** Inspector drawer width in px. */
+export const SCAFFOLD_INSPECTOR_WIDTH = 272
+
+/** Gap in px between the drawer/actions and the viewport edges. */
+export const SCAFFOLD_EDGE_GUTTER = 10
+
+/** Vertical room in px reserved above the canvas for the actions cluster. */
+export const SCAFFOLD_HEADER_HEIGHT = 52
+
+/** Height in px of a panel's secondary strip. */
+export const SCAFFOLD_SECONDARY_HEIGHT = 52
+
+/** Gap in px between a panel's primary surface and its secondary strip. */
+export const SCAFFOLD_PANEL_GAP = 10
+
+/** How long the seam menu lingers expanded after the pointer leaves it (ms)
+ * before it collapses back to the compact toggle. The timer keeps counting
+ * even when the pointer leaves the window entirely. */
+export const SCAFFOLD_MENU_COLLAPSE_DELAY = 4000
+
+/** Morph duration in seconds for drawer slides and panel layout shifts. */
+export const SCAFFOLD_MORPH_DURATION = 0.3
+
+/** `--ease-smooth-out` as a motion/react easing tuple. */
+export const SCAFFOLD_EASE = [0.22, 1, 0.36, 1] as const

package/src/components/blocks/scaffold/index.ts

@@ -0,0 +1,38 @@
+import { PanelCloseButton } from "./panel-close-button"
+import { PanelMenuButton } from "./panel-menu-button.tsx"
+import { ScaffoldActions } from "./scaffold-actions"
+import { ScaffoldCanvas } from "./scaffold-canvas"
+import { ScaffoldInspector } from "./scaffold-inspector"
+import { ScaffoldMain } from "./scaffold-main"
+import { ScaffoldPanel } from "./scaffold-panel"
+import { ScaffoldRoot } from "./scaffold-root"
+import { ScaffoldSidebar } from "./scaffold-sidebar"
+import { ScaffoldSubPanel } from "@/components/blocks/scaffold/scaffold-sub-panel.tsx"
+
+export { useScaffoldContext } from "./scaffold-context"
+export { useScaffold } from "./use-scaffold"
+export type * from "./type"
+export * from "./constants"
+
+export {
+  PanelCloseButton,
+  PanelMenuButton,
+  ScaffoldActions,
+  ScaffoldCanvas,
+  ScaffoldInspector,
+  ScaffoldMain,
+  ScaffoldPanel,
+  ScaffoldRoot,
+  ScaffoldSidebar,
+}
+
+export const Scaffold = {
+  Root: ScaffoldRoot,
+  Sidebar: ScaffoldSidebar,
+  Main: ScaffoldMain,
+  Actions: ScaffoldActions,
+  Canvas: ScaffoldCanvas,
+  Panel: ScaffoldPanel,
+  Inspector: ScaffoldInspector,
+  SubPanel: ScaffoldSubPanel
+}

package/src/components/blocks/scaffold/panel-close-button.tsx

@@ -0,0 +1,36 @@
+"use client"
+
+import { RiCloseLine } from "@remixicon/react"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+import type { PanelFloatingButtonProps } from "./type"
+import { floatingButtonClass, revealOnPanelHoverClass } from "./utils"
+
+/** Floating close affordance in a panel's top-right corner. */
+export function PanelCloseButton({
+  onClick,
+  label,
+  sound = true,
+  className,
+}: PanelFloatingButtonProps): React.ReactElement {
+  return (
+    <button
+      id="scaffold-panel-close-button"
+      aria-label={label}
+      className={cn(
+        floatingButtonClass,
+        revealOnPanelHoverClass,
+        "absolute top-4 right-3.5 z-10",
+        className
+      )}
+      data-cuelume-press={sound ? "" : undefined}
+      data-cuelume-release={sound ? "" : undefined}
+      data-slot="scaffold-panel-close"
+      onClick={onClick}
+      type="button"
+    >
+      <RiCloseLine aria-hidden className="size-4" />
+    </button>
+  )
+}

package/src/components/blocks/scaffold/panel-menu-button.tsx

@@ -0,0 +1,240 @@
+"use client"
+
+import * as React from "react"
+
+import {
+  AnimatePresence,
+  motion,
+  useReducedMotion,
+  type Variants,
+} from "motion/react"
+import { More } from "iconsax-reactjs"
+import { LucideArrowUpDown, LucideChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import type { PanelMenuButtonProps } from "./type"
+import { floatingButtonClass, revealOnPanelHoverClass } from "./utils"
+import { Button } from "@/components/ui/button";
+import { GlassButtonGroup } from "@/components/ui/glasscn/glass-button-group.tsx"
+import { EASE_OUT, SPRING_LAYOUT } from "@/lib/ease.ts"
+import { useHoverCapable } from "@/lib/hooks/use-hover-capable"
+import { SCAFFOLD_MENU_COLLAPSE_DELAY } from "./constants"
+
+/** Menu segments blur/fade in place while the track morphs around them. The
+ * exit is a fast tween, not the layout spring — the track stays
+ * overflow-visible, so the popped-out buttons must be gone before the
+ * collapsing pill leaves them behind as a ghost. */
+const MENU_SEGMENT_VARIANTS: Variants = {
+  hidden: { opacity: 0, filter: "blur(4px)" },
+  visible: { opacity: 1, filter: "blur(0px)" },
+  exit: {
+    opacity: 0,
+    filter: "blur(4px)",
+    transition: { duration: 0.18, ease: EASE_OUT },
+  },
+}
+
+/**
+ * Floating swap affordance centered on the seam between a panel's primary
+ * surface and its secondary strip.
+ */
+export function PanelMenuButton({
+  onClick,
+  onExpand,
+  secondaryExpanded = false,
+  label,
+  sound = true,
+  className,
+}: PanelMenuButtonProps): React.ReactElement {
+
+  const reduce = useReducedMotion()
+  const canHover = useHoverCapable()
+  const actionsId = React.useId()
+  const groupRef = React.useRef<HTMLDivElement>(null)
+  const actionsRef = React.useRef<HTMLDivElement>(null)
+  const actionsLeftRef = React.useRef(0)
+  const [expanded, setExpanded] = React.useState(false);
+
+  const transition = reduce ? { duration: 0 } : SPRING_LAYOUT
+
+  const collapseTimerRef = React.useRef<ReturnType<typeof setTimeout>>(undefined)
+  const suppressHoverOpenUntilRef = React.useRef(0)
+  const focusActionsOnOpenRef = React.useRef(false)
+
+  React.useEffect(() => () => clearTimeout(collapseTimerRef.current), [])
+
+  const cancelCollapse = React.useCallback(() => {
+    clearTimeout(collapseTimerRef.current)
+  }, [])
+
+  // Arms when the pointer stops hovering the group: the menu lingers for the
+  // grace period, then collapses — unless the pointer (or focus) came back.
+  const armCollapse = React.useCallback(() => {
+    if (!canHover) return
+    clearTimeout(collapseTimerRef.current)
+    collapseTimerRef.current = setTimeout(() => {
+      // Focus keeps the menu open — don't collapse under the keyboard.
+      if (groupRef.current?.contains(document.activeElement)) return
+      setExpanded(false)
+    }, SCAFFOLD_MENU_COLLAPSE_DELAY)
+  }, [canHover])
+
+  // The grace period must keep counting when the pointer leaves the whole
+  // app — leaving the window can skip the group's own pointerleave, so arm
+  // on viewport exit and window blur as well.
+  React.useEffect(() => {
+    if (!expanded || !canHover) return
+    const root = document.documentElement
+    root.addEventListener("pointerleave", armCollapse)
+    window.addEventListener("blur", armCollapse)
+    return () => {
+      root.removeEventListener("pointerleave", armCollapse)
+      window.removeEventListener("blur", armCollapse)
+    }
+  }, [expanded, canHover, armCollapse])
+
+  // Click-opens replace the toggle with the actions — hand focus over so
+  // keyboard users aren't dropped onto <body>.
+  React.useEffect(() => {
+    if (!expanded || !focusActionsOnOpenRef.current) return
+    focusActionsOnOpenRef.current = false
+    actionsRef.current?.querySelector<HTMLButtonElement>("button")?.focus()
+  }, [expanded])
+
+  const collapse = () => {
+    // The shrinking toggle can glide under a resting cursor and hover-reopen
+    // the menu it just closed — ignore hover-opens until it has settled.
+    suppressHoverOpenUntilRef.current = Date.now() + 600
+    setExpanded(false)
+  }
+
+  // Acting collapses the menu — the pill returns to the compact toggle.
+  const handleAction = (action?: () => void) => {
+    action?.()
+    collapse()
+  }
+
+  // Click open — the touch and keyboard path.
+  const handleOnExpand = () => {
+    if (groupRef.current?.contains(document.activeElement)) {
+      focusActionsOnOpenRef.current = true
+    }
+    setExpanded(true)
+  }
+
+  // Hover on the toggle opens the menu (hover-capable devices only — touch
+  // and keyboard go through the click toggle).
+  const handleToggleHover = () => {
+    if (!canHover || Date.now() < suppressHoverOpenUntilRef.current) return
+    cancelCollapse()
+    setExpanded(true)
+  }
+
+  // popLayout pops the exiting actions group out of the flow — pin it back to
+  // where it sat so it stays visually attached to the toggle while leaving.
+  React.useLayoutEffect(() => {
+    const actionsNode = actionsRef.current
+    if (!actionsNode) return
+
+    if (!expanded) {
+      actionsNode.style.left = `${
+        actionsLeftRef.current - actionsNode.getBoundingClientRect().left
+      }px`
+      return
+    }
+
+    actionsNode.style.left = ""
+    actionsLeftRef.current = actionsNode.getBoundingClientRect().left
+  }, [expanded])
+
+  return (
+    <GlassButtonGroup
+      ref={groupRef}
+      layout
+      transition={transition}
+      onPointerEnter={cancelCollapse}
+      onPointerLeave={armCollapse}
+      glassVariant="subtle"
+      className={cn(
+        floatingButtonClass,
+        revealOnPanelHoverClass,
+        // Centered on the seam: secondary height (52px) + half the 10px gap.
+        "absolute top-1/2 z-10 -translate-y-1/2 overflow-visible!",
+        className
+      )}
+    >
+      <AnimatePresence mode="popLayout" initial={false}>
+        {expanded ? (
+          <motion.div
+            key="menu-actions"
+            ref={actionsRef}
+            id={actionsId}
+            layout
+            variants={MENU_SEGMENT_VARIANTS}
+            initial={reduce ? { opacity: 0 } : "hidden"}
+            animate={reduce ? { opacity: 1 } : "visible"}
+            exit={reduce ? { opacity: 0 } : "exit"}
+            transition={transition}
+            className="relative flex w-max items-stretch"
+          >
+            <Button
+              id="scaffold-panel-menu-expand"
+              size="sm"
+              variant="ghost"
+              sound={sound}
+              data-slot="scaffold-panel-menu-swap"
+              // The motion wrapper hides these from the group's corner
+              // selectors — restore what ButtonGroup would have applied.
+              className="rounded-r-none"
+              onClick={() => handleAction(onExpand)}
+            >
+              {/* Button's [&_svg]:transition-transform eases the flip. */}
+              <LucideChevronDown
+                size={16}
+                className={cn(secondaryExpanded && "rotate-180")}
+              />
+              Expand
+            </Button>
+            <Button
+              id="scaffold-panel-menu-swap"
+              size="sm"
+              variant="ghost"
+              sound={sound}
+              data-slot="scaffold-panel-menu-swap"
+              className="rounded-l-none border-l-0"
+              onClick={() => handleAction(onClick)}
+            >
+              <LucideArrowUpDown size={16} />
+              Swap
+            </Button>
+          </motion.div>
+        ) : (
+          <motion.div
+            key="menu-toggle"
+            layout
+            variants={MENU_SEGMENT_VARIANTS}
+            initial={reduce ? { opacity: 0 } : "hidden"}
+            animate={reduce ? { opacity: 1 } : "visible"}
+            exit={reduce ? { opacity: 0 } : "exit"}
+            transition={transition}
+            className="flex shrink-0"
+          >
+            <Button
+              id="scaffold-panel-menu-toggle-button"
+              aria-label={label}
+              aria-expanded={expanded}
+              size="icon-sm"
+              variant="ghost"
+              sound={sound}
+              data-slot="scaffold-panel-menu-toggle"
+              onClick={handleOnExpand}
+              onPointerEnter={handleToggleHover}
+            >
+              <More size={16} />
+            </Button>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </GlassButtonGroup>
+  )
+}