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

# Directory Structure

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

# Files

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

```scss
  1 | @use "../../components-core/theming/themes" as t;
  2 | 
  3 | // --- This code snippet is required to collect the theme variables used in this module
  4 | $themeVars: ();
  5 | @function createThemeVar($componentVariable) {
  6 |   $themeVars: t.appendThemeVar($themeVars, $componentVariable) !global;
  7 |   @return t.getThemeVar($themeVars, $componentVariable);
  8 | }
  9 | 
 10 | $component: "Link";
 11 | $themeVars: t.composePaddingVars($themeVars, $component);
 12 | $themeVars: t.composePaddingVars($themeVars, "icon-#{$component}");
 13 | $themeVars: t.composeBorderVars($themeVars, $component);
 14 | $themeVars: t.composeTextVars($themeVars, $component);
 15 | $textColor-Link--active: createThemeVar("textColor-#{$component}--active");
 16 | $textColor-Link--hover: createThemeVar("textColor-#{$component}--hover");
 17 | $textColor-Link--hover--active: createThemeVar("textColor-#{$component}--hover--active");
 18 | $fontWeight-Link--active: createThemeVar("fontWeight-#{$component}--active");
 19 | $gap-icon-Link: createThemeVar("gap-icon-#{$component}");
 20 | $textUnderlineOffset-Link: createThemeVar("textUnderlineOffset-#{$component}");
 21 | $textDecorationLine-Link: createThemeVar("textDecorationLine-#{$component}");
 22 | $textDecorationColor-Link: createThemeVar("textDecorationColor-#{$component}");
 23 | $textDecorationColor-Link--hover: createThemeVar("textDecorationColor-#{$component}--hover");
 24 | $textDecorationColor-Link--active: createThemeVar("textDecorationColor-#{$component}--active");
 25 | $textDecorationStyle-Link: createThemeVar("textDecorationStyle-#{$component}");
 26 | $textDecorationThickness-Link: createThemeVar("textDecorationThickness-#{$component}");
 27 | 
 28 | // Variables for @layer section
 29 | $outlineWidth-Link--focus: createThemeVar("outlineWidth-#{$component}--focus");
 30 | $outlineColor-Link--focus: createThemeVar("outlineColor-#{$component}--focus");
 31 | $outlineStyle-Link--focus: createThemeVar("outlineStyle-#{$component}--focus");
 32 | $outlineOffset-Link--focus: createThemeVar("outlineOffset-#{$component}--focus");
 33 | 
 34 | @layer components {
 35 |   .container {
 36 |     @include t.borderVars($themeVars, $component);
 37 |     @include t.paddingVars($themeVars, $component);
 38 |     @include t.textVars($themeVars, $component);
 39 |     flex-shrink: 0;
 40 |     cursor: pointer;
 41 |     text-decoration: none;
 42 |     width: fit-content;
 43 |     max-width: 100%;
 44 |     max-height: 100%;
 45 |     display: inline-flex;
 46 |     flex-direction: row;
 47 |     align-items: center;
 48 | 
 49 |     &.active {
 50 |       color: $textColor-Link--active;
 51 |       font-weight: $fontWeight-Link--active;
 52 |     }
 53 | 
 54 |     &.disabled {
 55 |       pointer-events: none;
 56 |     }
 57 | 
 58 |     &:not(.disabled) {
 59 |       &:hover {
 60 |         color: $textColor-Link--hover;
 61 |       }
 62 | 
 63 |       &:focus-visible {
 64 |         outline-width: $outlineWidth-Link--focus;
 65 |         outline-color: $outlineColor-Link--focus;
 66 |         outline-style: $outlineStyle-Link--focus;
 67 |         outline-offset: $outlineOffset-Link--focus;
 68 |       }
 69 | 
 70 |       &.active {
 71 |         &:hover {
 72 |           color: $textColor-Link--hover--active;
 73 |         }
 74 |       }
 75 |     }
 76 |   }
 77 | 
 78 |   .iconWrapper {
 79 |     @include t.paddingVars($themeVars, "icon-#{$component}");
 80 |     padding-right: $gap-icon-Link;
 81 |     line-height: 0;
 82 |   }
 83 | 
 84 |   .container:not(.active) {
 85 |     text-underline-offset: $textUnderlineOffset-Link;
 86 |     text-decoration-line: $textDecorationLine-Link;
 87 |     text-decoration-color: $textDecorationColor-Link;
 88 |     &:not([disabled]) {
 89 |       &:hover {
 90 |         text-decoration-color: $textDecorationColor-Link--hover;
 91 |         text-decoration-style: $textDecorationStyle-Link;
 92 |         text-decoration-thickness: $textDecorationThickness-Link;
 93 | 
 94 |         &:has(> button) {
 95 |           text-decoration-line: none;
 96 |         }
 97 |       }
 98 |       &:active {
 99 |         text-decoration-color: $textDecorationColor-Link--active;
100 |         text-decoration-style: $textDecorationStyle-Link;
101 |         text-decoration-thickness: $textDecorationThickness-Link;
102 | 
103 |         &:has(> button) {
104 |           text-decoration-line: none;
105 |         }
106 |       }
107 |     }
108 |   }
109 | }
110 | 
111 | // --- We export the theme variables to add them to the component renderer
112 | :export {
113 |   themeVars: t.json-stringify($themeVars);
114 | }
115 | 
```

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

```typescript
  1 | import styles from "./Badge.module.scss";
  2 | 
  3 | import { createComponentRenderer } from "../../components-core/renderers";
  4 | import { parseScssVar } from "../../components-core/theming/themeVars";
  5 | import {
  6 |   Badge,
  7 |   badgeVariantValues,
  8 |   defaultProps,
  9 |   isBadgeColors,
 10 |   type BadgeColors,
 11 | } from "./BadgeNative";
 12 | import { createMetadata, dInternal } from "../metadata-helpers";
 13 | import { toCssVar } from "../../parsers/style-parser/StyleParser";
 14 | 
 15 | const COMP = "Badge";
 16 | 
 17 | export const BadgeMd = createMetadata({
 18 |   status: "stable",
 19 |   description:
 20 |     "`Badge` displays small text labels with colored backgrounds, commonly used for " +
 21 |     "status indicators, categories, tags, and counts. It supports dynamic color " +
 22 |     "mapping based on content values, useful for status systems and data categorization.",
 23 |   props: {
 24 |     value: {
 25 |       description:
 26 |         "The text that the component displays. If this is not defined, the component renders " +
 27 |         "its children as the content of the badge. If neither text nor any child is defined, " +
 28 |         "the component renders a single frame for the badge with a non-breakable space.",
 29 |       type: "string",
 30 |       isRequired: true,
 31 |     },
 32 |     variant: {
 33 |       description:
 34 |         "Modifies the shape of the component. Comes in the regular \`badge\` variant or the \`pill\` variant " +
 35 |         "with fully rounded corners.",
 36 |       type: "string",
 37 |       availableValues: badgeVariantValues,
 38 |       defaultValue: defaultProps.variant,
 39 |     },
 40 |     colorMap: {
 41 |       description:
 42 |         `The \`${COMP}\` component supports the mapping of a list of colors using the \`value\` prop as the ` +
 43 |         `key. If this property is not set, no color mapping is used.`,
 44 |     },
 45 |     themeColor: dInternal(`(**NOT IMPLEMENTED YET**) The theme color of the component.`),
 46 |     indicatorText: dInternal(
 47 |       `(**NOT IMPLEMENTED YET**) This property defines the text to display in the indicator. If it is not ` +
 48 |         `defined or empty, no indicator is displayed unless the \`forceIndicator\` property is set.`,
 49 |     ),
 50 |     forceIndicator: dInternal(
 51 |       `(**NOT IMPLEMENTED YET**) This property forces the display of the indicator, even if ` +
 52 |         `the \`indicatorText\` property is not defined or empty.`,
 53 |     ),
 54 |     indicatorThemeColor: dInternal(`(**NOT IMPLEMENTED YET**) The theme color of the indicator.`),
 55 |     indicatorPosition: dInternal(`(**NOT IMPLEMENTED YET**) The position of the indicator.`),
 56 |   },
 57 |   events: {},
 58 |   themeVars: parseScssVar(styles.themeVars),
 59 |   defaultThemeVars: {
 60 |     [`padding-${COMP}`]: `$space-0_5 $space-2`,
 61 |     [`border-${COMP}`]: `0px solid $borderColor`,
 62 |     [`padding-${COMP}-pill`]: `$space-0_5 $space-2`,
 63 |     [`borderRadius-${COMP}`]: "4px",
 64 |     [`fontSize-${COMP}`]: "0.8em",
 65 |     [`fontSize-${COMP}-pill`]: "0.8em",
 66 |     [`backgroundColor-${COMP}`]: "rgb(from $color-secondary-500 r g b / 0.6)",
 67 |     [`textColor-${COMP}`]: "$const-color-surface-0",
 68 |   },
 69 | });
 70 | 
 71 | export const badgeComponentRenderer = createComponentRenderer(
 72 |   COMP,
 73 |   BadgeMd,
 74 |   ({ node, extractValue, renderChild, className }) => {
 75 |     const value = extractValue.asDisplayText(node.props.value);
 76 |     const colorMap: Record<string, string | BadgeColors> | undefined = extractValue(
 77 |       node.props?.colorMap,
 78 |     );
 79 |     let colorValue: string | BadgeColors | undefined;
 80 |     if (colorMap && value) {
 81 |       const resolvedColor = colorMap[value];
 82 |       if (typeof resolvedColor === "string") {
 83 |         colorValue = resolveColor(resolvedColor);
 84 |       } else if (isBadgeColors(resolvedColor)) {
 85 |         colorValue = {
 86 |           label: resolveColor(resolvedColor.label),
 87 |           background: resolveColor(resolvedColor.background),
 88 |         };
 89 |       }
 90 |     }
 91 |     return (
 92 |       <Badge variant={extractValue(node.props.variant)} color={colorValue} className={className}>
 93 |         {value || (node.children && renderChild(node.children)) || String.fromCharCode(0xa0)}
 94 |       </Badge>
 95 |     );
 96 |   },
 97 | );
 98 | 
 99 | function resolveColor(value: string): string {
100 |   return value.startsWith("$") ? toCssVar(value) : value;
101 | }
102 | 
```

--------------------------------------------------------------------------------
/xmlui/dev-docs/index.md:
--------------------------------------------------------------------------------

```markdown
 1 | # XMLUI Developer Guide
 2 | 
 3 | This article helps you understand the implementation details of xmlui so that you can contribute to developing it. We suggest going through these documentation sections, following their order:
 4 | 
 5 | **Repository and Build**
 6 | - [XMLUI Repository Structure](./xmlui-repo.md)
 7 | - [Building the XMLUI Core Package](./build-xmlui.md)
 8 | - [XMLUI Build System](./build-system.md)
 9 | 
