@astryxdesign/core 0.7.8 → 0.7.9-canary.0a64fdb

package/dist/hooks/useMenuPress.js

@@ -6,7 +6,8 @@
  * @file useMenuPress.ts
  * @input The menu root, its trigger, the enabled-row selector, and callbacks
  *   for opening, highlighting, activating and dismissing
- * @output useMenuPress, the marker attributes, and the activation mark
+ * @output useMenuPress, the marker attributes, the activation mark, and the
+ *   internal useDropdownMenuPress entry with its touch model
  * @position Core hook for DropdownMenu, ContextMenu, DropdownMenuSubMenu,
  *   Selector and MenuBottomSheetActionList. The transition table lives in
  *   menuPressGesture.ts.
@@ -19,13 +20,14 @@
  */
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { currentGesture } from "../Layer/gestureCounter.js";
-import { IDLE_MENU_PRESS, menuPressStep } from "./menuPressGesture.js";
+import { IDLE_MENU_PRESS, menuPressTransition } from "./menuPressGesture.js";
 import { MENU_PRESS_MARKER } from "./menuPressMarker.js";
 import { useLongPressDetector } from "./useLongPress.js";
 import { edgeAutoscroll } from "../utils/edgeAutoscroll.js";
 import { focusForLastInput } from "../utils/focusReturn.js";
 import { useInteractionModalityTrackingFor } from "../utils/interactionModality.js";
 import { LONG_PRESS_DURATION_MS } from "../motion/uikit/longPress.js";
+import { clearMenuPressLit, holdMenuPressPaint, markMenuPressLit, releaseMenuPressPaint } from "../privateAttributes/menuPressLit.stylex.js";
 import { __resetClickGuardForTest, armClickGuard, CLICK_GUARD_WINDOW_MS, withoutClickGuard } from "../utils/clickGuard.js";
 export { MENU_PRESS_MARKER };
 const MENU_PRESS_ROOT_SELECTOR = `[${MENU_PRESS_MARKER}]`;
@@ -124,6 +126,34 @@ function isInMenuTree(element, root) {
   const owner = element.closest(MENU_PRESS_ROOT_SELECTOR);
   return owner != null && getOutermostRoot(owner) === root;
 }
+
+/**
+ * DropdownMenu's options for the press model: everything the public hook
+ * takes, plus its touch model. DropdownMenu reaches the touch model through
+ * its `presentation`, so the public hook has no such option.
+ *
+ * @internal
+ */
+
+/**
+ * What core's own menus get from {@link useDropdownMenuPress}: the public
+ * return. Not exported from the hooks entry point.
+ *
+ * @internal
+ */
+
+/**
+ * Where a pointer is, for a finger's handoff distance. Positions reach the
+ * machine only under `touchModel: 'uikit'`. Without them, it keeps the settle
+ * rule.
+ */
+function handoffPosition(event, hasHandoff) {
+  return hasHandoff ? {
+    x: event.clientX,
+    y: event.clientY
+  } : {};
+}
+
 /**
  * The press model for a menu: the row under the release acts, the highlight
  * follows a held pointer, and a mouse opens the menu on press.
@@ -160,6 +190,26 @@ function isInMenuTree(element, root) {
  * ```
  */
 export function useMenuPress(options) {
+  // The touch model is DropdownMenu's alone; an untyped caller's
+  // `touchModel` does not reach the model.
+  const {
+    touchModel: _touchModel,
+    ...publicOptions
+  } = options;
+  return useDropdownMenuPress({
+    ...publicOptions,
+    touchModel: 'pointer'
+  });
+}
+
+/**
+ * The press model with DropdownMenu's touch model
+ * ({@link DropdownMenuPressOptions.touchModel}). Not exported from the hooks
+ * entry point.
+ *
+ * @internal
+ */
+export function useDropdownMenuPress(options) {
   const optionsRef = useRef(options);
   optionsRef.current = options;
   // The highlight, and the hover focus of the rows in this menu, follow the
@@ -247,8 +297,18 @@ export function useMenuPress(options) {
     autoscroll.stop();
     autoscrollRef.current = null;
   }, [autoscroll]);
