digital-garbage
835fab7864
One declaration does three jobs: renders the panel, carries the defaults, names
the values that come back. A module writes no DOM and reads no DOM.
Validation refuses rather than repairs -- unknown type, a renderer its type does
not have, a label that is not text, a default outside its own bounds, a when
naming a key the module never declared. A module that is wrong does not get a
best-effort panel; it does not load, and says why once.
Ordering is by declared relation and stage, never priority numbers, and a cycle
drops only the modules in it. Compatibility is by trait, never model name.
The shell hands a module { composer, values, on, shell } and nothing else: no
node, no document, no kit internals. It cannot style anything because it is
never given anything that could.
catalogue/hide.html puts one good module and five broken ones through the real
shell and shows the result: one panel, five absent, no placeholders. The lint
fixtures make the scanner prove it catches each rule, so a clean scan means
something.
First slice: modules/system/appearance. Two settings, an optional ui.js, and
clicking Light actually turns the app light.
26 lines
1007 B
HTML
26 lines
1007 B
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Composer elements</title>
|
|
<script src="/funpack/app/shell/theme.js"></script>
|
|
<link rel="stylesheet" href="/funpack/app/composer/composer.css">
|
|
<link rel="stylesheet" href="/funpack/app/catalogue/catalogue.css">
|
|
</head>
|
|
<body>
|
|
<header class="cat-bar">
|
|
<h1>Composer elements</h1>
|
|
<div class="cat-bar-spacer"></div>
|
|
<a class="cat-link" href="/funpack/app/catalogue/index.html">Tokens →</a>
|
|
<a class="cat-link" href="/funpack/app/catalogue/hide.html">Hide-don't-warn</a>
|
|
<button id="toggle-panes" aria-pressed="true">Both themes</button>
|
|
<button data-theme-set="dark">Dark</button>
|
|
<button data-theme-set="light">Light</button>
|
|
<button data-theme-set="auto">Auto</button>
|
|
</header>
|
|
<main class="cat-page" id="catalogue"></main>
|
|
<script type="module" src="/funpack/app/catalogue/elements.js"></script>
|
|
</body>
|
|
</html>
|