This is page 9 of 143. Use http://codebase.md/xmlui-org/xmlui/assets/img/%7BimageSrc%7D?format=md&page={x} to view the full context.

# Directory Structure

```
├── .changeset
│   └── config.json
├── .eslintrc.cjs
├── .github
│   ├── build-checklist.png
│   ├── ISSUE_TEMPLATE
│   │   ├── bug_report.md
│   │   └── feature_request.md
│   └── workflows
│       ├── deploy-blog-optimized.yml
│       ├── deploy-blog-swa.yml
│       ├── deploy-blog.yml
│       ├── deploy-docs-optimized.yml
│       ├── deploy-docs.yml
│       ├── prepare-versions.yml
│       ├── release-packages.yml
│       ├── run-all-tests.yml
│       └── run-smoke-tests.yml
├── .gitignore
├── .prettierrc.js
├── .vscode
│   ├── launch.json
│   └── settings.json
├── blog
│   ├── .gitignore
│   ├── .gitkeep
│   ├── CHANGELOG.md
│   ├── extensions.ts
│   ├── index.html
│   ├── index.ts
│   ├── package.json
│   ├── public
│   │   ├── blog
│   │   │   ├── images
│   │   │   │   ├── an-advanced-codefence.gif
│   │   │   │   ├── an-advanced-codefence.mp4
│   │   │   │   ├── blog-page-component.png
│   │   │   │   ├── blog-scrabble.png
│   │   │   │   ├── codefence-runner.png
│   │   │   │   ├── integrated-blog-search.png
│   │   │   │   ├── lorem-ipsum.png
│   │   │   │   ├── playground-checkbox-source.png
│   │   │   │   ├── playground.png
│   │   │   │   ├── use-xmlui-mcp-to-find-a-howto.png
│   │   │   │   └── xmlui-demo-gallery.png
│   │   │   ├── introducing-xmlui.md
│   │   │   ├── lorem-ipsum.md
│   │   │   ├── newest-post.md
│   │   │   ├── older-post.md
│   │   │   ├── xmlui-playground.md
│   │   │   └── xmlui-powered-blog.md
│   │   ├── mockServiceWorker.js
│   │   ├── resources
│   │   │   ├── favicon.ico
│   │   │   ├── files
│   │   │   │   └── for-download
│   │   │   │       └── xmlui
│   │   │   │           └── xmlui-standalone.umd.js
│   │   │   ├── github.svg
│   │   │   ├── llms.txt
│   │   │   ├── logo-dark.svg
│   │   │   ├── logo.svg
│   │   │   ├── pg-popout.svg
│   │   │   ├── rss.svg
│   │   │   └── xmlui-logo.svg
│   │   ├── serve.json
│   │   ├── staticwebapp.config.json
│   │   └── web.config
│   ├── scripts
│   │   ├── download-latest-xmlui.js
│   │   ├── generate-rss.js
│   │   ├── get-releases.js
│   │   └── utils.js
│   ├── src
│   │   ├── components
│   │   │   ├── BlogOverview.xmlui
│   │   │   ├── BlogPage.xmlui
│   │   │   └── PageNotFound.xmlui
│   │   ├── config.ts
│   │   ├── Main.xmlui
│   │   └── themes
│   │       └── blog-theme.ts
│   └── tsconfig.json
├── CONTRIBUTING.md
├── docs
│   ├── .gitignore
│   ├── CHANGELOG.md
│   ├── ComponentRefLinks.txt
│   ├── content
│   │   ├── _meta.json
│   │   ├── components
│   │   │   ├── _meta.json
│   │   │   ├── _overview.md
│   │   │   ├── APICall.md
│   │   │   ├── App.md
│   │   │   ├── AppHeader.md
│   │   │   ├── AppState.md
│   │   │   ├── AutoComplete.md
│   │   │   ├── Avatar.md
│   │   │   ├── Backdrop.md
│   │   │   ├── Badge.md
│   │   │   ├── BarChart.md
│   │   │   ├── Bookmark.md
│   │   │   ├── Breakout.md
│   │   │   ├── Button.md
│   │   │   ├── Card.md
│   │   │   ├── Carousel.md
│   │   │   ├── ChangeListener.md
│   │   │   ├── Checkbox.md
│   │   │   ├── CHStack.md
│   │   │   ├── ColorPicker.md
│   │   │   ├── Column.md
│   │   │   ├── ContentSeparator.md
│   │   │   ├── CVStack.md
│   │   │   ├── DataSource.md
│   │   │   ├── DateInput.md
│   │   │   ├── DatePicker.md
│   │   │   ├── DonutChart.md
│   │   │   ├── DropdownMenu.md
│   │   │   ├── EmojiSelector.md
│   │   │   ├── ExpandableItem.md
│   │   │   ├── FileInput.md
│   │   │   ├── FileUploadDropZone.md
│   │   │   ├── FlowLayout.md
│   │   │   ├── Footer.md
│   │   │   ├── Form.md
│   │   │   ├── FormItem.md
│   │   │   ├── FormSection.md
│   │   │   ├── Fragment.md
│   │   │   ├── H1.md
│   │   │   ├── H2.md
│   │   │   ├── H3.md
│   │   │   ├── H4.md
│   │   │   ├── H5.md
│   │   │   ├── H6.md
│   │   │   ├── Heading.md
│   │   │   ├── HSplitter.md
│   │   │   ├── HStack.md
│   │   │   ├── Icon.md
│   │   │   ├── IFrame.md
│   │   │   ├── Image.md
│   │   │   ├── Items.md
│   │   │   ├── LabelList.md
│   │   │   ├── Legend.md
│   │   │   ├── LineChart.md
│   │   │   ├── Link.md
│   │   │   ├── List.md
│   │   │   ├── Logo.md
│   │   │   ├── Markdown.md
│   │   │   ├── MenuItem.md
│   │   │   ├── MenuSeparator.md
│   │   │   ├── ModalDialog.md
│   │   │   ├── NavGroup.md
│   │   │   ├── NavLink.md
│   │   │   ├── NavPanel.md
│   │   │   ├── NoResult.md
│   │   │   ├── NumberBox.md
│   │   │   ├── Option.md
│   │   │   ├── Page.md
│   │   │   ├── PageMetaTitle.md
│   │   │   ├── Pages.md
│   │   │   ├── Pagination.md
│   │   │   ├── PasswordInput.md
│   │   │   ├── PieChart.md
│   │   │   ├── ProgressBar.md
│   │   │   ├── Queue.md
│   │   │   ├── RadioGroup.md
│   │   │   ├── RealTimeAdapter.md
│   │   │   ├── Redirect.md
│   │   │   ├── Select.md
│   │   │   ├── Slider.md
│   │   │   ├── Slot.md
│   │   │   ├── SpaceFiller.md
│   │   │   ├── Spinner.md
│   │   │   ├── Splitter.md
│   │   │   ├── Stack.md
│   │   │   ├── StickyBox.md
│   │   │   ├── SubMenuItem.md
│   │   │   ├── Switch.md
│   │   │   ├── TabItem.md
│   │   │   ├── Table.md
│   │   │   ├── TableOfContents.md
│   │   │   ├── Tabs.md
│   │   │   ├── Text.md
│   │   │   ├── TextArea.md
│   │   │   ├── TextBox.md
│   │   │   ├── Theme.md
│   │   │   ├── TimeInput.md
│   │   │   ├── Timer.md
│   │   │   ├── ToneChangerButton.md
│   │   │   ├── ToneSwitch.md
│   │   │   ├── Tooltip.md
│   │   │   ├── Tree.md
│   │   │   ├── VSplitter.md
│   │   │   ├── VStack.md
│   │   │   ├── xmlui-animations
│   │   │   │   ├── _meta.json
│   │   │   │   ├── _overview.md
│   │   │   │   ├── Animation.md
│   │   │   │   ├── FadeAnimation.md
│   │   │   │   ├── FadeInAnimation.md
│   │   │   │   ├── FadeOutAnimation.md
│   │   │   │   ├── ScaleAnimation.md
│   │   │   │   └── SlideInAnimation.md
│   │   │   ├── xmlui-pdf
│   │   │   │   ├── _meta.json
│   │   │   │   ├── _overview.md
│   │   │   │   └── Pdf.md
│   │   │   ├── xmlui-spreadsheet
│   │   │   │   ├── _meta.json
│   │   │   │   ├── _overview.md
│   │   │   │   └── Spreadsheet.md
│   │   │   └── xmlui-website-blocks
│   │   │       ├── _meta.json
│   │   │       ├── _overview.md
│   │   │       ├── Carousel.md
│   │   │       ├── HelloMd.md
│   │   │       ├── HeroSection.md
│   │   │       └── ScrollToTop.md
│   │   └── extensions
│   │       ├── _meta.json
│   │       ├── xmlui-animations
│   │       │   ├── _meta.json
│   │       │   ├── _overview.md
│   │       │   ├── Animation.md
│   │       │   ├── FadeAnimation.md
│   │       │   ├── FadeInAnimation.md
│   │       │   ├── FadeOutAnimation.md
│   │       │   ├── ScaleAnimation.md
│   │       │   └── SlideInAnimation.md
│   │       └── xmlui-website-blocks
│   │           ├── _meta.json
│   │           ├── _overview.md
│   │           ├── Carousel.md
│   │           ├── FancyButton.md
│   │           ├── HeroSection.md
│   │           └── ScrollToTop.md
│   ├── extensions.ts
│   ├── index.html
│   ├── index.ts
│   ├── package.json
│   ├── public
│   │   ├── feed.rss
│   │   ├── mockServiceWorker.js
│   │   ├── pages
│   │   │   ├── _meta.json
│   │   │   ├── app-structure.md
│   │   │   ├── build-editor-component.md
│   │   │   ├── build-hello-world-component.md
│   │   │   ├── components-intro.md
│   │   │   ├── context-variables.md
│   │   │   ├── forms.md
│   │   │   ├── globals.md
│   │   │   ├── glossary.md
│   │   │   ├── helper-tags.md
│   │   │   ├── hosted-deployment.md
│   │   │   ├── howto
│   │   │   │   ├── assign-a-complex-json-literal-to-a-component-variable.md
│   │   │   │   ├── chain-a-refetch.md
│   │   │   │   ├── control-cache-invalidation.md
│   │   │   │   ├── debounce-user-input-for-api-calls.md
│   │   │   │   ├── debounce-with-changelistener.md
│   │   │   │   ├── debug-a-component.md
│   │   │   │   ├── delay-a-datasource-until-another-datasource-is-ready.md
│   │   │   │   ├── delegate-a-method.md
│   │   │   │   ├── do-custom-form-validation.md
│   │   │   │   ├── expose-a-method-from-a-component.md
│   │   │   │   ├── filter-and-transform-data-from-an-api.md
│   │   │   │   ├── group-items-in-list-by-a-property.md
│   │   │   │   ├── handle-background-operations.md
│   │   │   │   ├── hide-an-element-until-its-datasource-is-ready.md
│   │   │   │   ├── make-a-set-of-equal-width-cards.md
│   │   │   │   ├── make-a-table-responsive.md
│   │   │   │   ├── make-navpanel-width-responsive.md
│   │   │   │   ├── modify-a-value-reported-in-a-column.md
│   │   │   │   ├── paginate-a-list.md
│   │   │   │   ├── pass-data-to-a-modal-dialog.md
│   │   │   │   ├── react-to-button-click-not-keystrokes.md
│   │   │   │   ├── set-the-initial-value-of-a-select-from-fetched-data.md
│   │   │   │   ├── share-a-modaldialog-across-components.md
│   │   │   │   ├── sync-selections-between-table-and-list-views.md
│   │   │   │   ├── update-ui-optimistically.md
│   │   │   │   ├── use-built-in-form-validation.md
│   │   │   │   └── use-the-same-modaldialog-to-add-or-edit.md
│   │   │   ├── howto.md
│   │   │   ├── intro.md
│   │   │   ├── layout.md
│   │   │   ├── markup.md
│   │   │   ├── mcp.md
│   │   │   ├── modal-dialogs.md
│   │   │   ├── news-and-reviews.md
│   │   │   ├── reactive-intro.md
│   │   │   ├── refactoring.md
│   │   │   ├── routing-and-links.md
│   │   │   ├── samples
│   │   │   │   ├── color-palette.xmlui
│   │   │   │   ├── color-values.xmlui
│   │   │   │   ├── shadow-sizes.xmlui
│   │   │   │   ├── spacing-sizes.xmlui
│   │   │   │   ├── swatch.xmlui
│   │   │   │   ├── theme-gallery-brief.xmlui
│   │   │   │   └── theme-gallery.xmlui
│   │   │   ├── scoping.md
│   │   │   ├── scripting.md
│   │   │   ├── styles-and-themes
│   │   │   │   ├── common-units.md
│   │   │   │   ├── layout-props.md
│   │   │   │   ├── theme-variable-defaults.md
│   │   │   │   ├── theme-variables.md
│   │   │   │   └── themes.md
│   │   │   ├── template-properties.md
│   │   │   ├── test.md
│   │   │   ├── tutorial-01.md
│   │   │   ├── tutorial-02.md
│   │   │   ├── tutorial-03.md
│   │   │   ├── tutorial-04.md
│   │   │   ├── tutorial-05.md
│   │   │   ├── tutorial-06.md
│   │   │   ├── tutorial-07.md
│   │   │   ├── tutorial-08.md
│   │   │   ├── tutorial-09.md
│   │   │   ├── tutorial-10.md
│   │   │   ├── tutorial-11.md
│   │   │   ├── tutorial-12.md
│   │   │   ├── universal-properties.md
│   │   │   ├── user-defined-components.md
│   │   │   ├── vscode.md
│   │   │   ├── working-with-markdown.md
│   │   │   ├── working-with-text.md
│   │   │   ├── xmlui-animations
│   │   │   │   ├── _meta.json
│   │   │   │   ├── _overview.md
│   │   │   │   ├── Animation.md
│   │   │   │   ├── FadeAnimation.md
│   │   │   │   ├── FadeInAnimation.md
│   │   │   │   ├── FadeOutAnimation.md
│   │   │   │   ├── ScaleAnimation.md
│   │   │   │   └── SlideInAnimation.md
│   │   │   ├── xmlui-charts
│   │   │   │   ├── _meta.json
│   │   │   │   ├── _overview.md
│   │   │   │   ├── BarChart.md
│   │   │   │   ├── DonutChart.md
│   │   │   │   ├── LabelList.md
│   │   │   │   ├── Legend.md
│   │   │   │   ├── LineChart.md
│   │   │   │   └── PieChart.md
│   │   │   ├── xmlui-pdf
│   │   │   │   ├── _meta.json
│   │   │   │   ├── _overview.md
│   │   │   │   └── Pdf.md
│   │   │   └── xmlui-spreadsheet
│   │   │       ├── _meta.json
│   │   │       ├── _overview.md
│   │   │       └── Spreadsheet.md
│   │   ├── resources
│   │   │   ├── devdocs
│   │   │   │   ├── debug-proxy-object-2.png
│   │   │   │   ├── debug-proxy-object.png
│   │   │   │   ├── table_editor_01.png
│   │   │   │   ├── table_editor_02.png
│   │   │   │   ├── table_editor_03.png
│   │   │   │   ├── table_editor_04.png
│   │   │   │   ├── table_editor_05.png
│   │   │   │   ├── table_editor_06.png
│   │   │   │   ├── table_editor_07.png
│   │   │   │   ├── table_editor_08.png
│   │   │   │   ├── table_editor_09.png
│   │   │   │   ├── table_editor_10.png
│   │   │   │   ├── table_editor_11.png
│   │   │   │   ├── table-editor-01.png
│   │   │   │   ├── table-editor-02.png
│   │   │   │   ├── table-editor-03.png
│   │   │   │   ├── table-editor-04.png
│   │   │   │   ├── table-editor-06.png
│   │   │   │   ├── table-editor-07.png
│   │   │   │   ├── table-editor-08.png
│   │   │   │   ├── table-editor-09.png
│   │   │   │   └── xmlui-rendering-of-tiptap-markdown.png
│   │   │   ├── favicon.ico
│   │   │   ├── files
│   │   │   │   ├── clients.json
│   │   │   │   ├── daily-revenue.json
│   │   │   │   ├── dashboard-stats.json
│   │   │   │   ├── demo.xmlui
│   │   │   │   ├── demo.xmlui.xs
│   │   │   │   ├── downloads
│   │   │   │   │   └── downloads.json
│   │   │   │   ├── for-download
│   │   │   │   │   ├── index-with-api.html
│   │   │   │   │   ├── index.html
│   │   │   │   │   ├── mockApi.js
│   │   │   │   │   ├── start-darwin.sh
│   │   │   │   │   ├── start-linux.sh
│   │   │   │   │   ├── start.bat
│   │   │   │   │   └── xmlui
│   │   │   │   │       └── xmlui-standalone.umd.js
│   │   │   │   ├── getting-started
│   │   │   │   │   ├── cl-tutorial-final.zip
│   │   │   │   │   ├── cl-tutorial.zip
│   │   │   │   │   ├── cl-tutorial2.zip
│   │   │   │   │   ├── cl-tutorial3.zip
│   │   │   │   │   ├── cl-tutorial4.zip
│   │   │   │   │   ├── cl-tutorial5.zip
│   │   │   │   │   ├── cl-tutorial6.zip
│   │   │   │   │   ├── getting-started.zip
│   │   │   │   │   ├── hello-xmlui.zip
│   │   │   │   │   ├── xmlui-empty.zip
│   │   │   │   │   └── xmlui-starter.zip
│   │   │   │   ├── howto
│   │   │   │   │   └── component-icons
│   │   │   │   │       └── up-arrow.svg
│   │   │   │   ├── invoices.json
│   │   │   │   ├── monthly-status.json
│   │   │   │   ├── news-and-reviews.json
│   │   │   │   ├── products.json
│   │   │   │   ├── releases.json
│   │   │   │   ├── tutorials
│   │   │   │   │   ├── datasource
│   │   │   │   │   │   └── api.ts
│   │   │   │   │   └── p2do
│   │   │   │   │       ├── api.ts
│   │   │   │   │       └── todo-logo.svg
│   │   │   │   └── xmlui.json
│   │   │   ├── github.svg
│   │   │   ├── images
│   │   │   │   ├── apiaction-tutorial
│   │   │   │   │   ├── add-success.png
│   │   │   │   │   ├── apiaction-param.png
│   │   │   │   │   ├── change-completed.png
│   │   │   │   │   ├── change-in-progress.png
│   │   │   │   │   ├── confirm-delete.png
│   │   │   │   │   ├── data-error.png
│   │   │   │   │   ├── data-progress.png
│   │   │   │   │   ├── data-success.png
│   │   │   │   │   ├── display-1.png
│   │   │   │   │   ├── item-deleted.png
│   │   │   │   │   ├── item-updated.png
│   │   │   │   │   ├── missing-api-key.png
│   │   │   │   │   ├── new-item-added.png
│   │   │   │   │   └── test-message.png
│   │   │   │   ├── chat-api
│   │   │   │   │   └── domain-model.svg
│   │   │   │   ├── components
│   │   │   │   │   ├── image
│   │   │   │   │   │   └── breakfast.jpg
│   │   │   │   │   ├── markdown
│   │   │   │   │   │   └── colors.png
│   │   │   │   │   └── modal
│   │   │   │   │       ├── deep_link_dialog_1.jpg
│   │   │   │   │       └── deep_link_dialog_2.jpg
│   │   │   │   ├── create-apps
│   │   │   │   │   ├── collapsed-vertical.png
│   │   │   │   │   ├── using-forms-warning-dialog.png
│   │   │   │   │   └── using-forms.png
│   │   │   │   ├── datasource-tutorial
│   │   │   │   │   ├── data-with-header.png
│   │   │   │   │   ├── filtered-data.png
│   │   │   │   │   ├── filtered-items.png
│   │   │   │   │   ├── initial-page-items.png
│   │   │   │   │   ├── list-items.png
│   │   │   │   │   ├── next-page-items.png
│   │   │   │   │   ├── no-data.png
│   │   │   │   │   ├── pagination-1.jpg
│   │   │   │   │   ├── pagination-1.png
│   │   │   │   │   ├── polling-1.png
│   │   │   │   │   ├── refetch-data.png
│   │   │   │   │   ├── slow-loading.png
│   │   │   │   │   ├── test-message.png
│   │   │   │   │   ├── Thumbs.db
│   │   │   │   │   ├── unconventional-data.png
│   │   │   │   │   └── unfiltered-items.png
│   │   │   │   ├── flower.jpg
│   │   │   │   ├── get-started
│   │   │   │   │   ├── add-new-contact.png
│   │   │   │   │   ├── app-modified.png
│   │   │   │   │   ├── app-start.png
│   │   │   │   │   ├── app-with-boxes.png
│   │   │   │   │   ├── app-with-toast.png
│   │   │   │   │   ├── boilerplate-structure.png
│   │   │   │   │   ├── cl-initial.png
│   │   │   │   │   ├── cl-start.png
│   │   │   │   │   ├── contact-counts.png
│   │   │   │   │   ├── contact-dialog-title.png
│   │   │   │   │   ├── contact-dialog.png
│   │   │   │   │   ├── contact-menus.png
│   │   │   │   │   ├── contact-predicates.png
│   │   │   │   │   ├── context-menu.png
│   │   │   │   │   ├── dashboard-numbers.png
│   │   │   │   │   ├── default-contact-list.png
│   │   │   │   │   ├── delete-contact.png
│   │   │   │   │   ├── delete-task.png
│   │   │   │   │   ├── detailed-template.png
│   │   │   │   │   ├── edit-contact-details.png
│   │   │   │   │   ├── edited-contact-saved.png
│   │   │   │   │   ├── empty-sections.png
│   │   │   │   │   ├── filter-completed.png
│   │   │   │   │   ├── fullwidth-desktop.png
│   │   │   │   │   ├── fullwidth-mobile.png
│   │   │   │   │   ├── initial-table.png
│   │   │   │   │   ├── items-and-badges.png
│   │   │   │   │   ├── loading-message.png
│   │   │   │   │   ├── new-contact-button.png
│   │   │   │   │   ├── new-contact-saved.png
│   │   │   │   │   ├── no-empty-sections.png
│   │   │   │   │   ├── personal-todo-initial.png
│   │   │   │   │   ├── piechart.png
│   │   │   │   │   ├── review-today.png
│   │   │   │   │   ├── rudimentary-dashboard.png
│   │   │   │   │   ├── section-collapsed.png
│   │   │   │   │   ├── sectioned-items.png
│   │   │   │   │   ├── sections-ordered.png
│   │   │   │   │   ├── spacex-list-with-links.png
│   │   │   │   │   ├── spacex-list.png
│   │   │   │   │   ├── start-personal-todo-1.png
│   │   │   │   │   ├── submit-new-contact.png
│   │   │   │   │   ├── submit-new-task.png
│   │   │   │   │   ├── syntax-highlighting.png
│   │   │   │   │   ├── table-with-badge.png
│   │   │   │   │   ├── template-with-card.png
│   │   │   │   │   ├── test-emulated-api.png
│   │   │   │   │   ├── Thumbs.db
│   │   │   │   │   ├── todo-logo.png
│   │   │   │   │   └── xmlui-tools.png
│   │   │   │   ├── HelloApp.png
│   │   │   │   ├── HelloApp2.png
│   │   │   │   ├── logos
│   │   │   │   │   ├── xmlui1.svg
│   │   │   │   │   ├── xmlui2.svg
│   │   │   │   │   ├── xmlui3.svg
│   │   │   │   │   ├── xmlui4.svg
│   │   │   │   │   ├── xmlui5.svg
│   │   │   │   │   ├── xmlui6.svg
│   │   │   │   │   └── xmlui7.svg
│   │   │   │   ├── pdf
│   │   │   │   │   └── dummy-pdf.jpg
│   │   │   │   ├── rendering-engine
│   │   │   │   │   ├── AppEngine-flow.svg
│   │   │   │   │   ├── Component.svg
│   │   │   │   │   ├── CompoundComponent.svg
│   │   │   │   │   ├── RootComponent.svg
│   │   │   │   │   └── tree-with-containers.svg
│   │   │   │   ├── reviewers-guide
│   │   │   │   │   ├── AppEngine-flow.svg
│   │   │   │   │   └── incbutton-in-action.png
│   │   │   │   ├── tools
│   │   │   │   │   └── boilerplate-structure.png
│   │   │   │   ├── try.svg
│   │   │   │   ├── tutorial
│   │   │   │   │   ├── app-chat-history.png
│   │   │   │   │   ├── app-content-placeholder.png
│   │   │   │   │   ├── app-header-and-content.png
│   │   │   │   │   ├── app-links-channel-selected.png
│   │   │   │   │   ├── app-links-click.png
│   │   │   │   │   ├── app-navigation.png
│   │   │   │   │   ├── finished-ex01.png
│   │   │   │   │   ├── finished-ex02.png
│   │   │   │   │   ├── hello.png
│   │   │   │   │   ├── splash-screen-advanced.png
│   │   │   │   │   ├── splash-screen-after-click.png
│   │   │   │   │   ├── splash-screen-centered.png
│   │   │   │   │   ├── splash-screen-events.png
│   │   │   │   │   ├── splash-screen-expression.png
│   │   │   │   │   ├── splash-screen-reuse-after.png
│   │   │   │   │   ├── splash-screen-reuse-before.png
│   │   │   │   │   └── splash-screen.png
│   │   │   │   └── tutorial-01.png
│   │   │   ├── llms.txt
│   │   │   ├── logo-dark.svg
│   │   │   ├── logo.svg
│   │   │   ├── pg-popout.svg
│   │   │   └── xmlui-logo.svg
│   │   ├── serve.json
│   │   └── web.config
│   ├── scripts
│   │   ├── download-latest-xmlui.js
│   │   ├── generate-rss.js
│   │   ├── get-releases.js
│   │   └── utils.js
│   ├── src
│   │   ├── components
│   │   │   ├── BlogOverview.xmlui
│   │   │   ├── BlogPage.xmlui
│   │   │   ├── Boxes.xmlui
│   │   │   ├── Breadcrumb.xmlui
│   │   │   ├── ChangeLog.xmlui
│   │   │   ├── ColorPalette.xmlui
│   │   │   ├── DocumentLinks.xmlui
│   │   │   ├── DocumentPage.xmlui
│   │   │   ├── DocumentPageNoTOC.xmlui
│   │   │   ├── Icons.xmlui
│   │   │   ├── IncButton.xmlui
│   │   │   ├── IncButton2.xmlui
│   │   │   ├── NameValue.xmlui
│   │   │   ├── PageNotFound.xmlui
│   │   │   ├── PaletteItem.xmlui
│   │   │   ├── Palettes.xmlui
│   │   │   ├── SectionHeader.xmlui
│   │   │   ├── TBD.xmlui
│   │   │   ├── Test.xmlui
│   │   │   ├── ThemesIntro.xmlui
│   │   │   ├── ThousandThemes.xmlui
│   │   │   ├── TubeStops.xmlui
│   │   │   ├── TubeStops.xmlui.xs
│   │   │   └── TwoColumnCode.xmlui
│   │   ├── config.ts
│   │   ├── Main.xmlui
│   │   └── themes
│   │       ├── docs-theme.ts
│   │       ├── earthtone.ts
│   │       ├── xmlui-gray-on-default.ts
│   │       ├── xmlui-green-on-default.ts
│   │       └── xmlui-orange-on-default.ts
│   └── tsconfig.json
├── LICENSE
├── package-lock.json
├── package.json
├── packages
│   ├── tsconfig.json
│   ├── xmlui-animations
│   │   ├── .gitignore
│   │   ├── CHANGELOG.md
│   │   ├── demo
│   │   │   └── Main.xmlui
│   │   ├── index.html
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   └── src
│   │       ├── Animation.tsx
│   │       ├── AnimationNative.tsx
│   │       ├── FadeAnimation.tsx
│   │       ├── FadeInAnimation.tsx
│   │       ├── FadeOutAnimation.tsx
│   │       ├── index.tsx
│   │       ├── ScaleAnimation.tsx
│   │       └── SlideInAnimation.tsx
│   ├── xmlui-devtools
│   │   ├── .gitignore
│   │   ├── CHANGELOG.md
│   │   ├── demo
│   │   │   └── Main.xmlui
│   │   ├── index.html
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   ├── src
│   │   │   ├── devtools
│   │   │   │   ├── DevTools.tsx
│   │   │   │   ├── DevToolsNative.module.scss
│   │   │   │   ├── DevToolsNative.tsx
│   │   │   │   ├── ModalDialog.module.scss
│   │   │   │   ├── ModalDialog.tsx
│   │   │   │   ├── ModalVisibilityContext.tsx
│   │   │   │   ├── Tooltip.module.scss
│   │   │   │   ├── Tooltip.tsx
│   │   │   │   └── utils.ts
│   │   │   ├── editor
│   │   │   │   └── Editor.tsx
│   │   │   └── index.tsx
│   │   └── vite.config-overrides.ts
│   ├── xmlui-hello-world
│   │   ├── .gitignore
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   └── src
│   │       ├── HelloWorld.module.scss
│   │       ├── HelloWorld.tsx
│   │       ├── HelloWorldNative.tsx
│   │       └── index.tsx
│   ├── xmlui-os-frames
│   │   ├── .gitignore
│   │   ├── demo
│   │   │   └── Main.xmlui
│   │   ├── index.html
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   └── src
│   │       ├── index.tsx
│   │       ├── IPhoneFrame.module.scss
│   │       ├── IPhoneFrame.tsx
│   │       ├── MacOSAppFrame.module.scss
│   │       ├── MacOSAppFrame.tsx
│   │       ├── WindowsAppFrame.module.scss
│   │       └── WindowsAppFrame.tsx
│   ├── xmlui-pdf
│   │   ├── .gitignore
│   │   ├── CHANGELOG.md
│   │   ├── demo
│   │   │   ├── components
│   │   │   │   └── Pdf.xmlui
│   │   │   └── Main.xmlui
│   │   ├── index.html
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   └── src
│   │       ├── index.tsx
│   │       ├── LazyPdfNative.tsx
│   │       ├── Pdf.module.scss
│   │       └── Pdf.tsx
│   ├── xmlui-playground
│   │   ├── .gitignore
│   │   ├── CHANGELOG.md
│   │   ├── demo
│   │   │   └── Main.xmlui
│   │   ├── index.html
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   └── src
│   │       ├── hooks
│   │       │   ├── usePlayground.ts
│   │       │   └── useToast.ts
│   │       ├── index.tsx
│   │       ├── playground
│   │       │   ├── Box.module.scss
│   │       │   ├── Box.tsx
│   │       │   ├── CodeSelector.tsx
│   │       │   ├── ConfirmationDialog.module.scss
│   │       │   ├── ConfirmationDialog.tsx
│   │       │   ├── Editor.tsx
│   │       │   ├── Header.module.scss
│   │       │   ├── Header.tsx
│   │       │   ├── Playground.tsx
│   │       │   ├── PlaygroundContent.module.scss
│   │       │   ├── PlaygroundContent.tsx
│   │       │   ├── PlaygroundNative.module.scss
│   │       │   ├── PlaygroundNative.tsx
│   │       │   ├── Preview.module.scss
│   │       │   ├── Preview.tsx
│   │       │   ├── Select.module.scss
│   │       │   ├── StandalonePlayground.tsx
│   │       │   ├── StandalonePlaygroundNative.module.scss
│   │       │   ├── StandalonePlaygroundNative.tsx
│   │       │   ├── ThemeSwitcher.module.scss
│   │       │   ├── ThemeSwitcher.tsx
│   │       │   ├── ToneSwitcher.tsx
│   │       │   ├── Tooltip.module.scss
│   │       │   ├── Tooltip.tsx
│   │       │   └── utils.ts
│   │       ├── providers
│   │       │   ├── Toast.module.scss
│   │       │   └── ToastProvider.tsx
│   │       ├── state
│   │       │   └── store.ts
│   │       ├── themes
│   │       │   └── theme.ts
│   │       └── utils
│   │           └── helpers.ts
│   ├── xmlui-search
│   │   ├── .gitignore
│   │   ├── CHANGELOG.md
│   │   ├── demo
│   │   │   └── Main.xmlui
│   │   ├── index.html
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   └── src
│   │       ├── index.tsx
│   │       ├── Search.module.scss
│   │       └── Search.tsx
│   ├── xmlui-spreadsheet
│   │   ├── .gitignore
│   │   ├── demo
│   │   │   └── Main.xmlui
│   │   ├── index.html
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   └── src
│   │       ├── index.tsx
│   │       ├── Spreadsheet.tsx
│   │       └── SpreadsheetNative.tsx
│   └── xmlui-website-blocks
│       ├── .gitignore
│       ├── CHANGELOG.md
│       ├── demo
│       │   ├── components
│       │   │   ├── HeroBackgroundBreakoutPage.xmlui
│       │   │   ├── HeroBackgroundsPage.xmlui
│       │   │   ├── HeroContentsPage.xmlui
│       │   │   ├── HeroTextAlignPage.xmlui
│       │   │   ├── HeroTextPage.xmlui
│       │   │   └── HeroTonesPage.xmlui
│       │   ├── Main.xmlui
│       │   └── themes
│       │       └── default.ts
│       ├── index.html
│       ├── index.ts
│       ├── meta
│       │   └── componentsMetadata.ts
│       ├── package.json
│       ├── public
│       │   └── resources
│       │       ├── building.jpg
│       │       └── xmlui-logo.svg
│       └── src
│           ├── Carousel
│           │   ├── Carousel.module.scss
│           │   ├── Carousel.tsx
│           │   ├── CarouselContext.tsx
│           │   └── CarouselNative.tsx
│           ├── FancyButton
│           │   ├── FancyButton.module.scss
│           │   ├── FancyButton.tsx
│           │   └── FancyButton.xmlui
│           ├── Hello
│           │   ├── Hello.tsx
│           │   ├── Hello.xmlui
│           │   └── Hello.xmlui.xs
│           ├── HeroSection
│           │   ├── HeroSection.module.scss
│           │   ├── HeroSection.spec.ts
│           │   ├── HeroSection.tsx
│           │   └── HeroSectionNative.tsx
│           ├── index.tsx
│           ├── ScrollToTop
│           │   ├── ScrollToTop.module.scss
│           │   ├── ScrollToTop.tsx
│           │   └── ScrollToTopNative.tsx
│           └── vite-env.d.ts
├── playwright.config.ts
├── README.md
├── tools
│   ├── codefence
│   │   └── xmlui-code-fence-docs.md
│   ├── create-app
│   │   ├── .gitignore
│   │   ├── CHANGELOG.md
│   │   ├── create-app.ts
│   │   ├── helpers
│   │   │   ├── copy.ts
│   │   │   ├── get-pkg-manager.ts
│   │   │   ├── git.ts
│   │   │   ├── install.ts
│   │   │   ├── is-folder-empty.ts
│   │   │   ├── is-writeable.ts
│   │   │   ├── make-dir.ts
│   │   │   └── validate-pkg.ts
│   │   ├── index.ts
│   │   ├── package.json
│   │   ├── templates
│   │   │   ├── default
│   │   │   │   └── ts
│   │   │   │       ├── gitignore
│   │   │   │       ├── index.html
│   │   │   │       ├── index.ts
│   │   │   │       ├── public
│   │   │   │       │   ├── mockServiceWorker.js
│   │   │   │       │   ├── resources
│   │   │   │       │   │   ├── favicon.ico
│   │   │   │       │   │   └── xmlui-logo.svg
│   │   │   │       │   └── serve.json
│   │   │   │       └── src
│   │   │   │           ├── components
│   │   │   │           │   ├── ApiAware.xmlui
│   │   │   │           │   ├── Home.xmlui
│   │   │   │           │   ├── IncButton.xmlui
│   │   │   │           │   └── PagePanel.xmlui
│   │   │   │           ├── config.ts
│   │   │   │           └── Main.xmlui
│   │   │   ├── index.ts
│   │   │   └── types.ts
│   │   └── tsconfig.json
│   ├── create-xmlui-hello-world
│   │   ├── index.js
│   │   └── package.json
│   └── vscode
│       ├── .gitignore
│       ├── .vscode
│       │   ├── launch.json
│       │   └── tasks.json
│       ├── .vscodeignore
│       ├── build.sh
│       ├── CHANGELOG.md
│       ├── esbuild.js
│       ├── eslint.config.mjs
│       ├── formatter-docs.md
│       ├── generate-test-sample.sh
│       ├── LICENSE.md
│       ├── package-lock.json
│       ├── package.json
│       ├── README.md
│       ├── resources
│       │   ├── xmlui-logo.png
│       │   └── xmlui-markup-syntax-highlighting.png
│       ├── src
│       │   ├── extension.ts
│       │   └── server.ts
│       ├── syntaxes
│       │   └── xmlui.tmLanguage.json
│       ├── test-samples
│       │   └── sample.xmlui
│       ├── tsconfig.json
│       └── tsconfig.tsbuildinfo
├── turbo.json
└── xmlui
    ├── .gitignore
    ├── bin
    │   ├── bootstrap.cjs
    │   ├── bootstrap.js
    │   ├── build-lib.ts
    │   ├── build.ts
    │   ├── index.ts
    │   ├── preview.ts
    │   ├── start.ts
    │   ├── vite-xmlui-plugin.ts
    │   └── viteConfig.ts
    ├── CHANGELOG.md
    ├── conventions
    │   ├── component-qa-checklist.md
    │   ├── copilot-conventions.md
    │   ├── create-xmlui-components.md
    │   ├── mermaid.md
    │   ├── testing-conventions.md
    │   └── xmlui-in-a-nutshell.md
    ├── dev-docs
    │   ├── accessibility.md
    │   ├── build-system.md
    │   ├── build-xmlui.md
    │   ├── component-behaviors.md
    │   ├── component-metadata.md
    │   ├── components-with-options.md
    │   ├── containers.md
    │   ├── data-operations.md
    │   ├── glossary.md
    │   ├── index.md
    │   ├── next
    │   │   ├── component-dev-guide.md
    │   │   ├── configuration-management-enhancement-summary.md
    │   │   ├── documentation-scripts-refactoring-complete-summary.md
    │   │   ├── documentation-scripts-refactoring-plan.md
    │   │   ├── duplicate-pattern-extraction-summary.md
    │   │   ├── error-handling-standardization-summary.md
    │   │   ├── generating-component-reference.md
    │   │   ├── index.md
    │   │   ├── logging-consistency-implementation-summary.md
    │   │   ├── project-build.md
    │   │   ├── project-structure.md
    │   │   ├── theme-context.md
    │   │   ├── tiptap-design-considerations.md
    │   │   ├── working-with-code.md
    │   │   ├── xmlui-runtime-architecture
    │   │   └── xmlui-wcag-accessibility-report.md
    │   ├── react-fundamentals.md
    │   ├── release-method.md
    │   ├── standalone-app.md
    │   ├── theme-variables-refactoring.md
    │   ├── ud-components.md
    │   └── xmlui-repo.md
    ├── package.json
    ├── scripts
    │   ├── coverage-only.js
    │   ├── e2e-test-summary.js
    │   ├── extract-component-metadata.js
    │   ├── generate-docs
    │   │   ├── build-downloads-map.mjs
    │   │   ├── build-pages-map.mjs
    │   │   ├── components-config.json
    │   │   ├── configuration-management.mjs
    │   │   ├── constants.mjs
    │   │   ├── create-theme-files.mjs
    │   │   ├── DocsGenerator.mjs
    │   │   ├── error-handling.mjs
    │   │   ├── extensions-config.json
    │   │   ├── folders.mjs
    │   │   ├── generate-summary-files.mjs
    │   │   ├── get-docs.mjs
    │   │   ├── input-handler.mjs
    │   │   ├── logger.mjs
    │   │   ├── logging-standards.mjs
    │   │   ├── MetadataProcessor.mjs
    │   │   ├── pattern-utilities.mjs
    │   │   └── utils.mjs
    │   ├── generate-metadata-markdown.js
    │   ├── get-langserver-metadata.js
    │   ├── inline-links.mjs
    │   └── README-e2e-summary.md
    ├── src
    │   ├── abstractions
    │   │   ├── _conventions.md
    │   │   ├── ActionDefs.ts
    │   │   ├── AppContextDefs.ts
    │   │   ├── ComponentDefs.ts
    │   │   ├── ContainerDefs.ts
    │   │   ├── ExtensionDefs.ts
    │   │   ├── FunctionDefs.ts
    │   │   ├── RendererDefs.ts
    │   │   ├── scripting
    │   │   │   ├── BlockScope.ts
    │   │   │   ├── Compilation.ts
    │   │   │   ├── LogicalThread.ts
    │   │   │   ├── LoopScope.ts
    │   │   │   ├── modules.ts
    │   │   │   ├── ScriptParserError.ts
    │   │   │   ├── Token.ts
    │   │   │   ├── TryScope.ts
    │   │   │   └── TryScopeExp.ts
    │   │   └── ThemingDefs.ts
    │   ├── components
    │   │   ├── _conventions.md
    │   │   ├── abstractions.ts
    │   │   ├── Accordion
    │   │   │   ├── Accordion.md
    │   │   │   ├── Accordion.module.scss
    │   │   │   ├── Accordion.spec.ts
    │   │   │   ├── Accordion.tsx
    │   │   │   ├── AccordionContext.tsx
    │   │   │   ├── AccordionItem.tsx
    │   │   │   ├── AccordionItemNative.tsx
    │   │   │   └── AccordionNative.tsx
    │   │   ├── Animation
    │   │   │   └── AnimationNative.tsx
    │   │   ├── APICall
    │   │   │   ├── APICall.md
    │   │   │   ├── APICall.spec.ts
    │   │   │   ├── APICall.tsx
    │   │   │   └── APICallNative.tsx
    │   │   ├── App
    │   │   │   ├── App.md
    │   │   │   ├── App.module.scss
    │   │   │   ├── App.spec.ts
    │   │   │   ├── App.tsx
    │   │   │   ├── AppLayoutContext.ts
    │   │   │   ├── AppNative.tsx
    │   │   │   ├── AppStateContext.ts
    │   │   │   ├── doc-resources
    │   │   │   │   ├── condensed-sticky.xmlui
    │   │   │   │   ├── condensed.xmlui
    │   │   │   │   ├── horizontal-sticky.xmlui
    │   │   │   │   ├── horizontal.xmlui
    │   │   │   │   ├── vertical-full-header.xmlui
    │   │   │   │   ├── vertical-sticky.xmlui
    │   │   │   │   └── vertical.xmlui
    │   │   │   ├── IndexerContext.ts
    │   │   │   ├── LinkInfoContext.ts
    │   │   │   ├── SearchContext.tsx
    │   │   │   ├── Sheet.module.scss
    │   │   │   └── Sheet.tsx
    │   │   ├── AppHeader
    │   │   │   ├── AppHeader.md
    │   │   │   ├── AppHeader.module.scss
    │   │   │   ├── AppHeader.spec.ts
    │   │   │   ├── AppHeader.tsx
    │   │   │   └── AppHeaderNative.tsx
    │   │   ├── AppState
    │   │   │   ├── AppState.md
    │   │   │   ├── AppState.spec.ts
    │   │   │   ├── AppState.tsx
    │   │   │   └── AppStateNative.tsx
    │   │   ├── AutoComplete
    │   │   │   ├── AutoComplete.md
    │   │   │   ├── AutoComplete.module.scss
    │   │   │   ├── AutoComplete.spec.ts
    │   │   │   ├── AutoComplete.tsx
    │   │   │   ├── AutoCompleteContext.tsx
    │   │   │   └── AutoCompleteNative.tsx
    │   │   ├── Avatar
    │   │   │   ├── Avatar.md
    │   │   │   ├── Avatar.module.scss
    │   │   │   ├── Avatar.spec.ts
    │   │   │   ├── Avatar.tsx
    │   │   │   └── AvatarNative.tsx
    │   │   ├── Backdrop
    │   │   │   ├── Backdrop.md
    │   │   │   ├── Backdrop.module.scss
    │   │   │   ├── Backdrop.spec.ts
    │   │   │   ├── Backdrop.tsx
    │   │   │   └── BackdropNative.tsx
    │   │   ├── Badge
    │   │   │   ├── Badge.md
    │   │   │   ├── Badge.module.scss
    │   │   │   ├── Badge.spec.ts
    │   │   │   ├── Badge.tsx
    │   │   │   └── BadgeNative.tsx
    │   │   ├── Bookmark
    │   │   │   ├── Bookmark.md
    │   │   │   ├── Bookmark.module.scss
    │   │   │   ├── Bookmark.spec.ts
    │   │   │   ├── Bookmark.tsx
    │   │   │   └── BookmarkNative.tsx
    │   │   ├── Breakout
    │   │   │   ├── Breakout.module.scss
    │   │   │   ├── Breakout.spec.ts
    │   │   │   ├── Breakout.tsx
    │   │   │   └── BreakoutNative.tsx
    │   │   ├── Button
    │   │   │   ├── Button-style.spec.ts
    │   │   │   ├── Button.md
    │   │   │   ├── Button.module.scss
    │   │   │   ├── Button.spec.ts
    │   │   │   ├── Button.tsx
    │   │   │   └── ButtonNative.tsx
    │   │   ├── Card
    │   │   │   ├── Card.md
    │   │   │   ├── Card.module.scss
    │   │   │   ├── Card.spec.ts
    │   │   │   ├── Card.tsx
    │   │   │   └── CardNative.tsx
    │   │   ├── Carousel
    │   │   │   ├── Carousel.md
    │   │   │   ├── Carousel.module.scss
    │   │   │   ├── Carousel.spec.ts
    │   │   │   ├── Carousel.tsx
    │   │   │   ├── CarouselContext.tsx
    │   │   │   ├── CarouselItem.tsx
    │   │   │   ├── CarouselItemNative.tsx
    │   │   │   └── CarouselNative.tsx
    │   │   ├── ChangeListener
    │   │   │   ├── ChangeListener.md
    │   │   │   ├── ChangeListener.spec.ts
    │   │   │   ├── ChangeListener.tsx
    │   │   │   └── ChangeListenerNative.tsx
    │   │   ├── chart-color-schemes.ts
    │   │   ├── Charts
    │   │   │   ├── AreaChart
    │   │   │   │   ├── AreaChart.md
    │   │   │   │   ├── AreaChart.spec.ts
    │   │   │   │   ├── AreaChart.tsx
    │   │   │   │   └── AreaChartNative.tsx
    │   │   │   ├── BarChart
    │   │   │   │   ├── BarChart.md
    │   │   │   │   ├── BarChart.module.scss
    │   │   │   │   ├── BarChart.spec.ts
    │   │   │   │   ├── BarChart.tsx
    │   │   │   │   └── BarChartNative.tsx
    │   │   │   ├── DonutChart
    │   │   │   │   ├── DonutChart.spec.ts
    │   │   │   │   └── DonutChart.tsx
    │   │   │   ├── LabelList
    │   │   │   │   ├── LabelList.module.scss
    │   │   │   │   ├── LabelList.spec.ts
    │   │   │   │   ├── LabelList.tsx
    │   │   │   │   └── LabelListNative.tsx
    │   │   │   ├── Legend
    │   │   │   │   ├── Legend.spec.ts
    │   │   │   │   ├── Legend.tsx
    │   │   │   │   └── LegendNative.tsx
    │   │   │   ├── LineChart
    │   │   │   │   ├── LineChart.md
    │   │   │   │   ├── LineChart.module.scss
    │   │   │   │   ├── LineChart.spec.ts
    │   │   │   │   ├── LineChart.tsx
    │   │   │   │   └── LineChartNative.tsx
    │   │   │   ├── PieChart
    │   │   │   │   ├── PieChart.md
    │   │   │   │   ├── PieChart.spec.ts
    │   │   │   │   ├── PieChart.tsx
    │   │   │   │   ├── PieChartNative.module.scss
    │   │   │   │   └── PieChartNative.tsx
    │   │   │   ├── RadarChart
    │   │   │   │   ├── RadarChart.md
    │   │   │   │   ├── RadarChart.spec.ts
    │   │   │   │   ├── RadarChart.tsx
    │   │   │   │   └── RadarChartNative.tsx
    │   │   │   ├── Tooltip
    │   │   │   │   ├── TooltipContent.module.scss
    │   │   │   │   ├── TooltipContent.spec.ts
    │   │   │   │   └── TooltipContent.tsx
    │   │   │   └── utils
    │   │   │       ├── abstractions.ts
    │   │   │       └── ChartProvider.tsx
    │   │   ├── Checkbox
    │   │   │   ├── Checkbox.md
    │   │   │   ├── Checkbox.spec.ts
    │   │   │   └── Checkbox.tsx
    │   │   ├── CodeBlock
    │   │   │   ├── CodeBlock.module.scss
    │   │   │   ├── CodeBlock.spec.ts
    │   │   │   ├── CodeBlock.tsx
    │   │   │   ├── CodeBlockNative.tsx
    │   │   │   └── highlight-code.ts
    │   │   ├── collectedComponentMetadata.ts
    │   │   ├── ColorPicker
    │   │   │   ├── ColorPicker.md
    │   │   │   ├── ColorPicker.module.scss
    │   │   │   ├── ColorPicker.spec.ts
    │   │   │   ├── ColorPicker.tsx
    │   │   │   └── ColorPickerNative.tsx
    │   │   ├── Column
    │   │   │   ├── Column.md
    │   │   │   ├── Column.tsx
    │   │   │   ├── ColumnNative.tsx
    │   │   │   ├── doc-resources
    │   │   │   │   └── list-component-data.js
    │   │   │   └── TableContext.tsx
    │   │   ├── component-utils.ts
    │   │   ├── ComponentProvider.tsx
    │   │   ├── ComponentRegistryContext.tsx
    │   │   ├── container-helpers.tsx
    │   │   ├── ContentSeparator
    │   │   │   ├── ContentSeparator.md
    │   │   │   ├── ContentSeparator.module.scss
    │   │   │   ├── ContentSeparator.spec.ts
    │   │   │   ├── ContentSeparator.tsx
    │   │   │   └── ContentSeparatorNative.tsx
    │   │   ├── DataSource
    │   │   │   ├── DataSource.md
    │   │   │   └── DataSource.tsx
    │   │   ├── DateInput
    │   │   │   ├── DateInput.md
    │   │   │   ├── DateInput.module.scss
    │   │   │   ├── DateInput.spec.ts
    │   │   │   ├── DateInput.tsx
    │   │   │   └── DateInputNative.tsx
    │   │   ├── DatePicker
    │   │   │   ├── DatePicker.md
    │   │   │   ├── DatePicker.module.scss
    │   │   │   ├── DatePicker.spec.ts
    │   │   │   ├── DatePicker.tsx
    │   │   │   └── DatePickerNative.tsx
    │   │   ├── DropdownMenu
    │   │   │   ├── DropdownMenu.md
    │   │   │   ├── DropdownMenu.module.scss
    │   │   │   ├── DropdownMenu.spec.ts
    │   │   │   ├── DropdownMenu.tsx
    │   │   │   ├── DropdownMenuNative.tsx
    │   │   │   ├── MenuItem.md
    │   │   │   └── SubMenuItem.md
    │   │   ├── EmojiSelector
    │   │   │   ├── EmojiSelector.md
    │   │   │   ├── EmojiSelector.spec.ts
    │   │   │   ├── EmojiSelector.tsx
    │   │   │   └── EmojiSelectorNative.tsx
    │   │   ├── ExpandableItem
    │   │   │   ├── ExpandableItem.module.scss
    │   │   │   ├── ExpandableItem.spec.ts
    │   │   │   ├── ExpandableItem.tsx
    │   │   │   └── ExpandableItemNative.tsx
    │   │   ├── FileInput
    │   │   │   ├── FileInput.md
    │   │   │   ├── FileInput.module.scss
    │   │   │   ├── FileInput.spec.ts
    │   │   │   ├── FileInput.tsx
    │   │   │   └── FileInputNative.tsx
    │   │   ├── FileUploadDropZone
    │   │   │   ├── FileUploadDropZone.md
    │   │   │   ├── FileUploadDropZone.module.scss
    │   │   │   ├── FileUploadDropZone.spec.ts
    │   │   │   ├── FileUploadDropZone.tsx
    │   │   │   └── FileUploadDropZoneNative.tsx
    │   │   ├── FlowLayout
    │   │   │   ├── FlowLayout.md
    │   │   │   ├── FlowLayout.module.scss
    │   │   │   ├── FlowLayout.spec.ts
    │   │   │   ├── FlowLayout.spec.ts-snapshots
    │   │   │   │   └── Edge-cases-boxShadow-is-not-clipped-1-non-smoke-darwin.png
    │   │   │   ├── FlowLayout.tsx
    │   │   │   └── FlowLayoutNative.tsx
    │   │   ├── Footer
    │   │   │   ├── Footer.md
    │   │   │   ├── Footer.module.scss
    │   │   │   ├── Footer.spec.ts
    │   │   │   ├── Footer.tsx
    │   │   │   └── FooterNative.tsx
    │   │   ├── Form
    │   │   │   ├── Form.md
    │   │   │   ├── Form.module.scss
    │   │   │   ├── Form.spec.ts
    │   │   │   ├── Form.tsx
    │   │   │   ├── formActions.ts
    │   │   │   ├── FormContext.ts
    │   │   │   └── FormNative.tsx
    │   │   ├── FormItem
    │   │   │   ├── FormItem.md
    │   │   │   ├── FormItem.module.scss
    │   │   │   ├── FormItem.spec.ts
    │   │   │   ├── FormItem.tsx
    │   │   │   ├── FormItemNative.tsx
    │   │   │   ├── HelperText.module.scss
    │   │   │   ├── HelperText.tsx
    │   │   │   ├── ItemWithLabel.tsx
    │   │   │   └── Validations.ts
    │   │   ├── FormSection
    │   │   │   ├── FormSection.md
    │   │   │   ├── FormSection.ts
    │   │   │   └── FormSection.xmlui
    │   │   ├── Fragment
    │   │   │   ├── Fragment.spec.ts
    │   │   │   └── Fragment.tsx
    │   │   ├── Heading
    │   │   │   ├── abstractions.ts
    │   │   │   ├── H1.md
    │   │   │   ├── H1.spec.ts
    │   │   │   ├── H2.md
    │   │   │   ├── H2.spec.ts
    │   │   │   ├── H3.md
    │   │   │   ├── H3.spec.ts
    │   │   │   ├── H4.md
    │   │   │   ├── H4.spec.ts
    │   │   │   ├── H5.md
    │   │   │   ├── H5.spec.ts
    │   │   │   ├── H6.md
    │   │   │   ├── H6.spec.ts
    │   │   │   ├── Heading.md
    │   │   │   ├── Heading.module.scss
    │   │   │   ├── Heading.spec.ts
    │   │   │   ├── Heading.tsx
    │   │   │   └── HeadingNative.tsx
    │   │   ├── HoverCard
    │   │   │   ├── HoverCard.tsx
    │   │   │   └── HovercardNative.tsx
    │   │   ├── HtmlTags
    │   │   │   ├── HtmlTags.module.scss
    │   │   │   ├── HtmlTags.spec.ts
    │   │   │   └── HtmlTags.tsx
    │   │   ├── Icon
    │   │   │   ├── AdmonitionDanger.tsx
    │   │   │   ├── AdmonitionInfo.tsx
    │   │   │   ├── AdmonitionNote.tsx
    │   │   │   ├── AdmonitionTip.tsx
    │   │   │   ├── AdmonitionWarning.tsx
    │   │   │   ├── ApiIcon.tsx
    │   │   │   ├── ArrowDropDown.module.scss
    │   │   │   ├── ArrowDropDown.tsx
    │   │   │   ├── ArrowDropUp.module.scss
    │   │   │   ├── ArrowDropUp.tsx
    │   │   │   ├── ArrowLeft.module.scss
    │   │   │   ├── ArrowLeft.tsx
    │   │   │   ├── ArrowRight.module.scss
    │   │   │   ├── ArrowRight.tsx
    │   │   │   ├── Attach.tsx
    │   │   │   ├── Binding.module.scss
    │   │   │   ├── Binding.tsx
    │   │   │   ├── BoardIcon.tsx
    │   │   │   ├── BoxIcon.tsx
    │   │   │   ├── CheckIcon.tsx
    │   │   │   ├── ChevronDownIcon.tsx
    │   │   │   ├── ChevronLeft.tsx
    │   │   │   ├── ChevronRight.tsx
    │   │   │   ├── ChevronUpIcon.tsx
    │   │   │   ├── CodeFileIcon.tsx
    │   │   │   ├── CodeSandbox.tsx
    │   │   │   ├── CompactListIcon.tsx
    │   │   │   ├── ContentCopyIcon.tsx
    │   │   │   ├── DarkToLightIcon.tsx
    │   │   │   ├── DatabaseIcon.module.scss
    │   │   │   ├── DatabaseIcon.tsx
    │   │   │   ├── DocFileIcon.tsx
    │   │   │   ├── DocIcon.tsx
    │   │   │   ├── DotMenuHorizontalIcon.tsx
    │   │   │   ├── DotMenuIcon.tsx
    │   │   │   ├── EmailIcon.tsx
    │   │   │   ├── EmptyFolderIcon.tsx
    │   │   │   ├── ErrorIcon.tsx
    │   │   │   ├── ExpressionIcon.tsx
    │   │   │   ├── FillPlusCricleIcon.tsx
    │   │   │   ├── FilterIcon.tsx
    │   │   │   ├── FolderIcon.tsx
    │   │   │   ├── GlobeIcon.tsx
    │   │   │   ├── HomeIcon.tsx
    │   │   │   ├── HyperLinkIcon.tsx
    │   │   │   ├── Icon.md
    │   │   │   ├── Icon.module.scss
    │   │   │   ├── Icon.spec.ts
    │   │   │   ├── Icon.tsx
    │   │   │   ├── IconNative.tsx
    │   │   │   ├── ImageFileIcon.tsx
    │   │   │   ├── Inspect.tsx
    │   │   │   ├── LightToDark.tsx
    │   │   │   ├── LinkIcon.tsx
    │   │   │   ├── ListIcon.tsx
    │   │   │   ├── LooseListIcon.tsx
    │   │   │   ├── MoonIcon.tsx
    │   │   │   ├── MoreOptionsIcon.tsx
    │   │   │   ├── NoSortIcon.tsx
    │   │   │   ├── PDFIcon.tsx
    │   │   │   ├── PenIcon.tsx
    │   │   │   ├── PhoneIcon.tsx
    │   │   │   ├── PhotoIcon.tsx
    │   │   │   ├── PlusIcon.tsx
    │   │   │   ├── SearchIcon.tsx
    │   │   │   ├── ShareIcon.tsx
    │   │   │   ├── SortAscendingIcon.tsx
    │   │   │   ├── SortDescendingIcon.tsx
    │   │   │   ├── StarsIcon.tsx
    │   │   │   ├── SunIcon.tsx
    │   │   │   ├── svg
    │   │   │   │   ├── admonition_danger.svg
    │   │   │   │   ├── admonition_info.svg
    │   │   │   │   ├── admonition_note.svg
    │   │   │   │   ├── admonition_tip.svg
    │   │   │   │   ├── admonition_warning.svg
    │   │   │   │   ├── api.svg
    │   │   │   │   ├── arrow-dropdown.svg
    │   │   │   │   ├── arrow-left.svg
    │   │   │   │   ├── arrow-right.svg
    │   │   │   │   ├── arrow-up.svg
    │   │   │   │   ├── attach.svg
    │   │   │   │   ├── binding.svg
    │   │   │   │   ├── box.svg
    │   │   │   │   ├── bulb.svg
    │   │   │   │   ├── code-file.svg
    │   │   │   │   ├── code-sandbox.svg
    │   │   │   │   ├── dark_to_light.svg
    │   │   │   │   ├── database.svg
    │   │   │   │   ├── doc.svg
    │   │   │   │   ├── empty-folder.svg
    │   │   │   │   ├── expression.svg
    │   │   │   │   ├── eye-closed.svg
    │   │   │   │   ├── eye-dark.svg
    │   │   │   │   ├── eye.svg
    │   │   │   │   ├── file-text.svg
    │   │   │   │   ├── filter.svg
    │   │   │   │   ├── folder.svg
    │   │   │   │   ├── img.svg
    │   │   │   │   ├── inspect.svg
    │   │   │   │   ├── light_to_dark.svg
    │   │   │   │   ├── moon.svg
    │   │   │   │   ├── pdf.svg
    │   │   │   │   ├── photo.svg
    │   │   │   │   ├── share.svg
    │   │   │   │   ├── stars.svg
    │   │   │   │   ├── sun.svg
    │   │   │   │   ├── trending-down.svg
    │   │   │   │   ├── trending-level.svg
    │   │   │   │   ├── trending-up.svg
    │   │   │   │   ├── txt.svg
    │   │   │   │   ├── unknown-file.svg
    │   │   │   │   ├── unlink.svg
    │   │   │   │   └── xls.svg
    │   │   │   ├── TableDeleteColumnIcon.tsx
    │   │   │   ├── TableDeleteRowIcon.tsx
    │   │   │   ├── TableInsertColumnIcon.tsx
    │   │   │   ├── TableInsertRowIcon.tsx
    │   │   │   ├── TrashIcon.tsx
    │   │   │   ├── TrendingDownIcon.tsx
    │   │   │   ├── TrendingLevelIcon.tsx
    │   │   │   ├── TrendingUpIcon.tsx
    │   │   │   ├── TxtIcon.tsx
    │   │   │   ├── UnknownFileIcon.tsx
    │   │   │   ├── UnlinkIcon.tsx
    │   │   │   ├── UserIcon.tsx
    │   │   │   ├── WarningIcon.tsx
    │   │   │   └── XlsIcon.tsx
    │   │   ├── IconProvider.tsx
    │   │   ├── IconRegistryContext.tsx
    │   │   ├── IFrame
    │   │   │   ├── IFrame.md
    │   │   │   ├── IFrame.module.scss
    │   │   │   ├── IFrame.spec.ts
    │   │   │   ├── IFrame.tsx
    │   │   │   └── IFrameNative.tsx
    │   │   ├── Image
    │   │   │   ├── Image.md
    │   │   │   ├── Image.module.scss
    │   │   │   ├── Image.spec.ts
    │   │   │   ├── Image.tsx
    │   │   │   └── ImageNative.tsx
    │   │   ├── Input
    │   │   │   ├── index.ts
    │   │   │   ├── InputAdornment.module.scss
    │   │   │   ├── InputAdornment.tsx
    │   │   │   ├── InputDivider.module.scss
    │   │   │   ├── InputDivider.tsx
    │   │   │   ├── InputLabel.module.scss
    │   │   │   ├── InputLabel.tsx
    │   │   │   ├── PartialInput.module.scss
    │   │   │   └── PartialInput.tsx
    │   │   ├── InspectButton
    │   │   │   ├── InspectButton.module.scss
    │   │   │   └── InspectButton.tsx
    │   │   ├── Items
    │   │   │   ├── Items.md
    │   │   │   ├── Items.spec.ts
    │   │   │   ├── Items.tsx
    │   │   │   └── ItemsNative.tsx
    │   │   ├── Link
    │   │   │   ├── Link.md
    │   │   │   ├── Link.module.scss
    │   │   │   ├── Link.spec.ts
    │   │   │   ├── Link.tsx
    │   │   │   └── LinkNative.tsx
    │   │   ├── List
    │   │   │   ├── doc-resources
    │   │   │   │   └── list-component-data.js
    │   │   │   ├── List.md
    │   │   │   ├── List.module.scss
    │   │   │   ├── List.spec.ts
    │   │   │   ├── List.tsx
    │   │   │   └── ListNative.tsx
    │   │   ├── Logo
    │   │   │   ├── doc-resources
    │   │   │   │   └── xmlui-logo.svg
    │   │   │   ├── Logo.md
    │   │   │   ├── Logo.tsx
    │   │   │   └── LogoNative.tsx
    │   │   ├── Markdown
    │   │   │   ├── CodeText.module.scss
    │   │   │   ├── CodeText.tsx
    │   │   │   ├── Markdown.md
    │   │   │   ├── Markdown.module.scss
    │   │   │   ├── Markdown.spec.ts
    │   │   │   ├── Markdown.tsx
    │   │   │   ├── MarkdownNative.tsx
    │   │   │   ├── parse-binding-expr.ts
    │   │   │   └── utils.ts
    │   │   ├── metadata-helpers.ts
    │   │   ├── ModalDialog
    │   │   │   ├── ConfirmationModalContextProvider.tsx
    │   │   │   ├── Dialog.module.scss
    │   │   │   ├── Dialog.tsx
    │   │   │   ├── ModalDialog.md
    │   │   │   ├── ModalDialog.module.scss
    │   │   │   ├── ModalDialog.spec.ts
    │   │   │   ├── ModalDialog.tsx
    │   │   │   ├── ModalDialogNative.tsx
    │   │   │   └── ModalVisibilityContext.tsx
    │   │   ├── NavGroup
    │   │   │   ├── NavGroup.md
    │   │   │   ├── NavGroup.module.scss
    │   │   │   ├── NavGroup.spec.ts
    │   │   │   ├── NavGroup.tsx
    │   │   │   ├── NavGroupContext.ts
    │   │   │   └── NavGroupNative.tsx
    │   │   ├── NavLink
    │   │   │   ├── NavLink.md
    │   │   │   ├── NavLink.module.scss
    │   │   │   ├── NavLink.spec.ts
    │   │   │   ├── NavLink.tsx
    │   │   │   └── NavLinkNative.tsx
    │   │   ├── NavPanel
    │   │   │   ├── NavPanel.md
    │   │   │   ├── NavPanel.module.scss
    │   │   │   ├── NavPanel.spec.ts
    │   │   │   ├── NavPanel.tsx
    │   │   │   └── NavPanelNative.tsx
    │   │   ├── NestedApp
    │   │   │   ├── AppWithCodeView.module.scss
    │   │   │   ├── AppWithCodeView.tsx
    │   │   │   ├── AppWithCodeViewNative.tsx
    │   │   │   ├── defaultProps.tsx
    │   │   │   ├── logo.svg
    │   │   │   ├── NestedApp.module.scss
    │   │   │   ├── NestedApp.tsx
    │   │   │   ├── NestedAppNative.tsx
    │   │   │   ├── Tooltip.module.scss
    │   │   │   ├── Tooltip.tsx
    │   │   │   └── utils.ts
    │   │   ├── NoResult
    │   │   │   ├── NoResult.md
    │   │   │   ├── NoResult.module.scss
    │   │   │   ├── NoResult.spec.ts
    │   │   │   ├── NoResult.tsx
    │   │   │   └── NoResultNative.tsx
    │   │   ├── NumberBox
    │   │   │   ├── numberbox-abstractions.ts
    │   │   │   ├── NumberBox.md
    │   │   │   ├── NumberBox.module.scss
    │   │   │   ├── NumberBox.spec.ts
    │   │   │   ├── NumberBox.tsx
    │   │   │   └── NumberBoxNative.tsx
    │   │   ├── Option
    │   │   │   ├── Option.md
    │   │   │   ├── Option.spec.ts
    │   │   │   ├── Option.tsx
    │   │   │   ├── OptionNative.tsx
    │   │   │   └── OptionTypeProvider.tsx
    │   │   ├── PageMetaTitle
    │   │   │   ├── PageMetaTilteNative.tsx
    │   │   │   ├── PageMetaTitle.md
    │   │   │   ├── PageMetaTitle.spec.ts
    │   │   │   └── PageMetaTitle.tsx
    │   │   ├── Pages
    │   │   │   ├── Page.md
    │   │   │   ├── Pages.md
    │   │   │   ├── Pages.module.scss
    │   │   │   ├── Pages.tsx
    │   │   │   └── PagesNative.tsx
    │   │   ├── Pagination
    │   │   │   ├── Pagination.md
    │   │   │   ├── Pagination.module.scss
    │   │   │   ├── Pagination.spec.ts
    │   │   │   ├── Pagination.tsx
    │   │   │   └── PaginationNative.tsx
    │   │   ├── PositionedContainer
    │   │   │   ├── PositionedContainer.module.scss
    │   │   │   ├── PositionedContainer.tsx
    │   │   │   └── PositionedContainerNative.tsx
    │   │   ├── ProfileMenu
    │   │   │   ├── ProfileMenu.module.scss
    │   │   │   └── ProfileMenu.tsx
    │   │   ├── ProgressBar
    │   │   │   ├── ProgressBar.md
    │   │   │   ├── ProgressBar.module.scss
    │   │   │   ├── ProgressBar.spec.ts
    │   │   │   ├── ProgressBar.tsx
    │   │   │   └── ProgressBarNative.tsx
    │   │   ├── Queue
    │   │   │   ├── Queue.md
    │   │   │   ├── Queue.spec.ts
    │   │   │   ├── Queue.tsx
    │   │   │   ├── queueActions.ts
    │   │   │   └── QueueNative.tsx
    │   │   ├── RadioGroup
    │   │   │   ├── RadioGroup.md
    │   │   │   ├── RadioGroup.module.scss
    │   │   │   ├── RadioGroup.spec.ts
    │   │   │   ├── RadioGroup.tsx
    │   │   │   ├── RadioGroupNative.tsx
    │   │   │   ├── RadioItem.tsx
    │   │   │   └── RadioItemNative.tsx
    │   │   ├── RealTimeAdapter
    │   │   │   ├── RealTimeAdapter.tsx
    │   │   │   └── RealTimeAdapterNative.tsx
    │   │   ├── Redirect
    │   │   │   ├── Redirect.md
    │   │   │   ├── Redirect.spec.ts
    │   │   │   └── Redirect.tsx
    │   │   ├── ResponsiveBar
    │   │   │   ├── README.md
    │   │   │   ├── ResponsiveBar.md
    │   │   │   ├── ResponsiveBar.module.scss
    │   │   │   ├── ResponsiveBar.spec.ts
    │   │   │   ├── ResponsiveBar.tsx
    │   │   │   └── ResponsiveBarNative.tsx
    │   │   ├── Select
    │   │   │   ├── HiddenOption.tsx
    │   │   │   ├── OptionContext.ts
    │   │   │   ├── Select.md
    │   │   │   ├── Select.module.scss
    │   │   │   ├── Select.spec.ts
    │   │   │   ├── Select.tsx
    │   │   │   ├── SelectContext.tsx
    │   │   │   └── SelectNative.tsx
    │   │   ├── SelectionStore
    │   │   │   ├── SelectionStore.md
    │   │   │   ├── SelectionStore.tsx
    │   │   │   └── SelectionStoreNative.tsx
    │   │   ├── Slider
    │   │   │   ├── Slider.md
    │   │   │   ├── Slider.module.scss
    │   │   │   ├── Slider.spec.ts
    │   │   │   ├── Slider.tsx
    │   │   │   └── SliderNative.tsx
    │   │   ├── Slot
    │   │   │   ├── Slot.md
    │   │   │   ├── Slot.spec.ts
    │   │   │   └── Slot.ts
    │   │   ├── SlotItem.tsx
    │   │   ├── SpaceFiller
    │   │   │   ├── SpaceFiller.md
    │   │   │   ├── SpaceFiller.module.scss
    │   │   │   ├── SpaceFiller.spec.ts
    │   │   │   ├── SpaceFiller.tsx
    │   │   │   └── SpaceFillerNative.tsx
    │   │   ├── Spinner
    │   │   │   ├── Spinner.md
    │   │   │   ├── Spinner.module.scss
    │   │   │   ├── Spinner.spec.ts
    │   │   │   ├── Spinner.tsx
    │   │   │   └── SpinnerNative.tsx
    │   │   ├── Splitter
    │   │   │   ├── HSplitter.md
    │   │   │   ├── HSplitter.spec.ts
    │   │   │   ├── Splitter.md
    │   │   │   ├── Splitter.module.scss
    │   │   │   ├── Splitter.spec.ts
    │   │   │   ├── Splitter.tsx
    │   │   │   ├── SplitterNative.tsx
    │   │   │   ├── utils.ts
    │   │   │   ├── VSplitter.md
    │   │   │   └── VSplitter.spec.ts
    │   │   ├── Stack
    │   │   │   ├── CHStack.md
    │   │   │   ├── CHStack.spec.ts
    │   │   │   ├── CVStack.md
    │   │   │   ├── CVStack.spec.ts
    │   │   │   ├── HStack.md
    │   │   │   ├── HStack.spec.ts
    │   │   │   ├── Stack.md
    │   │   │   ├── Stack.module.scss
    │   │   │   ├── Stack.spec.ts
    │   │   │   ├── Stack.tsx
    │   │   │   ├── StackNative.tsx
    │   │   │   ├── VStack.md
    │   │   │   └── VStack.spec.ts
    │   │   ├── StickyBox
    │   │   │   ├── StickyBox.md
    │   │   │   ├── StickyBox.module.scss
    │   │   │   ├── StickyBox.tsx
    │   │   │   └── StickyBoxNative.tsx
    │   │   ├── Switch
    │   │   │   ├── Switch.md
    │   │   │   ├── Switch.spec.ts
    │   │   │   └── Switch.tsx
    │   │   ├── Table
    │   │   │   ├── doc-resources
    │   │   │   │   └── list-component-data.js
    │   │   │   ├── react-table-config.d.ts
    │   │   │   ├── Table.md
    │   │   │   ├── Table.module.scss
    │   │   │   ├── Table.spec.ts
    │   │   │   ├── Table.tsx
    │   │   │   ├── TableNative.tsx
    │   │   │   └── useRowSelection.tsx
    │   │   ├── TableOfContents
    │   │   │   ├── TableOfContents.module.scss
    │   │   │   ├── TableOfContents.spec.ts
    │   │   │   ├── TableOfContents.tsx
    │   │   │   └── TableOfContentsNative.tsx
    │   │   ├── Tabs
    │   │   │   ├── TabContext.tsx
    │   │   │   ├── TabItem.md
    │   │   │   ├── TabItem.tsx
    │   │   │   ├── TabItemNative.tsx
    │   │   │   ├── Tabs.md
    │   │   │   ├── Tabs.module.scss
    │   │   │   ├── Tabs.spec.ts
    │   │   │   ├── Tabs.tsx
    │   │   │   └── TabsNative.tsx
    │   │   ├── Text
    │   │   │   ├── Text.md
    │   │   │   ├── Text.module.scss
    │   │   │   ├── Text.spec.ts
    │   │   │   ├── Text.tsx
    │   │   │   └── TextNative.tsx
    │   │   ├── TextArea
    │   │   │   ├── TextArea.md
    │   │   │   ├── TextArea.module.scss
    │   │   │   ├── TextArea.spec.ts
    │   │   │   ├── TextArea.tsx
    │   │   │   ├── TextAreaNative.tsx
    │   │   │   ├── TextAreaResizable.tsx
    │   │   │   └── useComposedRef.ts
    │   │   ├── TextBox
    │   │   │   ├── TextBox.md
    │   │   │   ├── TextBox.module.scss
    │   │   │   ├── TextBox.spec.ts
    │   │   │   ├── TextBox.tsx
    │   │   │   └── TextBoxNative.tsx
    │   │   ├── Theme
    │   │   │   ├── NotificationToast.tsx
    │   │   │   ├── Theme.md
    │   │   │   ├── Theme.module.scss
    │   │   │   ├── Theme.spec.ts
    │   │   │   ├── Theme.tsx
    │   │   │   └── ThemeNative.tsx
    │   │   ├── TimeInput
    │   │   │   ├── TimeInput.md
    │   │   │   ├── TimeInput.module.scss
    │   │   │   ├── TimeInput.spec.ts
    │   │   │   ├── TimeInput.tsx
    │   │   │   ├── TimeInputNative.tsx
    │   │   │   └── utils.ts
    │   │   ├── Timer
    │   │   │   ├── Timer.md
    │   │   │   ├── Timer.spec.ts
    │   │   │   ├── Timer.tsx
    │   │   │   └── TimerNative.tsx
    │   │   ├── Toggle
    │   │   │   ├── Toggle.module.scss
    │   │   │   └── Toggle.tsx
    │   │   ├── ToneChangerButton
    │   │   │   ├── ToneChangerButton.md
    │   │   │   ├── ToneChangerButton.spec.ts
    │   │   │   └── ToneChangerButton.tsx
    │   │   ├── ToneSwitch
    │   │   │   ├── ToneSwitch.md
    │   │   │   ├── ToneSwitch.module.scss
    │   │   │   ├── ToneSwitch.spec.ts
    │   │   │   ├── ToneSwitch.tsx
    │   │   │   └── ToneSwitchNative.tsx
    │   │   ├── Tooltip
    │   │   │   ├── Tooltip.md
    │   │   │   ├── Tooltip.module.scss
    │   │   │   ├── Tooltip.spec.ts
    │   │   │   ├── Tooltip.tsx
    │   │   │   └── TooltipNative.tsx
    │   │   ├── Tree
    │   │   │   ├── testData.ts
    │   │   │   ├── Tree-dynamic.spec.ts
    │   │   │   ├── Tree-icons.spec.ts
    │   │   │   ├── Tree.md
    │   │   │   ├── Tree.spec.ts
    │   │   │   ├── TreeComponent.module.scss
    │   │   │   ├── TreeComponent.tsx
    │   │   │   └── TreeNative.tsx
    │   │   ├── TreeDisplay
    │   │   │   ├── TreeDisplay.md
    │   │   │   ├── TreeDisplay.module.scss
    │   │   │   ├── TreeDisplay.tsx
    │   │   │   └── TreeDisplayNative.tsx
    │   │   ├── ValidationSummary
    │   │   │   ├── ValidationSummary.module.scss
    │   │   │   └── ValidationSummary.tsx
    │   │   └── VisuallyHidden.tsx
    │   ├── components-core
    │   │   ├── abstractions
    │   │   │   ├── ComponentRenderer.ts
    │   │   │   ├── LoaderRenderer.ts
    │   │   │   ├── standalone.ts
    │   │   │   └── treeAbstractions.ts
    │   │   ├── action
    │   │   │   ├── actions.ts
    │   │   │   ├── APICall.tsx
    │   │   │   ├── FileDownloadAction.tsx
    │   │   │   ├── FileUploadAction.tsx
    │   │   │   ├── NavigateAction.tsx
    │   │   │   └── TimedAction.tsx
    │   │   ├── ApiBoundComponent.tsx
    │   │   ├── appContext
    │   │   │   ├── date-functions.ts
    │   │   │   ├── math-function.ts
    │   │   │   └── misc-utils.ts
    │   │   ├── AppContext.tsx
    │   │   ├── behaviors
    │   │   │   ├── Behavior.tsx
    │   │   │   └── CoreBehaviors.tsx
    │   │   ├── component-hooks.ts
    │   │   ├── ComponentDecorator.tsx
    │   │   ├── ComponentViewer.tsx
    │   │   ├── CompoundComponent.tsx
    │   │   ├── constants.ts
    │   │   ├── DebugViewProvider.tsx
    │   │   ├── descriptorHelper.ts
    │   │   ├── devtools
    │   │   │   ├── InspectorDialog.module.scss
    │   │   │   ├── InspectorDialog.tsx
    │   │   │   └── InspectorDialogVisibilityContext.tsx
    │   │   ├── EngineError.ts
    │   │   ├── event-handlers.ts
    │   │   ├── InspectorButton.module.scss
    │   │   ├── InspectorContext.tsx
    │   │   ├── interception
    │   │   │   ├── abstractions.ts
    │   │   │   ├── ApiInterceptor.ts
    │   │   │   ├── ApiInterceptorProvider.tsx
    │   │   │   ├── apiInterceptorWorker.ts
    │   │   │   ├── Backend.ts
    │   │   │   ├── Errors.ts
    │   │   │   ├── IndexedDb.ts
    │   │   │   ├── initMock.ts
    │   │   │   ├── InMemoryDb.ts
    │   │   │   ├── ReadonlyCollection.ts
    │   │   │   └── useApiInterceptorContext.tsx
    │   │   ├── loader
    │   │   │   ├── ApiLoader.tsx
    │   │   │   ├── DataLoader.tsx
    │   │   │   ├── ExternalDataLoader.tsx
    │   │   │   ├── Loader.tsx
    │   │   │   ├── MockLoaderRenderer.tsx
    │   │   │   └── PageableLoader.tsx
    │   │   ├── LoaderComponent.tsx
    │   │   ├── markup-check.ts
    │   │   ├── parts.ts
    │   │   ├── renderers.ts
    │   │   ├── rendering
    │   │   │   ├── AppContent.tsx
    │   │   │   ├── AppRoot.tsx
    │   │   │   ├── AppWrapper.tsx
    │   │   │   ├── buildProxy.ts
    │   │   │   ├── collectFnVarDeps.ts
    │   │   │   ├── ComponentAdapter.tsx
    │   │   │   ├── ComponentWrapper.tsx
    │   │   │   ├── Container.tsx
    │   │   │   ├── containers.ts
    │   │   │   ├── ContainerWrapper.tsx
    │   │   │   ├── ErrorBoundary.module.scss
    │   │   │   ├── ErrorBoundary.tsx
    │   │   │   ├── InvalidComponent.module.scss
    │   │   │   ├── InvalidComponent.tsx
    │   │   │   ├── nodeUtils.ts
    │   │   │   ├── reducer.ts
    │   │   │   ├── renderChild.tsx
    │   │   │   ├── StandaloneComponent.tsx
    │   │   │   ├── StateContainer.tsx
    │   │   │   ├── UnknownComponent.module.scss
    │   │   │   ├── UnknownComponent.tsx
    │   │   │   └── valueExtractor.ts
    │   │   ├── reportEngineError.ts
    │   │   ├── RestApiProxy.ts
    │   │   ├── script-runner
    │   │   │   ├── asyncProxy.ts
    │   │   │   ├── AttributeValueParser.ts
    │   │   │   ├── bannedFunctions.ts
    │   │   │   ├── BindingTreeEvaluationContext.ts
    │   │   │   ├── eval-tree-async.ts
    │   │   │   ├── eval-tree-common.ts
    │   │   │   ├── eval-tree-sync.ts
    │   │   │   ├── ParameterParser.ts
    │   │   │   ├── process-statement-async.ts
    │   │   │   ├── process-statement-common.ts
    │   │   │   ├── process-statement-sync.ts
    │   │   │   ├── ScriptingSourceTree.ts
    │   │   │   ├── simplify-expression.ts
    │   │   │   ├── statement-queue.ts
    │   │   │   └── visitors.ts
    │   │   ├── StandaloneApp.tsx
    │   │   ├── StandaloneExtensionManager.ts
    │   │   ├── TableOfContentsContext.tsx
    │   │   ├── theming
    │   │   │   ├── _themes.scss
    │   │   │   ├── component-layout-resolver.ts
    │   │   │   ├── extendThemeUtils.ts
    │   │   │   ├── hvar.ts
    │   │   │   ├── layout-resolver.ts
    │   │   │   ├── parse-layout-props.ts
    │   │   │   ├── StyleContext.tsx
    │   │   │   ├── StyleRegistry.ts
    │   │   │   ├── ThemeContext.tsx
    │   │   │   ├── ThemeProvider.tsx
    │   │   │   ├── themes
    │   │   │   │   ├── base-utils.ts
    │   │   │   │   ├── palette.ts
    │   │   │   │   ├── root.ts
    │   │   │   │   ├── solid.ts
    │   │   │   │   ├── theme-colors.ts
    │   │   │   │   └── xmlui.ts
    │   │   │   ├── themeVars.module.scss
    │   │   │   ├── themeVars.ts
    │   │   │   ├── transformThemeVars.ts
    │   │   │   └── utils.ts
    │   │   ├── utils
    │   │   │   ├── actionUtils.ts
    │   │   │   ├── audio-utils.ts
    │   │   │   ├── base64-utils.ts
    │   │   │   ├── compound-utils.ts
    │   │   │   ├── css-utils.ts
    │   │   │   ├── DataLoaderQueryKeyGenerator.ts
    │   │   │   ├── date-utils.ts
    │   │   │   ├── extractParam.ts
    │   │   │   ├── hooks.tsx
    │   │   │   ├── LruCache.ts
    │   │   │   ├── mergeProps.ts
    │   │   │   ├── misc.ts
    │   │   │   ├── request-params.ts
    │   │   │   ├── statementUtils.ts
    │   │   │   └── treeUtils.ts
    │   │   └── xmlui-parser.ts
    │   ├── index-standalone.ts
    │   ├── index.scss
    │   ├── index.ts
    │   ├── language-server
    │   │   ├── server-common.ts
    │   │   ├── server-web-worker.ts
    │   │   ├── server.ts
    │   │   ├── services
    │   │   │   ├── common
    │   │   │   │   ├── docs-generation.ts
    │   │   │   │   ├── lsp-utils.ts
    │   │   │   │   ├── metadata-utils.ts
    │   │   │   │   └── syntax-node-utilities.ts
    │   │   │   ├── completion.ts
    │   │   │   ├── diagnostic.ts
    │   │   │   ├── format.ts
    │   │   │   └── hover.ts
    │   │   └── xmlui-metadata-generated.js
    │   ├── logging
    │   │   ├── LoggerContext.tsx
    │   │   ├── LoggerInitializer.tsx
    │   │   ├── LoggerService.ts
    │   │   └── xmlui.ts
    │   ├── logo.svg
    │   ├── parsers
    │   │   ├── common
    │   │   │   ├── GenericToken.ts
    │   │   │   ├── InputStream.ts
    │   │   │   └── utils.ts
    │   │   ├── scripting
    │   │   │   ├── code-behind-collect.ts
    │   │   │   ├── Lexer.ts
    │   │   │   ├── modules.ts
    │   │   │   ├── Parser.ts
    │   │   │   ├── ParserError.ts
    │   │   │   ├── ScriptingNodeTypes.ts
    │   │   │   ├── TokenTrait.ts
    │   │   │   ├── TokenType.ts
    │   │   │   └── tree-visitor.ts
    │   │   ├── style-parser
    │   │   │   ├── errors.ts
    │   │   │   ├── source-tree.ts
    │   │   │   ├── StyleInputStream.ts
    │   │   │   ├── StyleLexer.ts
    │   │   │   ├── StyleParser.ts
    │   │   │   └── tokens.ts
    │   │   └── xmlui-parser
    │   │       ├── CharacterCodes.ts
    │   │       ├── diagnostics.ts
    │   │       ├── fileExtensions.ts
    │   │       ├── index.ts
    │   │       ├── lint.ts
    │   │       ├── parser.ts
    │   │       ├── ParserError.ts
    │   │       ├── scanner.ts
    │   │       ├── syntax-kind.ts
    │   │       ├── syntax-node.ts
    │   │       ├── transform.ts
    │   │       ├── utils.ts
    │   │       ├── xmlui-serializer.ts
    │   │       └── xmlui-tree.ts
    │   ├── react-app-env.d.ts
    │   ├── syntax
    │   │   ├── monaco
    │   │   │   ├── grammar.monacoLanguage.ts
    │   │   │   ├── index.ts
    │   │   │   ├── xmlui-dark.ts
    │   │   │   ├── xmlui-light.ts
    │   │   │   └── xmluiscript.monacoLanguage.ts
    │   │   └── textMate
    │   │       ├── index.ts
    │   │       ├── xmlui-dark.json
    │   │       ├── xmlui-light.json
    │   │       ├── xmlui.json
    │   │       └── xmlui.tmLanguage.json
    │   ├── testing
    │   │   ├── assertions.ts
    │   │   ├── component-test-helpers.ts
    │   │   ├── ComponentDrivers.ts
    │   │   ├── drivers
    │   │   │   ├── DateInputDriver.ts
    │   │   │   ├── index.ts
    │   │   │   ├── ModalDialogDriver.ts
    │   │   │   ├── NumberBoxDriver.ts
    │   │   │   ├── TextBoxDriver.ts
    │   │   │   ├── TimeInputDriver.ts
    │   │   │   ├── TimerDriver.ts
    │   │   │   └── TreeDriver.ts
    │   │   ├── fixtures.ts
    │   │   ├── index.ts
    │   │   ├── infrastructure
    │   │   │   ├── index.html
    │   │   │   ├── main.tsx
    │   │   │   ├── public
    │   │   │   │   ├── mockServiceWorker.js
    │   │   │   │   ├── resources
    │   │   │   │   │   ├── bell.svg
    │   │   │   │   │   ├── box.svg
    │   │   │   │   │   ├── doc.svg
    │   │   │   │   │   ├── eye.svg
    │   │   │   │   │   ├── flower-640x480.jpg
    │   │   │   │   │   ├── sun.svg
    │   │   │   │   │   ├── test-image-100x100.jpg
    │   │   │   │   │   └── txt.svg
    │   │   │   │   └── serve.json
    │   │   │   └── TestBed.tsx
    │   │   └── themed-app-test-helpers.ts
    │   └── vite-env.d.ts
    ├── tests
    │   ├── components
    │   │   ├── CodeBlock
    │   │   │   └── hightlight-code.test.ts
    │   │   ├── playground-pattern.test.ts
    │   │   └── Tree
    │   │       └── Tree-states.test.ts
    │   ├── components-core
    │   │   ├── abstractions
    │   │   │   └── treeAbstractions.test.ts
    │   │   ├── container
    │   │   │   └── buildProxy.test.ts
    │   │   ├── interception
    │   │   │   ├── orderBy.test.ts
    │   │   │   ├── ReadOnlyCollection.test.ts
    │   │   │   └── request-param-converter.test.ts
    │   │   ├── scripts-runner
    │   │   │   ├── AttributeValueParser.test.ts
    │   │   │   ├── eval-tree-arrow-async.test.ts
    │   │   │   ├── eval-tree-arrow.test.ts
    │   │   │   ├── eval-tree-func-decl-async.test.ts
    │   │   │   ├── eval-tree-func-decl.test.ts
    │   │   │   ├── eval-tree-pre-post.test.ts
    │   │   │   ├── eval-tree-regression.test.ts
    │   │   │   ├── eval-tree.test.ts
    │   │   │   ├── function-proxy.test.ts
    │   │   │   ├── parser-regression.test.ts
    │   │   │   ├── process-event.test.ts
    │   │   │   ├── process-function.test.ts
    │   │   │   ├── process-implicit-context.test.ts
    │   │   │   ├── process-statement-asgn.test.ts
    │   │   │   ├── process-statement-destruct.test.ts
    │   │   │   ├── process-statement-regs.test.ts
    │   │   │   ├── process-statement-sync.test.ts
    │   │   │   ├── process-statement.test.ts
    │   │   │   ├── process-switch-sync.test.ts
    │   │   │   ├── process-switch.test.ts
    │   │   │   ├── process-try-sync.test.ts
    │   │   │   ├── process-try.test.ts
    │   │   │   └── test-helpers.ts
    │   │   ├── test-metadata-handler.ts
    │   │   ├── theming
    │   │   │   ├── border-segments.test.ts
    │   │   │   ├── component-layout.resolver.test.ts
    │   │   │   ├── layout-property-parser.test.ts
    │   │   │   ├── layout-resolver.test.ts
    │   │   │   ├── layout-resolver2.test.ts
    │   │   │   ├── layout-vp-override.test.ts
    │   │   │   └── padding-segments.test.ts
    │   │   └── utils
    │   │       ├── date-utils.test.ts
    │   │       ├── format-human-elapsed-time.test.ts
    │   │       └── LruCache.test.ts
    │   ├── language-server
    │   │   ├── completion.test.ts
    │   │   ├── format.test.ts
    │   │   ├── hover.test.ts
    │   │   └── mockData.ts
    │   └── parsers
    │       ├── common
    │       │   └── input-stream.test.ts
    │       ├── markdown
    │       │   └── parse-binding-expression.test.ts
    │       ├── parameter-parser.test.ts
    │       ├── paremeter-parser.test.ts
    │       ├── scripting
    │       │   ├── eval-tree-arrow.test.ts
    │       │   ├── eval-tree-pre-post.test.ts
    │       │   ├── eval-tree.test.ts
    │       │   ├── function-proxy.test.ts
    │       │   ├── lexer-literals.test.ts
    │       │   ├── lexer-misc.test.ts
    │       │   ├── module-parse.test.ts
    │       │   ├── parser-arrow.test.ts
    │       │   ├── parser-assignments.test.ts
    │       │   ├── parser-binary.test.ts
    │       │   ├── parser-destructuring.test.ts
    │       │   ├── parser-errors.test.ts
    │       │   ├── parser-expressions.test.ts
    │       │   ├── parser-function.test.ts
    │       │   ├── parser-literals.test.ts
    │       │   ├── parser-primary.test.ts
    │       │   ├── parser-regex.test.ts
    │       │   ├── parser-statements.test.ts
    │       │   ├── parser-unary.test.ts
    │       │   ├── process-event.test.ts
    │       │   ├── process-implicit-context.test.ts
    │       │   ├── process-statement-asgn.test.ts
    │       │   ├── process-statement-destruct.test.ts
    │       │   ├── process-statement-regs.test.ts
    │       │   ├── process-statement-sync.test.ts
    │       │   ├── process-statement.test.ts
    │       │   ├── process-switch-sync.test.ts
    │       │   ├── process-switch.test.ts
    │       │   ├── process-try-sync.test.ts
    │       │   ├── process-try.test.ts
    │       │   ├── simplify-expression.test.ts
    │       │   ├── statement-hooks.test.ts
    │       │   └── test-helpers.ts
    │       ├── style-parser
    │       │   ├── generateHvarChain.test.ts
    │       │   ├── parseHVar.test.ts
    │       │   ├── parser.test.ts
    │       │   └── tokens.test.ts
    │       └── xmlui
    │           ├── lint.test.ts
    │           ├── parser.test.ts
    │           ├── scanner.test.ts
    │           ├── transform.attr.test.ts
    │           ├── transform.circular.test.ts
    │           ├── transform.element.test.ts
    │           ├── transform.errors.test.ts
    │           ├── transform.escape.test.ts
    │           ├── transform.regression.test.ts
    │           ├── transform.script.test.ts
    │           ├── transform.test.ts
    │           └── xmlui.ts
    ├── tests-e2e
    │   ├── api-bound-component-regression.spec.ts
    │   ├── api-call-as-extracted-component.spec.ts
    │   ├── assign-to-object-or-array-regression.spec.ts
    │   ├── binding-regression.spec.ts
    │   ├── children-as-template-context-vars.spec.ts
    │   ├── compound-component.spec.ts
    │   ├── context-vars-regression.spec.ts
    │   ├── data-bindings.spec.ts
    │   ├── datasource-and-api-usage-in-var.spec.ts
    │   ├── datasource-direct-binding.spec.ts
    │   ├── datasource-onLoaded-regression.spec.ts
    │   ├── modify-array-item-regression.spec.ts
    │   ├── namespaces.spec.ts
    │   ├── push-to-array-regression.spec.ts
    │   ├── screen-breakpoints.spec.ts
    │   ├── scripting.spec.ts
    │   ├── state-scope-in-pages.spec.ts
    │   └── state-var-scopes.spec.ts
    ├── tsconfig.bin.json
    ├── tsconfig.json
    ├── tsconfig.node.json
    ├── vite.config.ts
    └── vitest.config.ts
```

