@tileflow/capture 0.1.0-alpha.20 → 0.1.0-alpha.22

package/README.md

@@ -16,12 +16,12 @@ const result = await captureTileflowScenes({
 const [{png, receipt, sha256, networkDependent}] = result.captures;
 ```
 
-Standalone scenes compile through `@tileflow/dev`, inject the installed MapLibre JS and CSS into a
-pinned Playwright Chromium headless shell, fulfill generated local icon assets in memory, and wait
-for `load`, `idle`, and two animation frames. They never open a visible window or an HTTP listener.
-One call with multiple scenes uses one Browser and a fresh isolated context per scene. Capture
-installs the exact pinned shell automatically when `allowBrowserInstall` is true; the CLI enables
-that normal happy path by default.
+Standalone scenes compile through `@tileflow/dev`, fulfill the installed MapLibre main module,
+shared module, worker module, and CSS closure in a pinned Playwright Chromium headless shell,
+fulfill generated local icon assets in memory, and wait for `load`, `idle`, and two animation
+frames. They never open a visible window or an HTTP listener. One call with multiple scenes uses
+one Browser and a fresh isolated context per scene. Capture installs the exact pinned shell
+automatically when `allowBrowserInstall` is true; the CLI enables that normal happy path by default.
 
 For a warm integration, retain and close a session:
 

package/THIRD_PARTY_NOTICES.md

@@ -18,7 +18,7 @@ the platform-specific headless shell into its versioned per-user browser cache;
 distribution carries Chromium's license and credits. Chromium source and license information are
 available at https://www.chromium.org/chromium-projects/.
 
-## MapLibre GL JS 5.24.0
+## MapLibre GL JS 6.9.0
 
 Copyright (c) 2023 MapLibre contributors. Licensed under BSD-3-Clause. The installed `maplibre-gl`
 package includes `LICENSE.txt`, including notices for code derived from Mapbox GL JS and other

package/dist/index.js

@@ -320,8 +320,12 @@ import { getTileflowStyleFontFaces } from "@tileflow/core/runtime";
 import { assertValidTileflowStyle, TileflowStyleValidationError } from "@tileflow/dev/validation";
 var tileflowSyntheticAssetOrigin = "https://tileflow.local.invalid";
 var require3 = createRequire2(import.meta.url);
-var maplibreJsPath = require3.resolve("maplibre-gl/dist/maplibre-gl.js");
-var maplibreCssPath = require3.resolve("maplibre-gl/dist/maplibre-gl.css");
+var mapLibreRuntimePaths = Object.freeze({
+  css: require3.resolve("maplibre-gl/dist/maplibre-gl.css"),
+  main: require3.resolve("maplibre-gl/dist/maplibre-gl.mjs"),
+  shared: require3.resolve("maplibre-gl/dist/maplibre-gl-shared.mjs"),
+  worker: require3.resolve("maplibre-gl/dist/maplibre-gl-worker.mjs")
+});
 var tileflowCorePackagePath = require3.resolve("@tileflow/core/package.json");
 var tileflowBrowserModule = `${readFileSync2(
   join2(dirname2(tileflowCorePackagePath), "dist", "browser.js"),
@@ -351,6 +355,9 @@ async function captureStandaloneTileflowScene(input) {
     throw error;
   }
   const timeoutMs = input.timeoutMs ?? 3e4;
+  const mapLibreRuntimeUrls = createMapLibreRuntimeUrls(
+    resolveMapLibreRuntimeDocumentOrigin(input.style)
+  );
   let termination;
   let context;
   let phase = "browser-start";
@@ -407,6 +414,13 @@ async function captureStandaloneTileflowScene(input) {
     };
     await context.route("**/*", async (route) => {
       const url = new URL(route.request().url());
+      if (url.origin === mapLibreRuntimeUrls.origin) {
+        const runtime = getMapLibreRuntimeResponse(url.pathname, input.scene.viewport);
+        if (runtime) {
+          await route.fulfill(runtime);
+          return;
+        }
+      }
       if (url.origin === tileflowSyntheticAssetOrigin) {
         const fileName = decodeURIComponent(url.pathname.slice(1));
         const localTileset = url.search === "" ? localTilesets.get(fileName) : void 0;
@@ -415,7 +429,10 @@ async function captureStandaloneTileflowScene(input) {
             route.request().headers()["range"],
             localTileset
           );
-          await route.fulfill(response);
+          await route.fulfill({
+            ...response,
+            headers: { "Access-Control-Allow-Origin": "*", ...response.headers }
+          });
           return;
         }
         const asset = url.search === "" ? assets.get(fileName) : void 0;
@@ -428,6 +445,7 @@ async function captureStandaloneTileflowScene(input) {
         await route.fulfill({
           body: typeof source === "string" ? source : Buffer.from(source),
           contentType: asset.contentType,
+          headers: { "Access-Control-Allow-Origin": "*" },
           status: 200
         });
         return;
@@ -457,9 +475,17 @@ async function captureStandaloneTileflowScene(input) {
     });
     page.on("requestfailed", (request) => recordResourceFailure(request.url()));
     page.setDefaultTimeout(timeoutMs);
-    await page.setContent(renderHtml(input.scene.viewport), { waitUntil: "domcontentloaded" });
-    await page.addStyleTag({ path: maplibreCssPath });
-    await page.addScriptTag({ path: maplibreJsPath });
+    await page.goto(mapLibreRuntimeUrls.document, { waitUntil: "domcontentloaded" });
+    await page.addStyleTag({ url: mapLibreRuntimeUrls.css });
+    await page.addScriptTag({
+      content: `import * as maplibregl from ${JSON.stringify(mapLibreRuntimeUrls.main)};
+maplibregl.setWorkerUrl(${JSON.stringify(mapLibreRuntimeUrls.worker)});
+globalThis.maplibregl = maplibregl;`,
+      type: "module"
+    });
+    await page.waitForFunction(
+      () => Boolean(globalThis.maplibregl)
+    );
     await page.addScriptTag({ content: tileflowBrowserModule, type: "module" });
     await page.addScriptTag({ content: renderMapInPageScript });
     phase = "map-load";
@@ -559,6 +585,78 @@ async function captureStandaloneTileflowScene(input) {
     await context?.close().catch(() => void 0);
   }
 }
+function createMapLibreRuntimeUrls(origin) {
+  return Object.freeze({
+    css: `${origin}/__runtime/maplibre-gl.css`,
+    document: `${origin}/__runtime/document.html`,
+    main: `${origin}/__runtime/maplibre-gl.mjs`,
+    origin,
+    shared: `${origin}/__runtime/maplibre-gl-shared.mjs`,
+    worker: `${origin}/__runtime/maplibre-gl-worker.mjs`
+  });
+}
+function resolveMapLibreRuntimeDocumentOrigin(style) {
+  const origins = /* @__PURE__ */ new Set();
+  const loopbackOrigins = /* @__PURE__ */ new Set();
+  const addOrigin = (value) => {
+    if (typeof value !== "string") return;
+    try {
+      const url = new URL(value);
+      if ((url.protocol === "http:" || url.protocol === "https:") && url.username === "" && url.password === "") {
+        origins.add(url.origin);
+        if (isLoopbackUrl(url)) loopbackOrigins.add(url.origin);
+      }
+    } catch {
+    }
+  };
+  addOrigin(style.glyphs);
+  if (Array.isArray(style.sprite)) {
+    for (const sprite of style.sprite) {
+      if (sprite && typeof sprite === "object") {
+        addOrigin(sprite.url);
+      }
+    }
+  } else {
+    addOrigin(style.sprite);
+  }
+  const fontFaces = style.metadata?.["tileflow:fontFaces"];
+  if (Array.isArray(fontFaces)) {
+    for (const fontFace of fontFaces) {
+      if (fontFace && typeof fontFace === "object") {
+        addOrigin(fontFace.source);
+      }
+    }
+  }
+  for (const source of Object.values(style.sources)) {
+    const candidate = source;
+    addOrigin(candidate.data);
+    addOrigin(candidate.url);
+    if (Array.isArray(candidate.tiles)) {
+      for (const tile of candidate.tiles) addOrigin(tile);
+    }
+    if (Array.isArray(candidate.urls)) {
+      for (const url of candidate.urls) addOrigin(url);
+    }
+  }
+  const preferredOrigins = loopbackOrigins.size > 0 ? loopbackOrigins : origins;
+  return [...preferredOrigins].sort(compareCodeUnits)[0] ?? tileflowSyntheticAssetOrigin;
+}
+function getMapLibreRuntimeResponse(pathname, viewport) {
+  if (pathname === "/__runtime/document.html") {
+    return {
+      body: renderHtml(viewport),
+      contentType: "text/html; charset=utf-8",
+      status: 200
+    };
+  }
+  const asset = pathname === "/__runtime/maplibre-gl.mjs" ? mapLibreRuntimePaths.main : pathname === "/__runtime/maplibre-gl-shared.mjs" ? mapLibreRuntimePaths.shared : pathname === "/__runtime/maplibre-gl-worker.mjs" ? mapLibreRuntimePaths.worker : pathname === "/__runtime/maplibre-gl.css" ? mapLibreRuntimePaths.css : void 0;
+  if (!asset) return void 0;
+  return {
+    body: readFileSync2(asset, "utf8"),
+    contentType: pathname === "/__runtime/maplibre-gl.css" ? "text/css; charset=utf-8" : "text/javascript; charset=utf-8",
+    status: 200
+  };
+}
 async function localTilesetCaptureResponse(rangeHeader, file) {
   const match = rangeHeader?.match(/^bytes=(\d+)-(\d*)$/u);
   if (!match) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tileflow/capture",
-  "version": "0.1.0-alpha.20",
+  "version": "0.1.0-alpha.22",
   "license": "Apache-2.0",
   "description": "Deterministic local visual capture and comparison for Tileflow maps.",
   "engines": {
@@ -29,10 +29,7 @@
   "files": [
     "dist",
     "THIRD_PARTY_NOTICES.md",
-    "LICENSE",
-    "NOTICE",
-    "GENERATED_OUTPUT_LICENSE.md",
-    "TRADEMARKS.md"
+    "LICENSE"
   ],
   "exports": {
     ".": {
@@ -50,9 +47,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@tileflow/core": ">=0.1.0-alpha.23 <0.1.0-beta.0",
-    "@tileflow/dev": ">=0.1.0-alpha.21 <0.1.0-beta.0",
-    "maplibre-gl": "5.24.0",
+    "@tileflow/core": ">=0.1.0-alpha.24 <0.1.0-beta.0",
+    "@tileflow/dev": ">=0.1.0-alpha.23 <0.1.0-beta.0",
+    "maplibre-gl": "6.9.0",
     "pixelmatch": "7.2.0",
     "playwright": "1.62.1",
     "pngjs": "7.0.0"
@@ -62,20 +59,21 @@
     "@types/node": "^25.9.2",
     "@types/pngjs": "6.0.5",
     "@vitejs/plugin-vue": "^6.0.8",
-    "next": "16.3.1",
+    "maplibre-gl-min": "npm:maplibre-gl@6.4.1",
+    "next": "16.3.3",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "svelte": "^5.56.4",
     "vite": "^8.0.16",
     "vue": "^3.5.39",
     "webpack": "5.108.3",
-    "@tileflow/maps": "0.1.0-alpha.1",
-    "@tileflow/vite": "0.1.0-alpha.19",
-    "@tileflow/vue": "0.1.0-alpha.21",
-    "@tileflow/next": "0.1.0-alpha.19",
-    "@tileflow/react": "0.1.0-alpha.21",
-    "@tileflow/webpack": "0.1.0-alpha.19",
-    "@tileflow/svelte": "0.1.0-alpha.21"
+    "@tileflow/maps": "0.1.0-alpha.3",
+    "@tileflow/react": "0.1.0-alpha.24",
+    "@tileflow/vite": "0.1.0-alpha.21",
+    "@tileflow/next": "0.1.0-alpha.21",
+    "@tileflow/svelte": "0.1.0-alpha.23",
+    "@tileflow/webpack": "0.1.0-alpha.21",
+    "@tileflow/vue": "0.1.0-alpha.23"
   },
   "scripts": {
     "build": "tsup src/index.ts src/receipt.ts --format esm --dts --clean --platform node",

package/GENERATED_OUTPUT_LICENSE.md

@@ -1,21 +0,0 @@
-# Tileflow generated-output grant
-
-In addition to the rights granted by the Apache License, Version 2.0, Tileflow.dev contributors
-grant recipients a perpetual, worldwide, non-exclusive, no-charge, royalty-free right to use,
-reproduce, modify, display, perform, distribute, sublicense, and commercialize the Tileflow-owned
-parts of output generated by this SDK.
-
-Covered output includes compiled map styles, manifests, receipts, sprites, glyph artifacts, static
-render descriptions, and other build artifacts produced from Tileflow maps or application maps.
-Original Tileflow map definitions, icons, and patterns distributed by `@tileflow/maps` may likewise
-be used, modified, embedded, deployed, and redistributed as part of personal or commercial maps and
-applications.
-
-This grant does not relicense third-party software, fonts, icons, map data, datasets, imagery, or
-other input material. Their licenses, attribution requirements, notices, and use restrictions
-continue to apply to the relevant source and generated output. You are responsible for having the
-rights necessary to process and distribute your own inputs.
-
-This grant does not provide access to Tileflow hosted services or grant rights in Tileflow names,
-logos, or marks. The SDK and generated output are provided without warranties or conditions beyond
-those required by applicable law.

package/NOTICE

@@ -1,9 +0,0 @@
-Tileflow SDK
-Copyright 2026 Tileflow.dev contributors
-
-This product includes software and original map artwork developed by Tileflow.dev contributors.
-
-Third-party materials distributed with a package remain subject to their own license and notice
-files. See THIRD_PARTY_NOTICES.md and asset-adjacent license files where present.
-
-The Tileflow names and marks are not licensed under the Apache License 2.0. See TRADEMARKS.md.

package/TRADEMARKS.md

@@ -1,10 +0,0 @@
-# Tileflow trademarks
-
-The Apache License, Version 2.0, and the Tileflow generated-output grant do not grant permission to
-use the Tileflow name, `tileflow.dev`, logos, service marks, product names, or other Tileflow brand
-features except for reasonable and customary use that truthfully describes the origin of the SDK or
-compatibility with Tileflow, and for reproducing required notices.
-
-You may not use Tileflow brand features in a way that suggests sponsorship, endorsement, or an
-official Tileflow product when none exists. Third-party names and marks remain the property of their
-respective owners.