sveltekit-ui 1.0.0

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

@@ -0,0 +1,250 @@
+import { create_popover_manager } from "../Popover/index.svelte.js"
+import { create_button_manager } from "../Button/index.svelte.js"
+import { create_text_input_manager } from "../TextInput/index.svelte.js"
+import { create_icon_manager } from "../Icon/index.svelte.js"
+import { create_checkbox_manager } from "../Checkbox/index.svelte.js"
+import { deep_copy, set_closurable, get_data_type_at_path } from "../../client/index.js"
+
+export function create_variable_path_input_manager(config) {
+  let val = $state(null)
+  let is_popover = $state(true)
+  let popover_manager = $state(null)
+  let popover_toggle_button_manager = $state(null)
+  let small_popover_toggle_button_manager = $state(null)
+  let set_null_button_manager = $state(null)
+  let set_root_path_button_manager = $state(null)
+  let is_dynamic_path_item_checkbox_manager = $state(null)
+  let next_path_variable_path_input_manager = $state(null)
+  let finish_button_manager = $state(null)
+  let next_path_options = $state(null)
+  let val_prepped = $state(null)
+  let arrow_icon_manager = $state(null)
+
+  let is_allow_dynamic_path_item = $derived(set_closurable(config?.is_allow_dynamic_path_item, true))
+  let variables_data_type = $derived(set_closurable(config?.variables_data_type, null))
+  let full_data_type = $derived({
+    name: "Object",
+    type: "object_literal",
+    properties: {
+      variables: variables_data_type,
+      loops: { type: "loop" },
+    },
+  })
+  // if data_type changes dynamically set_next_path_options also needs updated
+  let data_type_at_path = $derived(get_data_type_at_path(val, full_data_type))
+
+  function set_val_prepped() {
+    let val_prepped_loc = []
+    if (Array.isArray(val)) {
+      for (let i = 0; i < val.length; i++) {
+        val_prepped_loc.push({
+          ...val[i],
+          remove_path_button_manager: create_button_manager({
+            type: "outlined",
+            support_icon: "x",
+            text: Array.isArray(val?.[i]) ? `[${val?.[i]}]` : String(val?.[i]),
+            on_click: () => {
+              val = val.slice(0, i)
+              set_val_prepped()
+              set_next_path_options()
+            },
+          }),
+        })
+      }
+    }
+    val_prepped = val_prepped_loc
+  }
+
+  function add_path_item(input) {
+    if (!Array.isArray(val)) {
+      val = [input]
+    } else {
+      val = [...val, input]
+    }
+    is_dynamic_path_item_checkbox_manager.set_val(false)
+    next_path_variable_path_input_manager?.init()
+    set_next_path_options()
+  }
+
+  function set_next_path_options() {
+    let next_path_options_loc = null
+    if (data_type_at_path?.type == "loop") {
+      let number_input_manager = create_text_input_manager({
+        type: "number",
+        val: 0,
+        mt: 0.5,
+        mb: 0.5,
+      })
+      next_path_options_loc = {
+        type: "loop",
+        number_input_manager: number_input_manager,
+        add_path_item_button_manager: create_button_manager({
+          type: "outlined",
+          is_compressed: true,
+          text: "Add Path Item",
+          on_click: () => add_path_item(number_input_manager?.val),
+        }),
+      }
+    } else if (data_type_at_path?.type == "object_literal") {
+      let options_loc = $state([])
+      for (let [key, property] of Object.entries(data_type_at_path?.properties)) {
+        let option_button_manager = create_button_manager({
+          type: "outlined",
+          is_compressed: true,
+          text: `${key}: (${property?.type})`,
+          on_click: () => add_path_item(key),
+        })
+        options_loc.push({
+          option_button_manager: option_button_manager,
+        })
+      }
+      next_path_options_loc = {
+        type: "object_literal",
+        options: options_loc,
+      }
+    }
+    next_path_options = next_path_options_loc
+    set_val_prepped()
+  }
+
+  function finish() {
+    popover_manager.close()
+    if (typeof config?.on_finish == "function") {
+      config?.on_finish(val)
+    }
+  }
+
+  function set_val(input) {
+    val = input
+    set_val_prepped()
+    set_next_path_options()
+  }
+
+  function init(config) {
+    val = config?.val ?? null
+    popover_manager = create_popover_manager({
+      min_width: 320,
+      target_width: 400,
+      min_height: 320,
+      target_height: 400,
+      type: "center",
+      header: "Variable Path Input",
+      anchor_id: () => `button_${popover_toggle_button_manager?.id}`,
+    })
+    popover_toggle_button_manager = create_button_manager({
+      type: "outlined",
+      is_compressed: true,
+      text: "Select Variable Path",
+      popover_target: () => `popover_${popover_manager?.id}`,
+    })
+    small_popover_toggle_button_manager = create_button_manager({
+      type: "soft",
+      support_icon: "edit",
+      is_uniform: true,
+      icon_size: 1.6,
+      min_height: 2,
+      border_radius: 0.5,
+      c: 16,
+      popover_target: () => `popover_${popover_manager?.id}`,
+    })
+    set_null_button_manager = create_button_manager({
+      type: "outlined",
+      is_compressed: true,
+      text: "Set Null",
+      on_click: () => {
+        val = null
+        set_val_prepped()
+        set_next_path_options()
+      },
+    })
+    set_root_path_button_manager = create_button_manager({
+      type: "outlined",
+      is_compressed: true,
+      text: `Set Root Path (${data_type_at_path?.type})`,
+      on_click: () => {
+        val = []
+        set_val_prepped()
+        set_next_path_options()
+      },
+    })
+    is_dynamic_path_item_checkbox_manager = create_checkbox_manager({
+      type: "toggle",
+      label: "Is Dynamic Path Item",
+      val: false,
+      on_change: (input) => {
+        if (input) {
+          next_path_variable_path_input_manager = create_variable_path_input_manager({
+            is_popover: false,
+            is_allow_dynamic_path_item: false,
+            variables_data_type: () => variables_data_type,
+            on_finish: (input) => add_path_item(input),
+          })
+        }
+      },
+    })
+    finish_button_manager = create_button_manager({
+      text: "Finish",
+      on_click: () => finish(),
+    })
+    arrow_icon_manager = create_icon_manager({
+      icon_id: "arrow",
+      deg: 90,
+      size: 1.2,
+      color: "var(--g11-t)",
+    })
+    set_val_prepped()
+    set_next_path_options()
+  }
+
+  init(config)
+
+  return {
+    get val() {
+      return val
+    },
+    get val_prepped() {
+      return val_prepped
+    },
+    get is_popover() {
+      return is_popover
+    },
+    get data_type_at_path() {
+      return data_type_at_path
+    },
+    get popover_manager() {
+      return popover_manager
+    },
+    get popover_toggle_button_manager() {
+      return popover_toggle_button_manager
+    },
+    get small_popover_toggle_button_manager() {
+      return small_popover_toggle_button_manager
+    },
+    get next_path_options() {
+      return next_path_options
+    },
+    get set_null_button_manager() {
+      return set_null_button_manager
+    },
+    get set_root_path_button_manager() {
+      return set_root_path_button_manager
+    },
+    get is_allow_dynamic_path_item() {
+      return is_allow_dynamic_path_item
+    },
+    get is_dynamic_path_item_checkbox_manager() {
+      return is_dynamic_path_item_checkbox_manager
+    },
+    get next_path_variable_path_input_manager() {
+      return next_path_variable_path_input_manager
+    },
+    get finish_button_manager() {
+      return finish_button_manager
+    },
+    get arrow_icon_manager() {
+      return arrow_icon_manager
+    },
+    set_val,
+    init,
+  }
+}

