sveltekit-ui 1.0.28 → 1.0.30

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,

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

@@ -3,17 +3,24 @@
   import Popover from "../../../Popover/index.svelte"
   import TextInput from "../../../TextInput/index.svelte"
   import AddElement from "../AddElement/index.svelte"
-  import Self from './index.svelte'
+  import Self from "./index.svelte"
   import { node_types } from "../../../../client/index.js"
 
   let { manager, element_manager } = $props()
-
 </script>
 
 <div
   class="container"
   class:is_highlight={element_manager?.element?.selector_id &&
     element_manager?.element?.selector_id == manager?.focused_selector_id}
+  class:is_drop_dragover={manager?.dragged_over_element_child?.selector_id == element_manager?.element?.selector_id}
+  role="listitem"
+  draggable="true"
+  aria-grabbed="false"
+  ondragover={(e) => manager?.handle_element_child_drag_over(e, element_manager?.element?.selector_id)}
+  ondrop={(e) => manager?.handle_element_child_drag_drop(e, element_manager?.element?.selector_id)}
+  ondragstart={(e) => manager?.handle_element_child_drag_start(e, element_manager?.element?.selector_id)}
+  ondragend={(e) => manager?.handle_element_child_drag_end(e, element_manager?.element?.selector_id)}
 >
   <div
     class="event_handler"
