@exegia/corpora-ui 3.0.0 → 4.0.0

package/src/components/composed/reader/selection-popover.tsx

@@ -1,149 +0,0 @@
-"use client"
-
-import { useEffect, useState } from "react"
-import type * as React from "react"
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { Separator } from "@/components/ui/separator"
-import {
-  PreviewCard,
-  PreviewCardPopup,
-  PreviewCardTrigger,
-} from "@/components/ui/preview-card"
-import {
-  accentRing,
-  AiIcon,
-  CloseIcon,
-  ghostMuted,
-  mutedText,
-  surface,
-} from "@/components/composed/ai/shared"
-import type { ISelectionPopoverProps } from "./type"
-
-/**
- * The reader entry point, built on the preview-card atom: hovering or
- * focusing the selection reveals the card. The word and node variants
- * deliberately share one shell so there is one, and only one, AI action for
- * every kind of selection.
- */
-export function SelectionPopover({
-  open,
-  defaultOpen = false,
-  onOpenChange,
-  variant,
-  word,
-  node,
-  onAddToChat,
-  onClose,
-  children,
-  className,
-}: ISelectionPopoverProps): React.ReactElement {
-  const [internalOpen, setInternalOpen] = useState(defaultOpen)
-  const isOpen = open ?? internalOpen
-
-  const handleOpenChange = (next: boolean) => {
-    if (open === undefined) setInternalOpen(next)
-    onOpenChange?.(next)
-    if (!next) onClose?.()
-  }
-
-  useEffect(() => {
-    if (!isOpen) return
-    const handleShortcut = (event: KeyboardEvent) => {
-      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "j") {
-        event.preventDefault()
-        onAddToChat?.()
-      }
-    }
-    document.addEventListener("keydown", handleShortcut)
-    return () => document.removeEventListener("keydown", handleShortcut)
-  }, [isOpen, onAddToChat])
-
-  return (
-    <PreviewCard onOpenChange={handleOpenChange} open={isOpen}>
-      {children ? (
-        <PreviewCardTrigger render={<span />}>{children}</PreviewCardTrigger>
-      ) : null}
-      <PreviewCardPopup
-        align="start"
-        aria-label="Selection actions"
-        className={cn(
-          "w-64 flex-col overflow-hidden rounded-sm p-0",
-          surface,
-          className
-        )}
-      >
-        <div className="flex items-start justify-between gap-3 px-3.5 py-3">
-          <div className="min-w-0">
-            {variant === "word" && word ? (
-              <>
-                <p className="truncate font-medium text-foreground">{word.lemma}</p>
-                <p className={mutedText}>
-                  {[
-                    word.partOfSpeech ?? word.pos,
-                    word.frequency !== undefined && `${word.frequency}×`,
-                  ]
-                    .filter(Boolean)
-                    .join(" · ")}
-                </p>
-              </>
-            ) : node ? (
-              <>
-                <p className="font-medium text-foreground">{node.range}</p>
-                <p className={mutedText}>
-                  {node.nodeIds.length} node
-                  {node.nodeIds.length === 1 ? "" : "s"} · {node.wordCount}{" "}
-                  words
-                </p>
-                <p className="mt-1 truncate text-[11px] text-muted-foreground/70">
-                  {node.nodeIds.join(" · ")}
-                </p>
-              </>
-            ) : null}
-          </div>
-          {onClose ? (
-            <Button
-              aria-label="Close selection actions"
-              className={ghostMuted}
-              onClick={() => handleOpenChange(false)}
-              size="icon-xs"
-              variant="ghost"
-            >
-              <CloseIcon />
-            </Button>
-          ) : null}
-        </div>
-        {variant === "word" && word ? (
-          <>
-            <Separator />
-            <Button
-              className={cn(
-                "h-auto w-full justify-start rounded-none px-3.5 py-2.5 font-normal text-muted-foreground hover:text-foreground sm:h-auto",
-                accentRing
-              )}
-              onClick={word.onViewDetails}
-              variant="ghost"
-            >
-              View details
-            </Button>
-          </>
-        ) : null}
-        <Separator className="mx-3.5 data-[orientation=horizontal]:w-auto" />
-        <Button
-          className={cn(
-            "h-auto min-h-11 w-full justify-start gap-2 rounded-none px-3.5 text-amber-700 hover:bg-amber-400/8 hover:text-amber-700 dark:text-amber-300/90 dark:hover:text-amber-300/90 sm:h-auto",
-            accentRing
-          )}
-          onClick={onAddToChat}
-          variant="ghost"
-        >
-          <AiIcon />
-          <span>Add to chat</span>
-          <kbd className="ml-auto rounded-sm border border-amber-500/25 px-1.5 py-0.5 text-[10px] font-normal opacity-75">
-            ⌘J
-          </kbd>
-        </Button>
-      </PreviewCardPopup>
-    </PreviewCard>
-  )
-}

