@dxos/plugin-magazine 0.0.0

package/src/atoms/magazine-posts.ts

@@ -0,0 +1,70 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { Atom, useAtomValue } from '@effect-atom/atom-react';
+import * as Data from 'effect/Data';
+
+import { Obj } from '@dxos/echo';
+
+import { type Magazine, type Subscription } from '../types';
+import { publishedTimestamp } from '../util/date';
+import { postTagsAtom } from './post-tags';
+
+/**
+ * Tile filter mode. Mutually exclusive — `default` shows everything except archived,
+ * `starred` filters to starred posts, `archived` shows only archived posts.
+ */
+export type MagazineView = 'default' | 'starred' | 'archived';
+
+/**
+ * Ordered Posts referenced by the Magazine, derived directly from the `magazine.posts` refs — no
+ * query. Fires when the refs array changes (membership/order) or when a ref resolves. Resolving each
+ * ref here, rather than a `reference('posts').from(Scope.space(...))` query, avoids the cross-feed
+ * fan-out that returned each curated Post once per feed scope.
+ */
+const magazinePostsAtom = Atom.family((magazine: Magazine.Magazine) =>
+  Atom.make<Subscription.Post[]>((get) => {
+    const refs = get(Obj.atomProperty(magazine, 'posts')) ?? [];
+    const posts = refs.map((ref) => get(ref.atom)).filter((post): post is Subscription.Post => Boolean(post));
+    return [...posts].sort((postA, postB) => publishedTimestamp(postB.published) - publishedTimestamp(postA.published));
+  }),
+);
+
+/**
+ * Whether a Post is visible under a given view. Depends ONLY on the Post's tag slice + view, so
+ * read-state changes never wake it (and effect-atom dedupes the boolean). Keyed by a value-equal
+ * `Data.tuple([post, view])` rather than a nested family — the intermediate of a nested family is
+ * only weakly held and could be GC'd out from under its mounted leaf atoms.
+ */
+const postVisibilityAtom = Atom.family((key: readonly [Subscription.Post, MagazineView]) =>
+  Atom.make<boolean>((get) => {
+    const [post, view] = key;
+    const { starred, archived } = get(postTagsAtom(post));
+    switch (view) {
+      case 'archived':
+        return archived;
+      case 'starred':
+        return !archived && starred;
+      default:
+        return !archived;
+    }
+  }),
+);
+
+/**
+ * Ordered, view-filtered Posts for a Magazine. Re-runs on membership change OR a Post crossing the
+ * view's filter boundary (star/archive); never on read-state changes. Keyed by a value-equal
+ * `Data.tuple([magazine, view])`.
+ */
+export const visibleMagazinePostsAtom = Atom.family((key: readonly [Magazine.Magazine, MagazineView]) =>
+  Atom.make<Subscription.Post[]>((get) => {
+    const [magazine, view] = key;
+    const posts = get(magazinePostsAtom(magazine));
+    return posts.filter((post) => get(postVisibilityAtom(Data.tuple(post, view))));
+  }),
+);
+
+/** Ordered, view-filtered Posts for a Magazine. */
+export const useVisibleMagazinePosts = (magazine: Magazine.Magazine, view: MagazineView): Subscription.Post[] =>
+  useAtomValue(visibleMagazinePostsAtom(Data.tuple(magazine, view)));

package/src/atoms/post-content.ts

@@ -0,0 +1,34 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { Atom, useAtomValue } from '@effect-atom/atom-react';
+
+import { Obj } from '@dxos/echo';
+
+import { Subscription } from '../types';
+
+/** This Post's fetched body (newest {@link Subscription.PostContent} entry), or undefined. */
+export const postContentAtom = Atom.family((post: Subscription.Post) =>
+  Atom.make<Subscription.PostContent | undefined>((get) => {
+    const ref = post.source;
+    if (!ref) {
+      return undefined;
+    }
+    const subscription = get(ref.atom);
+    if (!subscription) {
+      return undefined;
+    }
+    const db = Obj.getDatabase(subscription);
+    const query = Subscription.queryPostContentForPost(subscription, post);
+    if (!db || !query) {
+      return undefined;
+    }
+    const entries = get(db.query(query).atom);
+    return Subscription.pickLatestPostContent(entries);
+  }).pipe(Atom.keepAlive),
+);
+
+/** This Post's fetched body, reactively. */
+export const usePostContentAtom = (post: Subscription.Post): Subscription.PostContent | undefined =>
+  useAtomValue(postContentAtom(post));

