@dxos/plugin-magazine 0.0.0

package/src/capabilities/routine-templates.ts

@@ -0,0 +1,16 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capability } from '@dxos/app-framework';
+import { RoutineCapabilities } from '@dxos/plugin-routine';
+
+import { magazineCuration } from '../templates/magazine-curation';
+
+export default Capability.makeModule(
+  Effect.fnUntraced(function* () {
+    return [Capability.contributes(RoutineCapabilities.Template, magazineCuration)];
+  }),
+);

package/src/capabilities/skill-definition.ts

@@ -0,0 +1,14 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capability } from '@dxos/app-framework';
+import { AppCapabilities } from '@dxos/app-toolkit';
+
+import { MagazineSkill } from '#skills';
+
+const skillDefinition = () => Effect.succeed([Capability.contributes(AppCapabilities.SkillDefinition, MagazineSkill)]);
+
+export default skillDefinition;

package/src/components/PostContent/PostContent.test.ts

@@ -0,0 +1,81 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { describe, expect, test } from 'vitest';
+
+import { dedupeImagesInMarkdown } from './PostContent';
+
+describe('dedupeImagesInMarkdown', () => {
+  test('strips an image whose URL matches the hero imageUrl', () => {
+    const heroUrl = 'https://example.com/hero.jpg';
+    const md = `Some intro paragraph.
+
+![Photo](${heroUrl})
+
+More body text.`;
+    const out = dedupeImagesInMarkdown(md, [heroUrl]);
+    expect(out).not.toContain(heroUrl);
+    expect(out).toContain('Some intro paragraph.');
+    expect(out).toContain('More body text.');
+  });
+
+  test('strips a second occurrence of the same image inside the body', () => {
+    const url = 'https://example.com/photo.jpg';
+    const md = `![A](${url})
+
+Paragraph.
+
+![A again](${url})`;
+    const out = dedupeImagesInMarkdown(md, []);
+    // Only one image markdown tag should remain.
+    const matches = out.match(/!\[[^\]]*\]\([^)]*\)/g) ?? [];
+    expect(matches).toHaveLength(1);
+    expect(out).toContain('Paragraph.');
+  });
+
+  test('strips a duplicate <img> HTML tag inside the body', () => {
+    const url = 'https://example.com/photo.jpg';
+    const md = `<img src="${url}" alt="A" />
+
+Body.
+
+<img src="${url}" alt="B" />`;
+    const out = dedupeImagesInMarkdown(md, []);
+    const matches = out.match(/<img\b[^>]*>/gi) ?? [];
+    expect(matches).toHaveLength(1);
+    expect(out).toContain('Body.');
+  });
+
+  test('leaves distinct images alone', () => {
+    const md = `![A](https://example.com/a.jpg)
+
+![B](https://example.com/b.jpg)`;
+    const out = dedupeImagesInMarkdown(md, []);
+    expect(out).toContain('https://example.com/a.jpg');
+    expect(out).toContain('https://example.com/b.jpg');
+  });
+
+  test('handles markdown image with title attribute', () => {
+    const url = 'https://example.com/p.jpg';
+    const md = `![alt](${url} "Caption text")\n\n![alt2](${url})`;
+    const out = dedupeImagesInMarkdown(md, []);
+    const matches = out.match(/!\[[^\]]*\]\([^)]*\)/g) ?? [];
+    expect(matches).toHaveLength(1);
+  });
+
+  test('hero match dedupes against both Markdown and HTML occurrences', () => {
+    const heroUrl = 'https://example.com/hero.jpg';
+    const md = `<img src="${heroUrl}" />\n\n![also hero](${heroUrl})\n\nReal body.`;
+    const out = dedupeImagesInMarkdown(md, [heroUrl]);
+    expect(out).not.toContain(heroUrl);
+    expect(out).toContain('Real body.');
+  });
+
+  test('ignores undefined entries in `excluded`', () => {
+    const url = 'https://example.com/img.jpg';
+    const md = `![Only image](${url})`;
+    const out = dedupeImagesInMarkdown(md, [undefined]);
+    expect(out).toContain(url);
+  });
+});

package/src/components/PostContent/PostContent.tsx

