This is page 5 of 143. Use http://codebase.md/xmlui-org/xmlui/assets/img/%7BfaviconUrl%7D?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-swa.yml
│       ├── deploy-docs.yml
│       ├── prepare-versions.yml
│       ├── release-packages.yml
│       ├── run-all-tests.yml
│       └── run-smoke-tests.yml
├── .gitignore
├── .prettierrc.js
├── .vscode
│   ├── launch.json
│   └── settings.json
├── blog
│   ├── .gitignore
│   ├── .gitkeep
│   ├── CHANGELOG.md
│   ├── extensions.ts
│   ├── index.html
│   ├── index.ts
│   ├── package.json
│   ├── public
│   │   ├── blog
│   │   │   ├── images
│   │   │   │   ├── an-advanced-codefence.gif
│   │   │   │   ├── an-advanced-codefence.mp4
│   │   │   │   ├── blog-page-component.png
│   │   │   │   ├── blog-scrabble.png
│   │   │   │   ├── codefence-runner.png
│   │   │   │   ├── integrated-blog-search.png
│   │   │   │   ├── lorem-ipsum.png
│   │   │   │   ├── playground-checkbox-source.png
│   │   │   │   ├── playground.png
│   │   │   │   ├── use-xmlui-mcp-to-find-a-howto.png
│   │   │   │   └── xmlui-demo-gallery.png
│   │   │   ├── introducing-xmlui.md
│   │   │   ├── lorem-ipsum.md
│   │   │   ├── newest-post.md
│   │   │   ├── older-post.md
│   │   │   ├── xmlui-playground.md
│   │   │   └── xmlui-powered-blog.md
│   │   ├── mockServiceWorker.js
│   │   ├── resources
│   │   │   ├── favicon.ico
│   │   │   ├── files
│   │   │   │   └── for-download
│   │   │   │       └── xmlui
│   │   │   │           └── xmlui-standalone.umd.js
│   │   │   ├── github.svg
│   │   │   ├── llms.txt
│   │   │   ├── logo-dark.svg
│   │   │   ├── logo.svg
│   │   │   ├── pg-popout.svg
│   │   │   ├── rss.svg
│   │   │   └── xmlui-logo.svg
│   │   ├── serve.json
│   │   ├── staticwebapp.config.json
│   │   └── web.config
│   ├── scripts
│   │   ├── download-latest-xmlui.js
│   │   ├── generate-rss.js
│   │   ├── get-releases.js
│   │   └── utils.js
│   ├── src
│   │   ├── components
│   │   │   ├── BlogOverview.xmlui
│   │   │   ├── BlogPage.xmlui
│   │   │   └── PageNotFound.xmlui
│   │   ├── config.ts
│   │   ├── Main.xmlui
│   │   └── themes
│   │       └── blog-theme.ts
│   └── tsconfig.json
├── CONTRIBUTING.md
├── docs
│   ├── .gitignore
│   ├── CHANGELOG.md
│   ├── ComponentRefLinks.txt
│   ├── content
│   │   ├── _meta.json
│   │   ├── components
│   │   │   ├── _meta.json
│   │   │   ├── _overview.md
│   │   │   ├── APICall.md
│   │   │   ├── App.md
│   │   │   ├── AppHeader.md
│   │   │   ├── AppState.md
│   │   │   ├── AutoComplete.md
│   │   │   ├── Avatar.md
│   │   │   ├── Backdrop.md
│   │   │   ├── Badge.md
│   │   │   ├── BarChart.md
│   │   │   ├── Bookmark.md
│   │   │   ├── Breakout.md
│   │   │   ├── Button.md
│   │   │   ├── Card.md
│   │   │   ├── Carousel.md
│   │   │   ├── ChangeListener.md
│   │   │   ├── Checkbox.md
│   │   │   ├── CHStack.md
│   │   │   ├── ColorPicker.md
│   │   │   ├── Column.md
│   │   │   ├── ContentSeparator.md
│   │   │   ├── CVStack.md
│   │   │   ├── DataSource.md
│   │   │   ├── DateInput.md
│   │   │   ├── DatePicker.md
│   │   │   ├── DonutChart.md
│   │   │   ├── DropdownMenu.md
│   │   │   ├── EmojiSelector.md
│   │   │   ├── ExpandableItem.md
│   │   │   ├── FileInput.md
│   │   │   ├── FileUploadDropZone.md
│   │   │   ├── FlowLayout.md
│   │   │   ├── Footer.md
│   │   │   ├── Form.md
│   │   │   ├── FormItem.md
│   │   │   ├── FormSection.md
│   │   │   ├── Fragment.md
│   │   │   ├── H1.md
│   │   │   ├── H2.md
│   │   │   ├── H3.md
│   │   │   ├── H4.md
│   │   │   ├── H5.md
│   │   │   ├── H6.md
│   │   │   ├── Heading.md
│   │   │   ├── HSplitter.md
│   │   │   ├── HStack.md
│   │   │   ├── Icon.md
│   │   │   ├── IFrame.md
│   │   │   ├── Image.md
│   │   │   ├── Items.md
│   │   │   ├── LabelList.md
│   │   │   ├── Legend.md
│   │   │   ├── LineChart.md
│   │   │   ├── Link.md
│   │   │   ├── List.md
│   │   │   ├── Logo.md
│   │   │   ├── Markdown.md
│   │   │   ├── MenuItem.md
│   │   │   ├── MenuSeparator.md
│   │   │   ├── ModalDialog.md
│   │   │   ├── NavGroup.md
│   │   │   ├── NavLink.md
│   │   │   ├── NavPanel.md
│   │   │   ├── NoResult.md
│   │   │   ├── NumberBox.md
│   │   │   ├── Option.md
│   │   │   ├── Page.md
│   │   │   ├── PageMetaTitle.md
│   │   │   ├── Pages.md
│   │   │   ├── Pagination.md
│   │   │   ├── PasswordInput.md
│   │   │   ├── PieChart.md
│   │   │   ├── ProgressBar.md
│   │   │   ├── Queue.md
│   │   │   ├── RadioGroup.md
│   │   │   ├── RealTimeAdapter.md
│   │   │   ├── Redirect.md
│   │   │   ├── Select.md
│   │   │   ├── Slider.md
│   │   │   ├── Slot.md
│   │   │   ├── SpaceFiller.md
│   │   │   ├── Spinner.md
│   │   │   ├── Splitter.md
│   │   │   ├── Stack.md
│   │   │   ├── StickyBox.md
│   │   │   ├── SubMenuItem.md
│   │   │   ├── Switch.md
│   │   │   ├── TabItem.md
│   │   │   ├── Table.md
│   │   │   ├── TableOfContents.md
│   │   │   ├── Tabs.md
│   │   │   ├── Text.md
│   │   │   ├── TextArea.md
│   │   │   ├── TextBox.md
│   │   │   ├── Theme.md
│   │   │   ├── TimeInput.md
│   │   │   ├── Timer.md
│   │   │   ├── ToneChangerButton.md
│   │   │   ├── ToneSwitch.md
│   │   │   ├── Tooltip.md
│   │   │   ├── Tree.md
│   │   │   ├── VSplitter.md
│   │   │   ├── VStack.md
│   │   │   ├── xmlui-animations
│   │   │   │   ├── _meta.json
│   │   │   │   ├── _overview.md
│   │   │   │   ├── Animation.md
│   │   │   │   ├── FadeAnimation.md
│   │   │   │   ├── FadeInAnimation.md
│   │   │   │   ├── FadeOutAnimation.md
│   │   │   │   ├── ScaleAnimation.md
│   │   │   │   └── SlideInAnimation.md
│   │   │   ├── xmlui-pdf
│   │   │   │   ├── _meta.json
│   │   │   │   ├── _overview.md
│   │   │   │   └── Pdf.md
│   │   │   ├── xmlui-spreadsheet
│   │   │   │   ├── _meta.json
│   │   │   │   ├── _overview.md
│   │   │   │   └── Spreadsheet.md
│   │   │   └── xmlui-website-blocks
│   │   │       ├── _meta.json
│   │   │       ├── _overview.md
│   │   │       ├── Carousel.md
│   │   │       ├── HelloMd.md
│   │   │       ├── HeroSection.md
│   │   │       └── ScrollToTop.md
│   │   └── extensions
│   │       ├── _meta.json
│   │       ├── xmlui-animations
│   │       │   ├── _meta.json
│   │       │   ├── _overview.md
│   │       │   ├── Animation.md
│   │       │   ├── FadeAnimation.md
│   │       │   ├── FadeInAnimation.md
│   │       │   ├── FadeOutAnimation.md
│   │       │   ├── ScaleAnimation.md
│   │       │   └── SlideInAnimation.md
│   │       └── xmlui-website-blocks
│   │           ├── _meta.json
│   │           ├── _overview.md
│   │           ├── Carousel.md
│   │           ├── 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.module.scss
│   │       │   ├── CodeSelector.tsx
│   │       │   ├── ConfirmationDialog.module.scss
│   │       │   ├── ConfirmationDialog.tsx
│   │       │   ├── Editor.tsx
│   │       │   ├── Header.module.scss
│   │       │   ├── Header.tsx
│   │       │   ├── Playground.tsx
│   │       │   ├── PlaygroundContent.module.scss
│   │       │   ├── PlaygroundContent.tsx
│   │       │   ├── PlaygroundNative.module.scss
│   │       │   ├── PlaygroundNative.tsx
│   │       │   ├── Preview.tsx
│   │       │   ├── StandalonePlayground.tsx
│   │       │   ├── StandalonePlaygroundNative.module.scss
│   │       │   ├── StandalonePlaygroundNative.tsx
│   │       │   ├── ThemeSwitcher.module.scss
│   │       │   ├── ThemeSwitcher.tsx
│   │       │   └── utils.ts
│   │       ├── providers
│   │       │   ├── Toast.module.scss
│   │       │   └── ToastProvider.tsx
│   │       ├── state
│   │       │   └── store.ts
│   │       ├── themes
│   │       │   └── theme.ts
│   │       └── utils
│   │           └── helpers.ts
│   ├── xmlui-search
│   │   ├── .gitignore
│   │   ├── CHANGELOG.md
│   │   ├── demo
│   │   │   └── Main.xmlui
│   │   ├── index.html
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   └── src
│   │       ├── index.tsx
│   │       ├── Search.module.scss
│   │       └── Search.tsx
│   ├── xmlui-spreadsheet
│   │   ├── .gitignore
│   │   ├── demo
│   │   │   └── Main.xmlui
│   │   ├── index.html
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   └── src
│   │       ├── index.tsx
│   │       ├── Spreadsheet.tsx
│   │       └── SpreadsheetNative.tsx
│   └── xmlui-website-blocks
│       ├── .gitignore
│       ├── CHANGELOG.md
│       ├── demo
│       │   ├── components
│       │   │   ├── HeroBackgroundBreakoutPage.xmlui
│       │   │   ├── HeroBackgroundsPage.xmlui
│       │   │   ├── HeroContentsPage.xmlui
│       │   │   ├── HeroTextAlignPage.xmlui
│       │   │   ├── HeroTextPage.xmlui
│       │   │   └── HeroTonesPage.xmlui
│       │   ├── Main.xmlui
│       │   └── themes
│       │       └── default.ts
│       ├── index.html
│       ├── index.ts
│       ├── meta
│       │   └── componentsMetadata.ts
│       ├── package.json
│       ├── public
│       │   └── resources
│       │       ├── building.jpg
│       │       └── xmlui-logo.svg
│       └── src
│           ├── Carousel
│           │   ├── Carousel.module.scss
│           │   ├── Carousel.tsx
│           │   ├── CarouselContext.tsx
│           │   └── CarouselNative.tsx
│           ├── FancyButton
│           │   ├── FancyButton.module.scss
│           │   ├── FancyButton.tsx
│           │   └── FancyButton.xmlui
│           ├── Hello
│           │   ├── Hello.tsx
│           │   ├── Hello.xmlui
│           │   └── Hello.xmlui.xs
│           ├── HeroSection
│           │   ├── HeroSection.module.scss
│           │   ├── HeroSection.spec.ts
│           │   ├── HeroSection.tsx
│           │   └── HeroSectionNative.tsx
│           ├── index.tsx
│           ├── ScrollToTop
│           │   ├── ScrollToTop.module.scss
│           │   ├── ScrollToTop.tsx
│           │   └── ScrollToTopNative.tsx
│           └── vite-env.d.ts
├── playwright.config.ts
├── README.md
├── tools
│   ├── codefence
│   │   └── xmlui-code-fence-docs.md
│   ├── create-app
│   │   ├── .gitignore
│   │   ├── CHANGELOG.md
│   │   ├── create-app.ts
│   │   ├── helpers
│   │   │   ├── copy.ts
│   │   │   ├── get-pkg-manager.ts
│   │   │   ├── git.ts
│   │   │   ├── install.ts
│   │   │   ├── is-folder-empty.ts
│   │   │   ├── is-writeable.ts
│   │   │   ├── make-dir.ts
│   │   │   └── validate-pkg.ts
│   │   ├── index.ts
│   │   ├── package.json
│   │   ├── templates
│   │   │   ├── default
│   │   │   │   └── ts
│   │   │   │       ├── gitignore
│   │   │   │       ├── index.html
│   │   │   │       ├── index.ts
│   │   │   │       ├── public
│   │   │   │       │   ├── mockServiceWorker.js
│   │   │   │       │   ├── resources
│   │   │   │       │   │   ├── favicon.ico
│   │   │   │       │   │   └── xmlui-logo.svg
│   │   │   │       │   └── serve.json
│   │   │   │       └── src
│   │   │   │           ├── components
│   │   │   │           │   ├── ApiAware.xmlui
│   │   │   │           │   ├── Home.xmlui
│   │   │   │           │   ├── IncButton.xmlui
│   │   │   │           │   └── PagePanel.xmlui
│   │   │   │           ├── config.ts
│   │   │   │           └── Main.xmlui
│   │   │   ├── index.ts
│   │   │   └── types.ts
│   │   └── tsconfig.json
│   ├── create-xmlui-hello-world
│   │   ├── index.js
│   │   └── package.json
│   └── vscode
│       ├── .gitignore
│       ├── .vscode
│       │   ├── launch.json
│       │   └── tasks.json
│       ├── .vscodeignore
│       ├── build.sh
│       ├── CHANGELOG.md
│       ├── esbuild.js
│       ├── eslint.config.mjs
│       ├── formatter-docs.md
│       ├── generate-test-sample.sh
│       ├── LICENSE.md
│       ├── package-lock.json
│       ├── package.json
│       ├── README.md
│       ├── resources
│       │   ├── xmlui-logo.png
│       │   └── xmlui-markup-syntax-highlighting.png
│       ├── src
│       │   ├── extension.ts
│       │   └── server.ts
│       ├── syntaxes
│       │   └── xmlui.tmLanguage.json
│       ├── test-samples
│       │   └── sample.xmlui
│       ├── tsconfig.json
│       └── tsconfig.tsbuildinfo
├── turbo.json
└── xmlui
    ├── .gitignore
    ├── bin
    │   ├── bootstrap.cjs
    │   ├── bootstrap.js
    │   ├── build-lib.ts
    │   ├── build.ts
    │   ├── index.ts
    │   ├── preview.ts
    │   ├── start.ts
    │   ├── vite-xmlui-plugin.ts
    │   └── viteConfig.ts
    ├── CHANGELOG.md
    ├── conventions
    │   ├── component-qa-checklist.md
    │   ├── copilot-conventions.md
    │   ├── create-xmlui-components.md
    │   ├── mermaid.md
    │   ├── testing-conventions.md
    │   └── xmlui-in-a-nutshell.md
    ├── dev-docs
    │   ├── accessibility.md
    │   ├── build-system.md
    │   ├── build-xmlui.md
    │   ├── component-behaviors.md
    │   ├── component-metadata.md
    │   ├── components-with-options.md
    │   ├── containers.md
    │   ├── data-operations.md
    │   ├── glossary.md
    │   ├── index.md
    │   ├── next
    │   │   ├── component-dev-guide.md
    │   │   ├── configuration-management-enhancement-summary.md
    │   │   ├── documentation-scripts-refactoring-complete-summary.md
    │   │   ├── documentation-scripts-refactoring-plan.md
    │   │   ├── duplicate-pattern-extraction-summary.md
    │   │   ├── error-handling-standardization-summary.md
    │   │   ├── generating-component-reference.md
    │   │   ├── index.md
    │   │   ├── logging-consistency-implementation-summary.md
    │   │   ├── project-build.md
    │   │   ├── project-structure.md
    │   │   ├── theme-context.md
    │   │   ├── tiptap-design-considerations.md
    │   │   ├── working-with-code.md
    │   │   ├── xmlui-runtime-architecture
    │   │   └── xmlui-wcag-accessibility-report.md
    │   ├── react-fundamentals.md
    │   ├── release-method.md
    │   ├── standalone-app.md
    │   ├── theme-variables-refactoring.md
    │   ├── ud-components.md
    │   └── xmlui-repo.md
    ├── package.json
    ├── scripts
    │   ├── coverage-only.js
    │   ├── e2e-test-summary.js
    │   ├── extract-component-metadata.js
    │   ├── generate-docs
    │   │   ├── build-downloads-map.mjs
    │   │   ├── build-pages-map.mjs
    │   │   ├── components-config.json
    │   │   ├── configuration-management.mjs
    │   │   ├── constants.mjs
    │   │   ├── create-theme-files.mjs
    │   │   ├── DocsGenerator.mjs
    │   │   ├── error-handling.mjs
    │   │   ├── extensions-config.json
    │   │   ├── folders.mjs
    │   │   ├── generate-summary-files.mjs
    │   │   ├── get-docs.mjs
    │   │   ├── input-handler.mjs
    │   │   ├── logger.mjs
    │   │   ├── logging-standards.mjs
    │   │   ├── MetadataProcessor.mjs
    │   │   ├── pattern-utilities.mjs
    │   │   └── utils.mjs
    │   ├── generate-metadata-markdown.js
    │   ├── get-langserver-metadata.js
    │   ├── inline-links.mjs
    │   └── README-e2e-summary.md
    ├── src
    │   ├── abstractions
    │   │   ├── _conventions.md
    │   │   ├── ActionDefs.ts
    │   │   ├── AppContextDefs.ts
    │   │   ├── ComponentDefs.ts
    │   │   ├── ContainerDefs.ts
    │   │   ├── ExtensionDefs.ts
    │   │   ├── FunctionDefs.ts
    │   │   ├── RendererDefs.ts
    │   │   ├── scripting
    │   │   │   ├── BlockScope.ts
    │   │   │   ├── Compilation.ts
    │   │   │   ├── LogicalThread.ts
    │   │   │   ├── LoopScope.ts
    │   │   │   ├── modules.ts
    │   │   │   ├── ScriptParserError.ts
    │   │   │   ├── Token.ts
    │   │   │   ├── TryScope.ts
    │   │   │   └── TryScopeExp.ts
    │   │   └── ThemingDefs.ts
    │   ├── components
    │   │   ├── _conventions.md
    │   │   ├── abstractions.ts
    │   │   ├── Accordion
    │   │   │   ├── Accordion.md
    │   │   │   ├── Accordion.module.scss
    │   │   │   ├── Accordion.spec.ts
    │   │   │   ├── Accordion.tsx
    │   │   │   ├── AccordionContext.tsx
    │   │   │   ├── AccordionItem.tsx
    │   │   │   ├── AccordionItemNative.tsx
    │   │   │   └── AccordionNative.tsx
    │   │   ├── Animation
    │   │   │   └── AnimationNative.tsx
    │   │   ├── APICall
    │   │   │   ├── APICall.md
    │   │   │   ├── APICall.spec.ts
    │   │   │   ├── APICall.tsx
    │   │   │   └── APICallNative.tsx
    │   │   ├── App
    │   │   │   ├── App.md
    │   │   │   ├── App.module.scss
    │   │   │   ├── App.spec.ts
    │   │   │   ├── App.tsx
    │   │   │   ├── AppLayoutContext.ts
    │   │   │   ├── AppNative.tsx
    │   │   │   ├── AppStateContext.ts
    │   │   │   ├── doc-resources
    │   │   │   │   ├── condensed-sticky.xmlui
    │   │   │   │   ├── condensed.xmlui
    │   │   │   │   ├── horizontal-sticky.xmlui
    │   │   │   │   ├── horizontal.xmlui
    │   │   │   │   ├── vertical-full-header.xmlui
    │   │   │   │   ├── vertical-sticky.xmlui
    │   │   │   │   └── vertical.xmlui
    │   │   │   ├── IndexerContext.ts
    │   │   │   ├── LinkInfoContext.ts
    │   │   │   ├── SearchContext.tsx
    │   │   │   ├── Sheet.module.scss
    │   │   │   └── Sheet.tsx
    │   │   ├── AppHeader
    │   │   │   ├── AppHeader.md
    │   │   │   ├── AppHeader.module.scss
    │   │   │   ├── AppHeader.spec.ts
    │   │   │   ├── AppHeader.tsx
    │   │   │   └── AppHeaderNative.tsx
    │   │   ├── AppState
    │   │   │   ├── AppState.md
    │   │   │   ├── AppState.spec.ts
    │   │   │   ├── AppState.tsx
    │   │   │   └── AppStateNative.tsx
    │   │   ├── AutoComplete
    │   │   │   ├── AutoComplete.md
    │   │   │   ├── AutoComplete.module.scss
    │   │   │   ├── AutoComplete.spec.ts
    │   │   │   ├── AutoComplete.tsx
    │   │   │   ├── AutoCompleteContext.tsx
    │   │   │   └── AutoCompleteNative.tsx
    │   │   ├── Avatar
    │   │   │   ├── Avatar.md
    │   │   │   ├── Avatar.module.scss
    │   │   │   ├── Avatar.spec.ts
    │   │   │   ├── Avatar.tsx
    │   │   │   └── AvatarNative.tsx
    │   │   ├── Backdrop
    │   │   │   ├── Backdrop.md
    │   │   │   ├── Backdrop.module.scss
    │   │   │   ├── Backdrop.spec.ts
    │   │   │   ├── Backdrop.tsx
    │   │   │   └── BackdropNative.tsx
    │   │   ├── Badge
    │   │   │   ├── Badge.md
    │   │   │   ├── Badge.module.scss
    │   │   │   ├── Badge.spec.ts
    │   │   │   ├── Badge.tsx
    │   │   │   └── BadgeNative.tsx
    │   │   ├── Bookmark
    │   │   │   ├── Bookmark.md
    │   │   │   ├── Bookmark.module.scss
    │   │   │   ├── Bookmark.spec.ts
    │   │   │   ├── Bookmark.tsx
    │   │   │   └── BookmarkNative.tsx
    │   │   ├── Breakout
    │   │   │   ├── Breakout.module.scss
    │   │   │   ├── Breakout.spec.ts
    │   │   │   ├── Breakout.tsx
    │   │   │   └── BreakoutNative.tsx
    │   │   ├── Button
    │   │   │   ├── Button-style.spec.ts
    │   │   │   ├── Button.md
    │   │   │   ├── Button.module.scss
    │   │   │   ├── Button.spec.ts
    │   │   │   ├── Button.tsx
    │   │   │   └── ButtonNative.tsx
    │   │   ├── Card
    │   │   │   ├── Card.md
    │   │   │   ├── Card.module.scss
    │   │   │   ├── Card.spec.ts
    │   │   │   ├── Card.tsx
    │   │   │   └── CardNative.tsx
    │   │   ├── Carousel
    │   │   │   ├── Carousel.md
    │   │   │   ├── Carousel.module.scss
    │   │   │   ├── Carousel.spec.ts
    │   │   │   ├── Carousel.tsx
    │   │   │   ├── CarouselContext.tsx
    │   │   │   ├── CarouselItem.tsx
    │   │   │   ├── CarouselItemNative.tsx
    │   │   │   └── CarouselNative.tsx
    │   │   ├── ChangeListener
    │   │   │   ├── ChangeListener.md
    │   │   │   ├── ChangeListener.spec.ts
    │   │   │   ├── ChangeListener.tsx
    │   │   │   └── ChangeListenerNative.tsx
    │   │   ├── chart-color-schemes.ts
    │   │   ├── Charts
    │   │   │   ├── AreaChart
    │   │   │   │   ├── AreaChart.md
    │   │   │   │   ├── AreaChart.spec.ts
    │   │   │   │   ├── AreaChart.tsx
    │   │   │   │   └── AreaChartNative.tsx
    │   │   │   ├── BarChart
    │   │   │   │   ├── BarChart.md
    │   │   │   │   ├── BarChart.module.scss
    │   │   │   │   ├── BarChart.spec.ts
    │   │   │   │   ├── BarChart.tsx
    │   │   │   │   └── BarChartNative.tsx
    │   │   │   ├── DonutChart
    │   │   │   │   ├── DonutChart.spec.ts
    │   │   │   │   └── DonutChart.tsx
    │   │   │   ├── LabelList
    │   │   │   │   ├── LabelList.module.scss
    │   │   │   │   ├── LabelList.spec.ts
    │   │   │   │   ├── LabelList.tsx
    │   │   │   │   └── LabelListNative.tsx
    │   │   │   ├── Legend
    │   │   │   │   ├── Legend.spec.ts
    │   │   │   │   ├── Legend.tsx
    │   │   │   │   └── LegendNative.tsx
    │   │   │   ├── LineChart
    │   │   │   │   ├── LineChart.md
    │   │   │   │   ├── LineChart.module.scss
    │   │   │   │   ├── LineChart.spec.ts
    │   │   │   │   ├── LineChart.tsx
    │   │   │   │   └── LineChartNative.tsx
    │   │   │   ├── PieChart
    │   │   │   │   ├── PieChart.md
    │   │   │   │   ├── PieChart.spec.ts
    │   │   │   │   ├── PieChart.tsx
    │   │   │   │   ├── PieChartNative.module.scss
    │   │   │   │   └── PieChartNative.tsx
    │   │   │   ├── RadarChart
    │   │   │   │   ├── RadarChart.md
    │   │   │   │   ├── RadarChart.spec.ts
    │   │   │   │   ├── RadarChart.tsx
    │   │   │   │   └── RadarChartNative.tsx
    │   │   │   ├── Tooltip
    │   │   │   │   ├── TooltipContent.module.scss
    │   │   │   │   ├── TooltipContent.spec.ts
    │   │   │   │   └── TooltipContent.tsx
    │   │   │   └── utils
    │   │   │       ├── abstractions.ts
    │   │   │       └── ChartProvider.tsx
    │   │   ├── Checkbox
    │   │   │   ├── Checkbox.md
    │   │   │   ├── Checkbox.spec.ts
    │   │   │   └── Checkbox.tsx
    │   │   ├── CodeBlock
    │   │   │   ├── CodeBlock.module.scss
    │   │   │   ├── CodeBlock.spec.ts
    │   │   │   ├── CodeBlock.tsx
    │   │   │   ├── CodeBlockNative.tsx
    │   │   │   └── highlight-code.ts
    │   │   ├── collectedComponentMetadata.ts
    │   │   ├── ColorPicker
    │   │   │   ├── ColorPicker.md
    │   │   │   ├── ColorPicker.module.scss
    │   │   │   ├── ColorPicker.spec.ts
    │   │   │   ├── ColorPicker.tsx
    │   │   │   └── ColorPickerNative.tsx
    │   │   ├── Column
    │   │   │   ├── Column.md
    │   │   │   ├── Column.tsx
    │   │   │   ├── ColumnNative.tsx
    │   │   │   ├── doc-resources
    │   │   │   │   └── list-component-data.js
    │   │   │   └── TableContext.tsx
    │   │   ├── component-utils.ts
    │   │   ├── ComponentProvider.tsx
    │   │   ├── ComponentRegistryContext.tsx
    │   │   ├── container-helpers.tsx
    │   │   ├── ContentSeparator
    │   │   │   ├── ContentSeparator.md
    │   │   │   ├── ContentSeparator.module.scss
    │   │   │   ├── ContentSeparator.spec.ts
    │   │   │   ├── ContentSeparator.tsx
    │   │   │   └── ContentSeparatorNative.tsx
    │   │   ├── DataSource
    │   │   │   ├── DataSource.md
    │   │   │   └── DataSource.tsx
    │   │   ├── DateInput
    │   │   │   ├── DateInput.md
    │   │   │   ├── DateInput.module.scss
    │   │   │   ├── DateInput.spec.ts
    │   │   │   ├── DateInput.tsx
    │   │   │   └── DateInputNative.tsx
    │   │   ├── DatePicker
    │   │   │   ├── DatePicker.md
    │   │   │   ├── DatePicker.module.scss
    │   │   │   ├── DatePicker.spec.ts
    │   │   │   ├── DatePicker.tsx
    │   │   │   └── DatePickerNative.tsx
    │   │   ├── DropdownMenu
    │   │   │   ├── DropdownMenu.md
    │   │   │   ├── DropdownMenu.module.scss
    │   │   │   ├── DropdownMenu.spec.ts
    │   │   │   ├── DropdownMenu.tsx
    │   │   │   ├── DropdownMenuNative.tsx
    │   │   │   ├── MenuItem.md
    │   │   │   └── SubMenuItem.md
    │   │   ├── EmojiSelector
    │   │   │   ├── EmojiSelector.md
    │   │   │   ├── EmojiSelector.spec.ts
    │   │   │   ├── EmojiSelector.tsx
    │   │   │   └── EmojiSelectorNative.tsx
    │   │   ├── ExpandableItem
    │   │   │   ├── ExpandableItem.module.scss
    │   │   │   ├── ExpandableItem.spec.ts
    │   │   │   ├── ExpandableItem.tsx
    │   │   │   └── ExpandableItemNative.tsx
    │   │   ├── FileInput
    │   │   │   ├── FileInput.md
    │   │   │   ├── FileInput.module.scss
    │   │   │   ├── FileInput.spec.ts
    │   │   │   ├── FileInput.tsx
    │   │   │   └── FileInputNative.tsx
    │   │   ├── FileUploadDropZone
    │   │   │   ├── FileUploadDropZone.md
    │   │   │   ├── FileUploadDropZone.module.scss
    │   │   │   ├── FileUploadDropZone.spec.ts
    │   │   │   ├── FileUploadDropZone.tsx
    │   │   │   └── FileUploadDropZoneNative.tsx
    │   │   ├── FlowLayout
    │   │   │   ├── FlowLayout.md
    │   │   │   ├── FlowLayout.module.scss
    │   │   │   ├── FlowLayout.spec.ts
    │   │   │   ├── FlowLayout.spec.ts-snapshots
    │   │   │   │   └── Edge-cases-boxShadow-is-not-clipped-1-non-smoke-darwin.png
    │   │   │   ├── FlowLayout.tsx
    │   │   │   └── FlowLayoutNative.tsx
    │   │   ├── Footer
    │   │   │   ├── Footer.md
    │   │   │   ├── Footer.module.scss
    │   │   │   ├── Footer.spec.ts
    │   │   │   ├── Footer.tsx
    │   │   │   └── FooterNative.tsx
    │   │   ├── Form
    │   │   │   ├── Form.md
    │   │   │   ├── Form.module.scss
    │   │   │   ├── Form.spec.ts
    │   │   │   ├── Form.tsx
    │   │   │   ├── formActions.ts
    │   │   │   ├── FormContext.ts
    │   │   │   └── FormNative.tsx
    │   │   ├── FormItem
    │   │   │   ├── FormItem.md
    │   │   │   ├── FormItem.module.scss
    │   │   │   ├── FormItem.spec.ts
    │   │   │   ├── FormItem.tsx
    │   │   │   ├── FormItemNative.tsx
    │   │   │   ├── HelperText.module.scss
    │   │   │   ├── HelperText.tsx
    │   │   │   ├── ItemWithLabel.tsx
    │   │   │   └── Validations.ts
    │   │   ├── FormSection
    │   │   │   ├── FormSection.md
    │   │   │   ├── FormSection.ts
    │   │   │   └── FormSection.xmlui
    │   │   ├── Fragment
    │   │   │   ├── Fragment.spec.ts
    │   │   │   └── Fragment.tsx
    │   │   ├── Heading
    │   │   │   ├── abstractions.ts
    │   │   │   ├── H1.md
    │   │   │   ├── H1.spec.ts
    │   │   │   ├── H2.md
    │   │   │   ├── H2.spec.ts
    │   │   │   ├── H3.md
    │   │   │   ├── H3.spec.ts
    │   │   │   ├── H4.md
    │   │   │   ├── H4.spec.ts
    │   │   │   ├── H5.md
    │   │   │   ├── H5.spec.ts
    │   │   │   ├── H6.md
    │   │   │   ├── H6.spec.ts
    │   │   │   ├── Heading.md
    │   │   │   ├── Heading.module.scss
    │   │   │   ├── Heading.spec.ts
    │   │   │   ├── Heading.tsx
    │   │   │   └── HeadingNative.tsx
    │   │   ├── HoverCard
    │   │   │   ├── HoverCard.tsx
    │   │   │   └── HovercardNative.tsx
    │   │   ├── HtmlTags
    │   │   │   ├── HtmlTags.module.scss
    │   │   │   ├── HtmlTags.spec.ts
    │   │   │   └── HtmlTags.tsx
    │   │   ├── Icon
    │   │   │   ├── AdmonitionDanger.tsx
    │   │   │   ├── AdmonitionInfo.tsx
    │   │   │   ├── AdmonitionNote.tsx
    │   │   │   ├── AdmonitionTip.tsx
    │   │   │   ├── AdmonitionWarning.tsx
    │   │   │   ├── ApiIcon.tsx
    │   │   │   ├── ArrowDropDown.module.scss
    │   │   │   ├── ArrowDropDown.tsx
    │   │   │   ├── ArrowDropUp.module.scss
    │   │   │   ├── ArrowDropUp.tsx
    │   │   │   ├── ArrowLeft.module.scss
    │   │   │   ├── ArrowLeft.tsx
    │   │   │   ├── ArrowRight.module.scss
    │   │   │   ├── ArrowRight.tsx
    │   │   │   ├── Attach.tsx
    │   │   │   ├── Binding.module.scss
    │   │   │   ├── Binding.tsx
    │   │   │   ├── BoardIcon.tsx
    │   │   │   ├── BoxIcon.tsx
    │   │   │   ├── CheckIcon.tsx
    │   │   │   ├── ChevronDownIcon.tsx
    │   │   │   ├── ChevronLeft.tsx
    │   │   │   ├── ChevronRight.tsx
    │   │   │   ├── ChevronUpIcon.tsx
    │   │   │   ├── CodeFileIcon.tsx
    │   │   │   ├── CodeSandbox.tsx
    │   │   │   ├── CompactListIcon.tsx
    │   │   │   ├── ContentCopyIcon.tsx
    │   │   │   ├── DarkToLightIcon.tsx
    │   │   │   ├── DatabaseIcon.module.scss
    │   │   │   ├── DatabaseIcon.tsx
    │   │   │   ├── DocFileIcon.tsx
    │   │   │   ├── DocIcon.tsx
    │   │   │   ├── DotMenuHorizontalIcon.tsx
    │   │   │   ├── DotMenuIcon.tsx
    │   │   │   ├── EmailIcon.tsx
    │   │   │   ├── EmptyFolderIcon.tsx
    │   │   │   ├── ErrorIcon.tsx
    │   │   │   ├── ExpressionIcon.tsx
    │   │   │   ├── FillPlusCricleIcon.tsx
    │   │   │   ├── FilterIcon.tsx
    │   │   │   ├── FolderIcon.tsx
    │   │   │   ├── GlobeIcon.tsx
    │   │   │   ├── HomeIcon.tsx
    │   │   │   ├── HyperLinkIcon.tsx
    │   │   │   ├── Icon.md
    │   │   │   ├── Icon.module.scss
    │   │   │   ├── Icon.spec.ts
    │   │   │   ├── Icon.tsx
    │   │   │   ├── IconNative.tsx
    │   │   │   ├── ImageFileIcon.tsx
    │   │   │   ├── Inspect.tsx
    │   │   │   ├── LightToDark.tsx
    │   │   │   ├── LinkIcon.tsx
    │   │   │   ├── ListIcon.tsx
    │   │   │   ├── LooseListIcon.tsx
    │   │   │   ├── MoonIcon.tsx
    │   │   │   ├── MoreOptionsIcon.tsx
    │   │   │   ├── NoSortIcon.tsx
    │   │   │   ├── PDFIcon.tsx
    │   │   │   ├── PenIcon.tsx
    │   │   │   ├── PhoneIcon.tsx
    │   │   │   ├── PhotoIcon.tsx
    │   │   │   ├── PlusIcon.tsx
    │   │   │   ├── SearchIcon.tsx
    │   │   │   ├── ShareIcon.tsx
    │   │   │   ├── SortAscendingIcon.tsx
    │   │   │   ├── SortDescendingIcon.tsx
    │   │   │   ├── StarsIcon.tsx
    │   │   │   ├── SunIcon.tsx
    │   │   │   ├── svg
    │   │   │   │   ├── admonition_danger.svg
    │   │   │   │   ├── admonition_info.svg
    │   │   │   │   ├── admonition_note.svg
    │   │   │   │   ├── admonition_tip.svg
    │   │   │   │   ├── admonition_warning.svg
    │   │   │   │   ├── api.svg
    │   │   │   │   ├── arrow-dropdown.svg
    │   │   │   │   ├── arrow-left.svg
    │   │   │   │   ├── arrow-right.svg
    │   │   │   │   ├── arrow-up.svg
    │   │   │   │   ├── attach.svg
    │   │   │   │   ├── binding.svg
    │   │   │   │   ├── box.svg
    │   │   │   │   ├── bulb.svg
    │   │   │   │   ├── code-file.svg
    │   │   │   │   ├── code-sandbox.svg
    │   │   │   │   ├── dark_to_light.svg
    │   │   │   │   ├── database.svg
    │   │   │   │   ├── doc.svg
    │   │   │   │   ├── empty-folder.svg
    │   │   │   │   ├── expression.svg
    │   │   │   │   ├── eye-closed.svg
    │   │   │   │   ├── eye-dark.svg
    │   │   │   │   ├── eye.svg
    │   │   │   │   ├── file-text.svg
    │   │   │   │   ├── filter.svg
    │   │   │   │   ├── folder.svg
    │   │   │   │   ├── img.svg
    │   │   │   │   ├── inspect.svg
    │   │   │   │   ├── light_to_dark.svg
    │   │   │   │   ├── moon.svg
    │   │   │   │   ├── pdf.svg
    │   │   │   │   ├── photo.svg
    │   │   │   │   ├── share.svg
    │   │   │   │   ├── stars.svg
    │   │   │   │   ├── sun.svg
    │   │   │   │   ├── trending-down.svg
    │   │   │   │   ├── trending-level.svg
    │   │   │   │   ├── trending-up.svg
    │   │   │   │   ├── txt.svg
    │   │   │   │   ├── unknown-file.svg
    │   │   │   │   ├── unlink.svg
    │   │   │   │   └── xls.svg
    │   │   │   ├── TableDeleteColumnIcon.tsx
    │   │   │   ├── TableDeleteRowIcon.tsx
    │   │   │   ├── TableInsertColumnIcon.tsx
    │   │   │   ├── TableInsertRowIcon.tsx
    │   │   │   ├── TrashIcon.tsx
    │   │   │   ├── TrendingDownIcon.tsx
    │   │   │   ├── TrendingLevelIcon.tsx
    │   │   │   ├── TrendingUpIcon.tsx
    │   │   │   ├── TxtIcon.tsx
    │   │   │   ├── UnknownFileIcon.tsx
    │   │   │   ├── UnlinkIcon.tsx
    │   │   │   ├── UserIcon.tsx
    │   │   │   ├── WarningIcon.tsx
    │   │   │   └── XlsIcon.tsx
    │   │   ├── IconProvider.tsx
    │   │   ├── IconRegistryContext.tsx
    │   │   ├── IFrame
    │   │   │   ├── IFrame.md
    │   │   │   ├── IFrame.module.scss
    │   │   │   ├── IFrame.spec.ts
    │   │   │   ├── IFrame.tsx
    │   │   │   └── IFrameNative.tsx
    │   │   ├── Image
    │   │   │   ├── Image.md
    │   │   │   ├── Image.module.scss
    │   │   │   ├── Image.spec.ts
    │   │   │   ├── Image.tsx
    │   │   │   └── ImageNative.tsx
    │   │   ├── Input
    │   │   │   ├── index.ts
    │   │   │   ├── InputAdornment.module.scss
    │   │   │   ├── InputAdornment.tsx
    │   │   │   ├── InputDivider.module.scss
    │   │   │   ├── InputDivider.tsx
    │   │   │   ├── InputLabel.module.scss
    │   │   │   ├── InputLabel.tsx
    │   │   │   ├── PartialInput.module.scss
    │   │   │   └── PartialInput.tsx
    │   │   ├── InspectButton
    │   │   │   ├── InspectButton.module.scss
    │   │   │   └── InspectButton.tsx
    │   │   ├── Items
    │   │   │   ├── Items.md
    │   │   │   ├── Items.spec.ts
    │   │   │   ├── Items.tsx
    │   │   │   └── ItemsNative.tsx
    │   │   ├── Link
    │   │   │   ├── Link.md
    │   │   │   ├── Link.module.scss
    │   │   │   ├── Link.spec.ts
    │   │   │   ├── Link.tsx
    │   │   │   └── LinkNative.tsx
    │   │   ├── List
    │   │   │   ├── doc-resources
    │   │   │   │   └── list-component-data.js
    │   │   │   ├── List.md
    │   │   │   ├── List.module.scss
    │   │   │   ├── List.spec.ts
    │   │   │   ├── List.tsx
    │   │   │   └── ListNative.tsx
    │   │   ├── Logo
    │   │   │   ├── doc-resources
    │   │   │   │   └── xmlui-logo.svg
    │   │   │   ├── Logo.md
    │   │   │   ├── Logo.tsx
    │   │   │   └── LogoNative.tsx
    │   │   ├── Markdown
    │   │   │   ├── CodeText.module.scss
    │   │   │   ├── CodeText.tsx
    │   │   │   ├── Markdown.md
    │   │   │   ├── Markdown.module.scss
    │   │   │   ├── Markdown.spec.ts
    │   │   │   ├── Markdown.tsx
    │   │   │   ├── MarkdownNative.tsx
    │   │   │   ├── parse-binding-expr.ts
    │   │   │   └── utils.ts
    │   │   ├── metadata-helpers.ts
    │   │   ├── ModalDialog
    │   │   │   ├── ConfirmationModalContextProvider.tsx
    │   │   │   ├── Dialog.module.scss
    │   │   │   ├── Dialog.tsx
    │   │   │   ├── ModalDialog.md
    │   │   │   ├── ModalDialog.module.scss
    │   │   │   ├── ModalDialog.spec.ts
    │   │   │   ├── ModalDialog.tsx
    │   │   │   ├── ModalDialogNative.tsx
    │   │   │   └── ModalVisibilityContext.tsx
    │   │   ├── NavGroup
    │   │   │   ├── NavGroup.md
    │   │   │   ├── NavGroup.module.scss
    │   │   │   ├── NavGroup.spec.ts
    │   │   │   ├── NavGroup.tsx
    │   │   │   ├── NavGroupContext.ts
    │   │   │   └── NavGroupNative.tsx
    │   │   ├── NavLink
    │   │   │   ├── NavLink.md
    │   │   │   ├── NavLink.module.scss
    │   │   │   ├── NavLink.spec.ts
    │   │   │   ├── NavLink.tsx
    │   │   │   └── NavLinkNative.tsx
    │   │   ├── NavPanel
    │   │   │   ├── NavPanel.md
    │   │   │   ├── NavPanel.module.scss
    │   │   │   ├── NavPanel.spec.ts
    │   │   │   ├── NavPanel.tsx
    │   │   │   └── NavPanelNative.tsx
    │   │   ├── NestedApp
    │   │   │   ├── AppWithCodeView.module.scss
    │   │   │   ├── AppWithCodeView.tsx
    │   │   │   ├── AppWithCodeViewNative.tsx
    │   │   │   ├── defaultProps.tsx
    │   │   │   ├── logo.svg
    │   │   │   ├── NestedApp.module.scss
    │   │   │   ├── NestedApp.tsx
    │   │   │   ├── NestedAppNative.tsx
    │   │   │   ├── Tooltip.module.scss
    │   │   │   ├── Tooltip.tsx
    │   │   │   └── utils.ts
    │   │   ├── NoResult
    │   │   │   ├── NoResult.md
    │   │   │   ├── NoResult.module.scss
    │   │   │   ├── NoResult.spec.ts
    │   │   │   ├── NoResult.tsx
    │   │   │   └── NoResultNative.tsx
    │   │   ├── NumberBox
    │   │   │   ├── numberbox-abstractions.ts
    │   │   │   ├── NumberBox.md
    │   │   │   ├── NumberBox.module.scss
    │   │   │   ├── NumberBox.spec.ts
    │   │   │   ├── NumberBox.tsx
    │   │   │   └── NumberBoxNative.tsx
    │   │   ├── Option
    │   │   │   ├── Option.md
    │   │   │   ├── Option.spec.ts
    │   │   │   ├── Option.tsx
    │   │   │   ├── OptionNative.tsx
    │   │   │   └── OptionTypeProvider.tsx
    │   │   ├── PageMetaTitle
    │   │   │   ├── PageMetaTilteNative.tsx
    │   │   │   ├── PageMetaTitle.md
    │   │   │   ├── PageMetaTitle.spec.ts
    │   │   │   └── PageMetaTitle.tsx
    │   │   ├── Pages
    │   │   │   ├── Page.md
    │   │   │   ├── Pages.md
    │   │   │   ├── Pages.module.scss
    │   │   │   ├── Pages.tsx
    │   │   │   └── PagesNative.tsx
    │   │   ├── Pagination
    │   │   │   ├── Pagination.md
    │   │   │   ├── Pagination.module.scss
    │   │   │   ├── Pagination.spec.ts
    │   │   │   ├── Pagination.tsx
    │   │   │   └── PaginationNative.tsx
    │   │   ├── PositionedContainer
    │   │   │   ├── PositionedContainer.module.scss
    │   │   │   ├── PositionedContainer.tsx
    │   │   │   └── PositionedContainerNative.tsx
    │   │   ├── ProfileMenu
    │   │   │   ├── ProfileMenu.module.scss
    │   │   │   └── ProfileMenu.tsx
    │   │   ├── ProgressBar
    │   │   │   ├── ProgressBar.md
    │   │   │   ├── ProgressBar.module.scss
    │   │   │   ├── ProgressBar.spec.ts
    │   │   │   ├── ProgressBar.tsx
    │   │   │   └── ProgressBarNative.tsx
    │   │   ├── Queue
    │   │   │   ├── Queue.md
    │   │   │   ├── Queue.spec.ts
    │   │   │   ├── Queue.tsx
    │   │   │   ├── queueActions.ts
    │   │   │   └── QueueNative.tsx
    │   │   ├── RadioGroup
    │   │   │   ├── RadioGroup.md
    │   │   │   ├── RadioGroup.module.scss
    │   │   │   ├── RadioGroup.spec.ts
    │   │   │   ├── RadioGroup.tsx
    │   │   │   ├── RadioGroupNative.tsx
    │   │   │   ├── RadioItem.tsx
    │   │   │   └── RadioItemNative.tsx
    │   │   ├── RealTimeAdapter
    │   │   │   ├── RealTimeAdapter.tsx
    │   │   │   └── RealTimeAdapterNative.tsx
    │   │   ├── Redirect
    │   │   │   ├── Redirect.md
    │   │   │   ├── Redirect.spec.ts
    │   │   │   └── Redirect.tsx
    │   │   ├── ResponsiveBar
    │   │   │   ├── README.md
    │   │   │   ├── ResponsiveBar.md
    │   │   │   ├── ResponsiveBar.module.scss
    │   │   │   ├── ResponsiveBar.spec.ts
    │   │   │   ├── ResponsiveBar.tsx
    │   │   │   └── ResponsiveBarNative.tsx
    │   │   ├── Select
    │   │   │   ├── HiddenOption.tsx
    │   │   │   ├── OptionContext.ts
    │   │   │   ├── Select.md
    │   │   │   ├── Select.module.scss
    │   │   │   ├── Select.spec.ts
    │   │   │   ├── Select.tsx
    │   │   │   ├── SelectContext.tsx
    │   │   │   └── SelectNative.tsx
    │   │   ├── SelectionStore
    │   │   │   ├── SelectionStore.md
    │   │   │   ├── SelectionStore.tsx
    │   │   │   └── SelectionStoreNative.tsx
    │   │   ├── Slider
    │   │   │   ├── Slider.md
    │   │   │   ├── Slider.module.scss
    │   │   │   ├── Slider.spec.ts
    │   │   │   ├── Slider.tsx
    │   │   │   └── SliderNative.tsx
    │   │   ├── Slot
    │   │   │   ├── Slot.md
    │   │   │   ├── Slot.spec.ts
    │   │   │   └── Slot.ts
    │   │   ├── SlotItem.tsx
    │   │   ├── SpaceFiller
    │   │   │   ├── SpaceFiller.md
    │   │   │   ├── SpaceFiller.module.scss
    │   │   │   ├── SpaceFiller.spec.ts
    │   │   │   ├── SpaceFiller.tsx
    │   │   │   └── SpaceFillerNative.tsx
    │   │   ├── Spinner
    │   │   │   ├── Spinner.md
    │   │   │   ├── Spinner.module.scss
    │   │   │   ├── Spinner.spec.ts
    │   │   │   ├── Spinner.tsx
    │   │   │   └── SpinnerNative.tsx
    │   │   ├── Splitter
    │   │   │   ├── HSplitter.md
    │   │   │   ├── HSplitter.spec.ts
    │   │   │   ├── Splitter.md
    │   │   │   ├── Splitter.module.scss
    │   │   │   ├── Splitter.spec.ts
    │   │   │   ├── Splitter.tsx
    │   │   │   ├── SplitterNative.tsx
    │   │   │   ├── utils.ts
    │   │   │   ├── VSplitter.md
    │   │   │   └── VSplitter.spec.ts
    │   │   ├── Stack
    │   │   │   ├── CHStack.md
    │   │   │   ├── CHStack.spec.ts
    │   │   │   ├── CVStack.md
    │   │   │   ├── CVStack.spec.ts
    │   │   │   ├── HStack.md
    │   │   │   ├── HStack.spec.ts
    │   │   │   ├── Stack.md
    │   │   │   ├── Stack.module.scss
    │   │   │   ├── Stack.spec.ts
    │   │   │   ├── Stack.tsx
    │   │   │   ├── StackNative.tsx
    │   │   │   ├── VStack.md
    │   │   │   └── VStack.spec.ts
    │   │   ├── StickyBox
    │   │   │   ├── StickyBox.md
    │   │   │   ├── StickyBox.module.scss
    │   │   │   ├── StickyBox.tsx
    │   │   │   └── StickyBoxNative.tsx
    │   │   ├── Switch
    │   │   │   ├── Switch.md
    │   │   │   ├── Switch.spec.ts
    │   │   │   └── Switch.tsx
    │   │   ├── Table
    │   │   │   ├── doc-resources
    │   │   │   │   └── list-component-data.js
    │   │   │   ├── react-table-config.d.ts
    │   │   │   ├── Table.md
    │   │   │   ├── Table.module.scss
    │   │   │   ├── Table.spec.ts
    │   │   │   ├── Table.tsx
    │   │   │   ├── TableNative.tsx
    │   │   │   └── useRowSelection.tsx
    │   │   ├── TableOfContents
    │   │   │   ├── TableOfContents.module.scss
    │   │   │   ├── TableOfContents.spec.ts
    │   │   │   ├── TableOfContents.tsx
    │   │   │   └── TableOfContentsNative.tsx
    │   │   ├── Tabs
    │   │   │   ├── TabContext.tsx
    │   │   │   ├── TabItem.md
    │   │   │   ├── TabItem.tsx
    │   │   │   ├── TabItemNative.tsx
    │   │   │   ├── Tabs.md
    │   │   │   ├── Tabs.module.scss
    │   │   │   ├── Tabs.spec.ts
    │   │   │   ├── Tabs.tsx
    │   │   │   └── TabsNative.tsx
    │   │   ├── Text
    │   │   │   ├── Text.md
    │   │   │   ├── Text.module.scss
    │   │   │   ├── Text.spec.ts
    │   │   │   ├── Text.tsx
    │   │   │   └── TextNative.tsx
    │   │   ├── TextArea
    │   │   │   ├── TextArea.md
    │   │   │   ├── TextArea.module.scss
    │   │   │   ├── TextArea.spec.ts
    │   │   │   ├── TextArea.tsx
    │   │   │   ├── TextAreaNative.tsx
    │   │   │   ├── TextAreaResizable.tsx
    │   │   │   └── useComposedRef.ts
    │   │   ├── TextBox
    │   │   │   ├── TextBox.md
    │   │   │   ├── TextBox.module.scss
    │   │   │   ├── TextBox.spec.ts
    │   │   │   ├── TextBox.tsx
    │   │   │   └── TextBoxNative.tsx
    │   │   ├── Theme
    │   │   │   ├── NotificationToast.tsx
    │   │   │   ├── Theme.md
    │   │   │   ├── Theme.module.scss
    │   │   │   ├── Theme.spec.ts
    │   │   │   ├── Theme.tsx
    │   │   │   └── ThemeNative.tsx
    │   │   ├── TimeInput
    │   │   │   ├── TimeInput.md
    │   │   │   ├── TimeInput.module.scss
    │   │   │   ├── TimeInput.spec.ts
    │   │   │   ├── TimeInput.tsx
    │   │   │   ├── TimeInputNative.tsx
    │   │   │   └── utils.ts
    │   │   ├── Timer
    │   │   │   ├── Timer.md
    │   │   │   ├── Timer.spec.ts
    │   │   │   ├── Timer.tsx
    │   │   │   └── TimerNative.tsx
    │   │   ├── Toggle
    │   │   │   ├── Toggle.module.scss
    │   │   │   └── Toggle.tsx
    │   │   ├── ToneChangerButton
    │   │   │   ├── ToneChangerButton.md
    │   │   │   ├── ToneChangerButton.spec.ts
    │   │   │   └── ToneChangerButton.tsx
    │   │   ├── ToneSwitch
    │   │   │   ├── ToneSwitch.md
    │   │   │   ├── ToneSwitch.module.scss
    │   │   │   ├── ToneSwitch.spec.ts
    │   │   │   ├── ToneSwitch.tsx
    │   │   │   └── ToneSwitchNative.tsx
    │   │   ├── Tooltip
    │   │   │   ├── Tooltip.md
    │   │   │   ├── Tooltip.module.scss
    │   │   │   ├── Tooltip.spec.ts
    │   │   │   ├── Tooltip.tsx
    │   │   │   └── TooltipNative.tsx
    │   │   ├── Tree
    │   │   │   ├── testData.ts
    │   │   │   ├── Tree-dynamic.spec.ts
    │   │   │   ├── Tree-icons.spec.ts
    │   │   │   ├── Tree.md
    │   │   │   ├── Tree.spec.ts
    │   │   │   ├── TreeComponent.module.scss
    │   │   │   ├── TreeComponent.tsx
    │   │   │   └── TreeNative.tsx
    │   │   ├── TreeDisplay
    │   │   │   ├── TreeDisplay.md
    │   │   │   ├── TreeDisplay.module.scss
    │   │   │   ├── TreeDisplay.tsx
    │   │   │   └── TreeDisplayNative.tsx
    │   │   ├── ValidationSummary
    │   │   │   ├── ValidationSummary.module.scss
    │   │   │   └── ValidationSummary.tsx
    │   │   └── VisuallyHidden.tsx
    │   ├── components-core
    │   │   ├── abstractions
    │   │   │   ├── ComponentRenderer.ts
    │   │   │   ├── LoaderRenderer.ts
    │   │   │   ├── standalone.ts
    │   │   │   └── treeAbstractions.ts
    │   │   ├── action
    │   │   │   ├── actions.ts
    │   │   │   ├── APICall.tsx
    │   │   │   ├── FileDownloadAction.tsx
    │   │   │   ├── FileUploadAction.tsx
    │   │   │   ├── NavigateAction.tsx
    │   │   │   └── TimedAction.tsx
    │   │   ├── ApiBoundComponent.tsx
    │   │   ├── appContext
    │   │   │   ├── date-functions.ts
    │   │   │   ├── math-function.ts
    │   │   │   └── misc-utils.ts
    │   │   ├── AppContext.tsx
    │   │   ├── behaviors
    │   │   │   ├── Behavior.tsx
    │   │   │   └── CoreBehaviors.tsx
    │   │   ├── component-hooks.ts
    │   │   ├── ComponentDecorator.tsx
    │   │   ├── ComponentViewer.tsx
    │   │   ├── CompoundComponent.tsx
    │   │   ├── constants.ts
    │   │   ├── DebugViewProvider.tsx
    │   │   ├── descriptorHelper.ts
    │   │   ├── devtools
    │   │   │   ├── InspectorDialog.module.scss
    │   │   │   ├── InspectorDialog.tsx
    │   │   │   └── InspectorDialogVisibilityContext.tsx
    │   │   ├── EngineError.ts
    │   │   ├── event-handlers.ts
    │   │   ├── InspectorButton.module.scss
    │   │   ├── InspectorContext.tsx
    │   │   ├── interception
    │   │   │   ├── abstractions.ts
    │   │   │   ├── ApiInterceptor.ts
    │   │   │   ├── ApiInterceptorProvider.tsx
    │   │   │   ├── apiInterceptorWorker.ts
    │   │   │   ├── Backend.ts
    │   │   │   ├── Errors.ts
    │   │   │   ├── IndexedDb.ts
    │   │   │   ├── initMock.ts
    │   │   │   ├── InMemoryDb.ts
    │   │   │   ├── ReadonlyCollection.ts
    │   │   │   └── useApiInterceptorContext.tsx
    │   │   ├── loader
    │   │   │   ├── ApiLoader.tsx
    │   │   │   ├── DataLoader.tsx
    │   │   │   ├── ExternalDataLoader.tsx
    │   │   │   ├── Loader.tsx
    │   │   │   ├── MockLoaderRenderer.tsx
    │   │   │   └── PageableLoader.tsx
    │   │   ├── LoaderComponent.tsx
    │   │   ├── markup-check.ts
    │   │   ├── parts.ts
    │   │   ├── renderers.ts
    │   │   ├── rendering
    │   │   │   ├── AppContent.tsx
    │   │   │   ├── AppRoot.tsx
    │   │   │   ├── AppWrapper.tsx
    │   │   │   ├── buildProxy.ts
    │   │   │   ├── collectFnVarDeps.ts
    │   │   │   ├── ComponentAdapter.tsx
    │   │   │   ├── ComponentWrapper.tsx
    │   │   │   ├── Container.tsx
    │   │   │   ├── containers.ts
    │   │   │   ├── ContainerWrapper.tsx
    │   │   │   ├── ErrorBoundary.module.scss
    │   │   │   ├── ErrorBoundary.tsx
    │   │   │   ├── InvalidComponent.module.scss
    │   │   │   ├── InvalidComponent.tsx
    │   │   │   ├── nodeUtils.ts
    │   │   │   ├── reducer.ts
    │   │   │   ├── renderChild.tsx
    │   │   │   ├── StandaloneComponent.tsx
    │   │   │   ├── StateContainer.tsx
    │   │   │   ├── UnknownComponent.module.scss
    │   │   │   ├── UnknownComponent.tsx
    │   │   │   └── valueExtractor.ts
    │   │   ├── reportEngineError.ts
    │   │   ├── RestApiProxy.ts
    │   │   ├── script-runner
    │   │   │   ├── asyncProxy.ts
    │   │   │   ├── AttributeValueParser.ts
    │   │   │   ├── bannedFunctions.ts
    │   │   │   ├── BindingTreeEvaluationContext.ts
    │   │   │   ├── eval-tree-async.ts
    │   │   │   ├── eval-tree-common.ts
    │   │   │   ├── eval-tree-sync.ts
    │   │   │   ├── ParameterParser.ts
    │   │   │   ├── process-statement-async.ts
    │   │   │   ├── process-statement-common.ts
    │   │   │   ├── process-statement-sync.ts
    │   │   │   ├── ScriptingSourceTree.ts
    │   │   │   ├── simplify-expression.ts
    │   │   │   ├── statement-queue.ts
    │   │   │   └── visitors.ts
    │   │   ├── StandaloneApp.tsx
    │   │   ├── StandaloneExtensionManager.ts
    │   │   ├── TableOfContentsContext.tsx
    │   │   ├── theming
    │   │   │   ├── _themes.scss
    │   │   │   ├── component-layout-resolver.ts
    │   │   │   ├── extendThemeUtils.ts
    │   │   │   ├── hvar.ts
    │   │   │   ├── layout-resolver.ts
    │   │   │   ├── parse-layout-props.ts
    │   │   │   ├── StyleContext.tsx
    │   │   │   ├── StyleRegistry.ts
    │   │   │   ├── ThemeContext.tsx
    │   │   │   ├── ThemeProvider.tsx
    │   │   │   ├── themes
    │   │   │   │   ├── base-utils.ts
    │   │   │   │   ├── palette.ts
    │   │   │   │   ├── root.ts
    │   │   │   │   ├── solid.ts
    │   │   │   │   ├── theme-colors.ts
    │   │   │   │   └── xmlui.ts
    │   │   │   ├── themeVars.module.scss
    │   │   │   ├── themeVars.ts
    │   │   │   ├── transformThemeVars.ts
    │   │   │   └── utils.ts
    │   │   ├── utils
    │   │   │   ├── actionUtils.ts
    │   │   │   ├── audio-utils.ts
    │   │   │   ├── base64-utils.ts
    │   │   │   ├── compound-utils.ts
    │   │   │   ├── css-utils.ts
    │   │   │   ├── DataLoaderQueryKeyGenerator.ts
    │   │   │   ├── date-utils.ts
    │   │   │   ├── extractParam.ts
    │   │   │   ├── hooks.tsx
    │   │   │   ├── LruCache.ts
    │   │   │   ├── mergeProps.ts
    │   │   │   ├── misc.ts
    │   │   │   ├── request-params.ts
    │   │   │   ├── statementUtils.ts
    │   │   │   └── treeUtils.ts
    │   │   └── xmlui-parser.ts
    │   ├── index-standalone.ts
    │   ├── index.scss
    │   ├── index.ts
    │   ├── language-server
    │   │   ├── server-common.ts
    │   │   ├── server-web-worker.ts
    │   │   ├── server.ts
    │   │   ├── services
    │   │   │   ├── common
    │   │   │   │   ├── docs-generation.ts
    │   │   │   │   ├── lsp-utils.ts
    │   │   │   │   ├── metadata-utils.ts
    │   │   │   │   └── syntax-node-utilities.ts
    │   │   │   ├── completion.ts
    │   │   │   ├── diagnostic.ts
    │   │   │   ├── format.ts
    │   │   │   └── hover.ts
    │   │   └── xmlui-metadata-generated.js
    │   ├── logging
    │   │   ├── LoggerContext.tsx
    │   │   ├── LoggerInitializer.tsx
    │   │   ├── LoggerService.ts
    │   │   └── xmlui.ts
    │   ├── logo.svg
    │   ├── parsers
    │   │   ├── common
    │   │   │   ├── GenericToken.ts
    │   │   │   ├── InputStream.ts
    │   │   │   └── utils.ts
    │   │   ├── scripting
    │   │   │   ├── code-behind-collect.ts
    │   │   │   ├── Lexer.ts
    │   │   │   ├── modules.ts
    │   │   │   ├── Parser.ts
    │   │   │   ├── ParserError.ts
    │   │   │   ├── ScriptingNodeTypes.ts
    │   │   │   ├── TokenTrait.ts
    │   │   │   ├── TokenType.ts
    │   │   │   └── tree-visitor.ts
    │   │   ├── style-parser
    │   │   │   ├── errors.ts
    │   │   │   ├── source-tree.ts
    │   │   │   ├── StyleInputStream.ts
    │   │   │   ├── StyleLexer.ts
    │   │   │   ├── StyleParser.ts
    │   │   │   └── tokens.ts
    │   │   └── xmlui-parser
    │   │       ├── CharacterCodes.ts
    │   │       ├── diagnostics.ts
    │   │       ├── fileExtensions.ts
    │   │       ├── index.ts
    │   │       ├── lint.ts
    │   │       ├── parser.ts
    │   │       ├── ParserError.ts
    │   │       ├── scanner.ts
    │   │       ├── syntax-kind.ts
    │   │       ├── syntax-node.ts
    │   │       ├── transform.ts
    │   │       ├── utils.ts
    │   │       ├── xmlui-serializer.ts
    │   │       └── xmlui-tree.ts
    │   ├── react-app-env.d.ts
    │   ├── syntax
    │   │   ├── monaco
    │   │   │   ├── grammar.monacoLanguage.ts
    │   │   │   ├── index.ts
    │   │   │   ├── xmlui-dark.ts
    │   │   │   ├── xmlui-light.ts
    │   │   │   └── xmluiscript.monacoLanguage.ts
    │   │   └── textMate
    │   │       ├── index.ts
    │   │       ├── xmlui-dark.json
    │   │       ├── xmlui-light.json
    │   │       ├── xmlui.json
    │   │       └── xmlui.tmLanguage.json
    │   ├── testing
    │   │   ├── assertions.ts
    │   │   ├── component-test-helpers.ts
    │   │   ├── ComponentDrivers.ts
    │   │   ├── drivers
    │   │   │   ├── DateInputDriver.ts
    │   │   │   ├── index.ts
    │   │   │   ├── ModalDialogDriver.ts
    │   │   │   ├── NumberBoxDriver.ts
    │   │   │   ├── TextBoxDriver.ts
    │   │   │   ├── TimeInputDriver.ts
    │   │   │   ├── TimerDriver.ts
    │   │   │   └── TreeDriver.ts
    │   │   ├── fixtures.ts
    │   │   ├── index.ts
    │   │   ├── infrastructure
    │   │   │   ├── index.html
    │   │   │   ├── main.tsx
    │   │   │   ├── public
    │   │   │   │   ├── mockServiceWorker.js
    │   │   │   │   ├── resources
    │   │   │   │   │   ├── bell.svg
    │   │   │   │   │   ├── box.svg
    │   │   │   │   │   ├── doc.svg
    │   │   │   │   │   ├── eye.svg
    │   │   │   │   │   ├── flower-640x480.jpg
    │   │   │   │   │   ├── sun.svg
    │   │   │   │   │   ├── test-image-100x100.jpg
    │   │   │   │   │   └── txt.svg
    │   │   │   │   └── serve.json
    │   │   │   └── TestBed.tsx
    │   │   └── themed-app-test-helpers.ts
    │   └── vite-env.d.ts
    ├── tests
    │   ├── components
    │   │   ├── CodeBlock
    │   │   │   └── hightlight-code.test.ts
    │   │   ├── playground-pattern.test.ts
    │   │   └── Tree
    │   │       └── Tree-states.test.ts
    │   ├── components-core
    │   │   ├── abstractions
    │   │   │   └── treeAbstractions.test.ts
    │   │   ├── container
    │   │   │   └── buildProxy.test.ts
    │   │   ├── interception
    │   │   │   ├── orderBy.test.ts
    │   │   │   ├── ReadOnlyCollection.test.ts
    │   │   │   └── request-param-converter.test.ts
    │   │   ├── scripts-runner
    │   │   │   ├── AttributeValueParser.test.ts
    │   │   │   ├── eval-tree-arrow-async.test.ts
    │   │   │   ├── eval-tree-arrow.test.ts
    │   │   │   ├── eval-tree-func-decl-async.test.ts
    │   │   │   ├── eval-tree-func-decl.test.ts
    │   │   │   ├── eval-tree-pre-post.test.ts
    │   │   │   ├── eval-tree-regression.test.ts
    │   │   │   ├── eval-tree.test.ts
    │   │   │   ├── function-proxy.test.ts
    │   │   │   ├── parser-regression.test.ts
    │   │   │   ├── process-event.test.ts
    │   │   │   ├── process-function.test.ts
    │   │   │   ├── process-implicit-context.test.ts
    │   │   │   ├── process-statement-asgn.test.ts
    │   │   │   ├── process-statement-destruct.test.ts
    │   │   │   ├── process-statement-regs.test.ts
    │   │   │   ├── process-statement-sync.test.ts
    │   │   │   ├── process-statement.test.ts
    │   │   │   ├── process-switch-sync.test.ts
    │   │   │   ├── process-switch.test.ts
    │   │   │   ├── process-try-sync.test.ts
    │   │   │   ├── process-try.test.ts
    │   │   │   └── test-helpers.ts
    │   │   ├── test-metadata-handler.ts
    │   │   ├── theming
    │   │   │   ├── border-segments.test.ts
    │   │   │   ├── component-layout.resolver.test.ts
    │   │   │   ├── layout-property-parser.test.ts
    │   │   │   ├── layout-resolver.test.ts
    │   │   │   ├── layout-resolver2.test.ts
    │   │   │   ├── layout-vp-override.test.ts
    │   │   │   └── padding-segments.test.ts
    │   │   └── utils
    │   │       ├── date-utils.test.ts
    │   │       ├── format-human-elapsed-time.test.ts
    │   │       └── LruCache.test.ts
    │   ├── language-server
    │   │   ├── completion.test.ts
    │   │   ├── format.test.ts
    │   │   ├── hover.test.ts
    │   │   └── mockData.ts
    │   └── parsers
    │       ├── common
    │       │   └── input-stream.test.ts
    │       ├── markdown
    │       │   └── parse-binding-expression.test.ts
    │       ├── parameter-parser.test.ts
    │       ├── paremeter-parser.test.ts
    │       ├── scripting
    │       │   ├── eval-tree-arrow.test.ts
    │       │   ├── eval-tree-pre-post.test.ts
    │       │   ├── eval-tree.test.ts
    │       │   ├── function-proxy.test.ts
    │       │   ├── lexer-literals.test.ts
    │       │   ├── lexer-misc.test.ts
    │       │   ├── module-parse.test.ts
    │       │   ├── parser-arrow.test.ts
    │       │   ├── parser-assignments.test.ts
    │       │   ├── parser-binary.test.ts
    │       │   ├── parser-destructuring.test.ts
    │       │   ├── parser-errors.test.ts
    │       │   ├── parser-expressions.test.ts
    │       │   ├── parser-function.test.ts
    │       │   ├── parser-literals.test.ts
    │       │   ├── parser-primary.test.ts
    │       │   ├── parser-regex.test.ts
    │       │   ├── parser-statements.test.ts
    │       │   ├── parser-unary.test.ts
    │       │   ├── process-event.test.ts
    │       │   ├── process-implicit-context.test.ts
    │       │   ├── process-statement-asgn.test.ts
    │       │   ├── process-statement-destruct.test.ts
    │       │   ├── process-statement-regs.test.ts
    │       │   ├── process-statement-sync.test.ts
    │       │   ├── process-statement.test.ts
    │       │   ├── process-switch-sync.test.ts
    │       │   ├── process-switch.test.ts
    │       │   ├── process-try-sync.test.ts
    │       │   ├── process-try.test.ts
    │       │   ├── simplify-expression.test.ts
    │       │   ├── statement-hooks.test.ts
    │       │   └── test-helpers.ts
    │       ├── style-parser
    │       │   ├── generateHvarChain.test.ts
    │       │   ├── parseHVar.test.ts
    │       │   ├── parser.test.ts
    │       │   └── tokens.test.ts
    │       └── xmlui
    │           ├── lint.test.ts
    │           ├── parser.test.ts
    │           ├── scanner.test.ts
    │           ├── transform.attr.test.ts
    │           ├── transform.circular.test.ts
    │           ├── transform.element.test.ts
    │           ├── transform.errors.test.ts
    │           ├── transform.escape.test.ts
    │           ├── transform.regression.test.ts
    │           ├── transform.script.test.ts
    │           ├── transform.test.ts
    │           └── xmlui.ts
    ├── tests-e2e
    │   ├── api-bound-component-regression.spec.ts
    │   ├── api-call-as-extracted-component.spec.ts
    │   ├── assign-to-object-or-array-regression.spec.ts
    │   ├── binding-regression.spec.ts
    │   ├── children-as-template-context-vars.spec.ts
    │   ├── compound-component.spec.ts
    │   ├── context-vars-regression.spec.ts
    │   ├── data-bindings.spec.ts
    │   ├── datasource-and-api-usage-in-var.spec.ts
    │   ├── datasource-direct-binding.spec.ts
    │   ├── datasource-onLoaded-regression.spec.ts
    │   ├── modify-array-item-regression.spec.ts
    │   ├── namespaces.spec.ts
    │   ├── push-to-array-regression.spec.ts
    │   ├── screen-breakpoints.spec.ts
    │   ├── scripting.spec.ts
    │   ├── state-scope-in-pages.spec.ts
    │   └── state-var-scopes.spec.ts
    ├── tsconfig.json
    ├── tsdown.config.ts
    ├── vite.config.ts
    └── vitest.config.ts
