@dxos/react-ui-stack 0.6.14-staging.e15392e → 0.7.0

package/src/components/StackItem.tsx

@@ -0,0 +1,173 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import {
+  attachClosestEdge,
+  type Edge,
+  extractClosestEdge,
+} from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
+import { useFocusableGroup } from '@fluentui/react-tabster';
+import { composeRefs } from '@radix-ui/react-compose-refs';
+import React, { forwardRef, useLayoutEffect, useState, type ComponentPropsWithRef, useCallback } from 'react';
+
+import { type ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+import { useStack, StackItemContext } from './StackContext';
+import { StackItemContent, type StackItemContentProps } from './StackItemContent';
+import {
+  StackItemHeading,
+  StackItemHeadingLabel,
+  type StackItemHeadingProps,
+  type StackItemHeadingLabelProps,
+} from './StackItemHeading';
+import { StackItemResizeHandle } from './StackItemResizeHandle';
+import {
+  StackItemSigil,
+  type StackItemSigilProps,
+  type StackItemSigilAction,
+  type StackItemSigilButtonProps,
+  StackItemSigilButton,
+} from './StackItemSigil';
+
+export type StackItemSize = number | 'min-content';
+export const DEFAULT_HORIZONTAL_SIZE = 44 satisfies StackItemSize;
+export const DEFAULT_VERTICAL_SIZE = 'min-content' satisfies StackItemSize;
+export const DEFAULT_EXTRINSIC_SIZE = DEFAULT_HORIZONTAL_SIZE satisfies StackItemSize;
+
+export type StackItemData = { id: string; type: 'column' | 'card' };
+
+export type StackItemRootProps = ThemedClassName<ComponentPropsWithRef<'div'>> & {
+  item: Omit<StackItemData, 'type'>;
+  order?: number;
+  onRearrange?: (source: StackItemData, target: StackItemData, closestEdge: Edge | null) => void;
+  size?: StackItemSize;
+  onSizeChange?: (nextSize: StackItemSize) => void;
+  role?: 'article' | 'section';
+};
+
+const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
+  (
+    { item, children, classNames, onRearrange, size: propsSize, onSizeChange, role, order, style, ...props },
+    forwardedRef,
+  ) => {
+    const [itemElement, itemRef] = useState<HTMLDivElement | null>(null);
+    const [selfDragHandleElement, selfDragHandleRef] = useState<HTMLDivElement | null>(null);
+    const [closestEdge, setEdge] = useState<Edge | null>(null);
+    const { orientation, rail, separators } = useStack();
+    const [size = orientation === 'horizontal' ? DEFAULT_HORIZONTAL_SIZE : DEFAULT_VERTICAL_SIZE, setInternalSize] =
+      useState(propsSize);
+
+    const Root = role ?? 'div';
+
+    const composedItemRef = composeRefs<HTMLDivElement>(itemRef, forwardedRef);
+
+    const setSize = useCallback(
+      (nextSize: StackItemSize, commit?: boolean) => {
+        setInternalSize(nextSize);
+        if (commit) {
+          onSizeChange?.(nextSize);
+        }
+      },
+      [onSizeChange],
+    );
+
+    const type = orientation === 'horizontal' ? 'column' : 'card';
+
+    useLayoutEffect(() => {
+      if (!itemElement || !onRearrange) {
+        return;
+      }
+      return combine(
+        draggable({
+          element: itemElement,
+          ...(selfDragHandleElement && { dragHandle: selfDragHandleElement }),
+          getInitialData: () => ({ id: item.id, type }),
+        }),
+        dropTargetForElements({
+          element: itemElement,
+          getData: ({ input, element }) => {
+            return attachClosestEdge(
+              { id: item.id, type },
+              { input, element, allowedEdges: orientation === 'horizontal' ? ['left', 'right'] : ['top', 'bottom'] },
+            );
+          },
+          onDragEnter: ({ self, source }) => {
+            if (source.data.type === self.data.type) {
+              setEdge(extractClosestEdge(self.data));
+            }
+          },
+          onDrag: ({ self, source }) => {
+            if (source.data.type === self.data.type) {
+              setEdge(extractClosestEdge(self.data));
+            }
+          },
+          onDragLeave: () => setEdge(null),
+          onDrop: ({ self, source }) => {
+            setEdge(null);
+            if (source.data.type === self.data.type) {
+              onRearrange(source.data as StackItemData, self.data as StackItemData, extractClosestEdge(self.data));
+            }
+          },
+        }),
+      );
+    }, [orientation, item, onRearrange, selfDragHandleElement, itemElement]);
+
+    const focusGroupAttrs = useFocusableGroup({ tabBehavior: 'limited' });
+
+    return (
+      <StackItemContext.Provider value={{ selfDragHandleRef, size, setSize }}>
+        <Root
+          {...props}
+          tabIndex={0}
+          {...focusGroupAttrs}
+          className={mx(
+            'group/stack-item grid relative ch-focus-ring-inset-over-all',
+            size === 'min-content' && (orientation === 'horizontal' ? 'is-min' : 'bs-min'),
+            orientation === 'horizontal' ? 'grid-rows-subgrid' : 'grid-cols-subgrid',
+            rail && (orientation === 'horizontal' ? 'row-span-2' : 'col-span-2'),
+            separators && (orientation === 'horizontal' ? 'divide-separator divide-y' : 'divide-separator divide-x'),
+            classNames,
+          )}
+          data-dx-stack-item
+          style={{
+            ...(size !== 'min-content' && {
+              [orientation === 'horizontal' ? 'inlineSize' : 'blockSize']: `${size}rem`,
+            }),
+            ...(Number.isFinite(order) && {
+              [orientation === 'horizontal' ? 'gridColumn' : 'gridRow']: `${order}`,
+            }),
+            ...style,
+          }}
+          ref={composedItemRef}
+        >
+          {children}
+          {closestEdge && <DropIndicator edge={closestEdge} />}
+        </Root>
+      </StackItemContext.Provider>
+    );
+  },
+);
+
+export const StackItem = {
+  Root: StackItemRoot,
+  Content: StackItemContent,
+  Heading: StackItemHeading,
+  HeadingLabel: StackItemHeadingLabel,
+  ResizeHandle: StackItemResizeHandle,
+  Sigil: StackItemSigil,
+  SigilButton: StackItemSigilButton,
+};
+
+export type {
+  StackItemContentProps,
+  StackItemHeadingProps,
+  StackItemHeadingLabelProps,
+  StackItemSigilProps,
+  StackItemSigilButtonProps,
+  StackItemSigilAction,
+};

