@tempots/client 0.0.1 → 0.0.3

package/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("@tempots/core"),a=require("@tempots/dom");function y(r,e,t={}){const{providers:n={},removeMarkers:i=!0}=t,s=N(e),o=new p.DisposalScope,c=new d(e.ownerDocument,e,void 0,n,s,0),h=p.withScope(o,()=>r.render(c));return i&&g(e),(l=!1)=>{o.dispose(),h(l)}}function N(r){const e=new Map;return r.querySelectorAll(`[${a.HYDRATION_ID_ATTR}]`).forEach(n=>{const i=n.getAttribute(a.HYDRATION_ID_ATTR);i&&e.set(i,n)}),e}function g(r){r.querySelectorAll(`[${a.HYDRATION_ID_ATTR}]`).forEach(t=>{t.removeAttribute(a.HYDRATION_ID_ATTR),t.removeAttribute("data-tts-node")})}class d{constructor(e,t,n,i,s,o){this.document=e,this.element=t,this.reference=n,this.providers=i,this.hydrationMap=s,this.childIndex=o}makeChildElement=(e,t)=>{const n=this.element.children;for(let s=this.childIndex;s<n.length;s++){const o=n[s];if(o.tagName.toLowerCase()===e.toLowerCase())return this.childIndex=s+1,new d(this.document,o,void 0,this.providers,this.hydrationMap,0)}console.warn(`Hydration mismatch: could not find element <${e}> in container`);const i=t!==void 0?this.document.createElementNS(t,e):this.document.createElement(e);return this.appendOrInsert(i),new d(this.document,i,void 0,this.providers,this.hydrationMap,0)};makeChildText=e=>{const t=this.element.childNodes;for(let i=this.childIndex;i<t.length;i++){const s=t[i];if(s.nodeType===Node.TEXT_NODE)return this.childIndex=i+1,s.textContent!==e&&(s.textContent=e),new d(this.document,this.element,s,this.providers,this.hydrationMap,this.childIndex)}const n=this.document.createTextNode(e);return this.appendOrInsert(n),new d(this.document,this.element,n,this.providers,this.hydrationMap,this.childIndex)};setText=e=>{this.reference&&(this.reference.nodeValue=e)};getText=()=>this.reference?.nodeValue??this.element.textContent??"";makeRef=()=>{const e=this.element.childNodes;for(let n=this.childIndex;n<e.length;n++){const i=e[n];if(i.nodeType===Node.TEXT_NODE&&(i.textContent===""||i.textContent===null))return this.childIndex=n+1,new d(this.document,this.element,i,this.providers,this.hydrationMap,this.childIndex)}const t=this.document.createTextNode("");return this.appendOrInsert(t),new d(this.document,this.element,t,this.providers,this.hydrationMap,this.childIndex)};makePortal=e=>{const t=typeof e=="string"?this.document.querySelector(e):e;if(t==null)throw new Error(`Cannot find element by selector for portal: ${e}`);return new d(this.document,t,void 0,this.providers,this.hydrationMap,0)};appendOrInsert=e=>{this.reference===void 0?this.element.appendChild(e):this.element.insertBefore(e,this.reference)};setProvider=(e,t,n)=>new d(this.document,this.element,this.reference,{...this.providers,[e]:[t,n]},this.hydrationMap,this.childIndex);getProvider=e=>{if(this.providers[e]===void 0)throw new Error(`Provider not found: ${String(e)}`);const[t,n]=this.providers[e];return{value:t,onUse:n}};clear=e=>{e&&(this.reference!==void 0?this.reference.parentNode?.removeChild(this.reference):this.element.parentNode?.removeChild(this.element))};addClasses=e=>{this.element.classList.add(...e)};removeClasses=e=>{this.element.classList.remove(...e)};getClasses=()=>Array.from(this.element.classList);on=(e,t,n)=>{const i=s=>t(s,this);return this.element.addEventListener(e,i,n),s=>{s&&this.element.removeEventListener(e,i,n)}};isBrowserDOM=()=>!1;isBrowser=()=>!0;isHeadlessDOM=()=>!1;isHeadless=()=>!1;setStyle=(e,t)=>{this.element.style[e]=t};getStyle=e=>this.element.style[e];makeAccessors=e=>{const t=this.element;return{get:()=>t[e],set:n=>{t[e]=n}}}}const u="data-tempo-island",I="data-tempo-hydrate",A="data-tempo-options";function S(r,e,t,n={}){r.innerHTML="";const i=new a.BrowserContext(r.ownerDocument,r,void 0,n.providers??{}),s=new p.DisposalScope,o=p.withScope(s,()=>e(t).render(i));return(c=!1)=>{s.dispose(),o(c)}}function D(r,e,t){if(e==="immediate")return t(),()=>{};if(e==="idle")if("requestIdleCallback"in window){const n=requestIdleCallback(t);return()=>cancelIdleCallback(n)}else{const n=setTimeout(t,1);return()=>clearTimeout(n)}if(e==="visible"){const n=new IntersectionObserver(i=>{for(const s of i)if(s.isIntersecting){n.disconnect(),t();break}},{rootMargin:"50px"});return n.observe(r),()=>n.disconnect()}if(typeof e=="object"&&"media"in e){const n=window.matchMedia(e.media);if(n.matches)return t(),()=>{};const i=s=>{s.matches&&(n.removeEventListener("change",i),t())};return n.addEventListener("change",i),()=>n.removeEventListener("change",i)}return t(),()=>{}}function O(r){return!r||r==="immediate"||r==="load"?"immediate":r==="idle"?"idle":r==="visible"?"visible":r.startsWith("media:")?{media:r.slice(6).trim()}:"immediate"}function v(r,e={}){const t=[];return document.querySelectorAll(`[${u}]`).forEach(i=>{const s=i,o=s.getAttribute(u);if(!o){console.warn("[Tempo Islands] Element missing island name:",s);return}const c=r[o];if(!c){console.warn(`[Tempo Islands] Component "${o}" not found in registry`);return}const h=s.getAttribute(A);let l={};if(h)try{l=JSON.parse(h)}catch(f){console.warn(`[Tempo Islands] Failed to parse options for "${o}":`,f)}const m=s.getAttribute(I),T=O(m),w=D(s,T,()=>{const f=S(s,c,l,e);t.push(f),s.removeAttribute(u),s.removeAttribute(I),s.removeAttribute(A)});t.push(w)}),()=>{t.forEach(i=>i())}}function R(r,e={},t="visible"){const n=typeof t=="object"?`media:${t.media}`:t;return[{name:u,value:r},{name:A,value:JSON.stringify(e)},{name:I,value:n}]}function b(r){const{app:e,islands:t,container:n="#app",providers:i={},debug:s=!1}=r,o=s?m=>console.log(`[Tempo] ${m}`):()=>{},c=typeof n=="string"?document.querySelector(n):n;if(!c)return console.error(`[Tempo] Could not find container: ${typeof n=="string"?n:"(element)"}`),()=>{};const h=c.querySelector(`[${u}]`)!==null;let l;if(h)o("SSR mode: Initializing islands..."),l=v(t,{providers:i}),o("Islands initialized! Static content stays static.");else if(e){o("Client-only mode: Rendering app...");const m=new a.BrowserContext(document,c,void 0,i),T=new p.DisposalScope,w=p.withScope(T,()=>e().render(m)),f=v(t,{providers:i});l=()=>{f(),T.dispose(),w(!0)},o("App rendered and islands initialized!")}else o("No SSR content detected, initializing islands only..."),l=v(t,{providers:i});return l}Object.defineProperty(exports,"HYDRATION_ID_ATTR",{enumerable:!0,get:()=>a.HYDRATION_ID_ATTR});exports.HydrationContext=d;exports.ISLAND_ATTR=u;exports.ISLAND_HYDRATE_ATTR=I;exports.ISLAND_OPTIONS_ATTR=A;exports.hydrate=y;exports.hydrateIsland=S;exports.initIslands=v;exports.islandMarker=R;exports.startClient=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("@tempots/core"),h=require("@tempots/dom");function g(o,e,t={}){const{providers:n={},removeMarkers:i=!0}=t,r=N(e),s=new f.DisposalScope,d=new a(e.ownerDocument,e,void 0,n,r,0),c=f.withScope(s,()=>o.render(d));return i&&y(e),(l=!1)=>{s.dispose(),c(l)}}function N(o){const e=new Map;return o.querySelectorAll(`[${h.HYDRATION_ID_ATTR}]`).forEach(n=>{const i=n.getAttribute(h.HYDRATION_ID_ATTR);i&&e.set(i,n)}),e}function y(o){o.querySelectorAll(`[${h.HYDRATION_ID_ATTR}]`).forEach(t=>{t.removeAttribute(h.HYDRATION_ID_ATTR),t.removeAttribute("data-tts-node")})}class a{constructor(e,t,n,i,r,s){this.document=e,this.element=t,this.reference=n,this.providers=i,this.hydrationMap=r,this.childIndex=s}makeChildElement=(e,t)=>{const n=this.element.children;for(let r=this.childIndex;r<n.length;r++){const s=n[r];if(s.tagName.toLowerCase()===e.toLowerCase())return this.childIndex=r+1,new a(this.document,s,void 0,this.providers,this.hydrationMap,0)}console.warn(`Hydration mismatch: could not find element <${e}> in container`);const i=t!==void 0?this.document.createElementNS(t,e):this.document.createElement(e);return this.appendOrInsert(i),new a(this.document,i,void 0,this.providers,this.hydrationMap,0)};makeChildText=e=>{const t=this.element.childNodes;for(let i=this.childIndex;i<t.length;i++){const r=t[i];if(r.nodeType===Node.TEXT_NODE)return this.childIndex=i+1,r.textContent!==e&&(r.textContent=e),new a(this.document,this.element,r,this.providers,this.hydrationMap,this.childIndex)}const n=this.document.createTextNode(e);return this.appendOrInsert(n),new a(this.document,this.element,n,this.providers,this.hydrationMap,this.childIndex)};setText=e=>{this.reference&&(this.reference.nodeValue=e)};getText=()=>this.reference?.nodeValue??this.element.textContent??"";makeRef=()=>{const e=this.element.childNodes;for(let n=this.childIndex;n<e.length;n++){const i=e[n];if(i.nodeType===Node.TEXT_NODE&&(i.textContent===""||i.textContent===null))return this.childIndex=n+1,new a(this.document,this.element,i,this.providers,this.hydrationMap,this.childIndex)}const t=this.document.createTextNode("");return this.appendOrInsert(t),new a(this.document,this.element,t,this.providers,this.hydrationMap,this.childIndex)};makeMarker=()=>this.makeRef();makePortal=e=>{const t=typeof e=="string"?this.document.querySelector(e):e;if(t==null)throw new Error(`Cannot find element by selector for portal: ${e}`);return new a(this.document,t,void 0,this.providers,this.hydrationMap,0)};appendOrInsert=e=>{this.reference===void 0?this.element.appendChild(e):this.element.insertBefore(e,this.reference)};setProvider=(e,t,n)=>new a(this.document,this.element,this.reference,{...this.providers,[e]:[t,n]},this.hydrationMap,this.childIndex);getProvider=e=>{if(this.providers[e]===void 0)throw new Error(`Provider not found: ${String(e)}`);const[t,n]=this.providers[e];return{value:t,onUse:n}};clear=e=>{e&&(this.reference!==void 0?this.reference.parentNode?.removeChild(this.reference):this.element.parentNode?.removeChild(this.element))};addClasses=e=>{this.element.classList.add(...e)};removeClasses=e=>{this.element.classList.remove(...e)};getClasses=()=>Array.from(this.element.classList);on=(e,t,n)=>{const i=r=>t(r,this);return this.element.addEventListener(e,i,n),r=>{r&&this.element.removeEventListener(e,i,n)}};isBrowserDOM=()=>!1;isBrowser=()=>!0;isHeadlessDOM=()=>!1;isHeadless=()=>!1;setStyle=(e,t)=>{this.element.style[e]=t};getStyle=e=>this.element.style[e];makeAccessors=e=>{const t=this.element;return{get:()=>t[e],set:n=>{t[e]=n}}};moveRangeBefore=(e,t,n)=>{const i=e.reference,r=t.reference,s=n.reference,d=this.element;let c=i;for(;c!==null;){const l=c.nextSibling;if(d.insertBefore(c,s),c===r)break;c=l}};removeRange=(e,t)=>{const n=e.reference,i=t.reference,r=this.element;let s=n;for(;s!==null;){const d=s.nextSibling;if(r.removeChild(s),s===i)break;s=d}};removeAllBefore(e){const t=e.reference,n=this.element;if(!n.firstChild||n.firstChild===t)return;const i=this.document.createRange();i.setStartBefore(n.firstChild),i.setEndBefore(t),i.deleteContents()}_detachedParent=null;_detachedNext=null;detach(){const e=this.element;e.parentNode&&(this._detachedParent=e.parentNode,this._detachedNext=e.nextSibling,e.remove())}reattach(){this._detachedParent&&(this._detachedParent.insertBefore(this.element,this._detachedNext),this._detachedParent=null,this._detachedNext=null)}}const u="data-tempo-island",I="data-tempo-hydrate",S="data-tempo-options";function A(o,e,t,n={}){o.innerHTML="";const i=new h.BrowserContext(o.ownerDocument,o,void 0,n.providers??{}),r=new f.DisposalScope,s=f.withScope(r,()=>e(t).render(i));return(d=!1)=>{r.dispose(),s(d)}}function x(o,e,t){if(e==="immediate")return t(),()=>{};if(e==="idle")if("requestIdleCallback"in window){const n=requestIdleCallback(t);return()=>cancelIdleCallback(n)}else{const n=setTimeout(t,1);return()=>clearTimeout(n)}if(e==="visible"){const n=new IntersectionObserver(i=>{for(const r of i)if(r.isIntersecting){n.disconnect(),t();break}},{rootMargin:"50px"});return n.observe(o),()=>n.disconnect()}if(typeof e=="object"&&"media"in e){const n=window.matchMedia(e.media);if(n.matches)return t(),()=>{};const i=r=>{r.matches&&(n.removeEventListener("change",i),t())};return n.addEventListener("change",i),()=>n.removeEventListener("change",i)}return t(),()=>{}}function D(o){return!o||o==="immediate"||o==="load"?"immediate":o==="idle"?"idle":o==="visible"?"visible":o.startsWith("media:")?{media:o.slice(6).trim()}:"immediate"}function T(o,e={}){const t=[];return document.querySelectorAll(`[${u}]`).forEach(i=>{const r=i,s=r.getAttribute(u);if(!s){console.warn("[Tempo Islands] Element missing island name:",r);return}const d=o[s];if(!d){console.warn(`[Tempo Islands] Component "${s}" not found in registry`);return}const c=r.getAttribute(S);let l={};if(c)try{l=JSON.parse(c)}catch(p){console.warn(`[Tempo Islands] Failed to parse options for "${s}":`,p)}const m=r.getAttribute(I),v=D(m),w=x(r,v,()=>{const p=A(r,d,l,e);t.push(p),r.removeAttribute(u),r.removeAttribute(I),r.removeAttribute(S)});t.push(w)}),()=>{t.forEach(i=>i())}}function R(o,e={},t="visible"){const n=typeof t=="object"?`media:${t.media}`:t;return[{name:u,value:o},{name:S,value:JSON.stringify(e)},{name:I,value:n}]}function b(o){const{app:e,islands:t,container:n="#app",providers:i={},debug:r=!1}=o,s=r?m=>console.log(`[Tempo] ${m}`):()=>{},d=typeof n=="string"?document.querySelector(n):n;if(!d)return console.error(`[Tempo] Could not find container: ${typeof n=="string"?n:"(element)"}`),()=>{};const c=d.querySelector(`[${u}]`)!==null;let l;if(c)s("SSR mode: Initializing islands..."),l=T(t,{providers:i}),s("Islands initialized! Static content stays static.");else if(e){s("Client-only mode: Rendering app...");const m=new h.BrowserContext(document,d,void 0,i),v=new f.DisposalScope,w=f.withScope(v,()=>e().render(m)),p=T(t,{providers:i});l=()=>{p(),v.dispose(),w(!0)},s("App rendered and islands initialized!")}else s("No SSR content detected, initializing islands only..."),l=T(t,{providers:i});return l}Object.defineProperty(exports,"HYDRATION_ID_ATTR",{enumerable:!0,get:()=>h.HYDRATION_ID_ATTR});exports.HydrationContext=a;exports.ISLAND_ATTR=u;exports.ISLAND_HYDRATE_ATTR=I;exports.ISLAND_OPTIONS_ATTR=S;exports.hydrate=g;exports.hydrateIsland=A;exports.initIslands=T;exports.islandMarker=R;exports.startClient=b;

