@dxos/plugin-magazine 0.10.0 → 0.11.1

package/dist/lib/chunk-MagazineArticle.mjs

@@ -0,0 +1,267 @@
+import { t as formatDate } from "./chunk-date.mjs";
+import { Obj, Ref } from "@dxos/echo";
+import * as Effect from "effect/Effect";
+import { EffectEx } from "@dxos/effect";
+import { meta } from "#meta";
+import { GraphPath, LayoutOperation } from "@dxos/app-toolkit";
+import { FeedOperation, Subscription } from "#types";
+import { useCallback, useContext, useEffect, useMemo } from "react";
+import { Card, Focus, Panel, SystemIconButton, useTranslation } from "@dxos/react-ui";
+import { useMagazinePostData, useVisibleMagazinePosts } from "#atoms";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Atom, RegistryContext, useAtomSet, useAtomValue } from "@effect-atom/atom-react";
+import { Attention, useSelection } from "@dxos/react-ui-attention";
+import { useOperationInvoker } from "@dxos/app-framework/ui";
+import { useShowItem } from "@dxos/app-toolkit/ui";
+import { useObject } from "@dxos/echo-react";
+import { Menu, MenuBuilder, useMenuBuilder } from "@dxos/react-ui-menu";
+import { log } from "@dxos/log";
+import { Masonry } from "@dxos/react-ui-masonry";
+import { mx } from "@dxos/ui-theme";
+//#region src/containers/MagazineArticle/MagazineTile.tsx
+var MagazineTile = ({ post, magazine, current, onToggleStar, onOpen }) => {
+	const { post: snapshot, feedName, read, starred, snippet, imageUrl } = useMagazinePostData(post, magazine);
+	const handleCurrentChange = useCallback(() => {
+		onOpen?.(post);
+	}, [onOpen, post]);
+	const handleToggleStar = useCallback((event) => {
+		event.stopPropagation();
+		onToggleStar?.(post, starred);
+	}, [
+		onToggleStar,
+		post,
+		starred
+	]);
+	return /* @__PURE__ */ jsx(Focus.Item, {
+		asChild: true,
+		current,
+		onCurrentChange: handleCurrentChange,
+		children: /* @__PURE__ */ jsxs(Card.Root, {
+			fullWidth: true,
+			classNames: mx("dx-hover dx-current cursor-pointer transition-opacity", read && !current && "opacity-60"),
+			children: [
+				imageUrl && /* @__PURE__ */ jsx(Card.Poster, {
+					alt: snapshot.title ?? "Article",
+					image: imageUrl,
+					fit: "cover",
+					classNames: "rounded-t-xs"
+				}),
+				/* @__PURE__ */ jsxs(Card.Header, { children: [
+					/* @__PURE__ */ jsx(Card.Block, { children: /* @__PURE__ */ jsx(SystemIconButton.Star, {
+						variant: "ghost",
+						iconOnly: true,
+						square: true,
+						size: 4,
+						active: starred,
+						onClick: handleToggleStar
+					}) }),
+					snapshot.title ? /* @__PURE__ */ jsx(Card.Title, {
+						classNames: "line-clamp-2",
+						children: snapshot.title
+					}) : /* @__PURE__ */ jsx("div", {}),
+					/* @__PURE__ */ jsx(Card.Block, { end: true })
+				] }),
+				/* @__PURE__ */ jsxs(Card.Body, { children: [snippet && /* @__PURE__ */ jsx(Card.Row, { children: /* @__PURE__ */ jsx(Card.Text, {
+					variant: "description",
+					classNames: "line-clamp-3",
+					children: snippet
+				}) }), /* @__PURE__ */ jsx(Card.Row, { children: /* @__PURE__ */ jsxs("div", {
+					className: "grid grid-cols-[minmax(0,1fr)_auto] items-center gap-2 py-1.5 text-sm text-description overflow-hidden",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "truncate",
+						children: feedName ?? ""
+					}), /* @__PURE__ */ jsx("span", {
+						className: "text-end shrink-0",
+						children: formatPublished(snapshot) ?? ""
+					})]
+				}) })] })
+			]
+		})
+	});
+};
+/** Convenience: format a Post's published date the way the magazine view shows it. */
+var formatPublished = (post) => post.published ? formatDate(post.published) : void 0;
+MagazineTile.displayName = "MagazineTile";
+//#endregion
+//#region src/containers/MagazineArticle/useToolbar.tsx
+/**
+* Owns the magazine toolbar: the view-filter and curate-busy atoms, the Curate/Clear operation
+* handlers, and the reactive menu action graph. The action graph reads its state — view filter,
+* curate-busy flag, and whether the magazine has feeds — via `get` inside the builder, so it
+* subscribes to those atoms and rebuilds whenever they change. Returns the menu props (spread into
+* `Menu.Root`) plus `viewAtom`, which the article also reads to filter the visible posts.
+*/
+var useToolbar = ({ magazine }) => {
+	const invoker = useOperationInvoker();
+	const registry = useContext(RegistryContext);
+	const db = Obj.getDatabase(magazine);
+	const viewAtom = useMemo(() => Atom.make("default"), []);
+	const busyAtom = useMemo(() => Atom.make(false), []);
+	const setView = useAtomSet(viewAtom);
+	const runExclusive = useCallback((effect) => {
+		if (registry.get(busyAtom)) return;
+		registry.set(busyAtom, true);
+		EffectEx.runAndForwardErrors(effect.pipe(Effect.ensuring(Effect.sync(() => registry.set(busyAtom, false)))));
+	}, [registry, busyAtom]);
+	const handleCurate = useCallback(() => runExclusive(invoker.invoke(FeedOperation.CurateMagazine, { magazine: Ref.make(magazine) }, {
+		spaceId: db?.spaceId,
+		notify: { error: ["curate-error.message", { ns: meta.profile.key }] }
+	})), [
+		runExclusive,
+		invoker,
+		magazine,
+		db
+	]);
+	const handleClear = useCallback(() => runExclusive(invoker.invoke(FeedOperation.ClearMagazine, { magazine: Ref.make(magazine) }, {
+		spaceId: db?.spaceId,
+		notify: { error: ["clear-error.message", { ns: meta.profile.key }] }
+	})), [
+		runExclusive,
+		invoker,
+		magazine,
+		db
+	]);
+	return {
+		menu: useMenuBuilder((get) => {
+			const view = get(viewAtom);
+			const busy = get(busyAtom);
+			const hasFeeds = (get(Obj.atomProperty(magazine, "feeds")) ?? []).length > 0;
+			const hasRoutine = Boolean(get(Obj.atomProperty(magazine, "instructions")));
+			const curateLabel = !hasFeeds ? "no-feeds.label" : busy ? "refreshing-magazine.label" : "curate.label";
+			return MenuBuilder.make().group("view", {
+				label: ["view-filter.label", { ns: meta.profile.key }],
+				variant: "toggleGroup",
+				selectCardinality: "single",
+				value: view
+			}, (group) => {
+				group.action("starred", {
+					label: ["only-starred.label", { ns: meta.profile.key }],
+					icon: view === "starred" ? "ph--star--fill" : "ph--star--regular"
+				}, () => setView(view === "starred" ? "default" : "starred"));
+				group.action("archived", {
+					label: ["show-archived.label", { ns: meta.profile.key }],
+					icon: "ph--archive--regular"
+				}, () => setView(view === "archived" ? "default" : "archived"));
+			}).separator("gap").action("clear", {
+				label: ["clear-magazine.label", { ns: meta.profile.key }],
+				icon: "ph--broom--regular",
+				iconOnly: true,
+				disabled: busy
+			}, handleClear).action("curate", {
+				label: [curateLabel, { ns: meta.profile.key }],
+				icon: busy ? "ph--circle-notch--regular" : "ph--sparkle--regular",
+				iconClassNames: busy ? "animate-spin" : void 0,
+				iconOnly: true,
+				disabled: busy || !hasFeeds || !hasRoutine
+			}, handleCurate).build();
+		}, [
+			magazine,
+			viewAtom,
+			busyAtom,
+			setView,
+			handleClear,
+			handleCurate
+		]),
+		viewAtom
+	};
+};
+useToolbar.displayName = "useToolbar";
+//#endregion
+//#region src/containers/MagazineArticle/MagazineArticle.tsx
+var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-magazine/src/containers/MagazineArticle/MagazineArticle.tsx";
+var MagazineArticle = ({ role, subject, attendableId }) => {
+	const { t } = useTranslation(meta.profile.key);
+	const invoker = useOperationInvoker();
+	const [magazine] = useObject(subject);
+	const { menu, viewAtom } = useToolbar({ magazine: subject });
+	const view = useAtomValue(viewAtom);
+	const showItem = useShowItem();
+	const id = attendableId ?? Obj.getURI(magazine);
+	const currentId = useSelection(id, "single");
+	const db = Obj.getDatabase(magazine);
+	const posts = useVisibleMagazinePosts(subject, view);
+	const handleToggleStar = useCallback(async (post, starred) => {
+		const subscription = await post.source?.load();
+		if (db && subscription) Subscription.setTag(subscription, post.id, db, "starred", !starred);
+	}, [db]);
+	const handleOpen = useCallback(async (post) => {
+		const subscription = await post.source?.load();
+		if (subscription && !Subscription.getReadAt(subscription, post.id)) Subscription.setReadAt(subscription, post.id, (/* @__PURE__ */ new Date()).toISOString());
+		if (post.link) invoker.invokePromise(FeedOperation.LoadPostContent, { post: Ref.make(post) }).catch((err) => log.catch(err, { postLink: post.link }, {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file,
+			L: 63,
+			S: void 0
+		}));
+		showItem({
+			contextId: id,
+			selectionId: post.id,
+			companion: Attention.linkedSegment("post"),
+			path: GraphPath.getObjectPathFromObject(subject)
+		});
+	}, [
+		id,
+		showItem,
+		invoker,
+		subject
+	]);
+	const noPosts = posts.length === 0;
+	useEffect(() => {
+		if (noPosts) invoker.invokePromise(LayoutOperation.UpdateCompanion, { subject: Attention.linkedSegment("settings") });
+	}, [noPosts, invoker]);
+	const tileItems = useMemo(() => posts.map((post) => ({
+		id: post.id,
+		post,
+		magazine: subject,
+		current: currentId === post.id,
+		onToggleStar: handleToggleStar,
+		onOpen: handleOpen
+	})), [
+		posts,
+		currentId,
+		handleOpen,
+		handleToggleStar
+	]);
+	return /* @__PURE__ */ jsxs(Panel.Root, {
+		role,
+		children: [/* @__PURE__ */ jsx(Menu.Root, {
+			...menu,
+			attendableId,
+			children: /* @__PURE__ */ jsx(Panel.Toolbar, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx(Menu.Toolbar, {})
+			})
+		}), /* @__PURE__ */ jsx(Panel.Content, { children: noPosts ? /* @__PURE__ */ jsx("div", {
+			className: "h-full flex items-center justify-center text-subdued text-sm",
+			children: t("empty-magazine.message")
+		}) : /* @__PURE__ */ jsx(Masonry.Root, {
+			Tile: TileAdapter,
+			minColumnWidth: 20,
+			maxColumnWidth: 25,
+			children: /* @__PURE__ */ jsx(Masonry.Content, {
+				thin: true,
+				centered: true,
+				padding: true,
+				children: /* @__PURE__ */ jsx(Masonry.Viewport, {
+					classNames: "py-2",
+					items: tileItems
+				})
+			})
+		}) })]
+	});
+};
+var TileAdapter = ({ data }) => {
+	if (!data?.post) return null;
+	return /* @__PURE__ */ jsx(MagazineTile, {
+		post: data.post,
+		magazine: data.magazine,
+		current: data.current,
+		onOpen: data.onOpen,
+		onToggleStar: data.onToggleStar
+	});
+};
+MagazineArticle.displayName = "MagazineArticle";
+//#endregion
+export { MagazineArticle as default };
+
+//# sourceMappingURL=chunk-MagazineArticle.mjs.map

