This is page 15 of 189. Use http://codebase.md/xmlui-org/xmlui/assets/img/%7BextractResourceUrl(node.props.src)%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
│   ├── fancy-laws-drop.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/tests/parsers/xmlui/transform.attr.test.ts:
--------------------------------------------------------------------------------

```typescript
 1 | import { describe, expect, it, assert } from "vitest";
 2 | import type { ComponentDef } from "../../../src/abstractions/ComponentDefs";
 3 | import type { ButtonMd } from "../../../src/components/Button/Button";
 4 | import { transformSource } from "./xmlui";
 5 | import type { StackMd } from "../../../src/components/Stack/Stack";
 6 | 
 7 | describe("Xmlui transform - attributes", () => {
 8 |   it("Invalid attribute name fails #1", () => {
 9 |     try {
10 |       transformSource("<Stack prop.sub.sub='a' />");
11 |       assert.fail("Exception expected");
12 |     } catch (err) {
13 |       expect(err.toString().includes("T007")).equal(true);
14 |     }
15 |   });
16 | 
17 |   it("Invalid attribute name fails #2", () => {
18 |     try {
19 |       transformSource("<Stack prop.='a' />");
20 |       assert.fail("Exception expected");
21 |     } catch (err) {
22 |       expect(err.toString().includes("T007")).equal(true);
23 |     }
24 |   });
25 | 
26 |   it("Invalid attribute name fails #3", () => {
27 |     try {
28 |       transformSource("<Component name='MyStack' invaAttr='a'><Stack /></Component>");
29 |       assert.fail("Exception expected");
30 |     } catch (err) {
31 |       expect(err.toString().includes("T021")).equal(true);
32 |     }
33 |   });
34 | 
35 |   it("Invalid attribute name fails #4", () => {
36 |     try {
37 |       transformSource("<Component invaAttr='a' name='MyStack'><Stack /></Component>");
38 |       assert.fail("Exception expected");
39 |     } catch (err) {
40 |       expect(err.toString().includes("T021")).equal(true);
41 |     }
42 |   });
43 | 
44 |   it("key-only attr is true", () => {
45 |     const cd = transformSource("<Button enabled />") as ComponentDef<typeof ButtonMd>;
46 |     expect(cd.props.enabled).equal("true");
47 |   });
48 | 
49 |   it("uid works", () => {
50 |     const cd = transformSource("<Stack id='myStack' />") as ComponentDef<typeof StackMd>;
51 |     expect(cd.type).equal("Stack");
52 |     expect(cd.uid).equal("myStack");
53 |   });
54 | 
55 |   it("testId works", () => {
56 |     const cd = transformSource("<Stack testId='myStack' />") as ComponentDef<typeof StackMd>;
57 |     expect(cd.type).equal("Stack");
58 |     expect(cd.testId).equal("myStack");
59 |   });
60 | 
61 |   it("when works", () => {
62 |     const cd = transformSource("<Stack when='isOpen' />") as ComponentDef<typeof StackMd>;
63 |     expect(cd.type).equal("Stack");
64 |     expect(cd.props ?? {}).not.toHaveProperty("when");
65 |     expect(cd.when).equal("isOpen");
66 |   });
67 | 
68 |   it("uses works with 1 value", () => {
69 |     const cd = transformSource("<Stack uses='isOpen' />") as ComponentDef<typeof StackMd>;
70 |     expect(cd.type).equal("Stack");
71 |     expect(cd.props ?? {}).not.toHaveProperty("uses");
72 |     expect(cd.uses).deep.equal(["isOpen"]);
73 |   });
74 | 
75 |   it("uses works with multiple values", () => {
76 |     const cd = transformSource("<Stack uses='isOpen, isClosed' />") as ComponentDef<typeof StackMd>;
77 |     expect(cd.type).equal("Stack");
78 |     expect(cd.props ?? {}).not.toHaveProperty("uses");
79 |     expect(cd.uses).deep.equal(["isOpen", "isClosed"]);
80 |   });
81 | });
82 | 
```

--------------------------------------------------------------------------------
/packages/xmlui-website-blocks/src/ScrollToTop/ScrollToTop.tsx:
--------------------------------------------------------------------------------

```typescript
 1 | import styles from "./ScrollToTop.module.scss";
 2 | 
 3 | import { createComponentRenderer, createMetadata, d, parseScssVar } from "xmlui";
 4 | import * as ScrollToTopNative from "./ScrollToTopNative";
 5 | 
 6 | const COMP = "ScrollToTop";
 7 | const { ScrollToTop, defaultProps } = ScrollToTopNative;
 8 | 
 9 | export const ScrollToTopMd = createMetadata({
10 |   status: "experimental",
11 |   description: "A floating button that scrolls the page to the top when clicked",
12 |   parts: {
13 |     icon: {
14 |       description: "The icon displayed inside the scroll to top button",
15 |     }
16 |   },
17 |   props: {
18 |     position: {
19 |       description: "Horizontal position of the button at the bottom of the screen",
20 |       type: "string",
21 |       defaultValue: defaultProps.position,
22 |       options: ["start", "center", "end"],
23 |     },
24 |     visible: {
25 |       description: "Whether the button is visible",
26 |       type: "boolean",
27 |       defaultValue: defaultProps.visible,
28 |     },
29 |     threshold: {
30 |       description: "Scroll position threshold (in pixels) after which the button becomes visible",
31 |       type: "number",
32 |       defaultValue: defaultProps.threshold,
33 |     },
34 |     icon: {
35 |       description: "Name of the icon to display in the button",
36 |       type: "string",
37 |       defaultValue: defaultProps.icon,
38 |     },
39 |     behavior: {
40 |       description: "Scroll behavior when scrolling to top",
41 |       type: "string",
42 |       defaultValue: defaultProps.behavior,
43 |       options: ["smooth", "instant", "auto"],
44 |     },
45 |   },
46 |   events: {
47 |     click: d("Triggered when the scroll to top button is clicked"),
48 |   },
49 |   themeVars: parseScssVar(styles.themeVars),
50 |   defaultThemeVars: {
51 |     [`backgroundColor-${COMP}`]: "$color-primary",
52 |     [`borderColor-${COMP}`]: "$color-primary-dark",
53 |     [`color-${COMP}`]: "$color-surface-0",
54 |     [`size-${COMP}`]: "48px",
55 |     [`borderRadius-${COMP}`]: "$space-24",
56 |     [`shadow-${COMP}`]: "$shadow-lg",
57 |     [`bottom-${COMP}`]: "$space-16",
58 |     [`horizontalSpacing-${COMP}`]: "$space-16",
59 |     [`zIndex-${COMP}`]: "1000",
60 |   },
61 | });
62 | 
63 | export const scrollToTopComponentRenderer = createComponentRenderer(
64 |   COMP,
65 |   ScrollToTopMd,
66 |   ({ node, extractValue, className, lookupEventHandler }) => {
67 |     const props = (node.props as typeof ScrollToTopMd.props)!;
68 |     
69 |     return (
70 |       <ScrollToTop
71 |         className={className}
72 |         position={extractValue.asOptionalString(props.position, defaultProps.position)}
73 |         visible={extractValue.asOptionalBoolean(props.visible, defaultProps.visible)}
74 |         threshold={extractValue.asOptionalNumber(props.threshold, defaultProps.threshold)}
75 |         icon={extractValue.asOptionalString(props.icon, defaultProps.icon)}
76 |         behavior={extractValue.asOptionalString(props.behavior, defaultProps.behavior) as "smooth" | "instant" | "auto"}
77 |         onClick={lookupEventHandler("click")} // This is not an error.
78 |       />
79 |     );
80 |   },
81 | );
82 | 
```

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

```typescript
  1 | import { describe, expect, it } from "vitest";
  2 | 
  3 | import { Parser } from "../../../src/parsers/scripting/Parser";
  4 | import {
  5 |   Identifier,
  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 - primary expressions", () => {
 18 |   it("null", () => {
 19 |     // --- Arrange
 20 |     const wParser = new Parser("null");
 21 | 
 22 |     // --- Act
 23 |     const expr = wParser.parseExpr();
 24 | 
 25 |     // --- Assert
 26 |     expect(expr).not.equal(null);
 27 |     if (!expr) return;
 28 |     expect(expr.type).equal(T_LITERAL);
 29 |   });
 30 | 
 31 |   it("undefined", () => {
 32 |     // --- Arrange
 33 |     const wParser = new Parser("undefined");
 34 | 
 35 |     // --- Act
 36 |     const expr = wParser.parseExpr();
 37 | 
 38 |     // --- Assert
 39 |     expect(expr).not.equal(null);
 40 |     if (!expr) return;
 41 |     expect(expr.type).equal(T_LITERAL);
 42 |   });
 43 | 
 44 |   const identifierCases = [
 45 |     { src: "$id", exp: "$id" },
 46 |     { src: "ident", exp: "ident" },
 47 |     { src: "_alma$123", exp: "_alma$123" },
 48 |   ];
 49 | 
 50 |   identifierCases.forEach((c) => {
 51 |     it(`Identifier: ${c.src}`, () => {
 52 |       // --- Arrange
 53 |       const wParser = new Parser(c.src);
 54 | 
 55 |       // --- Act
 56 |       const expr = wParser.parseExpr();
 57 | 
 58 |       // --- Assert
 59 |       expect(expr).not.equal(null);
 60 |       if (!expr) return;
 61 |       expect(expr.type).equal(T_IDENTIFIER);
 62 |       const literal = expr as Identifier;
 63 |       expect(literal.name).equal(c.exp);
 64 |     });
 65 |   });
 66 | 
 67 |   const parenthesizedCases = [
 68 |     { src: "(123)", exp: T_LITERAL },
 69 |     { src: "(a+b)", exp: T_BINARY_EXPRESSION },
 70 |     { src: "(a ? b : c)", exp: T_CONDITIONAL_EXPRESSION },
 71 |     { src: "(!a)", exp: T_UNARY_EXPRESSION },
 72 |     { src: "(a)", exp: T_IDENTIFIER },
 73 |     { src: "(a, b)", exp: T_SEQUENCE_EXPRESSION },
 74 |     { src: "(c(a, b))", exp: T_FUNCTION_INVOCATION_EXPRESSION },
 75 |     { src: "(a.b)", exp: T_MEMBER_ACCESS_EXPRESSION },
 76 |     { src: "(a[b])", exp: T_CALCULATED_MEMBER_ACCESS_EXPRESSION },
 77 |   ];
 78 |   parenthesizedCases.forEach((c) => {
 79 |     it(`Parenthesized expression: ${c.src}`, () => {
 80 |       // --- Arrange
 81 |       const wParser = new Parser(c.src);
 82 | 
 83 |       // --- Act
 84 |       const expr = wParser.parseExpr();
 85 | 
 86 |       // --- Assert
 87 |       expect(expr).not.equal(null);
 88 |       if (!expr) return;
 89 |       expect(expr.type).equal(c.exp);
 90 |       expect(expr.parenthesized).equal(1);
 91 |     });
 92 |   });
 93 | 
 94 |   it(`Parenthesized expression`, () => {
 95 |     // --- Arrange
 96 |     const wParser = new Parser("(c(a, b))");
 97 | 
 98 |     // --- Act
 99 |     const expr = wParser.parseExpr();
100 | 
101 |     // --- Assert
102 |     expect(expr).not.equal(null);
103 |     if (!expr) return;
104 |     expect(expr.type).equal(T_FUNCTION_INVOCATION_EXPRESSION);
105 |     expect(expr.parenthesized).equal(1);
106 |   });
107 | });
108 | 
```

