camox 0.6.0 → 0.7.0

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

@@ -10,7 +10,7 @@ import { X } from "lucide-react";
 import { AlertDialog, AlertDialogAction, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@camox/ui/alert-dialog";
 //#region src/features/preview/components/UnlinkAssetButton.tsx
 var UnlinkAssetButton = (t0) => {
-	const $ = c(41);
+	const $ = c(37);
 	const { fileId, onUnlink, className } = t0;
 	const [dialogOpen, setDialogOpen] = useState(false);
 	let t1;
@@ -60,120 +60,99 @@ var UnlinkAssetButton = (t0) => {
 		$[11] = t6;
 	} else t6 = $[11];
 	let t7;
-	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
-		t7 = /* @__PURE__ */ jsx(X, { className: "h-4 w-4" });
-		$[12] = t7;
-	} else t7 = $[12];
-	let t8;
-	if ($[13] !== handleClick || $[14] !== t6) {
-		t8 = /* @__PURE__ */ jsx(TooltipTrigger, {
-			asChild: true,
-			children: /* @__PURE__ */ jsx(Button, {
-				type: "button",
-				variant: "ghost",
-				size: "icon-sm",
-				className: t6,
-				onClick: handleClick,
-				children: t7
-			})
+	if ($[12] !== handleClick || $[13] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "ghost",
+			size: "icon-sm",
+			className: t6,
+			onClick: handleClick
 		});
-		$[13] = handleClick;
-		$[14] = t6;
+		$[12] = handleClick;
+		$[13] = t6;
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx(X, { className: "h-4 w-4" });
 		$[15] = t8;
 	} else t8 = $[15];
 	let t9;
-	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
-		t9 = /* @__PURE__ */ jsx(TooltipContent, { children: "Unlink" });
-		$[16] = t9;
-	} else t9 = $[16];
+	if ($[16] !== t7) {
+		t9 = /* @__PURE__ */ jsx(TooltipTrigger, {
+			render: t7,
+			children: t8
+		});
+		$[16] = t7;
+		$[17] = t9;
+	} else t9 = $[17];
 	let t10;
-	if ($[17] !== t8) {
-		t10 = /* @__PURE__ */ jsxs(Tooltip, { children: [t8, t9] });
-		$[17] = t8;
+	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = /* @__PURE__ */ jsx(TooltipContent, { children: "Unlink" });
 		$[18] = t10;
 	} else t10 = $[18];
 	let t11;
-	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
-		t11 = /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [/* @__PURE__ */ jsx(AlertDialogTitle, { children: "Unlink file" }), /* @__PURE__ */ jsx(AlertDialogDescription, { children: "This file is not used anywhere else. Would you like to also delete it?" })] });
-		$[19] = t11;
-	} else t11 = $[19];
+	if ($[19] !== t9) {
+		t11 = /* @__PURE__ */ jsxs(Tooltip, { children: [t9, t10] });
+		$[19] = t9;
+		$[20] = t11;
+	} else t11 = $[20];
 	let t12;
-	if ($[20] !== onUnlink) {
-		t12 = () => onUnlink();
-		$[20] = onUnlink;
+	if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [/* @__PURE__ */ jsx(AlertDialogTitle, { children: "Unlink file" }), /* @__PURE__ */ jsx(AlertDialogDescription, { children: "This file is not used anywhere else. Would you like to also delete it?" })] });
 		$[21] = t12;
 	} else t12 = $[21];
 	let t13;
-	if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
-		t13 = /* @__PURE__ */ jsx(Button, {
+	if ($[22] !== onUnlink) {
+		t13 = /* @__PURE__ */ jsx(AlertDialogAction, {
 			variant: "outline",
 			className: "bg-background hover:bg-accent text-foreground",
+			onClick: () => onUnlink(),
 			children: "Unlink only"
 		});
-		$[22] = t13;
-	} else t13 = $[22];
+		$[22] = onUnlink;
+		$[23] = t13;
+	} else t13 = $[23];
 	let t14;
-	if ($[23] !== t12) {
+	if ($[24] !== deleteFile || $[25] !== fileId || $[26] !== onUnlink) {
 		t14 = /* @__PURE__ */ jsx(AlertDialogAction, {
-			onClick: t12,
-			asChild: true,
-			children: t13
+			onClick: () => {
+				onUnlink();
+				if (fileId) deleteFile.mutate({ id: fileId });
+			},
+			children: "Delete file"
 		});
-		$[23] = t12;
-		$[24] = t14;
-	} else t14 = $[24];
+		$[24] = deleteFile;
+		$[25] = fileId;
+		$[26] = onUnlink;
+		$[27] = t14;
+	} else t14 = $[27];
 	let t15;
-	if ($[25] !== deleteFile || $[26] !== fileId || $[27] !== onUnlink) {
-		t15 = () => {
-			onUnlink();
-			if (fileId) deleteFile.mutate({ id: fileId });
-		};
-		$[25] = deleteFile;
-		$[26] = fileId;
-		$[27] = onUnlink;
-		$[28] = t15;
-	} else t15 = $[28];
-	let t16;
-	if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
-		t16 = /* @__PURE__ */ jsx(Button, { children: "Delete file" });
-		$[29] = t16;
-	} else t16 = $[29];
-	let t17;
-	if ($[30] !== t15) {
-		t17 = /* @__PURE__ */ jsx(AlertDialogAction, {
-			onClick: t15,
-			asChild: true,
-			children: t16
-		});
+	if ($[28] !== t13 || $[29] !== t14) {
+		t15 = /* @__PURE__ */ jsxs(AlertDialogContent, { children: [t12, /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [t13, t14] })] });
+		$[28] = t13;
+		$[29] = t14;
 		$[30] = t15;
