@object-ui/plugin-view 0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 ObjectQL
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,291 @@
+# @object-ui/plugin-view
+
+Object View plugin for Object UI - Unified component for displaying and managing ObjectQL data with automatic form and grid generation.
+
+## Features
+
+- **Automatic Views** - Generate views from ObjectQL schemas
+- **Form Generation** - Auto-generate forms from object definitions
+- **Grid Generation** - Auto-generate data grids
+- **CRUD Operations** - Built-in create, read, update, delete
+- **Field Mapping** - Automatic field type detection
+- **Validation** - Schema-based validation
+- **ObjectQL Integration** - Native ObjectStack support
+
+## Installation
+
+```bash
+pnpm add @object-ui/plugin-view
+```
+
+## Usage
+
+### Automatic Registration (Side-Effect Import)
+
+```typescript
+// In your app entry point (e.g., App.tsx or main.tsx)
+import '@object-ui/plugin-view';
+
+// Now you can use view types in your schemas
+const schema = {
+  type: 'object-view',
+  object: 'users',
+  viewMode: 'grid'
+};
+```
+
+### Manual Registration
+
+```typescript
+import { viewComponents } from '@object-ui/plugin-view';
+import { ComponentRegistry } from '@object-ui/core';
+
+// Register view components
+Object.entries(viewComponents).forEach(([type, component]) => {
+  ComponentRegistry.register(type, component);
+});
+```
+
+## Schema API
+
+### ObjectView
+
+Unified view component for ObjectQL objects:
+
+```typescript
+{
+  type: 'object-view',
+  object: string,                 // ObjectQL object name
+  viewMode?: 'grid' | 'form' | 'detail',
+  fields?: string[],              // Fields to display
+  dataSource?: DataSource,
+  onCreate?: (data) => void,
+  onUpdate?: (id, data) => void,
+  onDelete?: (id) => void,
+  className?: string
+}
+```
+
+## Examples
+
+### Grid View
+
+Display objects in a data grid:
+
+```typescript
+const schema = {
+  type: 'object-view',
+  object: 'users',
+  viewMode: 'grid',
+  fields: ['name', 'email', 'role', 'created_at'],
+  dataSource: myDataSource
+};
+```
+
+### Form View
+
+Create or edit objects with a form:
+
+```typescript
+const schema = {
+  type: 'object-view',
+  object: 'users',
+  viewMode: 'form',
+  mode: 'create',
+  fields: ['name', 'email', 'role'],
+  onSubmit: (data) => {
+    console.log('Form submitted:', data);
+  }
+};
+```
+
+### Detail View
+
+Display a single object's details:
+
+```typescript
+const schema = {
+  type: 'object-view',
+  object: 'users',
+  viewMode: 'detail',
+  recordId: '123',
+  fields: ['name', 'email', 'role', 'bio', 'created_at']
+};
+```
+
+## CRUD Operations
+
+### Create
+
+```typescript
+const schema = {
+  type: 'object-view',
+  object: 'products',
+  viewMode: 'form',
+  mode: 'create',
+  onCreate: async (data) => {
+    const newProduct = await dataSource.create('products', data);
+    console.log('Created:', newProduct);
+  }
+};
+```
+
+### Read/List
+
+```typescript
+const schema = {
+  type: 'object-view',
+  object: 'products',
+  viewMode: 'grid',
+  pagination: true,
+  searchable: true,
+  filters: {
+    category: 'electronics'
+  }
+};
+```
+
+### Update
+
+```typescript
+const schema = {
+  type: 'object-view',
+  object: 'products',
+  viewMode: 'form',
+  mode: 'edit',
+  recordId: '123',
+  onUpdate: async (id, data) => {
+    await dataSource.update('products', id, data);
+    console.log('Updated product:', id);
+  }
+};
+```
+
+### Delete
+
+```typescript
+const schema = {
+  type: 'object-view',
+  object: 'products',
+  viewMode: 'grid',
+  enableDelete: true,
+  onDelete: async (id) => {
+    await dataSource.delete('products', id);
+    console.log('Deleted product:', id);
+  }
+};
+```
+
+## Integration with ObjectQL
+
+The plugin works seamlessly with ObjectStack:
+
+```typescript
+import { createObjectStackAdapter } from '@object-ui/data-objectstack';
+
+const dataSource = createObjectStackAdapter({
+  baseUrl: 'https://api.example.com',
+  token: 'your-auth-token'
+});
+
+const schema = {
+  type: 'object-view',
+  object: 'contacts',
+  viewMode: 'grid',
+  dataSource,
+  fields: ['first_name', 'last_name', 'email', 'company'],
+  searchable: true,
+  sortable: true,
+  pagination: {
+    pageSize: 25
+  }
+};
+```
+
+## Field Configuration
+
+Customize field display and behavior:
+
+```typescript
+const schema = {
+  type: 'object-view',
+  object: 'users',
+  viewMode: 'form',
+  fieldConfig: {
+    name: {
+      label: 'Full Name',
+      required: true,
+      placeholder: 'Enter name'
+    },
+    email: {
+      label: 'Email Address',
+      type: 'email',
+      required: true,
+      validation: [
+        { type: 'email', message: 'Invalid email format' }
+      ]
+    },
+    role: {
+      label: 'User Role',
+      type: 'select',
+      options: [
+        { label: 'Admin', value: 'admin' },
+        { label: 'User', value: 'user' },
+        { label: 'Guest', value: 'guest' }
+      ]
+    }
+  }
+};
+```
+
+## Advanced Features
+
+### Nested Objects
+
+```typescript
+const schema = {
+  type: 'object-view',
+  object: 'orders',
+  viewMode: 'detail',
+  fields: ['order_number', 'customer.name', 'items', 'total'],
+  nestedFields: {
+    items: {
+      type: 'object-grid',
+      object: 'order_items',
+      fields: ['product.name', 'quantity', 'price']
+    }
+  }
+};
+```
+
+### Tabs View
+
+```typescript
+const schema = {
+  type: 'object-view',
+  object: 'users',
+  viewMode: 'tabs',
+  tabs: [
+    { label: 'Details', fields: ['name', 'email', 'bio'] },
+    { label: 'Settings', fields: ['theme', 'notifications', 'timezone'] },
+    { label: 'Activity', type: 'object-grid', object: 'user_activities' }
+  ]
+};
+```
+
+## TypeScript Support
+
+```typescript
+import type { ObjectViewSchema } from '@object-ui/plugin-view';
+
+const userView: ObjectViewSchema = {
+  type: 'object-view',
+  object: 'users',
+  viewMode: 'grid',
+  fields: ['name', 'email', 'role']
+};
+```
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './plugin-view/src/index'
+export {}