```

# Files

--------------------------------------------------------------------------------
/xmlui/src/components/Icon/svg/attach.svg:
--------------------------------------------------------------------------------

```
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
    <g id="surface1">
        <path stroke="none" fill-rule="nonzero" fill-opacity="1" d="M 9.886719 5.171875 L 6.113281 8.941406 C 5.855469 9.203125 5.855469 9.625 6.113281 9.886719 C 6.375 10.144531 6.796875 10.144531 7.058594 9.886719 L 10.828125 6.113281 C 11.609375 5.332031 11.609375 4.066406 10.828125 3.285156 C 10.046875 2.503906 8.78125 2.503906 8 3.285156 L 4.230469 7.058594 C 2.925781 8.359375 2.925781 10.46875 4.230469 11.769531 C 5.53125 13.074219 7.640625 13.074219 8.941406 11.769531 L 12.714844 8 L 13.65625 8.941406 L 9.886719 12.714844 C 8.0625 14.535156 5.109375 14.535156 3.285156 12.714844 C 1.464844 10.890625 1.464844 7.9375 3.285156 6.113281 L 7.058594 2.34375 C 8.359375 1.042969 10.46875 1.042969 11.769531 2.34375 C 13.074219 3.644531 13.074219 5.753906 11.769531 7.058594 L 8 10.828125 C 7.21875 11.609375 5.953125 11.609375 5.171875 10.828125 C 4.390625 10.046875 4.390625 8.78125 5.171875 8 L 8.941406 4.230469 Z M 9.886719 5.171875 "/>
    </g>
