@salesforce/ui-design-mode 10.2.0

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

@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+/**
+ * Style value with both inline and computed values.
+ * - inline: the raw value from element.style (what was explicitly set via
+ *   the style attribute).
+ * - computed: the browser-resolved value after the full cascade.
+ */
+interface StyleValue {
+    inline: string;
+    computed: string;
+}
+/**
+ * Complete element styles snapshot
+ */
+interface ElementStyles {
+    width: StyleValue;
+    minWidth: StyleValue;
+    maxWidth: StyleValue;
+    height: StyleValue;
+    minHeight: StyleValue;
+    maxHeight: StyleValue;
+    overflow: StyleValue;
+    padding: StyleValue;
+    margin: StyleValue;
+    backgroundColor: StyleValue;
+    borderWidth: StyleValue;
+    borderStyle: StyleValue;
+    borderColor: StyleValue;
+    borderRadius: StyleValue;
+    color: StyleValue;
+    fontFamily: StyleValue;
+    fontSize: StyleValue;
+    fontWeight: StyleValue;
+    fontStyle: StyleValue;
+    lineHeight: StyleValue;
+    letterSpacing: StyleValue;
+    textAlign: StyleValue;
+    textDecoration: StyleValue;
+    textTransform: StyleValue;
+}
+/**
+ * Get all style values relevant to UI controls for an element.
+ * Each property returns { inline, computed } where inline is the raw
+ * element.style value and computed is the browser-resolved value.
+ * @param element - The HTML element to extract styles from
+ * @returns Plain-object snapshot safe for postMessage
+ */
+export declare function getElementStyles(element: HTMLElement | null | undefined): Partial<ElementStyles>;
+export {};
+//# sourceMappingURL=cssUtils.d.ts.map

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

@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+/**
+ * Style value with both inline and computed values.
+ * - inline: the raw value from element.style (what was explicitly set via
+ *   the style attribute).
+ * - computed: the browser-resolved value after the full cascade.
+ */
+interface StyleValue {
+    inline: string;
+    computed: string;
+}
+/**
+ * Complete element styles snapshot
+ */
+interface ElementStyles {
+    width: StyleValue;
+    minWidth: StyleValue;
+    maxWidth: StyleValue;
+    height: StyleValue;
+    minHeight: StyleValue;
+    maxHeight: StyleValue;
+    overflow: StyleValue;
+    padding: StyleValue;
+    margin: StyleValue;
+    backgroundColor: StyleValue;
+    borderWidth: StyleValue;
+    borderStyle: StyleValue;
+    borderColor: StyleValue;
+    borderRadius: StyleValue;
+    color: StyleValue;
+    fontFamily: StyleValue;
+    fontSize: StyleValue;
+    fontWeight: StyleValue;
+    fontStyle: StyleValue;
+    lineHeight: StyleValue;
+    letterSpacing: StyleValue;
+    textAlign: StyleValue;
+    textDecoration: StyleValue;
+    textTransform: StyleValue;
+}
+/**
+ * Get all style values relevant to UI controls for an element.
+ * Each property returns { inline, computed } where inline is the raw
+ * element.style value and computed is the browser-resolved value.
+ * @param element - The HTML element to extract styles from
+ * @returns Plain-object snapshot safe for postMessage
+ */
+export declare function getElementStyles(element: HTMLElement | null | undefined): Partial<ElementStyles>;
+export {};
+//# sourceMappingURL=cssUtils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cssUtils.d.ts","sourceRoot":"","sources":["../../../../src/runtime/interactions/utils/cssUtils.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;GAKG;AACH,UAAU,UAAU;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;CACjB;AAID;;GAEG;AACH,UAAU,aAAa;IACtB,KAAK,EAAE,UAAU,CAAC;IAClB,QAAQ,EAAE,UAAU,CAAC;IACrB,QAAQ,EAAE,UAAU,CAAC;IACrB,MAAM,EAAE,UAAU,CAAC;IACnB,SAAS,EAAE,UAAU,CAAC;IACtB,SAAS,EAAE,UAAU,CAAC;IACtB,QAAQ,EAAE,UAAU,CAAC;IACrB,OAAO,EAAE,UAAU,CAAC;IACpB,MAAM,EAAE,UAAU,CAAC;IACnB,eAAe,EAAE,UAAU,CAAC;IAC5B,WAAW,EAAE,UAAU,CAAC;IACxB,WAAW,EAAE,UAAU,CAAC;IACxB,WAAW,EAAE,UAAU,CAAC;IACxB,YAAY,EAAE,UAAU,CAAC;IACzB,KAAK,EAAE,UAAU,CAAC;IAClB,UAAU,EAAE,UAAU,CAAC;IACvB,QAAQ,EAAE,UAAU,CAAC;IACrB,UAAU,EAAE,UAAU,CAAC;IACvB,SAAS,EAAE,UAAU,CAAC;IACtB,UAAU,EAAE,UAAU,CAAC;IACvB,aAAa,EAAE,UAAU,CAAC;IAC1B,SAAS,EAAE,UAAU,CAAC;IACtB,cAAc,EAAE,UAAU,CAAC;IAC3B,aAAa,EAAE,UAAU,CAAC;CAC1B;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO,CAAC,aAAa,CAAC,CAmFhG"}

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

