@a2f0/skyline 0.2.60 → 0.2.62

package/lib/models/colour-materials.d.ts

@@ -44,3 +44,13 @@ export interface SkylineColour {
     refresh(): void;
 }
 export declare function createSkylineColour(models: readonly BuildingModel[]): SkylineColour;
+/** A colour layer that is made on first use; see `deferSkylineColour`. */
+export interface DeferredSkylineColour extends SkylineColour {
+    /**
+     * Makes the layer now, if it isn't made yet. Call it before anything rewrites the buildings'
+     * colours, such as a celebration's window illumination: the layer reads their greys once,
+     * when it is made.
+     */
+    prepare(): void;
+}
+export declare function deferSkylineColour(models: readonly BuildingModel[]): DeferredSkylineColour;

package/lib/models/colour-materials.js

@@ -506,3 +506,43 @@ export function createSkylineColour(models) {
         },
     };
 }
+// Making the layer reads every vertex of every building, a large share of the scene's start-up
+// time, and changes nothing on screen until colour, a previewed time or a celebration needs it:
+// its facade shaders install only then (colour-reflections.ts). So this one is made on first
+// use, or by `prepare`, from the same buildings and with the sky and night it was given
+// meanwhile, and acts from then on exactly as one made at once.
+export function deferSkylineColour(models) {
+    let layer;
+    let sky, night = null;
+    const made = () => {
+        if (layer)
+            return layer;
+        layer = createSkylineColour(models);
+        if (sky !== undefined)
+            layer.setSky(sky);
+        if (night)
+            layer.setNight(night);
+        return layer;
+    };
+    return {
+        get enabled() { return layer?.enabled ?? false; },
+        prepare() { made(); },
+        set(enabled) {
+            if (layer || enabled)
+                made().set(enabled);
+        },
+        setSky(colours) {
+            sky = colours;
+            layer?.setSky(colours);
+        },
+        setNight(lighting) {
+            night = lighting;
+            if (layer)
+                layer.setNight(lighting);
+            else if (lighting)
+                made();
+        },
+        // Until it is made, nothing shows colour or a previewed night for it to refresh.
+        refresh() { layer?.refresh(); },
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a2f0/skyline",
-  "version": "0.2.60",
+  "version": "0.2.62",
   "description": "Interactive Chicago skyline viewer and reusable Three.js building models",
   "license": "UNLICENSED",
   "repository": {
@@ -11,7 +11,7 @@
     "access": "public"
   },
   "type": "module",
-  "packageManager": "bun@1.4.3",
+  "packageManager": "bun@1.4.4",
   "sideEffects": [
     "./site/**/*.js"
   ],
@@ -60,7 +60,7 @@
     }
   },
   "dependencies": {
-    "@a2f0/ct-client": "0.1.2",
+    "@a2f0/ct-client": "0.1.7",
     "@types/three": "0.186.0"
   },
   "scripts": {
@@ -94,9 +94,9 @@
     }
   },
   "devDependencies": {
-    "@a2f0/agent-tool": "0.1.30",
+    "@a2f0/agent-tool": "0.1.40",
     "@tsconfig/strictest": "^2.0.8",
-    "@types/bun": "^1.4.3",
+    "@types/bun": "^1.4.4",
     "esbuild": "0.28.2",
     "playwright": "1.64.1",
     "three": "0.186.1",

package/site/models/colour-materials.js

@@ -506,3 +506,43 @@ export function createSkylineColour(models) {
         },
     };
 }
+// Making the layer reads every vertex of every building, a large share of the scene's start-up
+// time, and changes nothing on screen until colour, a previewed time or a celebration needs it:
+// its facade shaders install only then (colour-reflections.ts). So this one is made on first
+// use, or by `prepare`, from the same buildings and with the sky and night it was given
+// meanwhile, and acts from then on exactly as one made at once.
+export function deferSkylineColour(models) {
+    let layer;
+    let sky, night = null;
+    const made = () => {
+        if (layer)
+            return layer;
+        layer = createSkylineColour(models);
+        if (sky !== undefined)
+            layer.setSky(sky);
+        if (night)
+            layer.setNight(night);
+        return layer;
+    };
+    return {
+        get enabled() { return layer?.enabled ?? false; },
+        prepare() { made(); },
+        set(enabled) {
+            if (layer || enabled)
+                made().set(enabled);
+        },
+        setSky(colours) {
+            sky = colours;
+            layer?.setSky(colours);
+        },
+        setNight(lighting) {
+            night = lighting;
+            if (layer)
+                layer.setNight(lighting);
+            else if (lighting)
+                made();
+        },
+        // Until it is made, nothing shows colour or a previewed night for it to refresh.
+        refresh() { layer?.refresh(); },
+    };
+}

package/site/skyline-3d.js

