@cloudcrane/app-runtime 0.5.0 → 0.8.0

package/dist/compiler/compile.d.ts

@@ -13,6 +13,7 @@ export type LinkedRuntime = {
     path: string;
     integrity: string;
 };
+/** `runtime` names the runtime the page carries, or is "page" for an HTML app's spec, which is its page as written, with none. */
 export type Compiled = {
     html: string;
     sha256: string;

package/dist/compiler/compile.js

@@ -1,5 +1,5 @@
 import { createHash } from "node:crypto";
-import { canonical, validateSpec } from "@cloudcrane/app-spec";
+import { canonical, pageOf, validateSpec } from "@cloudcrane/app-spec";
 import { CODED_CSS, DATESTRIP_CSS } from "../runtime/styles.js";
 import { tokensCss } from "../runtime/theme.js";
 import { RUNTIME_JS, RUNTIME_SHA256, RUNTIME_VERSION } from "./runtime.generated.js";
@@ -40,6 +40,10 @@ export function compile(input, options = {}) {
     const { spec, problems } = validateSpec(input);
     if (!spec)
         throw new CompileError(problems);
+    // A spec that is an HTML app's page is that page, as written: no runtime, so any runtime version builds it the same.
+    const page = pageOf(spec);
+    if (page !== null)
+        return { html: page, sha256: createHash("sha256").update(page).digest("hex"), runtime: "page" };
     if (spec.manifest.runtime !== RUNTIME_VERSION)
         throw new CompileError([{ at: "manifest.runtime", problem: `this compiler builds runtime ${RUNTIME_VERSION}` }]);
     // Only what drawing the app needs goes in the page: not the journeys, promises or tests.

package/dist/host.d.ts

@@ -1,3 +1,3 @@
-export { validateSpec, leakProblems, deriveBlueprint, CLOUDCRANE_CATALOG_ID } from "@cloudcrane/app-spec";
+export { validateSpec, leakProblems, deriveBlueprint, CLOUDCRANE_CATALOG_ID, pageOf, wrapPage, type PageApp } from "@cloudcrane/app-spec";
 export { compile, CompileError, runtimeFile } from "./compiler/compile.js";
 export { RUNTIME_JS, RUNTIME_SHA256, RUNTIME_VERSION } from "./compiler/runtime.generated.js";

package/dist/host.js

@@ -2,6 +2,6 @@
 // one file, built by vendor.mjs): check a spec, build it, and describe it as a
 // blueprint. The runtime's code is exported so a host can check a built page
 // without it: the runtime is reviewed once per version and locked by its hash.
-export { validateSpec, leakProblems, deriveBlueprint, CLOUDCRANE_CATALOG_ID } from "@cloudcrane/app-spec";
+export { validateSpec, leakProblems, deriveBlueprint, CLOUDCRANE_CATALOG_ID, pageOf, wrapPage } from "@cloudcrane/app-spec";
 export { compile, CompileError, runtimeFile } from "./compiler/compile.js";
 export { RUNTIME_JS, RUNTIME_SHA256, RUNTIME_VERSION } from "./compiler/runtime.generated.js";

package/dist/runtime/theme.d.ts

@@ -1,10 +1,19 @@
 import type { TokenNode } from "@cloudcrane/app-spec/schema";
-/** Every token as [--a2ui-name, value], in name order. A group's $type applies to its tokens. */
+/**
+ * Every token as [--a2ui-name, value], in name order. A group's $type applies to its tokens. The top-level `dark` group
+ * is the dark colours (darkVariables), not tokens of its own.
+ */
 export declare function tokenVariables(tokens: TokenNode): [string, string][];
+/** The dark colours (tokens.dark, laid out as the light ones: dark.color.background…), as the variables they replace. */
+export declare function darkVariables(tokens: TokenNode): [string, string][];
+/** A colour's relative lightness, 0 to 1, from #rgb, #rrggbb or rgb(r g b); null for anything else. */
+declare function lightness(css: string): number | null;
 /**
  * The tokens as a :root rule, with the page's colour scheme taken from its own
  * background: A2UI's defaults for what a spec leaves out (a plain button's
  * text) are light-dark() pairs, which would otherwise follow the phone's
- * setting and put light text on a light page. Light unless the background is dark.
+ * setting and put light text on a light page. Light unless the background is dark; with dark colours (tokens.dark),
+ * the light ones by default and the dark ones when the phone is set to dark.
  */
 export declare function tokensCss(tokens: TokenNode): string;
+export { lightness };

package/dist/runtime/theme.js

@@ -19,8 +19,20 @@ function cssValue(type, v) {
     }
     return null;
 }
-/** Every token as [--a2ui-name, value], in name order. A group's $type applies to its tokens. */
+/**
+ * Every token as [--a2ui-name, value], in name order. A group's $type applies to its tokens. The top-level `dark` group
+ * is the dark colours (darkVariables), not tokens of its own.
+ */
 export function tokenVariables(tokens) {
+    const { dark: _dark, ...light } = tokens;
+    return variablesOf(light);
+}
+/** The dark colours (tokens.dark, laid out as the light ones: dark.color.background…), as the variables they replace. */
+export function darkVariables(tokens) {
+    const dark = tokens["dark"];
+    return dark && typeof dark === "object" ? variablesOf(dark) : [];
+}
+function variablesOf(tokens) {
     const out = [];
     const walk = (node, path, type) => {
         const t = node.$type ?? type;
@@ -60,12 +72,20 @@ function lightness(css) {
  * The tokens as a :root rule, with the page's colour scheme taken from its own
  * background: A2UI's defaults for what a spec leaves out (a plain button's
  * text) are light-dark() pairs, which would otherwise follow the phone's
- * setting and put light text on a light page. Light unless the background is dark.
+ * setting and put light text on a light page. Light unless the background is dark; with dark colours (tokens.dark),
+ * the light ones by default and the dark ones when the phone is set to dark.
  */
 export function tokensCss(tokens) {
     const vars = tokenVariables(tokens);
+    const dark = darkVariables(tokens);
+    // With dark colours, the page follows the phone's setting; without, it keeps the one scheme its background is.
+    if (dark.length) {
+        const rule = (vs) => vs.map(([k, v]) => `${k}:${v};`).join("");
+        return `:root{color-scheme:light dark;${rule(vars)}}@media (prefers-color-scheme:dark){:root{${rule(dark)}}}`;
+    }
     const background = vars.find(([k]) => k === "--a2ui-color-background")?.[1];
     const l = background === undefined ? null : lightness(background);
     const scheme = l !== null && l < 0.18 ? "dark" : "light";
     return `:root{color-scheme:${scheme};${vars.map(([k, v]) => `${k}:${v};`).join("")}}`;
 }
+export { lightness };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudcrane/app-runtime",
-  "version": "0.5.0",
+  "version": "0.8.0",
   "runtimeVersion": "0.4.0",
   "description": "Builds a CloudCrane app spec into one HTML page, the same bytes every time, and the runtime that draws it with A2UI's renderer.",
   "keywords": [
@@ -44,7 +44,7 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@cloudcrane/app-spec": "^0.4.0"
+    "@cloudcrane/app-spec": "^0.7.0"
   },
   "peerDependencies": {
     "zod": "^3.25.76"