camox 0.40.0 → 0.41.0

package/skills/camox/references/block-definitions.md

@@ -48,9 +48,22 @@ export { myBlock as block };
 | `content`     | yes      | An object where each key is a field name and each value is a `Type.*` call. These fields are inline-editable in the CMS.                                                                                                                                                                                                                                                   |
 | `settings`    | no       | Same shape as `content`, but for configuration that lives in a settings panel (not inline). Only `Type.Enum` and `Type.Boolean` should be used here.                                                                                                                                                                                                                       |
 | `layoutOnly`  | no       | If `true`, the block won't appear in the "add block" sheet — it can only be placed inside layouts (e.g. navbar, footer).                                                                                                                                                                                                                                                   |
+| `synced`      | no       | Boolean, defaults to `false`. Share content and settings across every instance of this type within an environment. Ideal for a navbar/footer reused across layouts. Synced blocks have purple editor highlights.                                                                                                                                                           |
 | `component`   | yes      | A named React function component that renders the block.                                                                                                                                                                                                                                                                                                                   |
 | `toMarkdown`  | yes      | A builder function `(c, s) => (...)[]` that renders block content as markdown. `c` is a proxy typed on your `content` keys; `s` is a proxy typed on your `settings` keys used to wrap lines in conditionals. Each returned entry becomes a paragraph (joined with `\n\n`). Lines where all referenced fields resolve to empty — or whose condition is false — are omitted. |
 
+## Synced blocks (`synced`, optional)
+
+`createBlock({ synced: true, ... })` makes every instance of that block **type** share content and settings, including nested repeater items and their settings. It defaults to `false`: instances are independent unless you opt in. Sharing is scoped to one project environment; development and production never share edits automatically.
+
+Use `layoutOnly: true, synced: true` for a navbar or footer that must have identical data across different layouts. `layoutOnly` controls where a block can be placed; it does **not** enable syncing. A synced block can also be a normal page-content block.
+
+- Editing any instance updates the shared draft data everywhere. New instances reuse existing data rather than resetting it to defaults.
+- Positions, page/layout placement, and deletion remain per instance. Deleting one placement doesn't delete the others.
+- Publishing a page or layout containing the block publishes its shared data for all live instances. Unpublished draft edits never leak into the live site.
+- Enabling syncing on an existing type keeps the oldest instance's data and applies it to the others. Disabling it leaves each instance with a copy that can then be edited independently.
+- Synced blocks have **purple highlights and overlays** in the editor.
+
 ## Markdown Template (`toMarkdown`)
 
 `toMarkdown` is a builder function that controls how block content is rendered as markdown for AI features (summaries, SEO). It receives:
@@ -146,7 +159,7 @@ Import `Type` from `"camox/createBlock"`. Every field requires a default value.
 
 ### Type.String
 
-Inline-editable text. The workhorse field type. String fields support inline markdown-style formatting in rendered site output: `**bold**`, `*italic*`, `***bold italic***`, and text links like `[label](https://example.com)` or internal page links inserted by the editor.
+Inline-editable text. The workhorse field type. String fields support inline formatting in both editing and published output: `**bold**`, `*italic*` (or `_italic_`), `***bold italic***`, `<u>underlined</u>`, `<gradient>gradient text</gradient>`, and text links like `[label](https://example.com)` or internal page links inserted by the editor. Gradient can contain other formatting, links, and line breaks. Content remains a string. The editor uses explicit `<strong>` and `<em>` tags when Markdown delimiters cannot represent a selection losslessly (for example, formatting that includes leading/trailing whitespace). These are built-in formatting tags, not arbitrary HTML.
 
 ```tsx
 Type.String({
@@ -300,27 +313,33 @@ The component is a regular React function. It uses methods on the block constant
 
 The `name` must match a key in `content` that is a `Type.String`. Spread `props` onto the element — `props.children` contains the rendered content. This is what makes the field inline-editable in the CMS.
 
-In site output, `props.children` renders supported inline formatting (`**bold**`, `*italic*`, text links). By default, text links render as underlined `<a>` elements. Customize inline rendering with the optional `components` prop:
+Camox owns inline markup so editing and published output have the same appearance. Customize appearance with `textStyle` and `linkStyle` (these replace the old `components` prop):
 
 ```tsx
 <myBlock.Field
   name="description"
