@exegia/corpora-ui 1.0.0 → 3.0.0

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

@@ -1,30 +1,21 @@
 "use client"
 // beui.dev/components/motion/animated-sidebar
 
-import { motion, type PanInfo } from "motion/react"
-import {
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-  type KeyboardEvent,
-} from "react"
-import { EASE_OUT } from "@/lib/ease.ts"
+import { motion } from "motion/react"
+import { useCallback } from "react"
 import { cn } from "@/lib/utils"
-import type { AnimatedSidebarProps } from "./type"
+import { useSetAtom } from "jotai"
+import { shellPanelAtoms } from "./shell-panel-atom"
+import { useMotionPanel } from "@/lib/use-motion-panel"
+import type { IAnimatedSidebarProps } from "./type"
 import {
   AnimatedSidebarPanelContext,
-  expandedWidthVar,
+  useAnimatedSidebar,
   SIDEBAR_MORPH_TRANSITION,
   PANEL_TRANSITION,
   REDUCED_TRANSITION,
-  useAnimatedSidebar,
 } from "./utils"
 
-/** How far one arrow key moves the panel edge (shift = coarse step). */
-const RESIZE_STEP = 16
-const RESIZE_STEP_COARSE = 64
-
 export function AnimatedPanel({
   side = "left",
   variant = "sidebar",
@@ -36,109 +27,87 @@ export function AnimatedPanel({
   style,
   ref,
   ...props
-}: AnimatedSidebarProps) {
+}: IAnimatedSidebarProps) {
   const context = useAnimatedSidebar()
-  const { bounds, panelWidth, resetPanelWidth, resizePanel } = context.fit
+  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 = collapsible !== "none" && !sideOpen
-  const offcanvas = collapsed && collapsible === "offcanvas"
-
-  // Only the expanded secondary panel is resizable: the rail is pinned to its
-  // own columns, and a collapsed panel has no edge left to grab.
-  const resizable =
-    side === "right" && collapsible === "offcanvas" && !collapsed
-
-  const resizeStartRef = useRef(0)
-  const [resizing, setResizing] = useState(false)
-
-  const baseWidth = offcanvas
-    ? 0
-    : collapsed
-      ? "var(--sidebar-width-icon)"
-      : expandedWidthVar(side)
-  // The secondary panel's width is shell state, not panel state: the shell
-  // measured it, re-clamps it when the room changes, and hands back the same
-  // width after a collapse. Everything else rides the CSS variables, which
-  // also covers the server render, where nothing has been measured yet.
-  const width = resizable && panelWidth !== null ? panelWidth : baseWidth
-
+  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
     },
-    [ref]
+    [panelRef, ref]
   )
 
-  const handleResizeStart = useCallback(() => {
-    resizeStartRef.current = panelWidth ?? bounds.min
-    setResizing(true)
-  }, [bounds.min, panelWidth])
-
-  const handleResize = useCallback(
-    (_event: PointerEvent, info: PanInfo) => {
-      // The handle rides the panel's inner edge, so the panel grows as the
-      // pointer travels left. `offset` is measured from the pointer-down
-      // point, so the edge tracks it 1:1 instead of accumulating rounding.
-      resizePanel(resizeStartRef.current - info.offset.x)
-    },
-    [resizePanel]
-  )
-
-  const handleResizeEnd = useCallback(() => setResizing(false), [])
-
-  const handleResizeKeyDown = useCallback(
-    (event: KeyboardEvent<HTMLDivElement>) => {
-      const direction =
-        event.key === "ArrowLeft" ? 1 : event.key === "ArrowRight" ? -1 : 0
-      if (!direction) return
-
-      event.preventDefault()
-      const step = event.shiftKey ? RESIZE_STEP_COARSE : RESIZE_STEP
-      resizePanel((panelWidth ?? bounds.min) + direction * step)
-    },
-    [bounds.min, panelWidth, resizePanel]
-  )
-
-  // The pointer leaves the 2px handle the moment the drag starts, so the
-  // cursor and the text selection have to be held on the document instead.
-  useEffect(() => {
-    if (!resizing) return
-
-    const { body } = document
-    const previousCursor = body.style.cursor
-    const previousUserSelect = body.style.userSelect
-    body.style.cursor = "col-resize"
-    body.style.userSelect = "none"
-
-    return () => {
-      body.style.cursor = previousCursor
-      body.style.userSelect = previousUserSelect
-    }
-  }, [resizing])
-
   // 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
 
