@dxos/plugin-youtube 0.8.3 → 0.8.4-main.bcb3aa67d6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-youtube",
-  "version": "0.8.3",
+  "version": "0.8.4-main.bcb3aa67d6",
   "description": "DXOS YouTube feed plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -12,6 +12,14 @@
   "author": "DXOS.org",
   "sideEffects": true,
   "type": "module",
+  "imports": {
+    "#blueprints": "./src/blueprints/index.ts",
+    "#capabilities": "./src/capabilities/index.ts",
+    "#containers": "./src/containers/index.ts",
+    "#meta": "./src/meta.ts",
+    "#operations": "./src/operations/index.ts",
+    "#types": "./src/types/index.ts"
+  },
   "exports": {
     ".": {
       "source": "./src/index.ts",
@@ -53,35 +61,35 @@
     "@radix-ui/react-context": "1.1.1",
     "effect": "3.20.0",
     "youtube-caption-extractor": "^1.9.1",
-    "@dxos/blueprints": "0.8.3",
-    "@dxos/app-framework": "0.8.3",
-    "@dxos/app-toolkit": "0.8.3",
-    "@dxos/async": "0.8.3",
-    "@dxos/client": "0.8.3",
-    "@dxos/debug": "0.8.3",
-    "@dxos/echo-atom": "0.8.3",
-    "@dxos/echo": "0.8.3",
-    "@dxos/effect": "0.8.3",
-    "@dxos/echo-db": "0.8.3",
-    "@dxos/invariant": "0.8.3",
-    "@dxos/errors": "0.8.3",
-    "@dxos/plugin-attention": "0.8.3",
-    "@dxos/log": "0.8.3",
-    "@dxos/operation": "0.8.3",
-    "@dxos/plugin-automation": "0.8.3",
-    "@dxos/plugin-client": "0.8.3",
-    "@dxos/functions": "0.8.3",
-    "@dxos/plugin-graph": "0.8.3",
-    "@dxos/plugin-space": "0.8.3",
-    "@dxos/react-ui-attention": "0.8.3",
-    "@dxos/schema": "0.8.3",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/types": "0.8.3",
-    "@dxos/react-client": "0.8.3",
-    "@dxos/keys": "0.8.3",
-    "@dxos/plugin-deck": "0.8.3",
-    "@dxos/util": "0.8.3",
-    "@dxos/react-ui-stack": "0.8.3"
+    "@dxos/app-framework": "0.8.4-main.bcb3aa67d6",
+    "@dxos/app-toolkit": "0.8.4-main.bcb3aa67d6",
+    "@dxos/async": "0.8.4-main.bcb3aa67d6",
+    "@dxos/client": "0.8.4-main.bcb3aa67d6",
+    "@dxos/echo-atom": "0.8.4-main.bcb3aa67d6",
+    "@dxos/debug": "0.8.4-main.bcb3aa67d6",
+    "@dxos/echo": "0.8.4-main.bcb3aa67d6",
+    "@dxos/echo-db": "0.8.4-main.bcb3aa67d6",
+    "@dxos/errors": "0.8.4-main.bcb3aa67d6",
+    "@dxos/effect": "0.8.4-main.bcb3aa67d6",
+    "@dxos/invariant": "0.8.4-main.bcb3aa67d6",
+    "@dxos/functions": "0.8.4-main.bcb3aa67d6",
+    "@dxos/blueprints": "0.8.4-main.bcb3aa67d6",
+    "@dxos/log": "0.8.4-main.bcb3aa67d6",
+    "@dxos/operation": "0.8.4-main.bcb3aa67d6",
+    "@dxos/plugin-automation": "0.8.4-main.bcb3aa67d6",
+    "@dxos/plugin-attention": "0.8.4-main.bcb3aa67d6",
+    "@dxos/plugin-deck": "0.8.4-main.bcb3aa67d6",
+    "@dxos/plugin-client": "0.8.4-main.bcb3aa67d6",
+    "@dxos/plugin-graph": "0.8.4-main.bcb3aa67d6",
+    "@dxos/react-client": "0.8.4-main.bcb3aa67d6",
+    "@dxos/react-ui": "0.8.4-main.bcb3aa67d6",
+    "@dxos/react-ui-attention": "0.8.4-main.bcb3aa67d6",
+    "@dxos/plugin-space": "0.8.4-main.bcb3aa67d6",
+    "@dxos/react-ui-stack": "0.8.4-main.bcb3aa67d6",
+    "@dxos/schema": "0.8.4-main.bcb3aa67d6",
+    "@dxos/types": "0.8.4-main.bcb3aa67d6",
+    "@dxos/keys": "0.8.4-main.bcb3aa67d6",
+    "@dxos/util": "0.8.4-main.bcb3aa67d6"
   },
   "devDependencies": {
     "@types/react": "~19.2.7",
@@ -89,14 +97,14 @@
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
     "vite": "^7.1.11",
-    "@dxos/plugin-testing": "0.8.3",
-    "@dxos/plugin-theme": "0.8.3",
-    "@dxos/protocols": "0.8.3",
-    "@dxos/config": "0.8.3",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/random": "0.8.3",
-    "@dxos/storybook-utils": "0.8.3",
-    "@dxos/ui-theme": "0.8.3"
+    "@dxos/plugin-theme": "0.8.4-main.bcb3aa67d6",
+    "@dxos/protocols": "0.8.4-main.bcb3aa67d6",
+    "@dxos/random": "0.8.4-main.bcb3aa67d6",
+    "@dxos/config": "0.8.4-main.bcb3aa67d6",
+    "@dxos/storybook-utils": "0.8.4-main.bcb3aa67d6",
+    "@dxos/ui-theme": "0.8.4-main.bcb3aa67d6",
+    "@dxos/react-ui": "0.8.4-main.bcb3aa67d6",
+    "@dxos/plugin-testing": "0.8.4-main.bcb3aa67d6"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
@@ -104,8 +112,8 @@
     "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/ui-theme": "0.8.3"
+    "@dxos/ui-theme": "0.8.4-main.bcb3aa67d6",
+    "@dxos/react-ui": "0.8.4-main.bcb3aa67d6"
   },
   "publishConfig": {
     "access": "public"

package/src/YouTubePlugin.tsx

@@ -9,15 +9,17 @@ import { ActivationEvent, Plugin } from '@dxos/app-framework';
 import { AppActivationEvents, AppPlugin } from '@dxos/app-toolkit';
 import { Annotation } from '@dxos/echo';
 import { Operation } from '@dxos/operation';
-import { AttentionEvents } from '@dxos/plugin-attention';
+import { AttentionEvents } from '@dxos/plugin-attention/types';
+import { ClientEvents } from '@dxos/plugin-client/types';
 import { type CreateObject } from '@dxos/plugin-space/types';
 import { SpaceOperation } from '@dxos/plugin-space/operations';
 
-import { YouTubeBlueprint } from './blueprints';
-import { AppGraphBuilder, BlueprintDefinition, ReactSurface } from './capabilities';
-import { meta } from './meta';
+import { YouTubeBlueprint } from '#blueprints';
+import { meta } from '#meta';
 import { translations } from './translations';
-import { Channel, Video } from './types';
+import { Channel, Video } from '#types';
+
+import { AppGraphBuilder, BlueprintDefinition, Migrations, ReactSurface } from '#capabilities';
 
 export const YouTubePlugin = Plugin.define(meta).pipe(
   AppPlugin.addAppGraphModule({
@@ -62,5 +64,9 @@ export const YouTubePlugin = Plugin.define(meta).pipe(
   }),
   AppPlugin.addSurfaceModule({ activate: ReactSurface }),
   AppPlugin.addTranslationsModule({ translations }),
+  Plugin.addModule({
+    activatesOn: ClientEvents.SetupMigration,
+    activate: Migrations,
+  }),
   Plugin.make,
 );

package/src/blueprints/youtube.ts

@@ -6,7 +6,7 @@ import { type AppCapabilities } from '@dxos/app-toolkit';
 import { Blueprint, Template } from '@dxos/blueprints';
 import { trim } from '@dxos/util';
 
-import { ClearSyncedVideos, Sync } from '../operations';
+import { ClearSyncedVideos, Sync } from '#operations';
 
 const BLUEPRINT_KEY = 'dxos.org/blueprint/youtube';
 

package/src/capabilities/{app-graph-builder/app-graph-builder.ts → app-graph-builder.ts}

@@ -7,20 +7,21 @@ import * as Effect from 'effect/Effect';
 import * as Option from 'effect/Option';
 
 import { Capability } from '@dxos/app-framework';
-import { AppCapabilities, companionSegment, LayoutOperation } from '@dxos/app-toolkit';
+import { AppCapabilities, AppNode, LayoutOperation } from '@dxos/app-toolkit';
+import { linkedSegment } from '@dxos/react-ui-attention';
 import { type Feed, Filter, Obj, Query, Ref } from '@dxos/echo';
 import { AtomQuery, AtomRef } from '@dxos/echo-atom';
 import { invariant } from '@dxos/invariant';
 import { log } from '@dxos/log';
 import { Operation } from '@dxos/operation';
-import { AttentionCapabilities } from '@dxos/plugin-attention';
-import { AutomationCapabilities, invokeFunctionWithTracing } from '@dxos/plugin-automation';
-import { PLANK_COMPANION_TYPE } from '@dxos/plugin-deck/types';
+import { AttentionCapabilities } from '@dxos/plugin-attention/types';
+import { invokeFunctionWithTracing } from '@dxos/plugin-automation/hooks';
+import { AutomationCapabilities } from '@dxos/plugin-automation/types';
 import { GraphBuilder, NodeMatcher } from '@dxos/plugin-graph';
 
-import { ClearSyncedVideos, Sync } from '../../operations';
-import { meta } from '../../meta';
-import { Channel, Video } from '../../types';
+import { ClearSyncedVideos, Sync } from '#operations';
+import { meta } from '#meta';
+import { Channel, Video } from '#types';
 
 export default Capability.makeModule(
   Effect.fnUntraced(function* () {
@@ -56,16 +57,12 @@ export default Capability.makeModule(
             ),
           )[0];
           return Effect.succeed([
-            {
-              id: companionSegment('video'),
-              type: PLANK_COMPANION_TYPE,
+            AppNode.makeCompanion({
+              id: linkedSegment('video'),
+              label: ['video.label', { ns: meta.id }],
+              icon: 'ph--play--regular',
               data: video ?? 'video',
-              properties: {
-                label: ['video label', { ns: meta.id }],
-                icon: 'ph--play--regular',
-                disposition: 'hidden',
-              },
-            },
+            }),
           ]);
         },
       }),
@@ -95,14 +92,14 @@ export default Capability.makeModule(
                       id: `${meta.id}.sync-channel-error`,
                       icon: 'ph--warning--regular',
                       duration: 5_000,
-                      title: ['sync channel error title', { ns: meta.id }],
-                      closeLabel: ['close label', { ns: meta.id }],
+                      title: ['sync-channel-error.title', { ns: meta.id }],
+                      closeLabel: ['close.label', { ns: meta.id }],
                     });
                   }),
                 );
               }),
               properties: {
-                label: ['sync channel label', { ns: meta.id }],
+                label: ['sync-channel.label', { ns: meta.id }],
                 icon: 'ph--arrows-clockwise--regular',
                 disposition: 'list-item',
               },
