@refraction-ui/react 0.23.2 → 0.24.0

package/dist/internal/composer/index.d.ts

@@ -639,4 +639,33 @@ interface EmojiTriggerOptions {
  */
 declare function createEmojiTrigger(options?: EmojiTriggerOptions): ComposerTrigger;
 
-export { type ActiveTriggerState, type AppliedEdit, type ApplyValueEditArgs, CIRCUIT_BREAKER_THRESHOLD, CLOSED_SUGGESTION_STATE, COUNTER_VISIBLE_FRACTION, type CanSendArgs, type CommitTokenArgs, type CommitTokenResult, type ComposerAPI, type ComposerAttachment, type ComposerAttachmentDraft, type ComposerAttachmentKind, type ComposerAttachmentStatus, type ComposerCandidate, type ComposerConfig, type ComposerDraft, type ComposerDraftStore, type ComposerEvent, type ComposerMode, type ComposerOutput, type ComposerSelection, type ComposerState, type ComposerSubmission, type ComposerToken, type ComposerTrigger, type ComposerTriggerResolver, type ComposerTriggerScope, type ComposerValidationResult, type ComposerValidator, type CounterState, DEFAULT_DRAFT_DEBOUNCE_MS, DEFAULT_MAX_LINES, DEFAULT_MAX_QUERY_LENGTH, DEFAULT_MAX_VISIBLE_RESULTS, DEFAULT_MIN_LINES, DEFAULT_TYPING_SIGNAL_INTERVAL_MS, DISMISS_GRACE_MS, type DetectTriggerArgs, type DismissedOccurrence, type EmojiTriggerOptions, type EnterResult, LOADING_DELAY_MS, type PlacedToken, type ResolvedToken, type ResolvedTrigger, SCAN_UNITS_PER_GRAPHEME, type SuggestionController, type SuggestionState, type TextEdit, type TokenRange, type TriggerMatch, type TypedEmojiHit, applyValueEdit, canSend, clampGraphemes, commitTokenAt, composerAccessoryPanelClass, composerAccessoryToggleVariants, composerAttachmentChipVariants, composerCounterVariants, composerFieldClass, composerMenuClass, composerMenuItemVariants, composerPrimaryActionVariants, composerSurfaceVariants, composerTokenPillClass, composerTrayClass, computeCounter, createComposer, createEmojiTrigger, createSuggestionController, detectActiveTrigger, detectTypedEmoji, diffEdit, expandRangeOverTokens, graphemeLength, isGraphemeBoundary, payloadFor, resolveTriggerConfig, scanWindowFor, serializeTokens, shouldSubmitOnEnter, snapSelectionToTokens, toMessageAttachment };
+/** Clipboard payload rules shared by browser adapters; no clipboard access. */
+declare const DEFAULT_COMPOSER_IMAGE_MAX_BYTES: number;
+interface ComposerClipboardFile {
+    readonly name: string;
+    readonly type: string;
+    readonly size: number;
+}
+declare class ComposerImagePasteError extends Error {
+    readonly reason: 'empty' | 'max-size';
+    readonly fileName: string;
+    constructor(reason: 'empty' | 'max-size', fileName: string);
+}
+/** PNG/JPEG only. Reject the entire image batch before handing anything to a host. */
+declare function composerClipboardImages<T extends ComposerClipboardFile>(files: Iterable<T>, maxBytes?: number): T[];
+
+/** Structural field seam: the headless package never reads browser globals. */
+interface ComposerPasteField {
+    value: string;
+    selectionStart: number;
+    selectionEnd: number;
+    setSelectionRange(start: number, end: number): void;
+}
+/**
+ * Apply the core's token/grapheme rules, then mirror its edit as a native undo
+ * transaction when the adapter supplies one. The adapter must defer rendering
+ * the field until this call returns. Empty image-only pastes preserve selection.
+ */
+declare function pasteComposerField(api: ComposerAPI, field: ComposerPasteField, text: string, insertText?: (text: string) => boolean): void;
+
+export { type ActiveTriggerState, type AppliedEdit, type ApplyValueEditArgs, CIRCUIT_BREAKER_THRESHOLD, CLOSED_SUGGESTION_STATE, COUNTER_VISIBLE_FRACTION, type CanSendArgs, type CommitTokenArgs, type CommitTokenResult, type ComposerAPI, type ComposerAttachment, type ComposerAttachmentDraft, type ComposerAttachmentKind, type ComposerAttachmentStatus, type ComposerCandidate, type ComposerClipboardFile, type ComposerConfig, type ComposerDraft, type ComposerDraftStore, type ComposerEvent, ComposerImagePasteError, type ComposerMode, type ComposerOutput, type ComposerPasteField, type ComposerSelection, type ComposerState, type ComposerSubmission, type ComposerToken, type ComposerTrigger, type ComposerTriggerResolver, type ComposerTriggerScope, type ComposerValidationResult, type ComposerValidator, type CounterState, DEFAULT_COMPOSER_IMAGE_MAX_BYTES, DEFAULT_DRAFT_DEBOUNCE_MS, DEFAULT_MAX_LINES, DEFAULT_MAX_QUERY_LENGTH, DEFAULT_MAX_VISIBLE_RESULTS, DEFAULT_MIN_LINES, DEFAULT_TYPING_SIGNAL_INTERVAL_MS, DISMISS_GRACE_MS, type DetectTriggerArgs, type DismissedOccurrence, type EmojiTriggerOptions, type EnterResult, LOADING_DELAY_MS, type PlacedToken, type ResolvedToken, type ResolvedTrigger, SCAN_UNITS_PER_GRAPHEME, type SuggestionController, type SuggestionState, type TextEdit, type TokenRange, type TriggerMatch, type TypedEmojiHit, applyValueEdit, canSend, clampGraphemes, commitTokenAt, composerAccessoryPanelClass, composerAccessoryToggleVariants, composerAttachmentChipVariants, composerClipboardImages, composerCounterVariants, composerFieldClass, composerMenuClass, composerMenuItemVariants, composerPrimaryActionVariants, composerSurfaceVariants, composerTokenPillClass, composerTrayClass, computeCounter, createComposer, createEmojiTrigger, createSuggestionController, detectActiveTrigger, detectTypedEmoji, diffEdit, expandRangeOverTokens, graphemeLength, isGraphemeBoundary, pasteComposerField, payloadFor, resolveTriggerConfig, scanWindowFor, serializeTokens, shouldSubmitOnEnter, snapSelectionToTokens, toMessageAttachment };

package/dist/internal/page-header/index.d.ts

@@ -21,8 +21,8 @@ declare function createPageHeader(props?: PageHeaderProps): PageHeaderAPI;
  * on narrow screens. Carries no outer margin — the page layout spaces it.
  */
 declare const pageHeaderClass = "flex flex-wrap items-start justify-between gap-4";
-/** Text cluster (kicker, title, description). */
-declare const pageHeaderTextClass = "flex min-w-0 flex-1 flex-col gap-1";
+/** Give text a preferred width so actions wrap before squeezing the heading. */
+declare const pageHeaderTextClass = "flex min-w-0 basis-64 grow flex-col gap-1";
 /** Small uppercase eyebrow above the title. */
 declare const pageHeaderKickerClass = "break-words text-[11px] uppercase tracking-wider text-muted-foreground";
 /** Title — app-sized, not a marketing display size. */

package/dist/internal/react-composer/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { ComposerTrigger, ComposerCandidate, ComposerAttachmentDraft, ComposerDraftStore, ComposerValidator, ComposerSubmission, ComposerAttachment, ComposerEvent, ComposerAPI, ComposerState, ComposerConfig } from '../composer/index.js';
-export { ComposerAPI, ComposerAttachment, ComposerAttachmentDraft, ComposerAttachmentKind, ComposerAttachmentStatus, ComposerCandidate, ComposerConfig, ComposerDraft, ComposerDraftStore, ComposerEvent, ComposerMode, ComposerOutput, ComposerSelection, ComposerState, ComposerSubmission, ComposerToken, ComposerTrigger, ComposerTriggerResolver, ComposerTriggerScope, ComposerValidationResult, ComposerValidator, CounterState, EmojiTriggerOptions, EnterResult, PlacedToken, ResolvedToken, SuggestionState, composerAccessoryPanelClass, composerAccessoryToggleVariants, composerAttachmentChipVariants, composerCounterVariants, composerFieldClass, composerMenuClass, composerMenuItemVariants, composerPrimaryActionVariants, composerSurfaceVariants, composerTokenPillClass, composerTrayClass, createComposer, createEmojiTrigger, toMessageAttachment } from '../composer/index.js';
+import { ComposerConfig, ComposerTrigger, ComposerCandidate, ComposerAttachmentDraft, ComposerDraftStore, ComposerValidator, ComposerSubmission, ComposerAttachment, ComposerEvent, ComposerAPI, ComposerState } from '../composer/index.js';
+export { ComposerAPI, ComposerAttachment, ComposerAttachmentDraft, ComposerAttachmentKind, ComposerAttachmentStatus, ComposerCandidate, ComposerConfig, ComposerDraft, ComposerDraftStore, ComposerEvent, ComposerImagePasteError, ComposerMode, ComposerOutput, ComposerSelection, ComposerState, ComposerSubmission, ComposerToken, ComposerTrigger, ComposerTriggerResolver, ComposerTriggerScope, ComposerValidationResult, ComposerValidator, CounterState, DEFAULT_COMPOSER_IMAGE_MAX_BYTES, EmojiTriggerOptions, EnterResult, PlacedToken, ResolvedToken, SuggestionState, composerAccessoryPanelClass, composerAccessoryToggleVariants, composerAttachmentChipVariants, composerClipboardImages, composerCounterVariants, composerFieldClass, composerMenuClass, composerMenuItemVariants, composerPrimaryActionVariants, composerSurfaceVariants, composerTokenPillClass, composerTrayClass, createComposer, createEmojiTrigger, toMessageAttachment } from '../composer/index.js';
 
 /** All user-facing text; every entry is overridable via the `strings` prop. */
 interface RefractionComposerStrings {
@@ -17,6 +17,7 @@ interface RefractionComposerStrings {
     noMatchesLabel: (query: string) => string;
     loadingLabel: string;
     retryLabel: string;
+    pasteFailedNotice: string;
     trimmedNotice: string;
     counterLabel: (remaining: number) => string;
     editingLabel: string;
@@ -52,6 +53,8 @@ interface RefractionComposerProps extends Omit<React.HTMLAttributes<HTMLDivEleme
     maxLines?: number;
     /** Grapheme-cluster budget (not UTF-16 units). Fixed at mount. */
     maxLength?: number;
+    maxAttachmentSizeBytes?: number;
+    acceptAttachment?: ComposerConfig['acceptAttachment'];
     maxAttachments?: number;
     disabled?: boolean;
     readOnly?: boolean;
@@ -109,7 +112,12 @@ interface RefractionComposerProps extends Omit<React.HTMLAttributes<HTMLDivEleme
     onEditCancel?: () => void;
     /** Throttled typing signal (core-owned leading-edge throttle). */
     onTypingActivity?: () => void;
-    onAttachmentAdd?: (attachment: ComposerAttachment) => void;
+    /** Original File is retained for the host's uploader (picker/drop/paste). */
+    onAttachmentAdd?: (attachment: ComposerAttachment, file: File) => void;
+    /** Opt-in PNG/JPEG clipboard handoff. The host stages/uploads; never sends. */
+    onImagesPasted?: (images: File[]) => void;
+    /** Clipboard read/size errors; the draft and image batch stay unchanged. */
+    onPasteError?: (error: unknown) => void;
     onAttachmentRejected?: (event: Extract<ComposerEvent, {
         type: 'attachment-rejected';
     }>) => void;

package/dist/react-avatar.js

@@ -117,9 +117,23 @@ var Avatar = React.forwardRef(
 var AvatarImage = React.forwardRef(
   function AvatarImage2({ className, src, alt = "", onLoad, onError, ...props }, ref) {
     const { imageError, setImageLoaded, setImageError } = React.useContext(AvatarContext);
+    const imageRef = React.useRef(null);
+    const mergedRef = React.useCallback((node) => {
+      imageRef.current = node;
+      if (typeof ref === "function") {
+        const cleanup = ref(node);
+        if (typeof cleanup === "function") {
+          return () => {
+            imageRef.current = null;
+            cleanup();
+          };
+        }
+      } else if (ref) ref.current = node;
+    }, [ref]);
     React.useEffect(() => {
-      setImageLoaded(false);
-      setImageError(false);
+      const image = imageRef.current;
+      setImageLoaded(!!image?.complete && image.naturalWidth > 0);
+      setImageError(!!image?.complete && image.naturalWidth === 0);
     }, [src, setImageLoaded, setImageError]);
     const handleLoad = (e) => {
       setImageLoaded(true);
@@ -133,7 +147,7 @@ var AvatarImage = React.forwardRef(
     return /* @__PURE__ */ jsx(
       "img",
       {
-        ref,
+        ref: mergedRef,
         className: cn(avatarImageVariants(), className),
         src,
         alt,

package/dist/react-avatar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../avatar/src/avatar.ts", "../../avatar/src/avatar.styles.ts", "../../react-avatar/src/avatar.tsx"],
-  "sourcesContent": ["import type { AccessibilityProps } from '@refraction-ui/shared'\n\nexport type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n\n/** Outline of the avatar. */\nexport type AvatarShape = 'circle' | 'square'\n\nexport type AvatarLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error'\n\nexport interface AvatarProps {\n  src?: string\n  alt?: string\n  fallback?: string\n  size?: AvatarSize\n}\n\nexport interface AvatarAPI {\n  /** ARIA attributes to spread on the root element */\n  ariaProps: Partial<AccessibilityProps>\n  /** Data attributes for CSS styling hooks */\n  dataAttributes: Record<string, string>\n  /** Image ARIA props */\n  imageProps: {\n    alt: string\n    role: string\n  }\n  /** Fallback text (initials) */\n  fallbackText: string\n  /** Current state */\n  state: {\n    size: AvatarSize\n    hasSrc: boolean\n  }\n}\n\n/**\n * Extract initials from a name or fallback string.\n * Takes first letter of first two words, uppercased.\n */\nexport function getInitials(name: string): string {\n  const parts = name.trim().split(/\\s+/)\n  if (parts.length === 0 || parts[0] === '') return ''\n  if (parts.length === 1) return parts[0].charAt(0).toUpperCase()\n  return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase()\n}\n\nexport function createAvatar(props: AvatarProps = {}): AvatarAPI {\n  const { src, alt = '', fallback = '', size = 'md' } = props\n\n  // role=\"img\" makes its children presentational, so it is only applied when\n  // the avatar itself has a name; otherwise the inner <img alt> / fallback\n  // text stays exposed.\n  const ariaProps: Partial<AccessibilityProps> = {}\n  if (alt) {\n    ariaProps.role = 'img'\n    ariaProps['aria-label'] = alt\n  }\n\n  const fallbackText = fallback ? getInitials(fallback) : (alt ? getInitials(alt) : '')\n\n  const dataAttributes: Record<string, string> = {\n    'data-slot': 'avatar',\n  }\n\n  return {\n    ariaProps,\n    dataAttributes,\n    imageProps: {\n      alt,\n      role: 'img',\n    },\n    fallbackText,\n    state: {\n      size,\n      hasSrc: !!src,\n    },\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\nimport type { TokenContract } from '@refraction-ui/shared'\n\nexport const avatarTokens: TokenContract = {\n  name: 'avatar',\n  tokens: {\n    bg: { variable: '--rfr-avatar-bg', fallback: 'hsl(var(--muted))' },\n    fg: { variable: '--rfr-avatar-fg', fallback: 'hsl(var(--muted-foreground))' },\n    border: { variable: '--rfr-avatar-border', fallback: 'hsl(var(--border))' },\n  },\n}\n\nexport const avatarVariants = cva({\n  base: 'relative flex shrink-0 overflow-hidden',\n  variants: {\n    shape: {\n      circle: 'rounded-full',\n      square: 'rounded-md',\n    },\n    size: {\n      xs: 'h-6 w-6',\n      sm: 'h-8 w-8',\n      md: 'h-10 w-10',\n      lg: 'h-12 w-12',\n      xl: 'h-16 w-16',\n    },\n  },\n  defaultVariants: {\n    shape: 'circle',\n    size: 'md',\n  },\n})\n\nexport const avatarImageVariants = cva({\n  base: 'aspect-square h-full w-full object-cover',\n})\n\nexport const avatarFallbackVariants = cva({\n  base: 'flex h-full w-full items-center justify-center rounded-[inherit] bg-muted text-muted-foreground',\n  variants: {\n    size: {\n      xs: 'text-xs',\n      sm: 'text-xs',\n      md: 'text-sm',\n      lg: 'text-base',\n      xl: 'text-lg',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n", "import * as React from 'react'\nimport {\n  createAvatar,\n  avatarVariants,\n  avatarImageVariants,\n  avatarFallbackVariants,\n  type AvatarSize,\n  type AvatarShape,\n} from '@refraction-ui/avatar'\nimport { cn } from '@refraction-ui/shared'\n\n/* ─── Context ──────────────────────────────────────────────────── */\ninterface AvatarContextValue {\n  size: AvatarSize\n  imageLoaded: boolean\n  imageError: boolean\n  setImageLoaded: (loaded: boolean) => void\n  setImageError: (error: boolean) => void\n}\n\nconst AvatarContext = React.createContext<AvatarContextValue>({\n  size: 'md',\n  imageLoaded: false,\n  imageError: false,\n  setImageLoaded: () => {},\n  setImageError: () => {},\n})\n\n/* ─── Avatar (root) ────────────────────────────────────────────── */\nexport interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {\n  size?: AvatarSize\n  /** `circle` (default) or `square` (rounded corners) — e.g. for teams and organisations. */\n  shape?: AvatarShape\n}\n\n/**\n * Avatar -- circular image with fallback support.\n * Compound component: use Avatar > AvatarImage + AvatarFallback.\n */\nexport const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(\n  function Avatar({ size = 'md', shape = 'circle', className, children, ...props }, ref) {\n    const [imageLoaded, setImageLoaded] = React.useState(false)\n    const [imageError, setImageError] = React.useState(false)\n\n    const api = createAvatar({ size, alt: props['aria-label'] })\n\n    return (\n      <AvatarContext.Provider value={{ size, imageLoaded, imageError, setImageLoaded, setImageError }}>\n        <span\n          ref={ref}\n          className={cn(avatarVariants({ size, shape }), className)}\n          {...api.ariaProps}\n          {...api.dataAttributes}\n          {...props}\n        >\n          {children}\n        </span>\n      </AvatarContext.Provider>\n    )\n  },\n)\n\n/* ─── AvatarImage ──────────────────────────────────────────────── */\nexport interface AvatarImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {}\n\nexport const AvatarImage = React.forwardRef<HTMLImageElement, AvatarImageProps>(\n  function AvatarImage({ className, src, alt = '', onLoad, onError, ...props }, ref) {\n    const { imageError, setImageLoaded, setImageError } = React.useContext(AvatarContext)\n\n    React.useEffect(() => {\n      setImageLoaded(false)\n      setImageError(false)\n    }, [src, setImageLoaded, setImageError])\n\n    const handleLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {\n      setImageLoaded(true)\n      onLoad?.(e)\n    }\n\n    const handleError = (e: React.SyntheticEvent<HTMLImageElement>) => {\n      setImageError(true)\n      onError?.(e)\n    }\n\n    if (imageError) return null\n\n    return (\n      <img\n        ref={ref}\n        className={cn(avatarImageVariants(), className)}\n        src={src}\n        alt={alt}\n        onLoad={handleLoad}\n        onError={handleError}\n        {...props}\n      />\n    )\n  },\n)\n\n/* ─── AvatarFallback ───────────────────────────────────────────── */\nexport interface AvatarFallbackProps extends React.HTMLAttributes<HTMLSpanElement> {}\n\nexport const AvatarFallback = React.forwardRef<HTMLSpanElement, AvatarFallbackProps>(\n  function AvatarFallback({ className, children, ...props }, ref) {\n    const { size, imageLoaded, imageError } = React.useContext(AvatarContext)\n\n    if (imageLoaded && !imageError) return null\n\n    return (\n      <span\n        ref={ref}\n        className={cn(avatarFallbackVariants({ size }), className)}\n        {...props}\n      >\n        {children}\n      </span>\n    )\n  },\n)\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { AccessibilityProps } from '@refraction-ui/shared'\n\nexport type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n\n/** Outline of the avatar. */\nexport type AvatarShape = 'circle' | 'square'\n\nexport type AvatarLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error'\n\nexport interface AvatarProps {\n  src?: string\n  alt?: string\n  fallback?: string\n  size?: AvatarSize\n}\n\nexport interface AvatarAPI {\n  /** ARIA attributes to spread on the root element */\n  ariaProps: Partial<AccessibilityProps>\n  /** Data attributes for CSS styling hooks */\n  dataAttributes: Record<string, string>\n  /** Image ARIA props */\n  imageProps: {\n    alt: string\n    role: string\n  }\n  /** Fallback text (initials) */\n  fallbackText: string\n  /** Current state */\n  state: {\n    size: AvatarSize\n    hasSrc: boolean\n  }\n}\n\n/**\n * Extract initials from a name or fallback string.\n * Takes first letter of first two words, uppercased.\n */\nexport function getInitials(name: string): string {\n  const parts = name.trim().split(/\\s+/)\n  if (parts.length === 0 || parts[0] === '') return ''\n  if (parts.length === 1) return parts[0].charAt(0).toUpperCase()\n  return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase()\n}\n\nexport function createAvatar(props: AvatarProps = {}): AvatarAPI {\n  const { src, alt = '', fallback = '', size = 'md' } = props\n\n  // role=\"img\" makes its children presentational, so it is only applied when\n  // the avatar itself has a name; otherwise the inner <img alt> / fallback\n  // text stays exposed.\n  const ariaProps: Partial<AccessibilityProps> = {}\n  if (alt) {\n    ariaProps.role = 'img'\n    ariaProps['aria-label'] = alt\n  }\n\n  const fallbackText = fallback ? getInitials(fallback) : (alt ? getInitials(alt) : '')\n\n  const dataAttributes: Record<string, string> = {\n    'data-slot': 'avatar',\n  }\n\n  return {\n    ariaProps,\n    dataAttributes,\n    imageProps: {\n      alt,\n      role: 'img',\n    },\n    fallbackText,\n    state: {\n      size,\n      hasSrc: !!src,\n    },\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\nimport type { TokenContract } from '@refraction-ui/shared'\n\nexport const avatarTokens: TokenContract = {\n  name: 'avatar',\n  tokens: {\n    bg: { variable: '--rfr-avatar-bg', fallback: 'hsl(var(--muted))' },\n    fg: { variable: '--rfr-avatar-fg', fallback: 'hsl(var(--muted-foreground))' },\n    border: { variable: '--rfr-avatar-border', fallback: 'hsl(var(--border))' },\n  },\n}\n\nexport const avatarVariants = cva({\n  base: 'relative flex shrink-0 overflow-hidden',\n  variants: {\n    shape: {\n      circle: 'rounded-full',\n      square: 'rounded-md',\n    },\n    size: {\n      xs: 'h-6 w-6',\n      sm: 'h-8 w-8',\n      md: 'h-10 w-10',\n      lg: 'h-12 w-12',\n      xl: 'h-16 w-16',\n    },\n  },\n  defaultVariants: {\n    shape: 'circle',\n    size: 'md',\n  },\n})\n\nexport const avatarImageVariants = cva({\n  base: 'aspect-square h-full w-full object-cover',\n})\n\nexport const avatarFallbackVariants = cva({\n  base: 'flex h-full w-full items-center justify-center rounded-[inherit] bg-muted text-muted-foreground',\n  variants: {\n    size: {\n      xs: 'text-xs',\n      sm: 'text-xs',\n      md: 'text-sm',\n      lg: 'text-base',\n      xl: 'text-lg',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n", "import * as React from 'react'\nimport {\n  createAvatar,\n  avatarVariants,\n  avatarImageVariants,\n  avatarFallbackVariants,\n  type AvatarSize,\n  type AvatarShape,\n} from '@refraction-ui/avatar'\nimport { cn } from '@refraction-ui/shared'\n\n/* ─── Context ──────────────────────────────────────────────────── */\ninterface AvatarContextValue {\n  size: AvatarSize\n  imageLoaded: boolean\n  imageError: boolean\n  setImageLoaded: (loaded: boolean) => void\n  setImageError: (error: boolean) => void\n}\n\nconst AvatarContext = React.createContext<AvatarContextValue>({\n  size: 'md',\n  imageLoaded: false,\n  imageError: false,\n  setImageLoaded: () => {},\n  setImageError: () => {},\n})\n\n/* ─── Avatar (root) ────────────────────────────────────────────── */\nexport interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {\n  size?: AvatarSize\n  /** `circle` (default) or `square` (rounded corners) — e.g. for teams and organisations. */\n  shape?: AvatarShape\n}\n\n/**\n * Avatar -- circular image with fallback support.\n * Compound component: use Avatar > AvatarImage + AvatarFallback.\n */\nexport const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(\n  function Avatar({ size = 'md', shape = 'circle', className, children, ...props }, ref) {\n    const [imageLoaded, setImageLoaded] = React.useState(false)\n    const [imageError, setImageError] = React.useState(false)\n\n    const api = createAvatar({ size, alt: props['aria-label'] })\n\n    return (\n      <AvatarContext.Provider value={{ size, imageLoaded, imageError, setImageLoaded, setImageError }}>\n        <span\n          ref={ref}\n          className={cn(avatarVariants({ size, shape }), className)}\n          {...api.ariaProps}\n          {...api.dataAttributes}\n          {...props}\n        >\n          {children}\n        </span>\n      </AvatarContext.Provider>\n    )\n  },\n)\n\n/* ─── AvatarImage ──────────────────────────────────────────────── */\nexport interface AvatarImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {}\n\nexport const AvatarImage = React.forwardRef<HTMLImageElement, AvatarImageProps>(\n  function AvatarImage({ className, src, alt = '', onLoad, onError, ...props }, ref) {\n    const { imageError, setImageLoaded, setImageError } = React.useContext(AvatarContext)\n\n    const imageRef = React.useRef<HTMLImageElement | null>(null)\n    const mergedRef = React.useCallback((node: HTMLImageElement | null) => {\n      imageRef.current = node\n      if (typeof ref === 'function') {\n        const cleanup: unknown = ref(node)\n        if (typeof cleanup === 'function') {\n          return () => {\n            imageRef.current = null\n            cleanup()\n          }\n        }\n      } else if (ref) ref.current = node\n    }, [ref])\n\n    React.useEffect(() => {\n      // SSR images may finish before hydration installs event handlers. Read\n      // the native result instead of erasing a cached success or failure.\n      const image = imageRef.current\n      setImageLoaded(!!image?.complete && image.naturalWidth > 0)\n      setImageError(!!image?.complete && image.naturalWidth === 0)\n    }, [src, setImageLoaded, setImageError])\n\n    const handleLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {\n      setImageLoaded(true)\n      onLoad?.(e)\n    }\n\n    const handleError = (e: React.SyntheticEvent<HTMLImageElement>) => {\n      setImageError(true)\n      onError?.(e)\n    }\n\n    if (imageError) return null\n\n    return (\n      <img\n        ref={mergedRef}\n        className={cn(avatarImageVariants(), className)}\n        src={src}\n        alt={alt}\n        onLoad={handleLoad}\n        onError={handleError}\n        {...props}\n      />\n    )\n  },\n)\n\n/* ─── AvatarFallback ───────────────────────────────────────────── */\nexport interface AvatarFallbackProps extends React.HTMLAttributes<HTMLSpanElement> {}\n\nexport const AvatarFallback = React.forwardRef<HTMLSpanElement, AvatarFallbackProps>(\n  function AvatarFallback({ className, children, ...props }, ref) {\n    const { size, imageLoaded, imageError } = React.useContext(AvatarContext)\n\n    if (imageLoaded && !imageError) return null\n\n    return (\n      <span\n        ref={ref}\n        className={cn(avatarFallbackVariants({ size }), className)}\n        {...props}\n      >\n        {children}\n      </span>\n    )\n  },\n)\n"],
+  "mappings": "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",
   "names": ["Avatar", "AvatarImage", "AvatarFallback"]
 }

package/dist/react-composer.js

@@ -1233,6 +1233,54 @@ function createEmojiTrigger(options = {}) {
     }
   };
 }
+var DEFAULT_COMPOSER_IMAGE_MAX_BYTES = 100 * 1024 * 1024;
+var ComposerImagePasteError = class extends Error {
+  constructor(reason, fileName) {
+    super(`Cannot paste image ${fileName}: ${reason}`);
+    this.reason = reason;
+    this.fileName = fileName;
+    this.name = "ComposerImagePasteError";
+  }
+  reason;
+  fileName;
+};
+function composerClipboardImages(files, maxBytes = DEFAULT_COMPOSER_IMAGE_MAX_BYTES) {
+  const images = Array.from(files).filter((file) => file.type === "image/png" || file.type === "image/jpeg");
+  for (const image of images) {
+    if (image.size === 0) throw new ComposerImagePasteError("empty", image.name);
+    if (image.size > maxBytes) throw new ComposerImagePasteError("max-size", image.name);
+  }
+  return images;
+}
+function splitsSurrogate(text, offset) {
+  return /^[\uD800-\uDBFF][\uDC00-\uDFFF]$/.test(text.slice(offset - 1, offset + 1));
+}
+function pasteComposerField(api, field, text, insertText) {
+  api.setSelection({ start: field.selectionStart, end: field.selectionEnd });
+  if (text === "") return;
+  const before = field.value;
+  api.pasteText(text);
+  const after = api.getState();
+  if (after.value !== before) {
+    let start = 0;
+    while (start < before.length && start < after.value.length && before[start] === after.value[start]) start++;
+    if (splitsSurrogate(before, start) || splitsSurrogate(after.value, start)) start--;
+    let end = before.length;
+    let nextEnd = after.value.length;
+    while (end > start && nextEnd > start && before[end - 1] === after.value[nextEnd - 1]) {
+      end--;
+      nextEnd--;
+    }
+    if (splitsSurrogate(before, end) || splitsSurrogate(after.value, nextEnd)) {
+      end++;
+      nextEnd++;
+    }
+    field.setSelectionRange(start, end);
+    insertText?.(after.value.slice(start, nextEnd));
+    if (field.value !== after.value) field.value = after.value;
+  }
+  field.setSelectionRange(after.selection.start, after.selection.end);
+}
 
 // ../react-composer/dist/index.js
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
@@ -1287,6 +1335,7 @@ var DEFAULT_COMPOSER_STRINGS = {
   noMatchesLabel: (query) => `No matches for "${query}"`,
   loadingLabel: "Loading suggestions\u2026",
   retryLabel: "Retry",
+  pasteFailedNotice: "Could not paste images. Try attaching the file instead.",
   trimmedNotice: "Pasted text was trimmed to fit the length limit",
   counterLabel: (remaining) => `${remaining} characters remaining`,
   editingLabel: "Editing message",
@@ -1359,6 +1408,8 @@ var RefractionComposer = React2.forwardRef(
     maxLines = 6,
     maxLength,
     maxAttachments,
+    maxAttachmentSizeBytes,
+    acceptAttachment,
     disabled = false,
     readOnly = false,
     busy = false,
@@ -1387,6 +1438,8 @@ var RefractionComposer = React2.forwardRef(
     onEditCancel,
     onTypingActivity,
     onAttachmentAdd,
+    onImagesPasted,
+    onPasteError,
     onAttachmentRejected,
     onEvent,
     apiRef,
@@ -1403,6 +1456,9 @@ var RefractionComposer = React2.forwardRef(
     const onStopRef = useLatestRef(onStop);
     const onEventRef = useLatestRef(onEvent);
     const onTypingActivityRef = useLatestRef(onTypingActivity);
+    const onImagesPastedRef = useLatestRef(onImagesPasted);
+    const onPasteErrorRef = useLatestRef(onPasteError);
+    const [pasteFailed, setPasteFailed] = React2.useState(false);
     const onAttachmentAddRef = useLatestRef(onAttachmentAdd);
     const onAttachmentRejectedRef = useLatestRef(onAttachmentRejected);
     const onEditLastRequestedRef = useLatestRef(onEditLastRequested);
@@ -1446,6 +1502,8 @@ var RefractionComposer = React2.forwardRef(
     }
     configRef.current.maxLength = maxLength;
     configRef.current.maxAttachments = maxAttachments;
+    configRef.current.maxAttachmentSizeBytes = maxAttachmentSizeBytes;
+    configRef.current.acceptAttachment = acceptAttachment;
     configRef.current.validator = validator;
     configRef.current.replyToMessageId = replyToMessageId;
     configRef.current.draftStore = draftStore;
@@ -1464,6 +1522,7 @@ var RefractionComposer = React2.forwardRef(
         exitTimers.clear();
       };
     }, []);
+    const pastingRef = React2.useRef(false);
     const textareaRef = React2.useRef(null);
     const highlightRef = React2.useRef(null);
     const rootRef = React2.useRef(null);
@@ -1475,7 +1534,8 @@ var RefractionComposer = React2.forwardRef(
       },
       [forwardedRef]
     );
-    const idBase = React2.useRef(id ?? generateId("composer")).current;
+    const reactId = React2.useId();
+    const idBase = React2.useRef(id ?? `composer-${reactId}`).current;
     const listId = `${idBase}-listbox`;
     const optionId = (index) => `${idBase}-option-${index}`;
     React2.useEffect(() => {
@@ -1544,10 +1604,12 @@ var RefractionComposer = React2.forwardRef(
       end: el.selectionEnd ?? el.value.length
     });
     const handleChange = (event) => {
+      if (pastingRef.current) return;
       const el = event.currentTarget;
       withValueChange(() => api.setValue(el.value, readSelection(el)));
     };
     const handleSelect = (event) => {
+      if (pastingRef.current) return;
       const el = event.currentTarget;
       const next = readSelection(el);
       const current = api.getState().selection;
@@ -1639,7 +1701,7 @@ var RefractionComposer = React2.forwardRef(
             continue;
           }
           const added = api.getState().attachments.find((a) => a.id === attachmentId);
-          if (added) onAttachmentAddRef.current?.(added);
+          if (added) onAttachmentAddRef.current?.(added, file);
         }
       },
       [api, onAttachmentAddRef]
@@ -1672,14 +1734,40 @@ var RefractionComposer = React2.forwardRef(
       [api]
     );
     const handlePaste = (event) => {
-      const files = event.clipboardData?.files;
-      if (files && files.length > 0) {
-        event.preventDefault();
+      event.preventDefault();
+      const current = api.getState();
+      if (current.disabled || current.readOnly || current.isComposing) return;
+      setPasteFailed(false);
+      let files;
+      let images;
+      let text;
+      try {
+        files = Array.from(event.clipboardData?.files ?? []);
+        text = event.clipboardData?.getData("text/plain") ?? "";
+        if (onImagesPastedRef.current) images = composerClipboardImages(files, maxAttachmentSizeBytes);
+      } catch (error) {
+        setPasteFailed(true);
+        onPasteErrorRef.current?.(error);
+        return;
+      }
+      if (images === void 0 && files.length > 0) {
         addFiles(files);
         return;
       }
-      event.preventDefault();
-      withValueChange(() => api.pasteText(event.clipboardData?.getData("text/plain") ?? ""));
+      pastingRef.current = true;
+      try {
+        withValueChange(() => pasteComposerField(
+          api,
+          event.currentTarget,
+          text,
+          (inserted) => typeof document.execCommand === "function" && document.execCommand("insertText", false, inserted)
+        ));
+      } finally {
+        pastingRef.current = false;
+      }
+      if (images !== void 0) {
+        if (images.length > 0) onImagesPastedRef.current?.(images);
+      }
     };
     const [dragActive, setDragActive] = React2.useState(false);
     const dragHasPayload = (event) => {
@@ -1880,6 +1968,7 @@ var RefractionComposer = React2.forwardRef(
                     }
                   )
                 ] }),
+                pasteFailed && /* @__PURE__ */ jsx("div", { role: "alert", className: "px-3 pt-2 text-xs text-destructive", children: strings.pasteFailedNotice }),
                 trimmedNoticeVisible && /* @__PURE__ */ jsx("div", { role: "status", className: "px-3 pt-2 text-xs text-muted-foreground", children: strings.trimmedNotice }),
                 state.attachments.length > 0 && /* @__PURE__ */ jsx("div", { className: composerTrayClass, children: state.attachments.map((attachment) => /* @__PURE__ */ jsxs(
                   "span",
@@ -2015,11 +2104,14 @@ var RefractionComposer = React2.forwardRef(
   }
 );
 export {
+  ComposerImagePasteError,
+  DEFAULT_COMPOSER_IMAGE_MAX_BYTES,
   DEFAULT_COMPOSER_STRINGS,
   RefractionComposer,
   composerAccessoryPanelClass,
   composerAccessoryToggleVariants,
   composerAttachmentChipVariants,
+  composerClipboardImages,
   composerCounterVariants,
   composerFieldClass,
   composerMenuClass,