camox 0.43.0 → 0.44.0

package/dist/features/vite/vite.js

@@ -2,6 +2,7 @@ import { generateAppFile, watchAppFile } from "./appGeneration.js";
 import { readAuthTokenForUrl } from "./auth.js";
 import { watchNewBlockFiles } from "./blockBoilerplate.js";
 import { installDevAuthenticationMiddleware } from "./devAuthentication.js";
+import { generateIconTypes } from "./iconGeneration.js";
 import { syncDefinitions, syncDefinitionsToApi } from "./definitionsSync.js";
 import { cleanupGeneratedRouteFiles } from "./routeGeneration.js";
 import { installRuntimeNitroRoutes, loadRuntimeDevModule, resolveRuntimeDevId } from "./runtimeDev.js";
@@ -95,7 +96,8 @@ function camox(options) {
 				cpSync(serverAssets, join(options.output.publicDir, "assets"), { recursive: true });
 			});
 		} },
-		config(_config, env) {
+		async config(_config, env) {
+			const iconIds = await generateIconTypes(resolve(_config.root ?? process.cwd()), options.icons);
 			isBuild = env.command === "build";
 			isRelease = isBuild && process.env.CAMOX_INTERNAL_RELEASE === "1";
 			if (isRelease) environmentName = "production";
@@ -107,9 +109,10 @@ function camox(options) {
 			return {
 				build: { emitAssets: true },
 				define: {
+					__CAMOX_ICON_IDS__: JSON.stringify(iconIds),
 					__CAMOX_TELEMETRY_DISABLED__: JSON.stringify(!!options.disableTelemetry),
 					__ENABLE_TANSTACK_DEVTOOLS__: JSON.stringify(enableTanstackDevtools),
-					__CAMOX_ENABLE_COMMENTS__: JSON.stringify(options._internal?.enableComments ?? false),
+					__CAMOX_ENABLE_EXPERIMENTAL_FEATURES__: JSON.stringify(options._internal?.enableExperimentalFeatures ?? false),
 					__CAMOX_ENVIRONMENT_NAME__: JSON.stringify(environmentName),
 					__CAMOX_API_URL__: JSON.stringify(apiUrl),
 					__CAMOX_AUTHENTICATION_URL__: JSON.stringify(authenticationUrl),
@@ -139,6 +142,8 @@ function camox(options) {
 					"camox > @base-ui/react/accordion",
 					"camox > @base-ui/react/alert-dialog",
 					"camox > @base-ui/react/avatar",
+					"camox > @base-ui/react/button",
+					"camox > @base-ui/react/combobox",
 					"camox > @base-ui/react/dialog",
 					"camox > @base-ui/react/input",
 					"camox > @base-ui/react/menu",
@@ -153,9 +158,12 @@ function camox(options) {
 					"camox > @base-ui/react/use-render",
 					"camox > @camox/api-contract",
 					"camox > @camox/api-contract/query-keys",
+					"camox > @camox/ui > class-variance-authority",
+					"camox > @camox/ui > clsx",
 					"camox > @camox/ui > cmdk",
 					"camox > @camox/ui > lucide-react",
 					"camox > @camox/ui > sonner",
+					"camox > @camox/ui > tailwind-merge",
 					"camox > @dnd-kit/core",
 					"camox > @dnd-kit/modifiers",
 					"camox > @dnd-kit/sortable",
@@ -179,7 +187,14 @@ function camox(options) {
 					"camox > @sinclair/typebox",
 					"camox > @takumi-rs/image-response",
 					"camox > @tanstack/react-form",
+					"camox > @tanstack/react-query",
+					"camox > @tanstack/react-router",
+					"camox > @tanstack/react-virtual",
+					"camox > @unhead/react/client",
+					"camox > @unhead/react/server",
 					"camox > @xstate/store-react",
+					"camox > better-auth/client/plugins",
+					"camox > better-auth/react",
 					"camox > better-auth > @better-auth/core/env",
 					"camox > better-auth > @better-auth/core/error",
 					"camox > better-auth > @better-auth/core/utils/error-codes",
@@ -190,6 +205,7 @@ function camox(options) {
 					"camox > fractional-indexing",
 					"camox > lexical",
 					"camox > lucide-react",
+					"camox > marked",
 					"camox > @tanstack/react-query-devtools/production",
 					"camox > partysocket/react"
 				] }
@@ -246,6 +262,7 @@ function camox(options) {
 				root: resolvedConfig.root,
 				cacheDir: resolve(resolvedConfig.root, "node_modules", ".vite-camox-temp"),
 				resolve: resolvedConfig.resolve,
+				define: resolvedConfig.define,
 				server: { middlewareMode: true },
 				logLevel: "silent"
 			});

package/dist/lib/auth.js

@@ -1,4 +1,5 @@
 import { actionsStore } from "../features/provider/actionsStore.js";
+import { validatePreviewTarget } from "./preview-handoff.js";
 import { SERVER_AUTH_COOKIE_NAME, buildClearServerAuthCookieHeader, getServerAuthCookieHeader } from "./server-auth-cookie.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
@@ -181,21 +182,32 @@ function createCamoxAuthClient(apiUrl) {
 * Process a `?ott=` one-time token from the URL before the provider mounts.
 * Verifies the token against the API backend and notifies the session store.
 *
-* Returns `true` once processing is complete (or if there was no OTT).
+* Reports completion and explicit handoff failures instead of silently showing live content.
 */
-function useProcessOtt(authClient) {
+function useProcessOtt(authClient, target) {
+	const [error, setError] = React.useState(null);
+	const processing = React.useRef(false);
 	const [ready, setReady] = React.useState(() => {
 		if (typeof window === "undefined") return true;
 		return !new URL(window.location.href).searchParams.has("ott");
 	});
 	React.useEffect(() => {
-		if (ready) return;
 		const url = new URL(window.location.href);
+		const targetError = validatePreviewTarget(url.searchParams.get("camox-preview"), target);
+		if (targetError) {
+			url.searchParams.delete("ott");
+			window.history.replaceState({}, "", url);
+			setError(targetError);
+			setReady(true);
+			return;
+		}
+		if (ready || processing.current) return;
 		const ott = url.searchParams.get("ott");
 		if (!ott) {
 			setReady(true);
 			return;
 		}
+		processing.current = true;
 		url.searchParams.delete("ott");
 		window.history.replaceState({}, "", url);
 		(async () => {
@@ -205,18 +217,29 @@ function useProcessOtt(authClient) {
 				if (!verification.data) throw new Error("OTT verification returned no session");
 				window.location.reload();
 				return;
-			} catch {}
+			} catch {
+				setError("Preview sign-in failed. The link may have expired or already been used. Run camox preview again for a fresh link.");
+			}
 			setReady(true);
 		})();
-	}, [authClient, ready]);
-	return ready;
+	}, [
+		authClient,
+		ready,
+		target.projectSlug,
+		target.environmentName,
+		target.apiUrl
+	]);
+	return {
+		ready,
+		error
+	};
 }
 const AuthContext = React.createContext(null);
 function useAuthContext() {
 	const $ = c(1);
-	if ($[0] !== "49cbba734e7826ee7cc1d1d95d5d7895a7a71f25806548ac312288b5b8a802f3") {
+	if ($[0] !== "2870dba5d074cbe2d9a238f9ae39bb51493bf31c0dd30caa79404003309e1525") {
 		for (let $i = 0; $i < 1; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "49cbba734e7826ee7cc1d1d95d5d7895a7a71f25806548ac312288b5b8a802f3";
+		$[0] = "2870dba5d074cbe2d9a238f9ae39bb51493bf31c0dd30caa79404003309e1525";
 	}
 	const ctx = React.useContext(AuthContext);
 	if (!ctx) throw new Error("Missing CamoxProvider");
@@ -224,9 +247,9 @@ function useAuthContext() {
 }
 function useProjectSlug() {
 	const $ = c(1);
-	if ($[0] !== "49cbba734e7826ee7cc1d1d95d5d7895a7a71f25806548ac312288b5b8a802f3") {
+	if ($[0] !== "2870dba5d074cbe2d9a238f9ae39bb51493bf31c0dd30caa79404003309e1525") {
 		for (let $i = 0; $i < 1; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "49cbba734e7826ee7cc1d1d95d5d7895a7a71f25806548ac312288b5b8a802f3";
+		$[0] = "2870dba5d074cbe2d9a238f9ae39bb51493bf31c0dd30caa79404003309e1525";
 	}
 	return useAuthContext().projectSlug;
 }
@@ -242,18 +265,18 @@ function useAuthState() {
 }
 function useIsAuthenticated() {
 	const $ = c(1);
-	if ($[0] !== "49cbba734e7826ee7cc1d1d95d5d7895a7a71f25806548ac312288b5b8a802f3") {
+	if ($[0] !== "2870dba5d074cbe2d9a238f9ae39bb51493bf31c0dd30caa79404003309e1525") {
 		for (let $i = 0; $i < 1; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "49cbba734e7826ee7cc1d1d95d5d7895a7a71f25806548ac312288b5b8a802f3";
+		$[0] = "2870dba5d074cbe2d9a238f9ae39bb51493bf31c0dd30caa79404003309e1525";
 	}
 	const { isAuthenticated } = useAuthState();
 	return isAuthenticated;
 }
 function useSignInRedirect(callbackHref) {
 	const $ = c(4);
-	if ($[0] !== "49cbba734e7826ee7cc1d1d95d5d7895a7a71f25806548ac312288b5b8a802f3") {
+	if ($[0] !== "2870dba5d074cbe2d9a238f9ae39bb51493bf31c0dd30caa79404003309e1525") {
 		for (let $i = 0; $i < 4; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "49cbba734e7826ee7cc1d1d95d5d7895a7a71f25806548ac312288b5b8a802f3";
+		$[0] = "2870dba5d074cbe2d9a238f9ae39bb51493bf31c0dd30caa79404003309e1525";
 	}
 	const { authenticationUrl } = useAuthContext();
 	let t0;
@@ -275,9 +298,9 @@ function useSignInRedirect(callbackHref) {
 */
 function useAuthActions() {
 	const $ = c(5);
-	if ($[0] !== "49cbba734e7826ee7cc1d1d95d5d7895a7a71f25806548ac312288b5b8a802f3") {
+	if ($[0] !== "2870dba5d074cbe2d9a238f9ae39bb51493bf31c0dd30caa79404003309e1525") {
 		for (let $i = 0; $i < 5; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "49cbba734e7826ee7cc1d1d95d5d7895a7a71f25806548ac312288b5b8a802f3";
+		$[0] = "2870dba5d074cbe2d9a238f9ae39bb51493bf31c0dd30caa79404003309e1525";
 	}
 	const { authClient, authenticationUrl } = useAuthContext();
 	let t0;

package/dist/lib/preview-handoff.js

@@ -0,0 +1,13 @@
+//#region src/lib/preview-handoff.ts
+/** Validate the destination before exchanging any credential with its backend. */
+function validatePreviewTarget(raw, target) {
+	if (raw === null) return null;
+	try {
+		const expected = JSON.parse(raw);
+		if (expected.projectSlug === target.projectSlug && expected.environmentName === target.environmentName && typeof expected.apiUrl === "string" && expected.apiUrl.replace(/\/+$/, "") === target.apiUrl.replace(/\/+$/, "")) return null;
+	} catch {}
+	return "Preview destination does not match the CLI project, backend, or environment. Check --cwd and --url, then run camox preview again.";
+}
+
+//#endregion
+export { validatePreviewTarget };

package/dist/lib/queries.js

@@ -3,6 +3,17 @@ import { getApiUrl, getEnvironmentName, getOrpc } from "./api-client.js";
 import { queryKeys } from "@camox/api-contract/query-keys";
 
 //#region src/lib/queries.ts
+const commentQueries = { list: (pageId) => ({
+	...getOrpc().comments.list.queryOptions({
+		input: { pageId },
+		staleTime: 3e4
+	}),
+	queryKey: [...queryKeys.comments.list(pageId), getEnvironmentName() ?? "production"]
+}) };
+const commentMutations = {
+	create: () => getOrpc().comments.create.mutationOptions(),
+	setResolved: () => getOrpc().comments.setResolved.mutationOptions()
+};
 const pageQueries = {
 	list: (projectId) => ({
 		...getOrpc().pages.list.queryOptions({
@@ -183,4 +194,4 @@ const fileMutations = {
 };
 
 //#endregion
-export { blockMutations, blockQueries, environmentMutations, environmentQueries, fileMutations, fileQueries, layoutQueries, pageMutations, pageQueries, projectQueries, repeatableItemMutations };
+export { blockMutations, blockQueries, commentMutations, commentQueries, environmentMutations, environmentQueries, fileMutations, fileQueries, layoutQueries, pageMutations, pageQueries, projectQueries, repeatableItemMutations };

package/dist/lib/use-project-room.js

@@ -1,16 +1,18 @@
 import { getAuthCookieHeader } from "./auth.js";
+import { areCommentsEnabled } from "../features/preview/commentsEnabled.js";
 import { c } from "react/compiler-runtime";
 import { useQueryClient } from "@tanstack/react-query";
 import { useRef } from "react";
+import { queryKeys } from "@camox/api-contract/query-keys";
 import { usePartySocket } from "partysocket/react";
 
 //#region src/lib/use-project-room.ts
 const DEBOUNCE_MS = 300;
 function useProjectRoom(apiUrl, projectId) {
 	const $ = c(10);
-	if ($[0] !== "c94fdacdaeb446d7db77b7fee7efa4a24c7433c9c1f518f586565506a52bbbd7") {
+	if ($[0] !== "67c19533e16ee15335bcc3b4e1e8e5b7b5ec3b876c8d1b4511e85727b85792f9") {
 		for (let $i = 0; $i < 10; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "c94fdacdaeb446d7db77b7fee7efa4a24c7433c9c1f518f586565506a52bbbd7";
+		$[0] = "67c19533e16ee15335bcc3b4e1e8e5b7b5ec3b876c8d1b4511e85727b85792f9";
 	}
 	const queryClient = useQueryClient();
 	const timerRef = useRef(void 0);
@@ -44,6 +46,7 @@ function useProjectRoom(apiUrl, projectId) {
 			query: _temp,
 			enabled: t3,
 			onOpen() {
+				if (areCommentsEnabled()) queryClient.invalidateQueries({ queryKey: queryKeys.comments.all });
 				if (process.env.NODE_ENV !== "production") console.debug("[useProjectRoom] WebSocket connected");
 			},
 			onClose(event) {

package/dist/studio-overlays.css

@@ -2,8 +2,8 @@
  * Visual editing overlay styles injected into the preview iframe.
  *
  * State is driven by data attributes on the elements:
- * - data-camox-hovered: element is hovered
- * - data-camox-focused: element is focused/selected
+ * - data-camox-highlight-hovered: deepest hovered element (local or remote)
+ * - data-camox-highlight-focused: deepest focused/selected element
  * - data-camox-overlay-mode="synced": use synced-block (purple) colors
  *
  * Elements are targeted via their existing data attributes:
@@ -35,9 +35,9 @@
 
 /* ---- Hovered state ---- */
 
-[data-camox-field-id][data-camox-field-type][data-camox-hovered]::after,
-[data-camox-block-id][data-camox-hovered]:not([data-camox-detached])::after,
-[data-camox-repeater-item-id][data-camox-hovered]::after {
+[data-camox-field-id][data-camox-field-type][data-camox-highlight-hovered]::after,
+[data-camox-block-id][data-camox-highlight-hovered]:not([data-camox-detached])::after,
+[data-camox-repeater-item-id][data-camox-highlight-hovered]::after {
   content: "";
   position: absolute;
   pointer-events: none;
@@ -48,8 +48,9 @@
 
 /* ---- Focused state (overrides hovered via source order) ---- */
 
-[data-camox-field-id][data-camox-field-type][data-camox-focused]::after,
-[data-camox-block-id][data-camox-focused]:not([data-camox-detached])::after {
+[data-camox-field-id][data-camox-field-type][data-camox-highlight-focused]::after,
+[data-camox-block-id][data-camox-highlight-focused]:not([data-camox-detached])::after,
+[data-camox-repeater-item-id][data-camox-highlight-focused]::after {
   content: "";
   position: absolute;
   pointer-events: none;
@@ -63,17 +64,20 @@
    fragment when the inline wraps. Applied directly to the element via attribute
    selectors with !important so user-supplied className/style box-shadows can't
    clobber it. */
-[data-camox-field-id]:not([data-camox-field-type])[data-camox-hovered],
-[data-camox-field-id]:not([data-camox-field-type])[data-camox-focused] {
+[data-camox-field-id]:not([data-camox-field-type])[data-camox-highlight-hovered],
+[data-camox-field-id]:not([data-camox-field-type])[data-camox-highlight-focused] {
   -webkit-box-decoration-break: clone;
   box-decoration-break: clone;
 }
 
-[data-camox-field-id]:not([data-camox-field-type])[data-camox-hovered] {
+/* SVG roots cannot render ::after; use the same direct outline as text fields. */
+svg[data-camox-field-type="icon"][data-camox-highlight-hovered],
+[data-camox-field-id]:not([data-camox-field-type])[data-camox-highlight-hovered] {
   box-shadow: 0 0 0 var(--camox-overlay-width-hover) var(--camox-overlay-color-hover) !important;
 }
 
-[data-camox-field-id]:not([data-camox-field-type])[data-camox-focused] {
+svg[data-camox-field-type="icon"][data-camox-highlight-focused],
+[data-camox-field-id]:not([data-camox-field-type])[data-camox-highlight-focused] {
   box-shadow: 0 0 0 var(--camox-overlay-width-selected) var(--camox-overlay-color-selected) !important;
 }
 
@@ -85,20 +89,20 @@
 
 /* ---- Embed: z-index above click-interceptor ---- */
 
-[data-camox-field-type="embed"][data-camox-hovered]::after,
-[data-camox-field-type="embed"][data-camox-focused]::after {
+[data-camox-field-type="embed"][data-camox-highlight-hovered]::after,
+[data-camox-field-type="embed"][data-camox-highlight-focused]::after {
   z-index: 11;
 }
 
 /* ---- Detached: styled directly (not ::after) because the parent element
    (e.g. fixed navbar) must not get position: relative ---- */
 
-[data-camox-detached][data-camox-hovered] {
+[data-camox-detached][data-camox-highlight-hovered] {
   inset: var(--camox-overlay-inset-block-hover);
   border: var(--camox-overlay-width-hover) solid var(--camox-overlay-color-hover);
 }
 
-[data-camox-detached][data-camox-focused] {
+[data-camox-detached][data-camox-highlight-focused] {
   inset: var(--camox-overlay-inset-block-selected);
   border: var(--camox-overlay-width-selected) solid var(--camox-overlay-color-selected);
 }