@phila/phila-ui-map-core 1.0.1-beta.6 → 1.0.1-beta.7

package/dist/components.d.ts

@@ -225,6 +225,7 @@ iconSize: number;
 toggleable: boolean;
 active: boolean;
 activeColor: string;
+teleportTo: undefined;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 click: () => void;
 }, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_14<__VLS_TypePropsToRuntimeProps_14<MapButtonProps>, {
@@ -237,6 +238,7 @@ iconSize: number;
 toggleable: boolean;
 active: boolean;
 activeColor: string;
+teleportTo: undefined;
 }>>> & Readonly<{
 onClick?: (() => any) | undefined;
 }>, {
@@ -249,6 +251,7 @@ iconSize: number;
 toggleable: boolean;
 active: boolean;
 activeColor: string;
+teleportTo: HTMLElement | null;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
 declare const __VLS_component_7: DefineComponent<ExtractPropTypes<__VLS_WithDefaults_21<__VLS_TypePropsToRuntimeProps_21<CyclomediaRecordingsLayerProps>, {
@@ -980,6 +983,7 @@ position: string;
 selectedIndex: number;
 useAsControl: boolean;
 isDropUp: boolean;
+teleportTo: undefined;
 }>>, {
 isOpen: Ref<boolean, boolean>;
 selectedIndex: Ref<number, number>;
@@ -993,10 +997,12 @@ position: string;
 selectedIndex: number;
 useAsControl: boolean;
 isDropUp: boolean;
+teleportTo: undefined;
 }>>> & Readonly<{
 onSelect?: ((option: BasemapOption, index: number) => any) | undefined;
 }>, {
 position: MapControlPosition_2;
+teleportTo: HTMLElement | null;
 selectedIndex: number;
 useAsControl: boolean;
 isDropUp: boolean;
@@ -1008,6 +1014,7 @@ declare interface BasemapDropdownProps {
     selectedIndex?: number;
     useAsControl?: boolean;
     isDropUp?: boolean;
+    teleportTo?: HTMLElement | null;
 }
 
 declare interface BasemapOption {
@@ -1026,6 +1033,7 @@ title: string;
 iconSize: number;
 showDropdown: boolean;
 dropdownOptions: () => ImageryYearOption[];
+teleportTo: undefined;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 change: (value: BasemapChangeEvent) => void;
 }, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_16<__VLS_TypePropsToRuntimeProps_16<BasemapToggleProps>, {
@@ -1036,12 +1044,14 @@ title: string;
 iconSize: number;
 showDropdown: boolean;
 dropdownOptions: () => ImageryYearOption[];
+teleportTo: undefined;
 }>>> & Readonly<{
 onChange?: ((value: BasemapChangeEvent) => any) | undefined;
 }>, {
 position: MapControlPosition_2;
 title: string;
 iconSize: number;
+teleportTo: HTMLElement | null;
 imageryUrl: string;
 imageryLabelsUrl: string;
 showDropdown: boolean;
@@ -1058,6 +1068,7 @@ declare interface BasemapToggleProps extends BaseProps {
     iconSize?: number;
     showDropdown?: boolean;
     dropdownOptions?: BasemapOption[];
+    teleportTo?: HTMLElement | null;
 }
 
 /**
@@ -1181,6 +1192,7 @@ iconSize: number;
 title: string;
 active: boolean;
 disabled: boolean;
+teleportTo: undefined;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 toggle: (data: {
 active: boolean;
@@ -1196,6 +1208,7 @@ iconSize: number;
 title: string;
 active: boolean;
 disabled: boolean;
+teleportTo: undefined;
 }>>> & Readonly<{
 onError?: ((error: Error) => any) | undefined;
 onToggle?: ((data: {
@@ -1210,6 +1223,7 @@ position: MapControlPosition;
 title: string;
 iconSize: number;
 active: boolean;
+teleportTo: HTMLElement | null;
 disabled: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
@@ -1253,6 +1267,8 @@ export declare interface CyclomediaButtonProps {
     active?: boolean;
     /** Whether the button is disabled */
     disabled?: boolean;
+    /** Element to teleport the button control into */
+    teleportTo?: HTMLElement | null;
 }
 
 /**
@@ -1539,18 +1555,21 @@ export declare const DrawTool: DefineComponent<ExtractPropTypes<__VLS_WithDefaul
 position: string;
 title: string;
 iconSize: number;
+teleportTo: undefined;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 polygonComplete: (geometry: ShapeGeometry) => void;
 }, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_13<__VLS_TypePropsToRuntimeProps_13<DrawToolProps>, {
 position: string;
 title: string;
 iconSize: number;
+teleportTo: undefined;
 }>>> & Readonly<{
 onPolygonComplete?: ((geometry: ShapeGeometry) => any) | undefined;
 }>, {
 position: MapControlPosition_2;
 title: string;
 iconSize: number;
+teleportTo: HTMLElement | null;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
 declare interface DrawToolProps extends BaseProps {
@@ -1559,6 +1578,7 @@ declare interface DrawToolProps extends BaseProps {
     position?: MapControlPosition_2;
     title?: string;
     iconSize?: number;
+    teleportTo?: HTMLElement | null;
 }
 
 /**
@@ -1651,6 +1671,7 @@ iconSize: number;
 title: string;
 trackUser: boolean;
 markerColor: string;
+teleportTo: undefined;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 located: (data: {
 longitude: number;
@@ -1664,6 +1685,7 @@ iconSize: number;
 title: string;
 trackUser: boolean;
 markerColor: string;
+teleportTo: undefined;
 }>>> & Readonly<{
 onLocated?: ((data: {
 longitude: number;
@@ -1675,6 +1697,7 @@ onError?: ((error: Error | GeolocationPositionError) => any) | undefined;
 position: MapControlPosition_2;
 title: string;
 iconSize: number;
+teleportTo: HTMLElement | null;
 trackUser: boolean;
 markerColor: string;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
@@ -1686,6 +1709,7 @@ declare interface GeolocationButtonProps extends BaseProps {
     title?: string;
     trackUser?: boolean;
     markerColor?: string;
+    teleportTo?: HTMLElement | null;
 }
 
 /**
@@ -1844,6 +1868,7 @@ declare interface MapButtonProps extends BaseProps {
     toggleable?: boolean;
     active?: boolean;
     activeColor?: string;
+    teleportTo?: HTMLElement | null;
 }
 
 /**
@@ -2035,6 +2060,7 @@ placeholder: string;
 geocode: boolean;
 centerOnResult: boolean;
 searchZoom: number;
+teleportTo: undefined;
 }>>, {
 loading: Ref<boolean, boolean>;
 error: Ref<string | null, string | null>;
@@ -2049,12 +2075,14 @@ placeholder: string;
 geocode: boolean;
 centerOnResult: boolean;
 searchZoom: number;
+teleportTo: undefined;
 }>>> & Readonly<{
 onError?: ((error: string) => any) | undefined;
 onSearch?: ((query: string) => any) | undefined;
 onResult?: ((result: AisGeocodeResult) => any) | undefined;
 }>, {
 position: MapControlPosition_2;
+teleportTo: HTMLElement | null;
 placeholder: string;
 geocode: boolean;
 centerOnResult: boolean;
@@ -2070,6 +2098,7 @@ declare interface MapSearchControlProps {
     centerOnResult?: boolean;
     /** Zoom level when centering on result (default: 17) */
     searchZoom?: number;
+    teleportTo?: HTMLElement | null;
 }
 
 export declare const MapTooltip: __VLS_WithTemplateSlots_2<typeof __VLS_component_2, ReturnType<typeof __VLS_template_2>>;
@@ -2146,6 +2175,7 @@ iconSize: number;
 title: string;
 active: boolean;
 disabled: boolean;
+teleportTo: undefined;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 toggle: (payload: PictometryButtonTogglePayload) => void;
 error: (error: Error) => void;
@@ -2155,6 +2185,7 @@ iconSize: number;
 title: string;
 active: boolean;
 disabled: boolean;
+teleportTo: undefined;
 }>>> & Readonly<{
 onError?: ((error: Error) => any) | undefined;
 onToggle?: ((payload: PictometryButtonTogglePayload) => any) | undefined;
@@ -2163,6 +2194,7 @@ position: MapControlPosition_3;
 title: string;
 iconSize: number;
 active: boolean;
+teleportTo: HTMLElement | null;
 disabled: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
@@ -2184,6 +2216,8 @@ export declare interface PictometryButtonProps {
     iconSize?: number;
     /** Whether the button is disabled */
     disabled?: boolean;
+    /** Element to teleport the button control into */
+    teleportTo?: HTMLElement | null;
 }
 
 /**
@@ -2668,41 +2702,22 @@ declare interface SymbolLayerProps extends BaseLayerProps {
 declare function toggleDropdown(): void;
 
 /**
- * Composable for adding MapLibre controls to the map.
+ * Composable for adding native MapLibre controls to a Vue-managed corner container.
  *
- * This composable handles positioning controls in MapLibre's corner containers
- * (top-left, top-right, etc.) and automatic cleanup on unmount.
+ * This is for MapLibre's built-in controls (like NavigationControl) that create
+ * their own DOM elements internally. It calls control.onAdd(map) to get the
+ * element, then appends it to the correct corner container provided by Map.vue.
  *
- * ## What is IControl?
- *
- * IControl is MapLibre's interface for map controls. It's not a class you extend -
- * it's a TypeScript interface that uses "duck typing": any object with the right
- * methods qualifies. The required methods are:
- *
- *   - onAdd(map): Called when control is added. Must return an HTMLElement.
- *   - onRemove(): Called when control is removed. Handle any cleanup here.
- *
- * So this plain object is a valid IControl:
- *
- *   { onAdd() { return myDiv; }, onRemove() {} }
- *
- * ## Usage
- *
- * For Vue template-based controls (MapButton, MapSearchControl, BasemapDropdown),
- * pass a ref to the container element. The composable creates the IControl internally,
- * returning your Vue template's DOM element from onAdd():
- *
- *   const containerRef = ref<HTMLElement | null>(null);
- *   useMapControl(props, containerRef);
- *
- * For MapLibre's built-in controls (like NavigationControl), pass a function that
- * returns the control. These already implement IControl internally:
+ * For Vue-template controls (MapButton, MapSearchControl, BasemapDropdown),
+ * use the <Teleport> pattern with inject("controlCorners") instead.
  *
+ * Usage:
  *   useMapControl(props, () => new maplibregl.NavigationControl());
  */
 export declare function useMapControl(props: {
     position?: MapControlPosition_2;
-}, controlOrContainer: Ref<HTMLElement | null> | (() => IControl)): void;
+    teleportTo?: HTMLElement | null;
+}, createControl: () => IControl): void;
 
 /**
  * Validate credentials format (doesn't verify with server)

package/dist/components.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./PictometryPanel-6pvRJItM.cjs"),o=require("./useMapControl-DEFMi86p.cjs"),a=require("./index-CNj5iS7C.cjs");exports.BasemapDropdown=e._sfc_main$13;exports.BasemapToggle=e._sfc_main$12;exports.CircleLayer=e._sfc_main$4;exports.CyclomediaButton=e.CyclomediaButton;exports.CyclomediaPanel=e.CyclomediaPanel;exports.CyclomediaRecordingsLayer=e._sfc_main$15;exports.DrawTool=e._sfc_main$9;exports.FillLayer=e._sfc_main$2;exports.GeolocationButton=e._sfc_main$11;exports.LineLayer=e._sfc_main$3;exports.Map=e.Map;exports.MapButton=e._sfc_main$10;exports.MapFloatingPanel=e._sfc_main$8;exports.MapIconTextPin=e.MapIconTextPin;exports.MapLoadingOverlay=e.MapLoadingOverlay;exports.MapMarker=e._sfc_main;exports.MapNavigationControl=e._sfc_main$7;exports.MapPopup=e._sfc_main$1;exports.MapSearchControl=e._sfc_main$14;exports.MapTooltip=e.MapTooltip;exports.PictometryButton=e.PictometryButton;exports.PictometryLabelsControl=e._sfc_main$17;exports.PictometryLayerControl=e.PictometryLayerControl;exports.PictometryPanel=e.PictometryPanel;exports.PictometryParcelsControl=e._sfc_main$16;exports.RasterLayer=e._sfc_main$6;exports.SymbolLayer=e._sfc_main$5;exports.clearTokenCache=e.clearTokenCache;exports.defaultBasemapSource=e.defaultBasemapSource;exports.defaultImageryOptions=e.defaultImageryOptions;exports.defaultLabelsSource=e.defaultLabelsSource;exports.getValidToken=e.getValidToken;exports.imageryLabelsSource=e.imageryLabelsSource;exports.imageryLabelsUrl=e.imageryLabelsUrl;exports.imageryParcelOutlinesSource=e.imageryParcelOutlinesSource;exports.imagerySources=e.imagerySources;exports.isPictometryLoaded=e.isPictometryLoaded;exports.loadPictometryScript=e.loadPictometryScript;exports.validateCredentials=e.validateCredentials;exports.useMapControl=o.useMapControl;exports.fetchParcelGeometry=a.fetchParcelGeometry;exports.geocodeAddress=a.geocodeAddress;exports.queryParcelAtPoint=a.queryParcelAtPoint;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./PictometryPanel-NWZ2m-qA.cjs"),o=require("./useMapControl-CQEU6ZEn.cjs"),a=require("./index-CNj5iS7C.cjs");exports.BasemapDropdown=e._sfc_main$13;exports.BasemapToggle=e._sfc_main$12;exports.CircleLayer=e._sfc_main$4;exports.CyclomediaButton=e.CyclomediaButton;exports.CyclomediaPanel=e.CyclomediaPanel;exports.CyclomediaRecordingsLayer=e._sfc_main$15;exports.DrawTool=e._sfc_main$9;exports.FillLayer=e._sfc_main$2;exports.GeolocationButton=e._sfc_main$11;exports.LineLayer=e._sfc_main$3;exports.Map=e.Map;exports.MapButton=e._sfc_main$10;exports.MapFloatingPanel=e._sfc_main$8;exports.MapIconTextPin=e.MapIconTextPin;exports.MapLoadingOverlay=e.MapLoadingOverlay;exports.MapMarker=e._sfc_main;exports.MapNavigationControl=e._sfc_main$7;exports.MapPopup=e._sfc_main$1;exports.MapSearchControl=e._sfc_main$14;exports.MapTooltip=e.MapTooltip;exports.PictometryButton=e.PictometryButton;exports.PictometryLabelsControl=e._sfc_main$17;exports.PictometryLayerControl=e.PictometryLayerControl;exports.PictometryPanel=e.PictometryPanel;exports.PictometryParcelsControl=e._sfc_main$16;exports.RasterLayer=e._sfc_main$6;exports.SymbolLayer=e._sfc_main$5;exports.clearTokenCache=e.clearTokenCache;exports.defaultBasemapSource=e.defaultBasemapSource;exports.defaultImageryOptions=e.defaultImageryOptions;exports.defaultLabelsSource=e.defaultLabelsSource;exports.getValidToken=e.getValidToken;exports.imageryLabelsSource=e.imageryLabelsSource;exports.imageryLabelsUrl=e.imageryLabelsUrl;exports.imageryParcelOutlinesSource=e.imageryParcelOutlinesSource;exports.imagerySources=e.imagerySources;exports.isPictometryLoaded=e.isPictometryLoaded;exports.loadPictometryScript=e.loadPictometryScript;exports.validateCredentials=e.validateCredentials;exports.useMapControl=o.useMapControl;exports.fetchParcelGeometry=a.fetchParcelGeometry;exports.geocodeAddress=a.geocodeAddress;exports.queryParcelAtPoint=a.queryParcelAtPoint;

package/dist/components.mjs

@@ -1,5 +1,5 @@
-import { p as o, o as s, f as r, C as t, r as l, s as i, l as c, d as n, n as y, e as m, M as p, m as d, k as u, a as P, i as g, _ as L, j as C, c as M, q as f, b as B, P as S, w as b, u as T, t as x, v as h, h as k, g as v, B as q, D as w, F as A, E as D, z as F, H as G, J as I, I as O, G as R, y as j, x as z, A as E } from "./PictometryPanel-Y4rO0d4R.js";
-import { u as J } from "./useMapControl-CLsqbbTQ.js";
+import { p as o, o as s, f as r, C as t, r as l, s as i, l as c, d as n, n as y, e as m, M as p, m as d, k as u, a as P, i as g, _ as L, j as C, c as M, q as f, b as B, P as S, w as b, u as T, t as x, v as h, h as k, g as v, B as q, D as w, F as A, E as D, z as F, H as G, J as I, I as O, G as R, y as j, x as z, A as E } from "./PictometryPanel-BYMErsa9.js";
+import { u as J } from "./useMapControl-BsuTq6k_.js";
 import { f as U, g as V, q as _ } from "./index-BXLyy2C_.js";
 export {
   o as BasemapDropdown,

package/dist/composables.d.ts

@@ -1,45 +1,25 @@
 import { IControl } from 'maplibre-gl';
-import { Ref } from 'vue';
 
 /** Common position type for map controls */
 declare type MapControlPosition = "top-left" | "top-right" | "bottom-left" | "bottom-right";
 
 /**
- * Composable for adding MapLibre controls to the map.
+ * Composable for adding native MapLibre controls to a Vue-managed corner container.
  *
- * This composable handles positioning controls in MapLibre's corner containers
- * (top-left, top-right, etc.) and automatic cleanup on unmount.
+ * This is for MapLibre's built-in controls (like NavigationControl) that create
+ * their own DOM elements internally. It calls control.onAdd(map) to get the
+ * element, then appends it to the correct corner container provided by Map.vue.
  *
- * ## What is IControl?
- *
- * IControl is MapLibre's interface for map controls. It's not a class you extend -
- * it's a TypeScript interface that uses "duck typing": any object with the right
- * methods qualifies. The required methods are:
- *
- *   - onAdd(map): Called when control is added. Must return an HTMLElement.
- *   - onRemove(): Called when control is removed. Handle any cleanup here.
- *
- * So this plain object is a valid IControl:
- *
- *   { onAdd() { return myDiv; }, onRemove() {} }
- *
- * ## Usage
- *
- * For Vue template-based controls (MapButton, MapSearchControl, BasemapDropdown),
- * pass a ref to the container element. The composable creates the IControl internally,
- * returning your Vue template's DOM element from onAdd():
- *
- *   const containerRef = ref<HTMLElement | null>(null);
- *   useMapControl(props, containerRef);
- *
- * For MapLibre's built-in controls (like NavigationControl), pass a function that
- * returns the control. These already implement IControl internally:
+ * For Vue-template controls (MapButton, MapSearchControl, BasemapDropdown),
+ * use the <Teleport> pattern with inject("controlCorners") instead.
  *
+ * Usage:
  *   useMapControl(props, () => new maplibregl.NavigationControl());
  */
 export declare function useMapControl(props: {
     position?: MapControlPosition;
-}, controlOrContainer: Ref<HTMLElement | null> | (() => IControl)): void;
+    teleportTo?: HTMLElement | null;
+}, createControl: () => IControl): void;
 
 export { }
 

