sveltekit-ui 1.1.17 → 1.1.18

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

@@ -0,0 +1,273 @@
+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_dropdown_manager } from "../Dropdown/index.svelte.js"
+import { deep_copy } from "../../client/index.js"
+
+export function create_variable_path_input_manager(config) {
+  let popover_manager = $state(null)
+  let open_edit_button_manager = $state(null)
+  let add_path_item_button_manager = $state(null)
+  let finish_button_manager = $state(null)
+  let defined_options = $state(null)
+  let def_dropdown_manager = $state(null)
+  let levels_nested = $state(null)
+  let path_prepped = $state(null)
+  let val = $derived(get_val())
+  let val_text = $derived(val_to_text(val))
+  let variable_data_type_at_path = $state(null)
+
+  function get_val() {
+    return def_dropdown_manager?.val
+      ? [def_dropdown_manager?.val, ...(Array.isArray(path_prepped) ? path_prepped.map((h) => h?.val) : [])]
+      : []
+  }
+
+  function prep_path(input) {
+    let path_prepped_loc = $state([])
+    if (Array.isArray(input)) {
+      variable_data_type_at_path = Array.isArray(defined_options)
+        ? defined_options.find((h) => h?.key === def_dropdown_manager?.val)?.data_type
+        : null
+      for (let i = 1; i < input.length; i++) {
+        let type_dropdown_manager = create_dropdown_manager({
+          placeholder: "Select Type",
+          is_button_compressed: true,
+          options: [
+            { key: "number", name: "Number" },
+            { key: "string", name: "String" },
+            { key: "variable", name: "Variable" },
+          ],
+          val: Array.isArray(input?.[i])
+            ? "variable"
+            : Number.isInteger(input?.[i])
+            ? "number"
+            : typeof input?.[i] == "string"
+            ? "string"
+            : null,
+        })
+        let remove_path_item_button_manager = create_button_manager({
+          type: "outlined",
+          is_uniform: true,
+          support_icon: "x",
+          on_click: () => {
+            let val = get_val()
+            prep_path(Array.isArray(val) ? val.filter((_, idx) => idx !== i) : null)
+          },
+        })
+        let insert_path_item_before_button_manager = create_button_manager({
+          type: "outlined",
+          is_uniform: true,
+          support_icon: "plus",
+          on_click: () => {
+            let val = get_val()
+            prep_path([
+              ...(Array.isArray(val) ? val.slice(0, i) : []),
+              null,
+              ...(Array.isArray(val) ? val.slice(i) : []),
+            ])
+          },
+        })
+        let const_string_value_text_input_manager = create_text_input_manager({
+          label: "Property",
+          placeholder: "some_property",
+          type: "text",
+          val: type_dropdown_manager?.val == "string" ? input?.[i] : null,
+        })
+        let const_number_value_text_input_manager = create_text_input_manager({
+          label: "Index",
+          placeholder: "0",
+          type: "number",
+          val: type_dropdown_manager?.val == "number" ? input?.[i] : null,
+        })
+        let variable_path_input_manager = create_variable_path_input_manager({
+          val: input?.[i],
+          levels_nested: levels_nested + 1,
+          get_defined_options: config?.get_defined_options,
+          on_finish: () => {
+            variable_path_input_manager.close_popover()
+          },
+        })
+        let key_options = []
+        if (variable_data_type_at_path?.type == "object_literal") {
+          for (let [key, property] of Object.entries(variable_data_type_at_path?.properties)) {
+            let select_button_manager = create_button_manager({
+              type: "outlined",
+              is_compressed: true,
+              text: `${key}: (${property?.type})`,
+              selected_type: () => (const_string_value_text_input_manager?.val == key ? "half_selected" : null),
+              on_click: () => {
+                type_dropdown_manager.set_val("string")
+                const_string_value_text_input_manager.set_val(key)
+              },
+            })
+            key_options.push({
+              select_button_manager: select_button_manager,
+            })
+          }
+        }
+        let val = $derived(
+          type_dropdown_manager?.val == "string"
+            ? const_string_value_text_input_manager?.val
+            : type_dropdown_manager?.val == "number"
+            ? const_number_value_text_input_manager?.val
+            : type_dropdown_manager?.val == "variable"
+            ? variable_path_input_manager?.val
+            : null
+        )
+        let variable_data_type_at_next_path = $derived(
+          type_dropdown_manager?.val == "string"
+            ? variable_data_type_at_path?.properties?.[const_string_value_text_input_manager?.val]
+            : type_dropdown_manager?.val == "number"
+            ? variable_data_type_at_path?.items
+            : type_dropdown_manager?.val == "variable"
+            ? variable_path_input_manager?.variable_data_type_at_path
+            : null
+        )
+        variable_data_type_at_path = variable_data_type_at_next_path
+        path_prepped_loc.push({
+          get type_dropdown_manager() {
+            return type_dropdown_manager
+          },
+          get remove_path_item_button_manager() {
+            return remove_path_item_button_manager
+          },
+          get insert_path_item_before_button_manager() {
+            return insert_path_item_before_button_manager
+          },
+          get const_string_value_text_input_manager() {
+            return const_string_value_text_input_manager
+          },
+          get const_number_value_text_input_manager() {
+            return const_number_value_text_input_manager
+          },
+          get variable_path_input_manager() {
+            return variable_path_input_manager
+          },
+          get key_options() {
+            return key_options
+          },
+          get variable_data_type_at_next_path() {
+            return variable_data_type_at_next_path
+          },
+          get val() {
+            return val
+          },
+        })
+      }
+    }
+    path_prepped = path_prepped_loc
+  }
+
+  function close_popover() {
+    popover_manager.close()
+  }
+
+  function val_to_text(input) {
+    let text_items = []
+    if (Array.isArray(input) && input.length > 0) {
+      for (let item of input) {
+        if (Array.isArray(item)) {
+          text_items.push(val_to_text(item))
+        } else {
+          text_items.push(item)
+        }
+      }
+    }
+    return `[${text_items.join(", ")}]`
+  }
+
+  function init(input) {
+    levels_nested = input?.levels_nested ?? 0
+    if (typeof config?.get_defined_options == "function") {
+      defined_options = config?.get_defined_options()
+    }
+    popover_manager = create_popover_manager({
+      min_width: 280,
+      target_width: 450,
+      min_height: 400,
+      target_height: 240,
+      type: "center",
+      header: "Defined Target Selector",
+      on_open: () => {
+        if (typeof config?.on_dropdown_opened == "function") {
+          config?.on_dropdown_opened()
+        }
+      },
+    })
+    open_edit_button_manager = create_button_manager({
+      type: "outlined",
+      h: 10,
+      l: 3,
+      c: 1,
+      is_compressed: true,
+      text: () => (Array.isArray(val) && val.length > 0 ? val_to_text(val) : "Select Defined Identifier"),
+      popover_target: () => `popover_${popover_manager?.id}`,
+    })
+    def_dropdown_manager = create_dropdown_manager({
+      label: "Defined Variable",
+      is_button_compressed: true,
+      val: input?.val?.[0],
+      on_dropdown_opened: () => {
+        if (typeof config?.get_defined_options == "function") {
+          defined_options = config?.get_defined_options()
+          def_dropdown_manager.set_options(defined_options)
+        }
+      },
+      mb: 1,
+    })
+    add_path_item_button_manager = create_button_manager({
+      type: "outlined",
+      support_icon: "plus",
+      text: "Add Path Item",
+      is_compressed: true,
+      mb: 1,
+      on_click: () => prep_path([...(Array.isArray(val) ? val : []), null]),
+    })
+    finish_button_manager = create_button_manager({
+      text: "Finish",
+      on_click: () => {
+        if (typeof config?.on_finish == "function") {
+          config?.on_finish(val)
+        }
+      },
+    })
+    prep_path(input?.val)
+  }
+
+  init(config)
+
+  return {
+    get val() {
+      return val
+    },
+    get val_text() {
+      return val_text
+    },
+    get variable_data_type_at_path() {
+      return variable_data_type_at_path
+    },
+    get levels_nested() {
+      return levels_nested
+    },
+    get popover_manager() {
+      return popover_manager
+    },
+    get open_edit_button_manager() {
+      return open_edit_button_manager
+    },
+    get def_dropdown_manager() {
+      return def_dropdown_manager
+    },
+    get add_path_item_button_manager() {
+      return add_path_item_button_manager
+    },
+    get path_prepped() {
+      return path_prepped
+    },
+    get finish_button_manager() {
+      return finish_button_manager
+    },
+    close_popover,
+  }
+}

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/YoutubeChannelButton/index.svelte

