sveltekit-ui 1.0.6 → 1.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sveltekit-ui",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "A SvelteKit UI component library for building modern web applications",
   "license": "MIT",
   "type": "module",
@@ -19,19 +19,19 @@
   "dependencies": {
     "context-filter-polyfill": "^0.3.23",
     "qr-code-styling": "^1.9.2",
-    "svelte": "^5.35.3"
+    "svelte": "^5.35.5"
   },
   "peerDependencies": {
     "@sveltejs/kit": "^2.22.2"
   },
   "devDependencies": {
     "@sveltejs/adapter-vercel": "^5.7.2",
-    "@sveltejs/kit": "^2.22.2",
+    "@sveltejs/kit": "^2.22.5",
     "@sveltejs/package": "^2.3.12",
-    "@sveltejs/vite-plugin-svelte": "^5.1.0",
+    "@sveltejs/vite-plugin-svelte": "^6.0.0",
     "@vercel/analytics": "^1.5.0",
     "typescript": "^5.8.3",
-    "vite": "^7.0.2"
+    "vite": "^7.0.4"
   },
   "homepage": "https://www.sveltekit-ui.com",
   "keywords": [

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

@@ -134,6 +134,7 @@ export function create_content_input_manager(config) {
         selector_id: element?.selector_id,
         val: element?.attributes,
         on_finish: (input) => {
+          console.log("on_finish_attribute", input)
           attributes_input.popover_manager.close()
           set_element_attributes(element?.selector_id, input)
         },

package/src/lib/Components/FunctionInput/Node/helpers/Field/index.svelte.js

@@ -160,7 +160,6 @@ export function create_field_manager(config) {
   )
 
   function init(config) {
-    console.log("jj", config?.bar_item, typeof config?.bar_item)
     bar_item = config?.bar_item ? deep_copy(config?.bar_item) : null
     manager = get_manager()
   }

package/src/lib/Components/FunctionInput/Node/index.svelte.js

@@ -7,31 +7,56 @@ import { create_field_manager } from "$lib/Components/FunctionInput/Node/helpers
 export function create_node_manager(config) {
   console.log("create_node_man", config)
   let node_structure = $state(null)
+  let is_clickable_only = $state(false)
+  let node_path = $state(null)
+  let node_types = $state(null)
+  let node_type = $state(null)
+  let node_value = $state(null)
+  let node_categories = $state(null)
 
   let preview_text = $derived(
-    `${config?.node_type}(${config?.node_types?.[config?.node_type]?.input?.type})→(${
-      config?.node_types?.[config?.node_type]?.output?.type ?? "void"
-    })`
+    `${node_type}(${node_types?.[node_type]?.input?.type})→(${node_types?.[node_type]?.output?.type ?? "void"})`
   )
 
-  let full_node_type = $derived(config?.node_types?.[config?.node_type])
-  let h = $derived(config?.node_categories?.[config?.node_types?.[config?.node_type]?.category]?.h || 4)
+  let full_node_type = $derived(node_types?.[node_type])
+  let h = $derived(node_categories?.[node_types?.[node_type]?.category]?.h || 4)
 
-  function get_node_structure() {
-    console.log("get_node_structure", deep_copy({ config, full_node_type }))
+  function handle_drag_start(e) {
+    if (is_clickable_only || node_path == "main") {
+      e.preventDefault()
+    } else if (typeof config?.handle_node_drag_start == "function") {
+      config?.handle_node_drag_start()
+    }
+  }
+
+  function handle_drag_end(e) {
+    if (is_clickable_only) {
+      e.preventDefault()
+    } else if (typeof config?.handle_node_drag_start == "function") {
+      config?.handle_node_drag_end()
+    }
+  }
+
+  function init(config) {
+    node_categories = config?.node_categories
+    node_path = config?.node_path
+    node_types = config?.node_types
+    node_type = config?.node_type
+    node_value = config?.node_value
+    is_clickable_only = !!config?.is_clickable_only
     let node_structure_loc = []
     if (Array.isArray(full_node_type?.node_structure)) {
       for (let i = 0; i < full_node_type?.node_structure.length; i++) {
         let node_item = deep_copy(full_node_type.node_structure?.[i])
         if (node_item?.ui_type == "stack") {
           node_item.stack_area_manager = create_stack_area_manager({
-            parent_node_type: config?.node_type,
-            node_path: [...(Array.isArray(config?.node_path) ? config?.node_path : []), node_item?.field].filter(
+            parent_node_type: node_type,
+            node_path: [...(Array.isArray(node_path) ? node_path : []), node_item?.field].filter(
               (item) => item !== null && item !== undefined
             ),
-            node_type: config?.node_value?.[node_item?.field]?.type,
-            node_value: config?.node_value?.[node_item?.field]?.value,
-            node_types: config?.node_types,
+            node_type: node_value?.[node_item?.field]?.type,
+            node_value: node_value?.[node_item?.field]?.value,
+            node_types: node_types,
             is_preview: false,
             drag_or_select_node: config?.drag_or_select_node,
             handle_node_drag_start: config?.handle_node_drag_start,
@@ -43,9 +68,9 @@ export function create_node_manager(config) {
               if (node_item[j]?.ui_type == "input") {
                 node_item[j].field_manager = create_field_manager({
                   bar_item: node_item[j],
-                  node_path: config?.node_path,
-                  node_type: config?.node_type,
-                  node_value: config?.node_value,
+                  node_path: node_path,
+                  node_type: node_type,
+                  node_value: node_value,
                   is_preview: !!config?.is_preview,
                   on_set_node_value: (input) => config?.on_set_node_value(input),
                   get_selected_version_node_at_path: (input) => config?.get_selected_version_node_at_path(input),
@@ -53,13 +78,12 @@ export function create_node_manager(config) {
               } else {
                 node_item[j].field_manager = create_field_manager({
                   bar_item: node_item?.[j],
-                  parent_node_type: config?.node_type,
-                  node_path: [
-                    ...(Array.isArray(config?.node_path) ? config?.node_path : []),
-                    node_item[j]?.field,
-                  ].filter((item) => item !== null && item !== undefined),
-                  node_type: config?.node_value?.[node_item[j]?.field]?.type,
-                  node_value: config?.node_value?.[node_item[j]?.field]?.value,
+                  parent_node_type: node_type,
+                  node_path: [...(Array.isArray(node_path) ? node_path : []), node_item[j]?.field].filter(
+                    (item) => item !== null && item !== undefined
+                  ),
+                  node_type: node_value?.[node_item[j]?.field]?.type,
+                  node_value: node_value?.[node_item[j]?.field]?.value,
                   is_preview: !!config?.is_preview,
                   on_set_node_value: (input) => config?.on_set_node_value(input),
                   get_selected_version_node_at_path: (input) => config?.get_selected_version_node_at_path(input),
@@ -71,37 +95,17 @@ export function create_node_manager(config) {
         node_structure_loc.push(node_item)
       }
     }
-    return node_structure_loc
-  }
-
-  function handle_drag_start(e) {
-    if (config?.is_clickable_only || config?.node_path == "main") {
-      e.preventDefault()
-    } else if (config?.handle_node_drag_start) {
-      config?.handle_node_drag_start()
-    }
-  }
-
-  function handle_drag_end(e) {
-    if (config?.is_clickable_only) {
-      e.preventDefault()
-    } else if (config?.handle_node_drag_start) {
-      config?.handle_node_drag_end()
-    }
-  }
-
-  function init(config) {
-    node_structure = get_node_structure()
+    node_structure = node_structure_loc
   }
 
   init(config)
 
   return {
     get node_path() {
-      return config?.node_path
+      return node_path
     },
     get node_type() {
-      return config?.node_type
+      return node_type
     },
     get is_preview() {
       return !!config?.is_preview

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

@@ -101,11 +101,11 @@
           {/if}
         </div>
         <div class="node_types_container">
-          {#if Array.isArray(manager?.node_toolbox_items)}
-            {#each manager?.node_toolbox_items as node_toolbox_item}
+          {#if Array.isArray(manager?.node_toolbox_items_prepped)}
+            {#each manager?.node_toolbox_items_prepped as node_toolbox_item_prepped}
               <!-- aaa|{node_toolbox_item} -->
               <!-- <pre>{JSON.stringify(node_toolbox_item, null, 2)}</pre> -->
-              <Node manager={node_toolbox_item} />
+              <Node manager={node_toolbox_item_prepped?.node_manager} />
             {/each}
           {/if}
         </div>

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

@@ -1,4 +1,4 @@
-import { create_unique_id, deep_copy, node_types, node_categories } from "$lib/client/index.js"
+import { create_unique_id, deep_copy, node_types, function_types, node_categories } from "$lib/client/index.js"
 import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
 import { create_icon_manager } from "$lib/Components/Icon/index.svelte.js"
 import { create_node_manager } from "$lib/Components/FunctionInput/Node/index.svelte.js"
@@ -20,46 +20,49 @@ export function create_function_manager(config) {
   let selected_category = $state("main")
   let undo_version_button_manager = $state(null)
   let redo_version_button_manager = $state(null)
-  let node_toolbox_items = $state(null)
   let node_category_buttons = $state(null)
   let dragging_node = $state(null)
   let root_node_manager = $state(null)
   let trashcan_icon_manager = $state(null)
 
+  let node_toolbox_items_prepped = $state(null)
+
   let selected_version = $derived(versions?.[selected_version_index])
 
-  function get_node_toolbox_items() {
+  function set_node_toolbox_items_prepped() {
     let node_toolbox_items_loc = []
-    if (Object.keys(node_types || {}).length > 0) {
-      for (let node_type of Object.keys(node_types || {})) {
-        if (node_types?.[node_type]?.category == selected_category) {
-          node_toolbox_items_loc.push(
-            create_node_manager({
-              is_clickable_only: false,
-              is_preview: true,
-              node_type: node_type,
-              node_types,
-              node_path,
-              node_categories,
-              c: 12,
-              drag_or_select_node: drag_or_select_node,
-              handle_node_drag_start: () =>
-                handle_node_drag_start({
-                  node_path: node_path,
-                  node_type: node_type,
-                }),
-              handle_node_drag_end: () =>
-                handle_node_drag_end({
-                  node_path: node_path,
-                  node_type: node_type,
-                }),
-              on_set_node_value: (input) => set_node_value(input),
-            })
-          )
-        }
+    if (Object.keys(function_types || {}).length > 0) {
+      console.log("function_types", function_types)
+      for (let node_type of Object.keys(function_types || {})) {
+        console.log("node_typeddd", node_type, function_types?.[node_type])
+        node_toolbox_items_loc.push({
+          category: function_types?.[node_type]?.category,
+          node_manager: create_node_manager({
+            is_clickable_only: false,
+            is_preview: true,
+            node_type: node_type,
+            node_types: function_types,
+            node_path,
+            node_categories,
+            c: 12,
+            drag_or_select_node: drag_or_select_node,
+            handle_node_drag_start: () =>
+              handle_node_drag_start({
+                node_path: node_path,
+                node_type: node_type,
+              }),
+            handle_node_drag_end: () =>
+              handle_node_drag_end({
+                node_path: node_path,
+                node_type: node_type,
+              }),
+            on_set_node_value: (input) => set_node_value(input),
+          }),
+        })
       }
     }
-    return node_toolbox_items_loc
+    console.log("node_toolbox_items_loc", node_toolbox_items_loc)
+    node_toolbox_items_prepped = node_toolbox_items_loc
   }
 
   function get_node_category_buttons() {
@@ -83,10 +86,7 @@ export function create_function_manager(config) {
             c: 10,
             l: 16,
             selected_type: () => (is_selected ? "selected" : null),
-            on_click: () => {
-              node_toolbox_items = get_node_toolbox_items() // prob instead do once for all then filter by category
-              selected_category = node_category?.id
-            },
+            on_click: () => (selected_category = node_category?.id),
           }),
         })
       }
@@ -151,7 +151,7 @@ export function create_function_manager(config) {
     if (!node || !Array.isArray(seek_until_node_path) || seek_until_node_path.length == 0) {
       return { defined, is_path_found }
     }
-    let full_node_type = node_types?.[node?.type]
+    let full_node_type = function_types?.[node?.type]
     // should add the other define things like in loop or sort or use node kind to find definitions
     // maybe also if im showing type in ui then assignments should update type but prob too difficult to predit with if else stuff
     if (node?.type == "define") {
@@ -214,21 +214,21 @@ export function create_function_manager(config) {
 
   function get_default_node_value(node_type) {
     let default_node = null
-    if (node_type && Object.keys(node_types?.[node_type]?.fields || {}).length > 0) {
+    if (node_type && Object.keys(function_types?.[node_type]?.fields || {}).length > 0) {
       default_node = {
         type: node_type,
         value: {},
       }
-      for (let [key, value] of Object.entries(node_types?.[node_type]?.fields)) {
+      for (let [key, value] of Object.entries(function_types?.[node_type]?.fields)) {
         default_node.value[key] = null
         if (value?.forced_node) {
           default_node.value[key] = get_default_node_value(value?.forced_node) // careful about triggering infinate recursion here
         }
       }
-    } else if (node_types?.[node_type]?.kind == "literal") {
+    } else if (function_types?.[node_type]?.kind == "literal") {
       default_node = {
         type: node_type,
-        value: node_types?.[node_type]?.value ?? null,
+        value: function_types?.[node_type]?.value ?? null,
       }
     }
     return default_node
@@ -305,7 +305,7 @@ export function create_function_manager(config) {
       node_value: node_value,
       is_clickable_only: false,
       is_preview: true,
-      node_types,
+      node_types: function_types,
       node_categories,
       c: 12,
       handle_node_drag_start: () =>
@@ -349,10 +349,10 @@ export function create_function_manager(config) {
       }
       let drop_area_node_options = []
       if (drop_area_node_type == "stack_literal") {
-        drop_area_node_options = node_types?.stack_literal?.child_node_options
+        drop_area_node_options = function_types?.stack_literal?.child_node_options
       } else {
         drop_area_node_options =
-          node_types?.[drop_area_node_type]?.fields?.[
+          function_types?.[drop_area_node_type]?.fields?.[
             Array.isArray(drop_area_node_path) ? drop_area_node_path[drop_area_node_path.length - 1] : -1
           ]?.node_options
       }
@@ -466,7 +466,7 @@ export function create_function_manager(config) {
       defined[node_path] = { defined_in_node_path: parent_node_path }
       return { logs, output, defined, is_return }
     }
-    let found_node_type = node_types?.[structure?.[node_path]?.node_type]?.input
+    let found_node_type = function_types?.[structure?.[node_path]?.node_type]?.input
     let crunch_literal_res = crunch_literal(
       deep_copy(structure),
       deep_copy(structure?.[node_path]?.input),
@@ -500,7 +500,7 @@ export function create_function_manager(config) {
           ]
           break
         }
-        // let found_node_type = node_types?.[structure?.[input?.defined_function_node_path]?.node_type]?.input
+        // let found_node_type = function_types?.[structure?.[input?.defined_function_node_path]?.node_type]?.input
         // let crunch_literal_res = crunch_literal(
         //   deep_copy(structure),
         //   structure?.[input?.defined_function_node_path]?.input,
@@ -1122,7 +1122,7 @@ export function create_function_manager(config) {
     })
     node_category_buttons = get_node_category_buttons()
     set_root_node_prepped()
-    node_toolbox_items = get_node_toolbox_items()
+    set_node_toolbox_items_prepped()
   }
   init(config)
 
@@ -1149,7 +1149,7 @@ export function create_function_manager(config) {
       return console_result
     },
     get node_types() {
-      return node_types
+      return function_types
     },
     get dragging_node() {
       return dragging_node
@@ -1193,15 +1193,15 @@ export function create_function_manager(config) {
     get node_category_buttons() {
       return node_category_buttons
     },
-    get node_toolbox_items() {
-      return node_toolbox_items
-    },
     get root_node_manager() {
       return root_node_manager
     },
     get trashcan_icon_manager() {
       return trashcan_icon_manager
     },
+    get node_toolbox_items_prepped() {
+      return node_toolbox_items_prepped
+    },
     update_function,
     undo,
     redo,

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

@@ -2,19 +2,10 @@
   import Popover from "$lib/Components/Popover/index.svelte"
   import Button from "$lib/Components/Button/index.svelte"
   import LoadingWheel from "$lib/Components/LoadingWheel/index.svelte"
-  import { onMount } from "svelte"
   import { slide } from "svelte/transition"
+  import intersection_observer from "$lib/actions/intersection_observer.js"
 
   let { manager } = $props()
-
-  onMount(() => {
-    setTimeout(() => {
-      if (typeof manager?.initialize_map == "function" && !manager?.is_popover) {
-        console.log("on_mount_initialize_map")
-        manager.initialize_map()
-      }
-    }, 20)
-  })
 </script>
 
 {#snippet location_content()}
@@ -25,7 +16,10 @@
         <p>Loading Map</p>
       </div>
     </div>
-    <div id="map_{manager?.id}" class="map" style="height: {manager?.height}; max-width: 100%;"></div>
+    <div use:intersection_observer onappeared={() => manager?.initialize_map()}></div>
+    {#key manager?.id}
+      <div id="map_{manager?.id}" class="map" style="height: {manager?.height}; max-width: 100%;"></div>
+    {/key}
   </div>
 {/snippet}
 

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

@@ -61,8 +61,6 @@ export function create_location_manager(config) {
   }
 
   async function initialize_map() {
-    console.log("initialize_map")
-    map = null
     if (!browser) {
       console.log("browser is not defined")
       return
@@ -78,10 +76,9 @@ export function create_location_manager(config) {
       return
     }
     const { center_lat, center_lng, lat_span, lng_span } = get_map_region(val)
-    const initial_region = new mapkit.CoordinateRegion(
-      new mapkit.Coordinate(center_lat, center_lng),
-      new mapkit.CoordinateSpan(lat_span, lng_span)
-    )
+    const center = new mapkit.Coordinate(center_lat, center_lng)
+    const span = new mapkit.CoordinateSpan(lat_span, lng_span)
+    const initial_region = new mapkit.CoordinateRegion(center, span)
     if (!map) {
       map = new mapkit.Map(`map_${id}`)
     }
@@ -177,14 +174,14 @@ export function create_location_manager(config) {
         return
       }
       const route = response.routes[0]
-      if (route.poly_line) {
-        route.poly_line.style = new mapkit.Style({
+      if (route.polyline) {
+        route.polyline.style = new mapkit.Style({
           strokeColor: leg.stroke_color || "#0000ff",
           lineWidth: leg.line_width || 3,
         })
-        map.addOverlay(route.poly_line)
+        map.addOverlay(route.polyline)
       } else {
-        console.warn("no poly_line found for route", route)
+        console.warn("no polyline found for route", route)
       }
     })
   }
@@ -214,8 +211,8 @@ export function create_location_manager(config) {
       strokeColor: leg.stroke_color || "oklch(70% 0.3 210)",
       lineWidth: leg.line_width || 3,
     })
-    const poly_line = new mapkit.Poly_lineOverlay(coords, { style: overlay_style })
-    map.addOverlay(poly_line)
+    const polyline = new mapkit.PolylineOverlay(coords, { style: overlay_style })
+    map.addOverlay(polyline)
   }
 
   function set_val(input) {
@@ -232,7 +229,6 @@ export function create_location_manager(config) {
       target_height: config?.height ?? 440,
       target_width: config?.width ?? 600,
       on_open: () => {
-        console.log("on_open")
         if (!map) {
           setTimeout(() => {
             initialize_map()

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

@@ -5,16 +5,10 @@
   import Checkbox from "$lib/Components/Checkbox/index.svelte"
   import Dropdown from "$lib/Components/Dropdown/index.svelte"
   import LoadingWheel from "$lib/Components/LoadingWheel/index.svelte"
-  import { onMount } from "svelte"
   import { slide } from "svelte/transition"
+  import intersection_observer from "$lib/actions/intersection_observer.js"
 
   let { manager } = $props()
-
-  onMount(() => {
-    if (!manager?.is_popover) {
-      manager?.initialize_map()
-    }
-  })
 </script>
 
 {#snippet location_content()}
@@ -25,7 +19,10 @@
         <p>Loading Map</p>
       </div>
     </div>
-    <div id="map_{manager?.id}" class="map" style="height: {manager?.height}; max-width: 100%;"></div>
+    <div use:intersection_observer onappeared={() => manager?.initialize_map()}></div>
+    {#key manager?.id}
+      <div id="map_{manager?.id}" class="map" style="height: {manager?.height}; max-width: 100%;"></div>
+    {/key}
     {#if manager?.is_show_search}
       <div class="search_container">
         <div class="text_input">
@@ -60,9 +57,9 @@
             {#each manager?.suggestions_prepped as suggestion_prepped}
               <div class="search_item_container">
                 <div class="search_item">
-                  <h3>{suggestion_prepped?.display_lines?.[0]}</h3>
-                  {#if suggestion_prepped?.display_lines?.[1]}
-                    <p>{suggestion_prepped?.display_lines?.[1]}</p>
+                  <h3>{suggestion_prepped?.displayLines?.[0]}</h3>
+                  {#if suggestion_prepped?.displayLines?.[1]}
+                    <p>{suggestion_prepped?.displayLines?.[1]}</p>
                   {/if}
                   <!-- {#if Array.isArray(suggestion_prepped?.poi_category) && suggestion_prepped.poi_category.length > 0}
                       <div style="display: flex; flex-wrap: wrap; gap: .5rem;">

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

@@ -669,7 +669,7 @@ export function create_location_input_manager(config) {
                 choose_selection_button_manager = create_button_manager({
                   support_icon: "magnifying_glass",
                   is_uniform: true,
-                  on_click: () => search_for(`${suggestion?.display_lines?.[0]}`),
+                  on_click: () => search_for(`${suggestion?.displayLines?.[0]}`),
                 })
               }
               suggestions_prepped_loc.push({
@@ -687,6 +687,10 @@ export function create_location_input_manager(config) {
 
   function search_for(input) {
     const search_options = prepare_search_options()
+    if (!map) {
+      console.log("map not found")
+      return
+    }
     map.removeAnnotations(map.annotations)
     const place_search = new mapkit.Search()
     place_search.search(
@@ -747,6 +751,16 @@ export function create_location_input_manager(config) {
     }
   }
 
+  function reset_map() {
+    // const el = document.getElementById(`map_${id}`)
+    // if (el) {
+    //   // optional: remove child nodes or clear old map if you want
+    //   // el.innerHTML = ''
+    //   map = new mapkit.Map(`map_${id}`)
+    // }
+    initialize_map()
+  }
+
   function finish() {
     popover_manager.close()
     if (typeof config?.on_finish == "function") {
@@ -946,5 +960,6 @@ export function create_location_input_manager(config) {
     },
     initialize_map,
     set_val,
+    reset_map,
   }
 }