@exegia/corpora-ui 0.18.0 → 0.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exegia/corpora-ui",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "shadcn-ready React UI library for the corpora manuscript-research apps.",
   "license": "MIT",
   "repository": {

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

@@ -1,6 +1,7 @@
 import { describe, expect, mock, test } from "bun:test"
 import { render, screen, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import type { ReactNode } from "react"
 
 import { Scaffold, useScaffold } from "../index"
 import type { TScaffoldPanelChild } from "../type"
@@ -10,16 +11,17 @@ function Strip() {
 }
 
 function Workspace({
-  onClose,
   onSwap,
+  onCloseSecondary,
   onAdd,
-  overflowCount,
+  tabs,
   SecondaryPanel = <Strip />,
 }: {
-  onClose?: () => void
   onSwap?: () => void
+  onCloseSecondary?: () => void
   onAdd?: () => void
-  overflowCount?: number
+  /** Rendered as Actions children — the panel tabs. */
+  tabs?: ReactNode
   /** Pass null to render the panel without a secondary strip. */
   SecondaryPanel?: TScaffoldPanelChild | null
 }) {
@@ -33,12 +35,12 @@ function Workspace({
         </button>
       </Scaffold.Sidebar>
       <Scaffold.Main>
-        <Scaffold.Actions onAdd={onAdd} overflowCount={overflowCount} />
+        <Scaffold.Actions onAdd={onAdd}>{tabs}</Scaffold.Actions>
         <Scaffold.Canvas>
           <Scaffold.Panel
             key="alpha"
             name="Alpha"
-            onClose={onClose}
+            onCloseSecondary={onCloseSecondary}
             onSwap={onSwap}
             SecondaryPanel={SecondaryPanel ?? undefined}
           >
@@ -57,6 +59,12 @@ function Workspace({
 const menuToggle = () =>
   screen.queryByRole("button", { name: "Swap panel content" })
 
+/** Under the id'd `#scaffold-actions` ancestor, happy-dom serves stale
+ * selector-cache results to `waitFor` queries that start while an
+ * AnimatePresence exit is still running — let the exit settle on real
+ * timers, then query once. */
+const settleExit = () => new Promise((resolve) => setTimeout(resolve, 400))
+
 describe("Scaffold", () => {
   test("renders rail, panel surfaces and secondary strip", () => {
     render(<Workspace />)
@@ -67,20 +75,40 @@ describe("Scaffold", () => {
     expect(panel.textContent).toContain("Strip")
   })
 
-  test("close and menu buttons render only with their callbacks", async () => {
-    const user = userEvent.setup()
-    const onClose = mock(() => {})
-
+  test("seam menu renders only with a callback; actions stay hidden until opened", () => {
     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)
+    rerender(<Workspace onSwap={() => {}} />)
+    expect(menuToggle()).toBeDefined()
+    // Collapsed: the action segment is aria-hidden and inert.
+    expect(screen.queryByRole("button", { name: "Swap" })).toBeNull()
+
+    // The Close action alone also earns the menu.
+    rerender(<Workspace onCloseSecondary={() => {}} />)
     expect(menuToggle()).toBeDefined()
   })
 
+  test("seam menu Close renders only with onCloseSecondary, fires and collapses", async () => {
+    const user = userEvent.setup()
+    const onCloseSecondary = mock(() => {})
+
+    const { rerender } = render(<Workspace onSwap={() => {}} />)
+    await user.click(menuToggle() as HTMLElement)
+    expect(await screen.findByRole("button", { name: "Swap" })).toBeDefined()
+    expect(screen.queryByRole("button", { name: "Close" })).toBeNull()
+
+    rerender(
+      <Workspace onCloseSecondary={onCloseSecondary} onSwap={() => {}} />
+    )
+    await user.click(screen.getByRole("button", { name: "Close" }))
+    expect(onCloseSecondary).toHaveBeenCalledTimes(1)
+
+    // Acting collapses the menu back to the compact toggle.
+    expect(menuToggle()).toBeDefined()
+    expect(screen.queryByRole("button", { name: "Close" })).toBeNull()
+  })
+
   test("seam menu opens; Swap fires onSwap, flips the panel and collapses the menu", async () => {
     const user = userEvent.setup()
     const onSwap = mock(() => {})
@@ -140,31 +168,86 @@ describe("Scaffold", () => {
     expect(bottom.getAttribute("data-expanded")).toBeNull()
   })
 
+  test("expand chevron mirrors when the panel is swapped", async () => {
+    const user = userEvent.setup()
+    render(<Workspace onSwap={() => {}} />)
+
+    // Swap first — column-reverse puts the strip visually on top.
+    await user.click(menuToggle() as HTMLElement)
+    await user.click(await screen.findByRole("button", { name: "Swap" }))
+
+    // Primary still holds the flexible slot, but the strip that grows
+    // next now sits on top — the chevron points up.
+    await user.click(
+      await screen.findByRole("button", { name: "Swap panel content" })
+    )
+    const expandButton = await screen.findByRole("button", { name: "Expand" })
+    const chevron = () => expandButton.querySelector("svg.lucide-chevron-down")
+    expect(chevron()?.classList.contains("rotate-180")).toBe(true)
+
+    // After expanding, the primary — now visually at the bottom — grows
+    // next: the chevron points down again.
+    await user.click(expandButton)
+    await user.click(
+      await screen.findByRole("button", { name: "Swap panel content" })
+    )
+    expect(chevron()?.classList.contains("rotate-180")).toBe(false)
+  })
+
   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 () => {
+  test("actions cluster: Add renders only with onAdd and fires", async () => {
     const user = userEvent.setup()
     const onAdd = mock(() => {})
 
-    const { rerender } = render(<Workspace onAdd={onAdd} />)
-    expect(screen.queryByRole("button", { name: "Browse panels" })).toBeNull()
+    // Consumers omit onAdd at SCAFFOLD_PANEL_CAPACITY — the segment hides.
+    const { rerender } = render(<Workspace />)
+    expect(screen.queryByRole("button", { name: "Panel" })).toBeNull()
 
+    rerender(<Workspace onAdd={onAdd} />)
     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 />)
+    await settleExit()
+    expect(screen.queryByRole("button", { name: "Panel" })).toBeNull()
+  })
+
+  test("panel tabs show their label; close renders only with onClose and fires", async () => {
+    const user = userEvent.setup()
+    const onCloseTab = mock(() => {})
+
+    // Consumers omit onClose on the last remaining panel's tab.
+    const { rerender } = render(
+      <Workspace tabs={<Scaffold.Tab key="alpha">Alpha</Scaffold.Tab>} />
+    )
+    expect(screen.getByText("Alpha")).toBeDefined()
+    expect(screen.queryByRole("button", { name: "Close Alpha" })).toBeNull()
+
+    rerender(
+      <Workspace
+        tabs={
+          <Scaffold.Tab
+            key="alpha"
+            closeLabel="Close Alpha"
+            onClose={onCloseTab}
+          >
+            Alpha
+          </Scaffold.Tab>
+        }
+      />
+    )
+    await user.click(screen.getByRole("button", { name: "Close Alpha" }))
+    expect(onCloseTab).toHaveBeenCalledTimes(1)
 
-    rerender(<Workspace overflowCount={2} onAdd={onAdd} />)
-    const browse = screen.getByRole("button", { name: "Browse panels" })
-    expect(browse.textContent).toContain("2")
+    // Closing removes the tab — it animates out of the pill.
+    rerender(<Workspace tabs={null} />)
+    await settleExit()
+    expect(screen.queryByText("Alpha")).toBeNull()
   })
 
   test("inspector opens from outside state and hides again", async () => {

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

@@ -4,6 +4,10 @@ export const SCAFFOLD_SIDEBAR_WIDTH = 64
 /** Inspector drawer width in px. */
 export const SCAFFOLD_INSPECTOR_WIDTH = 272
 
+/** Most panels the canvas holds at once — omit Actions' `onAdd` when the
+ * count reaches it so the Add segment hides. */
+export const SCAFFOLD_PANEL_CAPACITY = 3
+
 /** Gap in px between the drawer/actions and the viewport edges. */
 export const SCAFFOLD_EDGE_GUTTER = 10
 

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

@@ -7,6 +7,7 @@ import { ScaffoldMain } from "./scaffold-main"
 import { ScaffoldPanel } from "./scaffold-panel"
 import { ScaffoldRoot } from "./scaffold-root"
 import { ScaffoldSidebar } from "./scaffold-sidebar"
+import { ScaffoldTab } from "./scaffold-tab"
 import { ScaffoldSubPanel } from "@/components/blocks/scaffold/scaffold-sub-panel.tsx"
 
 export { useScaffoldContext } from "./scaffold-context"
@@ -24,6 +25,7 @@ export {
   ScaffoldPanel,
   ScaffoldRoot,
   ScaffoldSidebar,
+  ScaffoldTab,
 }
 
 export const Scaffold = {
@@ -33,6 +35,7 @@ export const Scaffold = {
   Actions: ScaffoldActions,
   Canvas: ScaffoldCanvas,
   Panel: ScaffoldPanel,
+  Tab: ScaffoldTab,
   Inspector: ScaffoldInspector,
-  SubPanel: ScaffoldSubPanel
+  SubPanel: ScaffoldSubPanel,
 }

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

@@ -2,61 +2,45 @@
 
 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 { LucideArrowUpDown, LucideChevronDown, LucideX } 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 { 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 },
-  },
-}
+/** One side of the seam menu. Both sides stay mounted; the pill morphs by
+ * collapsing one side's grid column to 0fr while the other grows — pure
+ * CSS, driven by `data-expanded` on the group. The hidden side is inert
+ * and aria-hidden so it can't be clicked, focused or found by queries. */
+const menuCellClass =
+  "grid transition-[grid-template-columns,opacity] duration-300 ease-smooth-out motion-reduce:transition-none"
 
 /**
- * Floating swap affordance centered on the seam between a panel's primary
- * surface and its secondary strip.
+ * Floating menu affordance centered on the seam between a panel's primary
+ * surface and its secondary strip: a compact ⋯ toggle that morphs into the
+ * Expand | Swap (| Close) actions.
  */
 export function PanelMenuButton({
   onClick,
   onExpand,
+  onCloseSecondary,
   secondaryExpanded = false,
+  swapped = 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)
@@ -94,7 +78,7 @@ export function PanelMenuButton({
   }, [expanded, canHover, armCollapse])
 
   // Click-opens replace the toggle with the actions — hand focus over so
-  // keyboard users aren't dropped onto <body>.
+  // keyboard users aren't dropped onto an inert control.
   React.useEffect(() => {
     if (!expanded || !focusActionsOnOpenRef.current) return
     focusActionsOnOpenRef.current = false
@@ -130,111 +114,105 @@ export function PanelMenuButton({
     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"
+      data-expanded={expanded ? "" : undefined}
       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!",
+        "group/menu absolute top-1/2 z-10 -translate-y-1/2",
         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"
+      <div
+        aria-hidden={expanded || undefined}
+        inert={expanded || undefined}
+        className={cn(
+          menuCellClass,
+          "grid-cols-[1fr] opacity-100 group-data-expanded/menu:grid-cols-[0fr] group-data-expanded/menu:opacity-0"
+        )}
+      >
+        <div className="flex min-w-0 overflow-hidden">
+          <Button
+            id="scaffold-panel-menu-toggle-button"
+            aria-label={label}
+            aria-expanded={expanded}
+            aria-controls={actionsId}
+            size="icon-sm"
+            variant="ghost"
+            sound={sound}
+            data-slot="scaffold-panel-menu-toggle"
+            onClick={handleOnExpand}
+            onPointerEnter={handleToggleHover}
           >
+            <More size={16} />
+          </Button>
+        </div>
+      </div>
+      <div
+        id={actionsId}
+        ref={actionsRef}
+        aria-hidden={!expanded || undefined}
+        inert={!expanded || undefined}
+        className={cn(
+          menuCellClass,
+          "grid-cols-[0fr] opacity-0 group-data-expanded/menu:grid-cols-[1fr] group-data-expanded/menu:opacity-100"
+        )}
+      >
+        <div className="flex min-w-0 overflow-hidden">
+          <Button
+            id="scaffold-panel-menu-expand"
+            size="sm"
+            variant="ghost"
+            sound={sound}
+            data-slot="scaffold-panel-menu-expand"
+            className="rounded-r-none"
+            onClick={() => handleAction(onExpand)}
+          >
+            {/* Points at the sub-panel that grows next, in VISUAL space —
+                a swapped panel is column-reverse, so the direction mirrors.
+                Button's [&_svg]:transition-transform eases the flip. */}
+            <LucideChevronDown
+              size={16}
+              className={cn(secondaryExpanded !== swapped && "rotate-180")}
+            />
+            Expand
+          </Button>
+          <Button
+            id="scaffold-panel-menu-swap"
+            size="sm"
+            variant="ghost"
+            sound={sound}
+            data-slot="scaffold-panel-menu-swap"
+            className={cn(
+              "border-l-0",
+              onCloseSecondary ? "rounded-none" : "rounded-l-none"
+            )}
+            onClick={() => handleAction(onClick)}
+          >
+            <LucideArrowUpDown size={16} />
+            Swap
+          </Button>
+          {onCloseSecondary && (
             <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"
+              id="scaffold-panel-menu-close"
               size="sm"
               variant="ghost"
               sound={sound}
-              data-slot="scaffold-panel-menu-swap"
+              data-slot="scaffold-panel-menu-close"
               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}
+              onClick={() => handleAction(onCloseSecondary)}
             >
-              <More size={16} />
+              <LucideX size={16} />
+              Close
             </Button>
-          </motion.div>
-        )}
-      </AnimatePresence>
+          )}
+        </div>
+      </div>
     </GlassButtonGroup>
   )
 }

package/src/components/blocks/scaffold/scaffold-actions.tsx

@@ -1,31 +1,28 @@
 "use client"
 
-import { motion, useReducedMotion } from "motion/react"
+import { AnimatePresence, motion, useReducedMotion } from "motion/react"
 import * as React from "react"
 
 import { cn } from "@/lib/utils"
 import { SCAFFOLD_EASE, SCAFFOLD_EDGE_GUTTER, SCAFFOLD_MORPH_DURATION } from "./constants"
 import { useScaffoldContext } from "./scaffold-context"
 import type { ScaffoldActionsProps } from "./type"
-import { actionSegmentClass } from "./utils"
-import { GroupSeparator } from "@/components/ui/group"
-import { GlassButtonGroup } from "@/components/ui/glasscn/glass-button-group"
-import { Button } from "@/components/ui/button";
+import { segmentVariants } from "./utils"
+import { Button } from "@/components/ui/button"
+import { SPRING_LAYOUT } from "@/lib/ease.ts"
 import { LucidePlus } from "lucide-react"
 
 /**
  * The floating pill cluster in the main region's top-right corner — the
- * design's "Panel Context Menu": an Add segment plus an overflow segment
- * whose badge counts the non-visible panels. Slides left in step with the
- * inspector opening.
+ * design's "Panel Context Menu": one tab per open panel (`Scaffold.Tab`
+ * children) plus an Add segment. Add renders only while `onAdd` is
+ * present — omit it once the canvas holds `SCAFFOLD_PANEL_CAPACITY`
+ * panels. Slides left in step with the inspector opening.
  */
 export function ScaffoldActions({
   onAdd,
   addLabel = "Panel",
   addIcon,
-  overflowCount,
-  onBrowse,
-  browseLabel = "Browse panels",
   sound = true,
   className,
   children,
@@ -33,12 +30,7 @@ export function ScaffoldActions({
 }: ScaffoldActionsProps): React.ReactElement {
   const { inspectorOpen, inspectorWidth } = useScaffoldContext()
   const reducedMotion = useReducedMotion()
-
-  const soundProps = {
-    "data-cuelume-press": sound ? "" : undefined,
-    "data-cuelume-release": sound ? "" : undefined,
-  }
-  const showBrowse = overflowCount !== undefined || onBrowse !== undefined
+  const transition = reducedMotion ? { duration: 0 } : SPRING_LAYOUT
 
   return (
     <motion.div
@@ -47,7 +39,7 @@ export function ScaffoldActions({
         x: inspectorOpen ? -(inspectorWidth + SCAFFOLD_EDGE_GUTTER) : 0,
       }}
       className={cn(
-        "sticky inline-flex items-center gap-0.5 h-12",
+        "sticky inline-flex h-12 items-center gap-0.5",
         "justify-end",
         className
       )}
@@ -59,39 +51,38 @@ export function ScaffoldActions({
       }}
       {...rest}
     >
-      {children}
-      <GlassButtonGroup glassVariant="liquid-refract" className="rounded-md">
-        <Button
-          onClick={onAdd}
-          size="sm"
-          variant="ghost"
-        >
-          {addIcon ?? <LucidePlus className="stroke-3" />}
-          {addLabel}
-        </Button>
-        {!showBrowse && <GroupSeparator />}
-        {showBrowse && (
-            <button
-              aria-label={browseLabel}
-              className={cn(actionSegmentClass, "gap-0.5 px-2")}
-              onClick={onBrowse}
-              type="button"
-              {...soundProps}
+      <motion.div
+        layout
+        transition={transition}
+        className="flex items-center gap-1.5"
+      >
+        <AnimatePresence mode="popLayout" initial={false}>
+          {onAdd && (
+            <motion.div
+              key="scaffold-add"
+              layout
+              animate={reducedMotion ? { opacity: 1 } : "visible"}
+              className="flex shrink-0"
+              exit={reducedMotion ? { opacity: 0 } : "exit"}
+              initial={reducedMotion ? { opacity: 0 } : "hidden"}
+              transition={transition}
+              variants={segmentVariants}
             >
-              <span className="relative">
-
-                {overflowCount !== undefined && overflowCount > 0 && (
-                  <span className="absolute -top-1.5 -right-1.5 flex size-3.5 items-center justify-center rounded-full bg-neutral-700 text-[9px] font-semibold text-white dark:bg-neutral-200 dark:text-neutral-900">
-                    {overflowCount}
-                  </span>
-                )}
-              </span>
-
-            </button>
-        )}
-
-        {children}
-      </GlassButtonGroup>
+              <Button
+                onClick={onAdd}
+                size="sm"
+                sound={sound}
+                variant="ghost"
+                className="h-full gap-2 rounded-sm py-1.5 pr-3 pl-2"
+              >
+                {addIcon ?? <LucidePlus className="stroke-2" />}
+                {addLabel}
+              </Button>
+            </motion.div>
+          )}
+          {children}
+        </AnimatePresence>
+      </motion.div>
     </motion.div>
   )
 }