@dxos/plugin-deck 0.9.1-main.c7dcc2e112 → 0.10.0

package/dist/types/src/containers/Plank/PlankRoot.d.ts

@@ -1,37 +0,0 @@
-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';
-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 declare const PlankProvider: React.FC<PlankContextValue & {
-    children: React.ReactNode;
-}>, usePlankContext: (consumerName: string) => PlankContextValue;
-export type PlankRootProps = PropsWithChildren<PlankContextValue>;
-/**
- * Headless root that provides plank context.
- */
-export declare const PlankRoot: ({ children, ...context }: PlankRootProps) => React.JSX.Element;
-//# sourceMappingURL=PlankRoot.d.ts.map

package/dist/types/src/containers/Plank/PlankRoot.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PlankRoot.d.ts","sourceRoot":"","sources":["../../../../../src/containers/Plank/PlankRoot.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAEhD,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,WAAW,EAAE,KAAK,YAAY,EAAE,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAI7F,MAAM,MAAM,iBAAiB,GAAG;IAC9B,6BAA6B;IAC7B,KAAK,EAAE,KAAK,CAAC,eAAe,CAAC;IAC7B,oDAAoD;IACpD,IAAI,EAAE,YAAY,CAAC;IACnB,2BAA2B;IAC3B,UAAU,EAAE,UAAU,CAAC;IACvB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC;IAC7B,2CAA2C;IAC3C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,qDAAqD;IACrD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,+CAA+C;IAC/C,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,aAAa,CAAC,cAAc,KAAK,IAAI,CAAC;IACpE,iCAAiC;IACjC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,gDAAgD;IAChD,gBAAgB,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,wCAAwC;IACxC,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACxD,CAAC;AAEF,eAAO,MAAO,aAAa;;IAAE,eAAe,6CAAgD,CAAC;AAE7F,MAAM,MAAM,cAAc,GAAG,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;AAElE;;GAEG;AACH,eAAO,MAAM,SAAS,6BAA8B,cAAc,sBAEjE,CAAC"}

package/dist/types/src/containers/Plank/index.d.ts

@@ -1,4 +0,0 @@
-export * from './Plank';
-export * from './PlankError';
-export * from './PlankLoading';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/src/containers/Plank/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/containers/Plank/index.ts"],"names":[],"mappings":"AAIA,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC"}

package/src/components/DeckSettings/DeckSettings.tsx

@@ -1,34 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React from 'react';
-
-import { type AppSurface } from '@dxos/app-toolkit/ui';
-import { useTranslation } from '@dxos/react-ui';
-import { Settings as SettingsForm } from '@dxos/react-ui-form';
-
-import { meta } from '#meta';
-import { Settings } from '#types';
-
-const isSocket = !!(globalThis as any).__args;
-
-export type DeckSettingsProps = AppSurface.SettingsArticleProps<Settings.Settings>;
-
-export const DeckSettings = ({ settings, onSettingsChange }: DeckSettingsProps) => {
-  const { t } = useTranslation(meta.profile.key);
-
-  return (
-    <SettingsForm.Viewport>
-      <SettingsForm.Section title={t('settings.title', { ns: meta.profile.key })}>
-        <SettingsForm.FieldSet
-          readonly={!onSettingsChange}
-          schema={Settings.Settings}
-          visible={(path) => path !== 'enableNativeRedirect' || !isSocket}
-          values={settings}
-          onValuesChanged={(values) => onSettingsChange?.(() => values)}
-        />
-      </SettingsForm.Section>
-    </SettingsForm.Viewport>
-  );
-};

package/src/containers/Plank/Plank.stories.tsx

