@adsterra-ad/svelte 0.1.0

package/dist/index.js

@@ -0,0 +1,329 @@
+// src/index.ts
+import { configureAds } from "@adsterra-ad/core";
+
+// src/AdBanner.svelte
+import "svelte/internal/disclose-version";
+import "svelte/internal/flags/legacy";
+import * as $ from "svelte/internal/client";
+import { onMount } from "svelte";
+import { buildSrcDoc, createBannerId, resolveAdConfig } from "@adsterra-ad/core";
+var root_2 = $.from_html(`<span> </span>`);
+var root_3 = $.from_html(`<span> </span>`);
+var root_1 = $.from_html(`<div><!> <div data-testid="ad-banner"><iframe title="Advertisement" frameborder="0" scrolling="no" sandbox="allow-scripts allow-forms allow-same-origin allow-popups allow-modals"></iframe></div> <!></div>`);
+function AdBanner($$anchor, $$props) {
+  $.push($$props, false);
+  let format = $.prop($$props, "format", 8);
+  let provider = $.prop($$props, "provider", 8, "adsterra");
+  let adKey = $.prop($$props, "adKey", 8, "");
+  let className = $.prop($$props, "className", 8, "");
+  let adLabel = $.prop($$props, "adLabel", 8, "Advertisement");
+  let showAdLabel = $.prop($$props, "showAdLabel", 8, true);
+  let adLabelPosition = $.prop($$props, "adLabelPosition", 8, "top-left");
+  let onLoad = $.prop($$props, "onLoad", 24, () => void 0);
+  let onError = $.prop($$props, "onError", 24, () => void 0);
+  const bannerId = createBannerId();
+  let activeProvider = $.mutable_source(provider());
+  let adLoaded = $.mutable_source(false);
+  let adFailed = $.mutable_source(false);
+  let config = $.mutable_source(resolveAdConfig(format(), adKey() || void 0));
+  let iframeSrcDoc = $.mutable_source("");
+  let wrapperStyle = $.mutable_source("");
+  let topLabel = $.mutable_source(false);
+  let bottomLabel = $.mutable_source(false);
+  let labelSpacing = $.mutable_source("");
+  let labelAlign = $.mutable_source("");
+  let visibilityStyle = $.mutable_source("");
+  const handleMessage = (event) => {
+    const data = event.data;
+    if (!data || data.bannerId !== bannerId) return;
+    if (data.type === "ad-load-success") {
+      $.set(adLoaded, true);
+      onLoad()?.();
+      return;
+    }
+    if (data.type === "ad-load-error") {
+      $.set(adFailed, true);
+      onError()?.();
+    }
+  };
+  onMount(() => {
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  });
+  $.legacy_pre_effect(() => ($.deep_read_state(provider()), $.get(activeProvider)), () => {
+    if (provider() !== $.get(activeProvider)) $.set(activeProvider, provider());
+  });
+  $.legacy_pre_effect(
+    () => (resolveAdConfig, $.deep_read_state(format()), $.deep_read_state(adKey())),
+    () => {
+      $.set(config, resolveAdConfig(format(), adKey() || void 0));
+    }
+  );
+  $.legacy_pre_effect(
+    () => (buildSrcDoc, $.deep_read_state(format()), $.get(activeProvider), $.get(config)),
+    () => {
+      $.set(iframeSrcDoc, buildSrcDoc({
+        format: format(),
+        provider: $.get(activeProvider),
+        config: $.get(config),
+        bannerId
+      }));
+    }
+  );
+  $.legacy_pre_effect(() => $.deep_read_state(adLabelPosition()), () => {
+    $.set(wrapperStyle, `display:inline-flex;flex-direction:column;align-items:${adLabelPosition().endsWith("left") ? "flex-start" : adLabelPosition().endsWith("right") ? "flex-end" : "center"};`);
+  });
+  $.legacy_pre_effect(
+    () => ($.deep_read_state(showAdLabel()), $.deep_read_state(adLabelPosition())),
+    () => {
+      $.set(topLabel, showAdLabel() && adLabelPosition().startsWith("top"));
+    }
+  );
+  $.legacy_pre_effect(
+    () => ($.deep_read_state(showAdLabel()), $.deep_read_state(adLabelPosition())),
+    () => {
+      $.set(bottomLabel, showAdLabel() && adLabelPosition().startsWith("bottom"));
+    }
+  );
+  $.legacy_pre_effect(() => ($.get(topLabel), $.get(bottomLabel)), () => {
+    $.set(labelSpacing, $.get(topLabel) ? "margin-bottom:4px;" : $.get(bottomLabel) ? "margin-top:4px;" : "");
+  });
+  $.legacy_pre_effect(() => $.deep_read_state(adLabelPosition()), () => {
+    $.set(labelAlign, `text-align:${adLabelPosition().endsWith("left") ? "left" : adLabelPosition().endsWith("right") ? "right" : "center"};width:100%;`);
+  });
+  $.legacy_pre_effect(() => $.get(adLoaded), () => {
+    $.set(visibilityStyle, $.get(adLoaded) ? "opacity:1;transform:scale(1);" : "opacity:0;transform:scale(0.95);pointer-events:none;position:absolute;width:0;height:0;overflow:hidden;");
+  });
+  $.legacy_pre_effect_reset();
+  $.init();
+  var fragment = $.comment();
+  var node = $.first_child(fragment);
+  {
+    var consequent_2 = ($$anchor2) => {
+      var div = root_1();
+      var node_1 = $.child(div);
+      {
+        var consequent = ($$anchor3) => {
+          var span = root_2();
+          var text = $.child(span, true);
+          $.reset(span);
+          $.template_effect(() => {
+            $.set_style(span, `font-size:10px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:#9ca3af;${$.get(labelSpacing) ?? ""}${$.get(labelAlign) ?? ""}`);
+            $.set_text(text, adLabel());
+          });
+          $.append($$anchor3, span);
+        };
+        $.if(node_1, ($$render) => {
+          if ($.get(topLabel)) $$render(consequent);
+        });
+      }
+      var div_1 = $.sibling(node_1, 2);
+      var iframe = $.child(div_1);
+      $.reset(div_1);
+      var node_2 = $.sibling(div_1, 2);
+      {
+        var consequent_1 = ($$anchor3) => {
+          var span_1 = root_3();
+          var text_1 = $.child(span_1, true);
+          $.reset(span_1);
+          $.template_effect(() => {
+            $.set_style(span_1, `font-size:10px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:#9ca3af;${$.get(labelSpacing) ?? ""}${$.get(labelAlign) ?? ""}`);
+            $.set_text(text_1, adLabel());
+          });
+          $.append($$anchor3, span_1);
+        };
+        $.if(node_2, ($$render) => {
+          if ($.get(bottomLabel)) $$render(consequent_1);
+        });
+      }
+      $.reset(div);
+      $.template_effect(() => {
+        $.set_class(div, 1, className());
+        $.set_style(div, `${$.get(wrapperStyle) ?? ""}${$.get(visibilityStyle) ?? ""}`);
+        $.set_style(div_1, `width:${($.get(config), $.untrack(() => typeof $.get(config).width === "number" ? `${$.get(config).width}px` : $.get(config).width)) ?? ""};height:${($.get(config), $.untrack(() => typeof $.get(config).height === "number" ? `${$.get(config).height}px` : $.get(config).height)) ?? ""};overflow:hidden;border-radius:6px;border:1px solid #e5e7eb;background:#f3f4f6;display:flex;align-items:center;justify-content:center;`);
+        $.set_attribute(iframe, "srcdoc", $.get(iframeSrcDoc));
+      });
+      $.append($$anchor2, div);
+    };
+    $.if(node, ($$render) => {
+      if (!$.get(adFailed)) $$render(consequent_2);
+    });
+  }
+  $.append($$anchor, fragment);
+  $.pop();
+}
+
+// src/AdContainer.svelte
+import "svelte/internal/disclose-version";
+import "svelte/internal/flags/legacy";
+import * as $2 from "svelte/internal/client";
+var root_12 = $2.from_html(`<div><!></div>`);
+function AdContainer($$anchor, $$props) {
+  $2.push($$props, false);
+  let format = $2.prop($$props, "format", 8);
+  let provider = $2.prop($$props, "provider", 8, "adsterra");
+  let adKey = $2.prop($$props, "adKey", 8, "");
+  let className = $2.prop($$props, "className", 8, "");
+  let adLabel = $2.prop($$props, "adLabel", 8, "Advertisement");
+  let showAdLabel = $2.prop($$props, "showAdLabel", 8, true);
+  let adLabelPosition = $2.prop($$props, "adLabelPosition", 8, "top-left");
+  let adLoaded = $2.mutable_source(false);
+  let adFailed = $2.mutable_source(false);
+  let visibilityStyle = $2.mutable_source("");
+  $2.legacy_pre_effect(() => $2.get(adLoaded), () => {
+    $2.set(visibilityStyle, $2.get(adLoaded) ? "opacity:1;transform:scale(1);" : "opacity:0;transform:scale(0.95);pointer-events:none;position:absolute;width:0;height:0;overflow:hidden;");
+  });
+  $2.legacy_pre_effect_reset();
+  var fragment = $2.comment();
+  var node = $2.first_child(fragment);
+  {
+    var consequent = ($$anchor2) => {
+      var div = root_12();
+      var node_1 = $2.child(div);
+      AdBanner(node_1, {
+        get format() {
+          return format();
+        },
+        get provider() {
+          return provider();
+        },
+        get adKey() {
+          return adKey();
+        },
+        get className() {
+          return className();
+        },
+        get adLabel() {
+          return adLabel();
+        },
+        get showAdLabel() {
+          return showAdLabel();
+        },
+        get adLabelPosition() {
+          return adLabelPosition();
+        },
+        onLoad: () => $2.set(adLoaded, true),
+        onError: () => $2.set(adFailed, true)
+      });
+      $2.reset(div);
+      $2.template_effect(() => $2.set_style(div, $2.get(visibilityStyle)));
+      $2.append($$anchor2, div);
+    };
+    $2.if(node, ($$render) => {
+      if (!$2.get(adFailed)) $$render(consequent);
+    });
+  }
+  $2.append($$anchor, fragment);
+  $2.pop();
+}
+
+// src/SocialBar.svelte
+import "svelte/internal/disclose-version";
+import "svelte/internal/flags/legacy";
+import * as $3 from "svelte/internal/client";
+import { onMount as onMount2 } from "svelte";
+var root_13 = $3.from_html(`<div><div style="position:relative;max-width:100%;overflow:hidden;border-radius:12px;border:1px solid #e5e7eb;background:#fff;padding:8px;padding-top:24px;box-shadow:0 20px 30px rgba(0,0,0,0.2);"><button aria-label="Close advertisement" style="position:absolute;top:4px;right:4px;cursor:pointer;">x</button> <div class="hidden sm:block"><!></div> <div class="block space-y-2 sm:hidden"><!> <!></div></div></div>`);
+function SocialBar($$anchor, $$props) {
+  $3.push($$props, false);
+  const adsLoaded = $3.mutable_source();
+  const adsFailed = $3.mutable_source();
+  let delayMs = $3.prop($$props, "delayMs", 8, 5e3);
+  let storageKey = $3.prop($$props, "storageKey", 8, "social-bar-closed");
+  let isVisible = $3.mutable_source(false);
+  let isClosed = $3.mutable_source(false);
+  let desktopAdLoaded = $3.mutable_source(false);
+  let desktopAdFailed = $3.mutable_source(false);
+  let mobileAd1Loaded = $3.mutable_source(false);
+  let mobileAd1Failed = $3.mutable_source(false);
+  let mobileAd2Loaded = $3.mutable_source(false);
+  let mobileAd2Failed = $3.mutable_source(false);
+  let isMobile = $3.mutable_source(false);
+  onMount2(() => {
+    const checkMobile = () => {
+      $3.set(isMobile, window.innerWidth < 640);
+    };
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    if (sessionStorage.getItem(storageKey()) === "true") {
+      $3.set(isClosed, true);
+      return () => window.removeEventListener("resize", checkMobile);
+    }
+    const timer = setTimeout(
+      () => {
+        if (!$3.get(isClosed)) $3.set(isVisible, true);
+      },
+      delayMs()
+    );
+    return () => {
+      clearTimeout(timer);
+      window.removeEventListener("resize", checkMobile);
+    };
+  });
+  function close() {
+    $3.set(isVisible, false);
+    $3.set(isClosed, true);
+    sessionStorage.setItem(storageKey(), "true");
+  }
+  $3.legacy_pre_effect(
+    () => ($3.get(isMobile), $3.get(mobileAd1Loaded), $3.get(mobileAd2Loaded), $3.get(desktopAdLoaded)),
+    () => {
+      $3.set(adsLoaded, $3.get(isMobile) ? $3.get(mobileAd1Loaded) || $3.get(mobileAd2Loaded) : $3.get(desktopAdLoaded));
+    }
+  );
+  $3.legacy_pre_effect(
+    () => ($3.get(isMobile), $3.get(mobileAd1Failed), $3.get(mobileAd2Failed), $3.get(desktopAdFailed)),
+    () => {
+      $3.set(adsFailed, $3.get(isMobile) ? $3.get(mobileAd1Failed) || $3.get(mobileAd2Failed) : $3.get(desktopAdFailed));
+    }
+  );
+  $3.legacy_pre_effect_reset();
+  $3.init();
+  var fragment = $3.comment();
+  var node = $3.first_child(fragment);
+  {
+    var consequent = ($$anchor2) => {
+      var div = root_13();
+      var div_1 = $3.child(div);
+      var button = $3.child(div_1);
+      var div_2 = $3.sibling(button, 2);
+      var node_1 = $3.child(div_2);
+      AdBanner(node_1, {
+        format: "728x90",
+        onLoad: () => $3.set(desktopAdLoaded, true),
+        onError: () => $3.set(desktopAdFailed, true)
+      });
+      $3.reset(div_2);
+      var div_3 = $3.sibling(div_2, 2);
+      var node_2 = $3.child(div_3);
+      AdBanner(node_2, {
+        format: "320x50",
+        onLoad: () => $3.set(mobileAd1Loaded, true),
+        onError: () => $3.set(mobileAd1Failed, true)
+      });
+      var node_3 = $3.sibling(node_2, 2);
+      AdBanner(node_3, {
+        format: "320x50",
+        onLoad: () => $3.set(mobileAd2Loaded, true),
+        onError: () => $3.set(mobileAd2Failed, true)
+      });
+      $3.reset(div_3);
+      $3.reset(div_1);
+      $3.reset(div);
+      $3.template_effect(() => $3.set_class(div, 1, `fixed right-0 bottom-0 left-0 z-[100] flex justify-center p-4 ${!$3.get(adsLoaded) ? "pointer-events-none h-0 overflow-hidden p-0 opacity-0" : ""}`));
+      $3.delegated("click", button, close);
+      $3.append($$anchor2, div);
+    };
+    $3.if(node, ($$render) => {
+      if ($3.get(isVisible) && !$3.get(isClosed) && !$3.get(adsFailed)) $$render(consequent);
+    });
+  }
+  $3.append($$anchor, fragment);
+  $3.pop();
+}
+$3.delegate(["click"]);
+export {
+  AdBanner,
+  AdContainer,
+  SocialBar,
+  configureAds
+};

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@adsterra-ad/svelte",
+  "version": "0.1.0",
+  "type": "module",
+  "svelte": "src/index.ts",
+  "types": "src/index.d.ts",
+  "exports": {
+    ".": {
+      "svelte": "./src/index.ts",
+      "types": "./src/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@adsterra-ad/core": "0.1.0"
+  },
+  "peerDependencies": {
+    "svelte": "^4.0.0 || ^5.0.0"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build && npm run typecheck"
+  },
+  "devDependencies": {
+    "tsup": "^8.2.4",
+    "typescript": "^5.5.4"
+  }
+}

