@dxos/plugin-deck 0.7.4 → 0.7.5-labs.5f04cf6

package/src/components/DeckLayout/Sidebar.tsx

@@ -4,39 +4,35 @@
 
 import React, { useMemo } from 'react';
 
-import { type LayoutParts, openIds, Surface } from '@dxos/app-framework';
+import { Surface } from '@dxos/app-framework';
 import { Main } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
 
+import { Banner } from './Banner';
+import { useBreakpoints } from '../../util';
+import { useHoistStatusbar } from '../../util/useHoistStatusbar';
 import { useLayout } from '../LayoutContext';
 
-export type SidebarProps = {
-  layoutParts: LayoutParts;
-};
-
-export const Sidebar = ({ layoutParts }: SidebarProps) => {
-  const { layoutMode, popoverAnchorId } = useLayout();
+export const Sidebar = () => {
+  const layoutContext = useLayout();
+  const { popoverAnchorId } = layoutContext;
+  const breakpoint = useBreakpoints();
+  const hoistStatusbar = useHoistStatusbar(breakpoint);
 
-  // TODO(wittjosiah): The activeIds should be path-based to avoid conflicts.
-  const activeIds = useMemo(() => {
-    if (layoutMode === 'solo') {
-      return Array.from(new Set<string>(layoutParts?.solo?.map((e) => e.id) ?? []));
-    } else if (layoutMode === 'deck') {
-      return Array.from(new Set<string>(layoutParts?.main?.map((e) => e.id) ?? []));
-    }
+  const navigationData = useMemo(() => ({ popoverAnchorId }), [popoverAnchorId]);
 
-    return Array.from(new Set<string>(openIds(layoutParts)));
-  }, [layoutParts, layoutMode]);
-
-  const navigationData = useMemo(
-    () => ({
-      popoverAnchorId,
-      activeIds,
-    }),
-    [popoverAnchorId, activeIds],
-  );
   return (
-    <Main.NavigationSidebar>
-      <Surface role='navigation' data={{ ...navigationData }} limit={1} />
+    <Main.NavigationSidebar classNames='grid grid-cols-1 grid-rows-[var(--rail-size)_var(--rail-action)_1fr_min-content_min-content] md:grid-rows-[var(--rail-size)_var(--rail-action)_1fr_min-content] lg:grid-rows-[1fr_min-content] overflow-hidden lg:block-start-[calc(env(safe-area-inset-top)+var(--rail-size))]'>
+      {breakpoint !== 'desktop' && (
+        <>
+          <Banner variant='sidebar' />
+          <Surface role='search-input' limit={1} />
+        </>
+      )}
+      <div role='none' className={mx('!overflow-y-auto', breakpoint !== 'desktop' && 'border-be border-separator')}>
+        <Surface role='navigation' data={navigationData} limit={1} />
+      </div>
+      {!hoistStatusbar && <Surface role='status-bar--sidebar-footer' limit={1} />}
     </Main.NavigationSidebar>
   );
 };

package/src/components/DeckLayout/SidebarButton.tsx

@@ -0,0 +1,74 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { IconButton, useTranslation } from '@dxos/react-ui';
+
+import { DECK_PLUGIN } from '../../meta';
+import { useLayout } from '../LayoutContext';
+
+export const ToggleSidebarButton = () => {
+  const layoutContext = useLayout();
+  const { t } = useTranslation(DECK_PLUGIN);
+  return (
+    <IconButton
+      variant='ghost'
+      iconOnly
+      icon='ph--sidebar--regular'
+      size={4}
+      label={t('open navigation sidebar label')}
+      onClick={() => (layoutContext.sidebarOpen = !layoutContext.sidebarOpen)}
+      classNames='!pli-2 order-first'
+    />
+  );
+};
+
+export const CloseSidebarButton = () => {
+  const layoutContext = useLayout();
+  const { t } = useTranslation(DECK_PLUGIN);
+  return (
+    <IconButton
+      variant='ghost'
+      iconOnly
+      icon='ph--caret-line-left--regular'
+      size={4}
+      label={t('close navigation sidebar label')}
+      onClick={() => (layoutContext.sidebarOpen = false)}
+      classNames='!rounded-none !pli-1 ch-focus-ring-inset pie-[max(.5rem,env(safe-area-inset-left))]'
+    />
+  );
+};
+
+export const ToggleComplementarySidebarButton = () => {
+  const layoutContext = useLayout();
+  const { t } = useTranslation(DECK_PLUGIN);
+  return (
+    <IconButton
+      iconOnly
+      onClick={() => (layoutContext.complementarySidebarOpen = !layoutContext.complementarySidebarOpen)}
+      variant='ghost'
+      label={t('open complementary sidebar label')}
+      classNames='!pli-2 !plb-3 [&>svg]:-scale-x-100'
+      icon='ph--sidebar-simple--regular'
+      size={4}
+    />
+  );
+};
+
+export const CloseComplementarySidebarButton = () => {
+  const layoutContext = useLayout();
+  const { t } = useTranslation(DECK_PLUGIN);
+  return (
+    <IconButton
+      iconOnly
+      variant='ghost'
+      size={4}
+      icon='ph--caret-line-right--regular'
+      label={t('close complementary sidebar label')}
+      classNames='!rounded-none border-is border-separator ch-focus-ring-inset pie-2 lg:pie-[max(.5rem,env(safe-area-inset-right))]'
+      onClick={() => (layoutContext.complementarySidebarOpen = false)}
+    />
+  );
+};

package/src/components/DeckLayout/StatusBar.tsx

@@ -13,10 +13,10 @@ export const StatusBar = ({ showHints }: { showHints?: boolean }) => {
   const sizeAttrs = useMainSize();
   return (
     <div
-      role='none'
+      role='contentinfo'
       {...sizeAttrs}
       className={mx(
-        'fixed flex justify-between block-end-0 inset-inline-0 items-center border-bs border-separator z-[2]',
+        'fixed block-end-0 inset-inline-0 flex justify-between items-center border-bs border-separator z-[2] pbe-[env(safe-area-inset-bottom)]',
         mainPadding,
         mainPaddingTransitions,
       )}

package/src/components/DeckLayout/Toast.tsx

@@ -5,7 +5,16 @@
 import React from 'react';
 
 import type { Toast as ToastProps } from '@dxos/app-framework';
-import { Button, Icon, Toast as NaturalToast, type ToastRootProps } from '@dxos/react-ui';
+import {
+  Button,
+  Icon,
+  Toast as NaturalToast,
+  toLocalizedString,
+  useTranslation,
+  type ToastRootProps,
+} from '@dxos/react-ui';
+
+import { DECK_PLUGIN } from '../../meta';
 
 // TODO(wittjosiah): Render remaining duration as a progress bar within the toast.
 export const Toast = ({
@@ -20,26 +29,30 @@ export const Toast = ({
   onAction,
   onOpenChange,
 }: ToastProps & Pick<ToastRootProps, 'onOpenChange'>) => {
+  const { t } = useTranslation(DECK_PLUGIN);
+
   return (
     <NaturalToast.Root data-testid={id} defaultOpen duration={duration} onOpenChange={onOpenChange}>
       <NaturalToast.Body>
         <NaturalToast.Title classNames='items-center'>
           {icon && <Icon icon={icon} size={5} classNames='inline mr-1' />}
-          <span>{title}</span>
+          {title && <span>{toLocalizedString(title, t)}</span>}
         </NaturalToast.Title>
-        {description && <NaturalToast.Description>{description}</NaturalToast.Description>}
+        {description && (
+          <NaturalToast.Description>{description && toLocalizedString(description, t)}</NaturalToast.Description>
+        )}
       </NaturalToast.Body>
       <NaturalToast.Actions>
         {onAction && actionAlt && actionLabel && (
-          <NaturalToast.Action altText={actionAlt} asChild>
+          <NaturalToast.Action altText={toLocalizedString(actionAlt, t)} asChild>
             <Button data-testid='toast.action' variant='primary' onClick={() => onAction?.()}>
-              {actionLabel}
+              {toLocalizedString(actionLabel, t)}
             </Button>
           </NaturalToast.Action>
         )}
         {closeLabel && (
           <NaturalToast.Close asChild>
-            <Button data-testid='toast.close'>{closeLabel}</Button>
+            <Button data-testid='toast.close'>{toLocalizedString(closeLabel, t)}</Button>
           </NaturalToast.Close>
         )}
       </NaturalToast.Actions>

package/src/components/DeckLayout/Topbar.tsx

@@ -0,0 +1,11 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { Banner } from './Banner';
+
+export const Topbar = () => {
+  return <Banner variant='topbar' />;
+};

package/src/components/fragments.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export const soloInlinePadding =
+  'pis-[calc(env(safe-area-inset-left)+.25rem)] pie-[calc(env(safe-area-inset-left)+.25rem)]';

package/src/events.ts

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

package/src/index.ts

@@ -2,8 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { DeckPlugin } from './DeckPlugin';
-
-export default DeckPlugin;
-
+export { DeckCapabilities } from './capabilities';
+export { DeckEvents } from './events';
 export * from './DeckPlugin';
+export * from './meta';

package/src/meta.ts

@@ -4,9 +4,9 @@
 
 import { type PluginMeta } from '@dxos/app-framework';
 
-export const DECK_PLUGIN = 'dxos.org/plugin/deck';
+export const DECK_PLUGIN = 'dxos.org/plugin/deck' as const;
 
-export default {
+export const meta = {
   id: DECK_PLUGIN,
   name: 'Deck',
 } satisfies PluginMeta;

package/src/translations.ts

@@ -10,7 +10,9 @@ export default [
       [DECK_PLUGIN]: {
         'main header label': 'Main header',
         'open navigation sidebar label': 'Open navigation sidebar',
+        'close navigation sidebar label': 'Minimize navigation sidebar',
         'open complementary sidebar label': 'Open sidebar',
+        'close complementary sidebar label': 'Minimize sidebar',
         'plugin error message': 'Content failed to render.',
         'content fallback message': 'Unsupported',
         'content fallback description':
@@ -48,6 +50,9 @@ export default [
         'settings overscroll centering label': 'Centering',
         'settings overscroll none label': 'None',
         'settings flat deck': 'Flatten deck appearance',
+        'close current label': 'Close current plank',
+        'close others label': 'Close other planks',
+        'close all label': 'Close all planks',
       },
     },
   },

package/src/types.ts

@@ -2,18 +2,11 @@
 // Copyright 2023 DXOS.org
 //
 
-import type {
-  Plugin,
-  GraphBuilderProvides,
-  IntentResolverProvides,
-  LayoutProvides,
-  LocationProvides,
-  SettingsProvides,
-  SurfaceProvides,
-  TranslationsProvides,
-} from '@dxos/app-framework';
+import { S } from '@dxos/echo-schema';
 import { type Label } from '@dxos/react-ui';
 
+import { DECK_PLUGIN } from './meta';
+
 // TODO(Zan): In the future we should consider adding new planks adjacent to the attended plank.
 export const NewPlankPositions = ['start', 'end'] as const;
 export type NewPlankPositioning = (typeof NewPlankPositions)[number];
@@ -24,30 +17,27 @@ export type Overscroll = (typeof OverscrollOptions)[number];
 // TODO(wittjosiah): Include a predicate for whether the panel is visible for the current subject.
 export type Panel = { id: string; label: Label; icon: string };
 
-// TODO(wittjosiah): Is this generic enough to be in the app framework?
-export type PanelProvides = {
-  complementary: {
-    panels: Panel[];
-  };
-};
-
-export const parsePanelPlugin = (plugin?: Plugin) =>
-  Array.isArray((plugin?.provides as any).complementary?.panels) ? (plugin as Plugin<PanelProvides>) : undefined;
-
-export type DeckSettingsProps = {
-  showHints: boolean;
-  customSlots: boolean;
-  flatDeck: boolean;
-  enableNativeRedirect: boolean;
-  disableDeck: boolean;
-  newPlankPositioning: NewPlankPositioning;
-  overscroll: Overscroll;
-};
-
-export type DeckPluginProvides = SurfaceProvides &
-  IntentResolverProvides &
-  GraphBuilderProvides &
-  TranslationsProvides &
-  SettingsProvides<DeckSettingsProps> &
-  LayoutProvides &
-  LocationProvides;
+export const DeckSettingsSchema = S.mutable(
+  S.Struct({
+    showHints: S.Boolean,
+    customSlots: S.Boolean,
+    flatDeck: S.Boolean,
+    enableNativeRedirect: S.Boolean,
+    newPlankPositioning: S.Literal(...NewPlankPositions),
+    overscroll: S.Literal(...OverscrollOptions),
+  }),
+);
+
+export type DeckSettingsProps = S.Schema.Type<typeof DeckSettingsSchema>;
+
+export const DECK_ACTION = `${DECK_PLUGIN}/action`;
+
+export namespace DeckAction {
+  export class UpdatePlankSize extends S.TaggedClass<UpdatePlankSize>()(`${DECK_ACTION}/update-plank-size`, {
+    input: S.Struct({
+      id: S.String,
+      size: S.Number,
+    }),
+    output: S.Void,
+  }) {}
+}

package/src/util/index.ts

@@ -2,6 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './check-app-scheme';
 export * from './layout-parts';
 export * from './overscroll';
+export * from './useBreakpoints';

package/src/util/useBreakpoints.ts

@@ -0,0 +1,11 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useMediaQuery } from '@dxos/react-ui';
+
+export const useBreakpoints = () => {
+  const [isNotMobile] = useMediaQuery('md');
+  const [isDesktop] = useMediaQuery('lg');
+  return isDesktop ? 'desktop' : isNotMobile ? 'tablet' : 'mobile';
+};

package/src/util/useHoistStatusbar.ts

@@ -0,0 +1,15 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useLayoutEffect, useState } from 'react';
+
+export const useHoistStatusbar = (breakpoint: string) => {
+  const [safeAreaBottom, setSafeAreaBottom] = useState(Infinity);
+  useLayoutEffect(
+    () =>
+      setSafeAreaBottom(parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--safe-area-bottom'))),
+    [],
+  );
+  return Number.isFinite(safeAreaBottom) && safeAreaBottom < 1 && breakpoint === 'desktop';
+};

package/dist/lib/browser/chunk-GVOGPULO.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/meta.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type PluginMeta } from '@dxos/app-framework';\n\nexport const DECK_PLUGIN = 'dxos.org/plugin/deck';\n\nexport default {\n  id: DECK_PLUGIN,\n  name: 'Deck',\n} satisfies PluginMeta;\n"],
-  "mappings": ";AAMO,IAAMA,cAAc;AAE3B,IAAA,eAAe;EACbC,IAAID;EACJE,MAAM;AACR;",
-  "names": ["DECK_PLUGIN", "id", "name"]
-}

package/dist/lib/browser/chunk-NIRHDTX4.mjs

@@ -1,17 +0,0 @@
-// packages/plugins/plugin-deck/src/types.ts
-var NewPlankPositions = [
-  "start",
-  "end"
-];
-var OverscrollOptions = [
-  "none",
-  "centering"
-];
-var parsePanelPlugin = (plugin) => Array.isArray(plugin?.provides.complementary?.panels) ? plugin : void 0;
-
-export {
-  NewPlankPositions,
-  OverscrollOptions,
-  parsePanelPlugin
-};
-//# sourceMappingURL=chunk-NIRHDTX4.mjs.map

package/dist/lib/browser/chunk-NIRHDTX4.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/types.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport type {\n  Plugin,\n  GraphBuilderProvides,\n  IntentResolverProvides,\n  LayoutProvides,\n  LocationProvides,\n  SettingsProvides,\n  SurfaceProvides,\n  TranslationsProvides,\n} from '@dxos/app-framework';\nimport { type Label } from '@dxos/react-ui';\n\n// TODO(Zan): In the future we should consider adding new planks adjacent to the attended plank.\nexport const NewPlankPositions = ['start', 'end'] as const;\nexport type NewPlankPositioning = (typeof NewPlankPositions)[number];\n\nexport const OverscrollOptions = ['none', 'centering'] as const;\nexport type Overscroll = (typeof OverscrollOptions)[number];\n\n// TODO(wittjosiah): Include a predicate for whether the panel is visible for the current subject.\nexport type Panel = { id: string; label: Label; icon: string };\n\n// TODO(wittjosiah): Is this generic enough to be in the app framework?\nexport type PanelProvides = {\n  complementary: {\n    panels: Panel[];\n  };\n};\n\nexport const parsePanelPlugin = (plugin?: Plugin) =>\n  Array.isArray((plugin?.provides as any).complementary?.panels) ? (plugin as Plugin<PanelProvides>) : undefined;\n\nexport type DeckSettingsProps = {\n  showHints: boolean;\n  customSlots: boolean;\n  flatDeck: boolean;\n  enableNativeRedirect: boolean;\n  disableDeck: boolean;\n  newPlankPositioning: NewPlankPositioning;\n  overscroll: Overscroll;\n};\n\nexport type DeckPluginProvides = SurfaceProvides &\n  IntentResolverProvides &\n  GraphBuilderProvides &\n  TranslationsProvides &\n  SettingsProvides<DeckSettingsProps> &\n  LayoutProvides &\n  LocationProvides;\n"],
-  "mappings": ";AAiBO,IAAMA,oBAAoB;EAAC;EAAS;;AAGpC,IAAMC,oBAAoB;EAAC;EAAQ;;AAanC,IAAMC,mBAAmB,CAACC,WAC/BC,MAAMC,QAASF,QAAQG,SAAiBC,eAAeC,MAAAA,IAAWL,SAAmCM;",
-  "names": ["NewPlankPositions", "OverscrollOptions", "parsePanelPlugin", "plugin", "Array", "isArray", "provides", "complementary", "panels", "undefined"]
-}

package/dist/lib/browser/meta.mjs

@@ -1,9 +0,0 @@
-import {
-  DECK_PLUGIN,
-  meta_default
-} from "./chunk-GVOGPULO.mjs";
-export {
-  DECK_PLUGIN,
-  meta_default as default
-};
-//# sourceMappingURL=meta.mjs.map

package/dist/lib/browser/meta.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": [],
-  "sourcesContent": [],
-  "mappings": "",
-  "names": []
-}

package/dist/types/src/util/check-app-scheme.d.ts

@@ -1,2 +0,0 @@
-export declare const checkAppScheme: (url: string) => void;
-//# sourceMappingURL=check-app-scheme.d.ts.map

package/dist/types/src/util/check-app-scheme.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"check-app-scheme.d.ts","sourceRoot":"","sources":["../../../../src/util/check-app-scheme.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,cAAc,QAAS,MAAM,SAezC,CAAC"}