@dxos/react-ui-stack 0.8.4-main.bc674ce → 0.8.4-main.bcb3aa67d6

package/src/components/StackItem/StackItem.tsx

@@ -247,7 +247,7 @@ const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
                     : 'dx-focus-ring-group-y',
             orientation === 'horizontal' ? 'grid-rows-subgrid' : 'grid-cols-subgrid',
             rail && (orientation === 'horizontal' ? 'row-span-2' : 'col-span-2'),
-            role === 'section' && orientation !== 'horizontal' && 'border-be border-subduedSeparator',
+            role === 'section' && orientation !== 'horizontal' && 'border-b border-subdued-separator',
             classNames,
           )}
           data-dx-stack-item={stackId}

package/src/components/StackItem/StackItemContent.tsx

@@ -24,10 +24,12 @@ export const StackItemContent = forwardRef<HTMLDivElement, StackItemContentProps
     const style = useMemo(
       () => ({
         gridTemplateRows: [
-          ...(toolbar ? [role === 'section' ? 'calc(var(--toolbar-size) - 1px)' : 'var(--toolbar-size)'] : []),
+          toolbar && role === 'section' ? 'calc(var(--dx-toolbar-size) - 1px)' : 'var(--dx-toolbar-size)',
           '1fr',
-          ...(statusbar ? ['var(--statusbar-size)'] : []),
-        ].join(' '),
+          statusbar && 'var(--dx-statusbar-size)',
+        ]
+          .filter(Boolean)
+          .join(' '),
       }),
       [toolbar, statusbar],
     );
@@ -38,12 +40,12 @@ export const StackItemContent = forwardRef<HTMLDivElement, StackItemContentProps
         role='none'
         style={style}
         className={mx(
-          'group grid grid-cols-[100%] density-coarse',
-          stackItemSize === 'contain' && 'min-bs-0 overflow-hidden',
-          role === 'section' &&
-            toolbar &&
-            '[&_.dx-toolbar]:sticky [&_.dx-toolbar]:z-[1] [&_.dx-toolbar]:block-start-0 [&_.dx-toolbar]:-mbe-px [&_.dx-toolbar]:min-is-0',
-          toolbar && '[&>.dx-toolbar]:relative [&>.dx-toolbar]:border-be [&>.dx-toolbar]:border-subduedSeparator',
+          'group grid grid-cols-[100%] dx-density-coarse',
+          stackItemSize === 'contain' && 'min-h-0 overflow-hidden',
+          toolbar &&
+            role === 'section' &&
+            '[&_.dx-toolbar]:sticky [&_.dx-toolbar]:z-[1] [&_.dx-toolbar]:top-0 [&_.dx-toolbar]:-mb-px [&_.dx-toolbar]:min-w-0',
+          toolbar && '[&>.dx-toolbar]:relative [&>.dx-toolbar]:border-b [&>.dx-toolbar]:border-subdued-separator',
           classNames,
         )}
         data-popover-collision-boundary={true}

package/src/components/StackItem/StackItemDragHandle.tsx

@@ -2,6 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
+import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import React, { type ComponentPropsWithoutRef } from 'react';
 
