@dxos/ui-theme 0.8.4-main.6fa680abb7 → 0.8.4-main.74a063c4e0

package/src/theme/components/select.ts

@@ -4,8 +4,7 @@
 
 import { type ComponentFunction, type Elevation, type Theme } from '@dxos/ui-types';
 
-import { ghostHighlighted, surfaceShadow, surfaceZIndex } from '../../fragments';
-import { mx } from '../../util';
+import { mx, surfaceShadow, surfaceZIndex } from '../../util';
 
 export type SelectStyleProps = Partial<{
   elevation: Elevation;
@@ -28,7 +27,7 @@ export const selectItem: ComponentFunction<SelectStyleProps> = (_props, ...etc)
     'flex items-center min-h-[2rem] px-3 py-1 gap-2',
     'text-base-surface-text leading-none select-none outline-hidden',
     '[&>svg]:invisible [&[data-state=checked]>svg]:visible',
-    ghostHighlighted,
+    'dx-highlighted',
     ...etc,
   );
 

package/src/theme/components/status.ts

@@ -7,21 +7,21 @@ import type { ComponentFunction, Theme } from '@dxos/ui-types';
 import { mx } from '../../util';
 
 export type StatusStyleProps = {
-  indeterminate?: boolean;
   variant?: 'default' | 'main-bottom';
+  indeterminate?: boolean;
 };
 
 export const statusRoot: ComponentFunction<StatusStyleProps> = ({ variant = 'default' }, ...etc) =>
   mx(
-    'h-1 relative bg-hover-overlay rounded-full overflow-hidden',
-    variant === 'main-bottom' ? 'w-full block' : 'inline-20 inline-block',
+    'h-1 relative rounded-full overflow-hidden',
+    variant === 'main-bottom' ? 'w-full block' : 'inline-20 inline-block bg-base-surface',
     ...etc,
   );
 
-export const statusBar: ComponentFunction<StatusStyleProps> = ({ indeterminate, variant = 'default' }, ...etc) =>
+export const statusBar: ComponentFunction<StatusStyleProps> = ({ variant = 'default', indeterminate }, ...etc) =>
   mx(
     'absolute inset-y-0 block rounded-full',
-    variant === 'main-bottom' ? 'bg-accent-surface' : 'bg-un-accent',
+    variant === 'main-bottom' ? 'bg-composer-300' : 'bg-un-accent',
     indeterminate ? 'animate-progress-indeterminate' : 'start-0',
     ...etc,
   );

package/src/theme/components/toast.ts

@@ -4,8 +4,7 @@
 
 import { type ComponentFunction, type Theme } from '@dxos/ui-types';
 
-import { focusRing, surfaceShadow } from '../../fragments';
-import { mx } from '../../util';
+import { mx, surfaceShadow } from '../../util';
 
 export type ToastStyleProps = Partial<{
   srOnly: boolean;
@@ -28,7 +27,7 @@ export const toastRoot: ComponentFunction<ToastStyleProps> = (_props, ...etc) =>
     'radix-swipe-end:animate-toast-swipe-out',
     'translate-x-radix-toast-swipe-move-x',
     'radix-swipe-cancel:translate-x-0 radix-swipe-cancel:duration-200 radix-swipe-cancel:ease-[ease]',
-    focusRing,
+    'dx-focus-ring',
     ...etc,
   );
 

package/src/theme/components/toolbar.ts

@@ -4,7 +4,6 @@
 
 import { type ComponentFunction, type Density, type Theme } from '@dxos/ui-types';
 
