@exegia/corpora-ui 0.18.0 → 0.19.0

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

@@ -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,27 @@ 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/10 shadow-inner shadow-md 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="secondary"
+            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-panel.tsx

@@ -2,14 +2,13 @@
 
 import { motion, useReducedMotion } from "motion/react"
 import * as React from "react"
+import { useState } from "react"
 
 import { cn } from "@/lib/utils"
 import { SCAFFOLD_EASE, SCAFFOLD_MORPH_DURATION } from "./constants"
-import { PanelCloseButton } from "./panel-close-button"
 import { PanelMenuButton } from "./panel-menu-button.tsx"
 import type { ScaffoldPanelProps, TSubPanelPosition } from "./type"
 import { ScaffoldSubPanel } from "@/components/blocks/scaffold/scaffold-sub-panel.tsx"
-import { useState } from "react"
 
 /**
  * A canvas panel: a primary card plus an optional secondary strip below it,
@@ -21,15 +20,13 @@ import { useState } from "react"
 export function ScaffoldPanel({
   children,
   SecondaryPanel,
-  onClose,
   onSwap,
+  onCloseSecondary,
   name,
-  closeLabel = "Close panel",
   swapLabel = "Swap panel content",
   sound = true,
   className,
 }: ScaffoldPanelProps): React.ReactElement {
-
   const reducedMotion = useReducedMotion()
 
   const transition = {
@@ -37,18 +34,19 @@ export function ScaffoldPanel({
     ease: SCAFFOLD_EASE,
   }
 
-  const [subPanelPosition, setSubPanelPosition] = useState<TSubPanelPosition>("top")
+  const [subPanelPosition, setSubPanelPosition] =
+    useState<TSubPanelPosition>("top")
   const [isSwapped, setIsSwapped] = useState<boolean>(false)
   const handleSwap = () => {
-    setIsSwapped((prev) => !prev);
-    onSwap?.();
-  };
+    setIsSwapped((prev) => !prev)
+    onSwap?.()
+  }
 
   // Trades which sub-panel holds the flexible slot — the collapsed card grows
   // into `flex-1` while the expanded one shrinks to the `min-h-14` strip.
   const handleExpand = () => {
-    setSubPanelPosition((prev) => (prev === "top" ? "bottom" : "top"));
-  };
+    setSubPanelPosition((prev) => (prev === "top" ? "bottom" : "top"))
+  }
 
   return (
     <motion.section
@@ -64,35 +62,27 @@ export function ScaffoldPanel({
       data-swapped={isSwapped ? "" : undefined}
       transition={transition}
     >
-      <ScaffoldSubPanel
-        id="top"
-        expanded={subPanelPosition === "top"}
-        primary
-      >
+      <ScaffoldSubPanel id="top" expanded={subPanelPosition === "top"} primary>
         {children}
       </ScaffoldSubPanel>
-      {onSwap && SecondaryPanel && (
-        <div className="relative flex items-center justify-center h-2">
+      {(onSwap || onCloseSecondary) && SecondaryPanel && (
+        <div className="relative flex h-2 items-center justify-center">
           <PanelMenuButton
             label={swapLabel}
             onClick={handleSwap}
             onExpand={handleExpand}
+            onCloseSecondary={onCloseSecondary}
             secondaryExpanded={subPanelPosition === "bottom"}
+            swapped={isSwapped}
             sound={sound}
           />
         </div>
       )}
       {SecondaryPanel && (
-        <ScaffoldSubPanel
-          id="bottom"
-          expanded={subPanelPosition === "bottom"}
-        >
+        <ScaffoldSubPanel id="bottom" expanded={subPanelPosition === "bottom"}>
           {SecondaryPanel}
         </ScaffoldSubPanel>
       )}
-      {onClose && (
-        <PanelCloseButton label={closeLabel} onClick={onClose} sound={sound} />
-      )}
     </motion.section>
   )
 }

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

@@ -19,7 +19,7 @@ export function ScaffoldSidebar({
       id="scaffold-sidebar"
       aria-label="Primary"
       className={cn(
-        "flex min-w-20 shrink-0 flex-col items-center gap-1 pt-8 pb-2",
+        "flex min-w-12 shrink-0 flex-col items-center gap-1 pt-10 pb-2",
         className
       )}
       data-slot="scaffold-sidebar"

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

@@ -0,0 +1,66 @@
+"use client"
+
+import { useReducedMotion } from "motion/react"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+import { SPRING_LAYOUT } from "@/lib/ease.ts"
+import type { ScaffoldTabProps } from "./type"
+import { segmentVariants } from "./utils"
+import { Button } from "@/components/ui/button"
+import { LucideAppWindow, LucideX } from "lucide-react"
+import { GlassButtonGroup } from "@/components/ui/glasscn/glass-button-group.tsx"
+
+/**
+ * A panel's tab inside the action cluster: its label plus a close
+ * affordance. Render one per open panel as Actions children, keyed —
+ * closes animate out of the pill. Omit `onClose` on the last remaining
+ * panel's tab; the canvas keeps at least one panel open.
+ */
+export function ScaffoldTab({
+  children,
+  onClose,
+  closeLabel = "Close panel",
+  sound = true,
+  className,
+  ...rest
+}: ScaffoldTabProps): React.ReactElement {
+  const reduce = useReducedMotion()
+  const transition = reduce ? { duration: 0 } : SPRING_LAYOUT
+
+  return (
+    <GlassButtonGroup
+      layout
+      animate={reduce ? { opacity: 1 } : "visible"}
+      data-slot="scaffold-tab"
+      exit={reduce ? { opacity: 0 } : "exit"}
+      initial={reduce ? { opacity: 0 } : "hidden"}
+      transition={transition}
+      variants={segmentVariants}
+      glassVariant="subtle"
+      className={cn("h-full rounded-sm", className)}
+      {...rest}
+    >
+      <Button
+        size="sm"
+        variant="ghost"
+        className={cn("gap-2.5 rounded-sm pl-2", onClose && "pr-2")}
+      >
+        <LucideAppWindow size={16} />
+        {children}
+      </Button>
+      {onClose && (
+        <Button
+          aria-label={closeLabel}
+          onClick={onClose}
+          size="icon-sm"
+          sound={sound}
+          variant="ghost"
+          className="rounded-none!"
+        >
+          <LucideX size={16} />
+        </Button>
+      )}
+    </GlassButtonGroup>
+  )
+}

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

