@krizaka/ui 3.30.0 → 3.31.0

package/dist/map.js

@@ -47,6 +47,50 @@ function formatDistance(meters, locale) {
   if (meters < 1e3) return new Intl.NumberFormat(locale, { style: "unit", unit: "meter", maximumFractionDigits: 0 }).format(Math.round(meters / 10) * 10);
   return new Intl.NumberFormat(locale, { style: "unit", unit: "kilometer", maximumFractionDigits: meters < 1e4 ? 1 : 0 }).format(meters / 1e3);
 }
+function pathLength(path) {
+  let total = 0;
+  for (let i = 1; i < path.length; i++) total += distanceMeters(path[i - 1], path[i]);
+  return total;
+}
+function pointAlong(path, fraction) {
+  const first = path[0] ?? [0, 0];
+  if (path.length < 2) return { position: first, heading: 0 };
+  const target = Math.max(0, Math.min(1, fraction)) * pathLength(path);
+  let walked = 0;
+  for (let i = 1; i < path.length; i++) {
+    const a = path[i - 1];
+    const b = path[i];
+    const leg = distanceMeters(a, b);
+    if (walked + leg >= target || i === path.length - 1) {
+      const t = leg === 0 ? 0 : Math.max(0, Math.min(1, (target - walked) / leg));
+      const heading = Math.atan2(b[0] - a[0], b[1] - a[1]) * 180 / Math.PI;
+      return { position: [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t], heading: (heading + 360) % 360 };
+    }
+    walked += leg;
+  }
+  return { position: first, heading: 0 };
+}
+function sliceLine(path, fraction) {
+  const f = Math.max(0, Math.min(1, fraction));
+  const total = pathLength(path);
+  const coordinates = [];
+  if (path.length) coordinates.push([...path[0]]);
+  let walked = 0;
+  for (let i = 1; i < path.length && f > 0; i++) {
+    const a = path[i - 1];
+    const b = path[i];
+    const leg = distanceMeters(a, b);
+    if (walked + leg <= f * total) coordinates.push([...b]);
+    else {
+      const t = leg === 0 ? 0 : (f * total - walked) / leg;
+      coordinates.push([a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t]);
+      break;
+    }
+    walked += leg;
+  }
+  if (coordinates.length === 1) coordinates.push([...coordinates[0]]);
+  return { type: "Feature", properties: {}, geometry: { type: "LineString", coordinates } };
+}
 
 // src/map/location-picker.tsx
 import * as React3 from "react";
