@dxos/react-ui-stack 0.8.4-main.f9ba587 → 0.8.4-main.fcc0d83b33

package/src/hooks/useStackDropForElements.ts

@@ -2,76 +2,90 @@
 // Copyright 2025 DXOS.org
 //
 
-import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
-import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
 import { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { useLayoutEffect, useState } from 'react';
 
-import { type StackItemRearrangeHandler, type StackItemData, type Orientation } from '../components';
+import { type Orientation, type StackItemData, type StackItemRearrangeHandler } from '../components';
+
+const noop = () => {};
+
+export type UseStackDropForElementsProps = {
+  id?: string;
+  element: HTMLDivElement | null;
+  scrollElement?: HTMLDivElement | null;
+  orientation: Orientation;
+  selfDroppable: boolean;
+  onRearrange?: StackItemRearrangeHandler;
+};
+
+export type UseStackDropForElements = {
+  dropping: boolean;
+};
 
 /**
- * Hook to handle drag and drop functionality for Stack components.
+ * Hook to handle drag-and-drop functionality for Stack components.
  */
 export const useStackDropForElements = ({
   id,
   element,
   scrollElement = element,
-  selfDroppable,
   orientation,
+  selfDroppable,
   onRearrange,
-}: {
-  id?: string;
-  element: HTMLDivElement | null;
-  scrollElement?: HTMLDivElement | null;
-  selfDroppable: boolean;
-  orientation: Orientation;
-  onRearrange?: StackItemRearrangeHandler;
-}) => {
+}: UseStackDropForElementsProps): UseStackDropForElements => {
   const [dropping, setDropping] = useState(false);
 
   useLayoutEffect(() => {
-    if (!element || !selfDroppable) {
+    if (!element) {
       return;
     }
 
     const acceptSourceType = orientation === 'horizontal' ? 'column' : 'card';
 
+    // TODO(burdon): Use monitor?
     return combine(
-      dropTargetForElements({
-        element,
-        getData: ({ input, element }) => {
-          return attachClosestEdge(
-            { id, type: orientation === 'horizontal' ? 'card' : 'column' },
-            { input, element, allowedEdges: [orientation === 'horizontal' ? 'left' : 'top'] },
-          );
-        },
-        onDragEnter: ({ source }) => {
-          if (source.data.type === acceptSourceType) {
-            setDropping(true);
-          }
-        },
-        onDrag: ({ source }) => {
-          if (source.data.type === acceptSourceType) {
-            setDropping(true);
-          }
-        },
-        onDragLeave: () => {
-          return setDropping(false);
-        },
-        onDrop: ({ self, source }) => {
-          setDropping(false);
-          if (source.data.type === acceptSourceType && selfDroppable && onRearrange) {
-            onRearrange(source.data as StackItemData, self.data as StackItemData, extractClosestEdge(self.data));
-          }
-        },
-      }),
-      autoScrollForElements({
-        element: scrollElement as Element,
-        getAllowedAxis: () => orientation,
-      }),
+      selfDroppable
+        ? dropTargetForElements({
+            element,
+            getData: ({ input, element }) => {
+              return attachClosestEdge(
+                { id, type: orientation === 'horizontal' ? 'card' : 'column' },
+                { input, element, allowedEdges: [orientation === 'horizontal' ? 'left' : 'top'] },
+              );
+            },
+            onDragEnter: ({ source }) => {
+              if (source.data.type === acceptSourceType) {
+                setDropping(true);
+              }
+            },
+            onDrag: ({ source }) => {
+              if (source.data.type === acceptSourceType) {
+                setDropping(true);
+              }
+            },
+            onDragLeave: () => {
+              return setDropping(false);
+            },
+            onDrop: ({ self, source }) => {
+              setDropping(false);
+              if (source.data.type === acceptSourceType && selfDroppable && onRearrange) {
+                onRearrange(source.data as StackItemData, self.data as StackItemData, extractClosestEdge(self.data));
+              }
+            },
+          })
+        : noop,
+
+      scrollElement
+        ? autoScrollForElements({
+            element: scrollElement,
+            getAllowedAxis: () => orientation,
+          })
+        : noop,
     );
-  }, [element, scrollElement, selfDroppable, orientation, id, onRearrange]);
+  }, [id, element, scrollElement, selfDroppable, orientation, onRearrange]);
 
   return { dropping };
 };

