@heyramzi/ui 2.11.1 → 2.11.2

package/dist/canvas/headless/canvas-cleanup.js

@@ -1,70 +1,90 @@
+/**
+* Data fields that exist only at runtime and must never persist. The tree child
+* counts are recomputed on load; saved, they froze stale values.
+*/
 const RUNTIME_DATA_FIELDS = new Set([
-    "leftChildCount",
-    "rightChildCount",
-    "locale"
+	"leftChildCount",
+	"rightChildCount",
+	"locale"
 ]);
 function persistentData(source) {
-    const data = {};
-    for (const [key, value] of Object.entries(source ?? {})){
-        if (RUNTIME_DATA_FIELDS.has(key)) continue;
-        if (typeof value === "function" || value === undefined) continue;
-        data[key] = value;
-    }
-    return data;
+	const data = {};
+	for (const [key, value] of Object.entries(source ?? {})) {
+		if (RUNTIME_DATA_FIELDS.has(key)) continue;
+		if (typeof value === "function" || value === undefined) continue;
+		data[key] = value;
+	}
+	return data;
 }
+/** Strip runtime-only content from nodes for serialization. */
+// Top-level fields are an allowlist, dropping SvelteFlow's runtime state. Data
+// fields keep everything but functions and RUNTIME_DATA_FIELDS, so new fields survive saves.
 export function stripCallbacks(nodes) {
-    return nodes.map((n)=>{
-        const result = {
-            id: n.id,
-            type: n.type,
-            position: n.position,
-            data: persistentData(n.data)
-        };
-        if (n.parentId) result.parentId = n.parentId;
-        if (n.extent) result.extent = n.extent;
-        if (n.style) result.style = n.style;
-        if (typeof n.width === "number") result.width = n.width;
-        if (typeof n.height === "number") result.height = n.height;
-        if (typeof n.zIndex === "number") result.zIndex = n.zIndex;
-        return result;
-    });
+	return nodes.map((n) => {
+		// Rebuilt field-by-field; `N` is a subtype of the shape rebuilt here, so the
+		// narrowing back to `N` is the one place the type can't follow.
+		const result = {
+			id: n.id,
+			type: n.type,
+			position: n.position,
+			data: persistentData(n.data)
+		};
+		if (n.parentId) result.parentId = n.parentId;
+		if (n.extent) result.extent = n.extent;
+		if (n.style) result.style = n.style;
+		if (typeof n.width === "number") result.width = n.width;
+		if (typeof n.height === "number") result.height = n.height;
+		if (typeof n.zIndex === "number") result.zIndex = n.zIndex;
+		return result;
+	});
 }
+/**
+* Remove edges that reference nodes not present in the node list.
+*/
 export function removeOrphanedEdges(edges, nodeIds) {
-    return edges.filter((edge)=>nodeIds.has(edge.source) && nodeIds.has(edge.target));
+	return edges.filter((edge) => nodeIds.has(edge.source) && nodeIds.has(edge.target));
 }
+/**
+* Parents before children, as SvelteFlow needs. Roots keep their order,
+* because array order is paint order and flipping it buries new ink.
+*/
 export function sortParentsFirst(nodes) {
-    const idSet = new Set(nodes.map((n)=>n.id));
-    const roots = [];
-    const childrenOf = new Map();
-    for (const n of nodes){
-        if (!n.parentId || !idSet.has(n.parentId)) {
-            roots.push(n);
-        } else {
-            const siblings = childrenOf.get(n.parentId) ?? [];
-            siblings.push(n);
-            childrenOf.set(n.parentId, siblings);
-        }
-    }
-    const sorted = [];
-    const stack = roots.toReversed();
-    for(let node = stack.pop(); node !== undefined; node = stack.pop()){
-        sorted.push(node);
-        const children = childrenOf.get(node.id);
-        if (children) {
-            for(let i = children.length - 1; i >= 0; i--){
-                stack.push(children[i]);
-            }
-        }
-    }
-    return sorted;
+	const idSet = new Set(nodes.map((n) => n.id));
+	const roots = [];
+	const childrenOf = new Map();
+	for (const n of nodes) {
+		if (!n.parentId || !idSet.has(n.parentId)) {
+			roots.push(n);
+		} else {
+			const siblings = childrenOf.get(n.parentId) ?? [];
+			siblings.push(n);
+			childrenOf.set(n.parentId, siblings);
+		}
+	}
+	const sorted = [];
+	const stack = roots.toReversed();
+	for (let node = stack.pop(); node !== undefined; node = stack.pop()) {
+		sorted.push(node);
+		const children = childrenOf.get(node.id);
+		if (children) {
+			for (let i = children.length - 1; i >= 0; i--) {
+				stack.push(children[i]);
+			}
+		}
+	}
+	return sorted;
 }
