This is page 42 of 144. Use http://codebase.md/xmlui-org/xmlui/tools/vscode/resources/%7BimageSrc%7D?format=md&lines=false&page={x} to view the full context.

# Directory Structure

```
├── .changeset
│   ├── config.json
│   └── full-boxes-care.md
├── .eslintrc.cjs
├── .github
│   ├── build-checklist.png
│   ├── ISSUE_TEMPLATE
│   │   ├── bug_report.md
│   │   └── feature_request.md
│   └── workflows
│       ├── deploy-blog-optimized.yml
│       ├── deploy-blog-swa.yml
│       ├── deploy-blog.yml
│       ├── deploy-docs-optimized.yml
│       ├── deploy-docs-swa.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
│   ├── package.json
│   ├── public
│   │   ├── blog
│   │   │   ├── images
│   │   │   │   ├── an-advanced-codefence.gif
│   │   │   │   ├── an-advanced-codefence.mp4
│   │   │   │   ├── blog-page-component.png
│   │   │   │   ├── blog-scrabble.png
│   │   │   │   ├── codefence-runner.png
│   │   │   │   ├── integrated-blog-search.png
│   │   │   │   ├── lorem-ipsum.png
│   │   │   │   ├── playground-checkbox-source.png
│   │   │   │   ├── playground.png
│   │   │   │   ├── use-xmlui-mcp-to-find-a-howto.png
│   │   │   │   └── xmlui-demo-gallery.png
│   │   │   ├── introducing-xmlui.md
│   │   │   ├── lorem-ipsum.md
│   │   │   ├── newest-post.md
│   │   │   ├── older-post.md
│   │   │   ├── xmlui-playground.md
│   │   │   └── xmlui-powered-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
│   │   ├── staticwebapp.config.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
│   │   │   │   ├── control-cache-invalidation.md
│   │   │   │   ├── debounce-user-input-for-api-calls.md
│   │   │   │   ├── debounce-with-changelistener.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
│   ├── tsconfig.json
│   ├── 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
│   ├── 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
│   │   └── 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
│   ├── 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
│   ├── 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
│   ├── 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.module.scss
│   │       │   ├── 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.tsx
│   │       │   ├── StandalonePlayground.tsx
│   │       │   ├── StandalonePlaygroundNative.module.scss
│   │       │   ├── StandalonePlaygroundNative.tsx
│   │       │   ├── ThemeSwitcher.module.scss
│   │       │   ├── ThemeSwitcher.tsx
│   │       │   └── utils.ts
│   │       ├── providers
│   │       │   ├── Toast.module.scss
│   │       │   └── ToastProvider.tsx
│   │       ├── state
│   │       │   └── store.ts
│   │       ├── themes
│   │       │   └── theme.ts
│   │       └── utils
│   │           └── helpers.ts
│   ├── 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
│   ├── xmlui-spreadsheet
│   │   ├── .gitignore
│   │   ├── demo
│   │   │   └── Main.xmlui
│   │   ├── index.html
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   └── src
│   │       ├── index.tsx
│   │       ├── Spreadsheet.tsx
│   │       └── SpreadsheetNative.tsx
│   └── 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.spec.ts
│           │   ├── HeroSection.tsx
│           │   └── HeroSectionNative.tsx
│           ├── index.tsx
│           ├── ScrollToTop
│           │   ├── ScrollToTop.module.scss
│           │   ├── ScrollToTop.tsx
│           │   └── ScrollToTopNative.tsx
│           └── vite-env.d.ts
├── playwright.config.ts
├── 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.cjs
    │   ├── 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
    │   ├── component-metadata.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
    │   ├── theme-variables-refactoring.md
    │   ├── ud-components.md
    │   └── xmlui-repo.md
    ├── package.json
    ├── scripts
    │   ├── coverage-only.js
    │   ├── e2e-test-summary.js
    │   ├── extract-component-metadata.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
    │   ├── generate-metadata-markdown.js
    │   ├── get-langserver-metadata.js
    │   ├── 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.module.scss
    │   │   │   │   ├── LabelList.spec.ts
    │   │   │   │   ├── LabelList.tsx
    │   │   │   │   └── 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
    │   │   │   └── test-padding.xmlui
    │   │   ├── 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.js
    │   ├── 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
    │   │   │   ├── index.ts
    │   │   │   ├── ModalDialogDriver.ts
    │   │   │   ├── NumberBoxDriver.ts
    │   │   │   ├── TextBoxDriver.ts
    │   │   │   ├── TimeInputDriver.ts
    │   │   │   ├── TimerDriver.ts
    │   │   │   └── TreeDriver.ts
    │   │   ├── fixtures.ts
    │   │   ├── index.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.json
    ├── tsdown.config.ts
    ├── vite.config.ts
    └── vitest.config.ts
```

# Files

--------------------------------------------------------------------------------
/xmlui/src/components/App/App.md:
--------------------------------------------------------------------------------

```markdown
%-DESC-START

**Essential features:**

- **Layout templates**: Choose from 7 predefined layouts (horizontal, vertical, condensed, etc.) with sticky navigation options
- **Routing**: Built-in page routing via the [Pages](/components/Pages) component

%-DESC-END

%-PROP-START layout

Here are a few samples demonstrating the usage of the `layout` property. All samples use this markup, except the value of `App`'s layout and a few marked code snippets:

```xmlui
<App layout="(specific layout value)">
  <!-- AppHeader omitted for "vertical" and "vertical-sticky" -->
  <AppHeader>
    <property name="logoTemplate">
      <Heading level="h3" value="Example App"/>
    </property>
  </AppHeader>
  <NavPanel>
    <NavLink label="Home" to="/" icon="home"/>
    <NavLink label="Page 1" to="/page1"/>
    <NavLink label="Page 2" to="/page2"/>
  </NavPanel>
  <Pages fallbackPath="/">
    <Page url="/">
      <List data="https://api.spacexdata.com/v3/history">
        <property name="itemTemplate">
          <Card title="{$item.title}" subtitle="{$item.details}"/>
        </property>
      </List>
    </Page>
    <Page url="/page1">
      <Text value="Page 1" />
    </Page>
    <Page url="/page2">
      <Text value="Page 2" />
    </Page>
  </Pages>
  <Footer>Powered by XMLUI</Footer>
</App>
```

#### `horizontal`

```xmlui-pg copy name="Example: 'horizontal' layout" height="350px"
<App layout="horizontal">
  <AppHeader>
    <property name="logoTemplate">
      <Heading level="h3" value="Example App"/>
    </property>
  </AppHeader>
  <NavPanel>
      <NavLink label="Home" to="/" icon="home"/>
      <NavLink label="Page 1" to="/page1"/>
      <NavLink label="Page 2" to="/page2"/>
  </NavPanel>
  <Pages fallbackPath="/">
      <Page url="/">
        <List data="https://api.spacexdata.com/v3/history">
          <property name="itemTemplate">
            <Card title="{$item.title}" subtitle="{$item.details}"/>
          </property>
        </List>
      </Page>
      <Page url="/page1">
        <Text value="Page 1" />
      </Page>
      <Page url="/page2">
        <Text value="Page 2" />
      </Page>
  </Pages>
  <Footer>Powered by XMLUI</Footer>
</App>
```

#### `horizontal-sticky`

```xmlui-pg copy name="Example: 'horizontal-sticky' layout" height="350px"
<App layout="horizontal-sticky">
  <AppHeader>
    <property name="logoTemplate">
      <Heading level="h3" value="Example App"/>
    </property>
  </AppHeader>
  <NavPanel>
      <NavLink label="Home" to="/" icon="home"/>
      <NavLink label="Page 1" to="/page1"/>
      <NavLink label="Page 2" to="/page2"/>
  </NavPanel>
  <Pages fallbackPath="/">
      <Page url="/">
        <List data="https://api.spacexdata.com/v3/history">
          <property name="itemTemplate">
            <Card title="{$item.title}" subtitle="{$item.details}"/>
          </property>
        </List>
      </Page>
      <Page url="/page1">
        <Text value="Page 1" />
      </Page>
      <Page url="/page2">
        <Text value="Page 2" />
      </Page>
  </Pages>
  <Footer>Powered by XMLUI</Footer>
</App>
```

#### `condensed`

```xmlui-pg copy name="Example: 'condensed' layout" height="350px"
<App layout="condensed">
  <property name="logoTemplate">
    <Heading level="h3" value="Example App"/>
  </property>
  <NavPanel>
      <NavLink label="Home" to="/" icon="home"/>
      <NavLink label="Page 1" to="/page1"/>
      <NavLink label="Page 2" to="/page2"/>
  </NavPanel>
  <Pages fallbackPath="/">
      <Page url="/">
        <List data="https://api.spacexdata.com/v3/history">
          <property name="itemTemplate">
            <Card title="{$item.title}" subtitle="{$item.details}"/>
          </property>
        </List>
      </Page>
      <Page url="/page1">
        <Text value="Page 1" />
      </Page>
      <Page url="/page2">
        <Text value="Page 2" />
      </Page>
  </Pages>
  <Footer>Powered by XMLUI</Footer>
</App>
```

#### `condensed-sticky`

```xmlui-pg copy name="Example: 'condensed-sticky' layout" height="350px"
<App layout="condensed-sticky">
  <property name="logoTemplate">
      <Heading level="h3" value="Example App"/>
  </property>
  <NavPanel>
      <NavLink label="Home" to="/" icon="home"/>
      <NavLink label="Page 1" to="/page1"/>
      <NavLink label="Page 2" to="/page2"/>
  </NavPanel>
  <Pages fallbackPath="/">
      <Page url="/">
        <List data="https://api.spacexdata.com/v3/history">
          <property name="itemTemplate">
            <Card title="{$item.title}" subtitle="{$item.details}"/>
          </property>
        </List>
      </Page>
      <Page url="/page1">
        <Text value="Page 1" />
      </Page>
      <Page url="/page2">
        <Text value="Page 2" />
      </Page>
  </Pages>
  <Footer>Powered by XMLUI</Footer>
</App>
```

#### `vertical`

```xmlui-pg copy name="Example: 'vertical' layout" height="300px"
<App layout="vertical">
  <property name="logoTemplate">
    <Heading level="h3" value="Example App"/>
  </property>
  <NavPanel>
    <NavLink label="Home" to="/" icon="home"/>
    <NavLink label="Page 1" to="/page1"/>
    <NavLink label="Page 2" to="/page2"/>
  </NavPanel>
  <Pages fallbackPath="/">
      <Page url="/">
        <List data="https://api.spacexdata.com/v3/history">
          <property name="itemTemplate">
            <Card title="{$item.title}" subtitle="{$item.details}"/>
          </property>
        </List>
      </Page>
      <Page url="/page1">
        <Text value="Page 1" />
      </Page>
      <Page url="/page2">
        <Text value="Page 2" />
      </Page>
  </Pages>
  <Footer>Powered by XMLUI</Footer>