package/src/atoms/post-curation.ts

@@ -0,0 +1,36 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { Atom, useAtomValue } from '@effect-atom/atom-react';
+import * as Data from 'effect/Data';
+
+import { StateMap } from '@dxos/schema';
+
+import { Magazine, type Subscription } from '../types';
+
+/** Per-Post magazine-scoped curation slice (agent-written snippet/hero image). */
+export type CurationSlice = { snippet: string | undefined; imageUrl: string | undefined };
+
+const EMPTY_CURATION_SLICE: CurationSlice = { snippet: undefined, imageUrl: undefined };
+
+/**
+ * This Post's magazine-scoped curation slice (snippet/imageUrl), sliced off the Magazine's
+ * `postState`. Fires only when this Post's slice changes — sibling Posts' curation mutations are
+ * discarded without propagating. Keyed by a value-equal `Data.tuple([post, magazine])`.
+ */
+export const postCurationAtom = Atom.family((key: readonly [Subscription.Post, Magazine.Magazine]) =>
+  Atom.make<CurationSlice>((get) => {
+    const [post, magazine] = key;
+    const stateMap = get(magazine.postState.atom);
+    if (!stateMap) {
+      return EMPTY_CURATION_SLICE;
+    }
+    const state = get(StateMap.atom<Magazine.PostState>(stateMap, post.id));
+    return { snippet: state.snippet, imageUrl: state.imageUrl };
+  }).pipe(Atom.keepAlive),
+);
+
+/** This Post's magazine-scoped curation slice. */
+export const usePostCuration = (post: Subscription.Post, magazine: Magazine.Magazine): CurationSlice =>
+  useAtomValue(postCurationAtom(Data.tuple(post, magazine)));

package/src/atoms/post-display.ts

@@ -0,0 +1,59 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { Atom, useAtomValue } from '@effect-atom/atom-react';
+import * as Data from 'effect/Data';
+
+import { Obj } from '@dxos/echo';
+
+import { type Magazine, type Subscription } from '../types';
+import { getImageUrl, getSnippet } from '../util/post-content';
+import { postCurationAtom } from './post-curation';
+import { postReadAtom } from './post-read';
+import { postTagsAtom } from './post-tags';
+
+/** Aggregate per-Post display data folded from the Post + its source Subscription's per-Post slice. */
+export type MagazinePostData = {
+  post: Obj.Snapshot<Subscription.Post>;
+  feedName: string | undefined;
+  read: boolean;
+  starred: boolean;
+  snippet: string;
+  imageUrl: string | undefined;
+};
+
+/**
+ * Aggregate display data for one tile within a magazine. Fires only on this Post's
+ * read/star/feed-name/curation changes. Keyed by a value-equal `Data.tuple([post, magazine])`.
+ *
+ * Snippet and imageUrl precedence: agent-written postState > RSS-derived description fallback.
+ */
+export const postDisplayAtom = Atom.family((key: readonly [Subscription.Post, Magazine.Magazine]) =>
+  Atom.make<MagazinePostData>((get) => {
+    const [post, magazine] = key;
+    const snapshot = get(Obj.atom(post));
+    const ref = post.source;
+    const subscription = ref ? get(ref.atom) : undefined;
+    // `name`/`url` via property atoms — fire only on name/url change (e.g. after first sync).
+    const feedName = subscription
+      ? get(Obj.atomProperty(subscription, 'name')) || get(Obj.atomProperty(subscription, 'url'))
+      : undefined;
+    const { readAt } = get(postReadAtom(post));
+    const { starred } = get(postTagsAtom(post));
+    // Agent-written snippet/imageUrl (granular per-Post slice); fall back to description derivation.
+    const curation = get(postCurationAtom(Data.tuple(post, magazine)));
+    return {
+      post: snapshot,
+      feedName,
+      read: readAt !== undefined,
+      starred,
+      snippet: curation.snippet ?? getSnippet(snapshot),
+      imageUrl: curation.imageUrl ?? getImageUrl(snapshot),
+    };
+  }).pipe(Atom.keepAlive),
+);
+
+/** Aggregate per-Post display data for a magazine tile. */
+export const useMagazinePostData = (post: Subscription.Post, magazine: Magazine.Magazine): MagazinePostData =>
+  useAtomValue(postDisplayAtom(Data.tuple(post, magazine)));

package/src/atoms/post-read.ts

