@dxos/react-ui-stack 0.8.2 → 0.8.3-main.672df60

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

@@ -0,0 +1,58 @@
+import React, { type PropsWithChildren } from 'react';
+import { cardChrome, cardContent, cardHeading, cardRoot, cardText } from './fragments';
+type CardPosterProps = {
+    alt: string;
+    aspect?: 'video' | 'auto';
+} & Partial<{
+    image: string;
+    icon: string;
+}>;
+export declare const Card: {
+    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>>;
+    Container: ({ 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;
+    } & 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;
+    } & {
+        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, cardContent, cardHeading, cardText, cardChrome };
+//# sourceMappingURL=Card.d.ts.map

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

@@ -0,0 +1 @@
+{"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,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AA6FvF,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;;;;kBA5IqE,OAAO;;;;;kBAAP,OAAO;;oCAiCzC,iBAAiB,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;;;;kBAjCF,OAAO;;;;;;;;;;;;sBAsExB,OAAO;;;;;;oBAwBjD,eAAe;;;;kBA9F4C,OAAO;;;;;kBAAP,OAAO;;CA0J5F,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC"}

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

@@ -0,0 +1 @@
+//# sourceMappingURL=Card.stories-todo.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.stories-todo.d.ts","sourceRoot":"","sources":["../../../../../src/exemplars/Card/Card.stories-todo.tsx"],"names":[],"mappings":""}

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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,6 @@
+export declare const cardRoot = "contain-layout pli-2 plb-1 first-of-type:pbs-0 last-of-type:pbe-0";
+export declare const cardContent = "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 cardText = "pli-3 mlb-3";
+export declare const cardHeading = "text-lg font-medium line-clamp-2";
+export declare const cardChrome = "pli-1.5 mlb-1.5 [&_.dx-button]:pli-1.5 [&_.dx-button]:text-start [&_.dx-button]:is-full";
+//# sourceMappingURL=fragments.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fragments.d.ts","sourceRoot":"","sources":["../../../../../src/exemplars/Card/fragments.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,QAAQ,sEAAsE,CAAC;AAE5F,eAAO,MAAM,WAAW,yKACgJ,CAAC;AAEzK,eAAO,MAAM,QAAQ,gBAAgB,CAAC;AAEtC,eAAO,MAAM,WAAW,qCAAqC,CAAC;AAE9D,eAAO,MAAM,UAAU,4FAA4F,CAAC"}

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

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

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

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

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

@@ -0,0 +1,34 @@
+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";
+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>>;
+};
+export { cardStackRoot, cardStackFooter, cardStackHeading, cardStackContent };
+//# sourceMappingURL=CardStack.d.ts.map

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

@@ -0,0 +1 @@
+{"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;AA8B/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,eAAO,MAAM,SAAS;;;;kBA/FqE,OAAO;;;;;kBAAP,OAAO;;;;;;kBAAP,OAAO;;;;;kBAAP,OAAO;;;;;CAsGjG,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC"}

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