</App>
```

#### `vertical-sticky`

```xmlui-pg copy name="Example: 'vertical-sticky' layout" height="300px"
<App layout="vertical-sticky">
  <property name="logoTemplate">
    <Heading level="h3" value="Example App"/>
  </property>
  <NavPanel>
      <NavLink label="Home" to="/" icon="home"/>
      <NavLink label="Page 1" to="/page1"/>
      <NavLink label="Page 2" to="/page2"/>
  </NavPanel>
  <Pages fallbackPath="/">
      <Page url="/">
        <List data="https://api.spacexdata.com/v3/history">
          <property name="itemTemplate">
            <Card title="{$item.title}" subtitle="{$item.details}"/>
          </property>
        </List>
      </Page>
      <Page url="/page1">
        <Text value="Page 1" />
      </Page>
      <Page url="/page2">
        <Text value="Page 2" />
      </Page>
  </Pages>
  <Footer>Powered by XMLUI</Footer>
</App>
```

#### `vertical-full-header`

```xmlui-pg copy name="Example: 'vertical-full-header' layout" height="300px"
<App layout="vertical-full-header">
  <AppHeader>
    <property name="logoTemplate">
        <Heading level="h3" value="Example App"/>
    </property>
  </AppHeader>
  <NavPanel>
      <NavLink label="Home" to="/" icon="home"/>
      <NavLink label="Page 1" to="/page1"/>
      <NavLink label="Page 2" to="/page2"/>
  </NavPanel>
  <Pages fallbackPath="/">
      <Page url="/">
        <List data="https://api.spacexdata.com/v3/history">
          <property name="itemTemplate">
            <Card title="{$item.title}" subtitle="{$item.details}"/>
          </property>
        </List>
      </Page>
      <Page url="/page1">
        <Text value="Page 1" />
      </Page>
      <Page url="/page2">
        <Text value="Page 2" />
      </Page>
  </Pages>
  <Footer>Powered by XMLUI</Footer>
</App>
```

#### `desktop`

```xmlui-pg copy name="Example: 'desktop' layout" height="300px"
<App layout="desktop">
  <AppHeader>
    <property name="logoTemplate">
        <Heading level="h3" value="Example App"/>
    </property>
  </AppHeader>
  <Pages fallbackPath="/">
      <Page url="/">
        <List data="https://api.spacexdata.com/v3/history">
          <property name="itemTemplate">
            <Card title="{$item.title}" subtitle="{$item.details}"/>
          </property>
        </List>
      </Page>
      <Page url="/page1">
        <Text value="Page 1" />
      </Page>
      <Page url="/page2">
        <Text value="Page 2" />
      </Page>
  </Pages>
  <Footer>Powered by XMLUI</Footer>
</App>
```

The `desktop` layout is designed for full-screen desktop applications. It stretches the app to fill the entire browser viewport with zero padding and margins. The header (if present) docks to the top, the footer (if present) docks to the bottom, and the main content area stretches to fill all remaining vertical and horizontal space. This layout ignores all max-width constraints and scrollbar gutter settings to ensure edge-to-edge display.

%-PROP-END

%-PROP-START scrollWholePage

This boolean property specifies whether the whole page should scroll (true) or just the content area (false).
The default value is `true`.

```xmlui-pg copy display name="Example: scrollWholePage" height="150px"
<App scrollWholePage="false">
  <NavPanel>
    <NavLink label="Home" to="/" icon="home"/>
  </NavPanel>
  <Pages fallbackPath="/">
    <Page url="/">
      <Text>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </Text>
    </Page>
  </Pages>
</App>
```

%-PROP-END

%-PROP-START loggedInUser

Stores information about the currently logged in user.
Currently, there is no restriction on what the user data must look like.

```xmlui-pg copy display name="Example: loggedInUser" height="180px"
<App loggedInUser="{{ name: 'Joe', token: '1234' }}">
  <NavPanel>
    <NavLink label="Home" to="/" icon="home"/>
  </NavPanel>
  <Pages fallbackPath="/">
    <Page url="/">
      <Text value="User name: {loggedInUser.name}" />
      <Text value="User token: {loggedInUser.token}" />
    </Page>
  </Pages>
</App>
```

%-PROP-END

%-EVENT-START ready

This event fires when the `App` component finishes rendering on the page.
Use it as `onReady` when inlining it on the component.

```xmlui-pg copy display name="Example: ready"
<App onReady="isAppReady = true">
  <variable name="isAppReady" value="{false}"/>
  <Text value="{isAppReady ? 'App is ready' : 'Sadly, App is not ready'}" />
</App>
```

%-EVENT-END

%-EVENT-START messageReceived

The event handler method has two parameters. The first is the message sent; the second is the entire native event object.

```xmlui-pg copy display name="Example: messageReceived" /onMessageReceived/ /window.postMessage/
<App 
  var.message = "<none>" 
  onMessageReceived="(msg, ev) => {
    message = JSON.stringify(msg);
    console.log('Message event received:', ev);
  }">
  <Button label="Send a message"
    onClick="window.postMessage({type: 'message', messages:'Here you are!'})" />
  <Text>Message received: {message}</Text>
</App>
```

%-EVENT-END
```

--------------------------------------------------------------------------------
/tools/vscode/CHANGELOG.md:
--------------------------------------------------------------------------------