package/dist/lib/chunk-MagazineArticle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chunk-MagazineArticle.mjs","names":[],"sources":["../../src/containers/MagazineArticle/MagazineTile.tsx","../../src/containers/MagazineArticle/useToolbar.tsx","../../src/containers/MagazineArticle/MagazineArticle.tsx"],"sourcesContent":["//\n// Copyright 2026 DXOS.org\n//\n\nimport React, { type MouseEvent, useCallback } from 'react';\n\nimport { Obj } from '@dxos/echo';\nimport { Card, Focus, SystemIconButton } from '@dxos/react-ui';\nimport { mx } from '@dxos/ui-theme';\n\nimport { useMagazinePostData } from '#atoms';\nimport { type Magazine, type Subscription } from '#types';\n\nimport { formatDate } from '../../util/date';\n\nexport type MagazineTileProps = {\n  post: Subscription.Post;\n  magazine: Magazine.Magazine;\n  current?: boolean;\n  onOpen?: (post: Subscription.Post) => void;\n  onToggleStar?: (post: Subscription.Post, starred: boolean) => void;\n};\n\nexport const MagazineTile = ({ post, magazine, current, onToggleStar, onOpen }: MagazineTileProps) => {\n  // All per-Post derivation (snapshot, read, starred, snippet, image, feed name) happens in\n  // atom-land; this tile re-renders only when THIS post's slice changes, not when a sibling does.\n  const { post: snapshot, feedName, read, starred, snippet, imageUrl } = useMagazinePostData(post, magazine);\n\n  // `Focus.Item` calls `onCurrentChange` on click and on Enter.\n  const handleCurrentChange = useCallback(() => {\n    onOpen?.(post);\n  }, [onOpen, post]);\n\n  const handleToggleStar = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      // Prevent Focus.Item's onClick from firing the open action — clicks on the star toggle should not open the post.\n      event.stopPropagation();\n      onToggleStar?.(post, starred);\n    },\n    [onToggleStar, post, starred],\n  );\n\n  return (\n    <Focus.Item asChild current={current} onCurrentChange={handleCurrentChange}>\n      <Card.Root\n        fullWidth\n        classNames={mx('dx-hover dx-current cursor-pointer transition-opacity', read && !current && 'opacity-60')}\n      >\n        {imageUrl && (\n          <Card.Poster alt={snapshot.title ?? 'Article'} image={imageUrl} fit='cover' classNames='rounded-t-xs' />\n        )}\n        <Card.Header>\n          <Card.Block>\n            <SystemIconButton.Star\n              variant='ghost'\n              iconOnly\n              square\n              size={4}\n              active={starred}\n              onClick={handleToggleStar}\n            />\n          </Card.Block>\n          {snapshot.title ? <Card.Title classNames='line-clamp-2'>{snapshot.title}</Card.Title> : <div />}\n          <Card.Block end />\n        </Card.Header>\n        <Card.Body>\n          {snippet && (\n            <Card.Row>\n              <Card.Text variant='description' classNames='line-clamp-3'>\n                {snippet}\n              </Card.Text>\n            </Card.Row>\n          )}\n          <Card.Row>\n            <div className='grid grid-cols-[minmax(0,1fr)_auto] items-center gap-2 py-1.5 text-sm text-description overflow-hidden'>\n              <span className='truncate'>{feedName ?? ''}</span>\n              <span className='text-end shrink-0'>{formatPublished(snapshot) ?? ''}</span>\n            </div>\n          </Card.Row>\n        </Card.Body>\n      </Card.Root>\n    </Focus.Item>\n  );\n};\n\n/** Convenience: format a Post's published date the way the magazine view shows it. */\nconst formatPublished = (post: Obj.Snapshot<Subscription.Post>): string | undefined =>\n  post.published ? formatDate(post.published) : undefined;\n\nMagazineTile.displayName = 'MagazineTile';\n","//\n// Copyright 2026 DXOS.org\n//\n\nimport { Atom, RegistryContext, useAtomSet } from '@effect-atom/atom-react';\nimport * as Effect from 'effect/Effect';\nimport { useCallback, useContext, useMemo } from 'react';\n\nimport { useOperationInvoker } from '@dxos/app-framework/ui';\nimport { Obj, Ref } from '@dxos/echo';\nimport { EffectEx } from '@dxos/effect';\nimport { MenuBuilder, useMenuBuilder } from '@dxos/react-ui-menu';\n\nimport { type MagazineView } from '#atoms';\nimport { meta } from '#meta';\nimport { FeedOperation, type Magazine } from '#types';\n\nexport type UseToolbarProps = {\n  magazine: Magazine.Magazine;\n};\n\n/**\n * Owns the magazine toolbar: the view-filter and curate-busy atoms, the Curate/Clear operation\n * handlers, and the reactive menu action graph. The action graph reads its state — view filter,\n * curate-busy flag, and whether the magazine has feeds — via `get` inside the builder, so it\n * subscribes to those atoms and rebuilds whenever they change. Returns the menu props (spread into\n * `Menu.Root`) plus `viewAtom`, which the article also reads to filter the visible posts.\n */\nexport const useToolbar = ({ magazine }: UseToolbarProps) => {\n  const invoker = useOperationInvoker();\n  const registry = useContext(RegistryContext);\n  const db = Obj.getDatabase(magazine);\n  const viewAtom = useMemo(() => Atom.make<MagazineView>('default'), []);\n  const busyAtom = useMemo(() => Atom.make(false), []);\n  const setView = useAtomSet(viewAtom);\n\n  // Curate and Clear share the busy guard: ignore re-entry while a run is in flight, flip the busy flag\n  // for the duration, then run the supplied invocation (failures surface via its own notify config).\n  const runExclusive = useCallback(\n    <A, E>(effect: Effect.Effect<A, E>) => {\n      if (registry.get(busyAtom)) {\n        return;\n      }\n      registry.set(busyAtom, true);\n      void EffectEx.runAndForwardErrors(effect.pipe(Effect.ensuring(Effect.sync(() => registry.set(busyAtom, false)))));\n    },\n    [registry, busyAtom],\n  );\n\n  const handleCurate = useCallback(\n    () =>\n      runExclusive(\n        invoker.invoke(\n          FeedOperation.CurateMagazine,\n          { magazine: Ref.make(magazine) },\n          { spaceId: db?.spaceId, notify: { error: ['curate-error.message', { ns: meta.profile.key }] } },\n        ),\n      ),\n    [runExclusive, invoker, magazine, db],\n  );\n\n  const handleClear = useCallback(\n    () =>\n      runExclusive(\n        invoker.invoke(\n          FeedOperation.ClearMagazine,\n          { magazine: Ref.make(magazine) },\n          { spaceId: db?.spaceId, notify: { error: ['clear-error.message', { ns: meta.profile.key }] } },\n        ),\n      ),\n    [runExclusive, invoker, magazine, db],\n  );\n\n  const menu = useMenuBuilder(\n    (get) => {\n      const view = get(viewAtom);\n      const busy = get(busyAtom);\n      const hasFeeds = (get(Obj.atomProperty(magazine, 'feeds')) ?? []).length > 0;\n      // Curate runs the magazine's Routine, so it is unavailable until that Routine exists.\n      const hasRoutine = Boolean(get(Obj.atomProperty(magazine, 'instructions')));\n      // Curate is disabled while busy or until there is at least one feed; the tooltip explains why.\n      const curateLabel = !hasFeeds ? 'no-feeds.label' : busy ? 'refreshing-magazine.label' : 'curate.label';\n\n      return (\n        MenuBuilder.make()\n          // Single-select filter: `value` is the active child id; `'default'` matches neither, so both\n          // toggles read as off. Re-clicking the active toggle returns to `'default'`.\n          .group(\n            'view',\n            {\n              label: ['view-filter.label', { ns: meta.profile.key }],\n              variant: 'toggleGroup',\n              selectCardinality: 'single',\n              value: view,\n            },\n            (group) => {\n              group.action(\n                'starred',\n                {\n                  label: ['only-starred.label', { ns: meta.profile.key }],\n                  icon: view === 'starred' ? 'ph--star--fill' : 'ph--star--regular',\n                },\n                () => setView(view === 'starred' ? 'default' : 'starred'),\n              );\n              group.action(\n                'archived',\n                {\n                  label: ['show-archived.label', { ns: meta.profile.key }],\n                  icon: 'ph--archive--regular',\n                },\n                () => setView(view === 'archived' ? 'default' : 'archived'),\n              );\n            },\n          )\n          // `gap` is a flexible spacer that pushes Clear + Curate to the trailing edge.\n          .separator('gap')\n          .action(\n            'clear',\n            {\n              label: ['clear-magazine.label', { ns: meta.profile.key }],\n              icon: 'ph--broom--regular',\n              iconOnly: true,\n              disabled: busy,\n            },\n            handleClear,\n          )\n          .action(\n            'curate',\n            {\n              label: [curateLabel, { ns: meta.profile.key }],\n              icon: busy ? 'ph--circle-notch--regular' : 'ph--sparkle--regular',\n              iconClassNames: busy ? 'animate-spin' : undefined,\n              iconOnly: true,\n              disabled: busy || !hasFeeds || !hasRoutine,\n            },\n            handleCurate,\n          )\n          .build()\n      );\n    },\n    [magazine, viewAtom, busyAtom, setView, handleClear, handleCurate],\n  );\n\n  return { menu, viewAtom };\n};\n\nuseToolbar.displayName = 'useToolbar';\n","//\n// Copyright 2026 DXOS.org\n//\n\nimport { useAtomValue } from '@effect-atom/atom-react';\nimport React, { useCallback, useEffect, useMemo } from 'react';\n\nimport { useOperationInvoker } from '@dxos/app-framework/ui';\nimport { GraphPath, LayoutOperation } from '@dxos/app-toolkit';\nimport { type AppSurface, useShowItem } from '@dxos/app-toolkit/ui';\nimport { Obj, Ref } from '@dxos/echo';\nimport { useObject } from '@dxos/echo-react';\nimport { log } from '@dxos/log';\nimport { Panel, useTranslation } from '@dxos/react-ui';\nimport { Attention, useSelection } from '@dxos/react-ui-attention';\nimport { Masonry } from '@dxos/react-ui-masonry';\nimport { Menu } from '@dxos/react-ui-menu';\n\nimport { useVisibleMagazinePosts } from '#atoms';\nimport { meta } from '#meta';\nimport { FeedOperation, Magazine, Subscription } from '#types';\n\nimport { MagazineTile } from './MagazineTile';\nimport { useToolbar } from './useToolbar';\n\nexport type MagazineArticleProps = AppSurface.ObjectArticleProps<Magazine.Magazine>;\n\nexport const MagazineArticle = ({ role, subject, attendableId }: MagazineArticleProps) => {\n  const { t } = useTranslation(meta.profile.key);\n  const invoker = useOperationInvoker();\n  const [magazine] = useObject(subject);\n\n  // The toolbar owns the view-filter atom and the curate/clear handlers; the article reads `view` to\n  // filter the visible posts.\n  const { menu, viewAtom } = useToolbar({ magazine: subject });\n  const view = useAtomValue(viewAtom);\n\n  const showItem = useShowItem();\n  const id = attendableId ?? Obj.getURI(magazine);\n  const currentId = useSelection(id, 'single');\n  const db = Obj.getDatabase(magazine);\n  const posts = useVisibleMagazinePosts(subject, view);\n\n  const handleToggleStar = useCallback(\n    async (post: Subscription.Post, starred: boolean) => {\n      const subscription = await post.source?.load();\n      if (db && subscription) {\n        void Subscription.setTag(subscription, post.id, db, 'starred', !starred);\n      }\n    },\n    [db],\n  );\n\n  const handleOpen = useCallback(\n    async (post: Subscription.Post) => {\n      const subscription = await post.source?.load();\n      if (subscription && !Subscription.getReadAt(subscription, post.id)) {\n        void Subscription.setReadAt(subscription, post.id, new Date().toISOString());\n      }\n      if (post.link) {\n        void invoker\n          .invokePromise(FeedOperation.LoadPostContent, { post: Ref.make(post) })\n          .catch((err) => log.catch(err, { postLink: post.link }));\n      }\n      void showItem({\n        contextId: id,\n        selectionId: post.id,\n        companion: Attention.linkedSegment('post'),\n        path: GraphPath.getObjectPathFromObject(subject),\n      });\n    },\n    [id, showItem, invoker, subject],\n  );\n\n  const noPosts = posts.length === 0;\n  useEffect(() => {\n    if (noPosts) {\n      void invoker.invokePromise(LayoutOperation.UpdateCompanion, {\n        subject: Attention.linkedSegment('settings'),\n      });\n    }\n  }, [noPosts, invoker]);\n\n  const tileItems = useMemo<TileData[]>(\n    () =>\n      posts.map((post) => ({\n        id: post.id,\n        post,\n        magazine: subject,\n        current: currentId === post.id,\n        onToggleStar: handleToggleStar,\n        onOpen: handleOpen,\n      })),\n    [posts, currentId, handleOpen, handleToggleStar],\n  );\n\n  return (\n    <Panel.Root role={role}>\n      <Menu.Root {...menu} attendableId={attendableId}>\n        <Panel.Toolbar asChild>\n          <Menu.Toolbar />\n        </Panel.Toolbar>\n      </Menu.Root>\n      <Panel.Content>\n        {noPosts ? (\n          // TODO(burdon): Factor out common EmptyState component; of push into Masonry, List, etc.\n          <div className='h-full flex items-center justify-center text-subdued text-sm'>\n            {t('empty-magazine.message')}\n          </div>\n        ) : (\n          <Masonry.Root Tile={TileAdapter} minColumnWidth={20} maxColumnWidth={25}>\n            <Masonry.Content thin centered padding>\n              {/* TODO(burdon): Move items into Root. */}\n              <Masonry.Viewport classNames='py-2' items={tileItems} />\n            </Masonry.Content>\n          </Masonry.Root>\n        )}\n      </Panel.Content>\n    </Panel.Root>\n  );\n};\n\ntype TileData = {\n  id: string;\n  post: Subscription.Post;\n  magazine: Magazine.Magazine;\n  current: boolean;\n  onToggleStar?: (post: Subscription.Post, starred: boolean) => void;\n  onOpen?: (post: Subscription.Post) => void;\n};\n\nconst TileAdapter = ({ data }: { data: TileData | undefined; index: number }) => {\n  if (!data?.post) {\n    return null;\n  }\n\n  return (\n    <MagazineTile\n      post={data.post}\n      magazine={data.magazine}\n      current={data.current}\n      onOpen={data.onOpen}\n      onToggleStar={data.onToggleStar}\n    />\n  );\n};\n\nMagazineArticle.displayName = 'MagazineArticle';\n"],"mappings":"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"}

