@vertesia/ui 0.81.0 → 0.81.2-dev.20260204.135023Z

package/src/features/store/objects/components/PropertiesEditorModal.tsx

@@ -6,14 +6,14 @@ import {
     ModalBody,
     ModalFooter,
     ModalTitle,
-    useToast
+    useToast,
+    useTheme
 } from '@vertesia/ui/core';
 import { ContentObject } from '@vertesia/common';
 import { useNavigate } from "@vertesia/ui/router";
 
-// Import Monaco Editor
-import Editor, { Monaco } from '@monaco-editor/react';
-import { editor } from 'monaco-editor';
+// Import Monaco Editor wrapper
+import { MonacoEditor, IEditorApi } from '@vertesia/ui/widgets';
 
 // Import SaveVersionConfirmModal
 import { SaveVersionConfirmModal } from './SaveVersionConfirmModal';
@@ -28,13 +28,13 @@ export interface PropertiesEditorModalProps {
 export function PropertiesEditorModal({ isOpen, onClose, object, refetch }: PropertiesEditorModalProps) {
     const { client, store } = useUserSession();
     const toast = useToast();
+    const { theme } = useTheme();
     const navigate = useNavigate();
     const [isLoading, setIsLoading] = useState(false);
     const [propertiesJson, setPropertiesJson] = useState('');
     const [showConfirmation, setShowConfirmation] = useState(false);
     const [parsedProperties, setParsedProperties] = useState<any>(null);
-    const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
-    const monacoRef = useRef<Monaco | null>(null);
+    const editorRef = useRef<IEditorApi | undefined>(undefined);
     const [jsonSchema, setJsonSchema] = useState<any>(null);
     //TODO  state not used
     const [_newVersionId, setNewVersionId] = useState<string | null>(null);
@@ -51,47 +51,33 @@ export function PropertiesEditorModal({ isOpen, onClose, object, refetch }: Prop
         }
     }, [isOpen, object]);
 
-    // Handle editor mounting
-    function handleEditorDidMount(editor: editor.IStandaloneCodeEditor, monaco: Monaco) {
-        editorRef.current = editor;
-        monacoRef.current = monaco;
-
-        // Apply JSON schema validation if available
-        if (jsonSchema) {
-            setMonacoJsonSchema(monaco, jsonSchema);
-        }
-    }
-
     // Fetch JSON schema for the object type
     async function fetchJsonSchema(typeId: string) {
         try {
             const typeDetails = await store.types.retrieve(typeId);
             if (typeDetails.object_schema) {
                 setJsonSchema(typeDetails.object_schema);
-
-                // Apply schema if Monaco is already mounted
-                if (monacoRef.current) {
-                    setMonacoJsonSchema(monacoRef.current, typeDetails.object_schema);
-                }
             }
         } catch (error) {
             console.error('Failed to fetch JSON schema:', error);
         }
     }
 
-    // Configure Monaco editor with JSON schema
-    function setMonacoJsonSchema(monaco: Monaco, schema: any) {
-        monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
-            validate: true,
-            schemas: [
-                {
-                    uri: 'http://myserver/object-schema.json',
-                    fileMatch: ['*'],
-                    schema
-                }
-            ]
-        });
-    }
+    // Configure Monaco editor with JSON schema validation
+    const beforeMount = (monaco: typeof import('monaco-editor')) => {
+        if (jsonSchema) {
+            monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+                validate: true,
+                schemas: [
+                    {
+                        uri: 'http://myserver/object-schema.json',
+                        fileMatch: ['*'],
+                        schema: jsonSchema
+                    }
+                ]
+            });
+        }
+    };
 
     // Validate JSON and open confirmation modal
     function handleSave() {
@@ -113,6 +99,11 @@ export function PropertiesEditorModal({ isOpen, onClose, object, refetch }: Prop
         }
     }
 
+    // Handle editor changes
+    const handleEditorChange = (value: string) => {
+        setPropertiesJson(value);
+    };
+
     // Save properties
     async function saveProperties(createVersion: boolean, versionLabel?: string) {
         try {
@@ -170,11 +161,11 @@ export function PropertiesEditorModal({ isOpen, onClose, object, refetch }: Prop
                     description: 'The object properties have been updated successfully.',
                     duration: 2000
                 });
-                
+
                 if (refetch) {
                     await refetch();
                 }
-                
+
                 setShowConfirmation(false);
                 onClose();
             }