# Files

--------------------------------------------------------------------------------
/xmlui/tests-e2e/namespaces.spec.ts:
--------------------------------------------------------------------------------

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

test("core button renders without namespace", async ({ page, initTestBed }) => {
  await initTestBed(`<App><Button testId="button">CORE</Button></App>`, {
    components: [
      `
      <Component name="Button">
        <Text>COMPOUND COMPONENT</Text>
      </Component>
    `,
    ],
  });
  await expect(page.getByTestId("button")).toHaveText("CORE");
});

test("core button renders with XMLUI namespace", async ({ page, initTestBed }) => {
  await initTestBed(
    `
    <App xmlns:XMLUI="core-ns">
      <XMLUI:Button testId="button">CORE</XMLUI:Button>
    </App>`,
    {
      components: [
        `
      <Component name="Button">
        <Text>COMPOUND COMPONENT</Text>
      </Component>
    `,
      ],
    },
  );
  await expect(page.getByTestId("button")).toHaveText("CORE");
});

test("compound component button renders with app-ns namespace", async ({ page, initTestBed }) => {
  await initTestBed(
    `
    <App xmlns:My="app-ns">
      <My:Button testId="button">CORE</My:Button>
    </App>`,
    {
      components: [
        `
      <Component name="Button">
        <Text>COMPOUND COMPONENT</Text>
      </Component>
    `,
      ],
    },
  );
  await expect(page.getByTestId("button")).toHaveText("COMPOUND COMPONENT");
});