@@ -0,0 +1,40 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { Atom, useAtomValue } from '@effect-atom/atom-react';
+
+import { StateMap } from '@dxos/schema';
+
+import { Subscription } from '../types';
+
+/** Per-Post read slice. */
+export type ReadSlice = { readAt: string | undefined };
+
+const EMPTY_READ_SLICE: ReadSlice = { readAt: undefined };
+
+/**
+ * This Post's `readAt`, sliced off its source Subscription's `postState`. Fires only when this
+ * Post's `readAt` changes — sibling Posts' mutations are discarded without propagating.
+ */
+export const postReadAtom = Atom.family((post: Subscription.Post) =>
+  Atom.make<ReadSlice>((get) => {
+    const ref = post.source;
+    if (!ref) {
+      return EMPTY_READ_SLICE;
+    }
+    const subscription = get(ref.atom);
+    if (!subscription) {
+      return EMPTY_READ_SLICE;
+    }
+    const stateMap = get(subscription.postState.atom);
+    if (!stateMap) {
+      return EMPTY_READ_SLICE;
+    }
+    const state = get(StateMap.atom<Subscription.PostState>(stateMap, post.id));
+    return { readAt: state.readAt };
+  }).pipe(Atom.keepAlive),
+);
+
+/** This Post's read slice. */
+export const useReadState = (post: Subscription.Post): ReadSlice => useAtomValue(postReadAtom(post));

package/src/atoms/post-tags.ts

@@ -0,0 +1,66 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { Atom, useAtomValue } from '@effect-atom/atom-react';
+
+import { type Database, Filter, Obj, Tag } from '@dxos/echo';
+import { TagIndex } from '@dxos/schema';
+
+import { Subscription } from '../types';
+
+/** Per-Post tag slice (star/archive membership). */
+export type TagSlice = { starred: boolean; archived: boolean };
+
+const EMPTY_TAG_SLICE: TagSlice = { starred: false, archived: false };
+const EMPTY_TAG_URIS = { starredUri: undefined, archivedUri: undefined } as const;
+
+/** Resolve the uri of a system Tag by foreign key (mirrors `useSystemTags`). */
+const uriForTag = (tags: readonly Tag.Tag[], key: { source: string; id: string }): string | undefined => {
+  const match = tags.find((tag) => Obj.getKeys(tag, key.source).some((foreignKey) => foreignKey.id === key.id));
+  return match ? Obj.getURI(match).toString() : undefined;
+};
+
+/**
+ * Resolved uris of the `starred` / `archived` system Tags, keyed by database. Fires only when the
+ * Tag set changes (rare — on first star/archive). Shared by every per-Post tag slice.
+ */
+const tagUrisAtom = Atom.family((db: Database.Database) =>
+  db.query(Filter.type(Tag.Tag)).atom.pipe(
+    Atom.map((tags) => ({
+      starredUri: uriForTag(tags, Subscription.SYSTEM_TAGS.starred.key),
+      archivedUri: uriForTag(tags, Subscription.SYSTEM_TAGS.archived.key),
+    })),
+  ),
+);
+
+/**
+ * This Post's `{ starred, archived }`, sliced off its source Subscription's `tags`. Fires only
+ * when this Post's tag membership flips — sibling Posts' tag mutations are discarded without
+ * propagating. Re-initialises its tag subscription when tag uris change (first star ever in the space).
+ */
+export const postTagsAtom = Atom.family((post: Subscription.Post) =>
+  Atom.make<TagSlice>((get) => {
+    const ref = post.source;
+    if (!ref) {
+      return EMPTY_TAG_SLICE;
+    }
+    const subscription = get(ref.atom);
+    if (!subscription) {
+      return EMPTY_TAG_SLICE;
+    }
+    const tagIndex = get(subscription.tags.atom);
+    if (!tagIndex) {
+      return EMPTY_TAG_SLICE;
+    }
+    const db = Obj.getDatabase(subscription);
+    const { starredUri, archivedUri } = db ? get(tagUrisAtom(db)) : EMPTY_TAG_URIS;
+    return {
+      starred: get(TagIndex.atom(tagIndex, post.id, starredUri)),
+      archived: get(TagIndex.atom(tagIndex, post.id, archivedUri)),
+    };
+  }).pipe(Atom.keepAlive),
+);
+
+/** This Post's tag slice (star/archive). */
+export const useTagState = (post: Subscription.Post): TagSlice => useAtomValue(postTagsAtom(post));

package/src/capabilities/app-graph-builder.ts

