'%20d='M64%205c-3%2018-15%2026-13%2043-9-5-13-13-13-22C20%2043%2015%2062%2022%2082c7%2022%2023%2037%2042%2041%2022-4%2039-21%2043-43%203-17-3-32-18-45%202%2011%200%2018-6%2025C84%2036%2075%2019%2064%205Z'%20/%3e%3cpath%20fill='url(%23heat)'%20d='M64%2045c-2%2015-14%2022-13%2038-5-4-8-9-9-15-7%2010-8%2020-4%2030%205%2012%2014%2020%2026%2023%2013-3%2023-12%2027-25%203-11%200-20-8-29%200%207-2%2012-6%2016%201-16-5-27-13-38Z'%20/%3e%3c!--%20The%20glasses%20render%20as%20two%20stacked%20stroke%20groups:%20a%20pale%20warm%20casing%20under%20a%20dark%20warm-charcoal%20stroke.%20The%20casing%20keeps%20the%20dark%20strokes%20legible%20where%20they%20leave%20the%20flame%20body%20(temple%20tips,%20lower%20rims)%20on%20dark%20backgrounds,%20and%20reads%20as%20a%20rim%20light%20against%20the%20flame%20on%20light%20ones.%20--%3e%3cg%20fill='none'%20stroke='%23ffe3ae'%20stroke-opacity='0.85'%20stroke-linecap='round'%20stroke-linejoin='round'%3e%3cpath%20stroke-width='14'%20d='M7%2063c12-4%2027-5%2043-1M78%2062c16-4%2031-3%2043%201'/%3e%3crect%20x='12'%20y='58'%20width='46'%20height='35'%20rx='13'%20stroke-width='14'/%3e%3crect%20x='70'%20y='58'%20width='46'%20height='35'%20rx='13'%20stroke-width='14'/%3e%3cpath%20stroke-width='13'%20d='M57%2066c5-4%209-4%2014%200'/%3e%3c/g%3e%3cg%20fill='none'%20stroke='%2333221b'%20stroke-linecap='round'%20stroke-linejoin='round'%3e%3cpath%20stroke-width='8'%20d='M7%2063c12-4%2027-5%2043-1M78%2062c16-4%2031-3%2043%201'/%3e%3crect%20x='12'%20y='58'%20width='46'%20height='35'%20rx='13'%20stroke-width='8'/%3e%3crect%20x='70'%20y='58'%20width='46'%20height='35'%20rx='13'%20stroke-width='8'/%3e%3cpath%20stroke-width='7'%20d='M57%2066c5-4%209-4%2014%200'/%3e%3c/g%3e%3c/svg%3e){kind=small}
@happyvertical/smrt-ui
Provider-free Svelte 5 components for accessible forms, agent-assisted controls, feedback, collections, charts, overlays, layouts, and themes.
What it gives you
Provider-free Svelte 5 components for accessible forms, agent-assisted controls, feedback, collections, charts, overlays, layouts, and themes.
- 01One component contract for semantics, keyboard use, state, themes, and testing
- 02Forms that chat, voice, tutorials, and tests can address through a consent-aware registry
- 03Reusable collection, table, chart, feedback, disclosure, and overlay patterns with stable row identity
- 04Package-owned working examples in the shared playground
The leaf of the Svelte stack
The package depends only on svelte and smrt-types, so domain packages take its primitives without depending on smrt-svelte. It owns the visual primitives and the Provider-free form controls. smrt-svelte owns the Provider-backed rich Form and the specialized inputs, and re-exports the base inputs from here. Identity views such as RoleBadge and MembershipList live here because they import no domain package.
Use canonical tokens and aliases intentionally
Five presets ship: material, glass, studio, smrt, and happyvertical. Themes use Material 3 names as canonical tokens and retain additive aliases for migration: spacing and radius aliases such as extra-small and sm, plus motion aliases from short1 through long4. Aliases preserve older consumers; new design work should name the canonical semantic token.
A shared component standard
Foundation controls use native semantics, stable server-safe IDs, and Svelte 5 bindable state. They have visible focus and validation states, reduced-motion rules, semantic design tokens, and focused accessibility tests. Every exported component root carries data-smrt-component, and internal parts carry data-smrt-part; both are public styling hooks.
Forms agents can assist with
Controls can publish their identity, meaning, options, constraints, sensitivity, and current state. An adapter may point to a field or propose a change, while the form keeps consent and secret handling explicit.
Learn how agent-assisted forms work →Reusable collection surfaces
CollectionToolbar, CollectionList, and DataTable cover search, selection, list or grid presentation, filtering, pagination, expansion, density, and empty or loading states. DataTable keeps a stable row key through local transforms and renders footer rows and column summaries. It exposes serializable controller state when the application owns filtering, sorting, or paging.
Charts without a report dependency
Chart from /charts renders bar, line, pie, table, and stat from a structural ChartData value. A report or widget package hands it rows instead of importing a charting library. smrt-reports draws its runtime report results with it. /charts/format holds the minor-unit number formatting and loads in plain Node.
Feedback and focused tasks
Alerts, toasts, progress, meters, drawers, popovers, disclosure, and accordions share the same status, focus, keyboard, motion, and theme conventions as the form controls.
Phone surfaces and capture
PhoneSheet replaces drawers and centered modals on a phone, as a full page or a sheet that closes on a swipe. WorkingStrip shows a transport-neutral working status with pause, review, stop, and close controls. FormActionBar groups form actions and fixes them to the bottom on phones. CameraCapture and SignaturePad post their result with the native form.
One calendar entry point
CalendarView renders month and week grids in a named time zone and a phone agenda. Its date model is Svelte-free, so a route can compute day keys on the server. Calendar and DayView remain as deprecated exports; they computed days in host-local time.
Focused public imports
Import from /forms, /ui, /feedback, /data, /layout, /calendar, /charts, /chat, /i18n, /registry, and /themes. Each import then identifies the applicable foundation part. The Svelte-free /form-retry, /data-surface, /charts/format, and /themes/presets entries are safe in plain Node. Server adapters take their protocol limits from /data-surface, not from the /data component barrel. The package root remains a compatibility barrel.
Package UI
Component catalog and public contracts
Browse by the job you are doing. Each group shows its focused import path; the Playground tab renders the working controls and composed patterns.
Fields and form structure
Build labeled forms, group related fields, and make validation errors clear and visible.
@happyvertical/smrt-ui/formsText and structured input
Collect free text, selected options, related records, multiple values, tags, dates, times, files, and dictated speech.
@happyvertical/smrt-ui/formsChoices and values
Use the control that matches the decision instead of rebuilding choice behavior.
@happyvertical/smrt-ui/formsCapture
Take a photo from the device camera or a drawn signature, and submit it with the surrounding native form.
@happyvertical/smrt-ui/formsAgent interaction contracts
Give chat, voice, tutorial, or test adapters a stable way to inspect and assist with forms. Agents stage proposals; a person confirms them in StagedControlReview.
@happyvertical/smrt-ui/formsActions and display
Common actions and compact display primitives with one theme and accessibility contract.
@happyvertical/smrt-ui/uiDisclosure and popovers
Reveal supporting information without inventing new interaction rules.
@happyvertical/smrt-ui/uiFeedback and overlays
Explain status and progress, or open a focused task while preserving keyboard and focus behavior. PhoneSheet and WorkingStrip are the phone surfaces.
@happyvertical/smrt-ui/feedbackCollections and tables
Search, select, filter, page, and present typed collections with durable, serializable table view state.
@happyvertical/smrt-ui/dataCharts
One renderer for bar, line, pie, table, and stat charts over structural ChartData. The /charts/format entry is Svelte-free.
@happyvertical/smrt-ui/chartsChat primitives
Message, reaction, and typing primitives that smrt-chat composes; they import no chat runtime.
@happyvertical/smrt-ui/chatLayout
Compose the page around the working controls without tying the package to an application domain.
@happyvertical/smrt-ui/layoutDisplay and status
Render common values and compact status consistently.
@happyvertical/smrt-uiCalendar
Time-zone-aware month and week grids with a phone agenda, over a Svelte-free date model. Calendar and DayView are deprecated.
@happyvertical/smrt-ui/calendarMembership and permission UI
Domain-neutral views typed against shared membership, role, and permission contracts.
@happyvertical/smrt-uiModule UI registry
Register package-owned working surfaces without importing domain packages into the foundation.
@happyvertical/smrt-ui/registryInternationalization
Render translated text from the shared client message context.
@happyvertical/smrt-ui/i18nThemes
Apply the shared design tokens and light, dark, or system color preference.
@happyvertical/smrt-ui/themesPackage previews
Try the working views
These previews are owned by the package and use its public components. Mock mode is intended for safe browsing; live mode appears only where the package supports it.
Generated interface
REST
The exact route set comes from each model's @smrt({ api }) policy
and the application manifest—not from a second controller definition.
This package supports the runtime or build pipeline; it does not define a representative CRUD resource of its own.
Generated interface
MCP
AI tools are generated from the methods you explicitly include. Their inputs are validated against the same model metadata used by REST and CLI.
This package is itself infrastructure, UI, or tooling. Its capabilities are consumed by generated app MCP servers rather than exposed as a model resource.
Browser-native agent interface
WebMCP
The generated web definitions carry the same tool names, descriptions, and JSON Schema
inputs as MCP. smrt-web registers them with document.modelContext.
This package does not define a representative browser tool itself. Its models can still participate when an application exposes them through generated web collections.
Generated interface
CLI
The app CLI turns manifest resources into predictable operator commands while keeping package-specific actions close to their models.
Use this package through its documented build or runtime entry points. It does not contribute a representative generated resource command.