camox 0.53.1 → 0.54.0

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/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/SelectionEditor.js

@@ -27,13 +27,33 @@ import { useMutation } from "@tanstack/react-query";
 import { Button } from "@camox/ui/button";
 import { Label } from "@camox/ui/label";
 import { Switch } from "@camox/ui/switch";
-import { CirclePlus, Trash2 } from "lucide-react";
+import { CirclePlus, Ellipsis, Trash2 } from "lucide-react";
 import { ButtonGroup } from "@camox/ui/button-group";
 import { Spinner } from "@camox/ui/spinner";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@camox/ui/select";
 
 //#region src/features/preview/components/SelectionEditor.tsx
 const EMPTY_CONTENT = {};
+/**
+* The path's headers. The `kept` first steps, the selection and its parent always show; two or
+* more steps between them collapse into one header, which lists them.
+*/
+function stackRows(items, kept) {
+	const rows = items.map((item, index) => ({
+		index,
+		item
+	}));
+	const between = items.slice(kept, -2);
+	if (between.length < 2) return rows;
+	return [
+		...rows.slice(0, kept),
+		{
+			index: kept,
+			collapsed: between
+		},
+		...rows.slice(kept + between.length)
+	];
+}
 const getSettingsFields = (schema) => {
 	const properties = schema?.properties;
 	if (!properties) return [];
@@ -119,7 +139,7 @@ const SelectionEditor = (t0) => {
 	return t2;
 };
 const SelectionEditorContent = (t0) => {
-	const $ = c(145);
+	const $ = c(131);
 	const { owner, pageCrumb } = t0;
 	let t1;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -611,30 +631,15 @@ const SelectionEditorContent = (t0) => {
 		$[90] = t33;
 	} else t33 = $[90];
 	const blockCrumbs = t33;
-	const t34 = owner.kind === "page" ? "Page" : "Layout";
-	let t35;
-	if ($[91] !== t34) {
-		t35 = {
+	const navigationItems = [
+		{
 			key: "page",
 			hoverTarget: null,
-			label: t34,
+			label: owner.kind === "page" ? "Page" : "Layout",
 			isCurrent: false,
 			onClick: _temp5
-		};
-		$[91] = t34;
-		$[92] = t35;
-	} else t35 = $[92];
-	let t36;
-	if ($[93] !== block || $[94] !== blockCrumbs || $[95] !== blockDef) {
-		t36 = block && blockDef ? blockCrumbs(block, blockDef) : [];
-		$[93] = block;
-		$[94] = blockCrumbs;
-		$[95] = blockDef;
-		$[96] = t36;
-	} else t36 = $[96];
-	const navigationItems = [
-		t35,
-		...t36,
+		},
+		...block && blockDef ? blockCrumbs(block, blockDef) : [],
 		...recordCrumbs(fieldHasOwnView),
 		...fieldHasOwnView && fieldInfo ? [{
 			key: `field-${fieldInfo.fieldName}`,
@@ -647,48 +652,66 @@ const SelectionEditorContent = (t0) => {
 	const stackedItems = pageCrumb ? navigationItems : navigationItems.slice(1);
 	const firstDepth = pageCrumb ? 1 : 2;
 	const front = stackedItems[stackedItems.length - 1];
-	let t37;
-	if ($[97] !== stackedItems.length) {
-		t37 = /* @__PURE__ */ jsx(SelectionViewCount, { count: stackedItems.length });
-		$[97] = stackedItems.length;
-		$[98] = t37;
-	} else t37 = $[98];
+	const rows = stackRows(stackedItems, pageCrumb ? 1 : 0);
+	const t34 = "Selection path";
+	const t35 = "shrink-0";
+	const t36 = "flex flex-col";
+	const t37 = rows.map((row, index) => {
+		const distance = rows.length - 1 - index;
+		const covered = distance > 0;
+		const depth = firstDepth + row.index;
+		if (row.collapsed) return /* @__PURE__ */ jsx("li", {
+			className: "relative flex flex-col",
+			children: /* @__PURE__ */ jsx(SidebarStackHeader, {
+				depth,
+				distance,
+				popover: /* @__PURE__ */ jsx("ol", {
+					"aria-label": "Collapsed parents",
+					className: "flex flex-col",
+					children: row.collapsed.map(_temp6)
+				}),
+				children: /* @__PURE__ */ jsxs("span", {
+					className: "flex min-w-0 items-center gap-1.5",
+					children: [/* @__PURE__ */ jsx(Ellipsis, { className: "size-3.5 shrink-0" }), /* @__PURE__ */ jsxs("span", {
+						className: "truncate",
+						children: [row.collapsed.length, " parents"]
+					})]
+				})
+			})
+		}, "collapsed-parents");
+		const { item: item_0 } = row;
+		return /* @__PURE__ */ jsx("li", {
+			className: "relative flex flex-col",
+			children: /* @__PURE__ */ jsx(SidebarStackHeader, {
+				depth,
+				distance,
+				first: pageCrumb && row.index === 0,
+				onSelect: item_0.onClick,
+				hoverTarget: item_0.hoverTarget,
+				children: covered ? item_0.label : /* @__PURE__ */ jsx("span", {
+					className: "truncate font-medium",
+					children: item_0.label
+				})
+			})
+		}, item_0.key);
+	});
 	let t38;
-	if ($[99] !== firstDepth || $[100] !== pageCrumb || $[101] !== stackedItems) {
+	if ($[91] !== t37) {
 		t38 = /* @__PURE__ */ jsx("nav", {
-			"aria-label": "Selection path",
-			className: "shrink-0",
+			"aria-label": t34,
+			className: t35,
 			children: /* @__PURE__ */ jsx("ol", {
-				className: "flex flex-col",
-				children: stackedItems.map((item, index) => {
-					const distance = stackedItems.length - 1 - index;
-					const covered = distance > 0;
-					return /* @__PURE__ */ jsx("li", {
-						className: "relative flex flex-col",
-						children: /* @__PURE__ */ jsx(SidebarStackHeader, {
-							depth: firstDepth + index,
-							distance,
-							first: pageCrumb && index === 0,
-							onSelect: item.onClick,
-							hoverTarget: item.hoverTarget,
-							children: covered ? item.label : /* @__PURE__ */ jsx("span", {
-								className: "truncate font-medium",
-								children: item.label
-							})
-						})
-					}, item.key);
-				})
+				className: t36,
+				children: t37
 			})
 		});
-		$[99] = firstDepth;
-		$[100] = pageCrumb;
-		$[101] = stackedItems;
-		$[102] = t38;
-	} else t38 = $[102];
+		$[91] = t37;
+		$[92] = t38;
+	} else t38 = $[92];
 	const t39 = `${block?.id ?? "layout"}:${front?.key}`;
 	const t40 = firstDepth + stackedItems.length - 1;
 	let t41;
-	if ($[103] !== addSibling || $[104] !== assetAccept || $[105] !== assetFieldName || $[106] !== assetType || $[107] !== block || $[108] !== blockDef || $[109] !== canAddSibling || $[110] !== canRemoveCurrent || $[111] !== currentData || $[112] !== currentItem || $[113] !== currentItemId || $[114] !== currentSchema || $[115] !== fieldHasOwnView || $[116] !== fieldIdPrefix || $[117] !== fieldInfo?.fieldName || $[118] !== filesMap || $[119] !== isItemLoading || $[120] !== isMultipleAsset || $[121] !== isViewingAsset || $[122] !== isViewingLink || $[123] !== itemArraySchema || $[124] !== itemSettingsFields || $[125] !== itemsMap || $[126] !== linkFieldName || $[127] !== owner || $[128] !== recordInList || $[129] !== recordView || $[130] !== removeCurrent || $[131] !== send || $[132] !== settingsFields || $[133] !== updateRepeatableSettings || $[134] !== updateSettings || $[135] !== writeField) {
+	if ($[93] !== addSibling || $[94] !== assetAccept || $[95] !== assetFieldName || $[96] !== assetType || $[97] !== block || $[98] !== blockDef || $[99] !== canAddSibling || $[100] !== canRemoveCurrent || $[101] !== currentData || $[102] !== currentItem || $[103] !== currentItemId || $[104] !== currentSchema || $[105] !== fieldHasOwnView || $[106] !== fieldIdPrefix || $[107] !== fieldInfo?.fieldName || $[108] !== filesMap || $[109] !== isItemLoading || $[110] !== isMultipleAsset || $[111] !== isViewingAsset || $[112] !== isViewingLink || $[113] !== itemArraySchema || $[114] !== itemSettingsFields || $[115] !== itemsMap || $[116] !== linkFieldName || $[117] !== owner || $[118] !== recordInList || $[119] !== recordView || $[120] !== removeCurrent || $[121] !== send || $[122] !== settingsFields || $[123] !== updateRepeatableSettings || $[124] !== updateSettings || $[125] !== writeField) {
 		t41 = /* @__PURE__ */ jsx("div", { children: isItemLoading ? /* @__PURE__ */ jsx("div", {
 			className: "flex h-full items-center justify-center py-12",
 			children: /* @__PURE__ */ jsx(Spinner, {})
@@ -895,66 +918,58 @@ const SelectionEditorContent = (t0) => {
 				fieldIdPrefix
 			}, `${block?.id ?? "layout"}-${recordView ? `record-${recordView.record.id}` : currentItemId ?? "block"}-${fieldInfo?.fieldName ?? "fields"}`)
 		] }) });
-		$[103] = addSibling;
-		$[104] = assetAccept;
-		$[105] = assetFieldName;
-		$[106] = assetType;
-		$[107] = block;
-		$[108] = blockDef;
-		$[109] = canAddSibling;
-		$[110] = canRemoveCurrent;
-		$[111] = currentData;
-		$[112] = currentItem;
-		$[113] = currentItemId;
-		$[114] = currentSchema;
-		$[115] = fieldHasOwnView;
-		$[116] = fieldIdPrefix;
-		$[117] = fieldInfo?.fieldName;
-		$[118] = filesMap;
-		$[119] = isItemLoading;
-		$[120] = isMultipleAsset;
-		$[121] = isViewingAsset;
-		$[122] = isViewingLink;
-		$[123] = itemArraySchema;
-		$[124] = itemSettingsFields;
-		$[125] = itemsMap;
-		$[126] = linkFieldName;
-		$[127] = owner;
-		$[128] = recordInList;
-		$[129] = recordView;
-		$[130] = removeCurrent;
-		$[131] = send;
-		$[132] = settingsFields;
-		$[133] = updateRepeatableSettings;
-		$[134] = updateSettings;
-		$[135] = writeField;
-		$[136] = t41;
-	} else t41 = $[136];
+		$[93] = addSibling;
+		$[94] = assetAccept;
+		$[95] = assetFieldName;
+		$[96] = assetType;
+		$[97] = block;
+		$[98] = blockDef;
+		$[99] = canAddSibling;
+		$[100] = canRemoveCurrent;
+		$[101] = currentData;
+		$[102] = currentItem;
+		$[103] = currentItemId;
+		$[104] = currentSchema;
+		$[105] = fieldHasOwnView;
+		$[106] = fieldIdPrefix;
+		$[107] = fieldInfo?.fieldName;
+		$[108] = filesMap;
+		$[109] = isItemLoading;
+		$[110] = isMultipleAsset;
+		$[111] = isViewingAsset;
+		$[112] = isViewingLink;
+		$[113] = itemArraySchema;
+		$[114] = itemSettingsFields;
+		$[115] = itemsMap;
+		$[116] = linkFieldName;
+		$[117] = owner;
+		$[118] = recordInList;
+		$[119] = recordView;
+		$[120] = removeCurrent;
+		$[121] = send;
+		$[122] = settingsFields;
+		$[123] = updateRepeatableSettings;
+		$[124] = updateSettings;
+		$[125] = writeField;
+		$[126] = t41;
+	} else t41 = $[126];
 	let t42;
-	if ($[137] !== t39 || $[138] !== t40 || $[139] !== t41) {
+	if ($[127] !== t39 || $[128] !== t40 || $[129] !== t41) {
 		t42 = /* @__PURE__ */ jsx(SidebarStackView, {
 			depth: t40,
 			className: "relative min-w-0 overflow-x-hidden overflow-y-auto",
 			children: t41
 		}, t39);
-		$[137] = t39;
-		$[138] = t40;
-		$[139] = t41;
-		$[140] = t42;
-	} else t42 = $[140];
-	let t43;
-	if ($[141] !== t37 || $[142] !== t38 || $[143] !== t42) {
-		t43 = /* @__PURE__ */ jsxs(Fragment, { children: [
-			t37,
-			t38,
-			t42
-		] });
-		$[141] = t37;
-		$[142] = t38;
-		$[143] = t42;
-		$[144] = t43;
-	} else t43 = $[144];
-	return t43;
+		$[127] = t39;
+		$[128] = t40;
+		$[129] = t41;
+		$[130] = t42;
+	} else t42 = $[130];
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(SelectionViewCount, { count: rows.length }),
+		t38,
+		t42
+	] });
 };
 function _temp(i) {
 	return [i.id, i];
@@ -971,6 +986,17 @@ function _temp4(f_0) {
 function _temp5() {
 	return previewStore.send({ type: "clearSelection" });
 }
+function _temp6(item) {
+	return /* @__PURE__ */ jsx("li", {
+		className: "flex",
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "hover:bg-accent hover:text-accent-foreground min-w-0 flex-1 cursor-pointer truncate rounded-sm px-2 py-1.5 text-left text-sm",
+			onClick: item.onClick,
+			children: item.label
+		})
+	}, item.key);
+}
 
 //#endregion
 export { SelectionEditor };