@dxos/plugin-deck 0.8.4-main.c85a9c8dae → 0.8.4-main.d9fc60f731

package/src/components/Sidebar/ComplementarySidebar.tsx

@@ -1,225 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, {
-  Fragment,
-  type MouseEvent,
-  type PropsWithChildren,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
-
-import { Surface, useOperationInvoker } from '@dxos/app-framework/ui';
-import { LayoutOperation } from '@dxos/app-toolkit';
-import { IconButton, type Label, Main, ScrollArea, 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 { PlankErrorFallback, 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((state) => ({
-          ...state,
-          complementarySidebarState: state.complementarySidebarState === 'expanded' ? 'collapsed' : 'expanded',
-        }));
-      } else {
-        setInternalValue(nextValue);
-        updateState((state) => ({ ...state, complementarySidebarState: 'expanded' }));
-        invokeSync(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(LayoutOperation.UpdateComplementary, { state: 'collapsed' });
-    }
-  }, [activeId, invokeSync]);
-
-  return (
-    <Main.ComplementarySidebar
-      label={label}
-      classNames={[
-        topbar && 'top-[calc(env(safe-area-inset-top)+var(--dx-rail-size))]',
-        hoistStatusbar && 'bottom-(--dx-statusbar-size)',
-      ]}
-    >
-      <Tabs.Root orientation='vertical' verticalVariant='stateless' value={internalValue} classNames='contents'>
-        <div
-          role='none'
-          className={mx(
-            'absolute z-[1] inset-y-0 end-0 !w-(--dx-r0-size)',
-            'py-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)] border-s border-subdued-separator',
-            'grid grid-cols-1 grid-rows-[1fr_min-content] bg-toolbar-surface dx-contain-layout dx-app-drag',
-          )}
-        >
-          <Tabs.Tablist classNames='grid grid-cols-1 auto-rows-(--dx-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-(--dx-rail-item) p-1 overflow-y-auto'>
-              <Surface.Surface role='status-bar--r0-footer' limit={1} />
-            </div>
-          )}
-          <div role='none' className='hidden lg:grid grid-cols-1 auto-rows-(--dx-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-y-0 start-0 w-[calc(100%-var(--dx-r0-size))] lg:w-(--dx-r1-size)',
-                'grid grid-cols-1 grid-rows-[var(--dx-rail-size)_1fr_min-content] py-[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 : ScrollAreaWrapper;
-
-  return (
-    <>
-      <div role='none' className='flex items-center p-1 gap-1 border-b border-subdued-separator'>
-        <IconButton
-          label={toLocalizedString(companion.properties.label, t)}
-          icon={companion.properties.icon}
-          iconOnly
-          tooltipSide='left'
-          data-value={getCompanionId(companion.id)}
-          classNames='h-10 w-10'
-          variant='default'
-        />
-        <div role='none' className='px-1'>
-          {toLocalizedString(companion.properties.label, t)}
-        </div>
-      </div>
-      <Wrapper>
-        <Surface.Surface
-          role={`deck-companion--${getCompanionId(companion.id)}`}
-          data={data}
-          fallback={PlankErrorFallback}
-          placeholder={<PlankLoading />}
-        />
-      </Wrapper>
-      {!hoistStatusbar && (
-        <div
-          role='contentinfo'
-          className='flex flex-wrap justify-center items-center border-y border-subdued-separator pt-1 pb-[max(env(safe-area-inset-bottom),0.25rem)]'
-        >
-          <Surface.Surface role='status-bar--r1-footer' limit={1} />
-        </div>
-      )}
-    </>
-  );
-};
-
-const ScrollAreaWrapper = ({ children }: PropsWithChildren) => {
-  return (
-    <ScrollArea.Root thin orientation='vertical' classNames='grow'>
-      <ScrollArea.Viewport>{children}</ScrollArea.Viewport>
-    </ScrollArea.Root>
-  );
-};

package/src/components/Sidebar/Sidebar.tsx

