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

package/src/components/Plank/Plank.tsx

@@ -1,299 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { useFocusFinders } from '@fluentui/react-tabster';
-import React, {
-  type KeyboardEvent,
-  type PropsWithChildren,
-  memo,
-  useCallback,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-} from 'react';
-
-import { Common } from '@dxos/app-framework';
-import { Surface, useAppGraph, useOperationInvoker } from '@dxos/app-framework/react';
-import { debounce } from '@dxos/async';
-import { type Node, useNode } from '@dxos/plugin-graph';
-import { ATTENDABLE_PATH_SEPARATOR, useAttentionAttributes } from '@dxos/react-ui-attention';
-import { StackItem, railGridHorizontal } from '@dxos/react-ui-stack';
-import { mainIntrinsicSize, mx } from '@dxos/ui-theme';
-
-import { useCompanions, useDeckState, useMainSize } from '../../hooks';
-import { parseEntryId } from '../../layout';
-import { DeckOperation, type DeckSettingsProps, type LayoutMode, type ResolvedPart } from '../../types';
-
-import { PlankContentError, PlankError } from './PlankError';
-import { PlankHeading } from './PlankHeading';
-import { PlankLoading } from './PlankLoading';
-
-const UNKNOWN_ID = 'unknown_id';
-
-//
-// Plank
-//
-
-export type PlankProps = Pick<PlankComponentProps, 'layoutMode' | 'part' | 'path' | 'order' | 'active' | 'settings'> & {
-  id?: string;
-  companionId?: string;
-};
-
-// TODO(burdon): Factor out conditional rendering.
-//   Remove this wrapper component and render the entire set of planks in the deck with conditional visibility
-//   to obviate mounting and unmounting when switching between solo and companion mode?
-// NOTE(thure, in reply): Whether any surface should be rendered and hidden is a performance matter — remember that
-//  article surfaces contain full experiences, so being able to unmount them will yield relatively large performance
-//  benefits. I think where we anticipate users will definitely want to quickly switch between showing and hiding entire
-//  articles, over the (again probably large) performance benefit that unmounting them would confer, we can mount and
-//  hide them, but I think that scenario in its most unambiguous form is probably rare. You could extrapolate
-//  the scenario to include all "potential" planks such as companions, which we could keep mounted and hidden, but I
-//  don't think the resulting performance would be acceptable. I think the real issue is "perceived performance" which
-//  has mitigations that are in between mounting and un-mounting since both of those have tradeoffs; we may need one or more
-//  "partially-mounted" experiences, like loading skeletons at the simple end, or screenshots of "sleeping" planks at
-//  the advanced end.
-
-/**
- * A Plank is the main container for surfaces within a Deck.
- * It may be paired with a companion plank that enables the user to select one of multiple companion surfaces.
- */
-export const Plank = memo(({ id = UNKNOWN_ID, companionId, ...props }: PlankProps) => {
-  const { graph } = useAppGraph();
-  const node = useNode(graph, id);
-  const companions = useCompanions(id);
-  const currentCompanion = companions.find(({ id }) => id === companionId);
-  const hasCompanion = !!(companionId && currentCompanion);
-
-  return (
-    <PlankContainer
-      solo={props.part === 'solo'}
-      companion={hasCompanion}
-      encapsulate={!!props.settings?.encapsulatedPlanks}
-    >
-      <PlankComponent
-        id={id}
-        node={node}
-        companioned={hasCompanion ? 'primary' : undefined}
-        companions={hasCompanion ? [] : companions}
-        {...props}
-        {...(props.part === 'solo' ? { part: 'solo-primary' } : {})}
-      />
-      {hasCompanion && (
-        <PlankComponent
-          id={companionId}
-          node={currentCompanion}
-          primary={node}
-          companions={companions}
-          companioned='companion'
-          {...props}
-          {...(props.part === 'solo' ? { part: 'solo-companion' } : { order: (props.order ?? 0) + 1 })}
-        />
-      )}
-    </PlankContainer>
-  );
-});
-
-//
-// PlankContainer
-//
-
-type PlankContainerProps = PropsWithChildren<{ solo: boolean; companion: boolean; encapsulate: boolean }>;
-
-const PlankContainer = ({ children, solo, companion, encapsulate }: PlankContainerProps) => {
-  const sizeAttrs = useMainSize();
-  if (!solo) {
-    return children;
-  }
-
-  // TODO(burdon): Make resizable.
-  return (
-    <div
-      role='none'
-      data-popover-collision-boundary={true}
-      className={mx(
-        'absolute inset-[--main-spacing] grid',
-        encapsulate && 'border border-separator rounded overflow-hidden',
-        companion && 'grid-cols-[6fr_4fr]', // TODO(burdon): Resize.
-        railGridHorizontal,
-        mainIntrinsicSize,
-      )}
-      {...sizeAttrs}
-    >
-      {children}
-    </div>
-  );
-};
-
-//
-// PlankComponent
-//
-
-type PlankComponentProps = {
-  layoutMode: LayoutMode;
-  id: string;
-  part: ResolvedPart;
-  path?: string[];
-  order?: number;
-  active?: string[];
-  companioned?: 'primary' | 'companion';
-  node?: Node.Node;
-  primary?: Node.Node;
-  companions?: Node.Node[];
-  settings?: DeckSettingsProps;
-};
-
-const PlankComponent = memo(
-  ({
-    layoutMode,
-    id,
-    part,
-    path,
-    order,
-    active,
-    companioned,
-    node,
-    primary,
-    companions,
-    settings,
-  }: PlankComponentProps) => {
-    const { invokePromise } = useOperationInvoker();
-    const { state, deck } = useDeckState();
-    const { popoverAnchorId, scrollIntoView } = state;
-    const { findFirstFocusable } = useFocusFinders();
-    const canResize = layoutMode === 'deck';
-
-    const attentionAttrs = useAttentionAttributes(primary?.id ?? id);
-    const index = active ? active.findIndex((entryId) => entryId === id) : 0;
-    const length = active?.length ?? 1;
-    const canIncrementStart = active && index !== undefined && index > 0 && length !== undefined && length > 1;
-    const canIncrementEnd = active && index !== undefined && index < length - 1 && length !== undefined;
-
-    const rootElement = useRef<HTMLDivElement | null>(null);
-
-    const { variant } = parseEntryId(id);
-    const sizeKey = `${id.split('+')[0]}${variant ? `${ATTENDABLE_PATH_SEPARATOR}${variant}` : ''}`;
-    const size = deck.plankSizing[sizeKey] as number | undefined;
-
-    const handleSizeChange = useCallback(
-      debounce((nextSize: number) => {
-        return invokePromise(DeckOperation.UpdatePlankSize, { id: sizeKey, size: nextSize });
-      }, 200),
-      [invokePromise, sizeKey],
-    );
-
-    // TODO(thure): Tabster's focus group should handle moving focus to Main, but something is blocking it.
-    const handleKeyDown = useCallback((event: KeyboardEvent) => {
-      if (event.target === event.currentTarget) {
-        switch (event.key) {
-          case 'Escape':
-            rootElement.current?.closest('main')?.focus();
-            break;
-          case 'Enter':
-            rootElement.current && findFirstFocusable(rootElement.current)?.focus();
-            break;
-        }
-      }
-    }, []);
-
-    useLayoutEffect(() => {
-      if (scrollIntoView === id) {
-        layoutMode === 'deck' && rootElement.current?.scrollIntoView({ behavior: 'smooth', inline: 'center' });
-        // Clear the scroll into view state once it has been actioned.
-        void invokePromise(Common.LayoutOperation.ScrollIntoView, { subject: undefined });
-      }
-    }, [id, scrollIntoView, layoutMode, invokePromise]);
-
-    const isSolo = layoutMode.startsWith('solo') && part === 'solo';
-    const isAttendable =
-      (layoutMode.startsWith('solo') && part.startsWith('solo')) || (layoutMode === 'deck' && part === 'deck');
-
-    const sizeAttrs = useMainSize();
-
-    const data = useMemo(
-      () =>
-        node && {
-          attendableId: id,
-          subject: node.data,
-          companionTo: primary?.data,
-          properties: node.properties,
-          variant,
-          path,
-          popoverAnchorId,
-        },
-      [node, node?.data, node?.properties, path, popoverAnchorId, primary?.data, variant],
-    );
-
-    // TODO(wittjosiah): Change prop to accept a component.
-    const placeholder = useMemo(() => <PlankLoading />, []);
-
-    const Root = part.startsWith('solo') ? 'article' : StackItem.Root;
-    const fullscreen = layoutMode === 'solo--fullscreen';
-    const className = mx(
-      'attention-surface relative dx-focus-ring-inset-over-all density-coarse',
-      isSolo && 'absolute inset-0',
-      isSolo && mainIntrinsicSize,
-      railGridHorizontal,
-      part.startsWith('solo') && 'grid',
-      part.startsWith('solo-') && 'grid-rows-subgrid row-span-2 min-is-0',
-      fullscreen && 'grid-rows-1',
-      part === 'deck' && (companioned === 'companion' ? '!border-separator border-ie' : '!border-separator border-li'),
-      part === 'solo-companion' && '!border-separator border-is',
-      settings?.encapsulatedPlanks &&
-        !part.startsWith('solo') &&
-        'mli-[--main-spacing] !border-separator border rounded overflow-hidden',
-    );
-
-    return (
-      <Root
-        ref={rootElement}
-        data-testid='deck.plank'
-        data-popover-collision-boundary={true}
-        tabIndex={0}
-        {...(part.startsWith('solo')
-          ? ({ ...sizeAttrs, className } as any)
-          : {
-              item: { id },
-              size,
-              onSizeChange: handleSizeChange,
-              classNames: className,
-              order,
-              role: 'article',
-            })}
-        {...(isAttendable ? attentionAttrs : {})}
-        onKeyDown={handleKeyDown}
-      >
-        {node ? (
-          <>
-            {!fullscreen && (
-              <PlankHeading
-                id={id}
-                part={part.startsWith('solo-') ? 'solo' : part}
-                node={node}
-                layoutMode={layoutMode}
-                deckEnabled={settings?.enableDeck}
-                canIncrementStart={canIncrementStart}
-                canIncrementEnd={canIncrementEnd}
-                popoverAnchorId={popoverAnchorId}
-                primaryId={primary?.id}
-                companioned={companioned}
-                companions={companions}
-              />
-            )}
-            <Surface
-              key={node.id}
-              role='article'
-              data={data}
-              limit={1}
-              fallback={PlankContentError}
-              placeholder={placeholder}
-            />
-          </>
-        ) : (
-          <PlankError id={id} part={part} />
-        )}
-        {canResize && <StackItem.ResizeHandle />}
-      </Root>
-    );
-  },
-);