+  const litRowRef = useRef(null);
+  const heldMenuRef = useRef(null);
   const endGesture = useCallback(() => {
     longPressApiRef.current?.cancel();
+    if (litRowRef.current != null) {
+      clearMenuPressLit(litRowRef.current);
+      litRowRef.current = null;
+    }
+    if (heldMenuRef.current != null) {
+      releaseMenuPressPaint(heldMenuRef.current);
+      heldMenuRef.current = null;
+    }
     touchMovePreventerRef.current?.();
     touchMovePreventerRef.current = null;
     stopAutoscroll();
@@ -259,10 +319,36 @@ export function useMenuPress(options) {
     gestureRef.current = IDLE_MENU_PRESS;
   }, [stopAutoscroll]);
   const highlight = useCallback(row => {
+    // A held finger or pen marks the row it lights, for the row's pressed
+    // paint. A held mouse keeps the hover tint, as on a desktop.
+    const gesture = gestureRef.current;
+    const isHeld = gesture.phase !== 'idle' && gesture.pointerType !== 'mouse';
+    const lit = isHeld ? row : null;
+    if (litRowRef.current !== lit) {
+      if (litRowRef.current != null) {
+        clearMenuPressLit(litRowRef.current);
+      }
+      litRowRef.current = lit;
+      if (lit != null) {
+        markMenuPressLit(lit);
+      }
+    }
     const {
       onHighlight,
       menuRef
     } = optionsRef.current;
+    // The row the press began on stays :active where a pointer hovers, so
+    // the menu holds every row but the lit one off that paint.
+    const held = isHeld ? menuRef.current : null;
+    if (heldMenuRef.current !== held) {
+      if (heldMenuRef.current != null) {
+        releaseMenuPressPaint(heldMenuRef.current);
+      }
+      heldMenuRef.current = held;
+      if (held != null) {
+        holdMenuPressPaint(held);
+      }
+    }
     if (onHighlight != null) {
       onHighlight(row);
       return;
@@ -369,7 +455,7 @@ export function useMenuPress(options) {
     }
   }, [activate, endGesture, getDocument, highlight]);
   const step = useCallback((event, native) => {
-    const result = menuPressStep(gestureRef.current, event);
+    const result = menuPressTransition(gestureRef.current, event);
     gestureRef.current = result.gesture;
     applyEffect(result.effect, result.gesture, native);
   }, [applyEffect]);
@@ -466,7 +552,8 @@ export function useMenuPress(options) {
         type: 'move',
         row: point.row,
         isInMenu: point.isInMenu,
-        time: Date.now()
+        time: Date.now(),
+        ...handoffPosition(event, optionsRef.current.touchModel === 'uikit')
       }, event);
       updateAutoscroll(event);
     };