@@ -1,42 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { useMemo } from 'react';
-
-import { Surface } from '@dxos/app-framework/ui';
-import { type Label, Main } from '@dxos/react-ui';
-
-import { useBreakpoints, useDeckState, useHoistStatusbar } from '../../hooks';
-import { meta } from '../../meta';
-import { getMode } from '../../types';
-import { layoutAppliesTopbar } from '../../util';
-
-const label = ['sidebar title', { ns: meta.id }] satisfies Label;
-
-export const Sidebar = () => {
-  const { state, deck } = useDeckState();
-  const { popoverAnchorId, activeDeck: current } = state;
-  const breakpoint = useBreakpoints();
-  const layoutMode = getMode(deck);
-  const topbar = layoutAppliesTopbar(breakpoint, layoutMode);
-  const hoistStatusbar = useHoistStatusbar(breakpoint, layoutMode);
-
-  const navigationData = useMemo(
-    () => ({ popoverAnchorId, topbar, hoistStatusbar, current }),
-    [popoverAnchorId, topbar, hoistStatusbar, current],
-  );
-
-  return (
-    <Main.NavigationSidebar
-      label={label}
-      classNames={[
-        'grid',
-        topbar && 'top-[calc(env(safe-area-inset-top)+var(--dx-rail-size))]',
-        hoistStatusbar && 'bottom-(--dx-statusbar-size)',
-      ]}
-    >
-      <Surface.Surface role='navigation' data={navigationData} limit={1} />
-    </Main.NavigationSidebar>
-  );
-};

package/src/components/fragments.ts

@@ -1,19 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { mx } from '@dxos/ui-theme';
-
-// TODO(burdon): Move to these as dx-components?
-
-/** @private */
-export const soloInlinePadding =
-  'ps-[calc(env(safe-area-inset-left)+.25rem)] pe-[calc(env(safe-area-inset-right)+.25rem)]';
-
-const sidebarToggleStyles = 'h-(--dx-rail-item) w-(--dx-rail-item) absolute bottom-2 z-[1] !bg-deck-surface lg:hidden';
-
-/** @private */
-export const fixedSidebarToggleStyles = mx(sidebarToggleStyles, 'left-2');
-
-/** @private */
-export const fixedComplementarySidebarToggleStyles = mx(sidebarToggleStyles, 'right-2');

package/src/containers/Banner/Banner.tsx

@@ -1,5 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-export { Banner } from '../../components';

package/src/containers/Banner/index.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Banner } from './Banner';
-
-export default Banner;

package/src/containers/DeckSettings/DeckSettings.tsx