@@ -0,0 +1,125 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Atom } from '@effect-atom/atom-react';
+import * as Effect from 'effect/Effect';
+import * as Option from 'effect/Option';
+
+import { Capability } from '@dxos/app-framework';
+import { AppCapabilities, AppNode, AppNodeMatcher, Paths, TypeSection } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/compute';
+import { Obj, Ref, Type } from '@dxos/echo';
+import { AttentionCapabilities } from '@dxos/plugin-attention';
+import { GraphBuilder } from '@dxos/plugin-graph';
+import { SpaceOperation } from '@dxos/plugin-space';
+import { linkedSegment, selectionAspect } from '@dxos/react-ui-attention';
+
+import { meta } from '#meta';
+import { FeedOperation } from '#types';
+import { Magazine, Subscription } from '#types';
+
+import { getMagazinesPath } from '../paths';
+
+export default Capability.makeModule(
+  Effect.fnUntraced(function* () {
+    const viewState = yield* Capability.get(AttentionCapabilities.ViewState);
+    const selectedId = Atom.family((nodeId: string) =>
+      Atom.make((get) => {
+        const selection = get(viewState.atom(selectionAspect, nodeId));
+        return selection.mode === 'single' ? selection.id : undefined;
+      }),
+    );
+
+    const extensions = yield* Effect.all([
+      // Magazine type section in the content group.
+      TypeSection.createTypeSectionExtension(Magazine.Magazine, {
+        match: AppNodeMatcher.whenNavTreeGroup(Paths.GroupTypes.content),
+        createObject: (space) =>
+          Operation.invoke(SpaceOperation.OpenCreateObject, {
+            target: space.db,
+            typename: Type.getTypename(Magazine.Magazine),
+            targetNodeId: getMagazinesPath(space.db.spaceId),
+          }),
+      }),
+
+      // Feeds as children under each Magazine node.
+      GraphBuilder.createExtension({
+        id: 'magazineFeeds',
+        match: (node) => (Magazine.instanceOf(node.data) ? Option.some(node.data as Magazine.Magazine) : Option.none()),
+        connector: (magazine, get) => {
+          const db = Obj.getDatabase(magazine);
+          if (!db) {
+            return Effect.succeed([]);
+          }
+          const feedRefs = get(Obj.atomProperty(magazine, 'feeds'));
+          const feeds = feedRefs
+            .map((ref) => get(ref.atom))
+            .filter((feed): feed is Subscription.Subscription => Subscription.instanceOf(feed));
+          return Effect.succeed(
+            feeds
+              .map((feed) => AppNode.makeObject({ get, db, object: feed }))
+              .filter((node): node is NonNullable<typeof node> => node !== null),
+          );
+        },
+      }),
+
+      // Companion panel: resolve the selected Post under a Magazine node.
+      GraphBuilder.createExtension({
+        id: 'magazinePost',
+        match: (node) =>
+          Magazine.instanceOf(node.data)
+            ? Option.some({ magazine: node.data as Magazine.Magazine, nodeId: node.id })
+            : Option.none(),
+        connector: (matched, get) => {
+          const { magazine, nodeId } = matched;
+          const postId = get(selectedId(nodeId));
+          let post: Subscription.Post | undefined;
+          if (postId) {
+            for (const ref of magazine.posts) {
+              const resolved = get(ref.atom) as Subscription.Post | undefined;
+              if (resolved?.id === postId) {
+                post = resolved;
+                break;
+              }
+            }
+          }
+          return Effect.succeed([
+            AppNode.makeCompanion({
+              id: linkedSegment('post'),
+              label: ['post-companion.label', { ns: meta.profile.key }],
+              icon: 'ph--article--regular',
+              data: post,
+            }),
+          ]);
+        },
+      }),
+
+      // Actions on each Subscription.Subscription node.
+      GraphBuilder.createExtension({
+        id: 'feedActions',
+        match: (node) =>
+          Subscription.instanceOf(node.data) ? Option.some(node.data as Subscription.Subscription) : Option.none(),
+        actions: (feed) =>
+          Effect.succeed([
+            {
+              id: 'sync',
+              data: () =>
+                Operation.invoke(
+                  FeedOperation.SyncFeed,
+                  { feed: Ref.make(feed) },
+                  { spaceId: Obj.getDatabase(feed)?.spaceId },
+                ),
+              properties: {
+                label: ['sync-feed.label', { ns: meta.profile.key }],
+                icon: 'ph--arrows-clockwise--regular',
+                disposition: 'list-item',
+              },
+            },
+          ]),
+      }),
+    ]);
+
+    return Capability.contributes(AppCapabilities.AppGraphBuilder, extensions);
+  }),
+);