@@ -214,21 +205,14 @@ export function PropertiesEditorModal({ isOpen, onClose, object, refetch }: Prop
                             <span className="ml-2 text-green-600">(JSON schema validation enabled)</span>
                         )}
                     </div>
-                    <div className="h-[75vh] border border-gray-300 dark:border-gray-700 rounded-md">
-                        <Editor
-                            height="100%"
-                            language="json"
+                    <div className="h-[75vh] border rounded-md overflow-hidden">
+                        <MonacoEditor
                             value={propertiesJson}
-                            onChange={(value) => setPropertiesJson(value || '')}
-                            onMount={handleEditorDidMount}
-                            options={{
-                                minimap: { enabled: false },
-                                scrollBeyondLastLine: false,
-                                formatOnPaste: true,
-                                formatOnType: true,
-                                automaticLayout: true,
-                                wordWrap: 'on'
-                            }}
+                            language="json"
+                            editorRef={editorRef}
+                            onChange={(update) => handleEditorChange(update.state.doc.toString())}
+                            beforeMount={beforeMount}
+                            theme={theme === 'dark' ? 'vs-dark' : 'vs'}
                         />
                     </div>
                 </ModalBody>

package/src/features/store/objects/components/SelectDocumentModal.tsx

@@ -1,5 +1,5 @@
 import { ContentObjectItem } from "@vertesia/common";