@@ -0,0 +1,111 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { useMemo } from 'react';
+
+import { ScrollArea } from '@dxos/react-ui';
+import { composable } from '@dxos/react-ui';
+import { MarkdownView } from '@dxos/react-ui-markdown';
+
+import { usePostContentAtom } from '#atoms';
+import { Subscription } from '#types';
+
+import { formatDate, getImageUrl } from '../../util';
+
+export type PostContentProps = {
+  /** Post to render. */
+  post: Subscription.Post;
+  /** Additional metadata, such as feed or source domain, rendered between author and published date. */
+  metadata?: string[];
+};
+
+/**
+ * Strips images from a markdown string whose URL is already on the
+ * `excluded` list, AND drops any image that appears more than once. The
+ * hero `post.imageUrl` is added to `excluded` by the caller so the
+ * extracted article body doesn't re-render the same image immediately
+ * below the hero. Captures both Markdown image syntax (`![alt](url
+ * "title")`) and inline HTML `<img>` tags that defuddle sometimes
+ * leaves behind.
+ */
+export const dedupeImagesInMarkdown = (markdown: string, excluded: ReadonlyArray<string | undefined>): string => {
+  const seen = new Set<string>();
+  for (const url of excluded) {
+    if (url) {
+      seen.add(url);
+    }
+  }
+
+  // Markdown image: `![alt](url)` or `![alt](url "title")`.
+  const markdownImg = /!\[[^\]]*\]\(\s*([^)\s]+)(?:\s+"[^"]*")?\s*\)/g;
+  // HTML image: `<img ... src="url" ...>`.
+  const htmlImg = /<img\b[^>]*\bsrc=["']([^"']+)["'][^>]*>/gi;
+
+  const dedupe = (input: string, regex: RegExp): string =>
+    input.replace(regex, (match, url) => {
+      if (typeof url !== 'string') {
+        return match;
+      }
+      if (seen.has(url)) {
+        return '';
+      }
+      seen.add(url);
+      return match;
+    });
+
+  return dedupe(dedupe(markdown, markdownImg), htmlImg);
+};
+
+/** Returns true if the markdown contains at least one Markdown or inline HTML image. */
+export const contentHasImage = (markdown: string): boolean =>
+  /!\[[^\]]*\]\(\s*[^)\s]+/.test(markdown) || /<img\b[^>]*\bsrc=["'][^"']+["']/i.test(markdown);
+
+/**
+ * Shared presentational layout for an article-style post.
+ * Render order: title → hero image → Markdown body (subscription contentFeed
+ * entry for this Post id, falling back to `post.description`) → meta line
+ * (author · …extra · published).
+ */
+export const PostContent = composable<HTMLDivElement, PostContentProps>(
+  ({ post, metadata = [], ...props }, forwardedRef) => {
+    const meta = [post.author, ...metadata, formatDate(post.published)].filter(Boolean).join(' · ');
+    const title = post.title;
+    const postContent = usePostContentAtom(post);
+    const imageUrl = getImageUrl(post, postContent);
+    const fetchedText = postContent?.text;
+
+    // Drop duplicate images from the article body — and remove any image
+    // that matches the hero `imageUrl` so it doesn't appear stacked immediately
+    // below the hero. Falls through to `post.description` when content
+    // hasn't been fetched yet.
+    const content = useMemo(() => {
+      const source = fetchedText || post.description || '';
+      if (!source) {
+        return '';
+      }
+      return dedupeImagesInMarkdown(source, [imageUrl]);
+    }, [fetchedText, post.description, imageUrl]);
+
+    // Suppress the hero when the article body already carries imagery — RSS feeds often
+    // duplicate the lead image inside `<content>` under a different URL than `imageUrl`,
+    // and rendering both stacks the same picture twice (see e.g. Guardian galleries).
+    const showHero = useMemo(
+      () => Boolean(imageUrl?.startsWith('http')) && !contentHasImage(content),
+      [imageUrl, content],
+    );
+
+    return (
+      <ScrollArea.Root {...props} orientation='vertical' thin ref={forwardedRef}>
+        <ScrollArea.Viewport classNames='flex flex-col gap-3 p-4'>
+          {title && <h1 className='text-xl font-semibold'>{title}</h1>}
+          {showHero && <img src={imageUrl} alt='' className='rounded w-full object-cover max-h-72' loading='lazy' />}
+          {content && <MarkdownView content={content} />}
+          {meta && <div className='text-xs text-subdued'>{meta}</div>}
+        </ScrollArea.Viewport>
+      </ScrollArea.Root>
+    );
+  },
+);
+
+PostContent.displayName = 'PostContent';

package/src/components/PostContent/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export * from './PostContent';

package/src/components/PostStack/PostStack.stories.tsx

