@upstart.gg/vite-plugins 0.1.42 → 0.1.44

package/dist/vite-plugin-upstart-editor/runtime/click-handler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"click-handler.d.ts","names":[],"sources":["../../../src/vite-plugin-upstart-editor/runtime/click-handler.ts"],"mappings":";;AAkEA;;iBAAgB,gBAAA,CAAA;;;AAiBhB;iBAAgB,mBAAA,CAAA"}
+{"version":3,"file":"click-handler.d.ts","names":[],"sources":["../../../src/vite-plugin-upstart-editor/runtime/click-handler.ts"],"mappings":";;AAmEA;;iBAAgB,gBAAA,CAAA;;;AAiBhB;iBAAgB,mBAAA,CAAA"}

package/dist/vite-plugin-upstart-editor/runtime/click-handler.js

@@ -1,4 +1,4 @@
-import { getCurrentMode } from "./state.js";
+import { getCurrentMode, getSelection, toggleSelection } from "./state.js";
 import { sendToParent } from "./utils.js";
 //#region src/vite-plugin-upstart-editor/runtime/click-handler.ts
 let isInitialized = false;
@@ -65,14 +65,76 @@ function cleanupClickHandler() {
 	document.removeEventListener("click", handleClick, true);
 	isInitialized = false;
 }
