This is page 4 of 136. Use http://codebase.md/xmlui-org/xmlui/mockApiDef.js?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
│ ├── 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
│ └── testing-conventions.md
├── dev-docs
│ ├── accessibility.md
│ ├── actions.md
│ ├── AppRoot.md
│ ├── component-apis.md
│ ├── component-rendering.md
│ ├── component-review-checklist.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
│ │ │ ├── OptionContext.ts
│ │ │ ├── Select.md
│ │ │ ├── Select.module.scss
│ │ │ ├── Select.spec.ts
│ │ │ ├── Select.tsx
│ │ │ ├── SelectContext.tsx
│ │ │ └── SelectNative.tsx
│ │ ├── SelectionStore
│ │ │ ├── SelectionStore.md
│ │ │ ├── SelectionStore.tsx
│ │ │ └── SelectionStoreNative.tsx
│ │ ├── Slider
│ │ │ ├── Slider.md
│ │ │ ├── Slider.module.scss
│ │ │ ├── Slider.spec.ts
│ │ │ ├── Slider.tsx
│ │ │ └── SliderNative.tsx
│ │ ├── Slot
│ │ │ ├── Slot.md
│ │ │ ├── Slot.spec.ts
│ │ │ └── Slot.ts
│ │ ├── SlotItem.tsx
│ │ ├── SpaceFiller
│ │ │ ├── SpaceFiller.md
│ │ │ ├── SpaceFiller.module.scss
│ │ │ ├── SpaceFiller.spec.ts
│ │ │ ├── SpaceFiller.tsx
│ │ │ └── SpaceFillerNative.tsx
│ │ ├── Spinner
│ │ │ ├── Spinner.md
│ │ │ ├── Spinner.module.scss
│ │ │ ├── Spinner.spec.ts
│ │ │ ├── Spinner.tsx
│ │ │ └── SpinnerNative.tsx
│ │ ├── Splitter
│ │ │ ├── HSplitter.md
│ │ │ ├── HSplitter.spec.ts
│ │ │ ├── Splitter.md
│ │ │ ├── Splitter.module.scss
│ │ │ ├── Splitter.spec.ts
│ │ │ ├── Splitter.tsx
│ │ │ ├── SplitterNative.tsx
│ │ │ ├── utils.ts
│ │ │ ├── VSplitter.md
│ │ │ └── VSplitter.spec.ts
│ │ ├── Stack
│ │ │ ├── CHStack.md
│ │ │ ├── CHStack.spec.ts
│ │ │ ├── CVStack.md
│ │ │ ├── CVStack.spec.ts
│ │ │ ├── HStack.md
│ │ │ ├── HStack.spec.ts
│ │ │ ├── Stack.md
│ │ │ ├── Stack.module.scss
│ │ │ ├── Stack.spec.ts
│ │ │ ├── Stack.tsx
│ │ │ ├── StackNative.tsx
│ │ │ ├── VStack.md
│ │ │ └── VStack.spec.ts
│ │ ├── StickyBox
│ │ │ ├── StickyBox.md
│ │ │ ├── StickyBox.module.scss
│ │ │ ├── StickyBox.tsx
│ │ │ └── StickyBoxNative.tsx
│ │ ├── Switch
│ │ │ ├── Switch.md
│ │ │ ├── Switch.spec.ts
│ │ │ └── Switch.tsx
│ │ ├── Table
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── react-table-config.d.ts
│ │ │ ├── Table.md
│ │ │ ├── Table.module.scss
│ │ │ ├── Table.spec.ts
│ │ │ ├── Table.tsx
│ │ │ ├── TableNative.tsx
│ │ │ └── useRowSelection.tsx
│ │ ├── TableOfContents
│ │ │ ├── TableOfContents.module.scss
│ │ │ ├── TableOfContents.spec.ts
│ │ │ ├── TableOfContents.tsx
│ │ │ └── TableOfContentsNative.tsx
│ │ ├── Tabs
│ │ │ ├── TabContext.tsx
│ │ │ ├── TabItem.md
│ │ │ ├── TabItem.tsx
│ │ │ ├── TabItemNative.tsx
│ │ │ ├── Tabs.md
│ │ │ ├── Tabs.module.scss
│ │ │ ├── Tabs.spec.ts
│ │ │ ├── Tabs.tsx
│ │ │ └── TabsNative.tsx
│ │ ├── Text
│ │ │ ├── Text.md
│ │ │ ├── Text.module.scss
│ │ │ ├── Text.spec.ts
│ │ │ ├── Text.tsx
│ │ │ └── TextNative.tsx
│ │ ├── TextArea
│ │ │ ├── TextArea.md
│ │ │ ├── TextArea.module.scss
│ │ │ ├── TextArea.spec.ts
│ │ │ ├── TextArea.tsx
│ │ │ ├── TextAreaNative.tsx
│ │ │ ├── TextAreaResizable.tsx
│ │ │ └── useComposedRef.ts
│ │ ├── TextBox
│ │ │ ├── TextBox.md
│ │ │ ├── TextBox.module.scss
│ │ │ ├── TextBox.spec.ts
│ │ │ ├── TextBox.tsx
│ │ │ └── TextBoxNative.tsx
│ │ ├── Theme
│ │ │ ├── NotificationToast.tsx
│ │ │ ├── Theme.md
│ │ │ ├── Theme.module.scss
│ │ │ ├── Theme.spec.ts
│ │ │ ├── Theme.tsx
│ │ │ └── ThemeNative.tsx
│ │ ├── TimeInput
│ │ │ ├── TimeInput.md
│ │ │ ├── TimeInput.module.scss
│ │ │ ├── TimeInput.spec.ts
│ │ │ ├── TimeInput.tsx
│ │ │ ├── TimeInputNative.tsx
│ │ │ └── utils.ts
│ │ ├── Timer
│ │ │ ├── Timer.md
│ │ │ ├── Timer.spec.ts
│ │ │ ├── Timer.tsx
│ │ │ └── TimerNative.tsx
│ │ ├── Toggle
│ │ │ ├── Toggle.module.scss
│ │ │ └── Toggle.tsx
│ │ ├── ToneChangerButton
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneChangerButton.spec.ts
│ │ │ └── ToneChangerButton.tsx
│ │ ├── ToneSwitch
│ │ │ ├── ToneSwitch.md
│ │ │ ├── ToneSwitch.module.scss
│ │ │ ├── ToneSwitch.spec.ts
│ │ │ ├── ToneSwitch.tsx
│ │ │ └── ToneSwitchNative.tsx
│ │ ├── Tooltip
│ │ │ ├── Tooltip.md
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.spec.ts
│ │ │ ├── Tooltip.tsx
│ │ │ └── TooltipNative.tsx
│ │ ├── Tree
│ │ │ ├── testData.ts
│ │ │ ├── Tree-dynamic.spec.ts
│ │ │ ├── Tree-icons.spec.ts
│ │ │ ├── Tree.md
│ │ │ ├── Tree.spec.ts
│ │ │ ├── TreeComponent.module.scss
│ │ │ ├── TreeComponent.tsx
│ │ │ └── TreeNative.tsx
│ │ ├── TreeDisplay
│ │ │ ├── TreeDisplay.md
│ │ │ ├── TreeDisplay.module.scss
│ │ │ ├── TreeDisplay.tsx
│ │ │ └── TreeDisplayNative.tsx
│ │ ├── ValidationSummary
│ │ │ ├── ValidationSummary.module.scss
│ │ │ └── ValidationSummary.tsx
│ │ └── VisuallyHidden.tsx
│ ├── components-core
│ │ ├── abstractions
│ │ │ ├── ComponentRenderer.ts
│ │ │ ├── LoaderRenderer.ts
│ │ │ ├── standalone.ts
│ │ │ └── treeAbstractions.ts
│ │ ├── action
│ │ │ ├── actions.ts
│ │ │ ├── APICall.tsx
│ │ │ ├── FileDownloadAction.tsx
│ │ │ ├── FileUploadAction.tsx
│ │ │ ├── NavigateAction.tsx
│ │ │ └── TimedAction.tsx
│ │ ├── ApiBoundComponent.tsx
│ │ ├── appContext
│ │ │ ├── date-functions.ts
│ │ │ ├── math-function.ts
│ │ │ └── misc-utils.ts
│ │ ├── AppContext.tsx
│ │ ├── behaviors
│ │ │ ├── Behavior.tsx
│ │ │ ├── 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/Icon.module.scss:
--------------------------------------------------------------------------------
```scss
@use "../../components-core/theming/themes" as t;
$themeVars: ();
@function createThemeVar($componentVariable) {
$themeVars: t.appendThemeVar($themeVars, $componentVariable) !global;
@return t.getThemeVar($themeVars, $componentVariable);
}
@layer components {
.base {
display: inline-block;
vertical-align: text-bottom;
color: inherit;
width: t.useVar(var(--icon-width), createThemeVar("size-Icon"));
height: t.useVar(var(--icon-height), createThemeVar("size-Icon"));
// NOTE: browser compat problems with "revert-layer"
// NOTE #2: this solution is necessary because of the default stroke widths applied to our icons coming from react-icons:
// Different icons have different default stroke widths.
stroke-width: revert-layer;
&.clickable {
cursor: pointer;
}
* {
color: inherit !important;
}
}
}
:export {
themeVars: t.json-stringify($themeVars);
}
```
--------------------------------------------------------------------------------
/packages/xmlui-animations/meta/componentsMetadata.ts:
--------------------------------------------------------------------------------
```typescript
import { AnimationMd } from "../src/Animation";
import { FadeAnimationMd } from "../src/FadeAnimation";
import { FadeInAnimationMd } from "../src/FadeInAnimation";
import { FadeOutAnimationMd } from "../src/FadeOutAnimation";
import { ScaleAnimationMd } from "../src/ScaleAnimation";
import { SlideInAnimationMd } from "../src/SlideInAnimation";
export const componentMetadata = {
name: "Animations",
state: "experimental",
description: "This package contains components that deal with different sorts of animations.\n" +
"These components can wrap other components and provide different sorts of animations " +
"that run when the child component visibility changes.",
metadata: {
Animation: AnimationMd,
FadeAnimation: FadeAnimationMd,
FadeInAnimation: FadeInAnimationMd,
FadeOutAnimation: FadeOutAnimationMd,
ScaleAnimation: ScaleAnimationMd,
SlideInAnimation: SlideInAnimationMd,
},
};
```
--------------------------------------------------------------------------------
/xmlui/src/index-standalone.ts:
--------------------------------------------------------------------------------
```typescript
import React from "react";
import jsxRuntime from "react/jsx-runtime";
import ReactDOM from "react-dom";
import { startApp } from "./components-core/StandaloneApp";
import StandaloneExtensionManager from "./components-core/StandaloneExtensionManager";
import * as xmluiExports from "./index";
const Xmlui = new StandaloneExtensionManager();
document.addEventListener('DOMContentLoaded', function() {
if(!document.getElementById("root")){
// Your existing code unmodified...
const div = document.createElement('div');
div.id = 'root';
document.getElementsByTagName('body')[0].appendChild(div);
}
startApp(undefined, undefined, Xmlui);
});
window.React = React;
// @ts-ignore
window.jsxRuntime = jsxRuntime;
window.ReactDOM = ReactDOM;
// Export everything from index.ts plus the standalone extension manager
const standaloneExports = { ...xmluiExports, standalone: Xmlui };
export default standaloneExports;
```
--------------------------------------------------------------------------------
/xmlui/src/components/ModalDialog/ModalVisibilityContext.tsx:
--------------------------------------------------------------------------------
```typescript
import React, { useCallback, useContext, useEffect, useId } from "react";
interface IModalVisibilityContext {
registerForm: (id: string) => void;
unRegisterForm: (id: string) => void;
amITheSingleForm: (id: string) => boolean;
requestClose: () => Promise<void>;
}
export const ModalVisibilityContext = React.createContext<IModalVisibilityContext | null>(null);
export const useModalFormClose = () => {
const id = useId();
const { registerForm, unRegisterForm, requestClose, amITheSingleForm } =
useContext(ModalVisibilityContext) || {};
useEffect(() => {
if (registerForm) {
registerForm(id);
return () => {
unRegisterForm?.(id);
};
}
}, [id, registerForm, unRegisterForm]);
return useCallback(() => {
if (!requestClose) {
return;
}
if (!amITheSingleForm(id)) {
return;
}
return requestClose();
}, [amITheSingleForm, id, requestClose]);
};
```
--------------------------------------------------------------------------------
/xmlui/src/components/SpaceFiller/SpaceFiller.md:
--------------------------------------------------------------------------------
```markdown
%-DESC-START
## 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>
```
%-DESC-END
%-STYLE-START
`SpaceFiller` ignores all layout properties; it cannot be styled.
%-STYLE-END
```
--------------------------------------------------------------------------------
/tools/vscode/.vscode/launch.json:
--------------------------------------------------------------------------------
```json
// A launch configuration that compiles the extension and then opens it inside a new window
{
"version": "0.2.0",
"configurations": [
{
"type": "extensionHost",
"request": "launch",
"name": "Launch Client",
"runtimeExecutable": "${execPath}",
"args": ["--extensionDevelopmentPath=${workspaceRoot}"],
"outFiles": ["${workspaceRoot}/dist/**/*.js"],
"autoAttachChildProcesses": true,
"preLaunchTask": {
"type": "npm",
"script": "watch"
}
},
{
"name": "Language Server E2E Test",
"type": "extensionHost",
"request": "launch",
"runtimeExecutable": "${execPath}",
"args": [
"--extensionDevelopmentPath=${workspaceRoot}",
"--extensionTestsPath=${workspaceRoot}/client/out/test/index",
"${workspaceRoot}/client/testFixture"
],
"outFiles": ["${workspaceRoot}/client/out/test/**/*.js"]
}
]
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/NoResult/NoResultNative.tsx:
--------------------------------------------------------------------------------
```typescript
import type { CSSProperties, ForwardedRef} from "react";
import { forwardRef } from "react";
import classnames from "classnames";
import styles from "./NoResult.module.scss";
import { Icon } from "../Icon/IconNative";
// Default props for the NoResult component
export const defaultProps = {
hideIcon: false,
icon: "noresult",
};
type Props = {
label: string;
icon?: string;
hideIcon?: boolean;
style?: CSSProperties;
className?: string;
};
export const NoResult = forwardRef(function NoResult(
{
label,
icon = defaultProps.icon,
hideIcon = defaultProps.hideIcon,
style,
className,
...rest
}: Props,
forwardedRef: ForwardedRef<HTMLDivElement>,
) {
return (
<div
{...rest}
className={classnames(styles.wrapper, className)}
style={style}
ref={forwardedRef}
>
{!hideIcon && <Icon name={icon} className={styles.icon} />}
{label}
</div>
);
});
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/svg/admonition_tip.svg:
--------------------------------------------------------------------------------
```
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.29297 5.15039H30.6719C31.2902 5.15044 31.7575 5.5568 31.8389 6.09961L31.8496 6.20215V24.1748C31.8496 24.7617 31.3364 25.2273 30.707 25.2275H14.5459L14.5068 25.2539L6.49219 30.7158V25.2275H5.29297C4.63423 25.2273 4.15039 24.7343 4.15039 24.1748V6.20215C4.15058 5.61545 4.66376 5.15058 5.29297 5.15039Z" fill="url(#paint0_linear_11266_27250)" stroke="#666666" stroke-width="0.3"/>
<path d="M25.6739 12.3672H11V12.8057H25.6739V12.3672Z" fill="#666666"/>
<path d="M25.6739 14.7344H11V15.1729H25.6739V14.7344Z" fill="#666666"/>
<path d="M25.6739 17.0742H11V17.5127H25.6739V17.0742Z" fill="#666666"/>
<defs>
<linearGradient id="paint0_linear_11266_27250" x1="16.7273" y1="21.25" x2="12.1155" y2="30.9251" gradientUnits="userSpaceOnUse">
<stop stop-color="#FEFEFE"/>
<stop offset="1" stop-color="#E0E0E0"/>
</linearGradient>
</defs>
</svg>
```
--------------------------------------------------------------------------------
/xmlui/src/components/TextArea/useComposedRef.ts:
--------------------------------------------------------------------------------
```typescript
import * as React from 'react'
// basically Exclude<React.ClassAttributes<T>["ref"], string>
type UserRef<T> =
| ((instance: T | null) => void)
| React.RefObject<T>
| null
| undefined
type Writable<T> = { -readonly [P in keyof T]: T[P] }
const updateRef = <T>(ref: NonNullable<UserRef<T>>, value: T | null) => {
if (typeof ref === 'function') {
ref(value)
return
}
;(ref as Writable<typeof ref>).current = value
}
export const useComposedRef = <T extends HTMLElement>(
libRef: React.MutableRefObject<T | null>,
userRef: UserRef<T>,
) => {
const prevUserRef = React.useRef<UserRef<T>>()
return React.useCallback(
(instance: T | null) => {
libRef.current = instance
if (prevUserRef.current) {
updateRef(prevUserRef.current, null)
}
prevUserRef.current = userRef
if (!userRef) {
return
}
updateRef(userRef, instance)
},
[userRef],
)
}
```
--------------------------------------------------------------------------------
/xmlui/dev-docs/glossary.md:
--------------------------------------------------------------------------------
```markdown
# Glossary of Terms
This article contains a glossary of terms used within xmlui. Understanding them can help you grasp the details of the framework's core and contribute to its development.
## Action
An action is a kind of side activity running asynchronously, such as data fetching, in-app navigation, file uploading, etc. After the action starts, it will eventually be complete, but we cannot know in advance when it will be finished. An action can change the state of the container it lives within, which can influence the behavior of the app.
## Layout Properties
Components may declare layout properties, such as `width`, `height`, `color`, and others. These properties directly set the component's corresponding style (if the component supports that particular setting). The rendering engine extracts most of these layout properties into a`React.CSSProperties` object that can be directly used as a React component's `style` property.
```
--------------------------------------------------------------------------------
/tools/create-app/package.json:
--------------------------------------------------------------------------------
```json
{
"name": "create-xmlui-app",
"version": "0.10.19",
"scripts": {
"dev": "mkdir -p dist && cp -r templates/default dist/ && ncc build ./index.ts -w -o dist/",
"build": "ncc build ./index.ts -o dist/ --minify --no-cache --no-source-map-register && cp -r templates/default dist/",
"prepublishOnly": "npm run build"
},
"bin": {
"create-xmlui-app": "./dist/index.js"
},
"files": [
"dist"
],
"devDependencies": {
"@types/cross-spawn": "6.0.0",
"@types/node": "^20.2.5",
"@types/prompts": "2.0.1",
"@types/validate-npm-package-name": "3.0.0",
"@vercel/ncc": "0.34.0",
"fast-glob": "3.3.1",
"commander": "2.20.0",
"cross-spawn": "7.0.5",
"picocolors": "1.0.0",
"prompts": "2.1.0",
"update-check": "1.5.4",
"validate-npm-package-name": "3.0.0"
},
"engines": {
"node": ">=18.12.0"
},
"repository": {
"url": "https://github.com/xmlui-com/xmlui.git"
}
}
```
--------------------------------------------------------------------------------
/docs/content/components/EmojiSelector.md:
--------------------------------------------------------------------------------
```markdown
# EmojiSelector [#emojiselector]
`EmojiSelector` enables users to browse, search and select emojis from their system's native emoji set.
## Properties [#properties]
### `autoFocus` (default: false) [#autofocus-default-false]
If this property is set to `true`, the component gets the focus automatically when displayed.
```xmlui-pg copy display name="Example: autoFocus" height="420px"
<App>
<EmojiSelector autoFocus="true" />
</App>
```
## Events [#events]
### `select` [#select]
This event is fired when the user selects an emoticon from this component.
```xmlui-pg copy display name="Example: select" height="420px"
<App>
<HStack var.selected="">
<EmojiSelector onSelect="(emoji) => { selected = emoji }" />
<Text value="Selected emoji: {selected}" />
</HStack>
</App>
```
## Exposed Methods [#exposed-methods]
This component does not expose any methods.
## Styling [#styling]
This component does not have any styles.
```
--------------------------------------------------------------------------------
/docs/public/resources/images/logos/xmlui2.svg:
--------------------------------------------------------------------------------
```
<svg width="64" height="24" viewBox="0 0 64 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.82 18.5H9.66L5.64 12.56L1.56 18.5H0.38L5.1 11.72L0.78 5.3H1.98L5.72 10.88L9.52 5.3H10.66L6.26 11.7L10.82 18.5ZM26.6881 5.3V18.5H25.7281V8.66L25.8481 6.26H25.8281L21.0081 18.5H20.0881L15.2681 6.26H15.2481L15.3681 8.66V18.5H14.4081V5.3H15.9081L19.8881 15.3L20.5481 17.32H20.5681L21.2081 15.32L25.1881 5.3H26.6881ZM32.8534 17.58H40.7734V18.5H31.8534V5.3H32.8534V17.58Z" fill="#143566"/>
<path d="M55.2188 5.3V13.12C55.2188 14.9867 54.7188 16.3867 53.7188 17.32C52.7321 18.24 51.2654 18.7 49.3188 18.7C47.3854 18.7 45.9188 18.24 44.9188 17.32C43.9188 16.3867 43.4188 14.9867 43.4188 13.12V5.3H46.8788V13.18C46.8788 14.1267 47.0788 14.8333 47.4788 15.3C47.8921 15.7667 48.5054 16 49.3188 16C50.1454 16 50.7588 15.7667 51.1588 15.3C51.5721 14.8333 51.7788 14.1267 51.7788 13.18V5.3H55.2188ZM62.318 5.3V18.5H58.878V5.3H62.318Z" fill="#DA020F"/>
</svg>
```
--------------------------------------------------------------------------------
/xmlui/src/components/Accordion/AccordionContext.tsx:
--------------------------------------------------------------------------------
```typescript
import { createContext, type ReactNode, useContext } from "react";
import type { Accordion } from "../../components/abstractions";
import { noop } from "../../components-core/constants";
export type AccordionItem = Accordion & {
id: string;
headerRenderer?: (header: string) => ReactNode;
};
type AccordionContextDefinition = {
rotateExpanded: string;
expandItem: (id: string) => void;
register: (id: string) => void;
unRegister: (id: string) => void;
expandedItems: string[];
hideIcon: boolean;
expandedIcon: string;
collapsedIcon: string;
triggerPosition: "start" | "end";
};
export const AccordionContext = createContext<AccordionContextDefinition>({
expandedItems: null,
rotateExpanded: null,
expandItem: noop,
register: noop,
unRegister: noop,
hideIcon: null,
expandedIcon: null,
collapsedIcon: null,
triggerPosition: null,
});
export function useAccordionContext() {
return useContext(AccordionContext);
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/Fragment/Fragment.tsx:
--------------------------------------------------------------------------------
```typescript
import { Fragment } from "react";
import { createComponentRenderer } from "../../components-core/renderers";
import { createMetadata } from "../metadata-helpers";
const COMP = "Fragment";
export const FragmentMd = createMetadata({
status: "stable",
description:
"`Fragment` provides conditional rendering. You can use `when=` on any " +
"component to render it conditionally, use `Fragment` to apply `when` to a group of components.",
opaque: true,
props: {
// Note: 'when' is a universal property defined in ComponentDefCore, no need to redefine it here
},
});
export const fragmentComponentRenderer = createComponentRenderer(
COMP,
FragmentMd,
({ node, extractValue, renderChild, layoutContext }) => {
let renderedChild = renderChild(node.children, layoutContext);
if(Array.isArray(renderedChild)) {
return <Fragment key={extractValue(node.uid)}>{renderedChild}</Fragment>
}
return renderedChild;
},
);
```
--------------------------------------------------------------------------------
/docs/public/pages/xmlui-animations/FadeInAnimation.md:
--------------------------------------------------------------------------------
```markdown
# FadeInAnimation [#fadeinanimation]
>[!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 `FadeInAnimation` component represents an animation that fades in the content.
## 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
### `loop (default: false)`
Indicates whether the animation should loop
### `reverse (default: false)`
Indicates whether the animation should run in reverse
## 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/xmlui-animations/FadeOutAnimation.md:
--------------------------------------------------------------------------------
```markdown
# FadeOutAnimation [#fadeoutanimation]
>[!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 `FadeOutAnimation` component represents an animation that fades out the content.
## 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
### `loop (default: false)`
Indicates whether the animation should loop
### `reverse (default: false)`
Indicates whether the animation should run in reverse
## 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.
```
--------------------------------------------------------------------------------
/packages/xmlui-hello-world/src/HelloWorld.module.scss:
--------------------------------------------------------------------------------
```scss
@use "xmlui/themes.scss" as t;
$themeVars: ();
@function createThemeVar($componentVariable) {
$themeVars: t.appendThemeVar($themeVars, $componentVariable) !global;
@return t.getThemeVar($themeVars, $componentVariable);
}
$component: "HelloWorld";
// Define basic theme variables
$backgroundColor: createThemeVar("backgroundColor-#{$component}");
$textColor: createThemeVar("textColor-#{$component}");
.container {
background-color: $backgroundColor;
color: $textColor;
padding: 1rem;
border-radius: 8px;
text-align: center;
display: inline-block;
min-width: 200px;
}
.message {
margin: 0 0 1rem 0;
font-size: 1.5rem;
}
.button {
background-color: #4a90e2;
color: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
margin-bottom: 1rem;
&:hover {
opacity: 0.9;
}
}
.counter {
font-size: 1.2rem;
font-weight: bold;
}
:export {
themeVars: t.json-stringify($themeVars);
}
```
--------------------------------------------------------------------------------
/packages/xmlui-spreadsheet/package.json:
--------------------------------------------------------------------------------
```json
{
"name": "xmlui-spreadsheet",
"version": "0.1.0",
"sideEffects": false,
"type": "module",
"private": true,
"scripts": {
"start": "xmlui start",
"preview": "xmlui preview",
"build:extension": "xmlui build-lib",
"build-watch": "xmlui build-lib --watch",
"build:demo": "xmlui build",
"build:meta": "xmlui build-lib --mode=metadata"
},
"dependencies": {
"jspdf": "^3.0.2",
"jspreadsheet-ce": "^5.0.1",
"jszip": "^3.10.1"
},
"devDependencies": {
"@jspreadsheet/formula": "^2.0.2",
"@types/jspreadsheet-ce": "^4.7.9",
"xmlui": "*"
},
"main": "./dist/xmlui-spreadsheet.js",
"module": "./dist/xmlui-spreadsheet.mjs",
"exports": {
".": {
"import": "./dist/xmlui-spreadsheet.mjs",
"require": "./dist/xmlui-spreadsheet.js"
},
"./*.css": {
"import": "./dist/*.css",
"require": "./dist/*.css"
}
},
"files": [
"dist"
],
"engines": {
"node": ">=18.0.0"
}
}
```
--------------------------------------------------------------------------------
/xmlui/tests/parsers/scripting/parser-assignments.test.ts:
--------------------------------------------------------------------------------
```typescript
import { describe, expect, it } from "vitest";
import { Parser } from "../../../src/parsers/scripting/Parser";
import {
BinaryExpression,
AssignmentExpression,
T_ASSIGNMENT_EXPRESSION,
T_IDENTIFIER,
T_BINARY_EXPRESSION,
T_LITERAL,
} from "../../../src/components-core/script-runner/ScriptingSourceTree";
describe("Parser - assignment expressions", () => {
it("Assignment with binary expression", () => {
// --- Arrange
const wParser = new Parser("a = 2 + c");
// --- Act
const expr = wParser.parseExpr();
// --- Assert
expect(expr).not.equal(null);
if (!expr) return;
expect(expr.type).equal(T_ASSIGNMENT_EXPRESSION);
const asgn = expr as AssignmentExpression;
expect(asgn.leftValue.type).equal(T_IDENTIFIER);
expect(asgn.expr.type).equal(T_BINARY_EXPRESSION);
const bExpr = asgn.expr as BinaryExpression;
expect(bExpr.left.type).equal(T_LITERAL);
expect(bExpr.right.type).equal(T_IDENTIFIER);
});
});
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/svg/file-text.svg:
--------------------------------------------------------------------------------
```
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.33317 1.33301H3.99984C3.64622 1.33301 3.30708 1.47348 3.05703 1.72353C2.80698 1.97358 2.6665 2.31272 2.6665 2.66634V13.333C2.6665 13.6866 2.80698 14.0258 3.05703 14.2758C3.30708 14.5259 3.64622 14.6663 3.99984 14.6663H11.9998C12.3535 14.6663 12.6926 14.5259 12.9426 14.2758C13.1927 14.0258 13.3332 13.6866 13.3332 13.333V5.33301L9.33317 1.33301Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.3335 1.33301V5.33301H13.3335" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.6668 8.66699H5.3335" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.6668 11.333H5.3335" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.66683 6H6.00016H5.3335" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
```
--------------------------------------------------------------------------------
/docs/public/resources/images/logos/xmlui3.svg:
--------------------------------------------------------------------------------
```
<svg width="64" height="15" viewBox="0 0 64 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.82 14H9.66L5.64 8.06L1.56 14H0.38L5.1 7.22L0.78 0.799999H1.98L5.72 6.38L9.52 0.799999H10.66L6.26 7.2L10.82 14ZM27.6881 0.799999V14H26.7281V4.16L26.8481 1.76H26.8281L22.0081 14H21.0881L16.2681 1.76H16.2481L16.3681 4.16V14H15.4081V0.799999H16.9081L20.8881 10.8L21.5481 12.82H21.5681L22.2081 10.82L26.1881 0.799999H27.6881ZM34.8534 13.08H42.7734V14H33.8534V0.799999H34.8534V13.08Z" fill="black"/>
<path d="M56.6123 0.799999V9.18C56.6123 10.82 56.1657 12.0667 55.2723 12.92C54.3923 13.7733 53.1457 14.2 51.5323 14.2C49.919 14.2 48.6657 13.7733 47.7723 12.92C46.879 12.0667 46.4323 10.82 46.4323 9.18V0.799999H47.4323V8.98C47.4323 10.3933 47.779 11.4667 48.4723 12.2C49.179 12.92 50.199 13.28 51.5323 13.28C52.8657 13.28 53.879 12.92 54.5723 12.2C55.2657 11.4667 55.6123 10.3933 55.6123 8.98V0.799999H56.6123ZM63.4628 0.799999V14H62.4628V0.799999H63.4628Z" fill="#DA020F"/>
</svg>
```
--------------------------------------------------------------------------------
/docs/public/resources/images/logos/xmlui6.svg:
--------------------------------------------------------------------------------
```
<svg width="60" height="15" viewBox="0 0 60 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.72 14H8.8L6.72 10.2L4.76 14H0.12L4.56 7.4L0.34 0.799999H5.16L7.04 4.44L8.94 0.799999H13.38L9.18 7.28L13.72 14ZM32.0914 0.799999V14H28.4914V8.72L28.5714 4.46H28.5314L25.6314 14H22.3514L19.4914 4.46H19.4314L19.5114 8.72V14H15.9114V0.799999H21.6714L23.4514 7.06L24.1114 9.68H24.1514L24.8114 7.06L26.5914 0.799999H32.0914ZM39.5852 10.94H45.8652V14H35.5052V0.799999H39.5852V10.94Z" fill="black"/>
<path d="M55.3115 6.08V10.676C55.3115 11.828 55.0035 12.692 54.3875 13.268C53.7715 13.836 52.8515 14.12 51.6275 14.12C50.3955 14.12 49.4715 13.836 48.8555 13.268C48.2395 12.692 47.9315 11.828 47.9315 10.676V6.08H50.3915V10.808C50.3915 11.288 50.4955 11.648 50.7035 11.888C50.9115 12.128 51.2195 12.248 51.6275 12.248C52.0355 12.248 52.3435 12.128 52.5515 11.888C52.7595 11.648 52.8635 11.288 52.8635 10.808V6.08H55.3115ZM59.6667 6.08V14H57.2187V6.08H59.6667Z" fill="#DA020F"/>
</svg>
```
--------------------------------------------------------------------------------
/docs/public/pages/howto/assign-a-complex-json-literal-to-a-component-variable.md:
--------------------------------------------------------------------------------
```markdown
# Assign a complex JSON literal to a component variable
```xmlui-pg noHeader
---app
<App>
<Test />
</App>
---api
{}
---comp display
<Component name="Test"
<!-- double curly braces inside double quote -->
var.appConfig="{{
name: 'Photo Gallery',
version: '1.2.0',
isPublic: true,
photos: [
{ id: 1, title: 'Sunset Beach', likes: 42 },
{ id: 2, title: 'Mountain View', likes: 38 },
{ id: 3, title: 'City Lights', likes: 55 }
],
authors: [
{ name: 'Alice Johnson', role: 'Photographer' },
{ name: 'Bob Smith', role: 'Editor' }
]
}}">
<!-- double curly braces inside double quote -->
<Text>{appConfig.name} v{appConfig.version}</Text>
<Text>Photos ({appConfig.photos.length})</Text>
<Items data="{appConfig.photos}">
<Text>{$item.title} - {$item.likes} likes</Text>
</Items>
<Text>Team</Text>
<Items data="{appConfig.authors}">
<Text>{$item.name} ({$item.role})</Text>
</Items>
</Component>
```
```
--------------------------------------------------------------------------------
/blog/public/resources/github.svg:
--------------------------------------------------------------------------------
```
<svg width="98" height="96" viewBox="0 0 98 96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="currentColor"/></svg>
```
--------------------------------------------------------------------------------
/docs/public/resources/github.svg:
--------------------------------------------------------------------------------
```
<svg width="98" height="96" viewBox="0 0 98 96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="currentColor"/></svg>
```
--------------------------------------------------------------------------------
/docs/public/resources/images/logos/xmlui4.svg:
--------------------------------------------------------------------------------
```
<svg width="66" height="15" viewBox="0 0 66 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.72 14H8.8L6.72 10.2L4.76 14H0.12L4.56 7.4L0.34 0.799999H5.16L7.04 4.44L8.94 0.799999H13.38L9.18 7.28L13.72 14ZM32.0914 0.799999V14H28.4914V8.72L28.5714 4.46H28.5314L25.6314 14H22.3514L19.4914 4.46H19.4314L19.5114 8.72V14H15.9114V0.799999H21.6714L23.4514 7.06L24.1114 9.68H24.1514L24.8114 7.06L26.5914 0.799999H32.0914ZM39.5852 10.94H45.8652V14H35.5052V0.799999H39.5852V10.94Z" fill="#091D3D"/>
<path d="M59.3155 0.799999V9.18C59.3155 10.82 58.8688 12.0667 57.9755 12.92C57.0955 13.7733 55.8488 14.2 54.2355 14.2C52.6221 14.2 51.3688 13.7733 50.4755 12.92C49.5821 12.0667 49.1355 10.82 49.1355 9.18V0.799999H50.1355V8.98C50.1355 10.3933 50.4821 11.4667 51.1755 12.2C51.8821 12.92 52.9021 13.28 54.2355 13.28C55.5688 13.28 56.5821 12.92 57.2755 12.2C57.9688 11.4667 58.3155 10.3933 58.3155 8.98V0.799999H59.3155ZM65.1659 0.799999V14H64.1659V0.799999H65.1659Z" fill="#DA020F"/>
</svg>
```
--------------------------------------------------------------------------------
/xmlui/src/components/component-utils.ts:
--------------------------------------------------------------------------------
```typescript
import { omitBy, isUndefined } from "lodash-es";
import { composeRefs } from "@radix-ui/react-compose-refs";
/**
* Maps a record of query params to a usable local URL path with the params appended at the end
* @param to Either a simple URL endpoint or a URL path with query params (corresponds to a href)
*/
export function createUrlWithQueryParams(
to: string | number | { pathname: string | number; queryParams?: Record<string, any> }
) {
if (!to || typeof to === "string" || typeof to === "number") {
return to;
}
if (to.queryParams !== undefined) {
return {
...to,
search: new URLSearchParams(omitBy(to.queryParams, isUndefined)).toString(),
};
}
return to;
}
export function getComposedRef(...refs){
const nonUndefinedRefs = refs.filter(ref => ref !== undefined);
if(nonUndefinedRefs.length === 0){
return undefined;
}
if(nonUndefinedRefs.length === 1){
return nonUndefinedRefs[0];
}
return composeRefs(...nonUndefinedRefs);
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/RealTimeAdapter/RealTimeAdapter.tsx:
--------------------------------------------------------------------------------
```typescript
import { createComponentRenderer } from "../../components-core/renderers";
import { createMetadata, d } from "../metadata-helpers";
import { RealTimeAdapter, defaultProps } from "./RealTimeAdapterNative";
const COMP = "RealTimeAdapter";
export const RealTimeAdapterMd = createMetadata({
status: "experimental",
description: "`RealTimeAdapter` is a non-visual component that listens to real-time events.",
props: {
url: {
description: `This property specifies the URL to use for long-polling.`,
defaultValue: defaultProps.url,
},
},
events: {
eventArrived: d(`This event is raised when data arrives from the backend using long-polling.`),
},
});
export const realTimeAdapterComponentRenderer = createComponentRenderer(
COMP,
RealTimeAdapterMd,
({ node, lookupEventHandler, extractValue }) => {
return (
<RealTimeAdapter
url={extractValue(node.props.url)}
onEvent={lookupEventHandler("eventArrived")}
/>
);
},
);
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/utils/actionUtils.ts:
--------------------------------------------------------------------------------
```typescript
import type { ContainerState } from "../rendering/ContainerWrapper";
import type { AppContextObject } from "../../abstractions/AppContextDefs";
import { DataLoaderQueryKeyGenerator } from "../utils/DataLoaderQueryKeyGenerator";
import { extractParam } from "../utils/extractParam";
export async function invalidateQueries(
invalidates: undefined | string | string[],
appContext: AppContextObject,
state: ContainerState,
) {
if (invalidates) {
let arrayToInvalidate = [invalidates];
if (Array.isArray(invalidates)) {
arrayToInvalidate = invalidates;
}
arrayToInvalidate.forEach((invalidate) => {
void appContext.queryClient?.invalidateQueries(
new DataLoaderQueryKeyGenerator(
extractParam(state, invalidate, appContext),
undefined,
appContext?.appGlobals.apiUrl,
undefined,
undefined,
).asPredicate(),
);
});
} else {
await appContext.queryClient?.invalidateQueries();
}
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/Backdrop/Backdrop.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-Backdrop: createThemeVar("backgroundColor-Backdrop");
$opacity-Backdrop: createThemeVar("opacity-Backdrop");
@layer components {
.backdropContainer {
position: relative;
display: inline-block;
width: fit-content;
}
.backdrop {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: $backgroundColor-Backdrop;
opacity: $opacity-Backdrop;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
// --- We export the theme variables to add them to the component renderer
:export {
themeVars: t.json-stringify($themeVars);
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/Input/InputAdornment.tsx:
--------------------------------------------------------------------------------
```typescript
import classnames from "classnames";
import styles from "./InputAdornment.module.scss";
import { Icon } from "../Icon/IconNative";
import { Text } from "../Text/TextNative";
interface AdornmentProps {
iconName?: string;
text?: string;
className?: string;
onClick?: () => void;
}
export function Adornment({ iconName, text, className, onClick, ...rest }: AdornmentProps) {
return (
<>
{iconName || text ? (
<div
{...rest}
className={classnames(styles.wrapper, className, {
[styles.clickable]: !!onClick,
})}
role={onClick ? "button" : "presentation"}
onClick={onClick}
tabIndex={onClick ? 0 : undefined}
>
<Icon name={iconName} style={{ color: "inherit" }} />
{text && (
<div style={{ display: "flex", userSelect: "none" }}>
<Text style={{ fontSize: "inherit" }}>{text}</Text>
</div>
)}
</div>
) : null}
</>
);
}
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/component-hooks.ts:
--------------------------------------------------------------------------------
```typescript
import { useMemo } from "react";
import styles from "../components/Stack/Stack.module.scss";
import { capitalizeFirstLetter } from "./utils/misc";
// This react hooks prepares CSS style values according to the CSS flex semantics to combine orientation,
// horizontal, and vertical alignments.
export function useContentAlignment(orientation: string, horizontal?: string, vertical?: string) {
return useMemo(() => {
// --- Use CSS flex semantics to combine the orientation with alignment to prepare the CSS properties
return orientation === "horizontal"
? {
horizontal: horizontal && styles[`justifyItems${capitalizeFirstLetter(horizontal)}`],
vertical: vertical && styles[`alignItems${capitalizeFirstLetter(vertical)}`],
}
: {
horizontal: horizontal && styles[`alignItems${capitalizeFirstLetter(horizontal)}`],
vertical: vertical && styles[`justifyItems${capitalizeFirstLetter(vertical)}`],
};
}, [orientation, horizontal, vertical]);
}
```
--------------------------------------------------------------------------------
/docs/content/components/PageMetaTitle.md:
--------------------------------------------------------------------------------
```markdown
# PageMetaTitle [#pagemetatitle]
`PageMetaTitle` dynamically sets or updates the browser tab title, enabling pages and components to override the default application name with context-specific titles.
**Key features:**
- **Dynamic title updates**: Change browser tab title based on current page or content
- **App name override**: Supersedes the `App`s name property when present
- **Flexible placement**: Can be positioned anywhere in the component tree
- **Binding support**: Accepts dynamic values and expressions for context-aware titles
- **SEO enhancement**: Improves search engine optimization with descriptive page titles
## Properties [#properties]
### `value` (default: "XMLUI Application") [#value-default-xmlui-application]
This property sets the page's title to display in the browser tab.
## Events [#events]
This component does not have any events.
## Exposed Methods [#exposed-methods]
This component does not expose any methods.
## Styling [#styling]
This component does not have any styles.
```
--------------------------------------------------------------------------------
/xmlui/src/components/Carousel/CarouselItemNative.tsx:
--------------------------------------------------------------------------------
```typescript
import type { ForwardedRef, ReactNode } from "react";
import { forwardRef, useEffect, useId } from "react";
import classnames from "classnames";
import styles from "./Carousel.module.scss";
import { useCarousel } from "./CarouselContext";
type Props = {
children: ReactNode;
style?: React.CSSProperties;
};
export const CarouselItemComponent = forwardRef(function CarouselItemComponent(
{ children, style, ...rest }: Props,
forwardedRef: ForwardedRef<HTMLDivElement>,
) {
const id = useId();
const { register, unRegister, itemProps } = useCarousel();
useEffect(() => {
register({
id,
});
}, [id, children, style, register, forwardedRef]);
useEffect(() => {
return () => {
unRegister(id);
};
}, [id, unRegister]);
return (
<div
{...rest}
key={id}
{...itemProps}
className={classnames(styles.carouselItem)}
>
<div className={styles.innerWrapper} ref={forwardedRef} style={style}>
{children}
</div>
</div>
);
});
```
--------------------------------------------------------------------------------
/docs/public/pages/xmlui-animations/Animation.md:
--------------------------------------------------------------------------------
```markdown
# Animation [#animation]
>[!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.
## Properties
### `animateWhenInView`
Indicates whether the animation should start when the component is in view
### `animation`
The animation object to be applied to the component
### `delay (default: 0)`
The delay before the animation starts in milliseconds
### `duration`
The duration of the animation in milliseconds
### `loop (default: false)`
Indicates whether the animation should loop
### `once (default: false)`
Indicates whether the animation should only run once
### `reverse (default: false)`
Indicates whether the animation should run in reverse
## 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.
```
--------------------------------------------------------------------------------
/packages/xmlui-devtools/package.json:
--------------------------------------------------------------------------------
```json
{
"name": "xmlui-devtools",
"version": "0.1.20",
"sideEffects": false,
"scripts": {
"start": "xmlui start",
"preview": "xmlui preview",
"build:extension": "xmlui build-lib",
"build-watch": "xmlui build-lib --watch",
"build:demo": "xmlui build",
"build:meta": "xmlui build-lib --mode=metadata"
},
"dependencies": {
"@monaco-editor/loader": "^1.5.0",
"@monaco-editor/react": "^4.7.0",
"@radix-ui/react-dialog": "^1.1.14",
"@radix-ui/react-dropdown-menu": "^2.1.7",
"@radix-ui/react-tooltip": "^1.2.7",
"framer-motion": "^12.18.1",
"react-icons": "^5.5.0"
},
"devDependencies": {
"xmlui": "*"
},
"main": "./dist/xmlui-devtools.js",
"module": "./dist/xmlui-devtools.mjs",
"exports": {
".": {
"import": "./dist/xmlui-devtools.mjs",
"require": "./dist/xmlui-devtools.js"
},
"./*.css": {
"import": "./dist/*.css",
"require": "./dist/*.css"
}
},
"files": [
"dist"
],
"engines": {
"node": ">=18.0.0"
}
}
```
--------------------------------------------------------------------------------
/packages/xmlui-playground/src/playground/Editor.tsx:
--------------------------------------------------------------------------------
```typescript
import { editorStatusChanged, textChanged } from "../state/store";
import { startTransition, useCallback, useEffect, useState } from "react";
import { usePlayground } from "../hooks/usePlayground";
import { Editor as XMLUIEditor } from "xmlui-devtools";
export const Editor = () => {
const { text, dispatch, options } = usePlayground();
const [value, setValue] = useState(text);
useEffect(() => {
setValue(text);
}, [text]);
const updateValue = useCallback(
(value: string) => {
setValue(value);
startTransition(() => {
dispatch(textChanged(value));
});
},
[dispatch],
);
useEffect(() => {
dispatch(editorStatusChanged("loading"));
}, [dispatch]);
return (
<XMLUIEditor
readOnly={false}
activeThemeTone={options.activeTone}
saveViewState={true}
key={"app"}
onChange={updateValue}
language={options.language}
onMount={() => {
dispatch(editorStatusChanged("loaded"));
}}
value={value}
/>
);
};
```
--------------------------------------------------------------------------------
/docs/public/pages/xmlui-charts/LabelList.md:
--------------------------------------------------------------------------------
```markdown
# LabelList [#labellist]
>[!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.Label list component for a chart component.
## Properties
### `key`
The key that needs to be matched to the data series.
### `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
This component does not have any events.
## Exposed Methods
This component does not expose any methods.
## Styling
### Theme Variables
| Variable | Default Value (Light) | Default Value (Dark) |
| --- | --- | --- |
| [textColor](../styles-and-themes/common-units/#color)-LabelList | $textColor-primary | $textColor-primary |
```
--------------------------------------------------------------------------------
/xmlui/src/components/PositionedContainer/PositionedContainer.tsx:
--------------------------------------------------------------------------------
```typescript
import styles from "./PositionedContainer.module.scss";
import { createComponentRenderer } from "../../components-core/renderers";
import { parseScssVar } from "../../components-core/theming/themeVars";
import { PositionedContainer } from "./PositionedContainerNative";
import { createMetadata, d } from "../metadata-helpers";
const COMP = "PositionedContainer";
export const PositionedContainerMd = createMetadata({
status: "deprecated",
description: "(**OBSOLETE**) This component was created for the ChatEngine app.",
props: {
visibleOnHover: d("No description"),
},
themeVars: parseScssVar(styles.themeVars),
});
export const positionedContainerComponentRenderer = createComponentRenderer(
COMP,
PositionedContainerMd,
({ node, extractValue, renderChild, className }) => {
return (
<PositionedContainer
className={className}
visibleOnHover={extractValue.asOptionalBoolean(node.props.visibleOnHover)}
>
{renderChild(node.children)}
</PositionedContainer>
);
},
);
```
--------------------------------------------------------------------------------
/packages/xmlui-playground/package.json:
--------------------------------------------------------------------------------
```json
{
"name": "xmlui-playground",
"version": "0.1.10",
"sideEffects": false,
"scripts": {
"start": "xmlui start",
"preview": "xmlui preview",
"build:extension": "xmlui build-lib",
"build-watch": "xmlui build-lib --watch",
"build:demo": "xmlui build",
"build:meta": "xmlui build-lib --mode=metadata"
},
"dependencies": {
"@radix-ui/react-dropdown-menu": "^2.1.7",
"@radix-ui/react-toast": "^1.2.13",
"@radix-ui/react-tooltip": "^1.2.6",
"file-saver": "^2.0.5",
"jszip": "^3.10.1",
"react-icons": "^5.5.0",
"xmlui-devtools": "*"
},
"devDependencies": {
"@types/file-saver": "^2.0.7",
"xmlui": "*"
},
"main": "./dist/xmlui-playground.js",
"module": "./dist/xmlui-playground.mjs",
"exports": {
".": {
"import": "./dist/xmlui-playground.mjs",
"require": "./dist/xmlui-playground.js"
},
"./*.css": {
"import": "./dist/*.css",
"require": "./dist/*.css"
}
},
"files": [
"dist"
],
"engines": {
"node": ">=18.0.0"
}
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/svg/box.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="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/assign-to-object-or-array-regression.spec.ts:
--------------------------------------------------------------------------------
```typescript
import { test } from "../src/testing/fixtures";
import { expect } from "../src/testing/assertions";
test("assign to object with number key", async ({ page, initTestBed }) => {
await initTestBed(`
<Fragment>
<script>
var rolesByIds = {};
</script>
<Button
testId="button"
onClick="rolesByIds[5] = 'EDITOR'"
/>
<Text testId='result'>{JSON.stringify(rolesByIds)}</Text>
</Fragment>
`);
await page.getByTestId("button").click();
await expect(page.getByTestId("result")).toHaveText("{\"5\":\"EDITOR\"}");
});
test("assign to array with number key", async ({ page, initTestBed }) => {
await initTestBed(`
<Fragment>
<script>
var userIds = [1, 2, 3, 4];
</script>
<Button
testId="button"
onClick="userIds[1] = 'MODIFIED'"
/>
<Text testId='result'>{JSON.stringify(userIds)}</Text>
</Fragment>
`);
await page.getByTestId("button").click();
await expect(page.getByTestId("result")).toHaveText("[1,\"MODIFIED\",3,4]");
});
```
--------------------------------------------------------------------------------
/docs/public/pages/xmlui-animations/SlideInAnimation.md:
--------------------------------------------------------------------------------
```markdown
# SlideInAnimation [#slideinanimation]
>[!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 `SlideInAnimation` component represents an animation that slides in the content from the left.
## 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
### `direction (default: "left")`
The direction of the animation.
### `duration`
The duration of the animation in milliseconds.
### `loop (default: false)`
Indicates whether the animation should loop
### `reverse (default: false)`
Indicates whether the animation should run in reverse
## 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/ContentSeparator/ContentSeparatorNative.tsx:
--------------------------------------------------------------------------------
```typescript
import { forwardRef, type CSSProperties } from "react";
import classnames from "classnames";
import styles from "./ContentSeparator.module.scss";
type ContentSeparatorProps = {
size?: number | string;
orientation?: string;
style?: CSSProperties;
className?: string;
};
export const defaultProps: Pick<ContentSeparatorProps, "orientation"> = {
orientation: "horizontal",
};
export const ContentSeparator = forwardRef<HTMLDivElement, ContentSeparatorProps>(
({ orientation = defaultProps.orientation, size, style, className, ...rest }, ref) => {
return (
<div
{...rest}
ref={ref}
className={classnames(
styles.separator,
{
[styles.horizontal]: orientation === "horizontal",
[styles.vertical]: orientation === "vertical",
},
className,
)}
style={{
height: orientation === "horizontal" ? size : undefined,
width: orientation === "horizontal" ? "100%" : size,
...style,
}}
/>
);
}
);
```
--------------------------------------------------------------------------------
/docs/public/resources/files/news-and-reviews.json:
--------------------------------------------------------------------------------
```json
[
{
"date": "2025-09-08",
"title": "How To Upgrade Your MCP Server With Context Engineering",
"url": "https://thenewstack.io/how-to-upgrade-your-mcp-server-with-context-engineering/",
"source": "thenewstack.io"
},
{
"date": "2025-07-23",
"title": "XMLUI builds React-based UIs with simple markup",
"url": "https://www.infoworld.com/article/4026889/xmlui-builds-react-based-uis-with-simple-markup.html",
"source": "infoworld.com"
},
{
"date": "2025-07-22",
"title": "Make React Components With XMLUI, a Visual Basic for the AI Era",
"url": "https://thenewstack.io/make-react-components-with-xmlui-a-visual-basic-for-the-ai-era/",
"source": "thenewstack.io"
},
{
"date": "2025-07-21",
"title": "Components for Web Apps",
"url": "https://www.windley.com/archives/2025/07/components_for_web_apps.shtml",
"source": "windley.com"
},
{
"date": "2025-07-18",
"title": "Introducing XMLUI",
"url": "https://blog.jonudell.net/2025/07/18/introducing-xmlui/",
"source": "blog.jonudell.net"
}
]
```
--------------------------------------------------------------------------------
/docs/content/components/StickyBox.md:
--------------------------------------------------------------------------------
```markdown
# StickyBox [#stickybox]
`StickyBox` remains fixed at the top or bottom of the screen as the user scrolls.
## Properties [#properties]
### `to` (default: "top") [#to-default-top]
This property determines whether the StickyBox should be anchored to the `top` or `bottom`.
Available values: `top` **(default)**, `bottom`
```xmlui-pg copy display name="Example: to" height="200px"
<App>
<StickyBox to="top">
This part of the UI sticks to the top
</StickyBox>
<Stack backgroundColor="red" height="80px" width="100%" />
<Stack backgroundColor="green" height="80px" width="100%" />
<Stack backgroundColor="blue" height="80px" width="100%" />
</App>
```
## 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)-StickyBox | $backgroundColor | $backgroundColor |
```
--------------------------------------------------------------------------------
/packages/xmlui-pdf/src/index.tsx:
--------------------------------------------------------------------------------
```typescript
import { createComponentRenderer, createMetadata, d, parseScssVar } from "xmlui";
import { LazyPdf } from "./LazyPdfNative";
import styles from "./Pdf.module.scss";
const COMP = "Pdf";
export const PdfMd = createMetadata({
description: `The \`${COMP}\` component provides a read-only preview of a pdf document's contents.`,
status: "experimental",
props: {
src: {
description: `This property defines the source URL of the pdf document to display.`,
valueType: "string",
},
data: d(
`This property contains the binary data that represents the PDF document.`,
),
},
themeVars: parseScssVar(styles.themeVars),
defaultThemeVars: {
"boxShadow-page-Pdf": "$boxShadow-md",
"gap-pages-Pdf": "$space-4",
},
});
const PdfComponent = createComponentRenderer(COMP, PdfMd, ({ node, extractValue }) => {
const props = node.props as typeof PdfMd.props;
return <LazyPdf src={extractValue(props!.src)} data={extractValue(props!.data)} />;
});
export default {
namespace: "XMLUIExtensions",
components: [PdfComponent],
};
```
--------------------------------------------------------------------------------
/xmlui/tests-e2e/api-bound-component-regression.spec.ts:
--------------------------------------------------------------------------------
```typescript
import { expect, test } from "../src/testing/fixtures";
test("multiple api-bound component don't mix/overwrite state", async ({ initTestBed, page }) => {
await initTestBed(
`
<Fragment>
<Text testId='data1_text'>
<property name="value">
<DataSource url="/data1"/>
</property>
</Text>
<Text testId='data2_text'>
<property name="value">
<DataSource url="/data2"/>
</property>
</Text>
</Fragment>
`,
{
apiInterceptor: {
operations: {
"load-api-data1": {
url: "/data1",
method: "get",
handler: `()=>{
return 'data1';
}`,
},
"load-api-data2": {
url: "/data2",
method: "get",
handler: `()=>{
return 'data2';
}`,
},
},
},
},
);
await expect(page.getByTestId("data1_text")).toHaveText("data1");
await expect(page.getByTestId("data2_text")).toHaveText("data2");
});
```
--------------------------------------------------------------------------------
/packages/xmlui-os-frames/src/IPhoneFrame.tsx:
--------------------------------------------------------------------------------
```typescript
import styles from "./IPhoneFrame.module.scss";
import classNames from "classnames";
import type { ReactNode } from "react";
import { forwardRef } from "react";
export const IPhoneFrame = forwardRef(({ children }: {children: ReactNode}, ref) => {
return (
// simple wrapper, in case if it's in a flowlayout (the device width/height could be overwritten otherwise), temp
<div>
<div className={classNames(styles.device, styles.deviceIphone14Pro)} ref={ref as any}>
<div className={styles.deviceFrame}>
<div className={styles.deviceScreen}>
{children}
</div>
{/*<img className="device-screen" src="assets/img/bg-iphone-14-pro.jpg" loading="lazy" />*/}
</div>
<div className={styles.deviceStripe}></div>
<div className={styles.deviceHeader}></div>
<div className={styles.deviceSensors}></div>
<div className={styles.deviceBtns}></div>
<div className={styles.devicePower}></div>
<div className={styles.deviceHome}></div>
</div>
</div>
);
});
```
--------------------------------------------------------------------------------
/xmlui/src/testing/infrastructure/public/resources/box.svg:
--------------------------------------------------------------------------------
```
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" data-testid="box-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="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>
```
--------------------------------------------------------------------------------
/docs/content/components/MenuSeparator.md:
--------------------------------------------------------------------------------
```markdown
# MenuSeparator [#menuseparator]
`MenuSeparator` displays a separator line between menu items to group related menu options within `DropdownMenu`.
## 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]
### Theme Variables [#theme-variables]
| Variable | Default Value (Light) | Default Value (Dark) |
| --- | --- | --- |
| [color](../styles-and-themes/common-units/#color)-MenuSeparator | $borderColor-dropdown-item | $borderColor-dropdown-item |
| [height](../styles-and-themes/common-units/#size)-MenuSeparator | 1px | 1px |
| [marginBottom](../styles-and-themes/common-units/#size)-MenuSeparator | $space-1 | $space-1 |
| [margin](../styles-and-themes/common-units/#size)Horizontal-MenuSeparator | 12px | 12px |
| [marginTop](../styles-and-themes/common-units/#size)-MenuSeparator | $space-1 | $space-1 |
| [width](../styles-and-themes/common-units/#size)-MenuSeparator | 100% | 100% |
```
--------------------------------------------------------------------------------
/docs/public/pages/xmlui-animations/ScaleAnimation.md:
--------------------------------------------------------------------------------
```markdown
# ScaleAnimation [#scaleanimation]
>[!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 `ScaleAnimation` component represents an animation that scales the content.
## 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)`
The initial scale of the content.
### `loop (default: false)`
Indicates whether the animation should loop
### `reverse (default: false)`
Indicates whether the animation should run in reverse
### `to (default: 1)`
The final scale of the content.
## 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/AutoComplete/AutoCompleteContext.tsx:
--------------------------------------------------------------------------------
```typescript
import type { ReactNode } from "react";
import { createContext, useContext } from "react";
import type { Option } from "../abstractions";
import type { SingleValueType } from "../Select/SelectNative";
type AutoCompleteContextValue = {
multi?: boolean;
value: string | string[] | null;
onChange?: (selectedValue: string) => void;
inputValue: string;
searchTerm: string;
options: Set<Option>;
open?: boolean;
setOpen?: (open: boolean) => void;
setSelectedIndex?: (index: number) => void;
optionRenderer: (option: Option, selectedValue: SingleValueType, inTrigger: boolean) => ReactNode;
};
export const AutoCompleteContext = createContext<AutoCompleteContextValue>({
value: null,
onChange: (selectedValue: string) => {},
inputValue: "",
searchTerm: "",
options: new Set<Option>(),
open: false,
setOpen: (open: boolean) => {},
setSelectedIndex: (index: number) => {},
optionRenderer: (option: Option, selectedValue: SingleValueType, inTrigger: boolean) => null,
});
export function useAutoComplete() {
return useContext(AutoCompleteContext);
}
```
--------------------------------------------------------------------------------
/tools/create-app/helpers/install.ts:
--------------------------------------------------------------------------------
```typescript
import spawn from "cross-spawn";
import type { PackageManager } from "./get-pkg-manager";
/**
* Spawn a package manager installation based on user preference.
*
* @returns A Promise that resolves once the installation is finished.
*/
export async function install(
/** Indicate which package manager to use. */
packageManager: PackageManager
): Promise<void> {
let args: string[] = ["install"];
/**
* Return a Promise that resolves once the installation is finished.
*/
return new Promise((resolve, reject) => {
/**
* Spawn the installation process.
*/
const child = spawn(packageManager, args, {
stdio: "inherit",
env: {
...process.env,
ADBLOCK: "1",
// we set NODE_ENV to development as pnpm skips dev
// dependencies when production
NODE_ENV: "development",
DISABLE_OPENCOLLECTIVE: "1",
},
});
child.on("close", (code) => {
if (code !== 0) {
reject({ command: `${packageManager} ${args.join(" ")}` });
return;
}
resolve();
});
});
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/svg/img.svg:
--------------------------------------------------------------------------------
```
<svg width="22" height="28" viewBox="0 0 22 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1960_14704)">
<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_14704">
<rect width="22" height="28" fill="white"/>
</clipPath>
</defs>
</svg>
```
--------------------------------------------------------------------------------
/xmlui/src/components/NavPanel/NavPanel.md:
--------------------------------------------------------------------------------
```markdown
%-DESC-START
**Key features:**
- **Layout adaptation**: Automatically positions navigation horizontally or vertically based on App layout
- **Navigation organization**: Contains NavLink and NavGroup components to build structured menus
- **Logo integration**: Supports custom logo templates in vertical layouts via logoTemplate property
- **Drawer mode**: Can optionally display navigation in a collapsible drawer interface
- **Theme integration**: Inherits styling from the app's theme system for consistent appearance
%-DESC-END
%-PROP-START logoTemplate
```xmlui-pg copy {3-8} display name="Example: logoTemplate" height={250}
<App layout="vertical">
<NavPanel>
<property name="logoTemplate">
<H3>
<Icon name="drive" />
DriveDiag (Nav)
</H3>
</property>
<NavLink label="Home" to="/" icon="home"/>
<NavLink label="Page 1" to="/page1"/>
</NavPanel>
<Pages fallbackPath="/">
<Page url="/">
<Text value="Home" />
</Page>
<Page url="/page1">
<Text value="Page 1" />
</Page>
</Pages>
</App>
```
%-PROP-END
```
--------------------------------------------------------------------------------
/xmlui/src/components/NoResult/NoResult.module.scss:
--------------------------------------------------------------------------------
```scss
@use "../../components-core/theming/themes" as t;
// --- This code snippet is required to collect the theme variables used in this module
$themeVars: ();
@function createThemeVar($componentVariable) {
$themeVars: t.appendThemeVar($themeVars, $componentVariable) !global;
@return t.getThemeVar($themeVars, $componentVariable);
}
$component: "NoResult";
$themeVars: t.composePaddingVars($themeVars, $component);
$themeVars: t.composeBorderVars($themeVars, $component);
$gap-icon-NoResult: createThemeVar("gap-icon-#{$component}");
$size-icon-NoResult: createThemeVar("size-icon-#{$component}");
@layer components {
.wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
@include t.borderVars($themeVars, $component);
@include t.paddingVars($themeVars, $component);
}
.icon {
width: $size-icon-NoResult;
height: $size-icon-NoResult;
margin-bottom: $gap-icon-NoResult;
}
}
// --- We export the theme variables to add them to the component renderer
:export {
themeVars: t.json-stringify($themeVars);
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/svg/expression.svg:
--------------------------------------------------------------------------------
```
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21 16.0019V8.00186C20.9996 7.65113 20.9071 7.30667 20.7315 7.00302C20.556 6.69937 20.3037 6.44722 20 6.27186L13 2.27186C12.696 2.09632 12.3511 2.00391 12 2.00391C11.6489 2.00391 11.304 2.09632 11 2.27186L4 6.27186C3.69626 6.44722 3.44398 6.69937 3.26846 7.00302C3.09294 7.30667 3.00036 7.65113 3 8.00186V16.0019C3.00036 16.3526 3.09294 16.697 3.26846 17.0007C3.44398 17.3043 3.69626 17.5565 4 17.7319L11 21.7319C11.304 21.9074 11.6489 21.9998 12 21.9998C12.3511 21.9998 12.696 21.9074 13 21.7319L20 17.7319C20.3037 17.5565 20.556 17.3043 20.7315 17.0007C20.9071 16.697 20.9996 16.3526 21 16.0019Z"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3.26953 6.96094L11.9995 12.0109L20.7295 6.96094" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 22.08V12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
```
--------------------------------------------------------------------------------
/xmlui/src/abstractions/scripting/LogicalThread.ts:
--------------------------------------------------------------------------------
```typescript
import type { BlockScope } from "./BlockScope";
import type { LoopScope } from "./LoopScope";
import type { TryScope } from "./TryScopeExp";
import type { Expression } from "../../components-core/script-runner/ScriptingSourceTree";
// Result of evaluating a binding expression
export type ValueResult = {
value: any;
valueScope?: any;
valueIndex?: number | string;
};
// Represents a logical thread instance
export type LogicalThread = {
// --- Parent thread
parent?: LogicalThread;
// --- Child threads forked directly from this thread
childThreads: LogicalThread[];
// --- Optional cache for expression values
valueCache?: Map<Expression, ValueResult>;
// --- Available closures
closures?: BlockScope[];
// --- Scopes for block-level variables
blocks?: BlockScope[];
// --- Scopes for loops in progress
loops?: LoopScope[];
// --- Scopes for try blocks in progress
tryBlocks?: TryScope[];
// --- The value of the break label to use for the forthcoming loop
breakLabelValue?: number;
// --- Optional return value of the thread
returnValue?: any;
};
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/behaviors/Behavior.tsx:
--------------------------------------------------------------------------------
```typescript
import type { ReactNode } from "react";
import type { RendererContext } from "../../abstractions/RendererDefs";
import type { ComponentDef, ComponentMetadata } from "../../abstractions/ComponentDefs";
/**
* Defines the shape of a component behavior that can wrap a component with
* additional functionality.
*/
export interface Behavior {
/**
* The name of the behavior (e.g., "tooltip", "animation").
*/
name: string;
/**
* A function that determines if the behavior should be applied based on the
* component's context and props.
* @param node The component definition.
* @param metadata The metadata of the component.
* @returns True if the behavior can be attached, otherwise false.
*/
canAttach: (node: ComponentDef, metadata: ComponentMetadata) => boolean;
/**
* A function that attaches the behavior to the component's React node.
* @param context The renderer context of the component.
* @param node The React node to attach.
* @returns The attached React node.
*/
attach: (context: RendererContext<any>, node: ReactNode) => ReactNode;
}
```
--------------------------------------------------------------------------------
/xmlui/src/parsers/style-parser/source-tree.ts:
--------------------------------------------------------------------------------
```typescript
// The root type of all source tree nodes
export interface BaseNode {
type: StyleNode["type"];
startPosition: number;
endPosition: number;
themeId?: ThemeIdDescriptor;
}
export type DefaultValueDescriptor = (string | ThemeIdDescriptor)[];
export type ThemeIdDescriptor = {
id: string;
defaultValue?: DefaultValueDescriptor;
};
export interface SizeNode extends BaseNode {
type: "Size";
value: number;
unit: string;
extSize?: string;
}
export interface BooleanNode extends BaseNode {
type: "Boolean";
value: boolean;
}
export interface BorderStyleNode extends BaseNode {
type: "BorderStyle";
value: string;
}
export interface BorderNode extends BaseNode {
type: "Border";
widthValue?: number;
widthUnit?: string;
color?: string | number;
styleValue?: string;
themeId1?: ThemeIdDescriptor;
themeId2?: ThemeIdDescriptor;
themeId3?: ThemeIdDescriptor;
}
export interface ColorNode extends BaseNode {
type: "Color";
colorId?: string;
value: string | number;
}
export type StyleNode = SizeNode | BooleanNode | BorderStyleNode | BorderNode | ColorNode;
```
--------------------------------------------------------------------------------
/xmlui/tests/components-core/scripts-runner/eval-tree-regression.test.ts:
--------------------------------------------------------------------------------
```typescript
import { describe, expect, it } from "vitest";
import { evalBindingExpression } from "../../../src/components-core/script-runner/eval-tree-sync";
import {createEvalContext} from "./test-helpers";
import { Parser } from "../../../src/parsers/scripting/Parser";
import { evalBindingAsync } from "../../../src/components-core/script-runner/eval-tree-async";
describe("Evaluate arrow expressions (exp)", () => {
it("concat #1", () => {
// --- Arrange
const source = "[].concat([])";
const context = createEvalContext({});
// --- Act
const value = evalBindingExpression(source, context);
// --- Arrange
expect(value).toStrictEqual([]);
});
it("concat (async) #1", async () => {
// --- Arrange
const source = "[].concat([])";
const context = createEvalContext({});
// --- Act
const wParser = new Parser(source);
const expr = wParser.parseExpr();
expect(expr).not.equal(null);
if (!expr) return;
const value = await evalBindingAsync(expr, context, context.mainThread);
// --- Arrange
expect(value).toStrictEqual([]);
});
});
```
--------------------------------------------------------------------------------
/xmlui/src/components/RadioGroup/RadioItem.tsx:
--------------------------------------------------------------------------------
```typescript
import { createComponentRenderer } from "../../components-core/renderers";
import { createMetadata, dDidChange } from "../metadata-helpers";
import { RadioItem, defaultProps } from "./RadioItemNative";
const COMP = "RadioItem";
export const RadioItemMd = createMetadata({
status: "experimental",
description: `The \`${COMP}\` component is a radio button that is part of a group of radio buttons.`,
props: {
checked: {
description: "This property specifies whether the radio button is checked.",
defaultValue: defaultProps.checked,
},
value: {
description: "This property specifies the value of the radio button.",
defaultValue: defaultProps.value,
},
},
events: {
didChange: dDidChange(COMP),
},
});
export const radioItemComponentRenderer = createComponentRenderer(
COMP,
RadioItemMd,
({ node, extractValue, lookupEventHandler }) => {
return (
<RadioItem
checked={extractValue(node.props.checked)}
value={extractValue(node.props.value)}
onDidChange={lookupEventHandler("didChange")}
/>
);
},
);
```
--------------------------------------------------------------------------------
/docs/public/pages/xmlui-charts/DonutChart.md:
--------------------------------------------------------------------------------
```markdown
# DonutChart [#donutchart]
>[!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 derivative of the pie chart that is a donut chart.
## Properties
### `data`
The data to be displayed in the chart. Needs to be an array of objects.
### `dataKeys`
This property specifies the keys in the data objects that should be used for rendering the bars.
### `innerRadius (default: 60)`
Sets the inner radius of the donut chart.
### `nameKey`
Specifies the key in the data objects that will be used to label the different data series.
### `showLabel (default: true)`
Toggles whether to show labels (`true`) or not (`false`).
### `showLabelList (default: false)`
Whether to show labels in a list (`true`) or not (`false`).
### `showLegend (default: false)`
Whether to show a legend (`true`) or not (`false`).
## 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.
```
--------------------------------------------------------------------------------
/.github/workflows/prepare-versions.yml:
--------------------------------------------------------------------------------
```yaml
name: Prepare versions for release
on:
workflow_dispatch:
permissions:
contents: write
pull-requests: write
id-token: write
jobs:
create_version_pr:
name: Create Stable Version PR
runs-on: ubuntu-latest
steps:
- name: Checkout Repo
uses: actions/checkout@v4
with:
fetch-depth: 0
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: 22
cache: 'npm'
- name: Install Dependencies
run: npm ci --prefer-offline
- name: Create Version PR
id: changesets_pr
uses: changesets/action@v1
with:
# Command to run for versioning.
version: npm run changeset:version
commit: 'chore: version packages for stable release'
title: 'Version Packages for Stable Release'
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- name: Output Changeset PR URL
if: steps.changesets_pr.outputs.pullRequestUrl
run: |
echo "Version PR created: ${{ steps.changesets_pr.outputs.pullRequestUrl }}"
```
--------------------------------------------------------------------------------
/.github/workflows/deploy-docs.yml:
--------------------------------------------------------------------------------
```yaml
name: Deploy docs
on:
workflow_dispatch:
inputs:
max_releases:
description: "Maximum number of releases to include in docs"
type: number
required: false
default: 10
jobs:
build-and-deploy:
runs-on: ubuntu-latest
env:
NODE_OPTIONS: "--max-old-space-size=8192"
TURBO_UI: "false"
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 22
cache: "npm"
registry-url: https://registry.npmjs.org/
- name: Cache for Turbo
uses: rharkor/[email protected]
- run: npm ci --prefer-offline
- run: npm run build-docs
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
DOCS_XMLUI_MAX_RELEASES_LENGTH: ${{ github.event.inputs.max_releases }}
- name: "Run Azure webapp deploy action using publish profile credentials"
uses: azure/webapps-deploy@v2
with:
package: "docs/dist/ui.zip"
app-name: xmlui-docs
publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE_XMLUI_DOCS }}
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/interception/InMemoryDb.ts:
--------------------------------------------------------------------------------
```typescript
import type { IDatabase, TableDescriptor } from "./abstractions";
export class InMemoryDb implements IDatabase {
[key: string]: unknown;
constructor(
private tables: Array<TableDescriptor> | undefined,
private initialData: Record<string, any[]> | (() => Promise<Record<string, any[]>>) = {},
private config?: any,
) {}
getItems(collectionName: string): Promise<any[]> {
throw new Error("Method not implemented.");
}
getItem(collectionName: string, predicate: (item: any) => Promise<boolean>): Promise<any> {
throw new Error("Method not implemented.");
}
getItemById(collectionName: string, id: any): Promise<any> {
throw new Error("Method not implemented.");
}
deleteItems(collectionName: string, predicate: (item: any) => Promise<boolean>): Promise<void> {
throw new Error("Method not implemented.");
}
insertItem(collectionName: string, item: any): Promise<any> {
throw new Error("Method not implemented.");
}
updateItem(collectionName: string, item: any): Promise<any> {
throw new Error("Method not implemented.");
}
public async initialize() {}
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/TreeDisplay/TreeDisplay.md:
--------------------------------------------------------------------------------
```markdown
%-DESC-START
```xmlui-pg copy display name="Example: using TreeDisplay"
<App>
<TreeDisplay content="components
ClientDetails.xmlui
Clients.xmlui
MonthlyRevenue.xmlui
WeeklyRevenue.xmlui" />
</App>
```
```xmlui-pg copy display name="Example: using TreeDisplay with deeper hierarchy"
<App>
<TreeDisplay>
components
frontend
pages
home.xmlui
about.xmlui
contact.xmlui
components
Header.xmlui
Footer.xmlui
backend
api
users.js
products.js
</TreeDisplay>
</App>
```
```xmlui-pg copy display name="Example: file structure with custom theme color"
<App>
<TreeDisplay
content="project
src
components
TreeDisplay.tsx
utils
helpers.ts
package.json">
<property name="style">
{
"--color-connect-TreeDisplay": "var(--accentColor)"
}
</property>
</TreeDisplay>
</App>
```
**Note:** TreeDisplay interprets indentation (spaces at the beginning of lines) to determine the hierarchy level. Each indentation level represents a level in the tree structure. The component uses SVG lines to create clean, modern connecting lines between tree nodes.
%-DESC-END
```
--------------------------------------------------------------------------------
/docs/content/components/Page.md:
--------------------------------------------------------------------------------
```markdown
# Page [#page]
`Page` defines route endpoints within an application, mapping specific URL patterns to content that displays when users navigate to those routes. Each Page represents a distinct view or screen in your single-page application's routing system.
**Key features:**
- **Navigation**: Activated by [NavLink](/components/NavLink) or programmatic navigation (`Actions.navigate()`)
- **Content container**: Wraps any XMLUI components to define what displays for each route
- **URL pattern matching**: Maps exact URLs or dynamic patterns with parameters to specific content
- **Route parameters**: Supports dynamic URL segments (e.g., `/user/:id`) accessible via `$routeParams`
- **Query parameter access**: Retrieves URL query parameters through `$queryParams` context variable
## Properties [#properties]
### `url` [#url]
The URL of the route associated with the content. If not set, the page is not available.
## Events [#events]
This component does not have any events.
## Exposed Methods [#exposed-methods]
This component does not expose any methods.
## Styling [#styling]
This component does not have any styles.
```
--------------------------------------------------------------------------------
/docs/public/pages/xmlui-charts/_overview.md:
--------------------------------------------------------------------------------
```markdown
## Xmlui Charts Package
The `Charts` package contains components that display data in a graphical way.All chart components use the same set of properties to receive data.All chart components accept a `LabelLst` component as a child to parametrize display labels.All chart components also accept a `Legend` component as a child to display the legend.
## Package Components
| Component | Description | Status |
| :---: | --- | :---: |
| [BarChart](./xmlui-charts/BarChart) | The `BarChart` component represents a bar chart.Accepts a `LabelLst` component as a child to parametrize display labels. | experimental |
| [DonutChart](./xmlui-charts/DonutChart) | Represents a derivative of the pie chart that is a donut chart. | experimental |
| [LabelList](./xmlui-charts/LabelList) | Label list component for a chart component. | experimental |
| [Legend](./xmlui-charts/Legend) | Legend component to be displayed in a chart component. | experimental |
| [LineChart](./xmlui-charts/LineChart) | Represents a line chart component. | experimental |
| [PieChart](./xmlui-charts/PieChart) | Represents a pie chart component. | experimental |
```