package/src/capabilities/create-object.ts

@@ -0,0 +1,127 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+import * as Schema from 'effect/Schema';
+
+import { Capability } from '@dxos/app-framework';
+import { Operation } from '@dxos/compute';
+import { Obj, Ref, Type } from '@dxos/echo';
+import { SpaceOperation } from '@dxos/plugin-space';
+import { SpaceCapabilities } from '@dxos/plugin-space';
+import { AutofillAnnotation, OptionsLookupAnnotation, autofill, optionsLookup } from '@dxos/react-ui-form';
+
+import { CreateSubscription, FeedOperation, Magazine, Subscription } from '#types';
+
+import {
+  browserCorsProxy,
+  fetchRss,
+  listStandardSitePublications,
+  searchStandardSiteHandles,
+} from '../operations/sources';
+import { getMagazinesPath } from '../paths';
+
+const StandardSiteCreate = Schema.Struct({
+  ...CreateSubscription.StandardSiteCreateBase.fields,
+  // Handle is a combobox: typing queries known handles (typeahead); the typed text stays selectable.
+  handle: CreateSubscription.StandardSiteCreateBase.fields.handle.pipe(
+    OptionsLookupAnnotation.set(
+      optionsLookup<CreateSubscription.StandardSiteValues>()(
+        ['handle'],
+        ({ handle }) =>
+          searchStandardSiteHandles(handle ?? '', { corsProxy: browserCorsProxy() }).pipe(
+            Effect.map((suggestions) =>
+              suggestions.map((suggestion) => ({
+                value: suggestion.handle,
+                label: suggestion.handle,
+                secondaryLabel: suggestion.displayName,
+              })),
+            ),
+          ),
+        { combobox: true },
+      ),
+    ),
+  ),
+  // Publication options are looked up from the entered `handle`.
+  publication: CreateSubscription.StandardSiteCreateBase.fields.publication.pipe(
+    OptionsLookupAnnotation.set(
+      optionsLookup<CreateSubscription.StandardSiteValues>()(['handle'], ({ handle }) =>
+        CreateSubscription.isHandle(handle)
+          ? listStandardSitePublications(handle, { corsProxy: browserCorsProxy() }).pipe(
+              Effect.map((publications) =>
+                publications.map((publication) => ({
+                  value: publication.site,
+                  label: publication.name ?? publication.url ?? publication.site,
+                })),
+              ),
+              Effect.orElseSucceed(() => []),
+            )
+          : Effect.succeed([]),
+      ),
+    ),
+  ),
+});
+
+const RssCreate = Schema.Struct({
+  ...CreateSubscription.RssCreateBase.fields,
+  // Name is pre-filled from the feed title once the `url` is a valid feed URL.
+  name: Schema.optional(
+    Schema.String.pipe(
+      AutofillAnnotation.set(
+        autofill<CreateSubscription.RssValues>()(['url'], ({ url }) =>
+          CreateSubscription.isUrl(url)
+            ? fetchRss(url, { corsProxy: browserCorsProxy() }).pipe(
+                Effect.map((result) => result.feed.name),
+                Effect.orElseSucceed(() => undefined),
+              )
+            : Effect.succeed(undefined),
+        ),
+      ),
+    ).annotations({ title: 'Name' }),
+  ),
+});
+
+const CreateSubscriptionSchema = Schema.Union(StandardSiteCreate, RssCreate);
+
+export default Capability.makeModule(
+  Effect.fnUntraced(function* () {
+    return [
+      Capability.contributes(SpaceCapabilities.CreateObjectEntry, {
+        id: Type.getTypename(Subscription.Subscription),
+        inputSchema: CreateSubscriptionSchema,
+        createObject: (props, options) =>
+          Effect.gen(function* () {
+            const object = CreateSubscription.makeSubscriptionFromCreate(props);
+            const result = yield* Operation.invoke(SpaceOperation.AddObject, {
+              object,
+              target: options.target,
+              targetNodeId: options.targetNodeId,
+            });
+            // Auto-sync after creation if URL is provided.
+            if (object.url) {
+              yield* Operation.schedule(
+                FeedOperation.SyncFeed,
+                { feed: Ref.make(object) },
+                { spaceId: Obj.getDatabase(object)?.spaceId },
+              );
+            }
+            return result;
+          }),
+      }),
+      Capability.contributes(SpaceCapabilities.CreateObjectEntry, {
+        id: Type.getTypename(Magazine.Magazine),
+        inputSchema: Magazine.CreateMagazineSchema,
+        createObject: (props, options) =>
+          Effect.gen(function* () {
+            const magazine = Magazine.make(props);
+            return yield* Operation.invoke(SpaceOperation.AddObject, {
+              object: magazine,
+              target: options.target,
+              targetNodeId: getMagazinesPath(options.db.spaceId),
+            });
+          }),
+      }),
+    ];
+  }),
+);

