@refraction-ui/react 0.9.2 → 0.10.0

package/dist/internal/react-conversation/index.d.cts

@@ -0,0 +1,97 @@
+import { ConversationState, ConversationAPI, ConversationConfig, MessageAttachment } from '../conversation/index.cjs';
+export { ChatAuthor, ChatMessage, ChatRole, ChatTransport, Conversation, ConversationAPI, ConversationConfig, ConversationState, MessageStatus, SendContext, SendOptions, ThreadingMode, TransportChunk, createConversation, findMessage, getReplyCount, rootIdOf, selectMainTimeline, selectReplies, selectRoots, selectThreadMessages, selectTimelineFromState } from '../conversation/index.cjs';
+import * as React from 'react';
+
+interface UseConversationResult {
+    /** Live store snapshot (re-renders on change) */
+    state: ConversationState;
+    /** The underlying store, for advanced/imperative use */
+    api: ConversationAPI;
+    sendMessage: ConversationAPI['sendMessage'];
+    newConversation: ConversationAPI['newConversation'];
+    selectConversation: ConversationAPI['selectConversation'];
+    deleteConversation: ConversationAPI['deleteConversation'];
+    renameConversation: ConversationAPI['renameConversation'];
+    editMessage: ConversationAPI['editMessage'];
+    deleteMessage: ConversationAPI['deleteMessage'];
+    react: ConversationAPI['react'];
+    retryLast: ConversationAPI['retryLast'];
+    stop: ConversationAPI['stop'];
+    openThread: ConversationAPI['openThread'];
+    closeThread: ConversationAPI['closeThread'];
+    setThreadingMode: ConversationAPI['setThreadingMode'];
+}
+/**
+ * useConversation — binds the headless `createConversation` store to React via
+ * `useSyncExternalStore`. The store is created once; a changing `config.transport`
+ * is hot-swapped so consumers can wire the backend after mount.
+ */
+declare function useConversation(config?: ConversationConfig): UseConversationResult;
+
+/** A `/` command entry. */
+interface SlashCommand {
+    id: string;
+    label: string;
+    description?: string;
+    icon?: string;
+    /** Text inserted into the composer when chosen. If omitted, `onSlashCommand` fires and the trigger is removed. */
+    insertText?: string;
+}
+/** An `@` mention candidate. */
+interface Mention {
+    id: string;
+    label: string;
+    avatarUrl?: string;
+}
+interface ComposerProps {
+    placeholder?: string;
+    busy?: boolean;
+    /** `/` command palette entries */
+    slashCommands?: SlashCommand[];
+    /** `@` mention candidates — array or (async) resolver of a query */
+    mentions?: Mention[] | ((query: string) => Mention[] | Promise<Mention[]>);
+    /** Show the markdown formatting toolbar (default true) */
+    toolbar?: boolean;
+    /** Enable `:` emoji autocomplete (default true) */
+    emoji?: boolean;
+    /** Enable the attach button (default true) */
+    attachments?: boolean;
+    onSubmit: (content: string, attachments?: MessageAttachment[]) => void;
+    onStop?: () => void;
+    /** Called when a `/` command without `insertText` is chosen */
+    onSlashCommand?: (cmd: SlashCommand) => void;
+    autoFocus?: boolean;
+}
+/**
+ * Composer — rich message input: markdown formatting toolbar + Cmd/Ctrl shortcuts,
+ * and `/` command, `@` mention, and `:` emoji autocomplete menus.
+ */
+declare function Composer({ placeholder, busy, slashCommands, mentions, toolbar, emoji, attachments, onSubmit, onStop, onSlashCommand, autoFocus, }: ComposerProps): React.DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;
+
+interface ChatProps {
+    conversation: UseConversationResult;
+    showConversationList?: boolean;
+    showModeToggle?: boolean;
+    placeholder?: string;
+    currentUserId?: string;
+    emptyState?: React.ReactNode;
+    className?: string;
+    slashCommands?: SlashCommand[];
+    mentions?: Mention[] | ((query: string) => Mention[] | Promise<Mention[]>);
+    onSlashCommand?: (cmd: SlashCommand) => void;
+    composerToolbar?: boolean;
+}
+/**
+ * Chat — batteries-included composite over `useConversation()`:
+ * conversation sidebar + main timeline + rich composer + thread side panel.
+ * Hybrid layout: assistant replies full-width, user messages in a right-aligned
+ * bubble. Markdown/code/gifs, reactions, edit/delete, streaming, and a composer
+ * with `/` commands, `@` mentions, `:` emoji, and a formatting toolbar.
+ */
+declare function Chat({ conversation, showConversationList, showModeToggle, placeholder, currentUserId, emptyState, className, slashCommands, mentions, onSlashCommand, composerToolbar, }: ChatProps): React.DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;
+
+export { Chat, type ChatProps, Composer, type ComposerProps, type Mention, type SlashCommand, type UseConversationResult, useConversation };

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

