@dxos/react-ui-stack 0.6.13 → 0.6.14-main.69511f5

package/dist/lib/node-esm/index.mjs

@@ -0,0 +1,378 @@
+import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
+
+// packages/ui/react-ui-stack/src/components/Stack.tsx
+import { useArrowNavigationGroup, useFocusableGroup as useFocusableGroup2 } from "@fluentui/react-tabster";
+import React3, { forwardRef as forwardRef2, useCallback } from "react";
+import { useResizeDetector } from "react-resize-detector";
+import { List as List2, useTranslation as useTranslation2 } from "@dxos/react-ui";
+import { Mosaic, Path, useContainer, useItemsWithPreview, useMosaic as useMosaic2 } from "@dxos/react-ui-mosaic";
+import { dropRingInner } from "@dxos/react-ui-theme";
+
+// packages/ui/react-ui-stack/src/components/Section.tsx
+import { useFocusableGroup, useTabsterAttributes } from "@fluentui/react-tabster";
+import { ArrowLineDown, ArrowLineUp, ArrowSquareOut, CaretUpDown, Trash } from "@phosphor-icons/react";
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import React2, { forwardRef, useState } from "react";
+import { Button, DropdownMenu, Icon, List, ListItem, ScrollArea, Toolbar, toLocalizedString, useTranslation } from "@dxos/react-ui";
+import { useAttendableAttributes } from "@dxos/react-ui-attention";
+import { DropDownMenuDragHandleTrigger, resizeHandle, resizeHandleHorizontal } from "@dxos/react-ui-deck";
+import { useMosaic } from "@dxos/react-ui-mosaic";
+import { focusRing, getSize, hoverableControlItem, hoverableControls, hoverableFocusedWithinControls, mx } from "@dxos/react-ui-theme";
+
+// packages/ui/react-ui-stack/src/components/CaretDownUp.tsx
+import React from "react";
+var CaretDownUp = ({ children, weight, ...props }) => {
+  return /* @__PURE__ */ React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 256 256",
+    ...props
+  }, /* @__PURE__ */ React.createElement("rect", {
+    width: "256",
+    height: "256",
+    fill: "none"
+  }), /* @__PURE__ */ React.createElement("polyline", {
+    points: "80 224 128 176 176 224",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "16"
+  }), /* @__PURE__ */ React.createElement("polyline", {
+    points: "80 32 128 80 176 32",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "16"
+  }), children);
+};
+
+// packages/ui/react-ui-stack/src/components/style-fragments.ts
+var stackColumns = "grid-cols-[var(--rail-size)_calc(100%-var(--rail-size))]";
+
+// packages/ui/react-ui-stack/src/translations.ts
+var translationKey = "stack";
+var translations_default = [
+  {
+    "en-US": {
+      [translationKey]: {
+        "empty stack message": "Drag items into the stack.",
+        "remove section label": "Delete",
+        "navigate to section label": "Navigate to item",
+        "untitled section title": "Untitled section",
+        "add section before label": "Add before",
+        "add section after label": "Add after",
+        "expand label": "Expand",
+        "collapse label": "Collapse"
+      }
+    }
+  }
+];
+
+// packages/ui/react-ui-stack/src/components/Section.tsx
+var sectionActionDimensions = "p-1 shrink-0 min-bs-0 is-[--rail-action] bs-min";
+var resizeHandleStyles = mx(resizeHandle, resizeHandleHorizontal, "is-full bs-[--rail-action] col-start-2");
+var Section = /* @__PURE__ */ forwardRef(({ id, title, icon = "ph--placeholder--regular", size = "intrinsic", collapsed, active, isResizable, draggableProps, draggableStyle, onDelete, onNavigate, onAddBefore, onAddAfter, onCollapseSection, children }, forwardedRef) => {
+  const { t } = useTranslation(translationKey);
+  const [optionsMenuOpen, setOptionsMenuOpen] = useState(false);
+  const sectionActionsToolbar = useTabsterAttributes({
+    groupper: {},
+    focusable: {},
+    mover: {
+      cyclic: true,
+      direction: 1,
+      memorizeCurrent: false
+    }
+  });
+  const sectionContentGroup = useFocusableGroup({});
+  const attendableAttrs = useAttendableAttributes(id);
+  return /* @__PURE__ */ React2.createElement(CollapsiblePrimitive.Root, {
+    asChild: true,
+    open: !collapsed,
+    onOpenChange: (nextOpen) => onCollapseSection?.(id, !nextOpen)
+  }, /* @__PURE__ */ React2.createElement(ListItem.Root, {
+    ref: forwardedRef,
+    id,
+    ...attendableAttrs,
+    classNames: [
+      "grid col-span-2 group/section",
+      active === "overlay" ? stackColumns : "grid-cols-subgrid snap-start"
+    ],
+    style: draggableStyle
+  }, /* @__PURE__ */ React2.createElement("div", {
+    role: "none",
+    className: mx("grid col-span-2 grid-cols-subgrid", "bg-base attention-surface", hoverableControls, hoverableFocusedWithinControls, (active === "origin" || active === "rearrange" || active === "destination") && "opacity-0")
+  }, /* @__PURE__ */ React2.createElement("div", {
+    role: "toolbar",
+    "aria-orientation": "vertical",
+    "aria-label": t("section controls label"),
+    ...!active && {
+      tabIndex: 0
+    },
+    ...!active && sectionActionsToolbar,
+    className: mx("grid grid-cols-subgrid ch-focus-ring rounded-sm grid-rows-[min-content_min-content_1fr] m-1", "group-has-[[role=toolbar][aria-orientation=horizontal]]/section:pbs-[--rail-action]")
+  }, /* @__PURE__ */ React2.createElement("div", {
+    role: "none",
+    className: "sticky -block-start-px bg-[--sticky-bg]"
+  }, /* @__PURE__ */ React2.createElement(DropdownMenu.Root, {
+    open: optionsMenuOpen,
+    onOpenChange: setOptionsMenuOpen
+  }, /* @__PURE__ */ React2.createElement(DropDownMenuDragHandleTrigger, {
+    active: !!active,
+    variant: "ghost",
+    classNames: "m-0",
+    ...draggableProps
+  }, /* @__PURE__ */ React2.createElement(Icon, {
+    icon,
+    size: 5,
+    classNames: "transition-opacity"
+  })), /* @__PURE__ */ React2.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Viewport, null, collapsed ? /* @__PURE__ */ React2.createElement(DropdownMenu.Item, {
+    onClick: onNavigate,
+    "data-testid": "section.navigate-to"
+  }, /* @__PURE__ */ React2.createElement(ArrowSquareOut, {
+    className: mx(getSize(5), "mr-2")
+  }), /* @__PURE__ */ React2.createElement("span", {
+    className: "grow"
+  }, t("navigate to section label"))) : /* @__PURE__ */ React2.createElement(CollapsiblePrimitive.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React2.createElement(DropdownMenu.Item, null, /* @__PURE__ */ React2.createElement(CaretDownUp, {
+    className: mx(getSize(5), "mr-2")
+  }), /* @__PURE__ */ React2.createElement("span", {
+    className: "grow"
+  }, t("collapse label")))), /* @__PURE__ */ React2.createElement(DropdownMenu.Item, {
+    onClick: onAddBefore,
+    "data-testid": "section.add-before"
+  }, /* @__PURE__ */ React2.createElement(ArrowLineUp, {
+    className: mx(getSize(5), "mr-2")
+  }), /* @__PURE__ */ React2.createElement("span", {
+    className: "grow"
+  }, t("add section before label"))), /* @__PURE__ */ React2.createElement(DropdownMenu.Item, {
+    onClick: onAddAfter,
+    "data-testid": "section.add-after"
+  }, /* @__PURE__ */ React2.createElement(ArrowLineDown, {
+    className: mx(getSize(5), "mr-2")
+  }), /* @__PURE__ */ React2.createElement("span", {
+    className: "grow"
+  }, t("add section after label"))), /* @__PURE__ */ React2.createElement(DropdownMenu.Item, {
+    onClick: () => onDelete?.(),
+    "data-testid": "section.remove"
+  }, /* @__PURE__ */ React2.createElement(Trash, {
+    className: mx(getSize(5), "mr-2")
+  }), /* @__PURE__ */ React2.createElement("span", {
+    className: "grow"
+  }, t("remove section label")))), /* @__PURE__ */ React2.createElement(DropdownMenu.Arrow, null)))), collapsed ? /* @__PURE__ */ React2.createElement(CollapsiblePrimitive.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React2.createElement(Button, {
+    variant: "ghost",
+    classNames: sectionActionDimensions
+  }, /* @__PURE__ */ React2.createElement("span", {
+    className: "sr-only"
+  }, t("expand label")), /* @__PURE__ */ React2.createElement(CaretUpDown, {
+    className: getSize(4)
+  }))) : /* @__PURE__ */ React2.createElement(Button, {
+    variant: "ghost",
+    classNames: sectionActionDimensions,
+    onClick: onNavigate,
+    "data-testid": "section.navigate-to"
+  }, /* @__PURE__ */ React2.createElement(ArrowSquareOut, {
+    className: mx(getSize(4))
+  }), /* @__PURE__ */ React2.createElement("span", {
+    className: "sr-only"
+  }, t("navigate to section label"))))), /* @__PURE__ */ React2.createElement(ListItem.Heading, {
+    classNames: collapsed ? [
+      "grid grid-rows-subgrid grid-cols-subgrid items-center",
+      focusRing
+    ] : "sr-only",
+    ...collapsed && {
+      ...sectionContentGroup,
+      tabIndex: 0
+    }
+  }, /* @__PURE__ */ React2.createElement("span", {
+    className: "truncate"
+  }, title)), size === "intrinsic" ? /* @__PURE__ */ React2.createElement(CollapsiblePrimitive.Content, {
+    ...!collapsed && {
+      ...sectionContentGroup,
+      tabIndex: 0
+    },
+    // TODO(burdon): Add margin to fragment?
+    className: mx(focusRing, "m-[2px]")
+  }, children) : /* @__PURE__ */ React2.createElement(CollapsiblePrimitive.Content, {
+    asChild: true
+  }, /* @__PURE__ */ React2.createElement(ScrollArea.Root, {
+    type: "always",
+    ...!collapsed && {
+      ...sectionContentGroup,
+      tabIndex: 0
+    },
+    classNames: mx(focusRing, "is-full has-[[data-radix-scroll-area-viewport]]:pbe-4")
+  }, /* @__PURE__ */ React2.createElement(ScrollArea.Viewport, null, children), /* @__PURE__ */ React2.createElement(ScrollArea.Scrollbar, {
+    orientation: "horizontal",
+    variant: "coarse",
+    classNames: "hidden has-[div]:flex !inline-end-[max(.25rem,var(--radix-scroll-area-corner-width))]"
+  }, /* @__PURE__ */ React2.createElement(ScrollArea.Thumb, null)), /* @__PURE__ */ React2.createElement(ScrollArea.Scrollbar, {
+    orientation: "vertical",
+    variant: "coarse",
+    classNames: "hidden has-[div]:flex"
+  }, /* @__PURE__ */ React2.createElement(ScrollArea.Thumb, null)), /* @__PURE__ */ React2.createElement(ScrollArea.Corner, null)))), isResizable && !collapsed && /* @__PURE__ */ React2.createElement("button", {
+    className: resizeHandleStyles
+  }, /* @__PURE__ */ React2.createElement("span", {
+    className: "sr-only"
+  }, t("resize section label")))));
+});
+var sectionToolbarLayout = "bs-[--rail-action] bg-[--sticky-bg] sticky block-start-0 __-block-start-px transition-opacity";
+var SectionToolbar = ({ children, classNames }) => {
+  return /* @__PURE__ */ React2.createElement(Toolbar.Root, {
+    orientation: "horizontal",
+    classNames: [
+      sectionToolbarLayout,
+      hoverableControlItem,
+      classNames
+    ]
+  }, children);
+};
+var SectionTile = /* @__PURE__ */ forwardRef(({ path, type, active, draggableStyle, draggableProps, item, itemContext }, forwardedRef) => {
+  const { t } = useTranslation(translationKey);
+  const { activeItem } = useMosaic();
+  const separation = !!itemContext?.separation;
+  const isResizable = !!itemContext?.isResizable;
+  const { transform, onDeleteSection, onNavigateToSection, onAddSection, onCollapseSection, SectionContent } = itemContext;
+  const transformedItem = transform ? transform(
+    item,
+    // TODO(wittjosiah): `active` doesn't always seem to be accurate here.
+    activeItem?.item.id === item.id ? activeItem?.type : type
+  ) : item;
+  const placeholder = transformedItem.metadata?.placeholder ?? [
+    "untitled section title",
+    {
+      ns: translationKey
+    }
+  ];
+  const title = transformedItem.view?.title ?? toLocalizedString(placeholder, t);
+  const section = /* @__PURE__ */ React2.createElement(Section, {
+    ref: forwardedRef,
+    title,
+    id: transformedItem.id,
+    size: transformedItem.view?.size,
+    icon: transformedItem.metadata?.icon,
+    collapsed: transformedItem.view?.collapsed,
+    separation,
+    active,
+    draggableProps,
+    draggableStyle,
+    onCollapseSection,
+    isResizable,
+    onDelete: () => onDeleteSection?.(path),
+    onNavigate: () => onNavigateToSection?.(transformedItem),
+    onAddAfter: () => onAddSection?.(path, "after"),
+    onAddBefore: () => onAddSection?.(path, "before")
+  }, SectionContent && /* @__PURE__ */ React2.createElement(SectionContent, {
+    data: transformedItem.object
+  }));
+  return active === "overlay" ? /* @__PURE__ */ React2.createElement(List, null, section) : section;
+});
+
+// packages/ui/react-ui-stack/src/components/Stack.tsx
+var DEFAULT_TYPE = "stack-section";
+var Stack = ({ id, type = DEFAULT_TYPE, SectionContent, items = [], separation = true, transform, onOver, onDrop, onAddSection, onDeleteSection, onNavigateToSection, onCollapseSection, ...props }) => {
+  const { ref: containerRef, width = 0 } = useResizeDetector({
+    refreshRate: 200
+  });
+  const { operation, overItem } = useMosaic2();
+  const itemsWithPreview = useItemsWithPreview({
+    path: id,
+    items
+  });
+  const getOverlayStyle = useCallback(() => ({
+    width
+  }), [
+    width
+  ]);
+  const getOverlayProps = useCallback(() => ({
+    itemContext: {
+      transform,
+      SectionContent
+    }
+  }), [
+    transform,
+    SectionContent
+  ]);
+  const stackModifier = useCallback((_activeItem, { transform: transform2, activeNodeRect, overlayNodeRect }) => {
+    if (activeNodeRect && overlayNodeRect) {
+      transform2.y += activeNodeRect?.top - overlayNodeRect?.top;
+    }
+    return transform2;
+  }, []);
+  return /* @__PURE__ */ React3.createElement(Mosaic.Container, {
+    id,
+    type,
+    Component: SectionTile,
+    getOverlayStyle,
+    getOverlayProps,
+    onOver,
+    onDrop,
+    modifier: stackModifier
+  }, /* @__PURE__ */ React3.createElement(Mosaic.DroppableTile, {
+    path: id,
+    type,
+    item: {
+      id,
+      items: itemsWithPreview
+    },
+    // TODO(wittjosiah): Should this actually be a context?
+    itemContext: {
+      separation,
+      transform,
+      onDeleteSection,
+      onNavigateToSection,
+      onAddSection,
+      onCollapseSection,
+      SectionContent
+    },
+    isOver: overItem && !!overItem.path && Path.hasRoot(overItem.path, id) && (operation === "copy" || operation === "transfer"),
+    Component: StackTile,
+    ...props,
+    ref: containerRef
+  }));
+};
+var StackTile = /* @__PURE__ */ forwardRef2(({ classNames, path, isOver, item: { items }, itemContext, type: _type, emptyComponent, ...props }, forwardedRef) => {
+  const { t } = useTranslation2(translationKey);
+  const { Component, type } = useContainer();
+  const domAttributes = useArrowNavigationGroup({
+    axis: "grid"
+  });
+  const { activeItem } = useMosaic2();
+  const _group = useFocusableGroup2();
+  return /* @__PURE__ */ React3.createElement(List2, {
+    ref: forwardedRef,
+    classNames: [
+      "grid relative",
+      stackColumns,
+      isOver && dropRingInner,
+      classNames
+    ],
+    ...!activeItem && domAttributes,
+    ...props
+  }, items.length > 0 ? /* @__PURE__ */ React3.createElement(Mosaic.SortableContext, {
+    items,
+    direction: "vertical"
+  }, items.map((item, index) => /* @__PURE__ */ React3.createElement(Mosaic.SortableTile, {
+    key: item.id,
+    item,
+    itemContext,
+    path,
+    type,
+    position: index,
+    Component
+  }))) : emptyComponent !== void 0 ? /* @__PURE__ */ React3.createElement(React3.Fragment, null, emptyComponent) : /* @__PURE__ */ React3.createElement("p", {
+    className: "grid col-span-2 text-center p-4 border border-dashed border-neutral-500/50 rounded",
+    "data-testid": "stack.empty"
+  }, t("empty stack message")));
+});
+export {
+  DEFAULT_TYPE,
+  SectionToolbar,
+  Stack,
+  sectionToolbarLayout,
+  translations_default as translations
+};
+//# sourceMappingURL=index.mjs.map

