hono-decks 1.2.4 → 1.4.0

package/README.ja.md

@@ -294,7 +294,7 @@ export default defineConfig({
 });
 ```
 
-pluginはVite起動前にcompileし、deck rootと`hono-decks.config.ts`をVite watcherへ登録します。再compileに成功するとfull reloadを通知するため、手動更新は不要です。どちらの構成でも通常の`bun run dev`だけでauthoringできます。
+pluginはVite起動前にcompileし、deck rootと`hono-decks.config.ts`をVite watcherへ登録します。再compileに成功すると、既存のislandを安全に識別できる場合は表示ページを再読み込みせずに内容を更新します。対応するprops・Markdownコンテキストの変更、別々のislandの並べ替え・追加・削除でも状態を維持し、現在のスライド・ステップを保ちます。クライアントコードの変更や同一islandの区別がつかない場合など、安全に更新できないときは表示ページを再読み込みしてスライドとステップを復元します。このとき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, it requests a full browser reload. 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. When an update cannot be applied safely, such as a changed client bundle or ambiguous duplicate islands, the presentation page reloads and restores the slide and step; island state is then reset. 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

@@ -804,19 +804,209 @@ function escapeHtml$7(value) {
 function renderLiveReloadScript(eventsPath, nonce) {
 	return `<script${documentNonceAttribute(nonce)}>
 (() => {
-  const eventsUrl = ${JSON.stringify(eventsPath)};
-  const events = new EventSource(eventsUrl);
-  events.addEventListener("deck:updated", () => location.reload());
+  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 "";
+    const response = await fetch(url, { cache: "no-store" });
+    if (!response.ok) throw new Error("Client entry fetch failed");
+    return response.text();
+  };
+  const domReady = document.readyState === "loading"
+    ? new Promise((resolve) => document.addEventListener("DOMContentLoaded", resolve, { once: true }))
+    : Promise.resolve();
+  let clientSnapshot = domReady.then(() => clientText(document.querySelector(clientSelector)?.src)).catch(() => null);
+
+  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) => !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() {
+    const response = await fetch(location.href, { cache: "no-store" });
+    if (!response.ok || !response.headers.get("content-type")?.includes("text/html")) throw new Error("Deck fetch failed");
+    const next = new DOMParser().parseFromString(await response.text(), "text/html");
+    const currentDeck = document.querySelector("[data-hono-decks-deck]");
+    const nextDeck = next.querySelector("[data-hono-decks-deck]");
+    const style = document.querySelector("[data-hono-decks-presentation-style]");
+    const nextStyle = next.querySelector("[data-hono-decks-presentation-style]");
+    const runtime = window.__honoDecksPresentationRuntime;
+    if (!currentDeck || !nextDeck || !style || !nextStyle || !runtime?.refresh) throw new Error("Invalid deck document");
+    const oldSlides = Array.from(currentDeck.querySelectorAll(".slide"));
+    const newSlides = Array.from(nextDeck.querySelectorAll(".slide"));
+    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 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 fetchedClient = await clientText(nextScript?.getAttribute("src"));
+    const previousClient = await clientSnapshot;
+    if (previousClient === null) throw new Error("Initial client entry fetch failed");
+    // 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 = [];
+    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);
+      }
+    }
+    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() {
+    if (running) { pending = true; return; }
+    running = true;
+    try {
+      do { pending = false; await update(); } while (pending);
+    } catch (error) { console.warn("[hono-decks] Live update failed; reloading", error); location.reload(); }
+    finally { running = false; }
+  }
+  events.addEventListener("deck:updated", onUpdate);
 })();
 <\/script>`;
 }
 function renderClientEntryScript(clientEntry, nonce) {
-	return `<script type="module" src="${escapeHtml$6(clientEntry)}"${documentNonceAttribute(nonce)}><\/script>`;
+	return `<script data-hono-decks-client-entry type="module" src="${escapeHtml$6(clientEntry)}"${documentNonceAttribute(nonce)}><\/script>`;
 }
 function renderPresentationScript(nonce) {
 	return `<script${documentNonceAttribute(nonce)}>
 (() => {
-  const slides = Array.from(document.querySelectorAll(".slide"));
+  let slides = Array.from(document.querySelectorAll(".slide"));
   const stage = document.querySelector("[data-hono-decks-stage]");
   const deck = document.querySelector("[data-hono-decks-deck]");
   const DESIGN_WIDTH = ${PRESENTATION_DESIGN_WIDTH};
@@ -1090,6 +1280,7 @@ function renderPresentationScript(nonce) {
     updateFires(nextStepIndex);
     publishState();
     requestAnimationFrame(() => {
+      if (token !== transitionToken) return;
       setSlideState(outgoing, "leaving", direction, transition, timing);
       setSlideState(incoming, "active", direction, transition, timing);
       waitForSlideTransition(outgoing, incoming, direction, token);
@@ -1196,13 +1387,41 @@ function renderPresentationScript(nonce) {
     await document.documentElement.requestFullscreen?.();
   }
 
-  slides.forEach((slide, slideIndex) => {
-    slide.addEventListener("click", () => {
-      if (!document.body.hasAttribute("data-overview-mode")) return;
-      document.body.removeAttribute("data-overview-mode");
-      show(slideIndex);
+  const boundSlides = new WeakSet();
+  function bindSlideClicks() {
+    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(slides.indexOf(slide));
+      });
     });
-  });
+  }
+
+  function refresh() {
+    transitionToken += 1;
+    isTransitioning = false;
+    pendingNavigation = null;
+    slides = Array.from(deck?.querySelectorAll(".slide") ?? []);
+    bindSlideClicks();
+    if (document.body.hasAttribute("data-overview-mode")) {
+      slides.forEach((slide) => { slide.hidden = false; slide.setAttribute("data-slide-state", "active"); });
+      setFiresVisible(Array.from(deck?.querySelectorAll("[data-hono-decks-fire]") ?? []), true);
+      index = Math.max(0, Math.min(slides.length - 1, index));
+      stepCount = fireCountForSlide(index);
+      stepIndex = Math.max(0, Math.min(stepCount, stepIndex));
+      publishState();
+    } else {
+      applyInstantSlideChange(index, stepIndex);
+    }
+    document.querySelectorAll(".speaker-notes").forEach((note) => {
+      note.hidden = !document.body.hasAttribute("data-presenter-mode");
+    });
+    fitDeck();
+  }
+  bindSlideClicks();
 
   document.addEventListener("keydown", (event) => {
     if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.altKey) return;
@@ -1225,7 +1444,7 @@ function renderPresentationScript(nonce) {
     handleCommand(message.action, message.index, message.stepIndex);
   });
 
-  window.__honoDecksPresentationRuntime = { command: handleCommand };
+  window.__honoDecksPresentationRuntime = { command: handleCommand, refresh };
 
   window.addEventListener("resize", fitDeck);
   if (typeof ResizeObserver !== "undefined" && stage instanceof HTMLElement) {
@@ -1261,7 +1480,7 @@ function renderCompiledDeckPage(input) {
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>${escapeHtml$5(presentationPageTitle(deck))}</title>
-  <style${nonceAttribute}>${basePresentationStyle()}${deck.themeStyle ?? ""}${input.style ?? ""}</style>
+  <style data-hono-decks-presentation-style${nonceAttribute}>${basePresentationStyle()}${deck.themeStyle ?? ""}${input.style ?? ""}</style>
   ${document.head}
 </head>
 <body${bodyAttrs.length ? ` ${bodyAttrs.join(" ")}` : ""}>
@@ -1292,7 +1511,7 @@ async function renderCompiledDeckPageAsync(input) {
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>${escapeHtml$5(presentationPageTitle(deck))}</title>
-  <style${nonceAttribute}>${basePresentationStyle()}${deck.themeStyle ?? ""}${input.style ?? ""}</style>
+  <style data-hono-decks-presentation-style${nonceAttribute}>${basePresentationStyle()}${deck.themeStyle ?? ""}${input.style ?? ""}</style>
   ${document.head}
 </head>
 <body${bodyAttrs.length ? ` ${bodyAttrs.join(" ")}` : ""}>

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",
@@ -3523,19 +3559,209 @@ function escapeHtml$8(value) {
 function renderLiveReloadScript(eventsPath, nonce) {
 	return `<script${documentNonceAttribute(nonce)}>
 (() => {
-  const eventsUrl = ${JSON.stringify(eventsPath)};
-  const events = new EventSource(eventsUrl);
-  events.addEventListener("deck:updated", () => location.reload());
+  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 "";
+    const response = await fetch(url, { cache: "no-store" });
+    if (!response.ok) throw new Error("Client entry fetch failed");
+    return response.text();
+  };
+  const domReady = document.readyState === "loading"
+    ? new Promise((resolve) => document.addEventListener("DOMContentLoaded", resolve, { once: true }))
+    : Promise.resolve();
+  let clientSnapshot = domReady.then(() => clientText(document.querySelector(clientSelector)?.src)).catch(() => null);
+
+  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) => !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() {
+    const response = await fetch(location.href, { cache: "no-store" });
+    if (!response.ok || !response.headers.get("content-type")?.includes("text/html")) throw new Error("Deck fetch failed");
+    const next = new DOMParser().parseFromString(await response.text(), "text/html");
+    const currentDeck = document.querySelector("[data-hono-decks-deck]");
+    const nextDeck = next.querySelector("[data-hono-decks-deck]");
+    const style = document.querySelector("[data-hono-decks-presentation-style]");
+    const nextStyle = next.querySelector("[data-hono-decks-presentation-style]");
+    const runtime = window.__honoDecksPresentationRuntime;
+    if (!currentDeck || !nextDeck || !style || !nextStyle || !runtime?.refresh) throw new Error("Invalid deck document");
+    const oldSlides = Array.from(currentDeck.querySelectorAll(".slide"));
+    const newSlides = Array.from(nextDeck.querySelectorAll(".slide"));
+    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 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 fetchedClient = await clientText(nextScript?.getAttribute("src"));
+    const previousClient = await clientSnapshot;
+    if (previousClient === null) throw new Error("Initial client entry fetch failed");
+    // 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 = [];
+    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);
+      }
+    }
+    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() {
+    if (running) { pending = true; return; }
+    running = true;
+    try {
+      do { pending = false; await update(); } while (pending);
+    } catch (error) { console.warn("[hono-decks] Live update failed; reloading", error); location.reload(); }
+    finally { running = false; }
+  }
+  events.addEventListener("deck:updated", onUpdate);
 })();
 <\/script>`;
 }
 function renderClientEntryScript(clientEntry, nonce) {
-	return `<script type="module" src="${escapeHtml$7(clientEntry)}"${documentNonceAttribute(nonce)}><\/script>`;
+	return `<script data-hono-decks-client-entry type="module" src="${escapeHtml$7(clientEntry)}"${documentNonceAttribute(nonce)}><\/script>`;
 }
 function renderPresentationScript(nonce) {
 	return `<script${documentNonceAttribute(nonce)}>
 (() => {
-  const slides = Array.from(document.querySelectorAll(".slide"));
+  let slides = Array.from(document.querySelectorAll(".slide"));
   const stage = document.querySelector("[data-hono-decks-stage]");
   const deck = document.querySelector("[data-hono-decks-deck]");
   const DESIGN_WIDTH = ${PRESENTATION_DESIGN_WIDTH};
@@ -3809,6 +4035,7 @@ function renderPresentationScript(nonce) {
     updateFires(nextStepIndex);
     publishState();
     requestAnimationFrame(() => {
+      if (token !== transitionToken) return;
       setSlideState(outgoing, "leaving", direction, transition, timing);
       setSlideState(incoming, "active", direction, transition, timing);
       waitForSlideTransition(outgoing, incoming, direction, token);
@@ -3915,13 +4142,41 @@ function renderPresentationScript(nonce) {
     await document.documentElement.requestFullscreen?.();
   }
 
-  slides.forEach((slide, slideIndex) => {
-    slide.addEventListener("click", () => {
-      if (!document.body.hasAttribute("data-overview-mode")) return;
-      document.body.removeAttribute("data-overview-mode");
-      show(slideIndex);
+  const boundSlides = new WeakSet();
+  function bindSlideClicks() {
+    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(slides.indexOf(slide));
+      });
     });
-  });
+  }
+
+  function refresh() {
+    transitionToken += 1;
+    isTransitioning = false;
+    pendingNavigation = null;
+    slides = Array.from(deck?.querySelectorAll(".slide") ?? []);
+    bindSlideClicks();
+    if (document.body.hasAttribute("data-overview-mode")) {
+      slides.forEach((slide) => { slide.hidden = false; slide.setAttribute("data-slide-state", "active"); });
+      setFiresVisible(Array.from(deck?.querySelectorAll("[data-hono-decks-fire]") ?? []), true);
+      index = Math.max(0, Math.min(slides.length - 1, index));
+      stepCount = fireCountForSlide(index);
+      stepIndex = Math.max(0, Math.min(stepCount, stepIndex));
+      publishState();
+    } else {
+      applyInstantSlideChange(index, stepIndex);
+    }
+    document.querySelectorAll(".speaker-notes").forEach((note) => {
+      note.hidden = !document.body.hasAttribute("data-presenter-mode");
+    });
+    fitDeck();
+  }
+  bindSlideClicks();
 
   document.addEventListener("keydown", (event) => {
     if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.altKey) return;
@@ -3944,7 +4199,7 @@ function renderPresentationScript(nonce) {
     handleCommand(message.action, message.index, message.stepIndex);
   });
 
-  window.__honoDecksPresentationRuntime = { command: handleCommand };
+  window.__honoDecksPresentationRuntime = { command: handleCommand, refresh };
 
   window.addEventListener("resize", fitDeck);
   if (typeof ResizeObserver !== "undefined" && stage instanceof HTMLElement) {
@@ -3980,7 +4235,7 @@ async function renderCompiledDeckPageAsync(input) {
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>${escapeHtml$6(presentationPageTitle(deck))}</title>
-  <style${nonceAttribute}>${basePresentationStyle()}${deck.themeStyle ?? ""}${input.style ?? ""}</style>
+  <style data-hono-decks-presentation-style${nonceAttribute}>${basePresentationStyle()}${deck.themeStyle ?? ""}${input.style ?? ""}</style>
   ${document.head}
 </head>
 <body${bodyAttrs.length ? ` ${bodyAttrs.join(" ")}` : ""}>

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",
@@ -2307,6 +2343,8 @@ function honoDecks(options = {}) {
 	let mountChanged = false;
 	let modules = /* @__PURE__ */ new Map();
 	let routerModulePath = "";
+	const eventClients = /* @__PURE__ */ new Set();
+	let eventsPath = "/@hono-decks/events";
 	const syncWatchedPaths = async () => {
 		if (!server) return;
 		const next = /* @__PURE__ */ new Set([
@@ -2374,7 +2412,7 @@ function honoDecks(options = {}) {
 					environment.moduleGraph.invalidateAll();
 					if (environment.name !== "client") environment.hot.send({ type: "full-reload" });
 				}
-				server.ws.send({ type: "full-reload" });
+				for (const client of eventClients) client.write("event: deck:updated\ndata: {}\n\n");
 			}
 		} finally {
 			compiling = false;
@@ -2422,8 +2460,9 @@ export { createDecks };
 export const decks = createDecks(config);`;
 			if (!id.startsWith(MODULE_PREFIX)) return null;
 			const path = id.slice(MODULE_PREFIX.length);
-			const code = modules.get(path);
+			let code = modules.get(path);
 			if (code === void 0) return null;
+			if (path === routerModulePath && resolvedConfig?.command === "serve") code = code.replace("const generatedDecks = defineDecks({", `const generatedDecks = defineDecks({\n  liveReloadPath: () => ${JSON.stringify(eventsPath)},`);
 			return (await transform(code, {
 				loader: "ts",
 				format: "esm",
@@ -2436,16 +2475,30 @@ export const decks = createDecks(config);`;
 		},
 		async configResolved(config) {
 			resolvedConfig = config;
+			eventsPath = `${config.base?.startsWith("/") ? config.base.replace(/\/$/, "") : ""}/@hono-decks/events`;
 			projectRoot = config.resolve?.preserveSymlinks ? config.root : await realpath(config.root);
 			configPath = resolve(projectRoot, options.configFile ?? "hono-decks.config.ts");
 			await compile(true);
 		},
 		configureServer(devServer) {
 			server = devServer;
+			devServer.middlewares.use((req, res, next) => {
+				if (req.url?.split("?")[0] !== eventsPath || req.method !== "GET") return next();
+				res.writeHead(200, {
+					"Content-Type": "text/event-stream",
+					"Cache-Control": "no-cache, no-transform",
+					Connection: "keep-alive"
+				});
+				res.write(": connected\n\n");
+				eventClients.add(res);
+				res.on("close", () => eventClients.delete(res));
+			});
 			syncWatchedPaths();
 			devServer.watcher.on("all", onWatcherEvent);
 			const cleanup = () => {
 				if (timer) clearTimeout(timer);
+				for (const client of eventClients) client.end();
+				eventClients.clear();
 				devServer.watcher.off("all", onWatcherEvent);
 				server = void 0;
 				watchedPaths.clear();

package/package.json

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