+/**
+* Build a SelectionRef from a clicked element, walking up to the nearest
+* component (data-upstart-file) for the source file / component name and
+* collecting i18n keys from the element's subtree.
+*/
+function buildSelectionRef(element) {
+	const hash = element.dataset.upstartHash ?? "";
+	const fileEl = element.closest("[data-upstart-file]");
+	const filePath = fileEl?.dataset.upstartFile ?? element.dataset.upstartFile ?? "";
+	const componentName = fileEl?.dataset.upstartComponent ?? element.dataset.upstartComponent;
+	const key = `${filePath}:${hash}` !== ":" ? `${filePath}:${hash}` : "";
+	if (!key) return null;
+	const i18nKeys = /* @__PURE__ */ new Set();
+	const collectKeys = (el) => {
+		const raw = el.dataset.upstartI18n;
+		if (raw) for (const k of raw.split(/[\s,]+/).filter(Boolean)) i18nKeys.add(k);
+	};
+	collectKeys(element);
+	for (const node of element.querySelectorAll("[data-upstart-i18n]")) collectKeys(node);
+	const text = (element.innerText ?? "").trim().slice(0, 200) || void 0;
+	const dataBoundEl = element.closest("[data-upstart-data-bound]");
+	const dataBound = !!dataBoundEl && dataBoundEl.dataset.upstartDataBound !== "false" && i18nKeys.size === 0;
+	return {
+		key,
+		hash,
+		filePath,
+		componentName,
+		i18nKeys: i18nKeys.size > 0 ? Array.from(i18nKeys) : void 0,
+		text,
+		dataBound: dataBound || void 0
+	};
+}
+/**
+* "Select" mode click: toggle the clicked component in/out of the selection,
+* mark it visually with data-upstart-selected, and report the new selection
+* to the parent. Never edits or navigates.
+*/
+function handleSelectClick(event, target) {
+	const rawElement = target.closest("[data-upstart-hash]");
+	if (!rawElement) {
+		console.info("[Upstart Editor] Select click ignored: no data-upstart-hash ancestor");
+		return;
+	}
+	const element = rawElement.parentElement?.closest("[data-upstart-editable-text-mode=\"rich-panel\"]") ?? rawElement;
+	event.preventDefault();
+	event.stopPropagation();
+	const ref = buildSelectionRef(element);
+	if (!ref) return;
+	const nowSelected = toggleSelection(ref, element);
+	if (nowSelected) element.setAttribute("data-upstart-selected", "");
+	else element.removeAttribute("data-upstart-selected");
+	sendToParent({
+		type: "selection-changed",
+		selection: getSelection()
+	});
+	console.log("[Upstart Editor] Selection toggled:", ref.key, nowSelected);
+}
 function handleClick(event) {
-	if (getCurrentMode() !== "edit") return;
+	const mode = getCurrentMode();
+	if (mode !== "edit" && mode !== "select") return;
 	console.debug("[Upstart Editor] Click event:", event);
 	const target = event.target;
 	if (!target) {
 		console.warn("[Upstart Editor] Click target is not an HTMLElement");
 		return;
 	}
+	if (mode === "select") {
+		handleSelectClick(event, target);
+		return;
+	}
 	if (target.closest("#upstart-array-controls, [data-upstart-draft-item]")) return;
 	if (target.closest(".upstart-editor-bubble-menu")) {
 		console.info("[Upstart Editor] Click ignored: target is inside the bubble menu");

package/dist/vite-plugin-upstart-editor/runtime/click-handler.js.map

@@ -1 +1 @@
-{"version":3,"file":"click-handler.js","names":[],"sources":["../../../src/vite-plugin-upstart-editor/runtime/click-handler.ts"],"sourcesContent":["import { getCurrentMode } from \"./state.js\";\nimport { sendToParent } from \"./utils.js\";\n\nlet isInitialized = false;\n\nconst DAISY_VAR_NAMES = [\n  \"base-100\",\n  \"base-200\",\n  \"base-300\",\n  \"base-content\",\n  \"primary\",\n  \"primary-content\",\n  \"secondary\",\n  \"secondary-content\",\n  \"accent\",\n  \"accent-content\",\n  \"neutral\",\n  \"neutral-content\",\n  \"info\",\n  \"info-content\",\n  \"success\",\n  \"success-content\",\n  \"warning\",\n  \"warning-content\",\n  \"error\",\n  \"error-content\",\n];\n\ninterface EditableImageRef {\n  id: string;\n  src: string;\n  alt: string;\n}\n\n/**\n * Collect editable images (elements carrying data-upstart-image-id) from the\n * clicked element's nearest subtree. Starting at `start`, we climb ancestors\n * until we find a subtree that contains at least one editable image. This lets\n * us surface a background image (e.g. a hero <img> covered by overlays) even\n * when the click lands on a sibling overlay rather than the image itself.\n */\nfunction collectImages(start: HTMLElement): EditableImageRef[] {\n  let el: HTMLElement | null = start;\n  for (let depth = 0; el && el !== document.body && depth < 8; depth++, el = el.parentElement) {\n    const found = new Set<HTMLElement>();\n    if (el.dataset.upstartImageId) found.add(el);\n    for (const node of el.querySelectorAll<HTMLElement>(\"[data-upstart-image-id]\")) {\n      found.add(node);\n    }\n    if (found.size > 0) {\n      return Array.from(found).map((node) => {\n        const img = node as HTMLImageElement;\n        return {\n          id: node.dataset.upstartImageId as string,\n          src: img.currentSrc || img.src || \"\",\n          alt: img.alt || \"\",\n        };\n      });\n    }\n  }\n  return [];\n}\n\n/**\n * Initialize click handler for className editing.\n */\nexport function initClickHandler(): void {\n  if (typeof document === \"undefined\") {\n    return;\n  }\n\n  if (isInitialized) {\n    return;\n  }\n\n  console.log(\"[Upstart Editor] Initializing click handler...\");\n  document.addEventListener(\"click\", handleClick, true);\n  isInitialized = true;\n}\n\n/**\n * Cleanup click handler.\n */\nexport function cleanupClickHandler(): void {\n  document.removeEventListener(\"click\", handleClick, true);\n  isInitialized = false;\n}\n\nfunction handleClick(event: MouseEvent): void {\n  if (getCurrentMode() !== \"edit\") {\n    return;\n  }\n\n  console.debug(\"[Upstart Editor] Click event:\", event);\n\n  const target = event.target as HTMLElement | null;\n  if (!target) {\n    console.warn(\"[Upstart Editor] Click target is not an HTMLElement\");\n    return;\n  }\n\n  // Editor-only chrome (the array ×/+/✓ controls) and locally-staged draft list\n  // items handle their own clicks and must never be treated as element selection.\n  if (target.closest(\"#upstart-array-controls, [data-upstart-draft-item]\")) {\n    return;\n  }\n\n  if (target.closest(\".upstart-editor-bubble-menu\")) {\n    console.info(\"[Upstart Editor] Click ignored: target is inside the bubble menu\");\n    return;\n  }\n\n  const activeLink = target.closest(\"a[data-upstart-editor-active]\");\n  const isFormControlClick = Boolean(\n    (target as HTMLElement | null)?.closest(\"input, textarea, select, button\"),\n  );\n  if (activeLink || !isFormControlClick) {\n    event.preventDefault();\n  }\n\n  // Clicks inside contenteditable (TipTap active) — still notify style panel if applicable\n  if (target.closest(\"[contenteditable='true']\")) {\n    const editableEl = target.closest<HTMLElement>(\"[data-upstart-editable-text='true']\");\n    if (editableEl) {\n      let classNameId = editableEl.dataset.upstartClassnameId ?? \"\";\n      let currentClassName = editableEl.className;\n      if (!classNameId) {\n        const parentWithClassname = editableEl.closest<HTMLElement>(\"[data-upstart-classname-id]\");\n        if (parentWithClassname) {\n          classNameId = parentWithClassname.dataset.upstartClassnameId ?? \"\";\n          currentClassName = parentWithClassname.className;\n        }\n      }\n      if (classNameId) {\n        const computedStyle = getComputedStyle(document.documentElement);\n        const themeColors: Record<string, string> = {};\n        for (const name of DAISY_VAR_NAMES) {\n          const val = computedStyle.getPropertyValue(`--color-${name}`).trim();\n          if (val) themeColors[name] = val;\n        }\n        sendToParent({\n          type: \"element-clicked\",\n          hash: editableEl.dataset.upstartHash ?? \"\",\n          componentName: editableEl.dataset.upstartComponent,\n          filePath: editableEl.dataset.upstartFile ?? \"\",\n          classNameId,\n          currentClassName,\n          themeColors,\n          bounds: { top: 0, left: 0, width: 0, height: 0, right: 0, bottom: 0 },\n        });\n      }\n    }\n    console.info(\"[Upstart Editor] Click inside contenteditable: TipTap handles text editing\");\n    return;\n  }\n\n  // Detect a datasource record under the click. We check this BEFORE the\n  // data-upstart-hash gate because a record may be rendered without that\n  // attribute (e.g. an <a> from <Link to={...}>) and we still want to open\n  // the inline datasource editor instead of letting the browser navigate.\n  const datasourceEl = target.closest<HTMLElement>(\"[data-upstart-datasource][data-upstart-record-id]\");\n\n  // Find the closest element with data-upstart-hash\n  const rawElement = target.closest<HTMLElement>(\"[data-upstart-hash]\");\n  if (!rawElement) {\n    if (datasourceEl) {\n      // Datasource record click without a data-upstart-hash ancestor: stop\n      // navigation, surface the datasource event so the editor can open the\n      // inline datasource item inspector.\n      event.preventDefault();\n      event.stopPropagation();\n      sendToParent({\n        type: \"element-clicked\",\n        hash: \"\",\n        componentName: undefined,\n        filePath: \"\",\n        classNameId: \"\",\n        currentClassName: \"\",\n        datasourceId: datasourceEl.dataset.upstartDatasource,\n        recordId: datasourceEl.dataset.upstartRecordId,\n        themeColors: {},\n        bounds: { top: 0, left: 0, width: 0, height: 0, right: 0, bottom: 0 },\n        images: collectImages(datasourceEl),\n      });\n      return;\n    }\n    console.info(\"[Upstart Editor] Click ignored: no ancestral element with data-upstart-hash found\");\n    return;\n  }\n\n  // If the clicked element is nested inside a rich-panel editable ancestor, bubble up to it\n  // so that clicking any inline child (e.g. <strong>, <em>) edits the whole rich-panel region.\n  const richPanelAncestor = rawElement.parentElement?.closest<HTMLElement>(\n    '[data-upstart-editable-text-mode=\"rich-panel\"]',\n  );\n  const element = richPanelAncestor ?? rawElement;\n\n  event.stopPropagation();\n\n  console.log(\"Element clicked dataset:\", element.dataset);\n\n  const hash = element.dataset.upstartHash as string;\n  const componentName = element.dataset.upstartComponent;\n  const filePath = element.dataset.upstartFile ?? \"\";\n\n  // If this element has editable-text, focus the TipTap editor (all modes now use inline TipTap)\n  if (element.dataset.upstartEditableText === \"true\") {\n    const proseMirror = element.querySelector<HTMLElement>(\".ProseMirror\");\n    if (proseMirror) {\n      proseMirror.focus();\n    }\n  }\n\n  // Find classNameId on the element itself, or walk up to find it on a parent\n  let classNameId = element.dataset.upstartClassnameId ?? \"\";\n  let currentClassName = element.className;\n  if (!classNameId) {\n    const parentWithClassname = element.closest<HTMLElement>(\"[data-upstart-classname-id]\");\n    if (parentWithClassname) {\n      classNameId = parentWithClassname.dataset.upstartClassnameId ?? \"\";\n      currentClassName = parentWithClassname.className;\n    }\n  }\n\n  // Read DaisyUI CSS custom property values from the iframe's document\n  const computedStyle = getComputedStyle(document.documentElement);\n  const themeColors: Record<string, string> = {};\n  for (const name of DAISY_VAR_NAMES) {\n    const val = computedStyle.getPropertyValue(`--color-${name}`).trim();\n    if (val) themeColors[name] = val;\n  }\n\n  const rect = element.getBoundingClientRect();\n  const bounds = {\n    top: rect.top,\n    left: rect.left,\n    width: rect.width,\n    height: rect.height,\n    right: rect.right,\n    bottom: rect.bottom,\n  };\n\n  // datasourceEl was resolved before the data-upstart-hash gate so we could\n  // intercept datasource clicks even without a hash ancestor (see above).\n  const datasourceId = datasourceEl?.dataset.upstartDatasource;\n  const recordId = datasourceEl?.dataset.upstartRecordId;\n\n  sendToParent({\n    type: \"element-clicked\",\n    hash,\n    componentName,\n    filePath,\n    classNameId,\n    currentClassName,\n    datasourceId,\n    recordId,\n    themeColors,\n    bounds,\n    viewportWidth: window.innerWidth,\n    images: collectImages(element),\n  });\n\n  console.log(\"[Upstart Editor] Element clicked:\", componentName, hash);\n}\n"],"mappings":"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"}
+{"version":3,"file":"click-handler.js","names":[],"sources":["../../../src/vite-plugin-upstart-editor/runtime/click-handler.ts"],"sourcesContent":["import { getCurrentMode, getSelection, toggleSelection } from \"./state.js\";\nimport { sendToParent } from \"./utils.js\";\nimport type { SelectionRef } from \"./types.js\";\n\nlet isInitialized = false;\n\nconst DAISY_VAR_NAMES = [\n  \"base-100\",\n  \"base-200\",\n  \"base-300\",\n  \"base-content\",\n  \"primary\",\n  \"primary-content\",\n  \"secondary\",\n  \"secondary-content\",\n  \"accent\",\n  \"accent-content\",\n  \"neutral\",\n  \"neutral-content\",\n  \"info\",\n  \"info-content\",\n  \"success\",\n  \"success-content\",\n  \"warning\",\n  \"warning-content\",\n  \"error\",\n  \"error-content\",\n];\n\ninterface EditableImageRef {\n  id: string;\n  src: string;\n  alt: string;\n}\n\n/**\n * Collect editable images (elements carrying data-upstart-image-id) from the\n * clicked element's nearest subtree. Starting at `start`, we climb ancestors\n * until we find a subtree that contains at least one editable image. This lets\n * us surface a background image (e.g. a hero <img> covered by overlays) even\n * when the click lands on a sibling overlay rather than the image itself.\n */\nfunction collectImages(start: HTMLElement): EditableImageRef[] {\n  let el: HTMLElement | null = start;\n  for (let depth = 0; el && el !== document.body && depth < 8; depth++, el = el.parentElement) {\n    const found = new Set<HTMLElement>();\n    if (el.dataset.upstartImageId) found.add(el);\n    for (const node of el.querySelectorAll<HTMLElement>(\"[data-upstart-image-id]\")) {\n      found.add(node);\n    }\n    if (found.size > 0) {\n      return Array.from(found).map((node) => {\n        const img = node as HTMLImageElement;\n        return {\n          id: node.dataset.upstartImageId as string,\n          src: img.currentSrc || img.src || \"\",\n          alt: img.alt || \"\",\n        };\n      });\n    }\n  }\n  return [];\n}\n\n/**\n * Initialize click handler for className editing.\n */\nexport function initClickHandler(): void {\n  if (typeof document === \"undefined\") {\n    return;\n  }\n\n  if (isInitialized) {\n    return;\n  }\n\n  console.log(\"[Upstart Editor] Initializing click handler...\");\n  document.addEventListener(\"click\", handleClick, true);\n  isInitialized = true;\n}\n\n/**\n * Cleanup click handler.\n */\nexport function cleanupClickHandler(): void {\n  document.removeEventListener(\"click\", handleClick, true);\n  isInitialized = false;\n}\n\n/**\n * Build a SelectionRef from a clicked element, walking up to the nearest\n * component (data-upstart-file) for the source file / component name and\n * collecting i18n keys from the element's subtree.\n */\nfunction buildSelectionRef(element: HTMLElement): SelectionRef | null {\n  const hash = element.dataset.upstartHash ?? \"\";\n\n  const fileEl = element.closest<HTMLElement>(\"[data-upstart-file]\");\n  const filePath = fileEl?.dataset.upstartFile ?? element.dataset.upstartFile ?? \"\";\n  const componentName = fileEl?.dataset.upstartComponent ?? element.dataset.upstartComponent;\n\n  // A stable identity for toggling. Prefer filePath+hash; fall back so distinct\n  // elements without a hash don't collapse onto the same key.\n  const key = `${filePath}:${hash}` !== \":\" ? `${filePath}:${hash}` : \"\";\n  if (!key) {\n    return null;\n  }\n\n  const i18nKeys = new Set<string>();\n  const collectKeys = (el: HTMLElement) => {\n    const raw = el.dataset.upstartI18n;\n    if (raw) {\n      for (const k of raw.split(/[\\s,]+/).filter(Boolean)) i18nKeys.add(k);\n    }\n  };\n  collectKeys(element);\n  for (const node of element.querySelectorAll<HTMLElement>(\"[data-upstart-i18n]\")) {\n    collectKeys(node);\n  }\n\n  const text = (element.innerText ?? \"\").trim().slice(0, 200) || undefined;\n\n  // Whether THIS element's content is derived from database data (element-level marker).\n  // This is what gates content edits — its content can't be edited from the editor, only\n  // its presentation. i18n/translated content is editable (it lives in translation files),\n  // so i18n keys on the element take precedence and suppress the data-bound flag even if the\n  // element was wrongly marked.\n  const dataBoundEl = element.closest<HTMLElement>(\"[data-upstart-data-bound]\");\n  const dataBound = !!dataBoundEl && dataBoundEl.dataset.upstartDataBound !== \"false\" && i18nKeys.size === 0;\n\n  return {\n    key,\n    hash,\n    filePath,\n    componentName,\n    i18nKeys: i18nKeys.size > 0 ? Array.from(i18nKeys) : undefined,\n    text,\n    dataBound: dataBound || undefined,\n  };\n}\n\n/**\n * \"Select\" mode click: toggle the clicked component in/out of the selection,\n * mark it visually with data-upstart-selected, and report the new selection\n * to the parent. Never edits or navigates.\n */\nfunction handleSelectClick(event: MouseEvent, target: HTMLElement): void {\n  const rawElement = target.closest<HTMLElement>(\"[data-upstart-hash]\");\n  if (!rawElement) {\n    console.info(\"[Upstart Editor] Select click ignored: no data-upstart-hash ancestor\");\n    return;\n  }\n\n  // Bubble up to a rich-panel editable ancestor so selecting an inline child\n  // (e.g. <strong>) selects the whole editable region — mirrors edit-mode resolution.\n  const richPanelAncestor = rawElement.parentElement?.closest<HTMLElement>(\n    '[data-upstart-editable-text-mode=\"rich-panel\"]',\n  );\n  const element = richPanelAncestor ?? rawElement;\n\n  event.preventDefault();\n  event.stopPropagation();\n\n  const ref = buildSelectionRef(element);\n  if (!ref) {\n    return;\n  }\n\n  const nowSelected = toggleSelection(ref, element);\n  if (nowSelected) {\n    element.setAttribute(\"data-upstart-selected\", \"\");\n  } else {\n    element.removeAttribute(\"data-upstart-selected\");\n  }\n\n  sendToParent({ type: \"selection-changed\", selection: getSelection() });\n  console.log(\"[Upstart Editor] Selection toggled:\", ref.key, nowSelected);\n}\n\nfunction handleClick(event: MouseEvent): void {\n  const mode = getCurrentMode();\n  if (mode !== \"edit\" && mode !== \"select\") {\n    return;\n  }\n\n  console.debug(\"[Upstart Editor] Click event:\", event);\n\n  const target = event.target as HTMLElement | null;\n  if (!target) {\n    console.warn(\"[Upstart Editor] Click target is not an HTMLElement\");\n    return;\n  }\n\n  if (mode === \"select\") {\n    handleSelectClick(event, target);\n    return;\n  }\n\n  // Editor-only chrome (the array ×/+/✓ controls) and locally-staged draft list\n  // items handle their own clicks and must never be treated as element selection.\n  if (target.closest(\"#upstart-array-controls, [data-upstart-draft-item]\")) {\n    return;\n  }\n\n  if (target.closest(\".upstart-editor-bubble-menu\")) {\n    console.info(\"[Upstart Editor] Click ignored: target is inside the bubble menu\");\n    return;\n  }\n\n  const activeLink = target.closest(\"a[data-upstart-editor-active]\");\n  const isFormControlClick = Boolean(\n    (target as HTMLElement | null)?.closest(\"input, textarea, select, button\"),\n  );\n  if (activeLink || !isFormControlClick) {\n    event.preventDefault();\n  }\n\n  // Clicks inside contenteditable (TipTap active) — still notify style panel if applicable\n  if (target.closest(\"[contenteditable='true']\")) {\n    const editableEl = target.closest<HTMLElement>(\"[data-upstart-editable-text='true']\");\n    if (editableEl) {\n      let classNameId = editableEl.dataset.upstartClassnameId ?? \"\";\n      let currentClassName = editableEl.className;\n      if (!classNameId) {\n        const parentWithClassname = editableEl.closest<HTMLElement>(\"[data-upstart-classname-id]\");\n        if (parentWithClassname) {\n          classNameId = parentWithClassname.dataset.upstartClassnameId ?? \"\";\n          currentClassName = parentWithClassname.className;\n        }\n      }\n      if (classNameId) {\n        const computedStyle = getComputedStyle(document.documentElement);\n        const themeColors: Record<string, string> = {};\n        for (const name of DAISY_VAR_NAMES) {\n          const val = computedStyle.getPropertyValue(`--color-${name}`).trim();\n          if (val) themeColors[name] = val;\n        }\n        sendToParent({\n          type: \"element-clicked\",\n          hash: editableEl.dataset.upstartHash ?? \"\",\n          componentName: editableEl.dataset.upstartComponent,\n          filePath: editableEl.dataset.upstartFile ?? \"\",\n          classNameId,\n          currentClassName,\n          themeColors,\n          bounds: { top: 0, left: 0, width: 0, height: 0, right: 0, bottom: 0 },\n        });\n      }\n    }\n    console.info(\"[Upstart Editor] Click inside contenteditable: TipTap handles text editing\");\n    return;\n  }\n\n  // Detect a datasource record under the click. We check this BEFORE the\n  // data-upstart-hash gate because a record may be rendered without that\n  // attribute (e.g. an <a> from <Link to={...}>) and we still want to open\n  // the inline datasource editor instead of letting the browser navigate.\n  const datasourceEl = target.closest<HTMLElement>(\"[data-upstart-datasource][data-upstart-record-id]\");\n\n  // Find the closest element with data-upstart-hash\n  const rawElement = target.closest<HTMLElement>(\"[data-upstart-hash]\");\n  if (!rawElement) {\n    if (datasourceEl) {\n      // Datasource record click without a data-upstart-hash ancestor: stop\n      // navigation, surface the datasource event so the editor can open the\n      // inline datasource item inspector.\n      event.preventDefault();\n      event.stopPropagation();\n      sendToParent({\n        type: \"element-clicked\",\n        hash: \"\",\n        componentName: undefined,\n        filePath: \"\",\n        classNameId: \"\",\n        currentClassName: \"\",\n        datasourceId: datasourceEl.dataset.upstartDatasource,\n        recordId: datasourceEl.dataset.upstartRecordId,\n        themeColors: {},\n        bounds: { top: 0, left: 0, width: 0, height: 0, right: 0, bottom: 0 },\n        images: collectImages(datasourceEl),\n      });\n      return;\n    }\n    console.info(\"[Upstart Editor] Click ignored: no ancestral element with data-upstart-hash found\");\n    return;\n  }\n\n  // If the clicked element is nested inside a rich-panel editable ancestor, bubble up to it\n  // so that clicking any inline child (e.g. <strong>, <em>) edits the whole rich-panel region.\n  const richPanelAncestor = rawElement.parentElement?.closest<HTMLElement>(\n    '[data-upstart-editable-text-mode=\"rich-panel\"]',\n  );\n  const element = richPanelAncestor ?? rawElement;\n\n  event.stopPropagation();\n\n  console.log(\"Element clicked dataset:\", element.dataset);\n\n  const hash = element.dataset.upstartHash as string;\n  const componentName = element.dataset.upstartComponent;\n  const filePath = element.dataset.upstartFile ?? \"\";\n\n  // If this element has editable-text, focus the TipTap editor (all modes now use inline TipTap)\n  if (element.dataset.upstartEditableText === \"true\") {\n    const proseMirror = element.querySelector<HTMLElement>(\".ProseMirror\");\n    if (proseMirror) {\n      proseMirror.focus();\n    }\n  }\n\n  // Find classNameId on the element itself, or walk up to find it on a parent\n  let classNameId = element.dataset.upstartClassnameId ?? \"\";\n  let currentClassName = element.className;\n  if (!classNameId) {\n    const parentWithClassname = element.closest<HTMLElement>(\"[data-upstart-classname-id]\");\n    if (parentWithClassname) {\n      classNameId = parentWithClassname.dataset.upstartClassnameId ?? \"\";\n      currentClassName = parentWithClassname.className;\n    }\n  }\n\n  // Read DaisyUI CSS custom property values from the iframe's document\n  const computedStyle = getComputedStyle(document.documentElement);\n  const themeColors: Record<string, string> = {};\n  for (const name of DAISY_VAR_NAMES) {\n    const val = computedStyle.getPropertyValue(`--color-${name}`).trim();\n    if (val) themeColors[name] = val;\n  }\n\n  const rect = element.getBoundingClientRect();\n  const bounds = {\n    top: rect.top,\n    left: rect.left,\n    width: rect.width,\n    height: rect.height,\n    right: rect.right,\n    bottom: rect.bottom,\n  };\n\n  // datasourceEl was resolved before the data-upstart-hash gate so we could\n  // intercept datasource clicks even without a hash ancestor (see above).\n  const datasourceId = datasourceEl?.dataset.upstartDatasource;\n  const recordId = datasourceEl?.dataset.upstartRecordId;\n\n  sendToParent({\n    type: \"element-clicked\",\n    hash,\n    componentName,\n    filePath,\n    classNameId,\n    currentClassName,\n    datasourceId,\n    recordId,\n    themeColors,\n    bounds,\n    viewportWidth: window.innerWidth,\n    images: collectImages(element),\n  });\n\n  console.log(\"[Upstart Editor] Element clicked:\", componentName, hash);\n}\n"],"mappings":"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"}

package/dist/vite-plugin-upstart-editor/runtime/hover-overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hover-overlay.d.ts","names":[],"sources":["../../../src/vite-plugin-upstart-editor/runtime/hover-overlay.ts"],"mappings":";;AAYA;;iBAAgB,gBAAA,CAAA;;;AAkDhB;iBAAgB,YAAA,CAAA"}
+{"version":3,"file":"hover-overlay.d.ts","names":[],"sources":["../../../src/vite-plugin-upstart-editor/runtime/hover-overlay.ts"],"mappings":";;AAYA;;iBAAgB,gBAAA,CAAA;;;AA4DhB;iBAAgB,YAAA,CAAA"}

package/dist/vite-plugin-upstart-editor/runtime/hover-overlay.js

@@ -21,7 +21,8 @@ function initHoverOverlay() {
 		":root[data-upstart-edit-mode] [data-upstart-editor-active] {",
 		"  transition: outline 150ms, outline-offset 150ms;",
 		"}",
-		":root[data-upstart-edit-mode] [data-upstart-hovered] {",
+		":root[data-upstart-edit-mode] [data-upstart-hovered],",
+		":root[data-upstart-select-mode] [data-upstart-hovered] {",
 		"  outline: 2px solid rgba(114, 112, 198, 0.6);",
 		"  outline-offset: 4px;",
 		"  cursor: pointer;",
@@ -31,9 +32,15 @@ function initHoverOverlay() {
 		"  outline-offset: 4px;",
 		"  cursor: text;",
 		"}",
-		":root[data-upstart-edit-mode] [data-upstart-hovered-ancestor] {",
+		":root[data-upstart-edit-mode] [data-upstart-hovered-ancestor],",
+		":root[data-upstart-select-mode] [data-upstart-hovered-ancestor] {",
 		"  outline: 1px dashed rgba(114, 112, 198, 0.6);",
 		"  cursor: pointer;",
+		"}",
+		":root[data-upstart-select-mode] [data-upstart-selected] {",
+		"  outline: 2px dashed rgba(114, 112, 198, 0.95) !important;",
+		"  outline-offset: 2px;",
+		"  background-color: rgba(114, 112, 198, 0.08);",
 		"}"
 	].join("\n");
 	document.head.appendChild(style);
@@ -90,7 +97,8 @@ function applyEditableHover(target, withAncestors) {
 	}
 }
 function handleMouseOver(event) {
-	if (getCurrentMode() !== "edit") return;
+	const mode = getCurrentMode();
+	if (mode !== "edit" && mode !== "select") return;
 	const target = event.target;
 	if (!target) return;
 	const textEl = target.closest("[data-upstart-editor-active]");
@@ -117,7 +125,8 @@ function handleMouseOut(event) {
 	hideOverlays();
 }
 function handleKeyChange(event) {
-	if (getCurrentMode() !== "edit" || !hoveredEl) return;
+	const mode = getCurrentMode();
+	if (mode !== "edit" && mode !== "select" || !hoveredEl) return;
 	if (event.key !== "Meta" && event.key !== "Control") return;
 	applyEditableHover(hoveredEl, event.type === "keydown" && (event.metaKey || event.ctrlKey));
 }

package/dist/vite-plugin-upstart-editor/runtime/hover-overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"hover-overlay.js","names":[],"sources":["../../../src/vite-plugin-upstart-editor/runtime/hover-overlay.ts"],"sourcesContent":["import { getCurrentMode } from \"./state.js\";\nimport { sendToParent } from \"./utils.js\";\n\nlet overlay: HTMLDivElement | null = null;\nlet currentTarget: HTMLElement | null = null;\nlet hoveredEl: HTMLElement | null = null;\nlet isInitialized = false;\nlet rafId: number | null = null;\n\n/**\n * Initialize hover overlay.\n */\nexport function initHoverOverlay(): void {\n  if (typeof document === \"undefined\") {\n    return;\n  }\n\n  if (isInitialized) {\n    return;\n  }\n\n  console.log(\"[Upstart Editor] Initializing hover overlay...\");\n\n  const style = document.createElement(\"style\");\n  style.id = \"upstart-hover-edit-styles\";\n  style.textContent = [\n    \":root[data-upstart-edit-mode] [data-upstart-classname-id]:not([data-upstart-editable-text='true']),\",\n    \":root[data-upstart-edit-mode] [data-upstart-image-id],\",\n    \":root[data-upstart-edit-mode] [data-upstart-datasource][data-upstart-record-id]:not([data-upstart-editable-text='true']),\",\n    \":root[data-upstart-edit-mode] [data-upstart-editor-active] {\",\n    \"  transition: outline 150ms, outline-offset 150ms;\",\n    \"}\",\n    \":root[data-upstart-edit-mode] [data-upstart-hovered] {\",\n    \"  outline: 2px solid rgba(114, 112, 198, 0.6);\",\n    \"  outline-offset: 4px;\",\n    \"  cursor: pointer;\",\n    \"}\",\n    \":root[data-upstart-edit-mode] [data-upstart-editor-active][data-upstart-hovered] {\",\n    \"  outline: 2px solid rgba(114, 112, 198, 0.6);\",\n    \"  outline-offset: 4px;\",\n    \"  cursor: text;\",\n    \"}\",\n    \":root[data-upstart-edit-mode] [data-upstart-hovered-ancestor] {\",\n    \"  outline: 1px dashed rgba(114, 112, 198, 0.6);\",\n    \"  cursor: pointer;\",\n    \"}\",\n  ].join(\"\\n\");\n  document.head.appendChild(style);\n\n  document.addEventListener(\"mouseover\", handleMouseOver);\n  document.addEventListener(\"mouseout\", handleMouseOut);\n  document.addEventListener(\"keydown\", handleKeyChange);\n  document.addEventListener(\"keyup\", handleKeyChange);\n  window.addEventListener(\"scroll\", scheduleOverlayUpdate, { passive: true });\n  window.addEventListener(\"resize\", scheduleOverlayUpdate, { passive: true });\n\n  isInitialized = true;\n}\n\n/**\n * Hide all overlays.\n */\nexport function hideOverlays(): void {\n  if (overlay) {\n    overlay.style.display = \"none\";\n    currentTarget = null;\n  }\n  clearEditableHover();\n}\n\nfunction isEligible(el: HTMLElement): boolean {\n  if (el.dataset.upstartEditableText === \"true\") return false;\n  return !!(\n    el.dataset.upstartClassnameId ||\n    el.dataset.upstartImageId ||\n    (el.dataset.upstartDatasource && el.dataset.upstartRecordId)\n  );\n}\n\nfunction clearEditableHover(): void {\n  for (const el of document.querySelectorAll(\"[data-upstart-hovered],[data-upstart-hovered-ancestor]\")) {\n    (el as HTMLElement).removeAttribute(\"data-upstart-hovered\");\n    (el as HTMLElement).removeAttribute(\"data-upstart-hovered-ancestor\");\n  }\n  hoveredEl = null;\n}\n\nfunction applyTextHover(el: HTMLElement): void {\n  clearEditableHover();\n  el.setAttribute(\"data-upstart-hovered\", \"\");\n  hoveredEl = el;\n}\n\nfunction applyEditableHover(target: HTMLElement, withAncestors: boolean): void {\n  clearEditableHover();\n\n  // Find closest eligible element\n  let el: HTMLElement | null = target;\n  while (el && el !== document.documentElement) {\n    if (isEligible(el)) break;\n    el = el.parentElement;\n  }\n  if (!el || el === document.documentElement) return;\n\n  el.setAttribute(\"data-upstart-hovered\", \"\");\n  hoveredEl = el;\n\n  if (withAncestors) {\n    let ancestor = el.parentElement;\n    while (ancestor && ancestor !== document.documentElement) {\n      if (isEligible(ancestor)) {\n        ancestor.setAttribute(\"data-upstart-hovered-ancestor\", \"\");\n      }\n      ancestor = ancestor.parentElement;\n    }\n  }\n}\n\nfunction handleMouseOver(event: MouseEvent): void {\n  if (getCurrentMode() !== \"edit\") {\n    return;\n  }\n\n  const target = event.target as HTMLElement | null;\n  if (!target) {\n    return;\n  }\n\n  // If hovering inside an active text editor, highlight only that element\n  // and suppress the component overlay box so parents don't get hover effects.\n  const textEl = target.closest<HTMLElement>(\"[data-upstart-editor-active]\");\n  if (textEl) {\n    applyTextHover(textEl);\n    if (overlay) overlay.style.display = \"none\";\n    currentTarget = null;\n    return;\n  }\n\n  applyEditableHover(target, event.metaKey || event.ctrlKey);\n\n  const component = target.closest<HTMLElement>(\"[data-upstart-component]\");\n  if (!component || component.dataset.upstartEditorActive) {\n    return;\n  }\n\n  if (!overlay) {\n    createOverlay();\n  }\n\n  currentTarget = component;\n  positionOverlay(component);\n}\n\nfunction handleMouseOut(event: MouseEvent): void {\n  const target = event.target as HTMLElement | null;\n  const relatedTarget = event.relatedTarget as HTMLElement | null;\n\n  if (!target) {\n    return;\n  }\n\n  const component = target.closest<HTMLElement>(\"[data-upstart-component]\");\n  if (!component) {\n    return;\n  }\n\n  if (relatedTarget && component.contains(relatedTarget)) {\n    return;\n  }\n\n  hideOverlays();\n}\n\nfunction handleKeyChange(event: KeyboardEvent): void {\n  if (getCurrentMode() !== \"edit\" || !hoveredEl) return;\n  if (event.key !== \"Meta\" && event.key !== \"Control\") return;\n  applyEditableHover(hoveredEl, event.type === \"keydown\" && (event.metaKey || event.ctrlKey));\n}\n\nfunction createOverlay(): void {\n  overlay = document.createElement(\"div\");\n  overlay.id = \"upstart-hover-overlay\";\n  overlay.style.cssText =\n    \"position: absolute; pointer-events: none; border: 2px solid rgba(114, 112, 198, 0.6); \" +\n    \"background: rgba(114, 112, 198, 0.05); border-radius: 4px; z-index: 9999; \" +\n    \"transition: all 0.1s ease; display: none;\";\n  document.body.appendChild(overlay);\n}\n\nfunction positionOverlay(element: HTMLElement): void {\n  if (!overlay) {\n    return;\n  }\n\n  const rect = element.getBoundingClientRect();\n  overlay.style.top = `${rect.top + window.scrollY}px`;\n  overlay.style.left = `${rect.left + window.scrollX}px`;\n  overlay.style.width = `${rect.width}px`;\n  overlay.style.height = `${rect.height}px`;\n  overlay.style.display = \"block\";\n}\n\nfunction scheduleOverlayUpdate(): void {\n  if (rafId !== null) {\n    return;\n  }\n\n  rafId = requestAnimationFrame(() => {\n    rafId = null;\n    if (currentTarget && overlay && overlay.style.display === \"block\") {\n      positionOverlay(currentTarget);\n    }\n  });\n}\n"],"mappings":"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"}
+{"version":3,"file":"hover-overlay.js","names":[],"sources":["../../../src/vite-plugin-upstart-editor/runtime/hover-overlay.ts"],"sourcesContent":["import { getCurrentMode } from \"./state.js\";\nimport { sendToParent } from \"./utils.js\";\n\nlet overlay: HTMLDivElement | null = null;\nlet currentTarget: HTMLElement | null = null;\nlet hoveredEl: HTMLElement | null = null;\nlet isInitialized = false;\nlet rafId: number | null = null;\n\n/**\n * Initialize hover overlay.\n */\nexport function initHoverOverlay(): void {\n  if (typeof document === \"undefined\") {\n    return;\n  }\n\n  if (isInitialized) {\n    return;\n  }\n\n  console.log(\"[Upstart Editor] Initializing hover overlay...\");\n\n  const style = document.createElement(\"style\");\n  style.id = \"upstart-hover-edit-styles\";\n  style.textContent = [\n    \":root[data-upstart-edit-mode] [data-upstart-classname-id]:not([data-upstart-editable-text='true']),\",\n    \":root[data-upstart-edit-mode] [data-upstart-image-id],\",\n    \":root[data-upstart-edit-mode] [data-upstart-datasource][data-upstart-record-id]:not([data-upstart-editable-text='true']),\",\n    \":root[data-upstart-edit-mode] [data-upstart-editor-active] {\",\n    \"  transition: outline 150ms, outline-offset 150ms;\",\n    \"}\",\n    \":root[data-upstart-edit-mode] [data-upstart-hovered],\",\n    \":root[data-upstart-select-mode] [data-upstart-hovered] {\",\n    \"  outline: 2px solid rgba(114, 112, 198, 0.6);\",\n    \"  outline-offset: 4px;\",\n    \"  cursor: pointer;\",\n    \"}\",\n    \":root[data-upstart-edit-mode] [data-upstart-editor-active][data-upstart-hovered] {\",\n    \"  outline: 2px solid rgba(114, 112, 198, 0.6);\",\n    \"  outline-offset: 4px;\",\n    \"  cursor: text;\",\n    \"}\",\n    \":root[data-upstart-edit-mode] [data-upstart-hovered-ancestor],\",\n    \":root[data-upstart-select-mode] [data-upstart-hovered-ancestor] {\",\n    \"  outline: 1px dashed rgba(114, 112, 198, 0.6);\",\n    \"  cursor: pointer;\",\n    \"}\",\n    // Persistent outline for elements picked in select mode. Solid + filled so\n    // they stand out from the dashed/translucent hover state. Only visible while\n    // in select mode (the selection set itself is kept across mode switches).\n    \":root[data-upstart-select-mode] [data-upstart-selected] {\",\n    \"  outline: 2px dashed rgba(114, 112, 198, 0.95) !important;\",\n    \"  outline-offset: 2px;\",\n    \"  background-color: rgba(114, 112, 198, 0.08);\",\n    \"}\",\n  ].join(\"\\n\");\n  document.head.appendChild(style);\n\n  document.addEventListener(\"mouseover\", handleMouseOver);\n  document.addEventListener(\"mouseout\", handleMouseOut);\n  document.addEventListener(\"keydown\", handleKeyChange);\n  document.addEventListener(\"keyup\", handleKeyChange);\n  window.addEventListener(\"scroll\", scheduleOverlayUpdate, { passive: true });\n  window.addEventListener(\"resize\", scheduleOverlayUpdate, { passive: true });\n\n  isInitialized = true;\n}\n\n/**\n * Hide all overlays.\n */\nexport function hideOverlays(): void {\n  if (overlay) {\n    overlay.style.display = \"none\";\n    currentTarget = null;\n  }\n  clearEditableHover();\n}\n\nfunction isEligible(el: HTMLElement): boolean {\n  if (el.dataset.upstartEditableText === \"true\") return false;\n  return !!(\n    el.dataset.upstartClassnameId ||\n    el.dataset.upstartImageId ||\n    (el.dataset.upstartDatasource && el.dataset.upstartRecordId)\n  );\n}\n\nfunction clearEditableHover(): void {\n  for (const el of document.querySelectorAll(\"[data-upstart-hovered],[data-upstart-hovered-ancestor]\")) {\n    (el as HTMLElement).removeAttribute(\"data-upstart-hovered\");\n    (el as HTMLElement).removeAttribute(\"data-upstart-hovered-ancestor\");\n  }\n  hoveredEl = null;\n}\n\nfunction applyTextHover(el: HTMLElement): void {\n  clearEditableHover();\n  el.setAttribute(\"data-upstart-hovered\", \"\");\n  hoveredEl = el;\n}\n\nfunction applyEditableHover(target: HTMLElement, withAncestors: boolean): void {\n  clearEditableHover();\n\n  // Find closest eligible element\n  let el: HTMLElement | null = target;\n  while (el && el !== document.documentElement) {\n    if (isEligible(el)) break;\n    el = el.parentElement;\n  }\n  if (!el || el === document.documentElement) return;\n\n  el.setAttribute(\"data-upstart-hovered\", \"\");\n  hoveredEl = el;\n\n  if (withAncestors) {\n    let ancestor = el.parentElement;\n    while (ancestor && ancestor !== document.documentElement) {\n      if (isEligible(ancestor)) {\n        ancestor.setAttribute(\"data-upstart-hovered-ancestor\", \"\");\n      }\n      ancestor = ancestor.parentElement;\n    }\n  }\n}\n\nfunction handleMouseOver(event: MouseEvent): void {\n  const mode = getCurrentMode();\n  if (mode !== \"edit\" && mode !== \"select\") {\n    return;\n  }\n\n  const target = event.target as HTMLElement | null;\n  if (!target) {\n    return;\n  }\n\n  // If hovering inside an active text editor, highlight only that element\n  // and suppress the component overlay box so parents don't get hover effects.\n  const textEl = target.closest<HTMLElement>(\"[data-upstart-editor-active]\");\n  if (textEl) {\n    applyTextHover(textEl);\n    if (overlay) overlay.style.display = \"none\";\n    currentTarget = null;\n    return;\n  }\n\n  applyEditableHover(target, event.metaKey || event.ctrlKey);\n\n  const component = target.closest<HTMLElement>(\"[data-upstart-component]\");\n  if (!component || component.dataset.upstartEditorActive) {\n    return;\n  }\n\n  if (!overlay) {\n    createOverlay();\n  }\n\n  currentTarget = component;\n  positionOverlay(component);\n}\n\nfunction handleMouseOut(event: MouseEvent): void {\n  const target = event.target as HTMLElement | null;\n  const relatedTarget = event.relatedTarget as HTMLElement | null;\n\n  if (!target) {\n    return;\n  }\n\n  const component = target.closest<HTMLElement>(\"[data-upstart-component]\");\n  if (!component) {\n    return;\n  }\n\n  if (relatedTarget && component.contains(relatedTarget)) {\n    return;\n  }\n\n  hideOverlays();\n}\n\nfunction handleKeyChange(event: KeyboardEvent): void {\n  const mode = getCurrentMode();\n  if ((mode !== \"edit\" && mode !== \"select\") || !hoveredEl) return;\n  if (event.key !== \"Meta\" && event.key !== \"Control\") return;\n  applyEditableHover(hoveredEl, event.type === \"keydown\" && (event.metaKey || event.ctrlKey));\n}\n\nfunction createOverlay(): void {\n  overlay = document.createElement(\"div\");\n  overlay.id = \"upstart-hover-overlay\";\n  overlay.style.cssText =\n    \"position: absolute; pointer-events: none; border: 2px solid rgba(114, 112, 198, 0.6); \" +\n    \"background: rgba(114, 112, 198, 0.05); border-radius: 4px; z-index: 9999; \" +\n    \"transition: all 0.1s ease; display: none;\";\n  document.body.appendChild(overlay);\n}\n\nfunction positionOverlay(element: HTMLElement): void {\n  if (!overlay) {\n    return;\n  }\n\n  const rect = element.getBoundingClientRect();\n  overlay.style.top = `${rect.top + window.scrollY}px`;\n  overlay.style.left = `${rect.left + window.scrollX}px`;\n  overlay.style.width = `${rect.width}px`;\n  overlay.style.height = `${rect.height}px`;\n  overlay.style.display = \"block\";\n}\n\nfunction scheduleOverlayUpdate(): void {\n  if (rafId !== null) {\n    return;\n  }\n\n  rafId = requestAnimationFrame(() => {\n    rafId = null;\n    if (currentTarget && overlay && overlay.style.display === \"block\") {\n      positionOverlay(currentTarget);\n    }\n  });\n}\n"],"mappings":"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"}

package/dist/vite-plugin-upstart-editor/runtime/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/vite-plugin-upstart-editor/runtime/index.ts"],"mappings":";;;;;;;;;;;;iBAiBgB,OAAA,CAAQ,IAAA,EAAM,UAAA;AAAA,iBAUd,gBAAA,CAAiB,QAAA;;AAVjC;;iBA6CgB,iBAAA,CAAA"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/vite-plugin-upstart-editor/runtime/index.ts"],"mappings":";;;;;;;;;;;;iBAiBgB,OAAA,CAAQ,IAAA,EAAM,UAAA;AAAA,iBAed,gBAAA,CAAiB,QAAA;;AAfjC;;iBAkDgB,iBAAA,CAAA"}

