@lumiastream/ui 0.3.6 → 0.3.9

package/dist/se-import.js

@@ -3656,6 +3656,29 @@ function hasMarketplaceCandidates(seWidgetType) {
   return getMarketplaceCandidates(seWidgetType).length > 0;
 }
 
+// src/se-import/substitute.ts
+function substituteSeTokens(text, data) {
+  if (typeof text !== "string" || text.length === 0) return "";
+  const keys = Object.keys(data).filter(
+    (k) => /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(k)
+  );
+  if (keys.length === 0) return text;
+  const escaped = keys.map((k) => k.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"));
+  const pattern = new RegExp(
+    "(?<![{\\\\])\\{(" + escaped.join("|") + ")\\}",
+    "g"
+  );
+  return text.replace(pattern, (_m, key) => {
+    const v = data[key];
+    if (v == null) return "";
+    if (typeof v === "object") {
+      const obj = v;
+      return String(obj.value ?? JSON.stringify(v));
+    }
+    return String(v);
+  });
+}
+
 // src/se-import/api/seClient.ts
 var SEAuthError = class extends Error {
   constructor(code, message) {
@@ -4869,7 +4892,7 @@ var humanizeVariableName = (rawName) => {
 };
 var getVariableColorClass = (variableType, isSuggested) => {
   if (isSuggested && variableType !== "func")
-    return "ls-variable-token--custom";
+    return "ls-variable-token--suggested";
   if (variableType === "func") return "ls-variable-token--function";
   if (variableType === "system") return "ls-variable-token--system";
   return "ls-variable-token--custom";
@@ -4964,24 +4987,27 @@ var LSVariableInputField = forwardRef5((props, ref) => {
   const [autoExpandPaths, setAutoExpandPaths] = useState4(
     () => /* @__PURE__ */ new Set()
   );
+  const shouldRenderPicker = !hideVariables && showVariables;
   const systemVariableValueTrees = useMemo3(() => {
     const map = /* @__PURE__ */ new Map();
+    if (!shouldRenderPicker) return map;
     Object.values(variableRecords).forEach((variable) => {
       if (variable && isExpandableValue(variable.value)) {
         map.set(variable.name, buildValueChildren(variable.value, "", 0));
       }
     });
     return map;
-  }, [variableRecords]);
+  }, [shouldRenderPicker, variableRecords]);
   const allowedExampleTrees = useMemo3(() => {
     const map = /* @__PURE__ */ new Map();
+    if (!shouldRenderPicker) return map;
     allowedVariableDefinitions.forEach((definition) => {
       if (isExpandableValue(definition.example)) {
         map.set(definition.name, buildValueChildren(definition.example, "", 0));
       }
     });
     return map;
-  }, [allowedVariableDefinitions]);
+  }, [allowedVariableDefinitions, shouldRenderPicker]);
   useEffect4(() => {
     requestTranslations?.();
   }, [requestTranslations]);
@@ -5197,6 +5223,9 @@ var LSVariableInputField = forwardRef5((props, ref) => {
     [allowedExampleTrees, getAllowedVariableRecord, systemVariableValueTrees]
   );
   useEffect4(() => {
+    if (!shouldRenderPicker) {
+      return;
+    }
     const query = (searchQuery ?? "").toLowerCase().replace("{{", "").replace("}}", "").trim();
     const nextAutoExpand = /* @__PURE__ */ new Set();
     const collectNestedAutoExpand = (rootToken, tree) => {
@@ -5313,6 +5342,7 @@ var LSVariableInputField = forwardRef5((props, ref) => {
     }
     setAutoExpandPaths(nextAutoExpand);
   }, [
+    shouldRenderPicker,
     searchQuery,
     allowedVariableDefinitions,
     allowedVariableNames,
@@ -5493,8 +5523,8 @@ var LSVariableInputField = forwardRef5((props, ref) => {
       ] })
     );
   };
-  const showSuggestedSection = allowedVariableNames.length > 0 && filteredAllowedVariables.length > 0;
-  const pickerBody = /* @__PURE__ */ jsxs5("div", { className: "ls-variable-picker ls-variable-picker--three-col", children: [
+  const showSuggestedSection = shouldRenderPicker && allowedVariableNames.length > 0 && filteredAllowedVariables.length > 0;
+  const pickerBody = shouldRenderPicker ? /* @__PURE__ */ jsxs5("div", { className: "ls-variable-picker ls-variable-picker--three-col", children: [
     /* @__PURE__ */ jsxs5("div", { className: "ls-variable-picker__intro", children: [
       /* @__PURE__ */ jsx12("div", { className: "ls-variable-picker__intro-text", children: t(
         "overlay-variables.variables-description",
@@ -5595,7 +5625,7 @@ var LSVariableInputField = forwardRef5((props, ref) => {
         ] }, variable.name);
       })
     ] })
-  ] });
+  ] }) : null;
   const textField = (params = {}) => /* @__PURE__ */ jsx12(
     VariableInputTextField,
     {
@@ -8841,5 +8871,6 @@ export {
   mirrorOneAsset,
   rewriteAssetURLs,
   streamElementsCopyJwt,
+  substituteSeTokens,
   transplantLayer
 };

package/package.json

@@ -1,138 +1,138 @@
 {
-	"name": "@lumiastream/ui",
-	"version": "0.3.6",
-	"author": "Lumia Stream",
-	"license": "ISC",
-	"description": "Lumia UI Kit",
-	"packageManager": "npm@11.9.0",
-	"type": "module",
-	"main": "dist/index.js",
-	"module": "dist/index.js",
-	"types": "dist/index.d.ts",
-	"files": [
-		"dist"
-	],
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"import": "./dist/index.js"
-		},
-		"./components": {
-			"types": "./dist/components.d.ts",
-			"import": "./dist/components.js"
-		},
-		"./LSButton": {
-			"types": "./dist/LSButton.d.ts",
-			"import": "./dist/LSButton.js"
-		},
-		"./LSCheckbox": {
-			"types": "./dist/LSCheckbox.d.ts",
-			"import": "./dist/LSCheckbox.js"
-		},
-		"./LSColorPicker": {
-			"types": "./dist/LSColorPicker.d.ts",
-			"import": "./dist/LSColorPicker.js"
-		},
-		"./LSDatePicker": {
-			"types": "./dist/LSDatePicker.d.ts",
-			"import": "./dist/LSDatePicker.js"
-		},
-		"./LSFontPicker": {
-			"types": "./dist/LSFontPicker.d.ts",
-			"import": "./dist/LSFontPicker.js"
-		},
-		"./LSInput": {
-			"types": "./dist/LSInput.d.ts",
-			"import": "./dist/LSInput.js"
-		},
-		"./LSMultiSelect": {
-			"types": "./dist/LSMultiSelect.d.ts",
-			"import": "./dist/LSMultiSelect.js"
-		},
-		"./LSRadio": {
-			"types": "./dist/LSRadio.d.ts",
-			"import": "./dist/LSRadio.js"
-		},
-		"./LSSelect": {
-			"types": "./dist/LSSelect.d.ts",
-			"import": "./dist/LSSelect.js"
-		},
-		"./LSSliderInput": {
-			"types": "./dist/LSSliderInput.d.ts",
-			"import": "./dist/LSSliderInput.js"
-		},
-		"./LSTextField": {
-			"types": "./dist/LSTextField.d.ts",
-			"import": "./dist/LSTextField.js"
-		},
-		"./LSVariableInputField": {
-			"types": "./dist/LSVariableInputField.d.ts",
-			"import": "./dist/LSVariableInputField.js"
-		},
-		"./utils": {
-			"types": "./dist/utils.d.ts",
-			"import": "./dist/utils.js"
-		},
-		"./utils/chatMedia": {
-			"types": "./dist/utils/chatMedia.d.ts",
-			"import": "./dist/utils/chatMedia.js"
-		},
-		"./se-import": {
-			"types": "./dist/se-import.d.ts",
-			"import": "./dist/se-import.js"
-		}
-	},
-	"scripts": {
-		"start": "storybook dev -p 6006",
-		"build": "tsup",
-		"build-storybook": "storybook build",
-		"watch": "tsup --watch",
-		"test": "vitest run",
-		"test:watch": "vitest",
-		"release": "changeset && changeset tag && npm run build && npm publish",
-		"prepublishOnly": "npm run build",
-		"postpublish": "npm cache clean --force && node ./scripts/postpublish-install.mjs",
-		"check-module-defaults": "tsx scripts/check-module-defaults.ts"
-	},
-	"peerDependencies": {
-		"@codemirror/autocomplete": "^6.0.0",
-		"@emotion/react": "^11.14.0",
-		"@emotion/styled": "^11.14.1",
-		"@mui/icons-material": "^9.0.0",
-		"@mui/material": "^9.0.0",
-		"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-		"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
-		"react-hook-form": "^7.62.0"
-	},
-	"devDependencies": {
-		"@codemirror/autocomplete": "^6.20.1",
-		"@emotion/react": "^11.14.0",
-		"@emotion/styled": "^11.14.1",
-		"@mui/icons-material": "^9.0.0",
-		"@mui/material": "^9.0.0",
-		"@storybook/builder-vite": "^10.2.17",
-		"@storybook/react-vite": "^10.2.17",
-		"@types/node": "^25.5.0",
-		"@types/react": "^19.2.14",
-		"@types/react-dom": "19.2.3",
-		"postcss": "^8.5.14",
-		"react": "^19.2.0",
-		"react-dom": "^19.2.0",
-		"react-hook-form": "^7.73.1",
-		"sass-embedded": "^1.99.0",
-		"storybook": "^10.2.17",
-		"tsup": "^8.5.1",
-		"tsx": "^4.22.3",
-		"typescript": "^5.9.3",
-		"vite": "^8.0.8",
-		"vitest": "^4.1.6"
-	},
-	"dependencies": {
-		"@lumiastream/lumia-translations": "1.16.0",
-		"@lumiastream/lumia-types": "^3.3.7-alpha.2",
-		"classnames": "^2.5.1",
-		"globals": "^17.4.0",
-		"nanoid": "^5.1.11",
-		"react-best-gradient-color-picker": "^3.0.14"
-	}
+  "name": "@lumiastream/ui",
+  "version": "0.3.9",
+  "author": "Lumia Stream",
+  "license": "ISC",
+  "description": "Lumia UI Kit",
+  "packageManager": "npm@11.9.0",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./components": {
+      "types": "./dist/components.d.ts",
+      "import": "./dist/components.js"
+    },
+    "./LSButton": {
+      "types": "./dist/LSButton.d.ts",
+      "import": "./dist/LSButton.js"
+    },
+    "./LSCheckbox": {
+      "types": "./dist/LSCheckbox.d.ts",
+      "import": "./dist/LSCheckbox.js"
+    },
+    "./LSColorPicker": {
+      "types": "./dist/LSColorPicker.d.ts",
+      "import": "./dist/LSColorPicker.js"
+    },
+    "./LSDatePicker": {
+      "types": "./dist/LSDatePicker.d.ts",
+      "import": "./dist/LSDatePicker.js"
+    },
+    "./LSFontPicker": {
+      "types": "./dist/LSFontPicker.d.ts",
+      "import": "./dist/LSFontPicker.js"
+    },
+    "./LSInput": {
+      "types": "./dist/LSInput.d.ts",
+      "import": "./dist/LSInput.js"
+    },
+    "./LSMultiSelect": {
+      "types": "./dist/LSMultiSelect.d.ts",
+      "import": "./dist/LSMultiSelect.js"
+    },
+    "./LSRadio": {
+      "types": "./dist/LSRadio.d.ts",
+      "import": "./dist/LSRadio.js"
+    },
+    "./LSSelect": {
+      "types": "./dist/LSSelect.d.ts",
+      "import": "./dist/LSSelect.js"
+    },
+    "./LSSliderInput": {
+      "types": "./dist/LSSliderInput.d.ts",
+      "import": "./dist/LSSliderInput.js"
+    },
+    "./LSTextField": {
+      "types": "./dist/LSTextField.d.ts",
+      "import": "./dist/LSTextField.js"
+    },
+    "./LSVariableInputField": {
+      "types": "./dist/LSVariableInputField.d.ts",
+      "import": "./dist/LSVariableInputField.js"
+    },
+    "./utils": {
+      "types": "./dist/utils.d.ts",
+      "import": "./dist/utils.js"
+    },
+    "./utils/chatMedia": {
+      "types": "./dist/utils/chatMedia.d.ts",
+      "import": "./dist/utils/chatMedia.js"
+    },
+    "./se-import": {
+      "types": "./dist/se-import.d.ts",
+      "import": "./dist/se-import.js"
+    }
+  },
+  "scripts": {
+    "start": "storybook dev -p 6006",
+    "build": "tsup",
+    "build-storybook": "storybook build",
+    "watch": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "release": "changeset && changeset tag && npm run build && npm publish",
+    "prepublishOnly": "npm run build",
+    "postpublish": "npm cache clean --force && node ./scripts/postpublish-install.mjs",
+    "check-module-defaults": "tsx scripts/check-module-defaults.ts"
+  },
+  "peerDependencies": {
+    "@codemirror/autocomplete": "^6.0.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/icons-material": "^9.0.0",
+    "@mui/material": "^9.0.0",
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-hook-form": "^7.62.0"
+  },
+  "devDependencies": {
+    "@codemirror/autocomplete": "^6.20.1",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/icons-material": "^9.0.0",
+    "@mui/material": "^9.0.0",
+    "@storybook/builder-vite": "^10.2.17",
+    "@storybook/react-vite": "^10.2.17",
+    "@types/node": "^25.5.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "19.2.3",
+    "postcss": "^8.5.14",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-hook-form": "^7.73.1",
+    "sass-embedded": "^1.99.0",
+    "storybook": "^10.2.17",
+    "tsup": "^8.5.1",
+    "tsx": "^4.22.3",
+    "typescript": "^5.9.3",
+    "vite": "^8.0.8",
+    "vitest": "^4.1.6"
+  },
+  "dependencies": {
+    "@lumiastream/lumia-translations": "1.16.0",
+    "@lumiastream/lumia-types": "^3.3.7-alpha.2",
+    "classnames": "^2.5.1",
+    "globals": "^17.4.0",
+    "nanoid": "^5.1.11",
+    "react-best-gradient-color-picker": "^3.0.14"
+  }
 }