camox 0.53.1 → 0.56.0

package/dist/features/canvas/CamoxCanvas.js

@@ -29,7 +29,7 @@ import { CanvasPageHeader } from "./CanvasPageHeader.js";
 import { CanvasPreviewPageSlot } from "./CanvasPreviewPageSlot.js";
 import { CANVAS_WORLD_TRANSFORM, canvasScreenAbove, canvasScreenLength, canvasScreenX } from "./canvasScreenSpace.js";
 import { selectedCanvasPage } from "./canvasSelection.js";
-import { CanvasSidebar } from "./sidebar/CanvasSidebar.js";
+import { ContentSidebar } from "./sidebar/ContentSidebar.js";
 import { useCanvasCamera } from "./useCanvasCamera.js";
 import { useCanvasNearness } from "./useCanvasNearness.js";
 import { useDiscoveredPreviewPaths } from "./useDiscoveredPreviewPaths.js";
@@ -42,7 +42,7 @@ import { createStore as createStore$1 } from "@xstate/store";
 
 //#region src/features/canvas/CamoxCanvas.tsx
 /**
-* The Canvas spans the studio under its sidebars, the Canvas sidebar on its left and the chat on
+* The Canvas spans the studio under its sidebars, the Content Sidebar on its left and the Agent Sidebar on
 * its right: the camera frames and snaps Pages between them, and above the studio's bottom edge.
 */
 const CANVAS_INSETS = {
@@ -459,10 +459,10 @@ function CanvasPageFrameLoader(t0) {
 	return t2;
 }
 /**
-* How far a sidebar's scrim fades, in px: from this far inside the sidebar, to the edge of a
-* snapped Page, past it by the page fit's padding.
+* Where a sidebar's scrim starts fading, in px from the studio's edge: past the sidebar's outer
+* gutter (`SIDEBAR_GUTTER`), so it fades across the whole of the sidebar's contents.
 */
-const SCRIM_FADE_INSIDE = 48;
+const SCRIM_FADE_START = 8;
 /** How opaque the scrim gets at most: what's under it always shows through, faintly. */
 const SCRIM_MAX_OPACITY = .8;
 /** Opacity along the fade, relative to the most, eased so it leaves no visible edge where it ends. */
@@ -477,11 +477,14 @@ const SCRIM_EASING = [
 	.05,
 	0
 ];
-/** Fades what the Canvas shows around a sidebar into the Canvas's background, toward the sidebar. */
+/**
+* Fades what the Canvas shows around a sidebar into the Canvas's background, toward the sidebar:
+* from nothing past a snapped Page's edge, to the most only at the sidebar's outer gutter.
+*/
 function scrimGradient(towards, inset) {
-	const from = inset - SCRIM_FADE_INSIDE;
-	const length = SCRIM_FADE_INSIDE + 16;
-	const stops = SCRIM_EASING.map((alpha, index) => `color-mix(in oklab, var(--color-muted) ${alpha * SCRIM_MAX_OPACITY * 100}%, transparent) ${from + length * index / (SCRIM_EASING.length - 1)}px`);
+	const from = SCRIM_FADE_START;
+	const length = inset + 16 - SCRIM_FADE_START;
+	const stops = SCRIM_EASING.map((alpha, index) => `color-mix(in oklab, var(--color-canvas) ${alpha * SCRIM_MAX_OPACITY * 100}%, transparent) ${from + length * index / (SCRIM_EASING.length - 1)}px`);
 	return `linear-gradient(to ${towards === "left" ? "right" : "left"}, ${stops.join(", ")})`;
 }
 /** A frame header above an item's slot, at a constant on-screen height. */
@@ -1049,7 +1052,7 @@ function CanvasWorkspace(t0) {
 		"aria-describedby": instructionsId,
 		tabIndex: 0,
 		"data-camox-canvas": true,
-		className: "bg-muted relative min-h-0 min-w-0 flex-1 touch-none overflow-clip outline-none *:*:[--canvas-x:initial] *:*:[--canvas-y:initial] data-[canvas-pan]:cursor-grab data-[canvas-pan]:**:cursor-[inherit]! data-[canvas-pan=dragging]:cursor-grabbing data-[canvas-pan]:[&_iframe]:pointer-events-none",
+		className: "bg-canvas relative min-h-0 min-w-0 flex-1 touch-none overflow-clip outline-none *:*:[--canvas-x:initial] *:*:[--canvas-y:initial] data-[canvas-pan]:cursor-grab data-[canvas-pan]:**:cursor-[inherit]! data-[canvas-pan=dragging]:cursor-grabbing data-[canvas-pan]:[&_iframe]:pointer-events-none",
 		style: t13,
 		children: [
 			/* @__PURE__ */ jsx(CanvasWorkspaceContext, {
@@ -1305,7 +1308,7 @@ function CamoxCanvas(t0) {
 	} else t17 = $[37];
 	let t18;
 	if ($[38] !== editingOwner || $[39] !== intendedPage || $[40] !== pageRecord || $[41] !== runtimeBasePath || $[42] !== t16) {
-		t18 = /* @__PURE__ */ jsx(CanvasSidebar, {
+		t18 = /* @__PURE__ */ jsx(ContentSidebar, {
 			page: intendedPage,
 			navigator: t16,
 			onShowWholeCanvas: t17,

package/dist/features/canvas/CanvasLoadingScreen.js

@@ -26,7 +26,7 @@ function CanvasLoadingScreen(t0) {
 	if ($[3] !== t2) {
 		t3 = /* @__PURE__ */ jsx("div", {
 			"data-canvas-loading": true,
-			className: "bg-muted absolute inset-0 grid place-items-center",
+			className: "bg-canvas absolute inset-0 grid place-items-center",
 			children: t2
 		});
 		$[3] = t2;

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

@@ -1,6 +1,6 @@
 import { SidebarStackHeader, useSelectionViewCount } from "../../preview/components/SidebarStack.js";
-import { SHOW_WHOLE_CANVAS_SHORTCUT } from "../../preview/previewConstants.js";
 import { formatShortcut } from "../../../lib/shortcuts.js";
+import { SHOW_WHOLE_CANVAS_SHORTCUT } from "../../preview/previewConstants.js";
 import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 

package/dist/features/canvas/sidebar/{CanvasSidebar.js → ContentSidebar.js}

@@ -1,18 +1,18 @@
 import { SidebarStack, SidebarStackView } from "../../preview/components/SidebarStack.js";
-import { CanvasSidebarFrame } from "./CanvasSidebarFrame.js";
 import { CanvasViewHeader } from "./CanvasViewHeader.js";
+import { ContentSidebarFrame } from "./ContentSidebarFrame.js";
 import { CreatePageModal } from "../../preview/components/CreatePageModal.js";
 import { CanvasNavigator } from "./CanvasNavigator.js";
 import { PageInspector } from "./PageInspector.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 
-//#region src/features/canvas/sidebar/CanvasSidebar.tsx
+//#region src/features/canvas/sidebar/ContentSidebar.tsx
 /**
 * The sidebar beside the Canvas, a stack of views: the Canvas's own, which shows the Canvas
 * Navigator, then the Canvas Inspector of the selected Page laid over it, if any.
 */
-function CanvasSidebar(t0) {
+function ContentSidebar(t0) {
 	const $ = c(16);
 	const { page, navigator, onShowWholeCanvas, owner: t1, pageRecord, runtimeBasePath } = t0;
 	const owner = t1 === void 0 ? null : t1;
@@ -61,7 +61,7 @@ function CanvasSidebar(t0) {
 	} else t7 = $[12];
 	let t8;
 	if ($[13] !== t2 || $[14] !== t6) {
-		t8 = /* @__PURE__ */ jsxs(CanvasSidebarFrame, {
+		t8 = /* @__PURE__ */ jsxs(ContentSidebarFrame, {
 			label: t2,
 			children: [t6, t7]
 		});
@@ -73,4 +73,4 @@ function CanvasSidebar(t0) {
 }
 
 //#endregion
-export { CanvasSidebar };
+export { ContentSidebar };

package/dist/features/canvas/sidebar/{CanvasSidebarFrame.js → ContentSidebarFrame.js}

@@ -1,13 +1,13 @@
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 
-//#region src/features/canvas/sidebar/CanvasSidebarFrame.tsx
+//#region src/features/canvas/sidebar/ContentSidebarFrame.tsx
 /**
-* The Canvas sidebar's own box, laid over the Canvas's left side: the Canvas Navigator or the
+* The Content Sidebar's own box, laid over the Canvas's left side: the Canvas Navigator or the
 * Canvas Inspector, or a stand-in for either, goes in it. Only its cards have a background:
 * around them, the Canvas shows through.
 */
-function CanvasSidebarFrame(t0) {
+function ContentSidebarFrame(t0) {
 	const $ = c(9);
 	let children;
 	let label;
@@ -46,4 +46,4 @@ function CanvasSidebarFrame(t0) {
 }
 
 //#endregion
-export { CanvasSidebarFrame };
+export { ContentSidebarFrame };

package/dist/features/canvas/sidebar/{CanvasSidebarSkeleton.js → ContentSidebarSkeleton.js}

@@ -1,17 +1,17 @@
 import { SidebarStack, SidebarStackView } from "../../preview/components/SidebarStack.js";
 import { CanvasInspectorBody, CanvasInspectorHeaderSkeleton } from "./CanvasInspector.js";
-import { CanvasSidebarFrame } from "./CanvasSidebarFrame.js";
 import { CanvasViewHeader } from "./CanvasViewHeader.js";
+import { ContentSidebarFrame } from "./ContentSidebarFrame.js";
 import { CuratedPageSkeleton, LayoutPageSkeleton } from "./PageInspectorSkeleton.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 
-//#region src/features/canvas/sidebar/CanvasSidebarSkeleton.tsx
+//#region src/features/canvas/sidebar/ContentSidebarSkeleton.tsx
 /**
-* Stands in for the Canvas sidebar while the Canvas loads, where the sidebar will show. For a
+* Stands in for the Content Sidebar while the Canvas loads, where the sidebar will show. For a
 * selected Page, it takes the Canvas Inspector's layout. Without one, it is empty.
 */
-function CanvasSidebarSkeleton(t0) {
+function ContentSidebarSkeleton(t0) {
 	const $ = c(5);
 	const { page: t1, layoutPage: t2 } = t0;
 	const page = t1 === void 0 ? true : t1;
@@ -33,8 +33,8 @@ function CanvasSidebarSkeleton(t0) {
 	} else t3 = $[2];
 	let t4;
 	if ($[3] !== t3) {
-		t4 = /* @__PURE__ */ jsx(CanvasSidebarFrame, {
-			"data-canvas-sidebar-skeleton": true,
+		t4 = /* @__PURE__ */ jsx(ContentSidebarFrame, {
+			"data-content-sidebar-skeleton": true,
 			children: t3
 		});
 		$[3] = t3;
@@ -44,4 +44,4 @@ function CanvasSidebarSkeleton(t0) {
 }
 
 //#endregion
-export { CanvasSidebarSkeleton };
+export { ContentSidebarSkeleton };

package/dist/features/og/documentFonts.js

@@ -0,0 +1,49 @@
+//#region src/features/og/documentFonts.ts
+const GOOGLE_FONTS_CSS2 = "https://fonts.googleapis.com/css2";
+/**
+* The Google Fonts families the document's stylesheet links load, in link order, so page images
+* render in the site's fonts. Other stylesheets are ignored.
+*/
+function documentGoogleFonts(document) {
+	return (Array.isArray(document.link) ? document.link : []).flatMap((link) => {
+		if (typeof link !== "object" || link === null) return [];
+		const { rel, href } = link;
+		if (rel !== "stylesheet" || typeof href !== "string") return [];
+		const url = URL.parse(href);
+		if (!url || `${url.origin}${url.pathname}` !== GOOGLE_FONTS_CSS2) return [];
+		return url.searchParams.getAll("family").map(parseFamily);
+	});
+}
+/**
+* One css2 `family` parameter: `Inter`, or a name with its axes and their values, such as
+* `Archivo:ital,wght@0,100..900;1,100..900` (one `;`-separated tuple per face).
+*/
+function parseFamily(param) {
+	const [name = "", spec] = param.split(":");
+	if (!spec) return { name };
+	const [axisList = "", tupleList = ""] = spec.split("@");
+	const axes = axisList.split(",");
+	const tuples = tupleList.split(";").map((tuple) => tuple.split(","));
+	const valuesOf = (axis) => {
+		const index = axes.indexOf(axis);
+		return index < 0 ? [] : [...new Set(tuples.map((tuple) => tuple[index] ?? ""))];
+	};
+	const weights = valuesOf("wght");
+	const weightRange = weights.find(isRange);
+	const otherAxes = Object.fromEntries(axes.filter((axis) => axis !== "wght" && axis !== "ital").map((axis) => {
+		const [value = ""] = valuesOf(axis);
+		return [axis, isRange(value) ? value : Number(value)];
+	}));
+	return {
+		name,
+		...weights.length > 0 && { weight: weightRange ?? weights.map(Number) },
+		...axes.includes("ital") && { style: valuesOf("ital").map((ital) => ital === "1" ? "italic" : "normal") },
+		...Object.keys(otherAxes).length > 0 && { axes: otherAxes }
+	};
+}
+function isRange(value) {
+	return value.includes("..");
+}
+
+//#endregion
+export { documentGoogleFonts };

package/dist/features/og/imageResponse.d.ts

@@ -1,8 +1,17 @@
-import { ReactNode } from "react";
-import { ImageResponse as ImageResponse$1, ImageResponseOptions } from "@takumi-rs/image-response";
+import { ReactElement } from "react";
+import { GoogleFontFamily } from "takumi-js/helpers";
+import { ImageResponse } from "takumi-js/response";
 //#region src/features/og/imageResponse.d.ts
-export declare class ImageResponse extends ImageResponse$1 {
-  constructor(component: ReactNode, options?: ImageResponseOptions);
+export interface ImageStyle {
+  /** The site's compiled stylesheet, which the image's `className`s match. */
+  css?: string;
+  /** The Google Fonts families the site loads, in fallback order. */
+  fonts: GoogleFontFamily[];
 }
+/** Renders `element` as a PNG response, styled like the site. */
+export declare function createImageResponse(element: ReactElement, size: {
+  width: number;
+  height: number;
+}, { css, fonts }: ImageStyle): Promise<Response>;
 //#endregion
-export type { ImageResponseOptions };
+export { ImageResponse };

package/dist/features/og/imageResponse.js

@@ -1,26 +1,25 @@
-import { DEFAULT_FONTS } from "./defaultFonts.js";
-import { ImageResponse as ImageResponse$1 } from "@takumi-rs/image-response";
+import { googleFonts } from "takumi-js/helpers";
+import { ImageResponse } from "takumi-js/response";
 
 //#region src/features/og/imageResponse.ts
-/**
-* OG image renderer for the Worker.
-*
-* Under the `workerd` export condition, `@takumi-rs/image-response` picks Takumi's wasm
-* backend, which imports the wasm binary itself. The Cloudflare Vite plugin turns that
-* `.wasm` import into a `WebAssembly.Module`, and Takumi lazy-inits it inside the
-* response stream.
-*
-* Geist is bundled in `./defaultFonts` to compensate for the wasm renderer shipping with
-* no embedded fonts.
-*/
-var ImageResponse = class extends ImageResponse$1 {
-	constructor(component, options) {
-		super(component, {
-			...options,
-			fonts: options?.fonts ?? DEFAULT_FONTS
-		});
+/** Renders `element` as a PNG response, styled like the site. */
+async function createImageResponse(element, size, { css, fonts }) {
+	return new ImageResponse(element, {
+		...size,
+		css,
+		fonts: await loadFonts(fonts)
+	});
+}
+/** The families' font files, loaded lazily. Without them, the image falls back to Geist. */
+async function loadFonts(families) {
+	if (families.length === 0) return [];
+	try {
+		return await googleFonts(families);
+	} catch (error) {
+		console.warn("[camox] Page image fonts failed to load; rendering with Geist.", error);
+		return [];
 	}
-};
+}
 
 //#endregion
-export { ImageResponse };
+export { ImageResponse, createImageResponse };

package/dist/features/og/pageImage.js

@@ -78,11 +78,14 @@ function DefaultPageImage(t0) {
 	} else t5 = $[8];
 	return t5;
 }
-/** Renders a page image as a PNG response. Server only. */
-async function renderPageImage(element) {
+/**
+* Renders a page image as a PNG response, styled like the site: its elements' `className`s match
+* the site's compiled stylesheet, and its text uses the site's fonts. Server only.
+*/
+async function renderPageImage(element, style) {
 	if (import.meta.env?.SSR === false) throw new Error("OG images can only be rendered on the server.");
-	const { ImageResponse } = await import("camox/_internal/imageResponse");
-	return new ImageResponse(element, PAGE_IMAGE_SIZE);
+	const { createImageResponse } = await import("camox/_internal/imageResponse");
+	return createImageResponse(element, PAGE_IMAGE_SIZE, style);
 }
 
 //#endregion

package/dist/features/preview/CamoxPreview.js

@@ -14,7 +14,7 @@ import { CanvasLoadingScreen } from "../canvas/CanvasLoadingScreen.js";
 import { canvasStore } from "../canvas/canvasStore.js";
 import { previewStore, selectIsCanvasShown } from "./previewStore.js";
 import { SHOW_WHOLE_CANVAS_SHORTCUT, TOGGLE_CANVAS_SHORTCUT } from "./previewConstants.js";
-import { CanvasSidebarSkeleton } from "../canvas/sidebar/CanvasSidebarSkeleton.js";
+import { ContentSidebarSkeleton } from "../canvas/sidebar/ContentSidebarSkeleton.js";
 import { takeShowCanvasRequest } from "../provider/signInShortcut.js";
 import { PreviewEditingOwnerContext } from "./previewSelection.js";
 import { RendererFramesProvider, RendererSlot, useRendererHost, useRendererStatus } from "../renderer/RendererFrames.js";
@@ -577,7 +577,7 @@ const PreviewShell = (t0) => {
 	const t14 = !!derivedLayout;
 	let t15;
 	if ($[20] !== t13 || $[21] !== t14) {
-		t15 = /* @__PURE__ */ jsx(CanvasSidebarSkeleton, {
+		t15 = /* @__PURE__ */ jsx(ContentSidebarSkeleton, {
 			page: t13,
 			layoutPage: t14
 		});

package/dist/features/preview/components/BlockActionsPopover.js

@@ -14,8 +14,8 @@ import { useMutation } from "@tanstack/react-query";
 import { Copy, Trash2 } from "lucide-react";
 import { toast } from "@camox/ui/toaster";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@camox/ui/alert-dialog";
-import { Command as Command$1, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "@camox/ui/command";
 import { Popover, PopoverContent, PopoverTrigger } from "@camox/ui/popover";
+import { Command as Command$1, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "@camox/ui/command";
 
 //#region src/features/preview/components/BlockActionsPopover.tsx
 const BlockActionsPopover = ({ block, children, open, onOpenChange, align = "start", isLayoutBlock, layoutSlot }) => {

package/dist/features/preview/components/IconFieldEditor.js

@@ -5,9 +5,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@camox/ui/button";
 import { ChevronsUpDown, SearchIcon } from "lucide-react";
 import { Combobox } from "@base-ui/react/combobox";
+import { Popover, PopoverContent, PopoverTrigger } from "@camox/ui/popover";
 import { commandFilter } from "@camox/ui/command";
 import { InputGroup, InputGroupAddon, InputGroupInput } from "@camox/ui/input-group";
-import { Popover, PopoverContent, PopoverTrigger } from "@camox/ui/popover";
 import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
 
 //#region src/features/preview/components/IconFieldEditor.tsx

package/dist/features/preview/components/LinkFieldEditor.js

@@ -10,8 +10,8 @@ import { Input } from "@camox/ui/input";
 import { Label } from "@camox/ui/label";
 import { Switch } from "@camox/ui/switch";
 import { Check, ChevronsUpDown } from "lucide-react";
-import { Command as Command$1, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@camox/ui/command";
 import { Popover, PopoverContent, PopoverTrigger } from "@camox/ui/popover";
+import { Command as Command$1, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@camox/ui/command";
 import { Tabs, TabsList, TabsTrigger } from "@camox/ui/tabs";
 
 //#region src/features/preview/components/LinkFieldEditor.tsx

package/dist/features/preview/components/PagePicker.js

@@ -16,8 +16,8 @@ import { Check, ChevronsUpDown, Pencil, Plus, Trash2 } from "lucide-react";
 import { toast } from "@camox/ui/toaster";
 import { Skeleton } from "@camox/ui/skeleton";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@camox/ui/alert-dialog";
-import { Command as Command$1, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from "@camox/ui/command";
 import { Popover, PopoverContent, PopoverTrigger } from "@camox/ui/popover";
+import { Command as Command$1, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from "@camox/ui/command";
 
 //#region src/features/preview/components/PagePicker.tsx
 const CREATE_PAGE_VALUE = "__create_page__";

package/dist/features/preview/components/PreviewToolbar.js

@@ -1,6 +1,6 @@
 import { previewStore, selectIsCanvasShown } from "../previewStore.js";
-import { TOGGLE_CANVAS_SHORTCUT } from "../previewConstants.js";
 import { formatShortcut } from "../../../lib/shortcuts.js";
+import { TOGGLE_CANVAS_SHORTCUT } from "../previewConstants.js";
 import { prefetchCanvas } from "./CanvasPreview.js";
 import { DeviceSelector } from "../../../components/DeviceSelector.js";
 import { c } from "react/compiler-runtime";