sveltekit-ui 1.1.74 → 1.1.76

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

@@ -0,0 +1,173 @@
+import { create_unique_id } from "../../client/index.js"
+
+const X_WIDGETS_SCRIPT_SRC = "https://platform.twitter.com/widgets.js"
+let x_widgets_script_promise = null
+
+function load_x_widgets_script() {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    return Promise.reject(new Error("X widgets can only be loaded in a browser."))
+  }
+
+  if (window.twttr?.widgets?.createTweet) return Promise.resolve(window.twttr)
+  if (x_widgets_script_promise) return x_widgets_script_promise
+
+  x_widgets_script_promise = new Promise((resolve, reject) => {
+    const existing_script = document.querySelector(`script[src="${X_WIDGETS_SCRIPT_SRC}"]`)
+    const script = existing_script ?? document.createElement("script")
+    let poll_id
+    let timeout_id
+
+    const cleanup = () => {
+      window.clearInterval(poll_id)
+      window.clearTimeout(timeout_id)
+      script.removeEventListener("load", handle_load)
+      script.removeEventListener("error", handle_error)
+    }
+
+    const finish_if_ready = () => {
+      if (!window.twttr?.widgets?.createTweet) return false
+      cleanup()
+      resolve(window.twttr)
+      return true
+    }
+
+    const handle_load = () => {
+      if (finish_if_ready()) return
+
+      if (typeof window.twttr?.ready === "function") {
+        window.twttr.ready(() => {
+          if (!finish_if_ready()) handle_error()
+        })
+      }
+    }
+
+    const handle_error = () => {
+      cleanup()
+      if (!existing_script) script.remove()
+      reject(new Error("X widgets failed to load."))
+    }
+
+    script.addEventListener("load", handle_load)
+    script.addEventListener("error", handle_error)
+    poll_id = window.setInterval(finish_if_ready, 50)
+    timeout_id = window.setTimeout(handle_error, 10000)
+
+    if (!existing_script) {
+      script.src = X_WIDGETS_SCRIPT_SRC
+      script.charset = "utf-8"
+      script.async = true
+      document.head.appendChild(script)
+    }
+    finish_if_ready()
+  }).catch((error) => {
+    x_widgets_script_promise = null
+    throw error
+  })
+
+  return x_widgets_script_promise
+}
+
+export function create_x_post_manager(config) {
+  const id = create_unique_id(null, 20)
+
+  let is_loading = $state(false)
+  let error_message = $state("")
+  let render_version = 0
+  let is_destroyed = false
+
+  let post_id = $derived(String(config?.post_id ?? "").trim())
+  let selector_id = $derived(config?.selector_id ?? `x_post_wrapper_${id}`)
+  let is_dark_theme = $derived(config?.is_dark_theme)
+  let theme = $derived(config?.is_dark_theme ? "dark" : "light")
+
+  async function load_script() {
+    is_destroyed = false
+
+    const current_render_version = ++render_version
+    error_message = ""
+    is_loading = true
+
+    if (!post_id) {
+      error_message = "A valid X post ID is required."
+      is_loading = false
+      return
+    }
+
+    try {
+      const x_api = await load_x_widgets_script()
+      if (is_destroyed || current_render_version !== render_version) return
+      await render_x_post(x_api, current_render_version)
+    } catch {
+      if (!is_destroyed && current_render_version === render_version) {
+        error_message = "Post not found or failed to load."
+      }
+    } finally {
+      if (!is_destroyed && current_render_version === render_version) is_loading = false
+    }
+  }
+
+  async function render_x_post(
+    x_api = typeof window !== "undefined" ? window.twttr : null,
+    current_render_version = render_version,
+  ) {
+    if (typeof document === "undefined") return
+    const container_el = document.querySelector(`#x_post_${id}`)
+    if (!x_api?.widgets?.createTweet || !container_el) {
+      error_message = "Post not found or failed to load."
+      return
+    }
+
+    const embed_container = document.createElement("div")
+    container_el.replaceChildren(embed_container)
+    const create_embed_res = await x_api.widgets.createTweet(post_id, embed_container, {
+      theme,
+      dnt: true,
+    })
+
+    if (is_destroyed || current_render_version !== render_version) {
+      embed_container.remove()
+      return
+    }
+    error_message = create_embed_res ? "" : "Post not found or failed to load."
+  }
+
+  function cancel_render() {
+    render_version += 1
+    is_loading = false
+  }
+
+  function destroy() {
+    is_destroyed = true
+    cancel_render()
+    if (typeof document !== "undefined") document.querySelector(`#x_post_${id}`)?.replaceChildren()
+  }
+
+  return {
+    id,
+    get selector_id() {
+      return selector_id
+    },
+    get post_id() {
+      return post_id
+    },
+    get post_url() {
+      return post_id ? `https://x.com/i/status/${encodeURIComponent(post_id)}` : ""
+    },
+    get is_loading() {
+      return is_loading
+    },
+    get error_message() {
+      return error_message
+    },
+    get is_dark_theme() {
+      return is_dark_theme
+    },
+    get theme() {
+      return theme
+    },
+    load_script,
+    render_x_post,
+    cancel_render,
+    destroy,
+  }
+}