```markdown
# xmlui-vscode

## 0.11.6

### Patch Changes

- Updated dependencies [f9ac95e]
- Updated dependencies [097783b]
- Updated dependencies [0bace0a]
- Updated dependencies [07b1a3d]
- Updated dependencies [0bace0a]
- Updated dependencies [0bace0a]
  - xmlui@0.11.6

## 0.11.5

### Patch Changes

- Updated dependencies [10d755e]
- Updated dependencies [b3a4194]
  - xmlui@0.11.5

## 0.11.4

### Patch Changes

- Updated dependencies [e384c59]
- Updated dependencies [f296904]
- Updated dependencies [f296904]
- Updated dependencies [be73336]
  - xmlui@0.11.4

## 0.11.3

### Patch Changes

- Updated dependencies [4a311e2]
- Updated dependencies [f8a75ce]
- Updated dependencies [bbc421b]
  - xmlui@0.11.3

## 0.11.2

### Patch Changes

- Updated dependencies [c1f306f]
  - xmlui@0.11.2

## 0.11.1

### Patch Changes

- Updated dependencies [7bbbb1d]
  - xmlui@0.11.1

## 0.11.0

### Patch Changes

- Updated dependencies [fe503eb]
- Updated dependencies [06bb966]
- Updated dependencies [19145d2]
- Updated dependencies [e6b5810]
- Updated dependencies [db94656]
- Updated dependencies [fe503eb]
- Updated dependencies [82ddbe7]
- Updated dependencies [5109dce]
- Updated dependencies [75b701b]
  - xmlui@0.11.0

## 0.10.26

### Patch Changes

- Updated dependencies [e1b8d58]
- Updated dependencies [1ad832c]
  - xmlui@0.10.26

## 0.10.25

### Patch Changes

- Updated dependencies [e7c503e]
- Updated dependencies [5fe3052]
- Updated dependencies [5fe3052]
- Updated dependencies [250647b]
  - xmlui@0.10.25

## 0.10.24

### Patch Changes

- Updated dependencies [3e361c4]
- Updated dependencies [3e361c4]
  - xmlui@0.10.24

## 0.10.23

### Patch Changes

- Updated dependencies [bf18444]
- Updated dependencies [6d3bb89]
- Updated dependencies [89c69af]
- Updated dependencies [4cfebf0]
- Updated dependencies [145cd68]
  - xmlui@0.10.23

## 0.10.22

### Patch Changes

- Updated dependencies [501f60a]
- Updated dependencies [1020f1c]
  - xmlui@0.10.22

## 0.10.21

### Patch Changes

- Updated dependencies [6fd4d62]
  - xmlui@0.10.21

## 0.10.20

### Patch Changes

- Updated dependencies [26eac90]
- Updated dependencies [f53edff]
- Updated dependencies [1840916]
- Updated dependencies [c6be7a3]
- Updated dependencies [6aaefaf]
- Updated dependencies [28d2585]
- Updated dependencies [e29a231]
- Updated dependencies [22162c0]
- Updated dependencies [e90232b]
  - xmlui@0.10.20

## 0.10.19

### Patch Changes

- Updated dependencies [facb257]
- Updated dependencies [6084c14]
- Updated dependencies [e1fa9d7]
  - xmlui@0.10.19

## 0.10.18

### Patch Changes

- Updated dependencies [202f2b2]
- Updated dependencies [6650ee8]
- Updated dependencies [da98994]
- Updated dependencies [8394663]
  - xmlui@0.10.18

## 0.10.17

### Patch Changes

- Updated dependencies [07dae0b]
  - xmlui@0.10.17

## 0.10.16

### Patch Changes

- Updated dependencies [0ba6612]
- Updated dependencies [7b78052]
- Updated dependencies [314b429]
- Updated dependencies [a1dea8f]
- Updated dependencies [cff754c]
  - xmlui@0.10.16

## 0.10.15

### Patch Changes

- Updated dependencies [3c8ad14]
- Updated dependencies [5502fea]
- Updated dependencies [e08f0ba]
- Updated dependencies [5502fea]
- Updated dependencies [db618b5]
- Updated dependencies [a795b3d]
- Updated dependencies [5851c02]
  - xmlui@0.10.15

## 0.10.14

### Patch Changes

- Updated dependencies [618049b]
- Updated dependencies [215a142]
- Updated dependencies [65b52e1]
- Updated dependencies [0cc2178]
- Updated dependencies [53d4ed9]
  - xmlui@0.10.14

## 0.10.13

### Patch Changes

- Updated dependencies [9401ee0]
- Updated dependencies [eb62858]
- Updated dependencies [eb62858]
- Updated dependencies [eb62858]
- Updated dependencies [eb62858]
- Updated dependencies [eb62858]
- Updated dependencies [eb62858]
- Updated dependencies [243b7fa]
- Updated dependencies [eb62858]
  - xmlui@0.10.13

## 0.10.12

### Patch Changes

- Updated dependencies [f12a042]
- Updated dependencies [8731eb8]
- Updated dependencies [eb6454f]
- Updated dependencies [1210852]
  - xmlui@0.10.12

## 0.10.11

### Patch Changes

- Updated dependencies [8c76c8d]
- Updated dependencies [d56c3e5]
- Updated dependencies [e42d367]
- Updated dependencies [f539526]
- Updated dependencies [19ce234]
- Updated dependencies [455b6c0]
- Updated dependencies [e90dc73]
- Updated dependencies [819b563]
- Updated dependencies [b57dfa2]
- Updated dependencies [9dd0f97]
- Updated dependencies [19ce234]
- Updated dependencies [898346d]
- Updated dependencies [705dd04]
  - xmlui@0.10.11

## 0.10.10

### Patch Changes

- Updated dependencies [fff80c5]
  - xmlui@0.10.10

## 0.10.9

### Patch Changes

- Updated dependencies [879c09d]
- Updated dependencies [3ad8514]
- Updated dependencies [0c69245]
- Updated dependencies [4ad31fc]
- Updated dependencies [c99f184]
- Updated dependencies [5032e4a]
- Updated dependencies [2394f36]
  - xmlui@0.10.9

## 0.10.8

### Patch Changes

- Updated dependencies [a4d62c4]
- Updated dependencies [7ed2918]
  - xmlui@0.10.8

## 0.10.7

### Patch Changes

- Updated dependencies [664ea4f]
- Updated dependencies [a739a26]
- Updated dependencies [bdb54dd]
- Updated dependencies [81724c6]
  - xmlui@0.10.7

## 0.10.6

### Patch Changes

- Updated dependencies [6464ec8]
  - xmlui@0.10.6

## 0.10.5

### Patch Changes

- Updated dependencies [d38351d]
  - xmlui@0.10.5

## 0.10.4

### Patch Changes

- Updated dependencies [43fd8c5]
- Updated dependencies [1df8e5d]
- Updated dependencies [0d5d9d1]
- Updated dependencies [3def673]
- Updated dependencies [428ebea]
- Updated dependencies [a12ce66]
  - xmlui@0.10.4

## 0.10.3

### Patch Changes

- Updated dependencies [2e512bb]
- Updated dependencies [46d1d18]
- Updated dependencies [6bc9ed1]
- Updated dependencies [0b1f983]
- Updated dependencies [a2637f3]
- Updated dependencies [eb4d592]
  - xmlui@0.10.3

## 0.10.2

### Patch Changes

- Updated dependencies [ff14e15]
- Updated dependencies [1451a94]
  - xmlui@0.10.2

## 0.10.1

### Patch Changes

- Updated dependencies [442416b]
- Updated dependencies [a018431]
- Updated dependencies [33cb547]
- Updated dependencies [b5d7537]
  - xmlui@0.10.1

## 0.10.0

### Patch Changes

- Updated dependencies [6d0ce52]
- Updated dependencies [8c98f33]
- Updated dependencies [ef86593]
- Updated dependencies [da5f4e7]
- Updated dependencies [47c7a2d]
- Updated dependencies [740f904]
- Updated dependencies [5009c52]
- Updated dependencies [000a311]
- Updated dependencies [eb8b958]
- Updated dependencies [2f5ec32]
  - xmlui@0.10.0

## 0.9.101

### Patch Changes

- Updated dependencies [791b0be]
  - xmlui@0.9.101

## 0.9.100

### Patch Changes

- Updated dependencies [2dbf6d2]
  - xmlui@0.9.100

## 0.9.99

### Patch Changes

- Updated dependencies [e5a09fb]
- Updated dependencies [36360f6]
  - xmlui@0.9.99

## 0.9.98

### Patch Changes

- Updated dependencies [ff781f3]
- Updated dependencies [377f0f2]
- Updated dependencies [ce0ff76]
- Updated dependencies [208768a]
  - xmlui@0.9.98

## 0.9.97

### Patch Changes

- Updated dependencies [f7e8019]
  - xmlui@0.9.97

## 0.9.96

### Patch Changes

- Updated dependencies [3196156]
- Updated dependencies [cfee78a]
- Updated dependencies [f51002a]
- Updated dependencies [3fa52d9]
  - xmlui@0.9.96

## 0.9.95

### Patch Changes

- Updated dependencies [af6a7a0]
- Updated dependencies [69a2a8f]
- Updated dependencies [29c68fe]
  - xmlui@0.9.95

## 0.9.94

### Patch Changes

- Updated dependencies [1d9365c]
  - xmlui@0.9.94

## 0.9.93

### Patch Changes

- Updated dependencies [af17117]
- Updated dependencies [44da3d9]
- Updated dependencies [b7a6b9a]
- Updated dependencies [bc95844]
- Updated dependencies [52d94a2]
- Updated dependencies [6629ce5]
- Updated dependencies [0254471]
- Updated dependencies [3318cfb]
  - xmlui@0.9.93

## 0.9.92

### Patch Changes

- Updated dependencies [347cda1]
  - xmlui@0.9.92

## 0.9.91

### Patch Changes

- Updated dependencies [6a7d779]
  - xmlui@0.9.91

## 0.9.90

### Patch Changes

- Updated dependencies [4b57f7e]
  - xmlui@0.9.90

## 0.9.89

### Patch Changes

- Updated dependencies [2968eb9]
- Updated dependencies [94f4eb5]
- Updated dependencies [8364c03]
  - xmlui@0.9.89

## 0.9.88

### Patch Changes

- d4235e9: feat: layout properties displayed later in completion list
- Updated dependencies [b79d7d8]
  - xmlui@0.9.88

## 0.9.87

### Patch Changes

- Updated dependencies [33846c2]
  - xmlui@0.9.87

## 0.9.86

### Patch Changes

- Updated dependencies [48af60d]
  - xmlui@0.9.86

## 0.9.85

### Patch Changes

- Updated dependencies [ee8d6ad]
- Updated dependencies [9ca7572]
- Updated dependencies [6944d2f]
- Updated dependencies [c0c10e7]
- Updated dependencies [cbe1ef2]
  - xmlui@0.9.85

## 0.9.84

### Patch Changes

- Updated dependencies [c54abf3]
  - xmlui@0.9.84

## 0.9.83

### Patch Changes

- Updated dependencies [8e3d6a3]
- Updated dependencies [8644010]
  - xmlui@0.9.83

## 0.9.82

### Patch Changes

- Updated dependencies [3bc29ae]
- Updated dependencies [1101bf5]
- Updated dependencies [cd8db58]
- Updated dependencies [13beb58]
- Updated dependencies [79c1d8a]
  - xmlui@0.9.82

## 0.9.81

### Patch Changes

- Updated dependencies [59680b7]
  - xmlui@0.9.81

## 0.9.80

### Patch Changes

- Updated dependencies [4598566]
- Updated dependencies [14e6a7d]
- Updated dependencies [cf05bd2]
  - xmlui@0.9.80

## 0.9.79

### Patch Changes

- Updated dependencies [ad21a31]
  - xmlui@0.9.79

## 0.9.78

### Patch Changes

- Updated dependencies [94a68f0]
- Updated dependencies [94a68f0]
- Updated dependencies [163a45c]
- Updated dependencies [7ce528b]
- Updated dependencies [c6eb9a8]
  - xmlui@0.9.78

## 0.9.77

### Patch Changes

- Updated dependencies [c867f38]
  - xmlui@0.9.77

## 0.9.76

### Patch Changes

- 15bf622: fix: add escaped \{ to textmate syntax, eliminate double extraction of props in FormItem causing bugs with escaped open curly brace being parsed as start of binding expression.
- Updated dependencies [aa08a8c]
- Updated dependencies [15bf622]
- Updated dependencies [5761868]
  - xmlui@0.9.76

## 0.9.75

### Patch Changes

- 2edefdd: feat: ensure xmlui-vscode is versioned with xmlui
- Updated dependencies [c876be8]
  - xmlui@0.9.75

## 0.1.2

### Patch Changes

- 2e808fa: Add custom xmlui formatter to better handle formatting erroneous syntax, long lines, and xmlui specific syntax, like backtick quoted strings, key-only attributes, etc...
- Updated dependencies [96273bf]
- Updated dependencies [1a81bcf]
  - xmlui@0.9.51

## 0.1.1

### Patch Changes

- e964286: Add formating to language server and fix error recovery when tag name is erroneous
- Updated dependencies [de8d63c]
- Updated dependencies [bd6d1b4]
- Updated dependencies [db5a5f4]
- Updated dependencies [69b4402]
  - xmlui@0.9.45

## 0.0.5

### Patch Changes

- 42416ba: test change for CI #2
- Updated dependencies [42416ba]
  - xmlui@0.9.41

## 0.0.3

### Patch Changes

- e43b92a: another test change

## 0.0.2

### Patch Changes

- 3be75a4: test release for CI
- Updated dependencies [8d662f3]
  - xmlui@0.9.37

```

--------------------------------------------------------------------------------
/packages/xmlui-playground/src/state/store.ts:
--------------------------------------------------------------------------------