@@ -1,108 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useMemo } from 'react';
-
-import { Capabilities, Capability, Plugin } from '@dxos/app-framework';
-import { withPluginManager } from '@dxos/app-framework/testing';
-import { Surface } from '@dxos/app-framework/ui';
-import { AppActivationEvents } from '@dxos/app-toolkit';
-import { AppSurface, useAppGraph } from '@dxos/app-toolkit/ui';
-import { corePlugins } from '@dxos/plugin-testing';
-import { random } from '@dxos/random';
-import { Main } from '@dxos/react-ui';
-import { StackContext } from '@dxos/react-ui-stack';
-import { Syntax } from '@dxos/react-ui-syntax-highlighter';
-import { Loading } from '@dxos/react-ui/testing';
-import { Organization } from '@dxos/types';
-
-import { DeckSettings, DeckState } from '#capabilities';
-import { meta as pluginMeta } from '#meta';
-import { translations } from '#translations';
-
-import { Plank } from './Plank';
-
-const TestPlugin = Plugin.define(pluginMeta).pipe(
-  Plugin.addModule({
-    activatesOn: AppActivationEvents.SetupSettings,
-    activate: DeckSettings,
-  }),
-  Plugin.addModule({
-    id: Capability.getModuleTag(DeckState),
-    activatesOn: AppActivationEvents.AppGraphReady,
-    activate: () => DeckState(),
-  }),
-  Plugin.make,
-);
-
-random.seed(101);
-
-const storySurfaceExtension = Capability.contributes(
-  Capabilities.ReactSurface,
-  Surface.create({
-    id: 'storyArticle',
-    filter: Surface.makeFilter(AppSurface.Article),
-    component: ({ data }) => {
-      const subject = (data as any)?.subject;
-      if (!subject) {
-        return <Loading />;
-      }
-
-      return (
-        <Syntax.Root data={subject}>
-          <Syntax.Content>
-            <Syntax.Viewport>
-              <Syntax.Code />
-            </Syntax.Viewport>
-          </Syntax.Content>
-        </Syntax.Root>
-      );
-    },
-  }),
-);
-
-const DefaultStory = () => {
-  const { graph } = useAppGraph();
-  const item = useMemo(() => Organization.make({ name: random.company.name() }), []);
-  const node = useMemo(() => ({ id: item.id, data: item, type: 'test', properties: { label: item.name } }), [item]);
-
-  return (
-    <Main.Root>
-      <Main.Content bounce handlesFocus classNames='grid' style={{ '--main-spacing': '0' } as any}>
-        <div className='relative overflow-hidden bg-deck-surface'>
-          <StackContext.Provider value={{ orientation: 'horizontal', size: 'contain', rail: true }}>
-            <Plank.Root graph={graph} part='solo' layoutMode='solo'>
-              <Plank.Content solo companion={false} encapsulate={false}>
-                <Plank.Component id={item.id} part='solo-primary' node={node as any} />
-              </Plank.Content>
-            </Plank.Root>
-          </StackContext.Provider>
-        </div>
-      </Main.Content>
-    </Main.Root>
-  );
-};
-
-const meta = {
-  title: 'plugins/plugin-deck/containers/Plank',
-  component: DefaultStory,
-  decorators: [
-    withPluginManager({
-      plugins: [...corePlugins(), TestPlugin()],
-      capabilities: [storySurfaceExtension],
-      setupEvents: [AppActivationEvents.SetupSettings],
-    }),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-    translations,
-  },
-} satisfies Meta<typeof DefaultStory>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/src/containers/Plank/Plank.tsx

@@ -1,22 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { PlankComponent, PlankComponentProps } from './PlankComponent';
-import { PlankContent, PlankContentProps } from './PlankContent';
-import { PlankControls } from './PlankControls';
-import { PlankHeading } from './PlankHeading';
-import { PlankRoot, PlankRootProps } from './PlankRoot';
-
-/**
- * Radix-style composite Plank component.
- */
-export const Plank = {
-  Root: PlankRoot,
-  Content: PlankContent,
-  Component: PlankComponent,
-  Heading: PlankHeading,
-  Controls: PlankControls,
-};
-
-export type { PlankRootProps, PlankComponentProps, PlankContentProps };

package/src/containers/Plank/PlankComponent.tsx