package/src/index.ts

@@ -2,8 +2,4 @@
 // Copyright 2022 DXOS.org
 //
 
-// TODO(thure): Consider exporting exemplars from separate endpoints.
-
 export * from './components';
-export * from './exemplars';
-export * from './translations';

package/src/{testing → playwright}/index.ts

@@ -1,5 +1,5 @@
 //
-// Copyright 2023 DXOS.org
+// Copyright 2025 DXOS.org
 //
 
 export * from './stack-manager';

package/src/playwright/playwright.config.ts

@@ -10,7 +10,7 @@ export default defineConfig({
   ...e2ePreset(import.meta.dirname),
   // TODO(wittjosiah): Avoid hard-coding ports.
   webServer: {
-    command: 'moon run storybook:serve-e2e -- --port=9003',
+    command: 'pnpm storybook dev --ci --quiet --port=9003 --config-dir=.storybook',
     port: 9003,
     reuseExistingServer: false,
   },

package/src/playwright/smoke.spec.ts

@@ -6,7 +6,7 @@ import { expect, test } from '@playwright/test';
 
 import { setupPage, storybookUrl } from '@dxos/test-utils/playwright';
 
-import { StackManager } from '../testing';
+import { StackManager } from './stack-manager';
 
 const PORT = 9003;
 

package/src/translations.ts

@@ -4,20 +4,20 @@
 
 import { type Resource } from '@dxos/react-ui';
 
-export const translationKey = 'react-ui-stack';
+export const translationKey = '@dxos/react-ui-stack';
 
 export const translations = [
   {
     'en-US': {
       [translationKey]: {
-        'resize label': 'Drag to resize',
-        'drag handle label': 'Drag to rearrange',
-        'pin start label': 'Pin to the left sidebar',
-        'pin end label': 'Pin to the right sidebar',
-        'increment start label': 'Move to the left',
-        'increment end label': 'Move to the right',
-        'close label': 'Close',
-        'minify label': 'Minify',
+        'resize.label': 'Drag to resize',
+        'drag-handle.label': 'Drag to rearrange',
+        'pin-start.label': 'Pin to the left sidebar',
+        'pin-end.label': 'Pin to the right sidebar',
+        'increment-start.label': 'Move to the left',
+        'increment-end.label': 'Move to the right',
+        'close.label': 'Close',
+        'minify.label': 'Minify',
       },
     },
   },

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

@@ -1 +0,0 @@
-{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../../src/components/defs.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uDAAuD,CAAC;AAElF,OAAO,EAAE,KAAK,IAAI,IAAI,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAE1D,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,IAAI,EAAE,MAAM,SAAS,CAAC;AAEtD,MAAM,MAAM,aAAa,GAAG,OAAO,CAAC;AAEpC,MAAM,MAAM,aAAa,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAA;CAAE,CAAC;AAEpE,MAAM,MAAM,yBAAyB,CAAC,IAAI,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,GAAG,aAAa,IAAI,CACnF,MAAM,EAAE,IAAI,EACZ,MAAM,EAAE,IAAI,EACZ,WAAW,EAAE,IAAI,GAAG,IAAI,KACrB,IAAI,CAAC;AAEV,MAAM,MAAM,iBAAiB,GAAG;IAC9B,WAAW,EAAE,WAAW,CAAC;IACzB,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,IAAI,CAAC;IACX,WAAW,CAAC,EAAE,yBAAyB,CAAC;CACzC,CAAC"}

package/dist/types/src/components/deprecated/LayoutControls.d.ts

@@ -1,19 +0,0 @@
-import React from 'react';
-import { type ButtonGroupProps } from '@dxos/react-ui';
-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';
-};
-export declare const LayoutControls: React.ForwardRefExoticComponent<Omit<LayoutControlsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=LayoutControls.d.ts.map

package/dist/types/src/components/deprecated/LayoutControls.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"LayoutControls.d.ts","sourceRoot":"","sources":["../../../../../src/components/deprecated/LayoutControls.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAe,KAAK,gBAAgB,EAAgD,MAAM,gBAAgB,CAAC;AAIlH,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,OAAO,GAAG,GAAG,KAAK,GAAG,WAAW,IAAI,OAAO,GAAG,KAAK,EAAE,CAAC;AAChG,MAAM,MAAM,oBAAoB,GAAG,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;AAEvE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,gBAAgB,EAAE,SAAS,CAAC,GAAG;IACpE,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B,OAAO,CAAC,EAAE,eAAe,GAAG,SAAS,CAAC;IACtC,KAAK,CAAC,EAAE,OAAO,GAAG,cAAc,GAAG,YAAY,CAAC;IAChD,YAAY,EAAE,kBAAkB,CAAC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,GAAG,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;CAChC,CAAC;AAMF,eAAO,MAAM,cAAc,yGA4E1B,CAAC"}

package/dist/types/src/exemplars/Card/Card.d.ts

@@ -1,57 +0,0 @@
-import React, { type PropsWithChildren } from 'react';
-import { cardChrome, cardRoot, cardHeading, cardText, cardSpacing } from './fragments';
-type CardPosterProps = {
-    alt: string;
-    aspect?: 'video' | 'auto';
-} & Partial<{
-    image: string;
-    icon: string;
-}>;
-export declare const Card: {
-    StaticRoot: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className"> & {
-        classNames?: import("@dxos/react-ui-types").ClassNameValue;
-    } & {
-        asChild?: boolean;
-    } & React.RefAttributes<HTMLDivElement>>;
-    SurfaceRoot: ({ role, children }: PropsWithChildren<{
-        role?: string;
-    }>) => React.JSX.Element;
-    Heading: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className"> & {
-        classNames?: import("@dxos/react-ui-types").ClassNameValue;
-    } & {
-        asChild?: boolean;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Toolbar: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-toolbar").ToolbarProps, "className"> & {
-        classNames?: import("@dxos/react-ui-types").ClassNameValue;
-    } & {
-        layoutManaged?: boolean;
-    } & React.RefAttributes<HTMLDivElement>>;
-    ToolbarIconButton: React.ForwardRefExoticComponent<Omit<import("@dxos/react-ui").IconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-    ToolbarSeparator: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-separator").SeparatorProps, "className"> & {
-        classNames?: import("@dxos/react-ui-types").ClassNameValue;
-    } & {
-        subdued?: boolean;
-    } & {
-        variant?: "gap" | "line";
-    } & React.RefAttributes<HTMLDivElement>>;
-    DragHandle: React.ForwardRefExoticComponent<{
-        toolbarItem?: boolean;
-    } & React.RefAttributes<HTMLButtonElement>>;
-    DragPreview: ({ children }: import("../..").StackItemDragPreviewProps) => React.ReactPortal | null;
-    Menu: React.FC<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
-    }>;
-    Poster: (props: CardPosterProps) => React.JSX.Element | undefined;
-    Chrome: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className"> & {
-        classNames?: import("@dxos/react-ui-types").ClassNameValue;
-    } & {
-        asChild?: boolean;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Text: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className"> & {
-        classNames?: import("@dxos/react-ui-types").ClassNameValue;
-    } & {
-        asChild?: boolean;
-    } & React.RefAttributes<HTMLParagraphElement>>;
-};
-export { cardRoot, cardHeading, cardText, cardChrome, cardSpacing };
-//# sourceMappingURL=Card.d.ts.map

