This is page 9 of 137. 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
│ ├── three-ideas-invent.md
│ ├── twenty-jeans-watch.md
│ ├── warm-spies-melt.md
│ └── whole-ways-cry.md
├── .eslintrc.cjs
├── .github
│ ├── build-checklist.png
│ ├── ISSUE_TEMPLATE
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ └── workflows
│ ├── deploy-docs-optimized.yml
│ ├── deploy-docs.yml
│ ├── prepare-versions.yml
│ ├── release-packages.yml
│ ├── run-all-tests.yml
│ └── run-smoke-tests.yml
├── .gitignore
├── .prettierrc.js
├── .vscode
│ ├── launch.json
│ └── settings.json
├── blog
│ ├── .gitignore
│ ├── .gitkeep
│ ├── CHANGELOG.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── blog
│ │ │ ├── images
│ │ │ │ ├── blog-page-component.png
│ │ │ │ ├── blog-scrabble.png
│ │ │ │ ├── integrated-blog-search.png
│ │ │ │ └── lorem-ipsum.png
│ │ │ ├── lorem-ipsum.md
│ │ │ ├── newest-post.md
│ │ │ ├── older-post.md
│ │ │ └── welcome-to-the-xmlui-blog.md
│ │ ├── mockServiceWorker.js
│ │ ├── resources
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ └── for-download
│ │ │ │ └── xmlui
│ │ │ │ └── xmlui-standalone.umd.js
│ │ │ ├── github.svg
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ └── PageNotFound.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ ├── docs-theme.ts
│ │ ├── earthtone.ts
│ │ ├── xmlui-gray-on-default.ts
│ │ ├── xmlui-green-on-default.ts
│ │ └── xmlui-orange-on-default.ts
│ └── tsconfig.json
├── CONTRIBUTING.md
├── docs
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── ComponentRefLinks.txt
│ ├── content
│ │ ├── _meta.json
│ │ ├── components
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── APICall.md
│ │ │ ├── App.md
│ │ │ ├── AppHeader.md
│ │ │ ├── AppState.md
│ │ │ ├── AutoComplete.md
│ │ │ ├── Avatar.md
│ │ │ ├── Backdrop.md
│ │ │ ├── Badge.md
│ │ │ ├── BarChart.md
│ │ │ ├── Bookmark.md
│ │ │ ├── Breakout.md
│ │ │ ├── Button.md
│ │ │ ├── Card.md
│ │ │ ├── Carousel.md
│ │ │ ├── ChangeListener.md
│ │ │ ├── Checkbox.md
│ │ │ ├── CHStack.md
│ │ │ ├── ColorPicker.md
│ │ │ ├── Column.md
│ │ │ ├── ContentSeparator.md
│ │ │ ├── CVStack.md
│ │ │ ├── DataSource.md
│ │ │ ├── DateInput.md
│ │ │ ├── DatePicker.md
│ │ │ ├── DonutChart.md
│ │ │ ├── DropdownMenu.md
│ │ │ ├── EmojiSelector.md
│ │ │ ├── ExpandableItem.md
│ │ │ ├── FileInput.md
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FlowLayout.md
│ │ │ ├── Footer.md
│ │ │ ├── Form.md
│ │ │ ├── FormItem.md
│ │ │ ├── FormSection.md
│ │ │ ├── Fragment.md
│ │ │ ├── H1.md
│ │ │ ├── H2.md
│ │ │ ├── H3.md
│ │ │ ├── H4.md
│ │ │ ├── H5.md
│ │ │ ├── H6.md
│ │ │ ├── Heading.md
│ │ │ ├── HSplitter.md
│ │ │ ├── HStack.md
│ │ │ ├── Icon.md
│ │ │ ├── IFrame.md
│ │ │ ├── Image.md
│ │ │ ├── Items.md
│ │ │ ├── LabelList.md
│ │ │ ├── Legend.md
│ │ │ ├── LineChart.md
│ │ │ ├── Link.md
│ │ │ ├── List.md
│ │ │ ├── Logo.md
│ │ │ ├── Markdown.md
│ │ │ ├── MenuItem.md
│ │ │ ├── MenuSeparator.md
│ │ │ ├── ModalDialog.md
│ │ │ ├── NavGroup.md
│ │ │ ├── NavLink.md
│ │ │ ├── NavPanel.md
│ │ │ ├── NoResult.md
│ │ │ ├── NumberBox.md
│ │ │ ├── Option.md
│ │ │ ├── Page.md
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── Pages.md
│ │ │ ├── Pagination.md
│ │ │ ├── PasswordInput.md
│ │ │ ├── PieChart.md
│ │ │ ├── ProgressBar.md
│ │ │ ├── Queue.md
│ │ │ ├── RadioGroup.md
│ │ │ ├── RealTimeAdapter.md
│ │ │ ├── Redirect.md
│ │ │ ├── Select.md
│ │ │ ├── Slider.md
│ │ │ ├── Slot.md
│ │ │ ├── SpaceFiller.md
│ │ │ ├── Spinner.md
│ │ │ ├── Splitter.md
│ │ │ ├── Stack.md
│ │ │ ├── StickyBox.md
│ │ │ ├── SubMenuItem.md
│ │ │ ├── Switch.md
│ │ │ ├── TabItem.md
│ │ │ ├── Table.md
│ │ │ ├── TableOfContents.md
│ │ │ ├── Tabs.md
│ │ │ ├── Text.md
│ │ │ ├── TextArea.md
│ │ │ ├── TextBox.md
│ │ │ ├── Theme.md
│ │ │ ├── TimeInput.md
│ │ │ ├── Timer.md
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneSwitch.md
│ │ │ ├── Tooltip.md
│ │ │ ├── Tree.md
│ │ │ ├── VSplitter.md
│ │ │ ├── VStack.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ ├── xmlui-spreadsheet
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Spreadsheet.md
│ │ │ └── xmlui-website-blocks
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Carousel.md
│ │ │ ├── HelloMd.md
│ │ │ ├── HeroSection.md
│ │ │ └── ScrollToTop.md
│ │ └── extensions
│ │ ├── _meta.json
│ │ ├── xmlui-animations
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Animation.md
│ │ │ ├── FadeAnimation.md
│ │ │ ├── FadeInAnimation.md
│ │ │ ├── FadeOutAnimation.md
│ │ │ ├── ScaleAnimation.md
│ │ │ └── SlideInAnimation.md
│ │ └── xmlui-website-blocks
│ │ ├── _meta.json
│ │ ├── _overview.md
│ │ ├── Carousel.md
│ │ ├── HelloMd.md
│ │ ├── HeroSection.md
│ │ └── ScrollToTop.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── feed.rss
│ │ ├── mockServiceWorker.js
│ │ ├── pages
│ │ │ ├── _meta.json
│ │ │ ├── app-structure.md
│ │ │ ├── build-editor-component.md
│ │ │ ├── build-hello-world-component.md
│ │ │ ├── components-intro.md
│ │ │ ├── context-variables.md
│ │ │ ├── forms.md
│ │ │ ├── globals.md
│ │ │ ├── glossary.md
│ │ │ ├── helper-tags.md
│ │ │ ├── hosted-deployment.md
│ │ │ ├── howto
│ │ │ │ ├── assign-a-complex-json-literal-to-a-component-variable.md
│ │ │ │ ├── chain-a-refetch.md
│ │ │ │ ├── debug-a-component.md
│ │ │ │ ├── delay-a-datasource-until-another-datasource-is-ready.md
│ │ │ │ ├── delegate-a-method.md
│ │ │ │ ├── do-custom-form-validation.md
│ │ │ │ ├── expose-a-method-from-a-component.md
│ │ │ │ ├── filter-and-transform-data-from-an-api.md
│ │ │ │ ├── group-items-in-list-by-a-property.md
│ │ │ │ ├── handle-background-operations.md
│ │ │ │ ├── hide-an-element-until-its-datasource-is-ready.md
│ │ │ │ ├── make-a-set-of-equal-width-cards.md
│ │ │ │ ├── make-a-table-responsive.md
│ │ │ │ ├── modify-a-value-reported-in-a-column.md
│ │ │ │ ├── paginate-a-list.md
│ │ │ │ ├── pass-data-to-a-modal-dialog.md
│ │ │ │ ├── react-to-button-click-not-keystrokes.md
│ │ │ │ ├── set-the-initial-value-of-a-select-from-fetched-data.md
│ │ │ │ ├── share-a-modaldialog-across-components.md
│ │ │ │ ├── sync-selections-between-table-and-list-views.md
│ │ │ │ ├── update-ui-optimistically.md
│ │ │ │ ├── use-built-in-form-validation.md
│ │ │ │ └── use-the-same-modaldialog-to-add-or-edit.md
│ │ │ ├── howto.md
│ │ │ ├── intro.md
│ │ │ ├── layout.md
│ │ │ ├── markup.md
│ │ │ ├── mcp.md
│ │ │ ├── modal-dialogs.md
│ │ │ ├── news-and-reviews.md
│ │ │ ├── reactive-intro.md
│ │ │ ├── refactoring.md
│ │ │ ├── routing-and-links.md
│ │ │ ├── samples
│ │ │ │ ├── color-palette.xmlui
│ │ │ │ ├── color-values.xmlui
│ │ │ │ ├── shadow-sizes.xmlui
│ │ │ │ ├── spacing-sizes.xmlui
│ │ │ │ ├── swatch.xmlui
│ │ │ │ ├── theme-gallery-brief.xmlui
│ │ │ │ └── theme-gallery.xmlui
│ │ │ ├── scoping.md
│ │ │ ├── scripting.md
│ │ │ ├── styles-and-themes
│ │ │ │ ├── common-units.md
│ │ │ │ ├── layout-props.md
│ │ │ │ ├── theme-variable-defaults.md
│ │ │ │ ├── theme-variables.md
│ │ │ │ └── themes.md
│ │ │ ├── template-properties.md
│ │ │ ├── test.md
│ │ │ ├── tutorial-01.md
│ │ │ ├── tutorial-02.md
│ │ │ ├── tutorial-03.md
│ │ │ ├── tutorial-04.md
│ │ │ ├── tutorial-05.md
│ │ │ ├── tutorial-06.md
│ │ │ ├── tutorial-07.md
│ │ │ ├── tutorial-08.md
│ │ │ ├── tutorial-09.md
│ │ │ ├── tutorial-10.md
│ │ │ ├── tutorial-11.md
│ │ │ ├── tutorial-12.md
│ │ │ ├── universal-properties.md
│ │ │ ├── user-defined-components.md
│ │ │ ├── vscode.md
│ │ │ ├── working-with-markdown.md
│ │ │ ├── working-with-text.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-charts
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── DonutChart.md
│ │ │ │ ├── LabelList.md
│ │ │ │ ├── Legend.md
│ │ │ │ ├── LineChart.md
│ │ │ │ └── PieChart.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ └── xmlui-spreadsheet
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ └── Spreadsheet.md
│ │ ├── resources
│ │ │ ├── devdocs
│ │ │ │ ├── debug-proxy-object-2.png
│ │ │ │ ├── debug-proxy-object.png
│ │ │ │ ├── table_editor_01.png
│ │ │ │ ├── table_editor_02.png
│ │ │ │ ├── table_editor_03.png
│ │ │ │ ├── table_editor_04.png
│ │ │ │ ├── table_editor_05.png
│ │ │ │ ├── table_editor_06.png
│ │ │ │ ├── table_editor_07.png
│ │ │ │ ├── table_editor_08.png
│ │ │ │ ├── table_editor_09.png
│ │ │ │ ├── table_editor_10.png
│ │ │ │ ├── table_editor_11.png
│ │ │ │ ├── table-editor-01.png
│ │ │ │ ├── table-editor-02.png
│ │ │ │ ├── table-editor-03.png
│ │ │ │ ├── table-editor-04.png
│ │ │ │ ├── table-editor-06.png
│ │ │ │ ├── table-editor-07.png
│ │ │ │ ├── table-editor-08.png
│ │ │ │ ├── table-editor-09.png
│ │ │ │ └── xmlui-rendering-of-tiptap-markdown.png
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ ├── clients.json
│ │ │ │ ├── daily-revenue.json
│ │ │ │ ├── dashboard-stats.json
│ │ │ │ ├── demo.xmlui
│ │ │ │ ├── demo.xmlui.xs
│ │ │ │ ├── downloads
│ │ │ │ │ └── downloads.json
│ │ │ │ ├── for-download
│ │ │ │ │ ├── index-with-api.html
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── mockApi.js
│ │ │ │ │ ├── start-darwin.sh
│ │ │ │ │ ├── start-linux.sh
│ │ │ │ │ ├── start.bat
│ │ │ │ │ └── xmlui
│ │ │ │ │ └── xmlui-standalone.umd.js
│ │ │ │ ├── getting-started
│ │ │ │ │ ├── cl-tutorial-final.zip
│ │ │ │ │ ├── cl-tutorial.zip
│ │ │ │ │ ├── cl-tutorial2.zip
│ │ │ │ │ ├── cl-tutorial3.zip
│ │ │ │ │ ├── cl-tutorial4.zip
│ │ │ │ │ ├── cl-tutorial5.zip
│ │ │ │ │ ├── cl-tutorial6.zip
│ │ │ │ │ ├── getting-started.zip
│ │ │ │ │ ├── hello-xmlui.zip
│ │ │ │ │ ├── xmlui-empty.zip
│ │ │ │ │ └── xmlui-starter.zip
│ │ │ │ ├── howto
│ │ │ │ │ └── component-icons
│ │ │ │ │ └── up-arrow.svg
│ │ │ │ ├── invoices.json
│ │ │ │ ├── monthly-status.json
│ │ │ │ ├── news-and-reviews.json
│ │ │ │ ├── products.json
│ │ │ │ ├── releases.json
│ │ │ │ ├── tutorials
│ │ │ │ │ ├── datasource
│ │ │ │ │ │ └── api.ts
│ │ │ │ │ └── p2do
│ │ │ │ │ ├── api.ts
│ │ │ │ │ └── todo-logo.svg
│ │ │ │ └── xmlui.json
│ │ │ ├── github.svg
│ │ │ ├── images
│ │ │ │ ├── apiaction-tutorial
│ │ │ │ │ ├── add-success.png
│ │ │ │ │ ├── apiaction-param.png
│ │ │ │ │ ├── change-completed.png
│ │ │ │ │ ├── change-in-progress.png
│ │ │ │ │ ├── confirm-delete.png
│ │ │ │ │ ├── data-error.png
│ │ │ │ │ ├── data-progress.png
│ │ │ │ │ ├── data-success.png
│ │ │ │ │ ├── display-1.png
│ │ │ │ │ ├── item-deleted.png
│ │ │ │ │ ├── item-updated.png
│ │ │ │ │ ├── missing-api-key.png
│ │ │ │ │ ├── new-item-added.png
│ │ │ │ │ └── test-message.png
│ │ │ │ ├── chat-api
│ │ │ │ │ └── domain-model.svg
│ │ │ │ ├── components
│ │ │ │ │ ├── image
│ │ │ │ │ │ └── breakfast.jpg
│ │ │ │ │ ├── markdown
│ │ │ │ │ │ └── colors.png
│ │ │ │ │ └── modal
│ │ │ │ │ ├── deep_link_dialog_1.jpg
│ │ │ │ │ └── deep_link_dialog_2.jpg
│ │ │ │ ├── create-apps
│ │ │ │ │ ├── collapsed-vertical.png
│ │ │ │ │ ├── using-forms-warning-dialog.png
│ │ │ │ │ └── using-forms.png
│ │ │ │ ├── datasource-tutorial
│ │ │ │ │ ├── data-with-header.png
│ │ │ │ │ ├── filtered-data.png
│ │ │ │ │ ├── filtered-items.png
│ │ │ │ │ ├── initial-page-items.png
│ │ │ │ │ ├── list-items.png
│ │ │ │ │ ├── next-page-items.png
│ │ │ │ │ ├── no-data.png
│ │ │ │ │ ├── pagination-1.jpg
│ │ │ │ │ ├── pagination-1.png
│ │ │ │ │ ├── polling-1.png
│ │ │ │ │ ├── refetch-data.png
│ │ │ │ │ ├── slow-loading.png
│ │ │ │ │ ├── test-message.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── unconventional-data.png
│ │ │ │ │ └── unfiltered-items.png
│ │ │ │ ├── flower.jpg
│ │ │ │ ├── get-started
│ │ │ │ │ ├── add-new-contact.png
│ │ │ │ │ ├── app-modified.png
│ │ │ │ │ ├── app-start.png
│ │ │ │ │ ├── app-with-boxes.png
│ │ │ │ │ ├── app-with-toast.png
│ │ │ │ │ ├── boilerplate-structure.png
│ │ │ │ │ ├── cl-initial.png
│ │ │ │ │ ├── cl-start.png
│ │ │ │ │ ├── contact-counts.png
│ │ │ │ │ ├── contact-dialog-title.png
│ │ │ │ │ ├── contact-dialog.png
│ │ │ │ │ ├── contact-menus.png
│ │ │ │ │ ├── contact-predicates.png
│ │ │ │ │ ├── context-menu.png
│ │ │ │ │ ├── dashboard-numbers.png
│ │ │ │ │ ├── default-contact-list.png
│ │ │ │ │ ├── delete-contact.png
│ │ │ │ │ ├── delete-task.png
│ │ │ │ │ ├── detailed-template.png
│ │ │ │ │ ├── edit-contact-details.png
│ │ │ │ │ ├── edited-contact-saved.png
│ │ │ │ │ ├── empty-sections.png
│ │ │ │ │ ├── filter-completed.png
│ │ │ │ │ ├── fullwidth-desktop.png
│ │ │ │ │ ├── fullwidth-mobile.png
│ │ │ │ │ ├── initial-table.png
│ │ │ │ │ ├── items-and-badges.png
│ │ │ │ │ ├── loading-message.png
│ │ │ │ │ ├── new-contact-button.png
│ │ │ │ │ ├── new-contact-saved.png
│ │ │ │ │ ├── no-empty-sections.png
│ │ │ │ │ ├── personal-todo-initial.png
│ │ │ │ │ ├── piechart.png
│ │ │ │ │ ├── review-today.png
│ │ │ │ │ ├── rudimentary-dashboard.png
│ │ │ │ │ ├── section-collapsed.png
│ │ │ │ │ ├── sectioned-items.png
│ │ │ │ │ ├── sections-ordered.png
│ │ │ │ │ ├── spacex-list-with-links.png
│ │ │ │ │ ├── spacex-list.png
│ │ │ │ │ ├── start-personal-todo-1.png
│ │ │ │ │ ├── submit-new-contact.png
│ │ │ │ │ ├── submit-new-task.png
│ │ │ │ │ ├── syntax-highlighting.png
│ │ │ │ │ ├── table-with-badge.png
│ │ │ │ │ ├── template-with-card.png
│ │ │ │ │ ├── test-emulated-api.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── todo-logo.png
│ │ │ │ │ └── xmlui-tools.png
│ │ │ │ ├── HelloApp.png
│ │ │ │ ├── HelloApp2.png
│ │ │ │ ├── logos
│ │ │ │ │ ├── xmlui1.svg
│ │ │ │ │ ├── xmlui2.svg
│ │ │ │ │ ├── xmlui3.svg
│ │ │ │ │ ├── xmlui4.svg
│ │ │ │ │ ├── xmlui5.svg
│ │ │ │ │ ├── xmlui6.svg
│ │ │ │ │ └── xmlui7.svg
│ │ │ │ ├── pdf
│ │ │ │ │ └── dummy-pdf.jpg
│ │ │ │ ├── rendering-engine
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ ├── Component.svg
│ │ │ │ │ ├── CompoundComponent.svg
│ │ │ │ │ ├── RootComponent.svg
│ │ │ │ │ └── tree-with-containers.svg
│ │ │ │ ├── reviewers-guide
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ └── incbutton-in-action.png
│ │ │ │ ├── tools
│ │ │ │ │ └── boilerplate-structure.png
│ │ │ │ ├── try.svg
│ │ │ │ ├── tutorial
│ │ │ │ │ ├── app-chat-history.png
│ │ │ │ │ ├── app-content-placeholder.png
│ │ │ │ │ ├── app-header-and-content.png
│ │ │ │ │ ├── app-links-channel-selected.png
│ │ │ │ │ ├── app-links-click.png
│ │ │ │ │ ├── app-navigation.png
│ │ │ │ │ ├── finished-ex01.png
│ │ │ │ │ ├── finished-ex02.png
│ │ │ │ │ ├── hello.png
│ │ │ │ │ ├── splash-screen-advanced.png
│ │ │ │ │ ├── splash-screen-after-click.png
│ │ │ │ │ ├── splash-screen-centered.png
│ │ │ │ │ ├── splash-screen-events.png
│ │ │ │ │ ├── splash-screen-expression.png
│ │ │ │ │ ├── splash-screen-reuse-after.png
│ │ │ │ │ ├── splash-screen-reuse-before.png
│ │ │ │ │ └── splash-screen.png
│ │ │ │ └── tutorial-01.png
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ ├── Boxes.xmlui
│ │ │ ├── Breadcrumb.xmlui
│ │ │ ├── ChangeLog.xmlui
│ │ │ ├── ColorPalette.xmlui
│ │ │ ├── DocumentLinks.xmlui
│ │ │ ├── DocumentPage.xmlui
│ │ │ ├── DocumentPageNoTOC.xmlui
│ │ │ ├── Icons.xmlui
│ │ │ ├── IncButton.xmlui
│ │ │ ├── IncButton2.xmlui
│ │ │ ├── NameValue.xmlui
│ │ │ ├── PageNotFound.xmlui
│ │ │ ├── PaletteItem.xmlui
│ │ │ ├── Palettes.xmlui
│ │ │ ├── SectionHeader.xmlui
│ │ │ ├── TBD.xmlui
│ │ │ ├── Test.xmlui
│ │ │ ├── ThemesIntro.xmlui
│ │ │ ├── ThousandThemes.xmlui
│ │ │ ├── TubeStops.xmlui
│ │ │ ├── TubeStops.xmlui.xs
│ │ │ └── TwoColumnCode.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ ├── docs-theme.ts
│ │ ├── earthtone.ts
│ │ ├── xmlui-gray-on-default.ts
│ │ ├── xmlui-green-on-default.ts
│ │ └── xmlui-orange-on-default.ts
│ └── tsconfig.json
├── LICENSE
├── package-lock.json
├── package.json
├── packages
│ ├── xmlui-animations
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── Animation.tsx
│ │ │ ├── AnimationNative.tsx
│ │ │ ├── FadeAnimation.tsx
│ │ │ ├── FadeInAnimation.tsx
│ │ │ ├── FadeOutAnimation.tsx
│ │ │ ├── index.tsx
│ │ │ ├── ScaleAnimation.tsx
│ │ │ └── SlideInAnimation.tsx
│ │ └── tsconfig.json
│ ├── xmlui-devtools
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── devtools
│ │ │ │ ├── DevTools.tsx
│ │ │ │ ├── DevToolsNative.module.scss
│ │ │ │ ├── DevToolsNative.tsx
│ │ │ │ ├── ModalDialog.module.scss
│ │ │ │ ├── ModalDialog.tsx
│ │ │ │ ├── ModalVisibilityContext.tsx
│ │ │ │ ├── Tooltip.module.scss
│ │ │ │ ├── Tooltip.tsx
│ │ │ │ └── utils.ts
│ │ │ ├── editor
│ │ │ │ └── Editor.tsx
│ │ │ └── index.tsx
│ │ ├── tsconfig.json
│ │ └── vite.config-overrides.ts
│ ├── xmlui-hello-world
│ │ ├── .gitignore
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── HelloWorld.module.scss
│ │ │ ├── HelloWorld.tsx
│ │ │ ├── HelloWorldNative.tsx
│ │ │ └── index.tsx
│ │ └── tsconfig.json
│ ├── xmlui-os-frames
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── index.tsx
│ │ │ ├── IPhoneFrame.module.scss
│ │ │ ├── IPhoneFrame.tsx
│ │ │ ├── MacOSAppFrame.module.scss
│ │ │ ├── MacOSAppFrame.tsx
│ │ │ ├── WindowsAppFrame.module.scss
│ │ │ └── WindowsAppFrame.tsx
│ │ └── tsconfig.json
│ ├── xmlui-pdf
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ ├── components
│ │ │ │ └── Pdf.xmlui
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── index.tsx
│ │ │ ├── LazyPdfNative.tsx
│ │ │ ├── Pdf.module.scss
│ │ │ └── Pdf.tsx
│ │ └── tsconfig.json
│ ├── xmlui-playground
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── hooks
│ │ │ │ ├── usePlayground.ts
│ │ │ │ └── useToast.ts
│ │ │ ├── index.tsx
│ │ │ ├── playground
│ │ │ │ ├── Box.module.scss
│ │ │ │ ├── Box.tsx
│ │ │ │ ├── CodeSelector.tsx
│ │ │ │ ├── ConfirmationDialog.module.scss
│ │ │ │ ├── ConfirmationDialog.tsx
│ │ │ │ ├── Editor.tsx
│ │ │ │ ├── Header.module.scss
│ │ │ │ ├── Header.tsx
│ │ │ │ ├── Playground.tsx
│ │ │ │ ├── PlaygroundContent.module.scss
│ │ │ │ ├── PlaygroundContent.tsx
│ │ │ │ ├── PlaygroundNative.module.scss
│ │ │ │ ├── PlaygroundNative.tsx
│ │ │ │ ├── Preview.module.scss
│ │ │ │ ├── Preview.tsx
│ │ │ │ ├── Select.module.scss
│ │ │ │ ├── StandalonePlayground.tsx
│ │ │ │ ├── StandalonePlaygroundNative.module.scss
│ │ │ │ ├── StandalonePlaygroundNative.tsx
│ │ │ │ ├── ThemeSwitcher.module.scss
│ │ │ │ ├── ThemeSwitcher.tsx
│ │ │ │ ├── ToneSwitcher.tsx
│ │ │ │ ├── Tooltip.module.scss
│ │ │ │ ├── Tooltip.tsx
│ │ │ │ └── utils.ts
│ │ │ ├── providers
│ │ │ │ ├── Toast.module.scss
│ │ │ │ └── ToastProvider.tsx
│ │ │ ├── state
│ │ │ │ └── store.ts
│ │ │ ├── themes
│ │ │ │ └── theme.ts
│ │ │ └── utils
│ │ │ └── helpers.ts
│ │ └── tsconfig.json
│ ├── xmlui-search
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── index.tsx
│ │ │ ├── Search.module.scss
│ │ │ └── Search.tsx
│ │ └── tsconfig.json
│ ├── xmlui-spreadsheet
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── index.tsx
│ │ │ ├── Spreadsheet.tsx
│ │ │ └── SpreadsheetNative.tsx
│ │ └── tsconfig.json
│ └── xmlui-website-blocks
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── demo
│ │ ├── components
│ │ │ ├── HeroBackgroundBreakoutPage.xmlui
│ │ │ ├── HeroBackgroundsPage.xmlui
│ │ │ ├── HeroContentsPage.xmlui
│ │ │ ├── HeroTextAlignPage.xmlui
│ │ │ ├── HeroTextPage.xmlui
│ │ │ └── HeroTonesPage.xmlui
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── default.ts
│ ├── index.html
│ ├── index.ts
│ ├── meta
│ │ └── componentsMetadata.ts
│ ├── package.json
│ ├── public
│ │ └── resources
│ │ ├── building.jpg
│ │ └── xmlui-logo.svg
│ ├── src
│ │ ├── Carousel
│ │ │ ├── Carousel.module.scss
│ │ │ ├── Carousel.tsx
│ │ │ ├── CarouselContext.tsx
│ │ │ └── CarouselNative.tsx
│ │ ├── FancyButton
│ │ │ ├── FancyButton.module.scss
│ │ │ ├── FancyButton.tsx
│ │ │ └── FancyButton.xmlui
│ │ ├── Hello
│ │ │ ├── Hello.tsx
│ │ │ ├── Hello.xmlui
│ │ │ └── Hello.xmlui.xs
│ │ ├── HeroSection
│ │ │ ├── HeroSection.module.scss
│ │ │ ├── HeroSection.tsx
│ │ │ └── HeroSectionNative.tsx
│ │ ├── index.tsx
│ │ ├── ScrollToTop
│ │ │ ├── ScrollToTop.module.scss
│ │ │ ├── ScrollToTop.tsx
│ │ │ └── ScrollToTopNative.tsx
│ │ └── vite-env.d.ts
│ └── tsconfig.json
├── README.md
├── tools
│ ├── codefence
│ │ └── xmlui-code-fence-docs.md
│ ├── create-app
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── create-app.ts
│ │ ├── helpers
│ │ │ ├── copy.ts
│ │ │ ├── get-pkg-manager.ts
│ │ │ ├── git.ts
│ │ │ ├── install.ts
│ │ │ ├── is-folder-empty.ts
│ │ │ ├── is-writeable.ts
│ │ │ ├── make-dir.ts
│ │ │ └── validate-pkg.ts
│ │ ├── index.ts
│ │ ├── package.json
│ │ ├── templates
│ │ │ ├── default
│ │ │ │ └── ts
│ │ │ │ ├── gitignore
│ │ │ │ ├── index.html
│ │ │ │ ├── index.ts
│ │ │ │ ├── public
│ │ │ │ │ ├── mockServiceWorker.js
│ │ │ │ │ ├── resources
│ │ │ │ │ │ ├── favicon.ico
│ │ │ │ │ │ └── xmlui-logo.svg
│ │ │ │ │ └── serve.json
│ │ │ │ └── src
│ │ │ │ ├── components
│ │ │ │ │ ├── ApiAware.xmlui
│ │ │ │ │ ├── Home.xmlui
│ │ │ │ │ ├── IncButton.xmlui
│ │ │ │ │ └── PagePanel.xmlui
│ │ │ │ ├── config.ts
│ │ │ │ └── Main.xmlui
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ └── tsconfig.json
│ ├── create-xmlui-hello-world
│ │ ├── index.js
│ │ └── package.json
│ └── vscode
│ ├── .gitignore
│ ├── .vscode
│ │ ├── launch.json
│ │ └── tasks.json
│ ├── .vscodeignore
│ ├── build.sh
│ ├── CHANGELOG.md
│ ├── esbuild.js
│ ├── eslint.config.mjs
│ ├── formatter-docs.md
│ ├── generate-test-sample.sh
│ ├── LICENSE.md
│ ├── package-lock.json
│ ├── package.json
│ ├── README.md
│ ├── resources
│ │ ├── xmlui-logo.png
│ │ └── xmlui-markup-syntax-highlighting.png
│ ├── src
│ │ ├── extension.ts
│ │ └── server.ts
│ ├── syntaxes
│ │ └── xmlui.tmLanguage.json
│ ├── test-samples
│ │ └── sample.xmlui
│ ├── tsconfig.json
│ └── tsconfig.tsbuildinfo
├── turbo.json
└── xmlui
├── .gitignore
├── bin
│ ├── bootstrap.js
│ ├── build-lib.ts
│ ├── build.ts
│ ├── index.ts
│ ├── preview.ts
│ ├── start.ts
│ ├── vite-xmlui-plugin.ts
│ └── viteConfig.ts
├── CHANGELOG.md
├── conventions
│ ├── component-qa-checklist.md
│ ├── copilot-conventions.md
│ ├── create-xmlui-components.md
│ ├── mermaid.md
│ ├── testing-conventions.md
│ └── xmlui-in-a-nutshell.md
├── dev-docs
│ ├── accessibility.md
│ ├── actions.md
│ ├── AppRoot.md
│ ├── component-apis.md
│ ├── component-rendering.md
│ ├── component-review-checklist.md
│ ├── containers.md
│ ├── data-sources.md
│ ├── e2e-summary.md
│ ├── expression-evaluation.md
│ ├── glossary.md
│ ├── helper-components.md
│ ├── index.md
│ ├── loaders.md
│ ├── next
│ │ ├── component-dev-guide.md
│ │ ├── configuration-management-enhancement-summary.md
│ │ ├── documentation-scripts-refactoring-complete-summary.md
│ │ ├── documentation-scripts-refactoring-plan.md
│ │ ├── duplicate-pattern-extraction-summary.md
│ │ ├── error-handling-standardization-summary.md
│ │ ├── generating-component-reference.md
│ │ ├── index.md
│ │ ├── logging-consistency-implementation-summary.md
│ │ ├── project-build.md
│ │ ├── project-structure.md
│ │ ├── theme-context.md
│ │ ├── tiptap-design-considerations.md
│ │ ├── working-with-code.md
│ │ ├── xmlui-runtime-architecture
│ │ └── xmlui-wcag-accessibility-report.md
│ ├── react-fundamentals.md
│ ├── release-method.md
│ ├── rendering-fundamentals.md
│ ├── reusable-components.md
│ ├── standalone-apps.md
│ ├── state-management.md
│ └── xmlui-extensibility.xlsx
├── package.json
├── playwright.config.ts
├── scripts
│ ├── coverage-only.js
│ ├── e2e-test-summary.js
│ ├── generate-docs
│ │ ├── build-downloads-map.mjs
│ │ ├── build-pages-map.mjs
│ │ ├── components-config.json
│ │ ├── configuration-management.mjs
│ │ ├── constants.mjs
│ │ ├── create-theme-files.mjs
│ │ ├── DocsGenerator.mjs
│ │ ├── error-handling.mjs
│ │ ├── extensions-config.json
│ │ ├── folders.mjs
│ │ ├── generate-summary-files.mjs
│ │ ├── get-docs.mjs
│ │ ├── input-handler.mjs
│ │ ├── logger.mjs
│ │ ├── logging-standards.mjs
│ │ ├── MetadataProcessor.mjs
│ │ ├── pattern-utilities.mjs
│ │ └── utils.mjs
│ ├── get-langserver-metadata.mjs
│ ├── inline-links.mjs
│ └── README-e2e-summary.md
├── src
│ ├── abstractions
│ │ ├── _conventions.md
│ │ ├── ActionDefs.ts
│ │ ├── AppContextDefs.ts
│ │ ├── ComponentDefs.ts
│ │ ├── ContainerDefs.ts
│ │ ├── ExtensionDefs.ts
│ │ ├── FunctionDefs.ts
│ │ ├── RendererDefs.ts
│ │ ├── scripting
│ │ │ ├── BlockScope.ts
│ │ │ ├── Compilation.ts
│ │ │ ├── LogicalThread.ts
│ │ │ ├── LoopScope.ts
│ │ │ ├── modules.ts
│ │ │ ├── ScriptParserError.ts
│ │ │ ├── Token.ts
│ │ │ ├── TryScope.ts
│ │ │ └── TryScopeExp.ts
│ │ └── ThemingDefs.ts
│ ├── components
│ │ ├── _conventions.md
│ │ ├── abstractions.ts
│ │ ├── Accordion
│ │ │ ├── Accordion.md
│ │ │ ├── Accordion.module.scss
│ │ │ ├── Accordion.spec.ts
│ │ │ ├── Accordion.tsx
│ │ │ ├── AccordionContext.tsx
│ │ │ ├── AccordionItem.tsx
│ │ │ ├── AccordionItemNative.tsx
│ │ │ └── AccordionNative.tsx
│ │ ├── Animation
│ │ │ └── AnimationNative.tsx
│ │ ├── APICall
│ │ │ ├── APICall.md
│ │ │ ├── APICall.spec.ts
│ │ │ ├── APICall.tsx
│ │ │ └── APICallNative.tsx
│ │ ├── App
│ │ │ ├── App.md
│ │ │ ├── App.module.scss
│ │ │ ├── App.spec.ts
│ │ │ ├── App.tsx
│ │ │ ├── AppLayoutContext.ts
│ │ │ ├── AppNative.tsx
│ │ │ ├── AppStateContext.ts
│ │ │ ├── doc-resources
│ │ │ │ ├── condensed-sticky.xmlui
│ │ │ │ ├── condensed.xmlui
│ │ │ │ ├── horizontal-sticky.xmlui
│ │ │ │ ├── horizontal.xmlui
│ │ │ │ ├── vertical-full-header.xmlui
│ │ │ │ ├── vertical-sticky.xmlui
│ │ │ │ └── vertical.xmlui
│ │ │ ├── IndexerContext.ts
│ │ │ ├── LinkInfoContext.ts
│ │ │ ├── SearchContext.tsx
│ │ │ ├── Sheet.module.scss
│ │ │ └── Sheet.tsx
│ │ ├── AppHeader
│ │ │ ├── AppHeader.md
│ │ │ ├── AppHeader.module.scss
│ │ │ ├── AppHeader.spec.ts
│ │ │ ├── AppHeader.tsx
│ │ │ └── AppHeaderNative.tsx
│ │ ├── AppState
│ │ │ ├── AppState.md
│ │ │ ├── AppState.spec.ts
│ │ │ ├── AppState.tsx
│ │ │ └── AppStateNative.tsx
│ │ ├── AutoComplete
│ │ │ ├── AutoComplete.md
│ │ │ ├── AutoComplete.module.scss
│ │ │ ├── AutoComplete.spec.ts
│ │ │ ├── AutoComplete.tsx
│ │ │ ├── AutoCompleteContext.tsx
│ │ │ └── AutoCompleteNative.tsx
│ │ ├── Avatar
│ │ │ ├── Avatar.md
│ │ │ ├── Avatar.module.scss
│ │ │ ├── Avatar.spec.ts
│ │ │ ├── Avatar.tsx
│ │ │ └── AvatarNative.tsx
│ │ ├── Backdrop
│ │ │ ├── Backdrop.md
│ │ │ ├── Backdrop.module.scss
│ │ │ ├── Backdrop.spec.ts
│ │ │ ├── Backdrop.tsx
│ │ │ └── BackdropNative.tsx
│ │ ├── Badge
│ │ │ ├── Badge.md
│ │ │ ├── Badge.module.scss
│ │ │ ├── Badge.spec.ts
│ │ │ ├── Badge.tsx
│ │ │ └── BadgeNative.tsx
│ │ ├── Bookmark
│ │ │ ├── Bookmark.md
│ │ │ ├── Bookmark.module.scss
│ │ │ ├── Bookmark.spec.ts
│ │ │ ├── Bookmark.tsx
│ │ │ └── BookmarkNative.tsx
│ │ ├── Breakout
│ │ │ ├── Breakout.module.scss
│ │ │ ├── Breakout.spec.ts
│ │ │ ├── Breakout.tsx
│ │ │ └── BreakoutNative.tsx
│ │ ├── Button
│ │ │ ├── Button-style.spec.ts
│ │ │ ├── Button.md
│ │ │ ├── Button.module.scss
│ │ │ ├── Button.spec.ts
│ │ │ ├── Button.tsx
│ │ │ └── ButtonNative.tsx
│ │ ├── Card
│ │ │ ├── Card.md
│ │ │ ├── Card.module.scss
│ │ │ ├── Card.spec.ts
│ │ │ ├── Card.tsx
│ │ │ └── CardNative.tsx
│ │ ├── Carousel
│ │ │ ├── Carousel.md
│ │ │ ├── Carousel.module.scss
│ │ │ ├── Carousel.spec.ts
│ │ │ ├── Carousel.tsx
│ │ │ ├── CarouselContext.tsx
│ │ │ ├── CarouselItem.tsx
│ │ │ ├── CarouselItemNative.tsx
│ │ │ └── CarouselNative.tsx
│ │ ├── ChangeListener
│ │ │ ├── ChangeListener.md
│ │ │ ├── ChangeListener.spec.ts
│ │ │ ├── ChangeListener.tsx
│ │ │ └── ChangeListenerNative.tsx
│ │ ├── chart-color-schemes.ts
│ │ ├── Charts
│ │ │ ├── AreaChart
│ │ │ │ ├── AreaChart.md
│ │ │ │ ├── AreaChart.spec.ts
│ │ │ │ ├── AreaChart.tsx
│ │ │ │ └── AreaChartNative.tsx
│ │ │ ├── BarChart
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── BarChart.module.scss
│ │ │ │ ├── BarChart.spec.ts
│ │ │ │ ├── BarChart.tsx
│ │ │ │ └── BarChartNative.tsx
│ │ │ ├── DonutChart
│ │ │ │ ├── DonutChart.spec.ts
│ │ │ │ └── DonutChart.tsx
│ │ │ ├── LabelList
│ │ │ │ ├── LabelList.spec.ts
│ │ │ │ ├── LabelList.tsx
│ │ │ │ ├── LabelListNative.module.scss
│ │ │ │ └── LabelListNative.tsx
│ │ │ ├── Legend
│ │ │ │ ├── Legend.spec.ts
│ │ │ │ ├── Legend.tsx
│ │ │ │ └── LegendNative.tsx
│ │ │ ├── LineChart
│ │ │ │ ├── LineChart.md
│ │ │ │ ├── LineChart.module.scss
│ │ │ │ ├── LineChart.spec.ts
│ │ │ │ ├── LineChart.tsx
│ │ │ │ └── LineChartNative.tsx
│ │ │ ├── PieChart
│ │ │ │ ├── PieChart.md
│ │ │ │ ├── PieChart.spec.ts
│ │ │ │ ├── PieChart.tsx
│ │ │ │ ├── PieChartNative.module.scss
│ │ │ │ └── PieChartNative.tsx
│ │ │ ├── RadarChart
│ │ │ │ ├── RadarChart.md
│ │ │ │ ├── RadarChart.spec.ts
│ │ │ │ ├── RadarChart.tsx
│ │ │ │ └── RadarChartNative.tsx
│ │ │ ├── Tooltip
│ │ │ │ ├── TooltipContent.module.scss
│ │ │ │ ├── TooltipContent.spec.ts
│ │ │ │ └── TooltipContent.tsx
│ │ │ └── utils
│ │ │ ├── abstractions.ts
│ │ │ └── ChartProvider.tsx
│ │ ├── Checkbox
│ │ │ ├── Checkbox.md
│ │ │ ├── Checkbox.spec.ts
│ │ │ └── Checkbox.tsx
│ │ ├── CodeBlock
│ │ │ ├── CodeBlock.module.scss
│ │ │ ├── CodeBlock.spec.ts
│ │ │ ├── CodeBlock.tsx
│ │ │ ├── CodeBlockNative.tsx
│ │ │ └── highlight-code.ts
│ │ ├── collectedComponentMetadata.ts
│ │ ├── ColorPicker
│ │ │ ├── ColorPicker.md
│ │ │ ├── ColorPicker.module.scss
│ │ │ ├── ColorPicker.spec.ts
│ │ │ ├── ColorPicker.tsx
│ │ │ └── ColorPickerNative.tsx
│ │ ├── Column
│ │ │ ├── Column.md
│ │ │ ├── Column.tsx
│ │ │ ├── ColumnNative.tsx
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ └── TableContext.tsx
│ │ ├── component-utils.ts
│ │ ├── ComponentProvider.tsx
│ │ ├── ComponentRegistryContext.tsx
│ │ ├── container-helpers.tsx
│ │ ├── ContentSeparator
│ │ │ ├── ContentSeparator.md
│ │ │ ├── ContentSeparator.module.scss
│ │ │ ├── ContentSeparator.spec.ts
│ │ │ ├── ContentSeparator.tsx
│ │ │ └── ContentSeparatorNative.tsx
│ │ ├── DataSource
│ │ │ ├── DataSource.md
│ │ │ └── DataSource.tsx
│ │ ├── DateInput
│ │ │ ├── DateInput.md
│ │ │ ├── DateInput.module.scss
│ │ │ ├── DateInput.spec.ts
│ │ │ ├── DateInput.tsx
│ │ │ └── DateInputNative.tsx
│ │ ├── DatePicker
│ │ │ ├── DatePicker.md
│ │ │ ├── DatePicker.module.scss
│ │ │ ├── DatePicker.spec.ts
│ │ │ ├── DatePicker.tsx
│ │ │ └── DatePickerNative.tsx
│ │ ├── DropdownMenu
│ │ │ ├── DropdownMenu.md
│ │ │ ├── DropdownMenu.module.scss
│ │ │ ├── DropdownMenu.spec.ts
│ │ │ ├── DropdownMenu.tsx
│ │ │ ├── DropdownMenuNative.tsx
│ │ │ ├── MenuItem.md
│ │ │ └── SubMenuItem.md
│ │ ├── EmojiSelector
│ │ │ ├── EmojiSelector.md
│ │ │ ├── EmojiSelector.spec.ts
│ │ │ ├── EmojiSelector.tsx
│ │ │ └── EmojiSelectorNative.tsx
│ │ ├── ExpandableItem
│ │ │ ├── ExpandableItem.module.scss
│ │ │ ├── ExpandableItem.spec.ts
│ │ │ ├── ExpandableItem.tsx
│ │ │ └── ExpandableItemNative.tsx
│ │ ├── FileInput
│ │ │ ├── FileInput.md
│ │ │ ├── FileInput.module.scss
│ │ │ ├── FileInput.spec.ts
│ │ │ ├── FileInput.tsx
│ │ │ └── FileInputNative.tsx
│ │ ├── FileUploadDropZone
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FileUploadDropZone.module.scss
│ │ │ ├── FileUploadDropZone.spec.ts
│ │ │ ├── FileUploadDropZone.tsx
│ │ │ └── FileUploadDropZoneNative.tsx
│ │ ├── FlowLayout
│ │ │ ├── FlowLayout.md
│ │ │ ├── FlowLayout.module.scss
│ │ │ ├── FlowLayout.spec.ts
│ │ │ ├── FlowLayout.spec.ts-snapshots
│ │ │ │ └── Edge-cases-boxShadow-is-not-clipped-1-non-smoke-darwin.png
│ │ │ ├── FlowLayout.tsx
│ │ │ └── FlowLayoutNative.tsx
│ │ ├── Footer
│ │ │ ├── Footer.md
│ │ │ ├── Footer.module.scss
│ │ │ ├── Footer.spec.ts
│ │ │ ├── Footer.tsx
│ │ │ └── FooterNative.tsx
│ │ ├── Form
│ │ │ ├── Form.md
│ │ │ ├── Form.module.scss
│ │ │ ├── Form.spec.ts
│ │ │ ├── Form.tsx
│ │ │ ├── formActions.ts
│ │ │ ├── FormContext.ts
│ │ │ └── FormNative.tsx
│ │ ├── FormItem
│ │ │ ├── FormItem.md
│ │ │ ├── FormItem.module.scss
│ │ │ ├── FormItem.spec.ts
│ │ │ ├── FormItem.tsx
│ │ │ ├── FormItemNative.tsx
│ │ │ ├── HelperText.module.scss
│ │ │ ├── HelperText.tsx
│ │ │ ├── ItemWithLabel.tsx
│ │ │ └── Validations.ts
│ │ ├── FormSection
│ │ │ ├── FormSection.md
│ │ │ ├── FormSection.ts
│ │ │ └── FormSection.xmlui
│ │ ├── Fragment
│ │ │ ├── Fragment.spec.ts
│ │ │ └── Fragment.tsx
│ │ ├── Heading
│ │ │ ├── abstractions.ts
│ │ │ ├── H1.md
│ │ │ ├── H1.spec.ts
│ │ │ ├── H2.md
│ │ │ ├── H2.spec.ts
│ │ │ ├── H3.md
│ │ │ ├── H3.spec.ts
│ │ │ ├── H4.md
│ │ │ ├── H4.spec.ts
│ │ │ ├── H5.md
│ │ │ ├── H5.spec.ts
│ │ │ ├── H6.md
│ │ │ ├── H6.spec.ts
│ │ │ ├── Heading.md
│ │ │ ├── Heading.module.scss
│ │ │ ├── Heading.spec.ts
│ │ │ ├── Heading.tsx
│ │ │ └── HeadingNative.tsx
│ │ ├── HoverCard
│ │ │ ├── HoverCard.tsx
│ │ │ └── HovercardNative.tsx
│ │ ├── HtmlTags
│ │ │ ├── HtmlTags.module.scss
│ │ │ ├── HtmlTags.spec.ts
│ │ │ └── HtmlTags.tsx
│ │ ├── Icon
│ │ │ ├── AdmonitionDanger.tsx
│ │ │ ├── AdmonitionInfo.tsx
│ │ │ ├── AdmonitionNote.tsx
│ │ │ ├── AdmonitionTip.tsx
│ │ │ ├── AdmonitionWarning.tsx
│ │ │ ├── ApiIcon.tsx
│ │ │ ├── ArrowDropDown.module.scss
│ │ │ ├── ArrowDropDown.tsx
│ │ │ ├── ArrowDropUp.module.scss
│ │ │ ├── ArrowDropUp.tsx
│ │ │ ├── ArrowLeft.module.scss
│ │ │ ├── ArrowLeft.tsx
│ │ │ ├── ArrowRight.module.scss
│ │ │ ├── ArrowRight.tsx
│ │ │ ├── Attach.tsx
│ │ │ ├── Binding.module.scss
│ │ │ ├── Binding.tsx
│ │ │ ├── BoardIcon.tsx
│ │ │ ├── BoxIcon.tsx
│ │ │ ├── CheckIcon.tsx
│ │ │ ├── ChevronDownIcon.tsx
│ │ │ ├── ChevronLeft.tsx
│ │ │ ├── ChevronRight.tsx
│ │ │ ├── ChevronUpIcon.tsx
│ │ │ ├── CodeFileIcon.tsx
│ │ │ ├── CodeSandbox.tsx
│ │ │ ├── CompactListIcon.tsx
│ │ │ ├── ContentCopyIcon.tsx
│ │ │ ├── DarkToLightIcon.tsx
│ │ │ ├── DatabaseIcon.module.scss
│ │ │ ├── DatabaseIcon.tsx
│ │ │ ├── DocFileIcon.tsx
│ │ │ ├── DocIcon.tsx
│ │ │ ├── DotMenuHorizontalIcon.tsx
│ │ │ ├── DotMenuIcon.tsx
│ │ │ ├── EmailIcon.tsx
│ │ │ ├── EmptyFolderIcon.tsx
│ │ │ ├── ErrorIcon.tsx
│ │ │ ├── ExpressionIcon.tsx
│ │ │ ├── FillPlusCricleIcon.tsx
│ │ │ ├── FilterIcon.tsx
│ │ │ ├── FolderIcon.tsx
│ │ │ ├── GlobeIcon.tsx
│ │ │ ├── HomeIcon.tsx
│ │ │ ├── HyperLinkIcon.tsx
│ │ │ ├── Icon.md
│ │ │ ├── Icon.module.scss
│ │ │ ├── Icon.spec.ts
│ │ │ ├── Icon.tsx
│ │ │ ├── IconNative.tsx
│ │ │ ├── ImageFileIcon.tsx
│ │ │ ├── Inspect.tsx
│ │ │ ├── LightToDark.tsx
│ │ │ ├── LinkIcon.tsx
│ │ │ ├── ListIcon.tsx
│ │ │ ├── LooseListIcon.tsx
│ │ │ ├── MoonIcon.tsx
│ │ │ ├── MoreOptionsIcon.tsx
│ │ │ ├── NoSortIcon.tsx
│ │ │ ├── PDFIcon.tsx
│ │ │ ├── PenIcon.tsx
│ │ │ ├── PhoneIcon.tsx
│ │ │ ├── PhotoIcon.tsx
│ │ │ ├── PlusIcon.tsx
│ │ │ ├── SearchIcon.tsx
│ │ │ ├── ShareIcon.tsx
│ │ │ ├── SortAscendingIcon.tsx
│ │ │ ├── SortDescendingIcon.tsx
│ │ │ ├── StarsIcon.tsx
│ │ │ ├── SunIcon.tsx
│ │ │ ├── svg
│ │ │ │ ├── admonition_danger.svg
│ │ │ │ ├── admonition_info.svg
│ │ │ │ ├── admonition_note.svg
│ │ │ │ ├── admonition_tip.svg
│ │ │ │ ├── admonition_warning.svg
│ │ │ │ ├── api.svg
│ │ │ │ ├── arrow-dropdown.svg
│ │ │ │ ├── arrow-left.svg
│ │ │ │ ├── arrow-right.svg
│ │ │ │ ├── arrow-up.svg
│ │ │ │ ├── attach.svg
│ │ │ │ ├── binding.svg
│ │ │ │ ├── box.svg
│ │ │ │ ├── bulb.svg
│ │ │ │ ├── code-file.svg
│ │ │ │ ├── code-sandbox.svg
│ │ │ │ ├── dark_to_light.svg
│ │ │ │ ├── database.svg
│ │ │ │ ├── doc.svg
│ │ │ │ ├── empty-folder.svg
│ │ │ │ ├── expression.svg
│ │ │ │ ├── eye-closed.svg
│ │ │ │ ├── eye-dark.svg
│ │ │ │ ├── eye.svg
│ │ │ │ ├── file-text.svg
│ │ │ │ ├── filter.svg
│ │ │ │ ├── folder.svg
│ │ │ │ ├── img.svg
│ │ │ │ ├── inspect.svg
│ │ │ │ ├── light_to_dark.svg
│ │ │ │ ├── moon.svg
│ │ │ │ ├── pdf.svg
│ │ │ │ ├── photo.svg
│ │ │ │ ├── share.svg
│ │ │ │ ├── stars.svg
│ │ │ │ ├── sun.svg
│ │ │ │ ├── trending-down.svg
│ │ │ │ ├── trending-level.svg
│ │ │ │ ├── trending-up.svg
│ │ │ │ ├── txt.svg
│ │ │ │ ├── unknown-file.svg
│ │ │ │ ├── unlink.svg
│ │ │ │ └── xls.svg
│ │ │ ├── TableDeleteColumnIcon.tsx
│ │ │ ├── TableDeleteRowIcon.tsx
│ │ │ ├── TableInsertColumnIcon.tsx
│ │ │ ├── TableInsertRowIcon.tsx
│ │ │ ├── TrashIcon.tsx
│ │ │ ├── TrendingDownIcon.tsx
│ │ │ ├── TrendingLevelIcon.tsx
│ │ │ ├── TrendingUpIcon.tsx
│ │ │ ├── TxtIcon.tsx
│ │ │ ├── UnknownFileIcon.tsx
│ │ │ ├── UnlinkIcon.tsx
│ │ │ ├── UserIcon.tsx
│ │ │ ├── WarningIcon.tsx
│ │ │ └── XlsIcon.tsx
│ │ ├── IconProvider.tsx
│ │ ├── IconRegistryContext.tsx
│ │ ├── IFrame
│ │ │ ├── IFrame.md
│ │ │ ├── IFrame.module.scss
│ │ │ ├── IFrame.spec.ts
│ │ │ ├── IFrame.tsx
│ │ │ └── IFrameNative.tsx
│ │ ├── Image
│ │ │ ├── Image.md
│ │ │ ├── Image.module.scss
│ │ │ ├── Image.spec.ts
│ │ │ ├── Image.tsx
│ │ │ └── ImageNative.tsx
│ │ ├── Input
│ │ │ ├── index.ts
│ │ │ ├── InputAdornment.module.scss
│ │ │ ├── InputAdornment.tsx
│ │ │ ├── InputDivider.module.scss
│ │ │ ├── InputDivider.tsx
│ │ │ ├── InputLabel.module.scss
│ │ │ ├── InputLabel.tsx
│ │ │ ├── PartialInput.module.scss
│ │ │ └── PartialInput.tsx
│ │ ├── InspectButton
│ │ │ ├── InspectButton.module.scss
│ │ │ └── InspectButton.tsx
│ │ ├── Items
│ │ │ ├── Items.md
│ │ │ ├── Items.spec.ts
│ │ │ ├── Items.tsx
│ │ │ └── ItemsNative.tsx
│ │ ├── Link
│ │ │ ├── Link.md
│ │ │ ├── Link.module.scss
│ │ │ ├── Link.spec.ts
│ │ │ ├── Link.tsx
│ │ │ └── LinkNative.tsx
│ │ ├── List
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── List.md
│ │ │ ├── List.module.scss
│ │ │ ├── List.spec.ts
│ │ │ ├── List.tsx
│ │ │ └── ListNative.tsx
│ │ ├── Logo
│ │ │ ├── doc-resources
│ │ │ │ └── xmlui-logo.svg
│ │ │ ├── Logo.md
│ │ │ ├── Logo.tsx
│ │ │ └── LogoNative.tsx
│ │ ├── Markdown
│ │ │ ├── CodeText.module.scss
│ │ │ ├── CodeText.tsx
│ │ │ ├── Markdown.md
│ │ │ ├── Markdown.module.scss
│ │ │ ├── Markdown.spec.ts
│ │ │ ├── Markdown.tsx
│ │ │ ├── MarkdownNative.tsx
│ │ │ ├── parse-binding-expr.ts
│ │ │ └── utils.ts
│ │ ├── metadata-helpers.ts
│ │ ├── ModalDialog
│ │ │ ├── ConfirmationModalContextProvider.tsx
│ │ │ ├── Dialog.module.scss
│ │ │ ├── Dialog.tsx
│ │ │ ├── ModalDialog.md
│ │ │ ├── ModalDialog.module.scss
│ │ │ ├── ModalDialog.spec.ts
│ │ │ ├── ModalDialog.tsx
│ │ │ ├── ModalDialogNative.tsx
│ │ │ └── ModalVisibilityContext.tsx
│ │ ├── NavGroup
│ │ │ ├── NavGroup.md
│ │ │ ├── NavGroup.module.scss
│ │ │ ├── NavGroup.spec.ts
│ │ │ ├── NavGroup.tsx
│ │ │ ├── NavGroupContext.ts
│ │ │ └── NavGroupNative.tsx
│ │ ├── NavLink
│ │ │ ├── NavLink.md
│ │ │ ├── NavLink.module.scss
│ │ │ ├── NavLink.spec.ts
│ │ │ ├── NavLink.tsx
│ │ │ └── NavLinkNative.tsx
│ │ ├── NavPanel
│ │ │ ├── NavPanel.md
│ │ │ ├── NavPanel.module.scss
│ │ │ ├── NavPanel.spec.ts
│ │ │ ├── NavPanel.tsx
│ │ │ └── NavPanelNative.tsx
│ │ ├── NestedApp
│ │ │ ├── AppWithCodeView.module.scss
│ │ │ ├── AppWithCodeView.tsx
│ │ │ ├── AppWithCodeViewNative.tsx
│ │ │ ├── defaultProps.tsx
│ │ │ ├── logo.svg
│ │ │ ├── NestedApp.module.scss
│ │ │ ├── NestedApp.tsx
│ │ │ ├── NestedAppNative.tsx
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.tsx
│ │ │ └── utils.ts
│ │ ├── NoResult
│ │ │ ├── NoResult.md
│ │ │ ├── NoResult.module.scss
│ │ │ ├── NoResult.spec.ts
│ │ │ ├── NoResult.tsx
│ │ │ └── NoResultNative.tsx
│ │ ├── NumberBox
│ │ │ ├── numberbox-abstractions.ts
│ │ │ ├── NumberBox.md
│ │ │ ├── NumberBox.module.scss
│ │ │ ├── NumberBox.spec.ts
│ │ │ ├── NumberBox.tsx
│ │ │ └── NumberBoxNative.tsx
│ │ ├── Option
│ │ │ ├── Option.md
│ │ │ ├── Option.spec.ts
│ │ │ ├── Option.tsx
│ │ │ ├── OptionNative.tsx
│ │ │ └── OptionTypeProvider.tsx
│ │ ├── PageMetaTitle
│ │ │ ├── PageMetaTilteNative.tsx
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── PageMetaTitle.spec.ts
│ │ │ └── PageMetaTitle.tsx
│ │ ├── Pages
│ │ │ ├── Page.md
│ │ │ ├── Pages.md
│ │ │ ├── Pages.module.scss
│ │ │ ├── Pages.tsx
│ │ │ └── PagesNative.tsx
│ │ ├── Pagination
│ │ │ ├── Pagination.md
│ │ │ ├── Pagination.module.scss
│ │ │ ├── Pagination.spec.ts
│ │ │ ├── Pagination.tsx
│ │ │ └── PaginationNative.tsx
│ │ ├── PositionedContainer
│ │ │ ├── PositionedContainer.module.scss
│ │ │ ├── PositionedContainer.tsx
│ │ │ └── PositionedContainerNative.tsx
│ │ ├── ProfileMenu
│ │ │ ├── ProfileMenu.module.scss
│ │ │ └── ProfileMenu.tsx
│ │ ├── ProgressBar
│ │ │ ├── ProgressBar.md
│ │ │ ├── ProgressBar.module.scss
│ │ │ ├── ProgressBar.spec.ts
│ │ │ ├── ProgressBar.tsx
│ │ │ └── ProgressBarNative.tsx
│ │ ├── Queue
│ │ │ ├── Queue.md
│ │ │ ├── Queue.spec.ts
│ │ │ ├── Queue.tsx
│ │ │ ├── queueActions.ts
│ │ │ └── QueueNative.tsx
│ │ ├── RadioGroup
│ │ │ ├── RadioGroup.md
│ │ │ ├── RadioGroup.module.scss
│ │ │ ├── RadioGroup.spec.ts
│ │ │ ├── RadioGroup.tsx
│ │ │ ├── RadioGroupNative.tsx
│ │ │ ├── RadioItem.tsx
│ │ │ └── RadioItemNative.tsx
│ │ ├── RealTimeAdapter
│ │ │ ├── RealTimeAdapter.tsx
│ │ │ └── RealTimeAdapterNative.tsx
│ │ ├── Redirect
│ │ │ ├── Redirect.md
│ │ │ ├── Redirect.spec.ts
│ │ │ └── Redirect.tsx
│ │ ├── ResponsiveBar
│ │ │ ├── README.md
│ │ │ ├── ResponsiveBar.md
│ │ │ ├── ResponsiveBar.module.scss
│ │ │ ├── ResponsiveBar.spec.ts
│ │ │ ├── ResponsiveBar.tsx
│ │ │ └── ResponsiveBarNative.tsx
│ │ ├── Select
│ │ │ ├── HiddenOption.tsx
│ │ │ ├── MultiSelectOption.tsx
│ │ │ ├── OptionContext.ts
│ │ │ ├── Select.md
│ │ │ ├── Select.module.scss
│ │ │ ├── Select.spec.ts
│ │ │ ├── Select.tsx
│ │ │ ├── SelectContext.tsx
│ │ │ ├── SelectNative.tsx
│ │ │ ├── SelectOption.tsx
│ │ │ └── SimpleSelect.tsx
│ │ ├── SelectionStore
│ │ │ ├── SelectionStore.md
│ │ │ ├── SelectionStore.tsx
│ │ │ └── SelectionStoreNative.tsx
│ │ ├── Slider
│ │ │ ├── Slider.md
│ │ │ ├── Slider.module.scss
│ │ │ ├── Slider.spec.ts
│ │ │ ├── Slider.tsx
│ │ │ └── SliderNative.tsx
│ │ ├── Slot
│ │ │ ├── Slot.md
│ │ │ ├── Slot.spec.ts
│ │ │ └── Slot.ts
│ │ ├── SlotItem.tsx
│ │ ├── SpaceFiller
│ │ │ ├── SpaceFiller.md
│ │ │ ├── SpaceFiller.module.scss
│ │ │ ├── SpaceFiller.spec.ts
│ │ │ ├── SpaceFiller.tsx
│ │ │ └── SpaceFillerNative.tsx
│ │ ├── Spinner
│ │ │ ├── Spinner.md
│ │ │ ├── Spinner.module.scss
│ │ │ ├── Spinner.spec.ts
│ │ │ ├── Spinner.tsx
│ │ │ └── SpinnerNative.tsx
│ │ ├── Splitter
│ │ │ ├── HSplitter.md
│ │ │ ├── HSplitter.spec.ts
│ │ │ ├── Splitter.md
│ │ │ ├── Splitter.module.scss
│ │ │ ├── Splitter.spec.ts
│ │ │ ├── Splitter.tsx
│ │ │ ├── SplitterNative.tsx
│ │ │ ├── utils.ts
│ │ │ ├── VSplitter.md
│ │ │ └── VSplitter.spec.ts
│ │ ├── Stack
│ │ │ ├── CHStack.md
│ │ │ ├── CHStack.spec.ts
│ │ │ ├── CVStack.md
│ │ │ ├── CVStack.spec.ts
│ │ │ ├── HStack.md
│ │ │ ├── HStack.spec.ts
│ │ │ ├── Stack.md
│ │ │ ├── Stack.module.scss
│ │ │ ├── Stack.spec.ts
│ │ │ ├── Stack.tsx
│ │ │ ├── StackNative.tsx
│ │ │ ├── VStack.md
│ │ │ └── VStack.spec.ts
│ │ ├── StickyBox
│ │ │ ├── StickyBox.md
│ │ │ ├── StickyBox.module.scss
│ │ │ ├── StickyBox.tsx
│ │ │ └── StickyBoxNative.tsx
│ │ ├── Switch
│ │ │ ├── Switch.md
│ │ │ ├── Switch.spec.ts
│ │ │ └── Switch.tsx
│ │ ├── Table
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── react-table-config.d.ts
│ │ │ ├── Table.md
│ │ │ ├── Table.module.scss
│ │ │ ├── Table.spec.ts
│ │ │ ├── Table.tsx
│ │ │ ├── TableNative.tsx
│ │ │ └── useRowSelection.tsx
│ │ ├── TableOfContents
│ │ │ ├── TableOfContents.module.scss
│ │ │ ├── TableOfContents.spec.ts
│ │ │ ├── TableOfContents.tsx
│ │ │ └── TableOfContentsNative.tsx
│ │ ├── Tabs
│ │ │ ├── TabContext.tsx
│ │ │ ├── TabItem.md
│ │ │ ├── TabItem.tsx
│ │ │ ├── TabItemNative.tsx
│ │ │ ├── Tabs.md
│ │ │ ├── Tabs.module.scss
│ │ │ ├── Tabs.spec.ts
│ │ │ ├── Tabs.tsx
│ │ │ └── TabsNative.tsx
│ │ ├── Text
│ │ │ ├── Text.md
│ │ │ ├── Text.module.scss
│ │ │ ├── Text.spec.ts
│ │ │ ├── Text.tsx
│ │ │ └── TextNative.tsx
│ │ ├── TextArea
│ │ │ ├── TextArea.md
│ │ │ ├── TextArea.module.scss
│ │ │ ├── TextArea.spec.ts
│ │ │ ├── TextArea.tsx
│ │ │ ├── TextAreaNative.tsx
│ │ │ ├── TextAreaResizable.tsx
│ │ │ └── useComposedRef.ts
│ │ ├── TextBox
│ │ │ ├── TextBox.md
│ │ │ ├── TextBox.module.scss
│ │ │ ├── TextBox.spec.ts
│ │ │ ├── TextBox.tsx
│ │ │ └── TextBoxNative.tsx
│ │ ├── Theme
│ │ │ ├── NotificationToast.tsx
│ │ │ ├── Theme.md
│ │ │ ├── Theme.module.scss
│ │ │ ├── Theme.spec.ts
│ │ │ ├── Theme.tsx
│ │ │ └── ThemeNative.tsx
│ │ ├── TimeInput
│ │ │ ├── TimeInput.md
│ │ │ ├── TimeInput.module.scss
│ │ │ ├── TimeInput.spec.ts
│ │ │ ├── TimeInput.tsx
│ │ │ ├── TimeInputNative.tsx
│ │ │ └── utils.ts
│ │ ├── Timer
│ │ │ ├── Timer.md
│ │ │ ├── Timer.spec.ts
│ │ │ ├── Timer.tsx
│ │ │ └── TimerNative.tsx
│ │ ├── Toggle
│ │ │ ├── Toggle.module.scss
│ │ │ └── Toggle.tsx
│ │ ├── ToneChangerButton
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneChangerButton.spec.ts
│ │ │ └── ToneChangerButton.tsx
│ │ ├── ToneSwitch
│ │ │ ├── ToneSwitch.md
│ │ │ ├── ToneSwitch.module.scss
│ │ │ ├── ToneSwitch.spec.ts
│ │ │ ├── ToneSwitch.tsx
│ │ │ └── ToneSwitchNative.tsx
│ │ ├── Tooltip
│ │ │ ├── Tooltip.md
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.spec.ts
│ │ │ ├── Tooltip.tsx
│ │ │ └── TooltipNative.tsx
│ │ ├── Tree
│ │ │ ├── testData.ts
│ │ │ ├── Tree-dynamic.spec.ts
│ │ │ ├── Tree-icons.spec.ts
│ │ │ ├── Tree.md
│ │ │ ├── Tree.spec.ts
│ │ │ ├── TreeComponent.module.scss
│ │ │ ├── TreeComponent.tsx
│ │ │ └── TreeNative.tsx
│ │ ├── TreeDisplay
│ │ │ ├── TreeDisplay.md
│ │ │ ├── TreeDisplay.module.scss
│ │ │ ├── TreeDisplay.tsx
│ │ │ └── TreeDisplayNative.tsx
│ │ ├── ValidationSummary
│ │ │ ├── ValidationSummary.module.scss
│ │ │ └── ValidationSummary.tsx
│ │ └── VisuallyHidden.tsx
│ ├── components-core
│ │ ├── abstractions
│ │ │ ├── ComponentRenderer.ts
│ │ │ ├── LoaderRenderer.ts
│ │ │ ├── standalone.ts
│ │ │ └── treeAbstractions.ts
│ │ ├── action
│ │ │ ├── actions.ts
│ │ │ ├── APICall.tsx
│ │ │ ├── FileDownloadAction.tsx
│ │ │ ├── FileUploadAction.tsx
│ │ │ ├── NavigateAction.tsx
│ │ │ └── TimedAction.tsx
│ │ ├── ApiBoundComponent.tsx
│ │ ├── appContext
│ │ │ ├── date-functions.ts
│ │ │ ├── math-function.ts
│ │ │ └── misc-utils.ts
│ │ ├── AppContext.tsx
│ │ ├── behaviors
│ │ │ ├── Behavior.tsx
│ │ │ ├── BehaviorContext.tsx
│ │ │ └── CoreBehaviors.tsx
│ │ ├── component-hooks.ts
│ │ ├── ComponentDecorator.tsx
│ │ ├── ComponentViewer.tsx
│ │ ├── CompoundComponent.tsx
│ │ ├── constants.ts
│ │ ├── DebugViewProvider.tsx
│ │ ├── descriptorHelper.ts
│ │ ├── devtools
│ │ │ ├── InspectorDialog.module.scss
│ │ │ ├── InspectorDialog.tsx
│ │ │ └── InspectorDialogVisibilityContext.tsx
│ │ ├── EngineError.ts
│ │ ├── event-handlers.ts
│ │ ├── InspectorButton.module.scss
│ │ ├── InspectorContext.tsx
│ │ ├── interception
│ │ │ ├── abstractions.ts
│ │ │ ├── ApiInterceptor.ts
│ │ │ ├── ApiInterceptorProvider.tsx
│ │ │ ├── apiInterceptorWorker.ts
│ │ │ ├── Backend.ts
│ │ │ ├── Errors.ts
│ │ │ ├── IndexedDb.ts
│ │ │ ├── initMock.ts
│ │ │ ├── InMemoryDb.ts
│ │ │ ├── ReadonlyCollection.ts
│ │ │ └── useApiInterceptorContext.tsx
│ │ ├── loader
│ │ │ ├── ApiLoader.tsx
│ │ │ ├── DataLoader.tsx
│ │ │ ├── ExternalDataLoader.tsx
│ │ │ ├── Loader.tsx
│ │ │ ├── MockLoaderRenderer.tsx
│ │ │ └── PageableLoader.tsx
│ │ ├── LoaderComponent.tsx
│ │ ├── markup-check.ts
│ │ ├── parts.ts
│ │ ├── renderers.ts
│ │ ├── rendering
│ │ │ ├── AppContent.tsx
│ │ │ ├── AppRoot.tsx
│ │ │ ├── AppWrapper.tsx
│ │ │ ├── buildProxy.ts
│ │ │ ├── collectFnVarDeps.ts
│ │ │ ├── ComponentAdapter.tsx
│ │ │ ├── ComponentWrapper.tsx
│ │ │ ├── Container.tsx
│ │ │ ├── containers.ts
│ │ │ ├── ContainerWrapper.tsx
│ │ │ ├── ErrorBoundary.module.scss
│ │ │ ├── ErrorBoundary.tsx
│ │ │ ├── InvalidComponent.module.scss
│ │ │ ├── InvalidComponent.tsx
│ │ │ ├── nodeUtils.ts
│ │ │ ├── reducer.ts
│ │ │ ├── renderChild.tsx
│ │ │ ├── StandaloneComponent.tsx
│ │ │ ├── StateContainer.tsx
│ │ │ ├── UnknownComponent.module.scss
│ │ │ ├── UnknownComponent.tsx
│ │ │ └── valueExtractor.ts
│ │ ├── reportEngineError.ts
│ │ ├── RestApiProxy.ts
│ │ ├── script-runner
│ │ │ ├── asyncProxy.ts
│ │ │ ├── AttributeValueParser.ts
│ │ │ ├── bannedFunctions.ts
│ │ │ ├── BindingTreeEvaluationContext.ts
│ │ │ ├── eval-tree-async.ts
│ │ │ ├── eval-tree-common.ts
│ │ │ ├── eval-tree-sync.ts
│ │ │ ├── ParameterParser.ts
│ │ │ ├── process-statement-async.ts
│ │ │ ├── process-statement-common.ts
│ │ │ ├── process-statement-sync.ts
│ │ │ ├── ScriptingSourceTree.ts
│ │ │ ├── simplify-expression.ts
│ │ │ ├── statement-queue.ts
│ │ │ └── visitors.ts
│ │ ├── StandaloneApp.tsx
│ │ ├── StandaloneExtensionManager.ts
│ │ ├── TableOfContentsContext.tsx
│ │ ├── theming
│ │ │ ├── _themes.scss
│ │ │ ├── component-layout-resolver.ts
│ │ │ ├── extendThemeUtils.ts
│ │ │ ├── hvar.ts
│ │ │ ├── layout-resolver.ts
│ │ │ ├── parse-layout-props.ts
│ │ │ ├── StyleContext.tsx
│ │ │ ├── StyleRegistry.ts
│ │ │ ├── ThemeContext.tsx
│ │ │ ├── ThemeProvider.tsx
│ │ │ ├── themes
│ │ │ │ ├── base-utils.ts
│ │ │ │ ├── palette.ts
│ │ │ │ ├── root.ts
│ │ │ │ ├── solid.ts
│ │ │ │ ├── theme-colors.ts
│ │ │ │ └── xmlui.ts
│ │ │ ├── themeVars.module.scss
│ │ │ ├── themeVars.ts
│ │ │ ├── transformThemeVars.ts
│ │ │ └── utils.ts
│ │ ├── utils
│ │ │ ├── actionUtils.ts
│ │ │ ├── audio-utils.ts
│ │ │ ├── compound-utils.ts
│ │ │ ├── css-utils.ts
│ │ │ ├── DataLoaderQueryKeyGenerator.ts
│ │ │ ├── date-utils.ts
│ │ │ ├── extractParam.ts
│ │ │ ├── hooks.tsx
│ │ │ ├── LruCache.ts
│ │ │ ├── mergeProps.ts
│ │ │ ├── misc.ts
│ │ │ ├── request-params.ts
│ │ │ ├── statementUtils.ts
│ │ │ └── treeUtils.ts
│ │ └── xmlui-parser.ts
│ ├── index-standalone.ts
│ ├── index.scss
│ ├── index.ts
│ ├── language-server
│ │ ├── server-common.ts
│ │ ├── server-web-worker.ts
│ │ ├── server.ts
│ │ ├── services
│ │ │ ├── common
│ │ │ │ ├── docs-generation.ts
│ │ │ │ ├── lsp-utils.ts
│ │ │ │ ├── metadata-utils.ts
│ │ │ │ └── syntax-node-utilities.ts
│ │ │ ├── completion.ts
│ │ │ ├── diagnostic.ts
│ │ │ ├── format.ts
│ │ │ └── hover.ts
│ │ └── xmlui-metadata-generated.mjs
│ ├── logging
│ │ ├── LoggerContext.tsx
│ │ ├── LoggerInitializer.tsx
│ │ ├── LoggerService.ts
│ │ └── xmlui.ts
│ ├── logo.svg
│ ├── parsers
│ │ ├── common
│ │ │ ├── GenericToken.ts
│ │ │ ├── InputStream.ts
│ │ │ └── utils.ts
│ │ ├── scripting
│ │ │ ├── code-behind-collect.ts
│ │ │ ├── Lexer.ts
│ │ │ ├── modules.ts
│ │ │ ├── Parser.ts
│ │ │ ├── ParserError.ts
│ │ │ ├── ScriptingNodeTypes.ts
│ │ │ ├── TokenTrait.ts
│ │ │ ├── TokenType.ts
│ │ │ └── tree-visitor.ts
│ │ ├── style-parser
│ │ │ ├── errors.ts
│ │ │ ├── source-tree.ts
│ │ │ ├── StyleInputStream.ts
│ │ │ ├── StyleLexer.ts
│ │ │ ├── StyleParser.ts
│ │ │ └── tokens.ts
│ │ └── xmlui-parser
│ │ ├── CharacterCodes.ts
│ │ ├── diagnostics.ts
│ │ ├── fileExtensions.ts
│ │ ├── index.ts
│ │ ├── lint.ts
│ │ ├── parser.ts
│ │ ├── ParserError.ts
│ │ ├── scanner.ts
│ │ ├── syntax-kind.ts
│ │ ├── syntax-node.ts
│ │ ├── transform.ts
│ │ ├── utils.ts
│ │ ├── xmlui-serializer.ts
│ │ └── xmlui-tree.ts
│ ├── react-app-env.d.ts
│ ├── syntax
│ │ ├── monaco
│ │ │ ├── grammar.monacoLanguage.ts
│ │ │ ├── index.ts
│ │ │ ├── xmlui-dark.ts
│ │ │ ├── xmlui-light.ts
│ │ │ └── xmluiscript.monacoLanguage.ts
│ │ └── textMate
│ │ ├── index.ts
│ │ ├── xmlui-dark.json
│ │ ├── xmlui-light.json
│ │ ├── xmlui.json
│ │ └── xmlui.tmLanguage.json
│ ├── testing
│ │ ├── assertions.ts
│ │ ├── component-test-helpers.ts
│ │ ├── ComponentDrivers.ts
│ │ ├── drivers
│ │ │ ├── DateInputDriver.ts
│ │ │ ├── ModalDialogDriver.ts
│ │ │ ├── NumberBoxDriver.ts
│ │ │ ├── TextBoxDriver.ts
│ │ │ ├── TimeInputDriver.ts
│ │ │ ├── TimerDriver.ts
│ │ │ └── TreeDriver.ts
│ │ ├── fixtures.ts
│ │ ├── infrastructure
│ │ │ ├── index.html
│ │ │ ├── main.tsx
│ │ │ ├── public
│ │ │ │ ├── mockServiceWorker.js
│ │ │ │ ├── resources
│ │ │ │ │ ├── bell.svg
│ │ │ │ │ ├── box.svg
│ │ │ │ │ ├── doc.svg
│ │ │ │ │ ├── eye.svg
│ │ │ │ │ ├── flower-640x480.jpg
│ │ │ │ │ ├── sun.svg
│ │ │ │ │ ├── test-image-100x100.jpg
│ │ │ │ │ └── txt.svg
│ │ │ │ └── serve.json
│ │ │ └── TestBed.tsx
│ │ └── themed-app-test-helpers.ts
│ └── vite-env.d.ts
├── tests
│ ├── components
│ │ ├── CodeBlock
│ │ │ └── hightlight-code.test.ts
│ │ ├── playground-pattern.test.ts
│ │ └── Tree
│ │ └── Tree-states.test.ts
│ ├── components-core
│ │ ├── abstractions
│ │ │ └── treeAbstractions.test.ts
│ │ ├── container
│ │ │ └── buildProxy.test.ts
│ │ ├── interception
│ │ │ ├── orderBy.test.ts
│ │ │ ├── ReadOnlyCollection.test.ts
│ │ │ └── request-param-converter.test.ts
│ │ ├── scripts-runner
│ │ │ ├── AttributeValueParser.test.ts
│ │ │ ├── eval-tree-arrow-async.test.ts
│ │ │ ├── eval-tree-arrow.test.ts
│ │ │ ├── eval-tree-func-decl-async.test.ts
│ │ │ ├── eval-tree-func-decl.test.ts
│ │ │ ├── eval-tree-pre-post.test.ts
│ │ │ ├── eval-tree-regression.test.ts
│ │ │ ├── eval-tree.test.ts
│ │ │ ├── function-proxy.test.ts
│ │ │ ├── parser-regression.test.ts
│ │ │ ├── process-event.test.ts
│ │ │ ├── process-function.test.ts
│ │ │ ├── process-implicit-context.test.ts
│ │ │ ├── process-statement-asgn.test.ts
│ │ │ ├── process-statement-destruct.test.ts
│ │ │ ├── process-statement-regs.test.ts
│ │ │ ├── process-statement-sync.test.ts
│ │ │ ├── process-statement.test.ts
│ │ │ ├── process-switch-sync.test.ts
│ │ │ ├── process-switch.test.ts
│ │ │ ├── process-try-sync.test.ts
│ │ │ ├── process-try.test.ts
│ │ │ └── test-helpers.ts
│ │ ├── test-metadata-handler.ts
│ │ ├── theming
│ │ │ ├── border-segments.test.ts
│ │ │ ├── component-layout.resolver.test.ts
│ │ │ ├── layout-property-parser.test.ts
│ │ │ ├── layout-resolver.test.ts
│ │ │ ├── layout-resolver2.test.ts
│ │ │ ├── layout-vp-override.test.ts
│ │ │ └── padding-segments.test.ts
│ │ └── utils
│ │ ├── date-utils.test.ts
│ │ ├── format-human-elapsed-time.test.ts
│ │ └── LruCache.test.ts
│ ├── language-server
│ │ ├── completion.test.ts
│ │ ├── format.test.ts
│ │ ├── hover.test.ts
│ │ └── mockData.ts
│ └── parsers
│ ├── common
│ │ └── input-stream.test.ts
│ ├── markdown
│ │ └── parse-binding-expression.test.ts
│ ├── parameter-parser.test.ts
│ ├── paremeter-parser.test.ts
│ ├── scripting
│ │ ├── eval-tree-arrow.test.ts
│ │ ├── eval-tree-pre-post.test.ts
│ │ ├── eval-tree.test.ts
│ │ ├── function-proxy.test.ts
│ │ ├── lexer-literals.test.ts
│ │ ├── lexer-misc.test.ts
│ │ ├── module-parse.test.ts
│ │ ├── parser-arrow.test.ts
│ │ ├── parser-assignments.test.ts
│ │ ├── parser-binary.test.ts
│ │ ├── parser-destructuring.test.ts
│ │ ├── parser-errors.test.ts
│ │ ├── parser-expressions.test.ts
│ │ ├── parser-function.test.ts
│ │ ├── parser-literals.test.ts
│ │ ├── parser-primary.test.ts
│ │ ├── parser-regex.test.ts
│ │ ├── parser-statements.test.ts
│ │ ├── parser-unary.test.ts
│ │ ├── process-event.test.ts
│ │ ├── process-implicit-context.test.ts
│ │ ├── process-statement-asgn.test.ts
│ │ ├── process-statement-destruct.test.ts
│ │ ├── process-statement-regs.test.ts
│ │ ├── process-statement-sync.test.ts
│ │ ├── process-statement.test.ts
│ │ ├── process-switch-sync.test.ts
│ │ ├── process-switch.test.ts
│ │ ├── process-try-sync.test.ts
│ │ ├── process-try.test.ts
│ │ ├── simplify-expression.test.ts
│ │ ├── statement-hooks.test.ts
│ │ └── test-helpers.ts
│ ├── style-parser
│ │ ├── generateHvarChain.test.ts
│ │ ├── parseHVar.test.ts
│ │ ├── parser.test.ts
│ │ └── tokens.test.ts
│ └── xmlui
│ ├── lint.test.ts
│ ├── parser.test.ts
│ ├── scanner.test.ts
│ ├── transform.attr.test.ts
│ ├── transform.circular.test.ts
│ ├── transform.element.test.ts
│ ├── transform.errors.test.ts
│ ├── transform.escape.test.ts
│ ├── transform.regression.test.ts
│ ├── transform.script.test.ts
│ ├── transform.test.ts
│ └── xmlui.ts
├── tests-e2e
│ ├── api-bound-component-regression.spec.ts
│ ├── api-call-as-extracted-component.spec.ts
│ ├── assign-to-object-or-array-regression.spec.ts
│ ├── binding-regression.spec.ts
│ ├── children-as-template-context-vars.spec.ts
│ ├── compound-component.spec.ts
│ ├── context-vars-regression.spec.ts
│ ├── data-bindings.spec.ts
│ ├── datasource-and-api-usage-in-var.spec.ts
│ ├── datasource-direct-binding.spec.ts
│ ├── datasource-onLoaded-regression.spec.ts
│ ├── modify-array-item-regression.spec.ts
│ ├── namespaces.spec.ts
│ ├── push-to-array-regression.spec.ts
│ ├── screen-breakpoints.spec.ts
│ ├── scripting.spec.ts
│ ├── state-scope-in-pages.spec.ts
│ └── state-var-scopes.spec.ts
├── tsconfig.bin.json
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── vitest.config.ts
```
# Files
--------------------------------------------------------------------------------
/xmlui/src/components/Theme/Theme.tsx:
--------------------------------------------------------------------------------
```typescript
import type { ThemeTone } from "../../abstractions/ThemingDefs";
import { createComponentRenderer } from "../../components-core/renderers";
import { createMetadata, d } from "../metadata-helpers";
import { Theme, defaultProps } from "./ThemeNative";
const COMP = "Theme";
export const ThemeMd = createMetadata({
status: "stable",
description:
"`Theme` creates styling contexts to customize the appearance of nested " +
"components without using CSS.",
allowArbitraryProps: true,
props: {
themeId: d(`This property specifies which theme to use by setting the theme's id.`),
tone: {
description: "This property allows the setting of the current theme's tone.",
availableValues: ["light", "dark"],
valueType: "string",
defaultValue: "light",
},
root: d(
`This property indicates whether the component is at the root of the application.`,
undefined,
"boolean",
defaultProps.root,
),
applyIf: d(
`This property controls whether the theme wrapper is applied. When true (default), the theme wraps the children. When false, children are rendered unwrapped.`,
undefined,
"boolean",
true,
),
},
opaque: true,
});
export const themeComponentRenderer = createComponentRenderer(
COMP,
ThemeMd,
({ node, extractValue, renderChild, layoutContext, appContext }) => {
const { tone, ...restProps } = node.props;
const toastDuration = appContext?.appGlobals?.notifications?.duration;
let themeTone = extractValue.asOptionalString(tone);
if (themeTone && themeTone !== "dark") {
themeTone = "light";
}
return (
<Theme
id={extractValue.asOptionalString(node.props.themeId)}
isRoot={extractValue.asOptionalBoolean(node.props.root)}
applyIf={extractValue.asOptionalBoolean(node.props.applyIf)}
layoutContext={layoutContext}
renderChild={renderChild}
tone={themeTone as ThemeTone}
toastDuration={toastDuration}
themeVars={extractValue(restProps)}
node={node}
/>
);
},
);
```
--------------------------------------------------------------------------------
/xmlui/src/components/Charts/Tooltip/TooltipContent.tsx:
--------------------------------------------------------------------------------
```typescript
import type React from "react";
import { forwardRef } from "react";
import styles from "./TooltipContent.module.scss";
import classnames from "classnames";
import type { Tooltip as RTooltip } from "recharts";
export const TooltipContent = forwardRef<
HTMLDivElement,
React.ComponentProps<typeof RTooltip> &
React.ComponentProps<"div"> & {
hideLabel?: boolean;
hideIndicator?: boolean;
indicator?: "line" | "dot" | "dashed";
nameKey?: string;
labelKey?: string;
}
>(function ({ active, payload, indicator = "dot", hideLabel = false, label, color }, ref) {
if (active && payload && payload.length) {
const nestLabel = payload.length === 1 && indicator !== "dot";
return (
<div className={styles.tooltipContainer} ref={ref}>
{!hideLabel && <p className="label">{label}</p>}
<div className={styles.gridGap}>
{payload?.map((item: any, index: any) => {
const indicatorColor = color || item.payload?.fill || item.color;
return (
<div key={index} className={styles.itemContainer}>
<div
className={classnames(styles.indicator, {
[styles.dot]: indicator === "dot",
[styles.line]: indicator === "line",
[styles.dashed]: indicator === "dashed",
[styles.nestDashed]: nestLabel && indicator === "dashed",
})}
style={{ backgroundColor: indicatorColor, borderColor: indicatorColor }}
/>
<div className={styles.valueContainer}>
<div className={styles.labelGrid}>
<span className={styles.mutedText}>{item.name}</span>
</div>
{item.value && (
<span className={styles.valueText}>{item.value.toLocaleString()}</span>
)}
</div>
</div>
);
})}
</div>
</div>
);
}
return null;
});
TooltipContent.displayName = "TooltipContent";
```
--------------------------------------------------------------------------------
/blog/public/web.config:
--------------------------------------------------------------------------------
```
<?xml version="1.0" encoding="utf-8" ?>
<configuration>
<system.webServer>
<staticContent>
<clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00" />
<mimeMap fileExtension=".json" mimeType="application/json" />
<mimeMap fileExtension=".rss" mimeType="application/rss+xml" />
<mimeMap fileExtension=".ts" mimeType="application/x-typescript" />
<mimeMap fileExtension=".xmlui" mimeType="application/xmlui" />
<mimeMap fileExtension=".xmlui.xs" mimeType="application/xmlui-xs" />
<mimeMap fileExtension="woff" mimeType="application/font-woff" />
<mimeMap fileExtension="woff2" mimeType="application/font-woff2" />
<mimeMap fileExtension="md" mimeType="text/markdown" />
</staticContent>
<rewrite>
<rules>
<rule name="RewriteHTML" stopProcessing="true">
<match url="^([^.]+)$" />
<conditions>
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<add input="{REQUEST_FILENAME}.html" matchType="IsFile" />
</conditions>
<action type="Rewrite" url="{R:1}.html" />
</rule>
<remove name="pushState" />
<rule name="pushState" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
<rule name="Playground" stopProcessing="true">
<match url="^playground$" />
<action type="Rewrite" url="/playground" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
```
--------------------------------------------------------------------------------
/docs/public/web.config:
--------------------------------------------------------------------------------
```
<?xml version="1.0" encoding="utf-8" ?>
<configuration>
<system.webServer>
<staticContent>
<clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00" />
<mimeMap fileExtension=".json" mimeType="application/json" />
<mimeMap fileExtension=".rss" mimeType="application/rss+xml" />
<mimeMap fileExtension=".ts" mimeType="application/x-typescript" />
<mimeMap fileExtension=".xmlui" mimeType="application/xmlui" />
<mimeMap fileExtension=".xmlui.xs" mimeType="application/xmlui-xs" />
<mimeMap fileExtension="woff" mimeType="application/font-woff" />
<mimeMap fileExtension="woff2" mimeType="application/font-woff2" />
<mimeMap fileExtension="md" mimeType="text/markdown" />
</staticContent>
<rewrite>
<rules>
<rule name="RewriteHTML" stopProcessing="true">
<match url="^([^.]+)$" />
<conditions>
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<add input="{REQUEST_FILENAME}.html" matchType="IsFile" />
</conditions>
<action type="Rewrite" url="{R:1}.html" />
</rule>
<remove name="pushState" />
<rule name="pushState" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
<rule name="Playground" stopProcessing="true">
<match url="^playground$" />
<action type="Rewrite" url="/playground" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
```
--------------------------------------------------------------------------------
/docs/public/pages/howto/share-a-modaldialog-across-components.md:
--------------------------------------------------------------------------------
```markdown
# Share a ModalDialog across components
```xmlui-pg noHeader
---app
<App>
<Test />
</App>
---api
{
"apiUrl": "/api",
"initialize": "$state.items = [
{ id: 1, title: 'Mountain View' },
{ id: 2, title: 'City Lights' },
{ id: 3, title: 'Ocean Sunset' }
]",
"operations": {
"get-items": {
"url": "/items",
"method": "get",
"handler": "return $state.items"
}
}
}
---comp display
<Component name="Test">
<AppState id="settings" bucket="appSettings" initialValue="{{
itemSize: 'medium',
showDetails: true
}}" />
<!-- Settings modal defined at App level - accessible to all components -->
<ModalDialog id="settingsDialog" title="Settings">
<SettingsPanel />
</ModalDialog>
<DataSource id="items" url="/api/items" />
<AppHeader title="Demo App">
<property name="profileMenuTemplate">
<Icon name="cog" onClick="settingsDialog.open()" />
</property>
</AppHeader>
<VStack gap="1rem">
<HStack gap="1rem">
<Text>Items ({settings.value.itemSize} size)</Text>
<Button
label="Settings"
size="sm"
onClick="settingsDialog.open()"
/>
</HStack>
<List data="{items}">
<Card>
<VStack>
<Text>{$item.title}</Text>
<Fragment when="{settings.value.showDetails}">
<Text variant="caption">ID: {$item.id}</Text>
</Fragment>
</VStack>
</Card>
</List>
</VStack>
</Component>
---comp display
<Component name="SettingsPanel">
<AppState id="settings" bucket="appSettings" />
<VStack gap="1rem">
<Select
label="Item Size"
initialValue="{settings.value.itemSize}"
onDidChange="(value) => settings.update({ itemSize: value })"
>
<Option value="small" label="Small" />
<Option value="medium" label="Medium" />
<Option value="large" label="Large" />
</Select>
<Switch
label="Show details"
initialValue="{settings.value.showDetails}"
onDidChange="(value) => settings.update({ showDetails: value })"
/>
</VStack>
</Component>
```
```
--------------------------------------------------------------------------------
/packages/xmlui-playground/src/playground/utils.ts:
--------------------------------------------------------------------------------
```typescript
/**
* Convert a string to its UTF-8 bytes and compress it.
*
* @param {string} str
* @returns {Promise<Uint8Array>}
*/
async function compress(str: string): Promise<Uint8Array> {
// Convert the string to a byte stream.
const stream = new Blob([str]).stream();
// Create a compressed stream.
const compressedStream = stream.pipeThrough(new CompressionStream("gzip"));
// Convert the string to a byte stream.
const reader = compressedStream.getReader();
const chunks = [];
while (true) {
const { done, value } = await reader.read();
if (done) break;
chunks.push(value);
}
return await concatUint8Arrays(chunks);
}
/**
* Decompress bytes into a UTF-8 string.
*
* @param {Uint8Array} compressedBytes
* @returns {Promise<string>}
*/
async function decompress(compressedBytes: Uint8Array): Promise<string> {
// Convert the bytes to a stream.
const stream = new Blob([compressedBytes]).stream();
// Create a decompressed stream.
const decompressedStream = stream.pipeThrough(new DecompressionStream("gzip"));
// Convert the string to a byte stream.
const reader = decompressedStream.getReader();
const chunks = [];
while (true) {
const { done, value } = await reader.read();
if (done) break;
chunks.push(value);
}
const stringBytes = await concatUint8Arrays(chunks);
// Convert the bytes to a string.
return new TextDecoder().decode(stringBytes);
}
/**
* Combine multiple Uint8Arrays into one.
*
* @param {ReadonlyArray<Uint8Array>} uint8arrays
* @returns {Promise<Uint8Array>}
*/
async function concatUint8Arrays(uint8arrays: Uint8Array[]): Promise<Uint8Array> {
const blob = new Blob(uint8arrays);
const buffer = await blob.arrayBuffer();
return new Uint8Array(buffer);
}
async function createQueryString(target: any): Promise<string> {
// Convert the Uint8Array to a Base64 string.
const compressed = await compress(target);
const base64 = btoa(String.fromCharCode(...compressed));
// Create a query string.
return encodeURIComponent(base64);
}
export { compress, decompress, createQueryString };
```
--------------------------------------------------------------------------------
/xmlui/tests/language-server/hover.test.ts:
--------------------------------------------------------------------------------
```typescript
import { describe, expect, it } from "vitest";
import { handleHoverCore } from "../../src/language-server/services/hover";
import { createXmlUiParser } from "../../src/parsers/xmlui-parser";
import { mockMetadataProvider } from "./mockData";
import { MarkupContent } from "vscode-languageserver";
describe("Hover", () => {
it("documents component description", () => {
const docs = hoverAtPoundSign("<Butt#on />").value;
const expected = mockMetadataProvider.getComponent("Button").getMetadata().description;
expect(docs).toContain(expected);
});
it("documents prop description", () => {
const docs = hoverAtPoundSign("<Button lab#el='Hello' />").value;
const expected = mockMetadataProvider.getComponent("Button").getAttr("label").description;
expect(docs).toContain(expected);
});
it("documents event description", () => {
const docs = hoverAtPoundSign("<Button onCl#ick='Hello' />").value;
const expected = mockMetadataProvider.getComponent("Button").getAttr("onClick").description;
expect(docs).toContain(expected);
});
it("documents implicit prop description", () => {
const docs = hoverAtPoundSign("<Button dat#a='Hello' />").value;
const expected = mockMetadataProvider.getComponent("Button").getAttr("data").description;
expect(docs).toContain(expected);
});
it("documents layout prop description", () => {
const docs = hoverAtPoundSign("<Button wid#th='Hello' />").value;
const expected = mockMetadataProvider.getComponent("Button").getAttr("width").description;
expect(docs).toContain(expected);
});
});
function hoverAtPoundSign(source: string) {
const cursorIndicator = "#";
const position = source.indexOf(cursorIndicator);
if (position === -1) {
throw new Error(`No '${cursorIndicator}' found in the tested source to denote the position of the cursor.`);
}
source = source.replace(cursorIndicator, "");
const parser = createXmlUiParser(source)
const { node } = parser.parse()
return handleHoverCore({ getText: parser.getText, node, metaByComp: mockMetadataProvider }, position)
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/ToneSwitch/ToneSwitchNative.tsx:
--------------------------------------------------------------------------------
```typescript
import { forwardRef } from "react";
import { useThemes } from "../../components-core/theming/ThemeContext";
import Icon from "../Icon/IconNative";
import { Toggle } from "../Toggle/Toggle";
import styles from "./ToneSwitch.module.scss";
import classnames from "classnames";
// Default icons for light and dark modes
const DEFAULT_LIGHT_ICON = "sun";
const DEFAULT_DARK_ICON = "moon";
export type ToneSwitchProps = {
/**
* Icon to display for light mode
* @default "sun"
*/
iconLight?: string;
/**
* Icon to display for dark mode
* @default "moon"
*/
iconDark?: string;
className?: string;
};
export const ToneSwitch = forwardRef<HTMLDivElement, ToneSwitchProps>(function ToneSwitch({
iconLight = DEFAULT_LIGHT_ICON,
iconDark = DEFAULT_DARK_ICON,
className,
...rest
}: ToneSwitchProps, ref) {
const { activeThemeTone, setActiveThemeTone } = useThemes();
//console.log('ToneSwitch render - activeThemeTone:', activeThemeTone); // Debug log
const handleChange = (isDark: boolean) => {
setActiveThemeTone(isDark ? "dark" : "light");
};
return (
<div {...rest} ref={ref} style={{ width: "fit-content", display: "inline-block" }} className={className}>
<Toggle
value={activeThemeTone === "dark"}
onDidChange={handleChange}
variant="switch"
style={{ width: "fit-content" }}
inputRenderer={(contextVars) => {
//console.log('ToneSwitch contextVars:', contextVars); // Debug log
return (
<div
className={classnames(styles.iconSwitch, {
[styles.light]: !contextVars.$checked,
[styles.dark]: contextVars.$checked,
})}
>
<div className={styles.iconThumb}>
{!contextVars.$checked ? (
<Icon name={iconLight} fallback="sun" className={styles.icon} />
) : (
<Icon name={iconDark} fallback="moon" className={styles.icon} />
)}
</div>
</div>
);
}}
/>
</div>
);
});
```
--------------------------------------------------------------------------------
/docs/public/resources/files/monthly-status.json:
--------------------------------------------------------------------------------
```json
[{"month":"2022-06","paid_revenue":2243.97,"sent_revenue":0},{"month":"2022-07","paid_revenue":815,"sent_revenue":0},{"month":"2022-08","paid_revenue":2285,"sent_revenue":0},{"month":"2022-09","paid_revenue":1050,"sent_revenue":0},{"month":"2022-10","paid_revenue":1585,"sent_revenue":0},{"month":"2022-11","paid_revenue":473.81,"sent_revenue":660},{"month":"2022-12","paid_revenue":180,"sent_revenue":852.86},{"month":"2023-01","paid_revenue":1587.75,"sent_revenue":0},{"month":"2023-02","paid_revenue":845.05,"sent_revenue":0},{"month":"2023-03","paid_revenue":1419.54,"sent_revenue":0},{"month":"2023-04","paid_revenue":1000,"sent_revenue":0},{"month":"2023-05","paid_revenue":2301.41,"sent_revenue":0},{"month":"2023-06","paid_revenue":360,"sent_revenue":0},{"month":"2023-07","paid_revenue":1912.34,"sent_revenue":0},{"month":"2023-08","paid_revenue":1556.49,"sent_revenue":0},{"month":"2023-09","paid_revenue":1296.89,"sent_revenue":0},{"month":"2023-10","paid_revenue":1272.01,"sent_revenue":0},{"month":"2023-11","paid_revenue":1445,"sent_revenue":0},{"month":"2023-12","paid_revenue":108.3,"sent_revenue":0},{"month":"2024-01","paid_revenue":70,"sent_revenue":0},{"month":"2024-02","paid_revenue":4039.41,"sent_revenue":0},{"month":"2024-03","paid_revenue":1754.33,"sent_revenue":0},{"month":"2024-04","paid_revenue":1243.81,"sent_revenue":0},{"month":"2024-05","paid_revenue":568.57,"sent_revenue":0},{"month":"2024-06","paid_revenue":2818.28,"sent_revenue":0},{"month":"2024-07","paid_revenue":2818.69,"sent_revenue":0},{"month":"2024-08","paid_revenue":1226.97,"sent_revenue":0},{"month":"2024-09","paid_revenue":680,"sent_revenue":0},{"month":"2024-10","paid_revenue":940,"sent_revenue":0},{"month":"2024-11","paid_revenue":1208.35,"sent_revenue":0},{"month":"2024-12","paid_revenue":2475,"sent_revenue":0},{"month":"2025-01","paid_revenue":162.45,"sent_revenue":0},{"month":"2025-02","paid_revenue":882.73,"sent_revenue":555.04},{"month":"2025-03","paid_revenue":0,"sent_revenue":810},{"month":"2025-04","paid_revenue":700,"sent_revenue":0},{"month":"2025-05","paid_revenue":0,"sent_revenue":625}]
```
--------------------------------------------------------------------------------
/xmlui/tests-e2e/namespaces.spec.ts:
--------------------------------------------------------------------------------
```typescript
import { SKIP_REASON } from "../src/testing/component-test-helpers";
import { expect, test } from "../src/testing/fixtures";
test("core button renders without namespace", async ({ page, initTestBed }) => {
await initTestBed(`<App><Button testId="button">CORE</Button></App>`, {
components: [
`
<Component name="Button">
<Text>COMPOUND COMPONENT</Text>
</Component>
`,
],
});
await expect(page.getByTestId("button")).toHaveText("CORE");
});
test("core button renders with XMLUI namespace", async ({ page, initTestBed }) => {
await initTestBed(
`
<App xmlns:XMLUI="core-ns">
<XMLUI:Button testId="button">CORE</XMLUI:Button>
</App>`,
{
components: [
`
<Component name="Button">
<Text>COMPOUND COMPONENT</Text>
</Component>
`,
],
},
);
await expect(page.getByTestId("button")).toHaveText("CORE");
});
test("compound component button renders with app-ns namespace", async ({ page, initTestBed }) => {
await initTestBed(
`
<App xmlns:My="app-ns">
<My:Button testId="button">CORE</My:Button>
</App>`,
{
components: [
`
<Component name="Button">
<Text>COMPOUND COMPONENT</Text>
</Component>
`,
],
},
);
await expect(page.getByTestId("button")).toHaveText("COMPOUND COMPONENT");
});
test("compound component renders without namespace (no name-conflict with core component)", async ({
page,
initTestBed,
}) => {
await initTestBed(
`
<App>
<MyButton testId="button">CORE</MyButton>
</App>`,
{
components: [
`
<Component name="MyButton">
<Text>COMPOUND COMPONENT</Text>
</Component>
`,
],
},
);
await expect(page.getByTestId("button")).toHaveText("COMPOUND COMPONENT");
});
test("extension doesn't render without namespace", async ({ page, initTestBed }) => {
await initTestBed(`
<App>
<TestComponent testId="testComp">EXTENSION CONTENT</TestComponent>
</App>`);
await expect(page.getByTestId("testComp")).not.toBeVisible();
});
```
--------------------------------------------------------------------------------
/packages/xmlui-playground/src/playground/ThemeSwitcher.tsx:
--------------------------------------------------------------------------------
```typescript
import { usePlayground } from "../hooks/usePlayground";
import { MdOutlinePalette } from "react-icons/md";
import styles from "./ThemeSwitcher.module.scss";
import classnames from "classnames";
import * as RadixMenu from "@radix-ui/react-dropdown-menu";
import { FiCheck } from "react-icons/fi";
import { activeThemeChanged } from "../state/store";
import { forwardRef } from "react";
import { Button, useTheme } from "xmlui";
export const ThemeSwitcher = forwardRef<HTMLButtonElement>((props, ref) => {
const { appDescription, options, dispatch } = usePlayground();
const { root } = useTheme();
return (
<div>
<RadixMenu.Root modal={false}>
<RadixMenu.Trigger className={styles.button} {...props} asChild ref={ref}>
<Button variant="ghost">
<MdOutlinePalette size={18} />
</Button>
</RadixMenu.Trigger>
<RadixMenu.Portal container={root}>
<RadixMenu.Content className={classnames(styles.RadixMenuContent)}>
<RadixMenu.Label className={styles.RadixMenuLabel}>Theme</RadixMenu.Label>
<RadixMenu.RadioGroup
className={styles.RadixMenuRadioGroup}
value={options.activeTheme}
onValueChange={(value: string) => dispatch(activeThemeChanged(value))}
>
{appDescription.availableThemes &&
appDescription.availableThemes.length > 0 &&
appDescription.availableThemes.map((theme, index) => (
<RadixMenu.RadioItem
className={styles.RadixMenuRadioItem}
value={theme.id}
key={index}
>
{theme.id}
<RadixMenu.ItemIndicator className={styles.RadixMenuItemIndicator}>
<FiCheck />
</RadixMenu.ItemIndicator>
</RadixMenu.RadioItem>
))}
</RadixMenu.RadioGroup>
</RadixMenu.Content>
</RadixMenu.Portal>
</RadixMenu.Root>
</div>
);
});
ThemeSwitcher.displayName = "ThemeSwitcher";
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/svg/admonition_note.svg:
--------------------------------------------------------------------------------
```
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 5.15039H28C28.4694 5.15039 28.8496 5.53056 28.8496 6V26.6445C28.8496 26.8769 28.755 27.0994 28.5869 27.2598L24.0205 31.6152C23.8625 31.766 23.652 31.8496 23.4336 31.8496H7C6.53056 31.8496 6.15039 31.4694 6.15039 31V6C6.15039 5.53056 6.53056 5.15039 7 5.15039Z" fill="#FEFEFE" stroke="#666666" stroke-width="0.3"/>
<path d="M26.0982 12.5596H8.58191V13.083H26.0982V12.5596Z" fill="#666666"/>
<path d="M26.0982 15.3857H8.58191V15.9092H26.0982V15.3857Z" fill="#666666"/>
<path d="M26.0982 18.2109H8.58191V18.7344H26.0982V18.2109Z" fill="#666666"/>
<path d="M26.0982 21.0039H8.58191V21.5273H26.0982V21.0039Z" fill="#666666"/>
<path d="M26.0982 23.8291H8.58191V24.3525H26.0982V23.8291Z" fill="#666666"/>
<path d="M16.8516 27.0947H8.58191V27.6181H16.8516V27.0947Z" fill="#666666"/>
<path d="M23.9056 32.3591L29 27.2646H23.9056V32.3591Z" fill="#F4F2F2"/>
<path d="M21 9H14V10H21V9Z" fill="#535353"/>
<path d="M23.9339 14.783L22.4576 13.9355L21.6053 15.4034L23.0816 16.2508L23.9339 14.783Z" fill="#E0E1E2"/>
<path d="M25.6385 11.8475L24.8948 11.4206C24.7937 11.3625 24.6837 11.3307 24.5715 11.3222C24.5154 11.318 24.4589 11.3196 24.4026 11.3276C24.1208 11.3654 23.8457 11.5452 23.6789 11.8325L22.4576 13.9357L23.9339 14.7831L25.6385 11.8475Z" fill="#E85738"/>
<path d="M24.9268 17.3103L23.0815 16.251L18.1808 24.6911L20.0261 25.7504L24.9268 17.3103Z" fill="#F2C91D"/>
<path d="M25.7791 15.8425L23.9338 14.7832L23.0815 16.251L24.9268 17.3104L25.7791 15.8425Z" fill="#C4C4C4"/>
<path d="M25.7791 15.8427L27.0003 13.7395C27.1671 13.4522 27.1541 13.107 26.9975 12.8174C26.9664 12.7598 26.9289 12.7036 26.8866 12.6514C26.8012 12.5465 26.6944 12.4539 26.568 12.3813L25.6384 11.8477L23.9338 14.7833L25.7791 15.8427Z" fill="#B13218"/>
<path d="M20.0261 25.7505L16.7046 23.8438L16.6607 27.7328L20.0261 25.7505Z" fill="#FDEDD9"/>
<path d="M17.8536 26.95L16.7465 26.3145L16.6608 27.7331L17.8536 26.95Z" fill="#4C4C4C"/>
<path d="M23.0816 16.2508L21.6053 15.4033L16.7046 23.8434L18.1808 24.6909L23.0816 16.2508Z" fill="#FFD93C"/>
</svg>
```
--------------------------------------------------------------------------------
/xmlui/src/components/Items/Items.tsx:
--------------------------------------------------------------------------------
```typescript
import { createComponentRenderer } from "../../components-core/renderers";
import { MemoizedItem } from "../container-helpers";
import { createMetadata, d, dComponent, dInternal } from "../metadata-helpers";
import { Items, defaultProps } from "./ItemsNative";
const COMP = "Items";
export const ItemsMd = createMetadata({
status: "stable",
description:
"`Items` renders data arrays without built-in layout or styling, providing " +
"a lightweight alternative to `List`. Unlike `List`, it provides no " +
"virtualization, grouping, or visual formatting — just pure data iteration.",
props: {
items: dInternal(`This property contains the list of data items this component renders.`),
data: d(
`This property contains the list of data items (obtained from a data source) this component renders.`,
),
reverse: {
description:
"This property reverses the order in which data is mapped to template components.",
type: "boolean",
defaultValue: defaultProps.reverse,
},
itemTemplate: dComponent("The component template to display a single item"),
},
childrenAsTemplate: "itemTemplate",
contextVars: {
$item: dComponent("Current data item being rendered"),
$itemIndex: dComponent(
"Zero-based index of current item",
),
$isFirst: dComponent("Boolean indicating if this is the first item"),
$isLast: dComponent("Boolean indicating if this is the last item"),
},
opaque: true,
});
export const itemsComponentRenderer = createComponentRenderer(COMP, ItemsMd, (rendererContext) => {
const { node, renderChild, extractValue, layoutContext } = rendererContext;
return (
<Items
items={extractValue(node.props.items) || extractValue(node.props.data)}
reverse={extractValue(node.props.reverse)}
renderItem={(contextVars, key) => {
return (
<MemoizedItem
key={key}
contextVars={contextVars}
node={node.props.itemTemplate}
renderChild={renderChild}
layoutContext={layoutContext}
/>
);
}}
/>
);
});
```
--------------------------------------------------------------------------------
/xmlui/tests/parsers/xmlui/transform.test.ts:
--------------------------------------------------------------------------------
```typescript
import { describe, expect, it, assert } from "vitest";
import type { ComponentDef, CompoundComponentDef } from "../../../src/abstractions/ComponentDefs";
import { transformSource } from "./xmlui";
describe("Xmlui transform", () => {
it("Empty code results in error", () => {
try {
transformSource("");
assert.fail("Exception expected");
} catch (err) {
expect(err.toString().includes("T001")).equal(true);
}
});
it("Empty component #1", () => {
const cd = transformSource("<Stack />") as ComponentDef;
expect(cd.type).equal("Stack");
});
it("Empty component #2", () => {
const cd = transformSource("<!-- This is a stack --><Stack />") as ComponentDef;
expect(cd.type).equal("Stack");
});
it("Compound component needs a name #1", () => {
try {
transformSource("<Component><Stack/></Component>");
assert.fail("Exception expected");
} catch (err) {
expect(err.toString().includes("T003")).equal(true);
}
});
it("Compound component needs a name #2", () => {
try {
transformSource("<Component name='haho'><Stack/></Component>");
assert.fail("Exception expected");
} catch (err) {
expect(err.toString().includes("T004")).equal(true);
}
});
it("Compound component needs a component child #1", () => {
const cd = transformSource("<Component name='MyComp'><!-- comment--></Component>") as CompoundComponentDef;
expect((cd.component).type).equal("TextNode");
expect(((cd.component).props as any).value).equal("");
});
it("Compound component needs a component child #2", () => {
const cd = transformSource("<Component name='MyComp'></Component>") as CompoundComponentDef;
expect((cd.component).type).equal("TextNode");
expect(((cd.component).props as any).value).equal("");
});
it("Compound component cannot nest another one", () => {
try {
transformSource("<Component name='MyComp'><Component name='Other'/></Component>");
assert.fail("Exception expected");
} catch (err) {
expect(err.toString().includes("T006")).equal(true);
}
});
});
```
--------------------------------------------------------------------------------
/blog/scripts/download-latest-xmlui.js:
--------------------------------------------------------------------------------
```javascript
#!/usr/bin/env node
const fs = require("fs").promises;
const path = require("path");
const axios = require("axios");
const { sortByVersion, XMLUI_STANDALONE_PATTERN } = require("./utils.js");
const getLatestAssetUrl = async () => {
try {
const per_page = 100;
const max_releases = 100;
const url = `https://api.github.com/repos/xmlui-org/xmlui/releases?per_page=${per_page}`;
const res = await fetch(url);
if (!res.ok) {
throw new Error(`GitHub API error: ${res.status} ${res.statusText}`);
}
/** @type {Array<any>} */
const releases = await res.json();
const xmluiReleases = releases
.filter((r) => r?.tag_name?.startsWith("xmlui@"))
.sort(sortByVersion);
const releasesToProcess = xmluiReleases.slice(0, max_releases);
for (const release of releasesToProcess) {
const xmluiStandaloneAsset = (release.assets || []).find((asset) =>
XMLUI_STANDALONE_PATTERN.test(asset.name),
);
return xmluiStandaloneAsset.browser_download_url;
}
throw new Error("No matching standalone asset found in the latest releases");
} catch (e) {
console.error("Error fetching latest release", e);
throw e;
}
};
async function downloadFile(url) {
try {
const response = await axios.get(url, {
responseType: "arraybuffer",
maxRedirects: 5,
});
return response.data;
} catch (error) {
console.log(error.message);
}
}
(async () => {
try {
const rootDir = path.resolve(__dirname, "..");
const buildPublicDir = path.join(rootDir, "/public/resources/files/for-download/xmlui");
const browser_download_url = await getLatestAssetUrl();
if (!browser_download_url) {
throw new Error("Missing browser_download_url");
}
const filename = "xmlui-standalone.umd.js";
const outputPath = path.join(buildPublicDir, filename);
const fileBuffer = await downloadFile(browser_download_url);
await fs.mkdir(buildPublicDir, { recursive: true });
await fs.writeFile(outputPath, fileBuffer);
} catch (err) {
console.error(err.message);
process.exit(1);
}
})();
```
--------------------------------------------------------------------------------
/docs/scripts/download-latest-xmlui.js:
--------------------------------------------------------------------------------
```javascript
#!/usr/bin/env node
const fs = require("fs").promises;
const path = require("path");
const axios = require("axios");
const { sortByVersion, XMLUI_STANDALONE_PATTERN } = require("./utils.js");
const getLatestAssetUrl = async () => {
try {
const per_page = 100;
const max_releases = 100;
const url = `https://api.github.com/repos/xmlui-org/xmlui/releases?per_page=${per_page}`;
const res = await fetch(url);
if (!res.ok) {
throw new Error(`GitHub API error: ${res.status} ${res.statusText}`);
}
/** @type {Array<any>} */
const releases = await res.json();
const xmluiReleases = releases
.filter((r) => r?.tag_name?.startsWith("xmlui@"))
.sort(sortByVersion);
const releasesToProcess = xmluiReleases.slice(0, max_releases);
for (const release of releasesToProcess) {
const xmluiStandaloneAsset = (release.assets || []).find((asset) =>
XMLUI_STANDALONE_PATTERN.test(asset.name),
);
return xmluiStandaloneAsset.browser_download_url;
}
throw new Error("No matching standalone asset found in the latest releases");
} catch (e) {
console.error("Error fetching latest release", e);
throw e;
}
};
async function downloadFile(url) {
try {
const response = await axios.get(url, {
responseType: "arraybuffer",
maxRedirects: 5,
});
return response.data;
} catch (error) {
console.log(error.message);
}
}
(async () => {
try {
const rootDir = path.resolve(__dirname, "..");
const buildPublicDir = path.join(rootDir, "/public/resources/files/for-download/xmlui");
const browser_download_url = await getLatestAssetUrl();
if (!browser_download_url) {
throw new Error("Missing browser_download_url");
}
const filename = "xmlui-standalone.umd.js";
const outputPath = path.join(buildPublicDir, filename);
const fileBuffer = await downloadFile(browser_download_url);
await fs.mkdir(buildPublicDir, { recursive: true });
await fs.writeFile(outputPath, fileBuffer);
} catch (err) {
console.error(err.message);
process.exit(1);
}
})();
```
--------------------------------------------------------------------------------
/docs/content/components/Pages.md:
--------------------------------------------------------------------------------
```markdown
# Pages [#pages]
`Pages` serves as the routing coordinator within an [App](/components/App), managing which [Page](/components/Page) displays based on the current URL.
**Key features:**
- **Route coordination**: Automatically displays the correct Page based on current URL and navigation
- **Default route handling**: Sets the initial page shown when the application loads
- **Client-side routing**: Manages navigation without page refreshes or server requests
### Using the Pages and Page components [#using-the-pages-and-page-components]
The `Page` component has a property called `url`. This is the route associated with the `Page's` contents.
You can provide a link to this route to display a particular `Page`.
Currently, all navigation is done on the clientside.
No page is fetched from the server, thus the application operates as a [Single Page Application](https://developer.mozilla.org/en-US/docs/Glossary/SPA).
```xmlui-pg copy {3-4, 7, 10} display name="Example: using Pages and Page" height="170px"
<App>
<NavPanel>
<NavLink label="Home" to="/" icon="home"/>
<NavLink label="Account" to="/account" icon="user"/>
</NavPanel>
<Pages>
<Page url="/">
<Text>Hello App!</Text>
</Page>
<Page url="/account">
<Text>This is the account page.</Text>
</Page>
</Pages>
</App>
```
## Properties [#properties]
### `fallbackPath` (default: "/") [#fallbackpath-default-]
The fallback path when the current URL does not match any of the paths of the pages.
```xmlui-pg copy {6-13} display name="Example: fallbackPath" height="170px"
<App>
<NavPanel>
<NavLink label="Not Home" to="/not-home" icon="trash"/>
<NavLink label="Home" to="/home" icon="home"/>
</NavPanel>
<Pages fallbackPath="/home">
<Page url="/not-home">
<Text>This is not home...</Text>
</Page>
<Page url="/home">
<Text>Hello App!</Text>
</Page>
</Pages>
</App>
```
## 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/content/components/Redirect.md:
--------------------------------------------------------------------------------
```markdown
# Redirect [#redirect]
`Redirect` immediately redirects the browser to the URL in its `to` property when it gets visible (its `when` property gets `true`). It works only within [App](/components/App), not externally.
## Using `Redirect` [#using-redirect]
The following app demonstrates two different patterns for using `Redirect`.
1. When you navigate to the "Redirect #1" page, it immediately redirects the app to the "Accounts" page. By default, the `when` property of `Redirect` (and any other component) is "true", so redirection immediately happens.
2. The "Redirect #2" page expects you to click the button before redirecting. The button click sets the `when` property of `Redirect` to true, and redirection happens at that moment.
```xmlui-pg copy {14, 20} display name="Example: providing children" height="170px"
<App>
<NavPanel>
<NavLink to="/">Home</NavLink>
<NavLink to="/accounts">Accounts</NavLink>
<NavLink to="/products">Products</NavLink>
<NavLink to="/redirect1">Redirect #1</NavLink>
<NavLink to="/redirect2">Redirect #2</NavLink>
</NavPanel>
<Pages>
<Page url="/">Home</Page>
<Page url="/accounts">Accounts</Page>
<Page url="/products">Products</Page>
<Page url="/redirect1">
<Redirect to="/accounts" />
Redirecting to Accounts...
</Page>
<Page url="/redirect2">
<Fragment var.clicked="{false}">
<Button label="Click to redirect" onClick="clicked = true"/>
<Redirect when="{clicked}" to="/accounts" />
Redirecting to Accounts...
</Fragment>
</Page>
</Pages>
</App>
```
## Properties [#properties]
### `replace` (default: false) [#replace-default-false]
This boolean property indicates whether the redirect should replace the current history entry or create a new one.
### `to` (default: "") [#to-default-]
This property defines the URL to which this component is about to redirect requests.
## Events [#events]
This component does not have any events.
## Exposed Methods [#exposed-methods]
This component does not expose any methods.
## Styling [#styling]
This component does not have any styles.
```
--------------------------------------------------------------------------------
/xmlui/scripts/generate-docs/build-downloads-map.mjs:
--------------------------------------------------------------------------------
```
import { writeFileSync, statSync } from "fs";
import { basename, extname } from "path";
import { gatherAndRemoveDuplicates, toNormalizedUpperCase, traverseDirectory } from "./utils.mjs";
import { createScopedLogger } from "./logging-standards.mjs";
import { DOWNLOADS_MAP_CONFIG } from "./constants.mjs";
import {
generateExportStatements,
processDuplicatesWithLogging
} from "./pattern-utilities.mjs";
const baseUrlCutoff = DOWNLOADS_MAP_CONFIG.BASE_URL_CUTOFF;
const includedFileExtensions = DOWNLOADS_MAP_CONFIG.INCLUDED_FILE_EXTENSIONS;
/**
* Creates a file containing download link constants for downloadable files.
* @param {string} downloadsFolder The path to the downloads folder (use UNIX delimiters)
* @param {string} outFilePathAndName The path and name of the output file (use UNIX delimiters)
*/
export function buildDownloadsMap(downloadsFolder, outFilePathAndName) {
const logger = createScopedLogger("DownloadsMapBuilder");
logger.operationStart("building downloads map");
const downloads = [];
traverseDirectory({ name: "", path: downloadsFolder }, (item, _) => {
/**
* name: the folder's/file's name (eg. "hello-app-engine")
* path: the path to the root of the given folder from the project root (eg. "src/apps/1_basic/samples/hello-app-engine")
* parent: parent node
* children: children file/folder names
*/
if (statSync(item.path).isDirectory()) {
// Node is a folder
} else {
// Node is a file
if (includedFileExtensions.includes(extname(item.name))) {
const relativePath = item.path.split(baseUrlCutoff)[1];
downloads.push({
id: toNormalizedUpperCase(basename(relativePath, extname(relativePath))),
path: relativePath,
});
}
}
});
const { filtered, duplicates } = gatherAndRemoveDuplicates(downloads);
// Process duplicates with standardized logging
processDuplicatesWithLogging(duplicates, logger, "download IDs and paths");
// Generate export statements using utility
const outStr = generateExportStatements(filtered);
writeFileSync(outFilePathAndName, outStr);
}
```
--------------------------------------------------------------------------------
/packages/xmlui-devtools/src/devtools/utils.ts:
--------------------------------------------------------------------------------
```typescript
/**
* Convert a string to its UTF-8 bytes and compress it.
*
* @param {string} str
* @returns {Promise<Uint8Array>}
*/
async function compress(str: string) {
// Convert the string to a byte stream.
const stream = new Blob([str]).stream();
// Create a compressed stream.
const compressedStream = stream.pipeThrough(
new CompressionStream("gzip")
);
// Convert the string to a byte stream.
const reader = compressedStream.getReader();
const chunks = [];
while (true) {
const { done, value } = await reader.read();
if (done) break;
chunks.push(value);
}
return await concatUint8Arrays(chunks);
}
/**
* Decompress bytes into a UTF-8 string.
*
* @param {Uint8Array} compressedBytes
* @returns {Promise<string>}
*/
async function decompress(compressedBytes: Uint8Array) {
// Convert the bytes to a stream.
const stream = new Blob([compressedBytes]).stream();
// Create a decompressed stream.
const decompressedStream = stream.pipeThrough(
new DecompressionStream("gzip")
);
// Convert the string to a byte stream.
const reader = decompressedStream.getReader();
const chunks = [];
while (true) {
const { done, value } = await reader.read();
if (done) break;
chunks.push(value);
}
const stringBytes = await concatUint8Arrays(chunks);
// Convert the bytes to a string.
return new TextDecoder().decode(stringBytes);
}
/**
* Combine multiple Uint8Arrays into one.
*
* @param {ReadonlyArray<Uint8Array>} uint8arrays
* @returns {Promise<Uint8Array>}
*/
async function concatUint8Arrays(uint8arrays: Uint8Array[]) {
const blob = new Blob(uint8arrays);
const buffer = await blob.arrayBuffer();
return new Uint8Array(buffer);
}
async function createQueryString(target: any) {
// Convert the Uint8Array to a Base64 string.
const compressed = await compress(target);
const base64 = btoa(String.fromCharCode(...compressed));
// Create a query string.
return encodeURIComponent(base64);
}
export { compress, decompress, createQueryString };
```
--------------------------------------------------------------------------------
/xmlui/src/components/Bookmark/Bookmark.tsx:
--------------------------------------------------------------------------------
```typescript
import { createComponentRenderer } from "../../components-core/renderers";
import { createMetadata } from "../metadata-helpers";
import { Bookmark, defaultProps } from "./BookmarkNative";
const COMP = "Bookmark";
export const BookmarkMd = createMetadata({
status: "stable",
description:
"As its name suggests, this component places a bookmark into its parent component's view. The " +
"component has an \`id\` that you can use in links to navigate (scroll to) the bookmark's location.",
opaque: true,
props: {
id: {
description:
"The unique identifier of the bookmark. You can use this identifier in links " +
"to navigate to this component's location. If this identifier is not set, you cannot " +
"programmatically visit this bookmark.",
valueType: "string",
},
level: {
description:
"The level of the bookmark. The level is used to determine the bookmark's " +
"position in the table of contents.",
valueType: "number",
defaultValue: defaultProps.level,
},
title: {
description:
"Defines the text to display the bookmark in the table of contents. If this property is " +
"empty, the text falls back to the value of \`id\`.",
valueType: "string",
},
omitFromToc: {
description: "If true, this bookmark will be excluded from the table of contents.",
valueType: "boolean",
defaultValue: defaultProps.omitFromToc,
},
},
apis: {
scrollIntoView: {
signature: "scrollIntoView()",
description: "Scrolls the bookmark into view.",
},
},
});
export const bookmarkComponentRenderer = createComponentRenderer(
COMP,
BookmarkMd,
(rendererContext) => {
const { node, renderChild, extractValue, layoutContext } = rendererContext;
return (
<Bookmark
uid={extractValue(node.uid)}
level={extractValue(node.props.level)}
title={extractValue(node.props.title)}
omitFromToc={extractValue.asOptionalBoolean(node.props.omitFromToc)}
>
{renderChild(node.children, layoutContext)}
</Bookmark>
);
},
);
```
--------------------------------------------------------------------------------
/xmlui/tests-e2e/api-call-as-extracted-component.spec.ts:
--------------------------------------------------------------------------------
```typescript
import { expect, test } from "../src/testing/fixtures";
import { initApp } from "../src/testing/themed-app-test-helpers";
test("api call as an extracted component get called", async ({ page }) => {
await initApp(page, {
entryPoint: `
<Fragment>
<APICall
id="apiCall"
url="/postUrl"
method="post"
body="{$param}"
/>
<Form onSubmit="(body)=>apiCall.execute(body)">
<FormItem bindTo="name" testId="nameInput"/>
</Form>
</Fragment>
`,
apiInterceptor: {
operations: {
"postUrl": {
url: "/postUrl",
method: "post",
handler: `()=>{
return $requestBody;
}`,
}
},
},
});
const responsePromise = page.waitForResponse((response) => response.url().includes("/postUrl"));
await page.getByTestId("nameInput").getByRole("textbox").fill("John");
await page.locator("button[type='submit']").click();
const response = await responsePromise;
const responseBody = await response.json();
expect(responseBody).toEqual({
name: "John"
});
});
test("api call as an extracted component get called (function reference + default body)", async ({ page }) => {
await initApp(page, {
entryPoint: `
<Fragment>
<APICall
id="apiCall"
url="/postUrl"
method="post"
/>
<Form onSubmit="apiCall.execute">
<FormItem bindTo="name" testId="nameInput"/>
</Form>
</Fragment>
`,
apiInterceptor: {
operations: {
"postUrl": {
url: "/postUrl",
method: "post",
handler: `()=>{
return $requestBody;
}`,
}
},
},
});
const responsePromise = page.waitForResponse((response) => response.url().includes("/postUrl"));
await page.getByTestId("nameInput").getByRole("textbox").fill("John");
await page.locator("button[type='submit']").click();
const response = await responsePromise;
const responseBody = await response.json();
expect(responseBody).toEqual({
name: "John"
});
});
```
--------------------------------------------------------------------------------
/xmlui/src/components/Select/MultiSelectOption.tsx:
--------------------------------------------------------------------------------
```typescript
import { type ForwardedRef, forwardRef, useId, useMemo } from "react";
import type { Option } from "../abstractions";
import { useSelect } from "./SelectContext";
import classnames from "classnames";
import styles from "./Select.module.scss";
import Icon from "../Icon/IconNative";
export const MultiSelectOption = forwardRef<
HTMLDivElement,
Option & { isHighlighted?: boolean; itemIndex?: number }
>(function MultiSelectOption(option, forwardedRef: ForwardedRef<HTMLDivElement>) {
const id = useId();
const {
label,
value,
enabled = true,
keywords,
readOnly,
children,
isHighlighted = false,
itemIndex,
} = option;
const {
value: selectedValue,
onChange,
multiSelect,
setOpen,
setSelectedIndex,
optionRenderer,
} = useSelect();
const selected = useMemo(() => {
return Array.isArray(selectedValue) && multiSelect
? selectedValue.map((v) => String(v)).includes(value)
: String(selectedValue) === String(value);
}, [selectedValue, value, multiSelect]);
const handleClick = () => {
if (readOnly) {
setOpen(false);
return;
}
if (enabled) {
onChange(value);
}
};
return (
<div
id={id}
ref={forwardedRef}
role="option"
aria-disabled={!enabled}
aria-selected={selected}
className={classnames(styles.multiSelectOption, {
[styles.disabledOption]: !enabled,
[styles.highlighted]: isHighlighted,
})}
onMouseDown={(e) => {
e.preventDefault();
e.stopPropagation();
}}
onMouseEnter={() => {
if (itemIndex !== undefined && setSelectedIndex && enabled) {
setSelectedIndex(itemIndex);
}
}}
onClick={handleClick}
data-state={selected ? "checked" : undefined}
>
<div className={styles.multiSelectOptionContent}>
{optionRenderer ? (
optionRenderer({ label, value, enabled, keywords }, selectedValue as any, false)
) : (
<>
{children || label}
{selected && <Icon name="checkmark" />}
</>
)}
</div>
</div>
);
});
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/reportEngineError.ts:
--------------------------------------------------------------------------------
```typescript
import { ScriptParseError, StatementExecutionError, ThrowStatementError } from "./EngineError";
type ErrorInfo = {
error: Error;
helperMessage?: string;
colors?: string[];
};
const appErrors: ErrorInfo[] = [];
/**
* Get all errors collected during the last run
*/
export function getAppErrors(): ErrorInfo[] {
return appErrors;
}
/**
* Use this function to reset the errors raised by the execution engine
*/
export function resetErrors(): void {
appErrors.length = 0;
}
/**
* Use this function to report an error
* @param error Error or string describing the error to report
* @param errorToThrow The error to throw
*/
export function reportEngineError(error: Error | string, errorToThrow?: any): void {
// --- Wrap a string into an error
if (typeof error === "string") {
error = new Error(error);
}
let helperMessage = "";
let colors: string[] = [];
// --- Error-specific helper messages
if (error instanceof ScriptParseError) {
let pos = (error?.position ?? 0) - 1;
if (error.source) {
while (pos < error.source.length - 1 && error.source[pos] === " ") {
pos++;
}
helperMessage += `%c${error.message}%c\n\n`;
helperMessage += `${error.source.substring(0, pos)}%c${error.source[pos]}%c${
error.source.substring(pos + 1) ?? ""
}\n\n`;
}
helperMessage += `%cThe error handler associated with the parsed code did not run.%c`;
colors = ["color: red", "color: inherited", "color: red", "color: inherited", "color: orange", "color: inherited"];
} else if (error instanceof StatementExecutionError) {
helperMessage += `%cError while executing code: ${error.message}%c`;
if (error.source) {
helperMessage += `\n\n${error.source}`;
}
colors = ["color: red", "color: inherited"];
} else if (error instanceof ThrowStatementError) {
helperMessage += `A 'throw' statement executed:\n\n%c${error.message}%c\n\n${error.errorObject}`;
colors = ["color: red", "color: inherited"];
}
if (helperMessage) {
console.log(helperMessage, ...colors);
}
appErrors.push({ error, helperMessage, colors });
throw errorToThrow ?? error;
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/Option/Option.md:
--------------------------------------------------------------------------------
```markdown
%-DESC-START
**Key features:**
- **Value and label separation**: Define what gets stored (value) separately from what users see (label)
- **Automatic fallbacks**: Uses label as value or value as label when only one is provided
- **Custom templates**: Support for rich content via optionTemplate property or child components
- **State management**: Built-in enabled/disabled states for individual options
- **Data integration**: Works seamlessly with Items components for dynamic option lists
## Using `Option`
### With `AutoComplete`
```xmlui-pg copy {4-6} display name="Example: Option in a AutoComplete" height="275px"
<App>
<Text value="Selected ID: {myComp.value}"/>
<AutoComplete id="myComp">
<Option label="John, Smith" value="john" />
<Option label="Jane, Clint" value="jane" disabled="true" />
<Option label="Herbert, Frank" value="herbert" />
</AutoComplete>
</App>
```
### With `Select`
```xmlui-pg copy {4-6} display name="Example: Option in a Select" height="275px"
<App>
<Text value="Selected ID: {mySelect.value}"/>
<Select id="mySelect">
<Option label="John, Smith" value="john" />
<Option label="Jane, Clint" value="jane" />
<Option label="Herbert, Frank" value="herbert" />
</Select>
</App>
```
%-DESC-END
%-PROP-START label
>[!INFO]
> If `Option` does not define any of the `label` or `value` properties, the option will not be rendered.
```xmlui-pg copy display name="Example: Using label" height="275px"
<App>
<Text value="Selected ID: {mySelect.value}"/>
<Select id="mySelect">
<Option />
<Option label="Vanilla" value="van"/>
<Option label="Chocolate" value="choc" />
<Option value="pist" />
</Select>
</App>
```
%-PROP-END
%-PROP-START value
>[!INFO]
> If `Option` does not define any of the `label` or `value` properties, the option will not be rendered.
```xmlui-pg copy display name="Example: Using value" height="275px"
<App>
<Text value="Selected ID: {mySelect.value}"/>
<Select id="mySelect">
<Option />
<Option label="Vanilla" />
<Option label="Chocolate" value="chocolate" />
<Option label="Pistachio" value="pistachio" />
</Select>
</App>
```
%-PROP-END
```
--------------------------------------------------------------------------------
/docs/public/pages/xmlui-charts/BarChart.md:
--------------------------------------------------------------------------------
```markdown
# BarChart [#barchart]
>[!WARNING]
> This component is in an **experimental** state; you can use it in your app. However, we may modify it, and it may even have breaking changes in the future.The `BarChart` component represents a bar chart.Accepts a `LabelLst` component as a child to parametrize display labels.
## Properties
### `data`
This property is used to provide the component with data to display.The data needs to be an array of objects.
### `dataKeys`
This property specifies the keys in the data objects that should be used for rendering the bars.E.g. 'id' or 'key'.
### `hideTickX (default: false)`
Controls the visibility of the X-axis ticks. If set to `true`, tick labels on the X-axis will be hidden.
### `hideTickY (default: false)`
Controls the visibility of the Y-axis ticks. If set to `true`, tick labels on the Y-axis will be hidden.
### `hideX (default: false)`
Determines whether the X-axis should be hidden. If set to `true`, the axis will not be rendered.
### `hideY (default: false)`
Determines whether the Y-axis should be hidden. If set to `true`, the axis will not be rendered.
### `layout (default: "vertical")`
This property determines the orientation of the bar chart. The `vertical` variant specifies the horizontal axis as the primary and lays out the bars from left to right. The `horizontal` variant specifies the vertical axis as the primary and has the bars spread from top to bottom.
Available values: `horizontal`, `vertical` **(default)**
### `nameKey`
Specifies the key in the data objects that will be used to label the different data series.
### `showLegend (default: false)`
Determines whether the legend should be displayed.
### `stacked (default: false)`
This property determines how the bars are laid out.If set to `true`, bars with the same category will be stacked on top of each other rather than placed side by side.
### `tickFormatter`
A function that formats the axis tick labels. It receives a tick value and returns a formatted string.
## Events
This component does not have any events.
## Exposed Methods
This component does not expose any methods.
## Styling
This component does not have any styles.
```
--------------------------------------------------------------------------------
/docs/content/components/Logo.md:
--------------------------------------------------------------------------------
```markdown
# Logo [#logo]
`Logo` displays your application's brand symbol by automatically loading logo images defined in the app manifest. While logos are typically configured using App-level properties (`logo`, `logo-dark`), this component provides direct control when you need custom logo placement or templating.
Most apps use `logo="path/to/logo.svg"` on the App component rather than using `<Logo>` directly. Use this component when you need custom logo positioning or want to combine logos with other elements in a `logoTemplate`.
## Using Logo [#using-logo]
The framework checks the application manifest for a logo resource (SVG file).
If found, it loads and displays it in the Logo component.
This is a sample manifest that shows a logo definition:
```json copy {5}
{
"name": "Tutorial",
"version": "0.0.1",
"resources": {
"logo": "resources/xmlui-logo.svg",
"favicon": "resources/favicon.ico"
}
}
```
In the following example, you can see a custom logo definition in the `AppHeader` via templating.
There is a `Heading` with the title text "MyApp" before the logo.
It also uses the `Logo` component within the template definition:
```xmlui-pg
---app copy display name="Example: using Logo" {6} height="200px"
<App layout="horizontal">
<AppHeader>
<property name="logoTemplate">
<Fragment>
<Heading level="h2" value="MyApp"/>
<Logo/>
</Fragment>
</property>
</AppHeader>
<NavPanel>
<NavLink label="Home" to="/" icon="home"/>
</NavPanel>
<Pages fallbackPath="/">
<Page url="/">
<CHStack>
(Sample content)
</CHStack>
</Page>
</Pages>
</App>
---desc
The markup displays the app's logo:
```
## Properties [#properties]
### `alt` (default: "Logo") [#alt-default-logo]
Alternative text for the logo image for accessibility.
### `inline` (default: false) [#inline-default-false]
When set to true, the image will be displayed as an inline element instead of a block element.
## Events [#events]
This component does not have any events.
## Exposed Methods [#exposed-methods]
This component does not expose any methods.
## Styling [#styling]
This component does not have any styles.
```
--------------------------------------------------------------------------------
/xmlui/src/components/NestedApp/logo.svg:
--------------------------------------------------------------------------------
```
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.04674 19.3954C8.2739 19.3954 7.60226 19.2265 7.03199 18.8887C6.47443 18.5384 6.0435 18.0505 5.73938 17.425C5.43526 16.7869 5.2832 16.0362 5.2832 15.173V9.89961C5.2832 9.7745 5.32771 9.66815 5.41637 9.58059C5.50502 9.493 5.61275 9.44922 5.73938 9.44922H7.41222C7.55157 9.44922 7.6593 9.493 7.73524 9.58059C7.8239 9.66815 7.86841 9.7745 7.86841 9.89961V15.0604C7.86841 16.6117 8.55895 17.3874 9.94021 17.3874C10.5991 17.3874 11.1187 17.181 11.4988 16.7681C11.8917 16.3553 12.0881 15.786 12.0881 15.0604V9.89961C12.0881 9.7745 12.1325 9.66815 12.2211 9.58059C12.3098 9.493 12.4175 9.44922 12.5443 9.44922H14.217C14.3436 9.44922 14.4513 9.493 14.54 9.58059C14.6288 9.66815 14.6732 9.7745 14.6732 9.89961V18.7574C14.6732 18.8825 14.6288 18.9888 14.54 19.0764C14.4513 19.164 14.3436 19.2078 14.217 19.2078H12.6773C12.538 19.2078 12.4239 19.164 12.3352 19.0764C12.2591 18.9888 12.2211 18.8825 12.2211 18.7574V17.988C11.879 18.4258 11.4545 18.7699 10.9476 19.0201C10.4407 19.2703 9.80704 19.3954 9.04674 19.3954Z" fill="#3367CC"/>
<path d="M17.6397 19.2104C17.5129 19.2104 17.4052 19.1666 17.3165 19.079C17.2279 18.9914 17.1835 18.8851 17.1835 18.76V9.90221C17.1835 9.7771 17.2279 9.67075 17.3165 9.58319C17.4052 9.4956 17.5129 9.45182 17.6397 9.45182H19.2174C19.3567 9.45182 19.4644 9.4956 19.5404 9.58319C19.6292 9.67075 19.6736 9.7771 19.6736 9.90221V18.76C19.6736 18.8851 19.6292 18.9914 19.5404 19.079C19.4644 19.1666 19.3567 19.2104 19.2174 19.2104H17.6397ZM17.5636 7.8379C17.4243 7.8379 17.3102 7.80038 17.2215 7.72531C17.1454 7.63773 17.1074 7.52514 17.1074 7.38751V6.03633C17.1074 5.91122 17.1454 5.80487 17.2215 5.71731C17.3102 5.62972 17.4243 5.58594 17.5636 5.58594H19.2933C19.4327 5.58594 19.5467 5.62972 19.6354 5.71731C19.7242 5.80487 19.7686 5.91122 19.7686 6.03633V7.38751C19.7686 7.52514 19.7242 7.63773 19.6354 7.72531C19.5467 7.80038 19.4327 7.8379 19.2933 7.8379H17.5636Z" fill="#3367CC"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.0215 2.81748H2.53486V23.044H23.0215V2.81748ZM2.18164 2.46875V23.3927H23.3747V2.46875H2.18164Z" fill="#3367CC"/>
</svg>
```
--------------------------------------------------------------------------------
/tools/create-app/templates/index.ts:
--------------------------------------------------------------------------------
```typescript
import { install } from "../helpers/install";
import { copy } from "../helpers/copy";
import os from "os";
import fs from "fs/promises";
import path from "path";
import { bold, cyan } from "picocolors";
import pkg from '../package.json'
import type { InstallTemplateArgs } from "./types";
/**
* Install a UI Engine internal template to a given `root` directory.
*/
export const installTemplate = async ({ appName, root, packageManager, template, useGit }: InstallTemplateArgs) => {
console.log(bold(`Using ${packageManager}.`));
/**
* Copy the template files to the target directory.
*/
console.log("\nInitializing project with template:", template, "\n");
const templatePath = path.join(__dirname, template, "ts");
const copySource = ["**"];
if (!useGit) {
copySource.push("!gitignore");
}
await copy(copySource, root, {
parents: true,
cwd: templatePath,
rename(name) {
switch (name) {
case "gitignore":
case "eslintrc.json": {
return `.${name}`;
}
// README.md is ignored by webpack-asset-relocator-loader used by ncc:
// https://github.com/vercel/webpack-asset-relocator-loader/blob/e9308683d47ff507253e37c9bcbb99474603192b/src/asset-relocator.js#L227
case "README-template.md": {
return "README.md";
}
default: {
return name;
}
}
},
});
/** Create a package.json for the new project and write it to disk. */
const packageJson: any = {
name: appName,
version: "0.1.0",
private: true,
scripts: {
start: "xmlui start",
build: "xmlui build",
preview: "xmlui preview",
"build-prod": "npm run build -- --prod",
"release-ci": "npm run build-prod && xmlui zip-dist",
},
/**
* Default dependencies.
*/
dependencies: {
"xmlui": pkg.version,
},
};
await fs.writeFile(path.join(root, "package.json"), JSON.stringify(packageJson, null, 2) + os.EOL);
console.log("\nInstalling dependencies:");
for (const dependency in packageJson.dependencies) console.log(`- ${cyan(dependency)}`);
console.log();
await install(packageManager);
};
export * from "./types";
```
--------------------------------------------------------------------------------
/xmlui/tests/components-core/utils/LruCache.test.ts:
--------------------------------------------------------------------------------
```typescript
import { beforeEach, describe, expect, it } from "vitest";
import { LRUCache } from "../../../src/components-core/utils/LruCache";
describe("LRUCache", () => {
let lru: LRUCache;
beforeEach(() => {
lru = new LRUCache(5);
});
it.skip("puts most recently added item to front of list", () => {
// note: can't test using lru.get() as that will mess up ordering
// reach into the internals directly instead
lru.set("nick", "nick val 1");
expect(lru!.list!.head!.value).to.equal("nick val 1");
lru.set("char", "char val 1");
expect(lru.list!.head!.value).to.equal("char val 1");
lru.set("nick", "nick val 2");
expect(lru.list!.head!.value).to.equal("nick val 2");
});
it("puts most recently accessed item to front of list", () => {
// note: can't test using lru.get() as that will mess up ordering
// reach into the internals directly instead
lru.set("nick", "nick val 1");
lru.set("char", "char val 1");
lru.set("brow", "brow val 1");
lru.set("lane", "lane val 1");
lru.get("nick");
expect(lru.list!.head!.value).to.equal("nick val 1");
lru.get("char");
expect(lru.list!.head!.value).to.equal("char val 1");
lru.get("lane");
expect(lru.list!.head!.value).to.equal("lane val 1");
lru.get("brow");
expect(lru.list!.head!.value).to.equal("brow val 1");
lru.get("brow");
expect(lru.list!.head!.value).to.equal("brow val 1");
});
it.skip("keeps track of size correctly", () => {
lru.set("nick", "nick val 1");
expect(lru.list.size).to.equal(1);
lru.set("char", "char val 1");
expect(lru.list.size).to.equal(2);
lru.set("char", "char val 2");
expect(lru.list.size).to.equal(2);
lru.set("bowie", "bowie val 1");
lru.set("david", "david val 1");
lru.set("dobrick", "dobrick val 1");
expect(lru.list.size).to.equal(5);
});
it("evicts the last item in list when max size is reached", () => {
lru.set("nick", 1);
lru.set("bob", 2);
lru.set("dylan", 3);
lru.set("jonny", 4);
lru.set("depth", 5);
lru.set("shtick", 6);
expect(lru.get("nick")).to.equal(undefined);
expect(lru.get("bob")).not.to.equal(undefined);
});
});
```
--------------------------------------------------------------------------------
/xmlui/src/components/Tabs/TabItem.tsx:
--------------------------------------------------------------------------------
```typescript
import { createComponentRenderer } from "../../components-core/renderers";
import { TabItemComponent } from "./TabItemNative";
import { createMetadata, d, dComponent, dLabel } from "../metadata-helpers";
import { MemoizedItem } from "../container-helpers";
const COMP = "TabItem";
export const TabItemMd = createMetadata({
status: "stable",
description:
"`TabItem` defines individual tabs within a [Tabs](/components/Tabs) component, " +
"providing both the tab header label and the content that displays when the tab " +
"is selected. As a non-visual structural component, it serves as a container that " +
"organizes content into distinct, switchable sections.",
docFolder: "Tabs",
props: {
label: dLabel(),
headerTemplate: dComponent("This property allows the customization of the TabItem header."),
},
events: {
activated: {
description: "This event is triggered when the tab is activated.",
},
},
contextVars: {
$header: d(
"This context value represents the header context with props: id (optional), index, label, isActive.",
),
},
});
export const tabItemComponentRenderer = createComponentRenderer(
COMP,
TabItemMd,
(rendererContext) => {
const { node, renderChild, extractValue, lookupEventHandler } = rendererContext;
return (
<TabItemComponent
id={extractValue(node.uid)}
label={extractValue(node.props.label)}
activated={lookupEventHandler("activated")}
headerRenderer={
node.props.headerTemplate
? (item) => {
return (
<MemoizedItem
node={node.props.headerTemplate}
itemKey="$header"
contextVars={{
$header: {
id: item.id,
index: item.index,
label: item.label,
isActive: item.isActive,
},
}}
renderChild={renderChild}
/>
);
}
: undefined
}
>
{renderChild(node.children)}
</TabItemComponent>
);
},
);
```
--------------------------------------------------------------------------------
/xmlui/src/parsers/scripting/ParserError.ts:
--------------------------------------------------------------------------------
```typescript
// The common root class of all parser error objects
export class ParserError extends Error {
constructor(message: string, public code?: string) {
super(message);
// --- Set the prototype explicitly.
Object.setPrototypeOf(this, ParserError.prototype);
}
}
// Describes the structure of error messages
export interface ParserErrorMessage {
code: ErrorCodes;
text: string;
position?: number;
line?: number;
column?: number;
}
export type ErrorCodes =
| "W001"
| "W002"
| "W003"
| "W004"
| "W005"
| "W006"
| "W007"
| "W008"
| "W009"
| "W010"
| "W011"
| "W012"
| "W013"
| "W014"
| "W015"
| "W016"
| "W017"
| "W018"
| "W019"
| "W020"
| "W021"
| "W022"
| "W023"
| "W024"
| "W025"
| "W026"
| "W027"
| "W028"
| "W029"
| "W030"
| "W031";
// Error message type description
type ErrorText = Record<string, string>;
// The error messages of error codes
export const errorMessages: ErrorText = {
W001: "An expression expected",
W002: "Unexpected token: {0}",
W003: "An identifier expected",
W004: "'}' expected",
W005: "']' expected",
W006: "')' expected",
W007: "Invalid object property name type",
W008: "':' expected",
W009: "'=' expected",
W010: "Invalid argument list",
W011: "For loop variable must be initialized",
W012: "'{' expected",
W013: "'catch' or 'finally' expected",
W014: "'(' or expected",
W015: "'case' or 'default' expected",
W016: "'default' case can be used only once within a switch statement",
W017: "Invalid sequence expression",
W018: "Invalid object literal",
W019: "Identifier '{0}' is already imported",
W020: "Function '{0}' is already defined in the module",
W021: "'{0}' is already exported from the module",
W022: "Cannot find module '{0}'",
W023: "Module '{0}' does not export '{1}'",
W024: "'function' expected",
W025: "'from' expected",
W026: "A string literal expected",
W027: "Cannot declare var ('{0}') in an imported module",
W028: "Invalid statement used in a module.",
W029: "An imported module can contain only exported functions",
W030: "Nested declarations cannot be exported",
W031: "An identifier in a declaration cannot start with '$'"
};
```
--------------------------------------------------------------------------------
/docs/content/components/Timer.md:
--------------------------------------------------------------------------------
```markdown
# Timer [#timer]
`Timer` is a non-visual component that fires events at regular intervals. It can be enabled or disabled and ensures that the timer event handler completes before firing the next event.
## Using Timer [#using-timer]
The following sample demonstrates many aspects of the `Timer` component. Use the switches and the buttons to observe how the component works.
```xmlui-pg display copy name="Using Timer"
<App var.count="{0}">
<Text>
Count: {count} | Timer is {timer.isPaused() ? 'paused' : 'running'}
</Text>
<Timer
id="timer"
initialDelay="2000"
interval="200"
onTick="count++;"
enabled="{enable.value}"
once="{once.value}" />
<Switch id="enable" label="Enable Timer" initialValue="true" />
<Switch id="once" label="Run Once" initialValue="{false}" />
<HStack>
<Button onClick="timer.pause()" enabled="{!timer.isPaused()}">
Pause
</Button>
<Button onClick="timer.resume()" enabled="{timer.isPaused()}">
Resume
</Button>
</HStack>
</App>
```
## Properties [#properties]
### `enabled` (default: true) [#enabled-default-true]
Whether the timer is enabled and should fire events.
### `initialDelay` (default: 0) [#initialdelay-default-0]
The delay in milliseconds before the first timer event.
### `interval` (default: 1000) [#interval-default-1000]
The interval in milliseconds between timer events.
### `once` (default: false) [#once-default-false]
Whether the timer should stop after firing its first tick event.
## Events [#events]
### `tick` [#tick]
This event is triggered at each interval when the ${COMP} is enabled.
## Exposed Methods [#exposed-methods]
### `isPaused` [#ispaused]
Returns whether the timer is currently paused.
**Signature**: `isPaused(): boolean`
### `isRunning` [#isrunning]
Returns whether the timer is currently running (enabled and not paused).
**Signature**: `isRunning(): boolean`
### `pause` [#pause]
Pauses the timer. The timer can be resumed later from where it left off.
**Signature**: `pause()`
### `resume` [#resume]
Resumes a paused timer. If the timer is not paused, this method has no effect.
**Signature**: `resume()`
## Styling [#styling]
This component does not have any styles.
```
--------------------------------------------------------------------------------
/xmlui/playwright.config.ts:
--------------------------------------------------------------------------------
```typescript
import { defineConfig, devices } from "@playwright/test";
/**
* Read environment variables from file.
* https://github.com/motdotla/dotenv
*/
// import dotenv from 'dotenv';
// import path from 'path';
// dotenv.config({ path: path.resolve(__dirname, '.env') });
/**
* See https://playwright.dev/docs/test-configuration.
*/
const port = 3211;
export default defineConfig({
/* Run tests in files in parallel */
fullyParallel: true,
testMatch: "*.spec.ts",
/* Fail the build on CI if you accidentally left test.only in the source code. */
forbidOnly: !!process.env.CI,
/*
Default Github job runners have 4 cores (on public repos, 2 on privates)
https://docs.github.com/en/actions/using-github-hosted-runners/using-github-hosted-runners/about-github-hosted-runners#standard-github-hosted-runners-for-public-repositories */
workers: undefined,
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
reporter: process.env.CI ? [["github"], ["html"]] : [["html"]],
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
use: {
...devices["Desktop Chrome"],
channel: "chromium",
/* Base URL to use in actions like `await page.goto('/')`. */
baseURL: `http://localhost:${port}`,
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
trace: "on-first-retry",
serviceWorkers: "allow",
/* Grants specified permissions to the browser context. */
permissions: ["clipboard-read", "clipboard-write"],
},
/* Global timeout settings */
timeout: process.env.CI ? 5000 : 10000,
expect: {
timeout: 5000, // 5 seconds for expect assertions
},
retries: process.env.CI ? 2 : 1,
/* Configure projects for major browsers */
projects: [
{
name: "non-smoke",
grepInvert: /@smoke/,
},
{
name: "smoke",
grep: /@smoke/,
},
],
/* Run your local dev server before starting the tests */
webServer: {
command: process.env.CI
? `npx serve src/testing/infrastructure/dist -p ${port}`
: `npm run start-test-bed -- --port ${port}`,
timeout: 50 * 1000,
port,
reuseExistingServer: !process.env.CI,
},
});
```
--------------------------------------------------------------------------------
/packages/xmlui-website-blocks/src/ScrollToTop/ScrollToTop.module.scss:
--------------------------------------------------------------------------------
```scss
@use "xmlui/themes.scss" as t;
// --- This code snippet is required to collect the theme variables used in this module
$themeVars: ();
@function createThemeVar($componentVariable) {
$themeVars: t.appendThemeVar($themeVars, $componentVariable) !global;
@return t.getThemeVar($themeVars, $componentVariable);
}
$component: "ScrollToTop";
$backgroundColor-ScrollToTop: createThemeVar("backgroundColor-#{$component}");
$borderColor-ScrollToTop: createThemeVar("borderColor-#{$component}");
$color-ScrollToTop: createThemeVar("color-#{$component}");
$size-ScrollToTop: createThemeVar("size-#{$component}");
$borderRadius-ScrollToTop: createThemeVar("borderRadius-#{$component}");
$shadow-ScrollToTop: createThemeVar("shadow-#{$component}");
$bottom-ScrollToTop: createThemeVar("bottom-#{$component}");
$horizontalSpacing-ScrollToTop: createThemeVar("horizontalSpacing-#{$component}");
$zIndex-ScrollToTop: createThemeVar("zIndex-#{$component}");
@layer components {
.scrollToTop {
position: fixed;
bottom: $bottom-ScrollToTop;
width: $size-ScrollToTop;
height: $size-ScrollToTop;
background-color: $backgroundColor-ScrollToTop;
border: 1px solid $borderColor-ScrollToTop;
border-radius: $borderRadius-ScrollToTop;
box-shadow: $shadow-ScrollToTop;
cursor: pointer;
z-index: $zIndex-ScrollToTop;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
color: $color-ScrollToTop;
&:hover {
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
&:active {
transform: translateY(0);
}
&:focus {
outline: 2px solid $backgroundColor-ScrollToTop;
outline-offset: 2px;
}
&.positionStart {
left: $horizontalSpacing-ScrollToTop;
}
&.positionCenter {
left: 50%;
transform: translateX(-50%);
&:hover {
transform: translateX(-50%) translateY(-2px);
}
&:active {
transform: translateX(-50%) translateY(0);
}
}
&.positionEnd {
right: $horizontalSpacing-ScrollToTop;
}
}
}
// --- We export the theme variables to add them to the component renderer
:export {
themeVars: t.json-stringify($themeVars);
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/Markdown/parse-binding-expr.ts:
--------------------------------------------------------------------------------
```typescript
import type { ValueExtractor } from "../../abstractions/RendererDefs";
import { T_ARROW_EXPRESSION } from "../../components-core/script-runner/ScriptingSourceTree";
/**
* Finds and evaluates given binding expressions in markdown text.
* The binding expressions are of the form `@{...}`.
* @param text The markdown text
* @param extractValue The function to resolve binding expressions
* @returns the parsed text with resolved binding expressions
*/
export function parseBindingExpression(text: string, extractValue: ValueExtractor) {
// Remove empty @{} expressions first
text = text.replaceAll(/(?<!\\)\@\{\s*\}/g, "");
// The (?<!\\) is a "negative lookbehind" in regex that ensures that
// if escaping the @{...} expression like this: \@{...}, we don't match it
const regex = /(?<!\\)\@\{((?:[^{}]|\{(?:[^{}]|\{(?:[^{}]|\{[^{}]*\})*\})*\})*)\}/g;
const result = text.replace(regex, (_, expr) => {
const extracted = extractValue(`{${expr}}`);
const resultExpr = mapByType(extracted);
// The result expression might be an object, in that case we stringify it here,
// at the last step, so that there are no unnecessary apostrophes
return typeof resultExpr === "object" && resultExpr !== null
? JSON.stringify(resultExpr)
: resultExpr;
});
return result;
// ---
function mapByType(extracted: unknown) {
if (extracted === null) {
return null;
} else if (extracted === undefined || typeof extracted === "undefined") {
return undefined;
} else if (typeof extracted === "object") {
const arrowFuncResult = parseArrowFunc(extracted as Record<string, unknown>);
if (arrowFuncResult) {
return arrowFuncResult;
}
if (Array.isArray(extracted)) {
return extracted;
}
return Object.fromEntries(
Object.entries(extracted).map(([key, value]) => {
return [key, mapByType(value)];
}),
);
} else {
return extracted;
}
}
function parseArrowFunc(extracted: Record<string, unknown>): string {
if (
extracted.hasOwnProperty("type") &&
extracted.type === T_ARROW_EXPRESSION &&
extracted?._ARROW_EXPR_
) {
return "[xmlui function]";
}
return "";
}
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/Bookmark/Bookmark.md:
--------------------------------------------------------------------------------
```markdown
%-DESC-START
> [!INFO]
> Pop out the examples in this article to view them on full screen.
## Using Bookmark
Use `Bookmark` as a standalone tag or wrap children with it.
> [!INFO]
> We suggest using a standalone bookmark, which does not increase the nesting depth of the source code, whenever possible. Note that a standalone bookmark will act as an additional child for its parent component, which can affect the layout (a `Stack` puts `gap`s between `Bookmark`s too).
### Standalone
Add an `id` property to `Bookmark` instances and use the same identifiers in links with hash tags, as the following example shows:
```xmlui-pg copy display height="320px" name="Example: standalone Bookmark"
---app display copy
<App layout="vertical-full-header" scrollWholePage="false">
<NavPanel>
<Link to="/#red">Jump to red</Link>
<Link to="/#green">Jump to green</Link>
<Link to="/#blue">Jump to blue</Link>
</NavPanel>
<Pages>
<Page url="/">
<Bookmark id="red">
<VStack height="200px" backgroundColor="red" />
</Bookmark>
<Bookmark id="green">
<VStack height="200px" backgroundColor="green" />
</Bookmark>
<Bookmark id="blue">
<VStack height="200px" backgroundColor="blue" />
</Bookmark>
</Page>
</Pages>
</App>
---desc
Clicking a link scrolls the bookmarked component adjacent to the corresponding `Bookmark` tag into the view:
```
### With nested children
Alternatively, you can nest components into `Bookmark`:
```xmlui-pg copy display height="320px" name="Example: Bookmark with nested children"
---app display copy
<App layout="vertical-full-header" scrollWholePage="false">
<NavPanel>
<Link to="/#red">Jump to red</Link>
<Link to="/#green">Jump to green</Link>
<Link to="/#blue">Jump to blue</Link>
</NavPanel>
<Pages>
<Page url="/">
<Bookmark id="red">
<VStack height="200px" backgroundColor="red" />
</Bookmark>
<Bookmark id="green">
<VStack height="200px" backgroundColor="green" />
</Bookmark>
<Bookmark id="blue">
<VStack height="200px" backgroundColor="blue" />
</Bookmark>
</Page>
</Pages>
</App>
---desc
You can try; this example works like the previous one:
```
%-DESC-END
```
--------------------------------------------------------------------------------
/xmlui/src/components/TreeDisplay/TreeDisplay.tsx:
--------------------------------------------------------------------------------
```typescript
import styles from "./TreeDisplay.module.scss";
import { createComponentRenderer } from "../../components-core/renderers";
import { parseScssVar } from "../../components-core/theming/themeVars";
import { TreeDisplay, defaultProps } from "./TreeDisplayNative";
import { createMetadata } from "../metadata-helpers";
const COMP = "TreeDisplay";
export const TreeDisplayMd = createMetadata({
status: "stable",
description:
`The \`${COMP}\` component displays hierarchical data in a tree structure. ` +
`It accepts an indented text format where each line is an entry in the tree, and ` +
`the number of leading spaces determines the nesting level. The component renders ` +
`the tree with SVG lines and continuous vertical guides to clearly visualize parent-child relationships in the hierarchy.`,
props: {
content: {
description: "The indented text content to display as a tree structure. Each level of indentation (using spaces) represents one level in the tree hierarchy.",
valueType: "string",
defaultValue: defaultProps.content,
},
itemHeight: {
description: "The height of each tree item in pixels.",
valueType: "number",
defaultValue: defaultProps.itemHeight,
},
},
themeVars: parseScssVar(styles.themeVars),
defaultThemeVars: {
[`backgroundColor-${COMP}`]: "$backgroundColor-CodeBlock",
[`borderRadius-${COMP}`]: "8px",
[`padding-${COMP}`]: "$space-4",
[`paddingLeft-${COMP}`]: "$space-2",
[`fontSize-${COMP}`]: "$fontSize-code",
[`fontWeight-${COMP}`]: "$fontWeight-normal",
[`fontFamily-${COMP}`]: "$fontFamily-monospace",
[`color-${COMP}`]: "$textColor-primary",
[`color-connect-${COMP}`]: "$color-surface-200",
[`boxShadow-${COMP}`]: "none",
[`border-${COMP}`]: "0.5px solid $borderColor",
},
});
export const treeDisplayComponentRenderer = createComponentRenderer(
COMP,
TreeDisplayMd,
({ node, extractValue, renderChild, className }) => {
return (
<TreeDisplay
className={className}
content={extractValue.asOptionalString(node.props.content)}
itemHeight={extractValue.asOptionalNumber(node.props.itemHeight)}
>
{renderChild(node.children)}
</TreeDisplay>
);
},
);
```
--------------------------------------------------------------------------------
/xmlui/tests/parsers/scripting/parser-errors.test.ts:
--------------------------------------------------------------------------------
```typescript
import { describe, it } from "vitest";
import { Parser } from "../../../src/parsers/scripting/Parser";
describe("Parser - error cases", () => {
const issueCases = [
{ src: "2+3:", issue: "eof" },
{ src: "a ??", issue: "W001" },
{ src: "(a+b) ||", issue: "W001" },
{ src: "!a &&", issue: "W001" },
{ src: "(a+b) |", issue: "W001" },
{ src: "!a &", issue: "W001" },
{ src: "(a+b) ^", issue: "W001" },
{ src: "!a ==", issue: "W001" },
{ src: "(a+b) !=", issue: "W001" },
{ src: "(a+b) <", issue: "W001" },
{ src: "(a+b) <=", issue: "W001" },
{ src: "(a+b) >", issue: "W001" },
{ src: "(a+b) >=", issue: "W001" },
{ src: "(a+b) >>", issue: "W001" },
{ src: "(a+b) <<", issue: "W001" },
{ src: "(a+b) >>>", issue: "W001" },
{ src: "(a+b) +", issue: "W001" },
{ src: "(a+b) -", issue: "W001" },
{ src: "(a+b) *", issue: "W001" },
{ src: "(a+b) /", issue: "W001" },
{ src: "(a+b) %", issue: "W001" },
{ src: "func(", issue: "W001" },
{ src: "obj.", issue: "W001" },
{ src: "obj[", issue: "W001" },
{ src: "dummy.", issue: "W003" },
{ src: "{", issue: "W004" },
{ src: "{ abc: 123,", issue: "W004" },
{ src: "{ abc: 123", issue: "W004" },
{ src: "obj[abc", issue: "W005" },
{ src: "func(", issue: "W006" },
{ src: "func(123", issue: "W006" },
{ src: "func(123,", issue: "W006" },
{ src: "func(123, abs", issue: "W006" },
{ src: "{ true: 123 }", issue: "W007" },
{ src: "{ [a: 123 }", issue: "W005" },
{ src: "{ {a: 12}: 123 }", issue: "W007" },
{ src: "{ null: 123 }", issue: "W007" },
{ src: "{ a+b: 123 }", issue: "W007" },
{ src: "{ abc", issue: "W008" },
{ src: "{ abc 123", issue: "W008" },
];
issueCases.forEach((c) => {
it(`Issue: ${c.src}/${c.issue}`, () => {
// --- Arrange
const wParser = new Parser(c.src);
// --- Act
try {
wParser.parseExpr();
if (wParser.isEof) {
if (c.issue === "eof") {
return;
}
} else {
if (c.issue === "eof") {
throw new Error("EOF issue expected");
}
}
} catch (err) {
return;
}
throw new Error("Error expected");
});
});
});
```