@dxos/react-ui 0.8.4-main.dedc0f3 → 0.8.4-main.e00bdcdb52

package/src/primitives/Panel/Panel.tsx

@@ -0,0 +1,120 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { Primitive } from '@radix-ui/react-primitive';
+import { Slot } from '@radix-ui/react-slot';
+import React, { type CSSProperties } from 'react';
+
+import { composableProps, PanelStyleProps, slottable } from '@dxos/ui-theme';
+import { type SlottableProps } from '@dxos/ui-types';
+
+import { useThemeContext } from '../../hooks';
+
+//
+// Root
+//
+
+const GRID_TEMPLATE_ROWS = 'auto 1fr auto';
+const GRID_TEMPLATE_AREAS = '"toolbar" "content" "statusbar"';
+
+type PanelRootProps = SlottableProps<{ style?: CSSProperties }>;
+
+const PanelRoot = slottable<HTMLDivElement, { style?: CSSProperties }>(
+  ({ children, asChild, role, style, ...props }, forwardedRef) => {
+    const { className, ...rest } = composableProps(props);
+    const Comp = asChild ? Slot : Primitive.div;
+    const { tx } = useThemeContext();
+    return (
+      <Comp
+        {...rest}
+        role={role ?? 'none'}
+        style={{
+          gridTemplateRows: GRID_TEMPLATE_ROWS,
+          gridTemplateAreas: GRID_TEMPLATE_AREAS,
+          ...style,
+        }}
+        className={tx('panel.root', {}, className)}
+        ref={forwardedRef}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+PanelRoot.displayName = 'Panel.Root';
+
+//
+// Toolbar
+//
+
+type PanelToolbarProps = SlottableProps & Pick<PanelStyleProps, 'size'>;
+
+const PanelToolbar = slottable<HTMLDivElement, Pick<PanelStyleProps, 'size'>>(
+  ({ children, asChild, size, ...props }, forwardedRef) => {
+    const { className, ...rest } = composableProps(props);
+    const Comp = asChild ? Slot : Primitive.div;
+    const { tx } = useThemeContext();
+    return (
+      <Comp {...rest} data-slot='toolbar' className={tx('panel.toolbar', { size }, className)} ref={forwardedRef}>
+        {children}
+      </Comp>
+    );
+  },
+);
+
+PanelToolbar.displayName = 'Panel.Toolbar';
+
+//
+// Content
+//
+
+type PanelContentProps = SlottableProps;
+
+const PanelContent = slottable<HTMLDivElement>(({ children, asChild, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps(props);
+  const Comp = asChild ? Slot : Primitive.div;
+  const { tx } = useThemeContext();
+  return (
+    <Comp {...rest} data-slot='content' className={tx('panel.content', {}, className)} ref={forwardedRef}>
+      {children}
+    </Comp>
+  );
+});
+
+PanelContent.displayName = 'Panel.Content';
+
+//
+// Statusbar
+//
+
+type PanelStatusbarProps = SlottableProps & Pick<PanelStyleProps, 'size'>;
+
+const PanelStatusbar = slottable<HTMLDivElement, Pick<PanelStyleProps, 'size'>>(
+  ({ children, asChild, size, ...props }, forwardedRef) => {
+    const { className, ...rest } = composableProps(props);
+    const Comp = asChild ? Slot : Primitive.div;
+    const { tx } = useThemeContext();
+    return (
+      <Comp {...rest} data-slot='statusbar' className={tx('panel.statusbar', { size }, className)} ref={forwardedRef}>
+        {children}
+      </Comp>
+    );
+  },
+);
+
+PanelStatusbar.displayName = 'Panel.Statusbar';
+
+//
+// Panel
+//
+
+export const Panel = {
+  Root: PanelRoot,
+  Toolbar: PanelToolbar,
+  Content: PanelContent,
+  Statusbar: PanelStatusbar,
+};
+
+export type { PanelRootProps, PanelToolbarProps, PanelContentProps, PanelStatusbarProps };

package/src/primitives/Panel/index.ts

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

package/src/primitives/index.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export * from './Column';
+export * from './Container';
+export * from './Flex';
+export * from './Grid';
+export * from './Panel';

package/src/testing/Loading.tsx

@@ -0,0 +1,47 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { captureOwnerStack, useEffect, useState } from 'react';
+
+import { mx } from '@dxos/ui-theme';
+import { safeStringify } from '@dxos/util';
+
+import { ErrorStack, parseCaptureOwnerStack } from '../components';
+
+export type LoadingProps = { data?: any };
+
+/**
+ * Storybook loading component.
+ */
+export const Loading = ({ data }: LoadingProps) => {
+  const [visible, setVisible] = useState(false);
+  const ownerFrames = parseCaptureOwnerStack(captureOwnerStack());
+
+  useEffect(() => {
+    const t = setTimeout(() => setVisible(true), 500);
+    return () => clearTimeout(t);
+  }, []);
+
+  return (
+    <div className='w-full p-2'>
+      <div
+        className={mx(
+          'flex flex-col w-full p-2 border-2 border-teal-500 rounded-md',
+          'opacity-0 transition delay-1000 duration-1000',
+          visible && 'opacity-100',
+        )}
+      >
+        <h2 className='uppercase capitalize text-xs'>Loading State</h2>
+        <pre className='text-sm text-description'>{safeStringify(data, undefined, 2)}</pre>
+
+        <h3 className='uppercase capitalize text-xs mt-2'>Owner stack</h3>
+        {ownerFrames && ownerFrames.length > 0 ? (
+          <ErrorStack frames={ownerFrames} />
+        ) : (
+          <p className='text-xs text-subdued'>No owner stack (production build or unsupported context).</p>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/testing/decorators/index.ts

@@ -2,5 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
+export * from './withLayout';
+export * from './withLayoutVariants';
 export * from './withTheme';
-export * from './withSurfaceVariantsLayout';

package/src/testing/decorators/withLayout.tsx

@@ -0,0 +1,77 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Decorator } from '@storybook/react';
+import React, { type FC, type PropsWithChildren, memo } from 'react';
+
+import { type ClassNameValue, type ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/ui-theme';
+
+export type ContainerProps = ThemedClassName<PropsWithChildren>;
+
+export type ContainerType = 'default' | 'fullscreen' | 'centered' | 'column';
+
+export type WithLayoutProps =
+  | FC<ContainerProps>
+  | {
+      classNames?: ClassNameValue;
+      layout?: ContainerType;
+      scroll?: boolean;
+    };
+
+/**
+ * Adds layout container.
+ */
+export const withLayout =
+  (props: WithLayoutProps = {}): Decorator =>
+  (Story) => {
+    // Prevent re-rendering of the story.
+    const MemoizedStory = memo(Story);
+    if (typeof props === 'function') {
+      const Container = props;
+      return (
+        <Container>
+          <MemoizedStory />
+        </Container>
+      );
+    } else {
+      const { layout = 'default', classNames, scroll } = props;
+      const Container = layouts[layout] ?? layouts.fullscreen;
+      return (
+        <Container classNames={mx(scroll ? 'overflow-y-auto' : 'overflow-hidden', classNames)}>
+          <MemoizedStory />
+        </Container>
+      );
+    }
+  };
+
+const layouts: Record<ContainerType, FC<ContainerProps>> = {
+  default: ({ classNames, children }: ContainerProps) => (
+    <div role='none' className={mx('p-4', classNames)}>
+      {children}
+    </div>
+  ),
+
+  fullscreen: ({ classNames, children }: ContainerProps) => (
+    <div role='none' className={mx('fixed inset-0 flex overflow-hidden bg-black', classNames)}>
+      {children}
+    </div>
+  ),
+
+  centered: ({ classNames, children }: ContainerProps) => (
+    <div role='none' className={mx('fixed inset-0 grid overflow-hidden place-items-center bg-black')}>
+      <div role='none' className={mx('flex flex-col bg-base-surface', classNames)}>
+        {children}
+      </div>
+    </div>
+  ),
+
+  column: ({ classNames, children }: ContainerProps) => (
+    <div role='none' className='fixed inset-0 flex overflow-hidden justify-center bg-black'>
+      <div role='none' className={mx('flex flex-col w-[40rem] bg-base-surface', classNames)}>
+        {children}
+      </div>
+    </div>
+  ),
+};

package/src/testing/decorators/withLayoutVariants.tsx

@@ -0,0 +1,48 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Decorator } from '@storybook/react';
+import React, { type ComponentType, type PropsWithChildren } from 'react';
+
+import { mx, surfaceShadow } from '@dxos/ui-theme';
+import { type Density, type Elevation } from '@dxos/ui-types';
+
+type Config = {
+  elevations?: { elevation: Elevation; surface?: string }[];
+  densities?: Density[];
+};
+
+const Container = ({ children, elevation, surface }: PropsWithChildren<{ elevation: Elevation; surface?: string }>) => (
+  <div className={mx('p-4 rounded-sm', surface, surfaceShadow({ elevation }))}>{children}</div>
+);
+
+const Panel = ({
+  Story,
+  elevations,
+  densities,
+  className,
+}: { Story: ComponentType } & Config & { className?: string }) => {
+  return (
+    <div className={mx('flex flex-col h-full p-8 gap-8', className)}>
+      {elevations?.map(({ elevation, surface }) =>
+        densities?.map((density) => (
+          <Container key={`${elevation}--${density}`} surface={surface} elevation={elevation}>
+            <Story />
+          </Container>
+        )),
+      )}
+    </div>
+  );
+};
+
+export const withLayoutVariants = ({
+  elevations = [
+    { elevation: 'dialog', surface: 'bg-modal-surface' },
+    { elevation: 'positioned', surface: 'bg-card-surface' },
+    { elevation: 'base', surface: 'bg-base-surface' },
+  ],
+  densities = ['coarse'],
+}: Config = {}): Decorator => {
+  return (Story) => <Panel Story={Story} elevations={elevations} densities={densities} />;
+};

package/src/testing/decorators/withTheme.tsx

@@ -0,0 +1,37 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Decorator } from '@storybook/react';
+import React from 'react';
+
+import { defaultTx } from '@dxos/ui-theme';
+import { type ThemeMode } from '@dxos/ui-types';
+
+import { type ThemeContextValue, ThemeProvider, Tooltip } from '../../components';
+
+/**
+ * Adds theme decorator.
+ */
+export const withTheme =
+  ({ tx = defaultTx, noCache, platform }: Partial<ThemeContextValue> = {}): Decorator =>
+  (Story, context) => {
+    const {
+      globals: { theme },
+      parameters: { translations },
+    } = context;
+
+    return (
+      <ThemeProvider
+        tx={tx}
+        themeMode={theme as ThemeMode}
+        resourceExtensions={translations}
+        noCache={noCache}
+        platform={platform}
+      >
+        <Tooltip.Provider>
+          <Story />
+        </Tooltip.Provider>
+      </ThemeProvider>
+    );
+  };

package/src/testing/index.ts

@@ -3,3 +3,5 @@
 //
 
 export * from './decorators';
+
+export * from './Loading';

package/src/translations.ts

@@ -0,0 +1,19 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Resource } from '@dxos/react-ui';
+
+export const translationKey = '@dxos/react-ui';
+
+export const translations = [
+  {
+    'en-US': {
+      [translationKey]: {
+        'toolbar-menu.label': 'Action menu',
+        'toolbar-drag-handle.label': 'Drag to rearrange',
+        'toolbar-close.label': 'Close',
+      },
+    },
+  },
+] as const satisfies Resource[];

package/src/util/index.ts

@@ -2,5 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
+export type { ThemedClassName } from '@dxos/ui-types';
+
 export * from './hasIosKeyboard';
-export type * from './ThemedClassName';
+export * from './usePx';

package/src/util/usePx.ts

@@ -0,0 +1,62 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+const getDocumentElementFontSize = () => parseFloat(getComputedStyle(document.documentElement).fontSize);
+
+/**
+ * React hook that converts rem values to pixels and updates when the root font size changes.
+ *
+ * @param rem The rem value to convert to pixels
+ * @returns The current pixel value equivalent of the rem input
+ */
+export const usePx = (rem: number): number => {
+  const [fontSize, setFontSize] = useState(() => {
+    if (typeof document !== 'undefined') {
+      return getDocumentElementFontSize();
+    }
+
+    return 16; // Default fallback for SSR
+  });
+
+  const updateFontSize = useCallback(() => {
+    setFontSize(getDocumentElementFontSize());
+  }, []);
+
+  useEffect(() => {
+    if (typeof document === 'undefined') {
+      return;
+    }
+
+    // Create a ResizeObserver to watch for font size changes on the document element
+    const resizeObserver = new ResizeObserver(updateFontSize);
+    resizeObserver.observe(document.documentElement);
+
+    // Also listen for viewport changes that might affect font size
+    const mediaQueryList = window.matchMedia('all');
+    const handleMediaChange = () => {
+      updateFontSize();
+    };
+
+    if (mediaQueryList.addEventListener) {
+      mediaQueryList.addEventListener('change', handleMediaChange);
+    } else {
+      // Fallback for older browsers
+      mediaQueryList.addListener(handleMediaChange);
+    }
+
+    return () => {
+      resizeObserver.disconnect();
+      if (mediaQueryList.removeEventListener) {
+        mediaQueryList.removeEventListener('change', handleMediaChange);
+      } else {
+        // Fallback for older browsers
+        mediaQueryList.removeListener(handleMediaChange);
+      }
+    };
+  }, []);
+
+  return useMemo(() => rem * fontSize, [fontSize]);
+};