dom-relocator 0.1.0

package/README.md

@@ -0,0 +1,151 @@
+# DOMRelocator
+
+A small, dependency-free TypeScript library that moves existing DOM elements between containers when media queries match and restores them to their exact original position when they no longer match.
+
+Created by **Dmytro Frolov**.
+
+## Why DOMRelocator?
+
+Responsive interfaces sometimes need the same interactive element in a different part of the document—not merely styled differently. Duplicating markup can introduce duplicate IDs, stale state, and accessibility problems. DOMRelocator moves the original node, preserving its state and event listeners.
+
+## Features
+
+- Uses `matchMedia`; no resize polling
+- Restores the exact original DOM position
+- Supports `first`, `last`, and zero-based numeric positions
+- Optional dynamic DOM observation
+- Manual `refresh()` and complete `destroy()` lifecycle
+- Scoped roots and typed callbacks
+- Zero runtime dependencies
+
+## Installation
+
+Using pnpm:
+
+```bash
+pnpm add dom-relocator
+```
+
+Using npm:
+
+```bash
+npm install dom-relocator
+```
+
+## Quick start
+
+```html
+<div id="mobile-actions"></div>
+
+<div data-relocate-to="#mobile-actions" data-relocate-query="(max-width: 48rem)" data-relocate-position="last">
+  <button type="button">Save changes</button>
+</div>
+```
+
+```ts
+import DOMRelocator from "dom-relocator";
+
+const relocator = new DOMRelocator();
+
+// Restore every element and remove all listeners.
+relocator.destroy();
+```
+
+Instances discover elements immediately when constructed.
+
+## Data attributes
+
+| Attribute                | Required | Default              | Description                                                 |
+| ------------------------ | -------- | -------------------- | ----------------------------------------------------------- |
+| `data-relocate-to`       | Yes      | —                    | CSS selector for the destination inside the configured root |
+| `data-relocate-query`    | No       | `(max-width: 767px)` | Any valid media query                                       |
+| `data-relocate-position` | No       | `last`               | `first`, `last`, or a zero-based integer                    |
+
+### Position examples
+
+```html
+<!-- Insert before all existing destination children. -->
+<div data-relocate-to="#target" data-relocate-position="first"></div>
+
+<!-- Append after all existing destination children. -->
+<div data-relocate-to="#target" data-relocate-position="last"></div>
+
+<!-- Insert at zero-based index 1. -->
+<div data-relocate-to="#target" data-relocate-position="1"></div>
+```
+
+Numeric positions greater than the number of destination children append the element.
+
+## Options
+
+```ts
+const relocator = new DOMRelocator({
+  root: document,
+  observe: false,
+  onChange: change => {
+    console.log(change.action, change.element, change.target);
+  },
+  onError: error => {
+    console.error(error.message, error.element);
+  },
+});
+```
+
+| Option     | Default        | Description                                          |
+| ---------- | -------------- | ---------------------------------------------------- |
+| `root`     | `document`     | Scope used to find managed elements and destinations |
+| `observe`  | `false`        | Refresh automatically after relevant DOM mutations   |
+| `onChange` | —              | Called after an element moves or restores            |
+| `onError`  | `console.warn` | Receives configuration and runtime errors            |
+
+## API
+
+### `size`
+
+The number of elements currently managed by the instance.
+
+```ts
+console.log(relocator.size);
+```
+
+### `refresh()`
+
+Discovers added elements, removes stale records, and applies changed data attributes. Call it after dynamic DOM updates when `observe` is disabled.
+
+```ts
+relocator.refresh();
+```
+
+### `destroy()`
+
+Restores all managed elements and removes media-query and mutation listeners. A destroyed instance cannot be restarted; create a new instance if needed.
+
+```ts
+relocator.destroy();
+```
+
+## Dynamic DOM
+
+Observation is opt-in so the default runtime cost stays minimal:
+
+```ts
+const relocator = new DOMRelocator({ observe: true });
+```
+
+For controlled applications, keep observation disabled and call `refresh()` after rendering new markup.
+
+## Development
+
+```bash
+pnpm install
+pnpm dev        # Open the interactive demo
+pnpm typecheck  # Check TypeScript
+pnpm test       # Run the test suite
+pnpm build      # Build ESM, CommonJS, and declarations
+```
+
+The interactive demo includes a draggable viewport resizer and examples for different media queries and insertion positions.
+
+## Browser support
+
+DOMRelocator targets modern browsers with `matchMedia`, `Map`, and standard DOM event APIs.

