@jackbernnie/hiyf 0.3.5 → 0.3.7

package/dist/components/MapEmbed.d.ts

@@ -6,10 +6,17 @@
  * This wrapper closes it:
  *   - Location is expressed only as decimal latitude/longitude with a
  *     clamped zoom.
- *   - The embed always uses the approved responsive 16:9 frame, rounded
- *     corners, muted loading surface, and a keyless OpenStreetMap embed with
- *     a marker pin — reliable for every coordinate (Google's keyless embed is
- *     deprecated and renders inconsistently).
+ *   - `variant="street"` (default) renders the approved responsive 16:9
+ *     keyless OpenStreetMap embed with a marker pin — reliable for every
+ *     coordinate (Google's keyless embed is deprecated and renders
+ *     inconsistently).
+ *   - `variant="aerial"` renders satellite imagery at a FIXED height
+ *     (256px, full width) so every aerial view is the same size: Esri World
+ *     Imagery tiles stitched around the coordinate, a centered drop pin, and
+ *     the required imagery attribution. The frame links out to Google Maps
+ *     satellite view for full pan/zoom detail. OSM's embed has no imagery
+ *     layer, and every other satellite embed needs an API key — static tile
+ *     stitching is the reliable keyless path.
  *   - NO `className`/`style` escape hatch. Need a new map affordance? Add it
  *     here so every map stays on-system.
  */
@@ -18,10 +25,19 @@ export interface MapEmbedProps {
     lat: number;
     /** Longitude in decimal degrees. */
     lon: number;
-    /** Zoom level 1-21. Defaults to 14. Controls the size of the map window. */
+    /**
+     * Zoom level 1-21. Controls the size of the map window. Defaults to 14 for
+     * `street`, 17 for `aerial` (close enough to read site infrastructure like
+     * substations; Esri imagery is dependable through ~19 in most regions).
+     */
     zoom?: number;
     /** Accessible title for the embed. Defaults to 'Map'. */
     title?: string;
+    /**
+     * 'street' — responsive 16:9 OpenStreetMap embed.
+     * 'aerial' — fixed-size satellite imagery with a centered pin.
+     */
+    variant?: 'street' | 'aerial';
 }
-/** Closed responsive map embed — no className/style. */
-export declare function MapEmbed({ lat, lon, zoom, title, }: MapEmbedProps): import("react").JSX.Element | null;
+/** Closed map embed — no className/style. */
+export declare function MapEmbed({ lat, lon, zoom, title, variant, }: MapEmbedProps): import("react").JSX.Element | null;

package/dist/components/MapEmbed.js

@@ -1,21 +1,113 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { AspectRatio } from './ui/aspect-ratio.js';
 
+const TILE_SIZE = 256;
+const AERIAL_HEIGHT = 256;
+const AERIAL_TILES_X = 3;
+const AERIAL_TILES_Y = 1;
+function tileCoords(lat, lon, zoom) {
+  const n = 2 ** zoom;
+  const latRad = lat * Math.PI / 180;
+  const x = (lon + 180) / 360 * n;
+  const y = (1 - Math.log(Math.tan(latRad) + 1 / Math.cos(latRad)) / Math.PI) / 2 * n;
+  return { x, y };
+}
+function AerialEmbed({
+  lat,
+  lon,
+  zoom,
+  title
+}) {
+  const n = 2 ** zoom;
+  const { x, y } = tileCoords(lat, lon, zoom);
+  const px = x * TILE_SIZE;
+  const py = y * TILE_SIZE;
+  const centerTileX = Math.floor(x);
+  const centerTileY = Math.floor(y);
+  const tiles = [];
+  for (let dx = -AERIAL_TILES_X; dx <= AERIAL_TILES_X; dx++) {
+    for (let dy = -AERIAL_TILES_Y; dy <= AERIAL_TILES_Y; dy++) {
+      const tx = centerTileX + dx;
+      const ty = centerTileY + dy;
+      if (ty < 0 || ty >= n) continue;
+      const wrappedTx = (tx % n + n) % n;
+      tiles.push({
+        key: `${tx}:${ty}`,
+        left: tx * TILE_SIZE - px,
+        top: ty * TILE_SIZE - py,
+        src: `https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/${zoom}/${ty}/${wrappedTx}`
+      });
+    }
+  }
+  const externalHref = `https://www.google.com/maps/@?api=1&map_action=map&center=${lat}%2C${lon}&zoom=${zoom}&basemap=satellite`;
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href: externalHref,
+      target: "_blank",
+      rel: "noreferrer",
+      title,
+      "aria-label": `${title} \u2014 open satellite view`,
+      className: "relative block w-full shrink-0 overflow-hidden rounded-lg bg-muted",
+      style: { height: AERIAL_HEIGHT },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 top-1/2", children: tiles.map((tile) => /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: tile.src,
+            alt: "",
+            loading: "lazy",
+            draggable: false,
+            className: "absolute max-w-none select-none",
+            style: { left: tile.left, top: tile.top, width: TILE_SIZE, height: TILE_SIZE }
+          },
+          tile.key
+        )) }),
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            viewBox: "0 0 24 24",
+            "aria-hidden": true,
+            className: "absolute left-1/2 top-1/2 h-8 w-8 -translate-x-1/2 -translate-y-full drop-shadow-md",
+            children: [
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M12 2c-3.9 0-7 3.1-7 7 0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7z",
+                  fill: "#e11d48",
+                  stroke: "#fff",
+                  strokeWidth: "1.5"
+                }
+              ),
+              /* @__PURE__ */ jsx("circle", { cx: "12", cy: "9", r: "2.5", fill: "#fff" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "absolute bottom-0 right-0 rounded-tl bg-black/50 px-1.5 py-0.5 text-[10px] leading-tight text-white/90", children: "Imagery \xA9 Esri, Maxar, Earthstar Geographics" })
+      ]
+    }
+  );
+}
 function MapEmbed({
   lat,
   lon,
-  zoom = 14,
-  title = "Map"
+  zoom,
+  title = "Map",
+  variant = "street"
 }) {
   if (!Number.isFinite(lat) || !Number.isFinite(lon)) {
     return null;
   }
-  const zoomValue = Number.isNaN(zoom) ? 14 : zoom;
-  const clampedZoom = Math.min(21, Math.max(1, zoomValue));
+  const defaultZoom = variant === "aerial" ? 17 : 14;
+  const zoomValue = zoom == null || Number.isNaN(zoom) ? defaultZoom : zoom;
+  const clampedZoom = Math.min(21, Math.max(1, Math.round(zoomValue)));
+  if (variant === "aerial") {
+    return /* @__PURE__ */ jsx(AerialEmbed, { lat, lon, zoom: clampedZoom, title });
+  }
   const half = Math.min(20, Math.max(4e-3, 40 / 2 ** clampedZoom));
   const bbox = `${lon - half},${lat - half},${lon + half},${lat + half}`;
   const src = `https://www.openstreetmap.org/export/embed.html?bbox=${bbox}&layer=mapnik&marker=${lat},${lon}`;
-  return /* @__PURE__ */ jsx("div", { className: "w-full overflow-hidden rounded-lg bg-muted", children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 16 / 9, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: "w-full shrink-0 overflow-hidden rounded-lg bg-muted", children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 16 / 9, children: /* @__PURE__ */ jsx(
     "iframe",
     {
       src,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jackbernnie/hiyf",
-  "version": "0.3.5",
+  "version": "0.3.7",
   "description": "human-in-your-face — an AI design protocol (a locked, LLM-safe design system). Forked from Polar's Orbit (Apache-2.0).",
   "license": "Apache-2.0",
   "type": "module",