package/dist/index.js

@@ -0,0 +1,475 @@
+import ne, { useState as E, useEffect as ae, useCallback as v } from "react";
+import { ComponentRegistry as le } from "@object-ui/core";
+import { ObjectGrid as se } from "@object-ui/plugin-grid";
+import { ObjectForm as K } from "@object-ui/plugin-form";
+import { Input as ie, Button as Z, Drawer as ce, DrawerContent as ue, DrawerHeader as fe, DrawerTitle as de, DrawerDescription as me, Dialog as be, DialogContent as pe, DialogHeader as ve, DialogTitle as xe, DialogDescription as je } from "@object-ui/components";
+import { Search as we, Filter as _e, X as Re, RefreshCw as Ee, Plus as ge } from "lucide-react";
+var z = { exports: {} }, C = {};
+var ee;
+function he() {
+  if (ee) return C;
+  ee = 1;
+  var r = /* @__PURE__ */ Symbol.for("react.transitional.element"), d = /* @__PURE__ */ Symbol.for("react.fragment");
+  function R(x, c, u) {
+    var f = null;
+    if (u !== void 0 && (f = "" + u), c.key !== void 0 && (f = "" + c.key), "key" in c) {
+      u = {};
+      for (var b in c)
+        b !== "key" && (u[b] = c[b]);
+    } else u = c;
+    return c = u.ref, {
+      $$typeof: r,
+      type: x,
+      key: f,
+      ref: c !== void 0 ? c : null,
+      props: u
+    };
+  }
+  return C.Fragment = d, C.jsx = R, C.jsxs = R, C;
+}
+var A = {};
+var re;
+function Ne() {
+  return re || (re = 1, process.env.NODE_ENV !== "production" && (function() {
+    function r(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === X ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case _:
+          return "Fragment";
+        case p:
+          return "Profiler";
+        case m:
+          return "StrictMode";
+        case U:
+          return "Suspense";
+        case q:
+          return "SuspenseList";
+        case G:
+          return "Activity";
+      }
+      if (typeof e == "object")
+        switch (typeof e.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), e.$$typeof) {
+          case L:
+            return "Portal";
+          case B:
+            return e.displayName || "Context";
+          case W:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case $:
+            var t = e.render;
+            return e = e.displayName, e || (e = t.displayName || t.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case J:
+            return t = e.displayName || null, t !== null ? t : r(e.type) || "Memo";
+          case T:
+            t = e._payload, e = e._init;
+            try {
+              return r(e(t));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function d(e) {
+      return "" + e;
+    }
+    function R(e) {
+      try {
+        d(e);
+        var t = !1;
+      } catch {
+        t = !0;
+      }
+      if (t) {
+        t = console;
+        var a = t.error, l = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return a.call(
+          t,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          l
+        ), d(e);
+      }
+    }
+    function x(e) {
+      if (e === _) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === T)
+        return "<...>";
+      try {
+        var t = r(e);
+        return t ? "<" + t + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function c() {
+      var e = y.A;
+      return e === null ? null : e.getOwner();
+    }
+    function u() {
+      return Error("react-stack-top-frame");
+    }
+    function f(e) {
+      if (S.call(e, "key")) {
+        var t = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (t && t.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function b(e, t) {
+      function a() {
+        Y || (Y = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          t
+        ));
+      }
+      a.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: a,
+        configurable: !0
+      });
+    }
+    function h() {
+      var e = r(this.type);
+      return M[e] || (M[e] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), e = this.props.ref, e !== void 0 ? e : null;
+    }
+    function N(e, t, a, l, V, H) {
+      var s = a.ref;
+      return e = {
+        $$typeof: D,
+        type: e,
+        key: t,
+        props: a,
+        _owner: l
+      }, (s !== void 0 ? s : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: h
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(e, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: V
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: H
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function j(e, t, a, l, V, H) {
+      var s = t.children;
+      if (s !== void 0)
+        if (l)
+          if (I(s)) {
+            for (l = 0; l < s.length; l++)
+              P(s[l]);
+            Object.freeze && Object.freeze(s);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else P(s);
+      if (S.call(t, "key")) {
+        s = r(e);
+        var g = Object.keys(t).filter(function(oe) {
+          return oe !== "key";
+        });
+        l = 0 < g.length ? "{key: someKey, " + g.join(": ..., ") + ": ...}" : "{key: someKey}", O[s + l] || (g = 0 < g.length ? "{" + g.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          l,
+          s,
+          g,
+          s
+        ), O[s + l] = !0);
+      }
+      if (s = null, a !== void 0 && (R(a), s = "" + a), f(t) && (R(t.key), s = "" + t.key), "key" in t) {
+        a = {};
+        for (var Q in t)
+          Q !== "key" && (a[Q] = t[Q]);
+      } else a = t;
+      return s && b(
+        a,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), N(
+        e,
+        s,
+        a,
+        c(),
+        V,
+        H
+      );
+    }
+    function P(e) {
+      F(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === T && (e._payload.status === "fulfilled" ? F(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    }
+    function F(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === D;
+    }
+    var w = ne, D = /* @__PURE__ */ Symbol.for("react.transitional.element"), L = /* @__PURE__ */ Symbol.for("react.portal"), _ = /* @__PURE__ */ Symbol.for("react.fragment"), m = /* @__PURE__ */ Symbol.for("react.strict_mode"), p = /* @__PURE__ */ Symbol.for("react.profiler"), W = /* @__PURE__ */ Symbol.for("react.consumer"), B = /* @__PURE__ */ Symbol.for("react.context"), $ = /* @__PURE__ */ Symbol.for("react.forward_ref"), U = /* @__PURE__ */ Symbol.for("react.suspense"), q = /* @__PURE__ */ Symbol.for("react.suspense_list"), J = /* @__PURE__ */ Symbol.for("react.memo"), T = /* @__PURE__ */ Symbol.for("react.lazy"), G = /* @__PURE__ */ Symbol.for("react.activity"), X = /* @__PURE__ */ Symbol.for("react.client.reference"), y = w.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, S = Object.prototype.hasOwnProperty, I = Array.isArray, k = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    w = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var Y, M = {}, n = w.react_stack_bottom_frame.bind(
+      w,
+      u
+    )(), i = k(x(u)), O = {};
+    A.Fragment = _, A.jsx = function(e, t, a) {
+      var l = 1e4 > y.recentlyCreatedOwnerStacks++;
+      return j(
+        e,
+        t,
+        a,
+        !1,
+        l ? Error("react-stack-top-frame") : n,
+        l ? k(x(e)) : i
+      );
+    }, A.jsxs = function(e, t, a) {
+      var l = 1e4 > y.recentlyCreatedOwnerStacks++;
+      return j(
+        e,
+        t,
+        a,
+        !0,
+        l ? Error("react-stack-top-frame") : n,
+        l ? k(x(e)) : i
+      );
+    };
+  })()), A;
+}
+var te;
+function Te() {
+  return te || (te = 1, process.env.NODE_ENV === "production" ? z.exports = he() : z.exports = Ne()), z.exports;
+}
+var o = Te();
+const ye = ({
+  schema: r,
+  dataSource: d,
+  className: R
+}) => {
+  const [x, c] = E(null), [u, f] = E(!1), [b, h] = E("create"), [N, j] = E(null), [P, F] = E(""), [w, D] = E(!1), [L, _] = E(0);
+  ae(() => {
+    const n = async () => {
+      try {
+        const i = await d.getObjectSchema(r.objectName);
+        c(i);
+      } catch (i) {
+        console.error("Failed to fetch object schema:", i);
+      }
+    };
+    r.objectName && d && n();
+  }, [r.objectName, d]);
+  const m = r.layout || "drawer", p = r.operations || r.table?.operations || {
+    create: !0,
+    read: !0,
+    update: !0,
+    delete: !0
+  }, W = v(() => {
+    m === "page" && r.onNavigate ? r.onNavigate("new", "edit") : (h("create"), j(null), f(!0));
+  }, [m, r]), B = v((n) => {
+    if (m === "page" && r.onNavigate) {
+      const i = n._id || n.id;
+      r.onNavigate(i, "edit");
+    } else
+      h("edit"), j(n), f(!0);
+  }, [m, r]), $ = v((n) => {
+    if (m === "page" && r.onNavigate) {
+      const i = n._id || n.id;
+      r.onNavigate(i, "view");
+    } else
+      h("view"), j(n), f(!0);
+  }, [m, r]), U = v((n) => {
+    p.read !== !1 && $(n);
+  }, [p.read, $]), q = v((n) => {
+    _((i) => i + 1);
+  }, []), J = v((n) => {
+    _((i) => i + 1);
+  }, []), T = v(() => {
+    f(!1), j(null), _((n) => n + 1);
+  }, []), G = v(() => {
+    f(!1), j(null);
+  }, []), X = v(() => {
+    _((n) => n + 1);
+  }, []), y = {
+    type: "object-grid",
+    objectName: r.objectName,
+    title: r.table?.title,
+    description: r.table?.description,
+    fields: r.table?.fields,
+    columns: r.table?.columns,
+    operations: {
+      ...p,
+      create: !1
+      // Create is handled by the view's create button
+    },
+    defaultFilters: r.table?.defaultFilters,
+    defaultSort: r.table?.defaultSort,
+    pageSize: r.table?.pageSize,
+    selectable: r.table?.selectable,
+    className: r.table?.className
+  }, S = () => {
+    const n = N ? N._id || N.id : void 0;
+    return {
+      type: "object-form",
+      objectName: r.objectName,
+      mode: b,
+      recordId: n,
+      title: r.form?.title,
+      description: r.form?.description,
+      fields: r.form?.fields,
+      customFields: r.form?.customFields,
+      groups: r.form?.groups,
+      layout: r.form?.layout,
+      columns: r.form?.columns,
+      showSubmit: r.form?.showSubmit,
+      submitText: r.form?.submitText,
+      showCancel: r.form?.showCancel,
+      cancelText: r.form?.cancelText,
+      showReset: r.form?.showReset,
+      initialValues: r.form?.initialValues,
+      readOnly: r.form?.readOnly || b === "view",
+      className: r.form?.className,
+      onSuccess: T,
+      onCancel: G
+    };
+  }, I = () => {
+    if (r.form?.title) return r.form.title;
+    const n = x?.label || r.objectName;
+    switch (b) {
+      case "create":
+        return `Create ${n}`;
+      case "edit":
+        return `Edit ${n}`;
+      case "view":
+        return `View ${n}`;
+      default:
+        return n;
+    }
+  }, k = () => /* @__PURE__ */ o.jsx(ce, { open: u, onOpenChange: f, direction: "right", children: /* @__PURE__ */ o.jsxs(ue, { className: "w-full sm:max-w-2xl", children: [
+    /* @__PURE__ */ o.jsxs(fe, { children: [
+      /* @__PURE__ */ o.jsx(de, { children: I() }),
+      r.form?.description && /* @__PURE__ */ o.jsx(me, { children: r.form.description })
+    ] }),
+    /* @__PURE__ */ o.jsx("div", { className: "flex-1 overflow-y-auto px-4 pb-4", children: /* @__PURE__ */ o.jsx(
+      K,
+      {
+        schema: S(),
+        dataSource: d
+      }
+    ) })
+  ] }) }), Y = () => /* @__PURE__ */ o.jsx(be, { open: u, onOpenChange: f, children: /* @__PURE__ */ o.jsxs(pe, { className: "max-w-2xl max-h-[90vh] overflow-y-auto", children: [
+    /* @__PURE__ */ o.jsxs(ve, { children: [
+      /* @__PURE__ */ o.jsx(xe, { children: I() }),
+      r.form?.description && /* @__PURE__ */ o.jsx(je, { children: r.form.description })
+    ] }),
+    /* @__PURE__ */ o.jsx(
+      K,
+      {
+        schema: S(),
+        dataSource: d
+      }
+    )
+  ] }) }), M = () => {
+    const n = r.showSearch !== !1, i = r.showFilters !== !1, O = r.showCreate !== !1 && p.create !== !1, e = r.showRefresh !== !1;
+    return !n && !i && !O && !e ? null : /* @__PURE__ */ o.jsxs("div", { className: "flex flex-col gap-4 mb-4", children: [
+      /* @__PURE__ */ o.jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+        /* @__PURE__ */ o.jsx("div", { className: "flex-1 max-w-md", children: n && /* @__PURE__ */ o.jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ o.jsx(we, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }),
+          /* @__PURE__ */ o.jsx(
+            ie,
+            {
+              type: "search",
+              placeholder: `Search ${x?.label || r.objectName}...`,
+              value: P,
+              onChange: (t) => F(t.target.value),
+              className: "pl-9"
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ o.jsxs("div", { className: "flex items-center gap-2", children: [
+          i && /* @__PURE__ */ o.jsxs(
+            Z,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: () => D(!w),
+              children: [
+                /* @__PURE__ */ o.jsx(_e, { className: "h-4 w-4" }),
+                "Filters",
+                w && /* @__PURE__ */ o.jsx(Re, { className: "h-3 w-3 ml-1" })
+              ]
+            }
+          ),
+          e && /* @__PURE__ */ o.jsx(
+            Z,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: X,
+              children: /* @__PURE__ */ o.jsx(Ee, { className: "h-4 w-4" })
+            }
+          ),
+          O && /* @__PURE__ */ o.jsxs(
+            Z,
+            {
+              size: "sm",
+              onClick: W,
+              children: [
+                /* @__PURE__ */ o.jsx(ge, { className: "h-4 w-4" }),
+                "Create"
+              ]
+            }
+          )
+        ] })
+      ] }),
+      w && /* @__PURE__ */ o.jsx("div", { className: "p-4 border rounded-md bg-muted/50", children: /* @__PURE__ */ o.jsx("p", { className: "text-sm text-muted-foreground", children: "Filter functionality will be integrated with FilterBuilder component" }) })
+    ] });
+  };
+  return /* @__PURE__ */ o.jsxs("div", { className: R, children: [
+    (r.title || r.description) && /* @__PURE__ */ o.jsxs("div", { className: "mb-6", children: [
+      r.title && /* @__PURE__ */ o.jsx("h2", { className: "text-2xl font-bold tracking-tight", children: r.title }),
+      r.description && /* @__PURE__ */ o.jsx("p", { className: "text-muted-foreground mt-1", children: r.description })
+    ] }),
+    M(),
+    /* @__PURE__ */ o.jsx(
+      se,
+      {
+        schema: y,
+        dataSource: d,
+        onRowClick: U,
+        onEdit: p.update !== !1 ? B : void 0,
+        onDelete: p.delete !== !1 ? q : void 0,
+        onBulkDelete: p.delete !== !1 ? J : void 0
+      },
+      L
+    ),
+    m === "drawer" && k(),
+    m === "modal" && Y()
+  ] });
+}, Se = ({ schema: r }) => /* @__PURE__ */ o.jsx(ye, { schema: r, dataSource: null });
+le.register("object-view", Se);
+export {
+  ye as ObjectView
+};

package/dist/index.umd.cjs

@@ -0,0 +1,6 @@
+(function(m,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("react"),require("@object-ui/core"),require("@object-ui/plugin-grid"),require("@object-ui/plugin-form"),require("@object-ui/components"),require("lucide-react")):typeof define=="function"&&define.amd?define(["exports","react","@object-ui/core","@object-ui/plugin-grid","@object-ui/plugin-form","@object-ui/components","lucide-react"],a):(m=typeof globalThis<"u"?globalThis:m||self,a(m.ObjectUIPluginView={},m.React,m.core,m.pluginGrid,m.pluginForm,m.components,m.lucideReact))})(this,(function(m,a,ae,le,ee,u,T){"use strict";var D={exports:{}},N={};var te;function se(){if(te)return N;te=1;var t=Symbol.for("react.transitional.element"),p=Symbol.for("react.fragment");function g(w,f,d){var b=null;if(d!==void 0&&(b=""+d),f.key!==void 0&&(b=""+f.key),"key"in f){d={};for(var v in f)v!=="key"&&(d[v]=f[v])}else d=f;return f=d.ref,{$$typeof:t,type:w,key:b,ref:f!==void 0?f:null,props:d}}return N.Fragment=p,N.jsx=g,N.jsxs=g,N}var S={};var re;function ie(){return re||(re=1,process.env.NODE_ENV!=="production"&&(function(){function t(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===K?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case R:return"Fragment";case x:return"Profiler";case j:return"StrictMode";case X:return"Suspense";case H:return"SuspenseList";case Z:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case W:return"Portal";case J:return e.displayName||"Context";case G:return(e._context.displayName||"Context")+".Consumer";case M:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case Q:return r=e.displayName||null,r!==null?r:t(e.type)||"Memo";case O:r=e._payload,e=e._init;try{return t(e(r))}catch{}}return null}function p(e){return""+e}function g(e){try{p(e);var r=!1}catch{r=!0}if(r){r=console;var l=r.error,s=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return l.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",s),p(e)}}function w(e){if(e===R)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===O)return"<...>";try{var r=t(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function f(){var e=C.A;return e===null?null:e.getOwner()}function d(){return Error("react-stack-top-frame")}function b(e){if(P.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function v(e,r){function l(){B||(B=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}l.isReactWarning=!0,Object.defineProperty(e,"key",{get:l,configurable:!0})}function k(){var e=t(this.type);return L[e]||(L[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function y(e,r,l,s,U,q){var i=l.ref;return e={$$typeof:V,type:e,key:r,props:l,_owner:s},(i!==void 0?i:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:k}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:U}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:q}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function _(e,r,l,s,U,q){var i=r.children;if(i!==void 0)if(s)if(z(i)){for(s=0;s<i.length;s++)I(i[s]);Object.freeze&&Object.freeze(i)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else I(i);if(P.call(r,"key")){i=t(e);var h=Object.keys(r).filter(function(fe){return fe!=="key"});s=0<h.length?"{key: someKey, "+h.join(": ..., ")+": ...}":"{key: someKey}",F[i+s]||(h=0<h.length?"{"+h.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,s,i,h,i),F[i+s]=!0)}if(i=null,l!==void 0&&(g(l),i=""+l),b(r)&&(g(r.key),i=""+r.key),"key"in r){l={};for(var $ in r)$!=="key"&&(l[$]=r[$])}else l=r;return i&&v(l,typeof e=="function"?e.displayName||e.name||"Unknown":e),y(e,i,l,f(),U,q)}function I(e){Y(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===O&&(e._payload.status==="fulfilled"?Y(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function Y(e){return typeof e=="object"&&e!==null&&e.$$typeof===V}var E=a,V=Symbol.for("react.transitional.element"),W=Symbol.for("react.portal"),R=Symbol.for("react.fragment"),j=Symbol.for("react.strict_mode"),x=Symbol.for("react.profiler"),G=Symbol.for("react.consumer"),J=Symbol.for("react.context"),M=Symbol.for("react.forward_ref"),X=Symbol.for("react.suspense"),H=Symbol.for("react.suspense_list"),Q=Symbol.for("react.memo"),O=Symbol.for("react.lazy"),Z=Symbol.for("react.activity"),K=Symbol.for("react.client.reference"),C=E.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,P=Object.prototype.hasOwnProperty,z=Array.isArray,A=console.createTask?console.createTask:function(){return null};E={react_stack_bottom_frame:function(e){return e()}};var B,L={},n=E.react_stack_bottom_frame.bind(E,d)(),c=A(w(d)),F={};S.Fragment=R,S.jsx=function(e,r,l){var s=1e4>C.recentlyCreatedOwnerStacks++;return _(e,r,l,!1,s?Error("react-stack-top-frame"):n,s?A(w(e)):c)},S.jsxs=function(e,r,l){var s=1e4>C.recentlyCreatedOwnerStacks++;return _(e,r,l,!0,s?Error("react-stack-top-frame"):n,s?A(w(e)):c)}})()),S}var oe;function ce(){return oe||(oe=1,process.env.NODE_ENV==="production"?D.exports=se():D.exports=ie()),D.exports}var o=ce();const ne=({schema:t,dataSource:p,className:g})=>{const[w,f]=a.useState(null),[d,b]=a.useState(!1),[v,k]=a.useState("create"),[y,_]=a.useState(null),[I,Y]=a.useState(""),[E,V]=a.useState(!1),[W,R]=a.useState(0);a.useEffect(()=>{const n=async()=>{try{const c=await p.getObjectSchema(t.objectName);f(c)}catch(c){console.error("Failed to fetch object schema:",c)}};t.objectName&&p&&n()},[t.objectName,p]);const j=t.layout||"drawer",x=t.operations||t.table?.operations||{create:!0,read:!0,update:!0,delete:!0},G=a.useCallback(()=>{j==="page"&&t.onNavigate?t.onNavigate("new","edit"):(k("create"),_(null),b(!0))},[j,t]),J=a.useCallback(n=>{if(j==="page"&&t.onNavigate){const c=n._id||n.id;t.onNavigate(c,"edit")}else k("edit"),_(n),b(!0)},[j,t]),M=a.useCallback(n=>{if(j==="page"&&t.onNavigate){const c=n._id||n.id;t.onNavigate(c,"view")}else k("view"),_(n),b(!0)},[j,t]),X=a.useCallback(n=>{x.read!==!1&&M(n)},[x.read,M]),H=a.useCallback(n=>{R(c=>c+1)},[]),Q=a.useCallback(n=>{R(c=>c+1)},[]),O=a.useCallback(()=>{b(!1),_(null),R(n=>n+1)},[]),Z=a.useCallback(()=>{b(!1),_(null)},[]),K=a.useCallback(()=>{R(n=>n+1)},[]),C={type:"object-grid",objectName:t.objectName,title:t.table?.title,description:t.table?.description,fields:t.table?.fields,columns:t.table?.columns,operations:{...x,create:!1},defaultFilters:t.table?.defaultFilters,defaultSort:t.table?.defaultSort,pageSize:t.table?.pageSize,selectable:t.table?.selectable,className:t.table?.className},P=()=>{const n=y?y._id||y.id:void 0;return{type:"object-form",objectName:t.objectName,mode:v,recordId:n,title:t.form?.title,description:t.form?.description,fields:t.form?.fields,customFields:t.form?.customFields,groups:t.form?.groups,layout:t.form?.layout,columns:t.form?.columns,showSubmit:t.form?.showSubmit,submitText:t.form?.submitText,showCancel:t.form?.showCancel,cancelText:t.form?.cancelText,showReset:t.form?.showReset,initialValues:t.form?.initialValues,readOnly:t.form?.readOnly||v==="view",className:t.form?.className,onSuccess:O,onCancel:Z}},z=()=>{if(t.form?.title)return t.form.title;const n=w?.label||t.objectName;switch(v){case"create":return`Create ${n}`;case"edit":return`Edit ${n}`;case"view":return`View ${n}`;default:return n}},A=()=>o.jsx(u.Drawer,{open:d,onOpenChange:b,direction:"right",children:o.jsxs(u.DrawerContent,{className:"w-full sm:max-w-2xl",children:[o.jsxs(u.DrawerHeader,{children:[o.jsx(u.DrawerTitle,{children:z()}),t.form?.description&&o.jsx(u.DrawerDescription,{children:t.form.description})]}),o.jsx("div",{className:"flex-1 overflow-y-auto px-4 pb-4",children:o.jsx(ee.ObjectForm,{schema:P(),dataSource:p})})]})}),B=()=>o.jsx(u.Dialog,{open:d,onOpenChange:b,children:o.jsxs(u.DialogContent,{className:"max-w-2xl max-h-[90vh] overflow-y-auto",children:[o.jsxs(u.DialogHeader,{children:[o.jsx(u.DialogTitle,{children:z()}),t.form?.description&&o.jsx(u.DialogDescription,{children:t.form.description})]}),o.jsx(ee.ObjectForm,{schema:P(),dataSource:p})]})}),L=()=>{const n=t.showSearch!==!1,c=t.showFilters!==!1,F=t.showCreate!==!1&&x.create!==!1,e=t.showRefresh!==!1;return!n&&!c&&!F&&!e?null:o.jsxs("div",{className:"flex flex-col gap-4 mb-4",children:[o.jsxs("div",{className:"flex items-center justify-between gap-4",children:[o.jsx("div",{className:"flex-1 max-w-md",children:n&&o.jsxs("div",{className:"relative",children:[o.jsx(T.Search,{className:"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground"}),o.jsx(u.Input,{type:"search",placeholder:`Search ${w?.label||t.objectName}...`,value:I,onChange:r=>Y(r.target.value),className:"pl-9"})]})}),o.jsxs("div",{className:"flex items-center gap-2",children:[c&&o.jsxs(u.Button,{variant:"outline",size:"sm",onClick:()=>V(!E),children:[o.jsx(T.Filter,{className:"h-4 w-4"}),"Filters",E&&o.jsx(T.X,{className:"h-3 w-3 ml-1"})]}),e&&o.jsx(u.Button,{variant:"outline",size:"sm",onClick:K,children:o.jsx(T.RefreshCw,{className:"h-4 w-4"})}),F&&o.jsxs(u.Button,{size:"sm",onClick:G,children:[o.jsx(T.Plus,{className:"h-4 w-4"}),"Create"]})]})]}),E&&o.jsx("div",{className:"p-4 border rounded-md bg-muted/50",children:o.jsx("p",{className:"text-sm text-muted-foreground",children:"Filter functionality will be integrated with FilterBuilder component"})})]})};return o.jsxs("div",{className:g,children:[(t.title||t.description)&&o.jsxs("div",{className:"mb-6",children:[t.title&&o.jsx("h2",{className:"text-2xl font-bold tracking-tight",children:t.title}),t.description&&o.jsx("p",{className:"text-muted-foreground mt-1",children:t.description})]}),L(),o.jsx(le.ObjectGrid,{schema:C,dataSource:p,onRowClick:X,onEdit:x.update!==!1?J:void 0,onDelete:x.delete!==!1?H:void 0,onBulkDelete:x.delete!==!1?Q:void 0},W),j==="drawer"&&A(),j==="modal"&&B()]})},ue=({schema:t})=>o.jsx(ne,{schema:t,dataSource:null});ae.ComponentRegistry.register("object-view",ue),m.ObjectView=ne,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})}));

package/dist/plugin-view/src/ObjectView.d.ts

@@ -0,0 +1,36 @@
+import { default as React } from 'react';
+import { ObjectViewSchema, DataSource } from '../../types/src';
+export interface ObjectViewProps {
+    /**
+     * The schema configuration for the view
+     */
+    schema: ObjectViewSchema;
+    /**
+     * Data source (ObjectQL or ObjectStack adapter)
+     */
+    dataSource: DataSource;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+}
+/**
+ * ObjectView Component
+ *
+ * Renders a complete object management interface with table and forms.
+ *
+ * @example
+ * ```tsx
+ * <ObjectView
+ *   schema={{
+ *     type: 'object-view',
+ *     objectName: 'users',
+ *     layout: 'drawer',
+ *     showSearch: true,
+ *     showFilters: true
+ *   }}
+ *   dataSource={dataSource}
+ * />
+ * ```
+ */
+export declare const ObjectView: React.FC<ObjectViewProps>;

package/dist/plugin-view/src/index.d.ts

@@ -0,0 +1,3 @@
+import { ObjectView } from './ObjectView';
+export { ObjectView };
+export type { ObjectViewProps } from './ObjectView';

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@object-ui/plugin-view",
+  "version": "0.3.0",
+  "type": "module",
+  "license": "MIT",
+  "description": "Object View plugin for Object UI",
+  "main": "dist/index.umd.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs"
+    }
+  },
+  "dependencies": {
+    "lucide-react": "^0.563.0",
+    "@object-ui/components": "0.3.0",
+    "@object-ui/plugin-form": "0.3.0",
+    "@object-ui/core": "0.3.0",
+    "@object-ui/plugin-grid": "0.3.0",
+    "@object-ui/react": "0.3.0",
+    "@object-ui/types": "0.3.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.2.1",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest run",
+    "lint": "eslint ."
+  }
+}

package/src/ObjectView.tsx

@@ -0,0 +1,409 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * ObjectView Component
+ * 
+ * A complete object management interface that combines ObjectGrid and ObjectForm.
+ * Provides list view with integrated search, filters, and create/edit operations.
+ */
+
+import React, { useEffect, useState, useCallback } from 'react';
+import type { ObjectViewSchema, ObjectGridSchema, ObjectFormSchema, DataSource } from '@object-ui/types';
+import { ObjectGrid } from '@object-ui/plugin-grid';
+import { ObjectForm } from '@object-ui/plugin-form';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerDescription,
+  Button,
+  Input,
+} from '@object-ui/components';
+import { Plus, Search, RefreshCw, Filter, X } from 'lucide-react';
+
+export interface ObjectViewProps {
+  /**
+   * The schema configuration for the view
+   */
+  schema: ObjectViewSchema;
+  
+  /**
+   * Data source (ObjectQL or ObjectStack adapter)
+   */
+  dataSource: DataSource;
+  
+  /**
+   * Additional CSS class
+   */
+  className?: string;
+}
+
+type FormMode = 'create' | 'edit' | 'view';
+
+/**
+ * ObjectView Component
+ * 
+ * Renders a complete object management interface with table and forms.
+ * 
+ * @example
+ * ```tsx
+ * <ObjectView
+ *   schema={{
+ *     type: 'object-view',
+ *     objectName: 'users',
+ *     layout: 'drawer',
+ *     showSearch: true,
+ *     showFilters: true
+ *   }}
+ *   dataSource={dataSource}
+ * />
+ * ```
+ */
+export const ObjectView: React.FC<ObjectViewProps> = ({
+  schema,
+  dataSource,
+  className,
+}) => {
+  const [objectSchema, setObjectSchema] = useState<Record<string, unknown> | null>(null);
+  const [isFormOpen, setIsFormOpen] = useState(false);
+  const [formMode, setFormMode] = useState<FormMode>('create');
+  const [selectedRecord, setSelectedRecord] = useState<Record<string, unknown> | null>(null);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [showFilters, setShowFilters] = useState(false);
+  const [refreshKey, setRefreshKey] = useState(0);
+
+  // Fetch object schema from ObjectQL/ObjectStack
+  useEffect(() => {
+    const fetchObjectSchema = async () => {
+      try {
+        const schemaData = await dataSource.getObjectSchema(schema.objectName);
+        setObjectSchema(schemaData);
+      } catch (err) {
+        console.error('Failed to fetch object schema:', err);
+      }
+    };
+
+    if (schema.objectName && dataSource) {
+      fetchObjectSchema();
+    }
+  }, [schema.objectName, dataSource]);
+
+  // Determine layout mode
+  const layout = schema.layout || 'drawer';
+  
+  // Determine enabled operations
+  const operations = schema.operations || schema.table?.operations || {
+    create: true,
+    read: true,
+    update: true,
+    delete: true,
+  };
+
+  // Handle create action
+  const handleCreate = useCallback(() => {
+    if (layout === 'page' && schema.onNavigate) {
+      schema.onNavigate('new', 'edit');
+    } else {
+      setFormMode('create');
+      setSelectedRecord(null);
+      setIsFormOpen(true);
+    }
+  }, [layout, schema]);
+
+  // Handle edit action
+  const handleEdit = useCallback((record: Record<string, unknown>) => {
+    if (layout === 'page' && schema.onNavigate) {
+      const recordId = record._id || record.id;
+      schema.onNavigate(recordId as string | number, 'edit');
+    } else {
+      setFormMode('edit');
+      setSelectedRecord(record);
+      setIsFormOpen(true);
+    }
+  }, [layout, schema]);
+
+  // Handle view action
+  const handleView = useCallback((record: Record<string, unknown>) => {
+    if (layout === 'page' && schema.onNavigate) {
+      const recordId = record._id || record.id;
+      schema.onNavigate(recordId as string | number, 'view');
+    } else {
+      setFormMode('view');
+      setSelectedRecord(record);
+      setIsFormOpen(true);
+    }
+  }, [layout, schema]);
+
+  // Handle row click
+  const handleRowClick = useCallback((record: Record<string, unknown>) => {
+    if (operations.read !== false) {
+      handleView(record);
+    }
+  }, [operations.read, handleView]);
+
+  // Handle delete action
+  const handleDelete = useCallback((_record: Record<string, unknown>) => {
+    // Trigger table refresh after delete
+    setRefreshKey(prev => prev + 1);
+  }, []);
+
+  // Handle bulk delete action
+  const handleBulkDelete = useCallback((_records: Record<string, unknown>[]) => {
+    // Trigger table refresh after bulk delete
+    setRefreshKey(prev => prev + 1);
+  }, []);
+
+  // Handle form submission
+  const handleFormSuccess = useCallback(() => {
+    // Close the form
+    setIsFormOpen(false);
+    setSelectedRecord(null);
+    
+    // Trigger table refresh
+    setRefreshKey(prev => prev + 1);
+  }, []);
+
+  // Handle form cancellation
+  const handleFormCancel = useCallback(() => {
+    setIsFormOpen(false);
+    setSelectedRecord(null);
+  }, []);
+
+  // Handle refresh
+  const handleRefresh = useCallback(() => {
+    setRefreshKey(prev => prev + 1);
+  }, []);
+
+  // Build grid schema
+  const gridSchema: ObjectGridSchema = {
+    type: 'object-grid',
+    objectName: schema.objectName,
+    title: schema.table?.title,
+    description: schema.table?.description,
+    fields: schema.table?.fields,
+    columns: schema.table?.columns,
+    operations: {
+      ...operations,
+      create: false, // Create is handled by the view's create button
+    },
+    defaultFilters: schema.table?.defaultFilters,
+    defaultSort: schema.table?.defaultSort,
+    pageSize: schema.table?.pageSize,
+    selectable: schema.table?.selectable,
+    className: schema.table?.className,
+  };
+
+  // Build form schema
+  const buildFormSchema = (): ObjectFormSchema => {
+    const recordId = selectedRecord ? (selectedRecord._id || selectedRecord.id) as string | number | undefined : undefined;
+    
+    return {
+      type: 'object-form',
+      objectName: schema.objectName,
+      mode: formMode,
+      recordId,
+      title: schema.form?.title,
+      description: schema.form?.description,
+      fields: schema.form?.fields,
+      customFields: schema.form?.customFields,
+      groups: schema.form?.groups,
+      layout: schema.form?.layout,
+      columns: schema.form?.columns,
+      showSubmit: schema.form?.showSubmit,
+      submitText: schema.form?.submitText,
+      showCancel: schema.form?.showCancel,
+      cancelText: schema.form?.cancelText,
+      showReset: schema.form?.showReset,
+      initialValues: schema.form?.initialValues,
+      readOnly: schema.form?.readOnly || formMode === 'view',
+      className: schema.form?.className,
+      onSuccess: handleFormSuccess,
+      onCancel: handleFormCancel,
+    };
+  };
+
+  // Get form title based on mode
+  const getFormTitle = (): string => {
+    if (schema.form?.title) return schema.form.title;
+    
+    const objectLabel = (objectSchema?.label as string) || schema.objectName;
+    
+    switch (formMode) {
+      case 'create':
+        return `Create ${objectLabel}`;
+      case 'edit':
+        return `Edit ${objectLabel}`;
+      case 'view':
+        return `View ${objectLabel}`;
+      default:
+        return objectLabel;
+    }
+  };
+
+  // Render the form in a drawer
+  const renderDrawerForm = () => (
+    <Drawer open={isFormOpen} onOpenChange={setIsFormOpen} direction="right">
+      <DrawerContent className="w-full sm:max-w-2xl">
+        <DrawerHeader>
+          <DrawerTitle>{getFormTitle()}</DrawerTitle>
+          {schema.form?.description && (
+            <DrawerDescription>{schema.form.description}</DrawerDescription>
+          )}
+        </DrawerHeader>
+        <div className="flex-1 overflow-y-auto px-4 pb-4">
+          <ObjectForm
+            schema={buildFormSchema()}
+            dataSource={dataSource}
+          />
+        </div>
+      </DrawerContent>
+    </Drawer>
+  );
+
+  // Render the form in a modal
+  const renderModalForm = () => (
+    <Dialog open={isFormOpen} onOpenChange={setIsFormOpen}>
+      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>{getFormTitle()}</DialogTitle>
+          {schema.form?.description && (
+            <DialogDescription>{schema.form.description}</DialogDescription>
+          )}
+        </DialogHeader>
+        <ObjectForm
+          schema={buildFormSchema()}
+          dataSource={dataSource}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+
+  // Render toolbar
+  const renderToolbar = () => {
+    const showSearchBox = schema.showSearch !== false;
+    const showFiltersButton = schema.showFilters !== false;
+    const showCreateButton = schema.showCreate !== false && operations.create !== false;
+    const showRefreshButton = schema.showRefresh !== false;
+    
+    // Don't render toolbar if no elements are shown
+    if (!showSearchBox && !showFiltersButton && !showCreateButton && !showRefreshButton) {
+      return null;
+    }
+
+    return (
+      <div className="flex flex-col gap-4 mb-4">
+        {/* Main toolbar row */}
+        <div className="flex items-center justify-between gap-4">
+          {/* Left side: Search */}
+          <div className="flex-1 max-w-md">
+            {showSearchBox && (
+              <div className="relative">
+                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                <Input
+                  type="search"
+                  placeholder={`Search ${objectSchema?.label || schema.objectName}...`}
+                  value={searchQuery}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchQuery(e.target.value)}
+                  className="pl-9"
+                />
+              </div>
+            )}
+          </div>
+          
+          {/* Right side: Actions */}
+          <div className="flex items-center gap-2">
+            {showFiltersButton && (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setShowFilters(!showFilters)}
+              >
+                <Filter className="h-4 w-4" />
+                Filters
+                {showFilters && (
+                  <X className="h-3 w-3 ml-1" />
+                )}
+              </Button>
+            )}
+            
+            {showRefreshButton && (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleRefresh}
+              >
+                <RefreshCw className="h-4 w-4" />
+              </Button>
+            )}
+            
+            {showCreateButton && (
+              <Button
+                size="sm"
+                onClick={handleCreate}
+              >
+                <Plus className="h-4 w-4" />
+                Create
+              </Button>
+            )}
+          </div>
+        </div>
+        
+        {/* Filter panel (shown when filters are active) */}
+        {showFilters && (
+          <div className="p-4 border rounded-md bg-muted/50">
+            <p className="text-sm text-muted-foreground">
+              Filter functionality will be integrated with FilterBuilder component
+            </p>
+            {/* TODO: Integrate FilterBuilder component here */}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <div className={className}>
+      {/* Title and description */}
+      {(schema.title || schema.description) && (
+        <div className="mb-6">
+          {schema.title && (
+            <h2 className="text-2xl font-bold tracking-tight">{schema.title}</h2>
+          )}
+          {schema.description && (
+            <p className="text-muted-foreground mt-1">{schema.description}</p>
+          )}
+        </div>
+      )}
+      
+      {/* Toolbar */}
+      {renderToolbar()}
+      
+      {/* Grid */}
+      <ObjectGrid
+        key={refreshKey}
+        schema={gridSchema}
+        dataSource={dataSource}
+        onRowClick={handleRowClick}
+        onEdit={operations.update !== false ? handleEdit : undefined}
+        onDelete={operations.delete !== false ? handleDelete : undefined}
+        onBulkDelete={operations.delete !== false ? handleBulkDelete : undefined}
+      />
+      
+      {/* Form (drawer or modal) */}
+      {layout === 'drawer' && renderDrawerForm()}
+      {layout === 'modal' && renderModalForm()}
+    </div>
+  );
+};

package/src/index.tsx

@@ -0,0 +1,21 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import { ComponentRegistry } from '@object-ui/core';
+import { ObjectView } from './ObjectView';
+
+export { ObjectView };
+export type { ObjectViewProps } from './ObjectView';
+
+// Register object-view component
+const ObjectViewRenderer: React.FC<{ schema: any }> = ({ schema }) => {
+  return <ObjectView schema={schema} dataSource={null as any} />;
+};
+
+ComponentRegistry.register('object-view', ObjectViewRenderer);

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "jsx": "react-jsx"
+  },
+  "include": ["src"]
+}

package/vite.config.ts

@@ -0,0 +1,40 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+import { resolve } from 'path';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    dts({
+      insertTypesEntry: true,
+      include: ['src'],
+    }),
+  ],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.tsx'),
+      name: 'ObjectUIPluginView',
+      fileName: 'index',
+    },
+    rollupOptions: {
+      external: [
+        'react',
+        'react-dom',
+        '@object-ui/components',
+        '@object-ui/core',
+        '@object-ui/plugin-form',
+        '@object-ui/plugin-grid',
+        '@object-ui/react',
+        '@object-ui/types',
+        'lucide-react'
+      ],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+        },
+      },
+    },
+  },
+});