@flamingo-stack/openframe-frontend-core 0.0.853 → 0.0.855

package/src/components/features/devices/use-tag-filter-modal.ts

@@ -1,7 +1,7 @@
 'use client';
 
 import { useCallback, useMemo, useRef, useState } from 'react';
-import { useMdUp } from '../../../hooks/ui/use-media-query';
+import { useContentLgUp, useContentMdUp, useContentXlUp } from '../../../hooks/ui/use-content-breakpoint';
 import type { DeviceFilters } from './types';
 
 function isCompleteTag(tag: string): boolean {
@@ -19,7 +19,13 @@ interface FilterOption {
 interface UseTagFilterModalParams {
   tags: string[];
   deviceFilters: DeviceFilters | null;
-  columns: Array<{ key: string; label: string; filterable?: boolean; filterOptions?: FilterOption[] }>;
+  columns: Array<{
+    key: string;
+    label: string;
+    filterable?: boolean;
+    filterOptions?: FilterOption[];
+    inWindowLgToXl?: boolean;
+  }>;
   /** `useApiParams`' setter, each device list param is a list of ids. */
   setParams: (params: Record<string, string[]>) => void;
   /**
@@ -39,7 +45,11 @@ export function useTagFilterModal({
   setParams,
   onApplied = scrollMainToTop,
 }: UseTagFilterModalParams) {
-  const isMdUp = useMdUp();
+  // The content area's step, not the window's: the table header follows it, and a docked side panel narrows it while
+  // the window stays wide.
+  const isMdUp = useContentMdUp();
+  const lgUp = useContentLgUp();
+  const xlUp = useContentXlUp();
   const [isOpen, setIsOpen] = useState(false);
 
   // FilterModal calls onFilterChange first, then onTagsChange.
@@ -49,16 +59,19 @@ export function useTagFilterModal({
   const open = useCallback(() => setIsOpen(true), []);
   const close = useCallback(() => setIsOpen(false), []);
 
-  const filterGroups = useMemo(() => {
-    if (isMdUp) return [];
-    return columns
-      .filter(column => column.filterable)
-      .map(column => ({
-        id: column.key,
-        title: column.label,
-        options: column.filterOptions || [],
-      }));
-  }, [columns, isMdUp]);
+  // Below md the table draws no header, so every column filters here; from lg until xl only the columns whose header
+  // has no funnel there do.
+  const filterGroups = useMemo(
+    () =>
+      columns
+        .filter(column => column.filterable && (!isMdUp || (lgUp && xlUp === false && column.inWindowLgToXl)))
+        .map(column => ({
+          id: column.key,
+          title: column.label,
+          options: column.filterOptions || [],
+        })),
+    [columns, isMdUp, lgUp, xlUp],
+  );
 
   const tagFilterKeys = useMemo(() => {
     if (!deviceFilters?.tagKeys) return [];
@@ -79,6 +92,9 @@ export function useTagFilterModal({
     pendingFiltersRef.current = columnFilters;
   }, []);
 
+  // Only a host that draws the directory columns has the USER and SOURCES groups: another's list params stay untouched
+  const hasDirectoryGroups = useMemo(() => columns.some(column => column.key === 'user'), [columns]);
+
   // Step 2: combine with buffered filters and flush (called second by FilterModal)
   const handleTagsChange = useCallback(
     (newTags: string[]) => {
@@ -87,12 +103,14 @@ export function useTagFilterModal({
         statuses: cf.status || [],
         osTypes: cf.os || [],
         organizationIds: cf.organization || [],
+        // FilterModal drops a group with nothing ticked, so a missing group clears its param
+        ...(hasDirectoryGroups && { userLinks: cf.user || [], directorySources: cf.sources || [] }),
         tags: newTags.filter(isCompleteTag),
       });
       pendingFiltersRef.current = {};
       onApplied();
     },
-    [setParams, onApplied],
+    [setParams, onApplied, hasDirectoryGroups],
   );
 
   return {

package/src/components/navigation/app-layout.tsx

@@ -2,7 +2,7 @@
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { CSSProperties, ReactNode } from 'react';
-import { ContentAreaWidthContext, contentBreakpointFor } from '../../hooks/ui/use-content-breakpoint';
+import { ContentAreaWidthContext, contentStepFor } from '../../hooks/ui/use-content-breakpoint';
 import { useIsomorphicLayoutEffect } from '../../hooks/ui/use-isomorphic-layout-effect';
 import type { NavigationSidebarConfig } from '../../types/navigation';
 import { cn } from '../../utils';
@@ -203,14 +203,14 @@ export function AppLayout({
 
   useIsomorphicLayoutEffect(() => {
     if (!adaptive || !mainElement) return undefined;
-    // Every reader asks for the breakpoint (`useContentBreakpoint`), so only a
-    // crossing re-renders the layout: kept at the old width, the state bails out.
+    // Every reader asks for a step (`useContentBreakpoint`, `useContentXlUp`), so
+    // only a crossing re-renders the layout: kept at the old width, the state bails out.
     // Per pixel, the uncompiled layout and every breakpoint consumer re-rendered on
     // each frame of a sidebar toggle, a window drag or a side-panel resize.
     const update = () => {
       const width = mainElement.clientWidth;
       setContentWidth(previous =>
-        previous !== null && contentBreakpointFor(previous) === contentBreakpointFor(width) ? previous : width,
+        previous !== null && contentStepFor(previous) === contentStepFor(width) ? previous : width,
       );
     };
     update();

package/src/components/ui/date-picker.tsx

@@ -42,6 +42,8 @@ export interface DatePickerBaseProps {
   error?: string;
   /** When true, renders red error border */
   invalid?: boolean;
+  /** The trigger button's id: a label drawn outside the picker names it with `htmlFor`. */
+  id?: string;
 }
 
 export interface SingleDatePickerProps extends DatePickerBaseProps {
@@ -69,6 +71,10 @@ export type DatePickerProps = SingleDatePickerProps | RangeDatePickerProps;
 const defaultFormatDate = (date: Date): string =>
   formatDateWithTimezone(date, VIEWER_TIMEZONE, 'numeric', { viewerLocale: true });
 
+// A label tied to the trigger (`id`) becomes the button's whole accessible name, so the date it shows would go unread:
+// the trigger is described by its value instead.
+const triggerValueId = (id: string | undefined) => (id ? `${id}-value` : undefined);
+
 const formatDateRange = (range: DateRange | undefined, formatFn: (date: Date) => string): string => {
   if (!range?.from) return '';
   if (!range.to) return formatFn(range.from);
@@ -667,6 +673,7 @@ export function DatePicker(props: DatePickerProps) {
     label,
     error,
     invalid = false,
+    id,
   } = props;
 
   const [open, setOpen] = useState(false);
@@ -701,6 +708,8 @@ export function DatePicker(props: DatePickerProps) {
         <Button
           variant="field"
           type="button"
+          id={id}
+          aria-describedby={triggerValueId(id)}
           disabled={disabled}
           // Same marker Input/Textarea/Select expose — it is how a form finds
           // (and scrolls to) the first field that failed validation.
@@ -709,6 +718,7 @@ export function DatePicker(props: DatePickerProps) {
         >
           <Calendar className="size-6 shrink-0 text-ods-text-secondary" />
           <span
+            id={triggerValueId(id)}
             className={cn(
               'flex-1 truncate text-left',
               disabled ? 'text-ods-text-disabled' : displayValue ? 'text-ods-text-primary' : 'text-ods-text-secondary',
@@ -749,7 +759,7 @@ export function DatePicker(props: DatePickerProps) {
   );
 
   return (
-    <FieldWrapper label={label} error={error} errorSlot={'error' in props}>
+    <FieldWrapper label={label} htmlFor={id} error={error} errorSlot={'error' in props}>
       {picker}
     </FieldWrapper>
   );
@@ -799,6 +809,7 @@ export function DatePickerInput(props: DatePickerInputProps) {
     label,
     error,
     invalid = false,
+    id,
   } = props;
   const [open, setOpen] = useState(false);
   const portalContainer = usePortalContainer();
@@ -883,6 +894,8 @@ export function DatePickerInput(props: DatePickerInputProps) {
           <Button
             variant="field"
             type="button"
+            id={id}
+            aria-describedby={triggerValueId(id)}
             disabled={disabled}
             // Same marker Input/Textarea/Select expose — it is how a form finds
             // (and scrolls to) the first field that failed validation.
@@ -891,6 +904,7 @@ export function DatePickerInput(props: DatePickerInputProps) {
           >
             <Calendar className="size-6 shrink-0 text-ods-text-secondary" />
             <span
+              id={triggerValueId(id)}
               className={cn(
                 'flex-1 truncate text-left',
                 disabled
@@ -984,7 +998,7 @@ export function DatePickerInput(props: DatePickerInputProps) {
   );
 
   return (
-    <FieldWrapper label={label} error={error} errorSlot={'error' in props} className={className}>
+    <FieldWrapper label={label} htmlFor={id} error={error} errorSlot={'error' in props} className={className}>
       {content}
     </FieldWrapper>
   );
@@ -1050,6 +1064,7 @@ export function DatePickerInputSimple(props: DatePickerInputSimpleProps) {
     label,
     error,
     invalid = false,
+    id,
   } = props;
   const [open, setOpen] = useState(false);
   const portalContainer = usePortalContainer();
@@ -1112,6 +1127,8 @@ export function DatePickerInputSimple(props: DatePickerInputSimpleProps) {
           <Button
             variant="field"
             type="button"
+            id={id}
+            aria-describedby={triggerValueId(id)}
             disabled={disabled}
             // Same marker Input/Textarea/Select expose — it is how a form finds
             // (and scrolls to) the first field that failed validation.
@@ -1120,6 +1137,7 @@ export function DatePickerInputSimple(props: DatePickerInputSimpleProps) {
           >
             <Calendar className="size-6 shrink-0 text-ods-text-secondary" />
             <span
+              id={triggerValueId(id)}
               className={cn(
                 'flex-1 truncate text-left',
                 disabled
@@ -1181,7 +1199,7 @@ export function DatePickerInputSimple(props: DatePickerInputSimpleProps) {
   );
 
   return (
-    <FieldWrapper label={label} error={error} errorSlot={'error' in props} className={className}>
+    <FieldWrapper label={label} htmlFor={id} error={error} errorSlot={'error' in props} className={className}>
       {content}
     </FieldWrapper>
   );

package/src/components/ui/entity-image.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import React from 'react';
 import Image from '../../embed-shims/next-image';
 import { useAuthedImageSrc } from '../../hooks/use-authed-image-src';
+import { useImageFallback } from '../../hooks/use-image-fallback';
 import { TILE_SIZE } from '../../styles/component-sizes';
 import { IMAGE_FIXED_PX } from '../../styles/image-sizes';
 import { cn } from '../../utils/cn';
@@ -37,20 +37,12 @@ export interface EntityImageProps {
 export function EntityImage({ src, alt, fallbackText, sizeClassName, className }: EntityImageProps) {
   // In a loading scope the image is its skeleton, and it is not fetched.
   const held = useLoadingScope();
-  const authedSrc = useAuthedImageSrc(held ? undefined : src);
-  const resolvedSrc = authedSrc;
-  // Which src failed, rather than a bare "failed" flag reset from an effect on
-  // every src change. The reset is then implicit — a new src simply is not the
-  // one that failed — so the fallback initials never survive into the render
-  // that swapped the image, and a new src costs no second render pass.
-  const [failedSrc, setFailedSrc] = React.useState<string | null>(null);
-  const imageFailed = resolvedSrc !== undefined && failedSrc === resolvedSrc;
+  const { src: resolvedSrc, onError } = useImageFallback(useAuthedImageSrc(held ? undefined : src));
 
   if (held) return <EntityImageSkeleton sizeClassName={sizeClassName} className={className} />;
-  const showFallback = imageFailed || !resolvedSrc;
   const initials = personInitials(fallbackText ?? alt);
 
-  if (showFallback) {
+  if (!resolvedSrc) {
     return (
       <div
         aria-label={alt}
@@ -70,7 +62,7 @@ export function EntityImage({ src, alt, fallbackText, sizeClassName, className }
     <Image
       src={resolvedSrc}
       alt={alt ?? ''}
-      onError={() => setFailedSrc(resolvedSrc)}
+      onError={onError}
       className={cn(
         'shrink-0 border border-ods-border object-contain',
         ENTITY_IMAGE_RADIUS_CLASS,

package/src/components/ui/markdown/base-components.tsx

@@ -54,19 +54,6 @@ export interface StandardLeafRenderers {
  * the rich composition's `img` / `video` overrides so the empty-`![]()`
  * guard has exactly one definition.
  */
-/**
- * Inline content image (blog / docs / chat attachments). A standalone
- * component — NOT inline JSX in the `img` renderer — because it must call
- * `useAuthedImageSrc`: in bearer-mode native shells (`capacitor://`,
- * `tauri://`) a gateway-hosted image can't load through a plain `<img>` (no
- * Authorization header on native asset loads), so the hook swaps in an authed
- * blob URL; everywhere else it returns `src` untouched. While the blob fetch
- * is in flight `resolvedSrc` is null and the component renders nothing — same
- * as the no-src case. Ported from #1548 into the unified engine (the original
- * lived in the now-deleted `ui/simple-markdown-renderer.tsx`). Sizing matches
- * the engine's cap: 400x400 intrinsic, `w-auto h-auto max-h-[400px]` drives
- * the actual rendered box; click-to-expand surfaces provide full resolution.
- */
 /**
  * The page title, a section heading and a paragraph of rendered markdown (before the text size): read by the
  * renderer and by every skeleton that stands in for a markdown body.
@@ -76,16 +63,23 @@ export const MARKDOWN_H2_CLASS =
   'mb-4 mt-8 border-b border-ods-border pb-2 font-sans font-semibold text-ods-text-primary';
 export const MARKDOWN_PARAGRAPH_CLASS = 'mb-4 leading-relaxed text-ods-text-primary first:mt-0 last:mb-0';
 
+/**
+ * Inline content image (blog / docs / chat attachments). The boxed `Image` resolves and authenticates it
+ * (`useAuthedAsset`); this component reads the same store only to draw nothing while there is nothing to draw (the
+ * authed fetch in flight or failed, as with no src), where `Image` would draw its box or the failing URL. Ported from
+ * #1548 into the unified engine (the original lived in the now-deleted `ui/simple-markdown-renderer.tsx`). Sizing
+ * matches the engine's cap: 400x400 intrinsic, `w-auto h-auto max-h-[400px]` drives the actual rendered box;
+ * click-to-expand surfaces provide full resolution.
+ */
 const MarkdownContentImage: React.FC<{ src: string; alt?: string }> = ({ src, alt }) => {
   // In a loading scope the image is a box and nothing is fetched: the authed fetch is skipped, and the `Image` shim
   // draws its skeleton box (`HeldImage`) without reading `src`. `src` is passed only so the box is drawn at all.
   const inScope = useLoadingScope();
-  const authedSrc = useAuthedImageSrc(inScope ? undefined : src);
-  const resolvedSrc = inScope ? src : authedSrc;
-  if (!resolvedSrc) return null;
+  const drawable = useAuthedImageSrc(inScope ? undefined : src);
+  if (!inScope && !drawable) return null;
   return (
     <Image
-      src={resolvedSrc}
+      src={src}
       alt={alt ?? 'No image available'}
       width={400}
       height={400}
@@ -363,9 +357,10 @@ export function buildBaseComponents({
 
     // --- images ---
     // Inline content image renderer (blog, docs, chat attachments) —
-    // delegates to `MarkdownContentImage` (above), which handles bearer-mode
-    // authed loading for native shells and the 400x400 cap with click-to-
-    // expand for full resolution.
+    // delegates to `MarkdownContentImage` (above), which draws nothing until
+    // there is a picture to draw and applies the 400x400 cap with click-to-
+    // expand for full resolution; the boxed `Image` it renders resolves and
+    // authenticates it.
     //
     // A third-party `src` never reaches here unless the composition set
     // `allowRemoteMedia`: `rehypeStripUnsafe` moves it to `data-blocked-src`,

package/src/components/ui/square-avatar.tsx

@@ -3,6 +3,7 @@
 import { type HTMLAttributes, memo, forwardRef } from 'react';
 import Image from '../../embed-shims/next-image';
 import { useAuthedImageSrc } from '../../hooks/use-authed-image-src';
+import { useImageFallback } from '../../hooks/use-image-fallback';
 import { AVATAR_SIZE, AVATAR_SIZE_PX, type AvatarSize } from '../../styles/component-sizes';
 import { cn } from '../../utils/cn';
 import { personInitials } from '../../utils/format';
@@ -66,7 +67,9 @@ const SquareAvatar = memo(
       // is not fetched.
       const inScope = useLoadingScope();
       const held = inScope || !!loading;
-      const authedSrc = useAuthedImageSrc(held ? undefined : src);
+      // The initials fallback used to be written into the DOM from `onError`, and the hidden picture stayed hidden
+      // for the avatar's lifetime, even once a src that loads arrived.
+      const { src: resolvedSrc, onError } = useImageFallback(useAuthedImageSrc(held ? undefined : src));
       if (held) {
         return (
           <SquareAvatarSkeleton
@@ -78,7 +81,6 @@ const SquareAvatar = memo(
           />
         );
       }
-      const resolvedSrc = authedSrc;
       const sizeClasses = AVATAR_SIZE;
       const sizePxBySize = AVATAR_SIZE_PX;
 
@@ -137,12 +139,7 @@ const SquareAvatar = memo(
               alt={alt || ''}
               width={sizePx ?? sizePxBySize[size]}
               height={sizePx ?? sizePxBySize[size]}
-              onError={e => {
-                const img = e.currentTarget;
-                img.style.display = 'none';
-                const el = img.previousElementSibling as HTMLElement;
-                if (el) el.classList.remove('hidden');
-              }}
+              onError={onError}
             />
           )}
         </div>

package/src/embed-shims/next-image.tsx

@@ -24,6 +24,8 @@ import { forwardRef, type ComponentType, type CSSProperties, type ImgHTMLAttribu
 
 import { UnifiedSkeleton } from '../components/loading/unified-skeleton';
 import { useLoadingScope } from '../components/ui/loading-scope';
+import type { AuthedAsset } from '../hooks/use-authed-asset-src';
+import { useAuthedImage } from '../hooks/use-authed-image-src';
 import { cn } from '../utils/cn';
 import { fetchPriorityProp } from '../utils/fetch-priority';
 
@@ -49,6 +51,8 @@ type ImageProps = Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'placeholder
   optimizedWidth?: number;
   onLoadingComplete?: (img: HTMLImageElement) => void;
   loader?: unknown;
+  /** The picture's address when `src` is the blob fetched from it (set by the shim; see `drawnAsset`). */
+  'data-asset-src'?: string;
 };
 
 /** What the shim renders once a host has registered `next/image`. */
@@ -122,12 +126,22 @@ function HeldImage({ className, style, width, height, fill }: ImageProps) {
 const Image = forwardRef<HTMLImageElement, ImageProps>(function NextImageShim({ optimizedWidth, ...given }, ref) {
   // In a loading scope the picture is a box of its own size, and it is not fetched.
   const held = useLoadingScope();
-  if (held) return <HeldImage {...given} />;
   // A picture asked for at a width is the host resizer's URL, drawn as it comes.
-  const props: ImageProps =
+  const sized: ImageProps =
     optimizedWidth && resizer && typeof given.src === 'string'
       ? { ...given, src: resizer(given.src, optimizedWidth), unoptimized: true }
       : given;
+  // Every picture is drawn from where it lives and with the credential it needs: the host's `resolveAssetUrl`
+  // sends a backend path to its gateway, and a bearer-auth host's picture is fetched with the bearer and drawn
+  // from a blob (`useAuthedAsset`). Cookie-auth web and public pictures pass through unchanged.
+  const asset = useAuthedImage(!held && typeof sized.src === 'string' ? sized.src : undefined);
+  // Waiting for the credential or for the fetch: the picture's box, with nothing requested.
+  if (held || asset.status === 'pending') return <HeldImage {...given} />;
+  const props: ImageProps = typeof sized.src !== 'string' ? sized : drawnAsset(sized, asset);
+  // The element that failed is not the one a retry draws into: a caller that hid it in `onError` would keep it
+  // hidden. Only that transition remounts: a native in-place src swap keeps the old picture until the new one loads
+  // (a bearer swap draws the box while the new blob is fetched).
+  const key = asset.status === 'failed' ? 'failed' : undefined;
   // `priority` means "this is the picture the page is waiting for", so its
   // request is ranked high on EVERY host. Stated here, once: since Next 16
   // `priority` only preloads and no longer ranks the request, and the plain
@@ -139,7 +153,7 @@ const Image = forwardRef<HTMLImageElement, ImageProps>(function NextImageShim({
   // (priority, placeholder, sizes, loader…) reaches the real component intact.
   if (impl) {
     const Real = impl;
-    return <Real ref={ref} {...props} fetchPriority={fetchPriority} />;
+    return <Real key={key} ref={ref} {...props} fetchPriority={fetchPriority} />;
   }
 
   // Fallback path — plain <img>. Drops Next-only props and reduces
@@ -183,6 +197,7 @@ const Image = forwardRef<HTMLImageElement, ImageProps>(function NextImageShim({
     : style;
   return (
     <img
+      key={key}
       ref={ref}
       src={srcStr}
       alt={alt ?? ''}
@@ -197,4 +212,20 @@ const Image = forwardRef<HTMLImageElement, ImageProps>(function NextImageShim({
   );
 });
 
+/**
+ * The props drawn for a string `src` once `useAuthedAsset` answered:
+ *
+ * - `native` / `ready`: its `src` (the URL, or the fetched blob). A blob goes to no optimizer.
+ * - `failed`: the URL itself, so the element fails the way a plain `<img>` would and the caller's `onError`
+ *   fallback runs. It used to stay blank, with nothing to tell the caller.
+ *
+ * `data-asset-src` keeps the URL on the element when the drawn `src` is a blob, for code that reads a picture's
+ * address off the DOM (the chat's click-to-expand gallery).
+ */
+function drawnAsset(props: ImageProps, asset: AuthedAsset): ImageProps {
+  const src = asset.status === 'failed' ? asset.url : asset.src;
+  if (asset.status !== 'ready') return { ...props, src };
+  return { ...props, src, unoptimized: true, 'data-asset-src': asset.url };
+}
+
 export default Image;

package/src/hooks/index.ts

@@ -12,6 +12,7 @@ export * from './use-batch-images';
 export * from './use-authenticated-image';
 export * from './use-authed-asset-src';
 export * from './use-authed-image-src';
+export * from './use-image-fallback';
 
 // URL State Management hooks
 export * from './state';

package/src/hooks/ui/use-content-breakpoint.ts

@@ -2,12 +2,24 @@
 
 import { createContext, createElement, type ReactNode, useContext } from 'react';
 import { LAYOUT_STEPS } from '../../styles/layout-steps';
-import { useLgUp, useMdUp } from './use-media-query';
+import { breakpoints, useLgUp, useMdUp, useMediaQuery } from './use-media-query';
 
 export type ContentBreakpoint = 'mobile' | 'tablet' | 'desktop';
 
 /** Content-area steps, in px of the area's own width. */
-export const CONTENT_BREAKPOINTS = { md: LAYOUT_STEPS.md.content, lg: LAYOUT_STEPS.lg.content } as const;
+export const CONTENT_BREAKPOINTS = {
+  md: LAYOUT_STEPS.md.content,
+  lg: LAYOUT_STEPS.lg.content,
+  xl: LAYOUT_STEPS.xl.content,
+} as const;
+
+/**
+ * How many content steps a width has passed, `xl` included: `AppLayout` publishes a new width only when this changes,
+ * so every reader below sees each crossing it asks about (`useContentBreakpoint`, `useContentXlUp`).
+ */
+export function contentStepFor(width: number): number {
+  return [CONTENT_BREAKPOINTS.md, CONTENT_BREAKPOINTS.lg, CONTENT_BREAKPOINTS.xl].filter(step => width >= step).length;
+}
 
 /**
  * Width of the enclosing content area (`AppLayout` with a side panel or a composer
@@ -58,3 +70,10 @@ export function useContentLgUp(): boolean | undefined {
   const breakpoint = useContentBreakpoint();
   return breakpoint === undefined ? undefined : breakpoint === 'desktop';
 }
+
+/** The `content-xl:` step in JS: the content area's width from `xl`, the viewport's outside one. */
+export function useContentXlUp(): boolean | undefined {
+  const width = useContext(ContentAreaWidthContext);
+  const viewportXlUp = useMediaQuery(breakpoints.xl);
+  return width === null ? viewportXlUp : width >= CONTENT_BREAKPOINTS.xl;
+}

package/src/hooks/ui/use-media-query.ts

@@ -40,6 +40,7 @@ export function useMediaQuery(query: string): boolean | undefined {
 export const breakpoints = {
   md: `(min-width: ${LAYOUT_STEPS.md.viewport}px)`, // Tablet
   lg: `(min-width: ${LAYOUT_STEPS.lg.viewport}px)`, // Desktop
+  xl: `(min-width: ${LAYOUT_STEPS.xl.viewport}px)`, // Wide desktop
 };
 
 /** @deprecated Use useMdUp instead */