sveltekit-ui 1.0.12 → 1.0.13

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

@@ -26,7 +26,15 @@ import { create_qr_manager } from "../Qr/index.svelte.js"
 import { create_file_input_manager } from "../FileInput/index.svelte.js"
 import { create_cron_input_manager } from "../CronInput/index.svelte.js"
 import { create_button_manager } from "../Button/index.svelte.js"
-import { node_types, deep_copy, set_closurable, create_unique_id, copy_to_clipboard } from "../../client/index.js"
+import {
+  node_types,
+  deep_copy,
+  set_closurable,
+  create_unique_id,
+  copy_to_clipboard,
+  get_def_from_variable_path,
+  is_defined,
+} from "../../client/index.js"
 
 export function create_content_manager(config) {
   const id = create_unique_id(null, 20)
@@ -36,57 +44,13 @@ export function create_content_manager(config) {
   let mapkit_js_token = $derived(set_closurable(config?.mapkit_js_token, null))
   let val_prepped = $state(null)
 
-  function get_def(input) {
-    for (let item of definition_stack) {
-      if (item.hasOwnProperty(input)) {
-        return item?.[input]
-      }
-    }
-    return null
-  }
-
-  function get_def_from_variable_path(input) {
-    let val = null
-    if (Array.isArray(input) && input.length > 0) {
-      val = get_def(input?.[0])
-      for (let i = 1; i < input.length; i++) {
-        if (Array.isArray(input?.[i])) {
-          const res = get_def_from_variable_path(input?.[i])
-          val = val?.[res]
-        } else {
-          val = val?.[input?.[i]]
-        }
-      }
-    }
-    return val
-  }
-
-  function is_defined(input) {
-    for (let item of definition_stack) {
-      if (item.hasOwnProperty(input)) {
-        return true
-      }
-    }
-    return false
-  }
-
-  function set_def(identifier, value) {
-    console.log("set_def", identifier, value)
-    for (let i = 0; i < definition_stack.length; i++) {
-      if (definition_stack[i].hasOwnProperty(identifier)) {
-        definition_stack[i][identifier] = value
-      }
-    }
-    console.log("definition_stack_after_Set", definition_stack)
-  }
-
   function clean_attributes_from_variable_path(attributes) {
     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 att_key_to_set = att_key.split("_from_variable_path")?.[0]
-          cleaned_attributes[att_key_to_set] = get_def_from_variable_path(att_val)
+          cleaned_attributes[att_key_to_set] = get_def_from_variable_path(att_val, definition_stack)
         }
       }
     }