-import { VModal, VModalBody, VModalTitle } from "@vertesia/ui/core";
+import { Modal, ModalBody, ModalTitle } from "@vertesia/ui/core";
 import { SelectDocument } from "./SelectDocument";
 
 interface SelectDocumentModalProps {
@@ -10,11 +10,11 @@ interface SelectDocumentModalProps {
 }
 export function SelectDocumentModal({ isOpen, onClose }: SelectDocumentModalProps) {
     return (
-        <VModal onClose={() => onClose()} isOpen={!!isOpen} className='min-w-[60vw]'>
-            <VModalTitle>Select Content</VModalTitle>
-            <VModalBody className='pt-0 overflow-y-auto max-h-[80vh] min-h-[80vh]'>
+        <Modal onClose={() => onClose()} isOpen={!!isOpen} className='min-w-[60vw]'>
+            <ModalTitle>Select Content</ModalTitle>
+            <ModalBody className='pt-0 overflow-y-auto max-h-[80vh] min-h-[80vh]'>
                 {isOpen && <SelectDocument onChange={onClose} />}
-            </VModalBody>
-        </VModal>
+            </ModalBody>
+        </Modal>
     )
 }

package/src/features/store/objects/components/useContentPanelHooks.ts

@@ -1,6 +1,6 @@
-import { useCallback, useEffect, useState } from "react";
-import { useUserSession } from "@vertesia/ui/session";
 import { DocAnalyzerProgress, DocProcessorOutputFormat, MarkdownRenditionFormat, WorkflowExecutionStatus } from "@vertesia/common";
+import { useUserSession } from "@vertesia/ui/session";
+import { useCallback, useEffect, useState } from "react";
 
 // Maximum text size before cropping (128K characters)
 const MAX_TEXT_DISPLAY_SIZE = 128 * 1024;
@@ -29,7 +29,7 @@ export function useObjectText(objectId: string, initialText?: string, loadOnMoun
             .getObjectText(objectId)
             .then((res) => {
                 setFullText(res.text);
-                if (res.text.length > MAX_TEXT_DISPLAY_SIZE) {
+                if (res.text && res.text.length > MAX_TEXT_DISPLAY_SIZE) {
                     setDisplayText(res.text.substring(0, MAX_TEXT_DISPLAY_SIZE));
                     setIsCropped(true);
                 } else {

package/src/features/store/objects/selection/actions/AddToCollectionAction.tsx

@@ -1,4 +1,4 @@
-import { Button, DialogDescription, Heading, Portal, useToast, VModal, VModalBody, VModalFooter, VModalTitle, VTabs, VTabsBar, VTabsPanel } from "@vertesia/ui/core";
+import { Button, DialogDescription, Heading, Portal, useToast, Modal, ModalBody, ModalFooter, ModalTitle, Tabs, TabsBar, TabsPanel } from "@vertesia/ui/core";
 import { useUserSession } from "@vertesia/ui/session";
 import { useCallback, useState } from "react";
 import { CreateCollectionForm, SelectCollection } from "../../../collections";
@@ -41,17 +41,17 @@ interface SelectCollectionModalProps {
 }
 function SelectCollectionModal({ isOpen, onClose, objectIds }: SelectCollectionModalProps) {
     return (
-        <VModal isOpen={isOpen} onClose={onClose} className="max-w-lg w-full min-w-0 overflow-hidden">
-            <VModalTitle className="flex flex-col min-w-0 overflow-hidden">
+        <Modal isOpen={isOpen} onClose={onClose} className="max-w-lg w-full min-w-0 overflow-hidden">
+            <ModalTitle className="flex flex-col min-w-0 overflow-hidden">
                 Add to a Collection
-            </VModalTitle>
+            </ModalTitle>
             <DialogDescription className="min-w-0 overflow-hidden">
                 Add the selected objects to an existing collection or create a new one.
             </DialogDescription>
             <div className="min-w-0 max-w-full overflow-hidden">
                 <AddToCollectionForm onClose={onClose} objectIds={objectIds} />
             </div>
-        </VModal>
+        </Modal>
     )
 }
 
@@ -102,19 +102,19 @@ function AddToCollectionForm({ onClose, objectIds }: AddToCollectionFormProps) {
             content: (
                 <div className="p-4 min-w-0 max-w-full overflow-hidden">
                     <Heading level={5}>Choose from existing collections</Heading>
-                    <VModalBody className="min-w-0 max-w-full overflow-hidden">
+                    <ModalBody className="min-w-0 max-w-full overflow-hidden">
                         <div className="mb-4 min-w-0 max-w-full overflow-hidden">
                             <SelectCollection onChange={onCollectionChange} value={selectedCollectionId} />
                         </div>
-                    </VModalBody>
-                    <VModalFooter>
+                    </ModalBody>
+                    <ModalFooter>
                         <Button
                             isDisabled={!selectedCollectionId}
                             onClick={() => selectedCollectionId && onAddToCollection({ collectionId: selectedCollectionId })}
                         >
                             Add to Collection
                         </Button>
-                    </VModalFooter>
+                    </ModalFooter>
                 </div>
             )
         },
@@ -129,9 +129,9 @@ function AddToCollectionForm({ onClose, objectIds }: AddToCollectionFormProps) {
     ];
 
     return (
-        <VTabs defaultValue="select" tabs={tabs} fullWidth>
-            <VTabsBar />
-            <VTabsPanel />
-        </VTabs>
+        <Tabs defaultValue="select" tabs={tabs} fullWidth>
+            <TabsBar />
+            <TabsPanel />
+        </Tabs>
     )
 }

package/src/features/store/objects/selection/actions/StartWorkflowComponent.tsx

@@ -1,5 +1,5 @@
 import { useUserSession } from "@vertesia/ui/session";
-import { Button, VModal, VModalBody, VModalFooter, VModalTitle, SelectList, useToast } from "@vertesia/ui/core";
+import { Button, Modal, ModalBody, ModalFooter, ModalTitle, SelectList, useToast } from "@vertesia/ui/core";
 import { useCallback, useState } from "react";
 import { useObjectsActionCallback, useObjectsActionContext } from "../ObjectsActionContext";
 import { ActionComponentTypeProps, ObjectsActionSpec } from "../ObjectsActionSpec";
@@ -60,10 +60,10 @@ interface StartWorkflowModalProps {
 }
 function StartWorkflowModal({ isOpen, onClose }: StartWorkflowModalProps) {
     return (
-        <VModal onClose={() => onClose(undefined)} isOpen={isOpen} className="">
-            <VModalTitle>Start a Workflow by Rule</VModalTitle>
+        <Modal onClose={() => onClose(undefined)} isOpen={isOpen} className="">
+            <ModalTitle>Start a Workflow by Rule</ModalTitle>
             <StartWorkflowBody onClose={onClose} />
-        </VModal>
+        </Modal>
     );
 }
 
@@ -98,7 +98,7 @@ function StartWorkflowBody({ onClose }: StartWorkflowBodyProps) {
 
     return (
         <div>
-            <VModalBody>
+            <ModalBody>
                 <div className="pb-2">Choose a workflow rule to start:</div>
                 <div className="max-h-[420px] overflow-y-scroll border-border border rounded-md">
                     <SelectList
@@ -108,15 +108,15 @@ function StartWorkflowBody({ onClose }: StartWorkflowBodyProps) {
                         value={selected}
                     />
                 </div>
-            </VModalBody>
-            <VModalFooter>
+            </ModalBody>
+            <ModalFooter>
                 <Button variant="secondary" onClick={() => onClose()}>
                     Cancel
                 </Button>
                 <Button onClick={onStart} isDisabled={!selected}>
                     Start
                 </Button>
-            </VModalFooter>
+            </ModalFooter>
         </div>
     );
 }

package/src/features/store/objects/upload/DocumentUploadModal.tsx

@@ -1,5 +1,5 @@
 import { Collection, ContentObjectTypeItem, DynamicCollection } from "@vertesia/common";
-import { Button, MessageBox, VModal, VModalBody, VModalFooter, VModalTitle, VSelectBox, Spinner, useToast, VTooltip } from "@vertesia/ui/core";
+import { Button, MessageBox, Modal, ModalBody, ModalFooter, ModalTitle, SelectBox, Spinner, useToast, VTooltip } from "@vertesia/ui/core";
 import { useUserSession } from "@vertesia/ui/session";
 import { DropZone, UploadSummary } from '@vertesia/ui/widgets';
 import { AlertCircleIcon, CheckCircleIcon, FileIcon, FolderIcon, Info, UploadIcon, XCircleIcon } from "lucide-react";
@@ -567,7 +567,7 @@ export function DocumentUploadModal({
                         <Info className="size-3 ml-2" />
                     </VTooltip>
                 </label>
-                <VSelectBox
+                <SelectBox
                     options={types}
                     value={selectedType}
                     optionLabel={(type) => (type ? type.name : "Select a content type")}
@@ -601,7 +601,7 @@ export function DocumentUploadModal({
         // When showing only type selection, skip directly to the type selection UI
         if (showTypeSelectionOnly) {
             return (
-                <VModalBody>
+                <ModalBody>
                     {children}
 
                     {/* Collection and folder information if available */}
@@ -609,14 +609,14 @@ export function DocumentUploadModal({
 
                     {/* Type selection */}
                     {typeSelection()}
-                </VModalBody>
+                </ModalBody>
             );
         }
 
         // Step 1: File selection #todo: update styles
         if (files.length === 0 && !hideFileSelection) {
             return (
-                <VModalBody className="flex flex-col items-center justify-center p-8">
+                <ModalBody className="flex flex-col items-center justify-center p-8">
                     {/* Collection and folder information if available */}
                     {renderLocationInfo()}
 
@@ -628,14 +628,14 @@ export function DocumentUploadModal({
                         allowFolders={allowFolders}
                     />
                     {children}
-                </VModalBody>
+                </ModalBody>
             );
         }
 
         // Step 2: File processing and type selection
         if (!isUploading && !uploadComplete) {
             return (
-                <VModalBody>
+                <ModalBody>
                     {!processingDone ? (
                         // File processing in progress
                         <div className="flex flex-col items-center justify-center py-4">
@@ -707,14 +707,14 @@ export function DocumentUploadModal({
 
                         </>
                     )}
-                </VModalBody>
+                </ModalBody>
             );
         }
 
         // Step 3: Upload in progress #todo: update styles
         if (isUploading) {
             return (
-                <VModalBody>
+                <ModalBody>
                     {/* Collection and folder information if available */}
                     {renderLocationInfo()}
 
@@ -762,13 +762,13 @@ export function DocumentUploadModal({
                             </div>
                         ))}
                     </div>
-                </VModalBody>
+                </ModalBody>
             );
         }
 
         // Step 4: Upload complete, show results
         return (
-            <VModalBody>
+            <ModalBody>
                 <div className="mb-4">
                     {/* Collection and folder information if available */}
                     {renderLocationInfo()}
@@ -800,7 +800,7 @@ export function DocumentUploadModal({
                         collection={collectionData?.name}
                     />
                 </div>
-            </VModalBody>
+            </ModalBody>
         );
     };
 
@@ -808,7 +808,7 @@ export function DocumentUploadModal({
         // Type-selection-only mode
         if (showTypeSelectionOnly) {
             return (
-                <VModalFooter>
+                <ModalFooter>
                     <Button variant="ghost" onClick={handleClose}>
                         Cancel
                     </Button>
@@ -837,18 +837,18 @@ export function DocumentUploadModal({
                     >
                         {selectedType ? `Use ${selectedType.name}` : "Use Automatic Type Detection"}
                     </Button>
-                </VModalFooter>
+                </ModalFooter>
             );
         }
 
         // File selection step - only show cancel
         if (files.length === 0 && !hideFileSelection) {
             return (
-                <VModalFooter>
+                <ModalFooter>
                     <Button variant="ghost" onClick={handleClose}>
                         Cancel
                     </Button>
-                </VModalFooter>
+                </ModalFooter>
             );
         }
 
@@ -858,7 +858,7 @@ export function DocumentUploadModal({
             const canUpload = processingDone;
 
             return (
-                <VModalFooter>
+                <ModalFooter>
                     <Button variant="ghost" onClick={handleClose}>
                         Cancel
                     </Button>
@@ -870,24 +870,24 @@ export function DocumentUploadModal({
                             ? "Upload"
                             : "Continue"}
                     </Button>
-                </VModalFooter>
+                </ModalFooter>
             );
         }
 
         // Upload in progress - can't cancel
         if (isUploading) {
             return (
-                <VModalFooter>
+                <ModalFooter>
                     <Button variant="ghost" disabled>
                         Uploading...
                     </Button>
-                </VModalFooter>
+                </ModalFooter>
             );
         }
 
         // Upload complete - close or upload more
         return (
-            <VModalFooter>
+            <ModalFooter>
                 <Button
                     variant="ghost"
                     onClick={() => {
@@ -913,15 +913,15 @@ export function DocumentUploadModal({
                 }}>
                     Close
                 </Button>
-            </VModalFooter>
+            </ModalFooter>
         );
     };
 
     return (
-        <VModal key={modalKey} isOpen={isOpen} onClose={handleClose} className="mx-auto" disableCloseOnClickOutside>
-            <VModalTitle description={_description}>{_title}</VModalTitle>
+        <Modal key={modalKey} isOpen={isOpen} onClose={handleClose} className="mx-auto" disableCloseOnClickOutside>
+            <ModalTitle description={_description}>{_title}</ModalTitle>
             {renderModalContent()}
             {renderModalFooter()}
-        </VModal>
+        </Modal>
     );
 }

package/src/features/store/types/ObjectSchemaEditor.tsx

@@ -1,15 +1,11 @@
-import { basicSetup } from 'codemirror';
 import { useMemo, useRef, useState } from 'react';
 
 import { useUserSession } from '@vertesia/ui/session';
-import { json } from '@codemirror/lang-json';
-import { CodeMirrorEditor, EditorApi, SchemaEditor, useSchema } from '@vertesia/ui/widgets';
-import { Button, useToast } from '@vertesia/ui/core';
+import { MonacoEditor, EditorApi, SchemaEditor, useSchema } from '@vertesia/ui/widgets';
+import { Button, useToast, useTheme, Panel } from '@vertesia/ui/core';
 import { ContentObjectType } from '@vertesia/common';
 import { Ajv } from "ajv";
 
-const CODE_MIRROR_EXTENSIONS = [basicSetup, json()];
-
 interface ObjectSchemaEditorProps {
     objectType: ContentObjectType;
     onSchemaUpdate: (jsonSchema: any) => void;
@@ -17,6 +13,7 @@ interface ObjectSchemaEditorProps {
 export function ObjectSchemaEditor({ objectType, onSchemaUpdate }: ObjectSchemaEditorProps) {
     const { store } = useUserSession();
     const toast = useToast();
+    const { theme } = useTheme();
 
     const [isUpdating, setUpdating] = useState(false);
     const schema = useSchema(objectType.object_schema);
@@ -85,30 +82,36 @@ export function ObjectSchemaEditor({ objectType, onSchemaUpdate }: ObjectSchemaE
         return true;
     };
 
-    return (
-        <div className="mx-2 my-2 rounded-2xl border border-solid shadow-md border-spacing-2">
-            <div className="flex items-center rounded-t-md border-b gap-x-2 py-2 pl-4 pr-2">
-                <div className="text-base font-semibold">Schema Editor</div>
-                <div>
-                    <Button variant="outline" size="sm" onClick={handleOnSave}>
-                        {
-                            displayJson ? "Edit Schema" : "Edit Json"
-                        }
-                    </Button>
-                </div>
-                <div className="ml-auto flex gap-x-2">
-                    <Button isLoading={isUpdating} variant="outline" size="sm" onClick={onSave}>Save Changes</Button>
-                </div>
-            </div>
-            <div className="px-4 py-2">
-                {
-                    displayJson
-                        ? <CodeMirrorEditor value={value} extensions={CODE_MIRROR_EXTENSIONS} editorRef={editorRef} />
-                        : <SchemaEditor schema={schema} />
-                }
+    const title = (
+        <div className='flex gap-2 items-center'><div className="text-base font-semibold">Schema Editor</div>
+            <div>
+                <Button variant="outline" size="sm" onClick={handleOnSave}>
+                    {
+                        displayJson ? "Edit Schema" : "Edit Json"
+                    }
+                </Button>
             </div>
         </div>
     );
+
+    return (
+        <Panel title={title} className="bg-background! h-[calc(100vh-197px)]"
+            action={<Button isLoading={isUpdating} variant="outline" size="sm" onClick={onSave}>Save Changes</Button>}
+        >
+            {
+                displayJson
+                    ? <MonacoEditor
+                        value={value}
+                        language="json"
+                        editorRef={editorRef}
+                        theme={theme === 'dark' ? 'vs-dark' : 'vs'}
+                    />
+                    : <SchemaEditor schema={schema} />
+            }
+
+
+        </ Panel>
+    );
 }
 
 function jsonToContent(json: any | undefined | null) {

package/src/features/store/types/SelectContentType.tsx

@@ -1,5 +1,5 @@
 import { ContentObjectTypeItem } from "@vertesia/common";
-import { VSelectBox } from "@vertesia/ui/core";
+import { SelectBox } from "@vertesia/ui/core";
 import { useUserSession } from "@vertesia/ui/session";
 import { useEffect, useState } from "react";
 
@@ -56,7 +56,7 @@ export function SelectContentType({ className, defaultValue, onChange, isClearab
     if (multiple) {
         return (
             <div className='flex flex-col gap-4 content-between'>
-                <VSelectBox<ContentObjectTypeItem>
+                <SelectBox<ContentObjectTypeItem>
                     options={session.typeRegistry?.types || []}
                     value={selectedTypes}
                     onChange={_onChangeMultiple}
@@ -73,7 +73,7 @@ export function SelectContentType({ className, defaultValue, onChange, isClearab
 
     return (
         <div className='flex flex-col gap-4 content-between'>
-            <VSelectBox<ContentObjectTypeItem>
+            <SelectBox<ContentObjectTypeItem>
                 options={session.typeRegistry?.types || []}
                 value={selectedType}
                 onChange={_onChange}

package/src/features/store/types/TableLayoutEditor.tsx

@@ -1,12 +1,8 @@
-import { basicSetup } from 'codemirror';
 import { useMemo, useRef, useState } from 'react';
-import { json } from '@codemirror/lang-json';
 import { ColumnLayout, ContentObjectType } from '@vertesia/common';
-import { Button, useToast } from '@vertesia/ui/core';
+import { Button, useToast, useTheme, Panel } from '@vertesia/ui/core';
 import { useUserSession } from '@vertesia/ui/session';
-import { CodeMirrorEditor, EditorApi } from '@vertesia/ui/widgets';
-
-const extensions = [basicSetup, json()];
+import { MonacoEditor, EditorApi } from '@vertesia/ui/widgets';
 
 interface TableLayoutEditorProps {
     objectType: ContentObjectType;
@@ -14,6 +10,7 @@ interface TableLayoutEditorProps {
 }
 export function TableLayoutEditor({ objectType, onLayoutUpdate }: TableLayoutEditorProps) {
     const toast = useToast();
+    const { theme } = useTheme();
 
     const [isUpdating, setUpdating] = useState(false);
     const { store } = useUserSession();
@@ -81,17 +78,16 @@ export function TableLayoutEditor({ objectType, onLayoutUpdate }: TableLayoutEdi
 
 
     return (
-        <div className="mx-2 my-2 rounded-2xl border border-solid shadow-xs">
-            <div className="flex items-center rounded-t-md border-b gap-x-2 py-2 pl-4 pr-2">
-                <div className="text-base font-semibold ">Table Layout Editor</div>
-                <div className="ml-auto flex gap-x-2">
-                    <Button isLoading={isUpdating} variant="outline" size="sm" onClick={onSave}>Save Changes</Button>
-                </div>
-            </div>
-            <div className="px-4 py-2">
-                <CodeMirrorEditor value={value} extensions={extensions} editorRef={editorRef} />
-            </div>
-        </div>
+        <Panel title="Table Layout Editor" className="bg-background! h-[calc(100vh-197px)]" action={
+            <Button isLoading={isUpdating} variant="outline" size="sm" onClick={onSave}>Save Changes</Button>
+        }>
+            <MonacoEditor
+                value={value}
+                language="json"
+                editorRef={editorRef}
+                theme={theme === 'dark' ? 'vs-dark' : 'vs'}
+            />
+        </Panel>
     )
 }