@sckyzo/cosmos-react 0.2.0 → 0.4.0

package/dist/intent-D0bANgYJ.d.cts

@@ -0,0 +1,12 @@
+/**
+ * The meaning a component carries, as a color: the one vocabulary behind every
+ * `intent` prop. A component may accept a documented subset (a `Button` takes
+ * `brand`, `success`, `warning` and `danger`), but never a synonym: `danger`, not
+ * `error` or `crit`; `warning`, not `warn`.
+ *
+ * `variant` is the other axis: it describes structure or emphasis (`solid`,
+ * `outline`, `ghost`), never meaning.
+ */
+type Intent = 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'danger';
+
+export type { Intent as I };

package/dist/intent-D0bANgYJ.d.ts

@@ -0,0 +1,12 @@
+/**
+ * The meaning a component carries, as a color: the one vocabulary behind every
+ * `intent` prop. A component may accept a documented subset (a `Button` takes
+ * `brand`, `success`, `warning` and `danger`), but never a synonym: `danger`, not
+ * `error` or `crit`; `warning`, not `warn`.
+ *
+ * `variant` is the other axis: it describes structure or emphasis (`solid`,
+ * `outline`, `ghost`), never meaning.
+ */
+type Intent = 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'danger';
+
+export type { Intent as I };

package/dist/map/index.cjs

