@usefragments/ui 1.5.3 → 1.6.0

package/src/components/Menu/index.tsx

@@ -1,8 +1,9 @@
-'use client';
+"use client";
 
-import * as React from 'react';
-import { Menu as BaseMenu } from '@base-ui/react/menu';
-import styles from './Menu.module.scss';
+import * as React from "react";
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+import { POPUP_OFFSET_PX } from "../../recipes/popup";
+import styles from "./Menu.module.scss";
 
 // ============================================
 // Types
@@ -20,7 +21,7 @@ type MenuTriggerAsButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
   children: React.ReactNode;
   asChild?: false;
 };
-type MenuTriggerAsChildProps = Omit<React.HTMLAttributes<HTMLElement>, 'children'> & {
+type MenuTriggerAsChildProps = Omit<React.HTMLAttributes<HTMLElement>, "children"> & {
   children: React.ReactElement;
   asChild: true;
 };
@@ -28,12 +29,15 @@ export type MenuTriggerProps = MenuTriggerAsButtonProps | MenuTriggerAsChildProp
 
 export interface MenuContentProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
-  side?: 'top' | 'bottom' | 'left' | 'right';
-  align?: 'start' | 'center' | 'end';
+  side?: "top" | "bottom" | "left" | "right";
+  align?: "start" | "center" | "end";
   sideOffset?: number;
 }
 
