@tileflow/react 0.1.0-alpha.3 → 0.1.0-alpha.31

package/dist/static.d.ts

@@ -1,27 +1,31 @@
 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;
     className?: string;
+    captureId?: string;
     imageStyle?: CSSProperties;
     keepPreviousImage?: boolean;
-    loading?: ImgHTMLAttributes<HTMLImageElement>["loading"];
+    loading?: ImgHTMLAttributes<HTMLImageElement>['loading'];
     onError?: (error: Error) => void;
-    onImageLoad?: ImgHTMLAttributes<HTMLImageElement>["onLoad"];
+    onImageLoad?: ImgHTMLAttributes<HTMLImageElement>['onLoad'];
     onReady?: (result: StaticMapResult) => void;
     style?: CSSProperties;
 };
 type StaticMapImageProps = {
     createUrl?: never;
+    idempotencyKey?: never;
     imageUrl: string;
 };
 type StaticMapCreateProps = {
     createUrl: string;
+    idempotencyKey: string;
     imageUrl?: never;
 };
 type StaticMapProps = StaticMapBaseProps & (StaticMapCreateProps | StaticMapImageProps);
-declare function StaticMap({ alt, camera, className, createUrl, imageStyle, imageUrl, keepPreviousImage, loading, map, onError, onImageLoad, onReady, overlays, size, style, }: StaticMapProps): react.JSX.Element;
+declare function StaticMap({ alt, attribution, camera, className, captureId, createUrl, format, 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

@@ -1,19 +1,121 @@
+'use client';
+
 // src/static-map.tsx
 import {
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState
 } from "react";
-import { jsx } from "react/jsx-runtime";
+import { normalizeTileflowCaptureId } from "@tileflow/core/capture";
+import {
+  prepareStaticMapRequest,
+  stableStringify as stableStringify2,
+  validateStaticMapIdempotencyKey
+} from "@tileflow/static/client";
+
+// src/static-map-request.ts
+import {
+  requestStaticMapUntilReady,
+  stableStringify
+} from "@tileflow/static/client";
 var inFlightRequests = /* @__PURE__ */ new Map();
+function createStaticMapRequestKey(input) {
+  return stableStringify({
+    createUrl: input.createUrl,
+    idempotencyKey: input.idempotencyKey,
+    sceneKey: input.request.sceneKey
+  });
+}
+async function resolveStaticMap(input) {
+  throwIfAborted(input.signal);
+  const requestKey = createStaticMapRequestKey(input);
+  let entry = inFlightRequests.get(requestKey);
+  if (!entry) {
+    const controller = new AbortController();
+    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,
+      promise,
+      settled: false
+    };
+    const settle = () => {
+      created.settled = true;
+      if (inFlightRequests.get(requestKey) === created) {
+        inFlightRequests.delete(requestKey);
+      }
+    };
+    void promise.then(settle, settle);
+    inFlightRequests.set(requestKey, created);
+    entry = created;
+  }
+  entry.consumers += 1;
+  try {
+    return await raceWithAbort(entry.promise, input.signal);
+  } finally {
+    entry.consumers -= 1;
+    if (entry.consumers === 0 && !entry.settled) {
+      if (inFlightRequests.get(requestKey) === entry) {
+        inFlightRequests.delete(requestKey);
+      }
+      entry.controller.abort();
+    }
+  }
+}
+function raceWithAbort(operation, signal) {
+  if (!signal) return operation;
+  if (signal.aborted) return Promise.reject(abortReason(signal));
+  return new Promise((resolve, reject) => {
+    const onAbort = () => {
+      cleanup();
+      reject(abortReason(signal));
+    };
+    const cleanup = () => signal.removeEventListener("abort", onAbort);
+    signal.addEventListener("abort", onAbort, { once: true });
+    operation.then(
+      (value) => {
+        cleanup();
+        resolve(value);
+      },
+      (error) => {
+        cleanup();
+        reject(error);
+      }
+    );
+  });
+}
+function throwIfAborted(signal) {
+  if (signal?.aborted) throw abortReason(signal);
+}
+function abortReason(signal) {
+  if (signal.reason instanceof Error) return signal.reason;
+  const error = new Error("Static map request was aborted");
+  error.name = "AbortError";
+  return error;
+}
+
+// src/static-map.tsx
+import { jsx } from "react/jsx-runtime";
 function StaticMap({
   alt = "",
+  attribution,
   camera,
   className,
+  captureId,
   createUrl,
+  format,
   imageStyle,
   imageUrl,
+  idempotencyKey,
   keepPreviousImage = false,
   loading = "lazy",
   map,
@@ -22,24 +124,65 @@ function StaticMap({
   onReady,
   overlays,
   size,
-  style
+  style,
+  theme
 }) {
   const [result, setResult] = useState(
     imageUrl ? imageResult(imageUrl) : null
   );
   const [error, setError] = useState(null);
+  const [captureState, setCaptureState] = useState("loading");
+  const imageLoadRunRef = useRef(0);
+  const imageRef = useRef(null);
+  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({ attribution, camera, format, map, overlays, size, theme });
+  const preparedSceneCandidate = useMemo(
+    () => prepareSceneRequest({ attribution, camera, format, map, overlays, size, theme }),
+    [attribution, camera, format, map, overlays, size, theme]
   );
-  const requestKey = imageUrl ? `image:${imageUrl}` : `create:${createUrl}:${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");
+    const image = imageRef.current;
+    if (image?.complete) {
+      if (image.naturalWidth === 0) setCaptureState("error");
+      else void markImageReady(image);
+    }
+  }, [intentKey]);
+  async function markImageReady(image) {
+    const runId = ++imageLoadRunRef.current;
+    try {
+      if (typeof image.decode === "function") await image.decode();
+    } catch {
+      if (!image.complete || image.naturalWidth === 0) {
+        if (runId === imageLoadRunRef.current) setCaptureState("error");
+        return;
+      }
+    }
+    if (runId === imageLoadRunRef.current) setCaptureState("idle");
+  }
   useEffect(() => {
     onErrorRef.current = onError;
     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);
@@ -47,18 +190,29 @@ function StaticMap({
       onReadyRef.current?.(nextResult);
       return;
     }
-    let cancelled = false;
     if (!createUrl) {
       return;
     }
+    const validation = validateStaticMapIdempotencyKey(idempotencyKey ?? "");
+    if (!validation.ok) {
+      const keyError = new Error(`Invalid Static Maps idempotency key: ${validation.error}`);
+      if (!keepPreviousImage) setResult(null);
+      setError(keyError);
+      imageLoadRunRef.current += 1;
+      setCaptureState("error");
+      onErrorRef.current?.(keyError);
+      return;
+    }
     if (!keepPreviousImage) {
       setResult(null);
     }
     setError(null);
+    const requestController = new AbortController();
     resolveStaticMap({
       createUrl,
-      requestKey,
-      scene: JSON.parse(sceneKey)
+      idempotencyKey: validation.key,
+      request: preparedScene.request,
+      signal: requestController.signal
     }).then((nextResult) => {
       if (cancelled) {
         return;
@@ -75,17 +229,24 @@ function StaticMap({
         setResult(null);
       }
       setError(normalizedError);
+      imageLoadRunRef.current += 1;
+      setCaptureState("error");
       onErrorRef.current?.(normalizedError);
     });
     return () => {
       cancelled = true;
+      requestController.abort();
     };
-  }, [createUrl, imageUrl, keepPreviousImage, requestKey, 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-theme": preparedScene.ok ? theme : void 0,
+      "data-tileflow-state": effectiveCaptureState,
       style: {
         aspectRatio: `${size.width} / ${size.height}`,
         background: "#f4f4f2",
@@ -93,7 +254,7 @@ function StaticMap({
         width: "100%",
         ...style
       },
-      children: result ? /* @__PURE__ */ jsx(
+      children: visibleResult ? /* @__PURE__ */ jsx(
         "img",
         {
           alt,
@@ -102,10 +263,16 @@ function StaticMap({
           onError: () => {
             const imageError = new Error("Static map image failed to load");
             setError(imageError);
+            imageLoadRunRef.current += 1;
+            setCaptureState("error");
             onErrorRef.current?.(imageError);
           },
-          onLoad: onImageLoad,
-          src: result.imageUrl,
+          onLoad: (event) => {
+            onImageLoad?.(event);
+            void markImageReady(event.currentTarget);
+          },
+          ref: imageRef,
+          src: visibleResult.imageUrl,
           style: {
             display: "block",
             height: "100%",
@@ -118,50 +285,36 @@ function StaticMap({
     }
   );
 }
-async function resolveStaticMap(input) {
-  const existing = inFlightRequests.get(input.requestKey);
-  if (existing) {
-    return existing;
+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
+    };
   }
-  const promise = fetch(input.createUrl, {
-    body: JSON.stringify(input.scene),
-    headers: {
-      "Content-Type": "application/json"
-    },
-    method: "POST"
-  }).then(async (response) => {
-    if (!response.ok) {
-      throw new Error(`Static map endpoint failed: ${response.status}`);
-    }
-    return await response.json();
-  }).finally(() => {
-    inFlightRequests.delete(input.requestKey);
-  });
-  inFlightRequests.set(input.requestKey, promise);
-  return promise;
+}
+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,
     hash: "",
     imageUrl,
-    status: "ready"
+    operationId: null,
+    remainingUnits: null,
+    status: "ready",
+    unitCost: 0
   };
 }
-function stableStringify(value) {
-  return JSON.stringify(sortJson(value));
-}
-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;
-}
 export {
   StaticMap
 };

package/package.json

@@ -1,16 +1,18 @@
 {
   "name": "@tileflow/react",
-  "version": "0.1.0-alpha.3",
+  "version": "0.1.0-alpha.31",
+  "license": "Apache-2.0",
   "description": "React components for rendering Tileflow maps with MapLibre.",
   "type": "module",
+  "sideEffects": false,
   "homepage": "https://tileflow.dev",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/tileflow/tileflow.git",
+    "url": "git+https://github.com/tileflow/tileflow-sdk.git",
     "directory": "packages/react"
   },
   "bugs": {
-    "url": "https://github.com/tileflow/tileflow/issues"
+    "url": "https://github.com/tileflow/tileflow-sdk/issues"
   },
   "keywords": [
     "tileflow",
@@ -22,7 +24,8 @@
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "LICENSE"
   ],
   "exports": {
     ".": {
@@ -40,24 +43,26 @@
     "access": "public"
   },
   "dependencies": {
-    "@tileflow/static": "0.1.0-alpha.3",
-    "@tileflow/core": "0.1.0-alpha.3"
+    "@tileflow/core": ">=0.1.0-alpha.36 <0.1.0-beta.0",
+    "@tileflow/interactions": ">=0.1.0-alpha.5 <0.1.0-beta.0",
+    "@tileflow/static": ">=0.1.0-alpha.28 <0.1.0-beta.0"
   },
   "peerDependencies": {
-    "maplibre-gl": ">=5",
-    "react": ">=18",
-    "react-dom": ">=18"
+    "maplibre-gl": ">=6.4.1 <7",
+    "react": ">=18 <20",
+    "react-dom": ">=18 <20"
   },
   "devDependencies": {
-    "maplibre-gl": "^5.24.0",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3"
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "maplibre-gl": "6.13.0",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0"
   },
   "scripts": {
-    "build": "tsup src/index.ts src/static.ts --format esm --dts --clean --external react --external react-dom --external maplibre-gl",
-    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "build": "tsup",
+    "verify": "pnpm run build && tsx --test test/*.test.ts",
+    "typecheck": "tsc -p tsconfig.json --noEmit && tsc -p tsconfig.contract.json",
     "lint": "tsc -p tsconfig.json --noEmit"
   }
 }