@dxos/react-ui 0.10.0 → 0.11.0

package/src/components/Input/Input.stories.tsx

@@ -8,6 +8,7 @@ import React from 'react';
 import { type MessageValence } from '@dxos/ui-types';
 
 import { withLayoutVariants, withTheme } from '../../testing';
+import { Icon } from '../Icon';
 import {
   type CheckboxProps,
   type DateInputProps,
@@ -93,19 +94,6 @@ export default meta;
 
 type Story = StoryObj<StoryArgs & Variant>;
 
-export const Density: Story = {
-  render: () => (
-    <div className='flex flex-col gap-4'>
-      {(['lg', 'md', 'sm', 'xs'] as const).map((density) => (
-        <Input.Root key={density}>
-          <Input.Label>{`density="${density}"`}</Input.Label>
-          <Input.TextInput density={density} placeholder={`This is a density:${density} input`} />
-        </Input.Root>
-      ))}
-    </div>
-  ),
-};
-
 export const Subdued: Story = {
   args: {
     kind: 'text',
@@ -179,6 +167,68 @@ export const TextArea: Story = {
   },
 };
 
+/**
+ * Native HTML input types. `Input.TextInput` accepts every standard
+ * `<input type="…">` value via its `type` prop; this story exercises the most
+ * commonly used ones so the rendering across themes/browsers can be
+ * inspected at a glance.
+ */
+const TEXT_INPUT_TYPES: { type: string; placeholder: string }[] = [
+  { type: 'text', placeholder: 'Plain text' },
+  { type: 'email', placeholder: 'name@example.com' },
+  { type: 'password', placeholder: '••••••••' },
+  { type: 'search', placeholder: 'Search…' },
+  { type: 'tel', placeholder: '+1 (555) 555-5555' },
+  { type: 'url', placeholder: 'https://example.com' },
+  { type: 'number', placeholder: '42' },
+  { type: 'date', placeholder: '' },
+  { type: 'time', placeholder: '' },
+  { type: 'datetime-local', placeholder: '' },
+  { type: 'month', placeholder: '' },
+  { type: 'week', placeholder: '' },
+];
+
+export const _TextInput: Story = {
+  render: () => (
+    <div className='flex flex-col gap-3 min-w-[24rem]'>
+      {TEXT_INPUT_TYPES.map(({ type, placeholder }) => (
+        <Input.Root key={type}>
+          <Input.Label>{`type="${type}"`}</Input.Label>
+          <Input.TextInput type={type} placeholder={placeholder} />
+        </Input.Root>
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * MUI-style adornments: text or icon placed inside the input container. The container carries the
+ * surface/border/focus (via `focus-within`) and the field renders bare. `subdued` drops the box for a
+ * borderless row (compose a bottom rule via `classNames`).
+ */
+export const TextInputAdornments: Story = {
+  render: () => (
+    <div className='flex flex-col gap-4 min-w-[28rem]'>
+      <Input.Root>
+        <Input.Label>Start icon</Input.Label>
+        <Input.TextInput start={<Icon icon='ph--magnifying-glass--regular' size={4} />} placeholder='Search…' />
+      </Input.Root>
+      <Input.Root>
+        <Input.Label>End text</Input.Label>
+        <Input.TextInput end={<span className='text-sm'>.dxos.org</span>} placeholder='workspace' />
+      </Input.Root>
+      <Input.Root>
+        <Input.Label>Both</Input.Label>
+        <Input.TextInput
+          start={<span className='text-sm'>$</span>}
+          end={<Icon icon='ph--currency-circle-dollar--regular' size={4} />}
+          placeholder='0.00'
+        />
+      </Input.Root>
+    </div>
+  ),
+};
+
 export const PinInput: Story = {
   args: {
     kind: 'pin',
@@ -282,38 +332,3 @@ export const Switch: Story = {
     description: 'On or off',
   },
 };
-
-/**
- * Native HTML input types. `Input.TextInput` accepts every standard
- * `<input type="…">` value via its `type` prop; this story exercises the most
- * commonly used ones so the rendering across themes/browsers can be
- * inspected at a glance.
- */
-const TEXT_INPUT_TYPES: { type: string; placeholder: string }[] = [
-  { type: 'text', placeholder: 'Plain text' },
-  { type: 'email', placeholder: 'name@example.com' },
-  { type: 'password', placeholder: '••••••••' },
-  { type: 'search', placeholder: 'Search…' },
-  { type: 'tel', placeholder: '+1 (555) 555-5555' },
-  { type: 'url', placeholder: 'https://example.com' },
-  { type: 'number', placeholder: '42' },
-  { type: 'date', placeholder: '' },
-  { type: 'time', placeholder: '' },
-  { type: 'datetime-local', placeholder: '' },
-  { type: 'month', placeholder: '' },
-  { type: 'week', placeholder: '' },
-  { type: 'color', placeholder: '' },
-];
-
-export const TextInputTypes: Story = {
-  render: () => (
-    <div className='flex flex-col gap-3 min-w-[24rem]'>
-      {TEXT_INPUT_TYPES.map(({ type, placeholder }) => (
-        <Input.Root key={type}>
-          <Input.Label>{`type="${type}"`}</Input.Label>
-          <Input.TextInput type={type} placeholder={placeholder} />
-        </Input.Root>
-      ))}
-    </div>
-  ),
-};

package/src/components/Input/Input.theme.ts

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { densityDimensions, staticDisabled } from '@dxos/ui-theme';
+import { staticDisabled } from '@dxos/ui-theme';
 import { getSize, mx, sizeValue, snapSize, textValence } from '@dxos/ui-theme';
 import {
   type ComponentFragment,
@@ -48,19 +48,23 @@ const valence = (valence?: MessageValence) => {
   }
 };
 
+// Height and inline padding come from the density knobs (theme/spacing.css) rather than utilities,
+// so a density class on any ancestor resizes the control without a matching React prop.
+const controlSize = 'min-h-(--dx-control) px-(--dx-control-pad) leading-(--dx-control-leading)';
+
 const sharedSubduedInputStyles: ComponentFragment<InputStyleProps> = (props) => [
   '[[data-drag-autoscroll="active"]_&]:pointer-events-none',
   'py-0 w-full bg-transparent text-current placeholder-placeholder',
   'dx-focus-subdued',
-  densityDimensions(props.density),
+  controlSize,
   props.disabled && staticDisabled,
 ];
 
 const sharedDefaultInputStyles: ComponentFragment<InputStyleProps> = (props) => [
   '[[data-drag-autoscroll="active"]_&]:pointer-events-none',
-  'py-0 w-full text-base-fg rounded-xs placeholder-placeholder',
-  textInputSurfaceFocus,
-  densityDimensions(props.density),
+  'py-0 w-full text-base-fg placeholder-placeholder',
+  'dx-input',
+  controlSize,
   props.disabled ? staticDisabled : textInputSurfaceHover,
 ];
 
@@ -80,15 +84,26 @@ const input: ComponentFunction<InputStyleProps> = (props, ...etc) =>
     ? mx(...sharedSubduedInputStyles(props), ...etc)
     : props.variant === 'static'
       ? mx(...sharedStaticInputStyles(props), ...etc)
-      : mx(
-          ...sharedDefaultInputStyles(props),
-          !props.disabled && 'dx-focus-ring',
-          valence(props.validationValence),
-          ...etc,
-        );
+      : mx(...sharedDefaultInputStyles(props), valence(props.validationValence), ...etc);
 
 const textArea: ComponentFunction<InputStyleProps> = (props, ...etc) => input(props, ...etc);
 
+// Container that carries the input surface/border/focus when the field has adornments; the inner
+// `<input>` renders "bare" (subdued) so the box wraps the whole row (start adornment · field · end).
+const container: ComponentFunction<InputStyleProps> = (props, ...etc) =>
+  props.variant === 'subdued' || props.variant === 'static'
+    ? mx('flex items-center w-full', props.disabled && staticDisabled, ...etc)
+    : mx(
+        // `p-0` cancels dx-input's default padding: the inset comes from the adornments and the inner field.
+        'flex items-center w-full dx-input p-0',
+        valence(props.validationValence),
+        props.disabled ? staticDisabled : textInputSurfaceHover,
+        ...etc,
+      );
+
+const adornment: ComponentFunction<Partial<{ side: 'start' | 'end' }>> = (props, ...etc) =>
+  mx('shrink-0 flex items-center gap-1 text-description', props.side === 'start' ? 'ps-2' : 'pe-2', ...etc);
+
 const checkbox: ComponentFunction<InputStyleProps> = ({ size = 4 }, ...etc) =>
   mx('dx-checkbox dx-focus-ring', getSize(size), ...etc);
 
@@ -100,13 +115,7 @@ const switch_: ComponentFunction<InputStyleProps> = (_props, ...etc) => mx('dx-c
 const pin: ComponentFunction<InputStyleProps> = (props, ...etc) =>
   mx(
     'font-mono selection:bg-transparent mx-auto',
-    props.density === 'lg'
-      ? 'text-lg'
-      : props.density === 'sm'
-        ? 'text-sm'
-        : props.density === 'xs'
-          ? 'text-xs'
-          : 'text-base pointer-fine:text-sm',
+    props.density === 'lg' ? 'text-lg' : props.density === 'sm' ? 'text-sm' : 'text-base pointer-fine:text-sm',
     props.disabled && 'cursor-not-allowed',
     ...etc,
   );
@@ -114,14 +123,9 @@ const pin: ComponentFunction<InputStyleProps> = (props, ...etc) =>
 const segment: ComponentFunction<InputStyleProps> = (props, ...etc) =>
   mx(
     'flex items-center justify-center tabular-nums',
-    props.density === 'lg'
-      ? 'size-12 rounded-xs'
-      : props.density === 'sm'
-        ? 'size-7 rounded-xs'
-        : props.density === 'xs'
-          ? 'size-6 rounded-xs'
-          : 'size-10 pointer-fine:size-8 rounded-xs',
-    'bg-input-surface text-base-fg transition-colors border border-separator',
+    // A PIN segment is a square control, so it takes the density height on both axes.
+    'size-(--dx-control) rounded-xs',
+    'bg-input-surface text-base-fg transition-colors border border-input-separator',
     'data-[focused]:bg-attention-surface data-[focused]:border-focus-ring-subtle',
     'data-[focused]:ring-2 data-[focused]:ring-offset-0 data-[focused]:ring-focus-ring-subtle',
     valence(props.validationValence),
@@ -143,7 +147,7 @@ const validation: ComponentFunction<InputMetaStyleProps> = (props, ...etc) =>
 
 const triggerIcon: ComponentFunction<{}> = (_p, ...etc) =>
   mx(
-    'shrink-0 inline-flex items-center justify-center size-7 rounded-xs',
+    'shrink-0 inline-flex items-center justify-center size-(--dx-control-sm) rounded-xs',
     'bg-input-surface text-subdued hover:text-base-fg hover:bg-hover-surface',
     'dx-focus-ring',
     ...etc,
@@ -154,6 +158,8 @@ const block: ComponentFunction<InputStyleProps> = (props, ...etc) =>
 
 export const inputTheme = {
   input,
+  container,
+  adornment,
   textArea,
   pin,
   segment,

package/src/components/Input/Input.tsx

@@ -3,15 +3,14 @@
 //
 
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { createContext } from '@radix-ui/react-context';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import React, {
   type ComponentPropsWithRef,
   type ForwardRefExoticComponent,
   PropsWithChildren,
+  type ReactNode,
   forwardRef,
   useCallback,
-  useEffect,
   useRef,
   useState,
 } from 'react';
@@ -46,6 +45,7 @@ import { useDensityContext, useElevationContext, useThemeContext } from '../../h
 import { type ThemedClassName } from '../../util';
 import { IconButton, IconButtonProps } from '../Button';
 import { Icon } from '../Icon';
+import { type InputTriggerHandler, InputTriggerProvider, useInputTriggerContext } from './InputTriggerContext';
 import {
   SegmentedDate,
   type SegmentedDateProps,
@@ -59,40 +59,6 @@ type InputVariant = 'default' | 'subdued';
 
 type InputSharedProps = Partial<{ density: Density; elevation: Elevation; variant: InputVariant }>;
 
-//
-// Trigger context — lets a sibling `Input.TriggerIcon` open a picker registered by a field inside
-// the same `Input.Root`. Each registered handler is keyed; the most recent registration wins.
-//
-
-type InputTriggerHandler = () => void;
-
-type InputTriggerContextValue = {
-  registerTrigger: (handler: InputTriggerHandler) => () => void;
-  trigger: () => void;
-  hasTrigger: boolean;
-};
-
-// Default context makes the trigger registry a no-op outside `Input.Root` (consumers opt in).
-const [InputTriggerProvider, useInputTriggerContext] = createContext<InputTriggerContextValue>(INPUT_NAME, {
-  registerTrigger: () => () => {},
-  trigger: () => {},
-  hasTrigger: false,
-});
-
-/**
- * Field hook. Pass an opener function; while the field is mounted, an `Input.TriggerIcon`
- * sibling will call this opener on press. Returns a no-op when used outside `Input.Root`.
- */
-const useInputTrigger = (handler: InputTriggerHandler | undefined) => {
-  const ctx = useInputTriggerContext('useInputTrigger');
-  useEffect(() => {
-    if (!handler) {
-      return;
-    }
-    return ctx.registerTrigger(handler);
-  }, [ctx, handler]);
-};
-
 //
 // Root — wraps the @dxos/react-input primitive root with the trigger registry.
 //
@@ -281,11 +247,28 @@ type AutoFillProps = {
   noAutoFill?: boolean;
 };
 
-type TextInputProps = InputSharedProps & ThemedClassName<TextInputPrimitiveProps> & AutoFillProps;
+type AdornmentProps = {
+  /** Content rendered inside the input container before the field (icon or text). */
+  start?: ReactNode;
+  /** Content rendered inside the input container after the field (icon, text, or button). */
+  end?: ReactNode;
+};
+
+type TextInputProps = InputSharedProps & ThemedClassName<TextInputPrimitiveProps> & AutoFillProps & AdornmentProps;
 
 const TextInput = forwardRef<HTMLInputElement, InputScopedProps<TextInputProps>>(
   (
-    { __inputScope, classNames, density: densityProp, elevation: elevationProp, variant, noAutoFill, ...props },
+    {
+      __inputScope,
+      classNames,
+      density: densityProp,
+      elevation: elevationProp,
+      variant,
+      noAutoFill,
+      start,
+      end,
+      ...props
+    },
     forwardedRef,
   ) => {
     const { hasIosKeyboard } = useThemeContext();
@@ -293,27 +276,48 @@ const TextInput = forwardRef<HTMLInputElement, InputScopedProps<TextInputProps>>
     const density = useDensityContext(densityProp);
     const elevation = useElevationContext(elevationProp);
     const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
+    const adorned = start != null || end != null;
 
-    return (
+    const field = (
       <TextInputPrimitive
         {...props}
         // TODO(wittjosiah): Factor out autofill properies.
         {...{ 'data-1p-ignore': noAutoFill }}
+        // Sizing comes from the `--dx-control*` knobs; `data-density` is what applies a per-control
+        // override of them (see theme/spacing.css), so a `density` prop still works standalone.
+        data-density={density}
         className={tx(
           'input.input',
           {
-            variant,
+            // When adorned the surrounding container owns the surface/border/focus, so the field is
+            // rendered "bare" (subdued) regardless of the requested variant.
+            variant: adorned ? 'subdued' : variant,
             disabled: props.disabled,
             density,
             elevation,
             validationValence,
           },
-          classNames,
+          adorned ? undefined : classNames,
         )}
         {...(props.autoFocus && !hasIosKeyboard && { autoFocus: true })}
         ref={forwardedRef}
       />
     );
+
+    if (!adorned) {
+      return field;
+    }
+
+    return (
+      <div
+        data-density={density}
+        className={tx('input.container', { variant, disabled: props.disabled, density, validationValence }, classNames)}
+      >
+        {start != null && <span className={tx('input.adornment', { side: 'start' })}>{start}</span>}
+        {field}
+        {end != null && <span className={tx('input.adornment', { side: 'end' })}>{end}</span>}
+      </div>
+    );
   },
 );
 
@@ -336,6 +340,7 @@ const TextArea = forwardRef<HTMLTextAreaElement, InputScopedProps<TextAreaProps>
     return (
       <TextAreaPrimitive
         {...props}
+        data-density={density}
         className={tx(
           'input.textArea',
           {
@@ -522,8 +527,6 @@ export const Input = {
   DescriptionAndValidation,
 };
 
-export { useInputTrigger };
-
 export type {
   CheckboxProps,
   DateInputProps,

package/src/components/Input/InputTriggerContext.ts

@@ -0,0 +1,45 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { createContext } from '@radix-ui/react-context';
+import { useEffect } from 'react';
+
+import { INPUT_NAME } from '@dxos/react-input';
+
+// Kept out of `Input.tsx`: react-refresh only fast-refreshes a module whose exports are all
+// components, so a context and its hook exported beside them force a full page reload on every edit.
+
+//
+// Trigger context — lets a sibling `Input.TriggerIcon` open a picker registered by a field inside
+// the same `Input.Root`. Each registered handler is keyed; the most recent registration wins.
+//
+
+export type InputTriggerHandler = () => void;
+
+export type InputTriggerContextValue = {
+  registerTrigger: (handler: InputTriggerHandler) => () => void;
+  trigger: () => void;
+  hasTrigger: boolean;
+};
+
+// Default context makes the trigger registry a no-op outside `Input.Root` (consumers opt in).
+export const [InputTriggerProvider, useInputTriggerContext] = createContext<InputTriggerContextValue>(INPUT_NAME, {
+  registerTrigger: () => () => {},
+  trigger: () => {},
+  hasTrigger: false,
+});
+
+/**
+ * Field hook. Pass an opener function; while the field is mounted, an `Input.TriggerIcon`
+ * sibling will call this opener on press. Returns a no-op when used outside `Input.Root`.
+ */
+export const useInputTrigger = (handler: InputTriggerHandler | undefined) => {
+  const ctx = useInputTriggerContext('useInputTrigger');
+  useEffect(() => {
+    if (!handler) {
+      return;
+    }
+    return ctx.registerTrigger(handler);
+  }, [ctx, handler]);
+};

package/src/components/Input/SegmentedInput.tsx

@@ -20,7 +20,8 @@ import { useDensityContext, useElevationContext, useThemeContext } from '../../h
 import { type ThemedClassName } from '../../util';
 import { DatePicker } from '../DatePicker';
 import { Popover } from '../Popover';
-import { type InputSharedProps, useInputTrigger } from './Input';
+import { type InputSharedProps } from './Input';
+import { useInputTrigger } from './InputTriggerContext';
 
 //
 // Value <-> @internationalized/date adapters.

package/src/components/Input/index.ts

@@ -2,5 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
+export { useInputTrigger } from './InputTriggerContext';
+
 export * from './Input';
 export * from './SegmentedInput';

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

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

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

@@ -14,8 +14,17 @@ export type MainStyleProps = Partial<{
   handlesFocus: boolean;
 }>;
 
+// The app canvas is the base zone: it paints the level and publishes `--surface-bg`, which every
+// aspect inside it (bars, wells, hover/current rows) derives from.
 const content: ComponentFunction<MainStyleProps> = ({ bounce }, ...etc) =>
-  mx(padding, mainPaddingTransitions, bounce && 'dx-main-bounce-layout', 'dx-focus-ring-main', ...etc);
+  mx(
+    padding,
+    mainPaddingTransitions,
+    bounce && 'dx-main-bounce-layout',
+    'dx-base-surface',
+    'dx-focus-ring-main',
+    ...etc,
+  );
 
 const sidebar: ComponentFunction<MainStyleProps> = (_, ...etc) =>
   mx('dx-main-sidebar', 'dx-focus-ring-inset-over-all', ...etc);

package/src/components/Main/Main.tsx

@@ -2,19 +2,14 @@
 // Copyright 2023 DXOS.org
 //
 
-import { useFocusableGroup } from '@fluentui/react-tabster';
-import { createContext } from '@radix-ui/react-context';
 import { DialogContent, Root as DialogRoot, DialogTitle } from '@radix-ui/react-dialog';
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import React, {
-  type ComponentPropsWithoutRef,
   type ComponentPropsWithRef,
-  type Dispatch,
   type KeyboardEvent,
   type PropsWithChildren,
-  type SetStateAction,
   forwardRef,
   useCallback,
   useEffect,
@@ -23,7 +18,6 @@ import React, {
 } from 'react';
 
 import { addEventListener } from '@dxos/async';
-import { log } from '@dxos/log';
 import { useForwardedRef, useMediaQuery } from '@dxos/react-hooks';
 import { osTranslations } from '@dxos/ui-theme';
 
@@ -31,9 +25,9 @@ import { useThemeContext } from '../../hooks';
 import { type Label, toLocalizedString, useTranslation } from '../../primitives';
 import { type MainStyleProps } from '../../theme';
 import { type ThemedClassName } from '../../util';
+import { MAIN_NAME, MainProvider, type SidebarState, useLandmarkMover, useMainContext } from './MainContext';
 import { useSwipeToDismiss } from './useSwipeToDismiss';
 
-const MAIN_NAME = 'Main';
 const MAIN_ROOT_NAME = 'Main.Root';
 const MAIN_OVERLAY_NAME = 'Main.Overlay';
 const MAIN_CONTENT_NAME = 'Main.Content';
@@ -44,112 +38,6 @@ const handleOpenAutoFocus = (event: Event) => {
   !document.body.hasAttribute('data-w-keyboard') && event.preventDefault();
 };
 
-//
-// Landmark
-//
-
-const landmarkAttr = 'data-main-landmark';
-
-/**
- * Facilitates moving focus between landmarks.
- * Ref https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/landmark_role
- */
-const useLandmarkMover = (propsOnKeyDown: ComponentPropsWithoutRef<'div'>['onKeyDown'], landmark: string) => {
-  const handleKeyDown = useCallback(
-    (event: KeyboardEvent<HTMLDivElement>) => {
-      const target = event.target as HTMLDivElement;
-      if (event.target === event.currentTarget && event.key === 'Tab' && target.hasAttribute(landmarkAttr)) {
-        event.preventDefault();
-        const landmarks = Array.from(document.querySelectorAll(`[${landmarkAttr}]:not([inert])`))
-          .map((el) => (el.hasAttribute(landmarkAttr) ? parseInt(el.getAttribute(landmarkAttr)!) : NaN))
-          .sort();
-        const l = landmarks.length;
-        const cursor = landmarks.indexOf(parseInt(target.getAttribute(landmarkAttr)!));
-        const nextLandmark = landmarks[(cursor + l + (event.getModifierState('Shift') ? -1 : 1)) % l];
-        (document.querySelector(`[${landmarkAttr}="${nextLandmark}"]`) as HTMLDivElement | null)?.focus();
-      }
-      propsOnKeyDown?.(event);
-    },
-    [propsOnKeyDown],
-  );
-
-  // TODO(thure): This was disconnected once before in #8818;
-  //  if this should change again to support the browser extension, please ensure the change doesn’t break web, desktop and mobile.
-  const focusableGroupAttrs = useFocusableGroup({ tabBehavior: 'limited', ignoreDefaultKeydown: { Tab: true } });
-
-  return {
-    [landmarkAttr]: landmark,
-    tabIndex: 0,
-    onKeyDown: handleKeyDown,
-    ...focusableGroupAttrs,
-  };
-};
-
-//
-// Context
-//
-
-// TODO(burdon): Define collapsed state.
-type SidebarState = 'expanded' | 'collapsed' | 'closed';
-
-type MainContextValue = {
-  resizing: boolean;
-
-  // Navigation
-  navigationSidebarState: SidebarState;
-  setNavigationSidebarState: Dispatch<SetStateAction<SidebarState | undefined>>;
-
-  // Complementary
-  complementarySidebarState: SidebarState;
-  setComplementarySidebarState: Dispatch<SetStateAction<SidebarState | undefined>>;
-};
-
-const [MainProvider, useMainContext] = createContext<MainContextValue>(MAIN_NAME, {
-  resizing: false,
-
-  navigationSidebarState: 'closed',
-  setNavigationSidebarState: (_nextState) => {
-    log.warn('Not initialized');
-  },
-
-  complementarySidebarState: 'closed',
-  setComplementarySidebarState: (_nextState) => {
-    log.warn('Not initialized');
-  },
-});
-
-const useSidebars = (consumerName: string) => {
-  const {
-    navigationSidebarState,
-    setNavigationSidebarState,
-
-    complementarySidebarState,
-    setComplementarySidebarState,
-  } = useMainContext(consumerName);
-
-  return {
-    navigationSidebarState,
-    setNavigationSidebarState,
-    toggleNavigationSidebar: useCallback(
-      () => setNavigationSidebarState(navigationSidebarState === 'expanded' ? 'closed' : 'expanded'),
-      [navigationSidebarState, setNavigationSidebarState],
-    ),
-    openNavigationSidebar: useCallback(() => setNavigationSidebarState('expanded'), []),
-    collapseNavigationSidebar: useCallback(() => setNavigationSidebarState('collapsed'), []),
-    closeNavigationSidebar: useCallback(() => setNavigationSidebarState('closed'), []),
-
-    complementarySidebarState,
-    setComplementarySidebarState,
-    toggleComplementarySidebar: useCallback(
-      () => setComplementarySidebarState(complementarySidebarState === 'expanded' ? 'closed' : 'expanded'),
-      [complementarySidebarState, setComplementarySidebarState],
-    ),
-    openComplementarySidebar: useCallback(() => setComplementarySidebarState('expanded'), []),
-    collapseComplementarySidebar: useCallback(() => setComplementarySidebarState('collapsed'), []),
-    closeComplementarySidebar: useCallback(() => setComplementarySidebarState('closed'), []),
-  };
-};
-
 //
 // Root
 //
@@ -428,6 +316,4 @@ export const Main = {
   ComplementarySidebar: MainComplementarySidebar,
 };
 
-export { useLandmarkMover, useMainContext, useSidebars };
-
 export type { MainContentProps, MainNavigationSidebarProps, MainOverlayProps, MainRootProps, SidebarState };