@dxos/plugin-deck 0.6.14-main.f49f251 → 0.6.14-staging.3e2eaca

package/src/DeckPlugin.tsx

@@ -29,6 +29,7 @@ import {
   openIds,
   type LayoutMode,
   type IntentData,
+  filterPlugins,
 } from '@dxos/app-framework';
 import { type UnsubscribeCallback } from '@dxos/async';
 import { create, getTypename, isReactiveObject } from '@dxos/echo-schema';
@@ -36,21 +37,12 @@ import { scheduledEffect } from '@dxos/echo-signals/core';
 import { LocalStorageStore } from '@dxos/local-storage';
 import { log } from '@dxos/log';
 import { parseAttentionPlugin, type AttentionPluginProvides } from '@dxos/plugin-attention';
-import { parseClientPlugin, type ClientPluginProvides } from '@dxos/plugin-client';
 import { createExtension, type Node } from '@dxos/plugin-graph';
 import { ObservabilityAction } from '@dxos/plugin-observability/meta';
 import { fullyQualifiedId } from '@dxos/react-client/echo';
-import { translations as deckTranslations } from '@dxos/react-ui-deck';
+import { translations as stackTranslations } from '@dxos/react-ui-stack';
 
-import {
-  DeckLayout,
-  type DeckLayoutProps,
-  LayoutContext,
-  LayoutSettings,
-  NAV_ID,
-  DeckContext,
-  type DeckContextType,
-} from './components';
+import { DeckLayout, LayoutContext, LayoutSettings, NAV_ID, DeckContext, type DeckContextType } from './components';
 import {
   closeEntry,
   incrementPlank,
@@ -62,7 +54,14 @@ import {
 } from './layout';
 import meta, { DECK_PLUGIN } from './meta';
 import translations from './translations';
-import { type NewPlankPositioning, type DeckPluginProvides, type DeckSettingsProps, type Overscroll } from './types';
+import {
+  type NewPlankPositioning,
+  type DeckPluginProvides,
+  type DeckSettingsProps,
+  type Overscroll,
+  type Panel,
+  parsePanelPlugin,
+} from './types';
 import { checkAppScheme, getEffectivePart } from './util';
 
 const isSocket = !!(globalThis as any).__args;
@@ -70,14 +69,6 @@ const isSocket = !!(globalThis as any).__args;
 // TODO(mjamesderocher): Can we get this directly from Socket?
 const appScheme = 'composer://';
 
-// TODO(burdon): Evolve into customizable prefs.
-const customSlots: DeckLayoutProps['slots'] = {
-  wallpaper: {
-    classNames:
-      'bg-cover bg-no-repeat dark:bg-[url(https://cdn.midjourney.com/3865ba61-f98a-4d94-b91a-1763ead01f4f/0_0.jpeg)]',
-  },
-};
-
 // NOTE(Zan): When producing values with immer, we shouldn't auto-freeze them because
 // our signal implementation needs to add some hidden properties to the produced values.
 // TODO(Zan): Move this to a more global location if we use immer more broadly.
@@ -105,10 +96,10 @@ export const DeckPlugin = ({
   // TODO(burdon): GraphPlugin vs. IntentPluginProvides? (@wittjosiah).
   let intentPlugin: Plugin<IntentPluginProvides> | undefined;
   let attentionPlugin: Plugin<AttentionPluginProvides> | undefined;
-  let clientPlugin: Plugin<ClientPluginProvides> | undefined;
   const unsubscriptionCallbacks = [] as (UnsubscribeCallback | undefined)[];
   let currentUndoId: string | undefined;
   let handleNavigation: () => Promise<void> | undefined;
+  const panels: Panel[] = [];
 
   const settings = new LocalStorageStore<DeckSettingsProps>('dxos.org/settings/layout', {
     showHints: false,
@@ -217,7 +208,6 @@ export const DeckPlugin = ({
       intentPlugin = resolvePlugin(plugins, parseIntentPlugin);
       graphPlugin = resolvePlugin(plugins, parseGraphPlugin);
       attentionPlugin = resolvePlugin(plugins, parseAttentionPlugin);
-      clientPlugin = resolvePlugin(plugins, parseClientPlugin);
 
       layout
         .prop({ key: 'layoutMode', type: LocalStorageStore.enum<LayoutMode>() })
@@ -230,12 +220,8 @@ export const DeckPlugin = ({
         .prop({ key: 'active', type: LocalStorageStore.json<LayoutParts>() })
         .prop({ key: 'closed', type: LocalStorageStore.json<string[]>() });
 
-      unsubscriptionCallbacks.push(
-        clientPlugin?.provides.client.shell.onReset(() => {
-          layout.expunge();
-          location.expunge();
-          deck.expunge();
-        }),
+      panels.push(
+        ...filterPlugins(plugins, parsePanelPlugin).flatMap((plugin) => plugin.provides.complementary.panels),
       );
 
       settings
@@ -261,12 +247,13 @@ export const DeckPlugin = ({
           return;
         }
 
+        const startingLayout = removePart(location.values.active, 'solo');
         const layoutFromUri = uriToSoloPart(pathname);
         if (!layoutFromUri) {
+          handleSetLocation(startingLayout);
           return;
         }
 
-        const startingLayout = removePart(location.values.active, 'solo');
         handleSetLocation(mergeLayoutParts(layoutFromUri, startingLayout));
         layout.values.layoutMode = 'solo';
       };
@@ -296,7 +283,7 @@ export const DeckPlugin = ({
       settings: settings.values,
       layout: layout.values,
       location: location.values,
-      translations: [...translations, ...deckTranslations],
+      translations: [...translations, ...stackTranslations],
       graph: {
         builder: () => {
           // TODO(burdon): Root menu isn't visible so nothing bound.
@@ -339,9 +326,8 @@ export const DeckPlugin = ({
             layoutParts={location.values.active}
             showHints={settings.values.showHints}
             overscroll={settings.values.overscroll}
-            flatDeck={settings.values.flatDeck}
-            slots={settings.values.customSlots ? customSlots : undefined}
             toasts={layout.values.toasts}
+            panels={panels}
             onDismissToast={(id) => {
               const index = layout.values.toasts.findIndex((toast) => toast.id === id);
               if (index !== -1) {

package/src/components/DeckLayout/ComplementarySidebar.tsx

@@ -14,41 +14,26 @@ import {
 import { useGraph } from '@dxos/plugin-graph';
 import { Main } from '@dxos/react-ui';
 import { useAttended } from '@dxos/react-ui-attention';
-import { deckGrid } from '@dxos/react-ui-deck';
+import { railGridHorizontal, StackContext } from '@dxos/react-ui-stack';
 import { mx } from '@dxos/react-ui-theme';
 
 import { NodePlankHeading } from './NodePlankHeading';
 import { PlankContentError } from './PlankError';
 import { PlankLoading } from './PlankLoading';
 import { useNode, useNodeActionExpander } from '../../hooks';
-import { DECK_PLUGIN } from '../../meta';
+import { type Panel } from '../../types';
 import { useLayout } from '../LayoutContext';
 
 export type ComplementarySidebarProps = {
-  panel?: string;
-  flatDeck?: boolean;
+  panels: Panel[];
+  current?: string;
 };
 
-type Panel = { id: string; icon: string };
-
-// TODO(burdon): Should be provided by plugins.
-const panels: Panel[] = [
-  { id: 'settings', icon: 'ph--gear--regular' },
-  { id: 'comments', icon: 'ph--chat-text--regular' },
-  { id: 'automation', icon: 'ph--atom--regular' },
-  { id: 'debug', icon: 'ph--bug--regular' },
-];
-
-const getPanel = (id?: string): Panel['id'] => {
-  const panel = panels.find((p) => p.id === id) ?? panels[0];
-  return panel.id;
-};
-
-export const ComplementarySidebar = ({ panel, flatDeck }: ComplementarySidebarProps) => {
+export const ComplementarySidebar = ({ panels, current }: ComplementarySidebarProps) => {
   const { popoverAnchorId } = useLayout();
   const attended = useAttended();
-  const part = getPanel(panel);
-  const id = attended[0] ? `${attended[0]}${SLUG_PATH_SEPARATOR}${part}` : undefined;
+  const panel = (panels.find((p) => p.id === current) ?? panels[0])?.id;
+  const id = attended[0] ? `${attended[0]}${SLUG_PATH_SEPARATOR}${panel}` : undefined;
   const { graph } = useGraph();
   const node = useNode(graph, id);
   const dispatch = useIntentDispatcher();
@@ -56,19 +41,19 @@ export const ComplementarySidebar = ({ panel, flatDeck }: ComplementarySidebarPr
 
   const actions = useMemo(
     () =>
-      panels.map(({ id, icon }) => ({
+      panels.map(({ id, label, icon }) => ({
         id: `complementary-${id}`,
         data: () => {
           void dispatch({ action: NavigationAction.OPEN, data: { activeParts: { complementary: id } } });
         },
         properties: {
-          label: [`open ${id} label`, { ns: DECK_PLUGIN }],
+          label,
           icon,
           menuItemType: 'toggle',
-          isChecked: part === id,
+          isChecked: panel === id,
         },
       })),
-    [part],
+    [panel],
   );
 
   // TODO(wittjosiah): Ensure that id is always defined.
@@ -77,26 +62,23 @@ export const ComplementarySidebar = ({ panel, flatDeck }: ComplementarySidebarPr
   // TODO(burdon): Debug panel doesn't change when switching even though id has chagned.
   return (
     <Main.ComplementarySidebar>
-      <div role='none' className={mx(deckGrid, 'grid-cols-1 bs-full')}>
-        <NodePlankHeading
-          coordinate={coordinate}
-          node={node}
-          popoverAnchorId={popoverAnchorId}
-          flatDeck={flatDeck}
-          actions={actions}
-        />
-        <div className='row-span-2 divide-y divide-separator overflow-x-hidden overflow-y-scroll'>
-          {node && (
-            <Surface
-              key={id}
-              role={`complementary--${part}`}
-              data={{ id, subject: node.properties.object ?? node.properties.space, popoverAnchorId }}
-              fallback={PlankContentError}
-              placeholder={<PlankLoading />}
-            />
-          )}
+      <StackContext.Provider value={{ size: 'contain', orientation: 'horizontal', separators: true, rail: true }}>
+        <div role='none' className={mx(railGridHorizontal, 'grid-cols-1 bs-full divide-y divide-separator')}>
+          <NodePlankHeading coordinate={coordinate} node={node} popoverAnchorId={popoverAnchorId} actions={actions} />
+          <div className='divide-y divide-separator overflow-x-hidden overflow-y-scroll'>
+            {node && (
+              <Surface
+                key={id}
+                role={`complementary--${panel}`}
+                limit={1}
+                data={{ id, subject: node.properties.object ?? node.properties.space, popoverAnchorId }}
+                fallback={PlankContentError}
+                placeholder={<PlankLoading />}
+              />
+            )}
+          </div>
         </div>
-      </div>
+      </StackContext.Provider>
     </Main.ComplementarySidebar>
   );
 };

package/src/components/DeckLayout/DeckLayout.tsx

@@ -4,16 +4,16 @@
 
 import { Sidebar as MenuIcon } from '@phosphor-icons/react';
 import { untracked } from '@preact/signals-core';
-import React, { useCallback, useEffect, useMemo, useRef, type UIEvent } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, type UIEvent, Fragment } from 'react';
 
 import { type LayoutParts, Surface, type Toast as ToastSchema, firstIdInPart, usePlugin } from '@dxos/app-framework';
 import { type AttentionPluginProvides } from '@dxos/plugin-attention';
-import { Button, Dialog, Main, Popover, useOnTransition, useTranslation } from '@dxos/react-ui';
-import { Deck } from '@dxos/react-ui-deck';
+import { Button, Dialog, Main, Popover, useOnTransition, useTranslation, type MainProps } from '@dxos/react-ui';
+import { Stack, StackContext, DEFAULT_HORIZONTAL_SIZE } from '@dxos/react-ui-stack';
 import { getSize, mainPaddingTransitions } from '@dxos/react-ui-theme';
 
 import { ActiveNode } from './ActiveNode';
-import { ComplementarySidebar } from './ComplementarySidebar';
+import { ComplementarySidebar, type ComplementarySidebarProps } from './ComplementarySidebar';
 import { ContentEmpty } from './ContentEmpty';
 import { Fullscreen } from './Fullscreen';
 import { Plank } from './Plank';
@@ -29,24 +29,15 @@ import { useLayout } from '../LayoutContext';
 export type DeckLayoutProps = {
   layoutParts: LayoutParts;
   toasts: ToastSchema[];
-  flatDeck?: boolean;
   overscroll: Overscroll;
   showHints: boolean;
-  slots?: {
-    wallpaper?: { classNames?: string };
-  };
   onDismissToast: (id: string) => void;
-};
+} & Pick<ComplementarySidebarProps, 'panels'>;
+
+const PlankSeparator = ({ index }: { index: number }) =>
+  index > 0 ? <span role='separator' className='row-span-2 bg-deck is-4' style={{ gridColumn: index * 2 }} /> : null;
 
-export const DeckLayout = ({
-  layoutParts,
-  toasts,
-  flatDeck,
-  overscroll,
-  showHints,
-  slots,
-  onDismissToast,
-}: DeckLayoutProps) => {
+export const DeckLayout = ({ layoutParts, toasts, overscroll, showHints, panels, onDismissToast }: DeckLayoutProps) => {
   const context = useLayout();
   const {
     layoutMode,
@@ -63,16 +54,17 @@ export const DeckLayout = ({
   const { plankSizing } = useDeckContext();
   // NOTE: Not `useAttended` so that the layout component is not re-rendered when the attended list changes.
   const attentionPlugin = usePlugin<AttentionPluginProvides>('dxos.org/plugin/attention');
-  const searchPlugin = usePlugin('dxos.org/plugin/search');
   const fullScreenSlug = useMemo(() => firstIdInPart(layoutParts, 'fullScreen'), [layoutParts]);
 
   const scrollLeftRef = useRef<number | null>();
   const deckRef = useRef<HTMLDivElement>(null);
 
+  const isSoloModeLoaded = layoutMode === 'solo' && Boolean(layoutParts.solo?.[0]);
+
   // Ensure the first plank is attended when the deck is first rendered.
   useEffect(() => {
     const attended = untracked(() => attentionPlugin?.provides.attention.attended ?? []);
-    const firstId = layoutMode === 'solo' ? firstIdInPart(layoutParts, 'solo') : firstIdInPart(layoutParts, 'main');
+    const firstId = isSoloModeLoaded ? firstIdInPart(layoutParts, 'solo') : firstIdInPart(layoutParts, 'main');
     if (attended.length === 0 && firstId) {
       // TODO(wittjosiah): Focusing the type button is a workaround.
       //   If the plank is directly focused on first load the focus ring appears.
@@ -112,18 +104,14 @@ export const DeckLayout = ({
     [layoutMode],
   );
 
-  const isEmpty = layoutParts.main?.length === 0 && layoutParts.solo?.length === 0;
+  const isEmpty = (layoutParts.main?.length ?? 0) === 0 && (layoutParts.solo?.length ?? 0) === 0;
 
   const padding = useMemo(() => {
     if (layoutMode === 'deck' && overscroll === 'centering') {
-      return calculateOverscroll(layoutParts.main, plankSizing, sidebarOpen, complementarySidebarOpen);
+      return calculateOverscroll(layoutParts.main?.length ?? 0);
     }
     return {};
-  }, [layoutMode, overscroll, layoutParts.main, plankSizing, sidebarOpen, complementarySidebarOpen]);
-
-  if (layoutMode === 'fullscreen') {
-    return <Fullscreen id={fullScreenSlug} />;
-  }
+  }, [layoutMode, overscroll, layoutParts.main]);
 
   return (
     <Popover.Root
@@ -140,127 +128,143 @@ export const DeckLayout = ({
     >
       <ActiveNode />
 
-      <Main.Root
-        navigationSidebarOpen={context.sidebarOpen}
-        onNavigationSidebarOpenChange={(next) => (context.sidebarOpen = next)}
-        complementarySidebarOpen={context.complementarySidebarOpen}
-        onComplementarySidebarOpenChange={(next) => (context.complementarySidebarOpen = next)}
-      >
-        {/* Notch */}
-        <Main.Notch classNames='z-[21]'>
-          <Surface role='notch-start' />
-          <Button onClick={() => (context.sidebarOpen = !context.sidebarOpen)} variant='ghost' classNames='p-1'>
-            <span className='sr-only'>{t('open navigation sidebar label')}</span>
-            <MenuIcon weight='light' className={getSize(5)} />
-          </Button>
-          <Button
-            onClick={() => (context.complementarySidebarOpen = !context.complementarySidebarOpen)}
-            variant='ghost'
-            classNames='p-1'
-          >
-            <span className='sr-only'>{t('open complementary sidebar label')}</span>
-            <MenuIcon mirrored weight='light' className={getSize(5)} />
-          </Button>
-          <Surface role='notch-end' />
-        </Main.Notch>
+      {layoutMode === 'fullscreen' && <Fullscreen id={fullScreenSlug} />}
 
-        {/* Left sidebar. */}
-        <Sidebar layoutParts={layoutParts} />
+      {layoutMode !== 'fullscreen' && (
+        <Main.Root
+          navigationSidebarOpen={context.sidebarOpen}
+          onNavigationSidebarOpenChange={(next) => (context.sidebarOpen = next)}
+          complementarySidebarOpen={context.complementarySidebarOpen}
+          onComplementarySidebarOpenChange={(next) => (context.complementarySidebarOpen = next)}
+        >
+          {/* Notch */}
+          <Main.Notch classNames='z-[21]'>
+            <Surface role='notch-start' />
+            <Button onClick={() => (context.sidebarOpen = !context.sidebarOpen)} variant='ghost' classNames='p-1'>
+              <span className='sr-only'>{t('open navigation sidebar label')}</span>
+              <MenuIcon weight='light' className={getSize(5)} />
+            </Button>
+            <Surface role='notch-end' />
+          </Main.Notch>
 
-        {/* Right sidebar. */}
-        <ComplementarySidebar panel={layoutParts.complementary?.[0].id} flatDeck={flatDeck} />
+          {/* Left sidebar. */}
+          <Sidebar layoutParts={layoutParts} />
 
-        {/* Dialog overlay to dismiss dialogs. */}
-        <Main.Overlay />
+          {/* Right sidebar. */}
+          <ComplementarySidebar panels={panels} current={layoutParts.complementary?.[0].id} />
 
-        {/* No content. */}
-        {isEmpty && (
-          <Main.Content handlesFocus>
-            <ContentEmpty />
-          </Main.Content>
-        )}
+          {/* Dialog overlay to dismiss dialogs. */}
+          <Main.Overlay />
 
-        {/* Solo/deck mode. */}
-        {!isEmpty && (
-          <Main.Content bounce classNames='grid block-end-[--statusbar-size]' handlesFocus>
-            <div role='none' className='relative'>
-              <Deck.Root
-                style={padding}
-                classNames={[
-                  !flatDeck && 'bg-deck',
-                  mainPaddingTransitions,
-                  'absolute inset-0',
-                  slots?.wallpaper?.classNames,
-                ]}
-                solo={layoutMode === 'solo'}
-                onScroll={handleScroll}
-                ref={deckRef}
+          {/* No content. */}
+          {isEmpty && (
+            <Main.Content handlesFocus>
+              <ContentEmpty />
+            </Main.Content>
+          )}
+
+          {/* Solo/deck mode. */}
+          {!isEmpty && (
+            <Main.Content
+              bounce
+              classNames='grid block-end-[--statusbar-size]'
+              handlesFocus
+              style={
+                {
+                  '--dx-main-sidebarWidth': sidebarOpen ? 'var(--nav-sidebar-size)' : '0px',
+                  '--dx-main-complementaryWidth': complementarySidebarOpen
+                    ? 'var(--complementary-sidebar-size)'
+                    : '0px',
+                  '--dx-main-contentFirstWidth': `${plankSizing[layoutParts.main?.[0]?.id ?? 'never'] ?? DEFAULT_HORIZONTAL_SIZE}rem`,
+                  '--dx-main-contentLastWidth': `${plankSizing[layoutParts.main?.[(layoutParts.main?.length ?? 1) - 1]?.id ?? 'never'] ?? DEFAULT_HORIZONTAL_SIZE}rem`,
+                } as MainProps['style']
+              }
+            >
+              <div
+                role='none'
+                className={!isSoloModeLoaded ? 'relative bg-deck overflow-hidden' : 'sr-only'}
+                {...(isSoloModeLoaded && { inert: '' })}
               >
-                <Plank
-                  entry={layoutParts.solo?.[0] ?? { id: 'unknown-solo' }}
-                  layoutParts={layoutParts}
-                  part='solo'
-                  layoutMode={layoutMode}
-                  flatDeck={flatDeck}
-                  searchEnabled={!!searchPlugin}
-                />
-                {layoutParts.main?.map((layoutEntry) => (
-                  <Plank
-                    key={layoutEntry.id}
-                    entry={layoutEntry}
-                    layoutParts={layoutParts}
-                    part='main'
-                    layoutMode={layoutMode}
-                    flatDeck={flatDeck}
-                    searchEnabled={!!searchPlugin}
-                  />
-                ))}
-              </Deck.Root>
-            </div>
-          </Main.Content>
-        )}
+                <Stack
+                  orientation='horizontal'
+                  size='contain'
+                  classNames={['absolute inset-block-0 -inset-inline-px', mainPaddingTransitions]}
+                  onScroll={handleScroll}
+                  itemsCount={2 * (layoutParts.main?.length ?? 0) - 1}
+                  style={padding}
+                  ref={deckRef}
+                >
+                  {layoutParts.main?.map((layoutEntry, index) => (
+                    <Fragment key={layoutEntry.id}>
+                      <PlankSeparator index={index} />
+                      <Plank
+                        entry={layoutEntry}
+                        layoutParts={layoutParts}
+                        part='main'
+                        layoutMode={layoutMode}
+                        order={index * 2 + 1}
+                        last={index === layoutParts.main!.length - 1}
+                      />
+                    </Fragment>
+                  ))}
+                </Stack>
+              </div>
+              <div
+                role='none'
+                className={isSoloModeLoaded ? 'relative bg-deck overflow-hidden' : 'sr-only'}
+                {...(!isSoloModeLoaded && { inert: '' })}
+              >
+                <StackContext.Provider
+                  value={{ size: 'contain', orientation: 'horizontal', separators: true, rail: true }}
+                >
+                  <Plank entry={layoutParts.solo?.[0]} layoutParts={layoutParts} part='solo' layoutMode={layoutMode} />
+                </StackContext.Provider>
+              </div>
+            </Main.Content>
+          )}
 
-        {/* Footer status. */}
-        <StatusBar showHints={showHints} />
+          {/* Footer status. */}
+          <StatusBar showHints={showHints} />
+        </Main.Root>
+      )}
 
-        {/* Global popovers. */}
-        <Popover.Portal>
-          <Popover.Content
-            classNames='z-[60]'
-            onEscapeKeyDown={() => {
-              context.popoverOpen = false;
-              context.popoverAnchorId = undefined;
-            }}
-          >
-            <Popover.Viewport>
-              <Surface role='popover' data={popoverContent} />
-            </Popover.Viewport>
-            <Popover.Arrow />
-          </Popover.Content>
-        </Popover.Portal>
+      {/* Global popovers. */}
+      <Popover.Portal>
+        <Popover.Content
+          classNames='z-[60]'
+          onEscapeKeyDown={() => {
+            context.popoverOpen = false;
+            context.popoverAnchorId = undefined;
+          }}
+        >
+          <Popover.Viewport>
+            <Surface role='popover' data={popoverContent} />
+          </Popover.Viewport>
+          <Popover.Arrow />
+        </Popover.Content>
+      </Popover.Portal>
 
-        {/* Global dialog. */}
-        <Dialog.Root open={dialogOpen} onOpenChange={(nextOpen) => (context.dialogOpen = nextOpen)}>
-          <Dialog.Overlay blockAlign={dialogBlockAlign}>
-            <Surface role='dialog' data={dialogContent} />
-          </Dialog.Overlay>
-        </Dialog.Root>
+      {/* Global dialog. */}
+      <Dialog.Root open={dialogOpen} onOpenChange={(nextOpen) => (context.dialogOpen = nextOpen)}>
+        <Dialog.Overlay blockAlign={dialogBlockAlign}>
+          <Surface role='dialog' data={dialogContent} />
+        </Dialog.Overlay>
+      </Dialog.Root>
 
-        {/* Global toasts. */}
-        {toasts?.map((toast) => (
-          <Toast
-            {...toast}
-            key={toast.id}
-            onOpenChange={(open) => {
-              if (!open) {
-                onDismissToast(toast.id);
-              }
+      {/* Global toasts. */}
+      {toasts?.map((toast) => (
+        <Toast
+          {...toast}
+          key={toast.id}
+          onOpenChange={(open) => {
+            if (!open) {
+              onDismissToast(toast.id);
+            }
 
-              return open;
-            }}
-          />
-        ))}
-      </Main.Root>
+            return open;
+          }}
+        />
+      ))}
     </Popover.Root>
   );
 };