@pip-it-up/core 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Saurabh Shakya and contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,59 @@
+# @pip-it-up/core
+
+The vanilla JavaScript engine for the Document Picture-in-Picture API.
+
+## Installation
+
+```bash
+npm install @pip-it-up/core
+```
+
+## Usage
+
+```javascript
+import { createPip } from '@pip-it-up/core';
+
+const contentEl = document.getElementById('my-content');
+const originEl = document.getElementById('my-placeholder');
+
+const pip = createPip({
+  contentEl,
+  originEl,
+  mode: 'move', // 'move', 'clone', or 'portal'
+  copyStyles: 'sync', // 'sync', 'once', or false
+  fallback: 'new-tab' // 'new-tab', 'modal', or 'none'
+});
+
+pip.open().then(() => {
+  console.log('PiP opened!');
+});
+```
+
+## API
+
+### `createPip(options: PipOptions): PipInstance`
+
+Creates a new PiP instance.
+
+#### `PipOptions`
+- `contentEl`: The DOM element to move/clone into the PiP window.
+- `originEl`: The placeholder element in the main window to return the content to when closed (required for `mode: 'move'`).
+- `mode`: `'move'` (default), `'clone'`, or `'portal'`.
+- `copyStyles`: `'sync'` (default), `'once'`, or `false`.
+- `fallback`: `'new-tab'` (default), `'modal'`, or `'none'`.
+- `width` / `height`: Initial dimensions.
+- `lockAspectRatio`: Keep the window's aspect ratio fixed.
+- `fixedSize`: Prevent manual resizing.
+- `onPipWindowReady`: Callback fired when the window is fully prepared.
+
+#### `PipInstance`
+- `open()`: Requests and opens the PiP window.
+- `close()`: Closes the PiP window.
+- `toggle()`: Toggles the window state.
+- `isOpen()`: Returns boolean.
+- `getPipWindow()`: Returns the Window object or null.
+- `getState()`: Returns the current state.
+- `destroy()`: Cleans up listeners and DOM.
+
+### `getPip(id: string): PipInstance | undefined`
+Retrieves a created PiP instance by ID.

package/dist/index.d.mts

@@ -0,0 +1,77 @@
+declare global {
+    interface Window {
+        documentPictureInPicture?: {
+            requestWindow(options?: any): Promise<Window>;
+            window: Window | null;
+            onenter: ((this: Window, ev: Event) => any) | null;
+        };
+    }
+}
+type FallbackMode = "new-tab" | "modal" | "none" | ((ctx: {
+    contentEl?: HTMLElement;
+    originEl?: HTMLElement;
+    options: PipOptions;
+}) => void);
+type DomMode = "move" | "clone" | "portal";
+type CopyStylesMode = "once" | "sync";
+interface PipOptions {
+    id?: string;
+    width?: number;
+    height?: number;
+    preferInitialWindowPlacement?: boolean;
+    disallowReturnToOpener?: boolean;
+    lockAspectRatio?: boolean;
+    fixedSize?: boolean;
+    copyStyles?: CopyStylesMode;
+    mode?: DomMode;
+    fallback?: FallbackMode;
+    fallbackUrl?: string;
+    forwardKeyboardEvents?: boolean;
+    restoreScroll?: boolean;
+    restoreFocus?: boolean;
+    onBeforeOpen?: () => boolean | Promise<boolean>;
+    onOpen?: (pipWindow: Window) => void;
+    onPipWindowReady?: (pipWindow: Window) => void;
+    onClose?: () => void;
+    onError?: (err: Error) => void;
+    contentEl?: HTMLElement;
+    originEl?: HTMLElement;
+}
+interface PipState {
+    isOpen: boolean;
+    isSupported: boolean;
+    pipWindow: Window | null;
+}
+interface PipInstance {
+    id: string;
+    open: (elements?: {
+        contentEl?: HTMLElement;
+        originEl?: HTMLElement;
+    }) => Promise<void>;
+    close: () => void;
+    toggle: (elements?: {
+        contentEl?: HTMLElement;
+        originEl?: HTMLElement;
+    }) => Promise<void>;
+    isOpen: () => boolean;
+    getPipWindow: () => Window | null;
+    subscribe: (fn: () => void) => () => void;
+    getState: () => PipState;
+    updateElements: (elements: {
+        contentEl?: HTMLElement;
+        originEl?: HTMLElement;
+    }) => void;
+    destroy: () => void;
+}
+
+declare const createPip: (options?: PipOptions) => PipInstance;
+
+declare const isSupported: () => boolean;
+
+declare const registerPip: (id: string, instance: PipInstance) => void;
+declare const unregisterPip: (id: string) => void;
+declare const getPip: (id: string) => PipInstance | null;
+declare const subscribeRegistry: (id: string, fn: () => void) => (() => void);
+declare const clearRegistry: () => void;
+
+export { type CopyStylesMode, type DomMode, type FallbackMode, type PipInstance, type PipOptions, type PipState, clearRegistry, createPip, getPip, isSupported, registerPip, subscribeRegistry, unregisterPip };

