@chelone/vue 0.0.0-stage → 0.1.1

package/dist/components/maps/shape-fields.d.ts

@@ -0,0 +1,63 @@
+export declare const PointField: import("vue").DefineComponent<import("./geo-json-field.vue.js").GeoJsonFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("./geo-json-field.vue.js").GeoJsonFieldProps> & Readonly<{}>, {
+    height: number | string;
+    scrollZoom: boolean;
+    fitBounds: boolean;
+    fitPadding: number;
+    maxFitZoom: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export declare const MultiPointField: import("vue").DefineComponent<import("./geo-json-field.vue.js").GeoJsonFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("./geo-json-field.vue.js").GeoJsonFieldProps> & Readonly<{}>, {
+    height: number | string;
+    scrollZoom: boolean;
+    fitBounds: boolean;
+    fitPadding: number;
+    maxFitZoom: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export declare const LineStringField: import("vue").DefineComponent<import("./geo-json-field.vue.js").GeoJsonFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("./geo-json-field.vue.js").GeoJsonFieldProps> & Readonly<{}>, {
+    height: number | string;
+    scrollZoom: boolean;
+    fitBounds: boolean;
+    fitPadding: number;
+    maxFitZoom: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export declare const MultiLineStringField: import("vue").DefineComponent<import("./geo-json-field.vue.js").GeoJsonFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("./geo-json-field.vue.js").GeoJsonFieldProps> & Readonly<{}>, {
+    height: number | string;
+    scrollZoom: boolean;
+    fitBounds: boolean;
+    fitPadding: number;
+    maxFitZoom: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export declare const PolygonField: import("vue").DefineComponent<import("./geo-json-field.vue.js").GeoJsonFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("./geo-json-field.vue.js").GeoJsonFieldProps> & Readonly<{}>, {
+    height: number | string;
+    scrollZoom: boolean;
+    fitBounds: boolean;
+    fitPadding: number;
+    maxFitZoom: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export declare const MultiPolygonField: import("vue").DefineComponent<import("./geo-json-field.vue.js").GeoJsonFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("./geo-json-field.vue.js").GeoJsonFieldProps> & Readonly<{}>, {
+    height: number | string;
+    scrollZoom: boolean;
+    fitBounds: boolean;
+    fitPadding: number;
+    maxFitZoom: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export declare const GeometryCollectionField: import("vue").DefineComponent<import("./geo-json-field.vue.js").GeoJsonFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("./geo-json-field.vue.js").GeoJsonFieldProps> & Readonly<{}>, {
+    height: number | string;
+    scrollZoom: boolean;
+    fitBounds: boolean;
+    fitPadding: number;
+    maxFitZoom: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export declare const FeatureField: import("vue").DefineComponent<import("./geo-json-field.vue.js").GeoJsonFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("./geo-json-field.vue.js").GeoJsonFieldProps> & Readonly<{}>, {
+    height: number | string;
+    scrollZoom: boolean;
+    fitBounds: boolean;
+    fitPadding: number;
+    maxFitZoom: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export declare const FeatureCollectionField: import("vue").DefineComponent<import("./geo-json-field.vue.js").GeoJsonFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("./geo-json-field.vue.js").GeoJsonFieldProps> & Readonly<{}>, {
+    height: number | string;
+    scrollZoom: boolean;
+    fitBounds: boolean;
+    fitPadding: number;
+    maxFitZoom: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/maps/shape-fields.js

@@ -0,0 +1,21 @@
+import _sfc_main from "./geo-json-field.vue.js";
+const PointField = _sfc_main;
+const MultiPointField = _sfc_main;
+const LineStringField = _sfc_main;
+const MultiLineStringField = _sfc_main;
+const PolygonField = _sfc_main;
+const MultiPolygonField = _sfc_main;
+const GeometryCollectionField = _sfc_main;
+const FeatureField = _sfc_main;
+const FeatureCollectionField = _sfc_main;
+export {
+  FeatureCollectionField,
+  FeatureField,
+  GeometryCollectionField,
+  LineStringField,
+  MultiLineStringField,
+  MultiPointField,
+  MultiPolygonField,
+  PointField,
+  PolygonField
+};

package/dist/components/maps/use-geo-json-source.d.ts

@@ -0,0 +1,11 @@
+import { type GeoFeatureCollection, type ShapeStyle } from "@chelone/core";
+import { type MaybeRefOrGetter } from "vue";
+/** A source id no other `useGeoJsonSource` call on the page shares. */
+export declare function uniqueGeoJsonSourceId(): string;
+/**
+ * Keeps one GeoJSON source and its fill, line and point layers on the
+ * surrounding `MapCanvas`. `data` goes to `setData`; a changed `style`
+ * replaces the layers; unmounting removes both. `data` and `style` may be refs
+ * or getters.
+ */
+export declare function useGeoJsonSource(sourceId: string, data: MaybeRefOrGetter<GeoFeatureCollection>, style: MaybeRefOrGetter<ShapeStyle>): void;

package/dist/components/maps/use-geo-json-source.js

@@ -0,0 +1,40 @@
+import { shapeLayerSpecs } from "@chelone/core";
+import { computed, toValue, watch, onBeforeUnmount } from "vue";
+import { useMap } from "./use-map.js";
+let nextSourceId = 0;
+function uniqueGeoJsonSourceId() {
+  nextSourceId += 1;
+  return `geo-json-${nextSourceId}`;
+}
+function useGeoJsonSource(sourceId, data, style) {
+  const map = useMap();
+  const specs = () => shapeLayerSpecs(sourceId, toValue(style));
+  const specsKey = computed(() => JSON.stringify(specs()));
+  const initial = specs();
+  map.addSource(sourceId, { type: "geojson", data: toValue(data) });
+  for (const spec of initial) map.addLayer(spec);
+  const ids = initial.map((spec) => spec.id);
+  watch(
+    () => toValue(data),
+    (next) => {
+      map.getSource(sourceId)?.setData(next);
+    }
+  );
+  watch(specsKey, () => {
+    for (const spec of specs()) {
+      if (map.getLayer(spec.id)) map.removeLayer(spec.id);
+      map.addLayer(spec);
+    }
+  });
+  onBeforeUnmount(() => {
+    try {
+      for (const id of ids) if (map.getLayer(id)) map.removeLayer(id);
+      if (map.getSource(sourceId)) map.removeSource(sourceId);
+    } catch {
+    }
+  });
+}
+export {
+  uniqueGeoJsonSourceId,
+  useGeoJsonSource
+};

package/dist/components/maps/use-map.d.ts

@@ -0,0 +1,104 @@
+import { type GeocodingProvider, type MapStyleInput, type OverpassProvider, type RoutingProvider } from "@chelone/core";
+import { type Map as MapLibreMap, Marker } from "maplibre-gl";
+import { type PropType, type Ref } from "vue";
+/** The app-level map services. */
+export interface MapsConfig {
+    /** The basemap: a MapLibre style URL, or an object from `rasterTileStyle`. */
+    mapStyle?: MapStyleInput;
+    /** The geocoding service. The library names none: the app passes a provider. */
+    geocoder?: GeocodingProvider;
+    /** The Overpass service. The library names none: the app passes a provider. */
+    overpass?: OverpassProvider;
+    /** The routing service `LineStringInput` snaps drawn lines to roads with. The library names none. */
+    router?: RoutingProvider;
+}
+export interface MapsProviderProps extends MapsConfig {
+}
+/**
+ * Sets the map services once, near the app root. The library ships none: a
+ * component takes the matching prop instead when there is no provider.
+ *
+ * @example
+ * <MapsProvider :map-style="rasterTileStyle({ tileUrl, attribution })">
+ *   <Admin>...</Admin>
+ * </MapsProvider>
+ */
+export declare const MapsProvider: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    mapStyle: PropType<MapStyleInput | undefined>;
+    geocoder: PropType<GeocodingProvider | undefined>;
+    overpass: PropType<OverpassProvider | undefined>;
+    router: PropType<RoutingProvider | undefined>;
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | undefined, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    mapStyle: PropType<MapStyleInput | undefined>;
+    geocoder: PropType<GeocodingProvider | undefined>;
+    overpass: PropType<OverpassProvider | undefined>;
+    router: PropType<RoutingProvider | undefined>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** The services from the nearest `MapsProvider`; empty when there is none. */
+export declare function useMapsConfig(): MapsConfig;
+/** Gives the subtree the map a `MapCanvas` is building. */
+export declare function provideMap(map: Readonly<Ref<MapLibreMap | null>>): void;
+/** The map of the nearest `MapCanvas`. Throws outside one. */
+export declare function useMap(): MapLibreMap;
+export interface MapMarkerOptions {
+    /** `[lat, lng]`. */
+    position: readonly [lat: number, lng: number];
+    draggable?: boolean;
+    /** Called with the dropped position. */
+    onDragEnd?: (lat: number, lng: number) => void;
+    /** Any CSS color. Defaults to red. */
+    color?: string;
+}
+/**
+ * Puts a pin on the surrounding `MapCanvas` and removes it when the caller
+ * unmounts. `options` may be a getter or a ref: a changed position, draggable
+ * flag or color updates the same marker.
+ */
+export declare function useMapMarker(options: MapMarkerOptions | Readonly<Ref<MapMarkerOptions>> | (() => MapMarkerOptions)): Marker;
+/**
+ * A pin on the surrounding `MapCanvas`.
+ *
+ * @example
+ * <MapMarker :position="[48.85, 2.35]" draggable @drag-end="(lat, lng) => ..." />
+ */
+export declare const MapMarker: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /** `[lat, lng]`. */
+    position: {
+        type: PropType<readonly [lat: number, lng: number]>;
+        required: true;
+    };
+    draggable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Any CSS color. Defaults to red. */
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    dragEnd: (_lat: number, _lng: number) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /** `[lat, lng]`. */
+    position: {
+        type: PropType<readonly [lat: number, lng: number]>;
+        required: true;
+    };
+    draggable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Any CSS color. Defaults to red. */
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    onDragEnd?: ((_lat: number, _lng: number) => any) | undefined;
+}>, {
+    color: string;
+    draggable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export type MapMarkerProps = InstanceType<typeof MapMarker>["$props"];

package/dist/components/maps/use-map.js

@@ -0,0 +1,129 @@
+import { latLngToLngLat } from "@chelone/core";
+import { Marker } from "maplibre-gl";
+import { inject, provide, defineComponent, toValue, watch, onBeforeUnmount } from "vue";
+const MapsConfigKey = /* @__PURE__ */ Symbol("chelone-maps-config");
+const MapsProvider = defineComponent({
+  name: "MapsProvider",
+  props: {
+    mapStyle: [String, Object],
+    geocoder: Object,
+    overpass: Object,
+    router: Object
+  },
+  setup(props, { slots }) {
+    provide(MapsConfigKey, {
+      get mapStyle() {
+        return props.mapStyle;
+      },
+      get geocoder() {
+        return props.geocoder;
+      },
+      get overpass() {
+        return props.overpass;
+      },
+      get router() {
+        return props.router;
+      }
+    });
+    return () => slots.default?.();
+  }
+});
+function useMapsConfig() {
+  return inject(MapsConfigKey, {});
+}
+const MapKey = /* @__PURE__ */ Symbol("chelone-map");
+function provideMap(map) {
+  provide(MapKey, map);
+}
+function useMap() {
+  const map = inject(MapKey, null)?.value;
+  if (!map) throw new Error("useMap must be used inside a <MapCanvas>.");
+  return map;
+}
+const PIN_NS = "http://www.w3.org/2000/svg";
+const DEFAULT_PIN_COLOR = "#dc2626";
+function createPin(color) {
+  const svg = document.createElementNS(PIN_NS, "svg");
+  svg.setAttribute("viewBox", "0 0 24 36");
+  svg.setAttribute("width", "24");
+  svg.setAttribute("height", "36");
+  svg.setAttribute("aria-hidden", "true");
+  const body = document.createElementNS(PIN_NS, "path");
+  body.setAttribute(
+    "d",
+    "M12 0C5.4 0 0 5.4 0 12c0 9 12 24 12 24s12-15 12-24C24 5.4 18.6 0 12 0z"
+  );
+  body.setAttribute("fill", color);
+  const dot = document.createElementNS(PIN_NS, "circle");
+  dot.setAttribute("cx", "12");
+  dot.setAttribute("cy", "12");
+  dot.setAttribute("r", "4.5");
+  dot.setAttribute("fill", "#fff");
+  svg.append(body, dot);
+  const element = document.createElement("div");
+  element.append(svg);
+  return { element, body };
+}
+function useMapMarker(options) {
+  const map = useMap();
+  const now = toValue(options);
+  const [lat, lng] = now.position;
+  const pin = createPin(now.color ?? DEFAULT_PIN_COLOR);
+  const marker = new Marker({
+    element: pin.element,
+    anchor: "bottom",
+    draggable: now.draggable ?? false
+  }).setLngLat(latLngToLngLat([lat, lng])).addTo(map);
+  marker.on("dragend", () => {
+    const dropped = marker.getLngLat();
+    toValue(options).onDragEnd?.(dropped.lat, dropped.lng);
+  });
+  watch(
+    () => {
+      const { position, draggable, color } = toValue(options);
+      return [position[0], position[1], draggable ?? false, color];
+    },
+    ([latitude, longitude, draggable, color]) => {
+      marker.setLngLat(latLngToLngLat([latitude, longitude]));
+      marker.setDraggable(draggable);
+      pin.body.setAttribute("fill", color ?? DEFAULT_PIN_COLOR);
+    }
+  );
+  onBeforeUnmount(() => {
+    marker.remove();
+  });
+  return marker;
+}
+const MapMarker = defineComponent({
+  name: "MapMarker",
+  props: {
+    /** `[lat, lng]`. */
+    position: {
+      type: Array,
+      required: true
+    },
+    draggable: { type: Boolean, default: false },
+    /** Any CSS color. Defaults to red. */
+    color: { type: String, default: DEFAULT_PIN_COLOR }
+  },
+  emits: {
+    dragEnd: (_lat, _lng) => true
+  },
+  setup(props, { emit }) {
+    useMapMarker(() => ({
+      position: props.position,
+      draggable: props.draggable,
+      color: props.color,
+      onDragEnd: (lat, lng) => emit("dragEnd", lat, lng)
+    }));
+    return () => null;
+  }
+});
+export {
+  MapMarker,
+  MapsProvider,
+  provideMap,
+  useMap,
+  useMapMarker,
+  useMapsConfig
+};

package/dist/components/maps-draw/bbox-input.d.ts

@@ -0,0 +1,21 @@
+import type { ShapeValue } from "@chelone/core";
+import { type ShapeInputProps } from "./shape-input.vue.js";
+export interface BBoxInputProps extends Omit<ShapeInputProps, "kind" | "tools"> {
+}
+/**
+ * Edits a bounding box, `[west, south, east, north]`, by drawing a rectangle on
+ * a map. A new rectangle replaces the old one. With `aspectRatio` the stored
+ * box grows around its centre to that width over height, and the rectangle on
+ * the map follows it.
+ *
+ * Needs the optional `maplibre-gl`, `terra-draw` and
+ * `terra-draw-maplibre-gl-adapter` peers.
+ *
+ * @example
+ * <BBoxInput source="extent" label="Extent" :aspect-ratio="16 / 9" />
+ */
+export declare const BBoxInput: import("vue").DefineSetupFnComponent<BBoxInputProps, {
+    commit: (_value: ShapeValue | null) => true;
+}, {}, BBoxInputProps & {
+    onCommit?: ((_value: ShapeValue | null) => any) | undefined;
+}, import("vue").PublicProps>;

package/dist/components/maps-draw/bbox-input.js

@@ -0,0 +1,19 @@
+import { defineComponent, h } from "vue";
+import _sfc_main from "./shape-input.vue.js";
+const { kind: _kind, tools: _tools, ...options } = _sfc_main.props;
+const BBoxInput = defineComponent(
+  (props, { emit }) => () => h(_sfc_main, {
+    ...props,
+    kind: "BBox",
+    tools: ["draw-rectangle", "edit", "move", "delete"],
+    onCommit: (value) => emit("commit", value)
+  }),
+  {
+    name: "BBoxInput",
+    props: options,
+    emits: { commit: (_value) => true }
+  }
+);
+export {
+  BBoxInput
+};

package/dist/components/maps-draw/draw-icons.d.ts

@@ -0,0 +1,19 @@
+import { type PropType } from "vue";
+import type { DrawTool } from "./use-terra-draw.js";
+/**
+ * An inline SVG of a toolbar button's icon, since the Vue package has no icon
+ * library. It takes the color of the surrounding text.
+ */
+export declare const DrawIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    name: {
+        type: PropType<DrawTool | "delete">;
+        required: true;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    name: {
+        type: PropType<DrawTool | "delete">;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/components/maps-draw/draw-icons.js

@@ -0,0 +1,74 @@
+import { defineComponent, h } from "vue";
+const DRAW_ICONS = {
+  "draw-point": [
+    "M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0",
+    "M9 10a3 3 0 1 0 6 0 3 3 0 1 0-6 0"
+  ],
+  "draw-line": [
+    "M17 5a2 2 0 1 0 4 0 2 2 0 1 0-4 0",
+    "M3 19a2 2 0 1 0 4 0 2 2 0 1 0-4 0",
+    "M5 17A12 12 0 0 1 17 5"
+  ],
+  "draw-polygon": [
+    "M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
+  ],
+  "draw-rectangle": [
+    "M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"
+  ],
+  "draw-circle": ["M2 12a10 10 0 1 0 20 0 10 10 0 1 0-20 0"],
+  cut: [
+    "M4 4a2 2 0 1 0 4 0 2 2 0 1 0-4 0",
+    "M4 16a2 2 0 1 0 4 0 2 2 0 1 0-4 0",
+    "M6 18 20 4",
+    "M14.5 14.5 20 20",
+    "M8.12 8.12 12 12"
+  ],
+  edit: [
+    "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z",
+    "m15 5 4 4"
+  ],
+  move: [
+    "M12 2v20",
+    "m15 19-3 3-3-3",
+    "m19 9 3 3-3 3",
+    "M2 12h20",
+    "m5 9-3 3 3 3",
+    "m9 5 3-3 3 3"
+  ],
+  delete: [
+    "M3 6h18",
+    "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6",
+    "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2",
+    "M10 11v6",
+    "M14 11v6"
+  ]
+};
+const DrawIcon = defineComponent({
+  name: "DrawIcon",
+  props: {
+    name: {
+      type: String,
+      required: true
+    }
+  },
+  setup(props) {
+    return () => h(
+      "svg",
+      {
+        viewBox: "0 0 24 24",
+        width: 16,
+        height: 16,
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": 2,
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        "aria-hidden": "true"
+      },
+      DRAW_ICONS[props.name].map((d) => h("path", { d, key: d }))
+    );
+  }
+});
+export {
+  DrawIcon
+};

package/dist/components/maps-draw/draw-toolbar.vue.d.ts

@@ -0,0 +1,24 @@
+import type { DrawTool } from "./use-terra-draw.js";
+/** Props for {@link DrawToolbar}. */
+export interface DrawToolbarProps {
+    /** The buttons, in order. `delete` is an action on the selected feature, not a tool. */
+    tools: readonly (DrawTool | "delete")[];
+    /** The pressed tool, or `null`. */
+    active: DrawTool | null;
+    /** Enables the `delete` button. Defaults to false. */
+    canDelete?: boolean;
+    /** Disables every button. */
+    disabled?: boolean;
+    class?: string;
+}
+declare const _default: import("vue").DefineComponent<DrawToolbarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    delete: () => any;
+    "update:active": (tool: DrawTool | null) => any;
+}, string, import("vue").PublicProps, Readonly<DrawToolbarProps> & Readonly<{
+    onDelete?: (() => any) | undefined;
+    "onUpdate:active"?: ((tool: DrawTool | null) => any) | undefined;
+}>, {
+    disabled: boolean;
+    canDelete: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/maps-draw/draw-toolbar.vue.js

@@ -0,0 +1,80 @@
+import { defineComponent, openBlock, createElementBlock, normalizeClass, unref, Fragment, renderList, createBlock, withCtx, createVNode } from "vue";
+import { useTranslate } from "../../i18n/use-translate.js";
+import { cn } from "../../lib/utils.js";
+import _sfc_main$1 from "../ui/button.vue.js";
+import { DrawIcon } from "./draw-icons.js";
+const _hoisted_1 = ["aria-label"];
+const LABELS = {
+  "draw-point": "Draw a point",
+  "draw-line": "Draw a line",
+  "draw-polygon": "Draw a polygon",
+  "draw-rectangle": "Draw a rectangle",
+  "draw-circle": "Draw a circle",
+  cut: "Cut a hole",
+  edit: "Edit",
+  move: "Move",
+  delete: "Delete"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "draw-toolbar",
+  props: {
+    tools: {},
+    active: {},
+    canDelete: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    class: {}
+  },
+  emits: ["update:active", "delete"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const translate = useTranslate();
+    const labelOf = (id) => translate(`chelone.map.tool.${id.replace("-", "_")}`, { _: LABELS[id] });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        role: "toolbar",
+        "data-slot": "draw-toolbar",
+        "aria-label": unref(translate)("chelone.map.toolbar", { _: "Map tools" }),
+        class: normalizeClass(unref(cn)("flex flex-wrap items-center gap-1", props.class))
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(props.tools, (id) => {
+          return openBlock(), createElementBlock(Fragment, { key: id }, [
+            id === "delete" ? (openBlock(), createBlock(_sfc_main$1, {
+              key: 0,
+              variant: "outline",
+              size: "icon",
+              class: "size-8",
+              "aria-label": labelOf(id),
+              title: labelOf(id),
+              disabled: props.disabled || !props.canDelete,
+              onClick: _cache[0] || (_cache[0] = ($event) => emit("delete"))
+            }, {
+              default: withCtx(() => [
+                createVNode(unref(DrawIcon), { name: id }, null, 8, ["name"])
+              ]),
+              _: 2
+            }, 1032, ["aria-label", "title", "disabled"])) : (openBlock(), createBlock(_sfc_main$1, {
+              key: 1,
+              variant: id === props.active ? "default" : "outline",
+              size: "icon",
+              class: "size-8",
+              "aria-label": labelOf(id),
+              title: labelOf(id),
+              "aria-pressed": id === props.active,
+              disabled: props.disabled,
+              onClick: ($event) => emit("update:active", id === props.active ? null : id)
+            }, {
+              default: withCtx(() => [
+                createVNode(unref(DrawIcon), { name: id }, null, 8, ["name"])
+              ]),
+              _: 2
+            }, 1032, ["variant", "aria-label", "title", "aria-pressed", "disabled", "onClick"]))
+          ], 64);
+        }), 128))
+      ], 10, _hoisted_1);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/maps-draw/draw-toolbar2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./draw-toolbar.vue.js";
+export {
+  _sfc_main as default
+};

package/dist/components/maps-draw/geometry-ops.d.ts

@@ -0,0 +1,27 @@
+import { type GeoFeature, type GeoJsonValue } from "@chelone/core";
+export interface CutResult {
+    features: GeoFeature[];
+    /** False when the cutter touched no polygon, so `features` equals the input. */
+    changed: boolean;
+}
+/**
+ * Subtracts `cutter` from every Polygon and MultiPolygon feature. A feature the
+ * cutter misses comes back as is, a MultiPolygon result splits into one feature
+ * per part with the original `properties`, and a feature the cutter covers is
+ * removed. A part left with a hole keeps it. Other geometries are untouched.
+ */
+export declare function cutFeatures(features: readonly GeoFeature[], cutter: GeoFeature): CutResult;
+export interface SimplifyOptions {
+    /** In degrees. At 0 or below the value comes back unchanged. */
+    tolerance: number;
+    /** Slower, and keeps more of the shape's detail at the same tolerance. */
+    highQuality: boolean;
+}
+/**
+ * A thinned copy of a Geometry, Feature or FeatureCollection. Polygon rings stay
+ * closed, a Point or MultiPoint comes back equal, and a Feature without a
+ * geometry is kept. The input is not changed. Turf also drops collinear
+ * vertices at any tolerance above 0, so a tolerance of 0 or less skips it and
+ * returns a copy of the value.
+ */
+export declare function simplifyGeo(value: GeoJsonValue, options: SimplifyOptions): GeoJsonValue;