package/dist/lib/chunk-PostArticle.mjs

@@ -0,0 +1,174 @@
+import { Filter, Obj, Ref } from "@dxos/echo";
+import { meta } from "#meta";
+import { FeedOperation, Subscription } from "#types";
+import { useCallback, useContext, useEffect, useMemo, useRef } from "react";
+import { Panel } from "@dxos/react-ui";
+import { postReadAtom, postTagsAtom, usePostContentAtom } from "#atoms";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Atom, RegistryContext } from "@effect-atom/atom-react";
+import { Attention } from "@dxos/react-ui-attention";
+import { useOperationInvoker } from "@dxos/app-framework/ui";
+import { useObject, useQuery } from "@dxos/echo-react";
+import { PostContent } from "#components";
+import { Menu, MenuBuilder, useMenuBuilder } from "@dxos/react-ui-menu";
+import { log } from "@dxos/log";
+//#region src/containers/PostArticle/PostToolbar.tsx
+/**
+* Reactive post toolbar built from the menu action-graph idiom. The action graph reads the post's
+* star/archive/read slices (and the refreshing flag) via `get` inside the builder, so it subscribes
+* to those atoms and rebuilds whenever this post's state changes. Deps hold only stable references
+* (the post, the refreshing atom, callbacks), never the reactive values.
+*/
+var PostToolbar = ({ post, refreshingAtom, attendableId, onSetStarred, onSetArchived, onMarkUnread, onRefresh, onOpenOriginal }) => {
+	const menuActions = useMenuBuilder((get) => {
+		const { starred, archived } = get(postTagsAtom(post));
+		const { readAt } = get(postReadAtom(post));
+		const read = readAt !== void 0;
+		const refreshing = get(refreshingAtom);
+		const hasLink = Boolean(post.link);
+		return MenuBuilder.make().action("star", {
+			label: [starred ? "unstar-post.label" : "star-post.label", { ns: meta.profile.key }],
+			icon: starred ? "ph--star--fill" : "ph--star--regular",
+			iconOnly: true
+		}, () => onSetStarred(!starred)).action("archive", {
+			label: [archived ? "unarchive-post.label" : "archive-post.label", { ns: meta.profile.key }],
+			icon: archived ? "ph--archive--fill" : "ph--archive--regular",
+			iconOnly: true
+		}, () => onSetArchived(!archived)).action("mark-unread", {
+			label: ["mark-unread.label", { ns: meta.profile.key }],
+			icon: "ph--envelope--regular",
+			iconOnly: true,
+			hidden: !read
+		}, onMarkUnread).separator("gap").action("refresh", {
+			label: [refreshing ? "refresh-content-pending.label" : "refresh-content.label", { ns: meta.profile.key }],
+			icon: "ph--arrows-clockwise--regular",
+			iconClassNames: refreshing ? "animate-spin" : void 0,
+			iconOnly: true,
+			disabled: refreshing,
+			hidden: !hasLink
+		}, onRefresh).action("open-original", {
+			label: ["open-original.label", { ns: meta.profile.key }],
+			icon: "ph--arrow-square-out--regular",
+			iconOnly: true,
+			hidden: !hasLink
+		}, onOpenOriginal).build();
+	}, [
+		post,
+		refreshingAtom,
+		onSetStarred,
+		onSetArchived,
+		onMarkUnread,
+		onRefresh,
+		onOpenOriginal
+	]);
+	return /* @__PURE__ */ jsx(Menu.Root, {
+		...menuActions,
+		attendableId,
+		children: /* @__PURE__ */ jsx(Panel.Toolbar, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(Menu.Toolbar, {})
+		})
+	});
+};
+PostToolbar.displayName = "PostToolbar";
+//#endregion
+//#region src/containers/PostArticle/PostArticle.tsx
+var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-magazine/src/containers/PostArticle/PostArticle.tsx";
+var PostArticle = ({ role, subject, attendableId }) => {
+	const toolbarAttendableId = attendableId && Attention.isLinkedSegment(attendableId) ? Attention.getParentId(attendableId) : attendableId;
+	const { invokePromise } = useOperationInvoker();
+	const registry = useContext(RegistryContext);
+	const [post] = useObject(subject);
+	const db = Obj.getDatabase(post);
+	const subscription = post.source?.target;
+	const { id } = post;
+	const postContent = usePostContentAtom(subject);
+	const requestedContentFor = useRef(void 0);
+	useEffect(() => {
+		if (requestedContentFor.current === id) return;
+		if (!post.link || postContent) return;
+		requestedContentFor.current = id;
+		invokePromise(FeedOperation.LoadPostContent, { post: Ref.make(subject) }).catch((err) => log.catch(err, { postLink: post.link }, {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file,
+			L: 54,
+			S: void 0
+		}));
+	}, [
+		subject,
+		post,
+		post.link,
+		postContent,
+		invokePromise,
+		id
+	]);
+	const allFeeds = useQuery(db, Filter.type(Subscription.Subscription));
+	const feedName = useMemo(() => {
+		const dxn = post.source?.uri;
+		if (!dxn) return;
+		return allFeeds.find((feed) => Obj.getURI(feed) === dxn)?.name;
+	}, [post.source, allFeeds]);
+	const handleOpenOriginal = useCallback(() => {
+		if (post.link) window.open(post.link, "_blank", "noopener,noreferrer");
+	}, [post.link]);
+	const handleMarkUnread = useCallback(() => {
+		if (subscription) Subscription.setReadAt(subscription, id, void 0);
+	}, [subscription, id]);
+	const handleSetArchived = useCallback((value) => {
+		if (db && subscription) Subscription.setTag(subscription, id, db, "archived", value);
+	}, [
+		db,
+		subscription,
+		id
+	]);
+	const handleSetStarred = useCallback((value) => {
+		if (db && subscription) Subscription.setTag(subscription, id, db, "starred", value);
+	}, [
+		db,
+		subscription,
+		id
+	]);
+	const refreshingAtom = useMemo(() => Atom.make(false), []);
+	const handleRefresh = useCallback(async () => {
+		if (!post.link || registry.get(refreshingAtom)) return;
+		registry.set(refreshingAtom, true);
+		try {
+			await invokePromise(FeedOperation.LoadPostContent, {
+				post: Ref.make(subject),
+				force: true
+			}, { notify: { error: ["refresh-content-error.message", { ns: meta.profile.key }] } });
+		} finally {
+			registry.set(refreshingAtom, false);
+		}
+	}, [
+		registry,
+		refreshingAtom,
+		subject,
+		post.link,
+		invokePromise
+	]);
+	return /* @__PURE__ */ jsxs(Panel.Root, {
+		role,
+		children: [/* @__PURE__ */ jsx(PostToolbar, {
+			post: subject,
+			refreshingAtom,
+			attendableId: toolbarAttendableId,
+			onSetStarred: handleSetStarred,
+			onSetArchived: handleSetArchived,
+			onMarkUnread: handleMarkUnread,
+			onRefresh: () => void handleRefresh(),
+			onOpenOriginal: handleOpenOriginal
+		}), /* @__PURE__ */ jsx(Panel.Content, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(PostContent, {
+				post: subject,
+				metadata: feedName ? [feedName] : void 0
+			})
+		})]
+	});
+};
+PostArticle.displayName = "PostArticle";
+//#endregion
+export { PostArticle as default };
+
+//# sourceMappingURL=chunk-PostArticle.mjs.map

