camox 0.13.0 → 0.14.0

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,8 +489,8 @@ 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);
 						}
 					})
 				}),

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,6 +255,7 @@ const RepeatableItemsList = ({ items, blockId, fieldName, minItems, maxItems, sc
 			blockId,
 			fieldName,
 			content: defaultContent,
+			settings: defaultSettings ? { ...defaultSettings } : void 0,
 			nestedItems: nestedItems.length > 0 ? nestedItems : void 0
 		});
 	};

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,25 @@
   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;
+}
+
+[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;
+}
+
 /* ---- Embed: z-index above click-interceptor ---- */
 
 [data-camox-field-type="embed"][data-camox-hovered]::after,