@exsto/ds 0.0.1-rc.2 → 0.0.1-rc.22

package/dist/ui/src/hooks/use-holds-focusable.d.ts

@@ -0,0 +1,3 @@
+import { RefObject } from 'react';
+/** Whether something inside the element can take Tab, kept current as its content changes. */
+export declare const useHoldsFocusable: (ref: RefObject<HTMLElement | null>, enabled?: boolean) => boolean;

package/dist/ui/src/hooks/use-holds-focusable.js

@@ -0,0 +1,33 @@
+import { useEffect, useState } from "react";
+//#region ../ui/src/hooks/use-holds-focusable.ts
+/** What takes Tab inside a region: if any is there, the region is not a stop of its own. */
+var FOCUSABLE_INSIDE = "a[href], button:not(:disabled), input:not([type=\"hidden\"]):not(:disabled), select:not(:disabled), textarea:not(:disabled), summary, [contenteditable], [tabindex]:not([tabindex=\"-1\"])";
+/** Whether something inside the element can take Tab, kept current as its content changes. */
+var useHoldsFocusable = (ref, enabled = true) => {
+	const [holds, setHolds] = useState(false);
+	useEffect(() => {
+		const el = ref.current;
+		if (!el || !enabled) return;
+		const read = () => setHolds(el.querySelector(FOCUSABLE_INSIDE) !== null);
+		read();
+		const observer = new MutationObserver(read);
+		observer.observe(el, {
+			childList: true,
+			subtree: true,
+			attributes: true,
+			attributeFilter: [
+				"tabindex",
+				"disabled",
+				"href"
+			]
+		});
+		return () => {
+			observer.disconnect();
+		};
+	}, [ref, enabled]);
+	return holds;
+};
+//#endregion
+export { useHoldsFocusable };
+
+//# sourceMappingURL=use-holds-focusable.js.map

package/dist/ui/src/hooks/use-holds-focusable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-holds-focusable.js","names":[],"sources":["../../../../../ui/src/hooks/use-holds-focusable.ts"],"sourcesContent":["import { type RefObject, useEffect, useState } from 'react';\n\n/** What takes Tab inside a region: if any is there, the region is not a stop of its own. */\nconst FOCUSABLE_INSIDE =\n  'a[href], button:not(:disabled), input:not([type=\"hidden\"]):not(:disabled), select:not(:disabled), textarea:not(:disabled), summary, [contenteditable], [tabindex]:not([tabindex=\"-1\"])';\n\n/** Whether something inside the element can take Tab, kept current as its content changes. */\nexport const useHoldsFocusable = (ref: RefObject<HTMLElement | null>, enabled = true): boolean => {\n  const [holds, setHolds] = useState(false);\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el || !enabled) {\n      return;\n    }\n    const read = () => setHolds(el.querySelector(FOCUSABLE_INSIDE) !== null);\n    read();\n    const observer = new MutationObserver(read);\n    observer.observe(el, { childList: true, subtree: true, attributes: true, attributeFilter: ['tabindex', 'disabled', 'href'] });\n    return () => {\n      observer.disconnect();\n    };\n  }, [ref, enabled]);\n\n  return holds;\n};\n"],"mappings":";;;AAGA,IAAM,mBACJ;;AAGF,IAAa,qBAAqB,KAAoC,UAAU,SAAkB;CAChG,MAAM,CAAC,OAAO,YAAY,SAAS,KAAK;CAExC,gBAAgB;EACd,MAAM,KAAK,IAAI;EACf,IAAI,CAAC,MAAM,CAAC,SACV;EAEF,MAAM,aAAa,SAAS,GAAG,cAAc,gBAAgB,MAAM,IAAI;EACvE,KAAK;EACL,MAAM,WAAW,IAAI,iBAAiB,IAAI;EAC1C,SAAS,QAAQ,IAAI;GAAE,WAAW;GAAM,SAAS;GAAM,YAAY;GAAM,iBAAiB;IAAC;IAAY;IAAY;GAAM;EAAE,CAAC;EAC5H,aAAa;GACX,SAAS,WAAW;EACtB;CACF,GAAG,CAAC,KAAK,OAAO,CAAC;CAEjB,OAAO;AACT"}

package/dist/ui/src/hooks/use-media-player.js

