@dxos/react-ui-stack 0.6.10-main.e92b5eb → 0.6.10-staging.7621a6e

package/dist/lib/browser/index.mjs

@@ -83,7 +83,7 @@ var Section = /* @__PURE__ */ forwardRef(({ id, title, icon: Icon = DotsNine, si
     }
   });
   const sectionContentGroup = useFocusableGroup({});
-  const attendableProps = createAttendableAttributes(id);
+  const attendableAttrs = createAttendableAttributes(id);
   const attended = useHasAttention(id);
   return /* @__PURE__ */ React2.createElement(CollapsiblePrimitive.Root, {
     asChild: true,
@@ -92,7 +92,7 @@ var Section = /* @__PURE__ */ forwardRef(({ id, title, icon: Icon = DotsNine, si
   }, /* @__PURE__ */ React2.createElement(ListItem.Root, {
     ref: forwardedRef,
     id,
-    ...attendableProps,
+    ...attendableAttrs,
     classNames: [
       "grid col-span-2 group/section",
       active === "overlay" ? stackColumns : "grid-cols-subgrid snap-start"

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/Stack.tsx", "../../../src/components/Section.tsx", "../../../src/components/CaretDownUp.tsx", "../../../src/components/style-fragments.ts", "../../../src/translations.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { useArrowNavigationGroup, useFocusableGroup } from '@fluentui/react-tabster';\nimport React, { forwardRef, useCallback } from 'react';\nimport { useResizeDetector } from 'react-resize-detector';\n\nimport { List, useTranslation } from '@dxos/react-ui';\nimport {\n  type MosaicContainerProps,\n  type MosaicTileComponent,\n  Mosaic,\n  Path,\n  useContainer,\n  useItemsWithPreview,\n  useMosaic,\n} from '@dxos/react-ui-mosaic';\nimport { dropRingInner } from '@dxos/react-ui-theme';\n\nimport {\n  type CollapsedSections,\n  type AddSectionPosition,\n  SectionTile,\n  type StackContextValue,\n  type StackItem,\n  type StackSectionContent,\n  type StackSectionItem,\n} from './Section';\nimport { stackColumns } from './style-fragments';\nimport { translationKey } from '../translations';\n\nexport type Direction = 'horizontal' | 'vertical';\n\nexport type { CollapsedSections, AddSectionPosition };\n\nexport const DEFAULT_TYPE = 'stack-section';\n\nexport type StackProps<TData extends StackSectionContent = StackSectionContent> = Omit<\n  MosaicContainerProps<TData, number>,\n  'debug' | 'Component'\n> &\n  Omit<StackContextValue<TData>, 'setCollapsedSections'> & {\n    items?: StackSectionItem[];\n    separation?: boolean; // TODO(burdon): Style.\n    onCollapseSection?: (id: string, collapsed: boolean) => void;\n    emptyComponent?: React.ReactNode;\n  };\n\nexport const Stack = ({\n  id,\n  type = DEFAULT_TYPE,\n  SectionContent,\n  items = [],\n  separation = true,\n  transform,\n  onOver,\n  onDrop,\n  onAddSection,\n  onDeleteSection,\n  onNavigateToSection,\n  onCollapseSection,\n  ...props\n}: StackProps) => {\n  const { ref: containerRef, width = 0 } = useResizeDetector<HTMLDivElement>({ refreshRate: 200 });\n  const { operation, overItem } = useMosaic();\n  const itemsWithPreview = useItemsWithPreview({ path: id, items });\n\n  const getOverlayStyle = useCallback(() => ({ width }), [width]);\n  const getOverlayProps = useCallback(\n    () => ({ itemContext: { transform, SectionContent } }),\n    [transform, SectionContent],\n  );\n\n  // TODO(thure): The root cause of the discrepancy between `activeNodeRect.top` and `overlayNodeRect.top` in Composer\n  //  in particular is not yet known, so this solution may may backfire in unforeseeable cases.\n  const stackModifier = useCallback<Exclude<MosaicContainerProps['modifier'], undefined>>(\n    (_activeItem, { transform, activeNodeRect, overlayNodeRect }) => {\n      if (activeNodeRect && overlayNodeRect) {\n        transform.y += activeNodeRect?.top - overlayNodeRect?.top;\n      }\n      return transform;\n    },\n    [],\n  );\n\n  return (\n    <Mosaic.Container\n      {...{\n        id,\n        type,\n        Component: SectionTile as MosaicTileComponent<StackSectionItem, HTMLDivElement>,\n        getOverlayStyle,\n        getOverlayProps,\n        onOver,\n        onDrop,\n        modifier: stackModifier,\n      }}\n    >\n      <Mosaic.DroppableTile\n        path={id}\n        type={type}\n        item={{ id, items: itemsWithPreview }}\n        // TODO(wittjosiah): Should this actually be a context?\n        itemContext={{\n          separation,\n          transform,\n          onDeleteSection,\n          onNavigateToSection,\n          onAddSection,\n          onCollapseSection,\n          SectionContent,\n        }}\n        isOver={\n          overItem &&\n          !!overItem.path &&\n          Path.hasRoot(overItem.path, id) &&\n          (operation === 'copy' || operation === 'transfer')\n        }\n        Component={StackTile}\n        {...props}\n        ref={containerRef}\n      />\n    </Mosaic.Container>\n  );\n};\n\nconst StackTile: MosaicTileComponent<StackItem, HTMLOListElement, Pick<StackProps, 'emptyComponent'>> = forwardRef(\n  ({ classNames, path, isOver, item: { items }, itemContext, type: _type, emptyComponent, ...props }, forwardedRef) => {\n    const { t } = useTranslation(translationKey);\n    const { Component, type } = useContainer();\n    const domAttributes = useArrowNavigationGroup({ axis: 'grid' });\n    const { activeItem } = useMosaic();\n\n    // NOTE(thure): Ensure “groupper” is available, but no need to use it here.\n    const _group = useFocusableGroup();\n\n    // NOTE: Keep outer padding the same as MarkdownMain.\n    return (\n      <List\n        ref={forwardedRef}\n        classNames={['grid relative', stackColumns, isOver && dropRingInner, classNames]}\n        {...(!activeItem && domAttributes)}\n        {...props}\n      >\n        {items.length > 0 ? (\n          <Mosaic.SortableContext items={items} direction='vertical'>\n            {items.map((item, index) => (\n              <Mosaic.SortableTile\n                key={item.id}\n                item={item}\n                itemContext={itemContext}\n                path={path}\n                type={type}\n                position={index}\n                Component={Component}\n              />\n            ))}\n          </Mosaic.SortableContext>\n        ) : emptyComponent !== undefined ? (\n          <>{emptyComponent}</>\n        ) : (\n          <p\n            className='grid col-span-2 text-center p-4 border border-dashed border-neutral-500/50 rounded'\n            data-testid='stack.empty'\n          >\n            {t('empty stack message')}\n          </p>\n        )}\n      </List>\n    );\n  },\n);\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { useFocusableGroup, useTabsterAttributes } from '@fluentui/react-tabster';\nimport {\n  ArrowLineDown,\n  ArrowLineUp,\n  ArrowSquareOut,\n  CaretUpDown,\n  DotsNine,\n  type IconProps,\n  Trash,\n} from '@phosphor-icons/react';\nimport * as CollapsiblePrimitive from '@radix-ui/react-collapsible';\nimport React, {\n  forwardRef,\n  useState,\n  type ForwardRefExoticComponent,\n  type RefAttributes,\n  type FC,\n  type PropsWithChildren,\n  type ComponentPropsWithRef,\n} from 'react';\n\nimport {\n  Button,\n  DropdownMenu,\n  type Label,\n  List,\n  ListItem,\n  ScrollArea,\n  type ThemedClassName,\n  Toolbar,\n  toLocalizedString,\n  useTranslation,\n} from '@dxos/react-ui';\nimport { createAttendableAttributes, useHasAttention } from '@dxos/react-ui-attention';\nimport { DropDownMenuDragHandleTrigger, resizeHandle, resizeHandleHorizontal } from '@dxos/react-ui-deck';\nimport {\n  type MosaicActiveType,\n  type MosaicDataItem,\n  type MosaicTileComponent,\n  type MosaicTileProps,\n  useMosaic,\n} from '@dxos/react-ui-mosaic';\nimport {\n  focusRing,\n  getSize,\n  hoverableControlItem,\n  hoverableControls,\n  hoverableFocusedWithinControls,\n  mx,\n} from '@dxos/react-ui-theme';\n\nimport { CaretDownUp } from './CaretDownUp';\nimport { stackColumns } from './style-fragments';\nimport { translationKey } from '../translations';\n\nconst sectionActionDimensions = 'p-1 shrink-0 min-bs-0 is-[--rail-action] bs-min';\n\nexport type StackSectionContent = MosaicDataItem;\n\nexport type CollapsedSections = Record<string, boolean>;\n\nexport type AddSectionPosition = 'before' | 'after' | 'beforeAll' | 'afterAll';\n\nexport type StackContextValue<TData extends StackSectionContent = StackSectionContent> = {\n  SectionContent: FC<{ data: TData }>;\n  separation?: boolean;\n  isResizable?: boolean;\n  transform?: (item: MosaicDataItem, type?: string) => StackSectionItem;\n  onDeleteSection?: (path: string) => void;\n  onAddSection?: (path: string, position: AddSectionPosition) => void;\n  onNavigateToSection?: (object: MosaicDataItem) => void;\n  onCollapseSection?: (id: string, collapsed: boolean) => void;\n};\n\nexport type StackItem = MosaicDataItem & {\n  items: StackSectionItem[];\n};\n\nexport type StackSectionItem = MosaicDataItem & {\n  object: StackSectionContent;\n  // TODO(wittjosiah): Use effect schema? Share schema with echo.\n  view?: {\n    title?: string;\n    size?: SectionSize;\n    height?: number;\n    collapsed?: boolean;\n    custom?: Record<string, any>;\n  };\n  // TODO(wittjosiah): Common type? Factor out?\n  metadata?: {\n    icon?: FC<IconProps>;\n    placeholder?: Label;\n    viewActions?: (item: StackSectionItem) => StackAction;\n  };\n};\n\nexport type StackAction = {\n  icon: FC<IconProps>;\n  label: Label;\n  onClick: () => void;\n};\n\nexport type SectionSize = 'intrinsic' | 'extrinsic';\n\nexport type SectionProps = PropsWithChildren<\n  {\n    // Data props.\n    id: string;\n    title: string;\n\n    // Tile props.\n    active?: MosaicActiveType;\n  } & Pick<\n    MosaicTileProps,\n    'draggableProps' | 'draggableStyle' | 'onDelete' | 'onNavigate' | 'onAddAfter' | 'onAddBefore'\n  > &\n    Pick<StackContextValue, 'separation' | 'isResizable' | 'onCollapseSection'> &\n    Pick<Required<StackSectionItem>['view'], 'collapsed' | 'size'> &\n    Pick<Required<StackSectionItem>['metadata'], 'icon'>\n>;\n\nconst resizeHandleStyles = mx(resizeHandle, resizeHandleHorizontal, 'is-full bs-[--rail-action] col-start-2');\n\nexport const Section: ForwardRefExoticComponent<SectionProps & RefAttributes<HTMLLIElement>> = forwardRef<\n  HTMLLIElement,\n  SectionProps\n>(\n  (\n    {\n      id,\n      title,\n      icon: Icon = DotsNine,\n      size = 'intrinsic',\n      collapsed,\n      active,\n      isResizable,\n      draggableProps,\n      draggableStyle,\n      onDelete,\n      onNavigate,\n      onAddBefore,\n      onAddAfter,\n      onCollapseSection,\n      children,\n    },\n    forwardedRef,\n  ) => {\n    const { t } = useTranslation(translationKey);\n    const [optionsMenuOpen, setOptionsMenuOpen] = useState(false);\n    const sectionActionsToolbar = useTabsterAttributes({\n      groupper: {},\n      focusable: {},\n      mover: { cyclic: true, direction: 1, memorizeCurrent: false },\n    });\n    const sectionContentGroup = useFocusableGroup({});\n    const attendableProps = createAttendableAttributes(id);\n    const attended = useHasAttention(id);\n\n    return (\n      <CollapsiblePrimitive.Root\n        asChild\n        open={!collapsed}\n        onOpenChange={(nextOpen) => onCollapseSection?.(id, !nextOpen)}\n      >\n        <ListItem.Root\n          ref={forwardedRef}\n          id={id}\n          {...attendableProps}\n          classNames={[\n            'grid col-span-2 group/section',\n            active === 'overlay' ? stackColumns : 'grid-cols-subgrid snap-start',\n          ]}\n          style={draggableStyle}\n        >\n          <div\n            role='none'\n            className={mx(\n              'grid col-span-2 grid-cols-subgrid',\n              'bg-base focus-within:border-separator focus-within:bg-attention',\n              hoverableControls,\n              hoverableFocusedWithinControls,\n              (active || attended) && 'bg-attention border-separator',\n              (active === 'origin' || active === 'rearrange' || active === 'destination') && 'opacity-0',\n            )}\n          >\n            <div\n              role='toolbar'\n              aria-orientation='vertical'\n              aria-label={t('section controls label')}\n              {...(!active && { tabIndex: 0 })}\n              {...(!active && sectionActionsToolbar)}\n              className={mx(\n                'grid grid-cols-subgrid ch-focus-ring rounded-sm grid-rows-[min-content_min-content_1fr] m-1',\n                'group-has-[[role=toolbar][aria-orientation=horizontal]]/section:pbs-[--rail-action]',\n              )}\n            >\n              <div role='none' className='sticky -block-start-px bg-[--sticky-bg]'>\n                <DropdownMenu.Root\n                  {...{\n                    open: optionsMenuOpen,\n                    onOpenChange: setOptionsMenuOpen,\n                  }}\n                >\n                  <DropDownMenuDragHandleTrigger active={!!active} variant='ghost' classNames='m-0' {...draggableProps}>\n                    <Icon className={mx(getSize(5), 'transition-opacity')} />\n                  </DropDownMenuDragHandleTrigger>\n                  <DropdownMenu.Portal>\n                    <DropdownMenu.Content>\n                      <DropdownMenu.Viewport>\n                        {collapsed ? (\n                          <DropdownMenu.Item onClick={onNavigate} data-testid='section.navigate-to'>\n                            <ArrowSquareOut className={mx(getSize(5), 'mr-2')} />\n                            <span className='grow'>{t('navigate to section label')}</span>\n                          </DropdownMenu.Item>\n                        ) : (\n                          <CollapsiblePrimitive.Trigger asChild>\n                            <DropdownMenu.Item>\n                              <CaretDownUp className={mx(getSize(5), 'mr-2')} />\n                              <span className='grow'>{t('collapse label')}</span>\n                            </DropdownMenu.Item>\n                          </CollapsiblePrimitive.Trigger>\n                        )}\n                        <DropdownMenu.Item onClick={onAddBefore} data-testid='section.add-before'>\n                          <ArrowLineUp className={mx(getSize(5), 'mr-2')} />\n                          <span className='grow'>{t('add section before label')}</span>\n                        </DropdownMenu.Item>\n                        <DropdownMenu.Item onClick={onAddAfter} data-testid='section.add-after'>\n                          <ArrowLineDown className={mx(getSize(5), 'mr-2')} />\n                          <span className='grow'>{t('add section after label')}</span>\n                        </DropdownMenu.Item>\n                        <DropdownMenu.Item onClick={() => onDelete?.()} data-testid='section.remove'>\n                          <Trash className={mx(getSize(5), 'mr-2')} />\n                          <span className='grow'>{t('remove section label')}</span>\n                        </DropdownMenu.Item>\n                      </DropdownMenu.Viewport>\n                      <DropdownMenu.Arrow />\n                    </DropdownMenu.Content>\n                  </DropdownMenu.Portal>\n                </DropdownMenu.Root>\n                {collapsed ? (\n                  <CollapsiblePrimitive.Trigger asChild>\n                    <Button variant='ghost' classNames={sectionActionDimensions}>\n                      <span className='sr-only'>{t('expand label')}</span>\n                      <CaretUpDown className={getSize(4)} />\n                    </Button>\n                  </CollapsiblePrimitive.Trigger>\n                ) : (\n                  <Button\n                    variant='ghost'\n                    classNames={sectionActionDimensions}\n                    onClick={onNavigate}\n                    data-testid='section.navigate-to'\n                  >\n                    <ArrowSquareOut className={mx(getSize(4))} />\n                    <span className='sr-only'>{t('navigate to section label')}</span>\n                  </Button>\n                )}\n              </div>\n            </div>\n\n            {/* Main content */}\n\n            <ListItem.Heading\n              classNames={collapsed ? ['grid grid-rows-subgrid grid-cols-subgrid items-center', focusRing] : 'sr-only'}\n              {...(collapsed && { ...sectionContentGroup, tabIndex: 0 })}\n            >\n              {/*\n                TODO(thure): This needs to be made extensible; Markdown document titles especially are difficult.\n                  Using `Surface` in a UI package like this would be unprecedented and needs motivation.\n                  Refactoring to use subcomponents is complicated by sections being a sortable Mosaic Tile.\n                  Reevaluate when work on collections (Folders, Stacks, etc) settles.\n              */}\n              <span className='truncate'>{title}</span>\n            </ListItem.Heading>\n            {size === 'intrinsic' ? (\n              <CollapsiblePrimitive.Content\n                {...(!collapsed && {\n                  ...sectionContentGroup,\n                  tabIndex: 0,\n                })}\n                // TODO(burdon): Add margin to fragment?\n                className={mx(focusRing, 'm-[2px]')}\n              >\n                {children}\n              </CollapsiblePrimitive.Content>\n            ) : (\n              <CollapsiblePrimitive.Content asChild>\n                <ScrollArea.Root\n                  type='always'\n                  {...(!collapsed && { ...sectionContentGroup, tabIndex: 0 })}\n                  classNames={mx(focusRing, 'is-full has-[[data-radix-scroll-area-viewport]]:pbe-4')}\n                >\n                  <ScrollArea.Viewport>{children}</ScrollArea.Viewport>\n                  <ScrollArea.Scrollbar\n                    orientation='horizontal'\n                    variant='coarse'\n                    classNames='hidden has-[div]:flex !inline-end-[max(.25rem,var(--radix-scroll-area-corner-width))]'\n                  >\n                    <ScrollArea.Thumb />\n                  </ScrollArea.Scrollbar>\n                  <ScrollArea.Scrollbar orientation='vertical' variant='coarse' classNames='hidden has-[div]:flex'>\n                    <ScrollArea.Thumb />\n                  </ScrollArea.Scrollbar>\n                  <ScrollArea.Corner />\n                </ScrollArea.Root>\n              </CollapsiblePrimitive.Content>\n            )}\n          </div>\n          {isResizable && !collapsed && (\n            <button className={resizeHandleStyles}>\n              <span className='sr-only'>{t('resize section label')}</span>\n            </button>\n          )}\n        </ListItem.Root>\n      </CollapsiblePrimitive.Root>\n    );\n  },\n);\n\nexport type SectionToolbarProps = ThemedClassName<ComponentPropsWithRef<'div'>>;\n\n// TODO(burdon): block-start\nexport const sectionToolbarLayout =\n  'bs-[--rail-action] bg-[--sticky-bg] sticky block-start-0 __-block-start-px transition-opacity';\n\nexport const SectionToolbar = ({ children, classNames }: SectionToolbarProps) => {\n  return (\n    <Toolbar.Root orientation='horizontal' classNames={[sectionToolbarLayout, hoverableControlItem, classNames]}>\n      {children}\n    </Toolbar.Root>\n  );\n};\n\nexport const SectionTile: MosaicTileComponent<\n  StackSectionItem,\n  HTMLLIElement\n  // TODO(wittjosiah): If props is specified there is a type error with Mosaic.Container.\n  // { itemContext: StackContextValue }\n> = forwardRef(({ path, type, active, draggableStyle, draggableProps, item, itemContext }, forwardedRef) => {\n  const { t } = useTranslation(translationKey);\n  const { activeItem } = useMosaic();\n\n  const separation = !!itemContext?.separation;\n  const isResizable = !!itemContext?.isResizable;\n  const { transform, onDeleteSection, onNavigateToSection, onAddSection, onCollapseSection, SectionContent } =\n    itemContext as StackContextValue;\n\n  const transformedItem = transform\n    ? transform(\n        item,\n        // TODO(wittjosiah): `active` doesn't always seem to be accurate here.\n        activeItem?.item.id === item.id ? activeItem?.type : type,\n      )\n    : item;\n\n  const placeholder = transformedItem.metadata?.placeholder ?? ['untitled section title', { ns: translationKey }];\n  const title = transformedItem.view?.title ?? toLocalizedString(placeholder, t);\n\n  const section = (\n    <Section\n      ref={forwardedRef}\n      title={title}\n      id={transformedItem.id}\n      size={transformedItem.view?.size}\n      icon={transformedItem.metadata?.icon}\n      collapsed={transformedItem.view?.collapsed}\n      separation={separation}\n      active={active}\n      draggableProps={draggableProps}\n      draggableStyle={draggableStyle}\n      onCollapseSection={onCollapseSection}\n      isResizable={isResizable}\n      onDelete={() => onDeleteSection?.(path)}\n      onNavigate={() => onNavigateToSection?.(transformedItem)}\n      onAddAfter={() => onAddSection?.(path, 'after')}\n      onAddBefore={() => onAddSection?.(path, 'before')}\n    >\n      {SectionContent && <SectionContent data={transformedItem.object} />}\n    </Section>\n  );\n\n  return active === 'overlay' ? <List>{section}</List> : section;\n});\n", "//\n// Copyright 2024 DXOS.org\n//\nimport { type IconProps } from '@phosphor-icons/react';\nimport React from 'react';\n\nexport const CaretDownUp = ({ children, weight, ...props }: IconProps) => {\n  return (\n    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' {...props}>\n      <rect width='256' height='256' fill='none' />\n      <polyline\n        points='80 224 128 176 176 224'\n        fill='none'\n        stroke='currentColor'\n        strokeLinecap='round'\n        strokeLinejoin='round'\n        strokeWidth='16'\n      />\n      <polyline\n        points='80 32 128 80 176 32'\n        fill='none'\n        stroke='currentColor'\n        strokeLinecap='round'\n        strokeLinejoin='round'\n        strokeWidth='16'\n      />\n      {children}\n    </svg>\n  );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nexport const stackColumns = 'grid-cols-[var(--rail-size)_calc(100%-var(--rail-size))]';\n", "//\n// Copyright 2023 DXOS.org\n//\n\nexport const translationKey = 'stack';\n\nexport default [\n  {\n    'en-US': {\n      [translationKey]: {\n        'empty stack message': 'Drag items into the stack.',\n        'remove section label': 'Delete',\n        'navigate to section label': 'Navigate to item',\n        'untitled section title': 'Untitled section',\n        'add section before label': 'Add before',\n        'add section after label': 'Add after',\n        'expand label': 'Expand',\n        'collapse label': 'Collapse',\n      },\n    },\n  },\n];\n"],
+  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { useArrowNavigationGroup, useFocusableGroup } from '@fluentui/react-tabster';\nimport React, { forwardRef, useCallback } from 'react';\nimport { useResizeDetector } from 'react-resize-detector';\n\nimport { List, useTranslation } from '@dxos/react-ui';\nimport {\n  type MosaicContainerProps,\n  type MosaicTileComponent,\n  Mosaic,\n  Path,\n  useContainer,\n  useItemsWithPreview,\n  useMosaic,\n} from '@dxos/react-ui-mosaic';\nimport { dropRingInner } from '@dxos/react-ui-theme';\n\nimport {\n  type CollapsedSections,\n  type AddSectionPosition,\n  SectionTile,\n  type StackContextValue,\n  type StackItem,\n  type StackSectionContent,\n  type StackSectionItem,\n} from './Section';\nimport { stackColumns } from './style-fragments';\nimport { translationKey } from '../translations';\n\nexport type Direction = 'horizontal' | 'vertical';\n\nexport type { CollapsedSections, AddSectionPosition };\n\nexport const DEFAULT_TYPE = 'stack-section';\n\nexport type StackProps<TData extends StackSectionContent = StackSectionContent> = Omit<\n  MosaicContainerProps<TData, number>,\n  'debug' | 'Component'\n> &\n  Omit<StackContextValue<TData>, 'setCollapsedSections'> & {\n    items?: StackSectionItem[];\n    separation?: boolean; // TODO(burdon): Style.\n    onCollapseSection?: (id: string, collapsed: boolean) => void;\n    emptyComponent?: React.ReactNode;\n  };\n\nexport const Stack = ({\n  id,\n  type = DEFAULT_TYPE,\n  SectionContent,\n  items = [],\n  separation = true,\n  transform,\n  onOver,\n  onDrop,\n  onAddSection,\n  onDeleteSection,\n  onNavigateToSection,\n  onCollapseSection,\n  ...props\n}: StackProps) => {\n  const { ref: containerRef, width = 0 } = useResizeDetector<HTMLDivElement>({ refreshRate: 200 });\n  const { operation, overItem } = useMosaic();\n  const itemsWithPreview = useItemsWithPreview({ path: id, items });\n\n  const getOverlayStyle = useCallback(() => ({ width }), [width]);\n  const getOverlayProps = useCallback(\n    () => ({ itemContext: { transform, SectionContent } }),\n    [transform, SectionContent],\n  );\n\n  // TODO(thure): The root cause of the discrepancy between `activeNodeRect.top` and `overlayNodeRect.top` in Composer\n  //  in particular is not yet known, so this solution may may backfire in unforeseeable cases.\n  const stackModifier = useCallback<Exclude<MosaicContainerProps['modifier'], undefined>>(\n    (_activeItem, { transform, activeNodeRect, overlayNodeRect }) => {\n      if (activeNodeRect && overlayNodeRect) {\n        transform.y += activeNodeRect?.top - overlayNodeRect?.top;\n      }\n      return transform;\n    },\n    [],\n  );\n\n  return (\n    <Mosaic.Container\n      {...{\n        id,\n        type,\n        Component: SectionTile as MosaicTileComponent<StackSectionItem, HTMLDivElement>,\n        getOverlayStyle,\n        getOverlayProps,\n        onOver,\n        onDrop,\n        modifier: stackModifier,\n      }}\n    >\n      <Mosaic.DroppableTile\n        path={id}\n        type={type}\n        item={{ id, items: itemsWithPreview }}\n        // TODO(wittjosiah): Should this actually be a context?\n        itemContext={{\n          separation,\n          transform,\n          onDeleteSection,\n          onNavigateToSection,\n          onAddSection,\n          onCollapseSection,\n          SectionContent,\n        }}\n        isOver={\n          overItem &&\n          !!overItem.path &&\n          Path.hasRoot(overItem.path, id) &&\n          (operation === 'copy' || operation === 'transfer')\n        }\n        Component={StackTile}\n        {...props}\n        ref={containerRef}\n      />\n    </Mosaic.Container>\n  );\n};\n\nconst StackTile: MosaicTileComponent<StackItem, HTMLOListElement, Pick<StackProps, 'emptyComponent'>> = forwardRef(\n  ({ classNames, path, isOver, item: { items }, itemContext, type: _type, emptyComponent, ...props }, forwardedRef) => {\n    const { t } = useTranslation(translationKey);\n    const { Component, type } = useContainer();\n    const domAttributes = useArrowNavigationGroup({ axis: 'grid' });\n    const { activeItem } = useMosaic();\n\n    // NOTE(thure): Ensure “groupper” is available, but no need to use it here.\n    const _group = useFocusableGroup();\n\n    // NOTE: Keep outer padding the same as MarkdownMain.\n    return (\n      <List\n        ref={forwardedRef}\n        classNames={['grid relative', stackColumns, isOver && dropRingInner, classNames]}\n        {...(!activeItem && domAttributes)}\n        {...props}\n      >\n        {items.length > 0 ? (\n          <Mosaic.SortableContext items={items} direction='vertical'>\n            {items.map((item, index) => (\n              <Mosaic.SortableTile\n                key={item.id}\n                item={item}\n                itemContext={itemContext}\n                path={path}\n                type={type}\n                position={index}\n                Component={Component}\n              />\n            ))}\n          </Mosaic.SortableContext>\n        ) : emptyComponent !== undefined ? (\n          <>{emptyComponent}</>\n        ) : (\n          <p\n            className='grid col-span-2 text-center p-4 border border-dashed border-neutral-500/50 rounded'\n            data-testid='stack.empty'\n          >\n            {t('empty stack message')}\n          </p>\n        )}\n      </List>\n    );\n  },\n);\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { useFocusableGroup, useTabsterAttributes } from '@fluentui/react-tabster';\nimport {\n  ArrowLineDown,\n  ArrowLineUp,\n  ArrowSquareOut,\n  CaretUpDown,\n  DotsNine,\n  type IconProps,\n  Trash,\n} from '@phosphor-icons/react';\nimport * as CollapsiblePrimitive from '@radix-ui/react-collapsible';\nimport React, {\n  forwardRef,\n  useState,\n  type ForwardRefExoticComponent,\n  type RefAttributes,\n  type FC,\n  type PropsWithChildren,\n  type ComponentPropsWithRef,\n} from 'react';\n\nimport {\n  Button,\n  DropdownMenu,\n  type Label,\n  List,\n  ListItem,\n  ScrollArea,\n  type ThemedClassName,\n  Toolbar,\n  toLocalizedString,\n  useTranslation,\n} from '@dxos/react-ui';\nimport { createAttendableAttributes, useHasAttention } from '@dxos/react-ui-attention';\nimport { DropDownMenuDragHandleTrigger, resizeHandle, resizeHandleHorizontal } from '@dxos/react-ui-deck';\nimport {\n  type MosaicActiveType,\n  type MosaicDataItem,\n  type MosaicTileComponent,\n  type MosaicTileProps,\n  useMosaic,\n} from '@dxos/react-ui-mosaic';\nimport {\n  focusRing,\n  getSize,\n  hoverableControlItem,\n  hoverableControls,\n  hoverableFocusedWithinControls,\n  mx,\n} from '@dxos/react-ui-theme';\n\nimport { CaretDownUp } from './CaretDownUp';\nimport { stackColumns } from './style-fragments';\nimport { translationKey } from '../translations';\n\nconst sectionActionDimensions = 'p-1 shrink-0 min-bs-0 is-[--rail-action] bs-min';\n\nexport type StackSectionContent = MosaicDataItem;\n\nexport type CollapsedSections = Record<string, boolean>;\n\nexport type AddSectionPosition = 'before' | 'after' | 'beforeAll' | 'afterAll';\n\nexport type StackContextValue<TData extends StackSectionContent = StackSectionContent> = {\n  SectionContent: FC<{ data: TData }>;\n  separation?: boolean;\n  isResizable?: boolean;\n  transform?: (item: MosaicDataItem, type?: string) => StackSectionItem;\n  onDeleteSection?: (path: string) => void;\n  onAddSection?: (path: string, position: AddSectionPosition) => void;\n  onNavigateToSection?: (object: MosaicDataItem) => void;\n  onCollapseSection?: (id: string, collapsed: boolean) => void;\n};\n\nexport type StackItem = MosaicDataItem & {\n  items: StackSectionItem[];\n};\n\nexport type StackSectionItem = MosaicDataItem & {\n  object: StackSectionContent;\n  // TODO(wittjosiah): Use effect schema? Share schema with echo.\n  view?: {\n    title?: string;\n    size?: SectionSize;\n    height?: number;\n    collapsed?: boolean;\n    custom?: Record<string, any>;\n  };\n  // TODO(wittjosiah): Common type? Factor out?\n  metadata?: {\n    icon?: FC<IconProps>;\n    placeholder?: Label;\n    viewActions?: (item: StackSectionItem) => StackAction;\n  };\n};\n\nexport type StackAction = {\n  icon: FC<IconProps>;\n  label: Label;\n  onClick: () => void;\n};\n\nexport type SectionSize = 'intrinsic' | 'extrinsic';\n\nexport type SectionProps = PropsWithChildren<\n  {\n    // Data props.\n    id: string;\n    title: string;\n\n    // Tile props.\n    active?: MosaicActiveType;\n  } & Pick<\n    MosaicTileProps,\n    'draggableProps' | 'draggableStyle' | 'onDelete' | 'onNavigate' | 'onAddAfter' | 'onAddBefore'\n  > &\n    Pick<StackContextValue, 'separation' | 'isResizable' | 'onCollapseSection'> &\n    Pick<Required<StackSectionItem>['view'], 'collapsed' | 'size'> &\n    Pick<Required<StackSectionItem>['metadata'], 'icon'>\n>;\n\nconst resizeHandleStyles = mx(resizeHandle, resizeHandleHorizontal, 'is-full bs-[--rail-action] col-start-2');\n\nexport const Section: ForwardRefExoticComponent<SectionProps & RefAttributes<HTMLLIElement>> = forwardRef<\n  HTMLLIElement,\n  SectionProps\n>(\n  (\n    {\n      id,\n      title,\n      icon: Icon = DotsNine,\n      size = 'intrinsic',\n      collapsed,\n      active,\n      isResizable,\n      draggableProps,\n      draggableStyle,\n      onDelete,\n      onNavigate,\n      onAddBefore,\n      onAddAfter,\n      onCollapseSection,\n      children,\n    },\n    forwardedRef,\n  ) => {\n    const { t } = useTranslation(translationKey);\n    const [optionsMenuOpen, setOptionsMenuOpen] = useState(false);\n    const sectionActionsToolbar = useTabsterAttributes({\n      groupper: {},\n      focusable: {},\n      mover: { cyclic: true, direction: 1, memorizeCurrent: false },\n    });\n    const sectionContentGroup = useFocusableGroup({});\n    const attendableAttrs = createAttendableAttributes(id);\n    const attended = useHasAttention(id);\n\n    return (\n      <CollapsiblePrimitive.Root\n        asChild\n        open={!collapsed}\n        onOpenChange={(nextOpen) => onCollapseSection?.(id, !nextOpen)}\n      >\n        <ListItem.Root\n          ref={forwardedRef}\n          id={id}\n          {...attendableAttrs}\n          classNames={[\n            'grid col-span-2 group/section',\n            active === 'overlay' ? stackColumns : 'grid-cols-subgrid snap-start',\n          ]}\n          style={draggableStyle}\n        >\n          <div\n            role='none'\n            className={mx(\n              'grid col-span-2 grid-cols-subgrid',\n              'bg-base focus-within:border-separator focus-within:bg-attention',\n              hoverableControls,\n              hoverableFocusedWithinControls,\n              (active || attended) && 'bg-attention border-separator',\n              (active === 'origin' || active === 'rearrange' || active === 'destination') && 'opacity-0',\n            )}\n          >\n            <div\n              role='toolbar'\n              aria-orientation='vertical'\n              aria-label={t('section controls label')}\n              {...(!active && { tabIndex: 0 })}\n              {...(!active && sectionActionsToolbar)}\n              className={mx(\n                'grid grid-cols-subgrid ch-focus-ring rounded-sm grid-rows-[min-content_min-content_1fr] m-1',\n                'group-has-[[role=toolbar][aria-orientation=horizontal]]/section:pbs-[--rail-action]',\n              )}\n            >\n              <div role='none' className='sticky -block-start-px bg-[--sticky-bg]'>\n                <DropdownMenu.Root\n                  {...{\n                    open: optionsMenuOpen,\n                    onOpenChange: setOptionsMenuOpen,\n                  }}\n                >\n                  <DropDownMenuDragHandleTrigger active={!!active} variant='ghost' classNames='m-0' {...draggableProps}>\n                    <Icon className={mx(getSize(5), 'transition-opacity')} />\n                  </DropDownMenuDragHandleTrigger>\n                  <DropdownMenu.Portal>\n                    <DropdownMenu.Content>\n                      <DropdownMenu.Viewport>\n                        {collapsed ? (\n                          <DropdownMenu.Item onClick={onNavigate} data-testid='section.navigate-to'>\n                            <ArrowSquareOut className={mx(getSize(5), 'mr-2')} />\n                            <span className='grow'>{t('navigate to section label')}</span>\n                          </DropdownMenu.Item>\n                        ) : (\n                          <CollapsiblePrimitive.Trigger asChild>\n                            <DropdownMenu.Item>\n                              <CaretDownUp className={mx(getSize(5), 'mr-2')} />\n                              <span className='grow'>{t('collapse label')}</span>\n                            </DropdownMenu.Item>\n                          </CollapsiblePrimitive.Trigger>\n                        )}\n                        <DropdownMenu.Item onClick={onAddBefore} data-testid='section.add-before'>\n                          <ArrowLineUp className={mx(getSize(5), 'mr-2')} />\n                          <span className='grow'>{t('add section before label')}</span>\n                        </DropdownMenu.Item>\n                        <DropdownMenu.Item onClick={onAddAfter} data-testid='section.add-after'>\n                          <ArrowLineDown className={mx(getSize(5), 'mr-2')} />\n                          <span className='grow'>{t('add section after label')}</span>\n                        </DropdownMenu.Item>\n                        <DropdownMenu.Item onClick={() => onDelete?.()} data-testid='section.remove'>\n                          <Trash className={mx(getSize(5), 'mr-2')} />\n                          <span className='grow'>{t('remove section label')}</span>\n                        </DropdownMenu.Item>\n                      </DropdownMenu.Viewport>\n                      <DropdownMenu.Arrow />\n                    </DropdownMenu.Content>\n                  </DropdownMenu.Portal>\n                </DropdownMenu.Root>\n                {collapsed ? (\n                  <CollapsiblePrimitive.Trigger asChild>\n                    <Button variant='ghost' classNames={sectionActionDimensions}>\n                      <span className='sr-only'>{t('expand label')}</span>\n                      <CaretUpDown className={getSize(4)} />\n                    </Button>\n                  </CollapsiblePrimitive.Trigger>\n                ) : (\n                  <Button\n                    variant='ghost'\n                    classNames={sectionActionDimensions}\n                    onClick={onNavigate}\n                    data-testid='section.navigate-to'\n                  >\n                    <ArrowSquareOut className={mx(getSize(4))} />\n                    <span className='sr-only'>{t('navigate to section label')}</span>\n                  </Button>\n                )}\n              </div>\n            </div>\n\n            {/* Main content */}\n\n            <ListItem.Heading\n              classNames={collapsed ? ['grid grid-rows-subgrid grid-cols-subgrid items-center', focusRing] : 'sr-only'}\n              {...(collapsed && { ...sectionContentGroup, tabIndex: 0 })}\n            >\n              {/*\n                TODO(thure): This needs to be made extensible; Markdown document titles especially are difficult.\n                  Using `Surface` in a UI package like this would be unprecedented and needs motivation.\n                  Refactoring to use subcomponents is complicated by sections being a sortable Mosaic Tile.\n                  Reevaluate when work on collections (Folders, Stacks, etc) settles.\n              */}\n              <span className='truncate'>{title}</span>\n            </ListItem.Heading>\n            {size === 'intrinsic' ? (\n              <CollapsiblePrimitive.Content\n                {...(!collapsed && {\n                  ...sectionContentGroup,\n                  tabIndex: 0,\n                })}\n                // TODO(burdon): Add margin to fragment?\n                className={mx(focusRing, 'm-[2px]')}\n              >\n                {children}\n              </CollapsiblePrimitive.Content>\n            ) : (\n              <CollapsiblePrimitive.Content asChild>\n                <ScrollArea.Root\n                  type='always'\n                  {...(!collapsed && { ...sectionContentGroup, tabIndex: 0 })}\n                  classNames={mx(focusRing, 'is-full has-[[data-radix-scroll-area-viewport]]:pbe-4')}\n                >\n                  <ScrollArea.Viewport>{children}</ScrollArea.Viewport>\n                  <ScrollArea.Scrollbar\n                    orientation='horizontal'\n                    variant='coarse'\n                    classNames='hidden has-[div]:flex !inline-end-[max(.25rem,var(--radix-scroll-area-corner-width))]'\n                  >\n                    <ScrollArea.Thumb />\n                  </ScrollArea.Scrollbar>\n                  <ScrollArea.Scrollbar orientation='vertical' variant='coarse' classNames='hidden has-[div]:flex'>\n                    <ScrollArea.Thumb />\n                  </ScrollArea.Scrollbar>\n                  <ScrollArea.Corner />\n                </ScrollArea.Root>\n              </CollapsiblePrimitive.Content>\n            )}\n          </div>\n          {isResizable && !collapsed && (\n            <button className={resizeHandleStyles}>\n              <span className='sr-only'>{t('resize section label')}</span>\n            </button>\n          )}\n        </ListItem.Root>\n      </CollapsiblePrimitive.Root>\n    );\n  },\n);\n\nexport type SectionToolbarProps = ThemedClassName<ComponentPropsWithRef<'div'>>;\n\n// TODO(burdon): block-start\nexport const sectionToolbarLayout =\n  'bs-[--rail-action] bg-[--sticky-bg] sticky block-start-0 __-block-start-px transition-opacity';\n\nexport const SectionToolbar = ({ children, classNames }: SectionToolbarProps) => {\n  return (\n    <Toolbar.Root orientation='horizontal' classNames={[sectionToolbarLayout, hoverableControlItem, classNames]}>\n      {children}\n    </Toolbar.Root>\n  );\n};\n\nexport const SectionTile: MosaicTileComponent<\n  StackSectionItem,\n  HTMLLIElement\n  // TODO(wittjosiah): If props is specified there is a type error with Mosaic.Container.\n  // { itemContext: StackContextValue }\n> = forwardRef(({ path, type, active, draggableStyle, draggableProps, item, itemContext }, forwardedRef) => {\n  const { t } = useTranslation(translationKey);\n  const { activeItem } = useMosaic();\n\n  const separation = !!itemContext?.separation;\n  const isResizable = !!itemContext?.isResizable;\n  const { transform, onDeleteSection, onNavigateToSection, onAddSection, onCollapseSection, SectionContent } =\n    itemContext as StackContextValue;\n\n  const transformedItem = transform\n    ? transform(\n        item,\n        // TODO(wittjosiah): `active` doesn't always seem to be accurate here.\n        activeItem?.item.id === item.id ? activeItem?.type : type,\n      )\n    : item;\n\n  const placeholder = transformedItem.metadata?.placeholder ?? ['untitled section title', { ns: translationKey }];\n  const title = transformedItem.view?.title ?? toLocalizedString(placeholder, t);\n\n  const section = (\n    <Section\n      ref={forwardedRef}\n      title={title}\n      id={transformedItem.id}\n      size={transformedItem.view?.size}\n      icon={transformedItem.metadata?.icon}\n      collapsed={transformedItem.view?.collapsed}\n      separation={separation}\n      active={active}\n      draggableProps={draggableProps}\n      draggableStyle={draggableStyle}\n      onCollapseSection={onCollapseSection}\n      isResizable={isResizable}\n      onDelete={() => onDeleteSection?.(path)}\n      onNavigate={() => onNavigateToSection?.(transformedItem)}\n      onAddAfter={() => onAddSection?.(path, 'after')}\n      onAddBefore={() => onAddSection?.(path, 'before')}\n    >\n      {SectionContent && <SectionContent data={transformedItem.object} />}\n    </Section>\n  );\n\n  return active === 'overlay' ? <List>{section}</List> : section;\n});\n", "//\n// Copyright 2024 DXOS.org\n//\nimport { type IconProps } from '@phosphor-icons/react';\nimport React from 'react';\n\nexport const CaretDownUp = ({ children, weight, ...props }: IconProps) => {\n  return (\n    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' {...props}>\n      <rect width='256' height='256' fill='none' />\n      <polyline\n        points='80 224 128 176 176 224'\n        fill='none'\n        stroke='currentColor'\n        strokeLinecap='round'\n        strokeLinejoin='round'\n        strokeWidth='16'\n      />\n      <polyline\n        points='80 32 128 80 176 32'\n        fill='none'\n        stroke='currentColor'\n        strokeLinecap='round'\n        strokeLinejoin='round'\n        strokeWidth='16'\n      />\n      {children}\n    </svg>\n  );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nexport const stackColumns = 'grid-cols-[var(--rail-size)_calc(100%-var(--rail-size))]';\n", "//\n// Copyright 2023 DXOS.org\n//\n\nexport const translationKey = 'stack';\n\nexport default [\n  {\n    'en-US': {\n      [translationKey]: {\n        'empty stack message': 'Drag items into the stack.',\n        'remove section label': 'Delete',\n        'navigate to section label': 'Navigate to item',\n        'untitled section title': 'Untitled section',\n        'add section before label': 'Add before',\n        'add section after label': 'Add after',\n        'expand label': 'Expand',\n        'collapse label': 'Collapse',\n      },\n    },\n  },\n];\n"],
   "mappings": "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",
-  "names": ["useArrowNavigationGroup", "useFocusableGroup", "React", "forwardRef", "useCallback", "useResizeDetector", "List", "useTranslation", "Mosaic", "Path", "useContainer", "useItemsWithPreview", "useMosaic", "dropRingInner", "useFocusableGroup", "useTabsterAttributes", "ArrowLineDown", "ArrowLineUp", "ArrowSquareOut", "CaretUpDown", "DotsNine", "Trash", "CollapsiblePrimitive", "React", "forwardRef", "useState", "Button", "DropdownMenu", "List", "ListItem", "ScrollArea", "Toolbar", "toLocalizedString", "useTranslation", "createAttendableAttributes", "useHasAttention", "DropDownMenuDragHandleTrigger", "resizeHandle", "resizeHandleHorizontal", "useMosaic", "focusRing", "getSize", "hoverableControlItem", "hoverableControls", "hoverableFocusedWithinControls", "mx", "React", "CaretDownUp", "children", "weight", "props", "svg", "xmlns", "viewBox", "rect", "width", "height", "fill", "polyline", "points", "stroke", "strokeLinecap", "strokeLinejoin", "strokeWidth", "stackColumns", "translationKey", "sectionActionDimensions", "resizeHandleStyles", "mx", "resizeHandle", "resizeHandleHorizontal", "Section", "forwardRef", "id", "title", "icon", "Icon", "DotsNine", "size", "collapsed", "active", "isResizable", "draggableProps", "draggableStyle", "onDelete", "onNavigate", "onAddBefore", "onAddAfter", "onCollapseSection", "children", "forwardedRef", "t", "useTranslation", "translationKey", "optionsMenuOpen", "setOptionsMenuOpen", "useState", "sectionActionsToolbar", "useTabsterAttributes", "groupper", "focusable", "mover", "cyclic", "direction", "memorizeCurrent", "sectionContentGroup", "useFocusableGroup", "attendableProps", "createAttendableAttributes", "attended", "useHasAttention", "React", "Root", "asChild", "open", "onOpenChange", "nextOpen", "ListItem", "ref", "classNames", "stackColumns", "style", "div", "role", "className", "hoverableControls", "hoverableFocusedWithinControls", "aria-orientation", "aria-label", "tabIndex", "DropdownMenu", "DropDownMenuDragHandleTrigger", "variant", "getSize", "Portal", "Content", "Viewport", "Item", "onClick", "data-testid", "ArrowSquareOut", "span", "Trigger", "CaretDownUp", "ArrowLineUp", "ArrowLineDown", "Trash", "Arrow", "Button", "CaretUpDown", "Heading", "focusRing", "ScrollArea", "type", "Scrollbar", "orientation", "Thumb", "Corner", "button", "sectionToolbarLayout", "SectionToolbar", "Toolbar", "hoverableControlItem", "SectionTile", "path", "item", "itemContext", "activeItem", "useMosaic", "separation", "transform", "onDeleteSection", "onNavigateToSection", "onAddSection", "SectionContent", "transformedItem", "placeholder", "metadata", "ns", "view", "toLocalizedString", "section", "data", "object", "List", "DEFAULT_TYPE", "Stack", "id", "type", "SectionContent", "items", "separation", "transform", "onOver", "onDrop", "onAddSection", "onDeleteSection", "onNavigateToSection", "onCollapseSection", "props", "ref", "containerRef", "width", "useResizeDetector", "refreshRate", "operation", "overItem", "useMosaic", "itemsWithPreview", "useItemsWithPreview", "path", "getOverlayStyle", "useCallback", "getOverlayProps", "itemContext", "stackModifier", "_activeItem", "activeNodeRect", "overlayNodeRect", "y", "top", "React", "Mosaic", "Container", "Component", "SectionTile", "modifier", "DroppableTile", "item", "isOver", "Path", "hasRoot", "StackTile", "forwardRef", "classNames", "_type", "emptyComponent", "forwardedRef", "t", "useTranslation", "translationKey", "useContainer", "domAttributes", "useArrowNavigationGroup", "axis", "activeItem", "_group", "useFocusableGroup", "List", "stackColumns", "dropRingInner", "length", "SortableContext", "direction", "map", "index", "SortableTile", "key", "position", "undefined", "p", "className", "data-testid"]
+  "names": ["useArrowNavigationGroup", "useFocusableGroup", "React", "forwardRef", "useCallback", "useResizeDetector", "List", "useTranslation", "Mosaic", "Path", "useContainer", "useItemsWithPreview", "useMosaic", "dropRingInner", "useFocusableGroup", "useTabsterAttributes", "ArrowLineDown", "ArrowLineUp", "ArrowSquareOut", "CaretUpDown", "DotsNine", "Trash", "CollapsiblePrimitive", "React", "forwardRef", "useState", "Button", "DropdownMenu", "List", "ListItem", "ScrollArea", "Toolbar", "toLocalizedString", "useTranslation", "createAttendableAttributes", "useHasAttention", "DropDownMenuDragHandleTrigger", "resizeHandle", "resizeHandleHorizontal", "useMosaic", "focusRing", "getSize", "hoverableControlItem", "hoverableControls", "hoverableFocusedWithinControls", "mx", "React", "CaretDownUp", "children", "weight", "props", "svg", "xmlns", "viewBox", "rect", "width", "height", "fill", "polyline", "points", "stroke", "strokeLinecap", "strokeLinejoin", "strokeWidth", "stackColumns", "translationKey", "sectionActionDimensions", "resizeHandleStyles", "mx", "resizeHandle", "resizeHandleHorizontal", "Section", "forwardRef", "id", "title", "icon", "Icon", "DotsNine", "size", "collapsed", "active", "isResizable", "draggableProps", "draggableStyle", "onDelete", "onNavigate", "onAddBefore", "onAddAfter", "onCollapseSection", "children", "forwardedRef", "t", "useTranslation", "translationKey", "optionsMenuOpen", "setOptionsMenuOpen", "useState", "sectionActionsToolbar", "useTabsterAttributes", "groupper", "focusable", "mover", "cyclic", "direction", "memorizeCurrent", "sectionContentGroup", "useFocusableGroup", "attendableAttrs", "createAttendableAttributes", "attended", "useHasAttention", "React", "Root", "asChild", "open", "onOpenChange", "nextOpen", "ListItem", "ref", "classNames", "stackColumns", "style", "div", "role", "className", "hoverableControls", "hoverableFocusedWithinControls", "aria-orientation", "aria-label", "tabIndex", "DropdownMenu", "DropDownMenuDragHandleTrigger", "variant", "getSize", "Portal", "Content", "Viewport", "Item", "onClick", "data-testid", "ArrowSquareOut", "span", "Trigger", "CaretDownUp", "ArrowLineUp", "ArrowLineDown", "Trash", "Arrow", "Button", "CaretUpDown", "Heading", "focusRing", "ScrollArea", "type", "Scrollbar", "orientation", "Thumb", "Corner", "button", "sectionToolbarLayout", "SectionToolbar", "Toolbar", "hoverableControlItem", "SectionTile", "path", "item", "itemContext", "activeItem", "useMosaic", "separation", "transform", "onDeleteSection", "onNavigateToSection", "onAddSection", "SectionContent", "transformedItem", "placeholder", "metadata", "ns", "view", "toLocalizedString", "section", "data", "object", "List", "DEFAULT_TYPE", "Stack", "id", "type", "SectionContent", "items", "separation", "transform", "onOver", "onDrop", "onAddSection", "onDeleteSection", "onNavigateToSection", "onCollapseSection", "props", "ref", "containerRef", "width", "useResizeDetector", "refreshRate", "operation", "overItem", "useMosaic", "itemsWithPreview", "useItemsWithPreview", "path", "getOverlayStyle", "useCallback", "getOverlayProps", "itemContext", "stackModifier", "_activeItem", "activeNodeRect", "overlayNodeRect", "y", "top", "React", "Mosaic", "Container", "Component", "SectionTile", "modifier", "DroppableTile", "item", "isOver", "Path", "hasRoot", "StackTile", "forwardRef", "classNames", "_type", "emptyComponent", "forwardedRef", "t", "useTranslation", "translationKey", "useContainer", "domAttributes", "useArrowNavigationGroup", "axis", "activeItem", "_group", "useFocusableGroup", "List", "stackColumns", "dropRingInner", "length", "SortableContext", "direction", "map", "index", "SortableTile", "key", "position", "undefined", "p", "className", "data-testid"]
 }

package/dist/lib/node/index.cjs

@@ -109,7 +109,7 @@ var Section = /* @__PURE__ */ (0, import_react3.forwardRef)(({ id, title, icon:
     }
   });
   const sectionContentGroup = (0, import_react_tabster2.useFocusableGroup)({});
-  const attendableProps = (0, import_react_ui_attention.createAttendableAttributes)(id);
+  const attendableAttrs = (0, import_react_ui_attention.createAttendableAttributes)(id);
   const attended = (0, import_react_ui_attention.useHasAttention)(id);
   return /* @__PURE__ */ import_react3.default.createElement(CollapsiblePrimitive.Root, {
     asChild: true,
@@ -118,7 +118,7 @@ var Section = /* @__PURE__ */ (0, import_react3.forwardRef)(({ id, title, icon:
   }, /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.ListItem.Root, {
     ref: forwardedRef,
     id,
-    ...attendableProps,
+    ...attendableAttrs,
     classNames: [
       "grid col-span-2 group/section",
       active === "overlay" ? stackColumns : "grid-cols-subgrid snap-start"

package/dist/lib/node/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/Stack.tsx", "../../../src/components/Section.tsx", "../../../src/components/CaretDownUp.tsx", "../../../src/components/style-fragments.ts", "../../../src/translations.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { useArrowNavigationGroup, useFocusableGroup } from '@fluentui/react-tabster';\nimport React, { forwardRef, useCallback } from 'react';\nimport { useResizeDetector } from 'react-resize-detector';\n\nimport { List, useTranslation } from '@dxos/react-ui';\nimport {\n  type MosaicContainerProps,\n  type MosaicTileComponent,\n  Mosaic,\n  Path,\n  useContainer,\n  useItemsWithPreview,\n  useMosaic,\n} from '@dxos/react-ui-mosaic';\nimport { dropRingInner } from '@dxos/react-ui-theme';\n\nimport {\n  type CollapsedSections,\n  type AddSectionPosition,\n  SectionTile,\n  type StackContextValue,\n  type StackItem,\n  type StackSectionContent,\n  type StackSectionItem,\n} from './Section';\nimport { stackColumns } from './style-fragments';\nimport { translationKey } from '../translations';\n\nexport type Direction = 'horizontal' | 'vertical';\n\nexport type { CollapsedSections, AddSectionPosition };\n\nexport const DEFAULT_TYPE = 'stack-section';\n\nexport type StackProps<TData extends StackSectionContent = StackSectionContent> = Omit<\n  MosaicContainerProps<TData, number>,\n  'debug' | 'Component'\n> &\n  Omit<StackContextValue<TData>, 'setCollapsedSections'> & {\n    items?: StackSectionItem[];\n    separation?: boolean; // TODO(burdon): Style.\n    onCollapseSection?: (id: string, collapsed: boolean) => void;\n    emptyComponent?: React.ReactNode;\n  };\n\nexport const Stack = ({\n  id,\n  type = DEFAULT_TYPE,\n  SectionContent,\n  items = [],\n  separation = true,\n  transform,\n  onOver,\n  onDrop,\n  onAddSection,\n  onDeleteSection,\n  onNavigateToSection,\n  onCollapseSection,\n  ...props\n}: StackProps) => {\n  const { ref: containerRef, width = 0 } = useResizeDetector<HTMLDivElement>({ refreshRate: 200 });\n  const { operation, overItem } = useMosaic();\n  const itemsWithPreview = useItemsWithPreview({ path: id, items });\n\n  const getOverlayStyle = useCallback(() => ({ width }), [width]);\n  const getOverlayProps = useCallback(\n    () => ({ itemContext: { transform, SectionContent } }),\n    [transform, SectionContent],\n  );\n\n  // TODO(thure): The root cause of the discrepancy between `activeNodeRect.top` and `overlayNodeRect.top` in Composer\n  //  in particular is not yet known, so this solution may may backfire in unforeseeable cases.\n  const stackModifier = useCallback<Exclude<MosaicContainerProps['modifier'], undefined>>(\n    (_activeItem, { transform, activeNodeRect, overlayNodeRect }) => {\n      if (activeNodeRect && overlayNodeRect) {\n        transform.y += activeNodeRect?.top - overlayNodeRect?.top;\n      }\n      return transform;\n    },\n    [],\n  );\n\n  return (\n    <Mosaic.Container\n      {...{\n        id,\n        type,\n        Component: SectionTile as MosaicTileComponent<StackSectionItem, HTMLDivElement>,\n        getOverlayStyle,\n        getOverlayProps,\n        onOver,\n        onDrop,\n        modifier: stackModifier,\n      }}\n    >\n      <Mosaic.DroppableTile\n        path={id}\n        type={type}\n        item={{ id, items: itemsWithPreview }}\n        // TODO(wittjosiah): Should this actually be a context?\n        itemContext={{\n          separation,\n          transform,\n          onDeleteSection,\n          onNavigateToSection,\n          onAddSection,\n          onCollapseSection,\n          SectionContent,\n        }}\n        isOver={\n          overItem &&\n          !!overItem.path &&\n          Path.hasRoot(overItem.path, id) &&\n          (operation === 'copy' || operation === 'transfer')\n        }\n        Component={StackTile}\n        {...props}\n        ref={containerRef}\n      />\n    </Mosaic.Container>\n  );\n};\n\nconst StackTile: MosaicTileComponent<StackItem, HTMLOListElement, Pick<StackProps, 'emptyComponent'>> = forwardRef(\n  ({ classNames, path, isOver, item: { items }, itemContext, type: _type, emptyComponent, ...props }, forwardedRef) => {\n    const { t } = useTranslation(translationKey);\n    const { Component, type } = useContainer();\n    const domAttributes = useArrowNavigationGroup({ axis: 'grid' });\n    const { activeItem } = useMosaic();\n\n    // NOTE(thure): Ensure “groupper” is available, but no need to use it here.\n    const _group = useFocusableGroup();\n\n    // NOTE: Keep outer padding the same as MarkdownMain.\n    return (\n      <List\n        ref={forwardedRef}\n        classNames={['grid relative', stackColumns, isOver && dropRingInner, classNames]}\n        {...(!activeItem && domAttributes)}\n        {...props}\n      >\n        {items.length > 0 ? (\n          <Mosaic.SortableContext items={items} direction='vertical'>\n            {items.map((item, index) => (\n              <Mosaic.SortableTile\n                key={item.id}\n                item={item}\n                itemContext={itemContext}\n                path={path}\n                type={type}\n                position={index}\n                Component={Component}\n              />\n            ))}\n          </Mosaic.SortableContext>\n        ) : emptyComponent !== undefined ? (\n          <>{emptyComponent}</>\n        ) : (\n          <p\n            className='grid col-span-2 text-center p-4 border border-dashed border-neutral-500/50 rounded'\n            data-testid='stack.empty'\n          >\n            {t('empty stack message')}\n          </p>\n        )}\n      </List>\n    );\n  },\n);\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { useFocusableGroup, useTabsterAttributes } from '@fluentui/react-tabster';\nimport {\n  ArrowLineDown,\n  ArrowLineUp,\n  ArrowSquareOut,\n  CaretUpDown,\n  DotsNine,\n  type IconProps,\n  Trash,\n} from '@phosphor-icons/react';\nimport * as CollapsiblePrimitive from '@radix-ui/react-collapsible';\nimport React, {\n  forwardRef,\n  useState,\n  type ForwardRefExoticComponent,\n  type RefAttributes,\n  type FC,\n  type PropsWithChildren,\n  type ComponentPropsWithRef,\n} from 'react';\n\nimport {\n  Button,\n  DropdownMenu,\n  type Label,\n  List,\n  ListItem,\n  ScrollArea,\n  type ThemedClassName,\n  Toolbar,\n  toLocalizedString,\n  useTranslation,\n} from '@dxos/react-ui';\nimport { createAttendableAttributes, useHasAttention } from '@dxos/react-ui-attention';\nimport { DropDownMenuDragHandleTrigger, resizeHandle, resizeHandleHorizontal } from '@dxos/react-ui-deck';\nimport {\n  type MosaicActiveType,\n  type MosaicDataItem,\n  type MosaicTileComponent,\n  type MosaicTileProps,\n  useMosaic,\n} from '@dxos/react-ui-mosaic';\nimport {\n  focusRing,\n  getSize,\n  hoverableControlItem,\n  hoverableControls,\n  hoverableFocusedWithinControls,\n  mx,\n} from '@dxos/react-ui-theme';\n\nimport { CaretDownUp } from './CaretDownUp';\nimport { stackColumns } from './style-fragments';\nimport { translationKey } from '../translations';\n\nconst sectionActionDimensions = 'p-1 shrink-0 min-bs-0 is-[--rail-action] bs-min';\n\nexport type StackSectionContent = MosaicDataItem;\n\nexport type CollapsedSections = Record<string, boolean>;\n\nexport type AddSectionPosition = 'before' | 'after' | 'beforeAll' | 'afterAll';\n\nexport type StackContextValue<TData extends StackSectionContent = StackSectionContent> = {\n  SectionContent: FC<{ data: TData }>;\n  separation?: boolean;\n  isResizable?: boolean;\n  transform?: (item: MosaicDataItem, type?: string) => StackSectionItem;\n  onDeleteSection?: (path: string) => void;\n  onAddSection?: (path: string, position: AddSectionPosition) => void;\n  onNavigateToSection?: (object: MosaicDataItem) => void;\n  onCollapseSection?: (id: string, collapsed: boolean) => void;\n};\n\nexport type StackItem = MosaicDataItem & {\n  items: StackSectionItem[];\n};\n\nexport type StackSectionItem = MosaicDataItem & {\n  object: StackSectionContent;\n  // TODO(wittjosiah): Use effect schema? Share schema with echo.\n  view?: {\n    title?: string;\n    size?: SectionSize;\n    height?: number;\n    collapsed?: boolean;\n    custom?: Record<string, any>;\n  };\n  // TODO(wittjosiah): Common type? Factor out?\n  metadata?: {\n    icon?: FC<IconProps>;\n    placeholder?: Label;\n    viewActions?: (item: StackSectionItem) => StackAction;\n  };\n};\n\nexport type StackAction = {\n  icon: FC<IconProps>;\n  label: Label;\n  onClick: () => void;\n};\n\nexport type SectionSize = 'intrinsic' | 'extrinsic';\n\nexport type SectionProps = PropsWithChildren<\n  {\n    // Data props.\n    id: string;\n    title: string;\n\n    // Tile props.\n    active?: MosaicActiveType;\n  } & Pick<\n    MosaicTileProps,\n    'draggableProps' | 'draggableStyle' | 'onDelete' | 'onNavigate' | 'onAddAfter' | 'onAddBefore'\n  > &\n    Pick<StackContextValue, 'separation' | 'isResizable' | 'onCollapseSection'> &\n    Pick<Required<StackSectionItem>['view'], 'collapsed' | 'size'> &\n    Pick<Required<StackSectionItem>['metadata'], 'icon'>\n>;\n\nconst resizeHandleStyles = mx(resizeHandle, resizeHandleHorizontal, 'is-full bs-[--rail-action] col-start-2');\n\nexport const Section: ForwardRefExoticComponent<SectionProps & RefAttributes<HTMLLIElement>> = forwardRef<\n  HTMLLIElement,\n  SectionProps\n>(\n  (\n    {\n      id,\n      title,\n      icon: Icon = DotsNine,\n      size = 'intrinsic',\n      collapsed,\n      active,\n      isResizable,\n      draggableProps,\n      draggableStyle,\n      onDelete,\n      onNavigate,\n      onAddBefore,\n      onAddAfter,\n      onCollapseSection,\n      children,\n    },\n    forwardedRef,\n  ) => {\n    const { t } = useTranslation(translationKey);\n    const [optionsMenuOpen, setOptionsMenuOpen] = useState(false);\n    const sectionActionsToolbar = useTabsterAttributes({\n      groupper: {},\n      focusable: {},\n      mover: { cyclic: true, direction: 1, memorizeCurrent: false },\n    });\n    const sectionContentGroup = useFocusableGroup({});\n    const attendableProps = createAttendableAttributes(id);\n    const attended = useHasAttention(id);\n\n    return (\n      <CollapsiblePrimitive.Root\n        asChild\n        open={!collapsed}\n        onOpenChange={(nextOpen) => onCollapseSection?.(id, !nextOpen)}\n      >\n        <ListItem.Root\n          ref={forwardedRef}\n          id={id}\n          {...attendableProps}\n          classNames={[\n            'grid col-span-2 group/section',\n            active === 'overlay' ? stackColumns : 'grid-cols-subgrid snap-start',\n          ]}\n          style={draggableStyle}\n        >\n          <div\n            role='none'\n            className={mx(\n              'grid col-span-2 grid-cols-subgrid',\n              'bg-base focus-within:border-separator focus-within:bg-attention',\n              hoverableControls,\n              hoverableFocusedWithinControls,\n              (active || attended) && 'bg-attention border-separator',\n              (active === 'origin' || active === 'rearrange' || active === 'destination') && 'opacity-0',\n            )}\n          >\n            <div\n              role='toolbar'\n              aria-orientation='vertical'\n              aria-label={t('section controls label')}\n              {...(!active && { tabIndex: 0 })}\n              {...(!active && sectionActionsToolbar)}\n              className={mx(\n                'grid grid-cols-subgrid ch-focus-ring rounded-sm grid-rows-[min-content_min-content_1fr] m-1',\n                'group-has-[[role=toolbar][aria-orientation=horizontal]]/section:pbs-[--rail-action]',\n              )}\n            >\n              <div role='none' className='sticky -block-start-px bg-[--sticky-bg]'>\n                <DropdownMenu.Root\n                  {...{\n                    open: optionsMenuOpen,\n                    onOpenChange: setOptionsMenuOpen,\n                  }}\n                >\n                  <DropDownMenuDragHandleTrigger active={!!active} variant='ghost' classNames='m-0' {...draggableProps}>\n                    <Icon className={mx(getSize(5), 'transition-opacity')} />\n                  </DropDownMenuDragHandleTrigger>\n                  <DropdownMenu.Portal>\n                    <DropdownMenu.Content>\n                      <DropdownMenu.Viewport>\n                        {collapsed ? (\n                          <DropdownMenu.Item onClick={onNavigate} data-testid='section.navigate-to'>\n                            <ArrowSquareOut className={mx(getSize(5), 'mr-2')} />\n                            <span className='grow'>{t('navigate to section label')}</span>\n                          </DropdownMenu.Item>\n                        ) : (\n                          <CollapsiblePrimitive.Trigger asChild>\n                            <DropdownMenu.Item>\n                              <CaretDownUp className={mx(getSize(5), 'mr-2')} />\n                              <span className='grow'>{t('collapse label')}</span>\n                            </DropdownMenu.Item>\n                          </CollapsiblePrimitive.Trigger>\n                        )}\n                        <DropdownMenu.Item onClick={onAddBefore} data-testid='section.add-before'>\n                          <ArrowLineUp className={mx(getSize(5), 'mr-2')} />\n                          <span className='grow'>{t('add section before label')}</span>\n                        </DropdownMenu.Item>\n                        <DropdownMenu.Item onClick={onAddAfter} data-testid='section.add-after'>\n                          <ArrowLineDown className={mx(getSize(5), 'mr-2')} />\n                          <span className='grow'>{t('add section after label')}</span>\n                        </DropdownMenu.Item>\n                        <DropdownMenu.Item onClick={() => onDelete?.()} data-testid='section.remove'>\n                          <Trash className={mx(getSize(5), 'mr-2')} />\n                          <span className='grow'>{t('remove section label')}</span>\n                        </DropdownMenu.Item>\n                      </DropdownMenu.Viewport>\n                      <DropdownMenu.Arrow />\n                    </DropdownMenu.Content>\n                  </DropdownMenu.Portal>\n                </DropdownMenu.Root>\n                {collapsed ? (\n                  <CollapsiblePrimitive.Trigger asChild>\n                    <Button variant='ghost' classNames={sectionActionDimensions}>\n                      <span className='sr-only'>{t('expand label')}</span>\n                      <CaretUpDown className={getSize(4)} />\n                    </Button>\n                  </CollapsiblePrimitive.Trigger>\n                ) : (\n                  <Button\n                    variant='ghost'\n                    classNames={sectionActionDimensions}\n                    onClick={onNavigate}\n                    data-testid='section.navigate-to'\n                  >\n                    <ArrowSquareOut className={mx(getSize(4))} />\n                    <span className='sr-only'>{t('navigate to section label')}</span>\n                  </Button>\n                )}\n              </div>\n            </div>\n\n            {/* Main content */}\n\n            <ListItem.Heading\n              classNames={collapsed ? ['grid grid-rows-subgrid grid-cols-subgrid items-center', focusRing] : 'sr-only'}\n              {...(collapsed && { ...sectionContentGroup, tabIndex: 0 })}\n            >\n              {/*\n                TODO(thure): This needs to be made extensible; Markdown document titles especially are difficult.\n                  Using `Surface` in a UI package like this would be unprecedented and needs motivation.\n                  Refactoring to use subcomponents is complicated by sections being a sortable Mosaic Tile.\n                  Reevaluate when work on collections (Folders, Stacks, etc) settles.\n              */}\n              <span className='truncate'>{title}</span>\n            </ListItem.Heading>\n            {size === 'intrinsic' ? (\n              <CollapsiblePrimitive.Content\n                {...(!collapsed && {\n                  ...sectionContentGroup,\n                  tabIndex: 0,\n                })}\n                // TODO(burdon): Add margin to fragment?\n                className={mx(focusRing, 'm-[2px]')}\n              >\n                {children}\n              </CollapsiblePrimitive.Content>\n            ) : (\n              <CollapsiblePrimitive.Content asChild>\n                <ScrollArea.Root\n                  type='always'\n                  {...(!collapsed && { ...sectionContentGroup, tabIndex: 0 })}\n                  classNames={mx(focusRing, 'is-full has-[[data-radix-scroll-area-viewport]]:pbe-4')}\n                >\n                  <ScrollArea.Viewport>{children}</ScrollArea.Viewport>\n                  <ScrollArea.Scrollbar\n                    orientation='horizontal'\n                    variant='coarse'\n                    classNames='hidden has-[div]:flex !inline-end-[max(.25rem,var(--radix-scroll-area-corner-width))]'\n                  >\n                    <ScrollArea.Thumb />\n                  </ScrollArea.Scrollbar>\n                  <ScrollArea.Scrollbar orientation='vertical' variant='coarse' classNames='hidden has-[div]:flex'>\n                    <ScrollArea.Thumb />\n                  </ScrollArea.Scrollbar>\n                  <ScrollArea.Corner />\n                </ScrollArea.Root>\n              </CollapsiblePrimitive.Content>\n            )}\n          </div>\n          {isResizable && !collapsed && (\n            <button className={resizeHandleStyles}>\n              <span className='sr-only'>{t('resize section label')}</span>\n            </button>\n          )}\n        </ListItem.Root>\n      </CollapsiblePrimitive.Root>\n    );\n  },\n);\n\nexport type SectionToolbarProps = ThemedClassName<ComponentPropsWithRef<'div'>>;\n\n// TODO(burdon): block-start\nexport const sectionToolbarLayout =\n  'bs-[--rail-action] bg-[--sticky-bg] sticky block-start-0 __-block-start-px transition-opacity';\n\nexport const SectionToolbar = ({ children, classNames }: SectionToolbarProps) => {\n  return (\n    <Toolbar.Root orientation='horizontal' classNames={[sectionToolbarLayout, hoverableControlItem, classNames]}>\n      {children}\n    </Toolbar.Root>\n  );\n};\n\nexport const SectionTile: MosaicTileComponent<\n  StackSectionItem,\n  HTMLLIElement\n  // TODO(wittjosiah): If props is specified there is a type error with Mosaic.Container.\n  // { itemContext: StackContextValue }\n> = forwardRef(({ path, type, active, draggableStyle, draggableProps, item, itemContext }, forwardedRef) => {\n  const { t } = useTranslation(translationKey);\n  const { activeItem } = useMosaic();\n\n  const separation = !!itemContext?.separation;\n  const isResizable = !!itemContext?.isResizable;\n  const { transform, onDeleteSection, onNavigateToSection, onAddSection, onCollapseSection, SectionContent } =\n    itemContext as StackContextValue;\n\n  const transformedItem = transform\n    ? transform(\n        item,\n        // TODO(wittjosiah): `active` doesn't always seem to be accurate here.\n        activeItem?.item.id === item.id ? activeItem?.type : type,\n      )\n    : item;\n\n  const placeholder = transformedItem.metadata?.placeholder ?? ['untitled section title', { ns: translationKey }];\n  const title = transformedItem.view?.title ?? toLocalizedString(placeholder, t);\n\n  const section = (\n    <Section\n      ref={forwardedRef}\n      title={title}\n      id={transformedItem.id}\n      size={transformedItem.view?.size}\n      icon={transformedItem.metadata?.icon}\n      collapsed={transformedItem.view?.collapsed}\n      separation={separation}\n      active={active}\n      draggableProps={draggableProps}\n      draggableStyle={draggableStyle}\n      onCollapseSection={onCollapseSection}\n      isResizable={isResizable}\n      onDelete={() => onDeleteSection?.(path)}\n      onNavigate={() => onNavigateToSection?.(transformedItem)}\n      onAddAfter={() => onAddSection?.(path, 'after')}\n      onAddBefore={() => onAddSection?.(path, 'before')}\n    >\n      {SectionContent && <SectionContent data={transformedItem.object} />}\n    </Section>\n  );\n\n  return active === 'overlay' ? <List>{section}</List> : section;\n});\n", "//\n// Copyright 2024 DXOS.org\n//\nimport { type IconProps } from '@phosphor-icons/react';\nimport React from 'react';\n\nexport const CaretDownUp = ({ children, weight, ...props }: IconProps) => {\n  return (\n    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' {...props}>\n      <rect width='256' height='256' fill='none' />\n      <polyline\n        points='80 224 128 176 176 224'\n        fill='none'\n        stroke='currentColor'\n        strokeLinecap='round'\n        strokeLinejoin='round'\n        strokeWidth='16'\n      />\n      <polyline\n        points='80 32 128 80 176 32'\n        fill='none'\n        stroke='currentColor'\n        strokeLinecap='round'\n        strokeLinejoin='round'\n        strokeWidth='16'\n      />\n      {children}\n    </svg>\n  );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nexport const stackColumns = 'grid-cols-[var(--rail-size)_calc(100%-var(--rail-size))]';\n", "//\n// Copyright 2023 DXOS.org\n//\n\nexport const translationKey = 'stack';\n\nexport default [\n  {\n    'en-US': {\n      [translationKey]: {\n        'empty stack message': 'Drag items into the stack.',\n        'remove section label': 'Delete',\n        'navigate to section label': 'Navigate to item',\n        'untitled section title': 'Untitled section',\n        'add section before label': 'Add before',\n        'add section after label': 'Add after',\n        'expand label': 'Expand',\n        'collapse label': 'Collapse',\n      },\n    },\n  },\n];\n"],
+  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { useArrowNavigationGroup, useFocusableGroup } from '@fluentui/react-tabster';\nimport React, { forwardRef, useCallback } from 'react';\nimport { useResizeDetector } from 'react-resize-detector';\n\nimport { List, useTranslation } from '@dxos/react-ui';\nimport {\n  type MosaicContainerProps,\n  type MosaicTileComponent,\n  Mosaic,\n  Path,\n  useContainer,\n  useItemsWithPreview,\n  useMosaic,\n} from '@dxos/react-ui-mosaic';\nimport { dropRingInner } from '@dxos/react-ui-theme';\n\nimport {\n  type CollapsedSections,\n  type AddSectionPosition,\n  SectionTile,\n  type StackContextValue,\n  type StackItem,\n  type StackSectionContent,\n  type StackSectionItem,\n} from './Section';\nimport { stackColumns } from './style-fragments';\nimport { translationKey } from '../translations';\n\nexport type Direction = 'horizontal' | 'vertical';\n\nexport type { CollapsedSections, AddSectionPosition };\n\nexport const DEFAULT_TYPE = 'stack-section';\n\nexport type StackProps<TData extends StackSectionContent = StackSectionContent> = Omit<\n  MosaicContainerProps<TData, number>,\n  'debug' | 'Component'\n> &\n  Omit<StackContextValue<TData>, 'setCollapsedSections'> & {\n    items?: StackSectionItem[];\n    separation?: boolean; // TODO(burdon): Style.\n    onCollapseSection?: (id: string, collapsed: boolean) => void;\n    emptyComponent?: React.ReactNode;\n  };\n\nexport const Stack = ({\n  id,\n  type = DEFAULT_TYPE,\n  SectionContent,\n  items = [],\n  separation = true,\n  transform,\n  onOver,\n  onDrop,\n  onAddSection,\n  onDeleteSection,\n  onNavigateToSection,\n  onCollapseSection,\n  ...props\n}: StackProps) => {\n  const { ref: containerRef, width = 0 } = useResizeDetector<HTMLDivElement>({ refreshRate: 200 });\n  const { operation, overItem } = useMosaic();\n  const itemsWithPreview = useItemsWithPreview({ path: id, items });\n\n  const getOverlayStyle = useCallback(() => ({ width }), [width]);\n  const getOverlayProps = useCallback(\n    () => ({ itemContext: { transform, SectionContent } }),\n    [transform, SectionContent],\n  );\n\n  // TODO(thure): The root cause of the discrepancy between `activeNodeRect.top` and `overlayNodeRect.top` in Composer\n  //  in particular is not yet known, so this solution may may backfire in unforeseeable cases.\n  const stackModifier = useCallback<Exclude<MosaicContainerProps['modifier'], undefined>>(\n    (_activeItem, { transform, activeNodeRect, overlayNodeRect }) => {\n      if (activeNodeRect && overlayNodeRect) {\n        transform.y += activeNodeRect?.top - overlayNodeRect?.top;\n      }\n      return transform;\n    },\n    [],\n  );\n\n  return (\n    <Mosaic.Container\n      {...{\n        id,\n        type,\n        Component: SectionTile as MosaicTileComponent<StackSectionItem, HTMLDivElement>,\n        getOverlayStyle,\n        getOverlayProps,\n        onOver,\n        onDrop,\n        modifier: stackModifier,\n      }}\n    >\n      <Mosaic.DroppableTile\n        path={id}\n        type={type}\n        item={{ id, items: itemsWithPreview }}\n        // TODO(wittjosiah): Should this actually be a context?\n        itemContext={{\n          separation,\n          transform,\n          onDeleteSection,\n          onNavigateToSection,\n          onAddSection,\n          onCollapseSection,\n          SectionContent,\n        }}\n        isOver={\n          overItem &&\n          !!overItem.path &&\n          Path.hasRoot(overItem.path, id) &&\n          (operation === 'copy' || operation === 'transfer')\n        }\n        Component={StackTile}\n        {...props}\n        ref={containerRef}\n      />\n    </Mosaic.Container>\n  );\n};\n\nconst StackTile: MosaicTileComponent<StackItem, HTMLOListElement, Pick<StackProps, 'emptyComponent'>> = forwardRef(\n  ({ classNames, path, isOver, item: { items }, itemContext, type: _type, emptyComponent, ...props }, forwardedRef) => {\n    const { t } = useTranslation(translationKey);\n    const { Component, type } = useContainer();\n    const domAttributes = useArrowNavigationGroup({ axis: 'grid' });\n    const { activeItem } = useMosaic();\n\n    // NOTE(thure): Ensure “groupper” is available, but no need to use it here.\n    const _group = useFocusableGroup();\n\n    // NOTE: Keep outer padding the same as MarkdownMain.\n    return (\n      <List\n        ref={forwardedRef}\n        classNames={['grid relative', stackColumns, isOver && dropRingInner, classNames]}\n        {...(!activeItem && domAttributes)}\n        {...props}\n      >\n        {items.length > 0 ? (\n          <Mosaic.SortableContext items={items} direction='vertical'>\n            {items.map((item, index) => (\n              <Mosaic.SortableTile\n                key={item.id}\n                item={item}\n                itemContext={itemContext}\n                path={path}\n                type={type}\n                position={index}\n                Component={Component}\n              />\n            ))}\n          </Mosaic.SortableContext>\n        ) : emptyComponent !== undefined ? (\n          <>{emptyComponent}</>\n        ) : (\n          <p\n            className='grid col-span-2 text-center p-4 border border-dashed border-neutral-500/50 rounded'\n            data-testid='stack.empty'\n          >\n            {t('empty stack message')}\n          </p>\n        )}\n      </List>\n    );\n  },\n);\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { useFocusableGroup, useTabsterAttributes } from '@fluentui/react-tabster';\nimport {\n  ArrowLineDown,\n  ArrowLineUp,\n  ArrowSquareOut,\n  CaretUpDown,\n  DotsNine,\n  type IconProps,\n  Trash,\n} from '@phosphor-icons/react';\nimport * as CollapsiblePrimitive from '@radix-ui/react-collapsible';\nimport React, {\n  forwardRef,\n  useState,\n  type ForwardRefExoticComponent,\n  type RefAttributes,\n  type FC,\n  type PropsWithChildren,\n  type ComponentPropsWithRef,\n} from 'react';\n\nimport {\n  Button,\n  DropdownMenu,\n  type Label,\n  List,\n  ListItem,\n  ScrollArea,\n  type ThemedClassName,\n  Toolbar,\n  toLocalizedString,\n  useTranslation,\n} from '@dxos/react-ui';\nimport { createAttendableAttributes, useHasAttention } from '@dxos/react-ui-attention';\nimport { DropDownMenuDragHandleTrigger, resizeHandle, resizeHandleHorizontal } from '@dxos/react-ui-deck';\nimport {\n  type MosaicActiveType,\n  type MosaicDataItem,\n  type MosaicTileComponent,\n  type MosaicTileProps,\n  useMosaic,\n} from '@dxos/react-ui-mosaic';\nimport {\n  focusRing,\n  getSize,\n  hoverableControlItem,\n  hoverableControls,\n  hoverableFocusedWithinControls,\n  mx,\n} from '@dxos/react-ui-theme';\n\nimport { CaretDownUp } from './CaretDownUp';\nimport { stackColumns } from './style-fragments';\nimport { translationKey } from '../translations';\n\nconst sectionActionDimensions = 'p-1 shrink-0 min-bs-0 is-[--rail-action] bs-min';\n\nexport type StackSectionContent = MosaicDataItem;\n\nexport type CollapsedSections = Record<string, boolean>;\n\nexport type AddSectionPosition = 'before' | 'after' | 'beforeAll' | 'afterAll';\n\nexport type StackContextValue<TData extends StackSectionContent = StackSectionContent> = {\n  SectionContent: FC<{ data: TData }>;\n  separation?: boolean;\n  isResizable?: boolean;\n  transform?: (item: MosaicDataItem, type?: string) => StackSectionItem;\n  onDeleteSection?: (path: string) => void;\n  onAddSection?: (path: string, position: AddSectionPosition) => void;\n  onNavigateToSection?: (object: MosaicDataItem) => void;\n  onCollapseSection?: (id: string, collapsed: boolean) => void;\n};\n\nexport type StackItem = MosaicDataItem & {\n  items: StackSectionItem[];\n};\n\nexport type StackSectionItem = MosaicDataItem & {\n  object: StackSectionContent;\n  // TODO(wittjosiah): Use effect schema? Share schema with echo.\n  view?: {\n    title?: string;\n    size?: SectionSize;\n    height?: number;\n    collapsed?: boolean;\n    custom?: Record<string, any>;\n  };\n  // TODO(wittjosiah): Common type? Factor out?\n  metadata?: {\n    icon?: FC<IconProps>;\n    placeholder?: Label;\n    viewActions?: (item: StackSectionItem) => StackAction;\n  };\n};\n\nexport type StackAction = {\n  icon: FC<IconProps>;\n  label: Label;\n  onClick: () => void;\n};\n\nexport type SectionSize = 'intrinsic' | 'extrinsic';\n\nexport type SectionProps = PropsWithChildren<\n  {\n    // Data props.\n    id: string;\n    title: string;\n\n    // Tile props.\n    active?: MosaicActiveType;\n  } & Pick<\n    MosaicTileProps,\n    'draggableProps' | 'draggableStyle' | 'onDelete' | 'onNavigate' | 'onAddAfter' | 'onAddBefore'\n  > &\n    Pick<StackContextValue, 'separation' | 'isResizable' | 'onCollapseSection'> &\n    Pick<Required<StackSectionItem>['view'], 'collapsed' | 'size'> &\n    Pick<Required<StackSectionItem>['metadata'], 'icon'>\n>;\n\nconst resizeHandleStyles = mx(resizeHandle, resizeHandleHorizontal, 'is-full bs-[--rail-action] col-start-2');\n\nexport const Section: ForwardRefExoticComponent<SectionProps & RefAttributes<HTMLLIElement>> = forwardRef<\n  HTMLLIElement,\n  SectionProps\n>(\n  (\n    {\n      id,\n      title,\n      icon: Icon = DotsNine,\n      size = 'intrinsic',\n      collapsed,\n      active,\n      isResizable,\n      draggableProps,\n      draggableStyle,\n      onDelete,\n      onNavigate,\n      onAddBefore,\n      onAddAfter,\n      onCollapseSection,\n      children,\n    },\n    forwardedRef,\n  ) => {\n    const { t } = useTranslation(translationKey);\n    const [optionsMenuOpen, setOptionsMenuOpen] = useState(false);\n    const sectionActionsToolbar = useTabsterAttributes({\n      groupper: {},\n      focusable: {},\n      mover: { cyclic: true, direction: 1, memorizeCurrent: false },\n    });\n    const sectionContentGroup = useFocusableGroup({});\n    const attendableAttrs = createAttendableAttributes(id);\n    const attended = useHasAttention(id);\n\n    return (\n      <CollapsiblePrimitive.Root\n        asChild\n        open={!collapsed}\n        onOpenChange={(nextOpen) => onCollapseSection?.(id, !nextOpen)}\n      >\n        <ListItem.Root\n          ref={forwardedRef}\n          id={id}\n          {...attendableAttrs}\n          classNames={[\n            'grid col-span-2 group/section',\n            active === 'overlay' ? stackColumns : 'grid-cols-subgrid snap-start',\n          ]}\n          style={draggableStyle}\n        >\n          <div\n            role='none'\n            className={mx(\n              'grid col-span-2 grid-cols-subgrid',\n              'bg-base focus-within:border-separator focus-within:bg-attention',\n              hoverableControls,\n              hoverableFocusedWithinControls,\n              (active || attended) && 'bg-attention border-separator',\n              (active === 'origin' || active === 'rearrange' || active === 'destination') && 'opacity-0',\n            )}\n          >\n            <div\n              role='toolbar'\n              aria-orientation='vertical'\n              aria-label={t('section controls label')}\n              {...(!active && { tabIndex: 0 })}\n              {...(!active && sectionActionsToolbar)}\n              className={mx(\n                'grid grid-cols-subgrid ch-focus-ring rounded-sm grid-rows-[min-content_min-content_1fr] m-1',\n                'group-has-[[role=toolbar][aria-orientation=horizontal]]/section:pbs-[--rail-action]',\n              )}\n            >\n              <div role='none' className='sticky -block-start-px bg-[--sticky-bg]'>\n                <DropdownMenu.Root\n                  {...{\n                    open: optionsMenuOpen,\n                    onOpenChange: setOptionsMenuOpen,\n                  }}\n                >\n                  <DropDownMenuDragHandleTrigger active={!!active} variant='ghost' classNames='m-0' {...draggableProps}>\n                    <Icon className={mx(getSize(5), 'transition-opacity')} />\n                  </DropDownMenuDragHandleTrigger>\n                  <DropdownMenu.Portal>\n                    <DropdownMenu.Content>\n                      <DropdownMenu.Viewport>\n                        {collapsed ? (\n                          <DropdownMenu.Item onClick={onNavigate} data-testid='section.navigate-to'>\n                            <ArrowSquareOut className={mx(getSize(5), 'mr-2')} />\n                            <span className='grow'>{t('navigate to section label')}</span>\n                          </DropdownMenu.Item>\n                        ) : (\n                          <CollapsiblePrimitive.Trigger asChild>\n                            <DropdownMenu.Item>\n                              <CaretDownUp className={mx(getSize(5), 'mr-2')} />\n                              <span className='grow'>{t('collapse label')}</span>\n                            </DropdownMenu.Item>\n                          </CollapsiblePrimitive.Trigger>\n                        )}\n                        <DropdownMenu.Item onClick={onAddBefore} data-testid='section.add-before'>\n                          <ArrowLineUp className={mx(getSize(5), 'mr-2')} />\n                          <span className='grow'>{t('add section before label')}</span>\n                        </DropdownMenu.Item>\n                        <DropdownMenu.Item onClick={onAddAfter} data-testid='section.add-after'>\n                          <ArrowLineDown className={mx(getSize(5), 'mr-2')} />\n                          <span className='grow'>{t('add section after label')}</span>\n                        </DropdownMenu.Item>\n                        <DropdownMenu.Item onClick={() => onDelete?.()} data-testid='section.remove'>\n                          <Trash className={mx(getSize(5), 'mr-2')} />\n                          <span className='grow'>{t('remove section label')}</span>\n                        </DropdownMenu.Item>\n                      </DropdownMenu.Viewport>\n                      <DropdownMenu.Arrow />\n                    </DropdownMenu.Content>\n                  </DropdownMenu.Portal>\n                </DropdownMenu.Root>\n                {collapsed ? (\n                  <CollapsiblePrimitive.Trigger asChild>\n                    <Button variant='ghost' classNames={sectionActionDimensions}>\n                      <span className='sr-only'>{t('expand label')}</span>\n                      <CaretUpDown className={getSize(4)} />\n                    </Button>\n                  </CollapsiblePrimitive.Trigger>\n                ) : (\n                  <Button\n                    variant='ghost'\n                    classNames={sectionActionDimensions}\n                    onClick={onNavigate}\n                    data-testid='section.navigate-to'\n                  >\n                    <ArrowSquareOut className={mx(getSize(4))} />\n                    <span className='sr-only'>{t('navigate to section label')}</span>\n                  </Button>\n                )}\n              </div>\n            </div>\n\n            {/* Main content */}\n\n            <ListItem.Heading\n              classNames={collapsed ? ['grid grid-rows-subgrid grid-cols-subgrid items-center', focusRing] : 'sr-only'}\n              {...(collapsed && { ...sectionContentGroup, tabIndex: 0 })}\n            >\n              {/*\n                TODO(thure): This needs to be made extensible; Markdown document titles especially are difficult.\n                  Using `Surface` in a UI package like this would be unprecedented and needs motivation.\n                  Refactoring to use subcomponents is complicated by sections being a sortable Mosaic Tile.\n                  Reevaluate when work on collections (Folders, Stacks, etc) settles.\n              */}\n              <span className='truncate'>{title}</span>\n            </ListItem.Heading>\n            {size === 'intrinsic' ? (\n              <CollapsiblePrimitive.Content\n                {...(!collapsed && {\n                  ...sectionContentGroup,\n                  tabIndex: 0,\n                })}\n                // TODO(burdon): Add margin to fragment?\n                className={mx(focusRing, 'm-[2px]')}\n              >\n                {children}\n              </CollapsiblePrimitive.Content>\n            ) : (\n              <CollapsiblePrimitive.Content asChild>\n                <ScrollArea.Root\n                  type='always'\n                  {...(!collapsed && { ...sectionContentGroup, tabIndex: 0 })}\n                  classNames={mx(focusRing, 'is-full has-[[data-radix-scroll-area-viewport]]:pbe-4')}\n                >\n                  <ScrollArea.Viewport>{children}</ScrollArea.Viewport>\n                  <ScrollArea.Scrollbar\n                    orientation='horizontal'\n                    variant='coarse'\n                    classNames='hidden has-[div]:flex !inline-end-[max(.25rem,var(--radix-scroll-area-corner-width))]'\n                  >\n                    <ScrollArea.Thumb />\n                  </ScrollArea.Scrollbar>\n                  <ScrollArea.Scrollbar orientation='vertical' variant='coarse' classNames='hidden has-[div]:flex'>\n                    <ScrollArea.Thumb />\n                  </ScrollArea.Scrollbar>\n                  <ScrollArea.Corner />\n                </ScrollArea.Root>\n              </CollapsiblePrimitive.Content>\n            )}\n          </div>\n          {isResizable && !collapsed && (\n            <button className={resizeHandleStyles}>\n              <span className='sr-only'>{t('resize section label')}</span>\n            </button>\n          )}\n        </ListItem.Root>\n      </CollapsiblePrimitive.Root>\n    );\n  },\n);\n\nexport type SectionToolbarProps = ThemedClassName<ComponentPropsWithRef<'div'>>;\n\n// TODO(burdon): block-start\nexport const sectionToolbarLayout =\n  'bs-[--rail-action] bg-[--sticky-bg] sticky block-start-0 __-block-start-px transition-opacity';\n\nexport const SectionToolbar = ({ children, classNames }: SectionToolbarProps) => {\n  return (\n    <Toolbar.Root orientation='horizontal' classNames={[sectionToolbarLayout, hoverableControlItem, classNames]}>\n      {children}\n    </Toolbar.Root>\n  );\n};\n\nexport const SectionTile: MosaicTileComponent<\n  StackSectionItem,\n  HTMLLIElement\n  // TODO(wittjosiah): If props is specified there is a type error with Mosaic.Container.\n  // { itemContext: StackContextValue }\n> = forwardRef(({ path, type, active, draggableStyle, draggableProps, item, itemContext }, forwardedRef) => {\n  const { t } = useTranslation(translationKey);\n  const { activeItem } = useMosaic();\n\n  const separation = !!itemContext?.separation;\n  const isResizable = !!itemContext?.isResizable;\n  const { transform, onDeleteSection, onNavigateToSection, onAddSection, onCollapseSection, SectionContent } =\n    itemContext as StackContextValue;\n\n  const transformedItem = transform\n    ? transform(\n        item,\n        // TODO(wittjosiah): `active` doesn't always seem to be accurate here.\n        activeItem?.item.id === item.id ? activeItem?.type : type,\n      )\n    : item;\n\n  const placeholder = transformedItem.metadata?.placeholder ?? ['untitled section title', { ns: translationKey }];\n  const title = transformedItem.view?.title ?? toLocalizedString(placeholder, t);\n\n  const section = (\n    <Section\n      ref={forwardedRef}\n      title={title}\n      id={transformedItem.id}\n      size={transformedItem.view?.size}\n      icon={transformedItem.metadata?.icon}\n      collapsed={transformedItem.view?.collapsed}\n      separation={separation}\n      active={active}\n      draggableProps={draggableProps}\n      draggableStyle={draggableStyle}\n      onCollapseSection={onCollapseSection}\n      isResizable={isResizable}\n      onDelete={() => onDeleteSection?.(path)}\n      onNavigate={() => onNavigateToSection?.(transformedItem)}\n      onAddAfter={() => onAddSection?.(path, 'after')}\n      onAddBefore={() => onAddSection?.(path, 'before')}\n    >\n      {SectionContent && <SectionContent data={transformedItem.object} />}\n    </Section>\n  );\n\n  return active === 'overlay' ? <List>{section}</List> : section;\n});\n", "//\n// Copyright 2024 DXOS.org\n//\nimport { type IconProps } from '@phosphor-icons/react';\nimport React from 'react';\n\nexport const CaretDownUp = ({ children, weight, ...props }: IconProps) => {\n  return (\n    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' {...props}>\n      <rect width='256' height='256' fill='none' />\n      <polyline\n        points='80 224 128 176 176 224'\n        fill='none'\n        stroke='currentColor'\n        strokeLinecap='round'\n        strokeLinejoin='round'\n        strokeWidth='16'\n      />\n      <polyline\n        points='80 32 128 80 176 32'\n        fill='none'\n        stroke='currentColor'\n        strokeLinecap='round'\n        strokeLinejoin='round'\n        strokeWidth='16'\n      />\n      {children}\n    </svg>\n  );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nexport const stackColumns = 'grid-cols-[var(--rail-size)_calc(100%-var(--rail-size))]';\n", "//\n// Copyright 2023 DXOS.org\n//\n\nexport const translationKey = 'stack';\n\nexport default [\n  {\n    'en-US': {\n      [translationKey]: {\n        'empty stack message': 'Drag items into the stack.',\n        'remove section label': 'Delete',\n        'navigate to section label': 'Navigate to item',\n        'untitled section title': 'Untitled section',\n        'add section before label': 'Add before',\n        'add section after label': 'Add after',\n        'expand label': 'Expand',\n        'collapse label': 'Collapse',\n      },\n    },\n  },\n];\n"],
   "mappings": "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",
-  "names": ["import_react_tabster", "import_react", "import_react_ui", "import_react_ui_mosaic", "import_react_ui_theme", "CaretDownUp", "children", "weight", "props", "React", "svg", "xmlns", "viewBox", "rect", "width", "height", "fill", "polyline", "points", "stroke", "strokeLinecap", "strokeLinejoin", "strokeWidth", "stackColumns", "translationKey", "sectionActionDimensions", "resizeHandleStyles", "mx", "resizeHandle", "resizeHandleHorizontal", "Section", "forwardRef", "id", "title", "icon", "Icon", "DotsNine", "size", "collapsed", "active", "isResizable", "draggableProps", "draggableStyle", "onDelete", "onNavigate", "onAddBefore", "onAddAfter", "onCollapseSection", "forwardedRef", "t", "useTranslation", "optionsMenuOpen", "setOptionsMenuOpen", "useState", "sectionActionsToolbar", "useTabsterAttributes", "groupper", "focusable", "mover", "cyclic", "direction", "memorizeCurrent", "sectionContentGroup", "useFocusableGroup", "attendableProps", "createAttendableAttributes", "attended", "useHasAttention", "Root", "asChild", "open", "onOpenChange", "nextOpen", "ListItem", "ref", "classNames", "style", "div", "role", "className", "hoverableControls", "hoverableFocusedWithinControls", "aria-orientation", "aria-label", "tabIndex", "DropdownMenu", "DropDownMenuDragHandleTrigger", "variant", "getSize", "Portal", "Content", "Viewport", "Item", "onClick", "data-testid", "ArrowSquareOut", "span", "Trigger", "ArrowLineUp", "ArrowLineDown", "Trash", "Arrow", "Button", "CaretUpDown", "Heading", "focusRing", "ScrollArea", "type", "Scrollbar", "orientation", "Thumb", "Corner", "button", "sectionToolbarLayout", "SectionToolbar", "Toolbar", "hoverableControlItem", "SectionTile", "path", "item", "itemContext", "activeItem", "useMosaic", "separation", "transform", "onDeleteSection", "onNavigateToSection", "onAddSection", "SectionContent", "transformedItem", "placeholder", "metadata", "ns", "view", "toLocalizedString", "section", "data", "object", "List", "DEFAULT_TYPE", "Stack", "items", "onOver", "onDrop", "containerRef", "useResizeDetector", "refreshRate", "operation", "overItem", "itemsWithPreview", "useItemsWithPreview", "getOverlayStyle", "useCallback", "getOverlayProps", "stackModifier", "_activeItem", "activeNodeRect", "overlayNodeRect", "y", "top", "Mosaic", "Container", "Component", "modifier", "DroppableTile", "isOver", "Path", "hasRoot", "StackTile", "_type", "emptyComponent", "useContainer", "domAttributes", "useArrowNavigationGroup", "axis", "_group", "dropRingInner", "length", "SortableContext", "map", "index", "SortableTile", "key", "position", "undefined", "p"]
+  "names": ["import_react_tabster", "import_react", "import_react_ui", "import_react_ui_mosaic", "import_react_ui_theme", "CaretDownUp", "children", "weight", "props", "React", "svg", "xmlns", "viewBox", "rect", "width", "height", "fill", "polyline", "points", "stroke", "strokeLinecap", "strokeLinejoin", "strokeWidth", "stackColumns", "translationKey", "sectionActionDimensions", "resizeHandleStyles", "mx", "resizeHandle", "resizeHandleHorizontal", "Section", "forwardRef", "id", "title", "icon", "Icon", "DotsNine", "size", "collapsed", "active", "isResizable", "draggableProps", "draggableStyle", "onDelete", "onNavigate", "onAddBefore", "onAddAfter", "onCollapseSection", "forwardedRef", "t", "useTranslation", "optionsMenuOpen", "setOptionsMenuOpen", "useState", "sectionActionsToolbar", "useTabsterAttributes", "groupper", "focusable", "mover", "cyclic", "direction", "memorizeCurrent", "sectionContentGroup", "useFocusableGroup", "attendableAttrs", "createAttendableAttributes", "attended", "useHasAttention", "Root", "asChild", "open", "onOpenChange", "nextOpen", "ListItem", "ref", "classNames", "style", "div", "role", "className", "hoverableControls", "hoverableFocusedWithinControls", "aria-orientation", "aria-label", "tabIndex", "DropdownMenu", "DropDownMenuDragHandleTrigger", "variant", "getSize", "Portal", "Content", "Viewport", "Item", "onClick", "data-testid", "ArrowSquareOut", "span", "Trigger", "ArrowLineUp", "ArrowLineDown", "Trash", "Arrow", "Button", "CaretUpDown", "Heading", "focusRing", "ScrollArea", "type", "Scrollbar", "orientation", "Thumb", "Corner", "button", "sectionToolbarLayout", "SectionToolbar", "Toolbar", "hoverableControlItem", "SectionTile", "path", "item", "itemContext", "activeItem", "useMosaic", "separation", "transform", "onDeleteSection", "onNavigateToSection", "onAddSection", "SectionContent", "transformedItem", "placeholder", "metadata", "ns", "view", "toLocalizedString", "section", "data", "object", "List", "DEFAULT_TYPE", "Stack", "items", "onOver", "onDrop", "containerRef", "useResizeDetector", "refreshRate", "operation", "overItem", "itemsWithPreview", "useItemsWithPreview", "getOverlayStyle", "useCallback", "getOverlayProps", "stackModifier", "_activeItem", "activeNodeRect", "overlayNodeRect", "y", "top", "Mosaic", "Container", "Component", "modifier", "DroppableTile", "isOver", "Path", "hasRoot", "StackTile", "_type", "emptyComponent", "useContainer", "domAttributes", "useArrowNavigationGroup", "axis", "_group", "dropRingInner", "length", "SortableContext", "map", "index", "SortableTile", "key", "position", "undefined", "p"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-stack",
-  "version": "0.6.10-main.e92b5eb",
+  "version": "0.6.10-staging.7621a6e",
   "description": "A stack component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -43,11 +43,11 @@
     "@radix-ui/react-menu": "^2.0.6",
     "@radix-ui/react-use-controllable-state": "^1.0.0",
     "react-resize-detector": "^11.0.1",
-    "@dxos/react-ui-attention": "0.6.10-main.e92b5eb",
-    "@dxos/react-ui": "0.6.10-main.e92b5eb",
-    "@dxos/react-ui-deck": "0.6.10-main.e92b5eb",
-    "@dxos/react-ui-theme": "0.6.10-main.e92b5eb",
-    "@dxos/react-ui-mosaic": "0.6.10-main.e92b5eb"
+    "@dxos/react-ui": "0.6.10-staging.7621a6e",
+    "@dxos/react-ui-deck": "0.6.10-staging.7621a6e",
+    "@dxos/react-ui-attention": "0.6.10-staging.7621a6e",
+    "@dxos/react-ui-mosaic": "0.6.10-staging.7621a6e",
+    "@dxos/react-ui-theme": "0.6.10-staging.7621a6e"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -56,21 +56,21 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "^5.3.4",
-    "@dxos/client": "0.6.10-main.e92b5eb",
-    "@dxos/echo-schema": "0.6.10-main.e92b5eb",
-    "@dxos/random": "0.6.10-main.e92b5eb",
-    "@dxos/react-ui-editor": "0.6.10-main.e92b5eb",
-    "@dxos/react-ui-table": "0.6.10-main.e92b5eb",
-    "@dxos/util": "0.6.10-main.e92b5eb",
-    "@dxos/storybook-utils": "0.6.10-main.e92b5eb"
+    "@dxos/client": "0.6.10-staging.7621a6e",
+    "@dxos/echo-schema": "0.6.10-staging.7621a6e",
+    "@dxos/random": "0.6.10-staging.7621a6e",
+    "@dxos/react-ui-editor": "0.6.10-staging.7621a6e",
+    "@dxos/storybook-utils": "0.6.10-staging.7621a6e",
+    "@dxos/react-ui-table": "0.6.10-staging.7621a6e",
+    "@dxos/util": "0.6.10-staging.7621a6e"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "@dxos/client": "0.6.10-main.e92b5eb",
-    "@dxos/random": "0.6.10-main.e92b5eb",
-    "@dxos/echo-schema": "0.6.10-main.e92b5eb"
+    "@dxos/client": "0.6.10-staging.7621a6e",
+    "@dxos/echo-schema": "0.6.10-staging.7621a6e",
+    "@dxos/random": "0.6.10-staging.7621a6e"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Section.tsx

@@ -157,7 +157,7 @@ export const Section: ForwardRefExoticComponent<SectionProps & RefAttributes<HTM
       mover: { cyclic: true, direction: 1, memorizeCurrent: false },
     });
     const sectionContentGroup = useFocusableGroup({});
-    const attendableProps = createAttendableAttributes(id);
+    const attendableAttrs = createAttendableAttributes(id);
     const attended = useHasAttention(id);
 
     return (
@@ -169,7 +169,7 @@ export const Section: ForwardRefExoticComponent<SectionProps & RefAttributes<HTM
         <ListItem.Root
           ref={forwardedRef}
           id={id}
-          {...attendableProps}
+          {...attendableAttrs}
           classNames={[
             'grid col-span-2 group/section',
             active === 'overlay' ? stackColumns : 'grid-cols-subgrid snap-start',

package/dist/types/src/testing/decorators.d.ts

@@ -1,7 +0,0 @@
-import { type DecoratorFunction } from '@storybook/csf';
-import { type ReactRenderer } from '@storybook/react';
-/**
- * @deprecated
- */
-export declare const FullscreenDecorator: (className?: string) => DecoratorFunction<ReactRenderer>;
-//# sourceMappingURL=decorators.d.ts.map

package/dist/types/src/testing/decorators.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"decorators.d.ts","sourceRoot":"","sources":["../../../../src/testing/decorators.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAMtD;;GAEG;AAEH,eAAO,MAAM,mBAAmB,eAAgB,MAAM,KAAG,iBAAiB,CAAC,aAAa,CAQvF,CAAC"}

package/src/testing/decorators.tsx

@@ -1,24 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type DecoratorFunction } from '@storybook/csf';
-import { type ReactRenderer } from '@storybook/react';
-import React from 'react';
-
-import { DensityProvider } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
-
-/**
- * @deprecated
- */
-// TODO(wittjosiah): Remove.
-export const FullscreenDecorator = (className?: string): DecoratorFunction<ReactRenderer> => {
-  return (Story) => (
-    <div className={mx('flex fixed inset-0 overflow-hidden', className)}>
-      <DensityProvider density='fine'>
-        <Story />
-      </DensityProvider>
-    </div>
-  );
-};