hono-decks 1.3.0 → 1.4.1

package/README.ja.md

@@ -294,7 +294,7 @@ export default defineConfig({
 });
 ```
 
-pluginはVite起動前にcompileし、deck rootと`hono-decks.config.ts`をVite watcherへ登録します。再compileに成功すると、安全にislandを維持できる場合はスライドの内容だけを更新し、現在のスライド・ステップとislandの状態を保ちます。islandのコード、props、Markdownのコンテキスト、構造などが変わり、安全に引き継げない場合は表示ページを再読み込みし、スライドとステップを復元します。どちらの構成でも通常の`bun run dev`だけでauthoringできます。
+pluginはVite起動前にcompileし、deck rootと`hono-decks.config.ts`をVite watcherへ登録します。再compileに成功すると、既存のislandを安全に識別できる場合は表示ページを再読み込みせずに内容を更新します。対応するprops・Markdownコンテキストの変更、別々のislandの並べ替え・追加・削除でも状態を維持し、現在のスライド・ステップを保ちます。islandの部品やその他のクライアントコードを編集すると、表示用iframeを再読み込みしてislandの状態をリセットします。viewerの枠は維持し、スライドとステップを復元します。同一islandの区別がつかない場合、アダプターが更新時の初期化に対応していない場合、取得に失敗した場合なども同じ動作になります。どちらの構成でも通常の`bun run dev`だけでauthoringできます。
 
 ## Runtime configuration
 

package/README.md

@@ -295,7 +295,7 @@ export default defineConfig({
 });
 ~~~
 
-The plugin compiles before Vite starts and adds the deck root and <code>hono-decks.config.ts</code> to the Vite watcher. After a successful recompile, open presentation pages update their deck content without reloading when it is safe to retain the existing islands. The current slide, step, and island state are preserved. If the update cannot safely retain islands (for example, their code, props, Markdown context, or structure changed), the presentation page reloads instead and restores the slide and step. In both setups, the application's normal <code>dev</code> command is enough for authoring.
+The plugin compiles before Vite starts and adds the deck root and <code>hono-decks.config.ts</code> to the Vite watcher. After a successful recompile, presentation pages update without reloading when existing islands can be identified safely. Their state survives supported prop and Markdown context changes, reordering, and the addition or removal of distinct islands. The current slide and step are retained. Editing an island component or other client code reloads the presentation iframe and resets island state; the viewer remains open and the slide and step are restored. Unsafe updates, such as ambiguous duplicate islands, unsupported adapter initialization, or a failed fetch, use the same fallback. In both setups, the application's normal <code>dev</code> command is enough for authoring.
 
 ## Runtime configuration
 

package/dist/adapters/hono-markdown.js

@@ -31,8 +31,37 @@ function createMarkdownAdapter({ cwd, options }) {
 function emitMarkdownClient(islands, runtime) {
 	if (!islands.length) return "";
 	const literal = (value) => JSON.stringify(value).replace(/</g, "\\u003c");
+	const isVoid = runtime.startsWith("void-plugin-hono-jsx/");
+	const contextModule = isVoid ? "void-plugin-hono-jsx/markdown" : "@ts-76/hono-markdown";
+	const scheduler = isVoid ? "void/pages-client" : "@ts-76/hono-markdown/client";
+	const schedulerName = isVoid ? "scheduleHydration" : "scheduleMarkdownIsland";
 	return `import { hydrateMarkdownIslands } from ${literal(runtime)};