package/src/components/StackItemContent.tsx

@@ -0,0 +1,49 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { type ComponentPropsWithoutRef } from 'react';
+
+import { type ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+import { useStack } from './StackContext';
+
+export type StackItemContentProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & {
+  toolbar?: boolean;
+  statusbar?: boolean;
+  contentSize?: 'cover' | 'intrinsic';
+};
+
+export const StackItemContent = ({
+  children,
+  toolbar = true,
+  statusbar,
+  contentSize = 'cover',
+  classNames,
+  ...props
+}: StackItemContentProps) => {
+  const { size, separators } = useStack();
+
+  return (
+    <div
+      role='none'
+      {...props}
+      className={mx(
+        'group grid grid-cols-[100%]',
+        size === 'contain' && 'min-bs-0 overflow-hidden',
+        separators && 'divide-separator divide-y',
+        classNames,
+      )}
+      style={{
+        gridTemplateRows: [
+          ...(toolbar ? ['var(--rail-action)'] : []),
+          '1fr',
+          ...(statusbar ? ['var(--statusbar-size)'] : []),
+        ].join(' '),
+      }}
+    >
+      {children}
+    </div>
+  );
+};

package/src/components/StackItemHeading.tsx

@@ -0,0 +1,55 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { useFocusableGroup } from '@fluentui/react-tabster';
+import React, { type ComponentPropsWithoutRef, type ComponentPropsWithRef, forwardRef } from 'react';
+
+import { type ThemedClassName } from '@dxos/react-ui';
+import { useAttention, type AttendableId, type Related } from '@dxos/react-ui-attention';
+import { mx } from '@dxos/react-ui-theme';
+
+import { useStack, useStackItem } from './StackContext';
+
+export type StackItemHeadingProps = ThemedClassName<ComponentPropsWithoutRef<'div'>>;
+
+export const StackItemHeading = ({ children, classNames, ...props }: StackItemHeadingProps) => {
+  const { orientation } = useStack();
+  const { selfDragHandleRef } = useStackItem();
+  const focusableGroupAttrs = useFocusableGroup({ tabBehavior: 'limited' });
+  return (
+    <div
+      role='heading'
+      {...props}
+      tabIndex={0}
+      {...focusableGroupAttrs}
+      className={mx(
+        'flex items-center ch-focus-ring-inset-over-all relative !border-is-0',
+        orientation === 'horizontal' ? 'bs-[--rail-size]' : 'is-[--rail-size] flex-col',
+        classNames,
+      )}
+      ref={selfDragHandleRef}
+    >
+      {children}
+    </div>
+  );
+};
+
+export type StackItemHeadingLabelProps = ThemedClassName<ComponentPropsWithRef<'h1'>> & AttendableId & Related;
+
+export const StackItemHeadingLabel = forwardRef<HTMLHeadingElement, StackItemHeadingLabelProps>(
+  ({ attendableId, related, classNames, ...props }, forwardedRef) => {
+    const { hasAttention, isAncestor, isRelated } = useAttention(attendableId);
+    return (
+      <h1
+        {...props}
+        data-attention={((related && isRelated) || hasAttention || isAncestor).toString()}
+        className={mx(
+          'pli-1 min-is-0 is-0 grow truncate font-medium text-baseText data-[attention=true]:text-accentText',
+          classNames,
+        )}
+        ref={forwardedRef}
+      />
+    );
+  },
+);

package/src/components/StackItemResizeHandle.tsx

@@ -0,0 +1,115 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';
+import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
+import { type DragLocationHistory } from '@atlaskit/pragmatic-drag-and-drop/types';
+import React, { useLayoutEffect, useRef } from 'react';
+
+import { mx } from '@dxos/react-ui-theme';
+
+import { useStack, useStackItem } from './StackContext';
+import { DEFAULT_EXTRINSIC_SIZE, type StackItemSize } from './StackItem';
+
+const REM = parseFloat(getComputedStyle(document.documentElement).fontSize);
+
+const MIN_SIZE = 20;
+
+const measureStackItem = (element: HTMLButtonElement): { width: number; height: number } => {
+  const stackItemElement = element.closest('[data-dx-stack-item]');
+  return stackItemElement?.getBoundingClientRect() ?? { width: DEFAULT_EXTRINSIC_SIZE, height: DEFAULT_EXTRINSIC_SIZE };
+};
+
+const getNextSize = (startSize: number, location: DragLocationHistory, client: 'clientX' | 'clientY') => {
+  return Math.max(MIN_SIZE, startSize + (location.current.input[client] - location.initial.input[client]) / REM);
+};
+
+export const StackItemResizeHandle = () => {
+  const { orientation } = useStack();
+  const { setSize, size } = useStackItem();
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const dragStartSize = useRef<StackItemSize>(size);
+  const client = orientation === 'horizontal' ? 'clientX' : 'clientY';
+
+  useLayoutEffect(
+    () => {
+      if (!buttonRef.current || buttonRef.current.hasAttribute('draggable')) {
+        return;
+      }
+      // TODO(thure): This should handle StackItem state vs local state better.
+      draggable({
+        element: buttonRef.current,
+        onGenerateDragPreview: ({ nativeSetDragImage }) => {
+          // we will be moving the line to indicate a drag
+          // we can disable the native drag preview
+          disableNativeDragPreview({ nativeSetDragImage });
+          // we don't want any native drop animation for when the user
+          // does not drop on a drop target. we want the drag to finish immediately
+          preventUnhandled.start();
+        },
+        onDragStart: () => {
+          dragStartSize.current =
+            dragStartSize.current === 'min-content'
+              ? measureStackItem(buttonRef.current!)[orientation === 'horizontal' ? 'width' : 'height'] / REM
+              : dragStartSize.current;
+        },
+        onDrag: ({ location }) => {
+          if (typeof dragStartSize.current !== 'number') {
+            return;
+          }
+          setSize(getNextSize(dragStartSize.current, location, client));
+        },
+        onDrop: ({ location }) => {
+          if (typeof dragStartSize.current !== 'number') {
+            return;
+          }
+          const nextSize = getNextSize(dragStartSize.current, location, client);
+          setSize(nextSize, true);
+          dragStartSize.current = nextSize;
+        },
+      });
+    },
+    [
+      // Note that `size` should not be a dependency here since dragging this adjusts the size.
+    ],
+  );
+
+  return (
+    <button
+      ref={buttonRef}
+      className={mx(
+        orientation === 'horizontal' ? 'cursor-col-resize' : 'cursor-row-resize',
+        'group absolute is-3 bs-full inline-end-[-1px] !border-lb-0',
+        'before:transition-opacity before:duration-100 before:ease-in-out before:opacity-0 hover:before:opacity-100 focus-visible:before:opacity-100 active:before:opacity-100',
+        'before:absolute before:block before:inset-block-0 before:inline-end-0 before:is-1 before:bg-accentFocusIndicator',
+      )}
+    >
+      <div
+        role='none'
+        className='absolute block-start-0 inline-end-[1px] bs-[--rail-size] flex items-center group-hover:opacity-0 group-focus-visible:opacity-0 group-active:opacity-0'
+      >
+        <DragHandleSignifier />
+      </div>
+    </button>
+  );
+};
+
+const DragHandleSignifier = () => {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 256 256'
+      fill='currentColor'
+      className='shrink-0 bs-[1em] is-[1em] text-unAccent'
+    >
+      {/* two pips: <path d='M256,120c-8.8,0-16-7.2-16-16v-56c0-8.8,7.2-16,16-16v88Z' />
+      <path d='M256,232c-8.8,0-16-7.2-16-16v-56c0-8.8,7.2-16,16-16v88Z' /> */}
+      <path d='M256,64c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />
+      <path d='M256,120c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />
+      <path d='M256,176c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />
+      <path d='M256,232c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />
+    </svg>
+  );
+};