@@ -0,0 +1,39 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useMemo } from 'react';
+
+import { withAttention } from '@dxos/react-ui-attention/testing';
+import { withMosaic } from '@dxos/react-ui-mosaic/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { generatePosts } from '#testing';
+
+import { PostStack, type PostStackProps } from './PostStack';
+
+const DefaultStory = (props: Omit<PostStackProps, 'id' | 'posts'>) => {
+  const posts = useMemo(() => generatePosts(100), []);
+  return <PostStack id='story' posts={posts} {...props} />;
+};
+
+const meta: Meta<typeof DefaultStory> = {
+  title: 'plugins/plugin-magazine/components/PostStack',
+  component: DefaultStory,
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  decorators: [withTheme(), withLayout({ layout: 'column' }), withAttention(), withMosaic()],
+};
+
+export const Responsive: Story = {
+  decorators: [withTheme(), withLayout({ layout: 'column', classNames: 'w-[30rem]' }), withAttention(), withMosaic()],
+};

package/src/components/PostStack/PostStack.tsx

@@ -0,0 +1,151 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { type KeyboardEvent, forwardRef, useCallback, useMemo, useState } from 'react';
+
+import { Type } from '@dxos/echo';
+import { Card, Icon, ScrollArea, useTranslation } from '@dxos/react-ui';
+import { composable, composableProps } from '@dxos/react-ui';
+import { MarkdownView } from '@dxos/react-ui-markdown';
+import { Focus, Mosaic, type MosaicTileProps, useMosaicContainer } from '@dxos/react-ui-mosaic';
+
+import { Subscription } from '#types';
+
+export type PostStackAction = { type: 'current'; postId: string };
+
+export type PostStackActionHandler = (action: PostStackAction) => void;
+
+export type PostStackProps = {
+  id: string;
+  posts?: Subscription.Post[];
+  currentId?: string;
+  onAction?: PostStackActionHandler;
+};
+
+export const PostStack = composable<HTMLDivElement, PostStackProps>(
+  ({ posts = [], currentId, onAction, ...props }, forwardedRef) => {
+    const [viewport, setViewport] = useState<HTMLElement | null>(null);
+    const items = useMemo(() => posts.map((post) => ({ post, onAction })), [posts, onAction]);
+
+    const handleCurrentChange = useCallback(
+      (id: string | undefined) => {
+        if (id) {
+          onAction?.({ type: 'current', postId: id });
+        }
+      },
+      [onAction],
+    );
+
+    const handleKeyDown = useCallback((event: KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === 'Enter') {
+        event.preventDefault();
+        (document.activeElement as HTMLElement | null)?.click();
+      }
+    }, []);
+
+    return (
+      <Focus.Group asChild {...composableProps(props)} onKeyDown={handleKeyDown} ref={forwardedRef}>
+        <Mosaic.Container
+          asChild
+          withFocus
+          autoScroll={viewport}
+          currentId={currentId}
+          onCurrentChange={handleCurrentChange}
+        >
+          <ScrollArea.Root orientation='vertical' padding centered>
+            <ScrollArea.Viewport ref={setViewport}>
+              <Mosaic.VirtualStack
+                Tile={PostTile}
+                classNames='my-2'
+                gap={8}
+                items={items}
+                draggable={false}
+                getId={(item) => item.post.id}
+                getScrollElement={() => viewport}
+                estimateSize={() => 120}
+              />
+            </ScrollArea.Viewport>
+          </ScrollArea.Root>
+        </Mosaic.Container>
+      </Focus.Group>
+    );
+  },
+);
+
+PostStack.displayName = 'PostStack';
+
+type PostTileData = {
+  post: Subscription.Post;
+  onAction?: PostStackActionHandler;
+};
+
+type PostTileProps = Pick<MosaicTileProps<PostTileData>, 'data' | 'location' | 'current'>;
+
+const PostTile = forwardRef<HTMLDivElement, PostTileProps>(({ data, location, current }, forwardedRef) => {
+  const post = data?.post;
+  const { setCurrentId } = useMosaicContainer('PostTile');
+  const { t } = useTranslation(Type.getTypename(Subscription.Post));
+
+  const handleCurrentChange = useCallback(() => {
+    if (post) {
+      setCurrentId(post.id);
+    }
+  }, [post, setCurrentId]);
+
+  if (!post) {
+    return null;
+  }
+
+  const published = post.published ? new Date(post.published).toLocaleDateString() : undefined;
+
+  return (
+    <Mosaic.Tile asChild classNames='dx-hover dx-current' id={post.id} data={data} location={location}>
+      <Focus.Item asChild current={current} onCurrentChange={handleCurrentChange}>
+        <Card.Root ref={forwardedRef} fullWidth>
+          <Card.Header>
+            <Card.Block>
+              <Icon icon='ph--dot-outline--regular' />
+            </Card.Block>
+            <Card.Text classNames='truncate'>{post.title ?? t('post-title.placeholder')}</Card.Text>
+            {post.link && (
+              <Card.Block end>
+                <a href={post.link} target='_blank' rel='noreferrer' className='shrink-0'>
+                  <Icon icon='ph--arrow-square-out--regular' size={4} />
+                </a>
+              </Card.Block>
+            )}
+          </Card.Header>
+          <Card.Body>
+            {post.author && (
+              <Card.Row>
+                <Card.Block>
+                  <Icon icon='ph--user--regular' />
+                </Card.Block>
+                <Card.Text variant='description'>{post.author}</Card.Text>
+              </Card.Row>
+            )}
+            {(post.description || post.content) && (
+              <Card.Row>
+                <MarkdownView
+                  content={post.description ?? post.content}
+                  classNames='line-clamp-5 text-sm text-description'
+                />
+              </Card.Row>
+            )}
+            {published && (
+              <Card.Row>
+                <Card.Block>
+                  <Icon icon='ph--calendar--regular' />
+                </Card.Block>
+                <Card.Text variant='description'>{published}</Card.Text>
+              </Card.Row>
+            )}
+          </Card.Body>
+        </Card.Root>
+      </Focus.Item>
+    </Mosaic.Tile>
+  );
+});
+
+PostTile.displayName = 'PostTile';

