@placeslayer/sdk-react 1.0.0

package/dist/index.js

@@ -0,0 +1,312 @@
+// src/CitiesDropdown.tsx
+import {
+  useCallback as useCallback2,
+  useEffect as useEffect2,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
+import {
+  PlacesLayerClient
+} from "@placeslayer/sdk";
+
+// src/hooks/useAutocomplete.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+var DEBOUNCE_MS = 300;
+function useAutocomplete(client, countryCode, query, opts) {
+  const [results, setResults] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const version = useRef(0);
+  const timerRef = useRef(void 0);
+  const delay = opts?.debounceMs ?? DEBOUNCE_MS;
+  const search = useCallback(() => {
+    const trimmed = query.trim();
+    if (!trimmed) {
+      setResults([]);
+      setLoading(false);
+      return;
+    }
+    const current = ++version.current;
+    setLoading(true);
+    client.autocomplete(countryCode, trimmed, { limit: opts?.limit }).then((data) => {
+      if (current === version.current) {
+        setResults(data);
+        setLoading(false);
+      }
+    }).catch((err) => {
+      if (current === version.current) {
+        setError(err instanceof Error ? err : new Error(String(err)));
+        setLoading(false);
+      }
+    });
+  }, [client, countryCode, query, opts?.limit]);
+  useEffect(() => {
+    clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(search, delay);
+    return () => clearTimeout(timerRef.current);
+  }, [search, delay]);
+  return { results, loading, error };
+}
+
+// src/CitiesDropdown.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function CitiesDropdown({
+  apiKey,
+  country,
+  province,
+  onSelect,
+  limit = 10,
+  lang = "default",
+  placeholder = "Search cities...",
+  className,
+  baseUrl,
+  theme
+}) {
+  const clientRef = useRef2(null);
+  if (!clientRef.current || clientRef.current.apiKey !== apiKey) {
+    clientRef.current = new PlacesLayerClient({ apiKey, baseUrl });
+  }
+  const client = clientRef.current;
+  const [query, setQuery] = useState2("");
+  const [open, setOpen] = useState2(false);
+  const [activeIndex, setActiveIndex] = useState2(-1);
+  const containerRef = useRef2(null);
+  const prevCountry = useRef2(country);
+  const prevProvince = useRef2(province);
+  useEffect2(() => {
+    if (prevCountry.current !== country || prevProvince.current !== province) {
+      setQuery("");
+      setOpen(false);
+      prevCountry.current = country;
+      prevProvince.current = province;
+    }
+  }, [country, province]);
+  const { results, loading } = useAutocomplete(client, country, query, {
+    limit
+  });
+  const filtered = province ? results.filter(
+    (r) => r.type === "city" && r.province_code === province
+  ) : results;
+  useEffect2(() => {
+    const handler = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, []);
+  useEffect2(() => {
+    setActiveIndex(-1);
+  }, [filtered.length]);
+  const handleSelect = useCallback2(
+    async (result) => {
+      setQuery(result.name);
+      setOpen(false);
+      const detail = await client.city(result.country_code, result.code);
+      onSelect(detail);
+    },
+    [client, onSelect]
+  );
+  const handleKeyDown = (e) => {
+    if (!open || filtered.length === 0) return;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        setActiveIndex(
+          (prev) => prev < filtered.length - 1 ? prev + 1 : 0
+        );
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        setActiveIndex(
+          (prev) => prev > 0 ? prev - 1 : filtered.length - 1
+        );
+        break;
+      case "Enter":
+        e.preventDefault();
+        if (activeIndex >= 0 && activeIndex < filtered.length) {
+          handleSelect(filtered[activeIndex]);
+        }
+        break;
+      case "Escape":
+        setOpen(false);
+        break;
+    }
+  };
+  const t = theme ?? {};
+  const borderColor = t.borderColor ?? "#d1d5db";
+  const borderRadius = t.borderRadius ?? "6px";
+  const background = t.background ?? "#fff";
+  const textColor = t.textColor ?? "inherit";
+  const secondaryTextColor = t.secondaryTextColor ?? "#6b7280";
+  const activeBackground = t.activeBackground ?? "#f3f4f6";
+  const fontSize = t.fontSize ?? "14px";
+  const s = {
+    container: { position: "relative", width: "100%" },
+    input: {
+      width: "100%",
+      padding: "8px 12px",
+      fontSize,
+      color: textColor,
+      background,
+      border: `1px solid ${borderColor}`,
+      borderRadius,
+      outline: "none",
+      boxSizing: "border-box"
+    },
+    list: {
+      position: "absolute",
+      top: "100%",
+      left: 0,
+      right: 0,
+      margin: "4px 0 0",
+      padding: 0,
+      listStyle: "none",
+      background,
+      border: `1px solid ${borderColor}`,
+      borderRadius,
+      boxShadow: "0 4px 6px -1px rgba(0,0,0,.1)",
+      maxHeight: "240px",
+      overflowY: "auto",
+      zIndex: 50
+    },
+    item: {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      padding: "8px 12px",
+      cursor: "pointer",
+      fontSize,
+      color: textColor
+    },
+    itemActive: { background: activeBackground },
+    name: { fontWeight: 500 },
+    province: { fontSize: "12px", color: secondaryTextColor },
+    status: {
+      position: "absolute",
+      top: "100%",
+      left: 0,
+      right: 0,
+      margin: "4px 0 0",
+      padding: "8px 12px",
+      background,
+      border: `1px solid ${borderColor}`,
+      borderRadius,
+      fontSize,
+      color: secondaryTextColor
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, style: s.container, className, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        value: query,
+        onChange: (e) => {
+          setQuery(e.target.value);
+          setOpen(true);
+        },
+        onFocus: () => query.trim() && setOpen(true),
+        onKeyDown: handleKeyDown,
+        placeholder,
+        style: s.input,
+        role: "combobox",
+        "aria-expanded": open,
+        "aria-autocomplete": "list",
+        "aria-activedescendant": activeIndex >= 0 ? `pl-option-${activeIndex}` : void 0
+      }
+    ),
+    open && filtered.length > 0 && /* @__PURE__ */ jsx("ul", { role: "listbox", style: s.list, children: filtered.map((result, i) => /* @__PURE__ */ jsxs(
+      "li",
+      {
+        id: `pl-option-${i}`,
+        role: "option",
+        "aria-selected": i === activeIndex,
+        style: {
+          ...s.item,
+          ...i === activeIndex ? s.itemActive : {}
+        },
+        onMouseEnter: () => setActiveIndex(i),
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: () => handleSelect(result),
+        children: [
+          /* @__PURE__ */ jsx("span", { style: s.name, children: result.name }),
+          result.province_name && /* @__PURE__ */ jsx("span", { style: s.province, children: result.province_name })
+        ]
+      },
+      result.code
+    )) }),
+    open && loading && filtered.length === 0 && /* @__PURE__ */ jsx("div", { style: s.status, children: "Loading..." })
+  ] });
+}
+
+// src/hooks/usePlacesLayer.ts
+import { useRef as useRef3 } from "react";
+import { PlacesLayerClient as PlacesLayerClient2 } from "@placeslayer/sdk";
+function usePlacesLayerClient(config) {
+  const ref = useRef3(null);
+  if (!ref.current || ref.current.apiKey !== config.apiKey) {
+    ref.current = new PlacesLayerClient2(config);
+  }
+  return ref.current;
+}
+
+// src/hooks/useAsync.ts
+import { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef4, useState as useState3 } from "react";
+function useAsync(fn, deps) {
+  const [data, setData] = useState3(null);
+  const [loading, setLoading] = useState3(true);
+  const [error, setError] = useState3(null);
+  const version = useRef4(0);
+  const execute = useCallback3(() => {
+    const current = ++version.current;
+    setLoading(true);
+    setError(null);
+    fn().then((result) => {
+      if (current === version.current) {
+        setData(result);
+        setLoading(false);
+      }
+    }).catch((err) => {
+      if (current === version.current) {
+        setError(err instanceof Error ? err : new Error(String(err)));
+        setLoading(false);
+      }
+    });
+  }, deps);
+  useEffect3(() => {
+    execute();
+  }, [execute]);
+  return { data, loading, error, refetch: execute };
+}
+
+// src/hooks/useCountries.ts
+function useCountries(client) {
+  return useAsync(() => client.countries(), [client]);
+}
+
+// src/hooks/useProvinces.ts
+function useProvinces(client, countryCode, opts) {
+  return useAsync(
+    () => client.provinces(countryCode, opts),
+    [client, countryCode, opts?.native]
+  );
+}
+
+// src/hooks/useCities.ts
+function useCities(client, countryCode, provinceCode, opts) {
+  return useAsync(
+    () => client.cities(countryCode, provinceCode, opts),
+    [client, countryCode, provinceCode, opts?.native]
+  );
+}
+export {
+  CitiesDropdown,
+  useAutocomplete,
+  useCities,
+  useCountries,
+  usePlacesLayerClient,
+  useProvinces
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/CitiesDropdown.tsx","../src/hooks/useAutocomplete.ts","../src/hooks/usePlacesLayer.ts","../src/hooks/useAsync.ts","../src/hooks/useCountries.ts","../src/hooks/useProvinces.ts","../src/hooks/useCities.ts"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type KeyboardEvent,\n} from \"react\";\nimport {\n  PlacesLayerClient,\n  type AutocompleteResult,\n  type CityDetail,\n} from \"@placeslayer/sdk\";\nimport { useAutocomplete } from \"./hooks/useAutocomplete\";\n\nexport interface CitiesDropdownTheme {\n  /** Input border color (default: \"#d1d5db\") */\n  borderColor?: string;\n  /** Input border radius (default: \"6px\") */\n  borderRadius?: string;\n  /** Dropdown background color (default: \"#fff\") */\n  background?: string;\n  /** Main text color (default: \"inherit\") */\n  textColor?: string;\n  /** Secondary text color for province labels (default: \"#6b7280\") */\n  secondaryTextColor?: string;\n  /** Active/hovered item background (default: \"#f3f4f6\") */\n  activeBackground?: string;\n  /** Input font size (default: \"14px\") */\n  fontSize?: string;\n}\n\nexport interface CitiesDropdownProps {\n  apiKey: string;\n  country: string;\n  province?: string;\n  onSelect: (city: CityDetail) => void;\n  limit?: number;\n  lang?: \"default\" | \"native\";\n  placeholder?: string;\n  className?: string;\n  baseUrl?: string;\n  /** Customize dropdown colors and appearance */\n  theme?: CitiesDropdownTheme;\n}\n\nexport function CitiesDropdown({\n  apiKey,\n  country,\n  province,\n  onSelect,\n  limit = 10,\n  lang = \"default\",\n  placeholder = \"Search cities...\",\n  className,\n  baseUrl,\n  theme,\n}: CitiesDropdownProps) {\n  const clientRef = useRef<PlacesLayerClient | null>(null);\n  if (\n    !clientRef.current ||\n    (clientRef.current as unknown as { apiKey: string }).apiKey !== apiKey\n  ) {\n    clientRef.current = new PlacesLayerClient({ apiKey, baseUrl });\n  }\n  const client = clientRef.current;\n\n  const [query, setQuery] = useState(\"\");\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  // Reset input when country or province changes\n  const prevCountry = useRef(country);\n  const prevProvince = useRef(province);\n  useEffect(() => {\n    if (prevCountry.current !== country || prevProvince.current !== province) {\n      setQuery(\"\");\n      setOpen(false);\n      prevCountry.current = country;\n      prevProvince.current = province;\n    }\n  }, [country, province]);\n\n  const { results, loading } = useAutocomplete(client, country, query, {\n    limit,\n  });\n\n  const filtered = province\n    ? results.filter(\n        (r) => r.type === \"city\" && r.province_code === province\n      )\n    : results;\n\n  useEffect(() => {\n    const handler = (e: MouseEvent) => {\n      if (\n        containerRef.current &&\n        !containerRef.current.contains(e.target as Node)\n      ) {\n        setOpen(false);\n      }\n    };\n    document.addEventListener(\"mousedown\", handler);\n    return () => document.removeEventListener(\"mousedown\", handler);\n  }, []);\n\n  useEffect(() => {\n    setActiveIndex(-1);\n  }, [filtered.length]);\n\n  const handleSelect = useCallback(\n    async (result: AutocompleteResult) => {\n      setQuery(result.name);\n      setOpen(false);\n\n      const detail = await client.city(result.country_code, result.code);\n      onSelect(detail);\n    },\n    [client, onSelect]\n  );\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    if (!open || filtered.length === 0) return;\n\n    switch (e.key) {\n      case \"ArrowDown\":\n        e.preventDefault();\n        setActiveIndex((prev) =>\n          prev < filtered.length - 1 ? prev + 1 : 0\n        );\n        break;\n      case \"ArrowUp\":\n        e.preventDefault();\n        setActiveIndex((prev) =>\n          prev > 0 ? prev - 1 : filtered.length - 1\n        );\n        break;\n      case \"Enter\":\n        e.preventDefault();\n        if (activeIndex >= 0 && activeIndex < filtered.length) {\n          handleSelect(filtered[activeIndex]);\n        }\n        break;\n      case \"Escape\":\n        setOpen(false);\n        break;\n    }\n  };\n\n  const t = theme ?? {};\n  const borderColor = t.borderColor ?? \"#d1d5db\";\n  const borderRadius = t.borderRadius ?? \"6px\";\n  const background = t.background ?? \"#fff\";\n  const textColor = t.textColor ?? \"inherit\";\n  const secondaryTextColor = t.secondaryTextColor ?? \"#6b7280\";\n  const activeBackground = t.activeBackground ?? \"#f3f4f6\";\n  const fontSize = t.fontSize ?? \"14px\";\n\n  const s: Record<string, CSSProperties> = {\n    container: { position: \"relative\", width: \"100%\" },\n    input: {\n      width: \"100%\",\n      padding: \"8px 12px\",\n      fontSize,\n      color: textColor,\n      background,\n      border: `1px solid ${borderColor}`,\n      borderRadius,\n      outline: \"none\",\n      boxSizing: \"border-box\",\n    },\n    list: {\n      position: \"absolute\",\n      top: \"100%\",\n      left: 0,\n      right: 0,\n      margin: \"4px 0 0\",\n      padding: 0,\n      listStyle: \"none\",\n      background,\n      border: `1px solid ${borderColor}`,\n      borderRadius,\n      boxShadow: \"0 4px 6px -1px rgba(0,0,0,.1)\",\n      maxHeight: \"240px\",\n      overflowY: \"auto\",\n      zIndex: 50,\n    },\n    item: {\n      display: \"flex\",\n      justifyContent: \"space-between\",\n      alignItems: \"center\",\n      padding: \"8px 12px\",\n      cursor: \"pointer\",\n      fontSize,\n      color: textColor,\n    },\n    itemActive: { background: activeBackground },\n    name: { fontWeight: 500 },\n    province: { fontSize: \"12px\", color: secondaryTextColor },\n    status: {\n      position: \"absolute\",\n      top: \"100%\",\n      left: 0,\n      right: 0,\n      margin: \"4px 0 0\",\n      padding: \"8px 12px\",\n      background,\n      border: `1px solid ${borderColor}`,\n      borderRadius,\n      fontSize,\n      color: secondaryTextColor,\n    },\n  };\n\n  return (\n    <div ref={containerRef} style={s.container} className={className}>\n      <input\n        type=\"text\"\n        value={query}\n        onChange={(e) => {\n          setQuery(e.target.value);\n          setOpen(true);\n        }}\n        onFocus={() => query.trim() && setOpen(true)}\n        onKeyDown={handleKeyDown}\n        placeholder={placeholder}\n        style={s.input}\n        role=\"combobox\"\n        aria-expanded={open}\n        aria-autocomplete=\"list\"\n        aria-activedescendant={\n          activeIndex >= 0 ? `pl-option-${activeIndex}` : undefined\n        }\n      />\n      {open && filtered.length > 0 && (\n        <ul role=\"listbox\" style={s.list}>\n          {filtered.map((result, i) => (\n            <li\n              key={result.code}\n              id={`pl-option-${i}`}\n              role=\"option\"\n              aria-selected={i === activeIndex}\n              style={{\n                ...s.item,\n                ...(i === activeIndex ? s.itemActive : {}),\n              }}\n              onMouseEnter={() => setActiveIndex(i)}\n              onMouseDown={(e) => e.preventDefault()}\n              onClick={() => handleSelect(result)}\n            >\n              <span style={s.name}>{result.name}</span>\n              {result.province_name && (\n                <span style={s.province}>{result.province_name}</span>\n              )}\n            </li>\n          ))}\n        </ul>\n      )}\n      {open && loading && filtered.length === 0 && (\n        <div style={s.status}>Loading...</div>\n      )}\n    </div>\n  );\n}\n","import { useCallback, useEffect, useRef, useState } from \"react\";\nimport type { AutocompleteResult, PlacesLayerClient } from \"@placeslayer/sdk\";\n\nconst DEBOUNCE_MS = 300;\n\nexport interface AutocompleteState {\n  results: AutocompleteResult[];\n  loading: boolean;\n  error: Error | null;\n}\n\nexport function useAutocomplete(\n  client: PlacesLayerClient,\n  countryCode: string,\n  query: string,\n  opts?: { limit?: number; debounceMs?: number }\n): AutocompleteState {\n  const [results, setResults] = useState<AutocompleteResult[]>([]);\n  const [loading, setLoading] = useState(false);\n  const [error, setError] = useState<Error | null>(null);\n  const version = useRef(0);\n  const timerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  const delay = opts?.debounceMs ?? DEBOUNCE_MS;\n\n  const search = useCallback(() => {\n    const trimmed = query.trim();\n    if (!trimmed) {\n      setResults([]);\n      setLoading(false);\n      return;\n    }\n\n    const current = ++version.current;\n    setLoading(true);\n\n    client\n      .autocomplete(countryCode, trimmed, { limit: opts?.limit })\n      .then((data) => {\n        if (current === version.current) {\n          setResults(data);\n          setLoading(false);\n        }\n      })\n      .catch((err) => {\n        if (current === version.current) {\n          setError(err instanceof Error ? err : new Error(String(err)));\n          setLoading(false);\n        }\n      });\n  }, [client, countryCode, query, opts?.limit]);\n\n  useEffect(() => {\n    clearTimeout(timerRef.current);\n    timerRef.current = setTimeout(search, delay);\n    return () => clearTimeout(timerRef.current);\n  }, [search, delay]);\n\n  return { results, loading, error };\n}\n","import { useRef } from \"react\";\nimport { PlacesLayerClient, type PlacesLayerConfig } from \"@placeslayer/sdk\";\n\nexport function usePlacesLayerClient(config: PlacesLayerConfig): PlacesLayerClient {\n  const ref = useRef<PlacesLayerClient | null>(null);\n\n  if (!ref.current || (ref.current as unknown as { apiKey: string }).apiKey !== config.apiKey) {\n    ref.current = new PlacesLayerClient(config);\n  }\n\n  return ref.current;\n}\n","import { useCallback, useEffect, useRef, useState } from \"react\";\n\nexport interface AsyncState<T> {\n  data: T | null;\n  loading: boolean;\n  error: Error | null;\n  refetch: () => void;\n}\n\nexport function useAsync<T>(\n  fn: () => Promise<T>,\n  deps: unknown[]\n): AsyncState<T> {\n  const [data, setData] = useState<T | null>(null);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<Error | null>(null);\n  const version = useRef(0);\n\n  const execute = useCallback(() => {\n    const current = ++version.current;\n    setLoading(true);\n    setError(null);\n\n    fn()\n      .then((result) => {\n        if (current === version.current) {\n          setData(result);\n          setLoading(false);\n        }\n      })\n      .catch((err) => {\n        if (current === version.current) {\n          setError(err instanceof Error ? err : new Error(String(err)));\n          setLoading(false);\n        }\n      });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, deps);\n\n  useEffect(() => {\n    execute();\n  }, [execute]);\n\n  return { data, loading, error, refetch: execute };\n}\n","import type { Country, PlacesLayerClient } from \"@placeslayer/sdk\";\nimport { type AsyncState, useAsync } from \"./useAsync\";\n\nexport function useCountries(client: PlacesLayerClient): AsyncState<Country[]> {\n  return useAsync(() => client.countries(), [client]);\n}\n","import type { PlacesLayerClient, Province } from \"@placeslayer/sdk\";\nimport { type AsyncState, useAsync } from \"./useAsync\";\n\nexport function useProvinces(\n  client: PlacesLayerClient,\n  countryCode: string,\n  opts?: { native?: boolean }\n): AsyncState<Province[]> {\n  return useAsync(\n    () => client.provinces(countryCode, opts),\n    [client, countryCode, opts?.native]\n  );\n}\n","import type { City, PlacesLayerClient } from \"@placeslayer/sdk\";\nimport { type AsyncState, useAsync } from \"./useAsync\";\n\nexport function useCities(\n  client: PlacesLayerClient,\n  countryCode: string,\n  provinceCode: string,\n  opts?: { native?: boolean }\n): AsyncState<City[]> {\n  return useAsync(\n    () => client.cities(countryCode, provinceCode, opts),\n    [client, countryCode, provinceCode, opts?.native]\n  );\n}\n"],"mappings":"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","names":["useCallback","useEffect","useRef","useState","useRef","useState","useEffect","useCallback","useRef","PlacesLayerClient","useCallback","useEffect","useRef","useState"]}

