@dxos/plugin-space 0.10.0 → 0.11.1

package/src/containers/ObjectCardStack/ObjectCardStack.tsx

@@ -2,69 +2,70 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { forwardRef, useState } from 'react';
+import React, { forwardRef, useId, useMemo, useState } from 'react';
 
-import { Filter, Obj, type View } from '@dxos/echo';
-import { useQuery, useType } from '@dxos/react-client/echo';
+import { type Database, Filter, Type } from '@dxos/echo';
+import { useQuery } from '@dxos/echo-react';
 import { Card, Message, Panel, ScrollArea, Toolbar, useTranslation } from '@dxos/react-ui';
 import { useSelection } from '@dxos/react-ui-attention';
+import { type DndContainerHandler } from '@dxos/react-ui-dnd';
 import { ObjectForm } from '@dxos/react-ui-form';
 import { Mosaic } from '@dxos/react-ui-mosaic';
-import { getTypeURIFromQuery } from '@dxos/schema';
 import { isNonNullable } from '@dxos/util';
 
 import { meta } from '#meta';
 
 export type ObjectCardStackProps = {
-  view: View.View;
+  db: Database.Database;
+  type: Type.AnyEntity;
   objectId: string;
 };
 
 /**
  * @deprecated Use Mosaic Board components.
  */
