camox 0.13.0 → 0.14.1

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

@@ -57,6 +57,26 @@ const getSchemaForItem = (contentSchema, itemId, itemsMap) => {
 	return schema;
 };
 /**
+* Like `getSchemaForItem` but returns the **array** schema (one level above
+* the items schema), where per-item settings metadata lives.
+*/
+const getArraySchemaForItem = (contentSchema, itemId, itemsMap) => {
+	const path = [];
+	let current = itemsMap.get(itemId);
+	while (current) {
+		path.unshift(current.fieldName);
+		current = current.parentItemId ? itemsMap.get(current.parentItemId) : void 0;
+	}
+	let schema = contentSchema;
+	for (let i = 0; i < path.length; i++) {
+		const prop = schema?.properties?.[path[i]];
+		if (!prop?.items) return null;
+		if (i === path.length - 1) return prop;
+		schema = prop.items;
+	}
+	return null;
+};
+/**
 * Builds the ancestor chain from root to this item (inclusive).
 * Returns items in order from root-most ancestor to the item itself.
 */
@@ -74,6 +94,7 @@ const PageContentSheet = () => {
 	const updateContent = useMutation(blockMutations.updateContent());
 	const updateSettings = useMutation(blockMutations.updateSettings());
 	const updateRepeatableContent = useMutation(repeatableItemMutations.updateContent());
+	const updateRepeatableSettings = useMutation(repeatableItemMutations.updateSettings());
 	const isOpen = useSelector(previewStore, (state) => state.context.isPageContentSheetOpen);
 	const selection = useSelector(previewStore, (state_0) => state_0.context.selection);
 	const iframeElement = useSelector(previewStore, (state_1) => state_1.context.iframeElement);
@@ -109,6 +130,17 @@ const PageContentSheet = () => {
 	const settingsFields = React.useMemo(() => {
 		return blockDef ? getSettingsFields(blockDef._internal.settingsSchema) : [];
 	}, [blockDef]);
+	const itemArraySchema = React.useMemo(() => {
+		if (!blockDef || currentItemId == null) return null;
+		return getArraySchemaForItem(blockDef._internal.contentSchema, currentItemId, itemsMap);
+	}, [
+		blockDef,
+		currentItemId,
+		itemsMap
+	]);
+	const itemSettingsFields = React.useMemo(() => {
+		return getSettingsFields(itemArraySchema?.itemSettingsSchema);
+	}, [itemArraySchema]);
 	const currentSchema = React.useMemo(() => {
 		if (!blockDef) return null;
 		if (currentItemId == null) return blockDef._internal.contentSchema;
@@ -379,6 +411,62 @@ const PageContentSheet = () => {
 						return null;
 					})]
 				}),