```typescript
import type { Dispatch } from "react";
import { createContext } from "react";
import produce from "immer";
import type {
  ApiInterceptorDefinition,
  CompoundComponentDef,
  ThemeDefinition,
  ThemeTone,
} from "xmlui";
import { errReportComponent, xmlUiMarkupToComponent, builtInThemes } from "xmlui";

type Orientation = "horizontal" | "vertical";

type Options = {
  previewMode?: boolean;
  swapped?: boolean;
  orientation?: Orientation;
  content: string;
  allowStandalone?: boolean;
  id: number;
  activeTheme?: string;
  activeTone?: ThemeTone;
  language: "xmlui" | "json";
  emulatedApi?: string;
  fixedTheme?: boolean;
};

type AppDescription = {
  config: {
    name: string;
    description?: string;
    appGlobals: any;
    resources: any;
    themes: ThemeDefinition[];
    defaultTheme?: string;
    defaultTone?: string;
  };
  components: any[];
  app: any;
  availableThemes?: Array<ThemeDefinition>;
  api?: ApiInterceptorDefinition;
};

export interface IPlaygroundContext {
  status: "loading" | "loaded" | "idle";
  editorStatus?: "loading" | "loaded" | "idle";
  appDescription: AppDescription;
  originalAppDescription: AppDescription;
  dispatch: Dispatch<PlaygroundAction>;
  text: string;
  options: Options;
  playgroundId: string;
  error: string | null;
}

export const PlaygroundContext = createContext<IPlaygroundContext>(
  undefined as unknown as IPlaygroundContext,
);

enum PlaygroundActionKind {
  TEXT_CHANGED = "PlaygroundActionKind:TEXT_CHANGED",
  CONTENT_CHANGED = "PlaygroundActionKind:CONTENT_CHANGED",
  PREVIEW_MODE = "PlaygroundActionKind:PREVIEW_MODE",
  RESET_APP = "PlaygroundActionKind:RESET_APP",
  APP_SWAPPED = "PlaygroundActionKind:APP_SWAPPED",
  ORIENTATION_CHANGED = "PlaygroundActionKind:ORIENTATION_CHANGED",
  APP_DESCRIPTION_INITIALIZED = "PlaygroundActionKind:APP_DESCRIPTION_INITIALIZED",
  EDITOR_STATUS_CHANGED = "PlaygroundActionKind:EDITOR_STATUS_CHANGED",
  OPTIONS_INITIALIZED = "PlaygroundActionKind:OPTIONS_INITIALIZED",
  ACTIVE_THEME_CHANGED = "PlaygroundActionKind:ACTIVE_THEME_CHANGED",
  TONE_CHANGED = "PlaygroundActionKind:TONE_CHANGED",
  ERROR_CLEARED = "PlaygroundActionKind:ERROR_CLEARED",
}

type PlaygroundAction = {
  type: PlaygroundActionKind;
  payload: {
    text?: string;
    appDescription?: AppDescription;
    options?: Options;
    activeTone?: ThemeTone;
    activeTheme?: string;
    content?: string;
    themes?: ThemeDefinition[];
    previewMode?: boolean;
    editorStatus?: "loading" | "loaded";
    error?: string | null;
  };
};

export interface PlaygroundState {
  editorStatus: "loading" | "loaded" | "idle";
  status: "loading" | "loaded" | "idle";
  text: string;
  appDescription: AppDescription;
  originalAppDescription: AppDescription;
  options: Options;
  error: string | null;
}

export function toneChanged(activeTone: ThemeTone) {
  return {
    type: PlaygroundActionKind.TONE_CHANGED,
    payload: {
      activeTone,
    },
  };
}

export function textChanged(text: string) {
  return {
    type: PlaygroundActionKind.TEXT_CHANGED,
    payload: {
      text,
    },
  };
}

export function contentChanged(content: string) {
  return {
    type: PlaygroundActionKind.CONTENT_CHANGED,
    payload: {
      content,
    },
  };
}

export function previewMode(previewMode: boolean) {
  return {
    type: PlaygroundActionKind.PREVIEW_MODE,
    payload: {
      previewMode,
    },
  };
}

export function resetApp() {
  return {
    type: PlaygroundActionKind.RESET_APP,
    payload: {},
  };
}

export function swapApp() {
  return {
    type: PlaygroundActionKind.APP_SWAPPED,
    payload: {},
  };
}

export function changeOrientation() {
  return {
    type: PlaygroundActionKind.ORIENTATION_CHANGED,
    payload: {},
  };
}

export function appDescriptionInitialized(appDescription: any) {
  return {
    type: PlaygroundActionKind.APP_DESCRIPTION_INITIALIZED,
    payload: {
      appDescription,
    },
  };
}

export function optionsInitialized(options: Options) {
  return {
    type: PlaygroundActionKind.OPTIONS_INITIALIZED,
    payload: {
      options,
    },
  };
}

export function activeThemeChanged(activeTheme: string) {
  return {
    type: PlaygroundActionKind.ACTIVE_THEME_CHANGED,
    payload: {
      activeTheme,
    },
  };
}

export function editorStatusChanged(editorStatus: "loading" | "loaded") {
  return {
    type: PlaygroundActionKind.EDITOR_STATUS_CHANGED,
    payload: {
      editorStatus,
    },
  };
}

export function clearError() {
  return {
    type: PlaygroundActionKind.ERROR_CLEARED,
    payload: {},
  };
}

export const playgroundReducer = produce((state: PlaygroundState, action: PlaygroundAction) => {
  switch (action.type) {
    case PlaygroundActionKind.TONE_CHANGED: {
      state.options.id = state.options.id + 1;
      state.options.activeTone = action.payload.activeTone;
      break;
    }
    case PlaygroundActionKind.EDITOR_STATUS_CHANGED: {
      state.editorStatus = action.payload.editorStatus || "idle";
      break;
    }
    case PlaygroundActionKind.APP_DESCRIPTION_INITIALIZED: {
      state.status = "loading";
      if (action.payload.appDescription) {
        const compoundComponents: CompoundComponentDef[] =
          action.payload.appDescription.components.map((src) => {
            if (typeof src === "string") {
              let { errors, component, erroneousCompoundComponentName } =
                xmlUiMarkupToComponent(src);
              if (errors.length > 0) {
                return errReportComponent(
                  errors,
                  "Preview source file",
                  erroneousCompoundComponentName,
                );
              }
              return {
                name: (component as CompoundComponentDef).name,
                component: src,
              };
            }
            return src;
          });
        state.appDescription.components = compoundComponents;
        state.appDescription.app = action.payload.appDescription.app;
        state.appDescription.config = action.payload.appDescription.config;
        state.appDescription.api = action.payload.appDescription.api;
        state.text = action.payload.appDescription.app;
        const themes = action.payload.appDescription.config.themes || [];
        state.appDescription.availableThemes = [...themes, ...builtInThemes];
        state.options.activeTheme =
          state.appDescription.config.defaultTheme || state.appDescription.availableThemes[0].id;
        state.originalAppDescription = { ...state.appDescription };
      }
      state.status = "loaded";
      break;
    }
    case PlaygroundActionKind.OPTIONS_INITIALIZED: {
      state.options = action.payload.options || state.options;
      break;
    }
    case PlaygroundActionKind.ACTIVE_THEME_CHANGED: {
      if (action.payload.activeTheme) {
        state.options.activeTheme = action.payload.activeTheme;
      }
      break;
    }
    case PlaygroundActionKind.PREVIEW_MODE: {
      state.options.previewMode = action.payload.previewMode || false;
      break;
    }
    case PlaygroundActionKind.APP_SWAPPED: {
      state.options.swapped = !state.options.swapped;
      break;
    }
    case PlaygroundActionKind.ORIENTATION_CHANGED: {
      state.options.orientation =
        state.options.orientation === "horizontal" ? "vertical" : "horizontal";
      break;
    }
    case PlaygroundActionKind.RESET_APP: {
      state.options = { ...state.options, id: state.options.id + 1 };
      state.appDescription = { ...state.originalAppDescription };
      if (state.options.content === "app") {
        state.text = state.originalAppDescription.app;
      }
      if (state.options.content === "config") {
        state.text = JSON.stringify(state.originalAppDescription.config, null, 2);
      } else if (
        state.appDescription.components
          .map((c) => c.name.toLowerCase())
          .includes(state.options.content?.toLowerCase())
      ) {
        state.text =
          state.originalAppDescription.components.find(
            (component: CompoundComponentDef) => component.name === state.options.content,
          )?.component || "";
      }
      break;
    }
    case PlaygroundActionKind.CONTENT_CHANGED: {
      state.options.content = action.payload.content || "app";
      if (state.options.content === "app") {
        state.text = state.appDescription.app;
        state.options.language = "xmlui";
      } else if (state.options.content === "config") {
        state.text = JSON.stringify(state.appDescription.config, null, 2);
        state.options.language = "json";
      } else if (
        state.appDescription.components
          .map((c) => c.name.toLowerCase())
          .includes(state.options.content?.toLowerCase())
      ) {
        state.text =
          state.appDescription.components.find(
            (component: CompoundComponentDef) => component.name === state.options.content,
          )?.component || "";
        state.options.language = "xmlui";
      } else if (
        state.appDescription.config.themes
          .map((t) => t.id.toLowerCase())
          .includes(state.options.content?.toLowerCase())
      ) {
        state.text = JSON.stringify(
          state.appDescription.config.themes.find(
            (theme: ThemeDefinition) => theme.id === state.options.content,
          ),
          null,
          2,
        );
        state.options.language = "json";
      }
      break;
    }
    case PlaygroundActionKind.ERROR_CLEARED: {
      state.error = null;
      break;
    }
    case PlaygroundActionKind.TEXT_CHANGED:
      state.options.id = state.options.id + 1;
      {
        state.text = action.payload.text || "";
        state.error = null;
        if (state.options.content === "app") {
          state.appDescription.app = state.text;
        } else if (state.options.content === "config") {
          try {
            state.appDescription.config = JSON.parse(state.text || "");
          } catch (e: any) {
            state.error = e.message;
          }
        } else if (
          state.appDescription.components?.some(
            (component: CompoundComponentDef) => component.name === state.options.content,
          )
        ) {
          state.appDescription.components = state.appDescription.components.map(
            (component: CompoundComponentDef) => {
              if (component.name === state.options.content) {
                return {
                  name: component.name,
                  component: state.text || "",
                };
              }
              return component;
            },
          );
        } else if (
          state.appDescription.config.themes?.some(
            (theme: ThemeDefinition) => theme.id === state.options.content,
          )
        ) {
          try {
            state.appDescription.config.themes = state.appDescription.config.themes.map(
              (theme: ThemeDefinition) => {
                if (theme.id === state.options.content) {
                  return JSON.parse(state.text || "");
                }
                return theme;
              },
            );
          } catch (e: any) {
            state.error = e.message;
          }
        }
      }
      break;
  }
});

```

--------------------------------------------------------------------------------
/xmlui/tests/components-core/utils/date-utils.test.ts:
--------------------------------------------------------------------------------

