@sevenfold/setto-client 0.26.0 → 0.27.0

package/dist/SettoMap.d.ts

@@ -0,0 +1,27 @@
+import { type CSSProperties } from 'react';
+export interface SettoMapProps {
+    /**
+     * i18n key prefix holding `lat`, `lng`, optional `zoom` (1–19, default 15)
+     * and optional `title`. A static string literal, like every other key.
+     */
+    k: string;
+    className?: string;
+    style?: CSSProperties;
+    /** The iframe's loading strategy. Default `lazy`. */
+    loading?: 'lazy' | 'eager';
+}
+/**
+ * A map whose location is content.
+ *
+ * Rendered as an OpenStreetMap embed with a marker on the point, because a
+ * hand-written embed with a guessed pin in the middle of a fjord is what the
+ * build agent produced without it, and nobody could move that pin. Here the
+ * point lives in the locale, so it publishes like text, and in edit mode the
+ * tools Setto serves (`map-tools`) sit over the map to move it.
+ *
+ * The wrapper carries the site's classes in both modes and the iframe fills
+ * it, so a map sized with `h-72 w-full` is the same box whether or not anybody
+ * is editing. Without a usable location the wrapper renders empty — no iframe
+ * pointing at 0,0 — and still takes the tools, so the owner can set one.
+ */
+export declare function SettoMap({ k, className, style, loading }: SettoMapProps): import("react/jsx-runtime").JSX.Element;

package/dist/index.d.ts

@@ -21,6 +21,9 @@ export { SETTO_MODULES } from './modules';
 export type { SettoModule } from './modules';
 export { SettoVideo } from './SettoVideo';
 export type { SettoVideoProps } from './SettoVideo';
+export { SettoMap } from './SettoMap';
+export type { SettoMapProps } from './SettoMap';
+export type { MapLocation, MapToolsProps, MapToolsComponent } from './map-tools';
 export { SettoAnimation } from './SettoAnimation';
 export type { SettoAnimationProps } from './SettoAnimation';
 export { useSectionTheme } from './use-section-theme';

package/dist/lib/map-location.d.ts

@@ -0,0 +1,80 @@
+import type { MapLocation } from '../map-tools';
+import type { I18nStore } from './i18n-store';
+/**
+ * Where a `SettoMap` points, and how that becomes an OpenStreetMap embed.
+ *
+ * The location is content, stored under the map's key in every locale file:
+ * `{ lat, lng, zoom, title }`, all strings, because every other value in those
+ * files is. Pure on purpose — the component, the editor's tools and the tests
+ * all agree on one reading of what the build agent wrote.
+ */
+/** What a locale file holds under a map's key. Every field may be missing. */
+export interface RawMapContent {
+    lat?: unknown;
+    lng?: unknown;
+    zoom?: unknown;
+}
+export declare const MAP_MIN_ZOOM = 1;
+export declare const MAP_MAX_ZOOM = 19;
+export declare const MAP_DEFAULT_ZOOM = 15;
+export declare const MAP_DEFAULT_TITLE = "Kart";
+/** Web mercator stops here; a map centred further north cannot be drawn. */
+export declare const MERCATOR_MAX_LAT = 85.0511287798066;
+/**
+ * The frame the zoom is chosen for.
+ *
+ * The embed is told a bounding box, not a zoom, and fits that box into
+ * whatever size the iframe has. A box sized for a small frame keeps the zoom
+ * the owner chose on anything larger — a phone-width map or a wide `h-72` band
+ * both open at it — where a box sized for a desktop would zoom a phone out.
+ */
+export declare const MAP_ASSUMED_WIDTH = 320;
+export declare const MAP_ASSUMED_HEIGHT = 240;
+/**
+ * A coordinate as the locale spells it.
+ *
+ * Strict about shape, because `Number('')` is 0 and a map of the Gulf of
+ * Guinea is the wrong way to say a value is missing. A decimal comma is
+ * accepted: the owner is Norwegian and so is their keyboard.
+ */
+export declare function parseCoordinate(value: unknown): number | null;
+/**
+ * The zoom, forgiving where the coordinates are not.
+ *
+ * A missing or unreadable zoom still gives a usable map, so it falls back to
+ * the default; a readable one out of range is clamped and rounded rather than
+ * thrown away.
+ */
+export declare function parseZoom(value: unknown): number;
+/** A location, or null when the coordinates are missing, unreadable or off the map. */
+export declare function parseMapLocation(raw: RawMapContent | null | undefined): MapLocation | null;
+/** Six decimals is about ten centimetres; more is noise in a content file. */
+export declare function formatCoordinate(n: number): string;
+/** The strings a location is stored as. */
+export declare function serialiseMapLocation(location: MapLocation): {
+    lat: string;
+    lng: string;
+    zoom: string;
+};
+export interface MapBbox {
+    minLng: number;
+    minLat: number;
+    maxLng: number;
+    maxLat: number;
+}
+/**
+ * The box a frame of `width` × `height` pixels would show, centred on the
+ * location at its zoom. Longitude is linear in web mercator; latitude is not,
+ * so it goes through world pixels and back.
+ */
+export declare function mapBbox(location: MapLocation, width?: number, height?: number): MapBbox;
+/** The OpenStreetMap embed for a location, marker on the point itself. */
+export declare function mapEmbedUrl(location: MapLocation): string;
+/**
+ * Write a location to every language at once.
+ *
+ * A place is not translated, so the same numbers go into each locale, the way
+ * `SettoImage` writes an image path. The title is left alone: that one is
+ * words, and belongs to each language.
+ */
+export declare function writeMapLocation(store: Pick<I18nStore, 'set' | 'batch'>, languages: readonly string[], key: string, location: MapLocation): void;

