@dxos/react-ui 0.8.4-main.d05673bc65 → 0.8.4-main.d9fc60f731

package/src/components/List/TreeDropIndicator.tsx

@@ -21,14 +21,14 @@ const edgeToOrientationMap: Record<InstructionType, Orientation> = {
 const orientationStyles: Record<Orientation, HTMLAttributes<HTMLElement>['className']> = {
   // TODO(wittjosiah): Stop using left/right here.
   sibling:
-    'h-(--line-thickness) left-(--horizontal-indent) right-0 bg-accent-surface before:left-(--negative-terminal-size)',
+    'h-(--line-thickness) left-(--horizontal-indent) right-0 bg-accent-bg before:left-(--negative-terminal-size)',
   child: 'inset-0 border-[length:var(--line-thickness)] before:invisible',
 };
 
 const instructionStyles: Record<InstructionType, HTMLAttributes<HTMLElement>['className']> = {
   'reorder-above': 'top-(--line-offset) before:top-(--offset-terminal)',
   'reorder-below': 'bottom-(--line-offset) before:bottom-(--offset-terminal)',
-  'make-child': 'border-accent-surface',
+  'make-child': 'border-accent-bg',
   // TODO(wittjosiah): This is not occurring in the current implementation.
   reparent: '',
 };
@@ -64,7 +64,7 @@ export const TreeDropIndicator = ({ instruction, gap = 0 }: DropIndicatorProps)
           '--horizontal-indent': `${desiredInstruction.currentLevel * desiredInstruction.indentPerLevel + 4}px`,
         } as CSSProperties
       }
-      className={`absolute z-10 pointer-events-none before:w-(--terminal-size) before:h-(--terminal-size) box-border before:absolute before:border-[length:--line-thickness] before:border-solid before:border-accent-surface before:rounded-full ${orientationStyles[orientation]} ${instructionStyles[desiredInstruction.type]}`}
+      className={`absolute z-10 pointer-events-none before:w-(--terminal-size) before:h-(--terminal-size) box-border before:absolute before:border-[length:--line-thickness] before:border-solid before:border-accent-bg before:rounded-full ${orientationStyles[orientation]} ${instructionStyles[desiredInstruction.type]}`}
     ></div>
   );
 };

package/src/components/List/Treegrid.stories.tsx

@@ -5,14 +5,13 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 
 import { withTheme } from '../../testing';
 import { Icon } from '../Icon';
+import { Treegrid, TREEGRID_PARENT_OF_SEPARATOR, TREEGRID_PATH_SEPARATOR } from './Treegrid';
 