-export interface MenuItemProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'onSelect'> {
+export interface MenuItemProps extends Omit<
+  React.HTMLAttributes<HTMLElement>,
+  "children" | "onSelect"
+> {
   children: React.ReactNode;
   disabled?: boolean;
   danger?: boolean;
@@ -44,7 +48,10 @@ export interface MenuItemProps extends Omit<React.HTMLAttributes<HTMLElement>, '
   checked?: boolean;
 }
 
-export interface MenuCheckboxItemProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'onChange'> {
+export interface MenuCheckboxItemProps extends Omit<
+  React.HTMLAttributes<HTMLElement>,
+  "children" | "onChange"
+> {
   children: React.ReactNode;
   checked?: boolean;
   defaultChecked?: boolean;
@@ -59,7 +66,7 @@ export interface MenuRadioGroupProps {
   onValueChange?: (value: string) => void;
 }
 
-export interface MenuRadioItemProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
+export interface MenuRadioItemProps extends Omit<React.HTMLAttributes<HTMLElement>, "children"> {
   children: React.ReactNode;
   value: string;
   disabled?: boolean;
@@ -130,20 +137,9 @@ function DotIcon() {
 // Components
 // ============================================
 
-function MenuRoot({
-  children,
-  open,
-  defaultOpen,
-  onOpenChange,
-  modal = true,
-}: MenuProps) {
+function MenuRoot({ children, open, defaultOpen, onOpenChange, modal = true }: MenuProps) {
   return (
-    <BaseMenu.Root
-      open={open}
-      defaultOpen={defaultOpen}
-      onOpenChange={onOpenChange}
-      modal={modal}
-    >
+    <BaseMenu.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange} modal={modal}>
       {children}
     </BaseMenu.Root>
   );
@@ -152,10 +148,14 @@ function MenuRoot({
 function MenuTrigger({ children, asChild, className, ...htmlProps }: MenuTriggerProps) {
   if (asChild) {
     if (!React.isValidElement(children)) {
-      throw new Error('Menu.Trigger with asChild requires a single valid React element child.');
+      throw new Error("Menu.Trigger with asChild requires a single valid React element child.");
     }
     return (
-      <BaseMenu.Trigger {...htmlProps} className={className} render={children as React.ReactElement}>
+      <BaseMenu.Trigger
+        {...htmlProps}
+        className={className}
+        render={children as React.ReactElement}
+      >
         {null}
       </BaseMenu.Trigger>
     );
@@ -164,7 +164,7 @@ function MenuTrigger({ children, asChild, className, ...htmlProps }: MenuTrigger
   return (
     <BaseMenu.Trigger
       {...htmlProps}
-      type={(htmlProps as React.ButtonHTMLAttributes<HTMLButtonElement>).type ?? 'button'}
+      type={(htmlProps as React.ButtonHTMLAttributes<HTMLButtonElement>).type ?? "button"}
       className={className}
     >
       {children}
@@ -175,12 +175,12 @@ function MenuTrigger({ children, asChild, className, ...htmlProps }: MenuTrigger
 function MenuContent({
   children,
   className,
-  side = 'bottom',
-  align = 'start',
-  sideOffset = 4,
+  side = "bottom",
+  align = "start",
+  sideOffset = POPUP_OFFSET_PX,
   ...htmlProps
 }: MenuContentProps) {
-  const popupClasses = [styles.popup, className].filter(Boolean).join(' ');
+  const popupClasses = [styles.popup, className].filter(Boolean).join(" ");
 
   return (
     <BaseMenu.Portal>
@@ -191,9 +191,7 @@ function MenuContent({
         className={styles.positioner}
       >
         <BaseMenu.Popup {...htmlProps} className={popupClasses}>
-          <BaseMenu.Viewport className={styles.viewport}>
-            {children}
-          </BaseMenu.Viewport>
+          <BaseMenu.Viewport className={styles.viewport}>{children}</BaseMenu.Viewport>
         </BaseMenu.Popup>
       </BaseMenu.Positioner>
     </BaseMenu.Portal>
@@ -216,15 +214,11 @@ function MenuItem({
       (htmlProps.onClick as React.MouseEventHandler<HTMLElement> | undefined)?.(event);
       onSelect?.(event);
     },
-    [htmlProps, onSelect],
+    [htmlProps, onSelect]
   );
 
   const hasChecked = checked !== undefined;
-  const classes = [
-    styles.item,
-    danger && styles.itemDanger,
-    className,
-  ].filter(Boolean).join(' ');
+  const classes = [styles.item, danger && styles.itemDanger, className].filter(Boolean).join(" ");
 
   return (
     <BaseMenu.Item
@@ -234,9 +228,7 @@ function MenuItem({
       className={classes}
     >
       {hasChecked && (
-        <span className={styles.checkIndicator}>
-          {checked ? <CheckmarkIcon /> : null}
-        </span>
+        <span className={styles.checkIndicator}>{checked ? <CheckmarkIcon /> : null}</span>
       )}
       {icon && <span className={styles.itemIcon}>{icon}</span>}
       <span className={styles.itemLabel}>{children}</span>
@@ -263,12 +255,10 @@ function MenuCheckboxItem({
       if (!isControlled) setInternalChecked(value);
       onCheckedChange?.(value);
     },
-    [isControlled, onCheckedChange],
+    [isControlled, onCheckedChange]
   );
 
-  const classes = [styles.item, styles.checkboxItem, className]
-    .filter(Boolean)
-    .join(' ');
+  const classes = [styles.item, styles.checkboxItem, className].filter(Boolean).join(" ");
 
   return (
     <BaseMenu.CheckboxItem
@@ -279,41 +269,22 @@ function MenuCheckboxItem({
       disabled={disabled}
       className={classes}
     >
-      <span className={styles.checkIndicator}>
-        {visualChecked ? <CheckmarkIcon /> : null}
-      </span>
+      <span className={styles.checkIndicator}>{visualChecked ? <CheckmarkIcon /> : null}</span>
       <span className={styles.itemLabel}>{children}</span>
     </BaseMenu.CheckboxItem>
   );
 }
 
-function MenuRadioGroup({
-  children,
-  value,
-  defaultValue,
-  onValueChange,
-}: MenuRadioGroupProps) {
+function MenuRadioGroup({ children, value, defaultValue, onValueChange }: MenuRadioGroupProps) {
   return (
-    <BaseMenu.RadioGroup
-      value={value}
-      defaultValue={defaultValue}
-      onValueChange={onValueChange}
-    >
+    <BaseMenu.RadioGroup value={value} defaultValue={defaultValue} onValueChange={onValueChange}>
       {children}
     </BaseMenu.RadioGroup>
   );
 }
 
-function MenuRadioItem({
-  children,
-  value,
-  disabled,
-  className,
-  ...htmlProps
-}: MenuRadioItemProps) {
-  const classes = [styles.item, styles.radioItem, className]
-    .filter(Boolean)
-    .join(' ');
+function MenuRadioItem({ children, value, disabled, className, ...htmlProps }: MenuRadioItemProps) {
+  const classes = [styles.item, styles.radioItem, className].filter(Boolean).join(" ");
 
   return (
     <BaseMenu.RadioItem {...htmlProps} value={value} disabled={disabled} className={classes}>
@@ -326,32 +297,31 @@ function MenuRadioItem({
 }
 
 function MenuGroup({ children, className, ...htmlProps }: MenuGroupProps) {
-  const classes = [styles.group, className].filter(Boolean).join(' ');
-  return <BaseMenu.Group {...htmlProps} className={classes}>{children}</BaseMenu.Group>;
+  const classes = [styles.group, className].filter(Boolean).join(" ");
+  return (
+    <BaseMenu.Group {...htmlProps} className={classes}>
+      {children}
+    </BaseMenu.Group>
+  );
 }
 
 function MenuGroupLabel({ children, className, ...htmlProps }: MenuGroupLabelProps) {
-  const classes = [styles.groupLabel, className].filter(Boolean).join(' ');
-  return <BaseMenu.GroupLabel {...htmlProps} className={classes}>{children}</BaseMenu.GroupLabel>;
+  const classes = [styles.groupLabel, className].filter(Boolean).join(" ");
+  return (
+    <BaseMenu.GroupLabel {...htmlProps} className={classes}>
+      {children}
+    </BaseMenu.GroupLabel>
+  );
 }
 
 function MenuSeparator({ className, ...htmlProps }: MenuSeparatorProps) {
-  const classes = [styles.separator, className].filter(Boolean).join(' ');
+  const classes = [styles.separator, className].filter(Boolean).join(" ");
   return <BaseMenu.Separator {...htmlProps} className={classes} />;
 }
 
-function MenuSubmenu({
-  children,
-  open,
-  defaultOpen,
-  onOpenChange,
-}: MenuSubmenuProps) {
+function MenuSubmenu({ children, open, defaultOpen, onOpenChange }: MenuSubmenuProps) {
   return (
-    <BaseMenu.SubmenuRoot
-      open={open}
-      defaultOpen={defaultOpen}
-      onOpenChange={onOpenChange}
-    >
+    <BaseMenu.SubmenuRoot open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
       {children}
     </BaseMenu.SubmenuRoot>
   );
@@ -364,9 +334,7 @@ function MenuSubmenuTrigger({
   icon,
   ...htmlProps
 }: MenuSubmenuTriggerProps) {
-  const classes = [styles.item, styles.submenuTrigger, className]
-    .filter(Boolean)
-    .join(' ');
+  const classes = [styles.item, styles.submenuTrigger, className].filter(Boolean).join(" ");
 
   return (
     <BaseMenu.SubmenuTrigger {...htmlProps} disabled={disabled} className={classes}>

package/src/components/Message/Message.module.scss

@@ -1,61 +1,35 @@
 @use "../../tokens/variables" as *;
-@use "../../tokens/mixins" as *;
-
-// ============================================
-// Message Root
-// ============================================
+@use "../../recipes/layout" as layout;
+@use "../../recipes/prose" as prose;
+@use "../../recipes/typography" as typography;
 
 .message {
   display: flex;
-  gap: var(--fui-space-2, $fui-space-2);
-  padding: var(--fui-space-2, $fui-space-2);
+  gap: layout.gap("md");
+  padding: layout.gap("md");
   border-radius: var(--fui-radius-lg, $fui-radius-lg);
   transition: background-color var(--fui-transition-fast, $fui-transition-fast);
 
-  &:hover {
-    .actions {
-      opacity: 1;
-    }
-  }
-
-  &:focus-within {
-    .actions {
-      opacity: 1;
-    }
+  &:hover .actions,
+  &:focus-within .actions {
+    opacity: 1;
   }
 }
 
 .withoutAvatar {
-  padding-inline: 0;
-
-  // Avatarless assistant prose is part of the transcript rather than a bubble,
-  // so it should sit flush with the shared measure. The user's own turn remains
-  // a compact bubble to preserve authorship and alignment at a glance.
-  &.assistant {
-    .content {
-      padding: 0;
-    }
-  }
-
-  &.user {
-    .content {
-      padding: var(--fui-space-1, $fui-space-1) var(--fui-space-2, $fui-space-2);
-    }
+  &.assistant .content {
+    background: transparent;
   }
 }
 
-// Role-based styles
 .user {
   flex-direction: row-reverse;
-  margin-left: auto;
+  margin-inline-start: auto;
 
   .body {
     align-items: flex-end;
   }
 
-  // Alignment, measure and the neutral surface distinguish the user's turn.
-  // Brand accent is reserved for actions and semantic state, not transcript
-  // chrome.
   .content {
     max-inline-size: 80%;
     background-color: var(--fui-bg-tertiary, $fui-bg-tertiary);
@@ -63,21 +37,18 @@
   }
 }
 
-.assistant {
-  .content {
-    background-color: var(--fui-bg-secondary, $fui-bg-secondary);
-    color: var(--fui-text-primary, $fui-text-primary);
-  }
+.assistant .content {
+  background-color: var(--fui-bg-secondary, $fui-bg-secondary);
+  color: var(--fui-text-primary, $fui-text-primary);
 }
 
 .system {
-  max-width: 100%;
+  max-inline-size: 100%;
   justify-content: center;
 
   .content {
     background-color: var(--fui-color-info-bg, $fui-color-info-bg);
     color: var(--fui-text-secondary, $fui-text-secondary);
-    font-size: var(--fui-font-size-xs, $fui-font-size-xs);
     text-align: center;
   }
 
@@ -86,45 +57,21 @@
   }
 }
 
-// Status styles
-.error {
-  .content {
-    background: var(--fui-color-danger-bg, $fui-color-danger-bg);
-    border: 1px solid var(--fui-color-danger-border, $fui-color-danger-border);
-    color: var(--fui-color-danger-text, $fui-color-danger-text);
-  }
+.error .content {
+  border: var(--fui-stroke-hairline) solid var(--fui-color-danger-border, $fui-color-danger-border);
+  background: var(--fui-color-danger-bg, $fui-color-danger-bg);
+  color: var(--fui-color-danger-text, $fui-color-danger-text);
 }
 
 .sending {
   opacity: 0.7;
 }
 
-// ============================================
-// Avatar
-// ============================================
-
 .avatar {
   flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 2rem;
-  height: 2rem;
-  border-radius: var(--fui-radius-full, $fui-radius-full);
-  background-color: var(--fui-bg-tertiary, $fui-bg-tertiary);
-  color: var(--fui-text-secondary, $fui-text-secondary);
-
-  svg {
-    width: 1rem;
-    height: 1rem;
-  }
-}
-
-.avatarUser {
-  background-color: var(--fui-bg-tertiary, $fui-bg-tertiary);
-  color: var(--fui-text-primary, $fui-text-primary);
 }
 
+.avatarUser,
 .avatarAssistant {
   background-color: var(--fui-bg-tertiary, $fui-bg-tertiary);
   color: var(--fui-text-primary, $fui-text-primary);
@@ -137,91 +84,65 @@
 
 .avatarImage {
   padding: 0;
-  overflow: hidden;
 }
 
-.avatarImg {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-// ============================================
-// Body (content container)
-// ============================================
-
 .body {
   display: flex;
-  flex-direction: column;
-  gap: var(--fui-space-1, $fui-space-1);
-  min-width: 0;
   flex: 1;
+  flex-direction: column;
+  gap: layout.gap("xs");
+  min-inline-size: 0;
 }
 
-// ============================================
-// Content
-// ============================================
-
 .content {
-  @include text-base;
-  padding: var(--fui-space-2, $fui-space-2) var(--fui-space-3, $fui-space-3);
-  border-radius: var(--fui-radius-lg, $fui-radius-lg);
-  line-height: var(--fui-line-height-normal, $fui-line-height-normal);
-  word-wrap: break-word;
+  @include prose.root;
 
-  // A bubble sets its own foreground per role — primary text for the user, the
-  // danger ramp for an error. Anything rendered inside it has to take that
-  // colour rather than the page's, so a Markdown body dropped in here inherits
-  // instead of holding on to the prose grey.
   --fui-markdown-text: currentColor;
 
-  // Prose styling for markdown content
-  p {
-    margin: 0;
+  padding-block: layout.gap("sm");
+  padding-inline: layout.gap("md");
+  border-radius: var(--fui-radius-lg, $fui-radius-lg);
+  overflow-wrap: anywhere;
 
-    & + p {
-      margin-top: var(--fui-space-2, $fui-space-2);
-    }
+  p {
+    @include prose.paragraph;
   }
 
   code {
-    font-family: var(--fui-font-mono, $fui-font-mono);
-    font-size: 0.9em;
-    padding: 0.125em 0.375em;
-    border-radius: var(--fui-radius-sm, $fui-radius-sm);
-    background-color: var(--fui-bg-subtle, $fui-bg-subtle);
+    @include prose.inline-code;
   }
 
   pre {
-    margin: var(--fui-space-2, $fui-space-2) 0;
-    padding: var(--fui-space-2, $fui-space-2);
+    @include prose.code-block("compact");
+
     border-radius: var(--fui-radius-md, $fui-radius-md);
     background-color: var(--fui-bg-subtle, $fui-bg-subtle);
-    overflow-x: auto;
 
     code {
       padding: 0;
       background: none;
+      font: inherit;
+      letter-spacing: inherit;
     }
   }
 
-  ul,
+  ul {
+    @include prose.list("disc");
+  }
+
   ol {
-    margin: var(--fui-space-2, $fui-space-2) 0;
-    padding-left: var(--fui-space-4, $fui-space-4);
+    @include prose.list("decimal");
   }
 }
 
-.streaming {
-  &::after {
-    content: "";
-    display: inline-block;
-    width: 0.5em;
-    height: 1em;
-    margin-left: 2px;
-    background-color: currentColor;
-    animation: blink 1s step-end infinite;
-  }
+.streaming::after {
+  content: "";
+  display: inline-block;
+  inline-size: 0.5em;
+  block-size: 1em;
+  margin-inline-start: var(--fui-raw-space-2);
+  background-color: currentColor;
+  animation: blink 1s step-end infinite;
 }
 
 @keyframes blink {
@@ -229,37 +150,26 @@
   100% {
     opacity: 1;
   }
+
   50% {
     opacity: 0;
   }
 }
 
-// ============================================
-// Actions
-// ============================================
-
 .actions {
   display: flex;
   align-items: center;
-  gap: var(--fui-space-1, $fui-space-1);
+  gap: layout.gap("xs");
   opacity: 0;
   transition: opacity var(--fui-transition-fast, $fui-transition-fast);
 }
 
-// ============================================
-// Timestamp
-// ============================================
-
 .timestamp {
-  @include helper-text;
-  font-size: var(--fui-font-size-2xs, $fui-font-size-2xs);
+  @include typography.role("caption");
+
   color: var(--fui-text-secondary, $fui-text-secondary);
 }
 
-// ============================================
-// Reduced Motion
-// ============================================
-
 @media (prefers-reduced-motion: reduce) {
   .streaming::after {
     animation: none;

package/src/components/Message/index.tsx

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import styles from './Message.module.scss';
+import { Avatar } from '../Avatar';
 import { useOptionalConversationList } from '../ConversationList';
 import { Markdown } from '../Markdown';
 
@@ -215,14 +216,23 @@ function MessageAvatar({ children, src, alt, className, ...htmlProps }: MessageA
       ? <AssistantIcon />
       : <SystemIcon />;
 
-  const content = children ?? (src
-    ? <img src={src} alt={alt ?? role} className={styles.avatarImg} />
-    : defaultIcon);
+  if (children !== undefined) {
+    return (
+      <div {...htmlProps} className={classes}>
+        {children}
+      </div>
+    );
+  }
 
   return (
-    <div {...htmlProps} className={classes}>
-      {content}
-    </div>
+    <Avatar
+      {...htmlProps}
+      src={src}
+      alt={alt ?? role}
+      size="sm"
+      fallback={defaultIcon}
+      className={classes}
+    />
   );
 }