@@ -0,0 +1,97 @@
+import { ConversationState, ConversationAPI, ConversationConfig, MessageAttachment } from '../conversation/index.js';
+export { ChatAuthor, ChatMessage, ChatRole, ChatTransport, Conversation, ConversationAPI, ConversationConfig, ConversationState, MessageStatus, SendContext, SendOptions, ThreadingMode, TransportChunk, createConversation, findMessage, getReplyCount, rootIdOf, selectMainTimeline, selectReplies, selectRoots, selectThreadMessages, selectTimelineFromState } from '../conversation/index.js';
+import * as React from 'react';
+
+interface UseConversationResult {
+    /** Live store snapshot (re-renders on change) */
+    state: ConversationState;
+    /** The underlying store, for advanced/imperative use */
+    api: ConversationAPI;
+    sendMessage: ConversationAPI['sendMessage'];
+    newConversation: ConversationAPI['newConversation'];
+    selectConversation: ConversationAPI['selectConversation'];
+    deleteConversation: ConversationAPI['deleteConversation'];
+    renameConversation: ConversationAPI['renameConversation'];
+    editMessage: ConversationAPI['editMessage'];
+    deleteMessage: ConversationAPI['deleteMessage'];
+    react: ConversationAPI['react'];
+    retryLast: ConversationAPI['retryLast'];
+    stop: ConversationAPI['stop'];
+    openThread: ConversationAPI['openThread'];
+    closeThread: ConversationAPI['closeThread'];
+    setThreadingMode: ConversationAPI['setThreadingMode'];
+}
+/**
+ * useConversation — binds the headless `createConversation` store to React via
+ * `useSyncExternalStore`. The store is created once; a changing `config.transport`
+ * is hot-swapped so consumers can wire the backend after mount.
+ */
+declare function useConversation(config?: ConversationConfig): UseConversationResult;
+
+/** A `/` command entry. */
+interface SlashCommand {
+    id: string;
+    label: string;
+    description?: string;
+    icon?: string;
+    /** Text inserted into the composer when chosen. If omitted, `onSlashCommand` fires and the trigger is removed. */
+    insertText?: string;
+}
+/** An `@` mention candidate. */
+interface Mention {
+    id: string;
+    label: string;
+    avatarUrl?: string;
+}
+interface ComposerProps {
+    placeholder?: string;
+    busy?: boolean;
+    /** `/` command palette entries */
+    slashCommands?: SlashCommand[];
+    /** `@` mention candidates — array or (async) resolver of a query */
+    mentions?: Mention[] | ((query: string) => Mention[] | Promise<Mention[]>);
+    /** Show the markdown formatting toolbar (default true) */
+    toolbar?: boolean;
+    /** Enable `:` emoji autocomplete (default true) */
+    emoji?: boolean;
+    /** Enable the attach button (default true) */
+    attachments?: boolean;
+    onSubmit: (content: string, attachments?: MessageAttachment[]) => void;
+    onStop?: () => void;
+    /** Called when a `/` command without `insertText` is chosen */
+    onSlashCommand?: (cmd: SlashCommand) => void;
+    autoFocus?: boolean;
+}
+/**
+ * Composer — rich message input: markdown formatting toolbar + Cmd/Ctrl shortcuts,
+ * and `/` command, `@` mention, and `:` emoji autocomplete menus.
+ */
+declare function Composer({ placeholder, busy, slashCommands, mentions, toolbar, emoji, attachments, onSubmit, onStop, onSlashCommand, autoFocus, }: ComposerProps): React.DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;
+
+interface ChatProps {
+    conversation: UseConversationResult;
+    showConversationList?: boolean;
+    showModeToggle?: boolean;
+    placeholder?: string;
+    currentUserId?: string;
+    emptyState?: React.ReactNode;
+    className?: string;
+    slashCommands?: SlashCommand[];
+    mentions?: Mention[] | ((query: string) => Mention[] | Promise<Mention[]>);
+    onSlashCommand?: (cmd: SlashCommand) => void;
+    composerToolbar?: boolean;
+}
+/**
+ * Chat — batteries-included composite over `useConversation()`:
+ * conversation sidebar + main timeline + rich composer + thread side panel.
+ * Hybrid layout: assistant replies full-width, user messages in a right-aligned
+ * bubble. Markdown/code/gifs, reactions, edit/delete, streaming, and a composer
+ * with `/` commands, `@` mentions, `:` emoji, and a formatting toolbar.
+ */
+declare function Chat({ conversation, showConversationList, showModeToggle, placeholder, currentUserId, emptyState, className, slashCommands, mentions, onSlashCommand, composerToolbar, }: ChatProps): React.DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;
+
+export { Chat, type ChatProps, Composer, type ComposerProps, type Mention, type SlashCommand, type UseConversationResult, useConversation };