@@ -12,11 +13,11 @@ export type StackItemDragHandleProps = ComponentPropsWithoutRef<'button'> & { as
 export const StackItemDragHandle = ({ asChild, children }: StackItemDragHandleProps) => {
   const { selfDragHandleRef } = useStackItem();
 
-  const Root = asChild ? Slot : 'div';
+  const Comp = asChild ? Slot : Primitive.div;
 
   return (
-    <Root ref={selfDragHandleRef} role='button'>
+    <Comp ref={selfDragHandleRef} role='button'>
       {children}
-    </Root>
+    </Comp>
   );
 };

package/src/components/StackItem/StackItemHeading.tsx

@@ -2,6 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
+import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import React, {
   type ComponentPropsWithRef,
@@ -26,34 +27,34 @@ export const StackItemHeading = ({
   classNames,
   asChild,
   separateOnScroll,
+  role,
   ...props
 }: StackItemHeadingProps) => {
   const { orientation } = useStack();
-
-  const Root = asChild ? Slot : 'div';
+  const Comp = asChild ? Slot : Primitive.div;
 
   return (
-    <Root
-      role='heading'
+    <Comp
       {...props}
+      role={role ?? 'heading'}
       className={mx(
-        'flex items-center !border-is-0 bg-headerSurface',
+        'flex items-center border-x-0! bg-header-surface',
         separateOnScroll
-          ? 'border-transparent [[data-scroll-separator="true"]_&]:border-subduedSeparator'
-          : 'border-subduedSeparator',
-        orientation === 'horizontal' ? 'bs-[--rail-size]' : 'is-[--rail-size] flex-col',
-        orientation === 'horizontal' ? 'border-be' : 'border-ie',
+          ? 'border-transparent [[data-scroll-separator="true"]_&]:border-subdued-separator'
+          : 'border-subdued-separator',
+        orientation === 'horizontal' ? 'h-(--dx-rail-size)' : 'w-(--dx-rail-size) flex-col',
+        orientation === 'horizontal' ? 'border-b' : 'border-e',
         classNames,
       )}
     >
       {children}
-    </Root>
+    </Comp>
   );
 };
 
 export const StackItemHeadingStickyContent = ({ children }: PropsWithChildren<{}>) => {
   return (
-    <div role='none' className='sticky block-start-0 bg-[--sticky-bg] p-1 is-full'>
+    <div role='none' className='sticky top-0 bg-(--sticky-bg) p-1 w-full'>
       {children}
     </div>
   );
@@ -70,7 +71,7 @@ export const StackItemHeadingLabel = forwardRef<HTMLHeadingElement, StackItemHea
         {...props}
         data-attention={((related && isRelated) || hasAttention || isAncestor).toString()}
         className={mx(
-          'pli-1 min-is-0 is-0 grow truncate font-medium text-baseText data-[attention=true]:text-accentText self-center',
+          'px-1 min-w-0 w-0 grow truncate font-medium text-base-surface-text data-[attention=true]:text-accent-text self-center',
           classNames,
         )}
         ref={forwardedRef}

package/src/components/StackItem/StackItemResizeHandle.tsx

@@ -15,7 +15,7 @@ const MIN_HEIGHT = 3;
 
 export type StackItemResizeHandleProps = {};
 
-export const StackItemResizeHandle = () => {
+export const StackItemResizeHandle = (_: StackItemResizeHandleProps) => {
   const { orientation } = useStack();
   const { setSize, size } = useStackItem();
 

package/src/components/StackItem/StackItemSigil.tsx

@@ -8,7 +8,7 @@ import { type Node } from '@dxos/app-graph';
 import { keySymbols } from '@dxos/keyboard';
 import { Button, type ButtonProps, DropdownMenu, Icon, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { type AttendableId, type Related, useAttention } from '@dxos/react-ui-attention';
-import { descriptionText, mx } from '@dxos/ui-theme';
+import { mx } from '@dxos/ui-theme';
 import { getHostPlatform } from '@dxos/util';
 
 import { translationKey } from '../../translations';
@@ -40,7 +40,10 @@ export const StackItemSigilButton = forwardRef<HTMLButtonElement, StackItemSigil
       <Button
         {...props}
         variant={variant}
-        classNames={['shrink-0 pli-0 min-bs-0 is-[--rail-action] bs-[--rail-action] relative app-no-drag', classNames]}
+        classNames={[
+          'shrink-0 px-0 min-h-0 w-(--dx-rail-action) h-(--dx-rail-action) relative dx-app-no-drag',
+          classNames,
+        ]}
         ref={forwardedRef}
       >
         {isMenu && <MenuSignifierHorizontal />}
@@ -78,7 +81,7 @@ export const StackItemSigil = forwardRef<HTMLButtonElement, StackItemSigilProps>
         classNames={!hasActions && 'cursor-default'}
       >
         <span className='sr-only'>{triggerLabel}</span>
-        <Icon icon={icon} size={5} />
+        <Icon icon={icon} />
       </StackItemSigilButton>
     );
 
@@ -133,7 +136,7 @@ export const StackItemSigil = forwardRef<HTMLButtonElement, StackItemSigilProps>
                             </DropdownMenu.ItemIndicator>
                           )}
                           {shortcut && (
-                            <span className={mx('shrink-0', descriptionText)}>{keySymbols(shortcut).join('')}</span>
+                            <span className={mx('shrink-0', 'text-description')}>{keySymbols(shortcut).join('')}</span>
                           )}
                         </Root>
                       );

package/src/components/index.ts

@@ -4,6 +4,6 @@
 
 export type * from './types';
 
-export * from './CardStack';
 export * from './Stack';
+
 export * from './StackItem';

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-react:serve-e2e -- --port=9003',
+    command: 'pnpm storybook dev --ci --quiet --port=9003 --config-dir=.storybook',
     port: 9003,
     reuseExistingServer: false,
   },

package/src/translations.ts

@@ -10,14 +10,14 @@ 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/CardStack/CardStack.d.ts

@@ -1,47 +0,0 @@
-import React from 'react';
-import { type StackProps } from '../Stack';
-/**
- * This is `cardDefaultInlineSize` plus 2 times the sum of the inner and outer spacing applied by CardStack on the inline axis.
- */
-declare const cardStackDefaultInlineSizeRem: number;
-declare const cardStackRoot = "flex flex-col";
-declare const cardStackContent = "shrink min-bs-0 grid dx-focus-ring-group-x-indicator bg-baseSurface";
-declare const cardStackItem = "contain-layout pli-2 plb-1 first-of-type:pbs-0 last-of-type:pbe-0";
-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";
-/**
- * @deprecated Replace with Mosaic.Stack.
- */
-export declare const CardStack: {
-    Root: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className"> & {
-        classNames?: import("@dxos/ui-types").ClassNameValue;
-    } & {
-        asChild?: boolean;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Content: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className"> & {
-        classNames?: import("@dxos/ui-types").ClassNameValue;
-    } & {
-        asChild?: boolean;
-    } & {
-        footer?: 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/ui-types").ClassNameValue;
-    } & {
-        asChild?: boolean;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Footer: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className"> & {
-        classNames?: import("@dxos/ui-types").ClassNameValue;
-    } & {
-        asChild?: boolean;
-    } & React.RefAttributes<HTMLDivElement>>;
-    DragHandle: React.ForwardRefExoticComponent<React.RefAttributes<HTMLButtonElement>>;
-    Item: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className"> & {
-        classNames?: import("@dxos/ui-types").ClassNameValue;
-    } & {
-        asChild?: boolean;
-    } & React.RefAttributes<HTMLDivElement>>;
-};
-export { cardStackRoot, cardStackFooter, cardStackHeading, cardStackContent, cardStackItem, cardStackDefaultInlineSizeRem, };
-//# sourceMappingURL=CardStack.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"CardStack.d.ts","sourceRoot":"","sources":["../../../../../src/components/CardStack/CardStack.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAMzE,OAAO,EAAS,KAAK,UAAU,EAAuC,MAAM,UAAU,CAAC;AAEvF;;GAEG;AACH,QAAA,MAAM,6BAA6B,QAAgC,CAAC;AAMpE,QAAA,MAAM,aAAa,kBAAkB,CAAC;AAuBtC,QAAA,MAAM,gBAAgB,wEAAwE,CAAC;AA4D/F,QAAA,MAAM,aAAa,sEAAsE,CAAC;AAqB1F,QAAA,MAAM,gBAAgB,qEAAqE,CAAC;AAqB5F,QAAA,MAAM,eAAe,8GACsF,CAAC;AA2B5G;;GAEG;AACH,eAAO,MAAM,SAAS;;;;kBAzGV,OAAO;;;;;kBAAP,OAAO;;iBAzBR,OAAO;;;;;;kBAyBN,OAAO;;;;;kBAAP,OAAO;;;;;;kBAAP,OAAO;;CAiHlB,CAAC;AAEF,OAAO,EACL,aAAa,EACb,eAAe,EACf,gBAAgB,EAChB,gBAAgB,EAChB,aAAa,EACb,6BAA6B,GAC9B,CAAC"}

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