@@ -127,14 +124,14 @@ export default Capability.makeModule(
                       id: `${meta.id}.clear-synced-videos-error`,
                       icon: 'ph--warning--regular',
                       duration: 5_000,
-                      title: ['clear synced videos error title', { ns: meta.id }],
-                      closeLabel: ['close label', { ns: meta.id }],
+                      title: ['clear-synced-videos-error.title', { ns: meta.id }],
+                      closeLabel: ['close.label', { ns: meta.id }],
                     });
                   }),
                 );
               }),
               properties: {
-                label: ['clear synced videos label', { ns: meta.id }],
+                label: ['clear-synced-videos.label', { ns: meta.id }],
                 icon: 'ph--trash--regular',
                 disposition: 'list-item',
               },

package/src/capabilities/{blueprint-definition/blueprint-definition.ts → blueprint-definition.ts}

@@ -7,7 +7,7 @@ import * as Effect from 'effect/Effect';
 import { Capability } from '@dxos/app-framework';
 import { AppCapabilities } from '@dxos/app-toolkit';
 
-import { YouTubeBlueprint } from '../../blueprints';
+import { YouTubeBlueprint } from '#blueprints';
 
 const blueprintDefinition = Capability.makeModule<
   [],

package/src/capabilities/index.ts

@@ -1,7 +1,10 @@
 //