@@ -1,8 +1,4 @@
-import React, {
-  type ComponentProps,
-  type ReactElement,
-  type ReactNode,
-} from "react"
+import React, { type ComponentProps, type ReactElement, type ReactNode, } from "react"
 
 /** Inspector state shared by every scaffold part through ScaffoldContext. */
 export interface ScaffoldContextValue {
@@ -46,23 +42,16 @@ type MotionSafe<T> = Omit<
 export interface ScaffoldActionsProps extends MotionSafe<
   Omit<ComponentProps<"div">, "children">
 > {
-  /** Called when the Add segment is pressed. */
+  /** Called when the Add segment is pressed. The segment renders only
+   * while this is present — omit it to hide Add, e.g. once the canvas
+   * holds `SCAFFOLD_PANEL_CAPACITY` panels. */
   onAdd?: () => void
   /** Label of the Add segment. */
   addLabel?: ReactNode
   /** Replaces the default add icon. */
   addIcon?: ReactNode
-  /** Number of non-visible panels tucked into the overflow dropdown —
-   * the badge on the browse segment. The segment renders when this or
-   * `onBrowse` is present; the badge only when > 0. Per the design
-   * comments the dropdown menu itself is a later iteration; for now the
-   * segment just keeps the count. */
-  overflowCount?: number
-  /** Called when the overflow (stacked-panels) segment is pressed. */
-  onBrowse?: () => void
-  /** Accessible name of the overflow segment. */
-  browseLabel?: string
-  /** Extra segments appended after the built-in ones. */
+  /** The panel tabs (`Scaffold.Tab`, one per open panel) and any extra
+   * segments, rendered before Add. Key each tab — closes animate out. */
   children?: ReactNode
   /** Emit interaction-sound attributes (inert until an app binds cuelume). */
   sound?: boolean
@@ -77,32 +66,38 @@ export interface ScaffoldPanelProps {
   children: ReactNode
   /** The panel's content, rendered in a card with a drop shadow. */
   SecondaryPanel?: TScaffoldPanelChild
-  /** Renders the floating close button in the panel's top-right corner. */
-  onClose?: () => void
-  /** Renders the floating swap button over the primary/secondary gap.
-   * Only shown when `secondary` is present. Clicking it trades the two
-   * cards with a layout morph — flip the slot content here so each card
-   * carries its subject to its new home. */
+  /** Reveals the Swap action in the seam menu (needs `SecondaryPanel`).
+   * Swapping trades the two cards with a layout morph — flip the slot
+   * content here so each card carries its subject to its new home. */
   onSwap?: () => void
-  /** Controlled swap state — while true the strip's card sits in the
-   * primary slot. Omit letting the panel toggle it on swap clicks. */
-  swapped?: boolean
-  /** Initial swap state when uncontrolled. */
-  defaultSwapped?: boolean
-  /** Fixed width in px; omitted, the panel flexes to share the canvas. */
-  width?: number
+  /** Reveals the Close action in the seam menu — remove `SecondaryPanel`
+   * here; the strip and the menu leave together. */
+  onCloseSecondary?: () => void
   /** Accessible name of the panel region. */
   name?: string
   /** Emit interaction-sound attributes on the floating buttons. */
   sound?: boolean
-  /** Accessible name of the close button. */
-  closeLabel?: string
-  /** Accessible name of the swap button. */
+  /** Accessible name of the seam-menu toggle. */
   swapLabel?: string
   /** Extra class names for the panel's root element. */
   className?: string
 }
 
+export interface ScaffoldTabProps extends MotionSafe<
+  Omit<ComponentProps<"div">, "children">
+> {
+  /** The tab's label. */
+  children?: ReactNode
+  /** Renders the tab's close button. The button renders only while this
+   * is present — omit it to pin the tab, e.g. on the last remaining
+   * panel (the canvas keeps at least one open). */
+  onClose?: () => void
+  /** Accessible name of the close button. */
+  closeLabel?: string
+  /** Emit interaction-sound attributes on the close button. */
+  sound?: boolean
+}
+
 export type TSubPanelPosition = "bottom" | "top"
 export type TSubPanelVariant = "card" | "subtle" | "inset"
 
@@ -147,9 +142,15 @@ export interface PanelMenuButtonProps extends PanelFloatingButtonProps {
   /** Called when the Expand action is pressed — the panel trades which
    * sub-panel holds the flexible slot. */
   onExpand?: () => void
+  /** Renders the Close action; called when it is pressed — the consumer
+   * removes the secondary strip. */
+  onCloseSecondary?: () => void
   /** Whether the secondary strip currently holds the flexible slot —
    * flips the Expand chevron between down and up. */
   secondaryExpanded?: boolean
+  /** Whether the panel is swapped (column-reverse). Mirrors the Expand
+   * chevron so it keeps pointing at the sub-panel that grows next. */
+  swapped?: boolean
 }
 
 export interface UseScaffoldOptions {

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

@@ -1,5 +1,7 @@
+import type { Variants } from "motion/react"
 import type { ClassNameValue } from "tailwind-merge"
 import type { TSubPanelVariant } from "@/components/blocks/scaffold/type.ts"
+import { EASE_OUT } from "@/lib/ease.ts"
 
 /** Desktop backdrop the whole scaffold sits on — a soft warm-gray wash. */
 export const scaffoldBackgroundClass: ClassNameValue =
@@ -22,6 +24,20 @@ export const revealOnPanelHoverClass: ClassNameValue =
 export const actionSegmentClass: ClassNameValue =
   "flex h-[30px] items-center rounded-full text-neutral-700 transition-[background-color,color,scale,box-shadow] duration-150 ease-smooth-out hover:bg-white hover:text-neutral-900 hover:shadow-xs active:scale-97 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:hover:text-white motion-reduce:transition-none motion-reduce:active:scale-100"
 
+/** Pill segments (seam-menu actions, tabs, Add) 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 popped-out segments must be
+ * gone before the shrinking pill leaves them behind as a ghost. */
+export const segmentVariants: 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 },
+  },
+}
+
 /** 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",