@threadlabs/looma 0.28.7 → 0.28.8

package/vue/editor/index.js

@@ -1,6 +1,6 @@
 import { computed, createApp, defineComponent, h, nextTick, onBeforeUnmount, onMounted, reactive, ref, shallowRef, useId, watch } from "vue";
 import { DEFAULT_MENTION_RESULT_LIMIT, LOOMA_CHIP_COLORS, LOOMA_ICONS, createLoomaMentionExtension, createLoomaSlashCommandExtension, getActiveTableUiState, getDefaultEditorExtensions, getDefaultSlashCommands, getTableOfContentsEntries, getVisualViewportRect, handleTableAction, handleTableOverlayAction, measureTableOverlayGeometry, normalizeActiveTableColumnWidths, normalizeLoomaChipColor, normalizeTableOfContentsConfig, resolveTableCellAt, siteRelativeHref } from "@threadlabs/looma/editor";
-import { Button, Callout, Card, Checkbox, Cluster, Combobox, Disclosure, EditorBlockActions, EditorImageToolbar, EditorInsertTableGrid, EditorLinkCard, EditorMentionMenu, EditorMentionMenuItem, EditorSlashMenu, EditorSlashMenuGroup, EditorSlashMenuItem, EditorSurface, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, FormField, Icon, IconButton, Image, Input, InputGroup, List, Menu, MenuItem, Popover, ScrollArea, SearchResultRow, Separator, Stack, Text, Tooltip } from "@threadlabs/looma/vue";
+import { Button, Callout, Card, Checkbox, Cluster, Combobox, Disclosure, EditorBlockActions, EditorImageToolbar, EditorInsertTableGrid, EditorLinkCard, EditorLinkForm, EditorMentionMenu, EditorMentionMenuItem, EditorSlashMenu, EditorSlashMenuGroup, EditorSlashMenuItem, EditorSurface, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, FormField, Icon, IconButton, Image, Input, List, Menu, MenuItem, Popover, Separator, Stack, Text, Tooltip } from "@threadlabs/looma/vue";
 import { Editor, Extension, Node as Node$1, getText, getTextSerializersFromSchema, isNodeSelection, mergeAttributes, nodeInputRule, posToDOMRect } from "@tiptap/core";
 import { Editor as Editor$1 } from "@tiptap/vue-3";
 import { closeHistory } from "@tiptap/pm/history";
@@ -24,6 +24,7 @@ var EDITOR_ADAPTER_COMPONENT_TAG_MAP = {
 	EditorTableOverlay: "ui-editor-table-overlay",
 	EditorImageToolbar: "ui-editor-image-toolbar",
 	EditorLinkCard: "ui-editor-link-card",
+	EditorLinkForm: "ui-editor-link-form",
 	EditorBlockActions: "ui-editor-block-actions"
 };
 //#endregion