</svg>

```

--------------------------------------------------------------------------------
/xmlui/src/components/Charts/LabelList/LabelListNative.tsx:
--------------------------------------------------------------------------------

```typescript
import styles from "./LabelList.module.scss";
import type { LabelPosition } from "recharts/types/component/Label";
import type { CSSProperties } from "react";
import { useEffect, useMemo } from "react";
import { LabelList as RLabelList } from "recharts";
import { useChart, useLabelList } from "../utils/ChartProvider";
import classnames from "classnames";

type Props = {
  position: LabelPosition;
  nameKey?: string;
  style?: CSSProperties;
  className?: string;
};

export const defaultProps: Pick<Props, "position"> = {
  position: "inside",
};

export const LabelList = ({ position = defaultProps.position, nameKey: key, style, className }: Props) => {
  const { nameKey } = useChart();
  const { setLabelList } = useLabelList();

  const content = useMemo(
    () => (
      <RLabelList
        key={"labelList"}
        position={position}
        className={classnames(styles.labelList, className)}
        dataKey={key || nameKey}
        stroke="none"
        style={style}
      />
    ),
    [key, nameKey, position, style, className],
  );

  useEffect(() => {
    setLabelList(content);
  }, [content, setLabelList]);

  return null;
};

```

--------------------------------------------------------------------------------
/xmlui/src/components/ChangeListener/ChangeListenerNative.tsx:
--------------------------------------------------------------------------------

```typescript
import { useEffect, useMemo } from "react";
import { isEqual, throttle } from "lodash-es";
import { usePrevious } from "../../components-core/utils/hooks";