-  if (context.isMobile) return <div>TODO: Create Mobile nav experience</div>
-
   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}
-      data-resizing={resizing ? "" : undefined}
       animate={{
-        width,
         // 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).
@@ -148,50 +117,29 @@ export function AnimatedPanel({
       }}
       // 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={
-        resizing || context.reduce ? { duration: 0 } : SIDEBAR_MORPH_TRANSITION
-      }
-      style={style}
+      transition={context.reduce ? { duration: 0 } : SIDEBAR_MORPH_TRANSITION}
+      style={{ ...style, flexShrink: 0 }}
       className={cn(
-        "group/sidebar relative hidden h-full shrink-0 will-change-[width] md:block",
+        "group/sidebar relative h-full shrink-0 will-change-[width]",
         "peer flex!",
         side === "right" && "order-last",
         className
       )}
     >
-      {resizable && (
-        // The handle occupies the shell's gap-x-2 column gap. It must stay
-        // outside the clipping mask below or the gap would never receive
-        // hover — clipping cuts hit-testing, not just painting.
-        <motion.div
+      {collapsible !== "none" && (
+        <div
+          ref={gripRef}
           role="separator"
           aria-label={`Resize ${ariaLabel}`}
           aria-orientation="vertical"
-          tabIndex={0}
-          className="absolute inset-y-0 -left-2 z-10 w-2 cursor-col-resize touch-none"
-          initial="idle"
-          // Hover alone would drop the glow the instant the drag leaves the
-          // handle, so the gesture pins it open for the whole drag.
-          animate={resizing ? "hover" : "idle"}
-          whileHover="hover"
-          whileFocus="hover"
-          onPanStart={handleResizeStart}
-          onPan={handleResize}
-          onPanEnd={handleResizeEnd}
-          onKeyDown={handleResizeKeyDown}
-          // The usual escape hatch out of a width you dragged to.
-          onDoubleClick={resetPanelWidth}
-        >
-          <motion.div
-            variants={{ idle: { scaleY: 0 }, hover: { scaleY: 1 } }}
-            transition={
-              context.reduce
-                ? { duration: 0 }
-                : { duration: 0.2, ease: EASE_OUT }
-            }
-            className="h-full w-full bg-radial/decreasing from-amber-300/70 to-amber-500/0 to-40%"
-          />
-        </motion.div>
+          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
@@ -203,7 +151,7 @@ export function AnimatedPanel({
           animate={{ opacity: offcanvas ? 0 : 1 }}
           transition={context.reduce ? REDUCED_TRANSITION : PANEL_TRANSITION}
           className={cn(
-            "sticky top-0 flex w-full flex-col overflow-hidden",
+            "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.

package/src/components/blocks/shell/shell-fit-atom.ts

@@ -1,3 +1,4 @@
+import { removeShellPanelInstance } from "./shell-panel-atom"
 /**
  * Per-instance Jotai state for the shell's layout fit.
  *
@@ -23,18 +24,18 @@ import {
   fitsPanel,
   metricsEqual,
   panelBounds,
-  type ShellMetrics,
+  type IShellMetrics,
 } from "./shell-metrics"
 import type {
-  ShellFitInstanceId,
-  ShellFitPanelBounds,
-  ShellFitSeed,
-  ShellFitState,
+  TShellFitInstanceId,
+  IShellFitPanelBounds,
+  IShellFitSeed,
+  IShellFitState,
 } from "./type"
 
 /** An unmeasured shell. Zeroes read as "no layout yet", which the rule fails
  * open on rather than hiding a panel over a reading it never took. */
-const NO_METRICS: ShellMetrics = {
+const NO_METRICS: IShellMetrics = {
   rail: 0,
   insetMin: 0,
   panelMin: 0,
@@ -43,9 +44,9 @@ const NO_METRICS: ShellMetrics = {
 }
 
 /** A panel that mounts at `--panel-width`. */
-const DEFAULT_SHELL_FIT_SEED: ShellFitSeed = { panelWidth: null }
+const DEFAULT_SHELL_FIT_SEED: IShellFitSeed = { panelWidth: null }
 
-const NO_BOUNDS: ShellFitPanelBounds = { min: 0, max: 0 }
+const NO_BOUNDS: IShellFitPanelBounds = { min: 0, max: 0 }
 
 /**
  * A string-keyed atom family.
@@ -55,24 +56,24 @@ const NO_BOUNDS: ShellFitPanelBounds = { min: 0, max: 0 }
  * adding `jotai-family` as a second Jotai package to keep version-aligned.
  * Dropping a key lets the store's WeakMap release that instance's state.
  */
-type Family<AtomType> = ((id: ShellFitInstanceId) => AtomType) & {
-  remove: (id: ShellFitInstanceId) => void
+type TFamily<AtomType> = ((id: TShellFitInstanceId) => AtomType) & {
+  remove: (id: TShellFitInstanceId) => void
 }
 
 /** Every family, so `removeShellFitInstance` can drop an id from all of them. */
-const families: { remove: (id: ShellFitInstanceId) => void }[] = []
+const families: { remove: (id: TShellFitInstanceId) => void }[] = []
 
-function keyed<AtomType>(create: (id: ShellFitInstanceId) => AtomType) {
-  const cache = new Map<ShellFitInstanceId, AtomType>()
-  const family = ((id: ShellFitInstanceId) => {
+function keyed<AtomType>(create: (id: TShellFitInstanceId) => AtomType) {
+  const cache = new Map<TShellFitInstanceId, AtomType>()
+  const family = ((id: TShellFitInstanceId) => {
     let instance = cache.get(id)
     if (instance === undefined) {
       instance = create(id)
       cache.set(id, instance)
     }
     return instance
-  }) as Family<AtomType>
-  family.remove = (id: ShellFitInstanceId) => {
+  }) as TFamily<AtomType>
+  family.remove = (id: TShellFitInstanceId) => {
     cache.delete(id)
   }
   families.push(family)
@@ -89,7 +90,7 @@ function stateFamily<Value>(name: string, initialValue: Value) {
 
 function readFamily<Value>(
   name: string,
-  read: (get: Getter, id: ShellFitInstanceId) => Value
+  read: (get: Getter, id: TShellFitInstanceId) => Value
 ) {
   return keyed((id) => {
     const instance = atom((get) => read(get, id))
@@ -103,7 +104,7 @@ function actionFamily<Args extends unknown[]>(
   write: (
     get: Getter,
     set: Setter,
-    id: ShellFitInstanceId,
+    id: TShellFitInstanceId,
     ...args: Args
   ) => void
 ) {
@@ -119,7 +120,7 @@ function actionFamily<Args extends unknown[]>(
 /** The shell's own measurement of its columns. `useShellFit` is the only
  * writer; read `shellFitMeasuredAtom` to get it with the "no layout yet" case
  * already resolved. */
-export const shellFitMetricsAtom = stateFamily<ShellMetrics>(
+export const shellFitMetricsAtom = stateFamily<IShellMetrics>(
   "metrics",
   NO_METRICS
 )
@@ -133,7 +134,7 @@ export const shellFitRequestedWidthAtom = stateFamily<number | null>(
   null
 )
 
-const shellFitSeedAtom = stateFamily<ShellFitSeed>(
+const shellFitSeedAtom = stateFamily<IShellFitSeed>(
   "seed",
   DEFAULT_SHELL_FIT_SEED
 )
@@ -142,7 +143,7 @@ const shellFitInitializedAtom = stateFamily<boolean>("initialized", false)
 /** The metrics, or null when the shell has no layout to report — a server
  * render, a `display: none` host, a test with no layout engine. A zero is not
  * a width, and treating it as one would pin the panel to nothing. */
-export const shellFitMeasuredAtom = readFamily<ShellMetrics | null>(
+export const shellFitMeasuredAtom = readFamily<IShellMetrics | null>(
   "measured",
   (get, id) => {
     const metrics = get(shellFitMetricsAtom(id))
@@ -156,7 +157,7 @@ export const shellFitFitsAtom = readFamily("fits", (get, id) =>
 )
 
 /** The range a resize may land in. */
-export const shellFitPanelBoundsAtom = readFamily<ShellFitPanelBounds>(
+export const shellFitPanelBoundsAtom = readFamily<IShellFitPanelBounds>(
   "panelBounds",
   (get, id) => {
     const measured = get(shellFitMeasuredAtom(id))
@@ -179,9 +180,10 @@ export const shellFitPanelWidthAtom = readFamily<number | null>(
 /** The whole fit of one shell. This changes on every measurement, so a
  * component that reads one field should subscribe to that field's atom
  * instead: `useAtomValue(shellFitFitsAtom("app-shell"))`. */
-export const shellFitStateAtom = readFamily<ShellFitState>(
+export const shellFitStateAtom = readFamily<IShellFitState>(
   "state",
   (get, id) => ({
+    sidebar: get(shellFitMetricsAtom(id)).sidebar ?? null,
     metrics: get(shellFitMeasuredAtom(id)),
     fits: get(shellFitFitsAtom(id)),
     panelWidth: get(shellFitPanelWidthAtom(id)),
@@ -191,7 +193,7 @@ export const shellFitStateAtom = readFamily<ShellFitState>(
 
 /** @internal The measurement's way in. Silent, and inert when the numbers did
  * not move — a resize event that changes nothing must not re-render a shell. */
-export const measureShellFitAtom = actionFamily<[metrics: ShellMetrics]>(
+export const measureShellFitAtom = actionFamily<[metrics: IShellMetrics]>(
   "measure",
   (get, set, id, metrics) => {
     if (metricsEqual(get(shellFitMetricsAtom(id)), metrics)) return
@@ -225,7 +227,7 @@ export const resetShellPanelWidthAtom = actionFamily<[]>(
 /** @internal Seed the instance once. A seed describes the mount, not every
  * render, so a `defaultPanelWidth` that arrives later never overwrites a
  * width the user dragged to. */
-export const mountShellFitAtom = actionFamily<[seed: ShellFitSeed]>(
+export const mountShellFitAtom = actionFamily<[seed: IShellFitSeed]>(
   "mount",
   (get, set, id, seed) => {
     if (get(shellFitInitializedAtom(id))) return
@@ -238,6 +240,7 @@ export const mountShellFitAtom = actionFamily<[seed: ShellFitSeed]>(
 /** Drop every atom for `id`. `useShellFit` calls this on unmount for shells it
  * keyed itself; an explicit `shellId` is the app's key and outlives its
  * component, so a resized panel survives a route change. */
-export function removeShellFitInstance(id: ShellFitInstanceId): void {
+export function removeShellFitInstance(id: TShellFitInstanceId): void {
+  removeShellPanelInstance(id)
   for (const family of families) family.remove(id)
 }

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

@@ -2,11 +2,14 @@
 
 import { MotionIcon } from "motion-icons-react"
 import * as React from "react"
+import { useAtomValueRawSync } from "jotai"
+import { removeShellFitInstance } from "./shell-fit-atom"
+import { shellPanelAtoms } from "./shell-panel-atom"
 
 import { AnimatedPanel } from "./animated-panel.tsx"
 import { cn } from "@/lib/utils"
-import type { ShellLayoutProps, ShellPanelControlProps } from "./type"
-import { TITLE_BAR_HEIGHT } from "./utils"
+import type { IShellLayoutProps, TShellPanelControlProps } from "./type"
+import { SHELL_BEZEL_CLASSES, TITLE_BAR_HEIGHT } from "./utils"
 import type { ClassNameValue } from "tailwind-merge"
 import { AnimatedPanelProvider } from "./animated-panel-provider.tsx"
 import { AnimatedPanelTrigger } from "./animated-panel-trigger.tsx"
@@ -22,18 +25,30 @@ export function ShellLayout({
   defaultOpen,
   panelComponents,
   ...panelControlProps
-}: ShellLayoutProps): React.ReactElement {
+}: IShellLayoutProps): React.ReactElement {
   const background: ClassNameValue = `bg-linear-to-tr/increasing from-neutral-200 via-neutral-100 to-stone-200 dark:from-neutral-900 dark:via-neutral-950 dark:to-stone-950`
 
+  const generatedId = React.useId()
+  const shellId = panelControlProps.shellId ?? generatedId
+  React.useEffect(() => {
+    if (panelControlProps.shellId !== undefined) return
+    return () => removeShellFitInstance(shellId)
+  }, [shellId, panelControlProps.shellId])
+  const sharedComponents = useAtomValueRawSync(
+    shellPanelAtoms(shellId).components
+  )
+
   // Content pushed through `openPanel(side, component)` wins over the static
   // `panels` entry; a side renders its panel when either supplies content.
-  const leftContent = panelComponents?.left ?? panels?.left?.component
-  const rightContent = panelComponents?.right ?? panels?.right?.component
+  const leftContent =
+    sharedComponents.left ?? panelComponents?.left ?? panels?.left?.component
+  const rightContent =
+    sharedComponents.right ?? panelComponents?.right ?? panels?.right?.component
 
   // Each panel seeds its own side's initial state (`defaultOpen ?? open`);
   // an explicit `defaultOpen` record — usually from useShellPanels — wins
   // per side.
-  const initialOpen: ShellPanelControlProps["defaultOpen"] = {
+  const initialOpen: TShellPanelControlProps["defaultOpen"] = {
     ...(panels?.left && {
       left: panels.left.defaultOpen ?? true,
     }),
@@ -46,9 +61,10 @@ export function ShellLayout({
   return (
     <AnimatedPanelProvider
       {...panelControlProps}
+      shellId={shellId}
       defaultOpen={initialOpen}
       className={cn(
-        "relative h-full min-h-0 px-2 pb-2",
+        "min-h-0 px-2 pb-2 relative h-full",
         variant === "web" && "pt-2",
         className,
         background
@@ -69,21 +85,21 @@ export function ShellLayout({
       )}
 
       <AnimatedPanelInset>
-        <header className="flex h-12 flex-row! items-center justify-between gap-2 border-b px-2">
+        <header className="h-12 gap-2 px-2 flex flex-row! items-center justify-between border-b">
           {leftContent && (
-            <div className="flex min-w-0 shrink-0 items-center justify-start gap-2">
+            <div className="min-w-0 gap-2 flex shrink-0 items-center justify-start">
               <AnimatedPanelTrigger side="left">
                 <MotionIcon name="PanelLeft" size={24} animation="press" />
               </AnimatedPanelTrigger>
             </div>
           )}
           {header && (
-            <div className="flex min-w-0 flex-1 items-center">{header}</div>
+            <div className="min-w-0 flex flex-1 items-center">{header}</div>
           )}
           {(trailing || rightContent) && (
             // ml-auto, not flex-fill: the cluster hugs the trailing edge even
             // when there is no header (or left trigger) to push against.
-            <div className="ml-auto flex shrink-0 items-center justify-end gap-2">
+            <div className="gap-2 ml-auto flex shrink-0 items-center justify-end">
               {trailing}
               {rightContent && (
                 <AnimatedPanelTrigger aria-label="Toggle panel" side="right">
@@ -107,8 +123,8 @@ export function ShellLayout({
           // surface itself; the desktop rail keeps it on the inner panel.
           className={cn(
             "bg-neutral-50 dark:border-neutral-800 dark:bg-neutral-900",
-            "outline-offset-0.5 border-t-3 border-white outline-neutral-100 dark:inset-ring-black",
-            "rounded-md shadow-md shadow-neutral-200 dark:shadow-neutral-950"
+            "rounded-md",
+            SHELL_BEZEL_CLASSES
           )}
           collapsible="offcanvas"
           role="complementary"