A reusable Leptos component layer built on Leptix primitives for Rust web applications. It owns semantic controls and browser interaction. Applications own CSS, fonts, themes, translated labels, navigation destinations, persistence and API policy.
Leptix tabs are available through loom_ui::primitives::tabs. They reuse pinned upstream state and keyboard behaviour. Loom TabsList adds a small Home/End correction; RawTabsList exposes the unchanged upstream component. Existing Button, Field, Tabs, Tab, TabPanel, Dialog and Sheet exports remain as compatibility controls from the first MedTracker extraction. Sheet uses the same native modal behaviour as Dialog; the application supplies its positioning class.
Leptix 0.1.6 dialogs currently abort during native SSR in the previous evaluation. Do not replace the working native dialogs until that defect is fixed and SSR/hydration/browser contracts pass. This initial repository is not a completed migration of every control to Leptix. See the architecture.
Replace the revision placeholder with the full commit SHA you have reviewed. Private repository consumers need GitHub access. For server rendering:
[dependencies]
loom-ui = { git = "https://github.com/damacus/loom-ui.git", rev = "<reviewed full commit SHA>" }For a separate hydration build, disable the default server feature:
loom-ui = { git = "https://github.com/damacus/loom-ui.git", rev = "<same full commit SHA>", default-features = false, features = ["hydrate"] }Leptos is pinned to 0.8.21. Use the same version in the application. The MIT-licensed package verifies independently with cargo package. It has no Rails files or MedTracker dependencies. It is not published to crates.io. Consumers use a versioned Git dependency pinned to an exact revision. Keep each application Cargo.lock committed and use --locked in CI. Local path dependencies are useful for development.
use loom_ui::{Button, ButtonType, Field};
use leptos::prelude::*;
view! {
<Field id="email" name="email" label="Email" input_type="email"
class="application-input" attr:autocomplete="email"/>
<Button kind=ButtonType::Submit class="application-primary">"Save"</Button>
}Button defaults to type=button. Field associates its label, optional hint and error with the input. Extra Field attributes go to the input; wrapper_class, label_class and message_class are explicit styling hooks. Children and application attributes/events use Leptos conventions. IDs must be unique in the document. Supply a valid initial selection for each tab list; disabled choices cannot be selected. Navigation tabs need caller-supplied href values.
Serve BROWSER_RUNTIME as JavaScript before the application's entry script. It defines window.LoomUI and performs no automatic DOM mutation. For server-rendered pages, call init after the DOM exists. For hydrated pages, call it after Leptos hydration has completed:
const controls = window.LoomUI.init(document);
controls.dispose();Repeated initialisation for the same root returns the same controller. Dispose removes its listeners, closes overlays opened by the controller and releases its scroll lock. A root may be Document or a container element; do not initialise overlapping roots. Shadow roots and iframe integration are not covered by this first contract.
Use data-ui-open="dialog-id" on an opener and data-ui-close="dialog-id" on a close control. Dialog and Sheet render native dialog elements. The runtime calls showModal, delegates modality and Escape handling to the browser, closes on backdrop clicks, preserves scroll styles and restores connected openers. Native keyboard traversal can enter browser chrome; background page controls remain unavailable. An SSR open attribute is a visible progressive enhancement state, not native modality until init promotes it with showModal. Use a browser with native dialog support.
Tabs default to local panel activation, with arrow keys, Home and End, disabled-choice skipping and one keyboard tab stop. TabsMode::Navigation preserves normal anchor destinations and navigates on arrow keys. A ui:tab-change event is emitted for local selection. Applications remain responsible for saving their own data.
Legacy application markup can opt in through modalSelector, triggerAttribute, closeAttribute, tabsSelector, navigation, focusStorageKey and scrollLockClass. These options configure existing selectors and storage names; they do not inject application styles. Initialise once with the final options. Use dispose before changing those options.
Run tasks from this repository root:
task deps
task test
task fmt
task lint
task package
task browser:install
task test:browser
task hydrate:tool
task hydrate:build
task test:hydrated
The unbranded consumer renders the same controls for SSR and hydration, including upstream Leptix tabs. The hydrated tabs test checks disabled-choice skipping, panel activation, keyboard navigation, matching ARIA targets and retention of server-rendered nodes. Browser contracts exercise native form controls, local tabs, real modality, background focus and accessibility exclusion, opener restoration, initially open overlays, lifecycle, nested overlays, backdrop dismissal and retained application navigation. The hydrated run also preserves SSR elements and exercises a Leptos application event. No CSS values are copied into the library.
Keep the public API and runtime compatible within each release series. Publish a release tag only after server rendering, actual hydration, browser contracts and package verification pass. Consumers pin the full commit revision behind the tag; update the manifest and lock together through a reviewed change. Introduce incompatible public API changes in a new release series and document consumer migration. The initial series is 0.1.