@@ -4,7 +4,7 @@ import { chicagoDay, chicagoTime } from "./solar-time.js";
 import { createTimeLighting } from "./time-of-day.js";
 import { createGeographicRoads, geographicOrigin } from "./models/skyline-geography.js";
 import { celebrations } from "./models/celebrations.js";
-import { createDaylight, createSkylineColour, daylightGround } from "./models/colour-materials.js";
+import { createDaylight, daylightGround, deferSkylineColour } from "./models/colour-materials.js";
 import { loadMarkup, loadStylesheet } from "./markup.js";
 // The skyline viewer's full-screen 3D mode: every mapped building, seen through the
 // drawing's own camera and framed as the viewer frames the drawing, so each tower stands
@@ -60,8 +60,9 @@ export function startSkyline3d({ root, frame, assets, signal, colour: initiallyC
         enablePan: true,
         minimumCameraHeight: 1,
     });
-    // The colour trial's layer (models/colour-materials.ts), which the colour toggle turns on.
-    const colour = createSkylineColour(models);
+    // The colour trial's layer (models/colour-materials.ts), which the colour toggle turns on. It
+    // is made on first use rather than before the first frame, which it does not change.
+    const colour = deferSkylineColour(models);
     // A toolbar badge applies one celebration across the skyline, using each
     // building's own supported wording. Context menus change only their building.
     const illuminated = models.filter((model) => model.illumination);
@@ -69,6 +70,8 @@ export function startSkyline3d({ root, frame, assets, signal, colour: initiallyC
     const celebrationAnnouncement = root.querySelector("#celebration-announcement");
     const celebrationButtons = [...root.querySelectorAll("[data-celebration]")];
     function setCelebration(targets, next) {
+        // The colour layer reads the buildings' greys before the lights rewrite them.
+        colour.prepare();
         targets.forEach((model) => model.illumination.set(model.illumination.presets.some(({ id }) => id === next) ? next : null));
         colour.refresh();
         for (const button of celebrationButtons) {

package/site/vendor/ct-client.js

@@ -13,7 +13,7 @@ function safePage(value) {
   const path = value.split(/[?#]/, 1)[0] ?? "/";
   return /^\/[a-zA-Z0-9/:_.-]{0,199}$/.test(path) ? path : "/";
 }
-function clickTarget(event, capture) {
+function clickTarget(event, capture, defaultApp = null) {
   const path = event.composedPath();
   const elements = path.filter((item) => item instanceof Element);
   if (elements.some((element) => element.matches("[data-ct-ignore], input, textarea, select, [contenteditable]:not([contenteditable='false'])")))
@@ -23,8 +23,10 @@ function clickTarget(event, capture) {
   if (!target)
     return null;
   const label = target.getAttribute("data-ct");
+  const app = elements.find((element) => element.hasAttribute("data-ct-app"))?.getAttribute("data-ct-app");
   const tag = target.tagName.toLowerCase();
   return {
+    app: app === undefined ? defaultApp : app && /^[a-z0-9][a-z0-9-]{0,63}$/.test(app) ? app : null,
     target: /^[a-z][a-z0-9-]{0,31}$/.test(tag) ? tag : "unknown",
     label: label && /^[a-zA-Z0-9_.:-]{1,80}$/.test(label) ? label : null
   };
@@ -80,7 +82,11 @@ function createTracker(options) {
       const response = await fetch(endpoint, {
         method: "POST",
         headers: { "Content-Type": "text/plain;charset=UTF-8" },
-        body: JSON.stringify({ site: options.site, events: batch }),
+        body: JSON.stringify({
+          site: options.site,
+          environment: options.environment,
+          events: batch
+        }),
         credentials: "omit",
         referrerPolicy: "no-referrer",
         keepalive: true,
@@ -122,7 +128,7 @@ function createTracker(options) {
   function click(event) {
     if (!event.isTrusted || blocked())
       return;
-    const target = clickTarget(event, options.capture ?? "interactive");
+    const target = clickTarget(event, options.capture ?? "interactive", options.app ?? null);
     if (!target || queue.length >= capacity)
       return;
     try {
@@ -162,6 +168,10 @@ function createTracker(options) {
         return false;
       if (!/^[a-z0-9][a-z0-9-]{0,63}$/.test(options.site))
         throw new Error("Invalid ct site identifier");
+      if (options.app !== undefined && !/^[a-z0-9][a-z0-9-]{0,63}$/.test(options.app))
+        throw new Error("Invalid ct app identifier");
+      if (options.environment !== undefined && !["production", "staging"].includes(options.environment))
+        throw new Error("Invalid ct environment");
       const url = new URL(endpoint);
       if (url.protocol !== "https:" && !(url.protocol === "http:" && ["localhost", "127.0.0.1"].includes(url.hostname)))
         throw new Error("ct requires an HTTPS endpoint");