package/src/components/StackItemSigil.tsx

@@ -0,0 +1,170 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { Fragment, type PropsWithChildren, forwardRef, useRef, useState } from 'react';
+
+import { type ActionLike } from '@dxos/app-graph';
+import { keySymbols } from '@dxos/keyboard';
+import {
+  Button,
+  type ButtonProps,
+  DropdownMenu,
+  Icon,
+  toLocalizedString,
+  Tooltip,
+  useTranslation,
+} from '@dxos/react-ui';
+import { type AttendableId, type Related, useAttention } from '@dxos/react-ui-attention';
+import { descriptionText, mx } from '@dxos/react-ui-theme';
+import { getHostPlatform } from '@dxos/util';
+
+import { MenuSignifierHorizontal } from './MenuSignifier';
+import { translationKey } from '../translations';
+
+export type KeyBinding = {
+  windows?: string;
+  macos?: string;
+  ios?: string;
+  linux?: string;
+  unknown?: string;
+};
+
+export type StackItemSigilAction = Pick<ActionLike, 'id' | 'properties' | 'data'>;
+
+export type StackItemSigilButtonProps = Omit<ButtonProps, 'variant'> & AttendableId & Related;
+
+export const StackItemSigilButton = forwardRef<HTMLButtonElement, StackItemSigilButtonProps>(
+  ({ attendableId, classNames, related, children, ...props }, forwardedRef) => {
+    const { hasAttention, isAncestor, isRelated } = useAttention(attendableId);
+    const variant = (related && isRelated) || hasAttention || isAncestor ? 'primary' : 'ghost';
+    return (
+      <Button
+        {...props}
+        variant={variant}
+        classNames={['m-1 shrink-0 pli-0 min-bs-0 is-[--rail-action] bs-[--rail-action] relative', classNames]}
+        ref={forwardedRef}
+      >
+        <MenuSignifierHorizontal />
+        {children}
+      </Button>
+    );
+  },
+);
+
+export type StackItemSigilProps = PropsWithChildren<
+  {
+    attendableId?: string;
+    triggerLabel: string;
+    actions?: StackItemSigilAction[][];
+    icon: string;
+    onAction?: (action: StackItemSigilAction) => void;
+  } & Related
+>;
+
+export const StackItemSigil = forwardRef<HTMLButtonElement, StackItemSigilProps>(
+  ({ actions: actionGroups, onAction, triggerLabel, attendableId, icon, related, children }, forwardedRef) => {
+    const { t } = useTranslation(translationKey);
+    const suppressNextTooltip = useRef(false);
+
+    const [optionsMenuOpen, setOptionsMenuOpen] = useState(false);
+    const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);
+
+    return (
+      <Tooltip.Root
+        open={triggerTooltipOpen}
+        onOpenChange={(nextOpen) => {
+          if (suppressNextTooltip.current) {
+            setTriggerTooltipOpen(false);
+            suppressNextTooltip.current = false;
+          } else {
+            setTriggerTooltipOpen(nextOpen);
+          }
+        }}
+      >
+        <DropdownMenu.Root
+          {...{
+            open: optionsMenuOpen,
+            onOpenChange: (nextOpen: boolean) => {
+              if (!nextOpen) {
+                suppressNextTooltip.current = true;
+              }
+              return setOptionsMenuOpen(nextOpen);
+            },
+          }}
+        >
+          <Tooltip.Trigger asChild>
+            <DropdownMenu.Trigger asChild ref={forwardedRef}>
+              <StackItemSigilButton attendableId={attendableId} related={related}>
+                <span className='sr-only'>{triggerLabel}</span>
+                <Icon icon={icon} size={5} />
+              </StackItemSigilButton>
+            </DropdownMenu.Trigger>
+          </Tooltip.Trigger>
+          <DropdownMenu.Portal>
+            <DropdownMenu.Content classNames='z-[31]'>
+              <DropdownMenu.Viewport>
+                {actionGroups?.map((actions, index) => {
+                  const separator = index > 0 ? <DropdownMenu.Separator /> : null;
+                  return (
+                    <Fragment key={index}>
+                      {separator}
+                      {actions.map((action) => {
+                        const shortcut =
+                          typeof action.properties.keyBinding === 'string'
+                            ? action.properties.keyBinding
+                            : action.properties.keyBinding?.[getHostPlatform()];
+
+                        const menuItemType = action.properties.menuItemType;
+                        const Root = menuItemType === 'toggle' ? DropdownMenu.CheckboxItem : DropdownMenu.Item;
+
+                        return (
+                          <Root
+                            key={action.id}
+                            onClick={(event) => {
+                              if (action.properties.disabled) {
+                                return;
+                              }
+                              event.stopPropagation();
+                              // TODO(thure): Why does Dialog’s modal-ness cause issues if we don’t explicitly close the menu here?
+                              suppressNextTooltip.current = true;
+                              setOptionsMenuOpen(false);
+                              onAction?.(action);
+                            }}
+                            classNames='gap-2'
+                            disabled={action.properties.disabled}
+                            checked={menuItemType === 'toggle' ? action.properties.isChecked : undefined}
+                            {...(action.properties?.testId && { 'data-testid': action.properties.testId })}
+                          >
+                            <Icon icon={action.properties.icon ?? 'ph--placeholder--regular'} size={4} />
+                            <span className='grow truncate'>{toLocalizedString(action.properties.label ?? '', t)}</span>
+                            {menuItemType === 'toggle' && (
+                              <DropdownMenu.ItemIndicator asChild>
+                                <Icon icon='ph--check--regular' size={4} />
+                              </DropdownMenu.ItemIndicator>
+                            )}
+                            {shortcut && (
+                              <span className={mx('shrink-0', descriptionText)}>{keySymbols(shortcut).join('')}</span>
+                            )}
+                          </Root>
+                        );
+                      })}
+                    </Fragment>
+                  );
+                })}
+                {children}
+              </DropdownMenu.Viewport>
+              <DropdownMenu.Arrow />
+            </DropdownMenu.Content>
+          </DropdownMenu.Portal>
+        </DropdownMenu.Root>
+        <Tooltip.Portal>
+          <Tooltip.Content style={{ zIndex: 70 }} side='bottom'>
+            {triggerLabel}
+            <Tooltip.Arrow />
+          </Tooltip.Content>
+        </Tooltip.Portal>
+      </Tooltip.Root>
+    );
+  },
+);

