@dxos/plugin-stack 0.9.0 → 0.9.1-staging.ee54ba693a

package/dist/lib/neutral/components/index.mjs

@@ -1,182 +1,226 @@
-// src/components/StackContext/StackContext.tsx
-import { createContext, useContext } from "react";
-var StackContext = /* @__PURE__ */ createContext({
-  attendableId: "",
-  onCollapse: () => {
-  },
-  onNavigate: async () => {
-  },
-  onDelete: async () => {
-  },
-  onAdd: () => {
-  }
-});
-var useStack = () => useContext(StackContext);
+import "../chunk-J5LGTIGS.mjs";
 
-// src/components/StackSection/StackSection.tsx
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
-import React2, { useMemo, useState } from "react";
+// src/components/Stack/Stack.tsx
+import React, { createContext, forwardRef, useCallback, useContext, useMemo, useState } from "react";
 import { Surface } from "@dxos/app-framework/ui";
-import { AppSurface } from "@dxos/app-toolkit/ui";
-import { DropdownMenu, Icon, IconButton, useTranslation } from "@dxos/react-ui";
+import { Paths } from "@dxos/app-toolkit";
+import { AppSurface, AttentionSigilButton } from "@dxos/app-toolkit/ui";
+import { Obj } from "@dxos/echo";
+import { DropdownMenu, Icon, ScrollArea, useTranslation } from "@dxos/react-ui";
 import { useAttentionAttributes } from "@dxos/react-ui-attention";
-import { StackItem } from "@dxos/react-ui-stack";
-import { getSize, mx } from "@dxos/ui-theme";
+import { Mosaic } from "@dxos/react-ui-mosaic";
 import { meta } from "#meta";