-export const ObjectCardStack = forwardRef<HTMLDivElement, ObjectCardStackProps>(({ objectId, view }, forwardedRef) => {
-  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);
+export const ObjectCardStack = forwardRef<HTMLDivElement, ObjectCardStackProps>(
+  ({ objectId, db, type }, forwardedRef) => {
+    const { t } = useTranslation(meta.profile.key);
 
-  const queriedObjects = useQuery(db, type ? Filter.type(type) : Filter.nothing());
-  const selectedRows = useSelection(objectId, 'multi');
-  const selectedObjects = selectedRows.map((id) => queriedObjects.find((obj) => obj.id === id)).filter(isNonNullable);
+    const queriedObjects = useQuery(db, Filter.type(Type.getURI(type)));
+    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);
+    const [viewport, setViewport] = useState<HTMLElement | null>(null);
 
-  if (!type) {
-    return null;
-  }
+    // Per-instance discriminator so the same object opened twice doesn't collide in the Mosaic registry.
+    const instanceId = useId();
+    const eventHandler = useMemo<DndContainerHandler>(
+      () => ({ id: `object-card-stack:${objectId}:${instanceId}`, canDrop: () => true }),
+      [objectId, instanceId],
+    );
 
-  return (
-    <Panel.Root className='dx-document' ref={forwardedRef}>
-      <Panel.Toolbar asChild>
-        <Toolbar.Root />
-      </Panel.Toolbar>
-      <Panel.Content>
-        {selectedObjects.length === 0 ? (
-          <Message.Root>
-            <Message.Title>{t('row-details-no-selection.label')}</Message.Title>
-          </Message.Root>
-        ) : (
-          <Mosaic.Root>
-            <Mosaic.Container
-              asChild
-              orientation='vertical'
-              autoScroll={viewport}
-              eventHandler={{ id: objectId, canDrop: () => true }}
-            >
-              <ScrollArea.Root orientation='vertical'>
+    return (
+      <Panel.Root ref={forwardedRef}>
+        <Panel.Toolbar asChild>
+          <Toolbar.Root />
+        </Panel.Toolbar>
+        <Panel.Content>
+          {selectedObjects.length === 0 ? (
+            <Message.Root>
+              <Message.Content>
+                <Message.Title>{t('row-details-no-selection.label')}</Message.Title>
+              </Message.Content>
+            </Message.Root>
+          ) : (
+            <Mosaic.Container asChild orientation='vertical' autoScroll={viewport} eventHandler={eventHandler}>
+              <ScrollArea.Root orientation='vertical' centered padding>
                 <ScrollArea.Viewport ref={setViewport}>
                   <Mosaic.Stack
+                    classNames='py-trim-md gap-trim-md'
+                    draggable={false}
                     items={selectedObjects}
                     getId={(obj) => obj.id}
                     Tile={({ ...props }) => (
                       <Mosaic.Tile {...props}>
-                        <Card.Root>
+                        {/* The card's only content is a form, so it takes the form gutter rather than the card's chrome inset. */}
+                        <Card.Root fullWidth gutter='sm' classNames='pb-form-gap'>
                           <ObjectForm object={props.data} type={type} />
                         </Card.Root>
                       </Mosaic.Tile>
@@ -73,9 +74,11 @@ export const ObjectCardStack = forwardRef<HTMLDivElement, ObjectCardStackProps>(
                 </ScrollArea.Viewport>
               </ScrollArea.Root>
             </Mosaic.Container>
-          </Mosaic.Root>
-        )}
-      </Panel.Content>
-    </Panel.Root>
-  );
-});
+          )}
+        </Panel.Content>
+      </Panel.Root>
+    );
+  },
+);
+
+ObjectCardStack.displayName = 'ObjectCardStack';

package/src/containers/RecordArticle/RecordArticle.stories.tsx

@@ -10,11 +10,12 @@ import { Capability } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { AppCapabilities } from '@dxos/app-toolkit';
 import { Filter } from '@dxos/echo';
+import { useQuery } from '@dxos/echo-react';
 import { ClientPlugin } from '@dxos/plugin-client/testing';
 import { PreviewPlugin } from '@dxos/plugin-preview/testing';
 import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
 import { random } from '@dxos/random';
-import { useQuery, useSpaces } from '@dxos/react-client/echo';
+import { useSpaces } from '@dxos/react-client/echo';
 import { Loading, withLayout } from '@dxos/react-ui/testing';
 import { createObjectFactory } from '@dxos/schema/testing';
 import { Organization, Person } from '@dxos/types';

package/src/containers/RecordArticle/RecordArticle.tsx

@@ -5,7 +5,7 @@
 import React, { useMemo } from 'react';
 
 import { Surface } from '@dxos/app-framework/ui';
-import { AppSurface, useObjectMenuItems } from '@dxos/app-toolkit/ui';
+import { AppSurface, useCardPivot, 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';
@@ -46,7 +46,7 @@ export const RecordArticle = ({ role, subject }: AppSurface.ObjectArticleProps)
       <Panel.Content asChild>
         <ScrollArea.Root orientation='vertical'>
           <ScrollArea.Viewport classNames='p-4 space-y-4'>
-            <Card.Root classNames='dx-card-max-width'>
+            <Card.Root fullWidth>
               <Card.Header>
                 <Card.Block>
                   <Icon icon={icon} />
@@ -91,11 +91,13 @@ const ObjectCard = ({ data: subject, classNames }: { data: Entity.Unknown; class
   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);
+  // The card menu renders in a portal; resolve the origin plank from the card element instead.
+  const [cardRef, pivotId] = useCardPivot();
+  const menuItems = useObjectMenuItems(subject, pivotId);
 
   return (
     <Menu.Root>
-      <Card.Root classNames={classNames}>
+      <Card.Root ref={cardRef} classNames={classNames}>
         <Card.Header>
           <Card.Block>
             <Icon icon={icon} />
@@ -120,3 +122,5 @@ const ObjectCard = ({ data: subject, classNames }: { data: Entity.Unknown; class
     </Menu.Root>
   );
 };
+
+RecordArticle.displayName = 'RecordArticle';

package/src/containers/RelatedArticle/RelatedArticle.tsx

@@ -5,7 +5,7 @@
 import React, { useMemo } from 'react';
 
 import { Surface } from '@dxos/app-framework/ui';
-import { AppSurface, useObjectMenuItems } from '@dxos/app-toolkit/ui';
+import { AppSurface, useCardPivot, useObjectMenuItems } from '@dxos/app-toolkit/ui';
 import { Entity, Obj } from '@dxos/echo';
 import { Card, Icon, IconButton, Panel, Toolbar, useTranslation } from '@dxos/react-ui';
 import { Masonry } from '@dxos/react-ui-masonry';
@@ -45,12 +45,14 @@ const ObjectCard = ({ data: subject, classNames }: { data: Entity.Unknown; class
   const data = useMemo(() => ({ subject }), [subject]);
   const icon = Entity.getIcon(subject)?.icon ?? 'ph--circle-dashed--regular';
 
+  // The card menu renders in a portal; resolve the origin plank from the card element instead.
+  const [cardRef, pivotId] = useCardPivot();
   // TODO(burdon): BUG: Includes item itself.
-  const menuItems = useObjectMenuItems(subject);
+  const menuItems = useObjectMenuItems(subject, pivotId);
 
   return (
     <Menu.Root>
-      <Card.Root classNames={classNames}>
+      <Card.Root ref={cardRef} classNames={classNames}>
         <Card.Header>
           <Card.Block>
             <Icon icon={icon} />
@@ -75,3 +77,5 @@ const ObjectCard = ({ data: subject, classNames }: { data: Entity.Unknown; class
     </Menu.Root>
   );
 };
+
+RelatedArticle.displayName = 'RelatedArticle';

package/src/containers/RenamePopover/RenamePopover.tsx

@@ -123,3 +123,5 @@ export const RenamePopover = ({ subject }: RenamePopoverProps) => {
     </div>
   );
 };
+
+RenamePopover.displayName = 'RenamePopover';

package/src/containers/SchemaContainer/SchemaContainer.tsx

@@ -2,17 +2,18 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 
 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 { Form } from '@dxos/react-ui-form';
 import { mx } from '@dxos/ui-theme';
 
 import { meta } from '#meta';
 
+import { useQuerySpaceTypes } from './use-query-space-types';
+
 export const SchemaContainer = ({ space }: AppSurface.SpaceArticleProps) => {
   const { t } = useTranslation(meta.profile.key);
   const types = useQuerySpaceTypes(space);
@@ -41,18 +42,4 @@ export const SchemaContainer = ({ space }: AppSurface.SpaceArticleProps) => {
   );
 };
 
-/**
- * Subscribe to and retrieve all types from a space's registry.
- */
-export const useQuerySpaceTypes = (space: Space): Type.AnyEntity[] => {
-  const [types, setTypes] = useState<Type.AnyEntity[]>(() => [...space.db.graph.registry.list().filter(Type.isType)]);
-
-  useEffect(() => {
-    setTypes([...space.db.graph.registry.list().filter(Type.isType)]);
-    return space.db.graph.registry.changed.on(() => {
-      setTypes([...space.db.graph.registry.list().filter(Type.isType)]);
-    });
-  }, [space]);
-
-  return types;
-};
+SchemaContainer.displayName = 'SchemaContainer';

package/src/containers/SchemaContainer/use-query-space-types.ts

@@ -0,0 +1,28 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useEffect, useState } from 'react';
+
+import { Type } from '@dxos/echo';
+import { type Space } from '@dxos/react-client/echo';
+
+// Kept out of `SchemaContainer.tsx`: react-refresh only fast-refreshes a module whose
+// exports are all components, so values exported beside them force a full page reload on
+// every edit.
+
+/**
+ * Subscribe to and retrieve all types from a space's registry.
+ */
+export const useQuerySpaceTypes = (space: Space): Type.AnyEntity[] => {
+  const [types, setTypes] = useState<Type.AnyEntity[]>(() => [...space.db.graph.registry.list().filter(Type.isType)]);
+
+  useEffect(() => {
+    setTypes([...space.db.graph.registry.list().filter(Type.isType)]);
+    return space.db.graph.registry.changed.on(() => {
+      setTypes([...space.db.graph.registry.list().filter(Type.isType)]);
+    });
+  }, [space]);
+
+  return types;
+};

package/src/containers/SpaceHomeArticle/SpaceHomeArticle.stories.tsx

@@ -0,0 +1,116 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import * as Schema from 'effect/Schema';
+import React from 'react';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { Surface } from '@dxos/app-framework/ui';
+import { AppCapabilities } from '@dxos/app-toolkit';
+import { useHomeVisibility } from '@dxos/app-toolkit/ui';
+import { Annotation, DXN, Obj, Type } from '@dxos/echo';
+import { LabelAnnotation } from '@dxos/echo/Annotation';
+import { ClientPlugin } from '@dxos/plugin-client/testing';
+import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
+import { useSpaces } from '@dxos/react-client/echo';
+import { Loading, withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { SpaceHomeDashboard, SpaceHomeRecent } from '#containers';
+import { translations } from '#translations';
+import { SpaceHomeContent } from '#types';
+
+import { SpaceHomeArticle } from './SpaceHomeArticle';
+
+class Task extends Type.makeObject<Task>(DXN.make('org.dxos.type.test.task', '0.1.0'))(
+  Schema.Struct({
+    name: Schema.optional(Schema.String),
+  }).pipe(LabelAnnotation.set(['name']), Annotation.IconAnnotation.set({ icon: 'ph--check-square--regular' })),
+) {}
+
+class Note extends Type.makeObject<Note>(DXN.make('org.dxos.type.test.note', '0.1.0'))(
+  Schema.Struct({
+    content: Schema.optional(Schema.String),
+  }).pipe(LabelAnnotation.set(['content']), Annotation.IconAnnotation.set({ icon: 'ph--note--regular' })),
+) {}
+
+const OBJECT_COUNT = 24;
+
+const DefaultStory = () => {
+  const spaces = useSpaces();
+  const space = spaces[spaces.length - 1];
+  if (!space) {
+    return <Loading />;
+  }
+
+  return <SpaceHomeArticle role='article' attendableId='story' space={space} />;
+};
+
+const meta = {
+  title: 'plugins/plugin-space/containers/SpaceHomeArticle',
+  render: DefaultStory,
+  decorators: [
+    withTheme(),
+    withLayout({ layout: 'fullscreen' }),
+    withPluginManager({
+      capabilities: [
+        Capability.contributes(AppCapabilities.Translations, translations),
+        // Registered types feed SpaceHomeRecent's type filter (normally via addSchemaModule).
+        Capability.contributes(AppCapabilities.Schema, [Task, Note]),
+        // Home-content contributors normally wired by the plugin's react-surface capability,
+        // including the per-section visibility gate + close affordance.
+        Capability.contributes(Capabilities.ReactSurface, [
+          Surface.create({
+            id: 'story.spaceHomeRecent',
+            filter: Surface.makeFilter(SpaceHomeContent),
+            component: ({ data }) => {
+              const { visible, hide } = useHomeVisibility(data.space, 'spaceHomeRecent');
+              return visible ? <SpaceHomeRecent space={data.space} onClose={hide} /> : null;
+            },
+          }),
+          Surface.create({
+            id: 'story.spaceHomeDashboard',
+            filter: Surface.makeFilter(SpaceHomeContent),
+            component: ({ data }) => {
+              const { visible, hide } = useHomeVisibility(data.space, 'spaceHomeDashboard');
+              return visible ? <SpaceHomeDashboard space={data.space} onClose={hide} /> : null;
+            },
+          }),
+        ]),
+      ],
+      plugins: [
+        ...corePlugins(),
+        StorybookPlugin({}),
+        ClientPlugin({
+          types: [Task, Note],
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              yield* Effect.promise(() => client.halo.createIdentity());
+              const space = yield* Effect.promise(() => client.spaces.create());
+              yield* Effect.promise(() => space.waitUntilReady());
+
+              for (let i = 0; i < OBJECT_COUNT; i++) {
+                space.db.add(
+                  i % 2 === 0
+                    ? Obj.make(Task, { name: `Task ${i + 1}` })
+                    : Obj.make(Note, { content: `Note ${i + 1}` }),
+                );
+              }
+            }),
+        }),
+      ],
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/containers/SpaceHomeArticle/SpaceHomeArticle.tsx

@@ -6,7 +6,7 @@ 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 { useActionRunner } from '@dxos/plugin-graph/hooks';
 import { Column, Panel, ScrollArea } from '@dxos/react-ui';
 import {
   type ActionExecutor,
@@ -14,6 +14,7 @@ import {
   Menu,
   MenuBuilder,
   graphActions,
+  isToolbarAction,
   useMenuBuilder,
 } from '@dxos/react-ui-menu';
 
@@ -24,7 +25,7 @@ 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),
+ * contributed with `disposition: 'toolbar'` (e.g. Start / 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).
@@ -81,9 +82,7 @@ const useMenuActions = (
         return MenuBuilder.make().build();
       }
       return MenuBuilder.make()
-        .subgraph(
-          graphActions(graph, get, attendableId, { filter: (action) => action.properties.disposition === 'toolbar' }),
-        )
+        .subgraph(graphActions(graph, get, attendableId, { filter: isToolbarAction }))
         .build();
     },
     [graph, attendableId],
@@ -98,3 +97,5 @@ const useMenuActions = (
 
   return { actions: menuActions, onAction };
 };
+
+SpaceHomeArticle.displayName = 'SpaceHomeArticle';

package/src/containers/SpaceHomeDashboard/SpaceHomeDashboard.stories.tsx

@@ -0,0 +1,99 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import * as Schema from 'effect/Schema';
+import React from 'react';
+
+import { Capability } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { AppCapabilities } from '@dxos/app-toolkit';
+import { Annotation, DXN, Obj, Type } from '@dxos/echo';
+import { LabelAnnotation } from '@dxos/echo/Annotation';
+import { ClientPlugin } from '@dxos/plugin-client/testing';
+import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
+import { useSpaces } from '@dxos/react-client/echo';
+import { Loading, withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '#translations';
+
+import { SpaceHomeDashboard, type SpaceStatId } from './SpaceHomeDashboard';
+
+class Task extends Type.makeObject<Task>(DXN.make('org.dxos.type.test.task', '0.1.0'))(
+  Schema.Struct({
+    name: Schema.optional(Schema.String),
+  }).pipe(LabelAnnotation.set(['name']), Annotation.IconAnnotation.set({ icon: 'ph--check-square--regular' })),
+) {}
+
+class Note extends Type.makeObject<Note>(DXN.make('org.dxos.type.test.note', '0.1.0'))(
+  Schema.Struct({
+    content: Schema.optional(Schema.String),
+  }).pipe(LabelAnnotation.set(['content']), Annotation.IconAnnotation.set({ icon: 'ph--note--regular' })),
+) {}
+
+const OBJECT_COUNT = 24;
+
+type StoryArgs = {
+  stats?: readonly SpaceStatId[];
+};
+
+const DefaultStory = ({ stats }: StoryArgs) => {
+  const spaces = useSpaces();
+  const space = spaces[spaces.length - 1];
+  if (!space) {
+    return <Loading />;
+  }
+
+  return <SpaceHomeDashboard space={space} stats={stats} />;
+};
+
+const meta = {
+  title: 'plugins/plugin-space/containers/SpaceHomeDashboard',
+  render: DefaultStory,
+  decorators: [
+    withTheme(),
+    withLayout({ layout: 'fullscreen', classNames: 'p-4' }),
+    withPluginManager({
+      capabilities: [Capability.contributes(AppCapabilities.Translations, translations)],
+      plugins: [
+        ...corePlugins(),
+        StorybookPlugin({}),
+        ClientPlugin({
+          types: [Task, Note],
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              yield* Effect.promise(() => client.halo.createIdentity());
+              const space = yield* Effect.promise(() => client.spaces.create());
+              yield* Effect.promise(() => space.waitUntilReady());
+
+              for (let i = 0; i < OBJECT_COUNT; i++) {
+                space.db.add(
+                  i % 2 === 0
+                    ? Obj.make(Task, { name: `Task ${i + 1}` })
+                    : Obj.make(Note, { content: `Note ${i + 1}` }),
+                );
+              }
+            }),
+        }),
+      ],
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+/** Subset of stat cards via the `stats` prop; the default renders all. */
+export const Subset: Story = {
+  args: {
+    stats: ['objects', 'members'],
+  },
+};

package/src/containers/SpaceHomeDashboard/SpaceHomeDashboard.tsx

@@ -0,0 +1,109 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { useAtomValue } from '@effect-atom/atom-react';
+import React, { useMemo } from 'react';
+
+import { HomeSection, usePluginManager } from '@dxos/app-framework/ui';
+import { Collection, Filter, Obj, Query } from '@dxos/echo';
+import { useQuery } from '@dxos/echo-react';
+import { type Space, useMembers } from '@dxos/react-client/echo';
+import { useTranslation } from '@dxos/react-ui';
+import { type ActivityDatum, Dashboard } from '@dxos/react-ui-dashboard';
+
+import { meta } from '#meta';
+
+const STAT_IDS = ['objects', 'types', 'collections', 'members', 'active-days', 'plugins'] as const;
+
+export type SpaceStatId = (typeof STAT_IDS)[number];
+
+type SpaceHomeDashboardProps = {
+  space?: Space;
+  /** Stat cards to render, in order; defaults to all. */
+  stats?: readonly SpaceStatId[];
+  onClose?: () => void;
+};
+
+/**
+ * Space stats and activity matrix for the Home article. Stats are derived from the object graph
+ * (counts of objects, distinct types, collections, members); the matrix buckets objects by the
+ * day they were last touched (`updatedAt`, falling back to `createdAt`).
+ *
+ * NOTE: per-object `updatedAt` only reflects the latest change, so the matrix undercounts busy
+ * days in the past.
+ * TODO(burdon): Richer stats need sources beyond the object graph:
+ *  - Edits per day: automerge change graph (echo-pipeline) aggregated into a daily histogram.
+ *  - Storage size / sync state: client diagnostics (`client.diagnostics()`) or SpaceSyncState.
+ *  - Relations count: needs a relations query (Query.select over relation types).
+ *  - Member activity / presence history: EDGE presence feed (only live viewers are exposed today).
+ */
+export const SpaceHomeDashboard = ({ space, stats = STAT_IDS, onClose }: SpaceHomeDashboardProps) => {
+  const { t } = useTranslation(meta.profile.key);
+
+  const query = useMemo(() => Query.select(Filter.everything()), []);
+  const members = useMembers(space?.key);
+
+  const manager = usePluginManager();
+  const core = useAtomValue(manager.core);
+  const enabled = useAtomValue(manager.enabled);
+  const plugins = useMemo(() => enabled.filter((id) => !core.includes(id)).length, [core, enabled]);
+
+  // TODO(burdon): Can we caches this?
+  const objects = useQuery(space ? space.db : undefined, query);
+  const { activity, values } = useMemo(() => {
+    const typenames = new Set<string>();
+    const days = new Set<string>();
+    let collections = 0;
+    const activity: ActivityDatum[] = [];
+    for (const object of objects) {
+      const typename = Obj.getTypename(object);
+      if (typename) {
+        typenames.add(typename);
+      }
+      if (Obj.instanceOf(Collection.Collection, object)) {
+        collections++;
+      }
+      const objectMeta = Obj.getMeta(object);
+      const timestamp = objectMeta.updatedAt ?? objectMeta.createdAt;
+      if (timestamp) {
+        const date = new Date(timestamp);
+        days.add(date.toDateString());
+        activity.push({ date, value: 1 });
+      }
+    }
+
+    const values: Record<SpaceStatId, number> = {
+      'objects': objects.length,
+      'types': typenames.size,
+      'collections': collections,
+      'members': members.length,
+      'active-days': days.size,
+      'plugins': plugins,
+    };
+
+    return { activity, values };
+  }, [objects, members, plugins]);
+
+  if (!space) {
+    return null;
+  }
+
+  return (
+    <HomeSection.Root>
+      <HomeSection.Header title={t('space-home.dashboard.heading')} onClose={onClose} />
+      <Dashboard.Stats>
+        {stats.map((id) => (
+          <Dashboard.Stat key={id}>
+            <Dashboard.StatLabel>{t(`space-home.dashboard.${id}.label`)}</Dashboard.StatLabel>
+            <Dashboard.StatValue value={values[id]} />
+          </Dashboard.Stat>
+        ))}
+      </Dashboard.Stats>
+      {/* Smaller cells so a full year fits the 40rem home column without horizontal scroll. */}
+      <Dashboard.Activity classNames='[--dx-dashboard-cell:0.75rem]' data={activity} endDate={new Date()} />
+    </HomeSection.Root>
+  );
+};
+
+SpaceHomeDashboard.displayName = 'SpaceHomeDashboard';

package/src/containers/SpaceHomeDashboard/index.ts

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