@@ -1,15 +0,0 @@
-import { type StoryObj } from '@storybook/react-vite';
-import React from 'react';
-declare const CardStackStory: () => React.JSX.Element;
-declare const meta: {
-    title: string;
-    component: () => React.JSX.Element;
-    decorators: import("@storybook/react").Decorator[];
-    parameters: {
-        layout: string;
-    };
-};
-export default meta;
-type Story = StoryObj<typeof CardStackStory>;
-export declare const Default: Story;
-//# sourceMappingURL=CardStack.stories.d.ts.map

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

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

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

@@ -1,9 +0,0 @@
-import React, { type PropsWithChildren } from 'react';
-import { type StackProps } from '../Stack';
-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/components/CardStack/CardStackDragPreview.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CardStackDragPreview.d.ts","sourceRoot":"","sources":["../../../../../src/components/CardStack/CardStackDragPreview.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAMtD,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AA6C3C,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/components/CardStack/index.d.ts

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

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

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

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

@@ -1,22 +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';
-};
-/**
- * @deprecated
- */
-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;;GAEG;AACH,eAAO,MAAM,cAAc,yGA4E1B,CAAC"}

package/src/components/CardStack/CardStack.stories.tsx

@@ -1,173 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useCallback, useState } from 'react';
-
-import { faker } from '@dxos/random';
-import { IconButton } from '@dxos/react-ui';
-import { withTheme } from '@dxos/react-ui/testing';
-import { Card, CardDragPreview } from '@dxos/react-ui-mosaic';
-
-import { StackItem } from '../StackItem';
-
-import { CardStack } from './CardStack';
-
-faker.seed(0);
-
-type CardItem = {
-  id: string;
-  title: string;
-  description: string;
-  image: string;
-};
-
-type StackItemData = {
-  id: string;
-  type?: 'column' | 'card';
-};
-
-const CardStackStory = () => {
-  const [column, setColumn] = useState<CardItem[]>(
-    faker.helpers.multiple(
-      () => ({
-        id: faker.string.uuid(),
-        title: faker.commerce.productName(),
-        description: faker.lorem.paragraph(),
-        image: faker.image.url(),
-      }),
-      { count: 12 },
-    ),
-  );
-
-  const handleRearrange = useCallback((source: StackItemData, target: StackItemData, closestEdge: Edge | null) => {
-    setColumn((prevColumn) => {
-      const newColumns = [...prevColumn];
-      // Reordering cards within a column
-      const sourceCardIndex = prevColumn.findIndex((card) => card.id === source.id);
-      const targetCardIndex = prevColumn.findIndex((card) => card.id === target.id);
-
-      if (typeof sourceCardIndex === 'number' && typeof targetCardIndex === 'number') {
-        const [movedCard] = newColumns.splice(sourceCardIndex, 1);
-
-        let insertIndex;
-        if (sourceCardIndex < targetCardIndex) {
-          insertIndex = closestEdge === 'bottom' ? targetCardIndex : targetCardIndex - 1;
-        } else {
-          insertIndex = closestEdge === 'bottom' ? targetCardIndex + 1 : targetCardIndex;
-        }
-        newColumns.splice(insertIndex, 0, movedCard);
-      }
-      return newColumns;
-    });
-  }, []);
-
-  const handleAddCard = useCallback(() => {
-    setColumn((prevColumn) => {
-      const newColumn = [...prevColumn];
-      const newCard = {
-        id: faker.string.uuid(),
-        title: faker.commerce.productName(),
-        description: faker.lorem.paragraph(),
-        image: faker.image.url(),
-      } satisfies CardItem;
-      newColumn.push(newCard);
-      console.log('[add card]', prevColumn.length, newColumn.length);
-      return newColumn;
-    });
-  }, []);
-
-  const handleRemoveCard = useCallback((cardId: string) => {
-    setColumn((prevColumn) => {
-      const newColumn = [...prevColumn];
-
-      const cardIndex = prevColumn.findIndex((card) => card.id === cardId);
-      if (cardIndex !== -1) {
-        newColumn.splice(cardIndex, 1);
-      }
-
-      return newColumn;
-    });
-  }, []);
-
-  return (
-    <CardStack.Root classNames='is-96'>
-      <CardStack.Content footer>
-        <CardStack.Stack id='story column' onRearrange={handleRearrange} itemsCount={column.length}>
-          {column.map((card, cardIndex, cardsArray) => {
-            const cardItem = { id: card.id, type: 'card' as const };
-            const prevCardId = cardIndex > 0 ? cardsArray[cardIndex - 1].id : undefined;
-            const nextCardId = cardIndex < cardsArray.length - 1 ? cardsArray[cardIndex + 1].id : undefined;
-
-            return (
-              <CardStack.Item asChild key={card.id}>
-                <StackItem.Root
-                  item={cardItem}
-                  focusIndicatorVariant='group'
-                  prevSiblingId={prevCardId}
-                  nextSiblingId={nextCardId}
-                >
-                  <Card.Root>
-                    <Card.Toolbar>
-                      <StackItem.DragHandle asChild>
-                        <Card.DragHandle />
-                      </StackItem.DragHandle>
-                      <Card.ToolbarSeparator variant='gap' />
-                      <Card.ToolbarIconButton
-                        iconOnly
-                        variant='ghost'
-                        icon='ph--x--regular'
-                        label='Remove card'
-                        onClick={() => handleRemoveCard(card.id)}
-                      />
-                    </Card.Toolbar>
-                    <Card.Poster alt={card.title} image={card.image} />
-                    <Card.Heading>{card.title}</Card.Heading>
-                    <Card.Text variant='description'>{card.description}</Card.Text>
-                  </Card.Root>
-                  <StackItem.DragPreview>
-                    {() => (
-                      <CardDragPreview.Root>
-                        <CardDragPreview.Content>
-                          <Card.Toolbar>
-                            <Card.DragHandle />
-                          </Card.Toolbar>
-                          <Card.Poster alt={card.title} image={card.image} />
-                          <Card.Heading>{card.title}</Card.Heading>
-                          <Card.Text variant='description'>{card.description}</Card.Text>
-                        </CardDragPreview.Content>
-                      </CardDragPreview.Root>
-                    )}
-                  </StackItem.DragPreview>
-                </StackItem.Root>
-              </CardStack.Item>
-            );
-          })}
-        </CardStack.Stack>
-
-        <CardStack.Footer>
-          <IconButton icon='ph--plus--regular' label='Add card' onClick={handleAddCard} classNames='is-full' />
-        </CardStack.Footer>
-
-        <CardStack.Heading>{faker.company.name()}</CardStack.Heading>
-      </CardStack.Content>
-    </CardStack.Root>
-  );
-};
-
-const meta = {
-  title: 'ui/react-ui-stack/CardStack',
-  component: CardStackStory,
-  decorators: [withTheme],
-  parameters: {
-    layout: 'fullscreen',
-  },
-} satisfies Meta<typeof CardStackStory>;
-
-export default meta;
-
-type Story = StoryObj<typeof CardStackStory>;
-
-export const Default: Story = {};