@astryxdesign/core 0.5.2-canary.c9c8564 → 0.5.2-canary.e4f8e4e

package/dist/MultiSelector/MultiSelector.js

@@ -17,7 +17,6 @@
  */
 import React, { useCallback, useEffect, useId, useMemo, useOptimistic, useRef, useState, useTransition } from 'react';
 import * as stylex from '@stylexjs/stylex';
-import { usePopoverInternal } from "../Popover/usePopover.js";
 import { useTooltip } from "../Tooltip/index.js";
 import { Icon, renderIconSlot } from "../Icon/index.js";
 import { Field, inputStatusBorderStyles, inputStatusHoverShadowStyles, inputWrapperStyles } from "../Field/index.js";
@@ -44,6 +43,9 @@ import { groupStyles } from "../InputGroup/groupStyles.js";
 import { useInputGroup } from "../InputGroup/InputGroupContext.js";
 import { VisuallyHidden } from "../VisuallyHidden/index.js";
 import { useTranslator } from "../i18n/index.js";
+import { SelectorBottomSheet } from "../Selector/SelectorBottomSheet.js";
+import { useSelectorPresentation } from "../Selector/useSelectorPresentation.js";
+import { selectorPresentationStyles } from "../Selector/selectorPresentation.stylex.js";
 
 // Sentinel value for the select-all item in keyboard navigation
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -284,13 +286,15 @@ export function MultiSelector({
   maxBadges = 3,
   renderOption,
   indicatorPosition = 'start',
+  presentation = 'popover',
   isDefaultOpen = false,
   'data-testid': testId,
   htmlName,
   width,
   xstyle,
   className,
-  style
+  style,
+  onFocus
 }) {
   const t = useTranslator();
   const isEffectivelyRequired = useResolvedRequired({
@@ -312,6 +316,7 @@ export function MultiSelector({
   const searchId = useId();
   const triggerRef = useRef(null);
   const searchRef = useRef(null);
+  const listboxRef = useRef(null);
   const inputGroup = useInputGroup();
   const [searchQuery, setSearchQuery] = useState('');
   // A typed query shows the search row's clear (✕) button, which becomes
@@ -432,26 +437,32 @@ export function MultiSelector({
     // Clear any lingering result count when the popover closes so stale status
     // text does not linger in the a11y tree.
     announce('');
-    triggerRef.current?.focus();
   }, [announce]);
-  const popover = usePopoverInternal({
-    hasLightDismiss: true,
+  const surface = useSelectorPresentation({
+    presentation,
     onHide: handleLayerHide,
-    hasCloseButton: false,
-    hasAutoFocus: false,
-    // The popup's own role="listbox" is the exposed semantics; the trigger
-    // keeps DOM focus, so wrapping it in a modal dialog would misrepresent it.
-    role: 'none',
-    // The theme target belongs on the SURFACE that paints the popup, which
-    // `usePopover` owns — not on the scrolling list inside it.
-    surfaceTarget: 'multi-selector-popup'
+    triggerRef,
+    popoverOptions: {
+      hasLightDismiss: true,
+      hasCloseButton: false,
+      hasAutoFocus: false,
+      // The popup's own role="listbox" is the exposed semantics; the trigger
+      // keeps DOM focus, so wrapping it in a modal dialog would misrepresent it.
+      role: 'none',
+      // The theme target belongs on the SURFACE that paints the popup, which
+      // `usePopover` owns — not on the scrolling list inside it.
+      surfaceTarget: 'multi-selector-popup'
+    }
   });
+  const {
+    popover
+  } = surface;
   const keepOpenProps = useKeepLayerOpenProps(popover.id, popover.isOpen);
 
   // Open dropdown on mount when isDefaultOpen is true
   useEffect(() => {
     if (isDefaultOpen) {
-      popover.show();
+      surface.show();
     }
     // eslint-disable-next-line @eslint-react/exhaustive-deps -- mount-only: isDefaultOpen is not reactive
   }, []);
@@ -489,7 +500,7 @@ export function MultiSelector({
   // per arrival at that state rather than on every re-render.
   const announcedEmptyRef = useRef(null);
   useEffect(() => {
-    const isPanelEmpty = popover.isOpen && !isLoading && searchQuery === '' && selectableItems.length === 0;
+    const isPanelEmpty = surface.isOpen && !isLoading && searchQuery === '' && selectableItems.length === 0;
     if (!isPanelEmpty) {
       announcedEmptyRef.current = null;
       return;
@@ -499,7 +510,7 @@ export function MultiSelector({
     }
     announcedEmptyRef.current = emptyAnnouncement;
     announce(emptyAnnouncement);
-  }, [popover.isOpen, isLoading, searchQuery, selectableItems.length, emptyAnnouncement, announce]);
+  }, [surface.isOpen, isLoading, searchQuery, selectableItems.length, emptyAnnouncement, announce]);
 
   // Handle toggle
   // Clear all selected values. Shared by the clear button and the keyboard
@@ -582,23 +593,23 @@ export function MultiSelector({
     onKeyDown,
     onItemMouseEnter
   } = useMultiCombobox({
-    wasJustDismissed: popover.wasJustDismissed,
+    wasJustDismissed: surface.wasJustDismissed,
     selectableItems: sortedItems,
     isDisabled,
-    isOpen: popover.isOpen,
+    isOpen: surface.isOpen,
     hasSearch,
     onOpen: useCallback(() => {
       // Snapshot which items are selected at open time — sort is frozen until close
       setSelectedAtOpen(new Set(optimisticValue));
-      popover.show();
+      surface.show();
       if (hasSearch) {
         // Focus search after popover opens
         requestAnimationFrame(() => {
           searchRef.current?.focus();
         });
       }
-    }, [popover, hasSearch, optimisticValue]),
-    onClose: popover.hide,
+    }, [surface, hasSearch, optimisticValue]),
+    onClose: surface.hide,
     onToggle: handleNavigableToggle,
     onClear: hasClear ? clearValues : undefined,
     hasValue,
@@ -610,13 +621,13 @@ export function MultiSelector({
   // cursor walks off-screen once navigation passes the visible window. Mirrors
   // CommandPaletteItem's scrollIntoView({block: 'nearest'}) behavior.
   useEffect(() => {
-    if (!popover.isOpen || highlightedIndex < 0) {
+    if (!surface.isOpen || highlightedIndex < 0) {
       return;
     }
     document.getElementById(getItemId(highlightedIndex))?.scrollIntoView?.({
       block: 'nearest'
     });
-  }, [popover.isOpen, highlightedIndex, getItemId]);
+  }, [surface.isOpen, highlightedIndex, getItemId]);
 
   // Build trigger display content
   const selectedItems = useMemo(() => {
@@ -706,10 +717,10 @@ export function MultiSelector({
       // not the trigger — must be the combobox reporting the highlighted
       // option via aria-activedescendant (comboboxes-4).
       role: "combobox",
-      "aria-expanded": popover.isOpen,
+      "aria-expanded": surface.isOpen,
       "aria-controls": listboxId,
       "aria-autocomplete": "list",
-      "aria-activedescendant": popover.isOpen && highlightedIndex >= 0 ? getItemId(highlightedIndex) : undefined,
+      "aria-activedescendant": surface.isOpen && highlightedIndex >= 0 ? getItemId(highlightedIndex) : undefined,
       value: searchQuery,
       onValueChange: handleSearchChange,
       onContainerKeyDown: e => {
@@ -752,7 +763,7 @@ export function MultiSelector({
       },
       placeholder: searchPlaceholder
     });
-  }, [hasSearch, searchId, listboxId, searchQuery, hasQuery, searchPlaceholder, handleSearchChange, onKeyDown, popover.isOpen, highlightedIndex, getItemId, t]);
+  }, [hasSearch, searchId, listboxId, searchQuery, hasQuery, searchPlaceholder, handleSearchChange, onKeyDown, surface.isOpen, highlightedIndex, getItemId, t]);
 
   // Render an individual item (index-based)
   const renderItem = useCallback((item, flatIndex) => {
@@ -928,6 +939,55 @@ export function MultiSelector({
   // on-field icon would duplicate it — keep the chevron indicator instead.
   const showStatusIcon = status != null && effectiveStatusVariant !== 'detached';
   const showStatusTooltip = status != null && effectiveStatusVariant === 'tooltip' && !!status.message;
+  const panelContent = hasSearch ? /*#__PURE__*/_jsxs("div", {
+    children: [renderSearch(), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx("div", {
+      ...{
+        className: "x9f619 xuyqlj2 x1odjw0f x9epnlk"
+      },
+      children: /*#__PURE__*/_jsx("div", {
+        ref: listboxRef,
+        id: listboxId,
+        role: "listbox",
+        "aria-multiselectable": "true",
+        "aria-labelledby": triggerId,
+        ...{
+          className: "x1a2a7pz"
+        },
+        children: renderOptions()
+      })
+    })]
+  }) : /*#__PURE__*/_jsx("div", {
+    ...{
+      className: "x9f619 xuyqlj2 x1odjw0f x9epnlk"
+    },
+    children: /*#__PURE__*/_jsx("div", {
+      ref: listboxRef,
+      id: listboxId,
+      role: "listbox",
+      "aria-multiselectable": "true",
+      "aria-labelledby": triggerId,
+      "aria-activedescendant": surface.isOpen && highlightedIndex >= 0 ? getItemId(highlightedIndex) : undefined,
+      tabIndex: surface.activePresentation === 'bottom-sheet' ? 0 : undefined,
+      onKeyDown: surface.activePresentation === 'bottom-sheet' ? onKeyDown : undefined,
+      ...{
+        className: "x1a2a7pz"
+      },
+      children: renderOptions()
+    })
+  });
+  const selectionSurface = surface.activePresentation === 'bottom-sheet' ? /*#__PURE__*/_jsx(SelectorBottomSheet, {
+    isOpen: surface.isSheetOpen,
+    onOpenChange: surface.onSheetOpenChange,
+    finalFocusRef: triggerRef,
+    initialFocusRef: hasSearch ? searchRef : listboxRef,
+    label: label,
+    children: panelContent
+  }) : popover.render(panelContent, {
+    placement: 'below',
+    alignment: 'start',
+    offset: spacingVars['--spacing-1'],
+    xstyle: styles.popover
+  });
   const multiSelectorContent = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs("div", {
       ref: el => {
@@ -944,7 +1004,7 @@ export function MultiSelector({
         size,
         status: status?.type ?? null,
         disabled: isDisabled ? 'disabled' : null
-      }), stylex.props(inputWrapperStyles.base, styles.triggerContainer, sizeStyles[size], variant === 'ghost' && styles.triggerGhost, variant === 'ghost' && interactionOverlayStyles.backgroundImage, variant === 'ghost' && focusOutlineStyles.focusWithin, isDisabled && inputWrapperStyles.disabled, variant === 'ghost' && isDisabled && styles.triggerGhostDisabled, optimisticValue.length === 0 && styles.triggerPlaceholder, variant !== 'ghost' && status && inputStatusBorderStyles[status.type], variant !== 'ghost' && status && !isDisabled && inputStatusHoverShadowStyles[status.type], variant !== 'ghost' && inputGroup && groupStyles.inGroup, xstyle), className, style),
+      }), stylex.props(inputWrapperStyles.base, styles.triggerContainer, sizeStyles[size], variant === 'ghost' && styles.triggerGhost, variant === 'ghost' && interactionOverlayStyles.backgroundImage, variant === 'ghost' && focusOutlineStyles.focusWithin, surface.isTriggerFocusRingSuppressed && selectorPresentationStyles.pointerRestoredFocus, isDisabled && inputWrapperStyles.disabled, variant === 'ghost' && isDisabled && styles.triggerGhostDisabled, optimisticValue.length === 0 && styles.triggerPlaceholder, variant !== 'ghost' && status && inputStatusBorderStyles[status.type], variant !== 'ghost' && status && !isDisabled && inputStatusHoverShadowStyles[status.type], variant !== 'ghost' && inputGroup && groupStyles.inGroup, xstyle), className, style),
       children: [startIcon && renderIconSlot(startIcon, {
         size: 'sm',
         color: 'secondary'
@@ -960,10 +1020,10 @@ export function MultiSelector({
         // plain button that opens the listbox — not a second combobox.
         ,
         role: hasSearch ? undefined : 'combobox',
-        "aria-haspopup": "listbox",
-        "aria-expanded": popover.isOpen,
+        "aria-haspopup": surface.activePresentation === 'bottom-sheet' ? 'dialog' : 'listbox',
+        "aria-expanded": surface.isOpen,
         "aria-controls": listboxId,
-        "aria-activedescendant": !hasSearch && popover.isOpen && highlightedIndex >= 0 ? getItemId(highlightedIndex) : undefined,
+        "aria-activedescendant": !hasSearch && surface.isOpen && highlightedIndex >= 0 ? getItemId(highlightedIndex) : undefined,
         "aria-describedby": ariaDescribedBy,
         "aria-labelledby": ariaLabelledBy,
         "aria-required": isEffectivelyRequired ? 'true' : undefined,
@@ -976,6 +1036,10 @@ export function MultiSelector({
         disabled: isDisabled && !showsDisabledMessage,
         "aria-disabled": showsDisabledMessage ? 'true' : undefined,
         onKeyDown: onKeyDown,
+        onFocus: event => {
+          onFocus?.(event);
+          surface.onTriggerFocus(event);
+        },
         tabIndex: isDisabled && !showsDisabledMessage ? -1 : 0,
         ...{
           className: "x78zum5 x6s0dn4 x1qughib x1txdalj x1iyjqo2 xs83m0k x1r8uery xeuugli x1717udv x1ghz6dp xc342km xng3xce xjbqb8w xjb2p0i x1qlqyl8 x15bjb6t x1heor9g x1ypdohk x16khyan x1a2a7pz xh6dtrn"
@@ -1030,7 +1094,7 @@ export function MultiSelector({
         // the wrapper used to provide, so one element carries the mark,
         // its open/closed transform, and the theme target.
         ,
-        xstyle: [styles.triggerIcon, styles.triggerIconRotation, popover.isOpen && styles.triggerIconOpen]
+        xstyle: [styles.triggerIcon, styles.triggerIconRotation, surface.isOpen && styles.triggerIconOpen]
         // Stable theme target on the chevron glyph itself, so a theme can
         // restyle just this icon (color, size, hover) — and its
         // open/closed state — via `defineTheme`. Same-element rules in
@@ -1038,45 +1102,10 @@ export function MultiSelector({
         // which a button-level target could not reach.
         ,
         ...themeProps('multi-selector-indicator-icon', {
-          state: popover.isOpen ? 'expanded' : 'collapsed'
+          state: surface.isOpen ? 'expanded' : 'collapsed'
         })
       })]
-    }), popover.render(hasSearch ?
-    /*#__PURE__*/
-    // With a search row the panel splits: the header stays put while the
-    // options scroll under it, so the field does not slide out of reach
-    // in a long list. Without one the panel is a single scroll container,
-    // exactly as before.
-    _jsxs("div", {
-      children: [renderSearch(), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx("div", {
-        ...{
-          className: "x9f619 xuyqlj2 x1odjw0f x9epnlk"
-        },
-        children: /*#__PURE__*/_jsx("div", {
-          id: listboxId,
-          role: "listbox",
-          "aria-multiselectable": "true",
-          "aria-labelledby": triggerId,
-          children: renderOptions()
-        })
-      })]
-    }) : /*#__PURE__*/_jsx("div", {
-      ...{
-        className: "x9f619 xuyqlj2 x1odjw0f x9epnlk"
-      },
-      children: /*#__PURE__*/_jsx("div", {
-        id: listboxId,
-        role: "listbox",
-        "aria-multiselectable": "true",
-        "aria-labelledby": triggerId,
-        children: renderOptions()
-      })
-    }), {
-      placement: 'below',
-      alignment: 'start',
-      offset: spacingVars['--spacing-1'],
-      xstyle: styles.popover
-    }), showStatusTooltip && statusTooltip.renderTooltip(status?.message ?? ''), showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
+    }), selectionSurface, showStatusTooltip && statusTooltip.renderTooltip(status?.message ?? ''), showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
   });
   if (inputGroup) {
     return multiSelectorContent;

package/dist/MultiSelector/index.d.ts

@@ -3,7 +3,7 @@
  * @output Exports MultiSelector and types
  * @position Public API entry point
  */
-export { MultiSelector, type MultiSelectorProps, type MultiSelectorSize, type MultiSelectorStatusType, type MultiSelectorSelectedItem, } from './MultiSelector';
+export { MultiSelector, type MultiSelectorProps, type MultiSelectorPresentation, type MultiSelectorSize, type MultiSelectorStatusType, type MultiSelectorSelectedItem, } from './MultiSelector';
 export type { MultiSelectorOptionType, MultiSelectorOptionData, MultiSelectorDivider, MultiSelectorSection, MultiSelectorStatus, } from './types';
 export { useMultiCombobox } from './hooks';
 //# sourceMappingURL=index.d.ts.map

package/dist/MultiSelector/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MultiSelector/index.ts"],"names":[],"mappings":"AAIA;;;;GAIG;AAEH,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EACtB,KAAK,uBAAuB,EAC5B,KAAK,yBAAyB,GAC/B,MAAM,iBAAiB,CAAC;AACzB,YAAY,EACV,uBAAuB,EACvB,uBAAuB,EACvB,oBAAoB,EACpB,oBAAoB,EACpB,mBAAmB,GACpB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAC,gBAAgB,EAAC,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MultiSelector/index.ts"],"names":[],"mappings":"AAIA;;;;GAIG;AAEH,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,EACvB,KAAK,yBAAyB,EAC9B,KAAK,iBAAiB,EACtB,KAAK,uBAAuB,EAC5B,KAAK,yBAAyB,GAC/B,MAAM,iBAAiB,CAAC;AACzB,YAAY,EACV,uBAAuB,EACvB,uBAAuB,EACvB,oBAAoB,EACpB,oBAAoB,EACpB,mBAAmB,GACpB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAC,gBAAgB,EAAC,MAAM,SAAS,CAAC"}

package/dist/Popover/Popover.d.ts

@@ -1,7 +1,7 @@
 /**
  * @file Popover.tsx
- * @input Uses React, usePopover hook
- * @output Exports Popover component for click-triggered popovers
+ * @input Uses React layout measurement and the usePopover hook
+ * @output Exports Popover with viewport fitting and conditional overflow
  * @position Layer component; declarative wrapper around usePopover hook
  *
  * For hover-triggered overlays, use HoverCard instead.
@@ -21,9 +21,11 @@ import type { LayerAlignment, LayerPlacement } from '../Layer/useLayer';
 export interface PopoverTriggerRenderProps {
     /** Ref callback — attach to the trigger element for anchor positioning. */
     ref: (el: HTMLElement | null) => void;
-    /** Toggle the popover open/closed. */
-    onClick: () => void;
-    /** ARIA attribute: indicates the element triggers a dialog. */
+    /** Toggle the popover open/closed. Pass the click event through so pointer and keyboard focus behavior can differ. */
+    onClick: (event?: {
+        detail: number;
+    }) => void;
+    /** ARIA attribute: indicates the trigger opens a dialog-style popover. */
     'aria-haspopup': 'dialog';
     /** ARIA attribute: whether the popover is currently open. */
     'aria-expanded': boolean;
@@ -140,7 +142,9 @@ export interface PopoverProps extends Pick<BaseProps, 'xstyle' | 'className' | '
      */
     closeButtonLabel?: string;
     /**
-     * Whether to auto-focus the first focusable element when the popover opens.
+     * Whether to move focus into the popover when it opens. Keyboard activation
+     * focuses the first content control; pointer activation focuses the labeled
+     * dialog container so an action does not appear preselected.
      * Set to `false` for inline showcases or documentation previews.
      * @default true
      */

package/dist/Popover/Popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../src/Popover/Popover.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAGZ,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAC;AA2BtE;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC,2EAA2E;IAC3E,GAAG,EAAE,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IACtC,sCAAsC;IACtC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,+DAA+D;IAC/D,eAAe,EAAE,QAAQ,CAAC;IAC1B,6DAA6D;IAC7D,eAAe,EAAE,OAAO,CAAC;IACzB,4DAA4D;IAC5D,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA6BG;IACH,QAAQ,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,yBAAyB,KAAK,SAAS,CAAC,CAAC;IAEzE;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAEzC;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAEzB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;;;;OAOG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAmCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAmB,EACnB,SAAmB,EACnB,MAAM,EACN,YAAY,EACZ,SAAgB,EAChB,KAAK,EACL,KAAK,EACL,IAAe,EACf,OAAO,EACP,cAAc,EACd,gBAAgB,EAChB,YAAY,EACZ,eAAsB,EACtB,gBAAuB,EACvB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,GACtB,EAAE,YAAY,GAAG,YAAY,CAkP7B;yBAxQe,OAAO"}
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../src/Popover/Popover.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAIZ,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAC;AAmCtE;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC,2EAA2E;IAC3E,GAAG,EAAE,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IACtC,sHAAsH;IACtH,OAAO,EAAE,CAAC,KAAK,CAAC,EAAE;QAAC,MAAM,EAAE,MAAM,CAAA;KAAC,KAAK,IAAI,CAAC;IAC5C,0EAA0E;IAC1E,eAAe,EAAE,QAAQ,CAAC;IAC1B,6DAA6D;IAC7D,eAAe,EAAE,OAAO,CAAC;IACzB,4DAA4D;IAC5D,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA6BG;IACH,QAAQ,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,yBAAyB,KAAK,SAAS,CAAC,CAAC;IAEzE;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAEzC;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAEzB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;;;;OAOG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAsGD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAmB,EACnB,SAAmB,EACnB,MAAM,EACN,YAAY,EACZ,SAAgB,EAChB,KAAK,EACL,KAAK,EACL,IAAe,EACf,OAAO,EACP,cAAc,EACd,gBAAgB,EAChB,YAAY,EACZ,eAAsB,EACtB,gBAAuB,EACvB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,GACtB,EAAE,YAAY,GAAG,YAAY,CAmX7B;yBAzYe,OAAO"}

package/dist/Popover/Popover.js

@@ -4,8 +4,8 @@
 
 /**
  * @file Popover.tsx
- * @input Uses React, usePopover hook
- * @output Exports Popover component for click-triggered popovers
+ * @input Uses React layout measurement and the usePopover hook
+ * @output Exports Popover with viewport fitting and conditional overflow
  * @position Layer component; declarative wrapper around usePopover hook
  *
  * For hover-triggered overlays, use HoverCard instead.
@@ -16,11 +16,11 @@
  * - /apps/storybook/stories/Popover.stories.tsx
  * - /packages/cli/assets/templates/blocks/components/Popover/ (showcase blocks)
  */
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
 import * as stylex from '@stylexjs/stylex';
 import { devWarn } from "../utils/devWarning.js";
-import { usePopover } from "./usePopover.js";
+import { usePopoverInternal } from "./usePopover.js";
 import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
 import "../theme/tokens.stylex.js";
 import { spacingVars } from "../theme/tokens.stylex.js";
@@ -31,6 +31,14 @@ import { InteractiveRoleContext } from "../InteractiveRoleContext/InteractiveRol
 // =============================================================================
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const BUTTON_SELECTOR = 'button, [role="button"]';
+const POPOVER_VIEWPORT_GUTTER = spacingVars['--spacing-4'];
+const POPOVER_MAX_INLINE_SIZE = `calc(100vi - max(${POPOVER_VIEWPORT_GUTTER}, env(safe-area-inset-left, 0px)) - max(${POPOVER_VIEWPORT_GUTTER}, env(safe-area-inset-right, 0px)))`;
+const POPOVER_MAX_INLINE_SIZE_FALLBACK = `calc(100vw - ${POPOVER_VIEWPORT_GUTTER} - ${POPOVER_VIEWPORT_GUTTER})`;
+const POPOVER_MAX_BLOCK_SIZE = `calc(100dvb - max(${POPOVER_VIEWPORT_GUTTER}, env(safe-area-inset-top, 0px)) - max(${POPOVER_VIEWPORT_GUTTER}, env(safe-area-inset-bottom, 0px)))`;
+const POPOVER_MAX_BLOCK_SIZE_FALLBACK = `calc(100vh - ${POPOVER_VIEWPORT_GUTTER} - ${POPOVER_VIEWPORT_GUTTER})`;
+const POPOVER_POSITION_AREA_MAX_INLINE_SIZE = `calc(100% - max(${POPOVER_VIEWPORT_GUTTER}, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)))`;
+const POPOVER_POSITION_AREA_MAX_INLINE_SIZE_FALLBACK = `calc(100% - ${POPOVER_VIEWPORT_GUTTER})`;
+const POPOVER_INLINE_EDGE_GUTTER = `max(${POPOVER_VIEWPORT_GUTTER}, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))`;
 
 /**
  * Find the trigger button inside a container element.
@@ -57,6 +65,54 @@ function findTriggerButton(el) {
 // =============================================================================
 
 const styles = {
+  viewportFit: {
+    kB7OPa: "x9f619",
+    kskxy: "xtm2925",
+    $$css: true
+  },
+  viewportAligned: {
+    ks0D6T: "xbd96yr",
+    $$css: true
+  },
+  viewportStart: {
+    k71WvV: "xxeicf8",
+    $$css: true
+  },
+  viewportEnd: {
+    keTefX: "x47fqr9",
+    $$css: true
+  },
+  viewportBlockStart: {
+    k1K539: "x1kps3mo",
+    $$css: true
+  },
+  viewportBlockEnd: {
+    keoZOQ: "xsoubt3",
+    $$css: true
+  },
+  viewportCentered: {
+    keTefX: "x47fqr9",
+    k71WvV: "xxeicf8",
+    ks0D6T: "xs2v1xk",
+    $$css: true
+  },
+  viewportBlockCentered: {
+    keoZOQ: "xsoubt3",
+    k1K539: "x1kps3mo",
+    ks0D6T: "xs2v1xk",
+    $$css: true
+  },
+  surfaceViewportFit: {
+    kB7OPa: "x9f619",
+    ks0D6T: "xs2v1xk",
+    kskxy: "xtm2925",
+    $$css: true
+  },
+  surfaceScrollable: {
+    kVQacm: "xysyzu8",
+    kZeWKH: "xish69e",
+    $$css: true
+  },
   contentPadding: {
     kLKAdn: "x1vlblms",
     kGO01o: "xvmdzux",
@@ -70,8 +126,12 @@ const styles = {
   }, {
     "--x-width": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(typeof width === 'number' ? `${width}px` : width)
   }],
-  matchTrigger: {
-    k7Eaqz: "xrzjruh",
+  matchTriggerAligned: {
+    k7Eaqz: "x1ks9poc",
+    $$css: true
+  },
+  matchTriggerCentered: {
+    k7Eaqz: "xagy28z",
     $$css: true
   }
 };
@@ -139,6 +199,8 @@ export function Popover({
   'data-testid': testId
 }) {
   const wrapperRef = useRef(null);
+  const measurementFrameRef = useRef(null);
+  const [hasOverflow, setHasOverflow] = useState(false);
   const isControlled = isOpen !== undefined;
   const handlePopoverShow = useCallback(() => {
     onOpenChange?.(true);
@@ -146,7 +208,7 @@ export function Popover({
   const handlePopoverHide = useCallback(() => {
     onOpenChange?.(false);
   }, [onOpenChange]);
-  const popover = usePopover({
+  const popover = usePopoverInternal({
     dialogLabel: label,
     role,
     isModal,
@@ -159,21 +221,82 @@ export function Popover({
     // it is the element the `popover` theme target has to sit on — a target on
     // the content div inside it styles a box that paints nothing.
     surfaceTarget: 'popover',
-    xstyle: [styles.contentPadding, xstyle],
+    xstyle: [styles.contentPadding, styles.surfaceViewportFit, hasOverflow && styles.surfaceScrollable, xstyle],
     className,
     style,
     onShow: handlePopoverShow,
     onHide: handlePopoverHide
   });
+  const measureOverflow = useCallback(() => {
+    const surface = popover.contentRef.current;
+    if (!surface) {
+      return;
+    }
+    const nextHasOverflow = surface.scrollHeight > surface.clientHeight + 1 || surface.scrollWidth > surface.clientWidth + 1;
+    // eslint-disable-next-line @eslint-react/set-state-in-effect -- DOM overflow measurement controls whether this surface becomes a scroll container
+    setHasOverflow(current => current === nextHasOverflow ? current : nextHasOverflow);
+  }, [popover.contentRef]);
+  const scheduleOverflowMeasurement = useCallback(() => {
+    if (measurementFrameRef.current != null) {
+      return;
+    }
+    measurementFrameRef.current = window.requestAnimationFrame(() => {
+      measurementFrameRef.current = null;
+      measureOverflow();
+    });
+  }, [measureOverflow]);
+  useIsomorphicLayoutEffect(() => {
+    if (!popover.isOpen) {
+      return;
+    }
+    const surface = popover.contentRef.current;
+    if (!surface) {
+      return;
+    }
+    measureOverflow();
+    const resizeObserver = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(scheduleOverflowMeasurement);
+    const mutationObserver = typeof MutationObserver === 'undefined' ? null : new MutationObserver(scheduleOverflowMeasurement);
+    resizeObserver?.observe(surface);
+    mutationObserver?.observe(surface, {
+      childList: true,
+      characterData: true,
+      subtree: true
+    });
+    surface.addEventListener('load', scheduleOverflowMeasurement, true);
+    window.addEventListener('resize', scheduleOverflowMeasurement);
+    window.visualViewport?.addEventListener('resize', scheduleOverflowMeasurement);
+    return () => {
+      resizeObserver?.disconnect();
+      mutationObserver?.disconnect();
+      surface.removeEventListener('load', scheduleOverflowMeasurement, true);
+      window.removeEventListener('resize', scheduleOverflowMeasurement);
+      window.visualViewport?.removeEventListener('resize', scheduleOverflowMeasurement);
+      if (measurementFrameRef.current != null) {
+        window.cancelAnimationFrame(measurementFrameRef.current);
+        measurementFrameRef.current = null;
+      }
+    };
+  }, [measureOverflow, popover.isOpen, scheduleOverflowMeasurement]);
+  useIsomorphicLayoutEffect(() => {
+    if (!popover.isOpen) {
+      return;
+    }
+    scheduleOverflowMeasurement();
+  }, [content, popover.isOpen, scheduleOverflowMeasurement]);
 
   // Shared handler for click events on the trigger button.
-  const handleTriggerClick = useCallback(() => {
+  const handleTriggerClick = useCallback(event => {
     if (!isEnabled) {
       return;
     }
-    // `toggle` absorbs a click that belongs to its own light dismiss.
-    popover.toggle();
-  }, [isEnabled, popover]);
+    // Pointer/touch activation should not make the first action look
+    // preselected. Keep focus inside the modal dialog by focusing its
+    // labeled container; keyboard and AT activation still focus the first
+    // content control and expose the expected focus ring.
+    popover.toggleWithOptions({
+      focusTarget: role === 'dialog' && event != null && event.detail > 0 ? 'container' : 'first'
+    });
+  }, [isEnabled, popover, role]);
 
   // Shared handler for keydown events on role="button" elements.
   // Native <button> synthesizes click on Enter/Space, but role="button"
@@ -289,7 +412,9 @@ export function Popover({
   }, [isOpen, isControlled, popover]);
 
   // Determine popover xstyle
-  const popoverXstyle = width ? styles.customWidth(width) : styles.matchTrigger;
+  const popoverSizeXstyle = width ? styles.customWidth(width) : alignment === 'center' ? styles.matchTriggerCentered : styles.matchTriggerAligned;
+  const isSidePlacement = placement === 'start' || placement === 'end';
+  const popoverViewportXstyle = alignment === 'center' ? isSidePlacement ? styles.viewportBlockCentered : styles.viewportCentered : [styles.viewportAligned, isSidePlacement ? alignment === 'start' ? styles.viewportBlockStart : styles.viewportBlockEnd : alignment === 'start' ? styles.viewportStart : styles.viewportEnd];
 
   // Sibling mode: render only the popover (no wrapper needed)
   if (anchorRef && children == null) {
@@ -301,7 +426,7 @@ export function Popover({
         placement,
         alignment,
         offset: spacingVars['--spacing-1'],
-        xstyle: [popoverXstyle, layerAnimations[placement]]
+        xstyle: [styles.viewportFit, popoverViewportXstyle, popoverSizeXstyle, layerAnimations[placement]]
       })
     });
   }
@@ -324,7 +449,7 @@ export function Popover({
         placement,
         alignment,
         offset: spacingVars['--spacing-1'],
-        xstyle: [popoverXstyle, layerAnimations[placement]]
+        xstyle: [styles.viewportFit, popoverViewportXstyle, popoverSizeXstyle, layerAnimations[placement]]
       })]
     });
   }
@@ -347,7 +472,7 @@ export function Popover({
       placement,
       alignment,
       offset: spacingVars['--spacing-1'],
-      xstyle: [popoverXstyle, layerAnimations[placement]]
+      xstyle: [styles.viewportFit, popoverViewportXstyle, popoverSizeXstyle, layerAnimations[placement]]
     })]
   });
 }

package/dist/Popover/usePopover.d.ts

@@ -201,6 +201,10 @@ export interface UsePopoverReturn {
 }
 interface InternalUsePopoverReturn extends UsePopoverReturn {
     wasJustDismissed: () => boolean;
+    toggleWithOptions: (options?: {
+        skipAutoFocus?: boolean;
+        focusTarget?: 'first' | 'container';
+    }) => void;
 }
 export declare function usePopover(options?: UsePopoverOptions): UsePopoverReturn;
 /** @internal Used by trigger components; not exported from package barrels. */

package/dist/Popover/usePopover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePopover.d.ts","sourceRoot":"","sources":["../../src/Popover/usePopover.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAmB,KAAK,kBAAkB,EAAC,MAAM,mBAAmB,CAAC;AAG5E,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAiEnD;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAE5B;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;;;;;;;OAUG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;;;;;;;;OAYG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAEzB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;;;;;;OAaG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,UAAU,EAAE,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAE7C;;;;OAIG;IACH,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAEnD;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;;OAIG;IACH,IAAI,EAAE,CAAC,OAAO,CAAC,EAAE;QAAC,aAAa,CAAC,EAAE,OAAO,CAAA;KAAC,KAAK,IAAI,CAAC;IAEpD;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;OAEG;IACH,MAAM,EAAE,MAAM,IAAI,CAAC;IAEnB;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;;;;;;;;;;OAWG;IACH,MAAM,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,CAAC,EAAE,kBAAkB,KAAK,SAAS,CAAC;IAEvE;;OAEG;IACH,YAAY,EAAE;QACZ,eAAe,EAAE,QAAQ,GAAG,MAAM,CAAC;QACnC,eAAe,EAAE,OAAO,CAAC;QACzB,eAAe,EAAE,MAAM,CAAC;KACzB,CAAC;CACH;AAED,UAAU,wBAAyB,SAAQ,gBAAgB;IACzD,gBAAgB,EAAE,MAAM,OAAO,CAAC;CACjC;AAqOD,wBAAgB,UAAU,CAAC,OAAO,GAAE,iBAAsB,GAAG,gBAAgB,CAG5E;AAED,+EAA+E;AAC/E,wBAAgB,kBAAkB,CAChC,OAAO,GAAE,iBAAsB,GAC9B,wBAAwB,CAE1B"}
+{"version":3,"file":"usePopover.d.ts","sourceRoot":"","sources":["../../src/Popover/usePopover.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAmB,KAAK,kBAAkB,EAAC,MAAM,mBAAmB,CAAC;AAG5E,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AA8FnD;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAE5B;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;;;;;;;OAUG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;;;;;;;;OAYG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAEzB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;;;;;;OAaG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,UAAU,EAAE,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAE7C;;;;OAIG;IACH,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAEnD;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;;OAIG;IACH,IAAI,EAAE,CAAC,OAAO,CAAC,EAAE;QAAC,aAAa,CAAC,EAAE,OAAO,CAAA;KAAC,KAAK,IAAI,CAAC;IAEpD;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;OAEG;IACH,MAAM,EAAE,MAAM,IAAI,CAAC;IAEnB;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;;;;;;;;;;OAWG;IACH,MAAM,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,CAAC,EAAE,kBAAkB,KAAK,SAAS,CAAC;IAEvE;;OAEG;IACH,YAAY,EAAE;QACZ,eAAe,EAAE,QAAQ,GAAG,MAAM,CAAC;QACnC,eAAe,EAAE,OAAO,CAAC;QACzB,eAAe,EAAE,MAAM,CAAC;KACzB,CAAC;CACH;AAED,UAAU,wBAAyB,SAAQ,gBAAgB;IACzD,gBAAgB,EAAE,MAAM,OAAO,CAAC;IAChC,iBAAiB,EAAE,CAAC,OAAO,CAAC,EAAE;QAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;QACxB,WAAW,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC;KACrC,KAAK,IAAI,CAAC;CACZ;AA6QD,wBAAgB,UAAU,CAAC,OAAO,GAAE,iBAAsB,GAAG,gBAAgB,CAO5E;AAED,+EAA+E;AAC/E,wBAAgB,kBAAkB,CAChC,OAAO,GAAE,iBAAsB,GAC9B,wBAAwB,CAE1B"}