camox 0.77.0 → 0.78.0

package/dist/features/canvas/canvasItems.js

@@ -2,7 +2,38 @@ import { fitCanvasPage } from "./canvasCamera.js";
 import { CANVAS_DEVICES } from "./canvasPages.js";
 
 //#region src/features/canvas/canvasItems.ts
-const CANVAS_SLOT_WIDTH = CANVAS_DEVICES.desktop.width;
+/** The narrowest a Page's area gets: the desktop its frame emulates. */
+const MIN_CANVAS_SLOT_WIDTH = CANVAS_DEVICES.desktop.width;
+/**
+* The width of a Page's area in the Canvas row, which a desktop frame fills. Device selection
+* resizes frames, not their area. A working area wider than the desktop widens it, so a snapped
+* Page shows at its true size, never enlarged; a narrower one keeps the desktop, zoomed out.
+*/
+function canvasSlotWidth(workingAreaWidth) {
+	return Math.max(MIN_CANVAS_SLOT_WIDTH, workingAreaWidth - 16 * 2);
+}
+/** How much wider than CMS_SIDEBAR_WIDTH each sidebar beside the Canvas gets, at most. */
+const MAX_CMS_SIDEBAR_GROWTH = 100;
+/**
+* How the window splits between the sidebars and the Canvas row. Once a snapped desktop Page
+* shows at its true size, extra width first widens both sidebars, by up to
+* MAX_CMS_SIDEBAR_GROWTH each, then widens the Pages' areas.
+*/
+function canvasLayout(windowWidth) {
+	const snappedDesktop = MIN_CANVAS_SLOT_WIDTH + 16 * 2;
+	const spare = (windowWidth - 265 * 2 - snappedDesktop) / 2;
+	const sidebarWidth = 265 + Math.floor(Math.min(100, Math.max(0, spare)));
+	const width = Math.max(0, windowWidth - sidebarWidth * 2);
+	const slotWidth = canvasSlotWidth(width);
+	return {
+		sidebarWidth,
+		slotWidth,
+		gap: canvasItemGap({
+			width,
+			height: 0
+		}, sidebarWidth, slotWidth)
+	};
+}
 /** World-space bounds of the gap, so very narrow or wide canvases still space Pages alike. */
 const MIN_CANVAS_ITEM_GAP = 96;
 const MAX_CANVAS_ITEM_GAP = 320;
@@ -11,27 +42,27 @@ const MAX_CANVAS_ITEM_GAP = 320;
 * across the sidebar laid over the working area's edge. The snapped zoom follows the working
 * area's width, so the gap does too.
 */
-function canvasItemGap(workingArea, sidebarWidth) {
+function canvasItemGap(workingArea, sidebarWidth, slotWidth = canvasSlotWidth(workingArea.width)) {
 	const fit = fitCanvasPage(workingArea, {
 		left: 0,
-		width: CANVAS_SLOT_WIDTH
+		width: slotWidth
 	});
-	const gap = ((workingArea.width - CANVAS_SLOT_WIDTH * fit.scale) / 2 + sidebarWidth / 2) / fit.scale;
+	const gap = ((workingArea.width - slotWidth * fit.scale) / 2 + sidebarWidth / 2) / fit.scale;
 	return Math.min(320, Math.max(96, gap));
 }
 /**
 * World-space positions of the Canvas row, matching its flex layout: every Page
 * side by side, in Canvas order, a gap apart.
 */
-function positionCanvasPages(pages, gap) {
+function positionCanvasPages(pages, gap, slotWidth) {
 	return {
 		items: pages.map((page, index) => ({
 			key: page.key,
 			page,
-			left: index * (CANVAS_SLOT_WIDTH + gap),
-			width: CANVAS_SLOT_WIDTH
+			left: index * (slotWidth + gap),
+			width: slotWidth
 		})),
-		width: Math.max(0, pages.length * (CANVAS_SLOT_WIDTH + gap) - gap)
+		width: Math.max(0, pages.length * (slotWidth + gap) - gap)
 	};
 }
 function canvasSnapTargets(items) {
@@ -43,4 +74,4 @@ function canvasSnapTargets(items) {
 }
 
 //#endregion
-export { CANVAS_SLOT_WIDTH, canvasItemGap, canvasSnapTargets, positionCanvasPages };
+export { MIN_CANVAS_SLOT_WIDTH, canvasItemGap, canvasLayout, canvasSlotWidth, canvasSnapTargets, positionCanvasPages };

package/dist/features/canvas/sidebar/ContentSidebarFrame.js

@@ -1,3 +1,4 @@
+import { useCanvasLayout } from "../useCanvasLayout.js";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 
@@ -8,7 +9,7 @@ import { jsx } from "react/jsx-runtime";
 * around them, the Canvas shows through.
 */
 function ContentSidebarFrame(t0) {
-	const $ = c(9);
+	const $ = c(11);
 	let children;
 	let label;
 	let props;
@@ -23,13 +24,15 @@ function ContentSidebarFrame(t0) {
 		label = $[2];
 		props = $[3];
 	}
+	const { sidebarWidth } = useCanvasLayout();
 	let t1;
-	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = { width: 265 };
-		$[4] = t1;
-	} else t1 = $[4];
+	if ($[4] !== sidebarWidth) {
+		t1 = { width: sidebarWidth };
+		$[4] = sidebarWidth;
+		$[5] = t1;
+	} else t1 = $[5];
 	let t2;
-	if ($[5] !== children || $[6] !== label || $[7] !== props) {
+	if ($[6] !== children || $[7] !== label || $[8] !== props || $[9] !== t1) {
 		t2 = /* @__PURE__ */ jsx("aside", {
 			"aria-label": label,
 			className: "absolute inset-y-0 left-0 z-10 flex flex-col py-2",
@@ -37,11 +40,12 @@ function ContentSidebarFrame(t0) {
 			...props,
 			children
 		});
-		$[5] = children;
-		$[6] = label;
-		$[7] = props;
-		$[8] = t2;
-	} else t2 = $[8];
+		$[6] = children;
+		$[7] = label;
+		$[8] = props;
+		$[9] = t1;
+		$[10] = t2;
+	} else t2 = $[10];
 	return t2;
 }
 

package/dist/features/canvas/useCanvasLayout.js

@@ -0,0 +1,34 @@
+import { canvasLayout } from "./canvasItems.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+
+//#region src/features/canvas/useCanvasLayout.ts
+function subscribeToWindowWidth(onChange) {
+	window.addEventListener("resize", onChange);
+	return () => window.removeEventListener("resize", onChange);
+}
+/**
+* The sidebars' width beside the Canvas, each Page's area in the Canvas row, and the gap between
+* them. The Canvas spans the window, so all follow the window's width. They read the window from
+* the first render, before the camera measures the Canvas.
+*/
+function useCanvasLayout() {
+	const $ = c(2);
+	const windowWidth = React.useSyncExternalStore(subscribeToWindowWidth, _temp, _temp2);
+	let t0;
+	if ($[0] !== windowWidth) {
+		t0 = canvasLayout(windowWidth);
+		$[0] = windowWidth;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+}
+function _temp2() {
+	return 0;
+}
+function _temp() {
+	return window.innerWidth;
+}
+
+//#endregion
+export { useCanvasLayout };