package/src/AdBanner.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { buildSrcDoc, createBannerId, resolveAdConfig, type AdFormat, type AdProvider, type BannerMessage } from '@adsterra-ad/core';
+
+  export let format: AdFormat;
+  export let provider: AdProvider = 'adsterra';
+  export let adKey = '';
+  export let className = '';
+  export let adLabel = 'Advertisement';
+  export let showAdLabel = true;
+  export let adLabelPosition:
+    | 'top-left'
+    | 'top-center'
+    | 'top-right'
+    | 'bottom-left'
+    | 'bottom-center'
+    | 'bottom-right' = 'top-left';
+  export let onLoad: (() => void) | undefined = undefined;
+  export let onError: (() => void) | undefined = undefined;
+
+  const bannerId = createBannerId();
+  let activeProvider: AdProvider = provider;
+  let adLoaded = false;
+  let adFailed = false;
+
+  let config = resolveAdConfig(format, adKey || undefined);
+  let iframeSrcDoc = '';
+  let wrapperStyle = '';
+  let topLabel = false;
+  let bottomLabel = false;
+  let labelSpacing = '';
+  let labelAlign = '';
+  let visibilityStyle = '';
+
+  $: if (provider !== activeProvider) activeProvider = provider;
+  $: config = resolveAdConfig(format, adKey || undefined);
+  $: iframeSrcDoc = buildSrcDoc({ format, provider: activeProvider, config, bannerId });
+
+  $: wrapperStyle = `display:inline-flex;flex-direction:column;align-items:${adLabelPosition.endsWith('left') ? 'flex-start' : adLabelPosition.endsWith('right') ? 'flex-end' : 'center'};`;
+  $: topLabel = showAdLabel && adLabelPosition.startsWith('top');
+  $: bottomLabel = showAdLabel && adLabelPosition.startsWith('bottom');
+  $: labelSpacing = topLabel ? 'margin-bottom:4px;' : bottomLabel ? 'margin-top:4px;' : '';
+  $: labelAlign = `text-align:${adLabelPosition.endsWith('left') ? 'left' : adLabelPosition.endsWith('right') ? 'right' : 'center'};width:100%;`;
+  $: visibilityStyle = adLoaded
+    ? 'opacity:1;transform:scale(1);'
+    : 'opacity:0;transform:scale(0.95);pointer-events:none;position:absolute;width:0;height:0;overflow:hidden;';
+
+  const handleMessage = (event: MessageEvent<BannerMessage>) => {
+    const data = event.data;
+    if (!data || data.bannerId !== bannerId) return;
+
+    if (data.type === 'ad-load-success') {
+      adLoaded = true;
+      onLoad?.();
+      return;
+    }
+
+    if (data.type === 'ad-load-error') {
+      adFailed = true;
+      onError?.();
+    }
+  };
+
+  onMount(() => {
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  });
+</script>
+
+{#if !adFailed}
+  <div class="{className}" style="{wrapperStyle}{visibilityStyle}">
+    {#if topLabel}
+      <span style="font-size:10px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:#9ca3af;{labelSpacing}{labelAlign}">{adLabel}</span>
+    {/if}
+    <div
+      data-testid="ad-banner"
+      style="width:{typeof config.width === 'number' ? `${config.width}px` : config.width};height:{typeof config.height === 'number' ? `${config.height}px` : config.height};overflow:hidden;border-radius:6px;border:1px solid #e5e7eb;background:#f3f4f6;display:flex;align-items:center;justify-content:center;"
+    >
+      <iframe
+        title="Advertisement"
+        srcdoc={iframeSrcDoc}
+        frameborder="0"
+        scrolling="no"
+        sandbox="allow-scripts allow-forms allow-same-origin allow-popups allow-modals"
+      ></iframe>
+    </div>
+    {#if bottomLabel}
+      <span style="font-size:10px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:#9ca3af;{labelSpacing}{labelAlign}">{adLabel}</span>
+    {/if}
+  </div>
+{/if}

package/src/AdContainer.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import AdBanner from './AdBanner.svelte';
+  import type { AdFormat, AdProvider } from '@adsterra-ad/core';
+
+  export let format: AdFormat;
+  export let provider: AdProvider = 'adsterra';
+  export let adKey = '';
+  export let className = '';
+  export let adLabel = 'Advertisement';
+  export let showAdLabel = true;
+  export let adLabelPosition:
+    | 'top-left'
+    | 'top-center'
+    | 'top-right'
+    | 'bottom-left'
+    | 'bottom-center'
+    | 'bottom-right' = 'top-left';
+
+  let adLoaded = false;
+  let adFailed = false;
+  let visibilityStyle = '';
+
+  $: visibilityStyle = adLoaded
+    ? 'opacity:1;transform:scale(1);'
+    : 'opacity:0;transform:scale(0.95);pointer-events:none;position:absolute;width:0;height:0;overflow:hidden;';
+</script>
+
+{#if !adFailed}
+  <div style={visibilityStyle}>
+    <AdBanner
+      {format}
+      {provider}
+      {adKey}
+      {className}
+      {adLabel}
+      {showAdLabel}
+      {adLabelPosition}
+      onLoad={() => (adLoaded = true)}
+      onError={() => (adFailed = true)}
+    />
+  </div>
+{/if}

package/src/SocialBar.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import AdBanner from './AdBanner.svelte';
+
+  export let delayMs = 5000;
+  export let storageKey = 'social-bar-closed';
+
+  let isVisible = false;
+  let isClosed = false;
+
+  let desktopAdLoaded = false;
+  let desktopAdFailed = false;
+  let mobileAd1Loaded = false;
+  let mobileAd1Failed = false;
+  let mobileAd2Loaded = false;
+  let mobileAd2Failed = false;
+  let isMobile = false;
+
+  $: adsLoaded = isMobile ? mobileAd1Loaded || mobileAd2Loaded : desktopAdLoaded;
+  $: adsFailed = isMobile ? mobileAd1Failed || mobileAd2Failed : desktopAdFailed;
+
+  onMount(() => {
+    const checkMobile = () => { isMobile = window.innerWidth < 640; };
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+
+    if (sessionStorage.getItem(storageKey) === 'true') {
+      isClosed = true;
+      return () => window.removeEventListener('resize', checkMobile);
+    }
+
+    const timer = setTimeout(() => {
+      if (!isClosed) isVisible = true;
+    }, delayMs);
+
+    return () => {
+      clearTimeout(timer);
+      window.removeEventListener('resize', checkMobile);
+    };
+  });
+
+  function close() {
+    isVisible = false;
+    isClosed = true;
+    sessionStorage.setItem(storageKey, 'true');
+  }
+</script>
+
+{#if isVisible && !isClosed && !adsFailed}
+  <div class="fixed right-0 bottom-0 left-0 z-[100] flex justify-center p-4 {!adsLoaded ? 'pointer-events-none h-0 overflow-hidden p-0 opacity-0' : ''}">
+    <div style="position:relative;max-width:100%;overflow:hidden;border-radius:12px;border:1px solid #e5e7eb;background:#fff;padding:8px;padding-top:24px;box-shadow:0 20px 30px rgba(0,0,0,0.2);">
+      <button onclick={close} aria-label="Close advertisement" style="position:absolute;top:4px;right:4px;cursor:pointer;">x</button>
+      <div class="hidden sm:block">
+        <AdBanner format="728x90" onLoad={() => (desktopAdLoaded = true)} onError={() => (desktopAdFailed = true)} />
+      </div>
+      <div class="block space-y-2 sm:hidden">
+        <AdBanner format="320x50" onLoad={() => (mobileAd1Loaded = true)} onError={() => (mobileAd1Failed = true)} />
+        <AdBanner format="320x50" onLoad={() => (mobileAd2Loaded = true)} onError={() => (mobileAd2Failed = true)} />
+      </div>
+    </div>
+  </div>
+{/if}

package/src/index.d.ts

@@ -0,0 +1,41 @@
+import type { Component } from 'svelte';
+import type { AdFormat, AdProvider } from '@adsterra-ad/core';
+
+export type AdLabelPosition =
+  | 'top-left'
+  | 'top-center'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-center'
+  | 'bottom-right';
+
+export interface AdBannerProps {
+  format: AdFormat;
+  provider?: AdProvider;
+  adKey?: string;
+  className?: string;
+  adLabel?: string;
+  showAdLabel?: boolean;
+  adLabelPosition?: AdLabelPosition;
+  onLoad?: () => void;
+  onError?: () => void;
+}
+
+export interface AdContainerProps {
+  format: AdFormat;
+  provider?: AdProvider;
+  adKey?: string;
+  className?: string;
+  adLabel?: string;
+  showAdLabel?: boolean;
+  adLabelPosition?: AdLabelPosition;
+}
+
+export interface SocialBarProps {
+  delayMs?: number;
+  storageKey?: string;
+}
+
+export const AdBanner: Component<AdBannerProps>;
+export const AdContainer: Component<AdContainerProps>;
+export const SocialBar: Component<SocialBarProps>;

package/src/index.ts

@@ -0,0 +1,4 @@
+export { configureAds } from '@adsterra-ad/core';
+export { default as AdBanner } from './AdBanner.svelte';
+export { default as AdContainer } from './AdContainer.svelte';
+export { default as SocialBar } from './SocialBar.svelte';

package/src/svelte.d.ts

@@ -0,0 +1,5 @@
+declare module '*.svelte' {
+  import type { ComponentType } from 'svelte';
+  const component: ComponentType;
+  export default component;
+}