-import { textBlockWidth } from '../../fragments';
 import { mx } from '../../util';
 
 export type ToolbarStyleProps = Partial<{
@@ -26,16 +25,11 @@ export const toolbarRoot: ComponentFunction<ToolbarStyleProps> = ({ density, dis
   );
 };
 
-export const toolbarInner: ComponentFunction<ToolbarStyleProps> = ({ layoutManaged }, ...etc) => {
-  return mx(!layoutManaged && ['flex gap-1', textBlockWidth], ...etc);
-};
-
 export const toolbarText: ComponentFunction<ToolbarStyleProps> = (_, ...etc) => {
-  return mx('grow truncate items-center', textBlockWidth, ...etc);
+  return mx('px-2 grow truncate items-center', ...etc);
 };
 
 export const toolbarTheme: Theme<ToolbarStyleProps> = {
   root: toolbarRoot,
-  inner: toolbarInner,
   text: toolbarText,
 };

package/src/theme/components/tooltip.ts

@@ -4,8 +4,7 @@
 
 import { type ComponentFunction, type Elevation, type Theme } from '@dxos/ui-types';
 
-import { surfaceShadow, surfaceZIndex } from '../../fragments';
-import { mx } from '../../util';
+import { mx, surfaceShadow, surfaceZIndex } from '../../util';
 
 export type TooltipStyleProps = Partial<{
   elevation: Elevation;

package/src/theme/components/treegrid.ts

@@ -25,7 +25,7 @@ const levelStyles = new Map<number, string>([
 export const treegridRoot: ComponentFunction<TreegridStyleProps> = (_, ...etc) => mx('grid', ...etc);
 
 export const treegridRow: ComponentFunction<TreegridStyleProps> = ({ level = 1 }, ...etc) =>
-  mx('contents', levelStyles.get(Math.min(Math.max(Math.round(level), 1), 8)), ...etc);
+  mx(levelStyles.get(Math.min(Math.max(Math.round(level), 1), 8)), ...etc);
 
 export const treegridCell: ComponentFunction<TreegridStyleProps> = ({ indent }, ...etc) =>
   mx(indent && 'indent', ...etc);

package/src/theme/index.ts

@@ -3,4 +3,5 @@
 //
 
 export * from './components';
+export * from './primitives';
 export * from './theme';

package/src/theme/primitives/column.ts

@@ -6,25 +6,42 @@ import { type ComponentFunction } from '@dxos/ui-types';
 
 import { mx } from '../../util';
 
-const columnRoot: ComponentFunction<Record<string, any>> = (_, ...etc) => mx('dx-column w-full min-w-0 grid', ...etc);
+export type ColumnStyleProps = {
+  fullWidth?: boolean;
+  center?: boolean;
+};
+
+const columnRoot: ComponentFunction<ColumnStyleProps> = (_, ...etc) => {
+  return mx('dx-column grid', ...etc);
+};
 
 /**
- * Three-column icon-slot row: spans all 3 columns of the parent Column.Root grid.
- * Uses CSS subgrid to inherit column sizing from the parent Column.
- * Children map to: [col-1: icon/slot] [col-2: content] [col-3: icon/action].
+ * Full-width content area that inherits the parent Column.Root's 3-column grid via subgrid.
+ * Non-scrolling children default to column 2 (center, between gutters).
+ * ScrollArea children span all 3 columns via the existing `[.dx-column_&]:col-span-full` selector.
+ * This avoids padding/overflow conflicts — gutters come from the grid, not padding.
  */
-const columnRow: ComponentFunction<Record<string, any>> = (_, ...etc) =>
-  mx('col-span-3 grid grid-cols-subgrid', ...etc);
+const columnContent: ComponentFunction<ColumnStyleProps> = (_, ...etc) => {
+  return mx('col-span-full grid grid-cols-subgrid min-h-0 [&>:not(.dx-container)]:col-start-2', ...etc);
+};
+
+const columnViewport: ComponentFunction<ColumnStyleProps> = (_, ...etc) => {
+  return mx(...etc);
+};
 
 /**
+ * Three-column icon-slot row: spans all 3 columns of the parent Column.Root grid.
+ * Uses CSS subgrid to inherit column sizing from the parent Column.
+ * Children map to: [col-1: icon/slot] [col-2: content] [col-3: icon/action].
  * NOTE: Must not use overflow-hidden here since it will clip input focus rings.
- * Occupies only the center column (col-2) of the parent Column.Root grid.
  */
-const columnSegment: ComponentFunction<Record<string, any>> = (_, ...etc) =>
-  mx('col-start-2 col-span-1 min-w-0', ...etc);
+const columnRow: ComponentFunction<ColumnStyleProps> = ({ fullWidth, center }, ...etc) => {
+  return mx('col-span-3 grid grid-cols-subgrid', fullWidth ? 'col-span-3' : center && 'col-start-2 col-span-1', ...etc);
+};
 
 export const columnTheme = {
   root: columnRoot,
+  content: columnContent,
+  viewport: columnViewport,
   row: columnRow,
-  segment: columnSegment,
 };

package/src/theme/primitives/panel.ts

@@ -6,41 +6,34 @@ import { type ComponentFunction } from '@dxos/ui-types';
 
 import { mx } from '../../util';
 
-export type PanelProps = {};
+type Size = 'lg' | 'md' | 'sm';
 
-const panelRoot: ComponentFunction<PanelProps> = (_, ...etc) =>
+export type PanelStyleProps = {
+  size?: Size;
+};
+
+const sizes: Record<Size, string> = {
+  lg: 'h-(--dx-topbar-size)',
+  md: 'h-(--dx-toolbar-size)',
+  sm: 'h-(--dx-statusbar-size)',
+};
+
+const panelRoot: ComponentFunction<PanelStyleProps> = (_, ...etc) =>
   mx(
     // prettier-ignore
-    'h-full w-full grid grid-cols-[100%] overflow-hidden',
+    'dx-container grid grid-cols-[100%] overflow-hidden',
     // Add uncategorized children to content slot.
     '[&>*:not([data-slot])]:[grid-area:content]',
     ...etc,
   );
 
-// TODO(burdon): Drop asChild (or make it not necessary).
+const panelToolbar: ComponentFunction<PanelStyleProps> = ({ size = 'md' }, ...etc) =>
+  mx('[grid-area:toolbar]', 'shrink-0', sizes[size], ...etc);
 
-const panelToolbar: ComponentFunction<PanelProps> = (_, ...etc) =>
-  mx(
-    // prettier-ignore
-    '[grid-area:toolbar]',
-    'border-b border-subdued-separator relative',
-    '[.dx-main-mobile-layout_&]:px-3',
-    ...etc,
-  );
+const panelContent: ComponentFunction<PanelStyleProps> = (_, ...etc) => mx('[grid-area:content] min-h-0', ...etc);
 
-const panelContent: ComponentFunction<PanelProps> = (_, ...etc) =>
-  mx(
-    // prettier-ignore
-    '[grid-area:content] overflow-hidden min-h-0',
-    ...etc,
-  );
-
-const panelStatusbar: ComponentFunction<PanelProps> = (_, ...etc) =>
-  mx(
-    // prettier-ignore
-    '[grid-area:statusbar]',
-    ...etc,
-  );
+const panelStatusbar: ComponentFunction<PanelStyleProps> = ({ size = 'md' }, ...etc) =>
+  mx('[grid-area:statusbar]', 'shrink-0', sizes[size], ...etc);
 
 export const panelTheme = {
   root: panelRoot,

package/src/theme/theme.ts

@@ -11,6 +11,7 @@ import {
   buttonTheme,
   cardTheme,
   dialogTheme,
+  focusTheme,
   iconButtonTheme,
   iconTheme,
   inputTheme,
@@ -53,6 +54,7 @@ export const defaultTheme: Theme<Record<string, any>> = {
   button: buttonTheme,
   card: cardTheme,
   dialog: dialogTheme,
+  focus: focusTheme,
   icon: iconTheme,
   iconButton: iconButtonTheme,
   input: inputTheme,

package/src/typings.d.ts

@@ -5,3 +5,6 @@
 declare module 'fast-glob';
 declare module 'tailwindcss/stubs/config.full.js';
 declare module 'tailwindcss-radix';
+
+/** Virtual CSS entry from ThemePlugin (`virtualFileId: '@dxos-theme'`). */
+declare module '@dxos-theme';

package/src/util/index.ts

@@ -2,5 +2,8 @@
 // Copyright 2022 DXOS.org
 //
 
+export * from './elevation';
 export * from './hash-styles';
 export * from './mx';
+export * from './size';
+export * from './valence';

package/src/util/mx.ts

@@ -2,12 +2,21 @@
 // Copyright 2022 DXOS.org
 //
 
-import { type ElementType, type HTMLAttributes } from 'react';
-import { type ClassNameValue, extendTailwindMerge, validators } from 'tailwind-merge';
+import {
+  Children,
+  createElement,
+  forwardRef,
+  type ForwardRefExoticComponent,
+  type ForwardedRef,
+  type HTMLAttributes,
+  isValidElement,
+  type ReactNode,
+  type RefAttributes,
+} from 'react';
+import { extendTailwindMerge, validators } from 'tailwind-merge';
 
-import { Slot } from '@radix-ui/react-slot';
-
-import { type ComposableProps } from '@dxos/ui-types';
+import { log } from '@dxos/log';
+import { ThemedClassName, type ComposableProps, type SlottableProps } from '@dxos/ui-types';
 
 type AdditionalClassGroups = 'density' | 'dx-focus-ring';
 
@@ -58,11 +67,101 @@ export const mx = extendTailwindMerge<AdditionalClassGroups>({
  * - `classNames` is the consumer-facing prop for theming overrides.
  * Use `composableProps` to reconcile both into a single `className`.
  */
+// TODO(burdon): Move to react-ui.
 export const composableProps = <P extends HTMLElement = HTMLElement>(
-  { className, classNames, ...props }: ComposableProps,
-  { className: defaultClassNames, ...defaults }: Partial<HTMLAttributes<P>> | undefined = {},
+  { className, classNames, role, ...props }: ComposableProps,
+  { classNames: defaultClassNames, ...defaults }: ThemedClassName<Partial<HTMLAttributes<P>>> | undefined = {},
 ) => ({
+  // Default props.
   ...(defaults as object),
+
+  // Spread supplied props; prefer explicit role, then defaults role, then 'none'.
+  role: (role ?? (defaults as Record<string, string>).role ?? 'none') as string,
   ...props,
+
+  // Compose classnames.
   className: mx(defaultClassNames, className, classNames),
 });
+
+/**
+ * Factory for slottable components.
+ * The implementation receives full `HTMLAttributes<E>` so it can destructure `role`, `style`, etc.
+ * Consumers see only `SlottableProps<P>` — a narrow type exposing `classNames`, `className`,
+ * `children`, `asChild`, and the custom props `P`.
+ *
+ * @example
+ * ```tsx
+ * const MyPanel = slottable<HTMLDivElement, { border?: boolean }>(
+ *   ({ children, asChild, border, ...props }, forwardedRef) => {
+ *     const Comp = asChild ? Slot : Primitive.div;
+ *     return (
+ *       <Comp {...composableProps(props, { classNames: border && 'border' })} ref={forwardedRef}>
+ *         {children}
+ *       </Comp>
+ *     );
+ *   },
+ * );
+ * ```
+ */
+/** Symbol used to mark components created by `composable()` or `slottable()`. */
+const COMPOSABLE = Symbol.for('dxos.composable');
+
+export function slottable<E extends HTMLElement, P extends object = {}>(
+  render: (props: SlottableProps<P> & HTMLAttributes<E>, forwardedRef: ForwardedRef<E>) => ReactNode,
+): ForwardRefExoticComponent<SlottableProps<P> & RefAttributes<E>> {
+  const wrapped = (props: SlottableProps<P> & HTMLAttributes<E>, forwardedRef: ForwardedRef<E>) => {
+    let warn = false;
+    if (props.asChild) {
+      try {
+        const child = Children.only(props.children);
+        if (isValidElement(child) && typeof child.type !== 'string' && !(child.type as any)[COMPOSABLE]) {
+          warn = true;
+          log.warn('slot child is not composable; create it with composable() or slottable()', {
+            child: (child.type as any).displayName ?? (child.type as any).name,
+          });
+        }
+      } catch {
+        // Children.only throws if not exactly one child — Slot handles this.
+      }
+    }
+
+    const result = render(props, forwardedRef);
+    if (warn) {
+      return createElement('div', { role: 'none', className: 'dx-slot-warning' }, result);
+    }
+
+    return result;
+  };
+
+  const component = forwardRef(wrapped as any) as any;
+  (component as any)[COMPOSABLE] = true;
+  return component;
+}
+
+/**
+ * Factory for composable (leaf) components.
+ * The implementation receives full `HTMLAttributes<E>` so it can destructure `role`, `style`, etc.
+ * Consumers see only `ComposableProps<P>` — a narrow type exposing `classNames`, `className`,
+ * `children`, and the custom props `P`.
+ *
+ * For generic components, use `any` for the type parameter inside `composable` and
+ * cast the result to restore the generic signature for consumers.
+ *
+ * @example
+ * ```tsx
+ * const Leaf = composable<HTMLButtonElement>(({ children, ...props }, forwardedRef) => {
+ *   return (
+ *     <button {...composableProps(props, { classNames: 'btn' })} ref={forwardedRef}>
+ *       {children}
+ *     </button>
+ *   );
+ * });
+ * ```
+ */
+export function composable<E extends HTMLElement, P extends object = {}>(
+  render: (props: ComposableProps<P> & HTMLAttributes<E>, forwardedRef: ForwardedRef<E>) => ReactNode,
+): ForwardRefExoticComponent<ComposableProps<P> & RefAttributes<E>> {
+  const component = forwardRef(render as any) as any;
+  (component as any)[COMPOSABLE] = true;
+  return component;
+}

package/src/util/size.ts

@@ -0,0 +1,103 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { type CSSProperties } from 'react';
+
+import { type Size } from '@dxos/ui-types';
+
+import { mx } from '../util';
+
+// NOTE: Class names must be fully-specified string literals so Tailwind's static scanner can detect them.
+const sizeMap: Record<string, { w: string; h: string }> = {
+  0: { w: 'w-0', h: 'h-0' },
+  px: { w: 'w-px', h: 'h-px' },
+  0.5: { w: 'w-0.5', h: 'h-0.5' },
+  1: { w: 'w-1', h: 'h-1' },
+  1.5: { w: 'w-1.5', h: 'h-1.5' },
+  2: { w: 'w-2', h: 'h-2' },
+  2.5: { w: 'w-2.5', h: 'h-2.5' },
+  3: { w: 'w-3', h: 'h-3' },
+  3.5: { w: 'w-3.5', h: 'h-3.5' },
+  4: { w: 'w-4', h: 'h-4' },
+  5: { w: 'w-5', h: 'h-5' },
+  6: { w: 'w-6', h: 'h-6' },
+  7: { w: 'w-7', h: 'h-7' },
+  8: { w: 'w-8', h: 'h-8' },
+  9: { w: 'w-9', h: 'h-9' },
+  10: { w: 'w-10', h: 'h-10' },
+  11: { w: 'w-11', h: 'h-11' },
+  12: { w: 'w-12', h: 'h-12' },
+  14: { w: 'w-14', h: 'h-14' },
+  16: { w: 'w-16', h: 'h-16' },
+  20: { w: 'w-20', h: 'h-20' },
+  24: { w: 'w-24', h: 'h-24' },
+  28: { w: 'w-28', h: 'h-28' },
+  32: { w: 'w-32', h: 'h-32' },
+  36: { w: 'w-36', h: 'h-36' },
+  40: { w: 'w-40', h: 'h-40' },
+  44: { w: 'w-44', h: 'h-44' },
+  48: { w: 'w-48', h: 'h-48' },
+  52: { w: 'w-52', h: 'h-52' },
+  56: { w: 'w-56', h: 'h-56' },
+  60: { w: 'w-60', h: 'h-60' },
+  64: { w: 'w-64', h: 'h-64' },
+  72: { w: 'w-72', h: 'h-72' },
+  80: { w: 'w-80', h: 'h-80' },
+  96: { w: 'w-96', h: 'h-96' },
+};
+
+const SIZE_VALUES: Size[] = Object.keys(sizeMap).map((key) => (key === 'px' ? 'px' : (Number(key) as Size)));
+
+export const getHeight = (size: Size) => sizeMap[size]?.h;
+export const getWidth = (size: Size) => sizeMap[size]?.w;
+export const getSize = (size: Size) => mx(getHeight(size), getWidth(size));
+
+export const sizeValue = (size: Size): number => (size === 'px' ? 1 : size);
+export const sizeToRem = (size: Size): string => (size === 'px' ? '1px' : `${(size as number) * 0.25}rem`);
+
+export const iconSize = (size: Size | null): CSSProperties =>
+  ({ '--icon-size': size ? sizeToRem(size) : 'initial' }) as CSSProperties;
+
+/**
+ * Snaps an arbitrary numeric value to the nearest valid Tailwind size token.
+ *
+ * The function tries progressively coarser series in order until a match is found:
+ * 1. Exact match — returns the value as-is if it is already a valid `Size`.
+ * 2. Zero or negative — clamps to `0`.
+ * 3. Sub-half values (`< 0.5`) — maps to the `'px'` token (1 px).
+ * 4. Half-step series (0.5 increments, e.g. 1.5, 2.5 …).
+ * 5. Whole-number series (1, 2, 3 …).
+ * 6. Double series (even numbers: 2, 4, 6 …).
+ * 7. Quadruple series (multiples of 4: 4, 8, 12 …).
+ * 8. Falls back to `defaultSize` if no series matches.
+ *
+ * @param value - Numeric size to snap (in Tailwind spacing units, where 1 unit = 0.25 rem).
+ * @param defaultSize - Fallback `Size` token used when no series produces a valid match.
+ * @returns The nearest valid `Size` token.
+ */
+export const snapSize = (value: number, defaultSize: Size): Size => {
+  if (SIZE_VALUES.includes(value as Size)) {
+    return value as Size;
+  } else if (value <= 0) {
+    return 0;
+  } else if (value < 0.5) {
+    return 'px';
+  } else {
+    const wholeSeries = Math.floor(value);
+    const halfSeries = Math.floor(value * 2) / 2;
+    const doubleSeries = Math.floor(value / 2) * 2;
+    const quadrupleSeries = Math.floor(value / 4) * 4;
+    if (SIZE_VALUES.includes(halfSeries as Size)) {
+      return halfSeries as Size;
+    } else if (SIZE_VALUES.includes(wholeSeries as Size)) {
+      return wholeSeries as Size;
+    } else if (SIZE_VALUES.includes(doubleSeries as Size)) {
+      return doubleSeries as Size;
+    } else if (SIZE_VALUES.includes(quadrupleSeries as Size)) {
+      return quadrupleSeries as Size;
+    } else {
+      return defaultSize;
+    }
+  }
+};