camox 0.76.0 → 0.77.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "camox",
-  "version": "0.76.0",
+  "version": "0.77.0",
   "license": "MIT",
   "bin": {
     "camox": "./bin/camox.mjs"
@@ -148,9 +148,9 @@
     "unhead": "^3.4.3",
     "yaml": "^2.9.0",
     "zod": "^4.6.7",
-    "@camox/api-contract": "0.76.0",
-    "@camox/cli": "0.76.0",
-    "@camox/ui": "0.76.0"
+    "@camox/api-contract": "0.77.0",
+    "@camox/ui": "0.77.0",
+    "@camox/cli": "0.77.0"
   },
   "devDependencies": {
     "@earendil-works/pi-ai": "1.3.0",

package/skills/camox/references/artifacts.md

@@ -55,6 +55,13 @@ The source is content, not code: set it as the artifact field's value, like any
   </script>
   ```
 
+- **Mark what stays as it is in every locale with `translate="no"`.** Camox translates an artifact's words into each of the website's locales, everything but its scripts and styles. It leaves alone every element marked `translate="no"` (the HTML attribute), with everything inside it: put it on the names of products, the UI labels of a product the artifact depicts (an English-only app shows its English labels in every locale), and code. Text a script writes is never translated.
+
+  ```html
+  <h2>Publish in one click</h2>
+  <div class="toolbar" translate="no"><button>Publish</button><span>Online</span></div>
+  ```
+
 - **A meaningful `<title>`.** It names the frame for screen readers and is the artifact's Markdown Representation. Without one, the artifact is called "Untitled artifact", and `blocks create` and `blocks edit` return a warning.
 - **Motion that plays on its own goes through the Timeline** (`camox.timeline`, below): no CSS animations, CSS transitions, Web Animations or timers that move the artifact by themselves. CSS transitions stay fine for feedback to a visitor's hover or press, and so do libraries you can drive from `render(t)`.
 - **Respect `prefers-reduced-motion`.** The Timeline does it for you (it shows its poster). For any other motion, such as a hover transition, use the native media query, in CSS (`@media (prefers-reduced-motion: reduce)`) and in scripts (`matchMedia`), by stopping or simplifying it.

package/dist/core/hooks/useFieldSelection.js

@@ -1,67 +0,0 @@
-import { previewStore, samePlacement, selectionBlockId, selectionForOwner } from "../../features/preview/previewStore.js";
-import { PreviewEditingOwnerContext } from "../../features/preview/previewSelection.js";
-import { c } from "react/compiler-runtime";
-import { useContext } from "react";
-import { useSelector } from "@xstate/store-react";
-
-//#region src/core/hooks/useFieldSelection.ts
-/**
-* Returns whether the given field is currently selected based on the normalized selection state.
-*
-* Matches when the selection points to this exact field (type + name + optional repeatable item).
-*/
-function useFieldSelection(blockId, fieldName, fieldType, repeatableItemId) {
-	const $ = c(6);
-	const owner = useContext(PreviewEditingOwnerContext);
-	let t0;
-	if ($[0] !== blockId || $[1] !== fieldName || $[2] !== fieldType || $[3] !== owner || $[4] !== repeatableItemId) {
-		t0 = (state) => {
-			const sel = selectionForOwner(state.context, owner);
-			if (!sel || selectionBlockId(sel) !== blockId) return false;
-			if (sel.type === "block-field") {
-				if (repeatableItemId) return false;
-				return sel.fieldType === fieldType && sel.fieldName === fieldName;
-			}
-			if (sel.type === "item-field") {
-				if (!repeatableItemId) return false;
-				return sel.itemId === repeatableItemId && sel.fieldType === fieldType && sel.fieldName === fieldName;
-			}
-			return false;
-		};
-		$[0] = blockId;
-		$[1] = fieldName;
-		$[2] = fieldType;
-		$[3] = owner;
-		$[4] = repeatableItemId;
-		$[5] = t0;
-	} else t0 = $[5];
-	return useSelector(previewStore, t0);
-}
-/**
-* Returns whether the placed record, or one of its record fields when `recordFieldName` is
-* given, is selected. Matches only this placement, so other placements of the same record
-* stay unselected.
-*/
-function useRecordSelection(placement, recordFieldName) {
-	const $ = c(4);
-	const owner = useContext(PreviewEditingOwnerContext);
-	let t0;
-	if ($[0] !== owner || $[1] !== placement || $[2] !== recordFieldName) {
-		t0 = (state) => {
-			const sel = selectionForOwner(state.context, owner);
-			if (!placement || !sel) return false;
-			if (sel.type !== "record" && sel.type !== "record-field") return false;
-			if (!samePlacement(sel, placement)) return false;
-			if (recordFieldName === void 0) return sel.type === "record";
-			return sel.type === "record-field" && sel.recordFieldName === recordFieldName;
-		};
-		$[0] = owner;
-		$[1] = placement;
-		$[2] = recordFieldName;
-		$[3] = t0;
-	} else t0 = $[3];
-	return useSelector(previewStore, t0);
-}
-
-//#endregion
-export { useFieldSelection, useRecordSelection };

package/dist/core/hooks/useIsEditable.js

@@ -1,21 +0,0 @@
-import { useIsAuthenticated } from "../../lib/auth.js";
-import { previewStore, selectIsCanvasShown } from "../../features/preview/previewStore.js";
-import * as React from "react";
-import { useSelector } from "@xstate/store-react";
-
-//#region src/core/hooks/useIsEditable.ts
-/**
-* Whether the surrounding frame offers editing while the Canvas shows. Only the selected
-* Page's frame does: the others render as the site does, so a click on them only selects
-* the Page. Frames keep the editing runtime either way, so toggling never remounts the page.
-*/
-const EditableSurfaceContext = React.createContext(true);
-function useIsEditable() {
-	const isAuthenticated = useIsAuthenticated();
-	const isCanvasShown = useSelector(previewStore, selectIsCanvasShown);
-	const surface = React.use(EditableSurfaceContext);
-	return isAuthenticated && isCanvasShown && surface;
-}
-
-//#endregion
-export { EditableSurfaceContext, useIsEditable };

package/dist/core/hooks/useOverlayMessage.js

@@ -1,70 +0,0 @@
-import { isOverlayMessage } from "../../features/preview/overlayMessages.js";
-import { c } from "react/compiler-runtime";
-import * as React from "react";
-
-//#region src/core/hooks/useOverlayMessage.ts
-/**
-* Listens for a pair of overlay start/end messages on the iframe window and
-* returns whether the "active" (start) state is currently on.
-*
-* Skips setup when `enabled` is false, `iframeWindow` is null, or any value in
-* `match` is undefined.
-*/
-function useOverlayMessage(iframeWindow, enabled, startType, endType, match) {
-	const $ = c(9);
-	const [active, setActive] = React.useState(false);
-	let t0;
-	if ($[0] !== match) {
-		t0 = JSON.stringify(match);
-		$[0] = match;
-		$[1] = t0;
-	} else t0 = $[1];
-	const matchJson = t0;
-	let t1;
-	let t2;
-	if ($[2] !== enabled || $[3] !== endType || $[4] !== iframeWindow || $[5] !== matchJson || $[6] !== startType) {
-		t1 = () => {
-			if (!enabled || !iframeWindow) return;
-			const matchEntries = Object.entries(JSON.parse(matchJson));
-			if (matchEntries.some(_temp)) return;
-			const handleMessage = (event) => {
-				if (!isOverlayMessage(event.data)) return;
-				const data = event.data;
-				if (data.type !== startType && data.type !== endType) return;
-				if (!matchEntries.every((t3) => {
-					const [k, v_0] = t3;
-					return data[k] === v_0;
-				})) return;
-				setActive(data.type === startType);
-			};
-			iframeWindow.addEventListener("message", handleMessage);
-			return () => iframeWindow.removeEventListener("message", handleMessage);
-		};
-		t2 = [
-			enabled,
-			iframeWindow,
-			startType,
-			endType,
-			matchJson
-		];
-		$[2] = enabled;
-		$[3] = endType;
-		$[4] = iframeWindow;
-		$[5] = matchJson;
-		$[6] = startType;
-		$[7] = t1;
-		$[8] = t2;
-	} else {
-		t1 = $[7];
-		t2 = $[8];
-	}
-	React.useEffect(t1, t2);
-	return active;
-}
-function _temp(t0) {
-	const [, v] = t0;
-	return v === void 0;
-}
-
-//#endregion
-export { useOverlayMessage };