@valancex/cli 0.13.0 → 0.14.0

package/dist/theme.js

@@ -0,0 +1,44 @@
+// The project's theme. A project that writes none has the default theme (Tier 1: nothing to do, and every primitive of the portable core is styled); a project that has a `theme/` directory with a
+// `theme.json` (Tier 2) uses it instead, whole: its token documents by mode and its recipes. A recipe's `escape` block (Tier 3) is the marked way to a CSS property outside the contract, for the web.
+// The stylesheet is compiled here, at build time; nothing is computed in the browser.
+import { existsSync } from "node:fs";
+import { join, relative } from "node:path";
+import { checkTheme, compileWeb, coverageOf, defaultInputs, loadTheme, resolveForDesktop, root as styleRoot } from "@valancex/style";
+import { diagnostic } from "./diagnostics.js";
+export const THEME_DIR = "theme";
+/** The theme file the project uses: its own `theme/theme.json`, else the default theme's. */
+export const themeFileOf = (root) => {
+    const own = join(root, THEME_DIR, "theme.json");
+    return existsSync(own) ? { file: own, custom: true } : { file: join(styleRoot, "themes", "default", "theme.json"), custom: false };
+};
+const asDiagnostic = (each) => diagnostic(each.file, 0, each.code, `${each.path === undefined || each.path === "" ? "" : `${each.path}: `}${each.message}`);
+/** Loads and checks the project's theme. */
+export const themeOf = (root) => {
+    const { file, custom } = themeFileOf(root);
+    const loaded = loadTheme(file, (path) => relative(root, path).split("\\").join("/"));
+    const inputs = defaultInputs();
+    const checked = checkTheme(loaded, inputs);
+    const diagnostics = checked.problems.map(asDiagnostic);
+    return {
+        custom,
+        name: loaded.theme.name,
+        diagnostics,
+        contrast: checked.contrast,
+        ...(diagnostics.length === 0 ? { css: compileWeb(loaded, inputs), desktop: resolveForDesktop(loaded, inputs) } : {}),
+    };
+};
+/** What `vlx theme check` says: the theme's problems, the contrast of every pair it declares, and what each target applies of it. */
+export const themeReport = (root) => {
+    const { file } = themeFileOf(root);
+    const loaded = loadTheme(file, (path) => relative(root, path).split("\\").join("/"));
+    const inputs = defaultInputs();
+    const checked = checkTheme(loaded, inputs);
+    return {
+        custom: themeFileOf(root).custom,
+        name: loaded.theme.name,
+        modes: Object.keys(loaded.modes),
+        diagnostics: checked.problems.map(asDiagnostic),
+        contrast: checked.contrast,
+        coverage: ["web", "desktop"].map((target) => coverageOf(loaded, inputs, target)),
+    };
+};

package/dist/tree.d.ts

@@ -1,5 +1,5 @@
 import type { Schema } from "effect";