package/src/components/composed/reader/type.ts

@@ -1,48 +0,0 @@
-import type * as React from "react"
-
-/** A single selected word in the reader. */
-export interface IWordSelection {
-  lemma: string
-  partOfSpeech?: string
-  pos?: string
-  frequency?: number | string
-  onViewDetails?: () => void
-}
-
-/** A selected run of reader nodes. */
-export interface INodeSelection {
-  range: string
-  nodeIds: string[]
-  wordCount: number
-}
-
-export interface ISelectionPopoverProps {
-  open?: boolean
-  defaultOpen?: boolean
-  onOpenChange?: (open: boolean) => void
-  variant: "word" | "node"
-  word?: IWordSelection
-  node?: INodeSelection
-  onAddToChat?: () => void
-  onClose?: () => void
-  /** The selected reader content — rendered as the hover/focus trigger. */
-  children?: React.ReactNode
-  className?: string
-}
-
-export interface ISelectionHighlightProps
-  extends React.ComponentPropsWithoutRef<"span"> {
-  range?: string
-}
-
-export interface IAppliedMarkProps
-  extends React.ComponentPropsWithoutRef<"span"> {
-  nodeId?: string
-}
-
-export interface IApplyToastProps {
-  open?: boolean
-  message?: React.ReactNode
-  onUndo?: () => void
-  className?: string
-}

package/src/components/composed/social-providers.tsx

