sveltekit-ui 1.0.0

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

@@ -0,0 +1,903 @@
+import { create_audio_manager } from "$lib/Components/Audio/index.svelte.js"
+import { create_image_manager } from "$lib/Components/Image/index.svelte.js"
+import { create_color_manager } from "$lib/Components/Color/index.svelte.js"
+import { create_code_manager } from "$lib/Components/Code/index.svelte.js"
+import { create_email_address_manager } from "$lib/Components/EmailAddress/index.svelte.js"
+import { create_number_manager } from "$lib/Components/Number/index.svelte.js"
+import { create_phone_number_manager } from "$lib/Components/PhoneNumber/index.svelte.js"
+import { create_table_advanced_manager } from "$lib/Components/TableAdvanced/index.svelte.js"
+import { create_icon_input_manager } from "$lib/Components/IconInput/index.svelte.js"
+import { create_icon_manager } from "$lib/Components/Icon/index.svelte.js"
+import { create_json_manager } from "$lib/Components/Json/index.svelte.js"
+// import { create_tag_manager } from "$lib/Components/Tag/index.svelte.js" // might figure some function builder for conditions but tbd how to best handle
+import { create_link_manager } from "$lib/Components/Link/index.svelte.js"
+import { create_x_post_manager } from "$lib/Components/XPost/index.svelte.js"
+import { create_youtube_video_manager } from "$lib/Components/YoutubeVideo/index.svelte.js"
+import { create_slider_manager } from "$lib/Components/Slider/index.svelte.js"
+import { create_checkbox_manager } from "$lib/Components/Checkbox/index.svelte.js"
+import { create_text_input_manager } from "$lib/Components/TextInput/index.svelte.js"
+import { create_color_input_manager } from "$lib/Components/ColorInput/index.svelte.js"
+import { create_dropdown_manager } from "$lib/Components/Dropdown/index.svelte.js"
+import { create_time_input_manager } from "$lib/Components/TimeInput/index.svelte.js"
+import { create_time_manager } from "$lib/Components/Time/index.svelte.js"
+import { create_location_input_manager } from "$lib/Components/LocationInput/index.svelte.js"
+import { create_location_manager } from "$lib/Components/Location/index.svelte.js"
+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"
+
+export function create_content_manager(config) {
+  const id = create_unique_id(null, 20)
+  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)
+        }
+      }
+    }
+    return cleaned_attributes
+  }
+
+  function pass_event_down(input) {
+    console.log("pass_event_down", input)
+    if (input?.set_from_content_id == id) {
+      return
+    }
+    // val_prepped = prepare_component_and_children(config?.val)
+    // return
+    val_prepped.attributes = clean_attributes_from_variable_path(config?.val?.attributes)
+    if (["checkbox", "time", "location", "json"].includes(config?.val?.type_id)) {
+      // prob do this for more
+      setTimeout(() => {
+        val_prepped = prepare_component_and_children(config?.val)
+      }, 10)
+      return
+    } else if (config?.val?.type_id == "icon") {
+      val_prepped.manager.set_attributes(val_prepped.attributes)
+    }
+    if (Array.isArray(val_prepped?.children)) {
+      for (let child of val_prepped?.children) {
+        if (Array.isArray(child)) {
+          for (let child_item of child) {
+            if (typeof child_item?.pass_event_down == "function") {
+              child_item.pass_event_down(input)
+            }
+          }
+        } else if (typeof child?.pass_event_down == "function") {
+          child.pass_event_down(input)
+        }
+      }
+    }
+  }
+
+  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)
+    if (typeof config?.on_event == "function") {
+      if (type == "insert") {
+        return config?.on_event({
+          type: "set_variables_insert",
+          set_from_content_id: id,
+          value: value,
+          index_to_insert_at: null, // tbd
+          variable_path_to_target: cleaned_path ?? null,
+        })
+      } else if (type == "delete") {
+        return config?.on_event({
+          type: "set_variables_delete",
+          set_from_content_id: id,
+          variable_path_to_target: cleaned_path ? [...cleaned_path, value] : [value],
+        })
+      } else if (type == "set_key") {
+        return config?.on_event({
+          type: "set_variables_key",
+          set_from_content_id: id,
+          variable_path_to_target: cleaned_path ?? null,
+          value: value,
+        })
+      } else {
+        return config?.on_event({
+          type: "set_variables",
+          set_from_content_id: id,
+          value: value,
+          variable_path_to_target: cleaned_path ?? null,
+        })
+      }
+    }
+    // maybe normalize some kinda return like { is_success: true, ...}
+  }
+
+  function get_default_children(val_loc) {
+    let is_children = false
+    let children = []
+    if (Array.isArray(val_loc?.children) && val_loc?.children.length > 0) {
+      is_children = true
+      for (let child of val_loc?.children) {
+        children.push(
+          create_content_manager({
+            val: child,
+            mapkit_js_token: mapkit_js_token,
+            table_options: config?.table_options,
+            on_search_table_row_ids: config?.on_search_table_row_ids,
+            storage_path: () => storage_path,
+            is_dark_theme: () => is_dark_theme,
+            variables: () => variables,
+            loops: () => loops,
+            on_event: config?.on_event,
+          })
+        )
+      }
+    }
+    return {
+      is_children: is_children,
+      children: children,
+    }
+  }
+
+  function prepare_component_and_children(val) {
+    let val_loc = deep_copy(val)
+    if (val_loc != null && typeof val_loc == "object" && val_loc.hasOwnProperty("attributes")) {
+      val_loc.attributes = clean_attributes_from_variable_path(val_loc?.attributes)
+    }
+    if (val_loc?.type_id == "audio") {
+      return {
+        type_id: val_loc?.type_id,
+        selector_id: val_loc?.selector_id,
+        attributes: val_loc?.attributes,
+        manager: create_audio_manager({ ...val_loc?.attributes, storage_path }),
+      }
+    } else if (val_loc?.type_id == "image") {
+      return {
+        type_id: val_loc?.type_id,
+        selector_id: val_loc?.selector_id,
+        manager: create_image_manager({ ...val_loc?.attributes, storage_path }),
+        attributes: val_loc?.attributes,
+        is_children: false,
+        children: [],
+      }
+    } else if (val_loc?.type_id == "youtube_video") {
+      return {
+        type_id: val_loc?.type_id,
+        selector_id: val_loc?.selector_id,
+        attributes: val_loc?.attributes,
+        manager: create_youtube_video_manager({
+          ...val_loc?.attributes,
+          is_dark_theme: val_loc?.attributes?.is_dark_theme ?? is_dark_theme,
+        }),
+        is_children: false,
+        children: [],
+      }
+    } else if (val_loc?.type_id == "x_post") {
+      return {
+        type_id: val_loc?.type_id,
+        selector_id: val_loc?.selector_id,
+        attributes: val_loc?.attributes,
+        manager: create_x_post_manager({
+          ...val_loc?.attributes,
+          is_dark_theme: val_loc?.attributes?.is_dark_theme ?? is_dark_theme,
+        }),
+        is_children: false,
+        children: [],
+      }
+    } else if (val_loc?.type_id == "link") {
+      const children_res = get_default_children(val_loc)
+      return {
+        type_id: val_loc?.type_id,
+        selector_id: val_loc?.selector_id,
+        attributes: val_loc?.attributes,
+        manager: create_link_manager({
+          ...val_loc?.attributes,
+          id: val_loc?.selector_id,
+        }),
+        is_children: children_res?.is_children,
+        children: children_res?.children,
+      }
+    } else if (val_loc?.type_id == "icon_input") {
+      const children_res = get_default_children(val_loc)
+      return {
+        type_id: val_loc?.type_id,
+        selector_id: val_loc?.selector_id,
+        attributes: val_loc?.attributes,
+        manager: create_icon_input_manager({
+          ...val_loc?.attributes,
+          id: val_loc?.selector_id,
+          on_finish: (input) => set_variable_at_path(val_loc?.attributes?.val_from_variable_path, input),
+        }),
+        is_children: children_res?.is_children,
+        children: children_res?.children,
+      }
+    } else if (val_loc?.type_id == "icon") {
+      const children_res = get_default_children(val_loc)
+      let icon_manager = create_icon_manager({
+        ...val_loc?.attributes,
+        id: val_loc?.selector_id,
+        icon_id: () => val_loc?.attributes?.icon_id,
+      })
+      return {
+        type_id: val_loc?.type_id,
+        selector_id: val_loc?.selector_id,
+        attributes: val_loc?.attributes,
+        manager: icon_manager,
+        is_children: children_res?.is_children,
+        children: children_res?.children,
+      }
+    } else if (val_loc?.type_id == "code") {
+      return {
+        type_id: val_loc?.type_id,
+        selector_id: val_loc?.selector_id,
+        attributes: val_loc?.attributes,
+        manager: create_code_manager({ ...val_loc?.attributes, is_dark_theme }),
+        is_children: false,
+        children: [],
+      }
+    } else if (val_loc?.type_id == "json") {
+      return {
+        type_id: val_loc?.type_id,
+        selector_id: val_loc?.selector_id,
+        attributes: val_loc?.attributes,
+        manager: create_json_manager({ ...val_loc?.attributes }),
+        is_children: false,
+        children: [],
+      }
+    } else if (val_loc?.type_id == "code_inline") {
+      return {
+        type_id: val_loc?.type_id,
+        selector_id: val_loc?.selector_id,
+        attributes: val_loc?.attributes,
+        copy_button_manager: create_button_manager({
+          type: "soft",
+          support_icon: "clipboard",
+          is_uniform: true,
+          min_height: 2.4,
+          icon_size: 1.6,
+          border_radius: 0.5,
+          is_success_animation: true,
+          on_click: () => {
+            copy_to_clipboard(val_loc?.attributes?.content)
+          },
+        }),
+        is_children: false,
+        children: [],
+      }
+    } else if (val_loc?.type_id == "number") {
+      return {
+        type_id: val_loc?.type_id,
+        selector_id: val_loc?.selector_id,
+        attributes: val_loc?.attributes,
+        manager: create_number_manager({ ...val_loc?.attributes }),
+        is_children: false,
+        children: [],
+      }
+    } else if (val_loc?.type_id == "slider") {
+      return {
+        type_id: val_loc?.type_id,
+        selector_id: val_loc?.selector_id,
+        attributes: val_loc?.attributes,
+        manager: create_slider_manager({
+          ...val_loc?.attributes,
+          on_change: (input) => set_variable_at_path(val_loc?.attributes?.val_from_variable_path, input),
+        }),
+        is_children: false,
+        children: [],
+      }
+    } else if (val_loc?.type_id == "checkbox") {
+      return {
+        type_id: val_loc?.type_id,
+        selector_id: val_loc?.selector_id,
+        attributes: val_loc?.attributes,
+        manager: create_checkbox_manager({
+          ...val_loc?.attributes,
+          on_change: (input) => set_variable_at_path(val_loc?.attributes?.val_from_variable_path, input),
+        }),
+        is_children: false,
+        children: [],
+      }
+    } else if (val_loc?.type_id == "text_input") {
+      return {
+        type_id: val_loc?.type_id,
+        selector_id: val_loc?.selector_id,
+        attributes: val_loc?.attributes,
+        manager: create_text_input_manager({
+          ...val_loc?.attributes,
+          on_change: (input) => set_variable_at_path(val_loc?.attributes?.val_from_variable_path, input),
+        }),
+        is_children: false,
+        children: [],
+      }
+    } else if (val_loc?.type_id == "number_input") {
+      return {
+        type_id: val_loc?.type_id,
+        selector_id: val_loc?.selector_id,
+        attributes: val_loc?.attributes,
+        manager: create_text_input_manager({
+          type: "number",
+          ...val_loc?.attributes,
+          on_change: (input) => set_variable_at_path(val_loc?.attributes?.val_from_variable_path, input),
+        }),
+        is_children: false,
+        children: [],
+      }
+    } else if (val_loc?.type_id == "color_input") {
+      return {
+        type_id: val_loc?.type_id,
+        selector_id: val_loc?.selector_id,
+        attributes: val_loc?.attributes,
+        manager: create_color_input_manager({
+          ...val_loc?.attributes,
+          on_finish: (input) => set_variable_at_path(val_loc?.attributes?.val_from_variable_path, input),
+        }),
+        is_children: false,
+        children: [],
+      }
+    } else if (val_loc?.type_id == "color") {
+      return {
+        type_id: val_loc?.type_id,
+        selector_id: val_loc?.selector_id,
+        attributes: val_loc?.attributes,
+        manager: create_color_manager({
+          ...val_loc?.attributes,
+        }),
+        is_children: false,
+        children: [],
+      }
+    } else if (val_loc?.type_id == "dropdown") {
+      return {
+        type_id: val_loc?.type_id,
+        selector_id: val_loc?.selector_id,
+        attributes: val_loc?.attributes,
+        manager: create_dropdown_manager({
+          ...val_loc?.attributes,
+          on_change: (input) => set_variable_at_path(val_loc?.attributes?.val_from_variable_path, input),
+        }),
+        is_children: false,
+        children: [],
+      }
+    } else if (val_loc?.type_id == "time_input") {
+      return {
+        type_id: val_loc?.type_id,
+        selector_id: val_loc?.selector_id,
+        attributes: val_loc?.attributes,
+        manager: create_time_input_manager({
+          ...val_loc?.attributes,
+          on_finish: (input) => set_variable_at_path(val_loc?.attributes?.val_from_variable_path, input),
+        }),
+        is_children: false,
+        children: [],
+      }
+    } else if (val_loc?.type_id == "time") {
+      return {
+        type_id: val_loc?.type_id,
+        selector_id: val_loc?.selector_id,
+        attributes: val_loc?.attributes,
+        manager: create_time_manager({
+          ...val_loc?.attributes,
+          on_finish: (input) => set_variable_at_path(val_loc?.attributes?.val_from_variable_path, input),
+        }),
+        is_children: false,
+        children: [],
+      }
+    } else if (val_loc?.type_id == "cron_input") {
+      return {
+        type_id: val_loc?.type_id,
+        selector_id: val_loc?.selector_id,
+        attributes: val_loc?.attributes,
+        manager: create_cron_input_manager({
+          ...val_loc?.attributes,
+          on_finish: (input) => set_variable_at_path(val_loc?.attributes?.val_from_variable_path, input),
+        }),
+        is_children: false,
+        children: [],
+      }
+    } else if (val_loc?.type_id == "cron") {
+      return {
+        type_id: val_loc?.type_id,
+        selector_id: val_loc?.selector_id,
+        attributes: val_loc?.attributes,
+        is_children: false,
+        children: [],
+      }
+    } else if (val_loc?.type_id == "phone_input") {
+      return {
+        type_id: val_loc?.type_id,
+        selector_id: val_loc?.selector_id,
+        attributes: val_loc?.attributes,
+        manager: create_text_input_manager({
+          type: "phone_number",
+          ...val_loc?.attributes,
+          on_change: (input) => set_variable_at_path(val_loc?.attributes?.val_from_variable_path, input),
+        }),
+        is_children: false,
+        children: [],
+      }
+    } else if (val_loc?.type_id == "phone_number") {
+      return {
+        type_id: val_loc?.type_id,
+        selector_id: val_loc?.selector_id,
+        attributes: val_loc?.attributes,
+        manager: create_phone_number_manager({
+          ...val_loc?.attributes,
+        }),
+        is_children: false,
+        children: [],
+      }
+    } else if (val_loc?.type_id == "email_address") {
+      return {
+        type_id: val_loc?.type_id,
+        selector_id: val_loc?.selector_id,
+        attributes: val_loc?.attributes,
+        manager: create_email_address_manager({
+          ...val_loc?.attributes,
+          on_change: (input) => set_variable_at_path(val_loc?.attributes?.val_from_variable_path, input),
+        }),
+        is_children: false,
+        children: [],
+      }
+    } else if (val_loc?.type_id == "location_input") {
+      return {
+        type_id: val_loc?.type_id,
+        selector_id: val_loc?.selector_id,
+        attributes: val_loc?.attributes,
+        manager: create_location_input_manager({
+          ...val_loc?.attributes,
+          mapkit_js_token: mapkit_js_token,
+          on_finish: (input) => set_variable_at_path(val_loc?.attributes?.val_from_variable_path, input),
+        }),
+        is_children: false,
+        children: [],
+      }
+    } else if (val_loc?.type_id == "location") {
+      return {
+        type_id: val_loc?.type_id,
+        selector_id: val_loc?.selector_id,
+        attributes: val_loc?.attributes,
+        manager: create_location_manager({
+          ...val_loc?.attributes,
+          mapkit_js_token: mapkit_js_token,
+        }),
+        is_children: false,
+        children: [],
+      }
+    } else if (val_loc?.type_id == "table_advanced") {
+      return {
+        type_id: val_loc?.type_id,
+        selector_id: val_loc?.selector_id,
+        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
+          // on_event: (input) => {
+          //   if (input?.type == "update_row") {
+          //     if (typeof input?.row_i == "number" && Array.isArray(val_loc?.attributes?.rows_data_from_variable_path)) {
+          //       return set_variable_at_path(
+          //         [...val_loc?.attributes?.rows_data_from_variable_path, input?.row_i],
+          //         input?.value
+          //       )
+          //     }
+          //   } else if (input?.type == "insert_row") {
+          //     if (Array.isArray(val_loc?.attributes?.rows_data_from_variable_path)) {
+          //       return set_variable_at_path(val_loc?.attributes?.rows_data_from_variable_path, input?.value, "insert")
+          //     }
+          //   } else if (input?.type == "delete_row") {
+          //     if (typeof input?.row_i == "number" && Array.isArray(val_loc?.attributes?.rows_data_from_variable_path)) {
+          //       return set_variable_at_path(
+          //         [...val_loc?.attributes?.rows_data_from_variable_path, input?.row_i],
+          //         null,
+          //         "delete"
+          //       )
+          //     }
+          //   }
+        }),
+        is_children: false,
+        children: [],
+      }
+    } else if (val_loc?.type_id == "qr") {
+      return {
+        type_id: val_loc?.type_id,
+        selector_id: val_loc?.selector_id,
+        attributes: val_loc?.attributes,
+        manager: create_qr_manager({
+          ...val_loc?.attributes,
+          on_change: (input) => set_variable_at_path(val_loc?.attributes?.val_from_variable_path, input),
+        }),
+        is_children: false,
+        children: [],
+      }
+    } else if (val_loc?.type_id == "file_input") {
+      return {
+        type_id: val_loc?.type_id,
+        selector_id: val_loc?.selector_id,
+        attributes: val_loc?.attributes,
+        manager: create_file_input_manager({
+          ...val_loc?.attributes,
+          // height: "100%",
+          on_get_file: (input) => {
+            console.log("on_get_file_tbd", input)
+            set_variable_at_path(val_loc?.attributes?.val_from_variable_path, input)
+          },
+        }),
+        is_children: false,
+        children: [],
+      }
+    } else if (val_loc?.type_id == "slot") {
+      console.log("slot666", val_loc)
+      return {
+        type_id: val_loc?.type_id,
+        selector_id: val_loc?.selector_id,
+        attributes: val_loc?.attributes,
+        is_children: false,
+        children: [],
+      }
+    } else if (val_loc?.type_id == "show_conditions") {
+      let is_children = false
+      let children = []
+      if (Array.isArray(val_loc?.children)) {
+        is_children = true
+        for (let child of val_loc?.children) {
+          children.push(
+            create_content_manager({
+              val: child,
+              mapkit_js_token: mapkit_js_token,
+              table_options: config?.table_options,
+              on_search_table_row_ids: config?.on_search_table_row_ids,
+              storage_path: () => storage_path,
+              is_dark_theme: () => is_dark_theme,
+              variables: () => variables,
+              loops: () => loops,
+              on_event: config?.on_event,
+            })
+          )
+        }
+      }
+      return {
+        type_id: "show_conditions",
+        selector_id: val_loc?.selector_id,
+        attributes: val_loc?.attributes,
+        is_children: is_children,
+        children: children,
+      }
+    } else if (val_loc?.type_id == "loop") {
+      let prepped_children = []
+      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
+          let children = []
+          if (Array.isArray(val_loc?.children) && val_loc?.children.length > 0) {
+            is_children = true
+            for (let child of val_loc?.children) {
+              const child_content_manager = create_content_manager({
+                val: child,
+                mapkit_js_token: mapkit_js_token,
+                table_options: config?.table_options,
+                on_search_table_row_ids: config?.on_search_table_row_ids,
+                storage_path: () => storage_path,
+                is_dark_theme: () => is_dark_theme,
+                variables: () => variables,
+                loops: () => [i, ...(Array.isArray(loops) ? loops : [])],
+                on_event: config?.on_event,
+              })
+              children.push(child_content_manager)
+            }
+          }
+          prepped_children.push(children)
+        }
+      }
+      return {
+        type_id: val_loc?.type_id,
+        selector_id: val_loc?.selector_id,
+        attributes: val_loc?.attributes,
+        is_children: true,
+        children: prepped_children,
+      }
+    } else if (val_loc?.type_id == "array_uniform_input") {
+      let prepped_children = []
+      const val_static = set_closurable(val_loc?.attributes?.val, null)
+      if (Array.isArray(val_static)) {
+        for (let i = 0; i < val_static.length; i++) {
+          let is_children = false
+          let children = []
+          if (Array.isArray(val_loc?.children) && val_loc?.children.length > 0) {
+            is_children = true
+            for (let child of val_loc?.children) {
+              children.push(
+                create_content_manager({
+                  val: child,
+                  mapkit_js_token: mapkit_js_token,
+                  table_options: config?.table_options,
+                  on_search_table_row_ids: config?.on_search_table_row_ids,
+                  storage_path: () => storage_path,
+                  is_dark_theme: () => is_dark_theme,
+                  variables: () => variables,
+                  loops: () => [i, ...(Array.isArray(loops) ? loops : [])],
+                  on_event: config?.on_event,
+                })
+              )
+            }
+          }
+          prepped_children.push({
+            is_children: is_children,
+            children: children,
+            remove_item_button_manager: create_button_manager({
+              type: "outlined",
+              support_icon: "x",
+              is_uniform: true,
+              on_click: async () => {
+                const res = await set_variable_at_path(val_loc?.attributes?.val_from_variable_path, i, "delete")
+                if (res?.is_success) {
+                  val_prepped = prepare_component_and_children(config?.val)
+                }
+              },
+            }),
+          })
+        }
+      }
+      return {
+        type_id: val_loc?.type_id,
+        selector_id: val_loc?.selector_id,
+        attributes: val_loc?.attributes,
+        is_children: true,
+        children: prepped_children,
+        label: val_loc?.attributes?.label ?? null,
+        add_item_button_manager: create_button_manager({
+          type: "outlined",
+          text: "Add Item",
+          support_icon: "plus",
+          is_compressed: true,
+          on_click: async () => {
+            const res = await set_variable_at_path(val_loc?.attributes?.val_from_variable_path, null, "insert")
+            if (res?.is_success) {
+              val_prepped = prepare_component_and_children(config?.val)
+            }
+          },
+        }),
+      }
+    } else if (val_loc?.type_id == "object_uniform_input") {
+      let prepped_children = []
+      const val_static = set_closurable(val_loc?.attributes?.val, null)
+      if (Object.keys(val_static || {}).length > 0) {
+        for (let [key, val] of Object.entries(val_static)) {
+          let is_children = false
+          let children = []
+          if (Array.isArray(val_loc?.children) && val_loc?.children.length > 0) {
+            is_children = true
+            for (let child of val_loc?.children) {
+              children.push(
+                create_content_manager({
+                  val: child,
+                  mapkit_js_token: mapkit_js_token,
+                  table_options: config?.table_options,
+                  on_search_table_row_ids: config?.on_search_table_row_ids,
+                  storage_path: () => storage_path,
+                  is_dark_theme: () => is_dark_theme,
+                  variables: () => variables,
+                  loops: () => [key, ...(Array.isArray(loops) ? loops : [])],
+                  on_event: config?.on_event,
+                })
+              )
+            }
+          }
+          prepped_children.push({
+            is_children: is_children,
+            children: children,
+            item_key_table_row_dropdown_manager: create_dropdown_manager({
+              val: key,
+              is_searchable: true,
+              is_button_compressed: true,
+              is_set_null_button: true,
+              options: [],
+              on_search: async (input) => {
+                if (typeof config?.on_search_table_row_ids == "function") {
+                  const res = await config?.on_search_table_row_ids({
+                    table_id: val_loc?.attributes?.property_key_table_id,
+                    ...input,
+                  })
+                  return {
+                    ...res,
+                    ...input,
+                  }
+                }
+                return {
+                  is_success: false,
+                  ...input,
+                }
+              },
+              on_item_click: async (input) => {
+                const res = await set_variable_at_path(
+                  [
+                    ...(Array.isArray(val_loc?.attributes?.val_from_variable_path)
+                      ? val_loc?.attributes?.val_from_variable_path
+                      : []),
+                    key,
+                  ],
+                  input?.key,
+                  "set_key"
+                )
+                if (res?.is_success) {
+                  val_prepped = prepare_component_and_children(config?.val)
+                }
+              },
+            }),
+            item_key_text_input_manager: create_text_input_manager({
+              placeholder: "key",
+              is_popover_edit_content: true,
+              is_popover: true,
+              val: key,
+              on_finish: async (input) => {
+                const res = await set_variable_at_path(
+                  [
+                    ...(Array.isArray(val_loc?.attributes?.val_from_variable_path)
+                      ? val_loc?.attributes?.val_from_variable_path
+                      : []),
+                    key,
+                  ],
+                  input,
+                  "set_key"
+                )
+                if (res?.is_success) {
+                  val_prepped = prepare_component_and_children(config?.val)
+                }
+              },
+            }),
+            remove_item_button_manager: create_button_manager({
+              type: "outlined",
+              support_icon: "x",
+              is_uniform: true,
+              on_click: async () => {
+                const res = await set_variable_at_path(val_loc?.attributes?.val_from_variable_path, key, "delete")
+                if (res?.is_success) {
+                  val_prepped = prepare_component_and_children(config?.val)
+                }
+              },
+            }),
+          })
+        }
+      }
+      return {
+        type_id: val_loc?.type_id,
+        selector_id: val_loc?.selector_id,
+        attributes: val_loc?.attributes,
+        is_children: true,
+        children: prepped_children,
+        label: val_loc?.attributes?.label ?? null,
+        add_item_button_manager: create_button_manager({
+          type: "outlined",
+          text: "Add Item",
+          support_icon: "plus",
+          is_compressed: true,
+          on_click: async () => {
+            const res = await set_variable_at_path(
+              [
+                ...(Array.isArray(val_loc?.attributes?.val_from_variable_path)
+                  ? val_loc?.attributes?.val_from_variable_path
+                  : []),
+                create_unique_id(null, 8),
+              ],
+              null
+            )
+            if (res?.is_success) {
+              val_prepped = prepare_component_and_children(config?.val)
+            }
+          },
+        }),
+      }
+    } else if (val_loc?.type_id == "table_row_id_input") {
+      let dropdown_manager = create_dropdown_manager({
+        is_searchable: true,
+        is_button_compressed: true,
+        val: set_closurable(val_loc?.attributes?.val, null),
+        label: val_loc?.attributes?.label ?? null,
+        options: [],
+        on_search: async (input) => {
+          if (typeof config?.on_search_table_row_ids == "function") {
+            const res = await config?.on_search_table_row_ids({
+              table_id: val_loc?.attributes?.table_id,
+              ...input,
+            })
+            return {
+              ...res,
+              ...input,
+            }
+          }
+          return {
+            is_success: false,
+            ...input,
+          }
+        },
+        on_change: (input) => set_variable_at_path(val_loc?.attributes?.val_from_variable_path, input),
+      })
+      console.log("table_dropdown", { val_loc, val_from: val_loc?.attributes?.val_from_variable_path })
+      return {
+        type_id: val_loc?.type_id,
+        selector_id: val_loc?.selector_id,
+        attributes: val_loc?.attributes,
+        manager: dropdown_manager,
+        is_children: false,
+        children: [],
+      }
+    } else if (node_types?.hasOwnProperty(val_loc?.type_id) || val_loc?.type_id == "children") {
+      const children_res = get_default_children(val_loc)
+      return {
+        type_id: val_loc?.type_id,
+        selector_id: val_loc?.selector_id,
+        attributes: val_loc?.attributes,
+        is_children: children_res?.is_children,
+        children: children_res?.children,
+      }
+    } else {
+      console.log("else", deep_copy(val_loc))
+    }
+  }
+
+  function init(config) {
+    val_prepped = prepare_component_and_children(config?.val)
+  }
+
+  init(config)
+
+  return {
+    get val_prepped() {
+      return val_prepped
+    },
+    get variables() {
+      return variables
+    },
+    get loops() {
+      return loops
+    },
+    pass_event_down,
+  }
+}