package/src/components/Plank/PlankError.tsx

@@ -1,49 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { useEffect, useState } from 'react';
-
-import { type Node } from '@dxos/plugin-graph';
-import { useTranslation } from '@dxos/react-ui';
-import { descriptionMessage, mx } from '@dxos/ui-theme';
-
-import { meta } from '../../meta';
-
-import { PlankHeading, type PlankHeadingProps } from './PlankHeading';
-import { PlankLoading } from './PlankLoading';
-
-export const PlankContentError = ({ error }: { error?: Error }) => {
-  const { t } = useTranslation(meta.id);
-  const errorString = error?.toString() ?? '';
-  return (
-    <div role='none' className='overflow-y-auto p-8 attention-surface grid place-items-center'>
-      <p role='alert' className={mx(descriptionMessage, 'break-all rounded-md p-4')}>
-        {error ? errorString : t('error fallback message')}
-      </p>
-    </div>
-  );
-};
-
-export const PlankError = ({
-  id,
-  part,
-  node,
-  error,
-}: {
-  id: string;
-  part: PlankHeadingProps['part'];
-  node?: Node.Node;
-  error?: Error;
-}) => {
-  const [timedOut, setTimedOut] = useState(false);
-  useEffect(() => {
-    setTimeout(() => setTimedOut(true), 5e3);
-  }, []);
-  return (
-    <>
-      <PlankHeading id={id} part={part} node={node} pending={!timedOut} />
-      {timedOut ? <PlankContentError error={error} /> : <PlankLoading />}
-    </>
-  );
-};

