@salesforce/ui-design-mode 10.2.2 → 10.4.0

package/dist/protocol/editableElementTags.cjs

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const EDITABLE_ELEMENT_TAGS = [
+  "H1",
+  "H2",
+  "H3",
+  "H4",
+  "H5",
+  "H6",
+  "P",
+  "SPAN",
+  "A",
+  "BUTTON",
+  "LABEL"
+];
+exports.EDITABLE_ELEMENT_TAGS = EDITABLE_ELEMENT_TAGS;

package/dist/protocol/editableElementTags.d.cts

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+/**
+ * Uppercase tag names treated as inline-editable text elements. Shared by the
+ * iframe runtime (which makes these elements `contentEditable`) and the authoring
+ * panel (which shows the inline-edit hint for them) so the two stay in lockstep.
+ *
+ * Compared against `element.tagName`, which the DOM always reports uppercase.
+ */
+export declare const EDITABLE_ELEMENT_TAGS: readonly string[];
+//# sourceMappingURL=editableElementTags.d.ts.map

package/dist/protocol/editableElementTags.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+/**
+ * Uppercase tag names treated as inline-editable text elements. Shared by the
+ * iframe runtime (which makes these elements `contentEditable`) and the authoring
+ * panel (which shows the inline-edit hint for them) so the two stay in lockstep.
+ *
+ * Compared against `element.tagName`, which the DOM always reports uppercase.
+ */
+export declare const EDITABLE_ELEMENT_TAGS: readonly string[];
+//# sourceMappingURL=editableElementTags.d.ts.map

package/dist/protocol/editableElementTags.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editableElementTags.d.ts","sourceRoot":"","sources":["../../src/protocol/editableElementTags.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,EAAE,SAAS,MAAM,EAYlD,CAAC"}

package/dist/protocol/editableElementTags.js

@@ -0,0 +1,16 @@
+const EDITABLE_ELEMENT_TAGS = [
+  "H1",
+  "H2",
+  "H3",
+  "H4",
+  "H5",
+  "H6",
+  "P",
+  "SPAN",
+  "A",
+  "BUTTON",
+  "LABEL"
+];
+export {
+  EDITABLE_ELEMENT_TAGS
+};

package/dist/protocol/index.cjs

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const messageTypes = require("./messageTypes.cjs");
 const domAttributes = require("./domAttributes.cjs");
+const editableElementTags = require("./editableElementTags.cjs");
 exports.MSG_COMPONENT_SELECTED = messageTypes.MSG_COMPONENT_SELECTED;
 exports.MSG_DISABLE_INTERACTIONS = messageTypes.MSG_DISABLE_INTERACTIONS;
 exports.MSG_ENABLE_INTERACTIONS = messageTypes.MSG_ENABLE_INTERACTIONS;
@@ -12,3 +13,4 @@ exports.MSG_TEXT_CHANGE = messageTypes.MSG_TEXT_CHANGE;
 exports.MSG_TEXT_CHANGED = messageTypes.MSG_TEXT_CHANGED;
 exports.ATTR_SOURCE_FILE = domAttributes.ATTR_SOURCE_FILE;
 exports.ATTR_TEXT_TYPE = domAttributes.ATTR_TEXT_TYPE;
+exports.EDITABLE_ELEMENT_TAGS = editableElementTags.EDITABLE_ELEMENT_TAGS;

package/dist/protocol/index.d.cts

@@ -5,4 +5,5 @@
  */
 export * from './messageTypes.cjs';
 export * from './domAttributes.cjs';
+export * from './editableElementTags.cjs';
 //# sourceMappingURL=index.d.ts.map

package/dist/protocol/index.d.ts

@@ -5,4 +5,5 @@
  */
 export * from './messageTypes.js';
 export * from './domAttributes.js';
+export * from './editableElementTags.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/protocol/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/protocol/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/protocol/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC"}

package/dist/protocol/index.js

@@ -1,8 +1,10 @@
 import { MSG_COMPONENT_SELECTED, MSG_DISABLE_INTERACTIONS, MSG_ENABLE_INTERACTIONS, MSG_INTERACTIONS_INITIALIZED, MSG_MEDIA_CHANGE, MSG_STYLE_CHANGE, MSG_TEXT_CHANGE, MSG_TEXT_CHANGED } from "./messageTypes.js";
 import { ATTR_SOURCE_FILE, ATTR_TEXT_TYPE } from "./domAttributes.js";
