@dxos/plugin-deck 0.7.5-labs.8a82073 → 0.7.5-labs.a8b535d

package/src/components/DeckLayout/ComplementarySidebar.tsx

@@ -2,49 +2,65 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useCallback, useEffect, useMemo, useState, type MouseEvent } from 'react';
+import React, {
+  type PropsWithChildren,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  type MouseEvent,
+  Fragment,
+} from 'react';
 
 import {
   createIntent,
   LayoutAction,
   Surface,
   useAppGraph,
+  useCapabilities,
   useCapability,
   useIntentDispatcher,
 } from '@dxos/app-framework';
-import { Main, useTranslation, toLocalizedString, IconButton, ScrollArea } from '@dxos/react-ui';
+import { Main, useTranslation, toLocalizedString, IconButton, ScrollArea as NaturalScrollArea } from '@dxos/react-ui';
 import { useAttended } from '@dxos/react-ui-attention';
 import { Tabs } from '@dxos/react-ui-tabs';
+import { byPosition } from '@dxos/util';
 
 import { PlankContentError } from './PlankError';
 import { PlankLoading } from './PlankLoading';
 import { ToggleComplementarySidebarButton } from './SidebarButton';
 import { DeckCapabilities } from '../../capabilities';
-import { useNode, useNodeActionExpander } from '../../hooks';
+import { useNode } from '../../hooks';
 import { DECK_PLUGIN } from '../../meta';
-import { SLUG_PATH_SEPARATOR, type Panel } from '../../types';
+import { type Panel } from '../../types';
 import { layoutAppliesTopbar, useBreakpoints, useHoistStatusbar } from '../../util';
 
 export type ComplementarySidebarProps = {
-  panels: Panel[];
   current?: string;
 };
 
