@exegia/corpora-ui 1.0.0 → 2.0.0

package/src/lib/use-motion-panel.ts

@@ -0,0 +1,78 @@
+"use client"
+
+import { useEffect, useLayoutEffect, useRef } from "react"
+import {
+  attachSeparator,
+  createPanel,
+  createPanelGroup,
+  type Orientation,
+  type PanelController,
+  type PanelOptions,
+  type Size,
+} from "motion-panels"
+
+/** Attach Motion Panels to our existing surfaces without adding styled wrappers. */
+export function useMotionPanel(
+  options: PanelOptions<Size> & {
+    orientation?: Orientation
+    enabled?: boolean
+  }
+) {
+  const {
+    orientation = "horizontal",
+    enabled = true,
+    ...panelOptions
+  } = options
+  const panelRef = useRef<HTMLElement | null>(null)
+  const gripRef = useRef<HTMLDivElement | null>(null)
+  const controllerRef = useRef<PanelController | null>(null)
+  const latest = useRef(panelOptions)
+  useLayoutEffect(() => {
+    latest.current = panelOptions
+  })
+
+  useLayoutEffect(() => {
+    const node = panelRef.current
+    if (!node || !enabled) return
+    const group = createPanelGroup(orientation)
+    const controller = createPanel(group, latest.current)
+    controllerRef.current = controller
+    const detach = controller.attach(node)
+    const extent = group.axes.extent
+    const previous = node.style[extent]
+    const draw = (size: number) => {
+      node.style[extent] = `${Math.max(0, size)}px`
+    }
+    draw(controller.motion.size.get())
+    const stopSize = controller.motion.size.on("change", draw)
+    const stopState = controller.subscribe(() => {
+      node.toggleAttribute("data-resizing", controller.state.dragging)
+      node.toggleAttribute("data-folding", controller.state.folding)
+    })
+    const detachGrip = gripRef.current
+      ? attachSeparator(gripRef.current, group, controller)
+      : undefined
+    return () => {
+      detachGrip?.()
+      stopSize()
+      stopState()
+      detach()
+      controller.destroy()
+      controllerRef.current = null
+      node.style[extent] = previous
+    }
+  }, [orientation, enabled])
+
+  useLayoutEffect(() => {
+    controllerRef.current?.sync(panelOptions)
+  })
+  // A separator can mount after a collapsed panel becomes visible. The host
+  // keeps it mounted instead and removes it from focus while closed.
+  useEffect(
+    () => () => {
+      controllerRef.current?.drag.cancel()
+    },
+    []
+  )
+  return { panelRef, gripRef }
+}

package/src/lib/utils.ts

@@ -1,5 +1,7 @@
+import { mergeConfig } from "@exegia/specular/merge"
+import { surfaces } from "./specular"
 import { clsx, type ClassValue } from "clsx"
-import { extendTailwindMerge, validators } from "tailwind-merge"
+import { extendTailwindMerge, mergeConfigs, validators } from "tailwind-merge"
 
 /**
  * The `inset-shadow-{lit,dim}-*` bezel family (exported by `index.css`) is
@@ -15,7 +17,7 @@ import { extendTailwindMerge, validators } from "tailwind-merge"
  * `inset-shadow-blur-*` spans layers — it writes both blurs — so it alone
  * conflicts across them.
  */
-type InsetShadowGroupId =
+type TInsetShadowGroupId =
   | "inset-shadow-bezel"
   | "inset-shadow-lit-x"
   | "inset-shadow-lit-y"
@@ -46,13 +48,13 @@ const INSET_SHADOW_GROUPS = [
   "inset-shadow-dim-blur",
   "inset-shadow-dim-alpha",
   "inset-shadow-blur",
-] as const satisfies readonly InsetShadowGroupId[]
+] as const satisfies readonly TInsetShadowGroupId[]
 
 const displacesTailwindShadows = Object.fromEntries(
   INSET_SHADOW_GROUPS.map((id) => [id, ["shadow", "inset-shadow"]])
 )
 
-const twMerge = extendTailwindMerge<InsetShadowGroupId>({
+const twMerge = extendTailwindMerge<TInsetShadowGroupId | import("@exegia/specular/merge").BezelGroupId<typeof surfaces>>({
   extend: {
     classGroups: {
       // The shared base every other utility in the family `@apply`s. Grouped
@@ -91,7 +93,7 @@ const twMerge = extendTailwindMerge<InsetShadowGroupId>({
       ],
     },
   },
-})
+}, (config) => mergeConfigs(config, mergeConfig(surfaces)))
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))

