@dxos/react-ui 0.10.0 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Low-level React components for DXOS, applying a theme to a core group of primitives",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -18,21 +18,18 @@
   "exports": {
     ".": {
       "source": "./src/index.ts",
-      "browser": "./dist/lib/browser/index.mjs",
-      "node": "./dist/lib/node-esm/index.mjs",
-      "types": "./dist/types/src/index.d.ts"
+      "types": "./dist/types/src/index.d.ts",
+      "import": "./dist/lib/index.mjs"
     },
     "./testing": {
       "source": "./src/testing/index.ts",
-      "browser": "./dist/lib/browser/testing/index.mjs",
-      "node": "./dist/lib/node-esm/testing/index.mjs",
-      "types": "./dist/types/src/testing/index.d.ts"
+      "types": "./dist/types/src/testing/index.d.ts",
+      "import": "./dist/lib/testing.mjs"
     },
     "./translations": {
       "source": "./src/translations.ts",
       "types": "./dist/types/src/translations.d.ts",
-      "browser": "./dist/lib/browser/translations.mjs",
-      "node": "./dist/lib/node-esm/translations.mjs"
+      "import": "./dist/lib/translations.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -42,7 +39,6 @@
   ],
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
-    "@effect-atom/atom-react": "^0.5.0",
     "@fluentui/react-tabster": "9.26.11",
     "@internationalized/date": "^3.12.1",
     "@radix-ui/primitive": "1.1.1",
@@ -66,6 +62,7 @@
     "@radix-ui/react-scroll-area": "1.2.10",
     "@radix-ui/react-select": "2.1.6",
     "@radix-ui/react-separator": "1.1.2",
+    "@radix-ui/react-slider": "1.4.7",
     "@radix-ui/react-slot": "1.1.2",
     "@radix-ui/react-switch": "1.1.3",
     "@radix-ui/react-toast": "1.2.6",
@@ -85,18 +82,18 @@
     "react-error-boundary": "^4.0.13",
     "react-i18next": "^11.18.6",
     "react-remove-scroll": "^2.6.0",
-    "@dxos/async": "0.10.0",
-    "@dxos/debug": "0.10.0",
-    "@dxos/lit-ui": "0.10.0",
-    "@dxos/react-error-boundary": "0.10.0",
-    "@dxos/log": "0.10.0",
-    "@dxos/react-hooks": "0.10.0",
-    "@dxos/i18n": "0.10.0",
-    "@dxos/invariant": "0.10.0",
-    "@dxos/react-list": "0.10.0",
-    "@dxos/react-input": "0.10.0",
-    "@dxos/ui-types": "0.10.0",
-    "@dxos/util": "0.10.0"
+    "@dxos/debug": "0.11.0",
+    "@dxos/i18n": "0.11.0",
+    "@dxos/invariant": "0.11.0",
+    "@dxos/lit-ui": "0.11.0",
+    "@dxos/log": "0.11.0",
+    "@dxos/react-error-boundary": "0.11.0",
+    "@dxos/react-hooks": "0.11.0",
+    "@dxos/react-input": "0.11.0",
+    "@dxos/util": "0.11.0",
+    "@dxos/ui-types": "0.11.0",
+    "@dxos/react-list": "0.11.0",
+    "@dxos/async": "0.11.0"
   },
   "devDependencies": {
     "@dnd-kit/core": "^6.0.5",
@@ -104,20 +101,21 @@
     "@dnd-kit/utilities": "^3.2.0",
     "@phosphor-icons/react": "2.1.10",
     "@tanstack/react-virtual": "^3.13.18",
+    "@testing-library/react": "^16.3.2",
     "@types/react": "~19.2.17",
     "@types/react-dom": "~19.2.3",
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
     "tabster": "^8.5.5",
-    "vite": "^8.0.16",
-    "@dxos/random": "0.10.0",
-    "@dxos/ui-theme": "0.10.0",
-    "@dxos/util": "0.10.0"
+    "vite": "^8.1.4",
+    "@dxos/random": "0.11.0",
+    "@dxos/util": "0.11.0",
+    "@dxos/ui-theme": "0.11.0"
   },
   "peerDependencies": {
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
-    "@dxos/ui-theme": "0.10.0"
+    "@dxos/ui-theme": "^0.11.0"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Avatars/Avatar.tsx

@@ -2,7 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-import { createContext } from '@radix-ui/react-context';
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import React, { type ComponentProps, type ComponentPropsWithRef, type PropsWithChildren, forwardRef } from 'react';
@@ -20,17 +19,10 @@ import { mx } from '@dxos/ui-theme';
 
 import { useIconHref, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
+import { type AvatarContextValue, AvatarProvider, useAvatarContext } from './AvatarContext';
 
 export type AvatarRootProps = PropsWithChildren<Partial<AvatarContextValue>>;
 
-type AvatarContextValue = {
-  labelId: string;
-  descriptionId: string;
-};
-
-const AVATAR_NAME = 'Avatar';
-const [AvatarProvider, useAvatarContext] = createContext<AvatarContextValue>(AVATAR_NAME);
-
 const AvatarRoot = ({ children, labelId: propsLabelId, descriptionId: propsDescriptionId }: AvatarRootProps) => {
   const labelId = useId('avatar__label', propsLabelId);
   const descriptionId = useId('avatar__description', propsDescriptionId);
@@ -98,8 +90,6 @@ export const Avatar = {
   Description: AvatarDescription,
 };
 
-export { useAvatarContext };
-
 export type {
   AvatarAnimation,
   AvatarContentProps,

package/src/components/Avatars/AvatarContext.ts

@@ -0,0 +1,16 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { createContext } from '@radix-ui/react-context';
+
+// Kept out of `Avatar.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.
+
+export type AvatarContextValue = {
+  labelId: string;
+  descriptionId: string;
+};
+
+export const AVATAR_NAME = 'Avatar';
+export const [AvatarProvider, useAvatarContext] = createContext<AvatarContextValue>(AVATAR_NAME);

package/src/components/Avatars/index.ts

@@ -2,4 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
+export { useAvatarContext } from './AvatarContext';
+
 export * from './Avatar';

package/src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -5,35 +5,37 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { withTheme } from '../../testing';
+import { withLayout, withTheme } from '../../testing';
 import { Button } from '../Button';
 import { Breadcrumb, type BreadcrumbRootProps } from './Breadcrumb';
 
 const DefaultStory = (props: BreadcrumbRootProps) => {
   return (
-    <Breadcrumb.Root {...props}>
-      <Breadcrumb.List>
-        <Breadcrumb.ListItem>
-          <Breadcrumb.Link asChild>
-            <Button variant='ghost' classNames='px-0 text-base-fg font-normal'>
-              Grocery
-            </Button>
-          </Breadcrumb.Link>
-          <Breadcrumb.Separator />
-        </Breadcrumb.ListItem>
-        <Breadcrumb.ListItem>
-          <Breadcrumb.Link href='#'>Produce</Breadcrumb.Link>
-          <Breadcrumb.Separator />
-        </Breadcrumb.ListItem>
-        <Breadcrumb.ListItem>
-          <Breadcrumb.Link href='#'>Veggies</Breadcrumb.Link>
-          <Breadcrumb.Separator />
-        </Breadcrumb.ListItem>
-        <Breadcrumb.ListItem>
-          <Breadcrumb.Current>Peppers</Breadcrumb.Current>
-        </Breadcrumb.ListItem>
-      </Breadcrumb.List>
-    </Breadcrumb.Root>
+    <div>
+      <Breadcrumb.Root {...props}>
+        <Breadcrumb.List>
+          <Breadcrumb.ListItem>
+            <Breadcrumb.Link>
+              <Button variant='ghost' classNames='px-0 text-base-fg font-normal'>
+                Home
+              </Button>
+            </Breadcrumb.Link>
+            <Breadcrumb.Separator />
+          </Breadcrumb.ListItem>
+          <Breadcrumb.ListItem>
+            <Breadcrumb.Link href='#'>Mailbox</Breadcrumb.Link>
+            <Breadcrumb.Separator />
+          </Breadcrumb.ListItem>
+          <Breadcrumb.ListItem>
+            <Breadcrumb.Link href='#'>Work</Breadcrumb.Link>
+            <Breadcrumb.Separator />
+          </Breadcrumb.ListItem>
+          <Breadcrumb.ListItem>
+            <Breadcrumb.Current>All</Breadcrumb.Current>
+          </Breadcrumb.ListItem>
+        </Breadcrumb.List>
+      </Breadcrumb.Root>
+    </div>
   );
 };
 
@@ -41,7 +43,7 @@ const meta = {
   title: 'ui/react-ui-core/components/Breadcrumb',
   component: Breadcrumb.Root as any,
   render: DefaultStory,
-  decorators: [withTheme()],
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;

package/src/components/Breadcrumb/Breadcrumb.theme.ts

@@ -7,15 +7,17 @@ import { type ComponentFunction, type Theme } from '@dxos/ui-types';
 
 export type breadcrumbStyleProps = {};
 
-const root: ComponentFunction<breadcrumbStyleProps> = (_props, ...etc) => mx('shrink-0 flex items-center', ...etc);
+const root: ComponentFunction<breadcrumbStyleProps> = (_props, ...etc) =>
+  mx('flex items-center grow overflow-hidden', ...etc);
 
-const list: ComponentFunction<breadcrumbStyleProps> = (_props, ...etc) => mx('contents', ...etc);
+const list: ComponentFunction<breadcrumbStyleProps> = (_props, ...etc) =>
+  mx('flex items-center min-w-0 grow overflow-x-auto scrollbar-none', ...etc);
 
-const listItem: ComponentFunction<breadcrumbStyleProps> = (_props, ...etc) => mx('contents', ...etc);
+const listItem: ComponentFunction<breadcrumbStyleProps> = (_props, ...etc) => mx('flex items-center shrink-0', ...etc);
 
-const current: ComponentFunction<breadcrumbStyleProps> = (_props, ...etc) => mx(...etc);
+const current: ComponentFunction<breadcrumbStyleProps> = (_props, ...etc) => mx('whitespace-nowrap', ...etc);
 
-const separator: ComponentFunction<breadcrumbStyleProps> = (_props, ...etc) => mx('opacity-50', ...etc);
+const separator: ComponentFunction<breadcrumbStyleProps> = (_props, ...etc) => mx('shrink-0 opacity-50', ...etc);
 
 export const breadcrumbTheme: Theme<breadcrumbStyleProps> = {
   root,

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -75,7 +75,7 @@ BreadcrumbCurrent.displayName = 'Breadcrumb.Current';
 
 type BreadcrumbSeparatorProps = ThemedClassName<ComponentPropsWithoutRef<typeof Primitive.span>>;
 
-function BreadcrumbSeparator({ children, classNames, ...props }: BreadcrumbSeparatorProps) {
+function BreadcrumbSeparator({ classNames, children, ...props }: BreadcrumbSeparatorProps) {
   const { tx } = useThemeContext();
   return (
     <Primitive.span
@@ -84,7 +84,7 @@ function BreadcrumbSeparator({ children, classNames, ...props }: BreadcrumbSepar
       {...props}
       className={tx('breadcrumb.separator', {}, classNames)}
     >
-      {children ?? <Icon icon='ph--dot--bold' />}
+      {children ?? <Icon icon='ph--caret-double-right--regular' />}
     </Primitive.span>
   );
 }

package/src/components/Button/Button.tsx

@@ -2,7 +2,6 @@
 // Copyright 2022 DXOS.org
 //
 
-import { createContext } from '@radix-ui/react-context';
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import React, { type ComponentPropsWithRef, forwardRef, memo } from 'react';
@@ -12,6 +11,7 @@ import { type Density, type Elevation } from '@dxos/ui-types';
 import { useDensityContext, useElevationContext, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 import { Icon } from '../Icon';
+import { BUTTON_GROUP_NAME, BUTTON_NAME, ButtonGroupProvider, useButtonGroupContext } from './ButtonGroupContext';
 
 type ButtonProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.button>> & {
   variant?: 'default' | 'primary' | 'outline' | 'ghost' | 'destructive' | 'valence';
@@ -22,15 +22,6 @@ type ButtonProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.button
   caretDown?: boolean;
 };
 
-type ButtonGroupContextValue = { inGroup?: boolean };
-
-const BUTTON_GROUP_NAME = 'ButtonGroup';
-const BUTTON_NAME = 'Button';
-
-const [ButtonGroupProvider, useButtonGroupContext] = createContext<ButtonGroupContextValue>(BUTTON_GROUP_NAME, {
-  inGroup: false,
-});
-
 const Button = memo(
   forwardRef<HTMLButtonElement, ButtonProps>(
     (
@@ -109,6 +100,6 @@ const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
 
 ButtonGroup.displayName = BUTTON_GROUP_NAME;
 
-export { Button, BUTTON_GROUP_NAME, ButtonGroup, useButtonGroupContext };
+export { Button, ButtonGroup };
 
 export type { ButtonGroupProps, ButtonProps };

package/src/components/Button/ButtonGroupContext.ts

@@ -0,0 +1,17 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { createContext } from '@radix-ui/react-context';
+
+// Kept out of `Button.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.
+
+export type ButtonGroupContextValue = { inGroup?: boolean };
+
+export const BUTTON_GROUP_NAME = 'ButtonGroup';
+export const BUTTON_NAME = 'Button';
+
+export const [ButtonGroupProvider, useButtonGroupContext] = createContext<ButtonGroupContextValue>(BUTTON_GROUP_NAME, {
+  inGroup: false,
+});

package/src/components/Button/IconButton.stories.tsx

@@ -26,18 +26,17 @@ const DefaultStory = (props: IconButtonProps) => {
   );
 };
 
-const densities: Density[] = ['lg', 'md', 'sm', 'xs'];
+const densities: Density[] = ['lg', 'md', 'sm'];
 const densityIconSize: Record<Density, IconButtonProps['size']> = {
   lg: 5,
   md: 4,
   sm: 4,
-  xs: 4,
 };
 
 const DensitiesStory = (props: Omit<IconButtonProps, 'density' | 'size'>) => {
   return (
     <Tooltip.Provider>
-      <div className='grid grid-cols-[auto_1fr_1fr_1fr] gap-4 items-center'>
+      <div className='grid grid-cols-[auto_1fr_1fr] gap-4 items-center'>
         <div />
         <div className='text-xs text-subdued uppercase'>iconOnly</div>
         <div className='text-xs text-subdued uppercase'>label + icon</div>

package/src/components/Button/IconButton.theme.ts

@@ -10,10 +10,23 @@ import { type ButtonStyleProps } from './Button.theme';
 export type IconButtonStyleProps = ButtonStyleProps & {
   iconOnly?: boolean;
   square?: boolean;
+  caretDown?: boolean;
 };
 
-const root: ComponentFunction<IconButtonStyleProps> = ({ iconOnly, square }, ...etc) => {
-  return mx('px-1.5', !iconOnly && 'gap-1.5', square && 'aspect-square', ...etc);
+// No padding utility here: `utilities` is the last cascade layer, so a `px-*` would override the
+// density-driven `padding-inline` on `.dx-button` at every density.
+//
+// An icon-only button is square, but only while it really holds one glyph: `caretDown` adds a
+// second (the dropdown caret), and squaring that composite crushes both into one control width —
+// as it did to the markdown toolbar's view selector. `aspect-square` pins the inline size, which
+// stops the button stretching to a wider grid cell, so it is paired with `justify-self-center`;
+// without that it silently left-aligns (what pushed the R0 rail's sidebar toggle 4px off-centre).
+const root: ComponentFunction<IconButtonStyleProps> = ({ iconOnly, square, caretDown }, ...etc) => {
+  return mx(
+    !iconOnly && 'gap-1.5',
+    (square || (iconOnly && !caretDown)) && 'aspect-square justify-self-center',
+    ...etc,
+  );
 };
 
 export const iconButtonTheme: Theme<IconButtonStyleProps> = {

package/src/components/Button/IconButton.tsx

@@ -50,7 +50,12 @@ const LabelledIconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
   ) => {
     const { tx } = useThemeContext();
     return (
-      <Button {...props} classNames={tx('iconButton.root', { iconOnly, square }, classNames)} ref={forwardedRef}>
+      // `caretDown` stays in `props` so `Button` still renders the caret; the theme only reads it.
+      <Button
+        {...props}
+        classNames={tx('iconButton.root', { iconOnly, square, caretDown: props.caretDown }, classNames)}
+        ref={forwardedRef}
+      >
         {icon && !iconEnd && <Icon icon={icon} size={size} classNames={iconClassNames} />}
         <span className={iconOnly ? 'sr-only' : undefined}>{label}</span>
         {icon && iconEnd && <Icon icon={icon} size={size} classNames={iconClassNames} />}

package/src/components/Button/SystemIconButton.tsx

@@ -203,33 +203,40 @@ UploadIconButton.displayName = 'SystemIconButton.Upload';
 
 type DownloadIconButtonProps = StaticPresetProps & {
   filename: string;
-  onDownload: () => Blob | null;
+  // Blob may be produced asynchronously (e.g. serialized from a query) or synchronously.
+  onDownload: () => Blob | null | Promise<Blob | null>;
 };
 
 const DownloadIconButton = forwardRef<HTMLButtonElement, DownloadIconButtonProps>(
   ({ filename, onDownload, label, ...props }, forwardedRef) => {
     const { t } = useTranslation(translationKey);
-    const handleDownload = useCallback(() => {
-      const blob = onDownload();
-      if (!blob) {
-        return;
+    const handleDownload = useCallback(async () => {
+      try {
+        const blob = await onDownload();
+        if (!blob) {
+          return;
+        }
+
+        const url = URL.createObjectURL(blob);
+
+        // TODO(burdon): Use Domino.
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        a.click();
+
+        URL.revokeObjectURL(url);
+      } catch {
+        // Best-effort: blob generation or the download click may fail; swallow to avoid an unhandled
+        // promise rejection (the click handler discards the returned promise with `void`).
       }
-
-      const url = URL.createObjectURL(blob);
-
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = filename;
-      a.click();
-
-      URL.revokeObjectURL(url);
-    }, [onDownload]);
+    }, [onDownload, filename]);
     return (
       <IconButton
         icon='ph--download-simple--regular'
         label={label ?? t('system-button.download.label')}
         {...props}
-        onClick={handleDownload}
+        onClick={() => void handleDownload()}
         ref={forwardedRef}
       />
     );

package/src/components/Button/index.ts

@@ -2,6 +2,8 @@
 // Copyright 2022 DXOS.org
 //
 
+export { BUTTON_GROUP_NAME, useButtonGroupContext } from './ButtonGroupContext';
+
 export * from './Button';
 export * from './IconButton';
 export * from './MicButton';

package/src/components/Calendar/Calendar.theme.ts

@@ -15,7 +15,7 @@ export type CalendarStyleProps = Partial<{}>;
 //
 
 const root: ComponentFunction<CalendarStyleProps> = (_p, ...etc) =>
-  mx('relative w-fit h-fit self-start p-2 select-none bg-group-surface text-base-fg', ...etc);
+  mx('relative w-fit h-fit self-start p-2 select-none dx-group-surface text-base-fg', ...etc);
 
 const nav: ComponentFunction<CalendarStyleProps> = (_p, ...etc) => mx('flex items-center justify-between pb-1', ...etc);
 
@@ -24,7 +24,7 @@ const caption_label: ComponentFunction<CalendarStyleProps> = (_p, ...etc) =>
 
 const button_previous: ComponentFunction<CalendarStyleProps> = (_p, ...etc) =>
   mx(
-    'h-7 w-7 inline-flex items-center justify-center rounded-sm shrink-0',
+    'size-(--dx-control-sm) inline-flex items-center justify-center rounded-sm shrink-0',
     'text-description hover:bg-hover-surface',
     'data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed',
     ...etc,
@@ -32,7 +32,7 @@ const button_previous: ComponentFunction<CalendarStyleProps> = (_p, ...etc) =>
 
 const button_next: ComponentFunction<CalendarStyleProps> = (_p, ...etc) =>
   mx(
-    'h-7 w-7 inline-flex items-center justify-center rounded-sm shrink-0',
+    'size-(--dx-control-sm) inline-flex items-center justify-center rounded-sm shrink-0',
     'text-description hover:bg-hover-surface',
     'data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed',
     ...etc,
@@ -43,11 +43,11 @@ const month_grid: ComponentFunction<CalendarStyleProps> = (_p, ...etc) => mx('w-
 const weekdays: ComponentFunction<CalendarStyleProps> = (_p, ...etc) => mx('', ...etc);
 
 const weekday: ComponentFunction<CalendarStyleProps> = (_p, ...etc) =>
-  mx('w-9 h-7 text-xs font-thin text-description', ...etc);
+  mx('w-(--dx-control-md) h-(--dx-control-sm) text-xs font-thin text-description', ...etc);
 
 const day: ComponentFunction<CalendarStyleProps> = (_p, ...etc) =>
   mx(
-    'relative w-9 h-9 p-0 text-center text-sm rounded-sm inline-flex items-center justify-center cursor-pointer',
+    'relative size-(--dx-control-md) p-0 text-center text-sm rounded-sm inline-flex items-center justify-center cursor-pointer',
     'outline-none',
     'data-[hovered]:bg-hover-surface',
     'data-[focus-visible]:outline-2 data-[focus-visible]:outline-primary-500',

package/src/components/Calendar/Calendar.tsx

@@ -2,7 +2,7 @@
 // Copyright 2026 DXOS.org
 //
 
-import { CalendarDate, parseDate } from '@internationalized/date';
+import { CalendarDate } from '@internationalized/date';
 import React, { type ComponentPropsWithoutRef, type ReactNode, forwardRef } from 'react';
 import {
   type DateValue,
@@ -191,6 +191,4 @@ export const Calendar = {
   Root: CalendarRoot,
 };
 
-// Re-export the iso parser for convenience.
-export { parseDate as parseCalendarDate };
 export type { ComponentPropsWithoutRef };

package/src/components/Calendar/index.ts

@@ -2,4 +2,6 @@
 // Copyright 2026 DXOS.org
 //
 
+export { parseCalendarDate } from './parse-calendar-date';
+
 export * from './Calendar';

package/src/components/Calendar/parse-calendar-date.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+// Kept out of `Calendar.tsx`: react-refresh only fast-refreshes a module whose exports are all
+// components, so a value exported beside them forces a full page reload on every edit.
+
+/** The ISO date parser, re-exported for convenience alongside `Calendar`. */
+export { parseDate as parseCalendarDate } from '@internationalized/date';