@@ -128,7 +92,7 @@ export function create_content_manager(config) {
   function clean_variable_path(input) {
     let cleaned_path = []
     if (Array.isArray(input) && input.length > 0) {
-      let is_def = is_defined(input?.[0])
+      let is_def = is_defined(input?.[0], definition_stack)
       if (!is_def) {
         return []
       }

package/dist/Components/TableAdvanced/ColumnInput/index.svelte.js

@@ -50,7 +50,6 @@ export function create_column_input_manager(config) {
   let rows_data_from_variable_path = $derived(set_closurable(config?.rows_data_from_variable_path, null))
   let columns = $derived(set_closurable(config?.columns, null))
   let columns_length = $derived(Object.keys(columns || {}).length)
-  let row_data_type = $derived(set_closurable(config?.row_data_type, null))
   let column_id = $derived(set_closurable(config?.column_id, null))
   let definition_stack = $derived(set_closurable(config?.definition_stack, null))
   let is_column_update = $derived(set_closurable(config?.is_column_update, true))
@@ -189,7 +188,7 @@ export function create_column_input_manager(config) {
     column_db_data_type_input_manager = create_data_type_input_manager({
       // data_sample: () => variables,
       table_options: config?.table_options,
-      val: config?.val?.db_data_type ?? row_data_type?.properties?.[column_id_text_input_manager?.val],
+      val: config?.val?.db_data_type,
       on_finish: (input) => {
         let default_content_input_astc = variables_data_type_remaining_to_astc(input, "input", ["rows"])
         column_default_value_content_manager = create_content_manager({

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

@@ -14,9 +14,10 @@ import {
   json_to_csv,
   csv_to_json,
   create_unique_id,
-  set_closurable,
-  get_data_type_at_path,
   set_definition_stack,
+  set_def,
+  get_def_from_variable_path,
+  variables_data_type_remaining_to_astc,
 } from "../../client/index.js"
 import { tick } from "svelte"
 import { browser } from "$app/environment"
@@ -95,6 +96,7 @@ export function create_table_advanced_manager(config) {
   let column_edit_input_manager = $state(null)
   let column_edit_upsert_column_button_manager = $state(null)
 
+  let row_edit_def_identifier = $state("edit_row_1001234")
   let row_edit_index = $state(null)
   let preempt_insert_row_popover_manager = $state(null)
   let row_edit_content_manager = $state(null)
@@ -106,9 +108,7 @@ export function create_table_advanced_manager(config) {
   let is_loading_rows = $state(false)
   let loading_rows_progress = $state(0)
 
-  let rows_data = $derived(get_def_from_variable_path(rows_data_from_variable_path))
-  let row_data_type = $state(null)
-
+  let rows_data = $derived(get_def_from_variable_path(rows_data_from_variable_path, definition_stack))
   let row_indexes_display_order = $derived(get_available_row_indexes())
   let row_indexes_display_order_shown = $derived(get_row_indexes_shown())
 
@@ -126,53 +126,6 @@ export function create_table_advanced_manager(config) {
       : []
   )
 
-  function get_def(input, definition_stack_loc) {
-    let definition_stack_to_use = definition_stack_loc ?? definition_stack
-    if (Array.isArray(definition_stack_to_use)) {
-      for (let item of definition_stack_to_use) {
-        if (item.hasOwnProperty(input)) {
-          return item?.[input]
-        }
-      }
-    }
-    return null
-  }
-
-  function get_def_from_variable_path(input, definition_stack_loc) {
-    let val = null
-    if (Array.isArray(input) && input.length > 0) {
-      val = get_def(input?.[0], definition_stack_loc)
-      for (let i = 1; i < input.length; i++) {
-        if (Array.isArray(input?.[i])) {
-          const res = get_def_from_variable_path(input?.[i], definition_stack_loc)
-          val = val?.[res]
-        } else {
-          val = val?.[input?.[i]]
-        }
-      }
-    }
-    return val
-  }
-
-  function is_defined(input) {
-    for (let item of definition_stack) {
-      if (item.hasOwnProperty(input)) {
-        return true
-      }
-    }
-    return false
-  }
-
-  function set_def(identifier, value) {
-    console.log("set_def", identifier, value)
-    for (let i = 0; i < definition_stack.length; i++) {
-      if (definition_stack[i].hasOwnProperty(identifier)) {
-        definition_stack[i][identifier] = value
-      }
-    }
-    console.log("definition_stack_after_Set", definition_stack)
-  }
-
   function get_available_row_indexes() {
     let row_indexes = []
     if (
@@ -414,11 +367,9 @@ export function create_table_advanced_manager(config) {
       column_input_options: config?.column_input_options,
       table_options: config?.table_options,
       on_search_table_row_ids: config?.on_search_table_row_ids,
-      defined_data_type: () => defined_data_type,
-      definition_stack: () => definition_stack,
+      definition_stack: definition_stack,
       columns: () => columns_prepped,
       rows_data_from_variable_path: () => rows_data_from_variable_path,
-      row_data_type: () => row_data_type,
       on_delete: async () => {
         if (typeof config?.on_event == "function") {
           const res = await config?.on_event({
@@ -518,39 +469,28 @@ export function create_table_advanced_manager(config) {
 
   function edit_row(row_i) {
     row_edit_index = row_i
-    let definition_stack_loc = $state([{ [row_iter_identifier]: row_i }, ...definition_stack])
     const path_to_set = [...rows_data_from_variable_path, Number.isInteger(row_i) ? row_i : 0]
+    let editable_row = null
     if (!Number.isInteger(row_i)) {
-      let row_default_to_insert = null //tbd
-      let target = definition_stack_loc
-      for (let i = 0; i < path_to_set.length - 1; i++) {
-        target = target[path_to_set[i]]
-        if (target === undefined) break
-      }
-      const last_key = path_to_set[path_to_set.length - 1]
-      if (Array.isArray(target[last_key])) {
-        target[last_key].splice(0, 0, row_default_to_insert)
-      } else {
-        target[last_key] = row_default_to_insert
-      }
+      console.log("columns_prepped", columns_prepped)
+      editable_row = {}
+    } else {
+      editable_row = get_def_from_variable_path([...rows_data_from_variable_path, row_i], definition_stack)
     }
+    let row_definition_stack = $state([{ [row_edit_def_identifier]: editable_row }, ...definition_stack])
     row_edit_content_manager = null
     setTimeout(() => {
       // quick fix for when update row then edit a diff row the data for other doesnt remain in place
-      console.log("row_input_content2222", { row_input_content, ds: [{ row_i }, ...definition_stack] })
       row_edit_content_manager = create_content_manager({
         val: row_input_content ?? null,
-        storage_items: null, // tbd
-        table_options: config?.table_options,
+        definition_stack: row_definition_stack,
         mapkit_js_token: mapkit_js_token,
+        storage_items: null, // tbd
         on_search_table_row_ids: config?.on_search_table_row_ids,
-        definition_stack: [{ row_i }, ...definition_stack],
         on_event: (input) => {
-          console.log("on_event_edit_row00", input)
-          const res = set_definition_stack(input, definition_stack_loc)
-          console.log("on_event_edit_row_res00", res)
-          definition_stack_loc = res?.definition_stack
-          const row_data = get_def_from_variable_path(path_to_set, definition_stack_loc)
+          const res = set_definition_stack(input, row_definition_stack)
+          row_definition_stack = res?.definition_stack
+          const row_data = get_def_from_variable_path([row_edit_def_identifier], row_definition_stack)
           return {
             is_success: true,
             data: {
@@ -566,8 +506,8 @@ export function create_table_advanced_manager(config) {
       is_loading: () => upsert_row_is_loading,
       on_click: async () => {
         upsert_row_is_loading = true
-        const row_data = get_def_from_variable_path(path_to_set, definition_stack_loc)
-        console.log("edited_row", { definition_stack_loc, row_data })
+        const row_data = get_def_from_variable_path([row_edit_def_identifier], row_definition_stack)
+        console.log("edited_row", { row_i, row_data })
         if (Number.isInteger(row_i)) {
           if (typeof config?.on_event == "function") {
             const res = await config?.on_event({
@@ -603,6 +543,7 @@ export function create_table_advanced_manager(config) {
               row: row_data,
               path: path_to_set,
             })
+            console.log("insert_row_res", { res, columns_prepped })
             if (res?.is_success) {
               preempt_insert_row_popover_manager.show_temp_message(
                 "Successfully inserted row",
@@ -677,9 +618,81 @@ export function create_table_advanced_manager(config) {
     })
   }
 
+  function guess_row_input_content(columns) {
+    return {
+      type_id: "div",
+      selector_id: create_unique_id(null, 8),
+      children: Object.entries(columns || {})
+        .sort(([a_column_id, a_val], [b_column_id, b_val]) => {
+          const a_order = a_val?.display_order ?? 0
+          const b_order = b_val?.display_order ?? 0
+          return a_order - b_order
+        })
+        .map(([column_id, val]) => {
+          if (val?.is_autogenerated) {
+            // let guessed_column_display_content = variables_data_type_remaining_to_astc(val?.db_data_type, "display", [
+            //   "variables",
+            //   "rows",
+            //   ["row_i"],
+            //   column_id,
+            // ])
+            return {
+              type_id: "div",
+              selector_id: create_unique_id(null, 8),
+              children: [
+                {
+                  type_id: "span",
+                  selector_id: create_unique_id(null, 8),
+                  children: [
+                    {
+                      type_id: "strong",
+                      selector_id: create_unique_id(null, 8),
+                      children: [],
+                      attributes: { content: column_id },
+                    },
+                    {
+                      type_id: "em",
+                      selector_id: create_unique_id(null, 8),
+                      children: [],
+                      attributes: { content: " autogenerated " },
+                    },
+                  ],
+                  attributes: {},
+                },
+                // guessed_column_display_content,
+                {
+                  type_id: "br",
+                  selector_id: create_unique_id(null, 8),
+                  children: [],
+                  attributes: {},
+                },
+              ],
+              attributes: {},
+            }
+          } else {
+            let guessed_column_input_content = variables_data_type_remaining_to_astc(val?.db_data_type, "input", [
+              row_edit_def_identifier,
+              column_id,
+            ])
+            if (guessed_column_input_content?.hasOwnProperty("attributes")) {
+              if (!guessed_column_input_content.attributes) {
+                guessed_column_input_content.attributes = {}
+              }
+              guessed_column_input_content.attributes.label = column_id
+            }
+            return {
+              type_id: "div",
+              selector_id: create_unique_id(null, 8),
+              children: [guessed_column_input_content],
+              attributes: {},
+            }
+          }
+        }),
+    }
+  }
+
   function set_attributes(attributes) {
     rows_data_from_variable_path = attributes?.rows_data_from_variable_path
-    row_input_content = attributes?.row_input_content
     is_data_editable = attributes?.is_data_editable ?? false
     nav_items = Array.isArray(attributes?.nav_items)
       ? attributes.nav_items.filter((item) =>
@@ -702,6 +715,18 @@ export function create_table_advanced_manager(config) {
     table_row_max_height = attributes?.table_row_max_height ?? null
     const columns_prepped_loc = set_columns_prepped(attributes?.columns)
     set_rows_prepped(columns_prepped_loc)
+    row_input_content = attributes?.row_input_content ?? guess_row_input_content(attributes?.columns)
+  }
+
+  function reset_definition_stack(input) {
+    console.log("reset_definition_stack", deep_copy(input))
+    definition_stack = input
+    set_rows_prepped(columns_prepped)
+  }
+
+  function set_columns(input) {
+    set_columns_prepped(input)
+    set_rows_prepped(columns_prepped)
   }
 
   function init(config) {
@@ -709,7 +734,7 @@ export function create_table_advanced_manager(config) {
     table_name = config?.table_name
     table_description = config?.table_description
     rows_data_from_variable_path = config?.rows_data_from_variable_path
-    row_iter_identifier = config?.row_iter_identifier
+    row_iter_identifier = config?.row_iter_identifier ?? "row_i"
     definition_stack = config?.definition_stack
     mapkit_js_token = config?.mapkit_js_token
     set_attributes(config)
@@ -1417,5 +1442,7 @@ export function create_table_advanced_manager(config) {
     download_csv,
     copy_structure,
     set_attributes,
+    reset_definition_stack,
+    set_columns,
   }
 }

package/dist/client/index.js

@@ -551,8 +551,56 @@ export function get_data_type_at_path(path, full_data_type) {
   return data_type_at_path_loc
 }
 
+export function get_def(input, definition_stack) {
+  if (Array.isArray(definition_stack)) {
+    for (let item of definition_stack) {
+      if (item.hasOwnProperty(input)) {
+        return item?.[input]
+      }
+    }
+  }
+  return null
+}
+
+export function get_def_from_variable_path(input, definition_stack) {
+  let val = null
+  if (Array.isArray(input) && input.length > 0) {
+    val = get_def(input?.[0], definition_stack)
+    for (let i = 1; i < input.length; i++) {
+      if (Array.isArray(input?.[i])) {
+        const res = get_def_from_variable_path(input?.[i], definition_stack)
+        val = val?.[res]
+      } else {
+        val = val?.[input?.[i]]
+      }
+    }
+  }
+  return val
+}
+
+export function is_defined(input, definition_stack) {
+  if (Array.isArray(definition_stack)) {
+    for (let item of definition_stack) {
+      if (item && typeof item == "object" && item.hasOwnProperty(input)) {
+        return true
+      }
+    }
+  }
+  return false
+}
+
+export function set_def(identifier, value, definition_stack) {
+  if (Array.isArray(definition_stack)) {
+    for (let i = 0; i < definition_stack.length; i++) {
+      if (definition_stack[i].hasOwnProperty(identifier)) {
+        definition_stack[i][identifier] = value
+      }
+    }
+  }
+  return definition_stack
+}
+
 export function set_definition_stack(input, definition_stack, pass_event_down) {
-  console.log("set_definition_stack00", deep_copy({ input, definition_stack, pass_event_down }))
   if (!Array.isArray(input?.variable_path_to_target) || !Array.isArray(definition_stack)) {
     throw new Error("Path must be an array")
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sveltekit-ui",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "description": "A SvelteKit UI component library for building modern web applications",
   "license": "MIT",
   "type": "module",

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

@@ -26,7 +26,15 @@ import { create_qr_manager } from "$lib/Components/Qr/index.svelte.js"
 import { create_file_input_manager } from "$lib/Components/FileInput/index.svelte.js"
 import { create_cron_input_manager } from "$lib/Components/CronInput/index.svelte.js"
 import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
-import { node_types, deep_copy, set_closurable, create_unique_id, copy_to_clipboard } from "$lib/client/index.js"
+import {
+  node_types,
+  deep_copy,
+  set_closurable,
+  create_unique_id,
+  copy_to_clipboard,
+  get_def_from_variable_path,
+  is_defined,
+} from "$lib/client/index.js"
 
 export function create_content_manager(config) {
   const id = create_unique_id(null, 20)
@@ -36,57 +44,13 @@ export function create_content_manager(config) {
   let mapkit_js_token = $derived(set_closurable(config?.mapkit_js_token, null))
   let val_prepped = $state(null)
 
-  function get_def(input) {
-    for (let item of definition_stack) {
-      if (item.hasOwnProperty(input)) {
-        return item?.[input]
-      }
-    }
-    return null
-  }
-
-  function get_def_from_variable_path(input) {
-    let val = null
-    if (Array.isArray(input) && input.length > 0) {
-      val = get_def(input?.[0])
-      for (let i = 1; i < input.length; i++) {
-        if (Array.isArray(input?.[i])) {
-          const res = get_def_from_variable_path(input?.[i])
-          val = val?.[res]
-        } else {
-          val = val?.[input?.[i]]
-        }
-      }
-    }
-    return val
-  }
-
-  function is_defined(input) {
-    for (let item of definition_stack) {
-      if (item.hasOwnProperty(input)) {
-        return true
-      }
-    }
-    return false
-  }
-
-  function set_def(identifier, value) {
-    console.log("set_def", identifier, value)
-    for (let i = 0; i < definition_stack.length; i++) {
-      if (definition_stack[i].hasOwnProperty(identifier)) {
-        definition_stack[i][identifier] = value
-      }
-    }
-    console.log("definition_stack_after_Set", definition_stack)
-  }
-
   function clean_attributes_from_variable_path(attributes) {
     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 att_key_to_set = att_key.split("_from_variable_path")?.[0]
-          cleaned_attributes[att_key_to_set] = get_def_from_variable_path(att_val)
+          cleaned_attributes[att_key_to_set] = get_def_from_variable_path(att_val, definition_stack)
         }
       }
     }
@@ -128,7 +92,7 @@ export function create_content_manager(config) {
   function clean_variable_path(input) {
     let cleaned_path = []
     if (Array.isArray(input) && input.length > 0) {
-      let is_def = is_defined(input?.[0])
+      let is_def = is_defined(input?.[0], definition_stack)
       if (!is_def) {
         return []
       }

package/src/lib/Components/TableAdvanced/ColumnInput/index.svelte.js

@@ -50,7 +50,6 @@ export function create_column_input_manager(config) {
   let rows_data_from_variable_path = $derived(set_closurable(config?.rows_data_from_variable_path, null))
   let columns = $derived(set_closurable(config?.columns, null))
   let columns_length = $derived(Object.keys(columns || {}).length)
-  let row_data_type = $derived(set_closurable(config?.row_data_type, null))
   let column_id = $derived(set_closurable(config?.column_id, null))
   let definition_stack = $derived(set_closurable(config?.definition_stack, null))
   let is_column_update = $derived(set_closurable(config?.is_column_update, true))
@@ -189,7 +188,7 @@ export function create_column_input_manager(config) {
     column_db_data_type_input_manager = create_data_type_input_manager({
       // data_sample: () => variables,
       table_options: config?.table_options,
-      val: config?.val?.db_data_type ?? row_data_type?.properties?.[column_id_text_input_manager?.val],
+      val: config?.val?.db_data_type,
       on_finish: (input) => {
         let default_content_input_astc = variables_data_type_remaining_to_astc(input, "input", ["rows"])
         column_default_value_content_manager = create_content_manager({

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

@@ -14,9 +14,10 @@ import {
   json_to_csv,
   csv_to_json,
   create_unique_id,
-  set_closurable,
-  get_data_type_at_path,
   set_definition_stack,
+  set_def,
+  get_def_from_variable_path,
+  variables_data_type_remaining_to_astc,
 } from "$lib/client/index.js"
 import { tick } from "svelte"
 import { browser } from "$app/environment"
@@ -95,6 +96,7 @@ export function create_table_advanced_manager(config) {
   let column_edit_input_manager = $state(null)
   let column_edit_upsert_column_button_manager = $state(null)
 
+  let row_edit_def_identifier = $state("edit_row_1001234")
   let row_edit_index = $state(null)
   let preempt_insert_row_popover_manager = $state(null)
   let row_edit_content_manager = $state(null)
@@ -106,9 +108,7 @@ export function create_table_advanced_manager(config) {
   let is_loading_rows = $state(false)
   let loading_rows_progress = $state(0)
 
-  let rows_data = $derived(get_def_from_variable_path(rows_data_from_variable_path))
-  let row_data_type = $state(null)
-
+  let rows_data = $derived(get_def_from_variable_path(rows_data_from_variable_path, definition_stack))
   let row_indexes_display_order = $derived(get_available_row_indexes())
   let row_indexes_display_order_shown = $derived(get_row_indexes_shown())
 
@@ -126,53 +126,6 @@ export function create_table_advanced_manager(config) {
       : []
   )
 
-  function get_def(input, definition_stack_loc) {
-    let definition_stack_to_use = definition_stack_loc ?? definition_stack
-    if (Array.isArray(definition_stack_to_use)) {
-      for (let item of definition_stack_to_use) {
-        if (item.hasOwnProperty(input)) {
-          return item?.[input]
-        }
-      }
-    }
-    return null
-  }
-
-  function get_def_from_variable_path(input, definition_stack_loc) {
-    let val = null
-    if (Array.isArray(input) && input.length > 0) {
-      val = get_def(input?.[0], definition_stack_loc)
-      for (let i = 1; i < input.length; i++) {
-        if (Array.isArray(input?.[i])) {
-          const res = get_def_from_variable_path(input?.[i], definition_stack_loc)
-          val = val?.[res]
-        } else {
-          val = val?.[input?.[i]]
-        }
-      }
-    }
-    return val
-  }
-
-  function is_defined(input) {
-    for (let item of definition_stack) {
-      if (item.hasOwnProperty(input)) {
-        return true
-      }
-    }
-    return false
-  }
-
-  function set_def(identifier, value) {
-    console.log("set_def", identifier, value)
-    for (let i = 0; i < definition_stack.length; i++) {
-      if (definition_stack[i].hasOwnProperty(identifier)) {
-        definition_stack[i][identifier] = value
-      }
-    }
-    console.log("definition_stack_after_Set", definition_stack)
-  }
-
   function get_available_row_indexes() {
     let row_indexes = []
     if (
@@ -414,11 +367,9 @@ export function create_table_advanced_manager(config) {
       column_input_options: config?.column_input_options,
       table_options: config?.table_options,
       on_search_table_row_ids: config?.on_search_table_row_ids,
-      defined_data_type: () => defined_data_type,
-      definition_stack: () => definition_stack,
+      definition_stack: definition_stack,
       columns: () => columns_prepped,
       rows_data_from_variable_path: () => rows_data_from_variable_path,
-      row_data_type: () => row_data_type,
       on_delete: async () => {
         if (typeof config?.on_event == "function") {
           const res = await config?.on_event({
@@ -518,39 +469,28 @@ export function create_table_advanced_manager(config) {
 
   function edit_row(row_i) {
     row_edit_index = row_i
-    let definition_stack_loc = $state([{ [row_iter_identifier]: row_i }, ...definition_stack])
     const path_to_set = [...rows_data_from_variable_path, Number.isInteger(row_i) ? row_i : 0]
+    let editable_row = null
     if (!Number.isInteger(row_i)) {
-      let row_default_to_insert = null //tbd
-      let target = definition_stack_loc
-      for (let i = 0; i < path_to_set.length - 1; i++) {
-        target = target[path_to_set[i]]
-        if (target === undefined) break
-      }
-      const last_key = path_to_set[path_to_set.length - 1]
-      if (Array.isArray(target[last_key])) {
-        target[last_key].splice(0, 0, row_default_to_insert)
-      } else {
-        target[last_key] = row_default_to_insert
-      }
+      console.log("columns_prepped", columns_prepped)
+      editable_row = {}
+    } else {
+      editable_row = get_def_from_variable_path([...rows_data_from_variable_path, row_i], definition_stack)
     }
+    let row_definition_stack = $state([{ [row_edit_def_identifier]: editable_row }, ...definition_stack])
     row_edit_content_manager = null
     setTimeout(() => {
       // quick fix for when update row then edit a diff row the data for other doesnt remain in place
-      console.log("row_input_content2222", { row_input_content, ds: [{ row_i }, ...definition_stack] })
       row_edit_content_manager = create_content_manager({
         val: row_input_content ?? null,
-        storage_items: null, // tbd
-        table_options: config?.table_options,
+        definition_stack: row_definition_stack,
         mapkit_js_token: mapkit_js_token,
+        storage_items: null, // tbd
         on_search_table_row_ids: config?.on_search_table_row_ids,
-        definition_stack: [{ row_i }, ...definition_stack],
         on_event: (input) => {
-          console.log("on_event_edit_row00", input)
-          const res = set_definition_stack(input, definition_stack_loc)
-          console.log("on_event_edit_row_res00", res)
-          definition_stack_loc = res?.definition_stack
-          const row_data = get_def_from_variable_path(path_to_set, definition_stack_loc)
+          const res = set_definition_stack(input, row_definition_stack)
+          row_definition_stack = res?.definition_stack
+          const row_data = get_def_from_variable_path([row_edit_def_identifier], row_definition_stack)
           return {
             is_success: true,
             data: {
@@ -566,8 +506,8 @@ export function create_table_advanced_manager(config) {
       is_loading: () => upsert_row_is_loading,
       on_click: async () => {
         upsert_row_is_loading = true
-        const row_data = get_def_from_variable_path(path_to_set, definition_stack_loc)
-        console.log("edited_row", { definition_stack_loc, row_data })
+        const row_data = get_def_from_variable_path([row_edit_def_identifier], row_definition_stack)
+        console.log("edited_row", { row_i, row_data })
         if (Number.isInteger(row_i)) {
           if (typeof config?.on_event == "function") {
             const res = await config?.on_event({
@@ -603,6 +543,7 @@ export function create_table_advanced_manager(config) {
               row: row_data,
               path: path_to_set,
             })
+            console.log("insert_row_res", { res, columns_prepped })
             if (res?.is_success) {
               preempt_insert_row_popover_manager.show_temp_message(
                 "Successfully inserted row",
@@ -677,9 +618,81 @@ export function create_table_advanced_manager(config) {
     })
   }
 
+  function guess_row_input_content(columns) {
+    return {
+      type_id: "div",
+      selector_id: create_unique_id(null, 8),
+      children: Object.entries(columns || {})
+        .sort(([a_column_id, a_val], [b_column_id, b_val]) => {
+          const a_order = a_val?.display_order ?? 0
+          const b_order = b_val?.display_order ?? 0
+          return a_order - b_order
+        })
+        .map(([column_id, val]) => {
+          if (val?.is_autogenerated) {
+            // let guessed_column_display_content = variables_data_type_remaining_to_astc(val?.db_data_type, "display", [
+            //   "variables",
+            //   "rows",
+            //   ["row_i"],
+            //   column_id,
+            // ])
+            return {
+              type_id: "div",
+              selector_id: create_unique_id(null, 8),
+              children: [
+                {
+                  type_id: "span",
+                  selector_id: create_unique_id(null, 8),
+                  children: [
+                    {
+                      type_id: "strong",
+                      selector_id: create_unique_id(null, 8),
+                      children: [],
+                      attributes: { content: column_id },
+                    },
+                    {
+                      type_id: "em",
+                      selector_id: create_unique_id(null, 8),
+                      children: [],
+                      attributes: { content: " autogenerated " },
+                    },
+                  ],
+                  attributes: {},
+                },
+                // guessed_column_display_content,
+                {
+                  type_id: "br",
+                  selector_id: create_unique_id(null, 8),
+                  children: [],
+                  attributes: {},
+                },
+              ],
+              attributes: {},
+            }
+          } else {
+            let guessed_column_input_content = variables_data_type_remaining_to_astc(val?.db_data_type, "input", [
+              row_edit_def_identifier,
+              column_id,
+            ])
+            if (guessed_column_input_content?.hasOwnProperty("attributes")) {
+              if (!guessed_column_input_content.attributes) {
+                guessed_column_input_content.attributes = {}
+              }
+              guessed_column_input_content.attributes.label = column_id
+            }
+            return {
+              type_id: "div",
+              selector_id: create_unique_id(null, 8),
+              children: [guessed_column_input_content],
+              attributes: {},
+            }
+          }
+        }),
+    }
+  }
+
   function set_attributes(attributes) {
     rows_data_from_variable_path = attributes?.rows_data_from_variable_path
-    row_input_content = attributes?.row_input_content
     is_data_editable = attributes?.is_data_editable ?? false
     nav_items = Array.isArray(attributes?.nav_items)
       ? attributes.nav_items.filter((item) =>
@@ -702,6 +715,18 @@ export function create_table_advanced_manager(config) {
     table_row_max_height = attributes?.table_row_max_height ?? null
     const columns_prepped_loc = set_columns_prepped(attributes?.columns)
     set_rows_prepped(columns_prepped_loc)
+    row_input_content = attributes?.row_input_content ?? guess_row_input_content(attributes?.columns)
+  }
+
+  function reset_definition_stack(input) {
+    console.log("reset_definition_stack", deep_copy(input))
+    definition_stack = input
+    set_rows_prepped(columns_prepped)
+  }
+
+  function set_columns(input) {
+    set_columns_prepped(input)
+    set_rows_prepped(columns_prepped)
   }
 
   function init(config) {
@@ -709,7 +734,7 @@ export function create_table_advanced_manager(config) {
     table_name = config?.table_name
     table_description = config?.table_description
     rows_data_from_variable_path = config?.rows_data_from_variable_path
-    row_iter_identifier = config?.row_iter_identifier
+    row_iter_identifier = config?.row_iter_identifier ?? "row_i"
     definition_stack = config?.definition_stack
     mapkit_js_token = config?.mapkit_js_token
     set_attributes(config)
@@ -1417,5 +1442,7 @@ export function create_table_advanced_manager(config) {
     download_csv,
     copy_structure,
     set_attributes,
+    reset_definition_stack,
+    set_columns,
   }
 }

package/src/lib/client/index.js

@@ -551,8 +551,56 @@ export function get_data_type_at_path(path, full_data_type) {
   return data_type_at_path_loc
 }
 
+export function get_def(input, definition_stack) {
+  if (Array.isArray(definition_stack)) {
+    for (let item of definition_stack) {
+      if (item.hasOwnProperty(input)) {
+        return item?.[input]
+      }
+    }
+  }
+  return null
+}
+
+export function get_def_from_variable_path(input, definition_stack) {
+  let val = null
+  if (Array.isArray(input) && input.length > 0) {
+    val = get_def(input?.[0], definition_stack)
+    for (let i = 1; i < input.length; i++) {
+      if (Array.isArray(input?.[i])) {
+        const res = get_def_from_variable_path(input?.[i], definition_stack)
+        val = val?.[res]
+      } else {
+        val = val?.[input?.[i]]
+      }
+    }
+  }
+  return val
+}
+
+export function is_defined(input, definition_stack) {
+  if (Array.isArray(definition_stack)) {
+    for (let item of definition_stack) {
+      if (item && typeof item == "object" && item.hasOwnProperty(input)) {
+        return true
+      }
+    }
+  }
+  return false
+}
+
+export function set_def(identifier, value, definition_stack) {
+  if (Array.isArray(definition_stack)) {
+    for (let i = 0; i < definition_stack.length; i++) {
+      if (definition_stack[i].hasOwnProperty(identifier)) {
+        definition_stack[i][identifier] = value
+      }
+    }
+  }
+  return definition_stack
+}
+
 export function set_definition_stack(input, definition_stack, pass_event_down) {
-  console.log("set_definition_stack00", deep_copy({ input, definition_stack, pass_event_down }))
   if (!Array.isArray(input?.variable_path_to_target) || !Array.isArray(definition_stack)) {
     throw new Error("Path must be an array")
   }

package/src/routes/[component]/Showcase/TableAdvanced/index.svelte

@@ -225,102 +225,11 @@
   }
 
   let data = $state({
-    id: "srooithnmomwnpbmexkr",
-    name: "Hello World",
-    rows: [
-      {
-        id: "dnscyyvfhqdzptdvzcdp",
-        label: null,
-        fav_color: null,
-        db_epoch_created: 1723421882,
-        db_epoch_updated: 1723421882,
-      },
-      {
-        id: "wqhfxttzpwdpkawzusyt",
-        label: "tint bl",
-        fav_color: {
-          c: 16,
-          h: 17,
-          l: 5,
-          o: 16,
-          is_dark_theme_invert: true,
-        },
-        db_epoch_created: 1723421882,
-        db_epoch_updated: 1723422096,
-      },
-      {
-        id: "egrdjfqlcysykmpwudsp",
-        label: null,
-        fav_color: {
-          c: 10,
-          h: 4,
-          l: 1,
-          o: 24,
-          is_dark_theme_invert: true,
-        },
-        db_epoch_created: 1723422106,
-        db_epoch_updated: 1723422106,
-      },
-      {
-        id: "zbcqvteloefgebbcwrnd",
-        label: null,
-        fav_color: {
-          c: 10,
-          h: 4,
-          l: 1,
-          o: 24,
-          is_dark_theme_invert: true,
-        },
-        db_epoch_created: 1723423614,
-        db_epoch_updated: 1723423614,
-      },
-      {
-        id: "ennjpaemwacveifswbwq",
-        label: null,
-        fav_color: null,
-        db_epoch_created: 1723423614,
-        db_epoch_updated: 1723423614,
-      },
-      {
-        id: "redpwlvrmboleibyawxj",
-        label: "tint bl",
-        fav_color: {
-          c: 16,
-          h: 17,
-          l: 5,
-          o: 16,
-          is_dark_theme_invert: true,
-        },
-        db_epoch_created: 1723423614,
-        db_epoch_updated: 1723423614,
-      },
-      {
-        id: "ugarkuprolztkecxqody",
-        label: "not invert",
-        fav_color: {
-          c: 12,
-          h: 14,
-          l: 4,
-          o: 24,
-          is_dark_theme_invert: false,
-        },
-        db_epoch_created: 1723423614,
-        db_epoch_updated: 1723423678,
-      },
-      {
-        id: "dyfidxdkepupllmccxmb",
-        label: "yes invert",
-        fav_color: {
-          c: 12,
-          h: 14,
-          l: 4,
-          o: 24,
-          is_dark_theme_invert: true,
-        },
-        db_epoch_created: 1723421882,
-        db_epoch_updated: 1723423732,
-      },
-    ],
+    id: "cbsemvrsoidhrzyhugue",
+    name: "test",
+    rows: [],
+    limit: 100,
+    offset: 0,
     columns: {
       id: {
         is_fixed: true,
@@ -335,7 +244,7 @@
           children: [],
           attributes: {
             size: 10,
-            content_from_variable_path: ["rows", ["row_i"], "id"],
+            content_from_variable_path: ["variables", "rows", ["loops", 0], "id"],
           },
           selector_id: "hcsqz",
         },
@@ -359,103 +268,50 @@
         is_autogenerated: true,
         is_force_uniqueness: false,
       },
-      label: {
+      ttttt: {
         is_fixed: false,
         is_shown: true,
         alignment: "left",
-        max_width: 25,
-        min_width: 3,
-        description: null,
+        max_width: 30,
+        min_width: 20,
+        description: "ffff",
         is_nullable: true,
         body_content: {
-          type_id: "base_text",
+          type_id: "number",
           children: [],
           attributes: {
-            color: null,
-            content: null,
-            content_from_variable_path: ["rows", ["row_i"], "label"],
+            val_from_variable_path: ["rows", ["row_i"], "ttttt"],
           },
-          selector_id: "mersu",
+          selector_id: "vukyefhw",
         },
         db_data_type: {
-          type: "text_literal",
+          type: "int_literal",
           attributes: {},
         },
         is_db_column: true,
+        is_updatable: false,
         default_value: null,
         display_order: 1,
-        postgres_type: "text",
-        header_content: {
-          type_id: "base_text",
-          children: [],
-          attributes: {
-            color: null,
-            content: "Label",
-            content_from_variable_path: null,
-          },
-          selector_id: "fbhid",
-        },
-        is_primary_key: false,
-        is_autogenerated: false,
-        is_force_uniqueness: false,
-      },
-      fav_color: {
-        is_fixed: false,
-        is_shown: true,
-        alignment: "right",
-        max_width: 25,
-        min_width: 3,
-        description: null,
-        is_nullable: true,
-        body_content: {
-          type_id: "color",
-          children: [],
-          attributes: {
-            val: {
-              c: 21,
-              h: 2,
-              l: 6,
-              o: 24,
-              is_dark_theme_invert: true,
-            },
-            val_from_variable_path: ["rows", ["row_i"], "fav_color"],
-          },
-          selector_id: "anpwr",
-        },
-        db_data_type: {
-          type: "color_literal",
-          attributes: {},
-        },
-        is_db_column: true,
-        default_value: null,
-        display_order: 2,
-        postgres_type: "jsonb",
+        postgres_type: "int",
         header_content: {
           type_id: "base_text",
           children: [],
           attributes: {
-            color: {
-              c: 10,
-              h: 15,
-              l: 19,
-              o: 24,
-              is_dark_theme_invert: true,
-            },
-            content: "Fav Color",
-            content_from_variable_path: null,
+            content: "Ttttt",
           },
-          selector_id: "gcvda",
+          selector_id: "lpcqsjlq",
         },
         is_primary_key: false,
         is_autogenerated: false,
         is_force_uniqueness: false,
+        is_use_in_short_display: false,
       },
       db_epoch_created: {
         is_fixed: false,
         is_shown: true,
         alignment: "left",
         max_width: 50,
-        min_width: 5,
+        min_width: 20,
         description: null,
         is_nullable: false,
         body_content: {
@@ -463,9 +319,9 @@
           children: [],
           attributes: {
             format: "epoch",
-            val_from_variable_path: ["rows", ["row_i"], "db_epoch_created"],
+            val_from_variable_path: ["variables", "rows", ["loops", 0], "db_epoch_created"],
           },
-          selector_id: "urzjm",
+          selector_id: "time_urzjm",
         },
         db_data_type: {
           type: "epoch_literal",
@@ -473,7 +329,7 @@
         },
         is_db_column: true,
         default_value: null,
-        display_order: 3,
+        display_order: 2,
         postgres_type: "bigint",
         header_content: {
           type_id: "base_text",
@@ -492,7 +348,7 @@
         is_shown: true,
         alignment: "left",
         max_width: 50,
-        min_width: 5,
+        min_width: 20,
         description: null,
         is_nullable: false,
         body_content: {
@@ -500,9 +356,9 @@
           children: [],
           attributes: {
             format: "epoch",
-            val_from_variable_path: ["rows", ["row_i"], "db_epoch_updated"],
+            val_from_variable_path: ["variables", "rows", ["loops", 0], "db_epoch_updated"],
           },
-          selector_id: "rozyy",
+          selector_id: "epoch_rozyy",
         },
         db_data_type: {
           type: "epoch_literal",
@@ -510,7 +366,7 @@
         },
         is_db_column: true,
         default_value: null,
-        display_order: 4,
+        display_order: 3,
         postgres_type: "bigint",
         header_content: {
           type_id: "base_text",
@@ -525,14 +381,22 @@
         is_force_uniqueness: false,
       },
     },
-    account_id: "idredbvbbogpofinurea",
-    total_rows: 8,
-    description: "hiiiiii",
+    account_id: "kmjexchofxophkkuqfvp",
+    total_rows: 0,
+    description: "need to make sure new loop stuff works",
     default_sort: null,
-    row_input_content: test_row_input_content,
+    row_input_content: null,
     row_searchable_content: null,
   })
 
+  let row_data_type = {
+    type: "object_literal",
+    attributes: {},
+    properties: Object.fromEntries(Object.entries(data?.columns || {}).map(([key, val]) => [key, val?.db_data_type])),
+  }
+
+  console.log("row_data_type", row_data_type)
+
   let table_manager = $state(null)
   let variables = $state({ rows: data?.rows })
 
@@ -544,6 +408,7 @@
     table_options: [{ key: "test", name: "Test" }],
     definition_stack: [{ ...variables }],
     rows_data_from_variable_path: ["rows"],
+    row_data_type: row_data_type,
     row_iter_identifier: "row_i",
     table_header_max_height: 8,
     table_row_max_height: 8,
@@ -581,6 +446,7 @@
         const last_key = path_to_set[path_to_set.length - 1]
         target[last_key] = input?.row
         variables = variables_loc
+        table_manager.reset_definition_stack([{ ...variables }])
         return {
           is_success: true,
           row: target?.[last_key],
@@ -601,6 +467,7 @@
         }
         target.splice(last_key, 0, input?.row)
         variables = variables_loc
+        table_manager.reset_definition_stack([{ ...variables }])
         return {
           is_success: true,
           row: target?.[last_key],
@@ -622,6 +489,7 @@
         }
         target.splice(last_key, 0, input?.value)
         variables = variables_loc
+        table_manager.reset_definition_stack([{ ...variables }])
         return {
           is_success: true,
           rows: target?.[last_key],
@@ -643,6 +511,7 @@
         }
         variables = variables_loc
         console.log("variables", deep_copy(variables))
+        table_manager.reset_definition_stack([{ ...variables }])
         return {
           is_success: true,
         }
@@ -654,6 +523,7 @@
         }
       } else if (input?.type == "insert_column") {
         console.log("insert_column", deep_copy(input))
+        table_manager.set_columns(data?.columns)
         return {
           is_success: true,
           column: input?.column,
@@ -703,5 +573,6 @@
 </script>
 
 <div>
+  <pre>{JSON.stringify(variables, null, 2)}</pre>
   <TableAdvanced manager={table_manager} />
 </div>