sveltekit-ui 1.0.0

package/dist/Components/FunctionInput/Node/helpers/StackArea/index.svelte

@@ -0,0 +1,169 @@
+<script>
+  import Button from "../../../../Button/index.svelte"
+  import Popover from "../../../../Popover/index.svelte"
+  import Node from "../../index.svelte"
+
+  let { manager } = $props()
+</script>
+
+<div>
+  <!-- <pre>{JSON.stringify(manager?.node_value_prepped,null,2)}</pre> -->
+  {#if Array.isArray(manager?.node_value) && manager?.node_value.length > 0}
+    {#each manager?.node_value_prepped as stack_item, i}
+      {#if i == 0}
+        <div class="inline_drop_container">
+          <div
+            class="dropzone"
+            class:inline_draggedover={manager?.is_preview && manager?.is_drag_enter && manager?.hovered_node_drop_zone == i}
+            role="button"
+            tabindex="0"
+            aria-label="Drop area"
+            draggable={manager?.is_preview}
+            ondragstart={(e) => manager?.prevent_drag(e)}
+            ondragenter={() => manager?.handle_drag_enter(i)}
+            ondragleave={() => manager?.handle_drag_leave()}
+            ondragover={(e) => e.preventDefault()}
+            ondrop={(e) => manager?.handle_drop([...manager?.node_path, i], true, e)}
+          >
+            {#if manager?.is_drag_enter && manager?.hovered_node_drop_zone == i}
+              Drop Area
+            {/if}
+          </div>
+        </div>
+      {/if}
+      {#if manager?.node_types?.hasOwnProperty(stack_item?.type)}
+        <Node manager={stack_item?.node_manager} />
+        <!-- <Node node_path={[...node_path, i]} node_value={stack_item?.value} node_type={stack_item?.type} {is_preview} /> -->
+      {:else}
+        <pre>{JSON.stringify(stack_item, null, 2)}</pre>
+      {/if}
+      <div class="inline_drop_container">
+        <div
+          class="dropzone"
+          class:inline_draggedover={manager?.is_preview && manager?.is_drag_enter && manager?.hovered_node_drop_zone == i + 1}
+          role="button"
+          tabindex="0"
+          aria-label="Drop area"
+          draggable={manager?.is_preview}
+          ondragstart={(e) => manager?.prevent_drag(e)}
+          ondragenter={() => manager?.handle_drag_enter(i + 1)}
+          ondragleave={() => manager?.handle_drag_leave()}
+          ondragover={(e) => e.preventDefault()}
+          ondrop={(e) => manager?.handle_drop([...manager?.node_path, i + 1], true,e)}
+        >
+          {#if manager?.is_drag_enter && manager?.hovered_node_drop_zone == i + 1}
+            Drop Area
+          {/if}
+        </div>
+      </div>
+    {/each}
+  {:else}
+    <div
+      class="droparea"
+      class:draggedover={manager?.is_preview && manager?.is_drag_enter && manager?.hovered_node_drop_zone == "empty"}
+      role="button"
+      tabindex="0"
+      aria-label="Drop area"
+      draggable={manager?.is_preview}
+      ondragstart={(e) => manager?.prevent_drag(e)}
+      ondragenter={() => manager?.handle_drag_enter("empty")}
+      ondragleave={() => manager?.handle_drag_leave()}
+      ondragover={(e) => e.preventDefault()}
+      ondrop={(e) => manager?.handle_drop([...manager?.node_path, 0], true, e)}
+    >
+      <p>Drop Component or</p>
+      <Button manager={manager?.choose_node_popover_toggle_button_manager} />
+      <Popover manager={manager?.choose_node_popover_manager}>
+        {#snippet content()}
+          <div style="cursor: default;">
+            {#if typeof manager?.node_types == "object"}
+              <div class="node_types">
+                {#if Array.isArray(manager?.node_types?.[manager?.node_type]?.child_node_options) && manager?.node_types?.[manager?.node_type]?.child_node_options.length > 0}
+                  {#each manager?.node_types?.[manager?.node_type]?.child_node_options as node_type}
+                    <div
+                      class="node_container"
+                      role="button"
+                      tabindex="0"
+                      onclick={() => manager?.handle_node_click(manager?.node_type, [...manager?.node_path, 0], true)}
+                      onkeypress={() => handle_node_click(manager?.node_type, [...manager?.node_path, 0], true)}
+                    >
+                      node_tbd2
+                      <!-- <Node {node_type} is_preview={true} is_clickable_only={true} /> -->
+                    </div>
+                  {/each}
+                {:else}
+                  <p>No node options found</p>
+                {/if}
+              </div>
+            {/if}
+          </div>
+        {/snippet}
+      </Popover>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .droparea {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem;
+    border: 1px dashed var(--g6-t);
+    background-color: var(--shadow5-t);
+    width: 30rem;
+    border-radius: 0.5rem;
+    margin-bottom: -1px;
+  }
+  .draggedover {
+    border: 1px dashed var(--g3-t);
+    background-color: var(--shadow8-t);
+  }
+  .inline_drop_container {
+    position: relative;
+  }
+  .dropzone {
+    position: absolute;
+    top: 0;
+    left: 0;
+    min-width: 30rem;
+    width: 100%;
+    min-height: 20px;
+    transform: translateY(-50%);
+    z-index: 1;
+    font-size: 1.2rem;
+    line-height: 1.4rem;
+    padding-left: 0.5rem;
+    display: flex;
+    align-items: center;
+    color: oklch(var(--l9) var(--c20) var(--h9));
+    border-radius: 0.5rem;
+  }
+  .inline_draggedover {
+    background-color: oklch(var(--l18) var(--c20) var(--h9) / var(--o15));
+    border: 1px dotted oklch(var(--l18) var(--c20) var(--h9));
+  }
+  .node_types {
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+  }
+  .node_container {
+    position: relative;
+    padding: 1rem;
+  }
+  .node_container::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: -1px;
+    left: 0;
+    z-index: 3;
+    border-radius: 1rem;
+  }
+  .node_container:hover::after {
+    border: 1px solid var(--shadow5-t);
+    background-color: var(--shadow3-t);
+  }
+</style>

package/dist/Components/FunctionInput/Node/helpers/StackArea/index.svelte.js

@@ -0,0 +1,152 @@
+import { create_popover_manager } from "../../../../Popover/index.svelte.js"
+import { create_button_manager } from "../../../../Button/index.svelte.js"
+import { create_node_manager } from "../../index.svelte.js"
+
+export function create_stack_area_manager(config) {
+  console.log("create_stack_area_manager")
+  let is_drag_enter = $state(false)
+  let drag_counter = $state(0)
+  let hovered_node_drop_zone = $state(null)
+  let node_value_prepped = $state(null)
+
+  let choose_node_popover_manager = $state(null)
+  let choose_node_popover_toggle_button_manager = $state(null)
+
+  function handle_drag_enter(zone_id) {
+    drag_counter++
+    is_drag_enter = drag_counter > 0
+    hovered_node_drop_zone = zone_id
+  }
+
+  function handle_drag_leave() {
+    drag_counter--
+    if (drag_counter === 0) {
+      is_drag_enter = false
+    }
+    hovered_node_drop_zone = null
+  }
+
+  function handle_drop(input_path, is_insert, e) {
+    e.stopPropagation()
+    hovered_node_drop_zone = null
+    console.log("drop", { input_path, node_type: config?.node_type })
+    config?.drag_or_select_node(input_path, config?.node_type, false, null)
+  }
+
+  function handle_node_click(clicked_node_type, input_path, is_insert, toggle_popover) {
+    if (toggle_popover) {
+      toggle()
+    }
+    config?.drag_or_select_node(input_path, config?.node_type, true, clicked_node_type)
+  }
+
+  function prevent_drag(e) {
+    e.stopPropagation()
+    e.preventDefault()
+  }
+
+  function set_node_value_prepped() {
+    let node_value_prepped_loc = []
+    if (Array.isArray(config?.node_value) && config?.node_value.length > 0) {
+      for (let i = 0; i < config?.node_value.length; i++) {
+        let node_path = [...config?.node_path, i]
+        let node_type = config?.node_value[i]?.type
+        let node_manager = $state(null)
+        node_manager = create_node_manager({
+          node_type: node_type,
+          node_path: node_path,
+          node_value: config?.node_value[i]?.node_value,
+          is_clickable_only: false,
+          is_preview: false,
+          node_types: config?.node_types,
+          node_categories: config?.node_categories,
+          c: 12,
+          handle_node_drag_start: () =>
+            config?.handle_node_drag_start({
+              node_path: node_path,
+              node_type: node_type,
+            }),
+          handle_node_drag_end: () =>
+            config?.handle_node_drag_end({
+              node_path: node_path,
+              node_type: node_type,
+            }),
+          on_set_node_value: (input) => set_node_value(input),
+          drag_or_select_node: config?.drag_or_select_node,
+        })
+        node_value_prepped_loc.push({
+          ...config?.node_value?.[i],
+          node_manager: node_manager,
+        })
+      }
+    }
+    node_value_prepped = node_value_prepped_loc
+  }
+
+  function init(config) {
+    choose_node_popover_manager = create_popover_manager({
+      header: "Choose Node",
+      min_width: 280,
+      target_width: 600,
+      min_height: 250,
+      target_height: 600,
+      type: "center",
+      anchor_id: () => `button_${choose_node_popover_toggle_button_manager?.id}`,
+    })
+    choose_node_popover_toggle_button_manager = create_button_manager({
+      text: "Choose",
+      is_disabled: () => !config?.is_preview,
+      min_height: 3.4,
+      pt: 0.2,
+      pb: 0.2,
+      popover_target: () => `popover_${choose_node_popover_manager?.id}`,
+    })
+    set_node_value_prepped()
+  }
+
+  init(config)
+
+  return {
+    get node_types() {
+      return config?.node_types
+    },
+    get parent_node_type() {
+      return config?.parent_node_type
+    },
+    get node_path() {
+      return config?.node_path
+    },
+    get node_type() {
+      return config?.node_type
+    },
+    get node_value() {
+      return config?.node_value
+    },
+    get is_preview() {
+      return !!config?.is_preview
+    },
+    get is_drag_enter() {
+      return is_drag_enter
+    },
+    get drag_counter() {
+      return drag_counter
+    },
+    get hovered_node_drop_zone() {
+      return hovered_node_drop_zone
+    },
+    get choose_node_popover_manager() {
+      return choose_node_popover_manager
+    },
+    get choose_node_popover_toggle_button_manager() {
+      return choose_node_popover_toggle_button_manager
+    },
+    get node_value_prepped() {
+      return node_value_prepped
+    },
+    handle_drag_enter,
+    handle_drag_leave,
+    handle_drop,
+    handle_node_click,
+    prevent_drag,
+  }
+}

package/dist/Components/FunctionInput/Node/index.svelte

@@ -0,0 +1,144 @@
+<script>
+  import { slide, fade } from "svelte/transition"
+  import Field from "./helpers/Field/index.svelte"
+  import StackArea from "./helpers/StackArea/index.svelte"
+
+  let { manager } = $props()
+</script>
+
+<div>
+  {#if manager?.is_preview}
+    <p class="label">
+      {manager?.preview_text}
+    </p>
+  {/if}
+  {#if Array.isArray(manager?.node_structure) && manager?.node_structure.length > 0}
+    <div
+      class="container"
+      class:is_clickable_only={manager?.is_clickable_only}
+      draggable={!manager?.is_clickable_only}
+      role="button"
+      tabindex="0"
+      ondragstart={(e) => manager?.handle_drag_start(e)}
+      ondragend={(e) => manager?.handle_drag_end(e)}
+      style="--fill_color: oklch(var(--l16-t) var(--c{manager?.c}) {manager?.h > -1
+        ? `var(--h${manager?.h})`
+        : 'var(--primary-h)'}); --border_color: oklch(var(--l6-t) var(--c3) {manager?.h > -1
+        ? `var(--h${manager?.h})`
+        : 'var(--primary-h)'});"
+    >
+      {#each manager?.node_structure as node_item, i}
+        {#if node_item?.ui_type == "stack"}
+          <div class="children_container">
+            <div class="side_bar"></div>
+            {#if manager?.node_value?.is_collapsed}
+              <div class="collapsed_content" in:fade={{ delay: 600, duration: 300 }}>collapsed...</div>
+            {:else}
+              <div transition:slide={{ duration: 600 }}>
+                <StackArea manager={node_item?.stack_area_manager} />
+              </div>
+            {/if}
+          </div>
+        {:else}
+          <div
+            class="bar"
+            class:is_solo_bar={i == 0 && manager?.full_node_type.node_structure.length == 1}
+            class:is_top_bar_of_many={i == 0 && manager?.full_node_type.node_structure.length > 0}
+            class:is_closing_bar={manager?.full_node_type.node_structure.length - 1 == i}
+          >
+            {#if Array.isArray(node_item) && node_item.length > 0}
+              {#each node_item as bar_item}
+                <Field manager={bar_item?.field_manager} />
+              {/each}
+            {:else}
+              <p>No Node Fields</p>
+            {/if}
+          </div>
+        {/if}
+        {#if manager?.full_node_type.node_structure.length - 1 == i && node_item?.ui_type == "stack"}
+          <div class="bar closing_bar"></div>
+        {/if}
+      {/each}
+    </div>
+  {:else}
+    Node Not found {manager?.node_type}, {Array.isArray(manager?.node_path) ? `[${manager?.node_path.join(", ")}]` : ""}
+  {/if}
+</div>
+
+<style>
+  .container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    cursor: grab;
+  }
+  .container:active {
+    cursor: grabbing;
+  }
+  .bar {
+    background-color: var(--fill_color);
+    position: relative;
+    width: fit-content;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    min-width: 2rem;
+    min-height: 4rem;
+    padding: 0.5rem;
+    padding-left: 1rem;
+    border-top-right-radius: 1rem;
+    border-bottom-right-radius: 1rem;
+    border: 1px solid var(--border_color);
+    margin-bottom: -1px;
+  }
+  .is_solo_bar {
+    border-top-left-radius: 1rem;
+    border-bottom-left-radius: 1rem;
+    padding-left: 0.5rem;
+  }
+  .is_top_bar_of_many {
+    border-top-left-radius: 1rem;
+  }
+  .is_closing_bar {
+    border-bottom-left-radius: 1rem;
+  }
+  .closing_bar {
+    min-height: 2rem;
+    min-width: 8rem;
+    border-bottom-left-radius: 1rem;
+  }
+  .children_container {
+    display: flex;
+  }
+  .side_bar {
+    position: relative;
+    min-width: 10px;
+    max-width: 10px;
+    background-color: var(--fill_color);
+    border-left: 1px solid var(--border_color);
+    border-right: 1px solid var(--border_color);
+    margin-right: -1px;
+  }
+  .side_bar::after {
+    position: absolute;
+    content: "";
+    background-color: var(--fill_color);
+    border-right: 1px solid var(--border_color);
+    z-index: 3;
+    top: 0;
+    left: 0;
+    bottom: -1px;
+    right: -1px;
+  }
+  .collapsed_content {
+    background-color: var(--shadow5-t);
+    border: 1px solid var(--shadow8-t);
+    border-radius: 0.5rem;
+    font-size: 1.2rem;
+    color: var(--g8-t);
+    padding: 0.2rem 0.5rem;
+  }
+  .is_clickable_only {
+    cursor: pointer !important;
+  }
+</style>

package/dist/Components/FunctionInput/Node/index.svelte.js

@@ -0,0 +1,130 @@
+// import Field from "./helpers/Field/index.svelte"
+// import StackArea from "./helpers/StackArea/index.svelte"
+import { deep_copy } from "../../../client/index.js"
+import { create_stack_area_manager } from "./helpers/StackArea/index.svelte.js"
+import { create_field_manager } from "./helpers/Field/index.svelte.js"
+
+export function create_node_manager(config) {
+  console.log("create_node_man", config)
+  let node_structure = $state(null)
+
+  let preview_text = $derived(
+    `${config?.node_type}(${config?.node_types?.[config?.node_type]?.input?.type})→(${
+      config?.node_types?.[config?.node_type]?.output?.type ?? "void"
+    })`
+  )
+
+  let full_node_type = $derived(config?.node_types?.[config?.node_type])
+  let h = $derived(config?.node_categories?.[config?.node_types?.[config?.node_type]?.category]?.h || 4)
+
+  function get_node_structure() {
+    console.log("get_node_structure", deep_copy({ config, full_node_type }))
+    let node_structure_loc = []
+    if (Array.isArray(full_node_type?.node_structure)) {
+      for (let i = 0; i < full_node_type?.node_structure.length; i++) {
+        let node_item = deep_copy(full_node_type.node_structure?.[i])
+        if (node_item?.ui_type == "stack") {
+          node_item.stack_area_manager = create_stack_area_manager({
+            parent_node_type: config?.node_type,
+            node_path: [...(Array.isArray(config?.node_path) ? config?.node_path : []), node_item?.field].filter(
+              (item) => item !== null && item !== undefined
+            ),
+            node_type: config?.node_value?.[node_item?.field]?.type,
+            node_value: config?.node_value?.[node_item?.field]?.value,
+            node_types: config?.node_types,
+            is_preview: false,
+            drag_or_select_node: config?.drag_or_select_node,
+            handle_node_drag_start: config?.handle_node_drag_start,
+            handle_node_drag_end: config?.handle_node_drag_end,
+          })
+        } else {
+          if (Array.isArray(node_item) && node_item.length > 0) {
+            for (let j = 0; j < node_item.length; j++) {
+              if (node_item[j]?.ui_type == "input") {
+                node_item[j].field_manager = create_field_manager({
+                  bar_item: node_item[j],
+                  node_path: config?.node_path,
+                  node_type: config?.node_type,
+                  node_value: config?.node_value,
+                  is_preview: !!config?.is_preview,
+                  on_set_node_value: (input) => config?.on_set_node_value(input),
+                  get_selected_version_node_at_path: (input) => config?.get_selected_version_node_at_path(input),
+                })
+              } else {
+                node_item[j].field_manager = create_field_manager({
+                  bar_item: node_item?.[j],
+                  parent_node_type: config?.node_type,
+                  node_path: [
+                    ...(Array.isArray(config?.node_path) ? config?.node_path : []),
+                    node_item[j]?.field,
+                  ].filter((item) => item !== null && item !== undefined),
+                  node_type: config?.node_value?.[node_item[j]?.field]?.type,
+                  node_value: config?.node_value?.[node_item[j]?.field]?.value,
+                  is_preview: !!config?.is_preview,
+                  on_set_node_value: (input) => config?.on_set_node_value(input),
+                  get_selected_version_node_at_path: (input) => config?.get_selected_version_node_at_path(input),
+                })
+              }
+            }
+          }
+        }
+        node_structure_loc.push(node_item)
+      }
+    }
+    return node_structure_loc
+  }
+
+  function handle_drag_start(e) {
+    if (config?.is_clickable_only || config?.node_path == "main") {
+      e.preventDefault()
+    } else if (config?.handle_node_drag_start) {
+      config?.handle_node_drag_start()
+    }
+  }
+
+  function handle_drag_end(e) {
+    if (config?.is_clickable_only) {
+      e.preventDefault()
+    } else if (config?.handle_node_drag_start) {
+      config?.handle_node_drag_end()
+    }
+  }
+
+  function init(config) {
+    node_structure = get_node_structure()
+  }
+
+  init(config)
+
+  return {
+    get node_path() {
+      return config?.node_path
+    },
+    get node_type() {
+      return config?.node_type
+    },
+    get is_preview() {
+      return !!config?.is_preview
+    },
+    get is_clickable_only() {
+      return !!config?.is_clickable_only
+    },
+    get full_node_type() {
+      return full_node_type
+    },
+    get h() {
+      return h
+    },
+    get c() {
+      return config?.c
+    },
+    get preview_text() {
+      return preview_text
+    },
+    get node_structure() {
+      return node_structure
+    },
+    handle_drag_start,
+    handle_drag_end,
+  }
+}