maplibre-gl-plugin-template 0.1.0

package/dist/PluginControl-CwImH8Ra.js

@@ -0,0 +1,224 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+const DEFAULT_OPTIONS = {
+  collapsed: true,
+  position: "top-right",
+  title: "Plugin Control",
+  panelWidth: 300,
+  className: ""
+};
+class PluginControl {
+  /**
+   * Creates a new PluginControl instance.
+   *
+   * @param options - Configuration options for the control
+   */
+  constructor(options) {
+    __publicField(this, "_map");
+    __publicField(this, "_container");
+    __publicField(this, "_panel");
+    __publicField(this, "_options");
+    __publicField(this, "_state");
+    __publicField(this, "_eventHandlers", new globalThis.Map());
+    this._options = { ...DEFAULT_OPTIONS, ...options };
+    this._state = {
+      collapsed: this._options.collapsed,
+      panelWidth: this._options.panelWidth,
+      data: {}
+    };
+  }
+  /**
+   * 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) {
+    this._map = map;
+    this._container = this._createContainer();
+    this._panel = this._createPanel();
+    this._container.appendChild(this._panel);
+    if (!this._state.collapsed) {
+      this._panel.classList.add("expanded");
+    }
+    return this._container;
+  }
+  /**
+   * Called when the control is removed from the map.
+   * Implements the IControl interface.
+   */
+  onRemove() {
+    var _a, _b;
+    (_b = (_a = this._container) == null ? void 0 : _a.parentNode) == null ? void 0 : _b.removeChild(this._container);
+    this._map = void 0;
+    this._container = void 0;
+    this._panel = void 0;
+    this._eventHandlers.clear();
+  }
+  /**
+   * Gets the current state of the control.
+   *
+   * @returns The current plugin state
+   */
+  getState() {
+    return { ...this._state };
+  }
+  /**
+   * Updates the control state.
+   *
+   * @param newState - Partial state to merge with current state
+   */
+  setState(newState) {
+    this._state = { ...this._state, ...newState };
+    this._emit("statechange");
+  }
+  /**
+   * Toggles the collapsed state of the control panel.
+   */
+  toggle() {
+    this._state.collapsed = !this._state.collapsed;
+    if (this._panel) {
+      if (this._state.collapsed) {
+        this._panel.classList.remove("expanded");
+        this._emit("collapse");
+      } else {
+        this._panel.classList.add("expanded");
+        this._emit("expand");
+      }
+    }
+    this._emit("statechange");
+  }
+  /**
+   * Expands the control panel.
+   */
+  expand() {
+    if (this._state.collapsed) {
+      this.toggle();
+    }
+  }
+  /**
+   * Collapses the control panel.
+   */
+  collapse() {
+    if (!this._state.collapsed) {
+      this.toggle();
+    }
+  }
+  /**
+   * Registers an event handler.
+   *
+   * @param event - The event type to listen for
+   * @param handler - The callback function
+   */
+  on(event, handler) {
+    if (!this._eventHandlers.has(event)) {
+      this._eventHandlers.set(event, /* @__PURE__ */ new Set());
+    }
+    this._eventHandlers.get(event).add(handler);
+  }
+  /**
+   * Removes an event handler.
+   *
+   * @param event - The event type
+   * @param handler - The callback function to remove
+   */
+  off(event, handler) {
+    var _a;
+    (_a = this._eventHandlers.get(event)) == null ? void 0 : _a.delete(handler);
+  }
+  /**
+   * Gets the map instance.
+   *
+   * @returns The MapLibre GL map instance or undefined if not added to a map
+   */
+  getMap() {
+    return this._map;
+  }
+  /**
+   * Gets the control container element.
+   *
+   * @returns The container element or undefined if not added to a map
+   */
+  getContainer() {
+    return this._container;
+  }
+  /**
+   * Emits an event to all registered handlers.
+   *
+   * @param event - The event type to emit
+   */
+  _emit(event) {
+    const handlers = this._eventHandlers.get(event);
+    if (handlers) {
+      const eventData = { type: event, state: this.getState() };
+      handlers.forEach((handler) => handler(eventData));
+    }
+  }
+  /**
+   * Creates the main container element for the control.
+   * Contains a toggle button (29x29) matching navigation control size.
+   *
+   * @returns The container element
+   */
+  _createContainer() {
+    const container = document.createElement("div");
+    container.className = `maplibregl-ctrl maplibregl-ctrl-group plugin-control${this._options.className ? ` ${this._options.className}` : ""}`;
+    const toggleBtn = document.createElement("button");
+    toggleBtn.className = "plugin-control-toggle";
+    toggleBtn.type = "button";
+    toggleBtn.setAttribute("aria-label", this._options.title);
+    toggleBtn.innerHTML = `
+      <span class="plugin-control-icon">
+        <svg viewBox="0 0 24 24" width="22" height="22" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <rect x="3" y="3" width="7" height="7" rx="1"/>
+          <rect x="14" y="3" width="7" height="7" rx="1"/>
+          <rect x="3" y="14" width="7" height="7" rx="1"/>
+          <rect x="14" y="14" width="7" height="7" rx="1"/>
+        </svg>
+      </span>
+    `;
+    toggleBtn.addEventListener("click", () => this.toggle());
+    container.appendChild(toggleBtn);
+    return container;
+  }
+  /**
+   * Creates the panel element with header and content areas.
+   * Panel is positioned as a dropdown below the toggle button.
+   *
+   * @returns The panel element
+   */
+  _createPanel() {
+    const panel = document.createElement("div");
+    panel.className = "plugin-control-panel";
+    panel.style.width = `${this._options.panelWidth}px`;
+    const header = document.createElement("div");
+    header.className = "plugin-control-header";
+    const title = document.createElement("span");
+    title.className = "plugin-control-title";
+    title.textContent = this._options.title;
+    const closeBtn = document.createElement("button");
+    closeBtn.className = "plugin-control-close";
+    closeBtn.type = "button";
+    closeBtn.setAttribute("aria-label", "Close panel");
+    closeBtn.innerHTML = "&times;";
+    closeBtn.addEventListener("click", () => this.collapse());
+    header.appendChild(title);
+    header.appendChild(closeBtn);
+    const content = document.createElement("div");
+    content.className = "plugin-control-content";
+    content.innerHTML = `
+      <p class="plugin-control-placeholder">
+        Add your custom plugin content here.
+      </p>
+    `;
+    panel.appendChild(header);
+    panel.appendChild(content);
+    return panel;
+  }
+}
+export {
+  PluginControl as P
+};
+//# sourceMappingURL=PluginControl-CwImH8Ra.js.map