// =====================================================================================================================
// React ChangeListener component implementation

type Props = {
  listenTo: any;
  onChange?: (newValue: any) => void;
  throttleWaitInMs?: number;
};

export const defaultProps: Pick<Props, "throttleWaitInMs"> = {
  throttleWaitInMs: 0,
};

export function ChangeListener({ listenTo, onChange, throttleWaitInMs = defaultProps.throttleWaitInMs }: Props) {
  const prevValue = usePrevious(listenTo);

  const throttledOnChange = useMemo(() => {
    if (throttleWaitInMs !== 0 && onChange) {
      return throttle(onChange, throttleWaitInMs, {
        leading: true,
      });
    }
    return onChange;
  }, [onChange, throttleWaitInMs]);

  useEffect(() => {
    if (throttledOnChange && !isEqual(prevValue, listenTo)) {
      throttledOnChange?.({
        prevValue,
        newValue: listenTo,
      });
    }
  }, [listenTo, throttledOnChange, prevValue]);
  return null;
}

```

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

```markdown
# LabelList [#labellist]

`LabelList` adds custom data labels to chart components when automatic labeling isn't sufficient. It's a specialized component for advanced chart customization scenarios where you need precise control over label positioning and appearance.

## Properties [#properties]

### `key` [#key]

The key that needs to be matched to the data series.

### `position` (default: "inside") [#position-default-inside]

The position of the label list

Available values: `top`, `left`, `right`, `bottom`, `inside` **(default)**, `outside`, `insideLeft`, `insideRight`, `insideTop`, `insideBottom`, `insideTopLeft`, `insideBottomLeft`, `insideTopRight`, `insideBottomRight`, `insideStart`, `insideEnd`, `end`, `center`, `centerTop`, `centerBottom`, `middle`

## 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) |
| --- | --- | --- |
| [textColor](../styles-and-themes/common-units/#color)-LabelList | $textColor-primary | $textColor-primary |

```

--------------------------------------------------------------------------------
/xmlui/src/parsers/style-parser/StyleInputStream.ts:
--------------------------------------------------------------------------------

```typescript
// This class represents the input stream of the layout parser
export class StyleInputStream {
  // --- Current stream position
  private _pos = 0;

  // Creates a stream that uses the specified source code
  constructor (public readonly source: string) {}

  // Gets the current position in the stream. Starts from 0.
  get position (): number {
    return this._pos;
  }

  // Peeks the next character in the stream. Returns null, if EOF; otherwise the current source code character
  peek (): string | null {
    return this.ahead(0);
  }

  // Looks ahead with `n` characters in the stream. Returns null, if EOF; otherwise the look-ahead character
  ahead (n: number = 1): string | null {
    return this._pos + n > this.source.length - 1 ? null : this.source[this._pos + n];
  }

  // Gets the next character from the stream
  get (): string | null {
    // --- Check for EOF
    if (this._pos >= this.source.length) {
      return null;
    }

    // --- Get the char, and keep track of position
    return this.source[this._pos++];
  }

  // Gets the tail of the input stream
  getTail (start: number): string {
    return this.source?.substring(start) ?? "";
  }
}

```

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

```markdown
%-DESC-START

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`

```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).

%-DESC-END

%-PROP-START delay

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>
```

%-PROP-END

%-PROP-START fullScreen

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

%-PROP-END

```

--------------------------------------------------------------------------------
/xmlui/src/components-core/behaviors/Behavior.tsx:
--------------------------------------------------------------------------------

```typescript
import type { ReactNode } from "react";

import type { RendererContext } from "../../abstractions/RendererDefs";
import type { ComponentDef, ComponentMetadata } from "../../abstractions/ComponentDefs";

/**
 * Defines the shape of a component behavior that can wrap a component with
 * additional functionality.
 */
export interface Behavior {
  /**
   * The name of the behavior (e.g., "tooltip", "animation").
   */
  name: string;

  /**
   * A function that determines if the behavior should be applied based on the
   * component's context and props.
   * @param node The component definition.
   * @param metadata The metadata of the component.
   * @returns True if the behavior can be attached, otherwise false.
   */
  canAttach: (node: ComponentDef, metadata: ComponentMetadata) => boolean;

  /**
   * A function that attaches the behavior to the component's React node.
   * @param context The renderer context of the component.
   * @param node The React node to attach.
   * @param metadata The metadata of the component.
   * @returns The attached React node.
   */
  attach: (context: RendererContext<any>, node: ReactNode, metadata?: ComponentMetadata) => ReactNode;
}

```