package/dist/lib/chunk-PostArticle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chunk-PostArticle.mjs","names":[],"sources":["../../src/containers/PostArticle/PostToolbar.tsx","../../src/containers/PostArticle/PostArticle.tsx"],"sourcesContent":["//\n// Copyright 2026 DXOS.org\n//\n\nimport { type Atom } from '@effect-atom/atom';\nimport React from 'react';\n\nimport { Panel } from '@dxos/react-ui';\nimport { Menu, MenuBuilder, useMenuBuilder } from '@dxos/react-ui-menu';\n\nimport { postReadAtom, postTagsAtom } from '#atoms';\nimport { meta } from '#meta';\nimport { type Subscription } from '#types';\n\nexport type PostToolbarProps = {\n  post: Subscription.Post;\n  /** Whether a content re-fetch is in flight. */\n  refreshingAtom: Atom.Atom<boolean>;\n  attendableId?: string;\n  onSetStarred: (value: boolean) => void;\n  onSetArchived: (value: boolean) => void;\n  onMarkUnread: () => void;\n  onRefresh: () => void;\n  onOpenOriginal: () => void;\n};\n\n/**\n * Reactive post toolbar built from the menu action-graph idiom. The action graph reads the post's\n * star/archive/read slices (and the refreshing flag) via `get` inside the builder, so it subscribes\n * to those atoms and rebuilds whenever this post's state changes. Deps hold only stable references\n * (the post, the refreshing atom, callbacks), never the reactive values.\n */\nexport const PostToolbar = ({\n  post,\n  refreshingAtom,\n  attendableId,\n  onSetStarred,\n  onSetArchived,\n  onMarkUnread,\n  onRefresh,\n  onOpenOriginal,\n}: PostToolbarProps) => {\n  const menuActions = useMenuBuilder(\n    (get) => {\n      const { starred, archived } = get(postTagsAtom(post));\n      const { readAt } = get(postReadAtom(post));\n      const read = readAt !== undefined;\n      const refreshing = get(refreshingAtom);\n      const hasLink = Boolean(post.link);\n\n      return (\n        MenuBuilder.make()\n          .action(\n            'star',\n            {\n              label: [starred ? 'unstar-post.label' : 'star-post.label', { ns: meta.profile.key }],\n              icon: starred ? 'ph--star--fill' : 'ph--star--regular',\n              iconOnly: true,\n            },\n            () => onSetStarred(!starred),\n          )\n          .action(\n            'archive',\n            {\n              label: [archived ? 'unarchive-post.label' : 'archive-post.label', { ns: meta.profile.key }],\n              icon: archived ? 'ph--archive--fill' : 'ph--archive--regular',\n              iconOnly: true,\n            },\n            () => onSetArchived(!archived),\n          )\n          .action(\n            'mark-unread',\n            {\n              label: ['mark-unread.label', { ns: meta.profile.key }],\n              icon: 'ph--envelope--regular',\n              iconOnly: true,\n              hidden: !read,\n            },\n            onMarkUnread,\n          )\n          // `gap` is a flexible spacer that pushes the link actions to the trailing edge.\n          .separator('gap')\n          .action(\n            'refresh',\n            {\n              label: [refreshing ? 'refresh-content-pending.label' : 'refresh-content.label', { ns: meta.profile.key }],\n              icon: 'ph--arrows-clockwise--regular',\n              iconClassNames: refreshing ? 'animate-spin' : undefined,\n              iconOnly: true,\n              disabled: refreshing,\n              hidden: !hasLink,\n            },\n            onRefresh,\n          )\n          .action(\n            'open-original',\n            {\n              label: ['open-original.label', { ns: meta.profile.key }],\n              icon: 'ph--arrow-square-out--regular',\n              iconOnly: true,\n              hidden: !hasLink,\n            },\n            onOpenOriginal,\n          )\n          .build()\n      );\n    },\n    [post, refreshingAtom, onSetStarred, onSetArchived, onMarkUnread, onRefresh, onOpenOriginal],\n  );\n\n  return (\n    <Menu.Root {...menuActions} attendableId={attendableId}>\n      <Panel.Toolbar asChild>\n        <Menu.Toolbar />\n      </Panel.Toolbar>\n    </Menu.Root>\n  );\n};\n\nPostToolbar.displayName = 'PostToolbar';\n","//\n// Copyright 2026 DXOS.org\n//\n\nimport { Atom, RegistryContext } from '@effect-atom/atom-react';\nimport React, { useCallback, useContext, useEffect, useMemo, useRef } from 'react';\n\nimport { useOperationInvoker } from '@dxos/app-framework/ui';\nimport { type AppSurface } from '@dxos/app-toolkit/ui';\nimport { Filter, Obj, Ref } from '@dxos/echo';\nimport { useObject, useQuery } from '@dxos/echo-react';\nimport { log } from '@dxos/log';\nimport { Panel } from '@dxos/react-ui';\nimport { Attention } from '@dxos/react-ui-attention';\n\nimport { usePostContentAtom } from '#atoms';\nimport { PostContent } from '#components';\nimport { meta } from '#meta';\nimport { FeedOperation } from '#types';\nimport { Subscription } from '#types';\n\nimport { PostToolbar } from './PostToolbar';\n\nexport type PostArticleProps = AppSurface.ObjectArticleProps<Subscription.Post>;\n\nexport const PostArticle = ({ role, subject, attendableId }: PostArticleProps) => {\n  // When shown as a companion the `attendableId` is a linked segment, but attention lives on the\n  // parent plank — resolve to the parent so the toolbar reads as attended (active).\n  const toolbarAttendableId =\n    attendableId && Attention.isLinkedSegment(attendableId) ? Attention.getParentId(attendableId) : attendableId;\n  const { invokePromise } = useOperationInvoker();\n  const registry = useContext(RegistryContext);\n  const [post] = useObject(subject);\n  const db = Obj.getDatabase(post);\n  const subscription = post.source?.target;\n  const { id } = post;\n  const postContent = usePostContentAtom(subject);\n\n  // Lazily fetch full article content the first time this Post is shown — covers\n  // entry points that bypass MagazineArticle's `handleOpen` (deep-link, agent surface,\n  // restored attention). LoadPostContent is idempotent (no-op if `content` already\n  // populated or `link` missing), so a unique guard per Post id is enough to keep us\n  // from re-firing on every render.\n  const requestedContentFor = useRef<string | undefined>(undefined);\n  useEffect(() => {\n    if (requestedContentFor.current === id) {\n      return;\n    }\n    if (!post.link || postContent) {\n      return;\n    }\n    requestedContentFor.current = id;\n    void invokePromise(FeedOperation.LoadPostContent, { post: Ref.make(subject) }).catch((err) =>\n      log.catch(err, { postLink: post.link }),\n    );\n  }, [subject, post, post.link, postContent, invokePromise, id]);\n\n  // Reactive lookup of the source feed name. `post.feed?.target?.name` only renders\n  // synchronously when the ref is already resolved; querying feeds via useQuery means\n  // the meta line updates as soon as the feed object is loaded into the space.\n  const allFeeds = useQuery(db, Filter.type(Subscription.Subscription));\n  const feedName = useMemo(() => {\n    const dxn = post.source?.uri;\n    if (!dxn) {\n      return undefined;\n    }\n    return allFeeds.find((feed) => Obj.getURI(feed) === dxn)?.name;\n  }, [post.source, allFeeds]);\n\n  const handleOpenOriginal = useCallback(() => {\n    if (post.link) {\n      window.open(post.link, '_blank', 'noopener,noreferrer');\n    }\n  }, [post.link]);\n\n  const handleMarkUnread = useCallback(() => {\n    if (subscription) {\n      Subscription.setReadAt(subscription, id, undefined);\n    }\n  }, [subscription, id]);\n\n  // Value-setters (not toggles): the toolbar reads the current star/archive state reactively via\n  // `get` and passes the desired next value, so these don't need to subscribe to the current state.\n  const handleSetArchived = useCallback(\n    (value: boolean) => {\n      if (db && subscription) {\n        void Subscription.setTag(subscription, id, db, 'archived', value);\n      }\n    },\n    [db, subscription, id],\n  );\n\n  const handleSetStarred = useCallback(\n    (value: boolean) => {\n      if (db && subscription) {\n        void Subscription.setTag(subscription, id, db, 'starred', value);\n      }\n    },\n    [db, subscription, id],\n  );\n\n  // Re-fetch the article body from the source via the LoadPostContent operation with `force`, so the\n  // fetch/extraction/storage logic lives in one place (the operation) rather than inline here. Appends\n  // a fresh content entry to the subscription's contentFeed; the reverse-ref lookup picks the newest.\n  // `refreshing` is an atom so the toolbar subscribes to it via `get` rather than via React deps.\n  const refreshingAtom = useMemo(() => Atom.make(false), []);\n  const handleRefresh = useCallback(async () => {\n    if (!post.link || registry.get(refreshingAtom)) {\n      return;\n    }\n    registry.set(refreshingAtom, true);\n    try {\n      // Failures surface as a toast via `notify`; invokePromise resolves with `{ error }`, never throws.\n      await invokePromise(\n        FeedOperation.LoadPostContent,\n        { post: Ref.make(subject), force: true },\n        { notify: { error: ['refresh-content-error.message', { ns: meta.profile.key }] } },\n      );\n    } finally {\n      registry.set(refreshingAtom, false);\n    }\n  }, [registry, refreshingAtom, subject, post.link, invokePromise]);\n\n  return (\n    <Panel.Root role={role}>\n      <PostToolbar\n        post={subject}\n        refreshingAtom={refreshingAtom}\n        attendableId={toolbarAttendableId}\n        onSetStarred={handleSetStarred}\n        onSetArchived={handleSetArchived}\n        onMarkUnread={handleMarkUnread}\n        onRefresh={() => void handleRefresh()}\n        onOpenOriginal={handleOpenOriginal}\n      />\n      <Panel.Content asChild>\n        <PostContent post={subject} metadata={feedName ? [feedName] : undefined} />\n      </Panel.Content>\n    </Panel.Root>\n  );\n};\n\nPostArticle.displayName = 'PostArticle';\n"],"mappings":"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"}

