@exegia/corpora-ui 3.0.0 → 4.0.0

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

@@ -1,154 +0,0 @@
-import { describe, expect, test } from "bun:test"
-
-import {
-  clampPanelWidth,
-  fitsPanel,
-  fitSidebar,
-  metricsEqual,
-  panelBounds,
-  requiredWidth,
-  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<IShellMetrics> = {}): IShellMetrics {
-  return {
-    rail: 256,
-    insetMin: 360,
-    panelMin: 320,
-    viewport: 1024,
-    chrome: 32,
-    ...over,
-  }
-}
-
-describe("fitsPanel", () => {
-  test("wants the rail plus both floors to clear the viewport", () => {
-    expect(requiredWidth(shell())).toBe(936)
-    expect(fitsPanel(shell())).toBe(true)
-    expect(fitsPanel(shell({ viewport: 800 }))).toBe(false)
-  })
-
-  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", () => {
-    expect(fitsPanel(shell({ rail: 56, viewport: 800 }))).toBe(true)
-  })
-
-  test("a shell with no rail spends nothing on one", () => {
-    expect(fitsPanel(shell({ rail: 0, viewport: 720 }))).toBe(true)
-  })
-
-  test("an unmeasurable shell fails open rather than hiding the panel", () => {
-    expect(
-      fitsPanel({
-        rail: 0,
-        insetMin: 0,
-        panelMin: 0,
-        viewport: 0,
-        chrome: 0,
-      })
-    ).toBe(true)
-    expect(fitsPanel(shell({ panelMin: 0 }))).toBe(true)
-  })
-
-  test("includes the frame when deciding whether the inspector fits", () => {
-    expect(fitsPanel(shell({ chrome: 0 }))).toBe(true)
-    expect(fitsPanel(shell({ chrome: 300 }))).toBe(false)
-  })
-})
-
-describe("panelBounds", () => {
-  test("the panel may take every px the body holds above its floor", () => {
-    // 1024 - 32 frame - 256 rail - 360 body floor.
-    expect(panelBounds(shell())).toEqual({ min: 320, max: 376 })
-    expect(panelBounds(shell({ rail: 56 })).max).toBe(576)
-  })
-
-  test("the shell's frame comes out of the ceiling, not the floor", () => {
-    expect(panelBounds(shell({ chrome: 0 })).max).toBe(408)
-    expect(panelBounds(shell({ chrome: 0 })).min).toBe(320)
-  })
-
-  test("never inverts — a shell with no room reports its floor twice", () => {
-    expect(panelBounds(shell({ viewport: 800 }))).toEqual({
-      min: 320,
-      max: 320,
-    })
-  })
-})
-
-describe("clampPanelWidth", () => {
-  test("holds a drag inside the bounds and leaves the middle alone", () => {
-    expect(clampPanelWidth(600, shell())).toBe(376)
-    expect(clampPanelWidth(100, shell())).toBe(320)
-    expect(clampPanelWidth(360, shell())).toBe(360)
-  })
-
-  test("a narrowing viewport pulls a resized panel back down", () => {
-    const resized = clampPanelWidth(500, shell({ rail: 56 }))
-    expect(resized).toBe(500)
-    expect(clampPanelWidth(resized, shell({ rail: 56, viewport: 900 }))).toBe(
-      452
-    )
-  })
-})
-
-describe("metricsEqual", () => {
-  test("compares fields, so a fresh object off the same layout is quiet", () => {
-    expect(metricsEqual(shell(), shell())).toBe(true)
-    expect(metricsEqual(shell(), shell({ viewport: 1025 }))).toBe(false)
-    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,27 +0,0 @@
-import { SHELL_BEZEL_CLASSES } from "./utils"
-import { forwardRef } from "react"
-import { motion } from "motion/react"
-import { cn } from "@/lib/utils.ts"
-import type { TAnimatedSidebarInsetProps } from "./type"
-
-export const AnimatedPanelInset = forwardRef<
-  HTMLElement,
-  TAnimatedSidebarInsetProps
->(function AnimatedSidebarInset({ className, ...props }, forwardedRef) {
-  return (
-    <motion.main
-      {...props}
-      ref={forwardedRef}
-      data-slot="sidebar-inset"
-      data-motion-panels-fill=""
-      className={cn(
-        // 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,269 +0,0 @@
-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 { IAnimatedSidebarProviderProps, TSidebarSide } from "./type"
-import { useShellFit } from "./use-shell-fit"
-import {
-  AnimatedSidebarContext,
-  SHELL_WIDTHS,
-  SIDEBAR_KEYBOARD_SHORTCUT,
-  useIsMobile,
-} from "./utils"
-
-export function AnimatedPanelProvider({
-  children,
-  shellId,
-  defaultPanelWidth,
-  open,
-  defaultOpen,
-  onOpenChange,
-  openMobile,
-  defaultOpenMobile,
-  onOpenMobileChange,
-  onNarrowChange,
-  // ShellLayout renders this; the bare provider only keeps it off the DOM.
-  panelComponents: _panelComponents,
-  className,
-  style,
-  ...props
-}: 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 leftTriggerRef = useRef<HTMLButtonElement>(null)
-  const rightTriggerRef = useRef<HTMLButtonElement>(null)
-  const wrapperRef = useRef<HTMLDivElement>(null)
-  // The narrow gate below is consulted by the setters, but the verdict comes
-  // from `useShellFit` further down — which needs those very setters to retire
-  // 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.
-  const controlledLeft = open?.left
-  const controlledRight = open?.right
-  const controlledMobileLeft = openMobile?.left
-  const controlledMobileRight = openMobile?.right
-
-  const openState = useMemo<Record<TSidebarSide, boolean>>(
-    () => ({
-      left: controlledLeft ?? internalOpen.left,
-      right: controlledRight ?? internalOpen.right,
-    }),
-    [controlledLeft, controlledRight, internalOpen]
-  )
-  const openMobileState = useMemo<Record<TSidebarSide, boolean>>(
-    () => ({
-      left: controlledMobileLeft ?? internalOpenMobile.left,
-      right: controlledMobileRight ?? internalOpenMobile.right,
-    }),
-    [controlledMobileLeft, controlledMobileRight, internalOpenMobile]
-  )
-
-  // The right panel is not on screen while the shell is too narrow to hold
-  // it, so opening it would only ever surface later as a panel nobody asked
-  // for. Closing always goes through — that is how state left over from a
-  // wider viewport clears.
-  const setOpen = useCallback(
-    (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) {
-        setInternalOpen((prev) =>
-          prev[side] === nextOpen ? prev : { ...prev, [side]: nextOpen }
-        )
-      }
-      onOpenChange?.(nextOpen, side)
-    },
-    [controlledLeft, controlledRight, onOpenChange, setInternalOpen]
-  )
-
-  const setOpenMobile = useCallback(
-    (nextOpen: boolean, side: TSidebarSide) => {
-      if (nextOpen && side === "right" && !fitsRef.current) return
-      if (nextOpen && side === "left" && !sidebarCanExpandRef.current) return
-
-      const controlled =
-        side === "left" ? controlledMobileLeft : controlledMobileRight
-      if (controlled === undefined) {
-        setInternalOpenMobile((prev) =>
-          prev[side] === nextOpen ? prev : { ...prev, [side]: nextOpen }
-        )
-      }
-      onOpenMobileChange?.(nextOpen, side)
-    },
-    [
-      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: TSidebarSide) => {
-      if (side === "left" && !sidebarCanExpandRef.current) return
-      setOpen(!openState[side], side)
-    },
-    [openState, setOpen]
-  )
-
-  const triggerRefs = useMemo(
-    () => ({ left: leftTriggerRef, right: rightTriggerRef }),
-    []
-  )
-
-  // A measurement that lands on "no room" retires the right panel's open
-  // state instead of parking it: a panel that survived the crossing would
-  // spring back the moment the viewport widened, long after the user asked
-  // for it. Closing is the one write the narrow gate lets through, and the
-  // guards keep a repeated verdict from re-reporting a panel already shut.
-  //
-  // It rides a ref so `useShellFit` can call the latest one from a listener
-  // it bound once, and it is a layout effect declared FIRST so the ref is
-  // filled before that listener takes its opening measurement.
-  const retireRightPanelRef = useRef<() => void>(() => {})
-  useIsomorphicLayoutEffect(() => {
-    retireRightPanelRef.current = () => {
-      if (openState.right) setOpen(false, "right")
-      if (openMobileState.right) setOpenMobile(false, "right")
-    }
-  })
-  const retireRightPanel = useCallback(() => retireRightPanelRef.current(), [])
-
-  // Everything about the shell's columns — whether a secondary panel fits,
-  // how wide it is, how far it may be dragged — lives in this one hook, and
-  // 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: resolvedId,
-    hostRef: wrapperRef,
-    railOpen: openState.left,
-    defaultPanelWidth,
-    onUnfit: retireRightPanel,
-  })
-  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 —
-  // useShellPanels, a title bar — since context only flows down. The
-  // listener above is bound once, so the callback rides a ref rather than
-  // rebinding it whenever a consumer passes a fresh arrow.
-  const onNarrowChangeRef = useRef(onNarrowChange)
-  useEffect(() => {
-    onNarrowChangeRef.current = onNarrowChange
-  })
-
-  // Only real crossings are news: a resize that leaves the verdict alone is
-  // silent, and so is the mount default the consumer already holds.
-  const reportedNarrowRef = useRef(false)
-  useEffect(() => {
-    if (reportedNarrowRef.current === isNarrow) return
-    reportedNarrowRef.current = isNarrow
-    onNarrowChangeRef.current?.(isNarrow)
-  }, [isNarrow])
-
-  useEffect(() => {
-    const handleShortcut = (event: KeyboardEvent) => {
-      if (
-        event.key.toLowerCase() === SIDEBAR_KEYBOARD_SHORTCUT &&
-        (event.metaKey || event.ctrlKey)
-      ) {
-        event.preventDefault()
-        toggleSidebar("left")
-      }
-    }
-
-    window.addEventListener("keydown", handleShortcut)
-    return () => window.removeEventListener("keydown", handleShortcut)
-  }, [toggleSidebar])
-
-  return (
-    <AnimatedSidebarContext.Provider
-      value={{
-        isMobile,
-        fit,
-        layoutId: `${generatedId}-active`,
-        open: openState,
-        openMobile: openMobileState,
-        reduce,
-        setOpen,
-        setOpenMobile,
-        toggleSidebar,
-        triggerRefs,
-      }}
-    >
-      <div
-        {...props}
-        ref={wrapperRef}
-        data-slot="sidebar-wrapper"
-        data-narrow={isNarrow ? "" : undefined}
-        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,
-          ...(railWidth !== null && { "--sidebar-width": `${railWidth}px` }),
-        }}
-        className={cn(
-          "group/sidebar-wrapper min-w-0 gap-x-2 flex w-full overflow-hidden",
-          className
-        )}
-      >
-        {children}
-      </div>
-    </AnimatedSidebarContext.Provider>
-  )
-}

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

@@ -1,51 +0,0 @@
-import { forwardRef } from "react"
-import { Button } from "@/components/ui/button"
-import { useAnimatedSidebar } from "./utils"
-import type { IAnimatedSidebarTriggerProps } from "./type"
-
-export const AnimatedPanelTrigger = forwardRef<
-  HTMLButtonElement,
-  IAnimatedSidebarTriggerProps
->(function AnimatedSidebarTrigger(
-  { onClick, side = "left", type = "button", ...props },
-  forwardedRef
-) {
-  const context = useAnimatedSidebar()
-  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
-  // toggle would otherwise sit in the header driving nothing.
-  if (side === "right" && !context.fit.fits) return null
-
-  return (
-    <Button
-      {...props}
-      ref={(node) => {
-        triggerRef.current = node
-        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"
-      aria-label={props["aria-label"] ?? "Toggle sidebar"}
-      aria-expanded={expanded}
-      data-slot="sidebar-trigger"
-      data-side={side}
-      data-state={expanded ? "expanded" : "collapsed"}
-      onClick={(event) => {
-        onClick?.(event)
-        if (event.defaultPrevented) return
-        context.toggleSidebar(side)
-      }}
-    />
-  )
-})

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

@@ -1,180 +0,0 @@
-"use client"
-// beui.dev/components/motion/animated-sidebar
-
-import { motion } from "motion/react"
-import { useCallback } from "react"
-import { cn } from "@/lib/utils"
-import { useSetAtom } from "jotai"
-import { shellPanelAtoms } from "./shell-panel-atom"
-import { useMotionPanel } from "@/lib/use-motion-panel"
-import type { IAnimatedSidebarProps } from "./type"
-import {
-  AnimatedSidebarPanelContext,
-  useAnimatedSidebar,
-  SIDEBAR_MORPH_TRANSITION,
-  PANEL_TRANSITION,
-  REDUCED_TRANSITION,
-} from "./utils"
-
-export function AnimatedPanel({
-  side = "left",
-  variant = "sidebar",
-  collapsible = "icon",
-  ariaLabel = "Sidebar",
-  children,
-  className,
-  panelClassName,
-  style,
-  ref,
-  ...props
-}: IAnimatedSidebarProps) {
-  const context = useAnimatedSidebar()
-  const resizeSidebar = useSetAtom(
-    shellPanelAtoms(context.fit.shellId).resizeSidebar
-  )
-  const { bounds, panelWidth, resizePanel } = context.fit
-  const sidebar = context.fit.sidebar
-  const sideOpen = context.open[side]
-  const collapsed =
-    side === "left" && sidebar
-      ? sidebar.mode !== "expanded"
-      : collapsible !== "none" && !sideOpen
-  const offcanvas =
-    side === "left" && sidebar
-      ? sidebar.mode === "hidden"
-      : collapsed && collapsible === "offcanvas"
-  const visible = side !== "right" || context.fit.fits
-  const width =
-    side === "right"
-      ? (panelWidth ?? 320)
-      : (sidebar?.width ?? (collapsed ? 56 : 256))
-  const { panelRef, gripRef } = useMotionPanel({
-    size: width,
-    defaultSize:
-      side === "right"
-        ? (context.fit.defaultPanelWidth ?? (bounds.min || 320))
-        : 256,
-    minSize:
-      side === "right"
-        ? bounds.min || 320
-        : collapsed
-          ? width
-          : (sidebar?.minWidth ?? 180),
-    maxSize:
-      side === "right"
-        ? bounds.max || 640
-        : collapsed
-          ? width
-          : (sidebar?.maxWidth ?? 480),
-    collapsed: offcanvas,
-    enabled: visible,
-    overshoot: false,
-    transition: context.reduce ? { duration: 0 } : SIDEBAR_MORPH_TRANSITION,
-    onSizeChange: (size) =>
-      side === "right"
-        ? resizePanel(Number(size))
-        : resizeSidebar(Number(size)),
-    onCollapsedChange:
-      collapsible !== "none"
-        ? (value) => context.setOpen(!value, side)
-        : undefined,
-  })
-  const setPanelRef = useCallback(
-    (node: HTMLElement | null) => {
-      panelRef.current = node
-      if (typeof ref === "function") ref(node)
-      else if (ref) ref.current = node
-    },
-    [panelRef, ref]
-  )
-
-  // A secondary panel exists only while the viewport can carry it beside the
-  // rail and the body at their own floors. Below that there is nothing to dock
-  // into, so the panel stands down rather than squeezing the content column —
-  // and its trigger stands down with it.
-  if (side === "right" && !context.fit.fits) return null
-
-  return (
-    <motion.aside
-      {...props}
-      ref={setPanelRef}
-      initial={false}
-      aria-label={ariaLabel}
-      aria-hidden={offcanvas || undefined}
-      inert={offcanvas || undefined}
-      data-slot="sidebar"
-      data-state={collapsed ? "collapsed" : "expanded"}
-      data-collapsible={collapsible}
-      data-variant={variant}
-      data-side={side}
-      animate={{
-        // Swallow the shell's gap-x-2 column gap while off canvas so the
-        // shell edge keeps a constant spacing-2 inset whether the panel is
-        // open (gap + panel + margin) or collapsed (gap + this).
-        ...(side === "right"
-          ? { marginLeft: offcanvas ? "-0.5rem" : "0rem" }
-          : { marginRight: offcanvas ? "-0.5rem" : "0rem" }),
-      }}
-      // A drag has to land on the frame it happened — the morph spring would
-      // trail the pointer and keep settling after the handle is released.
-      transition={context.reduce ? { duration: 0 } : SIDEBAR_MORPH_TRANSITION}
-      style={{ ...style, flexShrink: 0 }}
-      className={cn(
-        "group/sidebar relative h-full shrink-0 will-change-[width]",
-        "peer flex!",
-        side === "right" && "order-last",
-        className
-      )}
-    >
-      {collapsible !== "none" && (
-        <div
-          ref={gripRef}
-          role="separator"
-          aria-label={`Resize ${ariaLabel}`}
-          aria-orientation="vertical"
-          tabIndex={collapsed ? -1 : 0}
-          aria-hidden={collapsed || undefined}
-          className={cn(
-            "inset-y-0 w-2 hover:bg-amber-300/20 data-resizing:bg-amber-300/20 absolute z-10 cursor-col-resize touch-none focus-visible:outline-2 focus-visible:outline-ring",
-            collapsed && "pointer-events-none",
-            side === "right" ? "-left-2" : "-right-2"
-          )}
-        />
-      )}
-      {/* The aside's own width animation is the whole layout story: the
-          inner panel just fills it and fades, so it is masked to the aside's
-          box here instead of clipping the aside itself — the aside must stay
-          unclipped for the gap handle above to be hoverable. */}
-      <div className={"contents"}>
-        <motion.div
-          initial={false}
-          animate={{ opacity: offcanvas ? 0 : 1 }}
-          transition={context.reduce ? REDUCED_TRANSITION : PANEL_TRANSITION}
-          className={cn(
-            "top-0 sticky flex w-full flex-col overflow-hidden",
-            // Pin the right panel to the aside's trailing edge so the aside's
-            // width animation expands the panel out of it instead of
-            // revealing a detached strip.
-            side === "right" && "ml-auto",
-
-            // Panels fill the shell's container, not the viewport — the shell
-            // owns its own scrolling, so a bounded host (docs demo, split
-            // view) must bound the panels too. Full-page apps size the shell
-            // itself (e.g., h-svh). The bottom gap comes from the shell
-            // container's padding, so panels only carry their top offset.
-            variant === "floating" && "mx-2 mt-2 h-[calc(100%-0.5rem)]",
-            variant === "inset" && "mt-2 h-[calc(100%-0.5rem)]",
-
-            panelClassName
-          )}
-        >
-          <AnimatedSidebarPanelContext.Provider
-            value={{ collapsed, collapsible, side }}
-          >
-            {children}
-          </AnimatedSidebarPanelContext.Provider>
-        </motion.div>
-      </div>
-    </motion.aside>
-  )
-}