package/src/components/Sidebar/ComplementarySidebar.tsx

@@ -1,221 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, {
-  Fragment,
-  type MouseEvent,
-  type PropsWithChildren,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
-
-import { Common } from '@dxos/app-framework';
-import { Surface, useOperationInvoker } from '@dxos/app-framework/react';
-import { IconButton, type Label, Main, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { Tabs } from '@dxos/react-ui-tabs';
-import { mx } from '@dxos/ui-theme';
-
-import {
-  type DeckCompanion,
-  getCompanionId,
-  useBreakpoints,
-  useDeckCompanions,
-  useDeckState,
-  useHoistStatusbar,
-} from '../../hooks';
-import { meta } from '../../meta';
-import { getMode } from '../../types';
-import { layoutAppliesTopbar } from '../../util';
-import { PlankContentError, PlankLoading } from '../Plank';
-
-import { ToggleComplementarySidebarButton } from './SidebarButton';
-
-const label = ['complementary sidebar title', { ns: meta.id }] satisfies Label;
-
-export type ComplementarySidebarProps = {
-  current?: string;
-};
-
-export const ComplementarySidebar = ({ current }: ComplementarySidebarProps) => {
-  const { t } = useTranslation(meta.id);
-  const { invokeSync } = useOperationInvoker();
-  const { state, deck, updateState } = useDeckState();
-  const layoutMode = getMode(deck);
-  const breakpoint = useBreakpoints();
-  const topbar = layoutAppliesTopbar(breakpoint, layoutMode);
-  const hoistStatusbar = useHoistStatusbar(breakpoint, layoutMode);
-
-  const companions = useDeckCompanions();
-  const activeCompanion = companions.find((companion) => getCompanionId(companion.id) === current);
-  const activeId = activeCompanion && getCompanionId(activeCompanion.id);
-  const [internalValue, setInternalValue] = useState(activeId);
-
-  useEffect(() => {
-    setInternalValue(activeId);
-  }, [activeId]);
-
-  const handleTabClick = useCallback(
-    (event: MouseEvent) => {
-      const nextValue = event.currentTarget.getAttribute('data-value') as string;
-      if (nextValue === activeId) {
-        updateState((s) => ({
-          ...s,
-          complementarySidebarState: s.complementarySidebarState === 'expanded' ? 'collapsed' : 'expanded',
-        }));
-      } else {
-        setInternalValue(nextValue);
-        updateState((s) => ({ ...s, complementarySidebarState: 'expanded' }));
-        invokeSync(Common.LayoutOperation.UpdateComplementary, { subject: nextValue });
-      }
-    },
-    [state.complementarySidebarState, activeId, invokeSync, updateState],
-  );
-
-  const data = useMemo(
-    () =>
-      activeCompanion && {
-        id: activeCompanion.id,
-        subject: activeCompanion.data,
-      },
-    [activeCompanion?.id, activeCompanion?.data],
-  );
-
-  useEffect(() => {
-    if (!activeId) {
-      invokeSync(Common.LayoutOperation.UpdateComplementary, { state: 'collapsed' });
-    }
-  }, [activeId, invokeSync]);
-
-  return (
-    <Main.ComplementarySidebar
-      label={label}
-      classNames={[
-        topbar && 'block-start-[calc(env(safe-area-inset-top)+var(--rail-size))]',
-        hoistStatusbar && 'block-end-[--statusbar-size]',
-      ]}
-    >
-      <Tabs.Root orientation='vertical' verticalVariant='stateless' value={internalValue} classNames='contents'>
-        <div
-          role='none'
-          className={mx(
-            '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-subduedSeparator',
-            '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'>
-            {companions.map((companion) => (
-              <Tabs.Tab key={getCompanionId(companion.id)} value={getCompanionId(companion.id)} asChild>
-                <IconButton
-                  label={toLocalizedString(companion.properties.label, t)}
-                  icon={companion.properties.icon}
-                  iconOnly
-                  tooltipSide='left'
-                  data-value={getCompanionId(companion.id)}
-                  variant={
-                    activeId === getCompanionId(companion.id)
-                      ? state.complementarySidebarState === 'expanded'
-                        ? 'primary'
-                        : 'default'
-                      : 'ghost'
-                  }
-                  onClick={handleTabClick}
-                />
-              </Tabs.Tab>
-            ))}
-          </Tabs.Tablist>
-          {!hoistStatusbar && (
-            <div role='none' className='grid grid-cols-1 auto-rows-[--rail-item] p-1 overflow-y-auto'>
-              <Surface role='status-bar--r0-footer' limit={1} />
-            </div>
-          )}
-          <div role='none' className='hidden lg:grid grid-cols-1 auto-rows-[--rail-action] p-1'>
-            <ToggleComplementarySidebarButton />
-          </div>
-        </div>
-        {activeId &&
-          companions.map((companion) => (
-            <Tabs.Tabpanel
-              key={getCompanionId(companion.id)}
-              value={getCompanionId(companion.id)}
-              classNames={[
-                'absolute data-[state="inactive"]:-z-[1] overflow-hidden',
-                '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)]',
-              ]}
-              {...(state.complementarySidebarState !== 'expanded' && { inert: true })}
-            >
-              <ComplementarySidebarPanel
-                companion={companion}
-                activeId={activeId}
-                data={data}
-                hoistStatusbar={hoistStatusbar}
-              />
-            </Tabs.Tabpanel>
-          ))}
-      </Tabs.Root>
-    </Main.ComplementarySidebar>
-  );
-};
-
-type ComplementarySidebarPanelProps = {
-  companion: DeckCompanion;
-  activeId: string;
-  data?: {
-    id: string;
-    subject: any;
-  };
-  hoistStatusbar: boolean;
-};
-
-const ComplementarySidebarPanel = ({ companion, activeId, data, hoistStatusbar }: ComplementarySidebarPanelProps) => {
-  const { t } = useTranslation(meta.id);
-
-  if (getCompanionId(companion.id) !== activeId && !data) {
-    return null;
-  }
-
-  const Wrapper = companion.properties.fixed ? Fragment : ScrollArea;
-
-  return (
-    <>
-      <div role='none' className='flex items-center p-1 gap-1 border-be border-subduedSeparator'>
-        <IconButton
-          label={toLocalizedString(companion.properties.label, t)}
-          icon={companion.properties.icon}
-          iconOnly
-          tooltipSide='left'
-          data-value={getCompanionId(companion.id)}
-          classNames='bs-10 is-10'
-          variant='default'
-        />
-        <div role='none' className='pli-1'>
-          {toLocalizedString(companion.properties.label, t)}
-        </div>
-      </div>
-      <Wrapper>
-        <Surface
-          role={`deck-companion--${getCompanionId(companion.id)}`}
-          data={data}
-          fallback={PlankContentError}
-          placeholder={<PlankLoading />}
-        />
-      </Wrapper>
-      {!hoistStatusbar && (
-        <div
-          role='contentinfo'
-          className='flex flex-wrap justify-center items-center border-bs border-subduedSeparator pbs-1 pbe-[max(env(safe-area-inset-bottom),0.25rem)]'
-        >
-          <Surface role='status-bar--r1-footer' limit={1} />
-        </div>
-      )}
-    </>
-  );
-};
-
-const ScrollArea = ({ children }: PropsWithChildren) => {
-  return <div className='flex flex-col grow overflow-x-hidden overflow-y-auto scrollbar-thin'>{children}</div>;
-};

package/src/components/fragments.ts

@@ -1,14 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-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)]';
-
-const sidebarToggleStyles = 'bs-[--rail-item] is-[--rail-item] absolute block-end-2 z-[1] !bg-deckSurface lg:hidden';
-
-export const fixedSidebarToggleStyles = mx(sidebarToggleStyles, 'inline-start-2');
-
-export const fixedComplementarySidebarToggleStyles = mx(sidebarToggleStyles, 'inline-end-2');