package/index.d.ts

@@ -1,4 +1,4 @@
-import { Renderable, Providers, ProviderMark, Clear, BrowserContext, DOMContext, HYDRATION_ID_ATTR, HeadlessContext } from '@tempots/dom';
+import { Renderable, Providers, ProviderMark, Clear, BrowserContext, DOMContext, HYDRATION_ID_ATTR, HeadlessContext, HandlerOptions } from '@tempots/dom';
 /**
  * Options for client-side hydration.
  * @public
@@ -69,6 +69,7 @@ export declare class HydrationContext implements DOMContext {
     readonly setText: (text: string) => void;
     readonly getText: () => string;
     readonly makeRef: () => DOMContext;
+    readonly makeMarker: () => DOMContext;
     readonly makePortal: (selector: string | HTMLElement) => DOMContext;
     private readonly appendOrInsert;
     readonly setProvider: <T>(mark: ProviderMark<T>, value: T, onUse: undefined | (() => void)) => DOMContext;
@@ -80,7 +81,7 @@ export declare class HydrationContext implements DOMContext {
     readonly addClasses: (tokens: string[]) => void;
     readonly removeClasses: (tokens: string[]) => void;
     readonly getClasses: () => string[];
-    readonly on: <E>(event: string, listener: (event: E, ctx: HydrationContext) => void, options?: AddEventListenerOptions) => Clear;
+    readonly on: <E>(event: string, listener: (event: E, ctx: DOMContext) => void, options?: HandlerOptions) => Clear;
     readonly isBrowserDOM: () => this is BrowserContext;
     readonly isBrowser: () => this is BrowserContext;
     readonly isHeadlessDOM: () => this is HeadlessContext;
@@ -91,6 +92,13 @@ export declare class HydrationContext implements DOMContext {
         get(): unknown;
         set(value: unknown): void;
     };
+    readonly moveRangeBefore: (startRef: DOMContext, endRef: DOMContext, targetRef: DOMContext) => void;
+    readonly removeRange: (startRef: DOMContext, endRef: DOMContext) => void;
+    removeAllBefore(ref: DOMContext): void;
+    private _detachedParent;
+    private _detachedNext;
+    detach(): void;
+    reattach(): void;
 }
 /**
  * Attribute name for island markers.
@@ -117,7 +125,7 @@ export declare const ISLAND_OPTIONS_ATTR = "data-tempo-options";
  *
  * @public
  */