@@ -0,0 +1,140 @@
+import * as React from "react";
+//#region ../ui/src/hooks/use-media-player.ts
+/** `0:00` for anything that is not a finite, non-negative number, so a loading or errored source still renders. */
+var formatMediaTime = (seconds) => {
+	if (!Number.isFinite(seconds) || seconds < 0) return "0:00";
+	const whole = Math.floor(seconds);
+	const hours = Math.floor(whole / 3600);
+	const minutes = Math.floor(whole % 3600 / 60);
+	const rest = whole % 60;
+	const padded = `${String(rest).padStart(2, "0")}`;
+	if (hours > 0) return `${hours}:${String(minutes).padStart(2, "0")}:${padded}`;
+	return `${minutes}:${padded}`;
+};
+/**
+* Shared playback engine for the Audio and Video players. Both wrap the same
+* HTMLMediaElement API, so the state machine lives here once and each component
+* owns only its own layout and controls.
+*/
+var useMediaPlayer = (options = {}) => {
+	const { onPlay, onPause, onEnded, onTimeUpdate } = options;
+	const refMedia = React.useRef(null);
+	const [state, setState] = React.useState({
+		playing: false,
+		currentTime: 0,
+		duration: 0,
+		volume: 1,
+		muted: false
+	});
+	React.useEffect(() => {
+		const media = refMedia.current;
+		if (!media) return;
+		const syncMeta = () => {
+			setState((previous) => ({
+				...previous,
+				duration: Number.isFinite(media.duration) ? media.duration : 0,
+				volume: media.volume,
+				muted: media.muted
+			}));
+		};
+		const handlePlay = () => {
+			setState((previous) => ({
+				...previous,
+				playing: true
+			}));
+			onPlay?.();
+		};
+		const handlePause = () => {
+			setState((previous) => ({
+				...previous,
+				playing: false
+			}));
+			onPause?.();
+		};
+		const handleEnded = () => {
+			setState((previous) => ({
+				...previous,
+				playing: false
+			}));
+			onEnded?.();
+		};
+		const handleTimeUpdate = () => {
+			setState((previous) => ({
+				...previous,
+				currentTime: media.currentTime
+			}));
+			onTimeUpdate?.(media.currentTime, Number.isFinite(media.duration) ? media.duration : 0);
+		};
+		const handleVolumeChange = () => {
+			setState((previous) => ({
+				...previous,
+				volume: media.volume,
+				muted: media.muted
+			}));
+		};
+		syncMeta();
+		media.addEventListener("loadedmetadata", syncMeta);
+		media.addEventListener("durationchange", syncMeta);
+		media.addEventListener("play", handlePlay);
+		media.addEventListener("pause", handlePause);
+		media.addEventListener("ended", handleEnded);
+		media.addEventListener("timeupdate", handleTimeUpdate);
+		media.addEventListener("volumechange", handleVolumeChange);
+		return () => {
+			media.removeEventListener("loadedmetadata", syncMeta);
+			media.removeEventListener("durationchange", syncMeta);
+			media.removeEventListener("play", handlePlay);
+			media.removeEventListener("pause", handlePause);
+			media.removeEventListener("ended", handleEnded);
+			media.removeEventListener("timeupdate", handleTimeUpdate);
+			media.removeEventListener("volumechange", handleVolumeChange);
+		};
+	}, [
+		onPlay,
+		onPause,
+		onEnded,
+		onTimeUpdate
+	]);
+	const toggle = React.useCallback(() => {
+		const media = refMedia.current;
+		if (!media) return;
+		if (media.paused) {
+			media.play().catch(() => void 0);
+			return;
+		}
+		media.pause();
+	}, []);
+	const seek = React.useCallback((seconds) => {
+		const media = refMedia.current;
+		if (!media || !Number.isFinite(seconds)) return;
+		media.currentTime = seconds;
+		setState((previous) => ({
+			...previous,
+			currentTime: seconds
+		}));
+	}, []);
+	const changeVolume = React.useCallback((volume) => {
+		const media = refMedia.current;
+		if (!media || !Number.isFinite(volume)) return;
+		const next = Math.min(1, Math.max(0, volume));
+		media.volume = next;
+		media.muted = next === 0;
+	}, []);
+	const toggleMute = React.useCallback(() => {
+		const media = refMedia.current;
+		if (!media) return;
+		media.muted = !media.muted;
+	}, []);
+	return {
+		...state,
+		refMedia,
+		toggle,
+		seek,
+		changeVolume,
+		toggleMute
+	};
+};
+//#endregion
+export { formatMediaTime, useMediaPlayer };
+
+//# sourceMappingURL=use-media-player.js.map