-import type { Component } from "@valancex/common";
+import type { Component, PropDeclaration } from "@valancex/common";
 export interface Place {
     readonly file: string;
     readonly line: number;
@@ -12,8 +12,12 @@ export interface Node {
     readonly file: string;
     /** The interface the component declares: present when it declares one (an omitted side is none), absent when its contract is inferred from the template and where it is used. */
     readonly interface?: {
-        readonly props: Readonly<Record<string, Schema.Schema<any, any, never>>>;
+        readonly props: Readonly<Record<string, PropDeclaration>>;
         readonly events: Readonly<Record<string, Schema.Schema<any, any, never>>>;
+        /** The prop that is the component's accessible name, if it declares one. */
+        readonly name?: string;
+        /** The state and commands of one occurrence of the component, if it has any. */
+        readonly unit?: Component["unit"];
     };
     /** The declared components its template writes. */
     readonly uses: ReadonlyArray<string>;
@@ -22,6 +26,14 @@ export interface Node {
 }
 export declare const APPLICATION = "(application)";
 export declare const nameOf: (file: string) => string;
+/** A component as the definition lists it, before two with one name are told apart: how it was listed, and so whether it may replace a built-in. */
+export interface Declared {
+    readonly name: string;
+    readonly file: string;
+    readonly role: "layout" | "override" | "component";
+}
+/** Every component the definition lists, in order and with repeats, each with the role it was listed in. `treeOf` is these, once each by name. */
+export declare const declaredOf: (layout: Component | undefined, overrides: ReadonlyArray<Component>, components?: ReadonlyArray<Component>) => ReadonlyArray<Declared>;
 /** Every component the definition declares, once each by name: `layout`, each `override`, then each of `components`. Who uses whom is read from the templates (`linked`). */
 export declare const treeOf: (layout: Component | undefined, overrides: ReadonlyArray<Component>, components?: ReadonlyArray<Component>) => ReadonlyArray<Node>;
 /**

package/dist/tree.js

@@ -5,13 +5,28 @@ import { basename, dirname, join, relative, resolve, sep } from "node:path";
 import { ENTRY_FILE } from "./project.js";
 export const APPLICATION = "(application)";
 export const nameOf = (file) => basename(file, ".mprx");
+/** Every component the definition lists, in order and with repeats, each with the role it was listed in. `treeOf` is these, once each by name. */
+export const declaredOf = (layout, overrides, components = []) => [
+    ...(layout === undefined ? [] : [{ component: layout, role: "layout" }]),
+    ...overrides.map((component) => ({ component, role: "override" })),
+    ...components.map((component) => ({ component, role: "component" })),
+].map(({ component, role }) => ({ name: nameOf(component.template.mprx), file: component.template.mprx, role }));
 /** Every component the definition declares, once each by name: `layout`, each `override`, then each of `components`. Who uses whom is read from the templates (`linked`). */
 export const treeOf = (layout, overrides, components = []) => {
     const found = new Map();
     for (const declared of [...(layout === undefined ? [] : [layout]), ...overrides, ...components]) {
         const name = nameOf(declared.template.mprx);
         if (!found.has(name)) {
-            const contract = declared.props === undefined && declared.events === undefined ? {} : { interface: { props: declared.props ?? {}, events: declared.events ?? {} } };
+            const contract = declared.props === undefined && declared.events === undefined && declared.unit === undefined
+                ? {}
+                : {
+                    interface: {
+                        props: declared.props ?? {},
+                        events: declared.events ?? {},
+                        ...(declared.name === undefined ? {} : { name: declared.name }),
+                        ...(declared.unit === undefined ? {} : { unit: declared.unit }),
+                    },
+                };
             found.set(name, { name, file: declared.template.mprx, ...contract, uses: [], parents: [] });
         }
     }

package/dist/ui/report.js

@@ -26,5 +26,5 @@ export const BuildProgress = ({ current }) => {
     const at = current === undefined ? STAGES.length : STAGES.findIndex((each) => each.stage === current);
     return (_jsx(Box, { flexDirection: "column", children: STAGES.map(({ stage, label }, index) => index > at ? (_jsxs(Text, { dimColor: true, children: ["\u25CB ", label] }, stage)) : index === at ? (_jsxs(Text, { children: [_jsx(Spinner, {}), " ", label] }, stage)) : (_jsxs(Text, { children: [_jsx(Text, { color: "green", children: "\u2714" }), " ", label] }, stage))) }));
 };
-export const BuildResult = ({ built, seconds }) => (_jsxs(Box, { flexDirection: "column", children: [_jsx(BuildProgress, { current: undefined }), _jsxs(Text, { children: [_jsxs(Text, { color: "green", bold: true, children: ["\u2714 Built ", plural(built.pages.length, "page")] }), _jsxs(Text, { dimColor: true, children: [" ", "\u00B7 ", plural(built.files.length, "file"), " \u2192 ", built.dir, " \u00B7 ", seconds.toFixed(1), "s"] })] })] }));
+export const BuildResult = ({ built, seconds }) => (_jsxs(Box, { flexDirection: "column", children: [_jsx(BuildProgress, { current: undefined }), _jsxs(Text, { children: [_jsxs(Text, { color: "green", bold: true, children: ["\u2714 Built ", plural(built.pages.length, "page")] }), _jsxs(Text, { dimColor: true, children: [" ", "\u00B7 ", plural(built.files.length, "file"), " \u2192 ", built.dir, " \u00B7 ", seconds.toFixed(1), "s"] })] }), (built.report ?? []).map((line, index) => (_jsx(Text, { dimColor: !/WARNING|ERROR/.test(line), ...(/WARNING/.test(line) ? { color: "yellow" } : /ERROR/.test(line) ? { color: "red" } : {}), children: line }, index)))] }));
 export const DevScreen = ({ state }) => (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: [_jsx(Text, { bold: true, color: "cyan", children: "vlx dev" }), state.starting ? (_jsxs(Text, { children: ["  ", _jsx(Spinner, {}), " starting"] })) : (_jsxs(Text, { children: ["  ", _jsx(Text, { color: "green", children: "\u25CF" }), " ", state.url] }))] }), state.open.length === 0 ? (state.starting ? null : (_jsx(Text, { color: "green", children: "\u2714 No problems" }))) : (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Diagnostics, { diagnostics: state.open }), _jsxs(Text, { color: "red", children: ["\u2716 ", plural(state.open.length, "problem"), ": fix and save; the last good build keeps serving"] })] })), state.lines.length === 0 ? null : (_jsx(Box, { flexDirection: "column", marginTop: 1, children: state.lines.map((line, index) => (_jsx(Text, { dimColor: true, children: line }, `${index}:${line}`))) })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Ctrl+C to stop" }) })] }));

package/dist/ui/run.d.ts

@@ -14,4 +14,5 @@ export declare const drawDev: (root: string, options: {
     readonly target?: TargetId;
     readonly port?: number;
     readonly host?: string;
+    readonly record?: string;
 }) => Promise<void>;

package/dist/ui/run.js

@@ -35,14 +35,27 @@ export const drawCheck = async (root) => {
 export const drawBuild = async (root, targets = []) => {
     const started = Date.now();
     const shown = show(_jsx(BuildProgress, { current: "configuration" }));
+    let measured = [];
     try {
         const built = await runBuild(root, {
             ...(targets.length === 0 ? {} : { targets }),
+            onReport: (report) => {
+                measured = report;
+            },
             onStage: ((stage) => shown.rerender(_jsx(BuildProgress, { current: stage }))),
         });
         shown.rerender(_jsx(BuildResult, { built: built, seconds: (Date.now() - started) / 1000 }));
         return built;
     }
+    catch (error) {
+        // A budget error stops the build after the bundle is measured: the report says by how much.
+        if (measured.length > 0) {
+            shown.unmount();
+            await shown.waitUntilExit();
+            measured.forEach((line) => console.error(line));
+        }
+        throw error;
+    }
     finally {
         shown.unmount();
         await shown.waitUntilExit();

package/dist/vite.js

@@ -41,7 +41,7 @@ export const baseConfig = (root, config, out = OUTPUT_DIR) => ({
     cacheDir: join(root, GENERATED_DIR, "cache"),
     customLogger: logger,
     clearScreen: false,
-    build: { outDir: join(root, out), emptyOutDir: true, target: "esnext", manifest: true, chunkSizeWarningLimit: 1500, rollupOptions: { input: join(root, CLIENT_ENTRY) } },
+    build: { outDir: join(root, out), emptyOutDir: true, target: "esnext", manifest: true, rollupOptions: { input: join(root, CLIENT_ENTRY) } },
     // The MESH runtime refers to node:fs/promises on a path the browser never takes.
     optimizeDeps: { exclude: ["@valancex/mesh-runtime", "@valancex/cli", "@valancex/common"] },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@valancex/cli",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "vlx, the VALANCE command: make an application (vlx init), serve it as you edit (vlx dev), build it to a static site (vlx build), check it (vlx check). Content, layout, components and styles in, a website out.",
   "keywords": [
     "valance",
@@ -49,27 +49,32 @@
     "provenance": true
   },
   "dependencies": {
-    "@valancex/mesh-compiler": "^0.11.0",
-    "@valancex/port-desktop-vocabulary": "^0.6.0",
+    "@valancex/mesh-compiler": "^0.15.0 || ^0.16.0 || ^0.17.0",
+    "@valancex/port-desktop-vocabulary": "^0.12.0 || ^0.13.0 || ^0.14.0",
     "effect": "^3.10.0",
     "ink": "7.1.1",
     "postject": "1.0.0-alpha.6",
     "react": "19.2.8",
     "vite": "7.3.6",
-    "@valancex/valance": "^0.13.0",
-    "@valancex/common": "^0.13.0"
+    "@valancex/style": "^0.14.0",
+    "@valancex/valance": "^0.14.0",
+    "@valancex/common": "^0.14.0"
   },
   "devDependencies": {
+    "@types/jsdom": "^21.1.7",
     "@types/node": "^22.0.0",
     "@types/react": "19.2.18",
-    "@valancex/mesh-runtime": "^0.11.0",
+    "@valancex/mesh-runtime": "^0.17.0",
+    "dom-accessibility-api": "^0.7.0",
     "ink-testing-library": "4.0.0",
+    "jsdom": "^26.0.0",
     "playwright": "1.56.1",
     "typescript": "^5.6.0",
-    "vitest": "^3.2.0"
+    "vitest": "^3.2.0",
+    "vnu-jar": "^26.10.12"
   },
   "scripts": {
-    "build": "tsc -p tsconfig.json",
+    "build": "tsc -p tsconfig.json && node scripts/copy-data.mjs",
     "typecheck": "tsc -p tsconfig.typecheck.json",
     "test": "vitest run"
   }

package/schemas/valance.schema.json

@@ -27,6 +27,77 @@
       "pattern": "^[^{}]*(\\{page\\}|\\{site\\})[^{}]*(\\{page\\}|\\{site\\}|[^{}])*$",
       "maxLength": 120,
       "description": "How a document's title is written: \"{page}\" is the page's title and \"{site}\" the name above. Must contain \"{page}\". A page whose title is the site's name is that name alone."
+    },
+    "record": {
+      "type": "object",
+      "additionalProperties": false,
+      "required": [
+        "redact"
+      ],
+      "description": "What `vlx dev --record` leaves out of a session log. A log holds what was typed and seen; a value marked here is never written (its place holds a digest) and the log still replays.",
+      "properties": {
+        "redact": {
+          "type": "object",
+          "additionalProperties": false,
+          "properties": {
+            "scope": {
+              "type": "array",
+              "description": "Paths into the page's scope whose values are replaced by a digest; \"*\" is any list index or field name.",
+              "items": {
+                "type": "array",
+                "minItems": 1,
+                "items": {
+                  "type": "string",
+                  "minLength": 1
+                }
+              }
+            },
+            "commands": {
+              "type": "array",
+              "description": "Commands (\"component/name\") whose parameters are not recorded.",
+              "items": {
+                "type": "string",
+                "pattern": "^[\\w-]+/[\\w-]+$"
+              }
+            }
+          }
+        }
+      }
+    },
+    "budgets": {
+      "type": "array",
+      "description": "The size budgets `vlx build` holds the production build to (never `vlx dev`). A type, a warning and an error threshold in bytes: 500000, \"500kB\" or \"1MB\" (1 kB is 1,000 bytes). With none, the framework's start-up budgets apply.",
+      "items": {
+        "type": "object",
+        "additionalProperties": false,
+        "required": [
+          "type"
+        ],
+        "properties": {
+          "type": {
+            "enum": [
+              "initial",
+              "runtime",
+              "startup",
+              "afterStart",
+              "anyChunk"
+            ],
+            "description": "initial: the start-up JavaScript and CSS; runtime: the WebAssembly runtime; startup: the whole start-up set; afterStart: what loads once the application runs; anyChunk: the largest JavaScript chunk. Brotli bytes."
+          },
+          "warning": {
+            "type": [
+              "string",
+              "number"
+            ]
+          },
+          "error": {
+            "type": [
+              "string",
+              "number"
+            ]
+          }
+        }
+      }
     }
   }
 }

package/templates/desktop/gitignore

@@ -1,4 +1,7 @@
 node_modules
 dist
 .valance
+# session recordings (vlx dev --record) hold what was typed: never commit them
+.valance/sessions/
+*.session.jsonl
 .work*

package/templates/multi/src/web/layout.mprx

@@ -7,10 +7,10 @@
     <nav class="sidebar" label="Pages">
       {#each sections as s (s.id)}
         <section>
-          {#if s.title != ""}<para class="nav-title">{s.title}</para>{/if}
+          {#if s.title != ""}<paragraph class="nav-title">{s.title}</paragraph>{/if}
           <list class="nav-list">
             {#each s.items as n (n.id)}
-              <item><link class="nav-link" href={n.href} current={n.current}>{n.label}</link></item>
+              <listitem><link class="nav-link" href={n.href} current={n.current}>{n.label}</link></listitem>
             {/each}
           </list>
         </section>

package/templates/web/gitignore

@@ -1,4 +1,7 @@
 node_modules
 dist
 .valance
+# session recordings (vlx dev --record) hold what was typed: never commit them
+.valance/sessions/
+*.session.jsonl
 .work*

package/templates/web/src/layout.mprx

@@ -7,10 +7,10 @@
     <nav class="sidebar" label="Pages">
       {#each sections as s (s.id)}
         <section>
-          {#if s.title != ""}<para class="nav-title">{s.title}</para>{/if}
+          {#if s.title != ""}<paragraph class="nav-title">{s.title}</paragraph>{/if}
           <list class="nav-list">
             {#each s.items as n (n.id)}
-              <item><link class="nav-link" href={n.href} current={n.current}>{n.label}</link></item>
+              <listitem><link class="nav-link" href={n.href} current={n.current}>{n.label}</link></listitem>
             {/each}
           </list>
         </section>

package/views/block.mprx

@@ -1,3 +1,3 @@
 <mesh-fragment>
-  {#if b.kind == "heading"}<heading-block level={b.level} anchor={b.anchor} spans={b.spans} />{:else if b.kind == "list"}<list-block ordered={b.ordered} items={b.items} />{:else if b.kind == "code"}<pre class="code" tabindex="0"><code>{b.text}</code></pre>{:else if b.kind == "quote"}<quote class="quote"><runs spans={b.spans} /></quote>{:else if b.kind == "image"}<image class="picture" src={b.src} alt={b.alt} loading="lazy" />{:else}<para class="prose"><runs spans={b.spans} /></para>{/if}
+  {#if b.kind == "heading"}<heading-block level={b.level} anchor={b.anchor} spans={b.spans} />{:else if b.kind == "list"}<list-block ordered={b.ordered} items={b.items} />{:else if b.kind == "code"}<pre class="code" tabindex="0"><code>{b.text}</code></pre>{:else if b.kind == "quote"}<blockquote class="quote"><runs spans={b.spans} /></blockquote>{:else if b.kind == "image"}<image class="picture" src={b.src} alt={b.alt} loading="lazy" />{:else}<paragraph class="prose"><runs spans={b.spans} /></paragraph>{/if}
 </mesh-fragment>

package/views/layout.mprx

@@ -6,10 +6,10 @@
     <nav class="sidebar" label="Pages">
       {#each sections as s (s.id)}
         <section>
-          {#if s.title != ""}<para class="nav-title">{s.title}</para>{/if}
+          {#if s.title != ""}<paragraph class="nav-title">{s.title}</paragraph>{/if}
           <list class="nav-list">
             {#each s.items as n (n.id)}
-              <item><link class="nav-link" href={n.href} current={n.current}>{n.label}</link></item>
+              <listitem><link class="nav-link" href={n.href} current={n.current}>{n.label}</link></listitem>
             {/each}
           </list>
         </section>

package/views/list-items.mprx

@@ -1,3 +1,3 @@
 <mesh-fragment>
-  {#each items as i (i.id)}<item><runs spans={i.spans} /></item>{/each}
+  {#each items as i (i.id)}<listitem><runs spans={i.spans} /></listitem>{/each}
 </mesh-fragment>