@@ -0,0 +1,28 @@
+import { SourceLocation } from '../../../protocol.cjs';
+export type { SourceLocation };
+/**
+ * Extract source location information from data attributes.
+ * @param element - The DOM element
+ * @returns Source location information, or null if missing.
+ */
+export declare function getSourceFromDataAttributes(element: HTMLElement | null | undefined): SourceLocation | null;
+/**
+ * Find all DOM elements whose `data-source-file` attribute matches the given source location.
+ * @param location - The source location to match against
+ * @returns All matching elements (may be empty)
+ */
+export declare function findElementsBySourceLocation(location: SourceLocation): HTMLElement[];
+/**
+ * Parse an untyped message payload object into a SourceLocation.
+ * Used by the entry point to convert raw postMessage data into typed values.
+ * @param sl - The raw source location object from a message payload
+ * @returns A SourceLocation, or undefined if the input is not a valid object
+ */
+export declare function parseSourceLocation(sl: unknown): SourceLocation | undefined;
+/**
+ * Derive a human-readable label from the injected source file name, if present.
+ * @param element - The DOM element
+ * @returns A label suitable for UI display
+ */
+export declare function getLabelFromSource(element: HTMLElement | null | undefined): string;
+//# sourceMappingURL=sourceUtils.d.ts.map

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

@@ -0,0 +1,28 @@
+import { SourceLocation } from '../../../protocol.js';
+export type { SourceLocation };
+/**
+ * Extract source location information from data attributes.
+ * @param element - The DOM element
+ * @returns Source location information, or null if missing.
+ */
+export declare function getSourceFromDataAttributes(element: HTMLElement | null | undefined): SourceLocation | null;
+/**
+ * Find all DOM elements whose `data-source-file` attribute matches the given source location.
+ * @param location - The source location to match against
+ * @returns All matching elements (may be empty)
+ */
+export declare function findElementsBySourceLocation(location: SourceLocation): HTMLElement[];
+/**
+ * Parse an untyped message payload object into a SourceLocation.
+ * Used by the entry point to convert raw postMessage data into typed values.
+ * @param sl - The raw source location object from a message payload
+ * @returns A SourceLocation, or undefined if the input is not a valid object
+ */
+export declare function parseSourceLocation(sl: unknown): SourceLocation | undefined;
+/**
+ * Derive a human-readable label from the injected source file name, if present.
+ * @param element - The DOM element
+ * @returns A label suitable for UI display
+ */
+export declare function getLabelFromSource(element: HTMLElement | null | undefined): string;
+//# sourceMappingURL=sourceUtils.d.ts.map

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

@@ -0,0 +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"}

