sveltekit-ui 1.0.0

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

@@ -0,0 +1,64 @@
+<script>
+  import Popover from "$lib/Components/Popover/index.svelte"
+  import Button from "$lib/Components/Button/index.svelte"
+  import TextInput from "$lib/Components/TextInput/index.svelte"
+
+  let { manager } = $props()
+
+  
+</script>
+
+<Popover manager={manager?.popover_manager}>
+  {#snippet header()}
+    <h3>{manager?.header}</h3>
+    {#if Array.isArray(manager?.avail_element_ids) && manager?.avail_element_ids.length > 6}
+      <TextInput manager={manager?.search_text_input_manager} />
+      <div style="height: 1rem;"></div>
+    {/if}
+  {/snippet}
+  {#snippet content()}
+    {#key manager?.avail_element_ids_filtered}
+      <div class="elements_container">
+        {#if Array.isArray(manager?.avail_element_ids_filtered) && manager?.avail_element_ids_filtered?.length > 0}
+          {#each manager?.avail_element_ids_filtered as avail_element_id_filtered (avail_element_id_filtered)}
+            <Button manager={manager?.all_element_options_prepped?.[avail_element_id_filtered]?.button_manager}>
+              {#snippet content()}
+                <div class="button_internal_container">
+                  <h5>{manager?.all_element_options_prepped?.[avail_element_id_filtered]?.name}</h5>
+                  <p>{avail_element_id_filtered}</p>
+                </div>
+              {/snippet}
+            </Button>
+          {/each}
+          <Button manager={manager?.preempt_set_el_from_paste_button_manager}>
+            {#snippet content()}
+              <div class="button_internal_container">
+                <h5>Paste astc/markdown</h5>
+                <p>paste</p>
+              </div>
+            {/snippet}
+          </Button>
+        {:else}
+          <p>No available elements found</p>
+        {/if}
+      </div>
+    {/key}
+  {/snippet}
+</Popover>
+
+
+<style>
+.elements_container {
+  display: grid;
+  gap: .5rem;
+  grid-template-columns: repeat(auto-fit, minmax(clamp(20%, 14rem, 100%), 1fr));
+}
+.button_internal_container {
+  display: flex;
+  flex-direction: column;
+  gap: .5rem;
+}
+.button_internal_container h5 {
+  line-height: 1.1 !important;
+}
+</style>

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

@@ -0,0 +1,97 @@
+import { create_popover_manager } from "$lib/Components/Popover/index.svelte.js"
+import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
+import { create_text_input_manager } from "$lib/Components/TextInput/index.svelte.js"
+import { node_types, set_closurable, deep_copy } from "$lib/client/index.js"
+
+export function create_add_element_manager(config) {
+  let header = $derived(set_closurable(config?.header, "Add Element"))
+  let avail_element_ids = $derived(set_closurable(config?.avail_element_ids, null))
+
+  let popover_manager = $state(null)
+  let all_element_options_prepped = $state(null)
+  let preempt_set_el_from_paste_button_manager = $state(null)
+  let search_text_input_manager = $state(null)
+
+  const avail_element_ids_filtered = $derived(
+    search_text_input_manager?.val === null || search_text_input_manager?.val === ""
+      ? avail_element_ids.sort()
+      : avail_element_ids
+          .filter(
+            (h) =>
+              h.includes(search_text_input_manager?.val) || node_types[h]?.name.includes(search_text_input_manager?.val)
+          )
+          .sort()
+  )
+
+  function init(config) {
+    popover_manager = create_popover_manager({
+      min_width: 320,
+      target_width: 600,
+      min_height: 320,
+      target_height: 600,
+      type: "center",
+    })
+    search_text_input_manager = create_text_input_manager({
+      type: "search",
+      autocomplete: "off",
+      placeholder: "search",
+    })
+    let all_element_options_prepped_loc = {}
+    if (node_types && Object.keys(node_types || {}).length > 0) {
+      for (let [node_key, node_value] of Object.entries(node_types)) {
+        all_element_options_prepped_loc[node_key] = {
+          id: node_key,
+          name: node_value?.name,
+          button_manager: create_button_manager({
+            type: "outlined",
+            min_height: 14,
+            on_click: () => {
+              popover_manager.close()
+              search_text_input_manager.set_val(null)
+              if (typeof config?.on_item_click == "function") {
+                config?.on_item_click(node_key)
+              }
+            },
+          }),
+        }
+      }
+    }
+    all_element_options_prepped = all_element_options_prepped_loc
+    preempt_set_el_from_paste_button_manager = create_button_manager({
+      type: "outlined",
+      min_height: 14,
+      on_click: () => {
+        popover_manager.close()
+        search_text_input_manager.set_val(null)
+        if (typeof config?.on_item_click == "function") {
+          config?.on_item_click("paste")
+        }
+      },
+    })
+  }
+  init(config)
+
+  return {
+    get header() {
+      return header
+    },
+    get popover_manager() {
+      return popover_manager
+    },
+    get all_element_options_prepped() {
+      return all_element_options_prepped
+    },
+    get preempt_set_el_from_paste_button_manager() {
+      return preempt_set_el_from_paste_button_manager
+    },
+    get search_text_input_manager() {
+      return search_text_input_manager
+    },
+    get avail_element_ids() {
+      return avail_element_ids
+    },
+    get avail_element_ids_filtered() {
+      return avail_element_ids_filtered
+    },
+  }
+}

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

@@ -0,0 +1,122 @@
+<script>
+  import Button from "$lib/Components/Button/index.svelte"
+  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 { 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}
+>
+  <div
+    class="event_handler"
+    onpointerenter={() => manager?.set_focused_selector_id(element_manager?.element?.selector_id)}
+    onpointercancel={() => manager?.set_focused_selector_id(null)}
+    onpointerleave={() => manager?.set_focused_selector_id(null)}
+  >
+    <div class="el_row">
+      {#if element_manager?.element}
+        <div class="el_name">
+          <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}
+        </div>
+      {/if}
+      <div style="display: flex; flex: 0;">
+        <div style="display: flex;">
+          {#if !element_manager?.element}
+            <Button manager={element_manager?.add_child_button_manager} />
+          {:else if Array.isArray(element_manager?.avail_child_element_ids) && element_manager?.avail_child_element_ids?.length > 0}
+            <Button manager={element_manager?.small_preempt_add_child_element_button_manager} />
+          {/if}
+          {#if element_manager?.element}
+          <Button manager={element_manager?.extra_popover_button_manager} />
+          {/if}
+          <Popover manager={element_manager?.extra_popover_manager}>
+            {#snippet content()}
+              <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}
+                <Button manager={element_manager?.preempt_add_child_element_button_manager} />
+              {/if}
+              {#if Array.isArray(element_manager?.avail_sibling_element_ids) && element_manager?.avail_sibling_element_ids?.length > 0}
+                <Button manager={element_manager?.preempt_add_sibling_element_below_button_manager} />
+              {/if}
+              {#if element_manager?.total_siblings > 0}
+                {#if element_manager?.element_index_of_siblings > 5}
+                  <Button manager={element_manager?.shift_element_up_5_button_manager} />
+                {/if}
+                {#if element_manager?.element_index_of_siblings > 0}
+                  <Button manager={element_manager?.shift_element_up_button_manager} />
+                {/if}
+                {#if element_manager?.element_index_of_siblings < element_manager?.total_siblings - 1}
+                  <Button manager={element_manager?.shift_element_down_button_manager} />
+                {/if}
+                {#if element_manager?.element_index_of_siblings < element_manager?.total_siblings - 6}
+                  <Button manager={element_manager?.shift_element_down_5_button_manager} />
+                {/if}
+              {/if}
+              <Button manager={element_manager?.delete_button_manager} />
+            {/snippet}
+          </Popover>
+        </div>
+        <AddElement manager={element_manager?.add_element_manager} />
+      </div>
+    </div>
+  </div>
+  {#if Array.isArray(element_manager?.children)}
+    {#each element_manager.children as child}
+      <Self {manager} element_manager={child} />
+    {/each}
+  {/if}
+</div>
+
+<style>
+  * {
+    font-size: 1.4rem !important;
+    line-height: 1rem !important;
+  }
+  .container {
+    text-align: start;
+    padding-left: 0.8rem;
+  }
+  .is_highlight {
+    background-color: var(--shadow2-t);
+    border-radius: 0.5rem;
+    transition: 0.2s;
+  }
+  .el_row {
+    display: flex;
+    /* align-items: center; */
+    justify-content: space-between;
+    cursor: pointer;
+  }
+  .el_name {
+    display: flex;
+    align-items: center;
+    flex: 0;
+    margin-bottom: 0.8rem;
+  }
+  .el_title {
+    color: var(--g6-t);
+    font-weight: 600 !important;
+    margin-left: 0.5rem;
+  }
+  .el_id {
+    color: var(--g8-t);
+    font-size: 1.2rem;
+    margin-left: 0.5rem;
+  }
+  .event_handler {
+    pointer-events: auto;
+  }
+</style>

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

@@ -0,0 +1,41 @@
+<script>
+  import Button from "$lib/Components/Button/index.svelte"
+  import ElementsList from "./ElementList/index.svelte"
+  import AddElement from "$lib/Components/ContentInput/ContentPanelBuilder/AddElement/index.svelte"
+
+  let { manager } = $props()
+</script>
+
+{#if !manager?.selected_version_prepped?.element}
+  <Button manager={manager?.preempt_add_first_element_button_manager} />
+  <AddElement manager={manager?.first_el_add_element_manager} />
+{:else}
+  <div class="container" onpointerleave={() => manager?.set_focused_selector_id(null)}>
+    <ElementsList {manager} element_manager={manager?.selected_version_prepped} />
+    <div class="fade_overlay"></div>
+  </div>
+{/if}
+
+<style>
+  .container {
+    position: relative;
+    max-height: 80vh;
+    max-width: 100%;
+    overflow: scroll;
+  }
+  @media (max-width: 600px) {
+    .container {
+      max-height: 30vh;
+    }
+  }
+  .fade_overlay {
+    content: "";
+    position: sticky;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 1rem;
+    background-image: linear-gradient(rgba(255, 255, 255, 0), var(--shadow2-t));
+    pointer-events: none;
+  }
+</style>

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

@@ -0,0 +1,50 @@
+<script>
+  import ContentPanelBuilder from "./ContentPanelBuilder/index.svelte"
+  import Content from "$lib/Components/Content/index.svelte"
+  import AttributesInput from "$lib/Components/ContentInput/AttributesInput/index.svelte"
+  import Popover from "$lib/Components/Popover/index.svelte"
+  import Button from "$lib/Components/Button/index.svelte"
+  import TextInput from "$lib/Components/TextInput/index.svelte"
+  import Dropdown from "$lib/Components/Dropdown/index.svelte"
+
+  let { manager, panel_header } = $props()
+
+</script>
+
+<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>
+<AttributesInput manager={manager?.attributes_input} />
+<Popover manager={manager?.paste_astc_markdown_popover_manager}>
+  {#snippet content()}
+    <div>
+      <Dropdown manager={manager?.paste_astc_markdown_dropdown_manager} />
+      <TextInput manager={manager?.paste_astc_markdown_text_input_manager} />
+    </div>
+  {/snippet}
+  {#snippet footer()}
+    <Button manager={manager?.paste_astc_markdown_finish_button_manager} />
+  {/snippet}
+</Popover>
+
+
+<style>
+  .container {
+    display: flex;
+  }
+  .panel_builder {
+    width: 35rem;
+  }
+  .rich_editor {
+    flex: 1;
+    padding: 0 0.5rem;
+  }
+</style>