This is page 1 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
│ ├── 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
--------------------------------------------------------------------------------
/blog/.gitkeep:
--------------------------------------------------------------------------------
```
```
--------------------------------------------------------------------------------
/tools/vscode/.gitignore:
--------------------------------------------------------------------------------
```
out
node_modules
client/server
.vscode-test
*.vsix
dist/
```
--------------------------------------------------------------------------------
/.prettierrc.js:
--------------------------------------------------------------------------------
```javascript
module.exports = {
printWidth: 100,
singleQuote: false,
semi: true
};
```
--------------------------------------------------------------------------------
/tools/vscode/.vscodeignore:
--------------------------------------------------------------------------------
```
.vscode/**
**/*.ts
**/*.map
.gitignore
**/tsconfig.*
contributing.md
node_modules/**
esbuild.*
eslint.config.*
.turbo
```
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
```
node_modules
test-results
.vs
.idea
.windsurf
__tmp
__setup
__deploy
.DS_Store
.turbo
test-results
coverage
.next
xmlui-optimized-output
xmlui-temp-build
docs/scripts/component-metadata.json
```
--------------------------------------------------------------------------------
/docs/.gitignore:
--------------------------------------------------------------------------------
```
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
ui-optimized.zip
```
--------------------------------------------------------------------------------
/tools/create-app/.gitignore:
--------------------------------------------------------------------------------
```
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
.env.production
```
--------------------------------------------------------------------------------
/blog/.gitignore:
--------------------------------------------------------------------------------
```
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
ui-optimized.zip
# Generated files
public/feed.rss
public/blog-search-data.json
```
--------------------------------------------------------------------------------
/packages/xmlui-animations/.gitignore:
--------------------------------------------------------------------------------
```
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
storybook-static
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
scripts/generate-docs/metadata.json
/test-results/
/playwright-report/
/blob-report/
/playwright/.cache/
```
--------------------------------------------------------------------------------
/packages/xmlui-devtools/.gitignore:
--------------------------------------------------------------------------------
```
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
storybook-static
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
scripts/generate-docs/metadata.json
/test-results/
/playwright-report/
/blob-report/
/playwright/.cache/
```
--------------------------------------------------------------------------------
/packages/xmlui-hello-world/.gitignore:
--------------------------------------------------------------------------------
```
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
storybook-static
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
scripts/generate-docs/metadata.json
/test-results/
/playwright-report/
/blob-report/
/playwright/.cache/
```
--------------------------------------------------------------------------------
/packages/xmlui-os-frames/.gitignore:
--------------------------------------------------------------------------------
```
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
storybook-static
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
scripts/generate-docs/metadata.json
/test-results/
/playwright-report/
/blob-report/
/playwright/.cache/
```
--------------------------------------------------------------------------------
/packages/xmlui-pdf/.gitignore:
--------------------------------------------------------------------------------
```
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
storybook-static
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
scripts/generate-docs/metadata.json
/test-results/
/playwright-report/
/blob-report/
/playwright/.cache/
```
--------------------------------------------------------------------------------
/packages/xmlui-playground/.gitignore:
--------------------------------------------------------------------------------
```
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
storybook-static
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
scripts/generate-docs/metadata.json
/test-results/
/playwright-report/
/blob-report/
/playwright/.cache/
```
--------------------------------------------------------------------------------
/packages/xmlui-search/.gitignore:
--------------------------------------------------------------------------------
```
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
storybook-static
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
scripts/generate-docs/metadata.json
/test-results/
/playwright-report/
/blob-report/
/playwright/.cache/
```
--------------------------------------------------------------------------------
/packages/xmlui-spreadsheet/.gitignore:
--------------------------------------------------------------------------------
```
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
storybook-static
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
scripts/generate-docs/metadata.json
/test-results/
/playwright-report/
/blob-report/
/playwright/.cache/
```
--------------------------------------------------------------------------------
/packages/xmlui-website-blocks/.gitignore:
--------------------------------------------------------------------------------
```
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
storybook-static
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
scripts/generate-docs/metadata.json
/test-results/
/playwright-report/
/blob-report/
/playwright/.cache/
```
--------------------------------------------------------------------------------
/xmlui/.gitignore:
--------------------------------------------------------------------------------
```
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
storybook-static
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
scripts/generate-docs/**/*metadata.json
/test-results/
/playwright-report/
/blob-report/
/playwright/.cache/
```
--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
```
/**
* This is intended to be a basic starting point for linting in your app.
* It relies on recommended configs out of the box for simplicity, but you can
* and should modify this configuration to best suit your team's needs.
*/
/** @type {import('eslint').Linter.Config} */
module.exports = {
root: true,
parserOptions: {
projectService: true,
tsconfigRootDir: __dirname,
// sourceType: "module",
// ecmaFeatures: {
// jsx: true,
// },
},
env: {
browser: true,
commonjs: true,
es6: true,
},
ignorePatterns: ["!**/.server", "!**/.client"],
// Base config
overrides: [
// React
{
files: ["**/*.{js,jsx,ts,tsx}"],
plugins: ["react"],
extends: [
"plugin:react/recommended",
"plugin:react/jsx-runtime",
"plugin:react-hooks/recommended",
],
settings: {
react: {
version: "detect",
},
formComponents: ["Form"],
linkComponents: [
{ name: "Link", linkAttribute: "to" },
{ name: "NavLink", linkAttribute: "to" },
],
"import/resolver": {
typescript: {},
},
},
},
// Typescript
{
files: ["**/*.{ts,tsx}"],
plugins: ["@typescript-eslint"],
parser: "@typescript-eslint/parser",
settings: {
"import/internal-regex": "^~/",
"import/resolver": {
node: {
extensions: [".ts", ".tsx"],
},
typescript: {
alwaysTryTypes: true,
},
},
},
extends: ["plugin:@typescript-eslint/recommended"],
rules: {
"@typescript-eslint/consistent-type-imports": "error",
"@typescript-eslint/no-floating-promises": "error",
"@typescript-eslint/no-unused-vars": "off",
"@typescript-eslint/ban-ts-comment": "off",
"@typescript-eslint/no-inferrable-types": "off",
"@typescript-eslint/no-empty-interface": "off",
"@typescript-eslint/no-explicit-any": "off",
"require-await": "error",
"react/prop-types": "off",
"react/display-name": "off",
"prefer-const": "off",
},
},
// Node
{
files: [".eslintrc.cjs"],
env: {
node: true,
},
},
],
};
```
--------------------------------------------------------------------------------
/tools/vscode/README.md:
--------------------------------------------------------------------------------
```markdown
# XMLUI Tools for Visual Studio Code
This extension adds tools for working with [XMLUI](https://docs.xmlui.org) files.
- 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
## Features
```
--------------------------------------------------------------------------------
/xmlui/src/components/ResponsiveBar/README.md:
--------------------------------------------------------------------------------
```markdown
# ResponsiveBar Component
The ResponsiveBar component has been successfully created and tested! Here's what it does:
## Features
1. **Automatic overflow management**: When child components don't fit in the available width, they're automatically moved to a dropdown menu
2. **Real-time responsiveness**: The component monitors container width changes and adjusts the layout accordingly
3. **Zero configuration**: Works out of the box with sensible defaults
4. **Customizable overflow icon**: You can specify a custom icon for the dropdown trigger
## Usage Example
```xmlui
<ResponsiveBar>
<Button label="File" />
<Button label="Edit" />
<Button label="View" />
<Button label="Window" />
<Button label="Help" />
</ResponsiveBar>
```
When the container is narrow, the last buttons (Window, Help) will be moved to a dropdown menu accessible via a "..." icon.
## Implementation Strategy
The component uses a two-phase rendering approach:
1. **Measurement phase**: All children are rendered invisibly to measure their widths
2. **Display phase**: Based on measurements, children are split between visible area and overflow dropdown
## Files Created
- `ResponsiveBar.tsx` - Main component with metadata and renderer
- `ResponsiveBarNative.tsx` - Native React implementation with size observation
- `ResponsiveBar.module.scss` - Styling with theme variables
- `ResponsiveBar.md` - Documentation with examples
- `ResponsiveBar.spec.ts` - End-to-end tests
## Integration
The component has been registered in the ComponentProvider and is ready to use in XMLUI applications!
## Testing
All tests pass:
- ✅ Renders children in horizontal layout
- ✅ Moves overflowing items to dropdown when container is too narrow
- ✅ Responds to container resize
```
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
```markdown
# XMLUI
**XMLUI** is a framework for building user interfaces declaratively, with XML markup and flexible theming.
**Easy to create**. Build on the web platform with little or no knowledge of React or CSS.
**Clean and modern**. Enjoy themes that look great out of the box and are easy to modify. Create experiences that meet expectations for modern web apps.
**Connected**. Read and write APIs with little or no scripting.
**Modular**. Use a comprehensive suite of [components](https://docs.xmlui.org/components/_overview) that you can extend with — again! — little or no scripting.
**Easy to deploy**. Just drop a handful of files onto a static webserver.
## See it in action
```xml
<App>
<Select id="lines" initialValue="bakerloo">
<Items data="https://api.tfl.gov.uk/line/mode/tube/status">
<Option value="{$item.id}" label="{$item.name}" />
</Items>
</Select>
<DataSource
id="tubeStations"
url="https://api.tfl.gov.uk/Line/{lines.value}/Route/Sequence/inbound"
resultSelector="stations"/>
<Table data="{tubeStations}" height="280px">
<Column bindTo="name" />
<Column bindTo="modes" />
</Table>
</App>
```
## Getting started
The fastest way to get started with XMLUI is to [download our starter kit](https://github.com/xmlui-org/xmlui-invoice/releases), which includes the XMLUI engine and `XMLUI Invoice` - a complete business application that demonstrates key features and common patterns.
### What's included
XMLUI Invoice: A complete business application with client and product management, invoice creation and tracking, search, and charts.
XMLUI engine: The core framework file.
XMLUI test server: A simple server to run the app.
### Quick start
Extract the files to a working folder and run the start script.
### See also
Visit [demo.xmlui.org](https://demo.xmlui.org) to explore a gallery of components.
Visit [docs.xmlui.org](https://docs.xmlui.org) for an introduction, a tutorial, and full documentation. The documentation site is itself an XMLUI app!
<a href="https://docs.xmlui.org"><img width="1285" alt="image" src="https://github.com/user-attachments/assets/9a54ae74-4f45-4079-a5d4-142e23fb4134" /></a>
## Contributing
We welcome contributions! If you have ideas for new features, suggestions, or find a bug, please open an issue. Pull requests are also encouraged. (Please read our [Contribution Guidelines](./CONTRIBUTING.md) before contributing.)
## Feature Requests
Have a feature request? Here's how to submit it:
If your feature request is not already listed in the [Issues](https://github.com/xmlui-org/xmlui/issues) section, please follow these steps:
1. Click on the link below to open the feature request template.
2. Fill out the template with as much detail as possible.
3. Submit the issue.
[New feature request](https://github.com/xmlui-org/xmlui/issues/new?template=feature_request.md)
## Bug Reports
Have you found a bug? Here's how to report it:
1. Click on the link below to open the bug report template.
2. Fill out the template with as much detail as possible.
3. Submit the issue.
[New bug report](https://github.com/xmlui-org/xmlui/issues/new?template=bug_report.md)
## License
XMLUI is licensed under the MIT License. See the [LICENSE](./LICENSE) file for more information.
## Attribution
XMLUI was stared as an internal project at [/n software](https://nsoftware.com) which is the primary sponsor and source of funding for this open source project.
Our virtualized components and data management mechanisms would not be as simple, performant, and powerful without the help of a few [TanStack](https://github.com/TanStack) projects, such as [query](https://github.com/TanStack/query), [table](https://github.com/TanStack/table), and others. We appreciate their outstanding work!
We based some of our essential components on [Radix UI](https://www.radix-ui.com/) components and involved some of the architectural approaches they used in their project. Thanks to all project contributors for their excellent work.
We loved the simple and beautiful UI style used by the [Tabler.io](https://tabler.io/) project; it illuminated our component design and theming. Thanks to [Paweł Kuna](https://github.com/codecalm) for this inspiration.
```
--------------------------------------------------------------------------------
/tools/vscode/LICENSE.md:
--------------------------------------------------------------------------------
```markdown
The MIT License (MIT)
Copyright (c) 2024 /n software
Permission is hereby granted, free f charge, to any person obtaining a opy
of this software and associated ocumentation files (the "Software"), o deal
in the Software without restriction, ncluding without limitation the ights
to use, copy, modify, merge, ublish, distribute, sublicense, nd/or sell
copies of the Software, and to ermit persons to whom the Software is
furnished to do so, subject to the ollowing conditions:
The above copyright notice and this ermission notice shall be included n all
copies or substantial portions of he Software.
THE SOFTWARE IS PROVIDED "AS IS", ITHOUT WARRANTY OF ANY KIND, EXPRESS R
IMPLIED, INCLUDING BUT NOT LIMITED O THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND ONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE IABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF ONTRACT, TORT OR OTHERWISE, ARISING ROM,
OUT OF OR IN CONNECTION WITH THE OFTWARE OR THE USE OR OTHER DEALINGS N THE
SOFTWARE.
```
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
```markdown
# Contributing to xmlui
Welcome to **xmlui**! We're thrilled to have you contribute to our project. This document outlines the guidelines for contributing, ensuring a smooth and collaborative experience for everyone.
**xmlui** is a modern web UI framework designed to empower desktop developers to effortlessly create web applications without requiring deep knowledge of HTML, CSS, or JavaScript.
Your contributions are valuable and help us improve and grow the project.
## Code of Conduct
We expect all contributors to act respectfully and professionally, maintaining a positive and inclusive environment for everyone in our community.
## Getting Started
Before you begin contributing, please ensure you have:
1. **Node.js** (version 16 or higher) installed on your system
2. **npm** or **yarn** package manager
3. A **GitHub account** for submitting pull requests
4. **Git** installed and configured
### Setting Up the Development Environment
1. **Fork the Repository**: Fork the xmlui repository to your GitHub account
2. **Clone Your Fork**:
```bash
git clone https://github.com/your-username/xmlui.git
cd xmlui
```
3. **Install Dependencies**:
```bash
npm install
# or
yarn install
```
## How to Contribute
There are several ways you can contribute to **xmlui**:
- **Reporting Bugs**: If you find a bug, please report it using our [issue tracker](https://github.com/xmlui-com/xmlui/issues/new?template=bug_report.md)
- **Suggesting Features**: Have a feature request? Open a [feature request issue](https://github.com/xmlui-com/xmlui/issues/new?template=feature_request.md)
- **Writing Code**: If you'd like to contribute code, follow the guidelines below
- **Improving Documentation**: Help us improve our documentation by fixing typos, adding missing reference information, creating tutorials, and developing how-to sections
### Reporting Bugs
When reporting bugs, please follow these steps:
1. **Check Existing Issues**: Before reporting, search existing issues to avoid duplicates
2. **Use the Bug Report Template**: Open a new issue using the bug report template
3. **Provide Detailed Information**: Include:
- Steps to reproduce the issue
- Expected vs. actual behavior
- Browser and OS information
- Screenshots or code snippets when applicable
- Error messages or console logs
### Suggesting Features
To suggest new features:
1. **Search Existing Requests**: Check if your suggestion has already been proposed
2. **Use the Feature Request Template**: Open a new feature request issue
3. **Provide Clear Details**: Include:
- A clear description of the proposed feature
- Use cases and benefits
- Potential implementation considerations
- Examples or mockups if applicable
### Writing Code
To contribute code to xmlui:
1. **Fork the Repository**: Fork the repository to your GitHub account
2. **Clone Your Fork**: Clone your fork locally
3. **Create a Feature Branch**: Create a new branch for your work:
```bash
git checkout -b feature/your-feature-name
# or for bug fixes:
git checkout -b bugfix/issue-description
```
4. **Make Your Changes**: Implement your feature or bug fix
5. **Follow Code Standards**: Ensure your code follows our coding standards (see below)
6. **Write Tests**: Add or update tests for your changes
7. **Test Your Changes**: Run the test suite to ensure everything works
8. **Commit Your Changes**: Use clear and descriptive commit messages
9. **Push to Your Fork**: Push your branch to your forked repository
10. **Open a Pull Request**: Create a pull request from your branch to the main repository
#### Code Standards
- Follow TypeScript/JavaScript best practices
- Use meaningful variable and function names
- Add JSDoc comments for public APIs
- Maintain consistent indentation (2 spaces)
- Follow the existing code style in the project
- Ensure your code is properly formatted (use Prettier if configured)
### Improving Documentation
You can help improve our documentation in the following ways:
- **Fixing Typos and Grammar**: Correct spelling and grammatical errors
- **Adding Missing Reference Information**: Complete API documentation and add missing details
- **Creating Tutorials**: Develop step-by-step tutorials for common use cases
- **Writing How-To Guides**: Create guides for specific tasks and workflows
- **Improving Examples**: Add or enhance code examples and demonstrations
To contribute to documentation:
1. **Identify Areas for Improvement**: Look for outdated, incomplete, or unclear documentation
2. **Make Your Changes**: Edit the relevant documentation files (usually `.md` files)
3. **Test Your Changes**: Preview your changes to ensure proper formatting
4. **Submit a Pull Request**: Follow the same process as code contributions
## Development Workflow
### Project Structure
Understanding the project structure will help you navigate and contribute effectively:
- `/src/` - Main source code
- `/src/components/` - UI components
- `/tests/` - Test files
- `/docs/` - Documentation files
- `/tools/` - Development tools and utilities
- `/examples/` - Example applications
### Branching Strategy
We use a Git flow-inspired branching strategy:
- **main**: The main branch contains stable, production-ready code and is protected
- **feature/[feature-name]**: For developing new features
- **bugfix/[issue-description]**: For fixing bugs
- **docs/[doc-update]**: For documentation updates
- **refactor/[refactor-description]**: For code refactoring
### Running Tests
Before submitting any changes, ensure all tests pass:
```bash
# Run all tests
npm test
# or
yarn test
# Run tests in watch mode during development
npm run test:watch
# or
yarn test:watch
# Run tests with coverage
npm run test:coverage
# or
yarn test:coverage
```
### Code Reviews
All submissions require code review before merging:
1. **Automated Checks**: Your pull request will run automated tests and linting
2. **Peer Review**: A project maintainer will review your code
3. **Feedback**: Address any feedback or requested changes
4. **Approval**: Once approved, your changes will be merged
### Testing Guidelines
When contributing code, please ensure:
- **Write Tests**: Add tests for new functionality
- **Update Existing Tests**: Modify tests when changing existing functionality
- **Test Coverage**: Maintain or improve test coverage
- **Test Types**:
- Unit tests for individual functions/components
- Integration tests for component interactions
- End-to-end tests for complete user workflows
### Commit Message Guidelines
Write clear and descriptive commit messages following conventional commit format:
- `feat: add new DatePicker component with min/max value support`
- `fix: resolve memory leak in component cleanup`
- `docs: update API documentation for Button component`
- `refactor: optimize rendering performance in ListView`
- `test: add unit tests for form validation`
- `build: update webpack configuration for production builds`
- `chore: update dependencies to latest versions`
**Commit Message Structure:**
```
<type>(<scope>): <description>
[optional body]
[optional footer]
```
**Types:**
- `feat`: A new feature
- `fix`: A bug fix
- `docs`: Documentation only changes
- `refactor`: A code change that improves code quality, structure, or readability without fixing bugs or adding features
- `test`: Adding missing tests or correcting existing tests
- `build`: Changes that affect the build system or external dependencies
- `ci`: Changes to CI configuration files and scripts
- `chore`: Other changes that don't modify src or test files
## Pull Request Guidelines
When submitting a pull request:
1. **Use a Clear Title**: Describe what your PR does in the title
2. **Fill Out the Template**: Complete the pull request template
3. **Link Related Issues**: Reference any related issues using `#issue-number`
4. **Describe Your Changes**: Explain what you changed and why
5. **Add Screenshots**: For UI changes, include before/after screenshots
6. **Keep It Focused**: One feature or fix per pull request
7. **Update Documentation**: Update relevant documentation for your changes
## Community and Support
### Getting Help
If you need help while contributing:
- **GitHub Discussions**: Use GitHub Discussions for questions and community support
- **Issue Tracker**: Report bugs and request features through GitHub Issues
- **Documentation**: Check our documentation for guides and API references
### Communication Guidelines
- Be respectful and inclusive in all interactions
- Provide constructive feedback when reviewing code
- Ask questions if something is unclear
- Help others when you can
- Follow our Code of Conduct at all times
## Recognition
We value all contributions to xmlui! Contributors will be:
- Listed in our `CONTRIBUTORS.md` file
- Mentioned in release notes for significant contributions
- Eligible for special contributor badges and recognition
## Licensing
By contributing to **xmlui**, you agree that your contributions will be licensed under the [MIT License](https://github.com/xmlui-com/xmlui/blob/main/LICENSE).
## Questions?
If you have any questions about contributing, please:
- Check our [FAQ](https://github.com/xmlui-com/xmlui/wiki/FAQ)
- Open a [discussion](https://github.com/xmlui-com/xmlui/discussions)
- Reach out to the maintainers
## Acknowledgements
Thank you for considering contributing to **xmlui**! Your contributions are greatly appreciated and make a significant impact on the project's success. Every contribution, no matter how small, helps make xmlui better for everyone.
```
--------------------------------------------------------------------------------
/docs/ComponentRefLinks.txt:
--------------------------------------------------------------------------------
```
```
--------------------------------------------------------------------------------
/packages/xmlui-hello-world/meta/componentsMetadata.ts:
--------------------------------------------------------------------------------
```typescript
```
--------------------------------------------------------------------------------
/packages/xmlui-playground/meta/componentsMetadata.ts:
--------------------------------------------------------------------------------
```typescript
```
--------------------------------------------------------------------------------
/tools/vscode/build.sh:
--------------------------------------------------------------------------------
```bash
```
--------------------------------------------------------------------------------
/tools/vscode/formatter-docs.md:
--------------------------------------------------------------------------------
```markdown
```
--------------------------------------------------------------------------------
/tools/vscode/generate-test-sample.sh:
--------------------------------------------------------------------------------
```bash
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/svg/eye-dark.svg:
--------------------------------------------------------------------------------
```
```
--------------------------------------------------------------------------------
/docs/public/pages/test.md:
--------------------------------------------------------------------------------
```markdown
# Test
```
--------------------------------------------------------------------------------
/xmlui/dev-docs/loaders.md:
--------------------------------------------------------------------------------
```markdown
# Loaders
_TBD_
```
--------------------------------------------------------------------------------
/xmlui/dev-docs/actions.md:
--------------------------------------------------------------------------------
```markdown
# Actions
_TBD_
```
--------------------------------------------------------------------------------
/xmlui/dev-docs/component-apis.md:
--------------------------------------------------------------------------------
```markdown
# Component APIs
```
--------------------------------------------------------------------------------
/blog/public/blog/older-post.md:
--------------------------------------------------------------------------------
```markdown
This is an older post.
```
--------------------------------------------------------------------------------
/blog/public/blog/newest-post.md:
--------------------------------------------------------------------------------
```markdown
This is the newest post.
```
--------------------------------------------------------------------------------
/xmlui/src/components/Footer/Footer.md:
--------------------------------------------------------------------------------
```markdown
%-DESC-START
%-DESC-END
```
--------------------------------------------------------------------------------
/xmlui/dev-docs/expression-evaluation.md:
--------------------------------------------------------------------------------
```markdown
# Expression Evaluation
_TBD_
```
--------------------------------------------------------------------------------
/xmlui/dev-docs/reusable-components.md:
--------------------------------------------------------------------------------
```markdown
# Resusable Components
_TBD_
```
--------------------------------------------------------------------------------
/xmlui/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
```typescript
/// <reference types="react-scripts" />
```
--------------------------------------------------------------------------------
/docs/content/components/xmlui-pdf/_meta.json:
--------------------------------------------------------------------------------
```json
{
"_overview": "Extension Overview",
"Pdf": "Pdf"
}
```
--------------------------------------------------------------------------------
/docs/public/pages/xmlui-pdf/_meta.json:
--------------------------------------------------------------------------------
```json
{
"_overview": "Extension Overview",
"Pdf": "Pdf"
}
```
--------------------------------------------------------------------------------
/docs/content/_meta.json:
--------------------------------------------------------------------------------
```json
{
"components": "Components",
"extensions": "Extensions"
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/ArrowLeft.module.scss:
--------------------------------------------------------------------------------
```scss
@layer components {
.arrowLeft {
fill: currentColor;
}
}
```
--------------------------------------------------------------------------------
/docs/content/components/xmlui-website-blocks/_overview.md:
--------------------------------------------------------------------------------
```markdown
# Xmlui Website Blocks Package
This package contains components...
```
--------------------------------------------------------------------------------
/docs/content/extensions/xmlui-website-blocks/_overview.md:
--------------------------------------------------------------------------------
```markdown
# Xmlui Website Blocks Package
This package contains components...
```
--------------------------------------------------------------------------------
/.changeset/cold-items-taste.md:
--------------------------------------------------------------------------------
```markdown
---
"xmlui": patch
---
fix: Autocomplete handles animations correctly
```
--------------------------------------------------------------------------------
/docs/content/components/xmlui-spreadsheet/_meta.json:
--------------------------------------------------------------------------------
```json
{
"_overview": "Extension Overview",
"Spreadsheet": "Spreadsheet"
}
```
--------------------------------------------------------------------------------
/docs/public/pages/xmlui-spreadsheet/_meta.json:
--------------------------------------------------------------------------------
```json
{
"_overview": "Extension Overview",
"Spreadsheet": "Spreadsheet"
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/Binding.module.scss:
--------------------------------------------------------------------------------
```scss
@layer components {
.binding {
fill: var(--colorFontMain);
}
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/DatabaseIcon.module.scss:
--------------------------------------------------------------------------------
```scss
@layer components {
.database {
fill: var(--colorFontMain);
}
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/ArrowRight.module.scss:
--------------------------------------------------------------------------------
```scss
@layer components {
.arrowRight {
fill: var(--colorFontMain);
}
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/ArrowDropUp.module.scss:
--------------------------------------------------------------------------------
```scss
@layer components {
.arrowDropUp {
fill: var(--colorFontMain);
}
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/ArrowDropDown.module.scss:
--------------------------------------------------------------------------------
```scss
@layer components {
.arrowDropDown {
fill: var(--colorFontMain);
}
}
```
--------------------------------------------------------------------------------
/.changeset/empty-spiders-dress.md:
--------------------------------------------------------------------------------
```markdown
---
"xmlui": patch
---
Add margin-related theme variables to ContentSeparator
```
--------------------------------------------------------------------------------
/.changeset/warm-spies-melt.md:
--------------------------------------------------------------------------------
```markdown
---
"xmlui": patch
---
AppState now uses a merge operation to set initialValue
```
--------------------------------------------------------------------------------
/docs/content/components/xmlui-pdf/_overview.md:
--------------------------------------------------------------------------------
```markdown
# Xmlui Pdf Package
This package provides components for working with pdf files.
```
--------------------------------------------------------------------------------
/tools/vscode/src/server.ts:
--------------------------------------------------------------------------------
```typescript
import * as languageServer from "xmlui/language-server";
languageServer.start();
```
--------------------------------------------------------------------------------
/xmlui/scripts/generate-docs/components-config.json:
--------------------------------------------------------------------------------
```json
{
"excludeComponentStatuses": ["in progress", "deprecated"],
"cleanFolder": true
}
```
--------------------------------------------------------------------------------
/packages/xmlui-playground/src/playground/Box.module.scss:
--------------------------------------------------------------------------------
```scss
.box {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
}
```
--------------------------------------------------------------------------------
/xmlui/tsconfig.node.json:
--------------------------------------------------------------------------------
```json
{
"compilerOptions": {
"composite": true,
},
"include": ["vite.config.ts"]
}
```
--------------------------------------------------------------------------------
/.changeset/tame-zebras-invite.md:
--------------------------------------------------------------------------------
```markdown
---
"xmlui": patch
---
Added better error text when rendering FormItem outside of a Form.
```
--------------------------------------------------------------------------------
/blog/public/serve.json:
--------------------------------------------------------------------------------
```json
{
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
```
--------------------------------------------------------------------------------
/docs/public/serve.json:
--------------------------------------------------------------------------------
```json
{
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
```
--------------------------------------------------------------------------------
/tools/create-app/templates/default/ts/public/serve.json:
--------------------------------------------------------------------------------
```json
{
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
```
--------------------------------------------------------------------------------
/xmlui/src/testing/infrastructure/public/serve.json:
--------------------------------------------------------------------------------
```json
{
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
```
--------------------------------------------------------------------------------
/.changeset/sour-coins-read.md:
--------------------------------------------------------------------------------
```markdown
---
"xmlui": patch
---
fix: external animation is now correctly applied to ModalDialogs as well
```
--------------------------------------------------------------------------------
/docs/content/components/xmlui-spreadsheet/_overview.md:
--------------------------------------------------------------------------------
```markdown
# Xmlui Spreadsheet Package
This package provides an experimental spreadsheet component for XMLUI.
```
--------------------------------------------------------------------------------
/xmlui/src/components/Input/index.ts:
--------------------------------------------------------------------------------
```typescript
export {
PartialInput,
type PartialInputProps,
type BlurDirection
} from "./PartialInput";
```
--------------------------------------------------------------------------------
/.changeset/twenty-jeans-watch.md:
--------------------------------------------------------------------------------
```markdown
---
"xmlui": patch
---
The itemLabelWidth value of Form now supports theme variables ($space-\* values).
```
--------------------------------------------------------------------------------
/docs/content/extensions/_meta.json:
--------------------------------------------------------------------------------
```json
{
"xmlui-animations": "Xmlui Animations Package",
"xmlui-website-blocks": "Xmlui Website Blocks Package"
}
```
--------------------------------------------------------------------------------
/blog/extensions.ts:
--------------------------------------------------------------------------------
```typescript
import playground from "xmlui-playground";
import search from "xmlui-search";
export default [playground, search];
```
--------------------------------------------------------------------------------
/packages/xmlui-devtools/vite.config-overrides.ts:
--------------------------------------------------------------------------------
```typescript
import vsixPlugin from '@codingame/monaco-vscode-rollup-vsix-plugin';
export default {
plugins: [vsixPlugin()]
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/SpaceFiller/SpaceFillerNative.tsx:
--------------------------------------------------------------------------------
```typescript
import styles from "./SpaceFiller.module.scss";
export const SpaceFiller = () => <div className={styles.spacer} />;
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/theming/themeVars.module.scss:
--------------------------------------------------------------------------------
```scss
@use "./themes" as t;
$themeVars: ();
:export {
keyPrefix: #{t.$THEME-VAR-PREFIX};
themeVars: t.json-stringify($themeVars);
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/Heading/abstractions.ts:
--------------------------------------------------------------------------------
```typescript
export const headingLevels = ["h1", "h2", "h3", "h4", "h5", "h6"] as const;
export type HeadingLevel = typeof headingLevels[number];
```
--------------------------------------------------------------------------------
/packages/xmlui-playground/src/playground/Preview.module.scss:
--------------------------------------------------------------------------------
```scss
@use "xmlui/themes.scss" as themes;
.preview {
width: 100%;
height: 100%;
overflow: hidden;
background-color: transparent;
}
```
--------------------------------------------------------------------------------
/xmlui/src/parsers/xmlui-parser/fileExtensions.ts:
--------------------------------------------------------------------------------
```typescript
export const componentFileExtension = "xmlui";
export const codeBehindFileExtension = "xmlui.xs";
export const moduleFileExtension = "xs";
```
--------------------------------------------------------------------------------
/xmlui/src/components/Bookmark/Bookmark.module.scss:
--------------------------------------------------------------------------------
```scss
@layer components {
.anchorRef{
--my-scroll-margin-top: var(--header-height);
scroll-margin-top: var(--my-scroll-margin-top);
}
}
```
--------------------------------------------------------------------------------
/xmlui/dev-docs/data-sources.md:
--------------------------------------------------------------------------------
```markdown
# Using Data with Components
This article discusses the details of the implementation of managing data with the native React components.
_TBD_
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/svg/arrow-left.svg:
--------------------------------------------------------------------------------
```
<svg viewBox="0 0 9 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.19249e-07 9L9 0.339745L9 17.6603L1.19249e-07 9Z" />
</svg>
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/svg/arrow-up.svg:
--------------------------------------------------------------------------------
```
<svg width="18" height="9" viewBox="0 0 18 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 0L17.6603 9H0.339746L9 0Z" />
</svg>
```
--------------------------------------------------------------------------------
/docs/public/pages/_meta.json:
--------------------------------------------------------------------------------
```json
{
"xmlui-animations": "Xmlui Animations",
"xmlui-charts": "Xmlui Charts",
"xmlui-pdf": "Xmlui Pdf",
"xmlui-spreadsheet": "Xmlui Spreadsheet"
}
```
--------------------------------------------------------------------------------
/docs/content/components/xmlui-website-blocks/_meta.json:
--------------------------------------------------------------------------------
```json
{
"_overview": "Extension Overview",
"Carousel": "Carousel",
"HelloMd": "HelloMd",
"HeroSection": "HeroSection",
"ScrollToTop": "ScrollToTop"
}
```
--------------------------------------------------------------------------------
/docs/content/extensions/xmlui-website-blocks/_meta.json:
--------------------------------------------------------------------------------
```json
{
"_overview": "Extension Overview",
"Carousel": "Carousel",
"HelloMd": "HelloMd",
"HeroSection": "HeroSection",
"ScrollToTop": "ScrollToTop"
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/PDFIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import Pdf from "./svg/pdf.svg?react";
import type {IconBaseProps} from "./IconNative";
export const PDFIcon = (props: IconBaseProps) => <Pdf {...props}/>
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/BoxIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import Box from "./svg/box.svg?react";
import type {IconBaseProps} from "./IconNative";
export const BoxIcon = (props: IconBaseProps) => <Box {...props} />
```
--------------------------------------------------------------------------------
/packages/xmlui-hello-world/src/index.tsx:
--------------------------------------------------------------------------------
```typescript
import { helloWorldComponentRenderer } from "./HelloWorld";
export default {
namespace: "XMLUIExtensions",
components: [helloWorldComponentRenderer],
};
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/ApiIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import Icon from "./svg/api.svg?react";
import type {IconBaseProps} from "./IconNative";
export const ApiIcon = (props: IconBaseProps) => <Icon {...props}/>
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/ListIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import {FiList} from "react-icons/fi";
import type {IconBaseProps} from "./IconNative";
export const ListIcon = (props: IconBaseProps) => <FiList {...props}/>
```
--------------------------------------------------------------------------------
/packages/xmlui-spreadsheet/src/index.tsx:
--------------------------------------------------------------------------------
```typescript
import { spreadsheetComponentRenderer } from "./Spreadsheet";
export default {
namespace: "XMLUIExtensions",
components: [spreadsheetComponentRenderer],
};
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/HomeIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import { FiHome } from 'react-icons/fi';
import type {IconBaseProps} from "./IconNative";
export const HomeIcon = (props: IconBaseProps) => <FiHome {...props}/>
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/TxtIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import Icon from "./svg/txt.svg?react";
import type { IconBaseProps } from "./IconNative";
export const TxtIcon = (props: IconBaseProps) => <Icon {...props} />;
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/UserIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import { FiUser } from "react-icons/fi";
import type {IconBaseProps} from "./IconNative";
export const UserIcon = (props: IconBaseProps) => <FiUser {...props}/>
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/XlsIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import Icon from "./svg/xls.svg?react";
import type { IconBaseProps } from "./IconNative";
export const XlsIcon = (props: IconBaseProps) => <Icon {...props} />;
```
--------------------------------------------------------------------------------
/xmlui/src/components/Breakout/Breakout.module.scss:
--------------------------------------------------------------------------------
```scss
@layer components {
.breakout {
left: 50%;
margin-left: -50vw;
margin-right: -50vw;
position: relative;
right: 50%;
width: 100vw;
}
}
```
--------------------------------------------------------------------------------
/xmlui/src/abstractions/scripting/modules.ts:
--------------------------------------------------------------------------------
```typescript
// A function that resolves a module name to the text of the module
export type ModuleResolver = (
sourceModule: string,
moduleName: string
) => string | null;
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/LinkIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import {IoMdLink} from "react-icons/io";
import type {IconBaseProps} from "./IconNative";
export const LinkIcon = (props: IconBaseProps) => <IoMdLink {...props}/>
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/ShareIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import Share from "./svg/share.svg?react";
import type {IconBaseProps} from "./IconNative";
export const ShareIcon = (props: IconBaseProps) => <Share {...props}/>
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/CheckIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import { FiCheck } from "react-icons/fi";
import type {IconBaseProps} from "./IconNative";
export const CheckIcon = (props: IconBaseProps) => <FiCheck {...props}/>
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/PhoneIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import { FiPhone } from "react-icons/fi";
import type {IconBaseProps} from "./IconNative";
export const PhoneIcon = (props: IconBaseProps) => <FiPhone {...props}/>
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/PhotoIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import Photo from "./svg/photo.svg?react";
import type {IconBaseProps} from "./IconNative";
export const PhotoIcon = (props: IconBaseProps) => <Photo {...props} />
```
--------------------------------------------------------------------------------
/packages/xmlui-playground/src/themes/theme.ts:
--------------------------------------------------------------------------------
```typescript
import type { ThemeDefinition } from "xmlui";
export const Theme: ThemeDefinition = {
name: "Theme",
id: "theme",
extends: ["xmlui"],
themeVars: {
},
};
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/DocIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import Icon from "./svg/doc.svg?react";
import type {IconBaseProps} from "./IconNative";
export const DocIcon = (props: IconBaseProps) => (
<Icon {...props} />
);
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/SearchIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import {FiSearch} from "react-icons/fi";
import type {IconBaseProps} from "./IconNative";
export const SearchIcon = (props: IconBaseProps) => <FiSearch {...props}/>
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/BoardIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import { FiGrid } from "react-icons/fi";
import type { IconBaseProps } from "./IconNative";
export const BoardIcon = (props: IconBaseProps) => <FiGrid {...props} />;
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/svg/arrow-dropdown.svg:
--------------------------------------------------------------------------------
```
<svg width="18" height="9" viewBox="0 0 18 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 9L0.339745 4.3915e-07L17.6603 1.80194e-06L9 9Z" />
</svg>
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/CompactListIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import type {IconBaseProps} from "./IconNative";
import {FiList} from "react-icons/fi";
export const CompactListIcon = (props: IconBaseProps) => <FiList {...props}/>;
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/FilterIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import Icon from "./svg/filter.svg?react";
import type { IconBaseProps } from "./IconNative";
export const FilterIcon = (props: IconBaseProps) => <Icon {...props} />;
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/FolderIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import Folder from "./svg/folder.svg?react";
import type {IconBaseProps} from "./IconNative";
export const FolderIcon = (props: IconBaseProps) => <Folder {...props}/>
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/SunIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import Icon from "./svg/sun.svg?react";
import type {IconBaseProps} from "./IconNative";
export const SunIcon = (props: IconBaseProps) => (
<Icon {...props} />
);
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/MoonIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import Icon from "./svg/moon.svg?react";
import type {IconBaseProps} from "./IconNative";
export const MoonIcon = (props: IconBaseProps) => (
<Icon {...props} />
);
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/svg/arrow-right.svg:
--------------------------------------------------------------------------------
```
<svg width="9" height="18" viewBox="0 0 9 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 9L-8.15666e-07 17.6603L-5.85621e-08 0.339745L9 9Z" />
</svg>
```
--------------------------------------------------------------------------------
/xmlui/src/testing/infrastructure/main.tsx:
--------------------------------------------------------------------------------
```typescript
import ReactDOM from "react-dom/client";
import TestBed from "./TestBed";
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
<TestBed />
);
```
--------------------------------------------------------------------------------
/docs/extensions.ts:
--------------------------------------------------------------------------------
```typescript
import playground from "xmlui-playground";
import search from "xmlui-search";
import helloWorld from "xmlui-hello-world";
export default [playground, search, helloWorld];
```
--------------------------------------------------------------------------------
/xmlui/scripts/generate-docs/extensions-config.json:
--------------------------------------------------------------------------------
```json
{
"excludeComponentStatuses": ["deprecated", "internal"],
"cleanFolder": true,
"includeByName": ["xmlui-animations", "xmlui-website-blocks"],
"excludeByName": []
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/ExpressionIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import Icon from "./svg/expression.svg?react";
import type {IconBaseProps} from "./IconNative";
export const ExpressionIcon = (props: IconBaseProps) => <Icon {...props}/>
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/ImageFileIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import Icon from "./svg/img.svg?react";
import type {IconBaseProps} from "./IconNative";
export const ImageFileIcon = (props: IconBaseProps) => (
<Icon {...props} />
);
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/StarsIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import Icon from "./svg/stars.svg?react";
import type {IconBaseProps} from "./IconNative";
export const StarsIcon = (props: IconBaseProps) => (
<Icon {...props} />
);
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/UnlinkIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import Unlink from "./svg/unlink.svg?react";
import type { IconBaseProps } from "./IconNative";
export const UnlinkIcon = (props: IconBaseProps) => <Unlink {...props} />;
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/Inspect.tsx:
--------------------------------------------------------------------------------
```typescript
import Icon from "./svg/inspect.svg?react";
import type {IconBaseProps} from "./IconNative";
export const InspectIcon = (props: IconBaseProps) => (
<Icon {...props} />
);
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/PlusIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import {AiOutlinePlus} from "react-icons/ai";
import type {IconBaseProps} from "./IconNative";
export const PlusIcon = (props: IconBaseProps) => <AiOutlinePlus {...props}/>
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/DocFileIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import DocFile from "./svg/file-text.svg?react";
import type {IconBaseProps} from "./IconNative";
export const DocFileIcon = (props: IconBaseProps) => <DocFile {...props} />
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/ErrorIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import {BiErrorCircle} from "react-icons/bi";
import type {IconBaseProps} from "./IconNative";
export const ErrorIcon = (props: IconBaseProps) => <BiErrorCircle {...props}/>
```
--------------------------------------------------------------------------------
/tools/create-app/helpers/make-dir.ts:
--------------------------------------------------------------------------------
```typescript
import fs from 'fs'
export function makeDir(
root: string,
options = { recursive: true }
): Promise<string | undefined> {
return fs.promises.mkdir(root, options)
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/ChevronUpIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import { FiChevronUp } from "react-icons/fi";
import type {IconBaseProps} from "./IconNative";
export const ChevronUpIcon = (props: IconBaseProps) => <FiChevronUp {...props}/>
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/Attach.tsx:
--------------------------------------------------------------------------------
```typescript
import type { IconBaseProps } from "./IconNative";
import Attach from "./svg/attach.svg?react";
export const AttachmentIcon = (props: IconBaseProps) => (<Attach {...props} />);
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/CodeFileIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import CodeFile from "./svg/code-file.svg?react";
import type {IconBaseProps} from "./IconNative";
export const CodeFileIcon = (props: IconBaseProps) => <CodeFile {...props} />
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/PenIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import {HiOutlinePencil} from 'react-icons/hi';
import type {IconBaseProps} from "./IconNative";
export const PenIcon = (props: IconBaseProps) => <HiOutlinePencil {...props} />
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/UnknownFileIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import Icon from "./svg/unknown-file.svg?react";
import type { IconBaseProps } from "./IconNative";
export const UnknownFileIcon = (props: IconBaseProps) => <Icon {...props} />;
```
--------------------------------------------------------------------------------
/xmlui/src/testing/drivers/ModalDialogDriver.ts:
--------------------------------------------------------------------------------
```typescript
import { ComponentDriver } from "../ComponentDrivers";
export class ModalDialogDriver extends ComponentDriver {
get titlePart() {
return this.getByPartName("title");
}
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/AdmonitionTip.tsx:
--------------------------------------------------------------------------------
```typescript
import Icon from "./svg/admonition_tip.svg?react";
import type { IconBaseProps } from "./IconNative";
export const AdmonitionTipIcon = (props: IconBaseProps) => <Icon {...props}/>
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/AdmonitionInfo.tsx:
--------------------------------------------------------------------------------
```typescript
import Icon from "./svg/admonition_info.svg?react";
import type { IconBaseProps } from "./IconNative";
export const AdmonitionInfoIcon = (props: IconBaseProps) => <Icon {...props}/>
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/AdmonitionNote.tsx:
--------------------------------------------------------------------------------
```typescript
import Icon from "./svg/admonition_note.svg?react";
import type { IconBaseProps } from "./IconNative";
export const AdmonitionNoteIcon = (props: IconBaseProps) => <Icon {...props}/>
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/ChevronDownIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import { FiChevronDown } from "react-icons/fi";
import type {IconBaseProps} from "./IconNative";
export const ChevronDownIcon = (props: IconBaseProps) => <FiChevronDown {...props}/>
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/TrendingLevelIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import Icon from "./svg/trending-level.svg?react";
import type { IconBaseProps } from "./IconNative";
export const TrendingLevelIcon = (props: IconBaseProps) => <Icon {...props} />;
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/TrendingUpIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import Icon from "./svg/trending-up.svg?react";
import type {IconBaseProps} from "./IconNative";
export const TrendingUpIcon = (props: IconBaseProps) => (
<Icon {...props} />
);
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/WarningIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import {AiOutlineWarning} from "react-icons/ai";
import type {IconBaseProps} from "./IconNative";
export const WarningIcon = (props: IconBaseProps) => <AiOutlineWarning {...props}/>
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/DarkToLightIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import Icon from "./svg/dark_to_light.svg?react";
import type {IconBaseProps} from "./IconNative";
export const DarkToLightIcon = (props: IconBaseProps) => (
<Icon {...props} />
);
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/GlobeIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import {MdOutlineLanguage} from "react-icons/md";
import type {IconBaseProps} from "./IconNative";
export const GlobeIcon = (props: IconBaseProps) => <MdOutlineLanguage {...props}/>;
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/HyperLinkIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import {MdOutlineLaunch} from "react-icons/md";
import type {IconBaseProps} from "./IconNative";
export const HyperLinkIcon = (props: IconBaseProps) => <MdOutlineLaunch {...props}/>
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/LightToDark.tsx:
--------------------------------------------------------------------------------
```typescript
import Icon from "./svg/light_to_dark.svg?react";
import type {IconBaseProps} from "./IconNative";
export const LightToDarkIcon = (props: IconBaseProps) => (
<Icon {...props} />
);
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/AdmonitionDanger.tsx:
--------------------------------------------------------------------------------
```typescript
import Icon from "./svg/admonition_danger.svg?react";
import type { IconBaseProps } from "./IconNative";
export const AdmonitionDangerIcon = (props: IconBaseProps) => <Icon {...props}/>
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/ChevronRight.tsx:
--------------------------------------------------------------------------------
```typescript
import { FiChevronRight } from "react-icons/fi";
import type {IconBaseProps} from "./IconNative";
export const ChevronRightIcon = (props: IconBaseProps) => <FiChevronRight {...props} />
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/TrendingDownIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import Icon from "./svg/trending-down.svg?react";
import type {IconBaseProps} from "./IconNative";
export const TrendingDownIcon = (props: IconBaseProps) => (
<Icon {...props} />
);
```
--------------------------------------------------------------------------------
/xmlui/bin/bootstrap.js:
--------------------------------------------------------------------------------
```javascript
#!/usr/bin/env node
require("ts-node").register({
transpileOnly: true,
esm: true,
compilerOptions: {
module: "commonjs",
esModuleInterop: true,
},
});
require("./index");
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/LooseListIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import {HiOutlineViewList} from "react-icons/hi";
import type {IconBaseProps} from "./IconNative";
export const LooseListIcon = (props: IconBaseProps) => <HiOutlineViewList {...props} />
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/MoreOptionsIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import {FiMoreHorizontal} from "react-icons/fi";
import type {IconBaseProps} from "./IconNative";
export const MoreOptionsIcon = (props: IconBaseProps) => <FiMoreHorizontal {...props} />
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/AdmonitionWarning.tsx:
--------------------------------------------------------------------------------
```typescript
import Icon from "./svg/admonition_warning.svg?react";
import type { IconBaseProps } from "./IconNative";
export const AdmonitionWarningIcon = (props: IconBaseProps) => <Icon {...props}/>
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/EmailIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import type {IconBaseProps} from "./IconNative";
import {MdOutlineMailOutline} from "react-icons/md";
export const EmailIcon = (props: IconBaseProps) => <MdOutlineMailOutline {...props}/>
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/CodeSandbox.tsx:
--------------------------------------------------------------------------------
```typescript
import CodeSandbox from "./svg/code-sandbox.svg?react";
import type {IconBaseProps} from "./IconNative";
export const CodeSandboxIcon = (props: IconBaseProps) => <CodeSandbox {...props} />
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/EmptyFolderIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import EmptyFolder from "./svg/empty-folder.svg?react";
import type {IconBaseProps} from "./IconNative";
export const EmptyFolderIcon = (props: IconBaseProps) => <EmptyFolder {...props} />
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/FillPlusCricleIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import {AiFillPlusCircle} from "react-icons/ai";
import type {IconBaseProps} from "./IconNative";
export const FillPlusCircleIcon = (props: IconBaseProps) => <AiFillPlusCircle {...props}/>
```
--------------------------------------------------------------------------------
/docs/public/resources/files/dashboard-stats.json:
--------------------------------------------------------------------------------
```json
[
{
"total_invoices": 93,
"total_clients": 30,
"outstanding": 3502.9,
"paid_this_year": 1960.18,
"draft_invoices": 7,
"sent_invoices": 6,
"paid_invoices": 80
}
]
```
--------------------------------------------------------------------------------
/xmlui/src/components/App/IndexerContext.ts:
--------------------------------------------------------------------------------
```typescript
import React, { useContext } from "react";
export const IndexerContext = React.createContext({
indexing: false
});
export function useIndexerContext(){
return useContext(IndexerContext);
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/TrashIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import {MdOutlineDeleteForever} from "react-icons/md";
import type {IconBaseProps} from "./IconNative";
export const TrashIcon = (props: IconBaseProps) => <MdOutlineDeleteForever {...props} />
```
--------------------------------------------------------------------------------
/packages/xmlui-playground/src/playground/PlaygroundNative.module.scss:
--------------------------------------------------------------------------------
```scss
@use "xmlui/themes.scss" as themes;
.playground {
overflow: hidden;
margin-top: 1.25rem;
border-radius: 16px;
border: 1px solid themes.$borderColor;
box-shadow: themes.$boxShadow-md;
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/ContentCopyIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import type {IconBaseProps} from "./IconNative";
import {MdOutlineContentCopy} from "react-icons/md";
export const ContentCopyIcon = (props: IconBaseProps) => <MdOutlineContentCopy {...props} />
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/DotMenuIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import type {IconBaseProps} from "./IconNative";
import { IoEllipsisVertical } from "react-icons/io5";
export const DotMenuIcon = (props: IconBaseProps) => (
<IoEllipsisVertical {...props}/>
);
```
--------------------------------------------------------------------------------
/xmlui/src/components/Input/InputDivider.module.scss:
--------------------------------------------------------------------------------
```scss
/* InputDivider base styles - only non-conflicting defaults */
@layer components {
.inputDivider {
white-space: pre;
display: inline-block;
font: inherit;
user-select: none;
}
}
```
--------------------------------------------------------------------------------
/docs/public/pages/xmlui-charts/_meta.json:
--------------------------------------------------------------------------------
```json
{
"_overview": "Extension Overview",
"BarChart": "BarChart",
"DonutChart": "DonutChart",
"LabelList": "LabelList",
"Legend": "Legend",
"LineChart": "LineChart",
"PieChart": "PieChart"
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/VisuallyHidden.tsx:
--------------------------------------------------------------------------------
```typescript
import { VisuallyHidden as VH } from "@radix-ui/react-visually-hidden";
export const VisuallyHidden = ({ children, ...props }: { children: React.ReactNode }) => (
<VH {...props}>{children}</VH>
);
```
--------------------------------------------------------------------------------
/packages/xmlui-devtools/src/devtools/ModalVisibilityContext.tsx:
--------------------------------------------------------------------------------
```typescript
import React from "react";
interface IModalVisibilityContext {
requestClose: () => Promise<void>;
}
export const ModalVisibilityContext = React.createContext<IModalVisibilityContext | null>(null);
```
--------------------------------------------------------------------------------
/packages/xmlui-devtools/src/index.tsx:
--------------------------------------------------------------------------------
```typescript
import { devToolsComponentRenderer } from "./devtools/DevTools";
export default {
namespace: "XMLUIDevtools",
components: [devToolsComponentRenderer],
};
export { Editor } from "./editor/Editor";
```
--------------------------------------------------------------------------------
/packages/xmlui-devtools/meta/componentsMetadata.ts:
--------------------------------------------------------------------------------
```typescript
import { EditorMd } from "../src/devtools/DevTools";
export const componentMetadata = {
name: "Editor",
state: "experimental",
description: `XMLUI Editor`,
metadata: {
Editor: EditorMd,
},
};
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/DotMenuHorizontalIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import type { IconBaseProps } from "./IconNative";
import { IoEllipsisHorizontal } from "react-icons/io5";
export const DotMenuHorizontalIcon = (props: IconBaseProps) => <IoEllipsisHorizontal {...props} />;
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/ChevronLeft.tsx:
--------------------------------------------------------------------------------
```typescript
import React from "react";
import {FiChevronLeft} from "react-icons/fi";
import type {IconBaseProps} from "./IconNative";
export const ChevronLeftIcon = (props: IconBaseProps) => <FiChevronLeft {...props} />
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/devtools/InspectorDialogVisibilityContext.tsx:
--------------------------------------------------------------------------------
```typescript
import React from "react";
interface IModalVisibilityContext {
requestClose: () => Promise<void>;
}
export const InspectorDialogVisibilityContext = React.createContext<IModalVisibilityContext | null>(null);
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/rendering/nodeUtils.ts:
--------------------------------------------------------------------------------
```typescript
import type { ComponentDef } from "../../abstractions/ComponentDefs";
export function hasRenderableChildren(children: ComponentDef[]): boolean {
return !!children?.some((child) => child?.type !== "Slot");
}
```
--------------------------------------------------------------------------------
/docs/public/resources/files/for-download/start-darwin.sh:
--------------------------------------------------------------------------------
```bash
#!/bin/bash
# Check if npx is available
if command -v npx > /dev/null 2>&1; then
# Run npx http-server -y -o
npx -y http-server -o
else
echo "npx is not available. Please install Node.js and npm."
fi
```
--------------------------------------------------------------------------------
/packages/xmlui-search/meta/componentsMetadata.ts:
--------------------------------------------------------------------------------
```typescript
import { SearchMd } from "../src";
export const componentMetadata = {
name: "Search",
state: "experimental",
description: "Search component for Markdown content.",
metadata: {
Search: SearchMd,
},
};
```
--------------------------------------------------------------------------------
/docs/public/resources/files/for-download/start-linux.sh:
--------------------------------------------------------------------------------
```bash
#!/usr/bin/env bash
# Check if npx is available
if command -v npx > /dev/null 2>&1; then
# Run npx http-server -y -o
npx -y http-server -o
else
echo "npx is not available. Please install Node.js and npm."
fi
```
--------------------------------------------------------------------------------
/packages/xmlui-pdf/meta/componentsMetadata.ts:
--------------------------------------------------------------------------------
```typescript
import { PdfMd } from "../src";
export const componentMetadata = {
name: "PDF",
state: "in progress",
description: "This package provides components for working with pdf files.",
metadata: {
Pdf: PdfMd,
},
};
```
--------------------------------------------------------------------------------
/tools/create-app/tsconfig.json:
--------------------------------------------------------------------------------
```json
{
"compilerOptions": {
"target": "es2019",
"moduleResolution": "node",
"strict": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"skipLibCheck": false
},
"exclude": ["templates", "dist"]
}
```
--------------------------------------------------------------------------------
/docs/public/resources/files/for-download/index.html:
--------------------------------------------------------------------------------
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="./xmlui/xmlui-standalone.umd.js"></script>
</head>
<body>
</body>
</html>
```
--------------------------------------------------------------------------------
/tools/create-app/templates/default/ts/index.ts:
--------------------------------------------------------------------------------
```typescript
import { startApp } from "xmlui";
export const runtime = import.meta.glob(`/src/**`, { eager: true });
startApp(runtime);
if (import.meta.hot) {
import.meta.hot.accept((newModule) => {
startApp(newModule?.runtime);
});
}
```
--------------------------------------------------------------------------------
/xmlui/src/abstractions/ContainerDefs.ts:
--------------------------------------------------------------------------------
```typescript
// We store the state application state in a hierarchical structure of containers.
// This type represents the state within a single container stored as key and value
// pairs.
export type ContainerState = Record<string | symbol, any>;
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/Binding.tsx:
--------------------------------------------------------------------------------
```typescript
import type {IconBaseProps} from "./IconNative";
import Binding from "./svg/binding.svg?react";
import style from "./Binding.module.scss";
export const BindingIcon = (props: IconBaseProps) => <Binding className={style.binding} {...props}/>
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/svg/filter.svg:
--------------------------------------------------------------------------------
```
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22 3H2L10 12.46V19L14 21V12.46L22 3Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
```
--------------------------------------------------------------------------------
/tools/create-app/helpers/is-writeable.ts:
--------------------------------------------------------------------------------
```typescript
import fs from 'fs'
export async function isWriteable(directory: string): Promise<boolean> {
try {
await fs.promises.access(directory, (fs.constants || fs).W_OK)
return true
} catch (err) {
return false
}
}
```
--------------------------------------------------------------------------------
/docs/content/components/xmlui-animations/_overview.md:
--------------------------------------------------------------------------------
```markdown
# Xmlui Animations Package
This package contains components that deal with different sorts of animations.
These components can wrap other components and provide different sorts of animations that run when the child component visibility changes.
```
--------------------------------------------------------------------------------
/docs/content/extensions/xmlui-animations/_overview.md:
--------------------------------------------------------------------------------
```markdown
# Xmlui Animations Package
This package contains components that deal with different sorts of animations.
These components can wrap other components and provide different sorts of animations that run when the child component visibility changes.
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/ArrowDropUp.tsx:
--------------------------------------------------------------------------------
```typescript
import styles from "./ArrowDropUp.module.scss";
import Arrow from "./svg/arrow-up.svg?react";
import type {IconBaseProps} from "./IconNative";
export const ArrowDropUp = (props: IconBaseProps) => (<Arrow className={styles.arrowDropUp} {...props}/>);
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/ArrowLeft.tsx:
--------------------------------------------------------------------------------
```typescript
import styles from "./ArrowLeft.module.scss";
import Arrow from "./svg/arrow-left.svg?react";
import type {IconBaseProps} from "./IconNative";
export const ArrowLeft = (props: IconBaseProps) => (
<Arrow className={styles.arrowLeft} {...props}/>
);
```
--------------------------------------------------------------------------------
/xmlui/src/components/NestedApp/defaultProps.tsx:
--------------------------------------------------------------------------------
```typescript
// Default props for NestedApp component
import { EMPTY_ARRAY } from "../../components-core/constants";
export const defaultProps = {
allowPlaygroundPopup: true,
withFrame: true,
noHeader: false,
splitView: false,
components: EMPTY_ARRAY
};
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/ArrowRight.tsx:
--------------------------------------------------------------------------------
```typescript
import styles from "./ArrowRight.module.scss";
import Arrow from "./svg/arrow-right.svg?react";
import type {IconBaseProps} from "./IconNative";
export const ArrowRight = (props: IconBaseProps) => (<Arrow className={styles.arrowRight} {...props} />);
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/appContext/misc-utils.ts:
--------------------------------------------------------------------------------
```typescript
import { capitalize, defaultTo } from "lodash-es";
import { distinct, findByField, pluralize, toHashObject } from "../utils/misc";
export const miscellaneousUtils = {
capitalize,
pluralize,
defaultTo,
toHashObject,
findByField,
distinct
};
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/constants.ts:
--------------------------------------------------------------------------------
```typescript
export const EMPTY_ARRAY: Array<any> = Object.freeze([]) as unknown as Array<any>;
export const EMPTY_OBJECT = Object.freeze({}) as unknown as {};
export const noop = (...args: any[]) => ({} as any);
export const asyncNoop = async (...args: any[]) => {};
```
--------------------------------------------------------------------------------
/tools/create-app/templates/default/ts/src/config.ts:
--------------------------------------------------------------------------------
```typescript
import type { StandaloneAppDescription } from "xmlui";
const App: StandaloneAppDescription = {
name: "Tutorial",
version: "0.0.1",
resources: {
logo: "resources/xmlui-logo.svg",
favicon: "resources/favicon.ico",
},
};
export default App;
```
--------------------------------------------------------------------------------
/xmlui/src/language-server/server.ts:
--------------------------------------------------------------------------------
```typescript
import {
createConnection,
ProposedFeatures,
} from 'vscode-languageserver/node';
import * as serverCommon from "./server-common"
export function start(){
const connection = createConnection(ProposedFeatures.all);
serverCommon.start(connection)
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/ProfileMenu/ProfileMenu.module.scss:
--------------------------------------------------------------------------------
```scss
@use "../../components-core/theming/themes" as t;
@layer components {
.loggedInUserInfoWrapper {
padding: t.$space-2;
font-size: t.$fontSize-sm;
}
.name {
color: t.$textColor-primary;
}
.email {
color: t.$textColor-subtitle;
}
}
```
--------------------------------------------------------------------------------
/xmlui/src/syntax/textMate/index.ts:
--------------------------------------------------------------------------------
```typescript
import xmluiThemeDark from "./xmlui-dark.json";
import xmluiThemeLight from "./xmlui-light.json";
import xmluiTheme from "./xmlui.json";
import xmluiGrammar from "./xmlui.tmLanguage.json";
export { xmluiThemeDark, xmluiThemeLight, xmluiTheme, xmluiGrammar };
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/DatabaseIcon.tsx:
--------------------------------------------------------------------------------
```typescript
import Datavase from "./svg/database.svg?react";
import type { IconBaseProps } from "../Icon/IconNative";
import styles from "./DatabaseIcon.module.scss"
export const DatabaseIcon = (props: IconBaseProps) => <Datavase className={styles.database} {...props} />
```
--------------------------------------------------------------------------------
/xmlui/src/components/ToneSwitch/ToneSwitch.md:
--------------------------------------------------------------------------------
```markdown
%-DESC-START
```xmlui-pg {4} copy display name="Example: using ToneSwitch"
<App>
<AppHeader>
<SpaceFiller />
<ToneSwitch />
</AppHeader>
<Card
title="Tone Switch"
subtitle="Toggle the switch to change the tone."
/>
</App>
```
%-DESC-END
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/ArrowDropDown.tsx:
--------------------------------------------------------------------------------
```typescript
import styles from "./ArrowDropDown.module.scss";
import Arrow from "./svg/arrow-dropdown.svg?react"
import type {IconBaseProps} from "./IconNative";
export const ArrowDropDown = (props: IconBaseProps) => (<Arrow className={styles.arrowDropDown} {...props} />);
```
--------------------------------------------------------------------------------
/docs/content/components/xmlui-animations/_meta.json:
--------------------------------------------------------------------------------
```json
{
"_overview": "Extension Overview",
"Animation": "Animation",
"FadeAnimation": "FadeAnimation",
"FadeInAnimation": "FadeInAnimation",
"FadeOutAnimation": "FadeOutAnimation",
"ScaleAnimation": "ScaleAnimation",
"SlideInAnimation": "SlideInAnimation"
}
```
--------------------------------------------------------------------------------
/docs/content/extensions/xmlui-animations/_meta.json:
--------------------------------------------------------------------------------
```json
{
"_overview": "Extension Overview",
"Animation": "Animation",
"FadeAnimation": "FadeAnimation",
"FadeInAnimation": "FadeInAnimation",
"FadeOutAnimation": "FadeOutAnimation",
"ScaleAnimation": "ScaleAnimation",
"SlideInAnimation": "SlideInAnimation"
}
```
--------------------------------------------------------------------------------
/docs/public/pages/xmlui-animations/_meta.json:
--------------------------------------------------------------------------------
```json
{
"_overview": "Extension Overview",
"Animation": "Animation",
"FadeAnimation": "FadeAnimation",
"FadeInAnimation": "FadeInAnimation",
"FadeOutAnimation": "FadeOutAnimation",
"ScaleAnimation": "ScaleAnimation",
"SlideInAnimation": "SlideInAnimation"
}
```
--------------------------------------------------------------------------------
/docs/public/pages/xmlui-spreadsheet/_overview.md:
--------------------------------------------------------------------------------
```markdown
## Xmlui Spreadsheet Package
This package provides an experimental spreadsheet component for XMLUI.
## Package Components
| Component | Description | Status |
| :---: | --- | :---: |
| [Spreadsheet](./xmlui-spreadsheet/Spreadsheet) | XMLUI Spreadsheet | experimental |
```
--------------------------------------------------------------------------------
/docs/content/components/xmlui-website-blocks/HelloMd.md:
--------------------------------------------------------------------------------
```markdown
# HelloMd [#hellomd]
A sample component
## Properties
This component does not have any properties.
## Events
This component does not have any events.
## Exposed Methods
This component does not expose any methods.
## Styling
This component does not have any styles.
```
--------------------------------------------------------------------------------
/docs/content/extensions/xmlui-website-blocks/HelloMd.md:
--------------------------------------------------------------------------------
```markdown
# HelloMd [#hellomd]
A sample component
## Properties
This component does not have any properties.
## 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.
```
--------------------------------------------------------------------------------
/packages/xmlui-search/index.ts:
--------------------------------------------------------------------------------
```typescript
import { startApp } from "xmlui";
import Search from "./src";
export const runtime = import.meta.glob(`/demo/**`, { eager: true });
startApp(runtime, Search);
if (import.meta.hot) {
import.meta.hot.accept((newModule) => {
startApp(newModule?.runtime, Search);
});
}
```
--------------------------------------------------------------------------------
/xmlui/vitest.config.ts:
--------------------------------------------------------------------------------
```typescript
import viteConfig from "./vite.config";
import { defineConfig, mergeConfig } from "vitest/config";
export default defineConfig(configEnv => mergeConfig(
viteConfig(configEnv),
defineConfig({
test: {
include: ["**/tests/**/*.test.ts"],
},
})
));
```
--------------------------------------------------------------------------------
/xmlui/src/components/PageMetaTitle/PageMetaTilteNative.tsx:
--------------------------------------------------------------------------------
```typescript
import { Helmet } from "react-helmet-async";
// Default props for PageMetaTitle component
export const defaultProps = {
title: "XMLUI Application"
};
export const PageMetaTitle = ({ title = defaultProps.title }: { title: string }) => {
return <Helmet title={title} />;
};
```
--------------------------------------------------------------------------------
/packages/xmlui-spreadsheet/meta/componentsMetadata.ts:
--------------------------------------------------------------------------------
```typescript
import { SpreadsheetMd } from "../src/Spreadsheet";
export const componentMetadata = {
name: "Spreadsheet",
state: "experimental",
description: "This package provides an experimental spreadsheet component for XMLUI.",
metadata: {
Spreadsheet: SpreadsheetMd,
},
};
```
--------------------------------------------------------------------------------
/xmlui/src/syntax/monaco/index.ts:
--------------------------------------------------------------------------------
```typescript
export { XmluiGrammar as xmluiGrammar } from "./grammar.monacoLanguage";
export { XmluiScripGrammar as xmluiScriptGrammar } from "./xmluiscript.monacoLanguage";
export { default as xmluiThemeDark } from "./xmlui-dark";
export { default as xmluiThemeLight } from "./xmlui-light";
```
--------------------------------------------------------------------------------
/docs/public/resources/files/for-download/index-with-api.html:
--------------------------------------------------------------------------------
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="./xmlui/mockApiDef.js"></script>
<script src="./xmlui/xmlui-standalone.umd.js"></script>
</head>
<body>
</body>
</html>
```
--------------------------------------------------------------------------------
/packages/xmlui-hello-world/index.ts:
--------------------------------------------------------------------------------
```typescript
import { startApp } from "xmlui";
import HelloWorld from "./src";
export const runtime = import.meta.glob(`/demo/**`, { eager: true });
startApp(runtime, HelloWorld);
if (import.meta.hot) {
import.meta.hot.accept((newModule) => {
startApp(newModule?.runtime, HelloWorld);
});
}
```
--------------------------------------------------------------------------------
/packages/xmlui-os-frames/index.ts:
--------------------------------------------------------------------------------
```typescript
import { startApp } from "xmlui";
import components from "./src";
export const runtime = import.meta.glob(`/demo/**`, { eager: true });
startApp(runtime, components);
if (import.meta.hot) {
import.meta.hot.accept((newModule) => {
startApp(newModule?.runtime, components);
});
}
```
--------------------------------------------------------------------------------
/packages/xmlui-pdf/index.ts:
--------------------------------------------------------------------------------
```typescript
import { startApp } from "xmlui";
import pdf from "./src";
export const runtime = import.meta.glob(`/demo/**`, { eager: true });
startApp(runtime, pdf);
if (import.meta.hot) {
import.meta.hot.accept((newModule) => {
startApp(newModule?.runtime, pdf);
});
}
export default pdf;
```
--------------------------------------------------------------------------------
/packages/xmlui-playground/index.ts:
--------------------------------------------------------------------------------
```typescript
import { startApp } from "xmlui";
import Playground from "./src";
export const runtime = import.meta.glob(`/demo/**`, { eager: true });
startApp(runtime, Playground);
if (import.meta.hot) {
import.meta.hot.accept((newModule) => {
startApp(newModule?.runtime, Playground);
});
}
```
--------------------------------------------------------------------------------
/packages/xmlui-playground/src/playground/Box.tsx:
--------------------------------------------------------------------------------
```typescript
import type { CSSProperties } from "react";
import style from "./Box.module.scss";
export const Box = ({
children,
styles,
}: {
children: React.ReactNode;
styles?: CSSProperties;
}) => {
return (
<div style={styles} className={style.box}>
{children}
</div>
);
};
```
--------------------------------------------------------------------------------
/docs/public/pages/xmlui-pdf/_overview.md:
--------------------------------------------------------------------------------
```markdown
## Xmlui Pdf Package
This package provides components for working with pdf files.
## Package Components
| Component | Description | Status |
| :---: | --- | :---: |
| [Pdf](./xmlui-pdf/Pdf) | The `Pdf` component provides a read-only preview of a pdf document's contents. | experimental |
```
--------------------------------------------------------------------------------
/xmlui/src/language-server/services/common/lsp-utils.ts:
--------------------------------------------------------------------------------
```typescript
import type { Position, Range } from "vscode-languageserver";
type OffsetRange = { pos: number, end: number };
export function offsetToPosRange(offsetToPos: (number) => Position, range: OffsetRange): Range {
return {
start: offsetToPos(range.pos),
end: offsetToPos(range.end),
}
}
```
--------------------------------------------------------------------------------
/blog/src/themes/xmlui-gray-on-default.ts:
--------------------------------------------------------------------------------
```typescript
import type { ThemeDefinition } from "xmlui";
export const XmluiGrayOnDefaultTheme: ThemeDefinition = {
name: "XMLUI Gray Documentation Theme",
id: "xmlui-gray-on-default",
extends: ["xmlui-gray", "docs-theme"],
themeVars: {},
resources: {},
};
export default XmluiGrayOnDefaultTheme;
```
--------------------------------------------------------------------------------
/docs/src/themes/xmlui-gray-on-default.ts:
--------------------------------------------------------------------------------
```typescript
import type { ThemeDefinition } from "xmlui";
export const XmluiGrayOnDefaultTheme: ThemeDefinition = {
name: "XMLUI Gray Documentation Theme",
id: "xmlui-gray-on-default",
extends: ["xmlui-gray", "docs-theme"],
themeVars: {},
resources: {},
};
export default XmluiGrayOnDefaultTheme;
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/svg/trending-level.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 ms-1">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M5 12l14 0"></path>
</svg>
```
--------------------------------------------------------------------------------
/xmlui/src/components/ToneChangerButton/ToneChangerButton.md:
--------------------------------------------------------------------------------
```markdown
%-DESC-START
```xmlui-pg {4} copy display name="Example: using ToneChangerButton"
<App>
<AppHeader>
<SpaceFiller />
<ToneChangerButton />
</AppHeader>
<Card
title="Tone Changer Button"
subtitle="Click the button in the header to change the tone."
/>
</App>
```
%-DESC-END
```
--------------------------------------------------------------------------------
/tools/vscode/tsconfig.json:
--------------------------------------------------------------------------------
```json
{
"compilerOptions": {
"module": "ESNext",
"moduleResolution": "bundler",
"target": "es2020",
"lib": ["ESNext"],
"outDir": "dist",
"rootDir": "src",
"skipLibCheck": true,
"sourceMap": true
},
"include": ["src"],
"exclude": ["node_modules", ".vscode-test"]
}
```
--------------------------------------------------------------------------------
/packages/xmlui-playground/src/index.tsx:
--------------------------------------------------------------------------------
```typescript
import { playgroundComponentRenderer } from "./playground/Playground";
import { standalonePlaygroundComponentRenderer } from "./playground/StandalonePlayground";
export default {
namespace: "XMLUIExtensions",
components: [playgroundComponentRenderer, standalonePlaygroundComponentRenderer],
};
```
--------------------------------------------------------------------------------
/xmlui/src/components/Pages/Pages.module.scss:
--------------------------------------------------------------------------------
```scss
@use "../../components-core/theming/themes" as t;
@layer components {
.wrapper{
padding-top: t.$space-5;
padding-bottom: t.$space-5;
padding-right: t.$space-4;
padding-left: t.$space-4;
gap: t.$space-5;
display: flex;
flex-direction: column;
min-height: 100%;
}
}
```
--------------------------------------------------------------------------------
/blog/src/themes/xmlui-green-on-default.ts:
--------------------------------------------------------------------------------
```typescript
import type { ThemeDefinition } from "xmlui";
export const XmluiGreenOnDefaultTheme: ThemeDefinition = {
name: "XMLUI Green Documentation Theme",
id: "xmlui-green-on-default",
extends: ["xmlui-green", "docs-theme"],
themeVars: {},
resources: {},
};
export default XmluiGreenOnDefaultTheme;
```
--------------------------------------------------------------------------------
/docs/src/themes/xmlui-green-on-default.ts:
--------------------------------------------------------------------------------
```typescript
import type { ThemeDefinition } from "xmlui";
export const XmluiGreenOnDefaultTheme: ThemeDefinition = {
name: "XMLUI Green Documentation Theme",
id: "xmlui-green-on-default",
extends: ["xmlui-green", "docs-theme"],
themeVars: {},
resources: {},
};
export default XmluiGreenOnDefaultTheme;
```
--------------------------------------------------------------------------------
/xmlui/src/logging/LoggerInitializer.tsx:
--------------------------------------------------------------------------------
```typescript
import { useLogger } from "./LoggerContext";
import { useEffect } from "react";
import { loggerService } from "./LoggerService";
export const LoggerInitializer = () => {
const { addLog } = useLogger();
useEffect(() => {
loggerService.registerCallback(addLog);
}, [addLog]);
return null;
};
```
--------------------------------------------------------------------------------
/blog/src/themes/xmlui-orange-on-default.ts:
--------------------------------------------------------------------------------
```typescript
import type { ThemeDefinition } from "xmlui";
export const XmluiOrangeOnDefaultTheme: ThemeDefinition = {
name: "XMLUI Orange Documentation Theme",
id: "xmlui-orange-on-default",
extends: ["xmlui-orange", "docs-theme"],
themeVars: {},
resources: {},
};
export default XmluiOrangeOnDefaultTheme;
```
--------------------------------------------------------------------------------
/docs/src/themes/xmlui-orange-on-default.ts:
--------------------------------------------------------------------------------
```typescript
import type { ThemeDefinition } from "xmlui";
export const XmluiOrangeOnDefaultTheme: ThemeDefinition = {
name: "XMLUI Orange Documentation Theme",
id: "xmlui-orange-on-default",
extends: ["xmlui-orange", "docs-theme"],
themeVars: {},
resources: {},
};
export default XmluiOrangeOnDefaultTheme;
```
--------------------------------------------------------------------------------
/packages/xmlui-playground/src/hooks/useToast.ts:
--------------------------------------------------------------------------------
```typescript
import {useContext} from "react";
import { ToastContext } from "../providers/ToastProvider";
export const useToast = () => {
const context = useContext(ToastContext);
if (context === undefined) {
throw new Error('useToast must be used within a ToastProvider');
}
return context;
};
```
--------------------------------------------------------------------------------
/packages/xmlui-website-blocks/index.ts:
--------------------------------------------------------------------------------
```typescript
import { startApp } from "xmlui";
import websites from "./src";
export const runtime = import.meta.glob(`/demo/**`, { eager: true });
startApp(runtime, [websites]);
if (import.meta.hot) {
import.meta.hot.accept((newModule) => {
startApp(newModule?.runtime, [websites]);
});
}
export default websites;
```
--------------------------------------------------------------------------------
/blog/index.ts:
--------------------------------------------------------------------------------
```typescript
import { startApp } from "xmlui";
import usedExtensions from "./extensions";
export const runtime = import.meta.glob(`/src/**`, { eager: true });
startApp(runtime, usedExtensions);
if (import.meta.hot) {
import.meta.hot.accept((newModule) => {
startApp(newModule?.runtime, usedExtensions);
});
}
```
--------------------------------------------------------------------------------
/docs/index.ts:
--------------------------------------------------------------------------------
```typescript
import { startApp } from "xmlui";
import usedExtensions from "./extensions";
export const runtime = import.meta.glob(`/src/**`, { eager: true });
startApp(runtime, usedExtensions);
if (import.meta.hot) {
import.meta.hot.accept((newModule) => {
startApp(newModule?.runtime, usedExtensions);
});
}
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/interception/useApiInterceptorContext.tsx:
--------------------------------------------------------------------------------
```typescript
import { createContext, useContext } from "react";
import type { IApiInterceptorContext } from "../../abstractions/AppContextDefs";
export const ApiInterceptorContext = createContext<IApiInterceptorContext>(null as any);
export function useApiInterceptorContext() {
return useContext(ApiInterceptorContext);
}
```
--------------------------------------------------------------------------------
/packages/xmlui-animations/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" />
</head>
<body>
<div id="root"></div>
<script type="module" src="/index.ts"></script>
</body>
</html>
```
--------------------------------------------------------------------------------
/packages/xmlui-devtools/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" />
</head>
<body>
<div id="root"></div>
<script type="module" src="/index.ts"></script>
</body>
</html>
```
--------------------------------------------------------------------------------
/packages/xmlui-os-frames/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" />
</head>
<body>
<div id="root"></div>
<script type="module" src="/index.ts"></script>
</body>
</html>
```
--------------------------------------------------------------------------------
/packages/xmlui-pdf/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" />
</head>
<body>
<div id="root"></div>
<script type="module" src="/index.ts"></script>
</body>
</html>
```
--------------------------------------------------------------------------------
/packages/xmlui-playground/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" />
</head>
<body>
<div id="root"></div>
<script type="module" src="/index.ts"></script>
</body>
</html>
```
--------------------------------------------------------------------------------
/packages/xmlui-search/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" />
</head>
<body>
<div id="root"></div>
<script type="module" src="/index.ts"></script>
</body>
</html>
```
--------------------------------------------------------------------------------
/packages/xmlui-website-blocks/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" />
</head>
<body>
<div id="root"></div>
<script type="module" src="/index.ts"></script>
</body>
</html>
```
--------------------------------------------------------------------------------
/packages/xmlui-playground/src/hooks/usePlayground.ts:
--------------------------------------------------------------------------------
```typescript
import {useContext} from "react";
import {PlaygroundContext} from "../state/store";
export const usePlayground = () => {
const context = useContext(PlaygroundContext);
if (context === undefined) {
throw new Error('usePlayground must be used within a PlaygroundProvider');
}
return context;
};
```
--------------------------------------------------------------------------------
/packages/xmlui-animations/index.ts:
--------------------------------------------------------------------------------
```typescript
import { startApp } from "xmlui";
import animations from "./src";
export const runtime = import.meta.glob(`/demo/**`, { eager: true });
startApp(runtime, [animations]);
if (import.meta.hot) {
import.meta.hot.accept((newModule) => {
startApp(newModule?.runtime, [animations]);
});
}
export default animations;
```
--------------------------------------------------------------------------------
/docs/public/pages/news-and-reviews.md:
--------------------------------------------------------------------------------
```markdown
# News and reviews
```xmlui-pg
<Table data="/resources/files/news-and-reviews.json" sortBy="date" sortDirection="descending">
<Column bindTo="date" />
<Column width="4*" header="title">
<Link target="_blank" to="{$item.url}">
{ $item.title }
</Link>
</Column>
<Column bindTo="source" />
</Table>
```
```
--------------------------------------------------------------------------------
/docs/content/components/xmlui-spreadsheet/Spreadsheet.md:
--------------------------------------------------------------------------------
```markdown
# Spreadsheet [#spreadsheet]
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.
```
--------------------------------------------------------------------------------
/packages/xmlui-spreadsheet/index.ts:
--------------------------------------------------------------------------------
```typescript
import { startApp } from "xmlui";
import spreadsheet from "./src";
export const runtime = import.meta.glob(`/demo/**`, { eager: true });
startApp(runtime, [spreadsheet]);
if (import.meta.hot) {
import.meta.hot.accept((newModule) => {
startApp(newModule?.runtime, [spreadsheet]);
});
}
export default spreadsheet;
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/parts.ts:
--------------------------------------------------------------------------------
```typescript
export const PART_LABEL = "label";
export const PART_LABELED_ITEM = "labeledItem";
export const PART_INPUT = "input";
export const PART_START_ADORNMENT = "startAdornment";
export const PART_END_ADORNMENT = "endAdornment";
export const PART_TRACK = "track";
export const PART_RANGE = "range";
export const PART_THUMB = "thumb";
```
--------------------------------------------------------------------------------
/xmlui/src/components/Input/InputLabel.module.scss:
--------------------------------------------------------------------------------
```scss
@use "../../components-core/theming/themes" as t;
@layer components {
.inputLabel {
cursor: pointer;
color: t.$textColor-subtitle;
padding-bottom: t.$space-1;
&.disabled {
cursor: not-allowed;
color: t.$textColor--disabled;
}
}
.required {
color: t.$textColor-InputLabel-required;
}
}
```
--------------------------------------------------------------------------------
/tools/create-app/templates/types.ts:
--------------------------------------------------------------------------------
```typescript
import { PackageManager } from '../helpers/get-pkg-manager'
export type TemplateType = 'default'// | 'app' | 'default-tw' | 'app-tw'
export type TemplateMode = 'js' | 'ts'
export interface InstallTemplateArgs {
appName: string
root: string
packageManager: PackageManager
template: TemplateType
useGit: boolean;
}
```
--------------------------------------------------------------------------------
/xmlui/src/abstractions/FunctionDefs.ts:
--------------------------------------------------------------------------------
```typescript
// XMLUI executes its code asynchronously. This type defines functions that can be
// used in XMLUI as actions or event handlers.
export type AsyncFunction = (...args: any) => Promise<any> | any;
// XMLUI executes some code synchronously. This type defines those functions' signature
export type SyncFunction = (...args: any) => any;
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/rendering/UnknownComponent.module.scss:
--------------------------------------------------------------------------------
```scss
@use "../theming/themes" as themes;
.errorOverlay{
background-color: rgba(255,162,162, 0.8);
border-radius: 10px;
padding: 8px;
min-width: 200px;
}
.title{
background-color: themes.$color-danger-500;
color: white;
font-weight: themes.$fontWeight-light;
border-radius: 4px;
padding-left: 4px;
padding-right: 8px;
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/Breakout/BreakoutNative.tsx:
--------------------------------------------------------------------------------
```typescript
import type { ReactNode } from "react";
import styles from "./Breakout.module.scss";
type Props = {
children?: ReactNode;
style?: React.CSSProperties;
};
export const Breakout = ({ children, style, ...rest }: Props) => {
return (
<div {...rest} style={style} className={styles.breakout}>
{children}
</div>
);
};
```
--------------------------------------------------------------------------------
/tools/create-xmlui-hello-world/package.json:
--------------------------------------------------------------------------------
```json
{
"name": "create-xmlui-hello-world",
"version": "0.1.0",
"description": "Create a minimal HelloWorld XMLUI component",
"main": "index.js",
"bin": {
"create-xmlui-hello-world": "./index.js"
},
"scripts": {
"build": "node index.js"
},
"keywords": ["xmlui", "component", "hello-world"],
"author": "",
"license": "ISC"
}
```
--------------------------------------------------------------------------------
/docs/public/pages/tutorial-01.md:
--------------------------------------------------------------------------------
```markdown
# XMLUI Invoice
XMLUI Invoice is a demo app that illustrates a range of XMLUI components and patterns. You can [download](https://github.com/xmlui-org/xmlui-invoice/releases/latest/download/xmlui-invoice.zip) the final version to run, explore, and modify. In this tutorial we'll build the app step by step.
```
--------------------------------------------------------------------------------
/xmlui/src/abstractions/ExtensionDefs.ts:
--------------------------------------------------------------------------------
```typescript
import type { ComponentRendererDef, CompoundComponentRendererInfo } from "./RendererDefs";
import type { ThemeDefinition } from "./ThemingDefs";
export type ComponentExtension = ComponentRendererDef | CompoundComponentRendererInfo;
export interface Extension{
namespace?: string;
components?: ComponentExtension[];
themes?: ThemeDefinition[];
}
```
--------------------------------------------------------------------------------
/packages/xmlui-devtools/index.ts:
--------------------------------------------------------------------------------
```typescript
import { startApp } from "xmlui";
import DevTools from "./src";
export const runtime = import.meta.glob(`/demo/**`, { eager: true });
startApp(runtime, DevTools);
if (import.meta.hot) {
import.meta.hot.accept((newModule) => {
startApp(newModule?.runtime, DevTools);
});
}
export default DevTools;
export { Editor } from "./src/editor/Editor";
```
--------------------------------------------------------------------------------
/packages/xmlui-pdf/src/LazyPdfNative.tsx:
--------------------------------------------------------------------------------
```typescript
import { Suspense, lazy, forwardRef } from "react";
const Pdf = lazy(() => import("./Pdf"));
interface Props {
src?: string;
data?: any; // Binary data for PDF content
}
export const LazyPdf = forwardRef((props: Props, ref) => {
return (
<Suspense fallback={<div>Loading...</div>}>
<Pdf {...props} ref={ref} />
</Suspense>
);
});
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/svg/trending-up.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-trending-up" 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="M3 17l6 -6l4 4l8 -8" />
<path d="M14 7l7 0l0 7" />
</svg>
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/svg/trending-down.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-trending-down" 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="M3 7l6 6l4 -4l8 8" />
<path d="M21 10l0 7l-7 0" />
</svg>
```
--------------------------------------------------------------------------------
/xmlui/src/components/Input/InputAdornment.module.scss:
--------------------------------------------------------------------------------
```scss
@use "../../components-core/theming/themes" as t;
@layer components {
.wrapper {
display: flex;
gap: t.$space-2;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: t.$textColor-subtitle;
}
.clickable {
cursor: pointer;
&:hover {
opacity: 0.8;
}
&:focus {
outline: none;
}
}
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/ModalDialog/Dialog.module.scss:
--------------------------------------------------------------------------------
```scss
@use "../../components-core/theming/themes" as t;
@layer components {
.dialogContent {
display: flex;
flex-direction: column;
}
.dialogActions {
&:not(:empty) {
margin-top: t.$space-4;
}
}
@media (min-width: 40em) {
.dialogActions {
display: flex;
justify-content: flex-end;
gap: t.$space-4;
}
}
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/StickyBox/StickyBox.md:
--------------------------------------------------------------------------------
```markdown
%-PROP-START to
```xmlui-pg copy display name="Example: to" height="200px"
<App>
<StickyBox to="top">
This part of the UI sticks to the top
</StickyBox>
<Stack backgroundColor="red" height="80px" width="100%" />
<Stack backgroundColor="green" height="80px" width="100%" />
<Stack backgroundColor="blue" height="80px" width="100%" />
</App>
```
%-PROP-END
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/svg/stars.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor">
<path d="m354-287 126-76 126 77-33-144 111-96-146-13-58-136-58 135-146 13 111 97-33 143ZM233-120l65-281L80-590l288-25 112-265 112 265 288 25-218 189 65 281-247-149-247 149Zm457-560 21-89-71-59 94-8 36-84 36 84 94 8-71 59 21 89-80-47-80 47ZM480-481Z"/>
</svg>
```
--------------------------------------------------------------------------------
/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,
},
};
```