@@ -2487,6 +2488,10 @@ var LoomaEditor = defineComponent({
 		const linkPopoverAnchorId = ref(linkAnchorId);
 		const linkDestinationInput = () => linkFormRoot.value?.querySelector("[data-link-destination]");
 		const linkFormRoot = ref(null);
+		const setLinkFormRoot = (instance) => {
+			const element = instance?.$el;
+			linkFormRoot.value = element instanceof HTMLElement ? element : null;
+		};
 		const linkOpen = ref(false);
 		const linkContextEditing = ref(false);
 		const linkHref = ref("");
@@ -2840,17 +2845,6 @@ var LoomaEditor = defineComponent({
 			if (linkTextEditable.value && !linkText.value.trim()) linkText.value = target.label;
 			applyLink();
 		};
-		const moveLinkResultFocus = (event, offset) => {
-			const buttons = [...linkFormRoot.value?.querySelectorAll("[data-link-result]") ?? []];
-			const next = buttons[buttons.indexOf(event.target) + offset];
-			if (next) {
-				event.preventDefault();
-				next.focus();
-			} else if (offset < 0) {
-				event.preventDefault();
-				linkFormRoot.value?.querySelector("[data-link-search]")?.focus();
-			}
-		};
 		const openLinkEditor = (context = false) => {
 			const instance = editor.value;
 			if (!instance || !props.editable) return;
@@ -2963,154 +2957,73 @@ var LoomaEditor = defineComponent({
 			linkPopup?.hide();
 			formattingPopup?.hide();
 		};
-		const renderLinkDestination = (mode) => [h(FormField, { invalid: Boolean(linkError.value) }, {
-			label: () => h("label", props.linkSearch ? "Link destination" : "URL"),
-			default: () => {
-				const input = h(Input, {
-					"data-link-destination": "",
-					...props.linkSearch ? {
-						"data-link-search": "",
-						type: "text",
-						role: "searchbox",
-						autocomplete: "off",
-						placeholder: `Search ${props.linkTargetLabel.toLowerCase()}s or paste a URL…`
-					} : {
-						type: "text",
-						inputmode: "url",
-						placeholder: "https://example.com"
-					},
-					size: props.linkSearch ? "md" : "sm",
-					value: props.linkSearch ? linkQuery.value : linkHref.value,
-					onInput: (event) => {
-						const value = event.target.value;
-						if (props.linkSearch) {
-							linkQuery.value = value;
-							linkMode.value = /^(https?:\/\/|mailto:|tel:)/i.test(value.trim()) || linkSelection?.existing && /^(\/|\.\.?\/|#|\?)/.test(value.trim()) ? "url" : "target";
-							linkSelectedTarget.value = null;
-						}
-						linkHref.value = value;
-						linkError.value = "";
-						applyLink();
-					},
-					onKeydown: (event) => {
-						if (mode === "target" && event.key === "ArrowDown") moveLinkResultFocus(event, 1);
+		const linkStatus = () => {
+			if (linkSearching.value) return "Searching…";
+			if (linkSelectedTarget.value) return "";
+			if (linkQuery.value.trim().length < 2) return "Type at least two letters to search.";
+			return linkResults.value.length || linkError.value ? "" : "No results found.";
+		};
+		const renderLinkForm = () => {
+			const shown = linkSelectedTarget.value ? [linkSelectedTarget.value] : linkResults.value;
+			return h(EditorLinkForm, {
+				ref: setLinkFormRoot,
+				class: "looma-editor__link-form",
+				existing: Boolean(linkSelection?.existing),
+				searchable: Boolean(props.linkSearch),
+				mode: linkMode.value,
+				value: props.linkSearch ? linkQuery.value : linkHref.value,
+				placeholder: props.linkSearch ? `Search ${props.linkTargetLabel.toLowerCase()}s or paste a URL…` : "https://example.com",
+				newTab: linkNewTab.value,
+				textEditable: linkTextEditable.value,
+				text: linkText.value,
+				error: linkError.value,
+				status: linkStatus(),
+				results: shown.map(({ id, label, detail }) => detail ? {
+					id,
+					label,
+					detail
+				} : {
+					id,
+					label
+				}),
+				selected: linkSelectedTarget.value?.id ?? "",
+				onDestination: (event) => {
+					const { value } = event.detail;
+					if (props.linkSearch) {
+						linkQuery.value = value;
+						linkMode.value = /^(https?:\/\/|mailto:|tel:)/i.test(value.trim()) || linkSelection?.existing && /^(\/|\.\.?\/|#|\?)/.test(value.trim()) ? "url" : "target";
+						linkSelectedTarget.value = null;
 					}
-				});
-				return props.linkSearch ? h(InputGroup, { prefixKind: "icon" }, {
-					prefix: () => loomaIcon(mode === "target" ? "search" : "link"),
-					default: () => input,
-					action: () => linkQuery.value ? h(IconButton, {
-						label: "Clear search",
-						variant: "ghost",
-						size: "sm",
-						onClick: () => {
-							linkQuery.value = "";
-							linkHref.value = "";
-							linkMode.value = "target";
-							linkSelectedTarget.value = null;
-							linkError.value = "";
-							nextTick(() => linkFormRoot.value?.querySelector("[data-link-search]")?.focus());
-						}
-					}, () => loomaIcon("x")) : null
-				}) : input;
-			}
-		}), mode === "target" ? h(ScrollArea, {
-			size: "sm",
-			"aria-label": "Destination search results"
-		}, () => [
-			linkSearching.value ? h(Text, {
-				size: "sm",
-				tone: "secondary",
-				role: "status"
-			}, () => "Searching…") : null,
-			!linkSearching.value && !linkSelectedTarget.value && linkQuery.value.trim().length < 2 ? h(Text, {
-				size: "sm",
-				tone: "secondary"
-			}, () => "Type at least two letters to search.") : null,
-			!linkSearching.value && !linkSelectedTarget.value && linkQuery.value.trim().length >= 2 && !linkResults.value.length && !linkError.value ? h(Text, {
-				size: "sm",
-				tone: "secondary"
-			}, () => "No results found.") : null,
-			...(linkSelectedTarget.value ? [linkSelectedTarget.value] : linkResults.value).map((target) => h(SearchResultRow, {
-				key: target.id,
-				density: "compact",
-				selected: target.id === linkSelectedTarget.value?.id,
-				"data-link-result": "",
-				onClick: () => selectLinkTarget(target),
-				onKeydown: (event) => {
-					if (event.key === "ArrowDown") moveLinkResultFocus(event, 1);
-					if (event.key === "ArrowUp") moveLinkResultFocus(event, -1);
-				}
-			}, {
-				leading: () => loomaIcon("file-text"),
-				title: () => h(Text, {
-					as: "strong",
-					size: "sm",
-					weight: "medium",
-					truncate: true,
-					title: target.label
-				}, () => target.label),
-				meta: () => target.detail ? h(Text, {
-					as: "span",
-					size: "xs",
-					tone: "secondary",
-					truncate: true,
-					title: target.detail
-				}, () => target.detail) : null,
-				trailing: () => target.id === linkSelectedTarget.value?.id ? loomaIcon("check") : null
-			}))
-		]) : h(Checkbox, {
-			size: "sm",
-			checked: linkNewTab.value,
-			onChange: (event) => {
-				linkNewTab.value = event.detail.checked;
-				applyLink();
-			}
-		}, () => "Open in new tab")];
-		const renderLinkForm = () => h("form", {
-			ref: linkFormRoot,
-			class: "looma-editor__link-form",
-			"aria-label": "Edit link",
-			onSubmit: (event) => {
-				event.preventDefault();
-				if (applyLink(true)) dismissLink();
-			},
-			onKeydown: (event) => {
-				if (event.key === "Escape") {
-					event.preventDefault();
-					event.stopPropagation();
-					dismissLink();
-				} else if (event.key === "Enter" && event.target instanceof HTMLInputElement) {
-					event.preventDefault();
-					event.stopPropagation();
+					linkHref.value = value;
+					linkError.value = "";
+					applyLink();
+				},
+				onClear: () => {
+					linkQuery.value = "";
+					linkHref.value = "";
+					linkMode.value = "target";
+					linkSelectedTarget.value = null;
+					linkError.value = "";
+				},
+				onChoose: (event) => {
+					const target = shown.find(({ id }) => id === event.detail.id);
+					if (target) selectLinkTarget(target);
+				},
+				onNewTab: (event) => {
+					linkNewTab.value = event.detail.newTab;
+					applyLink();
+				},
+				onText: (event) => {
+					linkText.value = event.detail.text;
+					linkError.value = "";
+					applyLink();
+				},
+				onSave: () => {
 					if (applyLink(true)) dismissLink();
-				}
-			}
-		}, [h(Stack, { gap: "s" }, () => [
-			h(Text, {
-				as: "h3",
-				size: "sm",
-				weight: "semibold"
-			}, () => linkSelection?.existing ? "Edit link" : "Add link"),
-			h(Stack, { gap: "s" }, () => renderLinkDestination(linkMode.value)),
-			linkTextEditable.value ? h(FormField, {}, {
-				label: () => h("label", "Text"),
-				default: () => h(Input, {
-					size: "sm",
-					value: linkText.value,
-					onInput: (event) => {
-						linkText.value = event.target.value;
-						linkError.value = "";
-						applyLink();
-					}
-				})
-			}) : null,
-			linkError.value ? h(Text, {
-				size: "sm",
-				tone: "danger",
-				role: "alert"
-			}, () => linkError.value) : null
-		])]);
+				},
+				onDismiss: () => dismissLink()
+			});
+		};
 		const renderLinkContextCard = (instance) => {
 			if (linkContextEditing.value) return h(Card, {
 				variant: "elevated",
@@ -4397,4 +4310,4 @@ var LoomaEditor = defineComponent({
 	}
 });
 //#endregion
-export { EDITOR_ADAPTER_COMPONENT_TAG_MAP, EditorBlockActions, EditorImageToolbar, EditorInsertTableGrid, EditorLinkCard, EditorMentionMenu, EditorMentionMenuItem, EditorSlashMenu, EditorSlashMenuGroup, EditorSlashMenuItem, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, LoomaEditor };
+export { EDITOR_ADAPTER_COMPONENT_TAG_MAP, EditorBlockActions, EditorImageToolbar, EditorInsertTableGrid, EditorLinkCard, EditorLinkForm, EditorMentionMenu, EditorMentionMenuItem, EditorSlashMenu, EditorSlashMenuGroup, EditorSlashMenuItem, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, LoomaEditor };

package/vue/editor/primitives.d.ts

@@ -3,7 +3,7 @@
  * `@threadlabs/looma/vue`, re-exported beside the editor that composes them.
  */
 import type { InsertTableEventDetail, MentionMenuHighlightEventDetail, MentionMenuSelectEventDetail, SlashMenuHighlightEventDetail, SlashMenuSelectEventDetail, TableContextMenuActionEventDetail } from "@threadlabs/looma/editor";
-export { EditorBlockActions, EditorImageToolbar, EditorInsertTableGrid, EditorLinkCard, EditorMentionMenu, EditorMentionMenuItem, EditorSlashMenu, EditorSlashMenuGroup, EditorSlashMenuItem, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, } from "@threadlabs/looma/vue";
+export { EditorBlockActions, EditorImageToolbar, EditorInsertTableGrid, EditorLinkCard, EditorLinkForm, EditorMentionMenu, EditorMentionMenuItem, EditorSlashMenu, EditorSlashMenuGroup, EditorSlashMenuItem, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, } from "@threadlabs/looma/vue";
 /** The editor components' event details, by event name. */
 export interface VueEditorAdapterEventMap {
     highlight: MentionMenuHighlightEventDetail | SlashMenuHighlightEventDetail;
@@ -21,6 +21,21 @@ export interface VueEditorAdapterEventMap {
     delete: Record<string, never>;
     edit: Record<string, never>;
     remove: Record<string, never>;
+    destination: {
+        value: string;
+    };
+    text: {
+        text: string;
+    };
+    "new-tab": {
+        newTab: boolean;
+    };
+    choose: {
+        id: string;
+    };
+    clear: Record<string, never>;
+    save: Record<string, never>;
+    dismiss: Record<string, never>;
     "add-row-before": {
         boundaryIndex: number;
     };
@@ -86,5 +101,6 @@ export declare const EDITOR_ADAPTER_COMPONENT_TAG_MAP: {
     readonly EditorTableOverlay: "ui-editor-table-overlay";
     readonly EditorImageToolbar: "ui-editor-image-toolbar";
     readonly EditorLinkCard: "ui-editor-link-card";
+    readonly EditorLinkForm: "ui-editor-link-form";
     readonly EditorBlockActions: "ui-editor-block-actions";
 };

package/vue/index.d.ts

@@ -23,6 +23,7 @@ export { default as EditorBlockActions } from "./UiEditorBlockActions.js";
 export { default as EditorImageToolbar } from "./UiEditorImageToolbar.js";
 export { default as EditorInsertTableGrid } from "./UiEditorInsertTableGrid.js";
 export { default as EditorLinkCard } from "./UiEditorLinkCard.js";
+export { default as EditorLinkForm } from "./UiEditorLinkForm.js";
 export { default as EditorMentionMenu } from "./UiEditorMentionMenu.js";
 export { default as EditorMentionMenuItem } from "./UiEditorMentionMenuItem.js";
 export { default as EditorSlashMenu } from "./UiEditorSlashMenu.js";

package/vue/index.js

@@ -36,6 +36,9 @@ import { t as UiText_default } from "./chunks/UiText.js";
 import { t as UiEditorImageToolbar_default } from "./chunks/UiEditorImageToolbar.js";
 import { t as UiEditorInsertTableGrid_default } from "./chunks/UiEditorInsertTableGrid.js";
 import { t as UiEditorLinkCard_default } from "./chunks/UiEditorLinkCard.js";
+import { t as UiInputGroup_default } from "./chunks/UiInputGroup.js";
+import { t as UiSearchResultRow_default } from "./chunks/UiSearchResultRow.js";
+import { t as UiEditorLinkForm_default } from "./chunks/UiEditorLinkForm.js";
 import { t as UiEditorMentionMenu_default } from "./chunks/UiEditorMentionMenu.js";
 import { t as UiEditorMentionMenuItem_default } from "./chunks/UiEditorMentionMenuItem.js";
 import { t as UiEditorSlashMenu_default } from "./chunks/UiEditorSlashMenu.js";
@@ -48,7 +51,6 @@ import { t as UiEditorTableToolbar_default } from "./chunks/UiEditorTableToolbar
 import { t as UiFloatingActionButton_default } from "./chunks/UiFloatingActionButton.js";
 import { t as UiGrid_default } from "./chunks/UiGrid.js";
 import { t as UiImage_default } from "./chunks/UiImage.js";
-import { t as UiInputGroup_default } from "./chunks/UiInputGroup.js";
 import { t as UiList_default } from "./chunks/UiList.js";
 import { t as UiListItem_default } from "./chunks/UiListItem.js";
 import { t as UiListbox_default } from "./chunks/UiListbox.js";
@@ -59,7 +61,6 @@ import { t as UiPageHeader_default } from "./chunks/UiPageHeader.js";
 import { t as UiRadio_default } from "./chunks/UiRadio.js";
 import { t as UiRadioGroup_default } from "./chunks/UiRadioGroup.js";
 import { t as UiReel_default } from "./chunks/UiReel.js";
-import { t as UiSearchResultRow_default } from "./chunks/UiSearchResultRow.js";
 import { t as UiSearchShell_default } from "./chunks/UiSearchShell.js";
 import { t as UiSection_default } from "./chunks/UiSection.js";
 import { t as UiSelect_default } from "./chunks/UiSelect.js";
@@ -77,4 +78,4 @@ import { t as UiTopBar_default } from "./chunks/UiTopBar.js";
 import { t as UiTree_default } from "./chunks/UiTree.js";
 import { t as UiTreeItem_default } from "./chunks/UiTreeItem.js";
 import { trackInputModality } from "@threadlabs/looma/components/shared/input-modality.js";
-export { UiActionBar_default as ActionBar, UiAffordanceScope_default as AffordanceScope, UiAvatar_default as Avatar, UiAvatarGroup_default as AvatarGroup, UiBadge_default as Badge, UiBreadcrumbItem_default as BreadcrumbItem, UiBreadcrumbs_default as Breadcrumbs, UiButton_default as Button, UiCallout_default as Callout, UiCard_default as Card, UiCheckbox_default as Checkbox, UiCluster_default as Cluster, UiCombobox_default as Combobox, UiContainer_default as Container, UiContextMenu_default as ContextMenu, UiCover_default as Cover, UiDescriptionItem_default as DescriptionItem, UiDescriptionList_default as DescriptionList, UiDialog_default as Dialog, UiDisclosure_default as Disclosure, UiEditable_default as Editable, UiEditorBlockActions_default as EditorBlockActions, UiEditorImageToolbar_default as EditorImageToolbar, UiEditorInsertTableGrid_default as EditorInsertTableGrid, UiEditorLinkCard_default as EditorLinkCard, UiEditorMentionMenu_default as EditorMentionMenu, UiEditorMentionMenuItem_default as EditorMentionMenuItem, UiEditorSlashMenu_default as EditorSlashMenu, UiEditorSlashMenuGroup_default as EditorSlashMenuGroup, UiEditorSlashMenuItem_default as EditorSlashMenuItem, UiEditorSurface_default as EditorSurface, UiEditorTableContextMenu_default as EditorTableContextMenu, UiEditorTableOverlay_default as EditorTableOverlay, UiEditorTableToolbar_default as EditorTableToolbar, UiEditorToolbar_default as EditorToolbar, UiFloatingActionButton_default as FloatingActionButton, UiFormField_default as FormField, UiGrid_default as Grid, UiIcon_default as Icon, UiIconButton_default as IconButton, UiImage_default as Image, UiInput_default as Input, UiInputGroup_default as InputGroup, UiList_default as List, UiListItem_default as ListItem, UiListbox_default as Listbox, UiMenu_default as Menu, UiMenuGroup_default as MenuGroup, UiMenuItem_default as MenuItem, UiMeter_default as Meter, UiNavItem_default as NavItem, UiPageHeader_default as PageHeader, UiPopover_default as Popover, UiRadio_default as Radio, UiRadioGroup_default as RadioGroup, UiReel_default as Reel, UiScrollArea_default as ScrollArea, UiSearchResultRow_default as SearchResultRow, UiSearchShell_default as SearchShell, UiSection_default as Section, UiSelect_default as Select, UiSeparator_default as Separator, UiSidebar_default as Sidebar, UiSpinner_default as Spinner, UiStack_default as Stack, UiStatusMessage_default as StatusMessage, UiSwitch_default as Switch, UiSwitcher_default as Switcher, UiTable_default as Table, UiTabs_default as Tabs, UiText_default as Text, UiTextarea_default as Textarea, UiToast_default as Toast, UiToastRegion_default as ToastRegion, UiTooltip_default as Tooltip, UiTopBar_default as TopBar, UiTree_default as Tree, UiTreeItem_default as TreeItem, trackInputModality };
+export { UiActionBar_default as ActionBar, UiAffordanceScope_default as AffordanceScope, UiAvatar_default as Avatar, UiAvatarGroup_default as AvatarGroup, UiBadge_default as Badge, UiBreadcrumbItem_default as BreadcrumbItem, UiBreadcrumbs_default as Breadcrumbs, UiButton_default as Button, UiCallout_default as Callout, UiCard_default as Card, UiCheckbox_default as Checkbox, UiCluster_default as Cluster, UiCombobox_default as Combobox, UiContainer_default as Container, UiContextMenu_default as ContextMenu, UiCover_default as Cover, UiDescriptionItem_default as DescriptionItem, UiDescriptionList_default as DescriptionList, UiDialog_default as Dialog, UiDisclosure_default as Disclosure, UiEditable_default as Editable, UiEditorBlockActions_default as EditorBlockActions, UiEditorImageToolbar_default as EditorImageToolbar, UiEditorInsertTableGrid_default as EditorInsertTableGrid, UiEditorLinkCard_default as EditorLinkCard, UiEditorLinkForm_default as EditorLinkForm, UiEditorMentionMenu_default as EditorMentionMenu, UiEditorMentionMenuItem_default as EditorMentionMenuItem, UiEditorSlashMenu_default as EditorSlashMenu, UiEditorSlashMenuGroup_default as EditorSlashMenuGroup, UiEditorSlashMenuItem_default as EditorSlashMenuItem, UiEditorSurface_default as EditorSurface, UiEditorTableContextMenu_default as EditorTableContextMenu, UiEditorTableOverlay_default as EditorTableOverlay, UiEditorTableToolbar_default as EditorTableToolbar, UiEditorToolbar_default as EditorToolbar, UiFloatingActionButton_default as FloatingActionButton, UiFormField_default as FormField, UiGrid_default as Grid, UiIcon_default as Icon, UiIconButton_default as IconButton, UiImage_default as Image, UiInput_default as Input, UiInputGroup_default as InputGroup, UiList_default as List, UiListItem_default as ListItem, UiListbox_default as Listbox, UiMenu_default as Menu, UiMenuGroup_default as MenuGroup, UiMenuItem_default as MenuItem, UiMeter_default as Meter, UiNavItem_default as NavItem, UiPageHeader_default as PageHeader, UiPopover_default as Popover, UiRadio_default as Radio, UiRadioGroup_default as RadioGroup, UiReel_default as Reel, UiScrollArea_default as ScrollArea, UiSearchResultRow_default as SearchResultRow, UiSearchShell_default as SearchShell, UiSection_default as Section, UiSelect_default as Select, UiSeparator_default as Separator, UiSidebar_default as Sidebar, UiSpinner_default as Spinner, UiStack_default as Stack, UiStatusMessage_default as StatusMessage, UiSwitch_default as Switch, UiSwitcher_default as Switcher, UiTable_default as Table, UiTabs_default as Tabs, UiText_default as Text, UiTextarea_default as Textarea, UiToast_default as Toast, UiToastRegion_default as ToastRegion, UiTooltip_default as Tooltip, UiTopBar_default as TopBar, UiTree_default as Tree, UiTreeItem_default as TreeItem, trackInputModality };