test("compound component renders without namespace (no name-conflict with core component)", async ({
  page,
  initTestBed,
}) => {
  await initTestBed(
    `
    <App>
      <MyButton testId="button">CORE</MyButton>
    </App>`,
    {
      components: [
        `
      <Component name="MyButton">
        <Text>COMPOUND COMPONENT</Text>
      </Component>
    `,
      ],
    },
  );
  await expect(page.getByTestId("button")).toHaveText("COMPOUND COMPONENT");
});

test("extension doesn't render without namespace", async ({ page, initTestBed }) => {
  await initTestBed(`
    <App>
      <TestComponent testId="testComp">EXTENSION CONTENT</TestComponent>
    </App>`);
  await expect(page.getByTestId("testComp")).not.toBeVisible();
});

```

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

```typescript
import { usePlayground } from "../hooks/usePlayground";
import { MdOutlinePalette } from "react-icons/md";
import styles from "./ThemeSwitcher.module.scss";
import classnames from "classnames";
import * as RadixMenu from "@radix-ui/react-dropdown-menu";
import { FiCheck } from "react-icons/fi";
import { activeThemeChanged } from "../state/store";
import { forwardRef } from "react";
import { Button, useTheme } from "xmlui";

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

  return (
    <div>
      <RadixMenu.Root modal={false}>
        <RadixMenu.Trigger className={styles.button} {...props} asChild ref={ref}>
          <Button variant="ghost">
            <MdOutlinePalette size={18} />
          </Button>
        </RadixMenu.Trigger>
        <RadixMenu.Portal container={root}>
          <RadixMenu.Content className={classnames(styles.RadixMenuContent)}>
            <RadixMenu.Label className={styles.RadixMenuLabel}>Theme</RadixMenu.Label>
            <RadixMenu.RadioGroup
              className={styles.RadixMenuRadioGroup}
              value={options.activeTheme}
              onValueChange={(value: string) => dispatch(activeThemeChanged(value))}
            >
              {appDescription.availableThemes &&
                appDescription.availableThemes.length > 0 &&
                appDescription.availableThemes.map((theme, index) => (
                  <RadixMenu.RadioItem
                    className={styles.RadixMenuRadioItem}
                    value={theme.id}
                    key={index}
                  >
                    {theme.id}
                    <RadixMenu.ItemIndicator className={styles.RadixMenuItemIndicator}>
                      <FiCheck />
                    </RadixMenu.ItemIndicator>
                  </RadixMenu.RadioItem>
                ))}
            </RadixMenu.RadioGroup>
          </RadixMenu.Content>
        </RadixMenu.Portal>
      </RadixMenu.Root>
    </div>
  );
});