@@ -1,223 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { useFocusFinders } from '@fluentui/react-tabster';
-import React, { type KeyboardEvent, memo, useCallback, useLayoutEffect, useMemo, useRef } from 'react';
-
-import { Surface } from '@dxos/app-framework/ui';
-import { AppSurface } from '@dxos/app-toolkit/ui';
-import { debounce } from '@dxos/async';
-import { type Node } from '@dxos/plugin-graph';
-import { mainIntrinsicSize } from '@dxos/react-ui';
-import { getLinkedVariant } from '@dxos/react-ui-attention';
-import { useAttentionAttributes } from '@dxos/react-ui-attention';
-import { StackItem, type StackItemSize, railGridHorizontal } from '@dxos/react-ui-stack';
-import { mx } from '@dxos/ui-theme';
-
-import { useMainSize } from '#hooks';
-import { PLANK_COMPANION_TYPE } from '#types';
-
-import { PlankError, PlankErrorFallback } from './PlankError';
-import { PlankHeading } from './PlankHeading';
-import { PlankLoading } from './PlankLoading';
-import { PlankRootProps, usePlankContext } from './PlankRoot';
-
-/**
- * JS-based smooth scroll that won't be interrupted by MutationObserver or layout changes.
- */
-const smoothScrollTo = (element: HTMLElement, target: number, duration: number) => {
-  const start = element.scrollLeft;
-  const distance = target - start;
-  const startTime = performance.now();
-
-  const step = (currentTime: number) => {
-    const elapsed = currentTime - startTime;
-    const progress = Math.min(elapsed / duration, 1);
-    // Ease-out cubic.
-    const eased = 1 - Math.pow(1 - progress, 3);
-    element.scrollLeft = start + distance * eased;
-    if (progress < 1) {
-      requestAnimationFrame(step);
-    }
-  };
-
-  requestAnimationFrame(step);
-};
-
-// NOTE: Calibrated to show PLANK + COMPANION on MBP 16" screen.
-export const DEFAULT_SIZE = 48 satisfies StackItemSize;
-export const DEFAULT_COMPANION_SIZE = 35 satisfies StackItemSize;
-
-export type PlankComponentProps = Pick<PlankRootProps, 'part'> & {
-  id: string;
-  path?: string[];
-  order?: number;
-  active?: string[];
-  node?: Node.Node;
-  primary?: Node.Node;
-  companions?: Node.Node[];
-  companioned?: 'primary' | 'companion';
-};
-
-export const PlankComponent = memo(
-  ({ part, id, path, order, active, node, primary, companions, companioned }: PlankComponentProps) => {
-    const { layoutMode, settings, popoverAnchorId, scrollIntoView, plankSizing, onResize, onScrollIntoView } =
-      usePlankContext('PlankComponent');
-
-    const canResize = layoutMode === 'multi';
-    const { findFirstFocusable } = useFocusFinders();
-    const isCompanion = companioned === 'companion';
-    // Companions share attention with their primary; non-companions key attention to their own id.
-    const attentionId = isCompanion ? (primary?.id ?? id) : id;
-    const attentionAttrs = useAttentionAttributes(attentionId);
-    const orderId = isCompanion ? primary?.id : id;
-    const index = orderId && active ? active.findIndex((entryId) => entryId === orderId) : -1;
-    const length = active?.length ?? 1;
-    const isOrdered = !!active && index >= 0;
-    const canIncrementStart = isOrdered && index > 0;
-    const canIncrementEnd = isOrdered && index < length - 1;
-    const rootElement = useRef<HTMLDivElement | null>(null);
-    const variant = node?.type === PLANK_COMPANION_TYPE ? getLinkedVariant(id) : undefined;
-
-    // Sizing.
-    const sizeAttrs = useMainSize();
-    const sizeKey = id.split('+')[0];
-    const size = isCompanion
-      ? DEFAULT_COMPANION_SIZE
-      : ((plankSizing?.[sizeKey] as number | undefined) ?? DEFAULT_SIZE);
-    const handleSizeChange = useCallback(
-      debounce((nextSize: number) => {
-        const size = Math.round(nextSize);
-        onResize?.(sizeKey, size);
-      }, 200),
-      [sizeKey, onResize],
-    );
-
-    // 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 === 'multi' && rootElement.current) {
-        const element = rootElement.current;
-        const scrollParent = element.closest('[style*="overflow"], .overflow-x-auto') as HTMLElement | null;
-        if (scrollParent) {
-          const elementRect = element.getBoundingClientRect();
-          const parentRect = scrollParent.getBoundingClientRect();
-          const targetScrollLeft = scrollParent.scrollLeft + (elementRect.left - parentRect.left);
-
-          smoothScrollTo(scrollParent, targetScrollLeft, 300);
-        }
-
-        onScrollIntoView?.(undefined);
-      }
-    }, [id, scrollIntoView, layoutMode, onScrollIntoView]);
-
-    const isSolo = layoutMode.startsWith('solo') && part === 'solo';
-    const isAttendable =
-      (layoutMode.startsWith('solo') && part.startsWith('solo')) || (layoutMode === 'multi' && part === 'multi');
-
-    // Companions share attention with their primary, so they attend to the primary's id
-    // (matching the plank's attention container, which keys to `primary?.id ?? id`).
-    const attendableId = isCompanion ? (primary?.id ?? id) : id;
-    const data = useMemo<AppSurface.ArticleData | undefined>(
-      () =>
-        node && {
-          attendableId,
-          subject: node.data,
-          companionTo: primary?.data,
-          properties: node.properties,
-          variant,
-          path,
-          popoverAnchorId,
-        },
-      [node, node?.data, node?.properties, path, popoverAnchorId, primary?.data, variant, attendableId],
-    );
-
-    // 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 classNames = [
-      'dx-attention-surface relative dx-focus-ring-inset-over-all dx-density-lg',
-      isSolo && 'absolute inset-0',
-      isSolo && mainIntrinsicSize,
-      railGridHorizontal,
-      part.startsWith('solo') && 'grid',
-      part.startsWith('solo-') && 'grid-rows-subgrid row-span-2 min-w-0',
-      fullscreen && 'grid-rows-1',
-      part === 'multi' && (isCompanion ? 'border-separator! border-e' : 'border-separator! border-x'),
-      part === 'solo-companion' && 'border-separator! border-s',
-      settings?.encapsulatedPlanks &&
-        !part.startsWith('solo') &&
-        'mx-(--main-spacing) border-separator! border rounded-sm overflow-hidden',
-    ];
-
-    return (
-      <Root
-        ref={rootElement}
-        data-testid='deck.plank'
-        data-popover-collision-boundary={true}
-        tabIndex={0}
-        {...(part.startsWith('solo')
-          ? ({
-              className: mx(classNames),
-              ...sizeAttrs,
-            } as any)
-          : {
-              role: 'article',
-              item: { id },
-              classNames,
-              order,
-              size,
-              onSizeChange: handleSizeChange,
-            })}
-        {...(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.Surface
-              key={node.id}
-              type={AppSurface.Article}
-              data={data}
-              limit={1}
-              fallback={PlankErrorFallback}
-              placeholder={placeholder}
-            />
-          </>
-        ) : (
-          <PlankError id={id} part={part} />
-        )}
-        {canResize && <StackItem.ResizeHandle />}
-      </Root>
-    );
-  },
-);

