dynim-react 1.0.0

package/dist/builder/CodeChatPanel.js

@@ -0,0 +1,299 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * CodeChatPanel - Self-contained code chat UI component
+ *
+ * Handles all the complexity internally:
+ * - Streaming responses with thinking/text differentiation
+ * - Code edit display with accept/reject
+ * - Loading states, errors
+ *
+ * Consuming app just drops this in and it works.
+ */
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { useBuilder } from './BuilderProvider';
+// Inline styles to make component self-contained
+const styles = {
+    container: {
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+        fontSize: '14px',
+        backgroundColor: '#fafafa',
+        borderRadius: '8px',
+        overflow: 'hidden',
+    },
+    messagesArea: {
+        flex: 1,
+        overflowY: 'auto',
+        padding: '16px',
+    },
+    messageBlock: {
+        marginBottom: '16px',
+    },
+    thinkingSection: {
+        marginBottom: '12px',
+    },
+    thinkingHeader: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+        padding: '8px 12px',
+        backgroundColor: '#f0f0f0',
+        borderRadius: '6px',
+        cursor: 'pointer',
+        userSelect: 'none',
+        fontSize: '13px',
+        color: '#666',
+    },
+    thinkingContent: {
+        padding: '12px',
+        backgroundColor: '#f8f8f8',
+        borderRadius: '0 0 6px 6px',
+        borderLeft: '3px solid #ddd',
+        marginTop: '-6px',
+        fontSize: '13px',
+        color: '#555',
+        whiteSpace: 'pre-wrap',
+        lineHeight: '1.5',
+    },
+    responseText: {
+        padding: '12px 16px',
+        backgroundColor: '#fff',
+        borderRadius: '8px',
+        border: '1px solid #e0e0e0',
+        whiteSpace: 'pre-wrap',
+        lineHeight: '1.6',
+    },
+    editsSection: {
+        marginTop: '16px',
+    },
+    editsHeader: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: '12px',
+    },
+    editsTitle: {
+        fontWeight: 600,
+        color: '#333',
+    },
+    editsActions: {
+        display: 'flex',
+        gap: '8px',
+    },
+    editCard: {
+        backgroundColor: '#fff',
+        border: '1px solid #e0e0e0',
+        borderRadius: '6px',
+        marginBottom: '8px',
+        overflow: 'hidden',
+    },
+    editHeader: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: '8px 12px',
+        backgroundColor: '#f5f5f5',
+        borderBottom: '1px solid #e0e0e0',
+    },
+    editPath: {
+        fontFamily: 'monospace',
+        fontSize: '12px',
+        color: '#666',
+    },
+    editType: {
+        fontSize: '11px',
+        padding: '2px 6px',
+        borderRadius: '3px',
+        fontWeight: 500,
+    },
+    editTypeCreate: {
+        backgroundColor: '#d4edda',
+        color: '#155724',
+    },
+    editTypeReplace: {
+        backgroundColor: '#fff3cd',
+        color: '#856404',
+    },
+    editTypeDelete: {
+        backgroundColor: '#f8d7da',
+        color: '#721c24',
+    },
+    editContent: {
+        padding: '8px 12px',
+        fontFamily: 'monospace',
+        fontSize: '12px',
+        maxHeight: '200px',
+        overflowY: 'auto',
+    },
+    diffLine: {
+        padding: '1px 4px',
+        whiteSpace: 'pre',
+    },
+    diffAdd: {
+        backgroundColor: '#d4edda',
+        color: '#155724',
+    },
+    diffRemove: {
+        backgroundColor: '#f8d7da',
+        color: '#721c24',
+    },
+    button: {
+        padding: '6px 12px',
+        borderRadius: '4px',
+        border: 'none',
+        cursor: 'pointer',
+        fontSize: '13px',
+        fontWeight: 500,
+        transition: 'background-color 0.2s',
+    },
+    buttonPrimary: {
+        backgroundColor: '#4CAF50',
+        color: '#fff',
+    },
+    buttonSecondary: {
+        backgroundColor: '#f0f0f0',
+        color: '#333',
+    },
+    buttonDisabled: {
+        opacity: 0.5,
+        cursor: 'not-allowed',
+    },
+    inputArea: {
+        padding: '12px 16px',
+        borderTop: '1px solid #e0e0e0',
+        backgroundColor: '#fff',
+    },
+    form: {
+        display: 'flex',
+        gap: '8px',
+    },
+    input: {
+        flex: 1,
+        padding: '10px 14px',
+        borderRadius: '6px',
+        border: '1px solid #ddd',
+        fontSize: '14px',
+        outline: 'none',
+    },
+    statusBar: {
+        padding: '8px 16px',
+        fontSize: '12px',
+        color: '#666',
+        backgroundColor: '#f5f5f5',
+        borderTop: '1px solid #e0e0e0',
+    },
+    streamingDot: {
+        display: 'inline-block',
+        width: '8px',
+        height: '8px',
+        borderRadius: '50%',
+        backgroundColor: '#4CAF50',
+        marginRight: '8px',
+        animation: 'pulse 1s infinite',
+    },
+    errorBar: {
+        padding: '12px 16px',
+        backgroundColor: '#f8d7da',
+        color: '#721c24',
+        borderTop: '1px solid #f5c6cb',
+    },
+    emptyState: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: '100%',
+        color: '#999',
+        fontSize: '14px',
+    },
+};
+export function CodeChatPanel({ placeholder = 'Ask me to make changes to your code...', className = '', onSave, onAbandon, onError, }) {
+    const { sendCode, saveCode, abandonCode, codeMessage } = useBuilder();
+    const [inputValue, setInputValue] = useState('');
+    const [thinkingExpanded, setThinkingExpanded] = useState(false);
+    const [isSaving, setIsSaving] = useState(false);
+    const messagesRef = useRef(null);
+    const { thinking, text, edits, status, error } = codeMessage;
+    // Auto-scroll on new content
+    useEffect(() => {
+        if (messagesRef.current) {
+            messagesRef.current.scrollTop = messagesRef.current.scrollHeight;
+        }
+    }, [thinking, text, edits]);
+    // Notify on errors
+    useEffect(() => {
+        if (error) {
+            onError?.(error);
+        }
+    }, [error, onError]);
+    const handleSubmit = useCallback(async (e) => {
+        e.preventDefault();
+        const query = inputValue.trim();
+        if (!query || status === 'streaming')
+            return;
+        setInputValue('');
+        setThinkingExpanded(false);
+        await sendCode(query);
+    }, [inputValue, status, sendCode]);
+    const handleSave = useCallback(async () => {
+        setIsSaving(true);
+        try {
+            await saveCode();
+            onSave?.();
+        }
+        catch (err) {
+            onError?.(err.message);
+        }
+        finally {
+            setIsSaving(false);
+        }
+    }, [saveCode, onSave, onError]);
+    const handleAbandon = useCallback(async () => {
+        setIsSaving(true);
+        try {
+            await abandonCode();
+            onAbandon?.();
+        }
+        catch (err) {
+            onError?.(err.message);
+        }
+        finally {
+            setIsSaving(false);
+        }
+    }, [abandonCode, onAbandon, onError]);
+    const isStreaming = status === 'streaming';
+    const hasContent = thinking || text || edits.length > 0;
+    const hasEdits = edits.length > 0;
+    return (_jsxs("div", { style: styles.container, className: className, children: [_jsx("style", { children: `
+        @keyframes pulse {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0.4; }
+        }
+      ` }), _jsxs("div", { ref: messagesRef, style: styles.messagesArea, children: [!hasContent && status === 'idle' && (_jsx("div", { style: styles.emptyState, children: "Send a message to start editing code" })), hasContent && (_jsxs("div", { style: styles.messageBlock, children: [thinking && (_jsxs("div", { style: styles.thinkingSection, children: [_jsxs("div", { style: styles.thinkingHeader, onClick: () => setThinkingExpanded(!thinkingExpanded), children: [_jsx("span", { children: thinkingExpanded ? '▼' : '▶' }), _jsx("span", { children: "Thinking..." }), _jsxs("span", { style: { marginLeft: 'auto', fontSize: '11px' }, children: [thinking.length, " chars"] })] }), thinkingExpanded && (_jsx("div", { style: styles.thinkingContent, children: thinking }))] })), text && _jsx("div", { style: styles.responseText, children: text }), hasEdits && (_jsxs("div", { style: styles.editsSection, children: [_jsxs("div", { style: styles.editsHeader, children: [_jsxs("span", { style: styles.editsTitle, children: [edits.length, " file", edits.length !== 1 ? 's' : '', " changed"] }), status === 'done' && (_jsxs("div", { style: styles.editsActions, children: [_jsx("button", { style: {
+                                                            ...styles.button,
+                                                            ...styles.buttonSecondary,
+                                                            ...(isSaving ? styles.buttonDisabled : {}),
+                                                        }, onClick: handleAbandon, disabled: isSaving, children: "Reject" }), _jsx("button", { style: {
+                                                            ...styles.button,
+                                                            ...styles.buttonPrimary,
+                                                            ...(isSaving ? styles.buttonDisabled : {}),
+                                                        }, onClick: handleSave, disabled: isSaving, children: "Accept Changes" })] }))] }), edits.map((edit, index) => (_jsx(EditCard, { edit: edit }, `${edit.file_path}-${index}`)))] }))] }))] }), isStreaming && (_jsxs("div", { style: styles.statusBar, children: [_jsx("span", { style: styles.streamingDot }), "Generating response..."] })), status === 'error' && error && (_jsx("div", { style: styles.errorBar, children: error })), _jsx("div", { style: styles.inputArea, children: _jsxs("form", { style: styles.form, onSubmit: handleSubmit, children: [_jsx("input", { type: "text", style: styles.input, placeholder: placeholder, value: inputValue, onChange: (e) => setInputValue(e.target.value), disabled: isStreaming }), _jsx("button", { type: "submit", style: {
+                                ...styles.button,
+                                ...styles.buttonPrimary,
+                                ...(isStreaming || !inputValue.trim() ? styles.buttonDisabled : {}),
+                            }, disabled: isStreaming || !inputValue.trim(), children: "Send" })] }) })] }));
+}
+/** Individual edit card component */
+function EditCard({ edit }) {
+    const [expanded, setExpanded] = useState(true);
+    const typeStyle = {
+        ...styles.editType,
+        ...(edit.type === 'create'
+            ? styles.editTypeCreate
+            : edit.type === 'delete'
+                ? styles.editTypeDelete
+                : styles.editTypeReplace),
+    };
+    return (_jsxs("div", { style: styles.editCard, children: [_jsxs("div", { style: { ...styles.editHeader, cursor: 'pointer' }, onClick: () => setExpanded(!expanded), children: [_jsxs("span", { style: styles.editPath, children: [expanded ? '▼' : '▶', " ", edit.file_path] }), _jsx("span", { style: typeStyle, children: edit.type })] }), expanded && (_jsxs("div", { style: styles.editContent, children: [edit.type === 'delete' && edit.old_content && (_jsx("div", { children: edit.old_content.split('\n').map((line, i) => (_jsxs("div", { style: { ...styles.diffLine, ...styles.diffRemove }, children: ["- ", line] }, i))) })), edit.type === 'create' && edit.new_content && (_jsx("div", { children: edit.new_content.split('\n').map((line, i) => (_jsxs("div", { style: { ...styles.diffLine, ...styles.diffAdd }, children: ["+ ", line] }, i))) })), edit.type === 'replace' && (_jsxs("div", { children: [edit.old_content?.split('\n').map((line, i) => (_jsxs("div", { style: { ...styles.diffLine, ...styles.diffRemove }, children: ["- ", line] }, `old-${i}`))), edit.new_content?.split('\n').map((line, i) => (_jsxs("div", { style: { ...styles.diffLine, ...styles.diffAdd }, children: ["+ ", line] }, `new-${i}`)))] }))] }))] }));
+}