package/dist/composables.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./useMapControl-DEFMi86p.cjs");exports.useMapControl=e.useMapControl;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./useMapControl-CQEU6ZEn.cjs");exports.useMapControl=e.useMapControl;

package/dist/composables.mjs

@@ -1,4 +1,4 @@
-import { u as a } from "./useMapControl-CLsqbbTQ.js";
+import { u as a } from "./useMapControl-BsuTq6k_.js";
 export {
   a as useMapControl
 };

package/dist/index.d.ts

@@ -225,6 +225,7 @@ iconSize: number;
 toggleable: boolean;
 active: boolean;
 activeColor: string;
+teleportTo: undefined;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 click: () => void;
 }, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_14<__VLS_TypePropsToRuntimeProps_14<MapButtonProps>, {
@@ -237,6 +238,7 @@ iconSize: number;
 toggleable: boolean;
 active: boolean;
 activeColor: string;
+teleportTo: undefined;
 }>>> & Readonly<{
 onClick?: (() => any) | undefined;
 }>, {
@@ -249,6 +251,7 @@ iconSize: number;
 toggleable: boolean;
 active: boolean;
 activeColor: string;
+teleportTo: HTMLElement | null;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
 declare const __VLS_component_7: DefineComponent<ExtractPropTypes<__VLS_WithDefaults_21<__VLS_TypePropsToRuntimeProps_21<CyclomediaRecordingsLayerProps>, {
@@ -980,6 +983,7 @@ position: string;
 selectedIndex: number;
 useAsControl: boolean;
 isDropUp: boolean;
+teleportTo: undefined;
 }>>, {
 isOpen: Ref<boolean, boolean>;
 selectedIndex: Ref<number, number>;
@@ -993,10 +997,12 @@ position: string;
 selectedIndex: number;
 useAsControl: boolean;
 isDropUp: boolean;
+teleportTo: undefined;
 }>>> & Readonly<{
 onSelect?: ((option: BasemapOption, index: number) => any) | undefined;
 }>, {
 position: MapControlPosition_2;
+teleportTo: HTMLElement | null;
 selectedIndex: number;
 useAsControl: boolean;
 isDropUp: boolean;
@@ -1008,6 +1014,7 @@ declare interface BasemapDropdownProps {
     selectedIndex?: number;
     useAsControl?: boolean;
     isDropUp?: boolean;
+    teleportTo?: HTMLElement | null;
 }
 
 declare interface BasemapOption {
@@ -1026,6 +1033,7 @@ title: string;
 iconSize: number;
 showDropdown: boolean;
 dropdownOptions: () => ImageryYearOption[];
+teleportTo: undefined;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 change: (value: BasemapChangeEvent) => void;
 }, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_16<__VLS_TypePropsToRuntimeProps_16<BasemapToggleProps>, {
@@ -1036,12 +1044,14 @@ title: string;
 iconSize: number;
 showDropdown: boolean;
 dropdownOptions: () => ImageryYearOption[];
+teleportTo: undefined;
 }>>> & Readonly<{
 onChange?: ((value: BasemapChangeEvent) => any) | undefined;
 }>, {
 position: MapControlPosition_2;
 title: string;
 iconSize: number;
+teleportTo: HTMLElement | null;
 imageryUrl: string;
 imageryLabelsUrl: string;
 showDropdown: boolean;
@@ -1058,6 +1068,7 @@ declare interface BasemapToggleProps extends BaseProps {
     iconSize?: number;
     showDropdown?: boolean;
     dropdownOptions?: BasemapOption[];
+    teleportTo?: HTMLElement | null;
 }
 
 /**
@@ -1181,6 +1192,7 @@ iconSize: number;
 title: string;
 active: boolean;
 disabled: boolean;
+teleportTo: undefined;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 toggle: (data: {
 active: boolean;
@@ -1196,6 +1208,7 @@ iconSize: number;
 title: string;
 active: boolean;
 disabled: boolean;
+teleportTo: undefined;
 }>>> & Readonly<{
 onError?: ((error: Error) => any) | undefined;
 onToggle?: ((data: {
@@ -1210,6 +1223,7 @@ position: MapControlPosition;
 title: string;
 iconSize: number;
 active: boolean;
+teleportTo: HTMLElement | null;
 disabled: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
@@ -1253,6 +1267,8 @@ export declare interface CyclomediaButtonProps {
     active?: boolean;
     /** Whether the button is disabled */
     disabled?: boolean;
+    /** Element to teleport the button control into */
+    teleportTo?: HTMLElement | null;
 }
 
 /**
@@ -1539,18 +1555,21 @@ export declare const DrawTool: DefineComponent<ExtractPropTypes<__VLS_WithDefaul
 position: string;
 title: string;
 iconSize: number;
+teleportTo: undefined;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 polygonComplete: (geometry: ShapeGeometry) => void;
 }, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_13<__VLS_TypePropsToRuntimeProps_13<DrawToolProps>, {
 position: string;
 title: string;
 iconSize: number;
+teleportTo: undefined;
 }>>> & Readonly<{
 onPolygonComplete?: ((geometry: ShapeGeometry) => any) | undefined;
 }>, {
 position: MapControlPosition_2;
 title: string;
 iconSize: number;
+teleportTo: HTMLElement | null;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
 declare interface DrawToolProps extends BaseProps {
@@ -1559,6 +1578,7 @@ declare interface DrawToolProps extends BaseProps {
     position?: MapControlPosition_2;
     title?: string;
     iconSize?: number;
+    teleportTo?: HTMLElement | null;
 }
 
 /**
@@ -1651,6 +1671,7 @@ iconSize: number;
 title: string;
 trackUser: boolean;
 markerColor: string;
+teleportTo: undefined;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 located: (data: {
 longitude: number;
@@ -1664,6 +1685,7 @@ iconSize: number;
 title: string;
 trackUser: boolean;
 markerColor: string;
+teleportTo: undefined;
 }>>> & Readonly<{
 onLocated?: ((data: {
 longitude: number;
@@ -1675,6 +1697,7 @@ onError?: ((error: Error | GeolocationPositionError) => any) | undefined;
 position: MapControlPosition_2;
 title: string;
 iconSize: number;
+teleportTo: HTMLElement | null;
 trackUser: boolean;
 markerColor: string;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
@@ -1686,6 +1709,7 @@ declare interface GeolocationButtonProps extends BaseProps {
     title?: string;
     trackUser?: boolean;
     markerColor?: string;
+    teleportTo?: HTMLElement | null;
 }
 
 /**
@@ -1844,6 +1868,7 @@ declare interface MapButtonProps extends BaseProps {
     toggleable?: boolean;
     active?: boolean;
     activeColor?: string;
+    teleportTo?: HTMLElement | null;
 }
 
 /**
@@ -2035,6 +2060,7 @@ placeholder: string;
 geocode: boolean;
 centerOnResult: boolean;
 searchZoom: number;
+teleportTo: undefined;
 }>>, {
 loading: Ref<boolean, boolean>;
 error: Ref<string | null, string | null>;
@@ -2049,12 +2075,14 @@ placeholder: string;
 geocode: boolean;
 centerOnResult: boolean;
 searchZoom: number;
+teleportTo: undefined;
 }>>> & Readonly<{
 onError?: ((error: string) => any) | undefined;
 onSearch?: ((query: string) => any) | undefined;
 onResult?: ((result: AisGeocodeResult) => any) | undefined;
 }>, {
 position: MapControlPosition_2;
+teleportTo: HTMLElement | null;
 placeholder: string;
 geocode: boolean;
 centerOnResult: boolean;
@@ -2070,6 +2098,7 @@ declare interface MapSearchControlProps {
     centerOnResult?: boolean;
     /** Zoom level when centering on result (default: 17) */
     searchZoom?: number;
+    teleportTo?: HTMLElement | null;
 }
 
 export declare const MapTooltip: __VLS_WithTemplateSlots_2<typeof __VLS_component_2, ReturnType<typeof __VLS_template_2>>;
@@ -2146,6 +2175,7 @@ iconSize: number;
 title: string;
 active: boolean;
 disabled: boolean;
+teleportTo: undefined;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 toggle: (payload: PictometryButtonTogglePayload) => void;
 error: (error: Error) => void;
@@ -2155,6 +2185,7 @@ iconSize: number;
 title: string;
 active: boolean;
 disabled: boolean;
+teleportTo: undefined;
 }>>> & Readonly<{
 onError?: ((error: Error) => any) | undefined;
 onToggle?: ((payload: PictometryButtonTogglePayload) => any) | undefined;
@@ -2163,6 +2194,7 @@ position: MapControlPosition_3;
 title: string;
 iconSize: number;
 active: boolean;
+teleportTo: HTMLElement | null;
 disabled: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
@@ -2184,6 +2216,8 @@ export declare interface PictometryButtonProps {
     iconSize?: number;
     /** Whether the button is disabled */
     disabled?: boolean;
+    /** Element to teleport the button control into */
+    teleportTo?: HTMLElement | null;
 }
 
 /**
@@ -2668,41 +2702,22 @@ declare interface SymbolLayerProps extends BaseLayerProps {
 declare function toggleDropdown(): void;
 
 /**
- * Composable for adding MapLibre controls to the map.
+ * Composable for adding native MapLibre controls to a Vue-managed corner container.
  *
- * This composable handles positioning controls in MapLibre's corner containers
- * (top-left, top-right, etc.) and automatic cleanup on unmount.
+ * This is for MapLibre's built-in controls (like NavigationControl) that create
+ * their own DOM elements internally. It calls control.onAdd(map) to get the
+ * element, then appends it to the correct corner container provided by Map.vue.
  *
- * ## What is IControl?
- *
- * IControl is MapLibre's interface for map controls. It's not a class you extend -
- * it's a TypeScript interface that uses "duck typing": any object with the right
- * methods qualifies. The required methods are:
- *
- *   - onAdd(map): Called when control is added. Must return an HTMLElement.
- *   - onRemove(): Called when control is removed. Handle any cleanup here.
- *
- * So this plain object is a valid IControl:
- *
- *   { onAdd() { return myDiv; }, onRemove() {} }
- *
- * ## Usage
- *
- * For Vue template-based controls (MapButton, MapSearchControl, BasemapDropdown),
- * pass a ref to the container element. The composable creates the IControl internally,
- * returning your Vue template's DOM element from onAdd():
- *
- *   const containerRef = ref<HTMLElement | null>(null);
- *   useMapControl(props, containerRef);
- *
- * For MapLibre's built-in controls (like NavigationControl), pass a function that
- * returns the control. These already implement IControl internally:
+ * For Vue-template controls (MapButton, MapSearchControl, BasemapDropdown),
+ * use the <Teleport> pattern with inject("controlCorners") instead.
  *
+ * Usage:
  *   useMapControl(props, () => new maplibregl.NavigationControl());
  */
 export declare function useMapControl(props: {
     position?: MapControlPosition_2;
-}, controlOrContainer: Ref<HTMLElement | null> | (() => IControl)): void;
+    teleportTo?: HTMLElement | null;
+}, createControl: () => IControl): void;
 
 /**
  * Validate credentials format (doesn't verify with server)

package/dist/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./PictometryPanel-6pvRJItM.cjs"),o=require("./useMapControl-DEFMi86p.cjs"),a=require("./index-CNj5iS7C.cjs");exports.BasemapDropdown=e._sfc_main$13;exports.BasemapToggle=e._sfc_main$12;exports.CircleLayer=e._sfc_main$4;exports.CyclomediaButton=e.CyclomediaButton;exports.CyclomediaPanel=e.CyclomediaPanel;exports.CyclomediaRecordingsLayer=e._sfc_main$15;exports.DrawTool=e._sfc_main$9;exports.FillLayer=e._sfc_main$2;exports.GeolocationButton=e._sfc_main$11;exports.LineLayer=e._sfc_main$3;exports.Map=e.Map;exports.MapButton=e._sfc_main$10;exports.MapFloatingPanel=e._sfc_main$8;exports.MapIconTextPin=e.MapIconTextPin;exports.MapLoadingOverlay=e.MapLoadingOverlay;exports.MapMarker=e._sfc_main;exports.MapNavigationControl=e._sfc_main$7;exports.MapPopup=e._sfc_main$1;exports.MapSearchControl=e._sfc_main$14;exports.MapTooltip=e.MapTooltip;exports.PictometryButton=e.PictometryButton;exports.PictometryLabelsControl=e._sfc_main$17;exports.PictometryLayerControl=e.PictometryLayerControl;exports.PictometryPanel=e.PictometryPanel;exports.PictometryParcelsControl=e._sfc_main$16;exports.RasterLayer=e._sfc_main$6;exports.SymbolLayer=e._sfc_main$5;exports.clearTokenCache=e.clearTokenCache;exports.defaultBasemapSource=e.defaultBasemapSource;exports.defaultImageryOptions=e.defaultImageryOptions;exports.defaultLabelsSource=e.defaultLabelsSource;exports.getValidToken=e.getValidToken;exports.imageryLabelsSource=e.imageryLabelsSource;exports.imageryLabelsUrl=e.imageryLabelsUrl;exports.imageryParcelOutlinesSource=e.imageryParcelOutlinesSource;exports.imagerySources=e.imagerySources;exports.isPictometryLoaded=e.isPictometryLoaded;exports.loadPictometryScript=e.loadPictometryScript;exports.validateCredentials=e.validateCredentials;exports.useMapControl=o.useMapControl;exports.fetchParcelGeometry=a.fetchParcelGeometry;exports.geocodeAddress=a.geocodeAddress;exports.queryParcelAtPoint=a.queryParcelAtPoint;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./PictometryPanel-NWZ2m-qA.cjs"),o=require("./useMapControl-CQEU6ZEn.cjs"),a=require("./index-CNj5iS7C.cjs");exports.BasemapDropdown=e._sfc_main$13;exports.BasemapToggle=e._sfc_main$12;exports.CircleLayer=e._sfc_main$4;exports.CyclomediaButton=e.CyclomediaButton;exports.CyclomediaPanel=e.CyclomediaPanel;exports.CyclomediaRecordingsLayer=e._sfc_main$15;exports.DrawTool=e._sfc_main$9;exports.FillLayer=e._sfc_main$2;exports.GeolocationButton=e._sfc_main$11;exports.LineLayer=e._sfc_main$3;exports.Map=e.Map;exports.MapButton=e._sfc_main$10;exports.MapFloatingPanel=e._sfc_main$8;exports.MapIconTextPin=e.MapIconTextPin;exports.MapLoadingOverlay=e.MapLoadingOverlay;exports.MapMarker=e._sfc_main;exports.MapNavigationControl=e._sfc_main$7;exports.MapPopup=e._sfc_main$1;exports.MapSearchControl=e._sfc_main$14;exports.MapTooltip=e.MapTooltip;exports.PictometryButton=e.PictometryButton;exports.PictometryLabelsControl=e._sfc_main$17;exports.PictometryLayerControl=e.PictometryLayerControl;exports.PictometryPanel=e.PictometryPanel;exports.PictometryParcelsControl=e._sfc_main$16;exports.RasterLayer=e._sfc_main$6;exports.SymbolLayer=e._sfc_main$5;exports.clearTokenCache=e.clearTokenCache;exports.defaultBasemapSource=e.defaultBasemapSource;exports.defaultImageryOptions=e.defaultImageryOptions;exports.defaultLabelsSource=e.defaultLabelsSource;exports.getValidToken=e.getValidToken;exports.imageryLabelsSource=e.imageryLabelsSource;exports.imageryLabelsUrl=e.imageryLabelsUrl;exports.imageryParcelOutlinesSource=e.imageryParcelOutlinesSource;exports.imagerySources=e.imagerySources;exports.isPictometryLoaded=e.isPictometryLoaded;exports.loadPictometryScript=e.loadPictometryScript;exports.validateCredentials=e.validateCredentials;exports.useMapControl=o.useMapControl;exports.fetchParcelGeometry=a.fetchParcelGeometry;exports.geocodeAddress=a.geocodeAddress;exports.queryParcelAtPoint=a.queryParcelAtPoint;