package/src/components/PostStack/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './PostStack';

package/src/components/SubscriptionStack/SubscriptionStack.stories.tsx

@@ -0,0 +1,52 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useMemo, useState } from 'react';
+
+import { random } from '@dxos/random';
+import { withAttention } from '@dxos/react-ui-attention/testing';
+import { withMosaic } from '@dxos/react-ui-mosaic/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { Subscription } from '#types';
+
+import { SubscriptionStack, type SubscriptionStackAction } from './SubscriptionStack';
+
+const generateFeeds = (count: number): Subscription.Subscription[] =>
+  Array.from({ length: count }, () =>
+    Subscription.makeSubscription({
+      name: random.company.name() + ' Blog',
+      url: random.internet.url(),
+      description: random.lorem.sentence(),
+    }),
+  );
+
+const DefaultStory = () => {
+  const feeds = useMemo(() => generateFeeds(10), []);
+  const [currentId, setCurrentId] = useState<string>();
+
+  const handleAction = (action: SubscriptionStackAction) => {
+    if (action.type === 'current') {
+      setCurrentId(action.feedId);
+    }
+  };
+
+  return <SubscriptionStack id='story' feeds={feeds} currentId={currentId} onAction={handleAction} />;
+};
+
+const meta: Meta<typeof DefaultStory> = {
+  title: 'plugins/plugin-magazine/components/SubscriptionStack',
+  component: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'column' }), withAttention(), withMosaic()],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/SubscriptionStack/SubscriptionStack.tsx