@@ -1,113 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React from 'react';
-
-import { Input, Select, useTranslation } from '@dxos/react-ui';
-import { Settings } from '@dxos/react-ui-form';
-
-import { meta } from '../../meta';
-import {
-  type DeckSettingsProps,
-  type NewPlankPositioning,
-  NewPlankPositions,
-  OverScrollToProps,
-  type Overscroll,
-} from '../../types';
-
-const isSocket = !!(globalThis as any).__args;
-
-export type DeckSettingsComponentProps = {
-  settings: DeckSettingsProps;
-  onSettingsChange: (fn: (current: DeckSettingsProps) => DeckSettingsProps) => void;
-};
-
-export const DeckSettings = ({ settings, onSettingsChange }: DeckSettingsComponentProps) => {
-  const { t } = useTranslation(meta.id);
-
-  return (
-    <Settings.Root>
-      <Settings.Section title={t('settings title', { ns: meta.id })}>
-        <Settings.Group>
-          <Settings.ItemInput title={t('settings enable deck label')}>
-            <Input.Switch
-              checked={settings.enableDeck}
-              onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, enableDeck: checked }))}
-            />
-          </Settings.ItemInput>
-          <Settings.ItemInput title={t('settings encapsulated planks label')}>
-            <Input.Switch
-              checked={settings.encapsulatedPlanks ?? false}
-              onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, encapsulatedPlanks: checked }))}
-            />
-          </Settings.ItemInput>
-          <Settings.ItemInput title={t('select new plank positioning label')}>
-            <Select.Root
-              disabled={!settings.enableDeck}
-              value={settings.newPlankPositioning ?? 'start'}
-              onValueChange={(value) =>
-                onSettingsChange((s) => ({ ...s, newPlankPositioning: value as NewPlankPositioning }))
-              }
-            >
-              <Select.TriggerButton placeholder={t('select new plank positioning placeholder')} />
-              <Select.Portal>
-                <Select.Content>
-                  <Select.Viewport>
-                    {NewPlankPositions.map((position) => (
-                      <Select.Option key={position} value={position}>
-                        {t(`settings new plank position ${position} label`)}
-                      </Select.Option>
-                    ))}
-                  </Select.Viewport>
-                  <Select.Arrow />
-                </Select.Content>
-              </Select.Portal>
-            </Select.Root>
-          </Settings.ItemInput>
-          <Settings.ItemInput title={t('settings overscroll label')}>
-            <Select.Root
-              disabled={!settings.enableDeck}
-              value={settings.overscroll ?? 'none'}
-              onValueChange={(value) => onSettingsChange((s) => ({ ...s, overscroll: value as Overscroll }))}
-            >
-              <Select.TriggerButton placeholder={t('select overscroll placeholder')} />
-              <Select.Portal>
-                <Select.Content>
-                  <Select.Viewport>
-                    {OverScrollToProps.map((option) => (
-                      <Select.Option key={option} value={option}>
-                        {t(`settings overscroll ${option} label`)}
-                      </Select.Option>
-                    ))}
-                  </Select.Viewport>
-                  <Select.Arrow />
-                </Select.Content>
-              </Select.Portal>
-            </Select.Root>
-          </Settings.ItemInput>
-          <Settings.ItemInput title={t('settings enable statusbar label')}>
-            <Input.Switch
-              checked={settings.enableStatusbar}
-              onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, enableStatusbar: checked }))}
-            />
-          </Settings.ItemInput>
-          <Settings.ItemInput title={t('settings show hints label')}>
-            <Input.Switch
-              checked={settings.showHints}
-              onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, showHints: checked }))}
-            />
-          </Settings.ItemInput>
-          {!isSocket && (
-            <Settings.ItemInput title={t('settings native redirect label')}>
-              <Input.Switch
-                checked={settings.enableNativeRedirect}
-                onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, enableNativeRedirect: checked }))}
-              />
-            </Settings.ItemInput>
-          )}
-        </Settings.Group>
-      </Settings.Section>
-    </Settings.Root>
-  );
-};

package/src/containers/DeckSettings/index.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { DeckSettings } from './DeckSettings';
-
-export default DeckSettings;

package/src/hooks/useHoistStatusbar.ts

@@ -1,24 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { useMemo } from 'react';
-
-import { useAtomCapability } from '@dxos/app-framework/ui';
-import { useThemeContext } from '@dxos/react-ui';
-
-import { DeckCapabilities, type LayoutMode } from '../types';
-
-export const useHoistStatusbar = (breakpoint: string, layoutMode?: LayoutMode): boolean => {
-  const { safeAreaPadding } = useThemeContext();
-  const enableStatusbar = useAtomCapability(DeckCapabilities.Settings).enableStatusbar;
-
-  return useMemo(() => {
-    return (
-      breakpoint === 'desktop' &&
-      layoutMode !== 'solo--fullscreen' &&
-      !!enableStatusbar &&
-      safeAreaPadding?.bottom === 0
-    );
-  }, [enableStatusbar, breakpoint, safeAreaPadding?.bottom, layoutMode]);
-};

package/src/types/capabilities.ts

@@ -1,33 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type Atom } from '@effect-atom/atom-react';
-import * as Effect from 'effect/Effect';
-
-import { Capabilities, Capability } 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* Capabilities.getAtomValue(State);
-      const deck = state.decks[state.activeDeck];
-      invariant(deck, `Deck not found: ${state.activeDeck}`);
-      return deck;
-    });
-}

package/src/types/events.ts

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

package/src/util/overscroll.ts