-
-// src/components/StackSection/CaretDownUp.tsx
-import React from "react";
-var CaretDownUp = ({ children, ...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);
+var StackContext = /* @__PURE__ */ createContext(void 0);
+var useStackContext = (consumer) => {
+  const context = useContext(StackContext);
+  if (!context) {
+    throw new Error(`\`${consumer}\` must be used within \`Stack.Root\`.`);
+  }
+  return context;
 };
-
-// src/components/StackSection/StackSection.tsx
-var sectionActionDimensions = "p-1 my-1 shrink-0 min-h-0 w-(--dx-rail-action) h-min";
-var StackSection = ({ id, view, object, metadata: { icon = "ph--circle-dashed--regular" } }) => {
-  const { t } = useTranslation(meta.id);
-  const { attendableId: parentAttendableId, onNavigate, onAdd, onCollapse, onDelete } = useStack();
-  const [optionsMenuOpen, setOptionsMenuOpen] = useState(false);
-  const attendableId = `${parentAttendableId}/${object.id}`;
-  const attentionAttrs = useAttentionAttributes(attendableId);
-  const stackItem = useMemo(() => ({
-    id
+var useStack = () => useStackContext("useStack");
+var StackRoot = ({ id, eventHandler, children, attendableId, collapsed, onCollapse, onAdd, onMoveUp, onMoveDown, onDelete }) => {
+  const [viewport, setViewport] = useState(null);
+  const value = useMemo(() => ({
+    id,
+    eventHandler: eventHandler ?? {
+      id,
+      canDrop: () => false
+    },
+    viewport,
+    setViewport,
+    attendableId,
+    collapsed,
+    onCollapse,
+    onAdd,
+    onMoveUp,
+    onMoveDown,
+    onDelete
   }), [
-    id
+    id,
+    eventHandler,
+    viewport,
+    attendableId,
+    collapsed,
+    onCollapse,
+    onAdd,
+    onMoveUp,
+    onMoveDown,
+    onDelete
+  ]);
+  return /* @__PURE__ */ React.createElement(StackContext.Provider, {
+    value
+  }, /* @__PURE__ */ React.createElement(Mosaic.Root, null, children));
+};
+StackRoot.displayName = "Stack.Root";
+var StackContent = /* @__PURE__ */ forwardRef(({ children, ...props }, forwardedRef) => {
+  const { eventHandler, viewport } = useStackContext("Stack.Content");
+  return /* @__PURE__ */ React.createElement(Mosaic.Container, {
+    asChild: true,
+    orientation: "vertical",
+    autoScroll: viewport,
+    eventHandler
+  }, /* @__PURE__ */ React.createElement(ScrollArea.Root, {
+    ...props,
+    orientation: "vertical",
+    ref: forwardedRef
+  }, children));
+});
+StackContent.displayName = "Stack.Content";
+var StackViewport = /* @__PURE__ */ forwardRef(({ classNames, children }, forwardedRef) => {
+  const { setViewport } = useStackContext("Stack.Viewport");
+  const setRefs = useCallback((element) => {
+    setViewport(element);
+    if (typeof forwardedRef === "function") {
+      forwardedRef(element);
+    } else if (forwardedRef) {
+      forwardedRef.current = element;
+    }
+  }, [
+    setViewport,
+    forwardedRef
   ]);
-  const data = useMemo(() => ({
+  return /* @__PURE__ */ React.createElement(ScrollArea.Viewport, {
+    classNames,
+    ref: setRefs
+  }, children);
+});
+StackViewport.displayName = "Stack.Viewport";
+var DragHandleGlyph = () => /* @__PURE__ */ React.createElement("svg", {
+  width: 10,
+  height: 16,
+  viewBox: "0 0 10 16",
+  "aria-hidden": true,
+  className: "shrink-0 text-description"
+}, [
+  3,
+  8,
+  13
+].flatMap((cy) => [
+  2.5,
+  7.5
+].map((cx) => /* @__PURE__ */ React.createElement("circle", {
+  key: `${cx}-${cy}`,
+  cx,
+  cy,
+  r: 1.1,
+  fill: "currentColor"
+}))));
+var StackSection = ({ data, ...tileProps }) => {
+  const { id, object } = data;
+  const { t } = useTranslation(meta.profile.key);
+  const { attendableId: parentAttendableId, collapsed, onAdd, onMoveUp, onMoveDown, onCollapse, onDelete } = useStack();
+  const [optionsMenuOpen, setOptionsMenuOpen] = useState(false);
+  const attendableId = Paths.getCollectionObjectPath(parentAttendableId, object.id);
+  const attentionAttrs = useAttentionAttributes(attendableId);
+  const surfaceData = useMemo(() => ({
     attendableId,
     subject: object
   }), [
     object,
     attendableId
   ]);
-  return /* @__PURE__ */ React2.createElement(CollapsiblePrimitive.Root, {
-    asChild: true,
-    open: !view.collapsed,
-    onOpenChange: (nextOpen) => onCollapse?.(id, !nextOpen)
-  }, /* @__PURE__ */ React2.createElement(StackItem.Root, {
-    item: stackItem,
-    role: "section",
-    ...attentionAttrs
-  }, /* @__PURE__ */ React2.createElement(StackItem.Heading, {
-    classNames: "dx-attention-surface"
-  }, /* @__PURE__ */ React2.createElement("span", {
-    className: "sr-only"
-  }, view.title), /* @__PURE__ */ React2.createElement(StackItem.HeadingStickyContent, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Root, {
+  const isCollapsed = collapsed.has(id);
+  const icon = Obj.getIcon(object)?.icon ?? "ph--circle-dashed--regular";
+  const title = Obj.getLabel(object, {
+    fallback: "typename"
+  }) ?? t("untitled-section.title");
+  const rail = /* @__PURE__ */ React.createElement("div", {
+    className: "grid grid-rows-[min-content_1fr]"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "p-1 bg-toolbar-surface"
+  }, /* @__PURE__ */ React.createElement(DropdownMenu.Root, {
     open: optionsMenuOpen,
     onOpenChange: setOptionsMenuOpen
-  }, /* @__PURE__ */ React2.createElement(DropdownMenu.Trigger, {
+  }, /* @__PURE__ */ React.createElement(DropdownMenu.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React2.createElement(StackItem.SigilButton, null, /* @__PURE__ */ React2.createElement(Icon, {
+  }, /* @__PURE__ */ React.createElement(AttentionSigilButton, {
+    size: "md",
+    attendableId
+  }, /* @__PURE__ */ React.createElement(Icon, {
     icon,
     classNames: "transition-opacity"
-  }))), /* @__PURE__ */ React2.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Viewport, null, view.collapsed ? /* @__PURE__ */ React2.createElement(DropdownMenu.Item, {
-    onClick: () => onNavigate(id),
-    "data-testid": "section.navigate-to"
-  }, /* @__PURE__ */ React2.createElement(Icon, {
-    icon: "ph--arrow-right--regular"
-  }), /* @__PURE__ */ React2.createElement("span", {
+  }))), /* @__PURE__ */ React.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React.createElement(DropdownMenu.Viewport, null, isCollapsed ? /* @__PURE__ */ React.createElement(DropdownMenu.Item, {
+    onClick: () => onCollapse(id, false),
+    "data-testid": "section.expand"
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    icon: "ph--arrows-out-line-vertical--regular"
+  }), /* @__PURE__ */ React.createElement("span", {
     className: "ms-2 grow"
-  }, t("navigate-to-section.label"))) : /* @__PURE__ */ React2.createElement(CollapsiblePrimitive.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React2.createElement(DropdownMenu.Item, null, /* @__PURE__ */ React2.createElement(CaretDownUp, {
-    className: getSize(5)
-  }), /* @__PURE__ */ React2.createElement("span", {
+  }, t("expand.label"))) : /* @__PURE__ */ React.createElement(DropdownMenu.Item, {
+    onClick: () => onCollapse(id, true),
+    "data-testid": "section.collapse"
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    icon: "ph--arrows-in-line-vertical--regular"
+  }), /* @__PURE__ */ React.createElement("span", {
     className: "ms-2 grow"
-  }, t("collapse.label")))), /* @__PURE__ */ React2.createElement(DropdownMenu.Item, {
-    onClick: () => onAdd(id, "before"),
-    "data-testid": "section.add-before"
-  }, /* @__PURE__ */ React2.createElement(Icon, {
+  }, t("collapse.label"))), /* @__PURE__ */ React.createElement(DropdownMenu.Separator, null), /* @__PURE__ */ React.createElement(DropdownMenu.Item, {
+    onClick: () => onAdd(id),
+    "data-testid": "section.add"
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    icon: "ph--plus--regular"
+  }), /* @__PURE__ */ React.createElement("span", {
+    className: "ms-2 grow"
+  }, t("add-section.label"))), /* @__PURE__ */ React.createElement(DropdownMenu.Item, {
+    onClick: () => onMoveUp(id),
+    "data-testid": "section.move-up"
+  }, /* @__PURE__ */ React.createElement(Icon, {
     icon: "ph--arrow-line-up--regular"
-  }), /* @__PURE__ */ React2.createElement("span", {
+  }), /* @__PURE__ */ React.createElement("span", {
     className: "ms-2 grow"
-  }, t("add-section-before.label"))), /* @__PURE__ */ React2.createElement(DropdownMenu.Item, {
-    onClick: () => onAdd(id, "after"),
-    "data-testid": "section.add-after"
-  }, /* @__PURE__ */ React2.createElement(Icon, {
+  }, t("move-up.label"))), /* @__PURE__ */ React.createElement(DropdownMenu.Item, {
+    onClick: () => onMoveDown(id),
+    "data-testid": "section.move-down"
+  }, /* @__PURE__ */ React.createElement(Icon, {
     icon: "ph--arrow-line-down--regular"
-  }), /* @__PURE__ */ React2.createElement("span", {
+  }), /* @__PURE__ */ React.createElement("span", {
     className: "ms-2 grow"
-  }, t("add-section-after.label"))), /* @__PURE__ */ React2.createElement(DropdownMenu.Item, {
+  }, t("move-down.label"))), /* @__PURE__ */ React.createElement(DropdownMenu.Separator, null), /* @__PURE__ */ React.createElement(DropdownMenu.Item, {
     onClick: () => onDelete(id),
     "data-testid": "section.remove"
-  }, /* @__PURE__ */ React2.createElement(Icon, {
+  }, /* @__PURE__ */ React.createElement(Icon, {
     icon: "ph--trash--regular"
-  }), /* @__PURE__ */ React2.createElement("span", {
+  }), /* @__PURE__ */ React.createElement("span", {
     className: "ms-2 grow"
-  }, t("remove-section.label")))), /* @__PURE__ */ React2.createElement(DropdownMenu.Arrow, null)))), view.collapsed ? /* @__PURE__ */ React2.createElement(CollapsiblePrimitive.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React2.createElement(IconButton, {
-    iconOnly: true,
-    variant: "ghost",
-    label: t("expand.label"),
-    icon: "ph--caret-up-down--regular",
-    classNames: sectionActionDimensions
-  })) : /* @__PURE__ */ React2.createElement(IconButton, {
-    iconOnly: true,
-    variant: "ghost",
-    onClick: () => onNavigate(id),
-    label: t("navigate-to-section.label"),
-    icon: "ph--arrow-right--regular",
-    "data-testid": "section.navigate-to",
-    classNames: sectionActionDimensions
-  }))), /* @__PURE__ */ React2.createElement(CollapsiblePrimitive.Content, null, /* @__PURE__ */ React2.createElement(Surface.Surface, {
-    type: AppSurface.Section,
+  }, t("remove-section.label")))), /* @__PURE__ */ React.createElement(DropdownMenu.Arrow, null))))), /* @__PURE__ */ React.createElement("div", {
+    className: "p-1"
+  }, /* @__PURE__ */ React.createElement(Mosaic.DragHandle, {
+    label: t("drag-handle.label"),
+    classNames: "p-1 min-h-0 w-(--dx-rail-item) h-(--dx-rail-item)",
+    testId: "section.drag-handle"
+  }, /* @__PURE__ */ React.createElement(DragHandleGlyph, null))));
+  return /* @__PURE__ */ React.createElement(Mosaic.Tile, {
+    ...tileProps,
     data,
-    limit: 1,
-    placeholder: /* @__PURE__ */ React2.createElement(React2.Fragment, null)
-  })), view.collapsed && /* @__PURE__ */ React2.createElement(StackItem.Content, {
-    classNames: "dx-attention-surface"
-  }, /* @__PURE__ */ React2.createElement("h2", {
-    className: mx("flex items-center p-4 font-medium")
-  }, view.title))));
+    classNames: "grid grid-cols-[var(--dx-rail-action)_1fr] dx-attention-surface border border-subdued-separator"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "border-e border-subdued-separator"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "sticky top-0 flex flex-col items-center"
+  }, rail)), /* @__PURE__ */ React.createElement("div", {
+    ...attentionAttrs,
+    className: "min-w-0"
+  }, /* @__PURE__ */ React.createElement("span", {
+    className: "sr-only"
+  }, title), isCollapsed ? /* @__PURE__ */ React.createElement("div", {
+    className: "h-(--dx-toolbar-size) flex p-1"
+  }, /* @__PURE__ */ React.createElement("h2", {
+    className: "flex items-center font-medium"
+  }, title)) : /* @__PURE__ */ React.createElement(Surface.Surface, {
+    type: AppSurface.Section,
+    data: surfaceData,
+    limit: 1
+  })));
 };
