feat: Q1 2026 Roadmap — i18n package, test infrastructure, perf utilities, quick-start guide

.gitignore

@@ -58,6 +58,8 @@ apps/site/.source
 
 # Test artifacts
 test-screenshots
+test-results
+playwright-report
 
 # Vite timestamp files
 *.timestamp-*.mjs

ROADMAP.md

@@ -70,26 +70,26 @@ ObjectUI is a universal Server-Driven UI (SDUI) engine built on React + Tailwind
 #### 1.1 Test System Enhancement (4 weeks)
 **Target:** 80%+ test coverage
 
-- [ ] Add tests for all core modules (@object-ui/core)
-- [ ] Add tests for all components (@object-ui/components)
-- [ ] Add E2E test framework (Playwright)
+- [x] Add tests for all core modules (@object-ui/core)
+- [x] Add tests for all components (@object-ui/components)
+- [x] Add E2E test framework (Playwright)
 - [ ] Add performance benchmark suite
 - [ ] Visual regression tests (Storybook snapshot + Chromatic)
 
 #### 1.2 Internationalization (i18n) Support (3 weeks)
 **Target:** 10+ languages, RTL layout
 
-- [ ] Create @object-ui/i18n package
-- [ ] Integrate i18next library
-- [ ] Add translation support to all components
-- [ ] Provide 10+ language packs (zh, en, ja, ko, de, fr, es, pt, ru, ar)
-- [ ] RTL layout support
-- [ ] Date/currency formatting utilities
+- [x] Create @object-ui/i18n package
+- [x] Integrate i18next library
+- [x] Add translation support to all components
+- [x] Provide 10+ language packs (zh, en, ja, ko, de, fr, es, pt, ru, ar)
+- [x] RTL layout support
+- [x] Date/currency formatting utilities
 
 #### 1.3 Documentation System Upgrade (2 weeks)
 **Target:** World-class documentation
 
-- [ ] 5-minute quick start guide
+- [x] 5-minute quick start guide
 - [ ] Complete zero-to-deployment tutorial
 - [ ] Video tutorial series
 - [ ] Complete case studies (CRM, E-commerce, Analytics, Workflow)
@@ -98,6 +98,9 @@ ObjectUI is a universal Server-Driven UI (SDUI) engine built on React + Tailwind
 #### 1.4 Performance Optimization (3 weeks)
 **Target:** 50%+ performance improvement
 
+- [x] Enhanced lazy loading with retry and error boundaries
+- [x] Plugin preloading utilities
+
 **Performance Targets:**
 - First Contentful Paint: 800ms → 400ms
 - Largest Contentful Paint: 1.2s → 600ms

content/docs/guide/meta.json