package/dist/types/src/exemplars/Card/Card.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../../src/exemplars/Card/Card.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,EAKZ,KAAK,iBAAiB,EACvB,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAmFvF,KAAK,eAAe,GAAG;IACrB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC3B,GAAG,OAAO,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAgD7C,eAAO,MAAM,IAAI;;;;kBAlIqE,OAAO;;sCAmBtC,iBAAiB,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;;;;kBAnBL,OAAO;;;;;;;;;;;;;;;;sBA4DxB,OAAO;;;;;;oBAwBjD,eAAe;;;;kBApF4C,OAAO;;;;;kBAAP,OAAO;;CA+I5F,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,UAAU,EAAE,WAAW,EAAE,CAAC"}

package/dist/types/src/exemplars/Card/Card.stories.d.ts

@@ -1,13 +0,0 @@
-import '@dxos-theme';
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-type CardStoryProps = {
-    title: string;
-    description: string;
-    image: string;
-    showImage: boolean;
-    showIcon: boolean;
-};
-declare const meta: Meta<CardStoryProps>;
-export default meta;
-export declare const Default: StoryObj<CardStoryProps>;
-//# sourceMappingURL=Card.stories.d.ts.map

package/dist/types/src/exemplars/Card/Card.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Card.stories.d.ts","sourceRoot":"","sources":["../../../../../src/exemplars/Card/Card.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAWjE,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,cAAc,CAgC9B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,cAAc,CAgB5C,CAAC"}

