sveltekit-ui 1.0.0

package/src/routes/+layout.svelte

@@ -0,0 +1,176 @@
+<script>
+  import "$lib/style.css"
+  import Logo from "../notlib/assets/static/Logo/index.svelte"
+  import Layout from "$lib/Components/Layout/index.svelte"
+  import { create_layout_manager } from "$lib/Components/Layout/index.svelte.js"
+  import Button from "$lib/Components/Button/index.svelte"
+  import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
+  import Checkbox from "$lib/Components/Checkbox/index.svelte"
+  import { onNavigate, invalidateAll } from "$app/navigation"
+  import { page } from "$app/state"
+
+  onNavigate(async () => {
+    // testiing something tbd
+    await invalidateAll()
+    if (!document?.startViewTransition) {
+      return
+    }
+    return new Promise((fulfil) => {
+      document.startViewTransition(() => new Promise(fulfil))
+    })
+  })
+
+  let layout_manager = create_layout_manager({
+    favicons: {
+      favicon: "/favicon.svg",
+      favicon_inactive: "/favicon-inactive.svg",
+    },
+  })
+
+  let { children } = $props()
+
+  const components = [
+    { name: "Alert", key: "alert" },
+    { name: "Audio", key: "audio" },
+    { name: "Audio Editor", key: "audio_editor" },
+    { name: "Auth Code Input", key: "auth_code_input" },
+    { name: "Breadcrumbs", key: "breadcrumbs" },
+    { name: "Button", key: "button" },
+    { name: "Chart", key: "chart" },
+    { name: "Checkbox", key: "checkbox" },
+    { name: "Code", key: "code" },
+    { name: "Color", key: "color" },
+    { name: "Color Input", key: "color_input" },
+    { name: "Confetti", key: "confetti" },
+    { name: "Content", key: "content" },
+    { name: "Content Input", key: "content_input" },
+    { name: "Cron Input", key: "cron_input" },
+    { name: "Dropdown", key: "dropdown" },
+    { name: "File Input", key: "file_input" },
+    { name: "Function Input", key: "function_input" },
+    { name: "Icon", key: "icon" },
+    { name: "Icon Input", key: "icon_input" },
+    { name: "Image", key: "image" },
+    { name: "Image Editor", key: "image_editor" },
+    { name: "ImageSlider", key: "image_slider" },
+    { name: "InfoBox", key: "info_box" },
+    { name: "Json", key: "json" },
+    { name: "LabeledItem", key: "labeled_item" },
+    { name: "Layout", key: "layout" },
+    { name: "Link", key: "link" },
+    { name: "LoadingWheel", key: "loading_wheel" },
+    { name: "Location", key: "location" },
+    { name: "Location Input", key: "location_input" },
+    { name: "Number", key: "number" },
+    { name: "Popover", key: "popover" },
+    { name: "Qr", key: "qr" },
+    { name: "Slider", key: "slider" },
+    { name: "Spacer", key: "spacer" },
+    { name: "StoragePicker", key: "storage_picker" },
+    { name: "Table Advanced", key: "table_advanced" },
+    { name: "Tag", key: "tag" },
+    { name: "Text Array Input", key: "text_array_input" },
+    { name: "Text Input", key: "text_input" },
+    { name: "Time", key: "time" },
+    { name: "Time Input", key: "time_input" },
+    { name: "Tooltip", key: "tooltip" },
+    { name: "TransparentBackground", key: "transparent_background" },
+    { name: "XPost", key: "x_post" },
+    { name: "XFollow", key: "x_follow" },
+    { name: "Youtube Video", key: "youtube_video" },
+    // { name: "Conditions Input TBD", key: "conditions_input" },
+    // { name: "Text Array TBD", key: "text_array" },
+    // { name: "Array TBD", key: "array" },
+  ]
+
+  let nav_component_button_managers = components.map((h) =>
+    create_button_manager({
+      type: "soft",
+      l: 3,
+      c: 2,
+      text: h?.name,
+      text_align: "left",
+      selected_type: () => (page.params.component === h?.key ? "selected" : null),
+      on_click: () => layout_manager.goto_path(`/${h?.key}`),
+    })
+  )
+
+  // let show_confetti_button_manager = create_button_manager({
+  //   text: "Show Confetti",
+  //   is_compressed: true,
+  //   on_click: () => layout_manager?.confetti_manager.show_confetti(),
+  // })
+</script>
+
+<Layout manager={layout_manager}>
+  {#snippet nav_bar_logo()}
+    <Logo />
+  {/snippet}
+  {#snippet app_nav_bar_logo()}
+    <Logo />
+  {/snippet}
+  {#snippet nav_bar_extra()}
+    <div style="display: flex; align-iems: center; gap: .5rem;">
+      <!-- <TextInput placeholder="Search" /> -->
+      <!-- <Button manager={alert_button_manager} /> -->
+      <!-- <Button manager={show_confetti_button_manager} /> -->
+      <Checkbox manager={layout_manager?.dark_theme_manager} />
+    </div>
+  {/snippet}
+  {#snippet sub_bar()}
+    <!-- <div>
+      <p style="background-color: red;">Nav Bar slot</p>
+    </div> -->
+  {/snippet}
+  {#snippet full_nav()}
+    <div style="margin: 1rem;">
+      <h4>Components</h4>
+      {#if Array.isArray(nav_component_button_managers) && nav_component_button_managers.length > 0}
+        {#each nav_component_button_managers as nav_button_manager}
+          <div style={nav_button_manager?.selected_type == "selected" ? "view-transition-name: test;" : ""}>
+            <Button manager={nav_button_manager} />
+          </div>
+        {/each}
+      {:else}
+        Error getting nav
+      {/if}
+    </div>
+  {/snippet}
+  {#snippet content()}
+    {#if children}
+      {@render children()}
+    {/if}
+  {/snippet}
+  <!-- {#snippet additional()}
+  {/snippet} -->
+</Layout>
+
+<style>
+  @font-face {
+    font-family: "Proxima Vara";
+    src:
+      local(""),
+      url("/fonts/ProximaVara.woff2") format("woff2 supports variations"),
+      url("/fonts/ProximaVara.woff2") format("woff2-variations"),
+      url("/fonts/ProximaVara.woff") format("woff-variations");
+    font-weight: 100 900;
+    font-stretch: 50% 100%;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: "Roboto Serif";
+    src:
+      url("/fonts/RobotoSerif-VariableFont.woff2") format("woff2 supports variations"),
+      url("/fonts/RobotoSerif-VariableFont.woff2") format("woff2-variations");
+    font-weight: 100 1000;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: "Quicksand";
+    src:
+      url("/fonts/Quicksand-VariableFont.woff2") format("woff2 supports variations"),
+      url("/fonts/Quicksand-VariableFont.woff2") format("woff2-variations");
+    font-weight: 100 1000;
+    font-display: swap;
+  }
+</style>

package/src/routes/+page.svelte

@@ -0,0 +1,83 @@
+<script>
+  import Button from "$lib/Components/Button/index.svelte"
+  import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
+  import { goto } from "$app/navigation"
+  import Code from "$lib/Components/Code/index.svelte"
+  import { create_code_manager } from "$lib/Components/Code/index.svelte.js"
+  import { definitions, docs_definition_to_sample_code, docs_overview_code_sample } from "$lib/client/docs/index.js"
+  import { copy_to_clipboard } from "$lib/client/index.js"
+
+  let button_manager = create_button_manager({
+    text: "Visit Docs",
+    mt: 2,
+    support_icon: "arrow_tailed",
+    on_click: () => goto("/button"),
+  })
+
+  let overview_sample_code_manager = create_code_manager({
+    language: "svelte",
+    content: docs_overview_code_sample,
+  })
+
+  const overview_intro = `Each component can be combined into a more complex component. This is intended for sveltekit projects. The whole "tree" of docs should be initialized at the parent-most level which is likely in the <script> tags of a +page.svelte file. For a .svelte page or custom component you might combine components in a way such as the following:`
+
+  let copy_all_docs_button_manager = create_button_manager({
+    type: "outlined",
+    text: "Copy All Docs",
+    is_compressed: true,
+    is_success_animation: true,
+    mt: 2,
+    support_icon: "clipboard",
+    on_click: () => {
+      const overview = `${overview_intro}
+      
+${docs_overview_code_sample}
+
+below are the docs for each component individually
+
+`
+
+      let docs_prepped = {}
+      for (let [key, definition] of Object.entries(definitions)) {
+        let sample_code = docs_definition_to_sample_code(definition)
+        docs_prepped[key] = {
+          ...definition,
+          sample_code: sample_code,
+        }
+      }
+      copy_to_clipboard(overview + JSON.stringify(docs_prepped))
+    },
+  })
+</script>
+
+<div class="container">
+  <h1>Not currently available for public Use</h1>
+  <p>
+    As of January, 2025, I have been working on these components for a few years one by one. As a perfectionist I am
+    frequently making breaking changes.
+  </p>
+  <p>
+    I have made some basic docs so far but currently still have the package set to private on npm but may release a
+    public version in the coming months or make it available to www.contibase.com users only. tbd.
+  </p>
+  <p>{overview_intro}</p>
+  <br />
+  <Code manager={overview_sample_code_manager} />
+  <p>Explore the docs for details on each individual component</p>
+  <Button manager={button_manager} />
+  <Button manager={copy_all_docs_button_manager} />
+  <p>
+    Questions? Email <a href="mailto:info@sveltekit-ui.com">info@sveltekit-ui.com</a>
+  </p>
+</div>
+
+<style>
+  .container {
+    margin: auto;
+    padding: 2rem;
+    max-width: 60rem;
+  }
+  p {
+    margin-top: 2rem;
+  }
+</style>

package/src/routes/[component]/+page.svelte

@@ -0,0 +1,167 @@
+<script>
+  import { definitions } from "$lib/client/docs/index.js"
+  import DocsDefinition from "./Showcase/DocsDefinition/index.svelte"
+  import AlertShowcase from "./Showcase/Alert/index.svelte"
+  import AudioShowcase from "./Showcase/Audio/index.svelte"
+  import AudioEditorShowcase from "./Showcase/AudioEditor/index.svelte"
+  import AuthCodeInputShowcase from "./Showcase/AuthCodeInput/index.svelte"
+  import BreadcrumbsShowcase from "./Showcase/Breadcrumbs/index.svelte"
+  import ButtonShowcase from "./Showcase/Button/index.svelte"
+  import ChartShowcase from "./Showcase/Chart/index.svelte"
+  import CheckboxShowcase from "./Showcase/Checkbox/index.svelte"
+  import CodeShowcase from "./Showcase/Code/index.svelte"
+  import ColorInputShowcase from "./Showcase/ColorInput/index.svelte"
+  import ColorShowcase from "./Showcase/Color/index.svelte"
+  import ConfettiShowcase from "./Showcase/Confetti/index.svelte"
+  import ContentShowcase from "./Showcase/Content/index.svelte"
+  import ContentInputShowcase from "./Showcase/ContentInput/index.svelte"
+  import CronInputShowcase from "./Showcase/CronInput/index.svelte"
+  import DropdownShowcase from "./Showcase/Dropdown/index.svelte"
+  import FileInputShowcase from "./Showcase/FileInput/index.svelte"
+  import FunctionInputShowcase from "./Showcase/FunctionInput/index.svelte"
+  import IconInputShowcase from "./Showcase/IconInput/index.svelte"
+  import IconShowcase from "./Showcase/Icon/index.svelte"
+  import ImageShowcase from "./Showcase/Image/index.svelte"
+  import ImageEditorShowcase from "./Showcase/ImageEditor/index.svelte"
+  import ImageSliderShowcase from "./Showcase/ImageSlider/index.svelte"
+  import InfoBoxShowcase from "./Showcase/InfoBox/index.svelte"
+  import JsonShowcase from "./Showcase/Json/index.svelte"
+  import LabeledItemShowcase from "./Showcase/LabeledItem/index.svelte"
+  import LinkShowcase from "./Showcase/Link/index.svelte"
+  import LoadingWheelShowcase from "./Showcase/LoadingWheel/index.svelte"
+  import LocationInputShowcase from "./Showcase/LocationInput/index.svelte"
+  import LocationShowcase from "./Showcase/Location/index.svelte"
+  import NumberShowcase from "./Showcase/Number/index.svelte"
+  import PopoverShowcase from "./Showcase/Popover/index.svelte"
+  import QrShowcase from "./Showcase/Qr/index.svelte"
+  import SliderShowcase from "./Showcase/Slider/index.svelte"
+  import SpacerShowcase from "./Showcase/Spacer/index.svelte"
+  import StoragePickerShowcase from "./Showcase/StoragePicker/index.svelte"
+  import TableAdvancedShowcase from "./Showcase/TableAdvanced/index.svelte"
+  import TagShowcase from "./Showcase/Tag/index.svelte"
+  import TextArrayInputShowcase from "./Showcase/TextArrayInput/index.svelte"
+  import TextInputShowcase from "./Showcase/TextInput/index.svelte"
+  import TimeInputShowcase from "./Showcase/TimeInput/index.svelte"
+  import TimeShowcase from "./Showcase/Time/index.svelte"
+  import TooltipShowcase from "./Showcase/Tooltip/index.svelte"
+  import TransparentBackgroundShowcase from "./Showcase/TransparentBackground/index.svelte"
+  import XPostShowcase from "./Showcase/XPost/index.svelte"
+  import XFollowShowcase from "./Showcase/XFollow/index.svelte"
+  import YoutubeVideoShowcase from "./Showcase/YoutubeVideo/index.svelte"
+  import { page } from "$app/state"
+  // tbd
+  // import TextArrayShowcase from "./Showcase/tbd/TextArray/index.svelte"
+  // import ConditionsInputShowcase from "./Showcase/Conditions/index.svelte"
+
+  let formatted_pathname = $derived(
+    (page.params.component ?? "")
+      .replace(/^\/|\/$/g, "")
+      .replace(/_/g, " ")
+      .replace(/-/g, " ")
+      .replace(/\b\w/g, (char) => char.toUpperCase())
+  )
+</script>
+
+<div style="margin: 0 1rem;">
+  <h2>{formatted_pathname} Showcase</h2>
+  {#if page?.params?.component == "alert"}
+    <AlertShowcase />
+  {:else if page?.params?.component == "audio"}
+    <AudioShowcase />
+  {:else if page?.params?.component == "audio_editor"}
+    <AudioEditorShowcase />
+  {:else if page?.params?.component == "auth_code_input"}
+    <AuthCodeInputShowcase />
+  {:else if page?.params?.component == "breadcrumbs"}
+    <BreadcrumbsShowcase />
+  {:else if page?.params?.component == "button"}
+    <ButtonShowcase />
+  {:else if page?.params?.component == "chart"}
+    <ChartShowcase />
+  {:else if page?.params?.component == "checkbox"}
+    <CheckboxShowcase />
+  {:else if page?.params?.component == "code"}
+    <CodeShowcase />
+  {:else if page?.params?.component == "color"}
+    <ColorShowcase />
+  {:else if page?.params?.component == "color_input"}
+    <ColorInputShowcase />
+  {:else if page?.params?.component == "confetti"}
+    <ConfettiShowcase />
+  {:else if page?.params?.component == "content"}
+    <ContentShowcase />
+  {:else if page?.params?.component == "content_input"}
+    <ContentInputShowcase />
+  {:else if page?.params?.component == "cron_input"}
+    <CronInputShowcase />
+  {:else if page?.params?.component == "dropdown"}
+    <DropdownShowcase />
+  {:else if page?.params?.component == "file_input"}
+    <FileInputShowcase />
+  {:else if page?.params?.component == "function_input"}
+    <FunctionInputShowcase />
+  {:else if page?.params?.component == "icon"}
+    <IconShowcase />
+  {:else if page?.params?.component == "icon_input"}
+    <IconInputShowcase />
+  {:else if page?.params?.component == "image"}
+    <ImageShowcase />
+  {:else if page?.params?.component == "image_editor"}
+    <ImageEditorShowcase />
+  {:else if page?.params?.component == "image_slider"}
+    <ImageSliderShowcase />
+  {:else if page?.params?.component == "info_box"}
+    <InfoBoxShowcase />
+  {:else if page?.params?.component == "json"}
+    <JsonShowcase />
+  {:else if page?.params?.component == "labeled_item"}
+    <LabeledItemShowcase />
+  {:else if page?.params?.component == "layout"}
+    <p>used for parent of entire site such as www.sveltekit-ui.com</p>
+  {:else if page?.params?.component == "link"}
+    <LinkShowcase />
+  {:else if page?.params?.component == "loading_wheel"}
+    <LoadingWheelShowcase />
+  {:else if page?.params?.component == "location"}
+    <LocationShowcase />
+  {:else if page?.params?.component == "location_input"}
+    <LocationInputShowcase />
+  {:else if page?.params?.component == "number"}
+    <NumberShowcase />
+  {:else if page?.params?.component == "popover"}
+    <PopoverShowcase />
+  {:else if page?.params?.component == "qr"}
+    <QrShowcase />
+  {:else if page?.params?.component == "slider"}
+    <SliderShowcase />
+  {:else if page?.params?.component == "spacer"}
+    <SpacerShowcase />
+  {:else if page?.params?.component == "storage_picker"}
+    <StoragePickerShowcase />
+  {:else if page?.params?.component == "table_advanced"}
+    <TableAdvancedShowcase />
+  {:else if page?.params?.component == "tag"}
+    <TagShowcase />
+  {:else if page?.params?.component == "text_array_input"}
+    <TextArrayInputShowcase />
+  {:else if page?.params?.component == "text_input"}
+    <TextInputShowcase />
+  {:else if page?.params?.component == "time"}
+    <TimeShowcase />
+  {:else if page?.params?.component == "time_input"}
+    <TimeInputShowcase />
+  {:else if page?.params?.component == "tooltip"}
+    <TooltipShowcase />
+  {:else if page?.params?.component == "transparent_background"}
+    <TransparentBackgroundShowcase />
+  {:else if page?.params?.component == "x_post"}
+    <XPostShowcase />
+  {:else if page?.params?.component == "x_follow"}
+    <XFollowShowcase />
+  {:else if page?.params?.component == "youtube_video"}
+    <YoutubeVideoShowcase />
+  {/if}
+  {#if definitions?.[page?.params?.component]}
+    <DocsDefinition definition={definitions?.[page?.params?.component]} />
+  {/if}
+</div>

package/src/routes/[component]/Showcase/Alert/index.svelte

@@ -0,0 +1,26 @@
+<script>
+  import Alert from "$lib/Components/Alert/index.svelte"
+  import { create_alert_manager } from "$lib/Components/Alert/index.svelte.js"
+  import Button from "$lib/Components/Button/index.svelte"
+  import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
+
+  let manager = create_alert_manager()
+
+  let count = $state(0)
+
+  function test_add() {
+    manager.add_alert(`Test ${count}`, "Lorem ipsum", "check")
+    count += 1
+  }
+
+  let button_manager = create_button_manager({
+    text: "Trigger Alert",
+    is_compressed: true,
+    on_click: () => test_add(),
+  })
+</script>
+
+<div>
+  <Alert {manager} />
+  <Button manager={button_manager} />
+</div>

package/src/routes/[component]/Showcase/Audio/index.svelte

@@ -0,0 +1,86 @@
+<script>
+  import Audio from "$lib/Components/Audio/index.svelte"
+  import { create_audio_manager } from "$lib/Components/Audio/index.svelte.js"
+
+  let audio_manager = create_audio_manager({
+    src: "https://firmcmccxfdethzdexal.supabase.co/storage/v1/object/public/site/test/john-harrison-invents-naval-longitude-clock.mp3",
+  })
+
+  let audio_manager1 = create_audio_manager({
+    title: "Dummy Img src",
+    artist: "Test2",
+    album: "Test3",
+    src: "https://firmcmccxfdethzdexal.supabase.co/storage/v1/object/public/site/test/john-harrison-invents-naval-longitude-clock.mp3",
+    type: "audio/mpeg",
+    image_src: "https://dummyimage.com/256x256",
+    image_type: "image/png",
+  })
+
+  let audio_manager2 = create_audio_manager({
+    title: "large Dummy Img src",
+    artist: "Test2",
+    album: "Test3",
+    src: "https://firmcmccxfdethzdexal.supabase.co/storage/v1/object/public/site/test/john-harrison-invents-naval-longitude-clock.aac",
+    type: "audio/aac",
+    image_src: "https://dummyimage.com/1000x400",
+    image_type: "image/png",
+  })
+
+  let audio_manager3 = create_audio_manager({
+    ui_type: "short",
+    title: "Some Title",
+    artist: null,
+    album: "Test Album Name",
+    src: "https://firmcmccxfdethzdexal.supabase.co/storage/v1/object/public/site/test/john-harrison-invents-naval-longitude-clock.mp3",
+    type: "audio/aac",
+    image_src: "https://dummyimage.com/1000x400",
+    image_type: "image/png",
+  })
+
+  let audio_manager4 = create_audio_manager({
+    ui_type: "square",
+    title: "Some Title",
+    artist: "Test Artist Name",
+    album: null,
+    src: "https://firmcmccxfdethzdexal.supabase.co/storage/v1/object/public/site/test/john-harrison-invents-naval-longitude-clock.mp3",
+    type: "audio/aac",
+    image_src: "https://dummyimage.com/1000x1000",
+    image_type: "image/png",
+  })
+</script>
+
+<div class="grid">
+  <div>
+    <h4>Example</h4>
+    <Audio manager={audio_manager} />
+  </div>
+  <div>
+    <h4>Example1</h4>
+    <Audio manager={audio_manager1} />
+  </div>
+  <div>
+    <h4>Example 2</h4>
+    <Audio manager={audio_manager2} />
+  </div>
+  <div>
+    <h4>Null Artist Short</h4>
+    <Audio manager={audio_manager3} />
+  </div>
+  <div>
+    <h4>1000x1000 Album and square</h4>
+    <div>
+      <Audio manager={audio_manager4} />
+    </div>
+  </div>
+</div>
+
+<style>
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(clamp(20%, 40rem, 100%), 1fr));
+    margin: 0.5rem;
+  }
+  .grid div {
+    width: 40rem;
+  }
+</style>

package/src/routes/[component]/Showcase/AudioEditor/index.svelte

@@ -0,0 +1,93 @@
+<script>
+  import Button from "$lib/Components/Button/index.svelte"
+  import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
+  import AudioEditor from "$lib/Components/AudioEditor/index.svelte"
+  import { create_audio_editor_manager } from "$lib/Components/AudioEditor/index.svelte.js"
+
+  let account_storage = [
+    {
+      id: "jvcbugonkudgeufghkup",
+      account_id: "idredbvbbogpofinurea",
+      folder_path: ["pages", "efvhgvebjwkdjslcxmcj"],
+      file_name: "mount_etna_eruption",
+      file_extension: "webp",
+      mime_type: "image/webp",
+      size_kb: 102,
+      metadata: {},
+      is_temporary: false,
+      set_to_delete_initiated_at: null,
+      db_epoch_updated: 1709608695,
+      db_epoch_created: 1709608695,
+      is_public: false,
+      transcription: null,
+    },
+    {
+      id: "iszqtqzmcpkjggrdbeaw",
+      account_id: "idredbvbbogpofinurea",
+      folder_path: ["pages", "efvhgvebjwkdjslcxmcj"],
+      file_name: "mount_etna_eruption_album",
+      file_extension: "webp",
+      mime_type: "image/webp",
+      size_kb: 69,
+      metadata: {},
+      is_temporary: false,
+      set_to_delete_initiated_at: null,
+      db_epoch_updated: 1709608712,
+      db_epoch_created: 1709608712,
+      is_public: false,
+      transcription: null,
+    },
+    {
+      id: "qlstfmjhyhfyjzuceeyd",
+      account_id: "idredbvbbogpofinurea",
+      folder_path: ["temp", "audio"],
+      file_name: "newaudio",
+      file_extension: "mp3",
+      mime_type: "audio/mpeg",
+      size_kb: 2041,
+      metadata: null,
+      is_temporary: true,
+      set_to_delete_initiated_at: null,
+      db_epoch_updated: 1709608750,
+      db_epoch_created: 1709608750,
+      is_public: false,
+      transcription:
+        "The Day the Earth Roared: Mount Etna's 1669 Eruption When Etna Woke Up: The 1669 Eruption. Mount Etna, Europe's largest and most active volcano, has a history of lighting up the sky and shaking the ground. But on March 8, 1669, it threw quite the fiery tantrum, beginning one of its most historic eruptions. The Prelude to Pyrotechnics. Just like a grumpy old giant waking up on the wrong side of the bed, Mount Etna started rumbling, warning the Sicilians that something big was coming. Then, boom! Lava began oozing out, and things got a little too hot to handle. A River of Fire. Imagine a river, but instead of water, it's red-hot lava. That's what the people of Catania saw as Etna's lava flowed for miles, eventually knocking on the city's door like an unwanted guest. Catania's Creative Defense. The citizens of Catania didn't just sit back and roast marshmallows. They got creative, attempting to divert the lava flow. Spoiler alert: Lava's not the best listener, and it didn't really go as planned. The Aftermath. After months of fiery spectacle, Etna finally calmed down, but not before reshaping the landscape. New valleys were created, and Catania got a makeover it never asked for. Fun Fact Time! Did you know that this eruption lasted until July 15, 1669? That's one long, hot summer. Etna's Legacy. Mount Etna's 1669 eruption is a reminder of the raw power of nature. It's been throwing lava parties for thousands of years, and it's not about to stop. So, if you're visiting Sicily and Etna starts to grumble, maybe don't wear your flip-flops. Mount Etna's 1669 eruption was truly a historic event, showing us that nature is always the boss. And while Etna might not erupt with such drama every day, it's still puffing away, reminding us that our planet is an ever-changing canvas. ",
+    },
+    {
+      id: "pvyrluumkllptftrehjv",
+      account_id: "idredbvbbogpofinurea",
+      folder_path: ["pages", "efvhgvebjwkdjslcxmcj"],
+      file_name: "the_day_the_earth_roared_mount_etnas_1669_eruption",
+      file_extension: "mp3",
+      mime_type: "audio/mpeg",
+      size_kb: 2041,
+      metadata: {},
+      is_temporary: false,
+      set_to_delete_initiated_at: null,
+      db_epoch_updated: 1709608763,
+      db_epoch_created: 1709608763,
+      is_public: false,
+      transcription: null,
+    },
+  ]
+
+  let audio_editor_manager = create_audio_editor_manager({
+    storage: account_storage,
+  })
+
+  let generate_audio_button_manager = create_button_manager({
+    type: "outlined",
+    is_compressed: true,
+    text: "Generate Audio",
+    popover_target: () => `popover_${audio_editor_manager?.popover_manager?.id}`,
+    on_click: () => {
+      audio_editor_manager.seed()
+    },
+  })
+</script>
+
+<div>
+  <Button manager={generate_audio_button_manager} />
+  <AudioEditor manager={audio_editor_manager} />
+</div>

package/src/routes/[component]/Showcase/AuthCodeInput/index.svelte

@@ -0,0 +1,13 @@
+<script>
+  import AuthCodeInput from "$lib/Components/AuthCodeInput/index.svelte"
+  import { create_auth_code_input_manager } from "$lib/Components/AuthCodeInput/index.svelte.js"
+
+  let code_manager = create_auth_code_input_manager({
+    on_change: (input) => console.log("on_change", input),
+    on_sixth: (input) => console.log("on_sixth", input),
+  })
+</script>
+
+<div style="width: fit-content;">
+  <AuthCodeInput manager={code_manager} />
+</div>