package/dist/DOMRelocator.d.ts

@@ -0,0 +1,61 @@
+/**
+ * Moves elements to responsive destinations and restores their exact original
+ * position when the media query stops matching.
+ *
+ * @example
+ * <div
+ *   data-relocate-to="#mobile-actions"
+ *   data-relocate-query="(max-width: 48rem)"
+ *   data-relocate-position="last"
+ * >...</div>
+ *
+ * const relocator = new DOMRelocator();
+ * relocator.destroy();
+ */
+export type DOMRelocatorPosition = "first" | "last" | number;
+export interface DOMRelocatorChange {
+    action: "move" | "restore";
+    element: HTMLElement;
+    target: Element | null;
+}
+export interface DOMRelocatorOptions {
+    /** Scope used to find managed elements and destinations. */
+    root?: ParentNode;
+    /** Automatically refresh after DOM changes. Disabled by default. */
+    observe?: boolean;
+    onChange?: (change: DOMRelocatorChange) => void;
+    onError?: (error: DOMRelocatorError) => void;
+}
+export declare class DOMRelocatorError extends Error {
+    readonly element: HTMLElement;
+    constructor(message: string, element: HTMLElement);
+}
+export default class DOMRelocator {
+    readonly root: ParentNode;
+    private readonly observe;
+    private readonly onChange?;
+    private readonly onError?;
+    private readonly records;
+    private observer;
+    private refreshPending;
+    private destroyed;
+    constructor(options?: DOMRelocatorOptions);
+    /** Number of elements currently managed by this instance. */
+    get size(): number;
+    /** Finds new elements and applies changed configurations. */
+    refresh(): void;
+    /** Restores all elements and removes every listener. */
+    destroy(): void;
+    private findElements;
+    private readConfig;
+    private parsePosition;
+    private register;
+    private unregister;
+    private apply;
+    private insert;
+    private restore;
+    private reportOnce;
+    private fail;
+    private queueRefresh;
+}
+//# sourceMappingURL=DOMRelocator.d.ts.map

package/dist/DOMRelocator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DOMRelocator.d.ts","sourceRoot":"","sources":["../src/DOMRelocator.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AAE7D,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,OAAO,GAAG,IAAI,CAAC;CACxB;AAED,MAAM,WAAW,mBAAmB;IAClC,4DAA4D;IAC5D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAChD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAC9C;AAED,qBAAa,iBAAkB,SAAQ,KAAK;IAC1C,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC;IAE9B,YAAY,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,EAIhD;CACF;AA8BD,MAAM,CAAC,OAAO,OAAO,YAAY;IAC/B,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAC;IAE1B,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAU;IAClC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAkC;IAC5D,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAiC;IAC1D,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA0C;IAClE,OAAO,CAAC,QAAQ,CAAiC;IACjD,OAAO,CAAC,cAAc,CAAS;IAC/B,OAAO,CAAC,SAAS,CAAS;IAE1B,YAAY,OAAO,GAAE,mBAAwB,EAqB5C;IAED,6DAA6D;IAC7D,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED,6DAA6D;IAC7D,OAAO,IAAI,IAAI,CA0Bd;IAED,wDAAwD;IACxD,OAAO,IAAI,IAAI,CAUd;IAED,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,UAAU;IA0BlB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,QAAQ;IA4BhB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,KAAK;IAoCb,OAAO,CAAC,MAAM;IAQd,OAAO,CAAC,OAAO;IAkBf,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,IAAI;IAOZ,OAAO,CAAC,YAAY;CASrB"}