10 | **Fundamentals**
11 | - [React Fundamentals](./react-fundamentals.md)
12 | - [Standalone Rendering Architecture](./standalone-app.md)
13 | - [Container-Based State Management](./containers.md)
14 | - ...
15 | 
16 | **Rendering Techniques**
17 | - [Component Behaviors](./component-behaviors.md)
18 | - [User-Defined Components](./ud-components.md)
19 | - [Components with Options](./components-with-options.md)
20 | - ...
21 | 
22 | Topics to elaborate on:
23 | 
24 | - **How data loading and API operations work** ✓ _[standalone-app.md, containers.md]_
25 |   - ApiBoundComponent detection of DataSource, APICall, FileUpload, FileDownload ✓
26 |   - Automatic loader creation and state management (loading, loaded, error states) ✓
27 |   - Loader integration with container reducer: LOADER_LOADED, LOADER_ERROR actions ✓
28 |   - React Query integration: cache configuration, invalidation, stale-while-revalidate
29 |   - Request/response transformation, authentication, and error handling
30 |   - ApiInterceptorProvider: request mocking, stubbing, and instrumentation ✓
31 | 
32 | - **How scripts and variables integrate with reactive state** ✓ _[containers.md]_
33 |   - Inline `<script>` tags and code-behind files (.xmlui.xs) ✓
34 |   - Variable and function declarations becoming reactive state ✓
35 |   - Dependency injection and execution timing ✓
36 |   - Expression evaluation: extractValue function, variable resolution, operators ✓
37 |   - Context variables: $ prefix convention, routing, iterators, forms, events ✓
38 |   - TypeScript support and error handling
39 | 
40 | - **How routing and navigation work** ✓ _[containers.md]_
41 |   - Router provider integration (BrowserRouter/HashRouter/MemoryRouter) ✓
42 |   - Route parameter extraction and query string parsing ✓
43 |   - Routing context variables: $pathname, $routeParams, $queryParams, $linkInfo ✓
44 |   - Navigation triggering container updates and URL state synchronization ✓
45 |   - AppContext global functions: navigate, toast, confirm ✓
46 |   - Programmatic navigation and History API interaction ✓
47 | 
48 | - **How styling and theming work** ✓ _[standalone-app.md]_
49 |   - CSS-in-JS architecture with StyleProvider ✓
50 |   - Theme object structure, theme variables, and ThemeProvider context ✓
51 |   - Theme switching and dynamic updates
52 |   - Style precedence, override rules, and responsive styling
53 |   - Dark mode and color scheme support
54 |   - Integration with CSS modules and global styles
55 | 
56 | - **How the provider infrastructure works** ✓ _[standalone-app.md]_
57 |   - AppWrapper provider stack: Router, QueryClient, Helmet, Logger, Icon, Theme, Inspector, ConfirmationModal ✓
58 |   - Provider composition, nesting order, and initialization dependencies ✓
59 |   - AppContext: global functions, environment info, viewport management ✓
60 |   - AppStateContext: bucket-based state organization to avoid prop drilling ✓
61 |   - ComponentProvider: exposing component registry through context ✓
62 | 
63 | - **How component lifecycle and resource management work** ✓ _[containers.md]_
64 |   - Container mounting, initialization, and component state sequence ✓
65 |   - useEffect hooks for lifecycle management ✓
66 |   - Unmounting, cleanup callbacks, and resource disposal (subscriptions, timers, loaders) ✓
67 |   - Parent-child lifecycle coordination ✓
68 |   - Memory leak prevention and hot module replacement
69 | 
70 | - **How development and debugging tools work** ✓ _[standalone-app.md]_
71 |   - DebugViewProvider configuration and debug logging ✓
72 |   - Inspector panel and component tree visualization ✓
73 |   - State inspection in React DevTools
74 |   - ComponentDecorator: test IDs, inspection attributes, accessibility ✓
75 |   - Error boundaries: catching errors, graceful degradation, custom error UI ✓
76 |   - Performance profiling, network monitoring, and hot reload
77 |   - Extension manager: third-party component registration and debugging ✓
```

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

```markdown
  1 | # Main.xmlui
  2 | 
  3 | At the root of every XMLUI app is `Main.xmlui` which declares the [App](/components/App) that defines layout and navigation.
  4 | 
  5 | ## App
  6 | 
  7 | ```xmlui
  8 | <App
  9 |   name="XMLUI Invoice"
 10 |   layout="vertical-full-header"
 11 |   defaultTheme="invoice"
 12 |   loggedInUser="{currentUser.value}"
 13 | >
 14 | ```
 15 | 
 16 | `vertical-full-header` means the header and the navigation bar dock to the top of the app's window, while the footer sticks to the bottom. There are a half-dozen other flavors, see the [App](/components/App) page for the full story.
 17 | 
 18 | ### Optional default theme
 19 | 
 20 | The `defaultTheme` points to a file called `invoice.json`.
 21 | 
 22 | ```json
 23 | {
 24 |   "name": "Invoice",
 25 |   "id": "invoice",
 26 |   "themeVars": {
 27 | 
 28 |     "color-primary": "hsl(205, 76%, 58%)",
 29 |     "color-secondary": "hsl(210, 30%, 60%)",
 30 |     "color-surface": "hsl(0, 0%, 96%)",
 31 | 
 32 |     "gap-adornment-Input": "2px",
 33 |     "borderRadius-Avatar": "50%"
 34 |   }
 35 | }
 36 | ```
 37 | 
 38 | It's concise but very powerful. The choices for `color-primary`, `color-secondary`,  and `color-surface` define a set of coordinated [palettes](/palettes) that form the core of a [Theme](/themes-intro).
 39 | 
 40 | Then there's a small handful of theme variables. `gap-adornment-Input` adjusts the space between a dollar sign and its value. `borderRadius-Avatar` does what it says on the tin.
 41 | 
 42 | These things are optional. XMLUI's mission is to ensure what you build looks good with little if any explicit styling.
 43 | 
 44 | ## AppState
 45 | 
 46 | ```xmlui
 47 |   <AppState
 48 |     id="settings"
 49 |     bucket="settingsState"
 50 |   />
 51 | ```
 52 | 
 53 | [AppState](/components/AppState) is a blackboard where components can post and read data. In our demo it defines a data structure for the app settings.
 54 | 
 55 | ## AppHeader
 56 | 
 57 | ```xmlui
 58 | <AppHeader>
 59 |   <H1>XMLUI Invoice</H1>
 60 |   <property name="profileMenuTemplate">
 61 |     <HStack
 62 |       verticalAlignment="center"
 63 |       onClick="Actions.navigate('/settings')"
 64 |     >
 65 |       <Avatar url="{loggedInUser.avatar_url}" name="{loggedInUser.display_name}" />
 66 |       <Text>{loggedInUser.display_name}</Text>
 67 |     </HStack>
 68 |   </property>
 69 | </AppHeader>
 70 | ```
 71 | 
 72 | Our demo uses `profileMenuTemplate`, one of the templates [AppHeader](/components/AppHeader) provides so you can compose what goes into common header slots.
 73 | 
 74 | ## NavPanel
 75 | 
 76 | ```xmlui
 77 | 
 78 |   <NavPanel>
 79 |     <NavLink label="Dashboard" to="/" />
 80 |     <NavLink label="Invoices" to="/invoices" />
 81 |     <NavLink label="Clients" to="/clients" />
 82 |     <NavLink label="Products" to="/products" />
 83 |     <NavLink label="Search" to="/search" />
 84 |     <NavLink label="Import" to="/importProducts" />
 85 |     <NavLink label="Settings" to="/settings" />
 86 |   </NavPanel>
 87 | ```
 88 | 
 89 | The [NavPanel](/components/NavPanel) defines [NavLink](/components/NavLink)s which are routes, or local URLs, navigable within and from outside the app.
 90 | 
 91 | ## Pages
 92 | 
 93 | ```xmlui
 94 |   <Pages>
 95 |     <Page url="/">
 96 |       <Dashboard />
 97 |     </Page>
 98 | 
 99 |     <Page url="/invoices">
100 |       <Invoices />
101 |     </Page>
102 | 
103 |     <Page url="/invoices/new">
104 |       <CreateInvoice />
105 |     </Page>
106 | 
107 |     <Page url="/clients">
108 |       <Clients />
109 |     </Page>
110 | 
111 |     <Page url="/clients/new">
112 |       <CreateClient />
113 |     </Page>
114 | 
115 |     <Page url="/products">
116 |       <Products />
117 |     </Page>
118 | 
119 |     <Page url="/search">
120 |       <Search />
121 |     </Page>
122 | 
123 |     <Page url="/search/invoices-after">
124 |       <SearchInvoicesAfter />
125 |     </Page>
126 | 
127 |     <Page url="/search/everything">
128 |       <SearchEverything />
129 |     </Page>
130 | 
131 |     <Page url="/importProducts">
132 |       <ImportProducts />
133 |     </Page>
134 | 
135 |     <Page url="/settings">
136 |       <Settings />
137 |     </Page>
138 | 
139 |     <Page url="/users/new">
140 |       <CreateUser />
141 |     </Page>
142 |   </Pages>
143 | ```
144 | 
145 | Each [Page](/components/Pages) is a container that binds to a route and holds XMLUI markup. Although you can put anything in there, our demo shows what we think is a best practice: use [Components](/components-intro) to encapsulate your business logic.
146 | 
147 | ## Footer
148 | 
149 | ```xmlui-pg display name="Try clicking the ToneSwitch"
150 | <App>
151 |   <Footer>
152 |     Built with XMLUI
153 |     <SpaceFiller />
154 |     <ToneSwitch />
155 |   </Footer>
156 | </App>
157 | ```
158 | 
159 | Our `Main.xmlui` concludes with a [Footer](/components/Footer) that embeds a [ToneSwitch](/components/ToneSwitch).
160 | 
161 | 
162 | 
```

--------------------------------------------------------------------------------
/xmlui/src/abstractions/ActionDefs.ts:
--------------------------------------------------------------------------------

```typescript
 1 | import type { AppContextObject } from "../abstractions/AppContextDefs";
 2 | import type { AsyncFunction, SyncFunction } from "./FunctionDefs";
 3 | import type { ContainerState } from "./ContainerDefs";
 4 | import type { ArrowExpression } from "../components-core/script-runner/ScriptingSourceTree";
 5 | import type { ApiInterceptor } from "../components-core/interception/ApiInterceptor";
 6 | 
 7 | // This type represents the options to use for looking up actions.
 8 | export type LookupActionOptions = {
 9 |   // This property (by default, true) indicates that any error should be signed 
10 |   // while executing an event handler. Set it to `false` to suppress error 
11 |   // indication.
12 |   signError?: boolean;
13 | 
14 |   // We can use the event's name to get info about a particular event's progress.
15 |   // Note: Multiple events can run simultaneously.
16 |   eventName?: string;
17 | 
18 |   // By default, we cache resolved action functions. This property signs that we
19 |   // don't want to cache this function. Use true on one-off handlers, like the 
20 |   // ones in Actions (e.g., `MutateAction`).
21 |   ephemeral?: boolean;
22 | 
23 |   // This property declares the script code to use as a default for a particular
24 |   // event handler.
25 |   defaultHandler?: string;
26 | 
27 |   // extra context to pass to the action
28 |   context?: any;
29 | };
30 | 
31 | // This function resolves an action by its name (within the component node that
32 | // runs the action) with the specified options and returns the action function if
33 | // found. Otherwise, return undefined.
34 | export type LookupAsyncFnInner = (
35 |   action: string | undefined,
36 |   // The unique identifier of the container that the action is executed in.
37 |   uid: symbol,
38 |   actionOptions?: LookupActionOptions
39 | ) => AsyncFunction | undefined;
40 | 
41 | // This function resolves an action by its name with the specified options and
42 | // returns the action function if found. Otherwise, return undefined.
43 | export type LookupAsyncFn = (
44 |   action: string | undefined,
45 |   actionOptions?: LookupActionOptions
46 | ) => AsyncFunction | undefined;
47 | 
48 | // This function resolves a sync action by its name (within the component node
49 | // running it) and returns the action function if found. Otherwise, it returns
50 | // undefined.
51 | export type LookupSyncFnInner = (action: ArrowExpression | undefined, uid: symbol) => SyncFunction | undefined;
52 | 
53 | // This function resolves a sync action by its name and returns the action 
54 | // function if it is found. Otherwise, it returns undefined.
55 | export type LookupSyncFn = (action: string | undefined) => SyncFunction | undefined;
56 | 
57 | // XMLUI keeps a registry of available actions to store information about
58 | // out-of-the-box and custom actions (contributions implemented in external
59 | // packages or files). This type describes the information the registry needs
60 | // about the action to be able to render it.
61 | export interface ActionRendererDef {
62 |   // The name of the action that will be used to reference it in XMLUI.
63 |   actionName: string;
64 |   
65 |   // The function that executes the action.
66 |   actionFn: ActionFunction;
67 | }
68 | 
69 | // This type represents the context in which an action is executed.
70 | export interface ActionExecutionContext {
71 |   // A unique identifier for the container that the action is executed in.
72 |   uid: symbol;
73 | 
74 |   // The state of the container that the action is executed in.
75 |   state: ContainerState;
76 | 
77 |   getCurrentState: ()=>ContainerState;
78 | 
79 |   // The appContext object passed to the current app
80 |   appContext: AppContextObject;
81 |   apiInstance?: ApiInterceptor;
82 | 
83 |   // The lookup function to resolve a sync action by its name.
84 |   lookupAction: LookupAsyncFnInner;
85 |   navigate: any; // TEMPORARY stuff, we could use the one in the appContext, but until
86 |                  // https://github.com/remix-run/react-router/issues/7634 fixed we can't
87 |   location: any; // TEMPORARY stuff, we could use the one in the appContext, but until
88 |                  // https://github.com/remix-run/react-router/issues/7634 fixed we can't
89 | }
90 | 
91 | // This type represents a function that executes a particular action within the
92 | // specified context using the given arguments.
93 | export type ActionFunction = (executionContext: ActionExecutionContext, ...args: any[]) => any;
94 | 
```

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

```markdown
  1 | %-DESC-START
  2 | 
  3 | **Key features:**
  4 | - **Exclusive selection**: Only one option can be selected at a time within the group
  5 | - **Form integration**: Built-in validation states and seamless form compatibility
  6 | - **Flexible layout**: Contains [Option](/components/Option) that can be arranged in any layout structure
  7 | - **State management**: Automatically handles selection state and change events
  8 | - **Accessibility support**: Proper keyboard navigation and screen reader compatibility
  9 | - **Validation indicators**: Visual feedback for error, warning, and valid states
 10 | 
 11 | `RadioGroup` is often used in forms. See [this guide](/forms) for details.
 12 | 
 13 | %-DESC-END
 14 | 
 15 | %-PROP-START initialValue
 16 | 
 17 | This property defines the initial value of the selected option within the group.
 18 | 
 19 | ```xmlui-pg copy display name="Example: initialValue"
 20 | <App>
 21 |   <RadioGroup initialValue="first">
 22 |     <HStack padding="$space-normal">
 23 |       <Option label="First Item" value="first"/>
 24 |       <Option label="Second Item" value="second"/>
 25 |       <Option label="Third Item" value="third"/>
 26 |     </HStack>
 27 |   </RadioGroup>
 28 | </App>
 29 | ```
 30 | 
 31 | %-PROP-END
 32 | 
 33 | %-PROP-START enabled
 34 | 
 35 | This property indicates whether the input accepts user actions (`true`) or not (`false`). The default value is `true`.
 36 | 
 37 | ```xmlui-pg copy display name="Example: enabled"
 38 | <App>
 39 |   <RadioGroup initialValue="first" enabled="false">
 40 |     <HStack padding="$space-normal">
 41 |       <Option label="First Item" value="first"/>
 42 |       <Option label="Second Item" value="second"/>
 43 |       <Option label="Third Item" value="third"/>
 44 |     </HStack>
 45 |   </RadioGroup>
 46 | </App>
 47 | ```
 48 | 
 49 | %-PROP-END
 50 | 
 51 | %-PROP-START validationStatus
 52 | 
 53 | This prop is used to visually indicate status changes reacting to form field validation.
 54 | 
 55 | | Value     | Description                                           |
 56 | | :-------- | :---------------------------------------------------- |
 57 | | `valid`   | Visual indicator for an input that is accepted        |
 58 | | `warning` | Visual indicator for an input that produced a warning |
 59 | | `error`   | Visual indicator for an input that produced an error  |
 60 | 
 61 | ```xmlui-pg copy display name="Example: validationStatus"
 62 | <App>
 63 |   <HStack>
 64 |     <RadioGroup initialValue="first" validationStatus="error">
 65 |       <Option label="First Item" value="first"/>
 66 |       <Option label="Second Item" value="second"/>
 67 |     </RadioGroup>
 68 |     <RadioGroup initialValue="first" validationStatus="warning">
 69 |       <Option label="First Item" value="first"/>
 70 |       <Option label="Second Item" value="second"/>
 71 |     </RadioGroup>
 72 |     <RadioGroup initialValue="first" validationStatus="valid">
 73 |       <Option label="First Item" value="first"/>
 74 |       <Option label="Second Item" value="second"/>
 75 |     </RadioGroup>
 76 |   </HStack>
 77 | </App>
 78 | ```
 79 | 
 80 | %-PROP-END
 81 | 
 82 | %-API-START setValue
 83 | 
 84 | You can use this method to set the component's current value programmatically.
 85 | 
 86 | ```xmlui-pg copy {2, 7-8} display name="Example: value and setValue"
 87 | <App>
 88 |   <RadioGroup id="radio">
 89 |     <Option label="First Item" value="first"/>
 90 |     <Option label="Second Item" value="second"/>
 91 |   </RadioGroup>
 92 |   <HStack>
 93 |     <Button label="Set First" onClick="radio.setValue('first')" />
 94 |     <Button label="Set Second" onClick="radio.setValue('second')" />
 95 |   </HStack>
 96 | </App>
 97 | ```
 98 | 
 99 | %-API-END
