refactor(renderer): simplify stroke width handling and remove unused …

apps/docs/src/components/FlowscapeEditor/index.tsx

@@ -216,31 +216,31 @@ function FlowscapeEditorInner({
 			frameNode.setPosition(0, 34);
 			frameNode.setFill("#0b1220");
 			frameNode.setStrokeFill("#2f7cf6");
-			frameNode.setStrokeWidth({ t: 4, r: 4, b: 4, l: 4 });
+			frameNode.setStrokeWidth([4]);
 			layerWorld.addNode(frameNode);
 
 			const leftCard = new NodeRect(nextNodeId++);
 			leftCard.setSize(220, 108);
 			leftCard.setPosition(-268, -88);
 			leftCard.setFill("#172036");
 			leftCard.setStrokeFill("#38bdf8");
-			leftCard.setStrokeWidth({ t: 4, r: 4, b: 4, l: 4 });
+			leftCard.setStrokeWidth([4]);
 			layerWorld.addNode(leftCard);
 
 			const centerCard = new NodeRect(nextNodeId++);
 			centerCard.setSize(220, 108);
 			centerCard.setPosition(0, -88);
 			centerCard.setFill("#172036");
 			centerCard.setStrokeFill("#22d3ee");
-			centerCard.setStrokeWidth({ t: 4, r: 4, b: 4, l: 4 });
+			centerCard.setStrokeWidth([4]);
 			layerWorld.addNode(centerCard);
 
 			const rightCard = new NodeRect(nextNodeId++);
 			rightCard.setSize(220, 108);
 			rightCard.setPosition(268, -88);
 			rightCard.setFill("#172036");
 			rightCard.setStrokeFill("#f59e0b");
-			rightCard.setStrokeWidth({ t: 4, r: 4, b: 4, l: 4 });
+			rightCard.setStrokeWidth([4]);
 			layerWorld.addNode(rightCard);
 
 			const leftCardTitle = new NodeText(nextNodeId++);
@@ -291,7 +291,7 @@ function FlowscapeEditorInner({
 			centerHub.setPosition(0, 132);
 			centerHub.setFill("#0ea5e9");
 			centerHub.setStrokeFill("#ffffff");
-			centerHub.setStrokeWidth({ t: 4, r: 4, b: 4, l: 4 });
+			centerHub.setStrokeWidth([4]);
 			layerWorld.addNode(centerHub);
 
 			const hubLabel = new NodeText(nextNodeId++);
@@ -324,7 +324,7 @@ function FlowscapeEditorInner({
 			starNode.setPosition(322, 142);
 			starNode.setFill("#f59e0b");
 			starNode.setStrokeFill("#ffffff");
-			starNode.setStrokeWidth({ t: 4, r: 4, b: 4, l: 4 });
+			starNode.setStrokeWidth([4]);
 			starNode.setRotation(Math.PI / 9);
 			layerWorld.addNode(starNode);
 

apps/docs/src/components/FlowscapeScenePreview/index.tsx

@@ -276,15 +276,10 @@ function toStrokeWidth(
 	}
 
 	if (typeof input === "number") {
-		return { t: input, r: input, b: input, l: input };
+		return [input];
 	}
 
-	return {
-		t: input.t ?? 0,
-		r: input.r ?? 0,
-		b: input.b ?? 0,
-		l: input.l ?? 0,
-	};
+	return [0];
 }
 
 function toCornerRadius(
@@ -295,15 +290,10 @@ function toCornerRadius(
 	}
 
 	if (typeof input === "number") {
-		return { tl: input, tr: input, br: input, bl: input };
+		return [input];
 	}
 
-	return {
-		tl: input.tl ?? 0,
-		tr: input.tr ?? 0,
-		br: input.br ?? 0,
-		bl: input.bl ?? 0,
-	};
+	return [0];
 }
 
 function toStrokeAlign(
@@ -981,12 +971,7 @@ function addDebugOverlays(
 			);
 			aabbNode.setFill("#00000000");
 			aabbNode.setStrokeFill(options.aabbColor);
-			aabbNode.setStrokeWidth({
-				t: strokeWidth,
-				r: strokeWidth,
-				b: strokeWidth,
-				l: strokeWidth,
-			});
+			aabbNode.setStrokeWidth([strokeWidth]);
 			aabbNode.setLocked(true);
 			layerWorld.addNode(aabbNode as unknown as WorldAddNodeArg);
 		}
@@ -1016,7 +1001,7 @@ function addDebugOverlays(
 			pivotNode.setPosition(pivot.x, pivot.y);
 			pivotNode.setFill(options.pivotColor);
 			pivotNode.setStrokeFill("#ffffff");
-			pivotNode.setStrokeWidth({ t: 1, r: 1, b: 1, l: 1 });
+			pivotNode.setStrokeWidth([1]);
 			pivotNode.setLocked(true);
 			layerWorld.addNode(pivotNode as unknown as WorldAddNodeArg);
 		}
@@ -1059,34 +1044,71 @@ function FlowscapeScenePreviewInner({
 	const { showAABB, showOBB, showPivot, showViewBounds, showOrbit } =
 		debugNodes;
 
-	RendererCanvasBase.DEBUG_OBB = showOBB;
-	RendererCanvasBase.DEBUG_AABB = showAABB;
-	RendererCanvasBase.DEBUG_ORBIT = showOrbit;
-	RendererCanvasBase.DEBUG_PIVOT = showPivot;
-	RendererCanvasBase.DEBUG_VIEW_BOUNDS = showViewBounds;
+	RendererCanvasBase.DEBUG_OBB = showOBB ?? true;
+	RendererCanvasBase.DEBUG_AABB = showAABB ?? true;
+	RendererCanvasBase.DEBUG_ORBIT = showOrbit ?? true;
+	RendererCanvasBase.DEBUG_PIVOT = showPivot ?? true;
+	RendererCanvasBase.DEBUG_VIEW_BOUNDS = showViewBounds ?? true;
 	const mountRef = useRef<HTMLDivElement | null>(null);
 
 	const resolvedSpec = useMemo<FlowscapeScenePreviewSpec>(() => {
+		const defaultBackground = DEFAULT_SPEC.background;
+		const specBackground = spec?.background;
+
+		const defaultLogoSize = defaultBackground?.logoSize;
+		const specLogoSize = specBackground?.logoSize;
+
 		return {
 			...DEFAULT_SPEC,
 			...spec,
+
 			background: {
-				...DEFAULT_SPEC.background,
-				...spec?.background,
+				fill:
+					specBackground?.fill ??
+					defaultBackground?.fill,
+
+				showLogo:
+					specBackground?.showLogo ??
+					defaultBackground?.showLogo,
+
+				logoOpacity:
+					specBackground?.logoOpacity ??
+					defaultBackground?.logoOpacity,
+
 				logoSize: {
-					...DEFAULT_SPEC.background?.logoSize,
-					...spec?.background?.logoSize,
+					width:
+						specLogoSize?.width ??
+						defaultLogoSize?.width,
+
+					height:
+						specLogoSize?.height ??
+						defaultLogoSize?.height,
 				},
 			},
+
 			camera: {
-				...DEFAULT_SPEC.camera,
-				...spec?.camera,
+				padding:
+					spec?.camera?.padding ??
+					DEFAULT_SPEC.camera?.padding,
+
+				minScale:
+					spec?.camera?.minScale ??
+					DEFAULT_SPEC.camera?.minScale,
+
+				maxScale:
+					spec?.camera?.maxScale ??
+					DEFAULT_SPEC.camera?.maxScale,
 			},
+
 			debug: {
 				...(DEFAULT_SPEC.debug ?? {}),
 				...spec?.debug,
 			},
-			nodes: spec?.nodes?.length ? spec.nodes : DEFAULT_SPEC.nodes,
+
+			nodes:
+				spec?.nodes?.length
+					? spec.nodes
+					: DEFAULT_SPEC.nodes,
 		};
 	}, [spec]);
 

apps/docs/tsconfig.json

@@ -1,11 +1,21 @@
 {
-	// This file is not used in compilation. It is here just for a nice editor experience.
 	"extends": "@docusaurus/tsconfig",
 	"compilerOptions": {
-		"baseUrl": "."
+		"baseUrl": ".",
+		"paths": {
+			"@site/*": [
+				"./*"
+			],
+			"@flowscape-ui/core-sdk": [
+				"../engine/src/index.ts"
+			],
+			"@flowscape-ui/core-sdk/*": [
+				"../engine/src/*"
+			]
+		}
 	},
-	"paths": {
-		"@flowscape-ui/core-sdk": ["../../packages/engine/src/index.ts"]
-	},
-	"exclude": [".docusaurus", "build"]
-}
+	"exclude": [
+		".docusaurus",
+		"build"
+	]
+}

package.json

@@ -17,9 +17,9 @@
 		"dev:docs": "turbo run dev --filter=@flowscape-ui/docs",
 		"build:playground": "turbo run build --filter=@flowscape-ui/playground",
 		"build:docs": "turbo run build --filter=@flowscape-ui/docs",
-		"version:patch": "cd packages/engine && bun pm version patch --no-git-tag-version && cd ../.. && bun install --lockfile-only",
-		"version:minor": "cd packages/engine && bun pm version minor --no-git-tag-version && cd ../.. && bun install --lockfile-only",
-		"version:major": "cd packages/engine && bun pm version major --no-git-tag-version && cd ../.. && bun install --lockfile-only"
+		"version:patch": "cd packages/engine && npm version patch --no-git-tag-version && cd ../.. && bun install --lockfile-only",
+		"version:minor": "cd packages/engine && npm version minor --no-git-tag-version && cd ../.. && bun install --lockfile-only",
+		"version:major": "cd packages/engine && npm version major --no-git-tag-version && cd ../.. && bun install --lockfile-only"
 	},
 	"devDependencies": {
 		"prettier": "^3.7.4",

packages/engine/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@flowscape-ui/core-sdk",
-	"version": "2.0.3",
+	"version": "2.0.4",
 	"description": "Framework-agnostic 2D graphics engine for infinite canvases, editors, design tools, and visual applications.",
 	"license": "MIT",
 	"sideEffects": false,