ThemeSwitcher.displayName = "ThemeSwitcher";

```

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

```
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 5.15039H28C28.4694 5.15039 28.8496 5.53056 28.8496 6V26.6445C28.8496 26.8769 28.755 27.0994 28.5869 27.2598L24.0205 31.6152C23.8625 31.766 23.652 31.8496 23.4336 31.8496H7C6.53056 31.8496 6.15039 31.4694 6.15039 31V6C6.15039 5.53056 6.53056 5.15039 7 5.15039Z" fill="#FEFEFE" stroke="#666666" stroke-width="0.3"/>
<path d="M26.0982 12.5596H8.58191V13.083H26.0982V12.5596Z" fill="#666666"/>
<path d="M26.0982 15.3857H8.58191V15.9092H26.0982V15.3857Z" fill="#666666"/>
<path d="M26.0982 18.2109H8.58191V18.7344H26.0982V18.2109Z" fill="#666666"/>
<path d="M26.0982 21.0039H8.58191V21.5273H26.0982V21.0039Z" fill="#666666"/>
<path d="M26.0982 23.8291H8.58191V24.3525H26.0982V23.8291Z" fill="#666666"/>
<path d="M16.8516 27.0947H8.58191V27.6181H16.8516V27.0947Z" fill="#666666"/>
<path d="M23.9056 32.3591L29 27.2646H23.9056V32.3591Z" fill="#F4F2F2"/>
<path d="M21 9H14V10H21V9Z" fill="#535353"/>
<path d="M23.9339 14.783L22.4576 13.9355L21.6053 15.4034L23.0816 16.2508L23.9339 14.783Z" fill="#E0E1E2"/>
<path d="M25.6385 11.8475L24.8948 11.4206C24.7937 11.3625 24.6837 11.3307 24.5715 11.3222C24.5154 11.318 24.4589 11.3196 24.4026 11.3276C24.1208 11.3654 23.8457 11.5452 23.6789 11.8325L22.4576 13.9357L23.9339 14.7831L25.6385 11.8475Z" fill="#E85738"/>
<path d="M24.9268 17.3103L23.0815 16.251L18.1808 24.6911L20.0261 25.7504L24.9268 17.3103Z" fill="#F2C91D"/>
<path d="M25.7791 15.8425L23.9338 14.7832L23.0815 16.251L24.9268 17.3104L25.7791 15.8425Z" fill="#C4C4C4"/>
<path d="M25.7791 15.8427L27.0003 13.7395C27.1671 13.4522 27.1541 13.107 26.9975 12.8174C26.9664 12.7598 26.9289 12.7036 26.8866 12.6514C26.8012 12.5465 26.6944 12.4539 26.568 12.3813L25.6384 11.8477L23.9338 14.7833L25.7791 15.8427Z" fill="#B13218"/>
<path d="M20.0261 25.7505L16.7046 23.8438L16.6607 27.7328L20.0261 25.7505Z" fill="#FDEDD9"/>
<path d="M17.8536 26.95L16.7465 26.3145L16.6608 27.7331L17.8536 26.95Z" fill="#4C4C4C"/>
<path d="M23.0816 16.2508L21.6053 15.4033L16.7046 23.8434L18.1808 24.6909L23.0816 16.2508Z" fill="#FFD93C"/>
</svg>