+import { ${schedulerName} as scheduleIsland } from ${literal(scheduler)};
+import { MarkdownContext } from ${literal(contextModule)};
+import { jsx as liveJsx } from "hono/jsx/dom/jsx-runtime";
+import { flushSync as flushLiveSync, useState as useLiveState } from "hono/jsx/dom";
+function hydrateDeckMarkdownIslands() {
 hydrateMarkdownIslands({ ${islands.map((island) => `${literal(island.id)}: () => import(${literal(island.modulePath)})`).join(",")} }, {
+  schedule(element, loader, props, strategy, mount) {
+    return scheduleIsland(element, loader, props, strategy, (target, module, initialProps) => {
+      const live = window.__honoDecksLive;
+      if (!live || !module || typeof module.default !== 'function') return mount(target, module, initialProps);
+      const Component = module.default;
+      function LiveMarkdownIsland(componentProps) {
+        const [current, setCurrent] = useLiveState({
+          props: componentProps,
+          context: JSON.parse(element.closest('[data-hono-md-context]')?.getAttribute('data-hono-md-context') || '{}'),
+        });
+        const [active, setActive] = useLiveState(true);
+        live.register(element, setCurrent, () => flushLiveSync(() => setActive(false)));
+        return active ? liveJsx(MarkdownContext.Provider, {
+          value: current.context,
+          children: liveJsx(Component, current.props),
+        }) : null;
+      }
+      return mount(target, { ...module, default: LiveMarkdownIsland }, initialProps);
+    });
+  },
   ready(element, start) {
     const slide = element.closest('section[data-slide-state]');
     if (!slide || slide.dataset.slideState === 'active') { start(); return; }
@@ -41,7 +70,10 @@ hydrateMarkdownIslands({ ${islands.map((island) => `${literal(island.id)}: () =>
     });
     observer.observe(slide, { attributes: true, attributeFilter: ['data-slide-state'] });
   }
-});`;
+});
+}
+hydrateDeckMarkdownIslands();
+if (window.__honoDecksLive) window.__honoDecksLive.registerHydrator(hydrateDeckMarkdownIslands);`;
 }
 //#endregion
 export { createHonoMarkdownAdapter, createMarkdownAdapter };

package/dist/advanced.js

@@ -805,9 +805,16 @@ function renderLiveReloadScript(eventsPath, nonce) {
 	return `<script${documentNonceAttribute(nonce)}>
 (() => {
   const events = new EventSource(${JSON.stringify(eventsPath)});
+  const scriptNonce = document.currentScript?.nonce;
   let running = false;
   let pending = false;
   const selector = "[data-hono-decks-island],[data-hono-md-island]";
+  const islandUpdaters = new WeakMap();
+  const hydrators = new Set();
+  window.__honoDecksLive = {
+    register: (element, update, dispose) => islandUpdaters.set(element, { update, dispose }),
+    registerHydrator: (hydrate) => hydrators.add(hydrate),
+  };
   const clientSelector = "script[data-hono-decks-client-entry]";
   const clientText = async (url) => {
     if (!url) return "";
@@ -820,12 +827,12 @@ function renderLiveReloadScript(eventsPath, nonce) {
     : Promise.resolve();
   let clientSnapshot = domReady.then(() => clientText(document.querySelector(clientSelector)?.src)).catch(() => null);
 
-  function signature(element) {
+  function signature(element, includeContext = true, includeProps = true) {
     const attributes = element.hasAttribute("data-hono-md-island")
       ? ["data-hono-md-island", "data-hono-md-hydrate", "data-hono-md-props"]
       : ["data-hono-decks-island", "data-hono-decks-props"];
-    return JSON.stringify([attributes.map((name) => element.getAttribute(name)),
-      element.closest("[data-hono-md-context]")?.getAttribute("data-hono-md-context") ?? null]);
+    return JSON.stringify([attributes.map((name) => !includeProps && name.endsWith("-props") ? null : element.getAttribute(name)),
+      includeContext ? element.closest("[data-hono-md-context]")?.getAttribute("data-hono-md-context") ?? null : null]);
   }
 
   async function update() {
@@ -843,34 +850,142 @@ function renderLiveReloadScript(eventsPath, nonce) {
     if (!newSlides.length) throw new Error("Empty deck");
     // Scripts parsed from fetched HTML are inert; reload so their behavior is not lost.
     if (currentDeck.querySelector("script") || nextDeck.querySelector("script")) throw new Error("Deck contains scripts");
-    const oldIslands = oldSlides.flatMap((slide) => Array.from(slide.querySelectorAll(selector)));
+    const collect = (slides) => slides.flatMap((slide, slideIndex) =>
+      Array.from(slide.querySelectorAll(selector)).map((element, position) => ({ element, slideIndex, position })));
+    const oldItems = collect(oldSlides);
+    const newItems = collect(newSlides);
     const nextScript = next.querySelector(clientSelector);
-    const nextClient = await clientText(nextScript?.getAttribute("src"));
+    const fetchedClient = await clientText(nextScript?.getAttribute("src"));
     const previousClient = await clientSnapshot;
     if (previousClient === null) throw new Error("Initial client entry fetch failed");
-    // Changed client code cannot safely replace a running component while retaining its state.
-    if (oldIslands.length && previousClient !== nextClient) throw new Error("Client code changed");
+    // Keep the loaded registry when the last island disappears; it can dispose
+    // that island and initialize it again if it is reintroduced later.
+    const nextClient = !nextScript && !newItems.length ? previousClient : fetchedClient;
+    // A changed client bundle could contain new implementations for running islands.
+    if (oldItems.length && previousClient !== nextClient) throw new Error("Client code changed");
+    const needsEntry = !document.querySelector(clientSelector) && Boolean(nextScript);
+    if (newItems.length && !nextScript) throw new Error("New islands require a client entry");
+    if (!needsEntry && previousClient !== nextClient) throw new Error("Client code changed");
+
+    const duplicateKeys = new Set([...oldItems, ...newItems].map((item) => signature(item.element, false)));
+    for (const key of duplicateKeys) {
+      const before = oldItems.filter((item) => signature(item.element, false) === key);
+      const after = newItems.filter((item) => signature(item.element, false) === key);
+      if (before.length <= 1 && after.length <= 1) continue;
+      if (before.length !== after.length || before.some((item, index) =>
+        item.slideIndex !== after[index].slideIndex || item.position !== after[index].position))
+        throw new Error("Ambiguous duplicate islands");
+    }
     const pairs = [];
-    if (oldIslands.length && oldSlides.length !== newSlides.length) throw new Error("Slide structure changed");
-    for (let i = 0; i < oldSlides.length && i < newSlides.length; i++) {
-      const before = Array.from(oldSlides[i].querySelectorAll(selector));
-      const after = Array.from(newSlides[i].querySelectorAll(selector));
-      if (before.length !== after.length) throw new Error("Island structure changed");
-      for (let j = 0; j < before.length; j++) {
-        if (signature(before[j]) !== signature(after[j])) throw new Error("Island properties changed");
-        // Deferred Markdown islands observe their original slide. Reload rather than strand the observer.
-        if (before[j].hasAttribute("data-hono-md-island") && !before[j].hasAttribute("data-hono-md-mounted"))
-          throw new Error("Island is pending hydration");
-        pairs.push([before[j], after[j]]);
+    const remainingOld = new Set(oldItems);
+    const remainingNew = new Set(newItems);
+    function pair(oldItem, newItem) {
+      remainingOld.delete(oldItem);
+      remainingNew.delete(newItem);
+      pairs.push([oldItem, newItem]);
+    }
+    // Exact matches can move between slides. Match only unique instances so
+    // duplicate islands cannot accidentally inherit each other's state.
+    for (const oldItem of oldItems) {
+      const key = signature(oldItem.element, false);
+      const oldMatches = Array.from(remainingOld).filter((item) => signature(item.element, false) === key);
+      const newMatches = Array.from(remainingNew).filter((item) => signature(item.element, false) === key);
+      if (oldMatches.length === 1 && newMatches.length === 1) pair(oldItem, newMatches[0]);
+    }
+    // Changed props can be reconciled if there is only one island of that type.
+    for (const oldItem of Array.from(remainingOld)) {
+      const key = signature(oldItem.element, false, false);
+      const oldMatches = Array.from(remainingOld).filter((item) => signature(item.element, false, false) === key);
+      const newMatches = Array.from(remainingNew).filter((item) => signature(item.element, false, false) === key);
+      if (oldMatches.length === 1 && newMatches.length === 1 &&
+          oldItem.slideIndex === newMatches[0].slideIndex && oldItem.position === newMatches[0].position)
+        pair(oldItem, newMatches[0]);
+    }
+    // Existing duplicate instances remain safe only when their positions and
+    // identity attributes are unchanged; ambiguous structural edits reload.
+    for (const oldItem of Array.from(remainingOld)) {
+      const newItem = Array.from(remainingNew).find((item) => item.slideIndex === oldItem.slideIndex && item.position === oldItem.position);
+      if (newItem && signature(oldItem.element, false) === signature(newItem.element, false)) pair(oldItem, newItem);
+    }
+    for (const oldItem of remainingOld) {
+      const key = signature(oldItem.element, false, false);
+      if (Array.from(remainingNew).some((item) => signature(item.element, false, false) === key))
+        throw new Error("Ambiguous island identity");
+    }
+    const removals = [];
+    for (const oldItem of remainingOld) {
+      const entry = islandUpdaters.get(oldItem.element);
+      if (!entry?.dispose) throw new Error("Cannot safely dispose island");
+      removals.push(entry.dispose);
+    }
+    const updates = [];
+    let preserveSlides = false;
+    for (const [oldItem, newItem] of pairs) {
+      const before = oldItem.element;
+      const after = newItem.element;
+      const pendingMarkdown = before.hasAttribute("data-hono-md-island") && !before.hasAttribute("data-hono-md-mounted");
+      if (pendingMarkdown) {
+        if (oldSlides.length !== newSlides.length || oldItem.slideIndex !== newItem.slideIndex)
+          throw new Error("Pending island moved between slides");
+        preserveSlides = true;
+      }
+      if (signature(before, !pendingMarkdown) !== signature(after, !pendingMarkdown)) {
+        const entry = islandUpdaters.get(before);
+        if (!entry?.update || signature(before, false, false) !== signature(after, false, false))
+          throw new Error("Island properties changed");
+        const markdown = before.hasAttribute("data-hono-md-island");
+        const propsAttribute = markdown ? "data-hono-md-props" : "data-hono-decks-props";
+        const rawProps = after.getAttribute(propsAttribute) || "{}";
+        const props = JSON.parse(rawProps);
+        const context = markdown ? JSON.parse(after.closest("[data-hono-md-context]")?.getAttribute("data-hono-md-context") || "{}") : undefined;
+        updates.push([before, entry.update, propsAttribute, rawProps, markdown ? { props, context } : props]);
+      }
+    }
+    for (const dispose of removals) dispose();
+    for (const [oldItem, newItem] of pairs) newItem.element.replaceWith(oldItem.element);
+    if (preserveSlides) {
+      for (let i = 0; i < oldSlides.length; i++) {
+        const oldSlide = oldSlides[i];
+        const newSlide = newSlides[i];
+        for (const attribute of Array.from(oldSlide.attributes)) oldSlide.removeAttribute(attribute.name);
+        for (const attribute of Array.from(newSlide.attributes)) oldSlide.setAttribute(attribute.name, attribute.value);
+        oldSlide.replaceChildren(...newSlide.childNodes);
+        newSlide.replaceWith(oldSlide);
       }
     }
-    if (!oldIslands.length && nextDeck.querySelector(selector)) throw new Error("New islands require initialization");
-    for (const [oldIsland, newIsland] of pairs) newIsland.replaceWith(oldIsland);
     currentDeck.replaceChildren(...nextDeck.childNodes);
+    for (const [island, update, propsAttribute, rawProps, value] of updates) {
+      island.setAttribute(propsAttribute, rawProps);
+      update(value);
+    }
     style.textContent = nextStyle.textContent;
     document.title = next.title;
     clientSnapshot = Promise.resolve(nextClient);
     runtime.refresh();
+    if (remainingNew.size) {
+      if (needsEntry) {
+        const url = new URL(nextScript.getAttribute("src"), location.href);
+        if (url.origin !== location.origin) throw new Error("Cross-origin client entry");
+        url.searchParams.set("hono-decks-update", String(Date.now()));
+        const script = document.createElement("script");
+        script.type = "module";
+        script.setAttribute("data-hono-decks-client-entry", "");
+        if (scriptNonce) script.nonce = scriptNonce;
+        script.src = url.href;
+        await new Promise((resolve, reject) => {
+          script.onload = resolve;
+          script.onerror = () => reject(new Error("Client entry failed"));
+          document.body.appendChild(script);
+        });
+      } else {
+        for (const hydrate of hydrators) hydrate();
+      }
+      for (const item of remainingNew) {
+        const element = item.element;
+        if (!element.hasAttribute("data-hono-decks-live-mounted") && !element.hasAttribute("data-hono-md-scheduled"))
+          throw new Error("New island did not initialize");
+      }
+    }
   }
 
   async function onUpdate() {
@@ -1272,12 +1387,15 @@ function renderPresentationScript(nonce) {
     await document.documentElement.requestFullscreen?.();
   }
 
+  const boundSlides = new WeakSet();
   function bindSlideClicks() {
-    slides.forEach((slide, slideIndex) => {
+    slides.forEach((slide) => {
+      if (boundSlides.has(slide)) return;
+      boundSlides.add(slide);
       slide.addEventListener("click", () => {
         if (!document.body.hasAttribute("data-overview-mode")) return;
         document.body.removeAttribute("data-overview-mode");
-        show(slideIndex);
+        show(slides.indexOf(slide));
       });
     });
   }

package/dist/bin.js

@@ -1660,8 +1660,37 @@ async function createHonoMarkdownAdapter(cwd, legacy = false, options) {
 function emitMarkdownClient(islands, runtime) {
 	if (!islands.length) return "";
 	const literal = (value) => JSON.stringify(value).replace(/</g, "\\u003c");
+	const isVoid = runtime.startsWith("void-plugin-hono-jsx/");
+	const contextModule = isVoid ? "void-plugin-hono-jsx/markdown" : "@ts-76/hono-markdown";
+	const scheduler = isVoid ? "void/pages-client" : "@ts-76/hono-markdown/client";
+	const schedulerName = isVoid ? "scheduleHydration" : "scheduleMarkdownIsland";
 	return `import { hydrateMarkdownIslands } from ${literal(runtime)};
+import { ${schedulerName} as scheduleIsland } from ${literal(scheduler)};
+import { MarkdownContext } from ${literal(contextModule)};
+import { jsx as liveJsx } from "hono/jsx/dom/jsx-runtime";
+import { flushSync as flushLiveSync, useState as useLiveState } from "hono/jsx/dom";
+function hydrateDeckMarkdownIslands() {
 hydrateMarkdownIslands({ ${islands.map((island) => `${literal(island.id)}: () => import(${literal(island.modulePath)})`).join(",")} }, {
+  schedule(element, loader, props, strategy, mount) {
+    return scheduleIsland(element, loader, props, strategy, (target, module, initialProps) => {
+      const live = window.__honoDecksLive;
+      if (!live || !module || typeof module.default !== 'function') return mount(target, module, initialProps);
+      const Component = module.default;
+      function LiveMarkdownIsland(componentProps) {
+        const [current, setCurrent] = useLiveState({
+          props: componentProps,
+          context: JSON.parse(element.closest('[data-hono-md-context]')?.getAttribute('data-hono-md-context') || '{}'),
+        });
+        const [active, setActive] = useLiveState(true);
+        live.register(element, setCurrent, () => flushLiveSync(() => setActive(false)));
+        return active ? liveJsx(MarkdownContext.Provider, {
+          value: current.context,
+          children: liveJsx(Component, current.props),
+        }) : null;
+      }
+      return mount(target, { ...module, default: LiveMarkdownIsland }, initialProps);
+    });
+  },
   ready(element, start) {
     const slide = element.closest('section[data-slide-state]');
     if (!slide || slide.dataset.slideState === 'active') { start(); return; }
@@ -1670,7 +1699,10 @@ hydrateMarkdownIslands({ ${islands.map((island) => `${literal(island.id)}: () =>
     });
     observer.observe(slide, { attributes: true, attributeFilter: ['data-slide-state'] });
   }
-});`;
+});
+}
+hydrateDeckMarkdownIslands();
+if (window.__honoDecksLive) window.__honoDecksLive.registerHydrator(hydrateDeckMarkdownIslands);`;
 }
 //#endregion
 //#region src/node/markdown-adapter.ts
@@ -1719,11 +1751,15 @@ async function emitClientEntryModule(input) {
 import { hydrateSlideIslands } from "hono-decks/client";
 ${imports.join("\n")}
 
-hydrateSlideIslands({
-  components: {
-    ${registrations.join(",\n    ")}
-  }
-});
+function hydrateDeckIslands() {
+  hydrateSlideIslands({
+    components: {
+      ${registrations.join(",\n      ")}
+    }
+  });
+}
+hydrateDeckIslands();
+if (window.__honoDecksLive) window.__honoDecksLive.registerHydrator(hydrateDeckIslands);
 `,
 			resolveDir: input.cwd,
 			sourcefile: "hono-decks-client-entry.tsx",

package/dist/cli.js

@@ -1659,8 +1659,37 @@ async function createHonoMarkdownAdapter(cwd, legacy = false, options) {
 function emitMarkdownClient(islands, runtime) {
 	if (!islands.length) return "";
 	const literal = (value) => JSON.stringify(value).replace(/</g, "\\u003c");
+	const isVoid = runtime.startsWith("void-plugin-hono-jsx/");
+	const contextModule = isVoid ? "void-plugin-hono-jsx/markdown" : "@ts-76/hono-markdown";
+	const scheduler = isVoid ? "void/pages-client" : "@ts-76/hono-markdown/client";
+	const schedulerName = isVoid ? "scheduleHydration" : "scheduleMarkdownIsland";
 	return `import { hydrateMarkdownIslands } from ${literal(runtime)};
+import { ${schedulerName} as scheduleIsland } from ${literal(scheduler)};
+import { MarkdownContext } from ${literal(contextModule)};
+import { jsx as liveJsx } from "hono/jsx/dom/jsx-runtime";
+import { flushSync as flushLiveSync, useState as useLiveState } from "hono/jsx/dom";
+function hydrateDeckMarkdownIslands() {
 hydrateMarkdownIslands({ ${islands.map((island) => `${literal(island.id)}: () => import(${literal(island.modulePath)})`).join(",")} }, {
+  schedule(element, loader, props, strategy, mount) {
+    return scheduleIsland(element, loader, props, strategy, (target, module, initialProps) => {
+      const live = window.__honoDecksLive;
+      if (!live || !module || typeof module.default !== 'function') return mount(target, module, initialProps);
+      const Component = module.default;
+      function LiveMarkdownIsland(componentProps) {
+        const [current, setCurrent] = useLiveState({
+          props: componentProps,
+          context: JSON.parse(element.closest('[data-hono-md-context]')?.getAttribute('data-hono-md-context') || '{}'),
+        });
+        const [active, setActive] = useLiveState(true);
+        live.register(element, setCurrent, () => flushLiveSync(() => setActive(false)));
+        return active ? liveJsx(MarkdownContext.Provider, {
+          value: current.context,
+          children: liveJsx(Component, current.props),
+        }) : null;
+      }
+      return mount(target, { ...module, default: LiveMarkdownIsland }, initialProps);
+    });
+  },
   ready(element, start) {
     const slide = element.closest('section[data-slide-state]');
     if (!slide || slide.dataset.slideState === 'active') { start(); return; }
@@ -1669,7 +1698,10 @@ hydrateMarkdownIslands({ ${islands.map((island) => `${literal(island.id)}: () =>
     });
     observer.observe(slide, { attributes: true, attributeFilter: ['data-slide-state'] });
   }
-});`;
+});
+}
+hydrateDeckMarkdownIslands();
+if (window.__honoDecksLive) window.__honoDecksLive.registerHydrator(hydrateDeckMarkdownIslands);`;
 }
 //#endregion
 //#region src/node/markdown-adapter.ts
@@ -1718,11 +1750,15 @@ async function emitClientEntryModule(input) {
 import { hydrateSlideIslands } from "hono-decks/client";
 ${imports.join("\n")}
 
-hydrateSlideIslands({
-  components: {
-    ${registrations.join(",\n    ")}
-  }
-});
+function hydrateDeckIslands() {
+  hydrateSlideIslands({
+    components: {
+      ${registrations.join(",\n      ")}
+    }
+  });
+}
+hydrateDeckIslands();
+if (window.__honoDecksLive) window.__honoDecksLive.registerHydrator(hydrateDeckIslands);
 `,
 			resolveDir: input.cwd,
 			sourcefile: "hono-decks-client-entry.tsx",

package/dist/client.js

@@ -1,4 +1,4 @@
-import { render } from "hono/jsx/dom";
+import { flushSync, render, useState } from "hono/jsx/dom";
 import { jsx } from "hono/jsx/dom/jsx-runtime";
 //#region src/client/islands.ts
 function hydrateSlideIslands(input) {
@@ -8,7 +8,19 @@ function hydrateSlideIslands(input) {
 		if (!name) continue;
 		const component = input.components[name];
 		if (!component) continue;
-		render(jsx(component, parseIslandProps(island.dataset.honoDecksProps)), island);
+		const props = parseIslandProps(island.dataset.honoDecksProps);
+		const live = window.__honoDecksLive;
+		if (live) {
+			if (island.dataset.honoDecksLiveMounted) continue;
+			function LiveIsland() {
+				const [currentProps, setCurrentProps] = useState(props);
+				const [active, setActive] = useState(true);
+				live.register(island, setCurrentProps, () => flushSync(() => setActive(false)));
+				return active ? jsx(component, currentProps) : null;
+			}
+			render(jsx(LiveIsland, {}), island);
+			island.dataset.honoDecksLiveMounted = "true";
+		} else render(jsx(component, props), island);
 	}
 }
 function parseIslandProps(value) {

package/dist/node.js

@@ -1852,8 +1852,37 @@ async function createHonoMarkdownAdapter(cwd, legacy = false, options) {
 function emitMarkdownClient(islands, runtime) {
 	if (!islands.length) return "";
 	const literal = (value) => JSON.stringify(value).replace(/</g, "\\u003c");
+	const isVoid = runtime.startsWith("void-plugin-hono-jsx/");
+	const contextModule = isVoid ? "void-plugin-hono-jsx/markdown" : "@ts-76/hono-markdown";
+	const scheduler = isVoid ? "void/pages-client" : "@ts-76/hono-markdown/client";
+	const schedulerName = isVoid ? "scheduleHydration" : "scheduleMarkdownIsland";
 	return `import { hydrateMarkdownIslands } from ${literal(runtime)};
+import { ${schedulerName} as scheduleIsland } from ${literal(scheduler)};
+import { MarkdownContext } from ${literal(contextModule)};
+import { jsx as liveJsx } from "hono/jsx/dom/jsx-runtime";
+import { flushSync as flushLiveSync, useState as useLiveState } from "hono/jsx/dom";
+function hydrateDeckMarkdownIslands() {
 hydrateMarkdownIslands({ ${islands.map((island) => `${literal(island.id)}: () => import(${literal(island.modulePath)})`).join(",")} }, {
+  schedule(element, loader, props, strategy, mount) {
+    return scheduleIsland(element, loader, props, strategy, (target, module, initialProps) => {
+      const live = window.__honoDecksLive;
+      if (!live || !module || typeof module.default !== 'function') return mount(target, module, initialProps);
+      const Component = module.default;
+      function LiveMarkdownIsland(componentProps) {
+        const [current, setCurrent] = useLiveState({
+          props: componentProps,
+          context: JSON.parse(element.closest('[data-hono-md-context]')?.getAttribute('data-hono-md-context') || '{}'),
+        });
+        const [active, setActive] = useLiveState(true);
+        live.register(element, setCurrent, () => flushLiveSync(() => setActive(false)));
+        return active ? liveJsx(MarkdownContext.Provider, {
+          value: current.context,
+          children: liveJsx(Component, current.props),
+        }) : null;
+      }
+      return mount(target, { ...module, default: LiveMarkdownIsland }, initialProps);
+    });
+  },
   ready(element, start) {
     const slide = element.closest('section[data-slide-state]');
     if (!slide || slide.dataset.slideState === 'active') { start(); return; }
@@ -1862,7 +1891,10 @@ hydrateMarkdownIslands({ ${islands.map((island) => `${literal(island.id)}: () =>
     });
     observer.observe(slide, { attributes: true, attributeFilter: ['data-slide-state'] });
   }
-});`;
+});
+}
+hydrateDeckMarkdownIslands();
+if (window.__honoDecksLive) window.__honoDecksLive.registerHydrator(hydrateDeckMarkdownIslands);`;
 }
 //#endregion
 //#region src/node/markdown-adapter.ts
@@ -2001,11 +2033,15 @@ async function emitClientEntryModule(input) {
 import { hydrateSlideIslands } from "hono-decks/client";
 ${imports.join("\n")}
 
-hydrateSlideIslands({
-  components: {
-    ${registrations.join(",\n    ")}
-  }
-});
+function hydrateDeckIslands() {
+  hydrateSlideIslands({
+    components: {
+      ${registrations.join(",\n      ")}
+    }
+  });
+}
+hydrateDeckIslands();
+if (window.__honoDecksLive) window.__honoDecksLive.registerHydrator(hydrateDeckIslands);
 `,
 			resolveDir: input.cwd,
 			sourcefile: "hono-decks-client-entry.tsx",
@@ -3524,9 +3560,16 @@ function renderLiveReloadScript(eventsPath, nonce) {
 	return `<script${documentNonceAttribute(nonce)}>
 (() => {
   const events = new EventSource(${JSON.stringify(eventsPath)});
+  const scriptNonce = document.currentScript?.nonce;
   let running = false;
   let pending = false;
   const selector = "[data-hono-decks-island],[data-hono-md-island]";
+  const islandUpdaters = new WeakMap();
+  const hydrators = new Set();
+  window.__honoDecksLive = {
+    register: (element, update, dispose) => islandUpdaters.set(element, { update, dispose }),
+    registerHydrator: (hydrate) => hydrators.add(hydrate),
+  };
   const clientSelector = "script[data-hono-decks-client-entry]";
   const clientText = async (url) => {
     if (!url) return "";
@@ -3539,12 +3582,12 @@ function renderLiveReloadScript(eventsPath, nonce) {
     : Promise.resolve();
   let clientSnapshot = domReady.then(() => clientText(document.querySelector(clientSelector)?.src)).catch(() => null);
 
-  function signature(element) {
+  function signature(element, includeContext = true, includeProps = true) {
     const attributes = element.hasAttribute("data-hono-md-island")
       ? ["data-hono-md-island", "data-hono-md-hydrate", "data-hono-md-props"]
       : ["data-hono-decks-island", "data-hono-decks-props"];
-    return JSON.stringify([attributes.map((name) => element.getAttribute(name)),
-      element.closest("[data-hono-md-context]")?.getAttribute("data-hono-md-context") ?? null]);
+    return JSON.stringify([attributes.map((name) => !includeProps && name.endsWith("-props") ? null : element.getAttribute(name)),
+      includeContext ? element.closest("[data-hono-md-context]")?.getAttribute("data-hono-md-context") ?? null : null]);
   }
 
   async function update() {
@@ -3562,34 +3605,142 @@ function renderLiveReloadScript(eventsPath, nonce) {
     if (!newSlides.length) throw new Error("Empty deck");
     // Scripts parsed from fetched HTML are inert; reload so their behavior is not lost.
     if (currentDeck.querySelector("script") || nextDeck.querySelector("script")) throw new Error("Deck contains scripts");
-    const oldIslands = oldSlides.flatMap((slide) => Array.from(slide.querySelectorAll(selector)));
+    const collect = (slides) => slides.flatMap((slide, slideIndex) =>
+      Array.from(slide.querySelectorAll(selector)).map((element, position) => ({ element, slideIndex, position })));
+    const oldItems = collect(oldSlides);
+    const newItems = collect(newSlides);
     const nextScript = next.querySelector(clientSelector);
-    const nextClient = await clientText(nextScript?.getAttribute("src"));
+    const fetchedClient = await clientText(nextScript?.getAttribute("src"));
     const previousClient = await clientSnapshot;
     if (previousClient === null) throw new Error("Initial client entry fetch failed");
-    // Changed client code cannot safely replace a running component while retaining its state.
-    if (oldIslands.length && previousClient !== nextClient) throw new Error("Client code changed");
+    // Keep the loaded registry when the last island disappears; it can dispose
+    // that island and initialize it again if it is reintroduced later.
+    const nextClient = !nextScript && !newItems.length ? previousClient : fetchedClient;
+    // A changed client bundle could contain new implementations for running islands.
+    if (oldItems.length && previousClient !== nextClient) throw new Error("Client code changed");
+    const needsEntry = !document.querySelector(clientSelector) && Boolean(nextScript);
+    if (newItems.length && !nextScript) throw new Error("New islands require a client entry");
+    if (!needsEntry && previousClient !== nextClient) throw new Error("Client code changed");
+
+    const duplicateKeys = new Set([...oldItems, ...newItems].map((item) => signature(item.element, false)));
+    for (const key of duplicateKeys) {
+      const before = oldItems.filter((item) => signature(item.element, false) === key);
+      const after = newItems.filter((item) => signature(item.element, false) === key);
+      if (before.length <= 1 && after.length <= 1) continue;
+      if (before.length !== after.length || before.some((item, index) =>
+        item.slideIndex !== after[index].slideIndex || item.position !== after[index].position))
+        throw new Error("Ambiguous duplicate islands");
+    }
     const pairs = [];
-    if (oldIslands.length && oldSlides.length !== newSlides.length) throw new Error("Slide structure changed");
-    for (let i = 0; i < oldSlides.length && i < newSlides.length; i++) {
-      const before = Array.from(oldSlides[i].querySelectorAll(selector));
-      const after = Array.from(newSlides[i].querySelectorAll(selector));
-      if (before.length !== after.length) throw new Error("Island structure changed");
-      for (let j = 0; j < before.length; j++) {
-        if (signature(before[j]) !== signature(after[j])) throw new Error("Island properties changed");
-        // Deferred Markdown islands observe their original slide. Reload rather than strand the observer.
-        if (before[j].hasAttribute("data-hono-md-island") && !before[j].hasAttribute("data-hono-md-mounted"))
-          throw new Error("Island is pending hydration");
-        pairs.push([before[j], after[j]]);
+    const remainingOld = new Set(oldItems);
+    const remainingNew = new Set(newItems);
+    function pair(oldItem, newItem) {
+      remainingOld.delete(oldItem);
+      remainingNew.delete(newItem);
+      pairs.push([oldItem, newItem]);
+    }
+    // Exact matches can move between slides. Match only unique instances so
+    // duplicate islands cannot accidentally inherit each other's state.
+    for (const oldItem of oldItems) {
+      const key = signature(oldItem.element, false);
+      const oldMatches = Array.from(remainingOld).filter((item) => signature(item.element, false) === key);
+      const newMatches = Array.from(remainingNew).filter((item) => signature(item.element, false) === key);
+      if (oldMatches.length === 1 && newMatches.length === 1) pair(oldItem, newMatches[0]);
+    }
+    // Changed props can be reconciled if there is only one island of that type.
+    for (const oldItem of Array.from(remainingOld)) {
+      const key = signature(oldItem.element, false, false);
+      const oldMatches = Array.from(remainingOld).filter((item) => signature(item.element, false, false) === key);
+      const newMatches = Array.from(remainingNew).filter((item) => signature(item.element, false, false) === key);
+      if (oldMatches.length === 1 && newMatches.length === 1 &&
+          oldItem.slideIndex === newMatches[0].slideIndex && oldItem.position === newMatches[0].position)
+        pair(oldItem, newMatches[0]);
+    }
+    // Existing duplicate instances remain safe only when their positions and
+    // identity attributes are unchanged; ambiguous structural edits reload.
+    for (const oldItem of Array.from(remainingOld)) {
+      const newItem = Array.from(remainingNew).find((item) => item.slideIndex === oldItem.slideIndex && item.position === oldItem.position);
+      if (newItem && signature(oldItem.element, false) === signature(newItem.element, false)) pair(oldItem, newItem);
+    }
+    for (const oldItem of remainingOld) {
+      const key = signature(oldItem.element, false, false);
+      if (Array.from(remainingNew).some((item) => signature(item.element, false, false) === key))
+        throw new Error("Ambiguous island identity");
+    }
+    const removals = [];
+    for (const oldItem of remainingOld) {
+      const entry = islandUpdaters.get(oldItem.element);
+      if (!entry?.dispose) throw new Error("Cannot safely dispose island");
+      removals.push(entry.dispose);
+    }
+    const updates = [];
+    let preserveSlides = false;
+    for (const [oldItem, newItem] of pairs) {
+      const before = oldItem.element;
+      const after = newItem.element;
+      const pendingMarkdown = before.hasAttribute("data-hono-md-island") && !before.hasAttribute("data-hono-md-mounted");
+      if (pendingMarkdown) {
+        if (oldSlides.length !== newSlides.length || oldItem.slideIndex !== newItem.slideIndex)
+          throw new Error("Pending island moved between slides");
+        preserveSlides = true;
+      }
+      if (signature(before, !pendingMarkdown) !== signature(after, !pendingMarkdown)) {
+        const entry = islandUpdaters.get(before);
+        if (!entry?.update || signature(before, false, false) !== signature(after, false, false))
+          throw new Error("Island properties changed");
+        const markdown = before.hasAttribute("data-hono-md-island");
+        const propsAttribute = markdown ? "data-hono-md-props" : "data-hono-decks-props";
+        const rawProps = after.getAttribute(propsAttribute) || "{}";
+        const props = JSON.parse(rawProps);
+        const context = markdown ? JSON.parse(after.closest("[data-hono-md-context]")?.getAttribute("data-hono-md-context") || "{}") : undefined;
+        updates.push([before, entry.update, propsAttribute, rawProps, markdown ? { props, context } : props]);
+      }
+    }
+    for (const dispose of removals) dispose();
+    for (const [oldItem, newItem] of pairs) newItem.element.replaceWith(oldItem.element);
+    if (preserveSlides) {
+      for (let i = 0; i < oldSlides.length; i++) {
+        const oldSlide = oldSlides[i];
+        const newSlide = newSlides[i];
+        for (const attribute of Array.from(oldSlide.attributes)) oldSlide.removeAttribute(attribute.name);
+        for (const attribute of Array.from(newSlide.attributes)) oldSlide.setAttribute(attribute.name, attribute.value);
+        oldSlide.replaceChildren(...newSlide.childNodes);
+        newSlide.replaceWith(oldSlide);
       }
     }
-    if (!oldIslands.length && nextDeck.querySelector(selector)) throw new Error("New islands require initialization");
-    for (const [oldIsland, newIsland] of pairs) newIsland.replaceWith(oldIsland);
     currentDeck.replaceChildren(...nextDeck.childNodes);
+    for (const [island, update, propsAttribute, rawProps, value] of updates) {
+      island.setAttribute(propsAttribute, rawProps);
+      update(value);
+    }
     style.textContent = nextStyle.textContent;
     document.title = next.title;
     clientSnapshot = Promise.resolve(nextClient);
     runtime.refresh();
+    if (remainingNew.size) {
+      if (needsEntry) {
+        const url = new URL(nextScript.getAttribute("src"), location.href);
+        if (url.origin !== location.origin) throw new Error("Cross-origin client entry");
+        url.searchParams.set("hono-decks-update", String(Date.now()));
+        const script = document.createElement("script");
+        script.type = "module";
+        script.setAttribute("data-hono-decks-client-entry", "");
+        if (scriptNonce) script.nonce = scriptNonce;
+        script.src = url.href;
+        await new Promise((resolve, reject) => {
+          script.onload = resolve;
+          script.onerror = () => reject(new Error("Client entry failed"));
+          document.body.appendChild(script);
+        });
+      } else {
+        for (const hydrate of hydrators) hydrate();
+      }
+      for (const item of remainingNew) {
+        const element = item.element;
+        if (!element.hasAttribute("data-hono-decks-live-mounted") && !element.hasAttribute("data-hono-md-scheduled"))
+          throw new Error("New island did not initialize");
+      }
+    }
   }
 
   async function onUpdate() {
@@ -3991,12 +4142,15 @@ function renderPresentationScript(nonce) {
     await document.documentElement.requestFullscreen?.();
   }
 
+  const boundSlides = new WeakSet();
   function bindSlideClicks() {
-    slides.forEach((slide, slideIndex) => {
+    slides.forEach((slide) => {
+      if (boundSlides.has(slide)) return;
+      boundSlides.add(slide);
       slide.addEventListener("click", () => {
         if (!document.body.hasAttribute("data-overview-mode")) return;
         document.body.removeAttribute("data-overview-mode");
-        show(slideIndex);
+        show(slides.indexOf(slide));
       });
     });
   }

package/dist/vite.js

@@ -1659,8 +1659,37 @@ async function createHonoMarkdownAdapter(cwd, legacy = false, options) {
 function emitMarkdownClient(islands, runtime) {
 	if (!islands.length) return "";
 	const literal = (value) => JSON.stringify(value).replace(/</g, "\\u003c");
+	const isVoid = runtime.startsWith("void-plugin-hono-jsx/");
+	const contextModule = isVoid ? "void-plugin-hono-jsx/markdown" : "@ts-76/hono-markdown";
+	const scheduler = isVoid ? "void/pages-client" : "@ts-76/hono-markdown/client";
+	const schedulerName = isVoid ? "scheduleHydration" : "scheduleMarkdownIsland";
 	return `import { hydrateMarkdownIslands } from ${literal(runtime)};
+import { ${schedulerName} as scheduleIsland } from ${literal(scheduler)};
+import { MarkdownContext } from ${literal(contextModule)};
+import { jsx as liveJsx } from "hono/jsx/dom/jsx-runtime";
+import { flushSync as flushLiveSync, useState as useLiveState } from "hono/jsx/dom";
+function hydrateDeckMarkdownIslands() {
 hydrateMarkdownIslands({ ${islands.map((island) => `${literal(island.id)}: () => import(${literal(island.modulePath)})`).join(",")} }, {
+  schedule(element, loader, props, strategy, mount) {
+    return scheduleIsland(element, loader, props, strategy, (target, module, initialProps) => {
+      const live = window.__honoDecksLive;
+      if (!live || !module || typeof module.default !== 'function') return mount(target, module, initialProps);
+      const Component = module.default;
+      function LiveMarkdownIsland(componentProps) {
+        const [current, setCurrent] = useLiveState({
+          props: componentProps,
+          context: JSON.parse(element.closest('[data-hono-md-context]')?.getAttribute('data-hono-md-context') || '{}'),
+        });
+        const [active, setActive] = useLiveState(true);
+        live.register(element, setCurrent, () => flushLiveSync(() => setActive(false)));
+        return active ? liveJsx(MarkdownContext.Provider, {
+          value: current.context,
+          children: liveJsx(Component, current.props),
+        }) : null;
+      }
+      return mount(target, { ...module, default: LiveMarkdownIsland }, initialProps);
+    });
+  },
   ready(element, start) {
     const slide = element.closest('section[data-slide-state]');
     if (!slide || slide.dataset.slideState === 'active') { start(); return; }
@@ -1669,7 +1698,10 @@ hydrateMarkdownIslands({ ${islands.map((island) => `${literal(island.id)}: () =>
     });
     observer.observe(slide, { attributes: true, attributeFilter: ['data-slide-state'] });
   }
-});`;
+});
+}
+hydrateDeckMarkdownIslands();
+if (window.__honoDecksLive) window.__honoDecksLive.registerHydrator(hydrateDeckMarkdownIslands);`;
 }
 //#endregion
 //#region src/node/markdown-adapter.ts
@@ -1718,11 +1750,15 @@ async function emitClientEntryModule(input) {
 import { hydrateSlideIslands } from "hono-decks/client";
 ${imports.join("\n")}
 
-hydrateSlideIslands({
-  components: {
-    ${registrations.join(",\n    ")}
-  }
-});
+function hydrateDeckIslands() {
+  hydrateSlideIslands({
+    components: {
+      ${registrations.join(",\n      ")}
+    }
+  });
+}
+hydrateDeckIslands();
+if (window.__honoDecksLive) window.__honoDecksLive.registerHydrator(hydrateDeckIslands);
 `,
 			resolveDir: input.cwd,
 			sourcefile: "hono-decks-client-entry.tsx",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hono-decks",
-  "version": "1.3.0",
+  "version": "1.4.1",
   "description": "Slide decks for Hono and Cloudflare Workers",
   "keywords": [
     "cloudflare-workers",