-// Copyright 2024 DXOS.org
+// Copyright 2025 DXOS.org
 //
 
-export * from './app-graph-builder';
-export * from './blueprint-definition';
-export * from './react-surface';
+import { Capability } from '@dxos/app-framework';
+
+export const AppGraphBuilder = Capability.lazy('AppGraphBuilder', () => import('./app-graph-builder'));
+export const BlueprintDefinition = Capability.lazy('BlueprintDefinition', () => import('./blueprint-definition'));
+export const Migrations = Capability.lazy('YouTubeMigrations', () => import('./migrations'));
+export const ReactSurface = Capability.lazy('ReactSurface', () => import('./react-surface'));

package/src/capabilities/migrations.ts

@@ -0,0 +1,35 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capability } from '@dxos/app-framework';
+import { defineObjectMigration } from '@dxos/client/echo';
+import { ClientCapabilities } from '@dxos/plugin-client/types';
+
+import { Channel, Video } from '#types';
+
+const identityTransform = async (from: any) => ({ ...from });
+const noopCallback = async () => {};
+
+const migrations = [
+  defineObjectMigration({
+    from: Channel.LegacyYouTubeChannel,
+    to: Channel.YouTubeChannel,
+    transform: identityTransform,
+    onMigration: noopCallback,
+  }),
+  defineObjectMigration({
+    from: Video.LegacyYouTubeVideo,
+    to: Video.YouTubeVideo,
+    transform: identityTransform,
+    onMigration: noopCallback,
+  }),
+];
+
+export default Capability.makeModule(
+  Effect.fnUntraced(function* () {
+    return Capability.contributes(ClientCapabilities.Migration, migrations);
+  }),
+);

