This is page 54 of 143. Use http://codebase.md/xmlui-org/xmlui/xmlui/mockApiDef.js?lines=false&page={x} to view the full context.
# Directory Structure
```
├── .changeset
│ ├── config.json
│ └── cyan-tools-design.md
├── .eslintrc.cjs
├── .github
│ ├── build-checklist.png
│ ├── ISSUE_TEMPLATE
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ └── workflows
│ ├── deploy-blog-optimized.yml
│ ├── deploy-blog-swa.yml
│ ├── deploy-blog.yml
│ ├── deploy-docs-optimized.yml
│ ├── deploy-docs-swa.yml
│ ├── deploy-docs.yml
│ ├── prepare-versions.yml
│ ├── release-packages.yml
│ ├── run-all-tests.yml
│ └── run-smoke-tests.yml
├── .gitignore
├── .prettierrc.js
├── .vscode
│ ├── launch.json
│ └── settings.json
├── blog
│ ├── .gitignore
│ ├── .gitkeep
│ ├── CHANGELOG.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── blog
│ │ │ ├── images
│ │ │ │ ├── an-advanced-codefence.gif
│ │ │ │ ├── an-advanced-codefence.mp4
│ │ │ │ ├── blog-page-component.png
│ │ │ │ ├── blog-scrabble.png
│ │ │ │ ├── codefence-runner.png
│ │ │ │ ├── integrated-blog-search.png
│ │ │ │ ├── lorem-ipsum.png
│ │ │ │ ├── playground-checkbox-source.png
│ │ │ │ ├── playground.png
│ │ │ │ ├── use-xmlui-mcp-to-find-a-howto.png
│ │ │ │ └── xmlui-demo-gallery.png
│ │ │ ├── introducing-xmlui.md
│ │ │ ├── lorem-ipsum.md
│ │ │ ├── newest-post.md
│ │ │ ├── older-post.md
│ │ │ ├── xmlui-playground.md
│ │ │ └── xmlui-powered-blog.md
│ │ ├── mockServiceWorker.js
│ │ ├── resources
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ └── for-download
│ │ │ │ └── xmlui
│ │ │ │ └── xmlui-standalone.umd.js
│ │ │ ├── github.svg
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ ├── rss.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ ├── staticwebapp.config.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ └── PageNotFound.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── blog-theme.ts
│ └── tsconfig.json
├── CONTRIBUTING.md
├── docs
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── ComponentRefLinks.txt
│ ├── content
│ │ ├── _meta.json
│ │ ├── components
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── APICall.md
│ │ │ ├── App.md
│ │ │ ├── AppHeader.md
│ │ │ ├── AppState.md
│ │ │ ├── AutoComplete.md
│ │ │ ├── Avatar.md
│ │ │ ├── Backdrop.md
│ │ │ ├── Badge.md
│ │ │ ├── BarChart.md
│ │ │ ├── Bookmark.md
│ │ │ ├── Breakout.md
│ │ │ ├── Button.md
│ │ │ ├── Card.md
│ │ │ ├── Carousel.md
│ │ │ ├── ChangeListener.md
│ │ │ ├── Checkbox.md
│ │ │ ├── CHStack.md
│ │ │ ├── ColorPicker.md
│ │ │ ├── Column.md
│ │ │ ├── ContentSeparator.md
│ │ │ ├── CVStack.md
│ │ │ ├── DataSource.md
│ │ │ ├── DateInput.md
│ │ │ ├── DatePicker.md
│ │ │ ├── DonutChart.md
│ │ │ ├── DropdownMenu.md
│ │ │ ├── EmojiSelector.md
│ │ │ ├── ExpandableItem.md
│ │ │ ├── FileInput.md
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FlowLayout.md
│ │ │ ├── Footer.md
│ │ │ ├── Form.md
│ │ │ ├── FormItem.md
│ │ │ ├── FormSection.md
│ │ │ ├── Fragment.md
│ │ │ ├── H1.md
│ │ │ ├── H2.md
│ │ │ ├── H3.md
│ │ │ ├── H4.md
│ │ │ ├── H5.md
│ │ │ ├── H6.md
│ │ │ ├── Heading.md
│ │ │ ├── HSplitter.md
│ │ │ ├── HStack.md
│ │ │ ├── Icon.md
│ │ │ ├── IFrame.md
│ │ │ ├── Image.md
│ │ │ ├── Items.md
│ │ │ ├── LabelList.md
│ │ │ ├── Legend.md
│ │ │ ├── LineChart.md
│ │ │ ├── Link.md
│ │ │ ├── List.md
│ │ │ ├── Logo.md
│ │ │ ├── Markdown.md
│ │ │ ├── MenuItem.md
│ │ │ ├── MenuSeparator.md
│ │ │ ├── ModalDialog.md
│ │ │ ├── NavGroup.md
│ │ │ ├── NavLink.md
│ │ │ ├── NavPanel.md
│ │ │ ├── NoResult.md
│ │ │ ├── NumberBox.md
│ │ │ ├── Option.md
│ │ │ ├── Page.md
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── Pages.md
│ │ │ ├── Pagination.md
│ │ │ ├── PasswordInput.md
│ │ │ ├── PieChart.md
│ │ │ ├── ProgressBar.md
│ │ │ ├── Queue.md
│ │ │ ├── RadioGroup.md
│ │ │ ├── RealTimeAdapter.md
│ │ │ ├── Redirect.md
│ │ │ ├── Select.md
│ │ │ ├── Slider.md
│ │ │ ├── Slot.md
│ │ │ ├── SpaceFiller.md
│ │ │ ├── Spinner.md
│ │ │ ├── Splitter.md
│ │ │ ├── Stack.md
│ │ │ ├── StickyBox.md
│ │ │ ├── SubMenuItem.md
│ │ │ ├── Switch.md
│ │ │ ├── TabItem.md
│ │ │ ├── Table.md
│ │ │ ├── TableOfContents.md
│ │ │ ├── Tabs.md
│ │ │ ├── Text.md
│ │ │ ├── TextArea.md
│ │ │ ├── TextBox.md
│ │ │ ├── Theme.md
│ │ │ ├── TimeInput.md
│ │ │ ├── Timer.md
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneSwitch.md
│ │ │ ├── Tooltip.md
│ │ │ ├── Tree.md
│ │ │ ├── VSplitter.md
│ │ │ ├── VStack.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ ├── xmlui-spreadsheet
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Spreadsheet.md
│ │ │ └── xmlui-website-blocks
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Carousel.md
│ │ │ ├── HelloMd.md
│ │ │ ├── HeroSection.md
│ │ │ └── ScrollToTop.md
│ │ └── extensions
│ │ ├── _meta.json
│ │ ├── xmlui-animations
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Animation.md
│ │ │ ├── FadeAnimation.md
│ │ │ ├── FadeInAnimation.md
│ │ │ ├── FadeOutAnimation.md
│ │ │ ├── ScaleAnimation.md
│ │ │ └── SlideInAnimation.md
│ │ └── xmlui-website-blocks
│ │ ├── _meta.json
│ │ ├── _overview.md
│ │ ├── Carousel.md
│ │ ├── FancyButton.md
│ │ ├── HeroSection.md
│ │ └── ScrollToTop.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── feed.rss
│ │ ├── mockServiceWorker.js
│ │ ├── pages
│ │ │ ├── _meta.json
│ │ │ ├── app-structure.md
│ │ │ ├── build-editor-component.md
│ │ │ ├── build-hello-world-component.md
│ │ │ ├── components-intro.md
│ │ │ ├── context-variables.md
│ │ │ ├── forms.md
│ │ │ ├── globals.md
│ │ │ ├── glossary.md
│ │ │ ├── helper-tags.md
│ │ │ ├── hosted-deployment.md
│ │ │ ├── howto
│ │ │ │ ├── assign-a-complex-json-literal-to-a-component-variable.md
│ │ │ │ ├── chain-a-refetch.md
│ │ │ │ ├── control-cache-invalidation.md
│ │ │ │ ├── debounce-user-input-for-api-calls.md
│ │ │ │ ├── debounce-with-changelistener.md
│ │ │ │ ├── debug-a-component.md
│ │ │ │ ├── delay-a-datasource-until-another-datasource-is-ready.md
│ │ │ │ ├── delegate-a-method.md
│ │ │ │ ├── do-custom-form-validation.md
│ │ │ │ ├── expose-a-method-from-a-component.md
│ │ │ │ ├── filter-and-transform-data-from-an-api.md
│ │ │ │ ├── group-items-in-list-by-a-property.md
│ │ │ │ ├── handle-background-operations.md
│ │ │ │ ├── hide-an-element-until-its-datasource-is-ready.md
│ │ │ │ ├── make-a-set-of-equal-width-cards.md
│ │ │ │ ├── make-a-table-responsive.md
│ │ │ │ ├── make-navpanel-width-responsive.md
│ │ │ │ ├── modify-a-value-reported-in-a-column.md
│ │ │ │ ├── paginate-a-list.md
│ │ │ │ ├── pass-data-to-a-modal-dialog.md
│ │ │ │ ├── react-to-button-click-not-keystrokes.md
│ │ │ │ ├── set-the-initial-value-of-a-select-from-fetched-data.md
│ │ │ │ ├── share-a-modaldialog-across-components.md
│ │ │ │ ├── sync-selections-between-table-and-list-views.md
│ │ │ │ ├── update-ui-optimistically.md
│ │ │ │ ├── use-built-in-form-validation.md
│ │ │ │ └── use-the-same-modaldialog-to-add-or-edit.md
│ │ │ ├── howto.md
│ │ │ ├── intro.md
│ │ │ ├── layout.md
│ │ │ ├── markup.md
│ │ │ ├── mcp.md
│ │ │ ├── modal-dialogs.md
│ │ │ ├── news-and-reviews.md
│ │ │ ├── reactive-intro.md
│ │ │ ├── refactoring.md
│ │ │ ├── routing-and-links.md
│ │ │ ├── samples
│ │ │ │ ├── color-palette.xmlui
│ │ │ │ ├── color-values.xmlui
│ │ │ │ ├── shadow-sizes.xmlui
│ │ │ │ ├── spacing-sizes.xmlui
│ │ │ │ ├── swatch.xmlui
│ │ │ │ ├── theme-gallery-brief.xmlui
│ │ │ │ └── theme-gallery.xmlui
│ │ │ ├── scoping.md
│ │ │ ├── scripting.md
│ │ │ ├── styles-and-themes
│ │ │ │ ├── common-units.md
│ │ │ │ ├── layout-props.md
│ │ │ │ ├── theme-variable-defaults.md
│ │ │ │ ├── theme-variables.md
│ │ │ │ └── themes.md
│ │ │ ├── template-properties.md
│ │ │ ├── test.md
│ │ │ ├── tutorial-01.md
│ │ │ ├── tutorial-02.md
│ │ │ ├── tutorial-03.md
│ │ │ ├── tutorial-04.md
│ │ │ ├── tutorial-05.md
│ │ │ ├── tutorial-06.md
│ │ │ ├── tutorial-07.md
│ │ │ ├── tutorial-08.md
│ │ │ ├── tutorial-09.md
│ │ │ ├── tutorial-10.md
│ │ │ ├── tutorial-11.md
│ │ │ ├── tutorial-12.md
│ │ │ ├── universal-properties.md
│ │ │ ├── user-defined-components.md
│ │ │ ├── vscode.md
│ │ │ ├── working-with-markdown.md
│ │ │ ├── working-with-text.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-charts
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── DonutChart.md
│ │ │ │ ├── LabelList.md
│ │ │ │ ├── Legend.md
│ │ │ │ ├── LineChart.md
│ │ │ │ └── PieChart.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ └── xmlui-spreadsheet
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ └── Spreadsheet.md
│ │ ├── resources
│ │ │ ├── devdocs
│ │ │ │ ├── debug-proxy-object-2.png
│ │ │ │ ├── debug-proxy-object.png
│ │ │ │ ├── table_editor_01.png
│ │ │ │ ├── table_editor_02.png
│ │ │ │ ├── table_editor_03.png
│ │ │ │ ├── table_editor_04.png
│ │ │ │ ├── table_editor_05.png
│ │ │ │ ├── table_editor_06.png
│ │ │ │ ├── table_editor_07.png
│ │ │ │ ├── table_editor_08.png
│ │ │ │ ├── table_editor_09.png
│ │ │ │ ├── table_editor_10.png
│ │ │ │ ├── table_editor_11.png
│ │ │ │ ├── table-editor-01.png
│ │ │ │ ├── table-editor-02.png
│ │ │ │ ├── table-editor-03.png
│ │ │ │ ├── table-editor-04.png
│ │ │ │ ├── table-editor-06.png
│ │ │ │ ├── table-editor-07.png
│ │ │ │ ├── table-editor-08.png
│ │ │ │ ├── table-editor-09.png
│ │ │ │ └── xmlui-rendering-of-tiptap-markdown.png
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ ├── clients.json
│ │ │ │ ├── daily-revenue.json
│ │ │ │ ├── dashboard-stats.json
│ │ │ │ ├── demo.xmlui
│ │ │ │ ├── demo.xmlui.xs
│ │ │ │ ├── downloads
│ │ │ │ │ └── downloads.json
│ │ │ │ ├── for-download
│ │ │ │ │ ├── index-with-api.html
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── mockApi.js
│ │ │ │ │ ├── start-darwin.sh
│ │ │ │ │ ├── start-linux.sh
│ │ │ │ │ ├── start.bat
│ │ │ │ │ └── xmlui
│ │ │ │ │ └── xmlui-standalone.umd.js
│ │ │ │ ├── getting-started
│ │ │ │ │ ├── cl-tutorial-final.zip
│ │ │ │ │ ├── cl-tutorial.zip
│ │ │ │ │ ├── cl-tutorial2.zip
│ │ │ │ │ ├── cl-tutorial3.zip
│ │ │ │ │ ├── cl-tutorial4.zip
│ │ │ │ │ ├── cl-tutorial5.zip
│ │ │ │ │ ├── cl-tutorial6.zip
│ │ │ │ │ ├── getting-started.zip
│ │ │ │ │ ├── hello-xmlui.zip
│ │ │ │ │ ├── xmlui-empty.zip
│ │ │ │ │ └── xmlui-starter.zip
│ │ │ │ ├── howto
│ │ │ │ │ └── component-icons
│ │ │ │ │ └── up-arrow.svg
│ │ │ │ ├── invoices.json
│ │ │ │ ├── monthly-status.json
│ │ │ │ ├── news-and-reviews.json
│ │ │ │ ├── products.json
│ │ │ │ ├── releases.json
│ │ │ │ ├── tutorials
│ │ │ │ │ ├── datasource
│ │ │ │ │ │ └── api.ts
│ │ │ │ │ └── p2do
│ │ │ │ │ ├── api.ts
│ │ │ │ │ └── todo-logo.svg
│ │ │ │ └── xmlui.json
│ │ │ ├── github.svg
│ │ │ ├── images
│ │ │ │ ├── apiaction-tutorial
│ │ │ │ │ ├── add-success.png
│ │ │ │ │ ├── apiaction-param.png
│ │ │ │ │ ├── change-completed.png
│ │ │ │ │ ├── change-in-progress.png
│ │ │ │ │ ├── confirm-delete.png
│ │ │ │ │ ├── data-error.png
│ │ │ │ │ ├── data-progress.png
│ │ │ │ │ ├── data-success.png
│ │ │ │ │ ├── display-1.png
│ │ │ │ │ ├── item-deleted.png
│ │ │ │ │ ├── item-updated.png
│ │ │ │ │ ├── missing-api-key.png
│ │ │ │ │ ├── new-item-added.png
│ │ │ │ │ └── test-message.png
│ │ │ │ ├── chat-api
│ │ │ │ │ └── domain-model.svg
│ │ │ │ ├── components
│ │ │ │ │ ├── image
│ │ │ │ │ │ └── breakfast.jpg
│ │ │ │ │ ├── markdown
│ │ │ │ │ │ └── colors.png
│ │ │ │ │ └── modal
│ │ │ │ │ ├── deep_link_dialog_1.jpg
│ │ │ │ │ └── deep_link_dialog_2.jpg
│ │ │ │ ├── create-apps
│ │ │ │ │ ├── collapsed-vertical.png
│ │ │ │ │ ├── using-forms-warning-dialog.png
│ │ │ │ │ └── using-forms.png
│ │ │ │ ├── datasource-tutorial
│ │ │ │ │ ├── data-with-header.png
│ │ │ │ │ ├── filtered-data.png
│ │ │ │ │ ├── filtered-items.png
│ │ │ │ │ ├── initial-page-items.png
│ │ │ │ │ ├── list-items.png
│ │ │ │ │ ├── next-page-items.png
│ │ │ │ │ ├── no-data.png
│ │ │ │ │ ├── pagination-1.jpg
│ │ │ │ │ ├── pagination-1.png
│ │ │ │ │ ├── polling-1.png
│ │ │ │ │ ├── refetch-data.png
│ │ │ │ │ ├── slow-loading.png
│ │ │ │ │ ├── test-message.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── unconventional-data.png
│ │ │ │ │ └── unfiltered-items.png
│ │ │ │ ├── flower.jpg
│ │ │ │ ├── get-started
│ │ │ │ │ ├── add-new-contact.png
│ │ │ │ │ ├── app-modified.png
│ │ │ │ │ ├── app-start.png
│ │ │ │ │ ├── app-with-boxes.png
│ │ │ │ │ ├── app-with-toast.png
│ │ │ │ │ ├── boilerplate-structure.png
│ │ │ │ │ ├── cl-initial.png
│ │ │ │ │ ├── cl-start.png
│ │ │ │ │ ├── contact-counts.png
│ │ │ │ │ ├── contact-dialog-title.png
│ │ │ │ │ ├── contact-dialog.png
│ │ │ │ │ ├── contact-menus.png
│ │ │ │ │ ├── contact-predicates.png
│ │ │ │ │ ├── context-menu.png
│ │ │ │ │ ├── dashboard-numbers.png
│ │ │ │ │ ├── default-contact-list.png
│ │ │ │ │ ├── delete-contact.png
│ │ │ │ │ ├── delete-task.png
│ │ │ │ │ ├── detailed-template.png
│ │ │ │ │ ├── edit-contact-details.png
│ │ │ │ │ ├── edited-contact-saved.png
│ │ │ │ │ ├── empty-sections.png
│ │ │ │ │ ├── filter-completed.png
│ │ │ │ │ ├── fullwidth-desktop.png
│ │ │ │ │ ├── fullwidth-mobile.png
│ │ │ │ │ ├── initial-table.png
│ │ │ │ │ ├── items-and-badges.png
│ │ │ │ │ ├── loading-message.png
│ │ │ │ │ ├── new-contact-button.png
│ │ │ │ │ ├── new-contact-saved.png
│ │ │ │ │ ├── no-empty-sections.png
│ │ │ │ │ ├── personal-todo-initial.png
│ │ │ │ │ ├── piechart.png
│ │ │ │ │ ├── review-today.png
│ │ │ │ │ ├── rudimentary-dashboard.png
│ │ │ │ │ ├── section-collapsed.png
│ │ │ │ │ ├── sectioned-items.png
│ │ │ │ │ ├── sections-ordered.png
│ │ │ │ │ ├── spacex-list-with-links.png
│ │ │ │ │ ├── spacex-list.png
│ │ │ │ │ ├── start-personal-todo-1.png
│ │ │ │ │ ├── submit-new-contact.png
│ │ │ │ │ ├── submit-new-task.png
│ │ │ │ │ ├── syntax-highlighting.png
│ │ │ │ │ ├── table-with-badge.png
│ │ │ │ │ ├── template-with-card.png
│ │ │ │ │ ├── test-emulated-api.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── todo-logo.png
│ │ │ │ │ └── xmlui-tools.png
│ │ │ │ ├── HelloApp.png
│ │ │ │ ├── HelloApp2.png
│ │ │ │ ├── logos
│ │ │ │ │ ├── xmlui1.svg
│ │ │ │ │ ├── xmlui2.svg
│ │ │ │ │ ├── xmlui3.svg
│ │ │ │ │ ├── xmlui4.svg
│ │ │ │ │ ├── xmlui5.svg
│ │ │ │ │ ├── xmlui6.svg
│ │ │ │ │ └── xmlui7.svg
│ │ │ │ ├── pdf
│ │ │ │ │ └── dummy-pdf.jpg
│ │ │ │ ├── rendering-engine
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ ├── Component.svg
│ │ │ │ │ ├── CompoundComponent.svg
│ │ │ │ │ ├── RootComponent.svg
│ │ │ │ │ └── tree-with-containers.svg
│ │ │ │ ├── reviewers-guide
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ └── incbutton-in-action.png
│ │ │ │ ├── tools
│ │ │ │ │ └── boilerplate-structure.png
│ │ │ │ ├── try.svg
│ │ │ │ ├── tutorial
│ │ │ │ │ ├── app-chat-history.png
│ │ │ │ │ ├── app-content-placeholder.png
│ │ │ │ │ ├── app-header-and-content.png
│ │ │ │ │ ├── app-links-channel-selected.png
│ │ │ │ │ ├── app-links-click.png
│ │ │ │ │ ├── app-navigation.png
│ │ │ │ │ ├── finished-ex01.png
│ │ │ │ │ ├── finished-ex02.png
│ │ │ │ │ ├── hello.png
│ │ │ │ │ ├── splash-screen-advanced.png
│ │ │ │ │ ├── splash-screen-after-click.png
│ │ │ │ │ ├── splash-screen-centered.png
│ │ │ │ │ ├── splash-screen-events.png
│ │ │ │ │ ├── splash-screen-expression.png
│ │ │ │ │ ├── splash-screen-reuse-after.png
│ │ │ │ │ ├── splash-screen-reuse-before.png
│ │ │ │ │ └── splash-screen.png
│ │ │ │ └── tutorial-01.png
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ ├── Boxes.xmlui
│ │ │ ├── Breadcrumb.xmlui
│ │ │ ├── ChangeLog.xmlui
│ │ │ ├── ColorPalette.xmlui
│ │ │ ├── DocumentLinks.xmlui
│ │ │ ├── DocumentPage.xmlui
│ │ │ ├── DocumentPageNoTOC.xmlui
│ │ │ ├── Icons.xmlui
│ │ │ ├── IncButton.xmlui
│ │ │ ├── IncButton2.xmlui
│ │ │ ├── NameValue.xmlui
│ │ │ ├── PageNotFound.xmlui
│ │ │ ├── PaletteItem.xmlui
│ │ │ ├── Palettes.xmlui
│ │ │ ├── SectionHeader.xmlui
│ │ │ ├── TBD.xmlui
│ │ │ ├── Test.xmlui
│ │ │ ├── ThemesIntro.xmlui
│ │ │ ├── ThousandThemes.xmlui
│ │ │ ├── TubeStops.xmlui
│ │ │ ├── TubeStops.xmlui.xs
│ │ │ └── TwoColumnCode.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ ├── docs-theme.ts
│ │ ├── earthtone.ts
│ │ ├── xmlui-gray-on-default.ts
│ │ ├── xmlui-green-on-default.ts
│ │ └── xmlui-orange-on-default.ts
│ └── tsconfig.json
├── LICENSE
├── package-lock.json
├── package.json
├── packages
│ ├── tsconfig.json
│ ├── xmlui-animations
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── Animation.tsx
│ │ ├── AnimationNative.tsx
│ │ ├── FadeAnimation.tsx
│ │ ├── FadeInAnimation.tsx
│ │ ├── FadeOutAnimation.tsx
│ │ ├── index.tsx
│ │ ├── ScaleAnimation.tsx
│ │ └── SlideInAnimation.tsx
│ ├── xmlui-devtools
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── devtools
│ │ │ │ ├── DevTools.tsx
│ │ │ │ ├── DevToolsNative.module.scss
│ │ │ │ ├── DevToolsNative.tsx
│ │ │ │ ├── ModalDialog.module.scss
│ │ │ │ ├── ModalDialog.tsx
│ │ │ │ ├── ModalVisibilityContext.tsx
│ │ │ │ ├── Tooltip.module.scss
│ │ │ │ ├── Tooltip.tsx
│ │ │ │ └── utils.ts
│ │ │ ├── editor
│ │ │ │ └── Editor.tsx
│ │ │ └── index.tsx
│ │ └── vite.config-overrides.ts
│ ├── xmlui-hello-world
│ │ ├── .gitignore
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── HelloWorld.module.scss
│ │ ├── HelloWorld.tsx
│ │ ├── HelloWorldNative.tsx
│ │ └── index.tsx
│ ├── xmlui-os-frames
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── IPhoneFrame.module.scss
│ │ ├── IPhoneFrame.tsx
│ │ ├── MacOSAppFrame.module.scss
│ │ ├── MacOSAppFrame.tsx
│ │ ├── WindowsAppFrame.module.scss
│ │ └── WindowsAppFrame.tsx
│ ├── xmlui-pdf
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ ├── components
│ │ │ │ └── Pdf.xmlui
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── LazyPdfNative.tsx
│ │ ├── Pdf.module.scss
│ │ └── Pdf.tsx
│ ├── xmlui-playground
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── hooks
│ │ │ ├── usePlayground.ts
│ │ │ └── useToast.ts
│ │ ├── index.tsx
│ │ ├── playground
│ │ │ ├── Box.module.scss
│ │ │ ├── Box.tsx
│ │ │ ├── CodeSelector.module.scss
│ │ │ ├── CodeSelector.tsx
│ │ │ ├── ConfirmationDialog.module.scss
│ │ │ ├── ConfirmationDialog.tsx
│ │ │ ├── Editor.tsx
│ │ │ ├── Header.module.scss
│ │ │ ├── Header.tsx
│ │ │ ├── Playground.tsx
│ │ │ ├── PlaygroundContent.module.scss
│ │ │ ├── PlaygroundContent.tsx
│ │ │ ├── PlaygroundNative.module.scss
│ │ │ ├── PlaygroundNative.tsx
│ │ │ ├── Preview.tsx
│ │ │ ├── StandalonePlayground.tsx
│ │ │ ├── StandalonePlaygroundNative.module.scss
│ │ │ ├── StandalonePlaygroundNative.tsx
│ │ │ ├── ThemeSwitcher.module.scss
│ │ │ ├── ThemeSwitcher.tsx
│ │ │ └── utils.ts
│ │ ├── providers
│ │ │ ├── Toast.module.scss
│ │ │ └── ToastProvider.tsx
│ │ ├── state
│ │ │ └── store.ts
│ │ ├── themes
│ │ │ └── theme.ts
│ │ └── utils
│ │ └── helpers.ts
│ ├── xmlui-search
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── Search.module.scss
│ │ └── Search.tsx
│ ├── xmlui-spreadsheet
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── Spreadsheet.tsx
│ │ └── SpreadsheetNative.tsx
│ └── xmlui-website-blocks
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── demo
│ │ ├── components
│ │ │ ├── HeroBackgroundBreakoutPage.xmlui
│ │ │ ├── HeroBackgroundsPage.xmlui
│ │ │ ├── HeroContentsPage.xmlui
│ │ │ ├── HeroTextAlignPage.xmlui
│ │ │ ├── HeroTextPage.xmlui
│ │ │ └── HeroTonesPage.xmlui
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── default.ts
│ ├── index.html
│ ├── index.ts
│ ├── meta
│ │ └── componentsMetadata.ts
│ ├── package.json
│ ├── public
│ │ └── resources
│ │ ├── building.jpg
│ │ └── xmlui-logo.svg
│ └── src
│ ├── Carousel
│ │ ├── Carousel.module.scss
│ │ ├── Carousel.tsx
│ │ ├── CarouselContext.tsx
│ │ └── CarouselNative.tsx
│ ├── FancyButton
│ │ ├── FancyButton.module.scss
│ │ ├── FancyButton.tsx
│ │ └── FancyButton.xmlui
│ ├── Hello
│ │ ├── Hello.tsx
│ │ ├── Hello.xmlui
│ │ └── Hello.xmlui.xs
│ ├── HeroSection
│ │ ├── HeroSection.module.scss
│ │ ├── HeroSection.spec.ts
│ │ ├── HeroSection.tsx
│ │ └── HeroSectionNative.tsx
│ ├── index.tsx
│ ├── ScrollToTop
│ │ ├── ScrollToTop.module.scss
│ │ ├── ScrollToTop.tsx
│ │ └── ScrollToTopNative.tsx
│ └── vite-env.d.ts
├── playwright.config.ts
├── README.md
├── tools
│ ├── codefence
│ │ └── xmlui-code-fence-docs.md
│ ├── create-app
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── create-app.ts
│ │ ├── helpers
│ │ │ ├── copy.ts
│ │ │ ├── get-pkg-manager.ts
│ │ │ ├── git.ts
│ │ │ ├── install.ts
│ │ │ ├── is-folder-empty.ts
│ │ │ ├── is-writeable.ts
│ │ │ ├── make-dir.ts
│ │ │ └── validate-pkg.ts
│ │ ├── index.ts
│ │ ├── package.json
│ │ ├── templates
│ │ │ ├── default
│ │ │ │ └── ts
│ │ │ │ ├── gitignore
│ │ │ │ ├── index.html
│ │ │ │ ├── index.ts
│ │ │ │ ├── public
│ │ │ │ │ ├── mockServiceWorker.js
│ │ │ │ │ ├── resources
│ │ │ │ │ │ ├── favicon.ico
│ │ │ │ │ │ └── xmlui-logo.svg
│ │ │ │ │ └── serve.json
│ │ │ │ └── src
│ │ │ │ ├── components
│ │ │ │ │ ├── ApiAware.xmlui
│ │ │ │ │ ├── Home.xmlui
│ │ │ │ │ ├── IncButton.xmlui
│ │ │ │ │ └── PagePanel.xmlui
│ │ │ │ ├── config.ts
│ │ │ │ └── Main.xmlui
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ └── tsconfig.json
│ ├── create-xmlui-hello-world
│ │ ├── index.js
│ │ └── package.json
│ └── vscode
│ ├── .gitignore
│ ├── .vscode
│ │ ├── launch.json
│ │ └── tasks.json
│ ├── .vscodeignore
│ ├── build.sh
│ ├── CHANGELOG.md
│ ├── esbuild.js
│ ├── eslint.config.mjs
│ ├── formatter-docs.md
│ ├── generate-test-sample.sh
│ ├── LICENSE.md
│ ├── package-lock.json
│ ├── package.json
│ ├── README.md
│ ├── resources
│ │ ├── xmlui-logo.png
│ │ └── xmlui-markup-syntax-highlighting.png
│ ├── src
│ │ ├── extension.ts
│ │ └── server.ts
│ ├── syntaxes
│ │ └── xmlui.tmLanguage.json
│ ├── test-samples
│ │ └── sample.xmlui
│ ├── tsconfig.json
│ └── tsconfig.tsbuildinfo
├── turbo.json
└── xmlui
├── .gitignore
├── bin
│ ├── bootstrap.cjs
│ ├── bootstrap.js
│ ├── build-lib.ts
│ ├── build.ts
│ ├── index.ts
│ ├── preview.ts
│ ├── start.ts
│ ├── vite-xmlui-plugin.ts
│ └── viteConfig.ts
├── CHANGELOG.md
├── conventions
│ ├── component-qa-checklist.md
│ ├── copilot-conventions.md
│ ├── create-xmlui-components.md
│ ├── mermaid.md
│ ├── testing-conventions.md
│ └── xmlui-in-a-nutshell.md
├── dev-docs
│ ├── accessibility.md
│ ├── build-system.md
│ ├── build-xmlui.md
│ ├── component-behaviors.md
│ ├── component-metadata.md
│ ├── components-with-options.md
│ ├── containers.md
│ ├── data-operations.md
│ ├── glossary.md
│ ├── index.md
│ ├── next
│ │ ├── component-dev-guide.md
│ │ ├── configuration-management-enhancement-summary.md
│ │ ├── documentation-scripts-refactoring-complete-summary.md
│ │ ├── documentation-scripts-refactoring-plan.md
│ │ ├── duplicate-pattern-extraction-summary.md
│ │ ├── error-handling-standardization-summary.md
│ │ ├── generating-component-reference.md
│ │ ├── index.md
│ │ ├── logging-consistency-implementation-summary.md
│ │ ├── project-build.md
│ │ ├── project-structure.md
│ │ ├── theme-context.md
│ │ ├── tiptap-design-considerations.md
│ │ ├── working-with-code.md
│ │ ├── xmlui-runtime-architecture
│ │ └── xmlui-wcag-accessibility-report.md
│ ├── react-fundamentals.md
│ ├── release-method.md
│ ├── standalone-app.md
│ ├── theme-variables-refactoring.md
│ ├── ud-components.md
│ └── xmlui-repo.md
├── package.json
├── scripts
│ ├── coverage-only.js
│ ├── e2e-test-summary.js
│ ├── extract-component-metadata.js
│ ├── generate-docs
│ │ ├── build-downloads-map.mjs
│ │ ├── build-pages-map.mjs
│ │ ├── components-config.json
│ │ ├── configuration-management.mjs
│ │ ├── constants.mjs
│ │ ├── create-theme-files.mjs
│ │ ├── DocsGenerator.mjs
│ │ ├── error-handling.mjs
│ │ ├── extensions-config.json
│ │ ├── folders.mjs
│ │ ├── generate-summary-files.mjs
│ │ ├── get-docs.mjs
│ │ ├── input-handler.mjs
│ │ ├── logger.mjs
│ │ ├── logging-standards.mjs
│ │ ├── MetadataProcessor.mjs
│ │ ├── pattern-utilities.mjs
│ │ └── utils.mjs
│ ├── generate-metadata-markdown.js
│ ├── get-langserver-metadata.js
│ ├── inline-links.mjs
│ └── README-e2e-summary.md
├── src
│ ├── abstractions
│ │ ├── _conventions.md
│ │ ├── ActionDefs.ts
│ │ ├── AppContextDefs.ts
│ │ ├── ComponentDefs.ts
│ │ ├── ContainerDefs.ts
│ │ ├── ExtensionDefs.ts
│ │ ├── FunctionDefs.ts
│ │ ├── RendererDefs.ts
│ │ ├── scripting
│ │ │ ├── BlockScope.ts
│ │ │ ├── Compilation.ts
│ │ │ ├── LogicalThread.ts
│ │ │ ├── LoopScope.ts
│ │ │ ├── modules.ts
│ │ │ ├── ScriptParserError.ts
│ │ │ ├── Token.ts
│ │ │ ├── TryScope.ts
│ │ │ └── TryScopeExp.ts
│ │ └── ThemingDefs.ts
│ ├── components
│ │ ├── _conventions.md
│ │ ├── abstractions.ts
│ │ ├── Accordion
│ │ │ ├── Accordion.md
│ │ │ ├── Accordion.module.scss
│ │ │ ├── Accordion.spec.ts
│ │ │ ├── Accordion.tsx
│ │ │ ├── AccordionContext.tsx
│ │ │ ├── AccordionItem.tsx
│ │ │ ├── AccordionItemNative.tsx
│ │ │ └── AccordionNative.tsx
│ │ ├── Animation
│ │ │ └── AnimationNative.tsx
│ │ ├── APICall
│ │ │ ├── APICall.md
│ │ │ ├── APICall.spec.ts
│ │ │ ├── APICall.tsx
│ │ │ └── APICallNative.tsx
│ │ ├── App
│ │ │ ├── App.md
│ │ │ ├── App.module.scss
│ │ │ ├── App.spec.ts
│ │ │ ├── App.tsx
│ │ │ ├── AppLayoutContext.ts
│ │ │ ├── AppNative.tsx
│ │ │ ├── AppStateContext.ts
│ │ │ ├── doc-resources
│ │ │ │ ├── condensed-sticky.xmlui
│ │ │ │ ├── condensed.xmlui
│ │ │ │ ├── horizontal-sticky.xmlui
│ │ │ │ ├── horizontal.xmlui
│ │ │ │ ├── vertical-full-header.xmlui
│ │ │ │ ├── vertical-sticky.xmlui
│ │ │ │ └── vertical.xmlui
│ │ │ ├── IndexerContext.ts
│ │ │ ├── LinkInfoContext.ts
│ │ │ ├── SearchContext.tsx
│ │ │ ├── Sheet.module.scss
│ │ │ └── Sheet.tsx
│ │ ├── AppHeader
│ │ │ ├── AppHeader.md
│ │ │ ├── AppHeader.module.scss
│ │ │ ├── AppHeader.spec.ts
│ │ │ ├── AppHeader.tsx
│ │ │ └── AppHeaderNative.tsx
│ │ ├── AppState
│ │ │ ├── AppState.md
│ │ │ ├── AppState.spec.ts
│ │ │ ├── AppState.tsx
│ │ │ └── AppStateNative.tsx
│ │ ├── AutoComplete
│ │ │ ├── AutoComplete.md
│ │ │ ├── AutoComplete.module.scss
│ │ │ ├── AutoComplete.spec.ts
│ │ │ ├── AutoComplete.tsx
│ │ │ ├── AutoCompleteContext.tsx
│ │ │ └── AutoCompleteNative.tsx
│ │ ├── Avatar
│ │ │ ├── Avatar.md
│ │ │ ├── Avatar.module.scss
│ │ │ ├── Avatar.spec.ts
│ │ │ ├── Avatar.tsx
│ │ │ └── AvatarNative.tsx
│ │ ├── Backdrop
│ │ │ ├── Backdrop.md
│ │ │ ├── Backdrop.module.scss
│ │ │ ├── Backdrop.spec.ts
│ │ │ ├── Backdrop.tsx
│ │ │ └── BackdropNative.tsx
│ │ ├── Badge
│ │ │ ├── Badge.md
│ │ │ ├── Badge.module.scss
│ │ │ ├── Badge.spec.ts
│ │ │ ├── Badge.tsx
│ │ │ └── BadgeNative.tsx
│ │ ├── Bookmark
│ │ │ ├── Bookmark.md
│ │ │ ├── Bookmark.module.scss
│ │ │ ├── Bookmark.spec.ts
│ │ │ ├── Bookmark.tsx
│ │ │ └── BookmarkNative.tsx
│ │ ├── Breakout
│ │ │ ├── Breakout.module.scss
│ │ │ ├── Breakout.spec.ts
│ │ │ ├── Breakout.tsx
│ │ │ └── BreakoutNative.tsx
│ │ ├── Button
│ │ │ ├── Button-style.spec.ts
│ │ │ ├── Button.md
│ │ │ ├── Button.module.scss
│ │ │ ├── Button.spec.ts
│ │ │ ├── Button.tsx
│ │ │ └── ButtonNative.tsx
│ │ ├── Card
│ │ │ ├── Card.md
│ │ │ ├── Card.module.scss
│ │ │ ├── Card.spec.ts
│ │ │ ├── Card.tsx
│ │ │ └── CardNative.tsx
│ │ ├── Carousel
│ │ │ ├── Carousel.md
│ │ │ ├── Carousel.module.scss
│ │ │ ├── Carousel.spec.ts
│ │ │ ├── Carousel.tsx
│ │ │ ├── CarouselContext.tsx
│ │ │ ├── CarouselItem.tsx
│ │ │ ├── CarouselItemNative.tsx
│ │ │ └── CarouselNative.tsx
│ │ ├── ChangeListener
│ │ │ ├── ChangeListener.md
│ │ │ ├── ChangeListener.spec.ts
│ │ │ ├── ChangeListener.tsx
│ │ │ └── ChangeListenerNative.tsx
│ │ ├── chart-color-schemes.ts
│ │ ├── Charts
│ │ │ ├── AreaChart
│ │ │ │ ├── AreaChart.md
│ │ │ │ ├── AreaChart.spec.ts
│ │ │ │ ├── AreaChart.tsx
│ │ │ │ └── AreaChartNative.tsx
│ │ │ ├── BarChart
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── BarChart.module.scss
│ │ │ │ ├── BarChart.spec.ts
│ │ │ │ ├── BarChart.tsx
│ │ │ │ └── BarChartNative.tsx
│ │ │ ├── DonutChart
│ │ │ │ ├── DonutChart.spec.ts
│ │ │ │ └── DonutChart.tsx
│ │ │ ├── LabelList
│ │ │ │ ├── LabelList.module.scss
│ │ │ │ ├── LabelList.spec.ts
│ │ │ │ ├── LabelList.tsx
│ │ │ │ └── LabelListNative.tsx
│ │ │ ├── Legend
│ │ │ │ ├── Legend.spec.ts
│ │ │ │ ├── Legend.tsx
│ │ │ │ └── LegendNative.tsx
│ │ │ ├── LineChart
│ │ │ │ ├── LineChart.md
│ │ │ │ ├── LineChart.module.scss
│ │ │ │ ├── LineChart.spec.ts
│ │ │ │ ├── LineChart.tsx
│ │ │ │ └── LineChartNative.tsx
│ │ │ ├── PieChart
│ │ │ │ ├── PieChart.md
│ │ │ │ ├── PieChart.spec.ts
│ │ │ │ ├── PieChart.tsx
│ │ │ │ ├── PieChartNative.module.scss
│ │ │ │ └── PieChartNative.tsx
│ │ │ ├── RadarChart
│ │ │ │ ├── RadarChart.md
│ │ │ │ ├── RadarChart.spec.ts
│ │ │ │ ├── RadarChart.tsx
│ │ │ │ └── RadarChartNative.tsx
│ │ │ ├── Tooltip
│ │ │ │ ├── TooltipContent.module.scss
│ │ │ │ ├── TooltipContent.spec.ts
│ │ │ │ └── TooltipContent.tsx
│ │ │ └── utils
│ │ │ ├── abstractions.ts
│ │ │ └── ChartProvider.tsx
│ │ ├── Checkbox
│ │ │ ├── Checkbox.md
│ │ │ ├── Checkbox.spec.ts
│ │ │ └── Checkbox.tsx
│ │ ├── CodeBlock
│ │ │ ├── CodeBlock.module.scss
│ │ │ ├── CodeBlock.spec.ts
│ │ │ ├── CodeBlock.tsx
│ │ │ ├── CodeBlockNative.tsx
│ │ │ └── highlight-code.ts
│ │ ├── collectedComponentMetadata.ts
│ │ ├── ColorPicker
│ │ │ ├── ColorPicker.md
│ │ │ ├── ColorPicker.module.scss
│ │ │ ├── ColorPicker.spec.ts
│ │ │ ├── ColorPicker.tsx
│ │ │ └── ColorPickerNative.tsx
│ │ ├── Column
│ │ │ ├── Column.md
│ │ │ ├── Column.tsx
│ │ │ ├── ColumnNative.tsx
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ └── TableContext.tsx
│ │ ├── component-utils.ts
│ │ ├── ComponentProvider.tsx
│ │ ├── ComponentRegistryContext.tsx
│ │ ├── container-helpers.tsx
│ │ ├── ContentSeparator
│ │ │ ├── ContentSeparator.md
│ │ │ ├── ContentSeparator.module.scss
│ │ │ ├── ContentSeparator.spec.ts
│ │ │ ├── ContentSeparator.tsx
│ │ │ └── ContentSeparatorNative.tsx
│ │ ├── DataSource
│ │ │ ├── DataSource.md
│ │ │ └── DataSource.tsx
│ │ ├── DateInput
│ │ │ ├── DateInput.md
│ │ │ ├── DateInput.module.scss
│ │ │ ├── DateInput.spec.ts
│ │ │ ├── DateInput.tsx
│ │ │ └── DateInputNative.tsx
│ │ ├── DatePicker
│ │ │ ├── DatePicker.md
│ │ │ ├── DatePicker.module.scss
│ │ │ ├── DatePicker.spec.ts
│ │ │ ├── DatePicker.tsx
│ │ │ └── DatePickerNative.tsx
│ │ ├── DropdownMenu
│ │ │ ├── DropdownMenu.md
│ │ │ ├── DropdownMenu.module.scss
│ │ │ ├── DropdownMenu.spec.ts
│ │ │ ├── DropdownMenu.tsx
│ │ │ ├── DropdownMenuNative.tsx
│ │ │ ├── MenuItem.md
│ │ │ └── SubMenuItem.md
│ │ ├── EmojiSelector
│ │ │ ├── EmojiSelector.md
│ │ │ ├── EmojiSelector.spec.ts
│ │ │ ├── EmojiSelector.tsx
│ │ │ └── EmojiSelectorNative.tsx
│ │ ├── ExpandableItem
│ │ │ ├── ExpandableItem.module.scss
│ │ │ ├── ExpandableItem.spec.ts
│ │ │ ├── ExpandableItem.tsx
│ │ │ └── ExpandableItemNative.tsx
│ │ ├── FileInput
│ │ │ ├── FileInput.md
│ │ │ ├── FileInput.module.scss
│ │ │ ├── FileInput.spec.ts
│ │ │ ├── FileInput.tsx
│ │ │ └── FileInputNative.tsx
│ │ ├── FileUploadDropZone
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FileUploadDropZone.module.scss
│ │ │ ├── FileUploadDropZone.spec.ts
│ │ │ ├── FileUploadDropZone.tsx
│ │ │ └── FileUploadDropZoneNative.tsx
│ │ ├── FlowLayout
│ │ │ ├── FlowLayout.md
│ │ │ ├── FlowLayout.module.scss
│ │ │ ├── FlowLayout.spec.ts
│ │ │ ├── FlowLayout.spec.ts-snapshots
│ │ │ │ └── Edge-cases-boxShadow-is-not-clipped-1-non-smoke-darwin.png
│ │ │ ├── FlowLayout.tsx
│ │ │ └── FlowLayoutNative.tsx
│ │ ├── Footer
│ │ │ ├── Footer.md
│ │ │ ├── Footer.module.scss
│ │ │ ├── Footer.spec.ts
│ │ │ ├── Footer.tsx
│ │ │ └── FooterNative.tsx
│ │ ├── Form
│ │ │ ├── Form.md
│ │ │ ├── Form.module.scss
│ │ │ ├── Form.spec.ts
│ │ │ ├── Form.tsx
│ │ │ ├── formActions.ts
│ │ │ ├── FormContext.ts
│ │ │ └── FormNative.tsx
│ │ ├── FormItem
│ │ │ ├── FormItem.md
│ │ │ ├── FormItem.module.scss
│ │ │ ├── FormItem.spec.ts
│ │ │ ├── FormItem.tsx
│ │ │ ├── FormItemNative.tsx
│ │ │ ├── HelperText.module.scss
│ │ │ ├── HelperText.tsx
│ │ │ ├── ItemWithLabel.tsx
│ │ │ └── Validations.ts
│ │ ├── FormSection
│ │ │ ├── FormSection.md
│ │ │ ├── FormSection.ts
│ │ │ └── FormSection.xmlui
│ │ ├── Fragment
│ │ │ ├── Fragment.spec.ts
│ │ │ └── Fragment.tsx
│ │ ├── Heading
│ │ │ ├── abstractions.ts
│ │ │ ├── H1.md
│ │ │ ├── H1.spec.ts
│ │ │ ├── H2.md
│ │ │ ├── H2.spec.ts
│ │ │ ├── H3.md
│ │ │ ├── H3.spec.ts
│ │ │ ├── H4.md
│ │ │ ├── H4.spec.ts
│ │ │ ├── H5.md
│ │ │ ├── H5.spec.ts
│ │ │ ├── H6.md
│ │ │ ├── H6.spec.ts
│ │ │ ├── Heading.md
│ │ │ ├── Heading.module.scss
│ │ │ ├── Heading.spec.ts
│ │ │ ├── Heading.tsx
│ │ │ └── HeadingNative.tsx
│ │ ├── HoverCard
│ │ │ ├── HoverCard.tsx
│ │ │ └── HovercardNative.tsx
│ │ ├── HtmlTags
│ │ │ ├── HtmlTags.module.scss
│ │ │ ├── HtmlTags.spec.ts
│ │ │ └── HtmlTags.tsx
│ │ ├── Icon
│ │ │ ├── AdmonitionDanger.tsx
│ │ │ ├── AdmonitionInfo.tsx
│ │ │ ├── AdmonitionNote.tsx
│ │ │ ├── AdmonitionTip.tsx
│ │ │ ├── AdmonitionWarning.tsx
│ │ │ ├── ApiIcon.tsx
│ │ │ ├── ArrowDropDown.module.scss
│ │ │ ├── ArrowDropDown.tsx
│ │ │ ├── ArrowDropUp.module.scss
│ │ │ ├── ArrowDropUp.tsx
│ │ │ ├── ArrowLeft.module.scss
│ │ │ ├── ArrowLeft.tsx
│ │ │ ├── ArrowRight.module.scss
│ │ │ ├── ArrowRight.tsx
│ │ │ ├── Attach.tsx
│ │ │ ├── Binding.module.scss
│ │ │ ├── Binding.tsx
│ │ │ ├── BoardIcon.tsx
│ │ │ ├── BoxIcon.tsx
│ │ │ ├── CheckIcon.tsx
│ │ │ ├── ChevronDownIcon.tsx
│ │ │ ├── ChevronLeft.tsx
│ │ │ ├── ChevronRight.tsx
│ │ │ ├── ChevronUpIcon.tsx
│ │ │ ├── CodeFileIcon.tsx
│ │ │ ├── CodeSandbox.tsx
│ │ │ ├── CompactListIcon.tsx
│ │ │ ├── ContentCopyIcon.tsx
│ │ │ ├── DarkToLightIcon.tsx
│ │ │ ├── DatabaseIcon.module.scss
│ │ │ ├── DatabaseIcon.tsx
│ │ │ ├── DocFileIcon.tsx
│ │ │ ├── DocIcon.tsx
│ │ │ ├── DotMenuHorizontalIcon.tsx
│ │ │ ├── DotMenuIcon.tsx
│ │ │ ├── EmailIcon.tsx
│ │ │ ├── EmptyFolderIcon.tsx
│ │ │ ├── ErrorIcon.tsx
│ │ │ ├── ExpressionIcon.tsx
│ │ │ ├── FillPlusCricleIcon.tsx
│ │ │ ├── FilterIcon.tsx
│ │ │ ├── FolderIcon.tsx
│ │ │ ├── GlobeIcon.tsx
│ │ │ ├── HomeIcon.tsx
│ │ │ ├── HyperLinkIcon.tsx
│ │ │ ├── Icon.md
│ │ │ ├── Icon.module.scss
│ │ │ ├── Icon.spec.ts
│ │ │ ├── Icon.tsx
│ │ │ ├── IconNative.tsx
│ │ │ ├── ImageFileIcon.tsx
│ │ │ ├── Inspect.tsx
│ │ │ ├── LightToDark.tsx
│ │ │ ├── LinkIcon.tsx
│ │ │ ├── ListIcon.tsx
│ │ │ ├── LooseListIcon.tsx
│ │ │ ├── MoonIcon.tsx
│ │ │ ├── MoreOptionsIcon.tsx
│ │ │ ├── NoSortIcon.tsx
│ │ │ ├── PDFIcon.tsx
│ │ │ ├── PenIcon.tsx
│ │ │ ├── PhoneIcon.tsx
│ │ │ ├── PhotoIcon.tsx
│ │ │ ├── PlusIcon.tsx
│ │ │ ├── SearchIcon.tsx
│ │ │ ├── ShareIcon.tsx
│ │ │ ├── SortAscendingIcon.tsx
│ │ │ ├── SortDescendingIcon.tsx
│ │ │ ├── StarsIcon.tsx
│ │ │ ├── SunIcon.tsx
│ │ │ ├── svg
│ │ │ │ ├── admonition_danger.svg
│ │ │ │ ├── admonition_info.svg
│ │ │ │ ├── admonition_note.svg
│ │ │ │ ├── admonition_tip.svg
│ │ │ │ ├── admonition_warning.svg
│ │ │ │ ├── api.svg
│ │ │ │ ├── arrow-dropdown.svg
│ │ │ │ ├── arrow-left.svg
│ │ │ │ ├── arrow-right.svg
│ │ │ │ ├── arrow-up.svg
│ │ │ │ ├── attach.svg
│ │ │ │ ├── binding.svg
│ │ │ │ ├── box.svg
│ │ │ │ ├── bulb.svg
│ │ │ │ ├── code-file.svg
│ │ │ │ ├── code-sandbox.svg
│ │ │ │ ├── dark_to_light.svg
│ │ │ │ ├── database.svg
│ │ │ │ ├── doc.svg
│ │ │ │ ├── empty-folder.svg
│ │ │ │ ├── expression.svg
│ │ │ │ ├── eye-closed.svg
│ │ │ │ ├── eye-dark.svg
│ │ │ │ ├── eye.svg
│ │ │ │ ├── file-text.svg
│ │ │ │ ├── filter.svg
│ │ │ │ ├── folder.svg
│ │ │ │ ├── img.svg
│ │ │ │ ├── inspect.svg
│ │ │ │ ├── light_to_dark.svg
│ │ │ │ ├── moon.svg
│ │ │ │ ├── pdf.svg
│ │ │ │ ├── photo.svg
│ │ │ │ ├── share.svg
│ │ │ │ ├── stars.svg
│ │ │ │ ├── sun.svg
│ │ │ │ ├── trending-down.svg
│ │ │ │ ├── trending-level.svg
│ │ │ │ ├── trending-up.svg
│ │ │ │ ├── txt.svg
│ │ │ │ ├── unknown-file.svg
│ │ │ │ ├── unlink.svg
│ │ │ │ └── xls.svg
│ │ │ ├── TableDeleteColumnIcon.tsx
│ │ │ ├── TableDeleteRowIcon.tsx
│ │ │ ├── TableInsertColumnIcon.tsx
│ │ │ ├── TableInsertRowIcon.tsx
│ │ │ ├── TrashIcon.tsx
│ │ │ ├── TrendingDownIcon.tsx
│ │ │ ├── TrendingLevelIcon.tsx
│ │ │ ├── TrendingUpIcon.tsx
│ │ │ ├── TxtIcon.tsx
│ │ │ ├── UnknownFileIcon.tsx
│ │ │ ├── UnlinkIcon.tsx
│ │ │ ├── UserIcon.tsx
│ │ │ ├── WarningIcon.tsx
│ │ │ └── XlsIcon.tsx
│ │ ├── IconProvider.tsx
│ │ ├── IconRegistryContext.tsx
│ │ ├── IFrame
│ │ │ ├── IFrame.md
│ │ │ ├── IFrame.module.scss
│ │ │ ├── IFrame.spec.ts
│ │ │ ├── IFrame.tsx
│ │ │ └── IFrameNative.tsx
│ │ ├── Image
│ │ │ ├── Image.md
│ │ │ ├── Image.module.scss
│ │ │ ├── Image.spec.ts
│ │ │ ├── Image.tsx
│ │ │ └── ImageNative.tsx
│ │ ├── Input
│ │ │ ├── index.ts
│ │ │ ├── InputAdornment.module.scss
│ │ │ ├── InputAdornment.tsx
│ │ │ ├── InputDivider.module.scss
│ │ │ ├── InputDivider.tsx
│ │ │ ├── InputLabel.module.scss
│ │ │ ├── InputLabel.tsx
│ │ │ ├── PartialInput.module.scss
│ │ │ └── PartialInput.tsx
│ │ ├── InspectButton
│ │ │ ├── InspectButton.module.scss
│ │ │ └── InspectButton.tsx
│ │ ├── Items
│ │ │ ├── Items.md
│ │ │ ├── Items.spec.ts
│ │ │ ├── Items.tsx
│ │ │ └── ItemsNative.tsx
│ │ ├── Link
│ │ │ ├── Link.md
│ │ │ ├── Link.module.scss
│ │ │ ├── Link.spec.ts
│ │ │ ├── Link.tsx
│ │ │ └── LinkNative.tsx
│ │ ├── List
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── List.md
│ │ │ ├── List.module.scss
│ │ │ ├── List.spec.ts
│ │ │ ├── List.tsx
│ │ │ └── ListNative.tsx
│ │ ├── Logo
│ │ │ ├── doc-resources
│ │ │ │ └── xmlui-logo.svg
│ │ │ ├── Logo.md
│ │ │ ├── Logo.tsx
│ │ │ └── LogoNative.tsx
│ │ ├── Markdown
│ │ │ ├── CodeText.module.scss
│ │ │ ├── CodeText.tsx
│ │ │ ├── Markdown.md
│ │ │ ├── Markdown.module.scss
│ │ │ ├── Markdown.spec.ts
│ │ │ ├── Markdown.tsx
│ │ │ ├── MarkdownNative.tsx
│ │ │ ├── parse-binding-expr.ts
│ │ │ └── utils.ts
│ │ ├── metadata-helpers.ts
│ │ ├── ModalDialog
│ │ │ ├── ConfirmationModalContextProvider.tsx
│ │ │ ├── Dialog.module.scss
│ │ │ ├── Dialog.tsx
│ │ │ ├── ModalDialog.md
│ │ │ ├── ModalDialog.module.scss
│ │ │ ├── ModalDialog.spec.ts
│ │ │ ├── ModalDialog.tsx
│ │ │ ├── ModalDialogNative.tsx
│ │ │ └── ModalVisibilityContext.tsx
│ │ ├── NavGroup
│ │ │ ├── NavGroup.md
│ │ │ ├── NavGroup.module.scss
│ │ │ ├── NavGroup.spec.ts
│ │ │ ├── NavGroup.tsx
│ │ │ ├── NavGroupContext.ts
│ │ │ └── NavGroupNative.tsx
│ │ ├── NavLink
│ │ │ ├── NavLink.md
│ │ │ ├── NavLink.module.scss
│ │ │ ├── NavLink.spec.ts
│ │ │ ├── NavLink.tsx
│ │ │ └── NavLinkNative.tsx
│ │ ├── NavPanel
│ │ │ ├── NavPanel.md
│ │ │ ├── NavPanel.module.scss
│ │ │ ├── NavPanel.spec.ts
│ │ │ ├── NavPanel.tsx
│ │ │ └── NavPanelNative.tsx
│ │ ├── NestedApp
│ │ │ ├── AppWithCodeView.module.scss
│ │ │ ├── AppWithCodeView.tsx
│ │ │ ├── AppWithCodeViewNative.tsx
│ │ │ ├── defaultProps.tsx
│ │ │ ├── logo.svg
│ │ │ ├── NestedApp.module.scss
│ │ │ ├── NestedApp.tsx
│ │ │ ├── NestedAppNative.tsx
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.tsx
│ │ │ └── utils.ts
│ │ ├── NoResult
│ │ │ ├── NoResult.md
│ │ │ ├── NoResult.module.scss
│ │ │ ├── NoResult.spec.ts
│ │ │ ├── NoResult.tsx
│ │ │ └── NoResultNative.tsx
│ │ ├── NumberBox
│ │ │ ├── numberbox-abstractions.ts
│ │ │ ├── NumberBox.md
│ │ │ ├── NumberBox.module.scss
│ │ │ ├── NumberBox.spec.ts
│ │ │ ├── NumberBox.tsx
│ │ │ └── NumberBoxNative.tsx
│ │ ├── Option
│ │ │ ├── Option.md
│ │ │ ├── Option.spec.ts
│ │ │ ├── Option.tsx
│ │ │ ├── OptionNative.tsx
│ │ │ └── OptionTypeProvider.tsx
│ │ ├── PageMetaTitle
│ │ │ ├── PageMetaTilteNative.tsx
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── PageMetaTitle.spec.ts
│ │ │ └── PageMetaTitle.tsx
│ │ ├── Pages
│ │ │ ├── Page.md
│ │ │ ├── Pages.md
│ │ │ ├── Pages.module.scss
│ │ │ ├── Pages.tsx
│ │ │ └── PagesNative.tsx
│ │ ├── Pagination
│ │ │ ├── Pagination.md
│ │ │ ├── Pagination.module.scss
│ │ │ ├── Pagination.spec.ts
│ │ │ ├── Pagination.tsx
│ │ │ └── PaginationNative.tsx
│ │ ├── PositionedContainer
│ │ │ ├── PositionedContainer.module.scss
│ │ │ ├── PositionedContainer.tsx
│ │ │ └── PositionedContainerNative.tsx
│ │ ├── ProfileMenu
│ │ │ ├── ProfileMenu.module.scss
│ │ │ └── ProfileMenu.tsx
│ │ ├── ProgressBar
│ │ │ ├── ProgressBar.md
│ │ │ ├── ProgressBar.module.scss
│ │ │ ├── ProgressBar.spec.ts
│ │ │ ├── ProgressBar.tsx
│ │ │ └── ProgressBarNative.tsx
│ │ ├── Queue
│ │ │ ├── Queue.md
│ │ │ ├── Queue.spec.ts
│ │ │ ├── Queue.tsx
│ │ │ ├── queueActions.ts
│ │ │ └── QueueNative.tsx
│ │ ├── RadioGroup
│ │ │ ├── RadioGroup.md
│ │ │ ├── RadioGroup.module.scss
│ │ │ ├── RadioGroup.spec.ts
│ │ │ ├── RadioGroup.tsx
│ │ │ ├── RadioGroupNative.tsx
│ │ │ ├── RadioItem.tsx
│ │ │ └── RadioItemNative.tsx
│ │ ├── RealTimeAdapter
│ │ │ ├── RealTimeAdapter.tsx
│ │ │ └── RealTimeAdapterNative.tsx
│ │ ├── Redirect
│ │ │ ├── Redirect.md
│ │ │ ├── Redirect.spec.ts
│ │ │ └── Redirect.tsx
│ │ ├── ResponsiveBar
│ │ │ ├── README.md
│ │ │ ├── ResponsiveBar.md
│ │ │ ├── ResponsiveBar.module.scss
│ │ │ ├── ResponsiveBar.spec.ts
│ │ │ ├── ResponsiveBar.tsx
│ │ │ └── ResponsiveBarNative.tsx
│ │ ├── Select
│ │ │ ├── HiddenOption.tsx
│ │ │ ├── OptionContext.ts
│ │ │ ├── Select.md
│ │ │ ├── Select.module.scss
│ │ │ ├── Select.spec.ts
│ │ │ ├── Select.tsx
│ │ │ ├── SelectContext.tsx
│ │ │ └── SelectNative.tsx
│ │ ├── SelectionStore
│ │ │ ├── SelectionStore.md
│ │ │ ├── SelectionStore.tsx
│ │ │ └── SelectionStoreNative.tsx
│ │ ├── Slider
│ │ │ ├── Slider.md
│ │ │ ├── Slider.module.scss
│ │ │ ├── Slider.spec.ts
│ │ │ ├── Slider.tsx
│ │ │ └── SliderNative.tsx
│ │ ├── Slot
│ │ │ ├── Slot.md
│ │ │ ├── Slot.spec.ts
│ │ │ └── Slot.ts
│ │ ├── SlotItem.tsx
│ │ ├── SpaceFiller
│ │ │ ├── SpaceFiller.md
│ │ │ ├── SpaceFiller.module.scss
│ │ │ ├── SpaceFiller.spec.ts
│ │ │ ├── SpaceFiller.tsx
│ │ │ └── SpaceFillerNative.tsx
│ │ ├── Spinner
│ │ │ ├── Spinner.md
│ │ │ ├── Spinner.module.scss
│ │ │ ├── Spinner.spec.ts
│ │ │ ├── Spinner.tsx
│ │ │ └── SpinnerNative.tsx
│ │ ├── Splitter
│ │ │ ├── HSplitter.md
│ │ │ ├── HSplitter.spec.ts
│ │ │ ├── Splitter.md
│ │ │ ├── Splitter.module.scss
│ │ │ ├── Splitter.spec.ts
│ │ │ ├── Splitter.tsx
│ │ │ ├── SplitterNative.tsx
│ │ │ ├── utils.ts
│ │ │ ├── VSplitter.md
│ │ │ └── VSplitter.spec.ts
│ │ ├── Stack
│ │ │ ├── CHStack.md
│ │ │ ├── CHStack.spec.ts
│ │ │ ├── CVStack.md
│ │ │ ├── CVStack.spec.ts
│ │ │ ├── HStack.md
│ │ │ ├── HStack.spec.ts
│ │ │ ├── Stack.md
│ │ │ ├── Stack.module.scss
│ │ │ ├── Stack.spec.ts
│ │ │ ├── Stack.tsx
│ │ │ ├── StackNative.tsx
│ │ │ ├── VStack.md
│ │ │ └── VStack.spec.ts
│ │ ├── StickyBox
│ │ │ ├── StickyBox.md
│ │ │ ├── StickyBox.module.scss
│ │ │ ├── StickyBox.tsx
│ │ │ └── StickyBoxNative.tsx
│ │ ├── Switch
│ │ │ ├── Switch.md
│ │ │ ├── Switch.spec.ts
│ │ │ └── Switch.tsx
│ │ ├── Table
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── react-table-config.d.ts
│ │ │ ├── Table.md
│ │ │ ├── Table.module.scss
│ │ │ ├── Table.spec.ts
│ │ │ ├── Table.tsx
│ │ │ ├── TableNative.tsx
│ │ │ └── useRowSelection.tsx
│ │ ├── TableOfContents
│ │ │ ├── TableOfContents.module.scss
│ │ │ ├── TableOfContents.spec.ts
│ │ │ ├── TableOfContents.tsx
│ │ │ └── TableOfContentsNative.tsx
│ │ ├── Tabs
│ │ │ ├── TabContext.tsx
│ │ │ ├── TabItem.md
│ │ │ ├── TabItem.tsx
│ │ │ ├── TabItemNative.tsx
│ │ │ ├── Tabs.md
│ │ │ ├── Tabs.module.scss
│ │ │ ├── Tabs.spec.ts
│ │ │ ├── Tabs.tsx
│ │ │ └── TabsNative.tsx
│ │ ├── Text
│ │ │ ├── Text.md
│ │ │ ├── Text.module.scss
│ │ │ ├── Text.spec.ts
│ │ │ ├── Text.tsx
│ │ │ └── TextNative.tsx
│ │ ├── TextArea
│ │ │ ├── TextArea.md
│ │ │ ├── TextArea.module.scss
│ │ │ ├── TextArea.spec.ts
│ │ │ ├── TextArea.tsx
│ │ │ ├── TextAreaNative.tsx
│ │ │ ├── TextAreaResizable.tsx
│ │ │ └── useComposedRef.ts
│ │ ├── TextBox
│ │ │ ├── TextBox.md
│ │ │ ├── TextBox.module.scss
│ │ │ ├── TextBox.spec.ts
│ │ │ ├── TextBox.tsx
│ │ │ └── TextBoxNative.tsx
│ │ ├── Theme
│ │ │ ├── NotificationToast.tsx
│ │ │ ├── Theme.md
│ │ │ ├── Theme.module.scss
│ │ │ ├── Theme.spec.ts
│ │ │ ├── Theme.tsx
│ │ │ └── ThemeNative.tsx
│ │ ├── TimeInput
│ │ │ ├── TimeInput.md
│ │ │ ├── TimeInput.module.scss
│ │ │ ├── TimeInput.spec.ts
│ │ │ ├── TimeInput.tsx
│ │ │ ├── TimeInputNative.tsx
│ │ │ └── utils.ts
│ │ ├── Timer
│ │ │ ├── Timer.md
│ │ │ ├── Timer.spec.ts
│ │ │ ├── Timer.tsx
│ │ │ └── TimerNative.tsx
│ │ ├── Toggle
│ │ │ ├── Toggle.module.scss
│ │ │ └── Toggle.tsx
│ │ ├── ToneChangerButton
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneChangerButton.spec.ts
│ │ │ └── ToneChangerButton.tsx
│ │ ├── ToneSwitch
│ │ │ ├── ToneSwitch.md
│ │ │ ├── ToneSwitch.module.scss
│ │ │ ├── ToneSwitch.spec.ts
│ │ │ ├── ToneSwitch.tsx
│ │ │ └── ToneSwitchNative.tsx
│ │ ├── Tooltip
│ │ │ ├── Tooltip.md
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.spec.ts
│ │ │ ├── Tooltip.tsx
│ │ │ └── TooltipNative.tsx
│ │ ├── Tree
│ │ │ ├── testData.ts
│ │ │ ├── Tree-dynamic.spec.ts
│ │ │ ├── Tree-icons.spec.ts
│ │ │ ├── Tree.md
│ │ │ ├── Tree.spec.ts
│ │ │ ├── TreeComponent.module.scss
│ │ │ ├── TreeComponent.tsx
│ │ │ └── TreeNative.tsx
│ │ ├── TreeDisplay
│ │ │ ├── TreeDisplay.md
│ │ │ ├── TreeDisplay.module.scss
│ │ │ ├── TreeDisplay.tsx
│ │ │ └── TreeDisplayNative.tsx
│ │ ├── ValidationSummary
│ │ │ ├── ValidationSummary.module.scss
│ │ │ └── ValidationSummary.tsx
│ │ └── VisuallyHidden.tsx
│ ├── components-core
│ │ ├── abstractions
│ │ │ ├── ComponentRenderer.ts
│ │ │ ├── LoaderRenderer.ts
│ │ │ ├── standalone.ts
│ │ │ └── treeAbstractions.ts
│ │ ├── action
│ │ │ ├── actions.ts
│ │ │ ├── APICall.tsx
│ │ │ ├── FileDownloadAction.tsx
│ │ │ ├── FileUploadAction.tsx
│ │ │ ├── NavigateAction.tsx
│ │ │ └── TimedAction.tsx
│ │ ├── ApiBoundComponent.tsx
│ │ ├── appContext
│ │ │ ├── date-functions.ts
│ │ │ ├── math-function.ts
│ │ │ └── misc-utils.ts
│ │ ├── AppContext.tsx
│ │ ├── behaviors
│ │ │ ├── Behavior.tsx
│ │ │ └── CoreBehaviors.tsx
│ │ ├── component-hooks.ts
│ │ ├── ComponentDecorator.tsx
│ │ ├── ComponentViewer.tsx
│ │ ├── CompoundComponent.tsx
│ │ ├── constants.ts
│ │ ├── DebugViewProvider.tsx
│ │ ├── descriptorHelper.ts
│ │ ├── devtools
│ │ │ ├── InspectorDialog.module.scss
│ │ │ ├── InspectorDialog.tsx
│ │ │ └── InspectorDialogVisibilityContext.tsx
│ │ ├── EngineError.ts
│ │ ├── event-handlers.ts
│ │ ├── InspectorButton.module.scss
│ │ ├── InspectorContext.tsx
│ │ ├── interception
│ │ │ ├── abstractions.ts
│ │ │ ├── ApiInterceptor.ts
│ │ │ ├── ApiInterceptorProvider.tsx
│ │ │ ├── apiInterceptorWorker.ts
│ │ │ ├── Backend.ts
│ │ │ ├── Errors.ts
│ │ │ ├── IndexedDb.ts
│ │ │ ├── initMock.ts
│ │ │ ├── InMemoryDb.ts
│ │ │ ├── ReadonlyCollection.ts
│ │ │ └── useApiInterceptorContext.tsx
│ │ ├── loader
│ │ │ ├── ApiLoader.tsx
│ │ │ ├── DataLoader.tsx
│ │ │ ├── ExternalDataLoader.tsx
│ │ │ ├── Loader.tsx
│ │ │ ├── MockLoaderRenderer.tsx
│ │ │ └── PageableLoader.tsx
│ │ ├── LoaderComponent.tsx
│ │ ├── markup-check.ts
│ │ ├── parts.ts
│ │ ├── renderers.ts
│ │ ├── rendering
│ │ │ ├── AppContent.tsx
│ │ │ ├── AppRoot.tsx
│ │ │ ├── AppWrapper.tsx
│ │ │ ├── buildProxy.ts
│ │ │ ├── collectFnVarDeps.ts
│ │ │ ├── ComponentAdapter.tsx
│ │ │ ├── ComponentWrapper.tsx
│ │ │ ├── Container.tsx
│ │ │ ├── containers.ts
│ │ │ ├── ContainerWrapper.tsx
│ │ │ ├── ErrorBoundary.module.scss
│ │ │ ├── ErrorBoundary.tsx
│ │ │ ├── InvalidComponent.module.scss
│ │ │ ├── InvalidComponent.tsx
│ │ │ ├── nodeUtils.ts
│ │ │ ├── reducer.ts
│ │ │ ├── renderChild.tsx
│ │ │ ├── StandaloneComponent.tsx
│ │ │ ├── StateContainer.tsx
│ │ │ ├── UnknownComponent.module.scss
│ │ │ ├── UnknownComponent.tsx
│ │ │ └── valueExtractor.ts
│ │ ├── reportEngineError.ts
│ │ ├── RestApiProxy.ts
│ │ ├── script-runner
│ │ │ ├── asyncProxy.ts
│ │ │ ├── AttributeValueParser.ts
│ │ │ ├── bannedFunctions.ts
│ │ │ ├── BindingTreeEvaluationContext.ts
│ │ │ ├── eval-tree-async.ts
│ │ │ ├── eval-tree-common.ts
│ │ │ ├── eval-tree-sync.ts
│ │ │ ├── ParameterParser.ts
│ │ │ ├── process-statement-async.ts
│ │ │ ├── process-statement-common.ts
│ │ │ ├── process-statement-sync.ts
│ │ │ ├── ScriptingSourceTree.ts
│ │ │ ├── simplify-expression.ts
│ │ │ ├── statement-queue.ts
│ │ │ └── visitors.ts
│ │ ├── StandaloneApp.tsx
│ │ ├── StandaloneExtensionManager.ts
│ │ ├── TableOfContentsContext.tsx
│ │ ├── theming
│ │ │ ├── _themes.scss
│ │ │ ├── component-layout-resolver.ts
│ │ │ ├── extendThemeUtils.ts
│ │ │ ├── hvar.ts
│ │ │ ├── layout-resolver.ts
│ │ │ ├── parse-layout-props.ts
│ │ │ ├── StyleContext.tsx
│ │ │ ├── StyleRegistry.ts
│ │ │ ├── ThemeContext.tsx
│ │ │ ├── ThemeProvider.tsx
│ │ │ ├── themes
│ │ │ │ ├── base-utils.ts
│ │ │ │ ├── palette.ts
│ │ │ │ ├── root.ts
│ │ │ │ ├── solid.ts
│ │ │ │ ├── theme-colors.ts
│ │ │ │ └── xmlui.ts
│ │ │ ├── themeVars.module.scss
│ │ │ ├── themeVars.ts
│ │ │ ├── transformThemeVars.ts
│ │ │ └── utils.ts
│ │ ├── utils
│ │ │ ├── actionUtils.ts
│ │ │ ├── audio-utils.ts
│ │ │ ├── base64-utils.ts
│ │ │ ├── compound-utils.ts
│ │ │ ├── css-utils.ts
│ │ │ ├── DataLoaderQueryKeyGenerator.ts
│ │ │ ├── date-utils.ts
│ │ │ ├── extractParam.ts
│ │ │ ├── hooks.tsx
│ │ │ ├── LruCache.ts
│ │ │ ├── mergeProps.ts
│ │ │ ├── misc.ts
│ │ │ ├── request-params.ts
│ │ │ ├── statementUtils.ts
│ │ │ └── treeUtils.ts
│ │ └── xmlui-parser.ts
│ ├── index-standalone.ts
│ ├── index.scss
│ ├── index.ts
│ ├── language-server
│ │ ├── server-common.ts
│ │ ├── server-web-worker.ts
│ │ ├── server.ts
│ │ ├── services
│ │ │ ├── common
│ │ │ │ ├── docs-generation.ts
│ │ │ │ ├── lsp-utils.ts
│ │ │ │ ├── metadata-utils.ts
│ │ │ │ └── syntax-node-utilities.ts
│ │ │ ├── completion.ts
│ │ │ ├── diagnostic.ts
│ │ │ ├── format.ts
│ │ │ └── hover.ts
│ │ └── xmlui-metadata-generated.js
│ ├── logging
│ │ ├── LoggerContext.tsx
│ │ ├── LoggerInitializer.tsx
│ │ ├── LoggerService.ts
│ │ └── xmlui.ts
│ ├── logo.svg
│ ├── parsers
│ │ ├── common
│ │ │ ├── GenericToken.ts
│ │ │ ├── InputStream.ts
│ │ │ └── utils.ts
│ │ ├── scripting
│ │ │ ├── code-behind-collect.ts
│ │ │ ├── Lexer.ts
│ │ │ ├── modules.ts
│ │ │ ├── Parser.ts
│ │ │ ├── ParserError.ts
│ │ │ ├── ScriptingNodeTypes.ts
│ │ │ ├── TokenTrait.ts
│ │ │ ├── TokenType.ts
│ │ │ └── tree-visitor.ts
│ │ ├── style-parser
│ │ │ ├── errors.ts
│ │ │ ├── source-tree.ts
│ │ │ ├── StyleInputStream.ts
│ │ │ ├── StyleLexer.ts
│ │ │ ├── StyleParser.ts
│ │ │ └── tokens.ts
│ │ └── xmlui-parser
│ │ ├── CharacterCodes.ts
│ │ ├── diagnostics.ts
│ │ ├── fileExtensions.ts
│ │ ├── index.ts
│ │ ├── lint.ts
│ │ ├── parser.ts
│ │ ├── ParserError.ts
│ │ ├── scanner.ts
│ │ ├── syntax-kind.ts
│ │ ├── syntax-node.ts
│ │ ├── transform.ts
│ │ ├── utils.ts
│ │ ├── xmlui-serializer.ts
│ │ └── xmlui-tree.ts
│ ├── react-app-env.d.ts
│ ├── syntax
│ │ ├── monaco
│ │ │ ├── grammar.monacoLanguage.ts
│ │ │ ├── index.ts
│ │ │ ├── xmlui-dark.ts
│ │ │ ├── xmlui-light.ts
│ │ │ └── xmluiscript.monacoLanguage.ts
│ │ └── textMate
│ │ ├── index.ts
│ │ ├── xmlui-dark.json
│ │ ├── xmlui-light.json
│ │ ├── xmlui.json
│ │ └── xmlui.tmLanguage.json
│ ├── testing
│ │ ├── assertions.ts
│ │ ├── component-test-helpers.ts
│ │ ├── ComponentDrivers.ts
│ │ ├── drivers
│ │ │ ├── DateInputDriver.ts
│ │ │ ├── index.ts
│ │ │ ├── ModalDialogDriver.ts
│ │ │ ├── NumberBoxDriver.ts
│ │ │ ├── TextBoxDriver.ts
│ │ │ ├── TimeInputDriver.ts
│ │ │ ├── TimerDriver.ts
│ │ │ └── TreeDriver.ts
│ │ ├── fixtures.ts
│ │ ├── index.ts
│ │ ├── infrastructure
│ │ │ ├── index.html
│ │ │ ├── main.tsx
│ │ │ ├── public
│ │ │ │ ├── mockServiceWorker.js
│ │ │ │ ├── resources
│ │ │ │ │ ├── bell.svg
│ │ │ │ │ ├── box.svg
│ │ │ │ │ ├── doc.svg
│ │ │ │ │ ├── eye.svg
│ │ │ │ │ ├── flower-640x480.jpg
│ │ │ │ │ ├── sun.svg
│ │ │ │ │ ├── test-image-100x100.jpg
│ │ │ │ │ └── txt.svg
│ │ │ │ └── serve.json
│ │ │ └── TestBed.tsx
│ │ └── themed-app-test-helpers.ts
│ └── vite-env.d.ts
├── tests
│ ├── components
│ │ ├── CodeBlock
│ │ │ └── hightlight-code.test.ts
│ │ ├── playground-pattern.test.ts
│ │ └── Tree
│ │ └── Tree-states.test.ts
│ ├── components-core
│ │ ├── abstractions
│ │ │ └── treeAbstractions.test.ts
│ │ ├── container
│ │ │ └── buildProxy.test.ts
│ │ ├── interception
│ │ │ ├── orderBy.test.ts
│ │ │ ├── ReadOnlyCollection.test.ts
│ │ │ └── request-param-converter.test.ts
│ │ ├── scripts-runner
│ │ │ ├── AttributeValueParser.test.ts
│ │ │ ├── eval-tree-arrow-async.test.ts
│ │ │ ├── eval-tree-arrow.test.ts
│ │ │ ├── eval-tree-func-decl-async.test.ts
│ │ │ ├── eval-tree-func-decl.test.ts
│ │ │ ├── eval-tree-pre-post.test.ts
│ │ │ ├── eval-tree-regression.test.ts
│ │ │ ├── eval-tree.test.ts
│ │ │ ├── function-proxy.test.ts
│ │ │ ├── parser-regression.test.ts
│ │ │ ├── process-event.test.ts
│ │ │ ├── process-function.test.ts
│ │ │ ├── process-implicit-context.test.ts
│ │ │ ├── process-statement-asgn.test.ts
│ │ │ ├── process-statement-destruct.test.ts
│ │ │ ├── process-statement-regs.test.ts
│ │ │ ├── process-statement-sync.test.ts
│ │ │ ├── process-statement.test.ts
│ │ │ ├── process-switch-sync.test.ts
│ │ │ ├── process-switch.test.ts
│ │ │ ├── process-try-sync.test.ts
│ │ │ ├── process-try.test.ts
│ │ │ └── test-helpers.ts
│ │ ├── test-metadata-handler.ts
│ │ ├── theming
│ │ │ ├── border-segments.test.ts
│ │ │ ├── component-layout.resolver.test.ts
│ │ │ ├── layout-property-parser.test.ts
│ │ │ ├── layout-resolver.test.ts
│ │ │ ├── layout-resolver2.test.ts
│ │ │ ├── layout-vp-override.test.ts
│ │ │ └── padding-segments.test.ts
│ │ └── utils
│ │ ├── date-utils.test.ts
│ │ ├── format-human-elapsed-time.test.ts
│ │ └── LruCache.test.ts
│ ├── language-server
│ │ ├── completion.test.ts
│ │ ├── format.test.ts
│ │ ├── hover.test.ts
│ │ └── mockData.ts
│ └── parsers
│ ├── common
│ │ └── input-stream.test.ts
│ ├── markdown
│ │ └── parse-binding-expression.test.ts
│ ├── parameter-parser.test.ts
│ ├── paremeter-parser.test.ts
│ ├── scripting
│ │ ├── eval-tree-arrow.test.ts
│ │ ├── eval-tree-pre-post.test.ts
│ │ ├── eval-tree.test.ts
│ │ ├── function-proxy.test.ts
│ │ ├── lexer-literals.test.ts
│ │ ├── lexer-misc.test.ts
│ │ ├── module-parse.test.ts
│ │ ├── parser-arrow.test.ts
│ │ ├── parser-assignments.test.ts
│ │ ├── parser-binary.test.ts
│ │ ├── parser-destructuring.test.ts
│ │ ├── parser-errors.test.ts
│ │ ├── parser-expressions.test.ts
│ │ ├── parser-function.test.ts
│ │ ├── parser-literals.test.ts
│ │ ├── parser-primary.test.ts
│ │ ├── parser-regex.test.ts
│ │ ├── parser-statements.test.ts
│ │ ├── parser-unary.test.ts
│ │ ├── process-event.test.ts
│ │ ├── process-implicit-context.test.ts
│ │ ├── process-statement-asgn.test.ts
│ │ ├── process-statement-destruct.test.ts
│ │ ├── process-statement-regs.test.ts
│ │ ├── process-statement-sync.test.ts
│ │ ├── process-statement.test.ts
│ │ ├── process-switch-sync.test.ts
│ │ ├── process-switch.test.ts
│ │ ├── process-try-sync.test.ts
│ │ ├── process-try.test.ts
│ │ ├── simplify-expression.test.ts
│ │ ├── statement-hooks.test.ts
│ │ └── test-helpers.ts
│ ├── style-parser
│ │ ├── generateHvarChain.test.ts
│ │ ├── parseHVar.test.ts
│ │ ├── parser.test.ts
│ │ └── tokens.test.ts
│ └── xmlui
│ ├── lint.test.ts
│ ├── parser.test.ts
│ ├── scanner.test.ts
│ ├── transform.attr.test.ts
│ ├── transform.circular.test.ts
│ ├── transform.element.test.ts
│ ├── transform.errors.test.ts
│ ├── transform.escape.test.ts
│ ├── transform.regression.test.ts
│ ├── transform.script.test.ts
│ ├── transform.test.ts
│ └── xmlui.ts
├── tests-e2e
│ ├── api-bound-component-regression.spec.ts
│ ├── api-call-as-extracted-component.spec.ts
│ ├── assign-to-object-or-array-regression.spec.ts
│ ├── binding-regression.spec.ts
│ ├── children-as-template-context-vars.spec.ts
│ ├── compound-component.spec.ts
│ ├── context-vars-regression.spec.ts
│ ├── data-bindings.spec.ts
│ ├── datasource-and-api-usage-in-var.spec.ts
│ ├── datasource-direct-binding.spec.ts
│ ├── datasource-onLoaded-regression.spec.ts
│ ├── modify-array-item-regression.spec.ts
│ ├── namespaces.spec.ts
│ ├── push-to-array-regression.spec.ts
│ ├── screen-breakpoints.spec.ts
│ ├── scripting.spec.ts
│ ├── state-scope-in-pages.spec.ts
│ └── state-var-scopes.spec.ts
├── tsconfig.json
├── tsdown.config.ts
├── vite.config.ts
└── vitest.config.ts
```
# Files
--------------------------------------------------------------------------------
/xmlui/tests/parsers/xmlui/scanner.test.ts:
--------------------------------------------------------------------------------
```typescript
import { describe, expect, it } from "vitest";
import { SyntaxKind } from "../../../src/parsers/xmlui-parser/syntax-kind";
import { createScanner } from "../../../src/parsers/xmlui-parser/scanner";
import type { ScannerDiagnosticMessage } from "../../../src/parsers/xmlui-parser/diagnostics";
import { DiagnosticCategory } from "../../../src/parsers/xmlui-parser/diagnostics";
import { CharacterCodes } from "../../../src/parsers/xmlui-parser/CharacterCodes";
describe("XMLUI scanner - tokens", () => {
const miscCases = [
{ src: "<", exp: SyntaxKind.OpenNodeStart },
{ src: "</", exp: SyntaxKind.CloseNodeStart },
{ src: ">", exp: SyntaxKind.NodeEnd },
{ src: "/>", exp: SyntaxKind.NodeClose },
{ src: "=", exp: SyntaxKind.Equal },
{ src: ":", exp: SyntaxKind.Colon },
{ src: "&", exp: SyntaxKind.AmpersandEntity },
{ src: "<", exp: SyntaxKind.LessThanEntity },
{ src: ">", exp: SyntaxKind.GreaterThanEntity },
{ src: "'", exp: SyntaxKind.SingleQuoteEntity },
{ src: """, exp: SyntaxKind.DoubleQuoteEntity },
];
miscCases.forEach((c) => {
it(`Token (with skipTrivia) ${c.src} #1`, () => {
const scanner = createScanner(true, c.src);
// --- Act
const next = scanner.scan();
const text = scanner.getTokenText();
const pos = scanner.getTokenStart();
const end = scanner.getTokenEnd();
// --- Assert
expect(next).equal(c.exp);
expect(text).equal(c.src);
expect(pos).equal(0);
expect(end).equal(c.src.length);
});
it(`Token (with trivia) ${c.src} #1`, () => {
const scanner = createScanner(false, c.src);
// --- Act
const next = scanner.scan();
const text = scanner.getTokenText();
const pos = scanner.getTokenStart();
const end = scanner.getTokenEnd();
// --- Assert
expect(next).equal(c.exp);
expect(text).equal(c.src);
expect(pos).equal(0);
expect(end).equal(c.src.length);
});
it(`Token (with trivia) ${c.src} #2`, () => {
const scanner = createScanner(false, " " + c.src + " ");
// --- Act
const trivia1 = scanner.scan();
const text1 = scanner.getTokenText();
const pos1 = scanner.getTokenStart();
const end1 = scanner.getTokenEnd();
const next = scanner.scan();
const text = scanner.getTokenText();
const pos = scanner.getTokenStart();
const end = scanner.getTokenEnd();
const trivia2 = scanner.scan();
const text2 = scanner.getTokenText();
const pos2 = scanner.getTokenStart();
const end2 = scanner.getTokenEnd();
// --- Assert
expect(trivia1).equal(SyntaxKind.WhitespaceTrivia);
expect(text1).equal(" ");
expect(pos1).equal(0);
expect(end1).equal(2);
expect(next).equal(c.exp);
expect(text).equal(c.src);
expect(pos).equal(2);
expect(end).equal(2 + c.src.length);
expect(trivia2).equal(SyntaxKind.WhitespaceTrivia);
expect(text2).equal(" ");
expect(pos2).equal(2 + c.src.length);
expect(end2).equal(2 + c.src.length + 3);
});
it(`Token (with trivia) ${c.src} #3`, () => {
const scanner = createScanner(false, "\n" + c.src + " ");
// --- Act
const trivia1 = scanner.scan();
const text1 = scanner.getTokenText();
const pos1 = scanner.getTokenStart();
const end1 = scanner.getTokenEnd();
const next = scanner.scan();
const text = scanner.getTokenText();
const pos = scanner.getTokenStart();
const end = scanner.getTokenEnd();
const trivia2 = scanner.scan();
const text2 = scanner.getTokenText();
const pos2 = scanner.getTokenStart();
const end2 = scanner.getTokenEnd();
// --- Assert
expect(trivia1).equal(SyntaxKind.NewLineTrivia);
expect(text1).equal("\n");
expect(pos1).equal(0);
expect(end1).equal(1);
expect(next).equal(c.exp);
expect(text).equal(c.src);
expect(pos).equal(1);
expect(end).equal(1 + c.src.length);
expect(trivia2).equal(SyntaxKind.WhitespaceTrivia);
expect(text2).equal(" ");
expect(pos2).equal(1 + c.src.length);
expect(end2).equal(1 + c.src.length + 3);
});
});
it("Comment (single trivia)", () => {
const source = "<!-- This is a comment -->";
const scanner = createScanner(false, source);
// --- Act
const next = scanner.scan();
const text = scanner.getTokenText();
const pos = scanner.getTokenStart();
const end = scanner.getTokenEnd();
// --- Assert
expect(next).equal(SyntaxKind.CommentTrivia);
expect(text).equal(source);
expect(pos).equal(0);
expect(end).equal(source.length);
});
it("Comment (multiple trivia) #1", () => {
const source = "<!-- This is a comment -->";
const scanner = createScanner(false, " " + source + " ");
// --- Act
const trivia1 = scanner.scan();
const text1 = scanner.getTokenText();
const pos1 = scanner.getTokenStart();
const end1 = scanner.getTokenEnd();
const next = scanner.scan();
const text = scanner.getTokenText();
const pos = scanner.getTokenStart();
const end = scanner.getTokenEnd();
const trivia2 = scanner.scan();
const text2 = scanner.getTokenText();
const pos2 = scanner.getTokenStart();
const end2 = scanner.getTokenEnd();
// --- Assert
expect(trivia1).equal(SyntaxKind.WhitespaceTrivia);
expect(text1).equal(" ");
expect(pos1).equal(0);
expect(end1).equal(2);
expect(next).equal(SyntaxKind.CommentTrivia);
expect(text).equal(source);
expect(pos).equal(2);
expect(end).equal(2 + source.length);
expect(trivia2).equal(SyntaxKind.WhitespaceTrivia);
expect(text2).equal(" ");
expect(pos2).equal(2 + source.length);
expect(end2).equal(2 + source.length + 3);
});
const idCases = ["_", "hello", "qwe123", "qwe_123", "abc-def", "abc.def"];
idCases.forEach((c) => {
it(`Id (with skipTrivia) ${c} #1`, () => {
const scanner = createScanner(true, c);
// --- Act
const next = scanner.scan();
const text = scanner.getTokenText();
const pos = scanner.getTokenStart();
const end = scanner.getTokenEnd();
// --- Assert
expect(next).equal(SyntaxKind.Identifier);
expect(text).equal(c);
expect(pos).equal(0);
expect(end).equal(c.length);
});
});
const stringCases: string[] = [
"'a`bc'",
"'a`bc'",
"''",
"'abc'",
"'abc,def,1234:#'",
'"\\bdef"',
"''",
"`abc`",
"`abc,def,1234:#`",
"`\\bdef`",
'""',
'"abc"',
'"abc,def,1234:#"',
'"\\bdef"',
'"\\fdef"',
'"\\ndef"',
'"\\rdef"',
'"\\tdef"',
'"\\vdef"',
'"\\0def"',
'"\\\'def"',
'"\\\\def"',
'"\\qdef"',
'"\\x40def"',
'"abd\\bdef"',
'"abd\\fdef"',
'"abd\\ndef"',
'"abd\\rdef"',
'"abd\\tdef"',
'"abd\\vdef"',
'"abd\\0def"',
'"abd\\\'def"',
'"abd\\\\def"',
'"abd\\qdef"',
'"abd\\x40def"',
'"abd\\b"',
'"abd\\f"',
'"abd\\n"',
'"abd\\r"',
'"abd\\t"',
'"abd\\v"',
'"abd\\0"',
'"abd\\\'"',
'"abd\\\\"',
'"abd\\q"',
'"abd\\x40"',
'"abd\\u1234"',
"'abc'",
"'abc,def,1234:#'",
"'\\bdef'",
];
stringCases.forEach((c, idx) => {
it(`String #${idx + 1}: ${c}`, () => {
const scanner = createScanner(true, c);
// --- Act
const next = scanner.scan();
const text = scanner.getTokenText();
const pos = scanner.getTokenStart();
const end = scanner.getTokenEnd();
// --- Assert
expect(next).equal(SyntaxKind.StringLiteral);
expect(text).equal(c);
expect(pos).equal(0);
expect(end).equal(c.length);
});
});
it("EOF #1", () => {
const source = "";
const scanner = createScanner(false, "");
// --- Act
const next = scanner.scan();
const text = scanner.getTokenText();
const pos = scanner.getTokenStart();
const end = scanner.getTokenEnd();
// --- Assert
expect(next).equal(SyntaxKind.EndOfFileToken);
expect(text).equal(source);
expect(pos).equal(0);
expect(end).equal(0);
});
it("EOF #2", () => {
const source = "";
const scanner = createScanner(true, " ");
// --- Act
const next = scanner.scan();
const text = scanner.getTokenText();
const pos = scanner.getTokenStart();
const end = scanner.getTokenEnd();
// --- Assert
expect(next).equal(SyntaxKind.EndOfFileToken);
expect(text).equal(source);
expect(pos).equal(2);
expect(end).equal(2);
});
it("EOF #3", () => {
const source = "";
const scanner = createScanner(false, " ");
// --- Act
const trivia1 = scanner.scan();
const text1 = scanner.getTokenText();
const pos1 = scanner.getTokenStart();
const end1 = scanner.getTokenEnd();
const next = scanner.scan();
const text = scanner.getTokenText();
const pos = scanner.getTokenStart();
const end = scanner.getTokenEnd();
// --- Assert
expect(trivia1).equal(SyntaxKind.WhitespaceTrivia);
expect(text1).equal(" ");
expect(pos1).equal(0);
expect(end1).equal(2);
expect(next).equal(SyntaxKind.EndOfFileToken);
expect(text).equal(source);
expect(pos).equal(2);
expect(end).equal(2);
});
it("Error: unknown token", () => {
const msgs: ScannerDiagnosticMessage[] = [];
const scanner = createScanner(true, "123wer", (err) => {
msgs.push(err);
});
// --- Act
const next = scanner.scan();
const text = scanner.getTokenText();
const pos = scanner.getTokenStart();
const end = scanner.getTokenEnd();
// --- Assert
expect(next).equal(SyntaxKind.Unknown);
expect(text).equal("1");
expect(msgs.length).equal(1);
expect(msgs[0].category).equal(DiagnosticCategory.Error);
expect(msgs[0].code).equal("W001");
});
it("Error: unterminated string literal #1", () => {
const msgs: ScannerDiagnosticMessage[] = [];
const scanner = createScanner(true, "'str", (err) => {
msgs.push(err);
});
// --- Act
const next = scanner.scan();
const text = scanner.getTokenText();
// --- Assert
expect(next).equal(SyntaxKind.StringLiteral);
expect(text).equal("'str");
expect(msgs.length).equal(1);
expect(msgs[0].category).equal(DiagnosticCategory.Error);
expect(msgs[0].code).equal("W002");
});
it("Error: unterminated string literal #2", () => {
const msgs: ScannerDiagnosticMessage[] = [];
const scanner = createScanner(true, '"str', (err) => {
msgs.push(err);
});
// --- Act
const next = scanner.scan();
const text = scanner.getTokenText();
// --- Assert
expect(next).equal(SyntaxKind.StringLiteral);
expect(text).equal('"str');
expect(msgs.length).equal(1);
expect(msgs[0].category).equal(DiagnosticCategory.Error);
expect(msgs[0].code).equal("W002");
});
it("Error: unterminated string literal #3", () => {
const msgs: ScannerDiagnosticMessage[] = [];
const scanner = createScanner(true, "`str", (err) => {
msgs.push(err);
});
// --- Act
const next = scanner.scan();
const text = scanner.getTokenText();
// --- Assert
expect(next).equal(SyntaxKind.StringLiteral);
expect(text).equal("`str");
expect(msgs.length).equal(1);
expect(msgs[0].category).equal(DiagnosticCategory.Error);
expect(msgs[0].code).equal("W002");
});
it("scanTrivia #1", () => {
const msgs: ScannerDiagnosticMessage[] = [];
const scanner = createScanner(false, "");
// --- Act
const trivia = scanner.scanTrivia();
// --- Assert
expect(trivia).toBe(null);
});
it("scanTrivia #2", () => {
const msgs: ScannerDiagnosticMessage[] = [];
const scanner = createScanner(false, " ");
// --- Act
const trivia = scanner.scanTrivia();
// --- Assert
expect(trivia).toBe(SyntaxKind.WhitespaceTrivia);
expect(scanner.getTokenEnd()).toBe(3);
});
it("scanTrivia #3", () => {
const msgs: ScannerDiagnosticMessage[] = [];
const scanner = createScanner(false, "< ");
scanner.scan();
// --- Act
const trivia = scanner.scanTrivia();
// --- Assert
expect(trivia).toBe(SyntaxKind.WhitespaceTrivia);
expect(scanner.getTokenStart()).toBe(1);
expect(scanner.getTokenEnd()).toBe(4);
});
it("scanTrivia #3", () => {
const msgs: ScannerDiagnosticMessage[] = [];
const scanner = createScanner(false, "<id ");
scanner.scan();
// --- Act
const trivia = scanner.scanTrivia();
// --- Assert
expect(trivia).toBe(null);
expect(scanner.getTokenStart()).toBe(1);
expect(scanner.getTokenEnd()).toBe(1);
});
it("peekChar #1", () => {
const msgs: ScannerDiagnosticMessage[] = [];
const scanner = createScanner(false, "123456");
// --- Act
const char = scanner.peekChar();
// --- Assert
expect(char).toBe(CharacterCodes._1);
expect(scanner.getTokenStart()).toBe(0);
expect(scanner.getTokenEnd()).toBe(0);
});
it("peekChar #2", () => {
const msgs: ScannerDiagnosticMessage[] = [];
const scanner = createScanner(false, "123456");
scanner.scan();
scanner.scan();
// --- Act
const char = scanner.peekChar();
// --- Assert
expect(char).toBe(CharacterCodes._3);
expect(scanner.getTokenEnd()).toBe(2);
});
it("peekChar #3", () => {
const msgs: ScannerDiagnosticMessage[] = [];
const scanner = createScanner(false, "123456");
// --- Act
const char = scanner.peekChar(4);
// --- Assert
expect(char).toBe(CharacterCodes._5);
expect(scanner.getTokenStart()).toBe(0);
expect(scanner.getTokenEnd()).toBe(0);
});
it("peekChar #4", () => {
const msgs: ScannerDiagnosticMessage[] = [];
const scanner = createScanner(false, "123456");
scanner.scan();
scanner.scan();
// --- Act
const char = scanner.peekChar(2);
// --- Assert
expect(char).toBe(CharacterCodes._5);
expect(scanner.getTokenEnd()).toBe(2);
});
it("CDATA #1", () => {
const source = "<![CDATA[This is it!]]>";
const scanner = createScanner(false, source);
// --- Act
const next = scanner.scan();
// --- Assert
expect(next).toBe(SyntaxKind.CData);
expect(scanner.getTokenStart()).toBe(0);
expect(scanner.getTokenEnd()).toBe(source.length);
});
it("CDATA #2", () => {
const source = " <![CDATA[This is it!]]>";
const scanner = createScanner(true, source);
// --- Act
const next = scanner.scan();
// --- Assert
expect(next).toBe(SyntaxKind.CData);
expect(scanner.getTokenStart()).toBe(3);
expect(scanner.getTokenEnd()).toBe(source.length);
});
it("Error: Unterminated CDATA", () => {
const msgs: ScannerDiagnosticMessage[] = [];
const source = "<![CDATA[This is it!]]";
const scanner = createScanner(true, source, (err) => {
msgs.push(err);
});
// --- Act
const next = scanner.scan();
const text = scanner.getTokenText();
// --- Assert
expect(next).equal(SyntaxKind.CData);
expect(text).equal(source);
expect(msgs.length).equal(1);
expect(msgs[0].category).equal(DiagnosticCategory.Error);
expect(msgs[0].code).equal("W008");
});
});
```
--------------------------------------------------------------------------------
/xmlui/src/components/Pagination/PaginationNative.tsx:
--------------------------------------------------------------------------------
```typescript
import { forwardRef, useEffect, useState, useCallback, useMemo, useRef } from "react";
import classnames from "classnames";
import type { CSSProperties, ReactNode } from "react";
import styles from "./Pagination.module.scss";
import { Button } from "../Button/ButtonNative";
import type { RegisterComponentApiFn, UpdateStateFn } from "../../abstractions/RendererDefs";
import { Text } from "../Text/TextNative";
import { Icon } from "../Icon/IconNative";
import type { OrientationOptions } from "../abstractions";
import type { ComponentApi } from "../../components-core/rendering/ContainerWrapper";
import { ItemWithLabel } from "../FormItem/ItemWithLabel";
import { Select } from "../Select/SelectNative";
import { OptionNative } from "../Option/OptionNative";
export const PageNumberValues = [1, 3, 5] as const;
export type PageNumber = (typeof PageNumberValues)[number];
export const PositionValues = ["start", "center", "end"] as const;
export type Position = (typeof PositionValues)[number];
type Props = {
id?: string;
enabled?: boolean;
itemCount?: number;
pageSize?: number;
pageIndex?: number;
maxVisiblePages?: PageNumber;
showPageInfo?: boolean;
showPageSizeSelector?: boolean;
showCurrentPage?: boolean;
pageSizeOptions?: number[];
orientation?: OrientationOptions;
buttonRowPosition?: Position;
pageSizeSelectorPosition?: Position;
pageInfoPosition?: Position;
hasPrevPage?: boolean;
hasNextPage?: boolean;
onPageDidChange?: (pageIndex: number, pageSize: number, totalItemCount: number) => void;
onPageSizeDidChange?: (pageSize: number) => void;
registerComponentApi?: RegisterComponentApiFn;
updateState?: UpdateStateFn;
style?: CSSProperties;
className?: string;
} & React.HTMLAttributes<HTMLDivElement>;
export const defaultProps: Required<
Pick<
Props,
| "pageSize"
| "pageIndex"
| "maxVisiblePages"
| "showPageInfo"
| "showPageSizeSelector"
| "orientation"
| "buttonRowPosition"
| "showCurrentPage"
| "pageSizeSelectorPosition"
| "pageInfoPosition"
>
> = {
pageSize: 10,
pageIndex: 0,
maxVisiblePages: 1,
showPageInfo: true,
showPageSizeSelector: true,
orientation: "horizontal",
showCurrentPage: true,
pageSizeSelectorPosition: "start",
buttonRowPosition: "center",
pageInfoPosition: "end",
};
interface PaginationAPI extends ComponentApi {
moveFirst: () => void;
moveLast: () => void;
movePrev: () => void;
moveNext: () => void;
currentPage: number;
currentPageSize: number;
}
export const PaginationNative = forwardRef<PaginationAPI, Props>(function PaginationNative(
{
id,
enabled = true,
itemCount,
pageSize = defaultProps.pageSize,
pageIndex = defaultProps.pageIndex,
maxVisiblePages = defaultProps.maxVisiblePages,
showPageInfo = defaultProps.showPageInfo,
showPageSizeSelector = defaultProps.showPageSizeSelector,
showCurrentPage = defaultProps.showCurrentPage,
pageSizeOptions,
orientation = defaultProps.orientation,
buttonRowPosition = defaultProps.buttonRowPosition,
pageSizeSelectorPosition = defaultProps.pageSizeSelectorPosition,
pageInfoPosition = defaultProps.pageInfoPosition,
hasPrevPage,
hasNextPage,
onPageDidChange,
onPageSizeDidChange,
registerComponentApi,
updateState,
style,
className,
...rest
},
ref,
) {
// Check if we have valid itemCount for full pagination
const hasValidItemCount = typeof itemCount === "number" && itemCount >= 0;
// Calculate pagination values only when itemCount is valid
const totalPages = hasValidItemCount ? Math.max(1, Math.ceil(itemCount / pageSize)) : 1;
const currentPage = hasValidItemCount
? Math.max(0, Math.min(pageIndex, totalPages - 1))
: pageIndex;
const currentPageNumber = currentPage + 1; // 1-based for display
// Track internal state for API access
const [internalState, setInternalState] = useState({
currentPage: currentPageNumber,
currentPageSize: pageSize,
});
// Update internal state when props change
useEffect(() => {
setInternalState({
currentPage: currentPageNumber,
currentPageSize: pageSize,
});
// Update XMLUI container state
updateState?.({
currentPage: currentPageNumber,
currentPageSize: pageSize,
totalPages: hasValidItemCount ? totalPages : undefined,
itemCount,
});
}, [currentPageNumber, pageSize, totalPages, itemCount, updateState, hasValidItemCount]);
// Helper function to handle page changes
const handlePageChange = useCallback(
(newPageIndex: number) => {
const clampedPageIndex = hasValidItemCount
? Math.max(0, Math.min(newPageIndex, totalPages - 1))
: newPageIndex;
if (clampedPageIndex !== currentPage) {
onPageDidChange?.(clampedPageIndex, pageSize, itemCount || 0);
}
},
[currentPage, totalPages, onPageDidChange, pageSize, itemCount, hasValidItemCount],
);
// Helper function to handle page size changes
const handlePageSizeChange = useCallback(
(newPageSize: number) => {
if (newPageSize !== pageSize) {
onPageSizeDidChange?.(newPageSize);
}
},
[pageSize, onPageSizeDidChange],
);
// Memoize the API object to prevent unnecessary re-renders
const paginationAPI: PaginationAPI = useMemo(
() => ({
moveFirst: () => handlePageChange(0),
moveLast: () => handlePageChange(totalPages - 1),
movePrev: () => handlePageChange(currentPage - 1),
moveNext: () => handlePageChange(currentPage + 1),
currentPage: internalState.currentPage,
currentPageSize: internalState.currentPageSize,
}),
[handlePageChange, totalPages, currentPage, internalState],
);
// Register APIs with XMLUI framework
useEffect(() => {
if (registerComponentApi) {
registerComponentApi(paginationAPI);
}
}, [registerComponentApi, paginationAPI]);
// For undefined itemCount, show simplified pagination
if (!hasValidItemCount) {
return (
<nav
{...rest}
role="navigation"
aria-label="Pagination"
ref={ref as any}
id={id}
className={classnames(
styles.pagination,
{
[styles.paginationVertical]: orientation === "vertical",
[styles.paginationHorizontal]: orientation === "horizontal",
},
className,
)}
style={style}
>
<ul
key={`${id}-pagination-controls`}
className={classnames(styles.buttonRow, {
[styles.paginationListVertical]: orientation === "vertical",
// layout is already horizontal by default
})}
>
{/* Previous page button */}
<li>
<Button
variant="ghost"
size="sm"
disabled={!enabled || !hasPrevPage}
onClick={() => handlePageChange(currentPage - 1)}
contextualLabel="Previous page"
style={{ minHeight: "36px", padding: "8px" }}
aria-label="Previous page"
>
<Icon
name="prev:Pagination"
fallback={orientation === "vertical" ? "chevronup" : "chevronleft"}
size="sm"
/>
</Button>
</li>
{/* Next page button */}
<li>
<Button
variant="ghost"
size="sm"
disabled={!enabled || !hasNextPage}
onClick={() => handlePageChange(currentPage + 1)}
contextualLabel="Next page"
style={{ minHeight: "36px", padding: "8px" }}
aria-label="Next page"
>
<Icon
name="next:Pagination"
fallback={orientation === "vertical" ? "chevrondown" : "chevronright"}
size="sm"
/>
</Button>
</li>
</ul>
</nav>
);
}
// Calculate which page numbers to show
const getVisiblePages = () => {
const pages: number[] = [];
if (totalPages <= maxVisiblePages) {
// Show all pages if total is small
for (let i = 1; i <= totalPages; i++) {
pages.push(i);
}
} else {
// Show current page with context
const halfVisible = Math.floor(maxVisiblePages / 2);
let start = Math.max(1, currentPageNumber - halfVisible);
let end = Math.min(totalPages, start + maxVisiblePages - 1);
// Adjust start if we're near the end
if (end === totalPages) {
start = Math.max(1, end - maxVisiblePages + 1);
}
for (let i = start; i <= end; i++) {
pages.push(i);
}
}
return pages;
};
const visiblePages = getVisiblePages();
const isFirstPage = currentPage === 0;
const isLastPage = currentPage === totalPages - 1;
const buttonRow = (
<ul
data-component={`pagination-controls`}
className={classnames(styles.buttonRow, {
[styles.paginationListVertical]: orientation === "vertical",
// layout is already horizontal by default
})}
>
{/* First page button */}
<li>
<Button
variant="ghost"
size="sm"
disabled={!enabled || isFirstPage}
onClick={() => handlePageChange(0)}
contextualLabel="First page"
style={{ minHeight: "36px", padding: "8px" }}
aria-label="First page"
>
<Icon
name={`first:Pagination`}
fallback={orientation === "vertical" ? "doublechevronup" : "doublechevronleft"}
size="sm"
/>
</Button>
</li>
{/* Previous page button */}
{visiblePages.length <= 2 && (
<li>
<Button
variant="ghost"
size="sm"
disabled={!enabled || isFirstPage}
onClick={() => handlePageChange(currentPage - 1)}
contextualLabel="Previous page"
style={{ minHeight: "36px", padding: "8px" }}
aria-label="Previous page"
>
<Icon
name={`prev:Pagination`}
fallback={orientation === "vertical" ? "chevronup" : "chevronleft"}
size="sm"
/>
</Button>
</li>
)}
{/* Page number buttons or text indicator */}
{showCurrentPage && visiblePages.length === 1 && (
<li>
<Text
variant="strong"
style={{ paddingLeft: "1rem", paddingRight: "1rem" }}
aria-current="true"
>
{visiblePages[0]}
</Text>
</li>
)}
{visiblePages.length > 1 &&
visiblePages.map((pageNum) => (
<li key={`page-${pageNum}`}>
<Button
variant={pageNum === currentPageNumber ? "solid" : "ghost"}
disabled={!enabled}
size="sm"
onClick={() => handlePageChange(pageNum - 1)}
contextualLabel={`Page ${pageNum}`}
aria-current={pageNum === currentPageNumber || undefined}
aria-label={`Page ${pageNum}${pageNum === currentPageNumber ? " (current)" : ""}`}
>
{pageNum}
</Button>
</li>
))}
{/* Next page button */}
{visiblePages.length <= 2 && (
<li>
<Button
variant="ghost"
size="sm"
disabled={!enabled || isLastPage}
onClick={() => handlePageChange(currentPage + 1)}
contextualLabel="Next page"
style={{ minHeight: "36px", padding: "8px" }}
aria-label="Next page"
>
<Icon
name={`next:Pagination`}
fallback={orientation === "vertical" ? "chevrondown" : "chevronright"}
size="sm"
/>
</Button>
</li>
)}
{/* Last page button */}
<li>
<Button
variant="ghost"
size="sm"
disabled={!enabled || isLastPage}
onClick={() => handlePageChange(totalPages - 1)}
contextualLabel="Last page"
style={{ minHeight: "36px", padding: "8px" }}
aria-label="Last page"
>
<Icon
name={`last:Pagination`}
fallback={orientation === "vertical" ? "doublechevrondown" : "doublechevronright"}
size="sm"
/>
</Button>
</li>
</ul>
);
const pageSizeSelector = showPageSizeSelector &&
pageSizeOptions &&
pageSizeOptions.length > 1 && (
<div
data-component={`page-size-selector-container`}
className={classnames(styles.selectorContainer)}
>
<ItemWithLabel
id={`${id}-page-size-selector`}
label={"Items per page"}
enabled={enabled}
style={style}
className={className}
labelPosition={orientation === "vertical" ? "top" : "start"}
>
<select
id={`${id}-page-size-selector`}
value={pageSize}
onChange={(e) => handlePageSizeChange(Number(e.target.value))}
disabled={!enabled}
className={styles.pageSizeSelect}
>
{pageSizeOptions.map((size) => (
<option key={size} value={size}>
{size}
</option>
))}
</select>
</ItemWithLabel>
</div>
);
const pageInfo = showPageInfo && (
<div data-component={`page-info`} className={classnames(styles.pageInfo)}>
<Text variant="secondary">
Page {currentPageNumber} of {totalPages} ({itemCount} items)
</Text>
</div>
);
// Used the following resource to provide a11y:
// https://a11ymatters.com/pattern/pagination/
return (
<nav
{...rest}
role="navigation"
aria-label="Pagination"
ref={ref as any}
id={id}
className={classnames(
styles.pagination,
{
[styles.paginationVertical]: orientation === "vertical",
[styles.paginationHorizontal]: orientation === "horizontal",
},
className,
)}
style={style}
>
{(pageInfoPosition === "start" ||
pageSizeSelectorPosition === "start" ||
buttonRowPosition === "start") && (
<div className={classnames(styles.slot, styles.startSlot)}>
{pageInfoPosition === "start" && pageInfo}
{pageSizeSelectorPosition === "start" && pageSizeSelector}
{buttonRowPosition === "start" && buttonRow}
</div>
)}
{(pageInfoPosition === "center" ||
pageSizeSelectorPosition === "center" ||
buttonRowPosition === "center") && (
<div className={classnames(styles.slot, styles.centerSlot)}>
{pageInfoPosition === "center" && pageInfo}
{pageSizeSelectorPosition === "center" && pageSizeSelector}
{buttonRowPosition === "center" && buttonRow}
</div>
)}
{(pageInfoPosition === "end" ||
pageSizeSelectorPosition === "end" ||
buttonRowPosition === "end") && (
<div className={classnames(styles.slot, styles.endSlot)}>
{pageInfoPosition === "end" && pageInfo}
{pageSizeSelectorPosition === "end" && pageSizeSelector}
{buttonRowPosition === "end" && buttonRow}
</div>
)}
</nav>
);
});
```
--------------------------------------------------------------------------------
/docs/content/components/App.md:
--------------------------------------------------------------------------------
```markdown
# App [#app]
The `App` component is the root container that defines your application's overall structure and layout. It provides a complete UI framework with built-in navigation, header, footer, and content areas that work together seamlessly.
**Essential features:**
- **Layout templates**: Choose from 7 predefined layouts (horizontal, vertical, condensed, etc.) with sticky navigation options
- **Routing**: Built-in page routing via the [Pages](/components/Pages) component
## Properties [#properties]
### `autoDetectTone` (default: false) [#autodetecttone-default-false]
This boolean property enables automatic detection of the system theme preference. When set to true and no defaultTone is specified, the app will automatically use "light" or "dark" tone based on the user's system theme setting. The app will also respond to changes in the system theme preference.
### `defaultTheme` [#defaulttheme]
This property sets the app's default theme.
### `defaultTone` [#defaulttone]
This property sets the app's default tone ("light" or "dark").
Available values: `light`, `dark`
### `layout` [#layout]
This property sets the layout template of the app. This setting determines the position and size of the app parts (such as header, navigation bar, footer, etc.) and the app's scroll behavior.
Available values:
| Value | Description |
| --- | --- |
| `vertical` | This layout puts the navigation bar on the left side and displays its items vertically. The main content is aligned to the right (including the header and the footer), and its content is a single scroll container; every part of it moves as you scroll the page. This layout does not display the logo in the app header. |
| `vertical-sticky` | Similar to `vertical`, the header and the navigation bar dock to the top of the main content's viewport, while the footer sticks to the bottom. This layout does not display the logo in the app header. |
| `vertical-full-header` | Similar to `vertical-sticky`. However, the header and the navigation bar dock to the top of the app's window, while the footer sticks to the bottom. |
| `condensed` | Similar to `horizontal`. However, the header and the navigation bar are in a single header block. (default) |
| `condensed-sticky` | However, the header and the navigation bar are in a single header block. |
| `horizontal` | This layout stacks the layout sections in a single column in this order: header, navigation bar, main content, and footer. The application is a single scroll container; every part moves as you scroll the page. |
| `horizontal-sticky` | Similar to `horizontal`, the header and the navigation bar dock to the top of the viewport, while the footer sticks to the bottom. |
Here are a few samples demonstrating the usage of the `layout` property. All samples use this markup, except the value of `App`'s layout and a few marked code snippets:
```xmlui
<App layout="(specific layout value)">
<!-- AppHeader omitted for "vertical" and "vertical-sticky" -->
<AppHeader>
<property name="logoTemplate">
<Heading level="h3" value="Example App"/>
</property>
</AppHeader>
<NavPanel>
<NavLink label="Home" to="/" icon="home"/>
<NavLink label="Page 1" to="/page1"/>
<NavLink label="Page 2" to="/page2"/>
</NavPanel>
<Pages fallbackPath="/">
<Page url="/">
<List data="https://api.spacexdata.com/v3/history">
<property name="itemTemplate">
<Card title="{$item.title}" subtitle="{$item.details}"/>
</property>
</List>
</Page>
<Page url="/page1">
<Text value="Page 1" />
</Page>
<Page url="/page2">
<Text value="Page 2" />
</Page>
</Pages>
<Footer>Powered by XMLUI</Footer>
</App>
```
#### `horizontal` [#horizontal]
```xmlui-pg copy name="Example: 'horizontal' layout" height="350px"
<App layout="horizontal">
<AppHeader>
<property name="logoTemplate">
<Heading level="h3" value="Example App"/>
</property>
</AppHeader>
<NavPanel>
<NavLink label="Home" to="/" icon="home"/>
<NavLink label="Page 1" to="/page1"/>
<NavLink label="Page 2" to="/page2"/>
</NavPanel>
<Pages fallbackPath="/">
<Page url="/">
<List data="https://api.spacexdata.com/v3/history">
<property name="itemTemplate">
<Card title="{$item.title}" subtitle="{$item.details}"/>
</property>
</List>
</Page>
<Page url="/page1">
<Text value="Page 1" />
</Page>
<Page url="/page2">
<Text value="Page 2" />
</Page>
</Pages>
<Footer>Powered by XMLUI</Footer>
</App>
```
#### `horizontal-sticky` [#horizontal-sticky]
```xmlui-pg copy name="Example: 'horizontal-sticky' layout" height="350px"
<App layout="horizontal-sticky">
<AppHeader>
<property name="logoTemplate">
<Heading level="h3" value="Example App"/>
</property>
</AppHeader>
<NavPanel>
<NavLink label="Home" to="/" icon="home"/>
<NavLink label="Page 1" to="/page1"/>
<NavLink label="Page 2" to="/page2"/>
</NavPanel>
<Pages fallbackPath="/">
<Page url="/">
<List data="https://api.spacexdata.com/v3/history">
<property name="itemTemplate">
<Card title="{$item.title}" subtitle="{$item.details}"/>
</property>
</List>
</Page>
<Page url="/page1">
<Text value="Page 1" />
</Page>
<Page url="/page2">
<Text value="Page 2" />
</Page>
</Pages>
<Footer>Powered by XMLUI</Footer>
</App>
```
#### `condensed` [#condensed]
```xmlui-pg copy name="Example: 'condensed' layout" height="350px"
<App layout="condensed">
<property name="logoTemplate">
<Heading level="h3" value="Example App"/>
</property>
<NavPanel>
<NavLink label="Home" to="/" icon="home"/>
<NavLink label="Page 1" to="/page1"/>
<NavLink label="Page 2" to="/page2"/>
</NavPanel>
<Pages fallbackPath="/">
<Page url="/">
<List data="https://api.spacexdata.com/v3/history">
<property name="itemTemplate">
<Card title="{$item.title}" subtitle="{$item.details}"/>
</property>
</List>
</Page>
<Page url="/page1">
<Text value="Page 1" />
</Page>
<Page url="/page2">
<Text value="Page 2" />
</Page>
</Pages>
<Footer>Powered by XMLUI</Footer>
</App>
```
#### `condensed-sticky` [#condensed-sticky]
```xmlui-pg copy name="Example: 'condensed-sticky' layout" height="350px"
<App layout="condensed-sticky">
<property name="logoTemplate">
<Heading level="h3" value="Example App"/>
</property>
<NavPanel>
<NavLink label="Home" to="/" icon="home"/>
<NavLink label="Page 1" to="/page1"/>
<NavLink label="Page 2" to="/page2"/>
</NavPanel>
<Pages fallbackPath="/">
<Page url="/">
<List data="https://api.spacexdata.com/v3/history">
<property name="itemTemplate">
<Card title="{$item.title}" subtitle="{$item.details}"/>
</property>
</List>
</Page>
<Page url="/page1">
<Text value="Page 1" />
</Page>
<Page url="/page2">
<Text value="Page 2" />
</Page>
</Pages>
<Footer>Powered by XMLUI</Footer>
</App>
```
#### `vertical` [#vertical]
```xmlui-pg copy name="Example: 'vertical' layout" height="300px"
<App layout="vertical">
<property name="logoTemplate">
<Heading level="h3" value="Example App"/>
</property>
<NavPanel>
<NavLink label="Home" to="/" icon="home"/>
<NavLink label="Page 1" to="/page1"/>
<NavLink label="Page 2" to="/page2"/>
</NavPanel>
<Pages fallbackPath="/">
<Page url="/">
<List data="https://api.spacexdata.com/v3/history">
<property name="itemTemplate">
<Card title="{$item.title}" subtitle="{$item.details}"/>
</property>
</List>
</Page>
<Page url="/page1">
<Text value="Page 1" />
</Page>
<Page url="/page2">
<Text value="Page 2" />
</Page>
</Pages>
<Footer>Powered by XMLUI</Footer>
</App>
```
#### `vertical-sticky` [#vertical-sticky]
```xmlui-pg copy name="Example: 'vertical-sticky' layout" height="300px"
<App layout="vertical-sticky">
<property name="logoTemplate">
<Heading level="h3" value="Example App"/>
</property>
<NavPanel>
<NavLink label="Home" to="/" icon="home"/>
<NavLink label="Page 1" to="/page1"/>
<NavLink label="Page 2" to="/page2"/>
</NavPanel>
<Pages fallbackPath="/">
<Page url="/">
<List data="https://api.spacexdata.com/v3/history">
<property name="itemTemplate">
<Card title="{$item.title}" subtitle="{$item.details}"/>
</property>
</List>
</Page>
<Page url="/page1">
<Text value="Page 1" />
</Page>
<Page url="/page2">
<Text value="Page 2" />
</Page>
</Pages>
<Footer>Powered by XMLUI</Footer>
</App>
```
#### `vertical-full-header` [#vertical-full-header]
```xmlui-pg copy name="Example: 'vertical-full-header' layout" height="300px"
<App layout="vertical-full-header">
<AppHeader>
<property name="logoTemplate">
<Heading level="h3" value="Example App"/>
</property>
</AppHeader>
<NavPanel>
<NavLink label="Home" to="/" icon="home"/>
<NavLink label="Page 1" to="/page1"/>
<NavLink label="Page 2" to="/page2"/>
</NavPanel>
<Pages fallbackPath="/">
<Page url="/">
<List data="https://api.spacexdata.com/v3/history">
<property name="itemTemplate">
<Card title="{$item.title}" subtitle="{$item.details}"/>
</property>
</List>
</Page>
<Page url="/page1">
<Text value="Page 1" />
</Page>
<Page url="/page2">
<Text value="Page 2" />
</Page>
</Pages>
<Footer>Powered by XMLUI</Footer>
</App>
```
### `loggedInUser` [#loggedinuser]
Stores information about the currently logged-in user. By not defining this property, you can indicate that no user is logged in.
Stores information about the currently logged in user.
Currently, there is no restriction on what the user data must look like.
```xmlui-pg copy display name="Example: loggedInUser" height="180px"
<App loggedInUser="{{ name: 'Joe', token: '1234' }}">
<NavPanel>
<NavLink label="Home" to="/" icon="home"/>
</NavPanel>
<Pages fallbackPath="/">
<Page url="/">
<Text value="User name: {loggedInUser.name}" />
<Text value="User token: {loggedInUser.token}" />
</Page>
</Pages>
</App>
```
### `logo` [#logo]
Optional logo path
### `logo-dark` [#logo-dark]
Optional logo path in dark tone
### `logo-light` [#logo-light]
Optional logo path in light tone
### `logoTemplate` [#logotemplate]
Optional template of the app logo
### `name` [#name]
Optional application name (visible in the browser tab). When you do not define this property, the tab name falls back to the one defined in the app's configuration. If the name is not configured, "XMLUI App" is displayed in the tab.
### `noScrollbarGutters` (default: false) [#noscrollbargutters-default-false]
This boolean property specifies whether the scrollbar gutters should be hidden.
### `scrollWholePage` (default: true) [#scrollwholepage-default-true]
This boolean property specifies whether the whole page should scroll (`true`) or just the content area (`false`). The default value is `true`.
This boolean property specifies whether the whole page should scroll (true) or just the content area (false).
The default value is `true`.
```xmlui-pg copy display name="Example: scrollWholePage" height="150px"
<App scrollWholePage="false">
<NavPanel>
<NavLink label="Home" to="/" icon="home"/>
</NavPanel>
<Pages fallbackPath="/">
<Page url="/">
<Text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</Text>
</Page>
</Pages>
</App>
```
## Events [#events]
### `messageReceived` [#messagereceived]
This event fires when the `App` component receives a message from another window or iframe via the window.postMessage API.
The event handler method has two parameters. The first is the message sent; the second is the entire native event object.
```xmlui-pg copy display name="Example: messageReceived" /onMessageReceived/ /window.postMessage/
<App
var.message = "<none>"
onMessageReceived="(msg, ev) => {
message = JSON.stringify(msg);
console.log('Message event received:', ev);
}">
<Button label="Send a message"
onClick="window.postMessage({type: 'message', messages:'Here you are!'})" />
<Text>Message received: {message}</Text>
</App>
```
### `ready` [#ready]
This event fires when the `App` component finishes rendering on the page.
This event fires when the `App` component finishes rendering on the page.
Use it as `onReady` when inlining it on the component.
```xmlui-pg copy display name="Example: ready"
<App onReady="isAppReady = true">
<variable name="isAppReady" value="{false}"/>
<Text value="{isAppReady ? 'App is ready' : 'Sadly, App is not ready'}" />
</App>
```
## Exposed Methods [#exposed-methods]
This component does not expose any methods.
## Styling [#styling]
### Theme Variables [#theme-variables]
| Variable | Default Value (Light) | Default Value (Dark) |
| --- | --- | --- |
| [backgroundColor](../styles-and-themes/common-units/#color)-AppHeader | *none* | *none* |
| [backgroundColor](../styles-and-themes/common-units/#color)-content-App | $backgroundColor | $backgroundColor |
| [backgroundColor](../styles-and-themes/common-units/#color)-navPanel-App | $backgroundColor | $backgroundColor |
| [borderBottom](../styles-and-themes/common-units/#border)-AppHeader | *none* | *none* |
| [borderLeft](../styles-and-themes/common-units/#border)-content-App | *none* | *none* |
| [boxShadow](../styles-and-themes/common-units/#boxShadow)-header-App | none | none |
| [boxShadow](../styles-and-themes/common-units/#boxShadow)-navPanel-App | $boxShadow-spread | $boxShadow-spread |
| [maxWidth](../styles-and-themes/common-units/#size)-App | *none* | *none* |
| [maxWidth-content](../styles-and-themes/common-units/#size)-App | $maxWidth-content | $maxWidth-content |
| [width](../styles-and-themes/common-units/#size)-navPanel-App | $space-64 | $space-64 |
### Variable Explanations [#variable-explanations]
| Theme Variable | Description |
| --- | --- |
| **`maxWidth-content-App`** | This theme variable defines the maximum width of the main content. If the main content is broader, the engine adds margins to keep the expected maximum size. |
| **`boxShadow‑header‑App`** | This theme variable sets the shadow of the app's header section. |
| **`boxShadow‑navPanel‑App`** | This theme variable sets the shadow of the app's navigation panel section (visible only in vertical layouts). |
| **`width‑navPanel‑App`** | This theme variable sets the width of the navigation panel when the app is displayed with one of the vertical layouts. |
```
--------------------------------------------------------------------------------
/packages/xmlui-search/src/Search.tsx:
--------------------------------------------------------------------------------
```typescript
import {
useCallback,
useDeferredValue,
useId,
useEffect,
useMemo,
useRef,
useState,
forwardRef,
type ForwardedRef,
} from "react";
import {
LinkNative,
Text,
TextBox,
useSearchContextContent,
useTheme,
VisuallyHidden,
useAppLayoutContext,
} from "xmlui";
import type {
FuseOptionKeyObject,
FuseResult,
FuseResultMatch,
IFuseOptions,
RangeTuple,
} from "fuse.js";
import Fuse from "fuse.js";
import styles from "./Search.module.scss";
import classnames from "classnames";
import {
Popover,
PopoverContent,
PopoverTrigger,
Portal,
} from "@radix-ui/react-popover";
type Props = {
id?: string;
data: Record<string, string>;
limit?: number;
maxContentMatchNumber?: number;
};
export const defaultProps: Required<Pick<Props, "limit" | "maxContentMatchNumber">> = {
limit: 10,
maxContentMatchNumber: 3,
};
const keys: Array<FuseOptionKeyObject<SearchItemData>> = [
{
name: "title",
weight: 2,
},
{
name: "content",
weight: 1,
},
];
const searchOptions: IFuseOptions<SearchItemData> = {
// isCaseSensitive: false,
includeScore: true,
// ignoreDiacritics: false,
shouldSort: true, // <- sorts by "score"
includeMatches: true,
// findAllMatches: false,
minMatchCharLength: 2,
// location: 0,
threshold: 0,
// distance: 500,
// useExtendedSearch: true,
ignoreLocation: true,
ignoreFieldNorm: true,
// fieldNormWeight: 1,
keys,
};
const fuse = new Fuse<SearchItemData>([], searchOptions);
export const Search = ({
id,
data,
limit = defaultProps.limit,
maxContentMatchNumber = defaultProps.maxContentMatchNumber,
}: Props) => {
const content = useSearchContextContent();
const _id = useId();
const inputId = id || _id;
const { root } = useTheme();
const inputRef = useRef<HTMLInputElement>(null);
const itemRefs = useRef<HTMLLIElement[]>([]);
const itemLinkRefs = useRef<HTMLDivElement[]>([]); // <- this is a messy solution
const [activeIndex, setActiveIndex] = useState(-1);
const [inputValue, setInputValue] = useState("");
const debouncedValue = useDeferredValue(inputValue);
const layout = useAppLayoutContext();
const inDrawer = layout?.drawerVisible ?? false;
const _root = inDrawer && inputRef.current ? inputRef.current?.closest(`div`) : root;
const [navigationSource, setNavigationSource] = useState<"keyboard" | "mouse" | null>(null);
// render-related state
const [show, setShow] = useState(false);
// --- Step 2: Convert data to a format better handled by the search engine
const dataFromMd = useMemo(
() =>
Object.entries(data).map<SearchItemData>(([path, content]) => {
const lines = content.split("\n");
const firstLine = lines.length > 0 ? lines[0] : "";
// Remove title after matching, since it is in the "label"
const restContent = lines.length > 1 ? lines.slice(1).join("\n") : "";
return {
path,
title: firstLine,
content: restContent,
};
}),
[data],
);
const mergedData = useMemo(() => {
return [...dataFromMd, ...Object.values(content ?? {})];
}, [content, dataFromMd]);
useEffect(()=>{
fuse.setCollection(mergedData);
}, [mergedData]);
// --- Step 3: Execute search & post-process results
const results: SearchResult[] = useMemo(() => {
// Ignore single characters
if (debouncedValue.length <= 1) return [];
const limited = !debouncedValue
? []
: fuse.search(debouncedValue, { limit: limit ?? defaultProps.limit });
const mapped = postProcessSearch(limited, debouncedValue);
if (mapped.length > 0) setShow(true);
return mapped;
}, [debouncedValue, limit]);
const onClick = useCallback(() => {
setInputValue("");
setActiveIndex(-1);
setShow(false);
}, []);
const onInputFocus = useCallback(() => {
if (debouncedValue.length > 0) setShow(true);
}, [debouncedValue]);
// Handle keyboard navigation
const handleKeyDown = useCallback(
(e: React.KeyboardEvent<HTMLInputElement>) => {
if (!show) return;
if (e.key === "ArrowDown") {
e.preventDefault();
setActiveIndex((prev) => (prev + 1) % results.length);
setNavigationSource("keyboard");
} else if (e.key === "ArrowUp") {
e.preventDefault();
setActiveIndex((prev) => (prev <= 0 ? results.length - 1 : prev - 1));
setNavigationSource("keyboard");
} else if (e.key === "Enter") {
if (activeIndex >= 0 && activeIndex < results.length) {
setActiveIndex(-1);
}
setShow(false);
itemLinkRefs.current[activeIndex]?.click();
} else if (e.key === "Escape") {
setActiveIndex(-1);
setShow(false);
}
},
[activeIndex, results.length, show],
);
// Does the scrolling to the active item
useEffect(() => {
if (
navigationSource === "keyboard" &&
activeIndex >= 0 &&
itemRefs.current[activeIndex] &&
typeof itemRefs.current[activeIndex].scrollIntoView === "function"
) {
itemRefs.current[activeIndex].scrollIntoView({
block: "nearest",
behavior: "instant",
});
}
}, [activeIndex, navigationSource]);
return (
<Popover open={show} onOpenChange={setShow}>
<VisuallyHidden>
<label htmlFor={inputId}>Search Field</label>
</VisuallyHidden>
<PopoverTrigger asChild>
<TextBox
id={inputId}
ref={inputRef}
type="search"
placeholder="Type to search..."
value={inputValue}
style={{ height: "36px", width: inDrawer ? "100%" : "280px" }}
startIcon="search"
onDidChange={(value) =>
setInputValue(() => {
setActiveIndex(-1);
return value;
})
}
onFocus={onInputFocus}
onKeyDown={handleKeyDown}
aria-autocomplete="list"
aria-controls="dropdown-list"
aria-activedescendant={activeIndex >= 0 ? `option-${activeIndex}` : undefined}
/>
</PopoverTrigger>
{show && results && debouncedValue && (
<Portal container={_root}>
<PopoverContent
align="end"
onOpenAutoFocus={(e) => e.preventDefault()}
onCloseAutoFocus={(e) => e.preventDefault()}
onEscapeKeyDown={() => setShow(false)}
className={classnames(styles.listPanel, {
[styles.inDrawer]: inDrawer,
})}
>
<ul className={styles.list} role="listbox">
{results.length > 0 &&
results.map((result, idx) => {
return (
<li
role="option"
key={`${result.item.path}-${idx}`}
className={classnames(styles.item, styles.header, {
[styles.keyboardFocus]: activeIndex === idx,
})}
onMouseEnter={() => {
setActiveIndex(idx);
setNavigationSource("mouse");
}}
ref={(el) => (itemRefs.current[idx] = el!)}
aria-selected={activeIndex === idx}
>
<SearchItemContent
ref={(el) => (itemLinkRefs.current[idx] = el!)}
idx={idx}
item={result.item}
matches={result.matches}
maxContentMatchNumber={maxContentMatchNumber}
onClick={onClick}
/>
</li>
);
})}
{results.length === 0 && (
<div className={styles.noResults}>
<Text variant="em">No results</Text>
</div>
)}
</ul>
</PopoverContent>
</Portal>
)}
</Popover>
);
};
type SearchItemContentProps = SearchResult & {
idx: string | number;
maxContentMatchNumber?: number;
onClick?: () => void;
};
/**
* Renders a single search result.
* Use the `item` prop to access the data original data.
*
*/
const SearchItemContent = forwardRef(function SearchItemContent(
{ idx, item, matches, maxContentMatchNumber, onClick }: SearchItemContentProps,
forwardedRef: ForwardedRef<HTMLDivElement>,
) {
return (
<LinkNative
ref={forwardedRef}
to={item.path}
onClick={onClick}
style={{ textDecorationLine: "none", width: "100%", minHeight: "36px" }}
>
<div style={{ width: "100%" }}>
<Text variant="subtitle">
{highlightText(item.title, matches?.title?.indices) || item.title}
</Text>
<div
style={{
width: "100%",
display: "flex",
flexDirection: "column",
}}
>
{matches?.content?.indices &&
formatContentSnippet(item.content, matches.content.indices, maxContentMatchNumber).map(
(snippet, snipIdx) => (
<div key={`${item.path}-${idx}-${snipIdx}`} className={styles.snippet}>
<Text>{snippet}</Text>
</div>
),
)}
</div>
{/* Display the number of other matches if there are any */}
{matches?.content?.indices && (
<Text variant="em">
{`${pluralize(matches?.content?.indices.length, "match", "matches")} in this article`}
</Text>
)}
</div>
</LinkNative>
);
});
// --- Utilities
function postProcessSearch(searchResults: FuseResult<SearchItemData>[], debouncedValue: string) {
// Minimum number of characters to trigger a long text search filter
const longTextSearchThreshold = 25;
// Number of characters needed to accept the search term as a match in the title
const titleAcceptanceThreshold = debouncedValue.length - 1;
// Number of character threshold to accept the search term as a match in the content
const longContentAcceptance = Math.floor(debouncedValue.length * 0.5);
// Determines the size of the area around a string index
// used in search filtering and highlight correction
const shortTextSearchRadius = 3;
const longTextSearchRadius = 50;
const textSearchRadius =
debouncedValue.length < longTextSearchThreshold ? shortTextSearchRadius : longTextSearchRadius;
return searchResults
.map((result) => ({
item: result.item,
score: result.score,
matches: mapMatchIndices(result),
}))
.filter((item) => Object.values(item.matches).some((match) => match.indices.length > 0));
// ---
function mapMatchIndices(result: FuseResult<SearchItemData>) {
return (result.matches ?? [])
.filter((match) => !!match.key)
.reduce<MatchesByKey>((acc, match) => {
const matchKey = match.key as keyof SearchItemData;
// --- Prefilter matches that are too short/significantly misaligned compared to the search term
const filteredMatches = match.indices.filter((index) => {
const foundSubstrLength = index[1] - index[0];
// Title
if (matchKey === "title") {
return foundSubstrLength >= titleAcceptanceThreshold;
}
// Content: long text search
if (debouncedValue.length >= longTextSearchThreshold) {
return foundSubstrLength >= longContentAcceptance;
}
// Content: regular text search
return result.item[matchKey]
.slice(index[0], index[1] + 1)
.toLocaleLowerCase()
.includes(debouncedValue.toLocaleLowerCase());
});
// --- Restrict highlights that are longer than the original search term
const highlightAdjustedMatches = filteredMatches.reduce<RangeTuple[]>((matchAcc, index) => {
if (matchKey === "title") {
if (index[1] - index[0] > debouncedValue.length) {
index[1] = index[0] + debouncedValue.length;
}
}
const origTextLength = result.item[matchKey].length;
const startIdx = Math.max(index[0] - textSearchRadius, 0);
const endIdx = Math.min(index[1] + textSearchRadius, origTextLength);
const textSnippet = result.item[matchKey].toLocaleLowerCase();
const position = textSnippet.indexOf(debouncedValue.toLocaleLowerCase(), startIdx);
if (position !== -1 && position + debouncedValue.length - 1 <= endIdx) {
index[0] = position;
index[1] = position + debouncedValue.length - 1;
if (matchAcc.findIndex((m) => m[0] === index[0] && m[1] === index[1]) === -1) {
matchAcc.push(index);
}
}
return matchAcc;
}, []);
// Map match indexes to results
acc[matchKey] = {
value: match.value,
indices: highlightAdjustedMatches,
};
return acc;
}, {});
}
}
/**
* Formats a snippet of text. Determines which ranges are highlighted and how big the snippet is.
*/
function formatContentSnippet(
text: string,
ranges?: readonly RangeTuple[],
maxContentMatchNumber?: number,
) {
if (!ranges || ranges.length === 0) return [text.slice(0, 100)];
const contextLength = 50;
const limitedRanges = ranges.slice(0, maxContentMatchNumber);
const contextRanges: RangeTuple[] = limitedRanges.map(([start, end]) => {
let contextStart = 0;
let contextEnd = text.length - 1;
if (0 <= start - contextLength) {
contextStart = start - contextLength;
}
if (end + contextLength <= text.length - 1) {
contextEnd = end + contextLength;
}
return [contextStart, contextEnd];
});
const highlightRanges: RangeTuple[] = limitedRanges.map(([start, end], idx) => {
return [start - contextRanges[idx][0], end - contextRanges[idx][1]];
});
return contextRanges.map(([start, end], idx) => {
const textWithEllipsis: React.ReactNode[] = [];
if (start > 0) {
textWithEllipsis.push("...");
}
textWithEllipsis.push(highlightText(text.slice(start, end), [highlightRanges[idx]]));
if (end < text.length - 1) {
textWithEllipsis.push("...");
}
return textWithEllipsis;
});
}
/**
* Highlights specified ranges in a string with JSX.
*/
function highlightText(text: string, ranges?: readonly RangeTuple[]) {
if (!ranges || ranges.length === 0) return [text];
const result: React.ReactNode[] = [];
let lastIndex = 0;
ranges.forEach(([start, end], index) => {
if (lastIndex < start) {
result.push(text.slice(lastIndex, start));
}
result.push(
// style is temporary, fontSize should be inherited if Text is inside other Text
<Text key={`${index}-highlighted`} variant="marked" style={{ fontSize: "inherit" }}>
{text.slice(start, end + 1)}
</Text>,
);
lastIndex = end + 1;
});
if (lastIndex < text.length) {
result.push(text.slice(lastIndex));
}
return result;
}
function pluralize(number: number, singular: string, plural: string): string {
if (number === 1) {
return `${number} ${singular}`;
}
return `${number} ${plural}`;
}
type SearchItemData = { path: string; title: string; content: string };
type MatchesByKey = Partial<
Record<keyof SearchItemData, Pick<FuseResultMatch, "indices" | "value">>
>;
type SearchResult = Omit<FuseResult<SearchItemData>, "refIndex" | "matches"> & {
matches: MatchesByKey;
};
```
--------------------------------------------------------------------------------
/xmlui/dev-docs/components-with-options.md:
--------------------------------------------------------------------------------
```markdown
# Components with Options
This document explains XMLUI's architecture for components that use `Option` to define selectable choices, covering the provider pattern for context-aware rendering and implementation details of Select, AutoComplete, RadioGroup, and Pagination components.
## Option Component Overview
**Option** is a non-visual data structure describing selectable choices. It provides a consistent interface for value and display representation across multiple component types.
```xml
<Select>
<Option value="1" label="First Choice" />
<Option value="2" label="Second Choice" />
<Option value="3" label="Third Choice" enabled="false" />
</Select>
```
**Key Features:** Non-visual data structure, flexible display (labels or rich content), context-aware rendering via provider pattern, keyword-based search, enabled/disabled state tracking.
## Option Type and Implementation
### Type Definition
```typescript
export type Option = {
label: string; // Display text
value: string; // Underlying value
enabled?: boolean; // Selectable state (default: true)
keywords?: string[]; // Search terms
children?: ReactNode; // Rich content
optionRenderer?: (contextVars: any) => ReactNode;
// style, className, readOnly properties also available
};
```
### Core Renderer
Option renderer transforms XMLUI markup into React components, with label/value fallback logic and optimized child handling:
```typescript
export const optionComponentRenderer = createComponentRenderer(COMP, OptionMd,
({ node, extractValue, renderChild, layoutContext }) => {
const label = extractValue.asOptionalString(node.props.label);
let value = extractValue(node.props.value);
if (label === undefined && value === undefined) return null;
const hasTextNodeChild = node.children?.length === 1 &&
(node.children[0].type === "TextNode" || node.children[0].type === "TextNodeCData");
return (
<OptionNative
label={label || (hasTextNodeChild ? renderChild(node.children) : undefined)}
value={value ?? label}
enabled={extractValue.asOptionalBoolean(node.props.enabled)}
keywords={extractValue.asOptionalStringArray(node.props.keywords)}
optionRenderer={node.children?.length > 0 && !hasTextNodeChild
? (contextVars) => <MemoizedItem node={node.children} renderChild={renderChild}
contextVars={contextVars} layoutContext={layoutContext} />
: undefined}
>
{!hasTextNodeChild && renderChild(node.children)}
</OptionNative>
);
}
);
```
### OptionNative Adapter
Delegates to context-provided renderer:
```typescript
export const OptionNative = memo((props: Option) => {
const OptionType = useOptionType();
return OptionType ? <OptionType {...props} /> : null;
});
```
## Provider Patterns
### OptionTypeProvider
Enables parent components to control option rendering through context:
```typescript
const OptionTypeContext = React.createContext<ComponentType<Option>>(null);
export const useOptionType = () => React.useContext(OptionTypeContext);
function OptionTypeProvider({ children, Component }: {
children: ReactNode;
Component: ComponentType<Option>
}) {
return <OptionTypeContext.Provider value={Component}>{children}</OptionTypeContext.Provider>;
}
```
**Usage:** Parent wraps children in `OptionTypeProvider` with specific renderer (SelectOption, HiddenOption, RadioGroupOption, etc.). Child Options retrieve renderer via `useOptionType()`.
**Concrete Renderers:**
- **SelectOption** - Radix UI Select.Item for simple dropdown
- **MultiSelectOption** - Custom dropdown items with checkboxes
- **HiddenOption** - Data collection without visible UI
- **RadioGroupOption** - Radio button controls
### OptionContext
Manages option registration lifecycle:
```typescript
type OptionContextValue = {
onOptionAdd: (option: Option) => void;
onOptionRemove: (option: Option) => void;
};
```
**Lifecycle:** Options register on mount (`onOptionAdd`), unregister on unmount (`onOptionRemove`). Parents collect options in Sets/Arrays for selection, filtering, and navigation.
```typescript
// In option renderers
useEffect(() => {
onOptionAdd(opt);
return () => onOptionRemove(opt);
}, [opt, onOptionAdd, onOptionRemove]);
```
## Components Using Options
### Select Component
Select provides single/multi-value selection from dropdown lists with two rendering modes:
**Simple Mode** (default): Radix UI Select primitive, non-searchable, single-select, uses SelectOption.
**Advanced Mode** (searchable/multiSelect): Radix UI Popover, searchable with filtering, multi-select with badges, uses HiddenOption for data collection and MultiSelectOption for rendering.
#### State and Context
```typescript
const [open, setOpen] = useState(false);
const [options, setOptions] = useState(new Set<Option>());
const [searchTerm, setSearchTerm] = useState("");
const [selectedIndex, setSelectedIndex] = useState(-1);
// Option collection
const onOptionAdd = useCallback((option: Option) => {
setOptions((prev) => new Set(prev).add(option));
}, []);
// Contexts provided
const selectContextValue = { multiSelect, value, onChange: toggleOption,
setOpen, setSelectedIndex, options, optionRenderer };
const optionContextValue = { onOptionAdd, onOptionRemove };
```
#### Filtering
```typescript
const filteredOptions = useMemo(() => {
if (!searchTerm?.trim()) return Array.from(options);
const searchLower = searchTerm.toLowerCase();
return Array.from(options).filter((option) => {
const extendedValue = option.value + " " + option.label + " " +
(option.keywords || []).join(" ");
return extendedValue.toLowerCase().includes(searchLower);
});
}, [options, searchTerm]);
```
#### Rendering Modes
```typescript
// Simple: Options render as SelectOption
<OptionTypeProvider Component={SelectOption}>
<SimpleSelect {...props}>{children}</SimpleSelect>
</OptionTypeProvider>
// Advanced: Options hidden, manual MultiSelectOption rendering
<OptionTypeProvider Component={HiddenOption}>
<Popover>
<PopoverContent>
{filteredOptions.map((option) => <MultiSelectOption {...option} />)}
</PopoverContent>
</Popover>
{children}
</OptionTypeProvider>
```
### AutoComplete Component
AutoComplete provides searchable input with dropdown suggestions, supporting single/multi-select and optional item creation.
**Key Features:** Input-driven filtering, creatable options (`creatable` prop), badge UI for multi-select, always uses HiddenOption for data collection.
#### State and Creatable Logic
```typescript
const [inputValue, setInputValue] = useState(""); // Display in input
const [searchTerm, setSearchTerm] = useState(""); // Filter query
const shouldShowCreatable = useMemo(() => {
if (!creatable || !searchTerm?.trim()) return false;
const exists = Array.from(options).some(o =>
o.value === searchTerm || o.label === searchTerm);
if (exists || value === searchTerm) return false;
return filteredOptions.length === 0;
}, [creatable, searchTerm, options, value, filteredOptions]);
// Combined list for unified keyboard navigation
const allItems = useMemo(() => {
const items = [];
if (shouldShowCreatable) {
items.push({ type: "creatable", value: searchTerm, label: `Create "${searchTerm}"` });
}
filteredOptions.forEach(option => items.push({ type: "option", ...option }));
return items;
}, [shouldShowCreatable, searchTerm, filteredOptions]);
```
#### Creating New Options
```typescript
// When user selects creatable item
if (selectedItem.type === "creatable") {
const newOption = { value: searchTerm, label: searchTerm, enabled: true };
onOptionAdd(newOption);
onItemCreated(searchTerm);
toggleOption(searchTerm);
}
```
#### Context
```typescript
const autoCompleteContextValue = {
multi, value, onChange: toggleOption, options,
inputValue, searchTerm, open, setOpen, setSelectedIndex, optionRenderer
};
```
### RadioGroup Component
RadioGroup provides mutually exclusive selection using radio button controls with Radix UI primitives.
**Key Features:** All options always visible (no dropdown), visual radio controls, no search, custom RadioGroupStatusContext (not OptionContext).
#### RadioGroupStatusContext
```typescript
const RadioGroupStatusContext = createContext<{
value?: string;
setValue?: (value: string) => void;
status: ValidationStatus;
enabled?: boolean;
}>({ status: "none", enabled: true });
```
Communicates: current value, value setter, validation status, enabled state.
#### RadioGroupOption Renderer
```typescript
export const RadioGroupOption = ({ value, label, enabled, optionRenderer }: Option) => {
const radioGroupContext = useContext(RadioGroupStatusContext);
const statusStyles = {
[styles.disabled]: !radioGroupContext.enabled || !enabled,
[styles.error]: value === radioGroupContext.value && radioGroupContext.status === "error",
// ... other validation states
};
const item = (
<>
<UnwrappedRadioItem id={id} value={value}
checked={value === radioGroupContext.value} disabled={!enabled} />
<label htmlFor={id}>{label ?? value}</label>
</>
);
return optionRenderer ? (
<label>
{item}
{optionRenderer({ $checked: value === radioGroupContext.value,
$setChecked: radioGroupContext.setValue })}
</label>
) : item;
};
```
**Why Not OptionContext?** All options always visible, no filtering/search needed. Radix manages selection. Simpler direct rendering.
### Pagination Component
Pagination uses Select internally for page size selection, generating options programmatically:
```typescript
<Select
enabled={enabled}
value={`${pageSize}`}
onDidChange={(newPageSize) => handlePageSizeChange(Number(newPageSize))}
>
{pageSizeOptions.map((option) => (
<OptionNative key={option} value={`${option}`} label={`${option} / page`} />
))}
</Select>
```
**Key Points:** Uses `OptionNative` directly (bypasses XMLUI markup), generates options from `pageSizeOptions` prop array, formatted labels ("10 / page"), nested Select handles all option logic.
## Advanced Features
### Custom Rendering
**Child Content:**
```xml
<Option value="user1">
<HStack gap="sm">
<Avatar src="..." />
<VStack><Text>John Doe</Text><Text size="sm">[email protected]</Text></VStack>
</HStack>
</Option>
```
**Component-Level Renderer:**
```typescript
<Select optionRenderer={(option, selectedValue, inTrigger) => (
<div><strong>{option.label}</strong><span>{option.value}</span></div>
)}>
```
**Option-Specific Renderer:**
```xml
<Option value="1" label="Option 1">
<script>
(contextVars) => <div>Custom for {contextVars.$label}</div>
</script>
</Option>
```
### Keyword Search
```xml
<Option value="us" label="United States" keywords={["USA", "America", "US"]} />
```
Search matches value, label, and keywords array.
### Enabled/Disabled State
```xml
<Option value="1" enabled="true" />
<Option value="2" enabled="false" /> <!-- Disabled: non-selectable, skipped in keyboard nav -->
```
### Value Conversion
Valid types: strings, numbers (except NaN), booleans, null. Others convert to empty string.
```typescript
export function convertOptionValue(value: any): any {
if (typeof value === "string" || typeof value === "boolean" || value === null) return value;
if (typeof value === "number" && !isNaN(value)) return value;
return "";
}
```
### Keyword Search
Options support additional searchable terms:
```xml
<Option
value="us"
label="United States"
keywords={["USA", "America", "US"]}
/>
```
When filtering, Select/AutoComplete search across:
- `value` property
- `label` property
- All strings in `keywords` array
This enables finding options by aliases and alternative names.
### Enabled/Disabled State
Options can be individually disabled:
```xml
<Option value="1" label="Available" enabled="true" />
<Option value="2" label="Out of Stock" enabled="false" />
```
Disabled options:
- Render with disabled visual styling
- Cannot be selected by clicking
- Skipped during keyboard navigation
- Remain in the option list for visibility
### Value Conversion
Option values undergo normalization:
```typescript
export function convertOptionValue(value: any): any {
if (
typeof value !== "string" &&
(typeof value !== "number" || (typeof value === "number" && isNaN(value))) &&
typeof value !== "boolean" &&
value !== null
) {
return ""; // Convert invalid values to empty string
}
return value;
}
```
Valid option values:
- Strings
- Numbers (except NaN)
- Booleans
- null
Other types (objects, arrays, undefined, NaN) convert to empty string.
## Implementation Guide
### Adding Option Support
**1. State for Collection:**
```typescript
const [options, setOptions] = useState(new Set<Option>());
```
**2. Registration Callbacks:**
```typescript
const onOptionAdd = useCallback((option: Option) => {
setOptions((prev) => new Set(prev).add(option));
}, []);
const onOptionRemove = useCallback((option: Option) => {
setOptions((prev) => { const s = new Set(prev); s.delete(option); return s; });
}, []);
```
**3. Provide Context:**
```typescript
<OptionContext.Provider value={{ onOptionAdd, onOptionRemove }}>
<OptionTypeProvider Component={YourOptionRenderer}>
{children}
</OptionTypeProvider>
</OptionContext.Provider>
```
**4. Custom Renderer:**
```typescript
const YourOptionRenderer = ({ value, label, enabled, children }: Option) => {
const { onOptionAdd, onOptionRemove } = useOption();
const opt = useMemo(() => ({ value, label, enabled, keywords: [label] }),
[value, label, enabled]);
useEffect(() => {
onOptionAdd(opt);
return () => onOptionRemove(opt);
}, [opt, onOptionAdd, onOptionRemove]);
return <div>{children || label}</div>;
};
```
### Performance
**Use Sets:** Fast lookup/add/remove, automatic deduplication. Convert to Array for iteration/filtering.
**Memoize:** Prevent unnecessary re-renders:
```typescript
const filteredOptions = useMemo(() => /* filtering */, [options, searchTerm]);
const contextValue = useMemo(() => ({ onOptionAdd, onOptionRemove }), [onOptionAdd, onOptionRemove]);
```
**Stable Option Objects:** Ensure memoization for Set comparison:
```typescript
const opt = useMemo(() => ({ value, label, enabled }), [value, label, enabled]);
```
### Accessibility
- Use `role="option"`, `role="listbox"`, `role="combobox"`
- Implement `aria-disabled`, `aria-selected`, `aria-expanded`
- Keyboard navigation: ArrowUp/Down, Enter, Escape
- Focus management and focus trapping
### Testing Checklist
- Option registration/unregistration
- Selection handling (single/multi)
- Filtering (label, value, keywords)
- Keyboard navigation
- Custom rendering
- Edge cases (empty list, all disabled, duplicates)
## Summary
The Option architecture provides flexible, declarative selectable choices through:
1. **Non-Visual Data Model** - Pure data, parent-determined rendering
2. **Provider Pattern** - Context-specific rendering via OptionTypeProvider
3. **Registration Pattern** - Dynamic collection via OptionContext
4. **Flexible Display** - Labels, rich content, custom renderers
5. **Search Integration** - Built-in keyword support
6. **Accessibility** - ARIA attributes and keyboard navigation
This enables consistent option handling across Select, AutoComplete, RadioGroup, and Pagination with unique interaction patterns per component.
```
--------------------------------------------------------------------------------
/xmlui/src/syntax/textMate/xmlui-dark.json:
--------------------------------------------------------------------------------
```json
{
"name": "xmlui-dark",
"type": "css",
"colors": {
"foreground": "#616161",
"focusBorder": "#161F26",
"widget.shadow": "#161F2694",
"input.background": "#FFF",
"input.border": "#161F26",
"input.foreground": "#000",
"input.placeholderForeground": "#a0a0a0",
"inputOption.activeBorder": "#3E313C",
"inputValidation.errorBackground": "#F44C5E",
"inputValidation.errorForeground": "#FFF",
"inputValidation.infoBackground": "#6182b8",
"inputValidation.infoForeground": "#FFF",
"inputValidation.warningBackground": "#F6B555",
"inputValidation.warningForeground": "#000",
"list.activeSelectionBackground": "#5899C5",
"list.activeSelectionForeground": "#fff",
"list.hoverBackground": "#d5e1ea",
"list.hoverForeground": "#fff",
"list.focusBackground": "#d5e1ea",
"list.focusForeground": "#fff",
"list.inactiveSelectionBackground": "#5899C5",
"list.inactiveSelectionForeground": "#fff",
"list.highlightForeground": "#2D3E4C",
"list.inactiveFocusBackground": "#161F26",
"list.invalidItemForeground": "#fff",
"button.background": "#475663",
"button.foreground": "#FFF",
"button.hoverBackground": "#161F26",
"scrollbar.shadow": "#ffffff00",
"scrollbarSlider.activeBackground": "#161F267e",
"scrollbarSlider.background": "#161F267e",
"scrollbarSlider.hoverBackground": "#161F267e",
"badge.background": "#8AE773",
"progressBar.background": "#8AE773",
"editor.background": "#FFF",
"editor.foreground": "#000",
"editor.lineHighlightBackground": "#EEEEEE",
"editor.wordHighlightStrongBackground": "#EEEEEE",
"editor.selectionBackground": "#AED4FB",
"editorLineNumber.foreground": "#b9b9b9",
"editorActiveLineNumber.foreground": "#475663",
"editor.findMatchBackground": "#AED4FB",
"editorHint.foreground": "#F9F9F9",
"editorHint.border": "#F9F9F9",
"editor.wordHighlightBackground": "#AED4FB",
"terminal.border": "#2D3E4C",
"terminal.foreground": "#161F26",
"terminal.ansiBlack": "#000000",
"terminal.ansiBlue": "#6182b8",
"terminal.ansiBrightBlack": "#90a4ae",
"terminal.ansiBrightBlue": "#6182b8",
"terminal.ansiBrightCyan": "#39adb5",
"terminal.ansiBrightGreen": "#91b859",
"terminal.ansiBrightMagenta": "#7c4dff",
"terminal.ansiBrightRed": "#e53935",
"terminal.ansiBrightWhite": "#ffffff",
"terminal.ansiBrightYellow": "#ffb62c",
"terminal.ansiCyan": "#39adb5",
"terminal.ansiGreen": "#91b859",
"terminal.ansiMagenta": "#7c4dff",
"terminal.ansiRed": "#e53935",
"terminal.ansiWhite": "#ffffff",
"terminal.ansiYellow": "#ffb62c",
"terminal.selectionBackground": "#0006",
"panelTitle.activeForeground": "#161F26",
"activityBar.background": "#161F26",
"activityBar.foreground": "#FFF",
"activityBar.dropBackground": "#FFF",
"activityBarBadge.background": "#8AE773",
"activityBarBadge.foreground": "#FFF",
"panel.border": "#2D3E4C",
"dropdown.background": "#FFF",
"dropdown.listBackground": "#FFF",
"dropdown.border": "#DCDEDF",
"dropdown.foreground": "#DCDEDF",
"sideBar.background": "#2D3E4C",
"sideBar.foreground": "#DCDEDF",
"sideBarTitle.foreground": "#FFF",
"sideBarSectionHeader.foreground": "#FFF",
"sideBarSectionHeader.background": "#161F26",
"debugToolBar.background": "#161F26",
"tab.border": "#F3F3F3",
"tab.activeBackground": "#FFF",
"tab.inactiveForeground": "#686868",
"tab.inactiveBackground": "#F3F3F3",
"tab.activeForeground": "#000",
"editorGroupHeader.tabsBackground": "#2D3E4C",
"statusBar.foreground": "#FFF",
"statusBar.background": "#5899C5",
"statusBar.debuggingBackground": "#8AE773",
"statusBar.noFolderBackground": "#161F26",
"extensionButton.prominentBackground": "#475663",
"extensionButton.prominentForeground": "#F6F6F6",
"extensionButton.prominentHoverBackground": "#161F26",
"gitDecoration.modifiedResourceForeground": "#ECB22E",
"gitDecoration.deletedResourceForeground": "#FFF",
"gitDecoration.untrackedResourceForeground": "#ECB22E",
"gitDecoration.ignoredResourceForeground": "#877583",
"gitDecoration.addedResourceForeground": "#ECB22E",
"gitDecoration.conflictingResourceForeground": "#FFF",
"notificationCenter.border": "#161F26",
"notificationToast.border": "#161F26",
"notifications.foreground": "#FFF",
"notifications.background": "#161F26",
"notifications.border": "#161F26",
"notificationCenterHeader.foreground": "#FFF",
"notificationLink.foreground": "#FFF",
"titleBar.activeBackground": "#2D3E4C",
"titleBar.activeForeground": "#FFF",
"titleBar.inactiveBackground": "#161F26",
"titleBar.inactiveForeground": "#685C66",
"titleBar.border": "#2D3E4C",
"welcomePage.buttonBackground": "#F3F3F3",
"welcomePage.buttonHoverBackground": "#ECECEC",
"editorWidget.background": "#F9F9F9",
"editorWidget.border": "#dbdbdb",
"editorSuggestWidget.foreground": "#2D3E4C",
"editorSuggestWidget.highlightForeground": "#2D3E4C",
"editorSuggestWidget.selectedBackground": "#b9b9b9",
"editorGroup.emptyBackground": "#2D3E4C",
"editorGroup.focusedEmptyBorder": "#2D3E4C",
"editorPane.background": "#2D3E4C",
"breadcrumb.foreground": "#161F26",
"breadcrumb.focusForeground": "#475663",
"settings.headerForeground": "#161F26",
"settings.dropdownForeground": "#161F26",
"settings.dropdownBorder": "#161F26",
"menu.separatorBackground": "#F9FAFA",
"menu.background": "#161F26",
"menu.foreground": "#F9FAFA",
"textPreformat.foreground": "#161F26",
"editorIndentGuide.background": "#F3F3F3",
"editorIndentGuide.activeBackground": "#dbdbdb",
"debugExceptionWidget.background": "#AED4FB",
"debugExceptionWidget.border": "#161F26",
"editorMarkerNavigation.background": "#F9F9F9",
"editorMarkerNavigationInfo.background": "#6182b8",
"editorMarkerNavigationError.background": "#F44C5E",
"editorMarkerNavigationWarning.background": "#F6B555"
},
"tokenColors": [
{
"scope": [
"support.class.tag.component"
],
"settings": {
"foreground": "#FE6BAD"
}
},
{
"scope": [
"punctuation.definition.tag"
],
"settings": {
"foreground": "#97A7C5"
}
},
{
"scope": [
"entity.other.attribute-name.localname"
],
"settings": {
"foreground": "#cbd5e1"
}
},
{
"scope": [
"keyword.operator"
],
"settings": {
"foreground": "#cbd5e1"
}
},
{
"scope": [
"string.xmlui"
],
"settings": {
"foreground": "#7dd3fc"
}
},
{
"scope": [
"entity.name.function"
],
"settings": {
"foreground": "#78DBDB"
}
},
{
"scope": [
"entity.name.tag.localname"
],
"settings": {
"foreground": "#80A6F8"
}
},
{
"scope": [
"punctuation.definition.comment.xmlui"
],
"settings": {
"foreground": "#9296a9"
}
},
{
"scope": [
"comment.block.xmlui"
],
"settings": {
"foreground": "#9296a9",
"fontStyle": "italic"
}
},
{
"scope": [
"constant.character.escape.xmlui"
],
"settings": {
"foreground": "#61F69D"
}
},
{
"scope": [
"punctuation.definition.constant.xmlui"
],
"settings": {
"foreground": "#BAF80A"
}
},
{
"scope": [
"storage.xmlui"
],
"settings": {
"foreground": "#5CC1F9"
}
},
{
"scope": [
"punctuation.definition.block.xmlui"
],
"settings": {
"foreground": "#FFD502"
}
},
{
"settings": {
"foreground": "#f5f5ff"
}
},
{
"scope": [
"string.quoted.single",
"string.quoted.double"
],
"settings": {
"foreground": "#7dd3fc"
}
},
{
"scope": [
"meta.paragraph.markdown",
"string.other.link.description.title.markdown"
],
"settings": {
"foreground": "#110000"
}
},
{
"scope": [
"entity.name.section.markdown",
"punctuation.definition.heading.markdown"
],
"settings": {
"foreground": "#034c7c"
}
},
{
"scope": [
"punctuation.definition.string.begin.markdown",
"punctuation.definition.string.end.markdown",
"markup.quote.markdown"
],
"settings": {
"foreground": "#00AC8F"
}
},
{
"scope": [
"markup.quote.markdown"
],
"settings": {
"fontStyle": "italic",
"foreground": "#003494"
}
},
{
"scope": [
"markup.bold.markdown",
"punctuation.definition.bold.markdown"
],
"settings": {
"fontStyle": "bold",
"foreground": "#4e76b5"
}
},
{
"scope": [
"markup.italic.markdown",
"punctuation.definition.italic.markdown"
],
"settings": {
"fontStyle": "italic",
"foreground": "#C792EA"
}
},
{
"scope": [
"markup.inline.raw.string.markdown",
"markup.fenced_code.block.markdown"
],
"settings": {
"fontStyle": "italic",
"foreground": "#0460b1"
}
},
{
"scope": [
"punctuation.definition.metadata.markdown"
],
"settings": {
"foreground": "#00AC8F"
}
},
{
"scope": [
"markup.underline.link.image.markdown",
"markup.underline.link.markdown"
],
"settings": {
"foreground": "#924205"
}
},
{
"name": "Component Tag",
"scope": "component.tag",
"settings": {
"foreground": "#1174FF"
}
},
{
"name": "Attribute name",
"scope": "attribute.name",
"settings": {
"fontStyle": "italic",
"foreground": "#FF8D23"
}
},
{
"name": "Attribute value",
"scope": "attribute.value",
"settings": {
"foreground": "#7681FF"
}
},
{
"name": "Helper Tag",
"scope": "helper.tag",
"settings": {
"foreground": "#32D158"
}
},
{
"name": "Library function",
"scope": "support.function",
"settings": {
"fontStyle": "",
"foreground": "#1ab394"
}
},
{
"name": "Library constant",
"scope": "support.constant",
"settings": {
"fontStyle": "",
"foreground": "#7681FF"
}
},
{
"name": "Library class/type",
"scope": [
"support.type",
"support.class"
],
"settings": {
"foreground": "#CBD5E1"
}
},
{
"name": "Library variable",
"scope": "support.other.variable",
"settings": {
"foreground": "#224555"
}
},
{
"name": "Invalid",
"scope": "invalid",
"settings": {
"fontStyle": " italic bold underline",
"foreground": "#207bb8"
}
},
{
"name": "Invalid deprecated",
"scope": "invalid.deprecated",
"settings": {
"foreground": "#207bb8",
"fontStyle": " bold italic underline"
}
},
{
"name": "[JSON] - Support",
"scope": "source.json support",
"settings": {
"foreground": "#6dbdfa"
}
},
{
"name": "[JSON] - String",
"scope": [
"source.json string",
"source.json punctuation.definition.string"
],
"settings": {
"foreground": "#7DD3FC"
}
},
{
"name": "Lists",
"scope": "markup.list",
"settings": {
"foreground": "#207bb8"
}
},
{
"name": "Headings",
"scope": [
"markup.heading punctuation.definition.heading",
"entity.name.section"
],
"settings": {
"fontStyle": "",
"foreground": "#4FB4D8"
}
},
{
"name": "Support",
"scope": [
"text.html.markdown meta.paragraph meta.link.inline",
"text.html.markdown meta.paragraph meta.link.inline punctuation.definition.string.begin.markdown",
"text.html.markdown meta.paragraph meta.link.inline punctuation.definition.string.end.markdown"
],
"settings": {
"foreground": "#87429A"
}
},
{
"name": "Quotes",
"scope": "markup.quote",
"settings": {
"foreground": "#87429A"
}
},
{
"name": "Bold",
"scope": "markup.bold",
"settings": {
"fontStyle": "bold",
"foreground": "#08134A"
}
},
{
"name": "Italic",
"scope": [
"markup.italic",
"punctuation.definition.italic"
],
"settings": {
"fontStyle": "italic",
"foreground": "#7681FF"
}
},
{
"name": "Link Url",
"scope": "meta.link",
"settings": {
"foreground": "#87429A"
}
},
{
"name": "String",
"scope": "string",
"settings": {
"foreground": "#152dd0"
}
},
{
"name": "Number",
"scope": "constant.numeric",
"settings": {
"foreground": "#7681FF"
}
},
{
"name": "Constant",
"scope": "constant",
"settings": {
"foreground": "#7681FF"
}
},
{
"name": "Built-in constant",
"scope": "language.method",
"settings": {
"foreground": "#7681FF"
}
},
{
"name": "User-defined constant",
"scope": [
"constant.character",
"constant.other"
],
"settings": {
"foreground": "#7681FF"
}
},
{
"name": "Variable",
"scope": "variable",
"settings": {
"fontStyle": "",
"foreground": "#2f86d2"
}
},
{
"name": "Variable",
"scope": "variable.language.this",
"settings": {
"fontStyle": "",
"foreground": "#000000"
}
},
{
"name": "Keyword",
"scope": "keyword",
"settings": {
"fontStyle": "",
"foreground": "#7b30d0"
}
},
{
"name": "Storage",
"scope": "storage",
"settings": {
"fontStyle": "",
"foreground": "#da5221"
}
},
{
"name": "Storage type",
"scope": "storage.type",
"settings": {
"foreground": "#0991b6",
"fontStyle": ""
}
},
{
"name": "Class name",
"scope": "entity.name.class",
"settings": {
"foreground": "#1172c7"
}
},
{
"name": "Inherited class",
"scope": "entity.other.inherited-class",
"settings": {
"fontStyle": "",
"foreground": "#b02767"
}
},
{
"name": "Function argument",
"scope": "variable.parameter",
"settings": {
"foreground": "#b1108e",
"fontStyle": ""
}
},
{
"name": "Tag name",
"scope": "entity.name.tag",
"settings": {
"fontStyle": "",
"foreground": "#0444ac"
}
},
{
"name": "Html Other",
"scope": "text.html.basic",
"settings": {
"fontStyle": "",
"foreground": "#0071ce"
}
},
{
"name": "Entity Name Type",
"scope": "entity.name.type",
"settings": {
"foreground": "#0444ac"
}
}
]
}
```