--------------------------------------------------------------------------------
/docs/public/pages/howto/modify-a-value-reported-in-a-column.md:
--------------------------------------------------------------------------------

```markdown
# Modify a value reported in a Column

```xmlui-pg noHeader
---app
<App>
  <Test />
</App>
---comp display
<Component name="Test">
  <DataSource
    id="invoices_with_badges"
    url="/resources/files/invoices.json"
    transformResult="{data => data.slice(0,5)}"
  />
  <Table data="{invoices_with_badges}">
    <Column bindTo="invoice_number" />         <!-- empty tag for bound column -->
    <Column bindTo="client" />
    <Column bindTo="issue_date" />
    <Column bindTo="due_date" />
    <Column bindTo="paid_date" />
    <Column header="total">
      ${$item.total}             <!-- unbound column, prepend $ to the $item value -->
    </Column>
    <Column header="status">
        <StatusBadge status="{$item.status}" />  <!-- embed component, pass value -->
    </Column>
  </Table>
</Component>
---comp display
<Component
    name="StatusBadge"
    var.statusColors="{{
        draft: { background: '#f59e0b', label: 'white' },
        sent: { background: '#3b82f6', label: 'white' },
        paid: { background: '#10b981', label: 'white' }
    }}"
>
    <Badge
        value="{$props.status}"
        colorMap="{statusColors}"
        variant="pill"
    />
</Component>
```

```

--------------------------------------------------------------------------------
/docs/public/resources/images/logos/xmlui5.svg:
--------------------------------------------------------------------------------

```
<svg width="75" height="32" viewBox="0 0 75 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="46" y="2" width="29" height="21" fill="#DA020F"/>
<path d="M7.93731 13.2963L12.4267 20H9.21133L6.11729 14.9646L3.02326 20H0L4.40849 13.1345L0.283114 6.69363H3.39737L6.25885 11.4863L9.06977 6.69363H12.1132L7.93731 13.2963ZM26.6878 13.7007C26.6878 13.276 26.6878 12.939 26.6878 12.6896C26.6945 12.4334 26.7417 11.3987 26.8294 9.58544H26.7485L23.3107 20H20.7323L17.527 9.56522H17.4461C17.5607 11.756 17.618 13.1716 17.618 13.8119V20H15.1003V6.69363H18.9325L22.0872 16.8655H22.1377L25.4745 6.69363H29.3167V20H26.6878V13.7007ZM41.8888 20H33.6785V6.69363H36.4995V17.6744H41.8888V20Z" fill="black"/>
<path d="M59.585 6.69363H62.406V15.3084C62.4195 16.7846 61.9241 17.971 60.9197 18.8675C59.9153 19.7641 58.5705 20.2022 56.8853 20.182C55.1664 20.182 53.8351 19.7438 52.8914 18.8675C51.9544 17.9845 51.4859 16.7846 51.4859 15.2679V6.69363H54.2968V14.8433C54.2968 15.8814 54.5024 16.6363 54.9136 17.1082C55.3315 17.58 56.0056 17.816 56.9358 17.816C57.8728 17.816 58.5469 17.5767 58.9581 17.0981C59.376 16.6195 59.585 15.8611 59.585 14.8231V6.69363ZM69.48 20H66.6589V6.69363H69.48V20Z" fill="white"/>
</svg>

```

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

```typescript
import { Expression, Statement } from "../../../src/components-core/script-runner/ScriptingSourceTree";
import { BindingTreeEvaluationContext } from "../../../src/components-core/script-runner/BindingTreeEvaluationContext";
import { Parser } from "../../../src/parsers/scripting/Parser";

export function createEvalContext (parts: Partial<BindingTreeEvaluationContext>): BindingTreeEvaluationContext {
  return {
    ...{
      mainThread: {
        childThreads: [],
        blocks: [{ vars: {} }],
        loops: [],
        breakLabelValue: -1
      }
    },
    ...parts
  };
}

export function parseStatements (source: string): Statement[] {
  const wParser = new Parser(source);
  const tree = wParser.parseStatements();
  if (tree === null) {
    // --- This should happen only there were errors during the parse phase
    throw new Error("Source code parsing failed");
  }
  return tree;
}

export function parseExpression (source: string): Expression {
  const wParser = new Parser(source);
  const tree = wParser.parseExpr();
  if (tree === null) {
    // --- This should happen only there were errors during the parse phase
    throw new Error("Source code parsing failed");
  }
  return tree;
}

```

--------------------------------------------------------------------------------
/docs/public/pages/howto/delegate-a-method.md:
--------------------------------------------------------------------------------

```markdown
# Delegate a method

Use `method.` attributes to directly delegate to internal component methods:

```xmlui-pg height="350px"
---app display /myModal/ /MyModalWrapper/
<App>
  <H3>Method Delegation Example</H3>

  <Button
    label="Open Modal"
    onClick="myModal.openDialog()" />

  <MyModalWrapper id="myModal" title="Hello World!" />
</App>

---comp display /MyModalWrapper/ /internalModal/
<Component
  name="MyModalWrapper"
  method.openDialog="internalModal.open()"
  method.close="internalModal.close()">

  <ModalDialog
    id="internalModal"
    title="{$props.title}"
    maxWidth="400px">
    <VStack>
      <Text>This uses method.openDialog="internalModal.open()"</Text>
      <Text>Direct delegation - no custom logic needed</Text>

      <Button
        label="Close"
        onClick="internalModal.close()" />
    </VStack>
  </ModalDialog>
</Component>
```

**Use delegation when**: You want to expose internal methods directly without adding custom logic.

**Pros**: Simple, no JavaScript needed, clean syntax

**Cons**: No custom logic, just passes through calls

**See also**: [Expose a method from a component](/howto/expose-a-method-from-a-component) for adding custom logic to methods.
```

--------------------------------------------------------------------------------
/tools/create-app/helpers/copy.ts:
--------------------------------------------------------------------------------

```typescript
import { async as glob } from "fast-glob";
import path from "path";
import fs from "fs";

interface CopyOption {
  cwd?: string;
  rename?: (basename: string) => string;
  parents?: boolean;
}

const identity = (x: string) => x;

export const copy = async (
  src: string | string[],
  dest: string,
  { cwd, rename = identity, parents = true }: CopyOption = {}
) => {
  const source = typeof src === "string" ? [src] : src;

  if (source.length === 0 || !dest) {
    throw new TypeError("`src` and `dest` are required");
  }

  const sourceFiles = await glob(source, {
    cwd,
    dot: true,
    absolute: false,
    stats: false,
  });
  
  const destRelativeToCwd = cwd ? path.resolve(cwd, dest) : dest;

  return Promise.all(
    sourceFiles.map(async (p) => {
      const dirname = path.dirname(p);
      const basename = rename(path.basename(p));

      const from = cwd ? path.resolve(cwd, p) : p;
      const to = parents ? path.join(destRelativeToCwd, dirname, basename) : path.join(destRelativeToCwd, basename);

      // Ensure the destination directory exists
      await fs.promises.mkdir(path.dirname(to), { recursive: true });
        
      return fs.promises.copyFile(from, to);
    })
  );
};

```

--------------------------------------------------------------------------------
/xmlui/src/components/Footer/FooterNative.tsx:
--------------------------------------------------------------------------------

```typescript
import type { ForwardedRef, ReactNode } from "react";
import type React from "react";
import { forwardRef } from "react";
import classnames from "classnames";

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

import { useAppLayoutContext } from "../App/AppLayoutContext";

// =====================================================================================================================
// React Footer component implementation

export const defaultProps = {
  // No default props needed currently, but adding object for consistency
};

export const Footer = forwardRef(function Footer(
  {
    children,
    style,
    className,
    ...rest
  }: {
    children: ReactNode;
    style?: React.CSSProperties;
    className?: string;
  },
  forwardedRef: ForwardedRef<HTMLDivElement>,
) {
  const { layout } = useAppLayoutContext() || {};
  const canRestrictContentWidth = layout !== "vertical-full-header";
  return (
    <div {...rest} className={styles.outerWrapper} ref={forwardedRef} style={style} role="contentinfo">
      <div
        className={classnames(styles.wrapper, className, {
          [styles.full]: !canRestrictContentWidth,
        })}
      >
        {children}
      </div>
    </div>
  );
});

```

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

```typescript
import { createComponentRenderer } from "../../components-core/renderers";
import { useTheme } from "../../components-core/theming/ThemeContext";
import { createMetadata, d, dAutoFocus } from "../metadata-helpers";
import { EmojiSelector } from "./EmojiSelectorNative";
import { defaultProps } from "./EmojiSelectorNative";

const COMP = "EmojiSelector";

export const EmojiSelectorMd = createMetadata({
  status: "experimental",
  description:
    "`EmojiSelector` enables users to browse, search and select emojis from " +
    "their system's native emoji set.",
  props: {
    autoFocus: {
      ...dAutoFocus(),
      defaultValue: defaultProps.autoFocus,
    },
  },
  events: {
    select: d(`This event is fired when the user selects an emoticon from this component.`),
  },
});

export const emojiSelectorRenderer = createComponentRenderer(
  COMP,
  EmojiSelectorMd,
  ({ node, lookupEventHandler, extractValue }) => {
    const onActionSelect = lookupEventHandler("select");
    const theme = useTheme();

    return (
      <EmojiSelector
        select={onActionSelect}
        theme={theme.activeThemeTone as any}
        autoFocus={extractValue.asOptionalBoolean(node.props.autoFocus)}
      />
    );
  },
);

```

--------------------------------------------------------------------------------
/docs/public/pages/xmlui-animations/_overview.md:
--------------------------------------------------------------------------------

```markdown
## Xmlui Animations Package

This package contains components that deal with different sorts of animations.
These components can wrap other components and provide different sorts of animations that run when the child component visibility changes.

## Package Components

| Component | Description | Status |
| :---: | --- | :---: |
| [Animation](./xmlui-animations/Animation) |  | experimental |
| [FadeAnimation](./xmlui-animations/FadeAnimation) | The `FadeAnimation` component represents an animation that fades the content with adjustable opacity values. | experimental |
| [FadeInAnimation](./xmlui-animations/FadeInAnimation) | The `FadeInAnimation` component represents an animation that fades in the content. | experimental |
| [FadeOutAnimation](./xmlui-animations/FadeOutAnimation) | The `FadeOutAnimation` component represents an animation that fades out the content. | experimental |
| [ScaleAnimation](./xmlui-animations/ScaleAnimation) | The `ScaleAnimation` component represents an animation that scales the content. | experimental |
| [SlideInAnimation](./xmlui-animations/SlideInAnimation) | The `SlideInAnimation` component represents an animation that slides in the content from the left. | experimental |

```

--------------------------------------------------------------------------------
/docs/public/pages/howto/expose-a-method-from-a-component.md:
--------------------------------------------------------------------------------

```markdown
# Expose a method from a component

Use the `<method>` element to create custom methods with JavaScript logic:

```xmlui-pg height="350px"
---app display {6}
<App>
  <H3>Custom Method Example</H3>

  <Button
    label="Open Modal"
    onClick="myModal.openDialog()" />

  <MyModalWrapper id="myModal" title="Hello World!" />
</App>
---comp display {13-16}
<Component name="MyModalWrapper">
  <ModalDialog id="internalModal" title="{$props.title}" maxWidth="400px">
    <VStack gap="$space-3" padding="$space-4">
      <Text>This uses a custom method with JavaScript logic</Text>
      <Text>Check the console for the log message</Text>

      <Button
        label="Close"
        onClick="internalModal.close()" />
    </VStack>
  </ModalDialog>

  <method name="openDialog">
    console.log('Custom method called - opening modal');
    internalModal.open();
  </method>
</Component>
```

**Use custom methods when**: You need to add logging, validation, or other logic before/after calling internal methods.

**Pros**: Full JavaScript control, can add custom logic

**Cons**: More complex, requires JavaScript knowledge

**See also**: [Delegate a method](/howto/delegate-a-method) for a simpler approach without custom logic.
```

--------------------------------------------------------------------------------
/docs/public/resources/images/logos/xmlui1.svg:
--------------------------------------------------------------------------------

```
<svg width="65" height="24" viewBox="0 0 65 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.14773 4.45455L7.08097 9.41193H7.1946L10.142 4.45455H13.6151L9.17614 11.7273L13.7145 19H10.1776L7.1946 14.0355H7.08097L4.09801 19H0.575284L5.12784 11.7273L0.660511 4.45455H4.14773ZM15.5611 4.45455H19.3537L23.3594 14.2273H23.5298L27.5355 4.45455H31.3281V19H28.3452V9.53267H28.2244L24.4602 18.929H22.429L18.6648 9.49716H18.544V19H15.5611V4.45455ZM33.8619 19V4.45455H36.9371V16.4645H43.1729V19H33.8619Z" fill="#143566"/>
<path d="M54.1939 4.45455H57.2692V13.9006C57.2692 14.9612 57.0159 15.8892 56.5092 16.6847C56.0073 17.4801 55.3042 18.1004 54.3999 18.5455C53.4955 18.9858 52.442 19.206 51.2393 19.206C50.032 19.206 48.9761 18.9858 48.0717 18.5455C47.1674 18.1004 46.4643 17.4801 45.9624 16.6847C45.4605 15.8892 45.2095 14.9612 45.2095 13.9006V4.45455H48.2848V13.6378C48.2848 14.1918 48.4055 14.6842 48.647 15.1151C48.8932 15.5459 49.2389 15.8845 49.6839 16.1307C50.129 16.3769 50.6475 16.5 51.2393 16.5C51.8359 16.5 52.3544 16.3769 52.7947 16.1307C53.2398 15.8845 53.5831 15.5459 53.8246 15.1151C54.0708 14.6842 54.1939 14.1918 54.1939 13.6378V4.45455ZM62.8746 4.45455V19H59.7994V4.45455H62.8746Z" fill="#DA020F"/>
</svg>

```

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

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

import { createComponentRenderer } from "../../components-core/renderers";
import { parseScssVar } from "../../components-core/theming/themeVars";
import { StickyBox, defaultProps } from "./StickyBoxNative";
import { createMetadata } from "../metadata-helpers";

const COMP = "StickyBox";

export const StickyBoxMd = createMetadata({
  status: "stable",
  description:
    "`StickyBox` remains fixed at the top or bottom of the screen as the user scrolls.",
  props: {
    to: {
      description:
        "This property determines whether the StickyBox should be anchored to " +
        "the \`top\` or \`bottom\`.",
      availableValues: ["top", "bottom"],
      valueType: "string",
      defaultValue: defaultProps.to,
    },
  },
  themeVars: parseScssVar(styles.themeVars),
  defaultThemeVars: {
    [`backgroundColor-${COMP}`]: "$backgroundColor",
  },
});

export const stickyBoxComponentRenderer = createComponentRenderer(
  COMP,
  StickyBoxMd,
  ({ node, renderChild, extractValue, className }) => {
    return (
      <StickyBox uid={node.uid} className={className} to={extractValue(node.props?.to)}>
        {renderChild(node.children)}
      </StickyBox>
    );
  },
);

```

--------------------------------------------------------------------------------
/xmlui/tests/parsers/scripting/test-helpers.ts:
--------------------------------------------------------------------------------

```typescript
import { BindingTreeEvaluationContext } from "../../../src/components-core/script-runner/BindingTreeEvaluationContext";
import { Parser } from "../../../src/parsers/scripting/Parser";
import {Expression, Statement} from "../../../src/components-core/script-runner/ScriptingSourceTree";

export function createEvalContext (parts: Partial<BindingTreeEvaluationContext>): BindingTreeEvaluationContext {
  return {
    ...{
      mainThread: {
        childThreads: [],
        blocks: [{ vars: {} }],
        loops: [],
        breakLabelValue: -1
      },
      valueCache: new Map(),
    },
    ...parts
  };
}

export function parseStatements (source: string): Statement[] {
  const wParser = new Parser(source);
  const tree = wParser.parseStatements();
  if (tree === null) {
    // --- This should happen only there were errors during the parse phase
    throw new Error("Source code parsing failed");
  }
  return tree;
}

export function parseExpression (source: string): Expression {
  const wParser = new Parser(source);
  const tree = wParser.parseExpr();
  if (tree === null) {
    // --- This should happen only there were errors during the parse phase
    throw new Error("Source code parsing failed");
  }
  return tree;
}

```

--------------------------------------------------------------------------------
/packages/xmlui-pdf/src/Pdf.tsx:
--------------------------------------------------------------------------------

```typescript
import { forwardRef, useState } from "react";
import styles from "./Pdf.module.scss";
import { Document, Page, pdfjs } from "react-pdf";
import workerUrl from "pdfjs-dist/build/pdf.worker.min.mjs?url";
import "react-pdf/dist/Page/TextLayer.css";
import "react-pdf/dist/Page/AnnotationLayer.css";
//
pdfjs.GlobalWorkerOptions.workerSrc = workerUrl;

// =====================================================================================================================
// React Pdf component implementation

interface Props {
  src?: string;
  data?: any; // Binary data for PDF content
}

const Pdf = forwardRef(({ src, data }: Props, ref) => {
  const [numPages, setNumPages] = useState<number | null>(null);

  function onLoadSuccess({ numPages }: { numPages: number }) {
    setNumPages(numPages);
  }

  // Use data if provided, otherwise use src
  const fileSource = data || src;

  return (
    <Document
      file={fileSource}
      onLoadSuccess={onLoadSuccess}
      className={styles.document}
      inputRef={ref as any}
    >
      {Array.from(new Array(numPages), (_, index) => (
        <Page key={index + 1} pageNumber={index + 1} loading="" className={styles.page} />
      ))}
    </Document>
  );
});

export default Pdf;

```

--------------------------------------------------------------------------------
/xmlui/src/components-core/script-runner/bannedFunctions.ts:
--------------------------------------------------------------------------------

```typescript
/**
 * Checks if the specified function object is banned from running.
 * @param func Function to check
 * @return Information about the banned state, including a helper text
 */
export function isBannedFunction(func: any): BannedFunctionResult {
  if (func === undefined) {
    return { banned: false };
  }
  const bannedInfo = bannedFunctions.find((f) => f.func === func);
  return bannedInfo
    ? { banned: true, func: bannedInfo.func, help: bannedInfo.help }
    : { banned: false };
}

/**
 * List of global functions we do not allow to call
 */
const bannedFunctions: BannedFunctionInfo[] = [
  { func: globalThis.cancelAnimationFrame },
  { func: globalThis.cancelIdleCallback },
  { func: globalThis.clearInterval },
  { func: globalThis.clearImmediate },
  { func: globalThis.clearTimeout },
  { func: globalThis.eval },
  { func: globalThis.queueMicrotask },
  { func: globalThis.requestAnimationFrame },
  { func: globalThis.requestIdleCallback },
  { func: globalThis.setImmediate },
  { func: globalThis.setInterval },
  { func: globalThis.setTimeout, help: "Use 'delay'" },
];

type BannedFunctionInfo = {
  func?: (...args: any[]) => any;
  help?: string;
};

type BannedFunctionResult = BannedFunctionInfo & {
  banned: boolean;
};

```

--------------------------------------------------------------------------------
/docs/public/pages/howto/debug-a-component.md:
--------------------------------------------------------------------------------

```markdown
# Debug a component

```xmlui-pg
---app
<App>
  <Test />
</App>
---api
{
  "apiUrl": "/api",
  "initialize": "$state.user_data = {
      id: 42,
      name: 'John Doe',
      preferences: { theme: 'dark', notifications: true },
      recentItems: ['item1', 'item2', 'item3']
    }",
  "operations": {
    "get_user_data": {
      "url": "/user_data",
      "method": "get",
      "handler": "console.log('API called:', $state.user_data); return $state.user_data"
    }
  }
}
---comp display
<Component name="Test"
  var.counter = "{1}"
>

  <DataSource
    id="userData"
    url="/api/user_data"
  />

  <script>
    // can customize here
    function debug(msg, data) {
      console.log(msg, data)
    };
  </script>

  <Text>Method 1: JSON.stringify with preserveLinebreaks</Text>

  <Text preserveLinebreaks="true">
    {JSON.stringify(userData.value, null, 2)}
  </Text>

  <Text>Method 2: Console.log in handler</Text>

  <Button
    label="Log to console"
    onClick="console.log(userData);console.log(userData.value)"
  />

  <Text>Method 3: Use Fragment and custom debug function to watch changes</Text>

  <Fragment when="{debug('counter', counter)}" />

  <Button
    label="Update counter"
    onClick="{counter++}"
  />

</Component>
```