+				currentItemId != null && !fieldHasOwnView && itemSettingsFields.length > 0 && /* @__PURE__ */ jsxs("div", {
+					className: "border-border space-y-4 border-b px-4 py-4",
+					children: [/* @__PURE__ */ jsx(Label, {
+						className: "text-muted-foreground",
+						children: "Settings"
+					}), itemSettingsFields.map((field_0) => {
+						const label_0 = field_0.label ?? formatFieldName(field_0.name);
+						const itemSettingsValues = currentItem?.settings ?? {};
+						const itemSettingsSchemaProps = itemArraySchema?.itemSettingsSchema?.properties;
+						if (field_0.fieldType === "Enum") {
+							const value_4 = itemSettingsValues[field_0.name] ?? itemSettingsSchemaProps?.[field_0.name]?.default ?? "";
+							return /* @__PURE__ */ jsxs("div", {
+								className: "space-y-2",
+								children: [/* @__PURE__ */ jsx(Label, {
+									htmlFor: `item-setting-${field_0.name}`,
+									children: label_0
+								}), /* @__PURE__ */ jsxs(Select, {
+									value: value_4,
+									onValueChange: (newValue_1) => {
+										updateRepeatableSettings.mutate({
+											id: currentItemId,
+											settings: { [field_0.name]: newValue_1 }
+										});
+									},
+									children: [/* @__PURE__ */ jsx(SelectTrigger, {
+										id: `item-setting-${field_0.name}`,
+										children: /* @__PURE__ */ jsx(SelectValue, {})
+									}), /* @__PURE__ */ jsx(SelectContent, { children: field_0.enumValues?.map((enumValue_0) => /* @__PURE__ */ jsx(SelectItem, {
+										value: enumValue_0,
+										children: field_0.enumLabels?.[enumValue_0] ?? enumValue_0
+									}, enumValue_0)) })]
+								})]
+							}, field_0.name);
+						}
+						if (field_0.fieldType === "Boolean") {
+							const checked_0 = itemSettingsValues[field_0.name] ?? itemSettingsSchemaProps?.[field_0.name]?.default ?? false;
+							return /* @__PURE__ */ jsxs("div", {
+								className: "flex items-center justify-between",
+								children: [/* @__PURE__ */ jsx(Label, {
+									htmlFor: `item-setting-${field_0.name}`,
+									children: label_0
+								}), /* @__PURE__ */ jsx(Switch, {
+									id: `item-setting-${field_0.name}`,
+									checked: checked_0,
+									onCheckedChange: (newValue_2) => {
+										updateRepeatableSettings.mutate({
+											id: currentItemId,
+											settings: { [field_0.name]: newValue_2 }
+										});
+									}
+								})]
+							}, field_0.name);
+						}
+						return null;
+					})]
+				}),
 				isViewingAsset && assetFieldName && isMultipleAsset && /* @__PURE__ */ jsx(MultipleAssetFieldEditor, {
 					fieldName: assetFieldName,
 					assetType,
@@ -401,12 +489,12 @@ const PageContentSheet = () => {
 							href: "",
 							newTab: false
 						},
-						onSave: (fieldName_1, value_4) => {
-							activeFieldChangeHandler(fieldName_1, value_4);
+						onSave: (fieldName_1, value_5) => {
+							activeFieldChangeHandler(fieldName_1, value_5);
 						}
 					})
 				}),
