@dxos/plugin-space 0.9.0 → 0.9.1-staging.ee54ba693a

package/src/containers/MembersContainer/MembersContainer.tsx

@@ -7,7 +7,7 @@ import React, { type Dispatch, type SetStateAction, useMemo, useState } from 're
 import { QR } from 'react-qr-rounded';
 
 import { useOperationInvoker } from '@dxos/app-framework/ui';
-import { RootCollectionAnnotation } from '@dxos/app-toolkit';
+import { AppAnnotation } from '@dxos/app-toolkit';
 import { AppSurface } from '@dxos/app-toolkit/ui';
 import { Annotation, Obj } from '@dxos/echo';
 import { log } from '@dxos/log';
@@ -15,7 +15,7 @@ import { useConfig } from '@dxos/react-client';
 import { useSpaceInvitations } from '@dxos/react-client/echo';
 import { type CancellableInvitationObservable, Invitation, InvitationEncoder } from '@dxos/react-client/invitations';
 import { Button, Clipboard, Icon, useId, useTranslation } from '@dxos/react-ui';
-import { Settings } from '@dxos/react-ui-form';
+import { Form } from '@dxos/react-ui-form';
 import {
   type ActionMenuItem,
   AuthCode,
@@ -48,7 +48,7 @@ export type MembersContainerProps = AppSurface.SpaceArticleProps<{
 }>;
 
 export const MembersContainer = ({ space, createInvitationUrl }: MembersContainerProps) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const config = useConfig();
   const { invokePromise } = useOperationInvoker();
   const invitations = useSpaceInvitations(space.key);
@@ -64,8 +64,8 @@ export const MembersContainer = ({ space, createInvitationUrl }: MembersContaine
   };
 
   // TODO(wittjosiah): Track which was the most recently viewed object.
-  const target = Annotation.get(space.properties, RootCollectionAnnotation).pipe(Option.getOrUndefined)?.target
-    ?.objects[0]?.target;
+  const target = Annotation.get(space.properties, AppAnnotation.RootCollectionAnnotation).pipe(Option.getOrUndefined)
+    ?.target?.objects[0]?.target;
 
   const inviteActions = useMemo(
     (): Record<string, ActionMenuItem> => ({
@@ -123,38 +123,42 @@ export const MembersContainer = ({ space, createInvitationUrl }: MembersContaine
 
   return (
     <Clipboard.Provider>
-      <Settings.Viewport>
-        <Settings.Section title={t('members-verbose.label')} description={t('members.description')}>
-          <Settings.Panel>
-            <div role='group' className='min-w-0'>
-              <h3 className='text-lg mb-2'>{t('members.label')}</h3>
-              <SpaceMemberList spaceKey={space.key} includeSelf />
-            </div>
-            <div role='group' className='min-w-0'>
-              <h3 className='text-lg mb-2'>{t('invitations.label')}</h3>
-              {selectedInvitation && <InvitationSection {...selectedInvitation} onBack={handleBack} />}
-              {!selectedInvitation && (
-                <>
-                  <p className='text-description mb-2'>{t('space-invitation.description')}</p>
-                  <InvitationList
-                    className='mb-2'
-                    send={handleSend}
-                    invitations={visibleInvitations ?? []}
-                    onClickRemove={(invitation) => invitation.cancel()}
-                    createInvitationUrl={createInvitationUrl}
-                  />
-                  <BifurcatedAction
-                    actions={inviteActions}
-                    activeAction={activeAction}
-                    onChangeActiveAction={setActiveAction as Dispatch<SetStateAction<string>>}
-                    data-testid='membersContainer.createInvitation'
-                  />
-                </>
-              )}
-            </div>
-          </Settings.Panel>
-        </Settings.Section>
-      </Settings.Viewport>
+      <Form.Root variant='settings'>
+        <Form.Viewport scroll>
+          <Form.Content>
+            <Form.Section title={t('members-verbose.label')} description={t('members.description')}>
+              <Form.Group>
+                <div role='group' className='min-w-0'>
+                  <h3 className='text-lg mb-2'>{t('members.label')}</h3>
+                  <SpaceMemberList spaceKey={space.key} includeSelf />
+                </div>
+                <div role='group' className='min-w-0'>
+                  <h3 className='text-lg mb-2'>{t('invitations.label')}</h3>
+                  {selectedInvitation && <InvitationSection {...selectedInvitation} onBack={handleBack} />}
+                  {!selectedInvitation && (
+                    <>
+                      <p className='text-description mb-2'>{t('space-invitation.description')}</p>
+                      <InvitationList
+                        className='mb-2'
+                        send={handleSend}
+                        invitations={visibleInvitations ?? []}
+                        onClickRemove={(invitation) => invitation.cancel()}
+                        createInvitationUrl={createInvitationUrl}
+                      />
+                      <BifurcatedAction
+                        actions={inviteActions}
+                        activeAction={activeAction}
+                        onChangeActiveAction={setActiveAction as Dispatch<SetStateAction<string>>}
+                        data-testid='membersContainer.createInvitation'
+                      />
+                    </>
+                  )}
+                </div>
+              </Form.Group>
+            </Form.Section>
+          </Form.Content>
+        </Form.Viewport>
+      </Form.Root>
     </Clipboard.Provider>
   );
 };
@@ -210,7 +214,7 @@ const InvitationQR = ({ id, url, onCancel }: { id: string; url: string; onCancel
   const emoji = hexToEmoji(id);
   return (
     <>
-      <p className='text-description'>{t('qr-code.description', { ns: meta.id })}</p>
+      <p className='text-description'>{t('qr-code.description', { ns: meta.profile.key })}</p>
       <div role='group' className='grid grid-cols-[1fr_min-content] my-2 gap-2'>
         <div className='w-full aspect-square relative text-description'>
           <QR

package/src/containers/MenuFooter/MenuFooter.tsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 
-import { isPersonalSpace } from '@dxos/app-toolkit';
+import { AppSpace } from '@dxos/app-toolkit';
 import { getSpace } from '@dxos/client/echo';
 import { type Obj } from '@dxos/echo';
 import { DropdownMenu, Icon, toLocalizedString, useTranslation } from '@dxos/react-ui';
@@ -14,9 +14,9 @@ import { meta } from '#meta';
 import { getSpaceDisplayName } from '../../util';
 
 export const MenuFooter = ({ object }: { object: Obj.Unknown }) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const space = getSpace(object);
-  const spaceName = space ? getSpaceDisplayName(space, { personal: isPersonalSpace(space) }) : '';
+  const spaceName = space ? getSpaceDisplayName(space, { personal: AppSpace.isPersonalSpace(space) }) : '';
   return space ? (
     <>
       <DropdownMenu.Separator />

package/src/containers/ObjectCardStack/ObjectCardStack.tsx

@@ -7,7 +7,7 @@ import React, { forwardRef, useState } from 'react';
 import { Filter, Obj, type View } from '@dxos/echo';
 import { useQuery, useType } from '@dxos/react-client/echo';
 import { Card, Message, Panel, ScrollArea, Toolbar, useTranslation } from '@dxos/react-ui';
-import { useSelected } from '@dxos/react-ui-attention';
+import { useSelection } from '@dxos/react-ui-attention';
 import { ObjectForm } from '@dxos/react-ui-form';
 import { Mosaic } from '@dxos/react-ui-mosaic';
 import { getTypeURIFromQuery } from '@dxos/schema';
@@ -24,13 +24,13 @@ export type ObjectCardStackProps = {
  * @deprecated Use Mosaic Board components.
  */
 export const ObjectCardStack = forwardRef<HTMLDivElement, ObjectCardStackProps>(({ objectId, view }, forwardedRef) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const db = Obj.getDatabase(view);
   const typeUri = view.query ? getTypeURIFromQuery(view.query.ast) : undefined;
   const type = useType(db, typeUri);
 
   const queriedObjects = useQuery(db, type ? Filter.type(type) : Filter.nothing());
-  const selectedRows = useSelected(objectId, 'multi');
+  const selectedRows = useSelection(objectId, 'multi');
   const selectedObjects = selectedRows.map((id) => queriedObjects.find((obj) => obj.id === id)).filter(isNonNullable);
 
   const [viewport, setViewport] = useState<HTMLElement | null>(null);

package/src/containers/RecordArticle/RecordArticle.tsx

@@ -2,17 +2,22 @@
 // Copyright 2023 DXOS.org
 //
 
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import { Surface } from '@dxos/app-framework/ui';
-import { AppSurface } from '@dxos/app-toolkit/ui';
-import { Obj, Type } from '@dxos/echo';
-import { Card, Input, Panel, ScrollArea, Toolbar, useTranslation } from '@dxos/react-ui';
+import { AppSurface, useObjectMenuItems } from '@dxos/app-toolkit/ui';
+import { Entity, Obj, Type } from '@dxos/echo';
+import { Card, Icon, IconButton, Input, Panel, ScrollArea, Toolbar, useTranslation } from '@dxos/react-ui';
+import { Masonry } from '@dxos/react-ui-masonry';
+import { Menu } from '@dxos/react-ui-menu';
+import { mx } from '@dxos/ui-theme';
 
+import { useRelatedObjects } from '#hooks';
 import { meta } from '#meta';
+import { Prompts } from '#types';
 
 export const RecordArticle = ({ role, subject }: AppSurface.ObjectArticleProps) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   // Obj.getType fails for database-registered (dynamic) schemas due to DXN mismatch;
   // fall back to typename query which matches TypeSchema.typename.
   const db = Obj.getDatabase(subject);
@@ -30,6 +35,9 @@ export const RecordArticle = ({ role, subject }: AppSurface.ObjectArticleProps)
       ? 'ph--cube--regular'
       : (Obj.getIcon(subject)?.icon ?? 'ph--circle-dashed--regular');
 
+  const related = useRelatedObjects(db, subject, { references: true, relations: true });
+  const singleColumn = related.length === 1;
+
   return (
     <Panel.Root role={role}>
       <Panel.Toolbar asChild>
@@ -40,11 +48,13 @@ export const RecordArticle = ({ role, subject }: AppSurface.ObjectArticleProps)
           <ScrollArea.Viewport classNames='p-4 space-y-4'>
             <Card.Root classNames='dx-card-max-width'>
               <Card.Header>
-                <Card.Icon icon={icon} />
+                <Card.Block>
+                  <Icon icon={icon} />
+                </Card.Block>
                 <Card.Title>{Obj.getLabel(subject, { fallback: 'typename' })}</Card.Title>
               </Card.Header>
               <Card.Body>
-                <Surface.Surface type={AppSurface.Card} data={{ subject }} limit={1} />
+                <Surface.Surface type={AppSurface.CardContent} data={{ subject }} limit={1} />
               </Card.Body>
             </Card.Root>
 
@@ -53,11 +63,60 @@ export const RecordArticle = ({ role, subject }: AppSurface.ObjectArticleProps)
               <Input.Root>
                 <Input.Label>{t('related-actions.label')}</Input.Label>
               </Input.Root>
-              <Surface.Surface role='prompts' data={{ subject }} limit={1} />
+              <Surface.Surface type={Prompts} data={{ subject, attendableId: subject.id }} limit={1} />
             </div>
+
+            {related.length > 0 && (
+              <div
+                className={mx('dx-expander flex flex-col gap-form-gap', singleColumn ? 'dx-card-max-width' : 'w-full')}
+              >
+                <Input.Root>
+                  <Input.Label>{t('related-objects.label')}</Input.Label>
+                </Input.Root>
+                <Masonry.Root Tile={ObjectCard} columns={singleColumn ? 1 : undefined}>
+                  <Masonry.Content>
+                    <Masonry.Viewport items={related} />
+                  </Masonry.Content>
+                </Masonry.Root>
+              </div>
+            )}
           </ScrollArea.Viewport>
         </ScrollArea.Root>
       </Panel.Content>
     </Panel.Root>
   );
 };
+
+const ObjectCard = ({ data: subject, classNames }: { data: Entity.Unknown; classNames?: string }) => {
+  const { t } = useTranslation(meta.profile.key);
+  const data = useMemo(() => ({ subject }), [subject]);
+  const icon = Entity.getIcon(subject)?.icon ?? 'ph--circle-dashed--regular';
+  const menuItems = useObjectMenuItems(subject);
+
+  return (
+    <Menu.Root>
+      <Card.Root classNames={classNames}>
+        <Card.Header>
+          <Card.Block>
+            <Icon icon={icon} />
+          </Card.Block>
+          <Card.Title>{Entity.getLabel(subject, { fallback: 'typename' })}</Card.Title>
+          <Card.Block end>
+            <Menu.Trigger asChild disabled={!menuItems?.length}>
+              <IconButton
+                iconOnly
+                variant='ghost'
+                icon='ph--dots-three-vertical--regular'
+                label={t('more-actions.label')}
+              />
+            </Menu.Trigger>
+            <Menu.Content items={menuItems} />
+          </Card.Block>
+        </Card.Header>
+        <Card.Body>
+          <Surface.Surface type={AppSurface.CardContent} data={data} limit={1} />
+        </Card.Body>
+      </Card.Root>
+    </Menu.Root>
+  );
+};

package/src/containers/RelatedArticle/RelatedArticle.tsx

@@ -7,14 +7,13 @@ import React, { useMemo } from 'react';
 import { Surface } from '@dxos/app-framework/ui';
 import { AppSurface, useObjectMenuItems } from '@dxos/app-toolkit/ui';
 import { Entity, Obj } from '@dxos/echo';
-import { Card, Panel, Toolbar, useTranslation } from '@dxos/react-ui';
+import { Card, Icon, IconButton, Panel, Toolbar, useTranslation } from '@dxos/react-ui';
 import { Masonry } from '@dxos/react-ui-masonry';
 import { Menu } from '@dxos/react-ui-menu';
 
 import { useRelatedObjects } from '#hooks';
 import { meta } from '#meta';
 
-// TODO(burdon): Companion type.
 export type RelatedArticleProps = Pick<
   AppSurface.ObjectArticleProps<Obj.Unknown, {}, Obj.Unknown>,
   'role' | 'companionTo'
@@ -31,7 +30,7 @@ export const RelatedArticle = ({ role, companionTo }: RelatedArticleProps) => {
           <Toolbar.Root />
         </Panel.Toolbar>
         <Panel.Content asChild>
-          <Masonry.Content classNames='p-2' centered>
+          <Masonry.Content centered>
             <Masonry.Viewport items={items} />
           </Masonry.Content>
         </Panel.Content>
@@ -42,7 +41,7 @@ export const RelatedArticle = ({ role, companionTo }: RelatedArticleProps) => {
 
 /** Masonry tile renderer for a related entity. */
 const ObjectCard = ({ data: subject, classNames }: { data: Entity.Unknown; classNames?: string }) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const data = useMemo(() => ({ subject }), [subject]);
   const icon = Entity.getIcon(subject)?.icon ?? 'ph--circle-dashed--regular';
 
@@ -53,20 +52,24 @@ const ObjectCard = ({ data: subject, classNames }: { data: Entity.Unknown; class
     <Menu.Root>
       <Card.Root classNames={classNames}>
         <Card.Header>
-          <Card.Icon icon={icon} />
+          <Card.Block>
+            <Icon icon={icon} />
+          </Card.Block>
           <Card.Title>{Entity.getLabel(subject, { fallback: 'typename' })}</Card.Title>
-          <Menu.Trigger asChild disabled={!menuItems?.length}>
-            <Toolbar.IconButton
-              iconOnly
-              variant='ghost'
-              icon='ph--dots-three-vertical--regular'
-              label={t('more-actions.label')}
-            />
-          </Menu.Trigger>
-          <Menu.Content items={menuItems} />
+          <Card.Block end>
+            <Menu.Trigger asChild disabled={!menuItems?.length}>
+              <IconButton
+                iconOnly
+                variant='ghost'
+                icon='ph--dots-three-vertical--regular'
+                label={t('more-actions.label')}
+              />
+            </Menu.Trigger>
+            <Menu.Content items={menuItems} />
+          </Card.Block>
         </Card.Header>
         <Card.Body>
-          <Surface.Surface type={AppSurface.Card} data={data} limit={1} />
+          <Surface.Surface type={AppSurface.CardContent} data={data} limit={1} />
         </Card.Body>
       </Card.Root>
     </Menu.Root>

package/src/containers/RenamePopover/RenamePopover.tsx

@@ -0,0 +1,125 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { Entity, Obj } from '@dxos/echo';
+import { log } from '@dxos/log';
+import { type Space, isSpace } from '@dxos/react-client/echo';
+import { Input, useTranslation } from '@dxos/react-ui';
+
+import { meta } from '#meta';
+
+export type RenameCallback = { initialValue: string; onRename: (name: string) => void };
+export type RenameSubject = Space | Entity.Unknown | RenameCallback;
+
+const isRenameCallback = (subject: RenameSubject): subject is RenameCallback =>
+  typeof (subject as RenameCallback).onRename === 'function';
+
+const getName = (subject: RenameSubject): string => {
+  if (isRenameCallback(subject)) {
+    return subject.initialValue;
+  }
+  return (isSpace(subject) ? subject.properties.name : Entity.getLabel(subject)) ?? '';
+};
+
+const setName = (subject: RenameSubject, name: string): void => {
+  if (isRenameCallback(subject)) {
+    subject.onRename(name);
+  } else if (isSpace(subject)) {
+    Obj.update(subject.properties, (properties) => {
+      properties.name = name;
+    });
+  } else {
+    Entity.update(subject, () => Entity.setLabel(subject, name));
+  }
+};
+
+export type RenamePopoverProps = { subject: RenameSubject };
+
+// TODO(wittjosiah): Move RenamePopover, RenameSubject, RenameCallback, and RENAME_POPOVER to @dxos/app-toolkit
+//   so any plugin can use the rename popover without depending on plugin-space.
+
+/**
+ * Inline rename popover anchored to a navtree row. Commits on Enter or when dismissed; Escape cancels.
+ */
+export const RenamePopover = ({ subject }: RenamePopoverProps) => {
+  const { t } = useTranslation(meta.profile.key);
+  const space = !isRenameCallback(subject) && isSpace(subject);
+  const { invokePromise } = useOperationInvoker();
+  const [name, setNameState] = useState(() => getName(subject));
+
+  // Commit the latest value when the popover is dismissed (Enter, click-outside, or blur), unless cancelled.
+  const nameRef = useRef(name);
+  nameRef.current = name;
+  const initialNameRef = useRef(name);
+  const cancelledRef = useRef(false);
+  // Enter commits then closes, which unmounts and runs the dismissal cleanup; guard against a duplicate write.
+  const committedRef = useRef(false);
+
+  const write = useCallback(() => {
+    try {
+      if (!cancelledRef.current && nameRef.current !== initialNameRef.current) {
+        setName(subject, nameRef.current);
+      }
+    } catch (err) {
+      log.error('Failed to rename', { err });
+    }
+  }, [subject]);
+
+  const commit = useCallback(() => {
+    if (!committedRef.current) {
+      committedRef.current = true;
+      write();
+    }
+  }, [write]);
+
+  // Commit the latest value on dismissal (click-outside/blur) when the component unmounts, unless Enter
+  // already committed or Escape cancelled. This must not set committedRef: under StrictMode the mount-time
+  // setup/cleanup/setup cycle runs this cleanup before any interaction, and flipping the guard there would
+  // suppress the real Enter commit.
+  useEffect(
+    () => () => {
+      if (!committedRef.current) {
+        write();
+      }
+    },
+    [write],
+  );
+
+  const close = useCallback(() => {
+    void invokePromise(LayoutOperation.UpdatePopover, { anchorId: '', state: false });
+  }, [invokePromise]);
+
+  return (
+    <div className='p-2'>
+      <Input.Root>
+        <Input.Label srOnly>{t(space ? 'space-name.label' : 'object-name.label')}</Input.Label>
+        <Input.TextInput
+          autoFocus
+          value={name}
+          placeholder={t(space ? 'unnamed-space.label' : 'object.placeholder')}
+          data-testid='spacePlugin.rename.input'
+          onChange={({ target: { value } }) => setNameState(value)}
+          onFocus={(event) => event.target.select()}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') {
+              commit();
+              close();
+            } else if (event.key === 'Escape') {
+              // Own the dismissal so it does not also bubble to the deck popover's escape handler,
+              // whose divergent teardown leaves stale state that makes the next open flicker.
+              event.preventDefault();
+              event.stopPropagation();
+              cancelledRef.current = true;
+              close();
+            }
+          }}
+        />
+      </Input.Root>
+    </div>
+  );
+};

package/src/containers/RenamePopover/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export { RenamePopover as default } from './RenamePopover';
+export type { RenameCallback, RenamePopoverProps, RenameSubject } from './RenamePopover';

package/src/containers/SchemaContainer/SchemaContainer.tsx

@@ -8,32 +8,36 @@ import { AppSurface } from '@dxos/app-toolkit/ui';
 import { Type } from '@dxos/echo';
 import { type Space } from '@dxos/react-client/echo';
 import { useTranslation } from '@dxos/react-ui';
-import { Settings } from '@dxos/react-ui-form';
+import { Form } from '@dxos/react-ui-form';
 import { mx } from '@dxos/ui-theme';
 
 import { meta } from '#meta';
 
 export const SchemaContainer = ({ space }: AppSurface.SpaceArticleProps) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const types = useQuerySpaceTypes(space);
 
   return (
-    <Settings.Viewport>
-      <Settings.Section title={t('schema-verbose.label')} description={t('schema.description')}>
-        <div
-          className={mx([
-            'grid md:col-span-2 grid-cols-subgrid gap-trim-sm items-center',
-            '*:first:mt-0! *:last:mb-0! px-trim-md py-trim-md',
-            'border border-separator rounded-md',
-          ])}
-        >
-          {types.length === 0 && <div className='text-center py-4'>{t('no-schemas-found.message')}</div>}
-          {types.map((type) => (
-            <div key={type.id}>{Type.getTypename(type)}</div>
-          ))}
-        </div>
-      </Settings.Section>
-    </Settings.Viewport>
+    <Form.Root variant='settings'>
+      <Form.Viewport scroll>
+        <Form.Content>
+          <Form.Section title={t('schema-verbose.label')} description={t('schema.description')}>
+            <div
+              className={mx([
+                'grid md:col-span-2 grid-cols-subgrid gap-trim-sm items-center',
+                '*:first:mt-0! *:last:mb-0! px-trim-md py-trim-md',
+                'border border-separator rounded-md',
+              ])}
+            >
+              {types.length === 0 && <div className='text-center py-4'>{t('no-schemas-found.message')}</div>}
+              {types.map((type) => (
+                <div key={type.id}>{Type.getTypename(type)}</div>
+              ))}
+            </div>
+          </Form.Section>
+        </Form.Content>
+      </Form.Viewport>
+    </Form.Root>
   );
 };
 

package/src/containers/SpaceHomeArticle/SpaceHomeArticle.tsx

@@ -0,0 +1,100 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+
+import { Surface } from '@dxos/app-framework/ui';
+import { type AppSurface, useAppGraph } from '@dxos/app-toolkit/ui';
+import { useActionRunner } from '@dxos/plugin-graph';
+import { Column, Panel, ScrollArea } from '@dxos/react-ui';
+import {
+  type ActionExecutor,
+  type ActionGraphProps,
+  Menu,
+  MenuBuilder,
+  graphActions,
+  useMenuBuilder,
+} from '@dxos/react-ui-menu';
+
+import { meta } from '#meta';
+import { SpaceHomeContent, SpaceHomePinBottom } from '#types';
+
+export type SpaceHomeArticleProps = AppSurface.SpaceArticleProps;
+
+/**
+ * Per-space Home article shell. Owns only the chrome: a toolbar sourced from graph actions
+ * contributed with `disposition: 'toolbar'` (e.g. Start tour / Hide Welcome from plugin-support),
+ * and a Column layout that delegates its body to surface contributors:
+ *
+ * - `space-home-content`: scrollable region (Welcome panel, recent-objects masonry, starter prompts).
+ * - `space-home-pin-bottom`: pinned region (assistant prompt), capped at one contributor.
+ *
+ * The Space is read from `data.subject` (the Home node carries the Space as its data).
+ */
+export const SpaceHomeArticle = ({ role, attendableId, space }: SpaceHomeArticleProps) => {
+  const { actions, onAction } = useMenuActions(attendableId);
+
+  return (
+    <Panel.Root role={role}>
+      <Menu.Root {...actions} attendableId={attendableId} onAction={onAction}>
+        <Panel.Toolbar asChild>
+          <Menu.Toolbar />
+        </Panel.Toolbar>
+      </Menu.Root>
+      <Panel.Content asChild>
+        <Column.Root style={{ gridTemplateRows: 'minmax(0,1fr) auto' }}>
+          <ScrollArea.Root orientation='vertical' centered padding>
+            <ScrollArea.Viewport>
+              <div className='dx-document flex flex-col gap-4 pb-12'>
+                <Surface.Surface type={SpaceHomeContent} data={{ space }} />
+              </div>
+            </ScrollArea.Viewport>
+          </ScrollArea.Root>
+          <Column.Center classNames='dx-document pb-4'>
+            <Surface.Surface type={SpaceHomePinBottom} data={{ space }} limit={1} />
+          </Column.Center>
+        </Column.Root>
+      </Panel.Content>
+    </Panel.Root>
+  );
+};
+
+//
+// Hooks
+//
+
+/**
+ * Builds the toolbar from contributed graph actions for the Home node. Actions opt into the
+ * toolbar via `disposition: 'toolbar'`; the Home shell contributes none itself, so the toolbar
+ * is empty unless another plugin (e.g. plugin-support's tour/welcome actions) contributes.
+ */
+const useMenuActions = (
+  attendableId?: string,
+): { actions: ReturnType<typeof useMenuBuilder>; onAction: ActionExecutor } => {
+  const { graph } = useAppGraph();
+  const runAction = useActionRunner();
+
+  const menuActions = useMenuBuilder(
+    (get): ActionGraphProps => {
+      if (!attendableId) {
+        return MenuBuilder.make().build();
+      }
+      return MenuBuilder.make()
+        .subgraph(
+          graphActions(graph, get, attendableId, { filter: (action) => action.properties.disposition === 'toolbar' }),
+        )
+        .build();
+    },
+    [graph, attendableId],
+  );
+
+  const onAction: ActionExecutor = useCallback(
+    (action) => {
+      void runAction(action, { caller: meta.profile.key });
+    },
+    [runAction],
+  );
+
+  return { actions: menuActions, onAction };
+};

package/src/containers/SpaceHomeArticle/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export { SpaceHomeArticle as default } from './SpaceHomeArticle';