@@ -23,12 +30,30 @@
   >
     <div class="el_row">
       {#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>
+        {/if}
         <div class="el_name">
-          <h4 class="el_title">{element_manager?.element?.type_id}</h4>
+          <h4 class="el_title">
+            {element_manager?.element?.type_id}
+          </h4>
           <p class="el_id">{element_manager?.element?.selector_id}</p>
           {#if Object.keys(node_types?.[element_manager?.element?.type_id]?.attributes || {})?.length > 0 || node_types?.[element_manager?.element?.type_id]?.custom_attributes_input}
             <Button manager={element_manager?.edit_attributes_popover_button_manager} />
           {/if}
+          {#if manager?.dragged_over_element_child?.selector_id == element_manager?.element?.selector_id && Object.keys(node_types?.[element_manager?.element?.type_id]?.child_elements || {}).length > 0}
+            <div
+              class="child_drop"
+              role="listitem"
+              ondragover={(e) =>
+                manager?.handle_element_child_drag_over(e, element_manager?.element?.selector_id, true)}
+              ondrop={(e) => manager?.handle_element_child_drag_drop(e, element_manager?.element?.selector_id, true)}
+              class:is_child_drop_dragover={manager?.dragged_over_element_child?.selector_id ==
+                element_manager?.element?.selector_id && manager?.dragged_over_element_child?.is_children}
+            >
+              Child Drop Zone
+            </div>
+          {/if}
         </div>
       {/if}
       <div style="display: flex; flex: 0;">
@@ -39,10 +64,11 @@
             <Button manager={element_manager?.small_preempt_add_child_element_button_manager} />
           {/if}
           {#if element_manager?.element}
-          <Button manager={element_manager?.extra_popover_button_manager} />
+            <Button manager={element_manager?.extra_popover_button_manager} />
           {/if}
           <Popover manager={element_manager?.extra_popover_manager}>
             {#snippet content()}
+              <Button manager={element_manager?.reset_ids_button_manager} />
               <Button manager={element_manager?.copy_markdown_button_manager} />
               <Button manager={element_manager?.copy_astc_button_manager} />
               {#if Array.isArray(element_manager?.avail_child_element_ids) && element_manager?.avail_child_element_ids?.length > 0}
@@ -73,8 +99,13 @@
       </div>
     </div>
   </div>
-  {#if Array.isArray(element_manager?.children)}
-    {#each element_manager.children as child}
+  {#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 style="position: relative;">
+      <div class="drop_area" style="left: 1rem; top: 50%; ">Move to Element Children</div>
+    </div>
+  {/if}
+  {#if Array.isArray(element_manager?.children) && element_manager?.children.length > 0}
+    {#each element_manager.children as child, i}
       <Self {manager} element_manager={child} />
     {/each}
   {/if}
@@ -95,6 +126,7 @@
     transition: 0.2s;
   }
   .el_row {
+    position: relative;
     display: flex;
     /* align-items: center; */
     justify-content: space-between;
@@ -111,6 +143,36 @@
     font-weight: 600 !important;
     margin-left: 0.5rem;
   }
+  .is_drop_dragover {
+    background-color: oklch(var(--l12-t) var(--c10) var(--h16) / var(--o15));
+    border-radius: 0.5rem;
+  }
+  .drop_area {
+    position: absolute;
+    width: fit-content;
+    transform: translateY(-50%);
+    font-size: 1rem !important;
+    pointer-events: none;
+    border-radius: 0.5rem;
+    padding: 0.2rem 0.5rem;
+    border: 1px solid oklch(var(--l2-t) var(--c5) var(--h3) / var(--o22));
+    background-color: oklch(var(--l5-t) var(--c10) var(--h3) / var(--o20));
+    color: oklch(var(--l16-t) var(--c10) var(--h3));
+  }
+  .child_drop {
+    margin-left: 2rem;
+    border: 1px dotted var(--g3-t);
+    border-radius: 0.5rem;
+    display: grid;
+    place-content: center;
+    min-width: fit-content;
+    padding: 0.2rem 0.5rem;
+    white-space: nowrap;
+  }
+  .is_child_drop_dragover {
+    background-color: oklch(var(--l2-t) var(--c1) var(--h3) / var(--o15));
+    color: var(--g24-t);
+  }
   .el_id {
     color: var(--g8-t);
     font-size: 1.2rem;

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

@@ -39,6 +39,8 @@ export function create_content_input_manager(config) {
   let attributes_input = $state(null)
   let focused_selector_id = $state(null)
   let definition_stack = $state([])
+  let dragging_selector_id = $state(null)
+  let dragged_over_element_child = $state(null)
 
   let mapkit_js_token = $derived(set_closurable(config?.mapkit_js_token, null))
 
@@ -109,6 +111,7 @@ export function create_content_input_manager(config) {
     let preempt_add_child_element_button_manager = $state(null)
     let small_preempt_add_child_element_button_manager = $state(null)
     let preempt_add_sibling_element_below_button_manager = $state(null)
+    let reset_ids_button_manager = $state(null)
     let copy_markdown_button_manager = $state(null)
     let copy_astc_button_manager = $state(null)
     let shift_element_up_5_button_manager = $state(null)
@@ -177,6 +180,19 @@ export function create_content_input_manager(config) {
       border_radius: 0.5,
       on_click: () => initiate_add_child_el_to_selector(element?.selector_id),
     })
+    reset_ids_button_manager = create_button_manager({
+      type: "soft",
+      support_icon: "refresh",
+      text_align: "left",
+      text: "Reset IDs",
+      is_success_animation: true,
+      on_click: () => {
+        extra_popover_manager.close()
+        setTimeout(() => {
+          reset_ids(element?.selector_id)
+        }, 200)
+      },
+    })
     copy_markdown_button_manager = create_button_manager({
       type: "soft",
       support_icon: "clipboard",
@@ -336,6 +352,9 @@ export function create_content_input_manager(config) {
       get preempt_add_sibling_element_below_button_manager() {
         return preempt_add_sibling_element_below_button_manager
       },
+      get reset_ids_button_manager() {
+        return reset_ids_button_manager
+      },
       get copy_markdown_button_manager() {
         return copy_markdown_button_manager
       },
@@ -376,7 +395,7 @@ export function create_content_input_manager(config) {
     }
   }
 
-  function get_parent_el(selector_id) {
+  function get_parent_el(selector_id, element = null) {
     function get_parent_el_recursive(selector_id, element) {
       if (selector_id && element && Array.isArray(element?.children)) {
         for (let child of element.children) {
@@ -393,7 +412,7 @@ export function create_content_input_manager(config) {
       }
       return null
     }
-    return get_parent_el_recursive(selector_id, versions?.[selected_version_index])
+    return get_parent_el_recursive(selector_id, element ?? versions?.[selected_version_index])
   }
 
   function add_version(version) {
@@ -405,6 +424,92 @@ export function create_content_input_manager(config) {
     }
   }
 
+  function handle_element_child_drag_over(e, selector_id, is_children = false) {
+    e.preventDefault()
+    e.stopPropagation()
+    dragged_over_element_child = { selector_id, is_children }
+  }
+
+  function handle_element_child_drag_drop(e, selector_id, is_children = false) {
+    e.stopPropagation()
+    console.log("handle_element_child_drag_drop", { selector_id, dragging_selector_id, is_children })
+    if (selector_id == dragging_selector_id) {
+      dragging_selector_id = null
+      return
+    }
+    const found_element = traverse_els_for_match(dragging_selector_id)
+    const removed_version = remove_el_recursive(selected_version_prepped?.element, dragging_selector_id)
+    let readded_version = null
+    if (is_children) {
+      readded_version = add_child_to_el_recursive(removed_version, selector_id, found_element)
+    } else {
+      let dom_el_parent = get_parent_el(selector_id, removed_version)
+      const element_index_of_siblings = Array.isArray(dom_el_parent?.children)
+        ? dom_el_parent.children.findIndex((h) => h.selector_id == selector_id)
+        : null
+      if (dom_el_parent && found_element) {
+        if (Array.isArray(dom_el_parent?.children)) {
+          dom_el_parent.children.splice(element_index_of_siblings, 0, found_element)
+        } else {
+          dom_el_parent.children = [found_element]
+        }
+        readded_version = replace_el_recursive(removed_version, dom_el_parent?.selector_id, dom_el_parent)
+      }
+    }
+    add_version(readded_version)
+    dragging_selector_id = null
+  }
+  function handle_element_child_drag_start(e, selector_id) {
+    e.stopPropagation()
+    dragging_selector_id = selector_id
+  }
+  function handle_element_child_drag_end(e, selector_id) {
+    dragged_over_element_child = null
+    dragging_selector_id = null
+  }
+
+  function reset_ids(selector_id) {
+    const found_element = traverse_els_for_match(selector_id)
+    const clean_element = reset_ids_recursive(found_element)
+    const new_version = find_and_replace_element(selector_id, selected_version_prepped?.element, clean_element)
+    add_version(new_version)
+  }
+
+  function reset_ids_recursive(element, selector_id) {
+    if (!element?.selector_id || element?.selector_id == selector_id) {
+      return null
+    }
+    element.selector_id = create_unique_id(null, 8)
+    let new_children = []
+    if (Array.isArray(element?.children)) {
+      for (let child of element?.children) {
+        const child_new_el = reset_ids_recursive(child, selector_id)
+        if (child_new_el) {
+          new_children.push(child_new_el)
+        }
+      }
+    }
+    element.children = new_children
+    return element
+  }
+
+  function find_and_replace_element(selector_id, root_el, replacement_el) {
+    function replace_recursive(node) {
+      if (!node) return null
+      if (node.selector_id === selector_id) {
+        return deep_copy(replacement_el)
+      }
+      const new_children = Array.isArray(node.children) ? node.children.map(replace_recursive).filter(Boolean) : []
+      return {
+        type_id: node.type_id,
+        selector_id: node.selector_id,
+        attributes: node.attributes ? { ...node.attributes } : node.attributes,
+        children: new_children,
+      }
+    }
+    return replace_recursive(root_el)
+  }
+
   function copy_markdown() {
     copy_to_clipboard(astc_to_markdown(selected_version_prepped?.element))
   }
@@ -449,7 +554,6 @@ 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)
@@ -469,10 +573,8 @@ 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")
@@ -518,7 +620,6 @@ 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))
   }
 
@@ -1013,6 +1114,12 @@ export function create_content_input_manager(config) {
     get attributes_input() {
       return attributes_input
     },
+    get dragging_selector_id() {
+      return dragging_selector_id
+    },
+    get dragged_over_element_child() {
+      return dragged_over_element_child
+    },
 
     init,
     clean_content,
@@ -1049,5 +1156,11 @@ export function create_content_input_manager(config) {
     set_element_attributes,
 
     pass_event_down,
+    reset_ids,
+
+    handle_element_child_drag_over,
+    handle_element_child_drag_drop,
+    handle_element_child_drag_start,
+    handle_element_child_drag_end,
   }
 }

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.28",
+  "version": "1.0.30",
   "description": "A SvelteKit UI component library for building modern web applications",
   "license": "MIT",
   "type": "module",
@@ -26,7 +26,7 @@
   },
   "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,

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

@@ -3,17 +3,24 @@
   import Popover from "$lib/Components/Popover/index.svelte"
   import TextInput from "$lib/Components/TextInput/index.svelte"
   import AddElement from "$lib/Components/ContentInput/ContentPanelBuilder/AddElement/index.svelte"
-  import Self from './index.svelte'
+  import Self from "./index.svelte"
   import { node_types } from "$lib/client/index.js"
 
   let { manager, element_manager } = $props()
-
 </script>
 
 <div
   class="container"
   class:is_highlight={element_manager?.element?.selector_id &&
     element_manager?.element?.selector_id == manager?.focused_selector_id}
+  class:is_drop_dragover={manager?.dragged_over_element_child?.selector_id == element_manager?.element?.selector_id}
+  role="listitem"
+  draggable="true"
+  aria-grabbed="false"
+  ondragover={(e) => manager?.handle_element_child_drag_over(e, element_manager?.element?.selector_id)}
+  ondrop={(e) => manager?.handle_element_child_drag_drop(e, element_manager?.element?.selector_id)}
+  ondragstart={(e) => manager?.handle_element_child_drag_start(e, element_manager?.element?.selector_id)}
+  ondragend={(e) => manager?.handle_element_child_drag_end(e, element_manager?.element?.selector_id)}
 >
   <div
     class="event_handler"
@@ -23,12 +30,30 @@
   >
     <div class="el_row">
       {#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>
+        {/if}
         <div class="el_name">
-          <h4 class="el_title">{element_manager?.element?.type_id}</h4>
+          <h4 class="el_title">
+            {element_manager?.element?.type_id}
+          </h4>
           <p class="el_id">{element_manager?.element?.selector_id}</p>
           {#if Object.keys(node_types?.[element_manager?.element?.type_id]?.attributes || {})?.length > 0 || node_types?.[element_manager?.element?.type_id]?.custom_attributes_input}
             <Button manager={element_manager?.edit_attributes_popover_button_manager} />
           {/if}
+          {#if manager?.dragged_over_element_child?.selector_id == element_manager?.element?.selector_id && Object.keys(node_types?.[element_manager?.element?.type_id]?.child_elements || {}).length > 0}
+            <div
+              class="child_drop"
+              role="listitem"
+              ondragover={(e) =>
+                manager?.handle_element_child_drag_over(e, element_manager?.element?.selector_id, true)}
+              ondrop={(e) => manager?.handle_element_child_drag_drop(e, element_manager?.element?.selector_id, true)}
+              class:is_child_drop_dragover={manager?.dragged_over_element_child?.selector_id ==
+                element_manager?.element?.selector_id && manager?.dragged_over_element_child?.is_children}
+            >
+              Child Drop Zone
+            </div>
+          {/if}
         </div>
       {/if}
       <div style="display: flex; flex: 0;">
@@ -39,10 +64,11 @@
             <Button manager={element_manager?.small_preempt_add_child_element_button_manager} />
           {/if}
           {#if element_manager?.element}
-          <Button manager={element_manager?.extra_popover_button_manager} />
+            <Button manager={element_manager?.extra_popover_button_manager} />
           {/if}
           <Popover manager={element_manager?.extra_popover_manager}>
             {#snippet content()}
+              <Button manager={element_manager?.reset_ids_button_manager} />
               <Button manager={element_manager?.copy_markdown_button_manager} />
               <Button manager={element_manager?.copy_astc_button_manager} />
               {#if Array.isArray(element_manager?.avail_child_element_ids) && element_manager?.avail_child_element_ids?.length > 0}
@@ -73,8 +99,13 @@
       </div>
     </div>
   </div>
-  {#if Array.isArray(element_manager?.children)}
-    {#each element_manager.children as child}
+  {#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 style="position: relative;">
+      <div class="drop_area" style="left: 1rem; top: 50%; ">Move to Element Children</div>
+    </div>
+  {/if}
+  {#if Array.isArray(element_manager?.children) && element_manager?.children.length > 0}
+    {#each element_manager.children as child, i}
       <Self {manager} element_manager={child} />
     {/each}
   {/if}
@@ -95,6 +126,7 @@
     transition: 0.2s;
   }
   .el_row {
+    position: relative;
     display: flex;
     /* align-items: center; */
     justify-content: space-between;
@@ -111,6 +143,36 @@
     font-weight: 600 !important;
     margin-left: 0.5rem;
   }
+  .is_drop_dragover {
+    background-color: oklch(var(--l12-t) var(--c10) var(--h16) / var(--o15));
+    border-radius: 0.5rem;
+  }
+  .drop_area {
+    position: absolute;
+    width: fit-content;
+    transform: translateY(-50%);
+    font-size: 1rem !important;
+    pointer-events: none;
+    border-radius: 0.5rem;
+    padding: 0.2rem 0.5rem;
+    border: 1px solid oklch(var(--l2-t) var(--c5) var(--h3) / var(--o22));
+    background-color: oklch(var(--l5-t) var(--c10) var(--h3) / var(--o20));
+    color: oklch(var(--l16-t) var(--c10) var(--h3));
+  }
+  .child_drop {
+    margin-left: 2rem;
+    border: 1px dotted var(--g3-t);
+    border-radius: 0.5rem;
+    display: grid;
+    place-content: center;
+    min-width: fit-content;
+    padding: 0.2rem 0.5rem;
+    white-space: nowrap;
+  }
+  .is_child_drop_dragover {
+    background-color: oklch(var(--l2-t) var(--c1) var(--h3) / var(--o15));
+    color: var(--g24-t);
+  }
   .el_id {
     color: var(--g8-t);
     font-size: 1.2rem;