sveltekit-ui 1.0.11 → 1.0.13

package/dist/client/index.js

@@ -551,20 +551,80 @@ export function get_data_type_at_path(path, full_data_type) {
   return data_type_at_path_loc
 }
 
-export function set_content_variables(input, variables_combined, pass_event_down) {
-  console.log("set_content_variables000", deep_copy({ input, variables_combined, pass_event_down }))
-  if (!Array.isArray(input?.variable_path_to_target)) {
+export function get_def(input, definition_stack) {
+  if (Array.isArray(definition_stack)) {
+    for (let item of definition_stack) {
+      if (item.hasOwnProperty(input)) {
+        return item?.[input]
+      }
+    }
+  }
+  return null
+}
+
+export function get_def_from_variable_path(input, definition_stack) {
+  let val = null
+  if (Array.isArray(input) && input.length > 0) {
+    val = get_def(input?.[0], definition_stack)
+    for (let i = 1; i < input.length; i++) {
+      if (Array.isArray(input?.[i])) {
+        const res = get_def_from_variable_path(input?.[i], definition_stack)
+        val = val?.[res]
+      } else {
+        val = val?.[input?.[i]]
+      }
+    }
+  }
+  return val
+}
+
+export function is_defined(input, definition_stack) {
+  if (Array.isArray(definition_stack)) {
+    for (let item of definition_stack) {
+      if (item && typeof item == "object" && item.hasOwnProperty(input)) {
+        return true
+      }
+    }
+  }
+  return false
+}
+
+export function set_def(identifier, value, definition_stack) {
+  if (Array.isArray(definition_stack)) {
+    for (let i = 0; i < definition_stack.length; i++) {
+      if (definition_stack[i].hasOwnProperty(identifier)) {
+        definition_stack[i][identifier] = value
+      }
+    }
+  }
+  return definition_stack
+}
+
+export function set_definition_stack(input, definition_stack, pass_event_down) {
+  if (!Array.isArray(input?.variable_path_to_target) || !Array.isArray(definition_stack)) {
     throw new Error("Path must be an array")
   }
-  let content_variables_loc = deep_copy(variables_combined)
-  let temp = content_variables_loc
+  let defined_i = null
   const path = input.variable_path_to_target
+  const root_key = path[0]
+  for (let i = 0; i < definition_stack.length; i++) {
+    if (definition_stack?.[i].hasOwnProperty(root_key)) {
+      defined_i = i
+      break
+    }
+  }
+  if (defined_i == null) {
+    throw new Error("Root key not found in stack")
+  }
+  let defined_variables_loc = deep_copy(definition_stack[defined_i][root_key])
+  let temp = defined_variables_loc
   const last_key = path[path.length - 1]
-  for (let i = 0; i < path.length - 1; i++) {
+  for (let i = 1; i < path.length - 1; i++) {
     const key = path[i]
     if (!(key in temp) || typeof temp[key] !== "object" || temp[key] === null) {
-      if (Number.isInteger(last_key)) {
-        temp[key] = Array(last_key).fill(null)
+      const next_key = path[i + 1]
+      if (Number.isInteger(next_key)) {
+        temp[key] = []
       } else {
         temp[key] = {}
       }
@@ -576,17 +636,26 @@ export function set_content_variables(input, variables_combined, pass_event_down
       if (
         typeof input?.index_to_insert_at === "number" &&
         input?.index_to_insert_at >= 0 &&
-        input?.index_to_insert_at <= temp?.[last_key].length
+        input?.index_to_insert_at <= temp[last_key].length
       ) {
         temp[last_key].splice(input.index_to_insert_at, 0, input.value)
       } else {
         temp[last_key].push(input.value)
       }
+    } else if (Array.isArray(temp)) {
+      if (
+        typeof input?.index_to_insert_at === "number" &&
+        input?.index_to_insert_at >= 0 &&
+        input?.index_to_insert_at <= temp.length
+      ) {
+        temp.splice(input.index_to_insert_at, 0, input.value)
+      } else {
+        temp.push(input.value)
+      }
     } else {
       temp[last_key] = [input.value]
     }
   } else if (input?.type == "set_variables_delete") {
-    console.log("set_variables_delete", deep_copy({ temp, last_key }))
     if (Array.isArray(temp)) {
       if (typeof last_key === "number" && last_key > -1 && last_key < temp.length) {
         temp.splice(last_key, 1)
@@ -595,7 +664,6 @@ export function set_content_variables(input, variables_combined, pass_event_down
       delete temp[last_key]
     }
   } else if (input?.type == "set_variables_key") {
-    console.log("set_variables_key", deep_copy({ temp, last_key }))
     if (Array.isArray(temp)) {
       throw new Error("Cannot change key in array")
     } else if (typeof temp === "object" && temp?.hasOwnProperty(last_key)) {
@@ -607,107 +675,35 @@ export function set_content_variables(input, variables_combined, pass_event_down
   } else {
     temp[last_key] = input?.value
   }
-  console.log("vars_fin", content_variables_loc?.variables)
+  definition_stack[defined_i][root_key] = defined_variables_loc
+  console.log("defined_variables_loc112", defined_variables_loc)
+  console.log("vars_fin", deep_copy(definition_stack))
   if (typeof pass_event_down === "function") {
     pass_event_down({
       value: input.value,
-      variables: content_variables_loc?.variables,
+      definition_stack: definition_stack,
       set_from_content_id: input.set_from_content_id,
       variable_path_to_target: input.variable_path_to_target,
     })
   }
   return {
     is_success: true,
-    variables: content_variables_loc?.variables,
-  }
-}
-
-// export function set_content_variables(input, variables_combined, pass_event_down) {
-//   console.log("set_content_variables000", input)
-//   if (!Array.isArray(input?.variable_path_to_target)) {
-//     throw new Error("Path must be an array")
-//   }
-//   let content_variables_loc = deep_copy(variables_combined)
-//   let temp = content_variables_loc
-//   const path = input.variable_path_to_target
-//   const last_key = path[path.length - 1]
-//   for (let i = 0; i < path.length - 1; i++) {
-//     const key = path[i]
-//     const nextKey = path[i + 1]
-
-//     if (!(key in temp) || typeof temp[key] !== "object" || temp[key] === null) {
-//       if (typeof nextKey === "number") {
-//         temp[key] = []
-//       } else {
-//         temp[key] = {}
-//       }
-//     }
-//     temp = temp[key]
-//   }
-//   if (input?.type == "set_variables_insert") {
-//     if (Array.isArray(temp[last_key])) {
-//       if (
-//         typeof input?.index_to_insert_at === "number" &&
-//         input?.index_to_insert_at >= 0 &&
-//         input?.index_to_insert_at <= temp?.[last_key].length
-//       ) {
-//         temp[last_key].splice(input.index_to_insert_at, 0, input.value)
-//       } else {
-//         temp[last_key].push(input.value)
-//       }
-//     } else {
-//       temp[last_key] = [input.value]
-//     }
-//   } else if (input?.type == "set_variables_delete") {
-//     if (Array.isArray(temp)) {
-//       if (typeof last_key === "number" && last_key > -1 && last_key < temp.length) {
-//         temp.splice(last_key, 1)
-//       }
-//     } else if (typeof temp === "object" && temp?.hasOwnProperty(last_key)) {
-//       delete temp[last_key]
-//     }
-//   } else if (input?.type == "set_variables_key") {
-//     if (Array.isArray(temp)) {
-//       throw new Error("Cannot change key in array")
-//     } else if (typeof temp === "object" && temp?.hasOwnProperty(last_key)) {
-//       temp[input.value] = temp[last_key]
-//       delete temp[last_key]
-//     } else {
-//       throw new Error("Key not found in object")
-//     }
-//   } else {
-//     temp[last_key] = input?.value
-//   }
-//   if (typeof pass_event_down === "function") {
-//     pass_event_down({
-//       value: input.value,
-//       variables: content_variables_loc,
-//       set_from_content_id: input.set_from_content_id,
-//       variable_path_to_target: input.variable_path_to_target,
-//     })
-//   }
-//   return {
-//     is_success: true,
-//     variables: content_variables_loc,
-//   }
-// }
+    definition_stack: definition_stack,
+  }
+}
 
 // tbd could also turn into a typed thing with arrays of v or objects, color, etc
 export function v(config) {
   let val = $state(null)
-
   function on_change(from_id = null) {
     if (typeof config?.on_change == "function") {
       config?.on_change({ val, from_id: from_id })
     }
   }
-
   function init(config) {
     val = config?.val
   }
-
   init(config)
-
   return {
     get val() {
       return val

package/dist/client/types/index.js

@@ -1996,6 +1996,8 @@ export const content_types = {
         type: "variable_path_literal",
         allowed_types: ["array_uniform_literal", "object_uniform_literal"],
       },
+      iter_identifier: { type: "text_literal" },
+      join_text: { type: "text_literal" },
     },
     child_elements: {
       ...main_child_element_options,

package/dist/index.js

@@ -76,6 +76,8 @@ export { default as Popover } from "./Components/Popover/index.svelte"
 export { create_popover_manager } from "./Components/Popover/index.svelte.js"
 export { default as TableAdvanced } from "./Components/TableAdvanced/index.svelte"
 export { create_table_advanced_manager } from "./Components/TableAdvanced/index.svelte.js"
+export { default as VariablePathInput } from "./Components/VariablePathInput/index.svelte"
+export { create_variable_path_input_manager } from "./Components/VariablePathInput/index.svelte.js"
 export { default as Spacer } from "./Components/Spacer/index.svelte"
 export { default as TransparentBackground } from "./Components/TransparentBackground/index.svelte"
 export { default as XFollow } from "./Components/XFollow/index.svelte"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sveltekit-ui",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "description": "A SvelteKit UI component library for building modern web applications",
   "license": "MIT",
   "type": "module",
@@ -19,18 +19,18 @@
   "dependencies": {
     "context-filter-polyfill": "^0.3.23",
     "qr-code-styling": "^1.9.2",
-    "svelte": "^5.37.0"
+    "svelte": "^5.37.3"
   },
   "peerDependencies": {
     "@sveltejs/kit": "^2.22.2"
   },
   "devDependencies": {
     "@sveltejs/adapter-vercel": "^5.8.1",
-    "@sveltejs/kit": "^2.26.1",
+    "@sveltejs/kit": "^2.27.0",
     "@sveltejs/package": "^2.4.0",
     "@sveltejs/vite-plugin-svelte": "^6.1.0",
     "@vercel/analytics": "^1.5.0",
-    "typescript": "^5.8.3",
+    "typescript": "^5.9.2",
     "vite": "^7.0.6"
   },
   "homepage": "https://www.sveltekit-ui.com",

package/src/lib/Components/Content/index.svelte

@@ -31,7 +31,7 @@
   import Self from "./index.svelte"
   import { format_date, set_closurable_color, set_closurable, cron_to_english } from "$lib/client/index.js"
 
-  let { manager, overall_manager } = $props()
+  let { manager } = $props()
 
   function handle_anchor_click(event) {
     event.preventDefault()
@@ -48,7 +48,7 @@
 {#snippet children()}
   {#if manager?.val_prepped?.is_children && Array.isArray(manager?.val_prepped?.children)}
     {#each manager?.val_prepped?.children as child}
-      <Self manager={child} {overall_manager} />
+      <Self manager={child} />
     {/each}
   {/if}
 {/snippet}
@@ -59,13 +59,13 @@
   {#if Array.isArray(manager?.val_prepped?.children) && manager?.val_prepped?.children.some( (h) => set_closurable(h?.val_prepped?.attributes?.is_show) )}
     {#if Array.isArray(manager?.val_prepped?.children.find( (h) => set_closurable(h?.val_prepped?.attributes?.is_show) )?.val_prepped?.children)}
       {#each manager?.val_prepped?.children.find( (h) => set_closurable(h?.val_prepped?.attributes?.is_show) )?.val_prepped?.children as child (child?.selector_id)}
-        <Self manager={child} {overall_manager} />
+        <Self manager={child} />
       {/each}
     {/if}
   {:else if Array.isArray(manager?.val_prepped?.children) && manager?.val_prepped?.children.some((h) => h?.val_prepped?.type_id == "show_conditions_item_else")}
     {#if Array.isArray(manager?.val_prepped?.children.find((h) => h?.val_prepped?.type_id == "show_conditions_item_else")?.val_prepped?.children)}
       {#each manager?.val_prepped?.children.find((h) => h?.val_prepped?.type_id == "show_conditions_item_else")?.val_prepped?.children as child (child?.selector_id)}
-        <Self manager={child} {overall_manager} />
+        <Self manager={child} />
       {/each}
     {/if}
   {/if}
@@ -76,7 +76,7 @@
     {#each manager?.val_prepped?.children as child_loops, i}
       {#if Array.isArray(child_loops) && child_loops.length > 0}
         {#each child_loops as child, i (child?.val_prepped?.selector_id)}
-          <Self manager={child} {overall_manager} />
+          <Self manager={child} />
         {/each}
       {/if}
       {#if i < manager?.val_prepped?.children.length - 1 && manager?.val_prepped?.attributes?.join_text}{manager
@@ -93,7 +93,7 @@
         <Button manager={child_loops?.remove_item_button_manager} />
         {#if Array.isArray(child_loops?.children)}
           {#each child_loops?.children as child (child?.selector_id)}
-            <Self manager={child} {overall_manager} />
+            <Self manager={child} />
           {/each}
         {/if}
       </div>
@@ -128,7 +128,7 @@
               <td>
                 {#if Array.isArray(child_loops?.children)}
                   {#each child_loops?.children as child (child?.selector_id)}
-                    <Self manager={child} {overall_manager} />
+                    <Self manager={child} />
                   {/each}
                 {/if}
               </td>
@@ -439,11 +439,11 @@
       : ''} {manager?.val_prepped?.attributes?.font_size
       ? `font-size: ${manager?.val_prepped?.attributes?.font_size}rem`
       : ''}"
-    onclick={() => overall_manager?.open_edit_element_attributes_popover(manager?.val_prepped?.selector_id)}
-    onkeydown={() => overall_manager?.open_edit_element_attributes_popover(manager?.val_prepped?.selector_id)}
-    onpointerenter={() => overall_manager?.set_focused_selector_id(manager?.val_prepped?.selector_id)}
-    onpointercancel={() => overall_manager?.set_focused_selector_id(null)}
-    onpointerleave={() => overall_manager?.set_focused_selector_id(null)}
+    onclick={() => manager?.open_edit_element_attributes_popover(manager?.val_prepped?.selector_id)}
+    onkeydown={() => manager?.open_edit_element_attributes_popover(manager?.val_prepped?.selector_id)}
+    onpointerenter={() => manager?.set_focused_selector_id(manager?.val_prepped?.selector_id)}
+    onpointercancel={() => manager?.set_focused_selector_id(null)}
+    onpointerleave={() => manager?.set_focused_selector_id(null)}
   >
     {set_closurable(manager?.val_prepped?.attributes?.content)}
   </span>

package/src/lib/Components/Content/index.svelte.js

@@ -26,61 +26,31 @@ import { create_qr_manager } from "$lib/Components/Qr/index.svelte.js"
 import { create_file_input_manager } from "$lib/Components/FileInput/index.svelte.js"
 import { create_cron_input_manager } from "$lib/Components/CronInput/index.svelte.js"
 import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
-import { node_types, deep_copy, set_closurable, create_unique_id, copy_to_clipboard } from "$lib/client/index.js"
+import {
+  node_types,
+  deep_copy,
+  set_closurable,
+  create_unique_id,
+  copy_to_clipboard,
+  get_def_from_variable_path,
+  is_defined,
+} from "$lib/client/index.js"
 
 export function create_content_manager(config) {
   const id = create_unique_id(null, 20)
+  let definition_stack = $state([])
   let is_dark_theme = $derived(set_closurable(config?.is_dark_theme, false))
   let storage_path = $derived(set_closurable(config?.storage_path, "/api/v1/storage/{storage_id}"))
-  let variables = $derived(set_closurable(config?.variables, null))
-  let loops = $derived(set_closurable(config?.loops, null))
   let mapkit_js_token = $derived(set_closurable(config?.mapkit_js_token, null))
   let val_prepped = $state(null)
 
-  function get_variable_from_path(path) {
-    if (Array.isArray(path)) {
-      let combined_variables_loc = {
-        variables: variables,
-        loops: loops,
-      }
-      for (let path_item of path) {
-        if (Array.isArray(path_item)) {
-          let sub_val_from_path = get_variable_from_path(path_item)
-          combined_variables_loc = combined_variables_loc?.[sub_val_from_path]
-        } else {
-          combined_variables_loc = combined_variables_loc?.[path_item]
-        }
-      }
-      return combined_variables_loc
-    }
-    return null
-  }
-
-  function clean_variable_path(path) {
-    // eg. ['variables','dddd',['loops',0]] to ['variables','dddd',3]
-    if (Array.isArray(path)) {
-      let cleaned_path = []
-      for (let path_item of path) {
-        if (Array.isArray(path_item)) {
-          let sub_val_from_path = get_variable_from_path(path_item)
-          cleaned_path.push(sub_val_from_path)
-        } else {
-          cleaned_path.push(path_item)
-        }
-      }
-      return cleaned_path
-    }
-    return null
-  }
-
   function clean_attributes_from_variable_path(attributes) {
     let cleaned_attributes = attributes
     if (Object.keys(attributes || {}).length) {
       for (let [att_key, att_val] of Object.entries(attributes)) {
         if (att_key.endsWith("_from_variable_path") && att_val != null) {
-          const clean_path = clean_variable_path(att_val)
           const att_key_to_set = att_key.split("_from_variable_path")?.[0]
-          cleaned_attributes[att_key_to_set] = () => get_variable_from_path(clean_path)
+          cleaned_attributes[att_key_to_set] = get_def_from_variable_path(att_val, definition_stack)
         }
       }
     }
@@ -119,12 +89,32 @@ export function create_content_manager(config) {
     }
   }
 
+  function clean_variable_path(input) {
+    let cleaned_path = []
+    if (Array.isArray(input) && input.length > 0) {
+      let is_def = is_defined(input?.[0], definition_stack)
+      if (!is_def) {
+        return []
+      }
+      for (let item of input) {
+        if (Array.isArray(item)) {
+          const res = get_def_from_variable_path(item)
+          cleaned_path.push(res)
+        } else {
+          cleaned_path.push(item)
+        }
+      }
+    }
+    return cleaned_path
+  }
+
   async function set_variable_at_path(path, value, type) {
     console.log("set_variable_at_path88", path, value, type)
     if (!Array.isArray(path)) {
       return
     }
     let cleaned_path = clean_variable_path(path)
+    console.log("path77", { cleaned_path, path })
     if (typeof config?.on_event == "function") {
       if (type == "insert") {
         return config?.on_event({
@@ -171,11 +161,13 @@ export function create_content_manager(config) {
             mapkit_js_token: mapkit_js_token,
             table_options: config?.table_options,
             on_search_table_row_ids: config?.on_search_table_row_ids,
+            definition_stack: definition_stack,
             storage_path: () => storage_path,
             is_dark_theme: () => is_dark_theme,
-            variables: () => variables,
-            loops: () => loops,
             on_event: config?.on_event,
+            focused_selector_id: config?.focused_selector_id,
+            set_focused_selector_id: config?.set_focused_selector_id,
+            open_edit_element_attributes_popover: config?.open_edit_element_attributes_popover,
           })
         )
       }
@@ -370,6 +362,7 @@ export function create_content_manager(config) {
         children: [],
       }
     } else if (val_loc?.type_id == "color_input") {
+      console.log("color_input555", val_loc?.attributes)
       return {
         type_id: val_loc?.type_id,
         selector_id: val_loc?.selector_id,
@@ -516,9 +509,8 @@ export function create_content_manager(config) {
         attributes: val_loc?.attributes,
         manager: create_table_advanced_manager({
           ...val_loc?.attributes,
-          variables: () => variables,
-          loops: () => loops,
-          on_event: config?.on_event, // or maybe intercept and call with adjusted params tbd
+          definition_stack: definition_stack,
+          on_event: config?.on_event,
           // on_event: (input) => {
           //   if (input?.type == "update_row") {
           //     if (typeof input?.row_i == "number" && Array.isArray(val_loc?.attributes?.rows_data_from_variable_path)) {
@@ -593,11 +585,13 @@ export function create_content_manager(config) {
               mapkit_js_token: mapkit_js_token,
               table_options: config?.table_options,
               on_search_table_row_ids: config?.on_search_table_row_ids,
+              definition_stack: definition_stack,
               storage_path: () => storage_path,
               is_dark_theme: () => is_dark_theme,
-              variables: () => variables,
-              loops: () => loops,
               on_event: config?.on_event,
+              focused_selector_id: config?.focused_selector_id,
+              set_focused_selector_id: config?.set_focused_selector_id,
+              open_edit_element_attributes_popover: config?.open_edit_element_attributes_popover,
             })
           )
         }
@@ -611,10 +605,11 @@ export function create_content_manager(config) {
       }
     } else if (val_loc?.type_id == "loop") {
       let prepped_children = []
+      let is_children = false
       const static_val = set_closurable(val_loc?.attributes?.val)
       if (Array.isArray(static_val)) {
         for (let i = 0; i < static_val.length; i++) {
-          let is_children = false
+          console.log("loop_test", val_loc?.attributes)
           let children = []
           if (Array.isArray(val_loc?.children) && val_loc?.children.length > 0) {
             is_children = true
@@ -624,11 +619,13 @@ export function create_content_manager(config) {
                 mapkit_js_token: mapkit_js_token,
                 table_options: config?.table_options,
                 on_search_table_row_ids: config?.on_search_table_row_ids,
+                definition_stack: [{ [val_loc?.attributes?.iter_identifier]: i }, ...definition_stack],
                 storage_path: () => storage_path,
                 is_dark_theme: () => is_dark_theme,
-                variables: () => variables,
-                loops: () => [i, ...(Array.isArray(loops) ? loops : [])],
                 on_event: config?.on_event,
+                focused_selector_id: config?.focused_selector_id,
+                set_focused_selector_id: config?.set_focused_selector_id,
+                open_edit_element_attributes_popover: config?.open_edit_element_attributes_popover,
               })
               children.push(child_content_manager)
             }
@@ -640,7 +637,7 @@ export function create_content_manager(config) {
         type_id: val_loc?.type_id,
         selector_id: val_loc?.selector_id,
         attributes: val_loc?.attributes,
-        is_children: true,
+        is_children: is_children,
         children: prepped_children,
       }
     } else if (val_loc?.type_id == "array_uniform_input") {
@@ -659,11 +656,13 @@ export function create_content_manager(config) {
                   mapkit_js_token: mapkit_js_token,
                   table_options: config?.table_options,
                   on_search_table_row_ids: config?.on_search_table_row_ids,
+                  definition_stack: [{ [val_loc?.attributes?.iter_identifier]: i }, ...definition_stack],
                   storage_path: () => storage_path,
                   is_dark_theme: () => is_dark_theme,
-                  variables: () => variables,
-                  loops: () => [i, ...(Array.isArray(loops) ? loops : [])],
                   on_event: config?.on_event,
+                  focused_selector_id: config?.focused_selector_id,
+                  set_focused_selector_id: config?.set_focused_selector_id,
+                  open_edit_element_attributes_popover: config?.open_edit_element_attributes_popover,
                 })
               )
             }
@@ -721,11 +720,13 @@ export function create_content_manager(config) {
                   mapkit_js_token: mapkit_js_token,
                   table_options: config?.table_options,
                   on_search_table_row_ids: config?.on_search_table_row_ids,
+                  definition_stack: [{ [val_loc?.attributes?.iter_identifier]: key }, ...definition_stack],
                   storage_path: () => storage_path,
                   is_dark_theme: () => is_dark_theme,
-                  variables: () => variables,
-                  loops: () => [key, ...(Array.isArray(loops) ? loops : [])],
                   on_event: config?.on_event,
+                  focused_selector_id: config?.focused_selector_id,
+                  set_focused_selector_id: config?.set_focused_selector_id,
+                  open_edit_element_attributes_popover: config?.open_edit_element_attributes_popover,
                 })
               )
             }
@@ -882,7 +883,19 @@ export function create_content_manager(config) {
     }
   }
 
+  function open_edit_element_attributes_popover(input) {
+    if (typeof config?.open_edit_element_attributes_popover == "function") {
+      config?.open_edit_element_attributes_popover(input)
+    }
+  }
+  function set_focused_selector_id(input) {
+    if (typeof config?.set_focused_selector_id == "function") {
+      config?.set_focused_selector_id(input)
+    }
+  }
+
   function init(config) {
+    definition_stack = config?.definition_stack ?? []
     val_prepped = prepare_component_and_children(config?.val)
   }
 
@@ -892,12 +905,11 @@ export function create_content_manager(config) {
     get val_prepped() {
       return val_prepped
     },
-    get variables() {
-      return variables
-    },
-    get loops() {
-      return loops
+    get focused_selector_id() {
+      return config?.focused_selector_id
     },
     pass_event_down,
+    set_focused_selector_id,
+    open_edit_element_attributes_popover,
   }
 }

package/src/lib/Components/ContentInput/AttributesInput/CustomConfig/Dropdown/index.svelte.js

@@ -2,7 +2,6 @@ import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
 import { create_checkbox_manager } from "$lib/Components/Checkbox/index.svelte.js"
 import { create_slider_manager } from "$lib/Components/Slider/index.svelte.js"
 import { create_text_input_manager } from "$lib/Components/TextInput/index.svelte.js"
-import { create_variable_path_input_manager } from "$lib/Components/VariablePathInput/index.svelte.js"
 import { create_defined_type_input_manager } from "$lib/Components/ContentInput/AttributesInput/DefinedTypeInput/index.svelte.js"
 import { deep_copy, set_closurable } from "$lib/client/index.js"
 
@@ -18,9 +17,6 @@ export function create_dropdown_config_manager(config) {
   let target_height_slider_manager = $state(null)
   let val_text_input_manager = $state(null)
   let val_defined_type_input_manager = $state(null)
-
-  let variables_data_type = $derived(set_closurable(config?.variables_data_type, false))
-
   let options = $state([])
   let options_prepped = $state([])
   let key_to_add_text_input_manager = $state(null)
@@ -55,7 +51,7 @@ export function create_dropdown_config_manager(config) {
       val: config?.val?.val ?? null,
     })
     val_defined_type_input_manager = create_defined_type_input_manager({
-      variables_data_type: () => variables_data_type,
+      get_defined_options: config?.get_defined_options,
       label: "Val",
       attribute_root_key: "val",
       attribute_const_val: () => val_text_input_manager?.val,

package/src/lib/Components/ContentInput/AttributesInput/CustomConfig/Number/index.svelte.js

@@ -28,7 +28,6 @@ export function create_number_config_manager(config) {
   let round_text_input_manager = $state(null)
   let progress_bar_start_text_input_manager = $state(null)
   let progress_bar_end_text_input_manager = $state(null)
-  let variables_data_type = $derived(set_closurable(config?.variables_data_type, null))
 
   const number_base = {
     val_from_variable_path: null,
@@ -115,9 +114,9 @@ export function create_number_config_manager(config) {
       val: val_loc?.val,
     })
     val_defined_type_input_manager = create_defined_type_input_manager({
-      variables_data_type: () => variables_data_type,
       label: "Val",
       attribute_root_key: "val",
+      get_defined_options: config?.get_defined_options,
       attribute_const_val: () => val_text_input_manager?.val,
       attributes: config?.val,
     })