objectstack-ai · huangyiirene · Jan 15, 2026 · Jan 15, 2026 · Jan 15, 2026 · Jan 15, 2026
diff --git a/examples/designer-modes/README.md b/examples/designer-modes/README.md
@@ -0,0 +1,73 @@
+# Designer Modes Example
+
+This example demonstrates the three specialized designer modes in Object UI:
+
+## 🎯 Designer Modes
+
+### 1. Form Designer
+Optimized for building forms with validation and field management.
+- **Components**: Form fields, buttons, basic layout
+- **Branding**: Emerald/Teal
+- **Use Case**: Creating contact forms, registration forms, data entry forms
+
+### 2. Layout Designer
+Optimized for designing page layouts and structures.
+- **Components**: Containers, grids, navigation, content
+- **Branding**: Blue/Indigo
+- **Use Case**: Creating page structures, dashboards, landing pages
+
+### 3. General Designer
+Full-featured designer with all available components.
+- **Components**: All 30+ components
+- **Branding**: Purple/Pink
+- **Use Case**: Any UI design task requiring maximum flexibility
+
+## 🚀 Running the Example
+
+```bash
+# Install dependencies (from root)
+pnpm install
+
+# Run the example
+cd examples/designer-modes
+pnpm dev
+```
+
+The application will start at `http://localhost:5173`
+
+## 🎨 Features
+
+- **Mode Switching**: Toggle between the three designer modes using the top navigation
+- **Live Preview**: See your changes in real-time as you design
+- **Schema Export**: Check the console to see the generated schema JSON
+- **Persistence**: Switch modes while maintaining your design (uses the same schema)
+
+## 📝 Usage
+
+1. **Start with a Mode**: Choose Form Designer for forms, Layout Designer for page structures, or General Designer for everything
+2. **Drag Components**: Drag components from the left panel to the canvas
+3. **Configure Properties**: Select a component and edit its properties in the right panel
+4. **Switch Modes**: Try switching between modes to see different component sets
+5. **Export Schema**: The schema is logged to the console on every change
+
+## 🔄 How It Works
+
+```tsx
+import { Designer } from '@object-ui/designer';
+
+function App() {
+  const [mode, setMode] = useState('general');
+
+  return (
+    <Designer 
+      mode={mode}
+      onSchemaChange={(schema) => console.log(schema)}
+    />
+  );
+}
+```
+
+## 📚 Related Documentation
+
+- [Specialized Designers Guide](../../packages/designer/SPECIALIZED_DESIGNERS.md)
+- [Main Designer Documentation](../../packages/designer/README.md)
diff --git a/examples/designer-modes/index.html b/examples/designer-modes/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Designer Modes Demo - Object UI</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/designer-modes/package.json b/examples/designer-modes/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "@examples/designer-modes",
+  "private": true,
+  "license": "MIT",
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@object-ui/core": "workspace:*",
+    "@object-ui/react": "workspace:*",
+    "@object-ui/components": "workspace:*",
+    "@object-ui/designer": "workspace:*",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^5.1.2",
+    "autoprefixer": "^10.4.23",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.19",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^5.0.0"
+  }
+}
diff --git a/examples/designer-modes/postcss.config.js b/examples/designer-modes/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/examples/designer-modes/src/App.tsx b/examples/designer-modes/src/App.tsx
@@ -0,0 +1,79 @@
+import { useState } from 'react';
+import { Designer, type DesignerMode } from '@object-ui/designer';
+import type { SchemaNode } from '@object-ui/core';
+
+function App() {
+  const [mode, setMode] = useState<DesignerMode>('general');
+  const [schema, setSchema] = useState<SchemaNode>({
+    type: 'div',
+    className: 'p-8',
+    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>
+        <div className="flex-1" />
+        <div className="flex gap-2">
+          <button
+            onClick={() => setMode('form')}
+            className={`px-4 py-2 rounded-lg font-medium transition-all ${
+              mode === 'form'
+                ? 'bg-emerald-500 text-white shadow-lg'
+                : 'bg-gray-800 text-gray-300 hover:bg-gray-700'
+            }`}
+          >
+            Form
+          </button>
+          <button
+            onClick={() => setMode('layout')}
+            className={`px-4 py-2 rounded-lg font-medium transition-all ${
+              mode === 'layout'
+                ? 'bg-blue-500 text-white shadow-lg'
+                : 'bg-gray-800 text-gray-300 hover:bg-gray-700'
+            }`}
+          >
+            Layout
+          </button>
+          <button
+            onClick={() => setMode('canvas')}
+            className={`px-4 py-2 rounded-lg font-medium transition-all ${
+              mode === 'canvas'
+                ? 'bg-amber-500 text-white shadow-lg'
+                : 'bg-gray-800 text-gray-300 hover:bg-gray-700'
+            }`}
+          >
+            Canvas
+          </button>
+          <button
+            onClick={() => setMode('general')}
+            className={`px-4 py-2 rounded-lg font-medium transition-all ${
+              mode === 'general'
+                ? 'bg-purple-500 text-white shadow-lg'
+                : 'bg-gray-800 text-gray-300 hover:bg-gray-700'
+            }`}
+          >
+            General
+          </button>
+        </div>
+      </div>
+
+      {/* Designer */}
+      <div className="flex-1 overflow-hidden">
+        <Designer
+          key={mode} // Re-mount when mode changes
+          mode={mode}
+          initialSchema={schema}
+          onSchemaChange={(newSchema) => {
+            setSchema(newSchema);
+            console.log('Schema updated:', newSchema);
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default App;
diff --git a/examples/designer-modes/src/index.css b/examples/designer-modes/src/index.css
@@ -0,0 +1,27 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+#root {
+  width: 100%;
+  height: 100vh;
+}
diff --git a/examples/designer-modes/src/main.tsx b/examples/designer-modes/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+import './index.css';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
diff --git a/examples/designer-modes/tailwind.config.js b/examples/designer-modes/tailwind.config.js
@@ -0,0 +1,13 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "../../packages/designer/src/**/*.{js,ts,jsx,tsx}",
+    "../../packages/components/src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
diff --git a/examples/designer-modes/tsconfig.json b/examples/designer-modes/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
diff --git a/examples/designer-modes/vite.config.ts b/examples/designer-modes/vite.config.ts
@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': '/src',
+    },
+  },
+});
diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
   "scripts": {
     "dev": "pnpm --filter prototype dev",
     "start": "pnpm --filter prototype dev",
-    "build": "pnpm -r build",
+    "build": "pnpm --filter './packages/*' -r build && pnpm --filter './examples/*' -r build",
     "pretest": "pnpm --filter @object-ui/types build && pnpm --filter @object-ui/core build && pnpm --filter @object-ui/react build && pnpm --filter @object-ui/components build",
     "test": "vitest run",
     "docs:dev": "pnpm --filter object-ui-docs dev",

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -3,14 +3,14 @@
   "version": "0.2.0",
   "type": "module",
   "license": "MIT",
-  "main": "dist/index.umd.js",
-  "module": "dist/index.mjs",
+  "main": "dist/index.umd.cjs",
+  "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.umd.js"
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs"
     },
     "./dist/style.css": "./dist/style.css"
   },