sveltekit-ui 1.1.74 → 1.1.76

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

@@ -1,98 +0,0 @@
-<script>
-  let { manager } = $props()
-</script>
-
-{#if manager?.is_show}
-  <div
-    class="container"
-    class:full={manager?.type == "full"}
-    style="
-    --border_radius: {manager?.border_radius}rem;
-    --fall_distance: {manager?.fall_distance};
-    --size: {manager?.size}rem;
-    --transition_duration: {manager?.transition_duration}ms;
-    --x_spread: {manager?.x_spread}"
-  >
-    {#each manager?.confetti_prepped as item}
-      <div
-        class="item"
-        style="
-        --item_bg: {item?.item_bg};
-        --skew: {item?.skew};
-        --rotation_xyz: {item?.rotation_xyz};
-        --rotation_deg: {item?.rotation_deg};
-        --translate_x: {item?.translate_x};
-        --translate_y: {item?.translate_y};
-        --scale: {item?.scale};
-        --transition_delay: {item?.transition_time_range};"
-      ></div>
-    {/each}
-  </div>
-{/if}
-
-<style>
-  .container {
-    position: relative;
-    z-index: 100;
-  }
-  .full {
-    position: fixed;
-    top: -2rem;
-    left: 0;
-    height: 100vh;
-    width: 100vw;
-    display: flex;
-    justify-content: center;
-    overflow: hidden;
-  }
-  @keyframes rotate {
-    0% {
-      transform: skew(var(--skew)) rotate3d(var(--full_rotation));
-    }
-    100% {
-      transform: skew(var(--skew)) rotate3d(var(--rotation_xyz), calc(var(--rotation_deg) + 360deg));
-    }
-  }
-  @keyframes translate {
-    0% {
-      opacity: 1;
-    }
-    8% {
-      transform: translateY(calc(var(--translate_y) * 0.95))
-        translateX(calc(var(--translate_x) * (var(--x_spread) * 0.9)));
-      opacity: 1;
-    }
-    12% {
-      transform: translateY(var(--translate_y)) translateX(calc(var(--translate_x) * (var(--x_spread) * 0.95)));
-      opacity: 1;
-    }
-    16% {
-      transform: translateY(var(--translate_y)) translateX(calc(var(--translate_x) * var(--x_spread)));
-      opacity: 1;
-    }
-    100% {
-      transform: translateY(calc(var(--translate_y) + var(--fall_distance))) translateX(var(--translate_x));
-      opacity: 0;
-    }
-  }
-  .item {
-    position: absolute;
-    height: calc(var(--size) * var(--scale));
-    width: calc(var(--size) * var(--scale));
-    animation: translate var(--transition_duration) var(--transition_delay) 1 linear;
-    opacity: 0;
-    pointer-events: none;
-  }
-  .item::before {
-    --full_rotation: var(--rotation_xyz), var(--rotation_deg);
-    content: "";
-    display: block;
-    width: 100%;
-    height: 100%;
-    background: var(--item_bg);
-    background-size: contain;
-    transform: skew(var(--skew)) rotate3d(var(--full_rotation));
-    animation: rotate var(--transition_duration) var(--transition_delay) 1 linear;
-    border-radius: var(--border_radius);
-  }
-</style>

package/src/lib/Components/Confetti/index.svelte.js

@@ -1,94 +0,0 @@
-import { tick } from "svelte"
-import { set_closurable } from "$lib/client/index.js"
-
-export function create_confetti_manager(config) {
-  let type = $derived(set_closurable(config?.type, null))
-  let amount = $derived(set_closurable(config?.amount, 50))
-  let size = $derived(set_closurable(config?.size, 1.2))
-  let x_range = $derived(set_closurable(config?.x_range, [-10, 10]))
-  let x_spread = $derived(set_closurable(config?.x_spread, 0.9))
-  let y_range = $derived(set_closurable(config?.y_range, [-3, -10]))
-  let time_range = $derived(set_closurable(config?.time_range, 50))
-  let duration = $derived(set_closurable(config?.duration, 2000))
-  let item_bg = $derived(set_closurable(config?.item_bg, null)) // ["var(--primary)", "blue", "url(https://svelte.dev/favicon.png)"]
-  let fall_distance = $derived(set_closurable(config?.fall_distance, "10rem"))
-  let border_radius = $derived(set_closurable(config?.border_radius, 0.1))
-
-  let is_show = $state(false)
-  let confetti_prepped = $state(null)
-
-  function random_between(min, max) {
-    return (Math.random() * (max - min) + min).toPrecision(4)
-  }
-
-  function get_item_bg() {
-    if (Array.isArray(item_bg) && item_bg.length) {
-      return item_bg[Math.round(Math.random() * (item_bg.length - 1))]
-    } else if (item_bg == "rainbow") {
-      return `oklch(var(--l6-t) var(--c10) var(--h${Math.round(random_between(0, 24))}))`
-    }
-    return `oklch(var(--l6-t) var(--c${Math.round(random_between(1, 14))}) var(--primary-h))`
-  }
-
-  function prep_confetti() {
-    let confetti_prepped_loc = []
-    for (let i = 0; i < amount; i++) {
-      const item_bg = get_item_bg()
-      confetti_prepped_loc.push({
-        item_bg: item_bg,
-        skew: `${random_between(-45, 45)}deg,${random_between(-45, 45)}deg`,
-        rotation_xyz: `${random_between(-10, 10)}, ${random_between(-10, 10)}, ${random_between(-10, 10)}`,
-        rotation_deg: `${random_between(0, 360)}deg`,
-        translate_x: `${Math.floor(random_between(x_range?.[0], x_range?.[1]))}rem`,
-        translate_y: `${Math.floor(random_between(y_range?.[0], y_range?.[1]))}rem`,
-        scale: 0.1 * random_between(2, 10),
-        transition_time_range: `${random_between(0, time_range)}ms`,
-      })
-    }
-    confetti_prepped = confetti_prepped_loc
-  }
-
-  async function show_confetti() {
-    is_show = false
-    prep_confetti()
-    await tick()
-    is_show = true
-    setTimeout(() => {
-      is_show = false
-    }, duration + time_range)
-  }
-
-  function init(config) {
-    // show_confetti()
-  }
-
-  init(config)
-
-  return {
-    get type() {
-      return type
-    },
-    get confetti_prepped() {
-      return confetti_prepped
-    },
-    get is_show() {
-      return is_show
-    },
-    get border_radius() {
-      return border_radius
-    },
-    get fall_distance() {
-      return fall_distance
-    },
-    get size() {
-      return size
-    },
-    get transition_duration() {
-      return duration
-    },
-    get x_spread() {
-      return x_spread
-    },
-    show_confetti,
-  }
-}

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

@@ -1,500 +0,0 @@
-<script>
-  import { goto } from "$app/navigation"
-  import LoadingWheel from "$lib/Components/LoadingWheel/index.svelte"
-  import Audio from "$lib/Components/Audio/index.svelte"
-  import Code from "$lib/Components/Code/index.svelte"
-  import Color from "$lib/Components/Color/index.svelte"
-  import Image from "$lib/Components/Image/index.svelte"
-  import Number from "$lib/Components/Number/index.svelte"
-  import XPost from "$lib/Components/XPost/index.svelte"
-  import YoutubeVideo from "$lib/Components/YoutubeVideo/index.svelte"
-  import PhoneNumber from "$lib/Components/PhoneNumber/index.svelte"
-  import EmailAddress from "$lib/Components/EmailAddress/index.svelte"
-  import Slider from "$lib/Components/Slider/index.svelte"
-  import Checkbox from "$lib/Components/Checkbox/index.svelte"
-  import Json from "$lib/Components/Json/index.svelte"
-  import CronInput from "$lib/Components/CronInput/index.svelte"
-  import TextInput from "$lib/Components/TextInput/index.svelte"
-  import ColorInput from "$lib/Components/ColorInput/index.svelte"
-  import Dropdown from "$lib/Components/Dropdown/index.svelte"
-  import TimeInput from "$lib/Components/TimeInput/index.svelte"
-  import Time from "$lib/Components/Time/index.svelte"
-  import LocationInput from "$lib/Components/LocationInput/index.svelte"
-  import Location from "$lib/Components/Location/index.svelte"
-  import Qr from "$lib/Components/Qr/index.svelte"
-  import Link from "$lib/Components/Link/index.svelte"
-  import IconInput from "$lib/Components/IconInput/index.svelte"
-  import Icon from "$lib/Components/Icon/index.svelte"
-  import TableAdvanced from "$lib/Components/TableAdvanced/index.svelte"
-  import FileInput from "$lib/Components/FileInput/index.svelte"
-  import Button from "$lib/Components/Button/index.svelte"
-  import Spacer from "$lib/Components/Spacer/index.svelte"
-  import Self from "./index.svelte"
-  import { format_date, set_closurable_color, set_closurable, cron_to_english } from "$lib/client/index.js"
-
-  let { manager } = $props()
-
-  function handle_anchor_click(event) {
-    event.preventDefault()
-    const link = event.currentTarget
-    const anchor_id = new URL(link.href).hash
-    const anchor = document?.querySelector(anchor_id)
-    window.scrollTo({
-      top: anchor.offsetTop - 100,
-      behavior: "smooth",
-    })
-  }
-</script>
-
-{#snippet children()}
-  {#if manager?.val_prepped?.is_children && Array.isArray(manager?.val_prepped?.children)}
-    {#each manager?.val_prepped?.children as child}
-      <Self manager={child} />
-    {/each}
-  {/if}
-{/snippet}
-
-{#if !manager?.val_prepped?.type_id}
-  <p>Missing type</p>
-{:else if manager?.val_prepped?.type_id === "show_conditions"}
-  {#if Array.isArray(manager?.val_prepped?.children) && manager?.val_prepped?.children.some( (h) => set_closurable(h?.val_prepped?.attributes?.is_show) )}
-    {#if Array.isArray(manager?.val_prepped?.children.find( (h) => set_closurable(h?.val_prepped?.attributes?.is_show) )?.val_prepped?.children)}
-      {#each manager?.val_prepped?.children.find( (h) => set_closurable(h?.val_prepped?.attributes?.is_show) )?.val_prepped?.children as child (child?.selector_id)}
-        <Self manager={child} />
-      {/each}
-    {/if}
-  {:else if Array.isArray(manager?.val_prepped?.children) && manager?.val_prepped?.children.some((h) => h?.val_prepped?.type_id == "show_conditions_item_else")}
-    {#if Array.isArray(manager?.val_prepped?.children.find((h) => h?.val_prepped?.type_id == "show_conditions_item_else")?.val_prepped?.children)}
-      {#each manager?.val_prepped?.children.find((h) => h?.val_prepped?.type_id == "show_conditions_item_else")?.val_prepped?.children as child (child?.selector_id)}
-        <Self manager={child} />
-      {/each}
-    {/if}
-  {/if}
-{:else if manager?.val_prepped?.type_id === "children"}
-  {@render children()}
-{:else if manager?.val_prepped?.type_id == "loop"}
-  {#if manager?.val_prepped?.is_children}
-    {#each manager?.val_prepped?.children as child_loops, i}
-      {#if Array.isArray(child_loops) && child_loops.length > 0}
-        {#each child_loops as child, i (child?.val_prepped?.selector_id)}
-          <Self manager={child} />
-        {/each}
-      {/if}
-      {#if i < manager?.val_prepped?.children.length - 1 && manager?.val_prepped?.attributes?.join_text}{manager
-          ?.val_prepped?.attributes?.join_text}{/if}
-    {/each}
-  {/if}
-{:else if manager?.val_prepped?.type_id == "array_uniform_input"}
-  {#if manager?.val_prepped?.attributes?.label}
-    <p class="label">{manager?.val_prepped?.attributes?.label}</p>
-  {/if}
-  {#if manager?.val_prepped?.is_children}
-    {#each manager?.val_prepped?.children as child_loops}
-      <div style="display: flex; gap: .5rem;">
-        <Button manager={child_loops?.remove_item_button_manager} />
-        {#if Array.isArray(child_loops?.children)}
-          {#each child_loops?.children as child (child?.selector_id)}
-            <Self manager={child} />
-          {/each}
-        {/if}
-      </div>
-    {/each}
-    <Button manager={manager?.val_prepped?.add_item_button_manager} />
-  {/if}
-{:else if manager?.val_prepped?.type_id == "object_uniform_input"}
-  {#if manager?.val_prepped?.attributes?.label}
-    <p class="label">{manager?.val_prepped?.attributes?.label}</p>
-  {/if}
-  {#if manager?.val_prepped?.is_children}
-    <div class="table_container">
-      <table style="margin: 0;">
-        <thead>
-          <tr>
-            <th>Delete</th>
-            <th>Key</th>
-            <th>Value</th>
-          </tr>
-        </thead>
-        <tbody>
-          {#each manager?.val_prepped?.children as child_loops}
-            <tr>
-              <td><Button manager={child_loops?.remove_item_button_manager} /></td>
-              <td>
-                {#if manager?.val_prepped?.attributes?.property_key_table_id}
-                  <Dropdown manager={child_loops?.item_key_table_row_dropdown_manager} />
-                {:else}
-                  <TextInput manager={child_loops?.item_key_text_input_manager} />
-                {/if}
-              </td>
-              <td>
-                {#if Array.isArray(child_loops?.children)}
-                  {#each child_loops?.children as child (child?.selector_id)}
-                    <Self manager={child} />
-                  {/each}
-                {/if}
-              </td>
-            </tr>
-          {/each}
-        </tbody>
-      </table>
-    </div>
-    <Button manager={manager?.val_prepped?.add_item_button_manager} />
-  {/if}
-{:else if manager?.val_prepped?.type_id == "table_row_id_input"}
-  <Dropdown manager={manager?.val_prepped?.manager} />
-{:else if manager?.val_prepped?.type_id == "div"}
-  <div
-    id={manager?.val_prepped?.selector_id}
-    style="{manager?.val_prepped?.attributes?.background_color
-      ? `background-color: ${set_closurable_color(manager?.val_prepped?.attributes?.background_color)};`
-      : ''} {manager?.val_prepped?.attributes?.border_color
-      ? `border: 1px solid ${set_closurable_color(manager?.val_prepped?.attributes?.border_color)};`
-      : ''} {manager?.val_prepped?.attributes?.padding
-      ? `padding: ${set_closurable(manager?.val_prepped?.attributes?.padding)}rem;`
-      : ''} {manager?.val_prepped?.attributes?.border_radius
-      ? `border-radius: ${set_closurable(manager?.val_prepped?.attributes?.border_radius)}rem;`
-      : ''} {manager?.val_prepped?.attributes?.gap
-      ? `gap: ${set_closurable(manager?.val_prepped?.attributes?.gap)}rem;`
-      : ''} {manager?.val_prepped?.attributes?.padding
-      ? `padding: ${set_closurable(manager?.val_prepped?.attributes?.padding)}rem;`
-      : ''} {manager?.val_prepped?.attributes?.align_content || manager?.val_prepped?.attributes?.justify_content
-      ? `display: grid; place-content: ${set_closurable(manager?.val_prepped?.attributes?.align_content, 'stretch')} ${set_closurable(manager?.val_prepped?.attributes?.justify_content, 'stretch')};`
-      : ''}"
-  >
-    {@render children()}
-  </div>
-{:else if manager?.val_prepped?.type_id == "article"}
-  <article id={manager?.val_prepped?.selector_id}>
-    {@render children()}
-  </article>
-{:else if manager?.val_prepped?.type_id == "section"}
-  <section
-    id={manager?.val_prepped?.selector_id}
-    style="{manager?.val_prepped?.attributes?.background_color
-      ? `background-color: ${set_closurable_color(manager?.val_prepped?.attributes?.background_color)};`
-      : ''} {manager?.val_prepped?.attributes?.border_color
-      ? `border: 1px solid ${set_closurable_color(manager?.val_prepped?.attributes?.border_color)};`
-      : ''} {manager?.val_prepped?.attributes?.padding
-      ? `padding: ${set_closurable(manager?.val_prepped?.attributes?.padding)}rem;`
-      : ''} {manager?.val_prepped?.attributes?.border_radius
-      ? `border-radius: ${set_closurable(manager?.val_prepped?.attributes?.border_radius)}rem;`
-      : ''}"
-  >
-    {@render children()}
-  </section>
-{:else if manager?.val_prepped?.type_id == "figure"}
-  <figure id={manager?.val_prepped?.selector_id}>
-    {@render children()}
-    {#if set_closurable(manager?.val_prepped?.attributes?.caption)}
-      <figcaption>
-        {set_closurable(manager?.val_prepped?.attributes?.caption)}
-      </figcaption>
-    {/if}
-  </figure>
-{:else if manager?.val_prepped?.type_id == "p"}
-  <p id={manager?.val_prepped?.selector_id}>
-    {@render children()}
-  </p>
-{:else if manager?.val_prepped?.type_id == "nav"}
-  <nav id={manager?.val_prepped?.selector_id}>
-    {@render children()}
-  </nav>
-{:else if manager?.val_prepped?.type_id == "ol"}
-  <ol id={manager?.val_prepped?.selector_id}>
-    {@render children()}
-  </ol>
-{:else if manager?.val_prepped?.type_id == "ul"}
-  <ul id={manager?.val_prepped?.selector_id}>
-    {@render children()}
-  </ul>
-{:else if manager?.val_prepped?.type_id == "li"}
-  <li id={manager?.val_prepped?.selector_id}>
-    {@render children()}
-  </li>
-{:else if manager?.val_prepped?.type_id == "header"}
-  <header id={manager?.val_prepped?.selector_id}>
-    {@render children()}
-  </header>
-{:else if manager?.val_prepped?.type_id === "h1"}
-  <h1 id={manager?.val_prepped?.selector_id}>
-    {@render children()}
-  </h1>
-{:else if manager?.val_prepped?.type_id === "h2"}
-  <h2 id={manager?.val_prepped?.selector_id}>
-    {@render children()}
-  </h2>
-{:else if manager?.val_prepped?.type_id === "h3"}
-  <h3 id={manager?.val_prepped?.selector_id}>
-    {@render children()}
-  </h3>
-{:else if manager?.val_prepped?.type_id === "h4"}
-  <h4 id={manager?.val_prepped?.selector_id}>
-    {@render children()}
-  </h4>
-{:else if manager?.val_prepped?.type_id === "h5"}
-  <h5 id={manager?.val_prepped?.selector_id}>
-    {@render children()}
-  </h5>
-{:else if manager?.val_prepped?.type_id === "h6"}
-  <h6 id={manager?.val_prepped?.selector_id}>
-    {@render children()}
-  </h6>
-{:else if manager?.val_prepped?.type_id === "strong"}
-  <strong id={manager?.val_prepped?.selector_id}>{set_closurable(manager?.val_prepped?.attributes?.content)}</strong>
-{:else if manager?.val_prepped?.type_id === "em"}
-  <em
-    id={manager?.val_prepped?.selector_id}
-    style={set_closurable(manager?.val_prepped?.attributes?.font_size) > 0
-      ? `font-size: ${set_closurable(manager?.val_prepped?.attributes?.font_size)}rem;`
-      : ""}>{set_closurable(manager?.val_prepped?.attributes?.content)}</em
-  >
-{:else if manager?.val_prepped?.type_id === "strong_em"}
-  <em
-    ><strong id={manager?.val_prepped?.selector_id}>{set_closurable(manager?.val_prepped?.attributes?.content)}</strong
-    ></em
-  >
-{:else if manager?.val_prepped?.type_id === "pre"}
-  <pre
-    style="{manager?.val_prepped?.attributes?.text_color
-      ? `color: ${set_closurable_color(manager?.val_prepped?.attributes?.text_color)};`
-      : ''} {manager?.val_prepped?.attributes?.font_size
-      ? `font-size: ${manager?.val_prepped?.attributes?.font_size}rem`
-      : ''}">
-    {JSON.stringify(set_closurable(manager?.val_prepped?.attributes?.content), null, 2)}
-</pre>
-{:else if manager?.val_prepped?.type_id === "mark"}
-  <mark id={manager?.val_prepped?.selector_id}>
-    {@render children()}
-  </mark>
-{:else if manager?.val_prepped?.type_id === "span"}
-  <span id={manager?.val_prepped?.selector_id}>
-    {@render children()}
-  </span>
-{:else if manager?.val_prepped?.type_id === "sub"}
-  <sub id={manager?.val_prepped?.selector_id}>
-    {@render children()}
-  </sub>
-{:else if manager?.val_prepped?.type_id === "sup"}
-  <sup id={manager?.val_prepped?.selector_id}>
-    {@render children()}
-  </sup>
-{:else if manager?.val_prepped?.type_id === "s"}
-  <s id={manager?.val_prepped?.selector_id}>
-    {@render children()}
-  </s>
-{:else if manager?.val_prepped?.type_id === "q"}
-  <q id={manager?.val_prepped?.selector_id}>{set_closurable(manager?.val_prepped?.attributes?.content)}</q>
-{:else if manager?.val_prepped?.type_id === "blockquote"}
-  <blockquote id={manager?.val_prepped?.selector_id}>
-    {@render children()}
-  </blockquote>
-{:else if manager?.val_prepped?.type_id === "table_advanced"}
-  <TableAdvanced manager={manager?.val_prepped?.manager} />
-{:else if manager?.val_prepped?.type_id === "table"}
-  <table id={manager?.val_prepped?.selector_id}>
-    {#if set_closurable(manager?.val_prepped?.attributes?.caption)}
-      <caption>
-        {set_closurable(manager?.val_prepped?.attributes?.caption)}
-      </caption>
-    {/if}
-    {@render children()}
-  </table>
-{:else if manager?.val_prepped?.type_id === "thead"}
-  <thead id={manager?.val_prepped?.selector_id}>
-    {@render children()}
-  </thead>
-{:else if manager?.val_prepped?.type_id === "tbody"}
-  <tbody id={manager?.val_prepped?.selector_id}>
-    {@render children()}
-  </tbody>
-{:else if manager?.val_prepped?.type_id === "tfoot"}
-  <tfoot id={manager?.val_prepped?.selector_id}>
-    {@render children()}
-  </tfoot>
-{:else if manager?.val_prepped?.type_id === "tr"}
-  <tr id={manager?.val_prepped?.selector_id}>
-    {@render children()}
-  </tr>
-{:else if manager?.val_prepped?.type_id === "th"}
-  <th id={manager?.val_prepped?.selector_id}>
-    {@render children()}
-  </th>
-{:else if manager?.val_prepped?.type_id === "td"}
-  <td id={manager?.val_prepped?.selector_id}>
-    {@render children()}
-  </td>
-{:else if manager?.val_prepped?.type_id === "footer"}
-  <footer class="footnotes" id={manager?.val_prepped?.selector_id}>
-    <h2 class="visually_hidden" id="footnote-label">Footnotes</h2>
-    {@render children()}
-  </footer>
-{:else if manager?.val_prepped?.type_id === "image"}
-  <Image manager={manager?.val_prepped?.manager} />
-{:else if manager?.val_prepped?.type_id === "audio"}
-  <Audio manager={manager?.val_prepped?.manager} />
-{:else if manager?.val_prepped?.type_id === "source"}
-  source_tbd
-  <!-- <source
-    id={manager?.val_prepped?.selector_id}
-    media={manager?.val_prepped?.attributes?.is_for_sm_screen ? "(max-width: 465px)" : "(min-width: 464px)"}
-    srcset={src}
-    type={manager?.val_prepped?.attributes?.file_type}
-  /> -->
-{:else if manager?.val_prepped?.type_id === "picture"}
-  picture_tbd
-  <!-- {#if is_image_loading}
-    <div class="img" style="height: 43.5rem; display: grid; place-items: center; max-width: min(100%,50rem);">
-      <LoadingWheel size={8} />
-    </div>
-  {:else if !src}
-    <p>No Image Src</p>
-  {/if}
-  <picture id={manager?.val_prepped?.selector_id} class:is_hidden={is_image_loading}>
-    {@render children()}
-    <img
-      alt={manager?.val_prepped.children.length > 0 ?  manager?.val_prepped?.children?.[0]?.attributes?.alt : null}
-      {src}
-      style="aspect-ratio: auto 1.5; width: 100%; max-width: 65rem; height: auto;"
-    />
-  </picture> -->
-{:else if manager?.val_prepped?.type_id === "ref"}
-  <sup>
-    <a
-      id={manager?.val_prepped?.selector_id}
-      onclick={handle_anchor_click}
-      href={set_closurable(manager?.val_prepped?.attributes?.href)}
-      >{set_closurable(manager?.val_prepped?.attributes?.content)}</a
-    ></sup
-  >
-{:else if manager?.val_prepped?.type_id == "tag"}
-  tag_tbd
-{:else if manager?.val_prepped?.type_id == "code"}
-  <div style="margin-top: .5rem;">
-    <Code manager={manager?.val_prepped?.manager} />
-  </div>
-{:else if manager?.val_prepped?.type_id == "json"}
-  <Json manager={manager?.val_prepped?.manager} />
-{:else if manager?.val_prepped?.type_id === "code_inline"}
-  {#if set_closurable(manager?.val_prepped?.attributes?.content)}
-    <div style="display: inline-flex; align-items: center;">
-      <code id={manager?.val_prepped?.selector_id} class="inline_code"
-        >{set_closurable(manager?.val_prepped?.attributes?.content)}</code
-      ><Button manager={manager?.val_prepped?.copy_button_manager} />
-    </div>
-  {/if}
-{:else if manager?.val_prepped?.type_id === "youtube_video"}
-  <YoutubeVideo manager={manager?.val_prepped?.manager} />
-{:else if manager?.val_prepped?.type_id === "x_post"}
-  <XPost manager={manager?.val_prepped?.manager} />
-{:else if manager?.val_prepped?.type_id === "link"}
-  <Link manager={manager?.val_prepped?.manager}>
-    {@render children()}
-  </Link>
-{:else if manager?.val_prepped?.type_id === "qr"}
-  <Qr manager={manager?.val_prepped?.manager} />
-{:else if manager?.val_prepped?.type_id === "dropdown"}
-  <Dropdown manager={manager?.val_prepped?.manager} />
-{:else if manager?.val_prepped?.type_id === "text_input"}
-  <TextInput manager={manager?.val_prepped?.manager} />
-{:else if manager?.val_prepped?.type_id === "slider"}
-  <Slider manager={manager?.val_prepped?.manager} />
-{:else if manager?.val_prepped?.type_id === "number_input"}
-  <TextInput manager={manager?.val_prepped?.manager} />
-{:else if manager?.val_prepped?.type_id === "number"}
-  <Number manager={manager?.val_prepped?.manager} />
-{:else if manager?.val_prepped?.type_id === "icon_input"}
-  <IconInput manager={manager?.val_prepped?.manager} />
-{:else if manager?.val_prepped?.type_id === "icon"}
-  <Icon manager={manager?.val_prepped?.manager} />
-{:else if manager?.val_prepped?.type_id === "email_address"}
-  <EmailAddress manager={manager?.val_prepped?.manager} />
-{:else if manager?.val_prepped?.type_id === "phone_number"}
-  <PhoneNumber manager={manager?.val_prepped?.manager} />
-{:else if manager?.val_prepped?.type_id === "location_input"}
-  <LocationInput manager={manager?.val_prepped?.manager} />
-{:else if manager?.val_prepped?.type_id === "location"}
-  <Location manager={manager?.val_prepped?.manager} />
-{:else if manager?.val_prepped?.type_id === "variable"}
-  {set_closurable(manager?.val_prepped?.attributes?.content)}
-{:else if manager?.val_prepped?.type_id === "checkbox"}
-  <div style="display: inline-flex;">
-    <Checkbox manager={manager?.val_prepped?.manager} />
-  </div>
-{:else if manager?.val_prepped?.type_id === "file_input"}
-  <FileInput manager={manager?.val_prepped?.manager} />
-{:else if manager?.val_prepped?.type_id === "color_input"}
-  <ColorInput manager={manager?.val_prepped?.manager} />
-{:else if manager?.val_prepped?.type_id === "color"}
-  <div style="display: inline-flex;">
-    <Color manager={manager?.val_prepped?.manager} />
-  </div>
-{:else if manager?.val_prepped?.type_id === "time_input"}
-  <TimeInput manager={manager?.val_prepped?.manager} />
-{:else if manager?.val_prepped?.type_id === "time"}
-  <Time manager={manager?.val_prepped?.manager} />
-{:else if manager?.val_prepped?.type_id === "cron_input"}
-  <CronInput manager={manager?.val_prepped?.manager} />
-{:else if manager?.val_prepped?.type_id === "cron"}
-  <abbr title={cron_to_english(set_closurable(manager?.val_prepped?.attributes?.val))}>
-    {set_closurable(manager?.val_prepped?.attributes?.val)}
-  </abbr>
-{:else if manager?.val_prepped?.type_id === "base_text"}
-  <span
-    role="button"
-    tabindex="0"
-    style="{manager?.val_prepped?.attributes?.text_color
-      ? `color: ${set_closurable_color(manager?.val_prepped?.attributes?.text_color)};`
-      : ''} {manager?.val_prepped?.attributes?.font_size
-      ? `font-size: ${manager?.val_prepped?.attributes?.font_size}rem`
-      : ''}"
-    onclick={() => manager?.open_edit_element_attributes_popover(manager?.val_prepped?.selector_id)}
-    onkeydown={() => manager?.open_edit_element_attributes_popover(manager?.val_prepped?.selector_id)}
-    onpointerenter={() => manager?.set_focused_selector_id(manager?.val_prepped?.selector_id)}
-    onpointercancel={() => manager?.set_focused_selector_id(null)}
-    onpointerleave={() => manager?.set_focused_selector_id(null)}
-  >
-    {set_closurable(manager?.val_prepped?.attributes?.content)}
-  </span>
-{:else if manager?.val_prepped?.type_id === "br"}
-  <br />
-{:else if manager?.val_prepped?.type_id === "spacer"}
-  <Spacer
-    mt={manager?.val_prepped?.attributes?.mt}
-    mb={manager?.val_prepped?.attributes?.mb}
-    ml={manager?.val_prepped?.attributes?.ml}
-    mr={manager?.val_prepped?.attributes?.mr}
-    is_vert={manager?.val_prepped?.attributes?.is_vert}
-    color={manager?.val_prepped?.attributes?.color}
-  />
-{:else if manager?.val_prepped?.type_id === "hr"}
-  <hr id={manager?.val_prepped?.selector_id} />
-{:else if manager?.val_prepped?.type_id === "slot"}
-  <div style="border-radius: 1rem; border: 1px dashed var(--shadow8-t); padding: 1rem;">
-    <h4 class="label">Slot</h4>
-    {#if manager?.val_prepped?.attributes?.val}
-      <p style="margin-top: 0;">{manager?.val_prepped?.attributes?.val}</p>
-    {:else}
-      <p style="margin-top: 0; color: var(--warning-t)">Val attribute not set</p>
-    {/if}
-  </div>
-{:else}
-  <p id={manager?.val_prepped?.selector_id}>{manager?.val_prepped?.type_id} type_not_found</p>
-{/if}
-
-<style>
-  p:not(:first-child) {
-    margin-top: 1rem;
-  }
-  a,
-  p,
-  li,
-  td,
-  th,
-  code,
-  pre,
-  span {
-    overflow-wrap: break-word;
-    word-break: break-word;
-    white-space: normal;
-  }
-</style>