package/dist/internal/react-cookie-consent/index.d.cts

@@ -0,0 +1,46 @@
+import { CookieConsentState, CookieConsentAPI, CookieConsentConfig } from '../cookie-consent/index.cjs';
+export { ConsentPreferences, CookieCategory, CookieConsentAPI, CookieConsentConfig, CookieConsentState, CookieStorage, DEFAULT_CATEGORIES, createCookieConsent } from '../cookie-consent/index.cjs';
+import * as React from 'react';
+
+interface UseCookieConsentResult {
+    state: CookieConsentState;
+    api: CookieConsentAPI;
+    acceptAll: CookieConsentAPI['acceptAll'];
+    rejectAll: CookieConsentAPI['rejectAll'];
+    savePreferences: CookieConsentAPI['savePreferences'];
+    setPreference: CookieConsentAPI['setPreference'];
+    reset: CookieConsentAPI['reset'];
+    openSettings: CookieConsentAPI['openSettings'];
+    close: CookieConsentAPI['close'];
+}
+/**
+ * useCookieConsent — binds the headless cookie-consent store to React via
+ * `useSyncExternalStore`, defaulting persistence to localStorage.
+ */
+declare function useCookieConsent(config?: CookieConsentConfig): UseCookieConsentResult;
+
+interface CookieConsentProps {
+    /** Result of `useCookieConsent()` */
+    consent: UseCookieConsentResult;
+    /** Banner position (default 'bottom') */
+    position?: 'bottom' | 'top';
+    title?: string;
+    description?: React.ReactNode;
+    /** Link to the full cookie/privacy policy */
+    policyUrl?: string;
+    policyLabel?: string;
+    className?: string;
+}
+/**
+ * CookieConsent — batteries-included consent banner over `useCookieConsent()`.
+ * Shows a prompt (Accept all / Reject all / Manage), with a settings view of
+ * per-category toggles. Renders nothing once the user has consented.
+ */
+declare function CookieConsent({ consent, position, title, description, policyUrl, policyLabel, className, }: CookieConsentProps): React.DetailedReactHTMLElement<{
+    className: string;
+    role: "dialog";
+    'aria-label': string;
+    'aria-modal': false;
+}, HTMLElement> | null;
+
+export { CookieConsent, type CookieConsentProps, type UseCookieConsentResult, useCookieConsent };

