@exegia/corpora-ui 1.0.0 → 3.0.0

package/src/components/blocks/scaffold/scaffold-sub-panel.tsx

@@ -1,52 +1,121 @@
 import * as React from "react"
+import { useMotionPanel } from "@/lib/use-motion-panel"
+import { useScaffoldContext } from "./scaffold-context"
+import { useAtomValue, useSetAtom } from "jotai"
+import {
+  scaffoldPanelLayoutsAtom,
+  updateScaffoldPanelLayoutAtom,
+} from "./scaffold-atom"
 import { motion, useReducedMotion } from "motion/react"
 import { cn } from "@/lib/utils"
-import type { ScaffoldSubPanelProps } from "./type"
+import type { IScaffoldSubPanelProps } from "./type"
 import { subPanelVariant } from "@/components/blocks/scaffold/utils.ts"
 import { SCAFFOLD_EASE, SCAFFOLD_MORPH_DURATION } from "./constants"
 
 export function ScaffoldSubPanel({
+  panelId = "",
+  swapped = false,
   className,
   children,
   variant = "card",
   primary = false,
   expanded,
   ...rest
-}: ScaffoldSubPanelProps): React.ReactElement {
+}: IScaffoldSubPanelProps & {
+  panelId?: string
+  swapped?: boolean
+}): React.ReactElement {
   const reduce = useReducedMotion()
   // The primary card holds the flexible slot unless the panel says otherwise.
   const isExpanded = expanded ?? primary
 
+  const { scaffoldId } = useScaffoldContext()
+  const layouts = useAtomValue(scaffoldPanelLayoutsAtom(scaffoldId))
+  const updateLayout = useSetAtom(updateScaffoldPanelLayoutAtom(scaffoldId))
+  const [height, setHeight] = React.useState(400)
+  const { panelRef, gripRef } = useMotionPanel({
+    orientation: "vertical",
+    enabled: !primary,
+    size: isExpanded
+      ? Math.min(
+          layouts[panelId]?.secondarySize ?? height - 64,
+          Math.max(56, height - 64)
+        )
+      : 56,
+    minSize: 56,
+    maxSize: Math.max(56, height - 64),
+    defaultSize: 56,
+    overshoot: false,
+    transition: reduce
+      ? { duration: 0 }
+      : { duration: SCAFFOLD_MORPH_DURATION, ease: SCAFFOLD_EASE },
+    onSizeChange: (size) =>
+      updateLayout(panelId, {
+        secondarySize: Number(size),
+        secondaryExpanded: Number(size) > 56,
+      }),
+  })
+
+  React.useLayoutEffect(() => {
+    const parent = panelRef.current?.parentElement
+    if (!parent) return
+    const measure = () => setHeight(parent.clientHeight || 400)
+    measure()
+    const observer = new ResizeObserver(measure)
+    observer.observe(parent)
+    return () => observer.disconnect()
+  }, [panelRef])
+
   return (
     <motion.div
-      // Full `layout` (position + size), not `layout="size"`: a swap flips
-      // the panel's flex direction in a single commit, and only a position
-      // FLIP makes the two cards glide past each other instead of teleport.
-      layout
+      layout="position"
+      ref={(node) => {
+        panelRef.current = node
+      }}
+      data-motion-panels-fill={primary ? "" : undefined}
       id={`scaffold-sub-panel-${variant}`}
-      // Grow is animated as a style, not a class flip — a class flip rides the
-      // layout FLIP, which scales both cards into a swap-like morph. Animating
-      // flex-grow slides only the shared boundary: the collapsed card grows up
-      // (or down) while the other is squeezed and cropped in place.
+      // Motion Panels animates the boundary; the primary consumes the rest.
       initial={false}
-      animate={{ flexGrow: isExpanded ? 1 : 0 }}
+      style={{
+        flex: primary ? "1 1 0%" : "0 0 auto",
+        minHeight: primary ? 56 : 0,
+      }}
       transition={
         reduce
           ? { duration: 0 }
           : { duration: SCAFFOLD_MORPH_DURATION, ease: SCAFFOLD_EASE }
       }
       className={cn(
-        "flex w-full flex-col",
+        "relative flex w-full flex-col",
         subPanelVariant[variant],
         // basis-14 + clip let the primary squeeze down to the strip height;
         // the strip keeps its natural (basis-auto) height when collapsed.
-        primary ? "min-h-14 basis-14 overflow-clip" : "min-h-14 basis-auto",
+        primary ? "overflow-clip" : "",
         className
       )}
       data-slot={`scaffold-sub-panel-${variant}`}
       data-expanded={isExpanded ? "" : undefined}
       {...rest}
     >
+      {!primary && (
+        <div
+          ref={gripRef}
+          role="separator"
+          aria-label="Resize secondary panel"
+          aria-orientation="horizontal"
+          tabIndex={0}
+          onKeyDown={(event) => {
+            if (event.key === "Enter") {
+              event.preventDefault()
+              updateLayout(panelId, { secondaryExpanded: !isExpanded })
+            }
+          }}
+          className={cn(
+            "inset-x-0 h-2 absolute z-10 cursor-row-resize touch-none focus-visible:outline-2 focus-visible:outline-ring",
+            swapped ? "-bottom-1" : "-top-1"
+          )}
+        />
+      )}
       {children}
     </motion.div>
   )

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

@@ -12,7 +12,7 @@ import {
   toggleScaffoldPanelAtom,
 } from "./scaffold-atom"
 import { useScaffoldContext } from "./scaffold-context"
-import type { ScaffoldTabProps } from "./type"
+import type { IScaffoldTabProps } from "./type"
 import { segmentVariants } from "./utils"
 import { Button } from "@/components/ui/button"
 import { LucideAppWindow, LucideEyeOff, LucideX } from "lucide-react"
@@ -37,7 +37,7 @@ export function ScaffoldTab({
   sound = true,
   className,
   ...rest
-}: ScaffoldTabProps): React.ReactElement {
+}: IScaffoldTabProps): React.ReactElement {
   const { scaffoldId } = useScaffoldContext()
   // The per-panel atom keeps this tab still while its siblings toggle; the
   // empty-key sentinel reads false for a tab without a `panelId`.

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

@@ -1,20 +1,33 @@
-import React, { type ComponentProps, type ReactElement, type ReactNode, } from "react"
+import React, {
+  type ComponentProps,
+  type ReactElement,
+  type ReactNode,
+} from "react"
 
 /** Key of one scaffold's slice of the store. */
-export type ScaffoldInstanceId = string
+export type TScaffoldInstanceId = string
 
 /** The identity every scaffold part shares through ScaffoldContext. State
  * itself lives in the store — parts subscribe to the atoms they render from,
  * so this value never changes identity while the scaffold is mounted. */
-export interface ScaffoldContextValue {
-  scaffoldId: ScaffoldInstanceId
+export interface IScaffoldContextValue {
+  scaffoldId: TScaffoldInstanceId
   /** Drawer width in px — Actions reads it to slide out of the drawer's way. */
   inspectorWidth: number
 }
 
+export interface IScaffoldPanelLayout {
+  width?: number
+  secondarySize?: number
+  secondaryExpanded?: boolean
+  swapped?: boolean
+}
+
 /** One scaffold's whole state, as `useScaffoldState` returns it. A component
  * that watches one field should subscribe to that field's atom instead. */
-export interface ScaffoldState {
+export interface IScaffoldState {
+  inspectorWidth: number | null
+  panelLayouts: Record<string, IScaffoldPanelLayout>
   /** Whether the inspector drawer is currently shown. */
   inspectorOpen: boolean
   /** How many panels currently fit side by side, from the measured canvas
@@ -29,7 +42,12 @@ export interface ScaffoldState {
 }
 
 /** Drive a scaffold by id from anywhere, as `useScaffoldActions` returns it. */
-export interface ScaffoldStateActions {
+export interface IScaffoldStateActions {
+  resizePanel: (panelId: string, width: number) => void
+  resizeInspector: (width: number) => void
+  resizeSecondaryPanel: (panelId: string, height: number) => void
+  setSecondaryExpanded: (panelId: string, expanded: boolean) => void
+  setPanelSwapped: (panelId: string, swapped: boolean) => void
   setInspectorOpen: (open: boolean) => void
   toggleInspector: () => void
   /** Show/hide an id'd panel. Showing past capacity auto-hides the
@@ -40,13 +58,13 @@ export interface ScaffoldStateActions {
 
 /** @internal Which props currently control the scaffold — write gates for
  * the action atoms, so the store never overwrites a prop. */
-export interface ScaffoldConfig {
+export interface IScaffoldConfig {
   controlsInspector: boolean
 }
 
 /** @internal The mounted root's callbacks, published into the store so
  * action atoms can report changes wherever they were fired from. */
-export interface ScaffoldHandlers {
+export interface IScaffoldHandlers {
   onInspectorOpenChange?: (open: boolean) => void
 }
 
@@ -57,18 +75,18 @@ export interface ScaffoldHandlers {
  *   recent last. They return on their own when room comes back.
  * - `userHidden`: panels hidden by a tab press. They stay hidden until the
  *   tab is pressed again, however wide the canvas grows. */
-export interface ScaffoldPanelVisibility {
+export interface IScaffoldPanelVisibility {
   visibleOrder: string[]
   autoHidden: string[]
   userHidden: string[]
 }
 
-export interface ScaffoldRootProps extends ComponentProps<"div"> {
+export interface IScaffoldRootProps extends ComponentProps<"div"> {
   /** Names this scaffold's slice of the store, so `useScaffoldState` /
    * `useScaffoldActions` can drive it by id and its state outlives the
    * component. Omitted, the root keys off `useId` and drops its state on
    * unmount. `useScaffold().providerProps` carries one. */
-  scaffoldId?: ScaffoldInstanceId
+  scaffoldId?: TScaffoldInstanceId
   /** Controlled inspector state — pair with `onInspectorOpenChange`. The
    * prop stays the source of truth: store writes are gated off, and actions
    * report through the callback instead. */
@@ -80,15 +98,15 @@ export interface ScaffoldRootProps extends ComponentProps<"div"> {
   inspectorWidth?: number
 }
 
-export type ScaffoldSidebarProps = ComponentProps<"nav">
+export type TScaffoldSidebarProps = ComponentProps<"nav">
 
-export type ScaffoldMainProps = ComponentProps<"div">
+export type TScaffoldMainProps = ComponentProps<"div">
 
-export type ScaffoldCanvasProps = ComponentProps<"div">
+export type TScaffoldCanvasProps = ComponentProps<"div">
 
 /** React's drag/animation DOM handlers collide with motion's gesture props
  * on `motion.*` elements — strip them from pass-through HTML props. */
-type MotionSafe<T> = Omit<
+type TMotionSafe<T> = Omit<
   T,
   | "onDrag"
   | "onDragStart"
@@ -98,7 +116,7 @@ type MotionSafe<T> = Omit<
   | "onAnimationIteration"
 >
 
-export interface ScaffoldActionsProps extends MotionSafe<
+export interface IScaffoldActionsProps extends TMotionSafe<
   Omit<ComponentProps<"div">, "children">
 > {
   /** Called when the Add segment is pressed. The segment renders only
@@ -117,10 +135,10 @@ export interface ScaffoldActionsProps extends MotionSafe<
 }
 
 export type TScaffoldPanelChild<
-  T extends ScaffoldSubPanelProps = ScaffoldSubPanelProps,
+  T extends IScaffoldSubPanelProps = IScaffoldSubPanelProps,
 > = ReactElement<T, React.JSXElementConstructor<T>>
 
-export interface ScaffoldPanelProps {
+export interface IScaffoldPanelProps {
   /** Stable id opting the panel into responsive hiding: the canvas hides
    * id'd panels when it can't grant each `SCAFFOLD_PANEL_MIN_WIDTH`, and a
    * `Scaffold.Tab` with the matching `panelId` reflects and toggles it.
@@ -147,7 +165,7 @@ export interface ScaffoldPanelProps {
   className?: string
 }
 
-export interface ScaffoldTabProps extends MotionSafe<
+export interface IScaffoldTabProps extends TMotionSafe<
   Omit<ComponentProps<"div">, "children">
 > {
   /** The tab's label. */
@@ -169,7 +187,7 @@ export interface ScaffoldTabProps extends MotionSafe<
 export type TSubPanelPosition = "bottom" | "top"
 export type TSubPanelVariant = "card" | "subtle" | "inset"
 
-export interface ScaffoldSubPanelProps extends MotionSafe<
+export interface IScaffoldSubPanelProps extends TMotionSafe<
   Omit<ComponentProps<"div">, "children">
 > {
   children?: ReactNode
@@ -190,7 +208,7 @@ export interface ScaffoldSubPanelProps extends MotionSafe<
   className?: string
 }
 
-export interface ScaffoldInspectorProps extends MotionSafe<
+export interface IScaffoldInspectorProps extends TMotionSafe<
   Omit<ComponentProps<"aside">, "children">
 > {
   children?: ReactNode
@@ -198,7 +216,7 @@ export interface ScaffoldInspectorProps extends MotionSafe<
   name?: string
 }
 
-export interface PanelFloatingButtonProps {
+export interface IPanelFloatingButtonProps {
   onClick?: () => void
   /** Accessible name — the button is icon-only. */
   label: string
@@ -206,7 +224,7 @@ export interface PanelFloatingButtonProps {
   className?: string
 }
 
-export interface PanelMenuButtonProps extends PanelFloatingButtonProps {
+export interface IPanelMenuButtonProps extends IPanelFloatingButtonProps {
   /** Called when the Expand action is pressed — the panel trades which
    * sub-panel holds the flexible slot. */
   onExpand?: () => void
@@ -221,26 +239,26 @@ export interface PanelMenuButtonProps extends PanelFloatingButtonProps {
   swapped?: boolean
 }
 
-export interface UseScaffoldOptions {
+export interface IUseScaffoldOptions {
   /** Names the scaffold's slice of the store. Omitted, the hook generates
    * one and drops its state on unmount. */
-  scaffoldId?: ScaffoldInstanceId
+  scaffoldId?: TScaffoldInstanceId
   /** Initial inspector state. Closed by default. */
   defaultInspectorOpen?: boolean
   /** Fires on every inspector open/close. */
   onInspectorChange?: (open: boolean) => void
 }
 
-export interface ScaffoldControls {
+export interface IScaffoldControls {
   /** The id the hook and the root share — hand it to `useScaffoldState` /
    * `useScaffoldActions` to drive the scaffold from elsewhere. */
-  scaffoldId: ScaffoldInstanceId
+  scaffoldId: TScaffoldInstanceId
   inspectorOpen: boolean
   setInspectorOpen: (open: boolean) => void
   toggleInspector: () => void
   /** Spread onto Scaffold.Root. */
   providerProps: Pick<
-    ScaffoldRootProps,
+    IScaffoldRootProps,
     "scaffoldId" | "defaultInspectorOpen" | "onInspectorOpenChange"
   >
 }

package/src/components/blocks/scaffold/use-scaffold-state.ts

@@ -5,15 +5,17 @@ import { useAtomValue, useSetAtom } from "jotai"
 
 import {
   resetScaffoldAtom,
+  resizeScaffoldInspectorAtom,
+  updateScaffoldPanelLayoutAtom,
   scaffoldStateAtom,
   setScaffoldInspectorOpenAtom,
   toggleScaffoldInspectorAtom,
   toggleScaffoldPanelAtom,
 } from "./scaffold-atom"
 import type {
-  ScaffoldInstanceId,
-  ScaffoldState,
-  ScaffoldStateActions,
+  TScaffoldInstanceId,
+  IScaffoldState,
+  IScaffoldStateActions,
 } from "./type"
 
 /**
@@ -29,7 +31,9 @@ import type {
  * to that field's atom instead:
  * `useAtomValue(scaffoldInspectorOpenAtom("workspace"))`.
  */
-export function useScaffoldState(scaffoldId: ScaffoldInstanceId): ScaffoldState {
+export function useScaffoldState(
+  scaffoldId: TScaffoldInstanceId
+): IScaffoldState {
   return useAtomValue(scaffoldStateAtom(scaffoldId))
 }
 
@@ -44,15 +48,38 @@ export function useScaffoldState(scaffoldId: ScaffoldInstanceId): ScaffoldState
  * ```
  */
 export function useScaffoldActions(
-  scaffoldId: ScaffoldInstanceId
-): ScaffoldStateActions {
+  scaffoldId: TScaffoldInstanceId
+): IScaffoldStateActions {
   const setInspectorOpen = useSetAtom(setScaffoldInspectorOpenAtom(scaffoldId))
   const toggleInspector = useSetAtom(toggleScaffoldInspectorAtom(scaffoldId))
   const togglePanel = useSetAtom(toggleScaffoldPanelAtom(scaffoldId))
+  const updatePanel = useSetAtom(updateScaffoldPanelLayoutAtom(scaffoldId))
+  const resizeInspector = useSetAtom(resizeScaffoldInspectorAtom(scaffoldId))
   const reset = useSetAtom(resetScaffoldAtom(scaffoldId))
 
   return useMemo(
-    () => ({ setInspectorOpen, toggleInspector, togglePanel, reset }),
-    [setInspectorOpen, toggleInspector, togglePanel, reset]
+    () => ({
+      setInspectorOpen,
+      toggleInspector,
+      togglePanel,
+      reset,
+      resizeInspector,
+      resizePanel: (panelId: string, width: number) =>
+        updatePanel(panelId, { width }),
+      resizeSecondaryPanel: (panelId: string, secondarySize: number) =>
+        updatePanel(panelId, { secondarySize }),
+      setSecondaryExpanded: (panelId: string, secondaryExpanded: boolean) =>
+        updatePanel(panelId, { secondaryExpanded }),
+      setPanelSwapped: (panelId: string, swapped: boolean) =>
+        updatePanel(panelId, { swapped }),
+    }),
+    [
+      setInspectorOpen,
+      toggleInspector,
+      togglePanel,
+      reset,
+      resizeInspector,
+      updatePanel,
+    ]
   )
 }

package/src/components/blocks/scaffold/use-scaffold.ts

@@ -9,7 +9,7 @@ import {
   setScaffoldInspectorOpenAtom,
   toggleScaffoldInspectorAtom,
 } from "./scaffold-atom"
-import type { ScaffoldControls, UseScaffoldOptions } from "./type"
+import type { IScaffoldControls, IUseScaffoldOptions } from "./type"
 
 /**
  * Owns the scaffold's inspector state for UI living outside the scaffold
@@ -27,7 +27,7 @@ export function useScaffold({
   scaffoldId: scaffoldIdProp,
   defaultInspectorOpen,
   onInspectorChange,
-}: UseScaffoldOptions = {}): ScaffoldControls {
+}: IUseScaffoldOptions = {}): IScaffoldControls {
   const generatedId = useId()
   const scaffoldId = scaffoldIdProp ?? generatedId
 
@@ -40,7 +40,7 @@ export function useScaffold({
     return () => removeScaffoldInstance(scaffoldId)
   }, [scaffoldIdProp, scaffoldId])
 
-  const providerProps = useMemo<ScaffoldControls["providerProps"]>(
+  const providerProps = useMemo<IScaffoldControls["providerProps"]>(
     () => ({
       scaffoldId,
       defaultInspectorOpen,

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

@@ -1,7 +1,7 @@
 import type { Variants } from "motion/react"
 import type { ClassNameValue } from "tailwind-merge"
 import type {
-  ScaffoldPanelVisibility,
+  IScaffoldPanelVisibility,
   TSubPanelVariant,
 } from "@/components/blocks/scaffold/type.ts"
 import { EASE_OUT } from "@/lib/ease.ts"
@@ -26,7 +26,7 @@ export function getPanelCapacity(width: number | null): number {
 }
 
 /** @internal An untracked scaffold: nothing registered, nothing hidden. */
-export const EMPTY_SCAFFOLD_VISIBILITY: ScaffoldPanelVisibility = {
+export const EMPTY_SCAFFOLD_VISIBILITY: IScaffoldPanelVisibility = {
   visibleOrder: [],
   autoHidden: [],
   userHidden: [],
@@ -40,10 +40,10 @@ export const EMPTY_SCAFFOLD_VISIBILITY: ScaffoldPanelVisibility = {
  * changes, so callers can compare identities instead of contents.
  */
 export function reconcileVisibility(
-  prev: ScaffoldPanelVisibility,
+  prev: IScaffoldPanelVisibility,
   ids: readonly string[],
   capacity: number
-): ScaffoldPanelVisibility {
+): IScaffoldPanelVisibility {
   const known = new Set(ids)
   const visibleOrder = prev.visibleOrder.filter((id) => known.has(id))
   const autoHidden = prev.autoHidden.filter((id) => known.has(id))
@@ -70,9 +70,12 @@ export function reconcileVisibility(
 export const scaffoldBackgroundClass: ClassNameValue =
   "bg-linear-to-tr/increasing from-neutral-400 via-stone-200 to-neutral-300 dark:from-neutral-900 dark:via-neutral-950 dark:to-stone-950"
 
+export const SCAFFOLD_BEZEL_CLASSES =
+  "bezel-lit-t-2 bezel-lit-blur-2 bezel-lit/57 bezel-dim-b-2 bezel-dim-blur-3 bezel-dim/11 dark:bezel-lit-blur-3 dark:bezel-lit/14 dark:bezel-dim/78"
+
 /** Card surface shared by a panel's primary area and secondary strip. */
 export const panelSurfaceClass: ClassNameValue =
-  "rounded-md bg-slate-100 inset-ring-1 inset-ring-white/60 dark:bg-neutral-900 dark:inset-ring-white/5"
+  `rounded-md bg-slate-100 dark:bg-neutral-900 ${SCAFFOLD_BEZEL_CLASSES}`
 
 /** Floating icon button hovering over a panel (close, swap). */
 export const floatingButtonClass: ClassNameValue =
@@ -103,7 +106,7 @@ export const segmentVariants: Variants = {
 
 /** Map of sub-panel variants to their corresponding side. */
 export const subPanelVariant: Record<TSubPanelVariant, ClassNameValue> = {
-  card: "bg-neutral-50 dark:bg-neutral-900 rounded-md border-t border-b border-t-white dark:border-t-neutral-700/50 border-b-neutral-900/10 dark:border-b-black/70 shadow-sm shadow-neutral-900/10 dark:shadow-black/50 inset-shadow-sm inset-shadow-white dark:inset-shadow-neutral-800",
+  card: `bg-neutral-50 dark:bg-neutral-900 rounded-md ${SCAFFOLD_BEZEL_CLASSES}`,
   subtle: "bg-neutral-100 dark:bg-neutral-800",
   inset: "bg-neutral-200 dark:bg-neutral-700",
 } as const

package/src/components/blocks/shell/__tests__/shell-fit-atom.test.tsx

@@ -18,17 +18,17 @@ import {
   shellFitRequestedWidthAtom,
   shellFitStateAtom,
 } from "../shell-fit-atom"
-import type { ShellMetrics } from "../shell-metrics"
+import type { IShellMetrics } from "../shell-metrics"
 import { useShellFitActions, useShellFitState } from "../use-shell-fit-state"
 import { useShellPanels } from "../use-shell-panels"
 import type { TPanelMap } from "../type"
 import { SHELL_WIDTHS } from "../utils"
 
-type Store = ReturnType<typeof createStore>
+type TStore = ReturnType<typeof createStore>
 
 /** The shell's shipping numbers on a 1024px viewport: rail 256 + body 360 +
  * panel 320 = 936, with 32px of frame. */
-const WIDE: ShellMetrics = {
+const WIDE: IShellMetrics = {
   rail: 256,
   insetMin: 360,
   panelMin: 320,
@@ -37,9 +37,9 @@ const WIDE: ShellMetrics = {
 }
 
 /** The same shell squeezed to 800px — 936 needed, no room. */
-const NARROW: ShellMetrics = { ...WIDE, viewport: 800 }
+const NARROW: IShellMetrics = { ...WIDE, viewport: 800 }
 
-function measure(store: Store, id: string, metrics: ShellMetrics) {
+function measure(store: TStore, id: string, metrics: IShellMetrics) {
   store.set(measureShellFitAtom(id), metrics)
 }
 
@@ -228,6 +228,8 @@ function stubShellWidths() {
   )
   const original = Element.prototype.getBoundingClientRect
   Element.prototype.getBoundingClientRect = function (this: HTMLElement) {
+    if (this.getAttribute("data-slot") === "sidebar-wrapper")
+      return { width: window.innerWidth } as DOMRect
     const isProbe =
       this.style.visibility === "hidden" && this.style.position === "absolute"
     if (!isProbe) return original.call(this)