@exegia/corpora-ui 0.23.0 → 0.25.0

package/package.json

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

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

@@ -82,7 +82,6 @@ export function ScaffoldPanel({
         // floor would overflow it.
         minWidth: id !== undefined ? SCAFFOLD_PANEL_MIN_WIDTH : 0,
         scaleX: 1,
-        flexDirection: isSwapped ? "column-reverse" : "column",
         // The hovered tab's panel keeps full opacity; the rest fade back
         // so the tab↔panel pairing reads at a glance. Inline (not a
         // class) because motion owns this element's opacity.
@@ -93,10 +92,15 @@ export function ScaffoldPanel({
       style={{ originX: 0.5 }}
       aria-label={name}
       className={cn(
-        "group/panel relative flex min-w-0 flex-1 flex-col w-full",
+        "group/panel relative flex w-full min-w-0 flex-1",
+        // Swap flips the direction as a class, NOT an animate target:
+        // flex-direction is discrete, so motion would apply it instantly —
+        // the flip lands in one commit and the children's `layout` FLIP is
+        // what glides the cards past each other.
+        isSwapped ? "flex-col-reverse" : "flex-col",
         className
       )}
-      layout={"size"}
+      layout
       data-slot="scaffold-panel"
       data-dimmed={dimmed ? "" : undefined}
       data-swapped={isSwapped ? "" : undefined}
@@ -106,7 +110,13 @@ export function ScaffoldPanel({
         {children}
       </ScaffoldSubPanel>
       {(onSwap || onCloseSecondary) && SecondaryPanel && (
-        <div className="relative flex h-2 items-center justify-center">
+        // `layout` keeps the seam glued to the moving boundary while the
+        // cards trade places around it.
+        <motion.div
+          layout
+          transition={transition}
+          className="relative flex h-2 items-center justify-center"
+        >
           <PanelMenuButton
             label={swapLabel}
             onClick={handleSwap}
@@ -116,7 +126,7 @@ export function ScaffoldPanel({
             swapped={isSwapped}
             sound={sound}
           />
-        </div>
+        </motion.div>
       )}
       {SecondaryPanel && (
         <ScaffoldSubPanel id="bottom" expanded={subPanelPosition === "bottom"}>

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

@@ -1,26 +1,28 @@
-
 import * as React from "react"
-import { motion, useReducedMotion } from "framer-motion"
+import { motion, useReducedMotion } from "motion/react"
 import { cn } from "@/lib/utils"
 import type { ScaffoldSubPanelProps } from "./type"
 import { subPanelVariant } from "@/components/blocks/scaffold/utils.ts"
 import { SCAFFOLD_EASE, SCAFFOLD_MORPH_DURATION } from "./constants"
 
 export function ScaffoldSubPanel({
-                                   className,
-                                   children,
-                                   variant = 'card',
-                                   primary = false,
-                                   expanded,
-                                   ...rest
-                                 }: ScaffoldSubPanelProps): React.ReactElement {
+  className,
+  children,
+  variant = "card",
+  primary = false,
+  expanded,
+  ...rest
+}: ScaffoldSubPanelProps): React.ReactElement {
   const reduce = useReducedMotion()
   // The primary card holds the flexible slot unless the panel says otherwise.
   const isExpanded = expanded ?? primary
 
   return (
     <motion.div
-      layout={"size"}
+      // 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
       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
@@ -38,7 +40,7 @@ export function ScaffoldSubPanel({
         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 ? "basis-14 min-h-14 overflow-clip" : "basis-auto min-h-14",
+        primary ? "min-h-14 basis-14 overflow-clip" : "min-h-14 basis-auto",
         className
       )}
       data-slot={`scaffold-sub-panel-${variant}`}

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

@@ -40,7 +40,12 @@ export function ShellLayout({
     <AnimatedPanelProvider
       {...panelControlProps}
       defaultOpen={initialOpen}
-      className={cn("relative h-full min-h-0 px-2 pb-2", className, background)}
+      className={cn(
+        "relative h-full min-h-0 px-2 pb-2",
+        variant === "web" && "pt-2",
+        className,
+        background
+      )}
       style={{
         paddingTop: variant === "desktop" ? TITLE_BAR_HEIGHT : 0,
       }}
@@ -59,7 +64,7 @@ export function ShellLayout({
       <AnimatedPanelInset>
         <header className="flex h-12 flex-row! items-center justify-between gap-2 border-b px-2">
           {panels?.left?.component && (
-            <div className="flex min-w-0 flex-1 items-center gap-2">
+            <div className="flex min-w-0 shrink-0 items-center justify-start gap-2">
               <AnimatedPanelTrigger side="left">
                 <MotionIcon name="PanelLeft" size={24} animation="press" />
               </AnimatedPanelTrigger>
@@ -69,7 +74,7 @@ export function ShellLayout({
             <div className="flex w-full flex-1 items-center">{header}</div>
           )}
           {panels?.right?.component && (
-            <div className="flex flex-1 items-center justify-end gap-2">
+            <div className="flex w-full shrink items-center justify-end gap-2">
               <AnimatedPanelTrigger aria-label="Toggle panel" side="right">
                 <MotionIcon
                   className="opacity-70"

package/src/components/ui/button-group.tsx

@@ -1,7 +1,7 @@
 import { mergeProps } from "@base-ui/react/merge-props"
 import { useRender } from "@base-ui/react/use-render"
 import { cva, type VariantProps } from "class-variance-authority"
-import { motion, type HTMLMotionProps } from "framer-motion"
+import { motion, type HTMLMotionProps } from "motion/react"
 
 import { cn } from "@/lib/utils"
 import { Separator } from "@/components/ui/separator"