```

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

```typescript
import { createComponentRenderer } from "../../components-core/renderers";
import { MemoizedItem } from "../container-helpers";
import { createMetadata, d, dComponent, dInternal } from "../metadata-helpers";
import { Items, defaultProps } from "./ItemsNative";

const COMP = "Items";

export const ItemsMd = createMetadata({
  status: "stable",
  description:
    "`Items` renders data arrays without built-in layout or styling, providing " +
    "a lightweight alternative to `List`. Unlike `List`, it provides no " +
    "virtualization, grouping, or visual formatting — just pure data iteration.",
  props: {
    items: dInternal(`This property contains the list of data items this component renders.`),
    data: d(
      `This property contains the list of data items (obtained from a data source) this component renders.`,
    ),
    reverse: {
      description:
        "This property reverses the order in which data is mapped to template components.",
      type: "boolean",
      defaultValue: defaultProps.reverse,
    },
    itemTemplate: dComponent("The component template to display a single item"),
  },
  childrenAsTemplate: "itemTemplate",
  contextVars: {
    $item: dComponent("Current data item being rendered"),
    $itemIndex: dComponent(
      "Zero-based index of current item",
    ),
    $isFirst: dComponent("Boolean indicating if this is the first item"),
    $isLast: dComponent("Boolean indicating if this is the last item"),
  },
  opaque: true,
});

export const itemsComponentRenderer = createComponentRenderer(COMP, ItemsMd, (rendererContext) => {
  const { node, renderChild, extractValue, layoutContext } = rendererContext;
  return (
    <Items
      items={extractValue(node.props.items) || extractValue(node.props.data)}
      reverse={extractValue(node.props.reverse)}
      renderItem={(contextVars, key) => {
        return (
          <MemoizedItem
            key={key}
            contextVars={contextVars}
            node={node.props.itemTemplate}
            renderChild={renderChild}
            layoutContext={layoutContext}
          />
        );
      }}
    />
  );
});

```

--------------------------------------------------------------------------------
/xmlui/tests/parsers/xmlui/transform.test.ts:
--------------------------------------------------------------------------------

```typescript
import { describe, expect, it, assert } from "vitest";
import type { ComponentDef, CompoundComponentDef } from "../../../src/abstractions/ComponentDefs";
import { transformSource } from "./xmlui";

describe("Xmlui transform", () => {
  it("Empty code results in error", () => {
    try {
      transformSource("");
      assert.fail("Exception expected");
    } catch (err) {
      expect(err.toString().includes("T001")).equal(true);
    }
  });

  it("Empty component #1", () => {
    const cd = transformSource("<Stack />") as ComponentDef;
    expect(cd.type).equal("Stack");
  });

  it("Empty component #2", () => {
    const cd = transformSource("<!-- This is a stack --><Stack />") as ComponentDef;
    expect(cd.type).equal("Stack");
  });

  it("Compound component needs a name #1", () => {
    try {
      transformSource("<Component><Stack/></Component>");
      assert.fail("Exception expected");
    } catch (err) {
      expect(err.toString().includes("T003")).equal(true);
    }
  });

  it("Compound component needs a name #2", () => {
    try {
      transformSource("<Component name='haho'><Stack/></Component>");
      assert.fail("Exception expected");
    } catch (err) {
      expect(err.toString().includes("T004")).equal(true);
    }
  });

  it("Compound component needs a component child #1", () => {
    const cd = transformSource("<Component name='MyComp'><!-- comment--></Component>") as CompoundComponentDef;
    expect((cd.component).type).equal("TextNode");
    expect(((cd.component).props as any).value).equal("");
  });

  it("Compound component needs a component child #2", () => {
    const cd = transformSource("<Component name='MyComp'></Component>") as CompoundComponentDef;
    expect((cd.component).type).equal("TextNode");
    expect(((cd.component).props as any).value).equal("");
  });

  it("Compound component cannot nest another one", () => {
    try {
      transformSource("<Component name='MyComp'><Component name='Other'/></Component>");
      assert.fail("Exception expected");
    } catch (err) {
      expect(err.toString().includes("T006")).equal(true);
    }
  });
});

```

--------------------------------------------------------------------------------
/blog/scripts/download-latest-xmlui.js:
--------------------------------------------------------------------------------

```javascript
#!/usr/bin/env node

const fs = require("fs").promises;
const path = require("path");
const axios = require("axios");
const { sortByVersion, XMLUI_STANDALONE_PATTERN } = require("./utils.js");

const getLatestAssetUrl = async () => {
  try {
    const per_page = 100;
    const max_releases = 100;

    const url = `https://api.github.com/repos/xmlui-org/xmlui/releases?per_page=${per_page}`;

    const res = await fetch(url);

    if (!res.ok) {
      throw new Error(`GitHub API error: ${res.status} ${res.statusText}`);
    }

    /** @type {Array<any>} */
    const releases = await res.json();

    const xmluiReleases = releases
      .filter((r) => r?.tag_name?.startsWith("xmlui@"))
      .sort(sortByVersion);

    const releasesToProcess = xmluiReleases.slice(0, max_releases);

    for (const release of releasesToProcess) {
      const xmluiStandaloneAsset = (release.assets || []).find((asset) =>
        XMLUI_STANDALONE_PATTERN.test(asset.name),
      );
      return xmluiStandaloneAsset.browser_download_url;
    }
    throw new Error("No matching standalone asset found in the latest releases");
  } catch (e) {
    console.error("Error fetching latest release", e);
    throw e;
  }
};

async function downloadFile(url) {
  try {
    const response = await axios.get(url, {
      responseType: "arraybuffer",
      maxRedirects: 5,
    });
    return response.data;
  } catch (error) {
    console.log(error.message);
  }
}

(async () => {
  try {
    const rootDir = path.resolve(__dirname, "..");
    const buildPublicDir = path.join(rootDir, "/public/resources/files/for-download/xmlui");
    const browser_download_url = await getLatestAssetUrl();

    if (!browser_download_url) {
      throw new Error("Missing browser_download_url");
    }

    const filename = "xmlui-standalone.umd.js";
    const outputPath = path.join(buildPublicDir, filename);

    const fileBuffer = await downloadFile(browser_download_url);

    await fs.mkdir(buildPublicDir, { recursive: true });
    await fs.writeFile(outputPath, fileBuffer);
  } catch (err) {
    console.error(err.message);
    process.exit(1);
  }
})();

```

--------------------------------------------------------------------------------
/docs/scripts/download-latest-xmlui.js:
--------------------------------------------------------------------------------

```javascript
#!/usr/bin/env node

const fs = require("fs").promises;
const path = require("path");
const axios = require("axios");
const { sortByVersion, XMLUI_STANDALONE_PATTERN } = require("./utils.js");

const getLatestAssetUrl = async () => {
  try {
    const per_page = 100;
    const max_releases = 100;

    const url = `https://api.github.com/repos/xmlui-org/xmlui/releases?per_page=${per_page}`;

    const res = await fetch(url);

    if (!res.ok) {
      throw new Error(`GitHub API error: ${res.status} ${res.statusText}`);
    }

    /** @type {Array<any>} */
    const releases = await res.json();

    const xmluiReleases = releases
      .filter((r) => r?.tag_name?.startsWith("xmlui@"))
      .sort(sortByVersion);

    const releasesToProcess = xmluiReleases.slice(0, max_releases);

    for (const release of releasesToProcess) {
      const xmluiStandaloneAsset = (release.assets || []).find((asset) =>
        XMLUI_STANDALONE_PATTERN.test(asset.name),
      );
      return xmluiStandaloneAsset.browser_download_url;
    }
    throw new Error("No matching standalone asset found in the latest releases");
  } catch (e) {
    console.error("Error fetching latest release", e);
    throw e;
  }
};

async function downloadFile(url) {
  try {
    const response = await axios.get(url, {
      responseType: "arraybuffer",
      maxRedirects: 5,
    });
    return response.data;
  } catch (error) {
    console.log(error.message);
  }
}