-import { Treegrid } from './Treegrid';
-
-faker.seed(1234);
+random.seed(1234);
 
 type StorybookNode = {
   id: string;
@@ -32,33 +31,33 @@ const content = {
   title: 'Root',
   nodes: [
     {
-      id: faker.string.uuid(),
+      id: random.string.uuid(),
       title: 'Personal Space',
       icon: 'ph--house--regular',
       nodes: [
         {
-          id: faker.string.uuid(),
-          title: faker.commerce.productName(),
+          id: random.string.uuid(),
+          title: random.commerce.productName(),
         },
         {
-          id: faker.string.uuid(),
-          title: faker.commerce.productName(),
+          id: random.string.uuid(),
+          title: random.commerce.productName(),
         },
         {
-          id: faker.string.uuid(),
-          title: faker.commerce.productName(),
+          id: random.string.uuid(),
+          title: random.commerce.productName(),
           nodes: [
             {
-              id: faker.string.uuid(),
-              title: faker.commerce.productName(),
+              id: random.string.uuid(),
+              title: random.commerce.productName(),
               nodes: [
                 {
-                  id: faker.string.uuid(),
-                  title: faker.commerce.productName(),
+                  id: random.string.uuid(),
+                  title: random.commerce.productName(),
                 },
                 {
-                  id: faker.string.uuid(),
-                  title: faker.commerce.productName(),
+                  id: random.string.uuid(),
+                  title: random.commerce.productName(),
                 },
               ],
             },
@@ -67,24 +66,24 @@ const content = {
       ],
     },
     {
-      id: faker.string.uuid(),
-      title: faker.commerce.productName(),
+      id: random.string.uuid(),
+      title: random.commerce.productName(),
       icon: 'ph--planet--regular',
       nodes: [
         {
-          id: faker.string.uuid(),
-          title: faker.commerce.productName(),
+          id: random.string.uuid(),
+          title: random.commerce.productName(),
         },
       ],
     },
     {
-      id: faker.string.uuid(),
-      title: faker.commerce.productName(),
+      id: random.string.uuid(),
+      title: random.commerce.productName(),
       icon: 'ph--sailboat--regular',
     },
     {
-      id: faker.string.uuid(),
-      title: faker.commerce.productName(),
+      id: random.string.uuid(),
+      title: random.commerce.productName(),
       icon: 'ph--planet--regular',
     },
   ],
@@ -129,8 +128,8 @@ const DefaultStory = () => {
         return (
           <Treegrid.Row
             key={node.id}
-            id={path.join(Treegrid.PATH_SEPARATOR)}
-            {...(parentOf && { parentOf: parentOf.join(Treegrid.PARENT_OF_SEPARATOR) })}
+            id={path.join(TREEGRID_PATH_SEPARATOR)}
+            {...(parentOf && { parentOf: parentOf.join(TREEGRID_PARENT_OF_SEPARATOR) })}
           >
             <Treegrid.Cell indent classNames='flex items-center'>
               {node.icon && <Icon icon={node.icon} classNames='w-[1em] h-[1em] my-1' />}

package/src/components/List/Treegrid.theme.ts

@@ -0,0 +1,35 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { mx } from '@dxos/ui-theme';
+import type { ComponentFunction, Theme } from '@dxos/ui-types';
+
+export type TreegridStyleProps = Partial<{
+  level: number;
+  indent: boolean;
+}>;
+
+const levelStyles = new Map<number, string>([
+  [1, '[&>.indent:first-of-type]:pl-0 font-medium'],
+  [2, '[&>.indent:first-of-type]:pl-0'],
+  [3, '[&>.indent:first-of-type]:pl-1'],
+  [4, '[&>.indent:first-of-type]:pl-2'],
+  [5, '[&>.indent:first-of-type]:pl-3'],
+  [6, '[&>.indent:first-of-type]:pl-4'],
+  [7, '[&>.indent:first-of-type]:pl-5'],
+  [8, '[&>.indent:first-of-type]:pl-6'],
+]);
+
+const root: ComponentFunction<TreegridStyleProps> = (_, ...etc) => mx('grid', ...etc);
+
+const row: ComponentFunction<TreegridStyleProps> = ({ level = 1 }, ...etc) =>
+  mx(levelStyles.get(Math.min(Math.max(Math.round(level), 1), 8)), ...etc);
+
+const cell: ComponentFunction<TreegridStyleProps> = ({ indent }, ...etc) => mx(indent && 'indent', ...etc);
+
+export const treegridTheme: Theme<TreegridStyleProps> = {
+  root,
+  row,
+  cell,
+};

package/src/components/List/Treegrid.tsx

@@ -16,11 +16,12 @@ import React, {
 } from 'react';
 
 import { useThemeContext } from '../../hooks';
+import { composable, composableProps } from '../../util';
 import { type ThemedClassName } from '../../util';
 
-// TODO(thure): A lot of the accessible affordances for this kind of thing need to be implemented per https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/treegrid_role
+// TODO(thure): https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/treegrid_role
 
-const TREEGRID_ROW_NAME = 'TreegridRow';
+const TREEGRID_ROW_NAME = 'Treegrid.Row';
 
 type TreegridRowScopedProps<P> = P & { __treegridRowScope?: Scope };
 
@@ -34,17 +35,19 @@ type TreegridRowContextValue = {
 const [TreegridRowProvider, useTreegridRowContext] =
   createTreegridRowContext<TreegridRowContextValue>(TREEGRID_ROW_NAME);
 
-const PATH_SEPARATOR = '~';
-const PARENT_OF_SEPARATOR = ' ';
+// TODO(burdon): Replace with functions.
+export const TREEGRID_PATH_SEPARATOR = '~';
+export const TREEGRID_PARENT_OF_SEPARATOR = ' ';
 
 type TreegridRootProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & {
-  gridTemplateColumns: CSSProperties['gridTemplateColumns'];
+  gridTemplateColumns?: CSSProperties['gridTemplateColumns'];
   asChild?: boolean;
 };
 
-const TreegridRoot = forwardRef<HTMLDivElement, TreegridRootProps>(
-  ({ asChild, classNames, children, style, gridTemplateColumns, ...props }, forwardedRef) => {
+const TreegridRoot = composable<HTMLDivElement, TreegridRootProps>(
+  ({ asChild, classNames, children, style, gridTemplateColumns, onKeyDown: onKeyDownProp, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
+    const { className, role: _role, ...rest } = composableProps<HTMLDivElement>(props, { classNames });
     const Comp = asChild ? Slot : Primitive.div;
     const { findFirstFocusable } = useFocusFinders();
 
@@ -89,16 +92,16 @@ const TreegridRoot = forwardRef<HTMLDivElement, TreegridRootProps>(
             break;
           }
         }
-        props.onKeyDown?.(event);
+        onKeyDownProp?.(event);
       },
-      [findFirstFocusable],
+      [findFirstFocusable, onKeyDownProp],
     );
 
     return (
       <Comp
         role='treegrid'
-        {...props}
-        className={tx('treegrid.root', {}, classNames)}
+        {...rest}
+        className={tx('treegrid.root', {}, className)}
         style={{ ...style, gridTemplateColumns }}
         onKeyDown={handleKeyDown}
         ref={forwardedRef}
@@ -136,7 +139,7 @@ const TreegridRow = forwardRef<HTMLDivElement, TreegridRowScopedProps<TreegridRo
   ) => {
     const { tx } = useThemeContext();
     const Comp = asChild ? Slot : Primitive.div;
-    const pathParts = id.split(PATH_SEPARATOR);
+    const pathParts = id.split(TREEGRID_PATH_SEPARATOR);
     const level = pathParts.length - 1;
     const [open, onOpenChange] = useControllableState({
       prop: propsOpen,
@@ -181,8 +184,4 @@ export const Treegrid = {
   Root: TreegridRoot,
   Row: TreegridRow,
   Cell: TreegridCell,
-  PARENT_OF_SEPARATOR,
-  PATH_SEPARATOR,
-  createTreegridRowScope,
-  useTreegridRowContext,
 };

package/src/components/Main/Main.stories.tsx

@@ -8,7 +8,6 @@ import React from 'react';
 import { withLayout, withTheme } from '../../testing';
 import { IconButton } from '../Button';
 import { Toolbar } from '../Toolbar';
-
 import { Main, useSidebars } from './Main';
 
 type StoryMainArgs = {};

package/src/components/Main/Main.theme.ts

@@ -0,0 +1,29 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { mx } from '@dxos/ui-theme';
+import { type ComponentFunction } from '@dxos/ui-types';
+
+import { mainPaddingTransitions } from './constants';
+
+const padding = 'dx-main-content-padding';
+
+export type MainStyleProps = Partial<{
+  bounce: boolean;
+  handlesFocus: boolean;
+}>;
+
+const content: ComponentFunction<MainStyleProps> = ({ bounce }, ...etc) =>
+  mx(padding, mainPaddingTransitions, bounce && 'dx-main-bounce-layout', 'dx-focus-ring-main', ...etc);
+
+const sidebar: ComponentFunction<MainStyleProps> = (_, ...etc) =>
+  mx('dx-main-sidebar', 'dx-focus-ring-inset-over-all', ...etc);
+
+const overlay: ComponentFunction<MainStyleProps> = (_, ...etc) => mx('dx-main-overlay', ...etc);
+
+export const mainTheme = {
+  content,
+  sidebar,
+  overlay,
+};

package/src/components/Main/Main.tsx

@@ -25,19 +25,20 @@ import React, {
 import { addEventListener } from '@dxos/async';
 import { log } from '@dxos/log';
 import { useForwardedRef, useMediaQuery } from '@dxos/react-hooks';
-import { type MainStyleProps, osTranslations } from '@dxos/ui-theme';
+import { osTranslations } from '@dxos/ui-theme';
 
 import { useThemeContext } from '../../hooks';
+import { type Label, toLocalizedString, useTranslation } from '../../primitives';
+import { type MainStyleProps } from '../../theme';
 import { type ThemedClassName } from '../../util';
-import { type Label, toLocalizedString, useTranslation } from '../ThemeProvider';
-
 import { useSwipeToDismiss } from './useSwipeToDismiss';
 
 const MAIN_NAME = 'Main';
-const MAIN_ROOT_NAME = 'MainRoot';
-const MAIN_OVERLAY_NAME = 'MainOverlay';
-const NAVIGATION_SIDEBAR_NAME = 'NavigationSidebar';
-const COMPLEMENTARY_SIDEBAR_NAME = 'ComplementarySidebar';
+const MAIN_ROOT_NAME = 'Main.Root';
+const MAIN_OVERLAY_NAME = 'Main.Overlay';
+const MAIN_CONTENT_NAME = 'Main.Content';
+const NAVIGATION_SIDEBAR_NAME = 'Main.NavigationSidebar';
+const COMPLEMENTARY_SIDEBAR_NAME = 'Main.ComplementarySidebar';
 
 const handleOpenAutoFocus = (event: Event) => {
   !document.body.hasAttribute('data-w-keyboard') && event.preventDefault();
@@ -398,9 +399,9 @@ const MainContent = forwardRef<HTMLDivElement, MainContentProps>(
 
     return (
       <Comp
-        role={role}
         {...(handlesFocus && { ...mover })}
         {...props}
+        role={role}
         data-sidebar-left-state={navigationSidebarState}
         data-sidebar-right-state={complementarySidebarState}
         data-handles-focus={handlesFocus}
@@ -413,7 +414,7 @@ const MainContent = forwardRef<HTMLDivElement, MainContentProps>(
   },
 );
 
-MainContent.displayName = MAIN_NAME;
+MainContent.displayName = MAIN_CONTENT_NAME;
 
 //
 // Main

package/src/components/Main/constants.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export const mainPaddingTransitions = 'dx-main-content-padding-transitions';
+export const mainIntrinsicSize = 'dx-main-intrinsic-size';

package/src/components/Main/index.ts

@@ -3,3 +3,4 @@
 //
 
 export * from './Main';
+export * from './constants';

package/src/components/MediaPlayer/MediaPlayer.stories.tsx

@@ -0,0 +1,50 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+
+import { withTheme } from '@dxos/react-ui/testing';
+
+import { MediaPlayer } from './MediaPlayer';
+
+const meta = {
+  title: 'ui/react-ui-core/components/MediaPlayer',
+  component: MediaPlayer,
+  decorators: [withTheme()],
+  parameters: { layout: 'centered' },
+} satisfies Meta<typeof MediaPlayer>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Video: Story = {
+  args: {
+    // TODO(burdon): CORS issue.
+    src: 'https://customer-5rxcjpyab08avpmn.cloudflarestream.com/f58459bcdf3a6f3e93644a4e0f39b22a/downloads/default.mp4',
+    classNames: 'max-w-[640px]',
+  },
+};
+
+export const Audio: Story = {
+  args: {
+    src: 'https://commondatastorage.googleapis.com/codeskulptor-demos/DDR_assets/Kangaroo_MusiQue_-_The_Neverwritten_Role_Playing_Game.mp3',
+    classNames: 'min-w-[480px]',
+  },
+};
+
+export const ExplicitKind: Story = {
+  args: {
+    src: 'https://commondatastorage.googleapis.com/codeskulptor-demos/DDR_assets/Kangaroo_MusiQue_-_The_Neverwritten_Role_Playing_Game.mp3',
+    kind: 'audio',
+    classNames: 'min-w-[480px]',
+  },
+};
+
+export const Streaming: Story = {
+  args: {
+    src: 'https://customer-5rxcjpyab08avpmn.cloudflarestream.com/f58459bcdf3a6f3e93644a4e0f39b22a/iframe?poster=https%3A%2F%2Fcustomer-5rxcjpyab08avpmn.cloudflarestream.com%2Ff58459bcdf3a6f3e93644a4e0f39b22a%2Fthumbnails%2Fthumbnail.jpg%3Ftime%3D%26height%3D600',
+    classNames: 'min-w-[480px]',
+  },
+};

package/src/components/MediaPlayer/MediaPlayer.tsx

@@ -0,0 +1,178 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { useState } from 'react';
+
+import { mx } from '@dxos/ui-theme';
+
+import { type ThemedClassName } from '../../util';
+
+export type MediaKind = 'video' | 'audio';
+
+export type MediaFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+
+/** Static map to keep Tailwind's class scanner happy (no dynamic `object-${fit}`). */
+const FIT_CLASS: Record<MediaFit, string> = {
+  cover: 'object-cover',
+  contain: 'object-contain',
+  fill: 'object-fill',
+  none: 'object-none',
+  'scale-down': 'object-scale-down',
+};
+
+const VIDEO_EXTENSIONS = ['.mp4', '.webm', '.ogv', '.mov', '.m4v'];
+const AUDIO_EXTENSIONS = ['.mp3', '.wav', '.ogg', '.m4a', '.aac', '.flac'];
+
+/** iframe sandbox flags compatible with typical oEmbed-style players. */
+const DEFAULT_IFRAME_SANDBOX = 'allow-scripts allow-same-origin allow-presentation';
+
+/**
+ * Best-effort detection of `video` vs `audio` from a media URL.
+ * Inspects the pathname's extension (ignoring query/hash). Returns `undefined`
+ * when the URL doesn't look like a recognised media file — callers should
+ * default to 'video' or render a fallback (e.g. iframe / img).
+ */
+export const detectMediaKind = (src: string): MediaKind | undefined => {
+  // Strip query and hash, then take the last path segment's extension.
+  const pathname = src.split(/[?#]/, 1)[0]!;
+  const lower = pathname.toLowerCase();
+  if (VIDEO_EXTENSIONS.some((extension) => lower.endsWith(extension))) {
+    return 'video';
+  }
+  if (AUDIO_EXTENSIONS.some((extension) => lower.endsWith(extension))) {
+    return 'audio';
+  }
+
+  return undefined;
+};
+
+/**
+ * Heuristic match for URLs that should render as native `<video>` / `<audio>`
+ * (i.e. URLs ending in a recognised media extension).
+ *
+ * NB: Cloudflare Stream embed URLs serve an HTML player page, **not** a media
+ * stream, so they cannot be loaded via `<video>`. Those are detected by
+ * {@link isCloudflareStreamEmbed} and rendered via `<iframe>` instead.
+ */
+export const isEmbedUrl = (src: string): boolean => detectMediaKind(src) !== undefined;
+
+/**
+ * Match Cloudflare Stream `/iframe` embed URLs of the form
+ * `https://customer-<code>.cloudflarestream.com/<32-hex-uid>/iframe[?…]`.
+ */
+const CLOUDFLARE_STREAM_IFRAME_PATTERN =
+  /^https:\/\/[a-z0-9-]+\.cloudflarestream\.com\/[a-f0-9]{32}\/iframe(?:[/?#]|$)/i;
+
+const isCloudflareStreamEmbed = (src: string): boolean => CLOUDFLARE_STREAM_IFRAME_PATTERN.test(src);
+
+export type MediaPlayerProps = ThemedClassName<{
+  src: string;
+  alt?: string;
+  /** Override auto-detection. When omitted, `detectMediaKind(src)` is used and falls back to 'video'. */
+  kind?: MediaKind;
+  controls?: boolean;
+  autoPlay?: boolean;
+  loop?: boolean;
+  muted?: boolean;
+  /** Defaults to 'anonymous' for cross-origin sources (e.g. signed S3 URLs). */
+  crossOrigin?: 'anonymous' | 'use-credentials' | '';
+  /** CSS `object-fit` for `<img>` and `<video>`. Ignored for `<iframe>`/`<audio>`. Defaults to 'cover'. */
+  fit?: MediaFit;
+}>;
+
+/**
+ * Renders a media URL using the appropriate element:
+ * - Direct media URLs (mp4, mp3, …) → native `<video>` / `<audio>`.
+ * - Cloudflare Stream `/iframe` embed URLs → `<iframe>`.
+ * - Everything else → `<img>` that hides itself on load failure (broken images
+ *   are common in feeds and the placeholder is uglier than nothing).
+ */
+export const MediaPlayer = ({
+  classNames,
+  src,
+  kind,
+  controls = true,
+  autoPlay = false,
+  loop = false,
+  muted = false,
+  alt,
+  crossOrigin = 'anonymous',
+  fit = 'cover',
+}: MediaPlayerProps) => {
+  const fitClass = FIT_CLASS[fit];
+  if (isEmbedUrl(src)) {
+    const resolved = kind ?? detectMediaKind(src) ?? 'video';
+    if (resolved === 'audio') {
+      return (
+        <audio
+          className={mx('w-full', classNames)}
+          src={src}
+          controls={controls}
+          autoPlay={autoPlay}
+          loop={loop}
+          muted={muted}
+          crossOrigin={crossOrigin}
+          aria-label={alt}
+        />
+      );
+    }
+
+    return (
+      <video
+        className={mx('max-w-full max-h-full aspect-video', fitClass, classNames)}
+        src={src}
+        controls={controls}
+        autoPlay={autoPlay}
+        loop={loop}
+        muted={muted}
+        crossOrigin={crossOrigin}
+        aria-label={alt}
+      />
+    );
+  }
+
+  if (isCloudflareStreamEmbed(src)) {
+    return <IframePlayer key={src} classNames={classNames} src={src} alt={alt} />;
+  }
+
+  return (
+    <img
+      className={mx(fitClass, classNames)}
+      src={src}
+      alt={alt ?? ''}
+      loading='lazy'
+      onError={(event) => {
+        event.currentTarget.style.display = 'none';
+      }}
+    />
+  );
+};
+
+type IframePlayerProps = ThemedClassName<{
+  src: string;
+  alt?: string;
+}>;
+
+const IframePlayer = ({ src, alt, classNames }: IframePlayerProps) => {
+  const [loaded, setLoaded] = useState(false);
+  return (
+    <div className={mx('relative bg-baseSurface', classNames)}>
+      <iframe
+        src={src}
+        title={alt ?? 'Embedded media'}
+        loading='lazy'
+        className={mx(
+          'border-none w-full h-full transition-opacity duration-150',
+          loaded ? 'opacity-100' : 'opacity-0',
+        )}
+        style={{ colorScheme: 'dark' }}
+        sandbox={DEFAULT_IFRAME_SANDBOX}
+        referrerPolicy='no-referrer'
+        allow='accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;'
+        allowFullScreen
+        onLoad={() => setLoaded(true)}
+      />
+    </div>
+  );
+};

package/src/components/MediaPlayer/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export * from './MediaPlayer';

package/src/components/Menu/ContextMenu.stories.tsx

@@ -6,7 +6,6 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { withTheme } from '../../testing';
-
 import { ContextMenu } from './ContextMenu';
 
 const DefaultStory = () => {
@@ -104,7 +103,4 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {},
-  parameters: {
-    chromatic: { delay: 1600 },
-  },
 };

package/src/components/Menu/DropdownMenu.stories.tsx

@@ -7,7 +7,6 @@ import React, { useRef, useState } from 'react';
 
 import { withTheme } from '../../testing';
 import { Button } from '../Button';
-
 import { DropdownMenu } from './DropdownMenu';
 
 const DefaultStory = () => {
@@ -104,9 +103,6 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {},
-  parameters: {
-    chromatic: { delay: 1600 },
-  },
 };
 
 export const VirtualTrigger = {