100 | 
101 | %-EVENT-START didChange
102 | 
103 | This event is triggered after the user has changed the field value. The following example uses this event to display the selected option's value:
104 | 
105 | ```xmlui-pg
106 | ---app copy display name="Example: didChange"
107 | <App var.field="">
108 |   <RadioGroup initialValue="{field}" onDidChange="(val) => field = val">
109 |     <Option label="First Item" value="first"/>
110 |     <Option label="Second Item" value="second"/>
111 |   </RadioGroup>
112 |   <Text value="{field}" />
113 | </App>
114 | ---desc
115 | Select one of the available options and see how the `Text` underneath it is updated in parallel:
116 | ```
117 | 
118 | %-EVENT-END
119 | 
120 | %-STYLE-START
121 | 
122 | `RadioGroup` is a component that governs its children and stores the selected value. It does not support styling; however, you can style the options within the group. When you set the theme variables for the group's options, use the `RadioGroupOption` name.
123 | 
124 | %-STYLE-END
125 | 
```

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

```typescript
  1 | import { describe, expect, it } from "vitest";
  2 | 
  3 | import { Parser } from "../../../src/parsers/scripting/Parser";
  4 | import {
  5 |   BinaryExpression,
  6 |   T_BINARY_EXPRESSION,
  7 |   T_CALCULATED_MEMBER_ACCESS_EXPRESSION,
  8 |   T_CONDITIONAL_EXPRESSION,
  9 |   T_FUNCTION_INVOCATION_EXPRESSION,
 10 |   T_IDENTIFIER,
 11 |   T_LITERAL,
 12 |   T_MEMBER_ACCESS_EXPRESSION,
 13 |   T_SEQUENCE_EXPRESSION,
 14 |   T_UNARY_EXPRESSION,
 15 | } from "../../../src/components-core/script-runner/ScriptingSourceTree";
 16 | 
 17 | describe("Parser - Binary operations", () => {
 18 |   const binaryOpCases = [
 19 |     { src: "a**b", op: "**" },
 20 |     { src: "a+b", op: "+" },
 21 |     { src: "a-b", op: "-" },
 22 |     { src: "a*b", op: "*" },
 23 |     { src: "a/b", op: "/" },
 24 |     { src: "a%b", op: "%" },
 25 |     { src: "a>>b", op: ">>" },
 26 |     { src: "a<<b", op: "<<" },
 27 |     { src: "a>>>b", op: ">>>" },
 28 |     { src: "a == b", op: "==" },
 29 |     { src: "a != b", op: "!=" },
 30 |     { src: "a < b", op: "<" },
 31 |     { src: "a <= b", op: "<=" },
 32 |     { src: "a>b", op: ">" },
 33 |     { src: "a>=b", op: ">=" },
 34 |     { src: "a ?? b", op: "??" },
 35 |     { src: "a | b", op: "|" },
 36 |     { src: "a & b", op: "&" },
 37 |     { src: "a ^ b", op: "^" },
 38 |     { src: "a || b", op: "||" },
 39 |     { src: "a && b", op: "&&" },
 40 |     { src: "a in b", op: "in" },
 41 |   ];
 42 |   binaryOpCases.forEach((c) => {
 43 |     it(`Binary (operator): ${c.src}`, () => {
 44 |       // --- Arrange
 45 |       const wParser = new Parser(c.src);
 46 | 
 47 |       // --- Act
 48 |       const expr = wParser.parseExpr();
 49 | 
 50 |       // --- Assert
 51 |       expect(expr).not.equal(null);
 52 |       if (!expr) return;
 53 |       expect(expr.type).equal(T_BINARY_EXPRESSION);
 54 |       const binary = expr as BinaryExpression;
 55 |       expect(binary.op).equal(c.op);
 56 |     });
 57 |   });
 58 | 
 59 |   const binaryLeftOperandCases = [
 60 |     { src: "a+b", op: "+", exp: T_IDENTIFIER },
 61 |     { src: "a+(b+c)", op: "+", exp: T_IDENTIFIER },
 62 |     { src: "a+b+c", op: "+", exp: T_BINARY_EXPRESSION },
 63 |     { src: "a+b*c", op: "+", exp: T_IDENTIFIER },
 64 |     { src: "!a+b", op: "+", exp: T_UNARY_EXPRESSION },
 65 |     { src: "a.c+b", op: "+", exp: T_MEMBER_ACCESS_EXPRESSION },
 66 |     { src: "a[c]+b", op: "+", exp: T_CALCULATED_MEMBER_ACCESS_EXPRESSION },
 67 |     { src: "(a ? b : c)+b", op: "+", exp: T_CONDITIONAL_EXPRESSION },
 68 |     { src: "123+b", op: "+", exp: T_LITERAL },
 69 |     { src: "a(b,c)+b", op: "+", exp: T_FUNCTION_INVOCATION_EXPRESSION },
 70 |     { src: "(123, 1+c)+b", op: "+", exp: T_SEQUENCE_EXPRESSION },
 71 |   ];
 72 |   binaryLeftOperandCases.forEach((c) => {
 73 |     it(`Binary (left operand): ${c.src}`, () => {
 74 |       // --- Arrange
 75 |       const wParser = new Parser(c.src);
 76 | 
 77 |       // --- Act
 78 |       const expr = wParser.parseExpr();
 79 | 
 80 |       // --- Assert
 81 |       expect(expr).not.equal(null);
 82 |       if (!expr) return;
 83 |       expect(expr.type).equal(T_BINARY_EXPRESSION);
 84 |       const binary = expr as BinaryExpression;
 85 |       expect(binary.op).equal(c.op);
 86 |       expect(binary.left.type).equal(c.exp);
 87 |     });
 88 |   });
 89 | 
 90 |   const binaryRightOperandCases = [
 91 |     { src: "a+b", op: "+", exp: T_IDENTIFIER },
 92 |     { src: "a+(b+c)", op: "+", exp: T_BINARY_EXPRESSION },
 93 |     { src: "a+b+c", op: "+", exp: T_IDENTIFIER },
 94 |     { src: "a+b*c", op: "+", exp: T_BINARY_EXPRESSION },
 95 |     { src: "a*b+c", op: "+", exp: T_IDENTIFIER },
 96 |     { src: "a+!b", op: "+", exp: T_UNARY_EXPRESSION },
 97 |     { src: "a+b.c", op: "+", exp: T_MEMBER_ACCESS_EXPRESSION },
 98 |     { src: "a+b[c]", op: "+", exp: T_CALCULATED_MEMBER_ACCESS_EXPRESSION },
 99 |     { src: "a +(a ? b : c)", op: "+", exp: T_CONDITIONAL_EXPRESSION },
100 |     { src: "b+123", op: "+", exp: T_LITERAL },
101 |     { src: "b+a(b,c)", op: "+", exp: T_FUNCTION_INVOCATION_EXPRESSION },
102 |     { src: "b+(123, 1+c)", op: "+", exp: T_SEQUENCE_EXPRESSION },
103 |   ];
104 |   binaryRightOperandCases.forEach((c) => {
105 |     it(`Binary (left operand): ${c.src}`, () => {
106 |       // --- Arrange
107 |       const wParser = new Parser(c.src);
108 | 
109 |       // --- Act
110 |       const expr = wParser.parseExpr();
111 | 
112 |       // --- Assert
113 |       expect(expr).not.equal(null);
114 |       if (!expr) return;
115 |       expect(expr.type).equal(T_BINARY_EXPRESSION);
116 |       const binary = expr as BinaryExpression;
117 |       expect(binary.op).equal(c.op);
118 |       expect(binary.right.type).equal(c.exp);
119 |     });
120 |   });
121 | });
122 | 
```

--------------------------------------------------------------------------------
/xmlui/src/components/NestedApp/AppWithCodeView.tsx:
--------------------------------------------------------------------------------

```typescript
  1 | import styles from "./AppWithCodeView.module.scss";
  2 | 
  3 | import { createComponentRenderer } from "../../components-core/renderers";
  4 | import { parseScssVar } from "../../components-core/theming/themeVars";
  5 | import { AppWithCodeViewNative } from "./AppWithCodeViewNative";
  6 | import { defaultProps } from "./defaultProps";
  7 | import { createMetadata } from "../metadata-helpers";
  8 | 
  9 | const COMP = "AppWithCodeView";
 10 | 
 11 | export const AppWithCodeViewMd = createMetadata({
 12 |   status: "stable",
 13 |   description: `The ${COMP} component displays a combination of markdown content and a nested xmlui app. 
 14 | It supports both side-by-side and stacked layouts.`,
 15 |   props: {
 16 |     markdown: {
 17 |       description: "The markdown content to be displayed alongside the app",
 18 |       valueType: "string",
 19 |     },
 20 |     splitView: {
 21 |       description: "Whether to render the markdown and app side by side or stacked vertically",
 22 |       valueType: "boolean",
 23 |     },
 24 |     app: {
 25 |       description: "The source markup of the app to be nested",
 26 |     },
 27 |     api: {
 28 |       description: "This property defines an optional emulated API to be used with the nested app.",
 29 |     },
 30 |     components: {
 31 |       description:
 32 |         "This property defines an optional list of components to be used with the nested app.",
 33 |       defaultValue: defaultProps.components,
 34 |     },
 35 |     config: {
 36 |       description: "You can define the nested app's configuration with this property.",
 37 |     },
 38 |     activeTheme: {
 39 |       description:
 40 |         "This property defines the active theme for the nested app. " +
 41 |         "If not set, the default theme is used.",
 42 |     },
 43 |     activeTone: {
 44 |       description:
 45 |         "This property defines the active tone for the nested app. " +
 46 |         "If not set, the default tone is used.",
 47 |     },
 48 |     title: {
 49 |       description: "The optional title of the nested app. If not set, no title is displayed.",
 50 |     },
 51 |     height: {
 52 |       description:
 53 |         "The height of the nested app. If not set, the height is determined automatically.",
 54 |     },
 55 |     allowPlaygroundPopup: {
 56 |       description:
 57 |         "This property defines whether the nested app can be opened in the xmlui playground.",
 58 |       valueType: "boolean",
 59 |       defaultValue: defaultProps.allowPlaygroundPopup,
 60 |     },
 61 |     withFrame: {
 62 |       description: "This property defines whether the nested app should be displayed with a frame.",
 63 |       valueType: "boolean",
 64 |       defaultValue: defaultProps.withFrame,
 65 |     },
 66 |   },
 67 |   themeVars: parseScssVar(styles.themeVars),
 68 |   defaultThemeVars: {},
 69 | });
 70 | 
 71 | export const appWithCodeViewComponentRenderer = createComponentRenderer(
 72 |   COMP,
 73 |   AppWithCodeViewMd,
 74 |   ({ node, extractValue, renderChild }) => {
 75 |     let renderedChildren = "";
 76 | 
 77 |     // 1. Static content prop fallback
 78 |     if (!renderedChildren) {
 79 |       renderedChildren = extractValue.asString(node.props.markdown);
 80 |     }
 81 | 
 82 |     // 2. "data" property fallback
 83 |     if (!renderedChildren && typeof (node.props as any).data === "string") {
 84 |       renderedChildren = extractValue.asString((node.props as any).data);
 85 |     }
 86 | 
 87 |     // 3. Children fallback
 88 |     if (!renderedChildren) {
 89 |       (node.children ?? []).forEach((child) => {
 90 |         const renderedChild = renderChild(child);
 91 |         console.log("renderedChild", renderedChild);
 92 |         if (typeof renderedChild === "string") {
 93 |           renderedChildren += renderedChild;
 94 |         }
 95 |       });
 96 |     }
 97 | 
 98 |     return (
 99 |       <AppWithCodeViewNative
100 |         markdown={renderedChildren}
101 |         splitView={extractValue.asOptionalBoolean(node.props?.splitView)}
102 |         app={node.props?.app}
103 |         api={extractValue(node.props?.api)}
104 |         components={extractValue(node.props?.components)}
105 |         config={extractValue(node.props?.config)}
106 |         activeTheme={extractValue(node.props?.activeTheme)}
107 |         activeTone={extractValue(node.props?.activeTone)}
108 |         title={extractValue(node.props?.title)}
109 |         height={extractValue(node.props?.height)}
110 |         allowPlaygroundPopup={extractValue.asOptionalBoolean(node.props?.allowPlaygroundPopup)}
111 |         withFrame={extractValue.asOptionalBoolean(node.props?.withFrame)}
112 |       />
113 |     );
114 |   },
115 | );
116 | 
```

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

```typescript
  1 | import { validationStatusStyleNames } from "./themes/base-utils";
  2 | 
  3 | export type HVar = {
  4 |   classes: Array<string>;
  5 |   attribute: string;
  6 |   component: string;
  7 |   traits: Array<string>;
  8 |   states: Array<string>;
  9 | };
 10 | 
 11 | const parsedHVarCache: Record<string, HVar | null> = {};
 12 | 
 13 | //extremely dummy solution, will come back later
 14 | export function parseHVar(input: string): HVar | null {
 15 |   if (parsedHVarCache[input] !== undefined) {
 16 |     return parsedHVarCache[input];
 17 |   }
 18 |   // Split the input string into parts using regex
 19 |   const parts = input.split(/-[A-Z]+/);
 20 |   if (parts.length !== 2) {
 21 |     parsedHVarCache[input] = null;
 22 |     return parsedHVarCache[input];
 23 |   }
 24 | 
 25 |   const firstPart = parts[0];
 26 |   const classessParts = firstPart.split(":");
 27 |   const attribute = classessParts[classessParts.length - 1];
 28 |   const classes = classessParts.length > 1 ? classessParts.slice(0, classessParts.length - 1) : [];
 29 |   const secondPart = input.substring(firstPart.length + 1);
 30 |   const [compName, ...rest] = secondPart.split("-");
 31 |   const traitsAndStates = secondPart.substring(compName.length).split("--");
 32 | 
 33 |   const states: Array<string> = [];
 34 |   const traits: Array<string> = [];
 35 |   traitsAndStates.forEach((part) => {
 36 |     if (!part.includes("-") && part) {
 37 |       states.push(part);
 38 |     } else {
 39 |       part.split("-").forEach((trait) => {
 40 |         if (trait) {
 41 |           traits.push(trait);
 42 |         }
 43 |       });
 44 |     }
 45 |   });
 46 | 
 47 |   parsedHVarCache[input] = {
 48 |     classes: classes,
 49 |     attribute: attribute,
 50 |     component: compName,
 51 |     traits: traits,
 52 |     states: states,
 53 |   };
 54 | 
 55 |   return parsedHVarCache[input];
 56 | }
 57 | 
 58 | function createCombinations(arr: Array<any> = []) {
 59 |   const stateCombinations = [];
 60 | 
 61 |   for (let i = 1; i <= arr.length; i++) {
 62 |     for (let j = 0; j <= arr.length - i; j++) {
 63 |       stateCombinations.push(arr.slice(j, j + i));
 64 |     }
 65 |   }
 66 |   const result = stateCombinations.sort((a, b) => {
 67 |     if (b.length !== a.length) {
 68 |       return b.length - a.length;
 69 |     }
 70 |     // If lengths are equal, prioritize non-validation states
 71 |     const aHasValidation = a.some((state: any) => validationStatusStyleNames.includes(state));
 72 |     const bHasValidation = b.some((state: any) => validationStatusStyleNames.includes(state));
 73 | 
 74 |     if (aHasValidation && !bHasValidation) return 1;
 75 |     if (!aHasValidation && bHasValidation) return -1;
 76 |     return 0;
 77 |   });
 78 |   return result;
 79 | }
 80 | 
 81 | export type ThemeVarMatchResult = {
 82 |   forValue: string;
 83 |   matchedValue: string | undefined;
 84 |   from: Array<string>;
 85 | };
 86 | 
 87 | export function matchThemeVar(
 88 |   themeVar: string,
 89 |   availableThemeVars: Array<Record<string, string>> = []
 90 | ): ThemeVarMatchResult | undefined {
 91 |   const hvar = parseHVar(themeVar);
 92 |   if (!hvar) {
 93 |     return;
 94 |   }
 95 |   const stateCombinations = createCombinations(hvar.states);
 96 |   const traitCombinations = createCombinations(hvar.traits);
 97 | 
 98 |   const sortedTraitCombinations: Array<string> = [];
 99 |   traitCombinations.forEach((traitComb) => {
100 |     let result = "";
101 |     traitComb.forEach((t) => {
102 |       result = `${result}-${t}`;
103 |     });
104 |     sortedTraitCombinations.push(result);
105 |   });
106 |   sortedTraitCombinations.push("");
107 | 
108 |   const sortedStateCombinations: Array<string> = [];
109 |   stateCombinations.forEach((stateComb) => {
110 |     let result = "";
111 |     stateComb.forEach((s) => {
112 |       result = `${result}--${s}`;
113 |     });
114 |     sortedStateCombinations.push(result);
115 |   });
116 |   sortedStateCombinations.push("");
117 | 
118 |   const componentParts = [hvar.component, ...hvar.classes];
119 |   const from: Array<string> = [];
120 |   sortedStateCombinations.forEach((stateComb) => {
121 |     sortedTraitCombinations.forEach((traitComb) => {
122 |       componentParts.forEach((componentPart) => {
123 |         from.push(`${hvar.attribute}-${componentPart}${traitComb}${stateComb}`);
124 |       });
125 |     });
126 |   });
127 | 
128 |   let matchedValue;
129 |   for (let i = availableThemeVars.length - 1; i >= 0; i--) {
130 |     const themeVars = availableThemeVars[i];
131 |     let foundValue = from.find((themeVar) => themeVars[themeVar] !== undefined);
132 |     if (foundValue) {
133 |       matchedValue = foundValue;
134 |       break;
135 |     }
136 |   }
137 |   const forValue = from[0];
138 |   return {
139 |     forValue: forValue,
140 |     matchedValue: matchedValue,
141 |     from: from,
142 |   };
143 | }
144 | 
```

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

```typescript
  1 | import React, {
  2 |   type ReactNode,
  3 |   useCallback,
  4 |   useContext,
  5 |   useEffect,
  6 |   useMemo,
  7 |   useRef,
  8 |   useState,
  9 | } from "react";
 10 | 
 11 | import type { ButtonVariant, ButtonThemeColor } from "../abstractions";
 12 | import { Button } from "../Button/ButtonNative";
 13 | import { Stack } from "../Stack/StackNative";
 14 | import { Dialog } from "./Dialog";
 15 | 
 16 | const ConfirmationModalContext = React.createContext({
 17 |   confirm: (title: string, message?: string, actionLabel?: string) => Promise.resolve(false),
 18 | });
 19 | 
 20 | export const useConfirm = () => useContext(ConfirmationModalContext);
 21 | 
 22 | type Props = {
 23 |   children: ReactNode;
 24 | };
 25 | 
 26 | type ConfirmButtonParams = {
 27 |   variant?: ButtonVariant;
 28 |   themeColor?: ButtonThemeColor;
 29 |   label: string;
 30 |   value: any;
 31 | };
 32 | 
 33 | type ConfirmParams = {
 34 |   message?: string;
 35 |   title: string;
 36 |   buttons: Array<ConfirmButtonParams>;
 37 | };
 38 | 
 39 | export const ConfirmationModalContextProvider = ({ children }: Props) => {
 40 |   // State
 41 |   const [showConfirmationModal, setShowConfirmationModal] = useState(false);
 42 |   const [title, setTitle] = useState<string>("Are you sure?");
 43 |   const [message, setMessage] = useState<string | undefined>();
 44 |   const [buttons, setButtons] = useState<Array<ConfirmButtonParams>>([]);
 45 |   // Refs and other
 46 |   const resolver = useRef<((confirmationResult: boolean) => void) | null>(null);
 47 |   const buttonsRef = useRef<HTMLDivElement>(null);
 48 | 
 49 |   useEffect(() => {
 50 |     if (showConfirmationModal) {
 51 |       setTimeout(() => {
 52 |         const focusable: NodeListOf<HTMLButtonElement> | undefined =
 53 |           buttonsRef.current?.querySelectorAll("button");
 54 |         if (focusable) {
 55 |           focusable[focusable.length - 1].focus();
 56 |         }
 57 |       }, 0);
 58 |     }
 59 |   }, [showConfirmationModal]);
 60 | 
 61 |   const handleShow = useCallback(
 62 |     (title: string | ConfirmParams, message?: string, actionLabel?: string) => {
 63 |       if (typeof title === "string") {
 64 |         setTitle(title);
 65 |         setButtons([
 66 |           {
 67 |             label: actionLabel || "Ok",
 68 |             value: true,
 69 |           },
 70 |         ]);
 71 |         setMessage(message);
 72 |       } else {
 73 |         setTitle(title.title);
 74 |         setButtons(title.buttons);
 75 |         setMessage(title.message);
 76 |       }
 77 |       setShowConfirmationModal(true);
 78 |       return new Promise<boolean>(function (resolve) {
 79 |         resolver.current = resolve;
 80 |       });
 81 |     },
 82 |     [],
 83 |   );
 84 | 
 85 |   const handleOk = useCallback((value: any) => {
 86 |     if (resolver.current) {
 87 |       resolver.current(value);
 88 |     }
 89 |     setShowConfirmationModal(false);
 90 |   }, []);
 91 | 
 92 |   const handleCancel = useCallback(() => {
 93 |     if (resolver.current) {
 94 |       resolver.current(false);
 95 |     }
 96 |     setShowConfirmationModal(false);
 97 |   }, []);
 98 | 
 99 |   const contextValue = useMemo(() => {
100 |     return {
101 |       confirm: handleShow,
102 |     };
103 |   }, [handleShow]);
104 | 
105 |   return (
106 |     <ConfirmationModalContext.Provider value={contextValue}>
107 |       {children}
108 | 
109 |       {showConfirmationModal && (
110 |         <Dialog
111 |           title={title}
112 |           description={message}
113 |           isOpen={true}
114 |           onClose={handleCancel}
115 |           buttons={
116 |             <Stack
117 |               orientation="horizontal"
118 |               horizontalAlignment="end"
119 |               style={{ width: "100%", gap: "1em" }}
120 |               ref={buttonsRef}
121 |             >
122 |               <Button variant="ghost" themeColor="secondary" size="sm" onClick={handleCancel}>
123 |                 Cancel
124 |               </Button>
125 |               {buttons.length > 1 ? <div style={{ flex: 1 }} /> : undefined}
126 |               {buttons.map(
127 |                 ({ label, value, variant = "solid", themeColor = "attention" }, index) => {
128 |                   return (
129 |                     <Button
130 |                       key={index}
131 |                       variant={variant}
132 |                       themeColor={themeColor}
133 |                       size="sm"
134 |                       type="submit"
135 |                       onClick={() => {
136 |                         handleOk(value);
137 |                       }}
138 |                     >
139 |                       {label}
140 |                     </Button>
141 |                   );
142 |                 },
143 |               )}
144 |             </Stack>
145 |           }
146 |         />
147 |       )}
148 |     </ConfirmationModalContext.Provider>
149 |   );
150 | };
151 | 
```

--------------------------------------------------------------------------------
/xmlui/dev-docs/next/error-handling-standardization-summary.md:
--------------------------------------------------------------------------------

```markdown
  1 | # Error Handling Standardization - Implementation Summary
  2 | 
  3 | ## Overview
  4 | Successfully implemented standardized error handling across the XMLUI documentation generation scripts to improve consistency, maintainability, and debugging capabilities.
  5 | 
  6 | ## Changes Made
  7 | 
  8 | ### 1. Created New Error Handling Infrastructure
  9 | 
 10 | #### `error-handling.mjs` - New Utility Module
 11 | - **`handleFatalError()`** - Standardized fatal error handling with appropriate exit codes
 12 | - **`handleNonFatalError()`** - Consistent non-fatal error logging
 13 | - **`validateDependencies()`** - Centralized dependency validation
 14 | - **`withErrorHandling()`** - Wrapper for async operations with error handling
 15 | - **`withFileErrorHandling()`** - Specialized file operation error handling
 16 | - **`createMetadataError()`** - Standardized metadata error creation
 17 | 
 18 | #### Enhanced `constants.mjs`
 19 | - Added `ERROR_HANDLING.EXIT_CODES` for consistent exit code usage
 20 | - Expanded `ERROR_MESSAGES` with comprehensive error message constants
 21 | 
 22 | ### 2. Updated Scripts to Use Standardized Error Handling
 23 | 
 24 | #### `create-theme-files.mjs`
 25 | - **Before**: Used `console.log()` + `process.exit(1)` for errors
 26 | - **After**: 
 27 |   - Wrapped in async function with try-catch
 28 |   - Uses `validateDependencies()` for checking required metadata
 29 |   - Uses `withFileErrorHandling()` for file write operations
 30 |   - Uses `handleFatalError()` for graceful error handling and exit
 31 |   - Uses centralized logger instead of console.log
 32 | 
 33 | #### `input-handler.mjs`
 34 | - **Before**: Basic error handling with minimal validation
 35 | - **After**:
 36 |   - Enhanced error handling with specific error types (ENOENT, SyntaxError)
 37 |   - Uses `ErrorWithSeverity` for consistent error classification
 38 |   - Improved error messages using centralized constants
 39 | 
 40 | #### `get-docs.mjs`
 41 | - **Before**: Mixed error handling patterns with try-catch blocks
 42 | - **After**:
 43 |   - Replaced manual try-catch blocks with `withErrorHandling()` wrapper
 44 |   - Uses `handleNonFatalError()` for non-critical errors
 45 |   - Imports and uses standardized `loadConfig()` from input-handler
 46 |   - Removed duplicate loadConfig function
 47 | 
 48 | ### 3. Key Benefits Achieved
 49 | 
 50 | #### Consistency
 51 | - All scripts now use the same error handling patterns
 52 | - Standardized error messages and exit codes
 53 | - Consistent logging approach across all scripts
 54 | 
 55 | #### Maintainability
 56 | - Centralized error handling logic in reusable utilities
 57 | - Easy to modify error behavior in one place
 58 | - Clear separation between fatal and non-fatal errors
 59 | 
 60 | #### Debugging
 61 | - Better error context with operation names
 62 | - Structured error information
 63 | - Appropriate exit codes for different error types
 64 | 
 65 | #### Robustness
 66 | - Proper dependency validation
 67 | - Enhanced file operation error handling
 68 | - Graceful error recovery where appropriate
 69 | 
 70 | ## Usage Examples
 71 | 
 72 | ### Fatal Error Handling
 73 | ```javascript
 74 | // Before
 75 | console.log("Error occurred");
 76 | process.exit(1);
 77 | 
 78 | // After
 79 | handleFatalError(error, ERROR_HANDLING.EXIT_CODES.METADATA_ERROR, "theme generation");
 80 | ```
 81 | 
 82 | ### Async Operation Wrapping
 83 | ```javascript
 84 | // Before
 85 | try {
 86 |   await someOperation();
 87 | } catch (error) {
 88 |   logger.error("Failed:", error);
 89 | }
 90 | 
 91 | // After
 92 | await withErrorHandling(
 93 |   () => someOperation(),
 94 |   "operation description",
 95 |   ERROR_HANDLING.EXIT_CODES.GENERAL_ERROR
 96 | );
 97 | ```
 98 | 
 99 | ### Dependency Validation