package/dist/index.d.ts

@@ -0,0 +1,77 @@
+declare global {
+    interface Window {
+        documentPictureInPicture?: {
+            requestWindow(options?: any): Promise<Window>;
+            window: Window | null;
+            onenter: ((this: Window, ev: Event) => any) | null;
+        };
+    }
+}
+type FallbackMode = "new-tab" | "modal" | "none" | ((ctx: {
+    contentEl?: HTMLElement;
+    originEl?: HTMLElement;
+    options: PipOptions;
+}) => void);
+type DomMode = "move" | "clone" | "portal";
+type CopyStylesMode = "once" | "sync";
+interface PipOptions {
+    id?: string;
+    width?: number;
+    height?: number;
+    preferInitialWindowPlacement?: boolean;
+    disallowReturnToOpener?: boolean;
+    lockAspectRatio?: boolean;
+    fixedSize?: boolean;
+    copyStyles?: CopyStylesMode;
+    mode?: DomMode;
+    fallback?: FallbackMode;
+    fallbackUrl?: string;
+    forwardKeyboardEvents?: boolean;
+    restoreScroll?: boolean;
+    restoreFocus?: boolean;
+    onBeforeOpen?: () => boolean | Promise<boolean>;
+    onOpen?: (pipWindow: Window) => void;
+    onPipWindowReady?: (pipWindow: Window) => void;
+    onClose?: () => void;
+    onError?: (err: Error) => void;
+    contentEl?: HTMLElement;
+    originEl?: HTMLElement;
+}
+interface PipState {
+    isOpen: boolean;
+    isSupported: boolean;
+    pipWindow: Window | null;
+}
+interface PipInstance {
+    id: string;
+    open: (elements?: {
+        contentEl?: HTMLElement;
+        originEl?: HTMLElement;
+    }) => Promise<void>;
+    close: () => void;
+    toggle: (elements?: {
+        contentEl?: HTMLElement;
+        originEl?: HTMLElement;
+    }) => Promise<void>;
+    isOpen: () => boolean;
+    getPipWindow: () => Window | null;
+    subscribe: (fn: () => void) => () => void;
+    getState: () => PipState;
+    updateElements: (elements: {
+        contentEl?: HTMLElement;
+        originEl?: HTMLElement;
+    }) => void;
+    destroy: () => void;
+}
+
+declare const createPip: (options?: PipOptions) => PipInstance;
+
+declare const isSupported: () => boolean;
+
+declare const registerPip: (id: string, instance: PipInstance) => void;
+declare const unregisterPip: (id: string) => void;
+declare const getPip: (id: string) => PipInstance | null;
+declare const subscribeRegistry: (id: string, fn: () => void) => (() => void);
+declare const clearRegistry: () => void;
+
+export { type CopyStylesMode, type DomMode, type FallbackMode, type PipInstance, type PipOptions, type PipState, clearRegistry, createPip, getPip, isSupported, registerPip, subscribeRegistry, unregisterPip };

package/dist/index.js