@@ -480,7 +567,8 @@ export function useMenuPress(options) {
         row: point.row,
         isInMenu: point.isInMenu,
         isOnTrigger: point.isOnTrigger,
-        time: Date.now()
+        time: Date.now(),
+        ...handoffPosition(event, optionsRef.current.touchModel === 'uikit')
       }, event);
     };
     const onCancel = event => {

package/dist/hooks/usePressFeedback.d.ts

@@ -7,11 +7,11 @@ import { pressableProps } from '../utils/pressFeedback.js';
  * `interactionOverlayStyles` (from `@astryxdesign/core/utils`) on the same
  * element: `backgroundColor` or `backgroundImage` for a surface whose hover
  * and press are the system's overlays, `pressedBackgroundColor` for one
- * whose hover is its own. The controller writes its attribute on the element
- * while a touch press is believed (after the onset delay, cancelled by travel
- * or by a scroll) and for the release, and the composed style paints the
- * pressed token at the press's strength on the first frame and fades it over
- * the release, keeping `:active` for a mouse on a desktop. On a phone or
+ * whose hover is its own. Under a finger the controller tracks the press the
+ * way UIKit tracks a control and writes its
+ * attribute on the element while the press is held and for the release; the
+ * composed style paints the pressed token on the first frame and fades it
+ * over the release, keeping `:active` for a mouse on a desktop. On a phone or
  * tablet the stylesheet drops `:active` for every press, so the controller
  * also paints a mouse, trackpad or Space-key press there, at once. A press is
  * themed through `--color-overlay-pressed`, which the hold, the flash and the
@@ -27,7 +27,7 @@ import { pressableProps } from '../utils/pressFeedback.js';
  * @example
  * ```
  * const pressable = usePressFeedback();
- * return <div role="button" {...pressable} {...stylex.props(styles.row)} />;
+ * return <button {...pressable} {...stylex.props(styles.button)} />;
  * ```
  */
 export declare function usePressFeedback(): typeof pressableProps;

package/dist/hooks/usePressFeedback.js

@@ -25,11 +25,11 @@ import { installPressFeedback, pressableProps } from "../utils/pressFeedback.js"
  * `interactionOverlayStyles` (from `@astryxdesign/core/utils`) on the same
  * element: `backgroundColor` or `backgroundImage` for a surface whose hover
  * and press are the system's overlays, `pressedBackgroundColor` for one
- * whose hover is its own. The controller writes its attribute on the element
- * while a touch press is believed (after the onset delay, cancelled by travel
- * or by a scroll) and for the release, and the composed style paints the
- * pressed token at the press's strength on the first frame and fades it over
- * the release, keeping `:active` for a mouse on a desktop. On a phone or
+ * whose hover is its own. Under a finger the controller tracks the press the
+ * way UIKit tracks a control and writes its
+ * attribute on the element while the press is held and for the release; the
+ * composed style paints the pressed token on the first frame and fades it
+ * over the release, keeping `:active` for a mouse on a desktop. On a phone or
  * tablet the stylesheet drops `:active` for every press, so the controller
  * also paints a mouse, trackpad or Space-key press there, at once. A press is
  * themed through `--color-overlay-pressed`, which the hold, the flash and the
@@ -45,7 +45,7 @@ import { installPressFeedback, pressableProps } from "../utils/pressFeedback.js"
  * @example
  * ```
  * const pressable = usePressFeedback();
- * return <div role="button" {...pressable} {...stylex.props(styles.row)} />;
+ * return <button {...pressable} {...stylex.props(styles.button)} />;
  * ```
  */
 export function usePressFeedback() {

package/dist/hooks/useScrollRegionProps.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @file useScrollRegionProps.ts
+ * @input Whether a region may scroll, and the caller's role and label
+ * @output useScrollRegionProps: a ref for the region, and the role and
+ *   accessible name that the region carries while its content overflows
+ * @position Internal hook for LayoutContent, LayoutPanel and StackItem.
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/hooks/useScrollRegionProps.test.tsx
+ * - /packages/core/src/AppShell/observeMainOverflow.ts
+ */
+import { type AriaRole, type RefCallback } from 'react';
+export interface ScrollRegionOptions {
+    /** Whether the region may scroll at all (`overflow: auto`). */
+    isScrollable: boolean;
+    /** The caller's role. It always wins, and takes no default name. */
+    role?: AriaRole;
+    /** The caller's accessible name. It always wins. */
+    label?: string;
+}
+export interface ScrollRegionProps {
+    ref: RefCallback<HTMLElement>;
+    role: AriaRole | undefined;
+    'aria-label': string | undefined;
+}
+/**
+ * The region's ref, role and accessible name. While the region may scroll
+ * and its content overflows, it is a group named by the caller's `label`, or
+ * by the translated "Content". A caller's `role` is kept with only the
+ * caller's `label`: a single main landmark relies on its role alone. When
+ * the region does not scroll, the caller's own `role` and `label` pass
+ * through unchanged.
+ */
+export declare function useScrollRegionProps({ isScrollable, role, label, }: ScrollRegionOptions): ScrollRegionProps;
+//# sourceMappingURL=useScrollRegionProps.d.ts.map

package/dist/hooks/useScrollRegionProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollRegionProps.d.ts","sourceRoot":"","sources":["../../src/hooks/useScrollRegionProps.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAAwB,KAAK,QAAQ,EAAE,KAAK,WAAW,EAAC,MAAM,OAAO,CAAC;AAU7E,MAAM,WAAW,mBAAmB;IAClC,+DAA+D;IAC/D,YAAY,EAAE,OAAO,CAAC;IACtB,oEAAoE;IACpE,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,iBAAiB;IAChC,GAAG,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAC9B,IAAI,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC3B,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;CAClC;AAED;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,YAAY,EACZ,IAAI,EACJ,KAAK,GACN,EAAE,mBAAmB,GAAG,iBAAiB,CAsBzC"}

package/dist/hooks/useScrollRegionProps.js

@@ -0,0 +1,51 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file useScrollRegionProps.ts
+ * @input Whether a region may scroll, and the caller's role and label
+ * @output useScrollRegionProps: a ref for the region, and the role and
+ *   accessible name that the region carries while its content overflows
+ * @position Internal hook for LayoutContent, LayoutPanel and StackItem.
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/hooks/useScrollRegionProps.test.tsx
+ * - /packages/core/src/AppShell/observeMainOverflow.ts
+ */
+import { useCallback, useState } from 'react';
+import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
+import english from "../i18n/generated-english/hooks/useScrollRegionProps.generated.js";
+import { observeMainOverflow } from "../AppShell/observeMainOverflow.js";
+registerEnglishFallback(english);
+/**
+ * The region's ref, role and accessible name. While the region may scroll
+ * and its content overflows, it is a group named by the caller's `label`, or
+ * by the translated "Content". A caller's `role` is kept with only the
+ * caller's `label`: a single main landmark relies on its role alone. When
+ * the region does not scroll, the caller's own `role` and `label` pass
+ * through unchanged.
+ */
+export function useScrollRegionProps({
+  isScrollable,
+  role,
+  label
+}) {
+  const t = useComponentTranslator();
+  const [overflows, setOverflows] = useState(false);
+  // A caller's role takes no default name, so its region is not observed.
+  const hasRole = role != null;
+  const ref = useCallback(element => {
+    if (element == null || !isScrollable || hasRole) {
+      setOverflows(false);
+      return undefined;
+    }
+    return observeMainOverflow(element, setOverflows);
+  }, [hasRole, isScrollable]);
+  const isGroup = !hasRole && isScrollable && overflows;
+  return {
+    ref,
+    role: role ?? (isGroup ? 'group' : undefined),
+    'aria-label': label ?? (isGroup ? t('@astryx.scrollRegion.label') : undefined)
+  };
+}

package/dist/i18n/generated-english/hooks/useScrollRegionProps.generated.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @generated by scripts/generate-i18n-runtime.mjs from packages/core/locales/en.json,
+ * holding the English for the catalog keys named in packages/core/src/hooks/useScrollRegionProps.ts.
+ * Do not edit by hand. Run `pnpm generate:i18n-runtime` instead.
+ */
+declare const english: Readonly<Record<string, string>>;
+export default english;
+//# sourceMappingURL=useScrollRegionProps.generated.d.ts.map

package/dist/i18n/generated-english/hooks/useScrollRegionProps.generated.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollRegionProps.generated.d.ts","sourceRoot":"","sources":["../../../../src/i18n/generated-english/hooks/useScrollRegionProps.generated.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH,QAAA,MAAM,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAE7C,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/i18n/generated-english/hooks/useScrollRegionProps.generated.js

@@ -0,0 +1,12 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @generated by scripts/generate-i18n-runtime.mjs from packages/core/locales/en.json,
+ * holding the English for the catalog keys named in packages/core/src/hooks/useScrollRegionProps.ts.
+ * Do not edit by hand. Run `pnpm generate:i18n-runtime` instead.
+ */
+
+const english = {
+  "@astryx.scrollRegion.label": "Content"
+};
+export default english;

package/dist/i18n/generated-locales/en.generated.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"en.generated.d.ts","sourceRoot":"","sources":["../../../src/i18n/generated-locales/en.generated.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH,QAAA,MAAM,cAAc,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAmqBpD,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"en.generated.d.ts","sourceRoot":"","sources":["../../../src/i18n/generated-locales/en.generated.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH,QAAA,MAAM,cAAc,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAoqBpD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/i18n/generated-locales/en.generated.js

@@ -338,6 +338,7 @@ const runtimeCatalog = {
   '@astryx.banner.expand': 'Expand',
   '@astryx.button.loading': 'Loading',
   '@astryx.spinner.loading': 'Loading',
+  '@astryx.scrollRegion.label': 'Content',
   '@astryx.chatComposerDrawer.expand': 'Expand {label}',
   '@astryx.chatComposerDrawer.collapse': 'Collapse {label}',
   '@astryx.chatDictationButton.startDictation': 'Start dictation',

package/dist/i18n/generated-locales/pseudo.generated.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pseudo.generated.d.ts","sourceRoot":"","sources":["../../../src/i18n/generated-locales/pseudo.generated.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH,QAAA,MAAM,cAAc,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CA+qBpD,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"pseudo.generated.d.ts","sourceRoot":"","sources":["../../../src/i18n/generated-locales/pseudo.generated.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH,QAAA,MAAM,cAAc,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAgrBpD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/i18n/generated-locales/pseudo.generated.js

@@ -338,6 +338,7 @@ const runtimeCatalog = {
   '@astryx.banner.expand': '⟦Éẋþàñð⟧',
   '@astryx.button.loading': '⟦Łóàðíñĝ⟧',
   '@astryx.spinner.loading': '⟦Łóàðíñĝ⟧',
+  '@astryx.scrollRegion.label': '⟦Çóñţéñţ⟧',
   '@astryx.chatComposerDrawer.expand': '⟦Éẋþàñð {label}⟧',
   '@astryx.chatComposerDrawer.collapse': '⟦Çółłàþšé {label}⟧',
   '@astryx.chatDictationButton.startDictation': '⟦Šţàřţ ðíçţàţíóñ⟧',

package/dist/motion/carryAnimations.d.ts

@@ -0,0 +1,58 @@
+type Writable = Record<string, unknown>;
+/** One animation's state, read before the browser starts it afresh. */
+export interface SavedAnimation {
+    animation: Animation;
+    name: string;
+    target: Element | null;
+    pseudoElement: string | null;
+    values: Writable;
+    effectValues: Writable;
+    timing: EffectTiming | null;
+    keyframes: ComputedKeyframe[] | null;
+    playState: AnimationPlayState;
+    replaceState: AnimationReplaceState;
+}
+/**
+ * Reads one animation's state generically, from what the platform exposes.
+ * That is every accessor with a setter on the animation's and its effect's
+ * prototype chains, every field of the effect's timing, and its keyframes. Only values
+ * that differ from the recreated animation's are written back, so a value the
+ * stylesheet controls stays under its control. A few members are not plain
+ * state and are written in their own step (`ORDERED`). The Animation and
+ * effect objects themselves cannot be carried over: the old ones keep their
+ * listeners and promises.
+ */
+export declare function saveAnimation(animation: Animation): SavedAnimation;
+/**
+ * Puts each state `saved` holds on the CSS animations and transitions of
+ * `root` and its subtree that are not among `survivors`. Each CSS animation
+ * the browser started afresh takes the state of the one it replaces. It is
+ * matched by element, pseudo-element and name, in order, and then by name
+ * alone (an effect script moved to another element or pseudo-element). Each
+ * transition whose animation no longer runs resumes as a script animation in
+ * its state. One started afresh that replaces none is finished: an entrance
+ * that had played and been dropped, or a transition from `@starting-style`.
+ * Script animations are left as they are.
+ */
+export declare function restoreAnimations(root: Element, saved: ReadonlyArray<SavedAnimation>, survivors: ReadonlySet<Animation>): void;
+/** The CSS animations and transitions `saveAnimations` read. */
+export type SavedAnimations = ReadonlyArray<SavedAnimation>;
+/**
+ * Reads the state of every CSS animation and transition of `root` and its
+ * subtree, for `carryAnimations` to give a copy of it.
+ */
+export declare function saveAnimations(root: Element): SavedAnimations;
+/**
+ * Carries on in `copy`, a clone of the root `saved` was read from, now laid
+ * out, the CSS animations and transitions its element ran. A clone starts
+ * each CSS animation again and runs no transition but a `@starting-style`
+ * one. So each CSS animation the clone started takes the state of its
+ * element's, and each transition runs on as a script animation. One the
+ * clone started that its element no longer ran is finished: an entrance that
+ * had played, or a `@starting-style` transition. `copyOf` maps each element
+ * of the cloned subtree to its copy. The element's own animations keep
+ * running, so the copy's take no id or event handler.
+ */
+export declare function carryAnimations(saved: SavedAnimations, copy: Element, copyOf: (element: Element) => Element | null): void;
+export {};
+//# sourceMappingURL=carryAnimations.d.ts.map

package/dist/motion/carryAnimations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"carryAnimations.d.ts","sourceRoot":"","sources":["../../src/motion/carryAnimations.ts"],"names":[],"mappings":"AA+BA,KAAK,QAAQ,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAsDxC,uEAAuE;AACvE,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,SAAS,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,OAAO,GAAG,IAAI,CAAC;IACvB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,MAAM,EAAE,QAAQ,CAAC;IACjB,YAAY,EAAE,QAAQ,CAAC;IACvB,MAAM,EAAE,YAAY,GAAG,IAAI,CAAC;IAC5B,SAAS,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC;IACrC,SAAS,EAAE,kBAAkB,CAAC;IAC9B,YAAY,EAAE,qBAAqB,CAAC;CACrC;AAED;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,SAAS,EAAE,SAAS,GAAG,cAAc,CAyBlE;AAsJD;;;;;;;;;;GAUG;AACH,wBAAgB,iBAAiB,CAC/B,IAAI,EAAE,OAAO,EACb,KAAK,EAAE,aAAa,CAAC,cAAc,CAAC,EACpC,SAAS,EAAE,WAAW,CAAC,SAAS,CAAC,GAChC,IAAI,CA8CN;AAED,gEAAgE;AAChE,MAAM,MAAM,eAAe,GAAG,aAAa,CAAC,cAAc,CAAC,CAAC;AAE5D;;;GAGG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,OAAO,GAAG,eAAe,CAQ7D;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,eAAe,CAC7B,KAAK,EAAE,eAAe,EACtB,IAAI,EAAE,OAAO,EACb,MAAM,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,OAAO,GAAG,IAAI,GAC3C,IAAI,CASN"}