@dxos/plugin-deck 0.8.4-main.406dc2a → 0.8.4-main.4668b7de9b

package/src/components/Sidebar/SidebarButton.tsx

@@ -1,87 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { useCallback } from 'react';
-
-import { LayoutAction, createIntent, useCapability, useIntentDispatcher } from '@dxos/app-framework';
-import { IconButton, type IconButtonProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';
-
-import { DeckCapabilities } from '../../capabilities';
-import { getCompanionId, useDeckCompanions } from '../../hooks';
-import { meta } from '../../meta';
-
-export const ToggleSidebarButton = ({
-  classNames,
-  variant = 'ghost',
-}: ThemedClassName<Pick<IconButtonProps, 'variant'>>) => {
-  const layoutContext = useCapability(DeckCapabilities.MutableDeckState);
-  const { t } = useTranslation(meta.id);
-  return (
-    <IconButton
-      variant={variant}
-      iconOnly
-      icon='ph--sidebar--regular'
-      size={4}
-      label={t('open navigation sidebar label')}
-      onClick={() =>
-        (layoutContext.sidebarState = layoutContext.sidebarState === 'expanded' ? 'collapsed' : 'expanded')
-      }
-      classNames={classNames}
-    />
-  );
-};
-
-export const CloseSidebarButton = () => {
-  const layoutContext = useCapability(DeckCapabilities.MutableDeckState);
-  const { t } = useTranslation(meta.id);
-  return (
-    <IconButton
-      variant='ghost'
-      iconOnly
-      icon='ph--caret-line-left--regular'
-      size={4}
-      label={t('close navigation sidebar label')}
-      onClick={() => (layoutContext.sidebarState = 'collapsed')}
-      classNames='rounded-none pli-1 dx-focus-ring-inset pie-[max(.5rem,env(safe-area-inset-left))]'
-    />
-  );
-};
-
-export const ToggleComplementarySidebarButton = ({
-  inR0,
-  classNames,
-  current,
-}: ThemedClassName<{ inR0?: boolean; current?: string }>) => {
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const layoutContext = useCapability(DeckCapabilities.MutableDeckState);
-  const { t } = useTranslation(meta.id);
-
-  const companions = useDeckCompanions();
-  const handleClick = useCallback(async () => {
-    layoutContext.complementarySidebarState =
-      layoutContext.complementarySidebarState === 'expanded' ? 'collapsed' : 'expanded';
-    const firstCompanion = companions[0];
-    if (layoutContext.complementarySidebarState === 'expanded' && !current && firstCompanion) {
-      await dispatch(
-        createIntent(LayoutAction.UpdateComplementary, {
-          part: 'complementary',
-          subject: getCompanionId(firstCompanion.id),
-        }),
-      );
-    }
-  }, [layoutContext, current, companions, dispatch]);
-
-  return (
-    <IconButton
-      iconOnly
-      onClick={handleClick}
-      variant='ghost'
-      label={t('open complementary sidebar label')}
-      classNames={['[&>svg]:-scale-x-100', classNames]}
-      icon='ph--sidebar-simple--regular'
-      size={inR0 ? 5 : 4}
-      tooltipSide={inR0 ? 'left' : undefined}
-    />
-  );
-};

package/src/components/fragments.ts

@@ -1,14 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { mx } from '@dxos/react-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');

package/src/events.ts

@@ -1,11 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Events } from '@dxos/app-framework';
-
-import { meta } from './meta';
-
-export namespace DeckEvents {
-  export const StateReady = Events.createStateEvent(`${meta.id}/state-ready`);
-}

package/src/hooks/useHoistStatusbar.ts

@@ -1,26 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { useMemo } from 'react';
-
-import { Capabilities, useCapability } from '@dxos/app-framework';
-import { useThemeContext } from '@dxos/react-ui';
-
-import { meta } from '../meta';
-import type { DeckSettingsProps, LayoutMode } from '../types';
-
-export const useHoistStatusbar = (breakpoint: string, layoutMode?: LayoutMode): boolean => {
-  const { safeAreaPadding } = useThemeContext();
-  const enableStatusbar = useCapability(Capabilities.SettingsStore).getStore<DeckSettingsProps>(meta.id)?.value
-    .enableStatusbar;
-
-  return useMemo(() => {
-    return (
-      breakpoint === 'desktop' &&
-      layoutMode !== 'solo--fullscreen' &&
-      !!enableStatusbar &&
-      safeAreaPadding?.bottom === 0
-    );
-  }, [enableStatusbar, breakpoint, safeAreaPadding?.bottom, layoutMode]);
-};

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-sidebarWidth) - var(--dx-main-complementaryWidth) - (var(--dx-main-contentFirstWidth) + 1px)) / 2)))';
-    return { paddingInlineStart: overscrollPadding, paddingInlineEnd: overscrollPadding };
-  } else {
-    return {
-      paddingInlineStart:
-        'max(0px, calc(((100dvw - (var(--dx-main-contentFirstWidth) + 1px)) / 2) - var(--dx-main-sidebarWidth)))',
-      paddingInlineEnd:
-        'max(0px, calc(((100dvw - (var(--dx-main-contentLastWidth) + 1px)) / 2) - var(--dx-main-complementaryWidth)))',
-    };
-  }
-};