+import { EDITABLE_ELEMENT_TAGS } from "./editableElementTags.js";
 export {
   ATTR_SOURCE_FILE,
   ATTR_TEXT_TYPE,
+  EDITABLE_ELEMENT_TAGS,
   MSG_COMPONENT_SELECTED,
   MSG_DISABLE_INTERACTIONS,
   MSG_ENABLE_INTERACTIONS,

package/dist/protocol/messageTypes.d.cts

@@ -13,11 +13,19 @@
  *  - Capability advertisement (on InteractionsInitializedMessage) is the
  *    preferred mechanism for new behavior.
  */
-/** Source location of a JSX element in the customer's source tree. */
+/**
+ * Source location of a JSX element in the customer's source tree.
+ *
+ * Invariant: all three fields are always present. The source-locator injects
+ * `data-source-file` as an all-or-nothing `file:line:col` triple, so a producer
+ * that can't supply a full position emits no location at all (the field is
+ * absent / the element is treated as non-locatable) rather than a partial
+ * `SourceLocation`. Consumers therefore never have to guard line/column.
+ */
 export interface SourceLocation {
     sourceFile: string;
-    lineNumber: number | null;
-    columnNumber: number | null;
+    lineNumber: number;
+    columnNumber: number;
 }
 export interface EnableInteractionsMessage {
     type: "enable-interactions";
@@ -61,10 +69,45 @@ export interface TextChangedMessage {
     change: TextChange;
 }
 export type IframeToHostMessage = InteractionsInitializedMessage | ComponentSelectedMessage | TextChangedMessage;
+/**
+ * A single style property's value pair, as reported on `component-selected`.
+ * - `inline`: the raw value explicitly set via the element's `style` attribute.
+ * - `computed`: the browser-resolved value after the full cascade.
+ *
+ * The panel uses `inline` as the editor's value and `computed` as its placeholder.
+ */
+export interface ComponentStyleValue {
+    inline?: string;
+    computed?: string;
+}
+/**
+ * Editable attributes reported for an `<img>` element on selection. Strings
+ * mirror the raw HTML attribute values; missing attributes are reported as `""`.
+ *
+ * `width` / `height` are unitless integer strings (px); `""` means the attribute
+ * is absent and the image renders at its intrinsic size.
+ */
+export interface ImageMediaInfo {
+    tag: "img";
+    src: string;
+    alt: string;
+    width: string;
+    height: string;
+}
+/**
+ * Discriminated union of media-element metadata, keyed by `tag`. To support a
+ * new media tag in future, add a variant here and a matching case in the
+ * runtime's `getMediaInfo`.
+ */
+export type MediaInfo = ImageMediaInfo;
+/** Selected-component payload carried by `component-selected`. */
 export interface ComponentData {
-    styles?: Record<string, string>;
-    sourceLocation?: SourceLocation;
-    [key: string]: unknown;
+    name?: string;
+    tagName?: string;
+    styles?: Record<string, ComponentStyleValue>;
+    debugSource?: SourceLocation;
+    hasNonEditableText?: boolean;
+    media?: MediaInfo;
 }
 export interface TextChange {
     originalText: string;

package/dist/protocol/messageTypes.d.ts

@@ -13,11 +13,19 @@
  *  - Capability advertisement (on InteractionsInitializedMessage) is the
  *    preferred mechanism for new behavior.
  */
-/** Source location of a JSX element in the customer's source tree. */
+/**
+ * Source location of a JSX element in the customer's source tree.
+ *
+ * Invariant: all three fields are always present. The source-locator injects
+ * `data-source-file` as an all-or-nothing `file:line:col` triple, so a producer
+ * that can't supply a full position emits no location at all (the field is
+ * absent / the element is treated as non-locatable) rather than a partial
+ * `SourceLocation`. Consumers therefore never have to guard line/column.
+ */
 export interface SourceLocation {
     sourceFile: string;
-    lineNumber: number | null;
-    columnNumber: number | null;
+    lineNumber: number;
+    columnNumber: number;
 }
 export interface EnableInteractionsMessage {
     type: "enable-interactions";
@@ -61,10 +69,45 @@ export interface TextChangedMessage {
     change: TextChange;
 }
 export type IframeToHostMessage = InteractionsInitializedMessage | ComponentSelectedMessage | TextChangedMessage;
+/**
+ * A single style property's value pair, as reported on `component-selected`.
+ * - `inline`: the raw value explicitly set via the element's `style` attribute.
+ * - `computed`: the browser-resolved value after the full cascade.
+ *
+ * The panel uses `inline` as the editor's value and `computed` as its placeholder.
+ */
+export interface ComponentStyleValue {
+    inline?: string;
+    computed?: string;
+}
+/**
+ * Editable attributes reported for an `<img>` element on selection. Strings
+ * mirror the raw HTML attribute values; missing attributes are reported as `""`.
+ *
+ * `width` / `height` are unitless integer strings (px); `""` means the attribute
+ * is absent and the image renders at its intrinsic size.
+ */
+export interface ImageMediaInfo {
+    tag: "img";
+    src: string;
+    alt: string;
+    width: string;
+    height: string;
+}
+/**
+ * Discriminated union of media-element metadata, keyed by `tag`. To support a
+ * new media tag in future, add a variant here and a matching case in the
+ * runtime's `getMediaInfo`.
+ */
+export type MediaInfo = ImageMediaInfo;
+/** Selected-component payload carried by `component-selected`. */
 export interface ComponentData {
-    styles?: Record<string, string>;
-    sourceLocation?: SourceLocation;
-    [key: string]: unknown;
+    name?: string;
+    tagName?: string;
+    styles?: Record<string, ComponentStyleValue>;
+    debugSource?: SourceLocation;
+    hasNonEditableText?: boolean;
+    media?: MediaInfo;
 }
 export interface TextChange {
     originalText: string;

package/dist/protocol/messageTypes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"messageTypes.d.ts","sourceRoot":"","sources":["../../src/protocol/messageTypes.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;;;;GASG;AAEH,sEAAsE;AACtE,MAAM,WAAW,cAAc;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5B;AAID,MAAM,WAAW,yBAAyB;IACzC,IAAI,EAAE,qBAAqB,CAAC;CAC5B;AAED,MAAM,WAAW,0BAA0B;IAC1C,IAAI,EAAE,sBAAsB,CAAC;CAC7B;AAED,MAAM,WAAW,kBAAkB;IAClC,IAAI,EAAE,cAAc,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,cAAc,CAAC;CAChC;AAED,MAAM,WAAW,iBAAiB;IACjC,IAAI,EAAE,aAAa,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,cAAc,CAAC,EAAE,cAAc,CAAC;CAChC;AAED,sEAAsE;AACtE,MAAM,WAAW,kBAAkB;IAClC,IAAI,EAAE,cAAc,CAAC;IACrB,GAAG,EAAE,MAAM,CAAC;IACZ,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;IAC/C,cAAc,CAAC,EAAE,cAAc,CAAC;CAChC;AAED,MAAM,MAAM,mBAAmB,GAC5B,yBAAyB,GACzB,0BAA0B,GAC1B,kBAAkB,GAClB,iBAAiB,GACjB,kBAAkB,CAAC;AAItB,MAAM,WAAW,8BAA8B;IAC9C,IAAI,EAAE,0BAA0B,CAAC;IACjC;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;CACxB;AAED,MAAM,WAAW,wBAAwB;IACxC,IAAI,EAAE,oBAAoB,CAAC;IAC3B,SAAS,EAAE,aAAa,GAAG,IAAI,CAAC;CAChC;AAED,MAAM,WAAW,kBAAkB;IAClC,IAAI,EAAE,cAAc,CAAC;IACrB,MAAM,EAAE,UAAU,CAAC;CACnB;AAED,MAAM,MAAM,mBAAmB,GAC5B,8BAA8B,GAC9B,wBAAwB,GACxB,kBAAkB,CAAC;AAItB,MAAM,WAAW,aAAa;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,UAAU;IAC1B,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB;AAID,eAAO,MAAM,uBAAuB,EAAG,qBAA8B,CAAC;AACtE,eAAO,MAAM,wBAAwB,EAAG,sBAA+B,CAAC;AACxE,eAAO,MAAM,gBAAgB,EAAG,cAAuB,CAAC;AACxD,eAAO,MAAM,eAAe,EAAG,aAAsB,CAAC;AACtD,eAAO,MAAM,gBAAgB,EAAG,cAAuB,CAAC;AACxD,eAAO,MAAM,4BAA4B,EAAG,0BAAmC,CAAC;AAChF,eAAO,MAAM,sBAAsB,EAAG,oBAA6B,CAAC;AACpE,eAAO,MAAM,gBAAgB,EAAG,cAAuB,CAAC"}
+{"version":3,"file":"messageTypes.d.ts","sourceRoot":"","sources":["../../src/protocol/messageTypes.ts"],"names":[],"mappings":"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"}

package/dist/runtime/design-mode-interactions.js

@@ -25,24 +25,40 @@
   // src/protocol/domAttributes.ts
   var ATTR_SOURCE_FILE = "data-source-file";
 
+  // src/protocol/editableElementTags.ts
+  var EDITABLE_ELEMENT_TAGS = [
+    "H1",
+    "H2",
+    "H3",
+    "H4",
+    "H5",
+    "H6",
+    "P",
+    "SPAN",
+    "A",
+    "BUTTON",
+    "LABEL"
+  ];
+
   // src/runtime/interactions/utils/sourceUtils.ts
-  function parseOptionalInt(value) {
-    if (value === null || value === void 0 || value === "") {
+  function parseRequiredInt(value) {
+    if (value === void 0 || value === "") {
       return null;
     }
-    const parsed = Number.parseInt(String(value), 10);
+    const parsed = Number.parseInt(value, 10);
     return Number.isFinite(parsed) ? parsed : null;
   }
   function parseSourceFileAttribute(value) {
     const match = /^(.*):(\d+):(\d+)$/.exec(value);
-    if (!match) {
-      return { sourceFile: value, lineNumber: null, columnNumber: null };
+    if (!match || !match[1]) {
+      return null;
     }
-    return {
-      sourceFile: match[1] ?? value,
-      lineNumber: parseOptionalInt(match[2]),
-      columnNumber: parseOptionalInt(match[3])
-    };
+    const lineNumber = parseRequiredInt(match[2]);
+    const columnNumber = parseRequiredInt(match[3]);
+    if (lineNumber === null || columnNumber === null) {
+      return null;
+    }
+    return { sourceFile: match[1], lineNumber, columnNumber };
   }
   function getSourceFromDataAttributes(element) {
     if (!element) {
@@ -68,10 +84,13 @@
   function parseSourceLocation(sl) {
     if (!sl || typeof sl !== "object") return void 0;
     const obj = sl;
+    if (typeof obj.sourceFile !== "string" || obj.sourceFile === "" || typeof obj.lineNumber !== "number" || typeof obj.columnNumber !== "number") {
+      return void 0;
+    }
     return {
-      sourceFile: String(obj.sourceFile ?? ""),
-      lineNumber: typeof obj.lineNumber === "number" ? obj.lineNumber : null,
-      columnNumber: typeof obj.columnNumber === "number" ? obj.columnNumber : null
+      sourceFile: obj.sourceFile,
+      lineNumber: obj.lineNumber,
+      columnNumber: obj.columnNumber
     };
   }
   function getLabelFromSource(element) {
@@ -79,17 +98,17 @@
       return "";
     }
     const source = element.getAttribute(ATTR_SOURCE_FILE);
-    if (!source) {
+    const parsed = source ? parseSourceFileAttribute(source) : null;
+    if (!parsed) {
       return element.tagName ? element.tagName.toLowerCase() : "";
     }
-    const { sourceFile } = parseSourceFileAttribute(source);
-    const parts = sourceFile.split(/[/\\]/);
-    const baseName = parts[parts.length - 1] || sourceFile;
+    const parts = parsed.sourceFile.split(/[/\\]/);
+    const baseName = parts[parts.length - 1] || parsed.sourceFile;
     return baseName;
   }
 
   // src/runtime/interactions/editableManager.ts
-  var TEXT_TAGS = ["H1", "H2", "H3", "H4", "H5", "H6", "P", "SPAN", "A", "BUTTON", "LABEL"];
+  var TEXT_TAGS = EDITABLE_ELEMENT_TAGS;
   var EditableManager = class {
     constructor(communicationManager) {
       __publicField(this, "communicationManager");
@@ -356,15 +375,19 @@
       this.allowlist = options.allowlist ?? [];
     }
     /**
-     * Check whether an element contains compile-time source metadata attributes.
+     * Check whether an element carries a *valid, complete* source location.
+     * A bare `data-source-file` attribute is not enough — it must parse into a
+     * full `SourceLocation` (file + line + column). Elements without a valid
+     * location are not selectable or highlightable, so downstream consumers can
+     * trust that any selected element has a complete location.
      * @param element - The element to check
-     * @returns True if the data-source-file attribute is present
+     * @returns True if the element has a valid, fully-parsed source location
      */
     hasSourceMetadata(element) {
       if (!element) {
         return false;
       }
-      return element.hasAttribute(ATTR_SOURCE_FILE);
+      return getSourceFromDataAttributes(element) !== null;
     }
     matchesList(element, selectors) {
       return selectors.some((selector) => element.matches(selector));

package/dist/runtime/interactions/communicationManager.d.cts

@@ -1,28 +1,5 @@
-/**
- * Copyright (c) 2026, Salesforce, Inc.,
- * All rights reserved.
- * For full license text, see the LICENSE.txt file
- */
-/**
- * Editable attributes reported for an `<img>` element on selection. Strings
- * mirror the raw HTML attribute values; missing attributes are reported as `""`.
- *
- * - `width` / `height` are unitless integer strings (px); `""` means the
- *   attribute is absent and the image renders at its intrinsic size.
- */
-interface ImageMediaInfo {
-    tag: "img";
-    src: string;
-    alt: string;
-    width: string;
-    height: string;
-}
-/**
- * Discriminated union of media-element metadata, keyed by `tag`. To support a
- * new media tag in future if required, add a variant here and a matching case
- * in {@link getMediaInfo}.
- */
-export type MediaInfo = ImageMediaInfo;
+import { MediaInfo } from '../../protocol.cjs';
+export type { MediaInfo };
 /**
  * Extract editable media metadata from a selected element.
  *
@@ -53,5 +30,4 @@ export declare class CommunicationManager {
      */
     notifyInitializationComplete(): void;
 }
-export {};
 //# sourceMappingURL=communicationManager.d.ts.map

package/dist/runtime/interactions/communicationManager.d.ts

@@ -1,28 +1,5 @@
-/**
- * Copyright (c) 2026, Salesforce, Inc.,
- * All rights reserved.
- * For full license text, see the LICENSE.txt file
- */
-/**
- * Editable attributes reported for an `<img>` element on selection. Strings
- * mirror the raw HTML attribute values; missing attributes are reported as `""`.
- *
- * - `width` / `height` are unitless integer strings (px); `""` means the
- *   attribute is absent and the image renders at its intrinsic size.
- */
-interface ImageMediaInfo {
-    tag: "img";
-    src: string;
-    alt: string;
-    width: string;
-    height: string;
-}
-/**
- * Discriminated union of media-element metadata, keyed by `tag`. To support a
- * new media tag in future if required, add a variant here and a matching case
- * in {@link getMediaInfo}.
- */
-export type MediaInfo = ImageMediaInfo;
+import { MediaInfo } from '../../protocol.js';
+export type { MediaInfo };
 /**
  * Extract editable media metadata from a selected element.
  *
@@ -53,5 +30,4 @@ export declare class CommunicationManager {
      */
     notifyInitializationComplete(): void;
 }
-export {};
 //# sourceMappingURL=communicationManager.d.ts.map

package/dist/runtime/interactions/communicationManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"communicationManager.d.ts","sourceRoot":"","sources":["../../../src/runtime/interactions/communicationManager.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAsBH;;;;;;GAMG;AACH,UAAU,cAAc;IACvB,GAAG,EAAE,KAAK,CAAC;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CACf;AAED;;;;GAIG;AACH,MAAM,MAAM,SAAS,GAAG,cAAc,CAAC;AAEvC;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,WAAW,GAAG,SAAS,GAAG,SAAS,CAexE;AAED,qBAAa,oBAAoB;;IAKhC;;;OAGG;IACH,uBAAuB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IA0DnD;;;;;OAKG;IACH,gBAAgB,CAAC,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI;IAyBnF;;OAEG;IACH,4BAA4B,IAAI,IAAI;CAepC"}
+{"version":3,"file":"communicationManager.d.ts","sourceRoot":"","sources":["../../../src/runtime/interactions/communicationManager.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAQH,OAAO,EAIN,KAAK,SAAS,EACd,MAAM,gBAAgB,CAAC;AAUxB,YAAY,EAAE,SAAS,EAAE,CAAC;AAE1B;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,WAAW,GAAG,SAAS,GAAG,SAAS,CAexE;AAED,qBAAa,oBAAoB;;IAKhC;;;OAGG;IACH,uBAAuB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IA0DnD;;;;;OAKG;IACH,gBAAgB,CAAC,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI;IAyBnF;;OAEG;IACH,4BAA4B,IAAI,IAAI;CAepC"}

package/dist/runtime/interactions/componentMatcher.d.cts

@@ -10,9 +10,13 @@ export declare class ComponentMatcher {
     private allowlist;
     constructor(options?: ComponentMatcherOptions);
     /**
-     * Check whether an element contains compile-time source metadata attributes.
+     * Check whether an element carries a *valid, complete* source location.
+     * A bare `data-source-file` attribute is not enough — it must parse into a
+     * full `SourceLocation` (file + line + column). Elements without a valid
+     * location are not selectable or highlightable, so downstream consumers can
+     * trust that any selected element has a complete location.
      * @param element - The element to check
-     * @returns True if the data-source-file attribute is present
+     * @returns True if the element has a valid, fully-parsed source location
      */
     hasSourceMetadata(element: HTMLElement | null | undefined): boolean;
     private matchesList;

package/dist/runtime/interactions/componentMatcher.d.ts

@@ -10,9 +10,13 @@ export declare class ComponentMatcher {
     private allowlist;
     constructor(options?: ComponentMatcherOptions);
     /**
-     * Check whether an element contains compile-time source metadata attributes.
+     * Check whether an element carries a *valid, complete* source location.
+     * A bare `data-source-file` attribute is not enough — it must parse into a
+     * full `SourceLocation` (file + line + column). Elements without a valid
+     * location are not selectable or highlightable, so downstream consumers can
+     * trust that any selected element has a complete location.
      * @param element - The element to check
-     * @returns True if the data-source-file attribute is present
+     * @returns True if the element has a valid, fully-parsed source location
      */
     hasSourceMetadata(element: HTMLElement | null | undefined): boolean;
     private matchesList;

package/dist/runtime/interactions/componentMatcher.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"componentMatcher.d.ts","sourceRoot":"","sources":["../../../src/runtime/interactions/componentMatcher.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AASH,MAAM,WAAW,uBAAuB;IAEvC,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;CACrB;AAED,qBAAa,gBAAgB;IAC5B,OAAO,CAAC,SAAS,CAAW;gBAEhB,OAAO,GAAE,uBAA4B;IAIjD;;;;OAIG;IACH,iBAAiB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO;IAOnE,OAAO,CAAC,WAAW;IAInB;;;;;OAKG;IACH,oBAAoB,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,OAAO;IAM7D;;;;OAIG;IACH,sBAAsB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO;IAgBxE;;;;OAIG;IACH,wBAAwB,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,WAAW,GAAG,IAAI;CA+BpF"}
+{"version":3,"file":"componentMatcher.d.ts","sourceRoot":"","sources":["../../../src/runtime/interactions/componentMatcher.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAUH,MAAM,WAAW,uBAAuB;IAEvC,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;CACrB;AAED,qBAAa,gBAAgB;IAC5B,OAAO,CAAC,SAAS,CAAW;gBAEhB,OAAO,GAAE,uBAA4B;IAIjD;;;;;;;;OAQG;IACH,iBAAiB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO;IAOnE,OAAO,CAAC,WAAW;IAInB;;;;;OAKG;IACH,oBAAoB,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,OAAO;IAM7D;;;;OAIG;IACH,sBAAsB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO;IAgBxE;;;;OAIG;IACH,wBAAwB,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,WAAW,GAAG,IAAI;CA+BpF"}

package/dist/runtime/interactions/editableManager.d.cts

@@ -6,7 +6,8 @@
 interface CommunicationManagerLike {
     notifyTextChange: (element: HTMLElement, originalText: string, newText: string) => void;
 }
-export declare const TEXT_TAGS: string[];
+/** Canonical list lives in `/protocol` (EDITABLE_ELEMENT_TAGS); aliased here for existing call sites. */
+export declare const TEXT_TAGS: readonly string[];
 export declare class EditableManager {
     private communicationManager?;
     private boundHandleBlur;

package/dist/runtime/interactions/editableManager.d.ts

@@ -6,7 +6,8 @@
 interface CommunicationManagerLike {
     notifyTextChange: (element: HTMLElement, originalText: string, newText: string) => void;
 }
-export declare const TEXT_TAGS: string[];
+/** Canonical list lives in `/protocol` (EDITABLE_ELEMENT_TAGS); aliased here for existing call sites. */
+export declare const TEXT_TAGS: readonly string[];
 export declare class EditableManager {
     private communicationManager?;
     private boundHandleBlur;

package/dist/runtime/interactions/editableManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editableManager.d.ts","sourceRoot":"","sources":["../../../src/runtime/interactions/editableManager.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAUH,UAAU,wBAAwB;IACjC,gBAAgB,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACxF;AAED,eAAO,MAAM,SAAS,UAA4E,CAAC;AAEnG,qBAAa,eAAe;IAC3B,OAAO,CAAC,oBAAoB,CAAC,CAA2B;IACxD,OAAO,CAAC,eAAe,CAAqB;IAC5C,OAAO,CAAC,kBAAkB,CAA6B;IACvD,OAAO,CAAC,gBAAgB,CAAqB;IAC7C,OAAO,CAAC,aAAa,CAAgB;gBAEzB,oBAAoB,CAAC,EAAE,wBAAwB;IAQ3D,kBAAkB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IAoB9C,cAAc,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IAe1C,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,WAAW;IAkBnB,OAAO,CAAC,cAAc;CAiBtB"}
+{"version":3,"file":"editableManager.d.ts","sourceRoot":"","sources":["../../../src/runtime/interactions/editableManager.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAWH,UAAU,wBAAwB;IACjC,gBAAgB,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACxF;AAED,yGAAyG;AACzG,eAAO,MAAM,SAAS,mBAAwB,CAAC;AAE/C,qBAAa,eAAe;IAC3B,OAAO,CAAC,oBAAoB,CAAC,CAA2B;IACxD,OAAO,CAAC,eAAe,CAAqB;IAC5C,OAAO,CAAC,kBAAkB,CAA6B;IACvD,OAAO,CAAC,gBAAgB,CAAqB;IAC7C,OAAO,CAAC,aAAa,CAAgB;gBAEzB,oBAAoB,CAAC,EAAE,wBAAwB;IAQ3D,kBAAkB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IAoB9C,cAAc,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IAe1C,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,WAAW;IAkBnB,OAAO,CAAC,cAAc;CAiBtB"}

package/dist/runtime/interactions/utils/sourceUtils.d.cts

@@ -15,8 +15,11 @@ export declare function findElementsBySourceLocation(location: SourceLocation):
 /**
  * Parse an untyped message payload object into a SourceLocation.
  * Used by the entry point to convert raw postMessage data into typed values.
+ * Enforces the same all-or-nothing invariant as the DOM parser: returns
+ * `undefined` unless `sourceFile` is a non-empty string and both `lineNumber`
+ * and `columnNumber` are numbers.
  * @param sl - The raw source location object from a message payload
- * @returns A SourceLocation, or undefined if the input is not a valid object
+ * @returns A complete SourceLocation, or undefined if any field is missing/invalid
  */
 export declare function parseSourceLocation(sl: unknown): SourceLocation | undefined;
 /**

package/dist/runtime/interactions/utils/sourceUtils.d.ts

@@ -15,8 +15,11 @@ export declare function findElementsBySourceLocation(location: SourceLocation):
 /**
  * Parse an untyped message payload object into a SourceLocation.
  * Used by the entry point to convert raw postMessage data into typed values.
+ * Enforces the same all-or-nothing invariant as the DOM parser: returns
+ * `undefined` unless `sourceFile` is a non-empty string and both `lineNumber`
+ * and `columnNumber` are numbers.
  * @param sl - The raw source location object from a message payload
- * @returns A SourceLocation, or undefined if the input is not a valid object
+ * @returns A complete SourceLocation, or undefined if any field is missing/invalid
  */
 export declare function parseSourceLocation(sl: unknown): SourceLocation | undefined;
 /**

package/dist/runtime/interactions/utils/sourceUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sourceUtils.d.ts","sourceRoot":"","sources":["../../../../src/runtime/interactions/utils/sourceUtils.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;GAGG;AAEH,OAAO,EAAoB,KAAK,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAE1E,YAAY,EAAE,cAAc,EAAE,CAAC;AAyB/B;;;;GAIG;AACH,wBAAgB,2BAA2B,CAC1C,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GACrC,cAAc,GAAG,IAAI,CAWvB;AAED;;;;GAIG;AACH,wBAAgB,4BAA4B,CAAC,QAAQ,EAAE,cAAc,GAAG,WAAW,EAAE,CAepF;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,EAAE,OAAO,GAAG,cAAc,GAAG,SAAS,CAQ3E;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,CAgBlF"}
+{"version":3,"file":"sourceUtils.d.ts","sourceRoot":"","sources":["../../../../src/runtime/interactions/utils/sourceUtils.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;GAGG;AAEH,OAAO,EAAoB,KAAK,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAE1E,YAAY,EAAE,cAAc,EAAE,CAAC;AAkC/B;;;;GAIG;AACH,wBAAgB,2BAA2B,CAC1C,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GACrC,cAAc,GAAG,IAAI,CAWvB;AAED;;;;GAIG;AACH,wBAAgB,4BAA4B,CAAC,QAAQ,EAAE,cAAc,GAAG,WAAW,EAAE,CAepF;AAED;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,EAAE,OAAO,GAAG,cAAc,GAAG,SAAS,CAgB3E;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,CAgBlF"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@salesforce/ui-design-mode",
   "description": "Hybrid editor (design-mode) authoring UI, iframe runtime, source-locator, and protocol for Salesforce UI Bundles",
-  "version": "10.2.2",
+  "version": "10.4.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "type": "module",
   "exports": {
@@ -35,13 +35,21 @@
         "default": "./dist/runtime/index.cjs"
       }
     },
+    "./authoring/react": {
+      "types": "./dist/authoring/react/index.d.ts",
+      "import": "./dist/authoring/react/index.js"
+    },
+    "./authoring/web-component": {
+      "types": "./dist/authoring/web-component/index.d.ts",
+      "import": "./dist/authoring/web-component/index.js"
+    },
     "./package.json": "./package.json"
   },
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "vite build && node scripts/fix-dts-extensions.mjs && node src/runtime/bundle-runtime.mjs",
+    "build": "vite build && node scripts/fix-dts-extensions.mjs && node src/runtime/bundle-runtime.mjs && node src/authoring/react/bundle-authoring-react.mjs && node src/authoring/web-component/bundle-authoring-web-component.mjs",
     "clean": "rm -rf dist",
     "dev": "vite build --watch",
     "test": "vitest run",
@@ -49,13 +57,29 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@babel/helper-plugin-utils": "^7.28.3"
+    "@babel/helper-plugin-utils": "^7.28.3",
+    "@radix-ui/react-icons": "1.3.2",
+    "@radix-ui/react-toggle-group": "1.1.11",
+    "culori": "^4.0.1",
+    "downshift": "9.3.2",
+    "lucide-react": "0.575.0",
+    "react-beautiful-color": "2.1.0",
+    "use-debounce": "^10.0.4"
+  },
+  "peerDependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.28.4",
     "@types/babel__core": "^7.20.5",
     "@types/babel__helper-plugin-utils": "^7.10.3",
+    "@types/culori": "4.0.1",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
     "esbuild": "^0.24.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "ts-morph": "^25.0.0",
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4",