package/dist/Components/VideoTBD/index.svelte

@@ -0,0 +1,100 @@
+<script>
+  import { create_unique_id } from "../../client/index.js"
+  import { onMount } from "svelte"
+
+  function create_video_manager(config) {
+    const id = create_unique_id(null, 20)
+    let step = $state(null)
+
+    function draw() {
+      let video_el = document?.querySelector(`#video_${id}`)
+      let canvas_el = document?.querySelector(`#canvas_${id}`)
+      if (video_el && canvas_el) {
+        let ctx = canvas_el.getContext("2d")
+        ctx.filter = "blur(1px)"
+        ctx.drawImage(video_el, 0, 0, canvas_el.width, canvas_el.height)
+      }
+    }
+
+    function draw_loop() {
+      draw()
+      step = window.requestAnimationFrame(draw_loop)
+    }
+
+    function draw_pause() {
+      window.cancelAnimationFrame(step)
+      step = undefined
+    }
+
+    return {
+      id,
+      draw,
+      draw_loop,
+      draw_pause,
+    }
+  }
+
+  let manager = $state(null)
+  onMount(() => {
+    manager = create_video_manager()
+  })
+</script>
+
+<section class="wrapper">
+  <video
+    id={`video_${manager?.id}`}
+    controls
+    muted
+    class="video"
+    src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
+    onpause={(e) => manager?.draw_pause(e)}
+    onended={(e) => manager?.draw_pause(e)}
+    onplay={(e) => manager?.draw_loop(e)}
+    onseeked={(e) => manager?.draw(e)}
+    onloadeddata={(e) => manager?.draw(e)}
+  ></video>
+  <canvas width="10" height="6" aria-hidden="true" class="canvas" id={`canvas_${manager?.id}`}></canvas>
+</section>
+
+<style>
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  .video,
+  .canvas {
+    display: block;
+    width: 100%;
+    height: auto;
+    margin: 0;
+  }
+
+  .wrapper {
+    position: relative;
+    box-shadow: inset 0 0 4rem 4.5rem var(--color-background);
+    max-width: 1600px;
+    margin: 0 auto;
+  }
+
+  .canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    width: 100%;
+    height: 100%;
+    opacity: 0.4;
+  }
+
+  .video {
+    padding: 7rem;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .canvas {
+      display: none !important;
+    }
+  }
+</style>

