@cloudcrane/app-runtime 0.0.0-stage → 0.2.0

package/dist/host.d.ts

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

package/dist/host.js

@@ -0,0 +1,7 @@
+// What a host that publishes spec-built apps needs (CloudCrane vendors this as
+// 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 { compile, CompileError } from "./compiler/compile.js";
+export { RUNTIME_JS, RUNTIME_SHA256, RUNTIME_VERSION } from "./compiler/runtime.generated.js";

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { compile, CompileError, type Compiled } from "./compiler/compile.js";
+export { RUNTIME_VERSION, RUNTIME_SHA256 } from "./compiler/runtime.generated.js";
+export { tokenVariables, tokensCss } from "./runtime/theme.js";

package/dist/index.js

@@ -0,0 +1,4 @@
+// Builds a CloudCrane app spec into one HTML page, the same bytes every time.
+export { compile, CompileError } from "./compiler/compile.js";
+export { RUNTIME_VERSION, RUNTIME_SHA256 } from "./compiler/runtime.generated.js";
+export { tokenVariables, tokensCss } from "./runtime/theme.js";

package/dist/runtime/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const DATESTRIP_CSS = ".cc-datestrip{display:flex;gap:8px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none}.cc-datestrip::-webkit-scrollbar{display:none}\n.cc-day{flex:0 0 48px;height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:var(--a2ui-border-radius,12px);border:1px solid var(--a2ui-color-border);background:var(--a2ui-color-surface);color:var(--a2ui-color-on-surface);font:inherit;cursor:pointer;padding:0}\n.cc-day .cc-wd{font-size:9.5px;font-weight:700;opacity:.65}.cc-day.cc-today .cc-wd{font-size:8.5px}.cc-day .cc-n{font-size:15px;font-weight:800}.cc-day .cc-dot{width:5px;height:5px;border-radius:50%}\n.cc-day.cc-today{border:1.5px solid color-mix(in srgb,var(--a2ui-color-primary) 50%,transparent)}.cc-day.cc-on{background:var(--a2ui-color-primary);border-color:var(--a2ui-color-primary);color:var(--a2ui-color-on-primary,#fff)}.cc-day.cc-on .cc-wd{opacity:1}\n.cc-day:focus-visible{outline:2px solid var(--a2ui-color-primary);outline-offset:2px}\n.cc-field{display:flex;flex-direction:column;gap:4px;margin:var(--a2ui-spacing-s,6px) 0;font-size:var(--a2ui-label-font-size,13px);font-weight:var(--a2ui-label-font-weight,600);color:var(--a2ui-color-on-surface)}\n.cc-field input,.cc-field textarea{font:inherit;font-weight:400;font-size:16px;min-height:44px;padding:var(--a2ui-textfield-padding,10px 12px);color:var(--a2ui-color-on-input);background:var(--a2ui-color-input);border:var(--a2ui-textfield-border,1px solid var(--a2ui-color-border));border-radius:var(--a2ui-textfield-border-radius,10px);width:100%}\n.cc-field input:focus-visible,.cc-field textarea:focus-visible{outline:2px solid var(--a2ui-textfield-color-border-focus,var(--a2ui-color-primary));outline-offset:1px}\n.cc-field.cc-invalid input,.cc-field.cc-invalid textarea{border-color:var(--a2ui-textfield-color-error,var(--a2ui-color-error))}.cc-field-error{font-weight:400;color:var(--a2ui-textfield-color-error,var(--a2ui-color-error))}";
+export declare const CODED_CSS = ".cc-coded{display:block;width:100%;overflow:hidden;border-radius:var(--a2ui-border-radius,12px);background:var(--a2ui-color-surface);border:1px solid var(--a2ui-color-border)}";

package/dist/runtime/styles.js