@@ -0,0 +1,491 @@
+"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, {
+  clearRegistry: () => clearRegistry,
+  createPip: () => createPip,
+  getPip: () => getPip,
+  isSupported: () => isSupported,
+  registerPip: () => registerPip,
+  subscribeRegistry: () => subscribeRegistry,
+  unregisterPip: () => unregisterPip
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/support.ts
+var isSupported = () => {
+  if (typeof window === "undefined") {
+    return false;
+  }
+  return "documentPictureInPicture" in window && window.documentPictureInPicture !== void 0;
+};
+
+// src/registry.ts
+var registry = /* @__PURE__ */ new Map();
+var listeners = /* @__PURE__ */ new Map();
+var registerPip = (id, instance) => {
+  registry.set(id, instance);
+  notifyListeners(id);
+};
+var unregisterPip = (id) => {
+  registry.delete(id);
+  notifyListeners(id);
+};
+var getPip = (id) => {
+  return registry.get(id) || null;
+};
+var subscribeRegistry = (id, fn) => {
+  let set = listeners.get(id);
+  if (!set) {
+    set = /* @__PURE__ */ new Set();
+    listeners.set(id, set);
+  }
+  set.add(fn);
+  return () => {
+    set?.delete(fn);
+    if (set?.size === 0) {
+      listeners.delete(id);
+    }
+  };
+};
+var notifyListeners = (id) => {
+  const set = listeners.get(id);
+  if (set) {
+    for (const fn of set) {
+      fn();
+    }
+  }
+};
+var clearRegistry = () => {
+  registry.clear();
+  listeners.clear();
+};
+
+// src/styles.ts
+var copyStylesOnce = (pipWindow) => {
+  const pipDoc = pipWindow.document;
+  const openerDoc = window.document;
+  const stylesheets = Array.from(openerDoc.querySelectorAll('link[rel="stylesheet"], style'));
+  for (const sheet of stylesheets) {
+    pipDoc.head.appendChild(sheet.cloneNode(true));
+  }
+  syncAttrs(openerDoc.documentElement, pipDoc.documentElement);
+  syncAttrs(openerDoc.body, pipDoc.body);
+};
+var syncAttrs = (source, target) => {
+  target.className = source.className;
+  target.style.cssText = source.style.cssText;
+  for (const attr of Array.from(source.attributes)) {
+    if (attr.name.startsWith("data-")) {
+      target.setAttribute(attr.name, attr.value);
+    }
+  }
+};
+var startStylesSync = (pipWindow) => {
+  const pipDoc = pipWindow.document;
+  const openerDoc = window.document;
+  const nodeMap = /* @__PURE__ */ new WeakMap();
+  const stylesheets = Array.from(openerDoc.querySelectorAll('link[rel="stylesheet"], style'));
+  for (const sheet of stylesheets) {
+    const clone = sheet.cloneNode(true);
+    nodeMap.set(sheet, clone);
+    pipDoc.head.appendChild(clone);
+  }
+  syncAttrs(openerDoc.documentElement, pipDoc.documentElement);
+  syncAttrs(openerDoc.body, pipDoc.body);
+  const headObserver = new MutationObserver((mutations) => {
+    for (const mutation of mutations) {
+      if (mutation.type === "childList") {
+        for (const node of Array.from(mutation.addedNodes)) {
+          if (node.nodeName === "STYLE" || node.nodeName === "LINK" && node.rel === "stylesheet") {
+            const clone = node.cloneNode(true);
+            nodeMap.set(node, clone);
+            pipDoc.head.appendChild(clone);
+          }
+        }
+        for (const node of Array.from(mutation.removedNodes)) {
+          const clone = nodeMap.get(node);
+          if (clone && clone.parentNode) {
+            clone.parentNode.removeChild(clone);
+            nodeMap.delete(node);
+          }
+        }
+      } else if (mutation.type === "characterData") {
+        let current = mutation.target;
+        while (current && current.nodeName !== "STYLE") {
+          current = current.parentNode;
+        }
+        if (current) {
+          const clone = nodeMap.get(current);
+          if (clone) {
+            clone.textContent = current.textContent;
+          }
+        }
+      }
+    }
+  });
+  headObserver.observe(openerDoc.head, {
+    childList: true,
+    subtree: true,
+    characterData: true
+  });
+  const attrObserver = new MutationObserver((mutations) => {
+    for (const mutation of mutations) {
+      if (mutation.type === "attributes") {
+        const source = mutation.target;
+        const attrName = mutation.attributeName;
+        if (!attrName) continue;
+        let target = null;
+        if (source === openerDoc.documentElement) target = pipDoc.documentElement;
+        else if (source === openerDoc.body) target = pipDoc.body;
+        if (target) {
+          const val = source.getAttribute(attrName);
+          if (val === null) {
+            target.removeAttribute(attrName);
+          } else {
+            target.setAttribute(attrName, val);
+          }
+        }
+      }
+    }
+  });
+  attrObserver.observe(openerDoc.documentElement, { attributes: true });
+  attrObserver.observe(openerDoc.body, { attributes: true });
+  return () => {
+    headObserver.disconnect();
+    attrObserver.disconnect();
+  };
+};
+
+// src/dom-modes.ts
+var applyMoveMode = (pipWindow, contentEl, originEl) => {
+  pipWindow.document.body.appendChild(contentEl);
+  return () => {
+    if (originEl && contentEl) {
+      originEl.appendChild(contentEl);
+    }
+  };
+};
+var applyCloneMode = (pipWindow, contentEl) => {
+  const clone = contentEl.cloneNode(true);
+  pipWindow.document.body.appendChild(clone);
+  return () => {
+  };
+};
+var applyPortalAnchorMode = (pipWindow) => {
+  return () => {
+  };
+};
+
+// src/keyboard-bridge.ts
+var startKeyboardBridge = (pipWindow, openerWindow = window) => {
+  const handleKey = (e) => {
+    const init = {
+      key: e.key,
+      code: e.code,
+      location: e.location,
+      ctrlKey: e.ctrlKey,
+      shiftKey: e.shiftKey,
+      altKey: e.altKey,
+      metaKey: e.metaKey,
+      repeat: e.repeat,
+      isComposing: e.isComposing,
+      bubbles: true,
+      cancelable: true,
+      composed: true
+    };
+    const cloneEvent = new KeyboardEvent(e.type, init);
+    Object.defineProperties(cloneEvent, {
+      keyCode: { get: () => e.keyCode },
+      charCode: { get: () => e.charCode },
+      which: { get: () => e.which }
+    });
+    const canceled = !openerWindow.document.dispatchEvent(cloneEvent);
+    if (canceled) {
+      e.preventDefault();
+    }
+  };
+  pipWindow.addEventListener("keydown", handleKey);
+  pipWindow.addEventListener("keyup", handleKey);
+  return () => {
+    pipWindow.removeEventListener("keydown", handleKey);
+    pipWindow.removeEventListener("keyup", handleKey);
+  };
+};
+
+// src/focus-scroll.ts
+var snapshotScrollFocus = (rootEl) => {
+  const openerDoc = window.document;
+  const activeElement = openerDoc.activeElement;
+  let selectionStart = null;
+  let selectionEnd = null;
+  let selectionDir = null;
+  if (activeElement && (activeElement instanceof HTMLInputElement || activeElement instanceof HTMLTextAreaElement)) {
+    try {
+      selectionStart = activeElement.selectionStart;
+      selectionEnd = activeElement.selectionEnd;
+      selectionDir = activeElement.selectionDirection;
+    } catch {
+    }
+  }
+  const scrollMap = /* @__PURE__ */ new WeakMap();
+  const walk = (node) => {
+    if (node instanceof HTMLElement) {
+      if (node.scrollTop > 0 || node.scrollLeft > 0) {
+        scrollMap.set(node, { scrollTop: node.scrollTop, scrollLeft: node.scrollLeft });
+      }
+    }
+    for (const child of Array.from(node.children)) {
+      walk(child);
+    }
+  };
+  walk(rootEl);
+  return {
+    restore: () => {
+      const restoreWalk = (node) => {
+        if (node instanceof HTMLElement) {
+          const state = scrollMap.get(node);
+          if (state) {
+            node.scrollTop = state.scrollTop;
+            node.scrollLeft = state.scrollLeft;
+          }
+        }
+        for (const child of Array.from(node.children)) {
+          restoreWalk(child);
+        }
+      };
+      restoreWalk(rootEl);
+      if (activeElement && openerDoc.body.contains(activeElement)) {
+        activeElement.focus({ preventScroll: true });
+        if (selectionStart !== null && selectionEnd !== null) {
+          try {
+            activeElement.setSelectionRange(
+              selectionStart,
+              selectionEnd,
+              selectionDir || "none"
+            );
+          } catch {
+          }
+        }
+      }
+    }
+  };
+};
+
+// src/fixed-size.ts
+var attachFixedSizeGuard = (pipWindow, width, height) => {
+  let isResizing = false;
+  const handleResize = () => {
+    if (isResizing) return;
+    if (pipWindow.innerWidth !== width || pipWindow.innerHeight !== height) {
+      isResizing = true;
+      try {
+        pipWindow.resizeTo(width, height);
+      } catch {
+      }
+      setTimeout(() => {
+        isResizing = false;
+      }, 50);
+    }
+  };
+  pipWindow.addEventListener("resize", handleResize);
+  return () => {
+    pipWindow.removeEventListener("resize", handleResize);
+  };
+};
+
+// src/fallback.ts
+var executeFallback = (fallback, options, contentEl, originEl) => {
+  if (typeof fallback === "function") {
+    fallback({ contentEl, originEl, options });
+    return;
+  }
+  switch (fallback) {
+    case "new-tab":
+      if (options.fallbackUrl) {
+        window.open(options.fallbackUrl, "_blank");
+      } else {
+        console.warn('pip-it-up: fallback="new-tab" requires fallbackUrl option');
+      }
+      break;
+    case "modal":
+      break;
+    case "none":
+      console.warn("pip-it-up: Document Picture-in-Picture is not supported in this browser.");
+      break;
+  }
+};
+
+// src/createPip.ts
+var idCounter = 0;
+var createPip = (options = {}) => {
+  const id = options.id || `pip-instance-${++idCounter}`;
+  let state = {
+    isOpen: false,
+    isSupported: isSupported(),
+    pipWindow: null
+  };
+  const listeners2 = /* @__PURE__ */ new Set();
+  const disposers = [];
+  const updateState = (newState) => {
+    state = { ...state, ...newState };
+    listeners2.forEach((fn) => fn());
+  };
+  const cleanup = () => {
+    while (disposers.length > 0) {
+      const dispose = disposers.pop();
+      if (dispose) dispose();
+    }
+  };
+  const close = () => {
+    if (!state.isOpen) return;
+    if (state.pipWindow && !state.pipWindow.closed) {
+      state.pipWindow.close();
+    }
+    cleanup();
+    updateState({ isOpen: false, pipWindow: null });
+    if (options.onClose) {
+      options.onClose();
+    }
+  };
+  const open = async (elements) => {
+    if (state.isOpen) return;
+    const contentEl = elements?.contentEl || options.contentEl;
+    const originEl = elements?.originEl || options.originEl;
+    const mode = options.mode || "move";
+    if (!state.isSupported) {
+      const fallback = options.fallback || "none";
+      executeFallback(fallback, options, contentEl, originEl);
+      if (fallback === "modal") {
+        updateState({ isOpen: true, pipWindow: null });
+        if (options.onOpen) options.onOpen(window);
+      }
+      return;
+    }
+    try {
+      if (options.onBeforeOpen) {
+        const shouldOpen = await options.onBeforeOpen();
+        if (shouldOpen === false) return;
+      }
+      let restoreFocusScroll = null;
+      if (options.restoreScroll !== false && options.restoreFocus !== false && contentEl) {
+        const snap = snapshotScrollFocus(contentEl);
+        restoreFocusScroll = snap.restore;
+      }
+      const width = options.width || 900;
+      const height = options.height || 600;
+      const lockAspectRatio = options.lockAspectRatio || options.fixedSize || false;
+      const pipReqOpts = {
+        width,
+        height,
+        disallowReturnToOpener: options.disallowReturnToOpener,
+        preferInitialWindowPlacement: options.preferInitialWindowPlacement,
+        ...lockAspectRatio ? { lockAspectRatio: true } : {}
+      };
+      const pipWindow = await window.documentPictureInPicture.requestWindow(pipReqOpts);
+      pipWindow.addEventListener("pagehide", () => {
+        close();
+      });
+      const copyMode = options.copyStyles || "sync";
+      if (copyMode === "sync") {
+        disposers.push(startStylesSync(pipWindow));
+      } else {
+        copyStylesOnce(pipWindow);
+      }
+      if (contentEl && originEl && mode === "move") {
+        disposers.push(applyMoveMode(pipWindow, contentEl, originEl));
+      } else if (contentEl && mode === "clone") {
+        disposers.push(applyCloneMode(pipWindow, contentEl));
+      } else if (mode === "portal") {
+        disposers.push(applyPortalAnchorMode(pipWindow));
+      }
+      if (options.forwardKeyboardEvents !== false) {
+        disposers.push(startKeyboardBridge(pipWindow, window));
+      }
+      if (options.fixedSize) {
+        disposers.push(attachFixedSizeGuard(pipWindow, width, height));
+      }
+      if (restoreFocusScroll) {
+        disposers.push(restoreFocusScroll);
+      }
+      updateState({ isOpen: true, pipWindow });
+      if (options.onOpen) {
+        options.onOpen(pipWindow);
+      }
+      requestAnimationFrame(() => {
+        if (options.onPipWindowReady) {
+          options.onPipWindowReady(pipWindow);
+        }
+      });
+    } catch (err) {
+      cleanup();
+      updateState({ isOpen: false, pipWindow: null });
+      if (options.onError) {
+        options.onError(err);
+      } else {
+        throw err;
+      }
+    }
+  };
+  const toggle = async (elements) => {
+    if (state.isOpen) {
+      close();
+    } else {
+      await open(elements);
+    }
+  };
+  const instance = {
+    id,
+    open,
+    close,
+    toggle,
+    isOpen: () => state.isOpen,
+    getPipWindow: () => state.pipWindow,
+    subscribe: (fn) => {
+      listeners2.add(fn);
+      return () => listeners2.delete(fn);
+    },
+    getState: () => state,
+    updateElements: (elements) => {
+      if (elements.contentEl !== void 0) options.contentEl = elements.contentEl;
+      if (elements.originEl !== void 0) options.originEl = elements.originEl;
+    },
+    destroy: () => {
+      close();
+      unregisterPip(id);
+      listeners2.clear();
+    }
+  };
+  if (options.id) {
+    registerPip(id, instance);
+  }
+  return instance;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  clearRegistry,
+  createPip,
+  getPip,
+  isSupported,
+  registerPip,
+  subscribeRegistry,
+  unregisterPip
+});