-
-// src/components/StackSettings/StackSettings.tsx
-import React3 from "react";
-import { Input, useTranslation as useTranslation2 } from "@dxos/react-ui";
-import { Settings as SettingsForm } from "@dxos/react-ui-form";
-import { meta as meta2 } from "#meta";
-var StackSettings = ({ settings }) => {
-  const { t } = useTranslation2(meta2.id);
-  return /* @__PURE__ */ React3.createElement(SettingsForm.Viewport, null, /* @__PURE__ */ React3.createElement(SettingsForm.Section, {
-    title: t("settings.title", {
-      ns: meta2.id
-    })
-  }, /* @__PURE__ */ React3.createElement(SettingsForm.Item, {
-    title: t("settings.separation.label"),
-    description: t("settings.separation.description")
-  }, /* @__PURE__ */ React3.createElement(Input.Switch, {
-    checked: settings.separation,
-    onCheckedChange: (checked) => settings.separation = !!checked
-  }))));
+StackSection.displayName = "Stack.Section";
+var Stack = {
+  Root: StackRoot,
+  Content: StackContent,
+  Viewport: StackViewport,
+  Section: StackSection
 };
 export {
-  StackContext,
-  StackSection,
-  StackSettings,
+  Stack,
   useStack
 };
 //# sourceMappingURL=index.mjs.map

package/dist/lib/neutral/components/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../src/components/StackContext/StackContext.tsx", "../../../../src/components/StackSection/StackSection.tsx", "../../../../src/components/StackSection/CaretDownUp.tsx", "../../../../src/components/StackSettings/StackSettings.tsx"],
-  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { createContext, useContext } from 'react';\n\nimport { type AddSectionPosition } from '#types';\n\nexport type StackContextValue = {\n  attendableId: string;\n  onCollapse: (id: string, collapsed: boolean) => void;\n  onNavigate: (id: string) => Promise<void>;\n  onDelete: (id: string) => Promise<void>;\n  onAdd: (id: string, position: AddSectionPosition) => void;\n};\n\nexport const StackContext = createContext<StackContextValue>({\n  attendableId: '',\n  onCollapse: () => {},\n  onNavigate: async () => {},\n  onDelete: async () => {},\n  onAdd: () => {},\n});\n\nexport const useStack = () => useContext(StackContext);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport * as CollapsiblePrimitive from '@radix-ui/react-collapsible';\nimport React, { useMemo, useState } from 'react';\n\nimport { Surface } from '@dxos/app-framework/ui';\nimport { AppSurface } from '@dxos/app-toolkit/ui';\nimport { DropdownMenu, Icon, IconButton, useTranslation } from '@dxos/react-ui';\nimport { useAttentionAttributes } from '@dxos/react-ui-attention';\nimport { StackItem } from '@dxos/react-ui-stack';\nimport { getSize, mx } from '@dxos/ui-theme';\n\nimport { meta } from '#meta';\nimport { type StackSectionItem } from '#types';\n\nimport { useStack } from '../StackContext';\nimport { CaretDownUp } from './CaretDownUp';\n\nconst sectionActionDimensions = 'p-1 my-1 shrink-0 min-h-0 w-(--dx-rail-action) h-min';\n\nexport type StackSectionProps = StackSectionItem;\n\nexport const StackSection = ({\n  id,\n  view,\n  object,\n  metadata: { icon = 'ph--circle-dashed--regular' },\n}: StackSectionProps) => {\n  const { t } = useTranslation(meta.id);\n  const { attendableId: parentAttendableId, onNavigate, onAdd, onCollapse, onDelete } = useStack();\n  const [optionsMenuOpen, setOptionsMenuOpen] = useState(false);\n  const attendableId = `${parentAttendableId}/${object.id}`;\n  const attentionAttrs = useAttentionAttributes(attendableId);\n  const stackItem = useMemo(() => ({ id }), [id]);\n  const data = useMemo(() => ({ attendableId, subject: object }), [object, attendableId]);\n\n  return (\n    <CollapsiblePrimitive.Root asChild open={!view.collapsed} onOpenChange={(nextOpen) => onCollapse?.(id, !nextOpen)}>\n      <StackItem.Root item={stackItem} role='section' {...attentionAttrs}>\n        <StackItem.Heading classNames='dx-attention-surface'>\n          <span className='sr-only'>{view.title}</span>\n          <StackItem.HeadingStickyContent>\n            <DropdownMenu.Root\n              {...{\n                open: optionsMenuOpen,\n                onOpenChange: setOptionsMenuOpen,\n              }}\n            >\n              <DropdownMenu.Trigger asChild>\n                <StackItem.SigilButton>\n                  <Icon icon={icon} classNames='transition-opacity' />\n                </StackItem.SigilButton>\n              </DropdownMenu.Trigger>\n              <DropdownMenu.Portal>\n                <DropdownMenu.Content>\n                  <DropdownMenu.Viewport>\n                    {view.collapsed ? (\n                      <DropdownMenu.Item onClick={() => onNavigate(id)} data-testid='section.navigate-to'>\n                        <Icon icon='ph--arrow-right--regular' />\n                        <span className='ms-2 grow'>{t('navigate-to-section.label')}</span>\n                      </DropdownMenu.Item>\n                    ) : (\n                      <CollapsiblePrimitive.Trigger asChild>\n                        <DropdownMenu.Item>\n                          <CaretDownUp className={getSize(5)} />\n                          <span className='ms-2 grow'>{t('collapse.label')}</span>\n                        </DropdownMenu.Item>\n                      </CollapsiblePrimitive.Trigger>\n                    )}\n                    <DropdownMenu.Item onClick={() => onAdd(id, 'before')} data-testid='section.add-before'>\n                      <Icon icon='ph--arrow-line-up--regular' />\n                      <span className='ms-2 grow'>{t('add-section-before.label')}</span>\n                    </DropdownMenu.Item>\n                    <DropdownMenu.Item onClick={() => onAdd(id, 'after')} data-testid='section.add-after'>\n                      <Icon icon='ph--arrow-line-down--regular' />\n                      <span className='ms-2 grow'>{t('add-section-after.label')}</span>\n                    </DropdownMenu.Item>\n                    <DropdownMenu.Item onClick={() => onDelete(id)} data-testid='section.remove'>\n                      <Icon icon='ph--trash--regular' />\n                      <span className='ms-2 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            {view.collapsed ? (\n              <CollapsiblePrimitive.Trigger asChild>\n                <IconButton\n                  iconOnly\n                  variant='ghost'\n                  label={t('expand.label')}\n                  icon='ph--caret-up-down--regular'\n                  classNames={sectionActionDimensions}\n                />\n              </CollapsiblePrimitive.Trigger>\n            ) : (\n              <IconButton\n                iconOnly\n                variant='ghost'\n                onClick={() => onNavigate(id)}\n                label={t('navigate-to-section.label')}\n                icon='ph--arrow-right--regular'\n                data-testid='section.navigate-to'\n                classNames={sectionActionDimensions}\n              />\n            )}\n          </StackItem.HeadingStickyContent>\n        </StackItem.Heading>\n        <CollapsiblePrimitive.Content>\n          <Surface.Surface type={AppSurface.Section} data={data} limit={1} placeholder={<></>} />\n        </CollapsiblePrimitive.Content>\n        {view.collapsed && (\n          <StackItem.Content classNames='dx-attention-surface'>\n            <h2 className={mx('flex items-center p-4 font-medium')}>{view.title}</h2>\n          </StackItem.Content>\n        )}\n      </StackItem.Root>\n    </CollapsiblePrimitive.Root>\n  );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { type ComponentPropsWithoutRef } from 'react';\n\nexport const CaretDownUp = ({ children, ...props }: ComponentPropsWithoutRef<'svg'>) => {\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 2023 DXOS.org\n//\n\nimport React from 'react';\n\nimport { Input, useTranslation } from '@dxos/react-ui';\nimport { Settings as SettingsForm } from '@dxos/react-ui-form';\n\nimport { meta } from '#meta';\nimport { type StackSettingsProps } from '#types';\n\nexport const StackSettings = ({ settings }: { settings: StackSettingsProps }) => {\n  const { t } = useTranslation(meta.id);\n\n  return (\n    <SettingsForm.Viewport>\n      <SettingsForm.Section title={t('settings.title', { ns: meta.id })}>\n        <SettingsForm.Item title={t('settings.separation.label')} description={t('settings.separation.description')}>\n          <Input.Switch\n            checked={settings.separation}\n            onCheckedChange={(checked) => (settings.separation = !!checked)}\n          />\n        </SettingsForm.Item>\n      </SettingsForm.Section>\n    </SettingsForm.Viewport>\n  );\n};\n"],
-  "mappings": "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",
-  "names": ["createContext", "useContext", "StackContext", "attendableId", "onCollapse", "onNavigate", "onDelete", "onAdd", "useStack", "CollapsiblePrimitive", "React", "useMemo", "useState", "Surface", "AppSurface", "DropdownMenu", "Icon", "IconButton", "useTranslation", "useAttentionAttributes", "StackItem", "getSize", "mx", "meta", "React", "CaretDownUp", "children", "props", "svg", "xmlns", "viewBox", "rect", "width", "height", "fill", "polyline", "points", "stroke", "strokeLinecap", "strokeLinejoin", "strokeWidth", "sectionActionDimensions", "StackSection", "id", "view", "object", "metadata", "icon", "t", "useTranslation", "meta", "attendableId", "parentAttendableId", "onNavigate", "onAdd", "onCollapse", "onDelete", "useStack", "optionsMenuOpen", "setOptionsMenuOpen", "useState", "attentionAttrs", "useAttentionAttributes", "stackItem", "useMemo", "data", "subject", "React", "Root", "asChild", "open", "collapsed", "onOpenChange", "nextOpen", "StackItem", "item", "role", "Heading", "classNames", "span", "className", "title", "HeadingStickyContent", "DropdownMenu", "Trigger", "SigilButton", "Icon", "Portal", "Content", "Viewport", "Item", "onClick", "data-testid", "CaretDownUp", "getSize", "Arrow", "IconButton", "iconOnly", "variant", "label", "Surface", "type", "AppSurface", "Section", "limit", "placeholder", "h2", "mx", "React", "Input", "useTranslation", "Settings", "SettingsForm", "meta", "StackSettings", "settings", "t", "id", "Viewport", "Section", "title", "ns", "Item", "description", "Switch", "checked", "separation", "onCheckedChange"]
+  "sources": ["../../../../src/components/Stack/Stack.tsx"],
+  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport React, {\n  type ComponentPropsWithoutRef,\n  type ForwardedRef,\n  type PropsWithChildren,\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n} from 'react';\n\nimport { Surface } from '@dxos/app-framework/ui';\nimport { Paths } from '@dxos/app-toolkit';\nimport { AppSurface, AttentionSigilButton } from '@dxos/app-toolkit/ui';\nimport { Obj } from '@dxos/echo';\nimport {\n  DropdownMenu,\n  Icon,\n  ScrollArea,\n  ScrollAreaRootProps,\n  type ThemedClassName,\n  useTranslation,\n} from '@dxos/react-ui';\nimport { useAttentionAttributes } from '@dxos/react-ui-attention';\nimport { Mosaic, type MosaicEventHandler, type MosaicTileProps } from '@dxos/react-ui-mosaic';\n\nimport { meta } from '#meta';\n\n//\n// Types\n//\n\nexport type StackSectionItem = {\n  id: string;\n  object: Obj.Unknown;\n};\n\n//\n// Context\n//\n\n/** Section-level callbacks consumed by stack sections. */\nexport type StackContextValue = {\n  attendableId: string;\n  /** Ids of sections that are currently collapsed. */\n  collapsed: ReadonlySet<string>;\n  onCollapse: (id: string, collapsed: boolean) => void;\n  /** Add a new section immediately after the given section. */\n  onAdd: (id: string) => void;\n  onMoveUp: (id: string) => void;\n  onMoveDown: (id: string) => void;\n  onDelete: (id: string) => void;\n};\n\ntype StackContextType = StackContextValue & {\n  /** Container id used to scope Mosaic drag/drop. */\n  id: string;\n  eventHandler: MosaicEventHandler;\n  /** Scroll viewport element; threaded to the Mosaic container for autoscroll. */\n  viewport: HTMLElement | null;\n  setViewport: (element: HTMLElement | null) => void;\n};\n\nconst StackContext = createContext<StackContextType | undefined>(undefined);\n\nconst useStackContext = (consumer: string): StackContextType => {\n  const context = useContext(StackContext);\n  if (!context) {\n    throw new Error(`\\`${consumer}\\` must be used within \\`Stack.Root\\`.`);\n  }\n  return context;\n};\n\n/** Section-level callbacks consumed by stack sections. */\nexport const useStack = (): StackContextValue => useStackContext('useStack');\n\n//\n// Root\n//\n\ntype StackRootProps = PropsWithChildren<\n  StackContextValue & {\n    /** Container id used to scope Mosaic drag/drop. */\n    id: string;\n    /** Drag/drop event handler; defaults to a read-only (no-drop) handler. */\n    eventHandler?: MosaicEventHandler;\n  }\n>;\n\nconst StackRoot = ({\n  id,\n  eventHandler,\n  children,\n  attendableId,\n  collapsed,\n  onCollapse,\n  onAdd,\n  onMoveUp,\n  onMoveDown,\n  onDelete,\n}: StackRootProps) => {\n  const [viewport, setViewport] = useState<HTMLElement | null>(null);\n  const value = useMemo<StackContextType>(\n    () => ({\n      id,\n      eventHandler: eventHandler ?? { id, canDrop: () => false },\n      viewport,\n      setViewport,\n      attendableId,\n      collapsed,\n      onCollapse,\n      onAdd,\n      onMoveUp,\n      onMoveDown,\n      onDelete,\n    }),\n    [id, eventHandler, viewport, attendableId, collapsed, onCollapse, onAdd, onMoveUp, onMoveDown, onDelete],\n  );\n\n  return (\n    <StackContext.Provider value={value}>\n      <Mosaic.Root>{children}</Mosaic.Root>\n    </StackContext.Provider>\n  );\n};\n\nStackRoot.displayName = 'Stack.Root';\n\n//\n// Content\n//\n\ntype StackContentProps = ThemedClassName<\n  ComponentPropsWithoutRef<'div'> & Pick<ScrollAreaRootProps, 'centered' | 'thin' | 'padding'>\n>;\n\nconst StackContent = forwardRef<HTMLDivElement, StackContentProps>(({ children, ...props }, forwardedRef) => {\n  const { eventHandler, viewport } = useStackContext('Stack.Content');\n  return (\n    <Mosaic.Container asChild orientation='vertical' autoScroll={viewport} eventHandler={eventHandler}>\n      <ScrollArea.Root {...props} orientation='vertical' ref={forwardedRef}>\n        {children}\n      </ScrollArea.Root>\n    </Mosaic.Container>\n  );\n});\n\nStackContent.displayName = 'Stack.Content';\n\n//\n// Viewport\n//\n\ntype StackViewportProps = ThemedClassName<PropsWithChildren>;\n\nconst StackViewport = forwardRef<HTMLDivElement, StackViewportProps>(\n  ({ classNames, children }, forwardedRef: ForwardedRef<HTMLDivElement>) => {\n    const { setViewport } = useStackContext('Stack.Viewport');\n    // Capture the viewport element for autoscroll while still honouring a forwarded ref.\n    const setRefs = useCallback(\n      (element: HTMLDivElement | null) => {\n        setViewport(element);\n        if (typeof forwardedRef === 'function') {\n          forwardedRef(element);\n        } else if (forwardedRef) {\n          forwardedRef.current = element;\n        }\n      },\n      [setViewport, forwardedRef],\n    );\n\n    return (\n      <ScrollArea.Viewport classNames={classNames} ref={setRefs}>\n        {children}\n      </ScrollArea.Viewport>\n    );\n  },\n);\n\nStackViewport.displayName = 'Stack.Viewport';\n\n//\n// Section\n//\n\ntype StackSectionProps = MosaicTileProps<StackSectionItem>;\n\n/**\n * A stack section rendered as a Mosaic tile: a 40px left rail (drag handle + section menu) beside the\n * main content area, which renders the object's content surface (or its title when collapsed). The\n * rail sticks to the top of the scroll viewport while the section is in view.\n */\n// TODO(burdon): All sections are intrinsic (content-sized) for now. Extrinsic content (e.g. a sketch\n//   with no intrinsic height) should later get a Mosaic-native resizable height affordance.\n\n// Inline grip glyph for the drag preview. The native drag image does not rasterize external SVG sprite\n// `<use>` icons (e.g. `@dxos/react-ui` `Icon`), so the preview uses plain inline SVG circles instead.\nconst DragHandleGlyph = () => (\n  <svg width={10} height={16} viewBox='0 0 10 16' aria-hidden className='shrink-0 text-description'>\n    {[3, 8, 13].flatMap((cy) =>\n      [2.5, 7.5].map((cx) => <circle key={`${cx}-${cy}`} cx={cx} cy={cy} r={1.1} fill='currentColor' />),\n    )}\n  </svg>\n);\n\nconst StackSection = ({ data, ...tileProps }: StackSectionProps) => {\n  const { id, object } = data;\n  const { t } = useTranslation(meta.profile.key);\n  const { attendableId: parentAttendableId, collapsed, onAdd, onMoveUp, onMoveDown, onCollapse, onDelete } = useStack();\n  const [optionsMenuOpen, setOptionsMenuOpen] = useState(false);\n  const attendableId = Paths.getCollectionObjectPath(parentAttendableId, object.id);\n  const attentionAttrs = useAttentionAttributes(attendableId);\n  const surfaceData = useMemo(() => ({ attendableId, subject: object }), [object, attendableId]);\n  const isCollapsed = collapsed.has(id);\n  const icon = Obj.getIcon(object)?.icon ?? 'ph--circle-dashed--regular';\n  const title = Obj.getLabel(object, { fallback: 'typename' }) ?? t('untitled-section.title');\n\n  const rail = (\n    <div className='grid grid-rows-[min-content_1fr]'>\n      <div className='p-1 bg-toolbar-surface'>\n        <DropdownMenu.Root open={optionsMenuOpen} onOpenChange={setOptionsMenuOpen}>\n          <DropdownMenu.Trigger asChild>\n            <AttentionSigilButton size='md' attendableId={attendableId}>\n              <Icon icon={icon} classNames='transition-opacity' />\n            </AttentionSigilButton>\n          </DropdownMenu.Trigger>\n          <DropdownMenu.Portal>\n            <DropdownMenu.Content>\n              <DropdownMenu.Viewport>\n                {isCollapsed ? (\n                  <DropdownMenu.Item onClick={() => onCollapse(id, false)} data-testid='section.expand'>\n                    <Icon icon='ph--arrows-out-line-vertical--regular' />\n                    <span className='ms-2 grow'>{t('expand.label')}</span>\n                  </DropdownMenu.Item>\n                ) : (\n                  <DropdownMenu.Item onClick={() => onCollapse(id, true)} data-testid='section.collapse'>\n                    <Icon icon='ph--arrows-in-line-vertical--regular' />\n                    <span className='ms-2 grow'>{t('collapse.label')}</span>\n                  </DropdownMenu.Item>\n                )}\n                <DropdownMenu.Separator />\n                <DropdownMenu.Item onClick={() => onAdd(id)} data-testid='section.add'>\n                  <Icon icon='ph--plus--regular' />\n                  <span className='ms-2 grow'>{t('add-section.label')}</span>\n                </DropdownMenu.Item>\n                <DropdownMenu.Item onClick={() => onMoveUp(id)} data-testid='section.move-up'>\n                  <Icon icon='ph--arrow-line-up--regular' />\n                  <span className='ms-2 grow'>{t('move-up.label')}</span>\n                </DropdownMenu.Item>\n                <DropdownMenu.Item onClick={() => onMoveDown(id)} data-testid='section.move-down'>\n                  <Icon icon='ph--arrow-line-down--regular' />\n                  <span className='ms-2 grow'>{t('move-down.label')}</span>\n                </DropdownMenu.Item>\n                <DropdownMenu.Separator />\n                <DropdownMenu.Item onClick={() => onDelete(id)} data-testid='section.remove'>\n                  <Icon icon='ph--trash--regular' />\n                  <span className='ms-2 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      </div>\n      <div className='p-1'>\n        {/* Inline glyph (not a sprite `Icon`) so the handle stays visible in the tile's native drag image. */}\n        <Mosaic.DragHandle\n          label={t('drag-handle.label')}\n          classNames='p-1 min-h-0 w-(--dx-rail-item) h-(--dx-rail-item)'\n          testId='section.drag-handle'\n        >\n          <DragHandleGlyph />\n        </Mosaic.DragHandle>\n      </div>\n    </div>\n  );\n\n  return (\n    <Mosaic.Tile\n      {...tileProps}\n      data={data}\n      classNames='grid grid-cols-[var(--dx-rail-action)_1fr] dx-attention-surface border border-subdued-separator'\n    >\n      <div className='border-e border-subdued-separator'>\n        <div className='sticky top-0 flex flex-col items-center'>{rail}</div>\n      </div>\n      <div {...attentionAttrs} className='min-w-0'>\n        <span className='sr-only'>{title}</span>\n        {isCollapsed ? (\n          <div className='h-(--dx-toolbar-size) flex p-1'>\n            <h2 className='flex items-center font-medium'>{title}</h2>\n          </div>\n        ) : (\n          <Surface.Surface type={AppSurface.Section} data={surfaceData} limit={1} />\n        )}\n      </div>\n    </Mosaic.Tile>\n  );\n};\n\nStackSection.displayName = 'Stack.Section';\n\n//\n// Stack\n//\n\nexport const Stack = {\n  Root: StackRoot,\n  Content: StackContent,\n  Viewport: StackViewport,\n  Section: StackSection,\n};\n\nexport type { StackContentProps, StackRootProps, StackSectionProps, StackViewportProps };\n"],
+  "mappings": "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",
+  "names": ["React", "createContext", "forwardRef", "useCallback", "useContext", "useMemo", "useState", "Surface", "Paths", "AppSurface", "AttentionSigilButton", "Obj", "DropdownMenu", "Icon", "ScrollArea", "useTranslation", "useAttentionAttributes", "Mosaic", "meta", "StackContext", "undefined", "useStackContext", "consumer", "context", "Error", "useStack", "StackRoot", "id", "eventHandler", "children", "attendableId", "collapsed", "onCollapse", "onAdd", "onMoveUp", "onMoveDown", "onDelete", "viewport", "setViewport", "value", "canDrop", "Provider", "Root", "displayName", "StackContent", "props", "forwardedRef", "Container", "asChild", "orientation", "autoScroll", "ref", "StackViewport", "classNames", "setRefs", "element", "current", "Viewport", "DragHandleGlyph", "svg", "width", "height", "viewBox", "aria-hidden", "className", "flatMap", "cy", "map", "cx", "circle", "key", "r", "fill", "StackSection", "data", "tileProps", "object", "t", "profile", "parentAttendableId", "optionsMenuOpen", "setOptionsMenuOpen", "getCollectionObjectPath", "attentionAttrs", "surfaceData", "subject", "isCollapsed", "has", "icon", "getIcon", "title", "getLabel", "fallback", "rail", "div", "open", "onOpenChange", "Trigger", "size", "Portal", "Content", "Item", "onClick", "data-testid", "span", "Separator", "Arrow", "DragHandle", "label", "testId", "Tile", "h2", "type", "Section", "limit", "Stack"]
 }

package/dist/lib/neutral/containers/index.mjs

@@ -1,6 +1,8 @@
+import "../chunk-J5LGTIGS.mjs";
+
 // src/containers/index.ts
 import { lazy } from "react";
-var StackArticle = lazy(() => import("../StackArticle-R7IS6TYR.mjs"));
+var StackArticle = lazy(() => import("../StackArticle-DDKRSUE7.mjs"));
 export {
   StackArticle
 };

package/dist/lib/neutral/containers/index.mjs.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../src/containers/index.ts"],
   "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type ComponentType, lazy } from 'react';\n\nexport const StackArticle: ComponentType<any> = lazy(() => import('./StackArticle'));\n"],
-  "mappings": ";AAIA,SAA6BA,YAAY;AAElC,IAAMC,eAAmCD,KAAK,MAAM,OAAO,8BAAA,CAAA;",
+  "mappings": ";;;AAIA,SAA6BA,YAAY;AAElC,IAAMC,eAAmCD,KAAK,MAAM,OAAO,8BAAA,CAAA;",
   "names": ["lazy", "StackArticle"]
 }

package/dist/lib/neutral/index.mjs

@@ -1,15 +1,14 @@
 import {
-  SectionSchema,
-  StackViewType
-} from "./chunk-T4NSFSPH.mjs";
+  Stack_exports
+} from "./chunk-FDNICBZZ.mjs";
 import {
   SECTION_IDENTIFIER,
   meta
-} from "./chunk-RGJSGQGF.mjs";
+} from "./chunk-ZOIZTRMG.mjs";
+import "./chunk-J5LGTIGS.mjs";
 export {
   SECTION_IDENTIFIER,
-  SectionSchema,
-  StackViewType,
+  Stack_exports as Stack,
   meta
 };
 //# sourceMappingURL=index.mjs.map