@dxos/plugin-preview 0.8.4-main.406dc2a → 0.8.4-main.548089c

package/dist/lib/browser/{react-surface-X56QWACK.mjs → react-surface-ZAOGRCMT.mjs}

@@ -1,39 +1,69 @@
 import {
   meta
-} from "./chunk-XKCIQK3C.mjs";
+} from "./chunk-CEWM5LJG.mjs";
 
 // src/capabilities/react-surface.tsx
-import React6, { useCallback } from "react";
-import { Capabilities, LayoutAction as LayoutAction2, Surface, contributes, createIntent as createIntent2, createSurface, useIntentDispatcher as useIntentDispatcher2 } from "@dxos/app-framework";
-import { fullyQualifiedId as fullyQualifiedId2, getSchema, getSpace } from "@dxos/client/echo";
+import React7, { useCallback } from "react";
+import { Capabilities, LayoutAction as LayoutAction2, contributes, createIntent as createIntent2, createSurface } from "@dxos/app-framework";
+import { Surface, 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 { useActiveSpace } from "@dxos/plugin-space";
 import { useTranslation as useTranslation2 } from "@dxos/react-ui";
 import { Form } from "@dxos/react-ui-form";
-import { Card as Card5 } from "@dxos/react-ui-stack";
-import { descriptionMessage, mx as mx5 } from "@dxos/react-ui-theme";
-import { DataType as DataType2 } from "@dxos/schema";
+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/components/ContactCard.tsx
+// 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";
+
+// src/components/CardComponents.tsx
 import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
-import React2, { Fragment } from "react";
-import { Avatar, Button, Icon } from "@dxos/react-ui";
-import { Card, cardHeading, cardText } from "@dxos/react-ui-stack";
+import React2 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";
 
 // src/components/CardSubjectMenu.tsx
 import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
-import { Rx } from "@effect-rx/rx-react";
+import { Atom } from "@effect-atom/atom-react";
 import React from "react";
-import { LayoutAction, createIntent, useIntentDispatcher } from "@dxos/app-framework";
+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 { SpaceAction } from "@dxos/plugin-space/types";
-import { fullyQualifiedId } from "@dxos/react-client/echo";
 import { IconButton, useTranslation } from "@dxos/react-ui";
 import { DropdownMenu, MenuProvider, useMenuActions } from "@dxos/react-ui-menu";
-var useSubjectMenuGroupItems = (subject, activeSpace) => {
+var CardSubjectMenu = ({ subject, activeSpace, ...props }) => {
+  var _effect = _useSignals();
+  try {
+    const { t } = useTranslation(meta.id);
+    const menuProps = useSubjectMenuGroupItems({
+      subject,
+      activeSpace
+    });
+    if (!activeSpace) {
+      return null;
+    }
+    return /* @__PURE__ */ React.createElement(MenuProvider, menuProps, /* @__PURE__ */ React.createElement(DropdownMenu.Root, null, /* @__PURE__ */ React.createElement(DropdownMenu.Trigger, {
+      asChild: true
+    }, /* @__PURE__ */ React.createElement(IconButton, {
+      variant: "ghost",
+      icon: "ph--dots-three-vertical--bold",
+      iconOnly: true,
+      label: t("more options label"),
+      ...props
+    }))));
+  } finally {
+    _effect.f();
+  }
+};
+var useSubjectMenuGroupItems = ({ subject, activeSpace }) => {
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   const result = {
     edges: [],
@@ -45,7 +75,7 @@ var useSubjectMenuGroupItems = (subject, activeSpace) => {
     data: () => dispatch(createIntent(LayoutAction.Open, {
       part: "main",
       subject: [
-        fullyQualifiedId(subject)
+        Obj.getDXN(subject).toString()
       ]
     })),
     properties: {
@@ -85,169 +115,192 @@ var useSubjectMenuGroupItems = (subject, activeSpace) => {
       target
     });
   });
-  return useMenuActions(Rx.make(result));
+  return useMenuActions(Atom.make(result));
 };
-var CardSubjectMenu = ({ subject, activeSpace, ...props }) => {
-  var _effect = _useSignals();
+
+// 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();
   try {
-    const { t } = useTranslation(meta.id);
-    const menuProps = useSubjectMenuGroupItems(subject, activeSpace);
-    if (!activeSpace) {
-      return null;
-    }
-    return /* @__PURE__ */ React.createElement(MenuProvider, menuProps, /* @__PURE__ */ React.createElement(DropdownMenu.Root, null, /* @__PURE__ */ React.createElement(DropdownMenu.Trigger, {
-      asChild: true
-    }, /* @__PURE__ */ React.createElement(IconButton, {
-      iconOnly: true,
-      variant: "ghost",
-      icon: "ph--dots-three-vertical--bold",
-      label: t("more options label"),
-      ...props
-    }))));
+    return /* @__PURE__ */ React2.createElement("div", {
+      role: "none",
+      className: mx("flex items-center gap-2", cardSpacing)
+    }, /* @__PURE__ */ React2.createElement(Card.Heading, {
+      classNames: cardNoSpacing
+    }, label), /* @__PURE__ */ React2.createElement(CardSubjectMenu, {
+      subject,
+      activeSpace
+    }));
   } finally {
     _effect.f();
   }
 };
-
-// src/components/ContactCard.tsx
-var ContactCard = ({ children, subject, activeSpace, onOrgClick, role }) => {
+var CardRow = ({ icon, label, onClick }) => {
   var _effect = _useSignals2();
   try {
-    const { fullName, image, organization, emails } = subject;
-    const organizationName = organization && typeof organization === "object" ? organization.target?.name : organization;
-    return /* @__PURE__ */ React2.createElement(Card.SurfaceRoot, {
-      role
-    }, /* @__PURE__ */ React2.createElement(Avatar.Root, null, /* @__PURE__ */ React2.createElement(Card.Text, {
-      role: "group",
-      classNames: "grid gap-3 grid-cols-[min-content_1fr]"
-    }, /* @__PURE__ */ React2.createElement(Avatar.Content, {
-      imgSrc: image,
-      icon: "ph--user--regular",
-      size: 16,
-      hue: "neutral"
-    }), /* @__PURE__ */ React2.createElement("div", {
-      role: "none",
-      className: "bs-min self-center flex items-center"
-    }, /* @__PURE__ */ React2.createElement(Avatar.Label, {
-      asChild: true
-    }, /* @__PURE__ */ React2.createElement("h2", {
-      className: mx(cardHeading, "grow")
-    }, fullName)), /* @__PURE__ */ React2.createElement(CardSubjectMenu, {
-      subject,
-      activeSpace
-    })))), organizationName && /* @__PURE__ */ React2.createElement(Card.Chrome, null, typeof organization === "object" && onOrgClick ? /* @__PURE__ */ React2.createElement(Button, {
+    if (!onClick) {
+      return /* @__PURE__ */ React2.createElement(Card.Chrome, null, /* @__PURE__ */ React2.createElement("p", {
+        "data-variant": "ghost",
+        className: mx(gridRow, "dx-button")
+      }, /* @__PURE__ */ React2.createElement(Icon, {
+        icon,
+        size: 5,
+        classNames: "text-subdued"
+      }), /* @__PURE__ */ React2.createElement("span", {
+        className: "min-is-0 flex-1 truncate col-span-2"
+      }, label)));
+    }
+    return /* @__PURE__ */ React2.createElement(Card.Chrome, null, /* @__PURE__ */ React2.createElement(Button, {
       variant: "ghost",
-      classNames: "gap-2 text-start",
-      onClick: () => onOrgClick(organization.target)
+      classNames: mx(gridRow, "text-start"),
+      onClick
     }, /* @__PURE__ */ React2.createElement(Icon, {
-      icon: "ph--buildings--regular",
+      icon,
       size: 5,
       classNames: "text-subdued"
     }), /* @__PURE__ */ React2.createElement("span", {
       className: "min-is-0 flex-1 truncate"
-    }, organizationName), /* @__PURE__ */ React2.createElement(Icon, {
+    }, label), /* @__PURE__ */ React2.createElement(Icon, {
       icon: "ph--arrow-right--regular"
-    })) : /* @__PURE__ */ React2.createElement("p", {
-      className: "dx-button gap-2",
-      "data-variant": "ghost"
+    })));
+  } finally {
+    _effect.f();
+  }
+};
+var CardLink = ({ label, href }) => {
+  var _effect = _useSignals2();
+  try {
+    return /* @__PURE__ */ React2.createElement(Card.Chrome, null, /* @__PURE__ */ React2.createElement("a", {
+      className: mx(gridRow, "dx-button dx-focus-ring"),
+      "data-variant": "ghost",
+      href,
+      target: "_blank",
+      rel: "noreferrer"
     }, /* @__PURE__ */ React2.createElement(Icon, {
-      icon: "ph--buildings--regular",
+      icon: "ph--link--regular",
       size: 5,
       classNames: "text-subdued"
     }), /* @__PURE__ */ React2.createElement("span", {
       className: "min-is-0 flex-1 truncate"
-    }, organizationName))), emails?.length && /* @__PURE__ */ React2.createElement("dl", {
-      className: mx(cardText, "grid gap-2 grid-cols-[min-content_1fr] [&_dt]:text-subdued [&_dt]:pbs-0.5 [&_dd]:min-is-0")
-    }, emails?.length && emails.map(({ label, value }) => /* @__PURE__ */ React2.createElement(Fragment, {
-      key: value
-    }, /* @__PURE__ */ React2.createElement("dt", null, /* @__PURE__ */ React2.createElement("span", {
-      className: "sr-only"
     }, label), /* @__PURE__ */ React2.createElement(Icon, {
-      icon: "ph--at--regular",
-      size: 5
-    })), /* @__PURE__ */ React2.createElement("dd", {
-      key: value,
-      className: "break-words"
-    }, value)))), children);
+      icon: "ph--arrow-square-out--regular"
+    })));
   } finally {
     _effect.f();
   }
 };
 
-// src/components/OrganizationCard.tsx
-import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
-import React3 from "react";
-import { Icon as Icon2 } from "@dxos/react-ui";
-import { Card as Card2, cardNoSpacing, cardSpacing } from "@dxos/react-ui-stack";
-import { mx as mx2 } from "@dxos/react-ui-theme";
+// src/cards/OrganizationCard.tsx
 var OrganizationCard = ({ children, subject, role, activeSpace }) => {
   var _effect = _useSignals3();
   try {
     const { name, image, description, website } = subject;
     return /* @__PURE__ */ React3.createElement(Card2.SurfaceRoot, {
+      id: subject.id,
       role
     }, /* @__PURE__ */ React3.createElement(Card2.Poster, {
-      alt: name,
+      alt: name ?? "",
       ...image ? {
         image
       } : {
         icon: "ph--building-office--regular"
-      }
-    }), /* @__PURE__ */ React3.createElement("div", {
-      role: "none",
-      className: mx2("flex items-center gap-2", cardSpacing)
-    }, /* @__PURE__ */ React3.createElement(Card2.Heading, {
-      classNames: cardNoSpacing
-    }, name), /* @__PURE__ */ React3.createElement(CardSubjectMenu, {
+      },
+      classNames: !image && "opacity-50"
+    }), /* @__PURE__ */ React3.createElement(CardHeader, {
+      label: name,
       subject,
       activeSpace
-    })), description && /* @__PURE__ */ React3.createElement(Card2.Text, {
+    }), description && /* @__PURE__ */ React3.createElement(Card2.Text, {
       classNames: "line-clamp-2"
-    }, description), website && /* @__PURE__ */ React3.createElement(Card2.Chrome, null, /* @__PURE__ */ React3.createElement("a", {
-      className: "dx-button dx-focus-ring gap-2",
-      "data-variant": "ghost",
-      href: website,
-      target: "_blank",
-      rel: "noreferrer"
-    }, /* @__PURE__ */ React3.createElement(Icon2, {
-      icon: "ph--link--regular",
-      size: 5,
-      classNames: "text-subdued"
-    }), /* @__PURE__ */ React3.createElement("span", {
-      className: "min-is-0 flex-1 truncate"
-    }, website), /* @__PURE__ */ React3.createElement(Icon2, {
-      icon: "ph--arrow-square-out--regular"
-    }))), children);
+    }, description), website && /* @__PURE__ */ React3.createElement(CardLink, {
+      label: website,
+      href: website
+    }), children);
   } finally {
     _effect.f();
   }
 };
 
