@exegia/corpora-ui 1.0.0 → 3.0.0

package/src/components/atoms/bubble/reactions.tsx

@@ -7,9 +7,9 @@ import { EASE_IN_OUT, SPRING_PRESS, SPRING_SWAP } from "@/lib/ease"
 import { useBubbleVariant } from "./context"
 import { MorphIcon } from "morphicons/react";
 import type {
-  BubbleReactionsProps,
-  BubbleReactionChipProps,
-  BubbleReactionsButtonProps,
+  IBubbleReactionsProps,
+  IBubbleReactionChipProps,
+  TBubbleReactionsButtonProps,
 } from "./types"
 import { reactionKey } from "./utils"
 import { GlassContainer } from "@/components/ui/glasscn/glass-container"
@@ -32,7 +32,7 @@ export function BubbleReactionChip({
   onToggle,
   className,
   ...props
-}: BubbleReactionChipProps): React.ReactElement {
+}: IBubbleReactionChipProps): React.ReactElement {
   const reduceMotion = useReducedMotion()
   const showCount = reaction.count != null && reaction.count > 0
 
@@ -41,7 +41,7 @@ export function BubbleReactionChip({
       aria-label={reaction.label}
       aria-pressed={reaction.reacted ?? false}
       className={cn(
-        "inline-flex cursor-pointer items-center gap-1 rounded-lg px-1 py-1.5 font-bold text-neutral-600 transition-colors duration-150 ease-smooth-out outline-none hover:bg-black/6 focus-visible:ring-0 focus-visible:ring-ring dark:text-neutral-300 dark:hover:bg-white/8",
+        "inline-flex cursor-pointer items-center gap-1 rounded-lg px-1 py-1.5 font-bold text-neutral-600 transition-[colors,scale] duration-150 ease-smooth-out outline-none hover:scale-105 focus-visible:ring-0 focus-visible:ring-ring dark:text-neutral-300",
         reaction.reacted && "text-foreground",
         className
       )}
@@ -93,7 +93,7 @@ export function BubbleReactionsButton({
   className,
   onClick,
   onEmojiSelect
-}: BubbleReactionsButtonProps): React.ReactElement {
+}: TBubbleReactionsButtonProps): React.ReactElement {
 
   const [open, setOpen] = useState(false)
   return (
@@ -103,7 +103,7 @@ export function BubbleReactionsButton({
           <button
             aria-label="Add reaction"
             className={cn(
-              "inline-flex cursor-pointer items-center gap-1 rounded-lg px-1 py-2 font-bold text-neutral-600 duration-150 ease-smooth-out outline-none hover:bg-black/6 focus-visible:ring-0 dark:text-neutral-300 dark:hover:bg-white/8",
+              "inline-flex cursor-pointer items-center gap-1 rounded-lg px-1 py-2 font-bold text-neutral-600 duration-150 ease-smooth-out outline-none hover:scale-105 focus-visible:ring-0 dark:text-neutral-300",
               className
             )}
             data-slot="bubble-reaction-button"
@@ -153,22 +153,19 @@ export function BubbleReactions({
   className,
   children,
   ...props
-}: BubbleReactionsProps): React.ReactElement {
+}: IBubbleReactionsProps): React.ReactElement {
   const variant = useBubbleVariant()
   return (
     <div
       className={cn(
-        "absolute -bottom-5 z-[1] flex max-h-8 w-fit flex-1 items-center",
+        "absolute -bottom-5 z-1 flex max-h-8 w-fit flex-1 items-center",
         variant === "sender" ? "left-4" : "right-4",
         className
       )}
     >
       <GlassContainer
-        glassVariant="frosted"
-        refraction={3}
-        bezel={12}
-        blur={5}
-        saturation={2}
+        glassVariant="liquid"
+        optics={{ strength: 0.5, depth: 0.5, bendWidth: 0.4, frost: 1.5 }}
         className={cn(
           "inline-flex h-full w-fit items-center rounded-xl",
           className

package/src/components/atoms/bubble/types.ts

@@ -7,10 +7,10 @@ import type { ComponentPropsWithoutRef, ReactNode } from "react"
  * - "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 type TBubbleVariant = "ai" | "sender" | "recipient"
 
-export interface BubbleProps extends ComponentPropsWithoutRef<"div"> {
-  variant?: BubbleVariant
+export interface IBubbleProps extends ComponentPropsWithoutRef<"div"> {
+  variant?: TBubbleVariant
   /**
    * 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.
@@ -18,11 +18,14 @@ export interface BubbleProps extends ComponentPropsWithoutRef<"div"> {
   continued?: boolean
 }
 
-export type BubbleMessageProps = ComponentPropsWithoutRef<"div">
+export type TBubbleMessageProps = ComponentPropsWithoutRef<"div"> & {
+  /** No bubble surface. Automatically true for attachment-only children; set explicitly for custom wrappers. */
+  unstyled?: boolean
+}
 
-export type BubbleHeaderProps = ComponentPropsWithoutRef<"div">
+export type TBubbleHeaderProps = ComponentPropsWithoutRef<"div">
 
-export interface BubbleReaction {
+export interface IBubbleReaction {
   /** Stable key; falls back to the label/emoji when omitted. */
   id?: string
   emoji: ReactNode | string
@@ -35,39 +38,39 @@ export interface BubbleReaction {
 
 /** 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 {
+export interface IBubblePickedEmoji {
   emoji: string
   label: string
 }
 
-export interface BubbleReactionsProps extends Omit<
+export interface IBubbleReactionsProps extends Omit<
   ComponentPropsWithoutRef<"div">,
   "onToggle"
 > {
-  reactions?: BubbleReaction[]
-  onToggle?: (reaction: BubbleReaction, index: number) => void
+  reactions?: IBubbleReaction[]
+  onToggle?: (reaction: IBubbleReaction, index: number) => void
   /** Fires when an emoji is picked from the add-reaction popover. */
-  onEmojiSelect?: (emoji: BubblePickedEmoji) => void
+  onEmojiSelect?: (emoji: IBubblePickedEmoji) => void
 }
 
-export type BubbleActionsProps = ComponentPropsWithoutRef<"div">
+export type TBubbleActionsProps = ComponentPropsWithoutRef<"div">
 
-export interface BubbleReactionChipProps extends Omit<
+export interface IBubbleReactionChipProps extends Omit<
   HTMLMotionProps<"button">,
   "onToggle" | "children"
 > {
-  reaction: BubbleReaction
+  reaction: IBubbleReaction
   index: number
-  onToggle?: (reaction: BubbleReaction, index: number) => void
+  onToggle?: (reaction: IBubbleReaction, index: number) => void
 }
 
-export type BubbleReactionsButtonProps = Omit<
+export type TBubbleReactionsButtonProps = 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
+  onEmojiSelect?: (emoji: IBubblePickedEmoji) => void
 }
 
 /**
@@ -76,4 +79,4 @@ export type BubbleReactionsButtonProps = Omit<
  * 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/src/components/atoms/bubble/utils.ts

@@ -1,25 +1,25 @@
 import type { ClassValue } from "clsx"
-import type { BubbleReaction, BubbleVariant } from "./types"
+import type { IBubbleReaction, TBubbleVariant } from "./types"
 import { cn } from "@/lib/utils"
 
 /** Returns a stable key for a reaction, falling back to the emoji label if no ID is provided. */
-export function reactionKey(reaction: BubbleReaction, index: number): string {
+export function reactionKey(reaction: IBubbleReaction, index: number): string {
   return reaction.id ?? `${reaction.label ?? String(reaction.emoji)}-${index}`
 }
 
 /** Root alignment: outgoing hugs the right edge, everything else the left. */
-export const twBubbleAlignClasses: Record<BubbleVariant, ClassValue> = {
+export const twBubbleAlignClasses: Record<TBubbleVariant, ClassValue> = {
   sender: "items-end",
   recipient: "items-start",
   ai: "items-start",
 }
 
 /**
- * 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.
+ * The inner column shrink-wraps the message, reactions and actions.
+ * Headers offset this inset to reach the thread edge. Generated output
+ * stays full-bleed.
  */
-export const twBubbleColumnClasses: Record<BubbleVariant, ClassValue> = {
+export const twBubbleColumnClasses: Record<TBubbleVariant, ClassValue> = {
   sender: "items-end max-w-[80%] min-w-0 mr-4",
   recipient: "items-start max-w-[80%] min-w-0 ml-4",
   ai: "w-full items-stretch min-w-0",
@@ -36,11 +36,11 @@ export const twBubbleColumnClasses: Record<BubbleVariant, ClassValue> = {
  */
 
 const defaultClasses = "w-fit  rounded-full text-xs leading-4 font-medium relative"
-export const twBubbleMessageClasses: Record<BubbleVariant, ClassValue> = {
+export const twBubbleMessageClasses: Record<TBubbleVariant, ClassValue> = {
   sender: cn(defaultClasses,
-    "inset-shadow-lit inset-shadow-dim inset-shadow-dim-b-1 inset-shadow-dim-r inset-shadow-lit-l-1 inset-shadow-lit-t-1 inset-shadow-blur-1 rounded-br-[8px] group-has-[+[data-continued]]/bubble:rounded-br-full has-[[data-slot=attachment]]:rounded-b-md has-[[data-slot=attachment]]:rounded-t-md bg-indigo-700 dark:bg-neutral-100 text-background chat-bubble bubble-sender text-left pl-6 pr-4 py-3"),
+    "bezel-lit-t-2 bezel-lit-blur-3 bezel-lit/14 bezel-dim-b-2 bezel-dim-blur-3 bezel-dim/78 dark:bezel-lit-blur-2 dark:bezel-lit/57 dark:bezel-dim/11 rounded-br-[8px] group-has-[+[data-continued]]/bubble:rounded-br-full has-[[data-slot=attachment]]:rounded-b-md has-[[data-slot=attachment]]:rounded-t-md bg-indigo-700 dark:bg-neutral-100 text-background chat-bubble bubble-sender text-left pl-6 pr-4 py-3"),
   recipient: cn(defaultClasses,
-    "inset-shadow-lit inset-shadow-dim/20 dark:inset-shadow-lit/20 dark:inset-shadow-dim/50 inset-shadow-dim-b-1 inset-shadow-dim-r inset-shadow-lit-t-1 inset-shadow-lit-l-1 inset-shadow-blur-1 rounded-bl-[8px] group-has-[+[data-continued]]/bubble:rounded-bl-full has-[[data-slot=attachment]]:rounded-b-md has-[[data-slot=attachment]]:rounded-t-md bg-neutral-100 dark:bg-neutral-800 text-foreground chat-bubble bubble-recipient text-right pl-4 pr-6 py-3"),
+    "bezel-lit-t-2 bezel-lit-blur-2 bezel-lit/57 bezel-dim-b-2 bezel-dim-blur-3 bezel-dim/11 dark:bezel-lit-blur-3 dark:bezel-lit/14 dark:bezel-dim/78 rounded-bl-[8px] group-has-[+[data-continued]]/bubble:rounded-bl-full has-[[data-slot=attachment]]:rounded-b-md has-[[data-slot=attachment]]:rounded-t-md bg-neutral-100 dark:bg-neutral-800 text-foreground chat-bubble bubble-recipient text-right pl-4 pr-6 py-3"),
   ai: cn(defaultClasses,
     "text-sm leading-5 my-1 text-foreground w-full"),
 }

package/src/components/atoms/field.tsx

@@ -0,0 +1,43 @@
+import { Field, FieldLabel, FieldDescription, FieldError } from "@/components/ui/field";
+import type { IInputFieldProps, TInputFieldSize } from "./types";
+import { Input } from "@/components/ui/input";
+
+const inputFieldSizeClasses: TInputFieldSize = {
+  label: {
+    sm: "text-sm",
+    default: "text-base",
+    lg: "text-lg",
+  },
+  input: {
+    sm: "w-64",
+    default: "w-full",
+    lg: "w-96"
+  },
+  description: {
+    sm: "w-64",
+    default: "w-full",
+    lg: "w-96",
+  },
+  icon: {
+    sm: "w-64",
+    default: "w-full",
+    lg: "w-96"
+  },
+};
+
+export function InputField({ invalid, label, description, error, size = "default", ...props }: IInputFieldProps) {
+
+  const renderDescription = () => {
+    if (!description || !error) return
+    if (error) return <FieldError match={Boolean(invalid)}>{error}</FieldError>
+    return <FieldDescription className={inputFieldSizeClasses.description[size]}>{description}</FieldDescription>
+  }
+
+  return (
+    <Field>
+      <FieldLabel className={inputFieldSizeClasses.label[size]}>{label}</FieldLabel>
+      <Input {...props} className={inputFieldSizeClasses.input[size]} />
+      {renderDescription()}
+    </Field>
+  );
+}

package/src/components/atoms/index.ts

@@ -6,8 +6,6 @@ export * from "./avatar"
 export * from "./loader"
 export * from "./reference"
 
-export type { ReferenceProps } from "./types"
-
 export {
   HighlightPopover,
   TextClickPopover,
@@ -26,27 +24,3 @@ export {
   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/src/components/atoms/loader.tsx

@@ -1,17 +1,8 @@
 import { cn } from "@/lib/utils";
 import { Spinner } from "@/components/ui/spinner";
-import type { AtomSize } from "./types";
+import type { TAtomSize, ILoaderProps } from "./types";
 
-
-export type TLoaderType = "spinner" | "dots";
-export interface ILoaderProps {
-  type?: TLoaderType;
-  className?: string;
-  size?: AtomSize;
-}
-
-
-const sizeMap: Record<AtomSize, string> = {
+const sizeMap: Record<TAtomSize, string> = {
   xs: 'w-0.5 h-0.5',
   sm: 'w-1 h-1',
   default: 'w-2 h-2',

package/src/components/atoms/reference.tsx

@@ -3,7 +3,7 @@
 import { Link2 } from "lucide-react"
 import type * as React from "react"
 import { cn } from "@/lib/utils"
-import type { ReferenceProps } from "./types";
+import type { IReferenceProps } from "./types";
 import { Button } from "@/components/ui/button";
 import { PreviewCard, PreviewCardPopup, PreviewCardTrigger } from "@/components/ui/preview-card"
 
@@ -18,7 +18,7 @@ export function Reference({
   children,
   preview,
   ...props
-}: ReferenceProps): React.ReactElement {
+}: IReferenceProps): React.ReactElement {
 
   // The rest is forwarded: `ReferenceProps` is anchor props, so `target`,
   // `rel`, `aria-label` and friends type-check and have to land somewhere.

package/src/components/atoms/text/default.tsx

@@ -1,8 +1,8 @@
 import { createElement } from "react"
 import { cn } from "@/lib/utils"
-import type { TextProps, TextSize, TextVariant } from "./types"
+import type { TTextProps, TTextSize, TTextVariant } from "./types"
 
-const variantClasses: Record<TextVariant, string> = {
+const variantClasses: Record<TTextVariant, string> = {
   default: "text-foreground",
   heading: "font-heading text-2xl font-semibold tracking-tight text-foreground",
   paragraph: "leading-7 text-foreground",
@@ -10,13 +10,13 @@ const variantClasses: Record<TextVariant, string> = {
   subscript: "align-sub text-xs text-muted-foreground",
 }
 
-const sizeClasses: Record<Exclude<TextSize, number>, string> = {
+const sizeClasses: Record<Exclude<TTextSize, number>, string> = {
   small: "text-sm",
   medium: "text-base",
   large: "text-lg",
 }
 
-const defaultTags: Record<TextVariant, keyof HTMLElementTagNameMap> = {
+const defaultTags: Record<TTextVariant, keyof HTMLElementTagNameMap> = {
   default: "span",
   heading: "h2",
   paragraph: "p",
@@ -33,7 +33,7 @@ export function Text({
   style,
   type = "default",
   ...props
-}: TextProps) {
+}: TTextProps) {
   const tag = defaultTags[type]
   const fontSize = typeof size === "number" ? `${size}px` : undefined
   const selectionValue =

package/src/components/atoms/text/heading.tsx

@@ -1,12 +1,9 @@
 import { cn } from "@/lib/utils"
 import { TextSelection } from "../text-selection"
-import type { TextSelectionProps } from "../text-selection"
 import { Text } from "./default"
-import type { TextProps } from "./types"
+import type { THeadingProps } from "./types"
 import { twClasses } from "./utils";
 
-export type HeadingProps = Omit<TextProps, "type"> &
-  Omit<TextSelectionProps, "children" | "className">
 
 export function Heading({
   children,
@@ -27,7 +24,7 @@ export function Heading({
   alignment,
   minSelectionLength,
   ...textProps
-}: HeadingProps) {
+}: THeadingProps) {
   return (
     <TextSelection
       alignment={alignment}

package/src/components/atoms/text/index.ts

@@ -3,10 +3,14 @@ import { Heading } from "./heading"
 import { Paragraph } from "./paragraph"
 import { Span } from "./span"
 import { Label } from "./label"
-export type { HeadingProps } from "./heading"
-export type { ParagraphProps } from "./paragraph"
-export type { SpanProps } from "./span"
-export type { TextProps, TextSize, TextVariant } from "./types"
+export type {
+  THeadingProps,
+  TParagraphProps,
+  TSpanProps,
+  TTextProps,
+  TTextSize,
+  TTextVariant,
+} from "./types"
 
 export const Text = {
   /** The polymorphic base the presets below are built on — the only member

package/src/components/atoms/text/label.tsx

@@ -1,7 +1,7 @@
-import type { LabelProps } from "./types"
+import type { TLabelProps } from "./types"
 import { cn } from "@/lib/utils"
 import { twLabelClasses } from "./utils"
-export function Label({ children, level = "title", className }: LabelProps) {
+export function Label({ children, level = "title", className }: TLabelProps) {
   return (
     <div
       className={cn(

package/src/components/atoms/text/paragraph.tsx

@@ -1,12 +1,9 @@
 import { TextSelection } from "../text-selection"
-import type { TextSelectionProps } from "../text-selection"
 import { Text } from "./default"
-import type { TextProps } from "./types"
+import type { TParagraphProps } from "./types"
 import { cn } from "@/lib/utils"
 import { twClasses } from "./utils"
 
-export type ParagraphProps = Omit<TextProps, "type"> &
-  Omit<TextSelectionProps, "children" | "className">
 
 export function Paragraph({
   children,
@@ -27,7 +24,7 @@ export function Paragraph({
   className,
   minSelectionLength,
   ...textProps
-}: ParagraphProps) {
+}: TParagraphProps) {
   return (
     <TextSelection
       alignment={alignment}

package/src/components/atoms/text/span.tsx

@@ -1,10 +1,9 @@
-import type { TextProps } from "./types"
+import type { TSpanProps } from "./types"
 import { Text } from "./default"
 import { cn } from "@/lib/utils"
 
-export type SpanProps = Omit<TextProps, "type">
 
-export function Span(props: SpanProps) {
+export function Span(props: TSpanProps) {
   return (
     <Text
       {...props}

package/src/components/atoms/text/types.ts

@@ -1,10 +1,11 @@
 import type { CSSProperties, HTMLAttributes, ReactNode } from "react"
+import type { ITextSelectionProps } from "../text-selection"
 
-export type TextVariant =
+export type TTextVariant =
   "default" | "heading" | "paragraph" | "link" | "subscript"
-export type TextSize = "small" | "medium" | "large" | number
+export type TTextSize = "small" | "medium" | "large" | number
 
-export type TextProps = Omit<
+export type TTextProps = Omit<
   HTMLAttributes<HTMLElement>,
   "children" | "style"
 > & {
@@ -12,20 +13,29 @@ export type TextProps = Omit<
   children?: ReactNode
   className?: string
   /** Named sizes use the type scale; a number is interpreted as pixels. */
-  size?: TextSize
-  type?: TextVariant
+  size?: TTextSize
+  type?: TTextVariant
   href?: string
   /** Marks a reader selection. A string is also exposed as data-selection. */
   selection?: string | boolean
   style?: CSSProperties
 }
 
-export type LabelLevel = "heading" | "title" | "caption" | "subtitle"
+export type THeadingProps = Omit<TTextProps, "type"> &
+  Omit<ITextSelectionProps, "children" | "className">
 
-export type LabelProps = {
+
+export type TSpanProps = Omit<TTextProps, "type">
+export type TParagraphProps = Omit<TTextProps, "type"> &
+  Omit<ITextSelectionProps, "children" | "className">
+
+
+export type TLabelLevel = "heading" | "title" | "caption" | "subtitle"
+
+export type TLabelProps = {
   children: ReactNode
   className?: string
   /** Type scale of the label. Defaults to "title". */
-  level?: LabelLevel
+  level?: TLabelLevel
   id?: string
 }

package/src/components/atoms/text/utils.ts

@@ -1,12 +1,12 @@
 import type { ClassValue } from "clsx"
-import type { LabelProps } from "./types"
+import type { TLabelProps } from "./types"
 
 export const twClasses: Record<string, ClassValue> = {
   default: "selection:text-amber-500 dark:selection:text-amber-400",
 }
 
 export const twLabelClasses: Record<
-  NonNullable<LabelProps["level"]>,
+  NonNullable<TLabelProps["level"]>,
   Element["className"]
 > = {
   title: "text-lg text-neutral-500",

package/src/components/atoms/text-selection/click-popover.tsx

@@ -5,7 +5,7 @@ import type { ReactElement } from "react"
 import { Popover, PopoverPopup, PopoverTrigger } from "@/components/ui/popover"
 import { cn } from "@/lib/utils"
 import { Text } from "../text/default"
-import type { TextClickPopoverProps, TextPopoverRenderProps } from "./types"
+import type { ITextClickPopoverProps, ITextPopoverRenderProps } from "./types"
 
 export function TextClickPopover({
   children,
@@ -17,7 +17,7 @@ export function TextClickPopover({
   onOpenChange,
   className,
   ...textProps
-}: TextClickPopoverProps): ReactElement {
+}: ITextClickPopoverProps): ReactElement {
   const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen)
   const open = controlledOpen ?? uncontrolledOpen
   const setOpen = (next: boolean) => {
@@ -25,7 +25,7 @@ export function TextClickPopover({
     onOpenChange?.(next)
   }
 
-  const renderProps: TextPopoverRenderProps = {
+  const renderProps: ITextPopoverRenderProps = {
     open,
     setOpen,
     close: () => setOpen(false),

package/src/components/atoms/text-selection/index.ts

@@ -15,16 +15,16 @@ export {
 } from "./selection-atom"
 export { useSelection } from "./use-selection"
 export type {
-  HighlightPopoverPrimitiveProps,
-  HighlightPopoverProps,
-  SelectionPosition,
-  SelectionPopoverComponent,
-  SelectionRenderProps,
-  SelectionState,
-  SelectionStateUpdate,
-  TextClickPopoverProps,
-  TextPopoverRenderProps,
-  TextSelectionProps,
-  UseSelectionOptions,
-  UseSelectionResult,
+  THighlightPopoverPrimitiveProps,
+  IHighlightPopoverProps,
+  ISelectionPosition,
+  TSelectionPopoverComponent,
+  ISelectionRenderProps,
+  ISelectionState,
+  TSelectionStateUpdate,
+  ITextClickPopoverProps,
+  ITextPopoverRenderProps,
+  ITextSelectionProps,
+  IUseSelectionOptions,
+  IUseSelectionResult,
 } from "./types"

package/src/components/atoms/text-selection/popover.tsx

@@ -1,12 +1,14 @@
 "use client"
 
+import { GlassSurface } from "@/components/ui/glasscn/liquid-glass"
+
 import { useEffect } from "react"
 import type * as React from "react"
 import { useHighlightPopover } from "@omsimos/react-highlight-popover"
 import { Card, CardPanel } from "@/components/ui/card"
 import { cn } from "@/lib/utils"
 import { useSelection } from "./use-selection"
-import type { HighlightPopoverProps, SelectionRenderProps } from "./types"
+import type { IHighlightPopoverProps, ISelectionRenderProps } from "./types"
 
 export function HighlightPopover({
   children,
@@ -15,7 +17,7 @@ export function HighlightPopover({
   render,
   className,
   ...props
-}: HighlightPopoverProps): React.ReactElement {
+}: IHighlightPopoverProps): React.ReactElement {
   const primitive = useHighlightPopover()
   const selection = useSelection()
   const currentSelection =
@@ -56,7 +58,7 @@ export function HighlightPopover({
     stateSelection,
   ])
 
-  const renderProps: SelectionRenderProps = {
+  const renderProps: ISelectionRenderProps = {
     position,
     selection: currentSelection,
     selected,
@@ -88,12 +90,13 @@ export function HighlightPopover({
       {...props}
       {...componentContextProps}
       className={cn(
-        "max-w-52 rounded-md bg-white/50 shadow-lg inset-shadow-sm shadow-black/10 inset-shadow-popover backdrop-blur-md dark:bg-black/20",
+        "relative isolate max-w-52 rounded-md bg-transparent dark:bg-transparent",
         forwardedClassName,
         className
       )}
       data-selection-popover=""
     >
+      <GlassSurface glassVariant="frosted" />
       <CardPanel className="p-3">{content}</CardPanel>
     </Component>
   )