package/dist/builder/EditableZone.d.ts

@@ -0,0 +1,73 @@
+import { type ReactNode, type HTMLAttributes } from 'react';
+/**
+ * Props for zone wrapper components
+ */
+export interface ZoneProps extends HTMLAttributes<HTMLDivElement> {
+    /** Content to wrap */
+    children: ReactNode;
+    /** HTML tag to render (default: 'div') */
+    as?: keyof JSX.IntrinsicElements;
+}
+/**
+ * LockedZone - Wraps content to prevent builder customization
+ *
+ * Elements inside a LockedZone cannot be:
+ * - Dragged/moved by the builder
+ * - Used as drop targets
+ *
+ * Use this to protect parts of your UI that should not be editable,
+ * like navigation, footers, or critical UI elements.
+ *
+ * @example
+ * ```tsx
+ * <LockedZone>
+ *   <Navigation />  {/* Cannot be moved or modified *\/}
+ * </LockedZone>
+ *
+ * <div>
+ *   {/* This content is editable *\/}
+ * </div>
+ * ```
+ *
+ * @example Nested zones
+ * ```tsx
+ * <LockedZone>
+ *   <Sidebar>
+ *     <Logo />  {/* Locked *\/}
+ *     <EditableZone>
+ *       <CustomWidgets />  {/* Editable "island" inside locked zone *\/}
+ *     </EditableZone>
+ *   </Sidebar>
+ * </LockedZone>
+ * ```
+ */
+export declare const LockedZone: import("react").ForwardRefExoticComponent<ZoneProps & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * EditableZone - Explicitly marks content as editable in the builder
+ *
+ * Use this to:
+ * - Create editable "islands" inside a LockedZone
+ * - Explicitly mark content as editable (though content is editable by default)
+ *
+ * @example Create editable area inside locked zone
+ * ```tsx
+ * <LockedZone>
+ *   <Header>
+ *     <Logo />  {/* Locked *\/}
+ *     <EditableZone>
+ *       <UserMenu />  {/* Editable despite being inside LockedZone *\/}
+ *     </EditableZone>
+ *   </Header>
+ * </LockedZone>
+ * ```
+ */
+export declare const EditableZone: import("react").ForwardRefExoticComponent<ZoneProps & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * Alias for LockedZone - more explicit naming
+ */
+export declare const NonCustomizable: import("react").ForwardRefExoticComponent<ZoneProps & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * Alias for EditableZone - more explicit naming
+ */
+export declare const Customizable: import("react").ForwardRefExoticComponent<ZoneProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=EditableZone.d.ts.map