package/src/components/index.ts

@@ -1,6 +1,7 @@
 //
-// Copyright 2022 DXOS.org
+// Copyright 2024 DXOS.org
 //
 
 export * from './Stack';
-export { SectionToolbar, type SectionToolbarProps, sectionToolbarLayout, type StackSectionItem } from './Section';
+export * from './StackItem';
+export * from './LayoutControls';

package/src/playwright/smoke.spec.ts

@@ -11,7 +11,8 @@ import { StackManager } from '../testing';
 // TODO(wittjosiah): Factor out.
 const storybookUrl = (storyId: string) => `http://localhost:9009/iframe.html?id=${storyId}&viewMode=story`;
 
-test.describe('Stack', () => {
+// TODO(wittjosiah): Update for new stack.
+test.describe.skip('Stack', () => {
   test('remove', async ({ browser }) => {
     const { page } = await setupPage(browser, { url: storybookUrl('ui-react-ui-stack-stack--transfer') });
     await page.getByTestId('stack-transfer').waitFor({ state: 'visible' });
@@ -70,13 +71,12 @@ test.describe('Stack', () => {
     const stack2 = new StackManager(page.getByTestId('stack-2'));
 
     await expect(stack1.sections()).toHaveCount(8);
-    await expect(stack2.empty()).toBeVisible();
+    await expect(stack2.sections()).toHaveCount(0);
 
     const sectionText = await stack1.section(0).locator.innerText();
     await stack1.section(0).dragTo(stack2.locator.getByTestId('stack.empty'));
 
     await expect(stack1.sections()).toHaveCount(8);
-    await expect(stack2.empty()).not.toBeVisible();
     await expect(stack2.sections()).toHaveCount(1);
     expect(await stack2.section(0).locator.innerText()).toEqual(sectionText);
 

package/src/testing/EditorContent.tsx

@@ -19,9 +19,9 @@ import {
 } from '@dxos/react-ui-editor';
 import { focusRing, mx, textBlockWidth } from '@dxos/react-ui-theme';
 
-import type { StackSectionContent } from '../components/Section';
+import { StackItem, type StackItemContentProps } from '../components';
 
-export const EditorContent = ({ data: { content = '' } }: { data: StackSectionContent & { content?: string } }) => {
+export const EditorContent = ({ data: { content = '' } }: { data: StackItemContentProps & { content?: string } }) => {
   const { themeMode } = useThemeContext();
   const [text] = useState(create(Expando, { content }));
   const id = text.id;
@@ -44,7 +44,7 @@ export const EditorContent = ({ data: { content = '' } }: { data: StackSectionCo
   const handleAction = useActionHandler(view);
 
   return (
-    <div role='none' className='flex flex-col'>
+    <StackItem.Content contentSize='intrinsic'>
       <div {...focusAttributes} className={mx(textBlockWidth, focusRing, 'rounded-sm order-last')} ref={parentRef} />
       <Toolbar.Root
         onAction={handleAction}
@@ -54,6 +54,6 @@ export const EditorContent = ({ data: { content = '' } }: { data: StackSectionCo
         <Toolbar.Markdown />
         <Toolbar.Separator />
       </Toolbar.Root>
-    </div>
+    </StackItem.Content>
   );
 };

package/src/testing/stack-manager.ts

@@ -11,20 +11,16 @@ export class StackManager {
     this._page = locator.page();
   }
 
-  empty() {
-    return this.locator.getByTestId('stack.empty');
-  }
-
   sections() {
-    return this.locator.locator('li');
+    return this.locator.locator('section');
   }
 
   order() {
-    return this.locator.locator('li').evaluateAll((els) => els.map((el) => el.getAttribute('id')));
+    return this.locator.locator('section').evaluateAll((els) => els.map((el) => el.getAttribute('id')));
   }
 
   section(index: number) {
-    return new SectionManager(this.locator.locator('li').nth(index));
+    return new SectionManager(this.locator.locator('section').nth(index));
   }
 }
 

package/src/translations.ts

@@ -8,14 +8,14 @@ export default [
   {
     'en-US': {
       [translationKey]: {
-        'empty stack message': 'Drag items into the stack.',
-        'remove section label': 'Delete',
-        'navigate to section label': 'Navigate to item',
-        'untitled section title': 'Untitled section',
-        'add section before label': 'Add before',
-        'add section after label': 'Add after',
-        'expand label': 'Expand',
-        'collapse label': 'Collapse',
+        'resize label': 'Drag to resize',
+        'pin start label': 'Pin to the left sidebar',
+        'pin end label': 'Pin to the right sidebar',
+        'increment start label': 'Move to the left',
+        'increment end label': 'Move to the right',
+        'solo plank label': 'Toggle solo mode',
+        'close label': 'Close',
+        'minify label': 'Minify',
       },
     },
   },