@dxos/plugin-space 0.10.0 → 0.11.1

package/src/containers/TypeArticle/TypeArticle.stories.tsx

@@ -0,0 +1,249 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Atom } from '@effect-atom/atom';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import * as Schema from 'effect/Schema';
+import React from 'react';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { useAtomCapability } from '@dxos/app-framework/ui';
+import { AppCapabilities } from '@dxos/app-toolkit';
+import { AppAnnotation } from '@dxos/app-toolkit';
+import { Annotation, Collection, DXN, Obj, Ref, Type } from '@dxos/echo';
+import { LabelAnnotation } from '@dxos/echo/Annotation';
+import { organizationIdentitySpec, personIdentitySpec } from '@dxos/extractor-lib';
+import { PublicKey } from '@dxos/keys';
+import { ClientPlugin } from '@dxos/plugin-client/testing';
+import { PreviewPlugin } from '@dxos/plugin-preview/testing';
+import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
+import { type Space, useSpaces } from '@dxos/react-client/echo';
+import { Loading, withLayout } from '@dxos/react-ui/testing';
+import { CardAnnotation } from '@dxos/schema';
+import { Organization, Person } from '@dxos/types';
+import { ComplexMap } from '@dxos/util';
+
+import { translations } from '#translations';
+
+import { SpaceOperationHandlerSet } from '../../operations';
+import { SpaceCapabilities } from '../../types';
+import { MergePreview } from '../MergePreview/MergePreview';
+import { ObjectCardStack } from '../ObjectCardStack/ObjectCardStack';
+import { TypeArticle } from './TypeArticle';
+
+/**
+ * Type that opts in to a content preview card via `CardAnnotation`.
+ */
+class CardType extends Type.makeObject<CardType>(DXN.make('org.dxos.type.test.cardType', '0.1.0'))(
+  Schema.Struct({
+    name: Schema.optional(Schema.String),
+    description: Schema.optional(Schema.String),
+  }).pipe(
+    LabelAnnotation.set(['name']),
+    Annotation.IconAnnotation.set({ icon: 'ph--cards--regular', hue: 'emerald' }),
+    CardAnnotation.set(true),
+  ),
+) {}
+
+/**
+ * Seed people covering every branch of the duplicate scan:
+ *  - Alice: three records sharing one address, in two different cases (email identity);
+ *  - Bob: two records with no shared address, chained through a Google resource name (foreign-key
+ *    identity) — the F2 case where mail sync and contacts sync each made their own Person;
+ *  - the two role inboxes: same display name, different addresses — deliberately NOT duplicates;
+ *  - Dana: unique, so the list always has a non-duplicate to compare against.
+ */
+const GOOGLE = 'google.com/contacts';
+
+const seedPeople = (space: Space) => {
+  // Stories create their space through the raw client API, which skips the space-plugin create flow;
+  // without a root collection `RemoveObjects` (the table's Delete button) fails its invariant. The
+  // collection is added before the annotation: `db.add` inside an `Obj.update` callback is a write
+  // during a write.
+  const rootCollection = space.db.add(Collection.make());
+  Obj.update(space.properties, (properties) => {
+    Annotation.set(properties, AppAnnotation.RootCollectionAnnotation, Ref.make(rootCollection));
+  });
+
+  space.db.add(
+    Person.make({
+      fullName: 'Alice Andrews',
+      emails: [{ value: 'alice@dxos.org' }],
+    }),
+  );
+  space.db.add(
+    Person.make({
+      fullName: 'Alice A.',
+      jobTitle: 'Engineer',
+      emails: [{ value: 'ALICE@dxos.org' }],
+    }),
+  );
+  space.db.add(
+    Person.make({
+      fullName: 'A. Andrews',
+      emails: [{ value: 'alice@dxos.org' }, { value: 'alice@personal.com' }],
+      phoneNumbers: [{ value: '+1 (415) 555-0100' }],
+    }),
+  );
+
+  space.db.add(
+    Person.make({
+      [Obj.Meta]: { keys: [{ source: GOOGLE, id: 'people/c1' }] },
+      fullName: 'Bob Brown',
+      emails: [{ value: 'bob@dxos.org' }],
+    }),
+  );
+  space.db.add(
+    Person.make({
+      [Obj.Meta]: { keys: [{ source: GOOGLE, id: 'people/c1' }] },
+      fullName: 'Robert Brown',
+      emails: [{ value: 'robert@personal.com' }],
+      notes: 'Synced from Google Contacts.',
+    }),
+  );
+
+  space.db.add(Person.make({ fullName: 'DXOS', emails: [{ value: 'no-reply@dxos.org' }] }));
+  space.db.add(Person.make({ fullName: 'DXOS via TestFlight', emails: [{ value: 'testflight@email.apple.com' }] }));
+  space.db.add(Person.make({ fullName: 'Dana Diaz', emails: [{ value: 'dana@example.com' }] }));
+
+  space.db.add(Organization.make({ name: 'DXOS', website: 'dxos.org' }));
+};
+
+type StoryArgs = {
+  type: Type.AnyObj;
+  count?: number;
+};
+
+const DefaultStory = ({ type }: StoryArgs) => {
+  const spaces = useSpaces();
+  const space = spaces[spaces.length - 1];
+  if (!space) {
+    return <Loading />;
+  }
+
+  return (
+    <div role='none' className='w-full grid grid-cols-2'>
+      <TypeArticle role='article' space={space} type={type} attendableId='story' />
+      <StoryCompanion space={space} type={type} />
+    </div>
+  );
+};
+
+/**
+ * Stand-in for the deck's Selected companion plank, mirroring the branch in `react-surface.tsx`:
+ * a staged merge takes the panel over, otherwise it shows the selected objects. Without it the
+ * merge preview has nowhere to render and the review cannot be walked end to end in a story.
+ */
+const StoryCompanion = ({ space, type }: { space: Space; type: Type.AnyObj }) => {
+  const { mergePreview } = useAtomCapability(SpaceCapabilities.EphemeralState);
+  if (mergePreview?.typeUri === Type.getURI(type)) {
+    return <MergePreview type={type} spaceId={space.id} preview={mergePreview} />;
+  }
+
+  return <ObjectCardStack objectId={Type.getURI(type)} db={space.db} type={type} />;
+};
+
+/** Ephemeral state the toolbar and the merge preview read; normally contributed by `state.ts`. */
+const ephemeralState = () =>
+  Atom.make<SpaceCapabilities.SpaceEphemeralState>({
+    awaiting: undefined,
+    sdkMigrationRunning: {},
+    navigableCollections: false,
+    viewersByObject: {},
+    viewersByIdentity: new ComplexMap<PublicKey, Set<string>>(PublicKey.hash),
+    mergePreview: undefined,
+    lastMergeAt: undefined,
+  }).pipe(Atom.keepAlive);
+
+const meta = {
+  title: 'plugins/plugin-space/containers/TypeArticle',
+  render: DefaultStory,
+  decorators: [
+    withLayout({ layout: 'fullscreen' }),
+    withPluginManager<StoryArgs>(({ args: { count = 10 } }) => ({
+      capabilities: [
+        Capability.contributes(AppCapabilities.Translations, translations),
+        // The Duplicates tab is driven by real operations, so the story registers the handler set
+        // and the state atom the space plugin would normally contribute.
+        Capability.contributes(Capabilities.OperationHandler, SpaceOperationHandlerSet),
+        Capability.contributes(SpaceCapabilities.EphemeralState, ephemeralState()),
+        // plugin-inbox contributes these in the app (it owns the types this materialises); the story
+        // runs no plugins that would.
+        Capability.contributes(SpaceCapabilities.IdentitySpec, personIdentitySpec),
+        Capability.contributes(SpaceCapabilities.IdentitySpec, organizationIdentitySpec),
+      ],
+      plugins: [
+        ...corePlugins(),
+        StorybookPlugin({}),
+        PreviewPlugin(),
+        ClientPlugin({
+          types: [CardType, Collection.Collection, Person.Person, Organization.Organization],
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              yield* Effect.promise(() => client.halo.createIdentity());
+              const space = yield* Effect.promise(() => client.spaces.create());
+              yield* Effect.promise(() => space.waitUntilReady());
+
+              seedPeople(space);
+              for (let i = 0; i < count; i++) {
+                space.db.add(
+                  Obj.make(CardType, { name: `Card ${i + 1}`, description: `Preview body for card ${i + 1}.` }),
+                );
+              }
+
+              // The scan queries the space, so the seed must be indexed before the tab is opened.
+              yield* Effect.promise(() => space.db.flush({ indexes: true }));
+            }),
+        }),
+      ],
+    })),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    type: CardType,
+    count: 8,
+  },
+};
+
+/**
+ * Person, whose identity rule (email + foreign key) is registered — so the toolbar offers the
+ * Duplicates tab. Selection and the merge preview both surface in the companion beside the article.
+ *
+ * Test:
+ * 1. Switch to the third toolbar tab (the copy icon). The filter is replaced by
+ *    Merge / Skip / a `1 / 2` counter / arrows.
+ * 2. The masonry shows the first group only: the three Alice records (they share `alice@dxos.org`,
+ *    one of them cased `ALICE@`).
+ * 3. Click a card. It becomes current and the companion shows its form. Click again to deselect.
+ * 4. Press the right arrow. The counter reads `2 / 2` and the two Bob records appear — they share
+ *    no address, and are grouped only by the Google resource name on both.
+ * 5. Press the left arrow to return to group 1, then press Merge. The companion swaps to the merge
+ *    preview: `fullName` is `Alice Andrews` (the oldest record wins), `jobTitle` is `Engineer`
+ *    (filled from a later record), and `emails` lists `alice@dxos.org` once — lower-cased — plus
+ *    `alice@personal.com`.
+ * 6. Edit `nickname` in the preview form, then press Confirm merge. The article returns to the
+ *    scan, the counter reads `1 / 1`, and only the Bob group remains.
+ * 7. Switch to the Cards tab. There are now six people, not eight: one Alice carrying every merged
+ *    field plus your nickname edit.
+ * 8. Switch to the Table tab and check two rows. A `Delete 2 objects` button appears in the
+ *    toolbar.
+ * 9. Confirm the two role inboxes (`DXOS` and `DXOS via TestFlight`) were never offered as a
+ *    group — same display name, different addresses, correctly left alone.
+ */
+export const Duplicates: Story = {
+  args: {
+    type: Person.Person,
+  },
+};

