@exegia/corpora-ui 3.0.0 → 4.0.0

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

@@ -1,221 +0,0 @@
-"use client"
-
-import * as React from "react"
-
-import { More } from "iconsax-reactjs"
-import { LucideArrowUpDown, LucideChevronDown, LucideX } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import type { IPanelMenuButtonProps } from "./type"
-import { floatingButtonClass, revealOnPanelHoverClass } from "./utils"
-import { Button } from "@/components/ui/button"
-import { GlassButtonGroup } from "@/components/ui/glasscn/glass-button-group.tsx"
-import { useHoverCapable } from "@/lib/hooks/use-hover-capable"
-import { SCAFFOLD_MENU_COLLAPSE_DELAY } from "./constants"
-
-/** 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 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,
-}: IPanelMenuButtonProps): React.ReactElement {
-  const canHover = useHoverCapable()
-  const actionsId = React.useId()
-  const groupRef = React.useRef<HTMLDivElement>(null)
-  const actionsRef = React.useRef<HTMLDivElement>(null)
-  const [expanded, setExpanded] = React.useState(false);
-
-  const collapseTimerRef = React.useRef<ReturnType<typeof setTimeout>>(undefined)
-  const suppressHoverOpenUntilRef = React.useRef(0)
-  const focusActionsOnOpenRef = React.useRef(false)
-
-  React.useEffect(() => () => clearTimeout(collapseTimerRef.current), [])
-
-  const cancelCollapse = React.useCallback(() => {
-    clearTimeout(collapseTimerRef.current)
-  }, [])
-
-  // Arms when the pointer stops hovering the group: the menu lingers for the
-  // grace period, then collapses — unless the pointer (or focus) came back.
-  const armCollapse = React.useCallback(() => {
-    if (!canHover) return
-    clearTimeout(collapseTimerRef.current)
-    collapseTimerRef.current = setTimeout(() => {
-      // Focus keeps the menu open — don't collapse under the keyboard.
-      if (groupRef.current?.contains(document.activeElement)) return
-      setExpanded(false)
-    }, SCAFFOLD_MENU_COLLAPSE_DELAY)
-  }, [canHover])
-
-  // The grace period must keep counting when the pointer leaves the whole
-  // app — leaving the window can skip the group's own pointerleave, so arm
-  // on viewport exit and window blur as well.
-  React.useEffect(() => {
-    if (!expanded || !canHover) return
-    const root = document.documentElement
-    root.addEventListener("pointerleave", armCollapse)
-    window.addEventListener("blur", armCollapse)
-    return () => {
-      root.removeEventListener("pointerleave", armCollapse)
-      window.removeEventListener("blur", armCollapse)
-    }
-  }, [expanded, canHover, armCollapse])
-
-  // Click-opens replace the toggle with the actions — hand focus over so
-  // keyboard users aren't dropped onto an inert control.
-  React.useEffect(() => {
-    if (!expanded || !focusActionsOnOpenRef.current) return
-    focusActionsOnOpenRef.current = false
-    actionsRef.current?.querySelector<HTMLButtonElement>("button")?.focus()
-  }, [expanded])
-
-  const collapse = () => {
-    // The shrinking toggle can glide under a resting cursor and hover-reopen
-    // the menu it just closed — ignore hover-opens until it has settled.
-    suppressHoverOpenUntilRef.current = Date.now() + 600
-    setExpanded(false)
-  }
-
-  // Acting collapses the menu — the pill returns to the compact toggle.
-  const handleAction = (action?: () => void) => {
-    action?.()
-    collapse()
-  }
-
-  // Click open — the touch and keyboard path.
-  const handleOnExpand = () => {
-    if (groupRef.current?.contains(document.activeElement)) {
-      focusActionsOnOpenRef.current = true
-    }
-    setExpanded(true)
-  }
-
-  // Hover on the toggle opens the menu (hover-capable devices only — touch
-  // and keyboard go through the click toggle).
-  const handleToggleHover = () => {
-    if (!canHover || Date.now() < suppressHoverOpenUntilRef.current) return
-    cancelCollapse()
-    setExpanded(true)
-  }
-
-  return (
-    <GlassButtonGroup
-      ref={groupRef}
-      onPointerEnter={cancelCollapse}
-      onPointerLeave={armCollapse}
-      glassVariant="subtle"
-      data-expanded={expanded ? "" : undefined}
-      className={cn(
-        floatingButtonClass,
-        revealOnPanelHoverClass,
-        "group/menu absolute top-1/2 z-10 -translate-y-1/2",
-        className
-      )}
-    >
-      <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-close"
-              size="sm"
-              variant="ghost"
-              sound={sound}
-              data-slot="scaffold-panel-menu-close"
-              className="rounded-l-none border-l-0"
-              onClick={() => handleAction(onCloseSecondary)}
-            >
-              <LucideX size={16} />
-              Close
-            </Button>
-          )}
-        </div>
-      </div>
-    </GlassButtonGroup>
-  )
-}

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

@@ -1,92 +0,0 @@
-"use client"
-
-import { AnimatePresence, motion, useReducedMotion } from "motion/react"
-import * as React from "react"
-
-import { useAtomValue } from "jotai"
-
-import { cn } from "@/lib/utils"
-import { SCAFFOLD_EASE, SCAFFOLD_EDGE_GUTTER, SCAFFOLD_MORPH_DURATION } from "./constants"
-import { scaffoldInspectorOpenAtom } from "./scaffold-atom"
-import { useScaffoldContext } from "./scaffold-context"
-import type { IScaffoldActionsProps } from "./type"
-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": 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,
-  sound = true,
-  className,
-  children,
-  ...rest
-}: IScaffoldActionsProps): React.ReactElement {
-  const { scaffoldId, inspectorWidth } = useScaffoldContext()
-  const inspectorOpen = useAtomValue(scaffoldInspectorOpenAtom(scaffoldId))
-  const reducedMotion = useReducedMotion()
-  const transition = reducedMotion ? { duration: 0 } : SPRING_LAYOUT
-
-  return (
-    <motion.div
-      id="scaffold-actions"
-      animate={{
-        x: inspectorOpen ? -(inspectorWidth + SCAFFOLD_EDGE_GUTTER) : 0,
-      }}
-      className={cn(
-        "sticky inline-flex h-12 items-center gap-0.5",
-        "justify-end",
-        className
-      )}
-      data-slot="scaffold-actions"
-      initial={false}
-      transition={{
-        duration: reducedMotion ? 0 : SCAFFOLD_MORPH_DURATION,
-        ease: SCAFFOLD_EASE,
-      }}
-      {...rest}
-    >
-      <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}
-            >
-              <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>
-  )
-}