@exegia/corpora-ui 1.0.0 → 3.0.0

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

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

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

@@ -10,8 +10,8 @@ import type * as React from "react"
 
 import { Button } from "@/components/ui/button"
 import { cn } from "@/lib/utils"
+import type { TSocialProvider } from "./types"
 
-export type SocialProvider = "google" | "apple" | "github" | "x"
 
 /** Google's four-color "G" — the only provider whose mark isn't monochrome. */
 function GoogleColorIcon(props: React.SVGProps<SVGSVGElement>) {
@@ -43,37 +43,39 @@ function GoogleColorIcon(props: React.SVGProps<SVGSVGElement>) {
  * `brandClassName` render it in the provider's own colors.
  */
 export const SOCIAL_PROVIDERS: Record<
-  SocialProvider,
+  TSocialProvider,
   {
     label: string
     Icon: React.ComponentType<{ className?: string }>
     BrandIcon: React.ComponentType<{ className?: string }>
-    brandClassName: string
+    brandClassName?: string
+    buttonClassName?: string
+    labelClassName?: string
   }
 > = {
   google: {
     label: "Google",
     Icon: RiGoogleFill,
     BrandIcon: GoogleColorIcon,
-    brandClassName: "",
+    brandClassName: "fill-black dark:fill-white"
   },
   apple: {
     label: "Apple",
     Icon: RiAppleFill,
     BrandIcon: RiAppleFill,
-    brandClassName: "text-foreground",
+    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,
-    brandClassName: "text-foreground",
+    BrandIcon: RiGithubFill
   },
   x: {
     label: "X",
     Icon: RiTwitterXFill,
-    BrandIcon: RiTwitterXFill,
-    brandClassName: "text-foreground",
+    BrandIcon: RiTwitterXFill
   },
 }
 
@@ -83,16 +85,16 @@ const ACTION_LABELS = {
   continue: "Continue with",
 } as const
 
-export interface SocialProvidersProps {
-  providers?: SocialProvider[]
+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?: SocialProvider | null
+  loadingProvider?: TSocialProvider | null
   disabled?: boolean
-  onSelect?: (provider: SocialProvider) => void
+  onSelect?: (provider: TSocialProvider) => void
   className?: string
 }
 
@@ -105,7 +107,7 @@ export function SocialProviders({
   disabled = false,
   onSelect,
   className,
-}: SocialProvidersProps) {
+}: ISocialProvidersProps) {
   const row = layout === "row"
 
   return (
@@ -117,13 +119,19 @@ export function SocialProviders({
       )}
     >
       {providers.map((provider) => {
-        const { label, Icon } = SOCIAL_PROVIDERS[provider]
+        const {
+          label,
+          BrandIcon,
+          brandClassName,
+          buttonClassName,
+          labelClassName,
+        } = SOCIAL_PROVIDERS[provider]
         return (
           <Button
             key={provider}
             variant="outline"
             size={row ? "icon" : "default"}
-            className={row ? undefined : "w-full"}
+            className={cn(buttonClassName, row ? undefined : "w-full")}
             aria-label={`${ACTION_LABELS[action]} ${label}`}
             loading={loadingProvider === provider}
             disabled={
@@ -132,9 +140,9 @@ export function SocialProviders({
             }
             onClick={() => onSelect?.(provider)}
           >
-            <Icon aria-hidden="true" />
+            <BrandIcon aria-hidden="true" className={brandClassName} />
             {!row && (
-              <span className="flex-1">
+              <span className={cn("flex-1", labelClassName)}>
                 {ACTION_LABELS[action]} {label}
               </span>
             )}

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

@@ -9,9 +9,9 @@ first; this file only holds what is specific to the tree.
 
 | File                | Owns                                                                                                    |
 | ------------------- | ------------------------------------------------------------------------------------------------------- |
-| `type.ts`           | `TreeNode`, `TreeProps` (data form × controller form), `TreeState`/`TreeActions`, `@internal` config/handlers/seed. No imports besides React types. |
+| `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 `TreeController`. |
+| `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.                            |
@@ -28,7 +28,7 @@ first; this file only holds what is specific to the tree.
   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.**
-- `TreeNode.href` / `target` are **metadata** — they ride along on the node
+- `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

package/src/components/composed/tree/__tests__/tree-atom.test.tsx

@@ -18,11 +18,11 @@ import {
   treeItemsAtom,
   treeRailCollapsedAtom,
 } from "../tree-atom"
-import type { TreeConfig, TreeNode } from "../type"
+import type { ITreeConfig, ITreeNode } from "../type"
 
-type Store = ReturnType<typeof createStore>
+type TStore = ReturnType<typeof createStore>
 
-const FILES: TreeNode[] = [
+const FILES: ITreeNode[] = [
   {
     id: "src",
     label: "src",
@@ -32,10 +32,10 @@ const FILES: TreeNode[] = [
 ]
 
 function mount(
-  store: Store,
+  store: TStore,
   id: string,
-  config: Partial<TreeConfig>,
-  items: TreeNode[] = FILES
+  config: Partial<ITreeConfig>,
+  items: ITreeNode[] = FILES
 ) {
   store.set(
     mountTreeAtom(id),
@@ -89,7 +89,7 @@ describe("tree atoms · write gates", () => {
 
   test("a controlled items prop is never overwritten, only reported", () => {
     const store = createStore()
-    const onItemsChange = mock((items: TreeNode[]) => void items)
+    const onItemsChange = mock((items: ITreeNode[]) => void items)
     mount(store, "controlled", {
       variant: "files",
       controlsItems: true,
@@ -172,7 +172,7 @@ describe("Tree · render granularity", () => {
     // `renderTrailing` runs inside a row's render, so counting calls per id is
     // a proxy for counting that row's renders.
     const renders = new Map<string, number>()
-    const items: TreeNode[] = [
+    const items: ITreeNode[] = [
       { id: "a", label: "a", children: [{ id: "a-1", label: "a-1" }] },
       { id: "b", label: "b", children: [{ id: "b-1", label: "b-1" }] },
     ]

package/src/components/composed/tree/__tests__/tree.test.tsx

@@ -4,11 +4,11 @@ import userEvent from "@testing-library/user-event"
 import { FileTextIcon, FolderIcon, SearchIcon } from "lucide-react"
 
 import { Tree } from "../index"
-import type { TreeNode } from "../type"
+import type { ITreeNode } from "../type"
 import { moveNode } from "../utils"
 
 /** 3-level data — `navigation` promotes the top level to section names. */
-const SECTIONED: TreeNode[] = [
+const SECTIONED: ITreeNode[] = [
   {
     id: "research",
     label: "Research",
@@ -32,7 +32,7 @@ const SECTIONED: TreeNode[] = [
 ]
 
 /** 2-level data — the top level stays plain link rows. */
-const FLAT_NAV: TreeNode[] = [
+const FLAT_NAV: ITreeNode[] = [
   { id: "search", label: "Search", href: "/search" },
   {
     id: "library",
@@ -41,7 +41,7 @@ const FLAT_NAV: TreeNode[] = [
   },
 ]
 
-const TOC: TreeNode[] = [
+const TOC: ITreeNode[] = [
   {
     id: "guide",
     label: "Guide",
@@ -57,12 +57,12 @@ const TOC: TreeNode[] = [
   { id: "api", label: "API", href: "/api" },
 ]
 
-const RAIL: TreeNode[] = [
+const RAIL: ITreeNode[] = [
   { id: "search", label: "Search", icon: <SearchIcon />, href: "/search" },
   { id: "notes", label: "Notes", icon: <FileTextIcon />, href: "/notes" },
 ]
 
-const FILES: TreeNode[] = [
+const FILES: ITreeNode[] = [
   {
     id: "src",
     label: "src",
@@ -142,7 +142,7 @@ describe("Tree · navigation", () => {
   test("onNavigate fires for leaf rows after the node's own onSelect", async () => {
     const user = userEvent.setup()
     const order: string[] = []
-    const items: TreeNode[] = [
+    const items: ITreeNode[] = [
       {
         id: "a",
         label: "Alpha",
@@ -163,7 +163,7 @@ describe("Tree · navigation", () => {
 
   test("href is passed through to onNavigate, never rendered as an anchor", async () => {
     const user = userEvent.setup()
-    const onNavigate = mock((_node: TreeNode) => {})
+    const onNavigate = mock((_node: ITreeNode) => {})
     render(<Tree items={FLAT_NAV} onNavigate={onNavigate} variant="navigation" />)
 
     const search = screen.getByRole("button", { name: "Search" })
@@ -187,7 +187,7 @@ describe("Tree · navigation", () => {
 describe("Tree · toc", () => {
   test("parents select on the row and expand from the overlay toggle", async () => {
     const user = userEvent.setup()
-    const onNavigate = mock((_node: TreeNode) => {})
+    const onNavigate = mock((_node: ITreeNode) => {})
     render(<Tree items={TOC} onNavigate={onNavigate} variant="toc" />)
 
     // Guide is a parent, but toc parents are selectable rows — the row
@@ -359,7 +359,7 @@ describe("Tree · sidebar", () => {
   })
 
   test("nested children are ignored — the rail is single-level", () => {
-    const items: TreeNode[] = [
+    const items: ITreeNode[] = [
       {
         id: "top",
         label: "Top",

package/src/components/composed/tree/__tests__/use-tree.test.tsx

@@ -3,9 +3,9 @@ import { act, render, renderHook, screen } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 
 import { Tree, useTree } from "../index"
-import type { TreeController, TreeNode } from "../type"
+import type { ITreeController, ITreeNode } from "../type"
 
-const NAV: TreeNode[] = [
+const NAV: ITreeNode[] = [
   {
     id: "research",
     label: "Research",
@@ -20,7 +20,7 @@ const NAV: TreeNode[] = [
   },
 ]
 
-const FILES: TreeNode[] = [
+const FILES: ITreeNode[] = [
   {
     id: "src",
     label: "src",
@@ -70,7 +70,7 @@ describe("useTree · expansion", () => {
   })
 
   test("expandAll counts empty folders in files, not empty leaves elsewhere", () => {
-    const items: TreeNode[] = [{ id: "empty", label: "empty", children: [] }]
+    const items: ITreeNode[] = [{ id: "empty", label: "empty", children: [] }]
     const { result } = renderHook(() =>
       useTree({ variant: "files", items })
     )
@@ -161,7 +161,7 @@ describe("useTree · rail", () => {
 describe("useTree · selection", () => {
   test("select runs onSelect then onNavigate and holds the active id", () => {
     const order: string[] = []
-    const items: TreeNode[] = [
+    const items: ITreeNode[] = [
       { id: "a", label: "Alpha", onSelect: () => order.push("onSelect") },
       { id: "off", label: "Off", disabled: true },
     ]
@@ -264,7 +264,7 @@ describe("useTree · reorder", () => {
   })
 
   test("controlled data with onItemsChange gets the next tree", () => {
-    const onItemsChange = mock((items: TreeNode[]) => void items)
+    const onItemsChange = mock((items: ITreeNode[]) => void items)
     const { result } = renderHook(() =>
       useTree({ variant: "files", items: FILES, onItemsChange })
     )
@@ -291,7 +291,7 @@ describe("Tree · controller form", () => {
   function Harness({
     onReady,
   }: {
-    onReady: (tree: TreeController) => void
+    onReady: (tree: ITreeController) => void
   }): React.ReactElement {
     const tree = useTree({ variant: "files", defaultItems: FILES })
     onReady(tree)
@@ -299,7 +299,7 @@ describe("Tree · controller form", () => {
   }
 
   test("renders from the controller and reacts to calls made outside it", async () => {
-    let tree!: TreeController
+    let tree!: ITreeController
     render(<Harness onReady={(next) => (tree = next)} />)
 
     expect(screen.getByText("index.ts")).toBeDefined()
@@ -313,7 +313,7 @@ describe("Tree · controller form", () => {
 
   test("a row press routes through the controller's select", async () => {
     const user = userEvent.setup()
-    let tree!: TreeController
+    let tree!: ITreeController
     render(<Harness onReady={(next) => (tree = next)} />)
 
     await user.click(screen.getByRole("button", { name: "README.md" }))
@@ -321,7 +321,7 @@ describe("Tree · controller form", () => {
   })
 
   test("startRename from outside opens the row's rename input", async () => {
-    let tree!: TreeController
+    let tree!: ITreeController
     render(<Harness onReady={(next) => (tree = next)} />)
 
     await act(async () => tree.startRename("readme"))

package/src/components/composed/tree/index.ts

@@ -36,16 +36,16 @@ export {
   treeStateAtom,
 } from "./tree-atom"
 export type {
-  TreeActions,
-  TreeController,
-  TreeControllerProps,
-  TreeDataProps,
-  TreeDropPosition,
-  TreeDropTarget,
-  TreeInstanceId,
-  TreeNode,
-  TreeProps,
-  TreeState,
-  TreeVariant,
-  UseTreeOptions,
+  ITreeActions,
+  ITreeController,
+  ITreeControllerProps,
+  TTreeDataProps,
+  TTreeDropPosition,
+  ITreeDropTarget,
+  TTreeInstanceId,
+  ITreeNode,
+  TTreeProps,
+  ITreeState,
+  TTreeVariant,
+  IUseTreeOptions,
 } from "./type"