@@ -1,154 +0,0 @@
-"use client"
-
-import {
-  RiAppleFill,
-  RiGithubFill,
-  RiGoogleFill,
-  RiTwitterXFill,
-} from "@remixicon/react"
-import type * as React from "react"
-
-import { Button } from "@/components/ui/button"
-import { cn } from "@/lib/utils"
-import type { TSocialProvider } from "./types"
-
-
-/** Google's four-color "G" — the only provider whose mark isn't monochrome. */
-function GoogleColorIcon(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg viewBox="0 0 24 24" fill="none" {...props}>
-      <path
-        fill="#4285F4"
-        d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.76h3.56c2.09-1.92 3.28-4.74 3.28-8.09Z"
-      />
-      <path
-        fill="#34A853"
-        d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.56-2.76c-.99.66-2.25 1.05-3.72 1.05-2.86 0-5.28-1.93-6.15-4.53H2.18v2.85A11 11 0 0 0 12 23Z"
-      />
-      <path
-        fill="#FBBC05"
-        d="M5.85 14.1A6.6 6.6 0 0 1 5.5 12c0-.73.13-1.44.35-2.1V7.05H2.18a11 11 0 0 0 0 9.9l3.67-2.85Z"
-      />
-      <path
-        fill="#EA4335"
-        d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15A11 11 0 0 0 2.18 7.05L5.85 9.9C6.72 7.3 9.14 5.38 12 5.38Z"
-      />
-    </svg>
-  )
-}
-
-/**
- * Label + brand mark per provider, shared with the auth blocks. `Icon` is the
- * monochrome mark that inherits the current text color; `BrandIcon` +
- * `brandClassName` render it in the provider's own colors.
- */
-export const SOCIAL_PROVIDERS: Record<
-  TSocialProvider,
-  {
-    label: string
-    Icon: React.ComponentType<{ className?: string }>
-    BrandIcon: React.ComponentType<{ className?: string }>
-    brandClassName?: string
-    buttonClassName?: string
-    labelClassName?: string
-  }
-> = {
-  google: {
-    label: "Google",
-    Icon: RiGoogleFill,
-    BrandIcon: GoogleColorIcon,
-    brandClassName: "fill-black dark:fill-white"
-  },
-  apple: {
-    label: "Apple",
-    Icon: RiAppleFill,
-    BrandIcon: RiAppleFill,
-    brandClassName: "fill-white! dark:fill-black!",
-    buttonClassName: "bg-neutral-950 hover:bg-black dark:bg-white dark:hover:bg-neutral-100 shadow-bezel dark:shadow-bubble-dim border-border dark:border-muted",
-    labelClassName: "text-white dark:text-black"
-  },
-  github: {
-    label: "GitHub",
-    Icon: RiGithubFill,
-    BrandIcon: RiGithubFill
-  },
-  x: {
-    label: "X",
-    Icon: RiTwitterXFill,
-    BrandIcon: RiTwitterXFill
-  },
-}
-
-const ACTION_LABELS = {
-  login: "Login with",
-  signup: "Sign up with",
-  continue: "Continue with",
-} as const
-
-export interface ISocialProvidersProps {
-  providers?: TSocialProvider[]
-  /** Verb used in the stacked layout labels. */
-  action?: keyof typeof ACTION_LABELS
-  /** "stack" = full-width labeled buttons; "row" = icon-only buttons. */
-  layout?: "stack" | "row"
-  /** Shows the matching button in its loading state and disables the rest. */
-  loadingProvider?: TSocialProvider | null
-  disabled?: boolean
-  onSelect?: (provider: TSocialProvider) => void
-  className?: string
-}
-
-/** Social auth buttons (coss particle p-button-38). UI only — wire onSelect. */
-export function SocialProviders({
-  providers = ["google", "apple", "github"],
-  action = "continue",
-  layout = "stack",
-  loadingProvider = null,
-  disabled = false,
-  onSelect,
-  className,
-}: ISocialProvidersProps) {
-  const row = layout === "row"
-
-  return (
-    <div
-      className={cn(
-        "flex w-full gap-2",
-        row ? "flex-row justify-center" : "flex-col",
-        className
-      )}
-    >
-      {providers.map((provider) => {
-        const {
-          label,
-          BrandIcon,
-          brandClassName,
-          buttonClassName,
-          labelClassName,
-        } = SOCIAL_PROVIDERS[provider]
-        return (
-          <Button
-            key={provider}
-            variant="outline"
-            size={row ? "icon" : "default"}
-            className={cn(buttonClassName, row ? undefined : "w-full")}
-            aria-label={`${ACTION_LABELS[action]} ${label}`}
-            loading={loadingProvider === provider}
-            disabled={
-              disabled ||
-              (loadingProvider !== null && loadingProvider !== provider)
-            }
-            onClick={() => onSelect?.(provider)}
-          >
-            <BrandIcon aria-hidden="true" className={brandClassName} />
-            {!row && (
-              <span className={cn("flex-1", labelClassName)}>
-                {ACTION_LABELS[action]} {label}
-              </span>
-            )}
-          </Button>
-        )
-      })}
-    </div>
-  )
-}

package/src/components/composed/tree/CLAUDE.md