-				!isViewingAsset && !isViewingLink && /* @__PURE__ */ jsx(ItemFieldsEditor, {
+				!isViewingAsset && !isViewingLink && (currentItemId == null || currentItem) && /* @__PURE__ */ jsx(ItemFieldsEditor, {
 					schema: currentSchema,
 					data: currentData,
 					blockId: block.id,

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

@@ -1,4 +1,5 @@
 import { previewStore } from "../previewStore.js";
+import { blockQueries } from "../../../lib/queries.js";
 import { cn } from "../../../lib/utils.js";
 import { usePageBlocks } from "../../../lib/normalized-data.js";
 import { useCamoxApp } from "../../provider/components/CamoxAppContext.js";
@@ -7,6 +8,7 @@ import { useUpdateBlockPosition } from "./useUpdateBlockPosition.js";
 import { BlockActionsPopover } from "./BlockActionsPopover.js";
 import { usePreviewedPage } from "../CamoxPreview.js";
 import { c } from "react/compiler-runtime";
+import { useQuery } from "@tanstack/react-query";
 import { useSelector } from "@xstate/store/react";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -137,12 +139,26 @@ const FieldItem = (t0) => {
 	return t9;
 };
 const BlockFields = (t0) => {
-	const $ = c(2);
+	const $ = c(4);
 	const { block } = t0;
 	const schemaProperties = useCamoxApp().getBlockById(block.type)?._internal.contentSchema.properties;
 	const selection = useSelector(previewStore, _temp3);
 	const iframeElement = useSelector(previewStore, _temp4);
-	const selectedFieldName = selection?.type === "block-field" && selection.blockId === block.id ? selection.fieldName : null;
+	let t1;
+	if ($[0] !== block.id) {
+		t1 = blockQueries.get(block.id);
+		$[0] = block.id;
+		$[1] = t1;
+	} else t1 = $[1];
+	const { data: blockBundle } = useQuery(t1);
+	let selectedFieldName = null;
+	if (selection?.type === "block-field" && selection.blockId === block.id) selectedFieldName = selection.fieldName;
+	else if ((selection?.type === "item" || selection?.type === "item-field") && selection.blockId === block.id && blockBundle) {
+		const itemsById = new Map(blockBundle.repeatableItems.map(_temp5));
+		let current = itemsById.get(selection.itemId);
+		while (current?.parentItemId != null) current = itemsById.get(current.parentItemId);
+		selectedFieldName = current?.fieldName ?? null;
+	}
 	const handleFieldClick = (fieldName, fieldType) => {
 		previewStore.send({
 			type: "selectBlockField",
@@ -191,8 +207,8 @@ const BlockFields = (t0) => {
 			iframeElement.contentWindow.postMessage(message_2, "*");
 		}
 	};
-	const t1 = "my-1 space-y-1 pl-7";
-	const t2 = Object.keys(schemaProperties ?? {}).map((fieldName_3) => {
+	const t2 = "my-1 space-y-1 pl-7";
+	const t3 = Object.keys(schemaProperties ?? {}).map((fieldName_3) => {
 		const value = block.content[fieldName_3];
 		const fieldSchema = schemaProperties?.[fieldName_3];
 		if (!fieldSchema) return null;
@@ -211,23 +227,23 @@ const BlockFields = (t0) => {
 			onMouseLeave: () => handleFieldMouseLeave(fieldName_3, isRepeatable_1)
 		}, fieldName_3);
 	});
-	let t3;
-	if ($[0] !== t2) {
-		t3 = /* @__PURE__ */ jsx("ul", {
-			className: t1,
-			children: t2
+	let t4;
+	if ($[2] !== t3) {
+		t4 = /* @__PURE__ */ jsx("ul", {
+			className: t2,
+			children: t3
 		});
-		$[0] = t2;
-		$[1] = t3;
-	} else t3 = $[1];
-	return t3;
+		$[2] = t3;
+		$[3] = t4;
+	} else t4 = $[3];
+	return t4;
 };
 function useBlockTreeItem(block, t0) {
 	const $ = c(16);
 	const isDragging = t0 === void 0 ? false : t0;
 	const [ellipsisPopoverOpen, setEllipsisPopoverOpen] = React.useState(false);
-	const selection = useSelector(previewStore, _temp5);
-	const iframeElement = useSelector(previewStore, _temp6);
+	const selection = useSelector(previewStore, _temp6);
+	const iframeElement = useSelector(previewStore, _temp7);
 	const isBlockSelected = selection?.type === "block" && selection.blockId === block.id;
 	const shouldShowHover = !isDragging && !isBlockSelected;
 	const shouldShowActive = isDragging || isBlockSelected;
@@ -296,10 +312,10 @@ function useBlockTreeItem(block, t0) {
 	} else t4 = $[15];
 	return t4;
 }
-function _temp6(state_0) {
+function _temp7(state_0) {
 	return state_0.context.iframeElement;
 }
-function _temp5(state) {
+function _temp6(state) {
 	return state.context.selection;
 }
 const BlockTreeItemHeader = (t0) => {
@@ -891,13 +907,13 @@ const PageTree = () => {
 	} else t7 = $[16];
 	let t8;
 	if ($[17] !== pageBlocks) {
-		t8 = pageBlocks.map(_temp7);
+		t8 = pageBlocks.map(_temp8);
 		$[17] = pageBlocks;
 		$[18] = t8;
 	} else t8 = $[18];
 	let t9;
 	if ($[19] !== pageBlocks) {
-		t9 = pageBlocks.map(_temp8);
+		t9 = pageBlocks.map(_temp9);
 		$[19] = pageBlocks;
 		$[20] = t9;
 	} else t9 = $[20];
@@ -993,7 +1009,7 @@ const PageTree = () => {
 	if ($[43] === Symbol.for("react.memo_cache_sentinel")) {
 		t16 = /* @__PURE__ */ jsxs(Button, {
 			variant: "secondary",
-			onClick: _temp9,
+			onClick: _temp0,
 			children: [/* @__PURE__ */ jsx(Plus, {}), "Add block"]
 		});
 		$[43] = t16;
@@ -1012,13 +1028,16 @@ function _temp3(state) {
 function _temp4(state_0) {
 	return state_0.context.iframeElement;
 }
-function _temp7(block_2) {
+function _temp5(i) {
+	return [i.id, i];
+}
+function _temp8(block_2) {
 	return String(block_2.id);
 }
-function _temp8(block_3) {
+function _temp9(block_3) {
 	return /* @__PURE__ */ jsx(SortableBlock, { block: block_3 }, String(block_3.id));
 }
-function _temp9() {
+function _temp0() {
 	return previewStore.send({ type: "openAddBlockSheet" });
 }
 

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

@@ -214,6 +214,7 @@ const RepeatableItemsList = ({ items, blockId, fieldName, minItems, maxItems, sc
 			if (prop.type === "array" && prop.items?.properties) continue;
 			if ("default" in prop) defaultContent[key] = prop.default;
 		}
+		const defaultSettings = schema?.defaultItemSettings;
 		const nestedItems = [];
 		if (itemsSchema?.properties) {
 			let seedCounter = 0;
@@ -230,6 +231,7 @@ const RepeatableItemsList = ({ items, blockId, fieldName, minItems, maxItems, sc
 						if (ps.type === "array" && ps.items?.properties) continue;
 						if ("default" in ps) nestedContent[propName] = ps.default;
 					}
+					const nestedSettingsDefaults = fs.defaultItemSettings;
 					let prevPos = null;
 					for (let i = 0; i < defaultCount; i++) {
 						const tempId = `nested_${++seedCounter}`;
@@ -240,6 +242,7 @@ const RepeatableItemsList = ({ items, blockId, fieldName, minItems, maxItems, sc
 							parentTempId,
 							fieldName: nestedFieldName,
 							content: { ...nestedContent },
+							settings: nestedSettingsDefaults ? { ...nestedSettingsDefaults } : void 0,
 							position
 						});
 						buildNestedSeeds(nestedItemProps, tempId);
@@ -252,8 +255,15 @@ const RepeatableItemsList = ({ items, blockId, fieldName, minItems, maxItems, sc
 			blockId,
 			fieldName,
 			content: defaultContent,
+			settings: defaultSettings ? { ...defaultSettings } : void 0,
 			nestedItems: nestedItems.length > 0 ? nestedItems : void 0
-		});
+		}, { onSuccess: (created) => {
+			previewStore.send({
+				type: "selectItem",
+				blockId,
+				itemId: created.id
+			});
+		} });
 	};
 	const handleRemoveItem = (itemId) => {
 		deleteRepeatableItem.mutate({ id: itemId });

package/dist/lib/queries.js

@@ -105,6 +105,7 @@ const repeatableItemMutations = {
 	delete: () => getOrpc().repeatableItems.delete.mutationOptions(),
 	duplicate: () => getOrpc().repeatableItems.duplicate.mutationOptions(),
 	updateContent: () => getOrpc().repeatableItems.updateContent.mutationOptions(),
+	updateSettings: () => getOrpc().repeatableItems.updateSettings.mutationOptions(),
 	updatePosition: () => getOrpc().repeatableItems.updatePosition.mutationOptions()
 };
 const pageMutations = {

package/dist/studio-overlays.css

@@ -25,17 +25,19 @@
   --camox-overlay-inset-block-selected: 0px;
 }
 
-/* Position context for field-level and repeater elements.
+/* Position context for typed-field, repeater, and detached overlays.
    BlockComponent already has position: relative inline.
-   Detached wraps user elements (e.g. fixed navbars) so must NOT get position: relative. */
-[data-camox-field-id],
+   Inline string fields don't use ::after (see box-shadow rules below) so they
+   don't need position: relative — adding it to inline elements wouldn't help
+   since inline-relative containing blocks collapse to the start fragment. */
+[data-camox-field-id][data-camox-field-type],
 [data-camox-repeater-item-id] {
   position: relative;
 }
 
 /* ---- Hovered state ---- */
 
-[data-camox-field-id][data-camox-hovered]::after,
+[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 {
   content: "";
@@ -46,14 +48,9 @@
   border: var(--camox-overlay-width-hover) solid var(--camox-overlay-color-hover);
 }
 
-/* Field-level elements use field-specific inset */
-[data-camox-field-id][data-camox-hovered]:not([data-camox-field-type])::after {
-  inset: var(--camox-overlay-inset-field-hover);
-}
-
 /* ---- Focused state (overrides hovered via source order) ---- */
 
-[data-camox-field-id][data-camox-focused]::after,
+[data-camox-field-id][data-camox-field-type][data-camox-focused]::after,
 [data-camox-block-id][data-camox-focused]:not([data-camox-detached])::after {
   content: "";
   position: absolute;
@@ -63,14 +60,28 @@
   border: var(--camox-overlay-width-selected) solid var(--camox-overlay-color-selected);
 }
 
-/* Field-level elements use field-specific inset */
-[data-camox-field-id][data-camox-focused]:not([data-camox-field-type])::after {
-  inset: var(--camox-overlay-inset-field-selected);
+/* ---- Inline string fields ----
+   Use box-shadow + box-decoration-break: clone so the outline repeats per line
+   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] {
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}
+
+[data-camox-field-id]:not([data-camox-field-type])[data-camox-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] {
+  box-shadow: 0 0 0 var(--camox-overlay-width-selected) var(--camox-overlay-color-selected) !important;
 }
 
 /* ---- Layout mode color overrides ---- */
 
-[data-camox-field-id][data-camox-overlay-mode="layout"][data-camox-hovered]::after,
+[data-camox-field-id][data-camox-field-type][data-camox-overlay-mode="layout"][data-camox-hovered]::after,
 [data-camox-block-id][data-camox-overlay-mode="layout"][data-camox-hovered]:not(
     [data-camox-detached]
   )::after,
@@ -78,13 +89,27 @@
   border-color: var(--camox-overlay-layout-color-hover);
 }
 
-[data-camox-field-id][data-camox-overlay-mode="layout"][data-camox-focused]::after,
+[data-camox-field-id][data-camox-field-type][data-camox-overlay-mode="layout"][data-camox-focused]::after,
 [data-camox-block-id][data-camox-overlay-mode="layout"][data-camox-focused]:not(
     [data-camox-detached]
   )::after {
   border-color: var(--camox-overlay-layout-color-selected);
 }
 
+[data-camox-field-id]:not(
+    [data-camox-field-type]
+  )[data-camox-overlay-mode="layout"][data-camox-hovered] {
+  box-shadow: 0 0 0 var(--camox-overlay-width-hover) var(--camox-overlay-layout-color-hover) !important;
+  border-radius: 0 !important;
+}
+
+[data-camox-field-id]:not(
+    [data-camox-field-type]
+  )[data-camox-overlay-mode="layout"][data-camox-focused] {
+  box-shadow: 0 0 0 var(--camox-overlay-width-selected) var(--camox-overlay-layout-color-selected) !important;
+  border-radius: 0 !important;
+}
+
 /* ---- Embed: z-index above click-interceptor ---- */
 
 [data-camox-field-type="embed"][data-camox-hovered]::after,