package/dist/builder/EditableZone.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditableZone.d.ts","sourceRoot":"","sources":["../../src/builder/EditableZone.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,cAAc,EAAc,MAAM,OAAO,CAAC;AAGxE;;GAEG;AACH,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC/D,sBAAsB;IACtB,QAAQ,EAAE,SAAS,CAAC;IACpB,0CAA0C;IAC1C,EAAE,CAAC,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAC;CAClC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,UAAU,sGAYtB,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,YAAY,sGAYxB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,sGAAa,CAAC;AAE1C;;GAEG;AACH,eAAO,MAAM,YAAY,sGAAe,CAAC"}

package/dist/builder/EditableZone.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { VISIBILITY_ATTR } from 'dynim-core';
+/**
+ * LockedZone - Wraps content to prevent builder customization
+ *
+ * Elements inside a LockedZone cannot be:
+ * - Dragged/moved by the builder
+ * - Used as drop targets
+ *
+ * Use this to protect parts of your UI that should not be editable,
+ * like navigation, footers, or critical UI elements.
+ *
+ * @example
+ * ```tsx
+ * <LockedZone>
+ *   <Navigation />  {/* Cannot be moved or modified *\/}
+ * </LockedZone>
+ *
+ * <div>
+ *   {/* This content is editable *\/}
+ * </div>
+ * ```
+ *
+ * @example Nested zones
+ * ```tsx
+ * <LockedZone>
+ *   <Sidebar>
+ *     <Logo />  {/* Locked *\/}
+ *     <EditableZone>
+ *       <CustomWidgets />  {/* Editable "island" inside locked zone *\/}
+ *     </EditableZone>
+ *   </Sidebar>
+ * </LockedZone>
+ * ```
+ */
+export const LockedZone = forwardRef(function LockedZone({ children, as: Component = 'div', ...props }, ref) {
+    const zoneProps = {
+        ...props,
+        [VISIBILITY_ATTR]: 'false',
+        ref,
+    };
+    // Use createElement to support dynamic tag
+    const Element = Component;
+    return _jsx(Element, { ...zoneProps, children: children });
+});
+/**
+ * EditableZone - Explicitly marks content as editable in the builder
+ *
+ * Use this to:
+ * - Create editable "islands" inside a LockedZone
+ * - Explicitly mark content as editable (though content is editable by default)
+ *
+ * @example Create editable area inside locked zone
+ * ```tsx
+ * <LockedZone>
+ *   <Header>
+ *     <Logo />  {/* Locked *\/}
+ *     <EditableZone>
+ *       <UserMenu />  {/* Editable despite being inside LockedZone *\/}
+ *     </EditableZone>
+ *   </Header>
+ * </LockedZone>
+ * ```
+ */
+export const EditableZone = forwardRef(function EditableZone({ children, as: Component = 'div', ...props }, ref) {
+    const zoneProps = {
+        ...props,
+        [VISIBILITY_ATTR]: 'true',
+        ref,
+    };
+    // Use createElement to support dynamic tag
+    const Element = Component;
+    return _jsx(Element, { ...zoneProps, children: children });
+});
+/**
+ * Alias for LockedZone - more explicit naming
+ */
+export const NonCustomizable = LockedZone;
+/**
+ * Alias for EditableZone - more explicit naming
+ */
+export const Customizable = EditableZone;