@@ -0,0 +1,161 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { type KeyboardEvent, forwardRef, useCallback, useMemo, useState } from 'react';
+
+import { Card, Icon, ScrollArea } from '@dxos/react-ui';
+import { composable, composableProps } from '@dxos/react-ui';
+import { Focus, Mosaic, type MosaicTileProps, useMosaicContainer } from '@dxos/react-ui-mosaic';
+
+import { type Subscription } from '#types';
+
+export type SubscriptionStackAction =
+  | { type: 'current'; feedId: string }
+  | { type: 'sync'; feedId: string }
+  | { type: 'delete'; feedId: string };
+
+export type SubscriptionStackActionHandler = (action: SubscriptionStackAction) => void;
+
+//
+// SubscriptionStack
+//
+
+export type SubscriptionStackProps = {
+  id?: string;
+  feeds?: Subscription.Subscription[];
+  currentId?: string;
+  onAction?: SubscriptionStackActionHandler;
+};
+
+export const SubscriptionStack = composable<HTMLDivElement, SubscriptionStackProps>(
+  ({ feeds = [], currentId, onAction, ...props }, forwardedRef) => {
+    const [viewport, setViewport] = useState<HTMLElement | null>(null);
+
+    // TODO(burdon): Either sort or make draggable.
+    const items = useMemo(() => feeds.map((feed) => ({ feed, onAction })), [feeds, onAction]);
+
+    const handleCurrentChange = useCallback(
+      (id: string | undefined) => {
+        if (id) {
+          onAction?.({ type: 'current', feedId: id });
+        }
+      },
+      [onAction],
+    );
+
+    const handleKeyDown = useCallback((event: KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === 'Enter') {
+        event.preventDefault();
+        (document.activeElement as HTMLElement | null)?.click();
+      }
+    }, []);
+
+    return (
+      <Focus.Group asChild {...composableProps(props)} onKeyDown={handleKeyDown} ref={forwardedRef}>
+        <Mosaic.Container
+          asChild
+          withFocus
+          autoScroll={viewport}
+          currentId={currentId}
+          onCurrentChange={handleCurrentChange}
+        >
+          <ScrollArea.Root orientation='vertical' padding centered>
+            <ScrollArea.Viewport ref={setViewport}>
+              <Mosaic.VirtualStack
+                Tile={SubscriptionTile}
+                classNames='my-2'
+                gap={8}
+                items={items}
+                draggable={false}
+                getId={(item) => item.feed.id}
+                getScrollElement={() => viewport}
+                estimateSize={() => 100}
+              />
+            </ScrollArea.Viewport>
+          </ScrollArea.Root>
+        </Mosaic.Container>
+      </Focus.Group>
+    );
+  },
+);
+
+SubscriptionStack.displayName = 'SubscriptionStack';
+
+//
+// SubscriptionTile
+//
+
+const icons: Record<Subscription.FeedType, { icon: string; className?: string }> = {
+  'standard-site': {
+    icon: 'ph--article--regular',
+    className: 'text-sky-500',
+  },
+  'rss': {
+    icon: 'ph--rss--regular',
+    className: 'text-green-500',
+  },
+  'bluesky': {
+    icon: 'ph--butterfly--regular',
+    className: 'text-blue-500',
+  },
+};
+
+type SubscriptionTileData = {
+  feed: Subscription.Subscription;
+  onAction?: SubscriptionStackActionHandler;
+};
+
+type SubscriptionTileProps = Pick<MosaicTileProps<SubscriptionTileData>, 'data' | 'location' | 'current'>;
+
+const SubscriptionTile = forwardRef<HTMLDivElement, SubscriptionTileProps>(
+  ({ data, location, current }, forwardedRef) => {
+    const { feed, onAction } = data;
+    const { setCurrentId } = useMosaicContainer('SubscriptionTile');
+    const { icon, className: iconClassName } = icons[feed.type ?? 'rss'] || icons.rss;
+
+    const handleCurrentChange = useCallback(() => {
+      setCurrentId(feed.id);
+    }, [feed.id, setCurrentId]);
+
+    const menuItems = useMemo(
+      () => [
+        { label: 'Sync', onClick: () => onAction?.({ type: 'sync', feedId: feed.id }) },
+        { label: 'Delete', onClick: () => onAction?.({ type: 'delete', feedId: feed.id }) },
+      ],
+      [feed.id, onAction],
+    );
+
+    return (
+      <Mosaic.Tile asChild classNames='dx-hover dx-current' id={feed.id} data={data} location={location}>
+        <Focus.Item asChild current={current} onCurrentChange={handleCurrentChange}>
+          <Card.Root ref={forwardedRef}>
+            <Card.Header>
+              <Card.Block>
+                <Icon icon={icon} classNames={iconClassName} />
+              </Card.Block>
+              <Card.Title>{feed.name ?? 'Untitled feed'}</Card.Title>
+              <Card.Menu items={menuItems} />
+            </Card.Header>
+            <Card.Body>
+              {/* {feed.url && (
+                <Card.Row>
+                  <Card.Text classNames='truncate' variant='description'>
+                    {feed.url}
+                  </Card.Text>
+                </Card.Row>
+              )} */}
+              {feed.description && (
+                <Card.Row>
+                  <Card.Text variant='description'>{feed.description}</Card.Text>
+                </Card.Row>
+              )}
+            </Card.Body>
+          </Card.Root>
+        </Focus.Item>
+      </Mosaic.Tile>
+    );
+  },
+);
+
+SubscriptionTile.displayName = 'SubscriptionTile';

package/src/components/SubscriptionStack/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './SubscriptionStack';

package/src/components/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './PostContent';
+export * from './PostStack';
+export * from './SubscriptionStack';