@pnlight/sdk-react 0.1.0 → 0.3.0

package/dist/custom-components.js

@@ -60,7 +60,73 @@ const PREPEND_LIST_PROPS = [
     "slide",
     "shows_scroll_indicator"
 ];
+const PROGRESS_BAR_PROPS = [
+    "instance_id",
+    "progress",
+    "progress_variable",
+    "initial_progress",
+    "indeterminate",
+    "track_color",
+    "track_height",
+    "fill_color",
+    "fill_color_end",
+    "corner_radius",
+    "fill_inset",
+    "animation_duration",
+    "indeterminate_duration",
+    "indeterminate_band_width",
+    "reduced_motion",
+    "accessibility_label"
+];
+const ANIMATED_NUMBER_PROPS = [
+    "instance_id",
+    "value",
+    "value_variable",
+    "initial_value",
+    "font_size",
+    "font_weight",
+    "text_color",
+    "text_alignment",
+    "decimals",
+    "min_integer_digits",
+    "grouping",
+    "monospaced_digits",
+    "prefix",
+    "suffix",
+    "animation_duration",
+    "curve",
+    "reduced_motion",
+    "accessibility_label"
+];
 const prependListSnapshots = new WeakMap();
+const progressSnapshots = new WeakMap();
+const numberSnapshots = new WeakMap();
+/**
+ * Discards state retained for a direct document mounted into a persistent host.
+ * Flow-route stores are keyed by their disposable route elements and become
+ * unreachable when the flow is destroyed.
+ */
+export function clearPNLightComponentSnapshots(host) {
+    prependListSnapshots.delete(host);
+    progressSnapshots.delete(host);
+    numberSnapshots.delete(host);
+}
+/**
+ * Per-component state that has to survive DivKit replacing a custom element,
+ * scoped to the flow route (or document) the element belongs to.
+ */
+function snapshotStore(snapshots, element) {
+    const scope = element.closest(".pnlight-flow-route")
+        ?? element.closest(".pnlight-remote-ui")
+        ?? element.parentElement
+        ?? element;
+    let store = snapshots.get(scope);
+    if (!store) {
+        store = new Map();
+        snapshots.set(scope, store);
+    }
+    return store;
+}
 function parseBoolean(value, fallback = false) {
     if (typeof value === "boolean")
         return value;
@@ -80,6 +146,34 @@ function parseNumber(value, fallback) {
     const parsed = typeof value === "number" ? value : Number(value);
     return Number.isFinite(parsed) ? parsed : fallback;
 }
+function clampUnit(value) {
+    return Math.min(1, Math.max(0, value));
+}
+function prefersReducedMotion() {
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function parseCurve(value, fallback = "ease_out") {
+    switch (String(value ?? "").trim().toLowerCase()) {
+        case "linear": return "linear";
+        case "ease_in": return "ease_in";
+        case "ease_out": return "ease_out";
+        case "ease_in_out": return "ease_in_out";
+        default: return fallback;
+    }
+}
+/** Mirrors the native easing curves so both renderers count identically. */
+function easingFraction(curve, time) {
+    const clamped = clampUnit(time);
+    switch (curve) {
+        case "linear": return clamped;
+        case "ease_in": return clamped * clamped;
+        case "ease_out": return 1 - (1 - clamped) * (1 - clamped);
+        default:
+            return clamped < 0.5
+                ? 2 * clamped * clamped
+                : 1 - ((-2 * clamped + 2) ** 2) / 2;
+    }
+}
 function parseObject(value) {
     if (value && typeof value === "object" && !Array.isArray(value)) {
         return value;
@@ -192,6 +286,7 @@ class PNLightElement extends HTMLElement {
     values = new Map();
     context;
     scheduled = false;
+    variableUnsubscribe;
     divKitApiCallback(context) {
         this.context = context;
     }
@@ -209,7 +304,14 @@ class PNLightElement extends HTMLElement {
             });
         }
     }
-    value(name) {
+    /**
+     * Reads a prop, falling back to the matching attribute.
+     *
+     * Named `prop` rather than `value` because `defineProps` installs each prop
+     * as an own property on the element, and a component with a `value` prop
+     * would otherwise shadow this method.
+     */
+    prop(name) {
         return this.values.has(name)
             ? this.values.get(name)
             : this.getAttribute(name);
@@ -224,14 +326,44 @@ class PNLightElement extends HTMLElement {
                 this.render();
         });
     }
+    /**
+     * Binds a `<name>_variable` prop to the prop it drives.
+     *
+     * DivKit Web does not re-evaluate expressions embedded in `custom_props`, so
+     * a reactive component subscribes to the named card variable itself.
+     */
+    bindVariableProp(variableProp, valueProp) {
+        this.unbindVariableProp();
+        const name = String(this.prop(variableProp) ?? "").trim();
+        if (!name || !this.context?.variables)
+            return;
+        const variable = this.context.variables.get(name);
+        if (!variable)
+            return;
+        const update = (value) => {
+            this.values.set(valueProp, Number(value));
+            this.scheduleRender();
+        };
+        update(variable.getValue());
+        this.variableUnsubscribe = variable.subscribe(update);
+    }
+    unbindVariableProp() {
+        this.variableUnsubscribe?.();
+        this.variableUnsubscribe = undefined;
+    }
     fireAction() {
-        const url = this.value("url");
-        const logId = this.value("log_id");
+        const url = this.prop("url");
+        const logId = this.prop("log_id");
+        // A custom component with DivKit `actions` is already wrapped by DivKit's
+        // action handler. Its shadow-DOM click bubbles to that wrapper, so emitting
+        // an additional log-only action here produces "Unknown type of action".
+        if (typeof url !== "string" || !url.trim())
+            return;
         const action = {
             log_id: typeof logId === "string" && logId
                 ? logId
                 : "pnlight_custom_component",
-            ...(typeof url === "string" && url ? { 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
@@ -267,7 +399,7 @@ class PNLightButtonElement extends PNLightElement {
         this.scheduleRender();
     }
     shimmerConfig(defaultEnabled) {
-        const raw = this.value("shimmer");
+        const raw = this.prop("shimmer");
         const object = parseObject(raw);
         if (!object) {
             return {
@@ -290,7 +422,7 @@ class PNLightButtonElement extends PNLightElement {
     }
     bounceConfig() {
         const defaultIdle = this.kind === "cta";
-        const raw = this.value("bounce");
+        const raw = this.prop("bounce");
         if (!parseObject(raw)) {
             const enabled = raw == null ? null : parseBoolean(raw);
             return {
@@ -322,27 +454,27 @@ class PNLightButtonElement extends PNLightElement {
     }
     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 title = String(this.prop("title") ?? "");
+        const icon = this.prop("icon");
+        const iconSize = parseNumber(this.prop("icon_size"), 20);
+        const loading = parseBoolean(this.prop("loading"));
+        const disabled = parseBoolean(this.prop("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 titleColor = cssColor(this.prop(disabled ? "disabled_title_color" : "title_color"), isIcon ? "#111827" : "#ffffff");
+        const iconColor = cssColor(this.prop("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 background = cssColor(this.prop(disabled ? "disabled_background_color" : "background_color"), defaultBackground);
+        const gradientEnd = this.prop("background_color_end");
         const shimmer = this.shimmerConfig(!isIcon);
         const bounce = this.bounceConfig();
-        const explicitRadius = this.value("corner_radius");
+        const explicitRadius = this.prop("corner_radius");
         const radius = isIcon && explicitRadius == null
             ? "999px"
             : `${parseNumber(explicitRadius, 14)}px`;
-        const glassValue = this.value("glass");
+        const glassValue = this.prop("glass");
         const glassObject = parseObject(glassValue);
         const glassEnabled = glassValue == null
-            ? isIcon && this.value("background_color") == null
+            ? isIcon && this.prop("background_color") == null
             : glassObject
                 ? parseBoolean(glassObject.enabled, true)
                 : parseBoolean(glassValue);
@@ -352,8 +484,8 @@ class PNLightButtonElement extends PNLightElement {
             : glassEnabled
                 ? glassTint
                 : background;
-        const disabledAlpha = parseNumber(this.value("disabled_alpha"), 0.45);
-        const accessibilityLabel = String(this.value("accessibility_label") ?? (loading ? "Loading" : title || icon || "Button"));
+        const disabledAlpha = parseNumber(this.prop("disabled_alpha"), 0.45);
+        const accessibilityLabel = String(this.prop("accessibility_label") ?? (loading ? "Loading" : title || icon || "Button"));
         this.root.innerHTML = `
       <style>
         :host {
@@ -383,8 +515,8 @@ class PNLightButtonElement extends PNLightElement {
           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;
+          gap: ${parseNumber(this.prop("icon_spacing"), 8)}px;
+          padding: ${parseNumber(this.prop("vertical_padding"), isIcon ? 12 : 16)}px ${parseNumber(this.prop("horizontal_padding"), isIcon ? 12 : 24)}px;
           overflow: hidden;
           border: ${glassEnabled ? "1px solid rgba(255,255,255,.38)" : "0"};
           border-radius: ${radius};
@@ -433,8 +565,8 @@ class PNLightButtonElement extends PNLightElement {
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
-          font-size: ${parseNumber(this.value("font_size"), 18)}px;
-          font-weight: ${fontWeight(this.value("font_weight"))};
+          font-size: ${parseNumber(this.prop("font_size"), 18)}px;
+          font-weight: ${fontWeight(this.prop("font_weight"))};
           line-height: 1.1;
         }
         .icon {
@@ -466,10 +598,10 @@ class PNLightButtonElement extends PNLightElement {
         .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)};
+          width: ${this.prop("loading_indicator_style") === "large" ? 25 : 20}px;
+          height: ${this.prop("loading_indicator_style") === "large" ? 25 : 20}px;
+          border: 2.5px solid color-mix(in srgb, ${cssColor(this.prop("loading_indicator_color"), titleColor)} 28%, transparent);
+          border-top-color: ${cssColor(this.prop("loading_indicator_color"), titleColor)};
           border-radius: 50%;
           animation: pnlight-spin .72s linear infinite;
         }
@@ -504,7 +636,7 @@ class PNLightButtonElement extends PNLightElement {
           ${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>` : ""}`}
+            : `${icon ? `<span class="icon" aria-hidden="true">${iconMarkup(icon, iconSize, this.prop("icon_weight"))}</span>` : ""}${title ? `<span class="label">${escapeHtml(title)}</span>` : ""}`}
         </button>
       </div>
     `;
@@ -546,10 +678,10 @@ class PNLightCircularLoader extends PNLightElement {
         this.scheduleRender();
     }
     render() {
-        const large = this.value("style") === "large";
+        const large = this.prop("style") === "large";
         const size = large ? 36 : 22;
-        const color = cssColor(this.value("color"), "#111827");
-        const label = String(this.value("accessibility_label") ?? "Loading");
+        const color = cssColor(this.prop("color"), "#111827");
+        const label = String(this.prop("accessibility_label") ?? "Loading");
         this.root.innerHTML = `
       <style>
         :host {
@@ -585,7 +717,6 @@ class PNLightAnimatedPrependList extends PNLightElement {
     itemsSignature = "";
     styleSignature = "";
     initialized = false;
-    unsubscribeCount;
     constructor() {
         super();
         this.defineProps(PREPEND_LIST_PROPS);
@@ -596,15 +727,14 @@ class PNLightAnimatedPrependList extends PNLightElement {
     }
     connectedCallback() {
         this.render();
-        this.bindCountVariable();
+        this.bindVariableProp("count_variable", "count");
     }
     disconnectedCallback() {
-        this.unsubscribeCount?.();
-        this.unsubscribeCount = undefined;
+        this.unbindVariableProp();
     }
     divKitApiCallback(context) {
         super.divKitApiCallback(context);
-        this.bindCountVariable();
+        this.bindVariableProp("count_variable", "count");
     }
     attributeChangedCallback(name, _oldValue, value) {
         this.values.set(name, value);
@@ -612,16 +742,16 @@ class PNLightAnimatedPrependList extends PNLightElement {
     }
     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 count = Math.min(items.length, Math.max(0, Math.floor(parseNumber(this.prop("count"), 0))));
+        const instanceId = String(this.prop("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 store = snapshotStore(prependListSnapshots, this);
         const snapshot = instanceChanged
-            ? snapshotStore.get(instanceId)
+            ? store.get(instanceId)
             : undefined;
         const canRestoreSnapshot = snapshot?.itemsSignature === itemsSignature &&
             snapshot.styleSignature === styleSignature;
@@ -633,7 +763,7 @@ class PNLightAnimatedPrependList extends PNLightElement {
                 ? snapshot.displayedCount
                 : 0;
         }
-        const reducedMotion = parseBoolean(this.value("reduced_motion")) ||
+        const reducedMotion = parseBoolean(this.prop("reduced_motion")) ||
             window.matchMedia("(prefers-reduced-motion: reduce)").matches;
         const canAnimateInPlace = this.initialized &&
             !instanceChanged &&
@@ -664,42 +794,14 @@ class PNLightAnimatedPrependList extends PNLightElement {
         this.displayedCount = count;
         this.itemsSignature = itemsSignature;
         this.styleSignature = styleSignature;
-        snapshotStore.set(instanceId, {
+        store.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) => {
+        return parseArray(this.prop("items")).flatMap((raw) => {
             const item = parseObject(raw);
             if (!item)
                 return [];
@@ -720,19 +822,19 @@ class PNLightAnimatedPrependList extends PNLightElement {
             "items",
             "reduced_motion"
         ].includes(name))
-            .map((name) => this.value(name)));
+            .map((name) => this.prop(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));
+        const showsIndicator = parseBoolean(this.prop("shows_scroll_indicator"));
+        const listHorizontalPadding = Math.max(0, parseNumber(this.prop("list_horizontal_padding"), 4));
+        const rowSpacing = Math.max(0, parseNumber(this.prop("row_spacing"), 15));
+        const bottomPadding = Math.max(0, parseNumber(this.prop("bottom_padding"), 20));
+        const rowHorizontalPadding = Math.max(0, parseNumber(this.prop("row_horizontal_padding"), 16));
+        const rowVerticalPadding = Math.max(0, parseNumber(this.prop("row_vertical_padding"), 16));
+        const iconSize = Math.max(0, parseNumber(this.prop("icon_size"), 20));
+        const iconTextSpacing = Math.max(0, parseNumber(this.prop("icon_text_spacing"), 13));
+        const textStatusSpacing = Math.max(0, parseNumber(this.prop("text_status_spacing"), 13));
+        const cornerRadius = Math.max(0, parseNumber(this.prop("corner_radius"), 20));
         this.root.innerHTML = `
       <style>
         :host {
@@ -772,7 +874,7 @@ class PNLightAnimatedPrependList extends PNLightElement {
           padding: ${rowVerticalPadding}px ${rowHorizontalPadding}px;
           overflow: hidden;
           border-radius: ${cornerRadius}px;
-          background: ${cssColor(this.value("card_background_color"), "#fefefe")};
+          background: ${cssColor(this.prop("card_background_color"), "#fefefe")};
           transform-origin: top center;
         }
         .icon {
@@ -792,21 +894,21 @@ class PNLightAnimatedPrependList extends PNLightElement {
           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)};
+          color: ${cssColor(this.prop("title_color"), "#1c1c1e")};
+          font-size: ${Math.max(1, parseNumber(this.prop("title_font_size"), 14))}px;
+          font-weight: ${fontWeight(this.prop("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)};
+          color: ${cssColor(this.prop("body_color"), "#3a3a3c")};
+          font-size: ${Math.max(1, parseNumber(this.prop("body_font_size"), 12))}px;
+          font-weight: ${fontWeight(this.prop("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)};
+          color: ${cssColor(this.prop("status_color"), "#ff3b30")};
+          font-size: ${Math.max(1, parseNumber(this.prop("status_font_size"), 12))}px;
+          font-weight: ${fontWeight(this.prop("status_font_weight"), 600)};
           white-space: nowrap;
         }
       </style>
@@ -833,10 +935,10 @@ class PNLightAnimatedPrependList extends PNLightElement {
         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 duration = Math.max(0, parseNumber(this.prop("animation_duration"), 0.36) * 1000);
+        const slideDistance = Math.max(0, parseNumber(this.prop("slide_distance"), 8));
+        const fades = parseBoolean(this.prop("fade"), true);
+        const slides = parseBoolean(this.prop("slide"), true);
         const easing = "cubic-bezier(.4, 0, .2, 1)";
         if (duration > 0) {
             for (const existingRow of oldRows) {
@@ -859,7 +961,7 @@ class PNLightAnimatedPrependList extends PNLightElement {
         this.viewport?.scrollTo({ top: 0, behavior: "auto" });
     }
     createRow(item, index) {
-        const status = String(this.value("status_text") ?? "");
+        const status = String(this.prop("status_text") ?? "");
         const row = document.createElement("div");
         row.className = "row";
         row.dataset.index = String(index);
@@ -876,6 +978,403 @@ class PNLightAnimatedPrependList extends PNLightElement {
         return row;
     }
 }
+class PNLightProgressBar extends PNLightElement {
+    root;
+    track;
+    fill;
+    instanceId = "";
+    styleSignature = "";
+    displayedProgress = 0;
+    initialized = false;
+    progressSnapshotFrame;
+    constructor() {
+        super();
+        this.defineProps(PROGRESS_BAR_PROPS);
+        this.root = this.attachShadow({ mode: "open" });
+    }
+    static get observedAttributes() {
+        return [...PROGRESS_BAR_PROPS];
+    }
+    connectedCallback() {
+        this.render();
+        this.bindVariableProp("progress_variable", "progress");
+    }
+    disconnectedCallback() {
+        this.unbindVariableProp();
+        this.stopProgressSnapshot();
+    }
+    divKitApiCallback(context) {
+        super.divKitApiCallback(context);
+        this.bindVariableProp("progress_variable", "progress");
+    }
+    attributeChangedCallback(name, _oldValue, value) {
+        this.values.set(name, value);
+        this.scheduleRender();
+    }
+    render() {
+        const instanceId = String(this.prop("instance_id") ?? "pnlight.progress_bar.default");
+        const styleSignature = this.currentStyleSignature();
+        const instanceChanged = this.instanceId !== instanceId;
+        const styleChanged = this.styleSignature !== styleSignature;
+        const store = snapshotStore(progressSnapshots, this);
+        const target = clampUnit(parseNumber(this.prop("progress"), 0));
+        if (!this.initialized || instanceChanged || styleChanged) {
+            this.installShell();
+            // A replaced element resumes where the previous one stopped, so DivKit
+            // re-creating the custom element never replays the fill from zero.
+            const restored = store.get(instanceId);
+            const initial = this.prop("initial_progress");
+            this.displayedProgress = restored
+                ?? (initial == null ? target : clampUnit(parseNumber(initial, 0)));
+            this.applyProgress(this.displayedProgress, false);
+        }
+        const reducedMotion = parseBoolean(this.prop("reduced_motion")) || prefersReducedMotion();
+        this.applyProgress(target, !reducedMotion);
+        // Persist the on-screen fill, not the destination. DivKit replaces this
+        // element on remold; the next instance has to resume from here.
+        this.displayedProgress = this.visualProgress();
+        store.set(instanceId, this.displayedProgress);
+        this.watchProgressSnapshot(store, instanceId, target);
+        this.initialized = true;
+        this.instanceId = instanceId;
+        this.styleSignature = styleSignature;
+    }
+    currentStyleSignature() {
+        return JSON.stringify(PROGRESS_BAR_PROPS
+            .filter((name) => ![
+            "instance_id",
+            "progress",
+            "progress_variable",
+            "initial_progress"
+        ].includes(name))
+            .map((name) => this.prop(name)));
+    }
+    installShell() {
+        const trackColor = cssColor(this.prop("track_color"), "rgba(120, 120, 128, 0.2)");
+        const fillColor = cssColor(this.prop("fill_color"), "#007aff");
+        const fillColorEnd = this.prop("fill_color_end");
+        const fill = fillColorEnd == null
+            ? fillColor
+            : `linear-gradient(90deg, ${fillColor}, ${cssColor(fillColorEnd, fillColor)})`;
+        const inset = Math.max(0, parseNumber(this.prop("fill_inset"), 0));
+        const cornerRadius = this.prop("corner_radius");
+        const radius = cornerRadius == null
+            ? "9999px"
+            : `${Math.max(0, parseNumber(cornerRadius, 0))}px`;
+        const fillRadius = cornerRadius == null
+            ? "9999px"
+            : `${Math.max(0, parseNumber(cornerRadius, 0) - inset)}px`;
+        const trackHeight = Math.max(1, parseNumber(this.prop("track_height"), 8));
+        const duration = Math.max(0, parseNumber(this.prop("animation_duration"), 0.3)) * 1000;
+        const indeterminate = parseBoolean(this.prop("indeterminate"));
+        const band = Math.min(1, Math.max(0.05, parseNumber(this.prop("indeterminate_band_width"), 0.3)));
+        const indeterminateDuration = Math.max(0.1, parseNumber(this.prop("indeterminate_duration"), 1.1)) * 1000;
+        const holdsBandStill = parseBoolean(this.prop("reduced_motion"));
+        const label = String(this.prop("accessibility_label") ?? "Progress");
+        this.root.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+          height: 100%;
+        }
+        .track {
+          box-sizing: border-box;
+          display: flex;
+          width: 100%;
+          height: 100%;
+          min-height: ${trackHeight}px;
+          align-items: stretch;
+          padding: ${inset}px;
+          overflow: hidden;
+          border-radius: ${radius};
+          background: ${trackColor};
+        }
+        .fill {
+          width: 0%;
+          border-radius: ${fillRadius};
+          background: ${fill};
+          transition: width ${duration}ms cubic-bezier(.42, 0, .58, 1);
+        }
+        .fill.indeterminate {
+          width: ${band * 100}%;
+          transition: none;
+          animation: pnlight-progress-slide ${indeterminateDuration}ms cubic-bezier(.42, 0, .58, 1) infinite;
+          ${holdsBandStill ? "animation: none;" : ""}
+        }
+        @keyframes pnlight-progress-slide {
+          from { transform: translateX(-100%); }
+          to { transform: translateX(${(1 / band) * 100}%); }
+        }
+        @media (prefers-reduced-motion: reduce) {
+          .fill { transition: none; }
+          .fill.indeterminate { animation: none; }
+        }
+      </style>
+      <div
+        class="track"
+        role="progressbar"
+        aria-label="${escapeHtml(label)}"
+        aria-valuemin="0"
+        aria-valuemax="1"
+      >
+        <div class="fill${indeterminate ? " indeterminate" : ""}"></div>
+      </div>
+    `;
+        this.track = this.root.querySelector(".track") ?? undefined;
+        this.fill = this.root.querySelector(".fill") ?? undefined;
+    }
+    applyProgress(progress, animated) {
+        const fill = this.fill;
+        if (!fill)
+            return;
+        if (parseBoolean(this.prop("indeterminate"))) {
+            this.track?.removeAttribute("aria-valuenow");
+            return;
+        }
+        this.track?.setAttribute("aria-valuenow", progress.toFixed(3));
+        if (animated) {
+            fill.style.width = `${progress * 100}%`;
+            return;
+        }
+        // Flush the untransitioned width so the next change animates from here
+        // instead of from the width this element was created with.
+        fill.style.transition = "none";
+        fill.style.width = `${progress * 100}%`;
+        void fill.offsetWidth;
+        fill.style.transition = "";
+    }
+    visualProgress() {
+        const fill = this.fill;
+        const track = this.track;
+        if (!fill || !track || parseBoolean(this.prop("indeterminate"))) {
+            return this.displayedProgress;
+        }
+        const trackStyle = getComputedStyle(track);
+        const available = track.getBoundingClientRect().width
+            - (Number.parseFloat(trackStyle.paddingLeft) || 0)
+            - (Number.parseFloat(trackStyle.paddingRight) || 0);
+        if (available <= 0)
+            return this.displayedProgress;
+        return clampUnit(fill.getBoundingClientRect().width / available);
+    }
+    watchProgressSnapshot(store, instanceId, target) {
+        this.stopProgressSnapshot();
+        if (parseBoolean(this.prop("indeterminate"))
+            || parseBoolean(this.prop("reduced_motion"))
+            || prefersReducedMotion()
+            || Math.abs(this.displayedProgress - target) <= 0.0005) {
+            this.displayedProgress = target;
+            store.set(instanceId, target);
+            return;
+        }
+        const duration = Math.max(0, parseNumber(this.prop("animation_duration"), 0.3)) * 1000;
+        const started = performance.now();
+        const step = (now) => {
+            const visual = this.visualProgress();
+            this.displayedProgress = visual;
+            store.set(instanceId, visual);
+            if (now - started < duration && Math.abs(visual - target) > 0.0005) {
+                this.progressSnapshotFrame = requestAnimationFrame(step);
+                return;
+            }
+            this.displayedProgress = target;
+            store.set(instanceId, target);
+            this.progressSnapshotFrame = undefined;
+        };
+        this.progressSnapshotFrame = requestAnimationFrame(step);
+    }
+    stopProgressSnapshot() {
+        if (this.progressSnapshotFrame == null)
+            return;
+        cancelAnimationFrame(this.progressSnapshotFrame);
+        this.progressSnapshotFrame = undefined;
+    }
+}
+class PNLightAnimatedNumber extends PNLightElement {
+    root;
+    text;
+    formatter = new Intl.NumberFormat();
+    instanceId = "";
+    styleSignature = "";
+    initialized = false;
+    displayedValue = 0;
+    targetValue = 0;
+    animationStartValue = 0;
+    animationStart = 0;
+    animationDuration = 0;
+    animationCurve = "ease_out";
+    frame;
+    constructor() {
+        super();
+        this.defineProps(ANIMATED_NUMBER_PROPS);
+        this.root = this.attachShadow({ mode: "open" });
+    }
+    static get observedAttributes() {
+        return [...ANIMATED_NUMBER_PROPS];
+    }
+    connectedCallback() {
+        this.render();
+        this.bindVariableProp("value_variable", "value");
+    }
+    disconnectedCallback() {
+        this.unbindVariableProp();
+        this.stopCounting();
+    }
+    divKitApiCallback(context) {
+        super.divKitApiCallback(context);
+        this.bindVariableProp("value_variable", "value");
+    }
+    attributeChangedCallback(name, _oldValue, value) {
+        this.values.set(name, value);
+        this.scheduleRender();
+    }
+    render() {
+        const instanceId = String(this.prop("instance_id") ?? "pnlight.animated_number.default");
+        const styleSignature = this.currentStyleSignature();
+        const instanceChanged = this.instanceId !== instanceId;
+        const styleChanged = this.styleSignature !== styleSignature;
+        const store = snapshotStore(numberSnapshots, this);
+        const target = parseNumber(this.prop("value"), 0);
+        if (!this.initialized || instanceChanged || styleChanged) {
+            this.installShell();
+        }
+        if (!this.initialized || instanceChanged) {
+            const restored = store.get(instanceId);
+            const initial = this.prop("initial_value");
+            this.displayedValue = restored
+                ?? (initial == null ? target : parseNumber(initial, 0));
+            this.targetValue = this.displayedValue;
+        }
+        const targetChanged = target !== this.targetValue;
+        this.targetValue = target;
+        this.animationCurve = parseCurve(this.prop("curve"));
+        this.animationDuration = parseBoolean(this.prop("reduced_motion")) || prefersReducedMotion()
+            ? 0
+            : Math.max(0, parseNumber(this.prop("animation_duration"), 0.6)) * 1000;
+        this.initialized = true;
+        this.instanceId = instanceId;
+        this.styleSignature = styleSignature;
+        // Persist the on-screen count, not the destination. DivKit replaces this
+        // element on remold; the next instance has to resume from here.
+        store.set(instanceId, this.displayedValue);
+        // An unrelated variable can re-render this element mid-count. Leaving the
+        // running tween alone keeps it from restarting on every render.
+        if (!targetChanged) {
+            if (styleChanged)
+                this.refreshText();
+            return;
+        }
+        this.text?.setAttribute("aria-valuetext", this.formatValue(target));
+        if (this.animationDuration <= 0 || this.displayedValue === target) {
+            this.stopCounting();
+            this.displayedValue = target;
+            store.set(instanceId, this.displayedValue);
+            this.refreshText();
+            return;
+        }
+        // Count from whatever is on screen so a value that changes mid-count stays
+        // continuous.
+        this.animationStartValue = this.displayedValue;
+        this.animationStart = performance.now();
+        this.startCounting();
+        this.refreshText();
+    }
+    currentStyleSignature() {
+        return JSON.stringify(ANIMATED_NUMBER_PROPS
+            .filter((name) => ![
+            "instance_id",
+            "value",
+            "value_variable",
+            "initial_value"
+        ].includes(name))
+            .map((name) => this.prop(name)));
+    }
+    installShell() {
+        const fontSize = Math.max(1, parseNumber(this.prop("font_size"), 34));
+        const weight = fontWeight(this.prop("font_weight"), 700);
+        const color = cssColor(this.prop("text_color"), "#111827");
+        const alignment = String(this.prop("text_alignment") ?? "center").toLowerCase();
+        const justify = alignment === "left" || alignment === "natural"
+            ? "flex-start"
+            : alignment === "right" ? "flex-end" : "center";
+        const monospaced = parseBoolean(this.prop("monospaced_digits"), true);
+        const label = this.prop("accessibility_label");
+        const decimals = Math.min(10, Math.max(0, Math.floor(parseNumber(this.prop("decimals"), 0))));
+        const minimumIntegerDigits = Math.min(20, Math.max(1, Math.floor(parseNumber(this.prop("min_integer_digits"), 1))));
+        this.formatter = new Intl.NumberFormat(undefined, {
+            minimumFractionDigits: decimals,
+            maximumFractionDigits: decimals,
+            minimumIntegerDigits,
+            useGrouping: parseBoolean(this.prop("grouping"), true)
+        });
+        this.root.innerHTML = `
+      <style>
+        :host {
+          display: flex;
+          width: 100%;
+          height: 100%;
+          align-items: center;
+          justify-content: ${justify};
+        }
+        .value {
+          color: ${color};
+          font-size: ${fontSize}px;
+          font-weight: ${weight};
+          line-height: 1.15;
+          white-space: nowrap;
+          /* Tabular figures keep the label from jittering while it counts. */
+          font-variant-numeric: ${monospaced ? "tabular-nums" : "normal"};
+        }
+      </style>
+      <div
+        class="value"
+        role="status"
+        aria-live="off"
+        ${typeof label === "string" && label ? `aria-label="${escapeHtml(label)}"` : ""}
+      ></div>
+    `;
+        this.text = this.root.querySelector(".value") ?? undefined;
+        this.refreshText();
+    }
+    startCounting() {
+        if (this.frame != null)
+            return;
+        const step = (now) => {
+            const elapsed = now - this.animationStart;
+            if (this.animationDuration <= 0 || elapsed >= this.animationDuration) {
+                this.frame = undefined;
+                this.displayedValue = this.targetValue;
+                this.refreshText();
+                snapshotStore(numberSnapshots, this).set(this.instanceId, this.displayedValue);
+                return;
+            }
+            const fraction = easingFraction(this.animationCurve, elapsed / this.animationDuration);
+            this.displayedValue = this.animationStartValue
+                + (this.targetValue - this.animationStartValue) * fraction;
+            this.refreshText();
+            snapshotStore(numberSnapshots, this).set(this.instanceId, this.displayedValue);
+            this.frame = requestAnimationFrame(step);
+        };
+        this.frame = requestAnimationFrame(step);
+    }
+    stopCounting() {
+        if (this.frame == null)
+            return;
+        cancelAnimationFrame(this.frame);
+        this.frame = undefined;
+    }
+    refreshText() {
+        if (!this.text)
+            return;
+        this.text.textContent = this.formatValue(this.displayedValue);
+    }
+    formatValue(value) {
+        const prefix = String(this.prop("prefix") ?? "");
+        const suffix = String(this.prop("suffix") ?? "");
+        return `${prefix}${this.formatter.format(value)}${suffix}`;
+    }
+}
 function escapeHtml(value) {
     return value
         .replaceAll("&", "&amp;")
@@ -884,26 +1383,37 @@ function escapeHtml(value) {
         .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([
+/**
+ * Registers the PNLight custom elements and maps them to their `custom_type`.
+ *
+ * Components introduced in a later schema version stay unmapped in an older
+ * document, matching the native renderer's version gate.
+ */
+export function registerPNLightComponents(schemaVersion = CURRENT_SCHEMA_VERSION) {
+    define("pnlight-cta-button", PNLightCtaButton);
+    define("pnlight-icon-button", PNLightIconButton);
+    define("pnlight-circular-loader", PNLightCircularLoader);
+    define("pnlight-animated-prepend-list", PNLightAnimatedPrependList);
+    define("pnlight-progress-bar", PNLightProgressBar);
+    define("pnlight-animated-number", PNLightAnimatedNumber);
+    const components = 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" }]
     ]);
+    if (schemaVersion >= NATIVE_COMPONENTS_SCHEMA_VERSION) {
+        components.set("pnlight.progress_bar", { element: "pnlight-progress-bar" });
+        components.set("pnlight.animated_number", { element: "pnlight-animated-number" });
+    }
+    return components;
+}
+function define(name, element) {
+    if (customElements.get(name))
+        return;
+    customElements.define(name, element);
 }
+import { CURRENT_SCHEMA_VERSION, NATIVE_COMPONENTS_SCHEMA_VERSION } from "./schema-version.js";
 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