@pip-it-up/react 0.1.1 → 0.1.5

package/README.md

@@ -1,6 +1,12 @@
 # @pip-it-up/react
 
-React bindings for the `pip-it-up` engine.
+React bindings for `pip-it-up` — the **Document Picture-in-Picture** engine.
+
+## What is Document Picture-in-Picture?
+
+The [Document Picture-in-Picture API](https://developer.mozilla.org/en-US/docs/Web/API/Document_Picture-in-Picture_API) is a new browser capability that allows you to open a floating window that can be populated with any arbitrary HTML content, rather than just a video element. 
+
+`@pip-it-up/react` makes it trivial to use this API in React applications with familiar patterns like Portals, Hooks, and Controlled Components.
 
 ## Installation
 
@@ -12,7 +18,7 @@ npm install @pip-it-up/react @pip-it-up/core
 
 ### `<PipWrapper>`
 
-Wraps the content you want to move into the PiP window. 
+Wraps the content you want to move into the **Picture-in-Picture** window. 
 
 #### Uncontrolled (Default)
 ```tsx
@@ -32,34 +38,76 @@ const [isOpen, setIsOpen] = useState(false);
 ```
 
 #### Props
-Supports all `PipOptions` from `@pip-it-up/core` (`mode`, `copyStyles`, `fallback`, etc.), plus:
-- `open`: Controlled boolean state.
-- `onOpenChange`: Callback for controlled state.
-- `defaultOpen`: Initial uncontrolled state.
+
+Supports all `PipOptions` from `@pip-it-up/core`, including:
+
+- **`width` / `height`** (number, optional): If provided, forces the PiP window to these dimensions. **If omitted, the library uses a `ResizeObserver` to automatically match the component's exact size on the page.**
+- **`mode`** (`"move" | "portal"`, default: `"move"`): 
+  - In this React package, both `"move"` and `"portal"` utilize **React Portals** to move content safely between windows. They behave identically: a placeholder is left in the original spot, and the component stays in the same React tree.
+- **`copyStyles`** (`"sync" | "once" | false`, default: `"sync"`): 
+  - `"sync"`: Real-time synchronization of CSS changes (MutationObserver).
+  - `"once"`: One-time copy at window open.
+- **`reserveSpace`** (boolean, default: `true`): Whether to show a placeholder in the original position to prevent layout jumps.
+- **`placeholder`** (ReactNode): Custom component to show in the placeholder area.
+- **`centerInPip`** (boolean, default: `false`): Automatically centers your content in the PiP window.
+- **`open`** (boolean): Controlled state for the window.
+- **`onOpenChange`** (callback): Fired when the window opens or closes.
 
 ### `<PipTrigger>`
 
-A button that toggles the PiP window.
+A button that toggles the **Picture-in-Picture** window.
 
 ```tsx
 <PipTrigger asChild>
-  <button className="my-custom-btn">Open PiP</button>
+  <button className="my-custom-btn">Open Picture-in-Picture</button>
 </PipTrigger>
 ```
 
 ## Hooks
 
 ### `usePip()`
-Returns the context state.
+Returns the context state for managing the **Picture-in-Picture** lifecycle.
 ```tsx
-const { isOpen, pipWindow, instance } = usePip();
+const { isOpen, pipWindow, instance, isInsidePip } = usePip();
 ```
+- **`isOpen`**: Boolean indicating if the PiP window is open.
+- **`pipWindow`**: The native `Window` object of the PiP instance (null if closed).
+- **`isInsidePip`**: Boolean that is `true` only when the component is being rendered inside the PiP window.
+- **`instance`**: The underlying `@pip-it-up/core` instance.
+
+> [!NOTE]
+> `usePipContext()` is also available if you only need the raw context without the extra convenience properties of `usePip()`.
 
 ### `useIsPipSupported()`
-Returns boolean if the browser natively supports Document PiP.
+Returns `true` if the browser natively supports the **Document Picture-in-Picture API**.
 ```tsx
 const isSupported = useIsPipSupported();
 ```
 
+## Tips & Gotchas
+
+### CSS Inheritance
+The Picture-in-Picture window is a separate document. While `@pip-it-up` automatically copies stylesheets and `body`/`html` classes, your content will **not** inherit styles from parent elements outside the `<PipWrapper>` (like a `#root` div or a theme provider). 
+*   **Fix**: Add necessary alignment or theme classes (e.g., `text-center`, `dark`) directly to the content inside the `<PipWrapper>`.
+
+### Complex Editors (Monaco, TipTap, Canvas)
+Editors that bind to the `document` object at initialization may break when moved to a new window.
+*   **Fix 1**: Force a remount of the editor when moving to PiP by using the `isInsidePip` state as a React `key`.
+*   **Fix 2**: Lift your editor state (content, cursors, etc.) **above** the `<PipWrapper>`. Since the wrapper unmounts and remounts its children when moving them into the PiP window, any state stored *inside* the wrapper will be lost during the transition.
+
+```tsx
+const [content, setContent] = useState("");
+
+return (
+  <PipWrapper>
+    <RichTextEditor 
+      key={isInsidePip ? 'pip' : 'main'} 
+      value={content} 
+      onChange={setContent} 
+    />
+  </PipWrapper>
+);
+```
+
 ## Next.js / SSR
-Because the Document PiP API is browser-only, ensure components interacting with it are rendered on the client (`"use client"`).
+Because the **Document Picture-in-Picture API** is browser-only, ensure components interacting with it are rendered on the client (`"use client"`).

package/dist/index.d.mts

@@ -2,14 +2,44 @@ import * as React from 'react';
 import React__default, { ElementType, ReactNode } from 'react';
 import { PipOptions, PipInstance, PipState } from '@pip-it-up/core';
 
-interface PipWrapperProps extends PipOptions {
+interface PipWrapperProps extends Omit<PipOptions, 'mode'> {
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
     as?: ElementType;
     originAs?: ElementType;
     children?: ReactNode;
+    placeholder?: ReactNode;
+    placeholderClassName?: string;
+    /**
+     * @deprecated `mode` is not supported in PipWrapper. The React package always
+     * uses portal mode internally because React manages its own DOM — vanilla
+     * `move`/`clone` modes would conflict with React's reconciler. For clone mode,
+     * use the vanilla `createPip()` API directly.
+     */
+    mode?: PipOptions['mode'];
 }
+/**
+ * A React wrapper for the Document Picture-in-Picture API.
+ *
+ * **Important**: The underlying core instance always uses `mode: 'portal'`
+ * regardless of any `mode` prop. This is because React handles DOM movement
+ * via its own Portal system — using the core's vanilla DOM `move`/`clone`
+ * modes would cause `removeChild` errors and reconciliation crashes.
+ *
+ * **Implication for vanilla interop**: If you register a `<PipWrapper id="foo">`
+ * and then call `getPip('foo').open({ contentEl, originEl })` from vanilla JS,
+ * the core runs in portal mode — meaning `applyMoveMode` and `applyCloneMode`
+ * are skipped. The vanilla caller would get an empty PiP window. For vanilla
+ * DOM manipulation, create a separate instance with `createPip()` directly.
+ *
+ * **Layout note**: The outer wrapper element (`originAs`, defaults to `div`)
+ * uses `display: contents` to avoid adding an extra layout box. This means:
+ * - `getBoundingClientRect()` on the forwarded ref will return all zeros.
+ * - Screen readers may skip the element.
+ * If you need to measure the wrapper, measure the inner content element
+ * (the `as` element) instead.
+ */
 declare const PipWrapper: React__default.ForwardRefExoticComponent<PipWrapperProps & React__default.RefAttributes<HTMLElement>>;
 
 interface PipTriggerProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -20,6 +50,7 @@ interface PipTriggerProps extends React__default.ButtonHTMLAttributes<HTMLButton
     renderOpen?: React__default.ReactNode;
     renderClose?: React__default.ReactNode;
     renderUnsupported?: React__default.ReactNode | null;
+    hideInPip?: boolean;
 }
 declare const PipTrigger: React__default.ForwardRefExoticComponent<PipTriggerProps & React__default.RefAttributes<HTMLElement>>;
 
@@ -34,13 +65,14 @@ declare function usePip<T extends HTMLElement = HTMLDivElement>(options?: PipOpt
     pipWindow: Window | null;
 };
 
-interface PipContextValue<T = unknown> {
+interface PipContextValue {
     instance: PipInstance;
     state: PipState;
+    isInsidePip: boolean;
 }
-declare const PipContext: React.Context<PipContextValue<any> | null>;
+declare const PipContext: React.Context<PipContextValue | null>;
 
-declare function usePipContext<T = unknown>(): PipContextValue<T>;
+declare function usePipContext(): PipContextValue;
 
 declare const useIsPipSupported: () => boolean;
 

package/dist/index.d.ts

@@ -2,14 +2,44 @@ import * as React from 'react';
 import React__default, { ElementType, ReactNode } from 'react';
 import { PipOptions, PipInstance, PipState } from '@pip-it-up/core';
 
-interface PipWrapperProps extends PipOptions {
+interface PipWrapperProps extends Omit<PipOptions, 'mode'> {
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
     as?: ElementType;
     originAs?: ElementType;
     children?: ReactNode;
+    placeholder?: ReactNode;
+    placeholderClassName?: string;
+    /**
+     * @deprecated `mode` is not supported in PipWrapper. The React package always
+     * uses portal mode internally because React manages its own DOM — vanilla
+     * `move`/`clone` modes would conflict with React's reconciler. For clone mode,
+     * use the vanilla `createPip()` API directly.
+     */
+    mode?: PipOptions['mode'];
 }
+/**
+ * A React wrapper for the Document Picture-in-Picture API.
+ *
+ * **Important**: The underlying core instance always uses `mode: 'portal'`
+ * regardless of any `mode` prop. This is because React handles DOM movement
+ * via its own Portal system — using the core's vanilla DOM `move`/`clone`
+ * modes would cause `removeChild` errors and reconciliation crashes.
+ *
+ * **Implication for vanilla interop**: If you register a `<PipWrapper id="foo">`
+ * and then call `getPip('foo').open({ contentEl, originEl })` from vanilla JS,
+ * the core runs in portal mode — meaning `applyMoveMode` and `applyCloneMode`
+ * are skipped. The vanilla caller would get an empty PiP window. For vanilla
+ * DOM manipulation, create a separate instance with `createPip()` directly.
+ *
+ * **Layout note**: The outer wrapper element (`originAs`, defaults to `div`)
+ * uses `display: contents` to avoid adding an extra layout box. This means:
+ * - `getBoundingClientRect()` on the forwarded ref will return all zeros.
+ * - Screen readers may skip the element.
+ * If you need to measure the wrapper, measure the inner content element
+ * (the `as` element) instead.
+ */
 declare const PipWrapper: React__default.ForwardRefExoticComponent<PipWrapperProps & React__default.RefAttributes<HTMLElement>>;
 
 interface PipTriggerProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -20,6 +50,7 @@ interface PipTriggerProps extends React__default.ButtonHTMLAttributes<HTMLButton
     renderOpen?: React__default.ReactNode;
     renderClose?: React__default.ReactNode;
     renderUnsupported?: React__default.ReactNode | null;
+    hideInPip?: boolean;
 }
 declare const PipTrigger: React__default.ForwardRefExoticComponent<PipTriggerProps & React__default.RefAttributes<HTMLElement>>;
 
@@ -34,13 +65,14 @@ declare function usePip<T extends HTMLElement = HTMLDivElement>(options?: PipOpt
     pipWindow: Window | null;
 };
 
-interface PipContextValue<T = unknown> {
+interface PipContextValue {
     instance: PipInstance;
     state: PipState;
+    isInsidePip: boolean;
 }
-declare const PipContext: React.Context<PipContextValue<any> | null>;
+declare const PipContext: React.Context<PipContextValue | null>;
 
-declare function usePipContext<T = unknown>(): PipContextValue<T>;
+declare function usePipContext(): PipContextValue;
 
 declare const useIsPipSupported: () => boolean;
 

package/dist/index.js

@@ -40,7 +40,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/PipWrapper.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_core = require("@pip-it-up/core");
 
 // src/PipContext.tsx
@@ -49,15 +49,32 @@ var PipContext = (0, import_react.createContext)(null);
 
 // src/PipPortal.tsx
 var import_react_dom = require("react-dom");
+
+// src/usePipContext.ts
+var import_react2 = require("react");
+function usePipContext() {
+  const context = (0, import_react2.useContext)(PipContext);
+  if (!context) {
+    throw new Error("usePipContext must be used within a <PipWrapper>");
+  }
+  return context;
+}
+
+// src/PipPortal.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
 var PipPortal = ({ children, pipWindow }) => {
-  return (0, import_react_dom.createPortal)(children, pipWindow.document.body);
+  const context = usePipContext();
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PipContext.Provider, { value: { ...context, isInsidePip: true }, children }),
+    pipWindow.document.body
+  );
 };
 
 // src/PipWrapper.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var emptyServerState = { isOpen: false, isSupported: false, pipWindow: null };
 var getServerState = () => emptyServerState;
-var PipWrapper = (0, import_react2.forwardRef)((props, ref) => {
+var PipWrapper = (0, import_react3.forwardRef)((props, ref) => {
   const {
     open: controlledOpen,
     defaultOpen = false,
@@ -65,35 +82,57 @@ var PipWrapper = (0, import_react2.forwardRef)((props, ref) => {
     as: Component = "div",
     originAs: OriginComponent = "div",
     children,
+    placeholder,
+    placeholderClassName,
     ...coreOptions
   } = props;
-  const contentRef = (0, import_react2.useRef)(null);
-  const originRef = (0, import_react2.useRef)(null);
-  const instanceRef = (0, import_react2.useRef)(null);
-  (0, import_react2.useImperativeHandle)(ref, () => originRef.current);
+  const contentRef = (0, import_react3.useRef)(null);
+  const originRef = (0, import_react3.useRef)(null);
+  const instanceRef = (0, import_react3.useRef)(null);
+  (0, import_react3.useImperativeHandle)(ref, () => originRef.current);
   if (!instanceRef.current) {
-    instanceRef.current = (0, import_core.createPip)(coreOptions);
+    const { id: _id, mode: _mode, ...factoryOptions } = coreOptions;
+    if (_mode === "clone") {
+      console.warn(
+        '[PipWrapper] mode="clone" is not supported in the React package. PipWrapper always uses portal mode internally. For clone mode, use the vanilla createPip() API directly. Falling back to portal mode.'
+      );
+    }
+    instanceRef.current = (0, import_core.createPip)({ ...factoryOptions, mode: "portal" });
   }
   const instance = instanceRef.current;
-  (0, import_react2.useEffect)(() => {
-    instance.updateElements({
-      contentEl: contentRef.current || void 0,
-      originEl: originRef.current || void 0
-    });
-  });
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
+    if (coreOptions.id) {
+      (0, import_core.registerPip)(coreOptions.id, instance);
+      return () => {
+        (0, import_core.unregisterPip)(coreOptions.id);
+      };
+    }
+  }, [coreOptions.id, instance]);
+  (0, import_react3.useEffect)(() => {
     return () => {
-      instance.destroy();
+      if (instanceRef.current) {
+        instanceRef.current.destroy();
+      }
     };
-  }, [instance]);
-  const state = (0, import_react2.useSyncExternalStore)(
+  }, []);
+  const state = (0, import_react3.useSyncExternalStore)(
     instance.subscribe,
     instance.getState,
     getServerState
   );
+  (0, import_react3.useLayoutEffect)(() => {
+    if (typeof instance.setDefaultElements === "function") {
+      instance.setDefaultElements({
+        contentEl: contentRef.current || void 0,
+        originEl: originRef.current || void 0
+      });
+    } else {
+      console.error("[PipWrapper] setDefaultElements is MISSING on instance!");
+    }
+  }, [instance, state.isOpen]);
   const isControlled = controlledOpen !== void 0;
-  const prevOpenRef = (0, import_react2.useRef)(state.isOpen);
-  (0, import_react2.useEffect)(() => {
+  const prevOpenRef = (0, import_react3.useRef)(state.isOpen);
+  (0, import_react3.useEffect)(() => {
     if (state.isOpen !== prevOpenRef.current) {
       if (onOpenChange) {
         onOpenChange(state.isOpen);
@@ -101,48 +140,140 @@ var PipWrapper = (0, import_react2.forwardRef)((props, ref) => {
       prevOpenRef.current = state.isOpen;
     }
   }, [state.isOpen, onOpenChange]);
-  (0, import_react2.useEffect)(() => {
+  const prevControlledOpenRef = (0, import_react3.useRef)(false);
+  (0, import_react3.useEffect)(() => {
     if (isControlled) {
-      if (controlledOpen && !state.isOpen) {
-        instance.open({ contentEl: contentRef.current || void 0, originEl: originRef.current || void 0 });
-      } else if (!controlledOpen && state.isOpen) {
+      const changedToOpen = controlledOpen && !prevControlledOpenRef.current;
+      const changedToClosed = !controlledOpen && prevControlledOpenRef.current;
+      if (changedToOpen && !state.isOpen) {
+        if (contentRef.current) {
+          const rect = contentRef.current.getBoundingClientRect();
+          if (rect.width > 0 && rect.height > 0) {
+            lastSizeRef.current = { width: rect.width, height: rect.height };
+          }
+        }
+        instance.open().catch((err) => {
+          if (err.name === "NotAllowedError") {
+            console.warn('[PipWrapper] PiP window opening blocked: requires user activation. Ensure the "open" prop is changed within a user gesture handler.');
+          } else {
+            console.error("[PipWrapper] Failed to open PiP window", err);
+          }
+        });
+      } else if (changedToClosed && state.isOpen) {
         instance.close();
       }
+      prevControlledOpenRef.current = controlledOpen;
     }
   }, [controlledOpen, isControlled, state.isOpen, instance]);
-  const defaultOpenHandled = (0, import_react2.useRef)(false);
-  (0, import_react2.useEffect)(() => {
+  const defaultOpenHandled = (0, import_react3.useRef)(false);
+  (0, import_react3.useEffect)(() => {
     if (!isControlled && defaultOpen && !defaultOpenHandled.current) {
       defaultOpenHandled.current = true;
-      instance.open({ contentEl: contentRef.current || void 0, originEl: originRef.current || void 0 });
+      instance.open().catch((err) => {
+        if (err.name === "NotAllowedError") {
+          console.warn("[PipWrapper] PiP window defaultOpen blocked: requires user activation.");
+        } else {
+          console.error("[PipWrapper] Failed to open PiP window via defaultOpen", err);
+        }
+      });
     }
   }, [defaultOpen, isControlled, instance]);
-  const mode = coreOptions.mode || "move";
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PipContext.Provider, { value: { instance, state }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OriginComponent, { ref: originRef, children: mode === "portal" && state.isOpen && state.pipWindow ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PipPortal, { pipWindow: state.pipWindow, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ref: contentRef, children }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ref: contentRef, children }) }) });
+  const mode = coreOptions.mode === "clone" ? "move" : coreOptions.mode || "move";
+  const defaultPlaceholder = /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { padding: "12px", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", backgroundColor: "transparent", border: "1px dashed color-mix(in srgb, currentColor 30%, #ccc)", borderRadius: "inherit", width: "100%", height: "100%", boxSizing: "border-box", overflow: "hidden" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { marginBottom: "4px", fontSize: "0.875rem", fontWeight: 500, opacity: 0.6, textAlign: "center" }, children: "\u{1F4FA} In PiP" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { onClick: () => instance.close(), style: { fontSize: "0.75rem", padding: "4px 8px", cursor: "pointer", borderRadius: "4px", border: "1px solid currentColor", background: "transparent", opacity: 0.6 }, children: "Restore" })
+  ] });
+  const placeholderContent = placeholder !== void 0 ? placeholder : defaultPlaceholder;
+  const lastSizeRef = (0, import_react3.useRef)({ width: 0, height: 0 });
+  (0, import_react3.useEffect)(() => {
+    if (!contentRef.current || state.isOpen) return;
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.contentRect.width > 0 && entry.contentRect.height > 0) {
+          lastSizeRef.current = {
+            width: entry.borderBoxSize?.[0]?.inlineSize ?? entry.contentRect.width,
+            height: entry.borderBoxSize?.[0]?.blockSize ?? entry.contentRect.height
+          };
+        }
+      }
+    });
+    observer.observe(contentRef.current);
+    return () => observer.disconnect();
+  }, [state.isOpen]);
+  const prevIsOpenRef = (0, import_react3.useRef)(state.isOpen);
+  (0, import_react3.useLayoutEffect)(() => {
+    if (prevIsOpenRef.current && !state.isOpen && contentRef.current) {
+      const rect = contentRef.current.getBoundingClientRect();
+      if (rect.width > 0 && rect.height > 0) {
+        lastSizeRef.current = { width: rect.width, height: rect.height };
+      }
+    }
+    prevIsOpenRef.current = state.isOpen;
+  }, [state.isOpen]);
+  (0, import_react3.useLayoutEffect)(() => {
+    if ((mode === "move" || mode === "portal") && state.isOpen && coreOptions.reserveSpace !== false && originRef.current) {
+      const { width, height } = lastSizeRef.current;
+      const origin = originRef.current;
+      if (width > 0 && height > 0) {
+        origin.style.minWidth = `${width}px`;
+        origin.style.minHeight = `${height}px`;
+        origin.style.width = `${width}px`;
+        origin.style.height = `${height}px`;
+        origin.style.display = "inline-block";
+        origin.style.verticalAlign = "top";
+        return () => {
+          origin.style.minWidth = "";
+          origin.style.minHeight = "";
+          origin.style.width = "";
+          origin.style.height = "";
+          origin.style.display = "";
+          origin.style.verticalAlign = "";
+        };
+      }
+    }
+  }, [mode, state.isOpen, coreOptions.reserveSpace, instance]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PipContext.Provider, { value: { instance, state, isInsidePip: false }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(OriginComponent, { ref: originRef, style: { display: "contents" }, children: (mode === "portal" || mode === "move") && state.isOpen && state.pipWindow ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        className: placeholderClassName,
+        style: {
+          width: coreOptions.width ? `${coreOptions.width}px` : "100%",
+          height: lastSizeRef.current.height ? `${lastSizeRef.current.height}px` : "auto",
+          display: "inline-block",
+          verticalAlign: "top",
+          boxSizing: "border-box"
+        },
+        children: placeholderContent
+      },
+      "placeholder"
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PipPortal, { pipWindow: state.pipWindow, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Component, { ref: contentRef, children }) })
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Component, { ref: contentRef, children }, "content") }) });
 });
 PipWrapper.displayName = "PipWrapper";
 
 // src/PipTrigger.tsx