package/dist/PluginControl-CwImH8Ra.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PluginControl-CwImH8Ra.js","sources":["../src/lib/core/PluginControl.ts"],"sourcesContent":["import type { IControl, Map as MapLibreMap } from 'maplibre-gl';\nimport type {\n  PluginControlOptions,\n  PluginState,\n  PluginControlEvent,\n  PluginControlEventHandler,\n} from './types';\n\n/**\n * Default options for the PluginControl\n */\nconst DEFAULT_OPTIONS: Required<PluginControlOptions> = {\n  collapsed: true,\n  position: 'top-right',\n  title: 'Plugin Control',\n  panelWidth: 300,\n  className: '',\n};\n\n/**\n * Event handlers map type\n */\ntype EventHandlersMap = globalThis.Map<PluginControlEvent, Set<PluginControlEventHandler>>;\n\n/**\n * A template MapLibre GL control that can be customized for various plugin needs.\n *\n * @example\n * ```typescript\n * const control = new PluginControl({\n *   title: 'My Custom Control',\n *   collapsed: false,\n *   panelWidth: 320,\n * });\n * map.addControl(control, 'top-right');\n * ```\n */\nexport class PluginControl implements IControl {\n  private _map?: MapLibreMap;\n  private _container?: HTMLElement;\n  private _panel?: HTMLElement;\n  private _options: Required<PluginControlOptions>;\n  private _state: PluginState;\n  private _eventHandlers: EventHandlersMap = new globalThis.Map();\n\n  /**\n   * Creates a new PluginControl instance.\n   *\n   * @param options - Configuration options for the control\n   */\n  constructor(options?: Partial<PluginControlOptions>) {\n    this._options = { ...DEFAULT_OPTIONS, ...options };\n    this._state = {\n      collapsed: this._options.collapsed,\n      panelWidth: this._options.panelWidth,\n      data: {},\n    };\n  }\n\n  /**\n   * Called when the control is added to the map.\n   * Implements the IControl interface.\n   *\n   * @param map - The MapLibre GL map instance\n   * @returns The control's container element\n   */\n  onAdd(map: MapLibreMap): HTMLElement {\n    this._map = map;\n    this._container = this._createContainer();\n    this._panel = this._createPanel();\n    this._container.appendChild(this._panel);\n\n    // Set initial panel state\n    if (!this._state.collapsed) {\n      this._panel.classList.add('expanded');\n    }\n\n    return this._container;\n  }\n\n  /**\n   * Called when the control is removed from the map.\n   * Implements the IControl interface.\n   */\n  onRemove(): void {\n    this._container?.parentNode?.removeChild(this._container);\n    this._map = undefined;\n    this._container = undefined;\n    this._panel = undefined;\n    this._eventHandlers.clear();\n  }\n\n  /**\n   * Gets the current state of the control.\n   *\n   * @returns The current plugin state\n   */\n  getState(): PluginState {\n    return { ...this._state };\n  }\n\n  /**\n   * Updates the control state.\n   *\n   * @param newState - Partial state to merge with current state\n   */\n  setState(newState: Partial<PluginState>): void {\n    this._state = { ...this._state, ...newState };\n    this._emit('statechange');\n  }\n\n  /**\n   * Toggles the collapsed state of the control panel.\n   */\n  toggle(): void {\n    this._state.collapsed = !this._state.collapsed;\n\n    if (this._panel) {\n      if (this._state.collapsed) {\n        this._panel.classList.remove('expanded');\n        this._emit('collapse');\n      } else {\n        this._panel.classList.add('expanded');\n        this._emit('expand');\n      }\n    }\n\n    this._emit('statechange');\n  }\n\n  /**\n   * Expands the control panel.\n   */\n  expand(): void {\n    if (this._state.collapsed) {\n      this.toggle();\n    }\n  }\n\n  /**\n   * Collapses the control panel.\n   */\n  collapse(): void {\n    if (!this._state.collapsed) {\n      this.toggle();\n    }\n  }\n\n  /**\n   * Registers an event handler.\n   *\n   * @param event - The event type to listen for\n   * @param handler - The callback function\n   */\n  on(event: PluginControlEvent, handler: PluginControlEventHandler): void {\n    if (!this._eventHandlers.has(event)) {\n      this._eventHandlers.set(event, new Set());\n    }\n    this._eventHandlers.get(event)!.add(handler);\n  }\n\n  /**\n   * Removes an event handler.\n   *\n   * @param event - The event type\n   * @param handler - The callback function to remove\n   */\n  off(event: PluginControlEvent, handler: PluginControlEventHandler): void {\n    this._eventHandlers.get(event)?.delete(handler);\n  }\n\n  /**\n   * Gets the map instance.\n   *\n   * @returns The MapLibre GL map instance or undefined if not added to a map\n   */\n  getMap(): MapLibreMap | undefined {\n    return this._map;\n  }\n\n  /**\n   * Gets the control container element.\n   *\n   * @returns The container element or undefined if not added to a map\n   */\n  getContainer(): HTMLElement | undefined {\n    return this._container;\n  }\n\n  /**\n   * Emits an event to all registered handlers.\n   *\n   * @param event - The event type to emit\n   */\n  private _emit(event: PluginControlEvent): void {\n    const handlers = this._eventHandlers.get(event);\n    if (handlers) {\n      const eventData = { type: event, state: this.getState() };\n      handlers.forEach((handler) => handler(eventData));\n    }\n  }\n\n  /**\n   * Creates the main container element for the control.\n   * Contains a toggle button (29x29) matching navigation control size.\n   *\n   * @returns The container element\n   */\n  private _createContainer(): HTMLElement {\n    const container = document.createElement('div');\n    container.className = `maplibregl-ctrl maplibregl-ctrl-group plugin-control${\n      this._options.className ? ` ${this._options.className}` : ''\n    }`;\n\n    // Create toggle button (29x29 to match navigation control)\n    const toggleBtn = document.createElement('button');\n    toggleBtn.className = 'plugin-control-toggle';\n    toggleBtn.type = 'button';\n    toggleBtn.setAttribute('aria-label', this._options.title);\n    toggleBtn.innerHTML = `\n      <span class=\"plugin-control-icon\">\n        <svg viewBox=\"0 0 24 24\" width=\"22\" height=\"22\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"/>\n          <rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"/>\n          <rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"/>\n          <rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"/>\n        </svg>\n      </span>\n    `;\n    toggleBtn.addEventListener('click', () => this.toggle());\n\n    container.appendChild(toggleBtn);\n\n    return container;\n  }\n\n  /**\n   * Creates the panel element with header and content areas.\n   * Panel is positioned as a dropdown below the toggle button.\n   *\n   * @returns The panel element\n   */\n  private _createPanel(): HTMLElement {\n    const panel = document.createElement('div');\n    panel.className = 'plugin-control-panel';\n    panel.style.width = `${this._options.panelWidth}px`;\n\n    // Create header with title and close button\n    const header = document.createElement('div');\n    header.className = 'plugin-control-header';\n\n    const title = document.createElement('span');\n    title.className = 'plugin-control-title';\n    title.textContent = this._options.title;\n\n    const closeBtn = document.createElement('button');\n    closeBtn.className = 'plugin-control-close';\n    closeBtn.type = 'button';\n    closeBtn.setAttribute('aria-label', 'Close panel');\n    closeBtn.innerHTML = '&times;';\n    closeBtn.addEventListener('click', () => this.collapse());\n\n    header.appendChild(title);\n    header.appendChild(closeBtn);\n\n    // Create content area\n    const content = document.createElement('div');\n    content.className = 'plugin-control-content';\n    content.innerHTML = `\n      <p class=\"plugin-control-placeholder\">\n        Add your custom plugin content here.\n      </p>\n    `;\n\n    panel.appendChild(header);\n    panel.appendChild(content);\n\n    return panel;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/index.cjs

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const PluginControl = require("./PluginControl-B4juDAny.cjs");
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function formatNumericValue(value, step) {
+  if (step === 0) return value.toString();
+  const decimals = Math.max(0, -Math.floor(Math.log10(step)));
+  return value.toFixed(decimals);
+}
+function generateId(prefix) {
+  const id = Math.random().toString(36).substring(2, 9);
+  return prefix ? `${prefix}-${id}` : id;
+}
+function debounce(fn, delay) {
+  let timeoutId = null;
+  return (...args) => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = setTimeout(() => {
+      fn(...args);
+      timeoutId = null;
+    }, delay);
+  };
+}
+function throttle(fn, limit) {
+  let inThrottle = false;
+  return (...args) => {
+    if (!inThrottle) {
+      fn(...args);
+      inThrottle = true;
+      setTimeout(() => {
+        inThrottle = false;
+      }, limit);
+    }
+  };
+}
+function classNames(classes) {
+  return Object.entries(classes).filter(([, value]) => value).map(([key]) => key).join(" ");
+}
+exports.PluginControl = PluginControl.PluginControl;
+exports.clamp = clamp;
+exports.classNames = classNames;
+exports.debounce = debounce;
+exports.formatNumericValue = formatNumericValue;
+exports.generateId = generateId;
+exports.throttle = throttle;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../src/lib/utils/helpers.ts"],"sourcesContent":["/**\n * Clamps a value between a minimum and maximum.\n *\n * @param value - The value to clamp\n * @param min - The minimum allowed value\n * @param max - The maximum allowed value\n * @returns The clamped value\n *\n * @example\n * ```typescript\n * clamp(5, 0, 10);  // returns 5\n * clamp(-5, 0, 10); // returns 0\n * clamp(15, 0, 10); // returns 10\n * ```\n */\nexport function clamp(value: number, min: number, max: number): number {\n  return Math.min(Math.max(value, min), max);\n}\n\n/**\n * Formats a numeric value with appropriate decimal places based on step size.\n *\n * @param value - The value to format\n * @param step - The step size to determine decimal places\n * @returns The formatted value as a string\n *\n * @example\n * ```typescript\n * formatNumericValue(5, 1);     // returns \"5\"\n * formatNumericValue(0.5, 0.1); // returns \"0.5\"\n * formatNumericValue(0.55, 0.01); // returns \"0.55\"\n * ```\n */\nexport function formatNumericValue(value: number, step: number): string {\n  if (step === 0) return value.toString();\n  const decimals = Math.max(0, -Math.floor(Math.log10(step)));\n  return value.toFixed(decimals);\n}\n\n/**\n * Generates a unique ID string.\n *\n * @param prefix - Optional prefix for the ID\n * @returns A unique ID string\n *\n * @example\n * ```typescript\n * generateId('control'); // returns \"control-abc123\"\n * generateId();          // returns \"abc123\"\n * ```\n */\nexport function generateId(prefix?: string): string {\n  const id = Math.random().toString(36).substring(2, 9);\n  return prefix ? `${prefix}-${id}` : id;\n}\n\n/**\n * Debounces a function call.\n *\n * @param fn - The function to debounce\n * @param delay - The delay in milliseconds\n * @returns A debounced version of the function\n *\n * @example\n * ```typescript\n * const debouncedUpdate = debounce(() => updateMap(), 100);\n * window.addEventListener('resize', debouncedUpdate);\n * ```\n */\nexport function debounce<T extends (...args: unknown[]) => void>(\n  fn: T,\n  delay: number\n): (...args: Parameters<T>) => void {\n  let timeoutId: ReturnType<typeof setTimeout> | null = null;\n\n  return (...args: Parameters<T>) => {\n    if (timeoutId) {\n      clearTimeout(timeoutId);\n    }\n    timeoutId = setTimeout(() => {\n      fn(...args);\n      timeoutId = null;\n    }, delay);\n  };\n}\n\n/**\n * Throttles a function call.\n *\n * @param fn - The function to throttle\n * @param limit - The minimum time between calls in milliseconds\n * @returns A throttled version of the function\n *\n * @example\n * ```typescript\n * const throttledScroll = throttle(() => handleScroll(), 100);\n * window.addEventListener('scroll', throttledScroll);\n * ```\n */\nexport function throttle<T extends (...args: unknown[]) => void>(\n  fn: T,\n  limit: number\n): (...args: Parameters<T>) => void {\n  let inThrottle = false;\n\n  return (...args: Parameters<T>) => {\n    if (!inThrottle) {\n      fn(...args);\n      inThrottle = true;\n      setTimeout(() => {\n        inThrottle = false;\n      }, limit);\n    }\n  };\n}\n\n/**\n * Creates a CSS class string from an object of class names.\n *\n * @param classes - Object with class names as keys and boolean values\n * @returns A space-separated string of class names\n *\n * @example\n * ```typescript\n * classNames({ active: true, disabled: false, visible: true });\n * // returns \"active visible\"\n * ```\n */\nexport function classNames(classes: Record<string, boolean>): string {\n  return Object.entries(classes)\n    .filter(([, value]) => value)\n    .map(([key]) => key)\n    .join(' ');\n}\n"],"names":[],"mappings":";;;AAeO,SAAS,MAAM,OAAe,KAAa,KAAqB;AACrE,SAAO,KAAK,IAAI,KAAK,IAAI,OAAO,GAAG,GAAG,GAAG;AAC3C;AAgBO,SAAS,mBAAmB,OAAe,MAAsB;AACtE,MAAI,SAAS,EAAG,QAAO,MAAM,SAAA;AAC7B,QAAM,WAAW,KAAK,IAAI,GAAG,CAAC,KAAK,MAAM,KAAK,MAAM,IAAI,CAAC,CAAC;AAC1D,SAAO,MAAM,QAAQ,QAAQ;AAC/B;AAcO,SAAS,WAAW,QAAyB;AAClD,QAAM,KAAK,KAAK,SAAS,SAAS,EAAE,EAAE,UAAU,GAAG,CAAC;AACpD,SAAO,SAAS,GAAG,MAAM,IAAI,EAAE,KAAK;AACtC;AAeO,SAAS,SACd,IACA,OACkC;AAClC,MAAI,YAAkD;AAEtD,SAAO,IAAI,SAAwB;AACjC,QAAI,WAAW;AACb,mBAAa,SAAS;AAAA,IACxB;AACA,gBAAY,WAAW,MAAM;AAC3B,SAAG,GAAG,IAAI;AACV,kBAAY;AAAA,IACd,GAAG,KAAK;AAAA,EACV;AACF;AAeO,SAAS,SACd,IACA,OACkC;AAClC,MAAI,aAAa;AAEjB,SAAO,IAAI,SAAwB;AACjC,QAAI,CAAC,YAAY;AACf,SAAG,GAAG,IAAI;AACV,mBAAa;AACb,iBAAW,MAAM;AACf,qBAAa;AAAA,MACf,GAAG,KAAK;AAAA,IACV;AAAA,EACF;AACF;AAcO,SAAS,WAAW,SAA0C;AACnE,SAAO,OAAO,QAAQ,OAAO,EAC1B,OAAO,CAAC,CAAA,EAAG,KAAK,MAAM,KAAK,EAC3B,IAAI,CAAC,CAAC,GAAG,MAAM,GAAG,EAClB,KAAK,GAAG;AACb;;;;;;;;"}

package/dist/index.mjs

@@ -0,0 +1,50 @@
+import { P } from "./PluginControl-CwImH8Ra.js";
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function formatNumericValue(value, step) {
+  if (step === 0) return value.toString();
+  const decimals = Math.max(0, -Math.floor(Math.log10(step)));
+  return value.toFixed(decimals);
+}
+function generateId(prefix) {
+  const id = Math.random().toString(36).substring(2, 9);
+  return prefix ? `${prefix}-${id}` : id;
+}
+function debounce(fn, delay) {
+  let timeoutId = null;
+  return (...args) => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = setTimeout(() => {
+      fn(...args);
+      timeoutId = null;
+    }, delay);
+  };
+}
+function throttle(fn, limit) {
+  let inThrottle = false;
+  return (...args) => {
+    if (!inThrottle) {
+      fn(...args);
+      inThrottle = true;
+      setTimeout(() => {
+        inThrottle = false;
+      }, limit);
+    }
+  };
+}
+function classNames(classes) {
+  return Object.entries(classes).filter(([, value]) => value).map(([key]) => key).join(" ");
+}
+export {
+  P as PluginControl,
+  clamp,
+  classNames,
+  debounce,
+  formatNumericValue,
+  generateId,
+  throttle
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../src/lib/utils/helpers.ts"],"sourcesContent":["/**\n * Clamps a value between a minimum and maximum.\n *\n * @param value - The value to clamp\n * @param min - The minimum allowed value\n * @param max - The maximum allowed value\n * @returns The clamped value\n *\n * @example\n * ```typescript\n * clamp(5, 0, 10);  // returns 5\n * clamp(-5, 0, 10); // returns 0\n * clamp(15, 0, 10); // returns 10\n * ```\n */\nexport function clamp(value: number, min: number, max: number): number {\n  return Math.min(Math.max(value, min), max);\n}\n\n/**\n * Formats a numeric value with appropriate decimal places based on step size.\n *\n * @param value - The value to format\n * @param step - The step size to determine decimal places\n * @returns The formatted value as a string\n *\n * @example\n * ```typescript\n * formatNumericValue(5, 1);     // returns \"5\"\n * formatNumericValue(0.5, 0.1); // returns \"0.5\"\n * formatNumericValue(0.55, 0.01); // returns \"0.55\"\n * ```\n */\nexport function formatNumericValue(value: number, step: number): string {\n  if (step === 0) return value.toString();\n  const decimals = Math.max(0, -Math.floor(Math.log10(step)));\n  return value.toFixed(decimals);\n}\n\n/**\n * Generates a unique ID string.\n *\n * @param prefix - Optional prefix for the ID\n * @returns A unique ID string\n *\n * @example\n * ```typescript\n * generateId('control'); // returns \"control-abc123\"\n * generateId();          // returns \"abc123\"\n * ```\n */\nexport function generateId(prefix?: string): string {\n  const id = Math.random().toString(36).substring(2, 9);\n  return prefix ? `${prefix}-${id}` : id;\n}\n\n/**\n * Debounces a function call.\n *\n * @param fn - The function to debounce\n * @param delay - The delay in milliseconds\n * @returns A debounced version of the function\n *\n * @example\n * ```typescript\n * const debouncedUpdate = debounce(() => updateMap(), 100);\n * window.addEventListener('resize', debouncedUpdate);\n * ```\n */\nexport function debounce<T extends (...args: unknown[]) => void>(\n  fn: T,\n  delay: number\n): (...args: Parameters<T>) => void {\n  let timeoutId: ReturnType<typeof setTimeout> | null = null;\n\n  return (...args: Parameters<T>) => {\n    if (timeoutId) {\n      clearTimeout(timeoutId);\n    }\n    timeoutId = setTimeout(() => {\n      fn(...args);\n      timeoutId = null;\n    }, delay);\n  };\n}\n\n/**\n * Throttles a function call.\n *\n * @param fn - The function to throttle\n * @param limit - The minimum time between calls in milliseconds\n * @returns A throttled version of the function\n *\n * @example\n * ```typescript\n * const throttledScroll = throttle(() => handleScroll(), 100);\n * window.addEventListener('scroll', throttledScroll);\n * ```\n */\nexport function throttle<T extends (...args: unknown[]) => void>(\n  fn: T,\n  limit: number\n): (...args: Parameters<T>) => void {\n  let inThrottle = false;\n\n  return (...args: Parameters<T>) => {\n    if (!inThrottle) {\n      fn(...args);\n      inThrottle = true;\n      setTimeout(() => {\n        inThrottle = false;\n      }, limit);\n    }\n  };\n}\n\n/**\n * Creates a CSS class string from an object of class names.\n *\n * @param classes - Object with class names as keys and boolean values\n * @returns A space-separated string of class names\n *\n * @example\n * ```typescript\n * classNames({ active: true, disabled: false, visible: true });\n * // returns \"active visible\"\n * ```\n */\nexport function classNames(classes: Record<string, boolean>): string {\n  return Object.entries(classes)\n    .filter(([, value]) => value)\n    .map(([key]) => key)\n    .join(' ');\n}\n"],"names":[],"mappings":";AAeO,SAAS,MAAM,OAAe,KAAa,KAAqB;AACrE,SAAO,KAAK,IAAI,KAAK,IAAI,OAAO,GAAG,GAAG,GAAG;AAC3C;AAgBO,SAAS,mBAAmB,OAAe,MAAsB;AACtE,MAAI,SAAS,EAAG,QAAO,MAAM,SAAA;AAC7B,QAAM,WAAW,KAAK,IAAI,GAAG,CAAC,KAAK,MAAM,KAAK,MAAM,IAAI,CAAC,CAAC;AAC1D,SAAO,MAAM,QAAQ,QAAQ;AAC/B;AAcO,SAAS,WAAW,QAAyB;AAClD,QAAM,KAAK,KAAK,SAAS,SAAS,EAAE,EAAE,UAAU,GAAG,CAAC;AACpD,SAAO,SAAS,GAAG,MAAM,IAAI,EAAE,KAAK;AACtC;AAeO,SAAS,SACd,IACA,OACkC;AAClC,MAAI,YAAkD;AAEtD,SAAO,IAAI,SAAwB;AACjC,QAAI,WAAW;AACb,mBAAa,SAAS;AAAA,IACxB;AACA,gBAAY,WAAW,MAAM;AAC3B,SAAG,GAAG,IAAI;AACV,kBAAY;AAAA,IACd,GAAG,KAAK;AAAA,EACV;AACF;AAeO,SAAS,SACd,IACA,OACkC;AAClC,MAAI,aAAa;AAEjB,SAAO,IAAI,SAAwB;AACjC,QAAI,CAAC,YAAY;AACf,SAAG,GAAG,IAAI;AACV,mBAAa;AACb,iBAAW,MAAM;AACf,qBAAa;AAAA,MACf,GAAG,KAAK;AAAA,IACV;AAAA,EACF;AACF;AAcO,SAAS,WAAW,SAA0C;AACnE,SAAO,OAAO,QAAQ,OAAO,EAC1B,OAAO,CAAC,CAAA,EAAG,KAAK,MAAM,KAAK,EAC3B,IAAI,CAAC,CAAC,GAAG,MAAM,GAAG,EAClB,KAAK,GAAG;AACb;"}

package/dist/maplibre-gl-plugin-template.css

@@ -0,0 +1,234 @@
+/**
+ * MapLibre GL Plugin Control Styles
+ *
+ * This stylesheet provides the base styles for the plugin control.
+ * Customize these styles to match your plugin's design.
+ */
+
+/* Container - matches maplibregl-ctrl styling */
+.plugin-control {
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+/* Toggle button - 29x29 to match navigation control */
+.plugin-control-toggle {
+  background: none;
+  border: none;
+  padding: 0;
+  width: 29px;
+  height: 29px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  outline: none;
+  color: #1f2a37;
+}
+
+.plugin-control-toggle:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.plugin-control-toggle .plugin-control-icon {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+
+.plugin-control-toggle .plugin-control-icon svg {
+  width: 22px;
+  height: 22px;
+  display: block;
+  stroke: currentColor;
+  fill: none;
+}
+
+/* Panel - dropdown below button */
+.plugin-control-panel {
+  position: absolute;
+  top: 100%;
+  margin-top: 5px;
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
+  min-width: 240px;
+  max-width: 420px;
+  max-height: 500px;
+  overflow-y: auto;
+  z-index: 1000;
+  padding: 8px;
+  font-size: 12px;
+  line-height: 1.4;
+  display: none;
+}
+
+/* Panel positioning based on parent control position */
+.maplibregl-ctrl-top-left .plugin-control-panel,
+.maplibregl-ctrl-bottom-left .plugin-control-panel {
+  left: 0;
+}
+
+.maplibregl-ctrl-top-right .plugin-control-panel,
+.maplibregl-ctrl-bottom-right .plugin-control-panel {
+  right: 0;
+}
+
+.plugin-control-panel.expanded {
+  display: block;
+}
+
+/* Panel header */
+.plugin-control-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  font-weight: 600;
+  color: #333;
+  padding: 4px 0 8px 0;
+  border-bottom: 1px solid #e0e0e0;
+  margin-bottom: 8px;
+}
+
+.plugin-control-title {
+  flex: 1 1 auto;
+  font-size: 13px;
+}
+
+.plugin-control-close {
+  width: 20px;
+  height: 20px;
+  border: none;
+  background: transparent;
+  color: #999;
+  font-size: 18px;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0;
+  transition: color 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.plugin-control-close:hover {
+  color: #333;
+}
+
+/* Content */
+.plugin-control-content {
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.plugin-control-placeholder {
+  margin: 0;
+  color: #888;
+  font-size: 12px;
+  text-align: center;
+  padding: 16px 0;
+}
+
+/* Scrollbar styling */
+.plugin-control-content::-webkit-scrollbar {
+  width: 6px;
+}
+
+.plugin-control-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.plugin-control-content::-webkit-scrollbar-thumb {
+  background: #ccc;
+  border-radius: 3px;
+}
+
+.plugin-control-content::-webkit-scrollbar-thumb:hover {
+  background: #aaa;
+}
+
+/* Form elements */
+.plugin-control-group {
+  margin-bottom: 12px;
+}
+
+.plugin-control-group:last-child {
+  margin-bottom: 0;
+}
+
+.plugin-control-label {
+  display: block;
+  margin-bottom: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #555;
+}
+
+.plugin-control-input {
+  width: 100%;
+  padding: 8px 10px;
+  font-size: 14px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  outline: none;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.plugin-control-input:focus {
+  border-color: #4a90d9;
+  box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.15);
+}
+
+.plugin-control-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 16px;
+  font-size: 14px;
+  font-weight: 500;
+  color: white;
+  background: #4a90d9;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.15s;
+}
+
+.plugin-control-button:hover {
+  background: #3a7bc8;
+}
+
+.plugin-control-button:focus {
+  outline: 2px solid #4a90d9;
+  outline-offset: 2px;
+}
+
+.plugin-control-button:disabled {
+  background: #ccc;
+  cursor: not-allowed;
+}
+
+/* Utility classes */
+.plugin-control-flex {
+  display: flex;
+  gap: 8px;
+}
+
+.plugin-control-flex-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.plugin-control-divider {
+  height: 1px;
+  background: #e0e0e0;
+  margin: 12px 0;
+}

package/dist/react.cjs

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const PluginControl = require("./PluginControl-B4juDAny.cjs");
+function PluginControlReact({
+  map,
+  onStateChange,
+  ...options
+}) {
+  const controlRef = react.useRef(null);
+  react.useEffect(() => {
+    if (!map) return;
+    const control = new PluginControl.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]);
+  react.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] = react.useState({
+    ...DEFAULT_STATE,
+    ...initialState
+  });
+  const setCollapsed = react.useCallback((collapsed) => {
+    setState((prev) => ({ ...prev, collapsed }));
+  }, []);
+  const setPanelWidth = react.useCallback((panelWidth) => {
+    setState((prev) => ({ ...prev, panelWidth }));
+  }, []);
+  const setData = react.useCallback((data) => {
+    setState((prev) => ({ ...prev, data: { ...prev.data, ...data } }));
+  }, []);
+  const reset = react.useCallback(() => {
+    setState({ ...DEFAULT_STATE, ...initialState });
+  }, [initialState]);
+  const toggle = react.useCallback(() => {
+    setState((prev) => ({ ...prev, collapsed: !prev.collapsed }));
+  }, []);
+  return {
+    state,
+    setState,
+    setCollapsed,
+    setPanelWidth,
+    setData,
+    reset,
+    toggle
+  };
+}
+exports.PluginControlReact = PluginControlReact;
+exports.usePluginState = usePluginState;
+//# sourceMappingURL=react.cjs.map