@tileflow/react 0.1.0-alpha.19 → 0.1.0-alpha.20

package/dist/static.d.ts

@@ -1,6 +1,7 @@
 import * as react from 'react';
 import { CSSProperties, ImgHTMLAttributes } from 'react';
-import { StaticSceneInput, StaticMapResult } from '@tileflow/static';
+import { StaticMapResult } from '@tileflow/static/client';
+import { StaticSceneInput } from '@tileflow/static/scene';
 
 type StaticMapBaseProps = StaticSceneInput & {
     alt?: string;
@@ -25,6 +26,6 @@ type StaticMapCreateProps = {
     imageUrl?: never;
 };
 type StaticMapProps = StaticMapBaseProps & (StaticMapCreateProps | StaticMapImageProps);
-declare function StaticMap({ alt, camera, className, captureId, createUrl, imageStyle, imageUrl, idempotencyKey, keepPreviousImage, loading, map, onError, onImageLoad, onReady, overlays, size, style, }: StaticMapProps): react.JSX.Element;
+declare function StaticMap({ alt, camera, className, captureId, createUrl, imageStyle, imageUrl, idempotencyKey, keepPreviousImage, loading, map, onError, onImageLoad, onReady, overlays, size, style, theme, }: StaticMapProps): react.JSX.Element;
 
 export { StaticMap, type StaticMapProps };

package/dist/static.js

@@ -8,26 +8,40 @@ import {
   useRef,
   useState
 } from "react";
-import { normalizeTileflowCaptureId } from "@tileflow/core";
+import { normalizeTileflowCaptureId } from "@tileflow/core/capture";
 import {
+  prepareStaticMapRequest,
+  stableStringify as stableStringify2,
   validateStaticMapIdempotencyKey
-} from "@tileflow/static";
+} from "@tileflow/static/client";
 
 // src/static-map-request.ts
 import {
-  staticMapProcessingResultSchema,
-  staticMapReadyResultSchema
-} from "@tileflow/static";
+  requestStaticMapUntilReady,
+  stableStringify
+} from "@tileflow/static/client";
 var inFlightRequests = /* @__PURE__ */ new Map();
 function createStaticMapRequestKey(input) {
-  return stableStringify(input);
+  return stableStringify({
+    createUrl: input.createUrl,
+    idempotencyKey: input.idempotencyKey,
+    sceneKey: input.request.sceneKey
+  });
 }
 async function resolveStaticMap(input) {
   throwIfAborted(input.signal);
-  let entry = inFlightRequests.get(input.requestKey);
+  const requestKey = createStaticMapRequestKey(input);
+  let entry = inFlightRequests.get(requestKey);
   if (!entry) {
     const controller = new AbortController();
-    const promise = requestStaticMapUntilReady({ ...input, signal: controller.signal });
+    const promise = requestStaticMapUntilReady(input.request, {
+      createUrl: input.createUrl,
+      fetch: input.fetch,
+      idempotencyKey: input.idempotencyKey,
+      maxWaitMs: input.maxWaitMs,
+      pollIntervalMs: 0,
+      signal: controller.signal
+    });
     const created = {
       controller,
       consumers: 0,
@@ -36,12 +50,12 @@ async function resolveStaticMap(input) {
     };
     const settle = () => {
       created.settled = true;
-      if (inFlightRequests.get(input.requestKey) === created) {
-        inFlightRequests.delete(input.requestKey);
+      if (inFlightRequests.get(requestKey) === created) {
+        inFlightRequests.delete(requestKey);
       }
     };
     void promise.then(settle, settle);
-    inFlightRequests.set(input.requestKey, created);
+    inFlightRequests.set(requestKey, created);
     entry = created;
   }
   entry.consumers += 1;
@@ -50,97 +64,13 @@ async function resolveStaticMap(input) {
   } finally {
     entry.consumers -= 1;
     if (entry.consumers === 0 && !entry.settled) {
-      if (inFlightRequests.get(input.requestKey) === entry) {
-        inFlightRequests.delete(input.requestKey);
+      if (inFlightRequests.get(requestKey) === entry) {
+        inFlightRequests.delete(requestKey);
       }
       entry.controller.abort();
     }
   }
 }
-async function requestStaticMapUntilReady(input) {
-  const maxWaitMs = input.maxWaitMs ?? 3e4;
-  if (!Number.isSafeInteger(maxWaitMs) || maxWaitMs < 1 || maxWaitMs > 12e4) {
-    throw new Error("Static map maxWaitMs must be an integer from 1 to 120000");
-  }
-  return runWithinBudget(maxWaitMs, input.signal, async (signal) => {
-    const body = JSON.stringify(input.scene);
-    const fetcher = input.fetch ?? fetch;
-    let operationId = null;
-    while (true) {
-      const response = await fetcher(input.createUrl, {
-        body,
-        headers: {
-          "Content-Type": "application/json",
-          "Idempotency-Key": input.idempotencyKey
-        },
-        method: "POST",
-        signal
-      });
-      throwIfAborted(signal);
-      if (!response.ok) throw new Error(`Static map endpoint failed: ${response.status}`);
-      let value;
-      try {
-        value = await response.json();
-      } catch {
-        throw new Error("Static map endpoint returned invalid JSON");
-      }
-      throwIfAborted(signal);
-      if (response.status !== 202) {
-        const ready = staticMapReadyResultSchema.safeParse(value);
-        if (!ready.success) throw new Error("Static map endpoint returned an invalid response");
-        assertStaticMapOperationIdentity(operationId, ready.data.operationId);
-        return ready.data;
-      }
-      const pending = staticMapProcessingResultSchema.safeParse(value);
-      if (!pending.success) throw new Error("Static map endpoint returned an invalid response");
-      assertStaticMapOperationIdentity(operationId, pending.data.operationId);
-      operationId ??= pending.data.operationId;
-      await delay(pending.data.retryAfterMs, signal);
-    }
-  });
-}
-function stableStringify(value) {
-  return JSON.stringify(sortJson(value));
-}
-function assertStaticMapOperationIdentity(expected, actual) {
-  if (expected !== null && actual !== expected) {
-    throw new Error("Static map endpoint changed operation identity while polling");
-  }
-}
-async function runWithinBudget(maxWaitMs, externalSignal, operation) {
-  const controller = new AbortController();
-  const timeoutError = new Error(`Static map request timed out after ${maxWaitMs}ms`);
-  const abortFromConsumer = () => controller.abort(externalSignal?.reason);
-  if (externalSignal?.aborted) abortFromConsumer();
-  else externalSignal?.addEventListener("abort", abortFromConsumer, { once: true });
-  const timeout = setTimeout(() => controller.abort(timeoutError), maxWaitMs);
-  try {
-    throwIfAborted(controller.signal);
-    const pending = operation(controller.signal);
-    return await raceWithAbort(pending, controller.signal);
-  } finally {
-    clearTimeout(timeout);
-    externalSignal?.removeEventListener("abort", abortFromConsumer);
-  }
-}
-function delay(milliseconds, signal) {
-  if (milliseconds === 0) {
-    throwIfAborted(signal);
-    return Promise.resolve();
-  }
-  return new Promise((resolve, reject) => {
-    const timeout = setTimeout(() => {
-      signal.removeEventListener("abort", onAbort);
-      resolve();
-    }, milliseconds);
-    const onAbort = () => {
-      clearTimeout(timeout);
-      reject(abortReason(signal));
-    };
-    if (signal.aborted) onAbort();
-    else signal.addEventListener("abort", onAbort, { once: true });
-  });
-}
 function raceWithAbort(operation, signal) {
   if (!signal) return operation;
   if (signal.aborted) return Promise.reject(abortReason(signal));
@@ -172,15 +102,6 @@ function abortReason(signal) {
   error.name = "AbortError";
   return error;
 }
-function sortJson(value) {
-  if (Array.isArray(value)) return value.map(sortJson);
-  if (value && typeof value === "object") {
-    return Object.fromEntries(
-      Object.entries(value).sort(([left], [right]) => left.localeCompare(right)).map(([key, entry]) => [key, sortJson(entry)])
-    );
-  }
-  return value;
-}
 
 // src/static-map.tsx
 import { jsx } from "react/jsx-runtime";
@@ -201,7 +122,8 @@ function StaticMap({
   onReady,
   overlays,
   size,
-  style
+  style,
+  theme
 }) {
   const [result, setResult] = useState(
     imageUrl ? imageResult(imageUrl) : null
@@ -213,11 +135,17 @@ function StaticMap({
   const resolvedCaptureId = normalizeTileflowCaptureId(captureId);
   const onErrorRef = useRef(onError);
   const onReadyRef = useRef(onReady);
-  const sceneKey = useMemo(
-    () => stableStringify({ camera, map, overlays, size }),
-    [camera, map, overlays, size]
+  const sceneInputKey = stableStringify2({ camera, map, overlays, size, theme });
+  const preparedSceneCandidate = useMemo(
+    () => prepareSceneRequest({ camera, map, overlays, size, theme }),
+    [camera, map, overlays, size, theme]
   );
-  const intentKey = imageUrl ? `image:${imageUrl}` : `create:${createUrl}:${idempotencyKey ?? ""}:${sceneKey}`;
+  const preparedScene = useStablePreparedSceneRequest(preparedSceneCandidate);
+  const sceneKey = preparedScene.ok ? preparedScene.request.sceneKey : `invalid:${sceneInputKey}`;
+  const intentKey = imageUrl ? `image:${imageUrl}:${sceneKey}` : `create:${createUrl}:${idempotencyKey ?? ""}:${sceneKey}`;
+  const visibleResult = preparedScene.ok ? result : null;
+  const visibleError = preparedScene.ok ? error : preparedScene.error;
+  const effectiveCaptureState = preparedScene.ok ? captureState : "error";
   useLayoutEffect(() => {
     imageLoadRunRef.current += 1;
     setCaptureState("loading");
@@ -244,6 +172,15 @@ function StaticMap({
     onReadyRef.current = onReady;
   }, [onError, onReady]);
   useEffect(() => {
+    let cancelled = false;
+    if (!preparedScene.ok) {
+      if (!keepPreviousImage) setResult(null);
+      setError(preparedScene.error);
+      imageLoadRunRef.current += 1;
+      setCaptureState("error");
+      onErrorRef.current?.(preparedScene.error);
+      return;
+    }
     if (imageUrl) {
       const nextResult = imageResult(imageUrl);
       setResult(nextResult);
@@ -251,7 +188,6 @@ function StaticMap({
       onReadyRef.current?.(nextResult);
       return;
     }
-    let cancelled = false;
     if (!createUrl) {
       return;
     }
@@ -273,12 +209,7 @@ function StaticMap({
     resolveStaticMap({
       createUrl,
       idempotencyKey: validation.key,
-      requestKey: createStaticMapRequestKey({
-        createUrl,
-        idempotencyKey: validation.key,
-        sceneKey
-      }),
-      scene: JSON.parse(sceneKey),
+      request: preparedScene.request,
       signal: requestController.signal
     }).then((nextResult) => {
       if (cancelled) {
@@ -304,15 +235,16 @@ function StaticMap({
       cancelled = true;
       requestController.abort();
     };
-  }, [createUrl, idempotencyKey, imageUrl, intentKey, keepPreviousImage, sceneKey]);
+  }, [createUrl, idempotencyKey, imageUrl, keepPreviousImage, preparedScene]);
   return /* @__PURE__ */ jsx(
     "div",
     {
-      "aria-busy": !result && !error,
+      "aria-busy": !visibleResult && !visibleError,
       className,
       "data-tileflow-capture-id": resolvedCaptureId,
       "data-tileflow-map": map,
-      "data-tileflow-state": captureState,
+      "data-tileflow-theme": preparedScene.ok ? theme : void 0,
+      "data-tileflow-state": effectiveCaptureState,
       style: {
         aspectRatio: `${size.width} / ${size.height}`,
         background: "#f4f4f2",
@@ -320,7 +252,7 @@ function StaticMap({
         width: "100%",
         ...style
       },
-      children: result ? /* @__PURE__ */ jsx(
+      children: visibleResult ? /* @__PURE__ */ jsx(
         "img",
         {
           alt,
@@ -338,7 +270,7 @@ function StaticMap({
             void markImageReady(event.currentTarget);
           },
           ref: imageRef,
-          src: result.imageUrl,
+          src: visibleResult.imageUrl,
           style: {
             display: "block",
             height: "100%",
@@ -351,6 +283,25 @@ function StaticMap({
     }
   );
 }
+function prepareSceneRequest(scene) {
+  try {
+    return { ok: true, request: prepareStaticMapRequest(scene) };
+  } catch (error) {
+    return {
+      error: error instanceof Error ? error : new Error("Invalid Tileflow static scene"),
+      ok: false
+    };
+  }
+}
+function useStablePreparedSceneRequest(value) {
+  const valueRef = useRef(value);
+  const current = valueRef.current;
+  const equivalent = current.ok === value.ok && (current.ok && value.ok ? current.request.sceneKey === value.request.sceneKey : !current.ok && !value.ok && current.error.message === value.error.message);
+  if (!equivalent) {
+    valueRef.current = value;
+  }
+  return valueRef.current;
+}
 function imageResult(imageUrl) {
   return {
     cached: true,

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@tileflow/react",
-  "version": "0.1.0-alpha.19",
+  "version": "0.1.0-alpha.20",
+  "license": "Apache-2.0",
   "description": "React components for rendering Tileflow maps with MapLibre.",
   "type": "module",
   "sideEffects": false,
@@ -23,7 +24,11 @@
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "LICENSE",
+    "NOTICE",
+    "GENERATED_OUTPUT_LICENSE.md",
+    "TRADEMARKS.md"
   ],
   "exports": {
     ".": {
@@ -41,22 +46,26 @@
     "access": "public"
   },
   "dependencies": {
-    "@tileflow/core": ">=0.1.0-alpha.19 <0.1.0-beta.0",
-    "@tileflow/static": ">=0.1.0-alpha.17 <0.1.0-beta.0"
+    "@tileflow/core": ">=0.1.0-alpha.21 <0.1.0-beta.0",
+    "@tileflow/interactions": ">=0.1.0-alpha.0 <0.1.0-beta.0",
+    "@tileflow/static": ">=0.1.0-alpha.18 <0.1.0-beta.0"
   },
   "peerDependencies": {
-    "maplibre-gl": ">=5",
-    "react": ">=18"
+    "maplibre-gl": ">=5 <7",
+    "react": ">=18 <20",
+    "react-dom": ">=18 <20"
   },
   "devDependencies": {
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
     "maplibre-gl": "^5.24.0",
     "react": "^19.2.7",
-    "@types/react": "^19.2.17"
+    "react-dom": "^19.2.7"
   },
   "scripts": {
     "build": "tsup",
     "verify": "pnpm run build && tsx --test test/*.test.ts",
-    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "typecheck": "tsc -p tsconfig.json --noEmit && tsc -p tsconfig.contract.json",
     "lint": "tsc -p tsconfig.json --noEmit"
   }
 }