sveltekit-ui 1.0.0

package/dist/client/index.js

@@ -0,0 +1,729 @@
+export * from "./types/index.js"
+export * from "./astc_formatting/index.js"
+export * from "../Components/TimeInput/index.js"
+
+export function format_date(date, is_add_zero = false) {
+  if (date) {
+    const d = new Date(date * 1000) // convert seconds to milliseconds
+    const year = d.getFullYear()
+    const month = ((is_add_zero ? "0" : "") + (d.getMonth() + 1)).slice(-2)
+    const day = ((is_add_zero ? "0" : "") + d.getDate()).slice(-2)
+    return [month, day, year].join("/")
+  } else {
+    return "mm/dd/yyyy"
+  }
+}
+
+export function truncate(str, n) {
+  return str.length > n ? str.substr(0, n - 1) + "..." : str
+}
+
+export function get_obj_from_path(obj, path) {
+  let current = obj
+  for (let i = 0; i < path.length; i++) {
+    if (!(path[i] in current)) return false
+    current = current[path[i]]
+  }
+  return current
+}
+
+export function copy_to_clipboard(text) {
+  if (navigator && navigator.clipboard && navigator.clipboard.writeText) {
+    return navigator.clipboard.writeText(text)
+  }
+  return Promise.reject("The Clipboard API is not available.")
+}
+
+export function get_user_interface() {
+  const ua = navigator.userAgent
+  let browser_name = "unknown"
+  if (ua.indexOf("Firefox") > -1) {
+    browser_name = "Mozilla Firefox"
+  } else if (ua.indexOf("SamsungBrowser") > -1) {
+    browser_name = "Samsung Internet"
+  } else if (ua.indexOf("Opera") > -1 || ua.indexOf("OPR") > -1) {
+    browser_name = "Opera"
+  } else if (ua.indexOf("Trident") > -1) {
+    browser_name = "Microsoft Internet Explorer"
+  } else if (ua.indexOf("Edge") > -1) {
+    browser_name = "Microsoft Edge (Legacy)"
+  } else if (ua.indexOf("Edg") > -1) {
+    browser_name = "Microsoft Edge (Chromium)"
+  } else if (ua.indexOf("Chrome") > -1) {
+    browser_name = "Google Chrome or Chromium"
+  } else if (ua.indexOf("Safari") > -1) {
+    browser_name = "Apple Safari"
+  }
+  let device_type = "desktop"
+  if (/(tablet|ipad|playbook|silk)|(android(?!.*mobi))/i.test(ua)) {
+    device_type = "tablet"
+  }
+  if (/Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obi|ini)/.test(ua)) {
+    device_type = "mobile"
+  }
+  const interface_data = {
+    language: navigator.language,
+    languages: navigator.languages,
+    platform: navigator.platform,
+    // 'platform': navigator.userAgentData.platform, navigator.platform dep but no userAgentData on safari
+    vendor: navigator.vendor,
+    device_type: device_type,
+    browser_name: browser_name,
+    used_width: innerWidth,
+    used_height: innerHeight,
+    avail_height: screen.availHeight,
+    avail_width: screen.availWidth,
+    window_left: screenLeft,
+    window_top: screenTop,
+  }
+  return interface_data
+}
+
+export function color_var(l, c, h, o = 16, is_dark_theme_invert = true) {
+  let safe_o = Math.min(Math.max(o, 0), 24)
+  let safe_l = Math.min(Math.max(l, 0), 24)
+  let safe_c = Math.min(Math.max(c, 0), 24)
+  let safe_h = Math.min(Math.max(h, 0), 24)
+  return is_dark_theme_invert
+    ? `oklch(var(--l${safe_l}-t) var(--c${safe_c}) var(--h${safe_h}) / var(--o${safe_o}))`
+    : `oklch(var(--l${safe_l}) var(--c${safe_c}) var(--h${safe_h}) / var(--o${safe_o}))`
+}
+
+export function deep_copy(val) {
+  return JSON.parse(JSON.stringify(set_closurable(val, null)))
+  // return structuredClone(val ?? null)
+}
+
+export function is_deep_equal(obj1, obj2) {
+  if (obj1 === obj2) return true
+  if (typeof obj1 === "object" && obj1 !== null && typeof obj2 === "object" && obj2 !== null) {
+    const keys1 = Object.keys(obj1)
+    const keys2 = Object.keys(obj2)
+    if (keys1.length !== keys2.length) return false
+    for (const key of keys1) {
+      if (!obj2.hasOwnProperty(key)) return false
+      if (!is_deep_equal(obj1[key], obj2[key])) return false
+    }
+    return true
+  } else {
+    return obj1 === obj2
+  }
+}
+
+export function create_unique_id(prefix = null, len = 5) {
+  const characters = "abcdefghijklmnopqrstuvwxyz"
+  let randstr = ""
+  for (let i = 0; i < len; i++) {
+    randstr += characters.charAt(Math.floor(Math.random() * characters.length))
+  }
+  const unique_id = prefix ? `${prefix}_${randstr}` : randstr
+  return unique_id
+}
+
+export function is_20_char_az_format(id_input) {
+  const id_regex = /^[a-z]{20}$/
+  return id_regex.test(id_input)
+}
+
+export function create_file_name() {
+  const now = new Date()
+  const start_of_year = new Date(now.getFullYear(), 0, 0)
+  const diff = now - start_of_year
+  const one_day = 1000 * 60 * 60 * 24
+  const day_of_year = Math.floor(diff / one_day)
+  const current_year = now.getFullYear().toString()
+  const hour = now.getHours().toString().padStart(2, "0")
+  const minute = now.getMinutes().toString().padStart(2, "0")
+  const seconds = now.getSeconds().toString().padStart(2, "0")
+  const random_val = create_unique_id(null, 6)
+  return `${current_year}_${day_of_year}_${hour}_${minute}_${seconds}_${random_val}`
+}
+
+export function clean_file_name(file_name) {
+  if (!file_name) {
+    return create_file_name()
+  } else {
+    const parts = file_name.split(".")
+    const base_name = parts.length > 1 ? parts.slice(0, -1).join(".") : file_name
+    let cleaned_file_name = base_name
+      .replace(/[^a-zA-Z0-9-_\s]/g, "")
+      .replace(/[ -]+/g, " ")
+      .replace(/(^[ -]+|[ -]+$)/g, "")
+      .replace(/-/g, "_")
+      .replace(/\s+/g, "_")
+      .toLowerCase()
+    if (cleaned_file_name.length > 200) {
+      cleaned_file_name = cleaned_file_name.substring(0, 200)
+    }
+    return cleaned_file_name
+  }
+}
+
+export function clean_custom_identifier(identifier, maximum_length = 100) {
+  if ([undefined, null].includes(identifier)) {
+    return null
+  }
+  if (typeof identifier !== "string") {
+    identifier = String(identifier)
+  }
+  if (identifier.length < 1) {
+    return null
+  }
+  let cleaned_identifier = identifier
+    .toLowerCase()
+    .replace(/[^a-z0-9]/g, "_")
+    .replace(/_+/g, "_")
+    .replace(/^_+|_+$/g, "")
+  if (cleaned_identifier.length > maximum_length) {
+    cleaned_identifier = cleaned_identifier.substring(0, maximum_length)
+    cleaned_identifier = cleaned_identifier.replace(/_+$/, "")
+  }
+  return cleaned_identifier
+}
+
+export async function url_to_file(src, file_name, mime_type) {
+  const response = await fetch(src)
+  const data = await response.blob()
+  const metadata = {
+    type: mime_type || data.type,
+  }
+  const file = new File([data], file_name, metadata)
+  return file
+}
+
+export function get_ordinal_suffix(input) {
+  if (input % 10 === 1 && input !== 11) {
+    return "st"
+  } else if (input % 10 === 2 && input !== 12) {
+    return "nd"
+  } else if (input % 10 === 3 && input !== 13) {
+    return "rd"
+  } else {
+    return "th"
+  }
+}
+
+export function download_json(data, file_name) {
+  const json_string = JSON.stringify(data)
+  const data_blob = new Blob([json_string], { type: "application/json" })
+  const url = URL.createObjectURL(data_blob)
+  const link = document.createElement("a")
+  link.href = url
+  link.download = file_name ?? "data.json"
+  link.click()
+  URL.revokeObjectURL(url)
+}
+
+export function download_csv(data) {
+  const json_string = JSON.stringify(data)
+  const csv = json_to_csv(json_string)
+  const data_blob = new Blob([csv], { type: "text/csv;charset=utf-8;" })
+  const url = URL.createObjectURL(data_blob)
+  const link = document.createElement("a")
+  link.href = url
+  const filename = "data.csv"
+  link.download = filename
+  link.click()
+  URL.revokeObjectURL(url)
+}
+
+export function json_to_csv(obj_array) {
+  let array = typeof obj_array != "object" ? JSON.parse(obj_array) : obj_array
+  let str = ""
+  let headers = get_headers(array)
+  str += headers.join(",") + "\r\n"
+  for (let i = 0; i < array.length; i++) {
+    let line = ""
+    for (let header_index in headers) {
+      let header = headers[header_index]
+      let value = get_value_by_path(array?.[i], header.split("__"))
+      if (line != "") line += ","
+      if (typeof value === "string") {
+        value = value.replace(/"/g, '""')
+      }
+      line += `"${value}"`
+    }
+    str += line + "\r\n"
+  }
+  return str
+}
+
+export function csv_to_json(csv_text) {
+  let rows = []
+  let current_row = []
+  let current_field = ""
+  let in_quotes = false
+  csv_text = csv_text.replace(/\\\""/g, "__ESCAPED_QUOTE__")
+  for (let i = 0; i < csv_text.length; i++) {
+    const char = csv_text[i]
+    if (char === '"') {
+      if (in_quotes && i + 1 < csv_text.length && csv_text[i + 1] === '"') {
+        current_field += '"'
+        i++
+      } else {
+        in_quotes = !in_quotes
+      }
+    } else if (char === "," && !in_quotes) {
+      current_row.push(current_field)
+      current_field = ""
+    } else if ((char === "\n" || char === "\r") && !in_quotes) {
+      if (char === "\r" && i + 1 < csv_text.length && csv_text[i + 1] === "\n") {
+        i++
+      }
+      current_row.push(current_field)
+      rows.push(current_row)
+      current_row = []
+      current_field = ""
+    } else {
+      current_field += char
+    }
+  }
+  if (current_field !== "" || current_row.length > 0) {
+    current_row.push(current_field)
+    rows.push(current_row)
+  }
+  if (rows.length < 2) {
+    return []
+  }
+  const headers = rows[0]
+  let data_rows = rows.slice(1)
+  const final_result = data_rows.map((row) => {
+    const obj = {}
+    headers.forEach((header, index) => {
+      let val = row[index] === undefined ? "" : row[index].trim()
+      if (val.startsWith("{") && val.endsWith("}")) {
+        try {
+          val = val.replace(/__ESCAPED_QUOTE__/g, '\\"')
+          val = JSON.parse(val)
+        } catch (e) {
+          console.warn("JSON parse error for field:", header, val)
+        }
+      } else if (val.startsWith("[") && val.endsWith("]")) {
+        try {
+          val = val.replace(/__ESCAPED_QUOTE__/g, '\\"')
+          val = JSON.parse(val)
+        } catch (e) {
+          console.warn("JSON parse error for field:", header, val)
+        }
+      } else if (!isNaN(val)) {
+        val = Number(val)
+      } else if (val.toLowerCase() === "true" || val.toLowerCase() === "false") {
+        val = val.toLowerCase() === "true"
+      }
+      obj[header] = val
+    })
+    return obj
+  })
+  return final_result
+}
+
+function get_headers(array) {
+  let header_set = new Set()
+  for (let i = 0; i < array.length; i++) {
+    add_keys_to_set(array[i], header_set, "")
+  }
+  return Array.from(header_set)
+}
+
+function add_keys_to_set(obj, set, prefix) {
+  for (let key in obj) {
+    if (typeof obj[key] === "object" && obj[key] !== null) {
+      add_keys_to_set(obj[key], set, prefix + key + "__")
+    } else {
+      set.add(prefix + key)
+    }
+  }
+}
+
+function get_value_by_path(obj, path) {
+  console.log("get_value_by_path000", { obj, path })
+  if (Array.isArray(path)) {
+    for (let i = 0; i < path.length; i++) {
+      if (obj && typeof obj == "object" && obj.hasOwnProperty(path?.[i])) {
+        obj = obj?.[path?.[i]]
+        if (i === path.length - 1 && typeof obj === "object" && obj !== null) {
+          return ""
+        }
+      } else {
+        return ""
+      }
+    }
+  }
+  return obj
+}
+
+export function cron_to_english(input) {
+  if (!input) {
+    return
+  }
+  const [minute = "*", hour = "*", day_of_month = "*", month = "*", day_of_week = "*"] = (input || "")
+    .split(" ")
+    .map((part) => part || "*")
+  function get_ordinal_suffix(num) {
+    const j = num % 10,
+      k = num % 100
+    if (j === 1 && k !== 11) return `${num}st`
+    if (j === 2 && k !== 12) return `${num}nd`
+    if (j === 3 && k !== 13) return `${num}rd`
+    return `${num}th`
+  }
+  const translate = (field, type, special_cases = {}) => {
+    if (field === "*" && type == "minute") return "every minute"
+    if (field === "*") return ""
+    if (field.includes(",")) {
+      return `on ${field
+        .split(",")
+        .map((f) => special_cases[f] || get_ordinal_suffix(f))
+        .join(", ")} ${type}`
+    }
+    if (field.includes("/")) {
+      const [start, step] = field.split("/")
+      return `every ${type === "day of the week" ? step : get_ordinal_suffix(step)} ${type}${
+        start === "*" ? "" : " starting from " + type + " " + start
+      }`
+    }
+    if (field.endsWith("L")) return `on the last ${type}`
+    if (field.includes("#")) {
+      const [dow, nth] = field.split("#")
+      return `on every ${get_ordinal_suffix(nth)} ${special_cases[dow] || dow}`
+    }
+    if (field.includes("W")) return `nearest weekday to ${field.replace("W", "")} of the month`
+    return `on ${
+      type === "day of the week" ? special_cases[field] || field : "every " + get_ordinal_suffix(field) + " " + type
+    }`
+  }
+  const day_names = {
+    0: "Sunday",
+    1: "Monday",
+    2: "Tuesday",
+    3: "Wednesday",
+    4: "Thursday",
+    5: "Friday",
+    6: "Saturday",
+  }
+  const minute_text = translate(minute, "minute")
+  const hour_text = translate(hour, "hour")
+  const day_of_month_text = translate(day_of_month, "day of the month")
+  const month_text = translate(month, "month")
+  const day_of_week_text = translate(day_of_week, "day of the week", day_names)
+  const parts = [minute_text, hour_text, day_of_week_text, day_of_month_text, month_text].filter(Boolean)
+  let description = `Run ${parts.join(", ")}`
+  return description
+}
+
+export function set_closurable(input, default_value = null) {
+  return typeof input === "function" ? input() ?? default_value : input ?? default_value
+}
+
+export function set_closurable_color(input, default_value = null, is_css = false) {
+  let color = set_closurable(input, default_value)
+  if (typeof color == "object" && color != null) {
+    color = color
+      ? is_css
+        ? color_to_css(color)
+        : color_var(color?.l, color?.c, color?.h, color?.o, color?.is_dark_theme_invert)
+      : "transparent"
+  }
+  return color ?? default_value
+}
+
+export function color_to_css(input) {
+  return typeof input == "object" && !Array.isArray(input)
+    ? color_var(input?.l, input?.c, input?.h, input?.o, input?.is_dark_theme_invert)
+    : input ?? "transparent"
+}
+
+export function clean_folder_path(folder_path) {
+  let warnings = []
+  if (!Array.isArray(folder_path)) {
+    warnings.push("Folder path must be an array.")
+    return { cleaned_folder_path: [], warnings }
+  }
+  let cleaned_folder_path = folder_path.map((part) => {
+    let cleaned_part = clean_custom_identifier(part)
+    if (cleaned_part !== part) {
+      warnings.push(`"${part}" cleaned to "${cleaned_part}".`)
+    }
+    return cleaned_part
+  })
+  cleaned_folder_path = cleaned_folder_path.filter((part) => {
+    const is_valid = part.length <= 100 && !/^_|_$|__/.test(part)
+    if (!is_valid) {
+      warnings.push(`"${part}" is not a valid folder name.`)
+    }
+    return is_valid
+  })
+  return { cleaned_folder_path, warnings }
+}
+
+export async function get_image_dimensions_from_src(src) {
+  return new Promise((resolve, reject) => {
+    const img = new Image()
+    img.src = src
+    img.onload = () =>
+      resolve({
+        width: img.width,
+        height: img.height,
+        aspect_ratio: img.width && img.height ? Number((img.width / img.height).toFixed(5)) : null,
+      })
+    img.onerror = (error) => reject(error)
+  })
+}
+
+export function time_ago(epoch) {
+  const seconds = Math.floor((new Date() - new Date(epoch * 1000)) / 1000)
+  let interval = Math.floor(seconds / 31536000)
+  if (interval >= 1) {
+    return format_date(epoch, true)
+  }
+  interval = Math.floor(seconds / 2592000)
+  if (interval >= 1) {
+    return format_date(epoch, true)
+  }
+  interval = Math.floor(seconds / 604800)
+  if (interval >= 1) {
+    return interval + "w ago"
+  }
+  interval = Math.floor(seconds / 86400)
+  if (interval >= 1) {
+    return interval + "d ago"
+  }
+  interval = Math.floor(seconds / 3600)
+  if (interval >= 1) {
+    return interval + "h ago"
+  }
+  interval = Math.floor(seconds / 60)
+  if (interval >= 1) {
+    return interval + "m ago"
+  }
+  return "just now"
+}
+
+export function format_full_date(epoch) {
+  if (epoch == null) {
+    return null
+  }
+  const days_of_week = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"]
+  const months = ["jan", "feb", "mar", "apr", "may", "jun", "jul", "aug", "sep", "oct", "nov", "dec"]
+  const current_time = new Date()
+  const target_time = new Date(epoch * 1000)
+  const day_name = days_of_week[target_time.getDay()]
+  const month_name = months[target_time.getMonth()]
+  const day = target_time.getDate()
+  let hour = target_time.getHours()
+  const minute = target_time.getMinutes()
+  const am_pm = hour >= 12 ? "pm" : "am"
+  hour = hour % 12
+  hour = hour ? hour : 12
+  const time_diff_ms = current_time - target_time
+  const time_diff_s = time_diff_ms / 1000
+  const time_diff_m = time_diff_s / 60
+  const time_diff_h = time_diff_m / 60
+  const time_diff_d = time_diff_h / 24
+  let time_ago = ""
+  if (time_diff_d >= 1) {
+    time_ago = `${Math.floor(time_diff_d)} day${Math.floor(time_diff_d) > 1 ? "s" : ""} ago`
+  } else if (time_diff_h >= 1) {
+    time_ago = `${Math.floor(time_diff_h)} hour${Math.floor(time_diff_h) > 1 ? "s" : ""} ago`
+  } else {
+    time_ago = `${Math.floor(time_diff_m)} minute${Math.floor(time_diff_m) > 1 ? "s" : ""} ago`
+  }
+  const human_readable = `${day_name}, ${month_name} ${day}, ${hour}:${
+    minute < 10 ? "0" : ""
+  }${minute} ${am_pm} (${time_ago})`
+  return human_readable
+}
+
+export function get_data_type_at_path(path, full_data_type) {
+  let data_type_at_path_loc = deep_copy(full_data_type)
+  if (Array.isArray(path)) {
+    for (let item of path) {
+      if (Array.isArray(item)) {
+        item = get_data_type_at_path(item)
+      }
+      if (typeof item == "number" || data_type_at_path_loc?.hasOwnProperty("items")) {
+        data_type_at_path_loc = data_type_at_path_loc?.items
+      } else if (typeof item == "string") {
+        data_type_at_path_loc = data_type_at_path_loc?.properties?.[item]
+      }
+    }
+  }
+  return data_type_at_path_loc
+}
+
+export function set_content_variables(input, variables_combined, pass_event_down) {
+  console.log("set_content_variables000", deep_copy({ input, variables_combined, pass_event_down }))
+  if (!Array.isArray(input?.variable_path_to_target)) {
+    throw new Error("Path must be an array")
+  }
+  let content_variables_loc = deep_copy(variables_combined)
+  let temp = content_variables_loc
+  const path = input.variable_path_to_target
+  const last_key = path[path.length - 1]
+  for (let i = 0; i < path.length - 1; i++) {
+    const key = path[i]
+    if (!(key in temp) || typeof temp[key] !== "object" || temp[key] === null) {
+      if (Number.isInteger(last_key)) {
+        temp[key] = Array(last_key).fill(null)
+      } else {
+        temp[key] = {}
+      }
+    }
+    temp = temp[key]
+  }
+  if (input?.type == "set_variables_insert") {
+    if (Array.isArray(temp[last_key])) {
+      if (
+        typeof input?.index_to_insert_at === "number" &&
+        input?.index_to_insert_at >= 0 &&
+        input?.index_to_insert_at <= temp?.[last_key].length
+      ) {
+        temp[last_key].splice(input.index_to_insert_at, 0, input.value)
+      } else {
+        temp[last_key].push(input.value)
+      }
+    } else {
+      temp[last_key] = [input.value]
+    }
+  } else if (input?.type == "set_variables_delete") {
+    console.log("set_variables_delete", deep_copy({ temp, last_key }))
+    if (Array.isArray(temp)) {
+      if (typeof last_key === "number" && last_key > -1 && last_key < temp.length) {
+        temp.splice(last_key, 1)
+      }
+    } else if (typeof temp === "object" && temp?.hasOwnProperty(last_key)) {
+      delete temp[last_key]
+    }
+  } else if (input?.type == "set_variables_key") {
+    console.log("set_variables_key", deep_copy({ temp, last_key }))
+    if (Array.isArray(temp)) {
+      throw new Error("Cannot change key in array")
+    } else if (typeof temp === "object" && temp?.hasOwnProperty(last_key)) {
+      temp[input.value] = temp[last_key]
+      delete temp[last_key]
+    } else {
+      throw new Error("Key not found in object")
+    }
+  } else {
+    temp[last_key] = input?.value
+  }
+  console.log("vars_fin", content_variables_loc?.variables)
+  if (typeof pass_event_down === "function") {
+    pass_event_down({
+      value: input.value,
+      variables: content_variables_loc?.variables,
+      set_from_content_id: input.set_from_content_id,
+      variable_path_to_target: input.variable_path_to_target,
+    })
+  }
+  return {
+    is_success: true,
+    variables: content_variables_loc?.variables,
+  }
+}
+
+// export function set_content_variables(input, variables_combined, pass_event_down) {
+//   console.log("set_content_variables000", input)
+//   if (!Array.isArray(input?.variable_path_to_target)) {
+//     throw new Error("Path must be an array")
+//   }
+//   let content_variables_loc = deep_copy(variables_combined)
+//   let temp = content_variables_loc
+//   const path = input.variable_path_to_target
+//   const last_key = path[path.length - 1]
+//   for (let i = 0; i < path.length - 1; i++) {
+//     const key = path[i]
+//     const nextKey = path[i + 1]
+
+//     if (!(key in temp) || typeof temp[key] !== "object" || temp[key] === null) {
+//       if (typeof nextKey === "number") {
+//         temp[key] = []
+//       } else {
+//         temp[key] = {}
+//       }
+//     }
+//     temp = temp[key]
+//   }
+//   if (input?.type == "set_variables_insert") {
+//     if (Array.isArray(temp[last_key])) {
+//       if (
+//         typeof input?.index_to_insert_at === "number" &&
+//         input?.index_to_insert_at >= 0 &&
+//         input?.index_to_insert_at <= temp?.[last_key].length
+//       ) {
+//         temp[last_key].splice(input.index_to_insert_at, 0, input.value)
+//       } else {
+//         temp[last_key].push(input.value)
+//       }
+//     } else {
+//       temp[last_key] = [input.value]
+//     }
+//   } else if (input?.type == "set_variables_delete") {
+//     if (Array.isArray(temp)) {
+//       if (typeof last_key === "number" && last_key > -1 && last_key < temp.length) {
+//         temp.splice(last_key, 1)
+//       }
+//     } else if (typeof temp === "object" && temp?.hasOwnProperty(last_key)) {
+//       delete temp[last_key]
+//     }
+//   } else if (input?.type == "set_variables_key") {
+//     if (Array.isArray(temp)) {
+//       throw new Error("Cannot change key in array")
+//     } else if (typeof temp === "object" && temp?.hasOwnProperty(last_key)) {
+//       temp[input.value] = temp[last_key]
+//       delete temp[last_key]
+//     } else {
+//       throw new Error("Key not found in object")
+//     }
+//   } else {
+//     temp[last_key] = input?.value
+//   }
+//   if (typeof pass_event_down === "function") {
+//     pass_event_down({
+//       value: input.value,
+//       variables: content_variables_loc,
+//       set_from_content_id: input.set_from_content_id,
+//       variable_path_to_target: input.variable_path_to_target,
+//     })
+//   }
+//   return {
+//     is_success: true,
+//     variables: content_variables_loc,
+//   }
+// }
+
+// tbd could also turn into a typed thing with arrays of v or objects, color, etc
+export function v(config) {
+  let val = $state(null)
+
+  function on_change(from_id = null) {
+    if (typeof config?.on_change == "function") {
+      config?.on_change({ val, from_id: from_id })
+    }
+  }
+
+  function init(config) {
+    val = config?.val
+  }
+
+  init(config)
+
+  return {
+    get val() {
+      return val
+    },
+    set val(input) {
+      val = input
+      on_change()
+    },
+    set_val(input) {
+      if (typeof input == "object" && input?.from_id) {
+        val = input?.val
+        on_change(input?.from_id)
+      } else {
+        val = input
+        on_change()
+      }
+    },
+  }
+}