package/dist/ui/src/hooks/use-media-player.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-media-player.js","names":[],"sources":["../../../../../ui/src/hooks/use-media-player.ts"],"sourcesContent":["import * as React from 'react';\n\nexport interface IMediaPlayerState {\n  playing: boolean;\n  currentTime: number;\n  duration: number;\n  volume: number;\n  muted: boolean;\n}\n\nexport interface IUseMediaPlayerOptions {\n  onPlay?: () => void;\n  onPause?: () => void;\n  onEnded?: () => void;\n  onTimeUpdate?: (currentTime: number, duration: number) => void;\n}\n\nexport interface IUseMediaPlayerResult<TElement extends HTMLMediaElement> extends IMediaPlayerState {\n  refMedia: React.RefObject<TElement | null>;\n  toggle: () => void;\n  seek: (seconds: number) => void;\n  changeVolume: (volume: number) => void;\n  toggleMute: () => void;\n}\n\n/** `0:00` for anything that is not a finite, non-negative number, so a loading or errored source still renders. */\nexport const formatMediaTime = (seconds: number): string => {\n  if (!Number.isFinite(seconds) || seconds < 0) {\n    return '0:00';\n  }\n  const whole = Math.floor(seconds);\n  const hours = Math.floor(whole / 3600);\n  const minutes = Math.floor((whole % 3600) / 60);\n  const rest = whole % 60;\n  const padded = `${String(rest).padStart(2, '0')}`;\n  if (hours > 0) {\n    return `${hours}:${String(minutes).padStart(2, '0')}:${padded}`;\n  }\n  return `${minutes}:${padded}`;\n};\n\n/**\n * Shared playback engine for the Audio and Video players. Both wrap the same\n * HTMLMediaElement API, so the state machine lives here once and each component\n * owns only its own layout and controls.\n */\nexport const useMediaPlayer = <TElement extends HTMLMediaElement>(options: IUseMediaPlayerOptions = {}): IUseMediaPlayerResult<TElement> => {\n  const { onPlay, onPause, onEnded, onTimeUpdate } = options;\n  const refMedia = React.useRef<TElement | null>(null);\n  const [state, setState] = React.useState<IMediaPlayerState>({\n    playing: false,\n    currentTime: 0,\n    duration: 0,\n    volume: 1,\n    muted: false,\n  });\n\n  React.useEffect(() => {\n    const media = refMedia.current;\n    if (!media) {\n      return;\n    }\n\n    const syncMeta = () => {\n      setState((previous) => ({\n        ...previous,\n        duration: Number.isFinite(media.duration) ? media.duration : 0,\n        volume: media.volume,\n        muted: media.muted,\n      }));\n    };\n    const handlePlay = () => {\n      setState((previous) => ({ ...previous, playing: true }));\n      onPlay?.();\n    };\n    const handlePause = () => {\n      setState((previous) => ({ ...previous, playing: false }));\n      onPause?.();\n    };\n    const handleEnded = () => {\n      setState((previous) => ({ ...previous, playing: false }));\n      onEnded?.();\n    };\n    const handleTimeUpdate = () => {\n      setState((previous) => ({ ...previous, currentTime: media.currentTime }));\n      onTimeUpdate?.(media.currentTime, Number.isFinite(media.duration) ? media.duration : 0);\n    };\n    const handleVolumeChange = () => {\n      setState((previous) => ({ ...previous, volume: media.volume, muted: media.muted }));\n    };\n\n    syncMeta();\n    media.addEventListener('loadedmetadata', syncMeta);\n    media.addEventListener('durationchange', syncMeta);\n    media.addEventListener('play', handlePlay);\n    media.addEventListener('pause', handlePause);\n    media.addEventListener('ended', handleEnded);\n    media.addEventListener('timeupdate', handleTimeUpdate);\n    media.addEventListener('volumechange', handleVolumeChange);\n\n    return () => {\n      media.removeEventListener('loadedmetadata', syncMeta);\n      media.removeEventListener('durationchange', syncMeta);\n      media.removeEventListener('play', handlePlay);\n      media.removeEventListener('pause', handlePause);\n      media.removeEventListener('ended', handleEnded);\n      media.removeEventListener('timeupdate', handleTimeUpdate);\n      media.removeEventListener('volumechange', handleVolumeChange);\n    };\n  }, [onPlay, onPause, onEnded, onTimeUpdate]);\n\n  const toggle = React.useCallback(() => {\n    const media = refMedia.current;\n    if (!media) {\n      return;\n    }\n    if (media.paused) {\n      // Autoplay policies reject this when the gesture is not trusted; the pause\n      // state is already correct, so swallowing keeps the UI truthful.\n      void media.play().catch(() => undefined);\n      return;\n    }\n    media.pause();\n  }, []);\n\n  const seek = React.useCallback((seconds: number) => {\n    const media = refMedia.current;\n    if (!media || !Number.isFinite(seconds)) {\n      return;\n    }\n    media.currentTime = seconds;\n    setState((previous) => ({ ...previous, currentTime: seconds }));\n  }, []);\n\n  const changeVolume = React.useCallback((volume: number) => {\n    const media = refMedia.current;\n    if (!media || !Number.isFinite(volume)) {\n      return;\n    }\n    const next = Math.min(1, Math.max(0, volume));\n    media.volume = next;\n    media.muted = next === 0;\n  }, []);\n\n  const toggleMute = React.useCallback(() => {\n    const media = refMedia.current;\n    if (!media) {\n      return;\n    }\n    media.muted = !media.muted;\n  }, []);\n\n  return { ...state, refMedia, toggle, seek, changeVolume, toggleMute };\n};\n"],"mappings":"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"}

package/dist/ui/src/hooks/use-merged-refs.js

@@ -0,0 +1,18 @@
+import { useCallback } from "react";
+//#region ../ui/src/hooks/use-merged-refs.ts
+var assignRef = (ref, value) => {
+	if (typeof ref === "function") ref(value);
+	else if (ref !== null) ref.current = value;
+};
+var mergeRefs = (...refs) => {
+	return (node) => {
+		for (const ref of refs) if (ref) assignRef(ref, node);
+	};
+};
+var useMergedRefs = (...refs) => {
+	return useCallback(mergeRefs(...refs), [...refs]);
+};
+//#endregion
+export { useMergedRefs };
+
+//# sourceMappingURL=use-merged-refs.js.map

package/dist/ui/src/hooks/use-merged-refs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-merged-refs.js","names":[],"sources":["../../../../../ui/src/hooks/use-merged-refs.ts"],"sourcesContent":["import { type Ref, type RefCallback, useCallback } from 'react';\n\ntype TPossibleRef<T> = Ref<T> | undefined;\n\nconst assignRef = <T>(ref: TPossibleRef<T>, value: T) => {\n  if (typeof ref === 'function') {\n    ref(value);\n  } else if (ref !== null) {\n    // Using type assertion to RefObject since we know it's not null\n    (ref as { current: T }).current = value;\n  }\n};\n\nconst mergeRefs = <T>(...refs: TPossibleRef<T>[]) => {\n  return (node: T) => {\n    for (const ref of refs) {\n      if (ref) {\n        assignRef(ref, node);\n      }\n    }\n  };\n};\n\nexport const useMergedRefs = <T>(...refs: TPossibleRef<T>[]) => {\n  return useCallback(mergeRefs(...refs), [...refs]) as RefCallback<T>;\n};\n"],"mappings":";;AAIA,IAAM,aAAgB,KAAsB,UAAa;CACvD,IAAI,OAAO,QAAQ,YACjB,IAAI,KAAK;MACJ,IAAI,QAAQ,MAEjB,IAAwB,UAAU;AAEtC;AAEA,IAAM,aAAgB,GAAG,SAA4B;CACnD,QAAQ,SAAY;EAClB,KAAK,MAAM,OAAO,MAChB,IAAI,KACF,UAAU,KAAK,IAAI;CAGzB;AACF;AAEA,IAAa,iBAAoB,GAAG,SAA4B;CAC9D,OAAO,YAAY,UAAU,GAAG,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC;AAClD"}

package/dist/ui/src/hooks/use-mobile.js

@@ -0,0 +1,20 @@
+import * as React from "react";
+//#region ../ui/src/hooks/use-mobile.ts
+var MOBILE_BREAKPOINT = 768;
+var useIsMobile = () => {
+	const [isMobile, setIsMobile] = React.useState(void 0);
+	React.useEffect(() => {
+		const mql = window.matchMedia(`(max-width: 767px)`);
+		const onChange = () => {
+			setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		};
+		mql.addEventListener("change", onChange);
+		setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		return () => mql.removeEventListener("change", onChange);
+	}, []);
+	return !!isMobile;
+};
+//#endregion
+export { useIsMobile };
+
+//# sourceMappingURL=use-mobile.js.map

package/dist/ui/src/hooks/use-mobile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mobile.js","names":[],"sources":["../../../../../ui/src/hooks/use-mobile.ts"],"sourcesContent":["import * as React from 'react';\n\nconst MOBILE_BREAKPOINT = 768;\n\nexport const useIsMobile = () => {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n    };\n    mql.addEventListener('change', onChange);\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n    return () => mql.removeEventListener('change', onChange);\n  }, []);\n\n  return !!isMobile;\n};\n"],"mappings":";;AAEA,IAAM,oBAAoB;AAE1B,IAAa,oBAAoB;CAC/B,MAAM,CAAC,UAAU,eAAe,MAAM,SAA8B,KAAA,CAAS;CAE7E,MAAM,gBAAgB;EACpB,MAAM,MAAM,OAAO,WAAW,oBAAyC;EACvE,MAAM,iBAAiB;GACrB,YAAY,OAAO,aAAa,iBAAiB;EACnD;EACA,IAAI,iBAAiB,UAAU,QAAQ;EACvC,YAAY,OAAO,aAAa,iBAAiB;EACjD,aAAa,IAAI,oBAAoB,UAAU,QAAQ;CACzD,GAAG,CAAC,CAAC;CAEL,OAAO,CAAC,CAAC;AACX"}

package/dist/ui/src/index.d.ts

@@ -1,4 +1,11 @@
+export * from './components/edyn/animated-number';
 export * from './components/edyn/audio-player';
+export * from './components/edyn/date-range-picker';
+export * from './components/edyn/initials-avatar';
+export * from './components/edyn/multi-select';
+export * from './components/edyn/presence';
+export * from './components/edyn/progress-line';
+export * from './components/edyn/rich-text-content';
 export * from './components/edyn/video-player';
 export * from './components/ui/accordion';
 export * from './components/ui/alert';
@@ -65,4 +72,5 @@ export * from './components/ui/tooltip';
 export * from './hooks/use-media-player';
 export * from './hooks/use-merged-refs';
 export * from './hooks/use-mobile';
+export { POPUP_FRAME_CLASS, POPUP_GROUP_LABEL_CLASS, POPUP_ITEM_INDICATOR_CLASS, POPUP_LAYER_CLASS, POPUP_LIST_HEIGHT_CLASS, POPUP_LIST_WIDTH_CLASS, popupItemClass, type TPopupItemFlavor, } from './lib/popup-list';
 export { cn } from './lib/utils';

package/dist/ui/src/lib/first-weekday.d.ts

@@ -0,0 +1,6 @@
+export type TWeekday = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+/**
+ * The weekday a locale starts its week on, 0 for Sunday to 6 for Saturday, from Intl, so en-GB starts on Monday and en-US on
+ * Sunday with no locale data of our own shipped. A browser without week info gets the region's usual start.
+ */
+export declare const firstWeekdayOf: (locale: string) => TWeekday;

package/dist/ui/src/lib/first-weekday.js

@@ -0,0 +1,34 @@
+//#region ../ui/src/lib/first-weekday.ts
+var SUNDAY_FIRST = /* @__PURE__ */ new Set([
+	"US",
+	"CA",
+	"MX",
+	"BR",
+	"JP",
+	"IL",
+	"IN",
+	"PH",
+	"ZA",
+	"KR",
+	"TW",
+	"HK",
+	"SA"
+]);
+/**
+* The weekday a locale starts its week on, 0 for Sunday to 6 for Saturday, from Intl, so en-GB starts on Monday and en-US on
+* Sunday with no locale data of our own shipped. A browser without week info gets the region's usual start.
+*/
+var firstWeekdayOf = (locale) => {
+	try {
+		const info = new Intl.Locale(locale);
+		const first = info.getWeekInfo?.().firstDay ?? info.weekInfo?.firstDay;
+		if (first !== void 0) return first % 7;
+		return SUNDAY_FIRST.has(info.region ?? "") ? 0 : 1;
+	} catch {
+		return 0;
+	}
+};
+//#endregion
+export { firstWeekdayOf };
+
+//# sourceMappingURL=first-weekday.js.map

package/dist/ui/src/lib/first-weekday.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"first-weekday.js","names":[],"sources":["../../../../../ui/src/lib/first-weekday.ts"],"sourcesContent":["export type TWeekday = 0 | 1 | 2 | 3 | 4 | 5 | 6;\n\n// Regions whose week starts on a Sunday, for a browser that cannot say (Intl week info is not everywhere yet).\nconst SUNDAY_FIRST = new Set(['US', 'CA', 'MX', 'BR', 'JP', 'IL', 'IN', 'PH', 'ZA', 'KR', 'TW', 'HK', 'SA']);\n\n/**\n * The weekday a locale starts its week on, 0 for Sunday to 6 for Saturday, from Intl, so en-GB starts on Monday and en-US on\n * Sunday with no locale data of our own shipped. A browser without week info gets the region's usual start.\n */\nexport const firstWeekdayOf = (locale: string): TWeekday => {\n  try {\n    const info = new Intl.Locale(locale) as Intl.Locale & { getWeekInfo?: () => { firstDay: number }; weekInfo?: { firstDay: number } };\n    const first = info.getWeekInfo?.().firstDay ?? info.weekInfo?.firstDay;\n    if (first !== undefined) {\n      // Intl counts Monday as 1 to Sunday as 7; the calendar counts Sunday as 0.\n      return (first % 7) as TWeekday;\n    }\n    return SUNDAY_FIRST.has(info.region ?? '') ? 0 : 1;\n  } catch {\n    return 0;\n  }\n};\n"],"mappings":";AAGA,IAAM,+BAAe,IAAI,IAAI;CAAC;CAAM;CAAM;CAAM;CAAM;CAAM;CAAM;CAAM;CAAM;CAAM;CAAM;CAAM;CAAM;AAAI,CAAC;;;;;AAM3G,IAAa,kBAAkB,WAA6B;CAC1D,IAAI;EACF,MAAM,OAAO,IAAI,KAAK,OAAO,MAAM;EACnC,MAAM,QAAQ,KAAK,cAAc,CAAC,CAAC,YAAY,KAAK,UAAU;EAC9D,IAAI,UAAU,KAAA,GAEZ,OAAQ,QAAQ;EAElB,OAAO,aAAa,IAAI,KAAK,UAAU,EAAE,IAAI,IAAI;CACnD,QAAQ;EACN,OAAO;CACT;AACF"}

package/dist/ui/src/lib/focus-guards.d.ts

@@ -0,0 +1,2 @@
+/** Call from a popup's content component: while it is mounted, the focus guards around popups are not aria-hidden. */
+export declare const useExposedFocusGuards: () => void;

package/dist/ui/src/lib/focus-guards.js

@@ -0,0 +1,44 @@
+import { useEffect } from "react";
+//#region ../ui/src/lib/focus-guards.ts
+/**
+* Base UI's focus-trap sentinels around an open popup are focusable and `aria-hidden`, which axe's aria-hidden-focus rule
+* reports. `useExposedFocusGuards` takes the `aria-hidden` off them while a popup is open; one observer serves every open popup.
+*/
+var HIDDEN_GUARD = "[data-base-ui-focus-guard][aria-hidden]";
+/** Takes `aria-hidden` off the guards in a subtree, or off the node itself when it is one. */
+var expose = (root) => {
+	if (root instanceof Element && root.matches(HIDDEN_GUARD)) root.removeAttribute("aria-hidden");
+	for (const guard of root.querySelectorAll(HIDDEN_GUARD)) guard.removeAttribute("aria-hidden");
+};
+var users = 0;
+var observer;
+var start = () => {
+	users += 1;
+	expose(document);
+	if (observer !== void 0) return;
+	observer = new MutationObserver((records) => {
+		for (const record of records) for (const added of record.addedNodes) if (added instanceof Element) expose(added);
+	});
+	observer.observe(document.body, {
+		childList: true,
+		subtree: true
+	});
+};
+var stop = () => {
+	users -= 1;
+	if (users === 0) {
+		observer?.disconnect();
+		observer = void 0;
+	}
+};
+/** Call from a popup's content component: while it is mounted, the focus guards around popups are not aria-hidden. */
+var useExposedFocusGuards = () => {
+	useEffect(() => {
+		start();
+		return stop;
+	}, []);
+};
+//#endregion
+export { useExposedFocusGuards };
+
+//# sourceMappingURL=focus-guards.js.map

package/dist/ui/src/lib/focus-guards.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-guards.js","names":[],"sources":["../../../../../ui/src/lib/focus-guards.ts"],"sourcesContent":["import { useEffect } from 'react';\n\n/**\n * Base UI's focus-trap sentinels around an open popup are focusable and `aria-hidden`, which axe's aria-hidden-focus rule\n * reports. `useExposedFocusGuards` takes the `aria-hidden` off them while a popup is open; one observer serves every open popup.\n */\n\nconst HIDDEN_GUARD = '[data-base-ui-focus-guard][aria-hidden]';\n\n/** Takes `aria-hidden` off the guards in a subtree, or off the node itself when it is one. */\nconst expose = (root: ParentNode | Element): void => {\n  if (root instanceof Element && root.matches(HIDDEN_GUARD)) {\n    root.removeAttribute('aria-hidden');\n  }\n  for (const guard of root.querySelectorAll(HIDDEN_GUARD)) {\n    guard.removeAttribute('aria-hidden');\n  }\n};\n\nlet users = 0;\nlet observer: MutationObserver | undefined;\n\nconst start = (): void => {\n  users += 1;\n  expose(document);\n  if (observer !== undefined) {\n    return;\n  }\n  observer = new MutationObserver((records) => {\n    for (const record of records) {\n      for (const added of record.addedNodes) {\n        if (added instanceof Element) {\n          expose(added);\n        }\n      }\n    }\n  });\n  observer.observe(document.body, { childList: true, subtree: true });\n};\n\nconst stop = (): void => {\n  users -= 1;\n  if (users === 0) {\n    observer?.disconnect();\n    observer = undefined;\n  }\n};\n\n/** Call from a popup's content component: while it is mounted, the focus guards around popups are not aria-hidden. */\nexport const useExposedFocusGuards = (): void => {\n  useEffect(() => {\n    start();\n    return stop;\n  }, []);\n};\n"],"mappings":";;;;;;AAOA,IAAM,eAAe;;AAGrB,IAAM,UAAU,SAAqC;CACnD,IAAI,gBAAgB,WAAW,KAAK,QAAQ,YAAY,GACtD,KAAK,gBAAgB,aAAa;CAEpC,KAAK,MAAM,SAAS,KAAK,iBAAiB,YAAY,GACpD,MAAM,gBAAgB,aAAa;AAEvC;AAEA,IAAI,QAAQ;AACZ,IAAI;AAEJ,IAAM,cAAoB;CACxB,SAAS;CACT,OAAO,QAAQ;CACf,IAAI,aAAa,KAAA,GACf;CAEF,WAAW,IAAI,kBAAkB,YAAY;EAC3C,KAAK,MAAM,UAAU,SACnB,KAAK,MAAM,SAAS,OAAO,YACzB,IAAI,iBAAiB,SACnB,OAAO,KAAK;CAIpB,CAAC;CACD,SAAS,QAAQ,SAAS,MAAM;EAAE,WAAW;EAAM,SAAS;CAAK,CAAC;AACpE;AAEA,IAAM,aAAmB;CACvB,SAAS;CACT,IAAI,UAAU,GAAG;EACf,UAAU,WAAW;EACrB,WAAW,KAAA;CACb;AACF;;AAGA,IAAa,8BAAoC;CAC/C,gBAAgB;EACd,MAAM;EACN,OAAO;CACT,GAAG,CAAC,CAAC;AACP"}

package/dist/ui/src/lib/focus-ring.test.d.ts

@@ -0,0 +1,8 @@
+/**
+ * The default focus ring must be visible, not just present. WCAG 1.4.11 asks 3:1 for the
+ * parts of a control that show its state, and the ring is drawn outside the control, on
+ * whatever surface it sits on. This reads the real tokens.css, converts OKLCH to sRGB and
+ * measures the default --ring against every surface a control sits on, in both themes.
+ * An app that sets its own --ring (a brand) is outside this: it owns that colour.
+ */
+export {};

package/dist/ui/src/lib/popup-list.d.ts

@@ -0,0 +1,75 @@
+/**
+ * The one look for a list in a popup or a menu: the command palette, Select,
+ * Combobox, MultiSelect and the dropdown menus.
+ *
+ * These lists used to disagree with each other in every detail that shows:
+ * three different radii, two different paddings, a grey fill for the highlight
+ * in one and the accent in another, and the chosen item marked by a check on
+ * the left in Select and on the right in the menus. Picking something from one
+ * list then felt like a different product from picking something in the next.
+ *
+ * It lives here as classes rather than as a stylesheet so a caller's own
+ * className still wins: an unlayered rule would beat every utility, including
+ * the one someone passes for a single list.
+ *
+ * ONE ITEM: transparent at rest, 32px tall, 6px radius (--radius-sm), 6px by
+ * 8px of padding, text-sm, its own icons 16px and muted. Under the pointer or
+ * the keyboard it takes one translucent fill of the text colour, and its icons
+ * the text colour. Chosen is medium weight with a check at the END, never a
+ * fill, so "where I am" and "what I picked" can be told apart at a glance.
+ */
+/**
+ * Which primitive renders the item, because the two disagree about the same
+ * attribute names in a way that silently breaks the styling:
+ *
+ * - cmdk writes `data-selected="false"` and `data-disabled="false"` on items
+ *   that are neither, so a bare `data-selected:` variant matches EVERY item and
+ *   highlights the whole list. Its states have to be matched by value.
+ * - Base UI omits the attribute instead, so presence is the test there. That
+ *   needs the BRACKET form for `selected`: shadcn redefines the bare
+ *   `data-selected:` variant to match only data-selected="true" (for the
+ *   calendar), and Base UI writes it as an empty string, so the bare form
+ *   compiles and silently never applies. `highlighted` and `disabled` have no
+ *   such override, so those stay bare.
+ * - And the same name means different things: cmdk's `data-selected` is the
+ *   keyboard cursor, Base UI's is the chosen value. In cmdk the chosen state is
+ *   `data-checked`, which the DS's own CommandItem sets.
+ */
+export type TPopupItemFlavor = 'base-ui' | 'cmdk';
+/** The shared item look. `checkable` leaves room at the end for the check. */
+export declare const popupItemClass: (flavor?: TPopupItemFlavor, checkable?: boolean) => string;
+/**
+ * The check's slot, at the end of the item and the same size whether or not the
+ * check is in it, so a list does not shift as the choice moves.
+ */
+export declare const POPUP_ITEM_INDICATOR_CLASS = "pointer-events-none absolute right-2 flex size-4 items-center justify-center text-foreground [&_svg]:size-3.5";
+/** A group's heading in any of these lists. */
+export declare const POPUP_GROUP_LABEL_CLASS = "px-2 py-1.5 text-xs font-medium text-muted-foreground";
+/**
+ * The frame of every popup that holds a list: Select, Combobox, MultiSelect and the menus. One radius, and one outline, the
+ * 1px ring of the text colour at 10% that the menus, Popover and the dialogs already wear. It is a ring and not a border so
+ * the frame takes no room: the popup is exactly as tall as its rows, which is what lets a list end on a whole row (see
+ * POPUP_LIST_HEIGHT_CLASS). Select used to draw a 14px border, Combobox a 10px one, and the menus a ring.
+ *
+ * `outline-none` is the popup's own focus outline, switched off: a popup is a container, and the highlighted row is where
+ * focus is shown.
+ */
+export declare const POPUP_FRAME_CLASS = "rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-none";
+/**
+ * How wide a popup is, for every popup alike: never narrower than the control it opens from (and never under 8rem, for a
+ * control that is only an icon), as wide as its longest row up to 28rem or what the window leaves from the control's start
+ * (the popup is aligned to that start), whichever is less. A control wider than that cap keeps its own width. Longer rows
+ * are cut by their item, they do not widen the popup.
+ *
+ * The popups used to disagree: the menus were the control's width, MultiSelect at least 16rem and at most 24rem, Combobox
+ * followed the control, and an app's command palette in a popover was 18rem whatever it held.
+ */
+export declare const POPUP_LIST_WIDTH_CLASS = "w-max min-w-[max(8rem,var(--anchor-width))] max-w-[max(var(--anchor-width),min(28rem,var(--available-width)))]";
+/**
+ * How tall the scrolling part of a popup grows: eight rows, or the whole rows the positioner's room allows, ending on a row.
+ * The 0.25rem of air above and below is its own margin (`my-1`), so the list inside takes `px-1` and no vertical padding.
+ * PopupListScroll is the ScrollArea ready made, and counts rows only (`--popup-list-cap`). See docs/architecture.md.
+ */
+export declare const POPUP_LIST_HEIGHT_CLASS = "my-1 min-h-0 max-h-[var(--popup-list-cap,min(16rem,round(down,var(--available-height,100dvh)_-_0.5rem,2rem)))]";
+/** Where a popup is drawn: `z-60` on its Positioner, above the `z-50` of the Sheet, Dialog or Drawer it opens from. */
+export declare const POPUP_LAYER_CLASS = "z-60";

package/dist/ui/src/lib/popup-list.js

@@ -0,0 +1,48 @@
+import { cn } from "./utils.js";
+//#region ../ui/src/lib/popup-list.ts
+var ITEM_BASE = "relative flex min-h-8 cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-foreground outline-none select-none [&>svg]:pointer-events-none [&>svg]:shrink-0 [&>svg]:text-muted-foreground [&>svg:not([class*='size-'])]:size-4";
+var ITEM_STATES = {
+	"base-ui": "data-highlighted:bg-foreground/6 data-highlighted:[&>svg]:text-foreground data-[selected]:font-medium data-disabled:pointer-events-none data-disabled:opacity-50",
+	cmdk: "data-[selected=true]:bg-foreground/6 data-[selected=true]:[&>svg]:text-foreground data-[checked=true]:font-medium data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50"
+};
+/** The shared item look. `checkable` leaves room at the end for the check. */
+var popupItemClass = (flavor = "base-ui", checkable = false) => cn(ITEM_BASE, ITEM_STATES[flavor], checkable && "pr-8");
+/**
+* The check's slot, at the end of the item and the same size whether or not the
+* check is in it, so a list does not shift as the choice moves.
+*/
+var POPUP_ITEM_INDICATOR_CLASS = "pointer-events-none absolute right-2 flex size-4 items-center justify-center text-foreground [&_svg]:size-3.5";
+/** A group's heading in any of these lists. */
+var POPUP_GROUP_LABEL_CLASS = "px-2 py-1.5 text-xs font-medium text-muted-foreground";
+/**
+* The frame of every popup that holds a list: Select, Combobox, MultiSelect and the menus. One radius, and one outline, the
+* 1px ring of the text colour at 10% that the menus, Popover and the dialogs already wear. It is a ring and not a border so
+* the frame takes no room: the popup is exactly as tall as its rows, which is what lets a list end on a whole row (see
+* POPUP_LIST_HEIGHT_CLASS). Select used to draw a 14px border, Combobox a 10px one, and the menus a ring.
+*
+* `outline-none` is the popup's own focus outline, switched off: a popup is a container, and the highlighted row is where
+* focus is shown.
+*/
+var POPUP_FRAME_CLASS = "rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-none";
+/**
+* How wide a popup is, for every popup alike: never narrower than the control it opens from (and never under 8rem, for a
+* control that is only an icon), as wide as its longest row up to 28rem or what the window leaves from the control's start
+* (the popup is aligned to that start), whichever is less. A control wider than that cap keeps its own width. Longer rows
+* are cut by their item, they do not widen the popup.
+*
+* The popups used to disagree: the menus were the control's width, MultiSelect at least 16rem and at most 24rem, Combobox
+* followed the control, and an app's command palette in a popover was 18rem whatever it held.
+*/
+var POPUP_LIST_WIDTH_CLASS = "w-max min-w-[max(8rem,var(--anchor-width))] max-w-[max(var(--anchor-width),min(28rem,var(--available-width)))]";
+/**
+* How tall the scrolling part of a popup grows: eight rows, or the whole rows the positioner's room allows, ending on a row.
+* The 0.25rem of air above and below is its own margin (`my-1`), so the list inside takes `px-1` and no vertical padding.
+* PopupListScroll is the ScrollArea ready made, and counts rows only (`--popup-list-cap`). See docs/architecture.md.
+*/
+var POPUP_LIST_HEIGHT_CLASS = "my-1 min-h-0 max-h-[var(--popup-list-cap,min(16rem,round(down,var(--available-height,100dvh)_-_0.5rem,2rem)))]";
+/** Where a popup is drawn: `z-60` on its Positioner, above the `z-50` of the Sheet, Dialog or Drawer it opens from. */
+var POPUP_LAYER_CLASS = "z-60";
+//#endregion
+export { POPUP_FRAME_CLASS, POPUP_GROUP_LABEL_CLASS, POPUP_ITEM_INDICATOR_CLASS, POPUP_LAYER_CLASS, POPUP_LIST_HEIGHT_CLASS, POPUP_LIST_WIDTH_CLASS, popupItemClass };
+
+//# sourceMappingURL=popup-list.js.map

package/dist/ui/src/lib/popup-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popup-list.js","names":[],"sources":["../../../../../ui/src/lib/popup-list.ts"],"sourcesContent":["import { cn } from '@edyn/ui/lib/utils';\n\n/**\n * The one look for a list in a popup or a menu: the command palette, Select,\n * Combobox, MultiSelect and the dropdown menus.\n *\n * These lists used to disagree with each other in every detail that shows:\n * three different radii, two different paddings, a grey fill for the highlight\n * in one and the accent in another, and the chosen item marked by a check on\n * the left in Select and on the right in the menus. Picking something from one\n * list then felt like a different product from picking something in the next.\n *\n * It lives here as classes rather than as a stylesheet so a caller's own\n * className still wins: an unlayered rule would beat every utility, including\n * the one someone passes for a single list.\n *\n * ONE ITEM: transparent at rest, 32px tall, 6px radius (--radius-sm), 6px by\n * 8px of padding, text-sm, its own icons 16px and muted. Under the pointer or\n * the keyboard it takes one translucent fill of the text colour, and its icons\n * the text colour. Chosen is medium weight with a check at the END, never a\n * fill, so \"where I am\" and \"what I picked\" can be told apart at a glance.\n */\n\n/**\n * Which primitive renders the item, because the two disagree about the same\n * attribute names in a way that silently breaks the styling:\n *\n * - cmdk writes `data-selected=\"false\"` and `data-disabled=\"false\"` on items\n *   that are neither, so a bare `data-selected:` variant matches EVERY item and\n *   highlights the whole list. Its states have to be matched by value.\n * - Base UI omits the attribute instead, so presence is the test there. That\n *   needs the BRACKET form for `selected`: shadcn redefines the bare\n *   `data-selected:` variant to match only data-selected=\"true\" (for the\n *   calendar), and Base UI writes it as an empty string, so the bare form\n *   compiles and silently never applies. `highlighted` and `disabled` have no\n *   such override, so those stay bare.\n * - And the same name means different things: cmdk's `data-selected` is the\n *   keyboard cursor, Base UI's is the chosen value. In cmdk the chosen state is\n *   `data-checked`, which the DS's own CommandItem sets.\n */\nexport type TPopupItemFlavor = 'base-ui' | 'cmdk';\n\nconst ITEM_BASE =\n  \"relative flex min-h-8 cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-foreground outline-none select-none [&>svg]:pointer-events-none [&>svg]:shrink-0 [&>svg]:text-muted-foreground [&>svg:not([class*='size-'])]:size-4\";\n\nconst ITEM_STATES: Record<TPopupItemFlavor, string> = {\n  'base-ui':\n    'data-highlighted:bg-foreground/6 data-highlighted:[&>svg]:text-foreground data-[selected]:font-medium data-disabled:pointer-events-none data-disabled:opacity-50',\n  cmdk: 'data-[selected=true]:bg-foreground/6 data-[selected=true]:[&>svg]:text-foreground data-[checked=true]:font-medium data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',\n};\n\n/** The shared item look. `checkable` leaves room at the end for the check. */\nexport const popupItemClass = (flavor: TPopupItemFlavor = 'base-ui', checkable = false): string =>\n  cn(ITEM_BASE, ITEM_STATES[flavor], checkable && 'pr-8');\n\n/**\n * The check's slot, at the end of the item and the same size whether or not the\n * check is in it, so a list does not shift as the choice moves.\n */\nexport const POPUP_ITEM_INDICATOR_CLASS =\n  'pointer-events-none absolute right-2 flex size-4 items-center justify-center text-foreground [&_svg]:size-3.5';\n\n/** A group's heading in any of these lists. */\nexport const POPUP_GROUP_LABEL_CLASS = 'px-2 py-1.5 text-xs font-medium text-muted-foreground';\n\n/**\n * The frame of every popup that holds a list: Select, Combobox, MultiSelect and the menus. One radius, and one outline, the\n * 1px ring of the text colour at 10% that the menus, Popover and the dialogs already wear. It is a ring and not a border so\n * the frame takes no room: the popup is exactly as tall as its rows, which is what lets a list end on a whole row (see\n * POPUP_LIST_HEIGHT_CLASS). Select used to draw a 14px border, Combobox a 10px one, and the menus a ring.\n *\n * `outline-none` is the popup's own focus outline, switched off: a popup is a container, and the highlighted row is where\n * focus is shown.\n */\nexport const POPUP_FRAME_CLASS = 'rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-none';\n\n/**\n * How wide a popup is, for every popup alike: never narrower than the control it opens from (and never under 8rem, for a\n * control that is only an icon), as wide as its longest row up to 28rem or what the window leaves from the control's start\n * (the popup is aligned to that start), whichever is less. A control wider than that cap keeps its own width. Longer rows\n * are cut by their item, they do not widen the popup.\n *\n * The popups used to disagree: the menus were the control's width, MultiSelect at least 16rem and at most 24rem, Combobox\n * followed the control, and an app's command palette in a popover was 18rem whatever it held.\n */\nexport const POPUP_LIST_WIDTH_CLASS =\n  'w-max min-w-[max(8rem,var(--anchor-width))] max-w-[max(var(--anchor-width),min(28rem,var(--available-width)))]';\n\n/**\n * How tall the scrolling part of a popup grows: eight rows, or the whole rows the positioner's room allows, ending on a row.\n * The 0.25rem of air above and below is its own margin (`my-1`), so the list inside takes `px-1` and no vertical padding.\n * PopupListScroll is the ScrollArea ready made, and counts rows only (`--popup-list-cap`). See docs/architecture.md.\n */\nexport const POPUP_LIST_HEIGHT_CLASS =\n  'my-1 min-h-0 max-h-[var(--popup-list-cap,min(16rem,round(down,var(--available-height,100dvh)_-_0.5rem,2rem)))]';\n\n/** Where a popup is drawn: `z-60` on its Positioner, above the `z-50` of the Sheet, Dialog or Drawer it opens from. */\nexport const POPUP_LAYER_CLASS = 'z-60';\n"],"mappings":";;AA0CA,IAAM,YACJ;AAEF,IAAM,cAAgD;CACpD,WACE;CACF,MAAM;AACR;;AAGA,IAAa,kBAAkB,SAA2B,WAAW,YAAY,UAC/E,GAAG,WAAW,YAAY,SAAS,aAAa,MAAM;;;;;AAMxD,IAAa,6BACX;;AAGF,IAAa,0BAA0B;;;;;;;;;;AAWvC,IAAa,oBAAoB;;;;;;;;;;AAWjC,IAAa,yBACX;;;;;;AAOF,IAAa,0BACX;;AAGF,IAAa,oBAAoB"}