@@ -1,145 +0,0 @@
-# composed/tree
-
-Nested item tree in four shapes — `navigation`, `toc`, `sidebar` (icon rail),
-`files` (explorer). It is the **reference implementation** of the Jotai
-state pattern described in `react/CLAUDE.md` ("State" section) — read that
-first; this file only holds what is specific to the tree.
-
-## File map
-
-| File                | Owns                                                                                                    |
-| ------------------- | ------------------------------------------------------------------------------------------------------- |
-| `type.ts`           | `ITreeNode`, `TTreeProps` (data form × controller form), `ITreeState`/`ITreeActions`, `@internal` config/handlers/seed. No imports besides React types. |
-| `tree-atom.ts`      | Every atom, keyed by `treeId` (`keyed()` families) and per node (`nodeFamily`). All mutations are write-only action atoms. `debugLabel` = `tree/<id>/<name>`. |
-| `use-tree.ts`       | `useTree(options)` — mounts an instance, projects controlled props into the store, returns the `ITreeController`. |
-| `use-tree-state.ts` | `useTreeState(id)` (reads, re-renders on any change) and `useTreeActions(id)` (writes only, never re-renders). |
-| `use-tree-dnd.ts`   | Stable drag handlers for `files`; they read `draggedId`/`dropTarget` out of the store at call time.       |
-| `tree-context.ts`   | Context value = `{ treeId, renderTrailing, dnd }` only. Never the controller.                            |
-| `tree.tsx`          | `Tree` (props form → `UncontrolledTree`, controller form → `TreeView`), roving keyboard nav. |
-| `tree-node.tsx`     | `TreeRow` (memoized). Per-node atom subscriptions, row kind resolution, rename input, tooltip, toc overlay toggle, trailing slot, branch animation. |
-| `constants.ts`      | Durations, easings, motion variants.                                                                    |
-| `utils.ts`          | Pure tree helpers (`findNode`, `moveNode`, `renameNode`, ancestor walks).                               |
-| `index.ts`          | Barrel. Public atoms are listed explicitly — never `export *`.                                          |
-| `__tests__/`        | `tree.test.tsx` (rendering per variant), `use-tree.test.tsx` (controller/hook), `tree-atom.test.tsx` (store + memo guard). |
-
-## Row anatomy (as of 2026-08-18)
-
-- **Every non-section row is the shared `ui/button` `Button`** (`variant="ghost"`,
-  or `"secondary"` for the active sidebar row). Section headings in a 3-level
-  `navigation` tree stay a plain `<button>`. **Nothing renders an `<a>` any
-  more.**
-- `ITreeNode.href` / `target` are **metadata** — they ride along on the node
-  handed to `onNavigate`. Routing has exactly one path:
-  `selectTreeNodeAtom` → `node.onSelect?.()` → `handlers.onNavigate?.(node)`.
-  One native behaviour survives the anchor removal: `toc` rows below the
-  route level (depth > 0, or any toc row with a `#hash` href) set
-  `window.location.hash` **after** `select` in `handlePress` — same order the
-  old `<a>` default gave, same `:target`/history semantics. A non-hash href
-  on a toc row disables the jump (it is a route). Controller `select()` from
-  outside does NOT jump — the hash write lives in the row, not the atom,
-  because it is a DOM concern.
-- Row-level `data-*` (`data-slot="tree-row"`, `data-id`, `data-branch`,
-  `data-expanded`, `data-active`, `data-cuelume-press`) come from
-  `rowInteractionProps`, spread onto the Button; Base UI's `mergeProps` lets
-  them override Button's own `data-slot="button"`. `sound` is forwarded to the
-  Button so its press/release cues follow the tree's `sound` prop.
-- Collapsed sidebar rows are `h-10! rounded-xl! justify-center px-0` tiles
-  spanning the **full rail width** — the rail itself stays `w-full` in both
-  states; its fold is the container's width change (an icon-collapsed panel)
-  plus the labels folding. Folded icons step up to `size-5 text-foreground`.
-- Row kinds (`rowKindOf`): `link` (selectable, `aria-expanded` absent),
-  `toggle` (parent in navigation/files, `aria-expanded` on the row),
-  `section` (top level of a 3-level navigation tree). `toc` parents are
-  `link` rows with a separate overlay `<button aria-label="Expand X">`.
-- The trailing slot (`renderTrailing`, files only) is a **sibling** of the row
-  inside `.group/row-actions`, never a child — a button inside a button is
-  invalid HTML and React warns.
-
-## Lessons learned (chronological)
-
-1. **Rows read per-node atoms, not the controller.** Reading the whole
-   controller off context re-rendered every row on every toggle.
-   `tree-atom.test.tsx` counts `renderTrailing` calls per node to guard the
-   memo + per-node subscriptions. (0021dee)
-2. **Controlled props are projected, not mirrored.** `useTree` writes
-   controlled `items`/`activeId`/`collapsed` into the store in a layout effect
-   with write gates. `treeOwnedItemsAtom` reads empty while a prop owns the
-   data — without it an inline `items={[…]}` array loops forever.
-3. **Keep the rail label mounted.** Unmounting the label on collapse killed
-   the fold animation; it animates `width/opacity/x/display` in place and the
-   test asserts `display: none`, not absence. (12b6a1f)
-4. **Both rail width endpoints must be px** *(historical — the rail no
-   longer animates its own width; the container's fold carries it, see the
-   fix/tree-collapsed-behavior entry)*. Motion cannot tween a number
-   against `"100%"`; doing so pinned the inline width at the collapsed value
-   and the rail never reopened. (a69072d, 2f7539f)
-5. **Tooltip is disabled, not unmounted, when the rail expands.** Swapping the
-   wrapper remounts the row and cuts the label fold short. Test asserts row
-   identity across collapse.
-6. **Trailing actions live beside the row.** See "Row anatomy". (2c59e53)
-7. **Rows became `Button`; anchors were removed** (2026-08-18, this branch).
-   Consequences that had to follow: tests query `role: "button"` everywhere,
-   `href` documentation flipped from "renders an anchor" to "metadata for
-   `onNavigate`", `RAIL_COLLAPSED_WIDTH` 44 → 40 to match `w-10`, `sound`
-   forwarded to Button, and the toc `#{id}` anchor test was rewritten as
-   "row selects, overlay toggle expands". The native `#{id}` jump for toc
-   rows was then restored via `location.hash` in `handlePress` (see "Row
-   anatomy") — dropping it silently was a regression, not a simplification.
-8. **`settleExit()` must run inside `act`.** AnimatePresence exits finishing
-   during a bare `setTimeout` wait produce "not wrapped in act" warnings;
-   `act(() => new Promise(r => setTimeout(r, 400)))` keeps them tracked. Query
-   **once** after settling — happy-dom serves stale `waitFor` results while an
-   exit is in flight (see memory `corpora-ui-happy-dom-exit-animations`).
-
-## Testing notes
-
-- Run from `react/`: `bun test src/components/composed/tree`.
-- happy-dom cannot drive Base UI hover/focus-visible, so tooltip tests assert
-  the wiring (`data-base-ui-tooltip-trigger`) not the popup.
-- happy-dom rects are zero-height, so DnD tests hit the 0.5-midpoint fallback
-  ("inside" for folders, "after" for leaves).
-- Motion sets no inline styles under happy-dom — the rail width tests lock
-  the **class**; the px tween is only verifiable in a real browser.
-- Browser check via the docs demo (`/components/tree`, dev server config
-  `corpora-ui-docs`): the demo's Base UI `Select` only takes clicks on the
-  option's real viewport rect (screenshot frame is scaled — convert), and if
-  the Browser pane tab is hidden (`document.hidden`) both WAAPI and motion's
-  frameloop pause, so animated end-states can't be observed there — front the
-  tab or use a real browser for the fold.
-
-## Change log
-
-- **2026-08-22 — fix/tree-collapsed-behavior** (on `release/v0.28.0`)
-  - `tree.tsx`: the rail no longer narrows itself — the `w-10` collapsed
-    class, the width measurement (`railRef`/ResizeObserver) and the px width
-    tween are gone. The list is `w-full` in both states (root `motion.ul` →
-    plain `ul`); the nav wrapper dropped `justify-center` for `w-full`. The
-    fold is the hosting panel's width change plus the labels folding.
-  - `tree-node.tsx`: folded rail icons step up to `size-5` and take
-    `text-foreground` (rows are icon-only, so muted-at-rest read as disabled).
-  - `constants.ts`: `RAIL_COLLAPSED_WIDTH` removed (was internal-only).
-  - `blocks/profile/profile-card-block.tsx`: the folded card is a full-width
-    `h-10 w-full` row (was a `-mx-1 size-10` tile) so the avatar centres on
-    the rail's own centre line regardless of panel width.
-
-- **2026-08-18 — fix/tree-collapsed** (on `release/v0.21.0`)
-  - `tree-node.tsx`: link/toggle rows render the shared `Button` (ghost /
-    secondary when active on sidebar); anchor branch removed; collapsed rail
-    rows `h-10! rounded-xl!`; rename input borderless; `cursor-pointer` on
-    rows/toggles; `sound` forwarded to Button.
-  - `tree.tsx`: rail resting class `w-11` → `w-10`, `gap-y-2!` when collapsed.
-  - `constants.ts`: `RAIL_COLLAPSED_WIDTH` 44 → 40.
-  - `type.ts` / `registry/components.ts`: `href`, `onNavigate`, `navigation`
-    and `toc` docs describe button rows + `onNavigate`-only navigation.
-  - `__tests__/tree.test.tsx`: link → button queries; new tests for `href`
-    passthrough, `sound={false}`, `RAIL_COLLAPSED_WIDTH` ↔ `w-10`, collapsed
-    tile classes, active-row `secondary` variant, toc row-vs-toggle split,
-    toc `#{id}` / `#hash` jump after `onNavigate` (route rows leave the hash
-    alone).
-  - `__tests__/*.test.tsx`: `settleExit` wrapped in `act`.
-- **2026-08-17** — Jotai migration (`ExegiaProvider`, atom families,
-  `useTree`/`useTreeState`/`useTreeActions`), rail reopen + measurement fixes,
-  label kept mounted, trailing actions moved out of the row, headless
-  controller API.
-- **2026-08-16** — Initial four-variant tree, tooltip on collapsed rail rows,
-  motion + a11y pass.