@dxos/react-ui-stack 0.6.14-main.f49f251 → 0.6.14-staging.4b6f9cf

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

@@ -1,85 +1,8 @@
-import '@dxos-theme';
+import { type Meta, type StoryObj } from '@storybook/react';
 import React from 'react';
-import { type MosaicOperation } from '@dxos/react-ui-mosaic';
-import { type StackSectionContent, type StackSectionItem } from './Section';
-import { type StackProps } from './Stack';
-declare const _default: {
-    title: string;
-    component: ({ id, type, SectionContent, items, separation, transform, onOver, onDrop, onAddSection, onDeleteSection, onNavigateToSection, onCollapseSection, ...props }: StackProps) => React.JSX.Element;
-    decorators: import("@storybook/react/*").Decorator[];
-    render: ({ debug, ...args }: DemoStackProps & {
-        debug: boolean;
-    }) => React.JSX.Element;
-};
-export default _default;
-export declare const Empty: {
-    args: {
-        SectionContent: ({ data }: {
-            data: StackSectionContent & {
-                title?: string;
-            };
-        }) => React.JSX.Element;
-        count: number;
-    };
-};
-export declare const Simple: {
-    args: {
-        SectionContent: ({ data }: {
-            data: StackSectionContent & {
-                title?: string;
-            };
-        }) => React.JSX.Element;
-        types: string[];
-        debug: boolean;
-    };
-};
-export declare const Complex: {
-    args: {
-        SectionContent: ({ data, }: StackSectionItem & {
-            data: StackSectionContent & {
-                title?: string;
-                body?: string;
-                image?: string;
-            };
-        }) => React.JSX.Element;
-        types: string[];
-        debug: boolean;
-    };
-};
-export declare const Transfer: {
-    args: {
-        SectionContent: ({ data }: {
-            data: StackSectionContent & {
-                title?: string;
-            };
-        }) => React.JSX.Element;
-        types: string[];
-        count: number;
-        className: string;
-    };
-    render: ({ debug, ...args }: DemoStackProps & {
-        debug: boolean;
-    }) => React.JSX.Element;
-    decorators: import("@storybook/react/*").Decorator[];
-};
-export declare const Copy: {
-    args: {
-        SectionContent: ({ data }: {
-            data: StackSectionContent & {
-                title?: string;
-            };
-        }) => React.JSX.Element;
-        types: string[];
-        className: string;
-    };
-    render: ({ debug, ...args }: DemoStackProps & {
-        debug: boolean;
-    }) => React.JSX.Element;
-    decorators: import("@storybook/react/*").Decorator[];
-};
-export type DemoStackProps = StackProps & {
-    types?: string[];
-    count?: number;
-    operation?: MosaicOperation;
-};
+declare const StorybookStack: () => React.JSX.Element;
+type Story = StoryObj<typeof StorybookStack>;
+export declare const Default: Story;
+declare const meta: Meta<typeof StorybookStack>;
+export default meta;
 //# sourceMappingURL=Stack.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Stack.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Stack.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAKrB,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D,OAAO,EAAsD,KAAK,eAAe,EAAQ,MAAM,uBAAuB,CAAC;AAGvH,OAAO,EAAE,KAAK,mBAAmB,EAAE,KAAK,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC5E,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;;;;;iCA4BlB,cAAc,GAAG;QAAE,KAAK,EAAE,OAAO,CAAA;KAAE;;AAJlE,wBAYE;AAEF,eAAO,MAAM,KAAK;;mCAjCe;YAAE,IAAI,EAAE,mBAAmB,GAAG;gBAAE,KAAK,CAAC,EAAE,MAAM,CAAA;aAAE,CAAA;SAAE;;;CAsClF,CAAC;AAEF,eAAO,MAAM,MAAM;;mCAxCc;YAAE,IAAI,EAAE,mBAAmB,GAAG;gBAAE,KAAK,CAAC,EAAE,MAAM,CAAA;aAAE,CAAA;SAAE;;;;CA8ClF,CAAC;AAEF,eAAO,MAAM,OAAO;;oCA1CjB,gBAAgB,GAAG;YAAE,IAAI,EAAE,mBAAmB,GAAG;gBAAE,KAAK,CAAC,EAAE,MAAM,CAAC;gBAAC,IAAI,CAAC,EAAE,MAAM,CAAC;gBAAC,KAAK,CAAC,EAAE,MAAM,CAAA;aAAE,CAAA;SAAE;;;;CAgDtG,CAAC;AAEF,eAAO,MAAM,QAAQ;;mCAxDY;YAAE,IAAI,EAAE,mBAAmB,GAAG;gBAAE,KAAK,CAAC,EAAE,MAAM,CAAA;aAAE,CAAA;SAAE;;;;;iCA+DpD,cAAc,GAAG;QAAE,KAAK,EAAE,OAAO,CAAA;KAAE;;CAcjE,CAAC;AAEF,eAAO,MAAM,IAAI;;mCA/EgB;YAAE,IAAI,EAAE,mBAAmB,GAAG;gBAAE,KAAK,CAAC,EAAE,MAAM,CAAA;aAAE,CAAA;SAAE;;;;iCAqFpD,cAAc,GAAG;QAAE,KAAK,EAAE,OAAO,CAAA;KAAE;;CAcjE,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,UAAU,GAAG;IACxC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,eAAe,CAAC;CAC7B,CAAC"}
