hono-decks 0.4.4 → 0.5.0

package/dist/advanced.d.ts

@@ -200,7 +200,7 @@ interface DeckManifest {
 }
 //#endregion
 //#region src/renderer/control-icons.d.ts
-type DeckControlIconName = "deck-list" | "home" | "viewer" | "projection" | "presenter" | "previous" | "next" | "fullscreen" | "print" | "details" | "export-pdf" | "export-png";
+type DeckControlIconName = "deck-list" | "home" | "viewer" | "projection" | "presenter" | "previous" | "next" | "fullscreen" | "external-link" | "print" | "details" | "export-pdf" | "export-png";
 declare function renderControlIcon(name: DeckControlIconName, className?: string): DeckRenderable;
 declare function renderControlIconHtml(name: DeckControlIconName, className?: string): string;
 declare function controlIconLabel(name: DeckControlIconName): string;

package/dist/advanced.js

@@ -545,6 +545,7 @@ function controlIconLabel(name) {
 		case "previous": return "Previous slide";
 		case "next": return "Next slide";
 		case "fullscreen": return "Toggle fullscreen";
+		case "external-link": return "Open link in new tab";
 		case "print": return "Print view";
 		case "details": return "Details";
 		case "export-pdf": return "Export PDF";
@@ -561,6 +562,7 @@ function controlIconPathHtml(name) {
 		case "previous": return "<path d=\"M15 6l-6 6 6 6\" />";
 		case "next": return "<path d=\"M9 6l6 6-6 6\" />";
 		case "fullscreen": return "<path d=\"M8 3H5a2 2 0 0 0-2 2v3\" /><path d=\"M16 3h3a2 2 0 0 1 2 2v3\" /><path d=\"M8 21H5a2 2 0 0 1-2-2v-3\" /><path d=\"M16 21h3a2 2 0 0 0 2-2v-3\" />";
+		case "external-link": return "<path d=\"M15 3h6v6\" /><path d=\"M10 14 21 3\" /><path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\" />";
 		case "print": return "<path d=\"M6 9V3h12v6\" /><path d=\"M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2\" /><path d=\"M6 14h12v7H6z\" />";
 		case "details": return "<circle cx=\"12\" cy=\"12\" r=\"9\" /><path d=\"M12 11v5\" /><path d=\"M12 8h.01\" />";
 		case "export-pdf": return "<path d=\"M14 3v4a2 2 0 0 0 2 2h4\" /><path d=\"M5 3h9l6 6v12H5z\" /><path d=\"M8 15h8\" /><path d=\"M8 18h5\" />";
@@ -602,6 +604,11 @@ function controlIconPaths(name) {
 			jsx("path", { d: "M8 21H5a2 2 0 0 1-2-2v-3" }),
 			jsx("path", { d: "M16 21h3a2 2 0 0 0 2-2v-3" })
 		];
+		case "external-link": return [
+			jsx("path", { d: "M15 3h6v6" }),
+			jsx("path", { d: "M10 14 21 3" }),
+			jsx("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" })
+		];
 		case "print": return [
 			jsx("path", { d: "M6 9V3h12v6" }),
 			jsx("path", { d: "M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2" }),
@@ -700,6 +707,7 @@ function renderPresentationScript(nonce) {
   let isTransitioning = false;
   let pendingNavigation = null;
   let transitionToken = 0;
+  let touchStart = null;
 
   function fitDeck() {
     if (!(stage instanceof HTMLElement) || !(deck instanceof HTMLElement)) return;
@@ -1032,6 +1040,33 @@ function renderPresentationScript(nonce) {
     if (action === "overview") toggleOverview();
   }
 
+  function isInteractiveTouchTarget(target) {
+    return target instanceof Element && Boolean(target.closest("a,button,input,select,textarea,[contenteditable],[role='button']"));
+  }
+
+  function handleTouchStart(event) {
+    if (event.touches.length !== 1 || isInteractiveTouchTarget(event.target)) {
+      touchStart = null;
+      return;
+    }
+    const touch = event.touches[0];
+    touchStart = { x: touch.clientX, y: touch.clientY };
+  }
+
+  function handleTouchEnd(event) {
+    if (!touchStart || event.changedTouches.length !== 1) {
+      touchStart = null;
+      return;
+    }
+    const touch = event.changedTouches[0];
+    const deltaX = touch.clientX - touchStart.x;
+    const deltaY = touch.clientY - touchStart.y;
+    touchStart = null;
+    const threshold = Math.max(48, window.innerWidth * 0.08);
+    if (Math.abs(deltaX) < threshold || Math.abs(deltaX) <= Math.abs(deltaY) * 1.25) return;
+    handleCommand(deltaX < 0 ? "next" : "previous");
+  }
+
   async function toggleFullscreen() {
     if (document.fullscreenElement) {
       await document.exitFullscreen?.();
@@ -1055,6 +1090,9 @@ function renderPresentationScript(nonce) {
     if (event.key === "p") handleCommand("presenter");
     if (event.key === "o") handleCommand("overview");
   });
+  document.addEventListener("touchstart", handleTouchStart, { passive: true });
+  document.addEventListener("touchend", handleTouchEnd, { passive: true });
+  document.addEventListener("touchcancel", () => { touchStart = null; }, { passive: true });
 
   window.addEventListener("message", (event) => {
     const message = event.data;
@@ -2462,10 +2500,25 @@ async function renderDeckExternalEmbedResponse(input) {
 		mountPath,
 		title: deck.meta.title ?? slug
 	}, input.document, input.options.document);
+	const viewerOptions = typeof input.options.viewer === "function" ? await input.options.viewer(input.context) : input.options.viewer;
+	const controls = viewerOptions?.controls === void 0 ? { items: (_defaults, context) => [{
+		type: "link",
+		key: "open-viewer",
+		href: context.meta.paths.viewer,
+		label: "Open full viewer in new tab",
+		icon: "external-link",
+		attributes: {
+			"aria-label": "Open full viewer in new tab",
+			"data-hono-decks-viewer-link": true,
+			target: "_blank",
+			rel: "noreferrer"
+		}
+	}] } : viewerOptions.controls;
 	const viewer = await createDeckViewerEmbed({
 		deck,
 		mountPath,
-		...typeof input.options.viewer === "function" ? await input.options.viewer(input.context) : input.options.viewer,
+		...viewerOptions,
+		controls,
 		availablePages: input.availablePages,
 		nonce: document.nonce
 	});

package/dist/mod.d.ts

@@ -153,7 +153,7 @@ interface DeckManifest {
 }
 //#endregion
 //#region src/renderer/control-icons.d.ts
-type DeckControlIconName = "deck-list" | "home" | "viewer" | "projection" | "presenter" | "previous" | "next" | "fullscreen" | "print" | "details" | "export-pdf" | "export-png";
+type DeckControlIconName = "deck-list" | "home" | "viewer" | "projection" | "presenter" | "previous" | "next" | "fullscreen" | "external-link" | "print" | "details" | "export-pdf" | "export-png";
 //#endregion
 //#region src/server/paths.d.ts
 /** All public URLs for one deck. */

package/dist/mod.js

@@ -333,6 +333,7 @@ function controlIconLabel(name) {
 		case "previous": return "Previous slide";
 		case "next": return "Next slide";
 		case "fullscreen": return "Toggle fullscreen";
+		case "external-link": return "Open link in new tab";
 		case "print": return "Print view";
 		case "details": return "Details";
 		case "export-pdf": return "Export PDF";
@@ -349,6 +350,7 @@ function controlIconPathHtml(name) {
 		case "previous": return "<path d=\"M15 6l-6 6 6 6\" />";
 		case "next": return "<path d=\"M9 6l6 6-6 6\" />";
 		case "fullscreen": return "<path d=\"M8 3H5a2 2 0 0 0-2 2v3\" /><path d=\"M16 3h3a2 2 0 0 1 2 2v3\" /><path d=\"M8 21H5a2 2 0 0 1-2-2v-3\" /><path d=\"M16 21h3a2 2 0 0 0 2-2v-3\" />";
+		case "external-link": return "<path d=\"M15 3h6v6\" /><path d=\"M10 14 21 3\" /><path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\" />";
 		case "print": return "<path d=\"M6 9V3h12v6\" /><path d=\"M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2\" /><path d=\"M6 14h12v7H6z\" />";
 		case "details": return "<circle cx=\"12\" cy=\"12\" r=\"9\" /><path d=\"M12 11v5\" /><path d=\"M12 8h.01\" />";
 		case "export-pdf": return "<path d=\"M14 3v4a2 2 0 0 0 2 2h4\" /><path d=\"M5 3h9l6 6v12H5z\" /><path d=\"M8 15h8\" /><path d=\"M8 18h5\" />";
@@ -390,6 +392,11 @@ function controlIconPaths(name) {
 			jsx("path", { d: "M8 21H5a2 2 0 0 1-2-2v-3" }),
 			jsx("path", { d: "M16 21h3a2 2 0 0 0 2-2v-3" })
 		];
+		case "external-link": return [
+			jsx("path", { d: "M15 3h6v6" }),
+			jsx("path", { d: "M10 14 21 3" }),
+			jsx("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" })
+		];
 		case "print": return [
 			jsx("path", { d: "M6 9V3h12v6" }),
 			jsx("path", { d: "M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2" }),

package/dist/node.d.ts

@@ -331,7 +331,7 @@ interface LocalDevSlidesApp {
 declare function createLocalDevSlidesApp(input: CreateLocalDevSlidesAppInput): Promise<LocalDevSlidesApp>;
 //#endregion
 //#region src/renderer/control-icons.d.ts
-type DeckControlIconName = "deck-list" | "home" | "viewer" | "projection" | "presenter" | "previous" | "next" | "fullscreen" | "print" | "details" | "export-pdf" | "export-png";
+type DeckControlIconName = "deck-list" | "home" | "viewer" | "projection" | "presenter" | "previous" | "next" | "fullscreen" | "external-link" | "print" | "details" | "export-pdf" | "export-png";
 //#endregion
 //#region src/server/paths.d.ts
 /** All public URLs for one deck. */

package/dist/node.js

@@ -2968,6 +2968,7 @@ function controlIconLabel(name) {
 		case "previous": return "Previous slide";
 		case "next": return "Next slide";
 		case "fullscreen": return "Toggle fullscreen";
+		case "external-link": return "Open link in new tab";
 		case "print": return "Print view";
 		case "details": return "Details";
 		case "export-pdf": return "Export PDF";
@@ -2984,6 +2985,7 @@ function controlIconPathHtml(name) {
 		case "previous": return "<path d=\"M15 6l-6 6 6 6\" />";
 		case "next": return "<path d=\"M9 6l6 6-6 6\" />";
 		case "fullscreen": return "<path d=\"M8 3H5a2 2 0 0 0-2 2v3\" /><path d=\"M16 3h3a2 2 0 0 1 2 2v3\" /><path d=\"M8 21H5a2 2 0 0 1-2-2v-3\" /><path d=\"M16 21h3a2 2 0 0 0 2-2v-3\" />";
+		case "external-link": return "<path d=\"M15 3h6v6\" /><path d=\"M10 14 21 3\" /><path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\" />";
 		case "print": return "<path d=\"M6 9V3h12v6\" /><path d=\"M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2\" /><path d=\"M6 14h12v7H6z\" />";
 		case "details": return "<circle cx=\"12\" cy=\"12\" r=\"9\" /><path d=\"M12 11v5\" /><path d=\"M12 8h.01\" />";
 		case "export-pdf": return "<path d=\"M14 3v4a2 2 0 0 0 2 2h4\" /><path d=\"M5 3h9l6 6v12H5z\" /><path d=\"M8 15h8\" /><path d=\"M8 18h5\" />";
@@ -3025,6 +3027,11 @@ function controlIconPaths(name) {
 			jsx("path", { d: "M8 21H5a2 2 0 0 1-2-2v-3" }),
 			jsx("path", { d: "M16 21h3a2 2 0 0 0 2-2v-3" })
 		];
+		case "external-link": return [
+			jsx("path", { d: "M15 3h6v6" }),
+			jsx("path", { d: "M10 14 21 3" }),
+			jsx("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" })
+		];
 		case "print": return [
 			jsx("path", { d: "M6 9V3h12v6" }),
 			jsx("path", { d: "M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2" }),
@@ -3123,6 +3130,7 @@ function renderPresentationScript(nonce) {
   let isTransitioning = false;
   let pendingNavigation = null;
   let transitionToken = 0;
+  let touchStart = null;
 
   function fitDeck() {
     if (!(stage instanceof HTMLElement) || !(deck instanceof HTMLElement)) return;
@@ -3455,6 +3463,33 @@ function renderPresentationScript(nonce) {
     if (action === "overview") toggleOverview();
   }
 
+  function isInteractiveTouchTarget(target) {
+    return target instanceof Element && Boolean(target.closest("a,button,input,select,textarea,[contenteditable],[role='button']"));
+  }
+
+  function handleTouchStart(event) {
+    if (event.touches.length !== 1 || isInteractiveTouchTarget(event.target)) {
+      touchStart = null;
+      return;
+    }
+    const touch = event.touches[0];
+    touchStart = { x: touch.clientX, y: touch.clientY };
+  }
+
+  function handleTouchEnd(event) {
+    if (!touchStart || event.changedTouches.length !== 1) {
+      touchStart = null;
+      return;
+    }
+    const touch = event.changedTouches[0];
+    const deltaX = touch.clientX - touchStart.x;
+    const deltaY = touch.clientY - touchStart.y;
+    touchStart = null;
+    const threshold = Math.max(48, window.innerWidth * 0.08);
+    if (Math.abs(deltaX) < threshold || Math.abs(deltaX) <= Math.abs(deltaY) * 1.25) return;
+    handleCommand(deltaX < 0 ? "next" : "previous");
+  }
+
   async function toggleFullscreen() {
     if (document.fullscreenElement) {
       await document.exitFullscreen?.();
@@ -3478,6 +3513,9 @@ function renderPresentationScript(nonce) {
     if (event.key === "p") handleCommand("presenter");
     if (event.key === "o") handleCommand("overview");
   });
+  document.addEventListener("touchstart", handleTouchStart, { passive: true });
+  document.addEventListener("touchend", handleTouchEnd, { passive: true });
+  document.addEventListener("touchcancel", () => { touchStart = null; }, { passive: true });
 
   window.addEventListener("message", (event) => {
     const message = event.data;
@@ -4822,10 +4860,25 @@ async function renderDeckExternalEmbedResponse(input) {
 		mountPath,
 		title: deck.meta.title ?? slug
 	}, input.document, input.options.document);
+	const viewerOptions = typeof input.options.viewer === "function" ? await input.options.viewer(input.context) : input.options.viewer;
+	const controls = viewerOptions?.controls === void 0 ? { items: (_defaults, context) => [{
+		type: "link",
+		key: "open-viewer",
+		href: context.meta.paths.viewer,
+		label: "Open full viewer in new tab",
+		icon: "external-link",
+		attributes: {
+			"aria-label": "Open full viewer in new tab",
+			"data-hono-decks-viewer-link": true,
+			target: "_blank",
+			rel: "noreferrer"
+		}
+	}] } : viewerOptions.controls;
 	const viewer = await createDeckViewerEmbed({
 		deck,
 		mountPath,
-		...typeof input.options.viewer === "function" ? await input.options.viewer(input.context) : input.options.viewer,
+		...viewerOptions,
+		controls,
 		availablePages: input.availablePages,
 		nonce: document.nonce
 	});

package/package.json

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