@dxos/plugin-deck 0.9.0 → 0.9.1-staging.ee54ba693a

package/src/containers/Plank/PlankError.tsx

@@ -1,82 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { useEffect, useMemo, useState } from 'react';
-
-import { TimeoutError } from '@dxos/errors';
-import { log } from '@dxos/log';
-import { type Node } from '@dxos/plugin-graph';
-import { ErrorFallback, type ErrorFallbackProps, 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 PlankError = ({
-  id,
-  part,
-  node,
-  error: errorProp,
-}: {
-  id: string;
-  part: PlankHeadingProps['part'];
-  node?: Node.Node;
-  error?: Error;
-}) => {
-  const [timedOut, setTimedOut] = useState(false);
-  useEffect(() => {
-    const timer = setTimeout(() => setTimedOut(true), 5_000);
-    return () => clearTimeout(timer);
-  }, []);
-
-  const error = useMemo(() => {
-    if (timedOut) {
-      return new TimeoutError({ message: 'Timeout loading content' });
-    }
-
-    return errorProp;
-  }, [timedOut, errorProp]);
-
-  return (
-    <>
-      <PlankHeading id={id} part={part} node={node} pending={!timedOut} />
-      {timedOut ? <PlankErrorFallback error={error} /> : <PlankLoading />}
-    </>
-  );
-};
-
-/**
- * User facing error fallback.
- */
-export const PlankErrorFallback = ({ error }: ErrorFallbackProps) => {
-  const { t } = useTranslation(meta.id);
-
-  useEffect(() => {
-    if (error) {
-      log.error('plank error', { error });
-    }
-  }, [error]);
-
-  if (process.env.NODE_ENV === 'development') {
-    return <ErrorFallback title='Plank Error' error={error} />;
-  } else {
-    const errorString = error?.toString() ?? '';
-
-    return (
-      <div
-        role='alert'
-        data-testid='plank-content-error'
-        className='dx-attention-surface overflow-y-auto p-8 grid place-items-center'
-      >
-        <div className='flex flex-col items-center gap-2'>
-          <p className={mx(descriptionMessage, 'break-all rounded-md p-4')}>
-            {error ? errorString : t('error-fallback.message')}
-          </p>
-        </div>
-      </div>
-    );
-  }
-};

package/src/containers/Plank/PlankHeading.tsx

@@ -1,237 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { Fragment, type MouseEvent, memo, useCallback, useEffect, useMemo } from 'react';
-
-import { Surface } from '@dxos/app-framework/ui';
-import { AppSurface } from '@dxos/app-toolkit/ui';
-import { Graph, type Node, useActionRunner } from '@dxos/plugin-graph';
-import { Icon, IconButton, Popover, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { getLinkedVariant } from '@dxos/react-ui-attention';
-import { StackItem, type StackItemSigilAction } from '@dxos/react-ui-stack';
-import { TextTooltip } from '@dxos/react-ui-text-tooltip';
-import { hoverableControls, hoverableFocusedWithinControls, iconSize } from '@dxos/ui-theme';
-
-import { useBreakpoints } from '#hooks';
-import { meta } from '#meta';
-import { DeckOperation } from '#types';
-import { type LayoutMode, PLANK_COMPANION_TYPE, type ResolvedPart } from '#types';
-
-import { PlankCompanionControls, PlankControls } from './PlankControls';
-import { usePlankContext } from './PlankRoot';
-
-const MAX_COMPANIONS = 5;
-
-export type PlankHeadingProps = {
-  id: string;
-  part: ResolvedPart;
-  layoutMode?: LayoutMode;
-  node?: Node.Node;
-  deckEnabled?: boolean;
-  canIncrementStart?: boolean;
-  canIncrementEnd?: boolean;
-  popoverAnchorId?: string;
-  primaryId?: string;
-  pending?: boolean;
-  companioned?: 'primary' | 'companion';
-  companions?: Node.Node[];
-  actions?: StackItemSigilAction[];
-  debug?: boolean;
-};
-
-export const PlankHeading = memo(
-  ({
-    id,
-    part,
-    node,
-    deckEnabled,
-    canIncrementStart,
-    canIncrementEnd,
-    popoverAnchorId,
-    primaryId,
-    pending,
-    companioned,
-    companions,
-    layoutMode,
-    actions = [],
-    debug = false,
-  }: PlankHeadingProps) => {
-    const { t } = useTranslation(meta.id);
-    const { graph, onAdjust, onUpdateCompanion } = usePlankContext('PlankHeading');
-    const runAction = useActionRunner();
-    const breakpoint = useBreakpoints();
-    const icon = node?.properties?.icon ?? 'ph--circle-dashed--regular';
-    const label = pending
-      ? t('pending.heading')
-      : toLocalizedString(node?.properties?.label ?? ['plank-heading-fallback.label', { ns: meta.id }], t);
-
-    const isCompanionNode = node?.type === PLANK_COMPANION_TYPE;
-
-    useEffect(() => {
-      const frame = requestAnimationFrame(() => {
-        // Load actions for the node.
-        if (node) {
-          void Graph.expand(graph, node.id, 'child');
-        }
-      });
-
-      return () => cancelAnimationFrame(frame);
-    }, [node]);
-
-    const attendableId = primaryId ?? id;
-    const capabilities = useMemo(
-      () => ({
-        deck: deckEnabled ?? true,
-        solo: breakpoint !== 'mobile' && (part === 'solo' || part === 'multi'),
-        incrementStart: canIncrementStart,
-        incrementEnd: canIncrementEnd,
-        fullscreen: !isCompanionNode,
-        companion: layoutMode !== 'multi' && !isCompanionNode && companions && companions.length > 0,
-      }),
-      [breakpoint, part, companions, canIncrementStart, canIncrementEnd, isCompanionNode, deckEnabled, layoutMode],
-    );
-
-    const variant = isCompanionNode ? getLinkedVariant(id) : undefined;
-    const sigilActions = useMemo(() => {
-      if (!node) {
-        return undefined;
-      } else if (variant) {
-        return [];
-      } else {
-        return [
-          actions,
-          Graph.getActions(graph, node.id).filter((action) =>
-            ['list-item', 'list-item-primary', 'heading-list-item'].includes(action.properties.disposition),
-          ),
-        ].filter((a) => a.length > 0);
-      }
-    }, [actions, node, variant, graph]);
-
-    const handleAction = useCallback(
-      (action: StackItemSigilAction) => {
-        if (typeof action.data === 'function') {
-          void runAction(action as Node.Action, { parent: node, caller: meta.id });
-        }
-      },
-      [node, runAction],
-    );
-
-    const handlePlankAction = useCallback(
-      (eventType: DeckOperation.PartAdjustment) => {
-        onAdjust?.(id, eventType);
-      },
-      [onAdjust, id],
-    );
-
-    const ActionRoot = node && popoverAnchorId === `${meta.id}:${node.id}` ? Popover.Anchor : Fragment;
-
-    const handleTabClick = useCallback(
-      (event: MouseEvent) => {
-        const target = (event.target as HTMLElement).closest('[data-id]') as HTMLElement | null;
-        const tabId = target?.dataset?.id;
-        if (tabId) {
-          onUpdateCompanion?.(tabId);
-        }
-      },
-      [onUpdateCompanion],
-    );
-
-    return (
-      <StackItem.Heading
-        data-tauri-drag-region
-        data-plank-heading
-        style={iconSize(5)}
-        classNames={[
-          'py-1 items-stretch gap-1 sticky left-12 dx-app-drag min-w-0 dx-contain-layout dx-density-lg',
-          part === 'solo'
-            ? 'ps-[calc(env(safe-area-inset-left)+.25rem)] pe-[calc(env(safe-area-inset-right)+.25rem)]'
-            : 'px-1',
-          ...(layoutMode === 'solo--fullscreen'
-            ? [
-                hoverableControls,
-                hoverableFocusedWithinControls,
-                '*:transition-opacity *:opacity-(--controls-opacity) bg-transparent',
-                'border-transparent transition-[background-color,border-color]',
-                'hover-hover:hover:bg-header-surface focus-within:bg-header-surface',
-                'hover-hover:hover:border-subdued-separator focus-within:border-subdued-separator',
-              ]
-            : []),
-        ]}
-      >
-        {companions && isCompanionNode ? (
-          /* TODO(thure): IMPORTANT: This is a tablist; it should be implemented as such. */
-          <div data-tauri-drag-region className='flex-1 min-w-0 overflow-x-auto scrollbar-none flex gap-1'>
-            {companions.map(({ id, properties: { icon, label } }) => (
-              <IconButton
-                key={id}
-                data-id={id}
-                icon={icon}
-                iconOnly={companions.length > MAX_COMPANIONS && node?.id !== id}
-                label={toLocalizedString(label, t)}
-                variant={node?.id === id ? 'primary' : 'ghost'}
-                onClick={handleTabClick}
-              />
-            ))}
-          </div>
-        ) : (
-          <>
-            <ActionRoot>
-              {node && sigilActions ? (
-                <StackItem.Sigil
-                  icon={icon}
-                  related={part === 'complementary'}
-                  attendableId={attendableId}
-                  triggerLabel={t('actions-menu.label')}
-                  actions={sigilActions}
-                  onAction={handleAction}
-                >
-                  <Surface.Surface
-                    type={AppSurface.MenuFooter}
-                    data={{ subject: node.data } satisfies AppSurface.MenuFooterData}
-                  />
-                </StackItem.Sigil>
-              ) : (
-                <StackItem.SigilButton>
-                  <span className='sr-only'>{label}</span>
-                  <Icon icon={icon} />
-                </StackItem.SigilButton>
-              )}
-            </ActionRoot>
-            <TextTooltip text={label} onlyWhenTruncating>
-              <StackItem.HeadingLabel
-                data-tauri-drag-region
-                attendableId={attendableId}
-                related={part === 'complementary'}
-                {...(pending && { classNames: 'text-description' })}
-              >
-                {label}
-              </StackItem.HeadingLabel>
-            </TextTooltip>
-          </>
-        )}
-        {debug && (
-          <div className='flex items-center text-sm text-info-text'>
-            {layoutMode}:{part}:{companioned}
-          </div>
-        )}
-        {node && part !== 'complementary' && (
-          <Surface.Surface
-            type={AppSurface.NavbarEnd}
-            data={{ subject: node.data } satisfies AppSurface.NavbarEndData}
-          />
-        )}
-        {companioned === 'companion' ? (
-          <PlankCompanionControls primary={primaryId} />
-        ) : (
-          <PlankControls
-            capabilities={capabilities}
-            layoutMode={layoutMode}
-            close={part === 'complementary' ? 'minify-end' : true}
-            onClick={handlePlankAction}
-          />
-        )}
-      </StackItem.Heading>
-    );
-  },
-);

package/src/containers/Plank/PlankLoading.tsx

@@ -1,10 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React from 'react';
-
-// TODO(burdon): Show skeleton: https://github.com/dxos/dxos/issues/8259
-export const PlankLoading = () => {
-  return <div className='grid place-items-center dx-attention-surface' />;
-};

package/src/containers/Plank/PlankRoot.tsx

@@ -1,49 +0,0 @@
-//
-// Copyright 2026 DXOS.org
-//
-
-import { createContext } from '@radix-ui/react-context';
-import React, { PropsWithChildren } from 'react';
-
-import { type Graph } from '@dxos/plugin-graph';
-
-import { type DeckOperation } from '#types';
-import { type LayoutMode, type PlankSizing, type ResolvedPart, type Settings } from '#types';
-
-const PLANK_NAME = 'Plank';
-
-export type PlankContextValue = {
-  /** The application graph. */
-  graph: Graph.ExpandableGraph;
-  /** Which part of the layout this plank occupies. */
-  part: ResolvedPart;
-  /** Current layout mode. */
-  layoutMode: LayoutMode;
-  /** Deck settings. */
-  settings?: Settings.Settings;
-  /** Popover anchor ID for heading menus. */
-  popoverAnchorId?: string;
-  /** ID of plank that should be scrolled into view. */
-  scrollIntoView?: string;
-  /** Persisted plank sizes keyed by plank ID. */
-  plankSizing?: PlankSizing;
-  /** Callback for plank adjustments (close, solo, increment, companion). */
-  onAdjust?: (id: string, type: DeckOperation.PartAdjustment) => void;
-  /** Callback for plank resize. */
-  onResize?: (id: string, size: number) => void;
-  /** Callback to clear scroll-into-view state. */
-  onScrollIntoView?: (id?: string) => void;
-  /** Callback to update the companion. */
-  onUpdateCompanion?: (companion: string | null) => void;
-};
-
-export const [PlankProvider, usePlankContext] = createContext<PlankContextValue>(PLANK_NAME);
-
-export type PlankRootProps = PropsWithChildren<PlankContextValue>;
-
-/**
- * Headless root that provides plank context.
- */
-export const PlankRoot = ({ children, ...context }: PlankRootProps) => {
-  return <PlankProvider {...context}>{children}</PlankProvider>;
-};

package/src/containers/Plank/index.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-export * from './Plank';
-export * from './PlankError';
-export * from './PlankLoading';