+{"version":3,"file":"Stack.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Stack.stories.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAgC,MAAM,OAAO,CAAC;AAsBrD,QAAA,MAAM,cAAc,yBAwFnB,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,cAAc,CAAC,CAAC;AAE7C,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAKrC,CAAC;AAEF,eAAe,IAAI,CAAC"}

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

@@ -0,0 +1,19 @@
+import { type Orientation, type Size } from './Stack';
+import { type StackItemSize } from './StackItem';
+export type StackContextValue = {
+    orientation: Orientation;
+    separators: boolean;
+    rail: boolean;
+    size: Size;
+};
+export declare const StackContext: import("react").Context<StackContextValue>;
+export declare const useStack: () => StackContextValue;
+type StackItemContextValue = {
+    selfDragHandleRef: (element: HTMLDivElement | null) => void;
+    size: StackItemSize;
+    setSize: (nextSize: StackItemSize, commit?: boolean) => void;
+};
+export declare const StackItemContext: import("react").Context<StackItemContextValue>;
+export declare const useStackItem: () => StackItemContextValue;
+export {};
+//# sourceMappingURL=StackContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StackContext.d.ts","sourceRoot":"","sources":["../../../../src/components/StackContext.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,IAAI,EAAE,MAAM,SAAS,CAAC;AACtD,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,WAAW,EAAE,WAAW,CAAC;IACzB,UAAU,EAAE,OAAO,CAAC;IACpB,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,IAAI,CAAC;CACZ,CAAC;AAEF,eAAO,MAAM,YAAY,4CAKvB,CAAC;AAEH,eAAO,MAAM,QAAQ,yBAAiC,CAAC;AAEvD,KAAK,qBAAqB,GAAG;IAC3B,iBAAiB,EAAE,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;IAC5D,IAAI,EAAE,aAAa,CAAC;IACpB,OAAO,EAAE,CAAC,QAAQ,EAAE,aAAa,EAAE,MAAM,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9D,CAAC;AAEF,eAAO,MAAM,gBAAgB,gDAI3B,CAAC;AAEH,eAAO,MAAM,YAAY,6BAAqC,CAAC"}

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