@@ -1,69 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import type { CSSProperties } from 'react';
-
-/**
- * ┌────────────────────────────────────────────────────────────────────────────────────────────────────┐
- * | Overscroll Padding Calculation for Centering Planks on Screen.                                     │
- * ├────────────────────────────────────────────────────────────────────────────────────────────────────┤
- * │ NOTE(Zan): I found the way you calculate the overscroll padding to center a plank on the screen    │
- * │ at the edges of the scroll context a bit confusing, so I've diagrammed it here.                    │
- * │                                                                                                    │
- * │ Multiple Planks:                                                                                   │
- * │ ───────────────                                                                                    │
- * | Use the following overscroll padding calculation centering the boundary planks on the SCREEN.      │
- * │                                                                                                    │
- * │ Left Padding:                           Right Padding:                                             │
- * │ ┌───┬────┬──────────────────┬──────┐    ┌──────┬──────────────────┬────┬───┐                       │
- * │ │   │████│     Ideal        │      │    │      │      Ideal       │████│   │                       │
- * │ │ S │█PL█│     first        │      │    │      │      last        │█PR█│ C │                       │
- * │ │   │████│     plank        │      │    │      │      plank       │████│   │                       │
- * │ └───┴────┴──────────────────┴──────┘    └──────┴──────────────────┴────┴───┘                       │
- * │ <--------- screen width ----------->    <---------- screen width ---------->                       │
- * │                                                                                                    │
- * │ PL = ((screen width - Plank Width) / 2) - S                                                        │
- * │ PR = ((screen width - Plank Width) / 2) - C                                                        │
- * │                                                                                                    │
- * │ S  = Sidebar width                     C  = Complementary sidebar width                            │
- * │ PL = Padding Left                      PR = Padding Right                                          │
- * │                                                                                                    │
- * │ Single Plank:                                                                                      │
- * │ ─────────────                                                                                      │
- * │ For a single plank we use the following overscroll padding calculation to center the plank in      │
- * │ the content area:                                                                                  │
- * │                                                                                                    │
- * │ ┌───┬───────────────────────┬───┬───────────────────────┬───┐                                      │
- * │ │   │███████████████████████│   │███████████████████████│   │                                      │
- * │ │ S │█████ Left Padding ████│ P │████ Right Padding ████│ C │                                      │
- * │ │   │███████████████████████│   │███████████████████████│   │                                      │
- * │ └───┴───────────────────────┴───┴───────────────────────┴───┘                                      │
- * │ <------------------------ screen width --------------------->                                      │
- * │                                                                                                    │
- * │ Left/Right Padding Width = (screen width - S - P - C) / 2                                          │
- * │                                                                                                    │
- * │ S = Sidebar width (may be 0)                                                                       │
- * │ P = Plank width (centered)                                                                         │
- * │ C = Complementary sidebar width (may be 0)                                                         │
- * └────────────────────────────────────────────────────────────────────────────────────────────────────┘
- */
-export const calculateOverscroll = (
-  planksCount: number,
-): Pick<CSSProperties, 'paddingInlineStart' | 'paddingInlineEnd'> | undefined => {
-  if (!planksCount) {
-    return { paddingInlineStart: 0, paddingInlineEnd: 0 };
-  }
-  if (planksCount === 1) {
-    const overscrollPadding =
-      'max(0px, calc(((100dvw - var(--dx-main-sidebar-width) - var(--dx-main-complementary-width) - (var(--dx-main-content-first-width) + 1px)) / 2)))';
-    return { paddingInlineStart: overscrollPadding, paddingInlineEnd: overscrollPadding };
-  } else {
-    return {
-      paddingInlineStart:
-        'max(0px, calc(((100dvw - (var(--dx-main-content-first-width) + 1px)) / 2) - var(--dx-main-sidebar-width)))',
-      paddingInlineEnd:
-        'max(0px, calc(((100dvw - (var(--dx-main-content-last-width) + 1px)) / 2) - var(--dx-main-complementary-width)))',
-    };
-  }
-};