@dxos/plugin-deck 0.8.4-main.ae835ea → 0.8.4-main.bc674ce

package/src/components/Sidebar/SidebarButton.tsx

@@ -4,45 +4,56 @@
 
 import React, { useCallback } from 'react';
 
-import { LayoutAction, createIntent, useCapability, useIntentDispatcher } from '@dxos/app-framework';
+import { Common } from '@dxos/app-framework';
+import { useOperationInvoker } from '@dxos/app-framework/react';
 import { IconButton, type IconButtonProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 
-import { DeckCapabilities } from '../../capabilities';
-import { getCompanionId, useDeckCompanions } from '../../hooks';
+import { getCompanionId, useDeckCompanions, useDeckState } from '../../hooks';
 import { meta } from '../../meta';
 
 export const ToggleSidebarButton = ({
   classNames,
   variant = 'ghost',
 }: ThemedClassName<Pick<IconButtonProps, 'variant'>>) => {
-  const layoutContext = useCapability(DeckCapabilities.MutableDeckState);
+  const { state, updateState } = useDeckState();
   const { t } = useTranslation(meta.id);
+
+  const handleClick = useCallback(() => {
+    updateState((s) => ({
+      ...s,
+      sidebarState: s.sidebarState === 'expanded' ? 'collapsed' : 'expanded',
+    }));
+  }, [updateState]);
+
   return (
     <IconButton
       variant={variant}
-      iconOnly
       icon='ph--sidebar--regular'
+      iconOnly
       size={4}
       label={t('open navigation sidebar label')}
-      onClick={() =>
-        (layoutContext.sidebarState = layoutContext.sidebarState === 'expanded' ? 'collapsed' : 'expanded')
-      }
+      onClick={handleClick}
       classNames={classNames}
     />
   );
 };
 
 export const CloseSidebarButton = () => {
-  const layoutContext = useCapability(DeckCapabilities.MutableDeckState);
+  const { updateState } = useDeckState();
   const { t } = useTranslation(meta.id);
+
+  const handleClick = useCallback(() => {
+    updateState((s) => ({ ...s, sidebarState: 'collapsed' }));
+  }, [updateState]);
+
   return (
     <IconButton
       variant='ghost'
-      iconOnly
       icon='ph--caret-line-left--regular'
+      iconOnly
       size={4}
       label={t('close navigation sidebar label')}
-      onClick={() => (layoutContext.sidebarState = 'collapsed')}
+      onClick={handleClick}
       classNames='rounded-none pli-1 dx-focus-ring-inset pie-[max(.5rem,env(safe-area-inset-left))]'
     />
   );
@@ -53,35 +64,31 @@ export const ToggleComplementarySidebarButton = ({
   classNames,
   current,
 }: ThemedClassName<{ inR0?: boolean; current?: string }>) => {
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const layoutContext = useCapability(DeckCapabilities.MutableDeckState);
+  const { invokeSync } = useOperationInvoker();
+  const { state, updateState } = useDeckState();
   const { t } = useTranslation(meta.id);
 
   const companions = useDeckCompanions();
-  const handleClick = useCallback(async () => {
-    layoutContext.complementarySidebarState =
-      layoutContext.complementarySidebarState === 'expanded' ? 'collapsed' : 'expanded';
-    const firstCompanion = companions[0];
-    if (layoutContext.complementarySidebarState === 'expanded' && !current && firstCompanion) {
-      await dispatch(
-        createIntent(LayoutAction.UpdateComplementary, {
-          part: 'complementary',
-          subject: getCompanionId(firstCompanion.id),
-        }),
-      );
+  const handleClick = useCallback(() => {
+    const nextState = state.complementarySidebarState === 'expanded' ? 'collapsed' : 'expanded';
+    updateState((s) => ({ ...s, complementarySidebarState: nextState }));
+
+    const subject = state.complementarySidebarPanel ?? (companions[0] && getCompanionId(companions[0].id));
+    if (nextState === 'expanded' && !current && subject) {
+      invokeSync(Common.LayoutOperation.UpdateComplementary, { subject });
     }
-  }, [layoutContext, current, companions, dispatch]);
+  }, [state, updateState, current, companions, invokeSync]);
 
   return (
     <IconButton
-      iconOnly
-      onClick={handleClick}
       variant='ghost'
-      label={t('open complementary sidebar label')}
       classNames={['[&>svg]:-scale-x-100', classNames]}
       icon='ph--sidebar-simple--regular'
+      iconOnly
+      label={t('open complementary sidebar label')}
       size={inR0 ? 5 : 4}
       tooltipSide={inR0 ? 'left' : undefined}
+      onClick={handleClick}
     />
   );
 };

package/src/components/fragments.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 export const soloInlinePadding =
   'pis-[calc(env(safe-area-inset-left)+.25rem)] pie-[calc(env(safe-area-inset-left)+.25rem)]';

package/src/hooks/index.ts

@@ -5,6 +5,7 @@
 export * from './useBreakpoints';
 export * from './useCompanions';
 export * from './useDeckCompanions';
+export * from './useDeckState';
 export * from './useHoistStatusbar';
 export * from './useMainSize';
 export * from './useNodeActionExpander';

package/src/hooks/useCompanions.ts

@@ -4,7 +4,7 @@
 
 import { useMemo } from 'react';
 
-import { useAppGraph } from '@dxos/app-framework';
+import { useAppGraph } from '@dxos/app-framework/react';
 import { useConnections } from '@dxos/plugin-graph';
 import { byPosition } from '@dxos/util';
 

package/src/hooks/useDeckCompanions.ts

@@ -2,8 +2,10 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type Label, useAppGraph } from '@dxos/app-framework';
-import { type Node, ROOT_ID, useConnections } from '@dxos/plugin-graph';
+import { useAppGraph } from '@dxos/app-framework/react';
+import { Node, type Node as NodeType } from '@dxos/plugin-graph';
+import { useConnections } from '@dxos/plugin-graph';
+import { type Label } from '@dxos/ui-types';
 import { type Position, byPosition } from '@dxos/util';
 
 import { ATTENDABLE_PATH_SEPARATOR, DECK_COMPANION_TYPE } from '../types';
@@ -13,7 +15,7 @@ export const getCompanionId = (id: string) => {
   return companionId ?? 'never';
 };
 
-export type DeckCompanion = Node<
+export type DeckCompanion = NodeType.Node<
   any,
   {
     label: Label;
@@ -27,7 +29,7 @@ export type DeckCompanion = Node<
 
 export const useDeckCompanions = (): DeckCompanion[] => {
   const { graph } = useAppGraph();
-  const connections = useConnections(graph, ROOT_ID);
+  const connections = useConnections(graph, Node.RootId);
   const companions = connections.filter((node) => node.type === DECK_COMPANION_TYPE) as DeckCompanion[];
   return companions.toSorted((a, b) => byPosition(a.properties, b.properties));
 };

package/src/hooks/useDeckState.ts

@@ -0,0 +1,82 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useAtomValue } from '@effect-atom/atom-react';
+import { useCallback, useMemo } from 'react';
+
+import { Common } from '@dxos/app-framework';
+import { useCapability } from '@dxos/app-framework/react';
+import { invariant } from '@dxos/invariant';
+
+import {
+  DeckCapabilities,
+  type DeckEphemeralStateProps,
+  type DeckPluginState,
+  type DeckState,
+  type DeckStateProps,
+} from '../types';
+
+export type DeckStateHook = {
+  /** Combined state value (reactive). Includes both persisted and ephemeral state. */
+  state: DeckPluginState;
+  /** The active deck, computed from decks[activeDeck]. */
+  deck: DeckState;
+  /** Update persisted state. */
+  updateState: (fn: (current: DeckStateProps) => DeckStateProps) => void;
+  /** Update ephemeral state. */
+  updateEphemeral: (fn: (current: DeckEphemeralStateProps) => DeckEphemeralStateProps) => void;
+};
+
+/**
+ * Hook to access the deck plugin state reactively.
+ * Returns the combined state, the active deck, and update functions for each atom.
+ */
+export const useDeckState = (): DeckStateHook => {
+  const registry = useCapability(Common.Capability.AtomRegistry);
+  const stateAtom = useCapability(DeckCapabilities.State);
+  const ephemeralAtom = useCapability(DeckCapabilities.EphemeralState);
+
+  const persistedState = useAtomValue(stateAtom);
+  const ephemeralState = useAtomValue(ephemeralAtom);
+
+  // Compute deck from decks[activeDeck] to ensure it's always current.
+  const deck = useMemo(() => {
+    const d = persistedState.decks[persistedState.activeDeck];
+    invariant(d, `Deck not found: ${persistedState.activeDeck}`);
+    return d;
+  }, [persistedState.decks, persistedState.activeDeck]);
+
+  // Combine persisted and ephemeral state into a unified view.
+  const state = useMemo(
+    (): DeckPluginState => ({
+      ...persistedState,
+      ...ephemeralState,
+    }),
+    [persistedState, ephemeralState],
+  );
+
+  const updateState = useCallback(
+    (fn: (current: DeckStateProps) => DeckStateProps) => {
+      registry.set(stateAtom, fn(registry.get(stateAtom)));
+    },
+    [registry, stateAtom],
+  );
+
+  const updateEphemeral = useCallback(
+    (fn: (current: DeckEphemeralStateProps) => DeckEphemeralStateProps) => {
+      registry.set(ephemeralAtom, fn(registry.get(ephemeralAtom)));
+    },
+    [registry, ephemeralAtom],
+  );
+
+  return useMemo(
+    () => ({
+      state,
+      deck,
+      updateState,
+      updateEphemeral,
+    }),
+    [state, deck, updateState, updateEphemeral],
+  );
+};

package/src/hooks/useHoistStatusbar.ts

@@ -4,16 +4,14 @@
 
 import { useMemo } from 'react';
 
-import { Capabilities, useCapability } from '@dxos/app-framework';
+import { useAtomCapability } from '@dxos/app-framework/react';
 import { useThemeContext } from '@dxos/react-ui';
 
-import { meta } from '../meta';
-import type { DeckSettingsProps, LayoutMode } from '../types';
+import { DeckCapabilities, type LayoutMode } from '../types';
 
 export const useHoistStatusbar = (breakpoint: string, layoutMode?: LayoutMode): boolean => {
   const { safeAreaPadding } = useThemeContext();
-  const enableStatusbar = useCapability(Capabilities.SettingsStore).getStore<DeckSettingsProps>(meta.id)?.value
-    .enableStatusbar;
+  const enableStatusbar = useAtomCapability(DeckCapabilities.Settings).enableStatusbar;
 
   return useMemo(() => {
     return (

package/src/hooks/useNodeActionExpander.ts

@@ -4,14 +4,14 @@
 
 import { useEffect } from 'react';
 
-import { type Node, getGraph } from '@dxos/plugin-graph';
+import { Graph, type Node } from '@dxos/plugin-graph';
 
-export const useNodeActionExpander = (node?: Node) => {
+export const useNodeActionExpander = (node?: Node.Node) => {
   useEffect(() => {
     if (node) {
       const frame = requestAnimationFrame(() => {
-        const graph = getGraph(node);
-        void graph.expand(node.id);
+        const graph = Graph.getGraph(node);
+        void Graph.expand(graph, node.id);
       });
       return () => cancelAnimationFrame(frame);
     }

package/src/index.ts

@@ -2,8 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-export { DeckCapabilities } from './capabilities';
-export { DeckEvents } from './events';
+export { DeckCapabilities, DeckEvents } from './types';
 export * from './DeckPlugin';
 export * from './meta';
 export { useCompanions } from './hooks';

package/src/meta.ts

@@ -2,10 +2,10 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type PluginMeta } from '@dxos/app-framework';
+import { type Plugin } from '@dxos/app-framework';
 import { trim } from '@dxos/util';
 
-export const meta: PluginMeta = {
+export const meta: Plugin.Meta = {
   id: 'dxos.org/plugin/deck',
   name: 'Layout',
   description: trim`

package/src/translations.ts

@@ -34,7 +34,7 @@ export const translations = [
         'undo action label': 'Undo',
         'undo action alt': 'Undo previous action',
         'undo close label': 'Dismiss',
-        'error fallback message': 'Unable to open this item',
+        'error fallback message': 'Unable to open this object',
         'plank heading fallback label': 'Untitled',
         'actions menu label': 'Options',
         'settings deck label': 'Disable deck',

package/src/types/capabilities.ts

@@ -0,0 +1,33 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Atom } from '@effect-atom/atom-react';
+import * as Effect from 'effect/Effect';
+
+import { Capability, Common } from '@dxos/app-framework';
+import { invariant } from '@dxos/invariant';
+
+import { meta } from '../meta';
+import { type DeckEphemeralStateProps, type DeckSettingsProps, type DeckState, type DeckStateProps } from '../types';
+
+export namespace DeckCapabilities {
+  export const Settings = Capability.make<Atom.Writable<DeckSettingsProps>>(`${meta.id}/capability/settings`);
+
+  /** Persisted state (stored in KVS/localStorage). */
+  export const State = Capability.make<Atom.Writable<DeckStateProps>>(`${meta.id}/capability/state`);
+
+  /** Transient/ephemeral state (not persisted). */
+  export const EphemeralState = Capability.make<Atom.Writable<DeckEphemeralStateProps>>(
+    `${meta.id}/capability/ephemeral-state`,
+  );
+
+  /** Get the current active deck from state. */
+  export const getDeck = (): Effect.Effect<DeckState, Error, Capability.Service> =>
+    Effect.gen(function* () {
+      const state = yield* Common.Capability.getAtomValue(State);
+      const deck = state.decks[state.activeDeck];
+      invariant(deck, `Deck not found: ${state.activeDeck}`);
+      return deck;
+    });
+}

package/src/types/events.ts

@@ -0,0 +1,20 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type ActivationEvent, Common } from '@dxos/app-framework';
+
+import { meta } from '../meta';
+
+import { DeckCapabilities } from './capabilities';
+
+export namespace DeckEvents {
+  export const StateReady: ActivationEvent.ActivationEvent = Common.ActivationEvent.createStateEvent(
+    `${meta.id}/state-ready`,
+  );
+
+  /** Fired when DeckSettings capability is ready. */
+  export const SettingsReady: ActivationEvent.ActivationEvent = Common.ActivationEvent.createSettingsEvent(
+    DeckCapabilities.Settings.identifier,
+  );
+}

package/src/types/index.ts

@@ -2,4 +2,6 @@
 // Copyright 2025 DXOS.org
 //
 
+export * from './capabilities';
+export * from './events';
 export * from './schema';

package/src/types/schema.ts

@@ -4,7 +4,8 @@
 
 import * as Schema from 'effect/Schema';
 
-import { LayoutAction } from '@dxos/app-framework';
+import { Capability, Common } from '@dxos/app-framework';
+import { Operation } from '@dxos/operation';
 import { type DeepReadonly } from '@dxos/util';
 
 import { meta } from '../meta';
@@ -77,12 +78,20 @@ export const getMode = (deck: DeckState | DeepReadonly<DeckState>): LayoutMode =
   return 'deck';
 };
 
-// State of the deck plugin.
-export const DeckPluginState = Schema.Struct({
+// Persisted plugin state (stored in KVS/localStorage).
+export const DeckStateSchema = Schema.Struct({
   sidebarState: Schema.Literal('closed', 'collapsed', 'expanded'),
   complementarySidebarState: Schema.Literal('closed', 'collapsed', 'expanded'),
   complementarySidebarPanel: Schema.optional(Schema.String),
+  activeDeck: Schema.String,
+  previousDeck: Schema.String,
+  decks: Schema.mutable(Schema.Record({ key: Schema.String, value: Schema.mutable(DeckState) })),
+  previousMode: Schema.mutable(Schema.Record({ key: Schema.String, value: LayoutMode })),
+}).pipe(Schema.mutable);
+export type DeckStateProps = Schema.Schema.Type<typeof DeckStateSchema>;
 
+// Transient/ephemeral plugin state (not persisted).
+export const DeckEphemeralStateSchema = Schema.Struct({
   dialogOpen: Schema.Boolean,
   dialogType: Schema.optional(Schema.Literal('default', 'alert')),
   dialogBlockAlign: Schema.optional(Schema.Literal('start', 'center', 'end')),
@@ -95,23 +104,21 @@ export const DeckPluginState = Schema.Struct({
   popoverSide: Schema.optional(Schema.Literal('top', 'right', 'bottom', 'left')),
   popoverAnchor: Schema.optional(Schema.Any),
   popoverAnchorId: Schema.optional(Schema.String),
+  popoverKind: Schema.optional(Schema.Literal('base', 'card')),
+  popoverTitle: Schema.optional(Common.Label.annotations({ description: 'The title of the popover.' })),
   /** Data to be passed to the popover Surface. */
   popoverContent: Schema.optional(Schema.Any),
 
-  toasts: Schema.mutable(Schema.Array(LayoutAction.Toast)),
+  toasts: Schema.mutable(Schema.Array(Common.LayoutOperation.Toast)),
   currentUndoId: Schema.optional(Schema.String),
 
-  activeDeck: Schema.String,
-  previousDeck: Schema.String,
-  decks: Schema.mutable(Schema.Record({ key: Schema.String, value: Schema.mutable(DeckState) })),
-  previousMode: Schema.mutable(Schema.Record({ key: Schema.String, value: LayoutMode })),
-  deck: Schema.mutable(DeckState),
-
   /** The identifier of a component to scroll into view when it is mounted. */
   scrollIntoView: Schema.optional(Schema.String),
 }).pipe(Schema.mutable);
+export type DeckEphemeralStateProps = Schema.Schema.Type<typeof DeckEphemeralStateSchema>;
 
-export type DeckPluginState = Schema.Schema.Type<typeof DeckPluginState>;
+// Combined state type (for convenience in components that need both).
+export type DeckPluginState = DeckStateProps & DeckEphemeralStateProps;
 
 export namespace DeckAction {
   const PartAdjustmentSchema = Schema.Union(
@@ -148,3 +155,66 @@ export namespace DeckAction {
     output: Schema.Void,
   }) {}
 }
+
+/**
+ * Operations for the Deck plugin.
+ */
+export namespace DeckOperation {
+  const PartAdjustmentSchema = Schema.Union(
+    Schema.Literal('close').annotations({ description: 'Close the plank.' }),
+    Schema.Literal('companion').annotations({ description: 'Open the companion plank.' }),
+    Schema.Literal('solo').annotations({ description: 'Solo the plank.' }),
+    Schema.Literal('solo--fullscreen').annotations({ description: 'Fullscreen the plank.' }),
+    Schema.Literal('increment-start').annotations({ description: 'Move the plank towards the start of the deck.' }),
+    Schema.Literal('increment-end').annotations({ description: 'Move the plank towards the end of the deck.' }),
+  );
+  export type PartAdjustment = Schema.Schema.Type<typeof PartAdjustmentSchema>;
+
+  export const Adjust = Operation.make({
+    meta: {
+      key: `${meta.id}/operation/adjust`,
+      name: 'Adjust',
+      description: 'Adjust the layout of a plank.',
+    },
+    services: [Capability.Service],
+    schema: {
+      input: Schema.Struct({
+        id: Schema.String.annotations({ description: 'The id of the plank to adjust.' }),
+        type: PartAdjustmentSchema.annotations({ description: 'The type of adjustment to make.' }),
+      }),
+      output: Schema.Void,
+    },
+  });
+
+  export const UpdatePlankSize = Operation.make({
+    meta: {
+      key: `${meta.id}/operation/update-plank-size`,
+      name: 'Update Plank Size',
+      description: 'Update the size of a plank.',
+    },
+    services: [Capability.Service],
+    schema: {
+      input: Schema.Struct({
+        id: Schema.String.annotations({ description: 'The id of the plank to resize.' }),
+        size: Schema.Number.annotations({ description: 'The new size of the plank.' }),
+      }),
+      output: Schema.Void,
+    },
+  });
+
+  export const ChangeCompanion = Operation.make({
+    meta: {
+      key: `${meta.id}/operation/change-companion`,
+      name: 'Change Companion',
+      description: 'Change the companion plank for a primary plank.',
+    },
+    services: [Capability.Service],
+    schema: {
+      input: Schema.Struct({
+        primary: Schema.String,
+        companion: Schema.Union(Schema.String, Schema.Null),
+      }),
+      output: Schema.Void,
+    },
+  });
+}

package/src/util/layoutAppliesTopbar.ts

@@ -6,7 +6,7 @@ import { type LayoutMode } from '../types';
 
 export const layoutAppliesTopbar = (breakpoint: string, layoutMode?: LayoutMode) => {
   return (
-    document.body.getAttribute('data-platform') === 'win' &&
+    document.body.getAttribute('data-platform') === 'windows' &&
     breakpoint === 'desktop' &&
     layoutMode !== 'solo--fullscreen'
   );

package/src/util/set-active.ts

@@ -2,46 +2,66 @@
 // Copyright 2025 DXOS.org
 //
 
-import { batch } from '@preact/signals-core';
-
 import { type AttentionManager } from '@dxos/plugin-attention';
 
-import { type DeckPluginState } from '../types';
+import { type DeckState } from '../types';
 
 export type SetActiveOptions = {
   next: string[];
-  state: DeckPluginState;
+  deck: DeckState;
   attention?: AttentionManager;
 };
 
-export const setActive = ({ next, state, attention }: SetActiveOptions) => {
-  return batch(() => {
-    const active = state.deck.solo ? [state.deck.solo] : state.deck.active;
-    const removed = active.filter((id) => !next.includes(id));
-    const closed = Array.from(new Set([...state.deck.inactive.filter((id) => !next.includes(id)), ...removed]));
+export type SetActiveResult = {
+  /** Updates to apply to the deck. */
+  deckUpdates: {
+    inactive: string[];
+    solo: string | undefined;
+    active: string[];
+    fullscreen: boolean;
+  };
+  /** ID of the item to attend (scroll into view) if attention changed. */
+  toAttend?: string;
+};
 
-    state.deck.inactive = closed;
+/**
+ * Computes the new active state for the deck without mutating.
+ * Returns the updates to apply and optionally an item to attend.
+ */
+export const computeActiveUpdates = ({ next, deck, attention }: SetActiveOptions): SetActiveResult => {
+  const active = deck.solo ? [deck.solo] : deck.active;
+  const removed = active.filter((id) => !next.includes(id));
+  const closed = Array.from(new Set([...deck.inactive.filter((id) => !next.includes(id)), ...removed]));
 
-    if (state.deck.solo || !state.deck.initialized) {
-      state.deck.solo = next[0];
-    } else {
-      state.deck.active = next;
-    }
+  const updates = {
+    inactive: closed,
+    solo: deck.solo,
+    active: deck.active,
+    fullscreen: deck.fullscreen,
+  };
 
-    if (state.deck.fullscreen && !state.deck.solo) {
-      state.deck.fullscreen = false;
-    }
+  if (deck.solo || !deck.initialized) {
+    updates.solo = next[0];
+  } else {
+    updates.active = next;
+  }
+
+  if (deck.fullscreen && !updates.solo) {
+    updates.fullscreen = false;
+  }
 
-    if (attention) {
-      const attended = attention.current;
-      const [attendedId] = Array.from(attended);
-      const isAttendedAvailable = !!attendedId && next.includes(attendedId);
-      if (!isAttendedAvailable) {
-        const attendedIndex = active.indexOf(attendedId);
-        // If outside of bounds, focus on the first/last plank, otherwise focus on the new plank in the same position.
-        const index = attendedIndex === -1 ? 0 : attendedIndex >= next.length ? next.length - 1 : attendedIndex;
-        return next[index];
-      }
+  let toAttend: string | undefined;
+  if (attention) {
+    const attended = attention.getCurrent();
+    const [attendedId] = Array.from(attended);
+    const isAttendedAvailable = !!attendedId && next.includes(attendedId);
+    if (!isAttendedAvailable) {
+      const attendedIndex = active.indexOf(attendedId);
+      // If outside of bounds, focus on the first/last plank, otherwise focus on the new plank in the same position.
+      const index = attendedIndex === -1 ? 0 : attendedIndex >= next.length ? next.length - 1 : attendedIndex;
+      toAttend = next[index];
     }
-  });
+  }
+
+  return { deckUpdates: updates, toAttend };
 };