```typescript
import { describe, expect, it, vi, beforeEach, afterEach } from "vitest";
import { formatHumanElapsedTime } from "../../../src/components-core/utils/date-utils";
import * as dateFns from "date-fns";

// Mock date-fns functions used by formatHumanElapsedTime
vi.mock("date-fns", async () => {
  const actual = await vi.importActual("date-fns");
  return {
    ...(actual as object),
    isToday: vi.fn(),
    isYesterday: vi.fn(),
  };
});

describe("formatHumanElapsedTime tests", () => {
  const fixedDate = new Date("2025-07-15T12:00:00Z");
  
  beforeEach(() => {
    // Use fake timers to control the current date
    vi.useFakeTimers();
    vi.setSystemTime(fixedDate);
    
    // Setup mocks for date-fns functions that are used in the implementation
    vi.mocked(dateFns.isToday).mockImplementation((date) => {
      const d = new Date(date);
      return (
        d.getDate() === fixedDate.getDate() &&
        d.getMonth() === fixedDate.getMonth() &&
        d.getFullYear() === fixedDate.getFullYear()
      );
    });
    
    vi.mocked(dateFns.isYesterday).mockImplementation((date) => {
      const d = new Date(date);
      const yesterday = new Date(fixedDate);
      yesterday.setDate(yesterday.getDate() - 1);
      return (
        d.getDate() === yesterday.getDate() &&
        d.getMonth() === yesterday.getMonth() &&
        d.getFullYear() === yesterday.getFullYear()
      );
    });
  });

  afterEach(() => {
    vi.useRealTimers();
    vi.restoreAllMocks();
  });

  // =============================================================================
  // BASIC FUNCTIONALITY TESTS
  // =============================================================================

  it("should return 'now' for times within 10 seconds", () => {
    // Create dates within 10 seconds of the fixed date
    const now = new Date(fixedDate);
    const fiveSecondsAgo = new Date(fixedDate.getTime() - 5 * 1000);
    
    expect(formatHumanElapsedTime(now)).toBe("now");
    expect(formatHumanElapsedTime(fiveSecondsAgo)).toBe("now");
  });

  it("should format seconds correctly", () => {
    const fifteenSecondsAgo = new Date(fixedDate.getTime() - 15 * 1000);
    const elevenSecondsAgo = new Date(fixedDate.getTime() - 11 * 1000);
    const fiftyNineSecondsAgo = new Date(fixedDate.getTime() - 59 * 1000);
    
    expect(formatHumanElapsedTime(fifteenSecondsAgo)).toBe("15 seconds ago");
    expect(formatHumanElapsedTime(elevenSecondsAgo)).toBe("11 seconds ago");
    expect(formatHumanElapsedTime(fiftyNineSecondsAgo)).toBe("59 seconds ago");
  });

  it("should format minutes correctly", () => {
    const oneMinuteAgo = new Date(fixedDate.getTime() - 1 * 60 * 1000);
    const thirtyMinutesAgo = new Date(fixedDate.getTime() - 30 * 60 * 1000);
    const fiftyNineMinutesAgo = new Date(fixedDate.getTime() - 59 * 60 * 1000);
    
    expect(formatHumanElapsedTime(oneMinuteAgo)).toBe("1 minute ago");
    expect(formatHumanElapsedTime(thirtyMinutesAgo)).toBe("30 minutes ago");
    expect(formatHumanElapsedTime(fiftyNineMinutesAgo)).toBe("59 minutes ago");
  });

  it("should format hours correctly for today", () => {
    const oneHourAgo = new Date(fixedDate.getTime() - 1 * 60 * 60 * 1000);
    const sixHoursAgo = new Date(fixedDate.getTime() - 6 * 60 * 60 * 1000);
    
    expect(formatHumanElapsedTime(oneHourAgo)).toBe("1 hour ago");
    expect(formatHumanElapsedTime(sixHoursAgo)).toBe("6 hours ago");
  });

  it("should return 'yesterday' for yesterday's dates", () => {
    // Create a date that is exactly yesterday (24 hours ago)
    const yesterday = new Date(fixedDate);
    yesterday.setDate(yesterday.getDate() - 1);
    
    expect(formatHumanElapsedTime(yesterday)).toBe("yesterday");
  });

  it("should format days correctly for dates within a week", () => {
    const twoDaysAgo = new Date(fixedDate.getTime() - 2 * 24 * 60 * 60 * 1000);
    const sixDaysAgo = new Date(fixedDate.getTime() - 6 * 24 * 60 * 60 * 1000);
    
    // Ensure these aren't identified as "yesterday"
    vi.mocked(dateFns.isYesterday).mockReturnValue(false);
    
    expect(formatHumanElapsedTime(twoDaysAgo)).toBe("2 days ago");
    expect(formatHumanElapsedTime(sixDaysAgo)).toBe("6 days ago");
  });

  it("should format weeks correctly for dates within a month", () => {
    const oneWeekAgo = new Date(fixedDate.getTime() - 7 * 24 * 60 * 60 * 1000);
    const threeWeeksAgo = new Date(fixedDate.getTime() - 21 * 24 * 60 * 60 * 1000);
    
    expect(formatHumanElapsedTime(oneWeekAgo)).toBe("1 week ago");
    expect(formatHumanElapsedTime(threeWeeksAgo)).toBe("3 weeks ago");
  });

  it("should format months correctly for dates within a year", () => {
    const oneMonthAgo = new Date(fixedDate.getTime() - 30 * 24 * 60 * 60 * 1000);
    const sixMonthsAgo = new Date(fixedDate.getTime() - 180 * 24 * 60 * 60 * 1000);
    const elevenMonthsAgo = new Date(fixedDate.getTime() - 330 * 24 * 60 * 60 * 1000);
    
    expect(formatHumanElapsedTime(oneMonthAgo)).toBe("1 month ago");
    expect(formatHumanElapsedTime(sixMonthsAgo)).toBe("6 months ago");
    expect(formatHumanElapsedTime(elevenMonthsAgo)).toBe("11 months ago");
  });

  it("should format years correctly for older dates", () => {
    const oneYearAgo = new Date(fixedDate.getTime() - 365 * 24 * 60 * 60 * 1000);
    const fiveYearsAgo = new Date(fixedDate.getTime() - 5 * 365 * 24 * 60 * 60 * 1000);
    
    expect(formatHumanElapsedTime(oneYearAgo)).toBe("1 year ago");
    expect(formatHumanElapsedTime(fiveYearsAgo)).toBe("5 years ago");
  });

  // =============================================================================
  // EDGE CASE TESTS
  // =============================================================================

  it("should handle string date input correctly", () => {
    const dateStr = new Date(fixedDate.getTime() - 15 * 1000).toISOString();
    expect(formatHumanElapsedTime(dateStr)).toBe("15 seconds ago");
  });

  it("should handle future dates by returning the formatted date", () => {
    const tomorrow = new Date(fixedDate.getTime() + 24 * 60 * 60 * 1000);
    expect(formatHumanElapsedTime(tomorrow)).toBe(tomorrow.toLocaleDateString());
  });

  it("should handle dates at exactly the boundary between time units", () => {
    // Exactly 60 seconds = 1 minute
    const exactlyOneMinute = new Date(fixedDate.getTime() - 60 * 1000);
    expect(formatHumanElapsedTime(exactlyOneMinute)).toBe("1 minute ago");
    
    // Exactly 60 minutes = 1 hour
    const exactlyOneHour = new Date(fixedDate.getTime() - 60 * 60 * 1000);
    expect(formatHumanElapsedTime(exactlyOneHour)).toBe("1 hour ago");
  });

  it("should handle invalid date inputs gracefully", () => {
    const invalidDate = new Date("invalid date");
    expect(() => formatHumanElapsedTime(invalidDate)).not.toThrow();
  });

  // =============================================================================
  // SHORT FORMAT TESTS
  // =============================================================================
  
  it("should return 'now' for short format within 10 seconds", () => {
    // Create dates within 10 seconds of the fixed date
    const now = new Date(fixedDate);
    const fiveSecondsAgo = new Date(fixedDate.getTime() - 5 * 1000);
    
    expect(formatHumanElapsedTime(now, true)).toBe("now");
    expect(formatHumanElapsedTime(fiveSecondsAgo, true)).toBe("now");
  });

  it("should format seconds correctly with short format", () => {
    const fifteenSecondsAgo = new Date(fixedDate.getTime() - 15 * 1000);
    const elevenSecondsAgo = new Date(fixedDate.getTime() - 11 * 1000);
    const fiftyNineSecondsAgo = new Date(fixedDate.getTime() - 59 * 1000);
    
    expect(formatHumanElapsedTime(fifteenSecondsAgo, true)).toBe("15 s ago");
    expect(formatHumanElapsedTime(elevenSecondsAgo, true)).toBe("11 s ago");
    expect(formatHumanElapsedTime(fiftyNineSecondsAgo, true)).toBe("59 s ago");
  });

  it("should format minutes correctly with short format", () => {
    const oneMinuteAgo = new Date(fixedDate.getTime() - 1 * 60 * 1000);
    const thirtyMinutesAgo = new Date(fixedDate.getTime() - 30 * 60 * 1000);
    const fiftyNineMinutesAgo = new Date(fixedDate.getTime() - 59 * 60 * 1000);
    
    expect(formatHumanElapsedTime(oneMinuteAgo, true)).toBe("1 min ago");
    expect(formatHumanElapsedTime(thirtyMinutesAgo, true)).toBe("30 min ago");
    expect(formatHumanElapsedTime(fiftyNineMinutesAgo, true)).toBe("59 min ago");
  });

  it("should format hours correctly for today with short format", () => {
    const oneHourAgo = new Date(fixedDate.getTime() - 1 * 60 * 60 * 1000);
    const sixHoursAgo = new Date(fixedDate.getTime() - 6 * 60 * 60 * 1000);
    
    expect(formatHumanElapsedTime(oneHourAgo, true)).toBe("1 hr ago");
    expect(formatHumanElapsedTime(sixHoursAgo, true)).toBe("6 hrs ago");
  });

  it("should return 'yesterday' for yesterday's dates with short format", () => {
    // Create a date that is exactly yesterday (24 hours ago)
    const yesterday = new Date(fixedDate);
    yesterday.setDate(yesterday.getDate() - 1);
    
    expect(formatHumanElapsedTime(yesterday, true)).toBe("yesterday");
  });

  it("should format days correctly for dates within a week with short format", () => {
    const twoDaysAgo = new Date(fixedDate.getTime() - 2 * 24 * 60 * 60 * 1000);
    const sixDaysAgo = new Date(fixedDate.getTime() - 6 * 24 * 60 * 60 * 1000);
    
    // Ensure these aren't identified as "yesterday"
    vi.mocked(dateFns.isYesterday).mockReturnValue(false);
    
    expect(formatHumanElapsedTime(twoDaysAgo, true)).toBe("2 d ago");
    expect(formatHumanElapsedTime(sixDaysAgo, true)).toBe("6 d ago");
  });

  it("should format weeks correctly for dates within a month with short format", () => {
    const oneWeekAgo = new Date(fixedDate.getTime() - 7 * 24 * 60 * 60 * 1000);
    const threeWeeksAgo = new Date(fixedDate.getTime() - 21 * 24 * 60 * 60 * 1000);
    
    expect(formatHumanElapsedTime(oneWeekAgo, true)).toBe("1 wk ago");
    expect(formatHumanElapsedTime(threeWeeksAgo, true)).toBe("3 wks ago");
  });

  it("should format months correctly for dates within a year with short format", () => {
    const oneMonthAgo = new Date(fixedDate.getTime() - 30 * 24 * 60 * 60 * 1000);
    const sixMonthsAgo = new Date(fixedDate.getTime() - 180 * 24 * 60 * 60 * 1000);
    const elevenMonthsAgo = new Date(fixedDate.getTime() - 330 * 24 * 60 * 60 * 1000);
    
    expect(formatHumanElapsedTime(oneMonthAgo, true)).toBe("1 mo ago");
    expect(formatHumanElapsedTime(sixMonthsAgo, true)).toBe("6 mos ago");
    expect(formatHumanElapsedTime(elevenMonthsAgo, true)).toBe("11 mos ago");
  });

  it("should format years correctly for older dates with short format", () => {
    const oneYearAgo = new Date(fixedDate.getTime() - 365 * 24 * 60 * 60 * 1000);
    const fiveYearsAgo = new Date(fixedDate.getTime() - 5 * 365 * 24 * 60 * 60 * 1000);
    
    expect(formatHumanElapsedTime(oneYearAgo, true)).toBe("1 y ago");
    expect(formatHumanElapsedTime(fiveYearsAgo, true)).toBe("5 yrs ago");
  });

  it("should handle string date input correctly with short format", () => {
    const dateStr = new Date(fixedDate.getTime() - 15 * 1000).toISOString();
    expect(formatHumanElapsedTime(dateStr, true)).toBe("15 s ago");
  });
});

```

--------------------------------------------------------------------------------
/xmlui/tests/parsers/scripting/parser-function.test.ts:
--------------------------------------------------------------------------------

