@exegia/corpora-ui 1.0.0 → 2.0.0

package/src/components/blocks/shell/__tests__/shell-layout.test.tsx

@@ -5,7 +5,7 @@ import userEvent from "@testing-library/user-event"
 import { ShellLayout } from "../shell-layout"
 import { useShellPanels } from "../use-shell-panels"
 import { SHELL_WIDTHS } from "../utils"
-import type { TPanelMap, UseShellPanelsOptions } from "../type"
+import type { TPanelMap, IUseShellPanelsOptions } from "../type"
 
 const PANELS: TPanelMap = {
   left: {
@@ -32,7 +32,7 @@ const PANELS: TPanelMap = {
  *   rail 256 (56 folded) + body 360 + panel 320
  *
  * Only probes are intercepted; every other box keeps happy-dom's answer. */
-function stubShellWidths() {
+function stubShellWidths(containerWidth = () => window.innerWidth) {
   const px = Object.fromEntries(
     Object.entries(SHELL_WIDTHS).map(([name, value]) => [
       name,
@@ -41,6 +41,8 @@ function stubShellWidths() {
   )
   const original = Element.prototype.getBoundingClientRect
   Element.prototype.getBoundingClientRect = function (this: HTMLElement) {
+    if (this.getAttribute("data-slot") === "sidebar-wrapper")
+      return { width: containerWidth() } as DOMRect
     const isProbe =
       this.style.visibility === "hidden" && this.style.position === "absolute"
     if (!isProbe) return original.call(this)
@@ -53,7 +55,7 @@ function stubShellWidths() {
   }
 }
 
-interface HappyDOMWindow {
+interface IHappyDOMWindow {
   happyDOM?: { setViewport: (viewport: { width: number }) => void }
 }
 
@@ -61,7 +63,7 @@ interface HappyDOMWindow {
  * plus the `resize` event, inside `act` so the remeasure lands in this tick. */
 function resizeViewport(width: number) {
   act(() => {
-    ;(globalThis as HappyDOMWindow).happyDOM?.setViewport({ width })
+    ;(globalThis as IHappyDOMWindow).happyDOM?.setViewport({ width })
     window.dispatchEvent(new Event("resize"))
   })
 }
@@ -75,11 +77,11 @@ const WIDE_VIEWPORT = 1024
  * cleanup) remeasures on it. */
 function shellViewport(width: number) {
   const restoreWidths = stubShellWidths()
-  ;(globalThis as HappyDOMWindow).happyDOM?.setViewport({ width })
+  ;(globalThis as IHappyDOMWindow).happyDOM?.setViewport({ width })
   return () => {
     restoreWidths()
     act(() => {
-      ;(globalThis as HappyDOMWindow).happyDOM?.setViewport({
+      ;(globalThis as IHappyDOMWindow).happyDOM?.setViewport({
         width: WIDE_VIEWPORT,
       })
     })
@@ -92,7 +94,7 @@ function leftRail() {
 }
 
 function rightDrawer(name = "Inspector") {
-  return screen.getByRole("complementary", { name })
+  return document.querySelector(`[data-slot="sidebar"][aria-label="${name}"]`)!
 }
 
 describe("ShellLayout", () => {
@@ -136,7 +138,10 @@ describe("ShellLayout", () => {
 
   test("trailing renders the cluster even with no right panel", () => {
     render(
-      <ShellLayout trailing={<button type="button">Upload</button>} variant="web" />
+      <ShellLayout
+        trailing={<button type="button">Upload</button>}
+        variant="web"
+      />
     )
 
     expect(screen.getByRole("button", { name: "Upload" })).toBeDefined()
@@ -299,7 +304,7 @@ describe("ShellLayout", () => {
 function HookedShell({
   onPanelChange,
 }: {
-  onPanelChange?: UseShellPanelsOptions["onPanelChange"]
+  onPanelChange?: IUseShellPanelsOptions["onPanelChange"]
 }) {
   const panels = useShellPanels({ onPanelChange })
 
@@ -449,3 +454,143 @@ describe("useShellPanels", () => {
     expect(rightDrawer().getAttribute("data-state")).toBe("collapsed")
   })
 })
+
+describe("shell app-wide panel state", () => {
+  function RemoteControls() {
+    const panels = useShellPanels({ shellId: "shared-shell" })
+    return (
+      <>
+        <button onClick={() => panels.toggle("right")}>Remote inspector</button>
+        <button onClick={() => panels.resizeSidebar(280)}>Resize rail</button>
+        <output aria-label="Rail width">{panels.sidebarWidth}</output>
+        <button
+          onClick={() => panels.openPanel("right", <div>Remote details</div>)}
+        >
+          Remote content
+        </button>
+        <output>{panels.open.right ? "Remote open" : "Remote closed"}</output>
+      </>
+    )
+  }
+
+  test("separate hooks drive the same named shell and dynamic content", async () => {
+    const user = userEvent.setup()
+    const restore = shellViewport(WIDE_VIEWPORT)
+    try {
+      render(
+        <>
+          <ShellLayout shellId="shared-shell" panels={PANELS}>
+            Workspace
+          </ShellLayout>
+          <RemoteControls />
+        </>
+      )
+      await user.click(screen.getByRole("button", { name: "Resize rail" }))
+      expect(screen.getByLabelText("Rail width").textContent).toBe("280")
+      expect(
+        document
+          .querySelector<HTMLElement>('[data-slot="sidebar-wrapper"]')
+          ?.style.getPropertyValue("--sidebar-width")
+      ).toBe("280px")
+      await user.click(screen.getByRole("button", { name: "Remote inspector" }))
+      expect(rightDrawer().getAttribute("data-state")).toBe("expanded")
+      expect(screen.getByText("Remote open")).toBeTruthy()
+      await user.click(screen.getByRole("button", { name: "Toggle panel" }))
+      expect(screen.getByText("Remote closed")).toBeTruthy()
+      await user.click(screen.getByRole("button", { name: "Remote content" }))
+      expect(screen.getByText("Remote details")).toBeTruthy()
+      expect(rightDrawer().getAttribute("data-state")).toBe("expanded")
+    } finally {
+      restore()
+    }
+  })
+})
+
+describe("shell container responsiveness", () => {
+  test("shrinks, folds, hides, and restores from container-only resizes", async () => {
+    let width = 1100
+    const restoreWidths = stubShellWidths(() => width)
+    const originalObserver = globalThis.ResizeObserver
+    const callbacks = new Set<ResizeObserverCallback>()
+    globalThis.ResizeObserver = class {
+      callback: ResizeObserverCallback
+      constructor(callback: ResizeObserverCallback) {
+        this.callback = callback
+      }
+      observe(node: Element) {
+        if (node.getAttribute("data-slot") === "sidebar-wrapper")
+          callbacks.add(this.callback)
+      }
+      unobserve() {}
+      disconnect() {
+        callbacks.delete(this.callback)
+      }
+    } as unknown as typeof ResizeObserver
+    const resizeContainer = (next: number) =>
+      act(() => {
+        width = next
+        for (const callback of callbacks) callback([], {} as ResizeObserver)
+      })
+    const user = userEvent.setup()
+    function RemoteState() {
+      const { sidebar } = useShellPanels({ shellId: "responsive-shell" })
+      return (
+        <output data-testid="sidebar-fit">{JSON.stringify(sidebar)}</output>
+      )
+    }
+    const currentFit = () =>
+      JSON.parse(screen.getByTestId("sidebar-fit").textContent ?? "{}")
+    try {
+      render(
+        <>
+          <ShellLayout shellId="responsive-shell" panels={PANELS}>
+            Main content
+          </ShellLayout>
+          <RemoteState />
+        </>
+      )
+      expect(currentFit().width).toBe(256)
+      await user.click(screen.getByRole("button", { name: "Toggle panel" }))
+      resizeContainer(570)
+      expect(currentFit()).toMatchObject({
+        width: 210,
+        mode: "expanded",
+        canExpand: true,
+      })
+      expect(screen.queryByRole("button", { name: "Toggle panel" })).toBeNull()
+      resizeContainer(539)
+      expect(currentFit()).toMatchObject({
+        width: 56,
+        mode: "icon",
+        canExpand: false,
+      })
+      expect(
+        screen
+          .getByRole("button", { name: "Toggle sidebar" })
+          .hasAttribute("disabled")
+      ).toBe(true)
+      await user.keyboard("{Meta>}b{/Meta}")
+      expect(currentFit().mode).toBe("icon")
+      resizeContainer(390)
+      expect(currentFit().mode).toBe("hidden")
+      expect(
+        screen.queryByRole("navigation", { name: "Primary navigation" })
+      ).toBeNull()
+      expect(screen.getByRole("main").textContent).toContain("Main content")
+      resizeContainer(1100)
+      expect(currentFit()).toMatchObject({
+        width: 256,
+        mode: "expanded",
+        canExpand: true,
+      })
+      expect(rightDrawer().getAttribute("data-state")).toBe("collapsed")
+      await user.click(screen.getByRole("button", { name: "Toggle sidebar" }))
+      resizeContainer(390)
+      resizeContainer(1100)
+      expect(currentFit().mode).toBe("icon")
+    } finally {
+      restoreWidths()
+      globalThis.ResizeObserver = originalObserver
+    }
+  })
+})

package/src/components/blocks/shell/__tests__/shell-metrics.test.ts

@@ -3,16 +3,17 @@ import { describe, expect, test } from "bun:test"
 import {
   clampPanelWidth,
   fitsPanel,
+  fitSidebar,
   metricsEqual,
   panelBounds,
   requiredWidth,
-  type ShellMetrics,
+  type IShellMetrics,
 } from "../shell-metrics"
 
 /** The columns the shell ships with: rail 256 (56 folded), body floor 360,
  * secondary panel floor 320 — 936px before a panel can exist — plus the 32px
  * of shell padding and column gaps that only the ceiling pays for. */
-function shell(over: Partial<ShellMetrics> = {}): ShellMetrics {
+function shell(over: Partial<IShellMetrics> = {}): IShellMetrics {
   return {
     rail: 256,
     insetMin: 360,
@@ -30,9 +31,9 @@ describe("fitsPanel", () => {
     expect(fitsPanel(shell({ viewport: 800 }))).toBe(false)
   })
 
-  test("is strict — a viewport that fits exactly has nothing left to give", () => {
-    expect(fitsPanel(shell({ viewport: 936 }))).toBe(false)
-    expect(fitsPanel(shell({ viewport: 937 }))).toBe(true)
+  test("requires space for all columns including padding and gaps", () => {
+    expect(fitsPanel(shell({ viewport: 967 }))).toBe(false)
+    expect(fitsPanel(shell({ viewport: 968 }))).toBe(true)
   })
 
   test("a folded rail hands its column back", () => {
@@ -40,7 +41,7 @@ describe("fitsPanel", () => {
   })
 
   test("a shell with no rail spends nothing on one", () => {
-    expect(fitsPanel(shell({ rail: 0, viewport: 700 }))).toBe(true)
+    expect(fitsPanel(shell({ rail: 0, viewport: 720 }))).toBe(true)
   })
 
   test("an unmeasurable shell fails open rather than hiding the panel", () => {
@@ -56,10 +57,9 @@ describe("fitsPanel", () => {
     expect(fitsPanel(shell({ panelMin: 0 }))).toBe(true)
   })
 
-  test("ignores the shell's own frame — the rule is stated on the viewport", () => {
-    expect(fitsPanel(shell({ chrome: 0 }))).toBe(
-      fitsPanel(shell({ chrome: 300 }))
-    )
+  test("includes the frame when deciding whether the inspector fits", () => {
+    expect(fitsPanel(shell({ chrome: 0 }))).toBe(true)
+    expect(fitsPanel(shell({ chrome: 300 }))).toBe(false)
   })
 })
 
@@ -106,3 +106,49 @@ describe("metricsEqual", () => {
     expect(metricsEqual(shell(), shell({ rail: 56 }))).toBe(false)
   })
 })
+
+describe("responsive sidebar", () => {
+  const options = {
+    width: 1000,
+    padding: 16,
+    gap: 8,
+    insetMin: 360,
+    expanded: 256,
+    icon: 56,
+    minimum: 180,
+    open: true,
+    collapsible: "icon",
+    present: true,
+  }
+  test("shrinks to its minimum, folds, then hides to preserve the body", () => {
+    expect(fitSidebar(options).width).toBe(256)
+    expect(fitSidebar({ ...options, width: 600 }).width).toBe(216)
+    expect(fitSidebar({ ...options, width: 564 }).width).toBe(180)
+    expect(fitSidebar({ ...options, width: 563 })).toMatchObject({
+      width: 56,
+      canExpand: false,
+      mode: "icon",
+    })
+    expect(fitSidebar({ ...options, width: 439 })).toMatchObject({
+      width: 0,
+      canExpand: false,
+      mode: "hidden",
+    })
+  })
+  test("keeps an explicitly collapsed rail folded when space returns", () => {
+    expect(fitSidebar({ ...options, open: false })).toMatchObject({
+      width: 56,
+      canExpand: true,
+      mode: "icon",
+    })
+    expect(
+      fitSidebar({ ...options, open: false, collapsible: "offcanvas" }).width
+    ).toBe(0)
+  })
+  test("honors custom minimums and rails that are absent", () => {
+    expect(fitSidebar({ ...options, width: 600, minimum: 220 }).canExpand).toBe(
+      false
+    )
+    expect(fitSidebar({ ...options, present: false }).width).toBe(0)
+  })
+})

package/src/components/blocks/shell/animated-panel-inset.tsx

@@ -1,25 +1,25 @@
+import { SHELL_BEZEL_CLASSES } from "./utils"
 import { forwardRef } from "react"
 import { motion } from "motion/react"
 import { cn } from "@/lib/utils.ts"
-import type { AnimatedSidebarInsetProps } from "./type"
+import type { TAnimatedSidebarInsetProps } from "./type"
 
 export const AnimatedPanelInset = forwardRef<
   HTMLElement,
-  AnimatedSidebarInsetProps
+  TAnimatedSidebarInsetProps
 >(function AnimatedSidebarInset({ className, ...props }, forwardedRef) {
   return (
     <motion.main
       {...props}
       ref={forwardedRef}
       data-slot="sidebar-inset"
+      data-motion-panels-fill=""
       className={cn(
-        // The body takes every column the panels leave (flex-1 = width 100%)
-        // but never yields past its own floor: a resized panel may only take
-        // the slack above --inset-min-width, and the shell drops the secondary
-        // panel entirely once even that no longer fits.
-        "relative flex min-w-(--inset-min-width) flex-1 flex-col bg-neutral-50 dark:bg-neutral-900",
-        "outline-offset-0.5 overflow-hidden border-t-3 border-white outline-neutral-100 dark:border-neutral-800 dark:inset-ring-black",
-        "rounded-md shadow-md shadow-neutral-200 dark:shadow-neutral-950",
+        // Panel bounds reserve the body's preferred width. Once navigation
+        // is hidden, the body can use a container narrower than that floor.
+        "bg-neutral-50 dark:bg-neutral-900 min-w-0 relative flex flex-1 flex-col",
+        "overflow-hidden rounded-md",
+        SHELL_BEZEL_CLASSES,
         className
       )}
     />

package/src/components/blocks/shell/animated-panel-provider.tsx

@@ -1,7 +1,10 @@
-import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react"
+import { useAtomValueRawSync, useSetAtom } from "jotai"
+import { removeShellFitInstance } from "./shell-fit-atom"
+import { shellPanelAtoms } from "./shell-panel-atom"
+import { useCallback, useEffect, useId, useMemo, useRef } from "react"
 import { useIsomorphicLayoutEffect, useReducedMotion } from "motion/react"
 import { cn } from "@/lib/utils.ts"
-import type { AnimatedSidebarProviderProps, SidebarSide } from "./type"
+import type { IAnimatedSidebarProviderProps, TSidebarSide } from "./type"
 import { useShellFit } from "./use-shell-fit"
 import {
   AnimatedSidebarContext,
@@ -26,22 +29,26 @@ export function AnimatedPanelProvider({
   className,
   style,
   ...props
-}: AnimatedSidebarProviderProps) {
-  const [internalOpen, setInternalOpen] = useState<
-    Record<SidebarSide, boolean>
-  >(() => ({
-    left: defaultOpen?.left ?? true,
-    right: defaultOpen?.right ?? false,
-  }))
-  const [internalOpenMobile, setInternalOpenMobile] = useState<
-    Record<SidebarSide, boolean>
-  >(() => ({
-    left: defaultOpenMobile?.left ?? false,
-    right: defaultOpenMobile?.right ?? false,
-  }))
+}: IAnimatedSidebarProviderProps) {
+  const generatedId = useId()
+  const resolvedId = shellId ?? generatedId
+  useEffect(() => {
+    if (shellId !== undefined) return
+    return () => removeShellFitInstance(resolvedId)
+  }, [resolvedId, shellId])
+  const atoms = shellPanelAtoms(resolvedId)
+  const railWidth = useAtomValueRawSync(atoms.railWidth)
+  const internalOpen = useAtomValueRawSync(atoms.open)
+  const internalOpenMobile = useAtomValueRawSync(atoms.mobile)
+  const setInternalOpen = useSetAtom(atoms.open)
+  const setInternalOpenMobile = useSetAtom(atoms.mobile)
+  const seed = useSetAtom(atoms.seed)
+  const publish = useSetAtom(atoms.handlers)
+  useEffect(() => {
+    seed(defaultOpen, defaultOpenMobile)
+  }, [seed, defaultOpen, defaultOpenMobile])
   const isMobile = useIsMobile()
   const reduce = useReducedMotion() ?? false
-  const generatedId = useId()
   const leftTriggerRef = useRef<HTMLButtonElement>(null)
   const rightTriggerRef = useRef<HTMLButtonElement>(null)
   const wrapperRef = useRef<HTMLDivElement>(null)
@@ -50,6 +57,7 @@ export function AnimatedPanelProvider({
   // the panel. A ref unwinds the cycle: a setter only ever runs from an event,
   // by which time the layout effect has published the current verdict.
   const fitsRef = useRef(true)
+  const sidebarCanExpandRef = useRef(true)
 
   // Per-side controlled/uncontrolled merge — a side is controlled exactly
   // when its key is present on the controlled record.
@@ -58,14 +66,14 @@ export function AnimatedPanelProvider({
   const controlledMobileLeft = openMobile?.left
   const controlledMobileRight = openMobile?.right
 
-  const openState = useMemo<Record<SidebarSide, boolean>>(
+  const openState = useMemo<Record<TSidebarSide, boolean>>(
     () => ({
       left: controlledLeft ?? internalOpen.left,
       right: controlledRight ?? internalOpen.right,
     }),
     [controlledLeft, controlledRight, internalOpen]
   )
-  const openMobileState = useMemo<Record<SidebarSide, boolean>>(
+  const openMobileState = useMemo<Record<TSidebarSide, boolean>>(
     () => ({
       left: controlledMobileLeft ?? internalOpenMobile.left,
       right: controlledMobileRight ?? internalOpenMobile.right,
@@ -78,8 +86,9 @@ export function AnimatedPanelProvider({
   // for. Closing always goes through — that is how state left over from a
   // wider viewport clears.
   const setOpen = useCallback(
-    (nextOpen: boolean, side: SidebarSide) => {
+    (nextOpen: boolean, side: TSidebarSide) => {
       if (nextOpen && side === "right" && !fitsRef.current) return
+      if (nextOpen && side === "left" && !sidebarCanExpandRef.current) return
 
       const controlled = side === "left" ? controlledLeft : controlledRight
       if (controlled === undefined) {
@@ -89,12 +98,13 @@ export function AnimatedPanelProvider({
       }
       onOpenChange?.(nextOpen, side)
     },
-    [controlledLeft, controlledRight, onOpenChange]
+    [controlledLeft, controlledRight, onOpenChange, setInternalOpen]
   )
 
   const setOpenMobile = useCallback(
-    (nextOpen: boolean, side: SidebarSide) => {
+    (nextOpen: boolean, side: TSidebarSide) => {
       if (nextOpen && side === "right" && !fitsRef.current) return
+      if (nextOpen && side === "left" && !sidebarCanExpandRef.current) return
 
       const controlled =
         side === "left" ? controlledMobileLeft : controlledMobileRight
@@ -105,15 +115,41 @@ export function AnimatedPanelProvider({
       }
       onOpenMobileChange?.(nextOpen, side)
     },
-    [controlledMobileLeft, controlledMobileRight, onOpenMobileChange]
+    [
+      controlledMobileLeft,
+      controlledMobileRight,
+      onOpenMobileChange,
+      setInternalOpenMobile,
+    ]
   )
 
+  useEffect(() => {
+    publish({ setOpen, setOpenMobile })
+    return () => publish(null)
+  }, [publish, setOpen, setOpenMobile])
+  useEffect(() => {
+    if (controlledLeft !== undefined || controlledRight !== undefined)
+      setInternalOpen((previous) => ({ ...previous, ...open }))
+  }, [controlledLeft, controlledRight, open, setInternalOpen])
+  useEffect(() => {
+    if (
+      controlledMobileLeft !== undefined ||
+      controlledMobileRight !== undefined
+    )
+      setInternalOpenMobile((previous) => ({ ...previous, ...openMobile }))
+  }, [
+    controlledMobileLeft,
+    controlledMobileRight,
+    openMobile,
+    setInternalOpenMobile,
+  ])
+
   const toggleSidebar = useCallback(
-    (side: SidebarSide) => {
-      if (isMobile) setOpenMobile(!openMobileState[side], side)
-      else setOpen(!openState[side], side)
+    (side: TSidebarSide) => {
+      if (side === "left" && !sidebarCanExpandRef.current) return
+      setOpen(!openState[side], side)
     },
-    [isMobile, openMobileState, openState, setOpen, setOpenMobile]
+    [openState, setOpen]
   )
 
   const triggerRefs = useMemo(
@@ -144,7 +180,7 @@ export function AnimatedPanelProvider({
   // in the shell-fit atoms it writes to under `shellId`. The rail's fold is an
   // input because its column is part of the room the panel needs.
   const fit = useShellFit({
-    shellId,
+    shellId: resolvedId,
     hostRef: wrapperRef,
     railOpen: openState.left,
     defaultPanelWidth,
@@ -153,6 +189,7 @@ export function AnimatedPanelProvider({
   const isNarrow = !fit.fits
   useIsomorphicLayoutEffect(() => {
     fitsRef.current = fit.fits
+    sidebarCanExpandRef.current = fit.sidebar?.canExpand ?? true
   })
 
   // The verdict has to travel up to whoever renders the provider —
@@ -208,11 +245,20 @@ export function AnimatedPanelProvider({
         ref={wrapperRef}
         data-slot="sidebar-wrapper"
         data-narrow={isNarrow ? "" : undefined}
-        data-state-left={openState.left ? "expanded" : "collapsed"}
+        data-sidebar-mode={fit.sidebar?.mode}
+        data-state-left={
+          (fit.sidebar ? fit.sidebar.mode === "expanded" : openState.left)
+            ? "expanded"
+            : "collapsed"
+        }
         data-state-right={openState.right ? "expanded" : "collapsed"}
-        style={{ ...SHELL_WIDTHS, ...style }}
+        style={{
+          ...SHELL_WIDTHS,
+          ...style,
+          ...(railWidth !== null && { "--sidebar-width": `${railWidth}px` }),
+        }}
         className={cn(
-          "group/sidebar-wrapper flex w-full min-w-0 gap-x-2",
+          "group/sidebar-wrapper min-w-0 gap-x-2 flex w-full overflow-hidden",
           className
         )}
       >

package/src/components/blocks/shell/animated-panel-trigger.tsx

@@ -1,19 +1,20 @@
 import { forwardRef } from "react"
 import { Button } from "@/components/ui/button"
 import { useAnimatedSidebar } from "./utils"
-import type { AnimatedSidebarTriggerProps } from "./type"
+import type { IAnimatedSidebarTriggerProps } from "./type"
 
 export const AnimatedPanelTrigger = forwardRef<
   HTMLButtonElement,
-  AnimatedSidebarTriggerProps
+  IAnimatedSidebarTriggerProps
 >(function AnimatedSidebarTrigger(
   { onClick, side = "left", type = "button", ...props },
   forwardedRef
 ) {
   const context = useAnimatedSidebar()
-  const expanded = context.isMobile
-    ? context.openMobile[side]
-    : context.open[side]
+  const expanded =
+    side === "left" && context.fit.sidebar
+      ? context.fit.sidebar.mode === "expanded"
+      : context.open[side]
   const triggerRef = context.triggerRefs[side]
 
   // The right panel drops out of a viewport too narrow to hold it, so its
@@ -28,6 +29,10 @@ export const AnimatedPanelTrigger = forwardRef<
         if (typeof forwardedRef === "function") forwardedRef(node)
         else if (forwardedRef) forwardedRef.current = node
       }}
+      disabled={
+        props.disabled ||
+        (side === "left" && context.fit.sidebar?.canExpand === false)
+      }
       type={type}
       variant="ghost"
       size="icon-xl"