package/src/specular.js

@@ -0,0 +1,4 @@
+import { createPlugin } from "@exegia/specular/plugin"
+import { surfaces } from "./lib/specular.ts"
+
+export default createPlugin(surfaces)

package/dist-lib/src/components/atoms/avatar/base.d.ts

@@ -1,2 +0,0 @@
-import { AvatarProps, UserType } from './types';
-export default function Base<T extends UserType>({ user, size, className, loading, audio, }: AvatarProps<T>): import("react").JSX.Element;

package/dist-lib/src/components/atoms/avatar/index.d.ts

@@ -1,2 +0,0 @@
-import { default as Avatar } from './base';
-export { Avatar };

package/dist-lib/src/components/atoms/avatar/types.d.ts

@@ -1,20 +0,0 @@
-import { AtomSize } from '../types';
-export type UserType = {
-    firstName?: string;
-    lastName?: string;
-    email?: string;
-    role?: string;
-    avatarUrl?: string;
-    verified?: boolean;
-    status?: AvatarStatus;
-};
-export type AvatarSize = Exclude<AtomSize, "xs">;
-export type AvatarStatus = "online" | "idle" | "offline";
-export type AvatarAudio = "muted" | "unmuted" | "speaking";
-export interface AvatarProps<T extends UserType> {
-    user?: T;
-    size?: AvatarSize;
-    className?: string;
-    audio?: AvatarAudio;
-    loading?: boolean;
-}

package/dist-lib/src/components/atoms/avatar/utils.d.ts

@@ -1,13 +0,0 @@
-import { ClassValue } from 'class-variance-authority/types';
-import { AvatarAudio, AvatarSize, UserType } from './types';
-import { AtomSize } from '../types';
-export declare function initialsFrom(user: string | UserType | undefined): string | undefined;
-export declare const avatarIsSpeakingClass = "ring-background size-10 ring-2 transition-transform duration-500 group-hover/avatar:scale-95";
-export declare const ringClasses: Record<NonNullable<AvatarAudio>, ClassValue>;
-export declare const sizeClasses: Record<AvatarSize, string>;
-export declare const loaderSizes: Record<AvatarSize, AtomSize>;
-export declare const statusClasses: {
-    online: string;
-    idle: string;
-    offline: string;
-};

package/dist-lib/src/components/atoms/background/texture.d.ts

@@ -1,2 +0,0 @@
-import { TextureProps } from './type';
-export declare function Texture({ variant, opacity, className, children, }: TextureProps): import("react").JSX.Element;

package/dist-lib/src/components/atoms/background/type.d.ts

@@ -1,7 +0,0 @@
-export type TextureVariant = "fabric" | "paper" | "none";
-export interface TextureProps {
-    variant?: TextureVariant;
-    opacity?: number;
-    className?: string;
-    children?: React.ReactNode;
-}

package/dist-lib/src/components/atoms/background/utils.d.ts

@@ -1,4 +0,0 @@
-import { TextureVariant } from './type';
-export declare const textureMap: Record<Exclude<TextureVariant, "none">, string>;
-export declare const linearGradient = "bg-linear-to-t from-background from-10% to-transparent to-40% dark:from-10% dark:to-background/30 dark:to-50%";
-export declare const verticalFadeGradient: (color: string, spread?: number) => string;

package/dist-lib/src/components/atoms/bubble/actions.d.ts

@@ -1,7 +0,0 @@
-import { BubbleActionsProps } from './types';
-import type * as React from "react";
-/**
- * Row of per-message actions (copy, retry, …). Hidden until the bubble is
- * hovered or an action has focus; compose with `Button size="icon-xs"`.
- */
-export declare function BubbleActions({ className, "aria-label": ariaLabel, ...props }: BubbleActionsProps): React.ReactElement;

package/dist-lib/src/components/atoms/bubble/context.d.ts

@@ -1,4 +0,0 @@
-import { BubbleVariant } from './types';
-export declare const BubbleContext: import('react').Context<BubbleVariant>;
-/** Variant of the closest `Bubble` ancestor; used by the sub-components. */
-export declare function useBubbleVariant(): BubbleVariant;

package/dist-lib/src/components/atoms/bubble/default.d.ts

@@ -1,3 +0,0 @@
-import { BubbleProps } from './types';
-import type * as React from "react";
-export declare function Bubble({ variant, continued, className, children, ...props }: BubbleProps): React.ReactElement;

