npm - foss-design - Versions diffs - 0.3.5 → 0.3.6 - Mend

foss-design 0.3.5 → 0.3.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/runtime/index.js +28 -0
package/dist/viewer/assets/{index-Cbriu8my.js → index-DmtHtusH.js} +47 -47
package/dist/viewer/index.html +1 -1
package/dist/viewer-lib/index.js +40 -2
package/dist/viewer-lib/types/src/shared/types.d.ts +12 -0
package/dist/viewer-lib/types/viewer/src/lib/frames.d.ts +9 -1
package/dist/viewer-lib/types/viewer/src/pages/canvas/items.d.ts +4 -1
package/dist/viewer-lib/types/viewer/src/ui/toast.d.ts +1 -1
package/package.json +1 -1

package/dist/viewer/index.html CHANGED Viewed

@@ -14,7 +14,7 @@
         document.documentElement.dataset.theme = dark ? 'dark' : 'light'
       } catch (e) {}
     </script>
-    <script type="module" crossorigin src="./assets/index-Cbriu8my.js"></script>
+    <script type="module" crossorigin src="./assets/index-DmtHtusH.js"></script>
     <link rel="stylesheet" crossorigin href="./assets/index-YT1s8WdL.css">
   </head>
   <body>

package/dist/viewer-lib/index.js CHANGED Viewed

