@dxos/plugin-deck 0.8.4-main.c1de068 → 0.8.4-main.c351d160a8

package/src/components/DeckLayout/Fallback.tsx

@@ -5,21 +5,17 @@
 import React from 'react';
 
 import { useTranslation } from '@dxos/react-ui';
-import { errorText, mx } from '@dxos/react-ui-theme';
 
-import { DECK_PLUGIN } from '../../meta';
+import { meta } from '../../meta';
 
 export const Fallback = () => {
-  const { t } = useTranslation(DECK_PLUGIN);
+  const { t } = useTranslation(meta.id);
 
   return (
-    <div role='none' className='min-bs-screen is-full flex items-center justify-center p-8'>
+    <div role='none' className='min-h-screen w-full flex items-center justify-center p-8'>
       <p
         role='alert'
-        className={mx(
-          errorText,
-          'border border-error-400/50 rounded-md flex items-center justify-center p-8 font-normal text-lg',
-        )}
+        className='flex items-center justify-center p-8 font-normal text-lg text-error-text border border-rose-fill rounded-md'
       >
         {t('plugin error message')}
       </p>

package/src/components/DeckLayout/Popover.tsx

@@ -3,12 +3,25 @@
 //
 
 import { createContext } from '@radix-ui/react-context';
-import React, { type PropsWithChildren, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import * as Function from 'effect/Function';
+import * as Option from 'effect/Option';
+import React, { type PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react';
 
-import { Surface, useCapability } from '@dxos/app-framework';
-import { Popover, type PopoverContentInteractOutsideEvent } from '@dxos/react-ui';
+import { Surface } from '@dxos/app-framework/ui';
+import { useObjectMenuItems } from '@dxos/app-toolkit/ui';
+import { Annotation, Obj } from '@dxos/echo';
+import {
+  Card,
+  Popover,
+  type PopoverContentInteractOutsideEvent,
+  toLocalizedString,
+  Toolbar,
+  useTranslation,
+} from '@dxos/react-ui';
+import { Menu } from '@dxos/react-ui-menu';
 
-import { DeckCapabilities } from '../../capabilities';
+import { useDeckState } from '../../hooks';
+import { meta } from '../../meta';
 
 export type DeckPopoverRootProps = PropsWithChildren<{}>;
 
@@ -21,32 +34,32 @@ type DeckPopoverContextValue = {
 const [DeckPopoverProvider, useDeckPopoverContext] = createContext<DeckPopoverContextValue>('DeckPopover');
 
 export const PopoverRoot = ({ children }: DeckPopoverRootProps) => {
-  const layout = useCapability(DeckCapabilities.MutableDeckState);
+  const { state } = useDeckState();
   const virtualRef = useRef<HTMLButtonElement | null>(null);
   const [virtualIter, setVirtualIter] = useState(0);
   const [open, setOpen] = useState(false);
   const debounceRef = useRef<NodeJS.Timeout | null>(null);
 
   // TODO(thure): This is a workaround for the race condition between displaying a Popover and either rendering
-  //  the anchor further down the tree or measuring the virtual trigger’s client rect.
+  //  the anchor further down the tree or measuring the virtual trigger's client rect.
   useEffect(() => {
     setOpen(false);
-    if (layout.popoverOpen) {
+    if (state.popoverOpen) {
       if (debounceRef.current) {
         clearTimeout(debounceRef.current);
       }
-      if (layout.popoverAnchor && virtualRef.current !== layout.popoverAnchor) {
-        virtualRef.current = layout.popoverAnchor ?? null;
+      if (state.popoverAnchor && virtualRef.current !== state.popoverAnchor) {
+        virtualRef.current = state.popoverAnchor ?? null;
         setVirtualIter((iter) => iter + 1);
       }
       debounceRef.current = setTimeout(() => setOpen(true), DEBOUNCE_DELAY);
     }
-  }, [layout.popoverOpen, layout.popoverAnchorId, layout.popoverAnchor, layout.popoverContent]);
+  }, [state.popoverOpen, state.popoverAnchorId, state.popoverAnchor, state.popoverContent]);
 
   return (
     <DeckPopoverProvider setOpen={setOpen}>
       <Popover.Root modal={false} open={open}>
-        {layout.popoverAnchor && <Popover.VirtualTrigger key={virtualIter} virtualRef={virtualRef} />}
+        {state.popoverAnchor && <Popover.VirtualTrigger key={virtualIter} virtualRef={virtualRef} />}
         {children}
       </Popover.Root>
     </DeckPopoverProvider>
@@ -54,10 +67,33 @@ export const PopoverRoot = ({ children }: DeckPopoverRootProps) => {
 };
 
 export const PopoverContent = () => {
-  const layout = useCapability(DeckCapabilities.MutableDeckState);
+  const { t } = useTranslation(meta.id);
+  const { state, updateEphemeral } = useDeckState();
   const { setOpen } = useDeckPopoverContext('PopoverContent');
+  const popoverSubject = state.popoverContent?.subject;
+  const isObjectPopover = Obj.isObject(popoverSubject);
+  const objectMenuItems = useObjectMenuItems(popoverSubject);
+  const icon = isObjectPopover
+    ? Function.pipe(
+        Obj.getSchema(popoverSubject),
+        Option.fromNullable,
+        Option.flatMap(Annotation.IconAnnotation.get),
+        Option.map(({ icon }) => icon),
+        Option.getOrElse(() => 'ph--placeholder--regular'),
+      )
+    : undefined;
+  const handleClose = useCallback(() => {
+    setOpen(false);
+    updateEphemeral((state) => ({
+      ...state,
+      popoverOpen: false,
+      popoverAnchor: undefined,
+      popoverAnchorId: undefined,
+      popoverSide: undefined,
+    }));
+  }, [updateEphemeral]);
 
-  const handleClose = useCallback(
+  const handleInteractOutside = useCallback(
     (event: KeyboardEvent | PopoverContentInteractOutsideEvent) => {
       if (
         // TODO(thure): CodeMirror should not focus itself when it updates.
@@ -66,36 +102,44 @@ export const PopoverContent = () => {
       ) {
         event.preventDefault();
       } else {
-        setOpen(false);
-        layout.popoverOpen = false;
-        layout.popoverAnchor = undefined;
-        layout.popoverAnchorId = undefined;
-        layout.popoverSide = undefined;
+        handleClose();
       }
     },
-    [setOpen],
+    [handleClose],
   );
 
-  const collisionBoundaries: HTMLElement[] = useMemo(() => {
-    const closest = layout.popoverAnchor?.closest('[data-popover-collision-boundary]') as
-      | HTMLElement
-      | null
-      | undefined;
-    return closest ? [closest] : [];
-  }, [layout.popoverAnchor]);
-
   return (
     <Popover.Portal>
       <Popover.Content
-        side={layout.popoverSide}
-        onInteractOutside={handleClose}
-        onEscapeKeyDown={handleClose}
-        collisionBoundary={collisionBoundaries}
+        side={state.popoverSide}
         sticky='always'
         hideWhenDetached
+        onInteractOutside={handleInteractOutside}
+        onEscapeKeyDown={handleInteractOutside}
       >
         <Popover.Viewport>
-          <Surface role='card--popover' data={layout.popoverContent} limit={1} />
+          {/* TODO(burdon): Set/disable column context. */}
+          {state.popoverKind === 'base' && <Surface.Surface role='popover' data={state.popoverContent} limit={1} />}
+          {state.popoverKind === 'card' && (
+            <Menu.Root>
+              <Card.Root border={false} classNames='dx-card-popover'>
+                <Card.Toolbar>
+                  {icon ? <Card.Icon icon={icon} /> : <Card.IconBlock />}
+                  {state.popoverTitle ? <Card.Title>{toLocalizedString(state.popoverTitle, t)}</Card.Title> : <span />}
+                  <Menu.Trigger asChild disabled={!objectMenuItems.length}>
+                    <Toolbar.IconButton
+                      iconOnly
+                      variant='ghost'
+                      icon='ph--dots-three-vertical--regular'
+                      label='Actions'
+                    />
+                  </Menu.Trigger>
+                  <Menu.Content items={objectMenuItems} />
+                </Card.Toolbar>
+                <Surface.Surface role='card--content' data={state.popoverContent} limit={1} />
+              </Card.Root>
+            </Menu.Root>
+          )}
         </Popover.Viewport>
         <Popover.Arrow />
       </Popover.Content>

package/src/components/DeckLayout/StatusBar.tsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 
-import { Surface } from '@dxos/app-framework';
+import { Surface } from '@dxos/app-framework/ui';
 import { useLandmarkMover } from '@dxos/react-ui';
 
 export const StatusBar = ({ showHints }: { showHints?: boolean }) => {
@@ -12,11 +12,11 @@ export const StatusBar = ({ showHints }: { showHints?: boolean }) => {
   return (
     <div
       role='contentinfo'
-      className='fixed block-end-0 inset-inline-0 bs-[--statusbar-size] border-bs border-separator z-[2] flex text-description'
+      className='fixed bottom-0 inset-x-0 h-(--dx-statusbar-size) border-y border-separator z-[2] flex text-description'
       {...mover}
     >
-      {showHints && <Surface role='hints' limit={1} />}
-      <Surface role='status-bar' limit={1} />
+      {showHints && <Surface.Surface role='hints' limit={1} />}
+      <Surface.Surface role='status-bar' limit={1} />
     </div>
   );
 };

package/src/components/DeckLayout/Toast.tsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 
-import { type LayoutAction } from '@dxos/app-framework';
+import { type LayoutOperation } from '@dxos/app-toolkit';
 import {
   Button,
   Icon,
@@ -14,7 +14,7 @@ import {
   useTranslation,
 } from '@dxos/react-ui';
 
-import { DECK_PLUGIN } from '../../meta';
+import { meta } from '../../meta';
 
 // TODO(wittjosiah): Render remaining duration as a progress bar within the toast.
 export const Toast = ({
@@ -28,14 +28,14 @@ export const Toast = ({
   closeLabel,
   onAction,
   onOpenChange,
-}: LayoutAction.Toast & Pick<ToastRootProps, 'onOpenChange'>) => {
-  const { t } = useTranslation(DECK_PLUGIN);
+}: LayoutOperation.Toast & Pick<ToastRootProps, 'onOpenChange'>) => {
+  const { t } = useTranslation(meta.id);
 
   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' />}
+          {icon && <Icon icon={icon} classNames='inline mr-1' />}
           {title && <span>{toLocalizedString(title, t)}</span>}
         </NaturalToast.Title>
         {description && (
@@ -59,3 +59,28 @@ export const Toast = ({
     </NaturalToast.Root>
   );
 };
+
+export type ToasterProps = {
+  toasts?: LayoutOperation.Toast[];
+  onDismissToast?: (id: string) => void;
+};
+
+export const Toaster = ({ toasts, onDismissToast }: ToasterProps) => {
+  return (
+    <>
+      {toasts?.map((toast) => (
+        <Toast
+          {...toast}
+          key={toast.id}
+          onOpenChange={(open: boolean) => {
+            if (!open) {
+              onDismissToast?.(toast.id);
+            }
+
+            return open;
+          }}
+        />
+      ))}
+    </>
+  );
+};

package/src/components/Plank/Plank.stories.tsx

@@ -2,24 +2,33 @@
 // Copyright 2025 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type StoryObj, type Meta } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { IntentPlugin, SettingsPlugin } from '@dxos/app-framework';
+import { Capability, Plugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { AttentionPlugin } from '@dxos/plugin-attention';
-import { GraphPlugin } from '@dxos/plugin-graph';
+import { AppActivationEvents } from '@dxos/app-toolkit';
+import { corePlugins } from '@dxos/plugin-testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { Stack } from '@dxos/react-ui-stack';
-import { withTheme, withLayout } from '@dxos/storybook-utils';
 
-import { Plank, type PlankProps } from './Plank';
-import { DeckStateFactory } from '../../capabilities';
+import { DeckState } from '../../capabilities';
+import { meta as pluginMeta } from '../../meta';
 import { translations } from '../../translations';
 
-const meta: Meta<PlankProps> = {
-  title: 'plugins/plugin-deck/Plank',
+import { Plank } from './Plank';
+
+const TestPlugin = Plugin.define(pluginMeta).pipe(
+  Plugin.addModule({
+    id: Capability.getModuleTag(DeckState),
+    activatesOn: AppActivationEvents.AppGraphReady,
+    activate: () => DeckState(),
+  }),
+  Plugin.make,
+);
+
+const meta = {
+  title: 'plugins/plugin-deck/components/Plank',
   component: Plank,
   render: (args) => {
     return (
@@ -29,21 +38,21 @@ const meta: Meta<PlankProps> = {
     );
   },
   decorators: [
+    withTheme(),
+    withLayout({ layout: 'fullscreen' }),
     withPluginManager({
-      plugins: [AttentionPlugin(), SettingsPlugin(), IntentPlugin(), GraphPlugin()],
-      capabilities: () => DeckStateFactory(),
+      plugins: [...corePlugins(), TestPlugin()],
     }),
-    withTheme,
-    withLayout({ fullscreen: true }),
   ],
   parameters: {
+    layout: 'fullscreen',
     translations,
   },
-};
+} satisfies Meta<typeof Plank>;
 
 export default meta;
 
-type Story = StoryObj<PlankProps>;
+type Story = StoryObj<typeof meta>;
 
 // TODO(burdon): Need to define surface provider?
 export const Default: Story = {