-export const ComplementarySidebar = ({ panels, current }: ComplementarySidebarProps) => {
+export const ComplementarySidebar = ({ current }: ComplementarySidebarProps) => {
+  const { t } = useTranslation(DECK_PLUGIN);
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
   const layout = useCapability(DeckCapabilities.MutableDeckState);
   const attended = useAttended();
-  const panelIds = useMemo(() => panels.map((panel) => panel.id), [panels]);
-  const activePanelId = panelIds.find((panelId) => panelId === current) ?? panels[0].id;
-  const activeEntryId = attended[0] ? `${attended[0]}${SLUG_PATH_SEPARATOR}${activePanelId}` : undefined;
   const { graph } = useAppGraph();
-  const node = useNode(graph, activeEntryId);
-  const { t } = useTranslation(DECK_PLUGIN);
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-  useNodeActionExpander(node);
+  const node = useNode(graph, attended[0]);
   const breakpoint = useBreakpoints();
   const topbar = layoutAppliesTopbar(breakpoint);
   const hoistStatusbar = useHoistStatusbar(breakpoint);
 
+  const panels = useCapabilities(DeckCapabilities.ComplementaryPanel);
+  const availablePanels = panels
+    .filter((panel) => {
+      if (!node || !panel.filter) {
+        return true;
+      }
+
+      return panel.filter(node);
+    })
+    .toSorted(byPosition);
+  const activePanelId = availablePanels.find((panel) => panel.id === current)?.id ?? availablePanels[0]?.id;
   const [internalValue, setInternalValue] = useState(activePanelId);
 
   useEffect(() => {
@@ -65,6 +81,17 @@ export const ComplementarySidebar = ({ panels, current }: ComplementarySidebarPr
     [layout, activePanelId, dispatch],
   );
 
+  const data = useMemo(
+    () =>
+      node && {
+        id: node.id,
+        subject: node.data,
+        workspace: layout.activeDeck,
+        popoverAnchorId: layout.popoverAnchorId,
+      },
+    [node, layout.popoverAnchorId],
+  );
+
   // TODO(burdon): Scroll area should be controlled by surface.
   return (
     <Main.ComplementarySidebar
@@ -82,10 +109,10 @@ export const ComplementarySidebar = ({ panels, current }: ComplementarySidebarPr
       >
         <div
           role='none'
-          className='absolute z-[1] inset-block-0 inline-end-0 !is-[--r0-size] border-is border-separator grid grid-cols-1 grid-rows-[1fr_min-content] bg-baseSurface contain-layout app-drag'
+          className='absolute z-[1] inset-block-0 inline-end-0 !is-[--r0-size] pbs-[env(safe-area-inset-top)] pbe-[env(safe-area-inset-bottom)] border-is border-separator grid grid-cols-1 grid-rows-[1fr_min-content] bg-baseSurface contain-layout app-drag'
         >
           <Tabs.Tablist classNames='grid grid-cols-1 auto-rows-[--rail-action] p-1 gap-1 !overflow-y-auto'>
-            {panels.map((panel) => (
+            {availablePanels.map((panel) => (
               <Tabs.Tab key={panel.id} value={panel.id} asChild>
                 <IconButton
                   label={toLocalizedString(panel.label, t)}
@@ -115,49 +142,79 @@ export const ComplementarySidebar = ({ panels, current }: ComplementarySidebarPr
             <ToggleComplementarySidebarButton />
           </div>
         </div>
-        {panels.map((panel) => (
+        {availablePanels.map((panel) => (
           <Tabs.Tabpanel
             key={panel.id}
             value={panel.id}
-            classNames='absolute data-[state="inactive"]:-z-[1] inset-block-0 inline-start-0 is-[calc(100%-var(--r0-size))] lg:is-[--r1-size] grid grid-cols-1 grid-rows-[var(--rail-size)_1fr_min-content]'
+            classNames='absolute data-[state="inactive"]:-z-[1] inset-block-0 inline-start-0 is-[calc(100%-var(--r0-size))] lg:is-[--r1-size] grid grid-cols-1 grid-rows-[var(--rail-size)_1fr_min-content] pbs-[env(safe-area-inset-top)]'
             {...(layout.complementarySidebarState !== 'expanded' && { inert: 'true' })}
           >
-            {panel.id === activePanelId && node && (
-              <>
-                <h2 className='flex items-center pli-2 border-separator border-be'>
-                  {toLocalizedString(panel.label, t)}
-                </h2>
-                <ScrollArea.Root>
-                  <ScrollArea.Viewport>
-                    <Surface
-                      key={activeEntryId}
-                      role={`complementary--${activePanelId}`}
-                      data={{
-                        id: activeEntryId,
-                        subject: node.properties.object ?? node.properties.space,
-                        popoverAnchorId: layout.popoverAnchorId,
-                      }}
-                      fallback={PlankContentError}
-                      placeholder={<PlankLoading />}
-                    />
-                  </ScrollArea.Viewport>
-                  <ScrollArea.Scrollbar orientation='vertical'>
-                    <ScrollArea.Thumb />
-                  </ScrollArea.Scrollbar>
-                </ScrollArea.Root>
-                {!hoistStatusbar && (
-                  <div
-                    role='contentinfo'
-                    className='flex flex-wrap justify-center items-center border-bs border-separator plb-1'
-                  >
-                    <Surface role='status-bar--r1-footer' limit={1} />
-                  </div>
-                )}
-              </>
-            )}
+            <ComplementarySidebarPanel
+              panel={panel}
+              activePanelId={activePanelId}
+              data={data}
+              hoistStatusbar={hoistStatusbar}
+            />
           </Tabs.Tabpanel>
         ))}
       </Tabs.Root>
     </Main.ComplementarySidebar>
   );
 };
+
+type ComplementarySidebarPanelProps = {
+  panel: Panel;
+  activePanelId: string;
+  data?: {
+    id: string;
+    subject: any;
+    workspace: string;
+    popoverAnchorId?: string;
+  };
+  hoistStatusbar: boolean;
+};
+
+const ScrollArea = ({ children }: PropsWithChildren) => {
+  return (
+    <NaturalScrollArea.Root>
+      <NaturalScrollArea.Viewport>{children}</NaturalScrollArea.Viewport>
+      <NaturalScrollArea.Scrollbar orientation='vertical'>
+        <NaturalScrollArea.Thumb />
+      </NaturalScrollArea.Scrollbar>
+    </NaturalScrollArea.Root>
+  );
+};
+
+const ComplementarySidebarPanel = ({ panel, activePanelId, data, hoistStatusbar }: ComplementarySidebarPanelProps) => {
+  const { t } = useTranslation(DECK_PLUGIN);
+
+  if (panel.id !== activePanelId || !data) {
+    return null;
+  }
+
+  const Wrapper = panel.fixed ? Fragment : ScrollArea;
+
+  return (
+    <>
+      <h2 className='flex items-center pli-2 border-separator border-be font-medium'>
+        {toLocalizedString(panel.label, t)}
+      </h2>
+      <Wrapper>
+        <Surface
+          role={`complementary--${activePanelId}`}
+          data={data}
+          fallback={PlankContentError}
+          placeholder={<PlankLoading />}
+        />
+      </Wrapper>
+      {!hoistStatusbar && (
+        <div
+          role='contentinfo'
+          className='flex flex-wrap justify-center items-center border-bs border-separator pbs-1 pbe-[max(env(safe-area-inset-bottom),0.25rem)]'
+        >
+          <Surface role='status-bar--r1-footer' limit={1} />
+        </div>
+      )}
+    </>
+  );
+};

package/src/components/DeckLayout/DeckLayout.tsx

@@ -3,7 +3,7 @@
 //
 
 import { untracked } from '@preact/signals-core';
-import React, { useCallback, useEffect, useMemo, useRef, type UIEvent, Fragment } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, type UIEvent, Fragment, useState } from 'react';
 
 import {
   LayoutAction,
@@ -27,7 +27,7 @@ import { Stack, StackContext, DEFAULT_HORIZONTAL_SIZE } from '@dxos/react-ui-sta
 import { mainPaddingTransitions } from '@dxos/react-ui-theme';
 
 import { ActiveNode } from './ActiveNode';
-import { ComplementarySidebar, type ComplementarySidebarProps } from './ComplementarySidebar';
+import { ComplementarySidebar } from './ComplementarySidebar';
 import { ContentEmpty } from './ContentEmpty';
 import { Fullscreen } from './Fullscreen';
 import { Plank } from './Plank';
@@ -45,12 +45,12 @@ export type DeckLayoutProps = {
   overscroll: Overscroll;
   showHints: boolean;
   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 = ({ overscroll, showHints, panels, onDismissToast }: DeckLayoutProps) => {
+export const DeckLayout = ({ overscroll, showHints, onDismissToast }: DeckLayoutProps) => {
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   const context = useCapability(DeckCapabilities.MutableDeckState);
   const {
@@ -76,6 +76,13 @@ export const DeckLayout = ({ overscroll, showHints, panels, onDismissToast }: De
   const scrollLeftRef = useRef<number | null>();
   const deckRef = useRef<HTMLDivElement>(null);
 
+  // TODO(thure): This is a workaround for the difference in `React`ion time between displaying a Popover and rendering
+  //  the anchor further down the tree. Refactor to use VirtualTrigger or some other approach which does not cause a lag.
+  const [delayedPopoverVisibility, setDelayedPopoverVisibility] = useState(false);
+  useEffect(() => {
+    popoverOpen ? setTimeout(() => setDelayedPopoverVisibility(true), 40) : setDelayedPopoverVisibility(false);
+  }, [popoverOpen]);
+
   // Ensure the first plank is attended when the deck is first rendered.
   useEffect(() => {
     // NOTE: Not `useAttended` so that the layout component is not re-rendered when the attended list changes.
@@ -165,19 +172,22 @@ export const DeckLayout = ({ overscroll, showHints, panels, onDismissToast }: De
 
   const Dialog = dialogType === 'alert' ? AlertDialog : NaturalDialog;
 
+  const handlePopoverOpenChange = useCallback(
+    (nextOpen: boolean) => {
+      if (nextOpen && popoverAnchorId) {
+        context.popoverOpen = true;
+      } else {
+        context.popoverOpen = false;
+        context.popoverAnchorId = undefined;
+        context.popoverSide = undefined;
+      }
+    },
+    [context],
+  );
+  const handlePopoverClose = useCallback(() => handlePopoverOpenChange(false), [handlePopoverOpenChange]);
+
   return (
-    <Popover.Root
-      modal
-      open={!!(popoverAnchorId && popoverOpen)}
-      onOpenChange={(nextOpen) => {
-        if (nextOpen && popoverAnchorId) {
-          context.popoverOpen = true;
-        } else {
-          context.popoverOpen = false;
-          context.popoverAnchorId = undefined;
-        }
-      }}
-    >
+    <Popover.Root modal open={!!(popoverAnchorId && delayedPopoverVisibility)} onOpenChange={handlePopoverOpenChange}>
       <ActiveNode />
 
       {fullscreen && <Fullscreen id={solo} />}
@@ -193,7 +203,7 @@ export const DeckLayout = ({ overscroll, showHints, panels, onDismissToast }: De
           <Sidebar />
 
           {/* Right sidebar. */}
-          <ComplementarySidebar panels={panels} current={complementarySidebarPanel} />
+          <ComplementarySidebar current={complementarySidebarPanel} />
 
           {/* Dialog overlay to dismiss dialogs. */}
           <Main.Overlay />
@@ -276,12 +286,7 @@ export const DeckLayout = ({ overscroll, showHints, panels, onDismissToast }: De
 
       {/* Global popovers. */}
       <Popover.Portal>
-        <Popover.Content
-          onEscapeKeyDown={() => {
-            context.popoverOpen = false;
-            context.popoverAnchorId = undefined;
-          }}
-        >
+        <Popover.Content side={context.popoverSide} onEscapeKeyDown={handlePopoverClose}>
           <Popover.Viewport>
             <Surface role='popover' data={popoverContent} limit={1} />
           </Popover.Viewport>
@@ -290,10 +295,20 @@ export const DeckLayout = ({ overscroll, showHints, panels, onDismissToast }: De
       </Popover.Portal>
 
       {/* Global dialog. */}
-      <Dialog.Root open={dialogOpen} onOpenChange={(nextOpen) => (context.dialogOpen = nextOpen)}>
-        <Dialog.Overlay blockAlign={dialogBlockAlign}>
+      {/* TODO(thure): End block alignment affecting `modal` and whether the surface renders in an overlay is tailored
+            to the needs of the ambient chat dialog. As the feature matures, consider separating concerns. */}
+      <Dialog.Root
+        modal={dialogBlockAlign !== 'end'}
+        open={dialogOpen}
+        onOpenChange={(nextOpen) => (context.dialogOpen = nextOpen)}
+      >
+        {dialogBlockAlign === 'end' ? (
           <Surface role='dialog' data={dialogContent} limit={1} />
-        </Dialog.Overlay>
+        ) : (
+          <Dialog.Overlay blockAlign={dialogBlockAlign}>
+            <Surface role='dialog' data={dialogContent} limit={1} />
+          </Dialog.Overlay>
+        )}
       </Dialog.Root>
 
       {/* Global toasts. */}

package/src/components/DeckLayout/Plank.tsx

@@ -50,12 +50,13 @@ export const Plank = memo(({ id = UNKNOWN_ID, part, path, order, active, layoutM
   const canIncrementStart = active && index !== undefined && index > 0 && length !== undefined && length > 1;
   const canIncrementEnd = active && index !== undefined && index < length - 1 && length !== undefined;
 
-  const size = deck.plankSizing[id] as number | undefined;
+  const key = id.split('+')[0];
+  const size = deck.plankSizing[key] as number | undefined;
   const setSize = useCallback(
     debounce((nextSize: number) => {
-      return dispatch(createIntent(DeckAction.UpdatePlankSize, { id, size: nextSize }));
+      return dispatch(createIntent(DeckAction.UpdatePlankSize, { id: key, size: nextSize }));
     }, 200),
-    [dispatch, id],
+    [dispatch, key],
   );
 
   // TODO(thure): Tabster’s focus group should handle moving focus to Main, but something is blocking it.

package/src/components/DeckLayout/PlankControls.tsx

@@ -40,7 +40,7 @@ const PlankControl = ({ icon, label, ...props }: Omit<ButtonProps, 'children'> &
       <Tooltip.Trigger asChild>
         <Button variant='ghost' {...props}>
           <span className='sr-only'>{label}</span>
-          <Icon icon={icon} size={4} />
+          <Icon icon={icon} size={5} />
         </Button>
       </Tooltip.Trigger>
       <Tooltip.Portal>

package/src/events.ts

@@ -7,5 +7,6 @@ import { Events } from '@dxos/app-framework';
 import { DECK_PLUGIN } from './meta';
 
 export namespace DeckEvents {
+  export const SetupComplementaryPanels = Events.createStateEvent(`${DECK_PLUGIN}/setup-complementary-panels`);
   export const StateReady = Events.createStateEvent(`${DECK_PLUGIN}/state-ready`);
 }

package/src/layout.ts

@@ -20,7 +20,7 @@ export const openEntry = (deck: string[], entryId: string, options?: OpenLayoutE
     const pivotId = options?.pivotId;
 
     if (key) {
-      const index = draft.findIndex((id) => id.startsWith(key));
+      const index = draft.findIndex((id) => id.split('+')[0] === key);
       if (index !== -1) {
         draft.splice(index, 1, entryId);
         return;

package/src/types.ts

@@ -4,7 +4,9 @@
 
 import { LayoutAction } from '@dxos/app-framework';
 import { S } from '@dxos/echo-schema';
+import { type Node } from '@dxos/plugin-graph';
 import { type Label } from '@dxos/react-ui';
+import { type Position } from '@dxos/util';
 
 import { DECK_PLUGIN } from './meta';
 
@@ -15,8 +17,17 @@ export type NewPlankPositioning = (typeof NewPlankPositions)[number];
 export const OverscrollOptions = ['none', 'centering'] as const;
 export type Overscroll = (typeof OverscrollOptions)[number];
 
-// TODO(wittjosiah): Include a predicate for whether the panel is visible for the current subject.
-export type Panel = { id: string; label: Label; icon: string };
+export type Panel = {
+  id: string;
+  label: Label;
+  icon: string;
+  position?: Position;
+  /**
+   * If true, the panel will now be wrapped in a scroll area.
+   */
+  fixed?: boolean;
+  filter?: (node: Node) => boolean;
+};
 
 export const DeckSettingsSchema = S.mutable(
   S.Struct({
@@ -60,10 +71,11 @@ export const DeckState = S.mutable(
      * Data to be passed to the dialog Surface.
      */
     dialogContent: S.optional(S.Any),
-    dialogBlockAlign: S.optional(S.Literal('start', 'center')),
+    dialogBlockAlign: S.optional(S.Literal('start', 'center', 'end')),
     dialogType: S.optional(S.Literal('default', 'alert')),
 
     popoverOpen: S.Boolean,
+    popoverSide: S.optional(S.Literal('top', 'right', 'bottom', 'left')),
     /**
      * Data to be passed to the popover Surface.
      */
@@ -74,6 +86,7 @@ export const DeckState = S.mutable(
     currentUndoId: S.optional(S.String),
 
     activeDeck: S.String,
+    previousDeck: S.String,
     decks: S.mutable(S.Record({ key: S.String, value: S.mutable(Deck) })),
     previousMode: S.mutable(S.Record({ key: S.String, value: LayoutMode })),
     deck: S.mutable(Deck),

package/src/util/index.ts

@@ -3,6 +3,7 @@
 //
 
 export * from './overscroll';
+export * from './set-active';
 export * from './useBreakpoints';
 export * from './layoutAppliesTopbar';
 export * from './useHoistStatusbar';

package/src/{capabilities → util}/set-active.ts

@@ -28,6 +28,10 @@ export const setActive = ({ next, state, attention }: SetActiveOptions) => {
       state.deck.active = next;
     }
 
+    if (state.deck.fullscreen && !state.deck.solo) {
+      state.deck.fullscreen = false;
+    }
+
     if (attention) {
       const attended = attention.current;
       const [attendedId] = Array.from(attended);

package/src/util/useHoistStatusbar.ts

@@ -5,6 +5,7 @@
 import { useMemo } from 'react';
 
 import { Capabilities, useCapability } from '@dxos/app-framework';
+import { useThemeContext } from '@dxos/react-ui';
 
 import { DECK_PLUGIN } from '../meta';
 import type { DeckSettingsProps } from '../types';
@@ -12,13 +13,8 @@ import type { DeckSettingsProps } from '../types';
 export const useHoistStatusbar = (breakpoint: string) => {
   const enableIdeStyleStatusbar = useCapability(Capabilities.SettingsStore).getStore<DeckSettingsProps>(DECK_PLUGIN)!
     .value.enableIdeStyleStatusbar;
+  const { safeAreaPadding } = useThemeContext();
   return useMemo(() => {
-    return (
-      breakpoint === 'desktop' &&
-      enableIdeStyleStatusbar &&
-      // NOTE(thure): this last predicate depends on a head script that measures `env(safe-area-bottom)` on resize;
-      // see that of composer-app for an example.
-      document.body.getAttribute('data-safe-area-bottom') === '0'
-    );
-  }, [enableIdeStyleStatusbar, breakpoint]);
+    return breakpoint === 'desktop' && enableIdeStyleStatusbar && safeAreaPadding?.bottom === 0;
+  }, [enableIdeStyleStatusbar, breakpoint, safeAreaPadding?.bottom]);
 };

package/dist/lib/browser/chunk-M2L53AIH.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/types.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { LayoutAction } from '@dxos/app-framework';\nimport { S } from '@dxos/echo-schema';\nimport { type Label } from '@dxos/react-ui';\n\nimport { DECK_PLUGIN } from './meta';\n\n// TODO(Zan): In the future we should consider adding new planks adjacent to the attended plank.\nexport const NewPlankPositions = ['start', 'end'] as const;\nexport type NewPlankPositioning = (typeof NewPlankPositions)[number];\n\nexport const OverscrollOptions = ['none', 'centering'] as const;\nexport type Overscroll = (typeof OverscrollOptions)[number];\n\n// TODO(wittjosiah): Include a predicate for whether the panel is visible for the current subject.\nexport type Panel = { id: string; label: Label; icon: string };\n\nexport const DeckSettingsSchema = S.mutable(\n  S.Struct({\n    showHints: S.Boolean,\n    enableNativeRedirect: S.Boolean,\n    enableIdeStyleStatusbar: S.Boolean,\n    newPlankPositioning: S.Literal(...NewPlankPositions),\n    overscroll: S.Literal(...OverscrollOptions),\n  }),\n);\n\nexport type DeckSettingsProps = S.Schema.Type<typeof DeckSettingsSchema>;\n\nconst LayoutMode = S.Union(S.Literal('deck'), S.Literal('solo'), S.Literal('fullscreen'));\nexport const isLayoutMode = (value: any): value is LayoutMode => S.is(LayoutMode)(value);\nexport type LayoutMode = S.Schema.Type<typeof LayoutMode>;\n\nexport const PlankSizing = S.Record({ key: S.String, value: S.Number });\nexport type PlankSizing = S.Schema.Type<typeof PlankSizing>;\n\nexport const Deck = S.Struct({\n  initialized: S.Boolean.annotations({\n    description: \"If false, the deck has not yet left solo mode and new planks should be solo'd.\",\n  }),\n  active: S.mutable(S.Array(S.String)),\n  inactive: S.mutable(S.Array(S.String)),\n  solo: S.optional(S.String),\n  fullscreen: S.Boolean,\n  plankSizing: S.mutable(PlankSizing),\n});\nexport type Deck = S.Schema.Type<typeof Deck>;\n\nexport const DeckState = S.mutable(\n  S.Struct({\n    sidebarState: S.Literal('closed', 'collapsed', 'expanded'),\n    complementarySidebarState: S.Literal('closed', 'collapsed', 'expanded'),\n    complementarySidebarPanel: S.optional(S.String),\n\n    dialogOpen: S.Boolean,\n    /**\n     * Data to be passed to the dialog Surface.\n     */\n    dialogContent: S.optional(S.Any),\n    dialogBlockAlign: S.optional(S.Literal('start', 'center')),\n    dialogType: S.optional(S.Literal('default', 'alert')),\n\n    popoverOpen: S.Boolean,\n    /**\n     * Data to be passed to the popover Surface.\n     */\n    popoverContent: S.optional(S.Any),\n    popoverAnchorId: S.optional(S.String),\n\n    toasts: S.mutable(S.Array(LayoutAction.Toast)),\n    currentUndoId: S.optional(S.String),\n\n    activeDeck: S.String,\n    decks: S.mutable(S.Record({ key: S.String, value: S.mutable(Deck) })),\n    previousMode: S.mutable(S.Record({ key: S.String, value: LayoutMode })),\n    deck: S.mutable(Deck),\n\n    /**\n     * The identifier of a component to scroll into view when it is mounted.\n     */\n    scrollIntoView: S.optional(S.String),\n  }),\n);\n\nexport type DeckState = S.Schema.Type<typeof DeckState>;\n\nexport const getMode = (deck: Deck): LayoutMode => {\n  if (deck.solo) {\n    return deck.fullscreen ? 'fullscreen' : 'solo';\n  }\n\n  return 'deck';\n};\n\n// NOTE: Chosen from RFC 1738’s `safe` characters: http://www.faqs.org/rfcs/rfc1738.html\nexport const SLUG_PATH_SEPARATOR = '~';\n\nexport const DECK_ACTION = `${DECK_PLUGIN}/action`;\n\nexport namespace DeckAction {\n  const PartAdjustmentSchema = S.Union(\n    S.Literal('close').annotations({ description: 'Close the plank.' }),\n    S.Literal('solo').annotations({ description: 'Solo the plank.' }),\n    S.Literal('increment-start').annotations({ description: 'Move the plank towards the start of the deck.' }),\n    S.Literal('increment-end').annotations({ description: 'Move the plank towards the end of the deck.' }),\n  );\n  export type PartAdjustment = S.Schema.Type<typeof PartAdjustmentSchema>;\n  export const Adjustment = S.mutable(S.Struct({ id: S.String, type: PartAdjustmentSchema }));\n  export type Adjustment = S.Schema.Type<typeof Adjustment>;\n\n  /**\n   * An atomic transaction to apply to the deck, describing which element to move to which location.\n   */\n  export class Adjust extends S.TaggedClass<Adjust>()(`${DECK_ACTION}/adjust`, {\n    input: Adjustment,\n    output: S.Void,\n  }) {}\n\n  export class UpdatePlankSize extends S.TaggedClass<UpdatePlankSize>()(`${DECK_ACTION}/update-plank-size`, {\n    input: S.Struct({\n      id: S.String,\n      size: S.Number,\n    }),\n    output: S.Void,\n  }) {}\n}\n"],
-  "mappings": "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",
-  "names": ["LayoutAction", "S", "NewPlankPositions", "OverscrollOptions", "DeckSettingsSchema", "S", "mutable", "Struct", "showHints", "Boolean", "enableNativeRedirect", "enableIdeStyleStatusbar", "newPlankPositioning", "Literal", "overscroll", "LayoutMode", "Union", "isLayoutMode", "value", "is", "PlankSizing", "Record", "key", "String", "Number", "Deck", "initialized", "annotations", "description", "active", "Array", "inactive", "solo", "optional", "fullscreen", "plankSizing", "DeckState", "sidebarState", "complementarySidebarState", "complementarySidebarPanel", "dialogOpen", "dialogContent", "Any", "dialogBlockAlign", "dialogType", "popoverOpen", "popoverContent", "popoverAnchorId", "toasts", "LayoutAction", "Toast", "currentUndoId", "activeDeck", "decks", "previousMode", "deck", "scrollIntoView", "getMode", "SLUG_PATH_SEPARATOR", "DECK_ACTION", "DECK_PLUGIN", "DeckAction", "PartAdjustmentSchema", "Adjustment", "id", "type", "Adjust", "TaggedClass", "input", "output", "Void", "UpdatePlankSize", "size"]
-}