@messenger-box/tailwind-ui-inbox 10.0.3-alpha.73 → 10.0.3-alpha.74

package/lib/components/filler-components/RightSiderBar.js

@@ -0,0 +1,335 @@
+import*as React from'react';import {HybridLiveEditor}from'../live-code-editor/hybrid-live-editor.js';import {useOnChatMessageAddedSubscription}from'common/graphql';const RightSidebarFillComponent = props => {
+  const {
+    channelId,
+    detailSidebarOptions,
+    windowWidth,
+    windowHeight,
+    activeTab,
+    messages,
+    selectedPost,
+    setIsLoading,
+    isLoading
+  } = props;
+  const hybridLiveEditorRef = React.useRef(null);
+  const previewIframeRef = React.useRef(null);
+  // State for subscription data and active fragment
+  const [subscriptionData, setSubscriptionData] = React.useState(null);
+  const [activeFragment, setActiveFragment] = React.useState(null);
+  const [currentFiles, setCurrentFiles] = React.useState({});
+  const [canvasLayers, setCanvasLayers] = React.useState([]);
+  // const [isLoading, setIsLoading] = React.useState(false);
+  // Component mount tracking
+  React.useMemo(() => `right-sidebar-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, []);
+  const handleCopyToClipboard = React.useCallback(text => {
+    navigator.clipboard.writeText(text);
+  }, []);
+  const handleFileUpdate = React.useCallback(async (filePath, content) => {
+    // TODO: Implement file update logic for the channel
+    console.log('File update:', {
+      filePath,
+      content
+    });
+  }, []);
+  // Create complete file context by merging currentFiles with activeFragment files
+  const completeFileContext = React.useMemo(() => {
+    if (!activeFragment?.files) {
+      console.log('📂 Using currentFiles as complete context (no activeFragment.files)');
+      return currentFiles;
+    }
+    // Merge currentFiles with activeFragment files, giving priority to activeFragment files
+    const merged = {
+      ...currentFiles
+    };
+    // Override with activeFragment files (these are the most recent changes)
+    Object.entries(activeFragment.files).forEach(([path, content]) => {
+      merged[path] = content;
+    });
+    // Validate file context integrity
+    const hasPackageJson = 'package.json' in merged;
+    const hasMainFiles = Object.keys(merged).some(path => path.includes('index.') || path.includes('main.') || path.includes('App.') || path.includes('src/'));
+    console.log('📂 Complete file context created:', {
+      currentFilesCount: Object.keys(currentFiles).length,
+      activeFragmentFilesCount: Object.keys(activeFragment.files).length,
+      mergedFilesCount: Object.keys(merged).length,
+      hasPackageJson,
+      hasMainFiles,
+      activeFragmentFiles: Object.keys(activeFragment.files),
+      allFiles: Object.keys(merged),
+      validation: {
+        isComplete: hasPackageJson && hasMainFiles,
+        missingPackageJson: !hasPackageJson,
+        missingMainFiles: !hasMainFiles
+      }
+    });
+    if (!hasPackageJson) {
+      console.warn('⚠️ File context missing package.json - this may cause issues in sandbox');
+    }
+    if (!hasMainFiles) {
+      console.warn('⚠️ File context missing main application files - this may cause issues in sandbox');
+    }
+    return merged;
+  }, [currentFiles, activeFragment?.files]);
+  // Determine if we should show preview or editor based on activeTab
+  const isPreviewMode = activeTab === 'preview';
+  const {
+    data: chatMessageAddedData
+  } = useOnChatMessageAddedSubscription({
+    variables: {
+      channelId: channelId?.toString() || ''
+    },
+    skip: !channelId
+  });
+  // Turn on loader when new data is about to be processed
+  React.useEffect(() => {
+    if (chatMessageAddedData?.chatMessageAdded || selectedPost) ;
+  }, [chatMessageAddedData, selectedPost]);
+  // Handle subscription data updates - prefer response update structure like use-ai-messages.ts
+  React.useEffect(() => {
+    if (chatMessageAddedData?.chatMessageAdded || selectedPost) {
+      // Prefer explicitly selected post to ensure UI updates when it changes
+      const message = selectedPost || chatMessageAddedData?.chatMessageAdded;
+      // console.log('=== SUBSCRIPTION MESSAGE DEBUG ===');
+      // console.log('Full message:', JSON.stringify(message, null, 2));
+      // console.log('Message props:', message.props);
+      // console.log('Message propsConfiguration:', message.propsConfiguration);
+      // Extract strictly from message.propsConfiguration (fragment only)
+      let extracted = null;
+      let fragmentSource = null;
+      try {
+        // 1) Preferred: contents.props.fragment
+        const cfg = message.propsConfiguration || {};
+        const contents = cfg.contents || cfg.content || {};
+        if (contents?.props?.fragment) {
+          const frag = contents.props.fragment;
+          extracted = {
+            sandboxUrl: frag.sandboxUrl || frag.url,
+            sandboxId: frag.sandboxId,
+            projectId: cfg.projectId || contents.projectId || frag.projectId,
+            modelConfig: cfg.modelConfig || contents.modelConfig || frag.modelConfig,
+            files: frag.files || {},
+            canvasLayers: contents.canvasLayers || cfg.canvasLayers || frag.canvasLayers,
+            summary: contents.summary || cfg.summary || frag.summary,
+            title: frag.title || contents.title || cfg.title,
+            isError: frag.isError
+          };
+          fragmentSource = 'propsConfiguration.contents.props.fragment';
+        }
+        // 2) Fallback: contents.fragment
+        if (!extracted && contents?.fragment) {
+          const frag = contents.fragment;
+          extracted = {
+            sandboxUrl: frag.sandboxUrl || frag.url,
+            sandboxId: frag.sandboxId,
+            projectId: cfg.projectId || contents.projectId || frag.projectId,
+            modelConfig: cfg.modelConfig || contents.modelConfig || frag.modelConfig,
+            files: frag.files || {},
+            canvasLayers: contents.canvasLayers || cfg.canvasLayers || frag.canvasLayers,
+            summary: contents.summary || cfg.summary || frag.summary,
+            title: frag.title || contents.title || cfg.title,
+            isError: frag.isError
+          };
+          fragmentSource = 'propsConfiguration.contents.fragment';
+        }
+        // 3) Fallback: propsConfiguration.fragment (top-level)
+        if (!extracted && cfg?.fragment) {
+          const frag = cfg.fragment;
+          extracted = {
+            sandboxUrl: frag.sandboxUrl || frag.url,
+            sandboxId: frag.sandboxId,
+            projectId: cfg.projectId || frag.projectId,
+            modelConfig: cfg.modelConfig || frag.modelConfig,
+            files: frag.files || {},
+            canvasLayers: cfg.canvasLayers || frag.canvasLayers,
+            summary: cfg.summary || frag.summary,
+            title: frag.title || cfg.title,
+            isError: frag.isError
+          };
+          fragmentSource = 'propsConfiguration.fragment';
+        }
+      } catch (error) {
+        console.error('Error extracting response from message:', error);
+      }
+      // console.log('Extracted response fragment source:', fragmentSource);
+      // console.log('Extracted response:', extracted);
+      if (extracted && (extracted.sandboxUrl || extracted.url)) {
+        console.log('✅ Processing response update:', extracted);
+        // Update subscription data snapshot
+        setSubscriptionData(extracted);
+        // Build active fragment
+        const fragment = {
+          id: message.id,
+          sandboxUrl: extracted.sandboxUrl || extracted.url,
+          title: extracted.title || 'Generated Code',
+          files: extracted.files || {},
+          projectId: extracted.projectId,
+          modelConfig: extracted.modelConfig,
+          canvasLayers: extracted.canvasLayers,
+          summary: extracted.summary,
+          isError: extracted.isError
+        };
+        // If canvasLayers missing but present in summary, attempt to extract like use-ai-messages
+        if ((!fragment.canvasLayers || !Array.isArray(fragment.canvasLayers)) && fragment.summary) {
+          try {
+            const match = fragment.summary.match(/<canvas_layers>([\s\S]*?)<\/canvas_layers>/);
+            if (match) {
+              const parsed = JSON.parse(match[1]);
+              if (Array.isArray(parsed)) {
+                fragment.canvasLayers = parsed;
+              }
+            }
+          } catch (e) {
+            console.warn('Failed to parse canvas layers from summary:', e);
+          }
+        }
+        console.log('✅ Setting active fragment:', fragment);
+        setActiveFragment(fragment);
+        // Update files into local state for editor
+        if (fragment.files) {
+          console.log('✅ Setting current files:', Object.keys(fragment.files));
+          setCurrentFiles(fragment.files);
+        }
+        // Update canvas layers if available
+        if (fragment.canvasLayers && Array.isArray(fragment.canvasLayers)) {
+          console.log('Received canvas layers from AI:', fragment.canvasLayers);
+          setCanvasLayers(fragment.canvasLayers);
+        } else {
+          console.log('No canvas layers found in response');
+        }
+        // setIsLoading(false);
+      } else {
+        console.log('❌ No valid response found in message');
+        // setIsLoading(false);
+      }
+    }
+  }, [chatMessageAddedData, selectedPost]);
+  // When switching tabs or when sandbox changes, show loader until ready
+  // React.useEffect(() => {
+  //     if (isPreviewMode) {
+  //         if (activeFragment?.sandboxUrl) {
+  //            // setIsLoading(true);
+  //         }
+  //     } else {
+  //         // In code view, briefly show loader while editor reacts to new files
+  //        // setIsLoading(true);
+  //         const timeoutId = setTimeout(() => setIsLoading(false), 400);
+  //         return () => clearTimeout(timeoutId);
+  //     }
+  // }, [isPreviewMode, activeFragment?.sandboxUrl, completeFileContext]);
+  // Cleanup iframe resources on unmount to prevent renderer leaks in Chrome
+  React.useEffect(() => {
+    return () => {
+      try {
+        if (previewIframeRef.current) {
+          previewIframeRef.current.src = 'about:blank';
+        }
+      } catch (e) {
+        // no-op
+      }
+    };
+  }, []);
+  return React.createElement("div", {
+    className: "right-sidebar-content h-full flex flex-col"
+  }, React.createElement("div", {
+    className: "flex-1 overflow-hidden",
+    style: {
+      height: 'calc(100vh - 140px)'
+    }
+  }, isPreviewMode ?
+  // Preview Mode - Show sandbox iframe or fallback
+  (() => {
+    if (activeFragment?.sandboxUrl) {
+      return React.createElement("div", {
+        className: "w-full h-full relative",
+        style: {
+          minHeight: '400px',
+          backgroundColor: '#f0f0f0'
+        }
+      }, React.createElement("iframe", {
+        key: activeFragment.sandboxUrl,
+        ref: previewIframeRef,
+        src: activeFragment.sandboxUrl,
+        className: "w-full h-full border border-gray-200 rounded-md bg-white shadow-sm",
+        title: "Live Preview",
+        sandbox: "allow-scripts allow-same-origin allow-forms allow-popups allow-modals allow-orientation-lock allow-pointer-lock allow-presentation allow-storage-access-by-user-activation allow-top-navigation-by-user-activation",
+        loading: "lazy",
+        onLoad: () => {
+          console.log('🎯 Iframe loaded successfully');
+          setIsLoading(false);
+        },
+        onError: e => {
+          console.error('❌ Iframe error:', e);
+          setIsLoading(false);
+        },
+        style: {
+          minHeight: '400px'
+        }
+      }), React.createElement("div", {
+        className: "absolute top-2 right-2 bg-green-100 text-green-800 px-2 py-1 rounded text-xs z-10"
+      }, "Live Preview"), isLoading && React.createElement(React.Fragment, null, React.createElement("div", {
+        className: "absolute inset-0 bg-white/60 flex items-center justify-center z-20"
+      }, React.createElement("div", {
+        className: "animate-spin rounded-full h-12 w-12 border-4 border-blue-500 border-t-transparent"
+      })), React.createElement("div", {
+        className: "absolute top-2 left-2 bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs z-30"
+      }, "Loading...")));
+    } else {
+      return React.createElement("div", {
+        className: "h-full flex items-center justify-center text-gray-500 border border-gray-200 rounded-md bg-gray-50"
+      }, React.createElement("div", {
+        className: "text-center space-y-3"
+      }, React.createElement("p", {
+        className: "font-medium"
+      }, "No preview available"), React.createElement("div", {
+        className: "flex flex-col items-center justify-center space-y-3"
+      }, isLoading ? React.createElement("div", {
+        className: "animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"
+      }) : React.createElement("div", {
+        className: "w-8 h-8 bg-gray-300 rounded-full"
+      }), React.createElement("p", {
+        className: "text-sm text-gray-400"
+      }, isLoading ? 'Generating code...' : 'Waiting for code generation...'))));
+    }
+  })() :
+  // Code Editor Mode - Show files from subscription or fallback
+  React.createElement("div", {
+    className: "h-full w-full relative",
+    style: {
+      height: '100%',
+      minHeight: '500px'
+    }
+  }, React.createElement(HybridLiveEditor, {
+    ref: hybridLiveEditorRef,
+    projectId: activeFragment?.projectId || channelId,
+    fragmentId: activeFragment?.id || activeTab || 'default',
+    files: Object.keys(completeFileContext).length > 0 ? completeFileContext : {},
+    sandboxUrl: activeFragment?.sandboxUrl,
+    onCopyToClipboard: handleCopyToClipboard,
+    onFileUpdate: handleFileUpdate,
+    readOnly: !activeFragment?.id,
+    autoSave: false,
+    debounceMs: 500,
+    className: "h-full w-full"
+  }), isLoading && React.createElement(React.Fragment, null, React.createElement("div", {
+    className: "absolute inset-0 bg-white/60 flex items-center justify-center z-20"
+  }, React.createElement("div", {
+    className: "animate-spin rounded-full h-12 w-12 border-4 border-blue-500 border-t-transparent"
+  })), React.createElement("div", {
+    className: "absolute top-4 right-4 bg-blue-100 border border-blue-400 text-blue-700 px-3 py-2 rounded text-sm z-30"
+  }, React.createElement("div", {
+    className: "flex items-center gap-2"
+  }, React.createElement("div", {
+    className: "animate-spin rounded-full h-4 w-4 border-b-2 border-blue-500"
+  }), "Processing..."))))), React.createElement("div", {
+    className: "p-2 border-t bg-gray-50 text-xs text-gray-500"
+  }, React.createElement("div", {
+    className: "flex justify-between"
+  }, React.createElement("span", null, "Mobile: ", detailSidebarOptions.isMobileView ? 'Yes' : 'No'), React.createElement("span", null, "Desktop: ", detailSidebarOptions.isDesktopView ? 'Yes' : 'No'), activeFragment && React.createElement("span", {
+    className: "text-green-600"
+  }, activeFragment.isError ? 'Error' : 'Ready')), activeFragment && React.createElement("div", {
+    className: "mt-1 text-xs"
+  }, React.createElement("span", {
+    className: "text-gray-400"
+  }, "Files: ", Object.keys(completeFileContext).length), canvasLayers.length > 0 && React.createElement("span", {
+    className: "ml-2 text-gray-400"
+  }, "Layers: ", canvasLayers.length))));
+};export{RightSidebarFillComponent};//# sourceMappingURL=RightSiderBar.js.map

package/lib/components/filler-components/RightSiderBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RightSiderBar.js","sources":["../../../src/components/filler-components/RightSiderBar.tsx"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/lib/components/index.d.ts

@@ -1,5 +1,7 @@
 export { MessageItem, FilesList, ThreadItem } from './inbox';
-export { LeftSidebar, RightSidebar, MessageInput, MessageInputComponent, InputComponent, Messages, CommonMessage, MessageSliceRenderer, Popover, ConversationItem, UploadImageButton, UserModalContent, ServiceInboxItem, MessagesBuilderUi, } from './InboxMessage';
-export { ChatMessageFiller, ChatMessageFill2 } from './slot-fill';
+export { LeftSidebar, RightSidebar, MessageInput, MessageInputComponent, InputComponent, Messages, CommonMessage, MessageSliceRenderer, Popover, ConversationItem, UploadImageButton, UserModalContent, ServiceInboxItem, MessagesBuilderUi, RightSidebarAi, } from './InboxMessage';
+export { ChatMessageFiller, ChatMessageFill2, RightSidebarFillDefault } from './slot-fill';
 export { AIAgent } from './AIAgent';
+export { ModelConfigPanel } from './ModelConfigPanel';
+export { usePersistentModelConfig } from '../hooks/usePersistentModelConfig';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC7D,OAAO,EACH,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,qBAAqB,EACrB,cAAc,EACd,QAAQ,EACR,aAAa,EACb,oBAAoB,EACpB,OAAO,EACP,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,iBAAiB,GACpB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC7D,OAAO,EACH,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,qBAAqB,EACrB,cAAc,EACd,QAAQ,EACR,aAAa,EACb,oBAAoB,EACpB,OAAO,EACP,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,iBAAiB,EACjB,cAAc,GACjB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAC3F,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,wBAAwB,EAAE,MAAM,mCAAmC,CAAC"}

package/lib/components/live-code-editor/hybrid-live-editor.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+interface HybridLiveEditorProps {
+    projectId: string;
+    fragmentId?: string;
+    files?: Record<string, string>;
+    className?: string;
+    sandboxUrl?: string;
+    onCopyToClipboard?: (text: string) => void;
+    onFileUpdate?: (filePath: string, content: string) => Promise<void>;
+    readOnly?: boolean;
+    autoSave?: boolean;
+    debounceMs?: number;
+    showFileExplorer?: boolean;
+}
+export interface HybridLiveEditorRef {
+    openVSCode: () => void;
+}
+export declare const HybridLiveEditor: React.ForwardRefExoticComponent<HybridLiveEditorProps & React.RefAttributes<HybridLiveEditorRef>>;
+export {};
+//# sourceMappingURL=hybrid-live-editor.d.ts.map

package/lib/components/live-code-editor/hybrid-live-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hybrid-live-editor.d.ts","sourceRoot":"","sources":["../../../src/components/live-code-editor/hybrid-live-editor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4E,MAAM,OAAO,CAAC;AAKjG,UAAU,qBAAqB;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,MAAM,WAAW,mBAAmB;IAChC,UAAU,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,eAAO,MAAM,gBAAgB,mGAiF5B,CAAC"}

package/lib/components/live-code-editor/hybrid-live-editor.js

@@ -0,0 +1,68 @@
+import React__default,{forwardRef,useCallback,useImperativeHandle}from'react';import {cn}from'../../utils/utils.js';import {LiveCodeEditor}from'./live-code-editor.js';const HybridLiveEditor = forwardRef(({
+  projectId,
+  fragmentId,
+  files = {},
+  className,
+  sandboxUrl,
+  onCopyToClipboard,
+  onFileUpdate,
+  readOnly = false,
+  autoSave = true,
+  debounceMs = 500,
+  showFileExplorer = true
+}, ref) => {
+  const handleOpenVSCodeInTab = useCallback(async () => {
+    if (sandboxUrl) {
+      try {
+        // Start VS Code sync first
+        if (projectId && fragmentId) {
+          console.log('HybridLiveEditor - Starting VSCode sync for:', {
+            projectId,
+            fragmentId
+          });
+          // Note: You'll need to implement the VSCode sync mutation based on your GraphQL setup
+          // await startVSCodeSyncMutation({
+          //   variables: { projectId, fragmentId }
+          // });
+          console.log('HybridLiveEditor - VSCode sync started successfully');
+        }
+        const url = new URL(sandboxUrl);
+        let codeServerUrl;
+        // Handle different URL formats
+        if (url.hostname.includes('yarntra.ai')) {
+          // Format: https://3000-{sandboxId}.yarntra.ai -> https://8080-{sandboxId}.yarntra.ai
+          codeServerUrl = `${url.protocol}//${url.hostname.replace('3000-', '8080-')}${url.pathname}`;
+        } else if (url.hostname.includes('e2b.dev')) {
+          // Format: https://{sandboxId}.e2b.dev -> https://{sandboxId}-8080.e2b.dev
+          codeServerUrl = `${url.protocol}//${url.hostname}-8080${url.pathname}`;
+        } else {
+          // Fallback: try port-based approach
+          const port = url.port || '3000';
+          codeServerUrl = sandboxUrl.replace(`:${port}`, ':8080');
+        }
+        window.open(codeServerUrl, '_blank');
+      } catch (err) {
+        console.error('Error opening VSCode in new tab:', err);
+      }
+    }
+  }, [sandboxUrl, projectId, fragmentId]);
+  // Expose the openVSCode function via ref
+  useImperativeHandle(ref, () => ({
+    openVSCode: handleOpenVSCodeInTab
+  }), [handleOpenVSCodeInTab]);
+  // Return Monaco Editor without header/footer, exposing VSCode function
+  return React__default.createElement("div", {
+    className: cn('flex flex-col h-full w-full', className)
+  }, React__default.createElement("div", {
+    className: "flex-1 overflow-hidden"
+  }, React__default.createElement(LiveCodeEditor, {
+    files: files,
+    onCopyToClipboard: onCopyToClipboard,
+    onFileUpdate: onFileUpdate,
+    readOnly: readOnly,
+    autoSave: autoSave,
+    debounceMs: debounceMs,
+    showFileExplorer: showFileExplorer,
+    className: "h-full"
+  })));
+});export{HybridLiveEditor};//# sourceMappingURL=hybrid-live-editor.js.map