@@ -0,0 +1,559 @@
+"use client";
+'use strict';
+
+var react = require('react');
+var reactDom = require('react-dom');
+var clsx = require('clsx');
+var lucideReact = require('lucide-react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/map/MapView.tsx
+function useControllableState({
+  value,
+  defaultValue,
+  onChange,
+  name
+}) {
+  const isControlled = value !== void 0;
+  const [internal, setInternal] = react.useState(defaultValue);
+  const current = isControlled ? value : internal;
+  const latest = react.useRef({ current, isControlled, onChange });
+  react.useInsertionEffect(() => {
+    latest.current = { current, isControlled, onChange };
+  });
+  const setValue = react.useCallback((next, ...args) => {
+    const state = latest.current;
+    const resolved = typeof next === "function" ? next(state.current) : next;
+    if (!state.isControlled) {
+      state.current = resolved;
+      setInternal(resolved);
+    }
+    state.onChange?.(resolved, ...args);
+  }, []);
+  useModeSwitchWarning(isControlled, name);
+  return [current, setValue, isControlled];
+}
+var isProductionBuild = (() => {
+  try {
+    return process.env.NODE_ENV === "production";
+  } catch {
+    return false;
+  }
+})();
+function useModeSwitchWarning(isControlled, name) {
+  const initial = react.useRef(isControlled);
+  const warned = react.useRef(false);
+  react.useEffect(() => {
+    if (isProductionBuild || warned.current || initial.current === isControlled) return;
+    warned.current = true;
+    const from = initial.current ? "controlled" : "uncontrolled";
+    const to = isControlled ? "controlled" : "uncontrolled";
+    console.warn(
+      `Cosmos: ${name} switched from ${from} to ${to}. Keep it one or the other for the life of the component: only \`undefined\` means uncontrolled.`
+    );
+  }, [isControlled, name]);
+}
+
+// src/settings/appearance.ts
+var COSMOS_THEMES = [
+  {
+    id: "light",
+    label: "Light",
+    dark: false,
+    preview: { bg: "#f9fafb", surface: "#ffffff", border: "#e5e7eb", text: "#667085" }
+  },
+  {
+    id: "sand",
+    label: "Sand",
+    dark: false,
+    preview: { bg: "#f9f5eb", surface: "#fffcf7", border: "#e7dfd0", text: "#746656" }
+  },
+  {
+    id: "dark",
+    label: "Dark",
+    dark: true,
+    preview: { bg: "#0a0a0a", surface: "#141414", border: "#3d3d3d", text: "#a3a3a3" }
+  },
+  {
+    id: "deep-blue",
+    label: "Deep Blue",
+    dark: true,
+    preview: { bg: "#0c111d", surface: "#101828", border: "#344054", text: "#98a2b3" }
+  }
+];
+COSMOS_THEMES.map((t) => t.id).filter((id) => id !== "light");
+var isDarkTheme = (theme) => COSMOS_THEMES.some((t) => t.id === theme && t.dark);
+
+// src/settings/useCosmosTheme.ts
+var readTheme = () => {
+  const { classList } = document.documentElement;
+  return COSMOS_THEMES.find((t) => t.id !== "light" && classList.contains(t.id))?.id ?? "light";
+};
+var subscribe = (onChange) => {
+  const observer = new MutationObserver(onChange);
+  observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
+  return () => observer.disconnect();
+};
+var getSnapshot = () => isDarkTheme(readTheme()) ? "dark" : "light";
+var getServerSnapshot = () => "light";
+var useCosmosTheme = () => react.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+var PIN_COLOR = {
+  neutral: "bg-gray-600 text-white",
+  brand: "bg-brand-500 text-white",
+  info: "bg-blue-600 text-white",
+  success: "bg-green-500 text-gray-900",
+  warning: "bg-amber-500 text-gray-900",
+  danger: "bg-red-600 text-white"
+};
+var PIN_BASE = "relative flex items-center justify-center rounded-full border-2 border-white text-xs font-semibold shadow-md transition-transform";
+var MapPin = ({ marker, selected, interactive, onSelect, onClose }) => {
+  const { id, label, description, intent = "brand", icon } = marker;
+  const name = typeof icon === "string" || typeof icon === "number" ? `${label} ${icon}` : label;
+  const face = icon != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: icon }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MapPin, { className: "size-4", "aria-hidden": "true" });
+  const className = clsx.clsx(
+    PIN_BASE,
+    "size-8",
+    PIN_COLOR[intent],
+    selected ? "ring-brand-500/40 scale-110 ring-4" : "ring-0"
+  );
+  if (!interactive) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className, "aria-hidden": "true", children: face });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        tabIndex: -1,
+        "aria-label": name,
+        "aria-expanded": selected,
+        className: clsx.clsx(className, "focus-visible:focus-indicator cursor-pointer"),
+        onClick: () => selected ? onClose() : onSelect(id),
+        children: face
+      }
+    ),
+    selected && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        role: "dialog",
+        "aria-label": label,
+        className: "inset-s-1/2 absolute bottom-full mb-3 w-max max-w-60 -translate-x-1/2 rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-panel)] p-3 pe-9 text-start text-sm text-[var(--color-text-base)] shadow-lg rtl:translate-x-1/2",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: /* @__PURE__ */ jsxRuntime.jsx("bdi", { children: label }) }),
+          description != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-0.5 text-xs text-[var(--color-text-secondary)]", children: description }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Close",
+              onClick: onClose,
+              className: "focus-visible:focus-indicator inset-e-1.5 absolute top-1.5 flex size-6 cursor-pointer items-center justify-center rounded-md text-[var(--color-text-secondary)] hover:bg-gray-100 dark:hover:bg-white/10",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-4", "aria-hidden": "true" })
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+var ClusterPin = ({ count, interactive, onOpen }) => {
+  const size = count < 10 ? "size-9" : count < 100 ? "size-11" : "size-14";
+  const className = clsx.clsx(
+    "bg-brand-600 ring-brand-500/30 flex items-center justify-center rounded-full border-2 border-white text-sm font-semibold text-white shadow-md ring-4",
+    size
+  );
+  if (!interactive) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className, "aria-hidden": "true", children: count });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      tabIndex: -1,
+      "aria-label": `${count} places, zoom in`,
+      className: clsx.clsx(className, "focus-visible:focus-indicator cursor-pointer"),
+      onClick: onOpen,
+      children: count
+    }
+  );
+};
+
+// src/map/mapGeo.ts
+var isDrawable = ({ position: [lng, lat] }) => Number.isFinite(lng) && Number.isFinite(lat) && Math.abs(lng) <= 180 && Math.abs(lat) <= 90;
+var markersToGeoJSON = (markers) => ({
+  type: "FeatureCollection",
+  features: markers.filter(isDrawable).map(({ id, position }) => ({
+    type: "Feature",
+    properties: { id },
+    geometry: { type: "Point", coordinates: [position[0], position[1]] }
+  }))
+});
+var markerBounds = (markers) => {
+  const drawable = markers.filter(isDrawable);
+  if (drawable.length === 0) return null;
+  let west = Infinity;
+  let south = Infinity;
+  let east = -Infinity;
+  let north = -Infinity;
+  for (const {
+    position: [lng, lat]
+  } of drawable) {
+    west = Math.min(west, lng);
+    east = Math.max(east, lng);
+    south = Math.min(south, lat);
+    north = Math.max(north, lat);
+  }
+  return [
+    [west, south],
+    [east, north]
+  ];
+};
+var SOURCE = "cosmos-markers";
+var CLUSTER_RADIUS = 48;
+var CLUSTER_MAX_ZOOM = 14;
+var FIT = { padding: 56, maxZoom: CLUSTER_MAX_ZOOM };
+var missingMapLibre = (cause) => new Error(
+  '@sckyzo/cosmos-react/map needs the optional peer dependency "maplibre-gl". Install it with `pnpm add maplibre-gl` (or `npm install maplibre-gl`).',
+  { cause }
+);
+var pending;
+var loadMapLibre = () => pending ??= import('maplibre-gl').then(
+  // A CommonJS build of the library comes back as `default`.
+  (mod) => mod.default ?? mod,
+  (error) => {
+    pending = void 0;
+    throw missingMapLibre(error);
+  }
+);
+var raise = (el, on) => {
+  el.style.zIndex = on ? "2" : "";
+};
+var MapView = ({
+  markers,
+  style,
+  darkStyle,
+  variant = "interactive",
+  ariaLabel = "Map",
+  height = 360,
+  fit = true,
+  initialCenter,
+  initialZoom,
+  cluster = true,
+  selectedId: selectedIdProp,
+  defaultSelectedId = null,
+  onSelectedIdChange,
+  onViewChange,
+  unavailableMessage = "The map could not be displayed.",
+  className,
+  ref
+}) => {
+  const interactive = variant === "interactive";
+  const theme = useCosmosTheme();
+  const wantedStyle = theme === "dark" && darkStyle ? darkStyle : style;
+  const [selectedId, setSelectedId] = useControllableState({
+    value: selectedIdProp,
+    defaultValue: defaultSelectedId,
+    onChange: onSelectedIdChange,
+    name: "MapView.selectedId"
+  });
+  const containerRef = react.useRef(null);
+  const mapRef = react.useRef(null);
+  const appliedStyle = react.useRef(wantedStyle);
+  const ariaLabelRef = react.useRef(ariaLabel);
+  const reveal = react.useRef(void 0);
+  const refit = react.useRef(void 0);
+  const [visible, setVisible] = react.useState([]);
+  const [failure, setFailure] = react.useState();
+  const [unavailable, setUnavailable] = react.useState(false);
+  const latest = react.useRef({ markers, fit, initialCenter, initialZoom, onViewChange, selectedId });
+  react.useInsertionEffect(() => {
+    latest.current = { markers, fit, initialCenter, initialZoom, onViewChange, selectedId };
+  });
+  react.useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    let disposed = false;
+    let map;
+    const pins = /* @__PURE__ */ new Map();
+    (async () => {
+      let ml;
+      try {
+        ml = await loadMapLibre();
+      } catch (error) {
+        if (!disposed) setFailure(error);
+        return;
+      }
+      if (disposed) return;
+      const {
+        markers: initial,
+        fit: fitFirst,
+        initialCenter: center,
+        initialZoom: zoom
+      } = latest.current;
+      const bounds = fitFirst ? markerBounds(initial) : null;
+      try {
+        map = new ml.Map({
+          container,
+          style: appliedStyle.current,
+          interactive,
+          attributionControl: { compact: false },
+          ...bounds ? { bounds, fitBoundsOptions: FIT } : { center, zoom }
+        });
+      } catch {
+        if (!disposed) setUnavailable(true);
+        return;
+      }
+      const current = map;
+      mapRef.current = current;
+      const canvas = current.getCanvas();
+      canvas.setAttribute("aria-label", ariaLabelRef.current);
+      if (!interactive) {
+        canvas.removeAttribute("tabindex");
+        canvas.setAttribute("role", "img");
+      }
+      const addSource = () => {
+        if (current.getSource(SOURCE)) return;
+        current.addSource(SOURCE, {
+          type: "geojson",
+          data: markersToGeoJSON(latest.current.markers),
+          cluster,
+          clusterRadius: CLUSTER_RADIUS,
+          clusterMaxZoom: CLUSTER_MAX_ZOOM
+        });
+        current.addLayer({
+          id: SOURCE,
+          type: "circle",
+          source: SOURCE,
+          paint: { "circle-radius": 0, "circle-opacity": 0 }
+        });
+      };
+      const sync = () => {
+        if (!current.getSource(SOURCE)) return;
+        const next = /* @__PURE__ */ new Map();
+        for (const feature of current.querySourceFeatures(SOURCE)) {
+          const { cluster_id: clusterId, point_count: count, id } = feature.properties;
+          const [lng, lat] = feature.geometry.coordinates;
+          const isCluster = clusterId !== void 0;
+          const key = isCluster ? `c:${clusterId}` : `m:${id}`;
+          next.set(key, {
+            key,
+            position: [lng, lat],
+            marker: isCluster ? null : String(id),
+            cluster: isCluster ? { id: clusterId, count } : null
+          });
+        }
+        for (const [key, pin] of pins) {
+          if (next.has(key)) continue;
+          pin.marker.remove();
+          pins.delete(key);
+        }
+        const shown = [];
+        for (const [key, entry] of next) {
+          let pin = pins.get(key);
+          if (!pin) {
+            const el = document.createElement("div");
+            const marker = new ml.Marker({ element: el }).setLngLat(entry.position).addTo(current);
+            el.removeAttribute("role");
+            el.removeAttribute("aria-label");
+            pin = { marker, el };
+            pins.set(key, pin);
+          }
+          shown.push({ ...entry, el: pin.el });
+        }
+        setVisible(shown);
+      };
+      current.on("style.load", () => {
+        addSource();
+        sync();
+      });
+      current.on("sourcedata", (event) => {
+        if (event.sourceId === SOURCE && event.isSourceLoaded) sync();
+      });
+      current.on("moveend", () => {
+        sync();
+        const { lng, lat } = current.getCenter();
+        latest.current.onViewChange?.({ center: [lng, lat], zoom: current.getZoom() });
+      });
+      reveal.current = (id) => {
+        const target = latest.current.markers.find((m) => m.id === id);
+        if (!target || !isDrawable(target)) return;
+        const separate = !pins.has(`m:${id}`);
+        current.easeTo({
+          center: [target.position[0], target.position[1]],
+          zoom: separate ? Math.max(current.getZoom(), CLUSTER_MAX_ZOOM + 1) : current.getZoom(),
+          // The popup opens above the pin: keep the pin low enough for it to fit.
+          offset: [0, 56]
+        });
+      };
+      refit.current = () => {
+        const box = markerBounds(latest.current.markers);
+        if (box) current.fitBounds(box, FIT);
+      };
+      if (latest.current.selectedId) reveal.current(latest.current.selectedId);
+    })();
+    return () => {
+      disposed = true;
+      reveal.current = void 0;
+      refit.current = void 0;
+      for (const { marker } of pins.values()) marker.remove();
+      pins.clear();
+      map?.remove();
+      mapRef.current = null;
+      setVisible([]);
+    };
+  }, [interactive, cluster]);
+  react.useEffect(() => {
+    ariaLabelRef.current = ariaLabel;
+    mapRef.current?.getCanvas().setAttribute("aria-label", ariaLabel);
+  }, [ariaLabel]);
+  react.useEffect(() => {
+    if (appliedStyle.current === wantedStyle) return;
+    appliedStyle.current = wantedStyle;
+    mapRef.current?.setStyle(wantedStyle, { diff: false });
+  }, [wantedStyle]);
+  const ids = markers.map((m) => m.id).join("\0");
+  const framed = react.useRef(ids);
+  react.useEffect(() => {
+    const source = mapRef.current?.getSource(SOURCE);
+    source?.setData(markersToGeoJSON(markers));
+  }, [markers]);
+  react.useEffect(() => {
+    if (framed.current === ids) return;
+    framed.current = ids;
+    if (fit) refit.current?.();
+  }, [ids, fit]);
+  react.useEffect(() => {
+    if (selectedId) reveal.current?.(selectedId);
+  }, [selectedId]);
+  react.useEffect(() => {
+    for (const v of visible) raise(v.el, v.marker === selectedId);
+  }, [visible, selectedId]);
+  if (failure) throw failure;
+  const byId = new Map(markers.map((m) => [m.id, m]));
+  const zoomBy = (delta) => delta > 0 ? mapRef.current?.zoomIn() : mapRef.current?.zoomOut();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className: clsx.clsx(
+        "relative isolate w-full overflow-hidden rounded-xl border border-[var(--color-border)] bg-[var(--color-bg-base)]",
+        // MapLibre's attribution is a half-white box under the page's text colour, unreadable
+        // over dark tiles: it takes the panel and the secondary text, and its links an underline
+        // rather than MapLibre's black. `!`: MapLibre's stylesheet is loaded outside the layers.
+        "[&_.maplibregl-ctrl-attrib]:bg-[var(--color-bg-panel)]! [&_.maplibregl-ctrl-attrib]:text-[var(--color-text-secondary)] [&_.maplibregl-ctrl-attrib_a]:text-inherit! [&_.maplibregl-ctrl-attrib_a]:underline!",
+        className
+      ),
+      style: { height },
+      onKeyDown: (event) => {
+        if (event.key === "Escape" && selectedId) {
+          event.stopPropagation();
+          setSelectedId(null);
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: "size-full" }),
+        unavailable && /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            role: "status",
+            className: "absolute inset-0 flex items-center justify-center p-6 text-center text-sm text-[var(--color-text-secondary)]",
+            children: unavailableMessage
+          }
+        ),
+        visible.map((v) => {
+          const content = v.cluster ? /* @__PURE__ */ jsxRuntime.jsx(
+            ClusterPin,
+            {
+              count: v.cluster.count,
+              interactive,
+              onOpen: () => {
+                const map = mapRef.current;
+                const source = map?.getSource(SOURCE);
+                const group = v.cluster;
+                if (!map || !source || !group) return;
+                source.getClusterExpansionZoom(group.id).then(
+                  (zoom) => map.easeTo({ center: v.position, zoom }),
+                  () => void 0
+                );
+              }
+            }
+          ) : v.marker !== null && byId.has(v.marker) && /* @__PURE__ */ jsxRuntime.jsx(
+            MapPin,
+            {
+              marker: byId.get(v.marker),
+              selected: v.marker === selectedId,
+              interactive,
+              onSelect: setSelectedId,
+              onClose: () => setSelectedId(null)
+            }
+          );
+          return content ? reactDom.createPortal(content, v.el, v.key) : null;
+        }),
+        interactive && !unavailable && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inset-e-3 absolute top-3 z-10 flex flex-col overflow-hidden rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-panel)] shadow-sm", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Zoom in",
+              onClick: () => zoomBy(1),
+              className: "focus-visible:focus-indicator size-ctrl-36 flex cursor-pointer items-center justify-center text-[var(--color-text-base)] hover:bg-gray-100 focus-visible:ring-inset dark:hover:bg-white/10",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "size-4", "aria-hidden": "true" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Zoom out",
+              onClick: () => zoomBy(-1),
+              className: "focus-visible:focus-indicator size-ctrl-36 flex cursor-pointer items-center justify-center border-t border-[var(--color-border)] text-[var(--color-text-base)] hover:bg-gray-100 focus-visible:ring-inset dark:hover:bg-white/10",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { className: "size-4", "aria-hidden": "true" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+var MapMarkerList = ({
+  markers,
+  selectedId = null,
+  onSelect,
+  ariaLabel = "Places",
+  className
+}) => /* @__PURE__ */ jsxRuntime.jsx("ul", { "aria-label": ariaLabel, className: clsx.clsx("flex flex-col gap-1", className), children: markers.map(({ id, label, description }) => {
+  const selected = id === selectedId;
+  return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      "aria-pressed": selected,
+      onClick: () => onSelect?.(id),
+      className: clsx.clsx(
+        "focus-visible:focus-indicator py-row-8 flex w-full cursor-pointer items-start gap-3 rounded-lg border px-3 text-start text-sm",
+        selected ? "border-brand-300 bg-brand-50 dark:border-brand-500/40 dark:bg-brand-500/10" : "border-transparent hover:bg-gray-100 dark:hover:bg-white/5"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          lucideReact.MapPin,
+          {
+            className: clsx.clsx(
+              "mt-0.5 size-4 shrink-0",
+              selected ? "text-brand-600 dark:text-brand-400" : "text-[var(--color-text-secondary)]"
+            ),
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block font-medium text-[var(--color-text-base)]", children: /* @__PURE__ */ jsxRuntime.jsx("bdi", { children: label }) }),
+          description != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-xs text-[var(--color-text-secondary)]", children: description })
+        ] })
+      ]
+    }
+  ) }, id);
+}) });
+
+exports.MapMarkerList = MapMarkerList;
+exports.MapView = MapView;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map