package/dist/source-locator/react/babel/reactDesignTimeLocatorBabelPlugin.cjs

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const helperPluginUtils = require("@babel/helper-plugin-utils");
+const domAttributes = require("../../../protocol/domAttributes.cjs");
+function resolveColumn(loc, babelCode, originalSource) {
+  if (!originalSource || !babelCode) return loc.column;
+  const babelLine = babelCode.split("\n")[loc.line - 1];
+  const originalLine = originalSource.split("\n")[loc.line - 1];
+  if (!babelLine || !originalLine) return loc.column;
+  const contentFromColumn = babelLine.slice(loc.column);
+  if (contentFromColumn) {
+    const idx = originalLine.indexOf(contentFromColumn);
+    if (idx >= 0) return idx;
+  }
+  const babelIndent = babelLine.length - babelLine.trimStart().length;
+  const originalIndent = originalLine.length - originalLine.trimStart().length;
+  const offset = babelIndent - originalIndent;
+  return Math.max(0, loc.column - offset);
+}
+const reactDesignTimeLocatorBabelPlugin = helperPluginUtils.declare((api) => {
+  api.assertVersion(7);
+  const t = api.types;
+  function isReactFragmentName(nameNode) {
+    if (t.isJSXIdentifier(nameNode) && nameNode.name === "Fragment") return true;
+    if (t.isJSXMemberExpression(nameNode) && t.isJSXIdentifier(nameNode.object, { name: "React" }) && t.isJSXIdentifier(nameNode.property, { name: "Fragment" })) {
+      return true;
+    }
+    return false;
+  }
+  function hasAttr(openingElement, name) {
+    return openingElement.attributes.some((attr) => {
+      return t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name) && attr.name.name === name;
+    });
+  }
+  function addAttr(openingElement, name, value) {
+    if (hasAttr(openingElement, name)) return;
+    openingElement.attributes.push(
+      t.jsxAttribute(t.jsxIdentifier(name), t.stringLiteral(String(value)))
+    );
+  }
+  return {
+    name: "babel-plugin-react-design-time-locator",
+    visitor: {
+      JSXElement(path, state) {
+        const openingElement = path.node.openingElement;
+        if (isReactFragmentName(openingElement.name)) return;
+        if (!t.isJSXIdentifier(openingElement.name) && !t.isJSXMemberExpression(openingElement.name)) {
+          return;
+        }
+        let tagHead = "";
+        if (t.isJSXIdentifier(openingElement.name)) {
+          tagHead = openingElement.name.name;
+        } else if (t.isJSXMemberExpression(openingElement.name)) {
+          tagHead = openingElement.name.property?.name ?? "";
+        }
+        if (!tagHead) return;
+        const filename = state?.file?.opts?.filename;
+        if (!filename || filename.includes("node_modules")) return;
+        const excludePaths = state.opts?.excludePaths ?? [];
+        if (excludePaths.some((p) => filename.includes(p))) return;
+        const children = path.node.children ?? [];
+        const relevantChildren = children.filter((child) => {
+          return !(t.isJSXText(child) && child.value.trim() === "");
+        });
+        let textType = "none";
+        if (relevantChildren.length === 1) {
+          const child = relevantChildren[0];
+          if (t.isJSXText(child)) {
+            textType = "static";
+          } else if (t.isJSXExpressionContainer(child)) {
+            textType = "dynamic";
+          } else {
+            textType = "element";
+          }
+        } else if (relevantChildren.length > 1) {
+          textType = "mixed";
+        }
+        const loc = path.node.loc;
+        if (loc?.start) {
+          const originalSource = state.opts?.originalSource;
+          const column = resolveColumn(loc.start, state.file?.code, originalSource);
+          const source = `${filename}:${loc.start.line}:${column}`;
+          addAttr(openingElement, domAttributes.ATTR_SOURCE_FILE, source);
+        }
+        addAttr(openingElement, domAttributes.ATTR_TEXT_TYPE, textType);
+      }
+    }
+  };
+});
+exports.default = reactDesignTimeLocatorBabelPlugin;

package/dist/source-locator/react/babel/reactDesignTimeLocatorBabelPlugin.d.cts

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+declare const reactDesignTimeLocatorBabelPlugin: (api: object, options: Record<string, any> | null | undefined, dirname: string) => {
+    name: string;
+    visitor: {
+        JSXElement(this: import('@babel/core').PluginPass, path: any, state: any): void;
+    };
+};
+export default reactDesignTimeLocatorBabelPlugin;
+//# sourceMappingURL=reactDesignTimeLocatorBabelPlugin.d.ts.map

