@dxos/plugin-preview 0.8.4-main.2c6827d → 0.8.4-main.3c1ae3b

package/dist/lib/node-esm/{react-surface-65UVGBIZ.mjs → react-surface-ZJ4C32OR.mjs}

@@ -4,46 +4,84 @@ import {
 } from "./chunk-Q5MUNELK.mjs";
 
 // src/capabilities/react-surface.tsx
-import React7, { useCallback } from "react";
+import React8, { useCallback as useCallback2 } from "react";
 import { Capabilities, LayoutAction as LayoutAction2, contributes, createIntent as createIntent2, createSurface } from "@dxos/app-framework";
 import { Surface, SurfaceCardRole, useIntentDispatcher as useIntentDispatcher2 } from "@dxos/app-framework/react";
-import { getSchema, getSpace } from "@dxos/client/echo";
-import { Obj as Obj3 } from "@dxos/echo";
-import { setValue } from "@dxos/echo/internal";
+import { getSpace } from "@dxos/client/echo";
+import { Obj as Obj4 } from "@dxos/echo";
 import { useActiveSpace } from "@dxos/plugin-space";
-import { useTranslation as useTranslation2 } from "@dxos/react-ui";
-import { Form } from "@dxos/react-ui-form";
-import { Card as Card6 } from "@dxos/react-ui-stack";
-import { descriptionMessage, mx as mx4 } from "@dxos/react-ui-theme";
 import { Organization, Person, Project, Task as Task2 } from "@dxos/types";
 
+// src/cards/FormCard.tsx
+import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
+import React from "react";
+import { useCallback } from "react";
+import { Obj } from "@dxos/echo";
+import { setValue } from "@dxos/echo/internal";
+import { useTranslation } from "@dxos/react-ui";
+import { Form, omitId } from "@dxos/react-ui-form";
+import { Card } from "@dxos/react-ui-stack";
+import { descriptionMessage, mx } from "@dxos/react-ui-theme";
+var FormCard = ({ subject, projection, role }) => {
+  var _effect = _useSignals();
+  try {
+    const schema = Obj.getSchema(subject);
+    const { t } = useTranslation(meta.id);
+    if (!schema) {
+      return /* @__PURE__ */ React.createElement("p", {
+        className: mx(descriptionMessage)
+      }, t("unable to create preview message"));
+    }
+    const handleSave = useCallback((values, { changed }) => {
+      const paths = Object.keys(changed).filter((path) => changed[path]);
+      for (const path of paths) {
+        const value = values[path];
+        setValue(subject, path, value);
+      }
+    }, []);
+    return /* @__PURE__ */ React.createElement(Card.SurfaceRoot, {
+      id: subject.id,
+      role
+    }, /* @__PURE__ */ React.createElement(Form.Root, {
+      schema: omitId(schema),
+      projection,
+      values: subject,
+      layout: role === "card--popover" ? "static" : void 0,
+      autoSave: true,
+      onSave: handleSave
+    }, /* @__PURE__ */ React.createElement(Form.Viewport, null, /* @__PURE__ */ React.createElement(Form.Content, null, /* @__PURE__ */ React.createElement(Form.FieldSet, null)))));
+  } finally {
+    _effect.f();
+  }
+};
+
 // src/cards/OrganizationCard.tsx
-import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
-import React3 from "react";
-import { Card as Card2 } from "@dxos/react-ui-stack";
+import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
+import React4 from "react";
+import { Card as Card3 } from "@dxos/react-ui-stack";
 
 // src/components/CardComponents.tsx
-import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
-import React2 from "react";
+import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
+import React3 from "react";
 import { Button, Icon } from "@dxos/react-ui";
-import { Card, cardNoSpacing, cardSpacing } from "@dxos/react-ui-stack";
-import { mx } from "@dxos/react-ui-theme";
+import { Card as Card2, cardNoSpacing, cardSpacing } from "@dxos/react-ui-stack";
+import { mx as mx2 } from "@dxos/react-ui-theme";
 
 // src/components/CardSubjectMenu.tsx
-import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
+import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
 import { Atom } from "@effect-atom/atom-react";