package/dist/builder/MessageList.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Message list component
+ * Renders messages with optional custom renderer
+ */
+import { type ReactNode } from 'react';
+import type { Message } from 'dynim-core';
+export interface MessageListProps {
+    className?: string;
+    renderMessage?: (message: Message) => ReactNode;
+    showAvatars?: boolean;
+    showTimestamps?: boolean;
+}
+export declare function MessageList({ className, renderMessage, showAvatars, showTimestamps, }: MessageListProps): JSX.Element;
+//# sourceMappingURL=MessageList.d.ts.map

package/dist/builder/MessageList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../src/builder/MessageList.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAqB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE1D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAE1C,MAAM,WAAW,gBAAgB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,SAAS,CAAC;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,wBAAgB,WAAW,CAAC,EAC1B,SAAc,EACd,aAAa,EACb,WAAkB,EAClB,cAAsB,GACvB,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CA6ChC"}

package/dist/builder/MessageList.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Message list component
+ * Renders messages with optional custom renderer
+ */
+import { useRef, useEffect } from 'react';
+import { useChatContext } from './ChatContext';
+export function MessageList({ className = '', renderMessage, showAvatars = true, showTimestamps = false, }) {
+    const { messages, isTyping } = useChatContext();
+    const containerRef = useRef(null);
+    // Auto-scroll to bottom on new messages
+    useEffect(() => {
+        if (containerRef.current) {
+            containerRef.current.scrollTop = containerRef.current.scrollHeight;
+        }
+    }, [messages]);
+    // Default message renderer
+    const defaultRenderMessage = (message) => (_jsxs("div", { className: `chatbot-message chatbot-message--${message.role}`, children: [showAvatars && (_jsx("div", { className: "chatbot-avatar", children: message.role === 'user' ? '\u{1F464}' : '\u{1F916}' })), _jsxs("div", { className: "chatbot-bubble", children: [_jsx("div", { className: "chatbot-text", children: message.text }), showTimestamps && (_jsx("div", { className: "chatbot-time", children: new Date(message.timestamp).toLocaleTimeString([], {
+                            hour: '2-digit',
+                            minute: '2-digit',
+                        }) }))] })] }, message.id));
+    return (_jsxs("div", { ref: containerRef, className: `chatbot-messages ${className}`, children: [messages.map((message) => renderMessage ? renderMessage(message) : defaultRenderMessage(message)), isTyping && (_jsxs("div", { className: "chatbot-typing", children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {})] }))] }));
+}