package/dist/index.cjs

@@ -0,0 +1,244 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  DOMRelocatorError: () => DOMRelocatorError,
+  default: () => DOMRelocator
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/DOMRelocator.ts
+var DOMRelocatorError = class extends Error {
+  element;
+  constructor(message, element) {
+    super(message);
+    this.name = "DOMRelocatorError";
+    this.element = element;
+  }
+};
+var ATTR = {
+  target: "data-relocate-to",
+  query: "data-relocate-query",
+  position: "data-relocate-position"
+};
+var SELECTOR = `[${ATTR.target}]`;
+var DEFAULT_QUERY = "(max-width: 767px)";
+var DEFAULT_POSITION = "last";
+var DOMRelocator = class {
+  root;
+  observe;
+  onChange;
+  onError;
+  records = /* @__PURE__ */ new Map();
+  observer = null;
+  refreshPending = false;
+  destroyed = false;
+  constructor(options = {}) {
+    if (!options.root && typeof document === "undefined") {
+      throw new Error("DOMRelocator requires a browser DOM or an explicit root.");
+    }
+    this.root = options.root ?? document;
+    this.observe = options.observe ?? false;
+    this.onChange = options.onChange;
+    this.onError = options.onError;
+    this.refresh();
+    if (this.observe && typeof MutationObserver !== "undefined") {
+      this.observer = new MutationObserver(() => this.queueRefresh());
+      this.observer.observe(this.root, {
+        attributes: true,
+        attributeFilter: Object.values(ATTR),
+        childList: true,
+        subtree: true
+      });
+    }
+  }
+  /** Number of elements currently managed by this instance. */
+  get size() {
+    return this.records.size;
+  }
+  /** Finds new elements and applies changed configurations. */
+  refresh() {
+    if (this.destroyed) return;
+    const elements = new Set(this.findElements());
+    for (const [element, record] of this.records) {
+      if (!elements.has(element)) this.unregister(record, element.isConnected);
+    }
+    for (const element of elements) {
+      const config = this.readConfig(element);
+      const current = this.records.get(element);
+      if (!config) {
+        if (current) this.unregister(current, true);
+        continue;
+      }
+      if (current?.signature === config.signature) {
+        this.apply(current);
+        continue;
+      }
+      if (current) this.unregister(current, true);
+      this.register(element, config);
+    }
+  }
+  /** Restores all elements and removes every listener. */
+  destroy() {
+    if (this.destroyed) return;
+    this.destroyed = true;
+    this.observer?.disconnect();
+    this.observer = null;
+    for (const record of [...this.records.values()]) {
+      this.unregister(record, true);
+    }
+  }
+  findElements() {
+    const elements = Array.from(this.root.querySelectorAll(SELECTOR));
+    if ("matches" in this.root && typeof this.root.matches === "function" && this.root.matches(SELECTOR)) {
+      elements.unshift(this.root);
+    }
+    return elements;
+  }
+  readConfig(element) {
+    const target = element.getAttribute(ATTR.target)?.trim();
+    if (!target) return this.fail(`${ATTR.target} must contain a CSS selector.`, element);
+    const query = element.getAttribute(ATTR.query)?.trim() || DEFAULT_QUERY;
+    const rawPosition = element.getAttribute(ATTR.position)?.trim() || DEFAULT_POSITION;
+    const position = this.parsePosition(rawPosition);
+    if (position === null) {
+      return this.fail(`${ATTR.position} must be "first", "last", or a non-negative integer.`, element);
+    }
+    try {
+      window.matchMedia(query);
+    } catch {
+      return this.fail(`Invalid media query: "${query}".`, element);
+    }
+    return {
+      target,
+      query,
+      position,
+      signature: `${target}\0${query}\0${position}`
+    };
+  }
+  parsePosition(value) {
+    if (value === "first" || value === "last") return value;
+    return /^\d+$/.test(value) ? Number(value) : null;
+  }
+  register(element, config) {
+    const parent = element.parentNode;
+    if (!parent) {
+      this.fail("A managed element must have a parent node.", element);
+      return;
+    }
+    const marker = element.ownerDocument.createComment("dom-relocator");
+    parent.insertBefore(marker, element);
+    const mediaQuery = window.matchMedia(config.query);
+    const record = {
+      ...config,
+      element,
+      marker,
+      originalParent: parent,
+      originalNextSibling: element.nextSibling,
+      mediaQuery,
+      listener: () => this.apply(record),
+      moved: false,
+      lastError: null
+    };
+    this.records.set(element, record);
+    mediaQuery.addEventListener("change", record.listener);
+    this.apply(record);
+  }
+  unregister(record, restore) {
+    record.mediaQuery.removeEventListener("change", record.listener);
+    this.records.delete(record.element);
+    if (restore) this.restore(record);
+    record.marker.remove();
+  }
+  apply(record) {
+    if (!record.mediaQuery.matches) {
+      if (record.moved) this.restore(record);
+      return;
+    }
+    let target;
+    try {
+      target = this.root.querySelector(record.target);
+    } catch {
+      this.reportOnce(record, `Invalid target selector: "${record.target}".`);
+      return;
+    }
+    if (!target) {
+      this.reportOnce(record, `Target not found: "${record.target}".`);
+      return;
+    }
+    if (target === record.element || record.element.contains(target)) {
+      this.reportOnce(record, "The destination cannot be the element or one of its descendants.");
+      return;
+    }
+    record.lastError = null;
+    if (!record.moved || record.element.parentElement !== target) {
+      this.insert(record.element, target, record.position);
+    }
+    if (!record.moved) {
+      record.moved = true;
+      this.onChange?.({ action: "move", element: record.element, target });
+    }
+  }
+  insert(element, target, position) {
+    if (position === "first") return target.prepend(element);
+    if (position === "last") return target.append(element);
+    const children = Array.from(target.children).filter((child) => child !== element);
+    target.insertBefore(element, children[position] ?? null);
+  }
+  restore(record) {
+    const { element, marker, originalParent, originalNextSibling } = record;
+    if (marker.parentNode) {
+      marker.parentNode.insertBefore(element, marker.nextSibling);
+    } else if (originalParent.isConnected) {
+      const reference = originalNextSibling?.parentNode === originalParent ? originalNextSibling : null;
+      originalParent.insertBefore(element, reference);
+    } else {
+      return;
+    }
+    if (record.moved) {
+      record.moved = false;
+      this.onChange?.({ action: "restore", element, target: null });
+    }
+  }
+  reportOnce(record, message) {
+    if (record.lastError === message) return;
+    record.lastError = message;
+    this.fail(message, record.element);
+  }
+  fail(message, element) {
+    const error = new DOMRelocatorError(message, element);
+    if (this.onError) this.onError(error);
+    else console.warn(error);
+    return null;
+  }
+  queueRefresh() {
+    if (this.refreshPending || this.destroyed) return;
+    this.refreshPending = true;
+    queueMicrotask(() => {
+      this.refreshPending = false;
+      this.refresh();
+    });
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DOMRelocatorError
+});

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default, DOMRelocatorError } from "./DOMRelocator";
+export type { DOMRelocatorChange, DOMRelocatorOptions, DOMRelocatorPosition } from "./DOMRelocator";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAC5D,YAAY,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/index.js