@@ -0,0 +1 @@
+//# sourceMappingURL=CardStack.stories-todo.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CardStack.stories-todo.d.ts","sourceRoot":"","sources":["../../../../../src/exemplars/CardStack/CardStack.stories-todo.tsx"],"names":[],"mappings":""}

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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1 @@
+{"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

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

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

@@ -0,0 +1 @@
+{"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

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

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

@@ -0,0 +1 @@
+{"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/hooks/useStackDropForElements.d.ts

@@ -2,9 +2,10 @@ import { type StackItemRearrangeHandler, type Orientation } from '../components'
 /**
  * Hook to handle drag and drop functionality for Stack components.
  */
-export declare const useStackDropForElements: ({ id, element, selfDroppable, orientation, onRearrange, }: {
+export declare const useStackDropForElements: ({ id, element, scrollElement, selfDroppable, orientation, onRearrange, }: {
     id?: string;
     element: HTMLDivElement | null;
+    scrollElement?: HTMLDivElement | null;
     selfDroppable: boolean;
     orientation: Orientation;
     onRearrange?: StackItemRearrangeHandler;

package/dist/types/src/hooks/useStackDropForElements.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useStackDropForElements.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useStackDropForElements.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,KAAK,yBAAyB,EAAsB,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAErG;;GAEG;AACH,eAAO,MAAM,uBAAuB,GAAI,2DAMrC;IACD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,cAAc,GAAG,IAAI,CAAC;IAC/B,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,WAAW,CAAC;IACzB,WAAW,CAAC,EAAE,yBAAyB,CAAC;CACzC;;CA4CA,CAAC"}
+{"version":3,"file":"useStackDropForElements.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useStackDropForElements.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,KAAK,yBAAyB,EAAsB,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAErG;;GAEG;AACH,eAAO,MAAM,uBAAuB,GAAI,0EAOrC;IACD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,cAAc,GAAG,IAAI,CAAC;IAC/B,aAAa,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IACtC,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,WAAW,CAAC;IACzB,WAAW,CAAC,EAAE,yBAAyB,CAAC;CACzC;;CA4CA,CAAC"}

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

@@ -1,3 +1,4 @@
 export * from './components';
+export * from './exemplars';
 export { default as translations } from './translations';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC;AAG7B,cAAc,aAAa,CAAC;AAE5B,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

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

@@ -3,6 +3,7 @@ declare const _default: {
     'en-US': {
         stack: {
             'resize label': string;
+            'drag handle label': string;
             'pin start label': string;
             'pin end label': string;
             'increment start 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,wBAcE"}
+{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,UAAU,CAAC;;;;;;;;;;;;;;;AAEtC,wBAeE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-stack",
-  "version": "0.8.2",
+  "version": "0.8.3-main.672df60",
   "description": "A stack component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -45,15 +45,16 @@
     "@radix-ui/react-compose-refs": "1.1.1",
     "@radix-ui/react-context": "1.1.1",
     "@radix-ui/react-menu": "2.1.6",
+    "@radix-ui/react-primitive": "2.0.2",
     "@radix-ui/react-slot": "1.1.2",
     "@radix-ui/react-use-controllable-state": "1.1.0",
     "react-resize-detector": "^11.0.1",
-    "@dxos/echo-schema": "0.8.2",
-    "@dxos/live-object": "0.8.2",
-    "@dxos/keyboard": "0.8.2",
-    "@dxos/react-ui-attention": "0.8.2",
-    "@dxos/react-ui-dnd": "0.8.2",
-    "@dxos/util": "0.8.2"
+    "@dxos/echo-schema": "0.8.3-main.672df60",
+    "@dxos/keyboard": "0.8.3-main.672df60",
+    "@dxos/live-object": "0.8.3-main.672df60",
+    "@dxos/react-ui-attention": "0.8.3-main.672df60",
+    "@dxos/react-ui-dnd": "0.8.3-main.672df60",
+    "@dxos/util": "0.8.3-main.672df60"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -62,24 +63,24 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/app-graph": "0.8.2",
-    "@dxos/echo-schema": "0.8.2",
-    "@dxos/client": "0.8.2",
-    "@dxos/react-ui": "0.8.2",
-    "@dxos/random": "0.8.2",
-    "@dxos/react-ui-theme": "0.8.2",
-    "@dxos/react-ui-editor": "0.8.2",
-    "@dxos/storybook-utils": "0.8.2",
-    "@dxos/test-utils": "0.8.2"
+    "@dxos/app-graph": "0.8.3-main.672df60",
+    "@dxos/client": "0.8.3-main.672df60",
+    "@dxos/random": "0.8.3-main.672df60",
+    "@dxos/echo-schema": "0.8.3-main.672df60",
+    "@dxos/react-ui": "0.8.3-main.672df60",
+    "@dxos/react-ui-theme": "0.8.3-main.672df60",
+    "@dxos/storybook-utils": "0.8.3-main.672df60",
+    "@dxos/react-ui-editor": "0.8.3-main.672df60",
+    "@dxos/test-utils": "0.8.3-main.672df60"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/random": "0.8.2",
-    "@dxos/client": "0.8.2",
-    "@dxos/react-ui": "0.8.2",
-    "@dxos/react-ui-theme": "0.8.2"
+    "@dxos/client": "0.8.3-main.672df60",
+    "@dxos/random": "0.8.3-main.672df60",
+    "@dxos/react-ui": "0.8.3-main.672df60",
+    "@dxos/react-ui-theme": "0.8.3-main.672df60"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Stack/Stack.tsx

@@ -12,6 +12,7 @@ import React, {
   useState,
   useMemo,
   useCallback,
+  useEffect,
 } from 'react';
 
 import { type ThemedClassName, ListItem } from '@dxos/react-ui';
@@ -74,6 +75,7 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>(
     const { dropping } = useStackDropForElements({
       id: props.id,
       element: getDropElement && stackElement ? getDropElement(stackElement) : stackElement,
+      scrollElement: stackElement,
       selfDroppable,
       orientation,
       onRearrange,
@@ -106,6 +108,22 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>(
       }
     }, [rail, orientation, size]);
 
+    useEffect(() => {
+      if (!(stackElement && Number.isFinite(separatorOnScroll))) {
+        return;
+      }
+
+      const observer = new MutationObserver(() => {
+        handleScroll();
+      });
+
+      observer.observe(stackElement, { childList: true, subtree: true });
+
+      return () => {
+        observer.disconnect();
+      };
+    }, [stackElement, handleScroll]);
+
     return (
       <StackContext.Provider value={{ orientation, rail, size, onRearrange }}>
         <div

package/src/components/StackItem/StackItemDragHandle.tsx

@@ -7,7 +7,7 @@ import React, { type ComponentPropsWithoutRef } from 'react';
 
 import { useStackItem } from '../StackContext';
 
-export type StackItemDragHandleProps = ComponentPropsWithoutRef<'button'> & { asChild: boolean };
+export type StackItemDragHandleProps = ComponentPropsWithoutRef<'button'> & { asChild?: boolean };
 
 export const StackItemDragHandle = ({ asChild, children }: StackItemDragHandleProps) => {
   const { selfDragHandleRef } = useStackItem();

package/src/components/StackItem/StackItemHeading.tsx

@@ -3,6 +3,7 @@
 //
 
 import { useFocusableGroup } from '@fluentui/react-tabster';
+import { Slot } from '@radix-ui/react-slot';
 import React, { type ComponentPropsWithoutRef, type ComponentPropsWithRef, forwardRef } from 'react';
 
 import { type ThemedClassName } from '@dxos/react-ui';
@@ -11,14 +12,16 @@ import { mx } from '@dxos/react-ui-theme';
 
 import { useStack } from '../StackContext';
 
-export type StackItemHeadingProps = ThemedClassName<ComponentPropsWithoutRef<'div'>>;
+export type StackItemHeadingProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & { asChild?: boolean };
 
-export const StackItemHeading = ({ children, classNames, ...props }: StackItemHeadingProps) => {
+export const StackItemHeading = ({ children, classNames, asChild, ...props }: StackItemHeadingProps) => {
   const { orientation } = useStack();
   const focusableGroupAttrs = useFocusableGroup({ tabBehavior: 'limited' });
 
+  const Root = asChild ? Slot : 'div';
+
   return (
-    <div
+    <Root
       role='heading'
       {...props}
       tabIndex={0}
@@ -31,7 +34,7 @@ export const StackItemHeading = ({ children, classNames, ...props }: StackItemHe
       )}
     >
       {children}
-    </div>
+    </Root>
   );
 };
 

package/src/exemplars/Card/Card.stories-todo.tsx

@@ -0,0 +1,135 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+// import '@dxos-theme';
+//
+// import React from 'react';
+//
+// import { faker } from '@dxos/random';
+// import { Input, ScrollArea } from '@dxos/react-ui';
+// import { modalSurface, mx } from '@dxos/react-ui-theme';
+// import { withTheme } from '@dxos/storybook-utils';
+//
+// import { Card } from './Card';
+//
+// faker.seed(1);
+//
+// // https://unsplash.com
+// // TODO(burdon): Use https://picsum.photos
+// const testImages = [
+//   'https://images.unsplash.com/photo-1616394158624-a2ba9cfe2994',
+//   'https://images.unsplash.com/photo-1507941097613-9f2157b69235',
+//   'https://images.unsplash.com/photo-1431274172761-fca41d930114',
+//   'https://images.unsplash.com/photo-1513635269975-59663e0ac1ad',
+//   'https://images.unsplash.com/photo-1564221710304-0b37c8b9d729',
+//   'https://images.unsplash.com/photo-1605425183435-25b7e99104a4',
+// ];
+//
+// const ReadonlyCardStory = () => {
+//   return (
+//     <div className='flex flex-col overflow-y-scroll'>
+//       <div className='flex flex-col gap-4'>
+//         <Card.Root item={{ id: 'readonly card story 1' }} data-flags='square noPadding'>
+//           <Card.Heading data-flags='floating'>
+//             <Card.DragHandle data-flags='positionLeft' />
+//             <Card.Menu data-flags='positionRight' />
+//           </Card.Heading>
+//           <Card.Media src={testImages[1]} />
+//         </Card.Root>
+//
+//         <Card.Root item={{ id: 'readonly card story 2' }}>
+//           <Card.Heading>
+//             <Card.HeadingLabel title={faker.lorem.sentence(3)} />
+//           </Card.Heading>
+//         </Card.Root>
+//
+//         <Card.Root item={{ id: 'readonly card story 3' }}>
+//           <Card.Content classNames={'text-sm font-thin h-[100px]'}>
+//             <ScrollArea.Root>
+//               <ScrollArea.Viewport>{faker.lorem.sentences(16)}</ScrollArea.Viewport>
+//               <ScrollArea.Scrollbar orientation='vertical'>
+//                 <ScrollArea.Thumb />
+//               </ScrollArea.Scrollbar>
+//             </ScrollArea.Root>
+//           </Card.Content>
+//         </Card.Root>
+//
+//         <Card.Root item={{ id: 'readonly card story 4' }}>
+//           <Card.Heading>
+//             <Card.HeadingLabel data-flags='center' title={faker.lorem.sentence(3)} />
+//           </Card.Heading>
+//           <Card.Content classNames={'text-sm font-thin'}>{faker.lorem.sentences(3)}</Card.Content>
+//         </Card.Root>
+//
+//         <Card.Root item={{ id: 'readonly card story 5' }}>
+//           <Card.Heading>
+//             <Card.DragHandle />
+//             <Card.HeadingLabel title={faker.lorem.sentence(8)} />
+//             {/* TODO(burdon): Menu util. */}
+//             <Card.Menu />
+//           </Card.Heading>
+//           <Card.Content data-flags='gutter' classNames={'gap-2 text-sm font-thin'}>
+//             <p>Content with gutter</p>
+//             <p className='line-clamp-3'>{faker.lorem.sentences(3)}</p>
+//           </Card.Content>
+//         </Card.Root>
+//
+//         <Card.Root item={{ id: 'readonly card story 6' }}>
+//           <Card.Heading>
+//             <Card.DragHandle />
+//             <Card.HeadingLabel title={faker.lorem.sentence(3)} />
+//             <Card.Menu />
+//           </Card.Heading>
+//           <Card.Content data-flags='gutter' classNames={'text-sm gap-2 font-thin'}>
+//             <p className='line-clamp-3'>{faker.lorem.sentences(1)}</p>
+//           </Card.Content>
+//           <Card.Media className={'h-[200px] grayscale'} src={testImages[0]} />
+//           <Card.Content data-flags='gutter' classNames={'text-sm gap-2 font-thin'}>
+//             <p className='line-clamp-3'>{faker.lorem.sentences(3)}</p>
+//           </Card.Content>
+//         </Card.Root>
+//       </div>
+//     </div>
+//   );
+// };
+//
+// const EditableCardStory = () => {
+//   return (
+//     <div className='flex flex-col h-full justify-center'>
+//       <Card.Root item={{ id: 'editable card story 1' }}>
+//         <Card.Heading>
+//           <Card.DragHandle />
+//           <Input.Root>
+//             <Input.TextInput classNames={'-mx-2 px-2'} variant='subdued' placeholder={'Title'} />
+//           </Input.Root>
+//           <Card.Menu />
+//         </Card.Heading>
+//         <Card.Content data-flags='gutter' classNames={'gap-2 text-sm font-thin'}>
+//           {faker.lorem.sentences()}
+//         </Card.Content>
+//       </Card.Root>
+//     </div>
+//   );
+// };
+//
+// export default {
+//   title: 'ui/react-ui-card/Card',
+//   component: Card,
+//   decorators: [
+//     withTheme,
+//     (Story: any) => (
+//       <div className={mx('flex h-screen w-full justify-center overflow-hidden', modalSurface)}>
+//         <div className='flex flex-col w-[360px] overflow-hidden'>
+//           <Story />
+//         </div>
+//       </div>
+//     ),
+//   ],
+//   parameters: {
+//     layout: 'fullscreen',
+//   },
+// };
+//
+// export const ReadOnly = () => <ReadonlyCardStory />;
+// export const Editable = () => <EditableCardStory />;