package/dist/builder/index.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Builder React exports
+ */
+export { BuilderProvider, useBuilder } from './BuilderProvider';
+export type { BuilderConfig, BuilderContextValue, BuilderProviderProps } from './BuilderProvider';
+export { ChatProvider, useChatContext } from './ChatContext';
+export type { ChatProviderProps } from './ChatContext';
+export { MessageList } from './MessageList';
+export type { MessageListProps } from './MessageList';
+export { ChatInput } from './ChatInput';
+export type { ChatInputProps } from './ChatInput';
+export { CodeChatPanel } from './CodeChatPanel';
+export type { CodeChatPanelProps } from './CodeChatPanel';
+export { useChatbot } from './useChatbot';
+export type { UseChatbotConfig, UseChatbotReturn } from './useChatbot';
+export { LockedZone, EditableZone, NonCustomizable, Customizable, } from './EditableZone';
+export type { ZoneProps } from './EditableZone';
+//# sourceMappingURL=index.d.ts.map

package/dist/builder/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/builder/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAChE,YAAY,EAAE,aAAa,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAGlG,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC7D,YAAY,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAGvD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAG1D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAGvE,OAAO,EACL,UAAU,EACV,YAAY,EACZ,eAAe,EACf,YAAY,GACb,MAAM,gBAAgB,CAAC;AACxB,YAAY,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/builder/index.js

