npm - @exegia/corpora-ui - Versions diffs - 0.18.0 → 0.20.0 - Mend

@exegia/corpora-ui 0.18.0 → 0.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (78) hide show

package/src/components/blocks/scaffold/panel-menu-button.tsx CHANGED Viewed

@@ -2,61 +2,45 @@
 import * as React from "react"
-import {
-  AnimatePresence,
-  motion,
-  useReducedMotion,
-  type Variants,
-} from "motion/react"
 import { More } from "iconsax-reactjs"
-import { LucideArrowUpDown, LucideChevronDown } from "lucide-react"
+import { LucideArrowUpDown, LucideChevronDown, LucideX } from "lucide-react"
 import { cn } from "@/lib/utils"
 import type { PanelMenuButtonProps } from "./type"
 import { floatingButtonClass, revealOnPanelHoverClass } from "./utils"
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/ui/button"
 import { GlassButtonGroup } from "@/components/ui/glasscn/glass-button-group.tsx"
-import { EASE_OUT, SPRING_LAYOUT } from "@/lib/ease.ts"
 import { useHoverCapable } from "@/lib/hooks/use-hover-capable"
 import { SCAFFOLD_MENU_COLLAPSE_DELAY } from "./constants"
-/** Menu segments blur/fade in place while the track morphs around them. The
- * exit is a fast tween, not the layout spring — the track stays
- * overflow-visible, so the popped-out buttons must be gone before the
- * collapsing pill leaves them behind as a ghost. */
-const MENU_SEGMENT_VARIANTS: Variants = {
-  hidden: { opacity: 0, filter: "blur(4px)" },
-  visible: { opacity: 1, filter: "blur(0px)" },
-  exit: {
-    opacity: 0,
-    filter: "blur(4px)",
-    transition: { duration: 0.18, ease: EASE_OUT },
-  },
-}
+/** One side of the seam menu. Both sides stay mounted; the pill morphs by
+ * collapsing one side's grid column to 0fr while the other grows — pure
+ * CSS, driven by `data-expanded` on the group. The hidden side is inert
+ * and aria-hidden so it can't be clicked, focused or found by queries. */
+const menuCellClass =
+  "grid transition-[grid-template-columns,opacity] duration-300 ease-smooth-out motion-reduce:transition-none"
 /**
- * Floating swap affordance centered on the seam between a panel's primary
- * surface and its secondary strip.
+ * Floating menu affordance centered on the seam between a panel's primary
+ * surface and its secondary strip: a compact ⋯ toggle that morphs into the
+ * Expand | Swap (| Close) actions.
  */
 export function PanelMenuButton({
   onClick,
   onExpand,
+  onCloseSecondary,
   secondaryExpanded = false,
+  swapped = false,
   label,
   sound = true,
   className,
 }: PanelMenuButtonProps): React.ReactElement {
-  const reduce = useReducedMotion()
   const canHover = useHoverCapable()
   const actionsId = React.useId()
   const groupRef = React.useRef<HTMLDivElement>(null)
   const actionsRef = React.useRef<HTMLDivElement>(null)
-  const actionsLeftRef = React.useRef(0)
   const [expanded, setExpanded] = React.useState(false);
-  const transition = reduce ? { duration: 0 } : SPRING_LAYOUT
   const collapseTimerRef = React.useRef<ReturnType<typeof setTimeout>>(undefined)
   const suppressHoverOpenUntilRef = React.useRef(0)
   const focusActionsOnOpenRef = React.useRef(false)
@@ -94,7 +78,7 @@ export function PanelMenuButton({
   }, [expanded, canHover, armCollapse])
   // Click-opens replace the toggle with the actions — hand focus over so
-  // keyboard users aren't dropped onto <body>.
+  // keyboard users aren't dropped onto an inert control.
   React.useEffect(() => {
     if (!expanded || !focusActionsOnOpenRef.current) return
     focusActionsOnOpenRef.current = false
@@ -130,111 +114,108 @@ export function PanelMenuButton({
     setExpanded(true)
   }
-  // popLayout pops the exiting actions group out of the flow — pin it back to
-  // where it sat so it stays visually attached to the toggle while leaving.
-  React.useLayoutEffect(() => {
-    const actionsNode = actionsRef.current
-    if (!actionsNode) return
-    if (!expanded) {
-      actionsNode.style.left = `${
-        actionsLeftRef.current - actionsNode.getBoundingClientRect().left
-      }px`
-      return
-    }
-    actionsNode.style.left = ""
-    actionsLeftRef.current = actionsNode.getBoundingClientRect().left
-  }, [expanded])
   return (
     <GlassButtonGroup
       ref={groupRef}
-      layout
-      transition={transition}
       onPointerEnter={cancelCollapse}
       onPointerLeave={armCollapse}
       glassVariant="subtle"
+      data-expanded={expanded ? "" : undefined}
       className={cn(
         floatingButtonClass,
         revealOnPanelHoverClass,
-        // Centered on the seam: secondary height (52px) + half the 10px gap.
-        "absolute top-1/2 z-10 -translate-y-1/2 overflow-visible!",
+        "group/menu absolute top-1/2 z-10 -translate-y-1/2",
         className
       )}
     >
-      <AnimatePresence mode="popLayout" initial={false}>
-        {expanded ? (
-          <motion.div
-            key="menu-actions"
-            ref={actionsRef}
-            id={actionsId}
-            layout
-            variants={MENU_SEGMENT_VARIANTS}
-            initial={reduce ? { opacity: 0 } : "hidden"}
-            animate={reduce ? { opacity: 1 } : "visible"}
-            exit={reduce ? { opacity: 0 } : "exit"}
-            transition={transition}
-            className="relative flex w-max items-stretch"
+      <div
+        aria-hidden={expanded || undefined}
+        inert={expanded || undefined}
+        className={cn(
+          menuCellClass,
+          "grid-cols-[1fr] opacity-100 group-data-expanded/menu:grid-cols-[0fr] group-data-expanded/menu:opacity-0"
+        )}
+      >
+        <div className="flex min-w-0 overflow-hidden">
+          <Button
+            id="scaffold-panel-menu-toggle-button"
+            aria-label={label}
+            aria-expanded={expanded}
+            aria-controls={actionsId}
+            size="icon-sm"
+            variant="ghost"
+            sound={sound}
+            // The hidden Expand|Swap|Close side stretches the pill to the sm
+            // button height — match it so the collapsed toggle stays square.
+            className="size-8 sm:size-7"
+            data-slot="scaffold-panel-menu-toggle"
+            onClick={handleOnExpand}
+            onPointerEnter={handleToggleHover}
           >
+            <More size={16} />
+          </Button>
+        </div>
+      </div>
+      <div
+        id={actionsId}
+        ref={actionsRef}
+        aria-hidden={!expanded || undefined}
+        inert={!expanded || undefined}
+        className={cn(
+          menuCellClass,
+          "grid-cols-[0fr] opacity-0 group-data-expanded/menu:grid-cols-[1fr] group-data-expanded/menu:opacity-100"
+        )}
+      >
+        <div className="flex min-w-0 overflow-hidden">
+          <Button
+            id="scaffold-panel-menu-expand"
+            size="sm"
+            variant="ghost"
+            sound={sound}
+            data-slot="scaffold-panel-menu-expand"
+            className="rounded-r-none"
+            onClick={() => handleAction(onExpand)}
+          >
+            {/* Points at the sub-panel that grows next, in VISUAL space —
+                a swapped panel is column-reverse, so the direction mirrors.
+                Button's [&_svg]:transition-transform eases the flip. */}
+            <LucideChevronDown
+              size={16}
+              className={cn(secondaryExpanded !== swapped && "rotate-180")}
+            />
+            Expand
+          </Button>
+          <Button
+            id="scaffold-panel-menu-swap"
+            size="sm"
+            variant="ghost"
+            sound={sound}
+            data-slot="scaffold-panel-menu-swap"
+            className={cn(
+              "border-l-0",
+              onCloseSecondary ? "rounded-none" : "rounded-l-none"
+            )}
+            onClick={() => handleAction(onClick)}
+          >
+            <LucideArrowUpDown size={16} />
+            Swap
+          </Button>
+          {onCloseSecondary && (
             <Button
-              id="scaffold-panel-menu-expand"
-              size="sm"
-              variant="ghost"
-              sound={sound}
-              data-slot="scaffold-panel-menu-swap"
-              // The motion wrapper hides these from the group's corner
-              // selectors — restore what ButtonGroup would have applied.
-              className="rounded-r-none"
-              onClick={() => handleAction(onExpand)}
-            >
-              {/* Button's [&_svg]:transition-transform eases the flip. */}
-              <LucideChevronDown
-                size={16}
-                className={cn(secondaryExpanded && "rotate-180")}
-              />
-              Expand
-            </Button>
-            <Button
-              id="scaffold-panel-menu-swap"
+              id="scaffold-panel-menu-close"
               size="sm"
               variant="ghost"
               sound={sound}
-              data-slot="scaffold-panel-menu-swap"
+              data-slot="scaffold-panel-menu-close"
               className="rounded-l-none border-l-0"
-              onClick={() => handleAction(onClick)}
-            >
-              <LucideArrowUpDown size={16} />
-              Swap
-            </Button>
-          </motion.div>
-        ) : (
-          <motion.div
-            key="menu-toggle"
-            layout
-            variants={MENU_SEGMENT_VARIANTS}
-            initial={reduce ? { opacity: 0 } : "hidden"}
-            animate={reduce ? { opacity: 1 } : "visible"}
-            exit={reduce ? { opacity: 0 } : "exit"}
-            transition={transition}
-            className="flex shrink-0"
-          >
-            <Button
-              id="scaffold-panel-menu-toggle-button"
-              aria-label={label}
-              aria-expanded={expanded}
-              size="icon-sm"
-              variant="ghost"
-              sound={sound}
-              data-slot="scaffold-panel-menu-toggle"
-              onClick={handleOnExpand}
-              onPointerEnter={handleToggleHover}
+              onClick={() => handleAction(onCloseSecondary)}
             >
-              <More size={16} />
+              <LucideX size={16} />
+              Close
             </Button>
-          </motion.div>
-        )}
-      </AnimatePresence>
+          )}
+        </div>
+      </div>
     </GlassButtonGroup>
   )
 }

package/src/components/blocks/scaffold/scaffold-actions.tsx CHANGED Viewed

@@ -1,31 +1,28 @@
 "use client"
-import { motion, useReducedMotion } from "motion/react"
+import { AnimatePresence, motion, useReducedMotion } from "motion/react"
 import * as React from "react"
 import { cn } from "@/lib/utils"
 import { SCAFFOLD_EASE, SCAFFOLD_EDGE_GUTTER, SCAFFOLD_MORPH_DURATION } from "./constants"
 import { useScaffoldContext } from "./scaffold-context"
 import type { ScaffoldActionsProps } from "./type"
-import { actionSegmentClass } from "./utils"
-import { GroupSeparator } from "@/components/ui/group"
-import { GlassButtonGroup } from "@/components/ui/glasscn/glass-button-group"
-import { Button } from "@/components/ui/button";
+import { segmentVariants } from "./utils"
+import { Button } from "@/components/ui/button"
+import { SPRING_LAYOUT } from "@/lib/ease.ts"
 import { LucidePlus } from "lucide-react"
 /**
  * The floating pill cluster in the main region's top-right corner — the
- * design's "Panel Context Menu": an Add segment plus an overflow segment
- * whose badge counts the non-visible panels. Slides left in step with the
- * inspector opening.
+ * design's "Panel Context Menu": one tab per open panel (`Scaffold.Tab`
+ * children) plus an Add segment. Add renders only while `onAdd` is
+ * present — omit it once the canvas holds `SCAFFOLD_PANEL_CAPACITY`
+ * panels. Slides left in step with the inspector opening.
  */
 export function ScaffoldActions({
   onAdd,
   addLabel = "Panel",
   addIcon,
-  overflowCount,
-  onBrowse,
-  browseLabel = "Browse panels",
   sound = true,
   className,
   children,
@@ -33,12 +30,7 @@ export function ScaffoldActions({
 }: ScaffoldActionsProps): React.ReactElement {
   const { inspectorOpen, inspectorWidth } = useScaffoldContext()
   const reducedMotion = useReducedMotion()
-  const soundProps = {
-    "data-cuelume-press": sound ? "" : undefined,
-    "data-cuelume-release": sound ? "" : undefined,
-  }
-  const showBrowse = overflowCount !== undefined || onBrowse !== undefined
+  const transition = reducedMotion ? { duration: 0 } : SPRING_LAYOUT
   return (
     <motion.div
@@ -47,7 +39,7 @@ export function ScaffoldActions({
         x: inspectorOpen ? -(inspectorWidth + SCAFFOLD_EDGE_GUTTER) : 0,
       }}
       className={cn(
-        "sticky inline-flex items-center gap-0.5 h-12",
+        "sticky inline-flex h-12 items-center gap-0.5",
         "justify-end",
         className
       )}
@@ -59,39 +51,38 @@ export function ScaffoldActions({
       }}
       {...rest}
     >
-      {children}
-      <GlassButtonGroup glassVariant="liquid-refract" className="rounded-md">
-        <Button
-          onClick={onAdd}
-          size="sm"
-          variant="ghost"
-        >
-          {addIcon ?? <LucidePlus className="stroke-3" />}
-          {addLabel}
-        </Button>
-        {!showBrowse && <GroupSeparator />}
-        {showBrowse && (
-            <button
-              aria-label={browseLabel}
-              className={cn(actionSegmentClass, "gap-0.5 px-2")}
-              onClick={onBrowse}
-              type="button"
-              {...soundProps}
+      <motion.div
+        layout
+        transition={transition}
+        className="flex items-center gap-1.5"
+      >
+        <AnimatePresence mode="popLayout" initial={false}>
+          {onAdd && (
+            <motion.div
+              key="scaffold-add"
+              layout
+              animate={reducedMotion ? { opacity: 1 } : "visible"}
+              className="flex shrink-0"
+              exit={reducedMotion ? { opacity: 0 } : "exit"}
+              initial={reducedMotion ? { opacity: 0 } : "hidden"}
+              transition={transition}
+              variants={segmentVariants}
             >
-              <span className="relative">
-                {overflowCount !== undefined && overflowCount > 0 && (
-                  <span className="absolute -top-1.5 -right-1.5 flex size-3.5 items-center justify-center rounded-full bg-neutral-700 text-[9px] font-semibold text-white dark:bg-neutral-200 dark:text-neutral-900">
-                    {overflowCount}
-                  </span>
-                )}
-              </span>
-            </button>
-        )}
-        {children}
-      </GlassButtonGroup>
+              <Button
+                onClick={onAdd}
+                size="sm"
+                sound={sound}
+                variant="ghost"
+                className="h-full gap-2 rounded-sm py-1.5 pr-3 pl-2"
+              >
+                {addIcon ?? <LucidePlus className="stroke-2" />}
+                {addLabel}
+              </Button>
+            </motion.div>
+          )}
+          {children}
+        </AnimatePresence>
+      </motion.div>
     </motion.div>
   )
 }

package/src/components/blocks/scaffold/scaffold-canvas.tsx CHANGED Viewed

@@ -4,26 +4,69 @@ import { AnimatePresence } from "motion/react"
 import * as React from "react"
 import { cn } from "@/lib/utils"
-import type { ScaffoldCanvasProps } from "./type"
+import { useScaffoldContext } from "./scaffold-context"
+import type { ScaffoldCanvasProps, ScaffoldPanelProps } from "./type"
+/** A canvas child's panel id when it opted into responsive hiding. */
+function panelIdOf(child: React.ReactNode): string | undefined {
+  if (!React.isValidElement<Pick<ScaffoldPanelProps, "id">>(child))
+    return undefined
+  const id = child.props.id
+  return typeof id === "string" ? id : undefined
+}
 /**
  * The panel row below the action cluster: 8px gutters, 8px gaps, panels
  * side by side. Key each `Scaffold.Panel` child so closes animate out.
+ * Measures its own width and hides id'd panels (oldest activation first)
+ * whenever it can't grant each one `SCAFFOLD_PANEL_MIN_WIDTH`.
  */
 export function ScaffoldCanvas({
   className,
   children,
   ...rest
 }: ScaffoldCanvasProps): React.ReactElement {
+  const { hiddenPanelIds, registerPanelIds, setCanvasWidth } =
+    useScaffoldContext()
+  const ref = React.useRef<HTMLDivElement>(null)
+  React.useLayoutEffect(() => {
+    const element = ref.current
+    if (!element || typeof ResizeObserver === "undefined") return
+    const observer = new ResizeObserver(([entry]) =>
+      setCanvasWidth(entry.contentRect.width)
+    )
+    observer.observe(element)
+    return () => observer.disconnect()
+  }, [setCanvasWidth])
+  const childArray = React.Children.toArray(children)
+  const panelIds = childArray
+    .map(panelIdOf)
+    .filter((id): id is string => id !== undefined)
+  const idsKey = panelIds.join(" ")
+  React.useLayoutEffect(() => {
+    registerPanelIds(panelIds)
+    // panelIds is rebuilt each render; idsKey carries its identity.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [idsKey, registerPanelIds])
+  const visibleChildren = childArray.filter((child) => {
+    const id = panelIdOf(child)
+    return id === undefined || !hiddenPanelIds.includes(id)
+  })
   return (
     <div
-      className={cn("relative flex w-full flex-1 gap-2", className)}
+      className={cn("relative flex min-h-0 w-full flex-1 gap-2", className)}
       data-slot="scaffold-canvas"
+      ref={ref}
       {...rest}
     >
-      <AnimatePresence initial={false} mode="popLayout">
-        {children}
-      </AnimatePresence>
+      {/* Sync mode (no `mode="wait"`): an exiting panel shrinks in place
+          while its siblings grow into the freed room in the same beat. */}
+      <AnimatePresence initial={false}>{visibleChildren}</AnimatePresence>
     </div>
   )
 }

package/src/components/blocks/scaffold/scaffold-inspector.tsx CHANGED Viewed

@@ -8,6 +8,8 @@ import { SCAFFOLD_EASE, SCAFFOLD_EDGE_GUTTER, SCAFFOLD_MORPH_DURATION } from "./
 import { useScaffoldContext } from "./scaffold-context"
 import type { ScaffoldInspectorProps } from "./type"
 import { GlassContainer } from "@/components/ui/glasscn/glass-container.tsx"
+import { Button } from "@/components/ui/button"
+import { LucideX } from "lucide-react"
 /**
  * The right-hand drawer: a brighter card that slides in over the canvas,
@@ -21,7 +23,8 @@ export function ScaffoldInspector({
   className,
   ...rest
 }: ScaffoldInspectorProps): React.ReactElement {
-  const { inspectorOpen, inspectorWidth } = useScaffoldContext()
+  const { inspectorOpen, inspectorWidth, toggleInspector } =
+    useScaffoldContext()
   const reducedMotion = useReducedMotion()
   // Slide fully past the edge gutter and the drop shadow's blur radius.
@@ -34,7 +37,7 @@ export function ScaffoldInspector({
       aria-hidden={inspectorOpen ? undefined : true}
       aria-label={name}
       className={cn(
-        "absolute right-0 w-80 z-20 my-2 flex h-full max-h-[calc(100%-1rem)] flex-col",
+        "absolute right-0 z-20 my-2 flex h-full max-h-[calc(100%-0.5rem)] w-96 flex-col",
         !inspectorOpen && "pointer-events-none",
         className
       )}
@@ -49,7 +52,28 @@ export function ScaffoldInspector({
       }}
       {...rest}
     >
-      <GlassContainer className="flex flex-col shadow-inner shadow-md rounded-md flex-1 border-t border-white dark:border-neutral-900 bg-neutral-50/10 dark:bg-black/10" glassVariant="subtle">
+      <GlassContainer
+        className="flex flex-1 flex-col rounded-md border-t border-white bg-neutral-50/20 shadow-inner shadow-lg dark:border-neutral-800 dark:bg-black/5"
+        glassVariant="subtle"
+      >
+        <div
+          id="scaffold-inspector-header"
+          className="flex h-12 items-center justify-between gap-2 border-b pr-3 pl-4"
+        >
+          <span className="text-base font-normal text-card-foreground/70">
+            {name}
+          </span>
+          <Button
+            size="icon-xs"
+            variant="glass"
+            glassVariant="subtle"
+            className="scale-85"
+            aria-label="Close inspector"
+            onClick={toggleInspector}
+          >
+            <LucideX className="stroke-3" />
+          </Button>
+        </div>
         {children}
       </GlassContainer>
     </motion.aside>

package/src/components/blocks/scaffold/scaffold-main.tsx CHANGED Viewed

@@ -18,7 +18,7 @@ export function ScaffoldMain({
   return (
     <div
       id="scaffold-main"
-      className={cn("relative flex h-full min-w-0 flex-1 flex-col", className)}
+      className={cn("relative flex min-w-0 flex-1 flex-col", className)}
       data-slot="scaffold-main"
       {...rest}
     >