package/dist/source-locator/react/babel/reactDesignTimeLocatorBabelPlugin.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+declare const reactDesignTimeLocatorBabelPlugin: (api: object, options: Record<string, any> | null | undefined, dirname: string) => {
+    name: string;
+    visitor: {
+        JSXElement(this: import('@babel/core').PluginPass, path: any, state: any): void;
+    };
+};
+export default reactDesignTimeLocatorBabelPlugin;
+//# sourceMappingURL=reactDesignTimeLocatorBabelPlugin.d.ts.map

package/dist/source-locator/react/babel/reactDesignTimeLocatorBabelPlugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reactDesignTimeLocatorBabelPlugin.d.ts","sourceRoot":"","sources":["../../../../src/source-locator/react/babel/reactDesignTimeLocatorBabelPlugin.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AA6CH,QAAA,MAAM,iCAAiC;;;iEAiCnB,GAAG,SAAS,GAAG;;CA0EjC,CAAC;AAEH,eAAe,iCAAiC,CAAC"}

package/dist/source-locator/react/babel/reactDesignTimeLocatorBabelPlugin.js

@@ -0,0 +1,90 @@
+import { declare } from "@babel/helper-plugin-utils";
+import { ATTR_SOURCE_FILE, ATTR_TEXT_TYPE } from "../../../protocol/domAttributes.js";
+function resolveColumn(loc, babelCode, originalSource) {
+  if (!originalSource || !babelCode) return loc.column;
+  const babelLine = babelCode.split("\n")[loc.line - 1];
+  const originalLine = originalSource.split("\n")[loc.line - 1];
+  if (!babelLine || !originalLine) return loc.column;
+  const contentFromColumn = babelLine.slice(loc.column);
+  if (contentFromColumn) {
+    const idx = originalLine.indexOf(contentFromColumn);
+    if (idx >= 0) return idx;
+  }
+  const babelIndent = babelLine.length - babelLine.trimStart().length;
+  const originalIndent = originalLine.length - originalLine.trimStart().length;
+  const offset = babelIndent - originalIndent;
+  return Math.max(0, loc.column - offset);
+}
+const reactDesignTimeLocatorBabelPlugin = declare((api) => {
+  api.assertVersion(7);
+  const t = api.types;
+  function isReactFragmentName(nameNode) {
+    if (t.isJSXIdentifier(nameNode) && nameNode.name === "Fragment") return true;
+    if (t.isJSXMemberExpression(nameNode) && t.isJSXIdentifier(nameNode.object, { name: "React" }) && t.isJSXIdentifier(nameNode.property, { name: "Fragment" })) {
+      return true;
+    }
+    return false;
+  }
+  function hasAttr(openingElement, name) {
+    return openingElement.attributes.some((attr) => {
+      return t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name) && attr.name.name === name;
+    });
+  }
+  function addAttr(openingElement, name, value) {
+    if (hasAttr(openingElement, name)) return;
+    openingElement.attributes.push(
+      t.jsxAttribute(t.jsxIdentifier(name), t.stringLiteral(String(value)))
+    );
+  }
+  return {
+    name: "babel-plugin-react-design-time-locator",
+    visitor: {
+      JSXElement(path, state) {
+        const openingElement = path.node.openingElement;
+        if (isReactFragmentName(openingElement.name)) return;
+        if (!t.isJSXIdentifier(openingElement.name) && !t.isJSXMemberExpression(openingElement.name)) {
+          return;
+        }
+        let tagHead = "";
+        if (t.isJSXIdentifier(openingElement.name)) {
+          tagHead = openingElement.name.name;
+        } else if (t.isJSXMemberExpression(openingElement.name)) {
+          tagHead = openingElement.name.property?.name ?? "";
+        }
+        if (!tagHead) return;
+        const filename = state?.file?.opts?.filename;
+        if (!filename || filename.includes("node_modules")) return;
+        const excludePaths = state.opts?.excludePaths ?? [];
+        if (excludePaths.some((p) => filename.includes(p))) return;
+        const children = path.node.children ?? [];
+        const relevantChildren = children.filter((child) => {
+          return !(t.isJSXText(child) && child.value.trim() === "");
+        });
+        let textType = "none";
+        if (relevantChildren.length === 1) {
+          const child = relevantChildren[0];
+          if (t.isJSXText(child)) {
+            textType = "static";
+          } else if (t.isJSXExpressionContainer(child)) {
+            textType = "dynamic";
+          } else {
+            textType = "element";
+          }
+        } else if (relevantChildren.length > 1) {
+          textType = "mixed";
+        }
+        const loc = path.node.loc;
+        if (loc?.start) {
+          const originalSource = state.opts?.originalSource;
+          const column = resolveColumn(loc.start, state.file?.code, originalSource);
+          const source = `${filename}:${loc.start.line}:${column}`;
+          addAttr(openingElement, ATTR_SOURCE_FILE, source);
+        }
+        addAttr(openingElement, ATTR_TEXT_TYPE, textType);
+      }
+    }
+  };
+});
+export {
+  reactDesignTimeLocatorBabelPlugin as default
+};