package/src/capabilities/{react-surface/react-surface.tsx → react-surface.tsx}

@@ -8,9 +8,9 @@ import React from 'react';
 import { Capabilities, Capability } from '@dxos/app-framework';
 import { Surface } from '@dxos/app-framework/ui';
 
-import { ChannelArticle, ChannelSettings, VideoArticle, VideoCard } from '../../containers';
-import { meta } from '../../meta';
-import { Channel, Video } from '../../types';
+import { ChannelArticle, ChannelSettings, VideoArticle, VideoCard } from '#containers';
+import { meta } from '#meta';
+import { Channel, Video } from '#types';
 
 export default Capability.makeModule(() =>
   Effect.succeed(
@@ -34,7 +34,7 @@ export default Capability.makeModule(() =>
           Video.instanceOf(data.subject) &&
           Channel.instanceOf(data.companionTo),
         component: ({ data: { attendableId, companionTo, subject }, role }) => {
-          return <VideoArticle role={role} subject={subject} channel={companionTo} attendableId={attendableId} />;
+          return <VideoArticle role={role} subject={subject} companionTo={companionTo} attendableId={attendableId} />;
         },
       }),
       Surface.create({

package/src/containers/VideoArticle/VideoArticle.tsx

@@ -4,17 +4,12 @@
 
 import React, { useState } from 'react';
 
+import { type CompanionSurfaceProps } from '@dxos/app-toolkit/ui';
 import { Icon, Panel } from '@dxos/react-ui';
 
-import * as Channel from '../../types/Channel';
 import * as Video from '../../types/Video';
 
-export type VideoArticleProps = {
-  role: string | string[];
-  subject: Video.YouTubeVideo;
-  channel: Channel.YouTubeChannel;
-  attendableId?: string;
-};
+export type VideoArticleProps = CompanionSurfaceProps<Video.YouTubeVideo>;
 
 export const VideoArticle = ({ subject: video, role }: VideoArticleProps) => {
   const [showPlayer, setShowPlayer] = useState(false);

package/src/containers/VideoCard/VideoCard.tsx

@@ -4,12 +4,12 @@
 
 import React, { useState } from 'react';
 
-import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
+import { type ObjectSurfaceProps } from '@dxos/app-toolkit/ui';
 import { Card, Icon } from '@dxos/react-ui';
 
 import * as Video from '../../types/Video';
 
-export type VideoCardProps = SurfaceComponentProps<Video.YouTubeVideo>;
+export type VideoCardProps = ObjectSurfaceProps<Video.YouTubeVideo>;
 
 /**
  * YouTube video card with embedded player.

package/src/translations.ts

@@ -4,55 +4,55 @@
 
 import { type Resource } from '@dxos/react-ui';
 
-import { meta } from './meta';
-import { Channel, Video } from './types';
+import { meta } from '#meta';
+import { Channel, Video } from '#types';
 
 export const translations = [
   {
     'en-US': {
       [Channel.YouTubeChannel.typename]: {
-        'typename label': 'YouTube Channel',
-        'typename label_zero': 'YouTube Channels',
-        'typename label_one': 'YouTube Channel',
-        'typename label_other': 'YouTube Channels',
-        'object name placeholder': 'New YouTube channel',
-        'add object label': 'Add YouTube channel',
-        'rename object label': 'Rename YouTube channel',
-        'delete object label': 'Delete YouTube channel',
-        'object deleted label': 'YouTube channel deleted',
+        'typename.label': 'YouTube Channel',
+        'typename.label_zero': 'YouTube Channels',
+        'typename.label_one': 'YouTube Channel',
+        'typename.label_other': 'YouTube Channels',
+        'object-name.placeholder': 'New YouTube channel',
+        'add-object.label': 'Add YouTube channel',
+        'rename-object.label': 'Rename YouTube channel',
+        'delete-object.label': 'Delete YouTube channel',
+        'object-deleted.label': 'YouTube channel deleted',
       },
       [Video.YouTubeVideo.typename]: {
-        'typename label': 'Video',
-        'typename label_zero': 'Videos',
-        'typename label_one': 'Video',
-        'typename label_other': 'Videos',
-        'object name placeholder': 'New video',
-        'add object label': 'Add video',
-        'rename object label': 'Rename video',
-        'delete object label': 'Delete video',
-        'object deleted label': 'Video deleted',
+        'typename.label': 'Video',
+        'typename.label_zero': 'Videos',
+        'typename.label_one': 'Video',
+        'typename.label_other': 'Videos',
+        'object-name.placeholder': 'New video',
+        'add-object.label': 'Add video',
+        'rename-object.label': 'Rename video',
+        'delete-object.label': 'Delete video',
+        'object-deleted.label': 'Video deleted',
       },
       [meta.id]: {
-        'plugin name': 'YouTube',
-        'channel label': 'YouTube Channel',
-        'video label': 'Video',
-        'sync channel label': 'Sync channel',
-        'sync channel error title': 'Failed to sync channel',
-        'clear synced videos label': 'Clear synced videos',
-        'clear synced videos error title': 'Failed to clear synced videos',
-        'close label': 'Close',
-        'new channel label': 'New YouTube Channel',
-        'empty channel message': 'No videos synced yet',
-        'no video message': 'Select a video to view it',
+        'plugin.name': 'YouTube',
+        'channel.label': 'YouTube Channel',
+        'video.label': 'Video',
+        'sync-channel.label': 'Sync channel',
+        'sync-channel-error.title': 'Failed to sync channel',
+        'clear-synced-videos.label': 'Clear synced videos',
+        'clear-synced-videos-error.title': 'Failed to clear synced videos',
+        'close.label': 'Close',
+        'new-channel.label': 'New YouTube Channel',
+        'empty-channel.message': 'No videos synced yet',
+        'no-video.message': 'Select a video to view it',
 
-        'channel account label': 'Account',
-        'channel account placeholder': 'Select account...',
-        'channel sync label': 'Channel Sync',
+        'channel-account.label': 'Account',
+        'channel-account.placeholder': 'Select account...',
+        'channel-sync.label': 'Channel Sync',
 
-        'enable background sync label': 'Enable background sync',
-        'enabling background sync label': 'Enabling...',
-        'disable background sync label': 'Disable background sync',
-        'view trigger label': 'View trigger',
+        'enable-background-sync.label': 'Enable background sync',
+        'enabling-background-sync.label': 'Enabling...',
+        'disable-background-sync.label': 'Disable background sync',
+        'view-trigger.label': 'View trigger',
       },
     },
   },

package/src/types/Channel.ts

@@ -11,6 +11,23 @@ import { AccessToken } from '@dxos/types';
 
 // @import-as-namespace
 
+/** @deprecated Use YouTubeChannel instead. */
+export const LegacyYouTubeChannel = Schema.Struct({
+  name: Schema.String.pipe(Schema.optional),
+  channelId: Schema.String.pipe(Schema.optional),
+  channelUrl: Schema.String.pipe(Schema.optional),
+  feed: Ref.Ref(Feed.Feed),
+  lastSyncedAt: Schema.String.pipe(Schema.optional),
+  accessToken: Schema.optional(Ref.Ref(AccessToken.AccessToken)),
+}).pipe(
+  Type.object({
+    typename: 'org.dxos.type.youtube-channel',
+    version: '0.1.0',
+  }),
+);
+
+export interface LegacyYouTubeChannel extends Schema.Schema.Type<typeof LegacyYouTubeChannel> {}
+
 /**
  * YouTubeChannel schema representing a YouTube channel to sync videos from.
  */
@@ -34,7 +51,7 @@ export const YouTubeChannel = Schema.Struct({
   ),
 }).pipe(
   Type.object({
-    typename: 'org.dxos.type.youtube-channel',
+    typename: 'org.dxos.type.youtubeChannel',
     version: '0.1.0',
   }),
   Annotation.IconAnnotation.set({

package/src/types/Video.ts

@@ -20,6 +20,30 @@ export const TranscriptSegment = Schema.Struct({
 
 export type TranscriptSegment = Schema.Schema.Type<typeof TranscriptSegment>;
 
+/** @deprecated Use YouTubeVideo instead. */
+export const LegacyYouTubeVideo = Schema.Struct({
+  title: Schema.String,
+  videoId: Schema.String,
+  description: Schema.String.pipe(Schema.optional),
+  url: Schema.String,
+  thumbnailUrl: Schema.String.pipe(Schema.optional),
+  channelTitle: Schema.String.pipe(Schema.optional),
+  publishedAt: Schema.String,
+  duration: Schema.String.pipe(Schema.optional),
+  viewCount: Schema.Number.pipe(Schema.optional),
+  likeCount: Schema.Number.pipe(Schema.optional),
+  transcript: Schema.String.pipe(Schema.optional),
+  transcriptSegments: Schema.Array(TranscriptSegment).pipe(Schema.optional),
+  transcriptFetched: Schema.Boolean.pipe(Schema.optional),
+}).pipe(
+  Type.object({
+    typename: 'org.dxos.type.youtube-video',
+    version: '0.1.0',
+  }),
+);
+
+export interface LegacyYouTubeVideo extends Schema.Schema.Type<typeof LegacyYouTubeVideo> {}
+
 /**
  * YouTubeVideo schema representing a video from a YouTube channel.
  */
@@ -52,7 +76,7 @@ export const YouTubeVideo = Schema.Struct({
   transcriptFetched: Schema.Boolean.pipe(Schema.optional),
 }).pipe(
   Type.object({
-    typename: 'org.dxos.type.youtube-video',
+    typename: 'org.dxos.type.youtubeVideo',
     version: '0.1.0',
   }),
   Annotation.IconAnnotation.set({

package/dist/lib/browser/ChannelArticle-CDQR4BBY.mjs

@@ -1,90 +0,0 @@
-import {
-  YouTubeVideo
-} from "./chunk-YMDT37TA.mjs";
-import "./chunk-J5LGTIGS.mjs";
-
-// src/containers/ChannelArticle/ChannelArticle.tsx
-import React, { useMemo } from "react";
-import { Obj, Query } from "@dxos/echo";
-import { Filter, useObject, useQuery } from "@dxos/react-client/echo";
-import { Icon, Panel } from "@dxos/react-ui";
-var ChannelArticle = ({ subject: channel }) => {
-  useObject(channel);
-  const feed = channel.feed?.target;
-  const db = Obj.getDatabase(channel);
-  const videos = useQuery(db, feed ? Query.select(Filter.type(YouTubeVideo)).from(feed) : Query.select(Filter.nothing()));
-  const sortedVideos = useMemo(() => [
-    ...videos
-  ].sort((videoA, videoB) => new Date(videoB.publishedAt).getTime() - new Date(videoA.publishedAt).getTime()), [
-    videos
-  ]);
-  return /* @__PURE__ */ React.createElement(Panel.Root, null, /* @__PURE__ */ React.createElement(Panel.Content, {
-    className: "overflow-auto"
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: "flex flex-col gap-4 p-4"
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: "flex items-center justify-between"
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: "flex items-center gap-2"
-  }, /* @__PURE__ */ React.createElement(Icon, {
-    icon: "ph--youtube-logo--regular",
-    size: 6
-  }), /* @__PURE__ */ React.createElement("h2", {
-    className: "text-lg font-semibold"
-  }, channel.name ?? "YouTube Channel")), channel.lastSyncedAt && /* @__PURE__ */ React.createElement("span", {
-    className: "text-xs text-description"
-  }, "Last synced: ", new Date(channel.lastSyncedAt).toLocaleString())), channel.channelUrl && /* @__PURE__ */ React.createElement("div", {
-    className: "text-sm text-description"
-  }, /* @__PURE__ */ React.createElement("a", {
-    href: channel.channelUrl.startsWith("http") ? channel.channelUrl : `https://www.youtube.com/@${channel.channelUrl}`,
-    target: "_blank",
-    rel: "noopener noreferrer",
-    className: "hover:underline"
-  }, channel.channelUrl)), /* @__PURE__ */ React.createElement("div", {
-    className: "flex flex-col gap-2"
-  }, /* @__PURE__ */ React.createElement("h3", {
-    className: "text-md font-medium"
-  }, "Videos (", sortedVideos.length, ")"), /* @__PURE__ */ React.createElement("div", {
-    className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
-  }, sortedVideos.map((video) => /* @__PURE__ */ React.createElement("div", {
-    key: video.videoId,
-    className: "flex flex-col gap-2 p-2 rounded hover:bg-surface-hover"
-  }, video.thumbnailUrl ? /* @__PURE__ */ React.createElement("a", {
-    href: video.url,
-    target: "_blank",
-    rel: "noopener noreferrer",
-    className: "relative aspect-video group"
-  }, /* @__PURE__ */ React.createElement("img", {
-    src: video.thumbnailUrl,
-    alt: video.title,
-    className: "h-full w-full object-cover rounded"
-  }), /* @__PURE__ */ React.createElement("div", {
-    className: "absolute inset-0 flex items-center justify-center bg-black/0 group-hover:bg-black/30 rounded transition-colors"
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: "opacity-0 group-hover:opacity-100 bg-red-600 text-white rounded-full p-2 transition-opacity"
-  }, /* @__PURE__ */ React.createElement(Icon, {
-    icon: "ph--play--fill",
-    size: 4
-  })))) : /* @__PURE__ */ React.createElement("div", {
-    className: "aspect-video bg-surface-hover rounded flex items-center justify-center"
-  }, /* @__PURE__ */ React.createElement(Icon, {
-    icon: "ph--video--regular",
-    size: 8
-  })), /* @__PURE__ */ React.createElement("div", {
-    className: "flex flex-col gap-1"
-  }, /* @__PURE__ */ React.createElement("span", {
-    className: "font-medium line-clamp-2",
-    title: video.title
-  }, video.title), /* @__PURE__ */ React.createElement("span", {
-    className: "text-xs text-description"
-  }, new Date(video.publishedAt).toLocaleDateString(), video.transcript && " \u2022 Transcript available")))), sortedVideos.length === 0 && /* @__PURE__ */ React.createElement("div", {
-    className: "col-span-full text-sm text-description p-4 text-center"
-  }, "No videos synced yet. Sync the channel to fetch videos."))))));
-};
-
-// src/containers/ChannelArticle/index.ts
-var ChannelArticle_default = ChannelArticle;
-export {
-  ChannelArticle_default as default
-};
-//# sourceMappingURL=ChannelArticle-CDQR4BBY.mjs.map