package/dist/lib/chunk-PostCard.mjs

@@ -0,0 +1,62 @@
+import { t as formatDate } from "./chunk-date.mjs";
+import { n as getSnippet, t as getImageUrl } from "./chunk-post-content.mjs";
+import { Filter, Obj } from "@dxos/echo";
+import { Subscription } from "#types";
+import { useMemo } from "react";
+import { Card } from "@dxos/react-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useObject, useQuery } from "@dxos/echo-react";
+//#region src/containers/PostCard/PostCard.tsx
+/**
+* Compact preview of a {@link Subscription.Post}. Rendered into the
+* `AppSurface.CardContent` slot — Card.Root is supplied by the surface host
+* (popovers, sections, related-objects), so the body emits Card.Body only.
+*/
+var PostCard = ({ subject }) => {
+	const [post] = useObject(subject);
+	const allFeeds = useQuery(Obj.getDatabase(post), Filter.type(Subscription.Subscription));
+	const feedName = useMemo(() => {
+		const dxn = post.source?.uri;
+		if (!dxn) return;
+		return allFeeds.find((feed) => Obj.getURI(feed) === dxn)?.name;
+	}, [post.source, allFeeds]);
+	const published = formatDate(post.published);
+	const imageUrl = getImageUrl(post);
+	const snippet = useMemo(() => getSnippet(post) || void 0, [post.description]);
+	return /* @__PURE__ */ jsxs(Card.Body, { children: [
+		imageUrl && /* @__PURE__ */ jsx(Card.Poster, {
+			alt: post.title ?? "",
+			image: imageUrl,
+			fit: "cover",
+			classNames: "rounded-t-xs"
+		}),
+		post.title && /* @__PURE__ */ jsx(Card.Row, { children: /* @__PURE__ */ jsx(Card.Title, {
+			classNames: "line-clamp-2",
+			children: post.title
+		}) }),
+		snippet && /* @__PURE__ */ jsx(Card.Row, { children: /* @__PURE__ */ jsx(Card.Text, {
+			variant: "description",
+			classNames: "line-clamp-3",
+			children: snippet
+		}) }),
+		(feedName || published) && /* @__PURE__ */ jsx(Card.Row, { children: /* @__PURE__ */ jsxs("div", {
+			className: "grid grid-cols-[minmax(0,1fr)_auto] items-center gap-2 text-sm text-description overflow-hidden",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				children: feedName ?? ""
+			}), /* @__PURE__ */ jsx("span", {
+				className: "text-end shrink-0",
+				children: published ?? ""
+			})]
+		}) }),
+		post.link && /* @__PURE__ */ jsx(Card.Link, {
+			label: post.link,
+			href: post.link
+		})
+	] });
+};
+PostCard.displayName = "PostCard";
+//#endregion
+export { PostCard as default };
+
+//# sourceMappingURL=chunk-PostCard.mjs.map