```typescript
import { describe, expect, assert, it } from "vitest";

import { Parser } from "../../../src/parsers/scripting/Parser";
import {
  Destructure,
  FunctionDeclaration,
  Identifier,
  SpreadExpression,
  T_BLOCK_STATEMENT,
  T_DESTRUCTURE,
  T_FUNCTION_DECLARATION,
  T_IDENTIFIER,
  T_SPREAD_EXPRESSION,
} from "../../../src/components-core/script-runner/ScriptingSourceTree";

describe("Parser - function declarations", () => {
  it("No param", () => {
    // --- Arrange
    const source = "function myFunc() { return 2*v; }";
    const wParser = new Parser(source);

    // --- Act
    const stmts = wParser.parseStatements()!;

    // --- Assert
    expect(stmts.length).toEqual(1);
    const stmt = stmts[0] as FunctionDeclaration;
    expect(stmt.type).toEqual(T_FUNCTION_DECLARATION);
    expect(stmt.id.name).toEqual("myFunc");
    expect(stmt.args.length).toEqual(0);
    expect(stmt.stmt.type).toEqual(T_BLOCK_STATEMENT);
  });

  it("Single param", () => {
    // --- Arrange
    const source = "function myFunc(v) { return 2*v; }";
    const wParser = new Parser(source);

    // --- Act
    const stmts = wParser.parseStatements()!;

    // --- Assert
    expect(stmts.length).toEqual(1);
    const stmt = stmts[0] as FunctionDeclaration;
    expect(stmt.type).toEqual(T_FUNCTION_DECLARATION);
    expect(stmt.id.name).toEqual("myFunc");
    expect(stmt.args.length).toEqual(1);
    expect(stmt.args[0].type).toEqual(T_IDENTIFIER);
    expect((stmt.args[0] as Identifier).name).toEqual("v");
    expect(stmt.stmt.type).toEqual(T_BLOCK_STATEMENT);
  });

  it("multiple params", () => {
    // --- Arrange
    const source = "function myFunc(v, w) { return 2*v; }";
    const wParser = new Parser(source);

    // --- Act
    const stmts = wParser.parseStatements()!;

    // --- Assert
    expect(stmts.length).toEqual(1);
    const stmt = stmts[0] as FunctionDeclaration;
    expect(stmt.type).toEqual(T_FUNCTION_DECLARATION);
    expect(stmt.id.name).toEqual("myFunc");
    expect(stmt.args.length).toEqual(2);
    expect(stmt.args[0].type).toEqual(T_IDENTIFIER);
    expect((stmt.args[0] as Identifier).name).toEqual("v");
    expect(stmt.args[1].type).toEqual(T_IDENTIFIER);
    expect((stmt.args[1] as Identifier).name).toEqual("w");
    expect(stmt.stmt.type).toEqual(T_BLOCK_STATEMENT);
  });

  it("Single object destructure #1", () => {
    // --- Arrange
    const source = "function myFunc({x, y}) { return 2*v; }";
    const wParser = new Parser(source);

    // --- Act
    const stmts = wParser.parseStatements()!;

    // --- Assert
    expect(stmts.length).toEqual(1);
    const stmt = stmts[0] as FunctionDeclaration;
    expect(stmt.type).toEqual(T_FUNCTION_DECLARATION);
    expect(stmt.id.name).toEqual("myFunc");
    expect(stmt.args.length).toEqual(1);
    expect(stmt.args[0].type).toEqual(T_DESTRUCTURE);
    expect((stmt.args[0] as Destructure).oDestr!.length).toEqual(2);
    expect((stmt.args[0] as Destructure).oDestr![0].id).toEqual("x");
    expect((stmt.args[0] as Destructure).oDestr![1].id).toEqual("y");
    expect(stmt.stmt.type).toEqual(T_BLOCK_STATEMENT);
  });

  it("Single object destructure #2", () => {
    // --- Arrange
    const source = "function myFunc({x, y:q}) { return 2*v; }";
    const wParser = new Parser(source);

    // --- Act
    const stmts = wParser.parseStatements()!;

    // --- Assert
    expect(stmts.length).toEqual(1);
    const stmt = stmts[0] as FunctionDeclaration;
    expect(stmt.type).toEqual(T_FUNCTION_DECLARATION);
    expect(stmt.id.name).toEqual("myFunc");
    expect(stmt.args.length).toEqual(1);
    expect(stmt.args[0].type).toEqual(T_DESTRUCTURE);
    expect((stmt.args[0] as Destructure).oDestr!.length).toEqual(2);
    expect((stmt.args[0] as Destructure).oDestr![0].id).toEqual("x");
    expect((stmt.args[0] as Destructure).oDestr![1].id).toEqual("y");
    expect((stmt.args[0] as Destructure).oDestr![1].alias).toEqual("q");
    expect(stmt.stmt.type).toEqual(T_BLOCK_STATEMENT);
  });

  it("Single object destructure #3", () => {
    // --- Arrange
    const source = "function myFunc({x, y: {v, w}}) { return 2*v; }";
    const wParser = new Parser(source);

    // --- Act
    const stmts = wParser.parseStatements()!;

    // --- Assert
    expect(stmts.length).toEqual(1);
    const stmt = stmts[0] as FunctionDeclaration;
    expect(stmt.type).toEqual(T_FUNCTION_DECLARATION);
    expect(stmt.id.name).toEqual("myFunc");
    expect(stmt.args.length).toEqual(1);
    expect(stmt.args[0].type).toEqual(T_DESTRUCTURE);
    expect((stmt.args[0] as Destructure).oDestr![0].id).toEqual("x");
    expect((stmt.args[0] as Destructure).oDestr![1].oDestr!.length).toEqual(2);
    expect((stmt.args[0] as Destructure).oDestr![1].oDestr![0].id).toEqual("v");
    expect((stmt.args[0] as Destructure).oDestr![1].oDestr![1].id).toEqual("w");
    expect(stmt.stmt.type).toEqual(T_BLOCK_STATEMENT);
  });

  it("Single array destructure #1", () => {
    // --- Arrange
    const source = "function myFunc([x, y]) { return 2*v; }";
    const wParser = new Parser(source);

    // --- Act
    const stmts = wParser.parseStatements()!;

    // --- Assert
    expect(stmts.length).toEqual(1);
    const stmt = stmts[0] as FunctionDeclaration;
    expect(stmt.type).toEqual(T_FUNCTION_DECLARATION);
    expect(stmt.id.name).toEqual("myFunc");
    expect(stmt.args.length).toEqual(1);
    expect(stmt.args[0].type).toEqual(T_DESTRUCTURE);
    expect((stmt.args[0] as Destructure).aDestr!.length).toEqual(2);
    expect((stmt.args[0] as Destructure).aDestr![0].id).toEqual("x");
    expect((stmt.args[0] as Destructure).aDestr![1].id).toEqual("y");
    expect(stmt.stmt.type).toEqual(T_BLOCK_STATEMENT);
  });

  it("Single array destructure #2", () => {
    // --- Arrange
    const source = "function myFunc([x,, y]) { return 2*v; }";
    const wParser = new Parser(source);

    // --- Act
    const stmts = wParser.parseStatements()!;

    // --- Assert
    expect(stmts.length).toEqual(1);
    const stmt = stmts[0] as FunctionDeclaration;
    expect(stmt.type).toEqual(T_FUNCTION_DECLARATION);
    expect(stmt.id.name).toEqual("myFunc");
    expect(stmt.args.length).toEqual(1);
    expect(stmt.args[0].type).toEqual(T_DESTRUCTURE);
    expect((stmt.args[0] as Destructure).aDestr!.length).toEqual(3);
    expect((stmt.args[0] as Destructure).aDestr![0].id).toEqual("x");
    expect((stmt.args[0] as Destructure).aDestr![1].id).toEqual(undefined);
    expect((stmt.args[0] as Destructure).aDestr![2].id).toEqual("y");
    expect(stmt.stmt.type).toEqual(T_BLOCK_STATEMENT);
  });

  it("Complex destructure #1", () => {
    // --- Arrange
    const source = "function myFunc([a,, b], {c, y:d}) { return 2*v; }";
    const wParser = new Parser(source);

    // --- Act
    const stmts = wParser.parseStatements()!;

    // --- Assert
    expect(stmts.length).toEqual(1);
    const stmt = stmts[0] as FunctionDeclaration;
    expect(stmt.type).toEqual(T_FUNCTION_DECLARATION);
    expect(stmt.id.name).toEqual("myFunc");
    expect(stmt.args.length).toEqual(2);
    expect(stmt.args[0].type).toEqual(T_DESTRUCTURE);
    expect((stmt.args[0] as Destructure).aDestr!.length).toEqual(3);
    expect((stmt.args[0] as Destructure).aDestr![0].id).toEqual("a");
    expect((stmt.args[0] as Destructure).aDestr![1].id).toEqual(undefined);
    expect((stmt.args[0] as Destructure).aDestr![2].id).toEqual("b");
    expect(stmt.args[1].type).toEqual(T_DESTRUCTURE);
    expect((stmt.args[1] as Destructure).oDestr!.length).toEqual(2);
    expect((stmt.args[1] as Destructure).oDestr![0].id).toEqual("c");
    expect((stmt.args[1] as Destructure).oDestr![1].id).toEqual("y");
    expect((stmt.args[1] as Destructure).oDestr![1].alias).toEqual("d");
    expect(stmt.stmt.type).toEqual(T_BLOCK_STATEMENT);
  });

  it("Complex destructure #2", () => {
    // --- Arrange
    const source = "function myFunc([a,, b], {c, y:d}, e) { return 2*v; }";
    const wParser = new Parser(source);

    // --- Act
    const stmts = wParser.parseStatements()!;

    // --- Assert
    expect(stmts.length).toEqual(1);
    const stmt = stmts[0] as FunctionDeclaration;
    expect(stmt.type).toEqual(T_FUNCTION_DECLARATION);
    expect(stmt.id.name).toEqual("myFunc");
    expect(stmt.args.length).toEqual(3);
    expect(stmt.args[0].type).toEqual(T_DESTRUCTURE);
    expect((stmt.args[0] as Destructure).aDestr!.length).toEqual(3);
    expect((stmt.args[0] as Destructure).aDestr![0].id).toEqual("a");
    expect((stmt.args[0] as Destructure).aDestr![1].id).toEqual(undefined);
    expect((stmt.args[0] as Destructure).aDestr![2].id).toEqual("b");
    expect(stmt.args[1].type).toEqual(T_DESTRUCTURE);
    expect((stmt.args[1] as Destructure).oDestr!.length).toEqual(2);
    expect((stmt.args[1] as Destructure).oDestr![0].id).toEqual("c");
    expect((stmt.args[1] as Destructure).oDestr![1].id).toEqual("y");
    expect((stmt.args[1] as Destructure).oDestr![1].alias).toEqual("d");
    expect(stmt.args[2].type).toEqual(T_IDENTIFIER);
    expect((stmt.args[2] as Identifier).name).toEqual("e");
    expect(stmt.stmt.type).toEqual(T_BLOCK_STATEMENT);
  });

  it("Single rest param", () => {
    // --- Arrange
    const source = "function myFunc(...v) { return 2*v; }";
    const wParser = new Parser(source);

    // --- Act
    const stmts = wParser.parseStatements()!;

    // --- Assert
    expect(stmts.length).toEqual(1);
    const stmt = stmts[0] as FunctionDeclaration;
    expect(stmt.type).toEqual(T_FUNCTION_DECLARATION);
    expect(stmt.id.name).toEqual("myFunc");
    expect(stmt.args.length).toEqual(1);
    expect(stmt.args[0].type).toEqual(T_SPREAD_EXPRESSION);
    const spread = stmt.args[0] as SpreadExpression;
    expect((spread.expr as Identifier).name).toEqual("v");
    expect(stmt.stmt.type).toEqual(T_BLOCK_STATEMENT);
  });

  it("Multiple params with rest", () => {
    // --- Arrange
    const source = "function myFunc(v, ...w) { return 2*v; }";
    const wParser = new Parser(source);

    // --- Act
    const stmts = wParser.parseStatements()!;

    // --- Assert
    expect(stmts.length).toEqual(1);
    const stmt = stmts[0] as FunctionDeclaration;
    expect(stmt.type).toEqual(T_FUNCTION_DECLARATION);
    expect(stmt.id.name).toEqual("myFunc");
    expect(stmt.args.length).toEqual(2);
    expect(stmt.args[0].type).toEqual(T_IDENTIFIER);
    expect((stmt.args[0] as Identifier).name).toEqual("v");
    expect(stmt.args[1].type).toEqual(T_SPREAD_EXPRESSION);
    const spread = stmt.args[1] as SpreadExpression;
    expect((spread.expr as Identifier).name).toEqual("w");
    expect(stmt.stmt.type).toEqual(T_BLOCK_STATEMENT);
  });

  it("Fails with rest params #1", () => {
    // --- Arrange
    const source = "function myFunc(...a, b) { return 2*v; }";
    const wParser = new Parser(source);

    // --- Act
    try {
      wParser.parseStatements()!;
    } catch (err) {
      // --- Assert
      expect(err.toString().includes("argument")).toBe(true);
      return;
    }
    assert.fail("Exception expected");
  });

  it("Fails with rest params #2", () => {
    // --- Arrange
    const source = "function myFunc(...(a+b)) { return 2*v; }";
    const wParser = new Parser(source);

    // --- Act
    try {
      wParser.parseStatements()!;
    } catch (err) {
      // --- Assert
      expect(err.toString().includes("argument")).toBe(true);
      return;
    }
    assert.fail("Exception expected");
  });
});

```

--------------------------------------------------------------------------------
/xmlui/src/components/Queue/Queue.md:
--------------------------------------------------------------------------------