package/dist/internal/react-cookie-consent/index.d.ts

@@ -0,0 +1,46 @@
+import { CookieConsentState, CookieConsentAPI, CookieConsentConfig } from '../cookie-consent/index.js';
+export { ConsentPreferences, CookieCategory, CookieConsentAPI, CookieConsentConfig, CookieConsentState, CookieStorage, DEFAULT_CATEGORIES, createCookieConsent } from '../cookie-consent/index.js';
+import * as React from 'react';
+
+interface UseCookieConsentResult {
+    state: CookieConsentState;
+    api: CookieConsentAPI;
+    acceptAll: CookieConsentAPI['acceptAll'];
+    rejectAll: CookieConsentAPI['rejectAll'];
+    savePreferences: CookieConsentAPI['savePreferences'];
+    setPreference: CookieConsentAPI['setPreference'];
+    reset: CookieConsentAPI['reset'];
+    openSettings: CookieConsentAPI['openSettings'];
+    close: CookieConsentAPI['close'];
+}
+/**
+ * useCookieConsent — binds the headless cookie-consent store to React via
+ * `useSyncExternalStore`, defaulting persistence to localStorage.
+ */
+declare function useCookieConsent(config?: CookieConsentConfig): UseCookieConsentResult;
+
+interface CookieConsentProps {
+    /** Result of `useCookieConsent()` */
+    consent: UseCookieConsentResult;
+    /** Banner position (default 'bottom') */
+    position?: 'bottom' | 'top';
+    title?: string;
+    description?: React.ReactNode;
+    /** Link to the full cookie/privacy policy */
+    policyUrl?: string;
+    policyLabel?: string;
+    className?: string;
+}
+/**
+ * CookieConsent — batteries-included consent banner over `useCookieConsent()`.
+ * Shows a prompt (Accept all / Reject all / Manage), with a settings view of
+ * per-category toggles. Renders nothing once the user has consented.
+ */
+declare function CookieConsent({ consent, position, title, description, policyUrl, policyLabel, className, }: CookieConsentProps): React.DetailedReactHTMLElement<{
+    className: string;
+    role: "dialog";
+    'aria-label': string;
+    'aria-modal': false;
+}, HTMLElement> | null;
+
+export { CookieConsent, type CookieConsentProps, type UseCookieConsentResult, useCookieConsent };

package/dist/theme.cjs

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 var React2 = require('react');

package/dist/theme.js

@@ -1,3 +1,4 @@
+'use client';
 import { devWarn } from './chunk-VZLV27H2.js';
 import * as React2 from 'react';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refraction-ui/react",
-  "version": "0.9.2",
+  "version": "0.10.0",
   "description": "All Refraction UI React components in one package — headless, accessible, zero-dependency",
   "type": "module",
   "main": "./dist/index.js",
@@ -28,7 +28,7 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsup && cp src/styles.css dist/styles.css && node ./scripts/embed-internal-types.mjs",
+    "build": "tsup && cp src/styles.css dist/styles.css && node ./scripts/embed-internal-types.mjs && node ./scripts/ensure-use-client.mjs",
     "dev": "tsup --watch",
     "test": "vitest run --passWithNoTests",
     "test:watch": "vitest",
@@ -68,7 +68,9 @@
     "@refraction-ui/react-collapsible": "workspace:*",
     "@refraction-ui/react-combobox": "workspace:*",
     "@refraction-ui/react-command": "workspace:*",
+    "@refraction-ui/react-conversation": "workspace:*",
     "@refraction-ui/react-content-protection": "workspace:*",
+    "@refraction-ui/react-cookie-consent": "workspace:*",
     "@refraction-ui/react-data-table": "workspace:*",
     "@refraction-ui/react-date-picker": "workspace:*",
     "@refraction-ui/react-device-frame": "workspace:*",