+/**
+* Fix broken parentId references by clearing parentId/extent
+* when the referenced parent no longer exists.
+*/
 export function fixBrokenParentIds(nodes) {
-    const nodeIds = new Set(nodes.map((n)=>n.id));
-    return nodes.map((node)=>{
-        if (node.parentId && !nodeIds.has(node.parentId)) {
-            const { parentId: _, extent: __, ...rest } = node;
-            return rest;
-        }
-        return node;
-    });
+	const nodeIds = new Set(nodes.map((n) => n.id));
+	return nodes.map((node) => {
+		if (node.parentId && !nodeIds.has(node.parentId)) {
+			const { parentId: _, extent: __, ...rest } = node;
+			return rest;
+		}
+		return node;
+	});
 }

package/dist/canvas/headless/edge-anchors.js

@@ -1,134 +1,133 @@
 function center(rect) {
-    return {
-        x: rect.x + rect.width / 2,
-        y: rect.y + rect.height / 2
-    };
+	return {
+		x: rect.x + rect.width / 2,
+		y: rect.y + rect.height / 2
+	};
 }
 function anchorOn(rect, side) {
-    const c = center(rect);
-    switch(side){
-        case "top":
-            return {
-                x: c.x,
-                y: rect.y,
-                side
-            };
-        case "bottom":
-            return {
-                x: c.x,
-                y: rect.y + rect.height,
-                side
-            };
-        case "left":
-            return {
-                x: rect.x,
-                y: c.y,
-                side
-            };
-        case "right":
-            return {
-                x: rect.x + rect.width,
-                y: c.y,
-                side
-            };
-    }
+	const c = center(rect);
+	switch (side) {
+		case "top": return {
+			x: c.x,
+			y: rect.y,
+			side
+		};
+		case "bottom": return {
+			x: c.x,
+			y: rect.y + rect.height,
+			side
+		};
+		case "left": return {
+			x: rect.x,
+			y: c.y,
+			side
+		};
+		case "right": return {
+			x: rect.x + rect.width,
+			y: c.y,
+			side
+		};
+	}
 }
+/** The side a stored handle id names, or null for an id that isn't one of the four. */
 export function sideFromHandle(id) {
-    return id === "top" || id === "right" || id === "bottom" || id === "left" ? id : null;
+	return id === "top" || id === "right" || id === "bottom" || id === "left" ? id : null;
 }
+/** The side of `rect` that looks at `point`: the wider pull, scaled by the box's own shape, wins. */
 function sideFacing(rect, point) {
-    const c = center(rect);
-    const dx = (point.x - c.x) / rect.width;
-    const dy = (point.y - c.y) / rect.height;
-    if (Math.abs(dx) > Math.abs(dy)) return dx >= 0 ? "right" : "left";
-    return dy >= 0 ? "bottom" : "top";
+	const c = center(rect);
+	const dx = (point.x - c.x) / rect.width;
+	const dy = (point.y - c.y) / rect.height;
+	if (Math.abs(dx) > Math.abs(dy)) return dx >= 0 ? "right" : "left";
+	return dy >= 0 ? "bottom" : "top";
 }
+/** The anchors when the author pinned an end, or null for a link with no pin. */
 function pinnedAnchors(source, target, pins) {
-    if (pins.source && pins.target) {
-        return {
-            source: anchorOn(source, pins.source),
-            target: anchorOn(target, pins.target)
-        };
-    }
-    if (pins.source) {
-        const from = anchorOn(source, pins.source);
-        return {
-            source: from,
-            target: anchorOn(target, sideFacing(target, from))
-        };
-    }
-    if (pins.target) {
-        const to = anchorOn(target, pins.target);
-        return {
-            source: anchorOn(source, sideFacing(source, to)),
-            target: to
-        };
-    }
-    return null;
+	if (pins.source && pins.target) {
+		return {
+			source: anchorOn(source, pins.source),
+			target: anchorOn(target, pins.target)
+		};
+	}
+	if (pins.source) {
+		const from = anchorOn(source, pins.source);
+		return {
+			source: from,
+			target: anchorOn(target, sideFacing(target, from))
+		};
+	}
+	if (pins.target) {
+		const to = anchorOn(target, pins.target);
+		return {
+			source: anchorOn(source, sideFacing(source, to)),
+			target: to
+		};
+	}
+	return null;
 }
