sveltekit-ui 1.0.20 → 1.0.22

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

@@ -294,7 +294,11 @@ export function create_content_input_manager(config) {
           return
         }
         setTimeout(() => {
-          add_child_el(element?.selector_id, input)
+          if (location_to_add_element == "sibling") {
+            add_sibling_el(element?.selector_id, input)
+          } else {
+            add_child_el(element?.selector_id, input)
+          }
         }, 500)
       },
     })
@@ -445,6 +449,7 @@ export function create_content_input_manager(config) {
   }
 
   function add_sibling_el(selector_id, el_type_id, element_to_add = null) {
+    console.log("add_sibling_el", selector_id, el_type_id)
     let dom_el_parent = get_parent_el(selector_id)
     const element_index_of_siblings = Array.isArray(dom_el_parent?.children)
       ? dom_el_parent.children.findIndex((h) => h.selector_id == selector_id)
@@ -464,8 +469,10 @@ export function create_content_input_manager(config) {
   }
 
   function initiate_add_sibling_el_to_selector(selector_id) {
+    console.log("initiate_add_sibling_el_to_selector", selector_id)
     const dom_el_parent = get_parent_el(selector_id)
     const avail_element_ids = calc_child_element_options(dom_el_parent)
+    console.log("avail_element_ids", avail_element_ids)
     if (avail_element_ids.length > 1) {
       location_to_add_element = "sibling"
       find_and_open_add_element_popover_selector_id(selected_version_prepped, selector_id ?? "root")
@@ -511,6 +518,7 @@ export function create_content_input_manager(config) {
   }
 
   function add_el_to_el_children(selector_id, new_element) {
+    console.log("add_el_to_el_children", selector_id)
     add_version(add_child_to_el_recursive(selected_version_prepped?.element, selector_id, new_element))
   }
 

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

@@ -646,12 +646,10 @@ export function create_table_advanced_manager(config) {
         })
         .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,
-            // ])
+            let guessed_column_display_content = variables_data_type_remaining_to_astc(val?.db_data_type, "display", [
+              row_edit_def_identifier,
+              column_id,
+            ])
             return {
               type_id: "div",
               selector_id: create_unique_id(null, 8),
@@ -675,7 +673,7 @@ export function create_table_advanced_manager(config) {
                   ],
                   attributes: {},
                 },
-                // guessed_column_display_content,
+                guessed_column_display_content,
                 {
                   type_id: "br",
                   selector_id: create_unique_id(null, 8),

package/dist/Components/VariablePathInput/index.svelte

@@ -19,7 +19,6 @@
       <p>{manager?.val_text}</p>
       <Dropdown manager={manager?.def_dropdown_manager} />
       {#if manager?.def_dropdown_manager?.val}
-        <Button manager={manager?.add_path_item_button_manager} />
         <p class="label">Path Items (optional)</p>
         {#if Array.isArray(manager?.path_prepped) && manager?.path_prepped.length > 0}
           {#each manager?.path_prepped as path_item}
@@ -54,6 +53,7 @@
         {:else}
           <p>No Path Items</p>
         {/if}
+        <Button manager={manager?.add_path_item_button_manager} />
       {/if}
     </div>
   {/snippet}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sveltekit-ui",
-  "version": "1.0.20",
+  "version": "1.0.22",
   "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.1"
+    "svelte": "^5.38.2"
   },
   "peerDependencies": {
     "@sveltejs/kit": "^2.22.2"
   },
   "devDependencies": {
-    "@sveltejs/adapter-vercel": "^5.8.2",
-    "@sveltejs/kit": "^2.29.0",
+    "@sveltejs/adapter-vercel": "^5.9.1",
+    "@sveltejs/kit": "^2.31.1",
     "@sveltejs/package": "^2.4.1",
     "@sveltejs/vite-plugin-svelte": "^6.1.2",
     "@vercel/analytics": "^1.5.0",

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

@@ -294,7 +294,11 @@ export function create_content_input_manager(config) {
           return
         }
         setTimeout(() => {
-          add_child_el(element?.selector_id, input)
+          if (location_to_add_element == "sibling") {
+            add_sibling_el(element?.selector_id, input)
+          } else {
+            add_child_el(element?.selector_id, input)
+          }
         }, 500)
       },
     })
@@ -445,6 +449,7 @@ export function create_content_input_manager(config) {
   }
 
   function add_sibling_el(selector_id, el_type_id, element_to_add = null) {
+    console.log("add_sibling_el", selector_id, el_type_id)
     let dom_el_parent = get_parent_el(selector_id)
     const element_index_of_siblings = Array.isArray(dom_el_parent?.children)
       ? dom_el_parent.children.findIndex((h) => h.selector_id == selector_id)
@@ -464,8 +469,10 @@ export function create_content_input_manager(config) {
   }
 
   function initiate_add_sibling_el_to_selector(selector_id) {
+    console.log("initiate_add_sibling_el_to_selector", selector_id)
     const dom_el_parent = get_parent_el(selector_id)
     const avail_element_ids = calc_child_element_options(dom_el_parent)
+    console.log("avail_element_ids", avail_element_ids)
     if (avail_element_ids.length > 1) {
       location_to_add_element = "sibling"
       find_and_open_add_element_popover_selector_id(selected_version_prepped, selector_id ?? "root")
@@ -511,6 +518,7 @@ export function create_content_input_manager(config) {
   }
 
   function add_el_to_el_children(selector_id, new_element) {
+    console.log("add_el_to_el_children", selector_id)
     add_version(add_child_to_el_recursive(selected_version_prepped?.element, selector_id, new_element))
   }
 

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

@@ -646,12 +646,10 @@ export function create_table_advanced_manager(config) {
         })
         .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,
-            // ])
+            let guessed_column_display_content = variables_data_type_remaining_to_astc(val?.db_data_type, "display", [
+              row_edit_def_identifier,
+              column_id,
+            ])
             return {
               type_id: "div",
               selector_id: create_unique_id(null, 8),
@@ -675,7 +673,7 @@ export function create_table_advanced_manager(config) {
                   ],
                   attributes: {},
                 },
-                // guessed_column_display_content,
+                guessed_column_display_content,
                 {
                   type_id: "br",
                   selector_id: create_unique_id(null, 8),

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

@@ -19,7 +19,6 @@
       <p>{manager?.val_text}</p>
       <Dropdown manager={manager?.def_dropdown_manager} />
       {#if manager?.def_dropdown_manager?.val}
-        <Button manager={manager?.add_path_item_button_manager} />
         <p class="label">Path Items (optional)</p>
         {#if Array.isArray(manager?.path_prepped) && manager?.path_prepped.length > 0}
           {#each manager?.path_prepped as path_item}
@@ -54,6 +53,7 @@
         {:else}
           <p>No Path Items</p>
         {/if}
+        <Button manager={manager?.add_path_item_button_manager} />
       {/if}
     </div>
   {/snippet}

package/src/routes/+page.svelte

@@ -1,12 +1,217 @@
 <script>
+  import Content from "$lib/Components/Content/index.svelte"
+  import { create_content_manager } from "$lib/Components/Content/index.svelte.js"
   import Button from "$lib/Components/Button/index.svelte"
   import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
-  import Code from "$lib/Components/Code/index.svelte"
-  import { create_code_manager } from "$lib/Components/Code/index.svelte.js"
   import { goto } from "$app/navigation"
   import { definitions, docs_definition_to_sample_code, docs_overview_code_sample } from "$lib/client/docs/index.js"
   import { copy_to_clipboard } from "$lib/client/index.js"
 
+  let content_manager = create_content_manager({
+    val: {
+      type_id: "div",
+      children: [
+        {
+          type_id: "h1",
+          children: [
+            {
+              type_id: "base_text",
+              children: [],
+              attributes: { content: "Welcome to Sveltekit-UI", text_color: null },
+              selector_id: "bbnzrnzw",
+            },
+          ],
+          attributes: null,
+          selector_id: "pbteeefl",
+        },
+        {
+          type_id: "p",
+          children: [
+            {
+              type_id: "link",
+              children: [
+                {
+                  type_id: "base_text",
+                  children: [],
+                  attributes: { content: "View on npm", text_color: null },
+                  selector_id: "blkoesdt",
+                },
+              ],
+              attributes: {
+                href: "https://www.npmjs.com/package/sveltekit-ui",
+                display_text: "View on npm",
+                text_color: null,
+                is_show_preview: null,
+              },
+              selector_id: "ubywmlua",
+            },
+          ],
+          attributes: null,
+          selector_id: "eqmjdjek",
+        },
+        {
+          type_id: "p",
+          children: [
+            {
+              type_id: "base_text",
+              children: [],
+              attributes: { content: "Install using:", text_color: null },
+              selector_id: "dfbrrcxs",
+            },
+          ],
+          attributes: null,
+          selector_id: "hqknvvyg",
+        },
+        {
+          type_id: "code_inline",
+          children: [],
+          attributes: { content: "npm i sveltekit-ui" },
+          selector_id: "wzxmkjdq",
+        },
+        {
+          type_id: "p",
+          children: [
+            {
+              type_id: "base_text",
+              children: [],
+              attributes: { content: "Quick start with our recommended starter template:", text_color: null },
+              selector_id: "nkrvpazw",
+            },
+          ],
+          attributes: null,
+          selector_id: "ooilajut",
+        },
+        {
+          type_id: "code_inline",
+          children: [],
+          attributes: { content: "npx create-sveltekit-ui-site my-project" },
+          selector_id: "fvxsjfnx",
+        },
+        {
+          type_id: "p",
+          children: [
+            {
+              type_id: "base_text",
+              children: [],
+              attributes: {
+                content:
+                  "Our components use Svelte 5 Runes and are primarily built in JavaScript. This architecture gives you complete control over your component tree via a single parent object, which you can pass down through your HTML and CSS components as needed.",
+                text_color: null,
+              },
+              selector_id: "wfysglbt",
+            },
+          ],
+          attributes: null,
+          selector_id: "inasxfam",
+        },
+        {
+          type_id: "p",
+          children: [
+            {
+              type_id: "base_text",
+              children: [],
+              attributes: {
+                content:
+                  "After extensive work, we are excited to announce a public release as of July 2025, and we welcome you to use and contribute to sveltekit-ui.",
+                text_color: null,
+              },
+              selector_id: "padlkhfq",
+            },
+          ],
+          attributes: null,
+          selector_id: "nvyunqlk",
+        },
+        {
+          type_id: "p",
+          children: [
+            {
+              type_id: "base_text",
+              children: [],
+              attributes: { content: "For easier building, check out the ", text_color: null },
+              selector_id: "upxajwlo",
+            },
+            {
+              type_id: "link",
+              children: [
+                {
+                  type_id: "base_text",
+                  children: [],
+                  attributes: { content: "contibase code generator", text_color: null },
+                  selector_id: "gfxhzqfl",
+                },
+              ],
+              attributes: {
+                href: "https://www.contibase.com/code_generator",
+                display_text: "contibase code generator",
+                text_color: null,
+                is_show_preview: null,
+              },
+              selector_id: "cbmfgeuw",
+            },
+            {
+              type_id: "base_text",
+              children: [],
+              attributes: {
+                content: ". Contibase is also highly compatible with sveltekit-ui and is a great companion project.",
+                text_color: null,
+              },
+              selector_id: "jygcousk",
+            },
+          ],
+          attributes: null,
+          selector_id: "tdiisewe",
+        },
+        {
+          type_id: "h2",
+          children: [
+            {
+              type_id: "base_text",
+              children: [],
+              attributes: { content: "Sample Usage", text_color: null },
+              selector_id: "rlhqrfgt",
+            },
+          ],
+          attributes: null,
+          selector_id: "zxmfiiet",
+        },
+        {
+          type_id: "code",
+          children: [],
+          attributes: {
+            content: docs_overview_code_sample,
+            language: "svelte",
+          },
+          selector_id: "tqjlpmsi",
+        },
+        {
+          type_id: "p",
+          children: [
+            {
+              type_id: "base_text",
+              children: [],
+              attributes: {
+                content: "Explore the documentation to learn more about each component and for further usage examples.",
+                text_color: null,
+              },
+              selector_id: "gsqceimv",
+            },
+          ],
+          attributes: null,
+          selector_id: "amkvgomx",
+        },
+      ],
+      attributes: {
+        background_color: null,
+        border_color: null,
+        border_radius: null,
+        padding: null,
+        align_content: null,
+        justify_content: null,
+      },
+      selector_id: "nguqpvmf",
+    },
+  })
+
   let button_manager = create_button_manager({
     text: "Visit Docs",
     mt: 2,
@@ -14,13 +219,6 @@
     on_click: () => goto("/button"),
   })
 
-  let overview_sample_code_manager = create_code_manager({
-    language: "svelte",
-    content: docs_overview_code_sample,
-  })
-
-  const overview_intro = `Each component can be combined into a more complex component. This is intended for sveltekit projects. The whole "tree" of components should be initialized at the parent-most level which is likely in the <script> tags of a +page.svelte file.`
-
   let copy_all_docs_button_manager = create_button_manager({
     type: "outlined",
     text: "Copy All Docs",
@@ -29,7 +227,7 @@
     mt: 2,
     support_icon: "clipboard",
     on_click: () => {
-      const overview = `${overview_intro}
+      const overview = `Each component can be combined into a more complex component. This is intended for sveltekit projects. The whole "tree" of components should be initialized at the parent-most level which is likely in the <script> tags of a +page.svelte file.
       
 ${docs_overview_code_sample}
 
@@ -48,56 +246,10 @@ below are the docs for each component individually
       copy_to_clipboard(overview + JSON.stringify(docs_prepped))
     },
   })
-
-  let copy_npm_button_manager = create_button_manager({
-    type: "outlined",
-    is_uniform: true,
-    is_success_animation: true,
-    support_icon: "clipboard",
-    on_click: () => copy_to_clipboard("npm i sveltekit-ui"),
-  })
-  let copy_quick_start_button_manager = create_button_manager({
-    type: "outlined",
-    is_uniform: true,
-    is_success_animation: true,
-    support_icon: "clipboard",
-    on_click: () => copy_to_clipboard("npx create-sveltekit-ui-site my-project"),
-  })
 </script>
 
 <div class="container">
-  <h1>Welcome to Sveltekit-UI</h1>
-  <p>
-    npm package at <a href="https://www.npmjs.com/package/sveltekit-ui" target="_blank" rel="noopener noreferrer"
-      >https://www.npmjs.com/package/sveltekit-ui</a
-    >
-  </p>
-  <div style="display: inline-flex; gap: .5rem;">
-    <code>npm i sveltekit-ui</code>
-    <Button manager={copy_npm_button_manager} />
-  </div>
-
-  <h4>Quick start project with starter template (recommended)</h4>
-  <div style="display: inline-flex; gap: .5rem;">
-    <code>npx create-sveltekit-ui-site my-project</code>
-    <Button manager={copy_quick_start_button_manager} />
-  </div>
-  <p>
-    Our components use svelte 5 Runes. We have taken an approach where components are mostly built in javascript to
-    allow for control of your entire tree of components in one parent object that can then be passed down through all
-    HTML and CSS components.
-  </p>
-  <p>
-    After a lot of work, these components are in a state that we are happy to release to the public and encourage people
-    to use as of July 2025. You can also go to
-    <a href="https://www.contibase.com/code_generator" target="_blank" rel="noopener noreferrer"
-      >www.contibase.com/code_generator</a
-    >
-    to help you build with sveltekit-ui. Contibase is also a very compatible project to use alongside sveltekit-ui.
-  </p>
-  <br />
-  <Code manager={overview_sample_code_manager} />
-  <p>Explore the docs for details on each individual component</p>
+  <Content manager={content_manager} />
   <Button manager={button_manager} />
   <Button manager={copy_all_docs_button_manager} />
   <p>

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

@@ -4,226 +4,6 @@
   import { PUBLIC_APPLE_MAPKIT_JS_API_KEY } from "$env/static/public"
   import { deep_copy } from "$lib/client/index.js"
 
-  const test_row_input_content = {
-    type_id: "div",
-    selector_id: "div_jxhvczqm",
-    children: [
-      {
-        type_id: "div",
-        selector_id: "div_hghtjdix",
-        children: [
-          {
-            type_id: "span",
-            selector_id: "span_pnxoxyns",
-            children: [
-              {
-                type_id: "strong",
-                selector_id: "strong_wzqcpnxy",
-                children: [],
-                attributes: {
-                  content: "id",
-                },
-              },
-              {
-                type_id: "em",
-                selector_id: "em_vdjulmfu",
-                children: [],
-                attributes: {
-                  content: " autogenerated ",
-                },
-              },
-            ],
-            attributes: {},
-          },
-          {
-            type_id: "base_text",
-            selector_id: "dvobhkqp",
-            children: [],
-            attributes: {
-              content_from_variable_path: ["rows", ["row_i"], "id"],
-              size: 10,
-            },
-          },
-          {
-            type_id: "br",
-            selector_id: "br_gqfqxajt",
-            children: [],
-            attributes: {},
-          },
-        ],
-        attributes: {},
-      },
-      {
-        type_id: "div",
-        selector_id: "div_escitwrx",
-        children: [
-          {
-            type_id: "div",
-            selector_id: "ymcklbcy",
-            children: [
-              {
-                type_id: "div",
-                selector_id: "drsdciju",
-                children: [
-                  {
-                    type_id: "base_text",
-                    selector_id: "oejzzhrk",
-                    children: [],
-                    attributes: {
-                      content: "label:",
-                    },
-                  },
-                  {
-                    type_id: "text_input",
-                    selector_id: "lkblpxsl",
-                    children: [],
-                    attributes: {
-                      val_from_variable_path: ["rows", ["row_i"], "label"],
-                    },
-                  },
-                ],
-                attributes: {},
-              },
-            ],
-            attributes: {
-              val_from_variable_path: ["rows", ["row_i"], "label"],
-            },
-          },
-        ],
-        attributes: {},
-      },
-      {
-        type_id: "div",
-        selector_id: "div_escitwrx",
-        children: [
-          {
-            type_id: "div",
-            selector_id: "ymcklbcy",
-            children: [
-              {
-                type_id: "div",
-                selector_id: "drsdciju",
-                children: [
-                  {
-                    type_id: "base_text",
-                    selector_id: "oejzzhrk",
-                    children: [],
-                    attributes: {
-                      content: "fav_color:",
-                    },
-                  },
-                  {
-                    type_id: "color_input",
-                    selector_id: "lkblpxsl",
-                    children: [],
-                    attributes: {
-                      val_from_variable_path: ["rows", ["row_i"], "fav_color"],
-                    },
-                  },
-                ],
-                attributes: {},
-              },
-            ],
-            attributes: {
-              val_from_variable_path: ["rows", ["row_i"], "fav_color"],
-            },
-          },
-        ],
-        attributes: {},
-      },
-      {
-        type_id: "div",
-        selector_id: "div_erlnynoa",
-        children: [
-          {
-            type_id: "span",
-            selector_id: "span_zhksqepo",
-            children: [
-              {
-                type_id: "strong",
-                selector_id: "strong_gxtxtoar",
-                children: [],
-                attributes: {
-                  content: "db_epoch_created",
-                },
-              },
-              {
-                type_id: "em",
-                selector_id: "em_zmhymiri",
-                children: [],
-                attributes: {
-                  content: " autogenerated ",
-                },
-              },
-            ],
-            attributes: {},
-          },
-          {
-            type_id: "time",
-            selector_id: "fiujqeqz",
-            children: [],
-            attributes: {
-              format: "epoch",
-              val_from_variable_path: ["rows", ["row_i"], "db_epoch_created"],
-            },
-          },
-          {
-            type_id: "br",
-            selector_id: "br_ncfvgeks",
-            children: [],
-            attributes: {},
-          },
-        ],
-        attributes: {},
-      },
-      {
-        type_id: "div",
-        selector_id: "div_ctqanaev",
-        children: [
-          {
-            type_id: "span",
-            selector_id: "span_egiboqfu",
-            children: [
-              {
-                type_id: "strong",
-                selector_id: "strong_jnvuzdvr",
-                children: [],
-                attributes: {
-                  content: "db_epoch_updated",
-                },
-              },
-              {
-                type_id: "em",
-                selector_id: "em_nvxliucw",
-                children: [],
-                attributes: {
-                  content: " autogenerated ",
-                },
-              },
-            ],
-            attributes: {},
-          },
-          {
-            type_id: "time",
-            selector_id: "ubzlhrul",
-            children: [],
-            attributes: {
-              format: "epoch",
-              val_from_variable_path: ["rows", ["row_i"], "db_epoch_updated"],
-            },
-          },
-          {
-            type_id: "br",
-            selector_id: "br_wtxsndxh",
-            children: [],
-            attributes: {},
-          },
-        ],
-        attributes: {},
-      },
-    ],
-  }
-
   let data = $state({
     id: "cbsemvrsoidhrzyhugue",
     name: "test",
@@ -244,7 +24,7 @@
           children: [],
           attributes: {
             size: 10,
-            content_from_variable_path: ["variables", "rows", ["row_i"], "id"],
+            content_from_variable_path: ["rows", ["row_i"], "id"],
           },
           selector_id: "hcsqz",
         },
@@ -357,7 +137,7 @@
           children: [],
           attributes: {
             format: "epoch",
-            val_from_variable_path: ["variables", "rows", ["row_i"], "db_epoch_created"],
+            val_from_variable_path: ["rows", ["row_i"], "db_epoch_created"],
           },
           selector_id: "time_urzjm",
         },
@@ -394,7 +174,7 @@
           children: [],
           attributes: {
             format: "epoch",
-            val_from_variable_path: ["variables", "rows", ["row_i"], "db_epoch_updated"],
+            val_from_variable_path: ["rows", ["row_i"], "db_epoch_updated"],
           },
           selector_id: "epoch_rozyy",
         },
@@ -430,9 +210,62 @@
   let table_manager = $state(null)
   let variables = $state({
     rows: [
-      { us_state: "cccc", population: 200 },
-      { us_state: "zzzz", population: 20 },
-      { us_state: "aaaaa", population: 400 },
+      {
+        id: "zuetqjdinawjrvftztif",
+        us_state: "Ohio",
+        population: 11700000,
+        db_epoch_created: 1734451200,
+        db_epoch_updated: 1734451200,
+      },
+      {
+        id: "blwigkbhwbrdrpfgtjht",
+        us_state: "California",
+        population: 39500000,
+        db_epoch_created: 1734451200,
+        db_epoch_updated: 1734451200,
+      },
+      {
+        id: "szjefrcsfaovgqgbvomk",
+        us_state: "Texas",
+        population: 29000000,
+        db_epoch_created: 1734451200,
+        db_epoch_updated: 1734451200,
+      },
+      {
+        id: "idyqhgokgtootefrpjlk",
+        us_state: "Florida",
+        population: 21500000,
+        db_epoch_created: 1734451200,
+        db_epoch_updated: 1734451200,
+      },
+      {
+        id: "fsbdlpaujxcbenalzxrd",
+        us_state: "New York",
+        population: 19400000,
+        db_epoch_created: 1734451200,
+        db_epoch_updated: 1734451200,
+      },
+      {
+        id: "lgljuheyjeuhuxffxqrw",
+        us_state: "Illinois",
+        population: 12600000,
+        db_epoch_created: 1734451200,
+        db_epoch_updated: 1734451200,
+      },
+      {
+        id: "ydhrlhktgyvjyuenxsfl",
+        us_state: "Pennsylvania",
+        population: 12800000,
+        db_epoch_created: 1734451200,
+        db_epoch_updated: 1734451200,
+      },
+      {
+        id: "jqruaftavlvjkbzmcifm",
+        us_state: "Georgia",
+        population: 10700000,
+        db_epoch_created: 1734451200,
+        db_epoch_updated: 1734451200,
+      },
     ],
   })
 
@@ -613,6 +446,6 @@
 </script>
 
 <div>
-  <pre>{JSON.stringify(variables, null, 2)}</pre>
+  <!-- <pre>{JSON.stringify(variables, null, 2)}</pre> -->
   <TableAdvanced manager={table_manager} />
 </div>