```markdown
%-DESC-START
## Using Queue

As its name suggests, the `Queue` component keeps a queue of items to process. You can add items to the queue with the `enqueueItem` (or `enqueueItems`) method. Once the queue has some items to process, the engine reads them one by one (in FIFO order) and processes an item with the `process` event handler.
Though `Queue` is a non-visual component, it can render UI for reporting progress through its `progressFeedback` property. Also, when the queue gets empty, the UI can render a result summary through the `resultFeedback` property.

The following sample demonstrates these concepts. When the user clicks the button, a new random number is queued. The sample imitates a long calculation by waiting one second within the `process` event handler and reports the progress.

A `ChangeListener` instance observes queue length changes and stores the actual length to display that in the UI.

```xmlui-pg copy {9-24} display name="Example: using Queue"
<App
  var.queued="{0}"
  var.queueLength="{0}"
  var.processed="{0}"
  var.result="{0}">
  <Button
    label="Add a new item to the queue"
    onClick="{myQueue.enqueueItem(Math.random()); queued++; }" />
  <Queue id="myQueue"
    onProcess="processing =>
      {
          result += processing.item;
          delay(1000);
          processed++;
          processing.onProgress(processed)
      }
    ">
    <property name="progressFeedback">
      <Text value="{processed} / {queued}" />
    </property>
    <property name="resultFeedback">
      <Text value="{result.toFixed(4)}" />
    </property>
  </Queue>
  <ChangeListener
    listenTo="{myQueue.getQueueLength()}"
    onDidChange="l => queueLength = l.newValue;"/>
  <Text>Items queued: {queued}</Text>
  <Text>Current queue length: {queueLength}</Text>
  <Text>Current result: {result.toFixed(4)}</Text>
</App>
```

Try the app by clicking the button several times. Check how the queue processes the items and displays feedback.

%-DESC-END

%-API-START enqueueItem

The following example stores and displays this item when a new item is put into the queue:

```xmlui-pg copy {5} display name="Example: enqueueItem"
<App var.queued="{0}" var.itemIds="">
  <Button
    label="Add a new item to the queue"
    onClick="{
      const itemId = myQueue.enqueueItem(Math.random()); 
      itemIds += itemId + ', '; queued++;
    }" />
  <Queue id="myQueue" onProcess="processing => {}" />
  <Text>Items queued: {queued}</Text>
  <Text>Item IDs: {itemIds}</Text>
</App>
```

%-API-END

%-API-START getQueuedItems

This method returns the items currently in the queue with their entire context. The result of this method is a list of objects with these properties:

- `item`: The queued item (as passed to the `enqueueItem` and `enqueueItems` methods)
- `actionItemId`: The unique (internal) ID of the item being processed, as generated by the `Queue` component.
- `status`: The current processing status of the item; one of the following values: `"pending"`, `"started"`, `"in-progress"`, `"completed"`, or `"error"`
- `progress`: The latest progress value reported for the item (may be undefined)
- `result`: The optional value the `process` event handler returns.

> **Note**: When all items are processed, the queue removes the items and fires the `complete` event. When the event handler runs, the queue is empty, and `getQueuedItems` returns an empty list.

%-API-END

%-API-START remove

The following example emulates a file-processing application. When a file is about to save (in the `process` event), the processing fails with files that deny overwrite. In such a case, the `processError` event handler asks the user to confirm the overwrite action. In case of confirmation, the queue uses the `remove` action to discard the faulty queue item and enqueues the file again with the `accept` behavior so that it won't fail next time.

```xmlui-pg copy {21} display name="Example: remove" height="240px"
<App var.queued="{0}" var.processed="" var.skipped="{0}">
  <Button
    label="Add a new file to the queue"
    onClick="{myQueue.enqueueItem({file: ++queued, conflict: 'deny'})}" />
  <Queue id="myQueue"
    onProcess="processing =>
      {
          delay(1000);
          if (processing.item.conflict === 'deny') {
            throw 'Conflict';
          }
          processed += processing.item.file + ', ';
      }
    "
    onProcessError="(error, processing) => {
      if (error.message === 'Conflict') {
        console.log(error);
        const result = confirm('Do you want to overwrite?', 
          'File ' + processing.item.file + ' already exists', 
          'Overwrite');
        $this.remove(processing.actionItemId);
        if (result) {
          $this.enqueueItems([{...processing.item, conflict: 'accept'}]);
        }
        return false;
      }
    }">
    <property name="resultFeedback">
      <Text value="All items processed" />
    </property>
  </Queue>
  <Text>Items queued: {queued}</Text>
  <Text>Processed: {processed}</Text>
</App>
```

%-API-END

%-EVENT-START complete

The following sample displays a tick mark every time the queue is emptied:

```xmlui-pg copy {13} display name="Example: complete"
<App
  var.queued="{0}"
  var.queueEmptied=""
  var.result="{0}">
  <Button
    label="Add a new item to the queue"
    onClick="{myQueue.enqueueItem(Math.random()); queued++; }" />
  <Queue id="myQueue"
    onProcess="processing => {
      result += processing.item;
      delay(1000);
    }"
    onComplete="queueEmptied += ' ok!'" >
    <property name="progressFeedback">
      <Text value="Completed: {$completedItems.length} of {$queuedItems.length}"/>
    </property>
    <property name="resultFeedback">
      <Text value="{result.toFixed(4)}" />
    </property>
  </Queue>
  <Text>Items queued: {queued}</Text>
  <Text>Current result: {result.toFixed(4)}</Text>
  <Text>Queue emptied: {queueEmptied}</Text>
</App>
```

%-EVENT-END

%-EVENT-START didProcess

The parameter of the event handler is an object with these properties:
- `item`: the item to process
- `actionItemId`: The unique (internal) ID of the item being processed, as generated by the `Queue` component. You can pass this ID to some API methods (for example, to `remove`).
- `processItemContext`: A context object (initially empty) that you can use to add some context-specific information to the item. The event handlers of other events will see this information as the item being processed conveys it.

The following sample uses the `didProcess` event handler to add a tick symbol to the progress whenever an item has been processed:

```xmlui-pg copy {13} display name="Example: didProcess"
<App
  var.queued="{0}"
  var.progressLine=""
  var.result="{0}">
  <Button
    label="Add a new item to the queue"
    onClick="{myQueue.enqueueItem(Math.random()); queued++; }" />
  <Queue id="myQueue"
    onProcess="processing => {
      result += processing.item;
      delay(1000);
    }"
    onDidProcess="progressLine += ' ok!'" >
    <property name="resultFeedback">
      <Text value="{result.toFixed(4)}" />
    </property>
  </Queue>
  <Text>Items queued: {queued}</Text>
  <Text>Current result: {result.toFixed(4)}</Text>
  <Text>Progress: {progressLine}</Text>
</App>
```

%-EVENT-END

%-EVENT-START process

The parameter of the event handler is an object with these properties:
- `item`: the item to process
- `actionItemId`: The unique (internal) ID of the item being processed, as generated by the `Queue` component. You can pass this ID to some API methods (for example, to `remove`).
- `processItemContext`: A context object (initially empty) that you can use to add some context-specific information to the item. The event handlers of other events will see this information as the item being processed conveys it.
- `reportProgress`: A function you can use to report the progress. Invoke this method with an argument that the `progressFeedback` component's template will utilize.

See the example in the [Using Queue](#using-queue) section.

%-EVENT-END

%-EVENT-START processError

- `item`: the item to process
- `actionItemId`: The unique (internal) ID of the item being processed, as generated by the `Queue` component. You can pass this ID to some API methods (for example, to `remove`).
- `processItemContext`: A context object (initially empty) that you can use to add some context-specific information to the item. The event handlers of other events will see this information as the item being processed conveys it.

If the event handler returns false, the queue does not sign the error in the UI. With other return values (including no return value), the queue displays the error.

The following sample generates an error for every fourth item, and gives an error feedback with the `processError` event handler:

```xmlui-pg
---app copy {10-12, 17} display name="Example: processError"
<App
  var.queued="{0}"
  var.progressLine=""
  var.result="{0}">
  <Button
    label="Add a new item to the queue"
    onClick="{myQueue.enqueueItem(Math.random()); queued++; }" />
  <Queue id="myQueue"
    onProcess="processing => {
      if (progressLine.length % 4 === 3) {
        throw 'Item cannot be processed';
      }
      result += processing.item;
      delay(1000);
    }"
    onDidProcess="progressLine += ' ok!'"
    onProcessError="progressLine += ' canceled'" >
    <property name="resultFeedback">
      <Text value="{result.toFixed(4)}" />
    </property>
  </Queue>
  <Text>Items queued: {queued}</Text>
  <Text>Current result: {result.toFixed(4)}</Text>
  <Text>Progress: {progressLine}</Text>
</App>
---desc
Click the button several times to see how processing errors are handled in the UI.
```

%-EVENT-END

%-EVENT-START willProcess

This event is fired before the next item in the queue gets processed. If the event handler returns `false`, the queue skips processing that item. With other return values (including no return value), the queue continues processing the item.

The parameter of the event handler is an object with these properties:
- `item`: the item to process
- `actionItemId`: The unique (internal) ID of the item being processed, as generated by the `Queue` component. You can pass this ID to some API methods (for example, to `remove`).
- `processItemContext`: A context object (initially empty) that you can use to add some context-specific information to the item. The event handlers of other events will see this information as the item being processed conveys it.

The following sample declares a `willProcess` event handler that will skip processing (summing) items less than 0.5; the handler counts the number of skipped items.

```xmlui-pg
---app copy {9} display name="Example: willProcess"
<App
  var.queued="{0}"
  var.skipped="{0}"
  var.result="{0}">
  <Button
    label="Add a new item to the queue"
    onClick="{myQueue.enqueueItem(Math.random()); queued++; }" />
  <Queue id="myQueue"
    onWillProcess="toProcess => toProcess.item < 0.5 ? (skipped++, false) : true"
    onProcess="processing => {
      result += processing.item;
      delay(1000);
    }">
    <property name="resultFeedback">
      <Text value="{result.toFixed(4)}" />
    </property>
  </Queue>
  <Text>Items queued: {queued}</Text>
  <Text>Items skipped: {skipped}</Text>
  <Text>Current result: {result.toFixed(4)}</Text>
</App>
---desc
Click the button several times and see how the number of skipped items increments.
```

%-EVENT-END

```

--------------------------------------------------------------------------------
/docs/content/components/Heading.md:
--------------------------------------------------------------------------------

```markdown
# Heading [#heading]

`Heading` displays hierarchical text headings with semantic importance levels from H1 to H6, following HTML heading standards. It provides text overflow handling, anchor link generation, and integrates with [TableOfContents](/components/TableOfContents).

**Key features:**
- **Semantic levels**: Choose from h1 through h6 for proper document structure and accessibility
- **Text overflow control**: Automatic ellipses and line limiting for long headings
- **Anchor generation**: Optional hover anchors for deep linking to specific sections

For the shorthand versions see: [H1](./H1), [H2](./H2), [H3](./H3), [H4](./H4), [H5](./H5), [H6](./H6).

```xmlui-pg copy display name="Example: Headings with levels"
<App>
  <Heading level="h1" value="Heading Level 1" />
  <Text>Text following H1</Text>
  <Heading level="h2" value="Heading Level 2" />
  <Text>Text following H2</Text>
  <Heading level="h3" value="Heading Level 3" />
  <Text>Text following H3</Text>
  <Heading level="h4" value="Heading Level 4" />
  <Text>Text following H4</Text>
  <Heading level="h5" value="Heading Level 5" />
  <Text>Text following H5</Text>
  <Heading level="h6" value="Heading Level 6" />
  <Text>Text following H6</Text>
