This is page 114 of 181. Use http://codebase.md/xmlui-org/xmlui/tools/vscode/resources/%7Bsrc%7D?lines=true&page={x} to view the full context.
# Directory Structure
```
├── .changeset
│ └── config.json
├── .eslintrc.cjs
├── .github
│ ├── build-checklist.png
│ ├── ISSUE_TEMPLATE
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ └── workflows
│ ├── deploy-blog.yml
│ ├── deploy-docs-optimized.yml
│ ├── deploy-docs.yml
│ ├── prepare-versions.yml
│ ├── release-packages.yml
│ ├── run-all-tests.yml
│ └── run-smoke-tests.yml
├── .gitignore
├── .prettierrc.js
├── .vscode
│ ├── launch.json
│ └── settings.json
├── blog
│ ├── .gitignore
│ ├── .gitkeep
│ ├── CHANGELOG.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── layout-changes.md
│ ├── package.json
│ ├── public
│ │ ├── blog
│ │ │ ├── images
│ │ │ │ ├── blog-page-component.png
│ │ │ │ ├── blog-scrabble.png
│ │ │ │ ├── integrated-blog-search.png
│ │ │ │ └── lorem-ipsum.png
│ │ │ ├── lorem-ipsum.md
│ │ │ ├── newest-post.md
│ │ │ ├── older-post.md
│ │ │ └── welcome-to-the-xmlui-blog.md
│ │ ├── mockServiceWorker.js
│ │ ├── resources
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ └── for-download
│ │ │ │ └── xmlui
│ │ │ │ └── xmlui-standalone.umd.js
│ │ │ ├── github.svg
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ ├── rss.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ └── PageNotFound.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── blog-theme.ts
│ └── tsconfig.json
├── CONTRIBUTING.md
├── docs
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── ComponentRefLinks.txt
│ ├── content
│ │ ├── _meta.json
│ │ ├── components
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── APICall.md
│ │ │ ├── App.md
│ │ │ ├── AppHeader.md
│ │ │ ├── AppState.md
│ │ │ ├── AutoComplete.md
│ │ │ ├── Avatar.md
│ │ │ ├── Backdrop.md
│ │ │ ├── Badge.md
│ │ │ ├── BarChart.md
│ │ │ ├── Bookmark.md
│ │ │ ├── Breakout.md
│ │ │ ├── Button.md
│ │ │ ├── Card.md
│ │ │ ├── Carousel.md
│ │ │ ├── ChangeListener.md
│ │ │ ├── Checkbox.md
│ │ │ ├── CHStack.md
│ │ │ ├── ColorPicker.md
│ │ │ ├── Column.md
│ │ │ ├── ContentSeparator.md
│ │ │ ├── CVStack.md
│ │ │ ├── DataSource.md
│ │ │ ├── DateInput.md
│ │ │ ├── DatePicker.md
│ │ │ ├── DonutChart.md
│ │ │ ├── DropdownMenu.md
│ │ │ ├── EmojiSelector.md
│ │ │ ├── ExpandableItem.md
│ │ │ ├── FileInput.md
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FlowLayout.md
│ │ │ ├── Footer.md
│ │ │ ├── Form.md
│ │ │ ├── FormItem.md
│ │ │ ├── FormSection.md
│ │ │ ├── Fragment.md
│ │ │ ├── H1.md
│ │ │ ├── H2.md
│ │ │ ├── H3.md
│ │ │ ├── H4.md
│ │ │ ├── H5.md
│ │ │ ├── H6.md
│ │ │ ├── Heading.md
│ │ │ ├── HSplitter.md
│ │ │ ├── HStack.md
│ │ │ ├── Icon.md
│ │ │ ├── IFrame.md
│ │ │ ├── Image.md
│ │ │ ├── Items.md
│ │ │ ├── LabelList.md
│ │ │ ├── Legend.md
│ │ │ ├── LineChart.md
│ │ │ ├── Link.md
│ │ │ ├── List.md
│ │ │ ├── Logo.md
│ │ │ ├── Markdown.md
│ │ │ ├── MenuItem.md
│ │ │ ├── MenuSeparator.md
│ │ │ ├── ModalDialog.md
│ │ │ ├── NavGroup.md
│ │ │ ├── NavLink.md
│ │ │ ├── NavPanel.md
│ │ │ ├── NoResult.md
│ │ │ ├── NumberBox.md
│ │ │ ├── Option.md
│ │ │ ├── Page.md
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── Pages.md
│ │ │ ├── Pagination.md
│ │ │ ├── PasswordInput.md
│ │ │ ├── PieChart.md
│ │ │ ├── ProgressBar.md
│ │ │ ├── Queue.md
│ │ │ ├── RadioGroup.md
│ │ │ ├── RealTimeAdapter.md
│ │ │ ├── Redirect.md
│ │ │ ├── Select.md
│ │ │ ├── Slider.md
│ │ │ ├── Slot.md
│ │ │ ├── SpaceFiller.md
│ │ │ ├── Spinner.md
│ │ │ ├── Splitter.md
│ │ │ ├── Stack.md
│ │ │ ├── StickyBox.md
│ │ │ ├── SubMenuItem.md
│ │ │ ├── Switch.md
│ │ │ ├── TabItem.md
│ │ │ ├── Table.md
│ │ │ ├── TableOfContents.md
│ │ │ ├── Tabs.md
│ │ │ ├── Text.md
│ │ │ ├── TextArea.md
│ │ │ ├── TextBox.md
│ │ │ ├── Theme.md
│ │ │ ├── TimeInput.md
│ │ │ ├── Timer.md
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneSwitch.md
│ │ │ ├── Tooltip.md
│ │ │ ├── Tree.md
│ │ │ ├── VSplitter.md
│ │ │ ├── VStack.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ ├── xmlui-spreadsheet
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Spreadsheet.md
│ │ │ └── xmlui-website-blocks
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Carousel.md
│ │ │ ├── HelloMd.md
│ │ │ ├── HeroSection.md
│ │ │ └── ScrollToTop.md
│ │ └── extensions
│ │ ├── _meta.json
│ │ ├── xmlui-animations
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Animation.md
│ │ │ ├── FadeAnimation.md
│ │ │ ├── FadeInAnimation.md
│ │ │ ├── FadeOutAnimation.md
│ │ │ ├── ScaleAnimation.md
│ │ │ └── SlideInAnimation.md
│ │ └── xmlui-website-blocks
│ │ ├── _meta.json
│ │ ├── _overview.md
│ │ ├── Carousel.md
│ │ ├── HelloMd.md
│ │ ├── HeroSection.md
│ │ └── ScrollToTop.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── feed.rss
│ │ ├── mockServiceWorker.js
│ │ ├── pages
│ │ │ ├── _meta.json
│ │ │ ├── app-structure.md
│ │ │ ├── build-editor-component.md
│ │ │ ├── build-hello-world-component.md
│ │ │ ├── components-intro.md
│ │ │ ├── context-variables.md
│ │ │ ├── forms.md
│ │ │ ├── globals.md
│ │ │ ├── glossary.md
│ │ │ ├── helper-tags.md
│ │ │ ├── hosted-deployment.md
│ │ │ ├── howto
│ │ │ │ ├── assign-a-complex-json-literal-to-a-component-variable.md
│ │ │ │ ├── chain-a-refetch.md
│ │ │ │ ├── debug-a-component.md
│ │ │ │ ├── delay-a-datasource-until-another-datasource-is-ready.md
│ │ │ │ ├── delegate-a-method.md
│ │ │ │ ├── do-custom-form-validation.md
│ │ │ │ ├── expose-a-method-from-a-component.md
│ │ │ │ ├── filter-and-transform-data-from-an-api.md
│ │ │ │ ├── group-items-in-list-by-a-property.md
│ │ │ │ ├── handle-background-operations.md
│ │ │ │ ├── hide-an-element-until-its-datasource-is-ready.md
│ │ │ │ ├── make-a-set-of-equal-width-cards.md
│ │ │ │ ├── make-a-table-responsive.md
│ │ │ │ ├── make-navpanel-width-responsive.md
│ │ │ │ ├── modify-a-value-reported-in-a-column.md
│ │ │ │ ├── paginate-a-list.md
│ │ │ │ ├── pass-data-to-a-modal-dialog.md
│ │ │ │ ├── react-to-button-click-not-keystrokes.md
│ │ │ │ ├── set-the-initial-value-of-a-select-from-fetched-data.md
│ │ │ │ ├── share-a-modaldialog-across-components.md
│ │ │ │ ├── sync-selections-between-table-and-list-views.md
│ │ │ │ ├── update-ui-optimistically.md
│ │ │ │ ├── use-built-in-form-validation.md
│ │ │ │ └── use-the-same-modaldialog-to-add-or-edit.md
│ │ │ ├── howto.md
│ │ │ ├── intro.md
│ │ │ ├── layout.md
│ │ │ ├── markup.md
│ │ │ ├── mcp.md
│ │ │ ├── modal-dialogs.md
│ │ │ ├── news-and-reviews.md
│ │ │ ├── reactive-intro.md
│ │ │ ├── refactoring.md
│ │ │ ├── routing-and-links.md
│ │ │ ├── samples
│ │ │ │ ├── color-palette.xmlui
│ │ │ │ ├── color-values.xmlui
│ │ │ │ ├── shadow-sizes.xmlui
│ │ │ │ ├── spacing-sizes.xmlui
│ │ │ │ ├── swatch.xmlui
│ │ │ │ ├── theme-gallery-brief.xmlui
│ │ │ │ └── theme-gallery.xmlui
│ │ │ ├── scoping.md
│ │ │ ├── scripting.md
│ │ │ ├── styles-and-themes
│ │ │ │ ├── common-units.md
│ │ │ │ ├── layout-props.md
│ │ │ │ ├── theme-variable-defaults.md
│ │ │ │ ├── theme-variables.md
│ │ │ │ └── themes.md
│ │ │ ├── template-properties.md
│ │ │ ├── test.md
│ │ │ ├── tutorial-01.md
│ │ │ ├── tutorial-02.md
│ │ │ ├── tutorial-03.md
│ │ │ ├── tutorial-04.md
│ │ │ ├── tutorial-05.md
│ │ │ ├── tutorial-06.md
│ │ │ ├── tutorial-07.md
│ │ │ ├── tutorial-08.md
│ │ │ ├── tutorial-09.md
│ │ │ ├── tutorial-10.md
│ │ │ ├── tutorial-11.md
│ │ │ ├── tutorial-12.md
│ │ │ ├── universal-properties.md
│ │ │ ├── user-defined-components.md
│ │ │ ├── vscode.md
│ │ │ ├── working-with-markdown.md
│ │ │ ├── working-with-text.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-charts
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── DonutChart.md
│ │ │ │ ├── LabelList.md
│ │ │ │ ├── Legend.md
│ │ │ │ ├── LineChart.md
│ │ │ │ └── PieChart.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ └── xmlui-spreadsheet
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ └── Spreadsheet.md
│ │ ├── resources
│ │ │ ├── devdocs
│ │ │ │ ├── debug-proxy-object-2.png
│ │ │ │ ├── debug-proxy-object.png
│ │ │ │ ├── table_editor_01.png
│ │ │ │ ├── table_editor_02.png
│ │ │ │ ├── table_editor_03.png
│ │ │ │ ├── table_editor_04.png
│ │ │ │ ├── table_editor_05.png
│ │ │ │ ├── table_editor_06.png
│ │ │ │ ├── table_editor_07.png
│ │ │ │ ├── table_editor_08.png
│ │ │ │ ├── table_editor_09.png
│ │ │ │ ├── table_editor_10.png
│ │ │ │ ├── table_editor_11.png
│ │ │ │ ├── table-editor-01.png
│ │ │ │ ├── table-editor-02.png
│ │ │ │ ├── table-editor-03.png
│ │ │ │ ├── table-editor-04.png
│ │ │ │ ├── table-editor-06.png
│ │ │ │ ├── table-editor-07.png
│ │ │ │ ├── table-editor-08.png
│ │ │ │ ├── table-editor-09.png
│ │ │ │ └── xmlui-rendering-of-tiptap-markdown.png
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ ├── clients.json
│ │ │ │ ├── daily-revenue.json
│ │ │ │ ├── dashboard-stats.json
│ │ │ │ ├── demo.xmlui
│ │ │ │ ├── demo.xmlui.xs
│ │ │ │ ├── downloads
│ │ │ │ │ └── downloads.json
│ │ │ │ ├── for-download
│ │ │ │ │ ├── index-with-api.html
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── mockApi.js
│ │ │ │ │ ├── start-darwin.sh
│ │ │ │ │ ├── start-linux.sh
│ │ │ │ │ ├── start.bat
│ │ │ │ │ └── xmlui
│ │ │ │ │ └── xmlui-standalone.umd.js
│ │ │ │ ├── getting-started
│ │ │ │ │ ├── cl-tutorial-final.zip
│ │ │ │ │ ├── cl-tutorial.zip
│ │ │ │ │ ├── cl-tutorial2.zip
│ │ │ │ │ ├── cl-tutorial3.zip
│ │ │ │ │ ├── cl-tutorial4.zip
│ │ │ │ │ ├── cl-tutorial5.zip
│ │ │ │ │ ├── cl-tutorial6.zip
│ │ │ │ │ ├── getting-started.zip
│ │ │ │ │ ├── hello-xmlui.zip
│ │ │ │ │ ├── xmlui-empty.zip
│ │ │ │ │ └── xmlui-starter.zip
│ │ │ │ ├── howto
│ │ │ │ │ └── component-icons
│ │ │ │ │ └── up-arrow.svg
│ │ │ │ ├── invoices.json
│ │ │ │ ├── monthly-status.json
│ │ │ │ ├── news-and-reviews.json
│ │ │ │ ├── products.json
│ │ │ │ ├── releases.json
│ │ │ │ ├── tutorials
│ │ │ │ │ ├── datasource
│ │ │ │ │ │ └── api.ts
│ │ │ │ │ └── p2do
│ │ │ │ │ ├── api.ts
│ │ │ │ │ └── todo-logo.svg
│ │ │ │ └── xmlui.json
│ │ │ ├── github.svg
│ │ │ ├── images
│ │ │ │ ├── apiaction-tutorial
│ │ │ │ │ ├── add-success.png
│ │ │ │ │ ├── apiaction-param.png
│ │ │ │ │ ├── change-completed.png
│ │ │ │ │ ├── change-in-progress.png
│ │ │ │ │ ├── confirm-delete.png
│ │ │ │ │ ├── data-error.png
│ │ │ │ │ ├── data-progress.png
│ │ │ │ │ ├── data-success.png
│ │ │ │ │ ├── display-1.png
│ │ │ │ │ ├── item-deleted.png
│ │ │ │ │ ├── item-updated.png
│ │ │ │ │ ├── missing-api-key.png
│ │ │ │ │ ├── new-item-added.png
│ │ │ │ │ └── test-message.png
│ │ │ │ ├── chat-api
│ │ │ │ │ └── domain-model.svg
│ │ │ │ ├── components
│ │ │ │ │ ├── image
│ │ │ │ │ │ └── breakfast.jpg
│ │ │ │ │ ├── markdown
│ │ │ │ │ │ └── colors.png
│ │ │ │ │ └── modal
│ │ │ │ │ ├── deep_link_dialog_1.jpg
│ │ │ │ │ └── deep_link_dialog_2.jpg
│ │ │ │ ├── create-apps
│ │ │ │ │ ├── collapsed-vertical.png
│ │ │ │ │ ├── using-forms-warning-dialog.png
│ │ │ │ │ └── using-forms.png
│ │ │ │ ├── datasource-tutorial
│ │ │ │ │ ├── data-with-header.png
│ │ │ │ │ ├── filtered-data.png
│ │ │ │ │ ├── filtered-items.png
│ │ │ │ │ ├── initial-page-items.png
│ │ │ │ │ ├── list-items.png
│ │ │ │ │ ├── next-page-items.png
│ │ │ │ │ ├── no-data.png
│ │ │ │ │ ├── pagination-1.jpg
│ │ │ │ │ ├── pagination-1.png
│ │ │ │ │ ├── polling-1.png
│ │ │ │ │ ├── refetch-data.png
│ │ │ │ │ ├── slow-loading.png
│ │ │ │ │ ├── test-message.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── unconventional-data.png
│ │ │ │ │ └── unfiltered-items.png
│ │ │ │ ├── flower.jpg
│ │ │ │ ├── get-started
│ │ │ │ │ ├── add-new-contact.png
│ │ │ │ │ ├── app-modified.png
│ │ │ │ │ ├── app-start.png
│ │ │ │ │ ├── app-with-boxes.png
│ │ │ │ │ ├── app-with-toast.png
│ │ │ │ │ ├── boilerplate-structure.png
│ │ │ │ │ ├── cl-initial.png
│ │ │ │ │ ├── cl-start.png
│ │ │ │ │ ├── contact-counts.png
│ │ │ │ │ ├── contact-dialog-title.png
│ │ │ │ │ ├── contact-dialog.png
│ │ │ │ │ ├── contact-menus.png
│ │ │ │ │ ├── contact-predicates.png
│ │ │ │ │ ├── context-menu.png
│ │ │ │ │ ├── dashboard-numbers.png
│ │ │ │ │ ├── default-contact-list.png
│ │ │ │ │ ├── delete-contact.png
│ │ │ │ │ ├── delete-task.png
│ │ │ │ │ ├── detailed-template.png
│ │ │ │ │ ├── edit-contact-details.png
│ │ │ │ │ ├── edited-contact-saved.png
│ │ │ │ │ ├── empty-sections.png
│ │ │ │ │ ├── filter-completed.png
│ │ │ │ │ ├── fullwidth-desktop.png
│ │ │ │ │ ├── fullwidth-mobile.png
│ │ │ │ │ ├── initial-table.png
│ │ │ │ │ ├── items-and-badges.png
│ │ │ │ │ ├── loading-message.png
│ │ │ │ │ ├── new-contact-button.png
│ │ │ │ │ ├── new-contact-saved.png
│ │ │ │ │ ├── no-empty-sections.png
│ │ │ │ │ ├── personal-todo-initial.png
│ │ │ │ │ ├── piechart.png
│ │ │ │ │ ├── review-today.png
│ │ │ │ │ ├── rudimentary-dashboard.png
│ │ │ │ │ ├── section-collapsed.png
│ │ │ │ │ ├── sectioned-items.png
│ │ │ │ │ ├── sections-ordered.png
│ │ │ │ │ ├── spacex-list-with-links.png
│ │ │ │ │ ├── spacex-list.png
│ │ │ │ │ ├── start-personal-todo-1.png
│ │ │ │ │ ├── submit-new-contact.png
│ │ │ │ │ ├── submit-new-task.png
│ │ │ │ │ ├── syntax-highlighting.png
│ │ │ │ │ ├── table-with-badge.png
│ │ │ │ │ ├── template-with-card.png
│ │ │ │ │ ├── test-emulated-api.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── todo-logo.png
│ │ │ │ │ └── xmlui-tools.png
│ │ │ │ ├── HelloApp.png
│ │ │ │ ├── HelloApp2.png
│ │ │ │ ├── logos
│ │ │ │ │ ├── xmlui1.svg
│ │ │ │ │ ├── xmlui2.svg
│ │ │ │ │ ├── xmlui3.svg
│ │ │ │ │ ├── xmlui4.svg
│ │ │ │ │ ├── xmlui5.svg
│ │ │ │ │ ├── xmlui6.svg
│ │ │ │ │ └── xmlui7.svg
│ │ │ │ ├── pdf
│ │ │ │ │ └── dummy-pdf.jpg
│ │ │ │ ├── rendering-engine
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ ├── Component.svg
│ │ │ │ │ ├── CompoundComponent.svg
│ │ │ │ │ ├── RootComponent.svg
│ │ │ │ │ └── tree-with-containers.svg
│ │ │ │ ├── reviewers-guide
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ └── incbutton-in-action.png
│ │ │ │ ├── tools
│ │ │ │ │ └── boilerplate-structure.png
│ │ │ │ ├── try.svg
│ │ │ │ ├── tutorial
│ │ │ │ │ ├── app-chat-history.png
│ │ │ │ │ ├── app-content-placeholder.png
│ │ │ │ │ ├── app-header-and-content.png
│ │ │ │ │ ├── app-links-channel-selected.png
│ │ │ │ │ ├── app-links-click.png
│ │ │ │ │ ├── app-navigation.png
│ │ │ │ │ ├── finished-ex01.png
│ │ │ │ │ ├── finished-ex02.png
│ │ │ │ │ ├── hello.png
│ │ │ │ │ ├── splash-screen-advanced.png
│ │ │ │ │ ├── splash-screen-after-click.png
│ │ │ │ │ ├── splash-screen-centered.png
│ │ │ │ │ ├── splash-screen-events.png
│ │ │ │ │ ├── splash-screen-expression.png
│ │ │ │ │ ├── splash-screen-reuse-after.png
│ │ │ │ │ ├── splash-screen-reuse-before.png
│ │ │ │ │ └── splash-screen.png
│ │ │ │ └── tutorial-01.png
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ ├── Boxes.xmlui
│ │ │ ├── Breadcrumb.xmlui
│ │ │ ├── ChangeLog.xmlui
│ │ │ ├── ColorPalette.xmlui
│ │ │ ├── DocumentLinks.xmlui
│ │ │ ├── DocumentPage.xmlui
│ │ │ ├── DocumentPageNoTOC.xmlui
│ │ │ ├── Icons.xmlui
│ │ │ ├── IncButton.xmlui
│ │ │ ├── IncButton2.xmlui
│ │ │ ├── NameValue.xmlui
│ │ │ ├── PageNotFound.xmlui
│ │ │ ├── PaletteItem.xmlui
│ │ │ ├── Palettes.xmlui
│ │ │ ├── SectionHeader.xmlui
│ │ │ ├── TBD.xmlui
│ │ │ ├── Test.xmlui
│ │ │ ├── ThemesIntro.xmlui
│ │ │ ├── ThousandThemes.xmlui
│ │ │ ├── TubeStops.xmlui
│ │ │ ├── TubeStops.xmlui.xs
│ │ │ └── TwoColumnCode.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ ├── docs-theme.ts
│ │ ├── earthtone.ts
│ │ ├── xmlui-gray-on-default.ts
│ │ ├── xmlui-green-on-default.ts
│ │ └── xmlui-orange-on-default.ts
│ └── tsconfig.json
├── LICENSE
├── package-lock.json
├── package.json
├── packages
│ ├── xmlui-animations
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── Animation.tsx
│ │ │ ├── AnimationNative.tsx
│ │ │ ├── FadeAnimation.tsx
│ │ │ ├── FadeInAnimation.tsx
│ │ │ ├── FadeOutAnimation.tsx
│ │ │ ├── index.tsx
│ │ │ ├── ScaleAnimation.tsx
│ │ │ └── SlideInAnimation.tsx
│ │ └── tsconfig.json
│ ├── xmlui-devtools
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── devtools
│ │ │ │ ├── DevTools.tsx
│ │ │ │ ├── DevToolsNative.module.scss
│ │ │ │ ├── DevToolsNative.tsx
│ │ │ │ ├── ModalDialog.module.scss
│ │ │ │ ├── ModalDialog.tsx
│ │ │ │ ├── ModalVisibilityContext.tsx
│ │ │ │ ├── Tooltip.module.scss
│ │ │ │ ├── Tooltip.tsx
│ │ │ │ └── utils.ts
│ │ │ ├── editor
│ │ │ │ └── Editor.tsx
│ │ │ └── index.tsx
│ │ ├── tsconfig.json
│ │ └── vite.config-overrides.ts
│ ├── xmlui-hello-world
│ │ ├── .gitignore
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── HelloWorld.module.scss
│ │ │ ├── HelloWorld.tsx
│ │ │ ├── HelloWorldNative.tsx
│ │ │ └── index.tsx
│ │ └── tsconfig.json
│ ├── xmlui-os-frames
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── index.tsx
│ │ │ ├── IPhoneFrame.module.scss
│ │ │ ├── IPhoneFrame.tsx
│ │ │ ├── MacOSAppFrame.module.scss
│ │ │ ├── MacOSAppFrame.tsx
│ │ │ ├── WindowsAppFrame.module.scss
│ │ │ └── WindowsAppFrame.tsx
│ │ └── tsconfig.json
│ ├── xmlui-pdf
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ ├── components
│ │ │ │ └── Pdf.xmlui
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── index.tsx
│ │ │ ├── LazyPdfNative.tsx
│ │ │ ├── Pdf.module.scss
│ │ │ └── Pdf.tsx
│ │ └── tsconfig.json
│ ├── xmlui-playground
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── hooks
│ │ │ │ ├── usePlayground.ts
│ │ │ │ └── useToast.ts
│ │ │ ├── index.tsx
│ │ │ ├── playground
│ │ │ │ ├── Box.module.scss
│ │ │ │ ├── Box.tsx
│ │ │ │ ├── CodeSelector.tsx
│ │ │ │ ├── ConfirmationDialog.module.scss
│ │ │ │ ├── ConfirmationDialog.tsx
│ │ │ │ ├── Editor.tsx
│ │ │ │ ├── Header.module.scss
│ │ │ │ ├── Header.tsx
│ │ │ │ ├── Playground.tsx
│ │ │ │ ├── PlaygroundContent.module.scss
│ │ │ │ ├── PlaygroundContent.tsx
│ │ │ │ ├── PlaygroundNative.module.scss
│ │ │ │ ├── PlaygroundNative.tsx
│ │ │ │ ├── Preview.module.scss
│ │ │ │ ├── Preview.tsx
│ │ │ │ ├── Select.module.scss
│ │ │ │ ├── StandalonePlayground.tsx
│ │ │ │ ├── StandalonePlaygroundNative.module.scss
│ │ │ │ ├── StandalonePlaygroundNative.tsx
│ │ │ │ ├── ThemeSwitcher.module.scss
│ │ │ │ ├── ThemeSwitcher.tsx
│ │ │ │ ├── ToneSwitcher.tsx
│ │ │ │ ├── Tooltip.module.scss
│ │ │ │ ├── Tooltip.tsx
│ │ │ │ └── utils.ts
│ │ │ ├── providers
│ │ │ │ ├── Toast.module.scss
│ │ │ │ └── ToastProvider.tsx
│ │ │ ├── state
│ │ │ │ └── store.ts
│ │ │ ├── themes
│ │ │ │ └── theme.ts
│ │ │ └── utils
│ │ │ └── helpers.ts
│ │ └── tsconfig.json
│ ├── xmlui-search
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── index.tsx
│ │ │ ├── Search.module.scss
│ │ │ └── Search.tsx
│ │ └── tsconfig.json
│ ├── xmlui-spreadsheet
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── index.tsx
│ │ │ ├── Spreadsheet.tsx
│ │ │ └── SpreadsheetNative.tsx
│ │ └── tsconfig.json
│ └── xmlui-website-blocks
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── demo
│ │ ├── components
│ │ │ ├── HeroBackgroundBreakoutPage.xmlui
│ │ │ ├── HeroBackgroundsPage.xmlui
│ │ │ ├── HeroContentsPage.xmlui
│ │ │ ├── HeroTextAlignPage.xmlui
│ │ │ ├── HeroTextPage.xmlui
│ │ │ └── HeroTonesPage.xmlui
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── default.ts
│ ├── index.html
│ ├── index.ts
│ ├── meta
│ │ └── componentsMetadata.ts
│ ├── package.json
│ ├── public
│ │ └── resources
│ │ ├── building.jpg
│ │ └── xmlui-logo.svg
│ ├── src
│ │ ├── Carousel
│ │ │ ├── Carousel.module.scss
│ │ │ ├── Carousel.tsx
│ │ │ ├── CarouselContext.tsx
│ │ │ └── CarouselNative.tsx
│ │ ├── FancyButton
│ │ │ ├── FancyButton.module.scss
│ │ │ ├── FancyButton.tsx
│ │ │ └── FancyButton.xmlui
│ │ ├── Hello
│ │ │ ├── Hello.tsx
│ │ │ ├── Hello.xmlui
│ │ │ └── Hello.xmlui.xs
│ │ ├── HeroSection
│ │ │ ├── HeroSection.module.scss
│ │ │ ├── HeroSection.tsx
│ │ │ └── HeroSectionNative.tsx
│ │ ├── index.tsx
│ │ ├── ScrollToTop
│ │ │ ├── ScrollToTop.module.scss
│ │ │ ├── ScrollToTop.tsx
│ │ │ └── ScrollToTopNative.tsx
│ │ └── vite-env.d.ts
│ └── tsconfig.json
├── README.md
├── tools
│ ├── codefence
│ │ └── xmlui-code-fence-docs.md
│ ├── create-app
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── create-app.ts
│ │ ├── helpers
│ │ │ ├── copy.ts
│ │ │ ├── get-pkg-manager.ts
│ │ │ ├── git.ts
│ │ │ ├── install.ts
│ │ │ ├── is-folder-empty.ts
│ │ │ ├── is-writeable.ts
│ │ │ ├── make-dir.ts
│ │ │ └── validate-pkg.ts
│ │ ├── index.ts
│ │ ├── package.json
│ │ ├── templates
│ │ │ ├── default
│ │ │ │ └── ts
│ │ │ │ ├── gitignore
│ │ │ │ ├── index.html
│ │ │ │ ├── index.ts
│ │ │ │ ├── public
│ │ │ │ │ ├── mockServiceWorker.js
│ │ │ │ │ ├── resources
│ │ │ │ │ │ ├── favicon.ico
│ │ │ │ │ │ └── xmlui-logo.svg
│ │ │ │ │ └── serve.json
│ │ │ │ └── src
│ │ │ │ ├── components
│ │ │ │ │ ├── ApiAware.xmlui
│ │ │ │ │ ├── Home.xmlui
│ │ │ │ │ ├── IncButton.xmlui
│ │ │ │ │ └── PagePanel.xmlui
│ │ │ │ ├── config.ts
│ │ │ │ └── Main.xmlui
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ └── tsconfig.json
│ ├── create-xmlui-hello-world
│ │ ├── index.js
│ │ └── package.json
│ └── vscode
│ ├── .gitignore
│ ├── .vscode
│ │ ├── launch.json
│ │ └── tasks.json
│ ├── .vscodeignore
│ ├── build.sh
│ ├── CHANGELOG.md
│ ├── esbuild.js
│ ├── eslint.config.mjs
│ ├── formatter-docs.md
│ ├── generate-test-sample.sh
│ ├── LICENSE.md
│ ├── package-lock.json
│ ├── package.json
│ ├── README.md
│ ├── resources
│ │ ├── xmlui-logo.png
│ │ └── xmlui-markup-syntax-highlighting.png
│ ├── src
│ │ ├── extension.ts
│ │ └── server.ts
│ ├── syntaxes
│ │ └── xmlui.tmLanguage.json
│ ├── test-samples
│ │ └── sample.xmlui
│ ├── tsconfig.json
│ └── tsconfig.tsbuildinfo
├── turbo.json
└── xmlui
├── .gitignore
├── bin
│ ├── bootstrap.js
│ ├── build-lib.ts
│ ├── build.ts
│ ├── index.ts
│ ├── preview.ts
│ ├── start.ts
│ ├── vite-xmlui-plugin.ts
│ └── viteConfig.ts
├── CHANGELOG.md
├── conventions
│ ├── component-qa-checklist.md
│ ├── copilot-conventions.md
│ ├── create-xmlui-components.md
│ ├── mermaid.md
│ ├── testing-conventions.md
│ └── xmlui-in-a-nutshell.md
├── dev-docs
│ ├── accessibility.md
│ ├── build-system.md
│ ├── build-xmlui.md
│ ├── component-behaviors.md
│ ├── components-with-options.md
│ ├── containers.md
│ ├── data-operations.md
│ ├── glossary.md
│ ├── index.md
│ ├── next
│ │ ├── component-dev-guide.md
│ │ ├── configuration-management-enhancement-summary.md
│ │ ├── documentation-scripts-refactoring-complete-summary.md
│ │ ├── documentation-scripts-refactoring-plan.md
│ │ ├── duplicate-pattern-extraction-summary.md
│ │ ├── error-handling-standardization-summary.md
│ │ ├── generating-component-reference.md
│ │ ├── index.md
│ │ ├── logging-consistency-implementation-summary.md
│ │ ├── project-build.md
│ │ ├── project-structure.md
│ │ ├── theme-context.md
│ │ ├── tiptap-design-considerations.md
│ │ ├── working-with-code.md
│ │ ├── xmlui-runtime-architecture
│ │ └── xmlui-wcag-accessibility-report.md
│ ├── react-fundamentals.md
│ ├── release-method.md
│ ├── standalone-app.md
│ ├── ud-components.md
│ └── xmlui-repo.md
├── package.json
├── playwright.config.ts
├── scripts
│ ├── coverage-only.js
│ ├── e2e-test-summary.js
│ ├── generate-docs
│ │ ├── build-downloads-map.mjs
│ │ ├── build-pages-map.mjs
│ │ ├── components-config.json
│ │ ├── configuration-management.mjs
│ │ ├── constants.mjs
│ │ ├── create-theme-files.mjs
│ │ ├── DocsGenerator.mjs
│ │ ├── error-handling.mjs
│ │ ├── extensions-config.json
│ │ ├── folders.mjs
│ │ ├── generate-summary-files.mjs
│ │ ├── get-docs.mjs
│ │ ├── input-handler.mjs
│ │ ├── logger.mjs
│ │ ├── logging-standards.mjs
│ │ ├── MetadataProcessor.mjs
│ │ ├── pattern-utilities.mjs
│ │ └── utils.mjs
│ ├── get-langserver-metadata.mjs
│ ├── inline-links.mjs
│ └── README-e2e-summary.md
├── src
│ ├── abstractions
│ │ ├── _conventions.md
│ │ ├── ActionDefs.ts
│ │ ├── AppContextDefs.ts
│ │ ├── ComponentDefs.ts
│ │ ├── ContainerDefs.ts
│ │ ├── ExtensionDefs.ts
│ │ ├── FunctionDefs.ts
│ │ ├── RendererDefs.ts
│ │ ├── scripting
│ │ │ ├── BlockScope.ts
│ │ │ ├── Compilation.ts
│ │ │ ├── LogicalThread.ts
│ │ │ ├── LoopScope.ts
│ │ │ ├── modules.ts
│ │ │ ├── ScriptParserError.ts
│ │ │ ├── Token.ts
│ │ │ ├── TryScope.ts
│ │ │ └── TryScopeExp.ts
│ │ └── ThemingDefs.ts
│ ├── components
│ │ ├── _conventions.md
│ │ ├── abstractions.ts
│ │ ├── Accordion
│ │ │ ├── Accordion.md
│ │ │ ├── Accordion.module.scss
│ │ │ ├── Accordion.spec.ts
│ │ │ ├── Accordion.tsx
│ │ │ ├── AccordionContext.tsx
│ │ │ ├── AccordionItem.tsx
│ │ │ ├── AccordionItemNative.tsx
│ │ │ └── AccordionNative.tsx
│ │ ├── Animation
│ │ │ └── AnimationNative.tsx
│ │ ├── APICall
│ │ │ ├── APICall.md
│ │ │ ├── APICall.spec.ts
│ │ │ ├── APICall.tsx
│ │ │ └── APICallNative.tsx
│ │ ├── App
│ │ │ ├── App.md
│ │ │ ├── App.module.scss
│ │ │ ├── App.spec.ts
│ │ │ ├── App.tsx
│ │ │ ├── AppLayoutContext.ts
│ │ │ ├── AppNative.tsx
│ │ │ ├── AppStateContext.ts
│ │ │ ├── doc-resources
│ │ │ │ ├── condensed-sticky.xmlui
│ │ │ │ ├── condensed.xmlui
│ │ │ │ ├── horizontal-sticky.xmlui
│ │ │ │ ├── horizontal.xmlui
│ │ │ │ ├── vertical-full-header.xmlui
│ │ │ │ ├── vertical-sticky.xmlui
│ │ │ │ └── vertical.xmlui
│ │ │ ├── IndexerContext.ts
│ │ │ ├── LinkInfoContext.ts
│ │ │ ├── SearchContext.tsx
│ │ │ ├── Sheet.module.scss
│ │ │ └── Sheet.tsx
│ │ ├── AppHeader
│ │ │ ├── AppHeader.md
│ │ │ ├── AppHeader.module.scss
│ │ │ ├── AppHeader.spec.ts
│ │ │ ├── AppHeader.tsx
│ │ │ └── AppHeaderNative.tsx
│ │ ├── AppState
│ │ │ ├── AppState.md
│ │ │ ├── AppState.spec.ts
│ │ │ ├── AppState.tsx
│ │ │ └── AppStateNative.tsx
│ │ ├── AutoComplete
│ │ │ ├── AutoComplete.md
│ │ │ ├── AutoComplete.module.scss
│ │ │ ├── AutoComplete.spec.ts
│ │ │ ├── AutoComplete.tsx
│ │ │ ├── AutoCompleteContext.tsx
│ │ │ └── AutoCompleteNative.tsx
│ │ ├── Avatar
│ │ │ ├── Avatar.md
│ │ │ ├── Avatar.module.scss
│ │ │ ├── Avatar.spec.ts
│ │ │ ├── Avatar.tsx
│ │ │ └── AvatarNative.tsx
│ │ ├── Backdrop
│ │ │ ├── Backdrop.md
│ │ │ ├── Backdrop.module.scss
│ │ │ ├── Backdrop.spec.ts
│ │ │ ├── Backdrop.tsx
│ │ │ └── BackdropNative.tsx
│ │ ├── Badge
│ │ │ ├── Badge.md
│ │ │ ├── Badge.module.scss
│ │ │ ├── Badge.spec.ts
│ │ │ ├── Badge.tsx
│ │ │ └── BadgeNative.tsx
│ │ ├── Bookmark
│ │ │ ├── Bookmark.md
│ │ │ ├── Bookmark.module.scss
│ │ │ ├── Bookmark.spec.ts
│ │ │ ├── Bookmark.tsx
│ │ │ └── BookmarkNative.tsx
│ │ ├── Breakout
│ │ │ ├── Breakout.module.scss
│ │ │ ├── Breakout.spec.ts
│ │ │ ├── Breakout.tsx
│ │ │ └── BreakoutNative.tsx
│ │ ├── Button
│ │ │ ├── Button-style.spec.ts
│ │ │ ├── Button.md
│ │ │ ├── Button.module.scss
│ │ │ ├── Button.spec.ts
│ │ │ ├── Button.tsx
│ │ │ └── ButtonNative.tsx
│ │ ├── Card
│ │ │ ├── Card.md
│ │ │ ├── Card.module.scss
│ │ │ ├── Card.spec.ts
│ │ │ ├── Card.tsx
│ │ │ └── CardNative.tsx
│ │ ├── Carousel
│ │ │ ├── Carousel.md
│ │ │ ├── Carousel.module.scss
│ │ │ ├── Carousel.spec.ts
│ │ │ ├── Carousel.tsx
│ │ │ ├── CarouselContext.tsx
│ │ │ ├── CarouselItem.tsx
│ │ │ ├── CarouselItemNative.tsx
│ │ │ └── CarouselNative.tsx
│ │ ├── ChangeListener
│ │ │ ├── ChangeListener.md
│ │ │ ├── ChangeListener.spec.ts
│ │ │ ├── ChangeListener.tsx
│ │ │ └── ChangeListenerNative.tsx
│ │ ├── chart-color-schemes.ts
│ │ ├── Charts
│ │ │ ├── AreaChart
│ │ │ │ ├── AreaChart.md
│ │ │ │ ├── AreaChart.spec.ts
│ │ │ │ ├── AreaChart.tsx
│ │ │ │ └── AreaChartNative.tsx
│ │ │ ├── BarChart
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── BarChart.module.scss
│ │ │ │ ├── BarChart.spec.ts
│ │ │ │ ├── BarChart.tsx
│ │ │ │ └── BarChartNative.tsx
│ │ │ ├── DonutChart
│ │ │ │ ├── DonutChart.spec.ts
│ │ │ │ └── DonutChart.tsx
│ │ │ ├── LabelList
│ │ │ │ ├── LabelList.spec.ts
│ │ │ │ ├── LabelList.tsx
│ │ │ │ ├── LabelListNative.module.scss
│ │ │ │ └── LabelListNative.tsx
│ │ │ ├── Legend
│ │ │ │ ├── Legend.spec.ts
│ │ │ │ ├── Legend.tsx
│ │ │ │ └── LegendNative.tsx
│ │ │ ├── LineChart
│ │ │ │ ├── LineChart.md
│ │ │ │ ├── LineChart.module.scss
│ │ │ │ ├── LineChart.spec.ts
│ │ │ │ ├── LineChart.tsx
│ │ │ │ └── LineChartNative.tsx
│ │ │ ├── PieChart
│ │ │ │ ├── PieChart.md
│ │ │ │ ├── PieChart.spec.ts
│ │ │ │ ├── PieChart.tsx
│ │ │ │ ├── PieChartNative.module.scss
│ │ │ │ └── PieChartNative.tsx
│ │ │ ├── RadarChart
│ │ │ │ ├── RadarChart.md
│ │ │ │ ├── RadarChart.spec.ts
│ │ │ │ ├── RadarChart.tsx
│ │ │ │ └── RadarChartNative.tsx
│ │ │ ├── Tooltip
│ │ │ │ ├── TooltipContent.module.scss
│ │ │ │ ├── TooltipContent.spec.ts
│ │ │ │ └── TooltipContent.tsx
│ │ │ └── utils
│ │ │ ├── abstractions.ts
│ │ │ └── ChartProvider.tsx
│ │ ├── Checkbox
│ │ │ ├── Checkbox.md
│ │ │ ├── Checkbox.spec.ts
│ │ │ └── Checkbox.tsx
│ │ ├── CodeBlock
│ │ │ ├── CodeBlock.module.scss
│ │ │ ├── CodeBlock.spec.ts
│ │ │ ├── CodeBlock.tsx
│ │ │ ├── CodeBlockNative.tsx
│ │ │ └── highlight-code.ts
│ │ ├── collectedComponentMetadata.ts
│ │ ├── ColorPicker
│ │ │ ├── ColorPicker.md
│ │ │ ├── ColorPicker.module.scss
│ │ │ ├── ColorPicker.spec.ts
│ │ │ ├── ColorPicker.tsx
│ │ │ └── ColorPickerNative.tsx
│ │ ├── Column
│ │ │ ├── Column.md
│ │ │ ├── Column.tsx
│ │ │ ├── ColumnNative.tsx
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ └── TableContext.tsx
│ │ ├── component-utils.ts
│ │ ├── ComponentProvider.tsx
│ │ ├── ComponentRegistryContext.tsx
│ │ ├── container-helpers.tsx
│ │ ├── ContentSeparator
│ │ │ ├── ContentSeparator.md
│ │ │ ├── ContentSeparator.module.scss
│ │ │ ├── ContentSeparator.spec.ts
│ │ │ ├── ContentSeparator.tsx
│ │ │ └── ContentSeparatorNative.tsx
│ │ ├── DataSource
│ │ │ ├── DataSource.md
│ │ │ └── DataSource.tsx
│ │ ├── DateInput
│ │ │ ├── DateInput.md
│ │ │ ├── DateInput.module.scss
│ │ │ ├── DateInput.spec.ts
│ │ │ ├── DateInput.tsx
│ │ │ └── DateInputNative.tsx
│ │ ├── DatePicker
│ │ │ ├── DatePicker.md
│ │ │ ├── DatePicker.module.scss
│ │ │ ├── DatePicker.spec.ts
│ │ │ ├── DatePicker.tsx
│ │ │ └── DatePickerNative.tsx
│ │ ├── DropdownMenu
│ │ │ ├── DropdownMenu.md
│ │ │ ├── DropdownMenu.module.scss
│ │ │ ├── DropdownMenu.spec.ts
│ │ │ ├── DropdownMenu.tsx
│ │ │ ├── DropdownMenuNative.tsx
│ │ │ ├── MenuItem.md
│ │ │ └── SubMenuItem.md
│ │ ├── EmojiSelector
│ │ │ ├── EmojiSelector.md
│ │ │ ├── EmojiSelector.spec.ts
│ │ │ ├── EmojiSelector.tsx
│ │ │ └── EmojiSelectorNative.tsx
│ │ ├── ExpandableItem
│ │ │ ├── ExpandableItem.module.scss
│ │ │ ├── ExpandableItem.spec.ts
│ │ │ ├── ExpandableItem.tsx
│ │ │ └── ExpandableItemNative.tsx
│ │ ├── FileInput
│ │ │ ├── FileInput.md
│ │ │ ├── FileInput.module.scss
│ │ │ ├── FileInput.spec.ts
│ │ │ ├── FileInput.tsx
│ │ │ └── FileInputNative.tsx
│ │ ├── FileUploadDropZone
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FileUploadDropZone.module.scss
│ │ │ ├── FileUploadDropZone.spec.ts
│ │ │ ├── FileUploadDropZone.tsx
│ │ │ └── FileUploadDropZoneNative.tsx
│ │ ├── FlowLayout
│ │ │ ├── FlowLayout.md
│ │ │ ├── FlowLayout.module.scss
│ │ │ ├── FlowLayout.spec.ts
│ │ │ ├── FlowLayout.spec.ts-snapshots
│ │ │ │ └── Edge-cases-boxShadow-is-not-clipped-1-non-smoke-darwin.png
│ │ │ ├── FlowLayout.tsx
│ │ │ └── FlowLayoutNative.tsx
│ │ ├── Footer
│ │ │ ├── Footer.md
│ │ │ ├── Footer.module.scss
│ │ │ ├── Footer.spec.ts
│ │ │ ├── Footer.tsx
│ │ │ └── FooterNative.tsx
│ │ ├── Form
│ │ │ ├── Form.md
│ │ │ ├── Form.module.scss
│ │ │ ├── Form.spec.ts
│ │ │ ├── Form.tsx
│ │ │ ├── formActions.ts
│ │ │ ├── FormContext.ts
│ │ │ └── FormNative.tsx
│ │ ├── FormItem
│ │ │ ├── FormItem.md
│ │ │ ├── FormItem.module.scss
│ │ │ ├── FormItem.spec.ts
│ │ │ ├── FormItem.tsx
│ │ │ ├── FormItemNative.tsx
│ │ │ ├── HelperText.module.scss
│ │ │ ├── HelperText.tsx
│ │ │ ├── ItemWithLabel.tsx
│ │ │ └── Validations.ts
│ │ ├── FormSection
│ │ │ ├── FormSection.md
│ │ │ ├── FormSection.ts
│ │ │ └── FormSection.xmlui
│ │ ├── Fragment
│ │ │ ├── Fragment.spec.ts
│ │ │ └── Fragment.tsx
│ │ ├── Heading
│ │ │ ├── abstractions.ts
│ │ │ ├── H1.md
│ │ │ ├── H1.spec.ts
│ │ │ ├── H2.md
│ │ │ ├── H2.spec.ts
│ │ │ ├── H3.md
│ │ │ ├── H3.spec.ts
│ │ │ ├── H4.md
│ │ │ ├── H4.spec.ts
│ │ │ ├── H5.md
│ │ │ ├── H5.spec.ts
│ │ │ ├── H6.md
│ │ │ ├── H6.spec.ts
│ │ │ ├── Heading.md
│ │ │ ├── Heading.module.scss
│ │ │ ├── Heading.spec.ts
│ │ │ ├── Heading.tsx
│ │ │ └── HeadingNative.tsx
│ │ ├── HoverCard
│ │ │ ├── HoverCard.tsx
│ │ │ └── HovercardNative.tsx
│ │ ├── HtmlTags
│ │ │ ├── HtmlTags.module.scss
│ │ │ ├── HtmlTags.spec.ts
│ │ │ └── HtmlTags.tsx
│ │ ├── Icon
│ │ │ ├── AdmonitionDanger.tsx
│ │ │ ├── AdmonitionInfo.tsx
│ │ │ ├── AdmonitionNote.tsx
│ │ │ ├── AdmonitionTip.tsx
│ │ │ ├── AdmonitionWarning.tsx
│ │ │ ├── ApiIcon.tsx
│ │ │ ├── ArrowDropDown.module.scss
│ │ │ ├── ArrowDropDown.tsx
│ │ │ ├── ArrowDropUp.module.scss
│ │ │ ├── ArrowDropUp.tsx
│ │ │ ├── ArrowLeft.module.scss
│ │ │ ├── ArrowLeft.tsx
│ │ │ ├── ArrowRight.module.scss
│ │ │ ├── ArrowRight.tsx
│ │ │ ├── Attach.tsx
│ │ │ ├── Binding.module.scss
│ │ │ ├── Binding.tsx
│ │ │ ├── BoardIcon.tsx
│ │ │ ├── BoxIcon.tsx
│ │ │ ├── CheckIcon.tsx
│ │ │ ├── ChevronDownIcon.tsx
│ │ │ ├── ChevronLeft.tsx
│ │ │ ├── ChevronRight.tsx
│ │ │ ├── ChevronUpIcon.tsx
│ │ │ ├── CodeFileIcon.tsx
│ │ │ ├── CodeSandbox.tsx
│ │ │ ├── CompactListIcon.tsx
│ │ │ ├── ContentCopyIcon.tsx
│ │ │ ├── DarkToLightIcon.tsx
│ │ │ ├── DatabaseIcon.module.scss
│ │ │ ├── DatabaseIcon.tsx
│ │ │ ├── DocFileIcon.tsx
│ │ │ ├── DocIcon.tsx
│ │ │ ├── DotMenuHorizontalIcon.tsx
│ │ │ ├── DotMenuIcon.tsx
│ │ │ ├── EmailIcon.tsx
│ │ │ ├── EmptyFolderIcon.tsx
│ │ │ ├── ErrorIcon.tsx
│ │ │ ├── ExpressionIcon.tsx
│ │ │ ├── FillPlusCricleIcon.tsx
│ │ │ ├── FilterIcon.tsx
│ │ │ ├── FolderIcon.tsx
│ │ │ ├── GlobeIcon.tsx
│ │ │ ├── HomeIcon.tsx
│ │ │ ├── HyperLinkIcon.tsx
│ │ │ ├── Icon.md
│ │ │ ├── Icon.module.scss
│ │ │ ├── Icon.spec.ts
│ │ │ ├── Icon.tsx
│ │ │ ├── IconNative.tsx
│ │ │ ├── ImageFileIcon.tsx
│ │ │ ├── Inspect.tsx
│ │ │ ├── LightToDark.tsx
│ │ │ ├── LinkIcon.tsx
│ │ │ ├── ListIcon.tsx
│ │ │ ├── LooseListIcon.tsx
│ │ │ ├── MoonIcon.tsx
│ │ │ ├── MoreOptionsIcon.tsx
│ │ │ ├── NoSortIcon.tsx
│ │ │ ├── PDFIcon.tsx
│ │ │ ├── PenIcon.tsx
│ │ │ ├── PhoneIcon.tsx
│ │ │ ├── PhotoIcon.tsx
│ │ │ ├── PlusIcon.tsx
│ │ │ ├── SearchIcon.tsx
│ │ │ ├── ShareIcon.tsx
│ │ │ ├── SortAscendingIcon.tsx
│ │ │ ├── SortDescendingIcon.tsx
│ │ │ ├── StarsIcon.tsx
│ │ │ ├── SunIcon.tsx
│ │ │ ├── svg
│ │ │ │ ├── admonition_danger.svg
│ │ │ │ ├── admonition_info.svg
│ │ │ │ ├── admonition_note.svg
│ │ │ │ ├── admonition_tip.svg
│ │ │ │ ├── admonition_warning.svg
│ │ │ │ ├── api.svg
│ │ │ │ ├── arrow-dropdown.svg
│ │ │ │ ├── arrow-left.svg
│ │ │ │ ├── arrow-right.svg
│ │ │ │ ├── arrow-up.svg
│ │ │ │ ├── attach.svg
│ │ │ │ ├── binding.svg
│ │ │ │ ├── box.svg
│ │ │ │ ├── bulb.svg
│ │ │ │ ├── code-file.svg
│ │ │ │ ├── code-sandbox.svg
│ │ │ │ ├── dark_to_light.svg
│ │ │ │ ├── database.svg
│ │ │ │ ├── doc.svg
│ │ │ │ ├── empty-folder.svg
│ │ │ │ ├── expression.svg
│ │ │ │ ├── eye-closed.svg
│ │ │ │ ├── eye-dark.svg
│ │ │ │ ├── eye.svg
│ │ │ │ ├── file-text.svg
│ │ │ │ ├── filter.svg
│ │ │ │ ├── folder.svg
│ │ │ │ ├── img.svg
│ │ │ │ ├── inspect.svg
│ │ │ │ ├── light_to_dark.svg
│ │ │ │ ├── moon.svg
│ │ │ │ ├── pdf.svg
│ │ │ │ ├── photo.svg
│ │ │ │ ├── share.svg
│ │ │ │ ├── stars.svg
│ │ │ │ ├── sun.svg
│ │ │ │ ├── trending-down.svg
│ │ │ │ ├── trending-level.svg
│ │ │ │ ├── trending-up.svg
│ │ │ │ ├── txt.svg
│ │ │ │ ├── unknown-file.svg
│ │ │ │ ├── unlink.svg
│ │ │ │ └── xls.svg
│ │ │ ├── TableDeleteColumnIcon.tsx
│ │ │ ├── TableDeleteRowIcon.tsx
│ │ │ ├── TableInsertColumnIcon.tsx
│ │ │ ├── TableInsertRowIcon.tsx
│ │ │ ├── TrashIcon.tsx
│ │ │ ├── TrendingDownIcon.tsx
│ │ │ ├── TrendingLevelIcon.tsx
│ │ │ ├── TrendingUpIcon.tsx
│ │ │ ├── TxtIcon.tsx
│ │ │ ├── UnknownFileIcon.tsx
│ │ │ ├── UnlinkIcon.tsx
│ │ │ ├── UserIcon.tsx
│ │ │ ├── WarningIcon.tsx
│ │ │ └── XlsIcon.tsx
│ │ ├── IconProvider.tsx
│ │ ├── IconRegistryContext.tsx
│ │ ├── IFrame
│ │ │ ├── IFrame.md
│ │ │ ├── IFrame.module.scss
│ │ │ ├── IFrame.spec.ts
│ │ │ ├── IFrame.tsx
│ │ │ └── IFrameNative.tsx
│ │ ├── Image
│ │ │ ├── Image.md
│ │ │ ├── Image.module.scss
│ │ │ ├── Image.spec.ts
│ │ │ ├── Image.tsx
│ │ │ └── ImageNative.tsx
│ │ ├── Input
│ │ │ ├── index.ts
│ │ │ ├── InputAdornment.module.scss
│ │ │ ├── InputAdornment.tsx
│ │ │ ├── InputDivider.module.scss
│ │ │ ├── InputDivider.tsx
│ │ │ ├── InputLabel.module.scss
│ │ │ ├── InputLabel.tsx
│ │ │ ├── PartialInput.module.scss
│ │ │ └── PartialInput.tsx
│ │ ├── InspectButton
│ │ │ ├── InspectButton.module.scss
│ │ │ └── InspectButton.tsx
│ │ ├── Items
│ │ │ ├── Items.md
│ │ │ ├── Items.spec.ts
│ │ │ ├── Items.tsx
│ │ │ └── ItemsNative.tsx
│ │ ├── Link
│ │ │ ├── Link.md
│ │ │ ├── Link.module.scss
│ │ │ ├── Link.spec.ts
│ │ │ ├── Link.tsx
│ │ │ └── LinkNative.tsx
│ │ ├── List
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── List.md
│ │ │ ├── List.module.scss
│ │ │ ├── List.spec.ts
│ │ │ ├── List.tsx
│ │ │ └── ListNative.tsx
│ │ ├── Logo
│ │ │ ├── doc-resources
│ │ │ │ └── xmlui-logo.svg
│ │ │ ├── Logo.md
│ │ │ ├── Logo.tsx
│ │ │ └── LogoNative.tsx
│ │ ├── Markdown
│ │ │ ├── CodeText.module.scss
│ │ │ ├── CodeText.tsx
│ │ │ ├── Markdown.md
│ │ │ ├── Markdown.module.scss
│ │ │ ├── Markdown.spec.ts
│ │ │ ├── Markdown.tsx
│ │ │ ├── MarkdownNative.tsx
│ │ │ ├── parse-binding-expr.ts
│ │ │ └── utils.ts
│ │ ├── metadata-helpers.ts
│ │ ├── ModalDialog
│ │ │ ├── ConfirmationModalContextProvider.tsx
│ │ │ ├── Dialog.module.scss
│ │ │ ├── Dialog.tsx
│ │ │ ├── ModalDialog.md
│ │ │ ├── ModalDialog.module.scss
│ │ │ ├── ModalDialog.spec.ts
│ │ │ ├── ModalDialog.tsx
│ │ │ ├── ModalDialogNative.tsx
│ │ │ └── ModalVisibilityContext.tsx
│ │ ├── NavGroup
│ │ │ ├── NavGroup.md
│ │ │ ├── NavGroup.module.scss
│ │ │ ├── NavGroup.spec.ts
│ │ │ ├── NavGroup.tsx
│ │ │ ├── NavGroupContext.ts
│ │ │ └── NavGroupNative.tsx
│ │ ├── NavLink
│ │ │ ├── NavLink.md
│ │ │ ├── NavLink.module.scss
│ │ │ ├── NavLink.spec.ts
│ │ │ ├── NavLink.tsx
│ │ │ └── NavLinkNative.tsx
│ │ ├── NavPanel
│ │ │ ├── NavPanel.md
│ │ │ ├── NavPanel.module.scss
│ │ │ ├── NavPanel.spec.ts
│ │ │ ├── NavPanel.tsx
│ │ │ └── NavPanelNative.tsx
│ │ ├── NestedApp
│ │ │ ├── AppWithCodeView.module.scss
│ │ │ ├── AppWithCodeView.tsx
│ │ │ ├── AppWithCodeViewNative.tsx
│ │ │ ├── defaultProps.tsx
│ │ │ ├── logo.svg
│ │ │ ├── NestedApp.module.scss
│ │ │ ├── NestedApp.tsx
│ │ │ ├── NestedAppNative.tsx
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.tsx
│ │ │ └── utils.ts
│ │ ├── NoResult
│ │ │ ├── NoResult.md
│ │ │ ├── NoResult.module.scss
│ │ │ ├── NoResult.spec.ts
│ │ │ ├── NoResult.tsx
│ │ │ └── NoResultNative.tsx
│ │ ├── NumberBox
│ │ │ ├── numberbox-abstractions.ts
│ │ │ ├── NumberBox.md
│ │ │ ├── NumberBox.module.scss
│ │ │ ├── NumberBox.spec.ts
│ │ │ ├── NumberBox.tsx
│ │ │ └── NumberBoxNative.tsx
│ │ ├── Option
│ │ │ ├── Option.md
│ │ │ ├── Option.spec.ts
│ │ │ ├── Option.tsx
│ │ │ ├── OptionNative.tsx
│ │ │ └── OptionTypeProvider.tsx
│ │ ├── PageMetaTitle
│ │ │ ├── PageMetaTilteNative.tsx
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── PageMetaTitle.spec.ts
│ │ │ └── PageMetaTitle.tsx
│ │ ├── Pages
│ │ │ ├── Page.md
│ │ │ ├── Pages.md
│ │ │ ├── Pages.module.scss
│ │ │ ├── Pages.tsx
│ │ │ └── PagesNative.tsx
│ │ ├── Pagination
│ │ │ ├── Pagination.md
│ │ │ ├── Pagination.module.scss
│ │ │ ├── Pagination.spec.ts
│ │ │ ├── Pagination.tsx
│ │ │ └── PaginationNative.tsx
│ │ ├── PositionedContainer
│ │ │ ├── PositionedContainer.module.scss
│ │ │ ├── PositionedContainer.tsx
│ │ │ └── PositionedContainerNative.tsx
│ │ ├── ProfileMenu
│ │ │ ├── ProfileMenu.module.scss
│ │ │ └── ProfileMenu.tsx
│ │ ├── ProgressBar
│ │ │ ├── ProgressBar.md
│ │ │ ├── ProgressBar.module.scss
│ │ │ ├── ProgressBar.spec.ts
│ │ │ ├── ProgressBar.tsx
│ │ │ └── ProgressBarNative.tsx
│ │ ├── Queue
│ │ │ ├── Queue.md
│ │ │ ├── Queue.spec.ts
│ │ │ ├── Queue.tsx
│ │ │ ├── queueActions.ts
│ │ │ └── QueueNative.tsx
│ │ ├── RadioGroup
│ │ │ ├── RadioGroup.md
│ │ │ ├── RadioGroup.module.scss
│ │ │ ├── RadioGroup.spec.ts
│ │ │ ├── RadioGroup.tsx
│ │ │ ├── RadioGroupNative.tsx
│ │ │ ├── RadioItem.tsx
│ │ │ └── RadioItemNative.tsx
│ │ ├── RealTimeAdapter
│ │ │ ├── RealTimeAdapter.tsx
│ │ │ └── RealTimeAdapterNative.tsx
│ │ ├── Redirect
│ │ │ ├── Redirect.md
│ │ │ ├── Redirect.spec.ts
│ │ │ └── Redirect.tsx
│ │ ├── ResponsiveBar
│ │ │ ├── README.md
│ │ │ ├── ResponsiveBar.md
│ │ │ ├── ResponsiveBar.module.scss
│ │ │ ├── ResponsiveBar.spec.ts
│ │ │ ├── ResponsiveBar.tsx
│ │ │ └── ResponsiveBarNative.tsx
│ │ ├── Select
│ │ │ ├── HiddenOption.tsx
│ │ │ ├── OptionContext.ts
│ │ │ ├── Select.md
│ │ │ ├── Select.module.scss
│ │ │ ├── Select.spec.ts
│ │ │ ├── Select.tsx
│ │ │ ├── SelectContext.tsx
│ │ │ └── SelectNative.tsx
│ │ ├── SelectionStore
│ │ │ ├── SelectionStore.md
│ │ │ ├── SelectionStore.tsx
│ │ │ └── SelectionStoreNative.tsx
│ │ ├── Slider
│ │ │ ├── Slider.md
│ │ │ ├── Slider.module.scss
│ │ │ ├── Slider.spec.ts
│ │ │ ├── Slider.tsx
│ │ │ └── SliderNative.tsx
│ │ ├── Slot
│ │ │ ├── Slot.md
│ │ │ ├── Slot.spec.ts
│ │ │ └── Slot.ts
│ │ ├── SlotItem.tsx
│ │ ├── SpaceFiller
│ │ │ ├── SpaceFiller.md
│ │ │ ├── SpaceFiller.module.scss
│ │ │ ├── SpaceFiller.spec.ts
│ │ │ ├── SpaceFiller.tsx
│ │ │ └── SpaceFillerNative.tsx
│ │ ├── Spinner
│ │ │ ├── Spinner.md
│ │ │ ├── Spinner.module.scss
│ │ │ ├── Spinner.spec.ts
│ │ │ ├── Spinner.tsx
│ │ │ └── SpinnerNative.tsx
│ │ ├── Splitter
│ │ │ ├── HSplitter.md
│ │ │ ├── HSplitter.spec.ts
│ │ │ ├── Splitter.md
│ │ │ ├── Splitter.module.scss
│ │ │ ├── Splitter.spec.ts
│ │ │ ├── Splitter.tsx
│ │ │ ├── SplitterNative.tsx
│ │ │ ├── utils.ts
│ │ │ ├── VSplitter.md
│ │ │ └── VSplitter.spec.ts
│ │ ├── Stack
│ │ │ ├── CHStack.md
│ │ │ ├── CHStack.spec.ts
│ │ │ ├── CVStack.md
│ │ │ ├── CVStack.spec.ts
│ │ │ ├── HStack.md
│ │ │ ├── HStack.spec.ts
│ │ │ ├── Stack.md
│ │ │ ├── Stack.module.scss
│ │ │ ├── Stack.spec.ts
│ │ │ ├── Stack.tsx
│ │ │ ├── StackNative.tsx
│ │ │ ├── VStack.md
│ │ │ └── VStack.spec.ts
│ │ ├── StickyBox
│ │ │ ├── StickyBox.md
│ │ │ ├── StickyBox.module.scss
│ │ │ ├── StickyBox.tsx
│ │ │ └── StickyBoxNative.tsx
│ │ ├── Switch
│ │ │ ├── Switch.md
│ │ │ ├── Switch.spec.ts
│ │ │ └── Switch.tsx
│ │ ├── Table
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── react-table-config.d.ts
│ │ │ ├── Table.md
│ │ │ ├── Table.module.scss
│ │ │ ├── Table.spec.ts
│ │ │ ├── Table.tsx
│ │ │ ├── TableNative.tsx
│ │ │ └── useRowSelection.tsx
│ │ ├── TableOfContents
│ │ │ ├── TableOfContents.module.scss
│ │ │ ├── TableOfContents.spec.ts
│ │ │ ├── TableOfContents.tsx
│ │ │ └── TableOfContentsNative.tsx
│ │ ├── Tabs
│ │ │ ├── TabContext.tsx
│ │ │ ├── TabItem.md
│ │ │ ├── TabItem.tsx
│ │ │ ├── TabItemNative.tsx
│ │ │ ├── Tabs.md
│ │ │ ├── Tabs.module.scss
│ │ │ ├── Tabs.spec.ts
│ │ │ ├── Tabs.tsx
│ │ │ └── TabsNative.tsx
│ │ ├── Text
│ │ │ ├── Text.md
│ │ │ ├── Text.module.scss
│ │ │ ├── Text.spec.ts
│ │ │ ├── Text.tsx
│ │ │ └── TextNative.tsx
│ │ ├── TextArea
│ │ │ ├── TextArea.md
│ │ │ ├── TextArea.module.scss
│ │ │ ├── TextArea.spec.ts
│ │ │ ├── TextArea.tsx
│ │ │ ├── TextAreaNative.tsx
│ │ │ ├── TextAreaResizable.tsx
│ │ │ └── useComposedRef.ts
│ │ ├── TextBox
│ │ │ ├── TextBox.md
│ │ │ ├── TextBox.module.scss
│ │ │ ├── TextBox.spec.ts
│ │ │ ├── TextBox.tsx
│ │ │ └── TextBoxNative.tsx
│ │ ├── Theme
│ │ │ ├── NotificationToast.tsx
│ │ │ ├── Theme.md
│ │ │ ├── Theme.module.scss
│ │ │ ├── Theme.spec.ts
│ │ │ ├── Theme.tsx
│ │ │ └── ThemeNative.tsx
│ │ ├── TimeInput
│ │ │ ├── TimeInput.md
│ │ │ ├── TimeInput.module.scss
│ │ │ ├── TimeInput.spec.ts
│ │ │ ├── TimeInput.tsx
│ │ │ ├── TimeInputNative.tsx
│ │ │ └── utils.ts
│ │ ├── Timer
│ │ │ ├── Timer.md
│ │ │ ├── Timer.spec.ts
│ │ │ ├── Timer.tsx
│ │ │ └── TimerNative.tsx
│ │ ├── Toggle
│ │ │ ├── Toggle.module.scss
│ │ │ └── Toggle.tsx
│ │ ├── ToneChangerButton
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneChangerButton.spec.ts
│ │ │ └── ToneChangerButton.tsx
│ │ ├── ToneSwitch
│ │ │ ├── ToneSwitch.md
│ │ │ ├── ToneSwitch.module.scss
│ │ │ ├── ToneSwitch.spec.ts
│ │ │ ├── ToneSwitch.tsx
│ │ │ └── ToneSwitchNative.tsx
│ │ ├── Tooltip
│ │ │ ├── Tooltip.md
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.spec.ts
│ │ │ ├── Tooltip.tsx
│ │ │ └── TooltipNative.tsx
│ │ ├── Tree
│ │ │ ├── testData.ts
│ │ │ ├── Tree-dynamic.spec.ts
│ │ │ ├── Tree-icons.spec.ts
│ │ │ ├── Tree.md
│ │ │ ├── Tree.spec.ts
│ │ │ ├── TreeComponent.module.scss
│ │ │ ├── TreeComponent.tsx
│ │ │ └── TreeNative.tsx
│ │ ├── TreeDisplay
│ │ │ ├── TreeDisplay.md
│ │ │ ├── TreeDisplay.module.scss
│ │ │ ├── TreeDisplay.tsx
│ │ │ └── TreeDisplayNative.tsx
│ │ ├── ValidationSummary
│ │ │ ├── ValidationSummary.module.scss
│ │ │ └── ValidationSummary.tsx
│ │ └── VisuallyHidden.tsx
│ ├── components-core
│ │ ├── abstractions
│ │ │ ├── ComponentRenderer.ts
│ │ │ ├── LoaderRenderer.ts
│ │ │ ├── standalone.ts
│ │ │ └── treeAbstractions.ts
│ │ ├── action
│ │ │ ├── actions.ts
│ │ │ ├── APICall.tsx
│ │ │ ├── FileDownloadAction.tsx
│ │ │ ├── FileUploadAction.tsx
│ │ │ ├── NavigateAction.tsx
│ │ │ └── TimedAction.tsx
│ │ ├── ApiBoundComponent.tsx
│ │ ├── appContext
│ │ │ ├── date-functions.ts
│ │ │ ├── math-function.ts
│ │ │ └── misc-utils.ts
│ │ ├── AppContext.tsx
│ │ ├── behaviors
│ │ │ ├── Behavior.tsx
│ │ │ └── CoreBehaviors.tsx
│ │ ├── component-hooks.ts
│ │ ├── ComponentDecorator.tsx
│ │ ├── ComponentViewer.tsx
│ │ ├── CompoundComponent.tsx
│ │ ├── constants.ts
│ │ ├── DebugViewProvider.tsx
│ │ ├── descriptorHelper.ts
│ │ ├── devtools
│ │ │ ├── InspectorDialog.module.scss
│ │ │ ├── InspectorDialog.tsx
│ │ │ └── InspectorDialogVisibilityContext.tsx
│ │ ├── EngineError.ts
│ │ ├── event-handlers.ts
│ │ ├── InspectorButton.module.scss
│ │ ├── InspectorContext.tsx
│ │ ├── interception
│ │ │ ├── abstractions.ts
│ │ │ ├── ApiInterceptor.ts
│ │ │ ├── ApiInterceptorProvider.tsx
│ │ │ ├── apiInterceptorWorker.ts
│ │ │ ├── Backend.ts
│ │ │ ├── Errors.ts
│ │ │ ├── IndexedDb.ts
│ │ │ ├── initMock.ts
│ │ │ ├── InMemoryDb.ts
│ │ │ ├── ReadonlyCollection.ts
│ │ │ └── useApiInterceptorContext.tsx
│ │ ├── loader
│ │ │ ├── ApiLoader.tsx
│ │ │ ├── DataLoader.tsx
│ │ │ ├── ExternalDataLoader.tsx
│ │ │ ├── Loader.tsx
│ │ │ ├── MockLoaderRenderer.tsx
│ │ │ └── PageableLoader.tsx
│ │ ├── LoaderComponent.tsx
│ │ ├── markup-check.ts
│ │ ├── parts.ts
│ │ ├── renderers.ts
│ │ ├── rendering
│ │ │ ├── AppContent.tsx
│ │ │ ├── AppRoot.tsx
│ │ │ ├── AppWrapper.tsx
│ │ │ ├── buildProxy.ts
│ │ │ ├── collectFnVarDeps.ts
│ │ │ ├── ComponentAdapter.tsx
│ │ │ ├── ComponentWrapper.tsx
│ │ │ ├── Container.tsx
│ │ │ ├── containers.ts
│ │ │ ├── ContainerWrapper.tsx
│ │ │ ├── ErrorBoundary.module.scss
│ │ │ ├── ErrorBoundary.tsx
│ │ │ ├── InvalidComponent.module.scss
│ │ │ ├── InvalidComponent.tsx
│ │ │ ├── nodeUtils.ts
│ │ │ ├── reducer.ts
│ │ │ ├── renderChild.tsx
│ │ │ ├── StandaloneComponent.tsx
│ │ │ ├── StateContainer.tsx
│ │ │ ├── UnknownComponent.module.scss
│ │ │ ├── UnknownComponent.tsx
│ │ │ └── valueExtractor.ts
│ │ ├── reportEngineError.ts
│ │ ├── RestApiProxy.ts
│ │ ├── script-runner
│ │ │ ├── asyncProxy.ts
│ │ │ ├── AttributeValueParser.ts
│ │ │ ├── bannedFunctions.ts
│ │ │ ├── BindingTreeEvaluationContext.ts
│ │ │ ├── eval-tree-async.ts
│ │ │ ├── eval-tree-common.ts
│ │ │ ├── eval-tree-sync.ts
│ │ │ ├── ParameterParser.ts
│ │ │ ├── process-statement-async.ts
│ │ │ ├── process-statement-common.ts
│ │ │ ├── process-statement-sync.ts
│ │ │ ├── ScriptingSourceTree.ts
│ │ │ ├── simplify-expression.ts
│ │ │ ├── statement-queue.ts
│ │ │ └── visitors.ts
│ │ ├── StandaloneApp.tsx
│ │ ├── StandaloneExtensionManager.ts
│ │ ├── TableOfContentsContext.tsx
│ │ ├── theming
│ │ │ ├── _themes.scss
│ │ │ ├── component-layout-resolver.ts
│ │ │ ├── extendThemeUtils.ts
│ │ │ ├── hvar.ts
│ │ │ ├── layout-resolver.ts
│ │ │ ├── parse-layout-props.ts
│ │ │ ├── StyleContext.tsx
│ │ │ ├── StyleRegistry.ts
│ │ │ ├── ThemeContext.tsx
│ │ │ ├── ThemeProvider.tsx
│ │ │ ├── themes
│ │ │ │ ├── base-utils.ts
│ │ │ │ ├── palette.ts
│ │ │ │ ├── root.ts
│ │ │ │ ├── solid.ts
│ │ │ │ ├── theme-colors.ts
│ │ │ │ └── xmlui.ts
│ │ │ ├── themeVars.module.scss
│ │ │ ├── themeVars.ts
│ │ │ ├── transformThemeVars.ts
│ │ │ └── utils.ts
│ │ ├── utils
│ │ │ ├── actionUtils.ts
│ │ │ ├── audio-utils.ts
│ │ │ ├── base64-utils.ts
│ │ │ ├── compound-utils.ts
│ │ │ ├── css-utils.ts
│ │ │ ├── DataLoaderQueryKeyGenerator.ts
│ │ │ ├── date-utils.ts
│ │ │ ├── extractParam.ts
│ │ │ ├── hooks.tsx
│ │ │ ├── LruCache.ts
│ │ │ ├── mergeProps.ts
│ │ │ ├── misc.ts
│ │ │ ├── request-params.ts
│ │ │ ├── statementUtils.ts
│ │ │ └── treeUtils.ts
│ │ └── xmlui-parser.ts
│ ├── index-standalone.ts
│ ├── index.scss
│ ├── index.ts
│ ├── language-server
│ │ ├── server-common.ts
│ │ ├── server-web-worker.ts
│ │ ├── server.ts
│ │ ├── services
│ │ │ ├── common
│ │ │ │ ├── docs-generation.ts
│ │ │ │ ├── lsp-utils.ts
│ │ │ │ ├── metadata-utils.ts
│ │ │ │ └── syntax-node-utilities.ts
│ │ │ ├── completion.ts
│ │ │ ├── diagnostic.ts
│ │ │ ├── format.ts
│ │ │ └── hover.ts
│ │ └── xmlui-metadata-generated.mjs
│ ├── logging
│ │ ├── LoggerContext.tsx
│ │ ├── LoggerInitializer.tsx
│ │ ├── LoggerService.ts
│ │ └── xmlui.ts
│ ├── logo.svg
│ ├── parsers
│ │ ├── common
│ │ │ ├── GenericToken.ts
│ │ │ ├── InputStream.ts
│ │ │ └── utils.ts
│ │ ├── scripting
│ │ │ ├── code-behind-collect.ts
│ │ │ ├── Lexer.ts
│ │ │ ├── modules.ts
│ │ │ ├── Parser.ts
│ │ │ ├── ParserError.ts
│ │ │ ├── ScriptingNodeTypes.ts
│ │ │ ├── TokenTrait.ts
│ │ │ ├── TokenType.ts
│ │ │ └── tree-visitor.ts
│ │ ├── style-parser
│ │ │ ├── errors.ts
│ │ │ ├── source-tree.ts
│ │ │ ├── StyleInputStream.ts
│ │ │ ├── StyleLexer.ts
│ │ │ ├── StyleParser.ts
│ │ │ └── tokens.ts
│ │ └── xmlui-parser
│ │ ├── CharacterCodes.ts
│ │ ├── diagnostics.ts
│ │ ├── fileExtensions.ts
│ │ ├── index.ts
│ │ ├── lint.ts
│ │ ├── parser.ts
│ │ ├── ParserError.ts
│ │ ├── scanner.ts
│ │ ├── syntax-kind.ts
│ │ ├── syntax-node.ts
│ │ ├── transform.ts
│ │ ├── utils.ts
│ │ ├── xmlui-serializer.ts
│ │ └── xmlui-tree.ts
│ ├── react-app-env.d.ts
│ ├── syntax
│ │ ├── monaco
│ │ │ ├── grammar.monacoLanguage.ts
│ │ │ ├── index.ts
│ │ │ ├── xmlui-dark.ts
│ │ │ ├── xmlui-light.ts
│ │ │ └── xmluiscript.monacoLanguage.ts
│ │ └── textMate
│ │ ├── index.ts
│ │ ├── xmlui-dark.json
│ │ ├── xmlui-light.json
│ │ ├── xmlui.json
│ │ └── xmlui.tmLanguage.json
│ ├── testing
│ │ ├── assertions.ts
│ │ ├── component-test-helpers.ts
│ │ ├── ComponentDrivers.ts
│ │ ├── drivers
│ │ │ ├── DateInputDriver.ts
│ │ │ ├── ModalDialogDriver.ts
│ │ │ ├── NumberBoxDriver.ts
│ │ │ ├── TextBoxDriver.ts
│ │ │ ├── TimeInputDriver.ts
│ │ │ ├── TimerDriver.ts
│ │ │ └── TreeDriver.ts
│ │ ├── fixtures.ts
│ │ ├── infrastructure
│ │ │ ├── index.html
│ │ │ ├── main.tsx
│ │ │ ├── public
│ │ │ │ ├── mockServiceWorker.js
│ │ │ │ ├── resources
│ │ │ │ │ ├── bell.svg
│ │ │ │ │ ├── box.svg
│ │ │ │ │ ├── doc.svg
│ │ │ │ │ ├── eye.svg
│ │ │ │ │ ├── flower-640x480.jpg
│ │ │ │ │ ├── sun.svg
│ │ │ │ │ ├── test-image-100x100.jpg
│ │ │ │ │ └── txt.svg
│ │ │ │ └── serve.json
│ │ │ └── TestBed.tsx
│ │ └── themed-app-test-helpers.ts
│ └── vite-env.d.ts
├── tests
│ ├── components
│ │ ├── CodeBlock
│ │ │ └── hightlight-code.test.ts
│ │ ├── playground-pattern.test.ts
│ │ └── Tree
│ │ └── Tree-states.test.ts
│ ├── components-core
│ │ ├── abstractions
│ │ │ └── treeAbstractions.test.ts
│ │ ├── container
│ │ │ └── buildProxy.test.ts
│ │ ├── interception
│ │ │ ├── orderBy.test.ts
│ │ │ ├── ReadOnlyCollection.test.ts
│ │ │ └── request-param-converter.test.ts
│ │ ├── scripts-runner
│ │ │ ├── AttributeValueParser.test.ts
│ │ │ ├── eval-tree-arrow-async.test.ts
│ │ │ ├── eval-tree-arrow.test.ts
│ │ │ ├── eval-tree-func-decl-async.test.ts
│ │ │ ├── eval-tree-func-decl.test.ts
│ │ │ ├── eval-tree-pre-post.test.ts
│ │ │ ├── eval-tree-regression.test.ts
│ │ │ ├── eval-tree.test.ts
│ │ │ ├── function-proxy.test.ts
│ │ │ ├── parser-regression.test.ts
│ │ │ ├── process-event.test.ts
│ │ │ ├── process-function.test.ts
│ │ │ ├── process-implicit-context.test.ts
│ │ │ ├── process-statement-asgn.test.ts
│ │ │ ├── process-statement-destruct.test.ts
│ │ │ ├── process-statement-regs.test.ts
│ │ │ ├── process-statement-sync.test.ts
│ │ │ ├── process-statement.test.ts
│ │ │ ├── process-switch-sync.test.ts
│ │ │ ├── process-switch.test.ts
│ │ │ ├── process-try-sync.test.ts
│ │ │ ├── process-try.test.ts
│ │ │ └── test-helpers.ts
│ │ ├── test-metadata-handler.ts
│ │ ├── theming
│ │ │ ├── border-segments.test.ts
│ │ │ ├── component-layout.resolver.test.ts
│ │ │ ├── layout-property-parser.test.ts
│ │ │ ├── layout-resolver.test.ts
│ │ │ ├── layout-resolver2.test.ts
│ │ │ ├── layout-vp-override.test.ts
│ │ │ └── padding-segments.test.ts
│ │ └── utils
│ │ ├── date-utils.test.ts
│ │ ├── format-human-elapsed-time.test.ts
│ │ └── LruCache.test.ts
│ ├── language-server
│ │ ├── completion.test.ts
│ │ ├── format.test.ts
│ │ ├── hover.test.ts
│ │ └── mockData.ts
│ └── parsers
│ ├── common
│ │ └── input-stream.test.ts
│ ├── markdown
│ │ └── parse-binding-expression.test.ts
│ ├── parameter-parser.test.ts
│ ├── paremeter-parser.test.ts
│ ├── scripting
│ │ ├── eval-tree-arrow.test.ts
│ │ ├── eval-tree-pre-post.test.ts
│ │ ├── eval-tree.test.ts
│ │ ├── function-proxy.test.ts
│ │ ├── lexer-literals.test.ts
│ │ ├── lexer-misc.test.ts
│ │ ├── module-parse.test.ts
│ │ ├── parser-arrow.test.ts
│ │ ├── parser-assignments.test.ts
│ │ ├── parser-binary.test.ts
│ │ ├── parser-destructuring.test.ts
│ │ ├── parser-errors.test.ts
│ │ ├── parser-expressions.test.ts
│ │ ├── parser-function.test.ts
│ │ ├── parser-literals.test.ts
│ │ ├── parser-primary.test.ts
│ │ ├── parser-regex.test.ts
│ │ ├── parser-statements.test.ts
│ │ ├── parser-unary.test.ts
│ │ ├── process-event.test.ts
│ │ ├── process-implicit-context.test.ts
│ │ ├── process-statement-asgn.test.ts
│ │ ├── process-statement-destruct.test.ts
│ │ ├── process-statement-regs.test.ts
│ │ ├── process-statement-sync.test.ts
│ │ ├── process-statement.test.ts
│ │ ├── process-switch-sync.test.ts
│ │ ├── process-switch.test.ts
│ │ ├── process-try-sync.test.ts
│ │ ├── process-try.test.ts
│ │ ├── simplify-expression.test.ts
│ │ ├── statement-hooks.test.ts
│ │ └── test-helpers.ts
│ ├── style-parser
│ │ ├── generateHvarChain.test.ts
│ │ ├── parseHVar.test.ts
│ │ ├── parser.test.ts
│ │ └── tokens.test.ts
│ └── xmlui
│ ├── lint.test.ts
│ ├── parser.test.ts
│ ├── scanner.test.ts
│ ├── transform.attr.test.ts
│ ├── transform.circular.test.ts
│ ├── transform.element.test.ts
│ ├── transform.errors.test.ts
│ ├── transform.escape.test.ts
│ ├── transform.regression.test.ts
│ ├── transform.script.test.ts
│ ├── transform.test.ts
│ └── xmlui.ts
├── tests-e2e
│ ├── api-bound-component-regression.spec.ts
│ ├── api-call-as-extracted-component.spec.ts
│ ├── assign-to-object-or-array-regression.spec.ts
│ ├── binding-regression.spec.ts
│ ├── children-as-template-context-vars.spec.ts
│ ├── compound-component.spec.ts
│ ├── context-vars-regression.spec.ts
│ ├── data-bindings.spec.ts
│ ├── datasource-and-api-usage-in-var.spec.ts
│ ├── datasource-direct-binding.spec.ts
│ ├── datasource-onLoaded-regression.spec.ts
│ ├── modify-array-item-regression.spec.ts
│ ├── namespaces.spec.ts
│ ├── push-to-array-regression.spec.ts
│ ├── screen-breakpoints.spec.ts
│ ├── scripting.spec.ts
│ ├── state-scope-in-pages.spec.ts
│ └── state-var-scopes.spec.ts
├── tsconfig.bin.json
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── vitest.config.ts
```
# Files
--------------------------------------------------------------------------------
/xmlui/src/components-core/script-runner/process-statement-async.ts:
--------------------------------------------------------------------------------
```typescript
1 | import type { LoopScope } from "../../abstractions/scripting/LoopScope";
2 | import type { BlockScope } from "../../abstractions/scripting/BlockScope";
3 | import type { LogicalThread } from "../../abstractions/scripting/LogicalThread";
4 | import {
5 | T_ARROW_EXPRESSION_STATEMENT,
6 | T_ASSIGNMENT_EXPRESSION,
7 | T_BLOCK_STATEMENT,
8 | T_BREAK_STATEMENT,
9 | T_CONST_STATEMENT,
10 | T_CONTINUE_STATEMENT,
11 | T_DO_WHILE_STATEMENT,
12 | T_EMPTY_STATEMENT,
13 | T_EXPRESSION_STATEMENT,
14 | T_FOR_IN_STATEMENT,
15 | T_FOR_OF_STATEMENT,
16 | T_FOR_STATEMENT,
17 | T_FUNCTION_DECLARATION,
18 | T_IDENTIFIER,
19 | T_IF_STATEMENT,
20 | T_LET_STATEMENT,
21 | T_LITERAL,
22 | T_RETURN_STATEMENT,
23 | T_SWITCH_STATEMENT,
24 | T_THROW_STATEMENT,
25 | T_TRY_STATEMENT,
26 | T_VAR_STATEMENT,
27 | T_WHILE_STATEMENT,
28 | type ArrayDestructure,
29 | type AssignmentExpression,
30 | type Identifier,
31 | type Literal,
32 | type ObjectDestructure,
33 | type Statement,
34 | type VarDeclaration,
35 | } from "./ScriptingSourceTree";
36 | import { StatementExecutionError, ThrowStatementError } from "../EngineError";
37 | import { reportEngineError } from "../reportEngineError";
38 | import type {
39 | QueueInfo,
40 | StatementQueueItem,
41 | ProcessOutcome,
42 | StatementRunTimeInfo,
43 | StatementWithInfo} from "./statement-queue";
44 | import {
45 | StatementQueue,
46 | mapStatementsToQueueItems,
47 | mapToItem
48 | } from "./statement-queue";
49 | import { evalBindingAsync, executeArrowExpression } from "./eval-tree-async";
50 | import type { BindingTreeEvaluationContext } from "./BindingTreeEvaluationContext";
51 | import {
52 | ensureMainThread,
53 | innermostBlockScope,
54 | innermostLoopScope,
55 | createLoopScope,
56 | provideLoopBody,
57 | releaseLoopScope,
58 | provideTryBody,
59 | createTryScope,
60 | innermostTryScope,
61 | provideFinallyBody,
62 | provideCatchBody,
63 | provideFinallyErrorBody,
64 | hoistFunctionDeclarations,
65 | closing,
66 | toStatementItems,
67 | guard,
68 | } from "./process-statement-common";
69 | import { createXmlUiTreeNodeId } from "../../parsers/scripting/Parser";
70 |
71 | // --- Helper function to process the entire queue asynchronously
72 | export async function processStatementQueueAsync(
73 | statements: Statement[],
74 | evalContext: BindingTreeEvaluationContext,
75 | thread?: LogicalThread,
76 | ): Promise<QueueInfo> {
77 | if (!thread) {
78 | // --- Create the main thread for the queue
79 | thread = ensureMainThread(evalContext);
80 | }
81 |
82 | // --- Hoist function declarations to the top scope
83 | hoistFunctionDeclarations(thread, statements);
84 |
85 | // --- Fill the queue with items
86 | const queue = new StatementQueue();
87 | queue.push(mapStatementsToQueueItems(toStatementItems(statements)));
88 |
89 | // --- Prepare queue diagnostics information
90 | const diagInfo: QueueInfo = {
91 | processedStatements: 0,
92 | maxQueueLength: queue.length,
93 | unshiftedItems: 0,
94 | clearToLabels: 0,
95 | maxBlocks: 0,
96 | maxLoops: 0,
97 | };
98 |
99 | // --- Consume the queue
100 | let startTime = new Date().getTime();
101 | while (queue.length > 0 && !evalContext.cancellationToken?.cancelled) {
102 | // --- Allow time to break from infinite loops
103 | if (evalContext.timeout && new Date().getTime() - startTime > evalContext.timeout) {
104 | throw new Error("Script execution timeout");
105 | }
106 |
107 | // --- Process the first item
108 | const queueItem = queue.dequeue();
109 | thread.breakLabelValue = queue.length > 0 ? queue.peek()!.label : -1;
110 |
111 | let outcome: ProcessOutcome | undefined;
112 | try {
113 | // --- Sign that the statement is about to start
114 | await evalContext?.onStatementStarted?.(evalContext, queueItem!.statement);
115 |
116 | // --- Execute the statement
117 | outcome = await processStatementAsync(
118 | queueItem!.statement,
119 | queueItem?.execInfo ?? {},
120 | evalContext,
121 | thread,
122 | );
123 | } catch (err) {
124 | if (thread.tryBlocks && thread.tryBlocks.length > 0) {
125 | // --- We have a try block to handle this error
126 | const tryScope = thread.tryBlocks[thread.tryBlocks.length - 1];
127 |
128 | // --- Sign the error to raise. Next time the guarded try block will execute the catch block, if there is any
129 | tryScope.errorToThrow = err;
130 | tryScope.errorSource = tryScope.processingPhase;
131 | tryScope.processingPhase = "error";
132 |
133 | // --- Let's skip the remaining parts of the current block (try/catch/finally)
134 | outcome = {
135 | clearToLabel: tryScope.tryLabel,
136 | };
137 | } else {
138 | if (err instanceof ThrowStatementError) {
139 | reportEngineError(err);
140 | } else {
141 | // TODO: Provide source code information
142 | reportEngineError(
143 | new StatementExecutionError(err as any /* queueItem!.statement?.source */),
144 | err,
145 | );
146 | }
147 | }
148 | }
149 |
150 | // --- Modify the queue's content according to the outcome
151 | if (outcome) {
152 | if (outcome.toUnshift) {
153 | queue.unshift(outcome.toUnshift);
154 |
155 | diagInfo.unshiftedItems += outcome.toUnshift.length;
156 | }
157 | if (outcome.clearToLabel !== undefined) {
158 | queue.clearToLabel(outcome.clearToLabel);
159 |
160 | diagInfo.clearToLabels++;
161 | }
162 | }
163 |
164 | // --- Sign that the statement has been completed
165 | await evalContext?.onStatementCompleted?.(evalContext, queueItem!.statement);
166 |
167 | // --- Provide diagnostics
168 | if (queue.length > diagInfo.maxQueueLength) {
169 | diagInfo.maxQueueLength = queue.length;
170 | }
171 | if (thread.blocks && thread.blocks!.length > diagInfo.maxBlocks) {
172 | diagInfo.maxBlocks = thread.blocks!.length;
173 | }
174 | if (thread.loops && thread.loops.length > diagInfo.maxLoops) {
175 | diagInfo.maxLoops = thread.loops.length;
176 | }
177 | diagInfo.processedStatements++;
178 | }
179 |
180 | // --- Done.
181 | return diagInfo;
182 | }
183 |
184 | /**
185 | * Process the specified statement asynchronously
186 | * @param statement Statement to process
187 | * @param execInfo Execution information
188 | * @param evalContext Evaluation context used for processing
189 | * @param thread Logical thread to use for statement processing
190 | * @param onStatementCompleted
191 | * @returns Items to put back into the queue of statements
192 | */
193 | async function processStatementAsync(
194 | statement: Statement,
195 | execInfo: StatementRunTimeInfo,
196 | evalContext: BindingTreeEvaluationContext,
197 | thread: LogicalThread,
198 | ): Promise<ProcessOutcome> {
199 | // --- These items should be put in the statement queue after return
200 | let toUnshift: StatementQueueItem[] = [];
201 | let clearToLabel: number | undefined;
202 |
203 | // --- Process the statement according to its type
204 | switch (statement.type) {
205 | case T_FUNCTION_DECLARATION:
206 | // --- Function declarations are already hoisted, nothing to do
207 | break;
208 |
209 | case T_VAR_STATEMENT:
210 | if (thread !== evalContext.mainThread) {
211 | throw new Error("'var' declarations are not allowed within functions");
212 | }
213 | break;
214 |
215 | case T_EMPTY_STATEMENT:
216 | // --- Nothing to do
217 | break;
218 |
219 | case T_BLOCK_STATEMENT:
220 | // --- No statement, nothing to process
221 | if (statement.stmts.length === 0) break;
222 |
223 | // --- Create a new block scope
224 | thread.blocks ??= [];
225 | thread.blocks.push({ vars: {} });
226 |
227 | // --- Hoist function declarations to the innermost block scope
228 | hoistFunctionDeclarations(thread, statement.stmts);
229 |
230 | // --- Queue the block scope's body...
231 | toUnshift = mapStatementsToQueueItems([
232 | ...toStatementItems(statement.stmts),
233 | // --- ...and an empty statement to remove the block scope
234 | closing(),
235 | ]);
236 | break;
237 |
238 | case T_EXPRESSION_STATEMENT:
239 | // --- Just evaluate it
240 | const statementValue = await evalBindingAsync(
241 | statement.expr,
242 | evalContext,
243 | thread,
244 | );
245 | if (thread.blocks && thread.blocks.length !== 0) {
246 | thread.blocks[thread.blocks.length - 1].returnValue = statementValue;
247 | }
248 | break;
249 |
250 | case T_ARROW_EXPRESSION_STATEMENT:
251 | // --- Compile the arrow expression
252 | const arrowFuncValue = await executeArrowExpression(
253 | statement.expr,
254 | evalContext,
255 | thread,
256 | ...(evalContext.eventArgs ?? []),
257 | );
258 | if (thread.blocks && thread.blocks.length !== 0) {
259 | thread.blocks[thread.blocks.length - 1].returnValue = arrowFuncValue;
260 | }
261 | break;
262 |
263 | case T_LET_STATEMENT: {
264 | // --- Create a new variable in the innermost scope
265 | const block = innermostBlockScope(thread);
266 | if (!block) {
267 | throw new Error("Missing block scope");
268 | }
269 | await processDeclarationsAsync(block, evalContext, thread, statement.decls);
270 | break;
271 | }
272 |
273 | case T_CONST_STATEMENT: {
274 | // --- Create a new variable in the innermost scope
275 | const block = innermostBlockScope(thread);
276 | if (!block) {
277 | throw new Error("Missing block scope");
278 | }
279 | await processDeclarationsAsync(block, evalContext, thread, statement.decls, true);
280 | break;
281 | }
282 |
283 | case T_IF_STATEMENT:
284 | // --- Evaluate the condition
285 | const condition = !!(await evalBindingAsync(statement.cond, evalContext, thread));
286 | if (condition) {
287 | toUnshift = mapToItem(statement.thenB);
288 | } else if (statement.elseB) {
289 | toUnshift = mapToItem(statement.elseB);
290 | }
291 | break;
292 |
293 | case T_RETURN_STATEMENT: {
294 | // --- Check if return is valid here
295 | let blockScope = innermostBlockScope(thread);
296 | if (blockScope === undefined) {
297 | throw new Error("Return requires a block scope");
298 | }
299 |
300 | // --- Store the return value
301 | thread.returnValue = statement.expr
302 | ? await evalBindingAsync(statement.expr, evalContext, thread)
303 | : undefined;
304 |
305 | // --- Check for try blocks
306 | if ((thread.tryBlocks ?? []).length > 0) {
307 | // --- Mark the loop's try scope to exit with "return"
308 | const returnTryScope = thread.tryBlocks![0];
309 | returnTryScope.exitType = "return";
310 |
311 | // --- Remove the try/catch/finally block's scope
312 | if (returnTryScope.processingPhase !== "postFinally") {
313 | thread.blocks!.pop();
314 | }
315 |
316 | // --- Clear the last part of the try/catch/finally block
317 | const tryScope = innermostTryScope(thread);
318 | clearToLabel = tryScope.tryLabel;
319 | } else {
320 | // --- Delete the remaining part of the queue
321 | clearToLabel = -1;
322 | }
323 | break;
324 | }
325 |
326 | case T_WHILE_STATEMENT: {
327 | // --- Create or get the loop's scope (guard is falsy for the first execution)
328 | let loopScope = execInfo.guard ? innermostLoopScope(thread) : createLoopScope(thread);
329 |
330 | // --- Evaluate the loop condition
331 | const condition = !!(await evalBindingAsync(statement.cond, evalContext, thread));
332 | if (condition) {
333 | toUnshift = provideLoopBody(loopScope!, statement, thread.breakLabelValue);
334 | } else {
335 | // --- When the condition is not met, we're done.
336 | releaseLoopScope(thread);
337 | }
338 | break;
339 | }
340 |
341 | case T_DO_WHILE_STATEMENT: {
342 | if (!execInfo.guard) {
343 | // --- First loop execution (do-while is a post-test loop)
344 | toUnshift = provideLoopBody(createLoopScope(thread), statement, thread.breakLabelValue);
345 | break;
346 | }
347 |
348 | // --- Evaluate the loop condition
349 | const condition = !!(await evalBindingAsync(statement.cond, evalContext, thread));
350 | if (condition) {
351 | toUnshift = provideLoopBody(innermostLoopScope(thread), statement, thread.breakLabelValue);
352 | } else {
353 | // --- When the condition is not met, we're done.
354 | releaseLoopScope(thread);
355 | }
356 | break;
357 | }
358 |
359 | case T_CONTINUE_STATEMENT: {
360 | // --- Search for the innermost non-switch loop scope, release the switch scopes
361 | if (!thread.loops || thread.loops.length === 0) {
362 | throw new Error("Missing loop scope");
363 | }
364 |
365 | let loopScope: LoopScope | undefined;
366 | while (thread.loops.length > 0) {
367 | loopScope = innermostLoopScope(thread);
368 | if (!loopScope.isSwitch) {
369 | break;
370 | }
371 | thread.loops.pop();
372 | }
373 |
374 | if (!loopScope) {
375 | throw new Error("Missing loop scope");
376 | }
377 |
378 | if (
379 | loopScope.tryBlockDepth >= 0 &&
380 | loopScope.tryBlockDepth < (thread.tryBlocks ?? []).length
381 | ) {
382 | // --- Mark the loop's try scope to exit with "continue"
383 | for (let i = loopScope.tryBlockDepth; i < thread.tryBlocks!.length; i++) {
384 | thread.tryBlocks![loopScope.tryBlockDepth]!.exitType = "continue";
385 | }
386 |
387 | // --- Clear the last part of the try/catch/finally block
388 | const tryScope = innermostTryScope(thread);
389 | clearToLabel = tryScope.tryLabel;
390 | } else {
391 | clearToLabel = loopScope.continueLabel;
392 | releaseLoopScope(thread, false);
393 | }
394 | break;
395 | }
396 |
397 | case T_BREAK_STATEMENT: {
398 | const loopScope = innermostLoopScope(thread);
399 | if (loopScope === undefined) {
400 | throw new Error("Missing loop scope");
401 | }
402 |
403 | if (!!loopScope.isSwitch) {
404 | // --- Break is in a switch case
405 | clearToLabel = loopScope.breakLabel;
406 | break;
407 | }
408 |
409 | // --- Break is in a loop construct
410 | if (
411 | loopScope.tryBlockDepth >= 0 &&
412 | loopScope.tryBlockDepth < (thread.tryBlocks ?? []).length
413 | ) {
414 | // --- Mark the loop's try scope to exit with "break"
415 | for (let i = loopScope.tryBlockDepth; i < thread.tryBlocks!.length; i++) {
416 | thread.tryBlocks![loopScope.tryBlockDepth]!.exitType = "break";
417 | }
418 |
419 | // --- Clear the last part of the try/catch/finally block
420 | const tryScope = innermostTryScope(thread);
421 | clearToLabel = tryScope.tryLabel;
422 | } else {
423 | clearToLabel = loopScope.breakLabel;
424 | releaseLoopScope(thread);
425 | }
426 | break;
427 | }
428 |
429 | case T_FOR_STATEMENT:
430 | if (!execInfo.guard) {
431 | // --- Init the loop with a new scope
432 | createLoopScope(thread, 1);
433 |
434 | // --- Create a new block for the loop variables
435 | thread.blocks ??= [];
436 | thread.blocks.push({
437 | vars: {},
438 | });
439 |
440 | const guardStatement = guard(statement);
441 | if (statement.init) {
442 | // --- Unshift the initialization part and the guarded for-loop
443 | toUnshift = mapStatementsToQueueItems([{ statement: statement.init }, guardStatement]);
444 | } else {
445 | // --- No init, unshift only the guard statement
446 | toUnshift = mapStatementsToQueueItems([guardStatement]);
447 | }
448 | } else {
449 | // --- Initialization already done. Evaluate the condition
450 | if (!statement.cond || !!(await evalBindingAsync(statement.cond, evalContext, thread))) {
451 | // --- Stay in the loop, inject the body, the update expression, and the loop guard
452 | const loopScope = innermostLoopScope(thread);
453 |
454 | if (statement.upd) {
455 | const updateStmt: StatementWithInfo = {
456 | statement: {
457 | type: T_EXPRESSION_STATEMENT,
458 | nodeId: createXmlUiTreeNodeId(),
459 | expr: statement.upd,
460 | },
461 | };
462 | toUnshift = mapStatementsToQueueItems([
463 | { statement: statement.body },
464 | updateStmt,
465 | { statement, execInfo },
466 | ]);
467 | } else {
468 | toUnshift = mapStatementsToQueueItems([
469 | { statement: statement.body },
470 | { statement, execInfo },
471 | ]);
472 | }
473 | // --- The next queue label is for "break"
474 | loopScope.breakLabel = thread.breakLabelValue ?? -1;
475 |
476 | // --- The guard action's label is for "continue"
477 | loopScope.continueLabel = toUnshift[1].label;
478 | } else {
479 | // --- The condition is not met, we're done. Remove the loop's scope from the evaluation context
480 | releaseLoopScope(thread);
481 | }
482 | }
483 | break;
484 |
485 | case T_FOR_IN_STATEMENT:
486 | if (!execInfo.guard) {
487 | // --- Get the object keys
488 | const keyedObject = await evalBindingAsync(statement.expr, evalContext, thread);
489 | if (keyedObject == undefined) {
490 | // --- Nothing to do, no object to traverse
491 | break;
492 | }
493 |
494 | // --- Init the loop with a new scope
495 | createLoopScope(thread, 1);
496 |
497 | // --- Create a new block for the loop variables
498 | thread.blocks ??= [];
499 | thread.blocks.push({ vars: {} });
500 |
501 | toUnshift = mapStatementsToQueueItems([
502 | { statement, execInfo: { guard: true, keys: Object.keys(keyedObject), keyIndex: 0 } },
503 | ]);
504 | } else {
505 | // --- Just for the sake of extra safety
506 | if (execInfo.keyIndex === undefined || execInfo.keys === undefined) {
507 | throw new Error("Keys information expected in for..in loop");
508 | }
509 |
510 | // --- Any key left?
511 | if (execInfo.keyIndex < execInfo.keys.length) {
512 | // --- Set the binding variable to the next key
513 | const propValue = execInfo.keys[execInfo.keyIndex++];
514 | switch (statement.varB) {
515 | case "none": {
516 | const assigmentExpr: AssignmentExpression = {
517 | type: T_ASSIGNMENT_EXPRESSION,
518 | leftValue: {
519 | type: T_IDENTIFIER,
520 | name: statement.id.name,
521 | } as Identifier,
522 | op: "=",
523 | expr: {
524 | type: T_LITERAL,
525 | value: propValue,
526 | } as Literal,
527 | } as AssignmentExpression;
528 | await evalBindingAsync(assigmentExpr, evalContext, thread);
529 | break;
530 | }
531 |
532 | case "const":
533 | case "let":
534 | {
535 | // --- Create a new variable in the innermost scope
536 | const block = innermostBlockScope(thread);
537 | if (!block) {
538 | throw new Error("Missing block scope");
539 | }
540 | block.vars[statement.id.name] = propValue;
541 | if (statement.varB === "const") {
542 | block.constVars ??= new Set<string>();
543 | block.constVars.add(statement.id.name);
544 | }
545 | }
546 | break;
547 | }
548 |
549 | // --- Inject the loop body
550 | const loopScope = innermostLoopScope(thread);
551 | toUnshift = mapStatementsToQueueItems([
552 | { statement: statement.body },
553 | { statement, execInfo },
554 | ]);
555 |
556 | // --- The next queue label is for "break"
557 | loopScope.breakLabel = thread.breakLabelValue ?? -1;
558 |
559 | // --- The guard action's label is for "continue"
560 | loopScope.continueLabel = toUnshift[1].label;
561 | } else {
562 | // --- The condition is not met, we're done. Remove the loop's scope from the evaluation context
563 | releaseLoopScope(thread);
564 | }
565 | }
566 | break;
567 |
568 | case T_FOR_OF_STATEMENT:
569 | if (!execInfo.guard) {
570 | // --- Get the object keys
571 | const iteratorObject = await evalBindingAsync(statement.expr, evalContext, thread);
572 | if (iteratorObject == null || typeof iteratorObject[Symbol.iterator] !== "function") {
573 | // --- The object is not an iterator
574 | throw new Error("Object in for..of is not iterable");
575 | }
576 |
577 | // --- Init the loop with a new scope
578 | createLoopScope(thread, 1);
579 |
580 | // --- Create a new block for the loop variables
581 | thread.blocks ??= [];
582 | thread.blocks.push({ vars: {} });
583 |
584 | toUnshift = mapStatementsToQueueItems([
585 | { statement, execInfo: { guard: true, iterator: iteratorObject[Symbol.iterator]() } },
586 | ]);
587 | } else {
588 | // --- Just for the sake of extra safety
589 | if (execInfo.iterator === undefined) {
590 | throw new Error("Iterator expected in for..of loop");
591 | }
592 |
593 | // --- Any iteration left?
594 | const nextIteration = execInfo.iterator.next();
595 | if (nextIteration.done) {
596 | // --- The for..of loop is complete. Remove the loop's scope from the evaluation context
597 | releaseLoopScope(thread);
598 | break;
599 | }
600 |
601 | // --- Set the binding variable to the next key
602 | const propValue = nextIteration.value;
603 | switch (statement.varB) {
604 | case "none": {
605 | const assigmentExpr: AssignmentExpression = {
606 | type: T_ASSIGNMENT_EXPRESSION,
607 | leftValue: {
608 | type: T_IDENTIFIER,
609 | name: statement.id.name,
610 | } as Identifier,
611 | op: "=",
612 | expr: {
613 | type: T_LITERAL,
614 | value: propValue,
615 | } as Literal,
616 | } as AssignmentExpression;
617 | await evalBindingAsync(assigmentExpr, evalContext, thread);
618 | break;
619 | }
620 |
621 | case "const":
622 | case "let":
623 | {
624 | // --- Create a new variable in the innermost scope
625 | const block = innermostBlockScope(thread);
626 | if (!block) {
627 | throw new Error("Missing block scope");
628 | }
629 | block.vars[statement.id.name] = propValue;
630 | if (statement.varB === "const") {
631 | block.constVars ??= new Set<string>();
632 | block.constVars.add(statement.id.name);
633 | }
634 | }
635 | break;
636 | }
637 |
638 | // --- Inject the loop body
639 | const loopScope = innermostLoopScope(thread);
640 | toUnshift = mapStatementsToQueueItems([
641 | { statement: statement.body },
642 | { statement, execInfo },
643 | ]);
644 |
645 | // --- The next queue label is for "break"
646 | loopScope.breakLabel = thread.breakLabelValue ?? -1;
647 |
648 | // --- The guard action's label is for "continue"
649 | loopScope.continueLabel = toUnshift[1].label;
650 | }
651 | break;
652 |
653 | case T_THROW_STATEMENT: {
654 | throw new ThrowStatementError(await evalBindingAsync(statement.expr, evalContext, thread));
655 | }
656 |
657 | case T_TRY_STATEMENT: {
658 | if (!execInfo.guard) {
659 | // --- Execute the try block
660 | toUnshift = provideTryBody(thread, createTryScope(thread, statement));
661 | break;
662 | }
663 |
664 | // --- Evaluate try
665 | const tryScope = innermostTryScope(thread);
666 | switch (tryScope.processingPhase) {
667 | case "error":
668 | // --- There was an error we may handle with catch
669 | switch (tryScope.errorSource) {
670 | case "try":
671 | // --- Remove the "try" block's scope
672 | thread.blocks!.pop();
673 |
674 | // --- Go on with catch or finally
675 | if (statement.catchB) {
676 | if (tryScope.statement.catchV) {
677 | const block = innermostBlockScope(thread)!;
678 | block.vars[tryScope.statement.catchV.name] =
679 | tryScope.errorToThrow instanceof ThrowStatementError
680 | ? tryScope.errorToThrow.errorObject
681 | : tryScope.errorToThrow;
682 | }
683 | delete tryScope.errorToThrow;
684 | tryScope.processingPhase = "catch";
685 | toUnshift = provideCatchBody(thread, tryScope);
686 | } else if (tryScope.statement.finallyB) {
687 | // --- No catch, move on finally
688 | tryScope.processingPhase = "finally";
689 | toUnshift = provideFinallyBody(thread, tryScope);
690 | }
691 | break;
692 | case "catch":
693 | // --- Remove the "catch" block's scope
694 | thread.blocks!.pop();
695 |
696 | // --- Move to the finally block
697 | tryScope.processingPhase = "finally";
698 | toUnshift = provideFinallyBody(thread, tryScope);
699 | break;
700 | case "finally":
701 | // --- Remove the "finally" block's scope
702 | thread.blocks!.pop();
703 |
704 | // --- Move to the post finally execution
705 | tryScope.processingPhase = "postFinally";
706 | toUnshift = provideFinallyErrorBody(tryScope);
707 | break;
708 | }
709 | break;
710 | case "try":
711 | // --- We completed the try block successfully
712 | tryScope.processingPhase = "finally";
713 | if (statement.finallyB) {
714 | toUnshift = provideFinallyBody(thread, tryScope);
715 | }
716 | break;
717 | case "catch":
718 | // --- We completed the catch block successfully, remove the handled error
719 | tryScope.processingPhase = "finally";
720 | if (statement.finallyB) {
721 | toUnshift = provideFinallyBody(thread, tryScope);
722 | }
723 | break;
724 | case "finally":
725 | tryScope.processingPhase = "postFinally";
726 | toUnshift = provideFinallyErrorBody(tryScope);
727 | break;
728 |
729 | case "postFinally":
730 | // --- We completed the finally block successfully
731 | const innermostTry = thread.tryBlocks!.pop()!;
732 |
733 | // --- Is there any special exit type?
734 | switch (innermostTry.exitType) {
735 | case "break": {
736 | const loopScope = innermostLoopScope(thread);
737 | if (loopScope === undefined) {
738 | throw new Error("Missing loop scope");
739 | }
740 | releaseLoopScope(thread);
741 | clearToLabel = loopScope.breakLabel;
742 | break;
743 | }
744 | case "continue": {
745 | const loopScope = innermostLoopScope(thread);
746 | if (loopScope === undefined) {
747 | throw new Error("Missing loop scope");
748 | }
749 |
750 | clearToLabel = loopScope.continueLabel;
751 | releaseLoopScope(thread, false);
752 | break;
753 | }
754 | case "return":
755 | clearToLabel = -1;
756 | break;
757 | }
758 |
759 | // --- Should we raise an error?
760 | if (innermostTry.errorToThrow) {
761 | throw innermostTry.errorToThrow;
762 | }
763 | break;
764 | }
765 | break;
766 | }
767 |
768 | case T_SWITCH_STATEMENT: {
769 | // --- Create or get the loop's scope (guard is falsy for the first execution)
770 | if (execInfo.guard) {
771 | // --- Complete the switch
772 | releaseLoopScope(thread);
773 | } else {
774 | let loopScope = createLoopScope(thread);
775 | loopScope.isSwitch = true;
776 | thread.blocks!.push({ vars: {} });
777 |
778 | // --- Evaluate the switch value
779 | const switchValue = await evalBindingAsync(statement.expr, evalContext, thread);
780 |
781 | // --- Find the matching label
782 | let matchingIndex = -1;
783 | for (let i = 0; i < statement.cases.length; i++) {
784 | const currentCase = statement.cases[i];
785 |
786 | // --- Check for default case
787 | if (currentCase.caseE === undefined) {
788 | matchingIndex = i;
789 | break;
790 | }
791 |
792 | // --- Check for matching case
793 | const caseValue = await evalBindingAsync(currentCase.caseE, evalContext, thread);
794 | if (caseValue === switchValue) {
795 | matchingIndex = i;
796 | break;
797 | }
798 | }
799 |
800 | // --- Merge all statements from the matching label
801 | const statementFlow: Statement[] = [];
802 | if (matchingIndex >= 0) {
803 | for (let i = matchingIndex; i < statement.cases.length; i++) {
804 | statementFlow.push(...statement.cases[i].stmts!);
805 | }
806 | }
807 |
808 | // --- Queue the statement flow and the guard
809 | toUnshift = mapStatementsToQueueItems([
810 | ...toStatementItems(statementFlow),
811 | guard(statement),
812 | ]);
813 | loopScope.breakLabel = toUnshift[toUnshift.length - 1].label;
814 | }
815 | break;
816 | }
817 | }
818 |
819 | // --- The statement may remove the innermost scope
820 | if (execInfo.removeBlockScope) {
821 | if (thread.blocks && thread.blocks.length > 0) {
822 | thread.blocks.pop();
823 | }
824 | }
825 |
826 | // --- Done.
827 | return { toUnshift, clearToLabel };
828 | }
829 |
830 | /**
831 | * Funtion to process a visited ID
832 | */
833 | type IdDeclarationVisitor = (id: string) => void;
834 |
835 | // --- Process a variable declaration
836 | export async function processDeclarationsAsync(
837 | block: BlockScope,
838 | evalContext: BindingTreeEvaluationContext,
839 | thread: LogicalThread,
840 | declarations: VarDeclaration[],
841 | addConst = false,
842 | useValue = false,
843 | baseValue = undefined,
844 | ): Promise<void> {
845 | for (let i = 0; i < declarations.length; i++) {
846 | let value: any;
847 | const decl = declarations[i];
848 | if (useValue) {
849 | value = baseValue;
850 | } else if (decl.expr) {
851 | value = await evalBindingAsync(decl.expr, evalContext, thread);
852 | }
853 | visitDeclaration(block, decl, value, addConst);
854 | }
855 |
856 | // --- Visit a variable
857 | function visitDeclaration(
858 | block: BlockScope,
859 | decl: VarDeclaration,
860 | baseValue: any,
861 | addConst: boolean,
862 | ): void {
863 | // --- Process each declaration
864 | if (decl.id) {
865 | visitIdDeclaration(block, decl.id, baseValue, addConst);
866 | } else if (decl.aDestr) {
867 | visitArrayDestruct(block, decl.aDestr, baseValue, addConst);
868 | } else if (decl.oDestr) {
869 | visitObjectDestruct(block, decl.oDestr, baseValue, addConst);
870 | } else {
871 | throw new Error("Unknown declaration specifier");
872 | }
873 | }
874 |
875 | // --- Visits a single ID declaration
876 | function visitIdDeclaration(
877 | block: BlockScope,
878 | id: string,
879 | baseValue: any,
880 | addConst: boolean,
881 | ): void {
882 | if (block.vars[id]) {
883 | throw new Error(`Variable ${id} is already declared in the current scope.`);
884 | }
885 | block.vars[id] = baseValue;
886 | if (addConst) {
887 | block.constVars ??= new Set<string>();
888 | block.constVars.add(id);
889 | }
890 | }
891 |
892 | // --- Visits an array destructure declaration
893 | function visitArrayDestruct(
894 | block: BlockScope,
895 | arrayD: ArrayDestructure[],
896 | baseValue: any,
897 | addConst: boolean,
898 | ): void {
899 | for (let i = 0; i < arrayD.length; i++) {
900 | const arrDecl = arrayD[i];
901 | const value = baseValue?.[i];
902 | if (arrDecl.id) {
903 | visitIdDeclaration(block, arrDecl.id, value, addConst);
904 | } else if (arrDecl.aDestr) {
905 | visitArrayDestruct(block, arrDecl.aDestr, value, addConst);
906 | } else if (arrDecl.oDestr) {
907 | visitObjectDestruct(block, arrDecl.oDestr, value, addConst);
908 | }
909 | }
910 | }
911 |
912 | // --- Visits an object destructure declaration
913 | function visitObjectDestruct(
914 | block: BlockScope,
915 | objectD: ObjectDestructure[],
916 | baseValue: any,
917 | addConst: boolean,
918 | ): void {
919 | for (let i = 0; i < objectD.length; i++) {
920 | const objDecl = objectD[i];
921 | const value = baseValue?.[objDecl.id!];
922 | if (objDecl.aDestr) {
923 | visitArrayDestruct(block, objDecl.aDestr, value, addConst);
924 | } else if (objDecl.oDestr) {
925 | visitObjectDestruct(block, objDecl.oDestr, value, addConst);
926 | } else {
927 | visitIdDeclaration(block, objDecl.alias ?? objDecl.id!, value, addConst);
928 | }
929 | }
930 | }
931 | }
932 |
```
--------------------------------------------------------------------------------
/docs/content/components/Text.md:
--------------------------------------------------------------------------------
```markdown
1 | # Text [#text]
2 |
3 | The `Text` component displays textual information in a number of optional styles and variants.
4 |
5 | You can learn more about this component in the [Working with Text](/working-with-text) article.
6 |
7 | Also note that variants of the `Text` component are also mapped to HtmlTag components.
8 | See the [variant](#variant) section to check which variant maps to which HtmlTag.
9 |
10 | ## Custom Variants [#custom-variants]
11 |
12 | In addition to the predefined variants, the `Text` component supports **custom variant names** that can be styled using theme variables. This allows you to create application-specific text styles without modifying the component itself.
13 |
14 | When you use a custom variant name (one not in the predefined list), the component automatically applies theme variables following the naming pattern: `{cssProperty}-Text-{variantName}`.
15 |
16 | ```xmlui-pg display name="Example: custom variants"
17 | <App>
18 | <Theme
19 | textColor-Text-brandTitle="rgb(41, 128, 185)"
20 | fontSize-Text-brandTitle="28px"
21 | fontWeight-Text-brandTitle="bold"
22 | letterSpacing-Text-brandTitle="2px"
23 | >
24 | <Text variant="brandTitle">
25 | Welcome to Our Application
26 | </Text>
27 | </Theme>
28 | </App>
29 | ```
30 |
31 | In this example, the custom variant `brandTitle` is styled using theme variables. Any CSS text property can be configured, including `textColor`, `fontSize`, `fontWeight`, `fontFamily`, `textDecoration*`, `lineHeight`, `backgroundColor`, `textTransform`, `letterSpacing`, `wordSpacing`, `textShadow`, and more.
32 |
33 | ## Properties [#properties]
34 |
35 | ### `breakMode` (default: "normal") [#breakmode-default-normal]
36 |
37 | This property controls how text breaks into multiple lines. `normal` uses standard word boundaries, `word` breaks long words to prevent overflow, `anywhere` breaks at any character, `keep` prevents word breaking, and `hyphenate` uses automatic hyphenation. When not specified, uses the default browser behavior or theme variables.
38 |
39 | Available values:
40 |
41 | | Value | Description |
42 | | --- | --- |
43 | | `normal` | Uses standard word boundaries for breaking **(default)** |
44 | | `word` | Breaks long words when necessary to prevent overflow |
45 | | `anywhere` | Breaks at any character if needed to fit content |
46 | | `keep` | Prevents breaking within words entirely |
47 | | `hyphenate` | Uses automatic hyphenation when breaking words |
48 |
49 | ```xmlui-pg copy display name="Example: breakMode"
50 | <App>
51 | <VStack gap="16px">
52 | <VStack gap="8px">
53 | <Text variant="strong">breakMode="normal" (default)</Text>
54 | <Text
55 | width="150px"
56 | backgroundColor="lightblue"
57 | padding="8px"
58 | breakMode="normal">
59 | This text uses standardwordbreaking at natural boundaries
60 | like spaces and hyphens.
61 | </Text>
62 | </VStack>
63 |
64 | <VStack gap="8px">
65 | <Text variant="strong">breakMode="word"</Text>
66 | <Text
67 | width="150px"
68 | backgroundColor="lightgreen"
69 | padding="8px"
70 | breakMode="word">
71 | This text will breakverylongwordswhenneeded to prevent
72 | overflow while preserving readability.
73 | </Text>
74 | </VStack>
75 |
76 | <VStack gap="8px">
77 | <Text variant="strong">breakMode="anywhere"</Text>
78 | <Text
79 | width="150px"
80 | backgroundColor="lightyellow"
81 | padding="8px"
82 | breakMode="anywhere">
83 | Thistext willbreakanywhereif neededtofit thecontainer
84 | eveninthe middleofwords.
85 | </Text>
86 | </VStack>
87 |
88 | <VStack gap="8px">
89 | <Text variant="strong">breakMode="keep"</Text>
90 | <Text
91 | width="150px"
92 | backgroundColor="lightcoral"
93 | padding="8px"
94 | breakMode="keep">
95 | This text will keep verylongwords intact and prevent
96 | breaking within words entirely.
97 | </Text>
98 | </VStack>
99 |
100 | <VStack gap="8px">
101 | <Text variant="strong">breakMode="hyphenate"</Text>
102 | <Text
103 | width="150px"
104 | backgroundColor="lavender"
105 | padding="8px"
106 | breakMode="hyphenate"
107 | lang="en">
108 | This text uses automatic hyphenation for
109 | supercalifragilisticexpialidocious words.
110 | </Text>
111 | </VStack>
112 | </VStack>
113 | </App>
114 | ```
115 |
116 | ### `ellipses` (default: true) [#ellipses-default-true]
117 |
118 | This property indicates whether ellipses should be displayed when the text is cropped (`true`) or not (`false`).
119 |
120 | ```xmlui-pg copy display name="Example: ellipses"
121 | <App>
122 | <VStack width="120px">
123 | <Text
124 | backgroundColor="cyan"
125 | color="black"
126 | maxLines="1"
127 | ellipses="false">
128 | Though this long text does is about to crop!
129 | </Text>
130 | <Text
131 | backgroundColor="cyan"
132 | color="black"
133 | maxLines="1">
134 | Though this long text does is about to crop!
135 | </Text>
136 | </VStack>
137 | </App>
138 | ```
139 |
140 | ### `maxLines` [#maxlines]
141 |
142 | This property determines the maximum number of lines the component can wrap to. If there is no space to display all the contents, the component displays up to as many lines as specified in this property. When the value is not defined, there is no limit on the displayed lines.
143 |
144 | ```xmlui-pg copy display name="Example: maxLines"
145 | <App>
146 | <Text
147 | maxWidth="120px"
148 | backgroundColor="cyan"
149 | color="black"
150 | value="A long text that will likely overflow"
151 | maxLines="2" />
152 | </App>
153 | ```
154 |
155 | ### `overflowMode` (default: "not specified") [#overflowmode-default-not-specified]
156 |
157 | This property controls how text overflow is handled. `none` prevents wrapping and shows no overflow indicator, `ellipsis` shows ellipses when text is truncated, `scroll` forces single line with horizontal scrolling, and `flow` allows multi-line wrapping with vertical scrolling when needed (ignores maxLines). When not specified, uses the default text behavior.
158 |
159 | Available values:
160 |
161 | | Value | Description |
162 | | --- | --- |
163 | | `none` | No wrapping, text stays on a single line with no overflow indicator |
164 | | `ellipsis` | Truncates with an ellipsis (default) |
165 | | `scroll` | Forces single line with horizontal scrolling when content overflows |
166 | | `flow` | Allows text to wrap into multiple lines with vertical scrolling when container height is constrained (ignores maxLines) |
167 |
168 | ```xmlui-pg copy display name="Example: overflowMode"
169 | <App>
170 | <VStack gap="16px">
171 | <VStack gap="8px">
172 | <Text variant="strong">overflowMode="none"</Text>
173 | <Text
174 | width="200px"
175 | backgroundColor="lightcoral"
176 | padding="8px"
177 | overflowMode="none"
178 | maxLines="2">
179 | This is a very long text that will be clipped cleanly without
180 | any overflow indicator when it exceeds the specified lines.
181 | </Text>
182 | </VStack>
183 |
184 | <VStack gap="8px">
185 | <Text variant="strong">overflowMode="ellipsis" (default)</Text>
186 | <Text
187 | width="200px"
188 | backgroundColor="lightblue"
189 | padding="8px"
190 | overflowMode="ellipsis"
191 | maxLines="1">
192 | This is a very long text that will show ellipsis when it
193 | overflows the container width.
194 | </Text>
195 | </VStack>
196 |
197 | <VStack gap="8px">
198 | <Text variant="strong">overflowMode="scroll"</Text>
199 | <Text
200 | width="200px"
201 | backgroundColor="lightgreen"
202 | padding="8px"
203 | overflowMode="scroll">
204 | This is a very long text that will enable horizontal scrolling
205 | when it overflows the container width.
206 | </Text>
207 | </VStack>
208 |
209 | <VStack gap="8px">
210 | <Text variant="strong">overflowMode="flow"</Text>
211 | <Text
212 | width="200px"
213 | height="100px"
214 | backgroundColor="lightyellow"
215 | padding="8px"
216 | overflowMode="flow">
217 | This is a very long text that will wrap to multiple lines and show
218 | a vertical scrollbar when the content exceeds the container height.
219 | This mode ignores maxLines and allows unlimited text wrapping with
220 | vertical scrolling when needed.
221 | </Text>
222 | </VStack>
223 |
224 | <VStack gap="8px">
225 | <Text variant="strong">overflowMode="flow" (no height constraint)</Text>
226 | <Text
227 | width="200px"
228 | backgroundColor="lightpink"
229 | padding="8px"
230 | overflowMode="flow">
231 | This is a very long text that demonstrates flow mode without a
232 | height constraint. The text will wrap to multiple lines naturally
233 | and the container will grow to accommodate all the content. No
234 | scrollbar will appear since there's no height limitation - the text
235 | flows freely across as many lines as needed.
236 | </Text>
237 | </VStack>
238 | </VStack>
239 | </App>
240 | ```
241 |
242 | ### `preserveLinebreaks` (default: false) [#preservelinebreaks-default-false]
243 |
244 | This property indicates if linebreaks should be preserved when displaying text.
245 |
246 | ```xmlui-pg copy {7} display name="Example: preserveLinebreaks"
247 | <App>
248 | <HStack>
249 | <Text
250 | width="250px"
251 | backgroundColor="cyan"
252 | color="black"
253 | preserveLinebreaks="true"
254 | value="(preserve) This long text
255 |
256 | with several line breaks
257 |
258 | does not fit into a viewport with a 200-pixel width." />
259 | <Text
260 | width="250px"
261 | backgroundColor="cyan"
262 | color="black"
263 | preserveLinebreaks="false"
264 | value="(don't preserve) This long text
265 |
266 | with several line breaks
267 |
268 | does not fit into a viewport with a 200-pixel width." />
269 | </HStack>
270 | </App>
271 | ```
272 |
273 | > **Note**: Remember to use the `value` property of the `Text`.
274 | > Linebreaks are converted to spaces when nesting the text inside the `Text` component.
275 |
276 | ### `value` [#value]
277 |
278 | The text to be displayed. This value can also be set via nesting the text into the `Text` component.
279 |
280 | ```xmlui-pg copy display name="Example: value"
281 | <App>
282 | <Text value="An example text" />
283 | <Text>An example text</Text>
284 | </App>
285 | ```
286 |
287 | ### `variant` [#variant]
288 |
289 | An optional string value that provides named presets for text variants with a unique combination of font style, weight, size, color, and other parameters. If not defined, the text uses the current style of its context. In addition to predefined variants, you can specify custom variant names and style them using theme variables with the pattern `{cssProperty}-Text-{variantName}` (e.g., `textColor-Text-brandTitle`, `fontSize-Text-highlight`). See the documentation for a complete list of supported CSS properties.
290 |
291 | Available values:
292 |
293 | | Value | Description |
294 | | --- | --- |
295 | | `abbr` | Represents an abbreviation or acronym |
296 | | `caption` | Represents the caption (or title) of a table |
297 | | `cite` | Is used to mark up the title of a cited work |
298 | | `code` | Represents a line of code |
299 | | `deleted` | Represents text that has been deleted |
300 | | `em` | Marks text to stress emphasis |
301 | | `inherit` | Represents text that inherits the style from its parent element |
302 | | `inserted` | Represents a range of text that has been added to a document |
303 | | `keyboard` | Represents a span of text denoting textual user input from a keyboard or voice input |
304 | | `marked` | Represents text which is marked or highlighted for reference or notation |
305 | | `mono` | Text using a mono style font family |
306 | | `paragraph` | Represents a paragraph |
307 | | `placeholder` | Text that is mostly used as the placeholder style in input controls |
308 | | `sample` | Represents sample (or quoted) output from a computer program |
309 | | `secondary` | Represents a bit dimmed secondary text |
310 | | `small` | Represents side-comments and small print |
311 | | `sub` | Specifies inline text as subscript |
312 | | `strong` | Contents have strong importance |
313 | | `subheading` | Indicates that the text is the subtitle in a heading |
314 | | `subtitle` | Indicates that the text is the subtitle of some other content |
315 | | `sup` | Specifies inline text as superscript |
316 | | `tableheading` | Indicates that the text is a table heading |
317 | | `title` | Indicates that the text is the title of some other content |
318 | | `var` | Represents the name of a variable in a mathematical expression |
319 |
320 | ```xmlui-pg name="Example: variant"
321 | <App>
322 | <HStack>
323 | <Text width="150px">default:</Text>
324 | <Text>This is an example text</Text>
325 | </HStack>
326 | <HStack>
327 | <Text width="150px">paragraph:</Text>
328 | <Text variant="paragraph">This is an example paragraph</Text>
329 | </HStack>
330 | <HStack>
331 | <Text width="150px">abbr:</Text>
332 | <Text variant="abbr">
333 | This is an example text
334 | </Text>
335 | </HStack>
336 | <HStack>
337 | <Text width="150px">cite:</Text>
338 | <Text variant="cite">
339 | This is an example text
340 | </Text>
341 | </HStack>
342 | <HStack>
343 | <Text width="150px">code:</Text>
344 | <Text variant="code">
345 | This is an example text
346 | </Text>
347 | </HStack>
348 | <HStack>
349 | <Text width="150px">deleted:</Text>
350 | <Text variant="deleted">
351 | This is an example text
352 | </Text>
353 | </HStack>
354 | <HStack>
355 | <Text width="150px">inserted:</Text>
356 | <Text variant="inserted">
357 | This is an example text
358 | </Text>
359 | </HStack>
360 | <HStack>
361 | <Text width="150px">keyboard:</Text>
362 | <Text variant="keyboard">
363 | This is an example text
364 | </Text>
365 | </HStack>
366 | <HStack>
367 | <Text width="150px">marked:</Text>
368 | <Text variant="marked">
369 | This is an example text
370 | </Text>
371 | </HStack>
372 | <HStack>
373 | <Text width="150px">sample:</Text>
374 | <Text variant="sample">
375 | This is an example text
376 | </Text>
377 | </HStack>
378 | <HStack>
379 | <Text width="150px">sup:</Text>
380 | <Text>
381 | This is an example text
382 | <Text variant="sup">(with some additional text)</Text>
383 | </Text>
384 | </HStack>
385 | <HStack>
386 | <Text width="150px">sub:</Text>
387 | <Text>
388 | This is an example text
389 | <Text variant="sub">(with some additional text)</Text>
390 | </Text>
391 | </HStack>
392 | <HStack>
393 | <Text width="150px">var:</Text>
394 | <Text variant="var">
395 | This is an example text
396 | </Text>
397 | </HStack>
398 | <HStack>
399 | <Text width="150px">mono:</Text>
400 | <Text variant="mono">
401 | This is an example text
402 | </Text>
403 | </HStack>
404 | <HStack>
405 | <Text width="150px">strong:</Text>
406 | <Text variant="strong">
407 | This is an example text
408 | </Text>
409 | </HStack>
410 | <HStack>
411 | <Text width="150px">em:</Text>
412 | <Text variant="em">
413 | This is an example text
414 | </Text>
415 | </HStack>
416 | <HStack>
417 | <Text width="150px">title:</Text>
418 | <Text variant="title">
419 | This is an example text
420 | </Text>
421 | </HStack>
422 | <HStack>
423 | <Text width="150px">subtitle:</Text>
424 | <Text variant="subtitle">
425 | This is an example text
426 | </Text>
427 | </HStack>
428 | <HStack>
429 | <Text width="150px">small:</Text>
430 | <Text variant="small">
431 | This is an example text
432 | </Text>
433 | </HStack>
434 | <HStack>
435 | <Text width="150px">caption:</Text>
436 | <Text variant="caption">
437 | This is an example text
438 | </Text>
439 | </HStack>
440 | <HStack>
441 | <Text width="150px">placeholder:</Text>
442 | <Text variant="placeholder">
443 | This is an example text
444 | </Text>
445 | </HStack>
446 | <HStack>
447 | <Text width="150px">subheading:</Text>
448 | <Text variant="subheading">
449 | This is an example text
450 | </Text>
451 | </HStack>
452 | <HStack>
453 | <Text width="150px">tableheading:</Text>
454 | <Text variant="tableheading">
455 | This is an example text
456 | </Text>
457 | </HStack>
458 | <HStack>
459 | <Text width="150px">secondary:</Text>
460 | <Text variant="secondary">
461 | This is an example text
462 | </Text>
463 | </HStack>
464 | </App>
465 | ```
466 |
467 | **HtmlTag Mappings**
468 |
469 | The table below indicates which Text `variant` maps to which HtmlTag component.
470 |
471 | | Variant | Component |
472 | | ----------- | --------- |
473 | | `abbr` | abbr |
474 | | `cite` | cite |
475 | | `code` | code |
476 | | `deleted` | del |
477 | | `inserted` | ins |
478 | | `keyboard` | kbd |
479 | | `marked` | mark |
480 | | `sample` | samp |
481 | | `sub` | sub |
482 | | `sup` | sup |
483 | | `var` | var |
484 | | `strong` | strong |
485 | | `em` | em |
486 | | `paragraph` | p |
487 |
488 | ## Events [#events]
489 |
490 | This component does not have any events.
491 |
492 | ## Exposed Methods [#exposed-methods]
493 |
494 | ### `hasOverflow` [#hasoverflow]
495 |
496 | Returns true when the displayed text overflows its container boundaries.
497 |
498 | **Signature**: `hasOverflow(): boolean`
499 |
500 | ## Styling [#styling]
501 |
502 | ### Custom Variant Theme Variables [#custom-variant-theme-variables]
503 |
504 | When using custom variants, you can style them using theme variables with the naming pattern `{propertyName}-Text-{variantName}`. The following CSS properties are supported:
505 |
506 | | Theme Variable Name | Description | Example Value |
507 | |---------------------|-------------|---------------|
508 | | `textColor-Text-{variant}` | Text color | `rgb(255, 0, 0)`, `#ff0000`, `red` |
509 | | `fontFamily-Text-{variant}` | Font family | `"Arial, sans-serif"`, `monospace` |
510 | | `fontSize-Text-{variant}` | Font size | `16px`, `1.5rem`, `large` |
511 | | `fontStyle-Text-{variant}` | Font style | `normal`, `italic`, `oblique` |
512 | | `fontWeight-Text-{variant}` | Font weight | `normal`, `bold`, `700` |
513 | | `fontStretch-Text-{variant}` | Font stretch | `normal`, `expanded`, `condensed` |
514 | | `textDecorationLine-Text-{variant}` | Decoration line type | `none`, `underline`, `overline`, `line-through` |
515 | | `textDecorationColor-Text-{variant}` | Decoration color | `rgb(255, 0, 0)`, `currentColor` |
516 | | `textDecorationStyle-Text-{variant}` | Decoration style | `solid`, `dashed`, `dotted`, `wavy` |
517 | | `textDecorationThickness-Text-{variant}` | Decoration thickness | `2px`, `from-font`, `auto` |
518 | | `textUnderlineOffset-Text-{variant}` | Underline offset | `5px`, `0.2em`, `auto` |
519 | | `lineHeight-Text-{variant}` | Line height | `1.5`, `24px`, `normal` |
520 | | `backgroundColor-Text-{variant}` | Background color | `rgb(255, 255, 0)`, `transparent` |
521 | | `textTransform-Text-{variant}` | Text transformation | `none`, `uppercase`, `lowercase`, `capitalize` |
522 | | `letterSpacing-Text-{variant}` | Space between letters | `1px`, `0.1em`, `normal` |
523 | | `wordSpacing-Text-{variant}` | Space between words | `5px`, `0.2em`, `normal` |
524 | | `textShadow-Text-{variant}` | Text shadow | `2px 2px 4px rgba(0,0,0,0.5)` |
525 | | `textIndent-Text-{variant}` | First line indentation | `20px`, `2em`, `0` |
526 | | `textAlign-Text-{variant}` | Horizontal alignment | `left`, `center`, `right`, `justify` |
527 | | `textAlignLast-Text-{variant}` | Last line alignment | `left`, `center`, `right`, `justify` |
528 | | `wordBreak-Text-{variant}` | Word breaking behavior | `normal`, `break-all`, `keep-all` |
529 | | `wordWrap-Text-{variant}` | Word wrapping | `normal`, `break-word` |
530 | | `direction-Text-{variant}` | Text direction | `ltr`, `rtl` |
531 | | `writingMode-Text-{variant}` | Writing mode | `horizontal-tb`, `vertical-rl`, `vertical-lr` |
532 | | `lineBreak-Text-{variant}` | Line breaking rules | `auto`, `normal`, `strict`, `loose` |
533 |
534 | ```xmlui-pg display name="Example: custom variant styles" /highlight/
535 | <App>
536 | <Theme
537 | textColor-Text-highlight="rgb(255, 193, 7)"
538 | fontWeight-Text-highlight="bold"
539 | backgroundColor-Text-highlight="rgba(0, 0, 0, 0.8)"
540 | padding-Text-highlight="4px 8px"
541 | textShadow-Text-highlight="0 2px 4px rgba(0,0,0,0.5)"
542 | >
543 | <Text variant="highlight">Important Notice</Text>
544 | <Text variant="highlight">This is Important Too</Text>
545 | </Theme>
546 | </App>
547 | ```
548 |
549 | ### Theme Variables [#theme-variables]
550 |
551 | | Variable | Default Value (Light) | Default Value (Dark) |
552 | | --- | --- | --- |
553 | | [backgroundColor](../styles-and-themes/common-units/#color)-Text | *none* | *none* |
554 | | [backgroundColor](../styles-and-themes/common-units/#color)-Text-code | rgb(from $color-surface-100 r g b / 0.4) | rgb(from $color-surface-100 r g b / 0.4) |
555 | | [backgroundColor](../styles-and-themes/common-units/#color)-Text-keyboard | rgb(from $color-surface-100 r g b / 0.4) | rgb(from $color-surface-100 r g b / 0.4) |
556 | | [backgroundColor](../styles-and-themes/common-units/#color)-Text-marked | rgb(from $color-primary-200 r g b / 0.4) | rgb(from $color-primary-400 r g b / 0.4) |
557 | | [borderColor](../styles-and-themes/common-units/#color)-Text-code | $color-surface-100 | $color-surface-100 |
558 | | [borderColor](../styles-and-themes/common-units/#color)-Text-keyboard | $color-surface-300 | $color-surface-300 |
559 | | [borderRadius](../styles-and-themes/common-units/#border-rounding)-Text | $borderRadius | $borderRadius |
560 | | [borderRadius](../styles-and-themes/common-units/#border-rounding)-Text-code | 4px | 4px |
561 | | [borderRadius](../styles-and-themes/common-units/#border-rounding)-Text-keyboard | *none* | *none* |
562 | | [borderStyle](../styles-and-themes/common-units/#border-style)-Text | solid | solid |
563 | | [borderStyle](../styles-and-themes/common-units/#border-style)-Text-code | solid | solid |
564 | | [borderStyle](../styles-and-themes/common-units/#border-style)-Text-keyboard | *none* | *none* |
565 | | [borderWidth](../styles-and-themes/common-units/#size)-Text | $space-0 | $space-0 |
566 | | [borderWidth](../styles-and-themes/common-units/#size)-Text-code | 1px | 1px |
567 | | [borderWidth](../styles-and-themes/common-units/#size)-Text-keyboard | 1px | 1px |
568 | | [direction](../styles-and-themes/layout-props#direction)-Text | *none* | *none* |
569 | | [fontFamily](../styles-and-themes/common-units/#fontFamily)-Text | $fontFamily | $fontFamily |
570 | | [fontFamily](../styles-and-themes/common-units/#fontFamily)-Text-code | $fontFamily-monospace | $fontFamily-monospace |
571 | | [fontFamily](../styles-and-themes/common-units/#fontFamily)-Text-codefence | $fontFamily-monospace | $fontFamily-monospace |
572 | | [fontFamily](../styles-and-themes/common-units/#fontFamily)-Text-keyboard | $fontFamily-monospace | $fontFamily-monospace |
573 | | [fontFamily](../styles-and-themes/common-units/#fontFamily)-Text-mono | $fontFamily-monospace | $fontFamily-monospace |
574 | | [fontFamily](../styles-and-themes/common-units/#fontFamily)-Text-sample | $fontFamily-monospace | $fontFamily-monospace |
575 | | [fontSize](../styles-and-themes/common-units/#size)-Text | $fontSize-sm | $fontSize-sm |
576 | | [fontSize](../styles-and-themes/common-units/#size)-Text-code | $fontSize-sm | $fontSize-sm |
577 | | [fontSize](../styles-and-themes/common-units/#size)-Text-codefence | $fontSize-code | $fontSize-code |
578 | | [fontSize](../styles-and-themes/common-units/#size)-Text-keyboard | $fontSize-sm | $fontSize-sm |
579 | | [fontSize](../styles-and-themes/common-units/#size)-Text-paragraph | *none* | *none* |
580 | | [fontSize](../styles-and-themes/common-units/#size)-Text-placeholder | $fontSize-xs | $fontSize-xs |
581 | | [fontSize](../styles-and-themes/common-units/#size)-Text-sample | $fontSize-sm | $fontSize-sm |
582 | | [fontSize](../styles-and-themes/common-units/#size)-Text-secondary | $fontSize-sm | $fontSize-sm |
583 | | [fontSize](../styles-and-themes/common-units/#size)-Text-small | $fontSize-sm | $fontSize-sm |
584 | | [fontSize](../styles-and-themes/common-units/#size)-Text-sub | $fontSize-xs | $fontSize-xs |
585 | | [fontSize](../styles-and-themes/common-units/#size)-Text-subheading | $fontSize-H6 | $fontSize-H6 |
586 | | [fontSize](../styles-and-themes/common-units/#size)-Text-subtitle | $fontSize-xl | $fontSize-xl |
587 | | [fontSize](../styles-and-themes/common-units/#size)-Text-sup | $fontSize-xs | $fontSize-xs |
588 | | [fontSize](../styles-and-themes/common-units/#size)-Text-tableheading | $fontSize-H6 | $fontSize-H6 |
589 | | [fontSize](../styles-and-themes/common-units/#size)-Text-title | $fontSize-2xl | $fontSize-2xl |
590 | | [fontStretch](../styles-and-themes/common-units/#fontStretch)-Text | *none* | *none* |
591 | | [fontStyle](../styles-and-themes/common-units/#fontStyle)-Text | *none* | *none* |
592 | | [fontStyle](../styles-and-themes/common-units/#fontStyle)-Text-cite | italic | italic |
593 | | [fontStyle](../styles-and-themes/common-units/#fontStyle)-Text-em | italic | italic |
594 | | [fontStyle](../styles-and-themes/common-units/#fontStyle)-Text-marked | *none* | *none* |
595 | | [fontStyle](../styles-and-themes/common-units/#fontStyle)-Text-placeholder | *none* | *none* |
596 | | [fontStyle](../styles-and-themes/common-units/#fontStyle)-Text-subheading | *none* | *none* |
597 | | [fontStyle](../styles-and-themes/common-units/#fontStyle)-Text-var | italic | italic |
598 | | [fontVariant](../styles-and-themes/common-units/#font-variant)-Text | *none* | *none* |
599 | | [fontWeight](../styles-and-themes/common-units/#fontWeight)-Text | $fontWeight-normal | $fontWeight-normal |
600 | | [fontWeight](../styles-and-themes/common-units/#fontWeight)-Text-abbr | $fontWeight-bold | $fontWeight-bold |
601 | | [fontWeight](../styles-and-themes/common-units/#fontWeight)-Text-keyboard | $fontWeight-bold | $fontWeight-bold |
602 | | [fontWeight](../styles-and-themes/common-units/#fontWeight)-Text-marked | *none* | *none* |
603 | | [fontWeight](../styles-and-themes/common-units/#fontWeight)-Text-placeholder | *none* | *none* |
604 | | [fontWeight](../styles-and-themes/common-units/#fontWeight)-Text-subheading | $fontWeight-bold | $fontWeight-bold |
605 | | [fontWeight](../styles-and-themes/common-units/#fontWeight)-Text-tableheading | $fontWeight-bold | $fontWeight-bold |
606 | | [letterSpacing](../styles-and-themes/common-units/#size)-Text | *none* | *none* |
607 | | [letterSpacing](../styles-and-themes/common-units/#size)-Text-caption | 0.05rem | 0.05rem |
608 | | [letterSpacing](../styles-and-themes/common-units/#size)-Text-subheading | 0.04em | 0.04em |
609 | | [lineBreak](../styles-and-themes/common-units/#line-break)-Text | *none* | *none* |
610 | | [lineHeight](../styles-and-themes/common-units/#size)-Text | *none* | *none* |
611 | | [lineHeight](../styles-and-themes/common-units/#size)-Text-codefence | 1.5 | 1.5 |
612 | | [lineHeight](../styles-and-themes/common-units/#size)-Text-marked | *none* | *none* |
613 | | [marginBottom](../styles-and-themes/common-units/#size)-Text | *none* | *none* |
614 | | [marginBottom](../styles-and-themes/common-units/#size)-Text-code | *none* | *none* |
615 | | [marginBottom](../styles-and-themes/common-units/#size)-Text-small | *none* | *none* |
616 | | [marginBottom](../styles-and-themes/common-units/#size)-Text-tableheading | $space-4 | $space-4 |
617 | | [marginLeft](../styles-and-themes/common-units/#size)-Text | *none* | *none* |
618 | | [marginLeft](../styles-and-themes/common-units/#size)-Text-code | *none* | *none* |
619 | | [marginLeft](../styles-and-themes/common-units/#size)-Text-small | *none* | *none* |
620 | | [marginRight](../styles-and-themes/common-units/#size)-Text | *none* | *none* |
621 | | [marginRight](../styles-and-themes/common-units/#size)-Text-code | *none* | *none* |
622 | | [marginRight](../styles-and-themes/common-units/#size)-Text-small | *none* | *none* |
623 | | [marginTop](../styles-and-themes/common-units/#size)-Text | *none* | *none* |
624 | | [marginTop](../styles-and-themes/common-units/#size)-Text-code | *none* | *none* |
625 | | [marginTop](../styles-and-themes/common-units/#size)-Text-small | *none* | *none* |
626 | | [marginTop](../styles-and-themes/common-units/#size)-Text-tableheading | $space-1 | $space-1 |
627 | | [paddingBottom](../styles-and-themes/common-units/#size)-Text-code | 2px | 2px |
628 | | [paddingHorizontal](../styles-and-themes/common-units/#size)-Text-code | $space-0_5 | $space-0_5 |
629 | | [paddingHorizontal](../styles-and-themes/common-units/#size)-Text-codefence | $space-4 | $space-4 |
630 | | [paddingHorizontal](../styles-and-themes/common-units/#size)-Text-keyboard | $space-1 | $space-1 |
631 | | [paddingHorizontal](../styles-and-themes/common-units/#size)-Text-tableheading | $space-1 | $space-1 |
632 | | [paddingVertical](../styles-and-themes/common-units/#size)-Text-codefence | $space-3 | $space-3 |
633 | | [paddingVertical](../styles-and-themes/common-units/#size)-Text-paragraph | $space-1 | $space-1 |
634 | | [textAlign](../styles-and-themes/common-units/#text-align)-Text | *none* | *none* |
635 | | [textAlignLast](../styles-and-themes/common-units/#text-align)-Text | *none* | *none* |
636 | | [textColor](../styles-and-themes/common-units/#color)-Text | $textColor-primary | $textColor-primary |
637 | | [textColor](../styles-and-themes/common-units/#color)-Text--hover | *none* | *none* |
638 | | [textColor](../styles-and-themes/common-units/#color)-Text-code--hover | *none* | *none* |
639 | | [textColor](../styles-and-themes/common-units/#color)-Text-codefence | $color-surface-900 | $color-surface-900 |
640 | | [textColor](../styles-and-themes/common-units/#color)-Text-marked | *none* | *none* |
641 | | [textColor](../styles-and-themes/common-units/#color)-Text-placeholder | $color-surface-500 | $color-surface-500 |
642 | | [textColor](../styles-and-themes/common-units/#color)-Text-secondary | $textColor-secondary | $textColor-secondary |
643 | | [textColor](../styles-and-themes/common-units/#color)-Text-small--hover | *none* | *none* |
644 | | [textColor](../styles-and-themes/common-units/#color)-Text-subheading | $textColor-secondary | $textColor-secondary |
645 | | [textDecorationColor](../styles-and-themes/common-units/#color)-Text | *none* | *none* |
646 | | [textDecorationColor](../styles-and-themes/common-units/#color)-Text-deleted | *none* | *none* |
647 | | [textDecorationColor](../styles-and-themes/common-units/#color)-Text-inserted | *none* | *none* |
648 | | [textDecorationLine](../styles-and-themes/common-units/#textDecoration)-Text | *none* | *none* |
649 | | [textDecorationLine](../styles-and-themes/common-units/#textDecoration)-Text-deleted | line-through | line-through |
650 | | [textDecorationLine](../styles-and-themes/common-units/#textDecoration)-Text-inserted | underline | underline |
651 | | [textDecorationStyle](../styles-and-themes/common-units/#textDecoration)-Text | *none* | *none* |
652 | | [textDecorationStyle](../styles-and-themes/common-units/#textDecoration)-Text-deleted | *none* | *none* |
653 | | [textDecorationStyle](../styles-and-themes/common-units/#textDecoration)-Text-inserted | *none* | *none* |
654 | | [textDecorationThickness](../styles-and-themes/common-units/#textDecoration)-Text | *none* | *none* |
655 | | [textDecorationThickness](../styles-and-themes/common-units/#textDecoration)-Text-deleted | *none* | *none* |
656 | | [textDecorationThickness](../styles-and-themes/common-units/#textDecoration)-Text-inserted | *none* | *none* |
657 | | [textIndent](../styles-and-themes/common-units/#text-indent)-Text | *none* | *none* |
658 | | [textShadow](../styles-and-themes/common-units/#text-shadow)-Text | *none* | *none* |
659 | | [textTransform](../styles-and-themes/common-units/#textTransform)-Text | *none* | *none* |
660 | | [textTransform](../styles-and-themes/common-units/#textTransform)-Text-abbr | uppercase | uppercase |
661 | | [textTransform](../styles-and-themes/common-units/#textTransform)-Text-subheading | uppercase | uppercase |
662 | | [textUnderlineOffset](../styles-and-themes/common-units/#size)-Text | *none* | *none* |
663 | | [verticalAlignment](../styles-and-themes/common-units/#alignment)-Text | *none* | *none* |
664 | | [verticalAlignment](../styles-and-themes/common-units/#alignment)-Text-code | *none* | *none* |
665 | | [verticalAlignment](../styles-and-themes/common-units/#alignment)-Text-small | *none* | *none* |
666 | | [verticalAlignment](../styles-and-themes/common-units/#alignment)-Text-sub | sub | sub |
667 | | [verticalAlignment](../styles-and-themes/common-units/#alignment)-Text-sup | super | super |
668 | | [wordBreak](../styles-and-themes/common-units/#word-break)-Text | *none* | *none* |
669 | | [wordSpacing](../styles-and-themes/common-units/#word-spacing)-Text | *none* | *none* |
670 | | [wordWrap](../styles-and-themes/common-units/#word-wrap)-Text | *none* | *none* |
671 | | [writingMode](../styles-and-themes/common-units/#writing-mode)-Text | *none* | *none* |
672 |
```