@syntrologie/adapt-product 2.8.0-canary.245

package/dist/chunk-E2IVTQMX.js

@@ -0,0 +1,1100 @@
+import {
+  __privateAdd,
+  __privateGet,
+  __privateMethod,
+  __privateSet,
+  cardSchema,
+  comparisonSchema,
+  gridSchema,
+  heroSchema
+} from "./chunk-SM35E4R3.js";
+
+// ../../sdk-contracts/dist/mount-plumbing.js
+var MOUNT_PLUMBING_KEYS = ["instanceId", "runtime", "tileId"];
+function stripMountPlumbing(config) {
+  if (!config || typeof config !== "object") {
+    return {};
+  }
+  const out = { ...config };
+  for (const key of MOUNT_PLUMBING_KEYS) {
+    delete out[key];
+  }
+  return out;
+}
+
+// ../../sdk-contracts/dist/schemas.js
+import { z } from "zod";
+var AnchorIdZ = z.object({
+  selector: z.string(),
+  route: z.union([z.string(), z.array(z.string())])
+}).strict();
+var AuthoringFieldsZ = {
+  title: z.string().max(200).optional().describe("Authoring-only: short label shown on the action plan dashboard. Stripped before serving to the runtime SDK."),
+  description: z.string().max(1e3).optional().describe("Authoring-only: one-sentence explanation of what this action does and why. Stripped before serving to the runtime SDK."),
+  validation: z.array(z.string().max(500)).max(10).optional().describe("Authoring-only: ordered steps a reviewer can follow to trigger this action and visually confirm it works. Each entry is one step. Stripped before serving to the runtime SDK.")
+};
+var COUNTABLE_EVENTS = [
+  // User interactions (from PostHog autocapture normalization)
+  "ui.click",
+  "ui.scroll",
+  "ui.input",
+  "ui.change",
+  "ui.submit",
+  // Behavioral detectors (from event-processor)
+  "ui.hover",
+  "ui.idle",
+  "ui.scroll_thrash",
+  "ui.focus_bounce",
+  // Navigation
+  "nav.page_view",
+  "nav.page_leave",
+  // Derived behavioral signals
+  "behavior.rage_click",
+  "behavior.hesitation",
+  "behavior.confusion"
+];
+var CountableEventZ = z.enum(COUNTABLE_EVENTS).describe("Event name to count. ui.* = user interactions and behavioral detectors, nav.* = page navigation, behavior.* = derived behavioral signals.");
+var SESSION_METRIC_KEYS = ["time_on_page", "page_views", "scroll_depth"];
+var SessionMetricKeyZ = z.enum(SESSION_METRIC_KEYS).describe("Session metric key. time_on_page = seconds on current page, page_views = pages visited this session, scroll_depth = 0-100 percentage.");
+var PageUrlConditionZ = z.object({
+  type: z.literal("page_url"),
+  url: z.string().describe('URL path to match (e.g. "/pricing", "/dashboard")')
+}).describe('Fires when the current page URL matches. Use for page-specific actions. Example: {"type": "page_url", "url": "/pricing"}');
+var RouteConditionZ = z.object({
+  type: z.literal("route"),
+  routeId: z.string().describe("Named route ID from the route filter")
+}).describe("Fires when the current route matches a named route ID.");
+var AnchorVisibleConditionZ = z.object({
+  type: z.literal("anchor_visible"),
+  anchorId: z.string().describe("CSS selector of the anchor element"),
+  state: z.enum(["visible", "present", "absent"]).describe('"visible" = in viewport, "present" = in DOM, "absent" = not in DOM')
+}).describe(`Fires based on a DOM element's visibility state. Example: {"type": "anchor_visible", "anchorId": "#cta-button", "state": "visible"}`);
+var EventOccurredConditionZ = z.object({
+  type: z.literal("event_occurred"),
+  eventName: z.string().describe('Event name (e.g. "ui.click", "$pageview")'),
+  withinMs: z.number().optional().describe("Time window in ms. Omit = any time this session.")
+}).describe('Fires when a specific event has occurred during this session. Example: {"type": "event_occurred", "eventName": "ui.click", "withinMs": 5000}');
+var StateEqualsConditionZ = z.object({
+  type: z.literal("state_equals"),
+  key: z.string().describe("Key in the SDK persistent state store (localStorage). Only valid for keys the host app explicitly sets via syntro.state.set()."),
+  value: z.unknown().describe("Expected value to match against")
+}).describe("Checks the SDK persistent state store (localStorage). ONLY for host-app state set via syntro.state.set() \u2014 NOT for user attributes like region, device, or UTM params (those are handled by segment targeting). Do NOT use this for targeting. If you do not know the valid state keys, do not use this condition type.");
+var ViewportConditionZ = z.object({
+  type: z.literal("viewport"),
+  minWidth: z.number().optional().describe("Minimum viewport width in pixels"),
+  maxWidth: z.number().optional().describe("Maximum viewport width in pixels"),
+  minHeight: z.number().optional().describe("Minimum viewport height in pixels"),
+  maxHeight: z.number().optional().describe("Maximum viewport height in pixels")
+}).describe('Fires based on viewport (screen) size. Use for responsive behavior. Example: {"type": "viewport", "minWidth": 768} \u2014 fires on tablet and larger.');
+var SessionMetricConditionZ = z.object({
+  type: z.literal("session_metric"),
+  key: SessionMetricKeyZ,
+  operator: z.enum(["gte", "lte", "eq", "gt", "lt"]),
+  threshold: z.number().describe("Numeric threshold to compare against")
+}).describe('Fires when a session metric crosses a threshold. Valid keys: "time_on_page" (seconds), "page_views" (count), "scroll_depth" (0-100). Example: {"type": "session_metric", "key": "time_on_page", "operator": "gte", "threshold": 30}');
+var DismissedConditionZ = z.object({
+  type: z.literal("dismissed"),
+  key: z.string().describe("Dismissal key (usually a tile or action ID)"),
+  inverted: z.boolean().optional().describe("When true, fires if NOT dismissed (default behavior)")
+}).describe("Checks if an item has been dismissed by the user. Use with inverted: true to show only if not dismissed.");
+var CooldownActiveConditionZ = z.object({
+  type: z.literal("cooldown_active"),
+  key: z.string().describe("Cooldown key"),
+  inverted: z.boolean().optional().describe("When true, fires if cooldown is NOT active")
+}).describe("Checks if a cooldown timer is currently active. Use to prevent showing the same intervention too frequently.");
+var FrequencyLimitConditionZ = z.object({
+  type: z.literal("frequency_limit"),
+  key: z.string().describe("Frequency counter key"),
+  limit: z.number().describe("Maximum allowed count"),
+  inverted: z.boolean().optional().describe("When true, fires if limit NOT reached")
+}).describe("Checks if a frequency limit has been reached. Use to cap how many times an action fires per session.");
+var MatchOpZ = z.object({
+  equals: z.union([z.string(), z.number(), z.boolean()]).optional(),
+  contains: z.string().optional()
+}).describe("Match operator for counter filters. Exactly one of equals or contains must be specified.");
+var CounterDefZ = z.object({
+  events: z.array(CountableEventZ).min(1).describe("Event names to count. Use values from the countable events enum."),
+  match: z.record(z.string(), MatchOpZ).optional().describe("Property filters. Keys are event prop names or element-chain fields (tag_name, $el_text, attr__*). All entries AND together.")
+}).describe("Defines what events to count. Registered as an accumulator predicate at config-load time.");
+var EventCountConditionZ = z.object({
+  type: z.literal("event_count"),
+  key: z.string().describe("Unique key for this counter (used for accumulator registration)"),
+  operator: z.enum(["gte", "lte", "eq", "gt", "lt"]),
+  count: z.number().int().min(0).describe("Target count threshold"),
+  withinMs: z.number().positive().optional().describe("Time window in ms. Omit = count across entire session."),
+  counter: CounterDefZ.optional().describe("Inline counter definition. Defines what events to count.")
+}).describe('Fires when accumulated event count crosses a threshold. Most powerful trigger type. Example: {"type": "event_count", "key": "pricing-clicks", "operator": "gte", "count": 3, "counter": {"events": ["ui.click"], "match": {"attr__data-cta": {"contains": "pricing"}}}}');
+var ConditionZ = z.discriminatedUnion("type", [
+  PageUrlConditionZ,
+  RouteConditionZ,
+  AnchorVisibleConditionZ,
+  EventOccurredConditionZ,
+  StateEqualsConditionZ,
+  ViewportConditionZ,
+  SessionMetricConditionZ,
+  DismissedConditionZ,
+  CooldownActiveConditionZ,
+  FrequencyLimitConditionZ,
+  EventCountConditionZ
+]);
+var RuleZ = z.object({
+  conditions: z.array(ConditionZ).describe("Array of conditions \u2014 ALL must match (AND logic) for this rule to fire."),
+  value: z.unknown().describe("Value returned when all conditions match. For triggerWhen: true = fire the action.")
+}).describe("A single rule. ALL conditions must match (AND logic). Rules in a strategy are evaluated top-to-bottom \u2014 first rule where all conditions match wins and returns its value.");
+var RuleStrategyZ = z.object({
+  type: z.literal("rules"),
+  rules: z.array(RuleZ).describe("Ordered list of rules. Evaluated top-to-bottom \u2014 first match wins."),
+  default: z.unknown().describe("Fallback value when no rule matches. For triggerWhen: false = do not fire by default.")
+}).describe("Rule-based strategy. Evaluates rules top-to-bottom. First rule where ALL conditions match returns its value. If no rule matches, returns default. For triggerWhen: set value=true on matching rules, default=false.");
+var ScoreStrategyZ = z.object({
+  type: z.literal("score"),
+  field: z.string(),
+  threshold: z.number(),
+  above: z.unknown(),
+  below: z.unknown()
+}).describe("Score-based strategy. Compares a field value against a threshold.");
+var ModelStrategyZ = z.object({
+  type: z.literal("model"),
+  modelId: z.string(),
+  inputs: z.array(z.string()),
+  outputMapping: z.record(z.string(), z.unknown()),
+  default: z.unknown()
+}).describe("ML model strategy. Sends inputs to a model and maps outputs.");
+var ExternalStrategyZ = z.object({
+  type: z.literal("external"),
+  endpoint: z.string(),
+  method: z.enum(["GET", "POST"]).optional(),
+  default: z.unknown(),
+  timeoutMs: z.number().optional()
+}).describe("External API strategy. Calls an endpoint to determine the value.");
+var DecisionStrategyZ = z.discriminatedUnion("type", [
+  RuleStrategyZ,
+  ScoreStrategyZ,
+  ModelStrategyZ,
+  ExternalStrategyZ
+]);
+var TriggerWhenZ = DecisionStrategyZ.nullable().optional();
+var EventScopeZ = z.object({
+  events: z.array(z.string()),
+  urlContains: z.string().optional(),
+  props: z.record(z.union([z.string(), z.number(), z.boolean()])).optional()
+});
+var NotifyZ = z.object({
+  title: z.string().optional(),
+  body: z.string().optional(),
+  icon: z.string().optional()
+}).nullable().optional();
+
+// src/widgets/ProductCardLit.ts
+import { html, LitElement, nothing } from "lit";
+
+// src/bind/dom-selector.ts
+async function resolveDomSelectorPrice(input, _signal) {
+  const el = document.querySelector(input.selector);
+  const text = el?.textContent?.trim();
+  return text && text.length > 0 ? text : null;
+}
+async function resolveDomSelectorImage(input, _signal) {
+  const el = document.querySelector(input.selector);
+  if (!el) return null;
+  if (el instanceof HTMLImageElement) return el.currentSrc || el.src || null;
+  const src = el.getAttribute("src");
+  return src && src.length > 0 ? src : null;
+}
+
+// src/bind/jsonld.ts
+function isProduct(node) {
+  if (typeof node !== "object" || node === null) return false;
+  const t = node["@type"];
+  if (typeof t === "string") return t === "Product";
+  if (Array.isArray(t)) return t.includes("Product");
+  return false;
+}
+function parseScripts(scripts) {
+  for (const text of scripts) {
+    let parsed;
+    try {
+      parsed = JSON.parse(text);
+    } catch {
+      continue;
+    }
+    const stack = [parsed];
+    while (stack.length) {
+      const cur = stack.pop();
+      if (Array.isArray(cur)) {
+        for (const c of cur) stack.push(c);
+        continue;
+      }
+      if (isProduct(cur)) return cur;
+      if (typeof cur === "object" && cur !== null) {
+        const graph = cur["@graph"];
+        if (Array.isArray(graph)) for (const g of graph) stack.push(g);
+      }
+    }
+  }
+  return null;
+}
+function collectInlineScripts() {
+  const els = document.querySelectorAll('script[type="application/ld+json"]');
+  return Array.from(els, (el) => el.textContent ?? "");
+}
+async function collectScriptsFromUrl(url, signal) {
+  const res = await fetch(url, { signal });
+  if (!res.ok) return [];
+  const text = await res.text();
+  const doc = new DOMParser().parseFromString(text, "text/html");
+  return Array.from(
+    doc.querySelectorAll('script[type="application/ld+json"]'),
+    (el) => el.textContent ?? ""
+  );
+}
+function pickPrice(node) {
+  const offer = Array.isArray(node.offers) ? node.offers[0] : node.offers;
+  if (!offer) return null;
+  const raw = offer.price;
+  const num = typeof raw === "number" ? raw : typeof raw === "string" ? Number.parseFloat(raw) : Number.NaN;
+  if (!Number.isFinite(num)) return null;
+  return { amount: num, currency: offer.priceCurrency || "USD" };
+}
+function formatPrice(amount, currency) {
+  try {
+    return new Intl.NumberFormat(void 0, { style: "currency", currency }).format(amount);
+  } catch (err) {
+    console.warn("[adaptive-product.bind] jsonld: Intl.NumberFormat failed", { currency }, err);
+    return null;
+  }
+}
+async function resolveJsonLdPrice(input, signal) {
+  const scripts = input.url ? await collectScriptsFromUrl(input.url, signal) : collectInlineScripts();
+  const product = parseScripts(scripts);
+  if (!product) return null;
+  const picked = pickPrice(product);
+  return picked ? formatPrice(picked.amount, picked.currency) : null;
+}
+async function resolveJsonLdImage(input, signal) {
+  const scripts = input.url ? await collectScriptsFromUrl(input.url, signal) : collectInlineScripts();
+  const product = parseScripts(scripts);
+  if (!product) return null;
+  const img = Array.isArray(product.image) ? product.image[0] : product.image;
+  return typeof img === "string" && img.length > 0 ? img : null;
+}
+
+// src/bind/opengraph.ts
+async function resolveOpenGraphImage(input, signal) {
+  const res = await fetch(input.url, { signal });
+  if (!res.ok) return null;
+  const text = await res.text();
+  const doc = new DOMParser().parseFromString(text, "text/html");
+  const meta = doc.querySelector('meta[property="og:image"]');
+  const raw = meta?.getAttribute("content");
+  if (!raw) return null;
+  try {
+    return new URL(raw, input.url).toString();
+  } catch {
+    return null;
+  }
+}
+
+// src/bind/shopify-ajax.ts
+function originFor(base) {
+  if (base) return base.replace(/\/$/, "");
+  return typeof location !== "undefined" ? location.origin : "";
+}
+async function fetchProduct(handle, base, signal) {
+  const url = `${originFor(base)}/products/${encodeURIComponent(handle)}.js`;
+  const res = await fetch(url, { signal });
+  if (!res.ok) return null;
+  try {
+    return await res.json();
+  } catch (err) {
+    if (err instanceof Error && err.name === "AbortError") throw err;
+    console.warn("[adaptive-product.bind] shopify-ajax: json parse failed", err);
+    return null;
+  }
+}
+async function resolveShopifyAjaxPrice(input, signal) {
+  const payload = await fetchProduct(input.handle, input.base, signal);
+  if (!payload || typeof payload.price !== "number") return null;
+  const currency = payload.currency || "USD";
+  try {
+    return new Intl.NumberFormat(void 0, { style: "currency", currency }).format(
+      payload.price / 100
+    );
+  } catch (err) {
+    console.warn(
+      "[adaptive-product.bind] shopify-ajax/price: Intl.NumberFormat failed",
+      { currency },
+      err
+    );
+    return null;
+  }
+}
+async function resolveShopifyAjaxImage(input, signal) {
+  const payload = await fetchProduct(input.handle, input.base, signal);
+  const first = payload?.images?.[0];
+  return typeof first === "string" && first.length > 0 ? first : null;
+}
+
+// src/bind/woocommerce-store-api.ts
+function originFor2(base) {
+  if (base) return base.replace(/\/$/, "");
+  return typeof location !== "undefined" ? location.origin : "";
+}
+async function resolveWooStoreApiPrice(input, signal) {
+  const url = `${originFor2(input.base)}/wp-json/wc/store/products?slug=${encodeURIComponent(input.slug)}`;
+  const res = await fetch(url, { signal });
+  if (!res.ok) return null;
+  let body;
+  try {
+    body = await res.json();
+  } catch (err) {
+    if (err instanceof Error && err.name === "AbortError") throw err;
+    console.warn("[adaptive-product.bind] woocommerce-store-api: json parse failed", err);
+    return null;
+  }
+  const product = Array.isArray(body) ? body.find((p) => p.slug === input.slug) : void 0;
+  const prices = product?.prices;
+  if (!prices || typeof prices.price !== "string") return null;
+  const minor = prices.currency_minor_unit ?? 2;
+  const raw = Number.parseInt(prices.price, 10);
+  if (!Number.isFinite(raw)) return null;
+  const amount = raw / 10 ** minor;
+  const currency = prices.currency_code || "USD";
+  try {
+    return new Intl.NumberFormat(void 0, { style: "currency", currency }).format(amount);
+  } catch (err) {
+    console.warn(
+      "[adaptive-product.bind] woocommerce-store-api: Intl.NumberFormat failed",
+      { currency },
+      err
+    );
+    return null;
+  }
+}
+
+// src/bind/index.ts
+async function resolvePriceBind(input, signal) {
+  try {
+    switch (input.type) {
+      case "dom-selector":
+        return await resolveDomSelectorPrice(input, signal);
+      case "shopify-ajax":
+        return await resolveShopifyAjaxPrice(input, signal);
+      case "woocommerce-store-api":
+        return await resolveWooStoreApiPrice(input, signal);
+      case "jsonld":
+        return await resolveJsonLdPrice(input, signal);
+      default:
+        return null;
+    }
+  } catch (err) {
+    if (!(err instanceof Error && err.name === "AbortError")) {
+      console.warn(`[adaptive-product.bind] price/${input.type}:`, err);
+    }
+    return null;
+  }
+}
+async function resolveImageBind(input, signal) {
+  try {
+    switch (input.type) {
+      case "dom-selector":
+        return await resolveDomSelectorImage(input, signal);
+      case "shopify-ajax":
+        return await resolveShopifyAjaxImage(input, signal);
+      case "opengraph":
+        return await resolveOpenGraphImage(input, signal);
+      case "jsonld":
+        return await resolveJsonLdImage(input, signal);
+      default:
+        return null;
+    }
+  } catch (err) {
+    if (!(err instanceof Error && err.name === "AbortError")) {
+      console.warn(`[adaptive-product.bind] image/${input.type}:`, err);
+    }
+    return null;
+  }
+}
+
+// src/bind/controller.ts
+var _abort, _pending, _destroyed, _BindController_instances, resolveImage_fn, resolvePrice_fn;
+var BindController = class {
+  constructor(products, callback) {
+    this.products = products;
+    this.callback = callback;
+    __privateAdd(this, _BindController_instances);
+    __privateAdd(this, _abort, new AbortController());
+    __privateAdd(this, _pending, []);
+    __privateAdd(this, _destroyed, false);
+  }
+  start() {
+    for (const product of this.products) {
+      if (product.image.bind) {
+        __privateGet(this, _pending).push(__privateMethod(this, _BindController_instances, resolveImage_fn).call(this, product.id, product.image.bind));
+      }
+      if (product.price?.bind) {
+        __privateGet(this, _pending).push(__privateMethod(this, _BindController_instances, resolvePrice_fn).call(this, product.id, product.price.bind));
+      }
+    }
+  }
+  async allSettled() {
+    await Promise.allSettled(__privateGet(this, _pending));
+  }
+  destroy() {
+    if (__privateGet(this, _destroyed)) return;
+    __privateSet(this, _destroyed, true);
+    __privateGet(this, _abort).abort();
+  }
+};
+_abort = new WeakMap();
+_pending = new WeakMap();
+_destroyed = new WeakMap();
+_BindController_instances = new WeakSet();
+resolveImage_fn = async function(productId, bind) {
+  const value = await resolveImageBind(bind, __privateGet(this, _abort).signal);
+  if (__privateGet(this, _destroyed)) return;
+  this.callback(productId, "image", value);
+};
+resolvePrice_fn = async function(productId, bind) {
+  const value = await resolvePriceBind(bind, __privateGet(this, _abort).signal);
+  if (__privateGet(this, _destroyed)) return;
+  this.callback(productId, "price", value);
+};
+
+// src/sanitizer.ts
+var ALLOWED_TAGS = /* @__PURE__ */ new Set([
+  "b",
+  "strong",
+  "i",
+  "em",
+  "u",
+  "span",
+  "div",
+  "p",
+  "br",
+  "ul",
+  "ol",
+  "li",
+  "code",
+  "pre",
+  "small",
+  "sup",
+  "sub",
+  "a",
+  "button",
+  // SVG elements (for inline Lucide icons in config HTML)
+  "svg",
+  "path",
+  "circle",
+  "line",
+  "polyline",
+  "polygon",
+  "rect",
+  "g"
+]);
+function sanitizeHtml(html5) {
+  const hasNative = typeof window.Sanitizer === "function";
+  if (hasNative) {
+    try {
+      const s = new window.Sanitizer({});
+      const frag = s.sanitizeToFragment(html5);
+      const div = document.createElement("div");
+      div.append(frag);
+      return div.innerHTML;
+    } catch {
+    }
+  }
+  const tpl = document.createElement("template");
+  tpl.innerHTML = html5;
+  const root = tpl.content;
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, null);
+  const toRemove = [];
+  while (walker.nextNode()) {
+    const el = walker.currentNode;
+    const tag = el.tagName.toLowerCase();
+    if (!ALLOWED_TAGS.has(tag)) {
+      toRemove.push(el);
+      continue;
+    }
+    for (const attr of Array.from(el.attributes)) {
+      const name = attr.name.toLowerCase();
+      const value = attr.value.trim().toLowerCase();
+      const isEvent = name.startsWith("on");
+      const isJsUrl = (name === "href" || name === "src") && value.startsWith("javascript:");
+      if (isEvent || isJsUrl) {
+        el.removeAttribute(attr.name);
+      }
+    }
+  }
+  for (const el of toRemove) {
+    while (el.firstChild) {
+      el.parentNode?.insertBefore(el.firstChild, el);
+    }
+    el.remove();
+  }
+  return tpl.innerHTML;
+}
+
+// src/widgets/ProductCardLit.ts
+var _controller, _ProductCardLit_instances, startBind_fn;
+var ProductCardLit = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _ProductCardLit_instances);
+    this.props = void 0;
+    this.resolved = {};
+    this.validationError = false;
+    __privateAdd(this, _controller);
+  }
+  createRenderRoot() {
+    return this;
+  }
+  willUpdate(changed) {
+    if (changed.has("props")) {
+      __privateMethod(this, _ProductCardLit_instances, startBind_fn).call(this);
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    __privateGet(this, _controller)?.destroy();
+  }
+  render() {
+    if (this.validationError || !this.props) return html``;
+    const parsed = cardSchema.safeParse(this.props);
+    if (!parsed.success) return html``;
+    return renderProductCard(
+      parsed.data.product,
+      parsed.data.density,
+      this.resolved[parsed.data.product.id]
+    );
+  }
+};
+_controller = new WeakMap();
+_ProductCardLit_instances = new WeakSet();
+startBind_fn = function() {
+  __privateGet(this, _controller)?.destroy();
+  this.resolved = {};
+  if (!this.props) {
+    this.validationError = false;
+    return;
+  }
+  const result = cardSchema.safeParse(this.props);
+  if (!result.success) {
+    this.validationError = true;
+    console.warn("[adaptive-product] invalid card props:", result.error.issues);
+    return;
+  }
+  this.validationError = false;
+  const parsed = result.data;
+  __privateSet(this, _controller, new BindController([parsed.product], (productId, kind, value) => {
+    if (value == null) return;
+    this.resolved = {
+      ...this.resolved,
+      [productId]: { ...this.resolved[productId], [kind]: value }
+    };
+  }));
+  __privateGet(this, _controller).start();
+};
+ProductCardLit.properties = {
+  props: { attribute: false },
+  resolved: { state: true },
+  validationError: { state: true }
+};
+function renderProductCard(product, density, resolved) {
+  const imgSrc = resolved?.image ?? product.image.src;
+  const priceText = resolved?.price ?? product.price?.amount;
+  const showFraming = density === "standard" && product.framing;
+  return html`
+    <article class="sc-product-card" data-density=${density}>
+      <img
+        class="sc-product-card__image"
+        data-product-image
+        src=${imgSrc}
+        alt=${product.image.alt}
+        loading="lazy"
+        @error=${onImageError}
+      />
+      <header class="sc-product-card__header">
+        <h3 class="sc-product-card__name" data-product-name>${product.name}</h3>
+        ${product.tagline ? html`<p class="sc-product-card__tagline" data-product-tagline>${product.tagline}</p>` : nothing}
+      </header>
+      ${product.price ? html`<div class="sc-product-card__price" data-product-price>
+            <span class="sc-product-card__amount">${priceText}</span>
+            ${product.price.cadence ? html`<span class="sc-product-card__cadence">${product.price.cadence}</span>` : nothing}
+          </div>` : nothing}
+      ${product.badge ? html`<span
+            class="sc-product-card__badge"
+            data-product-badge
+            data-tone=${product.badge.tone}
+            >${product.badge.label}</span
+          >` : nothing}
+      ${product.attributes.length > 0 ? html`<ul class="sc-product-card__attrs">
+            ${product.attributes.map(
+    (a) => html`<li data-attribute-emphasis=${a.emphasis ? "true" : "false"}>
+                <span class="sc-product-card__attr-label">${a.label}</span>
+                <span class="sc-product-card__attr-value">${a.value}</span>
+              </li>`
+  )}
+          </ul>` : nothing}
+      ${showFraming ? html`<p
+            class="sc-product-card__framing"
+            .innerHTML=${sanitizeHtml(product.framing ?? "")}
+          ></p>` : nothing}
+      <div class="sc-product-card__ctas">
+        ${product.ctas.map(
+    (c, i) => html`<a
+            class="sc-product-card__cta"
+            data-product-cta=${i === 0 ? "primary" : "secondary"}
+            data-variant=${c.variant}
+            href=${c.href ?? "#"}
+            target=${c.target}
+            rel=${c.target === "_blank" ? "noopener noreferrer" : ""}
+            data-action-id=${c.actionId ?? ""}
+            >${c.label}</a
+          >`
+  )}
+      </div>
+    </article>
+  `;
+}
+function onImageError(e) {
+  const img = e.currentTarget;
+  img.dataset.imageError = "true";
+  img.removeAttribute("src");
+}
+
+// src/widgets/ProductComparisonLit.ts
+import { html as html2, LitElement as LitElement2, nothing as nothing2 } from "lit";
+var _controller2, _parsed, _ProductComparisonLit_instances, startBind_fn2, toggle_fn, onHeaderKey_fn, renderRow_fn;
+var ProductComparisonLit = class extends LitElement2 {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _ProductComparisonLit_instances);
+    this.props = void 0;
+    this.open = /* @__PURE__ */ new Set();
+    this.resolved = {};
+    this.validationError = false;
+    __privateAdd(this, _controller2);
+    __privateAdd(this, _parsed);
+  }
+  createRenderRoot() {
+    return this;
+  }
+  willUpdate(changed) {
+    if (changed.has("props")) {
+      __privateMethod(this, _ProductComparisonLit_instances, startBind_fn2).call(this);
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    __privateGet(this, _controller2)?.destroy();
+  }
+  render() {
+    if (this.validationError || !__privateGet(this, _parsed)) return html2``;
+    const parsed = __privateGet(this, _parsed);
+    return html2`
+      <section class="sc-product-comparison">
+        ${parsed.heading ? html2`<h2
+                class="sc-product-comparison__heading"
+                data-comparison-heading
+              >${parsed.heading}</h2>` : nothing2}
+        <ul class="sc-product-comparison__rows">
+          ${parsed.products.map((p) => __privateMethod(this, _ProductComparisonLit_instances, renderRow_fn).call(this, p))}
+        </ul>
+      </section>
+    `;
+  }
+};
+_controller2 = new WeakMap();
+_parsed = new WeakMap();
+_ProductComparisonLit_instances = new WeakSet();
+startBind_fn2 = function() {
+  __privateGet(this, _controller2)?.destroy();
+  this.resolved = {};
+  if (!this.props) {
+    this.validationError = false;
+    __privateSet(this, _parsed, void 0);
+    return;
+  }
+  const result = comparisonSchema.safeParse(this.props);
+  if (!result.success) {
+    this.validationError = true;
+    __privateSet(this, _parsed, void 0);
+    console.warn("[adaptive-product] invalid comparison props:", result.error.issues);
+    return;
+  }
+  this.validationError = false;
+  __privateSet(this, _parsed, result.data);
+  this.open = new Set(
+    typeof result.data.defaultExpandedIndex === "number" ? [result.data.products[result.data.defaultExpandedIndex]?.id].filter(Boolean) : []
+  );
+  __privateSet(this, _controller2, new BindController(result.data.products, (productId, kind, value) => {
+    if (value == null) return;
+    this.resolved = {
+      ...this.resolved,
+      [productId]: { ...this.resolved[productId], [kind]: value }
+    };
+  }));
+  __privateGet(this, _controller2).start();
+};
+toggle_fn = function(id) {
+  if (!__privateGet(this, _parsed)) return;
+  const next = new Set(this.open);
+  if (next.has(id)) {
+    next.delete(id);
+  } else {
+    if (__privateGet(this, _parsed).expandBehavior === "accordion") next.clear();
+    next.add(id);
+  }
+  this.open = next;
+};
+onHeaderKey_fn = function(id, e) {
+  if (e.key === "Escape" && this.open.has(id)) {
+    const next = new Set(this.open);
+    next.delete(id);
+    this.open = next;
+    e.preventDefault();
+  }
+};
+renderRow_fn = function(product) {
+  const expanded = this.open.has(product.id);
+  const regionId = `sc-cmp-${product.id}-panel`;
+  const resolved = this.resolved[product.id];
+  const imgSrc = resolved?.image ?? product.image.src;
+  const priceText = resolved?.price ?? product.price?.amount;
+  const primary = product.ctas[0];
+  return html2`
+      <li
+        class="sc-product-comparison__row"
+        data-comparison-row
+        data-product-id=${product.id}
+        data-expanded=${expanded ? "true" : "false"}
+      >
+        <div class="sc-product-comparison__row-inner">
+          <button
+            class="sc-product-comparison__header"
+            data-comparison-header
+            type="button"
+            aria-expanded=${expanded ? "true" : "false"}
+            aria-controls=${regionId}
+            @click=${() => __privateMethod(this, _ProductComparisonLit_instances, toggle_fn).call(this, product.id)}
+            @keydown=${(e) => __privateMethod(this, _ProductComparisonLit_instances, onHeaderKey_fn).call(this, product.id, e)}
+          >
+            <img
+              class="sc-product-comparison__thumb"
+              src=${imgSrc}
+              alt=${product.image.alt}
+              loading="lazy"
+            />
+            <span class="sc-product-comparison__name">${product.name}</span>
+            ${product.price ? html2`<span class="sc-product-comparison__price"
+                  >${priceText}${product.price.cadence ? html2` <small>${product.price.cadence}</small>` : nothing2}</span
+                >` : nothing2}
+            ${product.framing ? html2`<span
+                  class="sc-product-comparison__framing"
+                  .innerHTML=${sanitizeHtml(product.framing)}
+                ></span>` : nothing2}
+          </button>
+          <span class="sc-product-comparison__primary-cta" data-product-cta="primary">
+            <a
+              href=${primary.href ?? "#"}
+              target=${primary.target}
+              rel=${primary.target === "_blank" ? "noopener noreferrer" : ""}
+              data-action-id=${primary.actionId ?? ""}
+              data-variant=${primary.variant}
+              >${primary.label}</a
+            >
+          </span>
+        </div>
+        ${expanded ? html2`<div class="sc-product-comparison__panel" id=${regionId} role="region">
+              ${product.attributes.length > 0 ? html2`<ul class="sc-product-comparison__attrs">
+                    ${product.attributes.map(
+    (a) => html2`<li data-attribute-emphasis=${a.emphasis ? "true" : "false"}>
+                        <span>${a.label}</span><span>${a.value}</span>
+                      </li>`
+  )}
+                  </ul>` : nothing2}
+              ${product.ctas[1] ? html2`<a
+                    class="sc-product-comparison__secondary-cta"
+                    data-product-cta="secondary"
+                    href=${product.ctas[1].href ?? "#"}
+                    target=${product.ctas[1].target}
+                    rel=${product.ctas[1].target === "_blank" ? "noopener noreferrer" : ""}
+                    data-action-id=${product.ctas[1].actionId ?? ""}
+                    data-variant=${product.ctas[1].variant}
+                    >${product.ctas[1].label}</a
+                  >` : nothing2}
+            </div>` : nothing2}
+      </li>
+    `;
+};
+ProductComparisonLit.properties = {
+  props: { attribute: false },
+  open: { state: true },
+  resolved: { state: true },
+  validationError: { state: true }
+};
+
+// src/widgets/ProductGridLit.ts
+import { html as html3, LitElement as LitElement3, nothing as nothing3 } from "lit";
+var _controller3, _ProductGridLit_instances, startBind_fn3;
+var ProductGridLit = class extends LitElement3 {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _ProductGridLit_instances);
+    this.props = void 0;
+    this.resolved = {};
+    this.validationError = false;
+    __privateAdd(this, _controller3);
+  }
+  createRenderRoot() {
+    return this;
+  }
+  willUpdate(changed) {
+    if (changed.has("props")) {
+      __privateMethod(this, _ProductGridLit_instances, startBind_fn3).call(this);
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    __privateGet(this, _controller3)?.destroy();
+  }
+  render() {
+    if (this.validationError || !this.props) return html3``;
+    const parsed = gridSchema.safeParse(this.props);
+    if (!parsed.success) return html3``;
+    const { products, desktopColumns, heading } = parsed.data;
+    return html3`
+      <section class="sc-product-grid">
+        ${heading ? html3`<h2 data-grid-heading class="sc-product-grid__heading">${heading}</h2>` : nothing3}
+        <div
+          data-grid-root
+          class="sc-product-grid__cells"
+          style=${`--sc-product-grid-cols:${desktopColumns}`}
+        >
+          ${products.map(
+      (p) => html3`<div data-grid-cell class="sc-product-grid__cell">
+              ${renderProductCard(p, "standard", this.resolved[p.id])}
+            </div>`
+    )}
+        </div>
+      </section>
+    `;
+  }
+};
+_controller3 = new WeakMap();
+_ProductGridLit_instances = new WeakSet();
+startBind_fn3 = function() {
+  __privateGet(this, _controller3)?.destroy();
+  this.resolved = {};
+  if (!this.props) {
+    this.validationError = false;
+    return;
+  }
+  const result = gridSchema.safeParse(this.props);
+  if (!result.success) {
+    this.validationError = true;
+    console.warn("[adaptive-product] invalid grid props:", result.error.issues);
+    return;
+  }
+  this.validationError = false;
+  __privateSet(this, _controller3, new BindController(result.data.products, (productId, kind, value) => {
+    if (value == null) return;
+    this.resolved = {
+      ...this.resolved,
+      [productId]: { ...this.resolved[productId], [kind]: value }
+    };
+  }));
+  __privateGet(this, _controller3).start();
+};
+ProductGridLit.properties = {
+  props: { attribute: false },
+  resolved: { state: true },
+  validationError: { state: true }
+};
+
+// src/widgets/ProductHeroLit.ts
+import { html as html4, LitElement as LitElement4, nothing as nothing4 } from "lit";
+var _controller4, _ProductHeroLit_instances, startBind_fn4;
+var ProductHeroLit = class extends LitElement4 {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _ProductHeroLit_instances);
+    this.props = void 0;
+    this.resolved = {};
+    this.validationError = false;
+    __privateAdd(this, _controller4);
+  }
+  createRenderRoot() {
+    return this;
+  }
+  willUpdate(changed) {
+    if (changed.has("props")) {
+      __privateMethod(this, _ProductHeroLit_instances, startBind_fn4).call(this);
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    __privateGet(this, _controller4)?.destroy();
+  }
+  render() {
+    if (this.validationError || !this.props) return html4``;
+    const parsed = heroSchema.safeParse(this.props);
+    if (!parsed.success) return html4``;
+    const { product, layout, longCopy } = parsed.data;
+    const resolved = this.resolved[product.id];
+    const imgSrc = resolved?.image ?? product.image.src;
+    const priceText = resolved?.price ?? product.price?.amount;
+    return html4`
+      <section class="sc-product-hero" data-hero-layout=${layout}>
+        <img
+          class="sc-product-hero__image"
+          src=${imgSrc}
+          alt=${product.image.alt}
+          loading="lazy"
+        />
+        <div class="sc-product-hero__content">
+          <h2 class="sc-product-hero__name">${product.name}</h2>
+          ${product.tagline ? html4`<p class="sc-product-hero__tagline">${product.tagline}</p>` : nothing4}
+          ${product.price ? html4`<p class="sc-product-hero__price">
+                ${priceText}${product.price.cadence ? html4` <small>${product.price.cadence}</small>` : nothing4}
+              </p>` : nothing4}
+          ${longCopy ? html4`<div
+                data-hero-longcopy
+                class="sc-product-hero__longcopy"
+                .innerHTML=${sanitizeHtml(longCopy)}
+              ></div>` : nothing4}
+          <div class="sc-product-hero__ctas">
+            ${product.ctas.map(
+      (c, i) => html4`<a
+                class="sc-product-hero__cta"
+                data-product-cta=${i === 0 ? "primary" : "secondary"}
+                data-variant=${c.variant}
+                href=${c.href ?? "#"}
+                target=${c.target}
+                rel=${c.target === "_blank" ? "noopener noreferrer" : ""}
+                >${c.label}</a
+              >`
+    )}
+          </div>
+        </div>
+      </section>
+    `;
+  }
+};
+_controller4 = new WeakMap();
+_ProductHeroLit_instances = new WeakSet();
+startBind_fn4 = function() {
+  __privateGet(this, _controller4)?.destroy();
+  this.resolved = {};
+  if (!this.props) {
+    this.validationError = false;
+    return;
+  }
+  const result = heroSchema.safeParse(this.props);
+  if (!result.success) {
+    this.validationError = true;
+    console.warn("[adaptive-product] invalid hero props:", result.error.issues);
+    return;
+  }
+  this.validationError = false;
+  __privateSet(this, _controller4, new BindController([result.data.product], (productId, kind, value) => {
+    if (value == null) return;
+    this.resolved = {
+      ...this.resolved,
+      [productId]: { ...this.resolved[productId], [kind]: value }
+    };
+  }));
+  __privateGet(this, _controller4).start();
+};
+ProductHeroLit.properties = {
+  props: { attribute: false },
+  resolved: { state: true },
+  validationError: { state: true }
+};
+
+// src/runtime.ts
+var TAGS = {
+  card: "syntro-product-card",
+  comparison: "syntro-product-comparison",
+  hero: "syntro-product-hero",
+  grid: "syntro-product-grid"
+};
+if (typeof customElements !== "undefined") {
+  if (!customElements.get(TAGS.card)) customElements.define(TAGS.card, ProductCardLit);
+  if (!customElements.get(TAGS.comparison))
+    customElements.define(TAGS.comparison, ProductComparisonLit);
+  if (!customElements.get(TAGS.hero)) customElements.define(TAGS.hero, ProductHeroLit);
+  if (!customElements.get(TAGS.grid)) customElements.define(TAGS.grid, ProductGridLit);
+}
+function makeMountable(tag) {
+  return {
+    mount(container, config) {
+      const widgetProps = stripMountPlumbing(config ?? null);
+      const el = document.createElement(tag);
+      el.props = widgetProps;
+      container.appendChild(el);
+      return () => el.remove();
+    }
+  };
+}
+var ProductCardMountable = makeMountable(TAGS.card);
+var ProductComparisonMountable = makeMountable(TAGS.comparison);
+var ProductHeroMountable = makeMountable(TAGS.hero);
+var ProductGridMountable = makeMountable(TAGS.grid);
+var runtime = {
+  id: "adaptive-product",
+  version: "1.0.0",
+  name: "Product",
+  description: "Product surfaces: cards, side-by-side comparisons, featured hero, and grid lists. Optional bind for price/image to host-page sources (DOM, Shopify, WooCommerce, JSON-LD, OpenGraph).",
+  executors: [],
+  widgets: [
+    {
+      id: "adaptive-product:card",
+      component: ProductCardMountable,
+      metadata: {
+        name: "Product Card",
+        description: "Single product card",
+        icon: "\u{1F6CD}\uFE0F"
+      }
+    },
+    {
+      id: "adaptive-product:comparison",
+      component: ProductComparisonMountable,
+      metadata: {
+        name: "Product Comparison",
+        description: "2\u20134 products, expandable rows",
+        icon: "\u2696\uFE0F"
+      }
+    },
+    {
+      id: "adaptive-product:hero",
+      component: ProductHeroMountable,
+      metadata: {
+        name: "Product Hero",
+        description: "Featured product with long copy",
+        icon: "\u2B50"
+      }
+    },
+    {
+      id: "adaptive-product:grid",
+      component: ProductGridMountable,
+      metadata: {
+        name: "Product Grid",
+        description: "2\u201312 products in a grid",
+        icon: "\u{1F5C2}\uFE0F"
+      }
+    }
+  ]
+};
+var runtime_default = runtime;
+
+export {
+  ProductCardMountable,
+  ProductComparisonMountable,
+  ProductHeroMountable,
+  ProductGridMountable,
+  runtime,
+  runtime_default
+};
+//# sourceMappingURL=chunk-E2IVTQMX.js.map