-export type HydrationStrategy = "immediate" | "idle" | "visible" | {
+export type HydrationStrategy = 'immediate' | 'idle' | 'visible' | {
     media: string;
 };
 /**

package/index.js

@@ -1,34 +1,34 @@
-import { DisposalScope as S, withScope as y } from "@tempots/core";
-import { HYDRATION_ID_ATTR as f, BrowserContext as g } from "@tempots/dom";
-import { HYDRATION_ID_ATTR as q } from "@tempots/dom";
-function D(r, e, t = {}) {
-  const { providers: n = {}, removeMarkers: i = !0 } = t, s = A(e), o = new S(), d = new c(
+import { DisposalScope as S, withScope as T } from "@tempots/core";
+import { HYDRATION_ID_ATTR as p, BrowserContext as x } from "@tempots/dom";
+import { HYDRATION_ID_ATTR as $ } from "@tempots/dom";
+function O(o, e, t = {}) {
+  const { providers: n = {}, removeMarkers: i = !0 } = t, r = y(e), s = new S(), d = new a(
     e.ownerDocument,
     e,
     void 0,
     n,
-    s,
+    r,
     0
-  ), h = y(o, () => r.render(d));
+  ), c = T(s, () => o.render(d));
   return i && N(e), (l = !1) => {
-    o.dispose(), h(l);
+    s.dispose(), c(l);
   };
 }
-function A(r) {
+function y(o) {
   const e = /* @__PURE__ */ new Map();
-  return r.querySelectorAll(`[${f}]`).forEach((n) => {
-    const i = n.getAttribute(f);
+  return o.querySelectorAll(`[${p}]`).forEach((n) => {
+    const i = n.getAttribute(p);
     i && e.set(i, n);
   }), e;
 }
-function N(r) {
-  r.querySelectorAll(`[${f}]`).forEach((t) => {
-    t.removeAttribute(f), t.removeAttribute("data-tts-node");
+function N(o) {
+  o.querySelectorAll(`[${p}]`).forEach((t) => {
+    t.removeAttribute(p), t.removeAttribute("data-tts-node");
   });
 }
-class c {
-  constructor(e, t, n, i, s, o) {
-    this.document = e, this.element = t, this.reference = n, this.providers = i, this.hydrationMap = s, this.childIndex = o;
+class a {
+  constructor(e, t, n, i, r, s) {
+    this.document = e, this.element = t, this.reference = n, this.providers = i, this.hydrationMap = r, this.childIndex = s;
   }
   /**
    * Finds the next child element instead of creating a new one.
@@ -36,12 +36,12 @@ class c {
    */
   makeChildElement = (e, t) => {
     const n = this.element.children;
-    for (let s = this.childIndex; s < n.length; s++) {
-      const o = n[s];
-      if (o.tagName.toLowerCase() === e.toLowerCase())
-        return this.childIndex = s + 1, new c(
+    for (let r = this.childIndex; r < n.length; r++) {
+      const s = n[r];
+      if (s.tagName.toLowerCase() === e.toLowerCase())
+        return this.childIndex = r + 1, new a(
           this.document,
-          o,
+          s,
           void 0,
           this.providers,
           this.hydrationMap,
@@ -52,7 +52,7 @@ class c {
       `Hydration mismatch: could not find element <${e}> in container`
     );
     const i = t !== void 0 ? this.document.createElementNS(t, e) : this.document.createElement(e);
-    return this.appendOrInsert(i), new c(
+    return this.appendOrInsert(i), new a(
       this.document,
       i,
       void 0,
@@ -67,19 +67,19 @@ class c {
   makeChildText = (e) => {
     const t = this.element.childNodes;
     for (let i = this.childIndex; i < t.length; i++) {
-      const s = t[i];
-      if (s.nodeType === Node.TEXT_NODE)
-        return this.childIndex = i + 1, s.textContent !== e && (s.textContent = e), new c(
+      const r = t[i];
+      if (r.nodeType === Node.TEXT_NODE)
+        return this.childIndex = i + 1, r.textContent !== e && (r.textContent = e), new a(
           this.document,
           this.element,
-          s,
+          r,
           this.providers,
           this.hydrationMap,
           this.childIndex
         );
     }
     const n = this.document.createTextNode(e);
-    return this.appendOrInsert(n), new c(
+    return this.appendOrInsert(n), new a(
       this.document,
       this.element,
       n,
@@ -97,7 +97,7 @@ class c {
     for (let n = this.childIndex; n < e.length; n++) {
       const i = e[n];
       if (i.nodeType === Node.TEXT_NODE && (i.textContent === "" || i.textContent === null))
-        return this.childIndex = n + 1, new c(
+        return this.childIndex = n + 1, new a(
           this.document,
           this.element,
           i,
@@ -107,7 +107,7 @@ class c {
         );
     }
     const t = this.document.createTextNode("");
-    return this.appendOrInsert(t), new c(
+    return this.appendOrInsert(t), new a(
       this.document,
       this.element,
       t,
@@ -116,13 +116,12 @@ class c {
       this.childIndex
     );
   };
+  makeMarker = () => this.makeRef();
   makePortal = (e) => {
     const t = typeof e == "string" ? this.document.querySelector(e) : e;
     if (t == null)
-      throw new Error(
-        `Cannot find element by selector for portal: ${e}`
-      );
-    return new c(
+      throw new Error(`Cannot find element by selector for portal: ${e}`);
+    return new a(
       this.document,
       t,
       void 0,
@@ -134,7 +133,7 @@ class c {
   appendOrInsert = (e) => {
     this.reference === void 0 ? this.element.appendChild(e) : this.element.insertBefore(e, this.reference);
   };
-  setProvider = (e, t, n) => new c(
+  setProvider = (e, t, n) => new a(
     this.document,
     this.element,
     this.reference,
@@ -159,9 +158,9 @@ class c {
   };
   getClasses = () => Array.from(this.element.classList);
   on = (e, t, n) => {
-    const i = (s) => t(s, this);
-    return this.element.addEventListener(e, i, n), (s) => {
-      s && this.element.removeEventListener(e, i, n);
+    const i = (r) => t(r, this);
+    return this.element.addEventListener(e, i, n), (r) => {
+      r && this.element.removeEventListener(e, i, n);
     };
   };
   // HydrationContext runs in a browser environment, so isBrowser() returns true
@@ -184,21 +183,54 @@ class c {
       }
     };
   };
+  moveRangeBefore = (e, t, n) => {
+    const i = e.reference, r = t.reference, s = n.reference, d = this.element;
+    let c = i;
+    for (; c !== null; ) {
+      const l = c.nextSibling;
+      if (d.insertBefore(c, s), c === r) break;
+      c = l;
+    }
+  };
+  removeRange = (e, t) => {
+    const n = e.reference, i = t.reference, r = this.element;
+    let s = n;
+    for (; s !== null; ) {
+      const d = s.nextSibling;
+      if (r.removeChild(s), s === i) break;
+      s = d;
+    }
+  };
+  removeAllBefore(e) {
+    const t = e.reference, n = this.element;
+    if (!n.firstChild || n.firstChild === t) return;
+    const i = this.document.createRange();
+    i.setStartBefore(n.firstChild), i.setEndBefore(t), i.deleteContents();
+  }
+  _detachedParent = null;
+  _detachedNext = null;
+  detach() {
+    const e = this.element;
+    e.parentNode && (this._detachedParent = e.parentNode, this._detachedNext = e.nextSibling, e.remove());
+  }
+  reattach() {
+    this._detachedParent && (this._detachedParent.insertBefore(this.element, this._detachedNext), this._detachedParent = null, this._detachedNext = null);
+  }
 }
-const u = "data-tempo-island", I = "data-tempo-hydrate", T = "data-tempo-options";
-function x(r, e, t, n = {}) {
-  r.innerHTML = "";
-  const i = new g(
-    r.ownerDocument,
-    r,
+const u = "data-tempo-island", I = "data-tempo-hydrate", g = "data-tempo-options";
+function A(o, e, t, n = {}) {
+  o.innerHTML = "";
+  const i = new x(
+    o.ownerDocument,
+    o,
     void 0,
     n.providers ?? {}
-  ), s = new S(), o = y(s, () => e(t).render(i));
+  ), r = new S(), s = T(r, () => e(t).render(i));
   return (d = !1) => {
-    s.dispose(), o(d);
+    r.dispose(), s(d);
   };
 }
-function E(r, e, t) {
+function b(o, e, t) {
   if (e === "immediate")
     return t(), () => {
     };
@@ -213,115 +245,115 @@ function E(r, e, t) {
   if (e === "visible") {
     const n = new IntersectionObserver(
       (i) => {
-        for (const s of i)
-          if (s.isIntersecting) {
+        for (const r of i)
+          if (r.isIntersecting) {
             n.disconnect(), t();
             break;
           }
       },
       { rootMargin: "50px" }
     );
-    return n.observe(r), () => n.disconnect();
+    return n.observe(o), () => n.disconnect();
   }
   if (typeof e == "object" && "media" in e) {
     const n = window.matchMedia(e.media);
     if (n.matches)
       return t(), () => {
       };
-    const i = (s) => {
-      s.matches && (n.removeEventListener("change", i), t());
+    const i = (r) => {
+      r.matches && (n.removeEventListener("change", i), t());
     };
     return n.addEventListener("change", i), () => n.removeEventListener("change", i);
   }
   return t(), () => {
   };
 }
-function M(r) {
-  return !r || r === "immediate" || r === "load" ? "immediate" : r === "idle" ? "idle" : r === "visible" ? "visible" : r.startsWith("media:") ? { media: r.slice(6).trim() } : "immediate";
+function E(o) {
+  return !o || o === "immediate" || o === "load" ? "immediate" : o === "idle" ? "idle" : o === "visible" ? "visible" : o.startsWith("media:") ? { media: o.slice(6).trim() } : "immediate";
 }
-function w(r, e = {}) {
+function w(o, e = {}) {
   const t = [];
   return document.querySelectorAll(`[${u}]`).forEach((i) => {
-    const s = i, o = s.getAttribute(u);
-    if (!o) {
-      console.warn("[Tempo Islands] Element missing island name:", s);
+    const r = i, s = r.getAttribute(u);
+    if (!s) {
+      console.warn("[Tempo Islands] Element missing island name:", r);
       return;
     }
-    const d = r[o];
+    const d = o[s];
     if (!d) {
       console.warn(
-        `[Tempo Islands] Component "${o}" not found in registry`
+        `[Tempo Islands] Component "${s}" not found in registry`
       );
       return;
     }
-    const h = s.getAttribute(T);
+    const c = r.getAttribute(g);
     let l = {};
-    if (h)
+    if (c)
       try {
-        l = JSON.parse(h);
+        l = JSON.parse(c);
       } catch (m) {
         console.warn(
-          `[Tempo Islands] Failed to parse options for "${o}":`,
+          `[Tempo Islands] Failed to parse options for "${s}":`,
           m
         );
       }
-    const a = s.getAttribute(I), p = M(a), v = E(s, p, () => {
-      const m = x(
-        s,
+    const h = r.getAttribute(I), f = E(h), v = b(r, f, () => {
+      const m = A(
+        r,
         d,
         l,
         e
       );
-      t.push(m), s.removeAttribute(u), s.removeAttribute(I), s.removeAttribute(T);
+      t.push(m), r.removeAttribute(u), r.removeAttribute(I), r.removeAttribute(g);
     });
     t.push(v);
   }), () => {
     t.forEach((i) => i());
   };
 }
-function L(r, e = {}, t = "visible") {
+function R(o, e = {}, t = "visible") {
   const n = typeof t == "object" ? `media:${t.media}` : t;
   return [
-    { name: u, value: r },
-    { name: T, value: JSON.stringify(e) },
+    { name: u, value: o },
+    { name: g, value: JSON.stringify(e) },
     { name: I, value: n }
   ];
 }
-function C(r) {
+function D(o) {
   const {
     app: e,
     islands: t,
     container: n = "#app",
     providers: i = {},
-    debug: s = !1
-  } = r, o = s ? (a) => console.log(`[Tempo] ${a}`) : () => {
+    debug: r = !1
+  } = o, s = r ? (h) => console.log(`[Tempo] ${h}`) : () => {
   }, d = typeof n == "string" ? document.querySelector(n) : n;
   if (!d)
     return console.error(`[Tempo] Could not find container: ${typeof n == "string" ? n : "(element)"}`), () => {
     };
-  const h = d.querySelector(`[${u}]`) !== null;
+  const c = d.querySelector(`[${u}]`) !== null;
   let l;
-  if (h)
-    o("SSR mode: Initializing islands..."), l = w(t, { providers: i }), o("Islands initialized! Static content stays static.");
+  if (c)
+    s("SSR mode: Initializing islands..."), l = w(t, { providers: i }), s("Islands initialized! Static content stays static.");
   else if (e) {
-    o("Client-only mode: Rendering app...");
-    const a = new g(document, d, void 0, i), p = new S(), v = y(p, () => e().render(a)), m = w(t, { providers: i });
+    s("Client-only mode: Rendering app...");
+    const h = new x(document, d, void 0, i), f = new S(), v = T(f, () => e().render(h)), m = w(t, { providers: i });
     l = () => {
-      m(), p.dispose(), v(!0);
-    }, o("App rendered and islands initialized!");
+      m(), f.dispose(), v(!0);
+    }, s("App rendered and islands initialized!");
   } else
-    o("No SSR content detected, initializing islands only..."), l = w(t, { providers: i });
+    s("No SSR content detected, initializing islands only..."), l = w(t, { providers: i });
   return l;
 }
 export {
-  q as HYDRATION_ID_ATTR,
-  c as HydrationContext,
+  $ as HYDRATION_ID_ATTR,
+  a as HydrationContext,
   u as ISLAND_ATTR,
   I as ISLAND_HYDRATE_ATTR,
-  T as ISLAND_OPTIONS_ATTR,
-  D as hydrate,
-  x as hydrateIsland,
+  g as ISLAND_OPTIONS_ATTR,
+  O as hydrate,
+  A as hydrateIsland,
   w as initIslands,
-  L as islandMarker,
-  C as startClient
+  R as islandMarker,
+  D as startClient
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tempots/client",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "type": "module",
   "main": "./index.cjs",
   "module": "./index.js",
@@ -34,7 +34,7 @@
     "url": "git+https://github.com/fponticelli/tempots.git"
   },
   "peerDependencies": {
-    "@tempots/core": "^2.1.0",
-    "@tempots/dom": "^36.0.0"
+    "@tempots/core": "^3.0.0",
+    "@tempots/dom": "^37.0.0"
   }
 }