-import React from "react";
+import React2 from "react";
 import { LayoutAction, createIntent } from "@dxos/app-framework";
 import { useIntentDispatcher } from "@dxos/app-framework/react";
 import { ACTION_TYPE } from "@dxos/app-graph";
-import { Obj } from "@dxos/echo";
+import { Obj as Obj2 } from "@dxos/echo";
 import { SpaceAction } from "@dxos/plugin-space/types";
-import { IconButton, useTranslation } from "@dxos/react-ui";
+import { IconButton, useTranslation as useTranslation2 } from "@dxos/react-ui";
 import { DropdownMenu, MenuProvider, useMenuActions } from "@dxos/react-ui-menu";
 var CardSubjectMenu = ({ subject, activeSpace, ...props }) => {
-  var _effect = _useSignals();
+  var _effect = _useSignals2();
   try {
-    const { t } = useTranslation(meta.id);
+    const { t } = useTranslation2(meta.id);
     const menuProps = useSubjectMenuGroupItems({
       subject,
       activeSpace
@@ -51,9 +89,9 @@ var CardSubjectMenu = ({ subject, activeSpace, ...props }) => {
     if (!activeSpace) {
       return null;
     }
-    return /* @__PURE__ */ React.createElement(MenuProvider, menuProps, /* @__PURE__ */ React.createElement(DropdownMenu.Root, null, /* @__PURE__ */ React.createElement(DropdownMenu.Trigger, {
+    return /* @__PURE__ */ React2.createElement(MenuProvider, menuProps, /* @__PURE__ */ React2.createElement(DropdownMenu.Root, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Trigger, {
       asChild: true
-    }, /* @__PURE__ */ React.createElement(IconButton, {
+    }, /* @__PURE__ */ React2.createElement(IconButton, {
       variant: "ghost",
       icon: "ph--dots-three-vertical--bold",
       iconOnly: true,
@@ -76,7 +114,7 @@ var useSubjectMenuGroupItems = ({ subject, activeSpace }) => {
     data: () => dispatch(createIntent(LayoutAction.Open, {
       part: "main",
       subject: [
-        Obj.getDXN(subject).toString()
+        Obj2.getDXN(subject).toString()
       ]
     })),
     properties: {
@@ -89,7 +127,7 @@ var useSubjectMenuGroupItems = ({ subject, activeSpace }) => {
       icon: "ph--arrow-right--regular"
     }
   });
-  if (activeSpace && Obj.getDXN(subject).asQueueDXN()) {
+  if (activeSpace && Obj2.getDXN(subject).asQueueDXN()) {
     result.nodes.push({
       type: ACTION_TYPE,
       id: `${subject.id}/add-to-space`,
@@ -122,14 +160,14 @@ var useSubjectMenuGroupItems = ({ subject, activeSpace }) => {
 // src/components/CardComponents.tsx
 var gridRow = "is-full grid grid-cols-[1.5rem_1fr_min-content] gap-2 items-center";
 var CardHeader = ({ label, subject, activeSpace }) => {
-  var _effect = _useSignals2();
+  var _effect = _useSignals3();
   try {
-    return /* @__PURE__ */ React2.createElement("div", {
+    return /* @__PURE__ */ React3.createElement("div", {
       role: "none",
-      className: mx("flex items-center gap-2", cardSpacing)
-    }, /* @__PURE__ */ React2.createElement(Card.Heading, {
+      className: mx2("flex items-center gap-2", cardSpacing)
+    }, /* @__PURE__ */ React3.createElement(Card2.Heading, {
       classNames: cardNoSpacing
-    }, label), /* @__PURE__ */ React2.createElement(CardSubjectMenu, {
+    }, label), /* @__PURE__ */ React3.createElement(CardSubjectMenu, {
       subject,
       activeSpace
     }));
@@ -138,31 +176,31 @@ var CardHeader = ({ label, subject, activeSpace }) => {
   }
 };
 var CardRow = ({ icon, label, onClick }) => {
-  var _effect = _useSignals2();
+  var _effect = _useSignals3();
   try {
     if (!onClick) {
-      return /* @__PURE__ */ React2.createElement(Card.Chrome, null, /* @__PURE__ */ React2.createElement("p", {
+      return /* @__PURE__ */ React3.createElement(Card2.Chrome, null, /* @__PURE__ */ React3.createElement("p", {
         "data-variant": "ghost",
-        className: mx(gridRow, "dx-button")
-      }, /* @__PURE__ */ React2.createElement(Icon, {
+        className: mx2(gridRow, "dx-button")
+      }, /* @__PURE__ */ React3.createElement(Icon, {
         icon,
         size: 5,
         classNames: "text-subdued"
-      }), /* @__PURE__ */ React2.createElement("span", {
+      }), /* @__PURE__ */ React3.createElement("span", {
         className: "min-is-0 flex-1 truncate col-span-2"
       }, label)));
     }
-    return /* @__PURE__ */ React2.createElement(Card.Chrome, null, /* @__PURE__ */ React2.createElement(Button, {
+    return /* @__PURE__ */ React3.createElement(Card2.Chrome, null, /* @__PURE__ */ React3.createElement(Button, {
       variant: "ghost",
-      classNames: mx(gridRow, "text-start"),
+      classNames: mx2(gridRow, "text-start"),
       onClick
-    }, /* @__PURE__ */ React2.createElement(Icon, {
+    }, /* @__PURE__ */ React3.createElement(Icon, {
       icon,
       size: 5,
       classNames: "text-subdued"
-    }), /* @__PURE__ */ React2.createElement("span", {
+    }), /* @__PURE__ */ React3.createElement("span", {
       className: "min-is-0 flex-1 truncate"
-    }, label), /* @__PURE__ */ React2.createElement(Icon, {
+    }, label), /* @__PURE__ */ React3.createElement(Icon, {
       icon: "ph--arrow-right--regular"
     })));
   } finally {
@@ -170,21 +208,21 @@ var CardRow = ({ icon, label, onClick }) => {
   }
 };
 var CardLink = ({ label, href }) => {
-  var _effect = _useSignals2();
+  var _effect = _useSignals3();
   try {
-    return /* @__PURE__ */ React2.createElement(Card.Chrome, null, /* @__PURE__ */ React2.createElement("a", {
-      className: mx(gridRow, "dx-button dx-focus-ring"),
+    return /* @__PURE__ */ React3.createElement(Card2.Chrome, null, /* @__PURE__ */ React3.createElement("a", {
+      className: mx2(gridRow, "dx-button dx-focus-ring"),
       "data-variant": "ghost",
       href,
       target: "_blank",
       rel: "noreferrer"
-    }, /* @__PURE__ */ React2.createElement(Icon, {
+    }, /* @__PURE__ */ React3.createElement(Icon, {
       icon: "ph--link--regular",
       size: 5,
       classNames: "text-subdued"
-    }), /* @__PURE__ */ React2.createElement("span", {
+    }), /* @__PURE__ */ React3.createElement("span", {
       className: "min-is-0 flex-1 truncate"
-    }, label), /* @__PURE__ */ React2.createElement(Icon, {
+    }, label), /* @__PURE__ */ React3.createElement(Icon, {
       icon: "ph--arrow-square-out--regular"
     })));
   } finally {
@@ -194,13 +232,13 @@ var CardLink = ({ label, href }) => {
 
 // src/cards/OrganizationCard.tsx
 var OrganizationCard = ({ children, subject, role, activeSpace }) => {
-  var _effect = _useSignals3();
+  var _effect = _useSignals4();
   try {
     const { name, image, description, website } = subject;
-    return /* @__PURE__ */ React3.createElement(Card2.SurfaceRoot, {
+    return /* @__PURE__ */ React4.createElement(Card3.SurfaceRoot, {
       id: subject.id,
       role
-    }, /* @__PURE__ */ React3.createElement(Card2.Poster, {
+    }, /* @__PURE__ */ React4.createElement(Card3.Poster, {
       alt: name ?? "",
       ...image ? {
         image
@@ -208,13 +246,13 @@ var OrganizationCard = ({ children, subject, role, activeSpace }) => {
         icon: "ph--building-office--regular"
       },
       classNames: !image && "opacity-50"
-    }), /* @__PURE__ */ React3.createElement(CardHeader, {
+    }), /* @__PURE__ */ React4.createElement(CardHeader, {
       label: name,
       subject,
       activeSpace
-    }), description && /* @__PURE__ */ React3.createElement(Card2.Text, {
+    }), description && /* @__PURE__ */ React4.createElement(Card3.Text, {
       classNames: "line-clamp-2"
-    }, description), website && /* @__PURE__ */ React3.createElement(CardLink, {
+    }, description), website && /* @__PURE__ */ React4.createElement(CardLink, {
       label: website,
       href: website
     }), children);
@@ -224,32 +262,32 @@ var OrganizationCard = ({ children, subject, role, activeSpace }) => {
 };
 
 // src/cards/PersonCard.tsx
-import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
-import React4, { Fragment } from "react";
+import { useSignals as _useSignals5 } from "@preact-signals/safe-react/tracking";
+import React5, { Fragment } from "react";
 import { Avatar, Icon as Icon2 } from "@dxos/react-ui";
-import { Card as Card3, cardHeading, cardText } from "@dxos/react-ui-stack";
-import { mx as mx2 } from "@dxos/react-ui-theme";
+import { Card as Card4, cardHeading, cardText } from "@dxos/react-ui-stack";
+import { mx as mx3 } from "@dxos/react-ui-theme";
 var PersonCard = ({ children, role, subject, activeSpace, onSelect }) => {
-  var _effect = _useSignals4();
+  var _effect = _useSignals5();
   try {
     const { fullName, image, organization: { target: organization } = {}, emails = [] } = subject;
-    return /* @__PURE__ */ React4.createElement(Card3.SurfaceRoot, {
+    return /* @__PURE__ */ React5.createElement(Card4.SurfaceRoot, {
       id: subject.id,
       role
-    }, /* @__PURE__ */ React4.createElement(Avatar.Root, null, /* @__PURE__ */ React4.createElement(Card3.Text, {
+    }, /* @__PURE__ */ React5.createElement(Avatar.Root, null, /* @__PURE__ */ React5.createElement(Card4.Text, {
       role: "group",
-      classNames: mx2("grid gap-2 grid-cols-[1fr_min-content]")
-    }, /* @__PURE__ */ React4.createElement("div", {
+      classNames: mx3("grid gap-2 grid-cols-[1fr_min-content]")
+    }, /* @__PURE__ */ React5.createElement("div", {
       role: "none",
-      className: mx2(gridRow, "grid-rows-2")
-    }, activeSpace ? /* @__PURE__ */ React4.createElement(CardSubjectMenu, {
+      className: mx3(gridRow, "grid-rows-2")
+    }, activeSpace ? /* @__PURE__ */ React5.createElement(CardSubjectMenu, {
       subject,
       activeSpace
-    }) : /* @__PURE__ */ React4.createElement("div", null), /* @__PURE__ */ React4.createElement(Avatar.Label, {
+    }) : /* @__PURE__ */ React5.createElement("div", null), /* @__PURE__ */ React5.createElement(Avatar.Label, {
       asChild: true
-    }, /* @__PURE__ */ React4.createElement("h2", {
-      className: mx2(cardHeading, "grow truncate")
-    }, fullName))), /* @__PURE__ */ React4.createElement(Avatar.Content, {
+    }, /* @__PURE__ */ React5.createElement("h2", {
+      className: mx3(cardHeading, "grow truncate")
+    }, fullName))), /* @__PURE__ */ React5.createElement(Avatar.Content, {
       imgSrc: image,
       icon: "ph--user--regular",
       size: 16,
@@ -259,20 +297,20 @@ var PersonCard = ({ children, role, subject, activeSpace, onSelect }) => {
       ],
       hue: "neutral",
       variant: "square"
-    }))), organization?.name && /* @__PURE__ */ React4.createElement(CardRow, {
+    }))), organization?.name && /* @__PURE__ */ React5.createElement(CardRow, {
       icon: "ph--buildings--regular",
       label: organization.name,
       onClick: onSelect ? () => onSelect(organization) : void 0
-    }), emails.length > 0 && /* @__PURE__ */ React4.createElement("dl", {
-      className: mx2(cardText, gridRow, "[&_dt]:text-subdued [&_dt]:pbs-0.5 [&_dd]:min-is-0")
-    }, emails.map(({ label, value }) => /* @__PURE__ */ React4.createElement(Fragment, {
+    }), emails.length > 0 && /* @__PURE__ */ React5.createElement("dl", {
+      className: mx3(cardText, gridRow, "[&_dt]:text-subdued [&_dt]:pbs-0.5 [&_dd]:min-is-0")
+    }, emails.map(({ label, value }) => /* @__PURE__ */ React5.createElement(Fragment, {
       key: value
-    }, /* @__PURE__ */ React4.createElement("dt", null, /* @__PURE__ */ React4.createElement("span", {
+    }, /* @__PURE__ */ React5.createElement("dt", null, /* @__PURE__ */ React5.createElement("span", {
       className: "sr-only"
-    }, label), /* @__PURE__ */ React4.createElement(Icon2, {
+    }, label), /* @__PURE__ */ React5.createElement(Icon2, {
       icon: "ph--at--regular",
       size: 5
-    })), /* @__PURE__ */ React4.createElement("dd", {
+    })), /* @__PURE__ */ React5.createElement("dd", {
       key: value,
       className: "col-span-2 break-words"
     }, value)))), children);
@@ -282,26 +320,26 @@ var PersonCard = ({ children, role, subject, activeSpace, onSelect }) => {
 };
 
 // src/cards/ProjectCard.tsx
-import { useSignals as _useSignals5 } from "@preact-signals/safe-react/tracking";
-import React5 from "react";
-import { Obj as Obj2 } from "@dxos/echo";
-import { Card as Card4 } from "@dxos/react-ui-stack";
+import { useSignals as _useSignals6 } from "@preact-signals/safe-react/tracking";
+import React6 from "react";
+import { Obj as Obj3 } from "@dxos/echo";
+import { Card as Card5 } from "@dxos/react-ui-stack";
 var ProjectCard = ({ subject, role, activeSpace }) => {
-  var _effect = _useSignals5();
+  var _effect = _useSignals6();
   try {
     const { name, image, description } = subject;
-    return /* @__PURE__ */ React5.createElement(Card4.SurfaceRoot, {
+    return /* @__PURE__ */ React6.createElement(Card5.SurfaceRoot, {
       id: subject.id,
       role
-    }, image && /* @__PURE__ */ React5.createElement(Card4.Poster, {
+    }, image && /* @__PURE__ */ React6.createElement(Card5.Poster, {
       image,
-      alt: Obj2.getLabel(subject) ?? "",
+      alt: Obj3.getLabel(subject) ?? "",
       aspect: "auto"
-    }), /* @__PURE__ */ React5.createElement(CardHeader, {
+    }), /* @__PURE__ */ React6.createElement(CardHeader, {
       label: name,
       subject,
       activeSpace
-    }), description && /* @__PURE__ */ React5.createElement(Card4.Text, {
+    }), description && /* @__PURE__ */ React6.createElement(Card5.Text, {
       classNames: "line-clamp-2"
     }, description));
   } finally {
@@ -310,12 +348,12 @@ var ProjectCard = ({ subject, role, activeSpace }) => {
 };
 
 // src/cards/TaskCard.tsx
-import { useSignals as _useSignals6 } from "@preact-signals/safe-react/tracking";
+import { useSignals as _useSignals7 } from "@preact-signals/safe-react/tracking";
 import * as SchemaAST from "effect/SchemaAST";
-import React6 from "react";
+import React7 from "react";
 import { PropertyMetaAnnotationId } from "@dxos/echo/internal";
-import { Card as Card5, cardNoSpacing as cardNoSpacing2, cardSpacing as cardSpacing2 } from "@dxos/react-ui-stack";
-import { mx as mx3 } from "@dxos/react-ui-theme";
+import { Card as Card6, cardNoSpacing as cardNoSpacing2, cardSpacing as cardSpacing2 } from "@dxos/react-ui-stack";
+import { mx as mx4 } from "@dxos/react-ui-theme";
 import { Task } from "@dxos/types";
 var getActiveStatusOption = (status) => {
   const properties = SchemaAST.getPropertySignatures(Task.Task.ast);
@@ -328,25 +366,25 @@ var getActiveStatusOption = (status) => {
   return options.find(({ id }) => id === status);
 };
 var TaskCard = ({ subject, role, activeSpace }) => {
-  var _effect = _useSignals6();
+  var _effect = _useSignals7();
   try {
     const { title, status } = subject;
     const statusOption = getActiveStatusOption(status);
-    return /* @__PURE__ */ React6.createElement(Card5.SurfaceRoot, {
+    return /* @__PURE__ */ React7.createElement(Card6.SurfaceRoot, {
       id: subject.id,
       role
-    }, /* @__PURE__ */ React6.createElement("div", {
+    }, /* @__PURE__ */ React7.createElement("div", {
       role: "none",
-      className: mx3("flex items-center gap-2", cardSpacing2)
-    }, /* @__PURE__ */ React6.createElement(Card5.Heading, {
+      className: mx4("flex items-center gap-2", cardSpacing2)
+    }, /* @__PURE__ */ React7.createElement(Card6.Heading, {
       classNames: [
         cardNoSpacing2,
         "min-is-0 flex-1 truncate"
       ]
-    }, title), statusOption && /* @__PURE__ */ React6.createElement("span", {
+    }, title), statusOption && /* @__PURE__ */ React7.createElement("span", {
       className: "dx-tag",
       "data-hue": statusOption.color
-    }, statusOption.title), /* @__PURE__ */ React6.createElement(CardSubjectMenu, {
+    }, statusOption.title), /* @__PURE__ */ React7.createElement(CardSubjectMenu, {
       subject,
       activeSpace
     })));
@@ -365,15 +403,15 @@ var react_surface_default = (() => contributes(Capabilities.ReactSurface, [
   createSurface({
     id: `${meta.id}/schema-popover--contact`,
     role: SurfaceCardRole.literals,
-    filter: (data) => Obj3.instanceOf(Person.Person, data.subject),
+    filter: (data) => Obj4.instanceOf(Person.Person, data.subject),
     component: ({ data, role }) => {
       const { dispatchPromise: dispatch } = useIntentDispatcher2();
       const space = getSpace(data.subject);
       const activeSpace = useActiveSpace();
-      const handleSelect = useCallback((object) => dispatch(createIntent2(LayoutAction2.Open, {
+      const handleSelect = useCallback2((object) => dispatch(createIntent2(LayoutAction2.Open, {
         part: "main",
         subject: [
-          Obj3.getDXN(object).toString()
+          Obj4.getDXN(object).toString()
         ],
         options: {
           workspace: space?.id
@@ -381,12 +419,12 @@ var react_surface_default = (() => contributes(Capabilities.ReactSurface, [
       })), [
         dispatch
       ]);
-      return /* @__PURE__ */ React7.createElement(PersonCard, {
+      return /* @__PURE__ */ React8.createElement(PersonCard, {
         role,
         subject: data.subject,
         activeSpace,
         onSelect: handleSelect
-      }, role === "card--popover" && /* @__PURE__ */ React7.createElement(Surface, {
+      }, role === "card--popover" && /* @__PURE__ */ React8.createElement(Surface, {
         role: "related",
         data
       }));
@@ -395,14 +433,14 @@ var react_surface_default = (() => contributes(Capabilities.ReactSurface, [
   createSurface({
     id: `${meta.id}/schema-popover--organization`,
     role: SurfaceCardRole.literals,
-    filter: (data) => Obj3.instanceOf(Organization.Organization, data.subject),
+    filter: (data) => Obj4.instanceOf(Organization.Organization, data.subject),
     component: ({ data, role }) => {
       const activeSpace = useActiveSpace();
-      return /* @__PURE__ */ React7.createElement(OrganizationCard, {
+      return /* @__PURE__ */ React8.createElement(OrganizationCard, {
         role,
         subject: data.subject,
         activeSpace
-      }, role === "card--popover" && /* @__PURE__ */ React7.createElement(Surface, {
+      }, role === "card--popover" && /* @__PURE__ */ React8.createElement(Surface, {
         role: "related",
         data
       }));
@@ -411,10 +449,10 @@ var react_surface_default = (() => contributes(Capabilities.ReactSurface, [
   createSurface({
     id: `${meta.id}/schema-popover--project`,
     role: SurfaceCardRole.literals,
-    filter: (data) => Obj3.instanceOf(Project.Project, data.subject),
+    filter: (data) => Obj4.instanceOf(Project.Project, data.subject),
     component: ({ data, role }) => {
       const activeSpace = useActiveSpace();
-      return /* @__PURE__ */ React7.createElement(ProjectCard, {
+      return /* @__PURE__ */ React8.createElement(ProjectCard, {
         subject: data.subject,
         role,
         activeSpace
@@ -424,9 +462,9 @@ var react_surface_default = (() => contributes(Capabilities.ReactSurface, [
   createSurface({
     id: `${meta.id}/schema-popover--task`,
     role: SurfaceCardRole.literals,
-    filter: (data) => Obj3.instanceOf(Task2.Task, data.subject),
+    filter: (data) => Obj4.instanceOf(Task2.Task, data.subject),
     component: ({ data, role }) => {
-      return /* @__PURE__ */ React7.createElement(TaskCard, {
+      return /* @__PURE__ */ React8.createElement(TaskCard, {
         subject: data.subject,
         role
       });
@@ -439,36 +477,13 @@ var react_surface_default = (() => contributes(Capabilities.ReactSurface, [
     id: `${meta.id}/fallback-popover`,
     role: SurfaceCardRole.literals,
     position: "fallback",
-    filter: (data) => Obj3.isObject(data.subject),
+    filter: (data) => Obj4.isObject(data.subject),
     component: ({ data, role }) => {
-      const schema = getSchema(data.subject);
-      const { t } = useTranslation2(meta.id);
-      if (!schema) {
-        return /* @__PURE__ */ React7.createElement("p", {
-          className: mx4(descriptionMessage)
-        }, t("unable to create preview message"));
-      }
-      const handleSave = useCallback((values, { changed }) => {
-        const changedPaths = Object.keys(changed).filter((path) => changed[path]);
-        for (const path of changedPaths) {
-          const value = values[path];
-          setValue(data.subject, path, value);
-        }
-      }, []);
-      return /* @__PURE__ */ React7.createElement(Card6.SurfaceRoot, {
-        role
-      }, /* @__PURE__ */ React7.createElement(Form, {
-        id: data.subject.id,
-        schema,
+      return /* @__PURE__ */ React8.createElement(FormCard, {
+        subject: data.subject,
         projection: data.projection,
-        values: data.subject,
-        readonly: role === "card--popover" ? "static" : false,
-        onSave: handleSave,
-        autoSave: true,
-        ...role === "card--intrinsic" && {
-          outerSpacing: "blockStart-0"
-        }
-      }));
+        role
+      });
     }
   }),
   createSurface({
@@ -477,15 +492,15 @@ var react_surface_default = (() => contributes(Capabilities.ReactSurface, [
       "section"
     ],
     position: "fallback",
-    filter: (data) => Obj3.isObject(data.subject),
+    filter: (data) => Obj4.isObject(data.subject),
     component: ({ data }) => {
-      return /* @__PURE__ */ React7.createElement("div", {
+      return /* @__PURE__ */ React8.createElement("div", {
         role: "none",
         className: "flex is-full justify-center"
-      }, /* @__PURE__ */ React7.createElement("div", {
+      }, /* @__PURE__ */ React8.createElement("div", {
         role: "none",
         className: "pbs-2 pbe-2 card-min-width card-max-width"
-      }, /* @__PURE__ */ React7.createElement(Surface, {
+      }, /* @__PURE__ */ React8.createElement(Surface, {
         role: "card",
         data,
         limit: 1
@@ -496,4 +511,4 @@ var react_surface_default = (() => contributes(Capabilities.ReactSurface, [
 export {
   react_surface_default as default
 };
-//# sourceMappingURL=react-surface-65UVGBIZ.mjs.map
+//# sourceMappingURL=react-surface-ZJ4C32OR.mjs.map