-  components={{
-    link: (props, data) => (
-      <a
-        {...props}
-        className={data.external ? "text-blue-600 underline" : "text-primary font-medium"}
-      />
-    ),
-    strong: (props) => <strong {...props} className="font-semibold" />,
-    emphasis: (props) => <em {...props} className="italic text-muted-foreground" />,
+  textStyle={({ bold, italic, gradient }) => {
+    if (gradient) {
+      return { style: { backgroundImage: "linear-gradient(to right, orange, deeppink)" } };
+    }
+    return {
+      className: bold ? "text-primary" : undefined,
+      style: bold && italic ? { letterSpacing: "0.02em" } : undefined,
+    };
   }}
+  linkStyle={({ external }) => ({
+    className: external ? "text-blue-600" : "text-primary font-medium",
+  })}
 >
   {(props) => <p {...props} />}
 </myBlock.Field>
 ```
 
-The `components.link` callback receives `(props, data)`. Spread `props` onto your link element; `data` exposes `{ target, href, external, pageId }` for styling external vs. internal links. `components.strong` customizes `**bold**`; `components.emphasis` customizes `*italic*`. The same `components` prop is available on `item.Field` inside repeaters.
+- `textStyle` receives `{ bold, italic, underline, gradient }` and returns `{ className?, style? }` or `undefined`. For text runs, `gradient` is false and the other flags describe explicit content formatting, not inherited heading styles. Unmarked text keeps its parent's typography.
+- `linkStyle` receives `{ target, href, external, pageId }` and returns the same appearance-only object. Links are underlined by default; override `style.textDecorationLine` to change that.
+- Camox also calls `textStyle` once for each shared gradient wrapper with `{ gradient: true, bold: false, italic: false, underline: false }`. That result styles the whole range; its children receive their own text-run calls. `gradient` identifies the wrapper being styled, not whether a run is inside a gradient. This keeps one continuous background when bold/italic formatting changes within the range. The default gradient uses the site's shadcn chart palette: `--chart-1` → `--chart-2`, following light/dark theme changes. Missing chart tokens fall back to `--primary` / `--muted-foreground`, then `currentColor`, never a hardcoded palette. Set `--camox-gradient-from` and `--camox-gradient-to` in app CSS for app-wide colors, or return `style.backgroundImage` when `gradient` is true.
+- Styles apply to inline children; the outer element's `className` stays on that element and is inherited normally. Explicit formatting defaults (combined italic, underline, gradient clipping) use inline styles; use `style` to override those defaults rather than competing utility classes.
+- These props accept appearance only, never replacement elements, children, or event handlers. They also work on `item.Field` inside repeaters. The sidebar editor shows default formatting; field-specific styles apply on the page.
 
 When the content needs to be placed inside a more complex structure, use `props.children` explicitly:
 

package/skills/camox/references/layout-definitions.md

@@ -71,6 +71,8 @@ blocks: {
 }
 ```
 
+For a navbar or footer whose content must stay identical **across different layouts**, also set `synced: true` in its `createBlock` options. `layoutOnly: true` alone only restricts placement; each layout otherwise has independent data. Synced blocks share content, settings, and repeaters and appear purple in the editor. See [Synced blocks](block-definitions.md#synced-blocks-synced-optional).
+
 You can have multiple blocks in either group, or leave one empty:
 
 ```tsx

package/dist/core/lib/modifiers.js

@@ -1,24 +0,0 @@
-import { FORMAT_FLAGS, lexicalTextToMarkdown } from "./modifierFormats.js";
-import "react";
-import { jsx } from "react/jsx-runtime";
-
-//#region src/core/lib/modifiers.tsx
-const TEXT_MODIFIERS = {
-	bold: {
-		formatFlag: FORMAT_FLAGS.bold,
-		label: "Bold",
-		icon: "B",
-		render: (children) => /* @__PURE__ */ jsx("strong", { children }),
-		toMarkdown: (text) => `**${text}**`
-	},
-	italic: {
-		formatFlag: FORMAT_FLAGS.italic,
-		label: "Italic",
-		icon: "I",
-		render: (children) => /* @__PURE__ */ jsx("em", { children }),
-		toMarkdown: (text) => `*${text}*`
-	}
-};
-
-//#endregion
-export { TEXT_MODIFIERS };

package/dist/features/preview/previewQueryFns.js

@@ -1,23 +0,0 @@
-import { getApiClient } from "../../lib/api-client.js";
-import { seedBlockCaches } from "../../lib/normalized-data.js";
-
-//#region src/features/preview/previewQueryFns.ts
-function pageFullQueryFn(queryClient, path, projectSlug, source) {
-	return async () => {
-		const data = await getApiClient().pages.getByPath({
-			path,
-			projectSlug,
-			source
-		});
-		seedBlockCaches(queryClient, data, source);
-		return {
-			page: data.page,
-			layout: data.layout,
-			projectName: data.projectName,
-			project: data.project
-		};
-	};
-}
-
-//#endregion
-export { pageFullQueryFn };

package/dist/features/runtime/studioNavigation.js

@@ -1,120 +0,0 @@
-import { NavigationProvider } from "../navigation/navigation.js";
-import { c } from "react/compiler-runtime";
-import "react";
-import { jsx } from "react/jsx-runtime";
-
-//#region src/features/runtime/studioNavigation.tsx
-function normalizeRuntimeBasePath(basePath) {
-	if (!basePath || basePath === "/") return "";
-	return basePath.startsWith("/") ? basePath.replace(/\/+$/, "") : `/${basePath.replace(/\/+$/, "")}`;
-}
-function normalizeRuntimePathname(pathname, runtimeBasePath) {
-	const basePath = normalizeRuntimeBasePath(runtimeBasePath);
-	if (!basePath) return pathname || "/";
-	if (pathname === basePath) return "/";
-	if (pathname.startsWith(`${basePath}/`)) return pathname.slice(basePath.length) || "/";
-	return pathname || "/";
-}
-function toRuntimePathname(pathname, runtimeBasePath) {
-	const basePath = normalizeRuntimeBasePath(runtimeBasePath);
-	const normalizedPathname = pathname.startsWith("/") ? pathname : `/${pathname}`;
-	if (!basePath) return normalizedPathname;
-	if (normalizedPathname === "/") return `${basePath}/`;
-	if (normalizedPathname.startsWith(`${basePath}/`)) return normalizedPathname;
-	return `${basePath}${normalizedPathname}`;
-}
-function getStudioLocation(runtimeBasePath) {
-	return {
-		hash: window.location.hash,
-		href: window.location.href,
-		pathname: normalizeRuntimePathname(window.location.pathname, runtimeBasePath),
-		search: window.location.search
-	};
-}
-function getStudioTarget(to, runtimeBasePath) {
-	const url = new URL(to, window.location.href);
-	if (url.origin !== window.location.origin) return null;
-	url.pathname = toRuntimePathname(normalizeRuntimePathname(url.pathname, runtimeBasePath), runtimeBasePath);
-	return url;
-}
-function StudioNavigationProvider(t0) {
-	const $ = c(19);
-	if ($[0] !== "8131144acb7b9faccf5f5924d863b9186349bfc7c842e7feba7a3ac1e01ed910") {
-		for (let $i = 0; $i < 19; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "8131144acb7b9faccf5f5924d863b9186349bfc7c842e7feba7a3ac1e01ed910";
-	}
-	const { children, href, pathname, runtimeBasePath } = t0;
-	let t1;
-	if ($[1] !== runtimeBasePath) {
-		t1 = async (t2) => {
-			const { replace, to } = t2;
-			const target = getStudioTarget(to, runtimeBasePath);
-			if (!target) {
-				window.location.assign(to);
-				return;
-			}
-			const currentPathname = normalizeRuntimePathname(window.location.pathname, runtimeBasePath);
-			if (normalizeRuntimePathname(target.pathname, runtimeBasePath) !== currentPathname) {
-				window.location.assign(target.href);
-				return;
-			}
-			if (replace) window.history.replaceState(null, "", target.href);
-			else window.history.pushState(null, "", target.href);
-			window.dispatchEvent(new Event("camox:navigation"));
-		};
-		$[1] = runtimeBasePath;
-		$[2] = t1;
-	} else t1 = $[2];
-	const navigate = t1;
-	let t2;
-	if ($[3] !== runtimeBasePath) {
-		t2 = () => getStudioLocation(runtimeBasePath);
-		$[3] = runtimeBasePath;
-		$[4] = t2;
-	} else t2 = $[4];
-	const getLocation = t2;
-	let t3;
-	if ($[5] !== href) {
-		t3 = new URL(href);
-		$[5] = href;
-		$[6] = t3;
-	} else t3 = $[6];
-	let t4;
-	if ($[7] !== href) {
-		t4 = new URL(href);
-		$[7] = href;
-		$[8] = t4;
-	} else t4 = $[8];
-	let t5;
-	if ($[9] !== href || $[10] !== pathname || $[11] !== t3.hash || $[12] !== t4.search) {
-		t5 = {
-			hash: t3.hash,
-			href,
-			pathname,
-			search: t4.search
-		};
-		$[9] = href;
-		$[10] = pathname;
-		$[11] = t3.hash;
-		$[12] = t4.search;
-		$[13] = t5;
-	} else t5 = $[13];
-	let t6;
-	if ($[14] !== children || $[15] !== getLocation || $[16] !== navigate || $[17] !== t5) {
-		t6 = /* @__PURE__ */ jsx(NavigationProvider, {
-			getLocation,
-			initialLocation: t5,
-			navigate,
-			children
-		});
-		$[14] = children;
-		$[15] = getLocation;
-		$[16] = navigate;
-		$[17] = t5;
-		$[18] = t6;
-	} else t6 = $[18];
-	return t6;
-}
-
-//#endregion
-export { StudioNavigationProvider };