sveltekit-ui 1.0.51 → 1.0.52

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

@@ -885,7 +885,7 @@ export function create_content_manager(config) {
   }
   function set_focused_selector_id(input) {
     if (typeof config?.set_focused_selector_id == "function") {
-      config?.set_focused_selector_id(input)
+      config?.set_focused_selector_id(input, !!input)
     }
   }
 

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

@@ -27,6 +27,14 @@
 
 <Popover manager={manager?.popover_manager}>
   {#snippet content()}
+    <div
+      onpointerenter={() => manager?.set_focused_selector_id(manager?.selector_id, true)}
+      onpointercancel={() => manager?.set_focused_selector_id(null)}
+      onpointerleave={() => manager?.set_focused_selector_id(null)}
+    >
+      <p class="label">Element ID</p>
+      <p>{manager?.selector_id}</p>
+    </div>
     {#if manager?.content_type == "number"}
       <NumberConfig manager={manager?.attributes_manager} />
     {:else if manager?.content_type == "dropdown"}

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

@@ -48,6 +48,12 @@ export function create_attributes_input_manager(config) {
     { key: "space-evenly", name: "Space Evenly" },
   ]
 
+  function set_focused_selector_id(input) {
+    if (typeof config?.set_focused_selector_id == "function") {
+      config?.set_focused_selector_id(input)
+    }
+  }
+
   function init(config) {
     val_original = set_closurable(config?.val, null)
     content_type = config?.content_type
@@ -1423,5 +1429,6 @@ export function create_attributes_input_manager(config) {
       return finish_button_manager
     },
     init,
+    set_focused_selector_id,
   }
 }

package/dist/Components/ContentInput/ContentPanelBuilder/ElementList/index.svelte

@@ -28,7 +28,7 @@
     onpointercancel={() => manager?.set_focused_selector_id(null)}
     onpointerleave={() => manager?.set_focused_selector_id(null)}
   >
-    <div class="el_row">
+    <div class="el_row" id={`selector_id_${element_manager?.element?.selector_id}`}>
       {#if element_manager?.element}
         {#if manager?.dragged_over_element_child?.selector_id == element_manager?.element?.selector_id && element_manager?.element?.selector_id != manager?.dragging_selector_id && !manager?.dragged_over_element_child?.is_children}
           <div class="drop_area" style="left: 0; top: 0;">Move Before Element</div>

package/dist/Components/ContentInput/index.svelte

@@ -10,13 +10,29 @@
   let { manager, panel_header } = $props()
 </script>
 
-<div class="container">
+<!-- <div class="container">
   <div class="panel_builder">
     {#if panel_header}
       {@render panel_header()}
     {/if}
     <ContentPanelBuilder {manager} />
   </div>
+  <div class="rich_editor">
+    <Content manager={manager?.content_manager} overall_manager={manager?.content_overall_manager} />
+  </div>
+</div> -->
+<div class="container">
+  <div class="panel_builder">
+    {#if panel_header}
+      <div class="panel_header">
+        {@render panel_header()}
+      </div>
+    {/if}
+    <div class="panel_scroll" id={`panel_scroll_${manager?.id}`}>
+      <ContentPanelBuilder {manager} />
+    </div>
+  </div>
+
   <div class="rich_editor">
     <Content manager={manager?.content_manager} overall_manager={manager?.content_overall_manager} />
   </div>
@@ -42,14 +58,44 @@
 </Popover>
 
 <style>
+  /* .container {
+    display: flex;
+  }
+  .panel_builder {
+    width: 35rem;
+  }
+  .rich_editor {
+    flex: 1;
+    padding: 0 0.5rem;
+  } */
   .container {
     display: flex;
+    height: 100dvh;
+    min-height: 0;
   }
   .panel_builder {
     width: 35rem;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    border-right: 1px solid var(--shadow7-t);
+  }
+  .panel_header {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    background: var(--bg1, #fff);
+  }
+  .panel_scroll {
+    overflow: auto;
+    min-height: 0;
+    -webkit-overflow-scrolling: touch;
   }
   .rich_editor {
     flex: 1;
     padding: 0 0.5rem;
+    overflow: auto;
+    min-height: 0;
+    -webkit-overflow-scrolling: touch;
   }
 </style>

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

@@ -550,8 +550,37 @@ export function create_content_input_manager(config) {
     paste_astc_markdown_popover_manager.close()
   }
 
-  function set_focused_selector_id(selector_id) {
+  function scroll_to_selector_id(selector_id) {
+    const container = document.getElementById(`panel_scroll_${id}`)
+    if (!container || !selector_id) return
+    const el = container.querySelector(`#selector_id_${selector_id}`)
+    if (!el) return
+    const el_rect = el.getBoundingClientRect()
+    const c_rect = container.getBoundingClientRect()
+    const is_visible = el_rect.top >= c_rect.top && el_rect.bottom <= c_rect.bottom
+    if (!is_visible) {
+      el.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+        inline: "nearest",
+      })
+    }
+  }
+
+  function pulse_focus(selector_id) {
+    const container = document.getElementById(`panel_scroll_${id}`)
+    const el = container?.querySelector(`#selector_id_${selector_id}`)
+    if (!el) return
+    el.classList.add("focus_pulse")
+    setTimeout(() => el.classList.remove("focus_pulse"), 1000)
+  }
+
+  function set_focused_selector_id(selector_id, is_scroll_to = false) {
     focused_selector_id = selector_id
+    if (selector_id && is_scroll_to) {
+      scroll_to_selector_id(selector_id)
+      pulse_focus(selector_id)
+    }
   }
 
   function add_sibling_el(selector_id, el_type_id, element_to_add = null) {
@@ -1053,6 +1082,7 @@ export function create_content_input_manager(config) {
       storage_default_folder_path: storage_default_folder_path,
       storage_path: storage_path,
       get_defined_options: get_defined_options,
+      set_focused_selector_id: set_focused_selector_id,
     })
     set_selected_version(0)
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sveltekit-ui",
-  "version": "1.0.51",
+  "version": "1.0.52",
   "description": "A SvelteKit UI component library for building modern web applications",
   "license": "MIT",
   "type": "module",
@@ -31,7 +31,7 @@
     "@sveltejs/vite-plugin-svelte": "^6.1.4",
     "@vercel/analytics": "^1.5.0",
     "typescript": "^5.9.2",
-    "vite": "^7.1.4"
+    "vite": "^7.1.5"
   },
   "homepage": "https://www.sveltekit-ui.com",
   "keywords": [

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

@@ -885,7 +885,7 @@ export function create_content_manager(config) {
   }
   function set_focused_selector_id(input) {
     if (typeof config?.set_focused_selector_id == "function") {
-      config?.set_focused_selector_id(input)
+      config?.set_focused_selector_id(input, !!input)
     }
   }
 

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

@@ -27,6 +27,14 @@
 
 <Popover manager={manager?.popover_manager}>
   {#snippet content()}
+    <div
+      onpointerenter={() => manager?.set_focused_selector_id(manager?.selector_id, true)}
+      onpointercancel={() => manager?.set_focused_selector_id(null)}
+      onpointerleave={() => manager?.set_focused_selector_id(null)}
+    >
+      <p class="label">Element ID</p>
+      <p>{manager?.selector_id}</p>
+    </div>
     {#if manager?.content_type == "number"}
       <NumberConfig manager={manager?.attributes_manager} />
     {:else if manager?.content_type == "dropdown"}

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

@@ -48,6 +48,12 @@ export function create_attributes_input_manager(config) {
     { key: "space-evenly", name: "Space Evenly" },
   ]
 
+  function set_focused_selector_id(input) {
+    if (typeof config?.set_focused_selector_id == "function") {
+      config?.set_focused_selector_id(input)
+    }
+  }
+
   function init(config) {
     val_original = set_closurable(config?.val, null)
     content_type = config?.content_type
@@ -1423,5 +1429,6 @@ export function create_attributes_input_manager(config) {
       return finish_button_manager
     },
     init,
+    set_focused_selector_id,
   }
 }

package/src/lib/Components/ContentInput/ContentPanelBuilder/ElementList/index.svelte

@@ -28,7 +28,7 @@
     onpointercancel={() => manager?.set_focused_selector_id(null)}
     onpointerleave={() => manager?.set_focused_selector_id(null)}
   >
-    <div class="el_row">
+    <div class="el_row" id={`selector_id_${element_manager?.element?.selector_id}`}>
       {#if element_manager?.element}
         {#if manager?.dragged_over_element_child?.selector_id == element_manager?.element?.selector_id && element_manager?.element?.selector_id != manager?.dragging_selector_id && !manager?.dragged_over_element_child?.is_children}
           <div class="drop_area" style="left: 0; top: 0;">Move Before Element</div>

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

@@ -10,13 +10,29 @@
   let { manager, panel_header } = $props()
 </script>
 
-<div class="container">
+<!-- <div class="container">
   <div class="panel_builder">
     {#if panel_header}
       {@render panel_header()}
     {/if}
     <ContentPanelBuilder {manager} />
   </div>
+  <div class="rich_editor">
+    <Content manager={manager?.content_manager} overall_manager={manager?.content_overall_manager} />
+  </div>
+</div> -->
+<div class="container">
+  <div class="panel_builder">
+    {#if panel_header}
+      <div class="panel_header">
+        {@render panel_header()}
+      </div>
+    {/if}
+    <div class="panel_scroll" id={`panel_scroll_${manager?.id}`}>
+      <ContentPanelBuilder {manager} />
+    </div>
+  </div>
+
   <div class="rich_editor">
     <Content manager={manager?.content_manager} overall_manager={manager?.content_overall_manager} />
   </div>
@@ -42,14 +58,44 @@
 </Popover>
 
 <style>
+  /* .container {
+    display: flex;
+  }
+  .panel_builder {
+    width: 35rem;
+  }
+  .rich_editor {
+    flex: 1;
+    padding: 0 0.5rem;
+  } */
   .container {
     display: flex;
+    height: 100dvh;
+    min-height: 0;
   }
   .panel_builder {
     width: 35rem;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    border-right: 1px solid var(--shadow7-t);
+  }
+  .panel_header {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    background: var(--bg1, #fff);
+  }
+  .panel_scroll {
+    overflow: auto;
+    min-height: 0;
+    -webkit-overflow-scrolling: touch;
   }
   .rich_editor {
     flex: 1;
     padding: 0 0.5rem;
+    overflow: auto;
+    min-height: 0;
+    -webkit-overflow-scrolling: touch;
   }
 </style>

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

@@ -550,8 +550,37 @@ export function create_content_input_manager(config) {
     paste_astc_markdown_popover_manager.close()
   }
 
-  function set_focused_selector_id(selector_id) {
+  function scroll_to_selector_id(selector_id) {
+    const container = document.getElementById(`panel_scroll_${id}`)
+    if (!container || !selector_id) return
+    const el = container.querySelector(`#selector_id_${selector_id}`)
+    if (!el) return
+    const el_rect = el.getBoundingClientRect()
+    const c_rect = container.getBoundingClientRect()
+    const is_visible = el_rect.top >= c_rect.top && el_rect.bottom <= c_rect.bottom
+    if (!is_visible) {
+      el.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+        inline: "nearest",
+      })
+    }
+  }
+
+  function pulse_focus(selector_id) {
+    const container = document.getElementById(`panel_scroll_${id}`)
+    const el = container?.querySelector(`#selector_id_${selector_id}`)
+    if (!el) return
+    el.classList.add("focus_pulse")
+    setTimeout(() => el.classList.remove("focus_pulse"), 1000)
+  }
+
+  function set_focused_selector_id(selector_id, is_scroll_to = false) {
     focused_selector_id = selector_id
+    if (selector_id && is_scroll_to) {
+      scroll_to_selector_id(selector_id)
+      pulse_focus(selector_id)
+    }
   }
 
   function add_sibling_el(selector_id, el_type_id, element_to_add = null) {
@@ -1053,6 +1082,7 @@ export function create_content_input_manager(config) {
       storage_default_folder_path: storage_default_folder_path,
       storage_path: storage_path,
       get_defined_options: get_defined_options,
+      set_focused_selector_id: set_focused_selector_id,
     })
     set_selected_version(0)
   }