package/dist/Components/XFollow/index.svelte

@@ -0,0 +1,42 @@
+<script>
+  let { x_handle, size = 4 } = $props()
+</script>
+
+<a
+  href="https://x.com/{x_handle}"
+  role="button"
+  tabindex="0"
+  class="button_container"
+  target="_blank"
+  data-show-count="false"
+  style="min-height: {size}rem; border-radius: {size}rem; padding: {size / 3}rem {size / 2}rem; 
+    font-size: {size / 1.8}rem;"
+>
+  <svg fill="none" height={size * 5} width={size * 5} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1227"
+    ><path
+      d="M714.163 519.284 1160.89 0h-105.86L667.137 450.887 357.328 0H0l468.492 681.821L0 1226.37h105.866l409.625-476.152 327.181 476.152H1200L714.137 519.284h.026ZM569.165 687.828l-47.468-67.894-377.686-540.24h162.604l304.797 435.991 47.468 67.894 396.2 566.721H892.476L569.165 687.854v-.026Z"
+      fill="var(--g24-t)"
+    /></svg
+  >
+  @{x_handle}
+</a>
+
+<style>
+  .button_container {
+    display: flex;
+    width: fit-content;
+    gap: 0.8rem;
+    align-items: center;
+    background-color: var(--g1-t);
+    color: var(--g24-t);
+    text-decoration: none;
+    font-weight: 600;
+    box-shadow: 0px 0.5rem 1rem var(--g15-t);
+    transition: all 0.3s ease 0s;
+  }
+  .button_container:hover {
+    background-color: var(--g4-t);
+    box-shadow: 0px 0.3rem 2rem var(--g15-t);
+    transform: translateY(-0.2rem);
+  }
+</style>

package/dist/Components/XPost/index.svelte