@@ -0,0 +1,12 @@
+// The CloudCrane catalog widgets' CSS, apart from their components so the compiler
+// (in Node) never loads the renderer. Styled from A2UI's theme variables.
+export const DATESTRIP_CSS = `.cc-datestrip{display:flex;gap:8px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none}.cc-datestrip::-webkit-scrollbar{display:none}
+.cc-day{flex:0 0 48px;height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:var(--a2ui-border-radius,12px);border:1px solid var(--a2ui-color-border);background:var(--a2ui-color-surface);color:var(--a2ui-color-on-surface);font:inherit;cursor:pointer;padding:0}
+.cc-day .cc-wd{font-size:9.5px;font-weight:700;opacity:.65}.cc-day.cc-today .cc-wd{font-size:8.5px}.cc-day .cc-n{font-size:15px;font-weight:800}.cc-day .cc-dot{width:5px;height:5px;border-radius:50%}
+.cc-day.cc-today{border:1.5px solid color-mix(in srgb,var(--a2ui-color-primary) 50%,transparent)}.cc-day.cc-on{background:var(--a2ui-color-primary);border-color:var(--a2ui-color-primary);color:var(--a2ui-color-on-primary,#fff)}.cc-day.cc-on .cc-wd{opacity:1}
+.cc-day:focus-visible{outline:2px solid var(--a2ui-color-primary);outline-offset:2px}
+.cc-field{display:flex;flex-direction:column;gap:4px;margin:var(--a2ui-spacing-s,6px) 0;font-size:var(--a2ui-label-font-size,13px);font-weight:var(--a2ui-label-font-weight,600);color:var(--a2ui-color-on-surface)}
+.cc-field input,.cc-field textarea{font:inherit;font-weight:400;font-size:16px;min-height:44px;padding:var(--a2ui-textfield-padding,10px 12px);color:var(--a2ui-color-on-input);background:var(--a2ui-color-input);border:var(--a2ui-textfield-border,1px solid var(--a2ui-color-border));border-radius:var(--a2ui-textfield-border-radius,10px);width:100%}
+.cc-field input:focus-visible,.cc-field textarea:focus-visible{outline:2px solid var(--a2ui-textfield-color-border-focus,var(--a2ui-color-primary));outline-offset:1px}
+.cc-field.cc-invalid input,.cc-field.cc-invalid textarea{border-color:var(--a2ui-textfield-color-error,var(--a2ui-color-error))}.cc-field-error{font-weight:400;color:var(--a2ui-textfield-color-error,var(--a2ui-color-error))}`;
+export const CODED_CSS = `.cc-coded{display:block;width:100%;overflow:hidden;border-radius:var(--a2ui-border-radius,12px);background:var(--a2ui-color-surface);border:1px solid var(--a2ui-color-border)}`;

package/dist/runtime/theme.d.ts

@@ -0,0 +1,10 @@
+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. */
+export declare function tokenVariables(tokens: TokenNode): [string, string][];
+/**
+ * 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.
+ */
+export declare function tokensCss(tokens: TokenNode): string;

package/dist/runtime/theme.js