+/** The sides that face each other. A pin is the dot the author dragged from: it wins, and the free end faces it. */
 export function bestAnchors(source, target, pins = {}) {
-    const pinned = pinnedAnchors(source, target, pins);
-    if (pinned) return pinned;
-    const gapX = Math.max(target.x - (source.x + source.width), source.x - (target.x + target.width));
-    const gapY = Math.max(target.y - (source.y + source.height), source.y - (target.y + target.height));
-    if (gapX <= 0 && gapY <= 0) {
-        const side = detourSide(source, target);
-        return {
-            source: anchorOn(source, side),
-            target: anchorOn(target, side)
-        };
-    }
-    if (gapX > gapY) {
-        const targetIsRight = center(target).x >= center(source).x;
-        return {
-            source: anchorOn(source, targetIsRight ? "right" : "left"),
-            target: anchorOn(target, targetIsRight ? "left" : "right")
-        };
-    }
-    const targetIsBelow = center(target).y >= center(source).y;
-    return {
-        source: anchorOn(source, targetIsBelow ? "bottom" : "top"),
-        target: anchorOn(target, targetIsBelow ? "top" : "bottom")
-    };
+	const pinned = pinnedAnchors(source, target, pins);
+	if (pinned) return pinned;
+	const gapX = Math.max(target.x - (source.x + source.width), source.x - (target.x + target.width));
+	const gapY = Math.max(target.y - (source.y + source.height), source.y - (target.y + target.height));
+	if (gapX <= 0 && gapY <= 0) {
+		const side = detourSide(source, target);
+		return {
+			source: anchorOn(source, side),
+			target: anchorOn(target, side)
+		};
+	}
+	if (gapX > gapY) {
+		const targetIsRight = center(target).x >= center(source).x;
+		return {
+			source: anchorOn(source, targetIsRight ? "right" : "left"),
+			target: anchorOn(target, targetIsRight ? "left" : "right")
+		};
+	}
+	const targetIsBelow = center(target).y >= center(source).y;
+	return {
+		source: anchorOn(source, targetIsBelow ? "bottom" : "top"),
+		target: anchorOn(target, targetIsBelow ? "top" : "bottom")
+	};
 }
+// Which side an overlapping pair travels on: the wider overhang wins, ties go right.
 function detourSide(source, target) {
-    const sL = source.x;
-    const sR = source.x + source.width;
-    const tL = target.x;
-    const tR = target.x + target.width;
-    if (sL <= tL && sR >= tR) {
-        return sR - tR >= tL - sL ? "right" : "left";
-    }
-    if (tL <= sL && tR >= sR) {
-        return tR - sR >= sL - tL ? "right" : "left";
-    }
-    return "right";
+	const sL = source.x;
+	const sR = source.x + source.width;
+	const tL = target.x;
+	const tR = target.x + target.width;
+	if (sL <= tL && sR >= tR) {
+		return sR - tR >= tL - sL ? "right" : "left";
+	}
+	if (tL <= sL && tR >= sR) {
+		return tR - sR >= sL - tL ? "right" : "left";
+	}
+	return "right";
 }
+/** The x (left, right) or y (top, bottom) a same-side path runs along: one margin past the further box edge. */
 export function sideDetour(anchors, margin = 40) {
-    const { source, target } = anchors;
-    switch(source.side){
-        case "left":
-            return Math.min(source.x, target.x) - margin;
-        case "right":
-            return Math.max(source.x, target.x) + margin;
-        case "top":
-            return Math.min(source.y, target.y) - margin;
-        case "bottom":
-            return Math.max(source.y, target.y) + margin;
-    }
+	const { source, target } = anchors;
+	switch (source.side) {
+		case "left": return Math.min(source.x, target.x) - margin;
+		case "right": return Math.max(source.x, target.x) + margin;
+		case "top": return Math.min(source.y, target.y) - margin;
+		case "bottom": return Math.max(source.y, target.y) + margin;
+	}
 }