@@ -0,0 +1,52 @@
+<script>
+  import LoadingWheel from "../LoadingWheel/index.svelte"
+
+  let { manager } = $props()
+
+  $effect(() => {
+    if (typeof manager?.load_script == "function") {
+      manager?.load_script()
+    }
+  })
+</script>
+
+<div id={manager?.selector_id}>
+  {#if manager?.is_loading}
+    <div
+      style="width: 100%; height: 30rem; display: grid; place-items: center; background-color: var(--shadow2-t);  border-radius: 1rem;"
+    >
+      <LoadingWheel size={8} />
+      <p>Loading post</p>
+    </div>
+  {/if}
+  {#if manager?.error_message}
+    <div class="failed_to_load_box">
+      <p>{manager?.error_message}</p>
+      <a href="https://x.com/status/{manager?.post_id}">https://x.com/status/{manager?.post_id}</a>
+    </div>
+  {/if}
+  <div class="x_post_container">
+    <div id={`x_post_${manager?.id}`} class:is_hidden={!!manager?.error_message}></div>
+  </div>
+</div>
+
+<style>
+  .failed_to_load_box {
+    margin: 1rem 0;
+    background-color: oklch(var(--l8-t) var(--c16) var(--h3) / var(--o3));
+    border-radius: 1rem;
+    padding: 1rem;
+  }
+  .failed_to_load_box p {
+    color: oklch(var(--l3-t) var(--c16) var(--h3));
+  }
+  .is_hidden {
+    max-width: 0;
+    max-height: 0;
+    overflow: hidden;
+  }
+  .x_post_container {
+    max-width: 100% !important;
+    overflow-x: scroll;
+  }
+</style>

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

@@ -0,0 +1,64 @@
+import { create_unique_id } from "../../client/index.js"
+
+export function create_x_post_manager(config) {
+  const id = create_unique_id(null, 20)
+
+  let is_loading = $state(false)
+  let is_script_loaded = $state(false)
+  let error_message = $state("")
+
+  let is_dark_theme = $derived(config?.is_dark_theme)
+  let theme = $derived(config?.is_dark_theme ? "dark" : "light")
+
+  function load_script() {
+    error_message = null
+    if (!is_script_loaded) {
+      const script = document.createElement("script")
+      script.src = "https://platform.twitter.com/widgets.js"
+      script.charset = "utf-8"
+      script.async = true
+      script.onload = () => {
+        is_script_loaded = true
+        render_x_post()
+      }
+      document.head.appendChild(script)
+    }
+  }
+
+  async function render_x_post() {
+    try {
+      error_message = ""
+      is_loading = true
+      let container_el = document?.querySelector(`#x_post_${id}`)
+      if (config?.post_id && is_script_loaded && window.twttr && container_el) {
+        const create_embed_res = await twttr.widgets.createTweet(config?.post_id, container_el, {
+          theme: theme,
+          dnt: true,
+        })
+        if (create_embed_res) {
+          error_message = ""
+        } else {
+          error_message = "Post not found or failed to load."
+        }
+      }
+    } catch {
+      error_message = "Post not found or failed to load."
+    } finally {
+      is_loading = false
+    }
+  }
+
+  return {
+    id,
+    get post_id() {
+      return config?.post_id
+    },
+    get is_dark_theme() {
+      return is_dark_theme
+    },
+    get theme() {
+      return theme
+    },
+    load_script,
+  }
+}

package/dist/Components/YoutubeVideo/index.svelte

@@ -0,0 +1,73 @@
+<script>
+  import LoadingWheel from "../LoadingWheel/index.svelte"
+  import { onMount } from "svelte"
+
+  let { manager } = $props()
+
+  onMount(() => {
+    if (typeof manager?.render_video == "function") {
+      manager?.render_video()
+    }
+  })
+</script>
+
+<svelte:window onresize={() => manager.resize_video()} />
+
+<div id={manager?.selector_id}>
+  {#if manager?.is_loading}
+    <div
+      style="width: 100%; height: 30rem; display: grid; place-items: center; background-color: var(--shadow2-t);  border-radius: 1rem; margin-top: 2rem;"
+    >
+      <LoadingWheel size={8} />
+      <p>Loading Youtube Video</p>
+    </div>
+  {/if}
+  {#if manager?.error_message}
+    <div class="failed_to_load_box">
+      <p>{manager?.error_message}</p>
+      <a href="https://youtu.be/{manager?.video_id}">https://youtu.be/{manager?.video_id}</a>
+    </div>
+  {/if}
+  <div class="video_container">
+    <div class="video_inner_container">
+      <iframe
+        class:is_hidden={!!manager?.error_message}
+        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
+        src="https://www.youtube.com/embed/{manager?.video_id}?rel=0"
+        title="YouTube video player"
+        frameborder="0"
+        allow="clipboard-write; encrypted-media; gyroscope; web-share"
+        allowfullscreen
+      ></iframe>
+    </div>
+  </div>
+</div>
+
+<style>
+  .video_container {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+    margin-top: 2rem;
+  }
+  .video_inner_container {
+    position: relative;
+    padding-bottom: 56.25%;
+    height: 0;
+    overflow: hidden;
+  }
+  .failed_to_load_box {
+    margin: 1rem 0;
+    background-color: oklch(var(--l8-t) var(--c16) var(--h3) / var(--o3));
+    border-radius: 1rem;
+    padding: 1rem;
+  }
+  .failed_to_load_box p {
+    color: oklch(var(--l3-t) var(--c16) var(--h3));
+  }
+  .is_hidden {
+    max-width: 0;
+    max-height: 0;
+    overflow: hidden;
+  }
+</style>

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

@@ -0,0 +1,54 @@
+import { create_unique_id } from "../../client/index.js"
+
+export function create_youtube_video_manager(config) {
+  let id = create_unique_id(null, 20)
+  let theme = $derived(config?.is_dark_theme ? "dark" : "light")
+
+  let is_loading = $state(false)
+  let error_message = $state("")
+
+  async function render_video() {
+    error_message = ""
+    is_loading = true
+    if (config?.video_id) {
+      var img = new Image()
+      img.src = "http://img.youtube.com/vi/" + config?.video_id + "/mqdefault.jpg"
+      img.onload = function () {
+        if (this.width === 120) {
+          error_message = "YouTube video not found or failed to load."
+        } else {
+          error_message = ""
+          resize_video()
+        }
+      }
+    } else {
+      error_message = "YouTube video not found or failed to load."
+    }
+    is_loading = false
+  }
+
+  function resize_video() {
+    const video_container = document?.querySelector(".video_container")
+    const max_width = video_container.clientWidth
+    const max_height = 15 * 16 // 20rem * 16px
+    const aspect_ratio = 16 / 9
+    const height = Math.min(max_width / aspect_ratio, max_height)
+    const width = height * aspect_ratio
+    if (video_container.style.height > height) {
+      video_container.style.height = `${height}px`
+      video_container.style.width = `${width}px`
+    }
+  }
+
+  return {
+    id,
+    get video_id() {
+      return config?.video_id
+    },
+    get theme() {
+      return theme
+    },
+    render_video,
+    resize_video,
+  }
+}

package/dist/actions/draggable.js

@@ -0,0 +1,49 @@
+export default function draggable(node) {
+  let is_dragging = false
+  let left
+  let top
+
+  function handle_pointerdown(e) {
+    is_dragging = true
+    top = JSON.parse(node.style.top.replace(/[^\d.-]/g, ""))
+    left = JSON.parse(node.style.left.replace(/[^\d.-]/g, ""))
+  }
+
+  function handle_pointerup(e) {
+    is_dragging = false
+  }
+
+  function handle_pointermove(e) {
+    if (is_dragging) {
+      left += e.movementX
+      top += e.movementY
+      node.style.top = `${top}px`
+      node.style.left = `${left}px`
+      node.dispatchEvent(
+        new CustomEvent("drag", { detail: { top: top, left: left } })
+      )
+    }
+  }
+
+  node.style.position = "absolute"
+  node.style.cursor = "move"
+  node.style.userSelect = "none"
+  node.style["touch-action"] = "none"
+  node.style["-webkit-touch-callout"] = "none"
+  node.style["-ms-touch-action"] = "none"
+  node.style["-moz-user-select"] = "none"
+  node.style["-webkit-user-select"] = "none"
+  node.style["-ms-user-select"] = "none"
+
+  node.addEventListener("pointerdown", handle_pointerdown)
+  window.addEventListener("pointerup", handle_pointerup)
+  window.addEventListener("pointermove", handle_pointermove)
+
+  return {
+    destroy() {
+      node.removeEventListener("pointerdown", handle_pointerdown)
+      window.removeEventListener("pointerup", handle_pointerup)
+      window.removeEventListener("pointermove", handle_pointermove)
+    },
+  }
+}