package/dist/source-locator/react/index.cjs

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const reactDesignTimeLocatorBabelPlugin = require("./babel/reactDesignTimeLocatorBabelPlugin.cjs");
+exports.default = reactDesignTimeLocatorBabelPlugin.default;
+exports.reactDesignTimeLocatorBabelPlugin = reactDesignTimeLocatorBabelPlugin.default;

package/dist/source-locator/react/index.d.cts

@@ -0,0 +1,4 @@
+import { default as reactDesignTimeLocatorBabelPlugin } from './babel/reactDesignTimeLocatorBabelPlugin.cjs';
+export { reactDesignTimeLocatorBabelPlugin };
+export default reactDesignTimeLocatorBabelPlugin;
+//# sourceMappingURL=index.d.ts.map

package/dist/source-locator/react/index.d.ts

@@ -0,0 +1,4 @@
+import { default as reactDesignTimeLocatorBabelPlugin } from './babel/reactDesignTimeLocatorBabelPlugin.js';
+export { reactDesignTimeLocatorBabelPlugin };
+export default reactDesignTimeLocatorBabelPlugin;
+//# sourceMappingURL=index.d.ts.map

package/dist/source-locator/react/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/source-locator/react/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,iCAAiC,MAAM,2CAA2C,CAAC;AAE1F,OAAO,EAAE,iCAAiC,EAAE,CAAC;AAC7C,eAAe,iCAAiC,CAAC"}

package/dist/source-locator/react/index.js

@@ -0,0 +1,5 @@
+import reactDesignTimeLocatorBabelPlugin from "./babel/reactDesignTimeLocatorBabelPlugin.js";
+export {
+  reactDesignTimeLocatorBabelPlugin as default,
+  reactDesignTimeLocatorBabelPlugin
+};

package/package.json

@@ -0,0 +1,70 @@
+{
+  "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.0",
+  "license": "SEE LICENSE IN LICENSE.txt",
+  "type": "module",
+  "exports": {
+    "./protocol": {
+      "import": {
+        "types": "./dist/protocol/index.d.ts",
+        "default": "./dist/protocol/index.js"
+      },
+      "require": {
+        "types": "./dist/protocol/index.d.cts",
+        "default": "./dist/protocol/index.cjs"
+      }
+    },
+    "./source-locator/react": {
+      "import": {
+        "types": "./dist/source-locator/react/index.d.ts",
+        "default": "./dist/source-locator/react/index.js"
+      },
+      "require": {
+        "types": "./dist/source-locator/react/index.d.cts",
+        "default": "./dist/source-locator/react/index.cjs"
+      }
+    },
+    "./runtime": {
+      "import": {
+        "types": "./dist/runtime/index.d.ts",
+        "default": "./dist/runtime/index.js"
+      },
+      "require": {
+        "types": "./dist/runtime/index.d.cts",
+        "default": "./dist/runtime/index.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build && node scripts/fix-dts-extensions.mjs && node src/runtime/bundle-runtime.mjs",
+    "clean": "rm -rf dist",
+    "dev": "vite build --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
+  },
+  "dependencies": {
+    "@babel/helper-plugin-utils": "^7.28.3"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.28.4",
+    "@types/babel__core": "^7.20.5",
+    "@types/babel__helper-plugin-utils": "^7.10.3",
+    "esbuild": "^0.24.0",
+    "ts-morph": "^25.0.0",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.6"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}