-// src/components/ProjectCard.tsx
+// src/cards/PersonCard.tsx
 import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
-import React4 from "react";
+import React4, { 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";
+var PersonCard = ({ children, role, subject, activeSpace, onSelect }) => {
+  var _effect = _useSignals4();
+  try {
+    const { fullName, image, organization: { target: organization } = {}, emails = [] } = subject;
+    return /* @__PURE__ */ React4.createElement(Card3.SurfaceRoot, {
+      id: subject.id,
+      role
+    }, /* @__PURE__ */ React4.createElement(Avatar.Root, null, /* @__PURE__ */ React4.createElement(Card3.Text, {
+      role: "group",
+      classNames: mx2("grid gap-2 grid-cols-[1fr_min-content]")
+    }, /* @__PURE__ */ React4.createElement("div", {
+      role: "none",
+      className: mx2(gridRow, "grid-rows-2")
+    }, activeSpace ? /* @__PURE__ */ React4.createElement(CardSubjectMenu, {
+      subject,
+      activeSpace
+    }) : /* @__PURE__ */ React4.createElement("div", null), /* @__PURE__ */ React4.createElement(Avatar.Label, {
+      asChild: true
+    }, /* @__PURE__ */ React4.createElement("h2", {
+      className: mx2(cardHeading, "grow truncate")
+    }, fullName))), /* @__PURE__ */ React4.createElement(Avatar.Content, {
+      imgSrc: image,
+      icon: "ph--user--regular",
+      size: 16,
+      classNames: [
+        "text-subdued",
+        !image && "opacity-50"
+      ],
+      hue: "neutral",
+      variant: "square"
+    }))), organization?.name && /* @__PURE__ */ React4.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, {
+      key: value
+    }, /* @__PURE__ */ React4.createElement("dt", null, /* @__PURE__ */ React4.createElement("span", {
+      className: "sr-only"
+    }, label), /* @__PURE__ */ React4.createElement(Icon2, {
+      icon: "ph--at--regular",
+      size: 5
+    })), /* @__PURE__ */ React4.createElement("dd", {
+      key: value,
+      className: "col-span-2 break-words"
+    }, value)))), children);
+  } finally {
+    _effect.f();
+  }
+};
+
+// 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 Card3, cardNoSpacing as cardNoSpacing2, cardSpacing as cardSpacing2 } from "@dxos/react-ui-stack";
-import { mx as mx3 } from "@dxos/react-ui-theme";
+import { Card as Card4 } from "@dxos/react-ui-stack";
 var ProjectCard = ({ subject, role, activeSpace }) => {
-  var _effect = _useSignals4();
+  var _effect = _useSignals5();
   try {
     const { name, image, description } = subject;
-    return /* @__PURE__ */ React4.createElement(Card3.SurfaceRoot, {
+    return /* @__PURE__ */ React5.createElement(Card4.SurfaceRoot, {
+      id: subject.id,
       role
-    }, image && /* @__PURE__ */ React4.createElement(Card3.Poster, {
+    }, image && /* @__PURE__ */ React5.createElement(Card4.Poster, {
       image,
       alt: Obj2.getLabel(subject) ?? "",
       aspect: "auto"
-    }), /* @__PURE__ */ React4.createElement("div", {
-      role: "none",
-      className: mx3("flex items-center gap-2", cardSpacing2)
-    }, /* @__PURE__ */ React4.createElement(Card3.Heading, {
-      classNames: cardNoSpacing2
-    }, name), /* @__PURE__ */ React4.createElement(CardSubjectMenu, {
+    }), /* @__PURE__ */ React5.createElement(CardHeader, {
+      label: name,
       subject,
       activeSpace
-    })), description && /* @__PURE__ */ React4.createElement(Card3.Text, {
+    }), description && /* @__PURE__ */ React5.createElement(Card4.Text, {
       classNames: "line-clamp-2"
     }, description));
   } finally {
@@ -255,16 +308,16 @@ var ProjectCard = ({ subject, role, activeSpace }) => {
   }
 };
 
-// src/components/TaskCard.tsx
-import { useSignals as _useSignals5 } from "@preact-signals/safe-react/tracking";
+// src/cards/TaskCard.tsx
+import { useSignals as _useSignals6 } from "@preact-signals/safe-react/tracking";
 import * as SchemaAST from "effect/SchemaAST";
-import React5 from "react";
+import React6 from "react";
 import { PropertyMetaAnnotationId } from "@dxos/echo/internal";
-import { Card as Card4, cardNoSpacing as cardNoSpacing3, cardSpacing as cardSpacing3 } from "@dxos/react-ui-stack";
-import { mx as mx4 } from "@dxos/react-ui-theme";
-import { DataType } from "@dxos/schema";
+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 { Task } from "@dxos/types";
 var getActiveStatusOption = (status) => {
-  const properties = SchemaAST.getPropertySignatures(DataType.Task.ast);
+  const properties = SchemaAST.getPropertySignatures(Task.Task.ast);
   const statusProperty = properties.find((p) => p.name === "status");
   const statusMeta = SchemaAST.getAnnotation(PropertyMetaAnnotationId)(
     // TODO(thure): Typescript asserts `.type` doesn’t have `.types`, but in runtime it does.
@@ -274,24 +327,25 @@ var getActiveStatusOption = (status) => {
   return options.find(({ id }) => id === status);
 };
 var TaskCard = ({ subject, role, activeSpace }) => {
-  var _effect = _useSignals5();
+  var _effect = _useSignals6();
   try {
     const { title, status } = subject;
     const statusOption = getActiveStatusOption(status);
-    return /* @__PURE__ */ React5.createElement(Card4.SurfaceRoot, {
+    return /* @__PURE__ */ React6.createElement(Card5.SurfaceRoot, {
+      id: subject.id,
       role
-    }, /* @__PURE__ */ React5.createElement("div", {
+    }, /* @__PURE__ */ React6.createElement("div", {
       role: "none",
-      className: mx4("flex items-center gap-2", cardSpacing3)
-    }, /* @__PURE__ */ React5.createElement(Card4.Heading, {
+      className: mx3("flex items-center gap-2", cardSpacing2)
+    }, /* @__PURE__ */ React6.createElement(Card5.Heading, {
       classNames: [
-        cardNoSpacing3,
+        cardNoSpacing2,
         "min-is-0 flex-1 truncate"
       ]
-    }, title), statusOption && /* @__PURE__ */ React5.createElement("span", {
+    }, title), statusOption && /* @__PURE__ */ React6.createElement("span", {
       className: "dx-tag",
       "data-hue": statusOption.color
-    }, statusOption.title), /* @__PURE__ */ React5.createElement(CardSubjectMenu, {
+    }, statusOption.title), /* @__PURE__ */ React6.createElement(CardSubjectMenu, {
       subject,
       activeSpace
     })));
@@ -304,6 +358,7 @@ var TaskCard = ({ subject, role, activeSpace }) => {
 var react_surface_default = (() => contributes(Capabilities.ReactSurface, [
   //
   // Specific schema types.
+  // TODO(burdon): Create helpers and factor out.
   //
   createSurface({
     id: `${meta.id}/schema-popover--contact`,
@@ -314,15 +369,15 @@ var react_surface_default = (() => contributes(Capabilities.ReactSurface, [
       "card--extrinsic",
       "card"
     ],
-    filter: (data) => Obj3.instanceOf(DataType2.Person, data.subject),
+    filter: (data) => Obj3.instanceOf(Person.Person, data.subject),
     component: ({ data, role }) => {
       const { dispatchPromise: dispatch } = useIntentDispatcher2();
       const space = getSpace(data.subject);
       const activeSpace = useActiveSpace();
-      const handleOrgClick = useCallback((org) => dispatch(createIntent2(LayoutAction2.Open, {
+      const handleSelect = useCallback((object) => dispatch(createIntent2(LayoutAction2.Open, {
         part: "main",
         subject: [
-          fullyQualifiedId2(org)
+          Obj3.getDXN(object).toString()
         ],
         options: {
           workspace: space?.id
@@ -330,12 +385,12 @@ var react_surface_default = (() => contributes(Capabilities.ReactSurface, [
       })), [
         dispatch
       ]);
-      return /* @__PURE__ */ React6.createElement(ContactCard, {
+      return /* @__PURE__ */ React7.createElement(PersonCard, {
         role,
         subject: data.subject,
         activeSpace,
-        onOrgClick: handleOrgClick
-      }, role === "card--popover" && /* @__PURE__ */ React6.createElement(Surface, {
+        onSelect: handleSelect
+      }, role === "card--popover" && /* @__PURE__ */ React7.createElement(Surface, {
         role: "related",
         data
       }));
@@ -350,14 +405,14 @@ var react_surface_default = (() => contributes(Capabilities.ReactSurface, [
       "card--extrinsic",
       "card"
     ],
-    filter: (data) => Obj3.instanceOf(DataType2.Organization, data.subject),
+    filter: (data) => Obj3.instanceOf(Organization.Organization, data.subject),
     component: ({ data, role }) => {
       const activeSpace = useActiveSpace();
-      return /* @__PURE__ */ React6.createElement(OrganizationCard, {
+      return /* @__PURE__ */ React7.createElement(OrganizationCard, {
         role,
         subject: data.subject,
         activeSpace
-      }, role === "card--popover" && /* @__PURE__ */ React6.createElement(Surface, {
+      }, role === "card--popover" && /* @__PURE__ */ React7.createElement(Surface, {
         role: "related",
         data
       }));
@@ -372,10 +427,10 @@ var react_surface_default = (() => contributes(Capabilities.ReactSurface, [
       "card--extrinsic",
       "card"
     ],
-    filter: (data) => Obj3.instanceOf(DataType2.Project, data.subject),
+    filter: (data) => Obj3.instanceOf(Project.Project, data.subject),
     component: ({ data, role }) => {
       const activeSpace = useActiveSpace();
-      return /* @__PURE__ */ React6.createElement(ProjectCard, {
+      return /* @__PURE__ */ React7.createElement(ProjectCard, {
         subject: data.subject,
         role,
         activeSpace
@@ -391,11 +446,13 @@ var react_surface_default = (() => contributes(Capabilities.ReactSurface, [
       "card--extrinsic",
       "card"
     ],
-    filter: (data) => Obj3.instanceOf(DataType2.Task, data.subject),
-    component: ({ data, role }) => /* @__PURE__ */ React6.createElement(TaskCard, {
-      subject: data.subject,
-      role
-    })
+    filter: (data) => Obj3.instanceOf(Task2.Task, data.subject),
+    component: ({ data, role }) => {
+      return /* @__PURE__ */ React7.createElement(TaskCard, {
+        subject: data.subject,
+        role
+      });
+    }
   }),
   //
   // Fallback for any object.
@@ -415,8 +472,8 @@ var react_surface_default = (() => contributes(Capabilities.ReactSurface, [
       const schema = getSchema(data.subject);
       const { t } = useTranslation2(meta.id);
       if (!schema) {
-        return /* @__PURE__ */ React6.createElement("p", {
-          className: mx5(descriptionMessage)
+        return /* @__PURE__ */ React7.createElement("p", {
+          className: mx4(descriptionMessage)
         }, t("unable to create preview message"));
       }
       const handleSave = useCallback((values, { changed }) => {
@@ -426,9 +483,10 @@ var react_surface_default = (() => contributes(Capabilities.ReactSurface, [
           setValue(data.subject, path, value);
         }
       }, []);
-      return /* @__PURE__ */ React6.createElement(Card5.SurfaceRoot, {
+      return /* @__PURE__ */ React7.createElement(Card6.SurfaceRoot, {
         role
-      }, /* @__PURE__ */ React6.createElement(Form, {
+      }, /* @__PURE__ */ React7.createElement(Form, {
+        id: data.subject.id,
         schema,
         projection: data.projection,
         values: data.subject,
@@ -440,9 +498,30 @@ var react_surface_default = (() => contributes(Capabilities.ReactSurface, [
         }
       }));
     }
+  }),
+  createSurface({
+    id: `${meta.id}/section`,
+    role: [
+      "section"
+    ],
+    position: "fallback",
+    filter: (data) => Obj3.isObject(data.subject),
+    component: ({ data }) => {
+      return /* @__PURE__ */ React7.createElement("div", {
+        role: "none",
+        className: "flex is-full justify-center"
+      }, /* @__PURE__ */ React7.createElement("div", {
+        role: "none",
+        className: "pbs-2 pbe-2 card-min-width card-max-width"
+      }, /* @__PURE__ */ React7.createElement(Surface, {
+        role: "card",
+        data,
+        limit: 1
+      })));
+    }
   })
 ]));
 export {
   react_surface_default as default
 };
-//# sourceMappingURL=react-surface-X56QWACK.mjs.map
+//# sourceMappingURL=react-surface-ZAOGRCMT.mjs.map