-var import_react5 = require("react");
+var import_react6 = __toESM(require("react"));
 var import_core3 = require("@pip-it-up/core");
 
 // src/useIsPipSupported.ts
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_core2 = require("@pip-it-up/core");
 var useIsPipSupported = () => {
-  const [supported, setSupported] = (0, import_react3.useState)(false);
-  (0, import_react3.useEffect)(() => {
+  const [supported, setSupported] = (0, import_react4.useState)(false);
+  (0, import_react4.useEffect)(() => {
     setSupported((0, import_core2.isSupported)());
   }, []);
   return supported;
 };
 
 // src/Slot.tsx
-var import_react4 = __toESM(require("react"));
-var Slot = (0, import_react4.forwardRef)((props, ref) => {
+var import_react5 = __toESM(require("react"));
+var Slot = (0, import_react5.forwardRef)((props, ref) => {
   const { children, ...slotProps } = props;
-  if (import_react4.default.isValidElement(children)) {
-    return import_react4.default.cloneElement(children, {
+  if (import_react5.default.isValidElement(children)) {
+    return import_react5.default.cloneElement(children, {
       ...slotProps,
       ...children.props,
       style: {
@@ -153,26 +284,26 @@ var Slot = (0, import_react4.forwardRef)((props, ref) => {
       ref: (node) => {
         if (typeof ref === "function") ref(node);
         else if (ref) ref.current = node;
-        const childRef = children.ref;
+        const childRef = children.props.ref || children.ref;
         if (typeof childRef === "function") childRef(node);
         else if (childRef) childRef.current = node;
       }
     });
   }
-  if (import_react4.default.Children.count(children) > 1) {
-    import_react4.default.Children.only(null);
+  if (import_react5.default.Children.count(children) > 1) {
+    throw new Error("PipTrigger asChild expects a single React element child");
   }
   return null;
 });
 Slot.displayName = "Slot";
 
 // src/PipTrigger.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var emptySubscribe = () => () => {
 };
 var emptyServerState2 = { isOpen: false, isSupported: false, pipWindow: null };
 var emptyGetState = () => emptyServerState2;
-var PipTrigger = (0, import_react5.forwardRef)((props, ref) => {
+var PipTrigger = (0, import_react6.forwardRef)((props, ref) => {
   const {
     pipId,
     asChild,
@@ -181,83 +312,116 @@ var PipTrigger = (0, import_react5.forwardRef)((props, ref) => {
     renderOpen,
     renderClose,
     renderUnsupported = null,
+    hideInPip = true,
     onClick,
     children,
     ...rest
   } = props;
   const isSupported2 = useIsPipSupported();
-  const context = (0, import_react5.useContext)(PipContext);
-  const [registryInstance, setRegistryInstance] = (0, import_react5.useState)(pipId ? (0, import_core3.getPip)(pipId) : null);
-  (0, import_react5.useEffect)(() => {
-    if (pipId) {
-      setRegistryInstance((0, import_core3.getPip)(pipId));
-      const unsub = (0, import_core3.subscribeRegistry)(pipId, () => {
-        setRegistryInstance((0, import_core3.getPip)(pipId));
-      });
-      return unsub;
-    }
+  const context = (0, import_react6.useContext)(PipContext);
+  const registrySubscribe = import_react6.default.useCallback((callback) => {
+    if (!pipId) return () => {
+    };
+    return (0, import_core3.subscribeRegistry)(pipId, callback);
   }, [pipId]);
+  const getRegistrySnapshot = import_react6.default.useCallback(() => {
+    return pipId ? (0, import_core3.getPip)(pipId) : null;
+  }, [pipId]);
+  const registryInstance = (0, import_react6.useSyncExternalStore)(
+    registrySubscribe,
+    getRegistrySnapshot,
+    () => null
+  );
   const instance = pipId ? registryInstance : context?.instance;
   const subscribe = instance?.subscribe || emptySubscribe;
   const getState = instance?.getState || emptyGetState;
-  const state = (0, import_react5.useSyncExternalStore)(
+  const state = (0, import_react6.useSyncExternalStore)(
     subscribe,
     getState,
     emptyGetState
   );
-  const [mounted, setMounted] = (0, import_react5.useState)(false);
-  (0, import_react5.useEffect)(() => setMounted(true), []);
-  if (!instance && pipId) {
-    return null;
+  const [mounted, setMounted] = (0, import_react6.useState)(false);
+  (0, import_react6.useEffect)(() => setMounted(true), []);
+  if (!instance && pipId && mounted) {
+    const Comp2 = asChild ? Slot : "button";
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      Comp2,
+      {
+        ref,
+        disabled: true,
+        style: { opacity: 0.5, cursor: "not-allowed" },
+        ...asChild ? {} : { type: "button" },
+        ...rest,
+        children: asChild ? children : children ?? renderOpen ?? openLabel
+      }
+    );
   }
   if (!mounted) {
     return null;
   }
   if (!isSupported2) {
     if (renderUnsupported === null) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: renderUnsupported });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: renderUnsupported });
   }
-  const handleClick = async (e) => {
+  const handleClick = (e) => {
     if (onClick) onClick(e);
-    if (instance) {
-      await instance.toggle();
-    }
+    const target = instance ?? context?.instance;
+    target?.toggle();
   };
   const isOpen = state.isOpen;
+  if (hideInPip && isOpen && !!context) {
+    return null;
+  }
   const content = isOpen ? renderClose ?? closeLabel : renderOpen ?? openLabel;
   const Comp = asChild ? Slot : "button";
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     Comp,
     {
       ref,
       onClick: handleClick,
       ...asChild ? {} : { type: "button" },
       ...rest,
-      children: asChild ? children : content
+      children: asChild ? children : children ?? content
     }
   );
 });
 PipTrigger.displayName = "PipTrigger";
 
 // src/usePip.ts
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_core4 = require("@pip-it-up/core");
 var emptyServerState3 = { isOpen: false, isSupported: false, pipWindow: null };
 var emptyGetState2 = () => emptyServerState3;
 function usePip(options = {}) {
-  const contentRef = (0, import_react6.useRef)(null);
-  const originRef = (0, import_react6.useRef)(null);
-  const instanceRef = (0, import_react6.useRef)(null);
+  const contentRef = (0, import_react7.useRef)(null);
+  const originRef = (0, import_react7.useRef)(null);
+  const instanceRef = (0, import_react7.useRef)(null);
   if (!instanceRef.current) {
-    instanceRef.current = (0, import_core4.createPip)(options);
+    const { id: _id, ...factoryOptions } = options;
+    instanceRef.current = (0, import_core4.createPip)(factoryOptions);
   }
   const instance = instanceRef.current;
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
+    if (options.id) {
+      (0, import_core4.registerPip)(options.id, instance);
+      return () => (0, import_core4.unregisterPip)(options.id);
+    }
+  }, [options.id, instance]);
+  (0, import_react7.useEffect)(() => {
     return () => {
       instance.destroy();
+      instanceRef.current = null;
     };
   }, [instance]);
-  const state = (0, import_react6.useSyncExternalStore)(
+  (0, import_react7.useLayoutEffect)(() => {
+    if (typeof instance.setDefaultElements === "function") {
+      instance.setDefaultElements({
+        contentEl: contentRef.current || void 0,
+        originEl: originRef.current || void 0
+      });
+    }
+  }, [instance]);
+  const state = (0, import_react7.useSyncExternalStore)(
     instance.subscribe,
     instance.getState,
     emptyGetState2
@@ -273,16 +437,6 @@ function usePip(options = {}) {
     pipWindow: state.pipWindow
   };
 }
-
-// src/usePipContext.ts
-var import_react7 = require("react");
-function usePipContext() {
-  const context = (0, import_react7.useContext)(PipContext);
-  if (!context) {
-    throw new Error("usePipContext must be used within a <PipWrapper>");
-  }
-  return context;
-}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   PipContext,

package/dist/index.mjs

@@ -1,6 +1,6 @@
 // src/PipWrapper.tsx
-import { forwardRef, useEffect, useRef, useSyncExternalStore, useImperativeHandle } from "react";
-import { createPip } from "@pip-it-up/core";
+import { forwardRef, useEffect, useRef, useSyncExternalStore, useImperativeHandle, useLayoutEffect } from "react";
+import { createPip, registerPip, unregisterPip } from "@pip-it-up/core";
 
 // src/PipContext.tsx
 import { createContext } from "react";
@@ -8,12 +8,29 @@ var PipContext = createContext(null);
 
 // src/PipPortal.tsx
 import { createPortal } from "react-dom";
+
+// src/usePipContext.ts
+import { useContext } from "react";
+function usePipContext() {
+  const context = useContext(PipContext);
+  if (!context) {
+    throw new Error("usePipContext must be used within a <PipWrapper>");
+  }
+  return context;
+}
+
+// src/PipPortal.tsx
+import { jsx } from "react/jsx-runtime";
 var PipPortal = ({ children, pipWindow }) => {
-  return createPortal(children, pipWindow.document.body);
+  const context = usePipContext();
+  return createPortal(
+    /* @__PURE__ */ jsx(PipContext.Provider, { value: { ...context, isInsidePip: true }, children }),
+    pipWindow.document.body
+  );
 };
 
 // src/PipWrapper.tsx
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
 var emptyServerState = { isOpen: false, isSupported: false, pipWindow: null };
 var getServerState = () => emptyServerState;
 var PipWrapper = forwardRef((props, ref) => {
@@ -24,6 +41,8 @@ var PipWrapper = forwardRef((props, ref) => {
     as: Component = "div",
     originAs: OriginComponent = "div",
     children,
+    placeholder,
+    placeholderClassName,
     ...coreOptions
   } = props;
   const contentRef = useRef(null);
@@ -31,25 +50,45 @@ var PipWrapper = forwardRef((props, ref) => {
   const instanceRef = useRef(null);
   useImperativeHandle(ref, () => originRef.current);
   if (!instanceRef.current) {
-    instanceRef.current = createPip(coreOptions);
+    const { id: _id, mode: _mode, ...factoryOptions } = coreOptions;
+    if (_mode === "clone") {
+      console.warn(
+        '[PipWrapper] mode="clone" is not supported in the React package. PipWrapper always uses portal mode internally. For clone mode, use the vanilla createPip() API directly. Falling back to portal mode.'
+      );
+    }
+    instanceRef.current = createPip({ ...factoryOptions, mode: "portal" });
   }
   const instance = instanceRef.current;
   useEffect(() => {
-    instance.updateElements({
-      contentEl: contentRef.current || void 0,
-      originEl: originRef.current || void 0
-    });
-  });
+    if (coreOptions.id) {
+      registerPip(coreOptions.id, instance);
+      return () => {
+        unregisterPip(coreOptions.id);
+      };
+    }
+  }, [coreOptions.id, instance]);
   useEffect(() => {
     return () => {
-      instance.destroy();
+      if (instanceRef.current) {
+        instanceRef.current.destroy();
+      }
     };
-  }, [instance]);
+  }, []);
   const state = useSyncExternalStore(
     instance.subscribe,
     instance.getState,
     getServerState
   );
+  useLayoutEffect(() => {
+    if (typeof instance.setDefaultElements === "function") {
+      instance.setDefaultElements({
+        contentEl: contentRef.current || void 0,
+        originEl: originRef.current || void 0
+      });
+    } else {
+      console.error("[PipWrapper] setDefaultElements is MISSING on instance!");
+    }
+  }, [instance, state.isOpen]);
   const isControlled = controlledOpen !== void 0;
   const prevOpenRef = useRef(state.isOpen);
   useEffect(() => {
@@ -60,29 +99,121 @@ var PipWrapper = forwardRef((props, ref) => {
       prevOpenRef.current = state.isOpen;
     }
   }, [state.isOpen, onOpenChange]);
+  const prevControlledOpenRef = useRef(false);
   useEffect(() => {
     if (isControlled) {
-      if (controlledOpen && !state.isOpen) {
-        instance.open({ contentEl: contentRef.current || void 0, originEl: originRef.current || void 0 });
-      } else if (!controlledOpen && state.isOpen) {
+      const changedToOpen = controlledOpen && !prevControlledOpenRef.current;
+      const changedToClosed = !controlledOpen && prevControlledOpenRef.current;
+      if (changedToOpen && !state.isOpen) {
+        if (contentRef.current) {
+          const rect = contentRef.current.getBoundingClientRect();
+          if (rect.width > 0 && rect.height > 0) {
+            lastSizeRef.current = { width: rect.width, height: rect.height };
+          }
+        }
+        instance.open().catch((err) => {
+          if (err.name === "NotAllowedError") {
+            console.warn('[PipWrapper] PiP window opening blocked: requires user activation. Ensure the "open" prop is changed within a user gesture handler.');
+          } else {
+            console.error("[PipWrapper] Failed to open PiP window", err);
+          }
+        });
+      } else if (changedToClosed && state.isOpen) {
         instance.close();
       }
+      prevControlledOpenRef.current = controlledOpen;
     }
   }, [controlledOpen, isControlled, state.isOpen, instance]);
   const defaultOpenHandled = useRef(false);
   useEffect(() => {
     if (!isControlled && defaultOpen && !defaultOpenHandled.current) {
       defaultOpenHandled.current = true;
-      instance.open({ contentEl: contentRef.current || void 0, originEl: originRef.current || void 0 });
+      instance.open().catch((err) => {
+        if (err.name === "NotAllowedError") {
+          console.warn("[PipWrapper] PiP window defaultOpen blocked: requires user activation.");
+        } else {
+          console.error("[PipWrapper] Failed to open PiP window via defaultOpen", err);
+        }
+      });
     }
   }, [defaultOpen, isControlled, instance]);
-  const mode = coreOptions.mode || "move";
-  return /* @__PURE__ */ jsx(PipContext.Provider, { value: { instance, state }, children: /* @__PURE__ */ jsx(OriginComponent, { ref: originRef, children: mode === "portal" && state.isOpen && state.pipWindow ? /* @__PURE__ */ jsx(PipPortal, { pipWindow: state.pipWindow, children: /* @__PURE__ */ jsx(Component, { ref: contentRef, children }) }) : /* @__PURE__ */ jsx(Component, { ref: contentRef, children }) }) });
+  const mode = coreOptions.mode === "clone" ? "move" : coreOptions.mode || "move";
+  const defaultPlaceholder = /* @__PURE__ */ jsxs("div", { style: { padding: "12px", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", backgroundColor: "transparent", border: "1px dashed color-mix(in srgb, currentColor 30%, #ccc)", borderRadius: "inherit", width: "100%", height: "100%", boxSizing: "border-box", overflow: "hidden" }, children: [
+    /* @__PURE__ */ jsx2("div", { style: { marginBottom: "4px", fontSize: "0.875rem", fontWeight: 500, opacity: 0.6, textAlign: "center" }, children: "\u{1F4FA} In PiP" }),
+    /* @__PURE__ */ jsx2("button", { onClick: () => instance.close(), style: { fontSize: "0.75rem", padding: "4px 8px", cursor: "pointer", borderRadius: "4px", border: "1px solid currentColor", background: "transparent", opacity: 0.6 }, children: "Restore" })
+  ] });
+  const placeholderContent = placeholder !== void 0 ? placeholder : defaultPlaceholder;
+  const lastSizeRef = useRef({ width: 0, height: 0 });
+  useEffect(() => {
+    if (!contentRef.current || state.isOpen) return;
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.contentRect.width > 0 && entry.contentRect.height > 0) {
+          lastSizeRef.current = {
+            width: entry.borderBoxSize?.[0]?.inlineSize ?? entry.contentRect.width,
+            height: entry.borderBoxSize?.[0]?.blockSize ?? entry.contentRect.height
+          };
+        }
+      }
+    });
+    observer.observe(contentRef.current);
+    return () => observer.disconnect();
+  }, [state.isOpen]);
+  const prevIsOpenRef = useRef(state.isOpen);
+  useLayoutEffect(() => {
+    if (prevIsOpenRef.current && !state.isOpen && contentRef.current) {
+      const rect = contentRef.current.getBoundingClientRect();
+      if (rect.width > 0 && rect.height > 0) {
+        lastSizeRef.current = { width: rect.width, height: rect.height };
+      }
+    }
+    prevIsOpenRef.current = state.isOpen;
+  }, [state.isOpen]);
+  useLayoutEffect(() => {
+    if ((mode === "move" || mode === "portal") && state.isOpen && coreOptions.reserveSpace !== false && originRef.current) {
+      const { width, height } = lastSizeRef.current;
+      const origin = originRef.current;
+      if (width > 0 && height > 0) {
+        origin.style.minWidth = `${width}px`;
+        origin.style.minHeight = `${height}px`;
+        origin.style.width = `${width}px`;
+        origin.style.height = `${height}px`;
+        origin.style.display = "inline-block";
+        origin.style.verticalAlign = "top";
+        return () => {
+          origin.style.minWidth = "";
+          origin.style.minHeight = "";
+          origin.style.width = "";
+          origin.style.height = "";
+          origin.style.display = "";
+          origin.style.verticalAlign = "";
+        };
+      }
+    }
+  }, [mode, state.isOpen, coreOptions.reserveSpace, instance]);
+  return /* @__PURE__ */ jsx2(PipContext.Provider, { value: { instance, state, isInsidePip: false }, children: /* @__PURE__ */ jsx2(OriginComponent, { ref: originRef, style: { display: "contents" }, children: (mode === "portal" || mode === "move") && state.isOpen && state.pipWindow ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: placeholderClassName,
+        style: {
+          width: coreOptions.width ? `${coreOptions.width}px` : "100%",
+          height: lastSizeRef.current.height ? `${lastSizeRef.current.height}px` : "auto",
+          display: "inline-block",
+          verticalAlign: "top",
+          boxSizing: "border-box"
+        },
+        children: placeholderContent
+      },
+      "placeholder"
+    ),
+    /* @__PURE__ */ jsx2(PipPortal, { pipWindow: state.pipWindow, children: /* @__PURE__ */ jsx2(Component, { ref: contentRef, children }) })
+  ] }) : /* @__PURE__ */ jsx2(Component, { ref: contentRef, children }, "content") }) });
 });
 PipWrapper.displayName = "PipWrapper";
 
 // src/PipTrigger.tsx
-import { forwardRef as forwardRef3, useEffect as useEffect3, useState as useState2, useSyncExternalStore as useSyncExternalStore2, useContext } from "react";
+import React3, { forwardRef as forwardRef3, useEffect as useEffect3, useState as useState2, useSyncExternalStore as useSyncExternalStore2, useContext as useContext2 } from "react";
 import { getPip, subscribeRegistry } from "@pip-it-up/core";
 
 // src/useIsPipSupported.ts
@@ -112,21 +243,21 @@ var Slot = forwardRef2((props, ref) => {
       ref: (node) => {
         if (typeof ref === "function") ref(node);
         else if (ref) ref.current = node;
-        const childRef = children.ref;
+        const childRef = children.props.ref || children.ref;
         if (typeof childRef === "function") childRef(node);
         else if (childRef) childRef.current = node;
       }
     });
   }
   if (React2.Children.count(children) > 1) {
-    React2.Children.only(null);
+    throw new Error("PipTrigger asChild expects a single React element child");
   }
   return null;
 });
 Slot.displayName = "Slot";
 
 // src/PipTrigger.tsx
-import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx3 } from "react/jsx-runtime";
 var emptySubscribe = () => () => {
 };
 var emptyServerState2 = { isOpen: false, isSupported: false, pipWindow: null };
@@ -140,22 +271,26 @@ var PipTrigger = forwardRef3((props, ref) => {
     renderOpen,
     renderClose,
     renderUnsupported = null,
+    hideInPip = true,
     onClick,
     children,
     ...rest
   } = props;
   const isSupported2 = useIsPipSupported();
-  const context = useContext(PipContext);
-  const [registryInstance, setRegistryInstance] = useState2(pipId ? getPip(pipId) : null);
-  useEffect3(() => {
-    if (pipId) {
-      setRegistryInstance(getPip(pipId));
-      const unsub = subscribeRegistry(pipId, () => {
-        setRegistryInstance(getPip(pipId));
-      });
-      return unsub;
-    }
+  const context = useContext2(PipContext);
+  const registrySubscribe = React3.useCallback((callback) => {
+    if (!pipId) return () => {
+    };
+    return subscribeRegistry(pipId, callback);
   }, [pipId]);
+  const getRegistrySnapshot = React3.useCallback(() => {
+    return pipId ? getPip(pipId) : null;
+  }, [pipId]);
+  const registryInstance = useSyncExternalStore2(
+    registrySubscribe,
+    getRegistrySnapshot,
+    () => null
+  );
   const instance = pipId ? registryInstance : context?.instance;
   const subscribe = instance?.subscribe || emptySubscribe;
   const getState = instance?.getState || emptyGetState;
@@ -166,41 +301,54 @@ var PipTrigger = forwardRef3((props, ref) => {
   );
   const [mounted, setMounted] = useState2(false);
   useEffect3(() => setMounted(true), []);
-  if (!instance && pipId) {
-    return null;
+  if (!instance && pipId && mounted) {
+    const Comp2 = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx3(
+      Comp2,
+      {
+        ref,
+        disabled: true,
+        style: { opacity: 0.5, cursor: "not-allowed" },
+        ...asChild ? {} : { type: "button" },
+        ...rest,
+        children: asChild ? children : children ?? renderOpen ?? openLabel
+      }
+    );
   }
   if (!mounted) {
     return null;
   }
   if (!isSupported2) {
     if (renderUnsupported === null) return null;
-    return /* @__PURE__ */ jsx2(Fragment, { children: renderUnsupported });
+    return /* @__PURE__ */ jsx3(Fragment2, { children: renderUnsupported });
   }
-  const handleClick = async (e) => {
+  const handleClick = (e) => {
     if (onClick) onClick(e);
-    if (instance) {
-      await instance.toggle();
-    }
+    const target = instance ?? context?.instance;
+    target?.toggle();
   };
   const isOpen = state.isOpen;
+  if (hideInPip && isOpen && !!context) {
+    return null;
+  }
   const content = isOpen ? renderClose ?? closeLabel : renderOpen ?? openLabel;
   const Comp = asChild ? Slot : "button";
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     Comp,
     {
       ref,
       onClick: handleClick,
       ...asChild ? {} : { type: "button" },
       ...rest,
-      children: asChild ? children : content
+      children: asChild ? children : children ?? content
     }
   );
 });
 PipTrigger.displayName = "PipTrigger";
 
 // src/usePip.ts
-import { useRef as useRef2, useEffect as useEffect4, useSyncExternalStore as useSyncExternalStore3 } from "react";
-import { createPip as createPip2 } from "@pip-it-up/core";
+import { useRef as useRef2, useEffect as useEffect4, useSyncExternalStore as useSyncExternalStore3, useLayoutEffect as useLayoutEffect2 } from "react";
+import { createPip as createPip2, registerPip as registerPip2, unregisterPip as unregisterPip2 } from "@pip-it-up/core";
 var emptyServerState3 = { isOpen: false, isSupported: false, pipWindow: null };
 var emptyGetState2 = () => emptyServerState3;
 function usePip(options = {}) {
@@ -208,14 +356,30 @@ function usePip(options = {}) {
   const originRef = useRef2(null);
   const instanceRef = useRef2(null);
   if (!instanceRef.current) {
-    instanceRef.current = createPip2(options);
+    const { id: _id, ...factoryOptions } = options;
+    instanceRef.current = createPip2(factoryOptions);
   }
   const instance = instanceRef.current;
+  useEffect4(() => {
+    if (options.id) {
+      registerPip2(options.id, instance);
+      return () => unregisterPip2(options.id);
+    }
+  }, [options.id, instance]);
   useEffect4(() => {
     return () => {
       instance.destroy();
+      instanceRef.current = null;
     };
   }, [instance]);
+  useLayoutEffect2(() => {
+    if (typeof instance.setDefaultElements === "function") {
+      instance.setDefaultElements({
+        contentEl: contentRef.current || void 0,
+        originEl: originRef.current || void 0
+      });
+    }
+  }, [instance]);
   const state = useSyncExternalStore3(
     instance.subscribe,
     instance.getState,
@@ -232,16 +396,6 @@ function usePip(options = {}) {
     pipWindow: state.pipWindow
   };
 }
-
-// src/usePipContext.ts
-import { useContext as useContext2 } from "react";
-function usePipContext() {
-  const context = useContext2(PipContext);
-  if (!context) {
-    throw new Error("usePipContext must be used within a <PipWrapper>");
-  }
-  return context;
-}
 export {
   PipContext,
   PipTrigger,

package/package.json

@@ -1,6 +1,19 @@
 {
   "name": "@pip-it-up/react",
-  "version": "0.1.1",
+  "version": "0.1.5",
+  "description": "React components and hooks for the Document Picture-in-Picture API — PipWrapper, PipTrigger, usePip, useIsPipSupported",
+  "keywords": [
+    "picture-in-picture",
+    "pip",
+    "react-pip",
+    "document-picture-in-picture",
+    "react-picture-in-picture",
+    "floating-window",
+    "pip-window",
+    "react-hooks",
+    "react-components",
+    "document-pip"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Shakya47/pip-it-up.git",
@@ -29,11 +42,11 @@
     "dist"
   ],
   "dependencies": {
-    "@pip-it-up/core": "0.1.1"
+    "@pip-it-up/core": "0.1.5"
   },
   "peerDependencies": {
-    "react": ">=17",
-    "react-dom": ">=17"
+    "react": ">=18",
+    "react-dom": ">=18"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",