@@ -6999,6 +6999,10 @@ function Toaster() {
 						name: "alert",
 						size: 15,
 						className: "text-danger-text"
+					}) : item.tone === "info" ? /* @__PURE__ */ jsx(Icon, {
+						name: "info",
+						size: 15,
+						className: "text-muted"
 					}) : /* @__PURE__ */ jsx(Icon, {
 						name: "check",
 						size: 15,
@@ -7106,6 +7110,31 @@ function frameSrc(url, theme, extra) {
 function absoluteUrl(url) {
 	return new URL(url, document.baseURI).toString();
 }
+/**
+* A link or form the runtime kept from leaving its frame. A path whose last part names a screen
+* or URL item on the canvas (`/settings`, `settings.html`) goes there; a link to another site
+* opens in a new tab; anything else says where it pointed.
+*/
+function followLink(message, canvas, go) {
+	if (message.form) {
+		toast("Forms are not sent from a screen", void 0, "info");
+		return;
+	}
+	if (message.path === null) {
+		const tab = window.open(message.href, "_blank");
+		if (tab) tab.opener = null;
+		else toast("Link to another site", message.href, "info");
+		return;
+	}
+	const path = message.path.split(/[?#]/)[0].replace(/\/+$/, "");
+	let name = path.slice(path.lastIndexOf("/") + 1).replace(/\.html?$/, "");
+	try {
+		name = decodeURIComponent(name);
+	} catch {}
+	const ids = new Set(canvas.pages.flatMap((page) => page.sections.flatMap((section) => section.items.filter((item) => item.kind === "screen" || item.kind === "url").map((item) => item.id))));
+	if (name && ids.has(name)) go(name);
+	else toast("Not a screen on this canvas", message.path, "info");
+}
 //#endregion
 //#region viewer/src/components/inspector.tsx
 /**
@@ -8779,7 +8808,7 @@ function FullPage({ canvasId, itemId }) {
 			else if (message.type === "go") {
 				const id = message.target.includes("/") ? message.target.split("/")[1] : message.target;
 				if (items.some((entry) => entry.id === id)) navigate(fullHref(canvasId, id, theme), { replace: true });
-			}
+			} else if (message.type === "link" && canvas) followLink(message, canvas, (id) => navigate(fullHref(canvasId, id, theme), { replace: true }));
 		});
 	}, [url, item?.kind]);
 	if (error) return /* @__PURE__ */ jsx(NotFound, {
@@ -11137,6 +11166,9 @@ var FrameItem = memo(function FrameItem({ placed, mode, thumb, theme, store, eve
 				case "go":
 					events.onGo(item.id, message.target);
 					break;
+				case "link":
+					events.onLink(item.id, message);
+					break;
 				case "wheel":
 					events.onWheel(frame, message);
 					break;
@@ -12078,6 +12110,9 @@ function CanvasView({ canvas, page }) {
 			}
 			console.warn(`[design] go("${target}"): no such screen`);
 		},
+		onLink(from, message) {
+			followLink(message, canvas, (id) => this.onGo(from, id));
+		},
 		onWheel(frame, message) {
 			const root = frame.closest(".canvas-root");
 			if (!root) return;
@@ -12509,7 +12544,10 @@ function Player({ canvas, itemId }) {
 				const [pagePart, idPart] = message.target.includes("/") ? message.target.split("/") : [null, message.target];
 				const target = all.find((e) => e.item.id === idPart && (!pagePart || e.pageId === pagePart));
 				if (target) navigate(playHref(canvas.id, target.item.id, target.pageId));
-			}
+			} else if (message.type === "link") followLink(message, canvas, (id) => {
+				const target = all.find((e) => e.item.id === id);
+				if (target) navigate(playHref(canvas.id, target.item.id, target.pageId));
+			});
 		});
 	}, [
 		item,

package/dist/viewer-lib/types/src/shared/types.d.ts CHANGED Viewed

@@ -284,6 +284,18 @@ export type RuntimeMessage = {
     key: string;
     type: 'go';
     target: string;
+}
+/**
+ * A link or form in the screen would have taken the frame to another page, which the frame's
+ * origin does not serve; the runtime kept the frame put. `path` is set for its own origin.
+ */
+ | {
+    source: 'design-runtime';
+    key: string;
+    type: 'link';
+    href: string;
+    path: string | null;
+    form: boolean;
 } | {
     source: 'design-runtime';
     key: string;

package/dist/viewer-lib/types/viewer/src/lib/frames.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import type { RuntimeMessage, Theme, ViewerMessage } from '../../../src/shared/types';
+import type { CanvasDoc, RuntimeMessage, Theme, ViewerMessage } from '../../../src/shared/types';
 type Handler = (message: RuntimeMessage) => void;
 export declare function listenToFrame(frame: HTMLIFrameElement, handler: Handler): () => void;
 type Outgoing = ViewerMessage extends infer M ? M extends {
@@ -22,4 +22,12 @@ export declare const FRAME_ORIGIN: string;
 export declare function frameSrc(url: string, theme: Theme, extra?: Record<string, string>): string;
 /** Absolute URL for opening a frame in a new tab. */
 export declare function absoluteUrl(url: string): string;
+/**
+ * A link or form the runtime kept from leaving its frame. A path whose last part names a screen
+ * or URL item on the canvas (`/settings`, `settings.html`) goes there; a link to another site
+ * opens in a new tab; anything else says where it pointed.
+ */
+export declare function followLink(message: Extract<RuntimeMessage, {
+    type: 'link';
+}>, canvas: CanvasDoc, go: (id: string) => void): void;
 export {};

package/dist/viewer-lib/types/viewer/src/pages/canvas/items.d.ts CHANGED Viewed

@@ -1,9 +1,12 @@
-import type { CanvasSection, ImageItem, NoteItem, ScreenItem, Theme, UrlItem } from '../../../../src/shared/types';
+import type { CanvasSection, ImageItem, NoteItem, RuntimeMessage, ScreenItem, Theme, UrlItem } from '../../../../src/shared/types';
 import type { Placed } from './layout';
 import { type ViewStore } from './view-state';
 import type { FrameMode } from './viewport';
 export interface FrameEvents {
     onGo(from: string, target: string): void;
+    onLink(from: string, message: Extract<RuntimeMessage, {
+        type: 'link';
+    }>): void;
     onWheel(frame: HTMLIFrameElement, message: {
         deltaX: number;
         deltaY: number;

package/dist/viewer-lib/types/viewer/src/ui/toast.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-export type ToastTone = 'ok' | 'error';
+export type ToastTone = 'ok' | 'info' | 'error';
 /** A short confirmation; `error` shows a failure and stays a little longer to be read. */
 export declare function toast(title: string, text?: string, tone?: ToastTone): void;
 /** Only the first mounted Toaster shows toasts: an app that embeds the viewer may keep its own. */

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "foss-design",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "description": "Design canvases and design systems for coding agents: live, animated, clickable screens on an infinite canvas, served locally from a .design folder.",
   "type": "module",
   "license": "MIT",