-		$[31] = t17;
-	} else t17 = $[31];
-	let t18;
-	if ($[32] !== t14 || $[33] !== t17) {
-		t18 = /* @__PURE__ */ jsxs(AlertDialogContent, { children: [t11, /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [t14, t17] })] });
-		$[32] = t14;
-		$[33] = t17;
-		$[34] = t18;
-	} else t18 = $[34];
-	let t19;
-	if ($[35] !== dialogOpen || $[36] !== t18) {
-		t19 = /* @__PURE__ */ jsx(AlertDialog, {
+	} else t15 = $[30];
+	let t16;
+	if ($[31] !== dialogOpen || $[32] !== t15) {
+		t16 = /* @__PURE__ */ jsx(AlertDialog, {
 			open: dialogOpen,
 			onOpenChange: setDialogOpen,
-			children: t18
+			children: t15
 		});
-		$[35] = dialogOpen;
-		$[36] = t18;
-		$[37] = t19;
-	} else t19 = $[37];
-	let t20;
-	if ($[38] !== t10 || $[39] !== t19) {
-		t20 = /* @__PURE__ */ jsxs(Fragment, { children: [t10, t19] });
-		$[38] = t10;
-		$[39] = t19;
-		$[40] = t20;
-	} else t20 = $[40];
-	return t20;
+		$[31] = dialogOpen;
+		$[32] = t15;
+		$[33] = t16;
+	} else t16 = $[33];
+	let t17;
+	if ($[34] !== t11 || $[35] !== t16) {
+		t17 = /* @__PURE__ */ jsxs(Fragment, { children: [t11, t16] });
+		$[34] = t11;
+		$[35] = t16;
+		$[36] = t17;
+	} else t17 = $[36];
+	return t17;
 };
 //#endregion
 export { UnlinkAssetButton };

package/dist/features/preview/studio-overlays.css?inline.js