package/dist/index.mjs

@@ -0,0 +1,458 @@
+// src/support.ts
+var isSupported = () => {
+  if (typeof window === "undefined") {
+    return false;
+  }
+  return "documentPictureInPicture" in window && window.documentPictureInPicture !== void 0;
+};
+
+// src/registry.ts
+var registry = /* @__PURE__ */ new Map();
+var listeners = /* @__PURE__ */ new Map();
+var registerPip = (id, instance) => {
+  registry.set(id, instance);
+  notifyListeners(id);
+};
+var unregisterPip = (id) => {
+  registry.delete(id);
+  notifyListeners(id);
+};
+var getPip = (id) => {
+  return registry.get(id) || null;
+};
+var subscribeRegistry = (id, fn) => {
+  let set = listeners.get(id);
+  if (!set) {
+    set = /* @__PURE__ */ new Set();
+    listeners.set(id, set);
+  }
+  set.add(fn);
+  return () => {
+    set?.delete(fn);
+    if (set?.size === 0) {
+      listeners.delete(id);
+    }
+  };
+};
+var notifyListeners = (id) => {
+  const set = listeners.get(id);
+  if (set) {
+    for (const fn of set) {
+      fn();
+    }
+  }
+};
+var clearRegistry = () => {
+  registry.clear();
+  listeners.clear();
+};
+
+// src/styles.ts
+var copyStylesOnce = (pipWindow) => {
+  const pipDoc = pipWindow.document;
+  const openerDoc = window.document;
+  const stylesheets = Array.from(openerDoc.querySelectorAll('link[rel="stylesheet"], style'));
+  for (const sheet of stylesheets) {
+    pipDoc.head.appendChild(sheet.cloneNode(true));
+  }
+  syncAttrs(openerDoc.documentElement, pipDoc.documentElement);
+  syncAttrs(openerDoc.body, pipDoc.body);
+};
+var syncAttrs = (source, target) => {
+  target.className = source.className;
+  target.style.cssText = source.style.cssText;
+  for (const attr of Array.from(source.attributes)) {
+    if (attr.name.startsWith("data-")) {
+      target.setAttribute(attr.name, attr.value);
+    }
+  }
+};
+var startStylesSync = (pipWindow) => {
+  const pipDoc = pipWindow.document;
+  const openerDoc = window.document;
+  const nodeMap = /* @__PURE__ */ new WeakMap();
+  const stylesheets = Array.from(openerDoc.querySelectorAll('link[rel="stylesheet"], style'));
+  for (const sheet of stylesheets) {
+    const clone = sheet.cloneNode(true);
+    nodeMap.set(sheet, clone);
+    pipDoc.head.appendChild(clone);
+  }
+  syncAttrs(openerDoc.documentElement, pipDoc.documentElement);
+  syncAttrs(openerDoc.body, pipDoc.body);
+  const headObserver = new MutationObserver((mutations) => {
+    for (const mutation of mutations) {
+      if (mutation.type === "childList") {
+        for (const node of Array.from(mutation.addedNodes)) {
+          if (node.nodeName === "STYLE" || node.nodeName === "LINK" && node.rel === "stylesheet") {
+            const clone = node.cloneNode(true);
+            nodeMap.set(node, clone);
+            pipDoc.head.appendChild(clone);
+          }
+        }
+        for (const node of Array.from(mutation.removedNodes)) {
+          const clone = nodeMap.get(node);
+          if (clone && clone.parentNode) {
+            clone.parentNode.removeChild(clone);
+            nodeMap.delete(node);
+          }
+        }
+      } else if (mutation.type === "characterData") {
+        let current = mutation.target;
+        while (current && current.nodeName !== "STYLE") {
+          current = current.parentNode;
+        }
+        if (current) {
+          const clone = nodeMap.get(current);
+          if (clone) {
+            clone.textContent = current.textContent;
+          }
+        }
+      }
+    }
+  });
+  headObserver.observe(openerDoc.head, {
+    childList: true,
+    subtree: true,
+    characterData: true
+  });
+  const attrObserver = new MutationObserver((mutations) => {
+    for (const mutation of mutations) {
+      if (mutation.type === "attributes") {
+        const source = mutation.target;
+        const attrName = mutation.attributeName;
+        if (!attrName) continue;
+        let target = null;
+        if (source === openerDoc.documentElement) target = pipDoc.documentElement;
+        else if (source === openerDoc.body) target = pipDoc.body;
+        if (target) {
+          const val = source.getAttribute(attrName);
+          if (val === null) {
+            target.removeAttribute(attrName);
+          } else {
+            target.setAttribute(attrName, val);
+          }
+        }
+      }
+    }
+  });
+  attrObserver.observe(openerDoc.documentElement, { attributes: true });
+  attrObserver.observe(openerDoc.body, { attributes: true });
+  return () => {
+    headObserver.disconnect();
+    attrObserver.disconnect();
+  };
+};
+
+// src/dom-modes.ts
+var applyMoveMode = (pipWindow, contentEl, originEl) => {
+  pipWindow.document.body.appendChild(contentEl);
+  return () => {
+    if (originEl && contentEl) {
+      originEl.appendChild(contentEl);
+    }
+  };
+};
+var applyCloneMode = (pipWindow, contentEl) => {
+  const clone = contentEl.cloneNode(true);
+  pipWindow.document.body.appendChild(clone);
+  return () => {
+  };
+};
+var applyPortalAnchorMode = (pipWindow) => {
+  return () => {
+  };
+};
+
+// src/keyboard-bridge.ts
+var startKeyboardBridge = (pipWindow, openerWindow = window) => {
+  const handleKey = (e) => {
+    const init = {
+      key: e.key,
+      code: e.code,
+      location: e.location,
+      ctrlKey: e.ctrlKey,
+      shiftKey: e.shiftKey,
+      altKey: e.altKey,
+      metaKey: e.metaKey,
+      repeat: e.repeat,
+      isComposing: e.isComposing,
+      bubbles: true,
+      cancelable: true,
+      composed: true
+    };
+    const cloneEvent = new KeyboardEvent(e.type, init);
+    Object.defineProperties(cloneEvent, {
+      keyCode: { get: () => e.keyCode },
+      charCode: { get: () => e.charCode },
+      which: { get: () => e.which }
+    });
+    const canceled = !openerWindow.document.dispatchEvent(cloneEvent);
+    if (canceled) {
+      e.preventDefault();
+    }
+  };
+  pipWindow.addEventListener("keydown", handleKey);
+  pipWindow.addEventListener("keyup", handleKey);
+  return () => {
+    pipWindow.removeEventListener("keydown", handleKey);
+    pipWindow.removeEventListener("keyup", handleKey);
+  };
+};
+
+// src/focus-scroll.ts
+var snapshotScrollFocus = (rootEl) => {
+  const openerDoc = window.document;
+  const activeElement = openerDoc.activeElement;
+  let selectionStart = null;
+  let selectionEnd = null;
+  let selectionDir = null;
+  if (activeElement && (activeElement instanceof HTMLInputElement || activeElement instanceof HTMLTextAreaElement)) {
+    try {
+      selectionStart = activeElement.selectionStart;
+      selectionEnd = activeElement.selectionEnd;
+      selectionDir = activeElement.selectionDirection;
+    } catch {
+    }
+  }
+  const scrollMap = /* @__PURE__ */ new WeakMap();
+  const walk = (node) => {
+    if (node instanceof HTMLElement) {
+      if (node.scrollTop > 0 || node.scrollLeft > 0) {
+        scrollMap.set(node, { scrollTop: node.scrollTop, scrollLeft: node.scrollLeft });
+      }
+    }
+    for (const child of Array.from(node.children)) {
+      walk(child);
+    }
+  };
+  walk(rootEl);
+  return {
+    restore: () => {
+      const restoreWalk = (node) => {
+        if (node instanceof HTMLElement) {
+          const state = scrollMap.get(node);
+          if (state) {
+            node.scrollTop = state.scrollTop;
+            node.scrollLeft = state.scrollLeft;
+          }
+        }
+        for (const child of Array.from(node.children)) {
+          restoreWalk(child);
+        }
+      };
+      restoreWalk(rootEl);
+      if (activeElement && openerDoc.body.contains(activeElement)) {
+        activeElement.focus({ preventScroll: true });
+        if (selectionStart !== null && selectionEnd !== null) {
+          try {
+            activeElement.setSelectionRange(
+              selectionStart,
+              selectionEnd,
+              selectionDir || "none"
+            );
+          } catch {
+          }
+        }
+      }
+    }
+  };
+};
+
+// src/fixed-size.ts
+var attachFixedSizeGuard = (pipWindow, width, height) => {
+  let isResizing = false;
+  const handleResize = () => {
+    if (isResizing) return;
+    if (pipWindow.innerWidth !== width || pipWindow.innerHeight !== height) {
+      isResizing = true;
+      try {
+        pipWindow.resizeTo(width, height);
+      } catch {
+      }
+      setTimeout(() => {
+        isResizing = false;
+      }, 50);
+    }
+  };
+  pipWindow.addEventListener("resize", handleResize);
+  return () => {
+    pipWindow.removeEventListener("resize", handleResize);
+  };
+};
+
+// src/fallback.ts
+var executeFallback = (fallback, options, contentEl, originEl) => {
+  if (typeof fallback === "function") {
+    fallback({ contentEl, originEl, options });
+    return;
+  }
+  switch (fallback) {
+    case "new-tab":
+      if (options.fallbackUrl) {
+        window.open(options.fallbackUrl, "_blank");
+      } else {
+        console.warn('pip-it-up: fallback="new-tab" requires fallbackUrl option');
+      }
+      break;
+    case "modal":
+      break;
+    case "none":
+      console.warn("pip-it-up: Document Picture-in-Picture is not supported in this browser.");
+      break;
+  }
+};
+
+// src/createPip.ts
+var idCounter = 0;
+var createPip = (options = {}) => {
+  const id = options.id || `pip-instance-${++idCounter}`;
+  let state = {
+    isOpen: false,
+    isSupported: isSupported(),
+    pipWindow: null
+  };
+  const listeners2 = /* @__PURE__ */ new Set();
+  const disposers = [];
+  const updateState = (newState) => {
+    state = { ...state, ...newState };
+    listeners2.forEach((fn) => fn());
+  };
+  const cleanup = () => {
+    while (disposers.length > 0) {
+      const dispose = disposers.pop();
+      if (dispose) dispose();
+    }
+  };
+  const close = () => {
+    if (!state.isOpen) return;
+    if (state.pipWindow && !state.pipWindow.closed) {
+      state.pipWindow.close();
+    }
+    cleanup();
+    updateState({ isOpen: false, pipWindow: null });
+    if (options.onClose) {
+      options.onClose();
+    }
+  };
+  const open = async (elements) => {
+    if (state.isOpen) return;
+    const contentEl = elements?.contentEl || options.contentEl;
+    const originEl = elements?.originEl || options.originEl;
+    const mode = options.mode || "move";
+    if (!state.isSupported) {
+      const fallback = options.fallback || "none";
+      executeFallback(fallback, options, contentEl, originEl);
+      if (fallback === "modal") {
+        updateState({ isOpen: true, pipWindow: null });
+        if (options.onOpen) options.onOpen(window);
+      }
+      return;
+    }
+    try {
+      if (options.onBeforeOpen) {
+        const shouldOpen = await options.onBeforeOpen();
+        if (shouldOpen === false) return;
+      }
+      let restoreFocusScroll = null;
+      if (options.restoreScroll !== false && options.restoreFocus !== false && contentEl) {
+        const snap = snapshotScrollFocus(contentEl);
+        restoreFocusScroll = snap.restore;
+      }
+      const width = options.width || 900;
+      const height = options.height || 600;
+      const lockAspectRatio = options.lockAspectRatio || options.fixedSize || false;
+      const pipReqOpts = {
+        width,
+        height,
+        disallowReturnToOpener: options.disallowReturnToOpener,
+        preferInitialWindowPlacement: options.preferInitialWindowPlacement,
+        ...lockAspectRatio ? { lockAspectRatio: true } : {}
+      };
+      const pipWindow = await window.documentPictureInPicture.requestWindow(pipReqOpts);
+      pipWindow.addEventListener("pagehide", () => {
+        close();
+      });
+      const copyMode = options.copyStyles || "sync";
+      if (copyMode === "sync") {
+        disposers.push(startStylesSync(pipWindow));
+      } else {
+        copyStylesOnce(pipWindow);
+      }
+      if (contentEl && originEl && mode === "move") {
+        disposers.push(applyMoveMode(pipWindow, contentEl, originEl));
+      } else if (contentEl && mode === "clone") {
+        disposers.push(applyCloneMode(pipWindow, contentEl));
+      } else if (mode === "portal") {
+        disposers.push(applyPortalAnchorMode(pipWindow));
+      }
+      if (options.forwardKeyboardEvents !== false) {
+        disposers.push(startKeyboardBridge(pipWindow, window));
+      }
+      if (options.fixedSize) {
+        disposers.push(attachFixedSizeGuard(pipWindow, width, height));
+      }
+      if (restoreFocusScroll) {
+        disposers.push(restoreFocusScroll);
+      }
+      updateState({ isOpen: true, pipWindow });
+      if (options.onOpen) {
+        options.onOpen(pipWindow);
+      }
+      requestAnimationFrame(() => {
+        if (options.onPipWindowReady) {
+          options.onPipWindowReady(pipWindow);
+        }
+      });
+    } catch (err) {
+      cleanup();
+      updateState({ isOpen: false, pipWindow: null });
+      if (options.onError) {
+        options.onError(err);
+      } else {
+        throw err;
+      }
+    }
+  };
+  const toggle = async (elements) => {
+    if (state.isOpen) {
+      close();
+    } else {
+      await open(elements);
+    }
+  };
+  const instance = {
+    id,
+    open,
+    close,
+    toggle,
+    isOpen: () => state.isOpen,
+    getPipWindow: () => state.pipWindow,
+    subscribe: (fn) => {
+      listeners2.add(fn);
+      return () => listeners2.delete(fn);
+    },
+    getState: () => state,
+    updateElements: (elements) => {
+      if (elements.contentEl !== void 0) options.contentEl = elements.contentEl;
+      if (elements.originEl !== void 0) options.originEl = elements.originEl;
+    },
+    destroy: () => {
+      close();
+      unregisterPip(id);
+      listeners2.clear();
+    }
+  };
+  if (options.id) {
+    registerPip(id, instance);
+  }
+  return instance;
+};
+export {
+  clearRegistry,
+  createPip,
+  getPip,
+  isSupported,
+  registerPip,
+  subscribeRegistry,
+  unregisterPip
+};

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@pip-it-up/core",
+  "version": "0.1.1",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Shakya47/pip-it-up.git",
+    "directory": "packages/core"
+  },
+  "bugs": {
+    "url": "https://github.com/Shakya47/pip-it-up/issues"
+  },
+  "homepage": "https://github.com/Shakya47/pip-it-up/tree/main/packages/core#readme",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "typescript": "^5.4.0",
+    "vitest": "^1.4.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint \"src/**/*.ts\" \"tests/**/*.ts\"",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "clean": "rm -rf dist"
+  }
+}