sveltekit-ui 1.0.51 → 1.0.53

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/CustomConfig/Qr/index.svelte.js

@@ -4,7 +4,6 @@ import { create_checkbox_manager } from "../../../../Checkbox/index.svelte.js"
 import { create_text_input_manager } from "../../../../TextInput/index.svelte.js"
 import { create_dropdown_manager } from "../../../../Dropdown/index.svelte.js"
 import { create_defined_type_input_manager } from "../../DefinedTypeInput/index.svelte.js"
-import { deep_copy, set_closurable } from "../../../../../client/index.js"
 
 export function create_qr_config_manager(config) {
   let margin_slider_manager = $state(null)

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

@@ -13,9 +13,13 @@
 <div class="container">
   <div class="panel_builder">
     {#if panel_header}
-      {@render panel_header()}
+      <div class="panel_header">
+        {@render panel_header()}
+      </div>
     {/if}
-    <ContentPanelBuilder {manager} />
+    <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} />
@@ -44,12 +48,32 @@
 <style>
   .container {
     display: flex;
+    max-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/dist/Components/Qr/index.svelte

@@ -19,7 +19,7 @@
   <div style="display: flex; flex: 0;">
     <div
       class="qr_container"
-      style="height: {manager?.size}px; background-color: {manager?.background_color}; border-radius: {manager?.border_radius}rem; border: {manager?.border_width}px solid {manager?.border_color};"
+      style="height: {manager?.size}px; background-color: {manager?.background_color}; border-radius: {manager?.border_radius}rem; box-shadow: 0 0 0 {manager?.border_width}px {manager?.border_color};"
     >
       <div style="grid-area: stack;" id={`qr_${manager?.id}`}></div>
       {#if !manager?.is_loaded}
@@ -31,7 +31,10 @@
   </div>
   {#if manager?.is_show_copy}
     <div style="display: flex; flex-wrap: wrap; gap: .5rem; max-width: 30rem;">
-      <TextInput manager={manager?.text_manager} />
+      <span
+        style="margin: 0; padding: 0 1rem; display: grid; place-content: center; border-radius: 1rem; border: 1px solid var(--shadow4-t);"
+        >{manager?.data}</span
+      >
       <Button manager={manager?.copy_button_manager} />
     </div>
   {/if}

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

@@ -1,5 +1,4 @@
 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 { copy_to_clipboard, create_unique_id, deep_copy, set_closurable, color_to_css } from "../../client/index.js"
 import QRCodeStyling from "qr-code-styling"
@@ -22,10 +21,6 @@ export function create_qr_manager(config) {
   let extension = $state(null)
   let quality = $state(null)
 
-  let is_show_copy = $derived(set_closurable(config?.is_show_copy, false))
-  let is_show_download = $derived(set_closurable(config?.is_show_download, false))
-
-  let text_manager = $state(null)
   let copy_button_manager = $state(null)
   let download_button_manager = $state(null)
   let extention_dropdown_input_manager = $state(null)
@@ -33,6 +28,9 @@ export function create_qr_manager(config) {
   let is_loaded = $state(false)
   let error_message = $state(null)
 
+  let is_show_copy = $derived(set_closurable(config?.is_show_copy, false))
+  let is_show_download = $derived(set_closurable(config?.is_show_download, false))
+
   function get_options() {
     // convert "var(--primary-t)" to css the works for qr_ download like oklch(0.67 0.26 203)
     const color_css = get_css_variable_value(color)
@@ -136,7 +134,31 @@ export function create_qr_manager(config) {
     }
   }
 
-  function update() {
+  function set_options(input) {
+    margin = input?.margin ?? 10
+    size = input?.size ?? 200
+    image_size = input?.image_size ?? 0.5
+    type_number = input?.type_number ?? 0
+    error_correction_level = input?.error_correction_level ?? "Q"
+    color = color_to_css(input?.color ?? "var(--primary-t)")
+    corner_color = color_to_css(input?.corner_color ?? "color-mix(in oklab, var(--primary-t), var(--bg) 20%)")
+    background_color = color_to_css(input?.background_color ?? "var(--shadow1-t)")
+    border_color = color_to_css(input?.border_color ?? "var(--shadow7-t)")
+    border_radius = input?.border_radius ?? (size + 2 * margin) / 100
+    border_width = input?.border_width ?? 1
+    data = input?.data ?? null
+    image =
+      input?.image && input?.image.startsWith("<svg")
+        ? `data:image/svg+xml;utf8,${encodeURIComponent(input?.image)}`
+        : input?.image ?? null
+    extension = input?.extension ?? "svg"
+    quality = input?.quality ?? 0.8
+  }
+
+  function update(input = null) {
+    if (input) {
+      set_options(input)
+    }
     try {
       error_message = null
       const options = get_options()
@@ -161,27 +183,8 @@ export function create_qr_manager(config) {
   //   console.log("data_url", data_url)
   // }
 
-  function init(config) {
-    config = deep_copy(config)
-    margin = config?.margin ?? 10
-    size = config?.size ?? 200
-    image_size = config?.image_size ?? 0.5
-    type_number = config?.type_number ?? 0
-    error_correction_level = config?.error_correction_level ?? "Q"
-    color = color_to_css(config?.color ?? "var(--primary-t)")
-    corner_color = color_to_css(config?.corner_color ?? "color-mix(in oklab, var(--primary-t), var(--bg) 20%)")
-    background_color = color_to_css(config?.background_color ?? "var(--shadow1-t)")
-    border_color = color_to_css(config?.border_color ?? "var(--shadow7-t)")
-    border_radius = config?.border_radius ?? (size + 2 * margin) / 100
-    border_width = config?.border_width ?? 1
-    data = config?.data ?? null
-    image = config?.image ?? null
-    extension = config?.extension ?? "svg"
-    quality = config?.quality ?? 0.8
-    text_manager = create_text_input_manager({
-      val: data,
-      on_change: (input) => (data = input),
-    })
+  function init(input) {
+    set_options(input)
     copy_button_manager = create_button_manager({
       type: "outlined",
       is_uniform: true,
@@ -269,9 +272,6 @@ export function create_qr_manager(config) {
     get is_show_download() {
       return is_show_download
     },
-    get text_manager() {
-      return text_manager
-    },
     get copy_button_manager() {
       return copy_button_manager
     },

package/dist/Components/QrInput/index.svelte

@@ -0,0 +1,45 @@
+<script>
+  import Popover from "../Popover/index.svelte"
+  import Button from "../Button/index.svelte"
+  import Checkbox from "../Checkbox/index.svelte"
+  import Slider from "../Slider/index.svelte"
+  import TextInput from "../TextInput/index.svelte"
+  import ColorInput from "../ColorInput/index.svelte"
+  import Dropdown from "../Dropdown/index.svelte"
+  import Qr from "../Qr/index.svelte"
+
+  let { manager } = $props()
+</script>
+
+<div style="display: grid;  grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr)); gap: 1rem;">
+  <div>
+    <Slider manager={manager?.margin_slider_manager} />
+    <Slider manager={manager?.size_slider_manager} />
+    <Slider manager={manager?.image_size_slider_manager} />
+    <h3 class="label" style="margin: 0;">Type Number</h3>
+    <p style="font-size: 1.2rem;">The amount of squares used. 0 is auto.</p>
+    <Slider manager={manager?.type_number_slider_manager} />
+    <Slider manager={manager?.border_radius_slider_manager} />
+    <Slider manager={manager?.border_width_slider_manager} />
+    <h3 class="label" style="margin: 0;">Error Correction Level</h3>
+    <p style="font-size: 1.2rem;">Amount of data repetition in case part of Qr is not visable.</p>
+    <Dropdown manager={manager?.error_correction_level_dropdown_manager} />
+    <h3 class="label" style="margin: 0;">Color</h3>
+    <ColorInput manager={manager?.color_manager} />
+    <h3 class="label" style="margin: 0;">Corner Color</h3>
+    <ColorInput manager={manager?.corner_color_manager} />
+    <h3 class="label" style="margin: 0;">Background Color</h3>
+    <ColorInput manager={manager?.background_color_manager} />
+    <h3 class="label" style="margin: 0;">Border Color</h3>
+    <ColorInput manager={manager?.border_color_manager} />
+    <Checkbox manager={manager?.is_show_copy_checkbox_manager} />
+    <Checkbox manager={manager?.is_show_download_checkbox_manager} />
+    <TextInput manager={manager?.data_text_input_manager} />
+    <TextInput manager={manager?.image_text_input_manager} />
+  </div>
+  <div style="border: 1px solid var(--shadow4-t); border-radius: 1rem; padding: 1rem;">
+    <h2>Result</h2>
+    <Button manager={manager?.set_changes_button_manager} />
+    <Qr manager={manager?.qr_manager} />
+  </div>
+</div>

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

@@ -0,0 +1,212 @@
+import { create_color_input_manager } from "../ColorInput/index.svelte.js"
+import { create_slider_manager } from "../Slider/index.svelte.js"
+import { create_checkbox_manager } from "../Checkbox/index.svelte.js"
+import { create_text_input_manager } from "../TextInput/index.svelte.js"
+import { create_dropdown_manager } from "../Dropdown/index.svelte.js"
+import { create_button_manager } from "../Button/index.svelte.js"
+import { create_qr_manager } from "../Qr/index.svelte.js"
+
+export function create_qr_input_manager(config) {
+  let margin_slider_manager = $state(null)
+  let size_slider_manager = $state(null)
+  let image_size_slider_manager = $state(null)
+  let type_number_slider_manager = $state(null)
+  let border_radius_slider_manager = $state(null)
+  let border_width_slider_manager = $state(null)
+  let error_correction_level_dropdown_manager = $state(null)
+  let color_manager = $state(null)
+  let corner_color_manager = $state(null)
+  let background_color_manager = $state(null)
+  let border_color_manager = $state(null)
+  let data_text_input_manager = $state(null)
+  let image_text_input_manager = $state(null)
+  let is_show_copy_checkbox_manager = $state(null)
+  let is_show_download_checkbox_manager = $state(null)
+  let set_changes_button_manager = $state(null)
+  let qr_manager = $state(null)
+
+  let val = $derived({
+    margin: margin_slider_manager?.val,
+    size: size_slider_manager?.val,
+    image_size: image_size_slider_manager?.val,
+    type_number: type_number_slider_manager?.val,
+    border_radius: border_radius_slider_manager?.val,
+    border_width: border_width_slider_manager?.val,
+    error_correction_level: error_correction_level_dropdown_manager?.val,
+    color: color_manager?.val,
+    corner_color: corner_color_manager?.val,
+    background_color: background_color_manager?.val,
+    border_color: border_color_manager?.val,
+    is_show_copy: is_show_copy_checkbox_manager?.val,
+    is_show_download: is_show_download_checkbox_manager?.val,
+    data: data_text_input_manager?.val,
+    image: image_text_input_manager?.val,
+  })
+
+  function set_changes() {
+    qr_manager.update(val)
+  }
+
+  function init(config) {
+    margin_slider_manager = create_slider_manager({
+      label: "Margin",
+      min: 0,
+      max: 20,
+      step: 1,
+      val: config?.val?.margin ?? 10,
+    })
+    size_slider_manager = create_slider_manager({
+      label: "Size",
+      min: 50,
+      max: 1000,
+      step: 1,
+      val: config?.val?.size ?? 200,
+    })
+    image_size_slider_manager = create_slider_manager({
+      label: "Image Size",
+      min: 0,
+      max: 1,
+      step: 0.05,
+      val: config?.val?.image_size ?? 0.5,
+    })
+    type_number_slider_manager = create_slider_manager({
+      min: 0,
+      max: 40,
+      step: 1,
+      val: config?.val?.type_number ?? 0,
+    })
+    border_radius_slider_manager = create_slider_manager({
+      label: "Border Radius",
+      min: 0,
+      max: 5,
+      step: 0.5,
+      val: config?.val?.border_radius ?? 2,
+    })
+    border_width_slider_manager = create_slider_manager({
+      label: "Border Width",
+      min: 0,
+      max: 5,
+      step: 1,
+      val: config?.val?.border_width ?? 1,
+    })
+    error_correction_level_dropdown_manager = create_dropdown_manager({
+      is_button_compressed: true,
+      options: [
+        { key: "L", name: "L" },
+        { key: "M", name: "M" },
+        { key: "Q", name: "Q" },
+        { key: "H", name: "H" },
+      ],
+      val: config?.val?.error_correction_level ?? "Q",
+    })
+    color_manager = create_color_input_manager({
+      is_show_opacity: false,
+      l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
+      val: config?.val?.color ?? null,
+    })
+    corner_color_manager = create_color_input_manager({
+      is_show_opacity: false,
+      l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
+      val: config?.val?.corner_color ?? null,
+    })
+    background_color_manager = create_color_input_manager({
+      is_show_opacity: false,
+      l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
+      val: config?.val?.background_color ?? null,
+    })
+    border_color_manager = create_color_input_manager({
+      is_show_opacity: false,
+      l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
+      val: config?.val?.border_color ?? null,
+    })
+    is_show_copy_checkbox_manager = create_checkbox_manager({
+      type: "toggle",
+      label: "Is Show Copy",
+      val: config?.val?.is_show_copy ?? true,
+    })
+    is_show_download_checkbox_manager = create_checkbox_manager({
+      type: "toggle",
+      label: "Is Show Download",
+      val: config?.val?.is_show_download ?? true,
+    })
+    data_text_input_manager = create_text_input_manager({
+      label: "Data",
+      val: config?.val?.data ?? "https://www.sveltekit-ui.com",
+    })
+    image_text_input_manager = create_text_input_manager({
+      type: "text",
+      label: "Image Url / SVG",
+      val:
+        config?.val?.image_url ??
+        "https://firmcmccxfdethzdexal.supabase.co/storage/v1/object/public/site/test/icon.png",
+    })
+    qr_manager = create_qr_manager(val)
+    set_changes_button_manager = create_button_manager({
+      c: 1,
+      l: 0,
+      mb: 2,
+      text: "Set Changes",
+      is_compressed: true,
+      on_click: () => set_changes(),
+    })
+  }
+
+  init(config)
+
+  return {
+    get val() {
+      return val
+    },
+    get margin_slider_manager() {
+      return margin_slider_manager
+    },
+    get size_slider_manager() {
+      return size_slider_manager
+    },
+    get image_size_slider_manager() {
+      return image_size_slider_manager
+    },
+    get type_number_slider_manager() {
+      return type_number_slider_manager
+    },
+    get border_radius_slider_manager() {
+      return border_radius_slider_manager
+    },
+    get border_width_slider_manager() {
+      return border_width_slider_manager
+    },
+    get error_correction_level_dropdown_manager() {
+      return error_correction_level_dropdown_manager
+    },
+    get color_manager() {
+      return color_manager
+    },
+    get corner_color_manager() {
+      return corner_color_manager
+    },
+    get background_color_manager() {
+      return background_color_manager
+    },
+    get border_color_manager() {
+      return border_color_manager
+    },
+    get data_text_input_manager() {
+      return data_text_input_manager
+    },
+    get image_text_input_manager() {
+      return image_text_input_manager
+    },
+    get is_show_copy_checkbox_manager() {
+      return is_show_copy_checkbox_manager
+    },
+    get is_show_download_checkbox_manager() {
+      return is_show_download_checkbox_manager
+    },
+    get set_changes_button_manager() {
+      return set_changes_button_manager
+    },
+    get qr_manager() {
+      return qr_manager
+    },
+  }
+}

package/dist/index.js

@@ -20,6 +20,8 @@ export { default as Tag } from "./Components/Tag/index.svelte"
 export { create_tag_manager } from "./Components/Tag/index.svelte.js"
 export { default as Qr } from "./Components/Qr/index.svelte"
 export { create_qr_manager } from "./Components/Qr/index.svelte.js"
+export { default as QrInput } from "./Components/QrInput/index.svelte"
+export { create_qr_input_manager } from "./Components/QrInput/index.svelte.js"
 export { default as Json } from "./Components/Json/index.svelte"
 export { create_json_manager } from "./Components/Json/index.svelte.js"
 export { default as Image } from "./Components/Image/index.svelte"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sveltekit-ui",
-  "version": "1.0.51",
+  "version": "1.0.53",
   "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.38.7"
+    "svelte": "^5.38.8"
   },
   "peerDependencies": {
     "@sveltejs/kit": "^2.22.2"
   },
   "devDependencies": {
     "@sveltejs/adapter-vercel": "^5.10.2",
-    "@sveltejs/kit": "^2.37.1",
+    "@sveltejs/kit": "^2.38.0",
     "@sveltejs/package": "^2.5.0",
-    "@sveltejs/vite-plugin-svelte": "^6.1.4",
+    "@sveltejs/vite-plugin-svelte": "^6.2.0",
     "@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/CustomConfig/Qr/index.svelte.js

@@ -4,7 +4,6 @@ import { create_checkbox_manager } from "$lib/Components/Checkbox/index.svelte.j
 import { create_text_input_manager } from "$lib/Components/TextInput/index.svelte.js"
 import { create_dropdown_manager } from "$lib/Components/Dropdown/index.svelte.js"
 import { create_defined_type_input_manager } from "$lib/Components/ContentInput/AttributesInput/DefinedTypeInput/index.svelte.js"
-import { deep_copy, set_closurable } from "$lib/client/index.js"
 
 export function create_qr_config_manager(config) {
   let margin_slider_manager = $state(null)

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>