package/lib/components/live-code-editor/hybrid-live-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hybrid-live-editor.js","sources":["../../../src/components/live-code-editor/hybrid-live-editor.tsx"],"sourcesContent":[null],"names":[],"mappings":"uKAuBa,MAAA,gBAAgB,GAAG,UAAU,CACtC,CACI;AAeA,EAAA;YACQ;AACA,EAAA,KAAA,GAAA,EAAA;;AAEI,EAAA,UAAA;;;;;;AAMI,EAAA,gBAAA,GAAA;;AAGJ,EAAA,MAAA,qBAAY,GAAI,WAAI,CAAA,YAAY;AAChC,IAAA,IAAA,UAAA,EAAI;;;qBAIqF,IAAA,UAAA,EAAA;qBACxE,CAAA,8CAAmC;qBACnD;;;AAEG;;;;AAGA,UAAA,OAAA,CAAA,GAAA,CAAA,qDAAgC,CAAA;;iBAEnC,GAAA,IAAA,GAAA,CAAA,UAAA,CAAA;AAED,QAAA,IAAA,aAAW;;YACb,GAAO,CAAA,QAAK,CAAC,QAAA,CAAA,YAAA,CAAA,EAAA;AACX;uBACH,GAAA,CAAA,EAAA,GAAA,CAAA,QAAA,CAAA,EAAA,EAAA,GAAA,CAAA,QAAA,CAAA,OAAA,CAAA,OAAA,EAAA,OAAA,CAAA,CAAA,EAAA,GAAA,CAAA,QAAA,CAAA,CAAA;SACJ,MAAA,IAAA,GAAA,CAAA,QAAA,CAAA,QAAA,CAAA,SAAA,CAAA,EAAA;;UAGoC,aAAA,GAAA,CAAA,EAAA,GAAA,CAAA,QAAA,CAAA,EAAA,EAAA,GAAA,CAAA,QAAA,CAAA,KAAA,EAAA,GAAA,CAAA,QAAA,CAAA,CAAA;AACzC,SAAA,MAAA;AAGQ;AACH,UACqB,MAAA,IAAA,GAAA,GAAA,CAAA,IAAC,IACzB,MAAA;UAEqE,aAAA,GAAA,UAAA,CAAA,OAAA,CAAA,CAAA,CAAA,EAAA,IAAA,CAAA,CAAA,EAAA,OAAA,CAAA;;QAI/D,MAAK,CAAA,IAAA,CAAA,aAAA,EAAA,QAAA,CAAA;AACD,OAAA,CAAA,OAAA,GAAA,EAAA;AAahB,QACF,OAAA,CAAA,KAAA,CAAA,kCAAA,EAAA,GAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/live-code-editor/index.d.ts

@@ -0,0 +1,4 @@
+export { LiveCodeEditor } from './live-code-editor';
+export { HybridLiveEditor } from './hybrid-live-editor';
+export type { HybridLiveEditorRef } from './hybrid-live-editor';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/live-code-editor/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/live-code-editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,YAAY,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC"}

package/lib/components/live-code-editor/live-code-editor.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface LiveCodeEditorProps {
+    files?: Record<string, string>;
+    className?: string;
+    onCopyToClipboard?: (text: string) => void;
+    onFileUpdate?: (filePath: string, content: string) => Promise<void>;
+    readOnly?: boolean;
+    autoSave?: boolean;
+    debounceMs?: number;
+    showFileExplorer?: boolean;
+}
+export declare const LiveCodeEditor: React.FC<LiveCodeEditorProps>;
+export {};
+//# sourceMappingURL=live-code-editor.d.ts.map

package/lib/components/live-code-editor/live-code-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"live-code-editor.d.ts","sourceRoot":"","sources":["../../../src/components/live-code-editor/live-code-editor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAOxE,UAAU,mBAAmB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC9B;AA8CD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAkMxD,CAAC"}