package/dist/lib/node-esm/index.mjs.map

@@ -0,0 +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, { type ReactNode, 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?: 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 { ArrowLineDown, ArrowLineUp, ArrowSquareOut, CaretUpDown, Trash } 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  Icon,\n  type Label,\n  List,\n  ListItem,\n  ScrollArea,\n  type ThemedClassName,\n  Toolbar,\n  toLocalizedString,\n  useTranslation,\n} from '@dxos/react-ui';\nimport { useAttendableAttributes } 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?: string;\n    placeholder?: Label;\n    viewActions?: (item: StackSectionItem) => StackAction;\n  };\n};\n\nexport type StackAction = {\n  icon: string;\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 = 'ph--placeholder--regular',\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 = useAttendableAttributes(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 attention-surface',\n              hoverableControls,\n              hoverableFocusedWithinControls,\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 icon={icon} size={5} classNames='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//\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", "Trash", "CollapsiblePrimitive", "React", "forwardRef", "useState", "Button", "DropdownMenu", "Icon", "List", "ListItem", "ScrollArea", "Toolbar", "toLocalizedString", "useTranslation", "useAttendableAttributes", "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", "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", "useAttendableAttributes", "React", "Root", "asChild", "open", "onOpenChange", "nextOpen", "ListItem", "ref", "classNames", "stackColumns", "style", "div", "role", "className", "hoverableControls", "hoverableFocusedWithinControls", "aria-orientation", "aria-label", "tabIndex", "DropdownMenu", "DropDownMenuDragHandleTrigger", "variant", "Icon", "Portal", "Content", "Viewport", "Item", "onClick", "data-testid", "ArrowSquareOut", "getSize", "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-esm/meta.json

@@ -0,0 +1 @@
+{"inputs":{"packages/ui/react-ui-stack/src/components/CaretDownUp.tsx":{"bytes":3080,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-stack/src/components/style-fragments.ts":{"bytes":707,"imports":[],"format":"esm"},"packages/ui/react-ui-stack/src/translations.ts":{"bytes":2050,"imports":[],"format":"esm"},"packages/ui/react-ui-stack/src/components/Section.tsx":{"bytes":39706,"imports":[{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"@radix-ui/react-collapsible","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-attention","kind":"import-statement","external":true},{"path":"@dxos/react-ui-deck","kind":"import-statement","external":true},{"path":"@dxos/react-ui-mosaic","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-stack/src/components/CaretDownUp.tsx","kind":"import-statement","original":"./CaretDownUp"},{"path":"packages/ui/react-ui-stack/src/components/style-fragments.ts","kind":"import-statement","original":"./style-fragments"},{"path":"packages/ui/react-ui-stack/src/translations.ts","kind":"import-statement","original":"../translations"}],"format":"esm"},"packages/ui/react-ui-stack/src/components/Stack.tsx":{"bytes":16642,"imports":[{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-resize-detector","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-mosaic","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-stack/src/components/Section.tsx","kind":"import-statement","original":"./Section"},{"path":"packages/ui/react-ui-stack/src/components/style-fragments.ts","kind":"import-statement","original":"./style-fragments"},{"path":"packages/ui/react-ui-stack/src/translations.ts","kind":"import-statement","original":"../translations"}],"format":"esm"},"packages/ui/react-ui-stack/src/components/index.ts":{"bytes":832,"imports":[{"path":"packages/ui/react-ui-stack/src/components/Stack.tsx","kind":"import-statement","original":"./Stack"},{"path":"packages/ui/react-ui-stack/src/components/Section.tsx","kind":"import-statement","original":"./Section"}],"format":"esm"},"packages/ui/react-ui-stack/src/index.ts":{"bytes":718,"imports":[{"path":"packages/ui/react-ui-stack/src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"packages/ui/react-ui-stack/src/translations.ts","kind":"import-statement","original":"./translations"}],"format":"esm"},"packages/ui/react-ui-stack/src/testing/stack-manager.ts":{"bytes":7412,"imports":[],"format":"esm"},"packages/ui/react-ui-stack/src/testing/index.ts":{"bytes":711,"imports":[{"path":"packages/ui/react-ui-stack/src/testing/stack-manager.ts","kind":"import-statement","original":"./stack-manager"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-stack/dist/lib/node-esm/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":33630},"packages/ui/react-ui-stack/dist/lib/node-esm/index.mjs":{"imports":[{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-resize-detector","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-mosaic","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"@radix-ui/react-collapsible","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-attention","kind":"import-statement","external":true},{"path":"@dxos/react-ui-deck","kind":"import-statement","external":true},{"path":"@dxos/react-ui-mosaic","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"exports":["DEFAULT_TYPE","SectionToolbar","Stack","sectionToolbarLayout","translations"],"entryPoint":"packages/ui/react-ui-stack/src/index.ts","inputs":{"packages/ui/react-ui-stack/src/components/Stack.tsx":{"bytesInOutput":3542},"packages/ui/react-ui-stack/src/components/Section.tsx":{"bytesInOutput":10044},"packages/ui/react-ui-stack/src/components/CaretDownUp.tsx":{"bytesInOutput":779},"packages/ui/react-ui-stack/src/components/style-fragments.ts":{"bytesInOutput":79},"packages/ui/react-ui-stack/src/translations.ts":{"bytesInOutput":508},"packages/ui/react-ui-stack/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-stack/src/index.ts":{"bytesInOutput":0}},"bytes":15603},"packages/ui/react-ui-stack/dist/lib/node-esm/testing/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":3715},"packages/ui/react-ui-stack/dist/lib/node-esm/testing/index.mjs":{"imports":[],"exports":["SectionManager","StackManager"],"entryPoint":"packages/ui/react-ui-stack/src/testing/index.ts","inputs":{"packages/ui/react-ui-stack/src/testing/stack-manager.ts":{"bytesInOutput":1569},"packages/ui/react-ui-stack/src/testing/index.ts":{"bytesInOutput":0}},"bytes":1801}}}

package/dist/lib/node-esm/testing/index.mjs

@@ -0,0 +1,62 @@
+import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
+
+// packages/ui/react-ui-stack/src/testing/stack-manager.ts
+var StackManager = class {
+  constructor(locator) {
+    this.locator = locator;
+    this._page = locator.page();
+  }
+  empty() {
+    return this.locator.getByTestId("stack.empty");
+  }
+  sections() {
+    return this.locator.locator("li");
+  }
+  order() {
+    return this.locator.locator("li").evaluateAll((els) => els.map((el) => el.getAttribute("id")));
+  }
+  section(index) {
+    return new SectionManager(this.locator.locator("li").nth(index));
+  }
+};
+var SectionManager = class {
+  constructor(locator) {
+    this.locator = locator;
+    this._page = locator.page();
+  }
+  async id() {
+    return this.locator.getAttribute("id");
+  }
+  async remove() {
+    await this.locator.getByTestId("section.drag-handle-menu-trigger").click();
+    await this._page.getByTestId("section.remove").click();
+  }
+  async navigateTo() {
+    await this.locator.getByTestId("section.drag-handle-menu-trigger").click();
+    await this._page.getByTestId("section.navigate-to").click();
+  }
+  async dragTo(target, offset = {
+    x: 0,
+    y: 0
+  }) {
+    const active = this.locator.getByTestId("section.drag-handle-menu-trigger");
+    const box = await target.boundingBox();
+    if (box) {
+      await active.hover();
+      await this._page.mouse.down();
+      await this._page.waitForTimeout(100);
+      await this._page.pause();
+      await this._page.mouse.move(offset.x + box.x + box.width / 2, offset.y + box.y + box.height / 2, {
+        steps: 4
+      });
+      await this._page.pause();
+      await this._page.waitForTimeout(100);
+      await this._page.mouse.up();
+    }
+  }
+};
+export {
+  SectionManager,
+  StackManager
+};
+//# sourceMappingURL=index.mjs.map

package/dist/lib/node-esm/testing/index.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/testing/stack-manager.ts"],
+  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport type { Locator, Page } from '@playwright/test';\n\nexport class StackManager {\n  private readonly _page: Page;\n\n  constructor(readonly locator: Locator) {\n    this._page = locator.page();\n  }\n\n  empty() {\n    return this.locator.getByTestId('stack.empty');\n  }\n\n  sections() {\n    return this.locator.locator('li');\n  }\n\n  order() {\n    return this.locator.locator('li').evaluateAll((els) => els.map((el) => el.getAttribute('id')));\n  }\n\n  section(index: number) {\n    return new SectionManager(this.locator.locator('li').nth(index));\n  }\n}\n\nexport class SectionManager {\n  private readonly _page: Page;\n\n  constructor(readonly locator: Locator) {\n    this._page = locator.page();\n  }\n\n  async id() {\n    return this.locator.getAttribute('id');\n  }\n\n  async remove() {\n    await this.locator.getByTestId('section.drag-handle-menu-trigger').click();\n    await this._page.getByTestId('section.remove').click();\n  }\n\n  async navigateTo() {\n    await this.locator.getByTestId('section.drag-handle-menu-trigger').click();\n    await this._page.getByTestId('section.navigate-to').click();\n  }\n\n  async dragTo(target: Locator, offset: { x: number; y: number } = { x: 0, y: 0 }) {\n    const active = this.locator.getByTestId('section.drag-handle-menu-trigger');\n    const box = await target.boundingBox();\n    if (box) {\n      await active.hover();\n      await this._page.mouse.down();\n      // Timeouts are for input discretization in WebKit\n      await this._page.waitForTimeout(100);\n      await this._page.pause();\n      await this._page.mouse.move(offset.x + box.x + box.width / 2, offset.y + box.y + box.height / 2, { steps: 4 });\n      await this._page.pause();\n      await this._page.waitForTimeout(100);\n      await this._page.mouse.up();\n    }\n  }\n}\n"],
+  "mappings": ";;;AAMO,IAAMA,eAAN,MAAMA;EAGXC,YAAqBC,SAAkB;SAAlBA,UAAAA;AACnB,SAAKC,QAAQD,QAAQE,KAAI;EAC3B;EAEAC,QAAQ;AACN,WAAO,KAAKH,QAAQI,YAAY,aAAA;EAClC;EAEAC,WAAW;AACT,WAAO,KAAKL,QAAQA,QAAQ,IAAA;EAC9B;EAEAM,QAAQ;AACN,WAAO,KAAKN,QAAQA,QAAQ,IAAA,EAAMO,YAAY,CAACC,QAAQA,IAAIC,IAAI,CAACC,OAAOA,GAAGC,aAAa,IAAA,CAAA,CAAA;EACzF;EAEAC,QAAQC,OAAe;AACrB,WAAO,IAAIC,eAAe,KAAKd,QAAQA,QAAQ,IAAA,EAAMe,IAAIF,KAAAA,CAAAA;EAC3D;AACF;AAEO,IAAMC,iBAAN,MAAMA;EAGXf,YAAqBC,SAAkB;SAAlBA,UAAAA;AACnB,SAAKC,QAAQD,QAAQE,KAAI;EAC3B;EAEA,MAAMc,KAAK;AACT,WAAO,KAAKhB,QAAQW,aAAa,IAAA;EACnC;EAEA,MAAMM,SAAS;AACb,UAAM,KAAKjB,QAAQI,YAAY,kCAAA,EAAoCc,MAAK;AACxE,UAAM,KAAKjB,MAAMG,YAAY,gBAAA,EAAkBc,MAAK;EACtD;EAEA,MAAMC,aAAa;AACjB,UAAM,KAAKnB,QAAQI,YAAY,kCAAA,EAAoCc,MAAK;AACxE,UAAM,KAAKjB,MAAMG,YAAY,qBAAA,EAAuBc,MAAK;EAC3D;EAEA,MAAME,OAAOC,QAAiBC,SAAmC;IAAEC,GAAG;IAAGC,GAAG;EAAE,GAAG;AAC/E,UAAMC,SAAS,KAAKzB,QAAQI,YAAY,kCAAA;AACxC,UAAMsB,MAAM,MAAML,OAAOM,YAAW;AACpC,QAAID,KAAK;AACP,YAAMD,OAAOG,MAAK;AAClB,YAAM,KAAK3B,MAAM4B,MAAMC,KAAI;AAE3B,YAAM,KAAK7B,MAAM8B,eAAe,GAAA;AAChC,YAAM,KAAK9B,MAAM+B,MAAK;AACtB,YAAM,KAAK/B,MAAM4B,MAAMI,KAAKX,OAAOC,IAAIG,IAAIH,IAAIG,IAAIQ,QAAQ,GAAGZ,OAAOE,IAAIE,IAAIF,IAAIE,IAAIS,SAAS,GAAG;QAAEC,OAAO;MAAE,CAAA;AAC5G,YAAM,KAAKnC,MAAM+B,MAAK;AACtB,YAAM,KAAK/B,MAAM8B,eAAe,GAAA;AAChC,YAAM,KAAK9B,MAAM4B,MAAMQ,GAAE;IAC3B;EACF;AACF;",
+  "names": ["StackManager", "constructor", "locator", "_page", "page", "empty", "getByTestId", "sections", "order", "evaluateAll", "els", "map", "el", "getAttribute", "section", "index", "SectionManager", "nth", "id", "remove", "click", "navigateTo", "dragTo", "target", "offset", "x", "y", "active", "box", "boundingBox", "hover", "mouse", "down", "waitForTimeout", "pause", "move", "width", "height", "steps", "up"]
+}

package/dist/types/src/components/CaretDownUp.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaretDownUp.d.ts","sourceRoot":"","sources":["../../../../src/components/CaretDownUp.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,WAAW,mCAAoC,SAAS,sBAuBpE,CAAC"}
+{"version":3,"file":"CaretDownUp.d.ts","sourceRoot":"","sources":["../../../../src/components/CaretDownUp.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,WAAW,mCAAoC,SAAS,sBAuBpE,CAAC"}

package/dist/types/src/components/Deck.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Deck.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Deck.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAarB,OAAO,KAAgE,MAAM,OAAO,CAAC;;;;;;;AAsFrF,wBAME;AAEF,eAAO,MAAM,iBAAiB;;;CAqB7B,CAAC;AAEF,eAAO,MAAM,kCAAkC;;;CAqB9C,CAAC;AA2CF,eAAO,MAAM,kBAAkB,yBAgL9B,CAAC"}
+{"version":3,"file":"Deck.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Deck.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAGrB,OAAO,KAAgE,MAAM,OAAO,CAAC;;;;;;;AAsFrF,wBAME;AAEF,eAAO,MAAM,iBAAiB;;;CAoB7B,CAAC;AAEF,eAAO,MAAM,kCAAkC;;;CAoB9C,CAAC;AA2CF,eAAO,MAAM,kBAAkB,yBA+K9B,CAAC"}

package/dist/types/src/components/Section.d.ts

@@ -1,4 +1,3 @@
-import { type IconProps } from '@phosphor-icons/react';
 import React, { type ForwardRefExoticComponent, type RefAttributes, type FC, type PropsWithChildren, type ComponentPropsWithRef } from 'react';
 import { type Label, type ThemedClassName } from '@dxos/react-ui';
 import { type MosaicActiveType, type MosaicDataItem, type MosaicTileComponent, type MosaicTileProps } from '@dxos/react-ui-mosaic';
@@ -30,13 +29,13 @@ export type StackSectionItem = MosaicDataItem & {
         custom?: Record<string, any>;
     };
     metadata?: {
-        icon?: FC<IconProps>;
+        icon?: string;
         placeholder?: Label;
         viewActions?: (item: StackSectionItem) => StackAction;
     };
 };
 export type StackAction = {
-    icon: FC<IconProps>;
+    icon: string;
     label: Label;
     onClick: () => void;
 };

package/dist/types/src/components/Section.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../../../src/components/Section.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../../../src/components/Section.tsx"],"names":[],"mappings":"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"}

package/dist/types/src/components/Stack.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type ReactNode } from 'react';
 import { type MosaicContainerProps } from '@dxos/react-ui-mosaic';
 import { type CollapsedSections, type AddSectionPosition, type StackContextValue, type StackSectionContent, type StackSectionItem } from './Section';
 export type Direction = 'horizontal' | 'vertical';
@@ -8,7 +8,7 @@ export type StackProps<TData extends StackSectionContent = StackSectionContent>
     items?: StackSectionItem[];
     separation?: boolean;
     onCollapseSection?: (id: string, collapsed: boolean) => void;
-    emptyComponent?: React.ReactNode;
+    emptyComponent?: ReactNode;
 };
 export declare const Stack: ({ id, type, SectionContent, items, separation, transform, onOver, onDrop, onAddSection, onDeleteSection, onNavigateToSection, onCollapseSection, ...props }: StackProps) => React.JSX.Element;
 //# sourceMappingURL=Stack.d.ts.map

package/dist/types/src/components/Stack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../../src/components/Stack.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAIvD,OAAO,EACL,KAAK,oBAAoB,EAO1B,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,EAEvB,KAAK,iBAAiB,EAEtB,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,EACtB,MAAM,WAAW,CAAC;AAInB,MAAM,MAAM,SAAS,GAAG,YAAY,GAAG,UAAU,CAAC;AAElD,YAAY,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,CAAC;AAEtD,eAAO,MAAM,YAAY,kBAAkB,CAAC;AAE5C,MAAM,MAAM,UAAU,CAAC,KAAK,SAAS,mBAAmB,GAAG,mBAAmB,IAAI,IAAI,CACpF,oBAAoB,CAAC,KAAK,EAAE,MAAM,CAAC,EACnC,OAAO,GAAG,WAAW,CACtB,GACC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,sBAAsB,CAAC,GAAG;IACvD,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7D,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC,CAAC;AAEJ,eAAO,MAAM,KAAK,gKAcf,UAAU,sBA8DZ,CAAC"}
+{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../../src/components/Stack.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAA2B,MAAM,OAAO,CAAC;AAIvE,OAAO,EACL,KAAK,oBAAoB,EAO1B,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,EAEvB,KAAK,iBAAiB,EAEtB,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,EACtB,MAAM,WAAW,CAAC;AAInB,MAAM,MAAM,SAAS,GAAG,YAAY,GAAG,UAAU,CAAC;AAElD,YAAY,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,CAAC;AAEtD,eAAO,MAAM,YAAY,kBAAkB,CAAC;AAE5C,MAAM,MAAM,UAAU,CAAC,KAAK,SAAS,mBAAmB,GAAG,mBAAmB,IAAI,IAAI,CACpF,oBAAoB,CAAC,KAAK,EAAE,MAAM,CAAC,EACnC,OAAO,GAAG,WAAW,CACtB,GACC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,sBAAsB,CAAC,GAAG;IACvD,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7D,cAAc,CAAC,EAAE,SAAS,CAAC;CAC5B,CAAC;AAEJ,eAAO,MAAM,KAAK,gKAcf,UAAU,sBA8DZ,CAAC"}