@dxos/plugin-kanban 0.8.3 → 0.8.4-main.1068cf700f

package/src/capabilities/react-surface/react-surface.tsx

@@ -0,0 +1,87 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+import type * as Schema from 'effect/Schema';
+import React, { useMemo } from 'react';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { Surface } from '@dxos/app-framework/ui';
+import { Database, Obj, Type } from '@dxos/echo';
+import { findAnnotation } from '@dxos/effect';
+import { type FormFieldComponentProps, SelectField, useFormValues } from '@dxos/react-ui-form';
+import { Kanban } from '@dxos/react-ui-kanban/types';
+import { type Collection } from '@dxos/schema';
+
+import { KanbanContainer, KanbanViewEditor } from '../../components';
+import { meta } from '../../meta';
+import { PivotColumnAnnotationId } from '../../types';
+
+export default Capability.makeModule(() =>
+  Effect.succeed(
+    Capability.contributes(Capabilities.ReactSurface, [
+      Surface.create({
+        id: meta.id,
+        role: ['article', 'section'],
+        filter: (data): data is { subject: Kanban.Kanban } => Obj.instanceOf(Kanban.Kanban, data.subject),
+        component: ({ data, role }) => <KanbanContainer role={role} subject={data.subject} />,
+      }),
+      Surface.create({
+        id: `${meta.id}/object-settings`,
+        role: 'object-settings',
+        position: 'hoist',
+        filter: (data): data is { subject: Kanban.Kanban } => Obj.instanceOf(Kanban.Kanban, data.subject),
+        component: ({ data }) => <KanbanViewEditor object={data.subject} />,
+      }),
+      Surface.create({
+        id: `${meta.id}/create-initial-schema-form-[pivot-column]`,
+        role: 'form-input',
+        filter: (
+          data,
+        ): data is {
+          prop: string;
+          schema: Schema.Schema<any>;
+          target: Database.Database | Collection.Collection | undefined;
+        } => {
+          const annotation = findAnnotation<boolean>((data.schema as Schema.Schema.All).ast, PivotColumnAnnotationId);
+          return !!annotation;
+        },
+        component: ({ data: { target }, ...inputProps }) => {
+          const props = inputProps as any as FormFieldComponentProps;
+          const db = Database.isDatabase(target) ? target : target && Obj.getDatabase(target);
+          if (!db) {
+            return null;
+          }
+
+          const { typename } = useFormValues('KanbanForm');
+          const [selectedSchema] = useMemo(
+            () => db.schemaRegistry.query({ location: ['database', 'runtime'], typename }).runSync(),
+            [db, typename],
+          );
+          const singleSelectColumns = useMemo(() => {
+            const properties = Type.toJsonSchema(selectedSchema).properties;
+            if (!properties) {
+              return [];
+            }
+
+            const columns = Object.entries(properties).reduce<string[]>((acc, [key, value]) => {
+              if (typeof value === 'object' && value?.format === 'single-select') {
+                acc.push(key);
+              }
+              return acc;
+            }, []);
+
+            return columns;
+          }, [selectedSchema]);
+
+          if (!typename) {
+            return null;
+          }
+
+          return <SelectField {...props} options={singleSelectColumns.map((column) => ({ value: column }))} />;
+        },
+      }),
+    ]),
+  ),
+);

package/src/components/KanbanContainer.stories.tsx

