sveltekit-ui 1.0.0

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

@@ -0,0 +1,98 @@
+<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

@@ -0,0 +1,94 @@
+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

@@ -0,0 +1,471 @@
+<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 Self from "./index.svelte"
+  import { format_date, set_closurable_color, set_closurable, cron_to_english } from "$lib/client/index.js"
+
+  let { manager, overall_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} {overall_manager} />
+    {/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} {overall_manager} />
+      {/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} {overall_manager} />
+      {/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} {overall_manager} />
+        {/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} {overall_manager} />
+          {/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} {overall_manager} />
+                  {/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?.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 === "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 === "pre"}
+  <pre id={manager?.val_prepped?.selector_id}>
+    {@render children()}
+  </pre>
+{: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={() => overall_manager?.open_edit_element_attributes_popover(manager?.val_prepped?.selector_id)}
+    onkeydown={() => overall_manager?.open_edit_element_attributes_popover(manager?.val_prepped?.selector_id)}
+    onpointerenter={() => overall_manager?.set_focused_selector_id(manager?.val_prepped?.selector_id)}
+    onpointercancel={() => overall_manager?.set_focused_selector_id(null)}
+    onpointerleave={() => overall_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 === "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;
+  }
+</style>