package/dist/ui/src/lib/popup-list.test.d.ts

@@ -0,0 +1,10 @@
+/**
+ * The shared popup list style, and the trap it exists to keep closed.
+ *
+ * PATH TAKEN: the look itself is measured in a real browser across the lists and
+ * both themes (e2e/popup-lists.spec.ts), because computed padding and radius are
+ * the only honest proof of "one look". What is checked here is the part a
+ * stylesheet cannot: that each list takes its item look from one place, and that
+ * the two primitives' disagreeing attribute conventions are matched correctly.
+ */
+export {};

package/dist/ui/src/lib/utils.js

@@ -0,0 +1,21 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+//#region ../ui/src/lib/utils.ts
+var cn = (...inputs) => twMerge(clsx(inputs));
+/**
+* Normalise a size prop to a CSS length.
+*
+* Bare numbers become px, which is also what a bare numeric *string* means: an
+* element attribute arrives as a string, so `width="480"` and `width={480}` have
+* to land on the same value. Anything with a unit, a percentage or a keyword
+* passes through untouched.
+*/
+var cssLength = (value) => {
+	if (value == null || value === "") return;
+	if (typeof value === "number") return Number.isFinite(value) ? `${value}px` : void 0;
+	return /^-?\d*\.?\d+$/.test(value.trim()) ? `${value.trim()}px` : value;
+};
+//#endregion
+export { cn, cssLength };
+
+//# sourceMappingURL=utils.js.map