package/dist/types/src/exemplars/Card/CardDragPreview.d.ts

@@ -1,6 +0,0 @@
-import React, { type PropsWithChildren } from 'react';
-export declare const CardDragPreview: {
-    Root: ({ children }: PropsWithChildren<{}>) => React.JSX.Element;
-    Content: ({ children }: PropsWithChildren<{}>) => React.JSX.Element;
-};
-//# sourceMappingURL=CardDragPreview.d.ts.map

package/dist/types/src/exemplars/Card/CardDragPreview.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CardDragPreview.d.ts","sourceRoot":"","sources":["../../../../../src/exemplars/Card/CardDragPreview.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AActD,eAAO,MAAM,eAAe;yBARe,iBAAiB,CAAC,EAAE,CAAC;4BAIlB,iBAAiB,CAAC,EAAE,CAAC;CAOlE,CAAC"}

package/dist/types/src/exemplars/Card/fragments.d.ts

@@ -1,12 +0,0 @@
-export declare const cardRoot = "rounded overflow-hidden bg-cardSurface border border-separator dark:border-subduedSeparator dx-focus-ring-group-y-indicator relative min-bs-[--rail-item] group/card";
-export declare const cardSpacing = "pli-cardSpacingInline mlb-cardSpacingBlock";
-export declare const labelSpacing = "mbs-inputSpacingBlock mbe-labelSpacingBlock";
-export declare const cardDialogContent = "p-0 bs-content min-bs-[8rem] max-bs-full md:max-is-[32rem] overflow-hidden";
-export declare const cardDialogHeader = "pli-cardSpacingInline mbs-cardSpacingBlock flex justify-between";
-export declare const cardDialogOverflow = "overflow-y-auto min-bs-0 flex-1";
-export declare const cardDialogPaddedOverflow = "overflow-y-auto min-bs-0 flex-1 plb-cardSpacingBlock";
-export declare const cardDialogSearchListRoot = "pli-cardSpacingInline pbs-cardSpacingBlock [&>input]:mbe-0 min-bs-0 flex-1 flex flex-col";
-export declare const cardText = "pli-cardSpacingInline mlb-cardSpacingBlock";
-export declare const cardHeading = "text-lg font-medium line-clamp-2";
-export declare const cardChrome = "pli-[--dx-cardSpacingChrome] mlb-[--dx-cardSpacingChrome] [&_.dx-button]:text-start [&_.dx-button]:is-full";
-//# sourceMappingURL=fragments.d.ts.map

