npm - foss-design - Versions diffs - 0.4.2 → 0.5.0 - Mend

foss-design 0.4.2 → 0.5.0

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 (10) hide show

package/README.md +1 -1
package/dist/cli.js +2883 -2371
package/dist/runtime/index.js +33 -6
package/dist/viewer/assets/{index-k3bj-XTr.js → index-D6sHcSw6.js} +48 -48
package/dist/viewer/index.html +1 -1
package/dist/viewer-lib/index.js +98 -13
package/dist/viewer-lib/types/src/shared/routes.d.ts +37 -0
package/dist/viewer-lib/types/src/shared/types.d.ts +6 -0
package/dist/viewer-lib/types/viewer/src/lib/frames.d.ts +6 -4
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-k3bj-XTr.js"></script>
+    <script type="module" crossorigin src="./assets/index-D6sHcSw6.js"></script>
     <link rel="stylesheet" crossorigin href="./assets/index-BL2Cxj98.css">
   </head>
   <body>

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

@@ -7078,6 +7078,78 @@ async function copyText(text, label = "Copied") {
 	}
 }
 //#endregion
+//#region src/shared/routes.ts
+function split(path) {
+	return path.split("/").filter(Boolean);
+}
+function compileRoute(pattern) {
+	return {
+		pattern,
+		segments: split(pattern).map((part) => {
+			if (part === "*") return { kind: "splat" };
+			if (part.startsWith(":")) return {
+				kind: "param",
+				optional: part.endsWith("?")
+			};
+			return {
+				kind: "static",
+				value: part
+			};
+		})
+	};
+}
+function decode(part) {
+	try {
+		return decodeURIComponent(part);
+	} catch {
+		return part;
+	}
+}
+/** How well a route matches a path (higher is more specific), or null when it does not. */
+function scoreRoute(route, path) {
+	const parts = split(path.split(/[?#]/)[0] ?? "").map(decode);
+	const walk = (s, p) => {
+		if (s === route.segments.length) return p === parts.length ? 0 : null;
+		const segment = route.segments[s];
+		if (segment.kind === "splat") return 0;
+		if (segment.kind === "static") {
+			if (parts[p] !== segment.value) return null;
+			const rest = walk(s + 1, p + 1);
+			return rest === null ? null : rest + 4;
+		}
+		if (p < parts.length) {
+			const rest = walk(s + 1, p + 1);
+			if (rest !== null) return rest + 2;
+		}
+		return segment.optional ? walk(s + 1, p) : null;
+	};
+	return walk(0, 0);
+}
+/** The most specific match for a path; the first one listed wins a tie. */
+function matchRoute(entries, path) {
+	let best = null;
+	for (const entry of entries) for (const route of entry.routes) {
+		const score = scoreRoute(route, path);
+		if (score !== null && (!best || score > best.score)) best = {
+			score,
+			value: entry.value
+		};
+	}
+	return best?.value ?? null;
+}
+/**
+* The app path a link points at, from its `href` as written: an absolute path as it is, a
+* relative one against the route of the screen it is in (or `/`). Null for links that do not
+* lead to another page of the app: `#…`, other schemes, other sites.
+*/
+function linkPath(href, base = "/") {
+	const raw = href.trim();
+	if (!raw || raw.startsWith("#")) return null;
+	if (/^[a-z][a-z0-9+.-]*:/i.test(raw) || raw.startsWith("//")) return null;
+	const url = new URL(raw, `http://app.invalid${base.replace(/\/:[^/]+\??|\/\*$/g, "/x")}`);
+	return url.pathname + url.search + url.hash;
+}
+//#endregion
 //#region viewer/src/lib/frames.ts
 /** Routes runtime messages to whoever listens to the frame that sent them. */
 var handlers = /* @__PURE__ */ new Map();
@@ -7157,11 +7229,13 @@ 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.
+* A link, form or history push the runtime kept from leaving its frame. The path goes to the
+* screen whose `route` matches it best (a relative `href` resolves against the route of the
+* screen it is in); without routes, a path whose last part names a screen still opens it. A
+* link to another site opens in a new tab. A push nobody's route matches belongs to the
+* screen's own router; a link or form that leads nowhere stays put with a note.
 */
-function followLink(message, canvas, go) {
+function followLink(message, canvas, go, from) {
 	if (message.form) {
 		toast("Forms are not sent from a screen", void 0, "info");
 		return;
@@ -7172,14 +7246,25 @@ function followLink(message, canvas, go) {
 		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?$/, "");
+	const frames = canvas.pages.flatMap((page) => page.sections.flatMap((section) => section.items.filter((item) => item.kind === "screen" || item.kind === "url")));
+	const here = frames.find((item) => item.id === from);
+	const path = message.raw === void 0 ? message.path : linkPath(message.raw, here?.routes?.[0]);
+	if (path === null) return;
+	const routed = matchRoute(frames.map((item) => ({
+		routes: (item.routes ?? []).map(compileRoute),
+		value: item.id
+	})), path);
+	if (routed) {
+		if (routed !== from) go(routed);
+		return;
+	}
+	const bare = path.split(/[?#]/)[0].replace(/\/+$/, "");
+	let name = bare.slice(bare.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");
+	if (name && name !== from && frames.some((item) => item.id === name)) go(name);
+	else if (!message.pushed) toast("No screen for this link", path, "info");
 }
 //#endregion
 //#region viewer/src/components/inspector.tsx
@@ -8854,7 +8939,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 }));
+			} else if (message.type === "link" && canvas) followLink(message, canvas, (id) => navigate(fullHref(canvasId, id, theme), { replace: true }), itemId);
 		});
 	}, [url, item?.kind]);
 	if (error) return /* @__PURE__ */ jsx(NotFound, {
@@ -12160,7 +12245,7 @@ function CanvasView({ canvas, page }) {
 			console.warn(`[design] go("${target}"): no such screen`);
 		},
 		onLink(from, message) {
-			followLink(message, canvas, (id) => this.onGo(from, id));
+			followLink(message, canvas, (id) => this.onGo(from, id), from);
 		},
 		onWheel(frame, message) {
 			const root = frame.closest(".canvas-root");
@@ -12669,7 +12754,7 @@ function Player({ canvas, itemId }) {
 			} 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?.id);
 		});
 	}, [
 		item,
@@ -12946,7 +13031,7 @@ function PhoneViewer({ canvas, pageId, itemId }) {
 			else if (message.type === "error") setErrors((list) => list.includes(message.message) ? list : [...list, message.message]);
 			else if (message.type === "updated") setErrors([]);
 			else if (message.type === "go") goTo(message.target.includes("/") ? message.target.split("/")[1] : message.target);
-			else if (message.type === "link") followLink(message, canvas, goTo);
+			else if (message.type === "link") followLink(message, canvas, goTo, item.id);
 		});
 	}, [frameEl, src]);
 	useEffect(() => {

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

@@ -0,0 +1,37 @@
+/**
+ * Screen routes: the app URL a screen stands for (`/databases/:id`), so a plain link in any
+ * screen (`href="/databases/orders-db"`) opens the screen that shows that URL. Patterns work
+ * like a router's: `:param` matches one segment, `:param?` an optional one, a trailing `*` the
+ * rest of the path.
+ */
+type Segment = {
+    kind: 'static';
+    value: string;
+} | {
+    kind: 'param';
+    optional: boolean;
+} | {
+    kind: 'splat';
+};
+export interface CompiledRoute {
+    pattern: string;
+    segments: Segment[];
+}
+/** What is wrong with a pattern, or null. */
+export declare function routeError(pattern: string): string | null;
+export declare function compileRoute(pattern: string): CompiledRoute;
+/** How well a route matches a path (higher is more specific), or null when it does not. */
+export declare function scoreRoute(route: CompiledRoute, path: string): number | null;
+export interface Routed<T> {
+    routes: CompiledRoute[];
+    value: T;
+}
+/** The most specific match for a path; the first one listed wins a tie. */
+export declare function matchRoute<T>(entries: Routed<T>[], path: string): T | null;
+/**
+ * The app path a link points at, from its `href` as written: an absolute path as it is, a
+ * relative one against the route of the screen it is in (or `/`). Null for links that do not
+ * lead to another page of the app: `#…`, other schemes, other sites.
+ */
+export declare function linkPath(href: string, base?: string): string | null;
+export {};

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

@@ -47,6 +47,8 @@ interface ItemBase {
     id: string;
     title: string;
     description?: string;
+    /** Screens and url items: the app URL patterns they stand for (`/databases/:id`). */
+    routes?: string[];
     /** Free-layout position on the page, in canvas pixels. */
     x?: number;
     y?: number;
@@ -296,6 +298,10 @@ export type RuntimeMessage = {
     href: string;
     path: string | null;
     form: boolean;
+    /** The `href` as written (0.4.3+), resolved by the viewer against the screen's route. */
+    raw?: string;
+    /** Sent by the screen's own `history.pushState`, not a click: the screen already moved. */
+    pushed?: boolean;
 } | {
     source: 'design-runtime';
     key: string;

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

@@ -23,11 +23,13 @@ export declare function frameSrc(url: string, theme: Theme, extra?: Record<strin
 /** 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.
+ * A link, form or history push the runtime kept from leaving its frame. The path goes to the
+ * screen whose `route` matches it best (a relative `href` resolves against the route of the
+ * screen it is in); without routes, a path whose last part names a screen still opens it. A
+ * link to another site opens in a new tab. A push nobody's route matches belongs to the
+ * screen's own router; a link or form that leads nowhere stays put with a note.
  */
 export declare function followLink(message: Extract<RuntimeMessage, {
     type: 'link';
-}>, canvas: CanvasDoc, go: (id: string) => void): void;
+}>, canvas: CanvasDoc, go: (id: string) => void, from?: string): void;
 export {};

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "foss-design",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "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",