</App>
```

## Properties [#properties]

### `ellipses` (default: true) [#ellipses-default-true]

This property indicates whether ellipses should be displayed (`true`) when the heading text is cropped or not (`false`).

```xmlui-pg copy {4} display name="Example: ellipses"
<App>
  <VStack width="200px">
    <H3
      backgroundColor="cyan"
      maxLines="1"
      ellipses="false">
      Though this long text does is about to crop!
    </H3>
    <H3
      backgroundColor="cyan"
      maxLines="1">
      Though this long text does is about to crop!
    </H3>
  </VStack>
</App>
```

### `level` (default: "h1") [#level-default-h1]

This property sets the visual significance (level) of the heading. Accepts multiple formats: `h1`-`h6`, `H1`-`H6`, or `1`-`6`.Invalid values default to `h1`.

Available values: `h1` **(default)**, `h2`, `h3`, `h4`, `h5`, `h6`, `H1`, `H2`, `H3`, `H4`, `H5`, `H6`, `1`, `2`, `3`, `4`, `5`, `6`

| Value | Description                                           |
| :---- | :---------------------------------------------------- |
| `h1`  | **(default)** Equivalent to the `<h1 />` HTML element |
| `h2`  | Equivalent to the `<h2 />` HTML element               |
| `h3`  | Equivalent to the `<h3 />` HTML element               |
| `h4`  | Equivalent to the `<h4 />` HTML element               |
| `h5`  | Equivalent to the `<h5 />` HTML element               |
| `h6`  | Equivalent to the `<h6 />` HTML element               |

For a visual example, see the component description.

### `maxLines` [#maxlines]

This optional property determines the maximum number of lines the component can wrap to. If there is not enough space for all of the text, the component wraps the text up to as many lines as specified. If the value is not specified, there is no limit on the number of displayed lines.

```xmlui-pg copy display name="Example: maxLines"
<App>
  <H2
    maxWidth="160px"
    backgroundColor="cyan"
    value="A long heading text that will likely overflow" maxLines="2" />
</App>
```

### `omitFromToc` (default: false) [#omitfromtoc-default-false]

If true, this heading will be excluded from the table of contents.

### `preserveLinebreaks` (default: false) [#preservelinebreaks-default-false]

This property indicates whether linebreaks should be preserved when displaying text.

```xmlui-pg copy display name="Example: preserveLinebreaks"
---app copy display {5}
<App>
  <HStack>
    <H3
      width="200px"
      backgroundColor="cyan"
      preserveLinebreaks="true"
      value="(preserve) This long text
  with several line breaks
          does not fit into a viewport with a 200-pixel width." />
    <H3
      width="200px"
      backgroundColor="cyan"
      value="(do not preserve) This long text
  with several line breaks
          does not fit into a viewport with a 200-pixel width." />
  </HStack>
</App>
---desc
You can observe the effect of using `preserveLinebreaks`:
```

>[!INFO]
> Remember to use the `value` property of `Heading`.
> Linebreaks are converted to spaces when nesting the text in the `Heading` component.

### `showAnchor` (default: false) [#showanchor-default-false]

This property indicates whether an anchor link should be displayed next to the heading. If set to `true`, an anchor link will be displayed on hover next to the heading.

If this property is not set, the engine checks if `showHeadingAnchors` flag is turned on in the global configuration (in the `appGlobals` configuration object) and displays the heading anchor accordingly.

### `value` [#value]

This property determines the text displayed in the heading. `Heading` also accepts nested text instead of specifying the `value`. If both `value` and a nested text are used, the `value` will be displayed.

```xmlui-pg copy display name="Example: value"
<App>
  <Heading value="This is level 3 (value)" level="h3" />
  <Heading level="h3">This is level 3 (child)</Heading>
  <Heading value="Value" level="h3"><Icon name="trash" /></Heading>
</App>
```

## Events [#events]

This component does not have any events.

## Exposed Methods [#exposed-methods]

### `hasOverflow` [#hasoverflow]

Returns true when the displayed text overflows the bounds of this heading component.

**Signature**: `hasOverflow()`

### `scrollIntoView` [#scrollintoview]

Scrolls the heading into view.

**Signature**: `scrollIntoView()`

## Styling [#styling]

### Theme Variables [#theme-variables]

| Variable | Default Value (Light) | Default Value (Dark) |
| --- | --- | --- |
| [color](../styles-and-themes/common-units/#color)-anchor-Heading | *none* | *none* |
| [color](../styles-and-themes/common-units/#color)-anchor-Heading  | $color-surface-400 | $color-surface-400 |
| [fontFamily](../styles-and-themes/common-units/#fontFamily)-H1 | *none* | *none* |
| [fontFamily](../styles-and-themes/common-units/#fontFamily)-H2 | *none* | *none* |
| [fontFamily](../styles-and-themes/common-units/#fontFamily)-H3 | *none* | *none* |
| [fontFamily](../styles-and-themes/common-units/#fontFamily)-H4 | *none* | *none* |
| [fontFamily](../styles-and-themes/common-units/#fontFamily)-H5 | *none* | *none* |
| [fontFamily](../styles-and-themes/common-units/#fontFamily)-H6 | *none* | *none* |
| [fontFamily](../styles-and-themes/common-units/#fontFamily)-Heading | $fontFamily | $fontFamily |
| [fontWeight](../styles-and-themes/common-units/#fontWeight)-H1 | *none* | *none* |
| [fontWeight](../styles-and-themes/common-units/#fontWeight)-H2 | *none* | *none* |
| [fontWeight](../styles-and-themes/common-units/#fontWeight)-H3 | *none* | *none* |
| [fontWeight](../styles-and-themes/common-units/#fontWeight)-H4 | *none* | *none* |
| [fontWeight](../styles-and-themes/common-units/#fontWeight)-H5 | *none* | *none* |
| [fontWeight](../styles-and-themes/common-units/#fontWeight)-H6 | *none* | *none* |
| [fontWeight](../styles-and-themes/common-units/#fontWeight)-Heading | $fontWeight-bold | $fontWeight-bold |
| [gap](../styles-and-themes/common-units/#size)-anchor-Heading | *none* | *none* |
| [gap](../styles-and-themes/common-units/#size)-anchor-Heading  | $space-2 | $space-2 |
| [letterSpacing](../styles-and-themes/common-units/#size)-H1 | *none* | *none* |
| [letterSpacing](../styles-and-themes/common-units/#size)-H2 | *none* | *none* |
| [letterSpacing](../styles-and-themes/common-units/#size)-H3 | *none* | *none* |
| [letterSpacing](../styles-and-themes/common-units/#size)-H4 | *none* | *none* |
| [letterSpacing](../styles-and-themes/common-units/#size)-H5 | *none* | *none* |
| [letterSpacing](../styles-and-themes/common-units/#size)-H6 | *none* | *none* |
| [letterSpacing](../styles-and-themes/common-units/#size)-Heading  | 0 | 0 |
| [textColor](../styles-and-themes/common-units/#color)-H1 | *none* | *none* |
| [textColor](../styles-and-themes/common-units/#color)-H2 | *none* | *none* |
| [textColor](../styles-and-themes/common-units/#color)-H3 | *none* | *none* |
| [textColor](../styles-and-themes/common-units/#color)-H4 | *none* | *none* |
| [textColor](../styles-and-themes/common-units/#color)-H5 | *none* | *none* |
| [textColor](../styles-and-themes/common-units/#color)-H6 | *none* | *none* |
| [textColor](../styles-and-themes/common-units/#color)-Heading | inherit | inherit |
| [textDecorationColor](../styles-and-themes/common-units/#color)-H1 | *none* | *none* |
| [textDecorationColor](../styles-and-themes/common-units/#color)-H2 | *none* | *none* |
| [textDecorationColor](../styles-and-themes/common-units/#color)-H3 | *none* | *none* |
| [textDecorationColor](../styles-and-themes/common-units/#color)-H4 | *none* | *none* |
| [textDecorationColor](../styles-and-themes/common-units/#color)-H5 | *none* | *none* |
| [textDecorationColor](../styles-and-themes/common-units/#color)-H6 | *none* | *none* |
| [textDecorationLine](../styles-and-themes/common-units/#textDecoration)-anchor-Heading | *none* | *none* |
| [textDecorationLine](../styles-and-themes/common-units/#textDecoration)-anchor-Heading  | underline | underline |
| [textDecorationLine](../styles-and-themes/common-units/#textDecoration)-H1 | *none* | *none* |
| [textDecorationLine](../styles-and-themes/common-units/#textDecoration)-H2 | *none* | *none* |
| [textDecorationLine](../styles-and-themes/common-units/#textDecoration)-H3 | *none* | *none* |
| [textDecorationLine](../styles-and-themes/common-units/#textDecoration)-H4 | *none* | *none* |
| [textDecorationLine](../styles-and-themes/common-units/#textDecoration)-H5 | *none* | *none* |
| [textDecorationLine](../styles-and-themes/common-units/#textDecoration)-H6 | *none* | *none* |
| [textDecorationStyle](../styles-and-themes/common-units/#textDecoration)-H1 | *none* | *none* |
| [textDecorationStyle](../styles-and-themes/common-units/#textDecoration)-H2 | *none* | *none* |
| [textDecorationStyle](../styles-and-themes/common-units/#textDecoration)-H3 | *none* | *none* |
| [textDecorationStyle](../styles-and-themes/common-units/#textDecoration)-H4 | *none* | *none* |
| [textDecorationStyle](../styles-and-themes/common-units/#textDecoration)-H5 | *none* | *none* |
| [textDecorationStyle](../styles-and-themes/common-units/#textDecoration)-H6 | *none* | *none* |
| [textDecorationThickness](../styles-and-themes/common-units/#textDecoration)-H1 | *none* | *none* |
| [textDecorationThickness](../styles-and-themes/common-units/#textDecoration)-H2 | *none* | *none* |
| [textDecorationThickness](../styles-and-themes/common-units/#textDecoration)-H3 | *none* | *none* |
| [textDecorationThickness](../styles-and-themes/common-units/#textDecoration)-H4 | *none* | *none* |
| [textDecorationThickness](../styles-and-themes/common-units/#textDecoration)-H5 | *none* | *none* |
| [textDecorationThickness](../styles-and-themes/common-units/#textDecoration)-H6 | *none* | *none* |
| [textUnderlineOffset](../styles-and-themes/common-units/#size)-H1 | *none* | *none* |
| [textUnderlineOffset](../styles-and-themes/common-units/#size)-H2 | *none* | *none* |
| [textUnderlineOffset](../styles-and-themes/common-units/#size)-H3 | *none* | *none* |
| [textUnderlineOffset](../styles-and-themes/common-units/#size)-H4 | *none* | *none* |
| [textUnderlineOffset](../styles-and-themes/common-units/#size)-H5 | *none* | *none* |
| [textUnderlineOffset](../styles-and-themes/common-units/#size)-H6 | *none* | *none* |

```