package/dist/map.cjs

@@ -0,0 +1,322 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/map/index.ts
+var map_exports = {};
+__export(map_exports, {
+  PlacesMap: () => PlacesMap,
+  useMapInsights: () => useMapInsights,
+  useSemanticSearch: () => useSemanticSearch
+});
+module.exports = __toCommonJS(map_exports);
+
+// src/map/PlacesMap.tsx
+var import_react3 = require("react");
+var import_react_leaflet = require("react-leaflet");
+var import_leaflet = __toESM(require("leaflet"), 1);
+var import_sdk = require("@placeslayer/sdk");
+
+// src/hooks/useAsync.ts
+var import_react = require("react");
+function useAsync(fn, deps) {
+  const [data, setData] = (0, import_react.useState)(null);
+  const [loading, setLoading] = (0, import_react.useState)(true);
+  const [error, setError] = (0, import_react.useState)(null);
+  const version = (0, import_react.useRef)(0);
+  const execute = (0, import_react.useCallback)(() => {
+    const current = ++version.current;
+    setLoading(true);
+    setError(null);
+    fn().then((result) => {
+      if (current === version.current) {
+        setData(result);
+        setLoading(false);
+      }
+    }).catch((err) => {
+      if (current === version.current) {
+        setError(err instanceof Error ? err : new Error(String(err)));
+        setLoading(false);
+      }
+    });
+  }, deps);
+  (0, import_react.useEffect)(() => {
+    execute();
+  }, [execute]);
+  return { data, loading, error, refetch: execute };
+}
+
+// src/map/hooks/useMapInsights.ts
+function useMapInsights(client, countryCode) {
+  return useAsync(
+    () => client.mapInsights(countryCode),
+    [client, countryCode]
+  );
+}
+
+// src/map/hooks/useSemanticSearch.ts
+var import_react2 = require("react");
+var DEBOUNCE_MS = 500;
+function useSemanticSearch(client, countryCode, query, opts) {
+  const [results, setResults] = (0, import_react2.useState)([]);
+  const [loading, setLoading] = (0, import_react2.useState)(false);
+  const [error, setError] = (0, import_react2.useState)(null);
+  const version = (0, import_react2.useRef)(0);
+  const timerRef = (0, import_react2.useRef)(void 0);
+  const delay = opts?.debounceMs ?? DEBOUNCE_MS;
+  const search = (0, import_react2.useCallback)(() => {
+    const trimmed = query.trim();
+    if (!trimmed) {
+      setResults([]);
+      setLoading(false);
+      return;
+    }
+    const current = ++version.current;
+    setLoading(true);
+    client.semanticSearch(countryCode, trimmed, { limit: opts?.limit }).then((data) => {
+      if (current === version.current) {
+        setResults(data);
+        setLoading(false);
+      }
+    }).catch((err) => {
+      if (current === version.current) {
+        setError(err instanceof Error ? err : new Error(String(err)));
+        setLoading(false);
+      }
+    });
+  }, [client, countryCode, query, opts?.limit]);
+  (0, import_react2.useEffect)(() => {
+    clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(search, delay);
+    return () => clearTimeout(timerRef.current);
+  }, [search, delay]);
+  return { results, loading, error };
+}
+
+// src/map/PlacesMap.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var DEFAULT_ICON = new import_leaflet.default.Icon({
+  iconUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png",
+  iconRetinaUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png",
+  shadowUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png",
+  iconSize: [25, 41],
+  iconAnchor: [12, 41],
+  popupAnchor: [1, -34],
+  shadowSize: [41, 41]
+});
+var HIGHLIGHT_ICON = new import_leaflet.default.Icon({
+  iconUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png",
+  iconRetinaUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png",
+  shadowUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png",
+  iconSize: [30, 49],
+  iconAnchor: [15, 49],
+  popupAnchor: [1, -40],
+  shadowSize: [49, 49],
+  className: "pl-marker-highlight"
+});
+function FitBounds({ insights }) {
+  const map = (0, import_react_leaflet.useMap)();
+  const fitted = (0, import_react3.useRef)(false);
+  if (!fitted.current && insights.length > 0) {
+    const bounds = import_leaflet.default.latLngBounds(
+      insights.filter((i) => i.latitude && i.longitude).map((i) => [i.latitude, i.longitude])
+    );
+    if (bounds.isValid()) {
+      map.fitBounds(bounds, { padding: [40, 40] });
+      fitted.current = true;
+    }
+  }
+  return null;
+}
+function FitSearchResults({ results }) {
+  const map = (0, import_react_leaflet.useMap)();
+  if (results.length > 0) {
+    const bounds = import_leaflet.default.latLngBounds(
+      results.filter((i) => i.latitude && i.longitude).map((i) => [i.latitude, i.longitude])
+    );
+    if (bounds.isValid()) {
+      map.fitBounds(bounds, { padding: [40, 40] });
+    }
+  }
+  return null;
+}
+function PlacesMap({
+  apiKey,
+  country,
+  center = [0, 0],
+  zoom = 5,
+  onCitySelect,
+  searchEnabled = false,
+  baseUrl,
+  className,
+  style
+}) {
+  const clientRef = (0, import_react3.useRef)(null);
+  if (!clientRef.current || clientRef.current.apiKey !== apiKey) {
+    clientRef.current = new import_sdk.PlacesLayerClient({ apiKey, baseUrl });
+  }
+  const client = clientRef.current;
+  const [searchQuery, setSearchQuery] = (0, import_react3.useState)("");
+  const { data: allInsights } = useMapInsights(client, country);
+  const { results: searchResults } = useSemanticSearch(
+    client,
+    country,
+    searchEnabled ? searchQuery : ""
+  );
+  const highlightedCodes = (0, import_react3.useMemo)(
+    () => new Set(searchResults.map((r) => r.city_code)),
+    [searchResults]
+  );
+  const hasSearch = searchEnabled && searchQuery.trim() && searchResults.length > 0;
+  const insights = allInsights ?? [];
+  const handleSelect = (0, import_react3.useCallback)(
+    (insight) => {
+      onCitySelect?.(insight);
+    },
+    [onCitySelect]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className, style: { position: "relative", ...style }, children: [
+    searchEnabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: styles.searchContainer, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "input",
+      {
+        type: "text",
+        value: searchQuery,
+        onChange: (e) => setSearchQuery(e.target.value),
+        placeholder: "Search cities by description...",
+        style: styles.searchInput
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_react_leaflet.MapContainer,
+      {
+        center,
+        zoom,
+        style: { width: "100%", height: "100%", minHeight: 400 },
+        scrollWheelZoom: true,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_react_leaflet.TileLayer,
+            {
+              attribution: '\xA9 <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+              url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FitBounds, { insights }),
+          hasSearch && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FitSearchResults, { results: searchResults }),
+          insights.filter((i) => i.latitude && i.longitude).map((insight) => {
+            const isHighlighted = hasSearch && highlightedCodes.has(insight.city_code);
+            const isDimmed = hasSearch && !isHighlighted;
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_react_leaflet.Marker,
+              {
+                position: [insight.latitude, insight.longitude],
+                icon: isHighlighted ? HIGHLIGHT_ICON : DEFAULT_ICON,
+                opacity: isDimmed ? 0.3 : 1,
+                eventHandlers: { click: () => handleSelect(insight) },
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_leaflet.Popup, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.popup, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: insight.city_name }),
+                  insight.vibe && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: styles.vibe, children: insight.vibe }),
+                  insight.ideal_for?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: styles.tags, children: insight.ideal_for.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: styles.tag, children: tag }, tag)) }),
+                  insight.cost_of_living && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.meta, children: [
+                    "Cost: ",
+                    insight.cost_of_living.replace("_", " ")
+                  ] }),
+                  insight.climate_zone && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.meta, children: [
+                    "Climate: ",
+                    insight.climate_zone
+                  ] }),
+                  insight.summary && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: styles.summary, children: insight.summary })
+                ] }) })
+              },
+              insight.city_code
+            );
+          })
+        ]
+      }
+    )
+  ] });
+}
+var styles = {
+  searchContainer: {
+    position: "absolute",
+    top: 10,
+    left: 50,
+    right: 50,
+    zIndex: 1e3
+  },
+  searchInput: {
+    width: "100%",
+    padding: "10px 14px",
+    fontSize: "14px",
+    border: "2px solid #d1d5db",
+    borderRadius: "8px",
+    background: "#fff",
+    boxShadow: "0 2px 8px rgba(0,0,0,.15)",
+    outline: "none",
+    boxSizing: "border-box"
+  },
+  popup: {
+    maxWidth: 250,
+    fontSize: "13px",
+    lineHeight: 1.4
+  },
+  vibe: {
+    color: "#6b7280",
+    fontStyle: "italic",
+    marginTop: 4
+  },
+  tags: {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: 4,
+    marginTop: 6
+  },
+  tag: {
+    background: "#e5e7eb",
+    borderRadius: 4,
+    padding: "2px 6px",
+    fontSize: "11px"
+  },
+  meta: {
+    color: "#6b7280",
+    fontSize: "12px",
+    marginTop: 4
+  },
+  summary: {
+    marginTop: 8,
+    fontSize: "12px",
+    color: "#374151"
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PlacesMap,
+  useMapInsights,
+  useSemanticSearch
+});
+//# sourceMappingURL=map.cjs.map