# tosijs-ui v1.15.1

Simple, robust web-components for use with tosijs or anything else.

- Docs: https://ui.tosijs.net
- Source: https://github.com/tonioloewald/tosijs-ui
- npm: https://www.npmjs.com/package/tosijs-ui

## Documentation

Full documentation, with live code examples, is at the links below.

Live examples run inline on the shared page by default (not sandboxed):
each has its own `preview` element, but they share one tosijs module, so
`tosi()` state singletons are shared across every example on a page. This is
deliberate (it shows tosi isolation and lets you drive demos via the global
singleton). Namespace example state with unique top-level keys so examples
don't clobber each other; the `iframe` attribute isolates DOM/CSS, not state.

Running this project locally (`bun start`), the dev server injects a
localhost-gated dev channel, so an agent can DRIVE the live page with the `hj`
CLI — `hj navigate`, `hj eval`, `hj tree` — instead of inferring behaviour from
source. Injected at serve time only, never in the built output. Note that no
requestAnimationFrame runs under `hj eval`, and tosijs renders are rAF-driven, so
use it to inspect STATE; a painted-output check needs a real test lane.

## Pages

- https://ui.tosijs.net/babylon-3d/ — 3d
  A [babylonjs](https://www.babylonjs.com/) wrapper.
- https://ui.tosijs.net/ab-test/ — ab-test
  `<tosi-ab>` provides a simple method for implementing A|B-testing.
- https://ui.tosijs.net/adopting-the-doc-system/ — Adopting the doc system
  A first hour with tosijs-ui/site: the minimum that works, how to tell it is actually working, and the four things that fail silently while the site still serves 200s.
- https://ui.tosijs.net/appendices/ — Appendices
  Reference material on the library's own systems — the doc browser, the
- https://ui.tosijs.net/carousel/ — carousel
  This is a minimalist carousel component that supports the usual stuff.
- https://ui.tosijs.net/code-editor/ — code
  A [CodeMirror 6](https://codemirror.net/) wrapper.
- https://ui.tosijs.net/color-input/ — color input field
  This is a color input field that supports opacity
- https://ui.tosijs.net/components/ — Components
  The goal of this library is not to replace HTML elements that already work very well, such as `<input>`, `<textarea>`...
- https://ui.tosijs.net/crud/ — crud
  Search, list, edit — [`<tosi-table>`](/data-table/) and
- https://ui.tosijs.net/dialog/ — dialog
  `<tosi-dialog>` is a simple wrapper around the standard HTML `<dialog>` element designed
- https://ui.tosijs.net/diff/ — diff
  `<tosi-diff>` renders a unified, line-by-line diff between two strings — the kind
- https://ui.tosijs.net/doc-browser/ — doc-browser
  The `tosijs-ui` library provides everything you need to create a self-documented testbed similar
- https://ui.tosijs.net/doc-site-system/ — Doc-Site System
  How tosijs-ui's static, pre-rendered, hydrating documentation-site system works — and how to adopt it (tosijs-ui/site) in your own project.
- https://ui.tosijs.net/doc-system/ — doc-system
  `<tosi-doc-system>` turns a folder of pre-rendered, statically-served pages into a
- https://ui.tosijs.net/docs/ — docs
  Utility for extracting documentation from markdown files and inline comments in source code.
- https://ui.tosijs.net/drag-and-drop/ — drag & drop
  A lightweight library that leverages HTML5 drag and drop behavior.
- https://ui.tosijs.net/editable-rect/ — editable-rect
  `<tosi-editable>` (`editableRect` is the `ElementCreator` and `EditableRect` is the class) is an element
- https://ui.tosijs.net/component/ — example
  `<tosi-example>` makes it easy to insert interactive code examples in a web page. It
- https://ui.tosijs.net/filter-builder/ — filter
  Automatically creates `ArrayFilter` functions `(a: any[]) => any[]` based on the query you build using its
- https://ui.tosijs.net/float/ — float
  A floating, potentially draggable user interface element.
- https://ui.tosijs.net/form-components/ — Form Components
  Form-associated custom elements — inputs, selects, and editors that participate
- https://ui.tosijs.net/form/ — forms
  `<tosi-form>` and `<tosi-field>` can be used to quickly create forms complete with
- https://ui.tosijs.net/full-screen-demo/ — Full-screen layout
  A page using layout: full-screen — no reading measure, no nav, the content is the viewport.
- https://ui.tosijs.net/gamepad/ — gamepads
  A couple of utility functions for dealing with gamepads and XRInputs.
- https://ui.tosijs.net/hash-state/ — hash-state
  Key-value state in the page's URL hash: shareable, bookmarkable, and back/forward work
- https://ui.tosijs.net/header/ — header
  A simple flex header. Compose it with `elastic()` and `spacer()` from
- https://ui.tosijs.net/helper-libraries/ — Helper Libraries
  General purpose utilities and behaviors — routing, theming, localization, sorting, drag-and-drop, and other building ...
- https://ui.tosijs.net/highlight-block/ — highlight-block
  `<tosi-highlight>` pretty-prints a static code sample. It is **not** an editor — for that
- https://ui.tosijs.net/highlight-styles/ — highlight-styles
  The syntax-highlighting token palette, on its own.
- https://ui.tosijs.net/icon-composition/ — Icon Composition
  This is a toy for playing with the icon composition language introduced in tosijs-ui 1.5.10. It's documented [here](/...
- https://ui.tosijs.net/icons/ — icons
  `icons` is a proxy that generates an `ElementCreator` for a given icon on demand,
- https://ui.tosijs.net/icon-svg/ — iconSvg — icon markup without a DOM
  (The subpath `tosijs-ui/icon-svg` is the DOM-free entry point — import it that way in a
- https://ui.tosijs.net/kitchen-sink/ — kitchen sink
  This is a testbed for checking styles
- https://ui.tosijs.net/layout/ — layout
  Thin structural layout components that wrap CSS flexbox and grid.
- https://ui.tosijs.net/live-theme/ — live-theme
  A live theme editor that lets you tweak theme colors in real time.
- https://ui.tosijs.net/localize/ — localize
  `tosijs-ui` provides support for localization via the `localize` method and the `<tosi-locale-picker>`
- https://ui.tosijs.net/bodymovin-player/ — lottie / bodymovin
  A [lottie](https://airbnb.io/lottie/#/web) (a.k.a. **bodymovin**) player.
- https://ui.tosijs.net/make-icon-data/ — make-icon-data
  Ingests SVG files from icon directories and generates an icon-data module
- https://ui.tosijs.net/make-sorter/ — makeSorter
  I'm always confusing myself when writing sort functions, so I wrote `makeSorter()`. It's
- https://ui.tosijs.net/mapbox/ — map
  A [mapboxgl](https://docs.mapbox.com/mapbox-gl-js/api/) wrapper.
- https://ui.tosijs.net/markdown-viewer/ — markdown
  `<tosi-md>` renders markdown using [marked](https://www.npmjs.com/package/marked).
- https://ui.tosijs.net/menu/ — menu
  Being able to pop a menu up anywhere is just so nice, and `tosijs-ui` allows menus
- https://ui.tosijs.net/migrating/ — Migrating from older versions
  Breaking changes and migration checklists for tosijs-ui releases you may be upgrading past — 1.11.0's validator seam, 1.9.1's Node resolution fix, 1.7.0's editor change and the 1.3.0 xinjs-ui rename.
- https://ui.tosijs.net/month/ — month
  This is a component for displaying a month and selecting days within that month.
- https://ui.tosijs.net/natural-compare/ — naturalCompare
  Comparing values the way a reader expects, for sorting tables, navs and lists.
- https://ui.tosijs.net/notifications/ — notifications
  `TosiNotification` provides a singleton custom `<tosi-notification>` element that manages
- https://ui.tosijs.net/one-source-every-artifact/ — One Source
  How the tosijs doc system turns a single corpus of doc-comments and markdown into a static SEO site, a self-testing live playground with in-browser TypeScript, an ePub and PDF, and an agent-debuggable page — all deploying as static files.
- https://ui.tosijs.net/password-strength/ — password strength
  Just wrap it a `<tosi-password-strength>` element around an `<input>`
- https://ui.tosijs.net/pocket-bar/ — pocket bar
  A **pocket toolbar**: a single icon at rest that expands into a bar of your controls
- https://ui.tosijs.net/pop-float/ — popFloat
  There are so many cases in user-interfaces where it's useful to pop-up a floating
- https://ui.tosijs.net/rating/ — rating
  `TosiRating` / `<tosi-rating>` provides a drop-in replacement for an `<input>`
- https://ui.tosijs.net/release-notes/ — release-notes
  Assembles a CHANGELOG section from **annotations in commit messages**, so release notes
- https://ui.tosijs.net/rich-text/ — rich text
  `<tosi-rich-text>` is a simple and easily extensible `document.execCommand` WYSIWYG editor with some conveniences.
- https://ui.tosijs.net/router/ — router
  A lightweight client-side router for single-page applications. Supports
- https://ui.tosijs.net/schema-form/ — schema-form
  A form generated from a [JSON Schema](https://json-schema.org/), with validation.
- https://ui.tosijs.net/via-tag/ — scriptTag & styleSheet
  If you need to load an old school (cjs) javascript or css library via cdn then use these two functions.
- https://ui.tosijs.net/segmented/ — segmented select
  This is a fairly general-purpose segmented select control.
- https://ui.tosijs.net/select/ — select
  `<tosi-select>` (`tosiSelect` is the `ElementCreator`) is a replacement for the lamentable
- https://ui.tosijs.net/side-nav/ — sidebar
  The default layout for iOS / iPadOS apps is to hide the sidebar when displaying content on small
- https://ui.tosijs.net/size-break/ — size-break
  While we wait for enough browsers to implement [container-queries](https://www.w3.org/TR/css-contain-3/),
- https://ui.tosijs.net/sizer/ — sizer
  This is a super-simple component that you can put in a fixed size element allowing it to be resized
- https://ui.tosijs.net/data-table/ — table
  A virtual data-table, configurable via a `columns` array (which will automatically be generated if not provided),
- https://ui.tosijs.net/tab-selector/ — tabs
  `<tosi-tabs>` creates a `tabpanel` for its children, creating a `tab` for each based on its
- https://ui.tosijs.net/tag-list/ — tag-list
  Building a tag-list from standard HTML elements is a bit of a nightmare.
- https://ui.tosijs.net/theme/ — theme
  The theme system provides consistent CSS variables across all tosijs-ui components,
- https://ui.tosijs.net/tooltip/ — tooltip
  Automatic tooltips for any element with `data-tooltip` or `title` attributes.
- https://ui.tosijs.net/ — tosijs-ui
  A small, fast library of standards-based web components (data tables, dialogs, forms, rich text, carousels, and more) built on tosijs — smaller and faster than a React app, with no virtual DOM.
- https://ui.tosijs.net/track-drag/ — trackDrag
  Sometimes you want to track a mouse-drag or touch-drag operation without messing around.
- https://ui.tosijs.net/value-renderer/ — valueRenderer
  `valueRenderer(type)` turns a compact **type string** into a reusable renderer for