(async () => {
  try {
    const rootDir = path.resolve(__dirname, "..");
    const buildPublicDir = path.join(rootDir, "/public/resources/files/for-download/xmlui");
    const browser_download_url = await getLatestAssetUrl();

    if (!browser_download_url) {
      throw new Error("Missing browser_download_url");
    }

    const filename = "xmlui-standalone.umd.js";
    const outputPath = path.join(buildPublicDir, filename);

    const fileBuffer = await downloadFile(browser_download_url);

    await fs.mkdir(buildPublicDir, { recursive: true });
    await fs.writeFile(outputPath, fileBuffer);
  } catch (err) {
    console.error(err.message);
    process.exit(1);
  }
})();

```

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

```markdown
# Redirect [#redirect]

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

## Using `Redirect` [#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>
```

## Properties [#properties]

### `replace` (default: false) [#replace-default-false]

This boolean property indicates whether the redirect should replace the current history entry or create a new one.

### `to` (default: "") [#to-default-]

This property defines the URL to which this component is about to redirect requests.

## 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/scripts/generate-docs/build-downloads-map.mjs:
--------------------------------------------------------------------------------

```
import { writeFileSync, statSync } from "fs";
import { basename, extname } from "path";
import { gatherAndRemoveDuplicates, toNormalizedUpperCase, traverseDirectory } from "./utils.mjs";
import { createScopedLogger } from "./logging-standards.mjs";
import { DOWNLOADS_MAP_CONFIG } from "./constants.mjs";
import { 
  generateExportStatements, 
  processDuplicatesWithLogging 
} from "./pattern-utilities.mjs";

const baseUrlCutoff = DOWNLOADS_MAP_CONFIG.BASE_URL_CUTOFF;
const includedFileExtensions = DOWNLOADS_MAP_CONFIG.INCLUDED_FILE_EXTENSIONS;

/**
 * Creates a file containing download link constants for downloadable files.
 * @param {string} downloadsFolder The path to the downloads folder (use UNIX delimiters)
 * @param {string} outFilePathAndName The path and name of the output file (use UNIX delimiters)
 */
export function buildDownloadsMap(downloadsFolder, outFilePathAndName) {
  const logger = createScopedLogger("DownloadsMapBuilder");
  logger.operationStart("building downloads map");
  const downloads = [];
  traverseDirectory({ name: "", path: downloadsFolder }, (item, _) => {
    /**
     * name: the folder's/file's name (eg. "hello-app-engine")
     * path: the path to the root of the given folder from the project root (eg. "src/apps/1_basic/samples/hello-app-engine")
     * parent: parent node
     * children: children file/folder names
     */
    if (statSync(item.path).isDirectory()) {
      // Node is a folder
    } else {
      // Node is a file
      if (includedFileExtensions.includes(extname(item.name))) {
        const relativePath = item.path.split(baseUrlCutoff)[1];
        downloads.push({
          id: toNormalizedUpperCase(basename(relativePath, extname(relativePath))),
          path: relativePath,
        });
      }
    }
  });

  const { filtered, duplicates } = gatherAndRemoveDuplicates(downloads);
  
  // Process duplicates with standardized logging
  processDuplicatesWithLogging(duplicates, logger, "download IDs and paths");

  // Generate export statements using utility
  const outStr = generateExportStatements(filtered);

  writeFileSync(outFilePathAndName, outStr);
}

```

--------------------------------------------------------------------------------
/docs/public/pages/howto/share-a-modaldialog-across-components.md:
--------------------------------------------------------------------------------

```markdown
# Share a ModalDialog across components

```xmlui-pg
---app
<App>
  <Test />
</App>
---api
{
  "apiUrl": "/api",
  "initialize": "$state.items = [
    { id: 1, title: 'Mountain View' },
    { id: 2, title: 'City Lights' },
    { id: 3, title: 'Ocean Sunset' }
  ]",
  "operations": {
    "get-items": {
      "url": "/items",
      "method": "get",
      "handler": "return $state.items"
    }
  }
}
---comp display /settings/ /settingsDialog/ /appSettings/
<Component name="Test">

  <AppState id="settings" bucket="appSettings" initialValue="{{
    itemSize: 'medium',
    showDetails: true
  }}" />

  <!-- Settings modal defined at App level - accessible to all components -->
  <ModalDialog id="settingsDialog" title="Settings">
    <SettingsPanel />
  </ModalDialog>

  <DataSource id="items" url="/api/items" />

  <AppHeader title="Demo App">
    <property name="profileMenuTemplate">
      <Icon name="cog" onClick="settingsDialog.open()" />
    </property>
  </AppHeader>

  <VStack>
    <HStack>
      <Text>Items ({settings.value.itemSize} size)</Text>
      <Button
        label="Settings"
        size="sm"
        onClick="settingsDialog.open()"
      />
    </HStack>

    <List data="{items}">
      <Card>
        <VStack>
          <Text>{$item.title}</Text>
          <Fragment when="{settings.value.showDetails}">
            <Text variant="caption">ID: {$item.id}</Text>
          </Fragment>
        </VStack>
      </Card>
    </List>
  </VStack>

</Component>
---comp display /settings/ /settingsDialog/ /appSettings/
<Component name="SettingsPanel">
  <AppState id="settings" bucket="appSettings" />

  <VStack>

    <Select
      label="Item Size"
      initialValue="{settings.value.itemSize}"
      onDidChange="(value) => settings.update({ itemSize: value })"
    >
      <Option value="small" label="Small" />
      <Option value="medium" label="Medium" />
      <Option value="large" label="Large" />
    </Select>

    <Switch
      label="Show details"
      initialValue="{settings.value.showDetails}"
      onDidChange="(value) => settings.update({ showDetails: value })"
    />

  </VStack>
</Component>
```

```

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

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

const COMP = "Bookmark";

export const BookmarkMd = createMetadata({
  status: "stable",
  description:
    "As its name suggests, this component places a bookmark into its parent component's view. The " +
    "component has an \`id\` that you can use in links to navigate (scroll to) the bookmark's location.",
  opaque: true,
  props: {
    id: {
      description:
        "The unique identifier of the bookmark. You can use this identifier in links " +
        "to navigate to this component's location. If this identifier is not set, you cannot " +
        "programmatically visit this bookmark.",
      valueType: "string",
    },
    level: {
      description:
        "The level of the bookmark. The level is used to determine the bookmark's " +
        "position in the table of contents.",
      valueType: "number",
      defaultValue: defaultProps.level,
    },
    title: {
      description:
        "Defines the text to display the bookmark in the table of contents. If this property is " +
        "empty, the text falls back to the value of \`id\`.",
      valueType: "string",
    },
    omitFromToc: {
      description: "If true, this bookmark will be excluded from the table of contents.",
      valueType: "boolean",
      defaultValue: defaultProps.omitFromToc,
    },
  },
  apis: {
    scrollIntoView: {
      signature: "scrollIntoView()",
      description: "Scrolls the bookmark into view.",
    },
  },
});

export const bookmarkComponentRenderer = createComponentRenderer(
  COMP,
  BookmarkMd,
  (rendererContext) => {
    const { node, renderChild, extractValue, layoutContext } = rendererContext;

    return (
      <Bookmark
        uid={extractValue(node.uid)}
        level={extractValue(node.props.level)}
        title={extractValue(node.props.title)}
        omitFromToc={extractValue.asOptionalBoolean(node.props.omitFromToc)}
      >
        {renderChild(node.children, layoutContext)}
      </Bookmark>
    );
  },
);

```

--------------------------------------------------------------------------------
/xmlui/tests-e2e/api-call-as-extracted-component.spec.ts:
--------------------------------------------------------------------------------

```typescript
import { expect, test } from "../src/testing/fixtures";
import { initApp } from "../src/testing/themed-app-test-helpers";

test("api call as an extracted component get called", async ({ page }) => {
  await initApp(page, {
    entryPoint: `
    <Fragment>
        <APICall 
           id="apiCall"
           url="/postUrl"
           method="post"
           body="{$param}"
        />
        <Form onSubmit="(body)=>apiCall.execute(body)">
            <FormItem bindTo="name" testId="nameInput"/>
        </Form>
    </Fragment>
    `,
    apiInterceptor: {
      operations: {
        "postUrl": {
          url: "/postUrl",
          method: "post",
          handler: `()=>{
            return $requestBody;
          }`,
        }
      },
    },
  });


  const responsePromise = page.waitForResponse((response) => response.url().includes("/postUrl"));

  await page.getByTestId("nameInput").getByRole("textbox").fill("John");
  await page.locator("button[type='submit']").click();


  const response = await responsePromise;
  const responseBody = await response.json();
  expect(responseBody).toEqual({
    name: "John"
  });
});


test("api call as an extracted component get called (function reference + default body)", async ({ page }) => {
  await initApp(page, {
    entryPoint: `
    <Fragment>
        <APICall 
           id="apiCall"
           url="/postUrl"
           method="post"
        />
        <Form onSubmit="apiCall.execute">
            <FormItem bindTo="name" testId="nameInput"/>
        </Form>
    </Fragment>
    `,
    apiInterceptor: {
      operations: {
        "postUrl": {
          url: "/postUrl",
          method: "post",
          handler: `()=>{
            return $requestBody;
          }`,
        }
      },
    },
  });


  const responsePromise = page.waitForResponse((response) => response.url().includes("/postUrl"));

  await page.getByTestId("nameInput").getByRole("textbox").fill("John");
  await page.locator("button[type='submit']").click();

  const response = await responsePromise;
  const responseBody = await response.json();
  expect(responseBody).toEqual({
    name: "John"
  });
});

```

--------------------------------------------------------------------------------
/docs/public/pages/howto/control-cache-invalidation.md:
--------------------------------------------------------------------------------