--------------------------------------------------------------------------------
/xmlui/src/components/ContentSeparator/ContentSeparator.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 | $backgroundColor-ContentSeparator: createThemeVar("backgroundColor-ContentSeparator");
11 | $size-ContentSeparator: createThemeVar("size-ContentSeparator");
12 | $marginTop-ContentSeparator: createThemeVar("marginTop-ContentSeparator");
13 | $marginBottom-ContentSeparator: createThemeVar("marginBottom-ContentSeparator");
14 | $marginVertical-ContentSeparator: createThemeVar("marginVertical-ContentSeparator");
15 | $marginLeft-ContentSeparator: createThemeVar("marginLeft-ContentSeparator");
16 | $marginRight-ContentSeparator: createThemeVar("marginRight-ContentSeparator");
17 | $marginHorizontal-ContentSeparator: createThemeVar("marginHorizontal-ContentSeparator");
18 | $paddingTop-ContentSeparator: createThemeVar("paddingTop-ContentSeparator");
19 | $paddingBottom-ContentSeparator: createThemeVar("paddingBottom-ContentSeparator");
20 | $paddingVertical-ContentSeparator: createThemeVar("paddingVertical-ContentSeparator");
21 | $paddingLeft-ContentSeparator: createThemeVar("paddingLeft-ContentSeparator");
22 | $paddingRight-ContentSeparator: createThemeVar("paddingRight-ContentSeparator");
23 | $paddingHorizontal-ContentSeparator: createThemeVar("paddingHorizontal-ContentSeparator");
24 | 
25 | @layer components {
26 |   .separator {
27 |     box-sizing: border-box;
28 |     background-color: $backgroundColor-ContentSeparator;
29 |     background-clip: content-box;
30 |     margin-top: t.createVarWithDefault("marginTop-ContentSeparator", #{$marginVertical-ContentSeparator});
31 |     margin-bottom: t.createVarWithDefault("marginBottom-ContentSeparator", #{$marginVertical-ContentSeparator});
32 |     margin-left: t.createVarWithDefault("marginLeft-ContentSeparator", #{$marginHorizontal-ContentSeparator});
33 |     margin-right: t.createVarWithDefault("marginRight-ContentSeparator", #{$marginHorizontal-ContentSeparator});
34 |     padding-top: t.createVarWithDefault("paddingTop-ContentSeparator", #{$paddingVertical-ContentSeparator});
35 |     padding-bottom: t.createVarWithDefault("paddingBottom-ContentSeparator", #{$paddingVertical-ContentSeparator});
36 |     padding-left: t.createVarWithDefault("paddingLeft-ContentSeparator", #{$paddingHorizontal-ContentSeparator});
37 |     padding-right: t.createVarWithDefault("paddingRight-ContentSeparator", #{$paddingHorizontal-ContentSeparator});
38 | 
39 |     &.horizontal {
40 |       height: $size-ContentSeparator;
41 |       width: 100%;
42 |     }
43 | 
44 |     &.vertical {
45 |       width: $size-ContentSeparator;
46 |       height: 100%;
47 |     }
48 |   }
49 | }
50 | 
51 | // --- We export the theme variables to add them to the component renderer
52 | :export {
53 |   themeVars: t.json-stringify($themeVars);
54 | }
55 | 
```

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

```markdown
 1 | # Import
 2 | 
 3 | The `ImportProducts` component uses [FileInput](/components/FileInput) to acquire a CSV file, [Table](/components/Table) to display records as selectable rows, and [Queue](/components/Queue) to import selected rows.
 4 | 
 5 | ## Using FileInput
 6 | 
 7 | To exercise XMLUI Invoice's import feature when running the demo app, you'll use `FileInput` to navigate to `products.csv` in the app's root folder.
 8 | 
 9 | ```xmlui
10 | <FileInput
11 |   id="fileInput"
12 |   acceptsFileType="{['.csv']}"
13 |   onDidChange="{ (val) => {
14 |     parsedCsv = window.parseCsv(val[0]).map((item, idx) => {
15 |       return {...item, id: idx};
16 |     });
17 |   }}"
18 | />
19 | ```
20 | 
21 | ## Avoiding duplication
22 | 
23 | The table that displays imported products makes rows selectable, so you can import only a subset of what's in the CSV file.
24 | 
25 | It uses `rowDisabledPredicate` to disable a row if the name of any existing product matches the name of the product in the current row. The function `isDuplicate` also enables highlighting duplicate rows.
26 | 
27 | ```xmlui /isDuplicate/
28 | <Table
29 |   id="productsFromCsv"
30 |   data="{ parsedCsv }"
31 |   rowsSelectable="true"
32 |   rowDisabledPredicate="{(row) => isDuplicate(row.name)}"
33 | >
34 |   <Column header="Name">
35 |     <Text color="{isDuplicate($item.name)
36 |         ? '$color-danger-500' : '$textColor-primary'}"
37 |     >
38 |       {$item.name} {isDuplicate($item.name) ? '(duplicate)' : ''}
39 |     </Text>
40 |   </Column>
41 |   <Column bindTo="description"/>
42 |   <Column bindTo="price"/>
43 | </Table>
44 | ```
45 | 
46 | We define `isDuplicate()` using a `<script>` [helper tag](/helper-tags).
47 | 
48 | ```xmlui
49 | <Component name="ImportProducts">
50 |   <script>
51 |     function isDuplicate(name) {
52 |       return existingProducts.value.some(p => p.name === name);
53 |     }
54 |   </script>
55 |   <!-- ... -->
56 | </Component>
57 | ```
58 | 
59 | ## Using Queue
60 | 
61 | The API doesn't support batch update so we use `Queue` to iterate over the selected rows and make an [APICall](/components/APICall) for each.
62 | 
63 | ```xmlui /pluralize/
64 | <Queue id="importQueue" clearAfterFinish="true">
65 |   <property name="progressFeedback">
66 |     <Text value="Importing {
67 |       pluralize(importQueue.getQueuedItems().length, 'product', 'products')
68 |     }"/>
69 |   </property>
70 |   <property name="resultFeedback">
71 |     <Text value="Imported {pluralize($completedItems.length,
72 |       'product', 'products')}"
73 |     />
74 |   </property>
75 |   <event name="process">
76 |     <APICall
77 |       url="/api/products"
78 |       method="post"
79 |       body="{$param.item}"
80 |     />
81 |   </event>
82 |   <event name="complete" value="productsFromCsv.clearSelection()"/>
83 | </Queue>
84 | ```
85 | 
86 | > [!INFO] `pluralize` is a [global helper function](/globals#pluralize).
87 | 
88 | The import button uses the queue's `enqueueItems` method to populate the queue with the result of the table's `getSelectedItems` method.
89 | 
90 | ```xmlui
91 | <Button
92 |   label="Import"
93 |   onClick="{ importQueue.enqueueItems(productsFromCsv.getSelectedItems())}"
94 |   enabled="{productsFromCsv.getSelectedItems().length}"
95 | />
96 | ```
97 | 
```

--------------------------------------------------------------------------------
/xmlui/src/components/Form/formActions.ts:
--------------------------------------------------------------------------------

```typescript
  1 | import type { SingleValidationResult, ValidationResult } from "../Form/FormContext";
  2 | 
  3 | export const UNBOUND_FIELD_SUFFIX = "__UNBOUND_FIELD__";
  4 | 
  5 | export enum FormActionKind {
  6 |   FIELD_LOST_FOCUS = "FormActionKind:FIELD_LOST_FOCUS",
  7 |   FIELD_VALUE_CHANGED = "FormActionKind:FIELD_VALUE_CHANGED",
  8 |   FIELD_FOCUSED = "FormActionKind:FIELD_FOCUSED",
  9 |   FIELD_VALIDATED = "FormActionKind:FIELD_VALIDATED",
 10 |   FIELD_INITIALIZED = "FormActionKind:FIELD_INITIALIZED",
 11 |   FIELD_REMOVED = "FormActionKind:FIELD_REMOVED",
 12 |   TRIED_TO_SUBMIT = "FormActionKind:TRIED_TO_SUBMIT",
 13 |   BACKEND_VALIDATION_ARRIVED = "FormActionKind:BACKEND_VALIDATION_ARRIVED",
 14 |   SUBMITTING = "FormActionKind:SUBMITTING",
 15 |   SUBMITTED = "FormActionKind:SUBMITTED",
 16 |   RESET = "FormActionKind:RESET",
 17 | }
 18 | 
 19 | export type FormAction = {
 20 |   type: FormActionKind;
 21 |   // Potential improvement: Try to specify the type with more details
 22 |   payload:
 23 |     | {
 24 |         uid?: any;
 25 |         data?: any;
 26 |         error?: any;
 27 |         value?: any;
 28 |       }
 29 |     | any;
 30 | };
 31 | 
 32 | export function fieldInitialized(uid: string, value: any, force = false, noSubmit = false) {
 33 |   return {
 34 |     type: FormActionKind.FIELD_INITIALIZED,
 35 |     payload: {
 36 |       uid,
 37 |       value,
 38 |       force,
 39 |       noSubmit
 40 |     },
 41 |   };
 42 | }
 43 | 
 44 | export function fieldChanged(uid: string, value: any) {
 45 |   return {
 46 |     type: FormActionKind.FIELD_VALUE_CHANGED,
 47 |     payload: {
 48 |       uid,
 49 |       value
 50 |     },
 51 |   };
 52 | }
 53 | 
 54 | export function fieldFocused(uid: string) {
 55 |   return {
 56 |     type: FormActionKind.FIELD_FOCUSED,
 57 |     payload: {
 58 |       uid,
 59 |     },
 60 |   };
 61 | }
 62 | 
 63 | export function fieldLostFocus(uid: string) {
 64 |   return {
 65 |     type: FormActionKind.FIELD_LOST_FOCUS,
 66 |     payload: {
 67 |       uid,
 68 |     },
 69 |   };
 70 | }
 71 | 
 72 | export function fieldValidated(uid: string, validationResult: ValidationResult) {
 73 |   return {
 74 |     type: FormActionKind.FIELD_VALIDATED,
 75 |     payload: {
 76 |       uid,
 77 |       validationResult,
 78 |     },
 79 |   };
 80 | }
 81 | 
 82 | export function fieldRemoved(uid: string) {
 83 |   return {
 84 |     type: FormActionKind.FIELD_REMOVED,
 85 |     payload: {
 86 |       uid,
 87 |     },
 88 |   };
 89 | }
 90 | 
 91 | export function triedToSubmit() {
 92 |   return {
 93 |     type: FormActionKind.TRIED_TO_SUBMIT,
 94 |     payload: {},
 95 |   };
 96 | }
 97 | export function formSubmitting() {
 98 |   return {
 99 |     type: FormActionKind.SUBMITTING,
100 |     payload: {},
101 |   };
102 | }
103 | 
104 | export function formSubmitted() {
105 |   return {
106 |     type: FormActionKind.SUBMITTED,
107 |     payload: {},
108 |   };
109 | }
110 | 
111 | export function formReset() {
112 |   return {
113 |     type: FormActionKind.RESET,
114 |     payload: {},
115 |   };
116 | }
117 | 
118 | export function backendValidationArrived({
119 |   generalValidationResults = [],
120 |   fieldValidationResults = {},
121 | }: {
122 |   generalValidationResults: Array<SingleValidationResult>;
123 |   fieldValidationResults: Record<string, Array<SingleValidationResult>>;
124 | }) {
125 |   return {
126 |     type: FormActionKind.BACKEND_VALIDATION_ARRIVED,
127 |     payload: {
128 |       generalValidationResults,
129 |       fieldValidationResults,
130 |     },
131 |   };
132 | }
133 | 
```

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

```typescript
 1 | import styles from "./Image.module.scss";
 2 | 
 3 | import { parseScssVar } from "../../components-core/theming/themeVars";
 4 | import { createComponentRenderer } from "../../components-core/renderers";
 5 | import { createMetadata, d, dClick, dInternal } from "../metadata-helpers";
 6 | import { Image, defaultProps } from "./ImageNative";
 7 | 
 8 | const COMP = "Image";
 9 | 
10 | export const ImageMd = createMetadata({
11 |   status: "stable",
12 |   description:
13 |     "`Image` displays pictures from URLs or local sources with built-in responsive " +
14 |     "sizing, aspect ratio control, and accessibility features. It handles different " +
15 |     "image formats and provides options for lazy loading and click interactions.",
16 |   props: {
17 |     src: d(
18 |       "This property is used to indicate the source (path) of the image to display. " +
19 |         "When not defined, no image is displayed.",
20 |     ),
21 |     data: d(
22 |       `This property contains the binary data that represents the image.`,
23 |     ),
24 |     alt: d(`This optional property specifies an alternate text for the image.`),
25 |     fit: {
26 |       description:
27 |         "This property sets how the image content should be resized to fit its container.",
28 |       type: "string",
29 |       defaultValue: defaultProps.fit,
30 |     },
31 |     lazyLoad: {
32 |       description:
33 |         `Lazy loading instructs the browser to load the image only when it is imminently needed ` +
34 |         `(e.g. user scrolls to it).`,
35 |       type: "boolean",
36 |       defaultValue: defaultProps.lazyLoad,
37 |     },
38 |     aspectRatio: d(
39 |       "This property sets a preferred aspect ratio for the image, which will be used in " +
40 |         "calculating auto sizes and other layout functions. If this value is not used, the " +
41 |         'original aspect ratio is kept. The value can be a number of a string (such as "16/9").',
42 |     ),
43 |     inline: {
44 |       description: `When set to true, the image will be displayed as an inline element instead of a block element.`,
45 |       type: "boolean",
46 |       defaultValue: defaultProps.inline,
47 |     },
48 |     animation: dInternal(`The optional animation object to be applied to the component`),
49 |   },
50 |   events: {
51 |     click: dClick(COMP),
52 |   },
53 |   themeVars: parseScssVar(styles.themeVars),
54 | });
55 | 
56 | export const imageComponentRenderer = createComponentRenderer(
57 |   COMP,
58 |   ImageMd,
59 |   ({ node, extractValue, className, extractResourceUrl }) => {
60 |     return (
61 |       <Image
62 |         src={node.props.src ? extractResourceUrl(node.props.src) : undefined}
63 |         imageData={extractValue(node.props.data)}
64 |         alt={extractValue(node.props.alt)}
65 |         fit={extractValue(node.props.fit)}
66 |         lazyLoad={extractValue.asOptionalBoolean(node.props.lazyLoad)}
67 |         inline={extractValue.asOptionalBoolean(node.props.inline)}
68 |         aspectRatio={extractValue(node.props.aspectRatio)}
69 |         className={className}
70 |         animation={extractValue(node.props.animation)}
71 |       />
72 |     );
73 |   },
74 | );
75 | 
```

--------------------------------------------------------------------------------
/docs/public/pages/howto/make-a-table-responsive.md:
--------------------------------------------------------------------------------

```markdown
 1 | # Make a Table responsive
 2 | 
 3 | ```xmlui-pg
 4 | ---app
 5 | <App>
 6 |   <ResponsiveTable />
 7 | </App>
 8 | ---comp display
 9 | <Component name="ResponsiveTable" var.people="{[
10 |   { name: 'Alice Johnson', email: 'alice@company.com', department: 'Engineering', status: 'active', salary: '95k' },
11 |   { name: 'Bob Smith', email: 'bob@company.com', department: 'Marketing', status: 'active', salary: '88k' },
12 |   { name: 'Carol Davis', email: 'carol@company.com', department: 'Sales', status: 'inactive', salary: '110k' },
13 |   { name: 'David Wilson', email: 'david@company.com', department: 'Engineering', status: 'active', salary: '105k' },
14 |   { name: 'Eva Brown', email: 'eva@company.com', department: 'HR', status: 'active', salary: '75k' }
15 | ]}">
16 |   <VStack>
17 |     <HStack>
18 |       <Text size="lg">Responsive People Table</Text>
19 |       <Badge value="Current: {mediaSize.size}" color="blue" />
20 |     </HStack>
21 |     <Text size="sm" color="gray">Resize your browser window to see columns progressively hide</Text>
22 | 
23 |     <Table data="{people}">
24 |       <!-- Essential: Avatar - always show -->
25 |       <Column header="" width="50px">
26 |         <Avatar
27 |           name="{$item.name}"
28 |           size="xs"
29 |           color="blue"
30 |         />
31 |       </Column>
32 | 
33 |       <!-- Essential: Name - always show -->
34 |       <Column header="Name" bindTo="name" width="150px">
35 |         <Text>{$item.name}</Text>
36 |       </Column>
37 | 
38 |       <!-- Priority: Email - hide on xs screens -->
39 |       <Column header="Email" bindTo="email" when="{mediaSize.size !== 'xs'}" width="200px">
40 |         <Text size="sm" color="gray">{$item.email}</Text>
41 |       </Column>
42 | 
43 |       <!-- Secondary: Department - hide on xs/sm screens -->
44 |       <Column header="Department" bindTo="department" when="{mediaSize.size !== 'xs' && mediaSize.size !== 'sm'}" width="120px" />
45 | 
46 |       <!-- Tertiary: Status - only show on md+ screens -->
47 |       <Column header="Status" bindTo="status" when="{mediaSize.size === 'md' || mediaSize.size === 'lg' || mediaSize.size === 'xl' || mediaSize.size === 'xxl'}" width="80px">
48 |         <Badge
49 |           value="{$item.status}"
50 |           color="{status === 'active' ? 'green' : 'gray'}"
51 |           variant="pill"
52 |         />
53 |       </Column>
54 | 
55 |       <!-- Low Priority: Salary - only show on lg+ screens -->
56 |       <Column header="Salary" bindTo="salary" when="{mediaSize.size === 'lg' || mediaSize.size === 'xl' || mediaSize.size === 'xxl'}" width="100px">
57 |         <Text size="sm" weight="medium">${$item.salary}</Text>
58 |       </Column>
59 |     </Table>
60 | 
61 |     <VStack gap="sm" margin="md">
62 |       <Text size="sm" weight="bold">Column Visibility by Screen Size:</Text>
63 |       <Text size="xs" color="gray">xs: Avatar + Name only</Text>
64 |       <Text size="xs" color="gray">sm: + Email</Text>
65 |       <Text size="xs" color="gray">md: + Department + Status</Text>
66 |       <Text size="xs" color="gray">lg+: + Salary</Text>
67 |     </VStack>
68 |   </VStack>
69 | </Component>
70 | ```
71 | 
72 | 
```

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

```typescript
 1 | // The type of action we can use with a proxy
 2 | export type ProxyAction = "set" | "unset";
 3 | 
 4 | // Proxy operation callback parameters
 5 | export type ProxyCallbackArgs = {
 6 |   action: ProxyAction;
 7 |   path: string;
 8 |   pathArray: (string | symbol)[];
 9 |   target: string;
10 |   newValue?: any;
11 |   previousValue?: any;
12 | };
13 | 
14 | /**
15 |  * Use this function to build a JavaScript proxy for localContext objects. The 
16 |  * responsibility of the proxy is to collect the changes within the localContext 
17 |  * so that we can refresh the UI according to them.
18 |  */
19 | export function buildProxy(
20 |   proxyTarget: any,
21 |   callback: (changeInfo: ProxyCallbackArgs) => void,
22 |   tree: Array<string | symbol> = [],
23 | ): any {
24 |   // --- We identify a particular (deep) localContext property by its full path; 
25 |   // --- this function creates the path
26 |   const getPath = (prop: string | symbol) => tree.concat(prop).join(".");
27 | 
28 |   const proxiedValues = new WeakMap();
29 |   // --- Create the proxy object for `proxyTarget`
30 |   return new Proxy(proxyTarget, {
31 |     get: function (target, prop, receiver) {
32 |       const value = Reflect.get(target, prop, receiver);
33 | 
34 |       // --- Create proxies only for writable objects and arrays, except arrow 
35 |       // --- function expressions.
36 |       if (
37 |         value &&
38 |         !value._ARROW_EXPR_ &&
39 |         !Object.isFrozen(value) &&
40 |         typeof value === "object" &&
41 |         ["Array", "Object"].includes(value.constructor.name)
42 |       ) {
43 |         // --- Just to make sure that accessing the proxied objects' field gets 
44 |         // --- the same reference every time. e.g. this wouldn't be true otherwise: 
45 |         // --- proxiedObject['field'] === proxiedObject['field']
46 |         if (!proxiedValues.has(value)) {
47 |           proxiedValues.set(value, buildProxy(value, callback, tree.concat(prop)));
48 |         }
49 |         return proxiedValues.get(value);
50 |       }
51 | 
52 |       // --- Do not create a proxy for other objects
53 |       return value;
54 |     },
55 | 
56 |     set: function (target, prop, value, receiver) {
57 |       // --- Invoke the callback function to sign any change in the proxied object
58 |       callback({
59 |         action: "set",
60 |         path: getPath(prop),
61 |         pathArray: tree.concat(prop),
62 |         target,
63 |         newValue: value,
64 |         previousValue: Reflect.get(target, prop, receiver),
65 |       });
66 | 
67 |       // --- Execute the change.
68 |       // --- Note, any error raised in the callback will prevent from changing the property value
69 |       return Reflect.set(target, prop, value, receiver);
70 |     },
71 | 
72 |     deleteProperty: function (target, prop) {
73 |       // --- Invoke the callback function to delete a property
74 |       callback({ action: "unset", path: getPath(prop), pathArray: tree.concat(prop), target });
75 | 
76 |       // --- Execute the change
77 |       // --- Note, any error raised in the callback will prevent from deleting the property value
78 |       return Reflect.deleteProperty(target, prop);
79 |     },
80 |   });
81 | }
82 | 
```

--------------------------------------------------------------------------------
/packages/xmlui-animations/src/ScaleAnimation.tsx:
--------------------------------------------------------------------------------

```typescript
 1 | import { createComponentRenderer, createMetadata } from "xmlui";
 2 | import { Animation, defaultProps } from "./AnimationNative";
 3 | 
 4 | const COMP = "ScaleAnimation";
 5 | 
 6 | const defaultAnimationValues = {
 7 |   from: 0,
 8 |   to: 1,
 9 | };
10 | 
11 | export const ScaleAnimationMd = createMetadata({
12 |   status: "experimental",
13 |   description: `The \`${COMP}\` component represents an animation that scales the content.`,
14 |   docFolder: "src",
15 |   props: {
16 |     from: {
17 |       description: "The initial scale of the content.",
18 |       valueType: "number",
19 |       defaultValue: defaultAnimationValues.from,
20 |     },
21 |     to: {
22 |       description: "The final scale of the content.",
23 |       valueType: "number",
24 |       defaultValue: defaultAnimationValues.to,
25 |     },
26 |     duration: {
27 |       description: "The duration of the animation in milliseconds.",
28 |       valueType: "number",
29 |     },
30 |     animateWhenInView: {
31 |       description: "Indicates whether the animation should start when the component is in view.",
32 |       valueType: "boolean",
33 |     },
34 |     reverse: {
35 |       description: `Indicates whether the animation should run in reverse`,
36 |       defaultValue: defaultProps.reverse,
37 |       valueType: "boolean",
38 |     },
39 |     loop: {
40 |       description: `Indicates whether the animation should loop`,
41 |       defaultValue: defaultProps.loop,
42 |       valueType: "boolean",
43 |     },
44 |     delay: {
45 |       description: `The delay before the animation starts in milliseconds`,
46 |       defaultValue: defaultProps.delay,
47 |       valueType: "number",
48 |     },
49 |   },
50 |   events: {
51 |     started: { description: `Event fired when the animation starts` },
52 |     stopped: { description: `Event fired when the animation stops` },
53 |   },
54 |   apis: {
55 |     start: { description: `Starts the animation` },
56 |     stop: { description: `Stops the animation` },
57 |   },
58 | });
59 | 
60 | export const scaleAnimationRenderer = createComponentRenderer(
61 |   COMP,
62 |   ScaleAnimationMd,
63 |   ({ node, renderChild, extractValue, registerComponentApi, lookupEventHandler }) => {
64 |     return (
65 |       <Animation
66 |         registerComponentApi={registerComponentApi}
67 |         animation={{
68 |           from: {
69 |             transform: `scale(${extractValue.asOptionalNumber(node.props?.from, defaultAnimationValues.from)})`,
70 |           },
71 |           to: {
72 |             transform: `scale(${extractValue.asOptionalNumber(node.props?.to, defaultAnimationValues.to)})`,
73 |           },
74 |         }}
75 |         duration={extractValue.asOptionalNumber(node.props.duration)}
76 |         onStop={lookupEventHandler("stopped")}
77 |         onStart={lookupEventHandler("started")}
78 |         animateWhenInView={extractValue.asOptionalBoolean(node.props.animateWhenInView)}
79 |         reverse={extractValue.asOptionalBoolean(node.props.reverse)}
80 |         loop={extractValue.asOptionalBoolean(node.props.loop)}
81 |         delay={extractValue.asOptionalNumber(node.props.delay)}
82 |       >
83 |         {renderChild(node.children)}
84 |       </Animation>
85 |     );
86 |   },
87 | );
88 | 
```

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

```yaml
 1 | name: Deploy docs (optimized)
 2 | 
 3 | on:
 4 |   workflow_dispatch:
 5 |     inputs:
 6 |       max_releases:
 7 |         description: "Maximum number of releases to include in docs"
 8 |         type: number
 9 |         required: false
10 |         default: 10
11 | 
12 | permissions:
13 |   contents: write
14 |   pull-requests: write
15 | 
16 | jobs:
17 |   build-and-deploy:
18 |     runs-on: ubuntu-latest
19 |     env:
20 |       NODE_OPTIONS: "--max-old-space-size=8192"
21 |       TURBO_UI: "false"
22 | 
23 |     steps:
24 |       - name: 1. Generate a token from the GitHub App 🤖
25 |         id: generate_token
26 |         uses: tibdex/github-app-token@v2
27 |         with:
28 |           app_id: ${{ secrets.APP_ID }}
29 |           private_key: ${{ secrets.APP_PRIVATE_KEY }}
30 |       - uses: actions/checkout@v4
31 |       - uses: actions/setup-node@v4
32 |         with:
33 |           node-version: 22
34 |           cache: "npm"
35 |           registry-url: https://registry.npmjs.org/
36 | 
37 |       - name: Cache for Turbo
38 |         uses: rharkor/caching-for-turbo@v2.3.1
39 | 
40 |       - run: npm ci --prefer-offline
41 | 
42 |       - name: 4. Configure Git to use the App's token 🔑
43 |         # The token generated in the first step is used here for authentication.
44 |         run: git config --global url."https://x-access-token:${{ steps.generate_token.outputs.token }}@github.com/".insteadOf "https://github.com/"
45 |       - name: 5. DEBUG - Attempt to clone the private repo
46 |         # This step will give a clear error if authentication is the problem
47 |         run: git clone https://github.com/xmlui-org/xmlui-optimizer.git
48 |       - name: 5. Install optimizer's dependencies
49 |         run: npm install
50 |         working-directory: ./xmlui-optimizer
51 |       - name: DEBUG - install xmlui-optimizer
52 |         # This step will give a clear error if authentication is the problem
53 |         run: npm install ./xmlui-optimizer
54 | 
55 |       - run: cd docs && npm run release-ci-optimized
56 |         env:
57 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
58 |           DOCS_XMLUI_MAX_RELEASES_LENGTH: ${{ github.event.inputs.max_releases }}
59 | 
60 |       - name: "Run Azure webapp deploy action using publish profile credentials"
61 |         uses: azure/webapps-deploy@v2
62 |         with:
63 |           package: "docs/ui-optimized.zip"
64 |           app-name: xmlui-docs
65 |           publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE_XMLUI_DOCS }}
66 |       - name: Create Pull Request for generated releases.json
67 |         uses: peter-evans/create-pull-request@v7
68 |         with:
69 |           add-paths: "docs/public/resources/files/releases.json"
70 |           commit-message: "chore: update generated releases.json"
71 |           title: "docs: Update generated releases.json"
72 |           body: "This PR was automatically opened by the **Deploy docs (optimized)** workflow, which generates the `releases.json` file with data about the latest releases."
73 |           branch: "automated/update-releases"
74 |           delete-branch: true # Clean up the temp branch after merge
75 |           labels: automated
76 | 
```

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

```
 1 | <svg viewBox="0 0 22 28" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 |   <g clip-path="url(#clip0_1813_15242)">
 3 |     <path
 4 |       d="M21.788 7.38281L16.3739 5.74219L14.827 0H3.22546C2.37112 0 1.67859 0.734508 1.67859 1.64062V26.3594C1.67859 27.2655 2.37112 28 3.22546 28H20.2411C21.0954 28 21.788 27.2655 21.788 26.3594V7.38281Z"
 5 |       fill="#EDEDED"/>
 6 |     <path
 7 |       d="M21.7879 7.38281V26.3594C21.7879 27.2655 21.0954 28 20.2411 28H11.8571V0H14.827L16.3739 5.74219L21.7879 7.38281Z"
 8 |       fill="#EDEDED"/>
 9 |     <path
10 |       d="M21.788 7.38281H16.3739C15.5231 7.38281 14.827 6.64453 14.827 5.74219V0C15.0281 0 15.2292 0.0820312 15.3684 0.246148L21.5559 6.80865C21.7106 6.95625 21.788 7.16953 21.788 7.38281Z"
11 |       fill="#BDBDBD"/>
12 |     <path
13 |       d="M20.5333 22.4259C20.5333 22.925 20.1483 23.3333 19.6778 23.3333H0.855556C0.385 23.3333 0 22.925 0 22.4259V13.3519C0 12.8528 0.385 12.4445 0.855556 12.4445H19.6778C20.1483 12.4445 20.5333 12.8528 20.5333 13.3519V22.4259Z"
14 |       fill="#FF3E3E"/>
15 |     <path
16 |       d="M4.25304 17.732V16.448H4.98504C5.09304 16.448 5.19704 16.456 5.29704 16.472C5.39704 16.488 5.48504 16.52 5.56104 16.568C5.63704 16.612 5.69704 16.676 5.74104 16.76C5.78904 16.844 5.81304 16.954 5.81304 17.09C5.81304 17.226 5.78904 17.336 5.74104 17.42C5.69704 17.504 5.63704 17.57 5.56104 17.618C5.48504 17.662 5.39704 17.692 5.29704 17.708C5.19704 17.724 5.09304 17.732 4.98504 17.732H4.25304ZM3.31104 15.716V20H4.25304V18.464H5.24304C5.51104 18.464 5.73904 18.426 5.92704 18.35C6.11504 18.27 6.26704 18.166 6.38304 18.038C6.50304 17.91 6.58904 17.764 6.64104 17.6C6.69704 17.432 6.72504 17.262 6.72504 17.09C6.72504 16.914 6.69704 16.744 6.64104 16.58C6.58904 16.416 6.50304 16.27 6.38304 16.142C6.26704 16.014 6.11504 15.912 5.92704 15.836C5.73904 15.756 5.51104 15.716 5.24304 15.716H3.31104Z"
17 |       fill="white"/>
18 |     <path
19 |       d="M8.85499 19.208V16.508H9.52699C9.75899 16.508 9.95299 16.542 10.109 16.61C10.269 16.674 10.397 16.768 10.493 16.892C10.589 17.016 10.657 17.166 10.697 17.342C10.741 17.514 10.763 17.708 10.763 17.924C10.763 18.16 10.733 18.36 10.673 18.524C10.613 18.688 10.533 18.822 10.433 18.926C10.333 19.026 10.219 19.098 10.091 19.142C9.96299 19.186 9.83099 19.208 9.69499 19.208H8.85499ZM7.91299 15.716V20H9.76099C10.089 20 10.373 19.946 10.613 19.838C10.857 19.726 11.059 19.574 11.219 19.382C11.383 19.19 11.505 18.962 11.585 18.698C11.665 18.434 11.705 18.146 11.705 17.834C11.705 17.478 11.655 17.168 11.555 16.904C11.459 16.64 11.323 16.42 11.147 16.244C10.975 16.068 10.769 15.936 10.529 15.848C10.293 15.76 10.037 15.716 9.76099 15.716H7.91299Z"
20 |       fill="white"/>
21 |     <path d="M12.9603 15.716V20H13.9023V18.23H15.6963V17.498H13.9023V16.508H15.9723V15.716H12.9603Z" fill="white"/>
22 |   </g>
23 |   <defs>
24 |     <clipPath id="clip0_1813_15242">
25 |       <rect width="22" height="28" fill="white"/>
26 |     </clipPath>
27 |   </defs>
28 | </svg>
```

--------------------------------------------------------------------------------
/xmlui/tests/parsers/common/input-stream.test.ts:
--------------------------------------------------------------------------------

```typescript
  1 | import { describe, expect, it } from "vitest";
  2 | import { InputStream } from "../../../src/parsers/common/InputStream";
  3 | 
  4 | describe("InputStream", () => {
  5 |   it("Builds from string", () => {
  6 |     // --- Act
  7 |     const is = new InputStream("hello");
  8 | 
  9 |     // --- Assert
 10 |     expect(is.position).equal(0);
 11 |     expect(is.line).equal(1);
 12 |     expect(is.column).equal(0);
 13 |     expect(is.source).equal("hello");
 14 |   });
 15 | 
 16 |   it("Peek #1", () => {
 17 |     // --- Arrange
 18 |     const is = new InputStream("hello");
 19 | 
 20 |     // --- Act
 21 |     const ch = is.peek();
 22 | 
 23 |     // --- Assert
 24 |     expect(ch).equal("h");
 25 |     expect(is.position).equal(0);
 26 |     expect(is.line).equal(1);
 27 |     expect(is.column).equal(0);
 28 |   });
 29 | 
 30 |   it("Peek #3", () => {
 31 |     // --- Arrange
 32 |     const is = new InputStream("hello");
 33 |     is.get();
 34 |     is.get();
 35 | 
 36 |     // --- Act
 37 |     const ch = is.peek();
 38 | 
 39 |     // --- Assert
 40 |     expect(ch).equal("l");
 41 |     expect(is.position).equal(2);
 42 |     expect(is.line).equal(1);
 43 |     expect(is.column).equal(2);
 44 |   });
 45 | 
 46 |   it("Peek #5", () => {
 47 |     // --- Arrange
 48 |     const is = new InputStream("hello");
 49 |     is.get();
 50 |     is.get();
 51 |     is.get();
 52 |     is.get();
 53 |     is.get();
 54 | 
 55 |     // --- Act
 56 |     const ch = is.peek();
 57 | 
 58 |     // --- Assert
 59 |     expect(ch).equal(null);
 60 |     expect(is.position).equal(5);
 61 |     expect(is.line).equal(1);
 62 |     expect(is.column).equal(5);
 63 |   });
 64 | 
 65 |   it("Peek with new line #1", () => {
 66 |     // --- Arrange
 67 |     const is = new InputStream("he\nllo");
 68 |     is.get();
 69 |     is.get();
 70 | 
 71 |     // --- Act
 72 |     const ch = is.peek();
 73 | 
 74 |     // --- Assert
 75 |     expect(ch).equal("\n");
 76 |     expect(is.position).equal(2);
 77 |     expect(is.line).equal(1);
 78 |     expect(is.column).equal(2);
 79 |   });
 80 | 
 81 |   it("Get #1", () => {
 82 |     // --- Arrange
 83 |     const is = new InputStream("hello");
 84 | 
 85 |     // --- Act
 86 |     const ch = is.get();
 87 | 
 88 |     // --- Assert
 89 |     expect(ch).equal("h");
 90 |     expect(is.position).equal(1);
 91 |     expect(is.line).equal(1);
 92 |     expect(is.column).equal(1);
 93 |   });
 94 | 
 95 |   it("Get #3", () => {
 96 |     // --- Arrange
 97 |     const is = new InputStream("hello");
 98 |     is.get();
 99 |     is.get();
100 | 
101 |     // --- Act
102 |     const ch = is.get();
103 | 
104 |     // --- Assert
105 |     expect(ch).equal("l");
106 |     expect(is.position).equal(3);
107 |     expect(is.line).equal(1);
108 |     expect(is.column).equal(3);
109 |   });
110 | 
111 |   it("Get #5", () => {
112 |     // --- Arrange
113 |     const is = new InputStream("hello");
114 |     is.get();
115 |     is.get();
116 |     is.get();
117 |     is.get();
118 |     is.get();
119 | 
120 |     // --- Act
121 |     const ch = is.get();
122 | 
123 |     // --- Assert
124 |     expect(ch).equal(null);
125 |     expect(is.position).equal(5);
126 |     expect(is.line).equal(1);
127 |     expect(is.column).equal(5);
128 |   });
129 | 
130 |   it("Get with new line #1", () => {
131 |     // --- Arrange
132 |     const is = new InputStream("he\nllo");
133 |     is.get();
134 |     is.get();
135 | 
136 |     // --- Act
137 |     const ch = is.get();
138 | 
139 |     // --- Assert
140 |     expect(ch).equal("\n");
141 |     expect(is.position).equal(3);
142 |     expect(is.line).equal(2);
143 |     expect(is.column).equal(0);
144 |   });
145 | });
146 | 
```

--------------------------------------------------------------------------------
/xmlui/src/components/Heading/H1.spec.ts:
--------------------------------------------------------------------------------

```typescript
 1 | import { test, expect } from "../../testing/fixtures";
 2 | 
 3 | // =============================================================================
 4 | // BASIC FUNCTIONALITY TESTS
 5 | // =============================================================================
 6 | 
 7 | test.describe("Basic Functionality", () => {
 8 |   test("renders as h1 level heading", async ({ initTestBed, createHeadingDriver }) => {
 9 |     await initTestBed(`<H1 testId="h1">Test Heading</H1>`);
10 | 
11 |     const driver = await createHeadingDriver("h1");
12 |     
13 |     await expect(driver.component).toBeVisible();
14 |     await expect(driver.component).toContainText("Test Heading");
15 |     await expect(driver.component).toHaveRole("heading");
16 |     
17 |     // Verify it renders as h1 HTML element
18 |     const tagName = await driver.getComponentTagName();
19 |     expect(tagName.toLowerCase()).toBe("h1");
20 |   });
21 | 
22 |   test("renders with value property", async ({ initTestBed, createHeadingDriver }) => {
23 |     await initTestBed(`<H1 testId="h1" value="Value Property Text" />`);
24 | 
25 |     const driver = await createHeadingDriver("h1");
26 |     
27 |     await expect(driver.component).toBeVisible();
28 |     await expect(driver.component).toContainText("Value Property Text");
29 |     await expect(driver.component).toHaveRole("heading");
30 |     
31 |     // Verify it renders as h1 HTML element
32 |     const tagName = await driver.getComponentTagName();
33 |     expect(tagName.toLowerCase()).toBe("h1");
34 |   });
35 | 
36 |   test("is equivalent to Heading with level='h1'", async ({ initTestBed, createHeadingDriver }) => {
37 |     await initTestBed(`
38 |       <Fragment>
39 |         <Heading testId="heading" level="h1">Heading Content</Heading>
40 |         <H1 testId="h1">H1 Content</H1>
41 |       </Fragment>
42 |     `);
43 | 
44 |     const headingDriver = await createHeadingDriver("heading");
45 |     const h1Driver = await createHeadingDriver("h1");
46 |     
47 |     // Both should render as h1 elements
48 |     const headingTagName = await headingDriver.getComponentTagName();
49 |     const h1TagName = await h1Driver.getComponentTagName();
50 |     
51 |     expect(headingTagName.toLowerCase()).toBe("h1");
52 |     expect(h1TagName.toLowerCase()).toBe("h1");
53 |     expect(headingTagName).toEqual(h1TagName);
54 |     
55 |     // Both should have heading role
56 |     await expect(headingDriver.component).toHaveRole("heading");
57 |     await expect(h1Driver.component).toHaveRole("heading");
58 |   });
59 | 
60 |   test("ignores level property when provided", async ({ initTestBed, createHeadingDriver }) => {
61 |     await initTestBed(`<H1 testId="h1" level="h3">Should be H1</H1>`);
62 | 
63 |     const driver = await createHeadingDriver("h1");
64 |     
65 |     await expect(driver.component).toBeVisible();
66 |     await expect(driver.component).toContainText("Should be H1");
67 |     await expect(driver.component).toHaveRole("heading");
68 |     
69 |     // Should always be h1 despite level="h3" prop (this is the expected behavior)
70 |     const tagName = await driver.getComponentTagName();
71 |     expect(tagName.toLowerCase()).toBe("h1");
72 |   });
73 | });
74 | 
```

--------------------------------------------------------------------------------
/xmlui/src/components/Heading/H2.spec.ts:
--------------------------------------------------------------------------------

```typescript
 1 | import { test, expect } from "../../testing/fixtures";
 2 | 
 3 | // =============================================================================
 4 | // BASIC FUNCTIONALITY TESTS
 5 | // =============================================================================
 6 | 
 7 | test.describe("Basic Functionality", () => {
 8 |   test("renders as h2 level heading", async ({ initTestBed, createHeadingDriver }) => {
 9 |     await initTestBed(`<H2 testId="h2">Test Heading</H2>`);
10 | 
11 |     const driver = await createHeadingDriver("h2");
12 |     
13 |     await expect(driver.component).toBeVisible();
14 |     await expect(driver.component).toContainText("Test Heading");
15 |     await expect(driver.component).toHaveRole("heading");
16 |     
17 |     // Verify it renders as h2 HTML element
18 |     const tagName = await driver.getComponentTagName();
19 |     expect(tagName.toLowerCase()).toBe("h2");
20 |   });
21 | 
22 |   test("renders with value property", async ({ initTestBed, createHeadingDriver }) => {
23 |     await initTestBed(`<H2 testId="h2" value="Value Property Text" />`);
24 | 
25 |     const driver = await createHeadingDriver("h2");
26 |     
27 |     await expect(driver.component).toBeVisible();
28 |     await expect(driver.component).toContainText("Value Property Text");
29 |     await expect(driver.component).toHaveRole("heading");
30 |     
31 |     // Verify it renders as h2 HTML element
32 |     const tagName = await driver.getComponentTagName();
33 |     expect(tagName.toLowerCase()).toBe("h2");
34 |   });
35 | 
36 |   test("is equivalent to Heading with level='h2'", async ({ initTestBed, createHeadingDriver }) => {
37 |     await initTestBed(`
38 |       <Fragment>
39 |         <Heading testId="heading" level="h2">Heading Content</Heading>
40 |         <H2 testId="h2">H2 Content</H2>
41 |       </Fragment>
42 |     `);
43 | 
44 |     const headingDriver = await createHeadingDriver("heading");
45 |     const h2Driver = await createHeadingDriver("h2");
46 |     
47 |     // Both should render as h2 elements
48 |     const headingTagName = await headingDriver.getComponentTagName();
49 |     const h2TagName = await h2Driver.getComponentTagName();
50 |     
51 |     expect(headingTagName.toLowerCase()).toBe("h2");
52 |     expect(h2TagName.toLowerCase()).toBe("h2");
53 |     expect(headingTagName).toEqual(h2TagName);
54 |     
55 |     // Both should have heading role
56 |     await expect(headingDriver.component).toHaveRole("heading");
57 |     await expect(h2Driver.component).toHaveRole("heading");
58 |   });
59 | 
60 |   test("ignores level property when provided", async ({ initTestBed, createHeadingDriver }) => {
61 |     await initTestBed(`<H2 testId="h2" level="h4">Should be H2</H2>`);
62 | 
63 |     const driver = await createHeadingDriver("h2");
64 |     
65 |     await expect(driver.component).toBeVisible();
66 |     await expect(driver.component).toContainText("Should be H2");
67 |     await expect(driver.component).toHaveRole("heading");
68 |     
69 |     // Should always be h2 despite level="h4" prop (this is the expected behavior)
70 |     const tagName = await driver.getComponentTagName();
71 |     expect(tagName.toLowerCase()).toBe("h2");
72 |   });
73 | });
74 | 
```

--------------------------------------------------------------------------------
/xmlui/src/components/Heading/H3.spec.ts:
--------------------------------------------------------------------------------

```typescript
 1 | import { test, expect } from "../../testing/fixtures";
 2 | 
 3 | // =============================================================================
 4 | // BASIC FUNCTIONALITY TESTS
 5 | // =============================================================================
 6 | 
 7 | test.describe("Basic Functionality", () => {
 8 |   test("renders as h3 level heading", async ({ initTestBed, createHeadingDriver }) => {
 9 |     await initTestBed(`<H3 testId="h3">Test Heading</H3>`);
10 | 
11 |     const driver = await createHeadingDriver("h3");
12 |     
13 |     await expect(driver.component).toBeVisible();
14 |     await expect(driver.component).toContainText("Test Heading");
15 |     await expect(driver.component).toHaveRole("heading");
16 |     
17 |     // Verify it renders as h3 HTML element
18 |     const tagName = await driver.getComponentTagName();
19 |     expect(tagName.toLowerCase()).toBe("h3");
20 |   });
21 | 
22 |   test("renders with value property", async ({ initTestBed, createHeadingDriver }) => {
23 |     await initTestBed(`<H3 testId="h3" value="Value Property Text" />`);
24 | 
25 |     const driver = await createHeadingDriver("h3");
26 |     
27 |     await expect(driver.component).toBeVisible();
28 |     await expect(driver.component).toContainText("Value Property Text");
29 |     await expect(driver.component).toHaveRole("heading");
30 |     
31 |     // Verify it renders as h3 HTML element
32 |     const tagName = await driver.getComponentTagName();
33 |     expect(tagName.toLowerCase()).toBe("h3");
34 |   });
35 | 
36 |   test("is equivalent to Heading with level='h3'", async ({ initTestBed, createHeadingDriver }) => {
37 |     await initTestBed(`
38 |       <Fragment>
39 |         <Heading testId="heading" level="h3">Heading Content</Heading>
40 |         <H3 testId="h3">H3 Content</H3>
41 |       </Fragment>
42 |     `);
43 | 
44 |     const headingDriver = await createHeadingDriver("heading");
45 |     const h3Driver = await createHeadingDriver("h3");
46 |     
47 |     // Both should render as h3 elements
48 |     const headingTagName = await headingDriver.getComponentTagName();
49 |     const h3TagName = await h3Driver.getComponentTagName();
50 |     
51 |     expect(headingTagName.toLowerCase()).toBe("h3");
52 |     expect(h3TagName.toLowerCase()).toBe("h3");
53 |     expect(headingTagName).toEqual(h3TagName);
54 |     
55 |     // Both should have heading role
56 |     await expect(headingDriver.component).toHaveRole("heading");
57 |     await expect(h3Driver.component).toHaveRole("heading");
58 |   });
59 | 
60 |   test("ignores level property when provided", async ({ initTestBed, createHeadingDriver }) => {
61 |     await initTestBed(`<H3 testId="h3" level="h1">Should be H3</H3>`);
62 | 
63 |     const driver = await createHeadingDriver("h3");
64 |     
65 |     await expect(driver.component).toBeVisible();
66 |     await expect(driver.component).toContainText("Should be H3");
67 |     await expect(driver.component).toHaveRole("heading");
68 |     
69 |     // Should always be h3 despite level="h1" prop (this is the expected behavior)
70 |     const tagName = await driver.getComponentTagName();
71 |     expect(tagName.toLowerCase()).toBe("h3");
72 |   });
73 | });
74 | 
```

--------------------------------------------------------------------------------
/xmlui/src/components/Heading/H4.spec.ts:
--------------------------------------------------------------------------------

```typescript
 1 | import { test, expect } from "../../testing/fixtures";
 2 | 
 3 | // =============================================================================
 4 | // BASIC FUNCTIONALITY TESTS
 5 | // =============================================================================
 6 | 
 7 | test.describe("Basic Functionality", () => {
 8 |   test("renders as h4 level heading", async ({ initTestBed, createHeadingDriver }) => {
 9 |     await initTestBed(`<H4 testId="h4">Test Heading</H4>`);
10 | 
11 |     const driver = await createHeadingDriver("h4");
12 |     
13 |     await expect(driver.component).toBeVisible();
14 |     await expect(driver.component).toContainText("Test Heading");
15 |     await expect(driver.component).toHaveRole("heading");
16 |     
17 |     // Verify it renders as h4 HTML element
18 |     const tagName = await driver.getComponentTagName();
19 |     expect(tagName.toLowerCase()).toBe("h4");
20 |   });
21 | 
22 |   test("renders with value property", async ({ initTestBed, createHeadingDriver }) => {
23 |     await initTestBed(`<H4 testId="h4" value="Value Property Text" />`);
24 | 
25 |     const driver = await createHeadingDriver("h4");
26 |     
27 |     await expect(driver.component).toBeVisible();
28 |     await expect(driver.component).toContainText("Value Property Text");
29 |     await expect(driver.component).toHaveRole("heading");
30 |     
31 |     // Verify it renders as h4 HTML element
32 |     const tagName = await driver.getComponentTagName();
33 |     expect(tagName.toLowerCase()).toBe("h4");
34 |   });
35 | 
36 |   test("is equivalent to Heading with level='h4'", async ({ initTestBed, createHeadingDriver }) => {
37 |     await initTestBed(`
38 |       <Fragment>
39 |         <Heading testId="heading" level="h4">Heading Content</Heading>
40 |         <H4 testId="h4">H4 Content</H4>
41 |       </Fragment>
42 |     `);
43 | 
44 |     const headingDriver = await createHeadingDriver("heading");
45 |     const h4Driver = await createHeadingDriver("h4");
46 |     
47 |     // Both should render as h4 elements
48 |     const headingTagName = await headingDriver.getComponentTagName();
49 |     const h4TagName = await h4Driver.getComponentTagName();
50 |     
51 |     expect(headingTagName.toLowerCase()).toBe("h4");
52 |     expect(h4TagName.toLowerCase()).toBe("h4");
53 |     expect(headingTagName).toEqual(h4TagName);
54 |     
55 |     // Both should have heading role
56 |     await expect(headingDriver.component).toHaveRole("heading");
57 |     await expect(h4Driver.component).toHaveRole("heading");
58 |   });
59 | 
60 |   test("ignores level property when provided", async ({ initTestBed, createHeadingDriver }) => {
61 |     await initTestBed(`<H4 testId="h4" level="h1">Should be H4</H4>`);
62 | 
63 |     const driver = await createHeadingDriver("h4");
64 |     
65 |     await expect(driver.component).toBeVisible();
66 |     await expect(driver.component).toContainText("Should be H4");
67 |     await expect(driver.component).toHaveRole("heading");
68 |     
69 |     // Should always be h4 despite level="h1" prop (this is the expected behavior)
70 |     const tagName = await driver.getComponentTagName();
71 |     expect(tagName.toLowerCase()).toBe("h4");
72 |   });
73 | });
74 | 
```

--------------------------------------------------------------------------------
/xmlui/src/components/Heading/H5.spec.ts:
--------------------------------------------------------------------------------

```typescript
 1 | import { test, expect } from "../../testing/fixtures";
 2 | 
 3 | // =============================================================================
 4 | // BASIC FUNCTIONALITY TESTS
 5 | // =============================================================================
 6 | 
 7 | test.describe("Basic Functionality", () => {
 8 |   test("renders as h5 level heading", async ({ initTestBed, createHeadingDriver }) => {
 9 |     await initTestBed(`<H5 testId="h5">Test Heading</H5>`);
10 | 
11 |     const driver = await createHeadingDriver("h5");
12 |     
13 |     await expect(driver.component).toBeVisible();
14 |     await expect(driver.component).toContainText("Test Heading");
15 |     await expect(driver.component).toHaveRole("heading");
16 |     
17 |     // Verify it renders as h5 HTML element
18 |     const tagName = await driver.getComponentTagName();
19 |     expect(tagName.toLowerCase()).toBe("h5");
20 |   });
21 | 
22 |   test("renders with value property", async ({ initTestBed, createHeadingDriver }) => {
23 |     await initTestBed(`<H5 testId="h5" value="Value Property Text" />`);
24 | 
25 |     const driver = await createHeadingDriver("h5");
26 |     
27 |     await expect(driver.component).toBeVisible();
28 |     await expect(driver.component).toContainText("Value Property Text");
29 |     await expect(driver.component).toHaveRole("heading");
30 |     
31 |     // Verify it renders as h5 HTML element
32 |     const tagName = await driver.getComponentTagName();
33 |     expect(tagName.toLowerCase()).toBe("h5");
34 |   });
35 | 
36 |   test("is equivalent to Heading with level='h5'", async ({ initTestBed, createHeadingDriver }) => {
37 |     await initTestBed(`
38 |       <Fragment>
39 |         <Heading testId="heading" level="h5">Heading Content</Heading>
40 |         <H5 testId="h5">H5 Content</H5>
41 |       </Fragment>
42 |     `);
43 | 
44 |     const headingDriver = await createHeadingDriver("heading");
45 |     const h5Driver = await createHeadingDriver("h5");
46 |     
47 |     // Both should render as h5 elements
48 |     const headingTagName = await headingDriver.getComponentTagName();
49 |     const h5TagName = await h5Driver.getComponentTagName();
50 |     
51 |     expect(headingTagName.toLowerCase()).toBe("h5");
52 |     expect(h5TagName.toLowerCase()).toBe("h5");
53 |     expect(headingTagName).toEqual(h5TagName);
54 |     
55 |     // Both should have heading role
56 |     await expect(headingDriver.component).toHaveRole("heading");
57 |     await expect(h5Driver.component).toHaveRole("heading");
58 |   });
59 | 
60 |   test("ignores level property when provided", async ({ initTestBed, createHeadingDriver }) => {
61 |     await initTestBed(`<H5 testId="h5" level="h1">Should be H5</H5>`);
62 | 
63 |     const driver = await createHeadingDriver("h5");
64 |     
65 |     await expect(driver.component).toBeVisible();
66 |     await expect(driver.component).toContainText("Should be H5");
67 |     await expect(driver.component).toHaveRole("heading");
68 |     
69 |     // Should always be h5 despite level="h1" prop (this is the expected behavior)
70 |     const tagName = await driver.getComponentTagName();
71 |     expect(tagName.toLowerCase()).toBe("h5");
72 |   });
73 | });
74 | 
```

--------------------------------------------------------------------------------
/xmlui/src/components/Heading/H6.spec.ts:
--------------------------------------------------------------------------------

```typescript
 1 | import { test, expect } from "../../testing/fixtures";
 2 | 
 3 | // =============================================================================
 4 | // BASIC FUNCTIONALITY TESTS
 5 | // =============================================================================
 6 | 
 7 | test.describe("Basic Functionality", () => {
 8 |   test("renders as h6 level heading", async ({ initTestBed, createHeadingDriver }) => {
 9 |     await initTestBed(`<H6 testId="h6">Test Heading</H6>`);
10 | 
11 |     const driver = await createHeadingDriver("h6");
12 |     
13 |     await expect(driver.component).toBeVisible();
14 |     await expect(driver.component).toContainText("Test Heading");
15 |     await expect(driver.component).toHaveRole("heading");
16 |     
17 |     // Verify it renders as h6 HTML element
18 |     const tagName = await driver.getComponentTagName();
19 |     expect(tagName.toLowerCase()).toBe("h6");
20 |   });
21 | 
22 |   test("renders with value property", async ({ initTestBed, createHeadingDriver }) => {
23 |     await initTestBed(`<H6 testId="h6" value="Value Property Text" />`);
24 | 
25 |     const driver = await createHeadingDriver("h6");
26 |     
27 |     await expect(driver.component).toBeVisible();
28 |     await expect(driver.component).toContainText("Value Property Text");
29 |     await expect(driver.component).toHaveRole("heading");
30 |     
31 |     // Verify it renders as h6 HTML element
32 |     const tagName = await driver.getComponentTagName();
33 |     expect(tagName.toLowerCase()).toBe("h6");
34 |   });
35 | 
36 |   test("is equivalent to Heading with level='h6'", async ({ initTestBed, createHeadingDriver }) => {
37 |     await initTestBed(`
38 |       <Fragment>
39 |         <Heading testId="heading" level="h6">Heading Content</Heading>
40 |         <H6 testId="h6">H6 Content</H6>
41 |       </Fragment>
42 |     `);
43 | 
44 |     const headingDriver = await createHeadingDriver("heading");
45 |     const h6Driver = await createHeadingDriver("h6");
46 |     
47 |     // Both should render as h6 elements
48 |     const headingTagName = await headingDriver.getComponentTagName();
49 |     const h6TagName = await h6Driver.getComponentTagName();
50 |     
51 |     expect(headingTagName.toLowerCase()).toBe("h6");
52 |     expect(h6TagName.toLowerCase()).toBe("h6");
53 |     expect(headingTagName).toEqual(h6TagName);
54 |     
55 |     // Both should have heading role
56 |     await expect(headingDriver.component).toHaveRole("heading");
57 |     await expect(h6Driver.component).toHaveRole("heading");
58 |   });
59 | 
60 |   test("ignores level property when provided", async ({ initTestBed, createHeadingDriver }) => {
61 |     await initTestBed(`<H6 testId="h6" level="h1">Should be H6</H6>`);
62 | 
63 |     const driver = await createHeadingDriver("h6");
64 |     
65 |     await expect(driver.component).toBeVisible();
66 |     await expect(driver.component).toContainText("Should be H6");
67 |     await expect(driver.component).toHaveRole("heading");
68 |     
69 |     // Should always be h6 despite level="h1" prop (this is the expected behavior)
70 |     const tagName = await driver.getComponentTagName();
71 |     expect(tagName.toLowerCase()).toBe("h6");
72 |   });
73 | });
74 | 
```

--------------------------------------------------------------------------------
/xmlui/src/components-core/ComponentViewer.tsx:
--------------------------------------------------------------------------------

```typescript
 1 | import { InspectorDialog } from "./devtools/InspectorDialog";
 2 | import AppWithCodeViewNative from "../components/NestedApp/AppWithCodeViewNative";
 3 | import React, { useMemo } from "react";
 4 | import { useDevTools } from "./InspectorContext";
 5 | import { Tooltip } from "../components/NestedApp/Tooltip";
 6 | import styles from "../components/NestedApp/NestedApp.module.scss";
 7 | import { AiOutlineClose } from "react-icons/ai";
 8 | import { useAppContext } from "./AppContext";
 9 | 
10 | export const ComponentViewer = () => {
11 |   const { mockApi, setIsOpen, isOpen, inspectedNode, clickPosition, projectCompilation, sources } =
12 |     useDevTools();
13 | 
14 |   const { appGlobals } = useAppContext();
15 | 
16 |   const components = useMemo<string[]>(() => {
17 |     if (!projectCompilation) {
18 |       return [];
19 |     }
20 |     return projectCompilation.components.map((component) => {
21 |       return component.markupSource;
22 |     });
23 |   }, [projectCompilation]);
24 | 
25 |   const value = useMemo(() => {
26 |     const compSrc = inspectedNode?.debug?.source;
27 | 
28 |     if (!compSrc) {
29 |       return "";
30 |     }
31 |     if (!sources) {
32 |       return "";
33 |     }
34 |     const { start, end, fileId } = compSrc;
35 |     const slicedSrc = sources[fileId].slice(start, end);
36 | 
37 |     let dropEmptyLines = true;
38 |     const prunedLines: Array<string> = [];
39 |     let trimBeginCount: number | undefined = undefined;
40 |     slicedSrc.split("\n").forEach((line) => {
41 |       if (line.trim() === "" && dropEmptyLines) {
42 |         //drop empty lines from the beginning
43 |         return;
44 |       } else {
45 |         dropEmptyLines = false;
46 |         prunedLines.push(line);
47 |         const startingWhiteSpaces = line.search(/\S|$/);
48 |         if (
49 |           line.trim() !== "" &&
50 |           (trimBeginCount === undefined || startingWhiteSpaces < trimBeginCount)
51 |         ) {
52 |           trimBeginCount = startingWhiteSpaces;
53 |         }
54 |       }
55 |     });
56 |     return prunedLines
57 |       .map((line) => line.slice(trimBeginCount).replace(/inspect="true"/g, ""))
58 |       .join("\n");
59 |   }, [inspectedNode, sources]);
60 | 
61 |   return process.env.VITE_USER_COMPONENTS_Inspect !== "false" &&
62 |     isOpen &&
63 |     inspectedNode !== null ? (
64 |     <InspectorDialog isOpen={isOpen} setIsOpen={setIsOpen} clickPosition={clickPosition}>
65 |       <AppWithCodeViewNative
66 |         height={"500px"}
67 |         allowPlaygroundPopup
68 |         initiallyShowCode={appGlobals?.initiallyShowCode ?? true}
69 |         splitView={true}
70 |         controlsWidth={"120px"}
71 |         closeButton={
72 |           <Tooltip
73 |             trigger={
74 |               <button
75 |                 className={styles.headerButton}
76 |                 onClick={() => {
77 |                   setIsOpen(false);
78 |                 }}
79 |               >
80 |                 <AiOutlineClose />
81 |               </button>
82 |             }
83 |             label="Close"
84 |           />
85 |         }
86 |         markdown={`\`\`\`xmlui
87 | ${value}
88 | \`\`\``}
89 |         api={mockApi}
90 |         app={value}
91 |         components={components}
92 |       />
93 |     </InspectorDialog>
94 |   ) : null;
95 | };
96 | 
```

--------------------------------------------------------------------------------
/xmlui/src/components-core/devtools/InspectorDialog.module.scss:
--------------------------------------------------------------------------------

```scss
  1 | @use "../theming/themes" as t;
  2 | 
  3 | // --- This code snippet is required to collect the theme variables used in this module
  4 | $component: "ModalDialog";
  5 | $themeVars: ();
  6 | @function createThemeVar($componentVariable) {
  7 |   $themeVars: t.appendThemeVar($themeVars, $componentVariable) !global;
  8 |   @return t.getThemeVar($themeVars, $componentVariable);
  9 | }
 10 | 
 11 | // --- Theme vars for paddings
 12 | $themeVars: t.composePaddingVars($themeVars, $component);
 13 | $themeVars: t.composePaddingVars($themeVars, "overlay-#{$component}");
 14 | $padding-ModalDialog: createThemeVar("padding-#{$component}");
 15 | $backgroundColor-ModalDialog: createThemeVar("Dialog:backgroundColor-#{$component}");
 16 | $backgroundColor-overlay-ModalDialog: createThemeVar("Dialog:backgroundColor-overlay-#{$component}");
 17 | $borderRadius-ModalDialog: createThemeVar("Dialog:borderRadius-#{$component}");
 18 | $fontFamily-ModalDialog: createThemeVar("Dialog:fontFamily-#{$component}");
 19 | $textColor-ModalDialog: createThemeVar("Dialog:textColor-#{$component}");
 20 | $minWidth-ModalDialog: createThemeVar("Dialog:minWidth-#{$component}");
 21 | $maxWidth-ModalDialog: createThemeVar("Dialog:maxWidth-#{$component}");
 22 | $marginBottom-title-ModalDialog: createThemeVar("Dialog:marginBottom-title-#{$component}");
 23 | 
 24 | 
 25 | .overlay {
 26 |   position: fixed;
 27 |   overflow-y: auto;
 28 |   display: flex;
 29 |   align-items: center;
 30 |   justify-content: center;
 31 |   inset: 0;
 32 |   background-color: $backgroundColor-overlay-ModalDialog;
 33 |   padding: t.$space-4;
 34 | }
 35 | 
 36 | .overlayBg {
 37 |   background-color: $backgroundColor-overlay-ModalDialog;
 38 |   position: fixed;
 39 |   inset: 0;
 40 | }
 41 | 
 42 | .contentWrapper {
 43 |   display: flex;
 44 |   justify-content: center;
 45 |   align-items: center;
 46 |   width: 100%;
 47 |   height: 100%;
 48 | }
 49 | 
 50 | .content {
 51 |   border-radius: $borderRadius-ModalDialog;
 52 |   font-family: $fontFamily-ModalDialog;
 53 |   color: $textColor-ModalDialog;
 54 |   width: 90vw;
 55 |   max-width: 960px;
 56 |   min-width: 240px;
 57 |   isolation: isolate;
 58 |   position: relative;
 59 |   display: flex;
 60 |   flex-direction: column;
 61 |   max-height: 80vh;
 62 |   overflow-y: auto;
 63 | }
 64 | 
 65 | .content:focus {
 66 |   outline: none;
 67 | }
 68 | 
 69 | .dialogTitle {
 70 |   flex: 1;
 71 |   margin-bottom: $marginBottom-title-ModalDialog;
 72 |   font-size: t.$fontSize-2xl;
 73 | }
 74 | 
 75 | .innerContent {
 76 |   display: flex;
 77 |   flex-direction: column;
 78 |   min-height: 0;
 79 |   gap: var(--stack-gap-default);
 80 |   flex: 1;
 81 | }
 82 | 
 83 | .closeButton {
 84 |   position: absolute;
 85 |   right: 0.5rem;
 86 |   top: 0.4rem;
 87 | }
 88 | 
 89 | .actions {
 90 |   display: inline-flex;
 91 |   align-items: center;
 92 |   justify-content: flex-end;
 93 | }
 94 | 
 95 | .header {
 96 |   padding: t.$space-2;
 97 |   justify-content: space-between;
 98 |   display: flex;
 99 |   flex-direction: row;
100 |   border-bottom: 1px solid t.$borderColor;
101 | }
102 | 
103 | @media (max-width: 70em) {
104 |   .dialog, .content {
105 |     max-width: 90%;
106 |   }
107 | }
108 | 
109 | @media (max-width: 50em) {
110 |   .dialog, .content {
111 |     width: 100%;
112 |     max-width: calc(100% - #{t.$space-6});
113 |     min-width: 0 !important;
114 |   }
115 | }
116 | 
117 | // --- We export the theme variables to add them to the component renderer
118 | :export {
119 |   themeVars: t.json-stringify($themeVars);
120 | }
121 | 
```

--------------------------------------------------------------------------------
/xmlui/src/components-core/action/FileDownloadAction.tsx:
--------------------------------------------------------------------------------

```typescript
 1 | import type { ComponentDef } from "../../abstractions/ComponentDefs";
 2 | import type { ActionExecutionContext } from "../../abstractions/ActionDefs";
 3 | import type { ApiActionOptions, DownloadOperationDef } from "../RestApiProxy";
 4 | import RestApiProxy from "../RestApiProxy";
 5 | 
 6 | import { createAction } from "./actions";
 7 | 
 8 | export interface DownloadActionComponent extends ComponentDef {
 9 |   props: DownloadOperationDef;
10 | }
11 | 
12 | async function download(
13 |   { state, appContext }: ActionExecutionContext,
14 |   {
15 |     params,
16 |     url,
17 |     queryParams,
18 |     method,
19 |     rawBody,
20 |     body,
21 |     fileName,
22 |     headers,
23 |   }: {
24 |     params: any;
25 |   } & DownloadOperationDef,
26 |   { resolveBindingExpressions }: ApiActionOptions = {}
27 | ) {
28 |   const context = { ...params, ...state };
29 |   const operation: DownloadOperationDef = {
30 |     url,
31 |     queryParams,
32 |     method,
33 |     rawBody,
34 |     body,
35 |     fileName,
36 |     headers,
37 |   };
38 | 
39 |   const api = new RestApiProxy(appContext);
40 |   const _url = api.resolveUrl({ operation, params: context, resolveBindingExpressions });
41 | 
42 |   if (
43 |     (operation.method && (operation.method as string).toLowerCase() !== "get") ||
44 |     Object.keys(appContext.appGlobals?.headers || {}).length !== 0 || //if we have any headers for the api, we can't use the iframe trick
45 |     appContext.apiInterceptorContext.isMocked(_url) //if we mock this url, the mock can't work in an iframe, so we must fall back to download it with the restApiProxy
46 |   ) {
47 |     const file: File = await api.execute({
48 |       operation,
49 |       params: context,
50 |       parseOptions: {
51 |         asFile: true,
52 |       },
53 |       resolveBindingExpressions,
54 |     });
55 |     downloadWithAnchor(file);
56 |   } else {
57 |     downloadInIframe(_url);
58 |   }
59 | }
60 | 
61 | //we use a hidden iframe trick here,
62 | // we set the iframe source as the download url, this way the browser will ask to download the file, and show a progress bar
63 | // (we could use an anchor tag with a download attribute, but in this case we can't show progress )
64 | // we can use it if we don't have to add extra headers to the request in order to download a file (pre-signed urls, or public urls)
65 | function downloadInIframe(fileUrl: string) {
66 |   const iframe = document.createElement("iframe");
67 |   iframe.style.display = "none";
68 |   iframe.hidden = true;
69 |   iframe.name = fileUrl;
70 |   iframe.id = `download-iframe_${fileUrl}`;
71 |   iframe.src = fileUrl;
72 |   document.body.appendChild(iframe);
73 |   setTimeout(() => {
74 |     iframe.remove();
75 |   }, 20000);
76 | }
77 | 
78 | // we can use it if we do have to add extra headers to the request in order to download a file (urls require authentication)
79 | function downloadWithAnchor(file: File) {
80 |   const url = window.URL.createObjectURL(file);
81 |   const a = document.createElement("a");
82 |   a.style.display = "none";
83 |   a.href = url;
84 |   // the filename you want
85 |   a.download = file.name;
86 |   document.body.appendChild(a);
87 |   a.click();
88 |   window.URL.revokeObjectURL(url);
89 | }
90 | 
91 | export const downloadAction = createAction("download", download);
92 | 
```

--------------------------------------------------------------------------------
/xmlui/scripts/inline-links.mjs:
--------------------------------------------------------------------------------

```
 1 | import * as fs from "fs";
 2 | import * as path from "path";
 3 | 
 4 | const includedFileExtensions = [".mdx", ".md"];
 5 | 
 6 | // Read the file contents
 7 | const fileContent = fs.readFileSync("../docs/meta/pages.js", "utf-8");
 8 | 
 9 | // Match lines like: export const NAME = "value";
10 | const regex = /export const (\w+)\s*=\s*["'`](.*?)["'`];/g;
11 | 
12 | const constants = {};
13 | let match;
14 | while ((match = regex.exec(fileContent)) !== null) {
15 |   const [, key, value] = match;
16 |   constants[key] = value;
17 | }
18 | 
19 | inlineLinks("../docs/pages");
20 | 
21 | function inlineLinks(pagesFolder) {
22 |   traverseDirectory({ name: "", path: pagesFolder }, (item, _) => {
23 |     /**
24 |      * name: the folder's/file's name (eg. "hello-app-engine")
25 |      * path: the path to the root of the given folder from the project root (eg. "src/apps/1_basic/samples/hello-app-engine")
26 |      * parent: parent node
27 |      * children: children file/folder names
28 |      */
29 |     if (fs.statSync(item.path).isDirectory()) {
30 |       // Node is a folder
31 |     } else {
32 |       // Node is a file
33 |       if (includedFileExtensions.includes(path.extname(item.name))) {
34 |         console.log(item.name);
35 |         const mdxContent = fs.readFileSync(item.path, "utf-8");
36 |         
37 |         const regex = /<SmartLink\s+href=\{([^}]+)\}>/g;
38 |         const newMdxContent = mdxContent.replace(regex, (_, hrefExpr) => {
39 |           return `<SmartLink href="${constants[hrefExpr] || ''}">`;
40 |         });
41 | 
42 |         fs.writeFileSync(item.path, newMdxContent);
43 |       }
44 |     }
45 |   });
46 | }
47 | 
48 | /**
49 |  * Recursive function that traverses a given folder and applies an optional function on
50 |  * each of the folders/files found inside.
51 |  */
52 | export function traverseDirectory(node, visitor, level = 0) {
53 |   level++;
54 |   const dirContents = fs.readdirSync(node.path);
55 |   if (!node.children) node.children = dirContents;
56 |   for (const itemName of dirContents) {
57 |     const itemPath = [winPathToPosix(node.path), itemName].join(path.posix.sep);
58 |     const itemIsDir = fs.statSync(itemPath).isDirectory();
59 |     const childNode = {
60 |       name: itemName,
61 |       path: itemPath,
62 |       parent: node,
63 |     };
64 |     visitor && visitor(childNode, level);
65 |     if (itemIsDir) {
66 |       traverseDirectory(childNode, visitor, level);
67 |     }
68 |   }
69 | }
70 | 
71 | /**
72 |  * Multi-liner (commented and compatible with really old javascript versions)
73 |  * Source: https://stackoverflow.com/a/62732509
74 |  */
75 | export function winPathToPosix(windowsPath) {
76 |   // handle the edge-case of Window's long file names
77 |   // See: https://learn.microsoft.com/en-us/windows/win32/fileio/naming-a-file#short-vs-long-names
78 |   windowsPath = windowsPath.replace(/^\\\\\?\\/, "");
79 | 
80 |   // convert the separators, valid since both \ and / can't be in a windows filename
81 |   windowsPath = windowsPath.replace(/\\/g, "/");
82 | 
83 |   // compress any // or /// to be just /, which is a safe oper under POSIX
84 |   // and prevents accidental errors caused by manually doing path1+path2
85 |   windowsPath = windowsPath.replace(/\/\/+/g, "/");
86 | 
87 |   return windowsPath;
88 | }
89 | 
```

--------------------------------------------------------------------------------
/xmlui/src/components/Stack/VStack.spec.ts:
--------------------------------------------------------------------------------

```typescript
 1 | import { test, expect } from "../../testing/fixtures";
 2 | 
 3 | // =============================================================================
 4 | // BASIC FUNCTIONALITY TESTS
 5 | // =============================================================================
 6 | 
 7 | test.describe("Basic Functionality", () => {
 8 |   test("renders items vertically", async ({ initTestBed, page }) => {
 9 |     await initTestBed(`
10 |       <VStack testId="vstack">
11 |         <Stack testId="item1" height="32px" width="32px" backgroundColor="red" />
12 |         <Stack testId="item2" height="32px" width="32px" backgroundColor="blue" />
13 |         <Stack testId="item3" height="32px" width="32px" backgroundColor="green" />
14 |       </VStack>
15 |     `);
16 | 
17 |     const vstack = page.getByTestId("vstack");
18 |     const item1 = page.getByTestId("item1");
19 |     const item2 = page.getByTestId("item2");
20 |     const item3 = page.getByTestId("item3");
21 | 
22 |     await expect(vstack).toBeVisible();
23 |     await expect(item1).toBeVisible();
24 |     await expect(item2).toBeVisible();
25 |     await expect(item3).toBeVisible();
26 | 
27 |     // Get bounding boxes to verify vertical layout
28 |     const item1Box = await item1.boundingBox();
29 |     const item2Box = await item2.boundingBox();
30 |     const item3Box = await item3.boundingBox();
31 | 
32 |     // Verify items are stacked vertically (item2 should be below item1, item3 below item2)
33 |     expect(item2Box!.y).toBeGreaterThan(item1Box!.y + item1Box!.height - 1); // -1 for floating point tolerance
34 |     expect(item3Box!.y).toBeGreaterThan(item2Box!.y + item2Box!.height - 1); // -1 for floating point tolerance
35 | 
36 |     // Verify items are horizontally aligned (should start at roughly the same x position)
37 |     expect(Math.abs(item1Box!.x - item2Box!.x)).toBeLessThan(1);
38 |     expect(Math.abs(item2Box!.x - item3Box!.x)).toBeLessThan(1);
39 |   });
40 | 
41 |   test("renders empty VStack", async ({ initTestBed, page }) => {
42 |     await initTestBed(`<VStack testId="vstack"></VStack>`);
43 |     
44 |     const vstack = page.getByTestId("vstack");
45 |     await expect(vstack).toBeAttached();
46 |     await expect(vstack).toBeEmpty();
47 |   });
48 | 
49 |   test("ignores orientation property", async ({ initTestBed, page }) => {
50 |     await initTestBed(`
51 |       <VStack testId="vstack" orientation="horizontal">
52 |         <Stack testId="item1" height="32px" width="32px" backgroundColor="red" />
53 |         <Stack testId="item2" height="32px" width="32px" backgroundColor="blue" />
54 |       </VStack>
55 |     `);
56 | 
57 |     const item1 = page.getByTestId("item1");
58 |     const item2 = page.getByTestId("item2");
59 | 
60 |     await expect(item1).toBeVisible();
61 |     await expect(item2).toBeVisible();
62 | 
63 |     // Get bounding boxes to verify still renders vertically despite orientation="horizontal"
64 |     const item1Box = await item1.boundingBox();
65 |     const item2Box = await item2.boundingBox();
66 | 
67 |     // Verify items are still stacked vertically (orientation prop should be ignored)
68 |     expect(item2Box!.y).toBeGreaterThan(item1Box!.y + item1Box!.height - 1);
69 |   });
70 | });
71 | 
```

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

```typescript
 1 | import { createComponentRenderer } from "../../components-core/renderers";
 2 | import { MemoizedItem } from "../container-helpers";
 3 | import { createMetadata, d } from "../metadata-helpers";
 4 | import { OptionNative, defaultProps } from "./OptionNative";
 5 | 
 6 | const COMP = "Option";
 7 | 
 8 | export const OptionMd = createMetadata({
 9 |   status: "stable",
10 |   description:
11 |     "`Option` defines selectable items for choice-based components, providing both " +
12 |     "the underlying value and display text for selection interfaces. It serves as " +
13 |     "a non-visual data structure that describes individual choices within " +
14 |     "[Select](/components/Select), [AutoComplete](/components/AutoComplete), " +
15 |     "and other selection components.",
16 |   props: {
17 |     label: d(
18 |       `This property defines the text to display for the option. If \`label\` is not defined, ` +
19 |       `\`Option\` will use the \`value\` as the label.`,
20 |     ),
21 |     value: d(
22 |       "This property defines the value of the option. If `value` is not defined, " +
23 |       "`Option` will use the `label` as the value. If neither is defined, " +
24 |       "the option is not displayed.",
25 |     ),
26 |     enabled: {
27 |       description: "This boolean property indicates whether the option is enabled or disabled.",
28 |       valueType: "boolean",
29 |       defaultValue: defaultProps.enabled,
30 |     },
31 |     keywords: d(
32 |       "An array of keywords that can be used for searching and filtering the option. " +
33 |       "These keywords are not displayed but help users find the option through search.",
34 |     ),
35 |   },
36 | });
37 | 
38 | export const optionComponentRenderer = createComponentRenderer(
39 |   COMP,
40 |   OptionMd,
41 |   ({ node, extractValue, className, renderChild, layoutContext }) => {
42 |     const label = extractValue.asOptionalString(node.props.label);
43 |     let value = extractValue(node.props.value);
44 |     if (label === undefined && value === undefined) {
45 |       return null;
46 |     }
47 | 
48 |     const hasTextNodeChild = node.children?.length === 1 && (node.children[0].type === "TextNode" || node.children[0].type === "TextNodeCData");
49 |     const textNodeChild = hasTextNodeChild ? renderChild(node.children) as string : undefined;
50 | 
51 |     return (
52 |       <OptionNative
53 |         label={label || textNodeChild}
54 |         value={value !== undefined && value !== "" ? value : label}
55 |         enabled={extractValue.asOptionalBoolean(node.props.enabled)}
56 |         keywords={extractValue.asOptionalStringArray(node.props.keywords)}
57 |         className={className}
58 |         optionRenderer={
59 |           node.children?.length > 0
60 |             ? !hasTextNodeChild ? (contextVars) => (
61 |               <MemoizedItem
62 |                 node={node.children}
63 |                 renderChild={renderChild}
64 |                 contextVars={contextVars}
65 |                 layoutContext={layoutContext}
66 |               />
67 |             ) : undefined
68 |             : undefined
69 |         }
70 |       >
71 |         {!hasTextNodeChild && renderChild(node.children)}
72 |       </OptionNative>
73 |     );
74 |   },
75 | );
76 | 
```