package/src/capabilities/index.ts

@@ -0,0 +1,17 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capability } from '@dxos/app-framework';
+import type { OperationHandlerSet } from '@dxos/compute';
+
+export const AppGraphBuilder = Capability.lazy('AppGraphBuilder', () => import('./app-graph-builder'));
+export const RoutineTemplates = Capability.lazy('RoutineTemplates', () => import('./routine-templates'));
+export const SkillDefinition = Capability.lazy('SkillDefinition', () => import('./skill-definition'));
+export const CreateObject = Capability.lazy('CreateObject', () => import('./create-object'));
+export const OperationHandler = Capability.lazy<OperationHandlerSet.OperationHandlerSet>(
+  'OperationHandler',
+  () => import('./operation-handler'),
+);
+export const ReactSurface = Capability.lazy('ReactSurface', () => import('./react-surface'));
+export const NavigationResolver = Capability.lazy('NavigationResolver', () => import('./navigation-resolver'));

package/src/capabilities/navigation-resolver.ts

@@ -0,0 +1,21 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capability } from '@dxos/app-framework';
+import { AppCapabilities, Paths, TypeSection } from '@dxos/app-toolkit';
+
+import { Magazine } from '#types';
+
+export default Capability.makeModule(
+  Effect.fnUntraced(function* () {
+    return [
+      Capability.contributes(
+        AppCapabilities.NavigationPathResolver,
+        TypeSection.createTypeSectionPathResolver(Magazine.Magazine, { groupId: Paths.GroupSegments.content }),
+      ),
+    ];
+  }),
+);

package/src/capabilities/operation-handler.ts

@@ -0,0 +1,16 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import type { OperationHandlerSet } from '@dxos/compute';
+
+import { MagazineOperationHandlerSet } from '#operations';
+
+export default Capability.makeModule<OperationHandlerSet.OperationHandlerSet>(
+  Effect.fnUntraced(function* () {
+    return Capability.contributes(Capabilities.OperationHandler, MagazineOperationHandlerSet);
+  }),
+);

package/src/capabilities/react-surface.tsx

@@ -0,0 +1,53 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+import React from 'react';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { Surface } from '@dxos/app-framework/ui';
+import { AppSurface } from '@dxos/app-toolkit/ui';
+import { Position } from '@dxos/util';
+
+import { FeedArticle, FeedProperties, MagazineArticle, PostArticle, PostCard } from '#containers';
+import { Magazine, Subscription } from '#types';
+
+export default Capability.makeModule(() =>
+  Effect.succeed(
+    Capability.contributes(Capabilities.ReactSurface, [
+      Surface.create({
+        id: 'magazineArticle',
+        filter: AppSurface.object(AppSurface.Article, Magazine.Magazine),
+        component: ({ data, role }) => (
+          <MagazineArticle role={role} subject={data.subject} attendableId={data.attendableId} />
+        ),
+      }),
+      Surface.create({
+        id: 'feedArticle',
+        filter: AppSurface.object(AppSurface.Article, Subscription.Subscription),
+        component: ({ data, role }) => (
+          <FeedArticle role={role} subject={data.subject} attendableId={data.attendableId} />
+        ),
+      }),
+      Surface.create({
+        id: 'postArticle',
+        filter: AppSurface.object(AppSurface.Article, Subscription.Post),
+        component: ({ data, role }) => (
+          <PostArticle role={role} subject={data.subject} attendableId={data.attendableId} />
+        ),
+      }),
+      Surface.create({
+        id: 'postCard',
+        position: Position.first,
+        filter: AppSurface.object(AppSurface.CardContent, Subscription.Post),
+        component: ({ data, role }) => <PostCard role={role} subject={data.subject} />,
+      }),
+      Surface.create({
+        id: 'feedProperties',
+        filter: AppSurface.object(AppSurface.ObjectProperties, Subscription.Subscription),
+        component: ({ data }) => <FeedProperties subject={data.subject} />,
+      }),
+    ]),
+  ),
+);