@@ -0,0 +1,71 @@
+function cssValue(type, v) {
+    if (typeof v === "number")
+        return String(v);
+    if (typeof v === "string")
+        return v;
+    if (Array.isArray(v))
+        return type === "fontFamily" ? v.map((f) => (/^[\w-]+$/.test(String(f)) ? String(f) : JSON.stringify(String(f)))).join(", ") : null;
+    if (v && typeof v === "object") {
+        const o = v;
+        if (typeof o["hex"] === "string")
+            return o["hex"];
+        if (Array.isArray(o["components"]) && o["colorSpace"] === "srgb") {
+            const [r, g, b] = o["components"].map((c) => Math.round(Math.max(0, Math.min(1, c)) * 255));
+            const a = typeof o["alpha"] === "number" ? o["alpha"] : 1;
+            return a === 1 ? `rgb(${r} ${g} ${b})` : `rgb(${r} ${g} ${b} / ${a})`;
+        }
+        if (typeof o["value"] === "number" && typeof o["unit"] === "string")
+            return `${o["value"]}${o["unit"]}`;
+    }
+    return null;
+}
+/** Every token as [--a2ui-name, value], in name order. A group's $type applies to its tokens. */
+export function tokenVariables(tokens) {
+    const out = [];
+    const walk = (node, path, type) => {
+        const t = node.$type ?? type;
+        if (node.$value !== undefined) {
+            const v = cssValue(t, node.$value);
+            if (v !== null && path.length)
+                out.push([`--a2ui-${path.join("-")}`, v]);
+            return;
+        }
+        for (const [k, child] of Object.entries(node))
+            if (!k.startsWith("$") && child && typeof child === "object")
+                walk(child, [...path, k], t);
+    };
+    walk(tokens, [], undefined);
+    return out.sort(([a], [b]) => (a < b ? -1 : a > b ? 1 : 0));
+}
+/** A colour's relative lightness, 0 to 1, from #rgb, #rrggbb or rgb(r g b); null for anything else. */
+function lightness(css) {
+    let rgb = null;
+    const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(css.trim());
+    if (hex) {
+        const h = hex[1].length === 3 ? [...hex[1]].map((c) => c + c).join("") : hex[1];
+        rgb = [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16));
+    }
+    const fn = /^rgb\(\s*(\d+)\s+(\d+)\s+(\d+)/.exec(css.trim());
+    if (fn)
+        rgb = fn.slice(1, 4).map(Number);
+    if (!rgb)
+        return null;
+    const [r, g, b] = rgb.map((c) => {
+        const x = c / 255;
+        return x <= 0.04045 ? x / 12.92 : ((x + 0.055) / 1.055) ** 2.4;
+    });
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+/**
+ * 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.
+ */
+export function tokensCss(tokens) {
+    const vars = tokenVariables(tokens);
+    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("")}}`;
+}

package/package.json

@@ -1,6 +1,71 @@
 {
   "name": "@cloudcrane/app-runtime",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.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": [
+    "cloudcrane",
+    "a2ui",
+    "compiler",
+    "deterministic",
+    "pwa"
+  ],
+  "homepage": "https://github.com/cloudcrane-dev/blackbox/tree/main/packages/app-runtime#readme",
+  "bugs": {
+    "url": "https://github.com/cloudcrane-dev/blackbox/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cloudcrane-dev/blackbox.git",
+    "directory": "packages/app-runtime"
+  },
+  "license": "MIT",
+  "author": "Chirag Phor",
+  "type": "module",
+  "engines": {
+    "node": ">=22.5"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./host": {
+      "types": "./dist/host.d.ts",
+      "default": "./dist/host.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "runtime-lock.json",
+    "THIRD_PARTY_LICENSES.txt",
+    "README.md",
+    "LICENSE"
+  ],
+  "dependencies": {
+    "@cloudcrane/app-spec": "^0.2.0"
+  },
+  "peerDependencies": {
+    "zod": "^3.25.76"
+  },
+  "devDependencies": {
+    "@a2ui/react": "0.14.0",
+    "@a2ui/web_core": "0.14.0",
+    "@types/jsdom": "^30.0.0",
+    "axe-core": "4.11.0",
+    "esbuild": "0.28.2",
+    "jsdom": "^26.1.0",
+    "playwright-core": "1.56.1",
+    "preact": "^10.29.8",
+    "tsx": "4.23.15",
+    "zod": "^3.25.76"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "node build.mjs && rm -rf dist && tsc -p tsconfig.build.json",
+    "test": "node build.mjs && vitest run",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  }
 }

package/runtime-lock.json

@@ -0,0 +1,4 @@
+{
+  "0.1.0": "41443c5b9131c9b69997de420b186a9a250c51f38393227409d3f799728032cf",
+  "0.2.0": "f42f725c9232bf08b2e2546cdcf001c33c464dda445b2e099aac43064f00d373"
+}