package/dist/types/src/exemplars/Card/fragments.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"fragments.d.ts","sourceRoot":"","sources":["../../../../../src/exemplars/Card/fragments.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,QAAQ,yKACmJ,CAAC;AAEzK,eAAO,MAAM,WAAW,+CAA+C,CAAC;AACxE,eAAO,MAAM,YAAY,gDAAgD,CAAC;AAE1E,eAAO,MAAM,iBAAiB,+EAA+E,CAAC;AAC9G,eAAO,MAAM,gBAAgB,oEAAoE,CAAC;AAClG,eAAO,MAAM,kBAAkB,oCAAoC,CAAC;AACpE,eAAO,MAAM,wBAAwB,yDAA+C,CAAC;AACrF,eAAO,MAAM,wBAAwB,6FACuD,CAAC;AAE7F,eAAO,MAAM,QAAQ,+CAAc,CAAC;AAEpC,eAAO,MAAM,WAAW,qCAAqC,CAAC;AAE9D,eAAO,MAAM,UAAU,+GACuF,CAAC"}

package/dist/types/src/exemplars/Card/index.d.ts

@@ -1,4 +0,0 @@
-export * from './Card';
-export * from './CardDragPreview';
-export * from './fragments';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/src/exemplars/Card/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/exemplars/Card/index.ts"],"names":[],"mappings":"AAIA,cAAc,QAAQ,CAAC;AACvB,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC"}

package/dist/types/src/exemplars/CardStack/CardStack.d.ts

@@ -1,40 +0,0 @@
-import React from 'react';
-import { type StackProps } from '../../components';
-declare const cardStackHeading = "mli-2 order-first bg-transparent rounded-bs-md flex items-center";
-declare const cardStackFooter = "plb-2 mli-2 border-bs border-transparent [[data-scroll-separator-end=\"true\"]_&]:border-subduedSeparator";
-declare const cardStackContent: string[];
-declare const cardStackRoot = "flex flex-col pli-2 plb-2";
-declare const cardStackItem = "contain-layout pli-2 plb-1 first-of-type:pbs-0 last-of-type:pbe-0";
-export declare const CardStack: {
-    Root: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className"> & {
-        classNames?: import("@dxos/react-ui-types").ClassNameValue;
-    } & {
-        asChild?: boolean;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Content: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className"> & {
-        classNames?: import("@dxos/react-ui-types").ClassNameValue;
-    } & {
-        asChild?: boolean;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Stack: React.ForwardRefExoticComponent<Omit<Omit<StackProps, "orientation" | "rail" | "size" | "separatorOnScroll">, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Heading: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className"> & {
-        classNames?: import("@dxos/react-ui-types").ClassNameValue;
-    } & {
-        asChild?: boolean;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Footer: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className"> & {
-        classNames?: import("@dxos/react-ui-types").ClassNameValue;
-    } & {
-        asChild?: boolean;
-    } & React.RefAttributes<HTMLDivElement>>;
-    DragHandle: React.ForwardRefExoticComponent<{
-        toolbarItem?: boolean;
-    } & React.RefAttributes<HTMLButtonElement>>;
-    Item: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className"> & {
-        classNames?: import("@dxos/react-ui-types").ClassNameValue;
-    } & {
-        asChild?: boolean;
-    } & React.RefAttributes<HTMLDivElement>>;
-};
-export { cardStackRoot, cardStackFooter, cardStackHeading, cardStackContent, cardStackItem };
-//# sourceMappingURL=CardStack.d.ts.map

package/dist/types/src/exemplars/CardStack/CardStack.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CardStack.d.ts","sourceRoot":"","sources":["../../../../../src/exemplars/CardStack/CardStack.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAKzE,OAAO,EAA8C,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AA+B/F,QAAA,MAAM,gBAAgB,qEAAqE,CAAC;AAgB5F,QAAA,MAAM,eAAe,8GACsF,CAAC;AAgB5G,QAAA,MAAM,gBAAgB,UAGrB,CAAC;AAgBF,QAAA,MAAM,aAAa,8BAA8B,CAAC;AAgBlD,QAAA,MAAM,aAAa,sEAAsE,CAAC;AAgB1F,eAAO,MAAM,SAAS;;;;kBAhHqE,OAAO;;;;;kBAAP,OAAO;;;;;;kBAAP,OAAO;;;;;kBAAP,OAAO;;;;;;;;kBAAP,OAAO;;CAwHjG,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,aAAa,EAAE,CAAC"}