package/dist-lib/src/components/atoms/bubble/header.d.ts

@@ -1,8 +0,0 @@
-import { BubbleHeaderProps } from './types';
-import type * as React from "react";
-/**
- * Author row above a message: avatar, name, time and an optional role badge.
- * The sender variant mirrors the order so the row reads inward from the
- * thread's edge, the same way its bubble does.
- */
-export declare function BubbleHeader({ className, children, ...props }: BubbleHeaderProps): React.ReactElement;

package/dist-lib/src/components/atoms/bubble/index.d.ts

@@ -1,16 +0,0 @@
-import { Bubble as BubbleRoot } from './default';
-import { useBubbleVariant } from './context';
-import { BubbleActions } from './actions';
-import { BubbleHeader } from './header';
-import { BubbleMessage } from './message';
-import { Reference } from '../reference';
-import { BubbleReactionChip, BubbleReactions } from './reactions';
-export declare const Bubble: typeof BubbleRoot & {
-    Header: typeof BubbleHeader;
-    Message: typeof BubbleMessage;
-    Reactions: typeof BubbleReactions;
-    Reaction: typeof BubbleReactionChip;
-    Actions: typeof BubbleActions;
-};
-export { BubbleActions, BubbleHeader, BubbleMessage, BubbleReactionChip, BubbleReactions, Reference, useBubbleVariant, };
-export type { BubbleActionsProps, BubblePickedEmoji, BubbleHeaderProps, BubbleMessageProps, BubbleReactionChipProps, BubbleProps, BubbleReaction, BubbleReactionsProps, BubbleVariant } from './types';

package/dist-lib/src/components/atoms/bubble/message.d.ts

@@ -1,3 +0,0 @@
-import { BubbleMessageProps } from './types';
-import type * as React from "react";
-export declare function BubbleMessage({ className, ...props }: BubbleMessageProps): React.ReactElement;

package/dist-lib/src/components/atoms/bubble/reactions.d.ts

@@ -1,14 +0,0 @@
-import { BubbleReactionsProps, BubbleReactionChipProps, BubbleReactionsButtonProps } from './types';
-import type * as React from "react";
-/**
- * One emoji + count inside the pill. Pressing it springs the emoji, and a
- * count change slides the old number out as the new one drops in.
- */
-export declare function BubbleReactionChip({ reaction, index, onToggle, className, ...props }: BubbleReactionChipProps): React.ReactElement;
-export declare function BubbleReactionsButton({ className, onClick, onEmojiSelect }: BubbleReactionsButtonProps): React.ReactElement;
-/**
- * Glass reaction pill that hangs off the bubble's bottom trailing corner.
- * Pass `reactions` for the standard chips, or children for a custom row —
- * both share the pill.
- */
-export declare function BubbleReactions({ reactions, onToggle, onEmojiSelect, className, children, ...props }: BubbleReactionsProps): React.ReactElement;

package/dist-lib/src/components/atoms/bubble/types.d.ts

@@ -1,59 +0,0 @@
-import { HTMLMotionProps } from 'motion/react';
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
-/**
- * Who the bubble belongs to:
- * - "sender"    — the current user's outgoing message (right-aligned, inverted)
- * - "recipient" — an incoming message from another person (left-aligned, muted)
- * - "ai"        — generated output (left-aligned, chrome-less prose)
- */
-export type BubbleVariant = "ai" | "sender" | "recipient";
-export interface BubbleProps extends ComponentPropsWithoutRef<"div"> {
-    variant?: BubbleVariant;
-    /**
-     * A follow-up in a run of messages from the same author: tucks under the
-     * previous bubble. Render `Bubble.Header` on the first of the run only.
-     */
-    continued?: boolean;
-}
-export type BubbleMessageProps = ComponentPropsWithoutRef<"div">;
-export type BubbleHeaderProps = ComponentPropsWithoutRef<"div">;
-export interface BubbleReaction {
-    /** Stable key; falls back to the label/emoji when omitted. */
-    id?: string;
-    emoji: ReactNode | string;
-    count?: number;
-    /** Whether the current user has this reaction. */
-    reacted?: boolean;
-    /** Accessible name, e.g. "thumbs up". Required when emoji is not a string. */
-    label?: string;
-}
-/** An emoji chosen from the picker. Mirrors frimousse's payload so the
- *  library never re-exports a dependency's type on its public surface. */
-export interface BubblePickedEmoji {
-    emoji: string;
-    label: string;
-}
-export interface BubbleReactionsProps extends Omit<ComponentPropsWithoutRef<"div">, "onToggle"> {
-    reactions?: BubbleReaction[];
-    onToggle?: (reaction: BubbleReaction, index: number) => void;
-    /** Fires when an emoji is picked from the add-reaction popover. */
-    onEmojiSelect?: (emoji: BubblePickedEmoji) => void;
-}
-export type BubbleActionsProps = ComponentPropsWithoutRef<"div">;
-export interface BubbleReactionChipProps extends Omit<HTMLMotionProps<"button">, "onToggle" | "children"> {
-    reaction: BubbleReaction;
-    index: number;
-    onToggle?: (reaction: BubbleReaction, index: number) => void;
-}
-export type BubbleReactionsButtonProps = Omit<HTMLMotionProps<"button">, "onToggle" | "children" | "onClick"> & {
-    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-    /** Fires when an emoji is picked from the popover. */
-    onEmojiSelect?: (emoji: BubblePickedEmoji) => void;
-};
-/**
- * Only what the chip actually forwards. It renders through `Button`, which is
- * either a `<button>` or — with an href — an `<a>`, so the full anchor prop
- * set cannot be honoured (and `type` means two different things across the
- * two elements). Declaring the anchor set wholesale only advertised props the
- * chip silently dropped.
- */ 

