SACRVM APPKIT

A complete UI system for tool-style web apps — launcher hubs, workspace pages, floating windows and seed-driven themes. Zero dependencies, zero build: plain HTML, Custom Elements and CSS tokens, served as-is.

Style Guide

Every token, component and pattern, live — and built with the kit itself.

App · start here

Orb Lab

The workspace layout as a running tool: sidebar controls, pan/zoom viewport, log, HUD and a floating help window.

App · demo

Pixel Lab

The pixel workbench as a small sprite editor: integer-zoom canvas, tool ribbon, layers, filmstrip with onion skin, export and a shortcut sheet.

App · demo

About This Kit

An app that is one custom element in one script, lazily loaded and mounted into a floating window through the app contract.

App · opens in a window

Build an App

The app contract end to end: the three hooks, the manifest, publishing — and a template repository to start from.

App · write your own

Roadmap

What is done, what comes next, and what this kit deliberately will not do.

App · incl. non-goals

Download

The kit/ folder plus the licence, ready to drop into your project.

v2.23.0 · ZIP

Source

The whole kit, the style guide, this shell — one repository, MIT licensed.

GitHub

Get it

Vendoring is the primary model: copy the versioned kit/ folder into your own repo and upgrade when you choose. No install step, no lockfile, fully offline.

Download the ZIP, or clone the repo.
Copy kit/ into your project.
Link the stylesheet and the components you use.

index.html

<link rel="stylesheet" href="kit/css/ui.css">

<script defer src="kit/js/lib/globals.js"></script>
<script defer src="kit/js/lib/icons.js"></script>
<script defer src="kit/js/components/sac-icon.js"></script>
<script defer src="kit/js/components/sac-toggle.js"></script>

<sac-toggle label="Ready" checked></sac-toggle>

kit/templates/ holds copy-out skeletons for a launcher hub, a tool page, a list/detail page, an SPA shell and this app shell. Older releases: all releases.

Custom elements	53, in 49 files
Helper modules	13 — router, icons, apps, app, fs, identity, colour, pan/zoom, hotkeys, dialog, scope, help loader, globals
App contract	`mount(context)` with theme, route, deep links, storage (`fs`), `identity` and `host` — apps are complete, hosts inject
Dependencies	None. Vendored: marked + DOMPurify, only for the markdown help loader
Build step	None, by design — `npx serve .` and reload
Theming	Nine seed colours plus a light-or-dark flag; everything else derived with `color-mix()`
Contrast	State colours solved to WCAG 2.1 AA in both themes
Translation	Every kit string behind `sac.i18n`, English inline as the fallback
Browsers	Chromium, Firefox and Safari — Shadow DOM, Custom Elements, `color-mix()`
Licence	MIT