@pnlight/sdk-react 0.1.0

package/dist/custom-components.js

@@ -0,0 +1,909 @@
+const BUTTON_PROPS = [
+    "title",
+    "background_color",
+    "background_color_end",
+    "title_color",
+    "corner_radius",
+    "font_size",
+    "font_weight",
+    "horizontal_padding",
+    "vertical_padding",
+    "icon",
+    "icon_size",
+    "icon_weight",
+    "icon_color",
+    "icon_spacing",
+    "loading",
+    "disabled",
+    "disabled_alpha",
+    "disabled_background_color",
+    "disabled_title_color",
+    "loading_indicator_color",
+    "loading_indicator_style",
+    "url",
+    "log_id",
+    "accessibility_label",
+    "shimmer",
+    "bounce",
+    "glass"
+];
+const LOADER_PROPS = ["style", "color", "accessibility_label"];
+const PREPEND_LIST_PROPS = [
+    "instance_id",
+    "count",
+    "count_variable",
+    "items",
+    "reduced_motion",
+    "status_text",
+    "card_background_color",
+    "title_color",
+    "body_color",
+    "status_color",
+    "corner_radius",
+    "title_font_size",
+    "title_font_weight",
+    "body_font_size",
+    "body_font_weight",
+    "status_font_size",
+    "status_font_weight",
+    "list_horizontal_padding",
+    "row_spacing",
+    "bottom_padding",
+    "row_horizontal_padding",
+    "row_vertical_padding",
+    "icon_size",
+    "icon_text_spacing",
+    "text_status_spacing",
+    "animation_duration",
+    "slide_distance",
+    "fade",
+    "slide",
+    "shows_scroll_indicator"
+];
+const prependListSnapshots = new WeakMap();
+function parseBoolean(value, fallback = false) {
+    if (typeof value === "boolean")
+        return value;
+    if (typeof value === "number")
+        return value !== 0;
+    if (typeof value === "string") {
+        if (["true", "yes", "1"].includes(value.toLowerCase()))
+            return true;
+        if (["false", "no", "0", ""].includes(value.toLowerCase()))
+            return false;
+    }
+    return fallback;
+}
+function parseNumber(value, fallback) {
+    if (value == null || value === "")
+        return fallback;
+    const parsed = typeof value === "number" ? value : Number(value);
+    return Number.isFinite(parsed) ? parsed : fallback;
+}
+function parseObject(value) {
+    if (value && typeof value === "object" && !Array.isArray(value)) {
+        return value;
+    }
+    if (typeof value !== "string")
+        return null;
+    try {
+        const parsed = JSON.parse(value);
+        return parsed && typeof parsed === "object" && !Array.isArray(parsed)
+            ? parsed
+            : null;
+    }
+    catch {
+        return null;
+    }
+}
+function parseArray(value) {
+    if (Array.isArray(value))
+        return value;
+    if (typeof value !== "string")
+        return [];
+    try {
+        const parsed = JSON.parse(value);
+        return Array.isArray(parsed) ? parsed : [];
+    }
+    catch {
+        return [];
+    }
+}
+function cssColor(value, fallback) {
+    if (typeof value !== "string")
+        return fallback;
+    const hex = value.trim();
+    if (/^#[0-9a-f]{6}$/i.test(hex))
+        return hex;
+    if (/^#[0-9a-f]{8}$/i.test(hex)) {
+        const alpha = Number.parseInt(hex.slice(1, 3), 16) / 255;
+        const red = Number.parseInt(hex.slice(3, 5), 16);
+        const green = Number.parseInt(hex.slice(5, 7), 16);
+        const blue = Number.parseInt(hex.slice(7, 9), 16);
+        return `rgba(${red}, ${green}, ${blue}, ${alpha.toFixed(3)})`;
+    }
+    return fallback;
+}
+function fontWeight(value, fallback = 600) {
+    const weights = {
+        ultralight: 200,
+        thin: 200,
+        light: 300,
+        regular: 400,
+        medium: 500,
+        semibold: 600,
+        bold: 700,
+        heavy: 800,
+        black: 900
+    };
+    return weights[String(value ?? "").toLowerCase()] ?? fallback;
+}
+function iconMarkup(name, size, weight) {
+    const icons = {
+        xmark: X,
+        "xmark.circle": CircleX,
+        plus: Plus,
+        "plus.circle": CirclePlus,
+        minus: Minus,
+        "minus.circle": CircleMinus,
+        checkmark: Check,
+        gear: Settings,
+        gearshape: Settings,
+        heart: Heart,
+        "heart.fill": Heart,
+        star: Star,
+        "star.fill": Star,
+        info: Info,
+        questionmark: CircleHelp,
+        "chevron.left": ChevronLeft,
+        "chevron.right": ChevronRight,
+        "arrow.left": ArrowLeft,
+        "arrow.right": ArrowRight,
+        ellipsis: Ellipsis,
+        trash: Trash2,
+        "shield.lefthalf.filled": ShieldHalf
+    };
+    const key = String(name ?? "").trim().toLowerCase();
+    const node = icons[key] ?? CircleHelp;
+    const strokeWidths = {
+        ultralight: 1,
+        thin: 1.25,
+        light: 1.5,
+        regular: 2,
+        medium: 2.25,
+        semibold: 2.5,
+        bold: 2.75,
+        heavy: 3,
+        black: 3.25
+    };
+    const svg = createElement(node, {
+        width: size,
+        height: size,
+        stroke: "currentColor",
+        "stroke-width": strokeWidths[String(weight ?? "semibold").toLowerCase()] ?? 2.5,
+        "aria-hidden": "true"
+    });
+    if (key.endsWith(".fill")) {
+        svg.setAttribute("fill", "currentColor");
+    }
+    return svg.outerHTML;
+}
+class PNLightElement extends HTMLElement {
+    values = new Map();
+    context;
+    scheduled = false;
+    divKitApiCallback(context) {
+        this.context = context;
+    }
+    defineProps(names) {
+        for (const name of names) {
+            if (Object.prototype.hasOwnProperty.call(this, name))
+                continue;
+            Object.defineProperty(this, name, {
+                configurable: true,
+                get: () => this.values.get(name) ?? this.getAttribute(name),
+                set: (value) => {
+                    this.values.set(name, value);
+                    this.scheduleRender();
+                }
+            });
+        }
+    }
+    value(name) {
+        return this.values.has(name)
+            ? this.values.get(name)
+            : this.getAttribute(name);
+    }
+    scheduleRender() {
+        if (this.scheduled)
+            return;
+        this.scheduled = true;
+        queueMicrotask(() => {
+            this.scheduled = false;
+            if (this.isConnected)
+                this.render();
+        });
+    }
+    fireAction() {
+        const url = this.value("url");
+        const logId = this.value("log_id");
+        const action = {
+            log_id: typeof logId === "string" && logId
+                ? logId
+                : "pnlight_custom_component",
+            ...(typeof url === "string" && url ? { url } : {})
+        };
+        // Always expose a DOM event for web hosts. DivKit's extension context is
+        // still invoked below, but not every web integration forwards custom URLs
+        // through `onCustomAction`.
+        const shouldExecuteInDivKit = this.dispatchEvent(new CustomEvent("pnlight-action", {
+            bubbles: true,
+            cancelable: true,
+            composed: true,
+            detail: action
+        }));
+        if (shouldExecuteInDivKit) {
+            this.context?.execAction(action);
+        }
+    }
+}
+class PNLightButtonElement extends PNLightElement {
+    kind;
+    root;
+    constructor(kind) {
+        super();
+        this.kind = kind;
+        this.defineProps(BUTTON_PROPS);
+        this.root = this.attachShadow({ mode: "open" });
+    }
+    static get observedAttributes() {
+        return [...BUTTON_PROPS];
+    }
+    connectedCallback() {
+        this.render();
+    }
+    attributeChangedCallback(name, _oldValue, value) {
+        this.values.set(name, value);
+        this.scheduleRender();
+    }
+    shimmerConfig(defaultEnabled) {
+        const raw = this.value("shimmer");
+        const object = parseObject(raw);
+        if (!object) {
+            return {
+                enabled: raw == null ? defaultEnabled : parseBoolean(raw, defaultEnabled),
+                color: "rgba(255, 255, 255, 0.45)",
+                duration: 1.4,
+                pause: 1.1,
+                bandWidth: 0.3,
+                angle: 16
+            };
+        }
+        return {
+            enabled: parseBoolean(object.enabled, true),
+            color: cssColor(object.color, "rgba(255, 255, 255, 0.45)"),
+            duration: Math.max(0.1, parseNumber(object.duration, 1.4)),
+            pause: Math.max(0, parseNumber(object.pause ?? object.delay, 1.1)),
+            bandWidth: Math.min(1, Math.max(0.05, parseNumber(object.band_width, 0.3))),
+            angle: parseNumber(object.angle, 16)
+        };
+    }
+    bounceConfig() {
+        const defaultIdle = this.kind === "cta";
+        const raw = this.value("bounce");
+        if (!parseObject(raw)) {
+            const enabled = raw == null ? null : parseBoolean(raw);
+            return {
+                idleEnabled: enabled ?? defaultIdle,
+                idleScale: 1.03,
+                idlePeriod: 2.6,
+                pressEnabled: enabled ?? true,
+                pressScale: 0.96
+            };
+        }
+        const object = parseObject(raw);
+        const idle = parseObject(object.idle);
+        const press = parseObject(object.press);
+        return {
+            idleEnabled: idle
+                ? parseBoolean(idle.enabled, defaultIdle)
+                : object.idle == null
+                    ? defaultIdle
+                    : parseBoolean(object.idle, defaultIdle),
+            idleScale: parseNumber(idle?.scale, 1.03),
+            idlePeriod: Math.max(0.1, parseNumber(idle?.period, 2.6)),
+            pressEnabled: press
+                ? parseBoolean(press.enabled, true)
+                : object.press == null
+                    ? true
+                    : parseBoolean(object.press, true),
+            pressScale: parseNumber(press?.scale, 0.96)
+        };
+    }
+    render() {
+        const isIcon = this.kind === "icon";
+        const title = String(this.value("title") ?? "");
+        const icon = this.value("icon");
+        const iconSize = parseNumber(this.value("icon_size"), 20);
+        const loading = parseBoolean(this.value("loading"));
+        const disabled = parseBoolean(this.value("disabled"));
+        const inactive = loading || disabled;
+        const titleColor = cssColor(this.value(disabled ? "disabled_title_color" : "title_color"), isIcon ? "#111827" : "#ffffff");
+        const iconColor = cssColor(this.value("icon_color"), titleColor);
+        const defaultBackground = isIcon ? "rgba(118, 118, 128, 0.18)" : "#007aff";
+        const background = cssColor(this.value(disabled ? "disabled_background_color" : "background_color"), defaultBackground);
+        const gradientEnd = this.value("background_color_end");
+        const shimmer = this.shimmerConfig(!isIcon);
+        const bounce = this.bounceConfig();
+        const explicitRadius = this.value("corner_radius");
+        const radius = isIcon && explicitRadius == null
+            ? "999px"
+            : `${parseNumber(explicitRadius, 14)}px`;
+        const glassValue = this.value("glass");
+        const glassObject = parseObject(glassValue);
+        const glassEnabled = glassValue == null
+            ? isIcon && this.value("background_color") == null
+            : glassObject
+                ? parseBoolean(glassObject.enabled, true)
+                : parseBoolean(glassValue);
+        const glassTint = cssColor(glassObject?.tint, background);
+        const fill = gradientEnd
+            ? `linear-gradient(90deg, ${background}, ${cssColor(gradientEnd, background)})`
+            : glassEnabled
+                ? glassTint
+                : background;
+        const disabledAlpha = parseNumber(this.value("disabled_alpha"), 0.45);
+        const accessibilityLabel = String(this.value("accessibility_label") ?? (loading ? "Loading" : title || icon || "Button"));
+        this.root.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+          height: 100%;
+          overflow: visible;
+          contain: none;
+          --idle-scale: ${bounce.idleScale};
+          --idle-period: ${bounce.idlePeriod}s;
+          --press-scale: ${bounce.pressScale};
+        }
+        .pulse {
+          position: relative;
+          width: 100%;
+          height: 100%;
+          overflow: visible;
+          transform-origin: center;
+          animation: ${bounce.idleEnabled && !inactive ? "pnlight-idle var(--idle-period) ease-in-out infinite" : "none"};
+          will-change: transform;
+        }
+        button {
+          position: relative;
+          display: flex;
+          width: 100%;
+          height: 100%;
+          min-width: 0;
+          align-items: center;
+          justify-content: center;
+          gap: ${parseNumber(this.value("icon_spacing"), 8)}px;
+          padding: ${parseNumber(this.value("vertical_padding"), isIcon ? 12 : 16)}px ${parseNumber(this.value("horizontal_padding"), isIcon ? 12 : 24)}px;
+          overflow: hidden;
+          border: ${glassEnabled ? "1px solid rgba(255,255,255,.38)" : "0"};
+          border-radius: ${radius};
+          background: ${fill};
+          box-shadow: ${glassEnabled ? "inset 0 1px 0 rgba(255,255,255,.42), 0 8px 24px rgba(15,23,42,.12)" : "0 8px 18px rgba(15,23,42,.10)"};
+          color: ${titleColor};
+          cursor: ${inactive ? "default" : "pointer"};
+          font: inherit;
+          opacity: ${disabled ? disabledAlpha : 1};
+          -webkit-backdrop-filter: ${glassEnabled ? "blur(18px) saturate(150%)" : "none"};
+          backdrop-filter: ${glassEnabled ? "blur(18px) saturate(150%)" : "none"};
+          transform: scale(1);
+          transition: transform 180ms cubic-bezier(.2,.8,.2,1), filter 180ms ease;
+          -webkit-tap-highlight-color: transparent;
+        }
+        button:focus-visible {
+          outline: 3px solid rgba(8, 126, 245, .35);
+          outline-offset: 3px;
+        }
+        button:not(:disabled):hover {
+          filter: brightness(1.035);
+        }
+        button:not(:disabled):active {
+          transform: ${bounce.pressEnabled ? "scale(var(--press-scale))" : "scale(1)"};
+        }
+        button::after {
+          content: "";
+          position: absolute;
+          z-index: 3;
+          inset: 0;
+          border-radius: inherit;
+          background: rgba(255, 255, 255, .36);
+          opacity: 0;
+          pointer-events: none;
+          transform: scale(.72);
+        }
+        button.tap-confirmed {
+          animation: pnlight-tap-confirmed 320ms cubic-bezier(.2,.8,.2,1);
+        }
+        button.tap-confirmed::after {
+          animation: pnlight-tap-flash 360ms ease-out;
+        }
+        .label {
+          position: relative;
+          z-index: 2;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          font-size: ${parseNumber(this.value("font_size"), 18)}px;
+          font-weight: ${fontWeight(this.value("font_weight"))};
+          line-height: 1.1;
+        }
+        .icon {
+          position: relative;
+          z-index: 2;
+          display: grid;
+          min-width: 1em;
+          flex: 0 0 auto;
+          place-items: center;
+          color: ${iconColor};
+          font-size: ${iconSize}px;
+          line-height: 1;
+        }
+        .icon svg {
+          display: block;
+          width: 1em;
+          height: 1em;
+        }
+        .shimmer {
+          position: absolute;
+          z-index: 1;
+          inset: -70% auto -70% -45%;
+          width: ${Math.round(shimmer.bandWidth * 100)}%;
+          background: linear-gradient(90deg, transparent, ${shimmer.color}, transparent);
+          transform: skewX(${-shimmer.angle}deg) translateX(-220%);
+          animation: ${shimmer.enabled && !inactive ? `pnlight-shimmer ${shimmer.duration + shimmer.pause}s linear infinite` : "none"};
+          pointer-events: none;
+        }
+        .spinner {
+          position: relative;
+          z-index: 2;
+          width: ${this.value("loading_indicator_style") === "large" ? 25 : 20}px;
+          height: ${this.value("loading_indicator_style") === "large" ? 25 : 20}px;
+          border: 2.5px solid color-mix(in srgb, ${cssColor(this.value("loading_indicator_color"), titleColor)} 28%, transparent);
+          border-top-color: ${cssColor(this.value("loading_indicator_color"), titleColor)};
+          border-radius: 50%;
+          animation: pnlight-spin .72s linear infinite;
+        }
+        @keyframes pnlight-idle {
+          0%, 11%, 100% { transform: scale(1); }
+          5% { transform: scale(var(--idle-scale)); }
+        }
+        @keyframes pnlight-shimmer {
+          0% { transform: skewX(${-shimmer.angle}deg) translateX(-220%); }
+          ${Math.max(1, Math.min(99, (shimmer.duration / (shimmer.duration + shimmer.pause)) * 100)).toFixed(1)}%,
+          100% { transform: skewX(${-shimmer.angle}deg) translateX(650%); }
+        }
+        @keyframes pnlight-spin { to { transform: rotate(360deg); } }
+        @keyframes pnlight-tap-confirmed {
+          0% { transform: scale(1); }
+          30% { transform: scale(${bounce.pressEnabled ? bounce.pressScale : 0.97}); }
+          65% { transform: scale(1.025); }
+          100% { transform: scale(1); }
+        }
+        @keyframes pnlight-tap-flash {
+          0% { opacity: 0; transform: scale(.72); }
+          25% { opacity: 1; }
+          100% { opacity: 0; transform: scale(1); }
+        }
+        @media (prefers-reduced-motion: reduce) {
+          .pulse, .shimmer, .spinner { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
+          button { transition: none; }
+        }
+      </style>
+      <div class="pulse">
+        <button type="button" ${inactive ? "disabled" : ""} aria-label="${escapeHtml(accessibilityLabel)}" aria-busy="${loading}">
+          ${shimmer.enabled && !inactive ? '<span class="shimmer" aria-hidden="true"></span>' : ""}
+          ${loading
+            ? '<span class="spinner" aria-hidden="true"></span>'
+            : `${icon ? `<span class="icon" aria-hidden="true">${iconMarkup(icon, iconSize, this.value("icon_weight"))}</span>` : ""}${title ? `<span class="label">${escapeHtml(title)}</span>` : ""}`}
+        </button>
+      </div>
+    `;
+        const button = this.root.querySelector("button");
+        button?.addEventListener("click", () => {
+            button.classList.remove("tap-confirmed");
+            // Restart the confirmation animation on consecutive taps.
+            void button.getBoundingClientRect();
+            button.classList.add("tap-confirmed");
+            this.fireAction();
+        });
+    }
+}
+class PNLightCtaButton extends PNLightButtonElement {
+    constructor() {
+        super("cta");
+    }
+}
+class PNLightIconButton extends PNLightButtonElement {
+    constructor() {
+        super("icon");
+    }
+}
+class PNLightCircularLoader extends PNLightElement {
+    root;
+    constructor() {
+        super();
+        this.defineProps(LOADER_PROPS);
+        this.root = this.attachShadow({ mode: "open" });
+    }
+    static get observedAttributes() {
+        return [...LOADER_PROPS];
+    }
+    connectedCallback() {
+        this.render();
+    }
+    attributeChangedCallback(name, _oldValue, value) {
+        this.values.set(name, value);
+        this.scheduleRender();
+    }
+    render() {
+        const large = this.value("style") === "large";
+        const size = large ? 36 : 22;
+        const color = cssColor(this.value("color"), "#111827");
+        const label = String(this.value("accessibility_label") ?? "Loading");
+        this.root.innerHTML = `
+      <style>
+        :host {
+          display: grid;
+          width: 100%;
+          height: 100%;
+          place-items: center;
+        }
+        .spinner {
+          width: ${size}px;
+          height: ${size}px;
+          box-sizing: border-box;
+          border: ${large ? 4 : 3}px solid color-mix(in srgb, ${color} 22%, transparent);
+          border-top-color: ${color};
+          border-radius: 50%;
+          animation: pnlight-spin .72s linear infinite;
+        }
+        @keyframes pnlight-spin { to { transform: rotate(360deg); } }
+        @media (prefers-reduced-motion: reduce) {
+          .spinner { animation-duration: 1.6s; }
+        }
+      </style>
+      <div class="spinner" role="status" aria-label="${escapeHtml(label)}"></div>
+    `;
+    }
+}
+class PNLightAnimatedPrependList extends PNLightElement {
+    root;
+    list;
+    viewport;
+    instanceId = "";
+    displayedCount = 0;
+    itemsSignature = "";
+    styleSignature = "";
+    initialized = false;
+    unsubscribeCount;
+    constructor() {
+        super();
+        this.defineProps(PREPEND_LIST_PROPS);
+        this.root = this.attachShadow({ mode: "open" });
+    }
+    static get observedAttributes() {
+        return [...PREPEND_LIST_PROPS];
+    }
+    connectedCallback() {
+        this.render();
+        this.bindCountVariable();
+    }
+    disconnectedCallback() {
+        this.unsubscribeCount?.();
+        this.unsubscribeCount = undefined;
+    }
+    divKitApiCallback(context) {
+        super.divKitApiCallback(context);
+        this.bindCountVariable();
+    }
+    attributeChangedCallback(name, _oldValue, value) {
+        this.values.set(name, value);
+        this.scheduleRender();
+    }
+    render() {
+        const items = this.parsedItems();
+        const count = Math.min(items.length, Math.max(0, Math.floor(parseNumber(this.value("count"), 0))));
+        const instanceId = String(this.value("instance_id") ?? "pnlight.animated_prepend_list.default");
+        const itemsSignature = JSON.stringify(items);
+        const styleSignature = this.currentStyleSignature();
+        const instanceChanged = this.instanceId !== instanceId;
+        const styleChanged = this.styleSignature !== styleSignature;
+        const itemsChanged = this.itemsSignature !== itemsSignature;
+        const snapshotStore = this.snapshotStore();
+        const snapshot = instanceChanged
+            ? snapshotStore.get(instanceId)
+            : undefined;
+        const canRestoreSnapshot = snapshot?.itemsSignature === itemsSignature &&
+            snapshot.styleSignature === styleSignature;
+        if (!this.initialized || instanceChanged || styleChanged) {
+            this.installShell();
+        }
+        if (instanceChanged) {
+            this.displayedCount = canRestoreSnapshot && snapshot
+                ? snapshot.displayedCount
+                : 0;
+        }
+        const reducedMotion = parseBoolean(this.value("reduced_motion")) ||
+            window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+        const canAnimateInPlace = this.initialized &&
+            !instanceChanged &&
+            !styleChanged &&
+            !itemsChanged &&
+            count === this.displayedCount + 1 &&
+            !reducedMotion;
+        const canAnimateFromSnapshot = instanceChanged &&
+            canRestoreSnapshot &&
+            count === this.displayedCount + 1 &&
+            !reducedMotion;
+        const canAnimate = canAnimateInPlace || canAnimateFromSnapshot;
+        if (canAnimate) {
+            if (canAnimateFromSnapshot) {
+                this.rebuild(items, this.displayedCount);
+            }
+            this.prependRow(items[this.displayedCount], this.displayedCount);
+        }
+        else if (!this.initialized ||
+            instanceChanged ||
+            styleChanged ||
+            itemsChanged ||
+            count !== this.displayedCount) {
+            this.rebuild(items, count);
+        }
+        this.initialized = true;
+        this.instanceId = instanceId;
+        this.displayedCount = count;
+        this.itemsSignature = itemsSignature;
+        this.styleSignature = styleSignature;
+        snapshotStore.set(instanceId, {
+            displayedCount: count,
+            itemsSignature,
+            styleSignature
+        });
+    }
+    bindCountVariable() {
+        this.unsubscribeCount?.();
+        this.unsubscribeCount = undefined;
+        const name = String(this.value("count_variable") ?? "").trim();
+        if (!name || !this.context?.variables)
+            return;
+        const variable = this.context.variables.get(name);
+        if (!variable)
+            return;
+        const update = (value) => {
+            this.values.set("count", Number(value));
+            this.scheduleRender();
+        };
+        update(variable.getValue());
+        this.unsubscribeCount = variable.subscribe(update);
+    }
+    snapshotStore() {
+        const scope = this.closest(".pnlight-flow-route") ??
+            this.closest(".pnlight-remote-ui") ??
+            this.parentElement ??
+            this;
+        let store = prependListSnapshots.get(scope);
+        if (!store) {
+            store = new Map();
+            prependListSnapshots.set(scope, store);
+        }
+        return store;
+    }
+    parsedItems() {
+        return parseArray(this.value("items")).flatMap((raw) => {
+            const item = parseObject(raw);
+            if (!item)
+                return [];
+            const title = typeof item.title === "string" ? item.title : "";
+            const body = typeof item.body === "string" ? item.body : "";
+            const iconPreview = typeof item.icon_preview === "string" ? item.icon_preview : "";
+            if (!title || !body || !iconPreview.startsWith("data:image/"))
+                return [];
+            return [{ title, body, iconPreview }];
+        });
+    }
+    currentStyleSignature() {
+        return JSON.stringify(PREPEND_LIST_PROPS
+            .filter((name) => ![
+            "instance_id",
+            "count",
+            "count_variable",
+            "items",
+            "reduced_motion"
+        ].includes(name))
+            .map((name) => this.value(name)));
+    }
+    installShell() {
+        const showsIndicator = parseBoolean(this.value("shows_scroll_indicator"));
+        const listHorizontalPadding = Math.max(0, parseNumber(this.value("list_horizontal_padding"), 4));
+        const rowSpacing = Math.max(0, parseNumber(this.value("row_spacing"), 15));
+        const bottomPadding = Math.max(0, parseNumber(this.value("bottom_padding"), 20));
+        const rowHorizontalPadding = Math.max(0, parseNumber(this.value("row_horizontal_padding"), 16));
+        const rowVerticalPadding = Math.max(0, parseNumber(this.value("row_vertical_padding"), 16));
+        const iconSize = Math.max(0, parseNumber(this.value("icon_size"), 20));
+        const iconTextSpacing = Math.max(0, parseNumber(this.value("icon_text_spacing"), 13));
+        const textStatusSpacing = Math.max(0, parseNumber(this.value("text_status_spacing"), 13));
+        const cornerRadius = Math.max(0, parseNumber(this.value("corner_radius"), 20));
+        this.root.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+          height: 100%;
+          min-width: 0;
+          min-height: 0;
+          overflow: hidden;
+          contain: layout paint;
+        }
+        .viewport {
+          box-sizing: border-box;
+          width: 100%;
+          height: 100%;
+          padding: 0 ${listHorizontalPadding}px ${bottomPadding}px;
+          overflow-x: hidden;
+          overflow-y: auto;
+          scrollbar-width: ${showsIndicator ? "auto" : "none"};
+          overscroll-behavior: contain;
+        }
+        .viewport::-webkit-scrollbar {
+          display: ${showsIndicator ? "block" : "none"};
+        }
+        .list {
+          display: flex;
+          width: 100%;
+          flex-direction: column;
+          gap: ${rowSpacing}px;
+        }
+        .row {
+          box-sizing: border-box;
+          display: flex;
+          width: 100%;
+          min-width: 0;
+          align-items: center;
+          padding: ${rowVerticalPadding}px ${rowHorizontalPadding}px;
+          overflow: hidden;
+          border-radius: ${cornerRadius}px;
+          background: ${cssColor(this.value("card_background_color"), "#fefefe")};
+          transform-origin: top center;
+        }
+        .icon {
+          display: block;
+          flex: 0 0 auto;
+          width: ${iconSize}px;
+          height: ${iconSize}px;
+          margin-right: ${iconTextSpacing}px;
+          object-fit: contain;
+        }
+        .copy {
+          flex: 1 1 auto;
+          min-width: 0;
+        }
+        .title,
+        .body {
+          overflow-wrap: anywhere;
+        }
+        .title {
+          color: ${cssColor(this.value("title_color"), "#1c1c1e")};
+          font-size: ${Math.max(1, parseNumber(this.value("title_font_size"), 14))}px;
+          font-weight: ${fontWeight(this.value("title_font_weight"), 700)};
+        }
+        .body {
+          color: ${cssColor(this.value("body_color"), "#3a3a3c")};
+          font-size: ${Math.max(1, parseNumber(this.value("body_font_size"), 12))}px;
+          font-weight: ${fontWeight(this.value("body_font_weight"), 300)};
+        }
+        .status {
+          flex: 0 0 auto;
+          margin-left: ${textStatusSpacing}px;
+          color: ${cssColor(this.value("status_color"), "#ff3b30")};
+          font-size: ${Math.max(1, parseNumber(this.value("status_font_size"), 12))}px;
+          font-weight: ${fontWeight(this.value("status_font_weight"), 600)};
+          white-space: nowrap;
+        }
+      </style>
+      <div class="viewport">
+        <div class="list" role="list"></div>
+      </div>
+    `;
+        this.viewport = this.root.querySelector(".viewport") ?? undefined;
+        this.list = this.root.querySelector(".list") ?? undefined;
+    }
+    rebuild(items, count) {
+        if (!this.list)
+            return;
+        this.list.replaceChildren(...Array.from({ length: count }, (_, offset) => {
+            const index = count - offset - 1;
+            return this.createRow(items[index], index);
+        }));
+        this.viewport?.scrollTo({ top: 0, behavior: "auto" });
+    }
+    prependRow(item, index) {
+        if (!this.list)
+            return;
+        const oldRows = [...this.list.querySelectorAll(".row")];
+        const oldPositions = new Map(oldRows.map((row) => [row.dataset.index ?? "", row.getBoundingClientRect().top]));
+        const row = this.createRow(item, index);
+        this.list.prepend(row);
+        const duration = Math.max(0, parseNumber(this.value("animation_duration"), 0.36) * 1000);
+        const slideDistance = Math.max(0, parseNumber(this.value("slide_distance"), 8));
+        const fades = parseBoolean(this.value("fade"), true);
+        const slides = parseBoolean(this.value("slide"), true);
+        const easing = "cubic-bezier(.4, 0, .2, 1)";
+        if (duration > 0) {
+            for (const existingRow of oldRows) {
+                const oldTop = oldPositions.get(existingRow.dataset.index ?? "");
+                if (oldTop == null)
+                    continue;
+                const delta = oldTop - existingRow.getBoundingClientRect().top;
+                if (Math.abs(delta) < 0.5)
+                    continue;
+                existingRow.animate([{ transform: `translateY(${delta}px)` }, { transform: "translateY(0)" }], { duration, easing });
+            }
+            row.animate([
+                {
+                    opacity: fades ? 0 : 1,
+                    transform: slides ? `translateY(${-slideDistance}px)` : "translateY(0)"
+                },
+                { opacity: 1, transform: "translateY(0)" }
+            ], { duration, easing });
+        }
+        this.viewport?.scrollTo({ top: 0, behavior: "auto" });
+    }
+    createRow(item, index) {
+        const status = String(this.value("status_text") ?? "");
+        const row = document.createElement("div");
+        row.className = "row";
+        row.dataset.index = String(index);
+        row.setAttribute("role", "listitem");
+        row.setAttribute("aria-label", [item.title, item.body, status].filter(Boolean).join(". "));
+        row.innerHTML = `
+      <img class="icon" src="${escapeHtml(item.iconPreview)}" alt="" aria-hidden="true" />
+      <div class="copy">
+        <div class="title">${escapeHtml(item.title)}</div>
+        <div class="body">${escapeHtml(item.body)}</div>
+      </div>
+      ${status ? `<div class="status">${escapeHtml(status)}</div>` : ""}
+    `;
+        return row;
+    }
+}
+function escapeHtml(value) {
+    return value
+        .replaceAll("&", "&amp;")
+        .replaceAll("<", "&lt;")
+        .replaceAll(">", "&gt;")
+        .replaceAll('"', "&quot;")
+        .replaceAll("'", "&#039;");
+}
+export function registerPNLightComponents() {
+    if (!customElements.get("pnlight-cta-button")) {
+        customElements.define("pnlight-cta-button", PNLightCtaButton);
+    }
+    if (!customElements.get("pnlight-icon-button")) {
+        customElements.define("pnlight-icon-button", PNLightIconButton);
+    }
+    if (!customElements.get("pnlight-circular-loader")) {
+        customElements.define("pnlight-circular-loader", PNLightCircularLoader);
+    }
+    if (!customElements.get("pnlight-animated-prepend-list")) {
+        customElements.define("pnlight-animated-prepend-list", PNLightAnimatedPrependList);
+    }
+    return new Map([
+        ["pnlight.cta_button", { element: "pnlight-cta-button" }],
+        ["pnlight.icon_button", { element: "pnlight-icon-button" }],
+        ["pnlight.circular_loader", { element: "pnlight-circular-loader" }],
+        ["pnlight.animated_prepend_list", { element: "pnlight-animated-prepend-list" }],
+        ["pnlight.animated_threat_list", { element: "pnlight-animated-prepend-list" }]
+    ]);
+}
+import { ArrowLeft, ArrowRight, Check, ChevronLeft, ChevronRight, CircleHelp, CircleMinus, CirclePlus, CircleX, Ellipsis, Heart, Info, Minus, Plus, Settings, ShieldHalf, Star, Trash2, X, createElement } from "lucide";
+//# sourceMappingURL=custom-components.js.map