@@ -1,6 +1,7 @@
 {
   "title": "Guide",
   "pages": [
+    "quick-start",
     "architecture",
     "schema-rendering",
     "layout",

content/docs/guide/quick-start.md

@@ -0,0 +1,196 @@
+---
+title: "Quick Start"
+description: "Get up and running with ObjectUI in 5 minutes - install, configure, and render your first server-driven UI"
+---
+
+# Quick Start
+
+Get up and running with ObjectUI in **5 minutes**. This guide walks you through installation, basic setup, and rendering your first server-driven UI.
+
+## Prerequisites
+
+- **Node.js** 20+
+- **pnpm** 9+ (recommended) or npm/yarn
+- Basic knowledge of **React** and **TypeScript**
+
+## Step 1: Create a React Project
+
+If you don't have an existing React project, create one with Vite:
+
+```bash
+pnpm create vite my-app --template react-ts
+cd my-app
+```
+
+## Step 2: Install ObjectUI
+
+Install the core ObjectUI packages:
+
+```bash
+pnpm add @object-ui/react @object-ui/core @object-ui/types @object-ui/components @object-ui/fields
+```
+
+Install Tailwind CSS (required for styling):
+
+```bash
+pnpm add -D tailwindcss @tailwindcss/vite
+```
+
+## Step 3: Configure Tailwind CSS
+
+Add Tailwind to your `vite.config.ts`:
+
+```ts
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+});
+```
+
+Add to your `src/index.css`:
+
+```css
+@import "tailwindcss";
+```
+
+## Step 4: Register Components
+
+Create `src/setup.ts` to register the built-in components:
+
+```ts
+import { Registry } from '@object-ui/core';
+import { registerAllComponents } from '@object-ui/components';
+import { registerAllFields } from '@object-ui/fields';
+
+// Register the built-in component renderers
+registerAllComponents(Registry);
+registerAllFields(Registry);
+```
+
+## Step 5: Render Your First UI
+
+Replace `src/App.tsx` with:
+
+```tsx
+import './setup';
+import { SchemaRenderer } from '@object-ui/react';
+
+// Define your UI as JSON schema
+const schema = {
+  type: 'form',
+  fields: [
+    {
+      name: 'name',
+      label: 'Full Name',
+      type: 'string',
+      required: true,
+    },
+    {
+      name: 'email',
+      label: 'Email Address',
+      type: 'string',
+      widget: 'email',
+    },
+    {
+      name: 'role',
+      label: 'Role',
+      type: 'string',
+      widget: 'select',
+      options: [
+        { label: 'Admin', value: 'admin' },
+        { label: 'Editor', value: 'editor' },
+        { label: 'Viewer', value: 'viewer' },
+      ],
+    },
+  ],
+  submitLabel: 'Create User',
+};
+
+function App() {
+  return (
+    <div className="max-w-md mx-auto p-8">
+      <h1 className="text-2xl font-bold mb-6">ObjectUI Demo</h1>
+      <SchemaRenderer
+        schema={schema}
+        onSubmit={(data) => {
+          console.log('Form submitted:', data);
+          alert(JSON.stringify(data, null, 2));
+        }}
+      />
+    </div>
+  );
+}
+
+export default App;
+```
+
+## Step 6: Run the App
+
+```bash
+pnpm dev
+```
+
+Open [http://localhost:5173](http://localhost:5173) — you should see a fully functional form rendered from JSON!
+
+## What Just Happened?
+
+1. **JSON Schema** → You defined a form as a JSON object with fields, types, and labels
+2. **Registry** → Built-in components were registered to handle each schema type
+3. **SchemaRenderer** → Converted the JSON into interactive React components (Shadcn UI)
+4. **Zero UI Code** → No JSX needed for the form fields — it's all driven by data
+
+## Next Steps
+
+### Add a Data Table
+
+```tsx
+const tableSchema = {
+  type: 'crud',
+  resource: 'users',
+  columns: [
+    { name: 'name', label: 'Name' },
+    { name: 'email', label: 'Email' },
+    { name: 'role', label: 'Role' },
+  ],
+};
+```
+
+### Add Internationalization
+
+```bash
+pnpm add @object-ui/i18n
+```
+
+```tsx
+import { I18nProvider } from '@object-ui/i18n';
+
+function App() {
+  return (
+    <I18nProvider config={{ defaultLanguage: 'zh' }}>
+      <SchemaRenderer schema={schema} />
+    </I18nProvider>
+  );
+}
+```
+
+### Use Lazy Loading for Plugins
+
+```tsx
+import { createLazyPlugin } from '@object-ui/react';
+
+const ObjectGrid = createLazyPlugin(
+  () => import('@object-ui/plugin-grid'),
+  { fallback: <div>Loading grid...</div> }
+);
+```
+
+### Learn More
+
+- [Architecture Overview](/docs/guide/architecture) — Understand how ObjectUI works
+- [Schema Rendering](/docs/guide/schema-rendering) — Deep dive into schema rendering
+- [Component Registry](/docs/guide/component-registry) — Customize and extend components
+- [Plugins](/docs/guide/plugins) — Add views like Grid, Kanban, Charts
+- [Fields Guide](/docs/guide/fields) — All 30+ field types

e2e/smoke.spec.ts

@@ -0,0 +1,29 @@
+import { test, expect } from '@playwright/test';
+
+/**
+ * Smoke test to verify the console app loads correctly.
+ * This is a foundational E2E test that validates the basic app shell.
+ */
+test.describe('Console App', () => {
+  test('should load the home page', async ({ page }) => {
+    await page.goto('/');
+    // Wait for the app to render
+    await page.waitForLoadState('networkidle');
+    // The page should have rendered something (not blank)
+    const body = page.locator('body');
+    await expect(body).not.toBeEmpty();
+  });
+
+  test('should display the navigation sidebar', async ({ page }) => {
+    await page.goto('/');
+    await page.waitForLoadState('networkidle');
+    // The app shell should contain a navigation area
+    const nav = page.locator('nav').first();
+    await expect(nav).toBeVisible();
+  });
+
+  test('should have correct page title', async ({ page }) => {
+    await page.goto('/');
+    await expect(page).toHaveTitle(/.+/);
+  });
+});

package.json

@@ -61,7 +61,9 @@
     "changeset:version": "changeset version",
     "changeset:publish": "changeset publish",
     "pretest:coverage": "turbo run build --filter=@object-ui/types --filter=@object-ui/core --filter=@object-ui/react --filter=@object-ui/components --filter=@object-ui/fields --filter=@object-ui/layout --filter=@object-ui/plugin-kanban --filter=@object-ui/plugin-charts --filter=@object-ui/plugin-form --filter=@object-ui/plugin-grid --filter=@object-ui/plugin-dashboard",
-    "test:compliance": "vitest run src/__tests__/compliance.test.tsx"
+    "test:compliance": "vitest run src/__tests__/compliance.test.tsx",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui"
   },
   "devDependencies": {
     "@changesets/cli": "^2.29.8",
@@ -99,6 +101,7 @@
     "jsdom": "^28.0.0",
     "msw": "^2.12.7",
     "msw-storybook-addon": "^2.0.6",
+    "@playwright/test": "^1.58.2",
     "playwright": "^1.58.0",
     "prettier": "^3.8.1",
     "react": "19.2.4",