@@ -0,0 +1,15 @@
+/**
+ * Builder React exports
+ */
+// Builder provider with capture integration
+export { BuilderProvider, useBuilder } from './BuilderProvider';
+// Chat context and provider
+export { ChatProvider, useChatContext } from './ChatContext';
+// Components
+export { MessageList } from './MessageList';
+export { ChatInput } from './ChatInput';
+export { CodeChatPanel } from './CodeChatPanel';
+// Headless hook for custom UI
+export { useChatbot } from './useChatbot';
+// Zone wrappers for builder customization control
+export { LockedZone, EditableZone, NonCustomizable, Customizable, } from './EditableZone';

package/dist/builder/useChatbot.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Headless hook for full UI control
+ * Use this when you want to build your own UI
+ */
+import type { Message } from 'dynim-core';
+export interface UseChatbotConfig {
+    apiKey?: string;
+    endpoint?: string;
+    onMessage?: (data: {
+        text?: string;
+        content?: string;
+    }) => void;
+    onError?: (error: Error) => void;
+}
+export interface UseChatbotReturn {
+    messages: Message[];
+    isLoading: boolean;
+    isTyping: boolean;
+    error: string | null;
+    sendMessage: (text: string) => Promise<void>;
+    clearMessages: () => void;
+}
+export declare function useChatbot(config?: UseChatbotConfig): UseChatbotReturn;
+//# sourceMappingURL=useChatbot.d.ts.map