@@ -0,0 +1,217 @@
+// src/DOMRelocator.ts
+var DOMRelocatorError = class extends Error {
+  element;
+  constructor(message, element) {
+    super(message);
+    this.name = "DOMRelocatorError";
+    this.element = element;
+  }
+};
+var ATTR = {
+  target: "data-relocate-to",
+  query: "data-relocate-query",
+  position: "data-relocate-position"
+};
+var SELECTOR = `[${ATTR.target}]`;
+var DEFAULT_QUERY = "(max-width: 767px)";
+var DEFAULT_POSITION = "last";
+var DOMRelocator = class {
+  root;
+  observe;
+  onChange;
+  onError;
+  records = /* @__PURE__ */ new Map();
+  observer = null;
+  refreshPending = false;
+  destroyed = false;
+  constructor(options = {}) {
+    if (!options.root && typeof document === "undefined") {
+      throw new Error("DOMRelocator requires a browser DOM or an explicit root.");
+    }
+    this.root = options.root ?? document;
+    this.observe = options.observe ?? false;
+    this.onChange = options.onChange;
+    this.onError = options.onError;
+    this.refresh();
+    if (this.observe && typeof MutationObserver !== "undefined") {
+      this.observer = new MutationObserver(() => this.queueRefresh());
+      this.observer.observe(this.root, {
+        attributes: true,
+        attributeFilter: Object.values(ATTR),
+        childList: true,
+        subtree: true
+      });
+    }
+  }
+  /** Number of elements currently managed by this instance. */
+  get size() {
+    return this.records.size;
+  }
+  /** Finds new elements and applies changed configurations. */
+  refresh() {
+    if (this.destroyed) return;
+    const elements = new Set(this.findElements());
+    for (const [element, record] of this.records) {
+      if (!elements.has(element)) this.unregister(record, element.isConnected);
+    }
+    for (const element of elements) {
+      const config = this.readConfig(element);
+      const current = this.records.get(element);
+      if (!config) {
+        if (current) this.unregister(current, true);
+        continue;
+      }
+      if (current?.signature === config.signature) {
+        this.apply(current);
+        continue;
+      }
+      if (current) this.unregister(current, true);
+      this.register(element, config);
+    }
+  }
+  /** Restores all elements and removes every listener. */
+  destroy() {
+    if (this.destroyed) return;
+    this.destroyed = true;
+    this.observer?.disconnect();
+    this.observer = null;
+    for (const record of [...this.records.values()]) {
+      this.unregister(record, true);
+    }
+  }
+  findElements() {
+    const elements = Array.from(this.root.querySelectorAll(SELECTOR));
+    if ("matches" in this.root && typeof this.root.matches === "function" && this.root.matches(SELECTOR)) {
+      elements.unshift(this.root);
+    }
+    return elements;
+  }
+  readConfig(element) {
+    const target = element.getAttribute(ATTR.target)?.trim();
+    if (!target) return this.fail(`${ATTR.target} must contain a CSS selector.`, element);
+    const query = element.getAttribute(ATTR.query)?.trim() || DEFAULT_QUERY;
+    const rawPosition = element.getAttribute(ATTR.position)?.trim() || DEFAULT_POSITION;
+    const position = this.parsePosition(rawPosition);
+    if (position === null) {
+      return this.fail(`${ATTR.position} must be "first", "last", or a non-negative integer.`, element);
+    }
+    try {
+      window.matchMedia(query);
+    } catch {
+      return this.fail(`Invalid media query: "${query}".`, element);
+    }
+    return {
+      target,
+      query,
+      position,
+      signature: `${target}\0${query}\0${position}`
+    };
+  }
+  parsePosition(value) {
+    if (value === "first" || value === "last") return value;
+    return /^\d+$/.test(value) ? Number(value) : null;
+  }
+  register(element, config) {
+    const parent = element.parentNode;
+    if (!parent) {
+      this.fail("A managed element must have a parent node.", element);
+      return;
+    }
+    const marker = element.ownerDocument.createComment("dom-relocator");
+    parent.insertBefore(marker, element);
+    const mediaQuery = window.matchMedia(config.query);
+    const record = {
+      ...config,
+      element,
+      marker,
+      originalParent: parent,
+      originalNextSibling: element.nextSibling,
+      mediaQuery,
+      listener: () => this.apply(record),
+      moved: false,
+      lastError: null
+    };
+    this.records.set(element, record);
+    mediaQuery.addEventListener("change", record.listener);
+    this.apply(record);
+  }
+  unregister(record, restore) {
+    record.mediaQuery.removeEventListener("change", record.listener);
+    this.records.delete(record.element);
+    if (restore) this.restore(record);
+    record.marker.remove();
+  }
+  apply(record) {
+    if (!record.mediaQuery.matches) {
+      if (record.moved) this.restore(record);
+      return;
+    }
+    let target;
+    try {
+      target = this.root.querySelector(record.target);
+    } catch {
+      this.reportOnce(record, `Invalid target selector: "${record.target}".`);
+      return;
+    }
+    if (!target) {
+      this.reportOnce(record, `Target not found: "${record.target}".`);
+      return;
+    }
+    if (target === record.element || record.element.contains(target)) {
+      this.reportOnce(record, "The destination cannot be the element or one of its descendants.");
+      return;
+    }
+    record.lastError = null;
+    if (!record.moved || record.element.parentElement !== target) {
+      this.insert(record.element, target, record.position);
+    }
+    if (!record.moved) {
+      record.moved = true;
+      this.onChange?.({ action: "move", element: record.element, target });
+    }
+  }
+  insert(element, target, position) {
+    if (position === "first") return target.prepend(element);
+    if (position === "last") return target.append(element);
+    const children = Array.from(target.children).filter((child) => child !== element);
+    target.insertBefore(element, children[position] ?? null);
+  }
+  restore(record) {
+    const { element, marker, originalParent, originalNextSibling } = record;
+    if (marker.parentNode) {
+      marker.parentNode.insertBefore(element, marker.nextSibling);
+    } else if (originalParent.isConnected) {
+      const reference = originalNextSibling?.parentNode === originalParent ? originalNextSibling : null;
+      originalParent.insertBefore(element, reference);
+    } else {
+      return;
+    }
+    if (record.moved) {
+      record.moved = false;
+      this.onChange?.({ action: "restore", element, target: null });
+    }
+  }
+  reportOnce(record, message) {
+    if (record.lastError === message) return;
+    record.lastError = message;
+    this.fail(message, record.element);
+  }
+  fail(message, element) {
+    const error = new DOMRelocatorError(message, element);
+    if (this.onError) this.onError(error);
+    else console.warn(error);
+    return null;
+  }
+  queueRefresh() {
+    if (this.refreshPending || this.destroyed) return;
+    this.refreshPending = true;
+    queueMicrotask(() => {
+      this.refreshPending = false;
+      this.refresh();
+    });
+  }
+};
+export {
+  DOMRelocatorError,
+  DOMRelocator as default
+};

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "dom-relocator",
+  "version": "0.1.0",
+  "description": "Move DOM elements between containers when media queries match, then restore them exactly.",
+  "keywords": [
+    "dom",
+    "responsive",
+    "relocate",
+    "media-query",
+    "typescript"
+  ],
+  "author": "Dmytro Frolov",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dmitry-conquer/dom-relocator.git"
+  },
+  "homepage": "https://github.com/dmitry-conquer/dom-relocator#readme",
+  "bugs": {
+    "url": "https://github.com/dmitry-conquer/dom-relocator/issues"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "packageManager": "pnpm@11.10.0",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "scripts": {
+    "dev": "vite --open demo/index.html",
+    "build": "tsup src/index.ts --format esm,cjs --clean && tsc -p tsconfig.build.json",
+    "build:docs": "tsup src/index.ts --format esm --out-dir docs --minify",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "prepack": "pnpm run build",
+    "prepublishOnly": "pnpm run typecheck && pnpm test"
+  },
+  "overrides": {
+    "esbuild": "^0.28.1"
+  },
+  "devDependencies": {
+    "happy-dom": "^20.11.0",
+    "tsup": "^8.5.1",
+    "typescript": "^7.0.2",
+    "vite": "^8.1.5",
+    "vitest": "^4.1.10"
+  }
+}