```

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

```markdown
%-DESC-START

**Key features:**
- **Automatic fallback**: Shows initials when no image URL is provided or image fails to load
- **Multiple sizes**: From `xs` (extra small) to `lg` (large) to fit different contexts
- **Clickable**: Supports click events for profile actions, modals, or navigation
- **Accessible**: Automatically generates appropriate alt text from the name

%-DESC-END

%-PROP-START name

```xmlui-pg copy display name="Example: name"
<App>
  <Avatar name="John, Doe" />
</App>
```
%-PROP-END

%-PROP-START size

```xmlui-pg copy display name="Example: size"
<App>
  <HStack>
    <Avatar name="Dorothy Ellen Fuller" />
    <Avatar name="Xavier Schiller" size="xs" />
    <Avatar name="Sebastien Moore" size="sm" />
    <Avatar name="Molly Dough" size="md" />
    <Avatar name="Lynn Gilbert" size="lg" />
  </HStack>
</App>
```

%-PROP-END

%-PROP-START url

```xmlui-pg copy display name="Example: url"
<App>
  <Avatar url="https://i.pravatar.cc/100" size="md" />
</App>
```

%-PROP-END

%-EVENT-START click

```xmlui-pg copy display name="Example: click"
<App>
  <HStack verticalAlignment="center">
    <Avatar name="Molly Dough" size="md" onClick="toast('Avatar clicked')" />
    Click the avatar!
  </HStack>
</App>
```

%-EVENT-END

```

--------------------------------------------------------------------------------
/xmlui/src/components/chart-color-schemes.ts:
--------------------------------------------------------------------------------

```typescript
const colorSchemes: any = {
    "set3": "set3",
    "tableau10": "tableau10",
    "brown_blueGreen": "brown_blueGreen",
    "purpleRed_green": "purpleRed_green",
    "pink_yellowGreen": "pink_yellowGreen",
    "purple_orange": "purple_orange",
    "red_blue": "red_blue",
    "red_grey": "red_grey",
    "red_yellow_blue": "red_yellow_blue",
    "red_yellow_green": "red_yellow_green",
    "spectral": "spectral",
    "blues": "blues",
    "greens": "greens",
    "greys": "greys",
    "oranges": "oranges",
    "purples": "purples",
    "reds": "reds",
    "blue_green": "blue_green",
    "blue_purple": "blue_purple",
    "green_blue": "green_blue",
    "orange_red": "orange_red",
    "purple_blue_green": "purple_blue_green",
    "purple_blue": "purple_blue",
    "purple_red": "purple_red",
    "red_purple": "red_purple",
    "yellow_green_blue": "yellow_green_blue",
    "yellow_green": "yellow_green",
    "yellow_orange_brown": "yellow_orange_brown",
    "yellow_orange_red": "yellow_orange_red",
    "nivo": "nivo",
    "category10": "category10",
    "accent": "accent",
    "dark2": "dark2",
    "paired": "paired",
    "pastel1": "pastel1",
    "pastel2": "pastel2",
    "set1": "set1",
    "set2": "set2"
};

export default colorSchemes;

```

--------------------------------------------------------------------------------
/docs/public/pages/xmlui-charts/LineChart.md:
--------------------------------------------------------------------------------

```markdown
# LineChart [#linechart]

>[!WARNING]
> This component is in an **experimental** state; you can use it in your app. However, we may modify it, and it may even have breaking changes in the future.Represents a line chart component.

## Properties

### `data`

The data to be displayed in the line chart.It needs to be an array of objects, where each object represents a data point.

### `dataKeys`

This property specifies the keys in the data objects that should be used for rendering the lines.

### `hideTooltip (default: false)`

Determines whether the tooltip should be hidden.If set to (`true`), no tooltip will be shown when hovering over data points.

### `hideX (default: false)`

Determines whether the X-axis should be hidden. If set to (`true`), the axis will not be displayed.

### `nameKey`

The key in the data objects used for labeling different data series.

### `showLegend (default: false)`

Determines whether the legend should be displayed.

### `tickFormatter`

A function that formats the axis tick labels. It receives a tick value and returns a formatted string.

## Events

This component does not have any events.

## Exposed Methods

This component does not expose any methods.

## Styling

This component does not have any styles.

```

--------------------------------------------------------------------------------
/docs/public/pages/howto/group-items-in-list-by-a-property.md:
--------------------------------------------------------------------------------

```markdown
# Group items in List by a property

```xmlui-pg noHeader
---app
<App>
  <Test />
</App>
---api display
{
  "apiUrl": "/api",
  "initialize": "$state.people_groupby = [
    { 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-groupby": {
      "url": "/people_groupby",
      "method": "get",
      "handler": "return { status: 'ok', data: { items: $state.people_groupby } }"
    }
  }
}
---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' }
      ]
  }
  -->

  <DataSource
    id="allPeopleGroupBy"
    url="/api/people_groupby"
    resultSelector="data.items"
  />
  <List data="{allPeopleGroupBy}" groupBy="group">
    <property name="groupHeaderTemplate">
      <Text variant="subtitle">Group {$group.key}</Text>
    </property>
    <Text>{$item.name}</Text>
  </List>
</Component>
```

```

--------------------------------------------------------------------------------
/xmlui/src/components/ProgressBar/ProgressBar.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);
}

$backgroundColor-ProgressBar: createThemeVar("backgroundColor-ProgressBar");
$color-indicator-ProgressBar: createThemeVar("color-indicator-ProgressBar");
$borderRadius-ProgressBar: createThemeVar("borderRadius-ProgressBar");
$borderRadius-indicator-ProgressBar: createThemeVar("borderRadius-indicator-ProgressBar");
$thickness-ProgressBar: createThemeVar("thickness-ProgressBar");

@layer components {
  .wrapper {
    width: 100%;
    background-color: $backgroundColor-ProgressBar;
    border-radius: $borderRadius-ProgressBar;
    overflow: hidden;
    position: relative;
    height: $thickness-ProgressBar;
  }

  .bar {
    position: absolute;
    background-color: $color-indicator-ProgressBar;
    border-radius: $borderRadius-indicator-ProgressBar;
    left: 0;
    top: 0;
    bottom: 0;
  }
}

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

```

--------------------------------------------------------------------------------
/packages/xmlui-playground/src/playground/ThemeSwitcher.tsx:
--------------------------------------------------------------------------------

```typescript
import { usePlayground } from "../hooks/usePlayground";
import { MdOutlinePalette } from "react-icons/md";
import { activeThemeChanged } from "../state/store";
import { forwardRef } from "react";
import { Button, DropdownMenu, Icon, MenuItem, Text, Tooltip } from "xmlui";
import styles from "./ThemeSwitcher.module.scss";

export const ThemeSwitcher = forwardRef<HTMLButtonElement>(() => {
  const { appDescription, options, dispatch } = usePlayground();

  return (
    <Tooltip text="Change theme">
      <DropdownMenu
        triggerTemplate={<Button variant="ghost" size="sm" icon={<MdOutlinePalette />} />}
      >
        <Text className={styles.sectionTitle} variant="strong">
          Themes
        </Text>
        {appDescription.availableThemes &&
          appDescription.availableThemes.length > 0 &&
          appDescription.availableThemes.map((theme, index) => (
            <MenuItem
              iconPosition="end"
              icon={theme.id === options.activeTheme ? <Icon name="checkmark" /> : undefined}
              key={index}
              label={theme.id}
              onClick={() => dispatch(activeThemeChanged(theme.id))}
            />
          ))}
      </DropdownMenu>
    </Tooltip>
  );
});

ThemeSwitcher.displayName = "ThemeSwitcher";

```

--------------------------------------------------------------------------------
/tools/vscode/esbuild.js:
--------------------------------------------------------------------------------

```javascript
const esbuild = require("esbuild");

const production = process.argv.includes("--production");
const watch = process.argv.includes("--watch");

async function main() {
  const ctx = await esbuild.context({
    entryPoints: ["src/extension.ts", "src/server.ts"],
    bundle: true,
    format: "cjs",
    minify: production,
    sourcemap: !production,
    sourcesContent: false,
    platform: "node",
    outdir: "dist",
    external: ["vscode"],
    logLevel: "warning",
    plugins: [
      /* add to the end of plugins array */
      esbuildProblemMatcherPlugin,
    ],
  });
  if (watch) {
    await ctx.watch();
  } else {
    await ctx.rebuild();
    await ctx.dispose();
  }
}

/**
 * @type {import('esbuild').Plugin}
 */
const esbuildProblemMatcherPlugin = {
  name: "esbuild-problem-matcher",

  setup(build) {
    build.onStart(() => {
      console.log("[watch] build started");
    });
    build.onEnd((result) => {
      result.errors.forEach(({ text, location }) => {
        console.error(`✘ [ERROR] ${text}`);
        if (location == null) return;
        console.error(`    ${location.file}:${location.line}:${location.column}:`);
      });
      console.log("[watch] build finished");
    });
  },
};

main().catch((e) => {
  console.error(e);
  process.exit(1);
});

```

--------------------------------------------------------------------------------
/xmlui/src/components/FormItem/HelperText.tsx:
--------------------------------------------------------------------------------

```typescript
import type { CSSProperties } from "react";
import classnames from "classnames";

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

import type { ValidationStatus } from "../abstractions";
import { WarningIcon } from "../Icon/WarningIcon";
import { ErrorIcon } from "../Icon/ErrorIcon";

// =====================================================================================================================
// React HelperText component implementation

type Props = {
  text?: string;
  status?: ValidationStatus;
  style?: CSSProperties
};

export const HelperText = ({ text = "", status, style }: Props) => {
  const renderStatusIcon = () => {
    if (status === "warning") {
      return <WarningIcon color="var(--xmlui-color-warning)" />;
    } else if (status === "error") {
      return <ErrorIcon color="var(--xmlui-color-error)" />;
    }
  };

  return (
    <div
      data-validation-status={status}
      style={style}
      className={classnames(styles.helper, {
        [styles.valid]: status === "valid",
        [styles.warning]: status === "warning",
        [styles.error]: status === "error",
      })}
    >
      {status && <div style={{ flexShrink: 0 }}>{renderStatusIcon()}</div>}
      {text && <div className={styles.helperText}>{text}</div>}
    </div>
  );
};

```

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

```typescript
import type { To } from "react-router-dom";
import { Navigate } from "@remix-run/react";

import { createComponentRenderer } from "../../components-core/renderers";
import { createUrlWithQueryParams } from "../component-utils";
import { createMetadata } from "../metadata-helpers";

const COMP = "Redirect";

export const defaultProps = {
  to: "",
};

export const RedirectMd = createMetadata({
  status: "stable",
  description:
    "`Redirect` immediately redirects the browser to the URL in its `to` property when " +
    "it gets visible (its `when` property gets `true`). It works only within " +
    "[App](/components/App), not externally.",
  props: {
    replace: {
      description: `This boolean property indicates whether the redirect should replace the current history entry or create a new one.`,
      defaultValue: false,
    },
    to: {
      description: `This property defines the URL to which this component is about to redirect requests.`,
      defaultValue: defaultProps.to,
    },
  },
});

export const redirectRenderer = createComponentRenderer(
  COMP,
  RedirectMd,
  ({ node, extractValue }) => {
    return <Navigate to={createUrlWithQueryParams(extractValue(node.props.to)) as To} replace={extractValue.asOptionalBoolean(node.props.replace)} />;
  },
);

```

--------------------------------------------------------------------------------
/xmlui/src/components-core/rendering/InvalidComponent.tsx:
--------------------------------------------------------------------------------

```typescript
import type React from "react";

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

import type { ComponentDef } from "../../abstractions/ComponentDefs";
import { EMPTY_ARRAY } from "../constants";

// --- Represents the properties of InvalidComponent
type Props = {
  // -- Errors found while validating component prperties
  errors?: string[];

  // -- The definition of the component validated
  node: ComponentDef;

  // --- Component children to render with the error message
  children?: React.ReactNode;
};

/**
 * This component displays run time errors found while the rendering engine
 * runs. If it finds an issue that hinders regular operation, it renders this
 * component instead of the faulty one.
 */
function InvalidComponent({ errors = EMPTY_ARRAY, node, children }: Props) {
  return (
    <>
      <div className={styles.errorOverlay}>
        <div className={styles.title}>
          <span>
            <b>{node.type}</b> component problems:
          </span>
        </div>
        <ul className={styles.errorItems}>
          {errors.map((error: string, i) => (
            <li className={styles.errorItem} key={i}>
              {error}
            </li>
          ))}
        </ul>
      </div>
      {children}
    </>
  );
}

export default InvalidComponent;

```

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

```typescript
import { createComponentRenderer } from "../../components-core/renderers";
import { createMetadata } from "../metadata-helpers";
import { Logo, defaultProps } from "./LogoNative";

const COMP = "Logo";

export const LogoMd = createMetadata({
  status: "stable",
  description:
    "`Logo` displays your application's brand symbol by automatically loading logo " +
    "images defined in the app manifest. While logos are typically configured " +
    "using App-level properties (`logo`, `logo-dark`), this component provides " +
    "direct control when you need custom logo placement or templating.",
  props: {
    alt: {
      description: "Alternative text for the logo image for accessibility.",
      type: "string",
      defaultValue: defaultProps.alt,
    },
    inline: {
      description: `When set to true, the image will be displayed as an inline element instead of a block element.`,
      type: "boolean",
      defaultValue: defaultProps.inline,
    },
  },
});

export const logoComponentRenderer = createComponentRenderer(
  COMP,
  LogoMd,
  ({ node, className, extractValue }) => {
    return (
      <Logo
        className={className}
        inline={extractValue.asOptionalBoolean(node.props.inline)}
        alt={extractValue(node.props.alt)}
      />
    );
  },
);

```

--------------------------------------------------------------------------------
/docs/public/pages/hosted-deployment.md:
--------------------------------------------------------------------------------

```markdown
# Hosted deployment

You can copy the structure shown in [App Structure](/app-structure) to any webserver configured to serve `index.html` and its subfolders.

Here are some common alternatives.

## Use an AWS Bucket

Your app can run from an AWS bucket. Here's the minimal app served that way: [http://xmlui-minimal.s3-website-us-east-1.amazonaws.com/](http://xmlui-minimal.s3-website-us-east-1.amazonaws.com/).

> [!INFO] **AWS recipe**
> - Upload xmlui-minimal folder to an AWS bucket
> - In Permissions, turn off the 'Block public access' setting
> - In Permissions, allow 'PublicRead'
> ```json
> {
>   "Version": "2012-10-17",
>   "Statement": [
>     {
>       "Sid": "PublicRead",
>       "Effect": "Allow",
>       "Principal": "*",
>       "Action": "s3:GetObject",
>       "Resource": "arn:aws:s3:::xmlui-minimal/*"
>     }
>   ]
> }
> ```
> - In Properties, turn on 'Static website hosting' and set 'index.html' as the default

## Use Netlify

You can just drag-and-drop the folder to Netlify: [https://xmlui-minimal.netlify.app/](https://xmlui-minimal.netlify.app/).

> [!INFO] **Netlify recipe**
> - Go to <a href="https://app.netlify.com/drop">https://app.netlify.com/drop</a>
> - Drag the xmlui-minimal folder to the drop target
> - Rename the appIn Permissions, allow 'PublicRead'

```

--------------------------------------------------------------------------------
/packages/xmlui-playground/src/playground/PlaygroundContent.tsx:
--------------------------------------------------------------------------------

```typescript
import styles from "./PlaygroundContent.module.scss";
import { usePlayground } from "../hooks/usePlayground";
import classnames from "classnames";
import { Preview } from "./Preview";
import { Splitter } from "xmlui";
import { Editor } from "./Editor";

type PlaygroundContentProps = {
  height?: number | string;
  initialPrimarySize?: string;
  standalone?: boolean;
};

export const PlaygroundContent = ({
  height,
  initialPrimarySize,
  standalone,
}: PlaygroundContentProps) => {
  const { options, status, editorStatus } = usePlayground();

  return (
    <div
      className={classnames(styles.playgroundContent, {
        [styles.standaloneMode]: standalone,
      })}
      style={{ height }}
    >
      {status === "loaded" &&
        (standalone ? (
          options.previewMode ? (
            <Preview />
          ) : (
            <Splitter
              orientation={options.orientation}
              swapped={options.swapped}
              initialPrimarySize={initialPrimarySize}
            >
              <Editor />
              <div style={{ height: "100%", width: "100%", overflow: "hidden" }}>
                {editorStatus === "loaded" && <Preview />}
              </div>
            </Splitter>
          )
        ) : (
          <Preview />
        ))}
    </div>
  );
};

```

--------------------------------------------------------------------------------
/docs/public/pages/xmlui-animations/FadeAnimation.md:
--------------------------------------------------------------------------------

```markdown
# FadeAnimation [#fadeanimation]

>[!WARNING]
> This component is in an **experimental** state; you can use it in your app. However, we may modify it, and it may even have breaking changes in the future.The `FadeAnimation` component represents an animation that fades the content with adjustable opacity values.

## Properties

### `animateWhenInView`

Indicates whether the animation should start when the component is in view

### `delay (default: 0)`

The delay before the animation starts in milliseconds

### `duration`

The duration of the animation in milliseconds

### `from (default: 0)`

Sets the initial opacity of the content.If the `to` property is not set, the initial opacity set here will be used as the final opacity.

### `loop (default: false)`

Indicates whether the animation should loop

### `reverse (default: false)`

Indicates whether the animation should run in reverse

### `to (default: 1)`

Sets the final opacity of the content.If the `from` property is not set, the initial opacity set here will be used as the final opacity.

## Events

### `started`

Event fired when the animation starts

### `stopped`

Event fired when the animation stops

## Exposed Methods

### `start`

Starts the animation

### `stop`

Stops the animation

## Styling

This component does not have any styles.

```

--------------------------------------------------------------------------------
/xmlui/src/components/ModalDialog/Dialog.tsx:
--------------------------------------------------------------------------------

```typescript
import type React from "react";

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

import { Text } from "../Text/TextNative";
import { ModalDialog } from "./ModalDialogNative";

export type Props = {
  title?: string;
  description?: string;
  isOpen?: boolean;
  onClose: () => (Promise<boolean | undefined | void> | boolean | undefined | void);
  buttons: React.ReactNode;
  // Accept any React component - provides a way to add custom content to the dialog,
  // like complex layouts, images, etc.
  children?: React.ReactNode;
  portalTo?: HTMLElement;
};

/**
 * Dialog component that is customizable with action buttons. The children prop accepts React elements.
 *
 * Note that clicking outside of the dialog or pressing Escape will call the onClose function.
 * Thus, if you want to stop that from firing, do so in the onClose function from outside.
 */
export const Dialog = ({
  title,
  description,
  children,
  isOpen,
  onClose,
  buttons,
}: Props) => {
  return (
    <ModalDialog onClose={onClose} isInitiallyOpen={isOpen} title={title}>
      <div className={styles.dialogContent}>
        <div id="dialogDesc">
          <Text>{description}</Text>
        </div>
        {children}
      </div>
      {!!buttons && <footer className={styles.dialogActions}>{buttons}</footer>}
    </ModalDialog>
  );
};

```

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

```markdown
# SpaceFiller [#spacefiller]

`SpaceFiller` works well in layout containers to fill remaining (unused) space. Its behavior depends on the layout container in which it is used.

## Using `SpaceFiller` [#using-spacefiller]

In a `Stack`, `SpaceFiller` pushes the children following it to the other end of the container:

```xmlui-pg copy display {3} name="SpaceFiller in an HStack"
<App>
  <HStack>
    <Stack width="36px" height="36px" backgroundColor="red" />
    <SpaceFiller />
    <Stack width="36px" height="36px" backgroundColor="blue" />
  </HStack>