+/** Where the line from this outline's centre toward `toward` crosses the outline, `gap` further out. */
 export function outlinePoint(o, toward, gap = 0) {
-    const dx = toward.x - o.cx;
-    const dy = toward.y - o.cy;
-    const len = Math.hypot(dx, dy);
-    if (len === 0) return {
-        x: o.cx,
-        y: o.cy
-    };
-    const t = o.round ? 1 / Math.hypot(dx / o.rx, dy / o.ry) : Math.min(dx === 0 ? Infinity : o.rx / Math.abs(dx), dy === 0 ? Infinity : o.ry / Math.abs(dy));
-    const reach = t * len + gap;
-    return {
-        x: o.cx + dx / len * reach,
-        y: o.cy + dy / len * reach
-    };
+	const dx = toward.x - o.cx;
+	const dy = toward.y - o.cy;
+	const len = Math.hypot(dx, dy);
+	if (len === 0) return {
+		x: o.cx,
+		y: o.cy
+	};
+	const t = o.round ? 1 / Math.hypot(dx / o.rx, dy / o.ry) : Math.min(dx === 0 ? Infinity : o.rx / Math.abs(dx), dy === 0 ? Infinity : o.ry / Math.abs(dy));
+	const reach = t * len + gap;
+	return {
+		x: o.cx + dx / len * reach,
+		y: o.cy + dy / len * reach
+	};
 }

package/dist/canvas/headless/edge-memo.js

@@ -1,28 +1,30 @@
+/** A box as `x,y,width,height`, or "" for a card with no size yet. */
 export function boxKey(rect) {
-    return rect ? `${rect.x},${rect.y},${rect.width},${rect.height}` : "";
+	return rect ? `${rect.x},${rect.y},${rect.width},${rect.height}` : "";
 }
 export function parseBox(key) {
-    if (!key) return null;
-    const [x, y, width, height] = key.split(",").map(Number);
-    return {
-        x,
-        y,
-        width,
-        height
-    };
+	if (!key) return null;
+	const [x, y, width, height] = key.split(",").map(Number);
+	return {
+		x,
+		y,
+		width,
+		height
+	};
 }
+/** Remembers up to `limit` results by key, dropping the least recently read first. */
 export function createMemo(limit) {
-    const seen = new Map();
-    return (key, compute)=>{
-        const hit = seen.get(key);
-        if (hit !== undefined) {
-            seen.delete(key);
-            seen.set(key, hit);
-            return hit;
-        }
-        const value = compute();
-        seen.set(key, value);
-        if (seen.size > limit) seen.delete(seen.keys().next().value);
-        return value;
-    };
+	const seen = new Map();
+	return (key, compute) => {
+		const hit = seen.get(key);
+		if (hit !== undefined) {
+			seen.delete(key);
+			seen.set(key, hit);
+			return hit;
+		}
+		const value = compute();
+		seen.set(key, value);
+		if (seen.size > limit) seen.delete(seen.keys().next().value);
+		return value;
+	};
 }

package/dist/canvas/headless/edge-serialization.js

@@ -1,31 +1,21 @@
 export function serializeFlowEdge(edge) {
-    return {
-        id: edge.id,
-        source: edge.source,
-        target: edge.target,
-        ...edge.type && {
-            type: edge.type
-        },
-        ...edge.label && {
-            label: edge.label
-        },
-        ...edge.animated && {
-            animated: edge.animated
-        },
-        ...edge.sourceHandle && {
-            sourceHandle: edge.sourceHandle
-        },
-        ...edge.targetHandle && {
-            targetHandle: edge.targetHandle
-        },
-        ...edge.style && {
-            style: edge.style
-        },
-        ...edge.data && {
-            data: edge.data
-        }
-    };
+	return {
+		id: edge.id,
+		source: edge.source,
+		target: edge.target,
+		...edge.type && { type: edge.type },
+		...edge.label && { label: edge.label },
+		...edge.animated && { animated: edge.animated },
+		...edge.sourceHandle && { sourceHandle: edge.sourceHandle },
+		...edge.targetHandle && { targetHandle: edge.targetHandle },
+		...edge.style && { 
+		// WHY: xyflow types `Edge["style"]` as a CSS-properties object (or a
+		// string, in older shapes); the persisted `CanvasEdge` just wants the
+		// properties bag. Narrowed once here.
+style: edge.style },
+		...edge.data && { data: edge.data }
+	};
 }
 export function serializeFlowEdges(edges) {
-    return edges.map(serializeFlowEdge);
+	return edges.map(serializeFlowEdge);
 }