package/src/containers/TypeArticle/TypeArticle.tsx

@@ -0,0 +1,362 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Option from 'effect/Option';
+import React, { type PropsWithChildren, useCallback, useMemo, useState } from 'react';
+
+import { Surface, useOperationInvoker } from '@dxos/app-framework/ui';
+import { GraphPath, LayoutOperation } from '@dxos/app-toolkit';
+import { AppSurface } from '@dxos/app-toolkit/ui';
+import { Filter, Obj, Type } from '@dxos/echo';
+import { useObject, useQuery } from '@dxos/echo-react';
+import { type Space } from '@dxos/react-client/echo';
+import { Card, Focus, Icon, Panel, useTranslation } from '@dxos/react-ui';
+import { useSelection, useSelectionActions } from '@dxos/react-ui-attention';
+import { Empty } from '@dxos/react-ui-list';
+import { Masonry } from '@dxos/react-ui-masonry';
+import { Menu, MenuBuilder, useMenuBuilder } from '@dxos/react-ui-menu';
+import { SearchList, useSearchListResults } from '@dxos/react-ui-search';
+import { DynamicTable, type TableRowAction } from '@dxos/react-ui-table';
+import { Tabs } from '@dxos/react-ui-tabs';
+import { CardAnnotation } from '@dxos/schema';
+import { getStyles, mx } from '@dxos/ui-theme';
+
+import { meta } from '#meta';
+
+import { SpaceOperation } from '../../operations';
+import { useDuplicatesGroup } from './duplicatesGroup';
+import { useDuplicates } from './useDuplicates';
+
+/** Sidebar layout modes for a type article. */
+type Layout = 'masonry' | 'table' | 'duplicates';
+
+const LAYOUTS: { value: Layout; icon: string }[] = [
+  {
+    value: 'masonry',
+    icon: 'ph--squares-four--regular',
+  },
+  {
+    value: 'table',
+    icon: 'ph--table--regular',
+  },
+  {
+    value: 'duplicates',
+    icon: 'ph--copy--regular',
+  },
+];
+
+export type TypeArticleProps = {
+  role?: string;
+  space: Space;
+  type: Type.AnyEntity;
+  attendableId: string;
+};
+
+/**
+ * List view rendered when a type node is selected: a toolbar with a Masonry/Table layout switch and a
+ * text filter over every object of the type. Selecting an item opens it as a sibling plank.
+ *
+ * Objects are not enumerated in the nav tree; each navigated object becomes a hidden child of the
+ * type node resolved on demand.
+ */
+export const TypeArticle = ({ role, space, type, attendableId }: TypeArticleProps) => {
+  const { t } = useTranslation(meta.profile.key);
+  const { invokePromise } = useOperationInvoker();
+  const [layout, setLayout] = useState<Layout>('masonry');
+  const typeUri = Type.getURI(type);
+  const objects = useQuery(space.db, Filter.type(typeUri));
+
+  // Text filter over the object labels; feeds both the masonry tiles and the table rows.
+  const { results, handleSearch } = useSearchListResults<Obj.Unknown>({
+    items: objects,
+    extract: (object) => Obj.getLabel(object) ?? '',
+  });
+
+  // Selection is keyed by the type's own URI — the same id the 'selected-objects' companion resolves
+  // from its `companionTo` (see react-surface.tsx), so cards, table rows and the companion agree.
+  const selectedIds = useSelection(typeUri, 'multi');
+  const { multi: setSelectedObjects, toggle: toggleSelected } = useSelectionActions(typeUri);
+
+  // TODO(burdon): Factor out as an aspect?
+  const duplicates = useDuplicates({ space, type, objects, enabled: layout === 'duplicates' });
+  const duplicatesGroup = useDuplicatesGroup({
+    typeUri,
+    typename: Type.getTypename(type),
+    duplicates,
+  });
+
+  // Duplicates is offered only for types some plugin registered an identity rule for:
+  // there is nothing to scan otherwise.
+  const layouts = useMemo(
+    () => LAYOUTS.filter(({ value }) => value !== 'duplicates' || duplicates.spec),
+    [duplicates.spec],
+  );
+
+  const handleOpen = useCallback(
+    (object: Obj.Unknown) => {
+      const id = Obj.getURI(object);
+      void invokePromise(LayoutOperation.Select, { contextId: attendableId, subject: { mode: 'single', id } });
+      void invokePromise(LayoutOperation.Open, {
+        // Open under the node being viewed rather than the object's canonical type path, so an object
+        // reached from a type section opens within that section. Identical for a database type node,
+        // whose object path already is `<typeNode>/<id>`.
+        subject: [GraphPath.getCollectionObjectPath(attendableId, object.id)],
+        pivotId: attendableId,
+        disposition: 'add',
+        navigation: 'immediate',
+      });
+    },
+    [attendableId, invokePromise],
+  );
+
+  const handleDelete = useCallback((object: Obj.Unknown) => {
+    Obj.getDatabase(object)?.remove(object);
+  }, []);
+
+  // Undoable removal of every checked row, so a mis-click on a multi-row delete is recoverable.
+  const handleDeleteSelected = useCallback(() => {
+    const selected = objects.filter((object) => selectedIds.includes(object.id));
+    if (selected.length > 0) {
+      void invokePromise(SpaceOperation.RemoveObjects, { objects: selected }, { spaceId: space.id });
+      setSelectedObjects([]);
+    }
+  }, [objects, selectedIds, invokePromise, space.id, setSelectedObjects]);
+
+  // Stable identity: `DynamicTable` rebuilds its model whenever `features` changes, so an inline
+  // literal here would discard and re-seed the table's selection on every render.
+  const tableFeatures = useMemo(
+    () => ({
+      selection: { enabled: true, mode: 'multiple' as const },
+      dataEditable: true,
+      schemaEditable: false,
+      pinColumns: 1,
+    }),
+    [],
+  );
+
+  // Table rows are editable, so opening a row is a deliberate row action rather than `onRowClick`
+  // (which would fire on every cell click and fight with in-cell editing).
+  const rowActions = useMemo(
+    (): TableRowAction[] => [{ id: 'open', label: ['open-object.label', { ns: meta.profile.key }] }],
+    [],
+  );
+
+  const handleRowAction = useCallback(
+    (actionId: string, object: Obj.Unknown) => {
+      if (actionId === 'open') {
+        handleOpen(object);
+      }
+    },
+    [handleOpen],
+  );
+
+  // One action graph for the whole toolbar: the mode-specific actions first, then the layout toggle.
+  // Composing several `Toolbar.Root`s instead would each need their own roving-focus group and would
+  // fight over the row's width.
+  const menuActions = useMenuBuilder(
+    () =>
+      MenuBuilder.make()
+        .subgraph(layout === 'duplicates' && duplicatesGroup)
+        .subgraph(
+          layout === 'table' &&
+            selectedIds.length > 0 &&
+            ((builder) => {
+              builder.action(
+                'delete-selected',
+                {
+                  label: ['delete-selected.label', { ns: meta.profile.key, count: selectedIds.length }],
+                  icon: 'ph--trash--regular',
+                },
+                handleDeleteSelected,
+              );
+            }),
+        )
+        .separator()
+        .group(
+          'layout',
+          {
+            variant: 'toggleGroup',
+            selectCardinality: 'single',
+            value: layout,
+            label: ['layout.label', { ns: meta.profile.key }],
+          },
+          (group) => {
+            layouts.forEach(({ value, icon }) => {
+              group.action(value, { label: [`layout-${value}.label`, { ns: meta.profile.key }], icon }, () =>
+                setLayout(value),
+              );
+            });
+          },
+        )
+        .build(),
+    [layout, layouts, selectedIds.length, duplicatesGroup, handleDeleteSelected],
+  );
+
+  // The card grid backs two layouts — every object for `masonry`, only the group under review for
+  // `duplicates` — so the items are resolved here and the grid itself is declared once.
+  const tiles = layout === 'duplicates' ? duplicates.current : results;
+  const tileItems = useMemo<TileData[]>(
+    () =>
+      tiles.map((object) => ({
+        object,
+        current: selectedIds.includes(object.id),
+        onSelect: toggleSelected,
+        onOpen: handleOpen,
+        onDelete: Obj.getParent(object) ? undefined : handleDelete,
+      })),
+    [tiles, selectedIds, toggleSelected, handleOpen, handleDelete],
+  );
+
+  // A type with no objects at all has nothing for any layout to show; past that each layout says
+  // when it is empty for its own reason.
+  const noObjects = objects.length === 0 ? t('type-collection-empty.message') : undefined;
+  const noResults = noObjects ?? (results.length === 0 ? t('search-no-results.message') : undefined);
+  const noDuplicates =
+    noObjects ??
+    (duplicates.current.length === 0
+      ? duplicates.scanning
+        ? t('duplicates-scanning.message')
+        : t('duplicates-none.message')
+      : undefined);
+
+  return (
+    <SearchList.Root onSearch={handleSearch}>
+      <Tabs.Root asChild value={layout} onValueChange={(value) => setLayout(value as Layout)}>
+        <Panel.Root role={role}>
+          <Panel.Toolbar classNames={mx('grid', layout !== 'duplicates' && 'grid-cols-[1fr_auto]')}>
+            {layout !== 'duplicates' && <SearchList.Input placeholder={t('search-placeholder.label')} />}
+            <Menu.Root {...menuActions} attendableId={attendableId} alwaysActive>
+              <Menu.Toolbar />
+            </Menu.Root>
+          </Panel.Toolbar>
+          <Panel.Content>
+            <LayoutPanel value='masonry' empty={noResults}>
+              <Masonry.Root Tile={TileAdapter}>
+                <Masonry.Content>
+                  <Masonry.Viewport cacheKey={typeUri} getId={(data) => Obj.getURI(data.object)} items={tileItems} />
+                </Masonry.Content>
+              </Masonry.Root>
+            </LayoutPanel>
+            <LayoutPanel value='table' empty={noResults}>
+              <DynamicTable
+                type={type}
+                rows={results}
+                features={tableFeatures}
+                rowActions={rowActions}
+                // Seed from the shared selection so switching card → table keeps what was selected;
+                // the table otherwise starts from its own empty model.
+                selection={selectedIds}
+                onRowAction={handleRowAction}
+                onSelectionChanged={setSelectedObjects}
+              />
+            </LayoutPanel>
+            {duplicates.spec && (
+              <LayoutPanel value='duplicates' empty={noDuplicates}>
+                <Masonry.Root Tile={TileAdapter}>
+                  <Masonry.Content>
+                    <Masonry.Viewport cacheKey={typeUri} getId={(data) => Obj.getURI(data.object)} items={tileItems} />
+                  </Masonry.Content>
+                </Masonry.Root>
+              </LayoutPanel>
+            )}
+          </Panel.Content>
+          <Panel.Statusbar classNames='flex items-center p-1 border-t border-subdued-separator'>
+            {t('item-count.label', { count: tileItems.length })}
+          </Panel.Statusbar>
+        </Panel.Root>
+      </Tabs.Root>
+    </SearchList.Root>
+  );
+};
+
+/** One layout's content, or the message standing in for it when the layout has nothing to show. */
+const LayoutPanel = ({ value, empty, children }: PropsWithChildren<{ value: Layout; empty?: string }>) => (
+  <Tabs.Panel value={value} classNames='contents'>
+    {empty ? <Empty classNames='h-full' label={empty} /> : children}
+  </Tabs.Panel>
+);
+
+type TileData = {
+  object: Obj.Unknown;
+  current: boolean;
+  onSelect: (id: string) => void;
+  onOpen: (object: Obj.Unknown) => void;
+  onDelete?: (object: Obj.Unknown) => void;
+};
+
+const TileAdapter = ({ data }: { data: TileData | undefined; index: number }) => {
+  if (!data?.object) {
+    return null;
+  }
+
+  return <ObjectTile {...data} />;
+};
+
+/** Selectable header-only card for a single object. */
+const ObjectTile = ({ object, current, onSelect, onOpen, onDelete }: TileData) => {
+  const { t } = useTranslation(meta.profile.key);
+  // Subscribe so the label re-renders when the object changes.
+  const [live] = useObject(object);
+  const typename = Obj.getTypename(live);
+  const label =
+    Obj.getLabel(live) ||
+    t('object-name.placeholder', { ns: typename ?? meta.profile.key, defaultValue: t('object-name.placeholder') });
+
+  const iconAnnotation = Obj.getIcon(live);
+  const icon = iconAnnotation?.icon ?? 'ph--circle-dashed--regular';
+  const iconStyles = iconAnnotation?.hue ? getStyles(iconAnnotation.hue) : undefined;
+
+  // Render a content preview body only for types that opt in via `CardAnnotation`.
+  const type = Obj.getType(object);
+  const showCardContent = !!type && Option.getOrElse(CardAnnotation.get(Type.getSchema(type)), () => false);
+  const cardData = useMemo<AppSurface.ObjectCardData>(() => ({ subject: object }), [object]);
+
+  // `Focus.Item` calls `onCurrentChange` on click and on Enter. A card click toggles selection —
+  // the companion follows the selection, so navigating away on every click would fight the review
+  // workflow; opening stays available from the card menu.
+  const handleCurrentChange = useCallback(() => onSelect(object.id), [onSelect, object]);
+
+  const menuItems = useMemo(
+    () => [
+      {
+        icon: 'ph--arrow-square-out--regular',
+        label: t('open-object.label', {
+          ns: typename ?? meta.profile.key,
+          defaultValue: t('open-object.label'),
+        }),
+        onClick: () => onOpen(object),
+      },
+      ...(onDelete
+        ? [
+            {
+              icon: 'ph--trash--regular',
+              label: t('delete-object.label', {
+                ns: typename ?? meta.profile.key,
+                defaultValue: t('delete-object.label'),
+              }),
+              onClick: () => onDelete(object),
+            },
+          ]
+        : []),
+    ],
+    [t, typename, onOpen, onDelete, object],
+  );
+
+  return (
+    <Focus.Item asChild current={current} onCurrentChange={handleCurrentChange}>
+      <Card.Root fullWidth classNames={['dx-hover cursor-pointer', current && 'dx-current']}>
+        <Card.Header>
+          <Card.Block>
+            <Icon icon={icon} classNames={iconStyles?.text} />
+          </Card.Block>
+          <Card.Title>{label}</Card.Title>
+          {menuItems.length > 0 && <Card.Menu items={menuItems} />}
+        </Card.Header>
+        {showCardContent && <Surface.Surface type={AppSurface.CardContent} data={cardData} limit={1} />}
+      </Card.Root>
+    </Focus.Item>
+  );
+};
+
+TypeArticle.displayName = 'TypeArticle';