@lumiastream/ui 0.2.3 → 0.2.4-beta.1

package/dist/index.d.ts

@@ -173,35 +173,56 @@ declare const LSTextField: React.ForwardRefExoticComponent<Omit<LSTextFieldProps
 interface IVariables {
     name: string;
     system: boolean;
+    isFunction?: boolean;
     locked?: boolean;
     origin: string;
+    pluginId?: string;
     allowedPlaces?: string[];
     description: string;
     counter?: boolean;
-    value: string | number;
+    example?: string;
+    value: string | number | boolean | null | Record<string, unknown> | unknown[];
+    hidden?: boolean;
 }
+type LSVariableDefinition = {
+    name: string;
+    description?: string;
+    origin?: string;
+    example?: unknown;
+};
 type LSVariableInputTranslate = (key: string, fallback?: string, options?: Record<string, unknown>) => string;
 type LSVariableInputContextValue = {
     systemVariables?: Record<string, unknown>;
     functionVariables?: string[];
     translate?: LSVariableInputTranslate;
     onVariableTranslationsNeeded?: () => void;
+    isOriginConnected?: (origin: string) => boolean;
+    translationKeyExists?: (key: string, namespace?: string) => boolean;
 };
 declare const LSVariableInputProvider: ({ children, value }: {
     children: ReactNode;
     value: LSVariableInputContextValue;
 }) => react_jsx_runtime.JSX.Element;
