sveltekit-ui 1.1.74 → 1.1.76

package/src/lib/client/astc_formatting/index.js

@@ -1,1128 +0,0 @@
-import { create_unique_id, deep_copy, time_zone_options, language_options } from "$lib/client/index.js"
-
-export function astc_element(type_id, children = [], attrs = {}) {
-  return {
-    type_id: type_id,
-    selector_id: create_unique_id(null, 8),
-    children: children,
-    attributes: attrs,
-  }
-}
-
-function process_line(match_groups, interline_astc_children, previous_base_text) {
-  const { strong, em, strong_em, code_inline, link, image, base_text } = match_groups
-  if (strong_em || strong || em || code_inline || link || image) {
-    if (previous_base_text) {
-      interline_astc_children.push(astc_element("base_text", [], { content: previous_base_text }))
-      previous_base_text = ""
-    }
-  }
-  if (strong_em) {
-    interline_astc_children.push(astc_element("strong_em", [], { content: strong_em.slice(3, -3) }))
-  } else if (strong) {
-    interline_astc_children.push(astc_element("strong", [], { content: strong.slice(2, -2) }))
-  } else if (em) {
-    interline_astc_children.push(astc_element("em", [], { content: em.slice(1, -1) }))
-  } else if (code_inline) {
-    interline_astc_children.push(astc_element("code_inline", [], { content: code_inline.slice(1, -1) }))
-  } else if (link) {
-    const name_match = link.match(/^\[(.*?)\]/)
-    const href_match = link.match(/\((.*?)\)$/)
-    const name = name_match ? name_match[1] : ""
-    const href = href_match ? href_match[1] : ""
-    interline_astc_children.push(astc_element("a", [], { content: name, href: href }))
-  } else if (image) {
-    const alt_match = image.match(/^!\[(.*?)\]/)
-    const src_match = image.match(/\((.*?)\)$/)
-    const alt = alt_match ? alt_match[1] : ""
-    const src = src_match ? src_match[1] : ""
-    interline_astc_children.push(astc_element("img", [], { alt: alt, src: src }))
-  } else if (base_text) {
-    previous_base_text += base_text
-  } else {
-    previous_base_text += " "
-  }
-  return previous_base_text
-}
-
-function sub_list_to_astc_children(assembled_lines) {
-  let lists_astc = []
-  let list_type = assembled_lines?.[0]?.type
-  let list_astc_children = []
-  let subgroup = []
-  let assembled_lines_to_use = [...assembled_lines, { type: "END", level: -1, val: null }]
-  for (let assem_line of assembled_lines_to_use) {
-    if (assem_line?.level < 1) {
-      if (subgroup.length > 0) {
-        const sublist_astc_children = sub_list_to_astc_children(subgroup)
-        list_astc_children.push(...sublist_astc_children)
-        subgroup = []
-      }
-      if (list_type != assem_line?.type) {
-        lists_astc.push(astc_element(list_type, list_astc_children))
-        list_astc_children = []
-        list_type = assem_line?.type
-      }
-      list_astc_children.push(astc_element("li", markdown_to_astc_children(assem_line?.val)))
-    } else {
-      subgroup.push({
-        type: assem_line?.type,
-        level: assem_line?.level - 1,
-        val: assem_line?.val,
-      })
-    }
-  }
-  return lists_astc
-}
-
-function markdown_to_astc_children(markdown, base_text_wrapper_type = null) {
-  let astc_children = []
-  let assembled_lines = []
-  let currently_in_type = null
-  markdown += "\nEND00END"
-  for (let line of markdown.split(/[\n]+/)) {
-    if (currently_in_type) {
-      if (currently_in_type == "code" && line.trim().startsWith("```")) {
-        //end of code
-        let language
-        let code_lines = []
-        for (let assem_line of assembled_lines) {
-          if (assem_line?.type == "language") {
-            language = assem_line?.val
-          } else {
-            code_lines.push(assem_line?.val)
-          }
-        }
-        const code_markdown = code_lines.join("\n")
-        astc_children.push(astc_element("code", [], { content: code_markdown, language: language }))
-        assembled_lines = []
-        currently_in_type = null
-        line = line.trim().slice(3)
-      } else if (currently_in_type == "table" && !line.trim().startsWith("|")) {
-        // end of table
-        let thead_children = []
-        let tbody_children = []
-        for (let row of assembled_lines) {
-          if (["thead", "tbody"].includes(row?.type)) {
-            let tr_children = []
-            const regex = /\|\s*([^|]*?)(?=\s*\||$)/g
-            const matches = Array.from(row?.val.matchAll(regex))
-            const columns = matches ? matches.map((match) => match[1].trim()).filter((column) => column !== "") : []
-            if (row.type == "thead") {
-              for (let column of columns) {
-                tr_children.push(astc_element("th", markdown_to_astc_children(column)))
-              }
-              thead_children.push(astc_element("tr", tr_children))
-            } else if (row.type == "tbody") {
-              for (let column of columns) {
-                tr_children.push(astc_element("td", markdown_to_astc_children(column)))
-              }
-              tbody_children.push(astc_element("tr", tr_children))
-            }
-          }
-        }
-        const astc_thead = astc_element("thead", thead_children)
-        const astc_tbody = astc_element("tbody", tbody_children)
-        const astc_table = astc_element("table", [astc_thead, astc_tbody])
-        astc_children.push(astc_table)
-        assembled_lines = []
-        currently_in_type = null
-      } else if (
-        currently_in_type == "list" &&
-        !(line.match(/^\s*\d+\./) || line.trim().startsWith("- ") || line.trim().startsWith("* "))
-      ) {
-        //end of list
-        let level_options = []
-        for (let assembled_line of assembled_lines) {
-          if (!level_options.includes(assembled_line?.level)) {
-            level_options.push(assembled_line?.level)
-          }
-        }
-        const sorted_levels = level_options.sort((a, b) => a - b)
-        let clean_level_assembled_lines = []
-        for (let assembled_line of assembled_lines) {
-          const simple_level = sorted_levels.findIndex((h) => h == assembled_line?.level)
-          clean_level_assembled_lines.push({
-            type: assembled_line?.type,
-            level: simple_level,
-            val: assembled_line?.val,
-          })
-        }
-        const list_astc_children = sub_list_to_astc_children(clean_level_assembled_lines)
-        astc_children.push(...list_astc_children)
-        assembled_lines = []
-        currently_in_type = null
-      }
-    }
-    if (currently_in_type == "code" || line.trim().startsWith("```")) {
-      //start of code
-      if (currently_in_type != "code" && line.trim().startsWith("```")) {
-        const intro_row = line.trim().slice(3)
-        if (intro_row.length > 0) {
-          assembled_lines.push({ type: "language", val: intro_row })
-        }
-        currently_in_type = "code"
-      } else {
-        assembled_lines.push({ type: "code", val: line })
-      }
-    } else if (line.startsWith(">")) {
-      //line is blockquote
-      const blockquote_astc_children = markdown_to_astc_children(line.trim().slice(1).trim())
-      astc_children.push(
-        astc_element("figure", [astc_element("blockquote", blockquote_astc_children, { cite: null })], {
-          caption: null,
-        })
-      )
-    } else if (line.trim().startsWith("|")) {
-      //start of table
-      currently_in_type = "table"
-      if (/^\|\s?(:?-{2})/.test(line.trim())) {
-        assembled_lines.push({ type: "divider" })
-      } else {
-        const type = assembled_lines.some((h) => h.type == "divider") ? "tbody" : "thead"
-        assembled_lines.push({ type: type, val: line })
-      }
-    } else if (line.match(/^\s*\d+\./) || line.trim().startsWith("- ") || line.trim().startsWith("* ")) {
-      //start of list
-      currently_in_type = "list"
-      let is_ul = line.trim().startsWith("- ") || line.trim().startsWith("* ")
-      const level = line.match(/^ */)[0].length
-      if (is_ul) {
-        assembled_lines.push({
-          type: "ul",
-          level: level,
-          val: line.trim().slice(2),
-        })
-      } else {
-        assembled_lines.push({
-          type: "ol",
-          level: level,
-          val: line.match(/^\s*\d+\.\s*(.*)/)[1],
-        })
-      }
-    } else if (line.match(/^#+/)) {
-      // heading
-      const heading_match = line.match(/^#+/)
-      const heading_level = heading_match[0].length
-      const markdown_remaining = line.slice(heading_level).trimStart()
-      let heading_astc = astc_element(`h${heading_level}`, markdown_to_astc_children(markdown_remaining))
-      astc_children.push(heading_astc)
-    } else if (line.startsWith("---")) {
-      // horiz rule
-      astc_children.push(astc_element("hr"))
-    } else if (!line.startsWith("END00END")) {
-      let interline_astc_children = []
-      const regex =
-        /(?<strong_em>\*\*\*[^*]+\*\*\*|___[^_]+___)|(?<strong>\*\*[^*]+\*\*|__[^_]+__)|(?<em>\*[^*]+\*|_[^_]+_)|(?<code_inline>`[^`]+`)|(?<link>\[.*?\]\(.*?\))|(?<img>!\[.*?\]\(.*?\))|(?<base_text>[^\s*_`[\]]+)|\s+/g
-      const matches = Array.from(line.matchAll(regex))
-      let previous_base_text = ""
-      for (let match of matches) {
-        previous_base_text = process_line(match.groups, interline_astc_children, previous_base_text)
-      }
-      process_base_text()
-      function process_base_text() {
-        if (previous_base_text) {
-          interline_astc_children.push(astc_element("base_text", [], { content: previous_base_text }))
-          previous_base_text = ""
-        }
-      }
-      if (base_text_wrapper_type) {
-        astc_children.push(astc_element(base_text_wrapper_type, interline_astc_children))
-      } else {
-        astc_children.push(...interline_astc_children)
-      }
-    }
-  }
-  return astc_children
-}
-
-export function markdown_to_astc(markdown) {
-  const astc_children = markdown_to_astc_children(markdown, "p")
-  return {
-    type_id: "div",
-    children: astc_children,
-    attributes: {},
-    selector_id: create_unique_id(null, 8),
-  }
-}
-
-export function astc_to_markdown(astc) {
-  function process_children(children, parent, level = 0) {
-    return children.map((child, index) => astc_element_to_markdown(child, parent, level, index)).join("")
-  }
-
-  function get_table_divider_row(thead_children) {
-    const divider_cells = thead_children[0].children.map((th) => {
-      const content_length = th.children.map((child) => child.attributes.content.length).reduce((a, b) => a + b, 0)
-      return "-".repeat(content_length)
-    })
-    return "| " + divider_cells.join(" | ") + " |"
-  }
-
-  function astc_element_to_markdown(element, parent = null, level = 0, index = 0) {
-    const { type_id, children, attributes } = element
-    switch (type_id) {
-      case "h1":
-      case "h2":
-      case "h3":
-      case "h4":
-      case "h5":
-      case "h6":
-        const heading_level = parseInt(type_id.slice(1))
-        return `${"#".repeat(heading_level)} ${process_children(children)}\n`
-      case "section":
-      case "div":
-      case "p":
-      case "footer":
-        return `${process_children(children)}\n`
-      case "strong":
-        return `**${attributes.content}**`
-      case "em":
-        return `*${attributes.content}*`
-      case "strong_em":
-        return `***${attributes.content}***`
-      case "code_inline":
-        return `\`${attributes.content}\``
-      case "a":
-      case "ref":
-        return `[${attributes.content ?? attributes.href}](${attributes.href})`
-      case "img":
-        return `![${attributes.alt}](${attributes.src})\n`
-      case "ul":
-      case "ol":
-        return children.map((child, index) => astc_element_to_markdown(child, element, level + 1, index)).join("\n")
-      case "li":
-        const list_item_prefix = parent && parent.type_id === "ol" ? `${index + 1}. ` : "- "
-        const indent = "  ".repeat(Math.max(0, level - 1))
-        return `${indent}${list_item_prefix}${process_children(children, element, level)}`
-      case "figure":
-        if (attributes.caption) {
-          return `> ${process_children(children)}\n> —${attributes.caption}\n`
-        } else {
-          return `> ${process_children(children)}\n`
-        }
-      case "code":
-        const language = attributes.language ? attributes.language : ""
-        return `\`\`\`${language}\n${attributes.content}\n\`\`\`\n`
-      case "hr":
-        return "---\n"
-      case "br":
-        return "\n"
-      case "table":
-        const table_rows = children.map((child) => astc_element_to_markdown(child))
-        return table_rows.join("\n") + "\n"
-      case "thead":
-        const header_rows = children.map((child) => astc_element_to_markdown(child))
-        const divider_row = get_table_divider_row(children)
-        return header_rows.join("\n") + "\n" + divider_row
-      case "tbody":
-        const rows = children.map((child) => astc_element_to_markdown(child))
-        return rows.join("\n")
-      case "tr":
-        const cells = children.map((child) => astc_element_to_markdown(child))
-        return `| ${cells.join(" | ")} |`
-      case "th":
-      case "td":
-        return process_children(children)
-      case "base_text":
-        return attributes.content
-      default:
-        return ""
-    }
-  }
-  return astc_element_to_markdown(astc)
-}
-
-export function get_variable_from_path(path, variables, defs) {
-  if (Array.isArray(path)) {
-    let combined_variables_loc = deep_copy({
-      variables: variables,
-      defs: defs,
-    })
-    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
-}
-
-export function clean_variable_path(path, variables, defs) {
-  // eg. ['variables','dddd',['defs',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, variables, defs)
-        cleaned_path.push(sub_val_from_path)
-      } else {
-        cleaned_path.push(path_item)
-      }
-    }
-    return cleaned_path
-  }
-  return null
-}
-
-export function clean_attributes_from_variable_path(attributes, variables, defs) {
-  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, variables, defs)
-        const att_key_to_set = att_key.split("_from_variable_path")?.[0]
-        cleaned_attributes[att_key_to_set] = get_variable_from_path(clean_path, variables, defs)
-        delete cleaned_attributes[att_key]
-      }
-    }
-  }
-  return cleaned_attributes
-}
-
-export function astc_to_static_attributes(astc, variables, defs) {
-  if ([undefined, null].includes(astc)) {
-    return null
-  }
-  let astc_loc = deep_copy(astc)
-  if (Object.keys(astc_loc?.attributes || {}).length > 0) {
-    astc_loc.attributes = clean_attributes_from_variable_path(astc_loc?.attributes, variables, defs)
-  }
-  if (Array.isArray(astc_loc?.children)) {
-    let cleaned_children = []
-    for (let child of astc_loc.children) {
-      cleaned_children.push(astc_to_static_attributes(child, variables, defs))
-    }
-    astc_loc.children = cleaned_children
-  }
-  return astc_loc
-}
-
-export function astc_to_embedding_text(astc) {
-  // this needs work tbd
-  let embedding_text = ""
-  if (astc?.attributes?.content) {
-    embedding_text += astc.attributes.content
-  } else if (astc?.attributes?.val) {
-    embedding_text += astc.attributes.val // tbd like maybe time types get converted to good display content
-  }
-  if (astc?.children) {
-    for (let child of astc.children) {
-      let child_text = astc_to_embedding_text(child)
-      embedding_text += child_text ? " " + child_text.trim() : ""
-    }
-  }
-  embedding_text = embedding_text.replace(/\n/g, "")
-  embedding_text = embedding_text.replace(/\s{2,}/g, " ")
-  embedding_text = embedding_text.trim()
-  if (embedding_text.length > 0) {
-    if (["th", "td"].includes(astc?.type_id)) {
-      if (![".", "?", "!"].includes(embedding_text.slice(-1))) {
-        embedding_text += "."
-      } else {
-        embedding_text += " "
-      }
-    } else {
-      // console.log("tbd_astc_to_emb", astc)
-    }
-  }
-  embedding_text = embedding_text.replace(/[^\x00-\x7F]/g, "")
-  embedding_text = embedding_text.replace(/"/g, "")
-  return embedding_text
-}
-
-function hue_to_rgb(p, q, t) {
-  if (t < 0) t += 1
-  if (t > 1) t -= 1
-  if (t < 1 / 6) return p + (q - p) * 6 * t
-  if (t < 1 / 2) return q
-  if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6
-  return p
-}
-
-export function hcl_to_hex(h, c, l) {
-  const hues = [
-    345, 360, 10, 20, 30, 45, 55, 70, 85, 100, 120, 140, 155, 170, 185, 200, 215, 230, 245, 260, 275, 290, 305, 320,
-    335,
-  ]
-  h = hues[h]
-  c = (100 * c) / 24
-  l = (100 * l) / 24
-  h /= 360
-  c /= 100
-  l /= 100
-  let r, g, b
-  if (c === 0) {
-    r = g = b = l
-  } else {
-    const q = l < 0.5 ? l * (1 + c) : l + c - l * c
-    const p = 2 * l - q
-    r = hue_to_rgb(p, q, h + 1 / 3)
-    g = hue_to_rgb(p, q, h)
-    b = hue_to_rgb(p, q, h - 1 / 3)
-  }
-  r = Math.floor(r * 255)
-    .toString(16)
-    .padStart(2, "0")
-  g = Math.floor(g * 255)
-    .toString(16)
-    .padStart(2, "0")
-  b = Math.floor(b * 255)
-    .toString(16)
-    .padStart(2, "0")
-  return `#${r}${g}${b}`
-}
-
-function attribute_to_string(attr_obj) {
-  return attr_obj
-    ? Object.entries(attr_obj || {})
-        .filter(([key, value]) => value !== null)
-        .map(([key, value]) => `${key}="${value}"`)
-        .join(" ")
-    : ""
-}
-
-export function astc_to_email_html(astc, options, slots_html_and_text_body) {
-  function get_src(src, storage_id) {
-    let storage_path = options?.storage_path ?? "/api/v1/storage/{storage_id}"
-    if (src) {
-      return src
-    } else if (storage_id && storage_path) {
-      return storage_path.replace("{storage_id}", storage_id)
-    } else {
-      return null
-    }
-  }
-  let font_family = options?.font_family
-  let text_color_hex = options?.text_color_hex
-  if (["h1", "h2", "h3", "h4", "h5", "h6"].includes(astc?.type_id)) {
-    font_family = options?.font_family_serif
-    text_color_hex = options?.header_color_hex
-  }
-  let style_attributes = `font-family: ${font_family}; color: ${text_color_hex};`
-  if (astc?.type_id === "table") {
-    style_attributes += `border: 1px solid ${text_color_hex}; border-collapse: collapse;`
-  } else if (["th", "td"].includes(astc?.type_id)) {
-    style_attributes += `border: 1px solid ${text_color_hex}; text-align: left; padding: 8px;`
-  } else if (["div"].includes(astc?.type_id)) {
-    if (astc?.attributes?.background_color) {
-      style_attributes += `background-color: ${astc?.attributes.background_color};`
-    }
-    if (astc?.attributes?.border_color) {
-      style_attributes += `border: 1px solid ${astc?.attributes.border_color};`
-    }
-    if (astc?.attributes?.border_radius) {
-      style_attributes += `border-radius: ${astc?.attributes?.border_radius}rem;`
-    }
-    if (astc?.attributes?.padding) {
-      style_attributes += `padding: ${astc?.attributes?.padding}rem;`
-    }
-    if (astc?.attributes?.align_content || astc?.attributes?.justify_content) {
-      style_attributes += `display: grid; place-content: ${astc?.attributes?.align_content ?? "stretch"} ${
-        astc?.attributes?.justify_content ?? "stretch"
-      };`
-    }
-  }
-  style_attributes = `style="${style_attributes}"`
-  switch (astc?.type_id) {
-    case "slot":
-      console.log("slot_case", astc, slots_html_and_text_body)
-      if (Object.keys(slots_html_and_text_body || {}).includes(astc?.attributes?.val)) {
-        console.log("return_slot_html", slots_html_and_text_body?.[astc?.attributes?.val]?.html_body)
-        return slots_html_and_text_body?.[astc?.attributes?.val]?.html_body
-      }
-    case "link": {
-      const text = astc.attributes.display_text
-        ? astc.attributes.display_text
-        : (astc.children || []).map((child) => astc_to_email_html(child, options, slots_html_and_text_body)).join("") ||
-          astc.attributes.href
-      return `<a ${attribute_to_string(astc.attributes)}>
-        ${text}
-      </a>`
-    }
-    case "h1":
-    case "h2":
-    case "h3":
-    case "h4":
-    case "h5":
-    case "h6":
-    case "section":
-    case "div":
-    case "p":
-    case "footer":
-    case "ul":
-    case "ol":
-    case "li":
-    case "table":
-    case "thead":
-    case "tbody":
-    case "tr":
-    case "th":
-    case "td":
-      return `<${astc?.type_id} ${style_attributes} ${attribute_to_string(astc?.attributes)}>${astc?.children
-        .map((child) => astc_to_email_html(child, options, slots_html_and_text_body))
-        .join("")}</${astc?.type_id}>`
-    case "strong":
-      return `<strong>${astc?.attributes.content}</strong>`
-    case "em":
-      return `<em>${astc?.attributes.content}</em>`
-    case "strong_em":
-      return `<strong><em>${astc?.attributes.content}</em></strong>`
-    case "code_inline":
-      return `<code>${astc?.attributes.content}</code>`
-    case "a":
-      return `<a href="${astc?.attributes.href}">${astc?.attributes.content || astc?.attributes.href}</a>`
-    case "image": // img tbd
-      return `<img style="border-radius: 10px;" width="100%" height="auto" src="${get_src(
-        astc?.attributes?.src,
-        astc?.attributes?.storage_id
-      )}" alt="${astc?.attributes?.alt ?? "unknown"}" ${attribute_to_string(astc?.attributes)} />`
-    case "code":
-      return `<pre><code ${astc?.attributes?.language ? `class="${astc?.attributes?.language}"` : ""}>${
-        astc?.attributes?.content
-      }</code></pre>`
-    case "figure":
-      const caption = astc?.attributes?.caption ? `<figcaption>${astc?.attributes?.caption}</figcaption>` : ""
-      return `<figure ${style_attributes} ${attribute_to_string(astc?.attributes)}>${astc?.children
-        .map((child) => astc_to_email_html(child, options, slots_html_and_text_body))
-        .join("")}${caption}</figure>`
-    case "blockquote":
-      return `<blockquote cite="${astc?.attributes.cite}">${astc?.children
-        .map((child) => astc_to_email_html(child, options, slots_html_and_text_body))
-        .join("")}</blockquote>`
-    case "hr":
-      return `<hr ${attribute_to_string(astc?.attributes)} />`
-    case "base_text":
-      return astc?.attributes.content
-    default:
-      return ""
-  }
-}
-
-export function variables_data_type_remaining_to_astc(
-  variables_data_type_remaining,
-  preferred_content_use = "display",
-  leading_variable_path = []
-) {
-  // consider passing in options / attributes like label, min, max, is_nullable, etc
-  // dropdown input tbd
-  // tag display
-  // link
-  // file input/display
-  // image input/display
-  // audio input/display
-  // table advanced input/display
-  // qr input/display
-  // x_post input/display
-  // youtube_video input/display
-  // video input/display
-  if (!variables_data_type_remaining?.type) {
-    return null
-  } else if (variables_data_type_remaining?.type == "color_literal") {
-    if (preferred_content_use == "input") {
-      return astc_element("color_input", [], {
-        val_from_variable_path: leading_variable_path,
-        ...(variables_data_type_remaining?.attributes ?? {}),
-      })
-    }
-    return astc_element("color", [], {
-      val_from_variable_path: leading_variable_path,
-      size: 10,
-      ...(variables_data_type_remaining?.attributes ?? {}),
-    })
-  } else if (variables_data_type_remaining?.type == "text_literal") {
-    if (preferred_content_use == "input") {
-      return astc_element("text_input", [], {
-        val_from_variable_path: leading_variable_path,
-        ...(variables_data_type_remaining?.attributes ?? {}),
-      })
-    }
-    return astc_element("base_text", [], {
-      content_from_variable_path: leading_variable_path,
-      size: 10,
-      ...(variables_data_type_remaining?.attributes ?? {}),
-    })
-  } else if (["int_literal", "float_literal", "bigint_literal"].includes(variables_data_type_remaining?.type)) {
-    if (preferred_content_use == "input") {
-      return astc_element("text_input", [], {
-        type: "number",
-        val_from_variable_path: leading_variable_path,
-        ...(variables_data_type_remaining?.attributes ?? {}),
-      })
-    }
-    return astc_element("number", [], {
-      val_from_variable_path: leading_variable_path,
-      ...(variables_data_type_remaining?.attributes ?? {}),
-    })
-  } else if (variables_data_type_remaining?.type == "location_literal") {
-    if (preferred_content_use == "input") {
-      return astc_element("location_input", [], {
-        is_popover_button: true,
-        is_popover: true,
-        val_from_variable_path: leading_variable_path,
-        ...(variables_data_type_remaining?.attributes ?? {}),
-      })
-    }
-    return astc_element("location", [], {
-      val_from_variable_path: leading_variable_path,
-      ...(variables_data_type_remaining?.attributes ?? {}),
-    })
-  } else if (variables_data_type_remaining?.type == "time_zone_literal") {
-    if (preferred_content_use == "input") {
-      return astc_element("dropdown", [], {
-        options: time_zone_options,
-        is_button_compressed: true,
-        val_from_variable_path: leading_variable_path,
-        ...(variables_data_type_remaining?.attributes ?? {}),
-      })
-    }
-    return astc_element("base_text", [], {
-      content_from_variable_path: leading_variable_path,
-      ...(variables_data_type_remaining?.attributes ?? {}),
-    })
-  } else if (variables_data_type_remaining?.type == "language_literal") {
-    if (preferred_content_use == "input") {
-      return astc_element("dropdown", [], {
-        options: language_options,
-        is_compressed: true,
-        val_from_variable_path: leading_variable_path,
-        ...(variables_data_type_remaining?.attributes ?? {}),
-      })
-    }
-    return astc_element("base_text", [], {
-      content_from_variable_path: leading_variable_path,
-      ...(variables_data_type_remaining?.attributes ?? {}),
-    })
-  } else if (variables_data_type_remaining?.type == "json_literal") {
-    if (preferred_content_use == "input") {
-      return astc_element("json", [], {
-        val_from_variable_path: leading_variable_path,
-        ...(variables_data_type_remaining?.attributes ?? {}),
-        is_edit_mode: true,
-      })
-    }
-    return astc_element("json", [], {
-      content_from_variable_path: leading_variable_path,
-      ...(variables_data_type_remaining?.attributes ?? {}),
-    })
-  } else if (variables_data_type_remaining?.type == "boolean_literal") {
-    if (preferred_content_use == "input") {
-      return astc_element("checkbox", [], {
-        type: "toggle",
-        val_from_variable_path: leading_variable_path,
-        ...(variables_data_type_remaining?.attributes ?? {}),
-      })
-    }
-    return astc_element("base_text", [], {
-      content_from_variable_path: leading_variable_path,
-      ...(variables_data_type_remaining?.attributes ?? {}),
-    })
-  } else if (variables_data_type_remaining?.type == "email_address_literal") {
-    if (preferred_content_use == "input") {
-      return astc_element("text_input", [], {
-        type: "email",
-        val_from_variable_path: leading_variable_path,
-        ...(variables_data_type_remaining?.attributes ?? {}),
-      })
-    }
-    return astc_element("email", [], {
-      val_from_variable_path: leading_variable_path,
-    })
-  } else if (variables_data_type_remaining?.type == "time_literal") {
-    if (preferred_content_use == "input") {
-      return astc_element("time_input", [], {
-        val_from_variable_path: leading_variable_path,
-        ...(variables_data_type_remaining?.attributes ?? {}),
-      })
-    }
-    return astc_element("time", [], {
-      val_from_variable_path: leading_variable_path,
-    })
-  } else if (variables_data_type_remaining?.type == "epoch_literal") {
-    if (preferred_content_use == "input") {
-      return astc_element("time_input", [], {
-        format: "epoch",
-        val_from_variable_path: leading_variable_path,
-        ...(variables_data_type_remaining?.attributes ?? {}),
-      })
-    }
-    return astc_element("time", [], {
-      format: "epoch",
-      val_from_variable_path: leading_variable_path,
-      ...(variables_data_type_remaining?.attributes ?? {}),
-    })
-  } else if (variables_data_type_remaining?.type == "cron_literal") {
-    if (preferred_content_use == "input") {
-      return astc_element("cron_input", [], {
-        val_from_variable_path: leading_variable_path,
-        ...(variables_data_type_remaining?.attributes ?? {}),
-      })
-    }
-    return astc_element("cron", [], {
-      val_from_variable_path: leading_variable_path,
-    })
-  } else if (variables_data_type_remaining?.type == "phone_literal") {
-    if (preferred_content_use == "input") {
-      return astc_element("phone_input", [], {
-        val_from_variable_path: leading_variable_path,
-        ...(variables_data_type_remaining?.attributes ?? {}),
-      })
-    }
-    return astc_element("phone_number", [], {
-      val_from_variable_path: leading_variable_path,
-      ...(variables_data_type_remaining?.attributes ?? {}),
-    })
-  } else if (variables_data_type_remaining?.type == "array_uniform_literal") {
-    if (preferred_content_use == "input") {
-      const child_astc = variables_data_type_remaining_to_astc(
-        variables_data_type_remaining?.items,
-        preferred_content_use,
-        [...leading_variable_path, ["loop_index"]]
-      )
-      return astc_element("array_uniform_input", [child_astc], {
-        val_from_variable_path: leading_variable_path,
-        ...(variables_data_type_remaining?.attributes ?? {}),
-        iter_identifier: "loop_index",
-      })
-    }
-    // if (preferred_content_type == "object") {
-    //   // maybe infer as table
-    // }
-    const child_astc = variables_data_type_remaining_to_astc(
-      variables_data_type_remaining?.items,
-      preferred_content_use,
-      [...leading_variable_path, ["loop_index"]]
-    )
-    return astc_element("loop", [child_astc], {
-      val_from_variable_path: leading_variable_path,
-      ...(variables_data_type_remaining?.attributes ?? {}),
-      font_size: 1.2,
-      iter_identifier: "loop_index",
-    })
-    // } else if (variables_data_type_remaining?.type == "list") {
-    // list input tbd just content input i guess
-    // but im thinking loops are for same children repeated but lists can be different so basically a div with no div tag
-    // let children = []
-    // if (Array.isArray(variables_data_type_remaining?.items)) {
-    //   for (let item of variables_data_type_remaining?.items) {
-    //     children.push(variables_data_type_remaining_to_astc(item?.type, preferred_content_use, leading_variable_path))
-    //   }
-    // }
-    // return astc_element("list", children)
-  } else if (variables_data_type_remaining?.type == "object_uniform_literal") {
-    if (preferred_content_use == "input") {
-      const child_astc = variables_data_type_remaining_to_astc(
-        variables_data_type_remaining?.items,
-        preferred_content_use
-      )
-      return astc_element("object_uniform_input", [child_astc], {
-        val_from_variable_path: leading_variable_path,
-        ...(variables_data_type_remaining?.attributes ?? {}),
-      })
-    }
-    const child_astc = variables_data_type_remaining_to_astc(
-      variables_data_type_remaining?.items,
-      preferred_content_use
-    )
-    return astc_element("object_uniform", [child_astc], {
-      val_from_variable_path: leading_variable_path,
-      ...(variables_data_type_remaining?.attributes ?? {}),
-    })
-  } else if (variables_data_type_remaining?.type == "object_literal") {
-    const label = variables_data_type_remaining?.attributes
-      ? astc_element("base_text", [], {
-          content: variables_data_type_remaining?.attributes?.label,
-          ...(variables_data_type_remaining?.attributes ?? {}),
-          font_size: 1.2,
-        })
-      : null
-    if (preferred_content_use == "input") {
-      let children = variables_data_type_remaining?.attributes?.label ? [label] : []
-      for (let [key, val] of Object.entries(variables_data_type_remaining?.properties || {})) {
-        let property_children = []
-        property_children.push(
-          astc_element("base_text", [], {
-            content: `${key ?? "NULL"}:`,
-            ...(variables_data_type_remaining?.attributes ?? {}),
-            font_size: 1.2,
-          })
-        )
-        if (val?.type != null) {
-          const property_astc = variables_data_type_remaining_to_astc(val, preferred_content_use, [
-            ...(Array.isArray(leading_variable_path) ? leading_variable_path : []),
-            key,
-          ])
-          property_children.push(property_astc)
-        } else {
-          property_children.push(astc_element("em", [], { content: "Data Type Not Set", font_size: 1.2 }))
-        }
-        children.push(astc_element("div", property_children))
-      }
-      return astc_element("div", children, { ...(variables_data_type_remaining?.attributes ?? {}) })
-    }
-    let children = label ? [label] : []
-    for (let [key, val] of Object.entries(variables_data_type_remaining?.properties || {})) {
-      let property_children = []
-      property_children.push(
-        astc_element("base_text", [], {
-          content: `${key ?? "NULL"}:`,
-          ...(variables_data_type_remaining?.attributes ?? {}),
-          font_size: 1.2,
-        })
-      )
-      if (val?.type != null) {
-        const property_astc = variables_data_type_remaining_to_astc(val, preferred_content_use, [
-          ...(Array.isArray(leading_variable_path) ? leading_variable_path : []),
-          key,
-        ])
-        property_children.push(property_astc)
-      } else {
-        property_children.push(astc_element("em", [], { content: "Data Type Not Set", font_size: 1.2 }))
-      }
-      children.push(astc_element("div", property_children))
-    }
-    return astc_element("div", children, { ...(variables_data_type_remaining?.attributes ?? {}) })
-  } else if (variables_data_type_remaining?.type == "table_id_for_foreign_row_literal") {
-    if (preferred_content_use == "input") {
-      return astc_element("table_row_id_input", [], {
-        table_id: variables_data_type_remaining?.attributes?.table_id,
-        val_from_variable_path: leading_variable_path,
-        ...(variables_data_type_remaining?.attributes ?? {}),
-      })
-    }
-    return astc_element("base_text", [], {
-      content_from_variable_path: leading_variable_path,
-      size: 10,
-      ...(variables_data_type_remaining?.attributes ?? {}),
-    })
-  }
-
-  // let preferred_content_type = (
-  //   preferred_content_use == "display"
-  //     ? node_types?.[variables_data_type_remaining?.type]?.display_options
-  //     : node_types?.[variables_data_type_remaining?.type]?.input_options
-  // )?.[0]
-  // if (preferred_content_type) {
-  //   // let attributes = {}
-  //   // if (Object.keys(node_types?.[preferred_content_type]?.attributes || {}).length > 0) {
-  //   //   for (let [key, value] of Object.entries(node_types?.[preferred_content_type]?.attributes || {})) {
-  //   //     if (["val_from_variable_path", "val"].includes(key)) {
-  //   //       attributes["val_from_variable_path"] = leading_variable_path
-  //   //     } else if (["content_from_variable_path", "content"].includes(key)) {
-  //   //       attributes["content_from_variable_path"] = leading_variable_path
-  //   //     } else {
-  //   //       attributes[key] = value?.default_value ?? null
-  //   //     }
-  //   //   }
-  //   // }
-  //   // astc_loc.attributes = attributes
-  //   return astc_element(preferred_content_type, [], attributes)
-  // }
-  return null
-}
-
-export function json_to_data_type(data, type = null, is_list_child = false) {
-  let structure = {
-    type: null,
-    attributes: {},
-  }
-  if (type == "number" || (!type && typeof data === "number")) {
-    if (data > 1000000000 && data < 2500000000) {
-      structure = {
-        ...structure,
-        type: "epoch_literal",
-        attributes: {
-          min: null,
-          max: null,
-        },
-      }
-    } else {
-      structure = {
-        ...structure,
-        type: "float_literal",
-        attributes: {
-          min: null,
-          max: null,
-        },
-      }
-    }
-  } else if (type == "slider") {
-    structure = {
-      ...structure,
-      type: "slider_literal",
-      attributes: {
-        min: null,
-        max: null,
-        step: null,
-      },
-    }
-  } else if (type == "boolean" || (!type && typeof data === "boolean")) {
-    structure = {
-      ...structure,
-      type: "boolean_literal",
-      attributes: {
-        on_val: null,
-        off_val: null,
-      },
-    }
-  } else if (type == "text" || (!type && typeof data === "string")) {
-    structure = {
-      ...structure,
-      type: "text_literal",
-    }
-  } else if (type == "time") {
-    structure = {
-      ...structure,
-      type: "time_literal",
-    }
-  } else if (type == "email") {
-    structure = {
-      ...structure,
-      type: "email_literal",
-    }
-  } else if (type == "phone_literal") {
-    structure = {
-      ...structure,
-      type: "phone_literal",
-    }
-  } else if (type == "cron_literal") {
-    structure = {
-      ...structure,
-      type: "cron_literal",
-    }
-  } else if (type == "dropdown") {
-    structure = {
-      ...structure,
-      type: "dropdown_literal",
-      attributes: {
-        options: [],
-      },
-    }
-  } else if (type == "color_literal") {
-    structure = {
-      ...structure,
-      type: "color_literal",
-    }
-  } else if (type == "image") {
-    structure = {
-      ...structure,
-      type: "image_literal",
-    }
-  } else if (type == "audio") {
-    structure = {
-      ...structure,
-      type: "audio_literal",
-    }
-  } else if (type == "location") {
-    structure = {
-      ...structure,
-      type: "location_literal",
-    }
-  } else if (type == "id") {
-    structure = {
-      ...structure,
-      type: "id_literal",
-      attributes: {
-        type: "lowercase_chars",
-        random_char_length: 20,
-      },
-    }
-  } else if (type == "loop" || (!type && Array.isArray(data))) {
-    let fattened_data_sample = data?.[0] // try and iterate over all the rows in case the first one has some null vals that later rows have good sample of
-    if (Array.isArray(data)) {
-      for (let i = 0; i < data.length; i++) {
-        if (typeof data?.[i] == "object" && !Array.isArray(data?.[i])) {
-          for (let [key, val] of Object.entries(data?.[i])) {
-            if (fattened_data_sample?.[key] == null) {
-              fattened_data_sample[key] = val
-            }
-          }
-        }
-      }
-    }
-    structure = {
-      ...structure,
-      type: "loop",
-      items: json_to_data_type(fattened_data_sample, null, true),
-      attributes: {},
-    }
-  } else if (type == "list" || (!type && Array.isArray(data))) {
-    // tbd loop vs list
-    structure = {
-      ...structure,
-      type: "list_literal",
-      items: json_to_data_type(data?.[0], null, true),
-      attributes: {},
-    }
-  } else if (type == "object" || (!type && typeof data === "object" && !Array.isArray(data) && data !== null)) {
-    // prob match on expected atttributes to give better match like c l h is_dark_theme might bet color_literal not object
-    // let node_type_best_match = null
-    // let node_type_best_match_attr_count = 1
-    // for (let [node_type_key, node_type_val] of Object.entries(node_types || {})) {
-    //   if (Object.keys(node_type_val?.attributes || {}).length > 0) {
-    //     let keys_that_are_an_attribute_match = 0
-    //     for (let property_key of Object.keys(data || {})) {
-    //       if (Object.keys(node_type_val?.attributes || {}).includes(property_key)) {
-    //         keys_that_are_an_attribute_match++
-    //       }
-    //     }
-    //     if (keys_that_are_an_attribute_match > node_type_best_match_attr_count) {
-    //       console.log("good", { keys_that_are_an_attribute_match, node_type_key, node_type_val })
-    //       node_type_best_match = node_type_key
-    //       node_type_best_match_attr_count = keys_that_are_an_attribute_match
-    //     }
-    //   }
-    //   // console.log("node_type_best_match", node_type_best_match)
-    // }
-
-    // if (node_type_best_match) {
-    // structure = json_to_data_type(data, node_type_best_match)
-    // console.log("str", { node_type_best_match, structure })
-    let keys = Object.keys(data || {})
-    if (keys.includes("l") && keys.includes("c") && keys.includes("h")) {
-      structure = json_to_data_type(data, "color_literal")
-    } else if (keys.includes("epoch") && keys.includes("hour") && keys.includes("year")) {
-      structure = json_to_data_type(data, "time_literal")
-    } else if (keys.includes("cron")) {
-      structure = json_to_data_type(data, "cron_literal")
-    } else if (keys.includes("main_number") && keys.includes("country_code")) {
-      structure = json_to_data_type(data, "phone_literal")
-    } else {
-      let properties = {}
-      for (let key of Object.keys(data || {})) {
-        const guessed_structure = json_to_data_type(data[key])
-        properties[key] = {
-          ...guessed_structure,
-          attributes: {
-            ...guessed_structure.attributes,
-            ...(is_list_child
-              ? {
-                  is_sortable: true,
-                  is_searchable: true,
-                  column_min_width: 5,
-                  column_max_width: 10,
-                  display_order: null,
-                  is_shown: true,
-                  filter_in_min: null,
-                  filter_in_max: null,
-                }
-              : {}),
-          },
-        }
-      }
-      structure = {
-        ...structure,
-        type: "object_literal",
-        properties: properties,
-        attributes: {
-          search_val: null,
-        },
-      }
-    }
-  }
-  return structure
-}