package/dist/builder/useChatbot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChatbot.d.ts","sourceRoot":"","sources":["../../src/builder/useChatbot.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,EAAE,OAAO,EAA4B,MAAM,YAAY,CAAC;AAEpE,MAAM,WAAW,gBAAgB;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAChE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7C,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,wBAAgB,UAAU,CAAC,MAAM,GAAE,gBAAqB,GAAG,gBAAgB,CAyF1E"}

package/dist/builder/useChatbot.js

@@ -0,0 +1,85 @@
+/**
+ * Headless hook for full UI control
+ * Use this when you want to build your own UI
+ */
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { createState, createClient } from 'dynim-core';
+export function useChatbot(config = {}) {
+    const { apiKey, endpoint, onMessage, onError } = config;
+    const [messages, setMessages] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isTyping, setIsTyping] = useState(false);
+    const [error, setError] = useState(null);
+    const stateRef = useRef(null);
+    const clientRef = useRef(null);
+    // Initialize on mount
+    useEffect(() => {
+        const state = createState();
+        stateRef.current = state;
+        const client = createClient({
+            apiKey,
+            endpoint,
+            onMessage: (data) => {
+                const currentMessages = state.getState().messages;
+                const lastMessage = currentMessages[currentMessages.length - 1];
+                if (lastMessage?.role === 'assistant') {
+                    const newText = lastMessage.text + (data.text || data.content || '');
+                    state.updateMessage(lastMessage.id, { text: newText });
+                }
+                onMessage?.(data);
+            },
+            onError: (err) => {
+                const errorMessage = err instanceof Error ? err.message : 'Unknown error';
+                setError(errorMessage);
+                if (err instanceof Error) {
+                    onError?.(err);
+                }
+            },
+        });
+        clientRef.current = client;
+        // Subscribe to state changes
+        const unsubscribe = state.subscribe((newState) => {
+            setMessages([...newState.messages]);
+            setIsLoading(newState.isLoading);
+            setIsTyping(newState.isTyping);
+        });
+        return () => {
+            unsubscribe();
+        };
+    }, [apiKey, endpoint]);
+    // Send message
+    const sendMessage = useCallback(async (text) => {
+        const state = stateRef.current;
+        const client = clientRef.current;
+        if (!state || !client)
+            return;
+        setError(null);
+        state.addMessage({ role: 'user', text });
+        const botMessage = state.addMessage({ role: 'assistant', text: '' });
+        setIsLoading(true);
+        setIsTyping(true);
+        try {
+            await client.send(text);
+        }
+        catch (err) {
+            state.updateMessage(botMessage.id, { text: 'Sorry, something went wrong.' });
+            setError(err.message);
+        }
+        finally {
+            setIsLoading(false);
+            setIsTyping(false);
+        }
+    }, []);
+    // Clear messages
+    const clearMessages = useCallback(() => {
+        stateRef.current?.clearMessages();
+    }, []);
+    return {
+        messages,
+        isLoading,
+        isTyping,
+        error,
+        sendMessage,
+        clearMessages,
+    };
+}

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * dynim-react - React wrapper for dynim-core
+ *
+ * This package provides:
+ * - Re-exports everything from dynim-core (for convenience)
+ * - React components and hooks for the builder
+ * - Inference SDK for tenant customization loading
+ */
+export * from 'dynim-core';
+export { BuilderProvider, useBuilder, ChatProvider, useChatContext, MessageList, ChatInput, CodeChatPanel, useChatbot, LockedZone, EditableZone, NonCustomizable, Customizable, } from './builder';
+export type { BuilderConfig, BuilderContextValue, BuilderProviderProps, ChatProviderProps, MessageListProps, ChatInputProps, CodeChatPanelProps, UseChatbotConfig, UseChatbotReturn, ZoneProps, } from './builder';
+export { InferenceProvider, InferenceProviderDefault, createSharedContext, getSharedContext, isSharedContextReady, } from './inference';
+export type { DynimSDKConfig, InferenceProviderProps, InferenceState, DynimGlobal, } from './inference';
+//# sourceMappingURL=index.d.ts.map