@@ -0,0 +1,82 @@
+<script>
+  let { url, size = 4 } = $props()
+</script>
+
+<a
+  href={url}
+  role="button"
+  tabindex="0"
+  class="button_container"
+  target="_blank"
+  data-show-count="false"
+  aria-label="share youtube channel"
+  style="min-height: {size}rem; border-radius: {size / 2.5}rem; padding: {size / 4}rem {size / 3}rem; 
+    font-size: {size / 1.8}rem;"
+>
+  <svg
+    width="100%"
+    height="{size / 1.5}rem"
+    viewBox="0 0 381 86"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xml:space="preserve"
+    style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"
+  >
+    <g>
+      <path
+        d="M118.946,13.279C117.549,8.052 113.433,3.936 108.206,2.539C98.731,0 60.742,0 60.742,0C60.742,0 22.753,0 13.278,2.539C8.052,3.936 3.935,8.052 2.538,13.279C0,22.753 0,42.52 0,42.52C0,42.52 0,62.287 2.538,71.76C3.935,76.987 8.052,81.104 13.278,82.501C22.753,85.039 60.742,85.039 60.742,85.039C60.742,85.039 98.731,85.039 108.206,82.501C113.433,81.104 117.549,76.987 118.946,71.76C121.485,62.287 121.485,42.52 121.485,42.52C121.485,42.52 121.485,22.753 118.946,13.279Z"
+        style="fill:rgb(237,31,36);fill-rule:nonzero;"
+      />
+      <path d="M48.593,60.743L80.155,42.52L48.593,24.297L48.593,60.743Z" style="fill:white;fill-rule:nonzero;" />
+      <path
+        d="M189.801,69.023C190.466,67.287 190.8,64.449 190.8,60.51L190.8,43.916C190.8,40.094 190.466,37.3 189.801,35.533C189.135,33.767 187.962,32.883 186.283,32.883C184.661,32.883 183.516,33.767 182.851,35.533C182.185,37.3 181.852,40.094 181.852,43.916L181.852,60.51C181.852,64.449 182.17,67.287 182.808,69.023C183.444,70.761 184.602,71.629 186.283,71.629C187.962,71.629 189.135,70.761 189.801,69.023ZM176.336,77.364C173.931,75.744 172.222,73.223 171.21,69.805C170.196,66.389 169.69,61.842 169.69,56.166L169.69,48.434C169.69,42.7 170.268,38.095 171.427,34.621C172.585,31.146 174.394,28.612 176.857,27.019C179.318,25.427 182.547,24.63 186.544,24.63C190.482,24.63 193.638,25.441 196.013,27.063C198.387,28.684 200.125,31.219 201.226,34.664C202.325,38.111 202.876,42.7 202.876,48.434L202.876,56.166C202.876,61.842 202.34,66.404 201.269,69.849C200.197,73.296 198.459,75.815 196.056,77.407C193.652,79 190.395,79.796 186.283,79.796C182.054,79.796 178.738,78.985 176.336,77.364Z"
+        style="fill:rgb(39,39,39);fill-rule:nonzero;"
+      />
+      <path
+        d="M362.376,33.878C361.769,34.632 361.362,35.862 361.16,37.57C360.956,39.279 360.857,41.871 360.857,45.346L360.857,49.169L369.63,49.169L369.63,45.346C369.63,41.929 369.514,39.337 369.283,37.57C369.051,35.804 368.632,34.56 368.024,33.835C367.415,33.111 366.474,32.749 365.2,32.749C363.925,32.749 362.984,33.126 362.376,33.878ZM360.857,56.293L360.857,58.986C360.857,62.404 360.956,64.966 361.16,66.674C361.362,68.383 361.781,69.629 362.42,70.411C363.057,71.192 364.04,71.584 365.374,71.584C367.168,71.584 368.4,70.888 369.066,69.498C369.731,68.108 370.093,65.792 370.151,62.548L380.49,63.156C380.548,63.621 380.577,64.257 380.577,65.067C380.577,69.991 379.231,73.669 376.537,76.101C373.845,78.533 370.035,79.75 365.113,79.75C359.206,79.75 355.064,77.897 352.69,74.189C350.314,70.484 349.127,64.75 349.127,56.988L349.127,47.691C349.127,39.699 350.358,33.865 352.82,30.186C355.281,26.508 359.495,24.669 365.461,24.669C369.572,24.669 372.729,25.422 374.93,26.928C377.13,28.435 378.68,30.78 379.578,33.965C380.476,37.151 380.925,41.553 380.925,47.17L380.925,56.293L360.857,56.293Z"
+        style="fill:rgb(39,39,39);fill-rule:nonzero;"
+      />
+      <path
+        d="M147.142,55.295L133.502,6.036L145.404,6.036L150.182,28.363C151.399,33.867 152.296,38.558 152.875,42.437L153.223,42.437C153.628,39.657 154.526,34.996 155.916,28.45L160.868,6.036L172.77,6.036L158.957,55.295L158.957,78.927L147.142,78.927L147.142,55.295Z"
+        style="fill:rgb(39,39,39);fill-rule:nonzero;"
+      />
+      <path
+        d="M241.586,25.672L241.586,78.927L232.203,78.927L231.16,72.412L230.9,72.412C228.351,77.335 224.528,79.796 219.432,79.796C215.899,79.796 213.293,78.638 211.613,76.321C209.933,74.005 209.094,70.384 209.094,65.462L209.094,25.672L221.083,25.672L221.083,64.766C221.083,67.142 221.344,68.836 221.865,69.848C222.386,70.863 223.255,71.369 224.471,71.369C225.514,71.369 226.513,71.051 227.468,70.413C228.424,69.776 229.133,68.966 229.597,67.981L229.597,25.672L241.586,25.672Z"
+        style="fill:rgb(39,39,39);fill-rule:nonzero;"
+      />
+      <path
+        d="M303.082,25.672L303.082,78.927L293.699,78.927L292.656,72.412L292.397,72.412C289.846,77.335 286.024,79.796 280.928,79.796C277.395,79.796 274.789,78.638 273.109,76.321C271.429,74.005 270.59,70.384 270.59,65.462L270.59,25.672L282.579,25.672L282.579,64.766C282.579,67.142 282.839,68.836 283.36,69.848C283.882,70.863 284.751,71.369 285.967,71.369C287.01,71.369 288.009,71.051 288.964,70.413C289.92,69.776 290.629,68.966 291.093,67.981L291.093,25.672L303.082,25.672Z"
+        style="fill:rgb(39,39,39);fill-rule:nonzero;"
+      />
+      <path
+        d="M274.164,15.681L262.262,15.681L262.262,78.927L250.534,78.927L250.534,15.681L238.632,15.681L238.632,6.037L274.164,6.037L274.164,15.681Z"
+        style="fill:rgb(39,39,39);fill-rule:nonzero;"
+      />
+      <path
+        d="M331.772,55.908C331.772,59.789 331.611,62.83 331.293,65.03C330.975,67.232 330.439,68.796 329.686,69.721C328.933,70.648 327.918,71.111 326.646,71.111C325.66,71.111 324.748,70.88 323.909,70.416C323.068,69.953 322.389,69.258 321.867,68.331L321.867,38.098C322.272,36.651 322.967,35.463 323.952,34.536C324.937,33.611 326.007,33.146 327.166,33.146C328.383,33.146 329.323,33.624 329.99,34.579C330.655,35.535 331.119,37.142 331.38,39.402C331.641,41.66 331.772,44.874 331.772,49.044L331.772,55.908ZM342.761,34.185C342.036,30.827 340.863,28.394 339.242,26.887C337.62,25.382 335.39,24.629 332.553,24.629C330.352,24.629 328.296,25.252 326.385,26.497C324.474,27.742 322.996,29.378 321.954,31.405L321.866,31.405L321.867,3.344L310.313,3.344L310.313,78.926L320.216,78.926L321.433,73.888L321.693,73.888C322.619,75.683 324.009,77.102 325.863,78.145C327.716,79.187 329.773,79.709 332.032,79.709C336.085,79.709 339.068,77.84 340.98,74.105C342.891,70.369 343.847,64.535 343.847,56.599L343.847,48.173C343.847,42.208 343.484,37.545 342.761,34.185Z"
+        style="fill:rgb(39,39,39);fill-rule:nonzero;"
+      />
+    </g>
+  </svg>
+</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/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>