package/dist/types/src/exemplars/CardStack/CardStack.stories.d.ts

@@ -1,9 +0,0 @@
-import '@dxos-theme';
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React from 'react';
-declare const CardStackStory: () => React.JSX.Element;
-declare const meta: Meta<typeof CardStackStory>;
-export default meta;
-type Story = StoryObj<typeof CardStackStory>;
-export declare const Default: Story;
-//# sourceMappingURL=CardStack.stories.d.ts.map

package/dist/types/src/exemplars/CardStack/CardStack.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CardStack.stories.d.ts","sourceRoot":"","sources":["../../../../../src/exemplars/CardStack/CardStack.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAGrB,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAgC,MAAM,OAAO,CAAC;AAyBrD,QAAA,MAAM,cAAc,yBA8HnB,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAIrC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,cAAc,CAAC,CAAC;AAE7C,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC"}

package/dist/types/src/exemplars/CardStack/CardStackDragPreview.d.ts

@@ -1,9 +0,0 @@
-import React, { type PropsWithChildren } from 'react';
-import { type StackProps } from '../../components';
-export declare const CardStackDragPreview: {
-    Root: ({ children }: PropsWithChildren<{}>) => React.JSX.Element;
-    Heading: ({ children }: PropsWithChildren<{}>) => React.JSX.Element;
-    Content: ({ children, itemsCount, }: PropsWithChildren<Pick<StackProps, "itemsCount">>) => React.JSX.Element;
-    Footer: ({ children }: PropsWithChildren<{}>) => React.JSX.Element;
-};
-//# sourceMappingURL=CardStackDragPreview.d.ts.map

package/dist/types/src/exemplars/CardStack/CardStackDragPreview.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CardStackDragPreview.d.ts","sourceRoot":"","sources":["../../../../../src/exemplars/CardStack/CardStackDragPreview.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAKtD,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AA8CnD,eAAO,MAAM,oBAAoB;yBA3Ce,iBAAiB,CAAC,EAAE,CAAC;4BAUlB,iBAAiB,CAAC,EAAE,CAAC;yCAmBrE,iBAAiB,CAAC,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC;2BAUF,iBAAiB,CAAC,EAAE,CAAC;CAStE,CAAC"}

package/dist/types/src/exemplars/CardStack/index.d.ts

@@ -1,3 +0,0 @@
-export * from './CardStack';
-export * from './CardStackDragPreview';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/src/exemplars/CardStack/index.d.ts.map

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

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

@@ -1,3 +0,0 @@
-export * from './Card';
-export * from './CardStack';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/exemplars/index.ts"],"names":[],"mappings":"AAIA,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC"}

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

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

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

@@ -1 +0,0 @@
-{"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,IAAI,OAAO;IAInB,KAAK;IAIL,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,cAAc;CAGvC;AAED,qBAAa,cAAc;IAGb,QAAQ,CAAC,OAAO,EAAE,OAAO;IAFrC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAO;gBAER,OAAO,EAAE,OAAO;IAI/B,EAAE,IAAI,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC;IAI5B,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC;IAKvB,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC;IAK3B,MAAM,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,GAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAmB,GAAG,OAAO,CAAC,IAAI,CAAC;CAehG"}

package/src/components/deprecated/LayoutControls.tsx

@@ -1,109 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { forwardRef } from 'react';
-
-import { ButtonGroup, type ButtonGroupProps, type ButtonProps, IconButton, 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 <IconButton iconOnly icon={icon} label={label} tooltipSide='bottom' variant='ghost' {...props} />;
-};
-
-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>
-    );
-  },
-);