sveltekit-ui 1.1.74 → 1.1.76

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

@@ -1,1197 +0,0 @@
-import {
-  create_unique_id,
-  copy_to_clipboard,
-  astc_to_markdown,
-  astc_to_embedding_text,
-  markdown_to_astc,
-  json_to_data_type,
-  node_types,
-  deep_copy,
-  set_closurable,
-} from "$lib/client/index.js"
-import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
-import { create_popover_manager } from "$lib/Components/Popover/index.svelte.js"
-import { create_dropdown_manager } from "$lib/Components/Dropdown/index.svelte.js"
-import { create_text_input_manager } from "$lib/Components/TextInput/index.svelte.js"
-import { create_attributes_input_manager } from "$lib/Components/ContentInput/AttributesInput/index.svelte.js"
-import { create_content_manager } from "$lib/Components/Content/index.svelte.js"
-import { create_add_element_manager } from "$lib/Components/ContentInput/ContentPanelBuilder/AddElement/index.svelte.js"
-
-export function create_content_input_manager(config) {
-  const id = create_unique_id(null, 20)
-
-  let versions = $state([])
-  let selected_version_index = $state(0)
-  let versions_len = $derived(Array.isArray(versions) ? versions.length : 0)
-  let storage = $state(null)
-  let storage_default_folder_path = $state(null)
-  let storage_path = $state(null)
-  let preempt_add_first_element_button_manager = $state(null)
-  let first_el_add_element_manager = $state(null)
-  let selected_version_prepped = $state(null)
-  let paste_astc_markdown_popover_manager = $state(null)
-  let paste_astc_markdown_location_to_add_element = $state(null)
-  let paste_astc_markdown_dropdown_manager = $state(null)
-  let paste_astc_markdown_text_input_manager = $state(null)
-  let paste_astc_markdown_finish_button_manager = $state(null)
-  let location_to_add_element = $state(null)
-  let content_manager = $state(null)
-  let attributes_input = $state(null)
-  let focused_selector_id = $state(null)
-  let definition_stack = $state([])
-  let dragging_selector_id = $state(null)
-  let dragged_over_element_child = $state(null)
-
-  let mapkit_js_token = $derived(set_closurable(config?.mapkit_js_token, null))
-
-  function pass_event_down(input) {
-    if (typeof content_manager?.pass_event_down == "function") {
-      content_manager?.pass_event_down(input)
-    }
-  }
-
-  function get_defined_at_selector_id(selector_id) {
-    function traverse(input) {
-      let defined = {}
-      if (input?.type_id == selector_id) {
-        return { defined, is_found_selector_id: true }
-      } else if (input?.type_id == "loop") {
-        if (input?.attributes?.iter_identifier) {
-          defined[input?.attributes?.iter_identifier] = { type: "text_literal" }
-        }
-      }
-      if (Array.isArray(input?.children)) {
-        for (let child of input?.children) {
-          let res = traverse(child)
-          defined = { ...defined, ...res?.defined }
-          if (res?.is_found_selector_id) {
-            break
-          }
-        }
-      }
-      return { defined }
-    }
-    return traverse(versions?.[selected_version_index])?.defined
-  }
-
-  function get_defined_options(selector_id) {
-    const defined_at_selector_id = get_defined_at_selector_id(selector_id)
-    const defined_data_type = json_to_data_type(
-      Object.assign({}, ...[...(Array.isArray(definition_stack) ? definition_stack : [])].reverse())
-    )
-    return Object.entries({ ...(defined_data_type?.properties || {}), ...defined_at_selector_id }).map(
-      ([key, val]) => ({
-        key,
-        name: key,
-        data_type: val,
-      })
-    )
-  }
-
-  function set_selected_version(version_index) {
-    selected_version_index = version_index
-    let selected_version = versions?.[selected_version_index]
-    selected_version_prepped = prep_element(selected_version)
-    content_manager = create_content_manager({
-      val: selected_version,
-      on_event: config?.on_event,
-      storage_path: storage_path,
-      mapkit_js_token: mapkit_js_token,
-      definition_stack: definition_stack,
-      get focused_selector_id() {
-        return focused_selector_id
-      },
-      set_focused_selector_id,
-      open_edit_element_attributes_popover,
-    })
-  }
-
-  function prep_element(element) {
-    let extra_popover_manager = $state(null)
-    let extra_popover_button_manager = $state(null)
-    let edit_attributes_popover_button_manager = $state(null)
-    let preempt_add_child_element_button_manager = $state(null)
-    let small_preempt_add_child_element_button_manager = $state(null)
-    let preempt_add_sibling_element_below_button_manager = $state(null)
-    let reset_ids_button_manager = $state(null)
-    let copy_markdown_button_manager = $state(null)
-    let copy_astc_button_manager = $state(null)
-    let shift_element_up_5_button_manager = $state(null)
-    let shift_element_up_button_manager = $state(null)
-    let shift_element_down_button_manager = $state(null)
-    let shift_element_down_5_button_manager = $state(null)
-    let delete_button_manager = $state(null)
-    let add_element_manager = $state(null)
-    edit_attributes_popover_button_manager = create_button_manager({
-      type: "soft",
-      is_uniform: true,
-      support_icon: "edit",
-      icon_size: 1.6,
-      icon_sw: 40,
-      min_height: 2,
-      border_radius: 0.5,
-      popover_target: () => `popover_${attributes_input?.popover_manager?.id}`,
-      on_click: () => open_edit_attributes_popover(),
-    })
-    function open_edit_attributes_popover() {
-      attributes_input.init({
-        storage: storage,
-        storage_default_folder_path: storage_default_folder_path,
-        storage_path: storage_path,
-        header: `Edit ${node_types?.[element?.type_id]?.name ? `${node_types?.[element?.type_id]?.name} ` : ""} (${
-          element?.selector_id
-        }) Attributes`,
-        content_type: element?.type_id,
-        selector_id: element?.selector_id,
-        val: element?.attributes,
-        get_defined_options: () => get_defined_options(element?.selector_id),
-        on_finish: (input) => {
-          attributes_input.popover_manager.close()
-          set_element_attributes(element?.selector_id, input)
-        },
-      })
-      setTimeout(() => {
-        attributes_input.popover_manager.open()
-      }, 200)
-    }
-    extra_popover_manager = create_popover_manager({
-      type: "dropdown",
-      min_width: 100,
-      target_width: 220,
-      min_height: 100,
-      target_height: 240,
-      anchor_id: () => `button_${extra_popover_button_manager?.id}`,
-    })
-    extra_popover_button_manager = create_button_manager({
-      type: "soft",
-      is_uniform: true,
-      support_icon: "three_dots",
-      icon_sw: 80,
-      icon_size: 1.6,
-      min_height: 2,
-      border_radius: 0.5,
-      popover_target: `popover_${extra_popover_manager?.id}`,
-    })
-    small_preempt_add_child_element_button_manager = create_button_manager({
-      type: "soft",
-      support_icon: "plus",
-      is_uniform: true,
-      icon_size: 1.6,
-      icon_sw: 40,
-      min_height: 2,
-      border_radius: 0.5,
-      on_click: () => initiate_add_child_el_to_selector(element?.selector_id),
-    })
-    reset_ids_button_manager = create_button_manager({
-      type: "soft",
-      support_icon: "refresh",
-      text_align: "left",
-      text: "Reset IDs",
-      is_success_animation: true,
-      on_click: () => {
-        extra_popover_manager.close()
-        setTimeout(() => {
-          reset_ids(element?.selector_id)
-        }, 200)
-      },
-    })
-    copy_markdown_button_manager = create_button_manager({
-      type: "soft",
-      support_icon: "clipboard",
-      text_align: "left",
-      text: "Copy Markdown",
-      is_success_animation: true,
-      on_click: () => copy_element_markdown(element?.selector_id),
-    })
-    copy_astc_button_manager = create_button_manager({
-      type: "soft",
-      support_icon: "clipboard",
-      text: "Copy astc",
-      text_align: "left",
-      is_success_animation: true,
-      on_click: () => copy_element_astc(element?.selector_id),
-    })
-    preempt_add_child_element_button_manager = create_button_manager({
-      type: "soft",
-      support_icon: "plus",
-      text_align: "left",
-      text: "Add Child Element",
-      on_click: () => initiate_add_child_el_to_selector(element?.selector_id),
-    })
-    preempt_add_sibling_element_below_button_manager = create_button_manager({
-      type: "soft",
-      support_icon: "plus",
-      text_align: "left",
-      text: "Add Element Below",
-      on_click: () => initiate_add_sibling_el_to_selector(element?.selector_id),
-    })
-    shift_element_up_5_button_manager = create_button_manager({
-      type: "soft",
-      support_icon: "arrow_tailed",
-      icon_deg: 270,
-      text_align: "left",
-      text: "Shift Element Up 5",
-      on_click: () => {
-        extra_popover_manager.close()
-        setTimeout(() => {
-          shift_el(element?.selector_id, -5)
-        }, 500)
-      },
-    })
-    shift_element_up_button_manager = create_button_manager({
-      type: "soft",
-      support_icon: "arrow_tailed",
-      icon_deg: 270,
-      text_align: "left",
-      text: "Shift Element Up",
-      on_click: () => {
-        extra_popover_manager.close()
-        setTimeout(() => {
-          shift_el(element?.selector_id, -1)
-        }, 500)
-      },
-    })
-    shift_element_down_button_manager = create_button_manager({
-      type: "soft",
-      support_icon: "arrow_tailed",
-      icon_deg: 90,
-      text_align: "left",
-      text: "Shift Element Down",
-      on_click: () => {
-        extra_popover_manager.close()
-        setTimeout(() => {
-          shift_el(element?.selector_id, 1)
-        }, 500)
-      },
-    })
-    shift_element_down_5_button_manager = create_button_manager({
-      type: "soft",
-      support_icon: "arrow_tailed",
-      icon_deg: 90,
-      text_align: "left",
-      text: "Shift Element Down 5",
-      on_click: () => {
-        extra_popover_manager.close()
-        setTimeout(() => {
-          shift_el(element?.selector_id, 5)
-        }, 500)
-      },
-    })
-    delete_button_manager = create_button_manager({
-      type: "outlined",
-      support_icon: "trashcan",
-      color: "var(--error-t)",
-      icon_sw: 20,
-      text_align: "left",
-      text: "Delete",
-      on_click: () => {
-        extra_popover_manager.close()
-        setTimeout(() => {
-          delete_el(element?.selector_id)
-        }, 500)
-      },
-    })
-    const avail_child_element_ids = calc_child_element_options(element)
-    const parent_el = get_parent_el(element?.selector_id)
-    const avail_sibling_element_ids = calc_child_element_options(parent_el)
-    const total_siblings = Array.isArray(parent_el?.children) ? parent_el?.children.length : 0
-    const element_index_of_siblings = Array.isArray(parent_el?.children)
-      ? parent_el.children.findIndex((h) => h?.selector_id == element?.selector_id)
-      : null
-    add_element_manager = create_add_element_manager({
-      header: () => (location_to_add_element == "sibling" ? "Add Element below" : "Add Child Element"),
-      avail_element_ids: () =>
-        location_to_add_element == "sibling" ? avail_sibling_element_ids : avail_child_element_ids,
-      on_item_click: (input) => {
-        if (input == "paste") {
-          paste_astc_markdown_location_to_add_element = {
-            selector_id: element?.selector_id,
-            location_to_add_element: location_to_add_element == "sibling" ? "sibling" : "child",
-          }
-          paste_astc_markdown_popover_manager.open()
-          return
-        }
-        setTimeout(() => {
-          if (location_to_add_element == "sibling") {
-            add_sibling_el(element?.selector_id, input)
-          } else {
-            add_child_el(element?.selector_id, input)
-          }
-        }, 500)
-      },
-    })
-    let children = $state([])
-    if (Array.isArray(element?.children)) {
-      for (let child of element?.children) {
-        children.push(prep_element(child))
-      }
-    }
-    return {
-      get element() {
-        return element
-      },
-      get children() {
-        return children
-      },
-      get edit_attributes_popover_button_manager() {
-        return edit_attributes_popover_button_manager
-      },
-      get extra_popover_manager() {
-        return extra_popover_manager
-      },
-      get extra_popover_button_manager() {
-        return extra_popover_button_manager
-      },
-      get add_element_manager() {
-        return add_element_manager
-      },
-      get preempt_add_child_element_button_manager() {
-        return preempt_add_child_element_button_manager
-      },
-      get small_preempt_add_child_element_button_manager() {
-        return small_preempt_add_child_element_button_manager
-      },
-      get preempt_add_sibling_element_below_button_manager() {
-        return preempt_add_sibling_element_below_button_manager
-      },
-      get reset_ids_button_manager() {
-        return reset_ids_button_manager
-      },
-      get copy_markdown_button_manager() {
-        return copy_markdown_button_manager
-      },
-      get copy_astc_button_manager() {
-        return copy_astc_button_manager
-      },
-      get shift_element_up_5_button_manager() {
-        return shift_element_up_5_button_manager
-      },
-      get shift_element_up_button_manager() {
-        return shift_element_up_button_manager
-      },
-      get shift_element_down_button_manager() {
-        return shift_element_down_button_manager
-      },
-      get shift_element_down_5_button_manager() {
-        return shift_element_down_5_button_manager
-      },
-      get delete_button_manager() {
-        return delete_button_manager
-      },
-      get avail_child_element_ids() {
-        return avail_child_element_ids
-      },
-      get avail_sibling_element_ids() {
-        return avail_sibling_element_ids
-      },
-      get parent_el() {
-        return parent_el
-      },
-      get total_siblings() {
-        return total_siblings
-      },
-      get element_index_of_siblings() {
-        return element_index_of_siblings
-      },
-      open_edit_attributes_popover,
-    }
-  }
-
-  function get_parent_el(selector_id, element = null) {
-    function get_parent_el_recursive(selector_id, element) {
-      if (selector_id && element && Array.isArray(element?.children)) {
-        for (let child of element.children) {
-          if (child?.selector_id == selector_id) {
-            return element
-          }
-        }
-        for (let child of element.children) {
-          const res = get_parent_el_recursive(selector_id, child)
-          if (res) {
-            return res
-          }
-        }
-      }
-      return null
-    }
-    return get_parent_el_recursive(selector_id, element ?? versions?.[selected_version_index])
-  }
-
-  function add_version(version) {
-    versions = [deep_copy(version), ...versions.slice(selected_version_index)]
-    selected_version_index = 0
-    set_selected_version(0)
-    if (config?.on_change) {
-      config?.on_change(deep_copy(version))
-    }
-  }
-
-  function handle_element_child_drag_over(e, selector_id, is_children = false) {
-    e.preventDefault()
-    e.stopPropagation()
-    dragged_over_element_child = { selector_id, is_children }
-  }
-
-  function handle_element_child_drag_drop(e, selector_id, is_children = false) {
-    e.stopPropagation()
-    if (selector_id == dragging_selector_id) {
-      dragging_selector_id = null
-      return
-    }
-    const found_element = traverse_els_for_match(dragging_selector_id)
-    const removed_version = remove_el_recursive(selected_version_prepped?.element, dragging_selector_id)
-    let readded_version = null
-    if (is_children) {
-      readded_version = add_child_to_el_recursive(removed_version, selector_id, found_element)
-    } else {
-      let dom_el_parent = get_parent_el(selector_id, removed_version)
-      const element_index_of_siblings = Array.isArray(dom_el_parent?.children)
-        ? dom_el_parent.children.findIndex((h) => h.selector_id == selector_id)
-        : null
-      if (dom_el_parent && found_element) {
-        if (Array.isArray(dom_el_parent?.children)) {
-          dom_el_parent.children.splice(element_index_of_siblings, 0, found_element)
-        } else {
-          dom_el_parent.children = [found_element]
-        }
-        readded_version = replace_el_recursive(removed_version, dom_el_parent?.selector_id, dom_el_parent)
-      }
-    }
-    add_version(readded_version)
-    dragging_selector_id = null
-  }
-  function handle_element_child_drag_start(e, selector_id) {
-    e.stopPropagation()
-    dragging_selector_id = selector_id
-  }
-  function handle_element_child_drag_end(e, selector_id) {
-    dragged_over_element_child = null
-    dragging_selector_id = null
-  }
-
-  function reset_ids(selector_id) {
-    const found_element = traverse_els_for_match(selector_id)
-    const clean_element = reset_ids_recursive(found_element)
-    const new_version = find_and_replace_element(selector_id, selected_version_prepped?.element, clean_element)
-    add_version(new_version)
-  }
-
-  function reset_ids_recursive(element, selector_id) {
-    if (!element?.selector_id || element?.selector_id == selector_id) {
-      return null
-    }
-    element.selector_id = create_unique_id(null, 8)
-    let new_children = []
-    if (Array.isArray(element?.children)) {
-      for (let child of element?.children) {
-        const child_new_el = reset_ids_recursive(child, selector_id)
-        if (child_new_el) {
-          new_children.push(child_new_el)
-        }
-      }
-    }
-    element.children = new_children
-    return element
-  }
-
-  function find_and_replace_element(selector_id, root_el, replacement_el) {
-    function replace_recursive(node) {
-      if (!node) return null
-      if (node.selector_id === selector_id) {
-        return deep_copy(replacement_el)
-      }
-      const new_children = Array.isArray(node.children) ? node.children.map(replace_recursive).filter(Boolean) : []
-      return {
-        type_id: node.type_id,
-        selector_id: node.selector_id,
-        attributes: node.attributes ? { ...node.attributes } : node.attributes,
-        children: new_children,
-      }
-    }
-    return replace_recursive(root_el)
-  }
-
-  function copy_markdown() {
-    copy_to_clipboard(astc_to_markdown(selected_version_prepped?.element))
-  }
-
-  function copy_astc() {
-    copy_to_clipboard(JSON.stringify(selected_version_prepped?.element))
-  }
-
-  function copy_text() {
-    copy_to_clipboard(astc_to_embedding_text(selected_version_prepped?.element))
-  }
-
-  function finish() {
-    if (typeof config?.on_finish == "function") {
-      config?.on_finish(selected_version_prepped?.element)
-    }
-  }
-
-  function open_edit_markdown_modal() {
-    paste_astc_markdown_text_input_manager.set_val(astc_to_markdown(selected_version_prepped?.element))
-    paste_astc_markdown_popover_manager.open()
-  }
-
-  function set_astc_from_markdown() {
-    add_version(markdown_to_astc(paste_astc_markdown_text_input_manager?.val))
-    paste_astc_markdown_popover_manager.close()
-  }
-
-  let astc_element_string = $state(null)
-  function add_astc_to_element_children(element) {
-    if (Array.isArray(element?.children) && astc_element_string) {
-      element.children.push(JSON.parse(astc_element_string))
-    } else if (astc_element_string) {
-      element.children = [JSON.parse(astc_element_string)]
-    }
-    astc_element_string = null
-    paste_astc_markdown_popover_manager.close()
-  }
-
-  function scroll_to_selector_id(selector_id) {
-    const container = document.getElementById(`panel_scroll_${id}`)
-    if (!container || !selector_id) return
-    const el = container.querySelector(`#selector_id_${selector_id}`)
-    if (!el) return
-    const el_rect = el.getBoundingClientRect()
-    const c_rect = container.getBoundingClientRect()
-    const is_visible = el_rect.top >= c_rect.top && el_rect.bottom <= c_rect.bottom
-    if (!is_visible) {
-      el.scrollIntoView({
-        behavior: "smooth",
-        block: "center",
-        inline: "nearest",
-      })
-    }
-  }
-
-  function pulse_focus(selector_id) {
-    const container = document.getElementById(`panel_scroll_${id}`)
-    const el = container?.querySelector(`#selector_id_${selector_id}`)
-    if (!el) return
-    el.classList.add("focus_pulse")
-    setTimeout(() => el.classList.remove("focus_pulse"), 1000)
-  }
-
-  function set_focused_selector_id(selector_id, is_scroll_to = false) {
-    focused_selector_id = selector_id
-    if (selector_id && is_scroll_to) {
-      scroll_to_selector_id(selector_id)
-      pulse_focus(selector_id)
-    }
-  }
-
-  function add_sibling_el(selector_id, el_type_id, element_to_add = null) {
-    let dom_el_parent = get_parent_el(selector_id)
-    const element_index_of_siblings = Array.isArray(dom_el_parent?.children)
-      ? dom_el_parent.children.findIndex((h) => h.selector_id == selector_id)
-      : null
-    if (!element_to_add) {
-      element_to_add = get_new_element_to_add(el_type_id)
-    }
-    if (dom_el_parent && element_to_add) {
-      if (Array.isArray(dom_el_parent.children)) {
-        dom_el_parent.children.splice(element_index_of_siblings + 1, 0, element_to_add)
-      } else {
-        dom_el_parent.children = [element_to_add]
-      }
-      replace_el(dom_el_parent?.selector_id, dom_el_parent)
-    }
-    location_to_add_element = "child"
-  }
-
-  function initiate_add_sibling_el_to_selector(selector_id) {
-    const dom_el_parent = get_parent_el(selector_id)
-    const avail_element_ids = calc_child_element_options(dom_el_parent)
-    if (avail_element_ids.length > 1) {
-      location_to_add_element = "sibling"
-      find_and_open_add_element_popover_selector_id(selected_version_prepped, selector_id ?? "root")
-    } else if (avail_element_ids.length == 1) {
-      add_sibling_el(selector_id, avail_element_ids?.[0])
-    }
-  }
-
-  function initiate_add_child_el_to_selector(selector_id) {
-    const found_element = traverse_els_for_match(selector_id)
-    const avail_child_element_ids = calc_child_element_options(found_element)
-    location_to_add_element = "child"
-    if (avail_child_element_ids.length > 1) {
-      find_and_open_add_element_popover_selector_id(selected_version_prepped, selector_id ?? "root")
-    } else if (avail_child_element_ids.length == 1) {
-      add_child_el(selector_id, avail_child_element_ids[0])
-    }
-  }
-
-  function find_and_open_add_element_popover_selector_id(element_prepped, selector_id) {
-    if (element_prepped?.element?.selector_id == selector_id) {
-      if (typeof element_prepped?.add_element_manager?.popover_manager?.open == "function") {
-        element_prepped.add_element_manager.popover_manager.open()
-        return
-      }
-    } else if (Array.isArray(element_prepped?.children)) {
-      for (let child of element_prepped?.children) {
-        find_and_open_add_element_popover_selector_id(child, selector_id)
-      }
-    }
-    return
-  }
-
-  function add_child_el(selector_id, type_id) {
-    const found_element = traverse_els_for_match(selector_id)
-    const element_to_add = get_new_element_to_add(type_id)
-    if (!found_element) {
-      replace_el(selector_id, element_to_add)
-    } else {
-      add_el_to_el_children(selector_id, element_to_add)
-    }
-    location_to_add_element = "child"
-  }
-
-  function add_el_to_el_children(selector_id, new_element) {
-    add_version(add_child_to_el_recursive(selected_version_prepped?.element, selector_id, new_element))
-  }
-
-  function add_child_to_el_recursive(element, selector_id, new_element) {
-    if (element?.selector_id == selector_id) {
-      const existing_children = Array.isArray(element?.children) ? element?.children : []
-      element.children = [...existing_children, new_element]
-      return element
-    }
-    let new_children = []
-    if (Array.isArray(element?.children)) {
-      for (let child of element?.children) {
-        new_children = [...new_children, add_child_to_el_recursive(child, selector_id, new_element)]
-      }
-    }
-    element.children = new_children
-    return element
-  }
-
-  function replace_el(selector_id, new_element) {
-    add_version(replace_el_recursive(selected_version_prepped?.element, selector_id, new_element))
-  }
-
-  function replace_el_recursive(element, selector_id, new_element) {
-    if (!element?.selector_id || element?.selector_id == selector_id) {
-      return new_element
-    }
-    let new_children = []
-    if (Array.isArray(element?.children)) {
-      for (let child of element?.children) {
-        new_children = [...new_children, replace_el_recursive(child, selector_id, new_element)]
-      }
-    }
-    element.children = new_children
-    return element
-  }
-
-  function delete_el(selector_id) {
-    add_version(remove_el_recursive(selected_version_prepped?.element, selector_id))
-  }
-
-  function remove_el_recursive(element, selector_id) {
-    if (!element?.selector_id || element?.selector_id == selector_id) {
-      return null
-    }
-    let new_children = []
-    if (Array.isArray(element?.children)) {
-      for (let child of element?.children) {
-        const child_without_removed_el = remove_el_recursive(child, selector_id)
-        if (child_without_removed_el) {
-          new_children = [...new_children, child_without_removed_el]
-        }
-      }
-    }
-    element.children = new_children
-    return element
-  }
-
-  function traverse_els_for_match(selector_id) {
-    return traverse_els_for_match_recursive(selected_version_prepped?.element, selector_id)
-  }
-
-  function traverse_els_for_match_recursive(element, selector_id) {
-    if (element?.selector_id == selector_id) {
-      return element
-    }
-    if (Array.isArray(element?.children)) {
-      for (let child of element?.children) {
-        const matched_element_from_children = traverse_els_for_match_recursive(child, selector_id)
-        if (matched_element_from_children) {
-          return matched_element_from_children
-        }
-      }
-    }
-    return null
-  }
-
-  function shift_el(selector_id, i_shift) {
-    let dom_el_parent = get_parent_el(selector_id)
-    if (!dom_el_parent) {
-      return
-    }
-    const selector_index = dom_el_parent.children.findIndex((h) => h.selector_id == selector_id)
-    function move_element(array, from, to) {
-      const copy = [...array]
-      const element_to_move = copy.splice(from, 1)[0]
-      copy.splice(to, 0, element_to_move)
-      return copy
-    }
-    dom_el_parent.children = move_element(deep_copy(dom_el_parent.children), selector_index, selector_index + i_shift)
-    replace_el(selected_version_prepped?.element, dom_el_parent?.selector_id, dom_el_parent)
-  }
-
-  function set_el_from_astc_el_string(selector_id, astc_string) {
-    add_version(replace_el(selected_version_prepped?.element, selector_id, JSON.parse(astc_string)))
-  }
-
-  function copy_element_astc(selector_id) {
-    copy_to_clipboard(JSON.stringify(traverse_els_for_match(selector_id)))
-  }
-
-  function copy_element_markdown(selector_id) {
-    copy_to_clipboard(astc_to_markdown(traverse_els_for_match(selector_id)))
-  }
-
-  function open_edit_element_attributes_popover(selector_id) {
-    const found_element = traverse_els_for_match(selector_id)
-    if (!node_types?.hasOwnProperty(found_element?.type_id) || !node_types?.[found_element?.type_id]?.attributes) {
-      return
-    }
-    find_and_open_edit_element_attributes(selected_version_prepped, selector_id)
-  }
-
-  function find_and_open_edit_element_attributes(element_prepped, selector_id) {
-    if (element_prepped?.element?.selector_id == selector_id) {
-      if (typeof element_prepped?.open_edit_attributes_popover == "function") {
-        element_prepped?.open_edit_attributes_popover()
-        return
-      }
-    } else if (Array.isArray(element_prepped?.children)) {
-      for (let child of element_prepped?.children) {
-        find_and_open_edit_element_attributes(child, selector_id)
-      }
-    }
-    return
-  }
-
-  function get_new_element_to_add(type_id) {
-    let new_dom_el = {
-      type_id: type_id,
-      selector_id: create_unique_id(null, 8),
-      children: [],
-      attributes: {},
-    }
-    function add_base_attributes_to_element(element, node_types) {
-      if (!node_types || !element) {
-        return element
-      } else if (!node_types?.[element.type_id] || !node_types[element.type_id]?.attributes) {
-        element.attributes = null
-        return element
-      }
-      let attribute_obj = {}
-      for (let key of Object.keys(node_types[element.type_id].attributes)) {
-        attribute_obj[key] = null
-      }
-      element.attributes = attribute_obj
-      return element
-    }
-    function add_base_children_to_element(element) {
-      if (!element || !element.type_id) {
-        return element
-      }
-      let children = Array.isArray(element?.children) ? element.children : []
-      if (node_types[element.type_id] && node_types[element.type_id]?.child_elements) {
-        for (let childElementId of Object.keys(node_types[element.type_id].child_elements)) {
-          if (
-            node_types[element.type_id].child_elements[childElementId].child_min_limit > 0 &&
-            children.length < node_types[element.type_id].child_elements[childElementId].child_min_limit
-          ) {
-            children.push(get_new_element_to_add(childElementId))
-          }
-        }
-      }
-      element.children = children
-      return element
-    }
-    new_dom_el = add_base_attributes_to_element(new_dom_el)
-    new_dom_el = add_base_children_to_element(new_dom_el)
-    return new_dom_el
-  }
-
-  function calc_child_element_options(element, is_sibling = false) {
-    if (!node_types) {
-      return []
-    }
-    let parent_el = element
-    if (is_sibling) {
-      parent_el = get_parent_el(element?.selector_id)
-    }
-    if (!parent_el?.type_id) {
-      return Object.keys(node_types)
-    }
-    let allowed_to_add_child_element_ids = []
-    for (let [key, val] of Object.entries(node_types?.[parent_el?.type_id]?.child_elements || {})) {
-      let cur_el_children_of_type = Array.isArray(parent_el?.children)
-        ? parent_el.children.filter((h) => h?.type_id === key)
-        : []
-      if (!val?.child_max_limit || cur_el_children_of_type.length < val?.child_max_limit) {
-        allowed_to_add_child_element_ids.push(key)
-      }
-    }
-    allowed_to_add_child_element_ids.sort((a, b) => {
-      const display_order_a = node_types[a]?.display_order
-      const display_order_b = node_types[b]?.display_order
-      if (display_order_a === null) return 1
-      if (display_order_b === null) return -1
-      return display_order_a - display_order_b
-    })
-    return allowed_to_add_child_element_ids
-  }
-
-  const all_selector_ids = $derived(collect_all_selector_ids(selected_version_prepped?.element))
-
-  function collect_all_selector_ids(element) {
-    let acc = []
-    if (element?.selector_id) {
-      acc = [element.selector_id]
-    }
-    if (Array.isArray(element?.children)) {
-      for (let element_child of element.children) {
-        const acc_child = collect_all_selector_ids(element_child)
-        acc = [...acc, ...acc_child]
-      }
-    }
-    return acc
-  }
-
-  function set_element_attributes(selector_id, new_attributes) {
-    add_version(change_el_attrs(selected_version_prepped?.element, selector_id, new_attributes))
-  }
-
-  function change_el_attrs(content_el, selector_id, attributes) {
-    let children = []
-    if (Array.isArray(content_el?.children) && content_el?.children.length > 0) {
-      for (let child of content_el.children) {
-        children = [...children, change_el_attrs(child, selector_id, attributes)]
-      }
-    }
-    content_el.children = children
-    if (content_el?.selector_id == selector_id) {
-      content_el.attributes = attributes
-    }
-    return content_el
-  }
-
-  function set_element_attribute(selector_id, attribute, val) {
-    add_version(change_el_attr(selected_version_prepped?.element, selector_id, attribute, val))
-  }
-
-  function change_el_attr(content_el, selector_id, attribute, val) {
-    let children = []
-    if (Array.isArray(content_el?.children) && content_el?.children.length > 0) {
-      for (let child of content_el.children) {
-        children = [...children, change_el_attr(child, selector_id, attribute, val)]
-      }
-    }
-    content_el.children = children
-    if (content_el?.selector_id == selector_id) {
-      content_el.attributes[attribute] = val
-    }
-    return content_el
-  }
-
-  function clean_content(val) {
-    let word_count = 0
-    let character_count = 0
-    let embedding_text_items = []
-    let cleaned_attributes = {}
-    let cleaned_children = []
-    let total_elements = 1
-    let total_nests = 1
-    let warnings = []
-    if (!val?.type_id || !node_types.hasOwnProperty(val?.type_id)) {
-      warnings.push({ type: "error", message: `type_id of ${val?.type_id} is not allowed` })
-      return {
-        warnings,
-        word_count,
-        character_count,
-        embedding_text: "",
-        total_elements,
-        total_nests,
-        val: null,
-      }
-    }
-    for (let [attribute_key, attribute_value] of Object.entries(node_types[val?.type_id]?.attributes)) {
-      if (val?.attributes && typeof val.attributes == "object" && !Array.isArray(val?.attributes)) {
-        // attribute_value?.type example color_literal and i should call a clean function for that
-        const from_variable_path_key = `${attribute_key}_from_variable_path`
-        if (val?.attributes.hasOwnProperty(attribute_key)) {
-          cleaned_attributes[attribute_key] = val?.attributes[attribute_key]
-        } else if (
-          val?.attributes.hasOwnProperty(from_variable_path_key) &&
-          Array.isArray(val?.attributes?.[from_variable_path_key])
-        ) {
-          cleaned_attributes[from_variable_path_key] = val?.attributes[from_variable_path_key]
-        }
-        if (attribute_key == "content" && val?.attributes?.content) {
-          embedding_text_items.push(val?.attributes.content)
-          word_count += val.attributes.content.split(/\s+/).filter(Boolean).length
-          character_count += val.attributes.content.length
-        }
-      }
-    }
-    if (Array.isArray(val?.children) && val?.children.length > 0) {
-      for (let child of val?.children) {
-        const res = clean_content(child)
-        word_count += res.word_count
-        character_count += res.character_count
-        total_elements += res.total_elements
-        total_nests += res.total_nests
-        embedding_text_items.push(res.embedding_text)
-        warnings = warnings.concat(res.warnings)
-        cleaned_children.push(res?.val)
-      }
-    }
-    let embedding_text = embedding_text_items
-      .join(" ")
-      .replace(/\s{2,}/g, " ")
-      .replace(/[^\x00-\x7F]/g, "")
-      .replace(/"/g, "")
-      .trim()
-    const sentence_endings = [".", "?", "!"]
-    if (["h1", "h2", "h3", "h4", "h5", "h6", "td", "th", "li", "p", "div"].includes(val?.type_id)) {
-      let last_char = embedding_text.slice(-1)
-      if (!sentence_endings.includes(last_char)) {
-        embedding_text += "."
-      }
-    }
-    embedding_text = embedding_text.replace(/\n/g, "")
-    return {
-      warnings,
-      word_count,
-      character_count,
-      embedding_text,
-      total_elements,
-      total_nests,
-      val: {
-        type_id: val?.type_id,
-        selector_id: val?.selector_id,
-        attributes: cleaned_attributes,
-        children: cleaned_children,
-      },
-    }
-  }
-
-  function init(config) {
-    definition_stack = config?.definition_stack ?? []
-    versions = [config?.val]
-    storage = config?.storage
-    storage_default_folder_path = config?.storage_default_folder_path
-    storage_path = config?.storage_path
-    preempt_add_first_element_button_manager = create_button_manager({
-      type: "outlined",
-      support_icon: "edit",
-      is_compressed: true,
-      text: "Add First Element",
-      on_click: () => first_el_add_element_manager?.popover_manager?.open(),
-    })
-    let allowed_to_add_element_ids = []
-    for (let [key, val] of Object.entries(node_types || {})) {
-      if (val?.kind == "content") {
-        allowed_to_add_element_ids.push(key)
-      }
-    }
-    first_el_add_element_manager = create_add_element_manager({
-      header: "Add First Element",
-      avail_element_ids: () => allowed_to_add_element_ids,
-      on_item_click: (input) => {
-        if (input == "paste") {
-          paste_astc_markdown_location_to_add_element = null
-          paste_astc_markdown_popover_manager.open()
-          return
-        }
-        setTimeout(() => {
-          const element_to_add = get_new_element_to_add(input)
-          add_version(element_to_add)
-        }, 500)
-      },
-    })
-    paste_astc_markdown_popover_manager = create_popover_manager({
-      type: "panel",
-      header: "Markdown to astc",
-      target_width: 600,
-      target_height: 600,
-    })
-    paste_astc_markdown_dropdown_manager = create_dropdown_manager({
-      val: "astc",
-      options: ["astc", "markdown"],
-      label: "Input Type",
-      is_button_compressed: true,
-      mb: 1,
-    })
-    paste_astc_markdown_text_input_manager = create_text_input_manager({
-      type: "text_area",
-      rows: 15,
-      placeholder: () =>
-        paste_astc_markdown_dropdown_manager?.val == "markdown"
-          ? "## Some Markdown"
-          : `{
-    type_id: "p",
-    selector_id: "p_dxeox",
-    attributes: {},
-    children: [
-      {
-        type_id: "base_text",
-        selector_id: "base_text_ylzrw",
-        children: [],
-        attributes: {
-          content: "Example",
-        },
-      },
-    ],
-  }`,
-    })
-    paste_astc_markdown_finish_button_manager = create_button_manager({
-      mt: 0.5,
-      text: "Set from astc/Markdown",
-      on_click: () => {
-        let astc_to_add = null
-        if (paste_astc_markdown_dropdown_manager?.val == "markdown") {
-          astc_to_add = markdown_to_astc(paste_astc_markdown_text_input_manager?.val)
-        } else if (paste_astc_markdown_dropdown_manager?.val == "astc") {
-          astc_to_add = JSON.parse(paste_astc_markdown_text_input_manager?.val)
-        }
-        setTimeout(() => {
-          if (paste_astc_markdown_location_to_add_element?.location_to_add_element == "sibling") {
-            add_sibling_el(paste_astc_markdown_location_to_add_element?.selector_id, null, astc_to_add)
-          } else if (paste_astc_markdown_location_to_add_element?.location_to_add_element == "child") {
-            add_el_to_el_children(paste_astc_markdown_location_to_add_element?.selector_id, astc_to_add)
-          } else {
-            add_version(astc_to_add)
-          }
-          paste_astc_markdown_popover_manager.close()
-          paste_astc_markdown_text_input_manager.set_val(null)
-        }, 500)
-      },
-    })
-    attributes_input = create_attributes_input_manager({
-      storage: storage,
-      storage_default_folder_path: storage_default_folder_path,
-      storage_path: storage_path,
-      get_defined_options: get_defined_options,
-      set_focused_selector_id: set_focused_selector_id,
-    })
-    set_selected_version(0)
-  }
-
-  init(config)
-
-  return {
-    id,
-    get val() {
-      return versions?.[selected_version_index]
-    },
-    get versions_len() {
-      return versions_len
-    },
-    get selected_version_prepped() {
-      return selected_version_prepped
-    },
-    get storage() {
-      return storage
-    },
-    get storage_default_folder_path() {
-      return storage_default_folder_path
-    },
-    get focused_selector_id() {
-      return focused_selector_id
-    },
-    get paste_astc_markdown_popover_manager() {
-      return paste_astc_markdown_popover_manager
-    },
-    get paste_astc_markdown_location_to_add_element() {
-      return paste_astc_markdown_location_to_add_element
-    },
-    get paste_astc_markdown_dropdown_manager() {
-      return paste_astc_markdown_dropdown_manager
-    },
-    get paste_astc_markdown_text_input_manager() {
-      return paste_astc_markdown_text_input_manager
-    },
-    get paste_astc_markdown_finish_button_manager() {
-      return paste_astc_markdown_finish_button_manager
-    },
-    get location_to_add_element() {
-      return location_to_add_element
-    },
-    get astc_element_string() {
-      return astc_element_string
-    },
-    get all_selector_ids() {
-      return all_selector_ids
-    },
-    get preempt_add_first_element_button_manager() {
-      return preempt_add_first_element_button_manager
-    },
-    get first_el_add_element_manager() {
-      return first_el_add_element_manager
-    },
-    get content_manager() {
-      return content_manager
-    },
-    get attributes_input() {
-      return attributes_input
-    },
-    get dragging_selector_id() {
-      return dragging_selector_id
-    },
-    get dragged_over_element_child() {
-      return dragged_over_element_child
-    },
-
-    init,
-    clean_content,
-    add_version,
-    finish,
-    copy_markdown,
-    copy_astc,
-    copy_text,
-    set_focused_selector_id,
-    get_new_element_to_add,
-    calc_child_element_options,
-
-    // content overview
-    open_edit_markdown_modal,
-    set_astc_from_markdown,
-
-    // add element
-    initiate_add_sibling_el_to_selector,
-    add_sibling_el,
-    initiate_add_child_el_to_selector,
-    add_child_el,
-    add_astc_to_element_children,
-
-    // element more
-    copy_element_astc,
-    copy_element_markdown,
-    shift_el,
-    set_el_from_astc_el_string,
-    delete_el,
-
-    // element attributes
-    open_edit_element_attributes_popover,
-    set_element_attribute,
-    set_element_attributes,
-
-    pass_event_down,
-    reset_ids,
-
-    handle_element_child_drag_over,
-    handle_element_child_drag_drop,
-    handle_element_child_drag_start,
-    handle_element_child_drag_end,
-  }
-}