@torpor/ui 0.4.0 → 1.0.1

package/dist/Tree/index.d.ts

@@ -0,0 +1,262 @@
+import { type SlotRender } from "@torpor/view";
+
+
+interface TreeProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+	/** The value(s) of the expanded TreeItem(s) */
+	expanded: Bindable<string | string[] | undefined>;
+	/** Whether a single TreeItem or multiple TreeItems can be selected at the same time */
+	type?: "single" | "multiple";
+	/** The value of the selected TreeItem, or an array of values if the type is "multiple" */
+	value: Bindable<string | string[] | undefined>;
+	/** If set to true, the user cannot interact with any items in the Tree */
+	disabled?: boolean;
+	/** The aria-label for the root element */
+	ariaLabel?: string | undefined;
+	/**
+	 * Reads the children of an item from the network (or anywhere async) when
+	 * the item is first expanded. Receives a request with `item` (the parent
+	 * item's value). Items load automatically when they set the TreeItem
+	 * `hasChildren` prop; a TreeItem `load` prop overrides this per item.
+	 */
+	load?: Loader<any, TreeLoadRequest>;
+	/** Called after each successful child load with the normalized result */
+	onload?: (result: LoadResult, item: string | undefined) => void;
+	/** Extracts the display text for a loaded item (defaults to `label ?? text ?? item`) */
+	getItemLabel?: (item: any) => any;
+	/** Extracts the value for a loaded item (defaults to `value ?? id`) */
+	getItemValue?: (item: any) => any;
+	/** Raised when the expanded item(s) have changed */
+	onexpand?: (value: string | string[]) => void;
+	/** Raised when the selected item(s) have changed */
+	/** The name of the component's form data field */
+	name?: string;
+	onchange?: (value: string | string[] | undefined) => void;
+}
+
+/**
+ * A hierarchical list of items that can be expanded and collapsed to reveal nested content,
+ * with support for selecting items.
+ *
+ * See [the WAI ARIA guidelines for Tree Views](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/).
+ *
+ * The structure of a Tree is:
+ *
+ * ```
+ * <Tree>
+ * 	<TreeItem>
+ * 		<TreeItemContent>
+ * 			<TreeItemTrigger />
+ * 			<TreeItemLabel />
+ * 		</TreeItemContent>
+ * 		<TreeItemChildren>
+ * 			<TreeItem />
+ * 		</TreeItemChildren>
+ * 	</TreeItem>
+ * </Tree>
+ * ```
+ */
+declare function Tree(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: TreeProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface TreeItemProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+	/** A value for the item */
+	value?: string;
+	/**
+	 * Declares that the item has children that are not slotted in. When a
+	 * `load` function is available (this item's, or the tree's) they are
+	 * loaded from the network when the item is first expanded.
+	 */
+	hasChildren?: boolean;
+	/** If set to true, the user cannot interact with this TreeItem */
+	disabled?: boolean;
+	/**
+	 * Reads this item's children from the network (or anywhere async),
+	 * receiving `{ item }` (the item's value). Set alongside `hasChildren`;
+	 * overrides the tree's `load` function for this item.
+	 */
+	load?: Loader<any, TreeLoadRequest>;
+	/** Raised when this item is expanded or collapsed */
+	onexpand?: (expanded: boolean) => void;
+	/** Raised when this item is selected or deselected */
+	onselect?: (selected: boolean) => void;
+}
+
+/**
+ * An item in a Tree, which can contain nested TreeItems via TreeItemChildren.
+ *
+ * The structure of a TreeItem is:
+ *
+ * ```
+ * <TreeItem>
+ * 	<TreeItemContent>
+ * 		<TreeItemTrigger />
+ * 		<TreeItemLabel />
+ * 	</TreeItemContent>
+ * 	<TreeItemChildren>
+ * 		<TreeItem />
+ * 	</TreeItemChildren>
+ * </TreeItem>
+ * ```
+ */
+declare function TreeItem(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: TreeItemProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+/**
+ * A container for nested TreeItems. This component must be a direct child of TreeItem.
+ *
+ * The structure is:
+ *
+ * ```
+ * <TreeItem>
+ * 	<TreeItemContent>...</TreeItemContent>
+ * 	<TreeItemChildren>
+ * 		<TreeItem />
+ * 	</TreeItemChildren>
+ * </TreeItem>
+ * ```
+ */
+declare function TreeItemChildren(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props?: TreeItemChildrenProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface TreeItemContentProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+}
+
+/**
+ * A wrapper for the content of a TreeItem, which should contain TreeItemTrigger and TreeItemLabel.
+ *
+ * The structure is:
+ *
+ * ```
+ * <TreeItem>
+ * 	<TreeItemContent>
+ * 		<TreeItemTrigger />
+ * 		<TreeItemLabel />
+ * 	</TreeItemContent>
+ * </TreeItem>
+ * ```
+ */
+declare function TreeItemContent(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: TreeItemContentProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+/**
+ * The interactive label for a TreeItem, which can be clicked or keyboard-navigated to select the item.
+ * This component handles keyboard navigation and focus management for the tree.
+ *
+ * The structure is:
+ *
+ * ```
+ * <TreeItem>
+ * 	<TreeItemContent>
+ * 		<TreeItemTrigger />
+ * 		<TreeItemLabel>Item text</TreeItemLabel>
+ * 	</TreeItemContent>
+ * </TreeItem>
+ * ```
+ */
+declare function TreeItemLabel(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props?: TreeItemLabelProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+/**
+ * A button for expanding or collapsing a TreeItem that has nested children.
+ * When the item has no children, this renders as a spacer for consistent indentation.
+ *
+ * The structure is:
+ *
+ * ```
+ * <TreeItem>
+ * 	<TreeItemContent>
+ * 		<TreeItemTrigger />
+ * 		<TreeItemLabel />
+ * 	</TreeItemContent>
+ * </TreeItem>
+ * ```
+ */
+declare function TreeItemTrigger(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props?: TreeItemTriggerProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface TreeLoadedChildrenProps {
+	/** The state of the item whose children are loaded */
+	itemState: ItemState;
+	/** The load function that reads this item's children */
+	load: Loader<any, TreeLoadRequest>;
+}
+
+/**
+ * Loads the children of a TreeItem that declares `hasChildren` but has no
+ * slotted TreeItemChildren, rendering them as nested TreeItems. The load
+ * starts when the item is first expanded and is not repeated afterwards;
+ * the results stay mounted (hidden while collapsed) so the tree can search
+ * through them.
+ *
+ * This is rendered automatically by TreeItem when there is a `load`
+ * function available; it is not part of the public API.
+ */
+declare function TreeLoadedChildren(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: TreeLoadedChildrenProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+export { Tree, TreeItem, TreeItemChildren, TreeItemContent, TreeItemLabel, TreeItemTrigger, TreeLoadedChildren };

package/dist/Tree/index.js

@@ -0,0 +1,7 @@
+import Tree from "./Tree.torp";
+import TreeItem from "./TreeItem.torp";
+import TreeItemChildren from "./TreeItemChildren.torp";
+import TreeItemContent from "./TreeItemContent.torp";
+import TreeItemLabel from "./TreeItemLabel.torp";
+import TreeItemTrigger from "./TreeItemTrigger.torp";
+export { Tree, TreeItem, TreeItemChildren, TreeItemContent, TreeItemLabel, TreeItemTrigger };

package/dist/icons/ChevronDoubleLeft.torp

@@ -0,0 +1,19 @@
+import { type IconProps } from "./IconTypes";
+
+export default function ChevronDoubleLeft($props: IconProps | undefined) {
+	@render {
+		<svg
+			{$props?.id}
+			class={["torp-icon", $props?.class]}
+			{$props?.style}
+			viewBox="0 0 100 100"
+			stroke-linejoin="round"
+			stroke-width="12"
+		>
+			<g>
+				<path fill="none" d="M90,10 L50,50 L90,90"></path>
+				<path fill="none" d="M50,10 L10,50 L50,90"></path>
+			</g>
+		</svg>
+	}
+}

package/dist/icons/ChevronDoubleRight.torp

@@ -0,0 +1,19 @@
+import { type IconProps } from "./IconTypes";
+
+export default function ChevronDoubleRight($props: IconProps | undefined) {
+	@render {
+		<svg
+			{$props?.id}
+			class={["torp-icon", $props?.class]}
+			{$props?.style}
+			viewBox="0 0 100 100"
+			stroke-linejoin="round"
+			stroke-width="12"
+		>
+			<g>
+				<path d="M10,10 L50,50 L10,90" fill="none" />
+				<path d="M50,10 L90,50 L50,90" fill="none" />
+			</g>
+		</svg>
+	}
+}

package/dist/icons/index.d.ts

@@ -177,6 +177,66 @@ declare function Check(
 
 
 
+type IconProps } from "./IconTypes";
+
+export default function ChevronDoubleLeft($props: IconProps | undefined) {
+	@render {
+		<svg
+		{$props?.id}
+		class={["torp-icon", $props?.class]}
+		{$props?.style}
+		viewBox="0 0 100 100"
+		stroke-linejoin="round"
+		stroke-width="12"
+		>
+		<g>
+		<path fill="none" d="M90,10 L50,50 L90,90"></path>
+		<path fill="none" d="M50,10 L10,50 L50,90"></path>
+		</g>
+		</svg>
+	}
+}
+
+declare function ChevronDoubleLeft(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: IconProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+type IconProps } from "./IconTypes";
+
+export default function ChevronDoubleRight($props: IconProps | undefined) {
+	@render {
+		<svg
+		{$props?.id}
+		class={["torp-icon", $props?.class]}
+		{$props?.style}
+		viewBox="0 0 100 100"
+		stroke-linejoin="round"
+		stroke-width="12"
+		>
+		<g>
+		<path d="M10,10 L50,50 L10,90" fill="none" />
+		<path d="M50,10 L90,50 L50,90" fill="none" />
+		</g>
+		</svg>
+	}
+}
+
+declare function ChevronDoubleRight(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: IconProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
 type IconProps } from "./IconTypes";
 
 export default function ChevronDown($props: IconProps | undefined) {
@@ -410,4 +470,4 @@ declare function Plus(
 	$slots?: Record<string, SlotRender>,
 ): void;
 
-export { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Bars, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Cross, Loading, Minus, Plus };
+export { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Bars, Check, ChevronDoubleLeft, ChevronDoubleRight, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Cross, Loading, Minus, Plus };

package/dist/icons/index.js

@@ -1,58 +1,17 @@
-// src/icons/ArrowDown.torp
-import ArrowDown_default from "./ArrowDown.torp";
-
-// src/icons/ArrowLeft.torp
-import ArrowLeft_default from "./ArrowLeft.torp";
-
-// src/icons/ArrowRight.torp
-import ArrowRight_default from "./ArrowRight.torp";
-
-// src/icons/ArrowUp.torp
-import ArrowUp_default from "./ArrowUp.torp";
-
-// src/icons/Bars.torp
-import Bars_default from "./Bars.torp";
-
-// src/icons/Check.torp
-import Check_default from "./Check.torp";
-
-// src/icons/ChevronDown.torp
-import ChevronDown_default from "./ChevronDown.torp";
-
-// src/icons/ChevronLeft.torp
-import ChevronLeft_default from "./ChevronLeft.torp";
-
-// src/icons/ChevronRight.torp
-import ChevronRight_default from "./ChevronRight.torp";
-
-// src/icons/ChevronUp.torp
-import ChevronUp_default from "./ChevronUp.torp";
-
-// src/icons/Cross.torp
-import Cross_default from "./Cross.torp";
-
-// src/icons/Loading.torp
-import Loading_default from "./Loading.torp";
-
-// src/icons/Minus.torp
-import Minus_default from "./Minus.torp";
-
-// src/icons/Plus.torp
-import Plus_default from "./Plus.torp";
-export {
-  ArrowDown_default as ArrowDown,
-  ArrowLeft_default as ArrowLeft,
-  ArrowRight_default as ArrowRight,
-  ArrowUp_default as ArrowUp,
-  Bars_default as Bars,
-  Check_default as Check,
-  ChevronDown_default as ChevronDown,
-  ChevronLeft_default as ChevronLeft,
-  ChevronRight_default as ChevronRight,
-  ChevronUp_default as ChevronUp,
-  Cross_default as Cross,
-  Loading_default as Loading,
-  Minus_default as Minus,
-  Plus_default as Plus
-};
-//# sourceMappingURL=index.js.map
+import ArrowDown from "./ArrowDown.torp";
+import ArrowLeft from "./ArrowLeft.torp";
+import ArrowRight from "./ArrowRight.torp";
+import ArrowUp from "./ArrowUp.torp";
+import Bars from "./Bars.torp";
+import Check from "./Check.torp";
+import ChevronDoubleLeft from "./ChevronDoubleLeft.torp";
+import ChevronDoubleRight from "./ChevronDoubleRight.torp";
+import ChevronDown from "./ChevronDown.torp";
+import ChevronLeft from "./ChevronLeft.torp";
+import ChevronRight from "./ChevronRight.torp";
+import ChevronUp from "./ChevronUp.torp";
+import Cross from "./Cross.torp";
+import Loading from "./Loading.torp";
+import Minus from "./Minus.torp";
+import Plus from "./Plus.torp";
+export { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Bars, Check, ChevronDoubleLeft, ChevronDoubleRight, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Cross, Loading, Minus, Plus };

package/dist/loader-DEeG5vFY.js

@@ -0,0 +1,44 @@
+import { $async, $watch } from "@torpor/view";
+//#region src/utils/loader.ts
+/** Wraps a bare array in a LoadResult so consumers always get the same shape */
+function normalizeLoadResult(result) {
+	return Array.isArray(result) ? { items: result } : result;
+}
+/**
+* Shared loading state for components that read items from a network loader
+* (DataGrid, ComboBox auto-complete etc). Read the returned state's `items`
+* or `result` inside an `@await` boundary: while a fetch is pending the read
+* suspends, and when dependencies read inside `getRequest` change the fetch
+* re-runs.
+*
+* For lazy loading (fetch only once some condition is met), gate the whole
+* rendering of the region that reads this loader behind that condition
+* (`@if`), so the `@await` boundary -- and with it the first fetch --
+* comes into existence when the condition flips.
+*
+* ```
+* let $load = createItemLoader({
+* 	load: $props.load,
+* 	getRequest: () => ({ searchText: $state.searchText }),
+* });
+* @await { ...$load.items... } with { <span>Loading…</span> }
+* ```
+*/
+function createItemLoader(options) {
+	return $watch({
+		get result() {
+			return $async(() => {
+				const promise = Promise.resolve(options.load(options.getRequest())).then(normalizeLoadResult);
+				promise.then((r) => options.onload?.(r), () => {});
+				return promise;
+			});
+		},
+		get items() {
+			return this.result?.items ?? [];
+		}
+	});
+}
+//#endregion
+export { normalizeLoadResult as n, createItemLoader as t };
+
+//# sourceMappingURL=loader-DEeG5vFY.js.map

package/dist/loader-DEeG5vFY.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader-DEeG5vFY.js","names":[],"sources":["../src/utils/loader.ts"],"sourcesContent":["import { $async, $watch } from \"@torpor/view\";\n\n/**\n * Shared contract for loading data from the network, used by components that\n * can take either static data or a loader function (DataGrid now, ComboBox\n * auto-complete and others later).\n *\n * A loader receives a request object describing what to fetch -- paging,\n * search text and sorting are standard; components extend it with their own\n * fields -- plus an AbortSignal so stale requests can be cancelled.\n */\n\n/** The base shape of a load request. Components extend this with their own fields. */\nexport interface LoadRequest {\n\t/** 1-based page number to load */\n\tpage?: number;\n\t/** Number of items per page */\n\tpageSize?: number;\n\t/** Search or filter text entered by the user */\n\tsearchText?: string;\n\t/** The field to sort by */\n\tsortBy?: string;\n\t/** The direction to sort in */\n\tsortDirection?: \"asc\" | \"desc\";\n}\n\n/**\n * The result of a load: the items for the current request, and optionally\n * the total count (needed for paged components to show a pager).\n */\nexport interface LoadResult<T = any> {\n\titems: T[];\n\t/** The total number of items across all pages, if known */\n\ttotal?: number;\n}\n\n/**\n * Reads data for a request. May return a promise or a plain result, and may\n * return just an array of items when no total is available.\n */\nexport type Loader<T = any, TRequest extends LoadRequest = LoadRequest> = (\n\trequest: TRequest,\n\tsignal?: AbortSignal,\n) => Promise<LoadResult<T> | T[]> | LoadResult<T> | T[];\n\n/** Wraps a bare array in a LoadResult so consumers always get the same shape */\nexport function normalizeLoadResult<T>(result: LoadResult<T> | T[]): LoadResult<T> {\n\treturn Array.isArray(result) ? { items: result } : result;\n}\n\nexport interface ItemLoaderOptions<T = any, TRequest extends LoadRequest = LoadRequest> {\n\t/** The loader function to fetch items */\n\tload: Loader<T, TRequest>;\n\t/**\n\t * Builds the request for the current fetch. Called inside the async\n\t * getter, so reads of reactive state here re-fetch when they change.\n\t */\n\tgetRequest: () => TRequest;\n\t/** Called after each successful load with the normalized result */\n\tonload?: (result: LoadResult<T>) => void;\n}\n\n/** Reactive loading state returned by createItemLoader */\nexport interface ItemLoaderState<T = any> {\n\t/** The full result of the current load; suspends while a fetch is pending */\n\treadonly result: LoadResult<T> | undefined;\n\t/** The loaded items; suspends while a fetch is pending */\n\treadonly items: T[];\n}\n\n/**\n * Shared loading state for components that read items from a network loader\n * (DataGrid, ComboBox auto-complete etc). Read the returned state's `items`\n * or `result` inside an `@await` boundary: while a fetch is pending the read\n * suspends, and when dependencies read inside `getRequest` change the fetch\n * re-runs.\n *\n * For lazy loading (fetch only once some condition is met), gate the whole\n * rendering of the region that reads this loader behind that condition\n * (`@if`), so the `@await` boundary -- and with it the first fetch --\n * comes into existence when the condition flips.\n *\n * ```\n * let $load = createItemLoader({\n * \tload: $props.load,\n * \tgetRequest: () => ({ searchText: $state.searchText }),\n * });\n * @await { ...$load.items... } with { <span>Loading…</span> }\n * ```\n */\nexport function createItemLoader<T = any, TRequest extends LoadRequest = LoadRequest>(\n\toptions: ItemLoaderOptions<T, TRequest>,\n): ItemLoaderState<T> {\n\treturn $watch({\n\t\tget result(): LoadResult<T> | undefined {\n\t\t\treturn $async(() => {\n\t\t\t\tconst promise = Promise.resolve(options.load(options.getRequest())).then(\n\t\t\t\t\tnormalizeLoadResult,\n\t\t\t\t);\n\t\t\t\t// Report successful loads to the consumer; failures surface\n\t\t\t\t// through the component's error boundary, not this chain\n\t\t\t\tpromise.then(\n\t\t\t\t\t(r) => options.onload?.(r),\n\t\t\t\t\t() => {},\n\t\t\t\t);\n\t\t\t\treturn promise as Promise<LoadResult<T>>;\n\t\t\t});\n\t\t},\n\t\tget items(): T[] {\n\t\t\treturn this.result?.items ?? [];\n\t\t},\n\t});\n}\n"],"mappings":";;;AA8CA,SAAgB,oBAAuB,QAA4C;CAClF,OAAO,MAAM,QAAQ,MAAM,IAAI,EAAE,OAAO,OAAO,IAAI;AACpD;;;;;;;;;;;;;;;;;;;;;AA0CA,SAAgB,iBACf,SACqB;CACrB,OAAO,OAAO;EACb,IAAI,SAAoC;GACvC,OAAO,aAAa;IACnB,MAAM,UAAU,QAAQ,QAAQ,QAAQ,KAAK,QAAQ,WAAW,CAAC,CAAC,CAAC,CAAC,KACnE,mBACD;IAGA,QAAQ,MACN,MAAM,QAAQ,SAAS,CAAC,SACnB,CAAC,CACR;IACA,OAAO;GACR,CAAC;EACF;EACA,IAAI,QAAa;GAChB,OAAO,KAAK,QAAQ,SAAS,CAAC;EAC/B;CACD,CAAC;AACF"}

package/dist/motion/index.d.ts

@@ -1,19 +1,23 @@
-import { Animation } from '@torpor/view';
-
+import { Animation } from "@torpor/view";
+//#region src/motion/fade.d.ts
 declare function fade(_el: HTMLElement, options?: number | KeyframeAnimationOptions): Animation;
-
+//#endregion
+//#region src/motion/grow.d.ts
 declare function grow(el: HTMLElement, options?: number | KeyframeAnimationOptions): Animation;
-
+//#endregion
+//#region src/motion/measure.d.ts
 /**
  * Measures an element before it is added to the DOM
  * @param el The element to measure
  * @param fn The function to use to get the desired measurement (e.g. el.offsetHeight)
  */
-declare function measure(el: HTMLElement, fn: (_: HTMLElement) => number): number;
-
+declare function measure(el: HTMLElement, fn: (_el: HTMLElement) => number): number;
+//#endregion
+//#region src/motion/slide.d.ts
 interface Options extends KeyframeAnimationOptions {
-    side: "left" | "right" | "top" | "bottom";
+  side: "left" | "right" | "top" | "bottom";
 }
 declare function slide(el: HTMLElement, options?: Options): Animation;
-
+//#endregion
 export { fade, grow, measure, slide };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/motion/fade.ts","../../src/motion/grow.ts","../../src/motion/measure.ts","../../src/motion/slide.ts"],"mappings":";;iBAEwB,KACvB,KAAK,aACL,mBAAmB,2BACjB;;;iBCFqB,KACvB,IAAI,aACJ,mBAAmB,2BACjB;;;;;;;;iBCDqB,QAAQ,IAAI,aAAa,KAAK,KAAK;;;UCFjD,gBAAgB;EACzB;;iBAGuB,MAAM,IAAI,aAAa,UAAU,UAAU"}