@exegia/corpora-ui 3.0.0 → 4.0.0

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

@@ -1,137 +0,0 @@
-"use client"
-
-import { motion, useReducedMotion } from "motion/react"
-import * as React from "react"
-
-import { useAtomValue, useSetAtom } from "jotai"
-
-import { useMotionPanel } from "@/lib/use-motion-panel"
-import { cn } from "@/lib/utils"
-import {
-  SCAFFOLD_EASE,
-  SCAFFOLD_EDGE_GUTTER,
-  SCAFFOLD_MORPH_DURATION,
-} from "./constants"
-import {
-  scaffoldInspectorOpenAtom,
-  toggleScaffoldInspectorAtom,
-  resizeScaffoldInspectorAtom,
-  setScaffoldInspectorOpenAtom,
-} from "./scaffold-atom"
-import { useScaffoldContext } from "./scaffold-context"
-import type { IScaffoldInspectorProps } from "./type"
-import { GlassContainer } from "@/components/ui/glasscn/glass-container.tsx"
-import { Button } from "@/components/ui/button"
-import { LucideX } from "lucide-react"
-import { SCAFFOLD_BEZEL_CLASSES } from "./utils"
-
-/**
- * The right-hand drawer: a brighter card that slides in over the canvas,
- * inset from the viewport edges. Open state lives on `Scaffold.Root` (or
- * `useScaffold().providerProps`); the drawer stays mounted so it can slide
- * back out.
- */
-export function ScaffoldInspector({
-  children,
-  name = "Inspector",
-  className,
-  ...rest
-}: IScaffoldInspectorProps): React.ReactElement {
-  const { scaffoldId, inspectorWidth } = useScaffoldContext()
-  const inspectorOpen = useAtomValue(scaffoldInspectorOpenAtom(scaffoldId))
-  const toggleInspector = useSetAtom(toggleScaffoldInspectorAtom(scaffoldId))
-  const reducedMotion = useReducedMotion()
-
-  const resizeInspector = useSetAtom(resizeScaffoldInspectorAtom(scaffoldId))
-  const setInspectorOpen = useSetAtom(setScaffoldInspectorOpenAtom(scaffoldId))
-  const [availableWidth, setAvailableWidth] = React.useState<number>(Infinity)
-  const { panelRef, gripRef } = useMotionPanel({
-    size: Math.min(inspectorWidth, availableWidth),
-    minSize: 180,
-    maxSize: "90%",
-    defaultSize: 272,
-    collapsed: !inspectorOpen,
-    overshoot: false,
-    onSizeChange: (size) => resizeInspector(Number(size)),
-    onCollapsedChange: (collapsed) => setInspectorOpen(!collapsed),
-    transition: reducedMotion
-      ? { duration: 0 }
-      : { duration: SCAFFOLD_MORPH_DURATION, ease: SCAFFOLD_EASE },
-  })
-
-  React.useLayoutEffect(() => {
-    const parent = panelRef.current?.parentElement
-    if (!parent) return
-    const measure = () => {
-      if (parent.clientWidth) setAvailableWidth(parent.clientWidth * 0.9)
-    }
-    measure()
-    const observer = new ResizeObserver(measure)
-    observer.observe(parent)
-    return () => observer.disconnect()
-  }, [panelRef])
-
-  // Slide fully past the edge gutter and the drop shadow's blur radius.
-  const offcanvasX = inspectorWidth + SCAFFOLD_EDGE_GUTTER + 12
-
-  return (
-    <motion.aside
-      id="scaffold-inspector"
-      ref={panelRef}
-      animate={{ x: inspectorOpen ? 0 : offcanvasX }}
-      aria-hidden={inspectorOpen ? undefined : true}
-      aria-label={name}
-      className={cn(
-        "right-0 my-2 w-96 absolute z-20 flex h-full max-h-[calc(100%-0.5rem)] flex-col",
-        !inspectorOpen && "pointer-events-none",
-        className
-      )}
-      data-slot="scaffold-inspector"
-      inert={inspectorOpen ? undefined : true}
-      initial={false}
-      role="complementary"
-      style={{ overflow: inspectorOpen ? undefined : "clip" }}
-      transition={{
-        duration: reducedMotion ? 0 : SCAFFOLD_MORPH_DURATION,
-        ease: SCAFFOLD_EASE,
-      }}
-      {...rest}
-    >
-      <div
-        ref={gripRef}
-        role="separator"
-        aria-label="Resize inspector"
-        aria-orientation="vertical"
-        tabIndex={inspectorOpen ? 0 : -1}
-        className="inset-y-0 -left-1 w-2 absolute z-30 cursor-col-resize touch-none focus-visible:outline-2 focus-visible:outline-ring"
-      />
-      <GlassContainer
-        className={cn(
-          "bg-neutral-50/20 dark:bg-black/5 flex flex-1 flex-col rounded-md",
-          SCAFFOLD_BEZEL_CLASSES
-        )}
-        glassVariant="subtle"
-      >
-        <div
-          id="scaffold-inspector-header"
-          className="h-12 gap-2 pr-3 pl-4 flex items-center justify-between border-b"
-        >
-          <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

@@ -1,28 +0,0 @@
-"use client"
-
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-import type { TScaffoldMainProps } from "./type"
-
-/**
- * The region right of the rail. Hosts `Scaffold.Actions` (top-right),
- * `Scaffold.Canvas` and the `Scaffold.Inspector` overlay — all positioned
- * against this box.
- */
-export function ScaffoldMain({
-  className,
-  children,
-  ...rest
-}: TScaffoldMainProps): React.ReactElement {
-  return (
-    <div
-      id="scaffold-main"
-      className={cn("relative flex min-w-0 flex-1 flex-col", className)}
-      data-slot="scaffold-main"
-      {...rest}
-    >
-      {children}
-    </div>
-  )
-}

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

@@ -1,186 +0,0 @@
-"use client"
-
-import { motion, useReducedMotion } from "motion/react"
-import * as React from "react"
-import { useId } from "react"
-
-import { cn } from "@/lib/utils"
-import {
-  SCAFFOLD_EASE,
-  SCAFFOLD_MORPH_DURATION,
-  SCAFFOLD_PANEL_MIN_WIDTH,
-} from "./constants"
-import { useAtomValue, useSetAtom } from "jotai"
-
-import { useMotionPanel } from "@/lib/use-motion-panel"
-import { PanelMenuButton } from "./panel-menu-button.tsx"
-import {
-  scaffoldPanelDimmedAtom,
-  scaffoldPanelLayoutsAtom,
-  updateScaffoldPanelLayoutAtom,
-  toggleScaffoldPanelAtom,
-} from "./scaffold-atom"
-import { useScaffoldContext } from "./scaffold-context"
-import type { IScaffoldPanelProps } from "./type"
-import { ScaffoldSubPanel } from "@/components/blocks/scaffold/scaffold-sub-panel.tsx"
-
-/**
- * A canvas panel: a primary card plus an optional secondary strip below it,
- * separated by a slice of the desktop backdrop. Floating close and swap
- * buttons reveal on hover when their callbacks are provided. Swapping trades
- * the two cards with a layout morph — the strip glides up and grows into the
- * primary slot while the primary card shrinks down into the strip.
- */
-export function ScaffoldPanel({
-  id,
-  _panelHidden = false,
-  _panelFill = true,
-  _panelWidth = 320,
-  _panelMax = 640,
-  _panelEnd = true,
-  children,
-  SecondaryPanel,
-  onSwap,
-  onCloseSecondary,
-  name,
-  swapLabel = "Swap panel content",
-  sound = true,
-  className,
-}: IScaffoldPanelProps & {
-  _panelHidden?: boolean
-  _panelFill?: boolean
-  _panelWidth?: number
-  _panelMax?: number
-  _panelEnd?: boolean
-}): React.ReactElement {
-  const { scaffoldId } = useScaffoldContext()
-  const reducedMotion = useReducedMotion()
-
-  // A hovered tab spotlights its own panel — every other id'd panel fades
-  // back so the pairing reads at a glance. The per-panel atom keeps a hover
-  // moving between two tabs from re-rendering the panels that stay dimmed;
-  // the empty-key sentinel reads false for a panel without an `id`.
-  const dimmed = useAtomValue(scaffoldPanelDimmedAtom(scaffoldId, id ?? ""))
-
-  const transition = {
-    duration: reducedMotion ? 0 : SCAFFOLD_MORPH_DURATION,
-    ease: SCAFFOLD_EASE,
-  }
-
-  const generatedId = useId()
-  const panelId = id ?? generatedId
-  const layouts = useAtomValue(scaffoldPanelLayoutsAtom(scaffoldId))
-  const updateLayout = useSetAtom(updateScaffoldPanelLayoutAtom(scaffoldId))
-  const togglePanel = useSetAtom(toggleScaffoldPanelAtom(scaffoldId))
-  const panelLayout = layouts[panelId] ?? {}
-  const isSwapped = panelLayout.swapped ?? false
-  const secondaryExpanded = panelLayout.secondaryExpanded ?? false
-  const handleSwap = () => {
-    updateLayout(panelId, { swapped: !isSwapped })
-    onSwap?.()
-  }
-  const handleExpand = () =>
-    updateLayout(panelId, { secondaryExpanded: !secondaryExpanded })
-  const { panelRef, gripRef } = useMotionPanel({
-    size: _panelWidth,
-    minSize: SCAFFOLD_PANEL_MIN_WIDTH,
-    maxSize: _panelMax,
-
-    enabled: !_panelFill,
-    collapsed: _panelHidden,
-    overshoot: false,
-    transition,
-    onSizeChange: (size) => updateLayout(panelId, { width: Number(size) }),
-    onCollapsedChange: id
-      ? (collapsed) => {
-          if (collapsed !== _panelHidden) togglePanel(id)
-        }
-      : undefined,
-  })
-
-  const primaryPanel = (
-    <ScaffoldSubPanel
-      key="top"
-      id="top"
-      expanded={!secondaryExpanded}
-      primary
-      panelId={panelId}
-    >
-      {children}
-    </ScaffoldSubPanel>
-  )
-  const secondaryPanel = SecondaryPanel ? (
-    <ScaffoldSubPanel
-      key="bottom"
-      id="bottom"
-      expanded={secondaryExpanded}
-      panelId={panelId}
-      swapped={isSwapped}
-    >
-      {SecondaryPanel}
-    </ScaffoldSubPanel>
-  ) : null
-  const seam = (onSwap || onCloseSecondary) && SecondaryPanel && (
-    // `layout` keeps the seam glued to the moving boundary while the
-    // cards trade places around it.
-    <motion.div
-      key="seam"
-      layout="position"
-      data-motion-panels-separator=""
-      transition={transition}
-      className="h-2 relative flex items-center justify-center"
-    >
-      <PanelMenuButton
-        label={swapLabel}
-        onClick={handleSwap}
-        onExpand={handleExpand}
-        onCloseSecondary={onCloseSecondary}
-        secondaryExpanded={secondaryExpanded}
-        swapped={isSwapped}
-        sound={sound}
-      />
-    </motion.div>
-  )
-
-  return (
-    <motion.section
-      initial={false}
-      id={id ?? "scaffold-panel"}
-      ref={panelRef}
-      data-motion-panels-fill={_panelFill ? "" : undefined}
-      data-motion-panels-separator={_panelHidden ? "" : undefined}
-      aria-hidden={_panelHidden || undefined}
-      inert={_panelHidden || undefined}
-      animate={{ opacity: dimmed ? 0.35 : 1 }}
-      style={{
-        flex: _panelFill ? "1 1 0%" : "0 0 auto",
-        minWidth: 0,
-        marginRight: _panelHidden ? -8 : 0,
-        overflow: _panelHidden ? "clip" : undefined,
-      }}
-      aria-label={name}
-      className={cn("group/panel min-w-0 relative flex", "flex-col", className)}
-      data-slot="scaffold-panel"
-      data-dimmed={dimmed ? "" : undefined}
-      data-swapped={isSwapped ? "" : undefined}
-      transition={transition}
-    >
-      {!_panelFill && (
-        <div
-          ref={gripRef}
-          role="separator"
-          aria-label={`Resize ${name ?? "panel"}`}
-          aria-orientation="vertical"
-          tabIndex={_panelHidden ? -1 : 0}
-          className={cn(
-            "inset-y-0 w-2 absolute z-10 cursor-col-resize touch-none focus-visible:outline-2 focus-visible:outline-ring",
-            _panelEnd ? "-right-1" : "-left-1"
-          )}
-        />
-      )}
-      {isSwapped ? secondaryPanel : primaryPanel}
-      {seam}
-      {isSwapped ? primaryPanel : secondaryPanel}
-    </motion.section>
-  )
-}

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

@@ -1,120 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { useAtomValue, useSetAtom } from "jotai"
-
-import { cn } from "@/lib/utils"
-import { SCAFFOLD_INSPECTOR_WIDTH } from "./constants"
-import {
-  projectScaffoldPropsAtom,
-  scaffoldInspectorWidthAtom,
-  removeScaffoldInstance,
-  seedScaffoldInspectorAtom,
-  setScaffoldHandlersAtom,
-} from "./scaffold-atom"
-import { ScaffoldContext } from "./scaffold-context"
-import type {
-  IScaffoldConfig,
-  IScaffoldContextValue,
-  IScaffoldHandlers,
-  IScaffoldRootProps,
-} from "./type"
-import type { ClassNameValue } from "tailwind-merge"
-
-/**
- * The scaffold's viewport: desktop backdrop + horizontal row of rail and
- * main region, and the binding between this instance's props and its slice
- * of the store. Fills its container — size it from the outside (e.g.
- * `h-svh` for a full page).
- *
- * State lives in the store under `scaffoldId`; the context carries only the
- * id and the drawer width, so its value never changes while the scaffold is
- * mounted and parts subscribe to exactly the atoms they render from. A
- * controlled `inspectorOpen` stays the source of truth: it is projected
- * one-way into the store (so remote readers see current data), and the
- * inspector actions report through `onInspectorOpenChange` instead of
- * writing.
- */
-export function ScaffoldRoot({
-  scaffoldId: scaffoldIdProp,
-  inspectorOpen: inspectorOpenProp,
-  defaultInspectorOpen,
-  onInspectorOpenChange,
-  inspectorWidth = SCAFFOLD_INSPECTOR_WIDTH,
-  className,
-  children,
-  ...rest
-}: IScaffoldRootProps): React.ReactElement {
-  const generatedId = React.useId()
-  const scaffoldId = scaffoldIdProp ?? generatedId
-  const background: ClassNameValue = `bg-linear-to-tr/increasing from-neutral-200 via-neutral-100 to-stone-200 dark:from-neutral-900 dark:via-neutral-950 dark:to-stone-950`
-
-  const controlsInspector = inspectorOpenProp !== undefined
-  const config = React.useMemo<IScaffoldConfig>(
-    () => ({ controlsInspector }),
-    [controlsInspector]
-  )
-  const handlers = React.useMemo<IScaffoldHandlers>(
-    () => ({ onInspectorOpenChange }),
-    [onInspectorOpenChange]
-  )
-
-  const project = useSetAtom(projectScaffoldPropsAtom(scaffoldId))
-  const publishHandlers = useSetAtom(setScaffoldHandlersAtom(scaffoldId))
-  const seedInspector = useSetAtom(seedScaffoldInspectorAtom(scaffoldId))
-
-  // Seed the uncontrolled inspector once per mount, before the projection —
-  // `defaultInspectorOpen` describes the mount, not every render. Passive
-  // effects on purpose: jotai (v3) subscribes readers in their own
-  // `useEffect` with no post-subscription recheck, and the children's
-  // subscription effects run before this parent's passive effects — a
-  // `useLayoutEffect` write would land before any subscription exists and
-  // the readers would never re-render with the seeded state.
-  const [seed] = React.useState(
-    () => inspectorOpenProp ?? defaultInspectorOpen ?? false
-  )
-  React.useEffect(() => {
-    if (!controlsInspector) seedInspector(seed)
-    // Mount-time seed only.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-  // Handlers before the projection — they must be in the store before any
-  // action can fire.
-  React.useEffect(() => {
-    publishHandlers(handlers)
-  }, [publishHandlers, handlers])
-  React.useEffect(() => {
-    project(config, inspectorOpenProp)
-  }, [project, config, inspectorOpenProp])
-
-  React.useEffect(() => {
-    if (scaffoldIdProp !== undefined) return
-    return () => removeScaffoldInstance(scaffoldId)
-  }, [scaffoldIdProp, scaffoldId])
-
-  const storedWidth = useAtomValue(scaffoldInspectorWidthAtom(scaffoldId))
-  const value = React.useMemo<IScaffoldContextValue>(
-    () => ({ scaffoldId, inspectorWidth: storedWidth ?? inspectorWidth }),
-    [scaffoldId, inspectorWidth, storedWidth]
-  )
-
-  return (
-    <ScaffoldContext.Provider value={value}>
-      <div
-        id={"scaffold-root"}
-        className={cn(
-          // `clip`, not `hidden`: the off canvas inspector extends the
-          // scrollable overflow, and focus/scrollIntoView would scroll a
-          // hidden-overflow root sideways to reveal it.
-          "pr-2 pb-2 relative isolate flex size-full flex-1 overflow-clip",
-          background,
-          className
-        )}
-        data-slot="scaffold"
-        {...rest}
-      >
-        {children}
-      </div>
-    </ScaffoldContext.Provider>
-  )
-}

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

@@ -1,31 +0,0 @@
-"use client"
-
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-import type { TScaffoldSidebarProps } from "./type"
-
-/**
- * The 64px icon rail on the left edge. Transparent — it sits directly on
- * the desktop backdrop; fill it with icon buttons.
- */
-export function ScaffoldSidebar({
-  className,
-  children,
-  ...rest
-}: TScaffoldSidebarProps): React.ReactElement {
-  return (
-    <nav
-      id="scaffold-sidebar"
-      aria-label="Primary"
-      className={cn(
-        "flex h-full min-w-12 shrink-0 flex-col items-center gap-1 overflow-y-auto pt-10 pb-2",
-        className
-      )}
-      data-slot="scaffold-sidebar"
-      {...rest}
-    >
-      {children}
-    </nav>
-  )
-}

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

@@ -1,122 +0,0 @@
-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 { 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
-}: 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
-      layout="position"
-      ref={(node) => {
-        panelRef.current = node
-      }}
-      data-motion-panels-fill={primary ? "" : undefined}
-      id={`scaffold-sub-panel-${variant}`}
-      // Motion Panels animates the boundary; the primary consumes the rest.
-      initial={false}
-      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(
-        "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 ? "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>
-  )
-}