@@ -0,0 +1,41 @@
+import { type Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import React, { type ComponentPropsWithRef } from 'react';
+import { type ThemedClassName } from '@dxos/react-ui';
+import { type StackItemContentProps } from './StackItemContent';
+import { type StackItemHeadingProps, type StackItemHeadingLabelProps } from './StackItemHeading';
+import { type StackItemSigilProps, type StackItemSigilAction, type StackItemSigilButtonProps } from './StackItemSigil';
+export type StackItemSize = number | 'min-content';
+export declare const DEFAULT_HORIZONTAL_SIZE = 44;
+export declare const DEFAULT_VERTICAL_SIZE = "min-content";
+export declare const DEFAULT_EXTRINSIC_SIZE = 44;
+export type StackItemData = {
+    id: string;
+    type: 'column' | 'card';
+};
+export type StackItemRootProps = ThemedClassName<ComponentPropsWithRef<'div'>> & {
+    item: Omit<StackItemData, 'type'>;
+    order?: number;
+    onRearrange?: (source: StackItemData, target: StackItemData, closestEdge: Edge | null) => void;
+    size?: StackItemSize;
+    onSizeChange?: (nextSize: StackItemSize) => void;
+    role?: 'article' | 'section';
+};
+export declare const StackItem: {
+    Root: React.ForwardRefExoticComponent<Omit<StackItemRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Content: ({ children, toolbar, statusbar, contentSize, classNames, ...props }: StackItemContentProps) => React.JSX.Element;
+    Heading: ({ children, classNames, ...props }: StackItemHeadingProps) => React.JSX.Element;
+    HeadingLabel: React.ForwardRefExoticComponent<Omit<StackItemHeadingLabelProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+    ResizeHandle: () => React.JSX.Element;
+    Sigil: React.ForwardRefExoticComponent<{
+        attendableId?: string;
+        triggerLabel: string;
+        actions?: StackItemSigilAction[][];
+        icon: string;
+        onAction?: (action: StackItemSigilAction) => void;
+    } & import("packages/ui/react-ui-attention/dist/types/src").Related & {
+        children?: React.ReactNode | undefined;
+    } & React.RefAttributes<HTMLButtonElement>>;
+    SigilButton: React.ForwardRefExoticComponent<Omit<StackItemSigilButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+};
+export type { StackItemContentProps, StackItemHeadingProps, StackItemHeadingLabelProps, StackItemSigilProps, StackItemSigilButtonProps, StackItemSigilAction, };
+//# sourceMappingURL=StackItem.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StackItem.d.ts","sourceRoot":"","sources":["../../../../src/components/StackItem.tsx"],"names":[],"mappings":"AAMA,OAAO,EAEL,KAAK,IAAI,EAEV,MAAM,uDAAuD,CAAC;AAI/D,OAAO,KAAK,EAAE,EAAyC,KAAK,qBAAqB,EAAe,MAAM,OAAO,CAAC;AAE9G,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAItD,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAClF,OAAO,EAGL,KAAK,qBAAqB,EAC1B,KAAK,0BAA0B,EAChC,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,EACzB,KAAK,yBAAyB,EAE/B,MAAM,kBAAkB,CAAC;AAE1B,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,aAAa,CAAC;AACnD,eAAO,MAAM,uBAAuB,KAA6B,CAAC;AAClE,eAAO,MAAM,qBAAqB,gBAAwC,CAAC;AAC3E,eAAO,MAAM,sBAAsB,KAAkD,CAAC;AAEtF,MAAM,MAAM,aAAa,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAA;CAAE,CAAC;AAEpE,MAAM,MAAM,kBAAkB,GAAG,eAAe,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,GAAG;IAC/E,IAAI,EAAE,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,MAAM,EAAE,aAAa,EAAE,WAAW,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IAC/F,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,KAAK,IAAI,CAAC;IACjD,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CAC9B,CAAC;AAyGF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;CAQrB,CAAC;AAEF,YAAY,EACV,qBAAqB,EACrB,qBAAqB,EACrB,0BAA0B,EAC1B,mBAAmB,EACnB,yBAAyB,EACzB,oBAAoB,GACrB,CAAC"}

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

@@ -0,0 +1,9 @@
+import React, { type ComponentPropsWithoutRef } from 'react';
+import { type ThemedClassName } from '@dxos/react-ui';
+export type StackItemContentProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & {
+    toolbar?: boolean;
+    statusbar?: boolean;
+    contentSize?: 'cover' | 'intrinsic';
+};
+export declare const StackItemContent: ({ children, toolbar, statusbar, contentSize, classNames, ...props }: StackItemContentProps) => React.JSX.Element;
+//# sourceMappingURL=StackItemContent.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StackItemContent.d.ts","sourceRoot":"","sources":["../../../../src/components/StackItemContent.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAKtD,MAAM,MAAM,qBAAqB,GAAG,eAAe,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,GAAG;IACrF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC;CACrC,CAAC;AAEF,eAAO,MAAM,gBAAgB,wEAO1B,qBAAqB,sBAyBvB,CAAC"}

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

@@ -0,0 +1,8 @@
+import React, { type ComponentPropsWithoutRef, type ComponentPropsWithRef } from 'react';
+import { type ThemedClassName } from '@dxos/react-ui';
+import { type AttendableId, type Related } from '@dxos/react-ui-attention';
+export type StackItemHeadingProps = ThemedClassName<ComponentPropsWithoutRef<'div'>>;
+export declare const StackItemHeading: ({ children, classNames, ...props }: StackItemHeadingProps) => React.JSX.Element;
+export type StackItemHeadingLabelProps = ThemedClassName<ComponentPropsWithRef<'h1'>> & AttendableId & Related;
+export declare const StackItemHeadingLabel: React.ForwardRefExoticComponent<Omit<StackItemHeadingLabelProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+//# sourceMappingURL=StackItemHeading.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StackItemHeading.d.ts","sourceRoot":"","sources":["../../../../src/components/StackItemHeading.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAE,KAAK,wBAAwB,EAAE,KAAK,qBAAqB,EAAc,MAAM,OAAO,CAAC;AAErG,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAgB,KAAK,YAAY,EAAE,KAAK,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAKzF,MAAM,MAAM,qBAAqB,GAAG,eAAe,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAC;AAErF,eAAO,MAAM,gBAAgB,uCAAwC,qBAAqB,sBAoBzF,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG,eAAe,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC,GAAG,YAAY,GAAG,OAAO,CAAC;AAE/G,eAAO,MAAM,qBAAqB,oHAejC,CAAC"}

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

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const StackItemResizeHandle: () => React.JSX.Element;
+//# sourceMappingURL=StackItemResizeHandle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StackItemResizeHandle.d.ts","sourceRoot":"","sources":["../../../../src/components/StackItemResizeHandle.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAoBvD,eAAO,MAAM,qBAAqB,yBAoEjC,CAAC"}

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

@@ -0,0 +1,31 @@
+import React, { type PropsWithChildren } from 'react';
+import { type ActionLike } from '@dxos/app-graph';
+import { type ButtonProps } from '@dxos/react-ui';
+import { type AttendableId, type Related } from '@dxos/react-ui-attention';
+export type KeyBinding = {
+    windows?: string;
+    macos?: string;
+    ios?: string;
+    linux?: string;
+    unknown?: string;
+};
+export type StackItemSigilAction = Pick<ActionLike, 'id' | 'properties' | 'data'>;
+export type StackItemSigilButtonProps = Omit<ButtonProps, 'variant'> & AttendableId & Related;
+export declare const StackItemSigilButton: React.ForwardRefExoticComponent<Omit<StackItemSigilButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export type StackItemSigilProps = PropsWithChildren<{
+    attendableId?: string;
+    triggerLabel: string;
+    actions?: StackItemSigilAction[][];
+    icon: string;
+    onAction?: (action: StackItemSigilAction) => void;
+} & Related>;
+export declare const StackItemSigil: React.ForwardRefExoticComponent<{
+    attendableId?: string;
+    triggerLabel: string;
+    actions?: StackItemSigilAction[][];
+    icon: string;
+    onAction?: (action: StackItemSigilAction) => void;
+} & Related & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=StackItemSigil.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StackItemSigil.d.ts","sourceRoot":"","sources":["../../../../src/components/StackItemSigil.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAY,KAAK,iBAAiB,EAAgC,MAAM,OAAO,CAAC;AAE9F,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAO,EAEL,KAAK,WAAW,EAMjB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,OAAO,EAAgB,MAAM,0BAA0B,CAAC;AAOzF,MAAM,MAAM,UAAU,GAAG;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,UAAU,EAAE,IAAI,GAAG,YAAY,GAAG,MAAM,CAAC,CAAC;AAElF,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,GAAG,YAAY,GAAG,OAAO,CAAC;AAE9F,eAAO,MAAM,oBAAoB,kHAgBhC,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,CACjD;IACE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,oBAAoB,EAAE,EAAE,CAAC;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC;CACnD,GAAG,OAAO,CACZ,CAAC;AAEF,eAAO,MAAM,cAAc;mBARR,MAAM;kBACP,MAAM;cACV,oBAAoB,EAAE,EAAE;UAC5B,MAAM;eACD,CAAC,MAAM,EAAE,oBAAoB,KAAK,IAAI;;;2CA6GpD,CAAC"}

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

@@ -1,3 +1,4 @@
 export * from './Stack';
-export { SectionToolbar, type SectionToolbarProps, sectionToolbarLayout, type StackSectionItem } from './Section';
+export * from './StackItem';
+export * from './LayoutControls';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAIA,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,oBAAoB,EAAE,KAAK,gBAAgB,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAIA,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC"}

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import type { StackSectionContent } from '../components/Section';
+import { type StackItemContentProps } from '../components';
 export declare const EditorContent: ({ data: { content } }: {
-    data: StackSectionContent & {
+    data: StackItemContentProps & {
         content?: string;
     };
 }) => React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"EditorContent.d.ts","sourceRoot":"","sources":["../../../../src/testing/EditorContent.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAiBxC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAEjE,eAAO,MAAM,aAAa,0BAAgC;IAAE,IAAI,EAAE,mBAAmB,GAAG;QAAE,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;CAAE,sBAmC7G,CAAC"}
+{"version":3,"file":"EditorContent.d.ts","sourceRoot":"","sources":["../../../../src/testing/EditorContent.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAiBxC,OAAO,EAAa,KAAK,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAEtE,eAAO,MAAM,aAAa,0BAAgC;IAAE,IAAI,EAAE,qBAAqB,GAAG;QAAE,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;CAAE,sBAmC/G,CAAC"}

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

@@ -1,3 +1,2 @@
-export * from './generator';
 export * from './stack-manager';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/testing/index.ts"],"names":[],"mappings":"AAIA,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/testing/index.ts"],"names":[],"mappings":"AAMA,cAAc,iBAAiB,CAAC"}

package/dist/types/src/testing/stack-manager.d.ts

@@ -3,7 +3,6 @@ export declare class StackManager {
     readonly locator: Locator;
     private readonly _page;
     constructor(locator: Locator);
-    empty(): Locator;
     sections(): Locator;
     order(): Promise<(string | null)[]>;
     section(index: number): SectionManager;

package/dist/types/src/testing/stack-manager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stack-manager.d.ts","sourceRoot":"","sources":["../../../../src/testing/stack-manager.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAQ,MAAM,kBAAkB,CAAC;AAEtD,qBAAa,YAAY;IAGX,QAAQ,CAAC,OAAO,EAAE,OAAO;IAFrC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAO;gBAER,OAAO,EAAE,OAAO;IAIrC,KAAK;IAIL,QAAQ;IAIR,KAAK;IAIL,OAAO,CAAC,KAAK,EAAE,MAAM;CAGtB;AAED,qBAAa,cAAc;IAGb,QAAQ,CAAC,OAAO,EAAE,OAAO;IAFrC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAO;gBAER,OAAO,EAAE,OAAO;IAI/B,EAAE;IAIF,MAAM;IAKN,UAAU;IAKV,MAAM,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,GAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAmB;CAehF"}
+{"version":3,"file":"stack-manager.d.ts","sourceRoot":"","sources":["../../../../src/testing/stack-manager.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAQ,MAAM,kBAAkB,CAAC;AAEtD,qBAAa,YAAY;IAGX,QAAQ,CAAC,OAAO,EAAE,OAAO;IAFrC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAO;gBAER,OAAO,EAAE,OAAO;IAIrC,QAAQ;IAIR,KAAK;IAIL,OAAO,CAAC,KAAK,EAAE,MAAM;CAGtB;AAED,qBAAa,cAAc;IAGb,QAAQ,CAAC,OAAO,EAAE,OAAO;IAFrC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAO;gBAER,OAAO,EAAE,OAAO;IAI/B,EAAE;IAIF,MAAM;IAKN,UAAU;IAKV,MAAM,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,GAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAmB;CAehF"}

package/dist/types/src/translations.d.ts

@@ -2,14 +2,14 @@ export declare const translationKey = "stack";
 declare const _default: {
     'en-US': {
         stack: {
-            'empty stack message': string;
-            'remove section label': string;
-            'navigate to section label': string;
-            'untitled section title': string;
-            'add section before label': string;
-            'add section after label': string;
-            'expand label': string;
-            'collapse label': string;
+            'resize label': string;
+            'pin start label': string;
+            'pin end label': string;
+            'increment start label': string;
+            'increment end label': string;
+            'solo plank label': string;
+            'close label': string;
+            'minify label': string;
         };
     };
 }[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-stack",
-  "version": "0.6.14-main.f49f251",
+  "version": "0.6.14-staging.4b6f9cf",
   "description": "A stack component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -16,7 +16,10 @@
     "./testing": {
       "types": "./dist/types/src/testing/index.d.ts",
       "browser": "./dist/lib/browser/testing/index.mjs",
-      "node": "./dist/lib/node-esm/testing/index.mjs"
+      "node": {
+        "require": "./dist/lib/node/testing/index.cjs",
+        "default": "./dist/lib/node-esm/testing/index.mjs"
+      }
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -38,16 +41,16 @@
     "@effect/schema": "^0.75.1",
     "@fluentui/react-tabster": "^9.19.0",
     "@radix-ui/primitive": "^1.0.0",
-    "@radix-ui/react-collapsible": "^1.0.2",
     "@radix-ui/react-compose-refs": "^1.0.0",
     "@radix-ui/react-context": "^1.0.0",
     "@radix-ui/react-menu": "^2.0.6",
     "@radix-ui/react-use-controllable-state": "^1.0.0",
     "react-resize-detector": "^11.0.1",
-    "@dxos/echo-schema": "0.6.14-main.f49f251",
-    "@dxos/react-ui-attention": "0.6.14-main.f49f251",
-    "@dxos/react-ui-mosaic": "0.6.14-main.f49f251",
-    "@dxos/react-ui-deck": "0.6.14-main.f49f251"
+    "@dxos/echo-schema": "0.6.14-staging.4b6f9cf",
+    "@dxos/keyboard": "0.6.14-staging.4b6f9cf",
+    "@dxos/react-ui-attention": "0.6.14-staging.4b6f9cf",
+    "@dxos/react-ui-mosaic": "0.6.14-staging.4b6f9cf",
+    "@dxos/util": "0.6.14-staging.4b6f9cf"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -56,25 +59,24 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/echo-schema": "0.6.14-main.f49f251",
-    "@dxos/random": "0.6.14-main.f49f251",
-    "@dxos/client": "0.6.14-main.f49f251",
-    "@dxos/react-ui": "0.6.14-main.f49f251",
-    "@dxos/react-ui-editor": "0.6.14-main.f49f251",
-    "@dxos/react-ui-theme": "0.6.14-main.f49f251",
-    "@dxos/react-ui-table": "0.6.14-main.f49f251",
-    "@dxos/storybook-utils": "0.6.14-main.f49f251",
-    "@dxos/test-utils": "0.6.14-main.f49f251",
-    "@dxos/util": "0.6.14-main.f49f251"
+    "@dxos/app-graph": "0.6.14-staging.4b6f9cf",
+    "@dxos/echo-schema": "0.6.14-staging.4b6f9cf",
+    "@dxos/random": "0.6.14-staging.4b6f9cf",
+    "@dxos/react-ui": "0.6.14-staging.4b6f9cf",
+    "@dxos/react-ui-editor": "0.6.14-staging.4b6f9cf",
+    "@dxos/client": "0.6.14-staging.4b6f9cf",
+    "@dxos/test-utils": "0.6.14-staging.4b6f9cf",
+    "@dxos/react-ui-theme": "0.6.14-staging.4b6f9cf",
+    "@dxos/storybook-utils": "0.6.14-staging.4b6f9cf"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/random": "0.6.14-main.f49f251",
-    "@dxos/react-ui": "0.6.14-main.f49f251",
-    "@dxos/client": "0.6.14-main.f49f251",
-    "@dxos/react-ui-theme": "0.6.14-main.f49f251"
+    "@dxos/client": "0.6.14-staging.4b6f9cf",
+    "@dxos/random": "0.6.14-staging.4b6f9cf",
+    "@dxos/react-ui-theme": "0.6.14-staging.4b6f9cf",
+    "@dxos/react-ui": "0.6.14-staging.4b6f9cf"
   },
   "publishConfig": {
     "access": "public"

package/src/components/LayoutControls.tsx

@@ -0,0 +1,132 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { forwardRef } from 'react';
+
+import {
+  Button,
+  ButtonGroup,
+  type ButtonGroupProps,
+  type ButtonProps,
+  Icon,
+  Tooltip,
+  useTranslation,
+} from '@dxos/react-ui';
+
+import { StackItem } from './StackItem';
+import { translationKey } from '../translations';
+
+export type LayoutControlEvent = 'solo' | 'close' | `${'pin' | 'increment'}-${'start' | 'end'}`;
+export type LayoutControlHandler = (event: LayoutControlEvent) => void;
+
+export type LayoutCapabilities = {
+  incrementStart?: boolean;
+  incrementEnd?: boolean;
+  solo?: boolean;
+};
+
+export type LayoutControlsProps = Omit<ButtonGroupProps, 'onClick'> & {
+  onClick?: LayoutControlHandler;
+  variant?: 'hide-disabled' | 'default';
+  close?: boolean | 'minify-start' | 'minify-end';
+  capabilities: LayoutCapabilities;
+  isSolo?: boolean;
+  pin?: 'start' | 'end' | 'both';
+};
+
+const LayoutControl = ({ icon, label, ...props }: Omit<ButtonProps, 'children'> & { label: string; icon: string }) => {
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <Button variant='ghost' {...props}>
+          <span className='sr-only'>{label}</span>
+          <Icon icon={icon} />
+        </Button>
+      </Tooltip.Trigger>
+      <Tooltip.Portal>
+        <Tooltip.Content side='bottom' classNames='z-[70]'>
+          {label}
+        </Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
+  );
+};
+
+export const LayoutControls = forwardRef<HTMLDivElement, LayoutControlsProps>(
+  (
+    { onClick, variant = 'default', capabilities: can, isSolo, pin, close = false, children, ...props },
+    forwardedRef,
+  ) => {
+    const { t } = useTranslation(translationKey);
+    const buttonClassNames = variant === 'hide-disabled' ? 'disabled:hidden !p-1' : '!p-1';
+
+    return (
+      <ButtonGroup {...props} ref={forwardedRef}>
+        {pin && !isSolo && ['both', 'start'].includes(pin) && (
+          <LayoutControl
+            label={t('pin start label')}
+            variant='ghost'
+            classNames={buttonClassNames}
+            onClick={() => onClick?.('pin-start')}
+            icon='ph--caret-line-left--regular'
+          />
+        )}
+
+        {can.solo && (
+          <LayoutControl
+            label={t('solo layout label')}
+            classNames={buttonClassNames}
+            onClick={() => onClick?.('solo')}
+            icon={isSolo ? 'ph--arrows-in--regular' : 'ph--arrows-out--regular'}
+          />
+        )}
+
+        {!isSolo && can.solo && (
+          <>
+            <LayoutControl
+              label={t('increment start label')}
+              disabled={!can.incrementStart}
+              classNames={buttonClassNames}
+              onClick={() => onClick?.('increment-start')}
+              icon='ph--caret-left--regular'
+            />
+            <LayoutControl
+              label={t('increment end label')}
+              disabled={!can.incrementEnd}
+              classNames={buttonClassNames}
+              onClick={() => onClick?.('increment-end')}
+              icon='ph--caret-right--regular'
+            />
+          </>
+        )}
+
+        {pin && !isSolo && ['both', 'end'].includes(pin) && (
+          <LayoutControl
+            label={t('pin end label')}
+            classNames={buttonClassNames}
+            onClick={() => onClick?.('pin-end')}
+            icon='ph--caret-line-right--regular'
+          />
+        )}
+
+        {close && !isSolo && (
+          <LayoutControl
+            label={t(`${typeof close === 'string' ? 'minify' : 'close'} label`)}
+            classNames={buttonClassNames}
+            onClick={() => onClick?.('close')}
+            data-testid='layoutHeading.close'
+            icon={
+              close === 'minify-start'
+                ? 'ph--caret-line-left--regular'
+                : close === 'minify-end'
+                  ? 'ph--caret-line-right--regular'
+                  : 'ph--minus--regular'
+            }
+          />
+        )}
+        {children}
+      </ButtonGroup>
+    );
+  },
+);

package/src/components/MenuSignifier.tsx

@@ -0,0 +1,33 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+export const MenuSignifierHorizontal = () => (
+  <svg
+    className='absolute block-end-[7px]'
+    width={20}
+    height={2}
+    viewBox='0 0 20 2'
+    stroke='currentColor'
+    opacity={0.5}
+  >
+    <line
+      x1={0.5}
+      y1={0.75}
+      x2={19}
+      y2={0.75}
+      strokeWidth={1.25}
+      strokeLinecap='round'
+      strokeDasharray='6 20'
+      strokeDashoffset='-6.5'
+    />
+  </svg>
+);
+
+export const MenuSignifierVertical = () => (
+  <svg className='absolute inline-start-1' width={2} height={18} viewBox='0 0 2 18' stroke='currentColor'>
+    <line x1={1} y1={3} x2={1} y2={18} strokeWidth={1.5} strokeLinecap='round' strokeDasharray='0 6' />
+  </svg>
+);