sveltekit-ui 1.0.27 → 1.0.29

package/dist/Components/Content/index.svelte

@@ -476,8 +476,8 @@
   code,
   pre,
   span {
-    overflow-wrap: anywhere;
+    overflow-wrap: break-word;
     word-break: break-word;
-    line-break: anywhere;
+    white-space: normal;
   }
 </style>

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

@@ -8,7 +8,6 @@
   import Dropdown from "../Dropdown/index.svelte"
 
   let { manager, panel_header } = $props()
-
 </script>
 
 <div class="container">
@@ -26,6 +25,13 @@
 <Popover manager={manager?.paste_astc_markdown_popover_manager}>
   {#snippet content()}
     <div>
+      <p>Note: for valid json make sure all keys and strings are in double quotes, and no trailing commas. example:</p>
+      <pre>
+{`{
+  "type_id": "div",
+  "children": []
+}`}
+  </pre>
       <Dropdown manager={manager?.paste_astc_markdown_dropdown_manager} />
       <TextInput manager={manager?.paste_astc_markdown_text_input_manager} />
     </div>
@@ -35,7 +41,6 @@
   {/snippet}
 </Popover>
 
-
 <style>
   .container {
     display: flex;

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/astc_formatting/index.js

@@ -306,6 +306,8 @@ export function astc_to_markdown(astc) {
         return `\`\`\`${language}\n${attributes.content}\n\`\`\`\n`
       case "hr":
         return "---\n"
+      case "br":
+        return "\n"
       case "table":
         const table_rows = children.map((child) => astc_element_to_markdown(child))
         return table_rows.join("\n") + "\n"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sveltekit-ui",
-  "version": "1.0.27",
+  "version": "1.0.29",
   "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.35.0",
+    "@sveltejs/kit": "^2.36.1",
     "@sveltejs/package": "^2.5.0",
     "@sveltejs/vite-plugin-svelte": "^6.1.3",
     "@vercel/analytics": "^1.5.0",

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

@@ -476,8 +476,8 @@
   code,
   pre,
   span {
-    overflow-wrap: anywhere;
+    overflow-wrap: break-word;
     word-break: break-word;
-    line-break: anywhere;
+    white-space: normal;
   }
 </style>

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;

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

@@ -8,7 +8,6 @@
   import Dropdown from "$lib/Components/Dropdown/index.svelte"
 
   let { manager, panel_header } = $props()
-
 </script>
 
 <div class="container">
@@ -26,6 +25,13 @@
 <Popover manager={manager?.paste_astc_markdown_popover_manager}>
   {#snippet content()}
     <div>
+      <p>Note: for valid json make sure all keys and strings are in double quotes, and no trailing commas. example:</p>
+      <pre>
+{`{
+  "type_id": "div",
+  "children": []
+}`}
+  </pre>
       <Dropdown manager={manager?.paste_astc_markdown_dropdown_manager} />
       <TextInput manager={manager?.paste_astc_markdown_text_input_manager} />
     </div>
@@ -35,7 +41,6 @@
   {/snippet}
 </Popover>
 
-
 <style>
   .container {
     display: flex;