@dxos/plugin-pipeline 0.8.4-main.c85a9c8dae → 0.8.4-main.effb148878

package/src/components/{PipelineComponent.stories.tsx → PipelineComponent/PipelineComponent.stories.tsx}

@@ -4,33 +4,33 @@
 
 import { RegistryContext } from '@effect-atom/atom-react';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useCallback, useContext, useEffect } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo } from 'react';
 
-import { Filter, Ref } from '@dxos/client/echo';
-import { JsonSchema, Obj, Query } from '@dxos/echo';
-import { Collection, View } from '@dxos/echo';
-import { faker } from '@dxos/random';
+import { Collection, Filter, JsonSchema, Obj, Query, Ref, Type, View } from '@dxos/echo';
+import { random } from '@dxos/random';
 import { useQuery } from '@dxos/react-client/echo';
 import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
-import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { Form, omitId } from '@dxos/react-ui-form';
 import { withMosaic } from '@dxos/react-ui-mosaic/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { ViewModel } from '@dxos/schema';
 import { createObjectFactory } from '@dxos/schema/testing';
 import { withRegistry } from '@dxos/storybook-utils';
 import { Person, Pipeline } from '@dxos/types';
 
-import { usePipelineBoardModel } from '../hooks';
-import { translations } from '../translations';
+import { usePipelineBoardModel } from '#hooks';
+import { translations } from '#translations';
 
 import { type ItemProps, PipelineComponent } from './PipelineComponent';
 
 const StorybookProjectItem = ({ item, projectionModel }: ItemProps) => {
+  const personSchema = useMemo(() => omitId(Type.getSchema(Person.Person)), []);
+
   if (Obj.instanceOf(Person.Person, item)) {
     const contact = item as Obj.OfShape<Person.Person>;
 
     return (
-      <Form.Root schema={omitId(Person.Person)} projection={projectionModel} values={contact} autoSave>
+      <Form.Root schema={personSchema} projection={projectionModel} values={contact} autoSave>
         <Form.Viewport>
           <Form.Content>
             <Form.FieldSet />
@@ -62,10 +62,10 @@ const DefaultStory = () => {
       fields: ['fullName'],
     });
 
-    Obj.change(pipeline, (p) => {
-      p.columns.push({
+    Obj.update(pipeline, (pipeline) => {
+      pipeline.columns.push({
         name: 'New Contacts',
-        view: Ref.make(view) as (typeof p.columns)[number]['view'],
+        view: Ref.make(view) as (typeof pipeline.columns)[number]['view'],
         order: [],
       });
     });
@@ -106,10 +106,10 @@ const MutationsStory = () => {
       fields: ['fullName'],
     });
 
-    Obj.change(pipeline, (p) => {
-      p.columns.push({
+    Obj.update(pipeline, (pipeline) => {
+      pipeline.columns.push({
         name: 'New Contacts',
-        view: Ref.make(view) as (typeof p.columns)[number]['view'],
+        view: Ref.make(view) as (typeof pipeline.columns)[number]['view'],
         order: [],
       });
     });
@@ -123,19 +123,19 @@ const MutationsStory = () => {
     }
 
     const interval = setInterval(() => {
-      const factory = createObjectFactory(space.db, faker as any);
+      const factory = createObjectFactory(space.db, random as any);
       const p = Math.random();
 
       if (p < 0.4) {
         // Append to the name
-        const contactToAdjust = faker.helpers.arrayElement(contacts);
-        Obj.change(contactToAdjust, (c) => {
-          c.fullName = (c.fullName ?? '') + ' X';
+        const contactToAdjust = random.helpers.arrayElement(contacts);
+        Obj.update(contactToAdjust, (contactToAdjust) => {
+          contactToAdjust.fullName = (contactToAdjust.fullName ?? '') + ' X';
         });
         return;
       } else if (p < 0.7 && contacts.length > 1) {
         // Remove a contact (30% chance, but only if we have more than 1)
-        const contactToRemove = faker.helpers.arrayElement(contacts);
+        const contactToRemove = random.helpers.arrayElement(contacts);
         space.db.remove(contactToRemove);
       } else {
         // Add a new contact (30% chance)
@@ -193,7 +193,7 @@ const meta = {
         );
 
         // Generate random contacts.
-        const factory = createObjectFactory(space.db, faker as any);
+        const factory = createObjectFactory(space.db, random as any);
         await factory([{ type: Person.Person, count: 12 }]);
       },
     }),

package/src/components/{PipelineComponent.tsx → PipelineComponent/PipelineComponent.tsx}

@@ -4,15 +4,17 @@
 
 import { useAtomValue } from '@effect-atom/atom-react';
 import { createContext } from '@radix-ui/react-context';
+import { Slot } from '@radix-ui/react-slot';
 import React, { type FC, type PropsWithChildren } from 'react';
 
 import { Obj } from '@dxos/echo';
 import { Toolbar, type ToolbarRootProps, useTranslation } from '@dxos/react-ui';
+import { composable, composableProps, slottable } from '@dxos/react-ui';
 import { Board, type BoardModel, useBoard, useEventHandlerAdapter } from '@dxos/react-ui-mosaic';
 import { type ProjectionModel } from '@dxos/schema';
 import { type Pipeline } from '@dxos/types';
 
-import { meta } from '../meta';
+import { meta } from '#meta';
 
 import { PipelineColumn } from './PipelineColumn';
 
@@ -59,10 +61,17 @@ type PipelineContentProps = PropsWithChildren<{
   model: BoardModel<Pipeline.Column, Obj.Unknown>;
 }>;
 
-const PipelineContent = ({ model, children, ...props }: PipelineContentProps) => (
-  <Board.Root {...props} model={model}>
-    {children}
-  </Board.Root>
+const PipelineContent = slottable<HTMLDivElement, PipelineContentProps>(
+  ({ asChild, model, children, ...props }, forwardedRef) => {
+    const Comp = asChild ? Slot : 'div';
+    return (
+      <Board.Root model={model}>
+        <Comp {...composableProps(props)} ref={forwardedRef}>
+          {children}
+        </Comp>
+      </Board.Root>
+    );
+  },
 );
 
 PipelineContent.displayName = PIPELINE_CONTENT_NAME;
@@ -77,7 +86,7 @@ type PipelineColumnsProps = {
   pipeline: Pipeline.Pipeline;
 };
 
-const PipelineColumns = ({ pipeline }: PipelineColumnsProps) => {
+const PipelineColumns = composable<HTMLDivElement, PipelineColumnsProps>(({ pipeline, ...props }) => {
   const { model } = useBoard(PIPELINE_COLUMNS_NAME);
   const columns = useAtomValue(model.columns);
   const eventHandler = useEventHandlerAdapter<Pipeline.Column, Obj.Unknown>({
@@ -88,11 +97,11 @@ const PipelineColumns = ({ pipeline }: PipelineColumnsProps) => {
     get: (data) => data as unknown as Obj.Unknown,
     make: (object) => object as unknown as Pipeline.Column,
     canDrop: ({ source }) => model.isColumn(source.data),
-    onChange: (mutate) => Obj.change(pipeline, (p) => mutate(p.columns)),
+    onChange: (mutate) => Obj.update(pipeline, (pipeline) => mutate(pipeline.columns)),
   });
 
-  return <Board.Content id='pipeline' eventHandler={eventHandler} Tile={PipelineColumn} />;
-};
+  return <Board.Content {...props} id='pipeline' eventHandler={eventHandler} Tile={PipelineColumn} />;
+});
 
 PipelineColumns.displayName = PIPELINE_COLUMNS_NAME;
 
@@ -102,16 +111,16 @@ PipelineColumns.displayName = PIPELINE_COLUMNS_NAME;
 
 const PIPELINE_TOOLBAR_NAME = 'Pipeline.Toolbar';
 
-export const PipelineToolbar = (props: ToolbarRootProps) => {
+export const PipelineToolbar = composable<HTMLDivElement, ToolbarRootProps>(({ children, ...props }, forwardedRef) => {
   const { t } = useTranslation(meta.id);
   const { onAddColumn } = usePipeline(PIPELINE_TOOLBAR_NAME);
 
   return (
-    <Toolbar.Root {...props}>
-      <Toolbar.IconButton icon='ph--plus--regular' iconOnly label={t('add column label')} onClick={onAddColumn} />
+    <Toolbar.Root {...composableProps(props)} ref={forwardedRef}>
+      <Toolbar.IconButton icon='ph--plus--regular' iconOnly label={t('add-column.label')} onClick={onAddColumn} />
     </Toolbar.Root>
   );
-};
+});
 
 PipelineToolbar.displayName = PIPELINE_TOOLBAR_NAME;
 

package/src/components/PipelineComponent/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './PipelineColumn';
+export * from './PipelineComponent';

package/src/components/index.ts

@@ -2,5 +2,4 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './PipelineColumn';
 export * from './PipelineComponent';

package/src/containers/{PipelineContainer/PipelineContainer.stories.tsx → PipelineArticle/PipelineArticle.stories.tsx}

@@ -8,28 +8,27 @@ import * as Layer from 'effect/Layer';
 import React from 'react';
 
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { Filter, Ref } from '@dxos/client/echo';
-import { Database, Feed, JsonSchema, Obj, Query, Tag } from '@dxos/echo';
-import { Collection, View } from '@dxos/echo';
+import { Collection, Database, Feed, Filter, JsonSchema, Obj, Query, Ref, Tag, View } from '@dxos/echo';
 import { createFeedServiceLayer } from '@dxos/echo-db';
-import { ClientPlugin } from '@dxos/plugin-client';
-import { InboxPlugin } from '@dxos/plugin-inbox';
-import { PreviewPlugin } from '@dxos/plugin-preview';
+import { ClientPlugin } from '@dxos/plugin-client/plugin';
+import { initializeIdentity } from '@dxos/plugin-client/testing';
+import { InboxPlugin } from '@dxos/plugin-inbox/plugin';
+import { PreviewPlugin } from '@dxos/plugin-preview/testing';
 import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 import { useDatabase, useQuery } from '@dxos/react-client/echo';
-import { withLayout, withTheme } from '@dxos/react-ui/testing';
-import { translations as stackTranslations } from '@dxos/react-ui-stack';
+import { translations as stackTranslations } from '@dxos/react-ui-stack/translations';
+import { withLayout } from '@dxos/react-ui/testing';
 import { ViewModel } from '@dxos/schema';
 import { createObjectFactory } from '@dxos/schema/testing';
 import { Message, Organization, Person, Pipeline, Task } from '@dxos/types';
 
-import { translations } from '../../translations';
-import PipelineObjectSettings from '../PipelineObjectSettings';
+import { translations } from '#translations';
 
-import { PipelineContainer } from './PipelineContainer';
+import PipelineProperties from '../PipelineProperties';
+import { PipelineArticle } from './PipelineArticle';
 
-faker.seed(0);
+random.seed(0);
 
 const DefaultStory = () => {
   const db = useDatabase();
@@ -42,17 +41,16 @@ const DefaultStory = () => {
 
   return (
     <div className='grow grid grid-cols-[1fr_350px] overflow-hidden h-full w-full'>
-      <PipelineContainer role='article' subject={pipeline} />
-      <PipelineObjectSettings pipeline={pipeline} classNames='border-s border-separator' />
+      <PipelineArticle role='article' subject={pipeline} attendableId='test' />
+      <PipelineProperties pipeline={pipeline} classNames='border-s border-separator' />
     </div>
   );
 };
 
 const meta = {
-  title: 'plugins/plugin-pipeline/containers/PipelineContainer',
+  title: 'plugins/plugin-pipeline/containers/PipelineArticle',
   render: DefaultStory,
   decorators: [
-    withTheme(),
     withLayout({ layout: 'fullscreen' }),
     withPluginManager({
       plugins: [
@@ -71,14 +69,11 @@ const meta = {
             Message.Message,
           ],
           onClientInitialized: Effect.fnUntraced(function* ({ client }) {
-            yield* Effect.promise(() => client.halo.createIdentity());
-            yield* Effect.promise(() => client.spaces.waitUntilReady());
-            const space = client.spaces.default;
-            yield* Effect.promise(() => space.waitUntilReady());
+            const { personalSpace } = yield* initializeIdentity(client);
 
             yield* Effect.gen(function* () {
               const tag = yield* Database.add(Tag.make({ label: 'important', hue: 'green' }));
-              const tagDxn = Obj.getDXN(tag).toString();
+              const tagUri = Obj.getURI(tag);
 
               // Create a view for Contacts.
               const personView = ViewModel.make({
@@ -88,13 +83,13 @@ const meta = {
 
               // Create a view for Organizations.
               const organizationView = ViewModel.make({
-                query: Query.select(Filter.type(Organization.Organization)).select(Filter.tag(tagDxn)),
+                query: Query.select(Filter.type(Organization.Organization)).select(Filter.tag(tagUri)),
                 jsonSchema: JsonSchema.toJsonSchema(Organization.Organization),
               });
 
               // Create a view for Tasks.
               const taskView = ViewModel.make({
-                query: Query.select(Filter.type(Task.Task)).select(Filter.tag(tagDxn)),
+                query: Query.select(Filter.type(Task.Task)).select(Filter.tag(tagUri)),
                 jsonSchema: JsonSchema.toJsonSchema(Task.Task),
               });
 
@@ -108,17 +103,17 @@ const meta = {
               const messageFeed = yield* Database.add(Feed.make({ name: 'Messages' }));
               const messages = Array.from({ length: 20 }).map(() =>
                 Obj.make(Message.Message, {
-                  created: faker.date.recent().toISOString(),
+                  created: random.date.recent().toISOString(),
                   sender: { role: 'user' },
-                  blocks: [{ _tag: 'text' as const, text: faker.lorem.sentences(2) }],
+                  blocks: [{ _tag: 'text' as const, text: random.lorem.sentences(2) }],
                 }),
               );
               yield* Feed.append(messageFeed, messages);
 
-              const messageQueueDxn = Feed.getQueueDxn(messageFeed)!.toString();
+              const messageQueueDxn = Feed.getQueueUri(messageFeed)!;
               const messageView = ViewModel.make({
                 query: Query.select(Filter.type(Message.Message)).from({
-                  queues: [messageQueueDxn],
+                  feeds: [messageQueueDxn],
                 }),
                 jsonSchema: JsonSchema.toJsonSchema(Message.Message),
               });
@@ -127,9 +122,9 @@ const meta = {
               const taskFeed = yield* Database.add(Feed.make({ name: 'Tasks' }));
               const feedTasks = Array.from({ length: 10 }).map(() =>
                 Obj.make(Task.Task, {
-                  title: faker.lorem.sentence(),
-                  status: faker.helpers.arrayElement(['todo', 'in-progress', 'done']) as any,
-                  priority: faker.helpers.arrayElement(['low', 'medium', 'high']) as any,
+                  title: random.lorem.sentence(),
+                  status: random.helpers.arrayElement(['todo', 'in-progress', 'done']) as any,
+                  priority: random.helpers.arrayElement(['low', 'medium', 'high']) as any,
                 }),
               );
               yield* Feed.append(taskFeed, feedTasks);
@@ -171,12 +166,12 @@ const meta = {
                 yield* Database.add(
                   Obj.make(Organization.Organization, {
                     [Obj.Meta]: {
-                      tags: faker.datatype.boolean() ? [tagDxn] : [],
+                      tags: random.datatype.boolean() ? [tagUri] : [],
                     },
-                    name: faker.company.name(),
-                    website: faker.internet.url(),
-                    description: faker.lorem.paragraph(),
-                    image: faker.image.url(),
+                    name: random.company.name(),
+                    website: random.internet.url(),
+                    description: random.lorem.paragraph(),
+                    image: random.image.url(),
                   }),
                 );
               }
@@ -186,29 +181,33 @@ const meta = {
                 yield* Database.add(
                   Obj.make(Task.Task, {
                     [Obj.Meta]: {
-                      tags: faker.datatype.boolean() ? [tagDxn] : [],
+                      tags: random.datatype.boolean() ? [tagUri] : [],
                     },
-                    title: faker.lorem.sentence(),
-                    status: faker.helpers.arrayElement(['todo', 'in-progress', 'done']) as any,
-                    priority: faker.helpers.arrayElement(['low', 'medium', 'high']) as any,
+                    title: random.lorem.sentence(),
+                    status: random.helpers.arrayElement(['todo', 'in-progress', 'done']) as any,
+                    priority: random.helpers.arrayElement(['low', 'medium', 'high']) as any,
                   }),
                 );
               }
 
               // Generate sample Contacts.
-              const factory = createObjectFactory(space.db, faker as any);
+              const factory = createObjectFactory(personalSpace.db, random as any);
               yield* Effect.promise(() => factory([{ type: Person.Person, count: 12 }]));
 
               // Generate sample Projects.
               for (const _ of Array.from({ length: 20 })) {
                 yield* Database.add(
                   Pipeline.make({
-                    name: faker.commerce.productName(),
-                    description: faker.lorem.sentence(),
+                    name: random.commerce.productName(),
+                    description: random.lorem.sentence(),
                   }),
                 );
               }
-            }).pipe(Effect.provide(Layer.merge(Database.layer(space.db), createFeedServiceLayer(space.queues))));
+            }).pipe(
+              Effect.provide(
+                Layer.merge(Database.layer(personalSpace.db), createFeedServiceLayer(personalSpace.queues)),
+              ),
+            );
           }),
         }),
         InboxPlugin(),
@@ -220,7 +219,7 @@ const meta = {
     layout: 'fullscreen',
     translations: [...translations, ...stackTranslations],
   },
-} satisfies Meta<typeof PipelineContainer>;
+} satisfies Meta<typeof PipelineArticle>;
 
 export default meta;
 

package/src/containers/{PipelineContainer/PipelineContainer.tsx → PipelineArticle/PipelineArticle.tsx}

@@ -5,52 +5,49 @@
 import React, { useCallback, useEffect } from 'react';
 
 import { Capabilities } from '@dxos/app-framework';
-import { useCapability } from '@dxos/app-framework/ui';
-import { useOperationInvoker } from '@dxos/app-framework/ui';
-import { Surface } from '@dxos/app-framework/ui';
+import { Surface, useCapability, useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
 import {
+  AppSurface,
   OBJECT_ACTIONS_CONTRIBUTION_ID,
   OBJECT_ACTIONS_CONTRIBUTION_PRIORITY,
-  type SurfaceComponentProps,
   useObjectMenuItems,
 } from '@dxos/app-toolkit/ui';
-import { Obj } from '@dxos/echo';
-import { ATTENDABLE_PATH_SEPARATOR, DeckOperation } from '@dxos/plugin-deck/types';
 import { Panel } from '@dxos/react-ui';
+import { linkedSegment } from '@dxos/react-ui-attention';
 import { useAttention } from '@dxos/react-ui-attention';
 import { useMenu } from '@dxos/react-ui-menu';
 import { type Pipeline } from '@dxos/types';
 
-import { type ItemProps, PipelineComponent } from '../../components';
-import { usePipelineBoardModel } from '../../hooks';
+import { type ItemProps, PipelineComponent } from '#components';
+import { usePipelineBoardModel } from '#hooks';
 
 const PIPELINE_ITEM = 'PipelineItem';
 
-export type PipelineContainerProps = SurfaceComponentProps<Pipeline.Pipeline>;
+export type PipelineArticleProps = AppSurface.ObjectArticleProps<Pipeline.Pipeline>;
 
-export const PipelineContainer = ({ role, subject: pipeline }: PipelineContainerProps) => {
+export const PipelineArticle = ({ role, subject: pipeline, attendableId }: PipelineArticleProps) => {
   const registry = useCapability(Capabilities.AtomRegistry);
   const model = usePipelineBoardModel(pipeline, registry);
   const { invokePromise } = useOperationInvoker();
-  const attendableId = Obj.getDXN(pipeline).toString();
   const { hasAttention } = useAttention(attendableId);
 
   const handleColumnAdd = useCallback(
     () =>
-      invokePromise(DeckOperation.ChangeCompanion, {
-        companion: `${attendableId}${ATTENDABLE_PATH_SEPARATOR}settings`,
+      invokePromise(LayoutOperation.UpdateCompanion, {
+        subject: linkedSegment('settings'),
       }),
-    [invokePromise, attendableId],
+    [invokePromise],
   );
 
   return (
     <PipelineComponent.Root Item={PipelineItem} onAddColumn={handleColumnAdd}>
-      <Panel.Root role={role} className='dx-article'>
+      <Panel.Root role={role}>
         <Panel.Toolbar asChild>
           <PipelineComponent.Toolbar disabled={!hasAttention} />
         </Panel.Toolbar>
         <Panel.Content asChild>
-          <PipelineComponent.Content model={model}>
+          <PipelineComponent.Content asChild model={model}>
             <PipelineComponent.Columns pipeline={pipeline} />
           </PipelineComponent.Content>
         </Panel.Content>
@@ -76,7 +73,7 @@ const PipelineItem = ({ item, projectionModel }: ItemProps) => {
 
   return (
     <Surface.Surface
-      role='card--content'
+      type={AppSurface.Card}
       data={{
         subject: item,
         projection: projectionModel,

package/src/containers/PipelineArticle/index.ts

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