This is page 8 of 143. Use http://codebase.md/xmlui-org/xmlui/assets/img/main.tsx?format=md&lines=false&page={x} to view the full context.

# Directory Structure

```
├── .changeset
│   └── config.json
├── .eslintrc.cjs
├── .github
│   ├── build-checklist.png
│   ├── ISSUE_TEMPLATE
│   │   ├── bug_report.md
│   │   └── feature_request.md
│   └── workflows
│       ├── deploy-blog-optimized.yml
│       ├── deploy-blog-swa.yml
│       ├── deploy-blog.yml
│       ├── deploy-docs-optimized.yml
│       ├── deploy-docs.yml
│       ├── prepare-versions.yml
│       ├── release-packages.yml
│       ├── run-all-tests.yml
│       └── run-smoke-tests.yml
├── .gitignore
├── .prettierrc.js
├── .vscode
│   ├── launch.json
│   └── settings.json
├── blog
│   ├── .gitignore
│   ├── .gitkeep
│   ├── CHANGELOG.md
│   ├── extensions.ts
│   ├── index.html
│   ├── index.ts
│   ├── 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
│   │           ├── FancyButton.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.tsx
│   │       │   ├── ConfirmationDialog.module.scss
│   │       │   ├── ConfirmationDialog.tsx
│   │       │   ├── Editor.tsx
│   │       │   ├── Header.module.scss
│   │       │   ├── Header.tsx
│   │       │   ├── Playground.tsx
│   │       │   ├── PlaygroundContent.module.scss
│   │       │   ├── PlaygroundContent.tsx
│   │       │   ├── PlaygroundNative.module.scss
│   │       │   ├── PlaygroundNative.tsx
│   │       │   ├── Preview.module.scss
│   │       │   ├── Preview.tsx
│   │       │   ├── Select.module.scss
│   │       │   ├── StandalonePlayground.tsx
│   │       │   ├── StandalonePlaygroundNative.module.scss
│   │       │   ├── StandalonePlaygroundNative.tsx
│   │       │   ├── ThemeSwitcher.module.scss
│   │       │   ├── ThemeSwitcher.tsx
│   │       │   ├── ToneSwitcher.tsx
│   │       │   ├── Tooltip.module.scss
│   │       │   ├── Tooltip.tsx
│   │       │   └── utils.ts
│   │       ├── providers
│   │       │   ├── Toast.module.scss
│   │       │   └── ToastProvider.tsx
│   │       ├── state
│   │       │   └── store.ts
│   │       ├── themes
│   │       │   └── theme.ts
│   │       └── utils
│   │           └── helpers.ts
│   ├── 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
    │   │   ├── 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.bin.json
    ├── tsconfig.json
    ├── tsconfig.node.json
    ├── vite.config.ts
    └── vitest.config.ts
```

# Files

--------------------------------------------------------------------------------
/xmlui/src/components-core/utils/request-params.ts:
--------------------------------------------------------------------------------

```typescript
// Testable helper function to convert request parameters
export function convertRequestParamPart(
  part: Record<string, any>,
  paramTypes?: Record<string, string>
): Record<string, any> {
  if (!paramTypes) return part;

  const result = { ...part };
  Object.keys(part).forEach((key) => {
    if (!(key in paramTypes)) return;

    const partValue = part[key];
    const partValueType = typeof partValue;
    switch (paramTypes[key]) {
      // --- Parameter to integer
      case "integer":
        switch (partValueType) {
          case "number":
            result[key] = Math.round(partValue);
            break;
          case "string":
            result[key] = parseInt(partValue, 10);
            break;
          case "boolean":
            result[key] = partValue ? 1 : 0;
            break;
        }
        break;

      // --- Parameter to float
      case "float":
      case "real":
      case "double":
        switch (partValueType) {
          case "number":
            result[key] = partValue;
            break;
          case "string":
            result[key] = parseFloat(partValue);
            break;
          case "boolean":
            result[key] = partValue ? 1 : 0;
            break;
        }
        break;

      // --- Parameter to boolean
      case "boolean":
        switch (partValueType) {
          case "string":
            switch (partValue.toLowerCase()) {
              case "true":
              case "yes":
              case "on":
                result[key] = true;
                break;
              case "false":
              case "no":
              case "off":
                result[key] = false;
                break;
            }
            break;
          case "number":
            result[key] = !!partValue;
            break;
        }
        break;
    }
  });
  return result;
}

```

--------------------------------------------------------------------------------
/docs/public/pages/universal-properties.md:
--------------------------------------------------------------------------------

```markdown
# Universal Properties

These properties can be used with any XMLUI component.

## id

The `id` property assigns a unique identifier to a component.

```xmlui
<Button id="submit-button" onClick="{handleSubmit}">Submit</Button>
```

```xmlui
<TextBox id="email-input" placeholder="Enter your email" />
```


```xmlui /detailsDialog/
<!-- Modal with ID used by table action -->
<Table data="/api/clients">
  <Column bindTo="name" />
  <Column header="Details">
    <Icon name="doc-outline" onClick="detailsDialog.open($item)" />
  </Column>
</Table>

<ModalDialog id="detailsDialog" maxWidth="800px">
  <ClientDetails client="{$param}" />
</ModalDialog>
```

```xmlui
<!-- Dynamic IDs with data -->
<Items data="{posts}">
  <DataSource id="replyAccount-{$item.id}" url="/api/accounts/{$item.author_id}">
    <Text>Post by {$item.title}</Text>
  </DataSource>
</Items>
```

## when

Set `when` to `false` to prevent rendering of a component.

```xmlui
<Text when="{user.isLoggedIn}">Welcome back!</Text>
```

```xmlui
<Spinner when="{isLoading}">Loading...</Spinner>
```

## data

The `data` property makes external data available to a component. It's typically used with [List](/components/List), [Items](/components/Items), and [Table](/components/Table), but any component can receive data this way.

When the property is a reference to a `DataSource`, its value is the data returned from that `DataSource`.

```xmlui
<List data="{users}">
  <Text>{$item.name}</Text>
</List>
```

```xmlui
<Items data="{products}">
  <Card>
    <Text>{$item.title}</Text>
    <Text>{$item.price}</Text>
  </Card>
</Items>
```

When the property is a string, the value is interpreted as an URL that returns JSON.

```xmlui
<List data="https://api.tfl.gov.uk/line/mode/tube/status">
   <Text>{$item.name}: {$item.lineStatuses[0].statusSeverityDescription}</Text>
</List>
```


```

--------------------------------------------------------------------------------
/xmlui/src/components/CodeBlock/CodeBlock.tsx:
--------------------------------------------------------------------------------

```typescript
import styles from "./CodeBlock.module.scss";

import { createComponentRenderer } from "../../components-core/renderers";
import { parseScssVar } from "../../components-core/theming/themeVars";
import { CodeBlock } from "./CodeBlockNative";
import { createMetadata } from "../metadata-helpers";

const COMP = "CodeBlock";

export const CodeBlockMd = createMetadata({
  status: "stable",
  description: `The \`${COMP}\` component displays code with optional syntax highlighting and meta information.`,
  props: {},
  themeVars: parseScssVar(styles.themeVars),
  defaultThemeVars: {
    "backgroundColor-CodeBlock": "$color-primary-50",
    "backgroundColor-CodeBlock-header": "$color-primary-100",
    "marginTop-CodeBlock": "$space-5",
    "marginBottom-CodeBlock": "$space-5",
    "backgroundColor-CodeBlock-highlightRow": "rgb(from $color-primary-200 r g b / 0.25)",
    "backgroundColor-CodeBlock-highlightString": "rgb(from $color-primary-200 r g b / 0.5)",

    "borderColor-CodeBlock-highlightString-emphasis": "$color-attention",
    "border-CodeBlock": "0.5px solid $borderColor",
    "borderRadius-CodeBlock": "$space-2",
    "height-CodeBlock": "fit-content",
    "paddingVertical-content-CodeBlock": "0",
    "paddingHorizontal-content-CodeBlock": "0",

    dark: {
      "backgroundColor-CodeBlock-header": "$color-surface-200",
      "backgroundColor-CodeBlock": "$color-surface-50",
      "backgroundColor-CodeBlock-highlightRow": "rgb(from $color-primary-300 r g b / 0.15)",
      "backgroundColor-CodeBlock-highlightString": "rgb(from $color-primary-300 r g b / 0.5)",
    }
  },
});

export const codeBlockComponentRenderer = createComponentRenderer(
  "CodeBlock",
  CodeBlockMd,
  ({ node, renderChild, className }) => {
    return (
      <CodeBlock className={className}>
        {renderChild(node.children)}
      </CodeBlock>
    );
  },
);

```

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

```markdown
%-DESC-START

## Standalone

If the `itemCount` property is provided, the component shows information about the number of entries shown per page, the total number of entries, as well as the current page index:

```xmlui-pg copy display
<App>
  <Pagination itemCount="100" pageSize="10" />
</App>
```

