@exegia/corpora-ui 1.0.0 → 3.0.0

package/dist-lib/lib/attachment-content.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from 'react';
+/** Shared marker keeps the bubble atom independent of the composed attachment. */
+export declare const ATTACHMENT_CONTENT: unique symbol;
+export declare function containsOnlyAttachments(children: ReactNode): boolean;

package/dist-lib/lib/auth-accent.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Brand accents for the auth blocks.
+ *
+ * An accent is a set of custom properties set on the AuthCard root plus one
+ * class string applied to the card's primary action. Splitting it this way
+ * keeps the accent inheritable — anything else inside the card can opt into
+ * `var(--auth-accent)` without the shell knowing about it.
+ */
+/** Brand accents available to the auth blocks. */
+export type TAuthAccent = "corpora" | "exegia";
+/**
+ * Custom properties an accent contributes, set on the AuthCard root.
+ *
+ * The gradient lives in `--auth-accent-image` because `background-color` can't
+ * hold one; `--auth-accent` sits underneath as the solid that paints wherever
+ * the image is `none`. Foregrounds are fixed rather than themed — the accent
+ * itself is a constant, so its contrast pair has to be too (white on the
+ * corpora yellow fails badly).
+ */
+export declare const authAccentVars: Record<TAuthAccent, Record<string, string>>;
+/**
+ * Applied to the primary action inside an accented AuthCard, after the button
+ * cva output so tailwind-merge lets it win over `bg-primary`. The hover and
+ * pressed background entries are required: `hover:bg-primary/90` lives in a
+ * different modifier group from `bg-*` and would otherwise survive and repaint
+ * the button on hover.
+ *
+ * Hover uses `brightness` rather than a background tween because the button's
+ * `transition-property` list is shared with its press/size animations — adding
+ * `filter` to it means restating the whole list and its per-property
+ * durations. The trade is an instant hover change instead of a 150ms one.
+ */
+export declare const authAccentActionStyles = "border-transparent bg-[var(--auth-accent)] bg-[image:var(--auth-accent-image)] text-[var(--auth-accent-foreground)] shadow-none hover:bg-[var(--auth-accent)] hover:brightness-110 data-pressed:bg-[var(--auth-accent)] data-pressed:brightness-110 *:data-[slot=button-loading-indicator]:text-[var(--auth-accent-foreground)]";

package/dist-lib/lib/glass-variants.d.ts

@@ -0,0 +1,9 @@
+import { GlassOptics } from '@samasante/liquid-glass';
+export type TFrostGlassVariant = "clear" | "frosted" | "subtle" | "liquid" | "liquid-refract";
+export type TFrostGlassVariantProp = {
+    glassVariant?: TFrostGlassVariant;
+};
+export declare const liquidRefractStyles = "bg-transparent border-0 shadow-none";
+/** Tints only; refraction, frost, and edge lighting belong to the library. */
+export declare const glassVariantStyles: Record<TFrostGlassVariant, string>;
+export declare const glassVariantOptics: Record<TFrostGlassVariant, Partial<GlassOptics>>;

package/dist-lib/lib/keyed-atom.d.ts

@@ -0,0 +1,14 @@
+import { Getter, Setter } from 'jotai';
+export type TFamily<AtomType> = ((id: string) => AtomType) & {
+    remove: (id: string) => void;
+};
+export declare function createKeyedFamilies(feature: string): {
+    keyed: <AtomType>(create: (id: string) => AtomType) => TFamily<AtomType>;
+    stateFamily: <Value>(name: string, initialValue: Value) => TFamily<import('jotai').PrimitiveAtom<Value> & {
+        init: Value;
+    }>;
+    actionFamily: <Args extends unknown[]>(name: string, write: (get: Getter, set: Setter, id: string, ...args: Args) => void) => TFamily<import('jotai').WritableAtom<null, Args, void> & {
+        init: null;
+    }>;
+    removeInstance: (id: string) => void;
+};

package/dist-lib/lib/segmented-control.d.ts

