This is page 5 of 137. Use http://codebase.md/xmlui-org/xmlui?lines=false&page={x} to view the full context.
# Directory Structure
```
├── .changeset
│ ├── cold-items-taste.md
│ ├── config.json
│ ├── empty-spiders-dress.md
│ ├── shy-windows-allow.md
│ ├── sour-coins-read.md
│ ├── tame-zebras-invite.md
│ ├── three-ideas-invent.md
│ ├── twenty-jeans-watch.md
│ └── warm-spies-melt.md
├── .eslintrc.cjs
├── .github
│ ├── build-checklist.png
│ ├── ISSUE_TEMPLATE
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ └── workflows
│ ├── deploy-docs-optimized.yml
│ ├── deploy-docs.yml
│ ├── prepare-versions.yml
│ ├── release-packages.yml
│ ├── run-all-tests.yml
│ └── run-smoke-tests.yml
├── .gitignore
├── .prettierrc.js
├── .vscode
│ ├── launch.json
│ └── settings.json
├── blog
│ ├── .gitignore
│ ├── .gitkeep
│ ├── CHANGELOG.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── blog
│ │ │ ├── images
│ │ │ │ ├── blog-page-component.png
│ │ │ │ ├── blog-scrabble.png
│ │ │ │ ├── integrated-blog-search.png
│ │ │ │ └── lorem-ipsum.png
│ │ │ ├── lorem-ipsum.md
│ │ │ ├── newest-post.md
│ │ │ ├── older-post.md
│ │ │ └── welcome-to-the-xmlui-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
│ │ │ └── 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
│ │ │ └── PageNotFound.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
├── 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
│ │ │ │ ├── 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
│ │ │ │ ├── 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
│ ├── 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
│ │ └── tsconfig.json
│ ├── 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
│ │ ├── tsconfig.json
│ │ └── 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
│ │ └── tsconfig.json
│ ├── 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
│ │ └── tsconfig.json
│ ├── 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
│ │ └── tsconfig.json
│ ├── xmlui-playground
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── hooks
│ │ │ │ ├── usePlayground.ts
│ │ │ │ └── useToast.ts
│ │ │ ├── index.tsx
│ │ │ ├── playground
│ │ │ │ ├── Box.module.scss
│ │ │ │ ├── Box.tsx
│ │ │ │ ├── CodeSelector.tsx
│ │ │ │ ├── ConfirmationDialog.module.scss
│ │ │ │ ├── ConfirmationDialog.tsx
│ │ │ │ ├── Editor.tsx
│ │ │ │ ├── Header.module.scss
│ │ │ │ ├── Header.tsx
│ │ │ │ ├── Playground.tsx
│ │ │ │ ├── PlaygroundContent.module.scss
│ │ │ │ ├── PlaygroundContent.tsx
│ │ │ │ ├── PlaygroundNative.module.scss
│ │ │ │ ├── PlaygroundNative.tsx
│ │ │ │ ├── Preview.module.scss
│ │ │ │ ├── Preview.tsx
│ │ │ │ ├── Select.module.scss
│ │ │ │ ├── StandalonePlayground.tsx
│ │ │ │ ├── StandalonePlaygroundNative.module.scss
│ │ │ │ ├── StandalonePlaygroundNative.tsx
│ │ │ │ ├── ThemeSwitcher.module.scss
│ │ │ │ ├── ThemeSwitcher.tsx
│ │ │ │ ├── ToneSwitcher.tsx
│ │ │ │ ├── Tooltip.module.scss
│ │ │ │ ├── Tooltip.tsx
│ │ │ │ └── utils.ts
│ │ │ ├── providers
│ │ │ │ ├── Toast.module.scss
│ │ │ │ └── ToastProvider.tsx
│ │ │ ├── state
│ │ │ │ └── store.ts
│ │ │ ├── themes
│ │ │ │ └── theme.ts
│ │ │ └── utils
│ │ │ └── helpers.ts
│ │ └── tsconfig.json
│ ├── 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
│ │ └── tsconfig.json
│ ├── xmlui-spreadsheet
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── index.tsx
│ │ │ ├── Spreadsheet.tsx
│ │ │ └── SpreadsheetNative.tsx
│ │ └── tsconfig.json
│ └── 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.tsx
│ │ │ └── HeroSectionNative.tsx
│ │ ├── index.tsx
│ │ ├── ScrollToTop
│ │ │ ├── ScrollToTop.module.scss
│ │ │ ├── ScrollToTop.tsx
│ │ │ └── ScrollToTopNative.tsx
│ │ └── vite-env.d.ts
│ └── tsconfig.json
├── 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.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
│ ├── actions.md
│ ├── AppRoot.md
│ ├── component-apis.md
│ ├── component-rendering.md
│ ├── component-review-checklist.md
│ ├── containers.md
│ ├── data-sources.md
│ ├── e2e-summary.md
│ ├── expression-evaluation.md
│ ├── glossary.md
│ ├── helper-components.md
│ ├── index.md
│ ├── loaders.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
│ ├── rendering-fundamentals.md
│ ├── reusable-components.md
│ ├── standalone-apps.md
│ ├── state-management.md
│ └── xmlui-extensibility.xlsx
├── package.json
├── playwright.config.ts
├── scripts
│ ├── coverage-only.js
│ ├── e2e-test-summary.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
│ ├── get-langserver-metadata.mjs
│ ├── 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.spec.ts
│ │ │ │ ├── LabelList.tsx
│ │ │ │ ├── LabelListNative.module.scss
│ │ │ │ └── LabelListNative.tsx
│ │ │ ├── Legend
│ │ │ │ ├── Legend.spec.ts
│ │ │ │ ├── Legend.tsx
│ │ │ │ └── LegendNative.tsx
│ │ │ ├── LineChart
│ │ │ │ ├── LineChart.md
│ │ │ │ ├── LineChart.module.scss
│ │ │ │ ├── LineChart.spec.ts
│ │ │ │ ├── LineChart.tsx
│ │ │ │ └── LineChartNative.tsx
│ │ │ ├── PieChart
│ │ │ │ ├── PieChart.md
│ │ │ │ ├── PieChart.spec.ts
│ │ │ │ ├── PieChart.tsx
│ │ │ │ ├── PieChartNative.module.scss
│ │ │ │ └── PieChartNative.tsx
│ │ │ ├── RadarChart
│ │ │ │ ├── RadarChart.md
│ │ │ │ ├── RadarChart.spec.ts
│ │ │ │ ├── RadarChart.tsx
│ │ │ │ └── RadarChartNative.tsx
│ │ │ ├── Tooltip
│ │ │ │ ├── TooltipContent.module.scss
│ │ │ │ ├── TooltipContent.spec.ts
│ │ │ │ └── TooltipContent.tsx
│ │ │ └── utils
│ │ │ ├── abstractions.ts
│ │ │ └── ChartProvider.tsx
│ │ ├── Checkbox
│ │ │ ├── Checkbox.md
│ │ │ ├── Checkbox.spec.ts
│ │ │ └── Checkbox.tsx
│ │ ├── CodeBlock
│ │ │ ├── CodeBlock.module.scss
│ │ │ ├── CodeBlock.spec.ts
│ │ │ ├── CodeBlock.tsx
│ │ │ ├── CodeBlockNative.tsx
│ │ │ └── highlight-code.ts
│ │ ├── collectedComponentMetadata.ts
│ │ ├── ColorPicker
│ │ │ ├── ColorPicker.md
│ │ │ ├── ColorPicker.module.scss
│ │ │ ├── ColorPicker.spec.ts
│ │ │ ├── ColorPicker.tsx
│ │ │ └── ColorPickerNative.tsx
│ │ ├── Column
│ │ │ ├── Column.md
│ │ │ ├── Column.tsx
│ │ │ ├── ColumnNative.tsx
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ └── TableContext.tsx
│ │ ├── component-utils.ts
│ │ ├── ComponentProvider.tsx
│ │ ├── ComponentRegistryContext.tsx
│ │ ├── container-helpers.tsx
│ │ ├── ContentSeparator
│ │ │ ├── ContentSeparator.md
│ │ │ ├── ContentSeparator.module.scss
│ │ │ ├── ContentSeparator.spec.ts
│ │ │ ├── ContentSeparator.tsx
│ │ │ └── ContentSeparatorNative.tsx
│ │ ├── DataSource
│ │ │ ├── DataSource.md
│ │ │ └── DataSource.tsx
│ │ ├── DateInput
│ │ │ ├── DateInput.md
│ │ │ ├── DateInput.module.scss
│ │ │ ├── DateInput.spec.ts
│ │ │ ├── DateInput.tsx
│ │ │ └── DateInputNative.tsx
│ │ ├── DatePicker
│ │ │ ├── DatePicker.md
│ │ │ ├── DatePicker.module.scss
│ │ │ ├── DatePicker.spec.ts
│ │ │ ├── DatePicker.tsx
│ │ │ └── DatePickerNative.tsx
│ │ ├── DropdownMenu
│ │ │ ├── DropdownMenu.md
│ │ │ ├── DropdownMenu.module.scss
│ │ │ ├── DropdownMenu.spec.ts
│ │ │ ├── DropdownMenu.tsx
│ │ │ ├── DropdownMenuNative.tsx
│ │ │ ├── MenuItem.md
│ │ │ └── SubMenuItem.md
│ │ ├── EmojiSelector
│ │ │ ├── EmojiSelector.md
│ │ │ ├── EmojiSelector.spec.ts
│ │ │ ├── EmojiSelector.tsx
│ │ │ └── EmojiSelectorNative.tsx
│ │ ├── ExpandableItem
│ │ │ ├── ExpandableItem.module.scss
│ │ │ ├── ExpandableItem.spec.ts
│ │ │ ├── ExpandableItem.tsx
│ │ │ └── ExpandableItemNative.tsx
│ │ ├── FileInput
│ │ │ ├── FileInput.md
│ │ │ ├── FileInput.module.scss
│ │ │ ├── FileInput.spec.ts
│ │ │ ├── FileInput.tsx
│ │ │ └── FileInputNative.tsx
│ │ ├── FileUploadDropZone
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FileUploadDropZone.module.scss
│ │ │ ├── FileUploadDropZone.spec.ts
│ │ │ ├── FileUploadDropZone.tsx
│ │ │ └── FileUploadDropZoneNative.tsx
│ │ ├── FlowLayout
│ │ │ ├── FlowLayout.md
│ │ │ ├── FlowLayout.module.scss
│ │ │ ├── FlowLayout.spec.ts
│ │ │ ├── FlowLayout.spec.ts-snapshots
│ │ │ │ └── Edge-cases-boxShadow-is-not-clipped-1-non-smoke-darwin.png
│ │ │ ├── FlowLayout.tsx
│ │ │ └── FlowLayoutNative.tsx
│ │ ├── Footer
│ │ │ ├── Footer.md
│ │ │ ├── Footer.module.scss
│ │ │ ├── Footer.spec.ts
│ │ │ ├── Footer.tsx
│ │ │ └── FooterNative.tsx
│ │ ├── Form
│ │ │ ├── Form.md
│ │ │ ├── Form.module.scss
│ │ │ ├── Form.spec.ts
│ │ │ ├── Form.tsx
│ │ │ ├── formActions.ts
│ │ │ ├── FormContext.ts
│ │ │ └── FormNative.tsx
│ │ ├── FormItem
│ │ │ ├── FormItem.md
│ │ │ ├── FormItem.module.scss
│ │ │ ├── FormItem.spec.ts
│ │ │ ├── FormItem.tsx
│ │ │ ├── FormItemNative.tsx
│ │ │ ├── HelperText.module.scss
│ │ │ ├── HelperText.tsx
│ │ │ ├── ItemWithLabel.tsx
│ │ │ └── Validations.ts
│ │ ├── FormSection
│ │ │ ├── FormSection.md
│ │ │ ├── FormSection.ts
│ │ │ └── FormSection.xmlui
│ │ ├── Fragment
│ │ │ ├── Fragment.spec.ts
│ │ │ └── Fragment.tsx
│ │ ├── Heading
│ │ │ ├── abstractions.ts
│ │ │ ├── H1.md
│ │ │ ├── H1.spec.ts
│ │ │ ├── H2.md
│ │ │ ├── H2.spec.ts
│ │ │ ├── H3.md
│ │ │ ├── H3.spec.ts
│ │ │ ├── H4.md
│ │ │ ├── H4.spec.ts
│ │ │ ├── H5.md
│ │ │ ├── H5.spec.ts
│ │ │ ├── H6.md
│ │ │ ├── H6.spec.ts
│ │ │ ├── Heading.md
│ │ │ ├── Heading.module.scss
│ │ │ ├── Heading.spec.ts
│ │ │ ├── Heading.tsx
│ │ │ └── HeadingNative.tsx
│ │ ├── HoverCard
│ │ │ ├── HoverCard.tsx
│ │ │ └── HovercardNative.tsx
│ │ ├── HtmlTags
│ │ │ ├── HtmlTags.module.scss
│ │ │ ├── HtmlTags.spec.ts
│ │ │ └── HtmlTags.tsx
│ │ ├── Icon
│ │ │ ├── AdmonitionDanger.tsx
│ │ │ ├── AdmonitionInfo.tsx
│ │ │ ├── AdmonitionNote.tsx
│ │ │ ├── AdmonitionTip.tsx
│ │ │ ├── AdmonitionWarning.tsx
│ │ │ ├── ApiIcon.tsx
│ │ │ ├── ArrowDropDown.module.scss
│ │ │ ├── ArrowDropDown.tsx
│ │ │ ├── ArrowDropUp.module.scss
│ │ │ ├── ArrowDropUp.tsx
│ │ │ ├── ArrowLeft.module.scss
│ │ │ ├── ArrowLeft.tsx
│ │ │ ├── ArrowRight.module.scss
│ │ │ ├── ArrowRight.tsx
│ │ │ ├── Attach.tsx
│ │ │ ├── Binding.module.scss
│ │ │ ├── Binding.tsx
│ │ │ ├── BoardIcon.tsx
│ │ │ ├── BoxIcon.tsx
│ │ │ ├── CheckIcon.tsx
│ │ │ ├── ChevronDownIcon.tsx
│ │ │ ├── ChevronLeft.tsx
│ │ │ ├── ChevronRight.tsx
│ │ │ ├── ChevronUpIcon.tsx
│ │ │ ├── CodeFileIcon.tsx
│ │ │ ├── CodeSandbox.tsx
│ │ │ ├── CompactListIcon.tsx
│ │ │ ├── ContentCopyIcon.tsx
│ │ │ ├── DarkToLightIcon.tsx
│ │ │ ├── DatabaseIcon.module.scss
│ │ │ ├── DatabaseIcon.tsx
│ │ │ ├── DocFileIcon.tsx
│ │ │ ├── DocIcon.tsx
│ │ │ ├── DotMenuHorizontalIcon.tsx
│ │ │ ├── DotMenuIcon.tsx
│ │ │ ├── EmailIcon.tsx
│ │ │ ├── EmptyFolderIcon.tsx
│ │ │ ├── ErrorIcon.tsx
│ │ │ ├── ExpressionIcon.tsx
│ │ │ ├── FillPlusCricleIcon.tsx
│ │ │ ├── FilterIcon.tsx
│ │ │ ├── FolderIcon.tsx
│ │ │ ├── GlobeIcon.tsx
│ │ │ ├── HomeIcon.tsx
│ │ │ ├── HyperLinkIcon.tsx
│ │ │ ├── Icon.md
│ │ │ ├── Icon.module.scss
│ │ │ ├── Icon.spec.ts
│ │ │ ├── Icon.tsx
│ │ │ ├── IconNative.tsx
│ │ │ ├── ImageFileIcon.tsx
│ │ │ ├── Inspect.tsx
│ │ │ ├── LightToDark.tsx
│ │ │ ├── LinkIcon.tsx
│ │ │ ├── ListIcon.tsx
│ │ │ ├── LooseListIcon.tsx
│ │ │ ├── MoonIcon.tsx
│ │ │ ├── MoreOptionsIcon.tsx
│ │ │ ├── NoSortIcon.tsx
│ │ │ ├── PDFIcon.tsx
│ │ │ ├── PenIcon.tsx
│ │ │ ├── PhoneIcon.tsx
│ │ │ ├── PhotoIcon.tsx
│ │ │ ├── PlusIcon.tsx
│ │ │ ├── SearchIcon.tsx
│ │ │ ├── ShareIcon.tsx
│ │ │ ├── SortAscendingIcon.tsx
│ │ │ ├── SortDescendingIcon.tsx
│ │ │ ├── StarsIcon.tsx
│ │ │ ├── SunIcon.tsx
│ │ │ ├── svg
│ │ │ │ ├── admonition_danger.svg
│ │ │ │ ├── admonition_info.svg
│ │ │ │ ├── admonition_note.svg
│ │ │ │ ├── admonition_tip.svg
│ │ │ │ ├── admonition_warning.svg
│ │ │ │ ├── api.svg
│ │ │ │ ├── arrow-dropdown.svg
│ │ │ │ ├── arrow-left.svg
│ │ │ │ ├── arrow-right.svg
│ │ │ │ ├── arrow-up.svg
│ │ │ │ ├── attach.svg
│ │ │ │ ├── binding.svg
│ │ │ │ ├── box.svg
│ │ │ │ ├── bulb.svg
│ │ │ │ ├── code-file.svg
│ │ │ │ ├── code-sandbox.svg
│ │ │ │ ├── dark_to_light.svg
│ │ │ │ ├── database.svg
│ │ │ │ ├── doc.svg
│ │ │ │ ├── empty-folder.svg
│ │ │ │ ├── expression.svg
│ │ │ │ ├── eye-closed.svg
│ │ │ │ ├── eye-dark.svg
│ │ │ │ ├── eye.svg
│ │ │ │ ├── file-text.svg
│ │ │ │ ├── filter.svg
│ │ │ │ ├── folder.svg
│ │ │ │ ├── img.svg
│ │ │ │ ├── inspect.svg
│ │ │ │ ├── light_to_dark.svg
│ │ │ │ ├── moon.svg
│ │ │ │ ├── pdf.svg
│ │ │ │ ├── photo.svg
│ │ │ │ ├── share.svg
│ │ │ │ ├── stars.svg
│ │ │ │ ├── sun.svg
│ │ │ │ ├── trending-down.svg
│ │ │ │ ├── trending-level.svg
│ │ │ │ ├── trending-up.svg
│ │ │ │ ├── txt.svg
│ │ │ │ ├── unknown-file.svg
│ │ │ │ ├── unlink.svg
│ │ │ │ └── xls.svg
│ │ │ ├── TableDeleteColumnIcon.tsx
│ │ │ ├── TableDeleteRowIcon.tsx
│ │ │ ├── TableInsertColumnIcon.tsx
│ │ │ ├── TableInsertRowIcon.tsx
│ │ │ ├── TrashIcon.tsx
│ │ │ ├── TrendingDownIcon.tsx
│ │ │ ├── TrendingLevelIcon.tsx
│ │ │ ├── TrendingUpIcon.tsx
│ │ │ ├── TxtIcon.tsx
│ │ │ ├── UnknownFileIcon.tsx
│ │ │ ├── UnlinkIcon.tsx
│ │ │ ├── UserIcon.tsx
│ │ │ ├── WarningIcon.tsx
│ │ │ └── XlsIcon.tsx
│ │ ├── IconProvider.tsx
│ │ ├── IconRegistryContext.tsx
│ │ ├── IFrame
│ │ │ ├── IFrame.md
│ │ │ ├── IFrame.module.scss
│ │ │ ├── IFrame.spec.ts
│ │ │ ├── IFrame.tsx
│ │ │ └── IFrameNative.tsx
│ │ ├── Image
│ │ │ ├── Image.md
│ │ │ ├── Image.module.scss
│ │ │ ├── Image.spec.ts
│ │ │ ├── Image.tsx
│ │ │ └── ImageNative.tsx
│ │ ├── Input
│ │ │ ├── index.ts
│ │ │ ├── InputAdornment.module.scss
│ │ │ ├── InputAdornment.tsx
│ │ │ ├── InputDivider.module.scss
│ │ │ ├── InputDivider.tsx
│ │ │ ├── InputLabel.module.scss
│ │ │ ├── InputLabel.tsx
│ │ │ ├── PartialInput.module.scss
│ │ │ └── PartialInput.tsx
│ │ ├── InspectButton
│ │ │ ├── InspectButton.module.scss
│ │ │ └── InspectButton.tsx
│ │ ├── Items
│ │ │ ├── Items.md
│ │ │ ├── Items.spec.ts
│ │ │ ├── Items.tsx
│ │ │ └── ItemsNative.tsx
│ │ ├── Link
│ │ │ ├── Link.md
│ │ │ ├── Link.module.scss
│ │ │ ├── Link.spec.ts
│ │ │ ├── Link.tsx
│ │ │ └── LinkNative.tsx
│ │ ├── List
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── List.md
│ │ │ ├── List.module.scss
│ │ │ ├── List.spec.ts
│ │ │ ├── List.tsx
│ │ │ └── ListNative.tsx
│ │ ├── Logo
│ │ │ ├── doc-resources
│ │ │ │ └── xmlui-logo.svg
│ │ │ ├── Logo.md
│ │ │ ├── Logo.tsx
│ │ │ └── LogoNative.tsx
│ │ ├── Markdown
│ │ │ ├── CodeText.module.scss
│ │ │ ├── CodeText.tsx
│ │ │ ├── Markdown.md
│ │ │ ├── Markdown.module.scss
│ │ │ ├── Markdown.spec.ts
│ │ │ ├── Markdown.tsx
│ │ │ ├── MarkdownNative.tsx
│ │ │ ├── parse-binding-expr.ts
│ │ │ └── utils.ts
│ │ ├── metadata-helpers.ts
│ │ ├── ModalDialog
│ │ │ ├── ConfirmationModalContextProvider.tsx
│ │ │ ├── Dialog.module.scss
│ │ │ ├── Dialog.tsx
│ │ │ ├── ModalDialog.md
│ │ │ ├── ModalDialog.module.scss
│ │ │ ├── ModalDialog.spec.ts
│ │ │ ├── ModalDialog.tsx
│ │ │ ├── ModalDialogNative.tsx
│ │ │ └── ModalVisibilityContext.tsx
│ │ ├── NavGroup
│ │ │ ├── NavGroup.md
│ │ │ ├── NavGroup.module.scss
│ │ │ ├── NavGroup.spec.ts
│ │ │ ├── NavGroup.tsx
│ │ │ ├── NavGroupContext.ts
│ │ │ └── NavGroupNative.tsx
│ │ ├── NavLink
│ │ │ ├── NavLink.md
│ │ │ ├── NavLink.module.scss
│ │ │ ├── NavLink.spec.ts
│ │ │ ├── NavLink.tsx
│ │ │ └── NavLinkNative.tsx
│ │ ├── NavPanel
│ │ │ ├── NavPanel.md
│ │ │ ├── NavPanel.module.scss
│ │ │ ├── NavPanel.spec.ts
│ │ │ ├── NavPanel.tsx
│ │ │ └── NavPanelNative.tsx
│ │ ├── NestedApp
│ │ │ ├── AppWithCodeView.module.scss
│ │ │ ├── AppWithCodeView.tsx
│ │ │ ├── AppWithCodeViewNative.tsx
│ │ │ ├── defaultProps.tsx
│ │ │ ├── logo.svg
│ │ │ ├── NestedApp.module.scss
│ │ │ ├── NestedApp.tsx
│ │ │ ├── NestedAppNative.tsx
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.tsx
│ │ │ └── utils.ts
│ │ ├── NoResult
│ │ │ ├── NoResult.md
│ │ │ ├── NoResult.module.scss
│ │ │ ├── NoResult.spec.ts
│ │ │ ├── NoResult.tsx
│ │ │ └── NoResultNative.tsx
│ │ ├── NumberBox
│ │ │ ├── numberbox-abstractions.ts
│ │ │ ├── NumberBox.md
│ │ │ ├── NumberBox.module.scss
│ │ │ ├── NumberBox.spec.ts
│ │ │ ├── NumberBox.tsx
│ │ │ └── NumberBoxNative.tsx
│ │ ├── Option
│ │ │ ├── Option.md
│ │ │ ├── Option.spec.ts
│ │ │ ├── Option.tsx
│ │ │ ├── OptionNative.tsx
│ │ │ └── OptionTypeProvider.tsx
│ │ ├── PageMetaTitle
│ │ │ ├── PageMetaTilteNative.tsx
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── PageMetaTitle.spec.ts
│ │ │ └── PageMetaTitle.tsx
│ │ ├── Pages
│ │ │ ├── Page.md
│ │ │ ├── Pages.md
│ │ │ ├── Pages.module.scss
│ │ │ ├── Pages.tsx
│ │ │ └── PagesNative.tsx
│ │ ├── Pagination
│ │ │ ├── Pagination.md
│ │ │ ├── Pagination.module.scss
│ │ │ ├── Pagination.spec.ts
│ │ │ ├── Pagination.tsx
│ │ │ └── PaginationNative.tsx
│ │ ├── PositionedContainer
│ │ │ ├── PositionedContainer.module.scss
│ │ │ ├── PositionedContainer.tsx
│ │ │ └── PositionedContainerNative.tsx
│ │ ├── ProfileMenu
│ │ │ ├── ProfileMenu.module.scss
│ │ │ └── ProfileMenu.tsx
│ │ ├── ProgressBar
│ │ │ ├── ProgressBar.md
│ │ │ ├── ProgressBar.module.scss
│ │ │ ├── ProgressBar.spec.ts
│ │ │ ├── ProgressBar.tsx
│ │ │ └── ProgressBarNative.tsx
│ │ ├── Queue
│ │ │ ├── Queue.md
│ │ │ ├── Queue.spec.ts
│ │ │ ├── Queue.tsx
│ │ │ ├── queueActions.ts
│ │ │ └── QueueNative.tsx
│ │ ├── RadioGroup
│ │ │ ├── RadioGroup.md
│ │ │ ├── RadioGroup.module.scss
│ │ │ ├── RadioGroup.spec.ts
│ │ │ ├── RadioGroup.tsx
│ │ │ ├── RadioGroupNative.tsx
│ │ │ ├── RadioItem.tsx
│ │ │ └── RadioItemNative.tsx
│ │ ├── RealTimeAdapter
│ │ │ ├── RealTimeAdapter.tsx
│ │ │ └── RealTimeAdapterNative.tsx
│ │ ├── Redirect
│ │ │ ├── Redirect.md
│ │ │ ├── Redirect.spec.ts
│ │ │ └── Redirect.tsx
│ │ ├── ResponsiveBar
│ │ │ ├── README.md
│ │ │ ├── ResponsiveBar.md
│ │ │ ├── ResponsiveBar.module.scss
│ │ │ ├── ResponsiveBar.spec.ts
│ │ │ ├── ResponsiveBar.tsx
│ │ │ └── ResponsiveBarNative.tsx
│ │ ├── Select
│ │ │ ├── HiddenOption.tsx
│ │ │ ├── MultiSelectOption.tsx
│ │ │ ├── OptionContext.ts
│ │ │ ├── Select.md
│ │ │ ├── Select.module.scss
│ │ │ ├── Select.spec.ts
│ │ │ ├── Select.tsx
│ │ │ ├── SelectContext.tsx
│ │ │ ├── SelectNative.tsx
│ │ │ ├── SelectOption.tsx
│ │ │ └── SimpleSelect.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
│ │ │ ├── BehaviorContext.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
│ │ │ ├── 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.mjs
│ ├── 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
│ │ │ ├── ModalDialogDriver.ts
│ │ │ ├── NumberBoxDriver.ts
│ │ │ ├── TextBoxDriver.ts
│ │ │ ├── TimeInputDriver.ts
│ │ │ ├── TimerDriver.ts
│ │ │ └── TreeDriver.ts
│ │ ├── fixtures.ts
│ │ ├── infrastructure
│ │ │ ├── index.html
│ │ │ ├── main.tsx
│ │ │ ├── public
│ │ │ │ ├── mockServiceWorker.js
│ │ │ │ ├── resources
│ │ │ │ │ ├── bell.svg
│ │ │ │ │ ├── box.svg
│ │ │ │ │ ├── doc.svg
│ │ │ │ │ ├── eye.svg
│ │ │ │ │ ├── flower-640x480.jpg
│ │ │ │ │ ├── sun.svg
│ │ │ │ │ ├── test-image-100x100.jpg
│ │ │ │ │ └── txt.svg
│ │ │ │ └── serve.json
│ │ │ └── TestBed.tsx
│ │ └── themed-app-test-helpers.ts
│ └── vite-env.d.ts
├── tests
│ ├── components
│ │ ├── CodeBlock
│ │ │ └── hightlight-code.test.ts
│ │ ├── playground-pattern.test.ts
│ │ └── Tree
│ │ └── Tree-states.test.ts
│ ├── components-core
│ │ ├── abstractions
│ │ │ └── treeAbstractions.test.ts
│ │ ├── container
│ │ │ └── buildProxy.test.ts
│ │ ├── interception
│ │ │ ├── orderBy.test.ts
│ │ │ ├── ReadOnlyCollection.test.ts
│ │ │ └── request-param-converter.test.ts
│ │ ├── scripts-runner
│ │ │ ├── AttributeValueParser.test.ts
│ │ │ ├── eval-tree-arrow-async.test.ts
│ │ │ ├── eval-tree-arrow.test.ts
│ │ │ ├── eval-tree-func-decl-async.test.ts
│ │ │ ├── eval-tree-func-decl.test.ts
│ │ │ ├── eval-tree-pre-post.test.ts
│ │ │ ├── eval-tree-regression.test.ts
│ │ │ ├── eval-tree.test.ts
│ │ │ ├── function-proxy.test.ts
│ │ │ ├── parser-regression.test.ts
│ │ │ ├── process-event.test.ts
│ │ │ ├── process-function.test.ts
│ │ │ ├── process-implicit-context.test.ts
│ │ │ ├── process-statement-asgn.test.ts
│ │ │ ├── process-statement-destruct.test.ts
│ │ │ ├── process-statement-regs.test.ts
│ │ │ ├── process-statement-sync.test.ts
│ │ │ ├── process-statement.test.ts
│ │ │ ├── process-switch-sync.test.ts
│ │ │ ├── process-switch.test.ts
│ │ │ ├── process-try-sync.test.ts
│ │ │ ├── process-try.test.ts
│ │ │ └── test-helpers.ts
│ │ ├── test-metadata-handler.ts
│ │ ├── theming
│ │ │ ├── border-segments.test.ts
│ │ │ ├── component-layout.resolver.test.ts
│ │ │ ├── layout-property-parser.test.ts
│ │ │ ├── layout-resolver.test.ts
│ │ │ ├── layout-resolver2.test.ts
│ │ │ ├── layout-vp-override.test.ts
│ │ │ └── padding-segments.test.ts
│ │ └── utils
│ │ ├── date-utils.test.ts
│ │ ├── format-human-elapsed-time.test.ts
│ │ └── LruCache.test.ts
│ ├── language-server
│ │ ├── completion.test.ts
│ │ ├── format.test.ts
│ │ ├── hover.test.ts
│ │ └── mockData.ts
│ └── parsers
│ ├── common
│ │ └── input-stream.test.ts
│ ├── markdown
│ │ └── parse-binding-expression.test.ts
│ ├── parameter-parser.test.ts
│ ├── paremeter-parser.test.ts
│ ├── scripting
│ │ ├── eval-tree-arrow.test.ts
│ │ ├── eval-tree-pre-post.test.ts
│ │ ├── eval-tree.test.ts
│ │ ├── function-proxy.test.ts
│ │ ├── lexer-literals.test.ts
│ │ ├── lexer-misc.test.ts
│ │ ├── module-parse.test.ts
│ │ ├── parser-arrow.test.ts
│ │ ├── parser-assignments.test.ts
│ │ ├── parser-binary.test.ts
│ │ ├── parser-destructuring.test.ts
│ │ ├── parser-errors.test.ts
│ │ ├── parser-expressions.test.ts
│ │ ├── parser-function.test.ts
│ │ ├── parser-literals.test.ts
│ │ ├── parser-primary.test.ts
│ │ ├── parser-regex.test.ts
│ │ ├── parser-statements.test.ts
│ │ ├── parser-unary.test.ts
│ │ ├── process-event.test.ts
│ │ ├── process-implicit-context.test.ts
│ │ ├── process-statement-asgn.test.ts
│ │ ├── process-statement-destruct.test.ts
│ │ ├── process-statement-regs.test.ts
│ │ ├── process-statement-sync.test.ts
│ │ ├── process-statement.test.ts
│ │ ├── process-switch-sync.test.ts
│ │ ├── process-switch.test.ts
│ │ ├── process-try-sync.test.ts
│ │ ├── process-try.test.ts
│ │ ├── simplify-expression.test.ts
│ │ ├── statement-hooks.test.ts
│ │ └── test-helpers.ts
│ ├── style-parser
│ │ ├── generateHvarChain.test.ts
│ │ ├── parseHVar.test.ts
│ │ ├── parser.test.ts
│ │ └── tokens.test.ts
│ └── xmlui
│ ├── lint.test.ts
│ ├── parser.test.ts
│ ├── scanner.test.ts
│ ├── transform.attr.test.ts
│ ├── transform.circular.test.ts
│ ├── transform.element.test.ts
│ ├── transform.errors.test.ts
│ ├── transform.escape.test.ts
│ ├── transform.regression.test.ts
│ ├── transform.script.test.ts
│ ├── transform.test.ts
│ └── xmlui.ts
├── tests-e2e
│ ├── api-bound-component-regression.spec.ts
│ ├── api-call-as-extracted-component.spec.ts
│ ├── assign-to-object-or-array-regression.spec.ts
│ ├── binding-regression.spec.ts
│ ├── children-as-template-context-vars.spec.ts
│ ├── compound-component.spec.ts
│ ├── context-vars-regression.spec.ts
│ ├── data-bindings.spec.ts
│ ├── datasource-and-api-usage-in-var.spec.ts
│ ├── datasource-direct-binding.spec.ts
│ ├── datasource-onLoaded-regression.spec.ts
│ ├── modify-array-item-regression.spec.ts
│ ├── namespaces.spec.ts
│ ├── push-to-array-regression.spec.ts
│ ├── screen-breakpoints.spec.ts
│ ├── scripting.spec.ts
│ ├── state-scope-in-pages.spec.ts
│ └── state-var-scopes.spec.ts
├── tsconfig.bin.json
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── vitest.config.ts
```
# Files
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/svg/binding.svg:
--------------------------------------------------------------------------------
```
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 13C10.4295 13.5741 10.9774 14.0491 11.6066 14.3929C12.2357 14.7367 12.9315 14.9411 13.6467 14.9923C14.3618 15.0435 15.0796 14.9403 15.7513 14.6897C16.4231 14.4392 17.0331 14.047 17.54 13.54L20.54 10.54C21.4508 9.59695 21.9548 8.33394 21.9434 7.02296C21.932 5.71198 21.4061 4.45791 20.4791 3.53087C19.5521 2.60383 18.298 2.07799 16.987 2.0666C15.676 2.0552 14.413 2.55918 13.47 3.46997L11.75 5.17997" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14.0002 11.0012C13.5707 10.4271 13.0228 9.95202 12.3936 9.60826C11.7645 9.2645 11.0687 9.06009 10.3535 9.00887C9.63841 8.95765 8.92061 9.06083 8.24885 9.31142C7.5771 9.56201 6.96709 9.95413 6.4602 10.4612L3.4602 13.4612C2.54941 14.4042 2.04544 15.6672 2.05683 16.9782C2.06822 18.2892 2.59407 19.5433 3.52111 20.4703C4.44815 21.3973 5.70221 21.9232 7.01319 21.9346C8.32418 21.946 9.58719 21.442 10.5302 20.5312L12.2402 18.8212" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
```
--------------------------------------------------------------------------------
/xmlui/src/components/Charts/Legend/LegendNative.tsx:
--------------------------------------------------------------------------------
```typescript
import * as RechartsPrimitive from "recharts";
import { useLegend } from "../utils/ChartProvider";
import { useEffect, useMemo } from "react";
import type {
HorizontalAlignmentType,
VerticalAlignmentType,
} from "recharts/types/component/DefaultLegendContent";
const RLegend = RechartsPrimitive.Legend;
type Props = {
verticalAlign?: VerticalAlignmentType;
align?: HorizontalAlignmentType;
};
export const verticalAlignmentValues: readonly VerticalAlignmentType[] = [
"top",
"bottom",
"middle",
] as const;
export const horizontalAlignmentValues: readonly HorizontalAlignmentType[] = [
"left",
"right",
"center",
] as const;
export const defaultProps: Pick<Props, "verticalAlign" | "align"> = {
verticalAlign: "bottom",
align: "center",
};
export const Legend = ({
verticalAlign = defaultProps.verticalAlign,
align = defaultProps.align,
}: Props) => {
const { setLegend } = useLegend();
const content = useMemo(
() => <RLegend align={align} verticalAlign={verticalAlign} />,
[align, verticalAlign],
);
useEffect(() => {
setLegend(content);
}, [content, setLegend]);
return null;
};
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/svg/photo.svg:
--------------------------------------------------------------------------------
```
<svg viewBox="0 0 22 28" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_1960_14734)"> <path d="M22.2271 7.38281L16.304 5.74219L14.6117 0H1.91936C0.984697 0 0.227051 0.734508 0.227051 1.64062V26.3594C0.227051 27.2655 0.984697 28 1.91936 28H20.5347C21.4694 28 22.2271 27.2655 22.2271 26.3594V7.38281Z" fill="#F2F2F2"/> <path d="M22.2271 7.38281V26.3594C22.2271 27.2655 21.4695 28 20.5348 28H11.3625V0H14.6117L16.304 5.74219L22.2271 7.38281Z" fill="#F2F2F2"/> <path d="M22.227 7.38281H16.3039C15.3731 7.38281 14.6116 6.64453 14.6116 5.74219V0C14.8316 0 15.0516 0.0820312 15.2038 0.246148L21.9731 6.80865C22.1423 6.95625 22.227 7.16953 22.227 7.38281Z" fill="#E1E1E1"/> <path d="M9 17L14.1962 21.5H3.80385L9 17Z" fill="#8BDC6F"/> <path d="M13 14L18.1963 21.5H7.80396L13 14Z" fill="#8BDC6F"/> <circle cx="7" cy="11" r="2" fill="#EFC942"/> </g> <defs> <clipPath id="clip0_1960_14734"> <rect width="22" height="28" fill="white"/> </clipPath> </defs></svg>
```
--------------------------------------------------------------------------------
/docs/content/components/xmlui-animations/FadeAnimation.md:
--------------------------------------------------------------------------------
```markdown
# FadeAnimation [#fadeanimation]
The `FadeAnimation` component represents an animation that fades the content with adjustable opacity values.
## Properties
### `animateWhenInView`
Indicates whether the animation should start when the component is in view
### `delay` (default: 0)
The delay before the animation starts in milliseconds
### `duration`
The duration of the animation in milliseconds
### `from` (default: 0)
Sets the initial opacity of the content.If the `to` property is not set, the initial opacity set here will be used as the final opacity.
### `loop` (default: false)
Indicates whether the animation should loop
### `reverse` (default: false)
Indicates whether the animation should run in reverse
### `to` (default: 1)
Sets the final opacity of the content.If the `from` property is not set, the initial opacity set here will be used as the final opacity.
## Events
### `started`
Event fired when the animation starts
### `stopped`
Event fired when the animation stops
## Exposed Methods
### `start`
Starts the animation
### `stop`
Stops the animation
## Styling
This component does not have any styles.
```
--------------------------------------------------------------------------------
/docs/content/extensions/xmlui-animations/FadeAnimation.md:
--------------------------------------------------------------------------------
```markdown
# FadeAnimation [#fadeanimation]
The `FadeAnimation` component represents an animation that fades the content with adjustable opacity values.
## Properties
### `animateWhenInView`
Indicates whether the animation should start when the component is in view
### `delay` (default: 0)
The delay before the animation starts in milliseconds
### `duration`
The duration of the animation in milliseconds
### `from` (default: 0)
Sets the initial opacity of the content.If the `to` property is not set, the initial opacity set here will be used as the final opacity.
### `loop` (default: false)
Indicates whether the animation should loop
### `reverse` (default: false)
Indicates whether the animation should run in reverse
### `to` (default: 1)
Sets the final opacity of the content.If the `from` property is not set, the initial opacity set here will be used as the final opacity.
## Events
### `started`
Event fired when the animation starts
### `stopped`
Event fired when the animation stops
## Exposed Methods
### `start`
Starts the animation
### `stop`
Stops the animation
## Styling
This component does not have any styles.
```
--------------------------------------------------------------------------------
/docs/public/pages/howto/delegate-a-method.md:
--------------------------------------------------------------------------------
```markdown
# Delegate a method
Use `method.` attributes to directly delegate to internal component methods:
```xmlui-pg height="350px"
---app display
<App>
<H3>Method Delegation Example</H3>
<Button
label="Open Modal"
onClick="myModal.openDialog()" />
<MyModalWrapper id="myModal" title="Hello World!" />
</App>
---comp display
<Component
name="MyModalWrapper"
method.openDialog="internalModal.open()"
method.close="internalModal.close()">
<ModalDialog
id="internalModal"
title="{$props.title}"
maxWidth="400px">
<VStack>
<Text>This uses method.openDialog="internalModal.open()"</Text>
<Text>Direct delegation - no custom logic needed</Text>
<Button
label="Close"
onClick="internalModal.close()" />
</VStack>
</ModalDialog>
</Component>
```
**Use delegation when**: You want to expose internal methods directly without adding custom logic.
**Pros**: Simple, no JavaScript needed, clean syntax
**Cons**: No custom logic, just passes through calls
**See also**: [Expose a method from a component](/howto/expose-a-method-from-a-component) for adding custom logic to methods.
```
--------------------------------------------------------------------------------
/docs/public/pages/mcp.md:
--------------------------------------------------------------------------------
```markdown
# xmlui-mcp: Model Context Protocol server for XMLUI
The Model Context Procotol (MCP) enables AI agents to use third-party tools. If you are using an agent like Claude or Cursor, you can equip them with a set of XMLUI-specific tools so they can:
- list available XMLUI components
- review documentation for a component
- search XMLUI source code and apps
- list and search XMLUI How To docs
- help you build your own XMLUI app
The xmlui-mcp tookit is available [here](https://github.com/xmlui-org/xmlui-mcp). To use it, clone that repo and also the [XMLUI repo](https://github.com/xmlui-org/xmlui) to create this layout.
```xmlui-tree
<root>
xmlui
xmlui-mcp
```
This is an example of a conversation with Claude in which it uses some of the xmlui-mcp tools.
<img width="737" alt="image" src="https://github.com/user-attachments/assets/1f87519c-1338-4eca-a730-9f2e0c1a64a9" />
<img width="788" alt="image" src="https://github.com/user-attachments/assets/4793a475-46d1-418e-ad6a-0760af53ddca" />
See the [README](https://github.com/xmlui-org/xmlui-mcp?tab=readme-ov-file#configure) for details on configuring and using the MCP toolkit.
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/svg/attach.svg:
--------------------------------------------------------------------------------
```
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
<g id="surface1">
<path stroke="none" fill-rule="nonzero" fill-opacity="1" d="M 9.886719 5.171875 L 6.113281 8.941406 C 5.855469 9.203125 5.855469 9.625 6.113281 9.886719 C 6.375 10.144531 6.796875 10.144531 7.058594 9.886719 L 10.828125 6.113281 C 11.609375 5.332031 11.609375 4.066406 10.828125 3.285156 C 10.046875 2.503906 8.78125 2.503906 8 3.285156 L 4.230469 7.058594 C 2.925781 8.359375 2.925781 10.46875 4.230469 11.769531 C 5.53125 13.074219 7.640625 13.074219 8.941406 11.769531 L 12.714844 8 L 13.65625 8.941406 L 9.886719 12.714844 C 8.0625 14.535156 5.109375 14.535156 3.285156 12.714844 C 1.464844 10.890625 1.464844 7.9375 3.285156 6.113281 L 7.058594 2.34375 C 8.359375 1.042969 10.46875 1.042969 11.769531 2.34375 C 13.074219 3.644531 13.074219 5.753906 11.769531 7.058594 L 8 10.828125 C 7.21875 11.609375 5.953125 11.609375 5.171875 10.828125 C 4.390625 10.046875 4.390625 8.78125 5.171875 8 L 8.941406 4.230469 Z M 9.886719 5.171875 "/>
</g>
</svg>
```
--------------------------------------------------------------------------------
/xmlui/src/components/ChangeListener/ChangeListenerNative.tsx:
--------------------------------------------------------------------------------
```typescript
import { useEffect, useMemo } from "react";
import { isEqual, throttle } from "lodash-es";
import { usePrevious } from "../../components-core/utils/hooks";
// =====================================================================================================================
// React ChangeListener component implementation
type Props = {
listenTo: any;
onChange?: (newValue: any) => void;
throttleWaitInMs?: number;
};
export const defaultProps: Pick<Props, "throttleWaitInMs"> = {
throttleWaitInMs: 0,
};
export function ChangeListener({ listenTo, onChange, throttleWaitInMs = defaultProps.throttleWaitInMs }: Props) {
const prevValue = usePrevious(listenTo);
const throttledOnChange = useMemo(() => {
if (throttleWaitInMs !== 0 && onChange) {
return throttle(onChange, throttleWaitInMs, {
leading: true,
});
}
return onChange;
}, [onChange, throttleWaitInMs]);
useEffect(() => {
if (throttledOnChange && !isEqual(prevValue, listenTo)) {
throttledOnChange?.({
prevValue,
newValue: listenTo,
});
}
}, [listenTo, throttledOnChange, prevValue]);
return null;
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/Charts/LabelList/LabelListNative.tsx:
--------------------------------------------------------------------------------
```typescript
import styles from "./LabelListNative.module.scss";
import type { LabelPosition } from "recharts/types/component/Label";
import type { CSSProperties } from "react";
import { useEffect, useMemo } from "react";
import { LabelList as RLabelList } from "recharts";
import { useChart, useLabelList } from "../utils/ChartProvider";
import classnames from "classnames";
type Props = {
position: LabelPosition;
nameKey?: string;
style?: CSSProperties;
className?: string;
};
export const defaultProps: Pick<Props, "position"> = {
position: "inside",
};
export const LabelList = ({ position = defaultProps.position, nameKey: key, style, className }: Props) => {
const { nameKey } = useChart();
const { setLabelList } = useLabelList();
const content = useMemo(
() => (
<RLabelList
key={"labelList"}
position={position}
className={classnames(styles.labelList, className)}
dataKey={key || nameKey}
stroke="none"
style={style}
/>
),
[key, nameKey, position, style, className],
);
useEffect(() => {
setLabelList(content);
}, [content, setLabelList]);
return null;
};
```
--------------------------------------------------------------------------------
/packages/xmlui-playground/CHANGELOG.md:
--------------------------------------------------------------------------------
```markdown
# xmlui-playground
## 0.1.10
### Patch Changes
- 39e5d67: refactor: xmlui-playground
## 0.1.9
### Patch Changes
- b390690: improve: xmlui-playground - toast message on share
## 0.1.8
### Patch Changes
- 8f03ada: feat: show a helloworld app in the playground if no other content loads; add share button to the header
## 0.1.7
### Patch Changes
- 79c1d8a: fix: allow the playground to use the same tone as its source
## 0.1.6
### Patch Changes
- 7d255a9: Changed open in new window button tooltip label for all occurrences.
- Updated dependencies [7d255a9]
- [email protected]
## 0.1.5
### Patch Changes
- 2a461d8: NestedApp works with ApiInterceptor
- Updated dependencies [f5b9f15]
- [email protected]
## 0.1.4
### Patch Changes
- 2e88539: improve: add Tooltip to DevTools
- Updated dependencies [2e88539]
- [email protected]
## 0.1.3
### Patch Changes
- 3eab4a3: improve: design updates - devtools, playground, docs
- Updated dependencies [3eab4a3]
- [email protected]
## 0.1.2
### Patch Changes
- bae8280: rework preview component
## 0.1.1
### Patch Changes
- 4019d82: xmlui-playground, new exports from xmlui
```
--------------------------------------------------------------------------------
/docs/content/components/LabelList.md:
--------------------------------------------------------------------------------
```markdown
# LabelList [#labellist]
`LabelList` adds custom data labels to chart components when automatic labeling isn't sufficient. It's a specialized component for advanced chart customization scenarios where you need precise control over label positioning and appearance.
## Properties [#properties]
### `key` [#key]
The key that needs to be matched to the data series.
### `position` (default: "inside") [#position-default-inside]
The position of the label list
Available values: `top`, `left`, `right`, `bottom`, `inside` **(default)**, `outside`, `insideLeft`, `insideRight`, `insideTop`, `insideBottom`, `insideTopLeft`, `insideBottomLeft`, `insideTopRight`, `insideBottomRight`, `insideStart`, `insideEnd`, `end`, `center`, `centerTop`, `centerBottom`, `middle`
## Events [#events]
This component does not have any events.
## Exposed Methods [#exposed-methods]
This component does not expose any methods.
## Styling [#styling]
### Theme Variables [#theme-variables]
| Variable | Default Value (Light) | Default Value (Dark) |
| --- | --- | --- |
| [textColor](../styles-and-themes/common-units/#color)-LabelList | $textColor-primary | $textColor-primary |
```
--------------------------------------------------------------------------------
/xmlui/src/parsers/style-parser/StyleInputStream.ts:
--------------------------------------------------------------------------------
```typescript
// This class represents the input stream of the layout parser
export class StyleInputStream {
// --- Current stream position
private _pos = 0;
// Creates a stream that uses the specified source code
constructor (public readonly source: string) {}
// Gets the current position in the stream. Starts from 0.
get position (): number {
return this._pos;
}
// Peeks the next character in the stream. Returns null, if EOF; otherwise the current source code character
peek (): string | null {
return this.ahead(0);
}
// Looks ahead with `n` characters in the stream. Returns null, if EOF; otherwise the look-ahead character
ahead (n: number = 1): string | null {
return this._pos + n > this.source.length - 1 ? null : this.source[this._pos + n];
}
// Gets the next character from the stream
get (): string | null {
// --- Check for EOF
if (this._pos >= this.source.length) {
return null;
}
// --- Get the char, and keep track of position
return this.source[this._pos++];
}
// Gets the tail of the input stream
getTail (start: number): string {
return this.source?.substring(start) ?? "";
}
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/Spinner/Spinner.md:
--------------------------------------------------------------------------------
```markdown
%-DESC-START
While it is visible, the action is yet to be completed; on completion, the UI logic may opt to remove the component.
## Using the `Spinner`
```xmlui-pg copy display name="Example: using Spinner"
<App>
<Spinner />
</App>
```
>[!INFO]
> `Spinner` ignores the `width`, `minWidth`, `maxWidth`, `height`, `minHeight`, and `maxHeight` properties. If you want to change its size, use the `size-Spinner` theme variable (see details is the [Styling](#styling) section).
%-DESC-END
%-PROP-START delay
Use the buttons to toggle between the two `Spinners`.
```xmlui-pg copy {8-9} display name="Example: delay"
<App>
<variable name="noDelay" value="{true}" />
<variable name="yesDelay" value="{false}" />
<HStack gap="$space-0_5">
<Button label="No delay" onClick="noDelay = true; yesDelay = false;" />
<Button label="1000 ms delay" onClick="noDelay = false; yesDelay = true;" />
</HStack>
<Spinner when="{noDelay}" delay="0" />
<Spinner when="{yesDelay}" delay="1000" />
</App>
```
%-PROP-END
%-PROP-START fullScreen
```xmlui-pg copy display name="Example: fullScreen" height="200px"
<App>
<Spinner fullScreen="true" />
</App>
```
%-PROP-END
```
--------------------------------------------------------------------------------
/docs/public/pages/howto/modify-a-value-reported-in-a-column.md:
--------------------------------------------------------------------------------
```markdown
# Modify a value reported in a Column
```xmlui-pg noHeader
---app
<App>
<Test />
</App>
---comp display
<Component name="Test">
<DataSource
id="invoices_with_badges"
url="/resources/files/invoices.json"
transformResult="{data => data.slice(0,5)}"
/>
<Table data="{invoices_with_badges}">
<Column bindTo="invoice_number" /> <!-- empty tag for bound column -->
<Column bindTo="client" />
<Column bindTo="issue_date" />
<Column bindTo="due_date" />
<Column bindTo="paid_date" />
<Column header="total">
${$item.total} <!-- unbound column, prepend $ to the $item value -->
</Column>
<Column header="status">
<StatusBadge status="{$item.status}" /> <!-- embed component, pass value -->
</Column>
</Table>
</Component>
---comp display
<Component
name="StatusBadge"
var.statusColors="{{
draft: { background: '#f59e0b', label: 'white' },
sent: { background: '#3b82f6', label: 'white' },
paid: { background: '#10b981', label: 'white' }
}}"
>
<Badge
value="{$props.status}"
colorMap="{statusColors}"
variant="pill"
/>
</Component>
```
```
--------------------------------------------------------------------------------
/docs/public/resources/images/logos/xmlui5.svg:
--------------------------------------------------------------------------------
```
<svg width="75" height="32" viewBox="0 0 75 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="46" y="2" width="29" height="21" fill="#DA020F"/>
<path d="M7.93731 13.2963L12.4267 20H9.21133L6.11729 14.9646L3.02326 20H0L4.40849 13.1345L0.283114 6.69363H3.39737L6.25885 11.4863L9.06977 6.69363H12.1132L7.93731 13.2963ZM26.6878 13.7007C26.6878 13.276 26.6878 12.939 26.6878 12.6896C26.6945 12.4334 26.7417 11.3987 26.8294 9.58544H26.7485L23.3107 20H20.7323L17.527 9.56522H17.4461C17.5607 11.756 17.618 13.1716 17.618 13.8119V20H15.1003V6.69363H18.9325L22.0872 16.8655H22.1377L25.4745 6.69363H29.3167V20H26.6878V13.7007ZM41.8888 20H33.6785V6.69363H36.4995V17.6744H41.8888V20Z" fill="black"/>
<path d="M59.585 6.69363H62.406V15.3084C62.4195 16.7846 61.9241 17.971 60.9197 18.8675C59.9153 19.7641 58.5705 20.2022 56.8853 20.182C55.1664 20.182 53.8351 19.7438 52.8914 18.8675C51.9544 17.9845 51.4859 16.7846 51.4859 15.2679V6.69363H54.2968V14.8433C54.2968 15.8814 54.5024 16.6363 54.9136 17.1082C55.3315 17.58 56.0056 17.816 56.9358 17.816C57.8728 17.816 58.5469 17.5767 58.9581 17.0981C59.376 16.6195 59.585 15.8611 59.585 14.8231V6.69363ZM69.48 20H66.6589V6.69363H69.48V20Z" fill="white"/>
</svg>
```
--------------------------------------------------------------------------------
/xmlui/tests/components-core/scripts-runner/test-helpers.ts:
--------------------------------------------------------------------------------
```typescript
import { Expression, Statement } from "../../../src/components-core/script-runner/ScriptingSourceTree";
import { BindingTreeEvaluationContext } from "../../../src/components-core/script-runner/BindingTreeEvaluationContext";
import { Parser } from "../../../src/parsers/scripting/Parser";
export function createEvalContext (parts: Partial<BindingTreeEvaluationContext>): BindingTreeEvaluationContext {
return {
...{
mainThread: {
childThreads: [],
blocks: [{ vars: {} }],
loops: [],
breakLabelValue: -1
}
},
...parts
};
}
export function parseStatements (source: string): Statement[] {
const wParser = new Parser(source);
const tree = wParser.parseStatements();
if (tree === null) {
// --- This should happen only there were errors during the parse phase
throw new Error("Source code parsing failed");
}
return tree;
}
export function parseExpression (source: string): Expression {
const wParser = new Parser(source);
const tree = wParser.parseExpr();
if (tree === null) {
// --- This should happen only there were errors during the parse phase
throw new Error("Source code parsing failed");
}
return tree;
}
```
--------------------------------------------------------------------------------
/tools/create-app/helpers/copy.ts:
--------------------------------------------------------------------------------
```typescript
import { async as glob } from "fast-glob";
import path from "path";
import fs from "fs";
interface CopyOption {
cwd?: string;
rename?: (basename: string) => string;
parents?: boolean;
}
const identity = (x: string) => x;
export const copy = async (
src: string | string[],
dest: string,
{ cwd, rename = identity, parents = true }: CopyOption = {}
) => {
const source = typeof src === "string" ? [src] : src;
if (source.length === 0 || !dest) {
throw new TypeError("`src` and `dest` are required");
}
const sourceFiles = await glob(source, {
cwd,
dot: true,
absolute: false,
stats: false,
});
const destRelativeToCwd = cwd ? path.resolve(cwd, dest) : dest;
return Promise.all(
sourceFiles.map(async (p) => {
const dirname = path.dirname(p);
const basename = rename(path.basename(p));
const from = cwd ? path.resolve(cwd, p) : p;
const to = parents ? path.join(destRelativeToCwd, dirname, basename) : path.join(destRelativeToCwd, basename);
// Ensure the destination directory exists
await fs.promises.mkdir(path.dirname(to), { recursive: true });
return fs.promises.copyFile(from, to);
})
);
};
```
--------------------------------------------------------------------------------
/docs/public/pages/howto/expose-a-method-from-a-component.md:
--------------------------------------------------------------------------------
```markdown
# Expose a method from a component
Use the `<method>` element to create custom methods with JavaScript logic:
```xmlui-pg height="350px"
---app display
<App>
<H3>Custom Method Example</H3>
<Button
label="Open Modal"
onClick="myModal.openDialog()" />
<MyModalWrapper id="myModal" title="Hello World!" />
</App>
---comp display
<Component name="MyModalWrapper">
<ModalDialog id="internalModal" title="{$props.title}" maxWidth="400px">
<VStack gap="$space-3" padding="$space-4">
<Text>This uses a custom method with JavaScript logic</Text>
<Text>Check the console for the log message</Text>
<Button
label="Close"
onClick="internalModal.close()" />
</VStack>
</ModalDialog>
<method name="openDialog">
console.log('Custom method called - opening modal');
internalModal.open();
</method>
</Component>
```
**Use custom methods when**: You need to add logging, validation, or other logic before/after calling internal methods.
**Pros**: Full JavaScript control, can add custom logic
**Cons**: More complex, requires JavaScript knowledge
**See also**: [Delegate a method](/howto/delegate-a-method) for a simpler approach without custom logic.
```
--------------------------------------------------------------------------------
/xmlui/src/components/Footer/FooterNative.tsx:
--------------------------------------------------------------------------------
```typescript
import type { ForwardedRef, ReactNode } from "react";
import type React from "react";
import { forwardRef } from "react";
import classnames from "classnames";
import styles from "./Footer.module.scss";
import { useAppLayoutContext } from "../App/AppLayoutContext";
// =====================================================================================================================
// React Footer component implementation
export const defaultProps = {
// No default props needed currently, but adding object for consistency
};
export const Footer = forwardRef(function Footer(
{
children,
style,
className,
...rest
}: {
children: ReactNode;
style?: React.CSSProperties;
className?: string;
},
forwardedRef: ForwardedRef<HTMLDivElement>,
) {
const { layout } = useAppLayoutContext() || {};
const canRestrictContentWidth = layout !== "vertical-full-header";
return (
<div {...rest} className={styles.outerWrapper} ref={forwardedRef} style={style} role="contentinfo">
<div
className={classnames(styles.wrapper, className, {
[styles.full]: !canRestrictContentWidth,
})}
>
{children}
</div>
</div>
);
});
```
--------------------------------------------------------------------------------
/xmlui/src/components/EmojiSelector/EmojiSelector.tsx:
--------------------------------------------------------------------------------
```typescript
import { createComponentRenderer } from "../../components-core/renderers";
import { useTheme } from "../../components-core/theming/ThemeContext";
import { createMetadata, d, dAutoFocus } from "../metadata-helpers";
import { EmojiSelector } from "./EmojiSelectorNative";
import { defaultProps } from "./EmojiSelectorNative";
const COMP = "EmojiSelector";
export const EmojiSelectorMd = createMetadata({
status: "experimental",
description:
"`EmojiSelector` enables users to browse, search and select emojis from " +
"their system's native emoji set.",
props: {
autoFocus: {
...dAutoFocus(),
defaultValue: defaultProps.autoFocus,
},
},
events: {
select: d(`This event is fired when the user selects an emoticon from this component.`),
},
});
export const emojiSelectorRenderer = createComponentRenderer(
COMP,
EmojiSelectorMd,
({ node, lookupEventHandler, extractValue }) => {
const onActionSelect = lookupEventHandler("select");
const theme = useTheme();
return (
<EmojiSelector
select={onActionSelect}
theme={theme.activeThemeTone as any}
autoFocus={extractValue.asOptionalBoolean(node.props.autoFocus)}
/>
);
},
);
```
--------------------------------------------------------------------------------
/docs/public/pages/xmlui-animations/_overview.md:
--------------------------------------------------------------------------------
```markdown
## Xmlui Animations Package
This package contains components that deal with different sorts of animations.
These components can wrap other components and provide different sorts of animations that run when the child component visibility changes.
## Package Components
| Component | Description | Status |
| :---: | --- | :---: |
| [Animation](./xmlui-animations/Animation) | | experimental |
| [FadeAnimation](./xmlui-animations/FadeAnimation) | The `FadeAnimation` component represents an animation that fades the content with adjustable opacity values. | experimental |
| [FadeInAnimation](./xmlui-animations/FadeInAnimation) | The `FadeInAnimation` component represents an animation that fades in the content. | experimental |
| [FadeOutAnimation](./xmlui-animations/FadeOutAnimation) | The `FadeOutAnimation` component represents an animation that fades out the content. | experimental |
| [ScaleAnimation](./xmlui-animations/ScaleAnimation) | The `ScaleAnimation` component represents an animation that scales the content. | experimental |
| [SlideInAnimation](./xmlui-animations/SlideInAnimation) | The `SlideInAnimation` component represents an animation that slides in the content from the left. | experimental |
```
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
```json
{
"name": "xmlui-root",
"version": "1.0.0",
"description": "Root folder of XMLUI",
"private": true,
"workspaces": [
"./xmlui",
"./docs",
"./blog",
"./tools/create-app",
"./tools/vscode",
"./packages/*"
],
"devDependencies": {
"@changesets/cli": "^2.29.4",
"@typescript-eslint/eslint-plugin": "^8.15.0",
"turbo": "^2.5.6"
},
"packageManager": "[email protected]",
"scripts": {
"changeset:add": "changeset add",
"changeset:version": "changeset version",
"changeset:publish": "changeset publish",
"build-xmlui": "turbo run build:xmlui-all",
"build-vscode-extension": "turbo run xmlui-vscode#build:vsix",
"test-xmlui:ci": "CI=true npm run test-xmlui",
"test-xmlui:ci-win": "set CI=true && npm run test-xmlui",
"test-xmlui": "turbo run build:xmlui-all test:xmlui-all",
"test-xmlui-smoke": "turbo run build:xmlui-all test:xmlui-smoke",
"publish-packages": "turbo run build:xmlui-all test:xmlui-all && npm run changeset:publish",
"build-extensions": "turbo run build:extension",
"build-docs": "turbo run build:docs",
"watch-docs-content": "turbo watch generate-docs-summaries",
"generate-docs": "turbo run generate-docs"
}
}
```
--------------------------------------------------------------------------------
/docs/public/resources/images/logos/xmlui1.svg:
--------------------------------------------------------------------------------
```
<svg width="65" height="24" viewBox="0 0 65 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.14773 4.45455L7.08097 9.41193H7.1946L10.142 4.45455H13.6151L9.17614 11.7273L13.7145 19H10.1776L7.1946 14.0355H7.08097L4.09801 19H0.575284L5.12784 11.7273L0.660511 4.45455H4.14773ZM15.5611 4.45455H19.3537L23.3594 14.2273H23.5298L27.5355 4.45455H31.3281V19H28.3452V9.53267H28.2244L24.4602 18.929H22.429L18.6648 9.49716H18.544V19H15.5611V4.45455ZM33.8619 19V4.45455H36.9371V16.4645H43.1729V19H33.8619Z" fill="#143566"/>
<path d="M54.1939 4.45455H57.2692V13.9006C57.2692 14.9612 57.0159 15.8892 56.5092 16.6847C56.0073 17.4801 55.3042 18.1004 54.3999 18.5455C53.4955 18.9858 52.442 19.206 51.2393 19.206C50.032 19.206 48.9761 18.9858 48.0717 18.5455C47.1674 18.1004 46.4643 17.4801 45.9624 16.6847C45.4605 15.8892 45.2095 14.9612 45.2095 13.9006V4.45455H48.2848V13.6378C48.2848 14.1918 48.4055 14.6842 48.647 15.1151C48.8932 15.5459 49.2389 15.8845 49.6839 16.1307C50.129 16.3769 50.6475 16.5 51.2393 16.5C51.8359 16.5 52.3544 16.3769 52.7947 16.1307C53.2398 15.8845 53.5831 15.5459 53.8246 15.1151C54.0708 14.6842 54.1939 14.1918 54.1939 13.6378V4.45455ZM62.8746 4.45455V19H59.7994V4.45455H62.8746Z" fill="#DA020F"/>
</svg>
```
--------------------------------------------------------------------------------
/xmlui/src/components/StickyBox/StickyBox.tsx:
--------------------------------------------------------------------------------
```typescript
import styles from "./StickyBox.module.scss";
import { createComponentRenderer } from "../../components-core/renderers";
import { parseScssVar } from "../../components-core/theming/themeVars";
import { StickyBox, defaultProps } from "./StickyBoxNative";
import { createMetadata } from "../metadata-helpers";
const COMP = "StickyBox";
export const StickyBoxMd = createMetadata({
status: "stable",
description:
"`StickyBox` remains fixed at the top or bottom of the screen as the user scrolls.",
props: {
to: {
description:
"This property determines whether the StickyBox should be anchored to " +
"the \`top\` or \`bottom\`.",
availableValues: ["top", "bottom"],
valueType: "string",
defaultValue: defaultProps.to,
},
},
themeVars: parseScssVar(styles.themeVars),
defaultThemeVars: {
[`backgroundColor-${COMP}`]: "$backgroundColor",
},
});
export const stickyBoxComponentRenderer = createComponentRenderer(
COMP,
StickyBoxMd,
({ node, renderChild, extractValue, className }) => {
return (
<StickyBox uid={node.uid} className={className} to={extractValue(node.props?.to)}>
{renderChild(node.children)}
</StickyBox>
);
},
);
```
--------------------------------------------------------------------------------
/xmlui/tests/parsers/scripting/test-helpers.ts:
--------------------------------------------------------------------------------
```typescript
import { BindingTreeEvaluationContext } from "../../../src/components-core/script-runner/BindingTreeEvaluationContext";
import { Parser } from "../../../src/parsers/scripting/Parser";
import {Expression, Statement} from "../../../src/components-core/script-runner/ScriptingSourceTree";
export function createEvalContext (parts: Partial<BindingTreeEvaluationContext>): BindingTreeEvaluationContext {
return {
...{
mainThread: {
childThreads: [],
blocks: [{ vars: {} }],
loops: [],
breakLabelValue: -1
},
valueCache: new Map(),
},
...parts
};
}
export function parseStatements (source: string): Statement[] {
const wParser = new Parser(source);
const tree = wParser.parseStatements();
if (tree === null) {
// --- This should happen only there were errors during the parse phase
throw new Error("Source code parsing failed");
}
return tree;
}
export function parseExpression (source: string): Expression {
const wParser = new Parser(source);
const tree = wParser.parseExpr();
if (tree === null) {
// --- This should happen only there were errors during the parse phase
throw new Error("Source code parsing failed");
}
return tree;
}
```
--------------------------------------------------------------------------------
/packages/xmlui-pdf/src/Pdf.tsx:
--------------------------------------------------------------------------------
```typescript
import { forwardRef, useState } from "react";
import styles from "./Pdf.module.scss";
import { Document, Page, pdfjs } from "react-pdf";
import workerUrl from "pdfjs-dist/build/pdf.worker.min.mjs?url";
import "react-pdf/dist/Page/TextLayer.css";
import "react-pdf/dist/Page/AnnotationLayer.css";
//
pdfjs.GlobalWorkerOptions.workerSrc = workerUrl;
// =====================================================================================================================
// React Pdf component implementation
interface Props {
src?: string;
data?: any; // Binary data for PDF content
}
const Pdf = forwardRef(({ src, data }: Props, ref) => {
const [numPages, setNumPages] = useState<number | null>(null);
function onLoadSuccess({ numPages }: { numPages: number }) {
setNumPages(numPages);
}
// Use data if provided, otherwise use src
const fileSource = data || src;
return (
<Document
file={fileSource}
onLoadSuccess={onLoadSuccess}
className={styles.document}
inputRef={ref as any}
>
{Array.from(new Array(numPages), (_, index) => (
<Page key={index + 1} pageNumber={index + 1} loading="" className={styles.page} />
))}
</Document>
);
});
export default Pdf;
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/script-runner/bannedFunctions.ts:
--------------------------------------------------------------------------------
```typescript
/**
* Checks if the specified function object is banned from running.
* @param func Function to check
* @return Information about the banned state, including a helper text
*/
export function isBannedFunction(func: any): BannedFunctionResult {
if (func === undefined) {
return { banned: false };
}
const bannedInfo = bannedFunctions.find((f) => f.func === func);
return bannedInfo
? { banned: true, func: bannedInfo.func, help: bannedInfo.help }
: { banned: false };
}
/**
* List of global functions we do not allow to call
*/
const bannedFunctions: BannedFunctionInfo[] = [
{ func: globalThis.cancelAnimationFrame },
{ func: globalThis.cancelIdleCallback },
{ func: globalThis.clearInterval },
{ func: globalThis.clearImmediate },
{ func: globalThis.clearTimeout },
{ func: globalThis.eval },
{ func: globalThis.queueMicrotask },
{ func: globalThis.requestAnimationFrame },
{ func: globalThis.requestIdleCallback },
{ func: globalThis.setImmediate },
{ func: globalThis.setInterval },
{ func: globalThis.setTimeout, help: "Use 'delay'" },
];
type BannedFunctionInfo = {
func?: (...args: any[]) => any;
help?: string;
};
type BannedFunctionResult = BannedFunctionInfo & {
banned: boolean;
};
```
--------------------------------------------------------------------------------
/xmlui/src/components/Avatar/Avatar.md:
--------------------------------------------------------------------------------
```markdown
%-DESC-START
**Key features:**
- **Automatic fallback**: Shows initials when no image URL is provided or image fails to load
- **Multiple sizes**: From `xs` (extra small) to `lg` (large) to fit different contexts
- **Clickable**: Supports click events for profile actions, modals, or navigation
- **Accessible**: Automatically generates appropriate alt text from the name
%-DESC-END
%-PROP-START name
```xmlui-pg copy display name="Example: name"
<App>
<Avatar name="John, Doe" />
</App>
```
%-PROP-END
%-PROP-START size
```xmlui-pg copy display name="Example: size"
<App>
<HStack>
<Avatar name="Dorothy Ellen Fuller" />
<Avatar name="Xavier Schiller" size="xs" />
<Avatar name="Sebastien Moore" size="sm" />
<Avatar name="Molly Dough" size="md" />
<Avatar name="Lynn Gilbert" size="lg" />
</HStack>
</App>
```
%-PROP-END
%-PROP-START url
```xmlui-pg copy display name="Example: url"
<App>
<Avatar url="https://i.pravatar.cc/100" size="md" />
</App>
```
%-PROP-END
%-EVENT-START click
```xmlui-pg copy display name="Example: click"
<App>
<HStack verticalAlignment="center">
<Avatar name="Molly Dough" size="md" onClick="toast('Avatar clicked')" />
Click the avatar!
</HStack>
</App>
```
%-EVENT-END
```
--------------------------------------------------------------------------------
/xmlui/src/components/chart-color-schemes.ts:
--------------------------------------------------------------------------------
```typescript
const colorSchemes: any = {
"set3": "set3",
"tableau10": "tableau10",
"brown_blueGreen": "brown_blueGreen",
"purpleRed_green": "purpleRed_green",
"pink_yellowGreen": "pink_yellowGreen",
"purple_orange": "purple_orange",
"red_blue": "red_blue",
"red_grey": "red_grey",
"red_yellow_blue": "red_yellow_blue",
"red_yellow_green": "red_yellow_green",
"spectral": "spectral",
"blues": "blues",
"greens": "greens",
"greys": "greys",
"oranges": "oranges",
"purples": "purples",
"reds": "reds",
"blue_green": "blue_green",
"blue_purple": "blue_purple",
"green_blue": "green_blue",
"orange_red": "orange_red",
"purple_blue_green": "purple_blue_green",
"purple_blue": "purple_blue",
"purple_red": "purple_red",
"red_purple": "red_purple",
"yellow_green_blue": "yellow_green_blue",
"yellow_green": "yellow_green",
"yellow_orange_brown": "yellow_orange_brown",
"yellow_orange_red": "yellow_orange_red",
"nivo": "nivo",
"category10": "category10",
"accent": "accent",
"dark2": "dark2",
"paired": "paired",
"pastel1": "pastel1",
"pastel2": "pastel2",
"set1": "set1",
"set2": "set2"
};
export default colorSchemes;
```
--------------------------------------------------------------------------------
/docs/public/pages/xmlui-charts/LineChart.md:
--------------------------------------------------------------------------------
```markdown
# LineChart [#linechart]
>[!WARNING]
> This component is in an **experimental** state; you can use it in your app. However, we may modify it, and it may even have breaking changes in the future.Represents a line chart component.
## Properties
### `data`
The data to be displayed in the line chart.It needs to be an array of objects, where each object represents a data point.
### `dataKeys`
This property specifies the keys in the data objects that should be used for rendering the lines.
### `hideTooltip (default: false)`
Determines whether the tooltip should be hidden.If set to (`true`), no tooltip will be shown when hovering over data points.
### `hideX (default: false)`
Determines whether the X-axis should be hidden. If set to (`true`), the axis will not be displayed.
### `nameKey`
The key in the data objects used for labeling different data series.
### `showLegend (default: false)`
Determines whether the legend should be displayed.
### `tickFormatter`
A function that formats the axis tick labels. It receives a tick value and returns a formatted string.
## Events
This component does not have any events.
## Exposed Methods
This component does not expose any methods.
## Styling
This component does not have any styles.
```
--------------------------------------------------------------------------------
/docs/public/pages/howto/debug-a-component.md:
--------------------------------------------------------------------------------
```markdown
# Debug a component
```xmlui-pg noHeader
---app
<App>
<Test />
</App>
---api
{
"apiUrl": "/api",
"initialize": "$state.user_data = {
id: 42,
name: 'John Doe',
preferences: { theme: 'dark', notifications: true },
recentItems: ['item1', 'item2', 'item3']
}",
"operations": {
"get_user_data": {
"url": "/user_data",
"method": "get",
"handler": "console.log('API called:', $state.user_data); return $state.user_data"
}
}
}
---comp display
<Component name="Test"
var.counter = "{1}"
>
<DataSource
id="userData"
url="/api/user_data"
/>
<script>
// can customize here
function debug(msg, data) {
console.log(msg, data)
};
</script>
<Text>Method 1: JSON.stringify with preserveLinebreaks</Text>
<Text preserveLinebreaks="true">
{JSON.stringify(userData.value, null, 2)}
</Text>
<Text>Method 2: Console.log in handler</Text>
<Button
label="Log to console"
onClick="console.log(userData);console.log(userData.value)"
/>
<Text>Method 3: Use Fragment and custom debug function to watch changes</Text>
<Fragment when="{debug('counter', counter)}" />
<Button
label="Update counter"
onClick="{counter++}"
/>
</Component>
```
```
--------------------------------------------------------------------------------
/docs/public/pages/howto/group-items-in-list-by-a-property.md:
--------------------------------------------------------------------------------
```markdown
# Group items in List by a property
```xmlui-pg noHeader
---app
<App>
<Test />
</App>
---api display
{
"apiUrl": "/api",
"initialize": "$state.people_groupby = [
{ id: 1, name: 'Alice', active: true, group: 'A' },
{ id: 2, name: 'Bob', active: false, group: 'B' },
{ id: 3, name: 'Carol', active: true, group: 'A' },
{ id: 4, name: 'Dave', active: true, group: 'B' }
]",
"operations": {
"get-people-groupby": {
"url": "/people_groupby",
"method": "get",
"handler": "return { status: 'ok', data: { items: $state.people_groupby } }"
}
}
}
---comp display
<Component name="Test">
<!--
{
items:
[
{ id: 1, name: 'Alice', active: true, group: 'A' },
{ id: 2, name: 'Bob', active: false, group: 'B' },
{ id: 3, name: 'Carol', active: true, group: 'A' },
{ id: 4, name: 'Dave', active: true, group: 'B' }
]
}
-->
<DataSource
id="allPeopleGroupBy"
url="/api/people_groupby"
resultSelector="data.items"
/>
<List data="{allPeopleGroupBy}" groupBy="group">
<property name="groupHeaderTemplate">
<Text variant="subtitle">Group {$group.key}</Text>
</property>
<Text>{$item.name}</Text>
</List>
</Component>
```
```
--------------------------------------------------------------------------------
/xmlui/src/components/ProgressBar/ProgressBar.module.scss:
--------------------------------------------------------------------------------
```scss
@use "../../components-core/theming/themes" as t;
// --- This code snippet is required to collect the theme variables used in this module
$themeVars: ();
@function createThemeVar($componentVariable) {
$themeVars: t.appendThemeVar($themeVars, $componentVariable) !global;
@return t.getThemeVar($themeVars, $componentVariable);
}
$backgroundColor-ProgressBar: createThemeVar("backgroundColor-ProgressBar");
$color-indicator-ProgressBar: createThemeVar("color-indicator-ProgressBar");
$borderRadius-ProgressBar: createThemeVar("borderRadius-ProgressBar");
$borderRadius-indicator-ProgressBar: createThemeVar("borderRadius-indicator-ProgressBar");
$thickness-ProgressBar: createThemeVar("thickness-ProgressBar");
@layer components {
.wrapper {
width: 100%;
background-color: $backgroundColor-ProgressBar;
border-radius: $borderRadius-ProgressBar;
overflow: hidden;
position: relative;
height: $thickness-ProgressBar;
}
.bar {
position: absolute;
background-color: $color-indicator-ProgressBar;
border-radius: $borderRadius-indicator-ProgressBar;
left: 0;
top: 0;
bottom: 0;
}
}
// --- We export the theme variables to add them to the component renderer
:export {
themeVars: t.json-stringify($themeVars);
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/Tabs/TabItemNative.tsx:
--------------------------------------------------------------------------------
```typescript
import type { ForwardedRef } from "react";
import { forwardRef, useEffect, useId } from "react";
import { Content } from "@radix-ui/react-tabs";
import styles from "../Tabs/Tabs.module.scss";
import type { Tab } from "../abstractions";
import { useTabContext } from "./TabContext";
export const TabItemComponent = forwardRef(function TabItemComponent(
{ children, label, headerRenderer, style, id, activated, ...rest }: Tab,
forwardedRef: ForwardedRef<HTMLDivElement>,
) {
const innerId = useId();
const { register, unRegister, activeTabId } = useTabContext();
useEffect(() => {
register({
label,
headerRenderer,
innerId,
id, // Store the external id (can be undefined)
});
}, [innerId, id, label, headerRenderer, register]);
useEffect(() => {
return () => {
unRegister(innerId);
};
}, [innerId, unRegister]);
useEffect(() => {
if (activeTabId === innerId && activated) {
activated();
}
}, [activeTabId, innerId, activated]);
if (activeTabId !== innerId) return null;
return (
<Content
{...rest}
key={innerId}
value={innerId}
className={styles.tabsContent}
ref={forwardedRef}
style={style}
>
{children}
</Content>
);
});
```
--------------------------------------------------------------------------------
/tools/vscode/esbuild.js:
--------------------------------------------------------------------------------
```javascript
const esbuild = require("esbuild");
const production = process.argv.includes("--production");
const watch = process.argv.includes("--watch");
async function main() {
const ctx = await esbuild.context({
entryPoints: ["src/extension.ts", "src/server.ts"],
bundle: true,
format: "cjs",
minify: production,
sourcemap: !production,
sourcesContent: false,
platform: "node",
outdir: "dist",
external: ["vscode"],
logLevel: "warning",
plugins: [
/* add to the end of plugins array */
esbuildProblemMatcherPlugin,
],
});
if (watch) {
await ctx.watch();
} else {
await ctx.rebuild();
await ctx.dispose();
}
}
/**
* @type {import('esbuild').Plugin}
*/
const esbuildProblemMatcherPlugin = {
name: "esbuild-problem-matcher",
setup(build) {
build.onStart(() => {
console.log("[watch] build started");
});
build.onEnd((result) => {
result.errors.forEach(({ text, location }) => {
console.error(`✘ [ERROR] ${text}`);
if (location == null) return;
console.error(` ${location.file}:${location.line}:${location.column}:`);
});
console.log("[watch] build finished");
});
},
};
main().catch((e) => {
console.error(e);
process.exit(1);
});
```
--------------------------------------------------------------------------------
/xmlui/src/components/FormItem/HelperText.tsx:
--------------------------------------------------------------------------------
```typescript
import type { CSSProperties } from "react";
import classnames from "classnames";
import styles from "./HelperText.module.scss";
import type { ValidationStatus } from "../abstractions";
import { WarningIcon } from "../Icon/WarningIcon";
import { ErrorIcon } from "../Icon/ErrorIcon";
// =====================================================================================================================
// React HelperText component implementation
type Props = {
text?: string;
status?: ValidationStatus;
style?: CSSProperties
};
export const HelperText = ({ text = "", status, style }: Props) => {
const renderStatusIcon = () => {
if (status === "warning") {
return <WarningIcon color="var(--xmlui-color-warning)" />;
} else if (status === "error") {
return <ErrorIcon color="var(--xmlui-color-error)" />;
}
};
return (
<div
data-validation-status={status}
style={style}
className={classnames(styles.helper, {
[styles.valid]: status === "valid",
[styles.warning]: status === "warning",
[styles.error]: status === "error",
})}
>
{status && <div style={{ flexShrink: 0 }}>{renderStatusIcon()}</div>}
{text && <div className={styles.helperText}>{text}</div>}
</div>
);
};
```
--------------------------------------------------------------------------------
/xmlui/src/components/Redirect/Redirect.tsx:
--------------------------------------------------------------------------------
```typescript
import type { To } from "react-router-dom";
import { Navigate } from "@remix-run/react";
import { createComponentRenderer } from "../../components-core/renderers";
import { createUrlWithQueryParams } from "../component-utils";
import { createMetadata } from "../metadata-helpers";
const COMP = "Redirect";
export const defaultProps = {
to: "",
};
export const RedirectMd = createMetadata({
status: "stable",
description:
"`Redirect` immediately redirects the browser to the URL in its `to` property when " +
"it gets visible (its `when` property gets `true`). It works only within " +
"[App](/components/App), not externally.",
props: {
replace: {
description: `This boolean property indicates whether the redirect should replace the current history entry or create a new one.`,
defaultValue: false,
},
to: {
description: `This property defines the URL to which this component is about to redirect requests.`,
defaultValue: defaultProps.to,
},
},
});
export const redirectRenderer = createComponentRenderer(
COMP,
RedirectMd,
({ node, extractValue }) => {
return <Navigate to={createUrlWithQueryParams(extractValue(node.props.to)) as To} replace={extractValue.asOptionalBoolean(node.props.replace)} />;
},
);
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/rendering/InvalidComponent.tsx:
--------------------------------------------------------------------------------
```typescript
import type React from "react";
import styles from "./InvalidComponent.module.scss";
import type { ComponentDef } from "../../abstractions/ComponentDefs";
import { EMPTY_ARRAY } from "../constants";
// --- Represents the properties of InvalidComponent
type Props = {
// -- Errors found while validating component prperties
errors?: string[];
// -- The definition of the component validated
node: ComponentDef;
// --- Component children to render with the error message
children?: React.ReactNode;
};
/**
* This component displays run time errors found while the rendering engine
* runs. If it finds an issue that hinders regular operation, it renders this
* component instead of the faulty one.
*/
function InvalidComponent({ errors = EMPTY_ARRAY, node, children }: Props) {
return (
<>
<div className={styles.errorOverlay}>
<div className={styles.title}>
<span>
<b>{node.type}</b> component problems:
</span>
</div>
<ul className={styles.errorItems}>
{errors.map((error: string, i) => (
<li className={styles.errorItem} key={i}>
{error}
</li>
))}
</ul>
</div>
{children}
</>
);
}
export default InvalidComponent;
```
--------------------------------------------------------------------------------
/xmlui/src/components/Logo/Logo.tsx:
--------------------------------------------------------------------------------
```typescript
import { createComponentRenderer } from "../../components-core/renderers";
import { createMetadata } from "../metadata-helpers";
import { Logo, defaultProps } from "./LogoNative";
const COMP = "Logo";
export const LogoMd = createMetadata({
status: "stable",
description:
"`Logo` displays your application's brand symbol by automatically loading logo " +
"images defined in the app manifest. While logos are typically configured " +
"using App-level properties (`logo`, `logo-dark`), this component provides " +
"direct control when you need custom logo placement or templating.",
props: {
alt: {
description: "Alternative text for the logo image for accessibility.",
type: "string",
defaultValue: defaultProps.alt,
},
inline: {
description: `When set to true, the image will be displayed as an inline element instead of a block element.`,
type: "boolean",
defaultValue: defaultProps.inline,
},
},
});
export const logoComponentRenderer = createComponentRenderer(
COMP,
LogoMd,
({ node, className, extractValue }) => {
return (
<Logo
className={className}
inline={extractValue.asOptionalBoolean(node.props.inline)}
alt={extractValue(node.props.alt)}
/>
);
},
);
```
--------------------------------------------------------------------------------
/docs/public/pages/hosted-deployment.md:
--------------------------------------------------------------------------------
```markdown
# Hosted deployment
You can copy the structure shown in [App Structure](/app-structure) to any webserver configured to serve `index.html` and its subfolders.
Here are some common alternatives.
## Use an AWS Bucket
Your app can run from an AWS bucket. Here's the minimal app served that way: [http://xmlui-minimal.s3-website-us-east-1.amazonaws.com/](http://xmlui-minimal.s3-website-us-east-1.amazonaws.com/).
> [!INFO] **AWS recipe**
> - Upload xmlui-minimal folder to an AWS bucket
> - In Permissions, turn off the 'Block public access' setting
> - In Permissions, allow 'PublicRead'
> ```json
> {
> "Version": "2012-10-17",
> "Statement": [
> {
> "Sid": "PublicRead",
> "Effect": "Allow",
> "Principal": "*",
> "Action": "s3:GetObject",
> "Resource": "arn:aws:s3:::xmlui-minimal/*"
> }
> ]
> }
> ```
> - In Properties, turn on 'Static website hosting' and set 'index.html' as the default
## Use Netlify
You can just drag-and-drop the folder to Netlify: [https://xmlui-minimal.netlify.app/](https://xmlui-minimal.netlify.app/).
> [!INFO] **Netlify recipe**
> - Go to <a href="https://app.netlify.com/drop">https://app.netlify.com/drop</a>
> - Drag the xmlui-minimal folder to the drop target
> - Rename the appIn Permissions, allow 'PublicRead'
```
--------------------------------------------------------------------------------
/packages/xmlui-playground/src/playground/PlaygroundContent.tsx:
--------------------------------------------------------------------------------
```typescript
import styles from "./PlaygroundContent.module.scss";
import { usePlayground } from "../hooks/usePlayground";
import classnames from "classnames";
import { Preview } from "./Preview";
import { Splitter } from "xmlui";
import { Editor } from "./Editor";
type PlaygroundContentProps = {
height?: number | string;
initialPrimarySize?: string;
standalone?: boolean;
};
export const PlaygroundContent = ({
height,
initialPrimarySize,
standalone,
}: PlaygroundContentProps) => {
const { options, status, editorStatus } = usePlayground();
return (
<div
className={classnames(styles.playgroundContent, {
[styles.standaloneMode]: standalone,
})}
style={{ height }}
>
{status === "loaded" &&
(standalone ? (
options.previewMode ? (
<Preview />
) : (
<Splitter
orientation={options.orientation}
swapped={options.swapped}
initialPrimarySize={initialPrimarySize}
>
<Editor />
<div style={{ height: "100%", width: "100%", overflow: "hidden" }}>
{editorStatus === "loaded" && <Preview />}
</div>
</Splitter>
)
) : (
<Preview />
))}
</div>
);
};
```
--------------------------------------------------------------------------------
/tools/create-app/CHANGELOG.md:
--------------------------------------------------------------------------------
```markdown
# create-xmlui-app
## 0.10.19
## 0.10.18
## 0.10.17
## 0.10.16
## 0.10.15
## 0.10.14
## 0.10.13
## 0.10.12
## 0.10.11
## 0.10.10
## 0.10.9
## 0.10.8
## 0.10.7
## 0.10.6
## 0.10.5
## 0.10.4
## 0.10.3
## 0.10.2
## 0.10.1
## 0.10.0
## 0.9.101
## 0.9.100
## 0.9.99
## 0.9.98
## 0.9.97
## 0.9.96
## 0.9.95
## 0.9.94
## 0.9.93
## 0.9.92
## 0.9.91
## 0.9.90
## 0.9.89
## 0.9.88
## 0.9.87
## 0.9.86
## 0.9.85
## 0.9.84
## 0.9.83
## 0.9.82
## 0.9.81
## 0.9.80
## 0.9.79
## 0.9.78
## 0.9.77
## 0.9.76
## 0.9.75
## 0.9.74
## 0.9.73
## 0.9.72
## 0.9.71
## 0.9.70
## 0.9.69
## 0.9.68
## 0.9.67
## 0.9.66
## 0.9.65
## 0.9.64
## 0.9.63
## 0.9.62
## 0.9.61
## 0.9.60
## 0.9.59
## 0.9.58
## 0.9.57
## 0.9.56
## 0.9.55
## 0.9.54
## 0.9.53
## 0.9.52
## 0.9.51
## 0.9.50
## 0.9.49
## 0.9.48
## 0.9.47
## 0.9.46
## 0.9.45
## 0.9.44
## 0.9.43
## 0.9.42
## 0.9.41
## 0.9.40
## 0.9.39
## 0.9.38
### Patch Changes
- d314bad: msw update
## 0.9.37
## 0.9.36
## 0.9.35
## 0.9.34
## 0.9.33
## 0.9.32
## 0.9.31
## 0.9.30
### Patch Changes
- b0ae113: testing
## 0.9.29
### Patch Changes
- f15c018: another testing
- f15c018: testing
## 0.9.28
### Patch Changes
- 421968b: testing
## 0.9.27
### Patch Changes
- 99bba69: testing
## 0.9.26
```
--------------------------------------------------------------------------------
/docs/public/pages/xmlui-animations/FadeAnimation.md:
--------------------------------------------------------------------------------
```markdown
# FadeAnimation [#fadeanimation]
>[!WARNING]
> This component is in an **experimental** state; you can use it in your app. However, we may modify it, and it may even have breaking changes in the future.The `FadeAnimation` component represents an animation that fades the content with adjustable opacity values.
## Properties
### `animateWhenInView`
Indicates whether the animation should start when the component is in view
### `delay (default: 0)`
The delay before the animation starts in milliseconds
### `duration`
The duration of the animation in milliseconds
### `from (default: 0)`
Sets the initial opacity of the content.If the `to` property is not set, the initial opacity set here will be used as the final opacity.
### `loop (default: false)`
Indicates whether the animation should loop
### `reverse (default: false)`
Indicates whether the animation should run in reverse
### `to (default: 1)`
Sets the final opacity of the content.If the `from` property is not set, the initial opacity set here will be used as the final opacity.
## Events
### `started`
Event fired when the animation starts
### `stopped`
Event fired when the animation stops
## Exposed Methods
### `start`
Starts the animation
### `stop`
Stops the animation
## Styling
This component does not have any styles.
```
--------------------------------------------------------------------------------
/xmlui/src/components/ModalDialog/Dialog.tsx:
--------------------------------------------------------------------------------
```typescript
import type React from "react";
import styles from "./Dialog.module.scss";
import { Text } from "../Text/TextNative";
import { ModalDialog } from "./ModalDialogNative";
export type Props = {
title?: string;
description?: string;
isOpen?: boolean;
onClose: () => (Promise<boolean | undefined | void> | boolean | undefined | void);
buttons: React.ReactNode;
// Accept any React component - provides a way to add custom content to the dialog,
// like complex layouts, images, etc.
children?: React.ReactNode;
portalTo?: HTMLElement;
};
/**
* Dialog component that is customizable with action buttons. The children prop accepts React elements.
*
* Note that clicking outside of the dialog or pressing Escape will call the onClose function.
* Thus, if you want to stop that from firing, do so in the onClose function from outside.
*/
export const Dialog = ({
title,
description,
children,
isOpen,
onClose,
buttons,
}: Props) => {
return (
<ModalDialog onClose={onClose} isInitiallyOpen={isOpen} title={title}>
<div className={styles.dialogContent}>
<div id="dialogDesc">
<Text>{description}</Text>
</div>
{children}
</div>
{!!buttons && <footer className={styles.dialogActions}>{buttons}</footer>}
</ModalDialog>
);
};
```
--------------------------------------------------------------------------------
/docs/content/components/SpaceFiller.md:
--------------------------------------------------------------------------------
```markdown
# SpaceFiller [#spacefiller]
`SpaceFiller` works well in layout containers to fill remaining (unused) space. Its behavior depends on the layout container in which it is used.
## Using `SpaceFiller` [#using-spacefiller]
In a `Stack`, `SpaceFiller` pushes the children following it to the other end of the container:
```xmlui-pg copy display {3} name="SpaceFiller in an HStack"
<App>
<HStack>
<Stack width="36px" height="36px" backgroundColor="red" />
<SpaceFiller />
<Stack width="36px" height="36px" backgroundColor="blue" />
</HStack>
</App>
```
In a `FlowLayout`, `SpaceFiller` acts as a line break for a row. The children following the `SpaceFiller` enters a new line.
```xmlui-pg copy display {3} name="Example: in a FlowLayout"
<App>
<FlowLayout>
<Stack width="20%" height="36px" backgroundColor="red" />
<SpaceFiller />
<Stack width="20%" height="36px" backgroundColor="green" />
<Stack width="20%" height="36px" backgroundColor="blue" />
</FlowLayout>
</App>
```
## Properties [#properties]
This component does not have any properties.
## Events [#events]
This component does not have any events.
## Exposed Methods [#exposed-methods]
This component does not expose any methods.
## Styling [#styling]
`SpaceFiller` ignores all layout properties; it cannot be styled.
```
--------------------------------------------------------------------------------
/xmlui/scripts/get-langserver-metadata.mjs:
--------------------------------------------------------------------------------
```
import { collectedComponentMetadata } from "../dist/metadata/xmlui-metadata.mjs";
generateLangServerMetadata(collectedComponentMetadata);
/**
* @typedef {import('../src/language-server/services/common').ComponentMetadataCollection} ComponentMetadataCollection
* @typedef {import('../src/abstractions/ComponentDefs').ComponentMetadata} ComponentMetadata
*/
/**
*
* @param {Record<string, ComponentMetadata} metaByComp
*/
function generateLangServerMetadata(metaByComp) {
/** @type {ComponentMetadataCollection} */
const simplifiedMetadata = {};
for (const [compName, componentData] of Object.entries(metaByComp)) {
simplifiedMetadata[compName] = {
description: componentData.description,
status: componentData.status,
props: componentData.props,
events: componentData.events,
apis: componentData.apis,
contextVars: componentData.contextVars,
allowArbitraryProps: componentData.allowArbitraryProps,
shortDescription: componentData.shortDescription,
};
}
const fileContent = `// This file is auto-generated. Do not edit manually.
export default ${JSON.stringify(metaByComp, null, 2)};
`;
process.stdout.write(fileContent, (err) => {
if (err) {
console.error(`Could not write generated metadata to stdout:\n ${err.message}`);
}
});
}
```
--------------------------------------------------------------------------------
/tools/create-app/helpers/git.ts:
--------------------------------------------------------------------------------
```typescript
import { execSync } from "child_process";
import path from "path";
import fs from "fs";
function isInGitRepository(): boolean {
try {
execSync("git rev-parse --is-inside-work-tree", { stdio: "ignore" });
return true;
} catch (_) {}
return false;
}
function isInMercurialRepository(): boolean {
try {
execSync("hg --cwd . root", { stdio: "ignore" });
return true;
} catch (_) {}
return false;
}
function isDefaultBranchSet(): boolean {
try {
execSync("git config init.defaultBranch", { stdio: "ignore" });
return true;
} catch (_) {}
return false;
}
export function tryGitInit(root: string): boolean {
let didInit = false;
try {
execSync("git --version", { stdio: "ignore" });
if (isInGitRepository() || isInMercurialRepository()) {
return false;
}
execSync("git init", { stdio: "ignore" });
didInit = true;
if (!isDefaultBranchSet()) {
execSync("git checkout -b main", { stdio: "ignore" });
}
execSync("git add -A", { stdio: "ignore" });
execSync('git commit -m "Initial commit from Create Next App"', {
stdio: "ignore",
});
return true;
} catch (e) {
if (didInit) {
try {
fs.rmSync(path.join(root, ".git"), { recursive: true, force: true });
} catch (_) {}
}
return false;
}
}
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/rendering/containers.ts:
--------------------------------------------------------------------------------
```typescript
/**
* This enumeration defines the available actions on a view container. We use these actions in the redux-style state
* management of the component rendering engine.
*/
export const enum ContainerActionKind {
LOADER_LOADED = "ContainerActionKind:LOADER_LOADED",
LOADER_IN_PROGRESS_CHANGED = "ContainerActionKind:LOADER_IN_PROGRESS_CHANGED",
LOADER_IS_REFETCHING_CHANGED = "ContainerActionKind:LOADER_IS_REFETCHING_CHANGED",
LOADER_ERROR = "ContainerActionKind:LOADER_ERROR",
EVENT_HANDLER_STARTED = "ContainerActionKind:EVENT_HANDLER_STARTED",
EVENT_HANDLER_COMPLETED = "ContainerActionKind:EVENT_HANDLER_COMPLETED",
EVENT_HANDLER_ERROR = "ContainerActionKind:EVENT_HANDLER_ERROR",
COMPONENT_STATE_CHANGED = "ContainerActionKind:COMPONENT_STATE_CHANGED",
STATE_PART_CHANGED = "ContainerActionKind:STATE_PART_CHANGED",
}
// Represents a reducer action dispatched in a view container
export interface ContainerAction {
type: ContainerActionKind;
// Potential improvement: Try to specify the type with more details
payload: {
uid?: any;
data?: any;
error?: any;
value?: any;
byId?: any;
inProgress?: any;
isRefetching?: any;
loaded?: any;
pageInfo?: any;
path?: any;
target?: any;
actionType?: any;
state?: any;
eventName?: any;
localVars?: any;
};
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/Input/InputDivider.tsx:
--------------------------------------------------------------------------------
```typescript
import type React from "react";
import classnames from "classnames";
import styles from "./InputDivider.module.scss";
/**
* Props for InputDivider component.
*/
export interface InputDividerProps {
/** The separator character/string to display */
separator: string;
/** Optional custom className for styling and spacing */
className?: string;
}
/**
* InputDivider is a simple component for displaying separators between input fields.
*
* This component is designed to be used in multi-field input scenarios like TimeInput
* and DateInput where visual separators (like ":", "/", "-") are needed between fields.
*
* Key features:
* - Flexible separator content (single or multi-character strings)
* - CSS class-based styling for maximum flexibility
* - Consistent behavior across different input components
*
* @example
* ```tsx
* // Time separator
* <InputDivider separator=":" className={styles.divider} />
*
* // Date separator
* <InputDivider separator="/" className={styles.divider} />
*
* // Custom separator
* <InputDivider separator=" • " className="custom-separator" />
* ```
*/
export function InputDivider({
separator,
className
}: InputDividerProps): React.ReactElement {
return (
<span className={classnames(styles.inputDivider, className)}>
{separator}
</span>
);
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/Items/ItemsNative.tsx:
--------------------------------------------------------------------------------
```typescript
import { Fragment, type ReactNode, useMemo } from "react";
import { isPlainObject } from "lodash-es";
// =====================================================================================================================
// React Items component implementation
type Props = {
items: any[];
renderItem: (contextVars: any, key: number) => ReactNode;
reverse?: boolean;
};
export const defaultProps: Pick<Props, "reverse"> = {
reverse: false,
};
export function Items({ items, renderItem, reverse = defaultProps.reverse }: Props) {
const itemsToRender = useMemo(() => {
if (!items) {
return [];
}
let normalizedItems = items;
if (isPlainObject(items)) {
normalizedItems = Object.values(items);
}
return reverse ? [...normalizedItems].reverse() : normalizedItems;
}, [items, reverse]);
if (!itemsToRender || !Array.isArray(itemsToRender)) {
return null;
}
return (
<>
{itemsToRender.map((item, index) => {
return (
<Fragment key={index}>
{renderItem?.(
{
$item: item,
$itemIndex: index,
$isFirst: index === 0,
$isLast: index === itemsToRender.length - 1,
},
index,
)}
</Fragment>
);
})}
</>
);
}
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/interception/apiInterceptorWorker.ts:
--------------------------------------------------------------------------------
```typescript
import type { SetupWorker } from "msw/browser";
import { setupWorker } from "msw/browser";
import type { RequestHandler } from "msw";
import { http } from "msw";
import { isArray } from "lodash-es";
import type { ApiInterceptor } from "./ApiInterceptor";
// Create handlers for the specified API interceptor
function createHandlers(api: ApiInterceptor) {
const operations = api.getOperations();
let handlers: Array<RequestHandler> = [];
Object.entries(operations).forEach(([operationId, operation]) => {
let urls = [operation.url];
if (isArray(operation.url)) {
urls = operation.url;
}
urls.forEach((operationUrl) => {
handlers.push(
http[operation.method](
`${api.getApiUrl()}${operationUrl}`,
async ({ request, cookies, params }) => {
return await api.executeOperation(operationId, request, cookies, params);
},
),
);
});
});
return handlers;
}
// Create the worker for the ApiInterceptorProvider
export const createApiInterceptorWorker = (
apiInstance: ApiInterceptor,
parentWorker?: SetupWorker,
) => {
const handlers = createHandlers(apiInstance);
let worker = parentWorker;
if (!parentWorker) {
worker = setupWorker();
}
// https://github.com/mswjs/msw/issues/2495
worker.use(...(handlers as any));
return worker;
};
```
--------------------------------------------------------------------------------
/docs/content/components/Backdrop.md:
--------------------------------------------------------------------------------
```markdown
# Backdrop [#backdrop]
The `Backdrop` component is a semi-transparent overlay that appears on top of its child component to obscure or highlight the content behind it.
```xmlui-pg copy display name="Example: using Backdrop"
<App>
<Backdrop opacity="0.6">
<Image
src="/resources/images/components/image/breakfast.jpg"
fit="cover" width="400px" />
<property name="overlayTemplate">
<VStack verticalAlignment="center" height="100px">
<H1 color="white" textAlign="center">Great breakfast!</H1>
</VStack>
</property>
</Backdrop>
</App>
```
## Properties [#properties]
### `backgroundColor` [#backgroundcolor]
The background color of the backdrop.
### `opacity` [#opacity]
The opacity of the backdrop.
### `overlayTemplate` [#overlaytemplate]
This property defines the component template for an optional overlay to display over the component.
## Events [#events]
This component does not have any events.
## Exposed Methods [#exposed-methods]
This component does not expose any methods.
## Styling [#styling]
### Theme Variables [#theme-variables]
| Variable | Default Value (Light) | Default Value (Dark) |
| --- | --- | --- |
| [backgroundColor](../styles-and-themes/common-units/#color)-Backdrop | black | black |
| [opacity](../styles-and-themes/common-units/#opacity)-Backdrop | 0.1 | 0.1 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/SelectionStore/SelectionStore.tsx:
--------------------------------------------------------------------------------
```typescript
import { createComponentRenderer } from "../../components-core/renderers";
import { createMetadata } from "../metadata-helpers";
import { SelectionStore, defaultProps } from "./SelectionStoreNative";
const COMP = "SelectionStore";
export const SelectionStoreMd = createMetadata({
status: "deprecated",
description:
`The \`${COMP}\` is a non-visual component that may wrap components (items) and manage ` +
`their selection state to accommodate the usage of other actions.`,
props: {
idKey: {
description: `The selected items in the selection store needs to have a unique ID to use as an ` +
`unambiguous key for that particular item. This property uniquely identifies the ` +
`selected object item via a given property. By default, the key attribute is \`"id"\`.`,
defaultValue: defaultProps.idKey,
},
},
});
export const selectionStoreComponentRenderer = createComponentRenderer(
COMP,
SelectionStoreMd,
(rendererContext) => {
const { node, state, updateState, renderChild, registerComponentApi } = rendererContext;
return (
<SelectionStore
updateState={updateState}
idKey={node.props.idKey}
selectedItems={state?.value}
registerComponentApi={registerComponentApi}
>
{renderChild(node.children)}
</SelectionStore>
);
},
);
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/abstractions/standalone.ts:
--------------------------------------------------------------------------------
```typescript
import type { CompoundComponentDef, ComponentLike } from "../../abstractions/ComponentDefs";
import type { ThemeDefinition } from "../../abstractions/ThemingDefs";
import type { ApiInterceptorDefinition } from "../interception/abstractions";
// This type describes a standalone app
export type StandaloneAppDescription = {
// Application name
name?: string;
// Application version
version?: string;
// The apps entry point; rendering starts here
entryPoint?: ComponentLike;
// Optional components used by the app in the entry point
components?: CompoundComponentDef[];
// Optional themes used by the app
themes?: ThemeDefinition[];
// The ID of the default theme
defaultTheme?: string;
// The default tone ("dark" or "light")
defaultTone?: string;
// Resource definitions for the app
resources?: Record<string, string>;
// Resource map for the app
resourceMap?: Record<string, string>;
appGlobals?: Record<string, any>;
apiInterceptor?: ApiInterceptorDefinition;
sources?: Record<string, string>;
};
export type StandaloneJsonConfig = {
name?: string;
appGlobals?: Record<string, any>;
entryPoint?: string;
components?: string[];
themes?: string[];
defaultTheme?: string;
resources?: Record<string, string>;
resourceMap?: Record<string, string>;
apiInterceptor?: ApiInterceptorDefinition;
};
```
--------------------------------------------------------------------------------
/docs/public/pages/tutorial-03.md:
--------------------------------------------------------------------------------
```markdown
# Navigation
Let's explore a subset of the app's navigation.
```xmlui-pg name="vertical layout"
---app display {3}
<App
name="XMLUI Invoice"
layout="vertical"
>
<AppHeader>
<H1>XMLUI Invoice</H1>
</AppHeader>
<NavPanel>
<NavLink label="Dashboard" to="/" />
<NavLink label="Invoices" to="/invoices" />
</NavPanel>
<Pages>
<Page url="/">
<Dashboard />
</Page>
<Page url="/invoices">
<Invoices />
</Page>
</Pages>
<Footer>Built with XMLUI <ToneSwitch /> </Footer>
</App>
---comp display
<Component name="Dashboard">
This is Dashboard.
</Component>
---comp display
<Component name="Invoices">
This is Invoices.
</Component>
```
## Horizontal
We've seen `vertical`, here's `horizontal`.
```xmlui-pg name="horizontal layout"
---app display {3}
<App
name="XMLUI Invoice"
layout="horizontal"
>
<AppHeader>
<H1>XMLUI Invoice</H1>
</AppHeader>
<NavPanel>
<NavLink label="Dashboard" to="/" />
<NavLink label="Invoices" to="/invoices" />
</NavPanel>
<Pages>
<Page url="/">
<Dashboard />
</Page>
<Page url="/invoices">
<Invoices />
</Page>
</Pages>
<Footer>Built with XMLUI <ToneSwitch /> </Footer>
</App>
---comp
<Component name="Dashboard">
This is Dashboard.
</Component>
---comp
<Component name="Invoices">
This is Invoices.
</Component>
```
```
--------------------------------------------------------------------------------
/xmlui/src/testing/drivers/TimerDriver.ts:
--------------------------------------------------------------------------------
```typescript
import { ComponentDriver } from "../ComponentDrivers";
export class TimerDriver extends ComponentDriver {
async isEnabled(): Promise<boolean> {
const enabled = await this.component.getAttribute("data-timer-enabled");
return enabled === "true";
}
async isRunning(): Promise<boolean> {
const running = await this.component.getAttribute("data-timer-running");
return running === "true";
}
async isPaused(): Promise<boolean> {
const paused = await this.component.getAttribute("data-timer-paused");
return paused === "true";
}
async isInInitialDelay(): Promise<boolean> {
const inDelay = await this.component.getAttribute("data-timer-in-initial-delay");
return inDelay === "true";
}
async getInterval(): Promise<number> {
const interval = await this.component.getAttribute("data-timer-interval");
return parseInt(interval || "0", 10);
}
async getInitialDelay(): Promise<number> {
const delay = await this.component.getAttribute("data-timer-initial-delay");
return parseInt(delay || "0", 10);
}
async isOnce(): Promise<boolean> {
const once = await this.component.getAttribute("data-timer-once");
return once === "true";
}
async hasExecuted(): Promise<boolean> {
const executed = await this.component.getAttribute("data-timer-has-executed");
return executed === "true";
}
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/NestedApp/utils.ts:
--------------------------------------------------------------------------------
```typescript
/**
* Convert a string to its UTF-8 bytes and compress it.
*
* @param {string} str
* @returns {Promise<Uint8Array>}
*/
export async function compress(str: string) {
// Convert the string to a byte stream.
const stream = new Blob([str]).stream();
// Create a compressed stream.
const compressedStream = stream.pipeThrough(new CompressionStream("gzip"));
// Convert the string to a byte stream.
const reader = compressedStream.getReader();
const chunks = [];
while (true) {
const { done, value } = await reader.read();
if (done) break;
chunks.push(value);
}
return await concatUint8Arrays(chunks);
}
/**
* Combine multiple Uint8Arrays into one.
*
* @param {ReadonlyArray<Uint8Array>} uint8arrays
* @returns {Promise<Uint8Array>}
*/
async function concatUint8Arrays(uint8arrays: Uint8Array[]) {
const blob = new Blob(uint8arrays);
const buffer = await blob.arrayBuffer();
return new Uint8Array(buffer);
}
export async function createQueryString(target: any) {
// Convert the Uint8Array to a Base64 string.
const compressed = await compress(target);
const base64 = btoa(String.fromCharCode(...compressed));
// Create a query string.
return encodeURIComponent(base64);
}
export function withoutTrailingSlash(str: string) {
if (str.endsWith("/")) {
return str.substring(0, str.length - 1);
}
return str;
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/svg/code-sandbox.svg:
--------------------------------------------------------------------------------
```
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14 10.6669V5.33359C13.9998 5.09978 13.938 4.87013 13.821 4.6677C13.704 4.46527 13.5358 4.29717 13.3333 4.18026L8.66667 1.51359C8.46397 1.39657 8.23405 1.33496 8 1.33496C7.76595 1.33496 7.53603 1.39657 7.33333 1.51359L2.66667 4.18026C2.46418 4.29717 2.29599 4.46527 2.17897 4.6677C2.06196 4.87013 2.00024 5.09978 2 5.33359V10.6669C2.00024 10.9007 2.06196 11.1304 2.17897 11.3328C2.29599 11.5353 2.46418 11.7034 2.66667 11.8203L7.33333 14.4869C7.53603 14.604 7.76595 14.6656 8 14.6656C8.23405 14.6656 8.46397 14.604 8.66667 14.4869L13.3333 11.8203C13.5358 11.7034 13.704 11.5353 13.821 11.3328C13.938 11.1304 13.9998 10.9007 14 10.6669Z" stroke="#3B3B3B" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5 2.80664L8 4.53997L11 2.80664" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5 13.1933V9.73333L2 8" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14 8L11 9.73333V13.1933" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2.18018 4.63965L8.00018 8.00632L13.8202 4.63965" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 14.72V8" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
```
--------------------------------------------------------------------------------
/xmlui/tests-e2e/children-as-template-context-vars.spec.ts:
--------------------------------------------------------------------------------
```typescript
import { expect, test } from "../src/testing/fixtures";
test("items works", async ({ page, initTestBed }) => {
await initTestBed(
`
<Items data="{['1', '2']}">
<DataSource url="/data/{$item}" id="data"/>
<Text testId='data{$item}_text'>{data.value}</Text>
</Items>
`,
{
apiInterceptor: {
operations: {
"load-api-data1": {
url: "/data/:taskId",
method: "get",
handler: `()=>{
return 'data' + $pathParams.taskId;
}`,
},
},
},
},
);
await expect(page.getByTestId("data1_text")).toHaveText("data1");
await expect(page.getByTestId("data2_text")).toHaveText("data2");
});
test("list works", async ({ page, initTestBed }) => {
await initTestBed(
`
<List data="{['1', '2']}">
<DataSource url="/data/{$item}" id="data"/>
<Text testId='data{$item}_text'>{data.value}</Text>
</List>
`,
{
apiInterceptor: {
operations: {
"load-api-data1": {
url: "/data/:taskId",
method: "get",
handler: `()=>{
return 'data' + $pathParams.taskId;
}`,
},
},
},
},
);
await expect(page.getByTestId("data1_text")).toHaveText("data1");
await expect(page.getByTestId("data2_text")).toHaveText("data2");
});
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/svg/share.svg:
--------------------------------------------------------------------------------
```
<svg
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18 8C19.6569 8 21 6.65685 21 5C21 3.34315 19.6569 2 18 2C16.3431 2 15 3.34315 15 5C15 6.65685 16.3431 8 18 8Z"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M6 15C7.65685 15 9 13.6569 9 12C9 10.3431 7.65685 9 6 9C4.34315 9 3 10.3431 3 12C3 13.6569 4.34315 15 6 15Z"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M18 22C19.6569 22 21 20.6569 21 19C21 17.3431 19.6569 16 18 16C16.3431 16 15 17.3431 15 19C15 20.6569 16.3431 22 18 22Z"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M8.58984 13.51L15.4198 17.49"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M15.4098 6.51001L8.58984 10.49"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/Icon.md:
--------------------------------------------------------------------------------
```markdown
%-DESC-START
**Key features:**
- **Name-based lookup**: Reference icons by name from the built-in registry (e.g., "home", "search", "trash")
- **Multiple sizes**: Choose from predefined sizes (xs, sm, md, lg) or set custom dimensions
- **Fallback support**: Specify backup icons when the primary icon name doesn't exist
- **Interactive**: Supports click events for creating icon buttons and clickable elements
%-DESC-END
%-PROP-START name
The engine looks up the icon in its registry and determines which icon is associated with the name that the component will show.
Nothing is displayed if the icon name is not found in the registry.
```xmlui-pg copy display name="Example: name"
<App>
<HStack>
<Icon name="message" />
<Icon name="note" />
<Icon name="cog" />
<Icon name="start" />
<Icon name="some-non-existing-icon" />
<Icon name="some-non-existing-icon-with fallback" fallback="trash" />
</HStack>
</App>
```
%-PROP-END
%-PROP-START fallback
```xmlui-pg copy display name="Example: fallback"
<App>
<Icon name="noicon" fallback="trash" />
</App>
```
%-PROP-END
%-PROP-START size
```xmlui-pg copy display name="Example: size"
<App>
<HStack>
<Icon name="like" />
<Icon name="like" size="xs" />
<Icon name="like" size="sm" />
<Icon name="like" size="md" />
<Icon name="like" size="lg" />
</HStack>
</App>
```
%-PROP-END
```