@dxos/react-ui-stack 0.6.14-staging.e15392e → 0.7.1-staging.599df14

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,8 @@
+import React, { type ComponentPropsWithoutRef } from 'react';
+import { type ThemedClassName } from '@dxos/react-ui';
+export type StackItemContentProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & {
+    toolbar?: boolean;
+    statusbar?: boolean;
+};
+export declare const StackItemContent: ({ children, toolbar, statusbar, 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;CACrB,CAAC;AAEF,eAAO,MAAM,gBAAgB,2DAM1B,qBAAqB,sBAwBvB,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/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,13 @@ 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;
+            'close label': string;
+            'minify label': string;
         };
     };
 }[];

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

@@ -1 +1 @@
-{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,UAAU,CAAC;;;;;;;;;;;;;;;AAEtC,wBAeE"}
+{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,UAAU,CAAC;;;;;;;;;;;;;;AAEtC,wBAcE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-stack",
-  "version": "0.6.14-staging.e15392e",
+  "version": "0.7.1-staging.599df14",
   "description": "A stack component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -38,19 +38,19 @@
     "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
     "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.3",
-    "@effect/schema": "^0.75.1",
+    "@effect/schema": "^0.75.5",
     "@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-staging.e15392e",
-    "@dxos/react-ui-deck": "0.6.14-staging.e15392e",
-    "@dxos/react-ui-mosaic": "0.6.14-staging.e15392e",
-    "@dxos/react-ui-attention": "0.6.14-staging.e15392e"
+    "@dxos/react-ui-mosaic": "0.7.1-staging.599df14",
+    "@dxos/echo-schema": "0.7.1-staging.599df14",
+    "@dxos/react-ui-attention": "0.7.1-staging.599df14",
+    "@dxos/keyboard": "0.7.1-staging.599df14",
+    "@dxos/util": "0.7.1-staging.599df14"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -59,25 +59,24 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/echo-schema": "0.6.14-staging.e15392e",
-    "@dxos/client": "0.6.14-staging.e15392e",
-    "@dxos/random": "0.6.14-staging.e15392e",
-    "@dxos/react-ui": "0.6.14-staging.e15392e",
-    "@dxos/react-ui-editor": "0.6.14-staging.e15392e",
-    "@dxos/react-ui-table": "0.6.14-staging.e15392e",
-    "@dxos/react-ui-theme": "0.6.14-staging.e15392e",
-    "@dxos/storybook-utils": "0.6.14-staging.e15392e",
-    "@dxos/test-utils": "0.6.14-staging.e15392e",
-    "@dxos/util": "0.6.14-staging.e15392e"
+    "@dxos/random": "0.7.1-staging.599df14",
+    "@dxos/echo-schema": "0.7.1-staging.599df14",
+    "@dxos/app-graph": "0.7.1-staging.599df14",
+    "@dxos/react-ui": "0.7.1-staging.599df14",
+    "@dxos/client": "0.7.1-staging.599df14",
+    "@dxos/react-ui-theme": "0.7.1-staging.599df14",
+    "@dxos/react-ui-editor": "0.7.1-staging.599df14",
+    "@dxos/storybook-utils": "0.7.1-staging.599df14",
+    "@dxos/test-utils": "0.7.1-staging.599df14"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/client": "0.6.14-staging.e15392e",
-    "@dxos/react-ui": "0.6.14-staging.e15392e",
-    "@dxos/random": "0.6.14-staging.e15392e",
-    "@dxos/react-ui-theme": "0.6.14-staging.e15392e"
+    "@dxos/client": "0.7.1-staging.599df14",
+    "@dxos/random": "0.7.1-staging.599df14",
+    "@dxos/react-ui-theme": "0.7.1-staging.599df14",
+    "@dxos/react-ui": "0.7.1-staging.599df14"
   },
   "publishConfig": {
     "access": "public"

package/src/components/LayoutControls.tsx

@@ -0,0 +1,131 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { forwardRef } from 'react';
+
+import {
+  Button,
+  ButtonGroup,
+  type ButtonGroupProps,
+  type ButtonProps,
+  Icon,
+  Tooltip,
+  useTranslation,
+} from '@dxos/react-ui';
+
+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--x--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>
+);