package/dist/Components/YoutubeChannelButton/index.svelte

@@ -1,15 +1,22 @@
 <script>
+  import { normalize_link_href } from "../../client/index.js"
+
   let { url, size = 4 } = $props()
+
+  let normalized_url = $derived(normalize_link_href(url))
+  let safe_url = $derived(/^https?:\/\//i.test(normalized_url ?? "") ? normalized_url : null)
 </script>
 
 <a
-  href={url}
-  role="button"
-  tabindex="0"
+  href={safe_url ?? undefined}
+  tabindex={safe_url ? undefined : -1}
   class="button_container"
-  target="_blank"
+  class:is_disabled={!safe_url}
+  target={safe_url ? "_blank" : undefined}
+  rel={safe_url ? "noopener noreferrer" : undefined}
   data-show-count="false"
-  aria-label="share youtube channel"
+  aria-disabled={!safe_url}
+  aria-label={safe_url ? "Open YouTube channel in a new tab" : "Invalid YouTube channel URL"}
   style="min-height: {size}rem; border-radius: {size / 2.5}rem; padding: {size / 4}rem {size / 3}rem; 
     font-size: {size / 1.8}rem;"
 >
@@ -22,6 +29,8 @@
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xml:space="preserve"
     style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"
+    aria-hidden="true"
+    focusable="false"
   >
     <g>
       <path
@@ -79,4 +88,13 @@
     box-shadow: 0px 0.3rem 2rem var(--g15-t);
     transform: translateY(-0.2rem);
   }
+  .button_container.is_disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+  .button_container.is_disabled:hover {
+    background-color: var(--g1-t);
+    box-shadow: 0px 0.5rem 1rem var(--g15-t);
+    transform: none;
+  }
 </style>

package/dist/Components/YoutubeChannelButton/index.svelte.d.ts

@@ -0,0 +1,13 @@
+export default Index;
+type Index = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Index: import("svelte").Component<{
+    url: any;
+    size?: number;
+}, {}, "">;
+type $$ComponentProps = {
+    url: any;
+    size?: number;
+};

package/dist/Components/YoutubeVideo/index.svelte

@@ -1,21 +1,27 @@
 <script>
   import LoadingWheel from "../LoadingWheel/index.svelte"
-  import { onMount } from "svelte"
 
   let { manager } = $props()
 