+type LSAutoCompleteOption = {
+    label?: string | number | boolean;
+    value?: unknown;
+    helperText?: string;
+    imageUrl?: string;
+    searchText?: string;
+    thumb?: string;
+    iconUrl?: string;
+    previewImageUrl?: string;
+    [key: string]: unknown;
+};
 type LSVariableInputFieldProps = {
     name?: string;
     label?: ReactNode;
     type?: string;
     isAutoComplete?: boolean;
-    autoCompleteOptions?: Array<{
-        label: string;
-        value: any;
-    }>;
+    autoCompleteOptions?: LSAutoCompleteOption[];
+    autoCompleteGroupBy?: (option: any) => string;
     hideVariables?: boolean;
-    allowedVariables?: IVariables[] | string[] | any;
+    allowedVariables?: IVariables[] | string[] | LSVariableDefinition[] | unknown[];
     disabled?: boolean;
     autoFocus?: boolean;
     inputProps?: any;
@@ -219,11 +240,23 @@ type LSVariableInputFieldProps = {
     onPopupOpen?: (e: any) => void;
     onAutocompleteKeyUp?: (e: any, value: any) => void;
     afterFilter?: (filtered: any[]) => void;
-    onChange?: (value: string) => void;
+    onChange?: (value: any) => void;
+    loading?: boolean;
+    getOptionLabel?: (option: any) => string;
+    isOptionEqualToValue?: (option: any, value: any) => boolean;
+    $disableInputChange?: boolean;
+    $getFullValueObject?: boolean;
+    $multiple?: boolean;
+    $disableCloseOnSelect?: boolean;
+    $freeSolo?: boolean;
+    $renderOption?: any;
+    allowedVariableOrigin?: string;
     systemVariables?: Record<string, unknown>;
     functionVariables?: string[];
     translate?: LSVariableInputTranslate;
     onVariableTranslationsNeeded?: () => void;
+    isOriginConnected?: (origin: string) => boolean;
+    translationKeyExists?: (key: string, namespace?: string) => boolean;
 };
 declare const LSVariableInputField: React.ForwardRefExoticComponent<LSVariableInputFieldProps & React.RefAttributes<HTMLInputElement>>;
 

package/dist/index.js

@@ -21,7 +21,7 @@ function styleInject(css, { insertAt } = {}) {
 }
 
 // src/tailwind.css
-styleInject('/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */\n@layer properties;\n:root,\n:host {\n  --color-white: #fff;\n  --spacing: 0.25rem;\n  --text-sm: 0.875rem;\n  --text-sm--line-height: calc(1.25 / 0.875);\n  --text-base: 1rem;\n  --text-base--line-height: calc(1.5 / 1);\n  --text-lg: 1.125rem;\n  --text-lg--line-height: calc(1.75 / 1.125);\n  --font-weight-medium: 500;\n  --font-weight-semibold: 600;\n  --radius-md: 0.375rem;\n  --default-transition-duration: 150ms;\n  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n.visible {\n  visibility: visible;\n}\n.absolute {\n  position: absolute;\n}\n.relative {\n  position: relative;\n}\n.static {\n  position: static;\n}\n.start {\n  inset-inline-start: var(--spacing);\n}\n.end {\n  inset-inline-end: var(--spacing);\n}\n.mb-1 {\n  margin-bottom: calc(var(--spacing) * 1);\n}\n.mb-4 {\n  margin-bottom: calc(var(--spacing) * 4);\n}\n.ml-2 {\n  margin-left: calc(var(--spacing) * 2);\n}\n.block {\n  display: block;\n}\n.contents {\n  display: contents;\n}\n.flex {\n  display: flex;\n}\n.grid {\n  display: grid;\n}\n.inline-flex {\n  display: inline-flex;\n}\n.h-6 {\n  height: calc(var(--spacing) * 6);\n}\n.h-full {\n  height: 100%;\n}\n.max-h-\\[55vh\\] {\n  max-height: 55vh;\n}\n.min-h-\\[50vh\\] {\n  min-height: 50vh;\n}\n.min-h-screen {\n  min-height: 100vh;\n}\n.w-6 {\n  width: calc(var(--spacing) * 6);\n}\n.w-\\[92vw\\] {\n  width: 92vw;\n}\n.w-full {\n  width: 100%;\n}\n.max-w-\\[600px\\] {\n  max-width: 600px;\n}\n.max-w-\\[1100px\\] {\n  max-width: 1100px;\n}\n.min-w-0 {\n  min-width: calc(var(--spacing) * 0);\n}\n.flex-1 {\n  flex: 1;\n}\n.shrink {\n  flex-shrink: 1;\n}\n.shrink-0 {\n  flex-shrink: 0;\n}\n.transform {\n  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n}\n.cursor-pointer {\n  cursor: pointer;\n}\n.grid-cols-\\[minmax\\(300px\\,1\\.5fr\\)_2fr\\] {\n  grid-template-columns: minmax(300px, 1.5fr) 2fr;\n}\n.flex-col {\n  flex-direction: column;\n}\n.flex-nowrap {\n  flex-wrap: nowrap;\n}\n.items-center {\n  align-items: center;\n}\n.items-start {\n  align-items: flex-start;\n}\n.justify-between {\n  justify-content: space-between;\n}\n.gap-2 {\n  gap: calc(var(--spacing) * 2);\n}\n.gap-8 {\n  gap: calc(var(--spacing) * 8);\n}\n.overflow-auto {\n  overflow: auto;\n}\n.overflow-hidden {\n  overflow: hidden;\n}\n.rounded {\n  border-radius: 0.25rem;\n}\n.rounded-md {\n  border-radius: var(--radius-md);\n}\n.border {\n  border-style: var(--tw-border-style);\n  border-width: 1px;\n}\n.border-b {\n  border-bottom-style: var(--tw-border-style);\n  border-bottom-width: 1px;\n}\n.border-current {\n  border-color: currentcolor;\n}\n.border-white\\/10 {\n  border-color: color-mix(in srgb, #fff 10%, transparent);\n  @supports (color: color-mix(in lab, red, red)) {\n    border-color: color-mix(in oklab, var(--color-white) 10%, transparent);\n  }\n}\n.border-white\\/25 {\n  border-color: color-mix(in srgb, #fff 25%, transparent);\n  @supports (color: color-mix(in lab, red, red)) {\n    border-color: color-mix(in oklab, var(--color-white) 25%, transparent);\n  }\n}\n.bg-\\[\\#1b1a28\\] {\n  background-color: #1b1a28;\n}\n.bg-cover {\n  background-size: cover;\n}\n.bg-center {\n  background-position: center;\n}\n.bg-no-repeat {\n  background-repeat: no-repeat;\n}\n.p-0 {\n  padding: calc(var(--spacing) * 0);\n}\n.p-6 {\n  padding: calc(var(--spacing) * 6);\n}\n.px-1 {\n  padding-inline: calc(var(--spacing) * 1);\n}\n.px-3 {\n  padding-inline: calc(var(--spacing) * 3);\n}\n.px-4 {\n  padding-inline: calc(var(--spacing) * 4);\n}\n.px-6 {\n  padding-inline: calc(var(--spacing) * 6);\n}\n.py-0 {\n  padding-block: calc(var(--spacing) * 0);\n}\n.py-1 {\n  padding-block: calc(var(--spacing) * 1);\n}\n.py-2 {\n  padding-block: calc(var(--spacing) * 2);\n}\n.py-3 {\n  padding-block: calc(var(--spacing) * 3);\n}\n.py-4 {\n  padding-block: calc(var(--spacing) * 4);\n}\n.pr-4 {\n  padding-right: calc(var(--spacing) * 4);\n}\n.text-base {\n  font-size: var(--text-base);\n  line-height: var(--tw-leading, var(--text-base--line-height));\n}\n.text-lg {\n  font-size: var(--text-lg);\n  line-height: var(--tw-leading, var(--text-lg--line-height));\n}\n.text-sm {\n  font-size: var(--text-sm);\n  line-height: var(--tw-leading, var(--text-sm--line-height));\n}\n.text-\\[10px\\] {\n  font-size: 10px;\n}\n.leading-\\[1\\.25\\] {\n  --tw-leading: 1.25;\n  line-height: 1.25;\n}\n.leading-none {\n  --tw-leading: 1;\n  line-height: 1;\n}\n.font-medium {\n  --tw-font-weight: var(--font-weight-medium);\n  font-weight: var(--font-weight-medium);\n}\n.font-semibold {\n  --tw-font-weight: var(--font-weight-semibold);\n  font-weight: var(--font-weight-semibold);\n}\n.break-words {\n  overflow-wrap: break-word;\n}\n.break-all {\n  word-break: break-all;\n}\n.text-ellipsis {\n  text-overflow: ellipsis;\n}\n.whitespace-nowrap {\n  white-space: nowrap;\n}\n.text-\\[\\#f4f3ff\\] {\n  color: #f4f3ff;\n}\n.text-\\[var\\(--customVariables\\,\\#69ffd2\\)\\] {\n  color: var(--customVariables,#69ffd2);\n}\n.text-\\[var\\(--functionVariables\\,var\\(--semanticPurple\\,\\#b489ff\\)\\)\\] {\n  color: var(--functionVariables,var(--semanticPurple,#b489ff));\n}\n.text-\\[var\\(--neutralLight1\\,\\#f4f3ff\\)\\] {\n  color: var(--neutralLight1,#f4f3ff);\n}\n.text-\\[var\\(--neutralLight2\\,\\#cac9d5\\)\\] {\n  color: var(--neutralLight2,#cac9d5);\n}\n.text-\\[var\\(--neutralLight3\\,\\#9392a1\\)\\] {\n  color: var(--neutralLight3,#9392a1);\n}\n.text-\\[var\\(--normalVariables\\,var\\(--semanticBlue\\,\\#65b8ff\\)\\)\\] {\n  color: var(--normalVariables,var(--semanticBlue,#65b8ff));\n}\n.uppercase {\n  text-transform: uppercase;\n}\n.shadow-\\[0_0_0_1px_rgba\\(0\\,0\\,0\\,0\\.25\\)\\] {\n  --tw-shadow: 0 0 0 1px var(--tw-shadow-color, rgba(0,0,0,0.25));\n  box-shadow:\n    var(--tw-inset-shadow),\n    var(--tw-inset-ring-shadow),\n    var(--tw-ring-offset-shadow),\n    var(--tw-ring-shadow),\n    var(--tw-shadow);\n}\n.shadow-\\[0_8px_18px_rgba\\(0\\,0\\,0\\,0\\.18\\)\\] {\n  --tw-shadow: 0 8px 18px var(--tw-shadow-color, rgba(0,0,0,0.18));\n  box-shadow:\n    var(--tw-inset-shadow),\n    var(--tw-inset-ring-shadow),\n    var(--tw-ring-offset-shadow),\n    var(--tw-ring-shadow),\n    var(--tw-shadow);\n}\n.filter {\n  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n}\n.transition {\n  transition-property:\n    color,\n    background-color,\n    border-color,\n    outline-color,\n    text-decoration-color,\n    fill,\n    stroke,\n    --tw-gradient-from,\n    --tw-gradient-via,\n    --tw-gradient-to,\n    opacity,\n    box-shadow,\n    transform,\n    translate,\n    scale,\n    rotate,\n    filter,\n    -webkit-backdrop-filter,\n    backdrop-filter,\n    display,\n    content-visibility,\n    overlay,\n    pointer-events;\n  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n  transition-duration: var(--tw-duration, var(--default-transition-duration));\n}\n.\\[--neutralDark1\\:\\#1b1a28\\] {\n  --neutralDark1: #1b1a28;\n}\n.\\[--neutralDark2\\:\\#252338\\] {\n  --neutralDark2: #252338;\n}\n.\\[--neutralDark3\\:\\#312f47\\] {\n  --neutralDark3: #312f47;\n}\n.\\[--neutralDark4\\:\\#46435f\\] {\n  --neutralDark4: #46435f;\n}\n.\\[--neutralLight1\\:\\#f4f3ff\\] {\n  --neutralLight1: #f4f3ff;\n}\n.\\[--neutralLight2\\:\\#cac9d5\\] {\n  --neutralLight2: #cac9d5;\n}\n.\\[--neutralLight3\\:\\#9f9eb2\\] {\n  --neutralLight3: #9f9eb2;\n}\n.\\[--primary\\:\\#ff4076\\] {\n  --primary: #ff4076;\n}\n.\\[--radiusContainer\\:12px\\] {\n  --radiusContainer: 12px;\n}\n.\\[--radiusContainerSm\\:10px\\] {\n  --radiusContainerSm: 10px;\n}\n.\\[--secondary\\:\\#5f5dff\\] {\n  --secondary: #5f5dff;\n}\n.\\[--variable-custom-color\\:var\\(--customVariables\\,\\#69ffd2\\)\\] {\n  --variable-custom-color: var(--customVariables,#69ffd2);\n}\n.\\[--variable-function-color\\:var\\(--functionVariables\\,var\\(--semanticPurple\\,\\#b489ff\\)\\)\\] {\n  --variable-function-color: var(--functionVariables,var(--semanticPurple,#b489ff));\n}\n.\\[--variable-normal-color\\:var\\(--normalVariables\\,var\\(--semanticBlue\\,\\#65b8ff\\)\\)\\] {\n  --variable-normal-color: var(--normalVariables,var(--semanticBlue,#65b8ff));\n}\n.hover\\:brightness-110 {\n  &:hover {\n    @media (hover: hover) {\n      --tw-brightness: brightness(110%);\n      filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n    }\n  }\n}\n.focus\\:ring-2 {\n  &:focus {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow:\n      var(--tw-inset-shadow),\n      var(--tw-inset-ring-shadow),\n      var(--tw-ring-offset-shadow),\n      var(--tw-ring-shadow),\n      var(--tw-shadow);\n  }\n}\n.focus\\:ring-\\[var\\(--primary\\,\\#ff4076\\)\\] {\n  &:focus {\n    --tw-ring-color: var(--primary,#ff4076);\n  }\n}\n.focus\\:ring-offset-2 {\n  &:focus {\n    --tw-ring-offset-width: 2px;\n    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  }\n}\n.focus\\:ring-offset-\\[var\\(--neutralDark1\\,\\#1b1a28\\)\\] {\n  &:focus {\n    --tw-ring-offset-color: var(--neutralDark1,#1b1a28);\n  }\n}\n.focus\\:outline-none {\n  &:focus {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n}\n.active\\:opacity-80 {\n  &:active {\n    opacity: 80%;\n  }\n}\n.active\\:brightness-95 {\n  &:active {\n    --tw-brightness: brightness(95%);\n    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n  }\n}\n.disabled\\:cursor-not-allowed {\n  &:disabled {\n    cursor: not-allowed;\n  }\n}\n.disabled\\:opacity-50 {\n  &:disabled {\n    opacity: 50%;\n  }\n}\n.\\[\\&_circle\\]\\:stroke-white {\n  & circle {\n    stroke: var(--color-white);\n  }\n}\n.\\[\\&_polyline\\]\\:stroke-white {\n  & polyline {\n    stroke: var(--color-white);\n  }\n}\n@property --tw-rotate-x { syntax: "*"; inherits: false; }\n@property --tw-rotate-y { syntax: "*"; inherits: false; }\n@property --tw-rotate-z { syntax: "*"; inherits: false; }\n@property --tw-skew-x { syntax: "*"; inherits: false; }\n@property --tw-skew-y { syntax: "*"; inherits: false; }\n@property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }\n@property --tw-leading { syntax: "*"; inherits: false; }\n@property --tw-font-weight { syntax: "*"; inherits: false; }\n@property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-ring-color { syntax: "*"; inherits: false; }\n@property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-ring-color { syntax: "*"; inherits: false; }\n@property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-ring-inset { syntax: "*"; inherits: false; }\n@property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0px; }\n@property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }\n@property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-blur { syntax: "*"; inherits: false; }\n@property --tw-brightness { syntax: "*"; inherits: false; }\n@property --tw-contrast { syntax: "*"; inherits: false; }\n@property --tw-grayscale { syntax: "*"; inherits: false; }\n@property --tw-hue-rotate { syntax: "*"; inherits: false; }\n@property --tw-invert { syntax: "*"; inherits: false; }\n@property --tw-opacity { syntax: "*"; inherits: false; }\n@property --tw-saturate { syntax: "*"; inherits: false; }\n@property --tw-sepia { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-drop-shadow-size { syntax: "*"; inherits: false; }\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *,\n    ::before,\n    ::after,\n    ::backdrop {\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-border-style: solid;\n      --tw-leading: initial;\n      --tw-font-weight: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-blur: initial;\n      --tw-brightness: initial;\n      --tw-contrast: initial;\n      --tw-grayscale: initial;\n      --tw-hue-rotate: initial;\n      --tw-invert: initial;\n      --tw-opacity: initial;\n      --tw-saturate: initial;\n      --tw-sepia: initial;\n      --tw-drop-shadow: initial;\n      --tw-drop-shadow-color: initial;\n      --tw-drop-shadow-alpha: 100%;\n      --tw-drop-shadow-size: initial;\n    }\n  }\n}\n');
+styleInject('/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */\n@layer properties;\n:root,\n:host {\n  --color-white: #fff;\n  --spacing: 0.25rem;\n  --text-xs: 0.75rem;\n  --text-xs--line-height: calc(1 / 0.75);\n  --text-sm: 0.875rem;\n  --text-sm--line-height: calc(1.25 / 0.875);\n  --text-base: 1rem;\n  --text-base--line-height: calc(1.5 / 1);\n  --text-lg: 1.125rem;\n  --text-lg--line-height: calc(1.75 / 1.125);\n  --font-weight-medium: 500;\n  --font-weight-semibold: 600;\n  --font-weight-bold: 700;\n  --radius-sm: 0.25rem;\n  --radius-md: 0.375rem;\n  --default-transition-duration: 150ms;\n  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n.visible {\n  visibility: visible;\n}\n.absolute {\n  position: absolute;\n}\n.relative {\n  position: relative;\n}\n.static {\n  position: static;\n}\n.start {\n  inset-inline-start: var(--spacing);\n}\n.end {\n  inset-inline-end: var(--spacing);\n}\n.m-0 {\n  margin: calc(var(--spacing) * 0);\n}\n.mb-1 {\n  margin-bottom: calc(var(--spacing) * 1);\n}\n.mb-2 {\n  margin-bottom: calc(var(--spacing) * 2);\n}\n.ml-2 {\n  margin-left: calc(var(--spacing) * 2);\n}\n.block {\n  display: block;\n}\n.contents {\n  display: contents;\n}\n.flex {\n  display: flex;\n}\n.grid {\n  display: grid;\n}\n.hidden {\n  display: none;\n}\n.inline-block {\n  display: inline-block;\n}\n.inline-flex {\n  display: inline-flex;\n}\n.h-5 {\n  height: calc(var(--spacing) * 5);\n}\n.h-6 {\n  height: calc(var(--spacing) * 6);\n}\n.h-8 {\n  height: calc(var(--spacing) * 8);\n}\n.h-full {\n  height: 100%;\n}\n.max-h-\\[55vh\\] {\n  max-height: 55vh;\n}\n.min-h-\\[50vh\\] {\n  min-height: 50vh;\n}\n.min-h-screen {\n  min-height: 100vh;\n}\n.w-5 {\n  width: calc(var(--spacing) * 5);\n}\n.w-6 {\n  width: calc(var(--spacing) * 6);\n}\n.w-8 {\n  width: calc(var(--spacing) * 8);\n}\n.w-\\[92vw\\] {\n  width: 92vw;\n}\n.w-full {\n  width: 100%;\n}\n.max-w-\\[600px\\] {\n  max-width: 600px;\n}\n.max-w-\\[1100px\\] {\n  max-width: 1100px;\n}\n.min-w-0 {\n  min-width: calc(var(--spacing) * 0);\n}\n.flex-1 {\n  flex: 1;\n}\n.shrink {\n  flex-shrink: 1;\n}\n.shrink-0 {\n  flex-shrink: 0;\n}\n.transform {\n  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n}\n.cursor-pointer {\n  cursor: pointer;\n}\n.grid-cols-\\[minmax\\(260px\\,1\\.5fr\\)_2fr_minmax\\(140px\\,1fr\\)\\] {\n  grid-template-columns: minmax(260px, 1.5fr) 2fr minmax(140px, 1fr);\n}\n.flex-col {\n  flex-direction: column;\n}\n.flex-nowrap {\n  flex-wrap: nowrap;\n}\n.items-center {\n  align-items: center;\n}\n.justify-between {\n  justify-content: space-between;\n}\n.justify-center {\n  justify-content: center;\n}\n.gap-1 {\n  gap: calc(var(--spacing) * 1);\n}\n.gap-2 {\n  gap: calc(var(--spacing) * 2);\n}\n.gap-4 {\n  gap: calc(var(--spacing) * 4);\n}\n.overflow-auto {\n  overflow: auto;\n}\n.overflow-hidden {\n  overflow: hidden;\n}\n.rounded {\n  border-radius: 0.25rem;\n}\n.rounded-md {\n  border-radius: var(--radius-md);\n}\n.rounded-sm {\n  border-radius: var(--radius-sm);\n}\n.border {\n  border-style: var(--tw-border-style);\n  border-width: 1px;\n}\n.border-0 {\n  border-style: var(--tw-border-style);\n  border-width: 0px;\n}\n.border-2 {\n  border-style: var(--tw-border-style);\n  border-width: 2px;\n}\n.border-b {\n  border-bottom-style: var(--tw-border-style);\n  border-bottom-width: 1px;\n}\n.border-b-0 {\n  border-bottom-style: var(--tw-border-style);\n  border-bottom-width: 0px;\n}\n.border-solid {\n  --tw-border-style: solid;\n  border-style: solid;\n}\n.border-\\[var\\(--neutralDark4\\,\\#393853\\)\\] {\n  border-color: var(--neutralDark4,#393853);\n}\n.border-current {\n  border-color: currentcolor;\n}\n.border-white\\/10 {\n  border-color: color-mix(in srgb, #fff 10%, transparent);\n  @supports (color: color-mix(in lab, red, red)) {\n    border-color: color-mix(in oklab, var(--color-white) 10%, transparent);\n  }\n}\n.border-white\\/25 {\n  border-color: color-mix(in srgb, #fff 25%, transparent);\n  @supports (color: color-mix(in lab, red, red)) {\n    border-color: color-mix(in oklab, var(--color-white) 25%, transparent);\n  }\n}\n.border-b-\\[var\\(--neutralDark4\\,\\#393853\\)\\] {\n  border-bottom-color: var(--neutralDark4,#393853);\n}\n.bg-\\[\\#1b1a28\\] {\n  background-color: #1b1a28;\n}\n.bg-\\[var\\(--primary\\)\\]\\/10 {\n  background-color: var(--primary);\n  @supports (color: color-mix(in lab, red, red)) {\n    background-color: color-mix(in oklab, var(--primary) 10%, transparent);\n  }\n}\n.bg-transparent {\n  background-color: transparent;\n}\n.bg-cover {\n  background-size: cover;\n}\n.bg-center {\n  background-position: center;\n}\n.bg-no-repeat {\n  background-repeat: no-repeat;\n}\n.object-cover {\n  object-fit: cover;\n}\n.p-0 {\n  padding: calc(var(--spacing) * 0);\n}\n.p-2 {\n  padding: calc(var(--spacing) * 2);\n}\n.p-6 {\n  padding: calc(var(--spacing) * 6);\n}\n.px-1 {\n  padding-inline: calc(var(--spacing) * 1);\n}\n.px-2 {\n  padding-inline: calc(var(--spacing) * 2);\n}\n.px-3 {\n  padding-inline: calc(var(--spacing) * 3);\n}\n.px-4 {\n  padding-inline: calc(var(--spacing) * 4);\n}\n.px-6 {\n  padding-inline: calc(var(--spacing) * 6);\n}\n.py-1 {\n  padding-block: calc(var(--spacing) * 1);\n}\n.py-2 {\n  padding-block: calc(var(--spacing) * 2);\n}\n.py-3 {\n  padding-block: calc(var(--spacing) * 3);\n}\n.py-\\[1px\\] {\n  padding-block: 1px;\n}\n.pt-0 {\n  padding-top: calc(var(--spacing) * 0);\n}\n.pt-2 {\n  padding-top: calc(var(--spacing) * 2);\n}\n.pr-4 {\n  padding-right: calc(var(--spacing) * 4);\n}\n.pb-0 {\n  padding-bottom: calc(var(--spacing) * 0);\n}\n.pb-2 {\n  padding-bottom: calc(var(--spacing) * 2);\n}\n.text-base {\n  font-size: var(--text-base);\n  line-height: var(--tw-leading, var(--text-base--line-height));\n}\n.text-lg {\n  font-size: var(--text-lg);\n  line-height: var(--tw-leading, var(--text-lg--line-height));\n}\n.text-sm {\n  font-size: var(--text-sm);\n  line-height: var(--tw-leading, var(--text-sm--line-height));\n}\n.text-xs {\n  font-size: var(--text-xs);\n  line-height: var(--tw-leading, var(--text-xs--line-height));\n}\n.text-\\[10px\\] {\n  font-size: 10px;\n}\n.leading-none {\n  --tw-leading: 1;\n  line-height: 1;\n}\n.font-bold {\n  --tw-font-weight: var(--font-weight-bold);\n  font-weight: var(--font-weight-bold);\n}\n.font-medium {\n  --tw-font-weight: var(--font-weight-medium);\n  font-weight: var(--font-weight-medium);\n}\n.font-semibold {\n  --tw-font-weight: var(--font-weight-semibold);\n  font-weight: var(--font-weight-semibold);\n}\n.break-words {\n  overflow-wrap: break-word;\n}\n.break-all {\n  word-break: break-all;\n}\n.text-ellipsis {\n  text-overflow: ellipsis;\n}\n.whitespace-nowrap {\n  white-space: nowrap;\n}\n.text-\\[\\#f4f3ff\\] {\n  color: #f4f3ff;\n}\n.text-\\[var\\(--childVariables\\,\\#ffa66e\\)\\] {\n  color: var(--childVariables,#ffa66e);\n}\n.text-\\[var\\(--customVariables\\,\\#69ffd2\\)\\] {\n  color: var(--customVariables,#69ffd2);\n}\n.text-\\[var\\(--functionVariables\\,\\#b47eea\\)\\] {\n  color: var(--functionVariables,#b47eea);\n}\n.text-\\[var\\(--neutralLight1\\,\\#f4f3ff\\)\\] {\n  color: var(--neutralLight1,#f4f3ff);\n}\n.text-\\[var\\(--neutralLight2\\,\\#cac9d5\\)\\] {\n  color: var(--neutralLight2,#cac9d5);\n}\n.text-\\[var\\(--neutralLight3\\,\\#9392a1\\)\\] {\n  color: var(--neutralLight3,#9392a1);\n}\n.text-\\[var\\(--normalVariables\\,\\#69a5ff\\)\\] {\n  color: var(--normalVariables,#69a5ff);\n}\n.uppercase {\n  text-transform: uppercase;\n}\n.shadow-\\[0_0_0_1px_rgba\\(0\\,0\\,0\\,0\\.25\\)\\] {\n  --tw-shadow: 0 0 0 1px var(--tw-shadow-color, rgba(0,0,0,0.25));\n  box-shadow:\n    var(--tw-inset-shadow),\n    var(--tw-inset-ring-shadow),\n    var(--tw-ring-offset-shadow),\n    var(--tw-ring-shadow),\n    var(--tw-shadow);\n}\n.shadow-\\[0_8px_18px_rgba\\(0\\,0\\,0\\,0\\.18\\)\\] {\n  --tw-shadow: 0 8px 18px var(--tw-shadow-color, rgba(0,0,0,0.18));\n  box-shadow:\n    var(--tw-inset-shadow),\n    var(--tw-inset-ring-shadow),\n    var(--tw-ring-offset-shadow),\n    var(--tw-ring-shadow),\n    var(--tw-shadow);\n}\n.filter {\n  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n}\n.transition {\n  transition-property:\n    color,\n    background-color,\n    border-color,\n    outline-color,\n    text-decoration-color,\n    fill,\n    stroke,\n    --tw-gradient-from,\n    --tw-gradient-via,\n    --tw-gradient-to,\n    opacity,\n    box-shadow,\n    transform,\n    translate,\n    scale,\n    rotate,\n    filter,\n    -webkit-backdrop-filter,\n    backdrop-filter,\n    display,\n    content-visibility,\n    overlay,\n    pointer-events;\n  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n  transition-duration: var(--tw-duration, var(--default-transition-duration));\n}\n.\\[--neutralDark1\\:\\#1b1a28\\] {\n  --neutralDark1: #1b1a28;\n}\n.\\[--neutralDark2\\:\\#252338\\] {\n  --neutralDark2: #252338;\n}\n.\\[--neutralDark3\\:\\#312f47\\] {\n  --neutralDark3: #312f47;\n}\n.\\[--neutralDark4\\:\\#46435f\\] {\n  --neutralDark4: #46435f;\n}\n.\\[--neutralLight1\\:\\#f4f3ff\\] {\n  --neutralLight1: #f4f3ff;\n}\n.\\[--neutralLight2\\:\\#cac9d5\\] {\n  --neutralLight2: #cac9d5;\n}\n.\\[--neutralLight3\\:\\#9f9eb2\\] {\n  --neutralLight3: #9f9eb2;\n}\n.\\[--primary\\:\\#ff4076\\] {\n  --primary: #ff4076;\n}\n.\\[--radiusContainer\\:12px\\] {\n  --radiusContainer: 12px;\n}\n.\\[--radiusContainerSm\\:10px\\] {\n  --radiusContainerSm: 10px;\n}\n.\\[--secondary\\:\\#5f5dff\\] {\n  --secondary: #5f5dff;\n}\n.last-of-type\\:border-b-0 {\n  &:last-of-type {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 0px;\n  }\n}\n.hover\\:bg-\\[var\\(--neutralDark2\\,\\#1f1d36\\)\\]\\/40 {\n  &:hover {\n    @media (hover: hover) {\n      background-color: var(--neutralDark2,#1f1d36);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--neutralDark2,#1f1d36) 40%, transparent);\n      }\n    }\n  }\n}\n.hover\\:bg-\\[var\\(--neutralDark4\\,\\#393853\\)\\]\\/50 {\n  &:hover {\n    @media (hover: hover) {\n      background-color: var(--neutralDark4,#393853);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--neutralDark4,#393853) 50%, transparent);\n      }\n    }\n  }\n}\n.hover\\:bg-\\[var\\(--primary\\)\\]\\/20 {\n  &:hover {\n    @media (hover: hover) {\n      background-color: var(--primary);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--primary) 20%, transparent);\n      }\n    }\n  }\n}\n.hover\\:brightness-110 {\n  &:hover {\n    @media (hover: hover) {\n      --tw-brightness: brightness(110%);\n      filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n    }\n  }\n}\n.focus\\:ring-2 {\n  &:focus {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow:\n      var(--tw-inset-shadow),\n      var(--tw-inset-ring-shadow),\n      var(--tw-ring-offset-shadow),\n      var(--tw-ring-shadow),\n      var(--tw-shadow);\n  }\n}\n.focus\\:ring-\\[var\\(--primary\\,\\#ff4076\\)\\] {\n  &:focus {\n    --tw-ring-color: var(--primary,#ff4076);\n  }\n}\n.focus\\:ring-offset-2 {\n  &:focus {\n    --tw-ring-offset-width: 2px;\n    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  }\n}\n.focus\\:ring-offset-\\[var\\(--neutralDark1\\,\\#1b1a28\\)\\] {\n  &:focus {\n    --tw-ring-offset-color: var(--neutralDark1,#1b1a28);\n  }\n}\n.focus\\:outline-none {\n  &:focus {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n}\n.active\\:opacity-80 {\n  &:active {\n    opacity: 80%;\n  }\n}\n.active\\:brightness-95 {\n  &:active {\n    --tw-brightness: brightness(95%);\n    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n  }\n}\n.disabled\\:cursor-not-allowed {\n  &:disabled {\n    cursor: not-allowed;\n  }\n}\n.disabled\\:opacity-50 {\n  &:disabled {\n    opacity: 50%;\n  }\n}\n.\\[\\&_circle\\]\\:stroke-white {\n  & circle {\n    stroke: var(--color-white);\n  }\n}\n.\\[\\&_polyline\\]\\:stroke-white {\n  & polyline {\n    stroke: var(--color-white);\n  }\n}\n@property --tw-rotate-x { syntax: "*"; inherits: false; }\n@property --tw-rotate-y { syntax: "*"; inherits: false; }\n@property --tw-rotate-z { syntax: "*"; inherits: false; }\n@property --tw-skew-x { syntax: "*"; inherits: false; }\n@property --tw-skew-y { syntax: "*"; inherits: false; }\n@property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }\n@property --tw-leading { syntax: "*"; inherits: false; }\n@property --tw-font-weight { syntax: "*"; inherits: false; }\n@property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-ring-color { syntax: "*"; inherits: false; }\n@property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-ring-color { syntax: "*"; inherits: false; }\n@property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-ring-inset { syntax: "*"; inherits: false; }\n@property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0px; }\n@property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }\n@property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-blur { syntax: "*"; inherits: false; }\n@property --tw-brightness { syntax: "*"; inherits: false; }\n@property --tw-contrast { syntax: "*"; inherits: false; }\n@property --tw-grayscale { syntax: "*"; inherits: false; }\n@property --tw-hue-rotate { syntax: "*"; inherits: false; }\n@property --tw-invert { syntax: "*"; inherits: false; }\n@property --tw-opacity { syntax: "*"; inherits: false; }\n@property --tw-saturate { syntax: "*"; inherits: false; }\n@property --tw-sepia { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-drop-shadow-size { syntax: "*"; inherits: false; }\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *,\n    ::before,\n    ::after,\n    ::backdrop {\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-border-style: solid;\n      --tw-leading: initial;\n      --tw-font-weight: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-blur: initial;\n      --tw-brightness: initial;\n      --tw-contrast: initial;\n      --tw-grayscale: initial;\n      --tw-hue-rotate: initial;\n      --tw-invert: initial;\n      --tw-opacity: initial;\n      --tw-saturate: initial;\n      --tw-sepia: initial;\n      --tw-drop-shadow: initial;\n      --tw-drop-shadow-color: initial;\n      --tw-drop-shadow-alpha: 100%;\n      --tw-drop-shadow-size: initial;\n    }\n  }\n}\n');
 
 // src/components/LSButton/LSButton.tsx
 import { jsx } from "react/jsx-runtime";
@@ -947,10 +947,13 @@ LSTextField.displayName = "LSTextField";
 // src/components/LSVariableInputField/LSVariableInputField.tsx
 import Autocomplete2, { createFilterOptions } from "@mui/material/Autocomplete";
 import InputAdornment2 from "@mui/material/InputAdornment";
-import Search from "@mui/icons-material/Search";
 import Popover from "@mui/material/Popover";
-import { createContext, forwardRef as forwardRef4, useCallback as useCallback2, useContext, useEffect as useEffect4, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react";
-import { Fragment, jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+import Search from "@mui/icons-material/Search";
+import ArrowRight from "@mui/icons-material/ArrowRight";
+import Tooltip from "@mui/material/Tooltip";
+import { Fragment, createContext, forwardRef as forwardRef4, useCallback as useCallback2, useContext, useEffect as useEffect4, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react";
+import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+import { createElement } from "react";
 var LSVariableInputContext = createContext({});
 var LSVariableInputProvider = ({ children, value }) => {
   return /* @__PURE__ */ jsx11(LSVariableInputContext.Provider, { value, children });
@@ -971,8 +974,8 @@ var DEFAULT_FUNCTION_VARIABLES = [
   "screenshot",
   "overlay_screenshot",
   "obs_screenshot",
-  "obs_replay",
   "obs_vertical_replay",
+  "obs_replay",
   "get_queue_count",
   "lumia_uptime",
   "twitch_uptime",
@@ -987,15 +990,100 @@ var DEFAULT_FUNCTION_VARIABLES = [
   "ai_prompt",
   "viewer_profile_summary"
 ];
-var filter = createFilterOptions();
-var isNully = (value) => value === null || value === void 0;
+var MAX_OBJECT_DEPTH = 5;
+var isPlainObject = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+var isExpandableValue = (value) => {
+  if (isPlainObject(value)) return Object.keys(value).length > 0;
+  if (Array.isArray(value)) return value.length > 0;
+  return false;
+};
+var isPrimitiveValue = (value) => value === null || typeof value === "string" || typeof value === "number" || typeof value === "boolean";
+var renderPrimitiveValue = (value) => {
+  if (value === null || value === void 0) return "";
+  if (typeof value === "boolean") return value.toString();
+  if (typeof value === "number") return value.toString();
+  if (typeof value === "string") return value;
+  return String(value);
+};
+var renderComplexPreview = (value) => {
+  if (Array.isArray(value)) {
+    return `Array(${value.length}) [${value.slice(0, 3).map((item) => typeof item === "string" ? `"${item}"` : typeof item === "object" ? "{...}" : String(item)).join(", ")}${value.length > 3 ? "..." : ""}]`;
+  }
+  const keys = Object.keys(value);
+  return `Object {${keys.slice(0, 2).join(", ")}${keys.length > 2 ? "..." : ""}}`;
+};
+var getVariableValueDisplay = (value) => {
+  const isComplexValue = !isPrimitiveValue(value) && value !== null && typeof value === "object";
+  const displayValue = isComplexValue ? renderComplexPreview(value) : renderPrimitiveValue(value);
+  const fullValue = isComplexValue ? JSON.stringify(value, null, 2) : renderPrimitiveValue(value);
+  return { displayValue, fullValue, isComplexValue };
+};
+var buildValueChildren = (value, parentPath, depth) => {
+  if (depth >= MAX_OBJECT_DEPTH) return [];
+  if (isPlainObject(value)) {
+    return Object.keys(value).map((key) => {
+      const childValue = value[key];
+      const relativePath = parentPath ? `${parentPath}.${key}` : key;
+      const expandable = depth + 1 < MAX_OBJECT_DEPTH && isExpandableValue(childValue);
+      return {
+        relativePath,
+        key,
+        displayKey: key,
+        depth: depth + 1,
+        value: childValue,
+        isExpandable: expandable,
+        children: expandable ? buildValueChildren(childValue, relativePath, depth + 1) : []
+      };
+    });
+  }
+  if (Array.isArray(value)) {
+    return value.map((item, idx) => {
+      const relativePath = parentPath ? `${parentPath}.${idx}` : String(idx);
+      const expandable = depth + 1 < MAX_OBJECT_DEPTH && isExpandableValue(item);
+      return {
+        relativePath,
+        key: String(idx),
+        displayKey: `[${idx}]`,
+        depth: depth + 1,
+        value: item,
+        isExpandable: expandable,
+        children: expandable ? buildValueChildren(item, relativePath, depth + 1) : []
+      };
+    });
+  }
+  return [];
+};
+var isVariableRecord = (value) => {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return false;
+  const v = value;
+  return typeof v.name === "string" && ("system" in v || "origin" in v || "value" in v);
+};
+var synthesizeRecord = (name, value) => ({
+  name,
+  system: false,
+  origin: "",
+  description: "",
+  value: value ?? ""
+});
+var normalizeVariableRecords = (systemVariables) => {
+  const out = {};
+  if (!systemVariables) return out;
+  for (const [key, raw] of Object.entries(systemVariables)) {
+    if (raw === void 0 || raw === null) continue;
+    out[key] = isVariableRecord(raw) ? raw : synthesizeRecord(key, raw);
+  }
+  return out;
+};
 var defaultTranslate = (key, fallback, options) => {
   if (fallback && fallback !== "-") return fallback;
   if (key === "overlay-variables.variables-description") return "Use variables that will automatically be replaced before sending out the text";
-  if (key === "overlay-variables.variable") return "Variable";
-  if (key === "overlay-variables.description") return "Description";
-  if (key === "assets.search") return "Search";
+  if (key === "overlay-variables.variable" || key === "commands.variable") return "Variable";
+  if (key === "overlay-variables.description" || key === "commands.description") return "Description";
+  if (key === "commands.suggested-variables") return "Suggested Variables";
+  if (key === "common.value") return "Value";
+  if (key === "common.search" || key === "assets.search") return "Search";
   if (key === "variables.functionvariables") return "Function variables";
+  if (key === "chatbot.allowed-variables") return "Allowed Variables";
   if (key.startsWith("variables.")) {
     const variableName = key.replace("variables.", "");
     const example = options?.example;
@@ -1010,6 +1098,8 @@ var normalizeAllowedDefinitions = (allowedVariables) => {
   allowedVariables.forEach((variable) => {
     let variableName = "";
     let description;
+    let origin;
+    let example;
     if (typeof variable === "string") {
       variableName = variable.trim();
     } else if (variable && typeof variable === "object") {
@@ -1017,13 +1107,57 @@ var normalizeAllowedDefinitions = (allowedVariables) => {
       const candidateName = [typedVariable.name, typedVariable.key, typedVariable.variable].find((value) => typeof value === "string");
       variableName = typeof candidateName === "string" ? candidateName.trim() : "";
       description = typeof typedVariable.description === "string" ? typedVariable.description.trim() : void 0;
+      origin = typeof typedVariable.origin === "string" ? typedVariable.origin.trim().toLowerCase() : void 0;
+      example = typedVariable.example;
     }
     if (!variableName || unique.has(variableName)) return;
     unique.add(variableName);
-    definitions.push({ name: variableName, description });
+    definitions.push({ name: variableName, description, origin, example });
   });
   return definitions;
 };
+var filter = createFilterOptions({
+  stringify: (option) => {
+    if (typeof option === "string") return option;
+    if (typeof option === "number" || typeof option === "boolean" || typeof option === "bigint") return String(option);
+    if (!option || typeof option !== "object") return "";
+    const typed = option;
+    return [typed.label, typed.value, typed.helperText, typed.searchText].filter((value) => typeof value === "string" || typeof value === "number" || typeof value === "boolean").map((value) => String(value)).join(" ");
+  }
+});
+var visualTypeFromRecord = (variable) => {
+  if (variable?.isFunction) return "func";
+  if (variable?.system || variable?.locked) return "system";
+  return "custom";
+};
+var visualTypeRank = (variableType) => {
+  if (variableType === "custom") return 0;
+  if (variableType === "func") return 1;
+  return 2;
+};
+var orderItemsByVariableType = (items, getType) => {
+  const grouped = { custom: [], func: [], system: [] };
+  items.forEach((item) => grouped[getType(item)].push(item));
+  return [...grouped.custom, ...grouped.func, ...grouped.system];
+};
+var sortItemsByVariableTypeThenName = (items, getType, getName) => {
+  return [...items].sort((a, b) => {
+    const typeDiff = visualTypeRank(getType(a)) - visualTypeRank(getType(b));
+    if (typeDiff !== 0) return typeDiff;
+    return getName(a).localeCompare(getName(b));
+  });
+};
+var humanizeVariableName = (rawName) => {
+  if (!rawName) return "";
+  return rawName.replace(/^_+|_+$/g, "").replace(/_/g, " ").replace(/\s+/g, " ").trim().replace(/\b\w/g, (char) => char.toUpperCase());
+};
+var getVariableColorClass = (variableType, isSuggested) => {
+  if (isSuggested && variableType !== "func") return "text-[var(--customVariables,#69ffd2)]";
+  if (variableType === "func") return "text-[var(--functionVariables,#b47eea)]";
+  if (variableType === "system") return "text-[var(--normalVariables,#69a5ff)]";
+  return "text-[var(--customVariables,#69ffd2)]";
+};
+var CHILD_VARIABLE_COLOR_CLASS = "text-[var(--childVariables,#ffa66e)]";
 var LSVariableInputField = forwardRef4((props, ref) => {
   const context = useContext(LSVariableInputContext);
   const {
@@ -1032,6 +1166,7 @@ var LSVariableInputField = forwardRef4((props, ref) => {
     type,
     isAutoComplete,
     autoCompleteOptions,
+    autoCompleteGroupBy,
     renderOption,
     hideVariables,
     allowedVariables,
@@ -1051,15 +1186,30 @@ var LSVariableInputField = forwardRef4((props, ref) => {
     onPopupOpen,
     afterFilter,
     onChange,
+    loading,
+    getOptionLabel,
+    isOptionEqualToValue,
+    $disableInputChange,
+    $getFullValueObject,
+    $multiple,
+    $disableCloseOnSelect,
+    $freeSolo,
+    $renderOption,
+    allowedVariableOrigin,
     systemVariables: systemVariablesProp,
     functionVariables: functionVariablesProp,
     translate,
-    onVariableTranslationsNeeded
+    onVariableTranslationsNeeded,
+    isOriginConnected: isOriginConnectedProp,
+    translationKeyExists: translationKeyExistsProp
   } = props;
   const t = translate ?? context.translate ?? defaultTranslate;
-  const systemVariables = systemVariablesProp ?? context.systemVariables ?? {};
+  const rawSystemVariables = systemVariablesProp ?? context.systemVariables ?? {};
+  const variableRecords = useMemo3(() => normalizeVariableRecords(rawSystemVariables), [rawSystemVariables]);
   const functionVariables = useMemo3(() => functionVariablesProp ?? context.functionVariables ?? DEFAULT_FUNCTION_VARIABLES, [context.functionVariables, functionVariablesProp]);
   const requestTranslations = onVariableTranslationsNeeded ?? context.onVariableTranslationsNeeded;
+  const isOriginConnected = isOriginConnectedProp ?? context.isOriginConnected;
+  const translationKeyExists = translationKeyExistsProp ?? context.translationKeyExists;
   const containerRef = useRef3(null);
   const variableId = useRef3(`variable-input-${name ?? "field"}`);
   const [showVariables, setShowVariables] = useState4(false);
@@ -1072,93 +1222,300 @@ var LSVariableInputField = forwardRef4((props, ref) => {
     return lookup;
   }, [allowedVariableDefinitions]);
   const allowedVariableNames = useMemo3(() => allowedVariableDefinitions.map((definition) => definition.name), [allowedVariableDefinitions]);
-  const [filteredAllowedVariables, setFilteredAllowedVariables] = useState4(allowedVariableNames);
+  const [filteredAllowedVariables, setFilteredAllowedVariables] = useState4(allowedVariableDefinitions);
   const [filteredSystemVariables, setFilteredSystemVariables] = useState4([]);
+  const [expandedPaths, setExpandedPaths] = useState4(() => /* @__PURE__ */ new Set());
+  const [autoExpandPaths, setAutoExpandPaths] = useState4(() => /* @__PURE__ */ new Set());
+  const systemVariableValueTrees = useMemo3(() => {
+    const map = /* @__PURE__ */ new Map();
+    Object.values(variableRecords).forEach((variable) => {
+      if (variable && isExpandableValue(variable.value)) {
+        map.set(variable.name, buildValueChildren(variable.value, "", 0));
+      }
+    });
+    return map;
+  }, [variableRecords]);
+  const allowedExampleTrees = useMemo3(() => {
+    const map = /* @__PURE__ */ new Map();
+    allowedVariableDefinitions.forEach((definition) => {
+      if (isExpandableValue(definition.example)) {
+        map.set(definition.name, buildValueChildren(definition.example, "", 0));
+      }
+    });
+    return map;
+  }, [allowedVariableDefinitions]);
   useEffect4(() => {
     requestTranslations?.();
   }, [requestTranslations]);
-  const getVariableVisualType = useCallback2(
+  const isPathExpanded = useCallback2((path) => expandedPaths.has(path) || autoExpandPaths.has(path), [autoExpandPaths, expandedPaths]);
+  const toggleExpand = useCallback2(
+    (path) => {
+      const expanded = expandedPaths.has(path) || autoExpandPaths.has(path);
+      if (expanded) {
+        if (expandedPaths.has(path)) {
+          setExpandedPaths((prev) => {
+            const next = new Set(prev);
+            next.delete(path);
+            return next;
+          });
+        }
+        if (autoExpandPaths.has(path)) {
+          setAutoExpandPaths((prev) => {
+            const next = new Set(prev);
+            next.delete(path);
+            return next;
+          });
+        }
+      } else {
+        setExpandedPaths((prev) => {
+          const next = new Set(prev);
+          next.add(path);
+          return next;
+        });
+      }
+    },
+    [autoExpandPaths, expandedPaths]
+  );
+  const namespaceHas = useCallback2(
+    (key, namespace) => {
+      if (!translationKeyExists) return false;
+      try {
+        return translationKeyExists(key, namespace);
+      } catch {
+        return false;
+      }
+    },
+    [translationKeyExists]
+  );
+  const resolveTranslationFromNamespace = useCallback2(
+    (variableName, namespace) => {
+      const normalizedNamespace = typeof namespace === "string" ? namespace.trim().toLowerCase() : "";
+      if (!normalizedNamespace) return null;
+      const normalizedName = variableName.trim().toLowerCase();
+      if (!normalizedName) return null;
+      const unprefixedName = normalizedName.startsWith(`${normalizedNamespace}_`) ? normalizedName.slice(normalizedNamespace.length + 1) : normalizedName;
+      const prefixedName = normalizedName.startsWith(`${normalizedNamespace}_`) ? normalizedName : `${normalizedNamespace}_${normalizedName}`;
+      const candidateKeys = [prefixedName, unprefixedName];
+      for (const key of candidateKeys) {
+        if (namespaceHas(key, normalizedNamespace)) return t(key, void 0, { ns: normalizedNamespace });
+        if (namespaceHas(`variables.${key}`, normalizedNamespace)) return t(`variables.${key}`, void 0, { ns: normalizedNamespace });
+      }
+      return null;
+    },
+    [namespaceHas, t]
+  );
+  const knownOrigins = useMemo3(() => {
+    return Array.from(
+      new Set(
+        Object.values(variableRecords).map((variable) => typeof variable?.origin === "string" ? variable.origin.trim().toLowerCase() : "").filter((origin) => origin.length > 0)
+      )
+    );
+  }, [variableRecords]);
+  const resolveAllowedVariableOrigin = useCallback2(
     (variableName) => {
-      if (functionVariableSet.has(variableName)) return "func";
-      return !isNully(systemVariables?.[variableName]) ? "system" : "custom";
+      const originFromProp = typeof allowedVariableOrigin === "string" ? allowedVariableOrigin.trim().toLowerCase() : "";
+      if (originFromProp) return originFromProp;
+      const fromDefinition = allowedVariableDefinitionLookup.get(variableName)?.origin;
+      if (fromDefinition) return fromDefinition;
+      const normalizedName = variableName.trim().toLowerCase();
+      if (!normalizedName) return void 0;
+      const prefixCandidate = normalizedName.split("_")[0];
+      if (prefixCandidate) {
+        const hasScopedTranslation = namespaceHas(normalizedName, prefixCandidate) || namespaceHas(`variables.${normalizedName}`, prefixCandidate) || namespaceHas(normalizedName.slice(prefixCandidate.length + 1), prefixCandidate) || namespaceHas(`variables.${normalizedName.slice(prefixCandidate.length + 1)}`, prefixCandidate);
+        if (hasScopedTranslation) return prefixCandidate;
+      }
+      const prefixedMatch = knownOrigins.find((origin) => normalizedName.startsWith(`${origin}_`));
+      if (prefixedMatch) return prefixedMatch;
+      const matchingOrigins = knownOrigins.filter(
+        (origin) => namespaceHas(normalizedName, origin) || namespaceHas(`variables.${normalizedName}`, origin) || namespaceHas(`${origin}_${normalizedName}`, origin)
+      );
+      if (matchingOrigins.length === 1) return matchingOrigins[0];
+      const inferredOrigins = Array.from(
+        new Set(
+          Object.values(variableRecords).filter((variable) => {
+            const variableNameLower = typeof variable?.name === "string" ? variable.name.trim().toLowerCase() : "";
+            const variableOrigin = typeof variable?.origin === "string" ? variable.origin.trim().toLowerCase() : "";
+            if (!variableNameLower || !variableOrigin) return false;
+            return variableNameLower === normalizedName || variableNameLower === `${variableOrigin}_${normalizedName}`;
+          }).map((variable) => String(variable.origin).trim().toLowerCase()).filter((origin) => origin.length > 0)
+        )
+      );
+      return inferredOrigins.length === 1 ? inferredOrigins[0] : void 0;
     },
-    [functionVariableSet, systemVariables]
+    [allowedVariableDefinitionLookup, allowedVariableOrigin, knownOrigins, namespaceHas, variableRecords]
   );
-  const getVariableTypeSortRank = (variableType) => {
-    if (variableType === "custom") return 0;
-    if (variableType === "func") return 1;
-    return 2;
-  };
-  const orderByType = useCallback2(
-    (variableNames) => {
-      const grouped = { custom: [], func: [], system: [] };
-      variableNames.forEach((variableName) => {
-        grouped[getVariableVisualType(variableName)].push(variableName);
-      });
-      return [...grouped.custom, ...grouped.func, ...grouped.system];
+  const resolveVariableDescription = useCallback2(
+    (variableName, fallbackDescription, origin) => {
+      const fromOrigin = resolveTranslationFromNamespace(variableName, origin);
+      if (fromOrigin && fromOrigin.trim().length > 0) return fromOrigin;
+      const defaultTranslationKey = `variables.${variableName}`;
+      const defaultTranslated = t(defaultTranslationKey);
+      if (typeof defaultTranslated === "string" && defaultTranslated !== defaultTranslationKey) return defaultTranslated;
+      if (fallbackDescription && fallbackDescription.trim().length > 0) return fallbackDescription;
+      return humanizeVariableName(variableName);
     },
-    [getVariableVisualType]
+    [resolveTranslationFromNamespace, t]
   );
-  const sortByTypeThenName = useCallback2(
-    (variableNames) => [...variableNames].sort((a, b) => {
-      const typeDiff = getVariableTypeSortRank(getVariableVisualType(a)) - getVariableTypeSortRank(getVariableVisualType(b));
-      return typeDiff !== 0 ? typeDiff : a.localeCompare(b);
-    }),
-    [getVariableVisualType]
+  const getSystemVariableDescription = useCallback2(
+    (variable) => {
+      if (variable?.system && !variable?.pluginId) {
+        return t(`variables.${variable.description}`, void 0, { example: variable.example, interpolation: { escapeValue: false, prefix: "{{{", suffix: "}}}" } });
+      }
+      return resolveVariableDescription(variable?.name ?? "", variable?.description, variable?.origin);
+    },
+    [resolveVariableDescription, t]
+  );
+  const getAllowedVariableRecord = useCallback2(
+    (variableName) => {
+      const direct = variableRecords[variableName];
+      if (direct) return direct;
+      const normalizedOrigin = resolveAllowedVariableOrigin(variableName);
+      if (!normalizedOrigin) return void 0;
+      const prefixedName = variableName.startsWith(`${normalizedOrigin}_`) ? variableName : `${normalizedOrigin}_${variableName}`;
+      return variableRecords[prefixedName];
+    },
+    [resolveAllowedVariableOrigin, variableRecords]
   );
   const getAllowedVariableDescription = useCallback2(
     (variableName) => {
-      const fromDefinitions = allowedVariableDefinitionLookup.get(variableName)?.description;
-      if (fromDefinitions) return fromDefinitions;
-      const translationKey = `variables.${variableName}`;
-      const translated = t(translationKey, variableName);
-      return translated && translated !== translationKey ? translated : variableName;
+      const variable = variableRecords[variableName];
+      if (variable) return getSystemVariableDescription(variable);
+      const fromDefinition = allowedVariableDefinitionLookup.get(variableName);
+      const origin = resolveAllowedVariableOrigin(variableName);
+      return resolveVariableDescription(variableName, fromDefinition?.description, origin);
+    },
+    [allowedVariableDefinitionLookup, getSystemVariableDescription, resolveAllowedVariableOrigin, resolveVariableDescription, variableRecords]
+  );
+  const getAllowedVariableValue = useCallback2(
+    (variableName) => {
+      if (!variableName) return void 0;
+      const direct = variableRecords[variableName]?.value;
+      if (direct !== void 0) return direct;
+      const normalizedOrigin = resolveAllowedVariableOrigin(variableName);
+      if (!normalizedOrigin) return void 0;
+      const prefixedName = variableName.startsWith(`${normalizedOrigin}_`) ? variableName : `${normalizedOrigin}_${variableName}`;
+      return variableRecords[prefixedName]?.value;
+    },
+    [resolveAllowedVariableOrigin, variableRecords]
+  );
+  const getAllowedVariableVisualType = useCallback2(
+    (variableName) => {
+      const record = getAllowedVariableRecord(variableName);
+      if (record) return visualTypeFromRecord(record);
+      if (functionVariableSet.has(variableName)) return "func";
+      return "custom";
+    },
+    [functionVariableSet, getAllowedVariableRecord]
+  );
+  const getAllowedVariableTree = useCallback2(
+    (definition) => {
+      const record = getAllowedVariableRecord(definition.name);
+      const liveTree = record ? systemVariableValueTrees.get(record.name) : void 0;
+      if (liveTree && liveTree.length > 0) return liveTree;
+      return allowedExampleTrees.get(definition.name);
     },
-    [allowedVariableDefinitionLookup, t]
+    [allowedExampleTrees, getAllowedVariableRecord, systemVariableValueTrees]
   );
-  const filterBasedOnQuery = useCallback2(() => {
+  useEffect4(() => {
     const query = (searchQuery ?? "").toLowerCase().replace("{{", "").replace("}}", "").trim();
+    const nextAutoExpand = /* @__PURE__ */ new Set();
+    const collectNestedAutoExpand = (rootToken, tree) => {
+      if (!query || !tree || tree.length === 0) return false;
+      let hit = false;
+      const walk = (nodes) => {
+        nodes.forEach((node) => {
+          if (node.relativePath.toLowerCase().includes(query) || node.key.toLowerCase().includes(query)) {
+            hit = true;
+            const segments = node.relativePath.split(".");
+            for (let i = 0; i < segments.length; i++) {
+              const rel = segments.slice(0, i).join(".");
+              nextAutoExpand.add(rel ? `${rootToken}.${rel}` : rootToken);
+            }
+          }
+          if (node.children.length) walk(node.children);
+        });
+      };
+      walk(tree);
+      return hit;
+    };
     if (allowedVariableNames.length > 0) {
       if (!query) {
-        setFilteredAllowedVariables(orderByType(allowedVariableNames));
+        setFilteredAllowedVariables(orderItemsByVariableType(allowedVariableDefinitions, (definition) => getAllowedVariableVisualType(definition.name)));
       } else {
         const nameMatches = [];
         const descMatches = [];
-        allowedVariableNames.forEach((variable) => {
-          const nameLower = variable?.toLowerCase();
-          const descLower = getAllowedVariableDescription(variable)?.toLowerCase();
-          if (nameLower?.includes(query)) nameMatches.push(variable);
-          else if (descLower?.includes(query)) descMatches.push(variable);
+        const nestedMatches = [];
+        allowedVariableDefinitions.forEach((definition) => {
+          const nameLower = definition.name?.toLowerCase();
+          const descLower = getAllowedVariableDescription(definition.name)?.toLowerCase();
+          if (nameLower?.includes(query)) {
+            nameMatches.push(definition);
+            return;
+          }
+          if (descLower?.includes(query)) {
+            descMatches.push(definition);
+            return;
+          }
+          const tree = getAllowedVariableTree(definition);
+          if (tree && collectNestedAutoExpand(definition.name, tree)) {
+            nestedMatches.push(definition);
+          }
         });
-        setFilteredAllowedVariables([...sortByTypeThenName(nameMatches), ...sortByTypeThenName(descMatches)]);
+        const sortByDef = (items) => sortItemsByVariableTypeThenName(items, (definition) => getAllowedVariableVisualType(definition.name), (definition) => definition.name);
+        setFilteredAllowedVariables([...sortByDef(nameMatches), ...sortByDef(descMatches), ...sortByDef(nestedMatches)]);
       }
     } else {
       setFilteredAllowedVariables([]);
     }
-    const systemKeys = Object.keys(systemVariables ?? {}).filter((variableKey) => !isNully(systemVariables?.[variableKey]));
-    const allowedVariableSet = new Set(allowedVariableNames);
-    const candidates = [...functionVariables, ...systemKeys].filter((variableKey, idx, list) => list.indexOf(variableKey) === idx && !allowedVariableSet.has(variableKey));
+    const allowedSet = new Set(allowedVariableNames);
+    const shouldKeep = (variable) => {
+      if (allowedSet.has(variable.name)) return false;
+      if (!variable.origin) return true;
+      if (!isOriginConnected) return true;
+      return isOriginConnected(variable.origin);
+    };
+    const allRecords = Object.values(variableRecords);
     if (!query) {
-      setFilteredSystemVariables(orderByType(candidates));
+      const visible = allRecords.filter(shouldKeep);
+      setFilteredSystemVariables(orderItemsByVariableType(visible, (variable) => visualTypeFromRecord(variable)));
     } else {
       const nameMatches = [];
       const descMatches = [];
-      candidates.forEach((key) => {
-        const nameLower = key?.toLowerCase();
-        const descStr = t(`variables.${key}`, "-", {
-          example: systemVariables[key],
-          interpolation: { escapeValue: false, prefix: "{{{", suffix: "}}}" }
-        });
-        const descLower = descStr?.toLowerCase();
-        if (nameLower?.includes(query)) nameMatches.push(key);
-        else if (descLower?.includes(query)) descMatches.push(key);
+      const nestedMatches = [];
+      allRecords.forEach((variable) => {
+        if (!shouldKeep(variable)) return;
+        const description = getSystemVariableDescription(variable);
+        const nameLower = variable.name?.toLowerCase();
+        const descLower = description?.toLowerCase();
+        if (nameLower?.includes(query)) {
+          nameMatches.push(variable);
+          return;
+        }
+        if (descLower?.includes(query)) {
+          descMatches.push(variable);
+          return;
+        }
+        const tree = systemVariableValueTrees.get(variable.name);
+        if (tree && collectNestedAutoExpand(variable.example ?? variable.name, tree)) {
+          nestedMatches.push(variable);
+        }
       });
-      setFilteredSystemVariables([...sortByTypeThenName(nameMatches), ...sortByTypeThenName(descMatches)]);
+      const sortSys = (items) => sortItemsByVariableTypeThenName(items, (variable) => visualTypeFromRecord(variable), (variable) => variable?.name ?? "");
+      setFilteredSystemVariables([...sortSys(nameMatches), ...sortSys(descMatches), ...sortSys(nestedMatches)]);
     }
-  }, [allowedVariableNames, functionVariables, getAllowedVariableDescription, orderByType, searchQuery, sortByTypeThenName, systemVariables, t]);
-  useEffect4(() => {
-    filterBasedOnQuery();
-  }, [filterBasedOnQuery]);
+    setAutoExpandPaths(nextAutoExpand);
+  }, [
+    searchQuery,
+    allowedVariableDefinitions,
+    allowedVariableNames,
+    getAllowedVariableDescription,
+    getAllowedVariableTree,
+    getAllowedVariableVisualType,
+    getSystemVariableDescription,
+    isOriginConnected,
+    systemVariableValueTrees,
+    variableRecords
+  ]);
   const clickedVariableIcon = () => {
     if (!hideVariables) setShowVariables((current) => !current);
   };
@@ -1168,25 +1525,218 @@ var LSVariableInputField = forwardRef4((props, ref) => {
   };
   const insertVariable = (variable) => {
     appendValue(`{{${variable}}}`);
+    setShowVariables(false);
   };
-  const getVariableColorClass = (variableType, isSuggested = false) => {
-    if (isSuggested && variableType !== "func") return "text-[var(--customVariables,#69ffd2)]";
-    if (variableType === "func") return "text-[var(--functionVariables,var(--semanticPurple,#b489ff))]";
-    if (variableType === "system") return "text-[var(--normalVariables,var(--semanticBlue,#65b8ff))]";
-    return "text-[var(--customVariables,#69ffd2)]";
-  };
-  const renderVariableToken = (variableName, variableType, isSuggested = false) => /* @__PURE__ */ jsxs5("div", { className: `flex min-w-0 items-center ${getVariableColorClass(variableType, isSuggested)}`, children: [
-    /* @__PURE__ */ jsx11("span", { className: "min-w-0 break-all", children: `{{${variableName}}}` }),
-    variableType === "func" && /* @__PURE__ */ jsx11("span", { className: "ml-2 inline-flex shrink-0 items-center rounded border border-current px-1 py-0 text-[10px] font-semibold uppercase leading-none", title: t("variables.functionvariables", "Function variables"), children: "fx" })
-  ] });
   const handleFilterOptions = (options, params) => {
     const filtered = filter(options, params);
     afterFilter?.(filtered);
     return filtered;
   };
+  const renderVariableToken = (variableName, variableType, isSuggested = false) => /* @__PURE__ */ jsxs5("div", { className: `flex min-w-0 items-center ${getVariableColorClass(variableType, isSuggested)}`, children: [
+    /* @__PURE__ */ jsx11("span", { className: "min-w-0 break-all", children: `{{${variableName}}}` }),
+    variableType === "func" && /* @__PURE__ */ jsx11(
+      "span",
+      {
+        className: "ml-2 inline-flex shrink-0 items-center rounded border border-current px-1 py-[1px] text-[10px] font-semibold leading-none uppercase",
+        title: t("variables.functionvariables", "Function variables"),
+        children: "fx"
+      }
+    )
+  ] });
+  const renderExpandToggle = (path, expanded) => /* @__PURE__ */ jsx11(
+    "button",
+    {
+      type: "button",
+      onClick: (e) => {
+        e.stopPropagation();
+        toggleExpand(path);
+      },
+      className: "flex h-5 w-5 shrink-0 items-center justify-center rounded border-0 bg-transparent p-0 text-[var(--neutralLight2,#cac9d5)] hover:bg-[var(--neutralDark4,#393853)]/50",
+      "aria-label": expanded ? "Collapse" : "Expand",
+      "aria-expanded": expanded,
+      children: /* @__PURE__ */ jsx11(
+        ArrowRight,
+        {
+          style: {
+            width: 14,
+            height: 14,
+            transform: expanded ? "rotate(90deg)" : "none",
+            transition: "transform 0.15s ease"
+          }
+        }
+      )
+    }
+  );
+  const renderExpandSpacer = () => /* @__PURE__ */ jsx11("span", { className: "inline-block h-5 w-5 shrink-0", "aria-hidden": true });
+  const getVariableValuePreview = (variableValue) => {
+    const { displayValue, fullValue } = getVariableValueDisplay(variableValue);
+    return { displayValue, fullValue };
+  };
+  const renderValueChildRows = (rootToken, nodes) => nodes.map((node) => {
+    const fullToken = `${rootToken}.${node.relativePath}`;
+    const expanded = node.isExpandable && isPathExpanded(fullToken);
+    const { displayValue, fullValue } = getVariableValuePreview(node.value);
+    return /* @__PURE__ */ jsxs5(Fragment, { children: [
+      /* @__PURE__ */ jsxs5(
+        "div",
+        {
+          className: "grid min-w-0 cursor-pointer grid-cols-[minmax(260px,1.5fr)_2fr_minmax(140px,1fr)] gap-4 border-b border-[var(--neutralDark4,#393853)] pb-2 pt-2 last-of-type:border-b-0 active:opacity-80",
+          onClick: () => {
+            if (node.isExpandable && !expanded) toggleExpand(fullToken);
+            else insertVariable(fullToken);
+          },
+          children: [
+            /* @__PURE__ */ jsxs5("div", { className: "flex min-w-0 items-center gap-1", style: { paddingLeft: `${node.depth * 1.25}rem` }, children: [
+              node.isExpandable ? renderExpandToggle(fullToken, expanded) : renderExpandSpacer(),
+              /* @__PURE__ */ jsx11("div", { className: `flex min-w-0 items-center ${CHILD_VARIABLE_COLOR_CLASS}`, children: /* @__PURE__ */ jsx11("span", { className: "min-w-0 break-all", children: `{{${fullToken}}}` }) })
+            ] }),
+            /* @__PURE__ */ jsx11("div", { className: "max-w-[600px] min-w-0 break-words", children: node.displayKey }),
+            /* @__PURE__ */ jsx11("div", { className: "ellipse-1 min-w-0 text-[var(--neutralLight2,#cac9d5)]", title: fullValue, children: displayValue })
+          ]
+        }
+      ),
+      expanded && renderValueChildRows(rootToken, node.children)
+    ] }, fullToken);
+  });
+  const toOptionLabelString = (input) => {
+    if (typeof input === "string") return input;
+    if (typeof input === "number" || typeof input === "boolean" || typeof input === "bigint") return String(input);
+    if (input === null || input === void 0) return "";
+    if (typeof input === "object") {
+      const labelCandidate = input.label;
+      if (typeof labelCandidate === "string") return labelCandidate;
+      if (typeof labelCandidate === "number" || typeof labelCandidate === "boolean" || typeof labelCandidate === "bigint") return String(labelCandidate);
+      const valueCandidate = input.value;
+      if (typeof valueCandidate === "string") return valueCandidate;
+      if (typeof valueCandidate === "number" || typeof valueCandidate === "boolean" || typeof valueCandidate === "bigint") return String(valueCandidate);
+      try {
+        return JSON.stringify(input);
+      } catch {
+        return "[object Object]";
+      }
+    }
+    return String(input);
+  };
+  const resolveOptionLabel = (option) => {
+    if (typeof getOptionLabel === "function") {
+      try {
+        const customLabel = getOptionLabel(option);
+        return toOptionLabelString(customLabel === void 0 ? option : customLabel);
+      } catch {
+        return toOptionLabelString(option);
+      }
+    }
+    return toOptionLabelString(option);
+  };
+  const defaultRenderOption = (optionProps, option) => {
+    const opt = option;
+    const thumb = opt?.imageUrl ?? opt?.thumb ?? opt?.iconUrl ?? opt?.previewImageUrl;
+    const helperText = typeof opt?.helperText === "string" ? opt.helperText : "";
+    const isSelected = opt?.value === value;
+    return /* @__PURE__ */ createElement(
+      "li",
+      {
+        ...optionProps,
+        key: String(opt?.label ?? opt?.value ?? ""),
+        className: `flex items-center gap-2 px-3 py-2 cursor-pointer ${isSelected ? "bg-[var(--primary)]/10 hover:bg-[var(--primary)]/20" : "hover:bg-[var(--neutralDark2,#1f1d36)]/40"}`
+      },
+      thumb ? /* @__PURE__ */ jsx11("img", { src: thumb, className: "h-8 w-8 rounded object-cover shrink-0", alt: "" }) : /* @__PURE__ */ jsx11("span", { className: "inline-block h-8 w-8 shrink-0" }),
+      /* @__PURE__ */ jsxs5("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx11("div", { className: "ellipse-1", children: resolveOptionLabel(opt) }),
+        helperText ? /* @__PURE__ */ jsx11("div", { className: "ellipse-1 text-xs text-[var(--neutralLight3,#9392a1)]", children: helperText }) : null
+      ] })
+    );
+  };
+  const showSuggestedSection = allowedVariableNames.length > 0 && filteredAllowedVariables.length > 0;
+  const pickerBody = /* @__PURE__ */ jsxs5("div", { className: "flex max-h-[55vh] min-h-[50vh] w-[92vw] max-w-[1100px] flex-col overflow-hidden p-2", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "mb-2 text-[var(--neutralLight2,#cac9d5)]", children: [
+      /* @__PURE__ */ jsx11("div", { className: "text-sm", children: t("overlay-variables.variables-description", "Use variables that will automatically be replaced before sending out the text") }),
+      /* @__PURE__ */ jsx11(
+        LSInput,
+        {
+          autoFocus: true,
+          startAdornment: /* @__PURE__ */ jsx11(Search, { style: { width: 18, height: 18 } }),
+          placeholder: t("common.search", "Search"),
+          value: searchQuery,
+          onChange: (e) => setSearchQuery(e.target.value),
+          type: "text",
+          style: { padding: "1rem 0 0" }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { className: "mb-1 grid grid-cols-[minmax(260px,1.5fr)_2fr_minmax(140px,1fr)] text-sm text-[var(--neutralLight3,#9392a1)]", children: [
+      /* @__PURE__ */ jsx11("div", { children: t("commands.variable", "Variable") }),
+      /* @__PURE__ */ jsx11("div", { children: t("commands.description", "Description") }),
+      /* @__PURE__ */ jsx11("div", { children: t("common.value", "Value") })
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { className: "h-full overflow-auto pr-4", children: [
+      showSuggestedSection && /* @__PURE__ */ jsxs5("fieldset", { className: "m-0 mb-2 w-full rounded-sm border-2 border-solid border-[var(--neutralDark4,#393853)] px-2 pb-0 pt-0", children: [
+        /* @__PURE__ */ jsx11("legend", { className: "flex items-center justify-center gap-2 px-2 text-sm text-[var(--neutralLight2,#cac9d5)]", children: t("commands.suggested-variables", "Suggested Variables") }),
+        filteredAllowedVariables.map((definition, idx) => {
+          const variableType = getAllowedVariableVisualType(definition.name);
+          const tree = getAllowedVariableTree(definition);
+          const { displayValue, fullValue } = getVariableValuePreview(getAllowedVariableValue(definition.name) ?? definition.example);
+          const expandable = !!tree && tree.length > 0;
+          const expanded = expandable && isPathExpanded(definition.name);
+          const isLast = idx === filteredAllowedVariables.length - 1;
+          return /* @__PURE__ */ jsxs5(Fragment, { children: [
+            /* @__PURE__ */ jsxs5(
+              "div",
+              {
+                className: `grid min-w-0 cursor-pointer grid-cols-[minmax(260px,1.5fr)_2fr_minmax(140px,1fr)] gap-4 border-b ${isLast && !expanded ? "border-b-0" : "border-b-[var(--neutralDark4,#393853)]"} pb-2 pt-2 active:opacity-80`,
+                onClick: () => {
+                  if (expandable && !expanded) toggleExpand(definition.name);
+                  else insertVariable(definition.name);
+                },
+                children: [
+                  /* @__PURE__ */ jsxs5("div", { className: "flex min-w-0 items-center gap-1", children: [
+                    expandable ? renderExpandToggle(definition.name, expanded) : renderExpandSpacer(),
+                    renderVariableToken(definition.name, variableType, true)
+                  ] }),
+                  /* @__PURE__ */ jsx11("div", { className: "max-w-[600px] min-w-0 break-words", children: getAllowedVariableDescription(definition.name) }),
+                  /* @__PURE__ */ jsx11("div", { className: "ellipse-1 min-w-0 text-[var(--neutralLight2,#cac9d5)]", title: fullValue, children: displayValue })
+                ]
+              }
+            ),
+            expanded && tree && renderValueChildRows(definition.name, tree)
+          ] }, definition.name);
+        })
+      ] }),
+      filteredSystemVariables?.map((variable) => {
+        const variableType = visualTypeFromRecord(variable);
+        const { displayValue, fullValue } = getVariableValuePreview(variable.value);
+        const rootToken = variable.example ?? variable.name;
+        const tree = systemVariableValueTrees.get(variable.name);
+        const expandable = !!tree && tree.length > 0;
+        const expanded = expandable && isPathExpanded(rootToken);
+        return /* @__PURE__ */ jsxs5(Fragment, { children: [
+          /* @__PURE__ */ jsxs5(
+            "div",
+            {
+              className: "grid min-w-0 cursor-pointer grid-cols-[minmax(260px,1.5fr)_2fr_minmax(140px,1fr)] gap-4 border-b border-[var(--neutralDark4,#393853)] pb-2 pt-2 last-of-type:border-b-0 active:opacity-80",
+              onClick: () => {
+                if (expandable && !expanded) toggleExpand(rootToken);
+                else insertVariable(rootToken);
+              },
+              children: [
+                /* @__PURE__ */ jsxs5("div", { className: "flex min-w-0 items-center gap-1", children: [
+                  expandable ? renderExpandToggle(rootToken, expanded) : renderExpandSpacer(),
+                  renderVariableToken(variable.name, variableType)
+                ] }),
+                /* @__PURE__ */ jsx11("div", { className: "max-w-[600px] min-w-0 break-words", children: getSystemVariableDescription(variable) }),
+                /* @__PURE__ */ jsx11("div", { className: "ellipse-1 min-w-0 text-[var(--neutralLight2,#cac9d5)]", title: fullValue, children: displayValue })
+              ]
+            }
+          ),
+          expanded && tree && renderValueChildRows(rootToken, tree)
+        ] }, variable.name);
+      })
+    ] })
+  ] });
   const textField = (params = {}) => /* @__PURE__ */ jsx11(
     VariableInputTextField,
     {
+      t,
       params,
       id: variableId.current,
       containerRef,
@@ -1201,19 +1751,21 @@ var LSVariableInputField = forwardRef4((props, ref) => {
       rows,
       maxRows,
       value,
-      onChange,
+      onChange: $disableInputChange ? void 0 : onChange,
       clickedVariableIcon,
       inputProps,
+      allowedVariables,
+      showVariableIcon: !hideVariables,
       ref
     }
   );
-  return /* @__PURE__ */ jsxs5(Fragment, { children: [
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
     /* @__PURE__ */ jsx11(
       Popover,
       {
         anchorEl: containerRef.current,
-        anchorOrigin: { vertical: "bottom", horizontal: "right" },
-        transformOrigin: { vertical: "top", horizontal: "right" },
+        anchorOrigin: { vertical: "bottom", horizontal: "left" },
+        transformOrigin: { vertical: "top", horizontal: "left" },
         open: !hideVariables && showVariables,
         onClose: clickedVariableIcon,
         slotProps: {
@@ -1221,58 +1773,59 @@ var LSVariableInputField = forwardRef4((props, ref) => {
             sx: {
               color: "var(--neutralLight2, #cac9d5)",
               backgroundColor: "var(--neutralDark1, #171628)",
-              padding: 1,
+              // Paper has no padding of its own — the picker body's `p-2` is the
+              // single source of internal spacing. Adding paper padding on top of
+              // that compounds the inset and forces premature horizontal scroll.
+              padding: 0,
               border: "1px solid var(--neutralDark4, #393853)"
             }
           }
         },
-        children: /* @__PURE__ */ jsxs5("div", { className: "flex max-h-[55vh] min-h-[50vh] w-[92vw] max-w-[1100px] flex-col overflow-hidden [--variable-custom-color:var(--customVariables,#69ffd2)] [--variable-function-color:var(--functionVariables,var(--semanticPurple,#b489ff))] [--variable-normal-color:var(--normalVariables,var(--semanticBlue,#65b8ff))]", children: [
-          /* @__PURE__ */ jsxs5("div", { className: "mb-4 text-[var(--neutralLight2,#cac9d5)]", children: [
-            /* @__PURE__ */ jsx11("div", { children: t("overlay-variables.variables-description", "Use variables that will automatically be replaced before sending out the text") }),
-            /* @__PURE__ */ jsx11(
-              LSInput,
-              {
-                autoFocus: true,
-                startAdornment: /* @__PURE__ */ jsx11(Search, { style: { width: 18, height: 18 } }),
-                placeholder: t("assets.search", "Search"),
-                value: searchQuery,
-                onChange: (e) => setSearchQuery(e.target.value),
-                type: "text",
-                style: { padding: "1rem 0 0" }
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs5("div", { className: "mb-1 grid grid-cols-[minmax(300px,1.5fr)_2fr] gap-8 px-1 text-[var(--neutralLight3,#9392a1)]", children: [
-            /* @__PURE__ */ jsx11("div", { children: t("overlay-variables.variable", "Variable") }),
-            /* @__PURE__ */ jsx11("div", { children: t("overlay-variables.description", "Description") })
-          ] }),
-          /* @__PURE__ */ jsxs5("div", { className: "h-full overflow-auto pr-4", children: [
-            allowedVariableNames.length > 0 && filteredAllowedVariables?.map((variableName) => /* @__PURE__ */ jsxs5("div", { className: "grid cursor-pointer grid-cols-[minmax(300px,1.5fr)_2fr] items-start gap-8 border-b border-white/10 px-1 py-4 active:opacity-80", onClick: () => insertVariable(variableName), children: [
-              renderVariableToken(variableName, getVariableVisualType(variableName), true),
-              /* @__PURE__ */ jsx11("div", { className: "max-w-[600px] break-words leading-[1.25]", children: getAllowedVariableDescription(variableName) })
-            ] }, variableName)),
-            filteredSystemVariables?.map((variableKey) => /* @__PURE__ */ jsxs5("div", { className: "grid cursor-pointer grid-cols-[minmax(300px,1.5fr)_2fr] items-start gap-8 border-b border-white/10 px-1 py-4 active:opacity-80", onClick: () => insertVariable(variableKey), children: [
-              renderVariableToken(variableKey, getVariableVisualType(variableKey)),
-              /* @__PURE__ */ jsx11("div", { className: "max-w-[600px] break-words leading-[1.25]", children: t(`variables.${variableKey}`, "-", { example: systemVariables?.[variableKey], interpolation: { escapeValue: false, prefix: "{{{", suffix: "}}}" } }) })
-            ] }, variableKey))
-          ] })
-        ] })
+        children: pickerBody
       }
     ),
     isAutoComplete ? /* @__PURE__ */ jsx11(
       Autocomplete2,
       {
         disableClearable: true,
-        freeSolo: true,
+        openOnFocus: true,
         includeInputInList: true,
-        onChange: (_e, nextValue) => onChange?.(nextValue?.value ?? nextValue),
-        onInputChange: (_e, nextValue) => onChange?.(nextValue),
+        multiple: $multiple,
+        freeSolo: $freeSolo,
+        disableCloseOnSelect: $disableCloseOnSelect,
+        groupBy: autoCompleteGroupBy,
         options: autoCompleteOptions ?? [],
+        isOptionEqualToValue,
         value,
-        renderOption,
-        getOptionLabel: (option) => typeof option === "string" ? option : option.label,
+        disabled,
+        loading,
+        getOptionLabel: resolveOptionLabel,
+        onChange: (_e, nextValue) => {
+          if ($getFullValueObject) {
+            onChange?.(nextValue);
+            return;
+          }
+          if ($multiple) {
+            const list = Array.isArray(nextValue) ? nextValue : nextValue ? [nextValue] : [];
+            const mapped = list.map((entry) => {
+              if (entry && typeof entry === "object" && "value" in entry) {
+                return entry.value;
+              }
+              return entry;
+            });
+            onChange?.(mapped);
+            return;
+          }
+          if (nextValue && typeof nextValue === "object" && "value" in nextValue) {
+            onChange?.(nextValue.value);
+            return;
+          }
+          onChange?.(nextValue);
+        },
+        onInputChange: $disableInputChange ? void 0 : (_e, nextValue) => onChange?.(nextValue),
         filterOptions: handleFilterOptions,
-        slots: { listbox: ListboxComponent },
+        renderOption: $renderOption ?? renderOption ?? defaultRenderOption,
+        slots: ListboxComponent ? { listbox: ListboxComponent } : void 0,
         slotProps: { listbox: { onScroll: onScrollListBox } },
         onHighlightChange,
         onOpen: onPopupOpen,
@@ -1284,7 +1837,33 @@ var LSVariableInputField = forwardRef4((props, ref) => {
 });
 LSVariableInputField.displayName = "LSVariableInputField";
 var VariableInputTextField = forwardRef4(
-  ({ id, name, label, type, variant, disabled, autoFocus, multiline, placeholder, rows, maxRows, value, onChange, inputProps, clickedVariableIcon, params = {}, containerRef }, ref) => {
+  ({
+    t,
+    id,
+    name,
+    label,
+    type,
+    variant,
+    disabled,
+    autoFocus,
+    multiline,
+    placeholder,
+    rows,
+    maxRows,
+    value,
+    onChange,
+    inputProps,
+    clickedVariableIcon,
+    params = {},
+    containerRef,
+    showVariableIcon
+  }, ref) => {
+    const inputPropsInputProps = inputProps?.InputProps ?? {};
+    const paramsInputProps = params?.InputProps ?? {};
+    const inputPropsSlotInputProps = inputProps?.slotProps?.input ?? {};
+    const paramsSlotInputProps = params?.slotProps?.input ?? {};
+    const startAdornment = paramsInputProps.startAdornment ?? paramsSlotInputProps.startAdornment ?? inputPropsInputProps.startAdornment ?? inputPropsSlotInputProps.startAdornment;
+    const endAdornment = paramsInputProps.endAdornment ?? paramsSlotInputProps.endAdornment ?? inputPropsInputProps.endAdornment ?? inputPropsSlotInputProps.endAdornment;
     return /* @__PURE__ */ jsx11(
       LSTextField,
       {
@@ -1303,21 +1882,23 @@ var VariableInputTextField = forwardRef4(
         value,
         fullWidth: true,
         className: `mui-ls-input noMinHeight ${params?.className ?? ""} ${inputProps?.className ?? ""}`.trim(),
-        onChange: (e) => onChange?.(e.target.value),
+        onChange: onChange ? ((e) => onChange(e.target.value)) : void 0,
         ...inputProps,
         ...params,
         InputProps: {
-          ...params?.InputProps ?? {},
-          ...inputProps?.InputProps ?? {},
-          endAdornment: /* @__PURE__ */ jsxs5(Fragment, { children: [
-            params?.slotProps?.input?.endAdornment ?? params?.InputProps?.endAdornment ?? null,
-            /* @__PURE__ */ jsx11(
+          ...inputPropsSlotInputProps,
+          ...inputPropsInputProps,
+          ...paramsSlotInputProps,
+          ...paramsInputProps,
+          startAdornment,
+          endAdornment: /* @__PURE__ */ jsxs5(Fragment2, { children: [
+            endAdornment ?? null,
+            showVariableIcon ? /* @__PURE__ */ jsx11(Tooltip, { title: t("chatbot.allowed-variables", "Allowed Variables"), children: /* @__PURE__ */ jsx11(
               InputAdornment2,
               {
                 position: "end",
                 onClick: clickedVariableIcon,
                 ref: containerRef,
-                className: "cursor-pointer",
                 sx: {
                   cursor: "pointer",
                   background: "var(--primary)",
@@ -1336,12 +1917,12 @@ var VariableInputTextField = forwardRef4(
                     color: "var(--neutralDark1)"
                   }
                 },
-                children: "{}"
+                children: /* @__PURE__ */ jsx11("span", { className: "font-bold", children: "{}" })
               }
-            )
+            ) }) : null
           ] })
         },
-        ref
+        inputRef: ref
       }
     );
   }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@lumiastream/ui",
-	"version": "0.2.3",
+	"version": "0.2.4-beta.1",
 	"author": "Lumia Stream",
 	"license": "ISC",
 	"description": "Lumia UI Kit",
@@ -52,7 +52,7 @@
 	"dependencies": {
 		"@emotion/react": "^11.14.0",
 		"@emotion/styled": "^11.14.1",
-		"@lumiastream/lumia-translations": "1.15.3",
+		"@lumiastream/lumia-translations": "1.15.4",
 		"@lumiastream/lumia-types": "^3.2.7",
 		"@mui/icons-material": "^9.0.0",
 		"@mui/material": "^9.0.0",