maplibre-gl-plugin-template 0.1.0

package/dist/react.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.cjs","sources":["../src/lib/core/PluginControlReact.tsx","../src/lib/hooks/usePluginState.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { PluginControl } from './PluginControl';\nimport type { PluginControlReactProps } from './types';\n\n/**\n * React wrapper component for PluginControl.\n *\n * This component manages the lifecycle of a PluginControl instance,\n * adding it to the map on mount and removing it on unmount.\n *\n * @example\n * ```tsx\n * import { PluginControlReact } from 'maplibre-gl-plugin-template/react';\n *\n * function MyMap() {\n *   const [map, setMap] = useState<Map | null>(null);\n *\n *   return (\n *     <>\n *       <div ref={mapContainer} />\n *       {map && (\n *         <PluginControlReact\n *           map={map}\n *           title=\"My Control\"\n *           collapsed={false}\n *         />\n *       )}\n *     </>\n *   );\n * }\n * ```\n *\n * @param props - Component props including map instance and control options\n * @returns null - This component renders nothing directly\n */\nexport function PluginControlReact({\n  map,\n  onStateChange,\n  ...options\n}: PluginControlReactProps): null {\n  const controlRef = useRef<PluginControl | null>(null);\n\n  useEffect(() => {\n    if (!map) return;\n\n    // Create the control instance\n    const control = new PluginControl(options);\n    controlRef.current = control;\n\n    // Register state change handler if provided\n    if (onStateChange) {\n      control.on('statechange', (event) => {\n        onStateChange(event.state);\n      });\n    }\n\n    // Add control to map\n    map.addControl(control, options.position || 'top-right');\n\n    // Cleanup on unmount\n    return () => {\n      if (map.hasControl(control)) {\n        map.removeControl(control);\n      }\n      controlRef.current = null;\n    };\n  }, [map]);\n\n  // Update options when they change\n  useEffect(() => {\n    if (controlRef.current) {\n      // Handle collapsed state changes\n      const currentState = controlRef.current.getState();\n      if (options.collapsed !== undefined && options.collapsed !== currentState.collapsed) {\n        if (options.collapsed) {\n          controlRef.current.collapse();\n        } else {\n          controlRef.current.expand();\n        }\n      }\n    }\n  }, [options.collapsed]);\n\n  return null;\n}\n","import { useState, useCallback } from 'react';\nimport type { PluginState } from '../core/types';\n\n/**\n * Default initial state for the plugin\n */\nconst DEFAULT_STATE: PluginState = {\n  collapsed: true,\n  panelWidth: 300,\n  data: {},\n};\n\n/**\n * Custom hook for managing plugin state in React applications.\n *\n * This hook provides a simple way to track and update the state\n * of a PluginControl from React components.\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const { state, setCollapsed, setData, reset } = usePluginState();\n *\n *   return (\n *     <div>\n *       <button onClick={() => setCollapsed(!state.collapsed)}>\n *         {state.collapsed ? 'Expand' : 'Collapse'}\n *       </button>\n *       <PluginControlReact\n *         map={map}\n *         collapsed={state.collapsed}\n *         onStateChange={(newState) => setState(newState)}\n *       />\n *     </div>\n *   );\n * }\n * ```\n *\n * @param initialState - Optional initial state values\n * @returns Object containing state and update functions\n */\nexport function usePluginState(initialState?: Partial<PluginState>) {\n  const [state, setState] = useState<PluginState>({\n    ...DEFAULT_STATE,\n    ...initialState,\n  });\n\n  /**\n   * Sets the collapsed state\n   */\n  const setCollapsed = useCallback((collapsed: boolean) => {\n    setState((prev) => ({ ...prev, collapsed }));\n  }, []);\n\n  /**\n   * Sets the panel width\n   */\n  const setPanelWidth = useCallback((panelWidth: number) => {\n    setState((prev) => ({ ...prev, panelWidth }));\n  }, []);\n\n  /**\n   * Sets custom data in the state\n   */\n  const setData = useCallback((data: Record<string, unknown>) => {\n    setState((prev) => ({ ...prev, data: { ...prev.data, ...data } }));\n  }, []);\n\n  /**\n   * Resets the state to default values\n   */\n  const reset = useCallback(() => {\n    setState({ ...DEFAULT_STATE, ...initialState });\n  }, [initialState]);\n\n  /**\n   * Toggles the collapsed state\n   */\n  const toggle = useCallback(() => {\n    setState((prev) => ({ ...prev, collapsed: !prev.collapsed }));\n  }, []);\n\n  return {\n    state,\n    setState,\n    setCollapsed,\n    setPanelWidth,\n    setData,\n    reset,\n    toggle,\n  };\n}\n"],"names":["useRef","useEffect","PluginControl","useState","useCallback"],"mappings":";;;;AAmCO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAkC;AAChC,QAAM,aAAaA,MAAAA,OAA6B,IAAI;AAEpDC,QAAAA,UAAU,MAAM;AACd,QAAI,CAAC,IAAK;AAGV,UAAM,UAAU,IAAIC,cAAAA,cAAc,OAAO;AACzC,eAAW,UAAU;AAGrB,QAAI,eAAe;AACjB,cAAQ,GAAG,eAAe,CAAC,UAAU;AACnC,sBAAc,MAAM,KAAK;AAAA,MAC3B,CAAC;AAAA,IACH;AAGA,QAAI,WAAW,SAAS,QAAQ,YAAY,WAAW;AAGvD,WAAO,MAAM;AACX,UAAI,IAAI,WAAW,OAAO,GAAG;AAC3B,YAAI,cAAc,OAAO;AAAA,MAC3B;AACA,iBAAW,UAAU;AAAA,IACvB;AAAA,EACF,GAAG,CAAC,GAAG,CAAC;AAGRD,QAAAA,UAAU,MAAM;AACd,QAAI,WAAW,SAAS;AAEtB,YAAM,eAAe,WAAW,QAAQ,SAAA;AACxC,UAAI,QAAQ,cAAc,UAAa,QAAQ,cAAc,aAAa,WAAW;AACnF,YAAI,QAAQ,WAAW;AACrB,qBAAW,QAAQ,SAAA;AAAA,QACrB,OAAO;AACL,qBAAW,QAAQ,OAAA;AAAA,QACrB;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,QAAQ,SAAS,CAAC;AAEtB,SAAO;AACT;AC9EA,MAAM,gBAA6B;AAAA,EACjC,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,MAAM,CAAA;AACR;AA+BO,SAAS,eAAe,cAAqC;AAClE,QAAM,CAAC,OAAO,QAAQ,IAAIE,eAAsB;AAAA,IAC9C,GAAG;AAAA,IACH,GAAG;AAAA,EAAA,CACJ;AAKD,QAAM,eAAeC,kBAAY,CAAC,cAAuB;AACvD,aAAS,CAAC,UAAU,EAAE,GAAG,MAAM,YAAY;AAAA,EAC7C,GAAG,CAAA,CAAE;AAKL,QAAM,gBAAgBA,kBAAY,CAAC,eAAuB;AACxD,aAAS,CAAC,UAAU,EAAE,GAAG,MAAM,aAAa;AAAA,EAC9C,GAAG,CAAA,CAAE;AAKL,QAAM,UAAUA,kBAAY,CAAC,SAAkC;AAC7D,aAAS,CAAC,UAAU,EAAE,GAAG,MAAM,MAAM,EAAE,GAAG,KAAK,MAAM,GAAG,KAAA,IAAS;AAAA,EACnE,GAAG,CAAA,CAAE;AAKL,QAAM,QAAQA,MAAAA,YAAY,MAAM;AAC9B,aAAS,EAAE,GAAG,eAAe,GAAG,cAAc;AAAA,EAChD,GAAG,CAAC,YAAY,CAAC;AAKjB,QAAM,SAASA,MAAAA,YAAY,MAAM;AAC/B,aAAS,CAAC,UAAU,EAAE,GAAG,MAAM,WAAW,CAAC,KAAK,UAAA,EAAY;AAAA,EAC9D,GAAG,CAAA,CAAE;AAEL,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;;;"}

package/dist/react.mjs

@@ -0,0 +1,79 @@
+import { useRef, useEffect, useState, useCallback } from "react";
+import { P as PluginControl } from "./PluginControl-CwImH8Ra.js";
+function PluginControlReact({
+  map,
+  onStateChange,
+  ...options
+}) {
+  const controlRef = useRef(null);
+  useEffect(() => {
+    if (!map) return;
+    const control = new PluginControl(options);
+    controlRef.current = control;
+    if (onStateChange) {
+      control.on("statechange", (event) => {
+        onStateChange(event.state);
+      });
+    }
+    map.addControl(control, options.position || "top-right");
+    return () => {
+      if (map.hasControl(control)) {
+        map.removeControl(control);
+      }
+      controlRef.current = null;
+    };
+  }, [map]);
+  useEffect(() => {
+    if (controlRef.current) {
+      const currentState = controlRef.current.getState();
+      if (options.collapsed !== void 0 && options.collapsed !== currentState.collapsed) {
+        if (options.collapsed) {
+          controlRef.current.collapse();
+        } else {
+          controlRef.current.expand();
+        }
+      }
+    }
+  }, [options.collapsed]);
+  return null;
+}
+const DEFAULT_STATE = {
+  collapsed: true,
+  panelWidth: 300,
+  data: {}
+};
+function usePluginState(initialState) {
+  const [state, setState] = useState({
+    ...DEFAULT_STATE,
+    ...initialState
+  });
+  const setCollapsed = useCallback((collapsed) => {
+    setState((prev) => ({ ...prev, collapsed }));
+  }, []);
+  const setPanelWidth = useCallback((panelWidth) => {
+    setState((prev) => ({ ...prev, panelWidth }));
+  }, []);
+  const setData = useCallback((data) => {
+    setState((prev) => ({ ...prev, data: { ...prev.data, ...data } }));
+  }, []);
+  const reset = useCallback(() => {
+    setState({ ...DEFAULT_STATE, ...initialState });
+  }, [initialState]);
+  const toggle = useCallback(() => {
+    setState((prev) => ({ ...prev, collapsed: !prev.collapsed }));
+  }, []);
+  return {
+    state,
+    setState,
+    setCollapsed,
+    setPanelWidth,
+    setData,
+    reset,
+    toggle
+  };
+}
+export {
+  PluginControlReact,
+  usePluginState
+};
+//# sourceMappingURL=react.mjs.map

package/dist/react.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.mjs","sources":["../src/lib/core/PluginControlReact.tsx","../src/lib/hooks/usePluginState.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { PluginControl } from './PluginControl';\nimport type { PluginControlReactProps } from './types';\n\n/**\n * React wrapper component for PluginControl.\n *\n * This component manages the lifecycle of a PluginControl instance,\n * adding it to the map on mount and removing it on unmount.\n *\n * @example\n * ```tsx\n * import { PluginControlReact } from 'maplibre-gl-plugin-template/react';\n *\n * function MyMap() {\n *   const [map, setMap] = useState<Map | null>(null);\n *\n *   return (\n *     <>\n *       <div ref={mapContainer} />\n *       {map && (\n *         <PluginControlReact\n *           map={map}\n *           title=\"My Control\"\n *           collapsed={false}\n *         />\n *       )}\n *     </>\n *   );\n * }\n * ```\n *\n * @param props - Component props including map instance and control options\n * @returns null - This component renders nothing directly\n */\nexport function PluginControlReact({\n  map,\n  onStateChange,\n  ...options\n}: PluginControlReactProps): null {\n  const controlRef = useRef<PluginControl | null>(null);\n\n  useEffect(() => {\n    if (!map) return;\n\n    // Create the control instance\n    const control = new PluginControl(options);\n    controlRef.current = control;\n\n    // Register state change handler if provided\n    if (onStateChange) {\n      control.on('statechange', (event) => {\n        onStateChange(event.state);\n      });\n    }\n\n    // Add control to map\n    map.addControl(control, options.position || 'top-right');\n\n    // Cleanup on unmount\n    return () => {\n      if (map.hasControl(control)) {\n        map.removeControl(control);\n      }\n      controlRef.current = null;\n    };\n  }, [map]);\n\n  // Update options when they change\n  useEffect(() => {\n    if (controlRef.current) {\n      // Handle collapsed state changes\n      const currentState = controlRef.current.getState();\n      if (options.collapsed !== undefined && options.collapsed !== currentState.collapsed) {\n        if (options.collapsed) {\n          controlRef.current.collapse();\n        } else {\n          controlRef.current.expand();\n        }\n      }\n    }\n  }, [options.collapsed]);\n\n  return null;\n}\n","import { useState, useCallback } from 'react';\nimport type { PluginState } from '../core/types';\n\n/**\n * Default initial state for the plugin\n */\nconst DEFAULT_STATE: PluginState = {\n  collapsed: true,\n  panelWidth: 300,\n  data: {},\n};\n\n/**\n * Custom hook for managing plugin state in React applications.\n *\n * This hook provides a simple way to track and update the state\n * of a PluginControl from React components.\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const { state, setCollapsed, setData, reset } = usePluginState();\n *\n *   return (\n *     <div>\n *       <button onClick={() => setCollapsed(!state.collapsed)}>\n *         {state.collapsed ? 'Expand' : 'Collapse'}\n *       </button>\n *       <PluginControlReact\n *         map={map}\n *         collapsed={state.collapsed}\n *         onStateChange={(newState) => setState(newState)}\n *       />\n *     </div>\n *   );\n * }\n * ```\n *\n * @param initialState - Optional initial state values\n * @returns Object containing state and update functions\n */\nexport function usePluginState(initialState?: Partial<PluginState>) {\n  const [state, setState] = useState<PluginState>({\n    ...DEFAULT_STATE,\n    ...initialState,\n  });\n\n  /**\n   * Sets the collapsed state\n   */\n  const setCollapsed = useCallback((collapsed: boolean) => {\n    setState((prev) => ({ ...prev, collapsed }));\n  }, []);\n\n  /**\n   * Sets the panel width\n   */\n  const setPanelWidth = useCallback((panelWidth: number) => {\n    setState((prev) => ({ ...prev, panelWidth }));\n  }, []);\n\n  /**\n   * Sets custom data in the state\n   */\n  const setData = useCallback((data: Record<string, unknown>) => {\n    setState((prev) => ({ ...prev, data: { ...prev.data, ...data } }));\n  }, []);\n\n  /**\n   * Resets the state to default values\n   */\n  const reset = useCallback(() => {\n    setState({ ...DEFAULT_STATE, ...initialState });\n  }, [initialState]);\n\n  /**\n   * Toggles the collapsed state\n   */\n  const toggle = useCallback(() => {\n    setState((prev) => ({ ...prev, collapsed: !prev.collapsed }));\n  }, []);\n\n  return {\n    state,\n    setState,\n    setCollapsed,\n    setPanelWidth,\n    setData,\n    reset,\n    toggle,\n  };\n}\n"],"names":[],"mappings":";;AAmCO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAkC;AAChC,QAAM,aAAa,OAA6B,IAAI;AAEpD,YAAU,MAAM;AACd,QAAI,CAAC,IAAK;AAGV,UAAM,UAAU,IAAI,cAAc,OAAO;AACzC,eAAW,UAAU;AAGrB,QAAI,eAAe;AACjB,cAAQ,GAAG,eAAe,CAAC,UAAU;AACnC,sBAAc,MAAM,KAAK;AAAA,MAC3B,CAAC;AAAA,IACH;AAGA,QAAI,WAAW,SAAS,QAAQ,YAAY,WAAW;AAGvD,WAAO,MAAM;AACX,UAAI,IAAI,WAAW,OAAO,GAAG;AAC3B,YAAI,cAAc,OAAO;AAAA,MAC3B;AACA,iBAAW,UAAU;AAAA,IACvB;AAAA,EACF,GAAG,CAAC,GAAG,CAAC;AAGR,YAAU,MAAM;AACd,QAAI,WAAW,SAAS;AAEtB,YAAM,eAAe,WAAW,QAAQ,SAAA;AACxC,UAAI,QAAQ,cAAc,UAAa,QAAQ,cAAc,aAAa,WAAW;AACnF,YAAI,QAAQ,WAAW;AACrB,qBAAW,QAAQ,SAAA;AAAA,QACrB,OAAO;AACL,qBAAW,QAAQ,OAAA;AAAA,QACrB;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,QAAQ,SAAS,CAAC;AAEtB,SAAO;AACT;AC9EA,MAAM,gBAA6B;AAAA,EACjC,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,MAAM,CAAA;AACR;AA+BO,SAAS,eAAe,cAAqC;AAClE,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAsB;AAAA,IAC9C,GAAG;AAAA,IACH,GAAG;AAAA,EAAA,CACJ;AAKD,QAAM,eAAe,YAAY,CAAC,cAAuB;AACvD,aAAS,CAAC,UAAU,EAAE,GAAG,MAAM,YAAY;AAAA,EAC7C,GAAG,CAAA,CAAE;AAKL,QAAM,gBAAgB,YAAY,CAAC,eAAuB;AACxD,aAAS,CAAC,UAAU,EAAE,GAAG,MAAM,aAAa;AAAA,EAC9C,GAAG,CAAA,CAAE;AAKL,QAAM,UAAU,YAAY,CAAC,SAAkC;AAC7D,aAAS,CAAC,UAAU,EAAE,GAAG,MAAM,MAAM,EAAE,GAAG,KAAK,MAAM,GAAG,KAAA,IAAS;AAAA,EACnE,GAAG,CAAA,CAAE;AAKL,QAAM,QAAQ,YAAY,MAAM;AAC9B,aAAS,EAAE,GAAG,eAAe,GAAG,cAAc;AAAA,EAChD,GAAG,CAAC,YAAY,CAAC;AAKjB,QAAM,SAAS,YAAY,MAAM;AAC/B,aAAS,CAAC,UAAU,EAAE,GAAG,MAAM,WAAW,CAAC,KAAK,UAAA,EAAY;AAAA,EAC9D,GAAG,CAAA,CAAE;AAEL,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;"}

package/dist/types/index.d.ts

@@ -0,0 +1,4 @@
+export { PluginControl } from './lib/core/PluginControl';
+export type { PluginControlOptions, PluginState, PluginControlEvent, PluginControlEventHandler, } from './lib/core/types';
+export { clamp, formatNumericValue, generateId, debounce, throttle, classNames, } from './lib/utils';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,iCAAiC,CAAC;AAGzC,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAGzD,YAAY,EACV,oBAAoB,EACpB,WAAW,EACX,kBAAkB,EAClB,yBAAyB,GAC1B,MAAM,kBAAkB,CAAC;AAG1B,OAAO,EACL,KAAK,EACL,kBAAkB,EAClB,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,UAAU,GACX,MAAM,aAAa,CAAC"}

package/dist/types/lib/core/PluginControl.d.ts

@@ -0,0 +1,113 @@
+import { IControl, Map as MapLibreMap } from 'maplibre-gl';
+import { PluginControlOptions, PluginState, PluginControlEvent, PluginControlEventHandler } from './types';
+/**
+ * A template MapLibre GL control that can be customized for various plugin needs.
+ *
+ * @example
+ * ```typescript
+ * const control = new PluginControl({
+ *   title: 'My Custom Control',
+ *   collapsed: false,
+ *   panelWidth: 320,
+ * });
+ * map.addControl(control, 'top-right');
+ * ```
+ */
+export declare class PluginControl implements IControl {
+    private _map?;
+    private _container?;
+    private _panel?;
+    private _options;
+    private _state;
+    private _eventHandlers;
+    /**
+     * Creates a new PluginControl instance.
+     *
+     * @param options - Configuration options for the control
+     */
+    constructor(options?: Partial<PluginControlOptions>);
+    /**
+     * Called when the control is added to the map.
+     * Implements the IControl interface.
+     *
+     * @param map - The MapLibre GL map instance
+     * @returns The control's container element
+     */
+    onAdd(map: MapLibreMap): HTMLElement;
+    /**
+     * Called when the control is removed from the map.
+     * Implements the IControl interface.
+     */
+    onRemove(): void;
+    /**
+     * Gets the current state of the control.
+     *
+     * @returns The current plugin state
+     */
+    getState(): PluginState;
+    /**
+     * Updates the control state.
+     *
+     * @param newState - Partial state to merge with current state
+     */
+    setState(newState: Partial<PluginState>): void;
+    /**
+     * Toggles the collapsed state of the control panel.
+     */
+    toggle(): void;
+    /**
+     * Expands the control panel.
+     */
+    expand(): void;
+    /**
+     * Collapses the control panel.
+     */
+    collapse(): void;
+    /**
+     * Registers an event handler.
+     *
+     * @param event - The event type to listen for
+     * @param handler - The callback function
+     */
+    on(event: PluginControlEvent, handler: PluginControlEventHandler): void;
+    /**
+     * Removes an event handler.
+     *
+     * @param event - The event type
+     * @param handler - The callback function to remove
+     */
+    off(event: PluginControlEvent, handler: PluginControlEventHandler): void;
+    /**
+     * Gets the map instance.
+     *
+     * @returns The MapLibre GL map instance or undefined if not added to a map
+     */
+    getMap(): MapLibreMap | undefined;
+    /**
+     * Gets the control container element.
+     *
+     * @returns The container element or undefined if not added to a map
+     */
+    getContainer(): HTMLElement | undefined;
+    /**
+     * Emits an event to all registered handlers.
+     *
+     * @param event - The event type to emit
+     */
+    private _emit;
+    /**
+     * Creates the main container element for the control.
+     * Contains a toggle button (29x29) matching navigation control size.
+     *
+     * @returns The container element
+     */
+    private _createContainer;
+    /**
+     * Creates the panel element with header and content areas.
+     * Panel is positioned as a dropdown below the toggle button.
+     *
+     * @returns The panel element
+     */
+    private _createPanel;
+}
+//# sourceMappingURL=PluginControl.d.ts.map

package/dist/types/lib/core/PluginControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PluginControl.d.ts","sourceRoot":"","sources":["../../../../src/lib/core/PluginControl.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,WAAW,EAAE,MAAM,aAAa,CAAC;AAChE,OAAO,KAAK,EACV,oBAAoB,EACpB,WAAW,EACX,kBAAkB,EAClB,yBAAyB,EAC1B,MAAM,SAAS,CAAC;AAkBjB;;;;;;;;;;;;GAYG;AACH,qBAAa,aAAc,YAAW,QAAQ;IAC5C,OAAO,CAAC,IAAI,CAAC,CAAc;IAC3B,OAAO,CAAC,UAAU,CAAC,CAAc;IACjC,OAAO,CAAC,MAAM,CAAC,CAAc;IAC7B,OAAO,CAAC,QAAQ,CAAiC;IACjD,OAAO,CAAC,MAAM,CAAc;IAC5B,OAAO,CAAC,cAAc,CAA0C;IAEhE;;;;OAIG;gBACS,OAAO,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC;IASnD;;;;;;OAMG;IACH,KAAK,CAAC,GAAG,EAAE,WAAW,GAAG,WAAW;IAcpC;;;OAGG;IACH,QAAQ,IAAI,IAAI;IAQhB;;;;OAIG;IACH,QAAQ,IAAI,WAAW;IAIvB;;;;OAIG;IACH,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC,WAAW,CAAC,GAAG,IAAI;IAK9C;;OAEG;IACH,MAAM,IAAI,IAAI;IAgBd;;OAEG;IACH,MAAM,IAAI,IAAI;IAMd;;OAEG;IACH,QAAQ,IAAI,IAAI;IAMhB;;;;;OAKG;IACH,EAAE,CAAC,KAAK,EAAE,kBAAkB,EAAE,OAAO,EAAE,yBAAyB,GAAG,IAAI;IAOvE;;;;;OAKG;IACH,GAAG,CAAC,KAAK,EAAE,kBAAkB,EAAE,OAAO,EAAE,yBAAyB,GAAG,IAAI;IAIxE;;;;OAIG;IACH,MAAM,IAAI,WAAW,GAAG,SAAS;IAIjC;;;;OAIG;IACH,YAAY,IAAI,WAAW,GAAG,SAAS;IAIvC;;;;OAIG;IACH,OAAO,CAAC,KAAK;IAQb;;;;;OAKG;IACH,OAAO,CAAC,gBAAgB;IA4BxB;;;;;OAKG;IACH,OAAO,CAAC,YAAY;CAqCrB"}

package/dist/types/lib/core/PluginControlReact.d.ts

@@ -0,0 +1,34 @@
+import { PluginControlReactProps } from './types';
+/**
+ * React wrapper component for PluginControl.
+ *
+ * This component manages the lifecycle of a PluginControl instance,
+ * adding it to the map on mount and removing it on unmount.
+ *
+ * @example
+ * ```tsx
+ * import { PluginControlReact } from 'maplibre-gl-plugin-template/react';
+ *
+ * function MyMap() {
+ *   const [map, setMap] = useState<Map | null>(null);
+ *
+ *   return (
+ *     <>
+ *       <div ref={mapContainer} />
+ *       {map && (
+ *         <PluginControlReact
+ *           map={map}
+ *           title="My Control"
+ *           collapsed={false}
+ *         />
+ *       )}
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @param props - Component props including map instance and control options
+ * @returns null - This component renders nothing directly
+ */
+export declare function PluginControlReact({ map, onStateChange, ...options }: PluginControlReactProps): null;
+//# sourceMappingURL=PluginControlReact.d.ts.map

package/dist/types/lib/core/PluginControlReact.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PluginControlReact.d.ts","sourceRoot":"","sources":["../../../../src/lib/core/PluginControlReact.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,GAAG,EACH,aAAa,EACb,GAAG,OAAO,EACX,EAAE,uBAAuB,GAAG,IAAI,CA6ChC"}

package/dist/types/lib/core/types.d.ts

@@ -0,0 +1,72 @@
+import { Map } from 'maplibre-gl';
+/**
+ * Options for configuring the PluginControl
+ */
+export interface PluginControlOptions {
+    /**
+     * Whether the control panel should start collapsed (showing only the toggle button)
+     * @default true
+     */
+    collapsed?: boolean;
+    /**
+     * Position of the control on the map
+     * @default 'top-right'
+     */
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /**
+     * Title displayed in the control header
+     * @default 'Plugin Control'
+     */
+    title?: string;
+    /**
+     * Width of the control panel in pixels
+     * @default 300
+     */
+    panelWidth?: number;
+    /**
+     * Custom CSS class name for the control container
+     */
+    className?: string;
+}
+/**
+ * Internal state of the plugin control
+ */
+export interface PluginState {
+    /**
+     * Whether the control panel is currently collapsed
+     */
+    collapsed: boolean;
+    /**
+     * Current panel width in pixels
+     */
+    panelWidth: number;
+    /**
+     * Any custom state data
+     */
+    data?: Record<string, unknown>;
+}
+/**
+ * Props for the React wrapper component
+ */
+export interface PluginControlReactProps extends PluginControlOptions {
+    /**
+     * MapLibre GL map instance
+     */
+    map: Map;
+    /**
+     * Callback fired when the control state changes
+     */
+    onStateChange?: (state: PluginState) => void;
+}
+/**
+ * Event types emitted by the plugin control
+ */
+export type PluginControlEvent = 'collapse' | 'expand' | 'statechange';
+/**
+ * Event handler function type
+ */
+export type PluginControlEventHandler = (event: {
+    type: PluginControlEvent;
+    state: PluginState;
+}) => void;
+//# sourceMappingURL=types.d.ts.map

package/dist/types/lib/core/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/core/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAEvC;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAC;IAErE;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAChC;AAED;;GAEG;AACH,MAAM,WAAW,uBAAwB,SAAQ,oBAAoB;IACnE;;OAEG;IACH,GAAG,EAAE,GAAG,CAAC;IAET;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;CAC9C;AAED;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,QAAQ,GAAG,aAAa,CAAC;AAEvE;;GAEG;AACH,MAAM,MAAM,yBAAyB,GAAG,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,kBAAkB,CAAC;IAAC,KAAK,EAAE,WAAW,CAAA;CAAE,KAAK,IAAI,CAAC"}

package/dist/types/lib/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { usePluginState } from './usePluginState';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/lib/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/types/lib/hooks/usePluginState.d.ts

@@ -0,0 +1,40 @@
+import { PluginState } from '../core/types';
+/**
+ * Custom hook for managing plugin state in React applications.
+ *
+ * This hook provides a simple way to track and update the state
+ * of a PluginControl from React components.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { state, setCollapsed, setData, reset } = usePluginState();
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={() => setCollapsed(!state.collapsed)}>
+ *         {state.collapsed ? 'Expand' : 'Collapse'}
+ *       </button>
+ *       <PluginControlReact
+ *         map={map}
+ *         collapsed={state.collapsed}
+ *         onStateChange={(newState) => setState(newState)}
+ *       />
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @param initialState - Optional initial state values
+ * @returns Object containing state and update functions
+ */
+export declare function usePluginState(initialState?: Partial<PluginState>): {
+    state: PluginState;
+    setState: import('react').Dispatch<import('react').SetStateAction<PluginState>>;
+    setCollapsed: (collapsed: boolean) => void;
+    setPanelWidth: (panelWidth: number) => void;
+    setData: (data: Record<string, unknown>) => void;
+    reset: () => void;
+    toggle: () => void;
+};
+//# sourceMappingURL=usePluginState.d.ts.map

package/dist/types/lib/hooks/usePluginState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePluginState.d.ts","sourceRoot":"","sources":["../../../../src/lib/hooks/usePluginState.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAWjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,cAAc,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC;;;8BASnB,OAAO;gCAOL,MAAM;oBAOlB,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;;;EA2B3D"}

package/dist/types/lib/utils/helpers.d.ts

@@ -0,0 +1,86 @@
+/**
+ * Clamps a value between a minimum and maximum.
+ *
+ * @param value - The value to clamp
+ * @param min - The minimum allowed value
+ * @param max - The maximum allowed value
+ * @returns The clamped value
+ *
+ * @example
+ * ```typescript
+ * clamp(5, 0, 10);  // returns 5
+ * clamp(-5, 0, 10); // returns 0
+ * clamp(15, 0, 10); // returns 10
+ * ```
+ */
+export declare function clamp(value: number, min: number, max: number): number;
+/**
+ * Formats a numeric value with appropriate decimal places based on step size.
+ *
+ * @param value - The value to format
+ * @param step - The step size to determine decimal places
+ * @returns The formatted value as a string
+ *
+ * @example
+ * ```typescript
+ * formatNumericValue(5, 1);     // returns "5"
+ * formatNumericValue(0.5, 0.1); // returns "0.5"
+ * formatNumericValue(0.55, 0.01); // returns "0.55"
+ * ```
+ */
+export declare function formatNumericValue(value: number, step: number): string;
+/**
+ * Generates a unique ID string.
+ *
+ * @param prefix - Optional prefix for the ID
+ * @returns A unique ID string
+ *
+ * @example
+ * ```typescript
+ * generateId('control'); // returns "control-abc123"
+ * generateId();          // returns "abc123"
+ * ```
+ */
+export declare function generateId(prefix?: string): string;
+/**
+ * Debounces a function call.
+ *
+ * @param fn - The function to debounce
+ * @param delay - The delay in milliseconds
+ * @returns A debounced version of the function
+ *
+ * @example
+ * ```typescript
+ * const debouncedUpdate = debounce(() => updateMap(), 100);
+ * window.addEventListener('resize', debouncedUpdate);
+ * ```
+ */
+export declare function debounce<T extends (...args: unknown[]) => void>(fn: T, delay: number): (...args: Parameters<T>) => void;
+/**
+ * Throttles a function call.
+ *
+ * @param fn - The function to throttle
+ * @param limit - The minimum time between calls in milliseconds
+ * @returns A throttled version of the function
+ *
+ * @example
+ * ```typescript
+ * const throttledScroll = throttle(() => handleScroll(), 100);
+ * window.addEventListener('scroll', throttledScroll);
+ * ```
+ */
+export declare function throttle<T extends (...args: unknown[]) => void>(fn: T, limit: number): (...args: Parameters<T>) => void;
+/**
+ * Creates a CSS class string from an object of class names.
+ *
+ * @param classes - Object with class names as keys and boolean values
+ * @returns A space-separated string of class names
+ *
+ * @example
+ * ```typescript
+ * classNames({ active: true, disabled: false, visible: true });
+ * // returns "active visible"
+ * ```
+ */
+export declare function classNames(classes: Record<string, boolean>): string;
+//# sourceMappingURL=helpers.d.ts.map

package/dist/types/lib/utils/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/lib/utils/helpers.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAErE;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAItE;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAGlD;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,IAAI,EAC7D,EAAE,EAAE,CAAC,EACL,KAAK,EAAE,MAAM,GACZ,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CAYlC;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,IAAI,EAC7D,EAAE,EAAE,CAAC,EACL,KAAK,EAAE,MAAM,GACZ,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CAYlC;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAKnE"}

package/dist/types/lib/utils/index.d.ts

@@ -0,0 +1,2 @@
+export { clamp, formatNumericValue, generateId, debounce, throttle, classNames, } from './helpers';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/lib/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EACL,kBAAkB,EAClB,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,UAAU,GACX,MAAM,WAAW,CAAC"}

package/dist/types/react.d.ts

@@ -0,0 +1,4 @@
+export { PluginControlReact } from './lib/core/PluginControlReact';
+export { usePluginState } from './lib/hooks';
+export type { PluginControlOptions, PluginState, PluginControlReactProps, PluginControlEvent, PluginControlEventHandler, } from './lib/core/types';
+//# sourceMappingURL=react.d.ts.map

package/dist/types/react.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../src/react.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAGnE,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAG7C,YAAY,EACV,oBAAoB,EACpB,WAAW,EACX,uBAAuB,EACvB,kBAAkB,EAClB,yBAAyB,GAC1B,MAAM,kBAAkB,CAAC"}

package/package.json

@@ -0,0 +1,101 @@
+{
+  "name": "maplibre-gl-plugin-template",
+  "version": "0.1.0",
+  "description": "A template for creating MapLibre GL JS plugins with TypeScript and React support",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/types/index.d.ts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/types/index.d.ts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./react": {
+      "import": {
+        "types": "./dist/types/react.d.ts",
+        "default": "./dist/react.mjs"
+      },
+      "require": {
+        "types": "./dist/types/react.d.ts",
+        "default": "./dist/react.cjs"
+      }
+    },
+    "./style.css": "./dist/maplibre-gl-plugin-template.css"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -p tsconfig.build.json && vite build",
+    "build:examples": "vite build --config vite.examples.config.ts",
+    "preview": "vite preview",
+    "test": "vitest --run",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest --coverage",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "format": "prettier --write \"src/**/*.{ts,tsx,css}\"",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "maplibre",
+    "maplibre-gl",
+    "map",
+    "plugin",
+    "control",
+    "react",
+    "typescript"
+  ],
+  "author": "Your Name",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/your-username/maplibre-gl-plugin-template.git"
+  },
+  "peerDependencies": {
+    "maplibre-gl": ">=3.0.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.0",
+    "@types/node": "^22.0.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^8.18.0",
+    "@typescript-eslint/parser": "^8.18.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "@vitest/ui": "^2.1.0",
+    "eslint": "^9.17.0",
+    "jsdom": "^25.0.0",
+    "maplibre-gl": "^4.7.1",
+    "prettier": "^3.4.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "typescript": "^5.7.0",
+    "vite": "^6.0.0",
+    "vite-plugin-dts": "^4.3.0",
+    "vitest": "^2.1.0"
+  }
+}