```markdown
# Control cache invalidation

By default, when an `APICall` executes successfully, it invalidates ALL DataSource caches, causing them to refetch. Use the `invalidates` property to control this behavior for better performance.

```xmlui-pg name="Update user - refreshes user list"
---app display {16}
<App>
  <DataSource
    id="users"
    url="/api/users"
  />

  <DataSource
    id="stats"
    url="/api/stats"
  />

  <APICall
    id="updateUser"
    method="put"
    url="/api/users/{$param}"
    invalidates="{['/api/users']}"
    completedNotificationMessage="User updated!"
  />

  <VStack>
    <Text>Users (will refresh)</Text>

    <Items data="{users}">
      <Card>
        <HStack>
          <VStack>
            <Text>{$item.name}</Text>
            <Text>Role: {$item.role}</Text>
          </VStack>
          <Button
            onClick="updateUser.execute($item.id)"
            enabled="{$item.role !== 'admin'}">
            Promote to Admin
          </Button>
        </HStack>
      </Card>
    </Items>

    <Text>Stats (won't refresh)</Text>
    <Text>Total requests: {stats.value.totalRequests}</Text>
    <Text>Stats fetched: {stats.value.lastUpdate} time(s)</Text>
  </VStack>
</App>
---api
{
  "apiUrl": "/api",
  "initialize": "
    $state.users = [
      { id: '1', name: 'Alice', role: 'viewer' },
      { id: '2', name: 'Bob', role: 'viewer' }
    ];
    $state.stats = { totalRequests: 42, lastUpdate: 0 };
  ",
  "operations": {
    "get-users": {
      "url": "/users",
      "method": "get",
      "handler": "return [...$state.users]"
    },
    "get-stats": {
      "url": "/stats",
      "method": "get",
      "handler": "
        $state.stats.lastUpdate++;
        return { ...$state.stats };
      "
    },
    "update-user": {
      "url": "/users/:id",
      "method": "put",
      "pathParamTypes": { "id": "string" },
      "handler": "
        const user = $state.users.find(u => u.id === $pathParams.id);
        if (user) {
          user.role = 'admin';
        }
      "
    }
  }
}
```

When an API mutation doesn't affect other displayed data, use `invalidates="{[]}"` to prevent unnecessary refetches.


```

--------------------------------------------------------------------------------
/xmlui/src/components-core/reportEngineError.ts:
--------------------------------------------------------------------------------

```typescript
import { ScriptParseError, StatementExecutionError, ThrowStatementError } from "./EngineError";

type ErrorInfo = {
  error: Error;
  helperMessage?: string;
  colors?: string[];
};

const appErrors: ErrorInfo[] = [];

/**
 * Get all errors collected during the last run
 */
export function getAppErrors(): ErrorInfo[] {
  return appErrors;
}

/**
 * Use this function to reset the errors raised by the execution engine
 */
export function resetErrors(): void {
  appErrors.length = 0;
}

/**
 * Use this function to report an error
 * @param error Error or string describing the error to report
 * @param errorToThrow The error to throw
 */
export function reportEngineError(error: Error | string, errorToThrow?: any): void {
  // --- Wrap a string into an error
  if (typeof error === "string") {
    error = new Error(error);
  }

  let helperMessage = "";
  let colors: string[] = [];

  // --- Error-specific helper messages
  if (error instanceof ScriptParseError) {
    let pos = (error?.position ?? 0) - 1;
    if (error.source) {
      while (pos < error.source.length - 1 && error.source[pos] === " ") {
        pos++;
      }
      helperMessage += `%c${error.message}%c\n\n`;
      helperMessage += `${error.source.substring(0, pos)}%c${error.source[pos]}%c${
        error.source.substring(pos + 1) ?? ""
      }\n\n`;
    }
    helperMessage += `%cThe error handler associated with the parsed code did not run.%c`;
    colors = ["color: red", "color: inherited", "color: red", "color: inherited", "color: orange", "color: inherited"];
  } else if (error instanceof StatementExecutionError) {
    helperMessage += `%cError while executing code: ${error.message}%c`;
    if (error.source) {
      helperMessage += `\n\n${error.source}`;
    }
    colors = ["color: red", "color: inherited"];
  } else if (error instanceof ThrowStatementError) {
    helperMessage += `A 'throw' statement executed:\n\n%c${error.message}%c\n\n${error.errorObject}`;
    colors = ["color: red", "color: inherited"];
  }

  if (helperMessage) {
    console.log(helperMessage, ...colors);
  }
  appErrors.push({ error, helperMessage, colors });
  throw errorToThrow ?? error;
}

```

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

```markdown
%-DESC-START

**Key features:**
- **Value and label separation**: Define what gets stored (value) separately from what users see (label)
- **Automatic fallbacks**: Uses label as value or value as label when only one is provided
- **Custom templates**: Support for rich content via optionTemplate property or child components
- **State management**: Built-in enabled/disabled states for individual options
- **Data integration**: Works seamlessly with Items components for dynamic option lists

## Using `Option`

### With `AutoComplete`

```xmlui-pg copy {4-6} display name="Example: Option in a AutoComplete" height="275px"
<App>
  <Text value="Selected ID: {myComp.value}"/>
  <AutoComplete id="myComp">
    <Option label="John, Smith" value="john" />
    <Option label="Jane, Clint" value="jane" disabled="true" />
    <Option label="Herbert, Frank" value="herbert" />
  </AutoComplete>
</App>
```

### With `Select`

```xmlui-pg copy {4-6} display name="Example: Option in a Select" height="275px"
<App>
  <Text value="Selected ID: {mySelect.value}"/>
  <Select id="mySelect">
    <Option label="John, Smith" value="john" />
    <Option label="Jane, Clint" value="jane" />
    <Option label="Herbert, Frank" value="herbert" />
  </Select>
</App>
```

%-DESC-END

%-PROP-START label

>[!INFO]
> If `Option` does not define any of the `label` or `value` properties, the option will not be rendered.

```xmlui-pg copy display name="Example: Using label" height="275px"
<App>
  <Text value="Selected ID: {mySelect.value}"/>
  <Select id="mySelect">
    <Option />
    <Option label="Vanilla" value="van"/>
    <Option label="Chocolate" value="choc" />
    <Option value="pist" />
  </Select>
</App>
```

%-PROP-END

%-PROP-START value

>[!INFO]
> If `Option` does not define any of the `label` or `value` properties, the option will not be rendered.

```xmlui-pg copy display name="Example: Using value" height="275px"
<App>
  <Text value="Selected ID: {mySelect.value}"/>
  <Select id="mySelect">
    <Option />
    <Option label="Vanilla" />
    <Option label="Chocolate" value="chocolate" />
    <Option label="Pistachio" value="pistachio" />
  </Select>
</App>
```

%-PROP-END

```

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

```markdown
# BarChart [#barchart]

>[!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 `BarChart` component represents a bar chart.Accepts a `LabelLst` component as a child to parametrize display labels.

## Properties

### `data`

This property is used to provide the component with data to display.The data needs to be an array of objects.

### `dataKeys`

This property specifies the keys in the data objects that should be used for rendering the bars.E.g. 'id' or 'key'.

### `hideTickX (default: false)`

Controls the visibility of the X-axis ticks. If set to `true`, tick labels on the X-axis will be hidden.

### `hideTickY (default: false)`

Controls the visibility of the Y-axis ticks. If set to `true`, tick labels on the Y-axis will be hidden.

### `hideX (default: false)`

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

### `hideY (default: false)`

Determines whether the Y-axis should be hidden. If set to `true`, the axis will not be rendered.

### `layout (default: "vertical")`

This property determines the orientation of the bar chart. The `vertical` variant specifies the horizontal axis as the primary and lays out the bars from left to right. The `horizontal` variant specifies the vertical axis as the primary and has the bars spread from top to bottom.

Available values: `horizontal`, `vertical` **(default)**

### `nameKey`

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

### `showLegend (default: false)`

Determines whether the legend should be displayed.

### `stacked (default: false)`

This property determines how the bars are laid out.If set to `true`, bars with the same category will be stacked on top of each other rather than placed side by side.

### `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/content/components/Logo.md:
--------------------------------------------------------------------------------

```markdown
# Logo [#logo]

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

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 [#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:
```

## Properties [#properties]

### `alt` (default: "Logo") [#alt-default-logo]

Alternative text for the logo image for accessibility.

### `inline` (default: false) [#inline-default-false]

When set to true, the image will be displayed as an inline element instead of a block element.

## 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/NestedApp/logo.svg:
--------------------------------------------------------------------------------

```
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M9.04674 19.3954C8.2739 19.3954 7.60226 19.2265 7.03199 18.8887C6.47443 18.5384 6.0435 18.0505 5.73938 17.425C5.43526 16.7869 5.2832 16.0362 5.2832 15.173V9.89961C5.2832 9.7745 5.32771 9.66815 5.41637 9.58059C5.50502 9.493 5.61275 9.44922 5.73938 9.44922H7.41222C7.55157 9.44922 7.6593 9.493 7.73524 9.58059C7.8239 9.66815 7.86841 9.7745 7.86841 9.89961V15.0604C7.86841 16.6117 8.55895 17.3874 9.94021 17.3874C10.5991 17.3874 11.1187 17.181 11.4988 16.7681C11.8917 16.3553 12.0881 15.786 12.0881 15.0604V9.89961C12.0881 9.7745 12.1325 9.66815 12.2211 9.58059C12.3098 9.493 12.4175 9.44922 12.5443 9.44922H14.217C14.3436 9.44922 14.4513 9.493 14.54 9.58059C14.6288 9.66815 14.6732 9.7745 14.6732 9.89961V18.7574C14.6732 18.8825 14.6288 18.9888 14.54 19.0764C14.4513 19.164 14.3436 19.2078 14.217 19.2078H12.6773C12.538 19.2078 12.4239 19.164 12.3352 19.0764C12.2591 18.9888 12.2211 18.8825 12.2211 18.7574V17.988C11.879 18.4258 11.4545 18.7699 10.9476 19.0201C10.4407 19.2703 9.80704 19.3954 9.04674 19.3954Z" fill="#3367CC"/>
    <path d="M17.6397 19.2104C17.5129 19.2104 17.4052 19.1666 17.3165 19.079C17.2279 18.9914 17.1835 18.8851 17.1835 18.76V9.90221C17.1835 9.7771 17.2279 9.67075 17.3165 9.58319C17.4052 9.4956 17.5129 9.45182 17.6397 9.45182H19.2174C19.3567 9.45182 19.4644 9.4956 19.5404 9.58319C19.6292 9.67075 19.6736 9.7771 19.6736 9.90221V18.76C19.6736 18.8851 19.6292 18.9914 19.5404 19.079C19.4644 19.1666 19.3567 19.2104 19.2174 19.2104H17.6397ZM17.5636 7.8379C17.4243 7.8379 17.3102 7.80038 17.2215 7.72531C17.1454 7.63773 17.1074 7.52514 17.1074 7.38751V6.03633C17.1074 5.91122 17.1454 5.80487 17.2215 5.71731C17.3102 5.62972 17.4243 5.58594 17.5636 5.58594H19.2933C19.4327 5.58594 19.5467 5.62972 19.6354 5.71731C19.7242 5.80487 19.7686 5.91122 19.7686 6.03633V7.38751C19.7686 7.52514 19.7242 7.63773 19.6354 7.72531C19.5467 7.80038 19.4327 7.8379 19.2933 7.8379H17.5636Z" fill="#3367CC"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M23.0215 2.81748H2.53486V23.044H23.0215V2.81748ZM2.18164 2.46875V23.3927H23.3747V2.46875H2.18164Z" fill="#3367CC"/>
</svg>

```

--------------------------------------------------------------------------------
/tools/create-app/templates/index.ts:
--------------------------------------------------------------------------------

```typescript
import { install } from "../helpers/install";
import { copy } from "../helpers/copy";
import os from "os";
import fs from "fs/promises";
import path from "path";
import { bold, cyan } from "picocolors";
import pkg from '../package.json'

import type { InstallTemplateArgs } from "./types";

/**
 * Install a UI Engine internal template to a given `root` directory.
 */
export const installTemplate = async ({ appName, root, packageManager, template, useGit }: InstallTemplateArgs) => {
  console.log(bold(`Using ${packageManager}.`));

  /**
   * Copy the template files to the target directory.
   */
  console.log("\nInitializing project with template:", template, "\n");
  const templatePath = path.join(__dirname, template, "ts");
  const copySource = ["**"];

  if (!useGit) {
    copySource.push("!gitignore");
  }
  await copy(copySource, root, {
    parents: true,
    cwd: templatePath,
    rename(name) {
      switch (name) {
        case "gitignore":
        case "eslintrc.json": {
          return `.${name}`;
        }
        // README.md is ignored by webpack-asset-relocator-loader used by ncc:
        // https://github.com/vercel/webpack-asset-relocator-loader/blob/e9308683d47ff507253e37c9bcbb99474603192b/src/asset-relocator.js#L227
        case "README-template.md": {
          return "README.md";
        }
        default: {
          return name;
        }
      }
    },
  });

  /** Create a package.json for the new project and write it to disk. */
  const packageJson: any = {
    name: appName,
    version: "0.1.0",
    private: true,
    scripts: {
      start: "xmlui start",
      build: "xmlui build",
      preview: "xmlui preview",
      "build-prod": "npm run build -- --prod",
      "release-ci": "npm run build-prod && xmlui zip-dist",
    },
    /**
     * Default dependencies.
     */
    dependencies: {
      "xmlui": pkg.version,
    },
  };

  await fs.writeFile(path.join(root, "package.json"), JSON.stringify(packageJson, null, 2) + os.EOL);

  console.log("\nInstalling dependencies:");
  for (const dependency in packageJson.dependencies) console.log(`- ${cyan(dependency)}`);

  console.log();

  await install(packageManager);
};

export * from "./types";

```

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

```typescript
import { beforeEach, describe, expect, it } from "vitest";
import { LRUCache } from "../../../src/components-core/utils/LruCache";

describe("LRUCache", () => {
  let lru: LRUCache;
  beforeEach(() => {
    lru = new LRUCache(5);
  });

  it.skip("puts most recently added item to front of list", () => {
    // note: can't test using lru.get() as that will mess up ordering
    //       reach into the internals directly instead
    lru.set("nick", "nick val 1");
    expect(lru!.list!.head!.value).to.equal("nick val 1");
    lru.set("char", "char val 1");
    expect(lru.list!.head!.value).to.equal("char val 1");
    lru.set("nick", "nick val 2");
    expect(lru.list!.head!.value).to.equal("nick val 2");
  });

  it("puts most recently accessed item to front of list", () => {
    // note: can't test using lru.get() as that will mess up ordering
    //       reach into the internals directly instead
    lru.set("nick", "nick val 1");
    lru.set("char", "char val 1");
    lru.set("brow", "brow val 1");
    lru.set("lane", "lane val 1");
    lru.get("nick");
    expect(lru.list!.head!.value).to.equal("nick val 1");
    lru.get("char");
    expect(lru.list!.head!.value).to.equal("char val 1");
    lru.get("lane");
    expect(lru.list!.head!.value).to.equal("lane val 1");
    lru.get("brow");
    expect(lru.list!.head!.value).to.equal("brow val 1");
    lru.get("brow");
    expect(lru.list!.head!.value).to.equal("brow val 1");
  });

  it.skip("keeps track of size correctly", () => {
    lru.set("nick", "nick val 1");
    expect(lru.list.size).to.equal(1);
    lru.set("char", "char val 1");
    expect(lru.list.size).to.equal(2);
    lru.set("char", "char val 2");
    expect(lru.list.size).to.equal(2);

    lru.set("bowie", "bowie val 1");
    lru.set("david", "david val 1");
    lru.set("dobrick", "dobrick val 1");
    expect(lru.list.size).to.equal(5);
  });

  it("evicts the last item in list when max size is reached", () => {
    lru.set("nick", 1);
    lru.set("bob", 2);
    lru.set("dylan", 3);
    lru.set("jonny", 4);
    lru.set("depth", 5);
    lru.set("shtick", 6);
    expect(lru.get("nick")).to.equal(undefined);
    expect(lru.get("bob")).not.to.equal(undefined);
  });
});

```

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

```typescript
import { createComponentRenderer } from "../../components-core/renderers";
import { TabItemComponent } from "./TabItemNative";
import { createMetadata, d, dComponent, dLabel } from "../metadata-helpers";
import { MemoizedItem } from "../container-helpers";

const COMP = "TabItem";

export const TabItemMd = createMetadata({
  status: "stable",
  description:
    "`TabItem` defines individual tabs within a [Tabs](/components/Tabs) component, " +
    "providing both the tab header label and the content that displays when the tab " +
    "is selected. As a non-visual structural component, it serves as a container that " +
    "organizes content into distinct, switchable sections.",
  docFolder: "Tabs",
  props: {
    label: dLabel(),
    headerTemplate: dComponent("This property allows the customization of the TabItem header."),
  },
  events: {
    activated: {
      description: "This event is triggered when the tab is activated.",
    },
  },
  contextVars: {
    $header: d(
      "This context value represents the header context with props: id (optional), index, label, isActive.",
    ),
  },
});

export const tabItemComponentRenderer = createComponentRenderer(
  COMP,
  TabItemMd,
  (rendererContext) => {
    const { node, renderChild, extractValue, lookupEventHandler } = rendererContext;
    return (
      <TabItemComponent
        id={extractValue(node.uid)}
        label={extractValue(node.props.label)}
        activated={lookupEventHandler("activated")}
        headerRenderer={
          node.props.headerTemplate
            ? (item) => {
                return (
                  <MemoizedItem
                    node={node.props.headerTemplate}
                    itemKey="$header"
                    contextVars={{
                      $header: {
                        id: item.id,
                        index: item.index,
                        label: item.label,
                        isActive: item.isActive,
                      },
                    }}
                    renderChild={renderChild}
                  />
                );
              }
            : undefined
        }
      >
        {renderChild(node.children)}
      </TabItemComponent>
    );
  },
);

```

--------------------------------------------------------------------------------
/xmlui/src/parsers/scripting/ParserError.ts:
--------------------------------------------------------------------------------

```typescript
// The common root class of all parser error objects
export class ParserError extends Error {
  constructor(message: string, public code?: string) {
    super(message);

    // --- Set the prototype explicitly.
    Object.setPrototypeOf(this, ParserError.prototype);
  }
}

// Describes the structure of error messages
export interface ParserErrorMessage {
  code: ErrorCodes;
  text: string;
  position?: number;
  line?: number;
  column?: number;
}

export type ErrorCodes =
  | "W001"
  | "W002"
  | "W003"
  | "W004"
  | "W005"
  | "W006"
  | "W007"
  | "W008"
  | "W009"
  | "W010"
  | "W011"
  | "W012"
  | "W013"
  | "W014"
  | "W015"
  | "W016"
  | "W017"
  | "W018"
  | "W019"
  | "W020"
  | "W021"
  | "W022"
  | "W023"
  | "W024"
  | "W025"
  | "W026"
  | "W027"
  | "W028"
  | "W029"
  | "W030"
  | "W031";

// Error message type description
type ErrorText = Record<string, string>;

// The error messages of error codes
export const errorMessages: ErrorText = {
  W001: "An expression expected",
  W002: "Unexpected token: {0}",
  W003: "An identifier expected",
  W004: "'}' expected",
  W005: "']' expected",
  W006: "')' expected",
  W007: "Invalid object property name type",
  W008: "':' expected",
  W009: "'=' expected",
  W010: "Invalid argument list",
  W011: "For loop variable must be initialized",
  W012: "'{' expected",
  W013: "'catch' or 'finally' expected",
  W014: "'(' or expected",
  W015: "'case' or 'default' expected",
  W016: "'default' case can be used only once within a switch statement",
  W017: "Invalid sequence expression",
  W018: "Invalid object literal",
  W019: "Identifier '{0}' is already imported",
  W020: "Function '{0}' is already defined in the module",
  W021: "'{0}' is already exported from the module",
  W022: "Cannot find module '{0}'",
  W023: "Module '{0}' does not export '{1}'",
  W024: "'function' expected",
  W025: "'from' expected",
  W026: "A string literal expected",
  W027: "Cannot declare var ('{0}') in an imported module",
  W028: "Invalid statement used in a module.",
  W029: "An imported module can contain only exported functions",
  W030: "Nested declarations cannot be exported",
  W031: "An identifier in a declaration cannot start with '$'"
};

```

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

```markdown
# Timer [#timer]

`Timer` is a non-visual component that fires events at regular intervals. It can be enabled or disabled and ensures that the timer event handler completes before firing the next event.

## Using Timer [#using-timer]

The following sample demonstrates many aspects of the `Timer` component. Use the switches and the buttons to observe how the component works.

```xmlui-pg display copy name="Using Timer"
<App var.count="{0}">
  <Text>
    Count: {count} | Timer is {timer.isPaused() ? 'paused' : 'running'}
  </Text>
  <Timer
    id="timer"
    initialDelay="2000"
    interval="200"
    onTick="count++;"
    enabled="{enable.value}"
    once="{once.value}" />
  <Switch id="enable" label="Enable Timer" initialValue="true" />
  <Switch id="once" label="Run Once" initialValue="{false}" />
  <HStack>
    <Button onClick="timer.pause()" enabled="{!timer.isPaused()}">
      Pause
    </Button>
    <Button onClick="timer.resume()" enabled="{timer.isPaused()}">
      Resume
    </Button>
  </HStack>
</App>
```

## Properties [#properties]

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

Whether the timer is enabled and should fire events.

### `initialDelay` (default: 0) [#initialdelay-default-0]

The delay in milliseconds before the first timer event.

### `interval` (default: 1000) [#interval-default-1000]

The interval in milliseconds between timer events.

### `once` (default: false) [#once-default-false]

Whether the timer should stop after firing its first tick event.

## Events [#events]

### `tick` [#tick]

This event is triggered at each interval when the ${COMP} is enabled.

## Exposed Methods [#exposed-methods]

### `isPaused` [#ispaused]

Returns whether the timer is currently paused.

**Signature**: `isPaused(): boolean`

### `isRunning` [#isrunning]

Returns whether the timer is currently running (enabled and not paused).

**Signature**: `isRunning(): boolean`

### `pause` [#pause]

Pauses the timer. The timer can be resumed later from where it left off.

**Signature**: `pause()`

### `resume` [#resume]

Resumes a paused timer. If the timer is not paused, this method has no effect.

**Signature**: `resume()`

## Styling [#styling]

This component does not have any styles.

```

--------------------------------------------------------------------------------
/packages/xmlui-website-blocks/src/ScrollToTop/ScrollToTop.module.scss:
--------------------------------------------------------------------------------

```scss
@use "xmlui/themes.scss" as t;

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

$component: "ScrollToTop";
$backgroundColor-ScrollToTop: createThemeVar("backgroundColor-#{$component}");
$borderColor-ScrollToTop: createThemeVar("borderColor-#{$component}");
$color-ScrollToTop: createThemeVar("color-#{$component}");
$size-ScrollToTop: createThemeVar("size-#{$component}");
$borderRadius-ScrollToTop: createThemeVar("borderRadius-#{$component}");
$shadow-ScrollToTop: createThemeVar("shadow-#{$component}");
$bottom-ScrollToTop: createThemeVar("bottom-#{$component}");
$horizontalSpacing-ScrollToTop: createThemeVar("horizontalSpacing-#{$component}");
$zIndex-ScrollToTop: createThemeVar("zIndex-#{$component}");

@layer components {
  .scrollToTop {
    position: fixed;
    bottom: $bottom-ScrollToTop;
    width: $size-ScrollToTop;
    height: $size-ScrollToTop;
    background-color: $backgroundColor-ScrollToTop;
    border: 1px solid $borderColor-ScrollToTop;
    border-radius: $borderRadius-ScrollToTop;
    box-shadow: $shadow-ScrollToTop;
    cursor: pointer;
    z-index: $zIndex-ScrollToTop;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: $color-ScrollToTop;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    }

    &:active {
      transform: translateY(0);
    }

    &:focus {
      outline: 2px solid $backgroundColor-ScrollToTop;
      outline-offset: 2px;
    }

    &.positionStart {
      left: $horizontalSpacing-ScrollToTop;
    }

    &.positionCenter {
      left: 50%;
      transform: translateX(-50%);

      &:hover {
        transform: translateX(-50%) translateY(-2px);
      }

      &:active {
        transform: translateX(-50%) translateY(0);
      }
    }

    &.positionEnd {
      right: $horizontalSpacing-ScrollToTop;
    }
  }
}

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

```

--------------------------------------------------------------------------------
/xmlui/src/components/Markdown/parse-binding-expr.ts:
--------------------------------------------------------------------------------

```typescript
import type { ValueExtractor } from "../../abstractions/RendererDefs";
import { T_ARROW_EXPRESSION } from "../../components-core/script-runner/ScriptingSourceTree";

/**
 * Finds and evaluates given binding expressions in markdown text.
 * The binding expressions are of the form `@{...}`.
 * @param text The markdown text
 * @param extractValue The function to resolve binding expressions
 * @returns the parsed text with resolved binding expressions
 */
export function parseBindingExpression(text: string, extractValue: ValueExtractor) {
  // Remove empty @{} expressions first
  text = text.replaceAll(/(?<!\\)\@\{\s*\}/g, "");
  // The (?<!\\) is a "negative lookbehind" in regex that ensures that
  // if escaping the @{...} expression like this: \@{...}, we don't match it
  const regex = /(?<!\\)\@\{((?:[^{}]|\{(?:[^{}]|\{(?:[^{}]|\{[^{}]*\})*\})*\})*)\}/g;
  const result = text.replace(regex, (_, expr) => {
    const extracted = extractValue(`{${expr}}`);
    const resultExpr = mapByType(extracted);
    // The result expression might be an object, in that case we stringify it here,
    // at the last step, so that there are no unnecessary apostrophes
    return typeof resultExpr === "object" && resultExpr !== null
      ? JSON.stringify(resultExpr)
      : resultExpr;
  });
  return result;

  // ---

  function mapByType(extracted: unknown) {
    if (extracted === null) {
      return null;
    } else if (extracted === undefined || typeof extracted === "undefined") {
      return undefined;
    } else if (typeof extracted === "object") {
      const arrowFuncResult = parseArrowFunc(extracted as Record<string, unknown>);
      if (arrowFuncResult) {
        return arrowFuncResult;
      }
      if (Array.isArray(extracted)) {
        return extracted;
      }
      return Object.fromEntries(
        Object.entries(extracted).map(([key, value]) => {
          return [key, mapByType(value)];
        }),
      );
    } else {
      return extracted;
    }
  }

  function parseArrowFunc(extracted: Record<string, unknown>): string {
    if (
      extracted.hasOwnProperty("type") &&
      extracted.type === T_ARROW_EXPRESSION &&
      extracted?._ARROW_EXPR_
    ) {
      return "[xmlui function]";
    }
    return "";
  }
}

```

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

```markdown
%-DESC-START

> [!INFO]
> Pop out the examples in this article to view them on full screen.

## Using Bookmark

Use `Bookmark` as a standalone tag or wrap children with it.

> [!INFO]
> We suggest using a standalone bookmark, which does not increase the nesting depth of the source code, whenever possible. Note that a standalone bookmark will act as an additional child for its parent component, which can affect the layout (a `Stack` puts `gap`s between `Bookmark`s too).

### Standalone

Add an `id` property to `Bookmark` instances and use the same identifiers in links with hash tags, as the following example shows:

```xmlui-pg copy display height="320px" name="Example: standalone Bookmark"
---app display copy
<App layout="vertical-full-header" scrollWholePage="false">
  <NavPanel>
    <Link to="/#red">Jump to red</Link>
    <Link to="/#green">Jump to green</Link>
    <Link to="/#blue">Jump to blue</Link>
  </NavPanel>
  <Pages>
    <Page url="/">
      <Bookmark id="red">
        <VStack height="200px" backgroundColor="red" />
      </Bookmark>
      <Bookmark id="green">
        <VStack height="200px" backgroundColor="green" />
      </Bookmark>
      <Bookmark id="blue">
        <VStack height="200px" backgroundColor="blue" />
      </Bookmark>
    </Page>
  </Pages>
</App>
---desc
Clicking a link scrolls the bookmarked component adjacent to the corresponding `Bookmark` tag into the view:
```

### With nested children

Alternatively, you can nest components into `Bookmark`:

```xmlui-pg copy display height="320px" name="Example: Bookmark with nested children"
---app display copy
<App layout="vertical-full-header" scrollWholePage="false">
  <NavPanel>
    <Link to="/#red">Jump to red</Link>
    <Link to="/#green">Jump to green</Link>
    <Link to="/#blue">Jump to blue</Link>
  </NavPanel>
  <Pages>
    <Page url="/">
      <Bookmark id="red">
        <VStack height="200px" backgroundColor="red" />
      </Bookmark>
      <Bookmark id="green">
        <VStack height="200px" backgroundColor="green" />
      </Bookmark>
      <Bookmark id="blue">
        <VStack height="200px" backgroundColor="blue" />
      </Bookmark>
    </Page>
  </Pages>
</App>
---desc
You can try; this example works like the previous one:
```

%-DESC-END

```

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

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

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

$component: "TreeDisplay";
$fontSize-TreeDisplay: createThemeVar("fontSize-#{$component}");
$themeVars: t.composeBorderVars($themeVars, $component);

// Variables for @layer section
$backgroundColor-TreeDisplay: createThemeVar("backgroundColor-#{$component}");
$padding-TreeDisplay: createThemeVar("padding-#{$component}");
$paddingLeft-TreeDisplay: createThemeVar("paddingLeft-#{$component}");
$fontFamily-TreeDisplay: createThemeVar("fontFamily-#{$component}");
$color-TreeDisplay: createThemeVar("color-#{$component}");
$color-connect-TreeDisplay: createThemeVar("color-connect-#{$component}");

@layer components {
  .treeDisplay {
    display: block;
    @include t.borderVars($themeVars, $component);
    background-color: $backgroundColor-TreeDisplay;
    padding: $padding-TreeDisplay;
    padding-left: $paddingLeft-TreeDisplay;
  }

  .content {
    display: block;
    word-break: break-word;
    font-family: $fontFamily-TreeDisplay;
    font-size: $fontSize-TreeDisplay;
    color: $color-TreeDisplay;
  }

  .treeNode {
    position: relative;
    padding: 0;
    margin: 0;
  }

  .treeNodeRow {
    display: flex;
    align-items: center;
    position: relative;
    margin: 0;
  }

  .connectorArea {
    position: relative;
    flex-shrink: 0;
  }

  .connector {
    position: absolute;
    top: 0;
    left: 0;
  }

  .connectorLine {
    stroke: $color-connect-TreeDisplay;
    fill: none;
  }

  .ancestorLine {
    position: absolute;
    top: 0;
    width: 1.5px;
    height: 100%;
    background-color: $color-connect-TreeDisplay;
    z-index: 1;
    pointer-events: none;
  }

  .treeNodeContent {
    padding: 0 4px;
    display: inline-block;
    position: relative;
    z-index: 2;
  }

  .childrenContainer {
    position: relative;
    margin: 0;
    padding: 0;
  }
}

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

```

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

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

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

const COMP = "TreeDisplay";

export const TreeDisplayMd = createMetadata({
  status: "stable",
  description:
    `The \`${COMP}\` component displays hierarchical data in a tree structure. ` +
    `It accepts an indented text format where each line is an entry in the tree, and ` +
    `the number of leading spaces determines the nesting level. The component renders ` +
    `the tree with SVG lines and continuous vertical guides to clearly visualize parent-child relationships in the hierarchy.`,
  props: {
    content: {
      description: "The indented text content to display as a tree structure. Each level of indentation (using spaces) represents one level in the tree hierarchy.",
      valueType: "string",
      defaultValue: defaultProps.content,
    },
    itemHeight: {
      description: "The height of each tree item in pixels.",
      valueType: "number",
      defaultValue: defaultProps.itemHeight,
    },
  },
  themeVars: parseScssVar(styles.themeVars),
  defaultThemeVars: {
    [`backgroundColor-${COMP}`]: "$backgroundColor-CodeBlock",
    [`borderRadius-${COMP}`]: "8px",
    [`padding-${COMP}`]: "$space-4",
    [`paddingLeft-${COMP}`]: "$space-2",
    [`fontSize-${COMP}`]: "$fontSize-code",
    [`fontWeight-${COMP}`]: "$fontWeight-normal",
    [`fontFamily-${COMP}`]: "$fontFamily-monospace",
    [`color-${COMP}`]: "$textColor-primary",
    [`color-connect-${COMP}`]: "$color-surface-200",
    [`boxShadow-${COMP}`]: "none",
    [`border-${COMP}`]: "0.5px solid $borderColor",
  },
});

export const treeDisplayComponentRenderer = createComponentRenderer(
  COMP,
  TreeDisplayMd,
  ({ node, extractValue, renderChild, className }) => {
    return (
      <TreeDisplay
        className={className}
        content={extractValue.asOptionalString(node.props.content)}
        itemHeight={extractValue.asOptionalNumber(node.props.itemHeight)}
      >
        {renderChild(node.children)}
      </TreeDisplay>
    );
  },
);

```

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

```typescript
import { describe, it } from "vitest";
import { Parser } from "../../../src/parsers/scripting/Parser";

describe("Parser - error cases", () => {
  const issueCases = [
    { src: "2+3:", issue: "eof" },
    { src: "a ??", issue: "W001" },
    { src: "(a+b) ||", issue: "W001" },
    { src: "!a &&", issue: "W001" },
    { src: "(a+b) |", issue: "W001" },
    { src: "!a &", issue: "W001" },
    { src: "(a+b) ^", issue: "W001" },
    { src: "!a ==", issue: "W001" },
    { src: "(a+b) !=", issue: "W001" },
    { src: "(a+b) <", issue: "W001" },
    { src: "(a+b) <=", issue: "W001" },
    { src: "(a+b) >", issue: "W001" },
    { src: "(a+b) >=", issue: "W001" },
    { src: "(a+b) >>", issue: "W001" },
    { src: "(a+b) <<", issue: "W001" },
    { src: "(a+b) >>>", issue: "W001" },
    { src: "(a+b) +", issue: "W001" },
    { src: "(a+b) -", issue: "W001" },
    { src: "(a+b) *", issue: "W001" },
    { src: "(a+b) /", issue: "W001" },
    { src: "(a+b) %", issue: "W001" },
    { src: "func(", issue: "W001" },
    { src: "obj.", issue: "W001" },
    { src: "obj[", issue: "W001" },

    { src: "dummy.", issue: "W003" },

    { src: "{", issue: "W004" },
    { src: "{ abc: 123,", issue: "W004" },
    { src: "{ abc: 123", issue: "W004" },

    { src: "obj[abc", issue: "W005" },

    { src: "func(", issue: "W006" },
    { src: "func(123", issue: "W006" },
    { src: "func(123,", issue: "W006" },
    { src: "func(123, abs", issue: "W006" },

    { src: "{ true: 123 }", issue: "W007" },
    { src: "{ [a: 123 }", issue: "W005" },
    { src: "{ {a: 12}: 123 }", issue: "W007" },
    { src: "{ null: 123 }", issue: "W007" },
    { src: "{ a+b: 123 }", issue: "W007" },

    { src: "{ abc", issue: "W008" },
    { src: "{ abc 123", issue: "W008" },
  ];
  issueCases.forEach((c) => {
    it(`Issue: ${c.src}/${c.issue}`, () => {
      // --- Arrange
      const wParser = new Parser(c.src);

      // --- Act
      try {
        wParser.parseExpr();
        if (wParser.isEof) {
          if (c.issue === "eof") {
            return;
          }
        } else {
          if (c.issue === "eof") {
            throw new Error("EOF issue expected");
          }
        }
      } catch (err) {
        return;
      }
      throw new Error("Error expected");
    });
  });
});