</App>
```

In a `FlowLayout`, `SpaceFiller` acts as a line break for a row. The children following the `SpaceFiller` enters a new line.

```xmlui-pg copy display {3} name="Example: in a FlowLayout"
<App>
  <FlowLayout>
    <Stack width="20%" height="36px" backgroundColor="red" />
    <SpaceFiller />
    <Stack width="20%" height="36px" backgroundColor="green" />
    <Stack width="20%" height="36px" backgroundColor="blue" />
  </FlowLayout>
</App>
```

## Properties [#properties]

This component does not have any properties.

## Events [#events]

This component does not have any events.

## Exposed Methods [#exposed-methods]

This component does not expose any methods.

## Styling [#styling]

`SpaceFiller` ignores all layout properties; it cannot be styled.

```

--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------

```json
{
  "name": "xmlui-root",
  "version": "1.0.0",
  "description": "Root folder of XMLUI",
  "private": true,
  "workspaces": [
    "./xmlui",
    "./docs",
    "./blog",
    "./tools/create-app",
    "./tools/vscode",
    "./packages/*"
  ],
  "devDependencies": {
    "@changesets/cli": "^2.29.4",
    "@playwright/test": "1.53.0",
    "@typescript-eslint/eslint-plugin": "^8.15.0",
    "cross-env": "^10.1.0",
    "turbo": "^2.5.6"
  },
  "packageManager": "npm@10.9.2",
  "scripts": {
    "changeset:add": "changeset add",
    "changeset:version": "changeset version",
    "changeset:publish": "changeset publish",
    "build-xmlui": "turbo run build:xmlui-all",
    "build-vscode-extension": "turbo run xmlui-vscode#build:vsix",
    "test": "turbo run test:all",
    "test-smoke": "turbo run test:smoke",
    "test-e2e-dev": "playwright test",
    "test:e2e": "cross-env PLAYWRIGHT_USE_DEV_SERVER=false playwright test",
    "test:e2e:smoke": "cross-env PLAYWRIGHT_USE_DEV_SERVER=false playwright test --project=*-smoke",
    "build-extensions": "turbo run build:extension",
    "build-docs": "turbo run build:docs",
    "release-docs": "turbo run release:docs",
    "build-blog": "turbo run build:blog",
    "watch-docs-content": "turbo watch generate-docs-summaries",
    "generate-docs": "turbo run generate-docs"
  }
}

```

--------------------------------------------------------------------------------
/xmlui/scripts/get-langserver-metadata.js:
--------------------------------------------------------------------------------

```javascript
import { collectedComponentMetadata } from "../dist/metadata/xmlui-metadata.js";
generateLangServerMetadata(collectedComponentMetadata);

/**
 * @typedef {import('../src/language-server/services/common').ComponentMetadataCollection} ComponentMetadataCollection
 * @typedef {import('../src/abstractions/ComponentDefs.js').ComponentMetadata} ComponentMetadata
 */

/**
 *
 * @param {Record<string, ComponentMetadata} metaByComp
 */
function generateLangServerMetadata(metaByComp) {
  /** @type {ComponentMetadataCollection} */
  const simplifiedMetadata = {};
  for (const [compName, componentData] of Object.entries(metaByComp)) {
    simplifiedMetadata[compName] = {
      description: componentData.description,
      status: componentData.status,
      props: componentData.props,
      events: componentData.events,
      apis: componentData.apis,
      contextVars: componentData.contextVars,
      allowArbitraryProps: componentData.allowArbitraryProps,
      shortDescription: componentData.shortDescription,
    };
  }

  const fileContent = `// This file is auto-generated. Do not edit manually.
export default ${JSON.stringify(metaByComp, null, 2)};
`;

  process.stdout.write(fileContent, (err) => {
    if (err) {
      console.error(`Could not write generated metadata to stdout:\n ${err.message}`);
    }
  });
}

```

--------------------------------------------------------------------------------
/tools/create-app/helpers/git.ts:
--------------------------------------------------------------------------------

```typescript
import { execSync } from "child_process";
import path from "path";
import fs from "fs";

function isInGitRepository(): boolean {
  try {
    execSync("git rev-parse --is-inside-work-tree", { stdio: "ignore" });
    return true;
  } catch (_) {}
  return false;
}

function isInMercurialRepository(): boolean {
  try {
    execSync("hg --cwd . root", { stdio: "ignore" });
    return true;
  } catch (_) {}
  return false;
}

function isDefaultBranchSet(): boolean {
  try {
    execSync("git config init.defaultBranch", { stdio: "ignore" });
    return true;
  } catch (_) {}
  return false;
}

export function tryGitInit(root: string): boolean {
  let didInit = false;
  try {
    execSync("git --version", { stdio: "ignore" });
    if (isInGitRepository() || isInMercurialRepository()) {
      return false;
    }

    execSync("git init", { stdio: "ignore" });
    didInit = true;

    if (!isDefaultBranchSet()) {
      execSync("git checkout -b main", { stdio: "ignore" });
    }

    execSync("git add -A", { stdio: "ignore" });
    execSync('git commit -m "Initial commit from Create Next App"', {
      stdio: "ignore",
    });
    return true;
  } catch (e) {
    if (didInit) {
      try {
        fs.rmSync(path.join(root, ".git"), { recursive: true, force: true });
      } catch (_) {}
    }
    return false;
  }
}

```

--------------------------------------------------------------------------------
/xmlui/src/components-core/rendering/containers.ts:
--------------------------------------------------------------------------------

```typescript
/**
 * This enumeration defines the available actions on a view container. We use these actions in the redux-style state
 * management of the component rendering engine.
 */
export const enum ContainerActionKind {
  LOADER_LOADED = "ContainerActionKind:LOADER_LOADED",
  LOADER_IN_PROGRESS_CHANGED = "ContainerActionKind:LOADER_IN_PROGRESS_CHANGED",
  LOADER_IS_REFETCHING_CHANGED = "ContainerActionKind:LOADER_IS_REFETCHING_CHANGED",
  LOADER_ERROR = "ContainerActionKind:LOADER_ERROR",
  EVENT_HANDLER_STARTED = "ContainerActionKind:EVENT_HANDLER_STARTED",
  EVENT_HANDLER_COMPLETED = "ContainerActionKind:EVENT_HANDLER_COMPLETED",
  EVENT_HANDLER_ERROR = "ContainerActionKind:EVENT_HANDLER_ERROR",
  COMPONENT_STATE_CHANGED = "ContainerActionKind:COMPONENT_STATE_CHANGED",
  STATE_PART_CHANGED = "ContainerActionKind:STATE_PART_CHANGED",
}

// Represents a reducer action dispatched in a view container
export interface ContainerAction {
  type: ContainerActionKind;
  // Potential improvement: Try to specify the type with more details
  payload: {
    uid?: any;
    data?: any;
    error?: any;
    value?: any;
    byId?: any;
    inProgress?: any;
    isRefetching?: any;
    loaded?: any;
    pageInfo?: any;
    path?: any;
    target?: any;
    actionType?: any;
    state?: any;
    eventName?: any;
    localVars?: any;
  };
}

```

--------------------------------------------------------------------------------
/xmlui/src/components/Input/InputDivider.tsx:
--------------------------------------------------------------------------------

```typescript
import type React from "react";
import classnames from "classnames";
import styles from "./InputDivider.module.scss";

/**
 * Props for InputDivider component.
 */
export interface InputDividerProps {
  /** The separator character/string to display */
  separator: string;
  /** Optional custom className for styling and spacing */
  className?: string;
}

/**
 * InputDivider is a simple component for displaying separators between input fields.
 * 
 * This component is designed to be used in multi-field input scenarios like TimeInput 
 * and DateInput where visual separators (like ":", "/", "-") are needed between fields.
 * 
 * Key features:
 * - Flexible separator content (single or multi-character strings)
 * - CSS class-based styling for maximum flexibility
 * - Consistent behavior across different input components
 * 
 * @example
 * ```tsx
 * // Time separator
 * <InputDivider separator=":" className={styles.divider} />
 * 
 * // Date separator
 * <InputDivider separator="/" className={styles.divider} />
 * 
 * // Custom separator
 * <InputDivider separator=" • " className="custom-separator" />
 * ```
 */
export function InputDivider({ 
  separator, 
  className 
}: InputDividerProps): React.ReactElement {
  return (
    <span className={classnames(styles.inputDivider, className)}>
      {separator}
    </span>
  );
}

```

--------------------------------------------------------------------------------
/xmlui/src/components/Items/ItemsNative.tsx:
--------------------------------------------------------------------------------

```typescript
import { Fragment, type ReactNode, useMemo } from "react";
import { isPlainObject } from "lodash-es";

// =====================================================================================================================
// React Items component implementation

type Props = {
  items: any[];
  renderItem: (contextVars: any, key: number) => ReactNode;
  reverse?: boolean;
};

export const defaultProps: Pick<Props, "reverse"> = {
  reverse: false,
};

export function Items({ items, renderItem, reverse = defaultProps.reverse }: Props) {
  const itemsToRender = useMemo(() => {
    if (!items) {
      return [];
    }
    let normalizedItems = items;
    if (isPlainObject(items)) {
      normalizedItems = Object.values(items);
    }
    return reverse ? [...normalizedItems].reverse() : normalizedItems;
  }, [items, reverse]);

  if (!itemsToRender || !Array.isArray(itemsToRender)) {
    return null;
  }

  return (
    <>
      {itemsToRender.map((item, index) => {
        return (
          <Fragment key={index}>
            {renderItem?.(
              {
                $item: item,
                $itemIndex: index,
                $isFirst: index === 0,
                $isLast: index === itemsToRender.length - 1,
              },
              index,
            )}
          </Fragment>
        );
      })}
    </>
  );
}

```

--------------------------------------------------------------------------------
/xmlui/src/components-core/interception/apiInterceptorWorker.ts:
--------------------------------------------------------------------------------

```typescript
import type { SetupWorker } from "msw/browser";
import { setupWorker } from "msw/browser";
import type { RequestHandler } from "msw";
import { http } from "msw";
import { isArray } from "lodash-es";

import type { ApiInterceptor } from "./ApiInterceptor";

// Create handlers for the specified API interceptor
function createHandlers(api: ApiInterceptor) {
  const operations = api.getOperations();
  let handlers: Array<RequestHandler> = [];
  Object.entries(operations).forEach(([operationId, operation]) => {
    let urls = [operation.url];
    if (isArray(operation.url)) {
      urls = operation.url;
    }
    urls.forEach((operationUrl) => {
      handlers.push(
        http[operation.method](
          `${api.getApiUrl()}${operationUrl}`,
          async ({ request, cookies, params }) => {
            return await api.executeOperation(operationId, request, cookies, params);
          },
        ),
      );
    });
  });
  return handlers;
}

// Create the worker for the ApiInterceptorProvider
export const createApiInterceptorWorker = (
  apiInstance: ApiInterceptor,
  parentWorker?: SetupWorker,
) => {
  const handlers = createHandlers(apiInstance);
  let worker = parentWorker;
  if (!parentWorker) {
    worker = setupWorker();
  }
  // https://github.com/mswjs/msw/issues/2495
  worker.use(...(handlers as any));
  return worker;
};

```

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

```markdown
# Backdrop [#backdrop]

The `Backdrop` component is a semi-transparent overlay that appears on top of its child component to obscure or highlight the content behind it.

```xmlui-pg copy display name="Example: using Backdrop"
<App>
  <Backdrop opacity="0.6">
    <Image 
      src="/resources/images/components/image/breakfast.jpg" 
      fit="cover" width="400px" />
    <property name="overlayTemplate">
      <VStack verticalAlignment="center" height="100px">
        <H1 color="white" textAlign="center">Great breakfast!</H1>
      </VStack>
    </property>
  </Backdrop>
</App>
```

## Properties [#properties]

### `backgroundColor` [#backgroundcolor]

The background color of the backdrop.

### `opacity` [#opacity]

The opacity of the backdrop.

### `overlayTemplate` [#overlaytemplate]

This property defines the component template for an optional overlay to display over the component.

## 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)-Backdrop | black | black |
| [opacity](../styles-and-themes/common-units/#opacity)-Backdrop | 0.1 | 0.1 |

```

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

```typescript
import { createComponentRenderer } from "../../components-core/renderers";
import { createMetadata } from "../metadata-helpers";
import { SelectionStore, defaultProps } from "./SelectionStoreNative";

const COMP = "SelectionStore";

export const SelectionStoreMd = createMetadata({
  status: "deprecated",
  description:
    `The \`${COMP}\` is a non-visual component that may wrap components (items) and manage ` +
    `their selection state to accommodate the usage of other actions.`,
  props: {
    idKey: {
      description: `The selected items in the selection store needs to have a unique ID to use as an ` +
        `unambiguous key for that particular item. This property uniquely identifies the ` +
        `selected object item via a given property. By default, the key attribute is \`"id"\`.`,
      defaultValue: defaultProps.idKey,
    },
  },
});

export const selectionStoreComponentRenderer = createComponentRenderer(
  COMP,
  SelectionStoreMd,
  (rendererContext) => {
    const { node, state, updateState, renderChild, registerComponentApi } = rendererContext;

    return (
      <SelectionStore
        updateState={updateState}
        idKey={node.props.idKey}
        selectedItems={state?.value}
        registerComponentApi={registerComponentApi}
      >
        {renderChild(node.children)}
      </SelectionStore>
    );
  },
);

```

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

```typescript
import type { CompoundComponentDef, ComponentLike } from "../../abstractions/ComponentDefs";
import type { ThemeDefinition } from "../../abstractions/ThemingDefs";
import type { ApiInterceptorDefinition } from "../interception/abstractions";

// This type describes a standalone app
export type StandaloneAppDescription = {
  // Application name
  name?: string;

  // Application version
  version?: string;

  // The apps entry point; rendering starts here
  entryPoint?: ComponentLike;

  // Optional components used by the app in the entry point
  components?: CompoundComponentDef[];

  // Optional themes used by the app
  themes?: ThemeDefinition[];

  // The ID of the default theme
  defaultTheme?: string;

  // The default tone ("dark" or "light")
  defaultTone?: string;

  // Resource definitions for the app
  resources?: Record<string, string>;

  // Resource map for the app
  resourceMap?: Record<string, string>;
  appGlobals?: Record<string, any>;
  apiInterceptor?: ApiInterceptorDefinition;
  sources?: Record<string, string>;
};

export type StandaloneJsonConfig = {
  name?: string;
  appGlobals?: Record<string, any>;
  entryPoint?: string;
  components?: string[];
  themes?: string[];
  defaultTheme?: string;
  resources?: Record<string, string>;
  resourceMap?: Record<string, string>;
  apiInterceptor?: ApiInterceptorDefinition;
};

```

--------------------------------------------------------------------------------
/docs/public/pages/tutorial-03.md:
--------------------------------------------------------------------------------

```markdown
# Navigation

Let's explore a subset of the app's navigation.

```xmlui-pg name="vertical layout"
---app display {3}
<App
  name="XMLUI Invoice"
  layout="vertical"
>
  <AppHeader>
    <H1>XMLUI Invoice</H1>
  </AppHeader>
  <NavPanel>
    <NavLink label="Dashboard" to="/" />
    <NavLink label="Invoices" to="/invoices" />
  </NavPanel>

  <Pages>
    <Page url="/">
      <Dashboard />
    </Page>
    <Page url="/invoices">
      <Invoices />
    </Page>

  </Pages>

<Footer>Built with XMLUI <ToneSwitch /> </Footer>

</App>
---comp display
<Component name="Dashboard">
  This is Dashboard.
</Component>
---comp display
<Component name="Invoices">
  This is Invoices.
</Component>
```

## Horizontal

We've seen `vertical`, here's `horizontal`.

```xmlui-pg name="horizontal layout"
---app display {3}
<App
  name="XMLUI Invoice"
  layout="horizontal"
>
  <AppHeader>
    <H1>XMLUI Invoice</H1>
  </AppHeader>
  <NavPanel>
    <NavLink label="Dashboard" to="/" />
    <NavLink label="Invoices" to="/invoices" />
  </NavPanel>

  <Pages>
    <Page url="/">
      <Dashboard />
    </Page>
    <Page url="/invoices">
      <Invoices />
    </Page>

  </Pages>

<Footer>Built with XMLUI <ToneSwitch /> </Footer>

</App>
---comp
<Component name="Dashboard">
  This is Dashboard.
</Component>
---comp
<Component name="Invoices">
  This is Invoices.
</Component>
```

```

--------------------------------------------------------------------------------
/xmlui/src/testing/drivers/TimerDriver.ts:
--------------------------------------------------------------------------------

```typescript
import { ComponentDriver } from "../ComponentDrivers";

export class TimerDriver extends ComponentDriver {
  async isEnabled(): Promise<boolean> {
    const enabled = await this.component.getAttribute("data-timer-enabled");
    return enabled === "true";
  }

  async isRunning(): Promise<boolean> {
    const running = await this.component.getAttribute("data-timer-running");
    return running === "true";
  }

  async isPaused(): Promise<boolean> {
    const paused = await this.component.getAttribute("data-timer-paused");
    return paused === "true";
  }

  async isInInitialDelay(): Promise<boolean> {
    const inDelay = await this.component.getAttribute("data-timer-in-initial-delay");
    return inDelay === "true";
  }

  async getInterval(): Promise<number> {
    const interval = await this.component.getAttribute("data-timer-interval");
    return parseInt(interval || "0", 10);
  }

  async getInitialDelay(): Promise<number> {
    const delay = await this.component.getAttribute("data-timer-initial-delay");
    return parseInt(delay || "0", 10);
  }

  async isOnce(): Promise<boolean> {
    const once = await this.component.getAttribute("data-timer-once");
    return once === "true";
  }

  async hasExecuted(): Promise<boolean> {
    const executed = await this.component.getAttribute("data-timer-has-executed");
    return executed === "true";
  }
}

```

--------------------------------------------------------------------------------
/xmlui/src/components/Icon/svg/code-sandbox.svg:
--------------------------------------------------------------------------------

```
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M14 10.6669V5.33359C13.9998 5.09978 13.938 4.87013 13.821 4.6677C13.704 4.46527 13.5358 4.29717 13.3333 4.18026L8.66667 1.51359C8.46397 1.39657 8.23405 1.33496 8 1.33496C7.76595 1.33496 7.53603 1.39657 7.33333 1.51359L2.66667 4.18026C2.46418 4.29717 2.29599 4.46527 2.17897 4.6677C2.06196 4.87013 2.00024 5.09978 2 5.33359V10.6669C2.00024 10.9007 2.06196 11.1304 2.17897 11.3328C2.29599 11.5353 2.46418 11.7034 2.66667 11.8203L7.33333 14.4869C7.53603 14.604 7.76595 14.6656 8 14.6656C8.23405 14.6656 8.46397 14.604 8.66667 14.4869L13.3333 11.8203C13.5358 11.7034 13.704 11.5353 13.821 11.3328C13.938 11.1304 13.9998 10.9007 14 10.6669Z" stroke="#3B3B3B" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M5 2.80664L8 4.53997L11 2.80664" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M5 13.1933V9.73333L2 8" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M14 8L11 9.73333V13.1933" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M2.18018 4.63965L8.00018 8.00632L13.8202 4.63965" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M8 14.72V8" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

```

--------------------------------------------------------------------------------
/xmlui/tests-e2e/children-as-template-context-vars.spec.ts:
--------------------------------------------------------------------------------

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

test("items works", async ({ page, initTestBed }) => {
  await initTestBed(
    `
    <Items data="{['1', '2']}">
        <DataSource url="/data/{$item}" id="data"/>
        <Text testId='data{$item}_text'>{data.value}</Text>
    </Items>
    `,
    {
      apiInterceptor: {
        operations: {
          "load-api-data1": {
            url: "/data/:taskId",
            method: "get",
            handler: `()=>{
            return 'data' + $pathParams.taskId;
          }`,
          },
        },
      },
    },
  );
  await expect(page.getByTestId("data1_text")).toHaveText("data1");
  await expect(page.getByTestId("data2_text")).toHaveText("data2");
});

test("list works", async ({ page, initTestBed }) => {
  await initTestBed(
    `
    <List data="{['1', '2']}">
        <DataSource url="/data/{$item}" id="data"/>
        <Text testId='data{$item}_text'>{data.value}</Text>
    </List>
    `,
    {
      apiInterceptor: {
        operations: {
          "load-api-data1": {
            url: "/data/:taskId",
            method: "get",
            handler: `()=>{
            return 'data' + $pathParams.taskId;
          }`,
          },
        },
      },
    },
  );

  await expect(page.getByTestId("data1_text")).toHaveText("data1");
  await expect(page.getByTestId("data2_text")).toHaveText("data2");
});

```