package/dist-lib/src/components/atoms/bubble/utils.d.ts

@@ -1,13 +0,0 @@
-import { ClassValue } from 'clsx';
-import { BubbleReaction, BubbleVariant } from './types';
-/** Returns a stable key for a reaction, falling back to the emoji label if no ID is provided. */
-export declare function reactionKey(reaction: BubbleReaction, index: number): string;
-/** Root alignment: outgoing hugs the right edge, everything else the left. */
-export declare const twBubbleAlignClasses: Record<BubbleVariant, ClassValue>;
-/**
- * The inner column shrink-wraps the message so the header, reaction pill
- * and action row all align to the bubble's own edges rather than the
- * thread's. Generated output stays full-bleed.
- */
-export declare const twBubbleColumnClasses: Record<BubbleVariant, ClassValue>;
-export declare const twBubbleMessageClasses: Record<BubbleVariant, ClassValue>;

package/dist-lib/src/components/atoms/index.d.ts

@@ -1,15 +0,0 @@
-export * from './bubble';
-export { SelectChip, SourceChip as FlowchartSourceChip } from './chip';
-export * from './text';
-export * from './background';
-export * from './avatar';
-export * from './loader';
-export * from './reference';
-export type { ReferenceProps } from './types';
-export { HighlightPopover, TextClickPopover, TextSelection, } from './text-selection';
-export { initialSelectionState, resetSelectionAtom, selectionAtom, setCurrentSelectionAtom, setPopoverPositionAtom, setSelectionAtom, setSelectionPopoverAtom, setSelectionPositionAtom, setShowPopoverAtom, updateSelectionAtom, } from './text-selection/selection-atom';
-export { useSelection } from './text-selection/use-selection';
-export type { HighlightPopoverPrimitiveProps, HighlightPopoverProps, SelectionPosition, SelectionPopoverComponent, SelectionRenderProps, SelectionState, SelectionStateUpdate, TextClickPopoverProps, TextPopoverRenderProps, TextSelectionProps, } from './text-selection/types';
-export type { UseSelectionOptions, UseSelectionResult, } from './text-selection/types';
-export type { AvatarAudio, AvatarProps, AvatarSize, AvatarStatus, UserType, } from './avatar/types';
-export type { ILoaderProps, TLoaderType } from './loader';

package/dist-lib/src/components/atoms/loader.d.ts

@@ -1,8 +0,0 @@
-import { AtomSize } from './types';
-export type TLoaderType = "spinner" | "dots";
-export interface ILoaderProps {
-    type?: TLoaderType;
-    className?: string;
-    size?: AtomSize;
-}
-export declare function Loader({ type, className, size }: ILoaderProps): import("react").JSX.Element;

package/dist-lib/src/components/atoms/reference.d.ts

@@ -1,7 +0,0 @@
-import { ReferenceProps } from './types';
-import type * as React from "react";
-/**
- * "Reference 1 ↗" — a translucent tag pointing at the node, passage or
- * source a suggestion is grounded in. Follows the card it sits in.
- */
-export declare function Reference({ href, onClick, className, children, preview, ...props }: ReferenceProps): React.ReactElement;