package/dist/ui/src/lib/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":[],"sources":["../../../../../ui/src/lib/utils.ts"],"sourcesContent":["import type { ClassValue } from 'clsx';\nimport { clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport const cn = (...inputs: ClassValue[]): string => twMerge(clsx(inputs));\n\n/** A CSS length as a component prop: a number is px, a string is used verbatim. */\nexport type TCssLength = number | string;\n\n/**\n * Normalise a size prop to a CSS length.\n *\n * Bare numbers become px, which is also what a bare numeric *string* means: an\n * element attribute arrives as a string, so `width=\"480\"` and `width={480}` have\n * to land on the same value. Anything with a unit, a percentage or a keyword\n * passes through untouched.\n */\nexport const cssLength = (value: TCssLength | null | undefined): string | undefined => {\n  if (value == null || value === '') {\n    return undefined;\n  }\n\n  if (typeof value === 'number') {\n    return Number.isFinite(value) ? `${value}px` : undefined;\n  }\n\n  return /^-?\\d*\\.?\\d+$/.test(value.trim()) ? `${value.trim()}px` : value;\n};\n"],"mappings":";;;AAIA,IAAa,MAAM,GAAG,WAAiC,QAAQ,KAAK,MAAM,CAAC;;;;;;;;;AAa3E,IAAa,aAAa,UAA6D;CACrF,IAAI,SAAS,QAAQ,UAAU,IAC7B;CAGF,IAAI,OAAO,UAAU,UACnB,OAAO,OAAO,SAAS,KAAK,IAAI,GAAG,MAAM,MAAM,KAAA;CAGjD,OAAO,gBAAgB,KAAK,MAAM,KAAK,CAAC,IAAI,GAAG,MAAM,KAAK,EAAE,MAAM;AACpE"}