Refactor imports to use relative paths in components

Replaced all '@/ui' and '@/lib/utils' imports with relative paths (e.g., '../../ui', '../lib/utils') across component renderer and UI files. Updated example app to register components and improved Vite config with additional path aliases for local development. These changes improve compatibility with monorepo setups and ensure correct module resolution.

Author: hotlong

examples/designer-modes/src/App.tsx

@@ -5,16 +5,17 @@ import type { SchemaNode } from '@object-ui/core';
 function App() {
   const [mode, setMode] = useState<DesignerMode>('general');
   const [schema, setSchema] = useState<SchemaNode>({
+    id: 'root',
     type: 'div',
-    className: 'p-8',
+    className: 'p-8 min-h-[400px] border-2 border-dashed border-gray-200 rounded-lg',
     body: []
   });
 
   return (
     <div className="h-screen flex flex-col">
       {/* Mode Selector */}
       <div className="h-16 bg-gray-900 text-white flex items-center px-6 gap-4 shadow-lg z-50">
-        <h1 className="text-xl font-bold">Object UI Designer Modes</h1>
+        <h1 className="text-xl font-bold">Object UI Designer</h1>
         <div className="flex-1" />
         <div className="flex gap-2">
           <button

examples/designer-modes/src/main.tsx

@@ -1,5 +1,6 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
+import '@object-ui/components'; // Register components
 import App from './App';
 import './index.css';
 

examples/designer-modes/vite.config.ts

@@ -1,12 +1,18 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import path from 'path';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
   resolve: {
     alias: {
       '@': '/src',
+      '@object-ui/core': path.resolve(__dirname, '../../packages/core/src'),
+      '@object-ui/types': path.resolve(__dirname, '../../packages/types/src'),
+      '@object-ui/components': path.resolve(__dirname, '../../packages/components/src'),
+      '@object-ui/designer': path.resolve(__dirname, '../../packages/designer/src'),
+      '@object-ui/react': path.resolve(__dirname, '../../packages/react/src'),
     },
   },
 });

packages/components/src/renderers/basic/html.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ComponentRegistry } from '@object-ui/core';
 import type { HtmlSchema } from '@object-ui/types';
-import { cn } from '@/lib/utils';
+import { cn } from '../../lib/utils';
 
 ComponentRegistry.register('html', 
   ({ schema, className, ...props }: { schema: HtmlSchema; className?: string; [key: string]: any }) => {

packages/components/src/renderers/basic/separator.tsx

@@ -1,6 +1,6 @@
 import { ComponentRegistry } from '@object-ui/core';
 import type { SeparatorSchema } from '@object-ui/types';
-import { Separator } from '@/ui';
+import { Separator } from '../../ui';
 
 ComponentRegistry.register('separator', 
   ({ schema, className, ...props }: { schema: SeparatorSchema; className?: string; [key: string]: any }) => {

packages/components/src/renderers/complex/calendar-view.tsx

@@ -1,6 +1,6 @@
 import { ComponentRegistry } from '@object-ui/core';
 import type { CalendarViewSchema, CalendarEvent } from '@object-ui/types';
-import { CalendarView } from '@/ui';
+import { CalendarView } from '../../ui';
 import React from 'react';
 
 // Calendar View Renderer - Airtable-style calendar for displaying records as events

packages/components/src/renderers/complex/carousel.tsx

@@ -6,7 +6,7 @@ import {
   CarouselItem, 
   CarouselPrevious, 
   CarouselNext 
-} from '@/ui';
+} from '../../ui';
 import { renderChildren } from '../../lib/utils';
 
 ComponentRegistry.register('carousel', 

packages/components/src/renderers/complex/chatbot.tsx

@@ -1,6 +1,6 @@
 import { ComponentRegistry } from '@object-ui/core';
 import type { ChatbotSchema, ChatMessage } from '@object-ui/types';
-import { Chatbot } from '@/ui';
+import { Chatbot } from '../../ui';
 import { useState } from 'react';
 
 /**

packages/components/src/renderers/complex/data-table.tsx

@@ -11,17 +11,17 @@ import {
   TableRow, 
   TableCell, 
   TableCaption 
-} from '@/ui/table';
-import { Button } from '@/ui/button';
-import { Input } from '@/ui/input';
-import { Checkbox } from '@/ui/checkbox';
+} from '../../ui/table';
+import { Button } from '../../ui/button';
+import { Input } from '../../ui/input';
+import { Checkbox } from '../../ui/checkbox';
 import { 
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@/ui/select';
+} from '../../ui/select';
 import { 
   ChevronUp, 
   ChevronDown, 

packages/components/src/renderers/complex/filter-builder.tsx

@@ -1,6 +1,6 @@
 import { ComponentRegistry } from '@object-ui/core';
 import type { FilterBuilderSchema, FilterGroup } from '@object-ui/types';
-import { FilterBuilder } from '@/ui/filter-builder';
+import { FilterBuilder } from '../../ui/filter-builder';
 
 ComponentRegistry.register('filter-builder', 
   ({ schema, className, onChange, ...props }: { schema: FilterBuilderSchema; className?: string; onChange?: (event: any) => void; [key: string]: any }) => {