@@ -0,0 +1,4 @@
+//#region src/features/preview/studio-overlays.css?inline
+var studio_overlays_default = "/*\n * Visual editing overlay styles injected into the preview iframe.\n *\n * State is driven by data attributes on the elements:\n * - data-camox-hovered: element is hovered\n * - data-camox-focused: element is focused/selected\n * - data-camox-overlay-mode=\"layout\": use layout (purple) colors\n *\n * Elements are targeted via their existing data attributes:\n * - [data-camox-field-id]: Field, Link, Image, Embed\n * - [data-camox-block-id]: BlockComponent, Detached\n * - [data-camox-repeater-item-id]: RepeaterItemWrapper\n */\n\n:root {\n  --camox-overlay-color-hover: #f472b6bf; /* pink-400 at 75% */\n  --camox-overlay-color-selected: #f472b6; /* pink-400 */\n  --camox-overlay-layout-color-hover: #c084fcbf; /* purple-400 at 75% */\n  --camox-overlay-layout-color-selected: #c084fc; /* purple-400 */\n  --camox-overlay-width-hover: 3px;\n  --camox-overlay-width-selected: 1px;\n  --camox-overlay-inset-field-hover: -1px;\n  --camox-overlay-inset-field-selected: -2px;\n  --camox-overlay-inset-block-hover: -1px;\n  --camox-overlay-inset-block-selected: 0px;\n}\n\n/* Position context for field-level and repeater elements.\n   BlockComponent already has position: relative inline.\n   Detached wraps user elements (e.g. fixed navbars) so must NOT get position: relative. */\n[data-camox-field-id],\n[data-camox-repeater-item-id] {\n  position: relative;\n}\n\n/* ---- Hovered state ---- */\n\n[data-camox-field-id][data-camox-hovered]::after,\n[data-camox-block-id][data-camox-hovered]:not([data-camox-detached])::after,\n[data-camox-repeater-item-id][data-camox-hovered]::after {\n  content: \"\";\n  position: absolute;\n  pointer-events: none;\n  z-index: 10;\n  inset: var(--camox-overlay-inset-block-hover);\n  border: var(--camox-overlay-width-hover) solid var(--camox-overlay-color-hover);\n}\n\n/* Field-level elements use field-specific inset */\n[data-camox-field-id][data-camox-hovered]:not([data-camox-field-type])::after {\n  inset: var(--camox-overlay-inset-field-hover);\n}\n\n/* ---- Focused state (overrides hovered via source order) ---- */\n\n[data-camox-field-id][data-camox-focused]::after,\n[data-camox-block-id][data-camox-focused]:not([data-camox-detached])::after {\n  content: \"\";\n  position: absolute;\n  pointer-events: none;\n  z-index: 10;\n  inset: var(--camox-overlay-inset-block-selected);\n  border: var(--camox-overlay-width-selected) solid var(--camox-overlay-color-selected);\n}\n\n/* Field-level elements use field-specific inset */\n[data-camox-field-id][data-camox-focused]:not([data-camox-field-type])::after {\n  inset: var(--camox-overlay-inset-field-selected);\n}\n\n/* ---- Layout mode color overrides ---- */\n\n[data-camox-field-id][data-camox-overlay-mode=\"layout\"][data-camox-hovered]::after,\n[data-camox-block-id][data-camox-overlay-mode=\"layout\"][data-camox-hovered]:not(\n    [data-camox-detached]\n  )::after,\n[data-camox-repeater-item-id][data-camox-overlay-mode=\"layout\"][data-camox-hovered]::after {\n  border-color: var(--camox-overlay-layout-color-hover);\n}\n\n[data-camox-field-id][data-camox-overlay-mode=\"layout\"][data-camox-focused]::after,\n[data-camox-block-id][data-camox-overlay-mode=\"layout\"][data-camox-focused]:not(\n    [data-camox-detached]\n  )::after {\n  border-color: var(--camox-overlay-layout-color-selected);\n}\n\n/* ---- Embed: z-index above click-interceptor ---- */\n\n[data-camox-field-type=\"embed\"][data-camox-hovered]::after,\n[data-camox-field-type=\"embed\"][data-camox-focused]::after {\n  z-index: 11;\n}\n\n/* ---- Detached: styled directly (not ::after) because the parent element\n   (e.g. fixed navbar) must not get position: relative ---- */\n\n[data-camox-detached][data-camox-hovered] {\n  inset: var(--camox-overlay-inset-block-hover);\n  border: var(--camox-overlay-width-hover) solid var(--camox-overlay-color-hover);\n}\n\n[data-camox-detached][data-camox-focused] {\n  inset: var(--camox-overlay-inset-block-selected);\n  border: var(--camox-overlay-width-selected) solid var(--camox-overlay-color-selected);\n}\n\n[data-camox-detached][data-camox-overlay-mode=\"layout\"][data-camox-hovered] {\n  border-color: var(--camox-overlay-layout-color-hover);\n}\n\n[data-camox-detached][data-camox-overlay-mode=\"layout\"][data-camox-focused] {\n  border-color: var(--camox-overlay-layout-color-selected);\n}\n\n/* ---- Sheet overlay (dims non-selected blocks) ---- */\n\n.camox-sheet-overlay {\n  position: absolute;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.1);\n  backdrop-filter: blur(4px);\n  opacity: 0;\n  transition: opacity 0.3s ease-in-out;\n  pointer-events: none;\n  z-index: 20;\n}\n\n.camox-sheet-overlay[data-camox-visible] {\n  opacity: 1;\n}\n\n/* ---- Add block control bar ---- */\n\n.camox-add-block {\n  position: absolute;\n  left: 50%;\n  right: 0;\n  height: 36px;\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 11;\n  transition: opacity 150ms ease;\n}\n\n.camox-add-block[data-camox-position=\"top\"] {\n  top: 0;\n  transform: translateX(-50%) translateY(-50%);\n}\n\n.camox-add-block[data-camox-position=\"bottom\"] {\n  bottom: 0;\n  transform: translateX(-50%) translateY(50%);\n}\n\n.camox-add-block[data-camox-hidden] {\n  opacity: 0;\n  pointer-events: none;\n}\n\n.camox-add-block-hitarea {\n  width: 120px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.camox-add-block-button {\n  display: flex;\n  align-items: center;\n  gap: 0px;\n  padding: 0px;\n  width: 20px;\n  height: 20px;\n  justify-content: center;\n  background-color: var(--camox-overlay-color-selected);\n  color: white;\n  border: none;\n  border-radius: 9999px;\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  white-space: nowrap;\n  transition: all 150ms ease;\n}\n\n.camox-add-block-button[data-camox-expanded] {\n  gap: 4px;\n  padding: 4px 8px;\n  width: auto;\n  height: auto;\n}\n";
+//#endregion
+export { studio_overlays_default as default };