package/dist/lib/chunk-PostCard.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chunk-PostCard.mjs","names":[],"sources":["../../src/containers/PostCard/PostCard.tsx"],"sourcesContent":["//\n// Copyright 2026 DXOS.org\n//\n\nimport React, { useMemo } from 'react';\n\nimport { type AppSurface } from '@dxos/app-toolkit/ui';\nimport { Filter, Obj } from '@dxos/echo';\nimport { useObject, useQuery } from '@dxos/echo-react';\nimport { Card } from '@dxos/react-ui';\n\nimport { Subscription } from '#types';\n\nimport { formatDate, getImageUrl, getSnippet } from '../../util';\n\nexport type PostCardProps = AppSurface.ObjectCardProps<Subscription.Post>;\n\n/**\n * Compact preview of a {@link Subscription.Post}. Rendered into the\n * `AppSurface.CardContent` slot — Card.Root is supplied by the surface host\n * (popovers, sections, related-objects), so the body emits Card.Body only.\n */\nexport const PostCard = ({ subject }: PostCardProps) => {\n  const [post] = useObject(subject);\n\n  // Resolve the source feed's display name when present. `post.feed?.target?.name` only\n  // resolves synchronously when the ref is already loaded; querying via useQuery means\n  // the meta line lights up as soon as the feed lands in the space.\n  const db = Obj.getDatabase(post);\n  const allFeeds = useQuery(db, Filter.type(Subscription.Subscription));\n  const feedName = useMemo(() => {\n    const dxn = post.source?.uri;\n    if (!dxn) {\n      return undefined;\n    }\n    return allFeeds.find((feed) => Obj.getURI(feed) === dxn)?.name;\n  }, [post.source, allFeeds]);\n\n  const published = formatDate(post.published);\n  // snippet/imageUrl are derived from the Post's description (no content-feed entry in this surface).\n  const imageUrl = getImageUrl(post);\n  const snippet = useMemo(() => getSnippet(post) || undefined, [post.description]);\n\n  return (\n    <Card.Body>\n      {imageUrl && <Card.Poster alt={post.title ?? ''} image={imageUrl} fit='cover' classNames='rounded-t-xs' />}\n      {post.title && (\n        <Card.Row>\n          <Card.Title classNames='line-clamp-2'>{post.title}</Card.Title>\n        </Card.Row>\n      )}\n      {snippet && (\n        <Card.Row>\n          <Card.Text variant='description' classNames='line-clamp-3'>\n            {snippet}\n          </Card.Text>\n        </Card.Row>\n      )}\n      {(feedName || published) && (\n        <Card.Row>\n          <div className='grid grid-cols-[minmax(0,1fr)_auto] items-center gap-2 text-sm text-description overflow-hidden'>\n            <span className='truncate'>{feedName ?? ''}</span>\n            <span className='text-end shrink-0'>{published ?? ''}</span>\n          </div>\n        </Card.Row>\n      )}\n      {post.link && <Card.Link label={post.link} href={post.link} />}\n    </Card.Body>\n  );\n};\n\nPostCard.displayName = 'PostCard';\n"],"mappings":";;;;;;;;;;;;;;AAsBA,IAAa,YAAY,EAAE,cAA6B;CACtD,MAAM,CAAC,QAAQ,UAAU,OAAO;CAMhC,MAAM,WAAW,SADN,IAAI,YAAY,IACD,GAAI,OAAO,KAAK,aAAa,YAAY,CAAC;CACpE,MAAM,WAAW,cAAc;EAC7B,MAAM,MAAM,KAAK,QAAQ;EACzB,IAAI,CAAC,KACH;EAEF,OAAO,SAAS,MAAM,SAAS,IAAI,OAAO,IAAI,MAAM,GAAG,CAAC,EAAE;CAC5D,GAAG,CAAC,KAAK,QAAQ,QAAQ,CAAC;CAE1B,MAAM,YAAY,WAAW,KAAK,SAAS;CAE3C,MAAM,WAAW,YAAY,IAAI;CACjC,MAAM,UAAU,cAAc,WAAW,IAAI,KAAK,KAAA,GAAW,CAAC,KAAK,WAAW,CAAC;CAE/E,OACE,qBAAC,KAAK,MAAN,EAAA,UAAA;EACG,YAAY,oBAAC,KAAK,QAAN;GAAa,KAAK,KAAK,SAAS;GAAI,OAAO;GAAU,KAAI;GAAQ,YAAW;EAAgB,CAAA;EACxG,KAAK,SACJ,oBAAC,KAAK,KAAN,EAAA,UACE,oBAAC,KAAK,OAAN;GAAY,YAAW;aAAgB,KAAK;EAAkB,CAAA,EACtD,CAAA;EAEX,WACC,oBAAC,KAAK,KAAN,EAAA,UACE,oBAAC,KAAK,MAAN;GAAW,SAAQ;GAAc,YAAW;aACzC;EACQ,CAAA,EACH,CAAA;GAEV,YAAY,cACZ,oBAAC,KAAK,KAAN,EAAA,UACE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,QAAD;IAAM,WAAU;cAAY,YAAY;GAAS,CAAA,GACjD,oBAAC,QAAD;IAAM,WAAU;cAAqB,aAAa;GAAS,CAAA,CACxD;KACG,CAAA;EAEX,KAAK,QAAQ,oBAAC,KAAK,MAAN;GAAW,OAAO,KAAK;GAAM,MAAM,KAAK;EAAO,CAAA;CACpD,EAAA,CAAA;AAEf;AAEA,SAAS,cAAc"}