-  onMount(() => {
-    if (typeof manager?.render_video === "function") {
-      manager.render_video()
+  $effect(() => {
+    const current_manager = manager
+    current_manager?.video_id
+
+    if (typeof current_manager?.render_video === "function") {
+      current_manager.render_video()
     }
+
+    return () => current_manager?.destroy?.()
   })
 </script>
 
 <div id={manager?.selector_id}>
   {#if manager?.error_message}
-    <div class="failed_to_load_box">
+    <div class="failed_to_load_box" role="alert">
       <p>{manager?.error_message}</p>
-      <a href={manager?.youtube_url} target="_blank" rel="noreferrer">{manager?.youtube_url}</a>
+      {#if manager?.youtube_url}
+        <a href={manager.youtube_url} target="_blank" rel="noopener noreferrer">View this video on YouTube</a>
+      {/if}
     </div>
   {:else if manager?.use_poster_preview && !manager?.is_iframe_active}
     <button
@@ -30,6 +36,7 @@
         alt={manager?.title}
         loading="lazy"
         onerror={manager?.handle_poster_error}
+        onload={manager?.handle_poster_load}
       />
       <span class="video_preview_overlay">
         <span class="video_preview_play">
@@ -55,6 +62,7 @@
           title={manager?.title}
           loading="lazy"
           frameborder="0"
+          referrerpolicy="strict-origin-when-cross-origin"
           allow="autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
           allowfullscreen
         ></iframe>

package/dist/Components/YoutubeVideo/index.svelte.d.ts

@@ -0,0 +1,11 @@
+export default Index;
+type Index = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Index: import("svelte").Component<{
+    manager: any;
+}, {}, "">;
+type $$ComponentProps = {
+    manager: any;
+};

package/dist/Components/YoutubeVideo/manager.svelte.d.ts

@@ -0,0 +1,24 @@
+export function create_youtube_video_manager(config: any): {
+    id: string;
+    readonly selector_id: any;
+    readonly video_id: string;
+    readonly theme: string;
+    readonly title: any;
+    readonly border_radius: any;
+    readonly is_loading: boolean;
+    readonly error_message: string;
+    readonly use_poster_preview: any;
+    readonly is_iframe_active: boolean;
+    readonly poster_src: any;
+    readonly poster_fallback_src: any;
+    readonly youtube_url: string;
+    readonly embed_src: string;
+    render_video: () => Promise<any> | undefined;
+    activate_video: () => void;
+    deactivate_video: () => void;
+    resize_video: () => void;
+    handle_poster_error: (e: any) => void;
+    handle_poster_load: (e: any) => void;
+    cancel_render: () => void;
+    destroy: () => void;
+};

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

@@ -0,0 +1,186 @@
+import { create_unique_id } from "../../client/index.js"
+
+export function create_youtube_video_manager(config) {
+  const id = create_unique_id(null, 20)
+
+  let video_id = $derived(normalize_video_id(config?.video_id))
+  let theme = $derived(config?.is_dark_theme ? "dark" : "light")
+  let selector_id = $derived(config?.selector_id ?? `youtube_video_${id}`)
+  let use_poster_preview = $derived(config?.use_poster_preview ?? false)
+  let autoplay_on_activate = $derived(config?.autoplay_on_activate ?? true)
+  let border_radius = $derived(config?.border_radius ?? 1)
+  let title = $derived(config?.title ?? "YouTube video player")
+
+  let is_loading = $state(false)
+  let error_message = $state("")
+  let is_iframe_active = $state(!(config?.use_poster_preview ?? false))
+  let validation_version = 0
+  let cancel_validation = null
+  let is_destroyed = false
+
+  function normalize_video_id(value) {
+    const normalized_value = String(value ?? "").trim()
+    return /^[A-Za-z0-9_-]{11}$/.test(normalized_value) ? normalized_value : ""
+  }
+
+  function use_poster_fallback(image_element) {
+    const fallback_src = get_poster_fallback_src()
+    if (!image_element || !fallback_src || image_element.getAttribute("src") === fallback_src) {
+      error_message = "YouTube video not found or failed to load."
+      return
+    }
+
+    image_element.src = fallback_src
+  }
+
+  function handle_poster_error(e) {
+    use_poster_fallback(e.currentTarget)
+  }
+
+  function handle_poster_load(e) {
+    if (e.currentTarget?.naturalWidth === 120) use_poster_fallback(e.currentTarget)
+  }
+
+  function get_thumbnail_src(quality = "maxresdefault") {
+    if (!video_id) return null
+    return `https://img.youtube.com/vi/${video_id}/${quality}.jpg`
+  }
+
+  function get_poster_fallback_src() {
+    return config?.poster_fallback_src ?? get_thumbnail_src("hqdefault")
+  }
+
+  function render_video() {
+    is_destroyed = false
+    cancel_render()
+    const current_validation_version = validation_version
+    error_message = ""
+
+    if (!video_id) {
+      error_message = "YouTube video not found or failed to load."
+      return
+    }
+
+    if (typeof Image === "undefined") return
+    is_loading = true
+
+    return new Promise((resolve) => {
+      const img = new Image()
+      let is_settled = false
+
+      const finish = (message = "") => {
+        if (is_settled) return
+        is_settled = true
+        img.onload = null
+        img.onerror = null
+        if (!is_destroyed && current_validation_version === validation_version) {
+          error_message = message
+          is_loading = false
+        }
+        if (cancel_validation === cancel) cancel_validation = null
+        resolve()
+      }
+
+      const cancel = () => finish()
+      cancel_validation = cancel
+
+      img.onload = function () {
+        finish(this.naturalWidth === 120 ? "YouTube video not found or failed to load." : "")
+      }
+
+      img.onerror = function () {
+        finish("YouTube video not found or failed to load.")
+      }
+
+      img.src = get_thumbnail_src("hqdefault")
+    })
+  }
+
+  function activate_video() {
+    if (!video_id || error_message) return
+    is_iframe_active = true
+  }
+
+  function deactivate_video() {
+    is_iframe_active = !use_poster_preview
+  }
+
+  function resize_video() {
+    // CSS handles sizing now.
+  }
+
+  function cancel_render() {
+    validation_version += 1
+    cancel_validation?.()
+    cancel_validation = null
+    is_loading = false
+  }
+
+  function destroy() {
+    is_destroyed = true
+    cancel_render()
+  }
+
+  return {
+    id,
+    get selector_id() {
+      return selector_id
+    },
+    get video_id() {
+      return video_id
+    },
+    get theme() {
+      return theme
+    },
+    get title() {
+      return title
+    },
+    get border_radius() {
+      return border_radius
+    },
+    get is_loading() {
+      return is_loading
+    },
+    get error_message() {
+      return error_message
+    },
+    get use_poster_preview() {
+      return use_poster_preview
+    },
+    get is_iframe_active() {
+      return is_iframe_active
+    },
+    get poster_src() {
+      return config?.poster_src ?? get_thumbnail_src("maxresdefault")
+    },
+    get poster_fallback_src() {
+      return get_poster_fallback_src()
+    },
+    get youtube_url() {
+      return video_id ? `https://youtu.be/${video_id}` : ""
+    },
+    get embed_src() {
+      if (!video_id) return ""
+
+      const params = new URLSearchParams({
+        rel: "0",
+      })
+
+      const shouldAutoplay = use_poster_preview ? is_iframe_active && autoplay_on_activate : !!config?.autoplay
+
+      if (shouldAutoplay) {
+        params.set("autoplay", "1")
+      }
+
+      return `https://www.youtube.com/embed/${video_id}?${params.toString()}`
+    },
+    render_video,
+    activate_video,
+    deactivate_video,
+    resize_video,
+    handle_poster_error,
+    handle_poster_load,
+    cancel_render,
+    destroy,
+  }
+}

package/dist/actions/draggable.d.ts

@@ -0,0 +1,3 @@
+export default function draggable(node: any): {
+    destroy(): void;
+};

package/dist/actions/draggable.js

@@ -1,12 +1,18 @@
 export default function draggable(node) {
+  const window_ref = node?.ownerDocument?.defaultView ?? globalThis.window
+  if (!window_ref?.addEventListener) {
+    throw new Error("draggable requires a browser window")
+  }
   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, ""))
+    const parsed_top = Number.parseFloat(node.style.top)
+    const parsed_left = Number.parseFloat(node.style.left)
+    top = Number.isFinite(parsed_top) ? parsed_top : Number(node.offsetTop) || 0
+    left = Number.isFinite(parsed_left) ? parsed_left : Number(node.offsetLeft) || 0
   }
 
   function handle_pointerup(e) {
@@ -15,8 +21,10 @@ export default function draggable(node) {
 
   function handle_pointermove(e) {
     if (is_dragging) {
-      left += e.movementX
-      top += e.movementY
+      const movement_x = Number(e.movementX)
+      const movement_y = Number(e.movementY)
+      left += Number.isFinite(movement_x) ? movement_x : 0
+      top += Number.isFinite(movement_y) ? movement_y : 0
       node.style.top = `${top}px`
       node.style.left = `${left}px`
       node.dispatchEvent(
@@ -36,14 +44,14 @@ export default function draggable(node) {
   node.style["-ms-user-select"] = "none"
 
   node.addEventListener("pointerdown", handle_pointerdown)
-  window.addEventListener("pointerup", handle_pointerup)
-  window.addEventListener("pointermove", handle_pointermove)
+  window_ref.addEventListener("pointerup", handle_pointerup)
+  window_ref.addEventListener("pointermove", handle_pointermove)
 
   return {
     destroy() {
       node.removeEventListener("pointerdown", handle_pointerdown)
-      window.removeEventListener("pointerup", handle_pointerup)
-      window.removeEventListener("pointermove", handle_pointermove)
+      window_ref.removeEventListener("pointerup", handle_pointerup)
+      window_ref.removeEventListener("pointermove", handle_pointermove)
     },
   }
 }

package/dist/actions/index.d.ts

@@ -0,0 +1,3 @@
+export function intersection_observer(node: any): {
+    destroy(): void;
+};

package/dist/actions/no_spaces.d.ts

@@ -0,0 +1,4 @@
+export default function no_spaces(node: any, is_no_spaces: any): {
+    update(new_is_no_spaces: any): void;
+    destroy(): void;
+};

package/dist/actions/no_spaces.js

@@ -13,7 +13,7 @@ export default function no_spaces(node, is_no_spaces) {
   }
 
   function handle_keydown(e) {
-    if (is_no_spaces && e.which === 32) {
+    if (is_no_spaces && (e.key === " " || e.code === "Space" || e.which === 32)) {
       e.preventDefault()
     }
   }

package/dist/actions/numbers_only.d.ts

@@ -0,0 +1,3 @@
+export default function numbers_only(node: any): {
+    destroy(): void;
+};

package/dist/actions/numbers_only.js

@@ -9,7 +9,7 @@ export default function numbers_only(node) {
   }
 
   function handle_keydown(e) {
-    if (e.which === 32) {
+    if (e.key === " " || e.code === "Space" || e.which === 32) {
       e.preventDefault()
     }
   }

package/dist/actions/scroll_y.d.ts

@@ -0,0 +1,3 @@
+export default function scroll_y(node: any): {
+    destroy(): void;
+};

package/dist/actions/scroll_y.js

@@ -6,12 +6,16 @@ export default function scroll_y(node) {
   let touch_start_y
   let node_el_scroll_top_start_y
   const handle_touchstart = (e) => {
-    touch_start_y = Math.round(e.targetTouches[0].clientY)
+    const touch = e.targetTouches?.[0]
+    if (!touch) return
+    touch_start_y = Math.round(touch.clientY)
     node_el_scroll_top_start_y = node.scrollTop
   }
 
   const handle_touchmove = (e) => {
-    node.scrollTop = node_el_scroll_top_start_y + touch_start_y - Math.round(e.targetTouches[0].clientY)
+    const touch = e.targetTouches?.[0]
+    if (!touch || !Number.isFinite(touch_start_y) || !Number.isFinite(node_el_scroll_top_start_y)) return
+    node.scrollTop = node_el_scroll_top_start_y + touch_start_y - Math.round(touch.clientY)
   }
 
   node.addEventListener("wheel", handle_wheel, { passive: true })

package/dist/actions/stop_scroll_propagation_y.d.ts

@@ -0,0 +1,3 @@
+export default function stop_scroll_propagation_y(node: any): {
+    destroy(): void;
+};