sveltekit-ui 1.0.29 → 1.0.31

package/README.md

@@ -29,3 +29,7 @@ npm run dev
 ## Browser
 
 That should spit out a url like http://localhost:5173/ where you should see your starting website.
+
+## Code Generator
+
+This is experimental but you can check out https://www.contibase.com/code_generator for component building help

package/dist/Components/Content/index.svelte

@@ -152,6 +152,8 @@
       ? `padding: ${set_closurable(manager?.val_prepped?.attributes?.padding)}rem;`
       : ''} {manager?.val_prepped?.attributes?.border_radius
       ? `border-radius: ${set_closurable(manager?.val_prepped?.attributes?.border_radius)}rem;`
+      : ''} {manager?.val_prepped?.attributes?.gap
+      ? `gap: ${set_closurable(manager?.val_prepped?.attributes?.gap)}rem;`
       : ''} {manager?.val_prepped?.attributes?.padding
       ? `padding: ${set_closurable(manager?.val_prepped?.attributes?.padding)}rem;`
       : ''} {manager?.val_prepped?.attributes?.align_content || manager?.val_prepped?.attributes?.justify_content

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

@@ -145,6 +145,11 @@
           <Dropdown manager={manager?.attributes_manager?.justify_content_dropdown_manager} />
         {/snippet}
       </DefinedTypeInput>
+      <DefinedTypeInput manager={manager?.attributes_manager?.gap_defined_type_input_manager}>
+        {#snippet content()}
+          <Slider manager={manager?.attributes_manager?.gap_slider_manager} />
+        {/snippet}
+      </DefinedTypeInput>
     {:else if manager?.content_type == "show_conditions"}
       <DefinedTypeInput manager={manager?.attributes_manager?.is_run_serverside_defined_type_input_manager}>
         {#snippet content()}

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

@@ -359,6 +359,24 @@ export function create_attributes_input_manager(config) {
             attributes: config?.val,
           })
         )
+
+        let gap_slider_manager = $state(
+          create_slider_manager({
+            min: 0,
+            max: 5,
+            step: 0.1,
+            val: config?.val?.gap ?? 0,
+          })
+        )
+        let gap_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "Gap",
+            attribute_root_key: "gap",
+            attribute_const_val: () => gap_slider_manager?.val,
+            attributes: config?.val,
+          })
+        )
         attributes_manager = {
           background_color_color_input_manager: background_color_color_input_manager,
           background_color_defined_type_input_manager: background_color_defined_type_input_manager,
@@ -372,6 +390,8 @@ export function create_attributes_input_manager(config) {
           align_content_defined_type_input_manager: align_content_defined_type_input_manager,
           justify_content_dropdown_manager: justify_content_dropdown_manager,
           justify_content_defined_type_input_manager: justify_content_defined_type_input_manager,
+          gap_slider_manager: gap_slider_manager,
+          gap_defined_type_input_manager: gap_defined_type_input_manager,
           get val() {
             return {
               ...background_color_defined_type_input_manager?.val,
@@ -1293,15 +1313,8 @@ export function create_attributes_input_manager(config) {
         let val_input_manager = $state(
           create_variable_path_input_manager({
             val: config?.val?.val_from_variable_path,
-            // defined_data_type: {
-            //   ...defined_data_type,
-            //   properties: {
-            //     ...defined_data_type?.properties,
-            //     [iter_identifier_text_input_manager?.val]: { type: "int_literal" },
-            //   },
-            // },
             get_defined_options: config?.get_defined_options,
-            on_finish: () => attributes_manager.close_popover(),
+            on_finish: () => val_input_manager.close_popover(),
           })
         )
         let join_text_text_input_manager = $state(

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

@@ -56,7 +56,10 @@ export function create_content_input_manager(config) {
       if (input?.type_id == selector_id) {
         return { defined, is_found_selector_id: true }
       } else if (input?.type_id == "loop") {
-        defined[input?.attributes?.iter_identifier] = { type: "text_literal" }
+        console.log("loop_iter_iter_identifier", input?.attributes?.iter_identifier)
+        if (input?.attributes?.iter_identifier) {
+          defined[input?.attributes?.iter_identifier] = { type: "text_literal" }
+        }
       }
       if (Array.isArray(input?.children)) {
         for (let child of input?.children) {
@@ -73,10 +76,13 @@ export function create_content_input_manager(config) {
   }
 
   function get_defined_options(selector_id) {
+    console.log("get_defined_options", deep_copy({ definition_stack, selector_id }))
     const defined_at_selector_id = get_defined_at_selector_id(selector_id)
+    console.log("defined_at_selector_id", deep_copy({ defined_at_selector_id }))
     const defined_data_type = json_to_data_type(
       Object.assign({}, ...[...(Array.isArray(definition_stack) ? definition_stack : [])].reverse())
     )
+    console.log("defined_data_type", deep_copy({ defined_data_type }))
     return Object.entries({ ...(defined_data_type?.properties || {}), ...defined_at_selector_id }).map(
       ([key, val]) => ({
         key,

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

@@ -13,6 +13,8 @@ import {
   variables_data_type_remaining_to_astc,
   set_definition_stack,
   astc_element,
+  deep_copy,
+  get_def_from_variable_path,
 } from "../../../client/index.js"
 
 export function create_column_input_manager(config) {
@@ -110,7 +112,7 @@ export function create_column_input_manager(config) {
   }
 
   function init(config) {
-    console.log("column_input_init", config)
+    console.log("column_input_init", deep_copy(config))
     definition_stack = config?.definition_stack
     column_id_text_input_manager = create_text_input_manager({
       label: "Column ID",
@@ -121,20 +123,16 @@ export function create_column_input_manager(config) {
       storage: null,
       storage_default_folder_path: null,
       definition_stack: definition_stack,
-      on_event: (input) => {
-        console.log("set_definition_stack_tbd400", input)
-        set_definition_stack(input)
-      },
     })
+    const editable_row = get_def_from_variable_path([...rows_data_from_variable_path, 0], definition_stack)
+    const row_definition_stack = row_iter_identifier
+      ? [{ [row_iter_identifier]: editable_row }, ...definition_stack]
+      : definition_stack
     body_content_input_manager = create_content_input_manager({
       val: config?.val?.body_content ?? null,
       storage: config?.storage,
       storage_default_folder_path: null,
-      definition_stack: definition_stack,
-      on_event: (input) => {
-        console.log("set_definition_stack_tbd33")
-        set_definition_stack(input)
-      },
+      definition_stack: row_definition_stack,
     })
     column_description_text_input_manager = create_text_input_manager({
       type: "text_area",
@@ -192,24 +190,28 @@ export function create_column_input_manager(config) {
       val: config?.val?.is_db_column ?? column_input_options?.is_db_column?.default_value ?? false,
     })
     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,
       on_finish: (input) => {
-        let default_content_input_astc = variables_data_type_remaining_to_astc(input, "input", ["rows"])
+        let default_content_input_astc = variables_data_type_remaining_to_astc(input, "input", [
+          ...(Array.isArray(rows_data_from_variable_path) ? rows_data_from_variable_path : []),
+          [row_iter_identifier],
+          column_id_text_input_manager.val,
+        ])
         column_default_value_content_manager = create_content_manager({
           val: default_content_input_astc,
           table_options: config?.table_options,
           on_search_table_row_ids: config?.on_search_table_row_ids,
           definition_stack: definition_stack,
           on_event: (input) => {
-            const res = set_definition_stack(
-              input,
-              definition_stack,
-              column_default_value_content_manager?.pass_event_down
-            )
-            definition_stack = res?.definition_stack
-            return res
+            // console.log("input3334", input)
+            // const res = set_definition_stack(
+            //   input,
+            //   definition_stack,
+            //   column_default_value_content_manager?.pass_event_down
+            // )
+            // definition_stack = res?.definition_stack
+            // return res
           },
         })
       },
@@ -260,7 +262,6 @@ export function create_column_input_manager(config) {
       font_size: 1,
       border_radius: 0.5,
       on_click: () => {
-        console.log("guess_header_content_button_manager")
         if (column_id_text_input_manager?.val) {
           const header_text = column_id_text_input_manager.val
             .split("_")
@@ -278,7 +279,6 @@ export function create_column_input_manager(config) {
       font_size: 1,
       border_radius: 0.5,
       on_click: () => {
-        console.log("guess_body_content_button_manager")
         if (column_id_text_input_manager.val && column_db_data_type_input_manager?.val) {
           let guessed_column_display_content = variables_data_type_remaining_to_astc(
             column_db_data_type_input_manager?.val,
@@ -289,7 +289,6 @@ export function create_column_input_manager(config) {
               column_id_text_input_manager.val,
             ]
           )
-          console.log("guessed_column_display_content", guessed_column_display_content)
           body_content_input_manager.add_version(guessed_column_display_content)
         } else {
           body_content_input_manager.add_version(null)

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

@@ -2,6 +2,7 @@ import { create_popover_manager } from "../Popover/index.svelte.js"
 import { create_button_manager } from "../Button/index.svelte.js"
 import { create_text_input_manager } from "../TextInput/index.svelte.js"
 import { create_dropdown_manager } from "../Dropdown/index.svelte.js"
+import { deep_copy } from "../../client/index.js"
 
 export function create_variable_path_input_manager(config) {
   let popover_manager = $state(null)
@@ -14,6 +15,7 @@ export function create_variable_path_input_manager(config) {
   let path_prepped = $state(null)
   let val = $derived(get_val())
   let val_text = $derived(val_to_text(val))
+  let variable_data_type_at_path = $state(null)
 
   function get_val() {
     return def_dropdown_manager?.val
@@ -24,7 +26,7 @@ export function create_variable_path_input_manager(config) {
   function prep_path(input) {
     let path_prepped_loc = $state([])
     if (Array.isArray(input)) {
-      let variable_data_type_at_path = Array.isArray(defined_options)
+      variable_data_type_at_path = Array.isArray(defined_options)
         ? defined_options.find((h) => h?.key === def_dropdown_manager?.val)?.data_type
         : null
       for (let i = 1; i < input.length; i++) {
@@ -104,7 +106,6 @@ export function create_variable_path_input_manager(config) {
             })
           }
         }
-        console.log("key_options", key_options)
         let val = $derived(
           type_dropdown_manager?.val == "string"
             ? const_string_value_text_input_manager?.val
@@ -123,6 +124,7 @@ export function create_variable_path_input_manager(config) {
             ? variable_path_input_manager?.variable_data_type_at_path
             : null
         )
+        variable_data_type_at_path = variable_data_type_at_next_path
         path_prepped_loc.push({
           get type_dropdown_manager() {
             return type_dropdown_manager
@@ -177,6 +179,9 @@ export function create_variable_path_input_manager(config) {
 
   function init(input) {
     levels_nested = input?.levels_nested ?? 0
+    if (typeof config?.get_defined_options == "function") {
+      defined_options = config?.get_defined_options()
+    }
     popover_manager = create_popover_manager({
       min_width: 280,
       target_width: 450,
@@ -239,6 +244,9 @@ export function create_variable_path_input_manager(config) {
     get val_text() {
       return val_text
     },
+    get variable_data_type_at_path() {
+      return variable_data_type_at_path
+    },
     get levels_nested() {
       return levels_nested
     },

package/dist/client/astc_formatting/index.js

@@ -792,12 +792,15 @@ export function variables_data_type_remaining_to_astc(
     // }
     const child_astc = variables_data_type_remaining_to_astc(
       variables_data_type_remaining?.items,
-      preferred_content_use
+      preferred_content_use,
+      [...leading_variable_path, ["loop_index"]]
     )
+    console.log("loop_child", { child_astc, variables_data_type_remaining })
     return astc_element("loop", [child_astc], {
       val_from_variable_path: leading_variable_path,
       ...(variables_data_type_remaining?.attributes ?? {}),
       font_size: 1.2,
+      iter_identifier: "loop_index",
     })
     // } else if (variables_data_type_remaining?.type == "list") {
     // list input tbd just content input i guess

package/dist/client/types/index.js

@@ -689,6 +689,10 @@ export const content_types = {
         type: "text_literal",
         display_name: "Justify Content",
       },
+      gap: {
+        type: "float_literal",
+        display_name: "Gap",
+      },
     },
     child_elements: {
       ...main_child_element_options,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sveltekit-ui",
-  "version": "1.0.29",
+  "version": "1.0.31",
   "description": "A SvelteKit UI component library for building modern web applications",
   "license": "MIT",
   "type": "module",
@@ -19,14 +19,14 @@
   "dependencies": {
     "context-filter-polyfill": "^0.3.23",
     "qr-code-styling": "^1.9.2",
-    "svelte": "^5.38.2"
+    "svelte": "^5.38.3"
   },
   "peerDependencies": {
     "@sveltejs/kit": "^2.22.2"
   },
   "devDependencies": {
     "@sveltejs/adapter-vercel": "^5.10.2",
-    "@sveltejs/kit": "^2.36.1",
+    "@sveltejs/kit": "^2.36.2",
     "@sveltejs/package": "^2.5.0",
     "@sveltejs/vite-plugin-svelte": "^6.1.3",
     "@vercel/analytics": "^1.5.0",

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

@@ -152,6 +152,8 @@
       ? `padding: ${set_closurable(manager?.val_prepped?.attributes?.padding)}rem;`
       : ''} {manager?.val_prepped?.attributes?.border_radius
       ? `border-radius: ${set_closurable(manager?.val_prepped?.attributes?.border_radius)}rem;`
+      : ''} {manager?.val_prepped?.attributes?.gap
+      ? `gap: ${set_closurable(manager?.val_prepped?.attributes?.gap)}rem;`
       : ''} {manager?.val_prepped?.attributes?.padding
       ? `padding: ${set_closurable(manager?.val_prepped?.attributes?.padding)}rem;`
       : ''} {manager?.val_prepped?.attributes?.align_content || manager?.val_prepped?.attributes?.justify_content

package/src/lib/Components/ContentInput/AttributesInput/index.svelte

@@ -145,6 +145,11 @@
           <Dropdown manager={manager?.attributes_manager?.justify_content_dropdown_manager} />
         {/snippet}
       </DefinedTypeInput>
+      <DefinedTypeInput manager={manager?.attributes_manager?.gap_defined_type_input_manager}>
+        {#snippet content()}
+          <Slider manager={manager?.attributes_manager?.gap_slider_manager} />
+        {/snippet}
+      </DefinedTypeInput>
     {:else if manager?.content_type == "show_conditions"}
       <DefinedTypeInput manager={manager?.attributes_manager?.is_run_serverside_defined_type_input_manager}>
         {#snippet content()}

package/src/lib/Components/ContentInput/AttributesInput/index.svelte.js

@@ -359,6 +359,24 @@ export function create_attributes_input_manager(config) {
             attributes: config?.val,
           })
         )
+
+        let gap_slider_manager = $state(
+          create_slider_manager({
+            min: 0,
+            max: 5,
+            step: 0.1,
+            val: config?.val?.gap ?? 0,
+          })
+        )
+        let gap_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "Gap",
+            attribute_root_key: "gap",
+            attribute_const_val: () => gap_slider_manager?.val,
+            attributes: config?.val,
+          })
+        )
         attributes_manager = {
           background_color_color_input_manager: background_color_color_input_manager,
           background_color_defined_type_input_manager: background_color_defined_type_input_manager,
@@ -372,6 +390,8 @@ export function create_attributes_input_manager(config) {
           align_content_defined_type_input_manager: align_content_defined_type_input_manager,
           justify_content_dropdown_manager: justify_content_dropdown_manager,
           justify_content_defined_type_input_manager: justify_content_defined_type_input_manager,
+          gap_slider_manager: gap_slider_manager,
+          gap_defined_type_input_manager: gap_defined_type_input_manager,
           get val() {
             return {
               ...background_color_defined_type_input_manager?.val,
@@ -1293,15 +1313,8 @@ export function create_attributes_input_manager(config) {
         let val_input_manager = $state(
           create_variable_path_input_manager({
             val: config?.val?.val_from_variable_path,
-            // defined_data_type: {
-            //   ...defined_data_type,
-            //   properties: {
-            //     ...defined_data_type?.properties,
-            //     [iter_identifier_text_input_manager?.val]: { type: "int_literal" },
-            //   },
-            // },
             get_defined_options: config?.get_defined_options,
-            on_finish: () => attributes_manager.close_popover(),
+            on_finish: () => val_input_manager.close_popover(),
           })
         )
         let join_text_text_input_manager = $state(

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

@@ -56,7 +56,10 @@ export function create_content_input_manager(config) {
       if (input?.type_id == selector_id) {
         return { defined, is_found_selector_id: true }
       } else if (input?.type_id == "loop") {
-        defined[input?.attributes?.iter_identifier] = { type: "text_literal" }
+        console.log("loop_iter_iter_identifier", input?.attributes?.iter_identifier)
+        if (input?.attributes?.iter_identifier) {
+          defined[input?.attributes?.iter_identifier] = { type: "text_literal" }
+        }
       }
       if (Array.isArray(input?.children)) {
         for (let child of input?.children) {
@@ -73,10 +76,13 @@ export function create_content_input_manager(config) {
   }
 
   function get_defined_options(selector_id) {
+    console.log("get_defined_options", deep_copy({ definition_stack, selector_id }))
     const defined_at_selector_id = get_defined_at_selector_id(selector_id)
+    console.log("defined_at_selector_id", deep_copy({ defined_at_selector_id }))
     const defined_data_type = json_to_data_type(
       Object.assign({}, ...[...(Array.isArray(definition_stack) ? definition_stack : [])].reverse())
     )
+    console.log("defined_data_type", deep_copy({ defined_data_type }))
     return Object.entries({ ...(defined_data_type?.properties || {}), ...defined_at_selector_id }).map(
       ([key, val]) => ({
         key,

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

@@ -13,6 +13,8 @@ import {
   variables_data_type_remaining_to_astc,
   set_definition_stack,
   astc_element,
+  deep_copy,
+  get_def_from_variable_path,
 } from "$lib/client/index.js"
 
 export function create_column_input_manager(config) {
@@ -110,7 +112,7 @@ export function create_column_input_manager(config) {
   }
 
   function init(config) {
-    console.log("column_input_init", config)
+    console.log("column_input_init", deep_copy(config))
     definition_stack = config?.definition_stack
     column_id_text_input_manager = create_text_input_manager({
       label: "Column ID",
@@ -121,20 +123,16 @@ export function create_column_input_manager(config) {
       storage: null,
       storage_default_folder_path: null,
       definition_stack: definition_stack,
-      on_event: (input) => {
-        console.log("set_definition_stack_tbd400", input)
-        set_definition_stack(input)
-      },
     })
+    const editable_row = get_def_from_variable_path([...rows_data_from_variable_path, 0], definition_stack)
+    const row_definition_stack = row_iter_identifier
+      ? [{ [row_iter_identifier]: editable_row }, ...definition_stack]
+      : definition_stack
     body_content_input_manager = create_content_input_manager({
       val: config?.val?.body_content ?? null,
       storage: config?.storage,
       storage_default_folder_path: null,
-      definition_stack: definition_stack,
-      on_event: (input) => {
-        console.log("set_definition_stack_tbd33")
-        set_definition_stack(input)
-      },
+      definition_stack: row_definition_stack,
     })
     column_description_text_input_manager = create_text_input_manager({
       type: "text_area",
@@ -192,24 +190,28 @@ export function create_column_input_manager(config) {
       val: config?.val?.is_db_column ?? column_input_options?.is_db_column?.default_value ?? false,
     })
     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,
       on_finish: (input) => {
-        let default_content_input_astc = variables_data_type_remaining_to_astc(input, "input", ["rows"])
+        let default_content_input_astc = variables_data_type_remaining_to_astc(input, "input", [
+          ...(Array.isArray(rows_data_from_variable_path) ? rows_data_from_variable_path : []),
+          [row_iter_identifier],
+          column_id_text_input_manager.val,
+        ])
         column_default_value_content_manager = create_content_manager({
           val: default_content_input_astc,
           table_options: config?.table_options,
           on_search_table_row_ids: config?.on_search_table_row_ids,
           definition_stack: definition_stack,
           on_event: (input) => {
-            const res = set_definition_stack(
-              input,
-              definition_stack,
-              column_default_value_content_manager?.pass_event_down
-            )
-            definition_stack = res?.definition_stack
-            return res
+            // console.log("input3334", input)
+            // const res = set_definition_stack(
+            //   input,
+            //   definition_stack,
+            //   column_default_value_content_manager?.pass_event_down
+            // )
+            // definition_stack = res?.definition_stack
+            // return res
           },
         })
       },
@@ -260,7 +262,6 @@ export function create_column_input_manager(config) {
       font_size: 1,
       border_radius: 0.5,
       on_click: () => {
-        console.log("guess_header_content_button_manager")
         if (column_id_text_input_manager?.val) {
           const header_text = column_id_text_input_manager.val
             .split("_")
@@ -278,7 +279,6 @@ export function create_column_input_manager(config) {
       font_size: 1,
       border_radius: 0.5,
       on_click: () => {
-        console.log("guess_body_content_button_manager")
         if (column_id_text_input_manager.val && column_db_data_type_input_manager?.val) {
           let guessed_column_display_content = variables_data_type_remaining_to_astc(
             column_db_data_type_input_manager?.val,
@@ -289,7 +289,6 @@ export function create_column_input_manager(config) {
               column_id_text_input_manager.val,
             ]
           )
-          console.log("guessed_column_display_content", guessed_column_display_content)
           body_content_input_manager.add_version(guessed_column_display_content)
         } else {
           body_content_input_manager.add_version(null)

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

@@ -2,6 +2,7 @@ import { create_popover_manager } from "$lib/Components/Popover/index.svelte.js"
 import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
 import { create_text_input_manager } from "$lib/Components/TextInput/index.svelte.js"
 import { create_dropdown_manager } from "$lib/Components/Dropdown/index.svelte.js"
+import { deep_copy } from "$lib/client/index.js"
 
 export function create_variable_path_input_manager(config) {
   let popover_manager = $state(null)
@@ -14,6 +15,7 @@ export function create_variable_path_input_manager(config) {
   let path_prepped = $state(null)
   let val = $derived(get_val())
   let val_text = $derived(val_to_text(val))
+  let variable_data_type_at_path = $state(null)
 
   function get_val() {
     return def_dropdown_manager?.val
@@ -24,7 +26,7 @@ export function create_variable_path_input_manager(config) {
   function prep_path(input) {
     let path_prepped_loc = $state([])
     if (Array.isArray(input)) {
-      let variable_data_type_at_path = Array.isArray(defined_options)
+      variable_data_type_at_path = Array.isArray(defined_options)
         ? defined_options.find((h) => h?.key === def_dropdown_manager?.val)?.data_type
         : null
       for (let i = 1; i < input.length; i++) {
@@ -104,7 +106,6 @@ export function create_variable_path_input_manager(config) {
             })
           }
         }
-        console.log("key_options", key_options)
         let val = $derived(
           type_dropdown_manager?.val == "string"
             ? const_string_value_text_input_manager?.val
@@ -123,6 +124,7 @@ export function create_variable_path_input_manager(config) {
             ? variable_path_input_manager?.variable_data_type_at_path
             : null
         )
+        variable_data_type_at_path = variable_data_type_at_next_path
         path_prepped_loc.push({
           get type_dropdown_manager() {
             return type_dropdown_manager
@@ -177,6 +179,9 @@ export function create_variable_path_input_manager(config) {
 
   function init(input) {
     levels_nested = input?.levels_nested ?? 0
+    if (typeof config?.get_defined_options == "function") {
+      defined_options = config?.get_defined_options()
+    }
     popover_manager = create_popover_manager({
       min_width: 280,
       target_width: 450,
@@ -239,6 +244,9 @@ export function create_variable_path_input_manager(config) {
     get val_text() {
       return val_text
     },
+    get variable_data_type_at_path() {
+      return variable_data_type_at_path
+    },
     get levels_nested() {
       return levels_nested
     },

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

@@ -792,12 +792,15 @@ export function variables_data_type_remaining_to_astc(
     // }
     const child_astc = variables_data_type_remaining_to_astc(
       variables_data_type_remaining?.items,
-      preferred_content_use
+      preferred_content_use,
+      [...leading_variable_path, ["loop_index"]]
     )
+    console.log("loop_child", { child_astc, variables_data_type_remaining })
     return astc_element("loop", [child_astc], {
       val_from_variable_path: leading_variable_path,
       ...(variables_data_type_remaining?.attributes ?? {}),
       font_size: 1.2,
+      iter_identifier: "loop_index",
     })
     // } else if (variables_data_type_remaining?.type == "list") {
     // list input tbd just content input i guess

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

@@ -689,6 +689,10 @@ export const content_types = {
         type: "text_literal",
         display_name: "Justify Content",
       },
+      gap: {
+        type: "float_literal",
+        display_name: "Gap",
+      },
     },
     child_elements: {
       ...main_child_element_options,