<script lang="ts">
  let {
    assetsPath = '/',
    onAiMounted = () => {},
    onArtboardChange = () => {},
    /* taggedText = { text: {}, htext: {} },
    debugTaggedText = false, */
    artboardWidth = $bindable(undefined),
  } = $props();
  import { onMount, untrack } from 'svelte';
  let aiBox: HTMLElement | undefined;
  let screenWidth = $state(0);
  let aiBoxWidth = $derived(artboardWidth ?? screenWidth);
  let activeArtboard: HTMLElement | undefined = $state(undefined);
  onMount(() => {
    onAiMounted();
  });
  $effect(() => {
    if (aiBoxWidth) {
      const currentArtboard = (aiBox as HTMLElement).querySelectorAll(
        '.g-artboard'
      )[0] as HTMLElement;
      if (currentArtboard?.id !== activeArtboard?.id) {
        activeArtboard = untrack(() => currentArtboard);
        onArtboardChange(activeArtboard);
      }
    }
  });
</script>

<div
  id="g-manor_xl-box"
  class="ai2svelte"
  bind:this={aiBox}
  bind:clientWidth={aiBoxWidth}
>
  <!-- Artboard: xl -->
  <div
    id="g-manor_xl-xl"
    class="g-artboard"
    style="aspect-ratio: 1.93548387096774;"
    data-aspect-ratio="1.935"
    data-min-width="0"
  >
    <div
      id="g-manor_xl-xl-img"
      class="g-manor_xl-xl-img g-aiImg"
      alt="asdf"
      style="background-image: url({assetsPath.replace(
        new RegExp('/([^/.]+)$'),
        '/$1/'
      ) || '/'}images/graphics/manor_xl-xl.jpg);"
    ></div>
  </div>
</div>

<!-- End ai2svelte - 2026-02-15 17:58 -->

<!-- Generated by ai2svelte v1.0.3 - 2026-02-15 17:58 -->
<!-- ai file: manor_xl.ai -->
<style lang="scss">
  #g-manor_xl-box,
  #g-manor_xl-box .g-artboard {
    margin: 0 auto;
  }
  #g-manor_xl-box p {
    margin: 0;
  }
  #g-manor_xl-box .g-aiAbs {
    position: absolute;
  }
  #g-manor_xl-box .g-aiImg {
    position: absolute;
    top: 0;
    display: block;
    width: 100% !important;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
  }
  #g-manor_xl-box .g-aiSymbol {
    position: absolute;
    box-sizing: border-box;
  }
  #g-manor_xl-box .g-aiPointText p {
    white-space: nowrap;
  }
  #g-manor_xl-box.g-aiPointText p {
    white-space: nowrap;
  }
  #g-manor_xl-box {
    width: 100%;
    container-type: inline-size;
    @container (min-width:0px) {
      #g-manor_xl-xl {
        display: block !important;
      }
    }
  }
  #g-manor_xl-xl {
    position: relative;
    overflow: hidden;
    display: none;
  }

  /* Custom CSS */
</style>