package/src/containers/Plank/PlankContent.tsx

@@ -1,45 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { type PropsWithChildren } from 'react';
-
-import { composable, composableProps, mainIntrinsicSize } from '@dxos/react-ui';
-import { railGridHorizontal } from '@dxos/react-ui-stack';
-
-import { useMainSize } from '#hooks';
-
-export type PlankContentProps = PropsWithChildren<{
-  solo: boolean;
-  companion: boolean;
-  encapsulate: boolean;
-}>;
-
-export const PlankContent = composable<HTMLDivElement, PlankContentProps>(
-  ({ children, solo, companion, encapsulate, ...props }, forwardedRef) => {
-    const sizeAttrs = useMainSize();
-    if (!solo) {
-      return children;
-    }
-
-    return (
-      <div
-        {...sizeAttrs}
-        {...composableProps(props, {
-          role: 'none',
-          classNames: [
-            'absolute inset-(--main-spacing) grid',
-            railGridHorizontal,
-            mainIntrinsicSize,
-            companion && 'grid-cols-[6fr_4fr]', // Ration of primary to companion.
-            encapsulate && 'border border-separator rounded-sm overflow-hidden',
-          ],
-        })}
-        data-popover-collision-boundary={true}
-        ref={forwardedRef}
-      >
-        {children}
-      </div>
-    );
-  },
-);

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.profile.key);
-
-  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>
-    );
-  }
-};