camox 0.45.0 → 0.46.0

package/skills/camox-expand/SKILL.md

@@ -52,18 +52,19 @@ Stop suggesting when the next idea would be filler; there is no target count. Th
 Make only these kinds of change:
 
 - **New Block Definitions**, following [Block Definitions](../camox/references/block-definitions.md), [Localized code](../camox/SKILL.md#localized-code) (every visible text in fields, internal links through `useLocalizedHref` without a locale prefix), and Camoxify's rules on [styling](../camoxify/SKILL.md#use-the-existing-styling-stack), [genericity and default content](../camoxify/SKILL.md#keep-definitions-generic), [repeaters](../camoxify/SKILL.md#model-repetition-not-a-fixed-screenshot), [Settings](../camoxify/SKILL.md#use-settings-for-constrained-choices), and [formatted text](../camoxify/SKILL.md#keep-formatted-text-in-one-field).
-- **New Settings on existing Block Definitions**, with defaults that leave current rendering unchanged. Existing content schemas stay exactly as they are. Before editing the block, capture it in the Block Catalog at desktop and mobile, opened at `/camox/blocks/<id>` on the running dev server; step 6 compares against this capture.
+- **New Settings on existing Block Definitions**, with defaults that leave current rendering unchanged. Existing content schemas stay exactly as they are. Before editing the block, capture it at desktop and mobile on a Page that places it, on the running dev server; step 6 compares against this capture.
 - **Description edits.** A new block's `description` says when to choose it over its siblings. Edit the siblings' descriptions so each one names what sets it apart, and the Agent can choose between them.
 
-New blocks live only in code and the Block Catalog. Leave Pages, layouts, and publishing alone, and create no temporary Pages. This rules out new Layout-only Blocks: the Block Catalog never shows them, and they only sync once a layout uses them. An existing Layout-only Block that gains a Setting has no Block Catalog page either, so capture and check it on a Page whose layout uses it.
+New blocks live only in code, plus one review Page in the development draft: create it with the CLI (see [Managing Pages and Blocks](../camox/references/cli-content.md)) and place each new block on it with its default content. Leave every other Page, layouts, and publishing alone. This rules out new Layout-only Blocks: a Page can't hold them, and they only sync once a layout uses them. An existing Layout-only Block that gains a Setting is captured and checked on a Page whose layout uses it.
 
 ## 6. Verify
 
-Finish with a Block Catalog link to each new block, so the operator and the product marketing team can review them live. Delete any block the operator rejects, along with any description changes made only for it.
+Finish with a link to the review Page, so the operator and the product marketing team can review the new blocks live. Delete any block the operator rejects, along with any description changes made only for it. Once the review is over, delete the review Page with `pages delete`, so publishing the development draft never ships it.
 
 The run is complete when:
 
 - every approved item is built, and every rejected one is deleted,
+- the review Page is deleted once the operator has reviewed it,
 - the project's `check` script passes, and so does `vp lint --type-aware --type-check`, since `vp check` skips type errors unless the project's Vite config sets `lint.options.typeCheck`,
-- every new block renders correctly with its default content at desktop and mobile in the Block Catalog at `/camox/blocks/<id>`,
+- every new block renders correctly with its default content at desktop and mobile on the review Page,
 - every existing block that gained a Setting renders the same as its capture with default Settings.

package/dist/features/canvas/CanvasBlockFrame.js

@@ -1,353 +0,0 @@
-import { NormalizedDataProvider } from "../../lib/normalized-data.js";
-import { reads, useRead } from "../../lib/studio-reads.js";
-import { BlockEditingRuntimeProvider } from "../../core/editing/BlockEditingRuntime.js";
-import { ArtifactStudioContext, ArtifactsRunContext } from "../../core/hooks/useArtifactHost.js";
-import { BlockErrorBoundary } from "../preview/components/BlockErrorBoundary.js";
-import { PreviewDocumentContext } from "../runtime/PreviewDocumentContext.js";
-import { canvasDocumentStyles, canvasPageHref } from "./canvasFrameDocument.js";
-import { useCanvasFrameMode } from "./canvasFrameMode.js";
-import { CanvasFrameProviders, preventLinkNavigation, useCanvasFrame } from "./useCanvasFrame.js";
-import { useCanvasNearness } from "./useCanvasNearness.js";
-import { c } from "react/compiler-runtime";
-import * as React from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { createPortal } from "react-dom";
-
-//#region src/features/canvas/CanvasBlockFrame.tsx
-/** World-space height reserved for a frame until it mounts and measures its block. */
-const PLACEHOLDER_HEIGHT = 400;
-/** Block Catalog blocks render as on the website, but on the Canvas and never editable. */
-const CATALOG_ARTIFACT_STUDIO = {
-	editing: false,
-	canvas: true
-};
-/**
-* A live frame of the Block Catalog: one block with its default content, or a
-* Synced Block's shared content when the project has some, bare and
-* interactive, but with no editing. It mounts once it comes near the
-* Canvas viewport and stays mounted, so its state survives panning away,
-* though it only runs while selected and the camera is still.
-*/
-function CanvasBlockFrame(props) {
-	const $ = c(17);
-	const ref = React.useRef(null);
-	const { near, reached } = useCanvasNearness(ref);
-	let t0;
-	if ($[0] !== near || $[1] !== props.selected) {
-		t0 = {
-			near,
-			selected: props.selected
-		};
-		$[0] = near;
-		$[1] = props.selected;
-		$[2] = t0;
-	} else t0 = $[2];
-	const mode = useCanvasFrameMode(t0);
-	const previewDocument = React.useContext(PreviewDocumentContext);
-	let t1;
-	if ($[3] !== previewDocument || $[4] !== reached) {
-		t1 = reached ? canvasDocumentStyles(previewDocument) : "";
-		$[3] = previewDocument;
-		$[4] = reached;
-		$[5] = t1;
-	} else t1 = $[5];
-	const styles = t1;
-	const t2 = near || props.selected ? void 0 : "hidden";
-	let t3;
-	if ($[6] !== t2) {
-		t3 = { visibility: t2 };
-		$[6] = t2;
-		$[7] = t3;
-	} else t3 = $[7];
-	let t4;
-	if ($[8] !== mode || $[9] !== previewDocument || $[10] !== props || $[11] !== reached || $[12] !== styles) {
-		t4 = reached ? /* @__PURE__ */ jsx(BlockFrame, {
-			...props,
-			previewDocument,
-			mode
-		}, styles) : /* @__PURE__ */ jsx("div", {
-			"data-canvas-block-placeholder": true,
-			style: { height: PLACEHOLDER_HEIGHT }
-		});
-		$[8] = mode;
-		$[9] = previewDocument;
-		$[10] = props;
-		$[11] = reached;
-		$[12] = styles;
-		$[13] = t4;
-	} else t4 = $[13];
-	let t5;
-	if ($[14] !== t3 || $[15] !== t4) {
-		t5 = /* @__PURE__ */ jsx("div", {
-			ref,
-			style: t3,
-			children: t4
-		});
-		$[14] = t3;
-		$[15] = t4;
-		$[16] = t5;
-	} else t5 = $[16];
-	return t5;
-}
-function BlockFrame(t0) {
-	const $ = c(26);
-	const { block, projectId, runtimeBasePath, width, viewportHeight, selected, onSelect, previewDocument, mode } = t0;
-	const [initialPreviewDocument] = React.useState(previewDocument);
-	let t1;
-	if ($[0] !== runtimeBasePath) {
-		t1 = () => canvasPageHref({
-			runtimeBasePath,
-			pathname: "/",
-			href: window.location.href
-		});
-		$[0] = runtimeBasePath;
-		$[1] = t1;
-	} else t1 = $[1];
-	const [href] = React.useState(t1);
-	let t2;
-	if ($[2] !== href || $[3] !== initialPreviewDocument || $[4] !== mode || $[5] !== viewportHeight || $[6] !== width) {
-		t2 = {
-			previewDocument: initialPreviewDocument,
-			href,
-			width,
-			viewportHeight,
-			fit: "content",
-			subject: "block",
-			mode
-		};
-		$[2] = href;
-		$[3] = initialPreviewDocument;
-		$[4] = mode;
-		$[5] = viewportHeight;
-		$[6] = width;
-		$[7] = t2;
-	} else t2 = $[7];
-	const { iframe, mount, iframeProps } = useCanvasFrame(t2);
-	const { title, synced } = block._internal;
-	let t3;
-	if ($[8] !== iframeProps || $[9] !== title || $[10] !== viewportHeight || $[11] !== width) {
-		t3 = iframeProps.srcDoc && /* @__PURE__ */ jsx("iframe", {
-			...iframeProps,
-			title: `Block preview: ${title}`,
-			style: {
-				display: "block",
-				width,
-				height: viewportHeight,
-				border: 0
-			}
-		});
-		$[8] = iframeProps;
-		$[9] = title;
-		$[10] = viewportHeight;
-		$[11] = width;
-		$[12] = t3;
-	} else t3 = $[12];
-	let t4;
-	if ($[13] !== block || $[14] !== href || $[15] !== iframe || $[16] !== mode || $[17] !== mount || $[18] !== onSelect || $[19] !== projectId || $[20] !== selected || $[21] !== synced) {
-		t4 = mount && createPortal(/* @__PURE__ */ jsx(BlockEditingRuntimeProvider, {
-			runtime: null,
-			children: /* @__PURE__ */ jsx(ArtifactStudioContext, {
-				value: CATALOG_ARTIFACT_STUDIO,
-				children: /* @__PURE__ */ jsx(ArtifactsRunContext, {
-					value: selected,
-					children: /* @__PURE__ */ jsx(CanvasFrameProviders, {
-						pathname: "/",
-						href,
-						mount,
-						iframe,
-						children: /* @__PURE__ */ jsx(React.Activity, {
-							mode: mode === "resting" ? "hidden" : "visible",
-							children: /* @__PURE__ */ jsx("div", {
-								style: { display: "flow-root" },
-								onPointerDownCapture: onSelect,
-								onFocusCapture: onSelect,
-								onClick: preventLinkNavigation,
-								children: /* @__PURE__ */ jsx(React.Suspense, {
-									fallback: /* @__PURE__ */ jsx("div", {
-										role: "status",
-										children: "Loading block…"
-									}),
-									children: synced ? /* @__PURE__ */ jsx(SyncedBlockContent, {
-										block,
-										projectId
-									}) : /* @__PURE__ */ jsx(DefaultBlockContent, { block })
-								})
-							})
-						})
-					})
-				})
-			})
-		}), mount);
-		$[13] = block;
-		$[14] = href;
-		$[15] = iframe;
-		$[16] = mode;
-		$[17] = mount;
-		$[18] = onSelect;
-		$[19] = projectId;
-		$[20] = selected;
-		$[21] = synced;
-		$[22] = t4;
-	} else t4 = $[22];
-	let t5;
-	if ($[23] !== t3 || $[24] !== t4) {
-		t5 = /* @__PURE__ */ jsxs(Fragment, { children: [t3, t4] });
-		$[23] = t3;
-		$[24] = t4;
-		$[25] = t5;
-	} else t5 = $[25];
-	return t5;
-}
-function DefaultBlockContent(t0) {
-	const $ = c(13);
-	const { block } = t0;
-	let t1;
-	if ($[0] !== block._internal) {
-		t1 = block._internal.getPeekBundle();
-		$[0] = block._internal;
-		$[1] = t1;
-	} else t1 = $[1];
-	const bundle = t1;
-	let t2;
-	if ($[2] !== bundle.block.content || $[3] !== bundle.block.id || $[4] !== bundle.block.position || $[5] !== bundle.block.settings || $[6] !== bundle.block.type) {
-		t2 = {
-			_id: bundle.block.id,
-			type: bundle.block.type,
-			content: bundle.block.content,
-			settings: bundle.block.settings,
-			position: bundle.block.position
-		};
-		$[2] = bundle.block.content;
-		$[3] = bundle.block.id;
-		$[4] = bundle.block.position;
-		$[5] = bundle.block.settings;
-		$[6] = bundle.block.type;
-		$[7] = t2;
-	} else t2 = $[7];
-	let t3;
-	if ($[8] !== block || $[9] !== bundle.files || $[10] !== bundle.repeatableItems || $[11] !== t2) {
-		t3 = /* @__PURE__ */ jsx(BlockContent, {
-			block,
-			files: bundle.files,
-			repeatableItems: bundle.repeatableItems,
-			blockData: t2
-		});
-		$[8] = block;
-		$[9] = bundle.files;
-		$[10] = bundle.repeatableItems;
-		$[11] = t2;
-		$[12] = t3;
-	} else t3 = $[12];
-	return t3;
-}
-/** A Synced Block shows the project's shared content, or its defaults until it has some. */
-function SyncedBlockContent(t0) {
-	const $ = c(19);
-	const { block, projectId } = t0;
-	let t1;
-	if ($[0] !== block._internal.id || $[1] !== projectId) {
-		t1 = reads.syncedContent({
-			projectId,
-			type: block._internal.id
-		});
-		$[0] = block._internal.id;
-		$[1] = projectId;
-		$[2] = t1;
-	} else t1 = $[2];
-	const shared = useRead(t1);
-	if (!shared) {
-		let t2;
-		if ($[3] !== block) {
-			t2 = /* @__PURE__ */ jsx(DefaultBlockContent, { block });
-			$[3] = block;
-			$[4] = t2;
-		} else t2 = $[4];
-		return t2;
-	}
-	let t2;
-	if ($[5] !== shared.block) {
-		t2 = [shared.block];
-		$[5] = shared.block;
-		$[6] = t2;
-	} else t2 = $[6];
-	const t3 = shared.block.content;
-	const t4 = shared.block.settings;
-	let t5;
-	if ($[7] !== shared.block.id || $[8] !== shared.block.position || $[9] !== shared.block.type || $[10] !== t3 || $[11] !== t4) {
-		t5 = {
-			_id: shared.block.id,
-			type: shared.block.type,
-			content: t3,
-			settings: t4,
-			position: shared.block.position
-		};
-		$[7] = shared.block.id;
-		$[8] = shared.block.position;
-		$[9] = shared.block.type;
-		$[10] = t3;
-		$[11] = t4;
-		$[12] = t5;
-	} else t5 = $[12];
-	let t6;
-	if ($[13] !== block || $[14] !== shared.files || $[15] !== shared.repeatableItems || $[16] !== t2 || $[17] !== t5) {
-		t6 = /* @__PURE__ */ jsx(BlockContent, {
-			block,
-			files: shared.files,
-			repeatableItems: shared.repeatableItems,
-			references: t2,
-			blockData: t5
-		});
-		$[13] = block;
-		$[14] = shared.files;
-		$[15] = shared.repeatableItems;
-		$[16] = t2;
-		$[17] = t5;
-		$[18] = t6;
-	} else t6 = $[18];
-	return t6;
-}
-function BlockContent(t0) {
-	const $ = c(12);
-	const { block, files, repeatableItems, references, blockData } = t0;
-	const { id, Component } = block._internal;
-	let t1;
-	if ($[0] !== Component || $[1] !== blockData) {
-		t1 = /* @__PURE__ */ jsx(Component, {
-			blockData,
-			mode: "peek"
-		});
-		$[0] = Component;
-		$[1] = blockData;
-		$[2] = t1;
-	} else t1 = $[2];
-	let t2;
-	if ($[3] !== files || $[4] !== references || $[5] !== repeatableItems || $[6] !== t1) {
-		t2 = /* @__PURE__ */ jsx(NormalizedDataProvider, {
-			files,
-			repeatableItems,
-			blocks: references,
-			children: t1
-		});
-		$[3] = files;
-		$[4] = references;
-		$[5] = repeatableItems;
-		$[6] = t1;
-		$[7] = t2;
-	} else t2 = $[7];
-	let t3;
-	if ($[8] !== blockData._id || $[9] !== id || $[10] !== t2) {
-		t3 = /* @__PURE__ */ jsx(BlockErrorBoundary, {
-			blockId: blockData._id,
-			blockType: id,
-			children: t2
-		});
-		$[8] = blockData._id;
-		$[9] = id;
-		$[10] = t2;
-		$[11] = t3;
-	} else t3 = $[11];
-	return t3;
-}
-
-//#endregion
-export { CanvasBlockFrame };

package/dist/features/canvas/CanvasBlockHeader.js

@@ -1,55 +0,0 @@
-import { c } from "react/compiler-runtime";
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/features/canvas/CanvasBlockHeader.tsx
-/** How many Pages place a block, as shown in its header. */
-function formatCanvasBlockUsage(pageCount) {
-	if (pageCount === 0) return "Unused";
-	return `Used on ${pageCount} ${pageCount === 1 ? "page" : "pages"}`;
-}
-/**
-* The header above a block of the Block Catalog. Its title sits on the line of
-* Page nicknames and selects the block.
-* Its usage sits above the title once known, like a Page header's path.
-*/
-function CanvasBlockHeader(t0) {
-	const $ = c(8);
-	const { block, pageCount, onSelect } = t0;
-	const { title } = block._internal;
-	let t1;
-	if ($[0] !== pageCount) {
-		t1 = pageCount !== void 0 && /* @__PURE__ */ jsx("span", {
-			"data-canvas-block-usage": true,
-			className: "text-muted-foreground w-full min-w-0 truncate text-left text-xs font-normal",
-			children: formatCanvasBlockUsage(pageCount)
-		});
-		$[0] = pageCount;
-		$[1] = t1;
-	} else t1 = $[1];
-	let t2;
-	if ($[2] !== onSelect || $[3] !== title) {
-		t2 = /* @__PURE__ */ jsx("button", {
-			type: "button",
-			className: "focus-visible:ring-ring max-w-full min-w-0 truncate text-left text-sm font-medium outline-none focus-visible:ring-2",
-			onClick: onSelect,
-			children: title
-		});
-		$[2] = onSelect;
-		$[3] = title;
-		$[4] = t2;
-	} else t2 = $[4];
-	let t3;
-	if ($[5] !== t1 || $[6] !== t2) {
-		t3 = /* @__PURE__ */ jsxs("h2", {
-			className: "text-foreground flex h-10 w-full min-w-0 flex-col items-start justify-end gap-1 text-left",
-			children: [t1, t2]
-		});
-		$[5] = t1;
-		$[6] = t2;
-		$[7] = t3;
-	} else t3 = $[7];
-	return t3;
-}
-
-//#endregion
-export { CanvasBlockHeader, formatCanvasBlockUsage };

package/dist/features/canvas/CanvasShelfMarker.js

@@ -1,255 +0,0 @@
-import "../preview/previewPageFrame.js";
-import "./canvasItems.js";
-import { canvasScreenAbove, canvasScreenLength, canvasScreenX } from "./canvasScreenSpace.js";
-import { c } from "react/compiler-runtime";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/features/canvas/CanvasShelfMarker.tsx
-const BAR_SIZE = 24;
-const CANVAS_SHELF_MARKER_OVERHANG = 12;
-const MIN_BAR_SEPARATION = 8;
-const OVERHANG = `clamp(0px, ${canvasScreenLength(480)} / 2 - ${MIN_BAR_SEPARATION / 2}px, ${12}px)`;
-const LABEL_CLASS_NAME = "text-muted-foreground text-xs font-medium tracking-wider whitespace-nowrap uppercase";
-const BAR_CLASS_NAME = "bg-foreground/10 hover:bg-foreground/15 focus-visible:ring-ring absolute top-0 left-0 cursor-pointer rounded-sm outline-none focus-visible:ring-2";
-/**
-* Each marker's bar, from its area's on-screen extent. A collapsed bar keeps its
-* thickness at every zoom, so when it no longer fits in the gap next to its
-* area, it moves right, after the previous bar.
-*/
-function getCanvasShelfMarkerBars(markers) {
-	let previousRight;
-	return markers.map((marker) => {
-		const start = canvasScreenX(marker.start);
-		const ownLeft = marker.collapsed ? `calc(${start} - ${BAR_SIZE / 2}px)` : `calc(${start} - ${OVERHANG})`;
-		const left = previousRight ? `max(${ownLeft}, calc(${previousRight} + ${MIN_BAR_SEPARATION}px))` : ownLeft;
-		const right = marker.collapsed ? `calc(${left} + ${BAR_SIZE}px)` : `max(calc(${canvasScreenX(marker.end)} + ${OVERHANG}), ${left})`;
-		previousRight = right;
-		return {
-			left,
-			right
-		};
-	});
-}
-/** The Shelf Markers of the Canvas row, in row order. */
-function CanvasShelfMarkers({ markers, onToggle }) {
-	const bars = getCanvasShelfMarkerBars(markers);
-	return markers.map((marker, index) => /* @__PURE__ */ jsx(CanvasShelfMarker, {
-		marker,
-		bar: bars[index],
-		onToggle: () => onToggle(marker)
-	}, marker.key));
-}
-/**
-* A labelled bar naming an area of the Canvas. Clicking it collapses or expands the area.
-*
-* Expanded, it is a horizontal bar above the Page headers. The bar follows world
-* space horizontally, so it spans its area's items at every zoom, but keeps a
-* constant on-screen height, like Page headers. The label sticks near the
-* viewport's left edge while the area is in view, at the inset of a snapped
-* Page so it lines up with that Page's header, and the end of the area pushes it out.
-*
-* Collapsed, the area's items are hidden and the bar turns vertical in their
-* place, running from the header row to the bottom of the viewport. It is the
-* horizontal bar rotated, so its label reads upwards and sits at the top.
-*/
-function CanvasShelfMarker(t0) {
-	const $ = c(47);
-	const { marker, bar, onToggle } = t0;
-	let t1;
-	if ($[0] !== marker.start) {
-		t1 = canvasScreenX(marker.start);
-		$[0] = marker.start;
-		$[1] = t1;
-	} else t1 = $[1];
-	const start = t1;
-	let t2;
-	if ($[2] !== marker.end) {
-		t2 = canvasScreenX(marker.end);
-		$[2] = marker.end;
-		$[3] = t2;
-	} else t2 = $[3];
-	const end = t2;
-	let t3;
-	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = canvasScreenAbove(52 + 32);
-		$[4] = t3;
-	} else t3 = $[4];
-	const y = t3;
-	const t4 = !marker.collapsed;
-	const t5 = `${marker.collapsed ? "Expand" : "Collapse"} ${marker.label}`;
-	const t6 = marker.count === 0;
-	let t7;
-	if ($[5] !== marker.key || $[6] !== onToggle || $[7] !== t4 || $[8] !== t5 || $[9] !== t6) {
-		t7 = {
-			"data-canvas-shelf-marker": marker.key,
-			"aria-expanded": t4,
-			"aria-label": t5,
-			disabled: t6,
-			onClick: onToggle
-		};
-		$[5] = marker.key;
-		$[6] = onToggle;
-		$[7] = t4;
-		$[8] = t5;
-		$[9] = t6;
-		$[10] = t7;
-	} else t7 = $[10];
-	const button = t7;
-	if (marker.collapsed) {
-		const t8 = `translate(${bar.left}, ${y})`;
-		let t9;
-		if ($[11] !== t8) {
-			t9 = {
-				width: BAR_SIZE,
-				height: `calc(100% - ${y})`,
-				transform: t8,
-				willChange: "transform",
-				zIndex: 2
-			};
-			$[11] = t8;
-			$[12] = t9;
-		} else t9 = $[12];
-		let t10;
-		if ($[13] !== button || $[14] !== t9) {
-			t10 = /* @__PURE__ */ jsx("button", {
-				type: "button",
-				...button,
-				className: BAR_CLASS_NAME,
-				style: t9
-			});
-			$[13] = button;
-			$[14] = t9;
-			$[15] = t10;
-		} else t10 = $[15];
-		const t11 = `translate(${bar.left}, max(${y}, 0px))`;
-		let t12;
-		if ($[16] !== t11) {
-			t12 = {
-				width: BAR_SIZE,
-				transform: t11,
-				willChange: "transform",
-				zIndex: 2
-			};
-			$[16] = t11;
-			$[17] = t12;
-		} else t12 = $[17];
-		let t13;
-		if ($[18] !== marker.count || $[19] !== marker.label) {
-			t13 = /* @__PURE__ */ jsxs("span", {
-				className: `${LABEL_CLASS_NAME} rotate-180 [writing-mode:vertical-rl]`,
-				children: [
-					marker.label,
-					" (",
-					marker.count,
-					")"
-				]
-			});
-			$[18] = marker.count;
-			$[19] = marker.label;
-			$[20] = t13;
-		} else t13 = $[20];
-		let t14;
-		if ($[21] !== marker.key || $[22] !== t12 || $[23] !== t13) {
-			t14 = /* @__PURE__ */ jsx("div", {
-				"data-canvas-shelf-marker-label": marker.key,
-				className: "pointer-events-none absolute top-0 left-0 flex justify-center pt-3",
-				style: t12,
-				children: t13
-			});
-			$[21] = marker.key;
-			$[22] = t12;
-			$[23] = t13;
-			$[24] = t14;
-		} else t14 = $[24];
-		let t15;
-		if ($[25] !== t10 || $[26] !== t14) {
-			t15 = /* @__PURE__ */ jsxs(Fragment, { children: [t10, t14] });
-			$[25] = t10;
-			$[26] = t14;
-			$[27] = t15;
-		} else t15 = $[27];
-		return t15;
-	}
-	const labelStart = `max(${start}, calc(${bar.left} + ${12}px), ${24}px)`;
-	const t8 = `calc(${bar.right} - ${bar.left})`;
-	const t9 = `translate(${bar.left}, ${y})`;
-	let t10;
-	if ($[28] !== t8 || $[29] !== t9) {
-		t10 = {
-			height: BAR_SIZE,
-			width: t8,
-			transform: t9,
-			willChange: "transform",
-			zIndex: 2
-		};
-		$[28] = t8;
-		$[29] = t9;
-		$[30] = t10;
-	} else t10 = $[30];
-	let t11;
-	if ($[31] !== button || $[32] !== t10) {
-		t11 = /* @__PURE__ */ jsx("button", {
-			type: "button",
-			...button,
-			className: BAR_CLASS_NAME,
-			style: t10
-		});
-		$[31] = button;
-		$[32] = t10;
-		$[33] = t11;
-	} else t11 = $[33];
-	const t12 = `max(0px, calc(${end} - ${labelStart}))`;
-	const t13 = `translate(${labelStart}, ${y})`;
-	let t14;
-	if ($[34] !== t12 || $[35] !== t13) {
-		t14 = {
-			height: BAR_SIZE,
-			width: t12,
-			transform: t13,
-			willChange: "transform",
-			zIndex: 2
-		};
-		$[34] = t12;
-		$[35] = t13;
-		$[36] = t14;
-	} else t14 = $[36];
-	let t15;
-	if ($[37] !== marker.count || $[38] !== marker.label) {
-		t15 = /* @__PURE__ */ jsxs("span", {
-			className: LABEL_CLASS_NAME,
-			children: [
-				marker.label,
-				" (",
-				marker.count,
-				")"
-			]
-		});
-		$[37] = marker.count;
-		$[38] = marker.label;
-		$[39] = t15;
-	} else t15 = $[39];
-	let t16;
-	if ($[40] !== marker.key || $[41] !== t14 || $[42] !== t15) {
-		t16 = /* @__PURE__ */ jsx("div", {
-			"data-canvas-shelf-marker-label": marker.key,
-			className: "pointer-events-none absolute top-0 left-0 flex items-center overflow-hidden",
-			style: t14,
-			children: t15
-		});
-		$[40] = marker.key;
-		$[41] = t14;
-		$[42] = t15;
-		$[43] = t16;
-	} else t16 = $[43];
-	let t17;
-	if ($[44] !== t11 || $[45] !== t16) {
-		t17 = /* @__PURE__ */ jsxs(Fragment, { children: [t11, t16] });
-		$[44] = t11;
-		$[45] = t16;
-		$[46] = t17;
-	} else t17 = $[46];
-	return t17;
-}
-
-//#endregion
-export { CanvasShelfMarkers };