sveltekit-ui 1.1.17 → 1.1.18

package/dist/Components/ContentInput/index.svelte.js

@@ -0,0 +1,1197 @@
+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 "../../client/index.js"
+import { create_button_manager } from "../Button/index.svelte.js"
+import { create_popover_manager } from "../Popover/index.svelte.js"
+import { create_dropdown_manager } from "../Dropdown/index.svelte.js"
+import { create_text_input_manager } from "../TextInput/index.svelte.js"
+import { create_attributes_input_manager } from "./AttributesInput/index.svelte.js"
+import { create_content_manager } from "../Content/index.svelte.js"
+import { create_add_element_manager } from "./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,
+  }
+}