@@ -0,0 +1,8 @@
+export type TSegmentedControlSize = "default" | "lg" | "sm" | "xs";
+export declare const segmentedControlItemSizeClassNames: Record<TSegmentedControlSize, string>;
+export declare const segmentedControlRootClassName = "relative z-0 flex w-fit items-center justify-center gap-0.5 rounded-lg bg-muted p-0.5";
+export declare const segmentedControlItemLayoutClassName = "gap-1.5 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0";
+export declare const segmentedControlItemVariants: (props?: ({
+    size?: TSegmentedControlSize | null | undefined;
+    state?: "checked" | "current" | "pressed" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist-lib/lib/specular.d.ts

@@ -0,0 +1,12 @@
+export declare const surfaces: {
+    readonly bezel: {
+        readonly layers: {
+            readonly lit: {
+                readonly color: "#fff";
+            };
+            readonly dim: {
+                readonly color: "#000";
+            };
+        };
+    };
+};

package/dist-lib/lib/state/__tests__/sound.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist-lib/lib/state/exegia-provider.d.ts

@@ -0,0 +1,51 @@
+import { useStore } from 'jotai';
+import { TExegiaStore } from './store';
+/**
+ * The library's one and only state provider.
+ *
+ * Mount it once at the app root. Every library state hook then works
+ * anywhere below it — there are no per-component providers to nest.
+ *
+ * One provider suffices because library state lives in module-level Jotai
+ * atom families keyed by an instance id, not in a context created per
+ * component. A new stateful component adds atoms to that module scope; it
+ * never adds a provider. Consumer code therefore stays exactly as it is as
+ * the library grows.
+ *
+ * Without this provider the hooks still run, which is the trap: Jotai falls
+ * back to its implicit default store, and that store is NOT `exegiaStore`,
+ * so imperative access would read a different store than the one the
+ * components render from. Mount the provider.
+ *
+ * ```tsx
+ * export function App() {
+ *   return (
+ *     <ExegiaProvider sound>
+ *       <Routes />
+ *     </ExegiaProvider>
+ *   )
+ * }
+ * ```
+ */
+import * as React from "react";
+/** Options forwarded to the library's `ThemeProvider`. */
+export interface IExegiaThemeOptions {
+    defaultTheme?: "dark" | "light" | "system";
+    storageKey?: string;
+    disableTransitionOnChange?: boolean;
+}
+export interface IExegiaProviderProps {
+    children: React.ReactNode;
+    /** Store to mount. Defaults to the library's `exegiaStore`. */
+    store?: TExegiaStore;
+    /** Opt into interaction sound. Off unless the app asks for it. */
+    sound?: boolean;
+    /** Mount `ThemeProvider` with these options. Omit it and none is mounted —
+     * it reads `localStorage` in its state initializer, so an unconditional
+     * mount would break SSR consumers, and `useTheme` already throws without
+     * one. */
+    theme?: IExegiaThemeOptions;
+}
+export declare function ExegiaProvider({ children, store, sound, theme, }: IExegiaProviderProps): React.ReactElement;
+/** The store mounted by the nearest `ExegiaProvider` above the caller. */
+export declare const useExegiaStore: typeof useStore;

package/dist-lib/lib/state/index.d.ts

@@ -0,0 +1,4 @@
+export { ExegiaProvider, useExegiaStore } from './exegia-provider';
+export type { IExegiaProviderProps, IExegiaThemeOptions } from './exegia-provider';
+export { exegiaStore } from './store';
+export type { TExegiaStore } from './store';

package/dist-lib/lib/state/store.d.ts

@@ -0,0 +1,17 @@
+import { createStore } from 'jotai';
+/** A Jotai store as created by `createStore()`. */
+export type TExegiaStore = ReturnType<typeof createStore>;
+/**
+ * The library's default store — the one `ExegiaProvider` mounts unless it is
+ * handed another. Exported so non-React code (a router guard, a command
+ * palette, a test) can read and write library state imperatively:
+ *
+ * ```ts
+ * exegiaStore.get(treeExpandedIdsAtom("app-nav"))
+ * ```
+ *
+ * A single module-level store is wrong for SSR — state would leak between
+ * requests — so render-per-request apps pass a fresh `createStore()` to
+ * `ExegiaProvider` instead.
+ */
+export declare const exegiaStore: TExegiaStore;

package/dist-lib/lib/use-motion-panel.d.ts

@@ -0,0 +1,9 @@
+import { Orientation, PanelOptions, Size } from 'motion-panels';
+/** Attach Motion Panels to our existing surfaces without adding styled wrappers. */
+export declare function useMotionPanel(options: PanelOptions<Size> & {
+    orientation?: Orientation;
+    enabled?: boolean;
+}): {
+    panelRef: import('react').RefObject<HTMLElement | null>;
+    gripRef: import('react').RefObject<HTMLDivElement | null>;
+};

package/dist-lib/lib/utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exegia/corpora-ui",
-  "version": "1.0.0",
+  "version": "3.0.0",
   "description": "shadcn-ready React UI library for the corpora manuscript-research apps.",
   "license": "MIT",
   "repository": {
@@ -30,6 +30,7 @@
     "src/assets/css/shadows.css",
     "src/assets/css/chat.css",
     "src/tailwind-inset-shadow.js",
+    "src/specular.js",
     "src/index.ts"
   ],
   "scripts": {
@@ -50,13 +51,16 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.8.0",
+    "@exegia/specular": "^0.1.2",
     "@fumadocs/story": "^1.3.0",
     "@omsimos/react-highlight-popover": "^1.4.1",
     "@remixicon/react": "^4.9.0",
+    "@samasante/liquid-glass": "^0.1.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cn": "^0.2.6",
     "cuelume": "^0.2.2",
+    "echarts": "^6.1.0",
     "frimousse": "^0.3.0",
     "fumadocs-core": "^16.15.10",
     "fumadocs-mdx": "^15.4.0",
@@ -68,6 +72,7 @@
     "morphicons": "^1.7.1",
     "motion": "^13.2.0",
     "motion-icons-react": "^1.1.0",
+    "motion-panels": "^0.5.2",
     "react-markdown": "^10.1.0",
     "recharts": "^3.10.1",
     "tailwind-animations": "^1.0.2",

package/src/components/atoms/avatar/base.tsx

@@ -4,7 +4,7 @@ import {
   AvatarFallback,
   AvatarImage,
 } from "@/components/ui/avatar"
-import type { AvatarProps, UserType } from "./types"
+import type { IAvatarProps, TUserType } from "./types"
 import { cn } from "@/lib/utils"
 import {
   initialsFrom,
@@ -18,13 +18,13 @@ import { VerifiedBadge } from "./verified"
 import { Skeleton } from "@/components/ui/skeleton"
 import { Loader } from "../loader"
 
-export default function Base<T extends UserType>({
+export default function Base<T extends TUserType>({
   user,
   size = "sm",
   className,
   loading,
   audio,
-}: AvatarProps<T>) {
+}: IAvatarProps<T>) {
   return (
     <div
       className={cn(

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

@@ -1,3 +1,10 @@
 import Avatar from "./base"
 
-export { Avatar }
+export { Avatar }
+export type {
+  IAvatarProps,
+  TAvatarAudio,
+  TAvatarSize,
+  TAvatarStatus,
+  TUserType,
+} from "./types"

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

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

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

@@ -1,8 +1,8 @@
 import type { ClassValue } from "class-variance-authority/types"
-import type { AvatarAudio, AvatarSize, UserType } from "./types"
-import type { AtomSize } from "../types";
+import type { TAvatarAudio, TAvatarSize, TUserType } from "./types"
+import type { TAtomSize } from "../types";
 
-export function initialsFrom(user: string | UserType | undefined): string | undefined {
+export function initialsFrom(user: string | TUserType | undefined): string | undefined {
   // If the user is a string, use it directly to generate initials.
   if (user && typeof user === "string") {
     const parts = user.trim().split(/\s+/).filter(Boolean)
@@ -21,7 +21,7 @@ export function initialsFrom(user: string | UserType | undefined): string | unde
 export const avatarIsSpeakingClass =
   "ring-background size-10 ring-2 transition-transform duration-500 group-hover/avatar:scale-95"
 
-export const ringClasses: Record<NonNullable<AvatarAudio>, ClassValue> = {
+export const ringClasses: Record<NonNullable<TAvatarAudio>, ClassValue> = {
   muted: "group-hover/avatar:opacity-0 group-hover/avatar:blur-none  opacity-0",
   unmuted:
     "animate-none group-hover/avatar:opacity-70 group-hover/avatar:blur-sm opacity-30",
@@ -29,7 +29,7 @@ export const ringClasses: Record<NonNullable<AvatarAudio>, ClassValue> = {
     "animate-[spin_3s_linear_infinite] group-hover/avatar:opacity-100 group-hover/avatar:blur-sm opacity-75",
 }
 
-export const sizeClasses: Record<AvatarSize, string> = {
+export const sizeClasses: Record<TAvatarSize, string> = {
   sm: "size-6",
   default: "size-8",
   lg: "size-10",
@@ -39,7 +39,7 @@ export const sizeClasses: Record<AvatarSize, string> = {
 
 // Dot trio ≈ 45-55% of the disc: 3×dot + 2×4px gap.
 // 24px disc → 14px trio (xs), 40px → 20px (sm), 64px → 32px (md).
-export const loaderSizes: Record<AvatarSize, AtomSize> = {
+export const loaderSizes: Record<TAvatarSize, TAtomSize> = {
   sm: "xs",
   default: "xs",
   lg: "sm",

package/src/components/atoms/background/texture.tsx

@@ -1,5 +1,5 @@
 import { cn } from "@/lib/utils"
-import type { TextureProps } from "./type";
+import type { ITextureProps } from "./type";
 import { linearGradient, textureMap } from "./utils";
 
 
@@ -8,7 +8,7 @@ export function Texture({
   opacity = 1,
   className,
   children,
-}: TextureProps) {
+}: ITextureProps) {
   const textureUrl = variant !== "none" ? textureMap[variant] : null
   return (
     <div className="relative h-full w-full flex flex-col flex-1">

package/src/components/atoms/background/type.ts

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

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

@@ -1,8 +1,8 @@
-import type { TextureVariant } from "./type";
+import type { TTextureVariant } from "./type";
 import fabricBackground from "@/assets/fabric.png";
 import paperBackground from "@/assets/paper.png";
 
-export const textureMap: Record<Exclude<TextureVariant, "none">, string> = {
+export const textureMap: Record<Exclude<TTextureVariant, "none">, string> = {
   fabric: fabricBackground,
   paper: paperBackground,
 }

package/src/components/atoms/bubble/__tests__/bubble.test.tsx

@@ -1,15 +1,48 @@
 import { describe, expect, mock, test } from "bun:test"
 import { render, screen } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
-import { Bubble, type BubbleReaction } from "../index"
+import { Bubble, type IBubbleReaction } from "../index"
 import User from "@/components/composed/user"
+import { Attachment } from "@/components/composed/chat/attachment"
 
 describe("Bubble", () => {
+  test("detects attachment-only content through fragments without stripping mixed text bubbles", () => {
+    const view = render(
+      <Bubble variant="sender">
+        <Bubble.Message>
+          <>
+            <Attachment kind="document" title="notes.pdf" />
+          </>
+        </Bubble.Message>
+      </Bubble>
+    )
+    expect(
+      view.container
+        .querySelector('[data-slot="bubble-message"]')
+        ?.hasAttribute("data-unstyled")
+    ).toBe(true)
+    view.rerender(
+      <Bubble variant="sender">
+        <Bubble.Message>
+          Read these notes
+          <Attachment kind="document" title="notes.pdf" />
+        </Bubble.Message>
+      </Bubble>
+    )
+    expect(
+      view.container
+        .querySelector('[data-slot="bubble-message"]')
+        ?.hasAttribute("data-unstyled")
+    ).toBe(false)
+  })
   test("header renders the user's identity row, time and role badge", () => {
     render(
       <Bubble variant="sender">
         <Bubble.Header>
-          <User.Info user={{ firstName: "Sen", lastName: "Der", role: "Admin" }} variant="info" />
+          <User.Info
+            user={{ firstName: "Sen", lastName: "Der", role: "Admin" }}
+            variant="info"
+          />
         </Bubble.Header>
         <Bubble.Message>Hello</Bubble.Message>
       </Bubble>
@@ -28,14 +61,16 @@ describe("Bubble", () => {
     expect(
       container.querySelector('[data-slot="bubble-header"]')
     ).not.toBeNull()
-    expect(container.querySelector('[data-slot="bubble-header"]')?.textContent).toBe("")
+    expect(
+      container.querySelector('[data-slot="bubble-header"]')?.textContent
+    ).toBe("")
     expect(screen.queryByText("Exegia")).toBeNull()
     expect(screen.queryByText("AI Scholar")).toBeNull()
   })
 
   test("reaction chips expose aria-pressed and report toggles by index", async () => {
     const user = userEvent.setup()
-    const onToggle = mock((_reaction: BubbleReaction, _index: number) => {})
+    const onToggle = mock((_reaction: IBubbleReaction, _index: number) => {})
     render(
       <Bubble variant="recipient">
         <Bubble.Message>Hi</Bubble.Message>
@@ -135,4 +170,24 @@ describe("Bubble", () => {
         ?.getAttribute("data-variant")
     ).toBe("sender")
   })
+
+  test("an attachment message keeps its alignment without a bubble surface", () => {
+    const { container } = render(
+      <Bubble variant="sender">
+        <Bubble.Message unstyled>
+          <div data-slot="attachment">scan.jpg</div>
+        </Bubble.Message>
+      </Bubble>
+    )
+    const message = container.querySelector('[data-slot="bubble-message"]')!
+    expect(message.hasAttribute("data-unstyled")).toBe(true)
+    expect(message.className).not.toContain("bubble-sender")
+    expect(message.className).not.toContain("bezel-")
+    expect(message.className).not.toContain("py-3")
+    expect(
+      container
+        .querySelector('[data-slot="bubble"]')
+        ?.getAttribute("data-variant")
+    ).toBe("sender")
+  })
 })

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

@@ -2,7 +2,7 @@
 
 import type * as React from "react"
 import { cn } from "@/lib/utils"
-import type { BubbleActionsProps } from "./types"
+import type { TBubbleActionsProps } from "./types"
 
 /**
  * Row of per-message actions (copy, retry, …). Hidden until the bubble is
@@ -12,7 +12,7 @@ export function BubbleActions({
   className,
   "aria-label": ariaLabel = "Message actions",
   ...props
-}: BubbleActionsProps): React.ReactElement {
+}: TBubbleActionsProps): React.ReactElement {
   return (
     <div
       aria-label={ariaLabel}

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

@@ -1,11 +1,11 @@
 "use client"
 
 import { createContext, useContext } from "react"
-import type { BubbleVariant } from "./types"
+import type { TBubbleVariant } from "./types"
 
-export const BubbleContext = createContext<BubbleVariant>("recipient")
+export const BubbleContext = createContext<TBubbleVariant>("recipient")
 
 /** Variant of the closest `Bubble` ancestor; used by the sub-components. */
-export function useBubbleVariant(): BubbleVariant {
+export function useBubbleVariant(): TBubbleVariant {
   return useContext(BubbleContext)
 }

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

@@ -3,7 +3,7 @@
 import type * as React from "react"
 import { cn } from "@/lib/utils"
 import { BubbleContext } from "./context"
-import type { BubbleProps } from "./types"
+import type { IBubbleProps } from "./types"
 import { twBubbleAlignClasses, twBubbleColumnClasses } from "./utils"
 
 export function Bubble({
@@ -12,7 +12,7 @@ export function Bubble({
   className,
   children,
   ...props
-}: BubbleProps): React.ReactElement {
+}: IBubbleProps): React.ReactElement {
   return (
     <BubbleContext.Provider value={variant}>
       <div

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

@@ -3,7 +3,7 @@
 import type * as React from "react"
 import { cn } from "@/lib/utils"
 import { useBubbleVariant } from "./context"
-import type { BubbleHeaderProps } from "./types"
+import type { TBubbleHeaderProps } from "./types"
 
 /**
  * Author row above a message: avatar, name, time and an optional role badge.
@@ -14,15 +14,17 @@ export function BubbleHeader({
   className,
   children,
   ...props
-}: BubbleHeaderProps): React.ReactElement {
+}: TBubbleHeaderProps): React.ReactElement {
   const variant = useBubbleVariant()
   const reversed = variant === "sender"
 
   return (
     <div
       className={cn(
-        "flex items-center gap-2",
-        reversed && "flex-row-reverse",
+        "gap-2 flex items-center",
+        // The message column keeps its inset; only the identity reaches the thread edge.
+        reversed && "translate-x-4 flex-row-reverse",
+        variant === "recipient" && "-translate-x-4",
         className
       )}
       data-slot="bubble-header"

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

@@ -25,13 +25,13 @@ export {
 }
 
 export type {
-  BubbleActionsProps,
-  BubblePickedEmoji,
-  BubbleHeaderProps,
-  BubbleMessageProps,
-  BubbleReactionChipProps,
-  BubbleProps,
-  BubbleReaction,
-  BubbleReactionsProps,
-  BubbleVariant
+  TBubbleActionsProps,
+  IBubblePickedEmoji,
+  TBubbleHeaderProps,
+  TBubbleMessageProps,
+  IBubbleReactionChipProps,
+  IBubbleProps,
+  IBubbleReaction,
+  IBubbleReactionsProps,
+  TBubbleVariant
 } from "./types"

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

@@ -3,23 +3,30 @@
 import type * as React from "react"
 import { cn } from "@/lib/utils"
 import { useBubbleVariant } from "./context"
-import type { BubbleMessageProps } from "./types"
+import type { TBubbleMessageProps } from "./types"
 import { twBubbleMessageClasses } from "./utils"
+import { containsOnlyAttachments } from "@/lib/attachment-content"
 
 export function BubbleMessage({
   className,
+  unstyled,
+  children,
   ...props
-}: BubbleMessageProps): React.ReactElement {
+}: TBubbleMessageProps): React.ReactElement {
   const variant = useBubbleVariant()
+  const bare = unstyled ?? containsOnlyAttachments(children)
   return (
     <div
       className={cn(
-        "relative select-none flex-col gap-y-2",
-        twBubbleMessageClasses[variant],
+        "gap-y-2 relative flex-col select-none",
+        bare ? "min-w-0 flex max-w-full" : twBubbleMessageClasses[variant],
         className
       )}
       data-slot="bubble-message"
+      data-unstyled={bare ? "" : undefined}
       {...props}
-    />
+    >
+      {children}
+    </div>
   )
 }