--------------------------------------------------------------------------------
/xmlui/src/components/Icon/svg/share.svg:
--------------------------------------------------------------------------------

```
<svg
        width="16"
        height="16"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
>
    <path
            d="M18 8C19.6569 8 21 6.65685 21 5C21 3.34315 19.6569 2 18 2C16.3431 2 15 3.34315 15 5C15 6.65685 16.3431 8 18 8Z"
            stroke="currentColor"
            stroke-width="1.5"
            stroke-linecap="round"
            stroke-linejoin="round"
    />
    <path
            d="M6 15C7.65685 15 9 13.6569 9 12C9 10.3431 7.65685 9 6 9C4.34315 9 3 10.3431 3 12C3 13.6569 4.34315 15 6 15Z"
            stroke="currentColor"
            stroke-width="1.5"
            stroke-linecap="round"
            stroke-linejoin="round"
    />
    <path
            d="M18 22C19.6569 22 21 20.6569 21 19C21 17.3431 19.6569 16 18 16C16.3431 16 15 17.3431 15 19C15 20.6569 16.3431 22 18 22Z"
            stroke="currentColor"
            stroke-width="1.5"
            stroke-linecap="round"
            stroke-linejoin="round"
    />
    <path
            d="M8.58984 13.51L15.4198 17.49"
            stroke="currentColor"
            stroke-width="1.5"
            stroke-linecap="round"
            stroke-linejoin="round"
    />
    <path
            d="M15.4098 6.51001L8.58984 10.49"
            stroke="currentColor"
            stroke-width="1.5"
            stroke-linecap="round"
            stroke-linejoin="round"
    />
</svg>
```

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

```markdown
%-DESC-START

**Key features:**
- **Name-based lookup**: Reference icons by name from the built-in registry (e.g., "home", "search", "trash")
- **Multiple sizes**: Choose from predefined sizes (xs, sm, md, lg) or set custom dimensions
- **Fallback support**: Specify backup icons when the primary icon name doesn't exist
- **Interactive**: Supports click events for creating icon buttons and clickable elements


%-DESC-END

%-PROP-START name

The engine looks up the icon in its registry and determines which icon is associated with the name that the component will show.
Nothing is displayed if the icon name is not found in the registry.

```xmlui-pg copy display name="Example: name"
<App>
  <HStack>
    <Icon name="message" />
    <Icon name="note" />
    <Icon name="cog" />
    <Icon name="start" />
    <Icon name="some-non-existing-icon" />
    <Icon name="some-non-existing-icon-with fallback" fallback="trash" />
  </HStack>
</App>
```

%-PROP-END

%-PROP-START fallback

```xmlui-pg copy display name="Example: fallback"
<App>
  <Icon name="noicon" fallback="trash" />
</App>
```

%-PROP-END

%-PROP-START size

```xmlui-pg copy display name="Example: size"
<App>
  <HStack>
    <Icon name="like" />
    <Icon name="like" size="xs" />
    <Icon name="like" size="sm" />
    <Icon name="like" size="md" />
    <Icon name="like" size="lg" />
  </HStack>
</App>
```

%-PROP-END

```

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

```markdown
%-DESC-START

## Using `Redirect`

The following app demonstrates two different patterns for using `Redirect`.

1. When you navigate to the "Redirect #1" page, it immediately redirects the app to the "Accounts" page. By default, the  `when` property of `Redirect` (and any other component) is "true", so redirection immediately happens.
2. The "Redirect #2" page expects you to click the button before redirecting. The button click sets the `when` property of `Redirect` to true, and redirection happens at that moment.

```xmlui-pg copy {14, 20} display name="Example: providing children" height="170px"
<App>
  <NavPanel>
    <NavLink to="/">Home</NavLink>
    <NavLink to="/accounts">Accounts</NavLink>
    <NavLink to="/products">Products</NavLink>
    <NavLink to="/redirect1">Redirect #1</NavLink>
    <NavLink to="/redirect2">Redirect #2</NavLink>
  </NavPanel>
  <Pages>
    <Page url="/">Home</Page>
    <Page url="/accounts">Accounts</Page>
    <Page url="/products">Products</Page>
    <Page url="/redirect1">
      <Redirect to="/accounts" />
      Redirecting to Accounts...
    </Page>
    <Page url="/redirect2">
      <Fragment var.clicked="{false}">
        <Button label="Click to redirect" onClick="clicked = true"/>
        <Redirect when="{clicked}" to="/accounts" />
        Redirecting to Accounts...
      </Fragment>
    </Page>
  </Pages>
</App>
```

%-DESC-END

```

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

```markdown
# ToneChangerButton [#tonechangerbutton]

`ToneChangerButton` enables the user to switch between light and dark modes.

```xmlui-pg {4} copy display name="Example: using ToneChangerButton"
<App>
  <AppHeader>
    <SpaceFiller />
    <ToneChangerButton />
  </AppHeader>
  <Card
    title="Tone Changer Button"
    subtitle="Click the button in the header to change the tone."
  />
</App>
```

## Properties [#properties]

### `darkToLightIcon` (default: "darkToLight:ToneChangerButton") [#darktolighticon-default-darktolight-tonechangerbutton]

The icon displayed when the theme is in dark mode and will switch to light. You can change the default icon for all ToneChangerButton instances with the "icon.darkToLight:ToneChangerButton" declaration in the app configuration file.

### `lightToDarkIcon` (default: "lightToDark:ToneChangerButton") [#lighttodarkicon-default-lighttodark-tonechangerbutton]

The icon displayed when the theme is in light mode and will switch to dark. You can change the default icon for all ToneChangerButton instances with the "icon.lightToDark:ToneChangerButton" declaration in the app configuration file.

## Events [#events]

### `click` [#click]

This event is triggered when the ToneChangerButton is clicked.

## Exposed Methods [#exposed-methods]

This component does not expose any methods.

## Styling [#styling]

This component does not have any styles.

```

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

```markdown
%-DESC-START

Most apps use `logo="path/to/logo.svg"` on the App component rather than using `<Logo>` directly. Use this component when you need custom logo positioning or want to combine logos with other elements in a `logoTemplate`.

## Using Logo

The framework checks the application manifest for a logo resource (SVG file).
If found, it loads and displays it in the Logo component.

This is a sample manifest that shows a logo definition:

```json copy {5}
{
  "name": "Tutorial",
  "version": "0.0.1",
  "resources": {
    "logo": "resources/xmlui-logo.svg",
    "favicon": "resources/favicon.ico"
  }
}
```

In the following example, you can see a custom logo definition in the `AppHeader` via templating.
There is a `Heading` with the title text "MyApp" before the logo.
It also uses the `Logo` component within the template definition:

```xmlui-pg
---app copy display name="Example: using Logo" {6} height="200px"
<App layout="horizontal">
  <AppHeader>
    <property name="logoTemplate">
       <Fragment>
         <Heading level="h2" value="MyApp"/>
         <Logo/>
       </Fragment>
    </property>
  </AppHeader>
  <NavPanel>
    <NavLink label="Home" to="/" icon="home"/>
  </NavPanel>
  <Pages fallbackPath="/">
    <Page url="/">
      <CHStack>
        (Sample content)
      </CHStack>
    </Page>
  </Pages>
</App>
---desc
The markup displays the app's logo:
```

%-DESC-END

```

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

```typescript
import type { CSSProperties} from "react";
import { useEffect, useState } from "react";
import { createPortal } from "react-dom";
import toast, { ToastBar, Toaster } from "react-hot-toast";
import { useTheme } from "../../components-core/theming/ThemeContext";

const TOASTER_CONTAINER_STYLE: CSSProperties = {
  top: 40,
  right: 40,
  bottom: 40,
  left: 40,
  position: "absolute",
  overflowY: "hidden",
};

type NotificationToastProps = {
  toastDuration?: number;
};

let toasterMounted = false;

export const NotificationToast = ({ toastDuration }: NotificationToastProps) => {
  const [shouldRender, setShouldRender] = useState(false);
  const { root } = useTheme();

  useEffect(() => {
    if (!toasterMounted) {
      toasterMounted = true;
      setShouldRender(true);
    }
  }, []);

  if (!shouldRender) return null;
  return createPortal(
    <Toaster
      position={"top-right"}
      containerStyle={TOASTER_CONTAINER_STYLE}
      toastOptions={{ style: { padding: "12px 16px" }, duration: toastDuration }}
    >
      {(t) => (
        <div onClick={() => toast.dismiss(t.id)}>
          <ToastBar position={t.position} toast={t} style={{ wordBreak: "break-word" }}>
            {({ icon, message }) => (
              <>
                {icon}
                {message}
              </>
            )}
          </ToastBar>
        </div>
      )}
    </Toaster>,
    root,
  );
};

```

--------------------------------------------------------------------------------
/xmlui/src/components/Charts/Legend/Legend.tsx:
--------------------------------------------------------------------------------

```typescript
import { createComponentRenderer } from "../../../components-core/renderers";
import { createMetadata } from "../../metadata-helpers";
import {
  defaultProps,
  horizontalAlignmentValues,
  Legend,
  verticalAlignmentValues,
} from "./LegendNative";

const COMP = "Legend";

export const LegendMd = createMetadata({
  status: "experimental",
  description:
    "`Legend` provides a standalone legend for chart components when you need " +
    "custom positioning or styling beyond the chart's built-in `showLegend` " +
    "property. Most charts can display legends automatically, but this component " +
    "offers precise control over legend placement and alignment.",
  props: {
    align: {
      description: "The alignment of the legend",
      valueType: "string",
      availableValues: horizontalAlignmentValues,
      defaultValue: defaultProps.align,
    },
    verticalAlign: {
      description: "The vertical alignment of the legend",
      valueType: "string",
      availableValues: verticalAlignmentValues,
      defaultValue: defaultProps.verticalAlign,
    },
  },
});

export const legendComponentRenderer = createComponentRenderer(
  COMP,
  LegendMd,
  ({ extractValue, node }: any) => {
    return (
      <Legend
        align={extractValue.asOptionalString(node.props?.align)}
        verticalAlign={extractValue.asOptionalString(node.props?.verticalAlign)}
      />
    );
  },
);

```

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

```markdown
# DonutChart [#donutchart]

A derivative of [PieChart](/components/PieChart) with a hollow center. Note that the height of the component or its parent needs to be set explicitly.

## Properties [#properties]

### `data` [#data]

The data to be displayed in the chart. Needs to be an array of objects.

### `dataKey` [#datakey]

This property specifies the key in the data objects that will be used to render the chart.

### `innerRadius` (default: 60) [#innerradius-default-60]

Sets the inner radius of the donut chart.

### `nameKey` [#namekey]

Specifies the key in the data objects that will be used to label the different data series.

### `showLabel` (default: true) [#showlabel-default-true]

Toggles whether to show labels (`true`) or not (`false`).

### `showLabelList` (default: false) [#showlabellist-default-false]

Whether to show labels in a list (`true`) or not (`false`).

### `showLegend` (default: false) [#showlegend-default-false]

Whether to show a legend (`true`) or not (`false`).

## 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) |
| --- | --- | --- |
| [textColor](../styles-and-themes/common-units/#color)-labelList-PieChart | $textColor-primary | $textColor-primary |

```

--------------------------------------------------------------------------------
/xmlui/tests/parsers/scripting/module-parse.test.ts:
--------------------------------------------------------------------------------

```typescript
import { describe, expect, it } from "vitest";
import {
  ModuleErrors,
  isModuleErrors,
  parseScriptModule,
} from "../../../src/parsers/scripting/modules";
import { ScriptModule } from "../../../src/components-core/script-runner/ScriptingSourceTree";

const ROOT_MODULE = "test";

describe("Modules - Parse", () => {
  it("Empty module", async () => {
    // --- Arrange
    const source = `
    `;

    // --- Act
    const result = parseModule(source);

    // --- Assert
    expect(!isModuleErrors(result)).toBe(true);
  });

  it("Module functions", async () => {
    // --- Arrange
    const source = `
      function func1() {}
      function func2() {}
    `;

    // --- Act
    const result = parseModule(source) as ScriptModule;

    // --- Assert
    expect(!isModuleErrors(result)).toBe(true);

    expect(Object.keys(result.functions).length).toBe(2);
    expect(result.functions["func1"]).toBeDefined();
    expect(result.functions["func2"]).toBeDefined();
  });

  it("Parsing error", async () => {
    // --- Arrange
    const source = `const;`;

    // --- Act
    const result = parseModule(source);

    // --- Assert
    expect(isModuleErrors(result)).toBe(true);
    const errors = result as ModuleErrors;
    expect(Object.keys(errors).length).toBe(1);
  });
});

function parseModule(source: string, modules: Record<string, string> = {}) {
  return parseScriptModule(ROOT_MODULE, source);
}

```

--------------------------------------------------------------------------------
/xmlui/src/components/Markdown/CodeText.tsx:
--------------------------------------------------------------------------------

```typescript
import type { CSSProperties } from "react";
import type React from "react";
import { forwardRef, useRef } from "react";
import { composeRefs } from "@radix-ui/react-compose-refs";
import classnames from "classnames";

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

type CodeTextProps = {
  uid?: string;
  children?: React.ReactNode;
  style?: CSSProperties;
  className?: string;
  [variantSpecificProps: string]: any;
};

export const defaultProps = {
  maxLines: 0,
  preserveLinebreaks: false,
  ellipses: true,
};

/**
 * This type implements code text we use in Markdown codefences.
 */
export const CodeText = forwardRef(function CodeText(
  {
    uid,
    style,
    className,
    children,
    preserveLinebreaks = defaultProps.preserveLinebreaks,
    ellipses = defaultProps.ellipses,
    ...variantSpecificProps
  }: CodeTextProps,
  forwardedRef,
) {
  const innerRef = useRef<HTMLElement>(null);
  const ref = forwardedRef ? composeRefs(innerRef, forwardedRef) : innerRef;
  // NOTE: This is to accept syntax highlight classes coming from shiki
  // classes need not to be added to the rendered html element, so we remove them from props
  return (
    <>
      <pre
        {...variantSpecificProps}
        ref={ref as any}
        className={classnames(styles.codeText, styles.codefence, className)}
        style={{
          ...style,
        }}
      >
        {children}
      </pre>
    </>
  );
});

```

--------------------------------------------------------------------------------
/xmlui/src/components/Carousel/CarouselContext.tsx:
--------------------------------------------------------------------------------

```typescript
import { createContext, useContext, useMemo, useState } from "react";
import produce from "immer";

export const CarouselContext = createContext({
  register: (column: any) => {},
  unRegister: (id: string) => {},
  itemProps: {},
});
export const useCarousel = () => {
  const context = useContext(CarouselContext);
  if (!context) {
    throw new Error("useCarousel must be used within a Carousel");
  }
  return context;
};

export function useCarouselContextValue(isTabbed: boolean) {
  const [carouselItems, setCarouselItems] = useState([]);

  const carouselContextValue = useMemo(() => {
    return {
      register: (column: any) => {
        setCarouselItems(
          produce((draft) => {
            const existing = draft.findIndex((col) => col.id === column.id);
            if (existing < 0) {
              draft.push(column);
            } else {
              draft[existing] = column;
            }
          }),
        );
      },
      unRegister: (id: string) => {
        setCarouselItems(
          produce((draft) => {
            return draft.filter((col) => col.id !== id);
          }),
        );
      },
      itemProps: isTabbed
        ? {
            role: "group tabpanel",
          }
        : {
            role: "group",
            "aria-roledescription": "slide",
          },
    };
  }, [setCarouselItems, isTabbed]);

  return {
    carouselItems,
    carouselContextValue,
  };
}

```

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

```markdown
# SubMenuItem [#submenuitem]

`SubMenuItem` creates hierarchical menu structures by acting as both a menu item and a container for nested menu items. When clicked or hovered, it reveals a submenu containing additional [MenuItem](/components/MenuItem), [MenuSeparator](/components/MenuSeparator), or other [SubMenuItem](/components/SubMenuItems) components, enabling complex multi-level navigation and action organization.

**Key features:**
- **Hierarchical nesting**: Creates multi-level menu structures within [DropdownMenu](/components/DropdownMenu) components
- **Dual functionality**: Acts as both a clickable menu item and a container for other menu components
- **Custom triggers**: Configurable trigger appearance via triggerTemplate property
- **Progressive disclosure**: Reveals nested options on hover or click interaction
- **Unlimited depth**: Supports multiple levels of nesting for complex menu hierarchies

## Properties [#properties]

### `label` [#label]

This property sets the label of the component.  If not set, the component will not display a label.

### `triggerTemplate` [#triggertemplate]

This property allows you to define a custom trigger instead of the default one provided by `SubMenuItem`.

## Events [#events]

This component does not have any events.

## Exposed Methods [#exposed-methods]

This component does not expose any methods.

## Styling [#styling]

This component does not have any styles.

```

--------------------------------------------------------------------------------
/xmlui/src/components-core/rendering/collectFnVarDeps.ts:
--------------------------------------------------------------------------------

```typescript
/**
 * This function collects all the dependencies of a function in a flat list 
 * (no circular deps).
 * @param fnDeps The dependencies of the functions. Each key is a function name
 * and the value is an array of variables the function depends on.
 * @returns The flat dependencies of the functions.
 * 
 * Example:
 * it("simple", () => {
 *   const fnDeps = {
 *     fn1: ["fn2", "var1", "var2"],
 *     fn2: ["var1", "var3", "fn3"],
 *     fn3: ["var4"]
 *   };
 *
 *   expect(collectFnVarDeps(fnDeps)).deep.eq({
 *     fn1: ["var1", "var3", "var4", "var2"],
 *     fn2: ["var1", "var3", "var4"],
 *     fn3: ["var4"]
 *   });
 * });
 */
export function collectFnVarDeps(fnDeps: Record<string, string[]> = {}): Record<string, string[]> {
  const fnKeys = Object.keys(fnDeps);

  function collectFnDeps(depKey: string, visitedPath = new Set<string>()) {
    if (!fnKeys.includes(depKey)) {
      return [depKey];
    }
    visitedPath.add(depKey);
    const ret: Array<string> = [];
    fnDeps[depKey].forEach((key) => {
      if (visitedPath.has(key)) {
        // --- We already walked here, avoid infinite loops for circular deps
        return;
      }
      visitedPath.add(key);
      ret.push(...collectFnDeps(key, visitedPath));
    });
    return ret;
  }

  const flatFnDeps: Record<string, string[]> = {};
  fnKeys.forEach((key) => {
    flatFnDeps[key] = [...new Set(collectFnDeps(key))];
  });
  return flatFnDeps;
}

```

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

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

import { useThemes } from "../../components-core/theming/ThemeContext";
import { Avatar } from "../Avatar/AvatarNative";
import { DropdownMenu, MenuItem, MenuSeparator } from "../DropdownMenu/DropdownMenuNative";

// =====================================================================================================================
// Heading React component

type Props = {
  loggedInUser: any | null;
};

export const ProfileMenu = ({ loggedInUser }: Props) => {
  const { activeThemeId, setActiveThemeId } = useThemes();

  if (!loggedInUser) {
    return null;
  }
  const loggedInUserName = loggedInUser.name || loggedInUser.displayName;
  return (
    <DropdownMenu triggerTemplate={<Avatar url={loggedInUser.avatarUrl} name={loggedInUserName} size={"xs"} />}>
      <div className={styles.loggedInUserInfoWrapper}>
        <div className={styles.name}>{loggedInUserName}</div>
        <div className={styles.email}>{loggedInUser.email}</div>
      </div>
      <MenuSeparator />
      {activeThemeId.includes("dark") && <MenuItem onClick={() => setActiveThemeId(activeThemeId.replace("dark", "light"))}>Switch to light mode</MenuItem>}
      {activeThemeId.includes("light") && <MenuItem onClick={() => setActiveThemeId(activeThemeId.replace("light", "dark"))}>Switch to dark mode</MenuItem>}
      <MenuSeparator />
      <MenuItem>Log out</MenuItem>
    </DropdownMenu>
  );
};

```

