feat(ui): add new visualization components and widgets

- Introduced ObjectKanbanView and ObjectTimelineView as new view components.
- Implemented ObjectView to dynamically render views based on objectName and viewName.
- Added ChartAreaInteractive for interactive area chart visualization with responsive design.
- Created ChartBarInteractive and ChartDonut as placeholders for bar and donut chart visualizations.
- Developed WidgetChart, WidgetHtml, WidgetMetric, and WidgetView for displaying various types of data in card format.
- Enhanced overall UI structure with new components and improved layout.

Author: hotlong

docs/guide/ui-framework.md

@@ -91,14 +91,21 @@ These "Smart Components" implement the specific logic for each View Type defined
 ### `ObjectGridView`
 **Implements:** `type: list`, `type: grid`
 
-A high-density data table based on **TanStack Table**.
+A high-density, interactive data table based on **AG Grid**.
 
 - **Features**:
-  - **Inline Editing**: Double-click to edit (if `type: grid`).
-  - **Columns**: Resizable, sortable, toggleable.
-  - **Selection**: Checkbox row selection for Bulk Actions.
-  - **Pagination**: Infinite scroll or paged navigation.
-- **Config Support**: `columns`, `sort`, `filters`, `row_actions`, `bulk_actions`.
+  - **Advanced Layout**: Supports Tabs for switching Views (e.g., "Outline", "Summary").
+  - **Row Drag & Drop**: Manual reordering of records.
+  - **Selection**: Checkbox selection with "Select All" and Indeterminate states.
+  - **Cell Rendering**:
+    - **Status**: Visual badges with icons.
+    - **User/Reviewer**: User avatars or dropdown assignment.
+    - **Progress**: visual progress bars or drag handles.
+  - **Columns**:
+    - **Visibility Control**: Users can toggle columns via dropdown.
+    - **Resizing & Sorting**: Built-in AG Grid capabilities.
+  - **Pagination**: Custom footer with "Rows per page" and navigation controls.
+- **Config Support**: `columns`, `sort`, `filters`, `row_actions`, `bulk_actions`, `tabs`.
 
 ### `ObjectKanbanView`
 **Implements:** `type: kanban`

packages/ui/src/components/layouts/DashboardLayout.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+// import { Responsive, WidthProvider } from 'react-grid-layout';
+
+// const ResponsiveGridLayout = WidthProvider(Responsive);
+
+export interface DashboardLayoutProps {
+  // TODO: Define props based on page spec
+  components: any[];
+}
+
+export const DashboardLayout: React.FC<DashboardLayoutProps> = ({ components }) => {
+  return (
+    <div className="grid grid-cols-12 gap-4">
+      {/* TODO: Implement React Grid Layout or CSS Grid */}
+      <div className="col-span-12 p-4 border border-dashed rounded bg-muted/50">
+        Dashboard Layout Placeholder
+      </div>
+    </div>
+  );
+};

packages/ui/src/components/layouts/ObjectPage.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+export interface ObjectPageProps {
+  pageId: string;
+  context?: Record<string, any>;
+}
+
+export const ObjectPage: React.FC<ObjectPageProps> = ({ pageId, context }) => {
+  // TODO: Load page definition from Metadata Kernel
+  // TODO: Resolve permissions
+  // TODO: Inject PageContext
+  
+  return (
+    <div className="w-full h-full">
+      {/* Placeholder for Layout Renderer */}
+      <div className="p-4">
+        <h1 className="text-2xl font-bold">Page: {pageId}</h1>
+        {/* Render Layout based on page config */}
+      </div>
+    </div>
+  );
+};

packages/ui/src/components/layouts/SingleColumnLayout.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+export interface SingleColumnLayoutProps {
+  // TODO: Define props
+  components: any[];
+}
+
+export const SingleColumnLayout: React.FC<SingleColumnLayoutProps> = ({ components }) => {
+  return (
+    <div className="max-w-4xl mx-auto space-y-4">
+      <div className="p-4 border border-dashed rounded bg-muted/50">
+        Single Column Layout Placeholder
+      </div>
+    </div>
+  );
+};

packages/ui/src/components/shell/FilterBuilder.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Button } from '@/components/ui/button';
+
+export const FilterBuilder = () => {
+  return (
+    <div className="p-4 border rounded bg-background">
+       <div className="flex flex-col gap-2">
+         <div>Filter Builder Placeholder</div>
+         <Button size="sm" variant="secondary">Add Filter</Button>
+       </div>
+    </div>
+  );
+};

packages/ui/src/components/shell/ViewToolbar.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Button } from '@/components/ui/button';
+
+export interface ViewToolbarProps {
+  title: string;
+  actions?: any[];
+  viewSwitcherOptions?: any[];
+}
+
+export const ViewToolbar: React.FC<ViewToolbarProps> = ({ title }) => {
+  return (
+    <div className="flex items-center justify-between p-4 border-b">
+      <h2 className="text-lg font-semibold">{title}</h2>
+      <div className="flex gap-2">
+         {/* Breadcrumbs, View Switcher, Actions */}
+         <Button variant="outline">Actions</Button>
+      </div>
+    </div>
+  );
+};

packages/ui/src/components/views/ObjectCalendarView.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const ObjectCalendarView = () => {
+  return (
+    <div className="p-4 border border-dashed rounded">
+      ObjectCalendarView Placeholder
+    </div>
+  );
+};

packages/ui/src/components/views/ObjectDetailView.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const ObjectDetailView = () => {
+  return (
+    <div className="p-4 border border-dashed rounded">
+      ObjectDetailView Placeholder
+    </div>
+  );
+};

packages/ui/src/components/views/ObjectFormView.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+// import { ObjectConfig } from '@objectql/types';
+import { useForm } from 'react-hook-form';
+import { Form } from '@/components/ui/form';
+
+export interface ObjectFormViewProps {
+  objectName: string;
+  recordId?: string;
+}
+
+export const ObjectFormView: React.FC<ObjectFormViewProps> = ({ objectName, recordId }) => {
+  const form = useForm();
+  
+  return (
+    <Form {...form}>
+      <form className="space-y-8">
+         <div className="p-4 border border-dashed rounded">
+           ObjectFormView Placeholder for {objectName}
+         </div>
+      </form>
+    </Form>
+  );
+};

packages/ui/src/components/views/ObjectGalleryView.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const ObjectGalleryView = () => {
+  return (
+    <div className="p-4 border border-dashed rounded">
+      ObjectGalleryView Placeholder
+    </div>
+  );
+};