@@ -105,15 +149,15 @@ var themes = /* @__PURE__ */ Object.freeze({ dark: /* @__PURE__ */ Object.freeze
   "textSecondary": "#a0a0a7",
   "textMuted": "#92929b",
   "textOnMedia": "#ffffff",
-  "accent": "#196df5",
-  "accentHover": "#0e5bd8",
-  "accentSoft": "rgba(25,109,245,0.1)",
-  "accentText": "#629cf8",
-  "accent2": "#196df5",
+  "accent": "#3e76a8",
+  "accentHover": "#346793",
+  "accentSoft": "rgba(62,118,168,0.12)",
+  "accentText": "#8ebde1",
+  "accent2": "#3e76a8",
   "onAccent": "#ffffff",
-  "ring": "#196df5",
-  "brandGradientFrom": "#0e1525",
-  "brandGradientVia": "#0e0f16",
+  "ring": "#3e76a8",
+  "brandGradientFrom": "#121a21",
+  "brandGradientVia": "#0f1114",
   "brandGradientTo": "#0c0c0e",
   "success": "#10b77f",
   "successText": "#36d399",
@@ -124,8 +168,8 @@ var themes = /* @__PURE__ */ Object.freeze({ dark: /* @__PURE__ */ Object.freeze
   "danger": "#ef4343",
   "dangerText": "#f87272",
   "dangerSoft": "rgba(239,67,67,0.14)",
-  "info": "#196df5",
-  "infoText": "#629cf8",
+  "info": "#3e76a8",
+  "infoText": "#8ebde1",
   "scrim": "rgba(0,0,0,0.6)",
   "scrimStrong": "rgba(0,0,0,0.8)",
   "overlay": "rgba(0,0,0,0.7)",
@@ -149,15 +193,15 @@ var themes = /* @__PURE__ */ Object.freeze({ dark: /* @__PURE__ */ Object.freeze
   "textSecondary": "#56565d",
   "textMuted": "#64646d",
   "textOnMedia": "#ffffff",
-  "accent": "#0a64f5",
-  "accentHover": "#0d55c9",
-  "accentSoft": "rgba(10,100,245,0.08)",
-  "accentText": "#0954ce",
-  "accent2": "#0a64f5",
+  "accent": "#2a5f8d",
+  "accentHover": "#1f4d75",
+  "accentSoft": "rgba(42,95,141,0.08)",
+  "accentText": "#275782",
+  "accent2": "#2a5f8d",
   "onAccent": "#ffffff",
-  "ring": "#0a64f5",
-  "brandGradientFrom": "#dcebfe",
-  "brandGradientVia": "#f3f6fc",
+  "ring": "#2a5f8d",
+  "brandGradientFrom": "#e7eef4",
+  "brandGradientVia": "#f5f7fa",
   "brandGradientTo": "#fafafa",
   "success": "#10b77f",
   "successText": "#0a714e",
@@ -168,8 +212,8 @@ var themes = /* @__PURE__ */ Object.freeze({ dark: /* @__PURE__ */ Object.freeze
   "danger": "#ef4343",
   "dangerText": "#af1d1d",
   "dangerSoft": "rgba(239,67,67,0.1)",
-  "info": "#0a64f5",
-  "infoText": "#0954ce",
+  "info": "#2a5f8d",
+  "infoText": "#275782",
   "scrim": "rgba(0,0,0,0.6)",
   "scrimStrong": "rgba(0,0,0,0.8)",
   "overlay": "rgba(0,0,0,0.7)",
@@ -184,31 +228,31 @@ var themes = /* @__PURE__ */ Object.freeze({ dark: /* @__PURE__ */ Object.freeze
 var brands = /* @__PURE__ */ Object.freeze({
   "krizaka": {
     "dark": {
-      "accent": "#196df5",
-      "accentHover": "#0e5bd8",
-      "accentSoft": "rgba(25,109,245,0.1)",
-      "accentText": "#629cf8",
-      "accent2": "#196df5",
+      "accent": "#3e76a8",
+      "accentHover": "#346793",
+      "accentSoft": "rgba(62,118,168,0.12)",
+      "accentText": "#8ebde1",
+      "accent2": "#3e76a8",
       "onAccent": "#ffffff",
-      "ring": "#196df5",
-      "info": "#196df5",
-      "infoText": "#629cf8",
-      "brandGradientFrom": "#0e1525",
-      "brandGradientVia": "#0e0f16",
+      "ring": "#3e76a8",
+      "info": "#3e76a8",
+      "infoText": "#8ebde1",
+      "brandGradientFrom": "#121a21",
+      "brandGradientVia": "#0f1114",
       "brandGradientTo": "#0c0c0e"
     },
     "light": {
-      "accent": "#0a64f5",
-      "accentHover": "#0d55c9",
-      "accentSoft": "rgba(10,100,245,0.08)",
-      "accentText": "#0954ce",
-      "accent2": "#0a64f5",
+      "accent": "#2a5f8d",
+      "accentHover": "#1f4d75",
+      "accentSoft": "rgba(42,95,141,0.08)",
+      "accentText": "#275782",
+      "accent2": "#2a5f8d",
       "onAccent": "#ffffff",
-      "ring": "#0a64f5",
-      "info": "#0a64f5",
-      "infoText": "#0954ce",
-      "brandGradientFrom": "#dcebfe",
-      "brandGradientVia": "#f3f6fc",
+      "ring": "#2a5f8d",
+      "info": "#2a5f8d",
+      "infoText": "#275782",
+      "brandGradientFrom": "#e7eef4",
+      "brandGradientVia": "#f5f7fa",
       "brandGradientTo": "#fafafa"
     }
   },
@@ -221,8 +265,8 @@ var brands = /* @__PURE__ */ Object.freeze({
       "accent2": "#f59e0b",
       "onAccent": "#0c0c0e",
       "ring": "#f67e23",
-      "info": "#3b83f7",
-      "infoText": "#629cf8",
+      "info": "#5e99c9",
+      "infoText": "#8ebde1",
       "brandGradientFrom": "#28170b",
       "brandGradientVia": "#17130c",
       "brandGradientTo": "#0c0c0e"
@@ -235,8 +279,8 @@ var brands = /* @__PURE__ */ Object.freeze({
       "accent2": "#a45904",
       "onAccent": "#ffffff",
       "ring": "#b45309",
-      "info": "#0a64f5",
-      "infoText": "#0954ce",
+      "info": "#2a5f8d",
+      "infoText": "#275782",
       "brandGradientFrom": "#ffebd6",
       "brandGradientVia": "#fdf7ed",
       "brandGradientTo": "#fafafa"
@@ -281,8 +325,8 @@ var brands = /* @__PURE__ */ Object.freeze({
       "accent2": "#22c378",
       "onAccent": "#0c0c0e",
       "ring": "#24dbc9",
-      "info": "#3b83f7",
-      "infoText": "#629cf8",
+      "info": "#5e99c9",
+      "infoText": "#8ebde1",
       "brandGradientFrom": "#0a241e",
       "brandGradientVia": "#0c1818",
       "brandGradientTo": "#0c0c0e"
@@ -295,8 +339,8 @@ var brands = /* @__PURE__ */ Object.freeze({
       "accent2": "#107546",
       "onAccent": "#ffffff",
       "ring": "#097169",
-      "info": "#0a64f5",
-      "infoText": "#0954ce",
+      "info": "#2a5f8d",
+      "infoText": "#275782",
       "brandGradientFrom": "#e1faf1",
       "brandGradientVia": "#e9fbfa",
       "brandGradientTo": "#fafafa"
@@ -311,8 +355,8 @@ var brands = /* @__PURE__ */ Object.freeze({
       "accent2": "#c3a579",
       "onAccent": "#0c0c0e",
       "ring": "#98b587",
-      "info": "#3b83f7",
-      "infoText": "#629cf8",
+      "info": "#5e99c9",
+      "infoText": "#8ebde1",
       "brandGradientFrom": "#1c1812",
       "brandGradientVia": "#11140f",
       "brandGradientTo": "#0c0c0e"
@@ -325,8 +369,8 @@ var brands = /* @__PURE__ */ Object.freeze({
       "accent2": "#745834",
       "onAccent": "#ffffff",
       "ring": "#456237",
-      "info": "#0a64f5",
-      "infoText": "#0954ce",
+      "info": "#2a5f8d",
+      "infoText": "#275782",
       "brandGradientFrom": "#f5efe5",
       "brandGradientVia": "#f1f6ee",
       "brandGradientTo": "#fafafa"
@@ -341,8 +385,8 @@ var brands = /* @__PURE__ */ Object.freeze({
       "accent2": "#8d9aec",
       "onAccent": "#0c0c0e",
       "ring": "#8888f2",
-      "info": "#3b83f7",
-      "infoText": "#629cf8",
+      "info": "#5e99c9",
+      "infoText": "#8ebde1",
       "brandGradientFrom": "#121321",
       "brandGradientVia": "#111019",
       "brandGradientTo": "#0c0c0e"
@@ -355,8 +399,8 @@ var brands = /* @__PURE__ */ Object.freeze({
       "accent2": "#2d3c9f",
       "onAccent": "#ffffff",
       "ring": "#3c38b2",
-      "info": "#0a64f5",
-      "infoText": "#0954ce",
+      "info": "#2a5f8d",
+      "infoText": "#275782",
       "brandGradientFrom": "#ebecfa",
       "brandGradientVia": "#f0f0fa",
       "brandGradientTo": "#fafafa"
@@ -371,8 +415,8 @@ var brands = /* @__PURE__ */ Object.freeze({
       "accent2": "#7695f9",
       "onAccent": "#0c0e17",
       "ring": "#fbcf23",
-      "info": "#3b83f7",
-      "infoText": "#629cf8",
+      "info": "#5e99c9",
+      "infoText": "#8ebde1",
       "brandGradientFrom": "#101628",
       "brandGradientVia": "#0f111a",
       "brandGradientTo": "#0c0c0e"
@@ -385,8 +429,8 @@ var brands = /* @__PURE__ */ Object.freeze({
       "accent2": "#6285f8",
       "onAccent": "#0c0e17",
       "ring": "#1743d3",
-      "info": "#0a64f5",
-      "infoText": "#0954ce",
+      "info": "#2a5f8d",
+      "infoText": "#275782",
       "brandGradientFrom": "#e8edfc",
       "brandGradientVia": "#fcf8e8",
       "brandGradientTo": "#fafafa"
@@ -401,8 +445,8 @@ var brands = /* @__PURE__ */ Object.freeze({
       "accent2": "#dc946a",
       "onAccent": "#0a0f0c",
       "ring": "#65c374",
-      "info": "#3b83f7",
-      "infoText": "#629cf8",
+      "info": "#5e99c9",
+      "infoText": "#8ebde1",
       "brandGradientFrom": "#111d15",
       "brandGradientVia": "#181410",
       "brandGradientTo": "#0c0c0e"
@@ -415,8 +459,8 @@ var brands = /* @__PURE__ */ Object.freeze({
       "accent2": "#954923",
       "onAccent": "#ffffff",
       "ring": "#21692f",
-      "info": "#0a64f5",
-      "infoText": "#0954ce",
+      "info": "#2a5f8d",
+      "infoText": "#275782",
       "brandGradientFrom": "#e9f7eb",
       "brandGradientVia": "#faf1eb",
       "brandGradientTo": "#fafafa"
@@ -764,7 +808,7 @@ function Map({
   ) });
 }
 var noSubscription = () => () => void 0;
-function Marker({ position, label, onPress, selected, size = 18, children }) {
+function Marker({ position, label, onPress, selected, size = 18, children, drop }) {
   const { map: m, lib, places } = useMap();
   const s = map();
   const id = React2.useId();
@@ -795,8 +839,9 @@ function Marker({ position, label, onPress, selected, size = 18, children }) {
         "aria-hidden": onPress ? void 0 : true,
         "aria-pressed": onPress && selected !== void 0 ? selected : void 0,
         "data-selected": selected ? "" : void 0,
+        "data-drop": drop === void 0 ? void 0 : "",
         className: s.marker(),
-        style: children ? void 0 : { width: size, height: size },
+        style: { ...children ? null : { width: size, height: size }, ...drop === void 0 ? null : { "--kz-map-drop-delay": `${drop}ms` } },
         onClick: onPress,
         children: [
           children,
@@ -824,6 +869,92 @@ function UserPosition({ position, label, accuracy }) {
   }, [m, lib, position[0], position[1]]);
   return accuracy ? /* @__PURE__ */ jsx(RadiusCircle, { center: position, radius: accuracy, tone: "soft" }) : null;
 }
+function Pulse({ position, label, size = 56, tone = "accent" }) {
+  const { map: m, lib, places } = useMap();
+  const id = React2.useId();
+  React2.useEffect(() => {
+    places.add(id, label);
+    return () => places.remove(id);
+  }, [id, label, places]);
+  React2.useEffect(() => {
+    if (!m || !lib) return;
+    const el = document.createElement("div");
+    el.className = "kz-map-pulse";
+    el.setAttribute("data-tone", tone);
+    el.setAttribute("aria-hidden", "true");
+    el.style.setProperty("--kz-map-pulse-size", `${size}px`);
+    const marker = new lib.Marker({ element: el, anchor: "center" }).setLngLat([...position]).addTo(m);
+    return () => void marker.remove();
+  }, [m, lib, tone, size, position[0], position[1]]);
+  return null;
+}
+function Route({ path, label, draw = true, duration = 1400, courier, tripDuration = 3200, repeatAfter, replayKey, tone = "accent" }) {
+  const { map: m, lib, ready, reduce, places } = useMap();
+  const id = `kz-route-${React2.useId().replace(/[^a-zA-Z0-9]/g, "")}`;
+  const animated = draw && !reduce;
+  const token = replayKey ?? 0;
+  const [doneFor, setDoneFor] = React2.useState(null);
+  const drawn = !animated || doneFor === token;
+  const whole = React2.useMemo(() => sliceLine(path, 1), [path]);
+  const start = React2.useMemo(() => sliceLine(path, 0), [path]);
+  React2.useEffect(() => {
+    places.add(id, label);
+    return () => places.remove(id);
+  }, [id, label, places]);
+  useGeoLayer(id, drawn ? whole : start, (c) => [
+    { id: `${id}-casing`, type: "line", source: id, layout: { "line-cap": "round", "line-join": "round" }, paint: { "line-color": c.accent, "line-width": 9, "line-opacity": tone === "soft" ? 0.08 : 0.16, "line-blur": 3 } },
+    { id: `${id}-line`, type: "line", source: id, layout: { "line-cap": "round", "line-join": "round" }, paint: { "line-color": c.accent, "line-width": tone === "soft" ? 2 : 3.5, "line-opacity": tone === "soft" ? 0.6 : 1 } }
+  ]);
+  const [visible, setVisible] = React2.useState(() => typeof IntersectionObserver === "undefined");
+  React2.useEffect(() => {
+    const el = m?.getContainer?.();
+    if (!el || typeof IntersectionObserver === "undefined") return;
+    const io = new IntersectionObserver(([entry]) => setVisible(!!entry?.isIntersecting), { threshold: 0.25 });
+    io.observe(el);
+    return () => io.disconnect();
+  }, [m]);
+  React2.useEffect(() => {
+    if (!m || !ready || !animated || drawn || !visible) return;
+    const source = m.getSource(id);
+    let frame = 0;
+    const began = performance.now();
+    const step = (now) => {
+      const t = Math.min(1, (now - began) / Math.max(1, duration));
+      source?.setData?.(sliceLine(path, 1 - (1 - t) ** 3));
+      if (t < 1) frame = requestAnimationFrame(step);
+      else setDoneFor(token);
+    };
+    frame = requestAnimationFrame(step);
+    return () => cancelAnimationFrame(frame);
+  }, [m, ready, animated, drawn, visible, id, path, duration, token]);
+  const [trip, setTrip] = React2.useState(0);
+  React2.useEffect(() => {
+    if (!courier || !m || !lib || !ready || !drawn) return;
+    const el = document.createElement("div");
+    el.className = "kz-map-courier";
+    el.setAttribute("aria-hidden", "true");
+    const marker = new lib.Marker({ element: el, anchor: "center" }).setLngLat([...path[reduce ? path.length - 1 : 0] ?? [0, 0]]).addTo(m);
+    let frame = 0;
+    let timer;
+    if (!reduce && visible) {
+      const began = performance.now();
+      const step = (now) => {
+        const t = Math.min(1, (now - began) / Math.max(1, tripDuration));
+        const eased = t < 0.5 ? 2 * t * t : 1 - (-2 * t + 2) ** 2 / 2;
+        marker.setLngLat([...pointAlong(path, eased).position]);
+        if (t < 1) frame = requestAnimationFrame(step);
+        else if (repeatAfter !== void 0) timer = setTimeout(() => setTrip((n) => n + 1), repeatAfter);
+      };
+      frame = requestAnimationFrame(step);
+    } else if (!reduce) marker.setLngLat([...path[path.length - 1] ?? [0, 0]]);
+    return () => {
+      cancelAnimationFrame(frame);
+      clearTimeout(timer);
+      marker.remove();
+    };
+  }, [courier, m, lib, ready, drawn, visible, reduce, path, tripDuration, repeatAfter, trip, token]);
+  return null;
+}
 function useGeoLayer(id, data, layers2, source = {}) {
   const { map: m, ready } = useMap();
   const dataRef = React2.useRef(data);
@@ -1023,8 +1154,10 @@ export {
   MAP_TILES,
   Map,
   Marker,
+  Pulse,
   REGION_FROM_ZOOM,
   RadiusCircle,
+  Route,
   StaticMap,
   UserPosition,
   circlePolygon,
@@ -1040,8 +1173,11 @@ export {
   mapPalette,
   mapStyle,
   mix,
+  pathLength,
+  pointAlong,
   project,
   setMapAssetsBase,
+  sliceLine,
   staticMap,
   useMap
 };