100 | ```javascript
101 | // Before
102 | if (!data) {
103 |   console.log("Missing data");
104 |   process.exit(1);
105 | }
106 | 
107 | // After
108 | validateDependencies({
109 |   DATA: data,
110 |   CONFIG: config
111 | });
112 | ```
113 | 
114 | ## Files Modified
115 | - ✅ `scripts/generate-docs/error-handling.mjs` (new)
116 | - ✅ `scripts/generate-docs/constants.mjs` (enhanced)
117 | - ✅ `scripts/generate-docs/create-theme-files.mjs` (refactored)
118 | - ✅ `scripts/generate-docs/input-handler.mjs` (enhanced)
119 | - ✅ `scripts/generate-docs/get-docs.mjs` (standardized)
120 | 
121 | ## Next Steps
122 | This standardization provides a solid foundation for:
123 | 1. Applying similar error handling patterns to remaining scripts
124 | 2. Adding more sophisticated error recovery mechanisms
125 | 3. Implementing structured logging and monitoring
126 | 4. Adding automated error reporting and debugging tools
127 | 
128 | The error handling infrastructure is now consistent, maintainable, and provides better debugging capabilities across the documentation generation pipeline.
129 | 
```

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

```markdown
  1 | %-DESC-START
  2 | 
  3 | **Key features:**
  4 | 
  5 | - **Hierarchical organization**: Creates nested menu structures by containing NavLinks and other NavGroups
  6 | - **Expand/collapse behavior**: Users can toggle visibility of grouped navigation items
  7 | - **Customizable icons**: Different icons for expanded/collapsed states and layout orientations
  8 | - **Flexible placement**: Works within NavPanel for app navigation or standalone for custom menus
  9 | - **Initial state control**: Configure whether groups start expanded or collapsed
 10 | 
 11 | ## Using `NavGroup`
 12 | 
 13 | The primary use of a `NavGroup` is to create an application menu with submenus, as the following example shows:
 14 | 
 15 | ```xmlui-pg copy display name="Example: NavGroup in App" height="280px"
 16 | ---app
 17 | <App layout="condensed">
 18 |   <NavPanel>
 19 |     <NavLink label="Home" to="/" icon="home"/>
 20 |     <NavGroup label="Pages">
 21 |       <NavLink label="Page 1" to="/page/1"/>
 22 |       <NavGroup label="Page 2-4">
 23 |         <NavLink label="Page 2" to="/page/2"/>
 24 |         <NavLink label="Page 3" to="/page/3"/>
 25 |         <NavLink label="Page 4" to="/page/4"/>
 26 |       </NavGroup>
 27 |       <NavLink label="Page 5" to="/page/5"/>
 28 |       <NavLink label="Page Other" to="/page/Other"/>
 29 |     </NavGroup>
 30 |   </NavPanel>
 31 |   <Pages fallbackPath="/">
 32 |     <Page url="/">
 33 |       Home
 34 |     </Page>
 35 |     <Page url="/page/:id">
 36 |       <Text value="Page {$routeParams.id}" />
 37 |     </Page>
 38 |   </Pages>
 39 | </App>
 40 | ---desc
 41 | Here, the highlighted `NavGroup` element nests other `NavLink` and `NavGroup` elements to create a hierarchical menu:
 42 | ```
 43 | 
 44 | You do not have to use `NavGroup` within `NavPanel`; you can nest it into other components to represent a menu, like in the following example:
 45 | 
 46 | ```xmlui-pg copy display name="Example: NavGroup in a Stack" height="280px"
 47 | <App>
 48 |   <HStack verticalAlignment="center">
 49 |     <Text>Use this menu:</Text>
 50 |     <NavGroup label="Pages">
 51 |       <NavLink label="Page 1" />
 52 |       <NavGroup label="Page 2-4">
 53 |         <NavLink label="Page 2" />
 54 |         <NavLink label="Page 3" />
 55 |         <NavLink label="Page 4" />
 56 |       </NavGroup>
 57 |       <NavLink label="Page 5" />
 58 |       <NavLink label="Page Other" />
 59 |     </NavGroup>
 60 |   </HStack>
 61 | </App>
 62 | ```
 63 | 
 64 | ### Custom Icons
 65 | 
 66 | You can also provide custom icons for a specific NavGroup component via it's respective property:
 67 | 
 68 | - [iconHorizontalCollapsed](#iconHorizontalCollapsed)
 69 | - [iconHorizontalExpanded](#iconHorizontalExpanded)
 70 | - [iconVerticalCollapsed](#iconVerticalCollapsed)
 71 | - [iconVerticalExpanded](#iconVerticalExpanded)
 72 | 
 73 | See the following for an example of all variants:
 74 | 
 75 | ```xmlui-pg copy display name="Example: custom icons in horizontal layout" height="250px"
 76 | <App layout="horizontal">
 77 |   <NavGroup icon="email" label="Send To"
 78 |     iconVerticalExpanded="arrowup" iconVerticalCollapsed="arrowbottom">
 79 |     <NavLink icon="arrowup" label="Boss" />
 80 |     <NavGroup icon="users" label="Team"
 81 |       iconHorizontalExpanded="arrowleft" iconHorizontalCollapsed="arrowright">
 82 |       <NavLink label="Jane" />
 83 |       <NavLink label="Will" />
 84 |     </NavGroup>
 85 |     <NavLink icon="cube" label="Support" />
 86 |   </NavGroup>
 87 | </App>
 88 | ```
 89 | 
 90 | %-DESC-END
 91 | 
 92 | %-PROP-START icon
 93 | 
 94 | Look at this example:
 95 | 
 96 | ```xmlui-pg copy {3, 5} display name="Example: label and icon" height="280px"
 97 | <App>
 98 |   <HStack verticalAlignment="center">
 99 |     <NavGroup icon="email" label="Send To" >
100 |       <NavLink icon="arrowup" label="Boss" />
101 |       <NavGroup icon="users" label="Team">
102 |         <NavLink label="Jane" />
103 |         <NavLink label="Will" />
104 |         <NavLink label="Sandra" />
105 |       </NavGroup>
106 |       <NavLink icon="cube" label="Support" />
107 |     </NavGroup>
108 |   </HStack>
109 | </App>
110 | ```
111 | 
112 | %-PROP-END
113 | 
114 | %-PROP-START iconHorizontalCollapsed
115 | 
116 | For an example, see the [Custom Icons section](#custom-icons).
117 | 
118 | %-PROP-END
119 | 
120 | %-PROP-START iconHorizontalExpanded
121 | 
122 | For an example, see the [Custom Icons section](#custom-icons).
123 | 
124 | %-PROP-END
125 | 
126 | %-PROP-START iconVerticalCollapsed
127 | 
128 | For an example, see the [Custom Icons section](#custom-icons).
129 | 
130 | %-PROP-END
131 | 
132 | %-PROP-START iconVerticalExpanded
133 | 
134 | For an example, see the [Custom Icons section](#custom-icons).
135 | 
136 | %-PROP-END
137 | 
138 | %-PROP-START label
139 | 
140 | This property sets the text displayed as the name of the `NavGroup`.
141 | 
142 | For an example, see the [section on the icon property](#icon).
143 | 
144 | %-PROP-END
145 | 
```

--------------------------------------------------------------------------------
/xmlui/tests/parsers/style-parser/parser.test.ts:
--------------------------------------------------------------------------------

```typescript
  1 | import { describe, expect, it, assert } from "vitest";
  2 | import { StyleParser } from "../../../src/parsers/style-parser/StyleParser";
  3 | 
  4 | describe("Style parser", () => {
  5 |   const sizeCases = [
  6 |     { src: "0", val: 0, unit: "" },
  7 |     { src: "0px", val: 0, unit: "px" },
  8 |     { src: "0cm", val: 0, unit: "cm" },
  9 |     { src: "0mm", val: 0, unit: "mm" },
 10 |     { src: "0in", val: 0, unit: "in" },
 11 |     { src: "0pt", val: 0, unit: "pt" },
 12 |     { src: "0pc", val: 0, unit: "pc" },
 13 |     { src: "0em", val: 0, unit: "em" },
 14 |     { src: "0rem", val: 0, unit: "rem" },
 15 |     { src: "0vw", val: 0, unit: "vw" },
 16 |     { src: "0vh", val: 0, unit: "vh" },
 17 |     { src: "0ex", val: 0, unit: "ex" },
 18 |     { src: "0ch", val: 0, unit: "ch" },
 19 |     { src: "0vmin", val: 0, unit: "vmin" },
 20 |     { src: "0vmax", val: 0, unit: "vmax" },
 21 |     { src: "0%", val: 0, unit: "%" },
 22 |     { src: "123px", val: 123, unit: "px" },
 23 |     { src: "123cm", val: 123, unit: "cm" },
 24 |     { src: "123.5mm", val: 123.5, unit: "mm" },
 25 |     { src: "123.5in", val: 123.5, unit: "in" },
 26 |     { src: "234.5pt", val: 234.5, unit: "pt" },
 27 |     { src: "-12.5pc", val: -12.5, unit: "pc" },
 28 |     { src: "-123.5em", val: -123.5, unit: "em" },
 29 |     { src: "45rem", val: 45, unit: "rem" },
 30 |     { src: "55vw", val: 55, unit: "vw" },
 31 |     { src: "678vh", val: 678, unit: "vh" },
 32 |     { src: "1ex", val: 1, unit: "ex" },
 33 |     { src: "3ch", val: 3, unit: "ch" },
 34 |     { src: "4vmin", val: 4, unit: "vmin" },
 35 |     { src: "-12.5vmax", val: -12.5, unit: "vmax" },
 36 |     { src: "66%", val: 66, unit: "%" },
 37 |   ];
 38 | 
 39 |   sizeCases.forEach((s) =>
 40 |     it(`parseSize '${s.src}'`, () => {
 41 |       // --- Arrange
 42 |       const sp = new StyleParser(s.src);
 43 | 
 44 |       // --- Act
 45 |       const size = sp.parseSize()!;
 46 | 
 47 |       // --- Assert
 48 |       expect(size.value).equal(s.val);
 49 |       expect(size.unit).equal(s.unit);
 50 |     })
 51 |   );
 52 | 
 53 |   const sizeErrorCases = ["12left", "12wavy"];
 54 | 
 55 |   sizeErrorCases.forEach((s) =>
 56 |     it(`parseSize '${s}'`, () => {
 57 |       // --- Arrange
 58 |       const sp = new StyleParser(s);
 59 | 
 60 |       // --- Act
 61 |       try {
 62 |         sp.parseSize();
 63 |       } catch (err: any) {
 64 |         expect(err.toString()).contains("Unexpected");
 65 |         return;
 66 |       }
 67 |       assert.fail("Exception expected");
 68 |     })
 69 |   );
 70 | 
 71 |   const borderCases = [
 72 |     { src: "0", wv: 0, wu: "", cv: undefined, sv: undefined },
 73 |     { src: "1px", wv: 1, wu: "px", cv: undefined, sv: undefined },
 74 |     { src: "dotted", wv: undefined, wu: undefined, cv: undefined, sv: "dotted" },
 75 |     { src: "blue", wv: undefined, wu: undefined, cv: "blue", sv: undefined },
 76 |     { src: "1px dotted", wv: 1, wu: "px", cv: undefined, sv: "dotted" },
 77 |     { src: "dotted 1px", wv: 1, wu: "px", cv: undefined, sv: "dotted" },
 78 |     { src: "1px blue", wv: 1, wu: "px", cv: "blue", sv: undefined },
 79 |     { src: "blue 1px", wv: 1, wu: "px", cv: "blue", sv: undefined },
 80 |     { src: "dotted blue", wv: undefined, wu: undefined, cv: "blue", sv: "dotted" },
 81 |     { src: "blue dotted", wv: undefined, wu: undefined, cv: "blue", sv: "dotted" },
 82 |     { src: "1px dotted blue", wv: 1, wu: "px", cv: "blue", sv: "dotted" },
 83 |     { src: "1px blue dotted", wv: 1, wu: "px", cv: "blue", sv: "dotted" },
 84 |     { src: "dotted 1px blue", wv: 1, wu: "px", cv: "blue", sv: "dotted" },
 85 |     { src: "dotted blue 1px", wv: 1, wu: "px", cv: "blue", sv: "dotted" },
 86 |     { src: "blue dotted 1px", wv: 1, wu: "px", cv: "blue", sv: "dotted" },
 87 |     { src: "blue 1px dotted", wv: 1, wu: "px", cv: "blue", sv: "dotted" },
 88 |   ];
 89 | 
 90 |   borderCases.forEach((c) =>
 91 |     it(`parseBorder ${c.src}`, () => {
 92 |       // --- Arrange
 93 |       const sp = new StyleParser(c.src);
 94 | 
 95 |       // --- Act
 96 |       const b = sp.parseBorder()!;
 97 | 
 98 |       // --- Assert
 99 |       expect(b.widthValue).equal(c.wv);
100 |       expect(b.widthUnit).equal(c.wu);
101 |       expect(b.styleValue).equal(c.sv);
102 |       expect(b.color).equal(c.cv);
103 |     })
104 |   );
105 | 
106 |   const borderErrorCases = ["start"];
107 | 
108 |   borderErrorCases.forEach((s) =>
109 |     it(`parseBorder error '${s}'`, () => {
110 |       // --- Arrange
111 |       const sp = new StyleParser(s);
112 | 
113 |       // --- Act
114 |       try {
115 |         sp.parseBorder();
116 |       } catch (err: any) {
117 |         expect(err.toString()).contains("Unexpected");
118 |         return;
119 |       }
120 |       assert.fail("Exception expected");
121 |     })
122 |   );
123 | });
124 | 
```

--------------------------------------------------------------------------------
/xmlui/tests/components-core/scripts-runner/eval-tree-arrow-async.test.ts:
--------------------------------------------------------------------------------

```typescript
  1 | import { describe, expect, it } from "vitest";
  2 | 
  3 | import { evalBindingAsync } from "../../../src/components-core/script-runner/eval-tree-async";
  4 | import { Parser } from "../../../src/parsers/scripting/Parser";
  5 | import {createEvalContext} from "./test-helpers";
  6 | 
  7 | describe("Evaluate arrow expressions (epx)", () => {
  8 |   it("Arrow #1", async () => {
  9 |     // --- Arrange
 10 |     const source = "(x => 2 * x)(4)";
 11 |     const context = createEvalContext({});
 12 | 
 13 |     // --- Act
 14 |     const value = await evalAsync(source, context);
 15 | 
 16 |     // --- Arrange
 17 |     expect(value).equal(8);
 18 |   });
 19 | 
 20 |   it("Arrow #2", async () => {
 21 |     // --- Arrange
 22 |     const source = "((x, y) => x + y)(1, 2)";
 23 |     const context = createEvalContext({});
 24 | 
 25 |     // --- Act
 26 |     const value = await evalAsync(source, context);
 27 | 
 28 |     // --- Arrange
 29 |     expect(value).equal(3);
 30 |   });
 31 | 
 32 |   it("Arrow #3", async () => {
 33 |     // --- Arrange
 34 |     const source = "((x, y) => { return x + y })(1, 2)";
 35 |     const context = createEvalContext({});
 36 | 
 37 |     // --- Act
 38 |     const value = await evalAsync(source, context);
 39 | 
 40 |     // --- Arrange
 41 |     expect(value).equal(3);
 42 |   });
 43 | 
 44 |   it("Arrow #4", async () => {
 45 |     // --- Arrange
 46 |     const source = "(x => (++x.h))(count)";
 47 |     const context = createEvalContext({
 48 |       localContext: {
 49 |         count: { h: 3 }
 50 |       }
 51 |     });
 52 | 
 53 |     // --- Act
 54 |     const value = await evalAsync(source, context);
 55 | 
 56 |     // --- Arrange
 57 |     expect(value).equal(4);
 58 |   });
 59 | 
 60 |   it("Arrow #5", async () => {
 61 |     // --- Arrange
 62 |     const source = "(x => x += 2)(count)";
 63 |     const context = createEvalContext({
 64 |       localContext: {
 65 |         count: 3
 66 |       }
 67 |     });
 68 | 
 69 |     // --- Act
 70 |     const value = await evalAsync(source, context);
 71 | 
 72 |     // --- Arrange
 73 |     expect(value).equal(5);
 74 |   });
 75 | 
 76 |   it("Arrow #6", async () => {
 77 |     // --- Arrange
 78 |     const source = "(x => x += 2)(count + 4)";
 79 |     const context = createEvalContext({
 80 |       localContext: {
 81 |         count: 3
 82 |       }
 83 |     });
 84 | 
 85 |     // --- Act
 86 |     const value = await evalAsync(source, context);
 87 | 
 88 |     // --- Arrange
 89 |     expect(value).equal(9);
 90 |   });
 91 | 
 92 |   it("Arrow #7", async () => {
 93 |     // --- Arrange
 94 |     const source = "[1,2,3,4,5].filter(x => x % 2 === 0)[1]";
 95 |     const context = createEvalContext({
 96 |       localContext: {
 97 |         count: 3
 98 |       }
 99 |     });
100 | 
101 |     // --- Act
102 |     const value = await evalAsync(source, context);
103 | 
104 |     // --- Arrange
105 |     expect(value).equal(4);
106 |   });
107 | 
108 |   it("Arrow #8", async () => {
109 |     // --- Arrange
110 |     const source = "containsArray.array.filter(item => item % 2 === 0)[1]";
111 |     const context = createEvalContext({
112 |       localContext: {
113 |         containsArray: {
114 |           array: [5, 4, 3, 2, 1]
115 |         }
116 |       }
117 |     });
118 | 
119 |     // --- Act
120 |     const value = await evalAsync(source, context);
121 | 
122 |     // --- Arrange
123 |     expect(value).equal(2);
124 |   });
125 | 
126 |   it("Arrow #9", async () => {
127 |     // --- Arrange
128 |     const source = "array.reduce((acc, item) => acc + item, 0)";
129 |     const context = createEvalContext({
130 |       localContext: {
131 |         array: [5, 4, 3, 2, 1]
132 |       }
133 |     });
134 | 
135 |     // --- Act
136 |     const value = await evalAsync(source, context);
137 | 
138 |     // --- Arrange
139 |     expect(value).equal(15);
140 |   });
141 | 
142 |   it("Arrow with rest #1", async () => {
143 |     // --- Arrange
144 |     const source = "((...a) => a[0] + a[1])(1, 2)";
145 |     const context = createEvalContext({});
146 | 
147 |     // --- Act
148 |     const value = await evalAsync(source, context);
149 | 
150 |     // --- Arrange
151 |     expect(value).equal(3);
152 |   });
153 | 
154 |   it("Arrow with rest #2", async () => {
155 |     // --- Arrange
156 |     const source = "((x, ...a) => x + a[0] + a[1])(1, 2, 3)";
157 |     const context = createEvalContext({});
158 | 
159 |     // --- Act
160 |     const value = await evalAsync(source, context);
161 | 
162 |     // --- Arrange
163 |     expect(value).equal(6);
164 |   });
165 | });
166 | 
167 | 
168 | async function evalAsync(source: string, evalContext: any): Promise<any> {
169 |   const wParser = new Parser(source);
170 |   const tree = wParser.parseExpr();
171 |   if (tree === null) {
172 |     // --- This should happen only when an expression is empty
173 |     return undefined;
174 |   }
175 | 
176 |   // --- Check for expression termination
177 |   if (!wParser.isEof) {
178 |     throw new Error("Expression is not terminated properly");
179 |   }
180 | 
181 |   // --- Ok, valid source, evaluate
182 |   return await evalBindingAsync(tree, evalContext, undefined);
183 | } 
```

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

```typescript
  1 | import { useEffect, useId, useMemo, useReducer, useRef, useState } from "react";
  2 | import {
  3 |   appDescriptionInitialized,
  4 |   contentChanged,
  5 |   optionsInitialized,
  6 |   PlaygroundContext,
  7 |   playgroundReducer,
  8 | } from "../state/store";
  9 | import { decompressData, INITIAL_PLAYGROUND_STATE } from "../utils/helpers";
 10 | import { ToastProvider } from "../providers/ToastProvider";
 11 | import styles from "./StandalonePlaygroundNative.module.scss";
 12 | import { useToast } from "../hooks/useToast";
 13 | import { ErrorBoundary, useThemes } from "xmlui";
 14 | import { Header } from "./Header";
 15 | import { PlaygroundContent } from "./PlaygroundContent";
 16 | import { Theme } from "../themes/theme";
 17 | 
 18 | export const StandalonePlayground = () => {
 19 |   const { showToast } = useToast();
 20 |   const id = useId();
 21 |   const [loading, setLoading] = useState(true);
 22 |   const { setActiveThemeTone } = useThemes();
 23 |   const [playgroundState, dispatch] = useReducer(playgroundReducer, INITIAL_PLAYGROUND_STATE);
 24 |   const initialized = useRef(false);
 25 | 
 26 |   const queryParams = useMemo(() => {
 27 |     if (typeof window !== "undefined") {
 28 |       return Object.fromEntries(new URLSearchParams("?app=" + window.location.hash.split("#")[2]));
 29 |     }
 30 |     return {};
 31 |   }, []);
 32 | 
 33 |   useEffect(() => {
 34 |     const getApp = async () => {
 35 |       try {
 36 |         const data = JSON.parse(await decompressData(queryParams.app as string));
 37 |         dispatch(appDescriptionInitialized(data.standalone));
 38 |         dispatch(
 39 |           optionsInitialized({
 40 |             ...playgroundState.options,
 41 |             ...data.options,
 42 |             content: "app",
 43 |             orientation: "horizontal",
 44 |           }),
 45 |         );
 46 |         setActiveThemeTone(data.options.activeTone || "light");
 47 |         dispatch(contentChanged(data.options.content));
 48 |       } catch (e) {
 49 |         showToast({
 50 |           type: "error",
 51 |           title: "Error",
 52 |           description: "The app could not be loaded",
 53 |         });
 54 |       }
 55 |       setLoading(false);
 56 |       initialized.current = true;
 57 |     };
 58 | 
 59 |     if (initialized.current) {
 60 |       return;
 61 |     } else {
 62 |       if (queryParams.app && queryParams.app !== "undefined") {
 63 |         getApp();
 64 |       } else {
 65 |         dispatch(
 66 |           appDescriptionInitialized({
 67 |             config: {
 68 |               name: "Hello World",
 69 |               description: "",
 70 |               appGlobals: {},
 71 |               resources: {},
 72 |               themes: [Theme],
 73 |             },
 74 |             components: [],
 75 |             app: "<App>Hello World!</App>",
 76 |           }),
 77 |         );
 78 |         dispatch(
 79 |           optionsInitialized({
 80 |             activeTheme: "theme",
 81 |             activeTone: "light",
 82 |             content: "app",
 83 |             orientation: "horizontal",
 84 |             id: 0,
 85 |             allowStandalone: true,
 86 |             language: "xmlui",
 87 |             emulatedApi: undefined,
 88 |             fixedTheme: false,
 89 |           }),
 90 |         );
 91 |         setLoading(false);
 92 |         initialized.current = true;
 93 |       }
 94 |     }
 95 |   }, [queryParams.app, showToast, setActiveThemeTone, playgroundState.options]);
 96 | 
 97 |   const playgroundContextValue = useMemo(() => {
 98 |     return {
 99 |       editorStatus: playgroundState.editorStatus,
100 |       status: playgroundState.status,
101 |       options: playgroundState.options,
102 |       text: playgroundState.text,
103 |       originalAppDescription: playgroundState.originalAppDescription,
104 |       appDescription: playgroundState.appDescription,
105 |       dispatch,
106 |       playgroundId: id,
107 |       error: playgroundState.error,
108 |     };
109 |   }, [
110 |     playgroundState.editorStatus,
111 |     playgroundState.status,
112 |     playgroundState.options,
113 |     playgroundState.text,
114 |     playgroundState.originalAppDescription,
115 |     playgroundState.appDescription,
116 |     id,
117 |     playgroundState.error,
118 |   ]);
119 | 
120 |   return (
121 |     <ToastProvider>
122 |       <PlaygroundContext.Provider value={playgroundContextValue}>
123 |         <ErrorBoundary>
124 |           {!loading && (
125 |             <div className={styles.standalonePlayground}>
126 |               {!playgroundState.options.previewMode && <Header standalone={true} />}
127 |               <div style={{ flexGrow: 1, overflow: "auto" }}>
128 |                 <PlaygroundContent standalone={true} />
129 |               </div>
130 |             </div>
131 |           )}
132 |         </ErrorBoundary>
133 |       </PlaygroundContext.Provider>
134 |     </ToastProvider>
135 |   );
136 | };
137 | 
```

--------------------------------------------------------------------------------
/tools/create-xmlui-hello-world/index.js:
--------------------------------------------------------------------------------

```javascript
  1 | #!/usr/bin/env node
  2 | 
  3 | const fs = require('fs');
  4 | const path = require('path');
  5 | const { execSync } = require('child_process');
  6 | 
  7 | console.log('Creating minimal XMLUI test app for HelloWorld component...\n');
  8 | 
  9 | // Get project name from command line or use default
 10 | const projectName = process.argv[2] || 'test-hello-world';
 11 | const projectPath = path.resolve(process.argv[2] ? process.argv[2] : path.join(process.env.HOME || process.env.USERPROFILE, projectName));
 12 | 
 13 | // Create project directory
 14 | if (!fs.existsSync(projectPath)) {
 15 |   fs.mkdirSync(projectPath, { recursive: true });
 16 |   fs.mkdirSync(path.join(projectPath, 'xmlui'), { recursive: true });
 17 | } else {
 18 |   console.log(`Directory ${projectPath} already exists!`);
 19 |   process.exit(1);
 20 | }
 21 | 
 22 | // Check if we need to build the standalone XMLUI engine
 23 | const xmluiStandalonePath = path.join(__dirname, '../../xmlui/dist/standalone/xmlui-standalone.umd.js');
 24 | const docsStandalonePath = path.join(__dirname, '../../docs/public/resources/files/for-download/xmlui/xmlui-standalone.umd.js');
 25 | 
 26 | let standaloneSource = null;
 27 | 
 28 | if (fs.existsSync(docsStandalonePath)) {
 29 |   standaloneSource = docsStandalonePath;
 30 |   console.log('Using existing XMLUI standalone from docs...');
 31 | } else if (fs.existsSync(xmluiStandalonePath)) {
 32 |   standaloneSource = xmluiStandalonePath;
 33 |   console.log('Using existing XMLUI standalone from build...');
 34 | } else {
 35 |   console.log('Building XMLUI standalone engine...');
 36 |   try {
 37 |     execSync('npm run build:xmlui-standalone', {
 38 |       cwd: path.join(__dirname, '../../xmlui'),
 39 |       stdio: 'inherit'
 40 |     });
 41 |     standaloneSource = xmluiStandalonePath;
 42 |     console.log('XMLUI standalone built successfully!');
 43 |   } catch (error) {
 44 |     console.log('Failed to build XMLUI standalone. Please run: cd xmlui && npm run build:xmlui-standalone');
 45 |     process.exit(1);
 46 |   }
 47 | }
 48 | 
 49 | // Copy the standalone XMLUI engine
 50 | const xmluiLatestPath = path.join(projectPath, 'xmlui/xmlui-latest.js');
 51 | fs.copyFileSync(standaloneSource, xmluiLatestPath);
 52 | console.log('Copied XMLUI engine to xmlui/xmlui-latest.js');
 53 | 
 54 | // Check if HelloWorld extension exists and copy it
 55 | const helloWorldSource = path.join(__dirname, '../../packages/xmlui-hello-world/dist/xmlui-hello-world.js');
 56 | const xmluiHelloWorldPath = path.join(projectPath, 'xmlui/xmlui-hello-world.js');
 57 | 
 58 | if (fs.existsSync(helloWorldSource)) {
 59 |   fs.copyFileSync(helloWorldSource, xmluiHelloWorldPath);
 60 |   console.log('Copied HelloWorld extension to xmlui/xmlui-hello-world.js');
 61 | } else {
 62 |   console.log('HelloWorld extension not found. You may need to build it first:');
 63 |   console.log('   cd packages/xmlui-hello-world && npm run build:extension');
 64 |   // Create a placeholder file
 65 |   fs.writeFileSync(xmluiHelloWorldPath, '// HelloWorld extension not found - please build it first\n');
 66 | }
 67 | 
 68 | // Main.xmlui
 69 | const mainXmlui = `<App xmlns:Extensions="component-ns:XMLUIExtensions">
 70 |   <VStack gap="2rem" padding="2rem">
 71 |     <Heading>HelloWorld Component Test</Heading>
 72 |     <Extensions:HelloWorld message="Hello from XMLUI!" />
 73 |   </VStack>
 74 | </App>`;
 75 | 
 76 | // index.html
 77 | const indexHtml = `<!DOCTYPE html>
 78 | <html lang="en">
 79 | <head>
 80 |   <meta charset="UTF-8" />
 81 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 82 |   <title>HelloWorld Extension Test</title>
 83 |   <script src="xmlui/xmlui-latest.js"></script>
 84 |   <script src="xmlui/xmlui-hello-world.js"></script>
 85 | </head>
 86 | <body>
 87 | </body>
 88 | </html>`;
 89 | 
 90 | // Write files
 91 | fs.writeFileSync(path.join(projectPath, 'Main.xmlui'), mainXmlui);
 92 | fs.writeFileSync(path.join(projectPath, 'index.html'), indexHtml);
 93 | 
 94 | console.log(`\n Created minimal XMLUI test app at: ${projectPath}`);
 95 | console.log(` Project structure:`);
 96 | console.log(`   ${path.basename(projectPath)}/`);
 97 | console.log(`   ├── Main.xmlui`);
 98 | console.log(`   ├── index.html`);
 99 | console.log(`   └── xmlui/`);
100 | console.log(`       ├── xmlui-latest.js`);
101 | console.log(`       └── xmlui-hello-world.js`);
102 | 
103 | console.log(`\n To run the test app:`);
104 | console.log(`   cd ${projectPath}`);
105 | console.log(`   python3 -m http.server`);
106 | console.log(`   # Or`);
107 | console.log(`   npx serve`);
108 | 
109 | if (!fs.existsSync(helloWorldSource)) {
110 |   console.log(`\n  Note: HelloWorld extension needs to be built first. Run:`);
111 |   console.log(`   cd packages/xmlui-hello-world && npm run build:extension`);
112 | }
113 | 
```