If not, the [`hasPrevPage`](#hasprevpage) and [`hasNextPage`](#hasnextpage) properties can be used to control the enabled/disabled state of the previous and next buttons, while only the previous and next buttons are displayed:

```xmlui-pg copy display
<App>
  <Pagination hasPrevPage="true" hasNextPage="true" />
</App>
```

## Integrations

### Table

`Pagination` has first-class support in the Table component. `Pagination` is controlled via the [`isPaginated`](./Table#ispaginated-default-false), [`pageSize`](./Table#pagesize), [`pageSizeOptions`](./Table#pagesizeoptions) and [`paginationControlsLocation`](./Table#paginationcontrolslocation-default-bottom) properties.

```xmlui
<Table data="/api" isPaginated pageSize="5" pageSizeOptions="{[5, 10, 20]}">
  <Column header="ID" bindTo="elem" width="80px">
    <!-- ... -->
  </Column>
  <!-- ... -->
</Table>
```

See the [Table reference](./Table#ispaginated-default-false) for a working example.

### List

The `List` is a perfect example of a component that does not implement its own pagination. Thus, use the Pagination with a Datasource component and connect them to the List:

```xmlui
<DataSource id="ds" url="/api" queryParams="{{ from: before, to: after }}" />
<Pagination
  itemCount="20"
  pageSize="{pageSize}"
  pageIndex="{currentPage}"
  onPageDidChange="(page, size, total) => {
    currentPage = page;
    before = page * size;
    after = before + size - 1;
  }"
/>
<List data="{ds}" />
```

For a comprehensive example, see [How to paginate a List](../howto/paginate-a-list).

%-DESC-END

```

--------------------------------------------------------------------------------
/xmlui/tests/components-core/abstractions/treeAbstractions.test.ts:
--------------------------------------------------------------------------------

```typescript
import { describe, expect, it } from "vitest";
import { NodeLoadingState, FlatTreeNodeWithState, FlatTreeNode } from '../../../src/components-core/abstractions/treeAbstractions';

describe('Tree Abstractions - Loading States', () => {
  it('NodeLoadingState type should have correct values', () => {
    const unloaded: NodeLoadingState = 'unloaded';
    const loading: NodeLoadingState = 'loading';
    const loaded: NodeLoadingState = 'loaded';
    
    expect(unloaded).toBe('unloaded');
    expect(loading).toBe('loading');
    expect(loaded).toBe('loaded');
  });

  it('FlatTreeNodeWithState should extend FlatTreeNode', () => {
    const mockFlatTreeNode: FlatTreeNode = {
      id: 1,
      key: 1,
      path: [],
      displayName: 'Test Node',
      parentIds: [],
      selectable: true,
      isExpanded: false,
      depth: 0,
      hasChildren: false,
    };

    const nodeWithState: FlatTreeNodeWithState = {
      ...mockFlatTreeNode,
      loadingState: 'unloaded',
    };

    expect(nodeWithState.loadingState).toBe('unloaded');
    expect(nodeWithState.id).toBe(1);
    expect(nodeWithState.hasChildren).toBe(false);
  });

  it('FlatTreeNodeWithState should support all loading states', () => {
    const baseNode: FlatTreeNode = {
      id: 1,
      key: 1,
      path: [],
      displayName: 'Test Node',
      parentIds: [],
      selectable: true,
      isExpanded: false,
      depth: 0,
      hasChildren: true,
    };

    const unloadedNode: FlatTreeNodeWithState = { ...baseNode, loadingState: 'unloaded' };
    const loadingNode: FlatTreeNodeWithState = { ...baseNode, loadingState: 'loading' };
    const loadedNode: FlatTreeNodeWithState = { ...baseNode, loadingState: 'loaded' };

    expect(unloadedNode.loadingState).toBe('unloaded');
    expect(loadingNode.loadingState).toBe('loading');
    expect(loadedNode.loadingState).toBe('loaded');
  });
});
```

--------------------------------------------------------------------------------
/xmlui/src/components/NavGroup/NavGroup.module.scss:
--------------------------------------------------------------------------------

```scss
@use "../../components-core/theming/themes" as t;

// --- This code snippet is required to collect the theme variables used in this module
$themeVars: ();
$time: 0.3s;
@function createThemeVar($componentVariable) {
  $themeVars: t.appendThemeVar($themeVars, $componentVariable) !global;
  @return t.getThemeVar($themeVars, $componentVariable);
}

$backgroundColor-dropdown-NavGroup: createThemeVar("backgroundColor-dropdown-NavGroup");
$boxShadow-dropdown-NavGroup: createThemeVar("boxShadow-dropdown-NavGroup");
$borderRadius-dropdown-NavGroup: createThemeVar("borderRadius-dropdown-NavGroup");

@layer components {
  .dropdownList {
    padding: 0;
    margin: 0;
    left: 0;
    top: 0;
    position: absolute;
    overflow-y: hidden;
    background: $backgroundColor-dropdown-NavGroup;
    list-style: none;
    height: fit-content;
    transition: height 0.2s ease;
    box-shadow: $boxShadow-dropdown-NavGroup;
    min-width: 11rem;
    border-radius: $borderRadius-dropdown-NavGroup;

    &:focus,
    &:focus-visible {
      outline: none;
    }
  }

  .groupContent {
    /* The core of the grid animation technique */
    display: grid;
    grid-template-rows: 0fr; /* Initially the content row has 0 height */
    will-change: grid-template-rows;
    transition: grid-template-rows $time cubic-bezier(0.4, 0, 0.2, 1);
    .groupContentInner {
      will-change: opacity;
      opacity: 0;
    }
    &.expanded {
      .groupContentInner {
        opacity: 1;
        overflow: hidden;
      }
      grid-template-rows: 1fr;
    }
  }

  .groupContentInner {
    transition: opacity $time ease-out;
    /* This is the grid item. Its content determines the 'auto' height. */
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
}

// --- We export the theme variables to add them to the component renderer
:export {
  themeVars: t.json-stringify($themeVars);
}

```

--------------------------------------------------------------------------------
/xmlui/src/components/Tabs/TabItem.md:
--------------------------------------------------------------------------------

```markdown
%-DESC-START

**Key features:**
- **Label definition**: Provides the clickable tab header text via the label property
- **Content container**: Wraps any child components that display when the tab is active
- **Structural organization**: Creates the relationship between tab headers and their corresponding content
- **Seamless integration**: Designed exclusively for use within [Tabs](/components/Tabs) components

**Usage pattern:**
Always used as a direct child of [Tabs](/components/Tabs) components. The `label` property defines the tab button text, while child components placed within the TabItem provide the content that displays when the tab is selected.

%-DESC-END

%-PROP-START headerTemplate

```xmlui-pg copy {7-9} display name="Example: headerTemplate" /headerTemplate/ height="200px" 
<App>
  <Tabs>
    <TabItem label="Home">
      Home content
    </TabItem>
    <TabItem label="Accounts">
      <property name="headerTemplate">
        <Text variant="title" color="green">Accounts</Text>
      </property>
      Accounts content
    </TabItem>
    <TabItem label="Settings">
      Settings content
    </TabItem>
  </Tabs>
</App>
```

> [!INFO] You can customize the [header templates](./Tabs#headertemplate) of **all** tab items, too. You can mix the `Tabs` level header templates with the `TabItem` level ones. In this case, the `TabItem` level template prevails.

%-PROP-END

%-EVENT-START activated

```xmlui-pg copy display name="Example: activated" /onActivated/ height="200px" 
<App var.activationCount="{0}">
  <Tabs>
    <TabItem label="Account" onActivated="activationCount++">
      <Text>Account</Text>
    </TabItem>
    <TabItem label="Stream">
      <Text>Stream</Text>
    </TabItem>
    <TabItem label="Support">
      <Text>Support</Text>
    </TabItem>
  </Tabs>
  <Text>The Account tab has been activated {activationCount} times.</Text>
</App>
```

%-EVENT-END
```

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

```markdown
%-DESC-START

**Key characteristics:**
- **Manual execution**: Call `execute()` method to trigger the API request
- **Form integration**: Commonly used in `<event name="submit">` handlers for forms
- **Parameter passing**: Pass data to the API call via `execute()` parameters
- **Built-in notifications**: Supports automatic progress, success, and error messages

%-DESC-END

%-PROP-START completedNotificationMessage

This property customizes the success message displayed in a toast after the finished API invocation. The `$result` context variable can refer to the response body. For example, you can use the following code snippet to display the first 100 characters in the completed operation's response body:

```xmlui copy
 <APICall
  id="ds"
  method="post"
  url="/api/shopping-list" 
  completedNotificationMessage="Result: {JSON.stringify($result).substring(0, 100)}" />
```

%-PROP-END

%-PROP-START errorNotificationMessage

This property customizes the message displayed in a toast when the API invocation results in an error. The `$error.statusCode` context variable can refer to the response's status code, while `$error. details` to the response body. For example, you can use the following code snippet to display the status code and the details:

```xmlui copy
 <APICall
  id="ds"
  method="post"
  url="/api/shopping-list" 
  errorNotificationMessage="${error.statusCode}, {JSON.stringify($error.details)}" />
```
%-PROP-END

%-PROP-START invalidates

This property takes either a string or a list of strings representing URL endpoints to invalidate the local data cache based on the given URL routes.

For a short overview on client side caching, see the [DataSource component](/components/DataSource).

%-PROP-END

%-PROP-START updates

This property takes either a string or a list of strings representing URL endpoints to indicate which data should be updated in the cache.

%-PROP-END

```

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

```markdown
%-DESC-START

For an example that covers all props, and API methods and values, see the [\`Selection-Aware Components\`](#selection-aware-components) section.

## Using `SelectionStore`

A `SelectionStore` instance is a mediator between a component that can manage a list of selected items and the external context.
The wrapped component can report its selection state (which items are currently selected);
so that the external context can access and manage the selection state through the component's API.

## Selection-Aware Components

Some components know they are wrapped with a `SelectionStore` and manage their current selection state through it.
For example, the following sample `SelectionStore` wraps a `Table` with its `rowsSelectable` property set to true.
Whenever the user changes the selection state of a particular row, the `SelectionStore` updates its state accordingly.

```xmlui-pg 
---app copy display name="Example: using SelectionStore"
<App>
  <H3>Rockets {rockets.value.length ? "(" + rockets.value.length + " selected)" : ""}</H3>
  <HStack>
    <Button label="Select First" 
      onClick="if (rockets.value?.length) rockets.setSelectedRowIds([rockets.value[0].id])" />
    <Button label="Refresh Table" onClick="rockets.refreshSelection()" />
    <Button label="Clear Selection" onClick="rockets.clearSelection()" />
  </HStack>
  <SelectionStore id="rockets">
    <Table
      width="100%"
      rowsSelectable="{true}"
      data="https://api.spacexdata.com/v3/rockets"
      height="300px">
      <Column header="Image" size="80px">
        <Image height="80px" fit="cover" src="{$item.flickr_images[0]}"/>
      </Column>
      <Column canSort="true" bindTo="country"/>
      <Column canSort="true" bindTo="company"/>
    </Table>
  </SelectionStore>
</App>
---desc
The UI refreshes the number of selected items as you check or uncheck the rows in the following table:
```

%-DESC-END

```

--------------------------------------------------------------------------------
/packages/xmlui-playground/src/playground/ConfirmationDialog.module.scss:
--------------------------------------------------------------------------------

```scss
.Overlay {
  background-color: rgba(0, 0, 0, 0.4);
  position: fixed;
  inset: 0;
  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.Content {
  background-color: #ffffff;
  border-radius: 6px;
  box-shadow:
          rgba(0, 0, 0, 0.35) 0px 10px 38px -10px,
          rgba(0, 0, 0, 0.2) 0px 10px 20px -15px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw;
  max-width: 500px;
  max-height: 85vh;
  padding: 25px;
  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
  &:focus {
    outline: none;
  }
}

.Title {
  margin: 0;
  color: #1b1c1d;
  font-size: 17px;
  font-weight: 500;
}

.Description {
  margin-bottom: 20px;
  color: #6b6c70;
  font-size: 15px;
  line-height: 1.5;
}

.Button {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  padding: 0 15px;
  font-size: 15px;
  line-height: 1;
  font-weight: 500;
  height: 35px;
}

.Button.violet {
  background-color: #ffffff;
  color: #7c4dff;
  box-shadow: rgba(0, 0, 0, 0.7) 0px 2px 10px;
}
.Button.violet:hover {
  background-color: #f2f2f2;
}
.Button.violet:focus {
  box-shadow: 0 0 0 2px #000000;
}

.Button.red {
  background-color: #ffcccc;
  color: #cc0000;
}
.Button.red:hover {
  background-color: #ff9999;
}
.Button.red:focus {
  box-shadow: 0 0 0 2px #ff6666;
}

.Button.mauve {
  background-color: #e5e5e5;
  color: #6b6c70;
}
.Button.mauve:hover {
  background-color: #d9d9d9;
}
.Button.mauve:focus {
  box-shadow: 0 0 0 2px #a6a6a6;
}

.Actions {
  width: 100%;
  justify-content: flex-end;
  align-self: center;
  display: flex;
  gap: 1rem;
}

@keyframes overlayShow {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes contentShow {
  from {
    opacity: 0;
    transform: translate(-50%, -48%) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

```

--------------------------------------------------------------------------------
/xmlui/src/components/Stack/Stack.module.scss:
--------------------------------------------------------------------------------

```scss
@use "../../components-core/theming/themes" as t;

// --- This code snippet is required to collect the theme variables used in this module
$themeVars: ();
@function createThemeVar($componentVariable) {
  $themeVars: t.appendThemeVar($themeVars, $componentVariable) !global;
  @return t.getThemeVar($themeVars, $componentVariable);
}

@layer components {
  .base {
    display: flex;
    /* default flexbox alignment */
    justify-content: flex-start;
    align-items: stretch;
    min-height: 0;
    min-width: 0;
    gap: var(--stack-gap-default);

    &.hoverContainer{
      :global(.display-on-hover){
        transition: opacity .1s;
        opacity: 0;
        visibility: hidden;
      }

      &:has(:global(.dropdown-visible)) :global(.display-on-hover){
        opacity: 1;
        visibility: visible;
      }

      &:hover, &:focus-within{
        :global(.display-on-hover) {
          opacity: 1;
          visibility: visible;
        }
      }
    }

    &.handlesClick{
      cursor: pointer;
    }
  }

  .vertical {
    flex-direction: column;
    min-height: 0;

    &.reverse{
      flex-direction: column-reverse;
    }
  }

  .horizontal {
    flex-direction: row;
    &.reverse{
      flex-direction: row-reverse;
    }
  }

  /* Main axis */
  .justifyItemsStart {
    justify-content: flex-start;
  }
  .justifyItemsCenter {
    justify-content: center;
  }
  .justifyItemsStretch {
    justify-content: stretch;
  }
  .justifyItemsEnd {
    justify-content: flex-end;
  }

  /* Cross axis */
  .alignItemsStart {
    align-items: flex-start;
  }
  .alignItemsCenter {
    align-items: center;
  }
  .alignItemsStretch {
    align-items: stretch;
  }
  .alignItemsEnd {
    align-items: flex-end;
  }
  .alignItemsBaseline {
    align-items: baseline;
  }
}

// --- We export the theme variables to add them to the component renderer
:export {
  themeVars: t.json-stringify($themeVars);
}

```

--------------------------------------------------------------------------------
/xmlui/src/components/IFrame/IFrameNative.tsx:
--------------------------------------------------------------------------------

```typescript
import type React from "react";
import { type CSSProperties, forwardRef, memo, useEffect, useRef } from "react";
import classnames from "classnames";

import styles from "./IFrame.module.scss";
import type { RegisterComponentApiFn } from "../../abstractions/RendererDefs";

type Props = {
  src?: string;
  srcdoc?: string;
  allow?: string;
  name?: string;
  referrerPolicy?: "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url";
  sandbox?: string;
  style?: CSSProperties;
  className?: string;
  registerComponentApi?: RegisterComponentApiFn;
} & Pick<React.HTMLAttributes<HTMLIFrameElement>, "onLoad">;

export const IFrame = memo(forwardRef(function IFrame(
  {
    src,
    srcdoc,
    allow,
    name,
    referrerPolicy,
    sandbox,
    style,
    className,
    onLoad,
    registerComponentApi,
    ...rest
  }: Props,
  ref: React.ForwardedRef<HTMLIFrameElement>,
) {
  const iframeRef = useRef<HTMLIFrameElement>(null);

  // Register component APIs
  useEffect(() => {
    registerComponentApi?.({
      postMessage: (message: any, targetOrigin: string = "*") => {
        const contentWindow = iframeRef.current?.contentWindow;
        if (contentWindow) {
          contentWindow.postMessage(message, targetOrigin);
        }
      },
      getContentWindow: () => {
        return iframeRef.current?.contentWindow || null;
      },
      getContentDocument: () => {
        return iframeRef.current?.contentDocument || null;
      },
    });
  }, [registerComponentApi]);

  return (
    <iframe
      {...rest}
      ref={iframeRef}
      src={src}
      srcDoc={srcdoc}
      allow={allow}
      name={name}
      referrerPolicy={referrerPolicy}
      sandbox={sandbox}
      className={classnames(className, styles.iframe)}
      style={style}
      onLoad={onLoad}
    />
  );
}));

```

--------------------------------------------------------------------------------
/xmlui/src/components/Card/Card.module.scss:
--------------------------------------------------------------------------------

```scss
@use "../../components-core/theming/themes" as t;

// --- This code snippet is required to collect the theme variables used in this module
$themeVars: ();
@function createThemeVar($componentVariable) {
  $themeVars: t.appendThemeVar($themeVars, $componentVariable) !global;
  @return t.getThemeVar($themeVars, $componentVariable);
}

$component: "Card";
$themeVars: t.composePaddingVars($themeVars, $component);
$themeVars: t.composeBorderVars($themeVars, $component);
$boxShadow-Card: createThemeVar("boxShadow-Card");
$backgroundColor-Card: createThemeVar("backgroundColor-Card");
$borderRadius-Card: createThemeVar("borderRadius-Card");
$gap-Card: createThemeVar("gap-Card");
$gap-title-Card: createThemeVar("gap-title-Card");
$gap-avatar-Card: createThemeVar("gap-avatar-Card");
$horizontalAlignment-title-Card: createThemeVar("horizontalAlignment-title-Card");
$verticalalAlignment-title-Card: createThemeVar("verticalAlignment-title-Card");


@layer components {
  .wrapper {
    @include t.borderVars($themeVars, $component);
    @include t.paddingVars($themeVars, $component);
    box-shadow: $boxShadow-Card;
    background-color: $backgroundColor-Card;
    display: flex;
    flex-direction: column;
    gap: $gap-Card;

    .avatarWrapper {
      display: flex;
      flex-direction: row;
      align-items: $verticalalAlignment-title-Card;
      gap: $gap-avatar-Card;
      min-width: 0;
    }

    .titleWrapper {
      display: flex;
      flex-direction: column;
      align-items: $horizontalAlignment-title-Card;
      width: 100%;
      gap: $gap-title-Card;
      min-width: 0;
    }

    &.horizontal {
      flex-direction: row;
      align-items: center;
    }

    &.vertical {
      flex-direction: column;
    }

    &.isClickable {
      cursor: pointer;
    }
  }
}

// --- We export the theme variables to add them to the component renderer
:export{
  themeVars: t.json-stringify($themeVars)
}

```

--------------------------------------------------------------------------------
/packages/xmlui-os-frames/src/MacOSAppFrame.tsx:
--------------------------------------------------------------------------------

```typescript
import styles from "./MacOSAppFrame.module.scss";
import type { ReactNode } from "react";
import { forwardRef } from "react";

export const MacOSAppFrame = forwardRef(({ children }: { children: ReactNode }, ref)=> {
  return (
    <section role="application" className={styles.app} tabIndex={-1} ref={ref as any}>
      <div className={styles.appButtons}>
        <div className={styles.appButtonsInner}>
          <button className={`${styles.close} ${styles.button}`}>
            <svg width="7" height="7" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path
                stroke="#000"
                strokeWidth="1.2"
                strokeLinecap="round"
                d="M1.182 5.99L5.99 1.182m0 4.95L1.182 1.323"
              ></path>
            </svg>
          </button>
          <button className={`${styles.minimize} ${styles.button}`}>
            <svg fill="none" xmlns="http://www.w3.org/2000/svg" width="6" height="1">
              <path stroke="#000" strokeLinecap="round" d="M.61.703h5.8" strokeWidth="2"></path>
            </svg>
          </button>
          <button className={`${styles.stretch} ${styles.button}`}>
            <svg
              viewBox="0 0 13 13"
              xmlns="http://www.w3.org/2000/svg"
              fillRule="evenodd"
              clipRule="evenodd"
              strokeLinejoin="round"
              strokeMiterlimit="2"
            >
              <path d="M4.871 3.553L9.37 8.098V3.553H4.871zm3.134 5.769L3.506 4.777v4.545h4.499z"></path>
              <circle fill="none" cx="6.438" cy="6.438" r="6.438"></circle>
            </svg>
          </button>
        </div>
      </div>
      <section className={styles.container}>
        <header className={styles.titleBar}>
          <span className="s-85680v">XMLUI</span>
        </header>
        <section className={styles.mainArea}>{children}</section>
      </section>
    </section>
  );
});

```

--------------------------------------------------------------------------------
/xmlui/src/abstractions/scripting/Compilation.ts:
--------------------------------------------------------------------------------

```typescript
import type { ComponentDef, CompoundComponentDef } from "../ComponentDefs";
import type { ThemeDefinition } from "../ThemingDefs";
import type { Expression, Statement } from "../../components-core/script-runner/ScriptingSourceTree";

/** Contains the compilation result of a project */
export type ProjectCompilation = {
  /** The compiled Main.xmlui file (with its optional code behind) */
  entrypoint: EntrypointCompilation;

  /** The compiled component files (with their optional code behind) */
  components: ComponentCompilation[];

  /** The compiled theme files */
  themes: Record<string, ThemeDefinition>;
};

/** The compilation result of a single file */
export type FileCompilation = EntrypointCompilation | ComponentCompilation;

type CompilationUnit = {
  /** The file name */
  filename: string;
  /** Optional markup source (used in dev mode) */
  markupSource?: string;
  /** Optional code behind source (used in dev mode) */
  codeBehindSource?: string;
  /** Other (non-core) component names this component depends on */
  dependencies: Set<string>;
};

export type ComponentCompilation = CompilationUnit & {
  /** The compiled markup of the component file */
  definition: CompoundComponentDef;
};

export type EntrypointCompilation = CompilationUnit & {
  /** The compiled markup of the main file */
  definition: ComponentDef;
};

export type ParsedEventValue = {
  __PARSED: true;
  parseId: number;
  statements: Statement[];
  source?: string;
}

// --- The parsed property value (if defined by an attribute value)
export type ParsedPropertyValue = {
  // --- We recognize this as a parsed property value
  __PARSED: true;

  // --- ID used for caching the parsed property value
  parseId: number;

  // --- The property segments
  segments?: PropertySegment[];
};

// --- The compliation result of a single property
export type PropertySegment = {
  literal?: string;
  expr?: Expression;
  deps?: string[];
};

```

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

```markdown
# ProgressBar [#progressbar]

`ProgressBar` provides a visual indicator showing the completion percentage of tasks, processes, or any measurable progress. It displays as a horizontal bar that fills from left to right based on the provided value between 0 (empty) and 1 (complete).

**Key features:**
- **Percentage visualization**: Displays progress as a filled portion of a horizontal bar
- **Flexible value handling**: Accepts values from 0 to 1, with automatic bounds handling for out-of-range values
- **Extensive theming**: Customizable background color, indicator color, thickness, and border radius
- **Responsive design**: Adapts to container width while maintaining consistent height

## Properties [#properties]

### `value` (default: 0) [#value-default-0]

This property defines the progress value with a number between 0 and 1.

The following example demonstrates using it:

```xmlui-pg copy {2-6} display name="Example: value" height="200px"
<App>
  <ProgressBar />
  <ProgressBar value="0.2"/>
  <ProgressBar value="0.6"/>
  <ProgressBar value="1"/>
  <ProgressBar value="1.2"/>
</App>
```

## Events [#events]

This component does not have any events.

## Exposed Methods [#exposed-methods]

This component does not expose any methods.

## Styling [#styling]

### Theme Variables [#theme-variables]

| Variable | Default Value (Light) | Default Value (Dark) |
| --- | --- | --- |
| [backgroundColor](../styles-and-themes/common-units/#color)-ProgressBar | $color-surface-200 | $color-surface-200 |
| [borderRadius](../styles-and-themes/common-units/#border-rounding)-indicator-ProgressBar | 0px | 0px |
| [borderRadius](../styles-and-themes/common-units/#border-rounding)-ProgressBar | $borderRadius | $borderRadius |
| [color](../styles-and-themes/common-units/#color)-indicator-ProgressBar | $color-primary-500 | $color-primary-500 |
| [thickness](../styles-and-themes/common-units/#size)-ProgressBar | $space-2 | $space-2 |

```

--------------------------------------------------------------------------------
/xmlui/src/components/Charts/utils/ChartProvider.tsx:
--------------------------------------------------------------------------------

```typescript
import type { ReactNode } from "react";
import { useState } from "react";
import { createContext, useContext } from "react";

type ChartContextType = {
  dataKey: string;
  dataKeys: string[];
  nameKey: string;
  labelList: any;
  setLabelList: any;
  legend: any;
  setLegend: any;
};

const ChartContext = createContext<ChartContextType | undefined>({
  dataKey: "",
  nameKey: "",
  dataKeys: [],
  labelList: null,
  setLabelList: () => {},
  legend: null,
  setLegend: () => {},
});

export function useChartContextValue({
  dataKey = "",
  dataKeys = [],
  nameKey = "",
}: {
  dataKey?: string;
  dataKeys?: string[];
  nameKey: string;
}) {
  const [dKey] = useState(dataKey);
  const [dKeys] = useState(dataKeys);
  const [nKey] = useState(nameKey);
  const [labelList, setLabelList] = useState(null);
  const [legend, setLegend] = useState(null);

  return {
    dataKey: dKey,
    nameKey: nKey,
    dataKeys: dKeys,
    labelList,
    setLabelList,
    legend,
    setLegend,
  };
}

export function useChart() {
  const context = useContext(ChartContext);
  if (context === undefined) {
    throw new Error("useChart must be used within a ChartProvider");
  }
  return context;
}

export function useLabelList() {
  const context = useContext(ChartContext);
  if (context === undefined) {
    throw new Error("LabelList must be used within a chart");
  }

  const { setLabelList } = context;
  return {
    setLabelList,
  };
}

export function useLegend() {
  const context = useContext(ChartContext);
  if (context === undefined) {
    throw new Error("Legend must be used within a chart");
  }

  const { setLegend } = context;
  return {
    setLegend,
  };
}

type ChartProviderProps = {
  value: ChartContextType;
  children: ReactNode;
};

function ChartProvider({ value, children }: ChartProviderProps) {
  return <ChartContext.Provider value={value}>{children}</ChartContext.Provider>;
}

export default ChartProvider;

```

--------------------------------------------------------------------------------
/xmlui/src/components/Bookmark/BookmarkNative.tsx:
--------------------------------------------------------------------------------

```typescript
import type { ReactNode } from "react";
import { useCallback, useContext, useEffect, useLayoutEffect, useRef } from "react";
import { TableOfContentsContext } from "../../components-core/TableOfContentsContext";
import type { RegisterComponentApiFn } from "../../abstractions/RendererDefs";
import styles from "./Bookmark.module.scss";

type Props = {
  uid?: string;
  level?: number;
  title?: string;
  omitFromToc?: boolean;
  children: ReactNode;
  registerComponentApi?: RegisterComponentApiFn;
};

export const defaultProps: Pick<Props, "level" | "omitFromToc"> = {
  level: 1,
  omitFromToc: false,
};

export const Bookmark = ({
  uid,
  level = defaultProps.level,
  children,
  title,
  omitFromToc = defaultProps.omitFromToc,
  registerComponentApi,
  ...rest
}: Props) => {
  const elementRef = useRef<HTMLAnchorElement>(null);
  const tableOfContentsContext = useContext(TableOfContentsContext);
  const registerHeading = tableOfContentsContext?.registerHeading;
  const observeIntersection = tableOfContentsContext?.hasTableOfContents;

  const scrollIntoView = useCallback((options?: ScrollIntoViewOptions) => {
    if (elementRef.current) {
      elementRef.current.scrollIntoView({
        behavior: "smooth",
        block: "start",
        ...options,
      });
    }
  }, []);

  useEffect(() => {
    registerComponentApi?.({
      scrollIntoView,
    });
  }, [registerComponentApi, scrollIntoView]);

  useLayoutEffect(() => {
    if (observeIntersection && elementRef.current && uid && !omitFromToc) {
      return registerHeading?.({
        id: uid,
        level,
        text: title || elementRef.current?.textContent?.trim()?.replace(/#$/, "") || uid,
        anchor: elementRef.current,
      });
    }
  }, [uid, observeIntersection, registerHeading, level, title, omitFromToc]);

  return (
    <span {...rest} ref={elementRef} id={uid} data-anchor={true} className={styles.anchorRef}>
      {children}
    </span>
  );
};

```

--------------------------------------------------------------------------------
/.github/workflows/deploy-blog-optimized.yml:
--------------------------------------------------------------------------------

```yaml
name: Deploy blog (optimized)

on:
  workflow_dispatch:

permissions:
  contents: write
  pull-requests: write

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    env:
      NODE_OPTIONS: "--max-old-space-size=8192"
      TURBO_UI: "false"

    steps:
      - name: 1. Generate a token from the GitHub App 🤖
        id: generate_token
        uses: tibdex/github-app-token@v2
        with:
          app_id: ${{ secrets.APP_ID }}
          private_key: ${{ secrets.APP_PRIVATE_KEY }}
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: "npm"
          registry-url: https://registry.npmjs.org/

      - name: Cache for Turbo
        uses: rharkor/caching-for-turbo@v2.3.1

      - run: npm ci --prefer-offline

      - name: 4. Configure Git to use the App's token 🔑
        # The token generated in the first step is used here for authentication.
        run: git config --global url."https://x-access-token:${{ steps.generate_token.outputs.token }}@github.com/".insteadOf "https://github.com/"
      - name: 5. DEBUG - Attempt to clone the private repo
        # This step will give a clear error if authentication is the problem
        run: git clone https://github.com/xmlui-org/xmlui-optimizer.git
      - name: 5. Install optimizer's dependencies
        run: npm install
        working-directory: ./xmlui-optimizer
      - name: DEBUG - install xmlui-optimizer
        # This step will give a clear error if authentication is the problem
        run: npm install ./xmlui-optimizer

      - run: cd blog && npm run release-ci-optimized
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

      - name: "Run Azure webapp deploy action using publish profile credentials"
        uses: azure/webapps-deploy@v2
        with:
          package: "blog/ui-optimized.zip"
          app-name: xmlui-blog
          publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE_XMLUI_BLOG }}


```

--------------------------------------------------------------------------------
/packages/xmlui-hello-world/src/HelloWorld.tsx:
--------------------------------------------------------------------------------

```typescript
import styles from "./HelloWorld.module.scss";
import { createComponentRenderer, parseScssVar, createMetadata } from "xmlui";
import { HelloWorld, defaultProps } from "./HelloWorldNative";

const HelloWorldMd = createMetadata({
  description:
    "`HelloWorld` is a demonstration component that shows basic XMLUI patterns.",
  status: "experimental",
  props: {
    message: {
      description: "The greeting message to display.",
      isRequired: false,
      type: "string",
      defaultValue: defaultProps.message,
    },
  },
  events: {
    onClick: {
      description:
        "Triggered when the click button is pressed. " + "Receives the current click count.",
      type: "function",
    },
    onReset: {
      description:
        "Triggered when the reset button is pressed. " + "Called when count is reset to 0.",
      type: "function",
    },
  },
  apis: {
    value: {
      description: "The current click count value.",
      type: "number",
    },
    setValue: {
      description: "Set the click count to a specific value.",
      type: "function",
    },
  },
  themeVars: parseScssVar(styles.themeVars),
  defaultThemeVars: {
    [`backgroundColor-HelloWorld`]: "$color-surface-50",
    [`textColor-HelloWorld`]: "$color-content-primary",
    dark: {
      [`backgroundColor-HelloWorld`]: "$color-surface-800",
      // No textColor override needed - $color-content-primary should auto-adapt
    },
  },
});

export const helloWorldComponentRenderer = createComponentRenderer(
  "HelloWorld",
  HelloWorldMd,

  ({ node, extractValue, lookupEventHandler, className, registerComponentApi }) => {
    return (
      <HelloWorld
        id={extractValue.asOptionalString(node.props?.id)}
        message={extractValue.asOptionalString(node.props?.message)}
        onClick={lookupEventHandler("onClick")}
        onReset={lookupEventHandler("onReset")}
        className={className}
        registerComponentApi={registerComponentApi}
      />
    );
  },
);

```

--------------------------------------------------------------------------------
/xmlui/src/components/Accordion/AccordionItem.tsx:
--------------------------------------------------------------------------------

```typescript
import { createComponentRenderer } from "../../components-core/renderers";
import { createMetadata, dComponent } from "../../components/metadata-helpers";
import { MemoizedItem } from "../../components/container-helpers";
import {
  AccordionItemComponent,
  defaultProps,
} from "../../components/Accordion/AccordionItemNative";

const COMP = "AccordionItem";

export const AccordionItemMd = createMetadata({
  status: "in progress",
  description:
    `\`${COMP}\` is a non-visual component describing a tab. Tabs component may use nested ` +
    `${COMP} instances from which the user can select.`,
  props: {
    header: {
      description: "This property declares the text used in the component's header. If not provided, the header will be empty.",
      valueType: "string"
    },
    headerTemplate: dComponent(
      "This property describes the template to use as the component's header.",
    ),
    initiallyExpanded: {
      description: `This property indicates if the ${COMP} is expanded (\`true\`) or collapsed (\`false\`).`,
      valueType: "boolean",
      defaultValue: defaultProps.initiallyExpanded
    },
  },
});

export const accordionItemComponentRenderer = createComponentRenderer(
  COMP,
  AccordionItemMd,
  (rendererContext) => {
    const { node, renderChild, extractValue, className } = rendererContext;
    return (
      <AccordionItemComponent
        className={className}
        id={extractValue(node.uid)}
        header={extractValue(node.props.header)}
        initiallyExpanded={extractValue.asOptionalBoolean(node.props.initiallyExpanded)}
        headerRenderer={
          node.props.headerTemplate
            ? (item) => (
                <MemoizedItem
                  node={node.props.headerTemplate ?? ({ type: "Fragment" } as any)}
                  item={item}
                  renderChild={renderChild}
                />
              )
            : undefined
        }
        content={renderChild(node.children)}
      />
    );
  },
);

```

--------------------------------------------------------------------------------
/packages/xmlui-hello-world/src/HelloWorldNative.tsx:
--------------------------------------------------------------------------------

```typescript
import React, { useState, useEffect } from "react";
import styles from "./HelloWorld.module.scss";
import type { RegisterComponentApiFn } from "xmlui";

type Props = {
  id?: string;
  message?: string;
  className?: string;
  onClick?: (event: React.MouseEvent) => void;
  onReset?: (event: React.MouseEvent) => void;
  registerComponentApi?: RegisterComponentApiFn;
};

export const defaultProps = {
  message: "Hello, World!",
};

export const HelloWorld = React.forwardRef<HTMLDivElement, Props>(
  function HelloWorld(
    {
      id,
      message = defaultProps.message,
      className,
      onClick,
      onReset,
      registerComponentApi
    },
    ref
  ) {
    const [clickCount, setClickCount] = useState(0);

    // Create setValue method for external API access
    const setValue = (newCount: number) => {
      setClickCount(newCount);
    };

    // Register component API
    useEffect(() => {
      registerComponentApi?.({
        setValue,
        value: clickCount,
      });
    }, [registerComponentApi, setValue, clickCount]);

    const handleClick = (event: React.MouseEvent) => {
      const newCount = clickCount + 1;
      setClickCount(newCount);
      onClick?.(event);
    };

    const handleReset = (event: React.MouseEvent) => {
      setClickCount(0);
      onReset?.(event);
    };

    return (
      <div className={`${styles.container} ${className || ''}`} id={id} ref={ref}>
        <h2 className={styles.message}>{message}</h2>
        <button
           className={styles.button}
              onClick={handleClick}
            >
              Click me!
            </button>
            <div className={styles.counter}>
              Clicks: <span className={styles.count}>{clickCount}</span>
            </div>

            {clickCount > 0 && (
              <button
                className={styles.button}
                onClick={handleReset}
              >
                Reset
              </button>
            )}
          </div>
    );
  }
);

```

--------------------------------------------------------------------------------
/docs/public/pages/howto/filter-and-transform-data-from-an-api.md:
--------------------------------------------------------------------------------

```markdown
# Filter and transform data from an API

```xmlui-pg noHeader
---app
<App>
  <Test />
</App>
---api display
{
  "apiUrl": "/api",
  "initialize": "$state.people = [
    { id: 1, name: 'Alice', active: true,  group: 'A' },
    { id: 2, name: 'Bob',   active: false, group: 'B' },
    { id: 3, name: 'Carol', active: true,  group: 'A' },
    { id: 4, name: 'Dave',  active: true,  group: 'B' }
  ]",
  "operations": {
    "get-people": {
      "url": "/people",
      "method": "get",
      "handler": "return { status: 'ok', data: { items: $state.people } }"
    }
  }
}
---comp display
<Component name="Test">

  <!--
  {
    items:
      [
        { id: 1, name: 'Alice', active: true,  group: 'A' },
        { id: 2, name: 'Bob',   active: false, group: 'B' },
        { id: 3, name: 'Carol', active: true,  group: 'A' },
        { id: 4, name: 'Dave',  active: true,  group: 'B' }
      ]
  }
  -->

  <!-- Use resultSelector to select the items array -->
  <DataSource
    id="allPeople"
    url="/api/people"
    resultSelector="data.items"
  />

  <!-- Use resultSelector to filter the items array -->
  <DataSource
    id="activePeople"
    url="/api/people"
    resultSelector="data.items.filter(p => p.active)"
  />

  <!-- Use transformResult -->

  <script>
  function transformPeople (data) {
    console.log(data);
    const items = data.data.items;
    const itemMap = {
      A: 'Austin',
      B: 'Boston'
    };
    return items.map(item => ({
      ...item,
      city: itemMap[item.group]
    }));
  };

  </script>

  <DataSource
    id="transformedPeople"
    url="/api/people"
    transformResult="{transformPeople}"
  />

  <Text>All people:</Text>
  <List data="{allPeople}">
    <Text>{$item.name} ({$item.group})</Text>
  </List>

  <Text>Active people:</Text>
  <List data="{activePeople}">
    <Text>{$item.name} ({$item.group})</Text>
  </List>

  <Text>Transformed people:</Text>
  <List data="{transformedPeople}">
    <Text>{$item.name} ({$item.city})</Text>
  </List>


</Component>
```

```

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

```markdown
%-PROP-START alt

This is useful in two cases:
1. Accessibility: screen readers read the prop value to users so they know what the image is about.
2. The text is also displayed when the image can't be loaded for some reason (network errors, content blocking, etc.).

```xmlui-pg copy display name="Example: alt"
<App>
  <Image 
    src="cantFindIt.jpg" 
    alt="This image depicts a wonderful scene not for human eyes" />
</App>
```

%-PROP-END

%-PROP-START fit

| Name      | Value |
| --------- | ----- |
| `contain` | The replaced content is scaled to maintain its aspect ratio while fitting within the image's container. The entire image is made to fill the container. |
| `cover`   | The image is sized to maintain its aspect ratio while filling the element's entire content box. If the image's aspect ratio does not match the aspect ratio of its container, then the image will be clipped to fit. |

```xmlui-pg copy display name="Example: fit" {5,9}
<App>
  <HStack padding="1rem" height="280px" gap="1rem">
    <Image 
      src="/resources/images/components/image/breakfast.jpg" 
      fit="contain" 
      width="240px" />
    <Image 
      src="/resources/images/components/image/breakfast.jpg" 
      fit="cover" 
      width="240px" />
  </HStack>
</App>
```

%-PROP-END

%-PROP-START lazyLoad

Lazy loading instructs the browser to load the image only when it is imminently needed (e.g. user scrolls to it).
The default value is eager (\`false\`).

%-PROP-END

%-PROP-START aspectRatio

```xmlui-pg copy display name="Example: aspectRatio"
<App>
  <Image 
    src="/resources/images/components/image/breakfast.jpg" 
    aspectRatio="200 / 150" />
</App>
```

%-PROP-END

%-EVENT-START click

This event is triggered when the image is clicked.

```xmlui-pg copy {6} display name="Example: click"
<App>
  <Stack height="280px" width="400px">
    <Image
      src="/resources/images/components/image/breakfast.jpg"
      fit="cover"
      onClick="toast('Image clicked')"
    />
  </Stack>
</App>
```

%-EVENT-END

```

--------------------------------------------------------------------------------
/xmlui/tests/components-core/scripts-runner/process-event.test.ts:
--------------------------------------------------------------------------------

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

import { processStatementQueueAsync } from "../../../src/components-core/script-runner/process-statement-async";
import { createEvalContext, parseStatements } from "./test-helpers";
import { ArrowExpressionStatement, T_ARROW_EXPRESSION, T_ARROW_EXPRESSION_STATEMENT, T_EXPRESSION_STATEMENT } from "../../../src/components-core/script-runner/ScriptingSourceTree";

describe("Process statements (exp)", () => {
  it("Event with arrow function", async () => {
    // --- Arrange
    const source = "(x, y) => 2 * x + y";
    const evalContext = createEvalContext({
      localContext: {},
      eventArgs: [123, 1]
    });
    const statements = parseStatements(source);
    if (
      statements?.length !== 1 ||
      statements[0].type !== T_EXPRESSION_STATEMENT ||
      statements[0].expr.type !== T_ARROW_EXPRESSION
    ) {
      assert.fail("Arrow expression expected");
    }

    // --- Act
    const arrowStmt = {
      type: T_ARROW_EXPRESSION_STATEMENT,
      expr: statements[0].expr
    } as ArrowExpressionStatement;
    const diag = await processStatementQueueAsync([arrowStmt], evalContext);

    // --- Assert
    const thread = evalContext.mainThread;
    expect(thread!.blocks!.length).equal(1);
    expect(thread!.blocks![0].returnValue).equal(247);

    expect(diag.processedStatements).equal(1);
    expect(diag.maxLoops).equal(0);
    expect(diag.maxBlocks).equal(1);
    expect(diag.maxQueueLength).equal(1);
    expect(diag.clearToLabels).equal(0);
    expect(diag.unshiftedItems).equal(0);
  });

  it("Event issue", async () => {
    // --- Arrange
    const source = "(() => {let z = 0; while(z < 3) {console.log(z); z++}})()";
    const evalContext = createEvalContext({
      localContext: {},
      eventArgs: [123, 1]
    });
    const statements = parseStatements(source);
    await processStatementQueueAsync(statements, evalContext);

    // --- Assert
    expect(evalContext.mainThread!.blocks![0].returnValue).equal(undefined);
  });
});

```

--------------------------------------------------------------------------------
/xmlui/src/components/ContentSeparator/ContentSeparator.tsx:
--------------------------------------------------------------------------------

```typescript
import styles from "./ContentSeparator.module.scss";

import { createComponentRenderer } from "../../components-core/renderers";
import { parseScssVar } from "../../components-core/theming/themeVars";
import { orientationOptionMd } from "../abstractions";
import { ContentSeparator, defaultProps } from "./ContentSeparatorNative";
import { createMetadata } from "../metadata-helpers";

const COMP = "ContentSeparator";

export const ContentSeparatorMd = createMetadata({
  status: "stable",
  description:
    "`ContentSeparator` creates visual dividers between content sections using " +
    "horizontal or vertical lines. It's essential for improving readability by " +
    "breaking up dense content, separating list items, or creating clear boundaries " +
    "between different UI sections.",
  props: {
    size: {
      description:
        "This property defines the component's height (if the \`orientation\` is horizontal) " +
        "or the width (if the \`orientation\` is vertical). " +
        "If not defined, the component uses the entire available width or height.",
      valueType: "any",
    },
    orientation: {
      description: "Sets the main axis of the component",
      availableValues: orientationOptionMd,
      defaultValue: defaultProps.orientation,
      valueType: "string",
    },
  },
  themeVars: parseScssVar(styles.themeVars),
  defaultThemeVars: {
    [`backgroundColor-${COMP}`]: "$color-surface-200",
    [`size-${COMP}`]: "1px",
    [`marginVertical-${COMP}`]: "0",
    [`marginHorizontal-${COMP}`]: "0",
    light: {
      // --- No light-specific theme vars
    },
    dark: {
      // --- No dark-specific theme vars
    },
  },
});

export const contentSeparatorComponentRenderer = createComponentRenderer(
  COMP,
  ContentSeparatorMd,
  ({ node, className, extractValue }) => {
    return (
      <ContentSeparator
        orientation={extractValue(node.props.orientation)}
        size={extractValue.asSize(node.props.size)}
        className={className}
      />
    );
  },
);

```

--------------------------------------------------------------------------------
/xmlui/src/components/NestedApp/Tooltip.module.scss:
--------------------------------------------------------------------------------

```scss
@use "../../components-core/theming/themes" as t;

// --- This code snippet is required to collect the theme variables used in this module
$themeVars: ();
@function createThemeVar($componentVariable) {
  $themeVars: t.appendThemeVar($themeVars, $componentVariable) !global;
  @return t.getThemeVar($themeVars, $componentVariable);
}

@layer components {
  .TooltipContent {
    border-radius: 4px;
    padding: 10px 15px;
    font-family: sans-serif;
    font-size: 15px;
    line-height: 1;
    background-color: #ffffff;
    box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2);
    user-select: none;
    animation-duration: 400ms;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
  }
  .TooltipContent[data-state='delayed-open'][data-side='top'] {
    animation-name: slideDownAndFade;
  }
  .TooltipContent[data-state='delayed-open'][data-side='right'] {
    animation-name: slideLeftAndFade;
  }
  .TooltipContent[data-state='delayed-open'][data-side='bottom'] {
    animation-name: slideUpAndFade;
  }
  .TooltipContent[data-state='delayed-open'][data-side='left'] {
    animation-name: slideRightAndFade;
  }

  @keyframes slideUpAndFade {
    from {
      opacity: 0;
      transform: translateY(2px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes slideRightAndFade {
    from {
      opacity: 0;
      transform: translateX(-2px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes slideDownAndFade {
    from {
      opacity: 0;
      transform: translateY(-2px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes slideLeftAndFade {
    from {
      opacity: 0;
      transform: translateX(2px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
}

// --- We export the theme variables to add them to the component renderer
:export {
  themeVars: t.json-stringify($themeVars);
}

```

--------------------------------------------------------------------------------
/packages/xmlui-devtools/src/editor/Editor.tsx:
--------------------------------------------------------------------------------

```typescript
import { Editor as MonacoEditor, useMonaco } from "@monaco-editor/react";
import type { CSSProperties } from "react";
import { useEffect } from "react";
import {
  xmluiThemeLight,
  xmluiThemeDark,
  xmluiGrammar,
  xmluiScriptGrammar,
} from "xmlui/syntax/monaco";

export type EditorProps = {
  readOnly?: boolean;
  language?: string;
  style?: CSSProperties;
  value?: string;
  saveViewState?: boolean;
  onChange?: any;
  onMount?: any;
  activeThemeTone?: string;
};

export const Editor = ({
  readOnly = true,
  language = "xmlui",
  value,
  onChange = () => {},
  onMount = () => {},
  saveViewState = false,
  activeThemeTone = "light",
}: EditorProps) => {
  const monaco = useMonaco();

  useEffect(() => {
    if (monaco) {
      //xmlui markup
      monaco.languages.register({ id: xmluiGrammar.id });
      monaco.languages.setMonarchTokensProvider(xmluiGrammar.id, xmluiGrammar.language);
      monaco.languages.setLanguageConfiguration(xmluiGrammar.id, xmluiGrammar.config);
      monaco.editor.defineTheme("xmlui-light", xmluiThemeLight);
      monaco.editor.defineTheme("xmlui-dark", xmluiThemeDark);
      if (language === "xmlui") {
        monaco.editor.setTheme(activeThemeTone === "dark" ? "xmlui-dark" : "xmlui-light");
      }
      //xmluiscript
      monaco.languages.register({ id: xmluiScriptGrammar.id });
      monaco.languages.setMonarchTokensProvider(xmluiScriptGrammar.id, xmluiScriptGrammar.language);
      monaco.languages.setLanguageConfiguration(xmluiScriptGrammar.id, xmluiScriptGrammar.config);
    }
  }, [monaco, language, activeThemeTone]);

  return (
    <MonacoEditor
      saveViewState={saveViewState}
      onChange={onChange}
      onMount={onMount}
      key={"devtools"}
      options={{
        readOnly: readOnly,
        scrollBeyondLastLine: false,
        minimap: { enabled: false },
        overviewRulerLanes: 0,
        hideCursorInOverviewRuler: true,
        stickyScroll: { enabled: false },
      }}
      language={language}
      value={value}
    />
  );
};

```

--------------------------------------------------------------------------------
/xmlui/tests/parsers/scripting/process-event.test.ts:
--------------------------------------------------------------------------------

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

import {
  ArrowExpressionStatement,
  T_ARROW_EXPRESSION,
  T_ARROW_EXPRESSION_STATEMENT,
  T_EXPRESSION_STATEMENT,
} from "../../../src/components-core/script-runner/ScriptingSourceTree";
import { processStatementQueueAsync } from "../../../src/components-core/script-runner/process-statement-async";
import { createEvalContext, parseStatements } from "./test-helpers";

describe("Process statements", () => {
  it("Event with arrow function", async () => {
    // --- Arrange
    const source = "(x, y) => 2 * x + y";
    const evalContext = createEvalContext({
      localContext: {},
      eventArgs: [123, 1],
    });
    const statements = parseStatements(source);
    if (
      statements?.length !== 1 ||
      statements[0].type !== T_EXPRESSION_STATEMENT ||
      statements[0].expr.type !== T_ARROW_EXPRESSION
    ) {
      assert.fail("Arrow expression expected");
    }

    // --- Act
    const arrowStmt = {
      type: T_ARROW_EXPRESSION_STATEMENT,
      expr: statements[0].expr,
    } as ArrowExpressionStatement;
    const diag = await processStatementQueueAsync([arrowStmt], evalContext);

    // --- Assert
    const thread = evalContext.mainThread;
    expect(thread!.blocks!.length).equal(1);
    expect(thread!.blocks![0].returnValue).equal(247);

    expect(diag.processedStatements).equal(1);
    expect(diag.maxLoops).equal(0);
    expect(diag.maxBlocks).equal(1);
    expect(diag.maxQueueLength).equal(1);
    expect(diag.clearToLabels).equal(0);
    expect(diag.unshiftedItems).equal(0);
  });

  it("Event issue", async () => {
    // --- Arrange
    const source = "(() => {let z = 0; while(z < 3) {console.log(z); z++}})()";
    const evalContext = createEvalContext({
      localContext: {},
      eventArgs: [123, 1],
    });
    const statements = parseStatements(source);
    await processStatementQueueAsync(statements, evalContext);

    // --- Assert
    expect(evalContext.mainThread!.blocks![0].returnValue).equal(undefined);
  });
});

```

--------------------------------------------------------------------------------
/xmlui/src/components-core/abstractions/treeAbstractions.ts:
--------------------------------------------------------------------------------

```typescript
export interface TreeNode {
  id: string | number;
  key: string | number;
  path: any[];
  displayName?: string;
  children?: TreeNode[];
  parentIds: (string | number)[];
  selectable: boolean;
  [x: string]: any;
}

export type TreeItem = {
  id: string | number;
  children?: Array<TreeItem>;
  [x: string]: any;
};

export type UnPackedTreeData = {
  treeData: Array<TreeNode>;
  treeItemsById: Record<string | number, TreeNode>;
};

export interface FlatTreeNode extends TreeNode {
  isExpanded: boolean;
  depth: number;
  hasChildren: boolean;
}

// New interfaces for Tree component refactoring
export interface TreeFieldConfig {
  idField: string;
  labelField: string;
  iconField?: string;
  iconExpandedField?: string;
  iconCollapsedField?: string;
  parentField?: string;
  childrenField?: string;
  selectableField?: string;
  dynamicField?: string;
}

export interface TreeSelectionEvent {
  previousNode: FlatTreeNode | null;
  newNode: FlatTreeNode | null;
}

export type TreeDataFormat = 'flat' | 'hierarchy';

export type DefaultExpansion = 'none' | 'all' | 'first-level' | (string | number)[];

// Node loading states for dynamic node handling
export type NodeLoadingState = 'unloaded' | 'loading' | 'loaded';

// Extended FlatTreeNode with loading state information
export interface FlatTreeNodeWithState extends FlatTreeNode {
  loadingState: NodeLoadingState;
}

export interface TreeNodeInfo {
  id: string | number;           // Source data ID
  item: any;           // Original source item
  depth: number;       // Nesting depth (0-based)
  isExpanded: boolean; // Current expansion state
  hasChildren: boolean;// Whether node has children
  isSelected: boolean; // Whether node is selected
  path: (string | number)[];      // Path from root (source IDs)
  parentId?: string | number;   // Parent node ID (if any)
  childrenIds: (string | number)[]; // Direct children IDs
}

export interface TreeStats {
  totalNodes: number;
  maxDepth: number;
  expandedNodes: number;
  visibleNodes: number;
  rootNodes: number;
}

```

--------------------------------------------------------------------------------
/.github/workflows/run-smoke-tests.yml:
--------------------------------------------------------------------------------

```yaml
name: Smoke Tests (e2e smoke tests, unit tests)

concurrency: # Concurrency ensures that only a single job or workflow using the same concurrency group will run at a time.
  group: component-e2e-testing-smoke
  cancel-in-progress: true

on:
  workflow_dispatch:
  push:
    branches: [main]
jobs:
  test:
    if: |
      github.event_name == 'workflow_dispatch' ||
      (
        github.event_name == 'push' &&
        !contains(github.event.head_commit.message, 'Version Packages for Stable Release') &&
        !contains(github.event.head_commit.message, 'chore: version packages for stable release')
      )
    timeout-minutes: 60
    runs-on: ubuntu-latest-8-core
    env:
      NODE_OPTIONS: "--max-old-space-size=8192"
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: "npm"
      - name: Install node dependencies
        run: npm ci --prefer-offline
      - name: Cache for Turbo
        uses: rharkor/caching-for-turbo@v2.3.1
      - name: Store Playwright's Version
        run: |
          PLAYWRIGHT_VERSION=$(npm ls @playwright/test | grep @playwright | sed 's/.*@//' | sort | head -n 1)
          echo "Playwright's Version: $PLAYWRIGHT_VERSION"
          echo "PLAYWRIGHT_VERSION=$PLAYWRIGHT_VERSION" >> $GITHUB_ENV
      - name: Cache Playwright Browsers for Playwright's Version
        id: cache-playwright-browsers
        uses: actions/cache@v4
        with:
          path: ~/.cache/ms-playwright
          key: playwright-browsers-${{ env.PLAYWRIGHT_VERSION }}
      - name: Install Playwright Browsers
        if: steps.cache-playwright-browsers.outputs.cache-hit != 'true'
        run: npx playwright install --with-deps
      - name: ensure we can build xmlui and the extensions
        run: npm run build-xmlui
      - name: run the smoke tests
        run: npm run test-smoke
      - uses: actions/upload-artifact@v4
        with:
          name: playwright-report
          path: xmlui/playwright-report/
          retention-days: 30

```

--------------------------------------------------------------------------------
/xmlui/src/components-core/event-handlers.ts:
--------------------------------------------------------------------------------

```typescript
import type { ComponentMetadata } from "../abstractions/ComponentDefs";
import type { LookupEventHandlerFn } from "../abstractions/RendererDefs";
import type { EventHandler} from "react";
import { useCallback } from "react";
import { EMPTY_OBJECT } from "./constants";

/**
 * This hook sets up the mouse event handlers for the component
 * @param lookupEvent Function to lookup the event handler
 * @param shouldSkip Indicates if the event handlers should be skipped
 * @returns
 */
export function useMouseEventHandlers(lookupEvent: LookupEventHandlerFn, shouldSkip: boolean) {
  // *** Because we use nested React hooks, we cannot use an early return
  // *** when shouldSkip is true.
  const onClick = useEventHandler("click", lookupEvent, shouldSkip);
  const onMouseLeave = useEventHandler("mouseLeave", lookupEvent, shouldSkip);
  const onMouseEnter = useEventHandler("mouseEnter", lookupEvent, shouldSkip);
  const onDoubleClick = useEventHandler("doubleClick", lookupEvent, shouldSkip);

  if (shouldSkip) {
    return EMPTY_OBJECT;
  }

  return Object.fromEntries(
    Object.entries({
      onClick,
      onMouseLeave,
      onMouseEnter,
      onDoubleClick,
    }).filter(([, value]) => value !== undefined)
  );

  // --- Creates a particular event handler
  function useEventHandler<TMd extends ComponentMetadata>(
    eventName: string,
    lookupEvent: LookupEventHandlerFn<TMd>,
    shouldSkip: boolean,
  ) {
    // *** Because we use nested React hooks, we cannot use an early return
    // *** when shouldSkip is true.
    const onEvent = shouldSkip
      ? undefined
      : lookupEvent(eventName as keyof NonNullable<TMd["events"]>);
    const eventHandler: EventHandler<any> = useCallback(
      (event) => {
        // If the event handler is not defined, we do nothing
        if (onEvent) {
          if (typeof event.stopPropagation === "function") {
            event?.stopPropagation();
          }
          onEvent(event);
        }
      },
      [onEvent],
    );
    return !onEvent ? undefined : eventHandler;
  }
}

```

--------------------------------------------------------------------------------
/xmlui/tests-e2e/state-var-scopes.spec.ts:
--------------------------------------------------------------------------------

```typescript
import { test, expect } from "../src/testing/fixtures";

test("vars shadowing works", async ({ initTestBed, page }) => {
  await initTestBed(`
    <Stack var.x="x in outer stack" var.y="y in outer stack">
      <Stack var.y="y in inner stack">
        <Button testId="button" onClick="y = 123">change y in inner stack</Button>
        <Text testId="y_in_inner_stack">{y}</Text>
      </Stack>
      <Text testId="y_in_outer_stack">{y}</Text>
    </Stack>
  `);
  await page.getByTestId("button").click();
  await expect(page.getByTestId("y_in_inner_stack")).toHaveText("123");
  await expect(page.getByTestId("y_in_outer_stack")).toHaveText("y in outer stack");
});

test("inner input is available in the file (implicit containers because of vars)", async ({
  initTestBed,
  page,
}) => {
  await initTestBed(`
    <Fragment>
      <Stack var.x="x in outer stack" var.y="y in outer stack">
        <Stack var.y="y in inner stack">
          <TextBox id="textbox"/>
        </Stack>
      </Stack>
      <Text testId="textbox_value_outside">{textbox.value}</Text>
    </Fragment>
  `);
  await page.getByTestId("textbox").getByRole("textbox").fill("textbox-value");
  await expect(page.getByTestId("textbox_value_outside")).toHaveText("textbox-value");
});

test("inner datasource is available in the file (implicit containers because of vars)", async ({
  initTestBed,
  page,
}) => {
  await initTestBed(
    `
    <Fragment>
      <Stack var.x="x in outer stack" var.y="y in outer stack">
        <Stack var.y="y in inner stack">
          <DataSource url="/data1" id="explicitDataSource"/>
        </Stack>
      </Stack>
      <Text testId="datasource_value_outside">{explicitDataSource.value}</Text>
    </Fragment>
    `,
    {
      apiInterceptor: {
        operations: {
          "load-api-data1": {
            url: "/data1",
            method: "get",
            handler: `()=>{
            return 'data1';
          }`,
          },
        },
      },
    },
  );
  await expect(page.getByTestId("datasource_value_outside")).toHaveText("data1");
});

```

--------------------------------------------------------------------------------
/docs/public/pages/intro.md:
--------------------------------------------------------------------------------

```markdown
# Introduction

XMLUI is a framework for building user interfaces declaratively, with XML markup and flexible theming. XMLUI apps are:

- **Easy to create**. Build on the web platform with little or no knowledge of React or CSS.
- **Clean and modern**. Enjoy themes that look great out of the box and are easy to modify. Create experiences that meet expectations for modern web apps.
- **Connected**. Read and write APIs with little or no scripting.
- **Modular**. Use a comprehensive suite of [components](/components/_overview) that you can extend with — again! — little or no scripting.
- **Easy to deploy**. Just drop a handful of files onto a static webserver.

This paragraph is static text displayed by XMLUI's [Markdown](/components/Markdown) component.

This list is a live report on the status of London's tube stations.

```xmlui-pg name="London Tube Status"
<App>
  <List data="https://api.tfl.gov.uk/line/mode/tube/status">
     <Text>{$item.name}: {$item.lineStatuses[0].statusSeverityDescription}</Text>
  </List>
</App>
```

When you reload the page you'll see fresh data.

> [!INFO]
> You can use the ![](/resources/pg-popout.svg) icon to open live elements, like the London Tube Status report, in a playground where you read and edit the XMLUI markup.

This is the XMLUI markup you'll see in the playground.

```xmlui
<List data="https://api.tfl.gov.uk/line/mode/tube/status">
  <Text>{$item.name}: {$item.lineStatuses[0].statusSeverityDescription}</Text>
</List>
```

The [List](/components/List) component fetches JSON from a <a href="https://api.tfl.gov.uk/line/mode/tube/status" target="_blank">REST endpoint</a>, iterates through the array of objects returned from the API, and updates the [context variable](context-variables) called `$item` for each object. The [Text](/components/Text) component uses JavaScript dot notation and array indexing to extract station names and statuses from each `$item`.

In this case the URL is static. In the next chapter you'll see how a data URL can vary to deliver changing data in response to UI interaction.

```

--------------------------------------------------------------------------------
/xmlui/src/components/Stack/StackNative.tsx:
--------------------------------------------------------------------------------

```typescript
import { type CSSProperties, forwardRef, type ReactNode, type Ref } from "react";
import classnames from "classnames";

import styles from "./Stack.module.scss";

import { useContentAlignment } from "../../components-core/component-hooks";
import { useOnMount } from "../../components-core/utils/hooks";

export const DEFAULT_ORIENTATION = "vertical";

export const defaultProps = {
  orientation: DEFAULT_ORIENTATION,
  reverse: false,
  hoverContainer: false,
  visibleOnHover: false,
};

type Props = {
  children: ReactNode;
  orientation?: string;
  uid?: string;
  horizontalAlignment?: string;
  verticalAlignment?: string;
  style?: CSSProperties;
  className?: string;
  reverse?: boolean;
  hoverContainer?: boolean;
  visibleOnHover?: boolean;
  onClick?: any;
  onMount?: any;
};

// =====================================================================================================================
// Stack React component

export const Stack = forwardRef(function Stack(
  {
    uid,
    children,
    orientation = defaultProps.orientation,
    horizontalAlignment,
    verticalAlignment,
    style,
    reverse = defaultProps.reverse,
    hoverContainer = defaultProps.hoverContainer,
    visibleOnHover = defaultProps.visibleOnHover,
    onClick,
    onMount,
    className,
    ...rest
  }: Props,
  ref: Ref<any>,
) {
  useOnMount(onMount);
  const { horizontal, vertical } = useContentAlignment(
    orientation,
    horizontalAlignment,
    verticalAlignment,
  );
  return (
    <div
      {...rest}
      onClick={onClick}
      ref={ref}
      style={style}
      className={classnames(
        className,
        styles.base,
        {
          [styles.vertical]: orientation === "vertical",
          [styles.horizontal]: orientation === "horizontal",
          [styles.reverse]: reverse,
          [styles.hoverContainer]: hoverContainer,
          "display-on-hover": visibleOnHover,
          [styles.handlesClick]: !!onClick,
        },
        horizontal ?? "",
        vertical ?? "",
      )}
    >
      {children}
    </div>
  );
});

```

--------------------------------------------------------------------------------
/xmlui/src/components-core/theming/themeVars.ts:
--------------------------------------------------------------------------------

```typescript
/**
 * The sole purpose of this module is to provide an object with the available keys of theme SCSS variables and the
 * prefix of the theme.
 */
import themeVars from "./themeVars.module.scss";

/**
 * This function extracts CSS variables from the specified SCSS input. It uses a hack to convert the CSS input to JSON
 * and then calls a JSON parser to create the desired object.
 * @param scssStr The scss input
 */
export function parseScssVar(scssStr: any) {
  if (!scssStr || typeof scssStr !== typeof "") {
    return scssStr;
  }

  // Lists and maps are surrounded by single quotes, e.g. "'[ \"string in list\", 5, \"5px\" ]'"
  // Remove them if they exist so they can be parsed correctly.
  let jsValue = scssStr.replace(/(^['"])|(['"]$)/g, "");

  try {
    // JSON-formatted string from within SCSS file
    return JSON.parse(jsValue);
  } catch (errorParsingJsonGeneratedInUtilScssFile) {
    try {
      // Value was likely an SCSS literal string; attempt parsing it manually.
      // Example: inspect($my-map) => '(num: 10, numWithUnits: 5px, str: hello, color: #fff, "keyAsStr": false, other: null)'
      return JSON.parse(
        scssStr
          .replace("(", "{")
          .replace(")", "}")
          // JSON values: convert any collection of word characters followed by a comma or bracket to a string
          .replace(/: ?([^,}]+)([,}])/g, ': "$1"$2')
          // JSON keys: space/bracket/comma as first character, not already a string, anything not colon or
          // space (rules out JSON values), ended by colon
          .replace(/([\s{,])(?!")([^:\s]+)+:/g, '$1"$2":'),
      );
    } catch (errorParsingScssStringLiteral) {
      return jsValue;
    }
  }
}

let keyPrefix = parseScssVar(themeVars.keyPrefix) || "";
let vars = parseScssVar(themeVars.themeVars);

/**
 * Export the desired SCSS variables and prefix
 */
const theme = {
  keyPrefix: keyPrefix,
  themeVars: vars,
};

export function getVarKey(varName: string) {
  if (keyPrefix) {
    return `--${keyPrefix}-${varName}`;
  }
  return `--${varName}`;
}

export default theme;

```

--------------------------------------------------------------------------------
/packages/xmlui-playground/src/providers/ToastProvider.tsx:
--------------------------------------------------------------------------------

```typescript
import { createContext, useState, type ReactNode } from "react";
import { noop } from "lodash-es";
import * as RadixToast from "@radix-ui/react-toast";
import styles from "./Toast.module.scss";
import { MdOutlineClose } from "react-icons/md";
import classnames from "classnames";

type ToastMessage = {
  type: "success" | "warning" | "error" | "info";
  title?: string;
  description: string;
};

type ToastContextDefinition = {
  toastMessage: ToastMessage | null;
  showToast: (toastMessage: ToastMessage) => void;
};

export const ToastContext = createContext<ToastContextDefinition>({
  toastMessage: null,
  showToast: noop,
});

type ToastProviderProps = {
  children: ReactNode;
};

export const ToastProvider = ({ children }: ToastProviderProps) => {
  const [toastMessage, setToastMessage] = useState<ToastMessage | null>(null);
  const [open, setOpen] = useState(false);

  const showToast = (toastMessage: ToastMessage) => {
    setToastMessage(toastMessage);
    setOpen(true);
  };

  return (
    <ToastContext.Provider value={{ toastMessage, showToast }}>
      <RadixToast.Provider swipeDirection="right">
        {children}
        <RadixToast.Root
          open={open}
          onOpenChange={setOpen}
          className={classnames(styles.ToastRoot, {
            [styles.success]: toastMessage?.type === "success",
            [styles.warning]: toastMessage?.type === "warning",
            [styles.error]: toastMessage?.type === "error",
          })}
        >
          <RadixToast.Close className={styles.ToastClose}>
            <MdOutlineClose />
          </RadixToast.Close>
          {toastMessage?.title && (
            <RadixToast.Title className={styles.ToastTitle}>{toastMessage?.title}</RadixToast.Title>
          )}
          <RadixToast.Description className={styles.ToastDescription} asChild>
            <div>{toastMessage?.description}</div>
          </RadixToast.Description>
        </RadixToast.Root>
        <RadixToast.Viewport className={styles.ToastViewport} />
      </RadixToast.Provider>
    </ToastContext.Provider>
  );
};

```

--------------------------------------------------------------------------------
/xmlui/src/components/Icon/Icon.tsx:
--------------------------------------------------------------------------------

```typescript
import { createComponentRenderer } from "../../components-core/renderers";
import styles from "./Icon.module.scss";
import { parseScssVar } from "../../components-core/theming/themeVars";
import Icon from "./IconNative";
import { createMetadata, d } from "../metadata-helpers";

const COMP = "Icon";

export const IconMd = createMetadata({
  status: "stable",
  description:
    "`Icon` displays scalable vector icons from XMLUI's built-in icon registry " +
    "using simple name references. Icons are commonly used in buttons, navigation " +
    "elements, and status indicators.",
  props: {
    name: d(
      "This string property specifies the name of the icon to display. All icons have " +
        "unique, case-sensitive names identifying them. If the icon name is not set, the " +
        "`fallback` value is used.",
    ),
    size: {
      description:
        `This property defines the size of the \`${COMP}\`. Note that setting the \`height\` and/or ` +
        `the \`width\` of the component will override this property. You can use az explicit size ` +
        "value (e.g., 32px) or one of these predefined values: `xs`, `sm`, `md`, `lg`.",
      availableValues: ["xs", "sm", "md", "lg"],
    },
    fallback: d(
      "This optional property provides a way to handle situations when the icon with the provided " +
        "[icon name](#name) name does not exist. If the icon cannot be found, no icon is displayed.",
    ),
  },
  events: {
    click: d("This event is triggered when the icon is clicked."),
  },

  themeVars: parseScssVar(styles.themeVars),
  defaultThemeVars: {
    [`size-${COMP}`]: "1.2em",
  },
});

export const iconComponentRenderer = createComponentRenderer(
  COMP,
  IconMd,
  ({ node, extractValue, className, lookupEventHandler }) => {
    return (
      <Icon
        name={extractValue.asOptionalString(node.props.name)}
        size={extractValue(node.props.size)}
        className={className}
        fallback={extractValue.asOptionalString(node.props.fallback)}
        onClick={lookupEventHandler("click")}
      />
    );
  },
);

```

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

```markdown
# Spinner [#spinner]

`Spinner` is an animated indicator that represents an action in progress with no deterministic progress value.

While it is visible, the action is yet to be completed; on completion, the UI logic may opt to remove the component.

## Using the `Spinner` [#using-the-spinner]

```xmlui-pg copy display name="Example: using Spinner"
<App>
  <Spinner />
</App>
```

>[!INFO]
> `Spinner` ignores the `width`, `minWidth`, `maxWidth`, `height`, `minHeight`, and `maxHeight` properties. If you want to change its size, use the `size-Spinner` theme variable (see details is the [Styling](#styling) section).

## Properties [#properties]

### `delay` (default: 400) [#delay-default-400]

The delay in milliseconds before the spinner is displayed.

Use the buttons to toggle between the two `Spinners`.

```xmlui-pg copy {8-9} display name="Example: delay"
<App>
  <variable name="noDelay" value="{true}" />
  <variable name="yesDelay" value="{false}" />
  <HStack gap="$space-0_5">
    <Button label="No delay" onClick="noDelay = true; yesDelay = false;" />
    <Button label="1000 ms delay" onClick="noDelay = false; yesDelay = true;" />
  </HStack>
  <Spinner when="{noDelay}" delay="0" />
  <Spinner when="{yesDelay}" delay="1000" />
</App>
```

### `fullScreen` (default: false) [#fullscreen-default-false]

If set to `true`, the component will be rendered in a full screen container.

```xmlui-pg copy display name="Example: fullScreen" height="200px"
<App>
  <Spinner fullScreen="true" />
</App>
```

## Events [#events]

This component does not have any events.

## Exposed Methods [#exposed-methods]

This component does not expose any methods.

## Styling [#styling]

### Theme Variables [#theme-variables]

| Variable | Default Value (Light) | Default Value (Dark) |
| --- | --- | --- |
| [borderColor](../styles-and-themes/common-units/#color)-Spinner | $color-surface-400 | $color-surface-400 |
| [size](../styles-and-themes/common-units/#size)-Spinner | $space-10 | $space-10 |
| [thickness](../styles-and-themes/common-units/#size)-Spinner | $space-0_5 | $space-0_5 |

```

--------------------------------------------------------------------------------
/xmlui/src/components/Theme/Theme.tsx:
--------------------------------------------------------------------------------

```typescript
import type { ThemeTone } from "../../abstractions/ThemingDefs";
import { createComponentRenderer } from "../../components-core/renderers";
import { createMetadata, d } from "../metadata-helpers";
import { Theme, defaultProps } from "./ThemeNative";

const COMP = "Theme";

export const ThemeMd = createMetadata({
  status: "stable",
  description:
    "`Theme` creates styling contexts to customize the appearance of nested " +
    "components without using CSS.",
  allowArbitraryProps: true,
  props: {
    themeId: d(`This property specifies which theme to use by setting the theme's id.`),
    tone: {
      description: "This property allows the setting of the current theme's tone.",
      availableValues: ["light", "dark"],
      valueType: "string",
      defaultValue: "light",
    },
    root: d(
      `This property indicates whether the component is at the root of the application.`,
      undefined,
      "boolean",
      defaultProps.root,
    ),
    applyIf: d(
      `This property controls whether the theme wrapper is applied. When true (default), the theme wraps the children. When false, children are rendered unwrapped.`,
      undefined,
      "boolean",
      true,
    ),
  },
  opaque: true,
});

export const themeComponentRenderer = createComponentRenderer(
  COMP,
  ThemeMd,
  ({ node, extractValue, renderChild, layoutContext, appContext }) => {
    const { tone, ...restProps } = node.props;
    const toastDuration = appContext?.appGlobals?.notifications?.duration;
    let themeTone = extractValue.asOptionalString(tone);
    if (themeTone && themeTone !== "dark") {
      themeTone = "light";
    }
    return (
      <Theme
        id={extractValue.asOptionalString(node.props.themeId)}
        isRoot={extractValue.asOptionalBoolean(node.props.root)}
        applyIf={extractValue.asOptionalBoolean(node.props.applyIf)}
        layoutContext={layoutContext}
        renderChild={renderChild}
        tone={themeTone as ThemeTone}
        toastDuration={toastDuration}
        themeVars={extractValue(restProps)}
        node={node}
      />
    );
  },
);

```

--------------------------------------------------------------------------------
/xmlui/src/components/Charts/Tooltip/TooltipContent.tsx:
--------------------------------------------------------------------------------

```typescript
import type React from "react";
import { forwardRef } from "react";
import styles from "./TooltipContent.module.scss";
import classnames from "classnames";
import type { Tooltip as RTooltip } from "recharts";

export const TooltipContent = forwardRef<
  HTMLDivElement,
  React.ComponentProps<typeof RTooltip> &
    React.ComponentProps<"div"> & {
      hideLabel?: boolean;
      hideIndicator?: boolean;
      indicator?: "line" | "dot" | "dashed";
      nameKey?: string;
      labelKey?: string;
    }
>(function ({ active, payload, indicator = "dot", hideLabel = false, label, color }, ref) {
  if (active && payload && payload.length) {
    const nestLabel = payload.length === 1 && indicator !== "dot";
    return (
      <div className={styles.tooltipContainer} ref={ref}>
        {!hideLabel && <p className="label">{label}</p>}

        <div className={styles.gridGap}>
          {payload?.map((item: any, index: any) => {
            const indicatorColor = color || item.payload?.fill || item.color;
            return (
              <div key={index} className={styles.itemContainer}>
                <div
                  className={classnames(styles.indicator, {
                    [styles.dot]: indicator === "dot",
                    [styles.line]: indicator === "line",
                    [styles.dashed]: indicator === "dashed",
                    [styles.nestDashed]: nestLabel && indicator === "dashed",
                  })}
                  style={{ backgroundColor: indicatorColor, borderColor: indicatorColor }}
                />
                <div className={styles.valueContainer}>
                  <div className={styles.labelGrid}>
                    <span className={styles.mutedText}>{item.name}</span>
                  </div>
                  {item.value && (
                    <span className={styles.valueText}>{item.value.toLocaleString()}</span>
                  )}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    );
  }

  return null;
});

TooltipContent.displayName = "TooltipContent";

```

--------------------------------------------------------------------------------
/blog/public/web.config:
--------------------------------------------------------------------------------

```
<?xml version="1.0" encoding="utf-8" ?>
<configuration>
    <system.webServer>
       <staticContent>
            <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00" />

            <mimeMap fileExtension=".json" mimeType="application/json" />
            <mimeMap fileExtension=".rss" mimeType="application/rss+xml" />
            <mimeMap fileExtension=".ts" mimeType="application/x-typescript" />
            <mimeMap fileExtension=".xmlui" mimeType="application/xmlui" />
            <mimeMap fileExtension=".xmlui.xs" mimeType="application/xmlui-xs" />
            <mimeMap fileExtension="woff" mimeType="application/font-woff" />
            <mimeMap fileExtension="woff2" mimeType="application/font-woff2" />
            <mimeMap fileExtension="md" mimeType="text/markdown" />
       </staticContent>
       <rewrite>
            <rules>
                <rule name="RewriteHTML" stopProcessing="true">
                    <match url="^([^.]+)$" />
                    <conditions>
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                        <add input="{REQUEST_FILENAME}.html" matchType="IsFile" />
                    </conditions>
                    <action type="Rewrite" url="{R:1}.html" />
                </rule>
                <remove name="pushState" />
                <rule name="pushState" stopProcessing="true">
                    <match url=".*" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/" />
                </rule>
                <rule name="Playground" stopProcessing="true">
                    <match url="^playground$" />
                    <action type="Rewrite" url="/playground" />
                </rule>
            </rules>
       </rewrite>
    </system.webServer>
</configuration>

```

--------------------------------------------------------------------------------
/docs/public/web.config:
--------------------------------------------------------------------------------

```
<?xml version="1.0" encoding="utf-8" ?>
<configuration>
    <system.webServer>
       <staticContent>
            <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00" />

            <mimeMap fileExtension=".json" mimeType="application/json" />
            <mimeMap fileExtension=".rss" mimeType="application/rss+xml" />
            <mimeMap fileExtension=".ts" mimeType="application/x-typescript" />
            <mimeMap fileExtension=".xmlui" mimeType="application/xmlui" />
            <mimeMap fileExtension=".xmlui.xs" mimeType="application/xmlui-xs" />
            <mimeMap fileExtension="woff" mimeType="application/font-woff" />
            <mimeMap fileExtension="woff2" mimeType="application/font-woff2" />
            <mimeMap fileExtension="md" mimeType="text/markdown" />
       </staticContent>
       <rewrite>
            <rules>
                <rule name="RewriteHTML" stopProcessing="true">
                    <match url="^([^.]+)$" />
                    <conditions>
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                        <add input="{REQUEST_FILENAME}.html" matchType="IsFile" />
                    </conditions>
                    <action type="Rewrite" url="{R:1}.html" />
                </rule>
                <remove name="pushState" />
                <rule name="pushState" stopProcessing="true">
                    <match url=".*" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/" />
                </rule>
                <rule name="Playground" stopProcessing="true">
                    <match url="^playground$" />
                    <action type="Rewrite" url="/playground" />
                </rule>
            </rules>
       </rewrite>
    </system.webServer>
</configuration>

```

--------------------------------------------------------------------------------
/xmlui/tests/language-server/hover.test.ts:
--------------------------------------------------------------------------------

```typescript
import { describe, expect, it } from "vitest";
import { handleHoverCore } from "../../src/language-server/services/hover";
import { createXmlUiParser } from "../../src/parsers/xmlui-parser";
import { mockMetadataProvider } from "./mockData";
import { MarkupContent } from "vscode-languageserver";

describe("Hover", () => {
  it("documents component description", () => {
    const docs = hoverAtPoundSign("<Butt#on />").value;
    const expected = mockMetadataProvider.getComponent("Button").getMetadata().description;

    expect(docs).toContain(expected);
  });

  it("documents prop description", () => {
    const docs = hoverAtPoundSign("<Button lab#el='Hello' />").value;
    const expected = mockMetadataProvider.getComponent("Button").getAttr("label").description;

    expect(docs).toContain(expected);
  });

  it("documents event description", () => {
    const docs = hoverAtPoundSign("<Button onCl#ick='Hello' />").value;
    const expected = mockMetadataProvider.getComponent("Button").getAttr("onClick").description;

    expect(docs).toContain(expected);
  });

  it("documents implicit prop description", () => {
    const docs = hoverAtPoundSign("<Button dat#a='Hello' />").value;
    const expected = mockMetadataProvider.getComponent("Button").getAttr("data").description;

    expect(docs).toContain(expected);
  });

  it("documents layout prop description", () => {
    const docs = hoverAtPoundSign("<Button wid#th='Hello' />").value;
    const expected = mockMetadataProvider.getComponent("Button").getAttr("width").description;

    expect(docs).toContain(expected);
  });
});

function hoverAtPoundSign(source: string) {
  const cursorIndicator = "#";
  const position = source.indexOf(cursorIndicator);
  if (position === -1) {
    throw new Error(`No '${cursorIndicator}' found in the tested source to denote the position of the cursor.`);
  }
  source = source.replace(cursorIndicator, "");
  const parser = createXmlUiParser(source)

  const { node } = parser.parse()

  return handleHoverCore({ getText: parser.getText, node, metaByComp: mockMetadataProvider }, position)
}

```

--------------------------------------------------------------------------------
/xmlui/src/components/ToneSwitch/ToneSwitchNative.tsx:
--------------------------------------------------------------------------------

```typescript
import { forwardRef } from "react";
import { useThemes } from "../../components-core/theming/ThemeContext";
import Icon from "../Icon/IconNative";
import { Toggle } from "../Toggle/Toggle";
import styles from "./ToneSwitch.module.scss";
import classnames from "classnames";

// Default icons for light and dark modes
const DEFAULT_LIGHT_ICON = "sun";
const DEFAULT_DARK_ICON = "moon";

export type ToneSwitchProps = {
  /**
   * Icon to display for light mode
   * @default "sun"
   */
  iconLight?: string;

  /**
   * Icon to display for dark mode
   * @default "moon"
   */
  iconDark?: string;
  className?: string;
};

export const ToneSwitch = forwardRef<HTMLDivElement, ToneSwitchProps>(function ToneSwitch({
  iconLight = DEFAULT_LIGHT_ICON,
  iconDark = DEFAULT_DARK_ICON,
  className,
  ...rest
}: ToneSwitchProps, ref) {
  const { activeThemeTone, setActiveThemeTone } = useThemes();
  //console.log('ToneSwitch render - activeThemeTone:', activeThemeTone); // Debug log

  const handleChange = (isDark: boolean) => {
    setActiveThemeTone(isDark ? "dark" : "light");
  };

  return (
    <div {...rest} ref={ref} style={{ width: "fit-content", display: "inline-block" }} className={className}>
      <Toggle
        value={activeThemeTone === "dark"}
        onDidChange={handleChange}
        variant="switch"
        style={{ width: "fit-content" }}
        inputRenderer={(contextVars) => {
          //console.log('ToneSwitch contextVars:', contextVars); // Debug log
          return (
            <div
              className={classnames(styles.iconSwitch, {
                [styles.light]: !contextVars.$checked,
                [styles.dark]: contextVars.$checked,
              })}
            >
              <div className={styles.iconThumb}>
                {!contextVars.$checked ? (
                  <Icon name={iconLight} fallback="sun" className={styles.icon} />
                ) : (
                  <Icon name={iconDark} fallback="moon" className={styles.icon} />
                )}
              </div>
            </div>
          );
        }}
      />
    </div>
  );
});

```

--------------------------------------------------------------------------------
/docs/public/resources/files/monthly-status.json:
--------------------------------------------------------------------------------

```json
[{"month":"2022-06","paid_revenue":2243.97,"sent_revenue":0},{"month":"2022-07","paid_revenue":815,"sent_revenue":0},{"month":"2022-08","paid_revenue":2285,"sent_revenue":0},{"month":"2022-09","paid_revenue":1050,"sent_revenue":0},{"month":"2022-10","paid_revenue":1585,"sent_revenue":0},{"month":"2022-11","paid_revenue":473.81,"sent_revenue":660},{"month":"2022-12","paid_revenue":180,"sent_revenue":852.86},{"month":"2023-01","paid_revenue":1587.75,"sent_revenue":0},{"month":"2023-02","paid_revenue":845.05,"sent_revenue":0},{"month":"2023-03","paid_revenue":1419.54,"sent_revenue":0},{"month":"2023-04","paid_revenue":1000,"sent_revenue":0},{"month":"2023-05","paid_revenue":2301.41,"sent_revenue":0},{"month":"2023-06","paid_revenue":360,"sent_revenue":0},{"month":"2023-07","paid_revenue":1912.34,"sent_revenue":0},{"month":"2023-08","paid_revenue":1556.49,"sent_revenue":0},{"month":"2023-09","paid_revenue":1296.89,"sent_revenue":0},{"month":"2023-10","paid_revenue":1272.01,"sent_revenue":0},{"month":"2023-11","paid_revenue":1445,"sent_revenue":0},{"month":"2023-12","paid_revenue":108.3,"sent_revenue":0},{"month":"2024-01","paid_revenue":70,"sent_revenue":0},{"month":"2024-02","paid_revenue":4039.41,"sent_revenue":0},{"month":"2024-03","paid_revenue":1754.33,"sent_revenue":0},{"month":"2024-04","paid_revenue":1243.81,"sent_revenue":0},{"month":"2024-05","paid_revenue":568.57,"sent_revenue":0},{"month":"2024-06","paid_revenue":2818.28,"sent_revenue":0},{"month":"2024-07","paid_revenue":2818.69,"sent_revenue":0},{"month":"2024-08","paid_revenue":1226.97,"sent_revenue":0},{"month":"2024-09","paid_revenue":680,"sent_revenue":0},{"month":"2024-10","paid_revenue":940,"sent_revenue":0},{"month":"2024-11","paid_revenue":1208.35,"sent_revenue":0},{"month":"2024-12","paid_revenue":2475,"sent_revenue":0},{"month":"2025-01","paid_revenue":162.45,"sent_revenue":0},{"month":"2025-02","paid_revenue":882.73,"sent_revenue":555.04},{"month":"2025-03","paid_revenue":0,"sent_revenue":810},{"month":"2025-04","paid_revenue":700,"sent_revenue":0},{"month":"2025-05","paid_revenue":0,"sent_revenue":625}]

```

