@bannerstudio/svelte 0.1.0

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@bannerstudio/svelte",
+  "version": "0.1.0",
+  "description": "Svelte component for embedding Banner Studio banners.",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "src"
+  ],
+  "svelte": "./src/index.js",
+  "types": "./src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.d.ts",
+      "svelte": "./src/index.js",
+      "default": "./src/index.js"
+    },
+    "./BannerStudioEmbed.svelte": {
+      "types": "./src/BannerStudioEmbed.svelte.d.ts",
+      "svelte": "./src/BannerStudioEmbed.svelte"
+    }
+  },
+  "dependencies": {
+    "@bannerstudio/core": "^0.1.0"
+  },
+  "peerDependencies": {
+    "svelte": ">=4.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/BannerStudioEmbed.svelte

@@ -0,0 +1,53 @@
+<script>
+  import { onMount } from 'svelte'
+  import { buildEmbedUrl, attachBannerMessages } from '@bannerstudio/core'
+
+  /** Banner Studio API base, e.g. https://api.bannerstud.io */
+  export let apiBase
+  /** Affiliate code. */
+  export let affiliate
+  /** Embed type (default 'top'). */
+  export let type = 'top'
+  /** Optional placement code. */
+  export let placement = ''
+  /** Optional audience segment for the current visitor (e.g. 'guest', 'pro'). */
+  export let segment = ''
+  /** Reserved height in px — the bounding box that prevents CLS (default 90). */
+  export let height = 90
+  /**
+   * Optional server-fetched meta (`fetchBannerMeta`). When provided, the box is
+   * reserved only if `active` (zero CLS, no gap when empty). When omitted, the
+   * component always renders and reserves `height` (client mode).
+   */
+  export let meta = undefined
+
+  let iframeEl
+  let currentHeight = meta?.height ?? height
+  let closed = false
+
+  $: src = buildEmbedUrl({ apiBase, affiliate, type, placement: placement || undefined, segment: segment || undefined })
+  $: active = meta === undefined || meta?.active === true
+
+  onMount(() => {
+    if (!iframeEl) return
+    return attachBannerMessages(iframeEl, {
+      onHeight: (h) => { currentHeight = h > 0 ? h : 0 },
+      onEmpty: () => { currentHeight = 0 },
+      onClose: () => { closed = true },
+    })
+  })
+</script>
+
+{#if !closed && active}
+  <div style="height:{currentHeight}px;overflow:hidden">
+    <iframe
+      bind:this={iframeEl}
+      {src}
+      title="Banner"
+      scrolling="no"
+      frameborder="0"
+      allowtransparency="true"
+      style="width:100%;height:100%;border:0;display:block"
+    ></iframe>
+  </div>
+{/if}

package/src/BannerStudioEmbed.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from 'svelte'
+import type { BannerType, BannerMeta } from '@bannerstudio/core'
+
+export interface BannerStudioEmbedProps {
+  /** Banner Studio API base, e.g. https://api.bannerstud.io */
+  apiBase: string
+  /** Affiliate code. */
+  affiliate: string
+  /** Embed type (default 'top'). */
+  type?: BannerType
+  /** Optional placement code. */
+  placement?: string
+  /** Optional audience segment for the current visitor (e.g. 'guest', 'pro'). */
+  segment?: string
+  /** Reserved height in px — the bounding box that prevents CLS (default 90). */
+  height?: number
+  /** Optional server-fetched meta (`fetchBannerMeta`) to gate rendering. */
+  meta?: BannerMeta | null
+}
+
+export default class BannerStudioEmbed extends SvelteComponent<BannerStudioEmbedProps> {}

package/src/index.d.ts

@@ -0,0 +1,2 @@
+export { default as BannerStudioEmbed } from './BannerStudioEmbed.svelte'
+export type { BannerStudioEmbedProps } from './BannerStudioEmbed.svelte'

package/src/index.js

@@ -0,0 +1 @@
+export { default as BannerStudioEmbed } from './BannerStudioEmbed.svelte'