```

--------------------------------------------------------------------------------
/xmlui/src/components/DropdownMenu/MenuItem.md:
--------------------------------------------------------------------------------

```markdown
%-DESC-START

**Key features:**
- **Action handling**: Support both navigation (`to` property) and custom click handlers
- **Visual feedback**: Built-in active, hover, and disabled states for clear user interaction
- **Icon support**: Optional icons with flexible positioning (start or end)
- **Menu integration**: Designed to work seamlessly within `DropdownMenu` and `SubMenuItem` hierarchies

**Usage pattern:**
Always used within menu containers like `DropdownMenu`. Use `to` for navigation or `onClick` for custom actions. For complex menu structures, combine with `MenuSeparator` and `SubMenuItem` components.

%-DESC-END

%-PROP-START icon

```xmlui-pg copy display name="Example: icon" height="200px"
<App>
  <DropdownMenu label="DropdownMenu">
    <MenuItem icon="drive">Item 1</MenuItem>
    <MenuItem icon="trash">Item 2</MenuItem>
    <MenuItem icon="email">Item 3</MenuItem>
  </DropdownMenu>
</App>
```

%-PROP-END

%-PROP-START iconPosition

```xmlui-pg copy display name="Example: iconPosition" height="200px"
<App>
  <DropdownMenu label="DropdownMenu">
    <MenuItem icon="drive" iconPosition="start">Item 1</MenuItem>
    <MenuItem icon="trash" iconPosition="end">Item 2</MenuItem>
    <MenuItem icon="email">Item 3</MenuItem>
  </DropdownMenu>
</App>
```

%-PROP-END

%-PROP-START active

```xmlui-pg copy display name="Example: active" height="200px"
<App>
  <DropdownMenu label="DropdownMenu">
    <MenuItem icon="drive" active="true">Item 1</MenuItem>
    <MenuItem icon="trash">Item 2</MenuItem>
    <MenuItem icon="email">Item 3</MenuItem>
  </DropdownMenu>
</App>
```

%-PROP-END

%-EVENT-START click

This event is fired when the user clicks the menu item. With an event handler, you can define how to respond to the user's click. If this event does not have an associated event handler but the `to` property has a value, clicking the component navigates the URL set in `to`.

If both properties are defined, `click` takes precedence.

```xmlui-pg copy display name="Example: click" height="200px"
<DropdownMenu label="DropdownMenu">
  <MenuItem onClick="toast('Item 1 clicked')">Item 1</MenuItem>
  <MenuItem onClick="toast('Item 2 clicked')">Item 2</MenuItem>
  <MenuItem onClick="toast('Item 3 clicked')">Item 3</MenuItem>
</DropdownMenu>
```

%-EVENT-END

```

--------------------------------------------------------------------------------
/packages/xmlui-os-frames/src/WindowsAppFrame.module.scss:
--------------------------------------------------------------------------------

```scss
@use "xmlui/themes.scss" 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-content-WindowsAppFrame: createThemeVar("backgroundColor-content-WindowsAppFrame");

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 28px;
}

.topInfo {
  display: flex;
  flex-grow: 1;
  align-items: center;
}

.uicon {
  height: 100%;
  display: flex;
  align-items: center;
}

.appFullName {
  font-size: 0.75rem;
}

.actbtns {
  display: flex;
  align-items: center;

  height: 100%;

  .uicon {
    height: 100%;
    padding: 0 18px;
    transition: all ease-in-out 60ms;

    img {
      transition: all ease-in-out 60ms;
    }

    &:hover {
      background: rgba(136, 136, 136, 0.2);
    }

    &.closeBtn:hover {
      background: rgba(255, 0, 0, 0.8);
      img {
        filter: invert(1);
      }
    }
  }
}

.prtclk {
  cursor: pointer;
}


.closeBtn {
  cursor: pointer;
  margin-right: 0;
}

.notepad {
  resize: both;
  overflow: auto;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
  border-radius: 0.375rem;
  width: 55rem;
  height: 32rem;
  min-width: 400px;
  min-height: 300px;

  .windowScreen {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }

  .topBar {
    display: flex;
    font-size: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .topBarItem {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }

  .topBarItem + .topBarItem {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .restWindow {
    min-height: 0;
    flex-grow: 1;
    background-color: $backgroundColor-content-WindowsAppFrame;
    overflow: auto;
  }

  .noteText {
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: #c0c0c0 #f9f9f9;
    padding: t.$space-4;
    gap: t.$space-4;
    display: flex;
    flex-direction: column;
  }
}


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

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

```typescript
// Represents a generic token
export type Token = {
  // The raw text of the token
  readonly text: string;

  // The type of the token
  readonly type: TokenType;

  // The location of the token
  readonly location: TokenLocation;
};

// Represents the location of a token
export interface TokenLocation {
  // Start position in the source stream
  readonly startPosition: number;

  // End position (exclusive) in the source stream
  readonly endPosition: number;

  // Start line number
  readonly startLine: number;

  // End line number of the token
  readonly endLine: number;

  // Start column number of the token
  readonly startColumn: number;

  // End column number of the token
  readonly endColumn: number;
}

// Token types available for parsing
// Using declare enum to make this a type-only declaration
export declare enum TokenType {
  Eof = -1,
  Ws = -2,
  BlockComment = -3,
  EolComment = -4,
  Unknown = 0,

  // --- Binding Expression specific tokens
  LParent,
  RParent,

  Identifier,

  Exponent,
  Divide,
  Multiply,
  Remainder,
  Plus,
  Minus,
  BitwiseXor,
  BitwiseOr,
  LogicalOr,
  BitwiseAnd,
  LogicalAnd,
  IncOp,
  DecOp,
  Assignment,

  AddAssignment,
  SubtractAssignment,
  ExponentAssignment,
  MultiplyAssignment,
  DivideAssignment,
  RemainderAssignment,
  ShiftLeftAssignment,
  ShiftRightAssignment,
  SignedShiftRightAssignment,
  BitwiseAndAssignment,
  BitwiseXorAssignment,
  BitwiseOrAssignment,
  LogicalAndAssignment,
  LogicalOrAssignment,
  NullCoalesceAssignment,

  Semicolon,
  Comma,
  Colon,
  LSquare,
  RSquare,
  QuestionMark,
  NullCoalesce,
  OptionalChaining,
  BinaryNot,
  LBrace,
  RBrace,
  Equal,
  StrictEqual,
  LogicalNot,
  NotEqual,
  StrictNotEqual,
  LessThan,
  LessThanOrEqual,
  ShiftLeft,
  GreaterThan,
  GreaterThanOrEqual,
  ShiftRight,
  SignedShiftRight,
  Dot,
  Spread,
  Global,
  Backtick,
  DollarLBrace,
  Arrow,

  DecimalLiteral,
  HexadecimalLiteral,
  BinaryLiteral,
  RealLiteral,
  StringLiteral,
  Infinity,
  NaN,
  True,
  False,

  Typeof,
  Null,
  Undefined,
  In,

  Let,
  Const,
  Var,
  If,
  Else,
  Return,
  Break,
  Continue,
  Do,
  While,
  For,
  Of,
  Try,
  Catch,
  Finally,
  Throw,
  Switch,
  Case,
  Default,
  Delete,
  Function,
  Export,
  Import,
  As,
  From,
}

```

--------------------------------------------------------------------------------
/xmlui/src/parsers/xmlui-parser/syntax-node.ts:
--------------------------------------------------------------------------------

```typescript
import { SyntaxKind } from "./syntax-kind";
import { findTokenAtPos } from "./utils";

export class Node {
  public readonly kind: SyntaxKind;
  /** Start position of the node including it's trivia */
  public readonly start: number;
  public readonly pos: number;
  public readonly end: number;
  public readonly triviaBefore?: Node[];
  public readonly children?: Node[];

  constructor(
    kind: SyntaxKind,
    pos: number,
    end: number,
    triviaBefore?: Node[],
    children?: Node[],
  ) {
    this.kind = kind;
    this.pos = pos;
    this.end = end;
    this.triviaBefore = triviaBefore;
    this.children = children;

    if (triviaBefore) {
      this.start = triviaBefore[0]?.start ?? pos;
    } else if (children) {
      this.start = children[0]?.start ?? pos;
    } else {
      this.start = pos;
    }
  }

  isElementNode(): this is ElementNode {
    return this.kind === SyntaxKind.ElementNode;
  }

  isAttributeNode(): this is AttributeNode {
    return this.kind === SyntaxKind.AttributeNode;
  }

  isTagLike(): boolean {
    return (
      this.kind === SyntaxKind.ElementNode ||
      this.kind === SyntaxKind.CData ||
      this.kind == SyntaxKind.Script
    );
  }

  isAttributeKeyNode(): this is AttributeKeyNode {
    return this.kind === SyntaxKind.AttributeKeyNode;
  }

  isContentListNode(): this is ContentListNode {
    return this.kind === SyntaxKind.ContentListNode;
  }

  isAttributeListNode(): this is AttributeListNode {
    return this.kind === SyntaxKind.AttributeListNode;
  }

  isTagNameNode(): this is TagNameNode {
    return this.kind === SyntaxKind.TagNameNode;
  }

  findTokenAtPos(position: number) {
    return findTokenAtPos(this, position);
  }

  getTriviaNodes(): Node[] | null {
    if (this.pos === this.start) {
      return null;
    } else if (this.triviaBefore) {
      return this.triviaBefore;
    } else {
      return this.children![0].getTriviaNodes();
    }
  }
}

export class ElementNode extends Node {
  getAttributeListNode() {
    return this.children!.find((c) => c.isContentListNode());
  }
}

export class AttributeNode extends Node {}
export class AttributeKeyNode extends Node {}
export class ContentListNode extends Node {}
export class AttributeListNode extends Node {}
export class TagNameNode extends Node {}

```

--------------------------------------------------------------------------------
/packages/xmlui-os-frames/src/MacOSAppFrame.module.scss:
--------------------------------------------------------------------------------

```scss
@use "xmlui/themes.scss" 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);
}

.app {
  --elevated-shadow: 0px 8.5px 10px #0000001d, 0px 68px 80px #0000003b;
  will-change: width, height;
  box-shadow: var(--elevated-shadow);
  cursor: var(--system-cursor-default), auto;
  border-radius: .75rem;
  grid-template-rows: 1fr;
  display: grid;
  width: 50rem;
  height: 30rem;
  z-index: 14;
  touch-action: none;
  position: relative;
  resize: both;
  overflow: auto;
}

.appButtons {
  position: absolute;
  top: 1rem;
  left: 1rem;
  box-shadow: none !important;
  z-index: var(--system-z-index-window-traffic-lights);
}

.appButtonsInner {
  --button-size: .8rem;
  grid-template-columns: repeat(3, var(--button-size));
  align-items: center;
  gap: .6rem;
  height: 100%;
  display: grid;

  svg{
    opacity: 0;
  }

  &:hover{
    svg{
      opacity: 1;
    }
  }
}

.button{
  height: var(--button-size);
  width: var(--button-size);
  background-color: var(--bgcolor);
  box-shadow: 0 0 0 .5px var(--border-color);
  border-radius: 50%;
  transition: transform .1s ease-in;
  display: flex;
  justify-content: center;
  align-items: center;
}

.close{
  --bgcolor: #ff5f56;
  --border-color: #e0443e;
}

.minimize{
  --bgcolor: #ffbd2e;
  --border-color: #dea123;
}

.stretch{
  --bgcolor: #27c93f;
  --border-color: #1aab29;
}


.container {
  background-color: t.$backgroundColor;
  border-radius: inherit;
  grid-template-rows: auto 1fr;
  min-height: auto;
  max-height: 100%;
  display: grid;
  overflow-y: hidden;
  height: 100% !important;
}


.titleBar {
  border-bottom: solid .9px hsla(var(--system-color-dark-hsl), .3);
  justify-content: center;
  width: 100%;
  padding: .9rem 1rem;
  display: flex;
}

.mainArea {
  color: var(--system-color-light-contrast);
  flex-direction: column;
  width: 100%;
  height: 100%;
  font-size: 1rem;
  display: flex;
  overflow-y: auto;
  padding: t.$space-4;
  gap: t.$space-4;
}

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

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

```markdown
%-DESC-START

**Key features:**
- **Type-ahead filtering**: Users can type to narrow down options in real-time
- **Multi-select support**: Set `multi="true"` to allow selecting multiple items
- **Custom option creation**: Enable `creatable="true"` to let users add new options
- **Rich customization**: Use `optionTemplate` to create complex option layouts

## Using AutoComplete

```xmlui-pg copy display height="200px" name="Example: Using AutoComplete"
<App>
  <AutoComplete>
    <Option value="1" label="Bruce Wayne" />
    <Option value="2" label="Clark Kent" enabled="false" />
    <Option value="3" label="Diana Prince" />
  </AutoComplete>
</App>
```

%-DESC-END

%-PROP-START emptyListTemplate

```xmlui-pg copy display height="200px" name="Example: emptyListTemplate"
<App>
  <AutoComplete>
    <property name="emptyListTemplate">
      <Text>No options found</Text>
    </property>
  </AutoComplete>
</App>
```

%-PROP-END

%-PROP-START multi

```xmlui-pg copy display height="300px" name="Example: multi"
    <App>
      <AutoComplete multi="true">
        <Option value="1" label="Bruce Wayne" />
        <Option value="2" label="Clark Kent" />
        <Option value="3" label="Diana Prince" />
        <Option value="4" label="Barry Allen" />
        <Option value="5" label="Hal Jordan" />
      </AutoComplete>
    </App>
```

%-PROP-END

%-PROP-START optionTemplate

```xmlui-pg copy display height="300px" name="Example: optionTemplate"
<App>
  <AutoComplete multi="true">
    <property name="optionTemplate">
      <Text textAlign="center" color="red">{$item.label}</Text>
    </property>
    <Option value="1" label="Bruce Wayne" />
    <Option value="2" label="Clark Kent" />
    <Option value="3" label="Diana Prince" />
  </AutoComplete>
</App>
```

%-PROP-END

%-EVENT-START itemCreated

Add a few new items not in the options list. The following markup will display them:

```xmlui-pg copy display height="300px" name="Example: itemCreated"
<App var.newItems="{[]}">
  <AutoComplete
    id="autoComplete"
    creatable="true"
    onItemCreated="item => newItems.push(item)">
    <Option value="1" label="Bruce Wayne" />
    <Option value="2" label="Clark Kent" />
  </AutoComplete>
  <Text testId="text">
    New items: {newItems.join(", ")}
  </Text>
</App>
```

%-EVENT-END

```

--------------------------------------------------------------------------------
/playwright.config.ts:
--------------------------------------------------------------------------------

```typescript
import { defineConfig, devices } from "@playwright/test";
import path from "path";

/**
 * Read environment variables from file.
 * https://github.com/motdotla/dotenv
 */
// import dotenv from 'dotenv';
// dotenv.config({ path: path.resolve(__dirname, '.env') });

/**
 * See https://playwright.dev/docs/test-configuration.
 */

const port = 3211;

// Default to using dev server unless explicitly set to false
const useDevServer = process.env.PLAYWRIGHT_USE_DEV_SERVER !== "false";
const CI = process.env.CI;

export default defineConfig({
  /* Run tests in files in parallel */
  fullyParallel: true,
  testMatch: "*.spec.ts",
  /* Fail the build on CI if you accidentally left test.only in the source code. */
  forbidOnly: !!CI,

  workers: CI ? "100%" : "75%",
  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
  reporter: CI ? [["github"], ["html"]] : [["html", { open: "never" }]],
  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
  use: {
    ...devices["Desktop Chrome"],
    channel: "chromium",
    /* Base URL to use in actions like `await page.goto('/')`. */
    baseURL: `http://localhost:${port}`,

    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
    trace: "on-first-retry",
    serviceWorkers: "allow",
    /* Grants specified permissions to the browser context. */
    permissions: ["clipboard-read", "clipboard-write"],
  },

  retries: CI ? 2 : 1,
  /* Configure projects for major browsers */
  projects: [
    {
      name: "xmlui-nonsmoke",
      testDir: "./xmlui",
      grepInvert: /@smoke/,
    },
    {
      name: "xmlui-smoke",
      testDir: "./xmlui",
      grep: /@smoke/,
    },
    {
      name: "extensions-nonsmoke",
      testDir: "./packages",
      grepInvert: /@smoke/,
    },
    {
      name: "extensions-smoke",
      testDir: "./packages",
      grep: /@smoke/,
    },
  ],

  /* Run your local dev server before starting the tests */
  webServer: {
    command:
      useDevServer && !CI
        ? `cd xmlui && npm run start-test-bed -- --port ${port}`
        : `npx serve xmlui/src/testing/infrastructure/dist -p ${port}`,
    timeout: 50 * 1000,
    port,
    reuseExistingServer: !CI,
    cwd: path.resolve(__dirname),
  },
});

```

--------------------------------------------------------------------------------
/xmlui/src/abstractions/_conventions.md:
--------------------------------------------------------------------------------

```markdown
# TypeScript Abstractions Conventions

This document outlines best practices and conventions for working with TypeScript abstractions in the XMLUI project. Following these conventions ensures that files in the abstractions folder only contain type definitions and don't generate JavaScript code when compiled.

## Core Principles

The abstractions folder is intended to contain **type definitions only** with no runtime JavaScript code generation.

## Conventions for Type Definitions

### 1. Type-Only Constructs

Use these TypeScript constructs in abstractions files:
- `interface` for defining object shapes
- `type` for type aliases and unions
- `declare` keyword for values that must exist at runtime

Avoid these constructs that generate JavaScript:
- `class` declarations
- `function` declarations
- `const`, `let`, or `var` declarations without `declare`
- Regular `enum` declarations

### 2. Implementation Patterns

#### Pattern A: Type-Only Declarations
Use the `declare` keyword to indicate that a value exists at runtime but its implementation is elsewhere:
```typescript
export declare const MY_CONSTANT: 42;
export declare enum MyEnum { Value1, Value2 }
export declare function myFunction(): void;
```

#### Pattern B: Implementation Separation
Place implementation files outside the abstractions folder:
```typescript
// In abstractions/MyTypes.ts
export type MyType = { prop: string };

// In implementation/MyImplementation.ts
import type { MyType } from "../abstractions/MyTypes";
export const createMyType = (): MyType => ({ prop: "value" });
```

### 3. Import Patterns

- Always use `import type` for type imports in abstractions:
```typescript
import type { SomeType } from "./OtherFile";
```

## Common Scenarios

1. **Constants**: Use `declare const` in abstractions
2. **Enums**: Use `declare enum` or type unions
3. **Functions**: Use `declare function` or move implementation outside
4. **Classes**: Use interfaces instead or move implementation outside

## Benefits

- Clear separation between types and implementation
- Improved maintainability and refactoring
- No runtime overhead from abstraction files
- Better TypeScript compilation performance

By following these conventions, you help maintain a clean architecture with proper separation between type definitions and runtime implementation.

```

--------------------------------------------------------------------------------
/packages/xmlui-devtools/src/devtools/utils.ts:
--------------------------------------------------------------------------------

```typescript
import { uint8ArrayToBase64 } from "../../../../xmlui/src/components-core/utils/base64-utils";

/**
 * Convert a string to its UTF-8 bytes and compress it.
 *
 * @param {string} str
 * @returns {Promise<Uint8Array>}
 */
async function compress(str: string) {
    // Convert the string to a byte stream.
    const stream = new Blob([str]).stream();

    // Create a compressed stream.
    const compressedStream = stream.pipeThrough(
        new CompressionStream("gzip")
    );

    // Convert the string to a byte stream.
    const reader = compressedStream.getReader();
    const chunks = [];
    while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        chunks.push(value);
    }

    return await concatUint8Arrays(chunks);
}

/**
 * Decompress bytes into a UTF-8 string.
 *
 * @param {Uint8Array} compressedBytes
 * @returns {Promise<string>}
 */
async function decompress(compressedBytes: Uint8Array) {
    // Convert the bytes to a stream.
    const stream = new Blob([new Uint8Array(compressedBytes)]).stream();

    // Create a decompressed stream.
    const decompressedStream = stream.pipeThrough(
        new DecompressionStream("gzip")
    );

    // Convert the string to a byte stream.
    const reader = decompressedStream.getReader();
    const chunks = [];
    while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        chunks.push(value);
    }

    const stringBytes = await concatUint8Arrays(chunks);

    // Convert the bytes to a string.
    return new TextDecoder().decode(stringBytes);
}

/**
 * Combine multiple Uint8Arrays into one.
 */
async function concatUint8Arrays(uint8arrays: ReadonlyArray<Uint8Array>) {
    // Convert each Uint8Array into an ArrayBufferView (copy if necessary) so it matches BlobPart[] typing.
    const parts: BlobPart[] = uint8arrays.map(u => new Uint8Array(u));
    const blob = new Blob(parts);
    const buffer = await blob.arrayBuffer();
    return new Uint8Array(buffer);
}

async function createQueryString(target: any) {
    // Convert the Uint8Array to a Base64 string.

    const compressed = await compress(target);
    const base64 = uint8ArrayToBase64(compressed);

    // Create a query string.
    return encodeURIComponent(base64);
}

export { compress, decompress, createQueryString };

```