@@ -2,78 +2,98 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-import { type StoryObj, type Meta } from '@storybook/react';
-import React, { useCallback, useEffect, useState } from 'react';
+import { RegistryContext } from '@effect-atom/atom-react';
+import { type Decorator, type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import React, { useCallback, useContext } from 'react';
+import { expect, waitFor, within } from 'storybook/test';
 
-import { IntentPlugin, SettingsPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { Obj, Type } from '@dxos/echo';
+import { Obj, type QueryAST, Type } from '@dxos/echo';
+import { type Mutable } from '@dxos/echo/internal';
 import { invariant } from '@dxos/invariant';
 import { ClientPlugin } from '@dxos/plugin-client';
 import { PreviewPlugin } from '@dxos/plugin-preview';
 import { useGlobalFilteredObjects } from '@dxos/plugin-search';
 import { SpacePlugin } from '@dxos/plugin-space';
-import { StorybookLayoutPlugin } from '@dxos/plugin-storybook-layout';
-import { ThemePlugin } from '@dxos/plugin-theme';
+import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
 import { faker } from '@dxos/random';
-import { useClient } from '@dxos/react-client';
-import { Filter, useSpaces, useQuery, useSchema } from '@dxos/react-client/echo';
+import { Filter, type Space, useQuery, useSchema, useSpaces } from '@dxos/react-client/echo';
+import { withTheme } from '@dxos/react-ui/testing';
 import { ViewEditor } from '@dxos/react-ui-form';
-import { Kanban, KanbanType, useKanbanModel } from '@dxos/react-ui-kanban';
-import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
-import { defaultTx } from '@dxos/react-ui-theme';
-import { DataType, ViewProjection } from '@dxos/schema';
-import { withLayout } from '@dxos/storybook-utils';
+import {
+  Kanban as KanbanComponent,
+  translations as kanbanTranslations,
+  useKanbanModel,
+  useProjectionModel,
+} from '@dxos/react-ui-kanban';
+import { Kanban } from '@dxos/react-ui-kanban/types';
+import { JsonFilter } from '@dxos/react-ui-syntax-highlighter';
+import { View, getTypenameFromQuery } from '@dxos/schema';
+import { Organization, Person } from '@dxos/types';
 
-import { initializeKanban } from '../testing';
-import translations from '../translations';
+import { translations } from '../translations';
 
 faker.seed(0);
 
-//
-// Story components.
-//
-
-const rollOrg = () => ({
+const createOrg = () => ({
   name: faker.commerce.productName(),
   description: faker.lorem.paragraph(),
   image: faker.image.url(),
   website: faker.internet.url(),
-  status: faker.helpers.arrayElement(DataType.OrganizationStatusOptions).id,
+  status: faker.helpers.arrayElement(Organization.StatusOptions).id as Organization.Organization['status'],
 });
 
-const StorybookKanban = () => {
-  const client = useClient();
+//
+// Story setup helpers.
+//
+
+type ClientSetupOptions = {
+  types?: Type.Entity.Any[];
+  onSpaceCreated?: (space: Space) => Promise<void>;
+};
+
+/**
+ * Creates the standard plugin manager decorator with client configuration.
+ */
+const withKanbanPlugins = ({ types = [], onSpaceCreated }: ClientSetupOptions): Decorator =>
+  withPluginManager({
+    plugins: [
+      ...corePlugins(),
+      ClientPlugin({
+        types: [...types, View.View, Kanban.Kanban],
+        onClientInitialized: ({ client }) =>
+          Effect.gen(function* () {
+            yield* Effect.promise(() => client.halo.createIdentity());
+            const space = yield* Effect.promise(() => client.spaces.create());
+            yield* Effect.promise(() => space.waitUntilReady());
+            yield* Effect.promise(() => onSpaceCreated?.(space) ?? Promise.resolve());
+          }),
+      }),
+      PreviewPlugin(),
+      SpacePlugin({}),
+      StorybookPlugin({}),
+    ],
+  });
+
+//
+// Story components.
+//
+
+const DefaultComponent = () => {
+  const registry = useContext(RegistryContext);
   const spaces = useSpaces();
   const space = spaces[spaces.length - 1];
-  const kanbans = useQuery(space, Filter.type(KanbanType));
-  const [kanban, setKanban] = useState<KanbanType>();
-  const [projection, setProjection] = useState<ViewProjection>();
-  const schema = useSchema(client, space, kanban?.cardView?.target?.query.typename);
-
-  useEffect(() => {
-    if (kanbans.length && !kanban) {
-      const kanban = kanbans[0];
-      setKanban(kanban);
-    }
-  }, [kanbans]);
-
-  useEffect(() => {
-    if (kanban?.cardView?.target && schema) {
-      const jsonSchema = Type.toJsonSchema(schema);
-      setProjection(new ViewProjection(jsonSchema, kanban.cardView.target));
-    }
-    // TODO(ZaymonFC): Is there a better way to get notified about deep changes in the json schema?
-    //  @dmaretskyi? Once resolved, update in multiple places (e.g., storybooks).
-  }, [kanban?.cardView?.target, schema, JSON.stringify(schema ? Type.toJsonSchema(schema) : {})]);
-
-  const objects = useQuery(space, schema ? Filter.type(schema) : Filter.nothing());
+  const [object] = useQuery(space?.db, Filter.type(Kanban.Kanban));
+  const typename = object?.view.target?.query ? getTypenameFromQuery(object.view.target.query.ast) : undefined;
+  const schema = useSchema(space?.db, typename);
+
+  const objects = useQuery(space?.db, schema ? Filter.type(schema) : Filter.nothing());
   const filteredObjects = useGlobalFilteredObjects(objects);
 
+  const projection = useProjectionModel(schema, object, registry);
   const model = useKanbanModel({
-    kanban,
-    schema,
+    object,
     projection,
     items: filteredObjects,
   });
@@ -81,9 +101,9 @@ const StorybookKanban = () => {
   const handleAddCard = useCallback(
     (columnValue: string | undefined) => {
       const path = model?.columnFieldPath;
-      if (space && schema && path) {
+      if (space && schema && Type.isObjectSchema(schema) && path) {
         const card = Obj.make(schema, {
-          ...rollOrg(),
+          ...createOrg(),
           [path]: columnValue,
         });
 
@@ -94,99 +114,173 @@ const StorybookKanban = () => {
     [space, schema, model],
   );
 
-  const handleRemoveCard = useCallback((card: { id: string }) => space.db.remove(card), [space]);
+  const handleRemoveCard = useCallback((card: { id: string }) => Obj.isObject(card) && space?.db.remove(card), [space]);
 
-  const handleTypenameChanged = useCallback(
-    (typename: string) => {
+  const handleUpdateQuery = useCallback(
+    (newQuery: QueryAST.Query) => {
       invariant(schema);
       invariant(Type.isMutable(schema));
-      invariant(kanban?.cardView?.target);
+      invariant(object.view.target);
 
-      schema.updateTypename(typename);
-      kanban.cardView.target.query.typename = typename;
+      schema.updateTypename(getTypenameFromQuery(newQuery));
+      Obj.change(object.view.target, (v) => {
+        v.query.ast = newQuery as Mutable<typeof newQuery>;
+      });
     },
-    [kanban?.cardView?.target, schema],
+    [object, schema],
   );
 
-  if (!schema || !kanban) {
+  const handleDeleteField = useCallback(
+    (fieldId: string) => {
+      if (schema && Type.isMutable(schema) && projection) {
+        projection.deleteFieldProjection(fieldId);
+      }
+    },
+    [schema, projection],
+  );
+
+  if (!schema || !object.view.target) {
     return null;
   }
 
   return (
-    <div className='grow grid grid-cols-[1fr_350px]'>
-      {model ? <Kanban model={model} onAddCard={handleAddCard} onRemoveCard={handleRemoveCard} /> : <div />}
-      <div className='flex flex-col bs-full border-is border-separator overflow-y-auto'>
-        {kanban.cardView && (
-          <ViewEditor
-            registry={space?.db.schemaRegistry}
-            schema={schema}
-            view={kanban.cardView.target!}
-            onTypenameChanged={handleTypenameChanged}
-            onDelete={(fieldId: string) => {
-              console.log('[ViewEditor]', 'onDelete', fieldId);
-            }}
-          />
-        )}
-        <SyntaxHighlighter language='json' className='w-full text-xs'>
-          {JSON.stringify({ cardView: kanban.cardView?.target, cardSchema: schema }, null, 2)}
-        </SyntaxHighlighter>
+    <div className='grow grid grid-cols-[1fr_350px] overflow-hidden'>
+      {model ? <KanbanComponent model={model} onAddCard={handleAddCard} onRemoveCard={handleRemoveCard} /> : <div />}
+      <div className='flex flex-col bs-full overflow-hidden border-l border-separator'>
+        <ViewEditor
+          classNames='p-2'
+          registry={space?.db.schemaRegistry}
+          schema={schema}
+          view={object.view.target}
+          onQueryChanged={handleUpdateQuery}
+          onDelete={Type.isMutable(schema) ? handleDeleteField : undefined}
+        />
+        <JsonFilter data={{ view: object.view.target, schema }} classNames='text-xs' />
       </div>
     </div>
   );
 };
 
-type StoryProps = {
-  rows?: number;
-};
-
 //
 // Story definitions.
 //
 
-const meta: Meta<StoryProps> = {
+const meta = {
   title: 'plugins/plugin-kanban/Kanban',
-  component: StorybookKanban,
-  render: () => <StorybookKanban />,
-  parameters: { translations },
+  component: DefaultComponent,
+  render: () => <DefaultComponent />,
+  decorators: [withTheme()],
+  parameters: {
+    layout: 'fullscreen',
+    translations: [...translations, ...kanbanTranslations],
+  },
+} satisfies Meta<typeof DefaultComponent>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Default story using static runtime schema (immutable).
+ * Schema mutations are not allowed.
+ */
+export const Default: Story = {
   decorators: [
-    withLayout({ fullscreen: true }),
-    withPluginManager({
-      plugins: [
-        ThemePlugin({ tx: defaultTx }),
-        ClientPlugin({
-          types: [DataType.Organization, DataType.Person, KanbanType],
-          onClientInitialized: async (_, client) => {
-            await client.halo.createIdentity();
-            const space = await client.spaces.create();
-            await space.waitUntilReady();
-            const { schema, kanban } = await initializeKanban({
-              space,
-              client,
-              typename: DataType.Organization.typename,
-              initialPivotColumn: 'status',
-            });
-            space.db.add(kanban);
-
-            if (schema) {
-              // TODO(burdon): Replace with sdk/schema/testing.
-              Array.from({ length: 80 }).map(() => {
-                return space.db.add(Obj.make(schema, rollOrg()));
-              });
-            }
-          },
-        }),
-        StorybookLayoutPlugin(),
-        PreviewPlugin(),
-        SpacePlugin(),
-        IntentPlugin(),
-        SettingsPlugin(),
-      ],
+    withKanbanPlugins({
+      types: [Organization.Organization, Person.Person],
+      onSpaceCreated: async (space) => {
+        const { view } = await View.makeFromDatabase({
+          db: space.db,
+          typename: Organization.Organization.typename,
+          pivotFieldName: 'status',
+        });
+        const kanban = Kanban.make({ view });
+        space.db.add(kanban);
+
+        // TODO(burdon): Replace with sdk/schema/testing.
+        Array.from({ length: 80 }).map(() => {
+          return space.db.add(Obj.make(Organization.Organization, createOrg()));
+        });
+      },
     }),
   ],
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Wait for the kanban columns to render by finding the status tags.
+    // Organization.StatusOptions: prospect, qualified, active, commit, reject.
+    const activeTag = await canvas.findByText('Active', undefined, { timeout: 30_000 });
+    const prospectTag = await canvas.findByText('Prospect', undefined, { timeout: 10_000 });
+    const commitTag = await canvas.findByText('Commit', undefined, { timeout: 10_000 });
+
+    // Verify all expected columns are rendered.
+    await expect(activeTag).toBeTruthy();
+    await expect(prospectTag).toBeTruthy();
+    await expect(commitTag).toBeTruthy();
+
+    // Find the column containers.
+    const activeColumn = activeTag.closest('[data-dx-stack-item]') as HTMLElement;
+    const prospectColumn = prospectTag.closest('[data-dx-stack-item]') as HTMLElement;
+    await expect(activeColumn).toBeTruthy();
+    await expect(prospectColumn).toBeTruthy();
+
+    // Wait for cards to render in the columns.
+    // Cards have data-dx-item-id attribute from StackItem.Root.
+    const getColumnCards = (column: HTMLElement) =>
+      Array.from(column.querySelectorAll('[data-dx-item-id]')) as HTMLElement[];
+
+    await waitFor(() => expect(getColumnCards(activeColumn).length).toBeGreaterThan(0));
+
+    // Verify cards are distributed across columns.
+    const activeCards = getColumnCards(activeColumn);
+    const prospectCards = getColumnCards(prospectColumn);
+    await expect(activeCards.length).toBeGreaterThan(0);
+    await expect(prospectCards.length).toBeGreaterThan(0);
+
+    // Verify cards have drag handles (first button in toolbar).
+    const firstActiveCard = activeCards[0];
+    const buttons = firstActiveCard.querySelectorAll('button');
+    await expect(buttons.length).toBeGreaterThan(0);
+
+    // Verify the drop zone exists in each column.
+    const activeDropZone = activeColumn.querySelector('.kanban-drop');
+    const prospectDropZone = prospectColumn.querySelector('.kanban-drop');
+    await expect(activeDropZone).toBeTruthy();
+    await expect(prospectDropZone).toBeTruthy();
+
+    // TODO(wittjosiah): Get drag & drop tests working.
+    //   See packages/apps/composer-app/src/playwright/stack.spec.ts for reference.
+  },
 };
 
-export default meta;
+/**
+ * Story variant that uses a mutable database schema (EchoSchema).
+ * This allows testing schema mutations like adding/removing fields.
+ */
+// TODO(wittjosiah): Card previews (e.g., OrganizationCard) are type-specific and hard-coded.
+//   They don't use the projection to determine which fields to display, so deleting a field
+//   from the schema won't remove it from the card preview. To fix this, the type-specific
+//   cards in PreviewPlugin would need to accept and respect the projection prop.
+export const MutableSchema: Story = {
+  decorators: [
+    withKanbanPlugins({
+      onSpaceCreated: async (space) => {
+        // Register schema in the database to make it mutable (EchoSchema).
+        const [schema] = await space.db.schemaRegistry.register([Organization.Organization]);
 
-type Story = StoryObj<StoryProps>;
+        const { view } = await View.makeFromDatabase({
+          db: space.db,
+          typename: schema.typename,
+          pivotFieldName: 'status',
+        });
+        const kanban = Kanban.make({ view });
+        space.db.add(kanban);
 
-export const Default: Story = {};
+        // Create test data using the registered schema.
+        Array.from({ length: 80 }).map(() => {
+          return space.db.add(Obj.make(schema, createOrg()));
+        });
+      },
+    }),
+  ],
+};

package/src/components/KanbanContainer.tsx

@@ -2,68 +2,60 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { RegistryContext } from '@effect-atom/atom-react';
+import React, { useCallback, useContext, useEffect, useState } from 'react';
 
-import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
+import { useCapabilities, useOperationInvoker } from '@dxos/app-framework/ui';
+import { AppCapabilities } from '@dxos/app-toolkit';
+import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
 import { Filter, Obj, Type } from '@dxos/echo';
-import { EchoSchema, type TypedObject } from '@dxos/echo-schema';
 import { useGlobalFilteredObjects } from '@dxos/plugin-search';
-import { useClient } from '@dxos/react-client';
-import { useQuery, getSpace } from '@dxos/react-client/echo';
-import { type KanbanType, useKanbanModel, Kanban } from '@dxos/react-ui-kanban';
-import { StackItem } from '@dxos/react-ui-stack';
-import { ViewProjection } from '@dxos/schema';
+import { useQuery } from '@dxos/react-client/echo';
+import { Layout } from '@dxos/react-ui';
+import { Kanban as KanbanComponent, useKanbanModel, useProjectionModel } from '@dxos/react-ui-kanban';
+import { type Kanban } from '@dxos/react-ui-kanban/types';
+import { getTypenameFromQuery } from '@dxos/schema';
 
-import { KanbanAction } from '../types';
+import { KanbanOperation } from '../types';
 
-export const KanbanContainer = ({ kanban }: { kanban: KanbanType; role: string }) => {
-  const client = useClient();
-  const [cardSchema, setCardSchema] = useState<TypedObject<any, any>>();
-  const [projection, setProjection] = useState<ViewProjection>();
-  const space = getSpace(kanban);
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
+export type KanbanContainerProps = SurfaceComponentProps<Kanban.Kanban>;
 
-  const jsonSchema = useMemo(() => {
-    if (!cardSchema) {
-      return undefined;
-    }
-    return cardSchema instanceof EchoSchema ? cardSchema.jsonSchema : Type.toJsonSchema(cardSchema);
-  }, [cardSchema]);
+export const KanbanContainer = ({ role, subject: object }: KanbanContainerProps) => {
+  const registry = useContext(RegistryContext);
+  const schemas = useCapabilities(AppCapabilities.Schema);
+  const [cardSchema, setCardSchema] = useState<Type.Obj.Any>();
+  const db = Obj.getDatabase(object);
+  const { invokePromise } = useOperationInvoker();
+  const typename = object.view.target?.query ? getTypenameFromQuery(object.view.target.query.ast) : undefined;
 
   useEffect(() => {
-    const typename = kanban.cardView?.target?.query?.typename;
-    const staticSchema = client.graph.schemaRegistry.schemas.find((schema) => Type.getTypename(schema) === typename);
+    const staticSchema = schemas.flat().find((schema) => Type.getTypename(schema) === typename);
     if (staticSchema) {
-      setCardSchema(() => staticSchema as TypedObject<any, any>);
+      // NOTE: Use functional update to prevent React from calling the schema as a function.
+      setCardSchema(() => staticSchema);
     }
-    if (!staticSchema && typename && space) {
-      const query = space.db.schemaRegistry.query({ typename });
+    if (!staticSchema && typename && db) {
+      const query = db.schemaRegistry.query({ typename });
       const unsubscribe = query.subscribe(
         () => {
           const [schema] = query.results;
           if (schema) {
-            setCardSchema(schema);
+            // NOTE: Use functional update to prevent React from calling the schema as a function.
+            setCardSchema(() => schema);
           }
         },
         { fire: true },
       );
       return unsubscribe;
     }
-  }, [kanban.cardView?.target?.query, space]);
-
-  useEffect(() => {
-    if (kanban.cardView?.target && jsonSchema) {
-      setProjection(new ViewProjection(jsonSchema, kanban.cardView.target));
-    }
-    // TODO(ZaymonFC): Is there a better way to get notified about deep changes in the json schema?
-  }, [kanban.cardView?.target, JSON.stringify(jsonSchema)]);
+  }, [schemas, db, typename]);
 
-  const objects = useQuery(space, cardSchema ? Filter.type(cardSchema) : Filter.nothing());
+  const objects = useQuery(db, cardSchema ? Filter.type(cardSchema) : Filter.nothing());
   const filteredObjects = useGlobalFilteredObjects(objects);
 
+  const projection = useProjectionModel(cardSchema, object, registry);
   const model = useKanbanModel({
-    kanban,
-    schema: cardSchema,
+    object,
     projection,
     items: filteredObjects,
   });
@@ -71,25 +63,25 @@ export const KanbanContainer = ({ kanban }: { kanban: KanbanType; role: string }
   const handleAddCard = useCallback(
     (columnValue: string | undefined) => {
       const path = model?.columnFieldPath;
-      if (space && cardSchema && path) {
+      if (db && cardSchema && path) {
         const card = Obj.make(cardSchema, { [path]: columnValue });
-        space.db.add(card);
+        db.add(card);
         return card.id;
       }
     },
-    [space, cardSchema, model],
+    [db, cardSchema, model],
   );
 
   const handleRemoveCard = useCallback(
     (card: { id: string }) => {
-      void dispatch(createIntent(KanbanAction.DeleteCard, { card }));
+      void invokePromise(KanbanOperation.DeleteCard, { card });
     },
-    [dispatch],
+    [invokePromise],
   );
 
   return (
-    <StackItem.Content>
-      {model && <Kanban model={model} onAddCard={handleAddCard} onRemoveCard={handleRemoveCard} />}
-    </StackItem.Content>
+    <Layout.Main role={role}>
+      {model && <KanbanComponent model={model} onAddCard={handleAddCard} onRemoveCard={handleRemoveCard} />}
+    </Layout.Main>
   );
 };