This is page 2 of 136. Use http://codebase.md/xmlui-org/xmlui?page={x} to view the full context.
# Directory Structure
```
├── .changeset
│ ├── cold-items-taste.md
│ ├── config.json
│ ├── empty-spiders-dress.md
│ ├── shy-windows-allow.md
│ ├── sour-coins-read.md
│ ├── tame-zebras-invite.md
│ ├── twenty-jeans-watch.md
│ └── warm-spies-melt.md
├── .eslintrc.cjs
├── .github
│ ├── build-checklist.png
│ ├── ISSUE_TEMPLATE
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ └── workflows
│ ├── deploy-docs-optimized.yml
│ ├── deploy-docs.yml
│ ├── prepare-versions.yml
│ ├── release-packages.yml
│ ├── run-all-tests.yml
│ └── run-smoke-tests.yml
├── .gitignore
├── .prettierrc.js
├── .vscode
│ ├── launch.json
│ └── settings.json
├── blog
│ ├── .gitignore
│ ├── .gitkeep
│ ├── CHANGELOG.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── blog
│ │ │ ├── images
│ │ │ │ ├── blog-page-component.png
│ │ │ │ ├── blog-scrabble.png
│ │ │ │ ├── integrated-blog-search.png
│ │ │ │ └── lorem-ipsum.png
│ │ │ ├── lorem-ipsum.md
│ │ │ ├── newest-post.md
│ │ │ ├── older-post.md
│ │ │ └── welcome-to-the-xmlui-blog.md
│ │ ├── mockServiceWorker.js
│ │ ├── resources
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ └── for-download
│ │ │ │ └── xmlui
│ │ │ │ └── xmlui-standalone.umd.js
│ │ │ ├── github.svg
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ └── PageNotFound.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ ├── docs-theme.ts
│ │ ├── earthtone.ts
│ │ ├── xmlui-gray-on-default.ts
│ │ ├── xmlui-green-on-default.ts
│ │ └── xmlui-orange-on-default.ts
│ └── tsconfig.json
├── CONTRIBUTING.md
├── docs
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── ComponentRefLinks.txt
│ ├── content
│ │ ├── _meta.json
│ │ ├── components
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── APICall.md
│ │ │ ├── App.md
│ │ │ ├── AppHeader.md
│ │ │ ├── AppState.md
│ │ │ ├── AutoComplete.md
│ │ │ ├── Avatar.md
│ │ │ ├── Backdrop.md
│ │ │ ├── Badge.md
│ │ │ ├── BarChart.md
│ │ │ ├── Bookmark.md
│ │ │ ├── Breakout.md
│ │ │ ├── Button.md
│ │ │ ├── Card.md
│ │ │ ├── Carousel.md
│ │ │ ├── ChangeListener.md
│ │ │ ├── Checkbox.md
│ │ │ ├── CHStack.md
│ │ │ ├── ColorPicker.md
│ │ │ ├── Column.md
│ │ │ ├── ContentSeparator.md
│ │ │ ├── CVStack.md
│ │ │ ├── DataSource.md
│ │ │ ├── DateInput.md
│ │ │ ├── DatePicker.md
│ │ │ ├── DonutChart.md
│ │ │ ├── DropdownMenu.md
│ │ │ ├── EmojiSelector.md
│ │ │ ├── ExpandableItem.md
│ │ │ ├── FileInput.md
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FlowLayout.md
│ │ │ ├── Footer.md
│ │ │ ├── Form.md
│ │ │ ├── FormItem.md
│ │ │ ├── FormSection.md
│ │ │ ├── Fragment.md
│ │ │ ├── H1.md
│ │ │ ├── H2.md
│ │ │ ├── H3.md
│ │ │ ├── H4.md
│ │ │ ├── H5.md
│ │ │ ├── H6.md
│ │ │ ├── Heading.md
│ │ │ ├── HSplitter.md
│ │ │ ├── HStack.md
│ │ │ ├── Icon.md
│ │ │ ├── IFrame.md
│ │ │ ├── Image.md
│ │ │ ├── Items.md
│ │ │ ├── LabelList.md
│ │ │ ├── Legend.md
│ │ │ ├── LineChart.md
│ │ │ ├── Link.md
│ │ │ ├── List.md
│ │ │ ├── Logo.md
│ │ │ ├── Markdown.md
│ │ │ ├── MenuItem.md
│ │ │ ├── MenuSeparator.md
│ │ │ ├── ModalDialog.md
│ │ │ ├── NavGroup.md
│ │ │ ├── NavLink.md
│ │ │ ├── NavPanel.md
│ │ │ ├── NoResult.md
│ │ │ ├── NumberBox.md
│ │ │ ├── Option.md
│ │ │ ├── Page.md
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── Pages.md
│ │ │ ├── Pagination.md
│ │ │ ├── PasswordInput.md
│ │ │ ├── PieChart.md
│ │ │ ├── ProgressBar.md
│ │ │ ├── Queue.md
│ │ │ ├── RadioGroup.md
│ │ │ ├── RealTimeAdapter.md
│ │ │ ├── Redirect.md
│ │ │ ├── Select.md
│ │ │ ├── Slider.md
│ │ │ ├── Slot.md
│ │ │ ├── SpaceFiller.md
│ │ │ ├── Spinner.md
│ │ │ ├── Splitter.md
│ │ │ ├── Stack.md
│ │ │ ├── StickyBox.md
│ │ │ ├── SubMenuItem.md
│ │ │ ├── Switch.md
│ │ │ ├── TabItem.md
│ │ │ ├── Table.md
│ │ │ ├── TableOfContents.md
│ │ │ ├── Tabs.md
│ │ │ ├── Text.md
│ │ │ ├── TextArea.md
│ │ │ ├── TextBox.md
│ │ │ ├── Theme.md
│ │ │ ├── TimeInput.md
│ │ │ ├── Timer.md
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneSwitch.md
│ │ │ ├── Tooltip.md
│ │ │ ├── Tree.md
│ │ │ ├── VSplitter.md
│ │ │ ├── VStack.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ ├── xmlui-spreadsheet
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Spreadsheet.md
│ │ │ └── xmlui-website-blocks
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Carousel.md
│ │ │ ├── HelloMd.md
│ │ │ ├── HeroSection.md
│ │ │ └── ScrollToTop.md
│ │ └── extensions
│ │ ├── _meta.json
│ │ ├── xmlui-animations
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Animation.md
│ │ │ ├── FadeAnimation.md
│ │ │ ├── FadeInAnimation.md
│ │ │ ├── FadeOutAnimation.md
│ │ │ ├── ScaleAnimation.md
│ │ │ └── SlideInAnimation.md
│ │ └── xmlui-website-blocks
│ │ ├── _meta.json
│ │ ├── _overview.md
│ │ ├── Carousel.md
│ │ ├── HelloMd.md
│ │ ├── HeroSection.md
│ │ └── ScrollToTop.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── feed.rss
│ │ ├── mockServiceWorker.js
│ │ ├── pages
│ │ │ ├── _meta.json
│ │ │ ├── app-structure.md
│ │ │ ├── build-editor-component.md
│ │ │ ├── build-hello-world-component.md
│ │ │ ├── components-intro.md
│ │ │ ├── context-variables.md
│ │ │ ├── forms.md
│ │ │ ├── globals.md
│ │ │ ├── glossary.md
│ │ │ ├── helper-tags.md
│ │ │ ├── hosted-deployment.md
│ │ │ ├── howto
│ │ │ │ ├── assign-a-complex-json-literal-to-a-component-variable.md
│ │ │ │ ├── chain-a-refetch.md
│ │ │ │ ├── debug-a-component.md
│ │ │ │ ├── delay-a-datasource-until-another-datasource-is-ready.md
│ │ │ │ ├── delegate-a-method.md
│ │ │ │ ├── do-custom-form-validation.md
│ │ │ │ ├── expose-a-method-from-a-component.md
│ │ │ │ ├── filter-and-transform-data-from-an-api.md
│ │ │ │ ├── group-items-in-list-by-a-property.md
│ │ │ │ ├── handle-background-operations.md
│ │ │ │ ├── hide-an-element-until-its-datasource-is-ready.md
│ │ │ │ ├── make-a-set-of-equal-width-cards.md
│ │ │ │ ├── make-a-table-responsive.md
│ │ │ │ ├── modify-a-value-reported-in-a-column.md
│ │ │ │ ├── paginate-a-list.md
│ │ │ │ ├── pass-data-to-a-modal-dialog.md
│ │ │ │ ├── react-to-button-click-not-keystrokes.md
│ │ │ │ ├── set-the-initial-value-of-a-select-from-fetched-data.md
│ │ │ │ ├── share-a-modaldialog-across-components.md
│ │ │ │ ├── sync-selections-between-table-and-list-views.md
│ │ │ │ ├── update-ui-optimistically.md
│ │ │ │ ├── use-built-in-form-validation.md
│ │ │ │ └── use-the-same-modaldialog-to-add-or-edit.md
│ │ │ ├── howto.md
│ │ │ ├── intro.md
│ │ │ ├── layout.md
│ │ │ ├── markup.md
│ │ │ ├── mcp.md
│ │ │ ├── modal-dialogs.md
│ │ │ ├── news-and-reviews.md
│ │ │ ├── reactive-intro.md
│ │ │ ├── refactoring.md
│ │ │ ├── routing-and-links.md
│ │ │ ├── samples
│ │ │ │ ├── color-palette.xmlui
│ │ │ │ ├── color-values.xmlui
│ │ │ │ ├── shadow-sizes.xmlui
│ │ │ │ ├── spacing-sizes.xmlui
│ │ │ │ ├── swatch.xmlui
│ │ │ │ ├── theme-gallery-brief.xmlui
│ │ │ │ └── theme-gallery.xmlui
│ │ │ ├── scoping.md
│ │ │ ├── scripting.md
│ │ │ ├── styles-and-themes
│ │ │ │ ├── common-units.md
│ │ │ │ ├── layout-props.md
│ │ │ │ ├── theme-variable-defaults.md
│ │ │ │ ├── theme-variables.md
│ │ │ │ └── themes.md
│ │ │ ├── template-properties.md
│ │ │ ├── test.md
│ │ │ ├── tutorial-01.md
│ │ │ ├── tutorial-02.md
│ │ │ ├── tutorial-03.md
│ │ │ ├── tutorial-04.md
│ │ │ ├── tutorial-05.md
│ │ │ ├── tutorial-06.md
│ │ │ ├── tutorial-07.md
│ │ │ ├── tutorial-08.md
│ │ │ ├── tutorial-09.md
│ │ │ ├── tutorial-10.md
│ │ │ ├── tutorial-11.md
│ │ │ ├── tutorial-12.md
│ │ │ ├── universal-properties.md
│ │ │ ├── user-defined-components.md
│ │ │ ├── vscode.md
│ │ │ ├── working-with-markdown.md
│ │ │ ├── working-with-text.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-charts
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── DonutChart.md
│ │ │ │ ├── LabelList.md
│ │ │ │ ├── Legend.md
│ │ │ │ ├── LineChart.md
│ │ │ │ └── PieChart.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ └── xmlui-spreadsheet
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ └── Spreadsheet.md
│ │ ├── resources
│ │ │ ├── devdocs
│ │ │ │ ├── debug-proxy-object-2.png
│ │ │ │ ├── debug-proxy-object.png
│ │ │ │ ├── table_editor_01.png
│ │ │ │ ├── table_editor_02.png
│ │ │ │ ├── table_editor_03.png
│ │ │ │ ├── table_editor_04.png
│ │ │ │ ├── table_editor_05.png
│ │ │ │ ├── table_editor_06.png
│ │ │ │ ├── table_editor_07.png
│ │ │ │ ├── table_editor_08.png
│ │ │ │ ├── table_editor_09.png
│ │ │ │ ├── table_editor_10.png
│ │ │ │ ├── table_editor_11.png
│ │ │ │ ├── table-editor-01.png
│ │ │ │ ├── table-editor-02.png
│ │ │ │ ├── table-editor-03.png
│ │ │ │ ├── table-editor-04.png
│ │ │ │ ├── table-editor-06.png
│ │ │ │ ├── table-editor-07.png
│ │ │ │ ├── table-editor-08.png
│ │ │ │ ├── table-editor-09.png
│ │ │ │ └── xmlui-rendering-of-tiptap-markdown.png
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ ├── clients.json
│ │ │ │ ├── daily-revenue.json
│ │ │ │ ├── dashboard-stats.json
│ │ │ │ ├── demo.xmlui
│ │ │ │ ├── demo.xmlui.xs
│ │ │ │ ├── downloads
│ │ │ │ │ └── downloads.json
│ │ │ │ ├── for-download
│ │ │ │ │ ├── index-with-api.html
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── mockApi.js
│ │ │ │ │ ├── start-darwin.sh
│ │ │ │ │ ├── start-linux.sh
│ │ │ │ │ ├── start.bat
│ │ │ │ │ └── xmlui
│ │ │ │ │ └── xmlui-standalone.umd.js
│ │ │ │ ├── getting-started
│ │ │ │ │ ├── cl-tutorial-final.zip
│ │ │ │ │ ├── cl-tutorial.zip
│ │ │ │ │ ├── cl-tutorial2.zip
│ │ │ │ │ ├── cl-tutorial3.zip
│ │ │ │ │ ├── cl-tutorial4.zip
│ │ │ │ │ ├── cl-tutorial5.zip
│ │ │ │ │ ├── cl-tutorial6.zip
│ │ │ │ │ ├── getting-started.zip
│ │ │ │ │ ├── hello-xmlui.zip
│ │ │ │ │ ├── xmlui-empty.zip
│ │ │ │ │ └── xmlui-starter.zip
│ │ │ │ ├── howto
│ │ │ │ │ └── component-icons
│ │ │ │ │ └── up-arrow.svg
│ │ │ │ ├── invoices.json
│ │ │ │ ├── monthly-status.json
│ │ │ │ ├── news-and-reviews.json
│ │ │ │ ├── products.json
│ │ │ │ ├── releases.json
│ │ │ │ ├── tutorials
│ │ │ │ │ ├── datasource
│ │ │ │ │ │ └── api.ts
│ │ │ │ │ └── p2do
│ │ │ │ │ ├── api.ts
│ │ │ │ │ └── todo-logo.svg
│ │ │ │ └── xmlui.json
│ │ │ ├── github.svg
│ │ │ ├── images
│ │ │ │ ├── apiaction-tutorial
│ │ │ │ │ ├── add-success.png
│ │ │ │ │ ├── apiaction-param.png
│ │ │ │ │ ├── change-completed.png
│ │ │ │ │ ├── change-in-progress.png
│ │ │ │ │ ├── confirm-delete.png
│ │ │ │ │ ├── data-error.png
│ │ │ │ │ ├── data-progress.png
│ │ │ │ │ ├── data-success.png
│ │ │ │ │ ├── display-1.png
│ │ │ │ │ ├── item-deleted.png
│ │ │ │ │ ├── item-updated.png
│ │ │ │ │ ├── missing-api-key.png
│ │ │ │ │ ├── new-item-added.png
│ │ │ │ │ └── test-message.png
│ │ │ │ ├── chat-api
│ │ │ │ │ └── domain-model.svg
│ │ │ │ ├── components
│ │ │ │ │ ├── image
│ │ │ │ │ │ └── breakfast.jpg
│ │ │ │ │ ├── markdown
│ │ │ │ │ │ └── colors.png
│ │ │ │ │ └── modal
│ │ │ │ │ ├── deep_link_dialog_1.jpg
│ │ │ │ │ └── deep_link_dialog_2.jpg
│ │ │ │ ├── create-apps
│ │ │ │ │ ├── collapsed-vertical.png
│ │ │ │ │ ├── using-forms-warning-dialog.png
│ │ │ │ │ └── using-forms.png
│ │ │ │ ├── datasource-tutorial
│ │ │ │ │ ├── data-with-header.png
│ │ │ │ │ ├── filtered-data.png
│ │ │ │ │ ├── filtered-items.png
│ │ │ │ │ ├── initial-page-items.png
│ │ │ │ │ ├── list-items.png
│ │ │ │ │ ├── next-page-items.png
│ │ │ │ │ ├── no-data.png
│ │ │ │ │ ├── pagination-1.jpg
│ │ │ │ │ ├── pagination-1.png
│ │ │ │ │ ├── polling-1.png
│ │ │ │ │ ├── refetch-data.png
│ │ │ │ │ ├── slow-loading.png
│ │ │ │ │ ├── test-message.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── unconventional-data.png
│ │ │ │ │ └── unfiltered-items.png
│ │ │ │ ├── flower.jpg
│ │ │ │ ├── get-started
│ │ │ │ │ ├── add-new-contact.png
│ │ │ │ │ ├── app-modified.png
│ │ │ │ │ ├── app-start.png
│ │ │ │ │ ├── app-with-boxes.png
│ │ │ │ │ ├── app-with-toast.png
│ │ │ │ │ ├── boilerplate-structure.png
│ │ │ │ │ ├── cl-initial.png
│ │ │ │ │ ├── cl-start.png
│ │ │ │ │ ├── contact-counts.png
│ │ │ │ │ ├── contact-dialog-title.png
│ │ │ │ │ ├── contact-dialog.png
│ │ │ │ │ ├── contact-menus.png
│ │ │ │ │ ├── contact-predicates.png
│ │ │ │ │ ├── context-menu.png
│ │ │ │ │ ├── dashboard-numbers.png
│ │ │ │ │ ├── default-contact-list.png
│ │ │ │ │ ├── delete-contact.png
│ │ │ │ │ ├── delete-task.png
│ │ │ │ │ ├── detailed-template.png
│ │ │ │ │ ├── edit-contact-details.png
│ │ │ │ │ ├── edited-contact-saved.png
│ │ │ │ │ ├── empty-sections.png
│ │ │ │ │ ├── filter-completed.png
│ │ │ │ │ ├── fullwidth-desktop.png
│ │ │ │ │ ├── fullwidth-mobile.png
│ │ │ │ │ ├── initial-table.png
│ │ │ │ │ ├── items-and-badges.png
│ │ │ │ │ ├── loading-message.png
│ │ │ │ │ ├── new-contact-button.png
│ │ │ │ │ ├── new-contact-saved.png
│ │ │ │ │ ├── no-empty-sections.png
│ │ │ │ │ ├── personal-todo-initial.png
│ │ │ │ │ ├── piechart.png
│ │ │ │ │ ├── review-today.png
│ │ │ │ │ ├── rudimentary-dashboard.png
│ │ │ │ │ ├── section-collapsed.png
│ │ │ │ │ ├── sectioned-items.png
│ │ │ │ │ ├── sections-ordered.png
│ │ │ │ │ ├── spacex-list-with-links.png
│ │ │ │ │ ├── spacex-list.png
│ │ │ │ │ ├── start-personal-todo-1.png
│ │ │ │ │ ├── submit-new-contact.png
│ │ │ │ │ ├── submit-new-task.png
│ │ │ │ │ ├── syntax-highlighting.png
│ │ │ │ │ ├── table-with-badge.png
│ │ │ │ │ ├── template-with-card.png
│ │ │ │ │ ├── test-emulated-api.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── todo-logo.png
│ │ │ │ │ └── xmlui-tools.png
│ │ │ │ ├── HelloApp.png
│ │ │ │ ├── HelloApp2.png
│ │ │ │ ├── logos
│ │ │ │ │ ├── xmlui1.svg
│ │ │ │ │ ├── xmlui2.svg
│ │ │ │ │ ├── xmlui3.svg
│ │ │ │ │ ├── xmlui4.svg
│ │ │ │ │ ├── xmlui5.svg
│ │ │ │ │ ├── xmlui6.svg
│ │ │ │ │ └── xmlui7.svg
│ │ │ │ ├── pdf
│ │ │ │ │ └── dummy-pdf.jpg
│ │ │ │ ├── rendering-engine
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ ├── Component.svg
│ │ │ │ │ ├── CompoundComponent.svg
│ │ │ │ │ ├── RootComponent.svg
│ │ │ │ │ └── tree-with-containers.svg
│ │ │ │ ├── reviewers-guide
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ └── incbutton-in-action.png
│ │ │ │ ├── tools
│ │ │ │ │ └── boilerplate-structure.png
│ │ │ │ ├── try.svg
│ │ │ │ ├── tutorial
│ │ │ │ │ ├── app-chat-history.png
│ │ │ │ │ ├── app-content-placeholder.png
│ │ │ │ │ ├── app-header-and-content.png
│ │ │ │ │ ├── app-links-channel-selected.png
│ │ │ │ │ ├── app-links-click.png
│ │ │ │ │ ├── app-navigation.png
│ │ │ │ │ ├── finished-ex01.png
│ │ │ │ │ ├── finished-ex02.png
│ │ │ │ │ ├── hello.png
│ │ │ │ │ ├── splash-screen-advanced.png
│ │ │ │ │ ├── splash-screen-after-click.png
│ │ │ │ │ ├── splash-screen-centered.png
│ │ │ │ │ ├── splash-screen-events.png
│ │ │ │ │ ├── splash-screen-expression.png
│ │ │ │ │ ├── splash-screen-reuse-after.png
│ │ │ │ │ ├── splash-screen-reuse-before.png
│ │ │ │ │ └── splash-screen.png
│ │ │ │ └── tutorial-01.png
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ ├── Boxes.xmlui
│ │ │ ├── Breadcrumb.xmlui
│ │ │ ├── ChangeLog.xmlui
│ │ │ ├── ColorPalette.xmlui
│ │ │ ├── DocumentLinks.xmlui
│ │ │ ├── DocumentPage.xmlui
│ │ │ ├── DocumentPageNoTOC.xmlui
│ │ │ ├── Icons.xmlui
│ │ │ ├── IncButton.xmlui
│ │ │ ├── IncButton2.xmlui
│ │ │ ├── NameValue.xmlui
│ │ │ ├── PageNotFound.xmlui
│ │ │ ├── PaletteItem.xmlui
│ │ │ ├── Palettes.xmlui
│ │ │ ├── SectionHeader.xmlui
│ │ │ ├── TBD.xmlui
│ │ │ ├── Test.xmlui
│ │ │ ├── ThemesIntro.xmlui
│ │ │ ├── ThousandThemes.xmlui
│ │ │ ├── TubeStops.xmlui
│ │ │ ├── TubeStops.xmlui.xs
│ │ │ └── TwoColumnCode.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ ├── docs-theme.ts
│ │ ├── earthtone.ts
│ │ ├── xmlui-gray-on-default.ts
│ │ ├── xmlui-green-on-default.ts
│ │ └── xmlui-orange-on-default.ts
│ └── tsconfig.json
├── LICENSE
├── package-lock.json
├── package.json
├── packages
│ ├── xmlui-animations
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── Animation.tsx
│ │ │ ├── AnimationNative.tsx
│ │ │ ├── FadeAnimation.tsx
│ │ │ ├── FadeInAnimation.tsx
│ │ │ ├── FadeOutAnimation.tsx
│ │ │ ├── index.tsx
│ │ │ ├── ScaleAnimation.tsx
│ │ │ └── SlideInAnimation.tsx
│ │ └── tsconfig.json
│ ├── xmlui-devtools
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── devtools
│ │ │ │ ├── DevTools.tsx
│ │ │ │ ├── DevToolsNative.module.scss
│ │ │ │ ├── DevToolsNative.tsx
│ │ │ │ ├── ModalDialog.module.scss
│ │ │ │ ├── ModalDialog.tsx
│ │ │ │ ├── ModalVisibilityContext.tsx
│ │ │ │ ├── Tooltip.module.scss
│ │ │ │ ├── Tooltip.tsx
│ │ │ │ └── utils.ts
│ │ │ ├── editor
│ │ │ │ └── Editor.tsx
│ │ │ └── index.tsx
│ │ ├── tsconfig.json
│ │ └── vite.config-overrides.ts
│ ├── xmlui-hello-world
│ │ ├── .gitignore
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── HelloWorld.module.scss
│ │ │ ├── HelloWorld.tsx
│ │ │ ├── HelloWorldNative.tsx
│ │ │ └── index.tsx
│ │ └── tsconfig.json
│ ├── xmlui-os-frames
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── index.tsx
│ │ │ ├── IPhoneFrame.module.scss
│ │ │ ├── IPhoneFrame.tsx
│ │ │ ├── MacOSAppFrame.module.scss
│ │ │ ├── MacOSAppFrame.tsx
│ │ │ ├── WindowsAppFrame.module.scss
│ │ │ └── WindowsAppFrame.tsx
│ │ └── tsconfig.json
│ ├── xmlui-pdf
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ ├── components
│ │ │ │ └── Pdf.xmlui
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── index.tsx
│ │ │ ├── LazyPdfNative.tsx
│ │ │ ├── Pdf.module.scss
│ │ │ └── Pdf.tsx
│ │ └── tsconfig.json
│ ├── xmlui-playground
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── hooks
│ │ │ │ ├── usePlayground.ts
│ │ │ │ └── useToast.ts
│ │ │ ├── index.tsx
│ │ │ ├── playground
│ │ │ │ ├── Box.module.scss
│ │ │ │ ├── Box.tsx
│ │ │ │ ├── CodeSelector.tsx
│ │ │ │ ├── ConfirmationDialog.module.scss
│ │ │ │ ├── ConfirmationDialog.tsx
│ │ │ │ ├── Editor.tsx
│ │ │ │ ├── Header.module.scss
│ │ │ │ ├── Header.tsx
│ │ │ │ ├── Playground.tsx
│ │ │ │ ├── PlaygroundContent.module.scss
│ │ │ │ ├── PlaygroundContent.tsx
│ │ │ │ ├── PlaygroundNative.module.scss
│ │ │ │ ├── PlaygroundNative.tsx
│ │ │ │ ├── Preview.module.scss
│ │ │ │ ├── Preview.tsx
│ │ │ │ ├── Select.module.scss
│ │ │ │ ├── StandalonePlayground.tsx
│ │ │ │ ├── StandalonePlaygroundNative.module.scss
│ │ │ │ ├── StandalonePlaygroundNative.tsx
│ │ │ │ ├── ThemeSwitcher.module.scss
│ │ │ │ ├── ThemeSwitcher.tsx
│ │ │ │ ├── ToneSwitcher.tsx
│ │ │ │ ├── Tooltip.module.scss
│ │ │ │ ├── Tooltip.tsx
│ │ │ │ └── utils.ts
│ │ │ ├── providers
│ │ │ │ ├── Toast.module.scss
│ │ │ │ └── ToastProvider.tsx
│ │ │ ├── state
│ │ │ │ └── store.ts
│ │ │ ├── themes
│ │ │ │ └── theme.ts
│ │ │ └── utils
│ │ │ └── helpers.ts
│ │ └── tsconfig.json
│ ├── xmlui-search
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── index.tsx
│ │ │ ├── Search.module.scss
│ │ │ └── Search.tsx
│ │ └── tsconfig.json
│ ├── xmlui-spreadsheet
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── index.tsx
│ │ │ ├── Spreadsheet.tsx
│ │ │ └── SpreadsheetNative.tsx
│ │ └── tsconfig.json
│ └── xmlui-website-blocks
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── demo
│ │ ├── components
│ │ │ ├── HeroBackgroundBreakoutPage.xmlui
│ │ │ ├── HeroBackgroundsPage.xmlui
│ │ │ ├── HeroContentsPage.xmlui
│ │ │ ├── HeroTextAlignPage.xmlui
│ │ │ ├── HeroTextPage.xmlui
│ │ │ └── HeroTonesPage.xmlui
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── default.ts
│ ├── index.html
│ ├── index.ts
│ ├── meta
│ │ └── componentsMetadata.ts
│ ├── package.json
│ ├── public
│ │ └── resources
│ │ ├── building.jpg
│ │ └── xmlui-logo.svg
│ ├── src
│ │ ├── Carousel
│ │ │ ├── Carousel.module.scss
│ │ │ ├── Carousel.tsx
│ │ │ ├── CarouselContext.tsx
│ │ │ └── CarouselNative.tsx
│ │ ├── FancyButton
│ │ │ ├── FancyButton.module.scss
│ │ │ ├── FancyButton.tsx
│ │ │ └── FancyButton.xmlui
│ │ ├── Hello
│ │ │ ├── Hello.tsx
│ │ │ ├── Hello.xmlui
│ │ │ └── Hello.xmlui.xs
│ │ ├── HeroSection
│ │ │ ├── HeroSection.module.scss
│ │ │ ├── HeroSection.tsx
│ │ │ └── HeroSectionNative.tsx
│ │ ├── index.tsx
│ │ ├── ScrollToTop
│ │ │ ├── ScrollToTop.module.scss
│ │ │ ├── ScrollToTop.tsx
│ │ │ └── ScrollToTopNative.tsx
│ │ └── vite-env.d.ts
│ └── tsconfig.json
├── README.md
├── tools
│ ├── codefence
│ │ └── xmlui-code-fence-docs.md
│ ├── create-app
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── create-app.ts
│ │ ├── helpers
│ │ │ ├── copy.ts
│ │ │ ├── get-pkg-manager.ts
│ │ │ ├── git.ts
│ │ │ ├── install.ts
│ │ │ ├── is-folder-empty.ts
│ │ │ ├── is-writeable.ts
│ │ │ ├── make-dir.ts
│ │ │ └── validate-pkg.ts
│ │ ├── index.ts
│ │ ├── package.json
│ │ ├── templates
│ │ │ ├── default
│ │ │ │ └── ts
│ │ │ │ ├── gitignore
│ │ │ │ ├── index.html
│ │ │ │ ├── index.ts
│ │ │ │ ├── public
│ │ │ │ │ ├── mockServiceWorker.js
│ │ │ │ │ ├── resources
│ │ │ │ │ │ ├── favicon.ico
│ │ │ │ │ │ └── xmlui-logo.svg
│ │ │ │ │ └── serve.json
│ │ │ │ └── src
│ │ │ │ ├── components
│ │ │ │ │ ├── ApiAware.xmlui
│ │ │ │ │ ├── Home.xmlui
│ │ │ │ │ ├── IncButton.xmlui
│ │ │ │ │ └── PagePanel.xmlui
│ │ │ │ ├── config.ts
│ │ │ │ └── Main.xmlui
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ └── tsconfig.json
│ ├── create-xmlui-hello-world
│ │ ├── index.js
│ │ └── package.json
│ └── vscode
│ ├── .gitignore
│ ├── .vscode
│ │ ├── launch.json
│ │ └── tasks.json
│ ├── .vscodeignore
│ ├── build.sh
│ ├── CHANGELOG.md
│ ├── esbuild.js
│ ├── eslint.config.mjs
│ ├── formatter-docs.md
│ ├── generate-test-sample.sh
│ ├── LICENSE.md
│ ├── package-lock.json
│ ├── package.json
│ ├── README.md
│ ├── resources
│ │ ├── xmlui-logo.png
│ │ └── xmlui-markup-syntax-highlighting.png
│ ├── src
│ │ ├── extension.ts
│ │ └── server.ts
│ ├── syntaxes
│ │ └── xmlui.tmLanguage.json
│ ├── test-samples
│ │ └── sample.xmlui
│ ├── tsconfig.json
│ └── tsconfig.tsbuildinfo
├── turbo.json
└── xmlui
├── .gitignore
├── bin
│ ├── bootstrap.js
│ ├── build-lib.ts
│ ├── build.ts
│ ├── index.ts
│ ├── preview.ts
│ ├── start.ts
│ ├── vite-xmlui-plugin.ts
│ └── viteConfig.ts
├── CHANGELOG.md
├── conventions
│ ├── component-qa-checklist.md
│ ├── copilot-conventions.md
│ ├── create-xmlui-components.md
│ └── testing-conventions.md
├── dev-docs
│ ├── accessibility.md
│ ├── actions.md
│ ├── AppRoot.md
│ ├── component-apis.md
│ ├── component-rendering.md
│ ├── component-review-checklist.md
│ ├── data-sources.md
│ ├── e2e-summary.md
│ ├── expression-evaluation.md
│ ├── glossary.md
│ ├── helper-components.md
│ ├── index.md
│ ├── loaders.md
│ ├── next
│ │ ├── component-dev-guide.md
│ │ ├── configuration-management-enhancement-summary.md
│ │ ├── documentation-scripts-refactoring-complete-summary.md
│ │ ├── documentation-scripts-refactoring-plan.md
│ │ ├── duplicate-pattern-extraction-summary.md
│ │ ├── error-handling-standardization-summary.md
│ │ ├── generating-component-reference.md
│ │ ├── index.md
│ │ ├── logging-consistency-implementation-summary.md
│ │ ├── project-build.md
│ │ ├── project-structure.md
│ │ ├── theme-context.md
│ │ ├── tiptap-design-considerations.md
│ │ ├── working-with-code.md
│ │ ├── xmlui-runtime-architecture
│ │ └── xmlui-wcag-accessibility-report.md
│ ├── react-fundamentals.md
│ ├── release-method.md
│ ├── rendering-fundamentals.md
│ ├── reusable-components.md
│ ├── standalone-apps.md
│ ├── state-management.md
│ └── xmlui-extensibility.xlsx
├── package.json
├── playwright.config.ts
├── scripts
│ ├── coverage-only.js
│ ├── e2e-test-summary.js
│ ├── generate-docs
│ │ ├── build-downloads-map.mjs
│ │ ├── build-pages-map.mjs
│ │ ├── components-config.json
│ │ ├── configuration-management.mjs
│ │ ├── constants.mjs
│ │ ├── create-theme-files.mjs
│ │ ├── DocsGenerator.mjs
│ │ ├── error-handling.mjs
│ │ ├── extensions-config.json
│ │ ├── folders.mjs
│ │ ├── generate-summary-files.mjs
│ │ ├── get-docs.mjs
│ │ ├── input-handler.mjs
│ │ ├── logger.mjs
│ │ ├── logging-standards.mjs
│ │ ├── MetadataProcessor.mjs
│ │ ├── pattern-utilities.mjs
│ │ └── utils.mjs
│ ├── get-langserver-metadata.mjs
│ ├── inline-links.mjs
│ └── README-e2e-summary.md
├── src
│ ├── abstractions
│ │ ├── _conventions.md
│ │ ├── ActionDefs.ts
│ │ ├── AppContextDefs.ts
│ │ ├── ComponentDefs.ts
│ │ ├── ContainerDefs.ts
│ │ ├── ExtensionDefs.ts
│ │ ├── FunctionDefs.ts
│ │ ├── RendererDefs.ts
│ │ ├── scripting
│ │ │ ├── BlockScope.ts
│ │ │ ├── Compilation.ts
│ │ │ ├── LogicalThread.ts
│ │ │ ├── LoopScope.ts
│ │ │ ├── modules.ts
│ │ │ ├── ScriptParserError.ts
│ │ │ ├── Token.ts
│ │ │ ├── TryScope.ts
│ │ │ └── TryScopeExp.ts
│ │ └── ThemingDefs.ts
│ ├── components
│ │ ├── _conventions.md
│ │ ├── abstractions.ts
│ │ ├── Accordion
│ │ │ ├── Accordion.md
│ │ │ ├── Accordion.module.scss
│ │ │ ├── Accordion.spec.ts
│ │ │ ├── Accordion.tsx
│ │ │ ├── AccordionContext.tsx
│ │ │ ├── AccordionItem.tsx
│ │ │ ├── AccordionItemNative.tsx
│ │ │ └── AccordionNative.tsx
│ │ ├── Animation
│ │ │ └── AnimationNative.tsx
│ │ ├── APICall
│ │ │ ├── APICall.md
│ │ │ ├── APICall.spec.ts
│ │ │ ├── APICall.tsx
│ │ │ └── APICallNative.tsx
│ │ ├── App
│ │ │ ├── App.md
│ │ │ ├── App.module.scss
│ │ │ ├── App.spec.ts
│ │ │ ├── App.tsx
│ │ │ ├── AppLayoutContext.ts
│ │ │ ├── AppNative.tsx
│ │ │ ├── AppStateContext.ts
│ │ │ ├── doc-resources
│ │ │ │ ├── condensed-sticky.xmlui
│ │ │ │ ├── condensed.xmlui
│ │ │ │ ├── horizontal-sticky.xmlui
│ │ │ │ ├── horizontal.xmlui
│ │ │ │ ├── vertical-full-header.xmlui
│ │ │ │ ├── vertical-sticky.xmlui
│ │ │ │ └── vertical.xmlui
│ │ │ ├── IndexerContext.ts
│ │ │ ├── LinkInfoContext.ts
│ │ │ ├── SearchContext.tsx
│ │ │ ├── Sheet.module.scss
│ │ │ └── Sheet.tsx
│ │ ├── AppHeader
│ │ │ ├── AppHeader.md
│ │ │ ├── AppHeader.module.scss
│ │ │ ├── AppHeader.spec.ts
│ │ │ ├── AppHeader.tsx
│ │ │ └── AppHeaderNative.tsx
│ │ ├── AppState
│ │ │ ├── AppState.md
│ │ │ ├── AppState.spec.ts
│ │ │ ├── AppState.tsx
│ │ │ └── AppStateNative.tsx
│ │ ├── AutoComplete
│ │ │ ├── AutoComplete.md
│ │ │ ├── AutoComplete.module.scss
│ │ │ ├── AutoComplete.spec.ts
│ │ │ ├── AutoComplete.tsx
│ │ │ ├── AutoCompleteContext.tsx
│ │ │ └── AutoCompleteNative.tsx
│ │ ├── Avatar
│ │ │ ├── Avatar.md
│ │ │ ├── Avatar.module.scss
│ │ │ ├── Avatar.spec.ts
│ │ │ ├── Avatar.tsx
│ │ │ └── AvatarNative.tsx
│ │ ├── Backdrop
│ │ │ ├── Backdrop.md
│ │ │ ├── Backdrop.module.scss
│ │ │ ├── Backdrop.spec.ts
│ │ │ ├── Backdrop.tsx
│ │ │ └── BackdropNative.tsx
│ │ ├── Badge
│ │ │ ├── Badge.md
│ │ │ ├── Badge.module.scss
│ │ │ ├── Badge.spec.ts
│ │ │ ├── Badge.tsx
│ │ │ └── BadgeNative.tsx
│ │ ├── Bookmark
│ │ │ ├── Bookmark.md
│ │ │ ├── Bookmark.module.scss
│ │ │ ├── Bookmark.spec.ts
│ │ │ ├── Bookmark.tsx
│ │ │ └── BookmarkNative.tsx
│ │ ├── Breakout
│ │ │ ├── Breakout.module.scss
│ │ │ ├── Breakout.spec.ts
│ │ │ ├── Breakout.tsx
│ │ │ └── BreakoutNative.tsx
│ │ ├── Button
│ │ │ ├── Button-style.spec.ts
│ │ │ ├── Button.md
│ │ │ ├── Button.module.scss
│ │ │ ├── Button.spec.ts
│ │ │ ├── Button.tsx
│ │ │ └── ButtonNative.tsx
│ │ ├── Card
│ │ │ ├── Card.md
│ │ │ ├── Card.module.scss
│ │ │ ├── Card.spec.ts
│ │ │ ├── Card.tsx
│ │ │ └── CardNative.tsx
│ │ ├── Carousel
│ │ │ ├── Carousel.md
│ │ │ ├── Carousel.module.scss
│ │ │ ├── Carousel.spec.ts
│ │ │ ├── Carousel.tsx
│ │ │ ├── CarouselContext.tsx
│ │ │ ├── CarouselItem.tsx
│ │ │ ├── CarouselItemNative.tsx
│ │ │ └── CarouselNative.tsx
│ │ ├── ChangeListener
│ │ │ ├── ChangeListener.md
│ │ │ ├── ChangeListener.spec.ts
│ │ │ ├── ChangeListener.tsx
│ │ │ └── ChangeListenerNative.tsx
│ │ ├── chart-color-schemes.ts
│ │ ├── Charts
│ │ │ ├── AreaChart
│ │ │ │ ├── AreaChart.md
│ │ │ │ ├── AreaChart.spec.ts
│ │ │ │ ├── AreaChart.tsx
│ │ │ │ └── AreaChartNative.tsx
│ │ │ ├── BarChart
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── BarChart.module.scss
│ │ │ │ ├── BarChart.spec.ts
│ │ │ │ ├── BarChart.tsx
│ │ │ │ └── BarChartNative.tsx
│ │ │ ├── DonutChart
│ │ │ │ ├── DonutChart.spec.ts
│ │ │ │ └── DonutChart.tsx
│ │ │ ├── LabelList
│ │ │ │ ├── LabelList.spec.ts
│ │ │ │ ├── LabelList.tsx
│ │ │ │ ├── LabelListNative.module.scss
│ │ │ │ └── LabelListNative.tsx
│ │ │ ├── Legend
│ │ │ │ ├── Legend.spec.ts
│ │ │ │ ├── Legend.tsx
│ │ │ │ └── LegendNative.tsx
│ │ │ ├── LineChart
│ │ │ │ ├── LineChart.md
│ │ │ │ ├── LineChart.module.scss
│ │ │ │ ├── LineChart.spec.ts
│ │ │ │ ├── LineChart.tsx
│ │ │ │ └── LineChartNative.tsx
│ │ │ ├── PieChart
│ │ │ │ ├── PieChart.md
│ │ │ │ ├── PieChart.spec.ts
│ │ │ │ ├── PieChart.tsx
│ │ │ │ ├── PieChartNative.module.scss
│ │ │ │ └── PieChartNative.tsx
│ │ │ ├── RadarChart
│ │ │ │ ├── RadarChart.md
│ │ │ │ ├── RadarChart.spec.ts
│ │ │ │ ├── RadarChart.tsx
│ │ │ │ └── RadarChartNative.tsx
│ │ │ ├── Tooltip
│ │ │ │ ├── TooltipContent.module.scss
│ │ │ │ ├── TooltipContent.spec.ts
│ │ │ │ └── TooltipContent.tsx
│ │ │ └── utils
│ │ │ ├── abstractions.ts
│ │ │ └── ChartProvider.tsx
│ │ ├── Checkbox
│ │ │ ├── Checkbox.md
│ │ │ ├── Checkbox.spec.ts
│ │ │ └── Checkbox.tsx
│ │ ├── CodeBlock
│ │ │ ├── CodeBlock.module.scss
│ │ │ ├── CodeBlock.spec.ts
│ │ │ ├── CodeBlock.tsx
│ │ │ ├── CodeBlockNative.tsx
│ │ │ └── highlight-code.ts
│ │ ├── collectedComponentMetadata.ts
│ │ ├── ColorPicker
│ │ │ ├── ColorPicker.md
│ │ │ ├── ColorPicker.module.scss
│ │ │ ├── ColorPicker.spec.ts
│ │ │ ├── ColorPicker.tsx
│ │ │ └── ColorPickerNative.tsx
│ │ ├── Column
│ │ │ ├── Column.md
│ │ │ ├── Column.tsx
│ │ │ ├── ColumnNative.tsx
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ └── TableContext.tsx
│ │ ├── component-utils.ts
│ │ ├── ComponentProvider.tsx
│ │ ├── ComponentRegistryContext.tsx
│ │ ├── container-helpers.tsx
│ │ ├── ContentSeparator
│ │ │ ├── ContentSeparator.md
│ │ │ ├── ContentSeparator.module.scss
│ │ │ ├── ContentSeparator.spec.ts
│ │ │ ├── ContentSeparator.tsx
│ │ │ └── ContentSeparatorNative.tsx
│ │ ├── DataSource
│ │ │ ├── DataSource.md
│ │ │ └── DataSource.tsx
│ │ ├── DateInput
│ │ │ ├── DateInput.md
│ │ │ ├── DateInput.module.scss
│ │ │ ├── DateInput.spec.ts
│ │ │ ├── DateInput.tsx
│ │ │ └── DateInputNative.tsx
│ │ ├── DatePicker
│ │ │ ├── DatePicker.md
│ │ │ ├── DatePicker.module.scss
│ │ │ ├── DatePicker.spec.ts
│ │ │ ├── DatePicker.tsx
│ │ │ └── DatePickerNative.tsx
│ │ ├── DropdownMenu
│ │ │ ├── DropdownMenu.md
│ │ │ ├── DropdownMenu.module.scss
│ │ │ ├── DropdownMenu.spec.ts
│ │ │ ├── DropdownMenu.tsx
│ │ │ ├── DropdownMenuNative.tsx
│ │ │ ├── MenuItem.md
│ │ │ └── SubMenuItem.md
│ │ ├── EmojiSelector
│ │ │ ├── EmojiSelector.md
│ │ │ ├── EmojiSelector.spec.ts
│ │ │ ├── EmojiSelector.tsx
│ │ │ └── EmojiSelectorNative.tsx
│ │ ├── ExpandableItem
│ │ │ ├── ExpandableItem.module.scss
│ │ │ ├── ExpandableItem.spec.ts
│ │ │ ├── ExpandableItem.tsx
│ │ │ └── ExpandableItemNative.tsx
│ │ ├── FileInput
│ │ │ ├── FileInput.md
│ │ │ ├── FileInput.module.scss
│ │ │ ├── FileInput.spec.ts
│ │ │ ├── FileInput.tsx
│ │ │ └── FileInputNative.tsx
│ │ ├── FileUploadDropZone
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FileUploadDropZone.module.scss
│ │ │ ├── FileUploadDropZone.spec.ts
│ │ │ ├── FileUploadDropZone.tsx
│ │ │ └── FileUploadDropZoneNative.tsx
│ │ ├── FlowLayout
│ │ │ ├── FlowLayout.md
│ │ │ ├── FlowLayout.module.scss
│ │ │ ├── FlowLayout.spec.ts
│ │ │ ├── FlowLayout.spec.ts-snapshots
│ │ │ │ └── Edge-cases-boxShadow-is-not-clipped-1-non-smoke-darwin.png
│ │ │ ├── FlowLayout.tsx
│ │ │ └── FlowLayoutNative.tsx
│ │ ├── Footer
│ │ │ ├── Footer.md
│ │ │ ├── Footer.module.scss
│ │ │ ├── Footer.spec.ts
│ │ │ ├── Footer.tsx
│ │ │ └── FooterNative.tsx
│ │ ├── Form
│ │ │ ├── Form.md
│ │ │ ├── Form.module.scss
│ │ │ ├── Form.spec.ts
│ │ │ ├── Form.tsx
│ │ │ ├── formActions.ts
│ │ │ ├── FormContext.ts
│ │ │ └── FormNative.tsx
│ │ ├── FormItem
│ │ │ ├── FormItem.md
│ │ │ ├── FormItem.module.scss
│ │ │ ├── FormItem.spec.ts
│ │ │ ├── FormItem.tsx
│ │ │ ├── FormItemNative.tsx
│ │ │ ├── HelperText.module.scss
│ │ │ ├── HelperText.tsx
│ │ │ ├── ItemWithLabel.tsx
│ │ │ └── Validations.ts
│ │ ├── FormSection
│ │ │ ├── FormSection.md
│ │ │ ├── FormSection.ts
│ │ │ └── FormSection.xmlui
│ │ ├── Fragment
│ │ │ ├── Fragment.spec.ts
│ │ │ └── Fragment.tsx
│ │ ├── Heading
│ │ │ ├── abstractions.ts
│ │ │ ├── H1.md
│ │ │ ├── H1.spec.ts
│ │ │ ├── H2.md
│ │ │ ├── H2.spec.ts
│ │ │ ├── H3.md
│ │ │ ├── H3.spec.ts
│ │ │ ├── H4.md
│ │ │ ├── H4.spec.ts
│ │ │ ├── H5.md
│ │ │ ├── H5.spec.ts
│ │ │ ├── H6.md
│ │ │ ├── H6.spec.ts
│ │ │ ├── Heading.md
│ │ │ ├── Heading.module.scss
│ │ │ ├── Heading.spec.ts
│ │ │ ├── Heading.tsx
│ │ │ └── HeadingNative.tsx
│ │ ├── HoverCard
│ │ │ ├── HoverCard.tsx
│ │ │ └── HovercardNative.tsx
│ │ ├── HtmlTags
│ │ │ ├── HtmlTags.module.scss
│ │ │ ├── HtmlTags.spec.ts
│ │ │ └── HtmlTags.tsx
│ │ ├── Icon
│ │ │ ├── AdmonitionDanger.tsx
│ │ │ ├── AdmonitionInfo.tsx
│ │ │ ├── AdmonitionNote.tsx
│ │ │ ├── AdmonitionTip.tsx
│ │ │ ├── AdmonitionWarning.tsx
│ │ │ ├── ApiIcon.tsx
│ │ │ ├── ArrowDropDown.module.scss
│ │ │ ├── ArrowDropDown.tsx
│ │ │ ├── ArrowDropUp.module.scss
│ │ │ ├── ArrowDropUp.tsx
│ │ │ ├── ArrowLeft.module.scss
│ │ │ ├── ArrowLeft.tsx
│ │ │ ├── ArrowRight.module.scss
│ │ │ ├── ArrowRight.tsx
│ │ │ ├── Attach.tsx
│ │ │ ├── Binding.module.scss
│ │ │ ├── Binding.tsx
│ │ │ ├── BoardIcon.tsx
│ │ │ ├── BoxIcon.tsx
│ │ │ ├── CheckIcon.tsx
│ │ │ ├── ChevronDownIcon.tsx
│ │ │ ├── ChevronLeft.tsx
│ │ │ ├── ChevronRight.tsx
│ │ │ ├── ChevronUpIcon.tsx
│ │ │ ├── CodeFileIcon.tsx
│ │ │ ├── CodeSandbox.tsx
│ │ │ ├── CompactListIcon.tsx
│ │ │ ├── ContentCopyIcon.tsx
│ │ │ ├── DarkToLightIcon.tsx
│ │ │ ├── DatabaseIcon.module.scss
│ │ │ ├── DatabaseIcon.tsx
│ │ │ ├── DocFileIcon.tsx
│ │ │ ├── DocIcon.tsx
│ │ │ ├── DotMenuHorizontalIcon.tsx
│ │ │ ├── DotMenuIcon.tsx
│ │ │ ├── EmailIcon.tsx
│ │ │ ├── EmptyFolderIcon.tsx
│ │ │ ├── ErrorIcon.tsx
│ │ │ ├── ExpressionIcon.tsx
│ │ │ ├── FillPlusCricleIcon.tsx
│ │ │ ├── FilterIcon.tsx
│ │ │ ├── FolderIcon.tsx
│ │ │ ├── GlobeIcon.tsx
│ │ │ ├── HomeIcon.tsx
│ │ │ ├── HyperLinkIcon.tsx
│ │ │ ├── Icon.md
│ │ │ ├── Icon.module.scss
│ │ │ ├── Icon.spec.ts
│ │ │ ├── Icon.tsx
│ │ │ ├── IconNative.tsx
│ │ │ ├── ImageFileIcon.tsx
│ │ │ ├── Inspect.tsx
│ │ │ ├── LightToDark.tsx
│ │ │ ├── LinkIcon.tsx
│ │ │ ├── ListIcon.tsx
│ │ │ ├── LooseListIcon.tsx
│ │ │ ├── MoonIcon.tsx
│ │ │ ├── MoreOptionsIcon.tsx
│ │ │ ├── NoSortIcon.tsx
│ │ │ ├── PDFIcon.tsx
│ │ │ ├── PenIcon.tsx
│ │ │ ├── PhoneIcon.tsx
│ │ │ ├── PhotoIcon.tsx
│ │ │ ├── PlusIcon.tsx
│ │ │ ├── SearchIcon.tsx
│ │ │ ├── ShareIcon.tsx
│ │ │ ├── SortAscendingIcon.tsx
│ │ │ ├── SortDescendingIcon.tsx
│ │ │ ├── StarsIcon.tsx
│ │ │ ├── SunIcon.tsx
│ │ │ ├── svg
│ │ │ │ ├── admonition_danger.svg
│ │ │ │ ├── admonition_info.svg
│ │ │ │ ├── admonition_note.svg
│ │ │ │ ├── admonition_tip.svg
│ │ │ │ ├── admonition_warning.svg
│ │ │ │ ├── api.svg
│ │ │ │ ├── arrow-dropdown.svg
│ │ │ │ ├── arrow-left.svg
│ │ │ │ ├── arrow-right.svg
│ │ │ │ ├── arrow-up.svg
│ │ │ │ ├── attach.svg
│ │ │ │ ├── binding.svg
│ │ │ │ ├── box.svg
│ │ │ │ ├── bulb.svg
│ │ │ │ ├── code-file.svg
│ │ │ │ ├── code-sandbox.svg
│ │ │ │ ├── dark_to_light.svg
│ │ │ │ ├── database.svg
│ │ │ │ ├── doc.svg
│ │ │ │ ├── empty-folder.svg
│ │ │ │ ├── expression.svg
│ │ │ │ ├── eye-closed.svg
│ │ │ │ ├── eye-dark.svg
│ │ │ │ ├── eye.svg
│ │ │ │ ├── file-text.svg
│ │ │ │ ├── filter.svg
│ │ │ │ ├── folder.svg
│ │ │ │ ├── img.svg
│ │ │ │ ├── inspect.svg
│ │ │ │ ├── light_to_dark.svg
│ │ │ │ ├── moon.svg
│ │ │ │ ├── pdf.svg
│ │ │ │ ├── photo.svg
│ │ │ │ ├── share.svg
│ │ │ │ ├── stars.svg
│ │ │ │ ├── sun.svg
│ │ │ │ ├── trending-down.svg
│ │ │ │ ├── trending-level.svg
│ │ │ │ ├── trending-up.svg
│ │ │ │ ├── txt.svg
│ │ │ │ ├── unknown-file.svg
│ │ │ │ ├── unlink.svg
│ │ │ │ └── xls.svg
│ │ │ ├── TableDeleteColumnIcon.tsx
│ │ │ ├── TableDeleteRowIcon.tsx
│ │ │ ├── TableInsertColumnIcon.tsx
│ │ │ ├── TableInsertRowIcon.tsx
│ │ │ ├── TrashIcon.tsx
│ │ │ ├── TrendingDownIcon.tsx
│ │ │ ├── TrendingLevelIcon.tsx
│ │ │ ├── TrendingUpIcon.tsx
│ │ │ ├── TxtIcon.tsx
│ │ │ ├── UnknownFileIcon.tsx
│ │ │ ├── UnlinkIcon.tsx
│ │ │ ├── UserIcon.tsx
│ │ │ ├── WarningIcon.tsx
│ │ │ └── XlsIcon.tsx
│ │ ├── IconProvider.tsx
│ │ ├── IconRegistryContext.tsx
│ │ ├── IFrame
│ │ │ ├── IFrame.md
│ │ │ ├── IFrame.module.scss
│ │ │ ├── IFrame.spec.ts
│ │ │ ├── IFrame.tsx
│ │ │ └── IFrameNative.tsx
│ │ ├── Image
│ │ │ ├── Image.md
│ │ │ ├── Image.module.scss
│ │ │ ├── Image.spec.ts
│ │ │ ├── Image.tsx
│ │ │ └── ImageNative.tsx
│ │ ├── Input
│ │ │ ├── index.ts
│ │ │ ├── InputAdornment.module.scss
│ │ │ ├── InputAdornment.tsx
│ │ │ ├── InputDivider.module.scss
│ │ │ ├── InputDivider.tsx
│ │ │ ├── InputLabel.module.scss
│ │ │ ├── InputLabel.tsx
│ │ │ ├── PartialInput.module.scss
│ │ │ └── PartialInput.tsx
│ │ ├── InspectButton
│ │ │ ├── InspectButton.module.scss
│ │ │ └── InspectButton.tsx
│ │ ├── Items
│ │ │ ├── Items.md
│ │ │ ├── Items.spec.ts
│ │ │ ├── Items.tsx
│ │ │ └── ItemsNative.tsx
│ │ ├── Link
│ │ │ ├── Link.md
│ │ │ ├── Link.module.scss
│ │ │ ├── Link.spec.ts
│ │ │ ├── Link.tsx
│ │ │ └── LinkNative.tsx
│ │ ├── List
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── List.md
│ │ │ ├── List.module.scss
│ │ │ ├── List.spec.ts
│ │ │ ├── List.tsx
│ │ │ └── ListNative.tsx
│ │ ├── Logo
│ │ │ ├── doc-resources
│ │ │ │ └── xmlui-logo.svg
│ │ │ ├── Logo.md
│ │ │ ├── Logo.tsx
│ │ │ └── LogoNative.tsx
│ │ ├── Markdown
│ │ │ ├── CodeText.module.scss
│ │ │ ├── CodeText.tsx
│ │ │ ├── Markdown.md
│ │ │ ├── Markdown.module.scss
│ │ │ ├── Markdown.spec.ts
│ │ │ ├── Markdown.tsx
│ │ │ ├── MarkdownNative.tsx
│ │ │ ├── parse-binding-expr.ts
│ │ │ └── utils.ts
│ │ ├── metadata-helpers.ts
│ │ ├── ModalDialog
│ │ │ ├── ConfirmationModalContextProvider.tsx
│ │ │ ├── Dialog.module.scss
│ │ │ ├── Dialog.tsx
│ │ │ ├── ModalDialog.md
│ │ │ ├── ModalDialog.module.scss
│ │ │ ├── ModalDialog.spec.ts
│ │ │ ├── ModalDialog.tsx
│ │ │ ├── ModalDialogNative.tsx
│ │ │ └── ModalVisibilityContext.tsx
│ │ ├── NavGroup
│ │ │ ├── NavGroup.md
│ │ │ ├── NavGroup.module.scss
│ │ │ ├── NavGroup.spec.ts
│ │ │ ├── NavGroup.tsx
│ │ │ ├── NavGroupContext.ts
│ │ │ └── NavGroupNative.tsx
│ │ ├── NavLink
│ │ │ ├── NavLink.md
│ │ │ ├── NavLink.module.scss
│ │ │ ├── NavLink.spec.ts
│ │ │ ├── NavLink.tsx
│ │ │ └── NavLinkNative.tsx
│ │ ├── NavPanel
│ │ │ ├── NavPanel.md
│ │ │ ├── NavPanel.module.scss
│ │ │ ├── NavPanel.spec.ts
│ │ │ ├── NavPanel.tsx
│ │ │ └── NavPanelNative.tsx
│ │ ├── NestedApp
│ │ │ ├── AppWithCodeView.module.scss
│ │ │ ├── AppWithCodeView.tsx
│ │ │ ├── AppWithCodeViewNative.tsx
│ │ │ ├── defaultProps.tsx
│ │ │ ├── logo.svg
│ │ │ ├── NestedApp.module.scss
│ │ │ ├── NestedApp.tsx
│ │ │ ├── NestedAppNative.tsx
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.tsx
│ │ │ └── utils.ts
│ │ ├── NoResult
│ │ │ ├── NoResult.md
│ │ │ ├── NoResult.module.scss
│ │ │ ├── NoResult.spec.ts
│ │ │ ├── NoResult.tsx
│ │ │ └── NoResultNative.tsx
│ │ ├── NumberBox
│ │ │ ├── numberbox-abstractions.ts
│ │ │ ├── NumberBox.md
│ │ │ ├── NumberBox.module.scss
│ │ │ ├── NumberBox.spec.ts
│ │ │ ├── NumberBox.tsx
│ │ │ └── NumberBoxNative.tsx
│ │ ├── Option
│ │ │ ├── Option.md
│ │ │ ├── Option.spec.ts
│ │ │ ├── Option.tsx
│ │ │ ├── OptionNative.tsx
│ │ │ └── OptionTypeProvider.tsx
│ │ ├── PageMetaTitle
│ │ │ ├── PageMetaTilteNative.tsx
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── PageMetaTitle.spec.ts
│ │ │ └── PageMetaTitle.tsx
│ │ ├── Pages
│ │ │ ├── Page.md
│ │ │ ├── Pages.md
│ │ │ ├── Pages.module.scss
│ │ │ ├── Pages.tsx
│ │ │ └── PagesNative.tsx
│ │ ├── Pagination
│ │ │ ├── Pagination.md
│ │ │ ├── Pagination.module.scss
│ │ │ ├── Pagination.spec.ts
│ │ │ ├── Pagination.tsx
│ │ │ └── PaginationNative.tsx
│ │ ├── PositionedContainer
│ │ │ ├── PositionedContainer.module.scss
│ │ │ ├── PositionedContainer.tsx
│ │ │ └── PositionedContainerNative.tsx
│ │ ├── ProfileMenu
│ │ │ ├── ProfileMenu.module.scss
│ │ │ └── ProfileMenu.tsx
│ │ ├── ProgressBar
│ │ │ ├── ProgressBar.md
│ │ │ ├── ProgressBar.module.scss
│ │ │ ├── ProgressBar.spec.ts
│ │ │ ├── ProgressBar.tsx
│ │ │ └── ProgressBarNative.tsx
│ │ ├── Queue
│ │ │ ├── Queue.md
│ │ │ ├── Queue.spec.ts
│ │ │ ├── Queue.tsx
│ │ │ ├── queueActions.ts
│ │ │ └── QueueNative.tsx
│ │ ├── RadioGroup
│ │ │ ├── RadioGroup.md
│ │ │ ├── RadioGroup.module.scss
│ │ │ ├── RadioGroup.spec.ts
│ │ │ ├── RadioGroup.tsx
│ │ │ ├── RadioGroupNative.tsx
│ │ │ ├── RadioItem.tsx
│ │ │ └── RadioItemNative.tsx
│ │ ├── RealTimeAdapter
│ │ │ ├── RealTimeAdapter.tsx
│ │ │ └── RealTimeAdapterNative.tsx
│ │ ├── Redirect
│ │ │ ├── Redirect.md
│ │ │ ├── Redirect.spec.ts
│ │ │ └── Redirect.tsx
│ │ ├── ResponsiveBar
│ │ │ ├── README.md
│ │ │ ├── ResponsiveBar.md
│ │ │ ├── ResponsiveBar.module.scss
│ │ │ ├── ResponsiveBar.spec.ts
│ │ │ ├── ResponsiveBar.tsx
│ │ │ └── ResponsiveBarNative.tsx
│ │ ├── Select
│ │ │ ├── HiddenOption.tsx
│ │ │ ├── OptionContext.ts
│ │ │ ├── Select.md
│ │ │ ├── Select.module.scss
│ │ │ ├── Select.spec.ts
│ │ │ ├── Select.tsx
│ │ │ ├── SelectContext.tsx
│ │ │ └── SelectNative.tsx
│ │ ├── SelectionStore
│ │ │ ├── SelectionStore.md
│ │ │ ├── SelectionStore.tsx
│ │ │ └── SelectionStoreNative.tsx
│ │ ├── Slider
│ │ │ ├── Slider.md
│ │ │ ├── Slider.module.scss
│ │ │ ├── Slider.spec.ts
│ │ │ ├── Slider.tsx
│ │ │ └── SliderNative.tsx
│ │ ├── Slot
│ │ │ ├── Slot.md
│ │ │ ├── Slot.spec.ts
│ │ │ └── Slot.ts
│ │ ├── SlotItem.tsx
│ │ ├── SpaceFiller
│ │ │ ├── SpaceFiller.md
│ │ │ ├── SpaceFiller.module.scss
│ │ │ ├── SpaceFiller.spec.ts
│ │ │ ├── SpaceFiller.tsx
│ │ │ └── SpaceFillerNative.tsx
│ │ ├── Spinner
│ │ │ ├── Spinner.md
│ │ │ ├── Spinner.module.scss
│ │ │ ├── Spinner.spec.ts
│ │ │ ├── Spinner.tsx
│ │ │ └── SpinnerNative.tsx
│ │ ├── Splitter
│ │ │ ├── HSplitter.md
│ │ │ ├── HSplitter.spec.ts
│ │ │ ├── Splitter.md
│ │ │ ├── Splitter.module.scss
│ │ │ ├── Splitter.spec.ts
│ │ │ ├── Splitter.tsx
│ │ │ ├── SplitterNative.tsx
│ │ │ ├── utils.ts
│ │ │ ├── VSplitter.md
│ │ │ └── VSplitter.spec.ts
│ │ ├── Stack
│ │ │ ├── CHStack.md
│ │ │ ├── CHStack.spec.ts
│ │ │ ├── CVStack.md
│ │ │ ├── CVStack.spec.ts
│ │ │ ├── HStack.md
│ │ │ ├── HStack.spec.ts
│ │ │ ├── Stack.md
│ │ │ ├── Stack.module.scss
│ │ │ ├── Stack.spec.ts
│ │ │ ├── Stack.tsx
│ │ │ ├── StackNative.tsx
│ │ │ ├── VStack.md
│ │ │ └── VStack.spec.ts
│ │ ├── StickyBox
│ │ │ ├── StickyBox.md
│ │ │ ├── StickyBox.module.scss
│ │ │ ├── StickyBox.tsx
│ │ │ └── StickyBoxNative.tsx
│ │ ├── Switch
│ │ │ ├── Switch.md
│ │ │ ├── Switch.spec.ts
│ │ │ └── Switch.tsx
│ │ ├── Table
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── react-table-config.d.ts
│ │ │ ├── Table.md
│ │ │ ├── Table.module.scss
│ │ │ ├── Table.spec.ts
│ │ │ ├── Table.tsx
│ │ │ ├── TableNative.tsx
│ │ │ └── useRowSelection.tsx
│ │ ├── TableOfContents
│ │ │ ├── TableOfContents.module.scss
│ │ │ ├── TableOfContents.spec.ts
│ │ │ ├── TableOfContents.tsx
│ │ │ └── TableOfContentsNative.tsx
│ │ ├── Tabs
│ │ │ ├── TabContext.tsx
│ │ │ ├── TabItem.md
│ │ │ ├── TabItem.tsx
│ │ │ ├── TabItemNative.tsx
│ │ │ ├── Tabs.md
│ │ │ ├── Tabs.module.scss
│ │ │ ├── Tabs.spec.ts
│ │ │ ├── Tabs.tsx
│ │ │ └── TabsNative.tsx
│ │ ├── Text
│ │ │ ├── Text.md
│ │ │ ├── Text.module.scss
│ │ │ ├── Text.spec.ts
│ │ │ ├── Text.tsx
│ │ │ └── TextNative.tsx
│ │ ├── TextArea
│ │ │ ├── TextArea.md
│ │ │ ├── TextArea.module.scss
│ │ │ ├── TextArea.spec.ts
│ │ │ ├── TextArea.tsx
│ │ │ ├── TextAreaNative.tsx
│ │ │ ├── TextAreaResizable.tsx
│ │ │ └── useComposedRef.ts
│ │ ├── TextBox
│ │ │ ├── TextBox.md
│ │ │ ├── TextBox.module.scss
│ │ │ ├── TextBox.spec.ts
│ │ │ ├── TextBox.tsx
│ │ │ └── TextBoxNative.tsx
│ │ ├── Theme
│ │ │ ├── NotificationToast.tsx
│ │ │ ├── Theme.md
│ │ │ ├── Theme.module.scss
│ │ │ ├── Theme.spec.ts
│ │ │ ├── Theme.tsx
│ │ │ └── ThemeNative.tsx
│ │ ├── TimeInput
│ │ │ ├── TimeInput.md
│ │ │ ├── TimeInput.module.scss
│ │ │ ├── TimeInput.spec.ts
│ │ │ ├── TimeInput.tsx
│ │ │ ├── TimeInputNative.tsx
│ │ │ └── utils.ts
│ │ ├── Timer
│ │ │ ├── Timer.md
│ │ │ ├── Timer.spec.ts
│ │ │ ├── Timer.tsx
│ │ │ └── TimerNative.tsx
│ │ ├── Toggle
│ │ │ ├── Toggle.module.scss
│ │ │ └── Toggle.tsx
│ │ ├── ToneChangerButton
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneChangerButton.spec.ts
│ │ │ └── ToneChangerButton.tsx
│ │ ├── ToneSwitch
│ │ │ ├── ToneSwitch.md
│ │ │ ├── ToneSwitch.module.scss
│ │ │ ├── ToneSwitch.spec.ts
│ │ │ ├── ToneSwitch.tsx
│ │ │ └── ToneSwitchNative.tsx
│ │ ├── Tooltip
│ │ │ ├── Tooltip.md
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.spec.ts
│ │ │ ├── Tooltip.tsx
│ │ │ └── TooltipNative.tsx
│ │ ├── Tree
│ │ │ ├── testData.ts
│ │ │ ├── Tree-dynamic.spec.ts
│ │ │ ├── Tree-icons.spec.ts
│ │ │ ├── Tree.md
│ │ │ ├── Tree.spec.ts
│ │ │ ├── TreeComponent.module.scss
│ │ │ ├── TreeComponent.tsx
│ │ │ └── TreeNative.tsx
│ │ ├── TreeDisplay
│ │ │ ├── TreeDisplay.md
│ │ │ ├── TreeDisplay.module.scss
│ │ │ ├── TreeDisplay.tsx
│ │ │ └── TreeDisplayNative.tsx
│ │ ├── ValidationSummary
│ │ │ ├── ValidationSummary.module.scss
│ │ │ └── ValidationSummary.tsx
│ │ └── VisuallyHidden.tsx
│ ├── components-core
│ │ ├── abstractions
│ │ │ ├── ComponentRenderer.ts
│ │ │ ├── LoaderRenderer.ts
│ │ │ ├── standalone.ts
│ │ │ └── treeAbstractions.ts
│ │ ├── action
│ │ │ ├── actions.ts
│ │ │ ├── APICall.tsx
│ │ │ ├── FileDownloadAction.tsx
│ │ │ ├── FileUploadAction.tsx
│ │ │ ├── NavigateAction.tsx
│ │ │ └── TimedAction.tsx
│ │ ├── ApiBoundComponent.tsx
│ │ ├── appContext
│ │ │ ├── date-functions.ts
│ │ │ ├── math-function.ts
│ │ │ └── misc-utils.ts
│ │ ├── AppContext.tsx
│ │ ├── behaviors
│ │ │ ├── Behavior.tsx
│ │ │ ├── BehaviorContext.tsx
│ │ │ └── CoreBehaviors.tsx
│ │ ├── component-hooks.ts
│ │ ├── ComponentDecorator.tsx
│ │ ├── ComponentViewer.tsx
│ │ ├── CompoundComponent.tsx
│ │ ├── constants.ts
│ │ ├── DebugViewProvider.tsx
│ │ ├── descriptorHelper.ts
│ │ ├── devtools
│ │ │ ├── InspectorDialog.module.scss
│ │ │ ├── InspectorDialog.tsx
│ │ │ └── InspectorDialogVisibilityContext.tsx
│ │ ├── EngineError.ts
│ │ ├── event-handlers.ts
│ │ ├── InspectorButton.module.scss
│ │ ├── InspectorContext.tsx
│ │ ├── interception
│ │ │ ├── abstractions.ts
│ │ │ ├── ApiInterceptor.ts
│ │ │ ├── ApiInterceptorProvider.tsx
│ │ │ ├── apiInterceptorWorker.ts
│ │ │ ├── Backend.ts
│ │ │ ├── Errors.ts
│ │ │ ├── IndexedDb.ts
│ │ │ ├── initMock.ts
│ │ │ ├── InMemoryDb.ts
│ │ │ ├── ReadonlyCollection.ts
│ │ │ └── useApiInterceptorContext.tsx
│ │ ├── loader
│ │ │ ├── ApiLoader.tsx
│ │ │ ├── DataLoader.tsx
│ │ │ ├── ExternalDataLoader.tsx
│ │ │ ├── Loader.tsx
│ │ │ ├── MockLoaderRenderer.tsx
│ │ │ └── PageableLoader.tsx
│ │ ├── LoaderComponent.tsx
│ │ ├── markup-check.ts
│ │ ├── parts.ts
│ │ ├── renderers.ts
│ │ ├── rendering
│ │ │ ├── AppContent.tsx
│ │ │ ├── AppRoot.tsx
│ │ │ ├── AppWrapper.tsx
│ │ │ ├── buildProxy.ts
│ │ │ ├── collectFnVarDeps.ts
│ │ │ ├── ComponentAdapter.tsx
│ │ │ ├── ComponentWrapper.tsx
│ │ │ ├── Container.tsx
│ │ │ ├── containers.ts
│ │ │ ├── ContainerWrapper.tsx
│ │ │ ├── ErrorBoundary.module.scss
│ │ │ ├── ErrorBoundary.tsx
│ │ │ ├── InvalidComponent.module.scss
│ │ │ ├── InvalidComponent.tsx
│ │ │ ├── nodeUtils.ts
│ │ │ ├── reducer.ts
│ │ │ ├── renderChild.tsx
│ │ │ ├── StandaloneComponent.tsx
│ │ │ ├── StateContainer.tsx
│ │ │ ├── UnknownComponent.module.scss
│ │ │ ├── UnknownComponent.tsx
│ │ │ └── valueExtractor.ts
│ │ ├── reportEngineError.ts
│ │ ├── RestApiProxy.ts
│ │ ├── script-runner
│ │ │ ├── asyncProxy.ts
│ │ │ ├── AttributeValueParser.ts
│ │ │ ├── bannedFunctions.ts
│ │ │ ├── BindingTreeEvaluationContext.ts
│ │ │ ├── eval-tree-async.ts
│ │ │ ├── eval-tree-common.ts
│ │ │ ├── eval-tree-sync.ts
│ │ │ ├── ParameterParser.ts
│ │ │ ├── process-statement-async.ts
│ │ │ ├── process-statement-common.ts
│ │ │ ├── process-statement-sync.ts
│ │ │ ├── ScriptingSourceTree.ts
│ │ │ ├── simplify-expression.ts
│ │ │ ├── statement-queue.ts
│ │ │ └── visitors.ts
│ │ ├── StandaloneApp.tsx
│ │ ├── StandaloneExtensionManager.ts
│ │ ├── TableOfContentsContext.tsx
│ │ ├── theming
│ │ │ ├── _themes.scss
│ │ │ ├── component-layout-resolver.ts
│ │ │ ├── extendThemeUtils.ts
│ │ │ ├── hvar.ts
│ │ │ ├── layout-resolver.ts
│ │ │ ├── parse-layout-props.ts
│ │ │ ├── StyleContext.tsx
│ │ │ ├── StyleRegistry.ts
│ │ │ ├── ThemeContext.tsx
│ │ │ ├── ThemeProvider.tsx
│ │ │ ├── themes
│ │ │ │ ├── base-utils.ts
│ │ │ │ ├── palette.ts
│ │ │ │ ├── root.ts
│ │ │ │ ├── solid.ts
│ │ │ │ ├── theme-colors.ts
│ │ │ │ └── xmlui.ts
│ │ │ ├── themeVars.module.scss
│ │ │ ├── themeVars.ts
│ │ │ ├── transformThemeVars.ts
│ │ │ └── utils.ts
│ │ ├── utils
│ │ │ ├── actionUtils.ts
│ │ │ ├── audio-utils.ts
│ │ │ ├── compound-utils.ts
│ │ │ ├── css-utils.ts
│ │ │ ├── DataLoaderQueryKeyGenerator.ts
│ │ │ ├── date-utils.ts
│ │ │ ├── extractParam.ts
│ │ │ ├── hooks.tsx
│ │ │ ├── LruCache.ts
│ │ │ ├── mergeProps.ts
│ │ │ ├── misc.ts
│ │ │ ├── request-params.ts
│ │ │ ├── statementUtils.ts
│ │ │ └── treeUtils.ts
│ │ └── xmlui-parser.ts
│ ├── index-standalone.ts
│ ├── index.scss
│ ├── index.ts
│ ├── language-server
│ │ ├── server-common.ts
│ │ ├── server-web-worker.ts
│ │ ├── server.ts
│ │ ├── services
│ │ │ ├── common
│ │ │ │ ├── docs-generation.ts
│ │ │ │ ├── lsp-utils.ts
│ │ │ │ ├── metadata-utils.ts
│ │ │ │ └── syntax-node-utilities.ts
│ │ │ ├── completion.ts
│ │ │ ├── diagnostic.ts
│ │ │ ├── format.ts
│ │ │ └── hover.ts
│ │ └── xmlui-metadata-generated.mjs
│ ├── logging
│ │ ├── LoggerContext.tsx
│ │ ├── LoggerInitializer.tsx
│ │ ├── LoggerService.ts
│ │ └── xmlui.ts
│ ├── logo.svg
│ ├── parsers
│ │ ├── common
│ │ │ ├── GenericToken.ts
│ │ │ ├── InputStream.ts
│ │ │ └── utils.ts
│ │ ├── scripting
│ │ │ ├── code-behind-collect.ts
│ │ │ ├── Lexer.ts
│ │ │ ├── modules.ts
│ │ │ ├── Parser.ts
│ │ │ ├── ParserError.ts
│ │ │ ├── ScriptingNodeTypes.ts
│ │ │ ├── TokenTrait.ts
│ │ │ ├── TokenType.ts
│ │ │ └── tree-visitor.ts
│ │ ├── style-parser
│ │ │ ├── errors.ts
│ │ │ ├── source-tree.ts
│ │ │ ├── StyleInputStream.ts
│ │ │ ├── StyleLexer.ts
│ │ │ ├── StyleParser.ts
│ │ │ └── tokens.ts
│ │ └── xmlui-parser
│ │ ├── CharacterCodes.ts
│ │ ├── diagnostics.ts
│ │ ├── fileExtensions.ts
│ │ ├── index.ts
│ │ ├── lint.ts
│ │ ├── parser.ts
│ │ ├── ParserError.ts
│ │ ├── scanner.ts
│ │ ├── syntax-kind.ts
│ │ ├── syntax-node.ts
│ │ ├── transform.ts
│ │ ├── utils.ts
│ │ ├── xmlui-serializer.ts
│ │ └── xmlui-tree.ts
│ ├── react-app-env.d.ts
│ ├── syntax
│ │ ├── monaco
│ │ │ ├── grammar.monacoLanguage.ts
│ │ │ ├── index.ts
│ │ │ ├── xmlui-dark.ts
│ │ │ ├── xmlui-light.ts
│ │ │ └── xmluiscript.monacoLanguage.ts
│ │ └── textMate
│ │ ├── index.ts
│ │ ├── xmlui-dark.json
│ │ ├── xmlui-light.json
│ │ ├── xmlui.json
│ │ └── xmlui.tmLanguage.json
│ ├── testing
│ │ ├── assertions.ts
│ │ ├── component-test-helpers.ts
│ │ ├── ComponentDrivers.ts
│ │ ├── drivers
│ │ │ ├── DateInputDriver.ts
│ │ │ ├── ModalDialogDriver.ts
│ │ │ ├── NumberBoxDriver.ts
│ │ │ ├── TextBoxDriver.ts
│ │ │ ├── TimeInputDriver.ts
│ │ │ ├── TimerDriver.ts
│ │ │ └── TreeDriver.ts
│ │ ├── fixtures.ts
│ │ ├── infrastructure
│ │ │ ├── index.html
│ │ │ ├── main.tsx
│ │ │ ├── public
│ │ │ │ ├── mockServiceWorker.js
│ │ │ │ ├── resources
│ │ │ │ │ ├── bell.svg
│ │ │ │ │ ├── box.svg
│ │ │ │ │ ├── doc.svg
│ │ │ │ │ ├── eye.svg
│ │ │ │ │ ├── flower-640x480.jpg
│ │ │ │ │ ├── sun.svg
│ │ │ │ │ ├── test-image-100x100.jpg
│ │ │ │ │ └── txt.svg
│ │ │ │ └── serve.json
│ │ │ └── TestBed.tsx
│ │ └── themed-app-test-helpers.ts
│ └── vite-env.d.ts
├── tests
│ ├── components
│ │ ├── CodeBlock
│ │ │ └── hightlight-code.test.ts
│ │ ├── playground-pattern.test.ts
│ │ └── Tree
│ │ └── Tree-states.test.ts
│ ├── components-core
│ │ ├── abstractions
│ │ │ └── treeAbstractions.test.ts
│ │ ├── container
│ │ │ └── buildProxy.test.ts
│ │ ├── interception
│ │ │ ├── orderBy.test.ts
│ │ │ ├── ReadOnlyCollection.test.ts
│ │ │ └── request-param-converter.test.ts
│ │ ├── scripts-runner
│ │ │ ├── AttributeValueParser.test.ts
│ │ │ ├── eval-tree-arrow-async.test.ts
│ │ │ ├── eval-tree-arrow.test.ts
│ │ │ ├── eval-tree-func-decl-async.test.ts
│ │ │ ├── eval-tree-func-decl.test.ts
│ │ │ ├── eval-tree-pre-post.test.ts
│ │ │ ├── eval-tree-regression.test.ts
│ │ │ ├── eval-tree.test.ts
│ │ │ ├── function-proxy.test.ts
│ │ │ ├── parser-regression.test.ts
│ │ │ ├── process-event.test.ts
│ │ │ ├── process-function.test.ts
│ │ │ ├── process-implicit-context.test.ts
│ │ │ ├── process-statement-asgn.test.ts
│ │ │ ├── process-statement-destruct.test.ts
│ │ │ ├── process-statement-regs.test.ts
│ │ │ ├── process-statement-sync.test.ts
│ │ │ ├── process-statement.test.ts
│ │ │ ├── process-switch-sync.test.ts
│ │ │ ├── process-switch.test.ts
│ │ │ ├── process-try-sync.test.ts
│ │ │ ├── process-try.test.ts
│ │ │ └── test-helpers.ts
│ │ ├── test-metadata-handler.ts
│ │ ├── theming
│ │ │ ├── border-segments.test.ts
│ │ │ ├── component-layout.resolver.test.ts
│ │ │ ├── layout-property-parser.test.ts
│ │ │ ├── layout-resolver.test.ts
│ │ │ ├── layout-resolver2.test.ts
│ │ │ ├── layout-vp-override.test.ts
│ │ │ └── padding-segments.test.ts
│ │ └── utils
│ │ ├── date-utils.test.ts
│ │ ├── format-human-elapsed-time.test.ts
│ │ └── LruCache.test.ts
│ ├── language-server
│ │ ├── completion.test.ts
│ │ ├── format.test.ts
│ │ ├── hover.test.ts
│ │ └── mockData.ts
│ └── parsers
│ ├── common
│ │ └── input-stream.test.ts
│ ├── markdown
│ │ └── parse-binding-expression.test.ts
│ ├── parameter-parser.test.ts
│ ├── paremeter-parser.test.ts
│ ├── scripting
│ │ ├── eval-tree-arrow.test.ts
│ │ ├── eval-tree-pre-post.test.ts
│ │ ├── eval-tree.test.ts
│ │ ├── function-proxy.test.ts
│ │ ├── lexer-literals.test.ts
│ │ ├── lexer-misc.test.ts
│ │ ├── module-parse.test.ts
│ │ ├── parser-arrow.test.ts
│ │ ├── parser-assignments.test.ts
│ │ ├── parser-binary.test.ts
│ │ ├── parser-destructuring.test.ts
│ │ ├── parser-errors.test.ts
│ │ ├── parser-expressions.test.ts
│ │ ├── parser-function.test.ts
│ │ ├── parser-literals.test.ts
│ │ ├── parser-primary.test.ts
│ │ ├── parser-regex.test.ts
│ │ ├── parser-statements.test.ts
│ │ ├── parser-unary.test.ts
│ │ ├── process-event.test.ts
│ │ ├── process-implicit-context.test.ts
│ │ ├── process-statement-asgn.test.ts
│ │ ├── process-statement-destruct.test.ts
│ │ ├── process-statement-regs.test.ts
│ │ ├── process-statement-sync.test.ts
│ │ ├── process-statement.test.ts
│ │ ├── process-switch-sync.test.ts
│ │ ├── process-switch.test.ts
│ │ ├── process-try-sync.test.ts
│ │ ├── process-try.test.ts
│ │ ├── simplify-expression.test.ts
│ │ ├── statement-hooks.test.ts
│ │ └── test-helpers.ts
│ ├── style-parser
│ │ ├── generateHvarChain.test.ts
│ │ ├── parseHVar.test.ts
│ │ ├── parser.test.ts
│ │ └── tokens.test.ts
│ └── xmlui
│ ├── lint.test.ts
│ ├── parser.test.ts
│ ├── scanner.test.ts
│ ├── transform.attr.test.ts
│ ├── transform.circular.test.ts
│ ├── transform.element.test.ts
│ ├── transform.errors.test.ts
│ ├── transform.escape.test.ts
│ ├── transform.regression.test.ts
│ ├── transform.script.test.ts
│ ├── transform.test.ts
│ └── xmlui.ts
├── tests-e2e
│ ├── api-bound-component-regression.spec.ts
│ ├── api-call-as-extracted-component.spec.ts
│ ├── assign-to-object-or-array-regression.spec.ts
│ ├── binding-regression.spec.ts
│ ├── children-as-template-context-vars.spec.ts
│ ├── compound-component.spec.ts
│ ├── context-vars-regression.spec.ts
│ ├── data-bindings.spec.ts
│ ├── datasource-and-api-usage-in-var.spec.ts
│ ├── datasource-direct-binding.spec.ts
│ ├── datasource-onLoaded-regression.spec.ts
│ ├── modify-array-item-regression.spec.ts
│ ├── namespaces.spec.ts
│ ├── push-to-array-regression.spec.ts
│ ├── screen-breakpoints.spec.ts
│ ├── scripting.spec.ts
│ ├── state-scope-in-pages.spec.ts
│ └── state-var-scopes.spec.ts
├── tsconfig.bin.json
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── vitest.config.ts
```
# Files
--------------------------------------------------------------------------------
/packages/xmlui-os-frames/meta/componentsMetadata.ts:
--------------------------------------------------------------------------------
```typescript
import { iphoneFrameMd, macAppFrameMd, windowsAppFrameMd } from "../src";
export const componentMetadata = {
name: "OSFrames",
description: "This package provides containers that appear to look like OS-specific windows.",
state: "internal",
metadata: {
WindowsAppFrame: windowsAppFrameMd,
MacAppFrame: macAppFrameMd,
IphoneFrame: iphoneFrameMd,
},
};
```
--------------------------------------------------------------------------------
/blog/src/themes/earthtone.ts:
--------------------------------------------------------------------------------
```typescript
import type { ThemeDefinition } from "xmlui";
export const EarthtoneTheme: ThemeDefinition = {
name: "XMLUI Documentation Theme",
id: "earthtone",
extends: "docs-theme",
themeVars: {
"color-primary": "hsl(30, 50%, 30%)",
"color-secondary": "hsl(120, 40%, 25%)",
"color-surface": "hsl(39, 43%, 97%)",
},
resources: {},
};
export default EarthtoneTheme;
```
--------------------------------------------------------------------------------
/docs/src/themes/earthtone.ts:
--------------------------------------------------------------------------------
```typescript
import type { ThemeDefinition } from "xmlui";
export const EarthtoneTheme: ThemeDefinition = {
name: "XMLUI Documentation Theme",
id: "earthtone",
extends: "docs-theme",
themeVars: {
"color-primary": "hsl(30, 50%, 30%)",
"color-secondary": "hsl(120, 40%, 25%)",
"color-surface": "hsl(39, 43%, 97%)",
},
resources: {},
};
export default EarthtoneTheme;
```
--------------------------------------------------------------------------------
/packages/xmlui-website-blocks/demo/themes/default.ts:
--------------------------------------------------------------------------------
```typescript
import type { ThemeDefinition } from "xmlui";
export const Default: ThemeDefinition = {
id: "default",
name: "Default demo theme",
extends: "xmlui",
resources: {
},
themeVars: {
"paddingTop-H1": "$space-6",
"paddingBottom-H1": "$space-8",
"textColor-H1": "$color-primary-600",
},
tones: {
light: {},
dark: {},
},
};
export default Default;
```
--------------------------------------------------------------------------------
/tools/create-app/templates/default/ts/index.html:
--------------------------------------------------------------------------------
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/resources/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script>window.__PUBLIC_PATH = '/'</script>
<base href="/">
</head>
<body>
<div id="root"></div>
<script type="module" src="/index.ts"></script>
</body>
</html>
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/interception/initMock.ts:
--------------------------------------------------------------------------------
```typescript
import { ApiInterceptor } from "./ApiInterceptor";
import type { ApiInterceptorDefinition } from "./abstractions";
// Create the worker for the ApiInterceptorProvider
export const initMock = async (apiInterceptorDefinition: ApiInterceptorDefinition) => {
const apiInstance = new ApiInterceptor(apiInterceptorDefinition);
await apiInstance.initialize();
return apiInstance;
};
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/action/TimedAction.tsx:
--------------------------------------------------------------------------------
```typescript
import type { ActionExecutionContext } from "../../abstractions/ActionDefs";
import { delay as doDelay } from "../utils/misc";
import { createAction } from "./actions";
async function delay(_executionContext: ActionExecutionContext, timeoutInMs: number, callback?: any) {
await doDelay(timeoutInMs);
await callback?.();
}
export const timedAction = createAction("delay", delay);
```
--------------------------------------------------------------------------------
/xmlui/src/abstractions/scripting/BlockScope.ts:
--------------------------------------------------------------------------------
```typescript
// Represents a block scope
export type BlockScope = {
// --- Block-scoped variable values
vars: Record<string, any>;
// --- Block-scopes const values
constVars?: Set<string>;
// --- Optional return value of an expression
returnValue?: any;
};
// Represents a parameter redirect to a "vars"
export type RedirectInfo = {
valueScope: any;
valueIndex: string | number;
}
```
--------------------------------------------------------------------------------
/xmlui/src/testing/drivers/DateInputDriver.ts:
--------------------------------------------------------------------------------
```typescript
import { InputComponentDriver } from "../ComponentDrivers";
export class DateInputDriver extends InputComponentDriver {
get dayInput() {
return this.getByPartName("day");
}
get monthInput() {
return this.getByPartName("month");
}
get yearInput() {
return this.getByPartName("year");
}
get clearButton() {
return this.getByPartName("clearButton");
}
}
```
--------------------------------------------------------------------------------
/xmlui/src/testing/infrastructure/index.html:
--------------------------------------------------------------------------------
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/resources/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script>window.__PUBLIC_PATH = '/'</script>
</head>
<body>
<div id="root"></div>
<script type="module" src="./main.tsx"></script>
</body>
</html>
```
--------------------------------------------------------------------------------
/xmlui/src/parsers/xmlui-parser/index.ts:
--------------------------------------------------------------------------------
```typescript
export * from "./CharacterCodes";
export * from "./diagnostics";
export * from "./fileExtensions";
export * from "./lint";
export * from "./parser";
export * from "./ParserError";
export * from "./scanner";
export * from "./syntax-kind";
export * from "./syntax-node";
export * from "./transform";
export * from "./utils";
export * from "./xmlui-serializer";
export * from "./xmlui-tree";
```
--------------------------------------------------------------------------------
/xmlui/src/testing/drivers/TreeDriver.ts:
--------------------------------------------------------------------------------
```typescript
import type { Locator } from "@playwright/test";
import { ComponentDriver } from "../ComponentDrivers";
export class TreeDriver extends ComponentDriver {
getNodeById(nodeId: string): Locator {
return this.component.locator(`[data-tree-node-id="${nodeId}"]`).first();
}
getNodeWrapperByTestId(marker: string): Locator {
return this.getByTestId(marker).locator("../..");
}
}
```
--------------------------------------------------------------------------------
/tools/create-app/helpers/get-pkg-manager.ts:
--------------------------------------------------------------------------------
```typescript
export type PackageManager = 'npm' | 'pnpm' | 'yarn' | 'bun'
export function getPkgManager(): PackageManager {
const userAgent = process.env.npm_config_user_agent || ''
if (userAgent.startsWith('yarn')) {
return 'yarn'
}
if (userAgent.startsWith('pnpm')) {
return 'pnpm'
}
if (userAgent.startsWith('bun')) {
return 'bun'
}
return 'npm'
}
```
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
```markdown
---
name: Feature request
about: Suggest an idea for this project
title: ''
labels: ''
assignees: ''
---
**Description:**
[A clear and concise description of the feature request. What problem are you trying to solve?]
**Proposed Solution:**
[A clear and concise description of what you want to happen.]
**Additional Context:**
[Add any other context or screenshots about the feature request here.]
```
--------------------------------------------------------------------------------
/xmlui/src/logging/xmlui.ts:
--------------------------------------------------------------------------------
```typescript
import { loggerService } from "./LoggerService";
export const xmlui = {
log: (...args: any[]) => {
loggerService.log(args);
},
warn: (...args: any[]) => {
loggerService.warn(args);
},
info: (...args: any[]) => {
loggerService.info(args);
},
error: (...args: any[]) => {
loggerService.error(args);
},
trace: (...args: any[]) => {
loggerService.trace(args);
},
};
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/svg/sun.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" />
<path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" />
</svg>
```
--------------------------------------------------------------------------------
/xmlui/src/components/Select/OptionContext.ts:
--------------------------------------------------------------------------------
```typescript
import { createContext, useContext } from "react";
import type { Option } from "../abstractions";
type OptionContextValue = {
onOptionAdd: (option: Option) => void;
onOptionRemove: (option: Option) => void;
};
export const OptionContext = createContext<OptionContextValue>({
onOptionAdd: () => {},
onOptionRemove: () => {},
});
export function useOption() {
return useContext(OptionContext);
}
```
--------------------------------------------------------------------------------
/packages/xmlui-playground/src/playground/PlaygroundContent.module.scss:
--------------------------------------------------------------------------------
```scss
@use "xmlui/themes.scss" as themes;
.playgroundContent {
flex-grow: 1;
position: relative;
padding: 0 16px 16px 16px;
background-color: themes.$backgroundColor;
&:focus-within{
z-index: 999;
}
}
.standaloneMode {
height: 100%;
padding: 0;
margin-top: 0;
border-radius: 0;
box-shadow: none;
}
:is(html[class~=dark]) {
.playgroundContent {
background-color: #020B1A;
}
}
```
--------------------------------------------------------------------------------
/docs/public/pages/howto/use-built-in-form-validation.md:
--------------------------------------------------------------------------------
```markdown
# Use built-in form validation
```xmlui-pg noHeader
---app
<App>
<Test />
</App>
---api
{}
---comp display
<Component name="Test">
<Form
data="{{ password: '' }}"
onSubmit="(data) => console.log('Submitted:', data)"
>
<FormItem
label="Password"
bindTo="password"
type="password"
minLength="8"
lengthInvalidMessage="Password must be at least 8 characters"
/>
</Form>
</Component>
```
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/theming/themes/solid.ts:
--------------------------------------------------------------------------------
```typescript
import type { ThemeDefinition } from "../../../abstractions/ThemingDefs";
export const SolidThemeDefinition: ThemeDefinition = {
id: "solid",
themeVars: {
"color-primary": "#2a69bb",
"color-secondary": "#98a9bc",
"color-surface": "hsl(0,0%,49%)",
"color-success": "#45a249",
"maxWidth-content": "100%",
borderRadius: "0",
"fontSize": "$fontSize-base",
"size-Icon": "1rem",
}
};
```
--------------------------------------------------------------------------------
/packages/xmlui-website-blocks/src/Hello/Hello.tsx:
--------------------------------------------------------------------------------
```typescript
import { createMetadata, createUserDefinedComponentRenderer } from "xmlui";
import componentSource from "./Hello.xmlui";
import codeBehind from "./Hello.xmlui.xs";
const COMP = "Hello";
export const HelloMd = createMetadata({
status: "internal",
description:
"A sample component",
props: {},
});
export const helloRenderer = createUserDefinedComponentRenderer(
HelloMd,
componentSource,
codeBehind
);
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/rendering/ErrorBoundary.module.scss:
--------------------------------------------------------------------------------
```scss
@use "../theming/themes" as themes;
.errorOverlay{
background-color: themes.$color-danger-500;
position: relative;
inset: 0;
border-radius: 4px;
padding: 8px;
}
.title{
color: white;
font-weight: themes.$fontWeight-normal;
padding-left: 4px;
padding-right: 8px;
}
.errorItem{
font-weight: themes.$fontWeight-bold;
padding-left: 4px;
padding-right: 8px;
color: white;
white-space: pre-wrap;
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/EmojiSelector/EmojiSelector.md:
--------------------------------------------------------------------------------
```markdown
%-PROP-START autoFocus
```xmlui-pg copy display name="Example: autoFocus" height="420px"
<App>
<EmojiSelector autoFocus="true" />
</App>
```
%-PROP-END
%-EVENT-START select
```xmlui-pg copy display name="Example: select" height="420px"
<App>
<HStack var.selected="">
<EmojiSelector onSelect="(emoji) => { selected = emoji }" />
<Text value="Selected emoji: {selected}" />
</HStack>
</App>
```
%-EVENT-END
```
--------------------------------------------------------------------------------
/docs/public/pages/howto/do-custom-form-validation.md:
--------------------------------------------------------------------------------
```markdown
# Do custom form validation
```xmlui-pg noHeader
---app
<App>
<Test />
</App>
---api
{}
---comp display
<Component name="Test" var.limit="{100}">
<Form
data="{{ spending: 0 }}"
onSubmit="(data) => console.log('Submitted:', data)"
>
<FormItem
label="Requested Amount (limit {limit})"
bindTo="total"
type="integer"
onValidate="{ (value) => value > 0 && value <= limit }"
/>
</Form>
</Component>
```
```
--------------------------------------------------------------------------------
/xmlui/src/components/NavGroup/NavGroupContext.ts:
--------------------------------------------------------------------------------
```typescript
import { createContext } from "react";
import { defaultProps } from "./NavGroupNative";
export const NavGroupContext = createContext({
level: -1,
layoutIsVertical: false,
iconHorizontalCollapsed: defaultProps.iconHorizontalCollapsed,
iconHorizontalExpanded: defaultProps.iconHorizontalExpanded,
iconVerticalCollapsed: defaultProps.iconVerticalCollapsed,
iconVerticalExpanded: defaultProps.iconVerticalExpanded,
});
```
--------------------------------------------------------------------------------
/xmlui/src/testing/infrastructure/public/resources/sun.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" data-testid="sun-svg">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" />
<path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" />
</svg>
```
--------------------------------------------------------------------------------
/xmlui/src/components/App/LinkInfoContext.ts:
--------------------------------------------------------------------------------
```typescript
import { createContext, useContext } from "react";
import type { NavHierarchyNode } from "../NavPanel/NavPanelNative";
export interface ILinkInfoContext {
linkMap?: Map<string, NavHierarchyNode>;
registerLinkMap?: (linkMap: Map<string, NavHierarchyNode>) => void;
}
export const LinkInfoContext = createContext<ILinkInfoContext | null>(null);
export function useLinkInfoContext() {
return useContext(LinkInfoContext);
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/Splitter/utils.ts:
--------------------------------------------------------------------------------
```typescript
export const parseSize = (size: string, containerSize: number): number => {
if (size.endsWith('px')) {
return parseInt(size, 10);
} else if (size.endsWith('%')) {
return (parseInt(size, 10) / 100) * containerSize;
}
throw new Error('Invalid size format. Use px or %.');
};
export const toPercentage = (size: number, containerSize: number): number => {
return (size / containerSize) * 100;
};
```
--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
```json
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:5173/",
"webRoot": "${workspaceFolder}"
}
]
}
```
--------------------------------------------------------------------------------
/packages/xmlui-pdf/CHANGELOG.md:
--------------------------------------------------------------------------------
```markdown
# xmlui-pdf
## 0.1.11
### Patch Changes
- 3c8ad14: Add the data property to the Pdf component
## 0.1.10
### Patch Changes
- ed53215: test release
## 0.1.9
### Patch Changes
- b0ae113: testing
## 0.1.8
### Patch Changes
- f15c018: another testing
- f15c018: testing
## 0.1.7
### Patch Changes
- 421968b: testing
## 0.1.6
### Patch Changes
- 99bba69: testing
## 0.1.5
### Patch Changes
- bcf162c: testing changesets
```
--------------------------------------------------------------------------------
/.changeset/config.json:
--------------------------------------------------------------------------------
```json
{
"$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
"changelog": "@changesets/cli/changelog",
"commit": false,
"fixed": [["xmlui", "create-xmlui-app", "xmlui-vscode"]],
"linked": [],
"access": "public",
"baseBranch": "main",
"updateInternalDependencies": "patch",
"ignore": [],
"privatePackages": {
"tag": false,
"version": true
},
"snapshot": {
"useCalculatedVersion": true
}
}
```
--------------------------------------------------------------------------------
/docs/public/pages/vscode.md:
--------------------------------------------------------------------------------
```markdown
# XMLUI Tools for Visual Studio Code
- Syntax highlighting for .xmlui files and .xmlui.xs files
- Hover for core components
- Completion for core components
- Code formatting for .xmlui files
- Diagnostics for errors
Find the extension on the [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=xmlui.xmlui-vscode)
or download the [VSIX](https://github.com/xmlui-org/xmlui/releases?q=vscode&expanded=true).
```
--------------------------------------------------------------------------------
/xmlui/src/components/Backdrop/Backdrop.md:
--------------------------------------------------------------------------------
```markdown
%-DESC-START
```xmlui-pg copy display name="Example: using Backdrop"
<App>
<Backdrop opacity="0.6">
<Image
src="/resources/images/components/image/breakfast.jpg"
fit="cover" width="400px" />
<property name="overlayTemplate">
<VStack verticalAlignment="center" height="100px">
<H1 color="white" textAlign="center">Great breakfast!</H1>
</VStack>
</property>
</Backdrop>
</App>
```
%-DESC-END
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/rendering/UnknownComponent.tsx:
--------------------------------------------------------------------------------
```typescript
import styles from "./UnknownComponent.module.scss";
/**
* When the rendering engine finds an unknown (unregistered) component in the
* markup, it renders this component and names the unregistered.
*/
function UnknownComponent ({ message }: { message: string }) {
return (
<div className={styles.errorOverlay}>
<span className={styles.title}>Unknown component: {message}</span>
</div>
);
}
export default UnknownComponent;
```
--------------------------------------------------------------------------------
/xmlui/src/components/App/AppStateContext.ts:
--------------------------------------------------------------------------------
```typescript
import { createContext, useContextSelector } from "use-context-selector";
export interface IAppStateContext {
appState: Record<string, any>;
update: (id: string, patch: any)=> void;
}
export const AppStateContext = createContext<IAppStateContext>(null as unknown as IAppStateContext);
export function useAppStateContextPart<T = unknown>(selector: (value: IAppStateContext) => T) {
return useContextSelector(AppStateContext, selector);
}
```
--------------------------------------------------------------------------------
/xmlui/src/testing/infrastructure/public/resources/bell.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-bell" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" data-testid="bell-svg">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" />
<path d="M9 17v1a3 3 0 0 0 6 0v-1" />
</svg>
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/svg/eye.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-eye">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
<path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" />
</svg>
```
--------------------------------------------------------------------------------
/xmlui/src/components/PageMetaTitle/PageMetaTitle.md:
--------------------------------------------------------------------------------
```markdown
%-DESC-START
**Key features:**
- **Dynamic title updates**: Change browser tab title based on current page or content
- **App name override**: Supersedes the `App`s name property when present
- **Flexible placement**: Can be positioned anywhere in the component tree
- **Binding support**: Accepts dynamic values and expressions for context-aware titles
- **SEO enhancement**: Improves search engine optimization with descriptive page titles
%-DESC-END
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/svg/empty-folder.svg:
--------------------------------------------------------------------------------
```
<svg viewBox="0 0 30 21" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7.58122 0H1C0.447715 0 0 0.447715 0 0.999999V21.0737H30V3.71273H12.0217L7.58122 0Z" fill="#ADDAE9"/> <path d="M10.9928 0.157898H29C29.5523 0.157898 30 0.605613 30 1.1579V20C30 20.5523 29.5523 21 29 21H1.00002C0.447731 21 1.71661e-05 20.5523 1.71661e-05 20V3.93087C1.71661e-05 3.37858 0.447733 2.93087 1.00002 2.93087H6.55236L10.9928 0.157898Z" fill="#CAE9F3"/></svg>
```
--------------------------------------------------------------------------------
/packages/xmlui-playground/src/playground/Header.module.scss:
--------------------------------------------------------------------------------
```scss
@use "xmlui/themes.scss" as themes;
.header {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: .8rem;
border-bottom: 1px solid themes.$borderColor;
background-color: themes.$backgroundColor;
padding: 0 16px 0 16px
}
.description {
font-size: 12px;
}
.box {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
gap: .2rem;
}
.button {
padding: 0.5rem 1rem;
}
```
--------------------------------------------------------------------------------
/xmlui/src/testing/drivers/TimeInputDriver.ts:
--------------------------------------------------------------------------------
```typescript
import { InputComponentDriver } from "../ComponentDrivers";
export class TimeInputDriver extends InputComponentDriver {
get hourInput() {
return this.getByPartName("hour");
}
get minuteInput() {
return this.getByPartName("minute");
}
get secondInput() {
return this.getByPartName("second");
}
get amPmInput() {
return this.getByPartName("ampm");
}
get clearButton() {
return this.getByPartName("clearButton");
}
}
```
--------------------------------------------------------------------------------
/tools/create-app/helpers/validate-pkg.ts:
--------------------------------------------------------------------------------
```typescript
import validateProjectName from 'validate-npm-package-name'
export function validateNpmName(name: string): {
valid: boolean
problems?: string[]
} {
const nameValidation = validateProjectName(name)
if (nameValidation.validForNewPackages) {
return { valid: true }
}
return {
valid: false,
problems: [
...(nameValidation.errors || []),
...(nameValidation.warnings || []),
],
}
}
```
--------------------------------------------------------------------------------
/docs/public/resources/files/for-download/start.bat:
--------------------------------------------------------------------------------
```
@echo off
:: Check if npx is available
where npx >nul 2>nul
if %errorlevel% equ 0 (
:: Check if the directory exists, if not, create it (temp solution, fixed in newer npm, from 10.8.3)
if not exist "%UserProfile%\AppData\Roaming\npm" (
mkdir "%UserProfile%\AppData\Roaming\npm"
)
call npx -y http-server -o
) else (
echo "npx is not available. Please install Node.js and npm: https://nodejs.org/en/download/prebuilt-installer"
pause;
)
```
--------------------------------------------------------------------------------
/xmlui/src/testing/infrastructure/public/resources/eye.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-eye" data-testid="eye-svg">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
<path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" />
</svg>
```
--------------------------------------------------------------------------------
/docs/content/components/Fragment.md:
--------------------------------------------------------------------------------
```markdown
# Fragment [#fragment]
`Fragment` provides conditional rendering. You can use `when=` on any component to render it conditionally, use `Fragment` to apply `when` to a group of components.
## Properties [#properties]
This component does not have any properties.
## Events [#events]
This component does not have any events.
## Exposed Methods [#exposed-methods]
This component does not expose any methods.
## Styling [#styling]
This component does not have any styles.
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/svg/dark_to_light.svg:
--------------------------------------------------------------------------------
```
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 8C9.7909 8 8 9.7909 8 12C8 14.2091 9.7909 16 12 16L12 8Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5229 22 22 17.5229 22 12C22 6.4772 17.5228 2 12 2C6.4772 2 2 6.4772 2 12C2 17.5229 6.4772 22 12 22ZM12 20L12 16C14.2091 16 16 14.2091 16 12C16 9.7909 14.2091 8 12 8L12 4C7.5817 4 4 7.5817 4 12C4 16.4183 7.5817 20 12 20Z" fill="white"/>
</svg>
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/action/actions.ts:
--------------------------------------------------------------------------------
```typescript
import type { ActionFunction, ActionRendererDef } from "../../abstractions/ActionDefs";
/**
* Creates an action renderer definition object that can be registered in the action registry.
* @param actionName The name of the action
* @param actionFn The function that executes the action
* @returns An action renderer definition object
*/
export function createAction(actionName: string, actionFn: ActionFunction): ActionRendererDef {
return {
actionName,
actionFn,
};
}
```
--------------------------------------------------------------------------------
/xmlui/tests/parsers/xmlui/transform.circular.test.ts:
--------------------------------------------------------------------------------
```typescript
import { describe, it } from "vitest";
import { transformSource } from "./xmlui";
describe("Xmlui transform - child elements", () => {
it("Invalid element name fails #1", () => {
const source = `
<App>
<Stack>
<script>
function dummy(){}
</script>
</Stack>
Hello
</App>
`;
const comp = transformSource(source);
// --- This should fail if there is any circular reference
JSON.stringify(comp, null, 2);
});
});
```
--------------------------------------------------------------------------------
/xmlui/src/abstractions/scripting/TryScope.ts:
--------------------------------------------------------------------------------
```typescript
import type { TryStatement } from "../../components-core/script-runner/ScriptingSourceTree";
type ErrorProcessingPhase = "try" | "catch" | "finally" | "error" | "postFinally";
type ErrorHandlerExitType = "break" | "continue" | "return";
// Represents the scope of a try block
export type TryScope = {
statement: TryStatement;
processingPhase?: ErrorProcessingPhase;
tryLabel: number;
exitType?: ErrorHandlerExitType;
errorToThrow?: any;
errorSource?: ErrorProcessingPhase;
};
```
--------------------------------------------------------------------------------
/xmlui/src/abstractions/scripting/TryScopeExp.ts:
--------------------------------------------------------------------------------
```typescript
import type { TryStatement } from "../../components-core/script-runner/ScriptingSourceTree";
type ErrorProcessingPhase = "try" | "catch" | "finally" | "error" | "postFinally";
type ErrorHandlerExitType = "break" | "continue" | "return";
// Represents the scope of a try block
export type TryScope = {
statement: TryStatement;
processingPhase?: ErrorProcessingPhase;
tryLabel: number;
exitType?: ErrorHandlerExitType;
errorToThrow?: any;
errorSource?: ErrorProcessingPhase;
};
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/svg/bulb.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-bulb">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7" />
<path d="M9 16a5 5 0 1 1 6 0a3.5 3.5 0 0 0 -1 3a2 2 0 0 1 -4 0a3.5 3.5 0 0 0 -1 -3" />
<path d="M9.7 17l4.6 0" />
</svg>
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/svg/light_to_dark.svg:
--------------------------------------------------------------------------------
```
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8V16Z" fill="#394150"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM12 4V8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16V20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4Z" fill="#394150"/>
</svg>
```
--------------------------------------------------------------------------------
/docs/public/pages/xmlui-spreadsheet/Spreadsheet.md:
--------------------------------------------------------------------------------
```markdown
# Spreadsheet [#spreadsheet]
>[!WARNING]
> This component is in an **experimental** state; you can use it in your app. However, we may modify it, and it may even have breaking changes in the future.XMLUI Spreadsheet
## Properties
### `worksheets`
This property sets the initial value of the spreadsheet's worksheets.
## Events
This component does not have any events.
## Exposed Methods
This component does not expose any methods.
## Styling
This component does not have any styles.
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/svg/moon.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor">
<path d="M600-640 480-760l120-120 120 120-120 120Zm200 120-80-80 80-80 80 80-80 80ZM483-80q-84 0-157.5-32t-128-86.5Q143-253 111-326.5T79-484q0-146 93-257.5T409-880q-18 99 11 193.5T520-521q71 71 165.5 100T879-410q-26 144-138 237T483-80Zm0-80q88 0 163-44t118-121q-86-8-163-43.5T463-465q-61-61-97-138t-43-163q-77 43-120.5 118.5T159-484q0 135 94.5 229.5T483-160Zm-20-305Z"/>
</svg>
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/AppContext.tsx:
--------------------------------------------------------------------------------
```typescript
import { createContext, useContext } from "react";
import type { AppContextObject } from "../abstractions/AppContextDefs";
/**
* Stores the object that holds the global functions and methods of xmlui.
*/
export const AppContext = createContext<AppContextObject | undefined>(undefined);
/**
* This React hook makes the current context of application services available
* within any component logic using the hook.
*/
export function useAppContext () {
return useContext(AppContext)!;
}
```
--------------------------------------------------------------------------------
/docs/content/components/Breakout.md:
--------------------------------------------------------------------------------
```markdown
# Breakout [#breakout]
The `Breakout` component creates a breakout section. It allows its child to occupy the entire width of the UI even if the app or the parent container constrains the maximum content width.
## Properties [#properties]
This component does not have any properties.
## Events [#events]
This component does not have any events.
## Exposed Methods [#exposed-methods]
This component does not expose any methods.
## Styling [#styling]
This component does not have any styles.
```
--------------------------------------------------------------------------------
/xmlui/src/components/Splitter/VSplitter.md:
--------------------------------------------------------------------------------
```markdown
`VSplitter` is a specialized, shorthand version for the regular `Splitter` component with a vertical orientation.
```xmlui-pg copy display name="Example: VSplitter"
<App>
<VSplitter height="200px">
<Stack backgroundColor="lightblue" height="100%" />
<Stack backgroundColor="darksalmon" height="100%" />
</VSplitter>
</App>
```
>[!INFO]
> You cannot change the orientation of `VSplitter` from vertical to horizontal by setting the `orientation` prop, as the engine ignores that setting.
```
--------------------------------------------------------------------------------
/xmlui/src/components/Splitter/HSplitter.md:
--------------------------------------------------------------------------------
```markdown
`HSplitter` is a specialized, shorthand version for the regular `Splitter` component with a vertical orientation.
```xmlui-pg copy display name="Example: HSplitter"
<App >
<HSplitter height="200px">
<Stack backgroundColor="lightblue" height="100%" />
<Stack backgroundColor="darksalmon" height="100%" />
</HSplitter>
</App>
```
>[!INFO]
> You cannot change the orientation of `HSplitter` from vertical to horizontal by setting the `orientation` prop, as the engine ignores that setting.
```
--------------------------------------------------------------------------------
/xmlui/src/components/Heading/H1.md:
--------------------------------------------------------------------------------
```markdown
The `H1` component is a shorthand version of the `Heading` element with its `level` property set to "h1".
```xmlui-pg copy display name="H1 example"
<App>
<H1 value="This is a H1 text" />
</App>
```
## Styling
The `H1` component inherits its visual style from the `Heading` component.
Using the `H1` component specifier, you can override the inherited theme variable values.
For example, the `textColor-H1` theme variable sets the text color of `H1` while keeping the color of all other headings.
```
--------------------------------------------------------------------------------
/xmlui/src/components/Heading/H2.md:
--------------------------------------------------------------------------------
```markdown
The `H2` component is a shorthand version of the `Heading` element with its `level` property set to "h2".
```xmlui-pg copy display name="H2 example"
<App>
<H2 value="This is a H2 text" />
</App>
```
## Styling
The `H2` component inherits its visual style from the `Heading` component.
Using the `H2` component specifier, you can override the inherited theme variable values.
For example, the `textColor-H2` theme variable sets the text color of `H2` while keeping the color of all other headings.
```
--------------------------------------------------------------------------------
/xmlui/src/components/Heading/H3.md:
--------------------------------------------------------------------------------
```markdown
The `H3` component is a shorthand version of the `Heading` element with its `level` property set to "h3".
```xmlui-pg copy display name="H3 example"
<App>
<H3 value="This is a H3 text" />
</App>
```
## Styling
The `H3` component inherits its visual style from the `Heading` component.
Using the `H3` component specifier, you can override the inherited theme variable values.
For example, the `textColor-H3` theme variable sets the text color of `H3` while keeping the color of all other headings.
```
--------------------------------------------------------------------------------
/xmlui/src/components/Heading/H4.md:
--------------------------------------------------------------------------------
```markdown
The `H4` component is a shorthand version of the `Heading` element with its `level` property set to "h4".
```xmlui-pg copy display name="H4 example"
<App>
<H4 value="This is a H4 text" />
</App>
```
## Styling
The `H4` component inherits its visual style from the `Heading` component.
Using the `H4` component specifier, you can override the inherited theme variable values.
For example, the `textColor-H4` theme variable sets the text color of `H4` while keeping the color of all other headings.
```
--------------------------------------------------------------------------------
/xmlui/src/components/Heading/H5.md:
--------------------------------------------------------------------------------
```markdown
The `H5` component is a shorthand version of the `Heading` element with its `level` property set to "h5".
```xmlui-pg copy display name="H5 example"
<App>
<H5 value="This is a H5 text" />
</App>
```
## Styling
The `H5` component inherits its visual style from the `Heading` component.
Using the `H5` component specifier, you can override the inherited theme variable values.
For example, the `textColor-H5` theme variable sets the text color of `H5` while keeping the color of all other headings.
```
--------------------------------------------------------------------------------
/xmlui/src/components/Heading/H6.md:
--------------------------------------------------------------------------------
```markdown
The `H6` component is a shorthand version of the `Heading` element with its `level` property set to "h6".
```xmlui-pg copy display name="H6 example"
<App>
<H6 value="This is a H6 text" />
</App>
```
## Styling
The `H6` component inherits its visual style from the `Heading` component.
Using the `H6` component specifier, you can override the inherited theme variable values.
For example, the `textColor-H6` theme variable sets the text color of `H6` while keeping the color of all other headings.
```
--------------------------------------------------------------------------------
/xmlui/src/testing/drivers/TextBoxDriver.ts:
--------------------------------------------------------------------------------
```typescript
import { PART_START_ADORNMENT, PART_END_ADORNMENT } from "../../components-core/parts";
import { InputComponentDriver } from "../ComponentDrivers";
export class TextBoxDriver extends InputComponentDriver {
get input() {
return this.getByPartName("input");
}
get startAdornment() {
return this.getByPartName(PART_START_ADORNMENT);
}
get endAdornment() {
return this.getByPartName(PART_END_ADORNMENT);
}
get button() {
return this.getByPartName(PART_END_ADORNMENT);
}
}
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/utils/compound-utils.ts:
--------------------------------------------------------------------------------
```typescript
import type { CompoundComponentDef } from "../../abstractions/ComponentDefs";
import { xmlUiMarkupToComponent } from "../xmlui-parser";
export function compoundComponentDefFromSource(name: string, componentSource: string): CompoundComponentDef {
const compoundComponentDef = xmlUiMarkupToComponent(componentSource).component as CompoundComponentDef;
if (!compoundComponentDef) {
throw new Error(`Failed to parse ${name} component definition during build.`);
}
return compoundComponentDef;
}
```
--------------------------------------------------------------------------------
/packages/xmlui-animations/CHANGELOG.md:
--------------------------------------------------------------------------------
```markdown
# xmlui-animations
## 0.1.15
### Patch Changes
- ed53215: another testing
## 0.1.14
### Patch Changes
- 56b6e46: test
## 0.1.13
### Patch Changes
- 5ec1667: test
## 0.1.12
### Patch Changes
- 8e026fe: testing
## 0.1.11
### Patch Changes
- b0ae113: testing
## 0.1.10
### Patch Changes
- f15c018: another testing
- f15c018: testing
## 0.1.9
### Patch Changes
- 421968b: testing
## 0.1.8
### Patch Changes
- 99bba69: testing
## 0.1.7
### Patch Changes
- bcf162c: testing changesets
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/svg/eye-closed.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-eye-closed">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M21 9c-2.4 2.667 -5.4 4 -9 4c-3.6 0 -6.6 -1.333 -9 -4" />
<path d="M3 15l2.5 -3.8" />
<path d="M21 14.976l-2.492 -3.776" />
<path d="M9 17l.5 -4" />
<path d="M15 17l-.5 -4" />
</svg>
```
--------------------------------------------------------------------------------
/xmlui/src/parsers/common/GenericToken.ts:
--------------------------------------------------------------------------------
```typescript
// Represents a generic token
export type GenericToken<T> = {
// The raw text of the token
text: string;
// The type of the token
type: T;
// Start position in the source stream
startPosition: number;
// End position (exclusive) in the source stream
endPosition: number;
// Start line number
startLine: number;
// End line number of the token
endLine: number;
// Start column number of the token
startColumn: number;
// End column number of the token
endColumn: number;
};
```
--------------------------------------------------------------------------------
/packages/xmlui-spreadsheet/index.html:
--------------------------------------------------------------------------------
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/resources/favicon.ico" />
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://bossanova.uk/jspreadsheet/v5/jspreadsheet.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div id="root"></div>
<script type="module" src="/index.ts"></script>
</body>
</html>
```
--------------------------------------------------------------------------------
/xmlui/src/components/Charts/utils/abstractions.ts:
--------------------------------------------------------------------------------
```typescript
import type { LabelPosition } from "recharts/types/component/Label";
export const LabelPositionValues: readonly Exclude<
LabelPosition,
{
x?: number;
y?: number;
}
>[] = [
"top",
"left",
"right",
"bottom",
"inside",
"outside",
"insideLeft",
"insideRight",
"insideTop",
"insideBottom",
"insideTopLeft",
"insideBottomLeft",
"insideTopRight",
"insideBottomRight",
"insideStart",
"insideEnd",
"end",
"center",
"centerTop",
"centerBottom",
"middle",
] as const;
```
--------------------------------------------------------------------------------
/packages/xmlui-devtools/src/devtools/DevTools.tsx:
--------------------------------------------------------------------------------
```typescript
import { createComponentRenderer, createMetadata, parseScssVar } from "xmlui";
import { DevTools } from "./DevToolsNative";
const COMP = "DevTools";
export const EditorMd = createMetadata({
description: "XMLUI DevTools component.",
status: "experimental",
props: {
},
themeVars: parseScssVar({
}),
defaultThemeVars: {},
});
export const devToolsComponentRenderer = createComponentRenderer(
COMP,
EditorMd,
({ extractValue, node, renderChild }: any) => {
return (
<DevTools />
);
},
);
```
--------------------------------------------------------------------------------
/xmlui/src/components/DropdownMenu/SubMenuItem.md:
--------------------------------------------------------------------------------
```markdown
%-DESC-START
**Key features:**
- **Hierarchical nesting**: Creates multi-level menu structures within [DropdownMenu](/components/DropdownMenu) components
- **Dual functionality**: Acts as both a clickable menu item and a container for other menu components
- **Custom triggers**: Configurable trigger appearance via triggerTemplate property
- **Progressive disclosure**: Reveals nested options on hover or click interaction
- **Unlimited depth**: Supports multiple levels of nesting for complex menu hierarchies
%-DESC-END
```
--------------------------------------------------------------------------------
/docs/content/components/RealTimeAdapter.md:
--------------------------------------------------------------------------------
```markdown
# RealTimeAdapter [#realtimeadapter]
`RealTimeAdapter` is a non-visual component that listens to real-time events.
## Properties [#properties]
### `url` (default: "") [#url-default-]
This property specifies the URL to use for long-polling.
## Events [#events]
### `eventArrived` [#eventarrived]
This event is raised when data arrives from the backend using long-polling.
## Exposed Methods [#exposed-methods]
This component does not expose any methods.
## Styling [#styling]
This component does not have any styles.
```
--------------------------------------------------------------------------------
/xmlui/src/parsers/common/utils.ts:
--------------------------------------------------------------------------------
```typescript
export function deepFreeze (o: any) {
Object.freeze(o);
let oIsFunction = typeof o === "function";
let hasOwnProp = Object.prototype.hasOwnProperty;
Object.getOwnPropertyNames(o).forEach(function (prop) {
if (hasOwnProp.call(o, prop)
&& (oIsFunction ? prop !== 'caller' && prop !== 'callee' && prop !== 'arguments' : true )
&& o[prop] !== null
&& (typeof o[prop] === "object" || typeof o[prop] === "function")
&& !Object.isFrozen(o[prop])) {
deepFreeze(o[prop]);
}
});
return o;
};
```
--------------------------------------------------------------------------------
/xmlui/src/abstractions/scripting/ScriptParserError.ts:
--------------------------------------------------------------------------------
```typescript
export interface ScriptParserErrorMessage {
code: ScriptParsingErrorCodes;
text: string;
position?: number;
line?: number;
column?: number;
}
export type ScriptParsingErrorCodes =
| "W001"
| "W002"
| "W003"
| "W004"
| "W005"
| "W006"
| "W007"
| "W008"
| "W009"
| "W010"
| "W011"
| "W012"
| "W013"
| "W014"
| "W015"
| "W016"
| "W017"
| "W018"
| "W019"
| "W020"
| "W021"
| "W022"
| "W023"
| "W024"
| "W025"
| "W026"
| "W027"
| "W028"
| "W029"
| "W030"
| "W031";
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/svg/folder.svg:
--------------------------------------------------------------------------------
```
<svg viewBox="0 0 30 22" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7.58122 0H1C0.447715 0 0 0.447715 0 0.999999V21.0737H30V3.71273H12.0217L7.58122 0Z" fill="#ADDAE9"/> <rect x="1.2179" y="2.44446" width="28.0128" height="15.8889" fill="white"/> <path d="M10.9928 1.1579H29C29.5523 1.1579 30 1.60561 30 2.1579V21C30 21.5523 29.5523 22 29 22H1.00002C0.447731 22 1.71661e-05 21.5523 1.71661e-05 21V4.93087C1.71661e-05 4.37858 0.447733 3.93087 1.00002 3.93087H6.55236L10.9928 1.1579Z" fill="#CAE9F3"/></svg>
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/TableDeleteRowIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import React from "react";
export default function TableDeleteRowIcon(props) {
return (
<svg
viewBox="0 0 24 16"
stroke="currentColor"
fill="none"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
{...props}
>
<rect x="1.5" y="1.5" width="13" height="11" rx="1" />
<line x1="1.5" y1="5.5" x2="14.5" y2="5.5" />
<line x1="1.5" y1="9.5" x2="14.5" y2="9.5" />
{/* Minus sign for delete */}
<line x1="17" y1="8" x2="21" y2="8" />
</svg>
);
}
```
--------------------------------------------------------------------------------
/packages/xmlui-website-blocks/src/index.tsx:
--------------------------------------------------------------------------------
```typescript
import { heroSectionComponentRenderer } from "./HeroSection/HeroSection";
import { scrollToTopComponentRenderer } from "./ScrollToTop/ScrollToTop";
import { fancyButtonRenderer } from "./FancyButton/FancyButton";
import { carouselComponentRenderer } from "./Carousel/Carousel";
import { helloRenderer } from "./Hello/Hello";
export default {
namespace: "XMLUIExtensions",
components: [
heroSectionComponentRenderer,
scrollToTopComponentRenderer,
fancyButtonRenderer,
carouselComponentRenderer,
helloRenderer
]
};
```
--------------------------------------------------------------------------------
/xmlui/src/components/PositionedContainer/PositionedContainerNative.tsx:
--------------------------------------------------------------------------------
```typescript
import type { ReactNode } from "react";
import { CSSProperties } from "react";
import classnames from "classnames";
import styles from "./PositionedContainer.module.scss";
type Props = {
children: ReactNode;
className?: string;
visibleOnHover: boolean;
};
export function PositionedContainer({
children,
className,
visibleOnHover = false,
}: Props) {
return (
<div
className={classnames(styles.wrapper, className, {
[styles.visibleOnHover]: visibleOnHover,
})}
>
{children}
</div>
);
}
```
--------------------------------------------------------------------------------
/packages/xmlui-spreadsheet/src/SpreadsheetNative.tsx:
--------------------------------------------------------------------------------
```typescript
import React, { useEffect, useRef } from "react";
import jspreadsheet from "jspreadsheet-ce";
import "jspreadsheet-ce/dist/jspreadsheet.css";
interface JSpreadsheetProps {
worksheets: jspreadsheet.WorksheetOptions[];
}
const JSpreadsheet: React.FC<JSpreadsheetProps> = ({ worksheets }) => {
const tableRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (tableRef.current) {
jspreadsheet(tableRef.current, {
worksheets,
});
}
}, []);
return <div ref={tableRef} />;
};
export default JSpreadsheet;
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/TableInsertRowIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import React from "react";
export default function TableInsertRowIcon(props) {
return (
<svg
viewBox="0 0 24 16"
stroke="currentColor"
fill="none"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
{...props}
>
<rect x="1.5" y="1.5" width="13" height="11" rx="1" />
<line x1="1.5" y1="5.5" x2="14.5" y2="5.5" />
<line x1="1.5" y1="9.5" x2="14.5" y2="9.5" />
<line x1="19" y1="6" x2="19" y2="10" />
<line x1="17" y1="8" x2="21" y2="8" />
</svg>
);
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/Stack/HStack.md:
--------------------------------------------------------------------------------
```markdown
`HStack` is a specialized, shorthand version for the regular `Stack` component with a horizontal orientation.
```xmlui-pg copy display name="Example: HStack"
<App>
<HStack>
<Stack height="32px" width="32px" backgroundColor="red" />
<Stack height="32px" width="32px" backgroundColor="blue" />
<Stack height="32px" width="32px" backgroundColor="green" />
</HStack>
</App>
```
>[!INFO]
> You cannot change the orientation of `HStack` from horizontal to vertical by setting the `orientation` prop, as the engine ignores that setting.
```
--------------------------------------------------------------------------------
/xmlui/src/components/Option/OptionTypeProvider.tsx:
--------------------------------------------------------------------------------
```typescript
import type { ComponentType, ReactNode } from "react";
import React from "react";
import type { Option } from "../abstractions";
const OptionTypeContext = React.createContext<ComponentType<Option>>(null);
export function useOptionType() {
return React.useContext(OptionTypeContext);
}
function OptionTypeProvider({
children,
Component,
}: {
children: ReactNode;
Component: ComponentType<Option>;
}) {
return <OptionTypeContext.Provider value={Component}>{children}</OptionTypeContext.Provider>;
}
export default OptionTypeProvider;
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/theming/utils.ts:
--------------------------------------------------------------------------------
```typescript
/**
* Each theme can have a light or a dark tone.
*/
export const ThemeToneKeys = ["light", "dark"] as const;
export const SizeScaleKeys = {
// small scale
none: "none",
xs: "xs",
sm: "sm",
md: "md",
// large scale
lg: "lg",
xl: "xl",
"2xl": "2xl",
"3xl": "3xl",
} as const;
export const SizeScaleReadableKeys = {
// small scale
none: "None",
xs: "Extra Small",
sm: "Small",
md: "Medium",
// large scale
lg: "Large",
xl: "Extra Large",
"2xl": "Double Extra Large",
"3xl": "Triple Extra Large",
} as const;
```
--------------------------------------------------------------------------------
/xmlui/src/components/Pages/Page.md:
--------------------------------------------------------------------------------
```markdown
%-DESC-START
**Key features:**
- **Navigation**: Activated by [NavLink](/components/NavLink) or programmatic navigation (`Actions.navigate()`)
- **Content container**: Wraps any XMLUI components to define what displays for each route
- **URL pattern matching**: Maps exact URLs or dynamic patterns with parameters to specific content
- **Route parameters**: Supports dynamic URL segments (e.g., `/user/:id`) accessible via `$routeParams`
- **Query parameter access**: Retrieves URL query parameters through `$queryParams` context variable
%-DESC-END
```
--------------------------------------------------------------------------------
/packages/xmlui-playground/src/playground/ToneSwitcher.tsx:
--------------------------------------------------------------------------------
```typescript
import { forwardRef } from "react";
import { type ThemeTone, ToneChangerButton } from "xmlui";
import { toneChanged } from "../state/store";
import { usePlayground } from "../hooks/usePlayground";
export const ToneSwitcher = forwardRef<HTMLDivElement>((props, ref) => {
const { dispatch } = usePlayground();
return (
<div ref={ref} {...props}>
<ToneChangerButton
onClick={(activeTone: ThemeTone) => {
dispatch(toneChanged(activeTone));
}}
/>
</div>
);
});
ToneSwitcher.displayName = "ToneSwitcher";
```
--------------------------------------------------------------------------------
/xmlui/src/components/Slider/Slider.md:
--------------------------------------------------------------------------------
```markdown
%-DESC-START
**Key features:**
- **Range selection**: Single value or dual-thumb range selection with configurable minimum separation
- **Step control**: Precise incremental selection with customizable step values
- **Value formatting**: Custom display formatting for current values and visual feedback
%-DESC-END
%-PROP-START initialValue
```xmlui-pg
<Slider initialValue="5" />
```
%-PROP-END
%-PROP-START minValue
```xmlui-pg
<Slider minValue="10" />
```
%-PROP-END
%-PROP-START maxValue
```xmlui-pg
<Slider maxValue="30" />
```
%-PROP-END
```
--------------------------------------------------------------------------------
/xmlui/src/components/Stack/VStack.md:
--------------------------------------------------------------------------------
```markdown
`VStack` is a specialized, shorthand version for the regular [Stack](./Stack) component with a vertical orientation.
```xmlui-pg copy display name="Example: VStack"
<App>
<VStack>
<Stack height="32px" width="32px" backgroundColor="red" />
<Stack height="32px" width="32px" backgroundColor="blue" />
<Stack height="32px" width="32px" backgroundColor="green" />
</VStack>
</App>
```
>[!INFO]
> You cannot change the orientation of `VStack` from vertical to horizontal by setting the `orientation` prop, as the engine ignores that setting.
```
--------------------------------------------------------------------------------
/xmlui/src/components/SpaceFiller/SpaceFiller.module.scss:
--------------------------------------------------------------------------------
```scss
@use "../../components-core/theming/themes" as t;
// --- This code snippet is required to collect the theme variables used in this module
$themeVars: ();
@function createThemeVar($componentVariable) {
$themeVars: t.appendThemeVar($themeVars, $componentVariable) !global;
@return t.getThemeVar($themeVars, $componentVariable);
}
@layer components {
.spacer {
flex: 1 1 0 !important;
place-self: stretch;
}
}
// --- We export the theme variables to add them to the component renderer
:export {
themeVars: t.json-stringify($themeVars);
}
```
--------------------------------------------------------------------------------
/packages/xmlui-playground/src/playground/StandalonePlayground.tsx:
--------------------------------------------------------------------------------
```typescript
import { createComponentRenderer, createMetadata, parseScssVar } from "xmlui";
import { StandalonePlayground } from "./StandalonePlaygroundNative";
const COMP = "StandalonePlayground";
export const StandalonePlaygroundMd = createMetadata({
description: "XMLUI StandalonePlayground component.",
status: "experimental",
props: {},
themeVars: parseScssVar({}),
defaultThemeVars: {},
});
export const standalonePlaygroundComponentRenderer = createComponentRenderer(
COMP,
StandalonePlaygroundMd,
() => {
return <StandalonePlayground />;
},
);
```
--------------------------------------------------------------------------------
/xmlui/src/components/Charts/PieChart/PieChart.md:
--------------------------------------------------------------------------------
```markdown
%-DESC-START
**Key features:**
- **Proportional visualization**: Displays data segments as slices of a complete circle
- **Flexible labeling**: Configurable label positions both inside and outside chart segments
- **Data binding**: Connects to array data with specified keys for values and labels
- **Label list display**: Optional legend-style list showing all segments and values
- **Customizable sizing**: Configurable dimensions and outer radius for different layouts
For a variation with a hollow center, see [DonutChart](/components/DonutChart).
%-DESC-END
```
--------------------------------------------------------------------------------
/xmlui/src/components/Slot/Slot.ts:
--------------------------------------------------------------------------------
```typescript
import { createMetadata, d } from "../metadata-helpers";
import { createPropHolderComponent } from "../../components-core/renderers";
const COMP = "Slot";
export const SlotMd = createMetadata({
status: "experimental",
description:
"Placeholder in a reusable component. " +
"Signs the slot where the component's injected children should be rendered.",
props: {
name: d(`This optional property defines the name of the slot.`),
},
allowArbitraryProps: true,
opaque: true
});
export const SlotHolder = createPropHolderComponent(COMP, SlotMd);
```
--------------------------------------------------------------------------------
/xmlui/src/components/Carousel/CarouselItem.tsx:
--------------------------------------------------------------------------------
```typescript
import { createComponentRenderer } from "../../components-core/renderers";
import { createMetadata } from "../metadata-helpers";
import { CarouselItemComponent } from "./CarouselItemNative";
const COMP = "CarouselItem";
export const CarouselItemMd = createMetadata({
status: "in progress",
});
export const carouselItemComponentRenderer = createComponentRenderer(
COMP,
CarouselItemMd,
(rendererContext) => {
const { node, renderChild } = rendererContext;
return <CarouselItemComponent>{renderChild(node.children)}</CarouselItemComponent>;
},
);
```
--------------------------------------------------------------------------------
/xmlui/src/components/Charts/LabelList/LabelListNative.module.scss:
--------------------------------------------------------------------------------
```scss
@use "xmlui/themes.scss" as t;
// --- This code snippet is required to collect the theme variables used in this module
$themeVars: ();
@function createThemeVar($componentVariable) {
$themeVars: t.appendThemeVar($themeVars, $componentVariable) !global;
@return t.getThemeVar($themeVars, $componentVariable);
}
$componentName: "LabelList";
@layer components {
.labelList {
fill: createThemeVar("textColor-LabelList");
}
}
// --- We export the theme variables to add them to the component renderer
:export {
themeVars: t.json-stringify($themeVars)
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/Charts/BarChart/BarChart.module.scss:
--------------------------------------------------------------------------------
```scss
@use "xmlui/themes.scss" as t;
// --- This code snippet is required to collect the theme variables used in this module
$themeVars: (
);
@function createThemeVar($componentVariable) {
$themeVars: t.appendThemeVar($themeVars, $componentVariable) !global;
@return t.getThemeVar($themeVars, $componentVariable);
}
$componentName: "BarChart";
@layer components {
.wrapper {
width: 100%;
height: 100%;
min-height: 0;
}
}
// --- We export the theme variables to add them to the component renderer
:export {
themeVars: t.json-stringify($themeVars);
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/Charts/LineChart/LineChart.module.scss:
--------------------------------------------------------------------------------
```scss
@use "xmlui/themes.scss" as t;
// --- This code snippet is required to collect the theme variables used in this module
$themeVars: (
);
@function createThemeVar($componentVariable) {
$themeVars: t.appendThemeVar($themeVars, $componentVariable) !global;
@return t.getThemeVar($themeVars, $componentVariable);
}
$componentName: "LineChart";
@layer components {
.wrapper {
width: 100%;
height: 100%;
min-height: 0;
}
}
// --- We export the theme variables to add them to the component renderer
:export {
themeVars: t.json-stringify($themeVars);
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/TableDeleteColumnIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import React from "react";
export default function TableDeleteColumnIcon(props) {
return (
<svg
viewBox="0 0 24 16"
stroke="currentColor"
fill="none"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
width="24"
height="16"
{...props}
>
<rect x="1.5" y="1.5" width="13" height="11" rx="1" />
<line x1="5.5" y1="3.5" x2="5.5" y2="11.5" />
<line x1="9" y1="3.5" x2="9" y2="11.5" />
{/* Minus sign for delete */}
<line x1="17" y1="8" x2="21" y2="8" />
</svg>
);
}
```
--------------------------------------------------------------------------------
/packages/xmlui-website-blocks/CHANGELOG.md:
--------------------------------------------------------------------------------
```markdown
# xmlui-website-blocks
## 0.1.4
### Patch Changes
- d4133e2: Add HeroSection and ScrollToTop components to xmlui-website-blocks
## 0.1.3
### Patch Changes
- e42d367: Add FancyButton to xmlui-website-blocks
- 8a3d5cd: Add HeroSection and ScrollToTop components to xmlui-website-blocks
- 819b563: Update fontSize and lineHeight themes and style (may break existing xmlui code)
## 0.1.2
### Patch Changes
- fff80c5: Bump package version
## 0.1.1
### Patch Changes
- 879c09d: Component part handling and testing refactored
- 5032e4a: Experimenting with HeroSection
```
--------------------------------------------------------------------------------
/xmlui/tests-e2e/state-scope-in-pages.spec.ts:
--------------------------------------------------------------------------------
```typescript
import { test, expect } from "../src/testing/fixtures";
import { initApp } from "../src/testing/themed-app-test-helpers";
test("state in page is available in app root", async ({ page }) => {
await initApp(page, {
entryPoint: `
<App var.varBasedOnNumberOfItems="{numberOfItems.value * 2}">
<Pages>
<Page url="/">
<NumberBox initialValue="20" id="numberOfItems"/>
<Text testId="value">{varBasedOnNumberOfItems}</Text>
</Page>
</Pages>
</App>
`,
});
await expect(page.getByTestId("value")).toHaveText("40");
});
```
--------------------------------------------------------------------------------
/packages/xmlui-website-blocks/meta/componentsMetadata.ts:
--------------------------------------------------------------------------------
```typescript
import { HeroSectionMd } from "../src/HeroSection/HeroSection"
import { ScrollToTopMd } from "../src/ScrollToTop/ScrollToTop"
import { CarouselMd } from "../src/Carousel/Carousel"
import { HelloMd } from "../src/Hello/Hello"
import { FancyButtonMd } from "../src/FancyButton/FancyButton"
export const componentMetadata = {
name: "Websites",
state: "experimental",
description: "This package contains components...",
metadata: {
Hello: HelloMd,
HeroSection: HeroSectionMd,
ScrollToTop: ScrollToTopMd,
Carousel: CarouselMd,
FancyButton: FancyButtonMd,
},
};
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/TableInsertColumnIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import React from "react";
export default function TableInsertColumnIcon(props) {
return (
<svg
viewBox="0 0 24 16"
stroke="currentColor"
fill="none"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
width="24"
height="16"
{...props}
>
<rect x="1.5" y="1.5" width="13" height="11" rx="1" />
<line x1="5.5" y1="3.5" x2="5.5" y2="11.5" />
<line x1="9" y1="3.5" x2="9" y2="11.5" />
<line x1="19" y1="6.5" x2="19" y2="9.5" />
<line x1="17.5" y1="8" x2="20.5" y2="8" />
</svg>
);
}
```
--------------------------------------------------------------------------------
/packages/xmlui-website-blocks/src/vite-env.d.ts:
--------------------------------------------------------------------------------
```typescript
/// <reference types="vite/client" />
// Type declarations for XMLUI files
declare module "*.xmlui" {
interface XmluiModule {
component: any;
src: string;
file: string;
}
const content: XmluiModule;
export default content;
}
declare module "*.xmlui.xs" {
interface XmluiCodeBehindModule {
[key: string]: any;
src: string;
}
const content: XmluiCodeBehindModule;
export default content;
}
declare module "*.xs" {
interface XmluiScriptModule {
[key: string]: any;
src: string;
}
const content: XmluiScriptModule;
export default content;
}
```
--------------------------------------------------------------------------------
/xmlui/src/language-server/server-web-worker.ts:
--------------------------------------------------------------------------------
```typescript
import { createConnection, BrowserMessageReader, BrowserMessageWriter } from 'vscode-languageserver/browser';
import * as serverCommon from "./server-common"
/// <reference lib="WebWorker" />
// declare const self: DedicatedWorkerGlobalScope;
const messageReader = new BrowserMessageReader(self);
messageReader.listen((message) => {
console.log('Received message from main thread:', message);
});
const messageWriter = new BrowserMessageWriter(self);
const connection = createConnection(messageReader, messageWriter);
console.log("starting lang server")
serverCommon.start(connection)
```
--------------------------------------------------------------------------------
/xmlui/tests-e2e/scripting.spec.ts:
--------------------------------------------------------------------------------
```typescript
import { expect, test } from "../src/testing/fixtures";
import { initApp } from "../src/testing/themed-app-test-helpers";
// =================================================================
// The testes regarding overflow="scroll" are inside the stack tests
// =================================================================
test("Template literal", async ({ page }) => {
const entryPoint = '<Text testId="text0" value="see {`${1 + 2} kind`} horses"/>';
await initApp(page, {
entryPoint,
});
await expect(page.getByTestId("text0")).toHaveText("see 3 kind horses",);
});
```
--------------------------------------------------------------------------------
/blog/scripts/utils.js:
--------------------------------------------------------------------------------
```javascript
const XMLUI_STANDALONE_PATTERN = /xmlui-\d+\.\d+\.\d+\w*\.js/;
function sortByVersion(a, b) {
/** @type {string} */
const versionStrA = a.tag_name.split("@")[1];
/** @type {string} */
const versionStrB = b.tag_name.split("@")[1];
const [majorA, minorA, patchA] = versionStrA.split(".").map(Number);
const [majorB, minorB, patchB] = versionStrB.split(".").map(Number);
if (majorB !== majorA) {
return majorB - majorA;
}
if (minorB !== minorA) {
return minorB - minorA;
}
return patchB - patchA;
}
module.exports = {
XMLUI_STANDALONE_PATTERN,
sortByVersion
};
```
--------------------------------------------------------------------------------
/docs/scripts/utils.js:
--------------------------------------------------------------------------------
```javascript
const XMLUI_STANDALONE_PATTERN = /xmlui-\d+\.\d+\.\d+\w*\.js/;
function sortByVersion(a, b) {
/** @type {string} */
const versionStrA = a.tag_name.split("@")[1];
/** @type {string} */
const versionStrB = b.tag_name.split("@")[1];
const [majorA, minorA, patchA] = versionStrA.split(".").map(Number);
const [majorB, minorB, patchB] = versionStrB.split(".").map(Number);
if (majorB !== majorA) {
return majorB - majorA;
}
if (minorB !== minorA) {
return minorB - minorA;
}
return patchB - patchA;
}
module.exports = {
XMLUI_STANDALONE_PATTERN,
sortByVersion
};
```
--------------------------------------------------------------------------------
/docs/content/components/xmlui-pdf/Pdf.md:
--------------------------------------------------------------------------------
```markdown
# Pdf [#pdf]
The `Pdf` component provides a read-only preview of a pdf document's contents.
## Properties
### `src`
This property defines the source URL of the pdf document to display.
## Events
This component does not have any events.
## Exposed Methods
This component does not expose any methods.
## Styling
### Theme Variables
| Variable | Default Value (Light) | Default Value (Dark) |
| --- | --- | --- |
| [boxShadow](../styles-and-themes/common-units/#boxShadow)-page-Pdf | $boxShadow-md | $boxShadow-md |
| [gap](../styles-and-themes/common-units/#size)-pages-Pdf | $space-4 | $space-4 |
```
--------------------------------------------------------------------------------
/packages/xmlui-animations/src/index.tsx:
--------------------------------------------------------------------------------
```typescript
import { scaleAnimationRenderer } from "./ScaleAnimation";
import { fadeInAnimationRenderer } from "./FadeInAnimation";
import { slideInAnimationRenderer } from "./SlideInAnimation";
import { fadeOutAnimationRenderer } from "./FadeOutAnimation";
import { animationComponentRenderer } from "./Animation";
import { fadeAnimationRenderer } from "./FadeAnimation";
export default {
namespace: "XMLUIExtensions",
components: [
animationComponentRenderer,
fadeAnimationRenderer,
fadeInAnimationRenderer,
fadeOutAnimationRenderer,
slideInAnimationRenderer,
scaleAnimationRenderer]
};
```
--------------------------------------------------------------------------------
/xmlui/src/components/Stack/CHStack.md:
--------------------------------------------------------------------------------
```markdown
`CHStack` is a specialized, shorthand version for the regular `Stack` component that has a horizontal orientation with its contents centered.
```xmlui-pg copy display name="Example: CHStack"
<App>
<CHStack backgroundColor="cyan">
<Stack height="32px" width="32px" backgroundColor="red" />
<Stack height="32px" width="32px" backgroundColor="blue" />
<Stack height="32px" width="32px" backgroundColor="green" />
</CHStack>
</App>
```
>[!INFO]
> You cannot change the orientation of `CHStack` from horizontal to vertical by setting the `orientation` prop, as the engine ignores that setting.
```
--------------------------------------------------------------------------------
/xmlui/tsconfig.json:
--------------------------------------------------------------------------------
```json
{
"compilerOptions": {
"target": "es2015",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"strictNullChecks": false,
"noImplicitAny": false,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src", "tests", "index.ts"],
"exclude": ["ests"]
}
```
--------------------------------------------------------------------------------
/packages/xmlui-playground/src/playground/Preview.tsx:
--------------------------------------------------------------------------------
```typescript
import { useMemo } from "react";
import { usePlayground } from "../hooks/usePlayground";
import { NestedApp } from "xmlui";
export function Preview() {
const { appDescription, options } = usePlayground();
let components = useMemo(
() => appDescription.components.map((comp) => comp.component),
[appDescription.components],
);
return (
<NestedApp
app={appDescription.app}
activeTone={options.activeTone}
activeTheme={options.activeTheme}
api={appDescription.api}
components={components}
config={appDescription.config}
height={"100%"}
/>
);
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/Stack/CVStack.md:
--------------------------------------------------------------------------------
```markdown
`CVStack` is a specialized, shorthand version for the regular `Stack` component with a vertical orientation centered on its contents.
```xmlui-pg copy display name="Example: CVStack"
<App>
<CVStack width="33%" backgroundColor="cyan">
<Stack height="32px" width="32px" backgroundColor="red" />
<Stack height="32px" width="32px" backgroundColor="blue" />
<Stack height="32px" width="32px" backgroundColor="green" />
</CVStack>
</App>
```
>[!INFO]
> You cannot change the orientation of `CVStack` from vertical to horizontal by setting the `orientation` prop, as the engine ignores that setting.
```
--------------------------------------------------------------------------------
/xmlui/tests-e2e/push-to-array-regression.spec.ts:
--------------------------------------------------------------------------------
```typescript
import { expect, test } from "../src/testing/fixtures";
import { initApp } from "../src/testing/themed-app-test-helpers";
test("push to array", async ({ page }) => {
await initApp(page, {
entryPoint: `
<Fragment var.fruits="{['1', '2']}" >
<Button id="addSomething" onClick="fruits.push('something')">Add</Button>
<Text id="fruits_text">{fruits.join(',')}</Text>
</Fragment>
`,
});
await expect(page.getByTestId("fruits_text")).toHaveText("1,2");
await page.getByTestId("addSomething").click();
await expect(page.getByTestId("fruits_text")).toHaveText("1,2,something");
});
```
--------------------------------------------------------------------------------
/packages/xmlui-devtools/src/devtools/DevToolsNative.module.scss:
--------------------------------------------------------------------------------
```scss
@use "xmlui/themes.scss" as themes;
.xmluiEditor {
flex-grow: 1;
width: 100%;
max-width: 100%;
height: 100%;
min-height: 400px;
}
.editorContainer {
flex: 1 1 auto;
min-height: 0;
position: relative;
display: flex;
flex-direction: row;
height: 100%;
width: 100%;
.copyButton {
z-index: 9999;
position: absolute;
top: 16px;
right: 16px;
border: none;
padding: 4px;
border-radius: 5px;
cursor: pointer;
display: none;
align-items: center;
gap: 5px;
transition: opacity 0.2s;
}
&:hover {
.copyButton {
display: flex;
}
}
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/svg/database.svg:
--------------------------------------------------------------------------------
```
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 8C16.9706 8 21 6.65685 21 5C21 3.34315 16.9706 2 12 2C7.02944 2 3 3.34315 3 5C3 6.65685 7.02944 8 12 8Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M21 12C21 13.66 17 15 12 15C7 15 3 13.66 3 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3 5V19C3 20.66 7 22 12 22C17 22 21 20.66 21 19V5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
```
--------------------------------------------------------------------------------
/xmlui/src/components/Theme/Theme.module.scss:
--------------------------------------------------------------------------------
```scss
@use "../../components-core/theming/themes" as t;
@layer components {
.wrapper{
//it makes the wrapper element behave like an 'invisible' element, so does not affect layout
display: contents;
}
.root{
font-family: t.$fontFamily;
background-color: t.$backgroundColor;
font-size: t.$fontSize;
font-weight: t.$fontWeight;
color: t.$textColor-primary;
direction: t.$direction;
font-feature-settings: t.$font-feature-settings;
--stack-gap-default: #{t.$space-4};
}
.baseRootComponent {
width: 100%;
position: relative;
height: inherit;
overflow: auto;
}
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/SortAscendingIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import type { IconBaseProps } from "./IconNative";
export const SortAscendingIcon = (props: IconBaseProps) => {
return (
<svg
width="100%"
height="100%"
viewBox="0 0 24 24"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
fillRule="evenodd"
clipRule="evenodd"
strokeLinejoin="round"
strokeMiterlimit="2"
{...props}
>
<rect id="sortasc" x="0" y="0" width="24" height="24" fill="none" />
<path d="M12,2l7,8l-14,-0l7,-8Z" fill="currentColor" />
<path d="M12,22l-7,-8l14,-0l-7,8Z" fill="currentColor" fillOpacity={0.5} />
</svg>
)
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/SortDescendingIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import type { IconBaseProps } from "./IconNative";
export const SortDescendingIcon = (props: IconBaseProps) => {
return (
<svg
width="100%"
height="100%"
viewBox="0 0 24 24"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
fillRule="evenodd"
clipRule="evenodd"
strokeLinejoin="round"
strokeMiterlimit="2"
{...props}
>
<rect id="sortasc" x="0" y="0" width="24" height="24" fill="none" />
<path d="M12,2l7,8l-14,-0l7,-8Z" fill="currentColor" fillOpacity={0.5} />
<path d="M12,22l-7,-8l14,-0l-7,8Z" fill="currentColor" />
</svg>
)
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/NoSortIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import type { IconBaseProps } from "./IconNative";
export const NoSortIcon = (props: IconBaseProps) => {
return (
<svg
width="100%"
height="100%"
viewBox="0 0 24 24"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
fillRule="evenodd"
clipRule="evenodd"
strokeLinejoin="round"
strokeMiterlimit="2"
{...props}
>
<rect id="sortasc" x="0" y="0" width="24" height="24" fill="none" />
<path d="M12,2l7,8l-14,-0l7,-8Z" fill="currentColor" fillOpacity={0.5} />
<path d="M12,22l-7,-8l14,-0l-7,8Z" fill="currentColor" fillOpacity={0.5} />
</svg>
)
}
```
--------------------------------------------------------------------------------
/packages/xmlui-playground/src/playground/Tooltip.tsx:
--------------------------------------------------------------------------------
```typescript
import { Provider, Root, Portal, Trigger, Content } from "@radix-ui/react-tooltip";
import { type ReactNode } from "react";
import { useTheme } from "xmlui";
import styles from "./Tooltip.module.scss";
export const Tooltip = ({ children, label }: { children: ReactNode; label: string }) => {
const { root } = useTheme();
return (
<Provider>
<Root>
<Trigger asChild>
<div>{children}</div>
</Trigger>
<Portal container={root}>
<Content className={styles.TooltipContent} sideOffset={5}>
{label}
</Content>
</Portal>
</Root>
</Provider>
);
};
```
--------------------------------------------------------------------------------
/docs/content/components/VSplitter.md:
--------------------------------------------------------------------------------
```markdown
# VSplitter [#vsplitter]
This component is inherited from [Splitter](/components/Splitter)
See also: [HSplitter](/components/HSplitter)
`VSplitter` is a specialized, shorthand version for the regular `Splitter` component with a vertical orientation.
```xmlui-pg copy display name="Example: VSplitter"
<App>
<VSplitter height="200px">
<Stack backgroundColor="lightblue" height="100%" />
<Stack backgroundColor="darksalmon" height="100%" />
</VSplitter>
</App>
```
>[!INFO]
> You cannot change the orientation of `VSplitter` from vertical to horizontal by setting the `orientation` prop, as the engine ignores that setting.
```
--------------------------------------------------------------------------------
/xmlui/src/components/NestedApp/Tooltip.tsx:
--------------------------------------------------------------------------------
```typescript
import * as RadixTooltip from '@radix-ui/react-tooltip';
import styles from './Tooltip.module.scss';
type TooltipProps = {
trigger: React.ReactNode;
label: string;
};
export const Tooltip = ({trigger, label}: TooltipProps) => {
return (
<RadixTooltip.Provider>
<RadixTooltip.Root>
<RadixTooltip.Trigger asChild>{trigger}</RadixTooltip.Trigger>
<RadixTooltip.Portal>
<RadixTooltip.Content side="bottom" align="start" className={styles.TooltipContent}>
{label}
</RadixTooltip.Content>
</RadixTooltip.Portal>
</RadixTooltip.Root>
</RadixTooltip.Provider>
)
}
```
--------------------------------------------------------------------------------
/docs/content/components/HSplitter.md:
--------------------------------------------------------------------------------
```markdown
# HSplitter [#hsplitter]
This component is inherited from [Splitter](/components/Splitter)
See also: [VSplitter](/components/VSplitter)
`HSplitter` is a specialized, shorthand version for the regular `Splitter` component with a vertical orientation.
```xmlui-pg copy display name="Example: HSplitter"
<App >
<HSplitter height="200px">
<Stack backgroundColor="lightblue" height="100%" />
<Stack backgroundColor="darksalmon" height="100%" />
</HSplitter>
</App>
```
>[!INFO]
> You cannot change the orientation of `HSplitter` from vertical to horizontal by setting the `orientation` prop, as the engine ignores that setting.
```
--------------------------------------------------------------------------------
/xmlui/src/abstractions/scripting/LoopScope.ts:
--------------------------------------------------------------------------------
```typescript
// Represents the scope of a loop
export type LoopScope = {
// Indicates that the current scope is a switch statement
isSwitch?: boolean;
// The label of the action to go to when a "continue" statement is executed in the loop
continueLabel: number;
// The label of the action to go to when a "break" statement is executed in the loop
breakLabel: number;
// The depth of continue block scopes at the start of the loop
continueBlockDepth: number;
// The depth of break block scopes at the start of the loop
breakBlockDepth: number;
// The depth of try blocks at the start of the loop
tryBlockDepth: number;
};
```
--------------------------------------------------------------------------------
/xmlui/src/vite-env.d.ts:
--------------------------------------------------------------------------------
```typescript
/// <reference types="vite/client" />
/// <reference types="vite-plugin-svgr/client" />
// Type declarations for XMLUI files
declare module "*.xmlui" {
interface XmluiModule {
component: any;
src: string;
file: string;
}
const content: XmluiModule;
export default content;
}
declare module "*.xmlui.xs" {
interface XmluiCodeBehindModule {
[key: string]: any;
src: string;
}
const content: XmluiCodeBehindModule;
export default content;
}
declare module "*.xs" {
interface XmluiScriptModule {
[key: string]: any;
src: string;
}
const content: XmluiScriptModule;
export default content;
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/Select/SelectContext.tsx:
--------------------------------------------------------------------------------
```typescript
import type { ReactNode} from "react";
import { createContext, useContext } from "react";
import type { SingleValueType, ValueType } from "./SelectNative";
import type { Option } from "../abstractions";
type SelectContextValue = {
multiSelect?: boolean;
value: ValueType | null;
onChange?: (selectedValue: SingleValueType) => void;
setOpen: (open: boolean) => void;
options: Set<Option>;
optionRenderer: (option: Option, selectedValue: SingleValueType, inTrigger: boolean) => ReactNode;
};
export const SelectContext = createContext<SelectContextValue>(null);
export function useSelect() {
return useContext(SelectContext);
}
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/rendering/InvalidComponent.module.scss:
--------------------------------------------------------------------------------
```scss
@use "../theming/themes" as themes;
.errorOverlay {
background-color: rgba(255, 162, 162, 0.8);
inset: 0;
border-radius: 10px;
padding: 8px;
min-width: 200px;
min-height: fit-content;
}
.title {
span {
background-color: themes.$color-danger-500;
color: white;
font-weight: themes.$fontWeight-normal;
border-radius: 4px;
padding-left: 4px;
padding-right: 8px;
}
}
.errorItems {
list-style: disc;
}
.errorItem {
background-color: themes.$color-danger-500;
font-weight: themes.$fontWeight-bold;
border-radius: 4px;
padding-left: 8px;
padding-right: 8px;
margin-left: 18px;
color: white;
}
```
--------------------------------------------------------------------------------
/xmlui/src/testing/infrastructure/TestBed.tsx:
--------------------------------------------------------------------------------
```typescript
// import { StandaloneApp } from "";
// import type { StandaloneAppDescription } from "xmlui";
import StandaloneApp from "../../../src/components-core/StandaloneApp";
import type { StandaloneAppDescription } from "../../../src/components-core/abstractions/standalone";
import "xmlui/index.scss";
declare global {
interface Window {
TEST_ENV: StandaloneAppDescription | undefined;
}
}
function TestBed() {
if (!window.TEST_ENV || !window.TEST_ENV) {
return <div>Missing test env</div>;
}
return <StandaloneApp appDef={window.TEST_ENV} decorateComponentsWithTestId={true} waitForApiInterceptor={true}/>;
}
export default TestBed;
```
--------------------------------------------------------------------------------
/xmlui/dev-docs/index.md:
--------------------------------------------------------------------------------
```markdown
# XMLUI Developer Guide
This article helps you understand the implementation details of xmlui so that you can contribute to developing it. We suggest going through these documentation sections, following their order:
- [XMLUI Rendering Fundamentals](./rendering-fundamentals.md)
- [React Fundamentals](./react-fundamentals.md)
- [Standalone Apps](./standalone-apps.md)
- [`AppRoot`](./AppRoot.md)
- ...
- [Component Rendering](./component-rendering.md)
- ...
- [Helper Components](./helper-components)
- [Accessibility](./accessibility.md)
- [Component Review Checklist](./component-review-checklist.md)
- [Glossary of Terms](./glossary.md/#some-other)
```
--------------------------------------------------------------------------------
/xmlui/scripts/generate-docs/input-handler.mjs:
--------------------------------------------------------------------------------
```
import { readFile } from "fs/promises";
import { ErrorWithSeverity, LOGGER_LEVELS } from "./logger.mjs";
import { ERROR_MESSAGES } from "./constants.mjs";
import { configManager } from "./configuration-management.mjs";
// Backward compatibility wrapper - delegates to enhanced configuration manager
export default async function loadConfig(configPath) {
return await configManager.loadConfig(configPath, null, {
transform: (rawConfig) => {
const { excludeComponentStatuses, ...data } = rawConfig;
return {
excludeComponentStatuses: excludeComponentStatuses?.map(status => status.toLowerCase()) || [],
...data,
};
}
});
}
```
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
```json
{
"editor.tabSize": 2,
// "prettier.configPath": ".prettierrc.js",
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[mdx]": {
"editor.defaultFormatter": "unifiedjs.vscode-mdx"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.tokenColorCustomizations": {
"[Material Theme Darker High Contrast]": {
"comments": "#2aa034"
}
}
}
```
--------------------------------------------------------------------------------
/packages/xmlui-animations/tsconfig.json:
--------------------------------------------------------------------------------
```json
{
"compilerOptions": {
"target": "es2015",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"types": ["vite/client", "vite-plugin-svgr/client", "node"],
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"demo",
"src",
"index.ts"
],
"exclude": [
"demo/**/*.xmlui.xs"
]
}
```
--------------------------------------------------------------------------------
/packages/xmlui-devtools/tsconfig.json:
--------------------------------------------------------------------------------
```json
{
"compilerOptions": {
"target": "es2015",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"types": ["vite/client", "vite-plugin-svgr/client", "node"],
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"demo",
"src",
"index.ts"
],
"exclude": [
"demo/**/*.xmlui.xs"
]
}
```
--------------------------------------------------------------------------------
/packages/xmlui-hello-world/tsconfig.json:
--------------------------------------------------------------------------------
```json
{
"compilerOptions": {
"target": "es2015",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"types": ["vite/client", "vite-plugin-svgr/client", "node"],
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"demo",
"src",
"index.ts"
],
"exclude": [
"demo/**/*.xmlui.xs"
]
}
```
--------------------------------------------------------------------------------
/packages/xmlui-os-frames/tsconfig.json:
--------------------------------------------------------------------------------
```json
{
"compilerOptions": {
"target": "es2015",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"types": ["vite/client", "vite-plugin-svgr/client", "node"],
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"demo",
"src",
"index.ts"
],
"exclude": [
"demo/**/*.xmlui.xs"
]
}
```
--------------------------------------------------------------------------------
/packages/xmlui-pdf/tsconfig.json:
--------------------------------------------------------------------------------
```json
{
"compilerOptions": {
"target": "es2015",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"types": ["vite/client", "vite-plugin-svgr/client", "node"],
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"demo",
"src",
"index.ts"
],
"exclude": [
"demo/**/*.xmlui.xs"
]
}
```
--------------------------------------------------------------------------------
/packages/xmlui-playground/tsconfig.json:
--------------------------------------------------------------------------------
```json
{
"compilerOptions": {
"target": "es2015",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"types": ["vite/client", "vite-plugin-svgr/client", "node"],
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"demo",
"src",
"index.ts"
],
"exclude": [
"demo/**/*.xmlui.xs"
]
}
```