package/dist/map-tools.d.ts

@@ -0,0 +1,24 @@
+import type { ComponentType } from 'react';
+/**
+ * The contract between a map on the customer's page and the tools Setto
+ * serves for moving it.
+ *
+ * Same split as the form field tools: the search, the draggable preview and
+ * the buttons live in setto-server's chrome and change with a deploy, while
+ * `SettoMap` — compiled into the customer's bundle — applies what they hand
+ * back. So this is the pinned part, and it is deliberately plain data.
+ */
+/** A point on the map and how close to it the map opens. WGS84 degrees; zoom 1–19. */
+export interface MapLocation {
+    lat: number;
+    lng: number;
+    zoom: number;
+}
+export interface MapToolsProps {
+    /** Where the map points now, or null when the content has no usable location. */
+    location: MapLocation | null;
+    /** Move the map. `SettoMap` writes it to every language as a draft. */
+    onChange: (next: MapLocation) => void;
+}
+/** What the chrome registers under `mountSlot('map-tools', …)`. */
+export type MapToolsComponent = ComponentType<MapToolsProps>;

package/dist/setto-client.js

@@ -37755,6 +37755,142 @@ function toEmbedUrl(url) {
     return null;
   }
 }
+const MAP_MIN_ZOOM = 1;
+const MAP_MAX_ZOOM = 19;
+const MAP_DEFAULT_ZOOM = 15;
+const MAP_DEFAULT_TITLE = "Kart";
+const MERCATOR_MAX_LAT = 85.0511287798066;
+const MAP_ASSUMED_WIDTH = 320;
+const MAP_ASSUMED_HEIGHT = 240;
+const TILE_SIZE = 256;
+function parseCoordinate(value) {
+  if (typeof value === "number") return Number.isFinite(value) ? value : null;
+  if (typeof value !== "string") return null;
+  const text2 = value.trim().replace(",", ".");
+  if (!/^[+-]?(\d+(\.\d*)?|\.\d+)$/.test(text2)) return null;
+  const n = Number(text2);
+  return Number.isFinite(n) ? n : null;
+}
+function parseZoom(value) {
+  const n = parseCoordinate(value);
+  if (n === null) return MAP_DEFAULT_ZOOM;
+  return Math.min(MAP_MAX_ZOOM, Math.max(MAP_MIN_ZOOM, Math.round(n)));
+}
+function parseMapLocation(raw) {
+  if (!raw) return null;
+  const lat = parseCoordinate(raw.lat);
+  const lng = parseCoordinate(raw.lng);
+  if (lat === null || lng === null) return null;
+  if (Math.abs(lat) > MERCATOR_MAX_LAT || Math.abs(lng) > 180) return null;
+  return { lat, lng, zoom: parseZoom(raw.zoom) };
+}
+function formatCoordinate(n) {
+  const fixed = n.toFixed(6);
+  const trimmed = fixed.includes(".") ? fixed.replace(/0+$/, "").replace(/\.$/, "") : fixed;
+  return trimmed === "-0" ? "0" : trimmed;
+}
+function serialiseMapLocation(location2) {
+  return {
+    lat: formatCoordinate(location2.lat),
+    lng: formatCoordinate(location2.lng),
+    zoom: String(parseZoom(location2.zoom))
+  };
+}
+function worldSize(zoom) {
+  return TILE_SIZE * 2 ** zoom;
+}
+function latToWorldY(lat, zoom) {
+  const clamped = Math.max(-MERCATOR_MAX_LAT, Math.min(MERCATOR_MAX_LAT, lat));
+  const sin = Math.sin(clamped * Math.PI / 180);
+  return (0.5 - Math.log((1 + sin) / (1 - sin)) / (4 * Math.PI)) * worldSize(zoom);
+}
+function worldYToLat(y, zoom) {
+  const n = Math.PI - 2 * Math.PI * y / worldSize(zoom);
+  return 180 / Math.PI * Math.atan(Math.sinh(n));
+}
+function mapBbox(location2, width = MAP_ASSUMED_WIDTH, height = MAP_ASSUMED_HEIGHT) {
+  const degreesPerPixel = 360 / worldSize(location2.zoom);
+  const halfLng = width / 2 * degreesPerPixel;
+  const y = latToWorldY(location2.lat, location2.zoom);
+  const max = worldSize(location2.zoom);
+  return {
+    minLng: Math.max(-180, location2.lng - halfLng),
+    maxLng: Math.min(180, location2.lng + halfLng),
+    minLat: worldYToLat(Math.min(max, y + height / 2), location2.zoom),
+    maxLat: worldYToLat(Math.max(0, y - height / 2), location2.zoom)
+  };
+}
+function mapEmbedUrl(location2) {
+  const box = mapBbox(location2);
+  const bbox = [box.minLng, box.minLat, box.maxLng, box.maxLat].map(formatCoordinate).join(",");
+  const marker = `${formatCoordinate(location2.lat)},${formatCoordinate(location2.lng)}`;
+  return `https://www.openstreetmap.org/export/embed.html?bbox=${bbox}&layer=mapnik&marker=${marker}`;
+}
+function writeMapLocation(store, languages, key, location2) {
+  const values = serialiseMapLocation(location2);
+  store.batch(() => {
+    for (const lng of languages) {
+      store.set(`${key}.lat`, lng, values.lat);
+      store.set(`${key}.lng`, lng, values.lng);
+      store.set(`${key}.zoom`, lng, values.zoom);
+    }
+  });
+}
+function SettoMap({ k, className, style, loading = "lazy" }) {
+  const { t, i18n } = useTranslation();
+  const { editMode, store } = useSetto();
+  const guestEdit = useGuestEdit();
+  const editable = editMode || guestEdit.active;
+  const MapTools = useSettoChromeSlot("map-tools");
+  const [, force] = useState(0);
+  useEffect(() => {
+    if (!store) return;
+    return store.subscribe(() => force((x) => x + 1));
+  }, [store]);
+  const lng = i18n.language;
+  const read = (field) => {
+    const key = `${k}.${field}`;
+    return store?.get(key, lng) || t(key, { defaultValue: "" });
+  };
+  const location2 = parseMapLocation({ lat: read("lat"), lng: read("lng"), zoom: read("zoom") });
+  const title = read("title") || MAP_DEFAULT_TITLE;
+  const tools = editable && store && MapTools ? /* @__PURE__ */ jsx(
+    MapTools,
+    {
+      location: location2,
+      onChange: (next) => writeMapLocation(store, store.languages(lng), k, next)
+    }
+  ) : null;
+  if (!location2) {
+    return /* @__PURE__ */ jsx("div", { className, style, "data-setto-map": k, "data-setto-map-empty": "1", children: tools ? /* @__PURE__ */ jsx("div", { style: fillStyle, children: tools }) : null });
+  }
+  return /* @__PURE__ */ jsx("div", { className, style, "data-setto-map": k, children: /* @__PURE__ */ jsxs("div", { style: fillStyle, children: [
+    /* @__PURE__ */ jsx(
+      "iframe",
+      {
+        src: mapEmbedUrl(location2),
+        title,
+        loading,
+        referrerPolicy: "strict-origin-when-cross-origin",
+        style: iframeStyle
+      }
+    ),
+    tools
+  ] }) });
+}
+const fillStyle = {
+  position: "relative",
+  width: "100%",
+  height: "100%",
+  borderRadius: "inherit",
+  overflow: "hidden"
+};
+const iframeStyle = {
+  display: "block",
+  width: "100%",
+  height: "100%",
+  border: 0
+};
 const DEFAULT_DURATION = {
   fadeIn: 600,
   slideUp: 700,
@@ -38739,6 +38875,7 @@ export {
   SettoIcon,
   SettoImage,
   SettoLanguages,
+  SettoMap,
   SettoMark,
   SettoProvider,
   SettoRepeater,