package/dist/vite-plugin-upstart-editor/runtime/index.js

@@ -1,4 +1,4 @@
-import { getCurrentMode, setCurrentMode } from "./state.js";
+import { clearSelection, getCurrentMode, getSelection, removeSelection, setCurrentMode } from "./state.js";
 import { sendToParent } from "./utils.js";
 import { initClickHandler } from "./click-handler.js";
 import { hideOverlays, initHoverOverlay } from "./hover-overlay.js";
@@ -14,8 +14,16 @@ let isInitialized = false;
 function setMode(mode) {
 	setCurrentMode(mode);
 	console.log(`[Upstart Editor] Setting mode to: ${mode}`);
-	if (mode === "edit") enableEditMode();
-	else disableEditMode();
+	if (mode === "edit") {
+		disableSelectMode();
+		enableEditMode();
+	} else if (mode === "select") {
+		disableEditMode();
+		enableSelectMode();
+	} else {
+		disableEditMode();
+		disableSelectMode();
+	}
 }
 function waitForHydration(callback) {
 	const STABILITY_MS = 200;
@@ -52,6 +60,7 @@ function initUpstartEditor() {
 		window.addEventListener("message", handleParentMessage);
 		const currentPath = () => location.pathname + location.search;
 		window.addEventListener("popstate", () => {
+			resetSelection();
 			sendToParent({
 				type: "editor-navigated",
 				path: currentPath()
@@ -60,6 +69,7 @@ function initUpstartEditor() {
 		const originalPushState = history.pushState.bind(history);
 		history.pushState = (...args) => {
 			originalPushState(...args);
+			resetSelection();
 			sendToParent({
 				type: "editor-navigated",
 				path: currentPath()
@@ -68,6 +78,7 @@ function initUpstartEditor() {
 		const originalReplaceState = history.replaceState.bind(history);
 		history.replaceState = (...args) => {
 			originalReplaceState(...args);
+			resetSelection();
 			sendToParent({
 				type: "editor-navigated",
 				path: currentPath()
@@ -140,6 +151,27 @@ function handleParentMessage(event) {
 		top: message.y,
 		behavior: "auto"
 	});
+	else if (message.type === "clear-selection") {
+		resetSelection();
+		sendToParent({
+			type: "selection-changed",
+			selection: getSelection()
+		});
+	} else if (message.type === "deselect") {
+		removeSelection(message.key)?.removeAttribute("data-upstart-selected");
+		sendToParent({
+			type: "selection-changed",
+			selection: getSelection()
+		});
+	}
+}
+/**
+* Drop the whole "select" mode selection: clear the in-memory set and remove the
+* visual marker from any element still carrying it.
+*/
+function resetSelection() {
+	clearSelection();
+	for (const el of document.querySelectorAll("[data-upstart-selected]")) el.removeAttribute("data-upstart-selected");
 }
 function enableEditMode() {
 	console.log("[Upstart Editor] Edit mode enabled");
@@ -154,6 +186,14 @@ function disableEditMode() {
 	hideOverlays();
 	hideArrayControls();
 }
+function enableSelectMode() {
+	console.log("[Upstart Editor] Select mode enabled");
+	document.documentElement.setAttribute("data-upstart-select-mode", "");
+}
+function disableSelectMode() {
+	document.documentElement.removeAttribute("data-upstart-select-mode");
+	hideOverlays();
+}
 //#endregion
 export { getCurrentMode, initClickHandler, initErrorHandler, initHoverOverlay, initTextEditor, initUpstartEditor, sendToParent, setMode, waitForHydration };
 

package/dist/vite-plugin-upstart-editor/runtime/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/vite-plugin-upstart-editor/runtime/index.ts"],"sourcesContent":["import { initClickHandler } from \"./click-handler.js\";\nimport { initHoverOverlay, hideOverlays } from \"./hover-overlay.js\";\nimport { initErrorHandler } from \"./error-handler.js\";\nimport { initTextEditor, activateAllEditors, destroyAllActiveEditors } from \"./text-editor.js\";\nimport { initArrayControls, refreshArrayControls, hideArrayControls } from \"./array-controls.js\";\nimport { initFormGuard } from \"./form-guard.js\";\nimport { sendToParent } from \"./utils.js\";\nimport { getCurrentMode, setCurrentMode } from \"./state.js\";\nimport type { EditorMode, UpstartParentMessage } from \"./types.js\";\n\nlet isInitialized = false;\n\nexport { getCurrentMode };\n\n/**\n * Set the current editor mode.\n */\nexport function setMode(mode: EditorMode): void {\n  setCurrentMode(mode);\n  console.log(`[Upstart Editor] Setting mode to: ${mode}`);\n  if (mode === \"edit\") {\n    enableEditMode();\n  } else {\n    disableEditMode();\n  }\n}\n\nexport function waitForHydration(callback: () => void): void {\n  // Remix/React 18 wraps hydrateRoot in startTransition, making hydration a\n  // concurrent (low-priority) operation that can span many frames after the\n  // load event. Instead of guessing a delay, we wait for the DOM to stabilise:\n  // once 200 ms pass without any childList mutations, hydration is done.\n  const STABILITY_MS = 200;\n\n  const onReady = () => {\n    let timer: number | null = null;\n\n    const settle = () => {\n      if (timer) clearTimeout(timer);\n      timer = window.setTimeout(() => {\n        observer.disconnect();\n        callback();\n      }, STABILITY_MS);\n    };\n\n    const observer = new MutationObserver(settle);\n    observer.observe(document.documentElement, { childList: true, subtree: true });\n\n    // Kick off the first timer (covers case where no mutations occur after load)\n    settle();\n  };\n\n  if (document.readyState === \"complete\") {\n    onReady();\n  } else {\n    window.addEventListener(\"load\", onReady, { once: true });\n  }\n}\n\n/**\n * Initialize the Upstart editor runtime.\n */\nexport function initUpstartEditor(): void {\n  if (isInitialized) {\n    console.log(\"[Upstart Editor] Editor is already initialized\");\n    return;\n  }\n\n  try {\n    console.log(\"[Upstart Editor] Initializing...\");\n\n    isInitialized = true;\n\n    window.addEventListener(\"message\", handleParentMessage);\n\n    // Current path (pathname + search), reported to the parent so it can reload\n    // the iframe on the page being viewed instead of always the home page.\n    const currentPath = () => location.pathname + location.search;\n\n    // Notify parent on SPA navigation so it can resend the current editMode\n    // and track the current page for the next reload.\n    window.addEventListener(\"popstate\", () => {\n      sendToParent({ type: \"editor-navigated\", path: currentPath() });\n    });\n    const originalPushState = history.pushState.bind(history);\n    history.pushState = (...args) => {\n      originalPushState(...args);\n      sendToParent({ type: \"editor-navigated\", path: currentPath() });\n    };\n    const originalReplaceState = history.replaceState.bind(history);\n    history.replaceState = (...args) => {\n      originalReplaceState(...args);\n      sendToParent({ type: \"editor-navigated\", path: currentPath() });\n    };\n\n    // i18next integration: if the app exposes it on window.__i18next (set before hydration),\n    // wire it up so template variables (e.g. {{year}}) render as non-editable atoms.\n    const i18next = (globalThis as any).__i18next;\n    const getRawI18nTemplate = i18next\n      ? (namespace: string, key: string) =>\n          i18next.getResource(i18next.language, namespace, key) as string | undefined\n      : undefined;\n\n    initTextEditor(getRawI18nTemplate ? { getRawI18nTemplate } : {});\n    initClickHandler();\n    initHoverOverlay();\n    initArrayControls();\n    initFormGuard();\n    initErrorHandler();\n\n    sendToParent({ type: \"editor-ready\", path: currentPath() });\n  } catch (error) {\n    console.error(\"[Upstart Editor] Initialization failed:\", error);\n    sendToParent({\n      type: \"editor-error\",\n      error: error instanceof Error ? error.message : \"Unknown error\",\n    });\n  }\n}\n\nconst ALLOWED_ORIGINS = [\"http://localhost:8080\", /upstart.gg$/];\n\nconst matchAllowedOrigins = (origin: string) => {\n  return ALLOWED_ORIGINS.some((allowedOrigin) => {\n    if (typeof allowedOrigin === \"string\") {\n      return origin === allowedOrigin;\n    } else if (allowedOrigin instanceof RegExp) {\n      return allowedOrigin.test(origin);\n    }\n    return false;\n  });\n};\n\nfunction handleParentMessage(event: MessageEvent): void {\n  const message = event.data as UpstartParentMessage | undefined;\n\n  console.log(\"[Upstart Editor] Received message from parent:\", { event, message });\n\n  if (!message || !matchAllowedOrigins(event.origin)) {\n    console.warn(\"[Upstart Editor] Ignoring message from unknown source:\", event.origin);\n    return;\n  }\n\n  if (message.type === \"set-mode\") {\n    console.log(\"Setting editor mode to:\", message.mode);\n    setMode(message.mode);\n  } else if (message.type === \"preview-classname\") {\n    const el = document.querySelector<HTMLElement>(`[data-upstart-classname-id=\"${message.classNameId}\"]`);\n    if (el) {\n      el.className = message.className;\n    }\n    const STYLE_ID = \"upstart-preview-style\";\n    let styleEl = document.getElementById(STYLE_ID) as HTMLStyleElement | null;\n    if (message.previewCSS) {\n      if (!styleEl) {\n        styleEl = document.createElement(\"style\");\n        styleEl.id = STYLE_ID;\n        document.head.appendChild(styleEl);\n      }\n      styleEl.textContent = message.previewCSS;\n    } else if (styleEl) {\n      styleEl.textContent = \"\";\n    }\n  } else if (message.type === \"preview-image\") {\n    const el = document.querySelector<HTMLImageElement>(`[data-upstart-image-id=\"${message.imageId}\"]`);\n    if (el) {\n      el.src = message.src;\n    }\n  } else if (message.type === \"request-scroll-position\") {\n    sendToParent({ type: \"scroll-position\", x: window.scrollX, y: window.scrollY });\n  } else if (message.type === \"restore-scroll-position\") {\n    window.scrollTo({ left: message.x, top: message.y, behavior: \"auto\" });\n  }\n}\n\nfunction enableEditMode(): void {\n  console.log(\"[Upstart Editor] Edit mode enabled\");\n  document.documentElement.setAttribute(\"data-upstart-edit-mode\", \"\");\n  activateAllEditors();\n  refreshArrayControls();\n}\n\nfunction disableEditMode(): void {\n  console.log(\"[Upstart Editor] Preview mode enabled\");\n  document.documentElement.removeAttribute(\"data-upstart-edit-mode\");\n  destroyAllActiveEditors();\n  hideOverlays();\n  hideArrayControls();\n}\n\nexport { initTextEditor } from \"./text-editor.js\";\nexport { initClickHandler } from \"./click-handler.js\";\nexport { initErrorHandler } from \"./error-handler.js\";\nexport { initHoverOverlay } from \"./hover-overlay.js\";\nexport { sendToParent } from \"./utils.js\";\nexport type { EditorMessage, UpstartEditorMessage } from \"./types.js\";\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/vite-plugin-upstart-editor/runtime/index.ts"],"sourcesContent":["import { initClickHandler } from \"./click-handler.js\";\nimport { initHoverOverlay, hideOverlays } from \"./hover-overlay.js\";\nimport { initErrorHandler } from \"./error-handler.js\";\nimport { initTextEditor, activateAllEditors, destroyAllActiveEditors } from \"./text-editor.js\";\nimport { initArrayControls, refreshArrayControls, hideArrayControls } from \"./array-controls.js\";\nimport { initFormGuard } from \"./form-guard.js\";\nimport { sendToParent } from \"./utils.js\";\nimport { getCurrentMode, setCurrentMode, clearSelection, removeSelection, getSelection } from \"./state.js\";\nimport type { EditorMode, UpstartParentMessage } from \"./types.js\";\n\nlet isInitialized = false;\n\nexport { getCurrentMode };\n\n/**\n * Set the current editor mode.\n */\nexport function setMode(mode: EditorMode): void {\n  setCurrentMode(mode);\n  console.log(`[Upstart Editor] Setting mode to: ${mode}`);\n  if (mode === \"edit\") {\n    disableSelectMode();\n    enableEditMode();\n  } else if (mode === \"select\") {\n    disableEditMode();\n    enableSelectMode();\n  } else {\n    disableEditMode();\n    disableSelectMode();\n  }\n}\n\nexport function waitForHydration(callback: () => void): void {\n  // Remix/React 18 wraps hydrateRoot in startTransition, making hydration a\n  // concurrent (low-priority) operation that can span many frames after the\n  // load event. Instead of guessing a delay, we wait for the DOM to stabilise:\n  // once 200 ms pass without any childList mutations, hydration is done.\n  const STABILITY_MS = 200;\n\n  const onReady = () => {\n    let timer: number | null = null;\n\n    const settle = () => {\n      if (timer) clearTimeout(timer);\n      timer = window.setTimeout(() => {\n        observer.disconnect();\n        callback();\n      }, STABILITY_MS);\n    };\n\n    const observer = new MutationObserver(settle);\n    observer.observe(document.documentElement, { childList: true, subtree: true });\n\n    // Kick off the first timer (covers case where no mutations occur after load)\n    settle();\n  };\n\n  if (document.readyState === \"complete\") {\n    onReady();\n  } else {\n    window.addEventListener(\"load\", onReady, { once: true });\n  }\n}\n\n/**\n * Initialize the Upstart editor runtime.\n */\nexport function initUpstartEditor(): void {\n  if (isInitialized) {\n    console.log(\"[Upstart Editor] Editor is already initialized\");\n    return;\n  }\n\n  try {\n    console.log(\"[Upstart Editor] Initializing...\");\n\n    isInitialized = true;\n\n    window.addEventListener(\"message\", handleParentMessage);\n\n    // Current path (pathname + search), reported to the parent so it can reload\n    // the iframe on the page being viewed instead of always the home page.\n    const currentPath = () => location.pathname + location.search;\n\n    // Notify parent on SPA navigation so it can resend the current editMode\n    // and track the current page for the next reload.\n    window.addEventListener(\"popstate\", () => {\n      resetSelection();\n      sendToParent({ type: \"editor-navigated\", path: currentPath() });\n    });\n    const originalPushState = history.pushState.bind(history);\n    history.pushState = (...args) => {\n      originalPushState(...args);\n      resetSelection();\n      sendToParent({ type: \"editor-navigated\", path: currentPath() });\n    };\n    const originalReplaceState = history.replaceState.bind(history);\n    history.replaceState = (...args) => {\n      originalReplaceState(...args);\n      resetSelection();\n      sendToParent({ type: \"editor-navigated\", path: currentPath() });\n    };\n\n    // i18next integration: if the app exposes it on window.__i18next (set before hydration),\n    // wire it up so template variables (e.g. {{year}}) render as non-editable atoms.\n    const i18next = (globalThis as any).__i18next;\n    const getRawI18nTemplate = i18next\n      ? (namespace: string, key: string) =>\n          i18next.getResource(i18next.language, namespace, key) as string | undefined\n      : undefined;\n\n    initTextEditor(getRawI18nTemplate ? { getRawI18nTemplate } : {});\n    initClickHandler();\n    initHoverOverlay();\n    initArrayControls();\n    initFormGuard();\n    initErrorHandler();\n\n    sendToParent({ type: \"editor-ready\", path: currentPath() });\n  } catch (error) {\n    console.error(\"[Upstart Editor] Initialization failed:\", error);\n    sendToParent({\n      type: \"editor-error\",\n      error: error instanceof Error ? error.message : \"Unknown error\",\n    });\n  }\n}\n\nconst ALLOWED_ORIGINS = [\"http://localhost:8080\", /upstart.gg$/];\n\nconst matchAllowedOrigins = (origin: string) => {\n  return ALLOWED_ORIGINS.some((allowedOrigin) => {\n    if (typeof allowedOrigin === \"string\") {\n      return origin === allowedOrigin;\n    } else if (allowedOrigin instanceof RegExp) {\n      return allowedOrigin.test(origin);\n    }\n    return false;\n  });\n};\n\nfunction handleParentMessage(event: MessageEvent): void {\n  const message = event.data as UpstartParentMessage | undefined;\n\n  console.log(\"[Upstart Editor] Received message from parent:\", { event, message });\n\n  if (!message || !matchAllowedOrigins(event.origin)) {\n    console.warn(\"[Upstart Editor] Ignoring message from unknown source:\", event.origin);\n    return;\n  }\n\n  if (message.type === \"set-mode\") {\n    console.log(\"Setting editor mode to:\", message.mode);\n    setMode(message.mode);\n  } else if (message.type === \"preview-classname\") {\n    const el = document.querySelector<HTMLElement>(`[data-upstart-classname-id=\"${message.classNameId}\"]`);\n    if (el) {\n      el.className = message.className;\n    }\n    const STYLE_ID = \"upstart-preview-style\";\n    let styleEl = document.getElementById(STYLE_ID) as HTMLStyleElement | null;\n    if (message.previewCSS) {\n      if (!styleEl) {\n        styleEl = document.createElement(\"style\");\n        styleEl.id = STYLE_ID;\n        document.head.appendChild(styleEl);\n      }\n      styleEl.textContent = message.previewCSS;\n    } else if (styleEl) {\n      styleEl.textContent = \"\";\n    }\n  } else if (message.type === \"preview-image\") {\n    const el = document.querySelector<HTMLImageElement>(`[data-upstart-image-id=\"${message.imageId}\"]`);\n    if (el) {\n      el.src = message.src;\n    }\n  } else if (message.type === \"request-scroll-position\") {\n    sendToParent({ type: \"scroll-position\", x: window.scrollX, y: window.scrollY });\n  } else if (message.type === \"restore-scroll-position\") {\n    window.scrollTo({ left: message.x, top: message.y, behavior: \"auto\" });\n  } else if (message.type === \"clear-selection\") {\n    resetSelection();\n    // Echo the now-empty selection so the parent store (chips / counter) updates.\n    sendToParent({ type: \"selection-changed\", selection: getSelection() });\n  } else if (message.type === \"deselect\") {\n    const el = removeSelection(message.key);\n    el?.removeAttribute(\"data-upstart-selected\");\n    sendToParent({ type: \"selection-changed\", selection: getSelection() });\n  }\n}\n\n/**\n * Drop the whole \"select\" mode selection: clear the in-memory set and remove the\n * visual marker from any element still carrying it.\n */\nfunction resetSelection(): void {\n  clearSelection();\n  for (const el of document.querySelectorAll(\"[data-upstart-selected]\")) {\n    el.removeAttribute(\"data-upstart-selected\");\n  }\n}\n\nfunction enableEditMode(): void {\n  console.log(\"[Upstart Editor] Edit mode enabled\");\n  document.documentElement.setAttribute(\"data-upstart-edit-mode\", \"\");\n  activateAllEditors();\n  refreshArrayControls();\n}\n\nfunction disableEditMode(): void {\n  console.log(\"[Upstart Editor] Preview mode enabled\");\n  document.documentElement.removeAttribute(\"data-upstart-edit-mode\");\n  destroyAllActiveEditors();\n  hideOverlays();\n  hideArrayControls();\n}\n\nfunction enableSelectMode(): void {\n  console.log(\"[Upstart Editor] Select mode enabled\");\n  // Selectable hover (hover-overlay) and the persistent selected outline are\n  // gated on this attribute. The selection Map / data-upstart-selected attrs are\n  // kept across mode switches, so toggling back to select restores the outlines.\n  document.documentElement.setAttribute(\"data-upstart-select-mode\", \"\");\n}\n\nfunction disableSelectMode(): void {\n  document.documentElement.removeAttribute(\"data-upstart-select-mode\");\n  hideOverlays();\n}\n\nexport { initTextEditor } from \"./text-editor.js\";\nexport { initClickHandler } from \"./click-handler.js\";\nexport { initErrorHandler } from \"./error-handler.js\";\nexport { initHoverOverlay } from \"./hover-overlay.js\";\nexport { sendToParent } from \"./utils.js\";\nexport type { EditorMessage, UpstartEditorMessage } from \"./types.js\";\n"],"mappings":"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"}

package/dist/vite-plugin-upstart-editor/runtime/state.js

@@ -12,7 +12,48 @@ function getCurrentMode() {
 function setCurrentMode(mode) {
 	currentMode = mode;
 }
+/**
+* Selection set for "select" mode. Keyed by SelectionRef.key (stable across
+* the session for a given element), insertion order preserved for the chips UI.
+* `selectionEls` holds the matching DOM nodes (not serializable, so kept apart
+* from the ref data sent to the parent) to clear their visual marker on removal.
+*/
+const selection = /* @__PURE__ */ new Map();
+const selectionEls = /* @__PURE__ */ new Map();
+/** Current selection as an array, in insertion order. */
+function getSelection() {
+	return Array.from(selection.values());
+}
+/**
+* Toggle an element in/out of the selection. Returns true if the element is now
+* selected, false if it was removed.
+*/
+function toggleSelection(ref, el) {
+	if (selection.has(ref.key)) {
+		selection.delete(ref.key);
+		selectionEls.delete(ref.key);
+		return false;
+	}
+	selection.set(ref.key, ref);
+	selectionEls.set(ref.key, el);
+	return true;
+}
+/**
+* Remove a single element from the selection by key. Returns the matching DOM
+* node (if known) so the caller can clear its visual marker.
+*/
+function removeSelection(key) {
+	selection.delete(key);
+	const el = selectionEls.get(key);
+	selectionEls.delete(key);
+	return el;
+}
+/** Clear the whole selection. */
+function clearSelection() {
+	selection.clear();
+	selectionEls.clear();
+}
 //#endregion
-export { getCurrentMode, setCurrentMode };
+export { clearSelection, getCurrentMode, getSelection, removeSelection, setCurrentMode, toggleSelection };
 
 //# sourceMappingURL=state.js.map

package/dist/vite-plugin-upstart-editor/runtime/state.js.map

@@ -1 +1 @@
-{"version":3,"file":"state.js","names":[],"sources":["../../../src/vite-plugin-upstart-editor/runtime/state.ts"],"sourcesContent":["import type { EditorMode } from \"./types.js\";\n\nlet currentMode: EditorMode = \"preview\";\n\n/**\n * Get the current editor mode.\n */\nexport function getCurrentMode(): EditorMode {\n  return currentMode;\n}\n\n/**\n * Set the current editor mode (internal use only).\n */\nexport function setCurrentMode(mode: EditorMode): void {\n  currentMode = mode;\n}\n"],"mappings":";AAEA,IAAI,cAA0B;;;;AAK9B,SAAgB,iBAA6B;CAC3C,OAAO;;;;;AAMT,SAAgB,eAAe,MAAwB;CACrD,cAAc"}
+{"version":3,"file":"state.js","names":[],"sources":["../../../src/vite-plugin-upstart-editor/runtime/state.ts"],"sourcesContent":["import type { EditorMode, SelectionRef } from \"./types.js\";\n\nlet currentMode: EditorMode = \"preview\";\n\n/**\n * Get the current editor mode.\n */\nexport function getCurrentMode(): EditorMode {\n  return currentMode;\n}\n\n/**\n * Set the current editor mode (internal use only).\n */\nexport function setCurrentMode(mode: EditorMode): void {\n  currentMode = mode;\n}\n\n/**\n * Selection set for \"select\" mode. Keyed by SelectionRef.key (stable across\n * the session for a given element), insertion order preserved for the chips UI.\n * `selectionEls` holds the matching DOM nodes (not serializable, so kept apart\n * from the ref data sent to the parent) to clear their visual marker on removal.\n */\nconst selection = new Map<string, SelectionRef>();\nconst selectionEls = new Map<string, HTMLElement>();\n\n/** Current selection as an array, in insertion order. */\nexport function getSelection(): SelectionRef[] {\n  return Array.from(selection.values());\n}\n\n/**\n * Toggle an element in/out of the selection. Returns true if the element is now\n * selected, false if it was removed.\n */\nexport function toggleSelection(ref: SelectionRef, el: HTMLElement): boolean {\n  if (selection.has(ref.key)) {\n    selection.delete(ref.key);\n    selectionEls.delete(ref.key);\n    return false;\n  }\n  selection.set(ref.key, ref);\n  selectionEls.set(ref.key, el);\n  return true;\n}\n\n/**\n * Remove a single element from the selection by key. Returns the matching DOM\n * node (if known) so the caller can clear its visual marker.\n */\nexport function removeSelection(key: string): HTMLElement | undefined {\n  selection.delete(key);\n  const el = selectionEls.get(key);\n  selectionEls.delete(key);\n  return el;\n}\n\n/** Clear the whole selection. */\nexport function clearSelection(): void {\n  selection.clear();\n  selectionEls.clear();\n}\n"],"mappings":";AAEA,IAAI,cAA0B;;;;AAK9B,SAAgB,iBAA6B;CAC3C,OAAO;;;;;AAMT,SAAgB,eAAe,MAAwB;CACrD,cAAc;;;;;;;;AAShB,MAAM,4BAAY,IAAI,KAA2B;AACjD,MAAM,+BAAe,IAAI,KAA0B;;AAGnD,SAAgB,eAA+B;CAC7C,OAAO,MAAM,KAAK,UAAU,QAAQ,CAAC;;;;;;AAOvC,SAAgB,gBAAgB,KAAmB,IAA0B;CAC3E,IAAI,UAAU,IAAI,IAAI,IAAI,EAAE;EAC1B,UAAU,OAAO,IAAI,IAAI;EACzB,aAAa,OAAO,IAAI,IAAI;EAC5B,OAAO;;CAET,UAAU,IAAI,IAAI,KAAK,IAAI;CAC3B,aAAa,IAAI,IAAI,KAAK,GAAG;CAC7B,OAAO;;;;;;AAOT,SAAgB,gBAAgB,KAAsC;CACpE,UAAU,OAAO,IAAI;CACrB,MAAM,KAAK,aAAa,IAAI,IAAI;CAChC,aAAa,OAAO,IAAI;CACxB,OAAO;;;AAIT,SAAgB,iBAAuB;CACrC,UAAU,OAAO;CACjB,aAAa,OAAO"}

package/dist/vite-plugin-upstart-editor/runtime/types.d.ts

@@ -4,8 +4,30 @@ import { Editor } from "@tiptap/core";
 //#region src/vite-plugin-upstart-editor/runtime/types.d.ts
 /**
  * Editor mode
+ * - preview: navigate the site, no editing
+ * - edit: click an element to edit it (inspector / inline text)
+ * - select: pick multiple elements to attach to the next chat message
  */
-type EditorMode = "preview" | "edit";
+type EditorMode = "preview" | "edit" | "select";
+/**
+ * A reference to an element picked in "select" mode. Built from the data-upstart-*
+ * attributes injected by vite-plugin-upstart-attrs. `key` (e.g. `filePath:hash`) is
+ * the stable identity used to toggle the element in/out of the selection.
+ */
+interface SelectionRef {
+  key: string;
+  hash: string;
+  filePath: string;
+  componentName?: string;
+  i18nKeys?: string[];
+  text?: string;
+  /**
+   * True when the element's visible content is derived from datasource (database) data
+   * (element carries / is inside `data-upstart-data-bound`). Its CONTENT is not editable
+   * from the editor — only its presentation is.
+   */
+  dataBound?: boolean;
+}
 /**
  * Text editor mode: determines schema constraints and bubble menu options.
  * - block-rich: inline TipTap rich text (block-level elements: p, div, article…)
@@ -63,6 +85,9 @@ type EditorMessage = {
 } | {
   type: "editor-error";
   error: string;
+} | {
+  type: "selection-changed";
+  selection: SelectionRef[];
 } | {
   type: "element-clicked";
   hash: string;
@@ -98,6 +123,11 @@ type ParentMessage = {
   type: "restore-scroll-position";
   x: number;
   y: number;
+} | {
+  type: "clear-selection";
+} | {
+  type: "deselect";
+  key: string;
 };
 /**
  * Message wrapper sent via postMessage from iframe.
@@ -173,5 +203,5 @@ interface UpstartEditorPluginOptions {
   autoInject?: boolean;
 }
 //#endregion
-export { EditableImageRef, EditorInstance, EditorMessage, EditorMode, ElementBounds, ParentMessage, TextEditorMode, UpstartEditorMessage, UpstartEditorOptions, UpstartEditorPluginOptions, UpstartParentMessage };
+export { EditableImageRef, EditorInstance, EditorMessage, EditorMode, ElementBounds, ParentMessage, SelectionRef, TextEditorMode, UpstartEditorMessage, UpstartEditorOptions, UpstartEditorPluginOptions, UpstartParentMessage };
 //# sourceMappingURL=types.d.ts.map

package/dist/vite-plugin-upstart-editor/runtime/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","names":[],"sources":["../../../src/vite-plugin-upstart-editor/runtime/types.ts"],"mappings":";;;;;;AAYA;KAAY,UAAA;;;;AAUZ;;;;;KAAY,cAAA;;;;UAKK,aAAA;EACf,GAAA;EACA,IAAA;EACA,KAAA;EACA,MAAA;EACA,KAAA;EACA,MAAA;AAAA;AAMF;;;AAAA,UAAiB,cAAA;EACf,MAAA,EAAQ,MAAA;EACR,OAAA,EAAS,WAAA;EACT,IAAA;EACA,IAAA,EAAM,cAAA;AAAA;;;;;UAOS,gBAAA;EACf,EAAA;EACA,GAAA;EACA,GAAA;AAAA;;;;KAMU,aAAA;EAEN,IAAA;EACA,OAAA,EACI,eAAA,GACA,qBAAA,GACA,mBAAA,GACA,sBAAA,GACA,eAAA;AAAA;EAEJ,IAAA;EAAsB,IAAA;AAAA;EACtB,IAAA;EAA0B,IAAA;AAAA;EAC1B,IAAA;EAAyB,CAAA;EAAW,CAAA;AAAA;EACpC,IAAA;EAAsB,KAAA;AAAA;EAEtB,IAAA;EACA,IAAA;EACA,aAAA;EACA,QAAA;EACA,gBAAA;EACA,WAAA;EACA,YAAA;EACA,QAAA;EACA,WAAA,GAAc,MAAA;EACd,MAAA,EAAQ,aAAA;EACR,aAAA,WAd0B;EAgB1B,MAAA,GAAS,gBAAA;AAAA;;;;KAMH,aAAA;EACN,IAAA;EAAkB,IAAA,EAAM,UAAA;AAAA;EACxB,IAAA;EAA2B,WAAA;EAAqB,SAAA;EAAmB,UAAA;AAAA;EACnE,IAAA;EAAuB,OAAA;EAAiB,GAAA;AAAA;EACxC,IAAA;AAAA;EACA,IAAA;EAAiC,CAAA;EAAW,CAAA;AAAA;;;;UAKjC,oBAAA;EACf,MAAA;EACA,IAAA,EAAM,aAAA;EAAA,CACL,GAAA;AAAA;;;;UAMc,oBAAA;EACf,MAAA;EACA,IAAA,EAAM,aAAA;EAAA,CACL,GAAA;AAAA;;;AAZH;UAkBiB,oBAAA;;;;;EAKf,gBAAA;EApBC;;;AAMH;;EAqBE,sBAAA;EAnBmB;;;;EAyBnB,iBAAA;EAxBY;;AAMd;;EAwBE,UAAA;EAxBmC;;;;EA8BnC,WAAA;EAAA;;;;EAMA,aAAA;EAOoD;;AAMtD;;;EANE,kBAAA,IAAsB,SAAA,UAAmB,GAAA;AAAA;;;;UAM1B,0BAAA;;;;;EAKf,OAAA;;;;;EAMA,UAAA;AAAA"}
+{"version":3,"file":"types.d.ts","names":[],"sources":["../../../src/vite-plugin-upstart-editor/runtime/types.ts"],"mappings":";;;;;;AAeA;;;;KAAY,UAAA;AAOZ;;;;;AAAA,UAAiB,YAAA;EACf,GAAA;EACA,IAAA;EACA,QAAA;EACA,aAAA;EACA,QAAA;EACA,IAAA;EAMS;AAWX;;;;EAXE,SAAA;AAAA;;;;;;;;;KAWU,cAAA;;;AAiBZ;UAZiB,aAAA;EACf,GAAA;EACA,IAAA;EACA,KAAA;EACA,MAAA;EACA,KAAA;EACA,MAAA;AAAA;;;;UAMe,cAAA;EACf,MAAA,EAAQ,MAAA;EACR,OAAA,EAAS,WAAA;EACT,IAAA;EACA,IAAA,EAAM,cAAA;AAAA;;;;;UAOS,gBAAA;EACf,EAAA;EACA,GAAA;EACA,GAAA;AAAA;;;;KAMU,aAAA;EAEN,IAAA;EACA,OAAA,EACI,eAAA,GACA,qBAAA,GACA,mBAAA,GACA,sBAAA,GACA,eAAA;AAAA;EAEJ,IAAA;EAAsB,IAAA;AAAA;EACtB,IAAA;EAA0B,IAAA;AAAA;EAC1B,IAAA;EAAyB,CAAA;EAAW,CAAA;AAAA;EACpC,IAAA;EAAsB,KAAA;AAAA;EACtB,IAAA;EAA2B,SAAA,EAAW,YAAA;AAAA;EAEtC,IAAA;EACA,IAAA;EACA,aAAA;EACA,QAAA;EACA,gBAAA;EACA,WAAA;EACA,YAAA;EACA,QAAA;EACA,WAAA,GAAc,MAAA;EACd,MAAA,EAAQ,aAAA;EACR,aAAA,WARA;EAUA,MAAA,GAAS,gBAAA;AAAA;;;;KAMH,aAAA;EACN,IAAA;EAAkB,IAAA,EAAM,UAAA;AAAA;EACxB,IAAA;EAA2B,WAAA;EAAqB,SAAA;EAAmB,UAAA;AAAA;EACnE,IAAA;EAAuB,OAAA;EAAiB,GAAA;AAAA;EACxC,IAAA;AAAA;EACA,IAAA;EAAiC,CAAA;EAAW,CAAA;AAAA;EAC5C,IAAA;AAAA;EACA,IAAA;EAAkB,GAAA;AAAA;;;;UAKP,oBAAA;EACf,MAAA;EACA,IAAA,EAAM,aAAA;EAAA,CACL,GAAA;AAAA;AAHH;;;AAAA,UASiB,oBAAA;EACf,MAAA;EACA,IAAA,EAAM,aAAA;EAAA,CACL,GAAA;AAAA;;;AAHH;UASiB,oBAAA;;;;;EAKf,gBAAA;EAXC;;;AAMH;;EAYE,sBAAA;EAZmC;;;;EAkBnC,iBAAA;EAYA;;;;EANA,UAAA;EAmBoD;;AAMtD;;EAnBE,WAAA;EAwBA;;;;EAlBA,aAAA;;;;;;EAOA,kBAAA,IAAsB,SAAA,UAAmB,GAAA;AAAA;;;;UAM1B,0BAAA;;;;;EAKf,OAAA;;;;;EAMA,UAAA;AAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@upstart.gg/vite-plugins",
-  "version": "0.1.42",
+  "version": "0.1.44",
   "type": "module",
   "files": [
     "dist",
@@ -23,7 +23,7 @@
     "oxc-parser": "0.101.0",
     "unplugin": "^2.3.11",
     "zimmerframe": "^1.1.4",
-    "@upstart.gg/sdk": "^0.1.42"
+    "@upstart.gg/sdk": "^0.1.44"
   },
   "devDependencies": {
     "@rolldown/binding-linux-arm64-gnu": "1.0.0",
@@ -113,7 +113,7 @@
   },
   "peerDependencies": {
     "zod": "4.3.6",
-    "@upstart.gg/sdk": "^0.1.42"
+    "@upstart.gg/sdk": "^0.1.44"
   },
   "author": "Upstart",
   "publishConfig": {

package/src/vite-plugin-upstart-editor/runtime/click-handler.ts

@@ -1,5 +1,6 @@
-import { getCurrentMode } from "./state.js";
+import { getCurrentMode, getSelection, toggleSelection } from "./state.js";
 import { sendToParent } from "./utils.js";
+import type { SelectionRef } from "./types.js";
 
 let isInitialized = false;
 
@@ -86,8 +87,99 @@ export function cleanupClickHandler(): void {
   isInitialized = false;
 }
 
+/**
+ * Build a SelectionRef from a clicked element, walking up to the nearest
+ * component (data-upstart-file) for the source file / component name and
+ * collecting i18n keys from the element's subtree.
+ */
+function buildSelectionRef(element: HTMLElement): SelectionRef | null {
+  const hash = element.dataset.upstartHash ?? "";
+
+  const fileEl = element.closest<HTMLElement>("[data-upstart-file]");
+  const filePath = fileEl?.dataset.upstartFile ?? element.dataset.upstartFile ?? "";
+  const componentName = fileEl?.dataset.upstartComponent ?? element.dataset.upstartComponent;
+
+  // A stable identity for toggling. Prefer filePath+hash; fall back so distinct
+  // elements without a hash don't collapse onto the same key.
+  const key = `${filePath}:${hash}` !== ":" ? `${filePath}:${hash}` : "";
+  if (!key) {
+    return null;
+  }
+
+  const i18nKeys = new Set<string>();
+  const collectKeys = (el: HTMLElement) => {
+    const raw = el.dataset.upstartI18n;
+    if (raw) {
+      for (const k of raw.split(/[\s,]+/).filter(Boolean)) i18nKeys.add(k);
+    }
+  };
+  collectKeys(element);
+  for (const node of element.querySelectorAll<HTMLElement>("[data-upstart-i18n]")) {
+    collectKeys(node);
+  }
+
+  const text = (element.innerText ?? "").trim().slice(0, 200) || undefined;
+
+  // Whether THIS element's content is derived from database data (element-level marker).
+  // This is what gates content edits — its content can't be edited from the editor, only
+  // its presentation. i18n/translated content is editable (it lives in translation files),
+  // so i18n keys on the element take precedence and suppress the data-bound flag even if the
+  // element was wrongly marked.
+  const dataBoundEl = element.closest<HTMLElement>("[data-upstart-data-bound]");
+  const dataBound = !!dataBoundEl && dataBoundEl.dataset.upstartDataBound !== "false" && i18nKeys.size === 0;
+
+  return {
+    key,
+    hash,
+    filePath,
+    componentName,
+    i18nKeys: i18nKeys.size > 0 ? Array.from(i18nKeys) : undefined,
+    text,
+    dataBound: dataBound || undefined,
+  };
+}
+
+/**
+ * "Select" mode click: toggle the clicked component in/out of the selection,
+ * mark it visually with data-upstart-selected, and report the new selection
+ * to the parent. Never edits or navigates.
+ */
+function handleSelectClick(event: MouseEvent, target: HTMLElement): void {
+  const rawElement = target.closest<HTMLElement>("[data-upstart-hash]");
+  if (!rawElement) {
+    console.info("[Upstart Editor] Select click ignored: no data-upstart-hash ancestor");
+    return;
+  }
+
+  // Bubble up to a rich-panel editable ancestor so selecting an inline child
+  // (e.g. <strong>) selects the whole editable region — mirrors edit-mode resolution.
+  const richPanelAncestor = rawElement.parentElement?.closest<HTMLElement>(
+    '[data-upstart-editable-text-mode="rich-panel"]',
+  );
+  const element = richPanelAncestor ?? rawElement;
+
+  event.preventDefault();
+  event.stopPropagation();
+
+  const ref = buildSelectionRef(element);
+  if (!ref) {
+    return;
+  }
+
+  const nowSelected = toggleSelection(ref, element);
+  if (nowSelected) {
+    element.setAttribute("data-upstart-selected", "");
+  } else {
+    element.removeAttribute("data-upstart-selected");
+  }
+
+  sendToParent({ type: "selection-changed", selection: getSelection() });
+  console.log("[Upstart Editor] Selection toggled:", ref.key, nowSelected);
+}
+
 function handleClick(event: MouseEvent): void {
-  if (getCurrentMode() !== "edit") {
+  const mode = getCurrentMode();
+  if (mode !== "edit" && mode !== "select") {
     return;
   }
 
@@ -99,6 +191,11 @@ function handleClick(event: MouseEvent): void {
     return;
   }
 
+  if (mode === "select") {
+    handleSelectClick(event, target);
+    return;
+  }
+
   // Editor-only chrome (the array ×/+/✓ controls) and locally-staged draft list
   // items handle their own clicks and must never be treated as element selection.
   if (target.closest("#upstart-array-controls, [data-upstart-draft-item]")) {

package/src/vite-plugin-upstart-editor/runtime/hover-overlay.ts

@@ -30,7 +30,8 @@ export function initHoverOverlay(): void {
     ":root[data-upstart-edit-mode] [data-upstart-editor-active] {",
     "  transition: outline 150ms, outline-offset 150ms;",
     "}",
-    ":root[data-upstart-edit-mode] [data-upstart-hovered] {",
+    ":root[data-upstart-edit-mode] [data-upstart-hovered],",
+    ":root[data-upstart-select-mode] [data-upstart-hovered] {",
     "  outline: 2px solid rgba(114, 112, 198, 0.6);",
     "  outline-offset: 4px;",
     "  cursor: pointer;",
@@ -40,10 +41,19 @@ export function initHoverOverlay(): void {
     "  outline-offset: 4px;",
     "  cursor: text;",
     "}",
-    ":root[data-upstart-edit-mode] [data-upstart-hovered-ancestor] {",
+    ":root[data-upstart-edit-mode] [data-upstart-hovered-ancestor],",
+    ":root[data-upstart-select-mode] [data-upstart-hovered-ancestor] {",
     "  outline: 1px dashed rgba(114, 112, 198, 0.6);",
     "  cursor: pointer;",
     "}",
+    // Persistent outline for elements picked in select mode. Solid + filled so
+    // they stand out from the dashed/translucent hover state. Only visible while
+    // in select mode (the selection set itself is kept across mode switches).
+    ":root[data-upstart-select-mode] [data-upstart-selected] {",
+    "  outline: 2px dashed rgba(114, 112, 198, 0.95) !important;",
+    "  outline-offset: 2px;",
+    "  background-color: rgba(114, 112, 198, 0.08);",
+    "}",
   ].join("\n");
   document.head.appendChild(style);
 
@@ -117,7 +127,8 @@ function applyEditableHover(target: HTMLElement, withAncestors: boolean): void {
 }
 
 function handleMouseOver(event: MouseEvent): void {
-  if (getCurrentMode() !== "edit") {
+  const mode = getCurrentMode();
+  if (mode !== "edit" && mode !== "select") {
     return;
   }
 
@@ -172,7 +183,8 @@ function handleMouseOut(event: MouseEvent): void {
 }
 
 function handleKeyChange(event: KeyboardEvent): void {
-  if (getCurrentMode() !== "edit" || !hoveredEl) return;
+  const mode = getCurrentMode();
+  if ((mode !== "edit" && mode !== "select") || !hoveredEl) return;
   if (event.key !== "Meta" && event.key !== "Control") return;
   applyEditableHover(hoveredEl, event.type === "keydown" && (event.metaKey || event.ctrlKey));
 }

package/src/vite-plugin-upstart-editor/runtime/index.ts

@@ -5,7 +5,7 @@ import { initTextEditor, activateAllEditors, destroyAllActiveEditors } from "./t
 import { initArrayControls, refreshArrayControls, hideArrayControls } from "./array-controls.js";
 import { initFormGuard } from "./form-guard.js";
 import { sendToParent } from "./utils.js";
-import { getCurrentMode, setCurrentMode } from "./state.js";
+import { getCurrentMode, setCurrentMode, clearSelection, removeSelection, getSelection } from "./state.js";
 import type { EditorMode, UpstartParentMessage } from "./types.js";
 
 let isInitialized = false;
@@ -19,9 +19,14 @@ export function setMode(mode: EditorMode): void {
   setCurrentMode(mode);
   console.log(`[Upstart Editor] Setting mode to: ${mode}`);
   if (mode === "edit") {
+    disableSelectMode();
     enableEditMode();
+  } else if (mode === "select") {
+    disableEditMode();
+    enableSelectMode();
   } else {
     disableEditMode();
+    disableSelectMode();
   }
 }
 
@@ -80,16 +85,19 @@ export function initUpstartEditor(): void {
     // Notify parent on SPA navigation so it can resend the current editMode
     // and track the current page for the next reload.
     window.addEventListener("popstate", () => {
+      resetSelection();
       sendToParent({ type: "editor-navigated", path: currentPath() });
     });
     const originalPushState = history.pushState.bind(history);
     history.pushState = (...args) => {
       originalPushState(...args);
+      resetSelection();
       sendToParent({ type: "editor-navigated", path: currentPath() });
     };
     const originalReplaceState = history.replaceState.bind(history);
     history.replaceState = (...args) => {
       originalReplaceState(...args);
+      resetSelection();
       sendToParent({ type: "editor-navigated", path: currentPath() });
     };
 
@@ -170,6 +178,25 @@ function handleParentMessage(event: MessageEvent): void {
     sendToParent({ type: "scroll-position", x: window.scrollX, y: window.scrollY });
   } else if (message.type === "restore-scroll-position") {
     window.scrollTo({ left: message.x, top: message.y, behavior: "auto" });
+  } else if (message.type === "clear-selection") {
+    resetSelection();
+    // Echo the now-empty selection so the parent store (chips / counter) updates.
+    sendToParent({ type: "selection-changed", selection: getSelection() });
+  } else if (message.type === "deselect") {
+    const el = removeSelection(message.key);
+    el?.removeAttribute("data-upstart-selected");
+    sendToParent({ type: "selection-changed", selection: getSelection() });
+  }
+}
+
+/**
+ * Drop the whole "select" mode selection: clear the in-memory set and remove the
+ * visual marker from any element still carrying it.
+ */
+function resetSelection(): void {
+  clearSelection();
+  for (const el of document.querySelectorAll("[data-upstart-selected]")) {
+    el.removeAttribute("data-upstart-selected");
   }
 }
 
@@ -188,6 +215,19 @@ function disableEditMode(): void {
   hideArrayControls();
 }
 
+function enableSelectMode(): void {
+  console.log("[Upstart Editor] Select mode enabled");
+  // Selectable hover (hover-overlay) and the persistent selected outline are
+  // gated on this attribute. The selection Map / data-upstart-selected attrs are
+  // kept across mode switches, so toggling back to select restores the outlines.
+  document.documentElement.setAttribute("data-upstart-select-mode", "");
+}
+
+function disableSelectMode(): void {
+  document.documentElement.removeAttribute("data-upstart-select-mode");
+  hideOverlays();
+}
+
 export { initTextEditor } from "./text-editor.js";
 export { initClickHandler } from "./click-handler.js";
 export { initErrorHandler } from "./error-handler.js";

package/src/vite-plugin-upstart-editor/runtime/state.ts

@@ -1,4 +1,4 @@
-import type { EditorMode } from "./types.js";
+import type { EditorMode, SelectionRef } from "./types.js";
 
 let currentMode: EditorMode = "preview";
 
@@ -15,3 +15,49 @@ export function getCurrentMode(): EditorMode {
 export function setCurrentMode(mode: EditorMode): void {
   currentMode = mode;
 }
+
+/**
+ * Selection set for "select" mode. Keyed by SelectionRef.key (stable across
+ * the session for a given element), insertion order preserved for the chips UI.
+ * `selectionEls` holds the matching DOM nodes (not serializable, so kept apart
+ * from the ref data sent to the parent) to clear their visual marker on removal.
+ */
+const selection = new Map<string, SelectionRef>();
+const selectionEls = new Map<string, HTMLElement>();
+
+/** Current selection as an array, in insertion order. */
+export function getSelection(): SelectionRef[] {
+  return Array.from(selection.values());
+}
+
+/**
+ * Toggle an element in/out of the selection. Returns true if the element is now
+ * selected, false if it was removed.
+ */
+export function toggleSelection(ref: SelectionRef, el: HTMLElement): boolean {
+  if (selection.has(ref.key)) {
+    selection.delete(ref.key);
+    selectionEls.delete(ref.key);
+    return false;
+  }
+  selection.set(ref.key, ref);
+  selectionEls.set(ref.key, el);
+  return true;
+}
+
+/**
+ * Remove a single element from the selection by key. Returns the matching DOM
+ * node (if known) so the caller can clear its visual marker.
+ */
+export function removeSelection(key: string): HTMLElement | undefined {
+  selection.delete(key);
+  const el = selectionEls.get(key);
+  selectionEls.delete(key);
+  return el;
+}
+
+/** Clear the whole selection. */
+export function clearSelection(): void {
+  selection.clear();
+  selectionEls.clear();
+}

package/src/vite-plugin-upstart-editor/runtime/types.ts

@@ -9,8 +9,31 @@ import type {
 
 /**
  * Editor mode
+ * - preview: navigate the site, no editing
+ * - edit: click an element to edit it (inspector / inline text)
+ * - select: pick multiple elements to attach to the next chat message
  */
-export type EditorMode = "preview" | "edit";
+export type EditorMode = "preview" | "edit" | "select";
+
+/**
+ * A reference to an element picked in "select" mode. Built from the data-upstart-*
+ * attributes injected by vite-plugin-upstart-attrs. `key` (e.g. `filePath:hash`) is
+ * the stable identity used to toggle the element in/out of the selection.
+ */
+export interface SelectionRef {
+  key: string;
+  hash: string;
+  filePath: string;
+  componentName?: string;
+  i18nKeys?: string[];
+  text?: string;
+  /**
+   * True when the element's visible content is derived from datasource (database) data
+   * (element carries / is inside `data-upstart-data-bound`). Its CONTENT is not editable
+   * from the editor — only its presentation is.
+   */
+  dataBound?: boolean;
+}
 
 /**
  * Text editor mode: determines schema constraints and bubble menu options.
@@ -71,6 +94,7 @@ export type EditorMessage =
   | { type: "editor-navigated"; path?: string }
   | { type: "scroll-position"; x: number; y: number }
   | { type: "editor-error"; error: string }
+  | { type: "selection-changed"; selection: SelectionRef[] }
   | {
       type: "element-clicked";
       hash: string;
@@ -95,7 +119,9 @@ export type ParentMessage =
   | { type: "preview-classname"; classNameId: string; className: string; previewCSS?: string }
   | { type: "preview-image"; imageId: string; src: string }
   | { type: "request-scroll-position" }
-  | { type: "restore-scroll-position"; x: number; y: number };
+  | { type: "restore-scroll-position"; x: number; y: number }
+  | { type: "clear-selection" }
+  | { type: "deselect"; key: string };
 
 /**
  * Message wrapper sent via postMessage from iframe.