From a99e550c6eb7aa05d5d9eab4d89c24cd84f840f1 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 14 Jan 2026 00:11:44 +0000
Subject: [PATCH 01/17] Initial plan


From a7882a47bd0dfc00fdd04785e626afcfdb4873c2 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 14 Jan 2026 00:44:07 +0000
Subject: [PATCH 02/17] Add comprehensive Form component with react-hook-form
 integration

Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>
---
 apps/playground/src/data/examples.ts          | 138 +++++++-
 .../components/src/renderers/form/form.tsx    | 325 ++++++++++++++++++
 .../components/src/renderers/form/index.ts    |   1 +
 3 files changed, 463 insertions(+), 1 deletion(-)
 create mode 100644 packages/components/src/renderers/form/form.tsx

diff --git a/apps/playground/src/data/examples.ts b/apps/playground/src/data/examples.ts
index 9f2e04ff2..bd8ce568b 100644
--- a/apps/playground/src/data/examples.ts
+++ b/apps/playground/src/data/examples.ts
@@ -608,6 +608,142 @@ export const examples = {
   ]
 }`,
 
+  'airtable-form': `{
+  "type": "div",
+  "className": "max-w-4xl space-y-6",
+  "body": [
+    {
+      "type": "div",
+      "className": "space-y-2",
+      "body": [
+        {
+          "type": "text",
+          "content": "Airtable-Style Feature-Complete Form",
+          "className": "text-3xl font-bold"
+        },
+        {
+          "type": "text",
+          "content": "A comprehensive form component with validation, multi-column layout, and conditional fields",
+          "className": "text-muted-foreground"
+        }
+      ]
+    },
+    {
+      "type": "card",
+      "className": "shadow-sm",
+      "body": {
+        "type": "form",
+        "className": "p-6",
+        "submitLabel": "Create Project",
+        "cancelLabel": "Reset",
+        "showCancel": true,
+        "columns": 2,
+        "validationMode": "onBlur",
+        "resetOnSubmit": false,
+        "defaultValues": {
+          "projectType": "personal",
+          "priority": "medium",
+          "notifications": true
+        },
+        "fields": [
+          {
+            "name": "projectName",
+            "label": "Project Name",
+            "type": "input",
+            "required": true,
+            "placeholder": "Enter project name",
+            "validation": {
+              "minLength": {
+                "value": 3,
+                "message": "Project name must be at least 3 characters"
+              }
+            }
+          },
+          {
+            "name": "projectType",
+            "label": "Project Type",
+            "type": "select",
+            "required": true,
+            "options": [
+              { "label": "Personal", "value": "personal" },
+              { "label": "Team", "value": "team" },
+              { "label": "Enterprise", "value": "enterprise" }
+            ]
+          },
+          {
+            "name": "teamSize",
+            "label": "Team Size",
+            "type": "input",
+            "inputType": "number",
+            "placeholder": "Number of team members",
+            "condition": {
+              "field": "projectType",
+              "in": ["team", "enterprise"]
+            },
+            "validation": {
+              "min": {
+                "value": 2,
+                "message": "Team must have at least 2 members"
+              }
+            }
+          },
+          {
+            "name": "budget",
+            "label": "Budget",
+            "type": "input",
+            "inputType": "number",
+            "placeholder": "Project budget",
+            "condition": {
+              "field": "projectType",
+              "equals": "enterprise"
+            }
+          },
+          {
+            "name": "priority",
+            "label": "Priority Level",
+            "type": "select",
+            "required": true,
+            "options": [
+              { "label": "Low", "value": "low" },
+              { "label": "Medium", "value": "medium" },
+              { "label": "High", "value": "high" },
+              { "label": "Critical", "value": "critical" }
+            ]
+          },
+          {
+            "name": "deadline",
+            "label": "Deadline",
+            "type": "input",
+            "inputType": "date",
+            "condition": {
+              "field": "priority",
+              "in": ["high", "critical"]
+            }
+          },
+          {
+            "name": "description",
+            "label": "Project Description",
+            "type": "textarea",
+            "placeholder": "Describe your project goals and objectives",
+            "validation": {
+              "maxLength": {
+                "value": 500,
+                "message": "Description must not exceed 500 characters"
+              }
+            }
+          },
+          {
+            "name": "notifications",
+            "label": "Enable Notifications",
+            "type": "checkbox",
+            "description": "Receive updates about project progress"
+          }
+        ]
+      }
+    }
+  ]
+}`,
+
   'simple-page': `{
   "type": "div",
   "className": "space-y-4",
@@ -733,6 +869,6 @@ export type ExampleKey = keyof typeof examples;
 export const exampleCategories = {
   'Primitives': ['simple-page', 'input-states', 'button-variants'],
   'Layouts': ['grid-layout', 'dashboard', 'tabs-demo'],
-  'Forms': ['form-demo'],
+  'Forms': ['form-demo', 'airtable-form'],
   'Data Display': ['calendar-view']
 };
diff --git a/packages/components/src/renderers/form/form.tsx b/packages/components/src/renderers/form/form.tsx
new file mode 100644
index 000000000..6ae099086
--- /dev/null
+++ b/packages/components/src/renderers/form/form.tsx
@@ -0,0 +1,325 @@
+import { ComponentRegistry } from '@object-ui/core';
+import { useForm } from 'react-hook-form';
+import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage, FormDescription } from '@/ui/form';
+import { Button } from '@/ui/button';
+import { renderChildren } from '../../lib/utils';
+import { Alert, AlertDescription } from '@/ui/alert';
+import { AlertCircle, Loader2 } from 'lucide-react';
+import React from 'react';
+
+// Form renderer component - Airtable-style feature-complete form
+ComponentRegistry.register('form',
+  ({ schema, className, onAction, ...props }) => {
+    const {
+      defaultValues = {},
+      fields = [],
+      submitLabel = 'Submit',
+      cancelLabel = 'Cancel',
+      showCancel = false,
+      layout = 'vertical',
+      columns = 1,
+      onSubmit: onSubmitProp,
+      onChange: onChangeProp,
+      resetOnSubmit = false,
+      validationMode = 'onSubmit',
+      disabled = false,
+    } = schema;
+
+    // Initialize react-hook-form
+    const form = useForm({
+      defaultValues,
+      mode: validationMode,
+    });
+
+    const [isSubmitting, setIsSubmitting] = React.useState(false);
+    const [submitError, setSubmitError] = React.useState<string | null>(null);
+
+    // Watch for form changes
+    React.useEffect(() => {
+      if (onChangeProp && onAction) {
+        const subscription = form.watch((data) => {
+          onAction({
+            type: 'form_change',
+            data,
+            formData: data,
+          });
+        });
+        return () => subscription.unsubscribe();
+      }
+    }, [form, onAction, onChangeProp]);
+
+    // Handle form submission
+    const handleSubmit = form.handleSubmit(async (data) => {
+      setIsSubmitting(true);
+      setSubmitError(null);
+
+      try {
+        if (onAction) {
+          const result = await onAction({
+            type: 'form_submit',
+            data,
+            formData: data,
+          });
+
+          // Check if submission returned an error
+          if (result?.error) {
+            setSubmitError(result.error);
+            return;
+          }
+        }
+
+        if (onSubmitProp && typeof onSubmitProp === 'function') {
+          await onSubmitProp(data);
+        }
+
+        if (resetOnSubmit) {
+          form.reset();
+        }
+      } catch (error: any) {
+        setSubmitError(error?.message || 'An error occurred during submission');
+        console.error('Form submission error:', error);
+      } finally {
+        setIsSubmitting(false);
+      }
+    });
+
+    // Handle cancel
+    const handleCancel = () => {
+      form.reset();
+      if (onAction) {
+        onAction({
+          type: 'form_cancel',
+          data: form.getValues(),
+        });
+      }
+    };
+
+    // Determine grid classes based on columns
+    const gridClass = columns > 1 
+      ? `grid gap-4 md:grid-cols-${Math.min(columns, 4)}`
+      : 'space-y-4';
+
+    return (
+      <Form {...form}>
+        <form onSubmit={handleSubmit} className={className} {...props}>
+          {/* Form Error Alert */}
+          {submitError && (
+            <Alert variant="destructive" className="mb-4">
+              <AlertCircle className="h-4 w-4" />
+              <AlertDescription>{submitError}</AlertDescription>
+            </Alert>
+          )}
+
+          {/* Form Fields */}
+          {schema.children ? (
+            // If children are provided directly, render them
+            <div className={schema.fieldContainerClass || 'space-y-4'}>
+              {renderChildren(schema.children)}
+            </div>
+          ) : (
+            // Otherwise render fields from schema
+            <div className={schema.fieldContainerClass || gridClass}>
+              {fields.map((field: any, index: number) => {
+                const {
+                  name,
+                  label,
+                  description,
+                  type = 'input',
+                  required = false,
+                  disabled: fieldDisabled = false,
+                  validation = {},
+                  condition,
+                  ...fieldProps
+                } = field;
+
+                // Handle conditional rendering
+                if (condition) {
+                  const watchField = condition.field;
+                  const watchValue = form.watch(watchField);
+                  
+                  if (condition.equals && watchValue !== condition.equals) {
+                    return null;
+                  }
+                  if (condition.notEquals && watchValue === condition.notEquals) {
+                    return null;
+                  }
+                  if (condition.in && !condition.in.includes(watchValue)) {
+                    return null;
+                  }
+                }
+
+                // Build validation rules
+                const rules: any = {
+                  ...validation,
+                };
+
+                if (required) {
+                  rules.required = validation.required || `${label || name} is required`;
+                }
+
+                return (
+                  <FormField
+                    key={field.id || name || index}
+                    control={form.control}
+                    name={name}
+                    rules={rules}
+                    render={({ field: formField }) => (
+                      <FormItem>
+                        {label && (
+                          <FormLabel>
+                            {label}
+                            {required && <span className="text-destructive ml-1">*</span>}
+                          </FormLabel>
+                        )}
+                        <FormControl>
+                          {/* Render the actual field component based on type */}
+                          {renderFieldComponent(type, {
+                            ...fieldProps,
+                            ...formField,
+                            disabled: disabled || fieldDisabled || isSubmitting,
+                            schema: { type, ...fieldProps },
+                          })}
+                        </FormControl>
+                        {description && (
+                          <FormDescription>{description}</FormDescription>
+                        )}
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                );
+              })}
+            </div>
+          )}
+
+          {/* Form Actions */}
+          {(schema.showActions !== false) && (
+            <div className={`flex gap-2 ${layout === 'horizontal' ? 'justify-end' : 'justify-start'} mt-6`}>
+              {showCancel && (
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={handleCancel}
+                  disabled={isSubmitting || disabled}
+                >
+                  {cancelLabel}
+                </Button>
+              )}
+              <Button
+                type="submit"
+                disabled={isSubmitting || disabled}
+              >
+                {isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                {submitLabel}
+              </Button>
+            </div>
+          )}
+        </form>
+      </Form>
+    );
+  },
+  {
+    label: 'Form',
+    inputs: [
+      { 
+        name: 'fields', 
+        type: 'array', 
+        label: 'Fields',
+        description: 'Array of field configurations with name, label, type, validation, etc.'
+      },
+      { 
+        name: 'defaultValues', 
+        type: 'object', 
+        label: 'Default Values',
+        description: 'Object with default values for form fields'
+      },
+      { name: 'submitLabel', type: 'string', label: 'Submit Button Label', defaultValue: 'Submit' },
+      { name: 'cancelLabel', type: 'string', label: 'Cancel Button Label', defaultValue: 'Cancel' },
+      { name: 'showCancel', type: 'boolean', label: 'Show Cancel Button', defaultValue: false },
+      { 
+        name: 'layout', 
+        type: 'enum', 
+        enum: ['vertical', 'horizontal'],
+        label: 'Layout',
+        defaultValue: 'vertical'
+      },
+      { 
+        name: 'columns', 
+        type: 'number', 
+        label: 'Number of Columns',
+        defaultValue: 1,
+        description: 'For multi-column layouts (1-4)'
+      },
+      { 
+        name: 'validationMode', 
+        type: 'enum',
+        enum: ['onSubmit', 'onBlur', 'onChange', 'onTouched', 'all'],
+        label: 'Validation Mode',
+        defaultValue: 'onSubmit'
+      },
+      { name: 'resetOnSubmit', type: 'boolean', label: 'Reset After Submit', defaultValue: false },
+      { name: 'disabled', type: 'boolean', label: 'Disabled', defaultValue: false },
+      { name: 'className', type: 'string', label: 'CSS Class' },
+      { name: 'fieldContainerClass', type: 'string', label: 'Field Container CSS Class' }
+    ],
+    defaultProps: {
+      submitLabel: 'Submit',
+      cancelLabel: 'Cancel',
+      showCancel: false,
+      layout: 'vertical',
+      columns: 1,
+      validationMode: 'onSubmit',
+      resetOnSubmit: false,
+      disabled: false,
+      fields: [
+        {
+          name: 'name',
+          label: 'Name',
+          type: 'input',
+          required: true,
+          placeholder: 'Enter your name',
+        },
+        {
+          name: 'email',
+          label: 'Email',
+          type: 'input',
+          inputType: 'email',
+          required: true,
+          placeholder: 'Enter your email',
+        },
+      ],
+    },
+  }
+);
+
+// Helper function to render field components
+function renderFieldComponent(type: string, props: any) {
+  const { schema, ...fieldProps } = props;
+
+  switch (type) {
+    case 'input':
+      return <input className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm" {...fieldProps} />;
+    
+    case 'textarea':
+      return <textarea className="flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm" {...fieldProps} />;
+    
+    case 'checkbox':
+      return (
+        <div className="flex items-center space-x-2">
+          <input type="checkbox" className="h-4 w-4 rounded border-gray-300" {...fieldProps} />
+        </div>
+      );
+    
+    case 'select':
+      return (
+        <select className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm" {...fieldProps}>
+          {schema.options?.map((opt: any) => (
+            <option key={opt.value} value={opt.value}>{opt.label}</option>
+          ))}
+        </select>
+      );
+    
+    default:
+      return <input className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm" {...fieldProps} />;
+  }
+}
diff --git a/packages/components/src/renderers/form/index.ts b/packages/components/src/renderers/form/index.ts
index bdd27fce8..e4d8d2ef8 100644
--- a/packages/components/src/renderers/form/index.ts
+++ b/packages/components/src/renderers/form/index.ts
@@ -1,3 +1,4 @@
+import './form';
 import './button';
 import './input';
 import './textarea';

From e02322221befe58b6b75acf7b36d4287f0dd5d97 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 14 Jan 2026 00:48:36 +0000
Subject: [PATCH 03/17] Changes before error encountered

Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>
---
 .../components/src/renderers/form/form.tsx    | 48 ++++++++++++++-----
 1 file changed, 37 insertions(+), 11 deletions(-)

diff --git a/packages/components/src/renderers/form/form.tsx b/packages/components/src/renderers/form/form.tsx
index 6ae099086..a6bbebb0a 100644
--- a/packages/components/src/renderers/form/form.tsx
+++ b/packages/components/src/renderers/form/form.tsx
@@ -2,6 +2,16 @@ import { ComponentRegistry } from '@object-ui/core';
 import { useForm } from 'react-hook-form';
 import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage, FormDescription } from '@/ui/form';
 import { Button } from '@/ui/button';
+import { Input } from '@/ui/input';
+import { Textarea } from '@/ui/textarea';
+import { Checkbox } from '@/ui/checkbox';
+import { 
+  Select, 
+  SelectTrigger, 
+  SelectValue, 
+  SelectContent, 
+  SelectItem 
+} from '@/ui/select';
 import { renderChildren } from '../../lib/utils';
 import { Alert, AlertDescription } from '@/ui/alert';
 import { AlertCircle, Loader2 } from 'lucide-react';
@@ -176,8 +186,9 @@ ComponentRegistry.register('form',
                           {renderFieldComponent(type, {
                             ...fieldProps,
                             ...formField,
+                            inputType: fieldProps.inputType,
+                            options: fieldProps.options,
                             disabled: disabled || fieldDisabled || isSubmitting,
-                            schema: { type, ...fieldProps },
                           })}
                         </FormControl>
                         {description && (
@@ -294,32 +305,47 @@ ComponentRegistry.register('form',
 
 // Helper function to render field components
 function renderFieldComponent(type: string, props: any) {
-  const { schema, ...fieldProps } = props;
+  const { schema, inputType, options, ...fieldProps } = props;
 
   switch (type) {
     case 'input':
-      return <input className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm" {...fieldProps} />;
+      return <Input type={inputType || 'text'} {...fieldProps} />;
     
     case 'textarea':
-      return <textarea className="flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm" {...fieldProps} />;
+      return <Textarea {...fieldProps} />;
     
     case 'checkbox':
+      // For checkbox, we need to handle the value differently
+      const { value, onChange, ...checkboxProps } = fieldProps;
       return (
         <div className="flex items-center space-x-2">
-          <input type="checkbox" className="h-4 w-4 rounded border-gray-300" {...fieldProps} />
+          <Checkbox 
+            checked={value}
+            onCheckedChange={onChange}
+            {...checkboxProps}
+          />
         </div>
       );
     
     case 'select':
+      // For select with react-hook-form, we need to handle the onChange
+      const { value: selectValue, onChange: selectOnChange, ...selectProps } = fieldProps;
       return (
-        <select className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm" {...fieldProps}>
-          {schema.options?.map((opt: any) => (
-            <option key={opt.value} value={opt.value}>{opt.label}</option>
-          ))}
-        </select>
+        <Select value={selectValue} onValueChange={selectOnChange} {...selectProps}>
+          <SelectTrigger>
+            <SelectValue placeholder="Select an option" />
+          </SelectTrigger>
+          <SelectContent>
+            {options?.map((opt: any) => (
+              <SelectItem key={opt.value} value={opt.value}>
+                {opt.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
       );
     
     default:
-      return <input className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm" {...fieldProps} />;
+      return <Input type={inputType || 'text'} {...fieldProps} />;
   }
 }

From b7c1d8f855a8b633a72d1421a91aa8489e9a8ca4 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 14 Jan 2026 01:06:08 +0000
Subject: [PATCH 04/17] Add comprehensive documentation for Form component

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
---
 docs/components/form.md | 403 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 403 insertions(+)
 create mode 100644 docs/components/form.md

diff --git a/docs/components/form.md b/docs/components/form.md
new file mode 100644
index 000000000..5fe425dcb
--- /dev/null
+++ b/docs/components/form.md
@@ -0,0 +1,403 @@
+# Form Component
+
+The `form` component is an Airtable-style feature-complete form with validation, multi-column layout, and conditional fields. It integrates with `react-hook-form` for powerful form state management and validation.
+
+## Features
+
+- **Field Validation**: Built-in validation with custom error messages
+- **Conditional Fields**: Show/hide fields based on other field values
+- **Multi-Column Layout**: Responsive grid layout (1-4 columns)
+- **Multiple Field Types**: Input, textarea, select, checkbox, and more
+- **Form State Management**: Powered by react-hook-form
+- **Loading States**: Built-in loading indicators during submission
+- **Error Handling**: Display validation errors and submission errors
+- **Default Values**: Pre-populate form fields
+- **Reset Functionality**: Reset form to initial state or defaults
+
+## Basic Usage
+
+```json
+{
+  "type": "form",
+  "submitLabel": "Submit",
+  "fields": [
+    {
+      "name": "username",
+      "label": "Username",
+      "type": "input",
+      "required": true,
+      "placeholder": "Enter your username"
+    },
+    {
+      "name": "email",
+      "label": "Email",
+      "type": "input",
+      "inputType": "email",
+      "required": true,
+      "placeholder": "your.email@example.com"
+    }
+  ]
+}
+```
+
+## Properties
+
+| Property | Type | Default | Description |
+|:---|:---|:---|:---|
+| `fields` | `array` | `[]` | Array of field configurations |
+| `defaultValues` | `object` | `{}` | Default values for form fields |
+| `submitLabel` | `string` | `'Submit'` | Submit button label |
+| `cancelLabel` | `string` | `'Cancel'` | Cancel/Reset button label |
+| `showCancel` | `boolean` | `false` | Show cancel/reset button |
+| `layout` | `'vertical' \| 'horizontal'` | `'vertical'` | Form layout direction |
+| `columns` | `number` | `1` | Number of columns for field layout (1-4) |
+| `validationMode` | `string` | `'onSubmit'` | When to validate: `onSubmit`, `onBlur`, `onChange`, `onTouched`, `all` |
+| `resetOnSubmit` | `boolean` | `false` | Reset form after successful submission |
+| `disabled` | `boolean` | `false` | Disable entire form |
+| `showActions` | `boolean` | `true` | Show submit/cancel buttons |
+| `className` | `string` | - | Additional CSS classes for form |
+| `fieldContainerClass` | `string` | - | CSS classes for field container |
+
+## Field Configuration
+
+Each field in the `fields` array can have the following properties:
+
+| Property | Type | Description |
+|:---|:---|:---|
+| `name` | `string` | **Required**. Field identifier (used for form data) |
+| `label` | `string` | Field label displayed above the input |
+| `type` | `string` | Field type: `input`, `textarea`, `select`, `checkbox` |
+| `inputType` | `string` | HTML input type for `input` fields: `text`, `email`, `password`, `number`, `date`, etc. |
+| `required` | `boolean` | Whether the field is required |
+| `disabled` | `boolean` | Disable this specific field |
+| `placeholder` | `string` | Placeholder text |
+| `description` | `string` | Help text displayed below the field |
+| `options` | `array` | Options for `select` fields: `[{label, value}]` |
+| `validation` | `object` | Validation rules (see Validation section) |
+| `condition` | `object` | Conditional rendering rules (see Conditional Fields section) |
+
+## Validation
+
+The `validation` object supports various rules:
+
+```json
+{
+  "name": "projectName",
+  "label": "Project Name",
+  "type": "input",
+  "required": true,
+  "validation": {
+    "minLength": {
+      "value": 3,
+      "message": "Project name must be at least 3 characters"
+    },
+    "maxLength": {
+      "value": 50,
+      "message": "Project name must not exceed 50 characters"
+    },
+    "pattern": {
+      "value": "^[a-zA-Z0-9\\s]+$",
+      "message": "Only letters, numbers, and spaces allowed"
+    }
+  }
+}
+```
+
+### Available Validation Rules
+
+- `required`: `string | boolean` - Error message or true
+- `minLength`: `{value: number, message: string}` - Minimum length
+- `maxLength`: `{value: number, message: string}` - Maximum length
+- `min`: `{value: number, message: string}` - Minimum value (for numbers)
+- `max`: `{value: number, message: string}` - Maximum value (for numbers)
+- `pattern`: `{value: string, message: string}` - Regex pattern
+- `validate`: Custom validation function
+
+## Conditional Fields
+
+Show or hide fields based on other field values:
+
+```json
+{
+  "name": "teamSize",
+  "label": "Team Size",
+  "type": "input",
+  "inputType": "number",
+  "condition": {
+    "field": "projectType",
+    "in": ["team", "enterprise"]
+  }
+}
+```
+
+### Condition Types
+
+- `equals`: Show when field equals specific value
+  ```json
+  {"field": "projectType", "equals": "enterprise"}
+  ```
+
+- `notEquals`: Show when field doesn't equal specific value
+  ```json
+  {"field": "status", "notEquals": "completed"}
+  ```
+
+- `in`: Show when field is in array of values
+  ```json
+  {"field": "priority", "in": ["high", "critical"]}
+  ```
+
+## Multi-Column Layout
+
+Create responsive multi-column forms:
+
+```json
+{
+  "type": "form",
+  "columns": 2,
+  "fields": [
+    {
+      "name": "firstName",
+      "label": "First Name",
+      "type": "input"
+    },
+    {
+      "name": "lastName",
+      "label": "Last Name",
+      "type": "input"
+    }
+  ]
+}
+```
+
+The `columns` property creates a responsive grid:
+- `1`: Single column (default)
+- `2`: Two columns on medium screens and up
+- `3`: Three columns on medium screens and up
+- `4`: Four columns on medium screens and up
+
+## Complete Example
+
+```json
+{
+  "type": "form",
+  "submitLabel": "Create Project",
+  "cancelLabel": "Reset",
+  "showCancel": true,
+  "columns": 2,
+  "validationMode": "onBlur",
+  "defaultValues": {
+    "projectType": "personal",
+    "priority": "medium",
+    "notifications": true
+  },
+  "fields": [
+    {
+      "name": "projectName",
+      "label": "Project Name",
+      "type": "input",
+      "required": true,
+      "placeholder": "Enter project name",
+      "validation": {
+        "minLength": {
+          "value": 3,
+          "message": "Project name must be at least 3 characters"
+        }
+      }
+    },
+    {
+      "name": "projectType",
+      "label": "Project Type",
+      "type": "select",
+      "required": true,
+      "options": [
+        {"label": "Personal", "value": "personal"},
+        {"label": "Team", "value": "team"},
+        {"label": "Enterprise", "value": "enterprise"}
+      ]
+    },
+    {
+      "name": "teamSize",
+      "label": "Team Size",
+      "type": "input",
+      "inputType": "number",
+      "placeholder": "Number of team members",
+      "condition": {
+        "field": "projectType",
+        "in": ["team", "enterprise"]
+      },
+      "validation": {
+        "min": {
+          "value": 2,
+          "message": "Team must have at least 2 members"
+        }
+      }
+    },
+    {
+      "name": "priority",
+      "label": "Priority Level",
+      "type": "select",
+      "required": true,
+      "options": [
+        {"label": "Low", "value": "low"},
+        {"label": "Medium", "value": "medium"},
+        {"label": "High", "value": "high"},
+        {"label": "Critical", "value": "critical"}
+      ]
+    },
+    {
+      "name": "deadline",
+      "label": "Deadline",
+      "type": "input",
+      "inputType": "date",
+      "condition": {
+        "field": "priority",
+        "in": ["high", "critical"]
+      }
+    },
+    {
+      "name": "description",
+      "label": "Project Description",
+      "type": "textarea",
+      "placeholder": "Describe your project goals",
+      "validation": {
+        "maxLength": {
+          "value": 500,
+          "message": "Description must not exceed 500 characters"
+        }
+      }
+    },
+    {
+      "name": "notifications",
+      "label": "Enable Notifications",
+      "type": "checkbox",
+      "description": "Receive updates about project progress"
+    }
+  ]
+}
+```
+
+## Form Submission
+
+Handle form submission using the `onAction` callback:
+
+```jsx
+import { SchemaRenderer } from '@object-ui/react';
+
+function MyForm() {
+  const handleAction = (action) => {
+    if (action.type === 'form_submit') {
+      console.log('Form submitted:', action.formData);
+      // Handle submission (e.g., API call)
+      
+      // Return error if submission fails
+      // return { error: 'Submission failed' };
+    }
+    
+    if (action.type === 'form_change') {
+      console.log('Form changed:', action.formData);
+    }
+    
+    if (action.type === 'form_cancel') {
+      console.log('Form cancelled');
+    }
+  };
+
+  return (
+    <SchemaRenderer
+      schema={formSchema}
+      onAction={handleAction}
+    />
+  );
+}
+```
+
+## Field Types
+
+### Input
+Standard text input with support for various HTML5 input types.
+
+```json
+{
+  "name": "email",
+  "label": "Email",
+  "type": "input",
+  "inputType": "email",
+  "placeholder": "your.email@example.com"
+}
+```
+
+### Textarea
+Multi-line text input for longer content.
+
+```json
+{
+  "name": "description",
+  "label": "Description",
+  "type": "textarea",
+  "placeholder": "Enter description..."
+}
+```
+
+### Select
+Dropdown selection from predefined options.
+
+```json
+{
+  "name": "country",
+  "label": "Country",
+  "type": "select",
+  "options": [
+    {"label": "United States", "value": "us"},
+    {"label": "Canada", "value": "ca"},
+    {"label": "United Kingdom", "value": "uk"}
+  ]
+}
+```
+
+### Checkbox
+Boolean toggle with label and description.
+
+```json
+{
+  "name": "terms",
+  "label": "I accept the terms and conditions",
+  "type": "checkbox",
+  "description": "Please read our terms before accepting"
+}
+```
+
+## Styling
+
+The form component uses Tailwind CSS classes and integrates with the Shadcn UI design system. You can customize the appearance using:
+
+- `className`: Add classes to the form element
+- `fieldContainerClass`: Add classes to the fields container
+- Individual field properties can't be styled directly, but the component follows the design system
+
+## Best Practices
+
+1. **Use Clear Labels**: Make field labels descriptive and user-friendly
+2. **Provide Helpful Placeholders**: Show examples of expected input
+3. **Add Descriptions**: Use field descriptions for additional context
+4. **Validate Early**: Use `validationMode: "onBlur"` for better UX
+5. **Group Related Fields**: Use multi-column layout to group related fields
+6. **Handle Errors Gracefully**: Provide clear, actionable error messages
+7. **Set Appropriate Default Values**: Pre-fill common choices
+8. **Use Conditional Logic**: Show only relevant fields to reduce cognitive load
+9. **Test Validation Rules**: Ensure validation messages are helpful
+
+## Accessibility
+
+The form component includes built-in accessibility features:
+
+- Proper label associations with `htmlFor`
+- ARIA attributes for error messages
+- Keyboard navigation support
+- Screen reader friendly error announcements
+- Focus management
+
+## Related Components
+
+- [Calendar View](./calendar-view.md) - For date-based data visualization
+- Individual form field components (`input`, `select`, `checkbox`, etc.)

From c6942b1ff0d82c0f1edacbd6c490f4ab9c99497a Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 14 Jan 2026 01:49:39 +0000
Subject: [PATCH 05/17] Fix code review issues: Add TypeScript types, fix
 Tailwind classes, improve error handling and validation

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
---
 docs/components/form.md                       |   6 +-
 .../components/src/renderers/form/form.tsx    | 133 ++++++++++++++----
 2 files changed, 113 insertions(+), 26 deletions(-)

diff --git a/docs/components/form.md b/docs/components/form.md
index 5fe425dcb..2895af8ee 100644
--- a/docs/components/form.md
+++ b/docs/components/form.md
@@ -96,7 +96,7 @@ The `validation` object supports various rules:
       "message": "Project name must not exceed 50 characters"
     },
     "pattern": {
-      "value": "^[a-zA-Z0-9\\s]+$",
+      "value": "/^[a-zA-Z0-9\\s]+$/",
       "message": "Only letters, numbers, and spaces allowed"
     }
   }
@@ -110,9 +110,11 @@ The `validation` object supports various rules:
 - `maxLength`: `{value: number, message: string}` - Maximum length
 - `min`: `{value: number, message: string}` - Minimum value (for numbers)
 - `max`: `{value: number, message: string}` - Maximum value (for numbers)
-- `pattern`: `{value: string, message: string}` - Regex pattern
+- `pattern`: `{value: string | RegExp, message: string}` - Regex pattern (string format: "/pattern/" or raw regex)
 - `validate`: Custom validation function
 
+**Note**: For `pattern` validation, you can provide either a regex string (e.g., "/^[a-z]+$/") or a raw regex string without delimiters (e.g., "^[a-z]+$"). React Hook Form will handle the conversion internally.
+
 ## Conditional Fields
 
 Show or hide fields based on other field values:
diff --git a/packages/components/src/renderers/form/form.tsx b/packages/components/src/renderers/form/form.tsx
index a6bbebb0a..e34bbe51c 100644
--- a/packages/components/src/renderers/form/form.tsx
+++ b/packages/components/src/renderers/form/form.tsx
@@ -15,8 +15,48 @@ import {
 import { renderChildren } from '../../lib/utils';
 import { Alert, AlertDescription } from '@/ui/alert';
 import { AlertCircle, Loader2 } from 'lucide-react';
+import { cn } from '@/lib/utils';
 import React from 'react';
 
+// TypeScript interfaces for type safety
+interface SelectOption {
+  label: string;
+  value: string;
+}
+
+interface FieldValidation {
+  required?: string | boolean;
+  minLength?: { value: number; message: string };
+  maxLength?: { value: number; message: string };
+  min?: { value: number; message: string };
+  max?: { value: number; message: string };
+  pattern?: { value: string | RegExp; message: string };
+  validate?: (value: any) => boolean | string;
+}
+
+interface FieldCondition {
+  field: string;
+  equals?: any;
+  notEquals?: any;
+  in?: any[];
+}
+
+interface FormFieldConfig {
+  id?: string;
+  name: string;
+  label?: string;
+  description?: string;
+  type?: string;
+  inputType?: string;
+  required?: boolean;
+  disabled?: boolean;
+  placeholder?: string;
+  options?: SelectOption[];
+  validation?: FieldValidation;
+  condition?: FieldCondition;
+  [key: string]: any;
+}
+
 // Form renderer component - Airtable-style feature-complete form
 ComponentRegistry.register('form',
   ({ schema, className, onAction, ...props }) => {
@@ -44,9 +84,9 @@ ComponentRegistry.register('form',
     const [isSubmitting, setIsSubmitting] = React.useState(false);
     const [submitError, setSubmitError] = React.useState<string | null>(null);
 
-    // Watch for form changes
+    // Watch for form changes - only track changes when onAction is available
     React.useEffect(() => {
-      if (onChangeProp && onAction) {
+      if (onAction) {
         const subscription = form.watch((data) => {
           onAction({
             type: 'form_change',
@@ -56,7 +96,7 @@ ComponentRegistry.register('form',
         });
         return () => subscription.unsubscribe();
       }
-    }, [form, onAction, onChangeProp]);
+    }, [form, onAction]);
 
     // Handle form submission
     const handleSubmit = form.handleSubmit(async (data) => {
@@ -85,9 +125,19 @@ ComponentRegistry.register('form',
         if (resetOnSubmit) {
           form.reset();
         }
-      } catch (error: any) {
-        setSubmitError(error?.message || 'An error occurred during submission');
-        console.error('Form submission error:', error);
+      } catch (error) {
+        // Handle different error types safely
+        const errorMessage = error instanceof Error 
+          ? error.message 
+          : typeof error === 'string' 
+            ? error 
+            : 'An error occurred during submission';
+        setSubmitError(errorMessage);
+        
+        // Only log errors in development
+        if (process.env.NODE_ENV === 'development') {
+          console.error('Form submission error:', error);
+        }
       } finally {
         setIsSubmitting(false);
       }
@@ -104,9 +154,15 @@ ComponentRegistry.register('form',
       }
     };
 
-    // Determine grid classes based on columns
+    // Determine grid classes based on columns (explicit classes for Tailwind JIT)
+    const gridColsClass = 
+      columns === 1 ? '' :
+      columns === 2 ? 'md:grid-cols-2' :
+      columns === 3 ? 'md:grid-cols-3' :
+      'md:grid-cols-4';
+    
     const gridClass = columns > 1 
-      ? `grid gap-4 md:grid-cols-${Math.min(columns, 4)}`
+      ? cn('grid gap-4', gridColsClass)
       : 'space-y-4';
 
     return (
@@ -129,7 +185,7 @@ ComponentRegistry.register('form',
           ) : (
             // Otherwise render fields from schema
             <div className={schema.fieldContainerClass || gridClass}>
-              {fields.map((field: any, index: number) => {
+              {fields.map((field: FormFieldConfig, index: number) => {
                 const {
                   name,
                   label,
@@ -142,18 +198,21 @@ ComponentRegistry.register('form',
                   ...fieldProps
                 } = field;
 
-                // Handle conditional rendering
+                // Handle conditional rendering with null/undefined safety
                 if (condition) {
                   const watchField = condition.field;
                   const watchValue = form.watch(watchField);
                   
-                  if (condition.equals && watchValue !== condition.equals) {
+                  // Check for null/undefined before evaluating conditions
+                  const hasValue = watchValue !== undefined && watchValue !== null;
+                  
+                  if (condition.equals !== undefined && watchValue !== condition.equals) {
                     return null;
                   }
-                  if (condition.notEquals && watchValue === condition.notEquals) {
+                  if (condition.notEquals !== undefined && watchValue === condition.notEquals) {
                     return null;
                   }
-                  if (condition.in && !condition.in.includes(watchValue)) {
+                  if (condition.in && (!hasValue || !condition.in.includes(watchValue))) {
                     return null;
                   }
                 }
@@ -164,12 +223,17 @@ ComponentRegistry.register('form',
                 };
 
                 if (required) {
-                  rules.required = validation.required || `${label || name} is required`;
+                  rules.required = typeof validation.required === 'string' 
+                    ? validation.required 
+                    : `${label || name} is required`;
                 }
 
+                // Use field.id or field.name for stable keys (never use index alone)
+                const fieldKey = field.id ?? name;
+
                 return (
                   <FormField
-                    key={field.id || name || index}
+                    key={fieldKey}
                     control={form.control}
                     name={name}
                     rules={rules}
@@ -178,7 +242,11 @@ ComponentRegistry.register('form',
                         {label && (
                           <FormLabel>
                             {label}
-                            {required && <span className="text-destructive ml-1">*</span>}
+                            {required && (
+                              <span className="text-destructive ml-1" aria-label="required">
+                                *
+                              </span>
+                            )}
                           </FormLabel>
                         )}
                         <FormControl>
@@ -188,6 +256,7 @@ ComponentRegistry.register('form',
                             ...formField,
                             inputType: fieldProps.inputType,
                             options: fieldProps.options,
+                            placeholder: fieldProps.placeholder,
                             disabled: disabled || fieldDisabled || isSubmitting,
                           })}
                         </FormControl>
@@ -303,16 +372,26 @@ ComponentRegistry.register('form',
   }
 );
 
-// Helper function to render field components
-function renderFieldComponent(type: string, props: any) {
-  const { schema, inputType, options, ...fieldProps } = props;
+// Helper function to render field components with proper typing
+interface RenderFieldProps {
+  inputType?: string;
+  options?: SelectOption[];
+  placeholder?: string;
+  value?: any;
+  onChange?: (value: any) => void;
+  disabled?: boolean;
+  [key: string]: any;
+}
+
+function renderFieldComponent(type: string, props: RenderFieldProps) {
+  const { inputType, options = [], placeholder, ...fieldProps } = props;
 
   switch (type) {
     case 'input':
-      return <Input type={inputType || 'text'} {...fieldProps} />;
+      return <Input type={inputType || 'text'} placeholder={placeholder} {...fieldProps} />;
     
     case 'textarea':
-      return <Textarea {...fieldProps} />;
+      return <Textarea placeholder={placeholder} {...fieldProps} />;
     
     case 'checkbox':
       // For checkbox, we need to handle the value differently
@@ -330,13 +409,19 @@ function renderFieldComponent(type: string, props: any) {
     case 'select':
       // For select with react-hook-form, we need to handle the onChange
       const { value: selectValue, onChange: selectOnChange, ...selectProps } = fieldProps;
+      
+      // Safety check for options
+      if (!options || options.length === 0) {
+        return <div className="text-sm text-muted-foreground">No options available</div>;
+      }
+      
       return (
         <Select value={selectValue} onValueChange={selectOnChange} {...selectProps}>
           <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
+            <SelectValue placeholder={placeholder ?? 'Select an option'} />
           </SelectTrigger>
           <SelectContent>
-            {options?.map((opt: any) => (
+            {options.map((opt: SelectOption) => (
               <SelectItem key={opt.value} value={opt.value}>
                 {opt.label}
               </SelectItem>
@@ -346,6 +431,6 @@ function renderFieldComponent(type: string, props: any) {
       );
     
     default:
-      return <Input type={inputType || 'text'} {...fieldProps} />;
+      return <Input type={inputType || 'text'} placeholder={placeholder} {...fieldProps} />;
   }
 }

From f3be6327612c4412d23a9352acc1a9e364abc4b0 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 14 Jan 2026 01:53:13 +0000
Subject: [PATCH 06/17] Minor fix: Remove unused index parameter and add
 ts-ignore for process check

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
---
 packages/components/src/renderers/form/form.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/renderers/form/form.tsx b/packages/components/src/renderers/form/form.tsx
index e34bbe51c..14f828372 100644
--- a/packages/components/src/renderers/form/form.tsx
+++ b/packages/components/src/renderers/form/form.tsx
@@ -134,8 +134,9 @@ ComponentRegistry.register('form',
             : 'An error occurred during submission';
         setSubmitError(errorMessage);
         
-        // Only log errors in development
-        if (process.env.NODE_ENV === 'development') {
+        // Log errors for debugging (dev environment only)
+        // @ts-ignore - process may not be defined in all environments
+        if (typeof process !== 'undefined' && process.env?.NODE_ENV === 'development') {
           console.error('Form submission error:', error);
         }
       } finally {
@@ -185,7 +186,7 @@ ComponentRegistry.register('form',
           ) : (
             // Otherwise render fields from schema
             <div className={schema.fieldContainerClass || gridClass}>
-              {fields.map((field: FormFieldConfig, index: number) => {
+              {fields.map((field: FormFieldConfig) => {
                 const {
                   name,
                   label,

From 16d7ecaf99e7dc9396aa316ef0910911ac48a6f5 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 14 Jan 2026 02:33:02 +0000
Subject: [PATCH 07/17] Fix CI test failure: Add pretest script to build
 dependencies before running tests

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
---
 packages/components/package.json   | 1 +
 packages/components/vite.config.ts | 9 +++++++++
 2 files changed, 10 insertions(+)

diff --git a/packages/components/package.json b/packages/components/package.json
index 2e9aa4509..fdab9f569 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -15,6 +15,7 @@
   },
   "scripts": {
     "build": "vite build",
+    "pretest": "pnpm --filter @object-ui/core build && pnpm --filter @object-ui/react build",
     "test": "vitest run"
   },
   "dependencies": {
diff --git a/packages/components/vite.config.ts b/packages/components/vite.config.ts
index 69be46124..bf3b4a213 100644
--- a/packages/components/vite.config.ts
+++ b/packages/components/vite.config.ts
@@ -32,4 +32,13 @@ export default defineConfig({
       },
     },
   },
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: [],
+    // Ensure dependencies are resolved properly for tests
+    deps: {
+      inline: ['@object-ui/core', '@object-ui/react'],
+    },
+  },
 });

From b67d36d1cf65e490c5b4dfadd4df977aa8cb7d84 Mon Sep 17 00:00:00 2001
From: Jack Zhuang <50353452+hotlong@users.noreply.github.com>
Date: Wed, 14 Jan 2026 12:34:24 +0800
Subject: [PATCH 08/17] Update pnpm-lock.yaml: Disable autoInstallPeers and
 clean up dependency versions

---
 pnpm-lock.yaml | 122 ++++++++-----------------------------------------
 1 file changed, 18 insertions(+), 104 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ff6c0586d..00ddcf3ef 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,7 +1,7 @@
 lockfileVersion: '9.0'
 
 settings:
-  autoInstallPeers: true
+  autoInstallPeers: false
   excludeLinksFromLockfile: false
 
 overrides:
@@ -19,10 +19,10 @@ importers:
         version: 6.9.1
       '@testing-library/react':
         specifier: ^16.3.1
-        version: 16.3.1(@testing-library/dom@10.4.1)(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 16.3.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@testing-library/user-event':
         specifier: ^14.6.1
-        version: 14.6.1(@testing-library/dom@10.4.1)
+        version: 14.6.1
       '@types/react':
         specifier: 18.3.12
         version: 18.3.12
@@ -122,7 +122,7 @@ importers:
     devDependencies:
       vitepress:
         specifier: ^1.0.0
-        version: 1.6.4(@algolia/client-search@5.46.3)(@types/node@24.10.8)(@types/react@18.3.12)(postcss@8.5.6)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)(typescript@5.9.3)
+        version: 1.6.4(@algolia/client-search@5.46.3)(@types/node@24.10.8)(@types/react@18.3.12)(postcss@8.5.6)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3)
       vue:
         specifier: ^3.4.0
         version: 3.5.26(typescript@5.9.3)
@@ -368,15 +368,9 @@ importers:
       next-themes:
         specifier: ^0.4.6
         version: 0.4.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react:
-        specifier: 18.3.1
-        version: 18.3.1
       react-day-picker:
         specifier: ^9.13.0
         version: 9.13.0(react@18.3.1)
-      react-dom:
-        specifier: 18.3.1
-        version: 18.3.1(react@18.3.1)
       react-hook-form:
         specifier: ^7.71.0
         version: 7.71.0(react@18.3.1)
@@ -463,24 +457,12 @@ importers:
       lucide-react:
         specifier: ^0.562.0
         version: 0.562.0(react@18.3.1)
-      react:
-        specifier: 18.3.1
-        version: 18.3.1
-      react-dom:
-        specifier: 18.3.1
-        version: 18.3.1(react@18.3.1)
 
   packages/react:
     dependencies:
       '@object-ui/core':
         specifier: workspace:*
         version: link:../core
-      react:
-        specifier: 18.3.1
-        version: 18.3.1
-      react-dom:
-        specifier: 18.3.1
-        version: 18.3.1(react@18.3.1)
     devDependencies:
       '@types/react':
         specifier: 18.3.12
@@ -2056,10 +2038,6 @@ packages:
   '@standard-schema/utils@0.3.0':
     resolution: {integrity: sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==}
 
-  '@testing-library/dom@10.4.1':
-    resolution: {integrity: sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==}
-    engines: {node: '>=18'}
-
   '@testing-library/jest-dom@6.9.1':
     resolution: {integrity: sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==}
     engines: {node: '>=14', npm: '>=6', yarn: '>=1'}
@@ -2088,9 +2066,6 @@ packages:
   '@types/argparse@1.0.38':
     resolution: {integrity: sha512-ebDJ9b0e702Yr7pWgB0jzm+CX4Srzz8RcXtLJDJB+BSccqMa36uyH/zUsSYao5+BD1ytv3k3rPYCq4mAE1hsXA==}
 
-  '@types/aria-query@5.0.4':
-    resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
-
   '@types/babel__core@7.20.5':
     resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
 
@@ -2468,11 +2443,6 @@ packages:
 
   ajv-formats@3.0.1:
     resolution: {integrity: sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==}
-    peerDependencies:
-      ajv: ^8.0.0
-    peerDependenciesMeta:
-      ajv:
-        optional: true
 
   ajv@6.12.6:
     resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
@@ -2522,9 +2492,6 @@ packages:
     resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
     engines: {node: '>=10'}
 
-  aria-query@5.3.0:
-    resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
-
   aria-query@5.3.2:
     resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
     engines: {node: '>= 0.4'}
@@ -2809,9 +2776,6 @@ packages:
     resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
     engines: {node: '>=6.0.0'}
 
-  dom-accessibility-api@0.5.16:
-    resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
-
   dom-accessibility-api@0.6.3:
     resolution: {integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==}
 
@@ -3379,10 +3343,6 @@ packages:
     peerDependencies:
       react: 18.3.1
 
-  lz-string@1.5.0:
-    resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
-    hasBin: true
-
   magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
@@ -3773,10 +3733,6 @@ packages:
     engines: {node: '>=14'}
     hasBin: true
 
-  pretty-format@27.5.1:
-    resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
-    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
-
   pretty-format@29.7.0:
     resolution: {integrity: sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -3811,9 +3767,6 @@ packages:
     peerDependencies:
       react: 18.3.1
 
-  react-is@17.0.2:
-    resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
-
   react-is@18.3.1:
     resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
 
@@ -3973,9 +3926,6 @@ packages:
   scheduler@0.23.2:
     resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
 
-  search-insights@2.17.3:
-    resolution: {integrity: sha512-RQPdCYTa8A68uM2jwxoY842xDhvx3E5LFL1LxvxCNMev4o5mLuokczhzjAgGwUZBAmOKZknArSxLKmXtIi2AxQ==}
-
   semver@6.3.1:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
@@ -4599,19 +4549,18 @@ snapshots:
       '@algolia/requester-fetch': 5.46.3
       '@algolia/requester-node-http': 5.46.3
 
-  '@algolia/autocomplete-core@1.17.7(@algolia/client-search@5.46.3)(algoliasearch@5.46.3)(search-insights@2.17.3)':
+  '@algolia/autocomplete-core@1.17.7(@algolia/client-search@5.46.3)(algoliasearch@5.46.3)':
     dependencies:
-      '@algolia/autocomplete-plugin-algolia-insights': 1.17.7(@algolia/client-search@5.46.3)(algoliasearch@5.46.3)(search-insights@2.17.3)
+      '@algolia/autocomplete-plugin-algolia-insights': 1.17.7(@algolia/client-search@5.46.3)(algoliasearch@5.46.3)
       '@algolia/autocomplete-shared': 1.17.7(@algolia/client-search@5.46.3)(algoliasearch@5.46.3)
     transitivePeerDependencies:
       - '@algolia/client-search'
       - algoliasearch
       - search-insights
 
-  '@algolia/autocomplete-plugin-algolia-insights@1.17.7(@algolia/client-search@5.46.3)(algoliasearch@5.46.3)(search-insights@2.17.3)':
+  '@algolia/autocomplete-plugin-algolia-insights@1.17.7(@algolia/client-search@5.46.3)(algoliasearch@5.46.3)':
     dependencies:
       '@algolia/autocomplete-shared': 1.17.7(@algolia/client-search@5.46.3)(algoliasearch@5.46.3)
-      search-insights: 2.17.3
     transitivePeerDependencies:
       - '@algolia/client-search'
       - algoliasearch
@@ -4866,9 +4815,9 @@ snapshots:
 
   '@docsearch/css@3.8.2': {}
 
-  '@docsearch/js@3.8.2(@algolia/client-search@5.46.3)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)':
+  '@docsearch/js@3.8.2(@algolia/client-search@5.46.3)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@docsearch/react': 3.8.2(@algolia/client-search@5.46.3)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)
+      '@docsearch/react': 3.8.2(@algolia/client-search@5.46.3)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       preact: 10.28.2
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -4877,9 +4826,9 @@ snapshots:
       - react-dom
       - search-insights
 
-  '@docsearch/react@3.8.2(@algolia/client-search@5.46.3)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)':
+  '@docsearch/react@3.8.2(@algolia/client-search@5.46.3)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@algolia/autocomplete-core': 1.17.7(@algolia/client-search@5.46.3)(algoliasearch@5.46.3)(search-insights@2.17.3)
+      '@algolia/autocomplete-core': 1.17.7(@algolia/client-search@5.46.3)(algoliasearch@5.46.3)
       '@algolia/autocomplete-preset-algolia': 1.17.7(@algolia/client-search@5.46.3)(algoliasearch@5.46.3)
       '@docsearch/css': 3.8.2
       algoliasearch: 5.46.3
@@ -4887,7 +4836,6 @@ snapshots:
       '@types/react': 18.3.12
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
-      search-insights: 2.17.3
     transitivePeerDependencies:
       - '@algolia/client-search'
 
@@ -6026,7 +5974,7 @@ snapshots:
     dependencies:
       ajv: 8.13.0
       ajv-draft-04: 1.0.0(ajv@8.13.0)
-      ajv-formats: 3.0.1(ajv@8.13.0)
+      ajv-formats: 3.0.1
       fs-extra: 11.3.3
       import-lazy: 4.0.0
       jju: 1.4.0
@@ -6107,17 +6055,6 @@ snapshots:
 
   '@standard-schema/utils@0.3.0': {}
 
-  '@testing-library/dom@10.4.1':
-    dependencies:
-      '@babel/code-frame': 7.28.6
-      '@babel/runtime': 7.28.6
-      '@types/aria-query': 5.0.4
-      aria-query: 5.3.0
-      dom-accessibility-api: 0.5.16
-      lz-string: 1.5.0
-      picocolors: 1.1.1
-      pretty-format: 27.5.1
-
   '@testing-library/jest-dom@6.9.1':
     dependencies:
       '@adobe/css-tools': 4.4.4
@@ -6127,24 +6064,19 @@ snapshots:
       picocolors: 1.1.1
       redent: 3.0.0
 
-  '@testing-library/react@16.3.1(@testing-library/dom@10.4.1)(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@testing-library/react@16.3.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.28.6
-      '@testing-library/dom': 10.4.1
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
       '@types/react': 18.3.12
       '@types/react-dom': 18.3.1
 
-  '@testing-library/user-event@14.6.1(@testing-library/dom@10.4.1)':
-    dependencies:
-      '@testing-library/dom': 10.4.1
+  '@testing-library/user-event@14.6.1': {}
 
   '@types/argparse@1.0.38': {}
 
-  '@types/aria-query@5.0.4': {}
-
   '@types/babel__core@7.20.5':
     dependencies:
       '@babel/parser': 7.28.6
@@ -6609,8 +6541,8 @@ snapshots:
     optionalDependencies:
       ajv: 8.13.0
 
-  ajv-formats@3.0.1(ajv@8.13.0):
-    optionalDependencies:
+  ajv-formats@3.0.1:
+    dependencies:
       ajv: 8.13.0
 
   ajv@6.12.6:
@@ -6680,10 +6612,6 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
-  aria-query@5.3.0:
-    dependencies:
-      dequal: 2.0.3
-
   aria-query@5.3.2: {}
 
   assertion-error@1.1.0: {}
@@ -6944,8 +6872,6 @@ snapshots:
     dependencies:
       esutils: 2.0.3
 
-  dom-accessibility-api@0.5.16: {}
-
   dom-accessibility-api@0.6.3: {}
 
   electron-to-chromium@1.5.267: {}
@@ -7614,8 +7540,6 @@ snapshots:
     dependencies:
       react: 18.3.1
 
-  lz-string@1.5.0: {}
-
   magic-string@0.30.21:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -8189,12 +8113,6 @@ snapshots:
 
   prettier@3.7.4: {}
 
-  pretty-format@27.5.1:
-    dependencies:
-      ansi-regex: 5.0.1
-      ansi-styles: 5.2.0
-      react-is: 17.0.2
-
   pretty-format@29.7.0:
     dependencies:
       '@jest/schemas': 29.6.3
@@ -8226,8 +8144,6 @@ snapshots:
     dependencies:
       react: 18.3.1
 
-  react-is@17.0.2: {}
-
   react-is@18.3.1: {}
 
   react-markdown@10.1.0(@types/react@18.3.12)(react@18.3.1):
@@ -8446,8 +8362,6 @@ snapshots:
     dependencies:
       loose-envify: 1.4.0
 
-  search-insights@2.17.3: {}
-
   semver@6.3.1: {}
 
   semver@7.5.4:
@@ -8871,10 +8785,10 @@ snapshots:
       fsevents: 2.3.3
       jiti: 1.21.7
 
-  vitepress@1.6.4(@algolia/client-search@5.46.3)(@types/node@24.10.8)(@types/react@18.3.12)(postcss@8.5.6)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)(typescript@5.9.3):
+  vitepress@1.6.4(@algolia/client-search@5.46.3)(@types/node@24.10.8)(@types/react@18.3.12)(postcss@8.5.6)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3):
     dependencies:
       '@docsearch/css': 3.8.2
-      '@docsearch/js': 3.8.2(@algolia/client-search@5.46.3)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)
+      '@docsearch/js': 3.8.2(@algolia/client-search@5.46.3)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@iconify-json/simple-icons': 1.2.66
       '@shikijs/core': 2.5.0
       '@shikijs/transformers': 2.5.0

From 5a6655dea37d7546ccd73d915968882301046053 Mon Sep 17 00:00:00 2001
From: Jack Zhuang <50353452+hotlong@users.noreply.github.com>
Date: Wed, 14 Jan 2026 13:27:58 +0800
Subject: [PATCH 09/17] Add tailwindcss-animate plugin and update
 testing-library/dom dependency

---
 apps/playground/tailwind.config.js |  4 +-
 package.json                       |  1 +
 pnpm-lock.yaml                     | 67 ++++++++++++++++++++++++++++--
 3 files changed, 67 insertions(+), 5 deletions(-)

diff --git a/apps/playground/tailwind.config.js b/apps/playground/tailwind.config.js
index 5a8596424..9a773fcb2 100644
--- a/apps/playground/tailwind.config.js
+++ b/apps/playground/tailwind.config.js
@@ -1,3 +1,5 @@
+import tailwindcssAnimate from "tailwindcss-animate";
+
 /** @type {import('tailwindcss').Config} */
 export default {
   darkMode: ["class"],
@@ -57,5 +59,5 @@ export default {
       }
     }
   },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [tailwindcssAnimate],
 }
diff --git a/package.json b/package.json
index 558f4ca13..08d608734 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "lint": "pnpm -r lint"
   },
   "devDependencies": {
+    "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",
     "@testing-library/user-event": "^14.6.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 00ddcf3ef..2f6713e69 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,15 +14,18 @@ importers:
 
   .:
     devDependencies:
+      '@testing-library/dom':
+        specifier: ^10.4.1
+        version: 10.4.1
       '@testing-library/jest-dom':
         specifier: ^6.9.1
         version: 6.9.1
       '@testing-library/react':
         specifier: ^16.3.1
-        version: 16.3.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 16.3.1(@testing-library/dom@10.4.1)(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@testing-library/user-event':
         specifier: ^14.6.1
-        version: 14.6.1
+        version: 14.6.1(@testing-library/dom@10.4.1)
       '@types/react':
         specifier: 18.3.12
         version: 18.3.12
@@ -2038,6 +2041,10 @@ packages:
   '@standard-schema/utils@0.3.0':
     resolution: {integrity: sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==}
 
+  '@testing-library/dom@10.4.1':
+    resolution: {integrity: sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==}
+    engines: {node: '>=18'}
+
   '@testing-library/jest-dom@6.9.1':
     resolution: {integrity: sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==}
     engines: {node: '>=14', npm: '>=6', yarn: '>=1'}
@@ -2066,6 +2073,9 @@ packages:
   '@types/argparse@1.0.38':
     resolution: {integrity: sha512-ebDJ9b0e702Yr7pWgB0jzm+CX4Srzz8RcXtLJDJB+BSccqMa36uyH/zUsSYao5+BD1ytv3k3rPYCq4mAE1hsXA==}
 
+  '@types/aria-query@5.0.4':
+    resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
+
   '@types/babel__core@7.20.5':
     resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
 
@@ -2492,6 +2502,9 @@ packages:
     resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
     engines: {node: '>=10'}
 
+  aria-query@5.3.0:
+    resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
+
   aria-query@5.3.2:
     resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
     engines: {node: '>= 0.4'}
@@ -2776,6 +2789,9 @@ packages:
     resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
     engines: {node: '>=6.0.0'}
 
+  dom-accessibility-api@0.5.16:
+    resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
+
   dom-accessibility-api@0.6.3:
     resolution: {integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==}
 
@@ -3343,6 +3359,10 @@ packages:
     peerDependencies:
       react: 18.3.1
 
+  lz-string@1.5.0:
+    resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
+    hasBin: true
+
   magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
@@ -3733,6 +3753,10 @@ packages:
     engines: {node: '>=14'}
     hasBin: true
 
+  pretty-format@27.5.1:
+    resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
   pretty-format@29.7.0:
     resolution: {integrity: sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -3767,6 +3791,9 @@ packages:
     peerDependencies:
       react: 18.3.1
 
+  react-is@17.0.2:
+    resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
+
   react-is@18.3.1:
     resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
 
@@ -6055,6 +6082,17 @@ snapshots:
 
   '@standard-schema/utils@0.3.0': {}
 
+  '@testing-library/dom@10.4.1':
+    dependencies:
+      '@babel/code-frame': 7.28.6
+      '@babel/runtime': 7.28.6
+      '@types/aria-query': 5.0.4
+      aria-query: 5.3.0
+      dom-accessibility-api: 0.5.16
+      lz-string: 1.5.0
+      picocolors: 1.1.1
+      pretty-format: 27.5.1
+
   '@testing-library/jest-dom@6.9.1':
     dependencies:
       '@adobe/css-tools': 4.4.4
@@ -6064,19 +6102,24 @@ snapshots:
       picocolors: 1.1.1
       redent: 3.0.0
 
-  '@testing-library/react@16.3.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@testing-library/react@16.3.1(@testing-library/dom@10.4.1)(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.28.6
+      '@testing-library/dom': 10.4.1
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
       '@types/react': 18.3.12
       '@types/react-dom': 18.3.1
 
-  '@testing-library/user-event@14.6.1': {}
+  '@testing-library/user-event@14.6.1(@testing-library/dom@10.4.1)':
+    dependencies:
+      '@testing-library/dom': 10.4.1
 
   '@types/argparse@1.0.38': {}
 
+  '@types/aria-query@5.0.4': {}
+
   '@types/babel__core@7.20.5':
     dependencies:
       '@babel/parser': 7.28.6
@@ -6612,6 +6655,10 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
+  aria-query@5.3.0:
+    dependencies:
+      dequal: 2.0.3
+
   aria-query@5.3.2: {}
 
   assertion-error@1.1.0: {}
@@ -6872,6 +6919,8 @@ snapshots:
     dependencies:
       esutils: 2.0.3
 
+  dom-accessibility-api@0.5.16: {}
+
   dom-accessibility-api@0.6.3: {}
 
   electron-to-chromium@1.5.267: {}
@@ -7540,6 +7589,8 @@ snapshots:
     dependencies:
       react: 18.3.1
 
+  lz-string@1.5.0: {}
+
   magic-string@0.30.21:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -8113,6 +8164,12 @@ snapshots:
 
   prettier@3.7.4: {}
 
+  pretty-format@27.5.1:
+    dependencies:
+      ansi-regex: 5.0.1
+      ansi-styles: 5.2.0
+      react-is: 17.0.2
+
   pretty-format@29.7.0:
     dependencies:
       '@jest/schemas': 29.6.3
@@ -8144,6 +8201,8 @@ snapshots:
     dependencies:
       react: 18.3.1
 
+  react-is@17.0.2: {}
+
   react-is@18.3.1: {}
 
   react-markdown@10.1.0(@types/react@18.3.12)(react@18.3.1):

From e2d75f48deed9c350c2c87a4b713329413dc6fbc Mon Sep 17 00:00:00 2001
From: Jack Zhuang <50353452+hotlong@users.noreply.github.com>
Date: Wed, 14 Jan 2026 13:32:05 +0800
Subject: [PATCH 10/17] Refactor component registration: Remove redundant
 'type' property and update input types for consistency

---
 packages/components/src/renderers/basic/icon.tsx         | 1 -
 packages/components/src/renderers/basic/image.tsx        | 1 -
 packages/components/src/renderers/data-display/chart.tsx | 5 ++---
 packages/core/src/registry/Registry.ts                   | 1 +
 4 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/renderers/basic/icon.tsx b/packages/components/src/renderers/basic/icon.tsx
index e05c06e76..974f09f9c 100644
--- a/packages/components/src/renderers/basic/icon.tsx
+++ b/packages/components/src/renderers/basic/icon.tsx
@@ -9,7 +9,6 @@ ComponentRegistry.register('icon',
   },
   {
     label: 'Icon',
-    type: 'basic',
     inputs: [
       { name: 'name', type: 'string', label: 'Icon Name' },
       { name: 'className', type: 'string', label: 'CSS Class' }
diff --git a/packages/components/src/renderers/basic/image.tsx b/packages/components/src/renderers/basic/image.tsx
index b3877f749..38675321a 100644
--- a/packages/components/src/renderers/basic/image.tsx
+++ b/packages/components/src/renderers/basic/image.tsx
@@ -11,7 +11,6 @@ ComponentRegistry.register('image',
   ),
   {
     label: 'Image',
-    type: 'basic',
     inputs: [
       { name: 'src', type: 'string', label: 'Source URL' },
       { name: 'alt', type: 'string', label: 'Alt Text' },
diff --git a/packages/components/src/renderers/data-display/chart.tsx b/packages/components/src/renderers/data-display/chart.tsx
index c04ca53ee..bbcf8f350 100644
--- a/packages/components/src/renderers/data-display/chart.tsx
+++ b/packages/components/src/renderers/data-display/chart.tsx
@@ -62,13 +62,12 @@ ComponentRegistry.register('chart',
   },
   {
     label: 'Chart',
-    type: 'data-display',
     inputs: [
       { 
         name: 'chartType', 
-        type: 'select', 
+        type: 'enum', 
         label: 'Chart Type',
-        options: [
+        enum: [
             { label: 'Bar', value: 'bar' },
             { label: 'Line', value: 'line' },
             { label: 'Area', value: 'area' }
diff --git a/packages/core/src/registry/Registry.ts b/packages/core/src/registry/Registry.ts
index 1b67d1b1e..5896a4814 100644
--- a/packages/core/src/registry/Registry.ts
+++ b/packages/core/src/registry/Registry.ts
@@ -11,6 +11,7 @@ export type ComponentInput = {
   enum?: string[] | { label: string; value: any }[];
   description?: string;
   advanced?: boolean;
+  inputType?: string;
 };
 
 export type ComponentMeta = {

From df64a2fa14ebc5bcd96705752d4b5a0801c94fae Mon Sep 17 00:00:00 2001
From: Jack Zhuang <50353452+hotlong@users.noreply.github.com>
Date: Wed, 14 Jan 2026 13:33:38 +0800
Subject: [PATCH 11/17] Update package.json

---
 package.json | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 08d608734..abe93eff9 100644
--- a/package.json
+++ b/package.json
@@ -10,11 +10,8 @@
     "docs"
   ],
   "scripts": {
-    "dev": "pnpm --filter prototype dev",
-    "start": "pnpm --filter prototype preview",
-    "playground:dev": "pnpm --filter @apps/playground dev",
-    "playground:build": "pnpm --filter @apps/playground build",
-    "playground:preview": "pnpm --filter @apps/playground preview",
+    "dev": "pnpm --filter @apps/playground dev",
+    "start": "pnpm --filter @apps/playground preview",
     "build": "pnpm -r build",
     "test": "pnpm -r test",
     "docs:dev": "pnpm --filter object-ui-docs dev",

From 3866b65c810dc8b689f8d0c7bd7a9644d45e1afd Mon Sep 17 00:00:00 2001
From: Jack Zhuang <50353452+hotlong@users.noreply.github.com>
Date: Wed, 14 Jan 2026 13:42:32 +0800
Subject: [PATCH 12/17] Enable auto-install of peer dependencies in npm config

Added .npmrc with auto-install-peers set to true and updated pnpm-lock.yaml to reflect this change. This ensures peer dependencies are automatically installed, improving dependency management and reducing manual intervention.
---
 .npmrc         |  1 +
 pnpm-lock.yaml | 62 +++++++++++++++++++++++++++++++++++++-------------
 2 files changed, 47 insertions(+), 16 deletions(-)
 create mode 100644 .npmrc

diff --git a/.npmrc b/.npmrc
new file mode 100644
index 000000000..3e775efb0
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1 @@
+auto-install-peers=true
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2f6713e69..e67535455 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,7 +1,7 @@
 lockfileVersion: '9.0'
 
 settings:
-  autoInstallPeers: false
+  autoInstallPeers: true
   excludeLinksFromLockfile: false
 
 overrides:
@@ -125,7 +125,7 @@ importers:
     devDependencies:
       vitepress:
         specifier: ^1.0.0
-        version: 1.6.4(@algolia/client-search@5.46.3)(@types/node@24.10.8)(@types/react@18.3.12)(postcss@8.5.6)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3)
+        version: 1.6.4(@algolia/client-search@5.46.3)(@types/node@24.10.8)(@types/react@18.3.12)(postcss@8.5.6)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)(typescript@5.9.3)
       vue:
         specifier: ^3.4.0
         version: 3.5.26(typescript@5.9.3)
@@ -371,9 +371,15 @@ importers:
       next-themes:
         specifier: ^0.4.6
         version: 0.4.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react:
+        specifier: 18.3.1
+        version: 18.3.1
       react-day-picker:
         specifier: ^9.13.0
         version: 9.13.0(react@18.3.1)
+      react-dom:
+        specifier: 18.3.1
+        version: 18.3.1(react@18.3.1)
       react-hook-form:
         specifier: ^7.71.0
         version: 7.71.0(react@18.3.1)
@@ -444,7 +450,7 @@ importers:
         version: 5.9.3
       vitest:
         specifier: ^1.0.0
-        version: 1.6.1(@types/node@24.10.8)(@vitest/ui@4.0.17(vitest@4.0.17))(happy-dom@20.1.0)(jsdom@27.4.0)
+        version: 1.6.1(@types/node@24.10.8)(@vitest/ui@4.0.17)(happy-dom@20.1.0)(jsdom@27.4.0)
 
   packages/designer:
     dependencies:
@@ -460,12 +466,24 @@ importers:
       lucide-react:
         specifier: ^0.562.0
         version: 0.562.0(react@18.3.1)
+      react:
+        specifier: 18.3.1
+        version: 18.3.1
+      react-dom:
+        specifier: 18.3.1
+        version: 18.3.1(react@18.3.1)
 
   packages/react:
     dependencies:
       '@object-ui/core':
         specifier: workspace:*
         version: link:../core
+      react:
+        specifier: 18.3.1
+        version: 18.3.1
+      react-dom:
+        specifier: 18.3.1
+        version: 18.3.1(react@18.3.1)
     devDependencies:
       '@types/react':
         specifier: 18.3.12
@@ -2453,6 +2471,11 @@ packages:
 
   ajv-formats@3.0.1:
     resolution: {integrity: sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==}
+    peerDependencies:
+      ajv: ^8.0.0
+    peerDependenciesMeta:
+      ajv:
+        optional: true
 
   ajv@6.12.6:
     resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
@@ -3953,6 +3976,9 @@ packages:
   scheduler@0.23.2:
     resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
 
+  search-insights@2.17.3:
+    resolution: {integrity: sha512-RQPdCYTa8A68uM2jwxoY842xDhvx3E5LFL1LxvxCNMev4o5mLuokczhzjAgGwUZBAmOKZknArSxLKmXtIi2AxQ==}
+
   semver@6.3.1:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
@@ -4576,18 +4602,19 @@ snapshots:
       '@algolia/requester-fetch': 5.46.3
       '@algolia/requester-node-http': 5.46.3
 
-  '@algolia/autocomplete-core@1.17.7(@algolia/client-search@5.46.3)(algoliasearch@5.46.3)':
+  '@algolia/autocomplete-core@1.17.7(@algolia/client-search@5.46.3)(algoliasearch@5.46.3)(search-insights@2.17.3)':
     dependencies:
-      '@algolia/autocomplete-plugin-algolia-insights': 1.17.7(@algolia/client-search@5.46.3)(algoliasearch@5.46.3)
+      '@algolia/autocomplete-plugin-algolia-insights': 1.17.7(@algolia/client-search@5.46.3)(algoliasearch@5.46.3)(search-insights@2.17.3)
       '@algolia/autocomplete-shared': 1.17.7(@algolia/client-search@5.46.3)(algoliasearch@5.46.3)
     transitivePeerDependencies:
       - '@algolia/client-search'
       - algoliasearch
       - search-insights
 
-  '@algolia/autocomplete-plugin-algolia-insights@1.17.7(@algolia/client-search@5.46.3)(algoliasearch@5.46.3)':
+  '@algolia/autocomplete-plugin-algolia-insights@1.17.7(@algolia/client-search@5.46.3)(algoliasearch@5.46.3)(search-insights@2.17.3)':
     dependencies:
       '@algolia/autocomplete-shared': 1.17.7(@algolia/client-search@5.46.3)(algoliasearch@5.46.3)
+      search-insights: 2.17.3
     transitivePeerDependencies:
       - '@algolia/client-search'
       - algoliasearch
@@ -4842,9 +4869,9 @@ snapshots:
 
   '@docsearch/css@3.8.2': {}
 
-  '@docsearch/js@3.8.2(@algolia/client-search@5.46.3)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@docsearch/js@3.8.2(@algolia/client-search@5.46.3)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)':
     dependencies:
-      '@docsearch/react': 3.8.2(@algolia/client-search@5.46.3)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@docsearch/react': 3.8.2(@algolia/client-search@5.46.3)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)
       preact: 10.28.2
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -4853,9 +4880,9 @@ snapshots:
       - react-dom
       - search-insights
 
-  '@docsearch/react@3.8.2(@algolia/client-search@5.46.3)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@docsearch/react@3.8.2(@algolia/client-search@5.46.3)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)':
     dependencies:
-      '@algolia/autocomplete-core': 1.17.7(@algolia/client-search@5.46.3)(algoliasearch@5.46.3)
+      '@algolia/autocomplete-core': 1.17.7(@algolia/client-search@5.46.3)(algoliasearch@5.46.3)(search-insights@2.17.3)
       '@algolia/autocomplete-preset-algolia': 1.17.7(@algolia/client-search@5.46.3)(algoliasearch@5.46.3)
       '@docsearch/css': 3.8.2
       algoliasearch: 5.46.3
@@ -4863,6 +4890,7 @@ snapshots:
       '@types/react': 18.3.12
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
+      search-insights: 2.17.3
     transitivePeerDependencies:
       - '@algolia/client-search'
 
@@ -6001,7 +6029,7 @@ snapshots:
     dependencies:
       ajv: 8.13.0
       ajv-draft-04: 1.0.0(ajv@8.13.0)
-      ajv-formats: 3.0.1
+      ajv-formats: 3.0.1(ajv@8.13.0)
       fs-extra: 11.3.3
       import-lazy: 4.0.0
       jju: 1.4.0
@@ -6584,8 +6612,8 @@ snapshots:
     optionalDependencies:
       ajv: 8.13.0
 
-  ajv-formats@3.0.1:
-    dependencies:
+  ajv-formats@3.0.1(ajv@8.13.0):
+    optionalDependencies:
       ajv: 8.13.0
 
   ajv@6.12.6:
@@ -8421,6 +8449,8 @@ snapshots:
     dependencies:
       loose-envify: 1.4.0
 
+  search-insights@2.17.3: {}
+
   semver@6.3.1: {}
 
   semver@7.5.4:
@@ -8844,10 +8874,10 @@ snapshots:
       fsevents: 2.3.3
       jiti: 1.21.7
 
-  vitepress@1.6.4(@algolia/client-search@5.46.3)(@types/node@24.10.8)(@types/react@18.3.12)(postcss@8.5.6)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3):
+  vitepress@1.6.4(@algolia/client-search@5.46.3)(@types/node@24.10.8)(@types/react@18.3.12)(postcss@8.5.6)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)(typescript@5.9.3):
     dependencies:
       '@docsearch/css': 3.8.2
-      '@docsearch/js': 3.8.2(@algolia/client-search@5.46.3)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@docsearch/js': 3.8.2(@algolia/client-search@5.46.3)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)
       '@iconify-json/simple-icons': 1.2.66
       '@shikijs/core': 2.5.0
       '@shikijs/transformers': 2.5.0
@@ -8893,7 +8923,7 @@ snapshots:
       - typescript
       - universal-cookie
 
-  vitest@1.6.1(@types/node@24.10.8)(@vitest/ui@4.0.17(vitest@4.0.17))(happy-dom@20.1.0)(jsdom@27.4.0):
+  vitest@1.6.1(@types/node@24.10.8)(@vitest/ui@4.0.17)(happy-dom@20.1.0)(jsdom@27.4.0):
     dependencies:
       '@vitest/expect': 1.6.1
       '@vitest/runner': 1.6.1

From a76c482b32447f531c15fa6a313e4288a6f7bc73 Mon Sep 17 00:00:00 2001
From: Jack Zhuang <50353452+hotlong@users.noreply.github.com>
Date: Wed, 14 Jan 2026 13:52:10 +0800
Subject: [PATCH 13/17] Add permissions section to PR checks workflow

---
 .github/workflows/pr-checks.yml | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/.github/workflows/pr-checks.yml b/.github/workflows/pr-checks.yml
index e038e2909..f0576226b 100644
--- a/.github/workflows/pr-checks.yml
+++ b/.github/workflows/pr-checks.yml
@@ -4,6 +4,11 @@ on:
   pull_request:
     types: [opened, synchronize, reopened]
 
+permissions:
+  contents: read
+  pull-requests: write
+  issues: write
+
 jobs:
   validate:
     name: Validate PR

From 0549013207b40efbb1d0ac2235dc71402184338c Mon Sep 17 00:00:00 2001
From: Jack Zhuang <50353452+hotlong@users.noreply.github.com>
Date: Wed, 14 Jan 2026 14:11:09 +0800
Subject: [PATCH 14/17] Refactor project structure: update package paths,
 enhance ESLint configuration, and improve Playground component logic

---
 .github/workflows/ci.yml               |  2 +-
 apps/playground/eslint.config.js       | 28 +++++++++++++++++++
 apps/playground/package.json           |  6 +++++
 apps/playground/src/App.tsx            | 24 ++++++++++++-----
 examples/prototype/tsconfig.app.json   |  2 +-
 packages/components/package.json       |  2 ++
 packages/components/postcss.config.js  |  2 +-
 packages/components/tailwind.config.js |  6 +++--
 pnpm-lock.yaml                         | 37 ++++++++++++++++++++++++--
 tsconfig.json                          |  4 +--
 vitest.config.mts                      |  2 +-
 11 files changed, 99 insertions(+), 16 deletions(-)
 create mode 100644 apps/playground/eslint.config.js

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 8cd115b7c..ea5a26ac0 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -97,7 +97,7 @@ jobs:
 
       - name: Check for build artifacts
         run: |
-          if [ ! -d "packages/protocol/dist" ]; then
+          if [ ! -d "packages/core/dist" ]; then
             echo "Protocol package build failed"
             exit 1
           fi
diff --git a/apps/playground/eslint.config.js b/apps/playground/eslint.config.js
new file mode 100644
index 000000000..092408a9f
--- /dev/null
+++ b/apps/playground/eslint.config.js
@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)
diff --git a/apps/playground/package.json b/apps/playground/package.json
index 30a8a2490..8be512d72 100644
--- a/apps/playground/package.json
+++ b/apps/playground/package.json
@@ -19,14 +19,20 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
+    "@eslint/js": "^9.39.2",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^5.1.1",
     "autoprefixer": "^10.4.23",
+    "eslint": "^9.39.2",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.26",
+    "globals": "^16.5.0",
     "postcss": "^8.5.6",
     "tailwindcss": "^3.4.19",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "~5.9.3",
+    "typescript-eslint": "^8.53.0",
     "vite": "^7.2.4"
   }
 }
diff --git a/apps/playground/src/App.tsx b/apps/playground/src/App.tsx
index 1b13f23a2..2c983c5fe 100644
--- a/apps/playground/src/App.tsx
+++ b/apps/playground/src/App.tsx
@@ -9,26 +9,34 @@ type ViewportSize = 'desktop' | 'tablet' | 'mobile';
 export default function Playground() {
   const [selectedExample, setSelectedExample] = useState<ExampleKey>('dashboard');
   const [code, setCode] = useState(examples['dashboard']);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [schema, setSchema] = useState<any>(null);
   const [jsonError, setJsonError] = useState<string | null>(null);
   const [viewportSize, setViewportSize] = useState<ViewportSize>('desktop');
   const [copied, setCopied] = useState(false);
 
-  // Real-time JSON parsing
-  useEffect(() => {
+  const updateSchema = (newCode: string) => {
     try {
-      const parsed = JSON.parse(code);
+      const parsed = JSON.parse(newCode);
       setSchema(parsed);
       setJsonError(null);
     } catch (e) {
       setJsonError((e as Error).message);
       // Keep previous schema on error
     }
-  }, [code]);
+  };
+
+  // Initial parse usage
+  useEffect(() => {
+    updateSchema(code);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // Run once on mount
 
   const handleExampleChange = (key: ExampleKey) => {
     setSelectedExample(key);
-    setCode(examples[key]);
+    const newCode = examples[key];
+    setCode(newCode);
+    updateSchema(newCode);
   };
 
   const handleCopySchema = async () => {
@@ -118,7 +126,11 @@ export default function Playground() {
         <div className="flex-1 overflow-hidden">
           <textarea
             value={code}
-            onChange={(e) => setCode(e.target.value)}
+            onChange={(e) => {
+              const val = e.target.value;
+              setCode(val);
+              updateSchema(val);
+            }}
             className="w-full h-full p-4 font-mono text-sm resize-none focus:outline-none border-0 bg-background"
             spellCheck={false}
             style={{ 
diff --git a/examples/prototype/tsconfig.app.json b/examples/prototype/tsconfig.app.json
index 2a69a0129..52365b2c5 100644
--- a/examples/prototype/tsconfig.app.json
+++ b/examples/prototype/tsconfig.app.json
@@ -25,7 +25,7 @@
 
     "baseUrl": ".",
     "paths": {
-       "@object-ui/protocol": ["../../packages/protocol/src"],
+       "@object-ui/protocol": ["../../packages/core/src"],
        "@object-ui/renderer": ["../../packages/renderer/src"],
        "@object-ui/renderer/*": ["../../packages/renderer/src/*"],
        "@object-ui/ui": ["../../packages/ui/src"],
diff --git a/packages/components/package.json b/packages/components/package.json
index fdab9f569..e86ee2f18 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,7 @@
 {
   "name": "@object-ui/components",
   "version": "0.1.0",
+  "type": "module",
   "license": "MIT",
   "main": "dist/index.umd.js",
   "module": "dist/index.mjs",
@@ -76,6 +77,7 @@
   "devDependencies": {
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^5.1.2",
     "autoprefixer": "^10.4.16",
     "postcss": "^8.4.31",
     "tailwindcss": "^3.3.5",
diff --git a/packages/components/postcss.config.js b/packages/components/postcss.config.js
index 33ad091d2..2e7af2b7f 100644
--- a/packages/components/postcss.config.js
+++ b/packages/components/postcss.config.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
diff --git a/packages/components/tailwind.config.js b/packages/components/tailwind.config.js
index 33e3b0561..1334787c0 100644
--- a/packages/components/tailwind.config.js
+++ b/packages/components/tailwind.config.js
@@ -1,5 +1,7 @@
+import tailwindcssAnimate from "tailwindcss-animate"
+
 /** @type {import('tailwindcss').Config} */
-module.exports = {
+export default {
   darkMode: ["class"],
   content: [
     './src/**/*.{ts,tsx}',
@@ -69,5 +71,5 @@ module.exports = {
       },
     },
   },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [tailwindcssAnimate],
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e67535455..0a03d8b43 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -93,6 +93,9 @@ importers:
         specifier: 18.3.1
         version: 18.3.1(react@18.3.1)
     devDependencies:
+      '@eslint/js':
+        specifier: ^9.39.2
+        version: 9.39.2
       '@types/react':
         specifier: 18.3.12
         version: 18.3.12
@@ -105,6 +108,18 @@ importers:
       autoprefixer:
         specifier: ^10.4.23
         version: 10.4.23(postcss@8.5.6)
+      eslint:
+        specifier: ^9.39.2
+        version: 9.39.2(jiti@1.21.7)
+      eslint-plugin-react-hooks:
+        specifier: ^7.0.1
+        version: 7.0.1(eslint@9.39.2(jiti@1.21.7))
+      eslint-plugin-react-refresh:
+        specifier: ^0.4.26
+        version: 0.4.26(eslint@9.39.2(jiti@1.21.7))
+      globals:
+        specifier: ^16.5.0
+        version: 16.5.0
       postcss:
         specifier: ^8.5.6
         version: 8.5.6
@@ -117,6 +132,9 @@ importers:
       typescript:
         specifier: ~5.9.3
         version: 5.9.3
+      typescript-eslint:
+        specifier: ^8.53.0
+        version: 8.53.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
       vite:
         specifier: ^7.2.4
         version: 7.3.1(@types/node@24.10.8)(jiti@1.21.7)
@@ -417,6 +435,9 @@ importers:
       '@types/react-dom':
         specifier: 18.3.1
         version: 18.3.1
+      '@vitejs/plugin-react':
+        specifier: ^5.1.2
+        version: 5.1.2(vite@5.4.21(@types/node@24.10.8))
       autoprefixer:
         specifier: ^10.4.16
         version: 10.4.23(postcss@8.5.6)
@@ -450,7 +471,7 @@ importers:
         version: 5.9.3
       vitest:
         specifier: ^1.0.0
-        version: 1.6.1(@types/node@24.10.8)(@vitest/ui@4.0.17)(happy-dom@20.1.0)(jsdom@27.4.0)
+        version: 1.6.1(@types/node@24.10.8)(@vitest/ui@4.0.17(vitest@4.0.17))(happy-dom@20.1.0)(jsdom@27.4.0)
 
   packages/designer:
     dependencies:
@@ -6357,6 +6378,18 @@ snapshots:
 
   '@ungap/structured-clone@1.3.0': {}
 
+  '@vitejs/plugin-react@5.1.2(vite@5.4.21(@types/node@24.10.8))':
+    dependencies:
+      '@babel/core': 7.28.6
+      '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.28.6)
+      '@babel/plugin-transform-react-jsx-source': 7.27.1(@babel/core@7.28.6)
+      '@rolldown/pluginutils': 1.0.0-beta.53
+      '@types/babel__core': 7.20.5
+      react-refresh: 0.18.0
+      vite: 5.4.21(@types/node@24.10.8)
+    transitivePeerDependencies:
+      - supports-color
+
   '@vitejs/plugin-react@5.1.2(vite@7.3.1(@types/node@24.10.8)(jiti@1.21.7))':
     dependencies:
       '@babel/core': 7.28.6
@@ -8923,7 +8956,7 @@ snapshots:
       - typescript
       - universal-cookie
 
-  vitest@1.6.1(@types/node@24.10.8)(@vitest/ui@4.0.17)(happy-dom@20.1.0)(jsdom@27.4.0):
+  vitest@1.6.1(@types/node@24.10.8)(@vitest/ui@4.0.17(vitest@4.0.17))(happy-dom@20.1.0)(jsdom@27.4.0):
     dependencies:
       '@vitest/expect': 1.6.1
       '@vitest/runner': 1.6.1
diff --git a/tsconfig.json b/tsconfig.json
index 60fddd7a9..bdb2861db 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -21,8 +21,8 @@
 
     "baseUrl": ".",
     "paths": {
-      "@object-ui/protocol": ["packages/protocol/src"],
-      "@object-ui/protocol/*": ["packages/protocol/src/*"],
+      "@object-ui/protocol": ["packages/core/src"],
+      "@object-ui/protocol/*": ["packages/core/src/*"],
       "@object-ui/engine": ["packages/engine/src"],
       "@object-ui/engine/*": ["packages/engine/src/*"],
       "@object-ui/ui": ["packages/ui/src"],
diff --git a/vitest.config.mts b/vitest.config.mts
index 0a73df8e4..54665afa3 100644
--- a/vitest.config.mts
+++ b/vitest.config.mts
@@ -25,7 +25,7 @@ export default defineConfig({
   },
   resolve: {
     alias: {
-      '@object-ui/protocol': path.resolve(__dirname, './packages/protocol/src'),
+      '@object-ui/protocol': path.resolve(__dirname, './packages/core/src'),
       '@object-ui/engine': path.resolve(__dirname, './packages/engine/src'),
       '@object-ui/renderer': path.resolve(__dirname, './packages/renderer/src'),
       '@object-ui/ui': path.resolve(__dirname, './packages/ui/src'),

From b99c0bcd779acab23dd5bedf04968f2eb1a89533 Mon Sep 17 00:00:00 2001
From: Jack Zhuang <50353452+hotlong@users.noreply.github.com>
Date: Wed, 14 Jan 2026 14:14:30 +0800
Subject: [PATCH 15/17] Update start script in package.json and change test
 environment to happy-dom in vite.config.ts

---
 package.json                       | 2 +-
 packages/components/vite.config.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index abe93eff9..87db4941b 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
   ],
   "scripts": {
     "dev": "pnpm --filter @apps/playground dev",
-    "start": "pnpm --filter @apps/playground preview",
+    "start": "pnpm --filter @examples/prototype dev",
     "build": "pnpm -r build",
     "test": "pnpm -r test",
     "docs:dev": "pnpm --filter object-ui-docs dev",
diff --git a/packages/components/vite.config.ts b/packages/components/vite.config.ts
index bf3b4a213..ed3d37dbc 100644
--- a/packages/components/vite.config.ts
+++ b/packages/components/vite.config.ts
@@ -34,7 +34,7 @@ export default defineConfig({
   },
   test: {
     globals: true,
-    environment: 'jsdom',
+    environment: 'happy-dom',
     setupFiles: [],
     // Ensure dependencies are resolved properly for tests
     deps: {

From 04c20706f81895ef68aeff49490d3a569fa20b0c Mon Sep 17 00:00:00 2001
From: Jack Zhuang <50353452+hotlong@users.noreply.github.com>
Date: Wed, 14 Jan 2026 14:22:56 +0800
Subject: [PATCH 16/17] Update package.json to set module type and modify
 vitest.config.ts to use happy-dom environment

---
 packages/designer/package.json     | 1 +
 packages/designer/vitest.config.ts | 6 +++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/designer/package.json b/packages/designer/package.json
index 102b1fc3f..a98365a7f 100644
--- a/packages/designer/package.json
+++ b/packages/designer/package.json
@@ -1,6 +1,7 @@
 {
   "name": "@object-ui/designer",
   "version": "0.1.0",
+  "type": "module",
   "license": "MIT",
   "description": "The Tool. A drag-and-drop visual editor to generate Object UI schemas.",
   "main": "dist/index.js",
diff --git a/packages/designer/vitest.config.ts b/packages/designer/vitest.config.ts
index 618bc40c8..d05e43392 100644
--- a/packages/designer/vitest.config.ts
+++ b/packages/designer/vitest.config.ts
@@ -1,9 +1,13 @@
 import { defineConfig } from 'vitest/config';
 import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
 export default defineConfig({
   test: {
-    environment: 'jsdom',
+    environment: 'happy-dom',
     exclude: ['**/node_modules/**', '**/dist/**'],
     alias: {
       '@object-ui/core': path.resolve(__dirname, '../core/src/index.ts'),

From 6c93e07837a959c96946cc0c7f60b43eb7d2669b Mon Sep 17 00:00:00 2001
From: Jack Zhuang <50353452+hotlong@users.noreply.github.com>
Date: Wed, 14 Jan 2026 14:33:08 +0800
Subject: [PATCH 17/17] feat: add path aliases for components in vitest
 configuration

---
 package.json      |  10 +-
 pnpm-lock.yaml    | 534 +++++++++++++++++++++++++++++++++-------------
 vitest.config.mts |   2 +
 3 files changed, 397 insertions(+), 149 deletions(-)

diff --git a/package.json b/package.json
index 87db4941b..94c33bbe9 100644
--- a/package.json
+++ b/package.json
@@ -27,10 +27,11 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",
     "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^24.10.8",
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
-    "@vitest/coverage-v8": "^4.0.17",
-    "@vitest/ui": "^4.0.17",
+    "@vitest/coverage-v8": "^2.1.8",
+    "@vitest/ui": "^2.1.8",
     "eslint": "^8.0.0",
     "happy-dom": "^20.1.0",
     "jsdom": "^27.4.0",
@@ -41,7 +42,7 @@
     "tslib": "^2.6.0",
     "turbo": "^2.6.3",
     "typescript": "^5.0.0",
-    "vitest": "^4.0.17"
+    "vitest": "^2.1.8"
   },
   "pnpm": {
     "overrides": {
@@ -50,5 +51,8 @@
       "@types/react": "18.3.12",
       "@types/react-dom": "18.3.1"
     }
+  },
+  "dependencies": {
+    "coverage-v8": "0.0.1-security"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0a03d8b43..f3b75976b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -13,6 +13,10 @@ overrides:
 importers:
 
   .:
+    dependencies:
+      coverage-v8:
+        specifier: 0.0.1-security
+        version: 0.0.1-security
     devDependencies:
       '@testing-library/dom':
         specifier: ^10.4.1
@@ -26,6 +30,9 @@ importers:
       '@testing-library/user-event':
         specifier: ^14.6.1
         version: 14.6.1(@testing-library/dom@10.4.1)
+      '@types/node':
+        specifier: ^24.10.8
+        version: 24.10.8
       '@types/react':
         specifier: 18.3.12
         version: 18.3.12
@@ -33,11 +40,11 @@ importers:
         specifier: 18.3.1
         version: 18.3.1
       '@vitest/coverage-v8':
-        specifier: ^4.0.17
-        version: 4.0.17(vitest@4.0.17)
+        specifier: ^2.1.8
+        version: 2.1.8(vitest@2.1.8)
       '@vitest/ui':
-        specifier: ^4.0.17
-        version: 4.0.17(vitest@4.0.17)
+        specifier: ^2.1.8
+        version: 2.1.8(vitest@2.1.8)
       eslint:
         specifier: ^8.0.0
         version: 8.57.1
@@ -69,8 +76,8 @@ importers:
         specifier: ^5.0.0
         version: 5.9.3
       vitest:
-        specifier: ^4.0.17
-        version: 4.0.17(@types/node@24.10.8)(@vitest/ui@4.0.17)(happy-dom@20.1.0)(jiti@1.21.7)(jsdom@27.4.0)
+        specifier: ^2.1.8
+        version: 2.1.8(@types/node@24.10.8)(@vitest/ui@2.1.8)(happy-dom@20.1.0)(jsdom@27.4.0)
 
   apps/playground:
     dependencies:
@@ -471,7 +478,7 @@ importers:
         version: 5.9.3
       vitest:
         specifier: ^1.0.0
-        version: 1.6.1(@types/node@24.10.8)(@vitest/ui@4.0.17(vitest@4.0.17))(happy-dom@20.1.0)(jsdom@27.4.0)
+        version: 1.6.1(@types/node@24.10.8)(@vitest/ui@2.1.8(vitest@2.1.8))(happy-dom@20.1.0)(jsdom@27.4.0)
 
   packages/designer:
     dependencies:
@@ -604,6 +611,10 @@ packages:
     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
     engines: {node: '>=10'}
 
+  '@ampproject/remapping@2.3.0':
+    resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
+    engines: {node: '>=6.0.0'}
+
   '@asamuzakjp/css-color@4.1.1':
     resolution: {integrity: sha512-B0Hv6G3gWGMn0xKJ0txEi/jM5iFpT3MfDxmhZFb4W047GvytCf1DHQ1D69W3zHI4yWe2aTZAA0JnbMZ7Xc8DuQ==}
 
@@ -700,9 +711,8 @@ packages:
     resolution: {integrity: sha512-0ZrskXVEHSWIqZM/sQZ4EV3jZJXRkio/WCxaqKZP1g//CEWEPSfeZFcms4XeKBCHU0ZKnIkdJeU/kF+eRp5lBg==}
     engines: {node: '>=6.9.0'}
 
-  '@bcoe/v8-coverage@1.0.2':
-    resolution: {integrity: sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==}
-    engines: {node: '>=18'}
+  '@bcoe/v8-coverage@0.2.3':
+    resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
 
   '@csstools/color-helpers@5.1.0':
     resolution: {integrity: sha512-S11EXWJyy0Mz5SYvRmY8nJYTFFd1LCNV+7cXyAgQtOOuzb4EsgfqDufL+9esx72/eLhsRdGZwaldu/h+E4t4BA==}
@@ -1165,6 +1175,14 @@ packages:
     resolution: {integrity: sha512-ZT55BDLV0yv0RBm2czMiZ+SqCGO7AvmOM3G/w2xhVPH+te0aKgFjmBvGlL1dH+ql2tgGO3MVrbb3jCKyvpgnxA==}
     engines: {node: 20 || >=22}
 
+  '@isaacs/cliui@8.0.2':
+    resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
+    engines: {node: '>=12'}
+
+  '@istanbuljs/schema@0.1.3':
+    resolution: {integrity: sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==}
+    engines: {node: '>=8'}
+
   '@jest/schemas@29.6.3':
     resolution: {integrity: sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -1210,6 +1228,10 @@ packages:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
     engines: {node: '>= 8'}
 
+  '@pkgjs/parseargs@0.11.0':
+    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
+    engines: {node: '>=14'}
+
   '@polka/url@1.0.0-next.29':
     resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
 
@@ -2127,9 +2149,6 @@ packages:
   '@types/babel__traverse@7.28.0':
     resolution: {integrity: sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==}
 
-  '@types/chai@5.2.3':
-    resolution: {integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==}
-
   '@types/d3-array@3.2.2':
     resolution: {integrity: sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==}
 
@@ -2160,9 +2179,6 @@ packages:
   '@types/debug@4.1.12':
     resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
 
-  '@types/deep-eql@4.0.2':
-    resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==}
-
   '@types/estree-jsx@1.0.5':
     resolution: {integrity: sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==}
 
@@ -2298,11 +2314,11 @@ packages:
       vite: ^5.0.0 || ^6.0.0
       vue: ^3.2.25
 
-  '@vitest/coverage-v8@4.0.17':
-    resolution: {integrity: sha512-/6zU2FLGg0jsd+ePZcwHRy3+WpNTBBhDY56P4JTRqUN/Dp6CvOEa9HrikcQ4KfV2b2kAHUFB4dl1SuocWXSFEw==}
+  '@vitest/coverage-v8@2.1.8':
+    resolution: {integrity: sha512-2Y7BPlKH18mAZYAW1tYByudlCYrQyl5RGvnnDYJKW5tCiO5qg3KSAy3XAxcxKz900a0ZXxWtKrMuZLe3lKBpJw==}
     peerDependencies:
-      '@vitest/browser': 4.0.17
-      vitest: 4.0.17
+      '@vitest/browser': 2.1.8
+      vitest: 2.1.8
     peerDependenciesMeta:
       '@vitest/browser':
         optional: true
@@ -2310,51 +2326,54 @@ packages:
   '@vitest/expect@1.6.1':
     resolution: {integrity: sha512-jXL+9+ZNIJKruofqXuuTClf44eSpcHlgj3CiuNihUF3Ioujtmc0zIa3UJOW5RjDK1YLBJZnWBlPuqhYycLioog==}
 
-  '@vitest/expect@4.0.17':
-    resolution: {integrity: sha512-mEoqP3RqhKlbmUmntNDDCJeTDavDR+fVYkSOw8qRwJFaW/0/5zA9zFeTrHqNtcmwh6j26yMmwx2PqUDPzt5ZAQ==}
+  '@vitest/expect@2.1.8':
+    resolution: {integrity: sha512-8ytZ/fFHq2g4PJVAtDX57mayemKgDR6X3Oa2Foro+EygiOJHUXhCqBAAKQYYajZpFoIfvBCF1j6R6IYRSIUFuw==}
 
-  '@vitest/mocker@4.0.17':
-    resolution: {integrity: sha512-+ZtQhLA3lDh1tI2wxe3yMsGzbp7uuJSWBM1iTIKCbppWTSBN09PUC+L+fyNlQApQoR+Ps8twt2pbSSXg2fQVEQ==}
+  '@vitest/mocker@2.1.8':
+    resolution: {integrity: sha512-7guJ/47I6uqfttp33mgo6ga5Gr1VnL58rcqYKyShoRK9ebu8T5Rs6HN3s1NABiBeVTdWNrwUMcHH54uXZBN4zA==}
     peerDependencies:
       msw: ^2.4.9
-      vite: ^6.0.0 || ^7.0.0-0
+      vite: ^5.0.0
     peerDependenciesMeta:
       msw:
         optional: true
       vite:
         optional: true
 
-  '@vitest/pretty-format@4.0.17':
-    resolution: {integrity: sha512-Ah3VAYmjcEdHg6+MwFE17qyLqBHZ+ni2ScKCiW2XrlSBV4H3Z7vYfPfz7CWQ33gyu76oc0Ai36+kgLU3rfF4nw==}
+  '@vitest/pretty-format@2.1.8':
+    resolution: {integrity: sha512-9HiSZ9zpqNLKlbIDRWOnAWqgcA7xu+8YxXSekhr0Ykab7PAYFkhkwoqVArPOtJhPmYeE2YHgKZlj3CP36z2AJQ==}
+
+  '@vitest/pretty-format@2.1.9':
+    resolution: {integrity: sha512-KhRIdGV2U9HOUzxfiHmY8IFHTdqtOhIzCpd8WRdJiE7D/HUcZVD0EgQCVjm+Q9gkUXWgBvMmTtZgIG48wq7sOQ==}
 
   '@vitest/runner@1.6.1':
     resolution: {integrity: sha512-3nSnYXkVkf3mXFfE7vVyPmi3Sazhb/2cfZGGs0JRzFsPFvAMBEcrweV1V1GsrstdXeKCTXlJbvnQwGWgEIHmOA==}
 
-  '@vitest/runner@4.0.17':
-    resolution: {integrity: sha512-JmuQyf8aMWoo/LmNFppdpkfRVHJcsgzkbCA+/Bk7VfNH7RE6Ut2qxegeyx2j3ojtJtKIbIGy3h+KxGfYfk28YQ==}
+  '@vitest/runner@2.1.8':
+    resolution: {integrity: sha512-17ub8vQstRnRlIU5k50bG+QOMLHRhYPAna5tw8tYbj+jzjcspnwnwtPtiOlkuKC4+ixDPTuLZiqiWWQ2PSXHVg==}
 
   '@vitest/snapshot@1.6.1':
     resolution: {integrity: sha512-WvidQuWAzU2p95u8GAKlRMqMyN1yOJkGHnx3M1PL9Raf7AQ1kwLKg04ADlCa3+OXUZE7BceOhVZiuWAbzCKcUQ==}
 
-  '@vitest/snapshot@4.0.17':
-    resolution: {integrity: sha512-npPelD7oyL+YQM2gbIYvlavlMVWUfNNGZPcu0aEUQXt7FXTuqhmgiYupPnAanhKvyP6Srs2pIbWo30K0RbDtRQ==}
+  '@vitest/snapshot@2.1.8':
+    resolution: {integrity: sha512-20T7xRFbmnkfcmgVEz+z3AU/3b0cEzZOt/zmnvZEctg64/QZbSDJEVm9fLnnlSi74KibmRsO9/Qabi+t0vCRPg==}
 
   '@vitest/spy@1.6.1':
     resolution: {integrity: sha512-MGcMmpGkZebsMZhbQKkAf9CX5zGvjkBTqf8Zx3ApYWXr3wG+QvEu2eXWfnIIWYSJExIp4V9FCKDEeygzkYrXMw==}
 
-  '@vitest/spy@4.0.17':
-    resolution: {integrity: sha512-I1bQo8QaP6tZlTomQNWKJE6ym4SHf3oLS7ceNjozxxgzavRAgZDc06T7kD8gb9bXKEgcLNt00Z+kZO6KaJ62Ew==}
+  '@vitest/spy@2.1.8':
+    resolution: {integrity: sha512-5swjf2q95gXeYPevtW0BLk6H8+bPlMb4Vw/9Em4hFxDcaOxS+e0LOX4yqNxoHzMR2akEB2xfpnWUzkZokmgWDg==}
 
-  '@vitest/ui@4.0.17':
-    resolution: {integrity: sha512-hRDjg6dlDz7JlZAvjbiCdAJ3SDG+NH8tjZe21vjxfvT2ssYAn72SRXMge3dKKABm3bIJ3C+3wdunIdur8PHEAw==}
+  '@vitest/ui@2.1.8':
+    resolution: {integrity: sha512-5zPJ1fs0ixSVSs5+5V2XJjXLmNzjugHRyV11RqxYVR+oMcogZ9qTuSfKW+OcTV0JeFNznI83BNylzH6SSNJ1+w==}
     peerDependencies:
-      vitest: 4.0.17
+      vitest: 2.1.8
 
   '@vitest/utils@1.6.1':
     resolution: {integrity: sha512-jOrrUvXM4Av9ZWiG1EajNto0u96kWAhJ1LmPmJhXXQx/32MecEKd10pOLYgS2BQx1TgkGhloPU1ArDW2vvaY6g==}
 
-  '@vitest/utils@4.0.17':
-    resolution: {integrity: sha512-RG6iy+IzQpa9SB8HAFHJ9Y+pTzI+h8553MrciN9eC6TFBErqrQaTas4vG+MVj8S4uKk8uTT2p0vgZPnTdxd96w==}
+  '@vitest/utils@2.1.8':
+    resolution: {integrity: sha512-dwSoui6djdwbfFmIgbIjX2ZhIoG7Ex/+xpxyiEgIGzjliY8xGkcpITKTlp6B4MgtGkF2ilvm97cPM96XZaAgcA==}
 
   '@volar/language-core@2.4.27':
     resolution: {integrity: sha512-DjmjBWZ4tJKxfNC1F6HyYERNHPYS7L7OPFyCrestykNdUZMFYzI9WTyvwPcaNaHlrEUwESHYsfEw3isInncZxQ==}
@@ -2518,6 +2537,10 @@ packages:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
     engines: {node: '>=8'}
 
+  ansi-regex@6.2.2:
+    resolution: {integrity: sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==}
+    engines: {node: '>=12'}
+
   ansi-styles@4.3.0:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
     engines: {node: '>=8'}
@@ -2526,6 +2549,10 @@ packages:
     resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
     engines: {node: '>=10'}
 
+  ansi-styles@6.2.3:
+    resolution: {integrity: sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==}
+    engines: {node: '>=12'}
+
   any-promise@1.3.0:
     resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
 
@@ -2560,9 +2587,6 @@ packages:
     resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
     engines: {node: '>=12'}
 
-  ast-v8-to-istanbul@0.3.10:
-    resolution: {integrity: sha512-p4K7vMz2ZSk3wN8l5o3y2bJAoZXT3VuJI5OLTATY/01CYWumWvwkUw0SqDBnNq6IiTO3qDa1eSQDibAV8g7XOQ==}
-
   autoprefixer@10.4.23:
     resolution: {integrity: sha512-YYTXSFulfwytnjAPlw8QHncHJmlvFKtczb8InXaAx9Q0LbfDnfEYDE55omerIJKihhmU61Ft+cAOSzQVaBUmeA==}
     engines: {node: ^10 || ^12 || >=14}
@@ -2627,8 +2651,8 @@ packages:
     resolution: {integrity: sha512-RITGBfijLkBddZvnn8jdqoTypxvqbOLYQkGGxXzeFjVHvudaPw0HNFD9x928/eUwYWd2dPCugVqspGALTZZQKw==}
     engines: {node: '>=4'}
 
-  chai@6.2.2:
-    resolution: {integrity: sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==}
+  chai@5.3.3:
+    resolution: {integrity: sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==}
     engines: {node: '>=18'}
 
   chalk@4.1.2:
@@ -2650,6 +2674,10 @@ packages:
   check-error@1.0.3:
     resolution: {integrity: sha512-iKEoDYaRmd1mxM90a2OEfWhjsjPpYPuQ+lMYsoxB126+t8fw7ySEO48nmDg5COTjxDI65/Y2OWpeEHk3ZOe8zg==}
 
+  check-error@2.1.3:
+    resolution: {integrity: sha512-PAJdDJusoxnwm1VwW07VWwUN1sl7smmC3OKggvndJFadxxDRyFJBX/ggnu/KE4kQAB7a3Dp8f/YXC1FlUprWmA==}
+    engines: {node: '>= 16'}
+
   chokidar@3.6.0:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
@@ -2700,6 +2728,9 @@ packages:
     resolution: {integrity: sha512-7Vv6asjS4gMOuILabD3l739tsaxFQmC+a7pLZm02zyvs8p977bL3zEgq3yDk5rn9B0PbYgIv++jmHcuUab4RhA==}
     engines: {node: '>=18'}
 
+  coverage-v8@0.0.1-security:
+    resolution: {integrity: sha512-m5c7m+S22CM+YHALYgqJCL9sBbbSkDWP3cxRAkwRMw+/N7cMwqiQ0FDpKe6LXhLY/QJ8zGaDOwYW74M7j1Wrlw==}
+
   cross-spawn@7.0.6:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
@@ -2802,6 +2833,10 @@ packages:
     resolution: {integrity: sha512-SUwdGfqdKOwxCPeVYjwSyRpJ7Z+fhpwIAtmCUdZIWZ/YP5R9WAsyuSgpLVDi9bjWoN2LXHNss/dk3urXtdQxGg==}
     engines: {node: '>=6'}
 
+  deep-eql@5.0.2:
+    resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==}
+    engines: {node: '>=6'}
+
   deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
@@ -2839,6 +2874,9 @@ packages:
   dom-accessibility-api@0.6.3:
     resolution: {integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==}
 
+  eastasianwidth@0.2.0:
+    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
+
   electron-to-chromium@1.5.267:
     resolution: {integrity: sha512-0Drusm6MVRXSOJpGbaSVgcQsuB4hEkMpHXaVstcPmhu5LIedxs1xNK/nIxmQIU/RPC0+1/o0AVZfBTkTNJOdUw==}
 
@@ -2858,6 +2896,12 @@ packages:
   emoji-regex-xs@1.0.0:
     resolution: {integrity: sha512-LRlerrMYoIDrT6jgpeZ2YYl/L8EulRTt5hQcYjy5AInh7HWXKimpqx68aknBFpGL2+/IcogTcaydJEgaTmOpDg==}
 
+  emoji-regex@8.0.0:
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+
+  emoji-regex@9.2.2:
+    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
+
   entities@6.0.1:
     resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
     engines: {node: '>=0.12'}
@@ -3045,6 +3089,10 @@ packages:
   focus-trap@7.8.0:
     resolution: {integrity: sha512-/yNdlIkpWbM0ptxno3ONTuf+2g318kh2ez3KSeZN5dZ8YC6AAmgeWz+GasYYiBJPFaYcSAPeu4GfhUaChzIJXA==}
 
+  foreground-child@3.3.1:
+    resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
+    engines: {node: '>=14'}
+
   fraction.js@5.3.4:
     resolution: {integrity: sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==}
 
@@ -3086,6 +3134,10 @@ packages:
     resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
     engines: {node: '>=10.13.0'}
 
+  glob@10.5.0:
+    resolution: {integrity: sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==}
+    hasBin: true
+
   glob@7.2.3:
     resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
     deprecated: Glob versions prior to v9 are no longer supported
@@ -3241,6 +3293,10 @@ packages:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
 
+  is-fullwidth-code-point@3.0.0:
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    engines: {node: '>=8'}
+
   is-glob@4.0.3:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
@@ -3282,10 +3338,17 @@ packages:
     resolution: {integrity: sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==}
     engines: {node: '>=10'}
 
+  istanbul-lib-source-maps@5.0.6:
+    resolution: {integrity: sha512-yg2d+Em4KizZC5niWhQaIomgf5WlL4vOOjZ5xGCmF8SnPE/mDWWXgvRExdcpCgh9lLRRa1/fSYp2ymmbJ1pI+A==}
+    engines: {node: '>=10'}
+
   istanbul-reports@3.2.0:
     resolution: {integrity: sha512-HGYWWS/ehqTV3xN10i23tkPkpH46MLCIMFNCaaKNavAXTF1RkqxawEPtnjnGZ6XKSInBKkiOA5BKS+aZiY3AvA==}
     engines: {node: '>=8'}
 
+  jackspeak@3.4.3:
+    resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
+
   jiti@1.21.7:
     resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
     hasBin: true
@@ -3382,6 +3445,12 @@ packages:
   loupe@2.3.7:
     resolution: {integrity: sha512-zSMINGVYkdpYSOBmLi0D1Uo7JU9nVdQKrHxC8eYlV+9YKK9WePqAlL7lSlorG/U2Fw1w0hTBmaa/jrQ3UbPHtA==}
 
+  loupe@3.2.1:
+    resolution: {integrity: sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==}
+
+  lru-cache@10.4.3:
+    resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
+
   lru-cache@11.2.4:
     resolution: {integrity: sha512-B5Y16Jr9LB9dHVkh6ZevG+vAbOsNOYCX+sXvFWFu7B3Iz5mijW3zdbMyhsh8ANd2mSWBYdJgnqi+mL7/LrOPYg==}
     engines: {node: 20 || >=22}
@@ -3410,8 +3479,8 @@ packages:
   magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
-  magicast@0.5.1:
-    resolution: {integrity: sha512-xrHS24IxaLrvuo613F719wvOIv9xPHFWQHuvGUBmPnCA/3MQxKI3b+r7n1jAoDHmsbC5bRhTZYR77invLAxVnw==}
+  magicast@0.3.5:
+    resolution: {integrity: sha512-L0WhttDl+2BOsybvEOLK7fW3UA0OQ0IQ2d6Zl2x/a6vVRs3bAY0ECOSHHeL5jD+SbOpOCUEi0y1DgHEn9Qn1AQ==}
 
   make-dir@4.0.0:
     resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
@@ -3585,6 +3654,10 @@ packages:
     resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
     engines: {node: '>=16 || 14 >=14.17'}
 
+  minipass@7.1.2:
+    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
   minisearch@7.2.0:
     resolution: {integrity: sha512-dqT2XBYUOZOiC5t2HRnwADjhNS2cecp9u+TJRiJ1Qp/f5qjkeT5APcGPjHw+bz89Ms8Jp+cG4AlE+QZ/QnDglg==}
 
@@ -3640,9 +3713,6 @@ packages:
     resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
     engines: {node: '>= 6'}
 
-  obug@2.1.1:
-    resolution: {integrity: sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ==}
-
   once@1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
 
@@ -3669,6 +3739,9 @@ packages:
     resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
     engines: {node: '>=10'}
 
+  package-json-from-dist@1.0.1:
+    resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
+
   parent-module@1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
@@ -3701,6 +3774,10 @@ packages:
   path-parse@1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
 
+  path-scurry@1.11.1:
+    resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
+    engines: {node: '>=16 || 14 >=14.18'}
+
   pathe@1.1.2:
     resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
 
@@ -3710,6 +3787,10 @@ packages:
   pathval@1.1.1:
     resolution: {integrity: sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==}
 
+  pathval@2.0.1:
+    resolution: {integrity: sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ==}
+    engines: {node: '>= 14.16'}
+
   perfect-debounce@1.0.0:
     resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
 
@@ -4070,6 +4151,14 @@ packages:
     resolution: {integrity: sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==}
     engines: {node: '>=0.6.19'}
 
+  string-width@4.2.3:
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
+    engines: {node: '>=8'}
+
+  string-width@5.1.2:
+    resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
+    engines: {node: '>=12'}
+
   stringify-entities@4.0.4:
     resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==}
 
@@ -4077,6 +4166,10 @@ packages:
     resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
     engines: {node: '>=8'}
 
+  strip-ansi@7.1.2:
+    resolution: {integrity: sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==}
+    engines: {node: '>=12'}
+
   strip-final-newline@3.0.0:
     resolution: {integrity: sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==}
     engines: {node: '>=12'}
@@ -4138,6 +4231,10 @@ packages:
     engines: {node: '>=14.0.0'}
     hasBin: true
 
+  test-exclude@7.0.1:
+    resolution: {integrity: sha512-pFYqmTw68LXVjeWJMST4+borgQP2AyMNbg1BpZh9LbyhUeNkeaPF9gzfPGUAnSMV3qPYdWUwDIjjCLiSDOl7vg==}
+    engines: {node: '>=18'}
+
   text-table@0.2.0:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
 
@@ -4154,9 +4251,8 @@ packages:
   tinybench@2.9.0:
     resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
 
-  tinyexec@1.0.2:
-    resolution: {integrity: sha512-W/KYk+NFhkmsYpuHq5JykngiOCnxeVL8v8dFnqxSD8qEEdRfXk1SDM6JzNqcERbcGYj9tMrDQBYV9cjgnunFIg==}
-    engines: {node: '>=18'}
+  tinyexec@0.3.2:
+    resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
 
   tinyglobby@0.2.15:
     resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
@@ -4166,14 +4262,22 @@ packages:
     resolution: {integrity: sha512-i11VH5gS6IFeLY3gMBQ00/MmLncVP7JLXOw1vlgkytLmJK7QnEr7NXf0LBdxfmNPAeyetukOk0bOYrJrFGjYJQ==}
     engines: {node: '>=14.0.0'}
 
-  tinyrainbow@3.0.3:
-    resolution: {integrity: sha512-PSkbLUoxOFRzJYjjxHJt9xro7D+iilgMX/C9lawzVuYiIdcihh9DXmVibBe8lmcFrRi/VzlPjBxbN7rH24q8/Q==}
+  tinypool@1.1.1:
+    resolution: {integrity: sha512-Zba82s87IFq9A9XmjiX5uZA/ARWDrB03OHlq+Vw1fSdt0I+4/Kutwy8BP4Y/y/aORMo61FQ0vIb5j44vSo5Pkg==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+
+  tinyrainbow@1.2.0:
+    resolution: {integrity: sha512-weEDEq7Z5eTHPDh4xjX789+fHfF+P8boiFB+0vbWzpbnbsEr/GRaohi/uMKxg8RZMXnl1ItAi/IUHWMsjDV7kQ==}
     engines: {node: '>=14.0.0'}
 
   tinyspy@2.2.1:
     resolution: {integrity: sha512-KYad6Vy5VDWV4GH3fjpseMQ/XU2BhIYP7Vzd0LG44qRWm/Yt2WCOTicFdvmgo6gWaqooMQCawTtILVQJupKu7A==}
     engines: {node: '>=14.0.0'}
 
+  tinyspy@3.0.2:
+    resolution: {integrity: sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==}
+    engines: {node: '>=14.0.0'}
+
   tldts-core@7.0.19:
     resolution: {integrity: sha512-lJX2dEWx0SGH4O6p+7FPwYmJ/bu1JbcGJ8RLaG9b7liIgZ85itUVEPbMtWRVrde/0fnDPEPHW10ZsKW3kVsE9A==}
 
@@ -4366,6 +4470,11 @@ packages:
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
 
+  vite-node@2.1.8:
+    resolution: {integrity: sha512-uPAwSr57kYjAUux+8E2j0q0Fxpn8M9VoyfGiRI8Kfktz9NcYMCenwY5RnZxnF1WTu3TGiYipirIzacLL3VVGFg==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+
   vite-plugin-dts@4.5.4:
     resolution: {integrity: sha512-d4sOM8M/8z7vRXHHq/ebbblfaxENjogAAekcfcDCCwAyvGqnPrc7f4NZbvItS+g4WTgerW0xDwSz5qz11JT3vg==}
     peerDependencies:
@@ -4483,32 +4592,23 @@ packages:
       jsdom:
         optional: true
 
-  vitest@4.0.17:
-    resolution: {integrity: sha512-FQMeF0DJdWY0iOnbv466n/0BudNdKj1l5jYgl5JVTwjSsZSlqyXFt/9+1sEyhR6CLowbZpV7O1sCHrzBhucKKg==}
-    engines: {node: ^20.0.0 || ^22.0.0 || >=24.0.0}
+  vitest@2.1.8:
+    resolution: {integrity: sha512-1vBKTZskHw/aosXqQUlVWWlGUxSJR8YtiyZDJAFeW2kPAeX6S3Sool0mjspO+kXLuxVWlEDDowBAeqeAQefqLQ==}
+    engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
       '@edge-runtime/vm': '*'
-      '@opentelemetry/api': ^1.9.0
-      '@types/node': ^20.0.0 || ^22.0.0 || >=24.0.0
-      '@vitest/browser-playwright': 4.0.17
-      '@vitest/browser-preview': 4.0.17
-      '@vitest/browser-webdriverio': 4.0.17
-      '@vitest/ui': 4.0.17
+      '@types/node': ^18.0.0 || >=20.0.0
+      '@vitest/browser': 2.1.8
+      '@vitest/ui': 2.1.8
       happy-dom: '*'
       jsdom: '*'
     peerDependenciesMeta:
       '@edge-runtime/vm':
         optional: true
-      '@opentelemetry/api':
-        optional: true
       '@types/node':
         optional: true
-      '@vitest/browser-playwright':
-        optional: true
-      '@vitest/browser-preview':
-        optional: true
-      '@vitest/browser-webdriverio':
+      '@vitest/browser':
         optional: true
       '@vitest/ui':
         optional: true
@@ -4562,6 +4662,14 @@ packages:
     resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
     engines: {node: '>=0.10.0'}
 
+  wrap-ansi@7.0.0:
+    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
+    engines: {node: '>=10'}
+
+  wrap-ansi@8.1.0:
+    resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
+    engines: {node: '>=12'}
+
   wrappy@1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
 
@@ -4730,6 +4838,11 @@ snapshots:
 
   '@alloc/quick-lru@5.2.0': {}
 
+  '@ampproject/remapping@2.3.0':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+
   '@asamuzakjp/css-color@4.1.1':
     dependencies:
       '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
@@ -4862,7 +4975,7 @@ snapshots:
       '@babel/helper-string-parser': 7.27.1
       '@babel/helper-validator-identifier': 7.28.5
 
-  '@bcoe/v8-coverage@1.0.2': {}
+  '@bcoe/v8-coverage@0.2.3': {}
 
   '@csstools/color-helpers@5.1.0': {}
 
@@ -5181,6 +5294,17 @@ snapshots:
     dependencies:
       '@isaacs/balanced-match': 4.0.1
 
+  '@isaacs/cliui@8.0.2':
+    dependencies:
+      string-width: 5.1.2
+      string-width-cjs: string-width@4.2.3
+      strip-ansi: 7.1.2
+      strip-ansi-cjs: strip-ansi@6.0.1
+      wrap-ansi: 8.1.0
+      wrap-ansi-cjs: wrap-ansi@7.0.0
+
+  '@istanbuljs/schema@0.1.3': {}
+
   '@jest/schemas@29.6.3':
     dependencies:
       '@sinclair/typebox': 0.27.8
@@ -5252,6 +5376,9 @@ snapshots:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.20.1
 
+  '@pkgjs/parseargs@0.11.0':
+    optional: true
+
   '@polka/url@1.0.0-next.29': {}
 
   '@radix-ui/number@1.1.1': {}
@@ -6190,11 +6317,6 @@ snapshots:
     dependencies:
       '@babel/types': 7.28.6
 
-  '@types/chai@5.2.3':
-    dependencies:
-      '@types/deep-eql': 4.0.2
-      assertion-error: 2.0.1
-
   '@types/d3-array@3.2.2': {}
 
   '@types/d3-color@3.1.3': {}
@@ -6223,8 +6345,6 @@ snapshots:
     dependencies:
       '@types/ms': 2.1.0
 
-  '@types/deep-eql@4.0.2': {}
-
   '@types/estree-jsx@1.0.5':
     dependencies:
       '@types/estree': 1.0.8
@@ -6407,19 +6527,23 @@ snapshots:
       vite: 5.4.21(@types/node@24.10.8)
       vue: 3.5.26(typescript@5.9.3)
 
-  '@vitest/coverage-v8@4.0.17(vitest@4.0.17)':
+  '@vitest/coverage-v8@2.1.8(vitest@2.1.8)':
     dependencies:
-      '@bcoe/v8-coverage': 1.0.2
-      '@vitest/utils': 4.0.17
-      ast-v8-to-istanbul: 0.3.10
+      '@ampproject/remapping': 2.3.0
+      '@bcoe/v8-coverage': 0.2.3
+      debug: 4.4.3
       istanbul-lib-coverage: 3.2.2
       istanbul-lib-report: 3.0.1
+      istanbul-lib-source-maps: 5.0.6
       istanbul-reports: 3.2.0
-      magicast: 0.5.1
-      obug: 2.1.1
+      magic-string: 0.30.21
+      magicast: 0.3.5
       std-env: 3.10.0
-      tinyrainbow: 3.0.3
-      vitest: 4.0.17(@types/node@24.10.8)(@vitest/ui@4.0.17)(happy-dom@20.1.0)(jiti@1.21.7)(jsdom@27.4.0)
+      test-exclude: 7.0.1
+      tinyrainbow: 1.2.0
+      vitest: 2.1.8(@types/node@24.10.8)(@vitest/ui@2.1.8)(happy-dom@20.1.0)(jsdom@27.4.0)
+    transitivePeerDependencies:
+      - supports-color
 
   '@vitest/expect@1.6.1':
     dependencies:
@@ -6427,26 +6551,28 @@ snapshots:
       '@vitest/utils': 1.6.1
       chai: 4.5.0
 
-  '@vitest/expect@4.0.17':
+  '@vitest/expect@2.1.8':
     dependencies:
-      '@standard-schema/spec': 1.1.0
-      '@types/chai': 5.2.3
-      '@vitest/spy': 4.0.17
-      '@vitest/utils': 4.0.17
-      chai: 6.2.2
-      tinyrainbow: 3.0.3
+      '@vitest/spy': 2.1.8
+      '@vitest/utils': 2.1.8
+      chai: 5.3.3
+      tinyrainbow: 1.2.0
 
-  '@vitest/mocker@4.0.17(vite@7.3.1(@types/node@24.10.8)(jiti@1.21.7))':
+  '@vitest/mocker@2.1.8(vite@5.4.21(@types/node@24.10.8))':
     dependencies:
-      '@vitest/spy': 4.0.17
+      '@vitest/spy': 2.1.8
       estree-walker: 3.0.3
       magic-string: 0.30.21
     optionalDependencies:
-      vite: 7.3.1(@types/node@24.10.8)(jiti@1.21.7)
+      vite: 5.4.21(@types/node@24.10.8)
+
+  '@vitest/pretty-format@2.1.8':
+    dependencies:
+      tinyrainbow: 1.2.0
 
-  '@vitest/pretty-format@4.0.17':
+  '@vitest/pretty-format@2.1.9':
     dependencies:
-      tinyrainbow: 3.0.3
+      tinyrainbow: 1.2.0
 
   '@vitest/runner@1.6.1':
     dependencies:
@@ -6454,10 +6580,10 @@ snapshots:
       p-limit: 5.0.0
       pathe: 1.1.2
 
-  '@vitest/runner@4.0.17':
+  '@vitest/runner@2.1.8':
     dependencies:
-      '@vitest/utils': 4.0.17
-      pathe: 2.0.3
+      '@vitest/utils': 2.1.8
+      pathe: 1.1.2
 
   '@vitest/snapshot@1.6.1':
     dependencies:
@@ -6465,28 +6591,30 @@ snapshots:
       pathe: 1.1.2
       pretty-format: 29.7.0
 
-  '@vitest/snapshot@4.0.17':
+  '@vitest/snapshot@2.1.8':
     dependencies:
-      '@vitest/pretty-format': 4.0.17
+      '@vitest/pretty-format': 2.1.8
       magic-string: 0.30.21
-      pathe: 2.0.3
+      pathe: 1.1.2
 
   '@vitest/spy@1.6.1':
     dependencies:
       tinyspy: 2.2.1
 
-  '@vitest/spy@4.0.17': {}
+  '@vitest/spy@2.1.8':
+    dependencies:
+      tinyspy: 3.0.2
 
-  '@vitest/ui@4.0.17(vitest@4.0.17)':
+  '@vitest/ui@2.1.8(vitest@2.1.8)':
     dependencies:
-      '@vitest/utils': 4.0.17
+      '@vitest/utils': 2.1.8
       fflate: 0.8.2
       flatted: 3.3.3
-      pathe: 2.0.3
+      pathe: 1.1.2
       sirv: 3.0.2
       tinyglobby: 0.2.15
-      tinyrainbow: 3.0.3
-      vitest: 4.0.17(@types/node@24.10.8)(@vitest/ui@4.0.17)(happy-dom@20.1.0)(jiti@1.21.7)(jsdom@27.4.0)
+      tinyrainbow: 1.2.0
+      vitest: 2.1.8(@types/node@24.10.8)(@vitest/ui@2.1.8)(happy-dom@20.1.0)(jsdom@27.4.0)
 
   '@vitest/utils@1.6.1':
     dependencies:
@@ -6495,10 +6623,11 @@ snapshots:
       loupe: 2.3.7
       pretty-format: 29.7.0
 
-  '@vitest/utils@4.0.17':
+  '@vitest/utils@2.1.8':
     dependencies:
-      '@vitest/pretty-format': 4.0.17
-      tinyrainbow: 3.0.3
+      '@vitest/pretty-format': 2.1.8
+      loupe: 3.2.1
+      tinyrainbow: 1.2.0
 
   '@volar/language-core@2.4.27':
     dependencies:
@@ -6691,12 +6820,16 @@ snapshots:
 
   ansi-regex@5.0.1: {}
 
+  ansi-regex@6.2.2: {}
+
   ansi-styles@4.3.0:
     dependencies:
       color-convert: 2.0.1
 
   ansi-styles@5.2.0: {}
 
+  ansi-styles@6.2.3: {}
+
   any-promise@1.3.0: {}
 
   anymatch@3.1.3:
@@ -6726,12 +6859,6 @@ snapshots:
 
   assertion-error@2.0.1: {}
 
-  ast-v8-to-istanbul@0.3.10:
-    dependencies:
-      '@jridgewell/trace-mapping': 0.3.31
-      estree-walker: 3.0.3
-      js-tokens: 9.0.1
-
   autoprefixer@10.4.23(postcss@8.5.6):
     dependencies:
       browserslist: 4.28.1
@@ -6796,7 +6923,13 @@ snapshots:
       pathval: 1.1.1
       type-detect: 4.1.0
 
-  chai@6.2.2: {}
+  chai@5.3.3:
+    dependencies:
+      assertion-error: 2.0.1
+      check-error: 2.1.3
+      deep-eql: 5.0.2
+      loupe: 3.2.1
+      pathval: 2.0.1
 
   chalk@4.1.2:
     dependencies:
@@ -6815,6 +6948,8 @@ snapshots:
     dependencies:
       get-func-name: 2.0.2
 
+  check-error@2.1.3: {}
+
   chokidar@3.6.0:
     dependencies:
       anymatch: 3.1.3
@@ -6869,6 +7004,8 @@ snapshots:
     dependencies:
       is-what: 5.5.0
 
+  coverage-v8@0.0.1-security: {}
+
   cross-spawn@7.0.6:
     dependencies:
       path-key: 3.1.1
@@ -6958,6 +7095,8 @@ snapshots:
     dependencies:
       type-detect: 4.1.0
 
+  deep-eql@5.0.2: {}
+
   deep-is@0.1.4: {}
 
   dequal@2.0.3: {}
@@ -6984,6 +7123,8 @@ snapshots:
 
   dom-accessibility-api@0.6.3: {}
 
+  eastasianwidth@0.2.0: {}
+
   electron-to-chromium@1.5.267: {}
 
   embla-carousel-react@8.6.0(react@18.3.1):
@@ -7000,6 +7141,10 @@ snapshots:
 
   emoji-regex-xs@1.0.0: {}
 
+  emoji-regex@8.0.0: {}
+
+  emoji-regex@9.2.2: {}
+
   entities@6.0.1: {}
 
   entities@7.0.0: {}
@@ -7292,6 +7437,11 @@ snapshots:
     dependencies:
       tabbable: 6.4.0
 
+  foreground-child@3.3.1:
+    dependencies:
+      cross-spawn: 7.0.6
+      signal-exit: 4.1.0
+
   fraction.js@5.3.4: {}
 
   fs-extra@11.3.3:
@@ -7323,6 +7473,15 @@ snapshots:
     dependencies:
       is-glob: 4.0.3
 
+  glob@10.5.0:
+    dependencies:
+      foreground-child: 3.3.1
+      jackspeak: 3.4.3
+      minimatch: 9.0.5
+      minipass: 7.1.2
+      package-json-from-dist: 1.0.1
+      path-scurry: 1.11.1
+
   glob@7.2.3:
     dependencies:
       fs.realpath: 1.0.0
@@ -7497,6 +7656,8 @@ snapshots:
 
   is-extglob@2.1.1: {}
 
+  is-fullwidth-code-point@3.0.0: {}
+
   is-glob@4.0.3:
     dependencies:
       is-extglob: 2.1.1
@@ -7525,11 +7686,25 @@ snapshots:
       make-dir: 4.0.0
       supports-color: 7.2.0
 
+  istanbul-lib-source-maps@5.0.6:
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.31
+      debug: 4.4.3
+      istanbul-lib-coverage: 3.2.2
+    transitivePeerDependencies:
+      - supports-color
+
   istanbul-reports@3.2.0:
     dependencies:
       html-escaper: 2.0.2
       istanbul-lib-report: 3.0.1
 
+  jackspeak@3.4.3:
+    dependencies:
+      '@isaacs/cliui': 8.0.2
+    optionalDependencies:
+      '@pkgjs/parseargs': 0.11.0
+
   jiti@1.21.7: {}
 
   jju@1.4.0: {}
@@ -7632,6 +7807,10 @@ snapshots:
     dependencies:
       get-func-name: 2.0.2
 
+  loupe@3.2.1: {}
+
+  lru-cache@10.4.3: {}
+
   lru-cache@11.2.4: {}
 
   lru-cache@5.1.1:
@@ -7656,7 +7835,7 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
 
-  magicast@0.5.1:
+  magicast@0.3.5:
     dependencies:
       '@babel/parser': 7.28.6
       '@babel/types': 7.28.6
@@ -8041,6 +8220,8 @@ snapshots:
     dependencies:
       brace-expansion: 2.0.2
 
+  minipass@7.1.2: {}
+
   minisearch@7.2.0: {}
 
   mitt@3.0.1: {}
@@ -8085,8 +8266,6 @@ snapshots:
 
   object-hash@3.0.0: {}
 
-  obug@2.1.1: {}
-
   once@1.4.0:
     dependencies:
       wrappy: 1.0.2
@@ -8122,6 +8301,8 @@ snapshots:
     dependencies:
       p-limit: 3.1.0
 
+  package-json-from-dist@1.0.1: {}
+
   parent-module@1.0.1:
     dependencies:
       callsites: 3.1.0
@@ -8152,12 +8333,19 @@ snapshots:
 
   path-parse@1.0.7: {}
 
+  path-scurry@1.11.1:
+    dependencies:
+      lru-cache: 10.4.3
+      minipass: 7.1.2
+
   pathe@1.1.2: {}
 
   pathe@2.0.3: {}
 
   pathval@1.1.1: {}
 
+  pathval@2.0.1: {}
+
   perfect-debounce@1.0.0: {}
 
   picocolors@1.1.1: {}
@@ -8540,6 +8728,18 @@ snapshots:
 
   string-argv@0.3.2: {}
 
+  string-width@4.2.3:
+    dependencies:
+      emoji-regex: 8.0.0
+      is-fullwidth-code-point: 3.0.0
+      strip-ansi: 6.0.1
+
+  string-width@5.1.2:
+    dependencies:
+      eastasianwidth: 0.2.0
+      emoji-regex: 9.2.2
+      strip-ansi: 7.1.2
+
   stringify-entities@4.0.4:
     dependencies:
       character-entities-html4: 2.1.0
@@ -8549,6 +8749,10 @@ snapshots:
     dependencies:
       ansi-regex: 5.0.1
 
+  strip-ansi@7.1.2:
+    dependencies:
+      ansi-regex: 6.2.2
+
   strip-final-newline@3.0.0: {}
 
   strip-indent@3.0.0:
@@ -8631,6 +8835,12 @@ snapshots:
       - tsx
       - yaml
 
+  test-exclude@7.0.1:
+    dependencies:
+      '@istanbuljs/schema': 0.1.3
+      glob: 10.5.0
+      minimatch: 9.0.5
+
   text-table@0.2.0: {}
 
   thenify-all@1.6.0:
@@ -8645,7 +8855,7 @@ snapshots:
 
   tinybench@2.9.0: {}
 
-  tinyexec@1.0.2: {}
+  tinyexec@0.3.2: {}
 
   tinyglobby@0.2.15:
     dependencies:
@@ -8654,10 +8864,14 @@ snapshots:
 
   tinypool@0.8.4: {}
 
-  tinyrainbow@3.0.3: {}
+  tinypool@1.1.1: {}
+
+  tinyrainbow@1.2.0: {}
 
   tinyspy@2.2.1: {}
 
+  tinyspy@3.0.2: {}
+
   tldts-core@7.0.19: {}
 
   tldts@7.0.19:
@@ -8866,6 +9080,24 @@ snapshots:
       - supports-color
       - terser
 
+  vite-node@2.1.8(@types/node@24.10.8):
+    dependencies:
+      cac: 6.7.14
+      debug: 4.4.3
+      es-module-lexer: 1.7.0
+      pathe: 1.1.2
+      vite: 5.4.21(@types/node@24.10.8)
+    transitivePeerDependencies:
+      - '@types/node'
+      - less
+      - lightningcss
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+
   vite-plugin-dts@4.5.4(@types/node@24.10.8)(rollup@4.55.1)(typescript@5.9.3)(vite@5.4.21(@types/node@24.10.8)):
     dependencies:
       '@microsoft/api-extractor': 7.55.2(@types/node@24.10.8)
@@ -8956,7 +9188,7 @@ snapshots:
       - typescript
       - universal-cookie
 
-  vitest@1.6.1(@types/node@24.10.8)(@vitest/ui@4.0.17(vitest@4.0.17))(happy-dom@20.1.0)(jsdom@27.4.0):
+  vitest@1.6.1(@types/node@24.10.8)(@vitest/ui@2.1.8(vitest@2.1.8))(happy-dom@20.1.0)(jsdom@27.4.0):
     dependencies:
       '@vitest/expect': 1.6.1
       '@vitest/runner': 1.6.1
@@ -8980,7 +9212,7 @@ snapshots:
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 24.10.8
-      '@vitest/ui': 4.0.17(vitest@4.0.17)
+      '@vitest/ui': 2.1.8(vitest@2.1.8)
       happy-dom: 20.1.0
       jsdom: 27.4.0
     transitivePeerDependencies:
@@ -8993,35 +9225,34 @@ snapshots:
       - supports-color
       - terser
 
-  vitest@4.0.17(@types/node@24.10.8)(@vitest/ui@4.0.17)(happy-dom@20.1.0)(jiti@1.21.7)(jsdom@27.4.0):
+  vitest@2.1.8(@types/node@24.10.8)(@vitest/ui@2.1.8)(happy-dom@20.1.0)(jsdom@27.4.0):
     dependencies:
-      '@vitest/expect': 4.0.17
-      '@vitest/mocker': 4.0.17(vite@7.3.1(@types/node@24.10.8)(jiti@1.21.7))
-      '@vitest/pretty-format': 4.0.17
-      '@vitest/runner': 4.0.17
-      '@vitest/snapshot': 4.0.17
-      '@vitest/spy': 4.0.17
-      '@vitest/utils': 4.0.17
-      es-module-lexer: 1.7.0
+      '@vitest/expect': 2.1.8
+      '@vitest/mocker': 2.1.8(vite@5.4.21(@types/node@24.10.8))
+      '@vitest/pretty-format': 2.1.9
+      '@vitest/runner': 2.1.8
+      '@vitest/snapshot': 2.1.8
+      '@vitest/spy': 2.1.8
+      '@vitest/utils': 2.1.8
+      chai: 5.3.3
+      debug: 4.4.3
       expect-type: 1.3.0
       magic-string: 0.30.21
-      obug: 2.1.1
-      pathe: 2.0.3
-      picomatch: 4.0.3
+      pathe: 1.1.2
       std-env: 3.10.0
       tinybench: 2.9.0
-      tinyexec: 1.0.2
-      tinyglobby: 0.2.15
-      tinyrainbow: 3.0.3
-      vite: 7.3.1(@types/node@24.10.8)(jiti@1.21.7)
+      tinyexec: 0.3.2
+      tinypool: 1.1.1
+      tinyrainbow: 1.2.0
+      vite: 5.4.21(@types/node@24.10.8)
+      vite-node: 2.1.8(@types/node@24.10.8)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 24.10.8
-      '@vitest/ui': 4.0.17(vitest@4.0.17)
+      '@vitest/ui': 2.1.8(vitest@2.1.8)
       happy-dom: 20.1.0
       jsdom: 27.4.0
     transitivePeerDependencies:
-      - jiti
       - less
       - lightningcss
       - msw
@@ -9029,9 +9260,8 @@ snapshots:
       - sass-embedded
       - stylus
       - sugarss
+      - supports-color
       - terser
-      - tsx
-      - yaml
 
   vscode-uri@3.1.0: {}
 
@@ -9071,6 +9301,18 @@ snapshots:
 
   word-wrap@1.2.5: {}
 
+  wrap-ansi@7.0.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+
+  wrap-ansi@8.1.0:
+    dependencies:
+      ansi-styles: 6.2.3
+      string-width: 5.1.2
+      strip-ansi: 7.1.2
+
   wrappy@1.0.2: {}
 
   ws@8.19.0: {}
diff --git a/vitest.config.mts b/vitest.config.mts
index 54665afa3..649f42886 100644
--- a/vitest.config.mts
+++ b/vitest.config.mts
@@ -28,6 +28,8 @@ export default defineConfig({
       '@object-ui/protocol': path.resolve(__dirname, './packages/core/src'),
       '@object-ui/engine': path.resolve(__dirname, './packages/engine/src'),
       '@object-ui/renderer': path.resolve(__dirname, './packages/renderer/src'),
+      '@object-ui/components': path.resolve(__dirname, './packages/components/src'),
+      '@': path.resolve(__dirname, './packages/components/src'),
       '@object-ui/ui': path.resolve(__dirname, './packages/ui/src'),
       '@object-ui/designer': path.resolve(__dirname, './packages/designer/src'),
     },