sveltekit-ui 1.0.0

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

@@ -0,0 +1,1167 @@
+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 "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, loops) {
+  if (Array.isArray(path)) {
+    let combined_variables_loc = deep_copy({
+      variables: variables,
+      loops: loops,
+    })
+    for (let path_item of path) {
+      if (Array.isArray(path_item)) {
+        let sub_val_from_path = get_variable_from_path(path_item)
+        combined_variables_loc = combined_variables_loc?.[sub_val_from_path]
+      } else {
+        combined_variables_loc = combined_variables_loc?.[path_item]
+      }
+    }
+    return combined_variables_loc
+  }
+  return null
+}
+
+export function clean_variable_path(path, variables, loops) {
+  // eg. ['variables','dddd',['loops',0]] to ['variables','dddd',3]
+  if (Array.isArray(path)) {
+    let cleaned_path = []
+    for (let path_item of path) {
+      if (Array.isArray(path_item)) {
+        let sub_val_from_path = get_variable_from_path(path_item, variables, loops)
+        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, loops) {
+  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, loops)
+        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, loops)
+        delete cleaned_attributes[att_key]
+      }
+    }
+  }
+  return cleaned_attributes
+}
+
+export function astc_to_static_attributes(astc, variables, loops) {
+  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, loops)
+  }
+  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, loops))
+    }
+    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}" ${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 ""
+  }
+}
+
+function increase_loops_on_path(path) {
+  let cleaned_path = null
+  if (Array.isArray(path)) {
+    cleaned_path = []
+    for (let path_item of path) {
+      if (Array.isArray(path_item)) {
+        if (path_item?.[0] == "loops" && typeof path_item?.[1] == "number") {
+          cleaned_path.push(["loops", path_item?.[1] + 1])
+        } else {
+          cleaned_path.push(increase_loops_on_path(path_item))
+        }
+      } else {
+        cleaned_path.push(path_item)
+      }
+    }
+  }
+  return cleaned_path
+}
+
+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_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") {
+      let leading_variable_path_children = increase_loops_on_path(leading_variable_path)
+      leading_variable_path_children = [
+        ...(Array.isArray(leading_variable_path_children) ? leading_variable_path_children : []),
+        ["loops", 0],
+      ]
+      const child_astc = variables_data_type_remaining_to_astc(
+        variables_data_type_remaining?.items,
+        preferred_content_use,
+        leading_variable_path_children
+      )
+      return astc_element("array_uniform_input", [child_astc], {
+        val_from_variable_path: leading_variable_path,
+        ...(variables_data_type_remaining?.attributes ?? {}),
+      })
+    }
+    // if (preferred_content_type == "object") {
+    //   // maybe infer as table
+    // }
+    let leading_variable_path_children = increase_loops_on_path(leading_variable_path)
+    leading_variable_path_children = [
+      ...(Array.isArray(leading_variable_path_children) ? leading_variable_path_children : []),
+      ["loops", 0],
+    ]
+    const child_astc = variables_data_type_remaining_to_astc(
+      variables_data_type_remaining?.items,
+      preferred_content_use,
+      leading_variable_path_children
+    )
+    return astc_element("loop", [child_astc], {
+      val_from_variable_path: leading_variable_path,
+      ...(variables_data_type_remaining?.attributes ?? {}),
+      font_size: 1.2,
+    })
+    // } 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") {
+      let leading_variable_path_children = increase_loops_on_path(leading_variable_path)
+      leading_variable_path_children = [
+        ...(Array.isArray(leading_variable_path_children) ? leading_variable_path_children : []),
+        ["loops", 0],
+      ]
+      const child_astc = variables_data_type_remaining_to_astc(
+        variables_data_type_remaining?.items,
+        preferred_content_use,
+        leading_variable_path_children
+      )
+      return astc_element("object_uniform_input", [child_astc], {
+        val_from_variable_path: leading_variable_path,
+        ...(variables_data_type_remaining?.attributes ?? {}),
+      })
+    }
+    let leading_variable_path_children = increase_loops_on_path(leading_variable_path)
+    leading_variable_path_children = [
+      ...(Array.isArray(leading_variable_path_children) ? leading_variable_path_children : []),
+      ["loops", 0],
+    ]
+    const child_astc = variables_data_type_remaining_to_astc(
+      variables_data_type_remaining?.items,
+      preferred_content_use,
+      leading_variable_path_children
+    )
+    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 = 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")
+      console.log("cronnnnn", structure)
+    } else if (keys.includes("main_number") && keys.includes("country_code")) {
+      structure = json_to_data_type(data, "phone_literal")
+      console.log("phonnnnn", structure)
+    } 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
+}