@syntrologie/adapt-guide 0.0.0-stage → 2.8.0-canary.621

package/dist/chunk-BVOACKL5.js

@@ -0,0 +1,3545 @@
+import {
+  external_exports
+} from "./chunk-IGIU6S7P.js";
+
+// ../../../node_modules/@lit/context/lib/create-context.js
+function n(n2) {
+  return n2;
+}
+
+// ../../sdk-contracts/dist/canvas-context.js
+var canvasRuntimeContext = n("syntrologie:canvas-runtime");
+
+// ../../sdk-contracts/dist/telemetry-events.js
+var entry = (e2) => e2;
+var TELEMETRY_EVENTS = {
+  // --- intervention metrics (April 2026) — wire names unchanged, all plan-scope
+  syntro_config_served: entry({
+    subject: "config",
+    verb: "served",
+    scope: "plan",
+    props: ["tiles", "actions"]
+  }),
+  syntro_intervention_seen: entry({
+    subject: "intervention",
+    verb: "seen",
+    scope: "plan",
+    props: ["intervention_id", "intervention_kind"]
+  }),
+  syntro_intervention_triggered: entry({
+    subject: "intervention",
+    verb: "triggered",
+    scope: "plan",
+    props: ["intervention_id", "intervention_kind"]
+  }),
+  syntro_intervention_interacted: entry({
+    subject: "intervention",
+    verb: "interacted",
+    scope: "plan",
+    props: ["intervention_id", "intervention_kind", "interaction_type"]
+  }),
+  // --- concierge (FEAT-1789150184) ---------------------------------------
+  syntro_concierge_opened: entry({
+    subject: "concierge",
+    verb: "opened",
+    scope: "open",
+    props: ["trigger", "page_path"]
+    // trigger: ConciergeOpenTrigger
+  }),
+  syntro_concierge_closed: entry({
+    subject: "concierge",
+    verb: "closed",
+    scope: "open",
+    props: ["duration_ms", "reason", "messages_sent", "tiles_dismissed", "pages_viewed"]
+    // reason: ConciergeCloseReason
+  }),
+  /**
+   * The shopper asked to leave the canvas by a link. Emitted on intent, before
+   * the host answers, so refused or denied opens are counted too (parity with
+   * syntro_concierge_closed reason navigation).
+   *
+   * On a merchant's own page a link tap closes the canvas, and
+   * `syntro_concierge_closed { reason: 'navigation' }` is the row that
+   * records it. Inside a chat app's card the frame is sandboxed: the canvas
+   * cannot navigate, does not close, and asks the host to open the link
+   * instead, so that close row never fires. This is its counterpart, and it
+   * carries the same `reason` so one query covers both surfaces.
+   */
+  syntro_link_opened: entry({
+    subject: "link",
+    verb: "opened",
+    scope: "open",
+    props: ["kind", "reason"]
+    // kind: LinkOpenKind, reason: ConciergeCloseReason
+  }),
+  /**
+   * A store's product page opened inside a chat-app card instead of leaving
+   * through the host (the card's product view). `product` is the store's
+   * handle, never the display name; a rail switch is a new open. Its
+   * counterpart when the shopper goes back to the conversation's picks is
+   * syntro_product_view_closed.
+   *
+   * Plan scope, like the card's own syntro_card_lifecycle_seen: an inline
+   * card holds an open scope only while the host has it fullscreen, and a
+   * view opened from a tile fires before the host answers that request (or
+   * after it refused), so an open-scope row here would be dropped. The core
+   * still stamps surface and open_id whenever an open is live.
+   */
+  syntro_product_view_opened: entry({
+    subject: "product_view",
+    verb: "opened",
+    scope: "plan",
+    props: ["product", "from"]
+    // from: ProductViewOpenSource
+  }),
+  syntro_product_view_closed: entry({
+    subject: "product_view",
+    verb: "closed",
+    scope: "plan",
+    props: ["product"]
+  }),
+  syntro_deck_paged: entry({
+    subject: "deck",
+    verb: "paged",
+    scope: "open",
+    props: ["from_index", "to_index", "method"]
+    // method: DeckPageMethod
+  }),
+  syntro_tile_dismissed: entry({
+    subject: "tile",
+    verb: "dismissed",
+    scope: "open",
+    props: ["tile_id", "tile_kind", "visible_ms"]
+  }),
+  // A tile's own data load finished: the network wait between the concierge
+  // mounting a tile and the shopper seeing its content (BUG-1784767817 was a
+  // 30 s reviews hang here). `outcome` is 'ok' | 'error'; `requested` is how
+  // many items the tile asked for, `received` how many came back.
+  syntro_tile_data_received: entry({
+    subject: "tile_data",
+    verb: "received",
+    scope: "open",
+    props: ["tile_id", "tile_kind", "total_ms", "outcome", "requested", "received"]
+  }),
+  // The three chat atoms are OPEN-scope: they carry `surface` / `open_id` and
+  // only make sense inside a concierge open. An INLINE chat bar (no concierge)
+  // still dispatches them on every turn, and the core drops each one and
+  // increments the `telemetry_dropped` health counter. That is EXPECTED on an
+  // inline-chat host page, not a bug — `telemetry_dropped` there mixes "real
+  // defect" with "inline chat has no open scope", so do not alert on it alone.
+  syntro_chat_message_sent: entry({
+    subject: "chat_message",
+    verb: "sent",
+    scope: "open",
+    props: ["turn", "chars", "via"]
+    // via: ChatSendVia
+  }),
+  syntro_chat_reply_received: entry({
+    subject: "chat_reply",
+    verb: "received",
+    scope: "open",
+    // mount_tools: the mount_* tool name of every mount this reply fired, in order (two product cards appear twice).
+    props: ["turn", "ttft_ms", "total_ms", "mounts", "cards", "mount_tools"]
+  }),
+  syntro_chat_interrupted: entry({
+    subject: "chat",
+    verb: "interrupted",
+    scope: "open",
+    props: ["turn", "after_ms"]
+  }),
+  syntro_chat_maximize_toggled: entry({
+    subject: "chat_maximize",
+    verb: "toggled",
+    scope: "open",
+    props: ["maximized"]
+  }),
+  syntro_chat_takeover_triggered: entry({
+    subject: "chat_takeover",
+    verb: "triggered",
+    scope: "open",
+    props: ["turn"]
+  }),
+  // --- search takeover (2026-09-17) ---------------------------------------
+  // All plan-scope: the search interceptor fires before any concierge open
+  // exists. No prop here ever carries query text (SEE the contract test's
+  // no-text-prop rule) — classification/signal_hits are the interceptor's
+  // own derived signals, never the string itself.
+  syntro_search_sent: entry({
+    subject: "search",
+    verb: "sent",
+    scope: "plan",
+    props: ["classification", "word_count", "signal_hits", "entry_point", "platform"]
+    // classification: SearchClassification, entry_point: SearchEntryPoint
+  }),
+  // `ms_to_skeleton` is intentionally the only timing prop: it is always
+  // knowable the instant the surface mounts. `ms_to_first_content` is NOT
+  // declared here (revision 1 defect) because a surface that never painted
+  // content still fires this event, and a required prop it cannot supply
+  // would make TelemetryCore.emit drop exactly the row worth measuring.
+  syntro_search_surface_seen: entry({
+    subject: "search_surface",
+    verb: "seen",
+    scope: "plan",
+    props: ["variant", "classification", "result_count", "ms_to_skeleton"]
+    // variant: SearchVariant, classification: SearchClassification
+  }),
+  syntro_search_result_tapped: entry({
+    subject: "search_result",
+    verb: "tapped",
+    scope: "plan",
+    props: ["variant", "region_id", "module", "position"]
+    // variant: SearchVariant
+  }),
+  syntro_search_followup_sent: entry({
+    subject: "search_followup",
+    verb: "sent",
+    scope: "plan",
+    props: ["delta_kind", "variant"]
+    // delta_kind: SearchDeltaKind, variant: SearchVariant
+  }),
+  // Declares `ms_since_boot` (not a "since surface mounted" timing prop) so a
+  // not-ready fallback the takeover never rendered is still measurable —
+  // revision 1 emitted nothing on this path.
+  syntro_search_native_served: entry({
+    subject: "search_native",
+    verb: "served",
+    scope: "plan",
+    props: ["reason", "platform", "ms_since_boot"]
+    // reason: SearchFallbackReason
+  }),
+  syntro_search_takeover_dismissed: entry({
+    subject: "search_takeover",
+    verb: "dismissed",
+    scope: "plan",
+    props: ["variant", "reason"]
+    // variant: SearchVariant, reason: SearchDismissReason
+  }),
+  // --- chat-app card lifecycle (2026-09-24) --------------------------------
+  // One row per stage a card reached, from `reportCardStage` in
+  // card-lifecycle.ts. Plan scope: most stages happen before a config is
+  // served and none happen inside a concierge open. `stage` is a
+  // CardLifecycleStage; `since_shell_ms` is the card shell's own clock, so a
+  // card's rows order themselves from the first byte of the page. The same
+  // stages reach the connector through the shell's beacon, which is the only
+  // record of a card whose SDK never booted.
+  syntro_card_lifecycle_seen: entry({
+    subject: "card_lifecycle",
+    verb: "seen",
+    scope: "plan",
+    props: ["stage", "since_shell_ms"]
+    // stage: CardLifecycleStage
+  })
+};
+var TELEMETRY_EVENT_NAMES = Object.keys(TELEMETRY_EVENTS);
+
+// ../../sdk-contracts/dist/card-lifecycle.js
+var MCP_APP_SURFACE_ATTRIBUTES = Object.freeze({
+  surface_type: "mcp-app",
+  surface: "personal_agent"
+});
+
+// ../../sdk-contracts/dist/detector-events.js
+var DETECTOR_EVENT_NAMES = [
+  "ui.hover",
+  "ui.idle",
+  "ui.hesitate",
+  "ui.rage_click",
+  "ui.scroll_thrash",
+  "ui.focus_bounce"
+];
+var CANONICAL_BUS_EVENT_NAMES = [
+  ...DETECTOR_EVENT_NAMES,
+  "nav.section_viewed",
+  "nav.scroll_depth"
+];
+
+// ../../sdk-contracts/dist/image-standin.js
+var IMAGE_STANDIN_BACKGROUND = "linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02) 45%, rgba(0, 0, 0, 0.22)), var(--sc-color-primary, #3a3a3a)";
+function standinInitial(name) {
+  const first = [...name.trim()][0];
+  return first ? first.toUpperCase() : null;
+}
+
+// ../../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/routes.js
+var RESERVED_BYTES = /* @__PURE__ */ new Set([
+  33,
+  // !
+  35,
+  // #
+  36,
+  // $
+  38,
+  // &
+  39,
+  // '
+  40,
+  // (
+  41,
+  // )
+  42,
+  // *
+  43,
+  // +
+  44,
+  // ,
+  47,
+  // /
+  58,
+  // :
+  59,
+  // ;
+  61,
+  // =
+  63,
+  // ?
+  64,
+  // @
+  91,
+  // [
+  93
+  // ]
+]);
+var utf8Decoder = new TextDecoder("utf-8", { fatal: false });
+function decodeUnreservedOnly(input) {
+  let out = "";
+  let pending = [];
+  const flushPending = () => {
+    if (pending.length === 0)
+      return;
+    const bytes = new Uint8Array(pending);
+    out += utf8Decoder.decode(bytes);
+    pending = [];
+  };
+  let i2 = 0;
+  while (i2 < input.length) {
+    const ch = input[i2];
+    if (ch === "%" && i2 + 2 < input.length && isHex(input[i2 + 1]) && isHex(input[i2 + 2])) {
+      const byte = parseInt(input.slice(i2 + 1, i2 + 3), 16);
+      if (RESERVED_BYTES.has(byte)) {
+        flushPending();
+        out += `%${input.slice(i2 + 1, i2 + 3).toUpperCase()}`;
+        i2 += 3;
+      } else {
+        pending.push(byte);
+        i2 += 3;
+      }
+    } else {
+      flushPending();
+      out += ch;
+      i2 += 1;
+    }
+  }
+  flushPending();
+  return out;
+}
+function isHex(c2) {
+  return c2 >= "0" && c2 <= "9" || c2 >= "a" && c2 <= "f" || c2 >= "A" && c2 <= "F";
+}
+function stripQueryAndHash(s4) {
+  const q = s4.indexOf("?");
+  if (q !== -1)
+    s4 = s4.slice(0, q);
+  const h = s4.indexOf("#");
+  if (h !== -1)
+    s4 = s4.slice(0, h);
+  return s4;
+}
+function normalizeRoute(path) {
+  if (typeof path !== "string" || path.length === 0) {
+    throw new TypeError("normalizeRoute: input must be a non-empty string");
+  }
+  if (!path.startsWith("/")) {
+    throw new TypeError(`normalizeRoute: input must be absolute (start with '/'); got ${JSON.stringify(path)}`);
+  }
+  let s4 = stripQueryAndHash(path);
+  s4 = decodeUnreservedOnly(s4);
+  s4 = s4.replace(/\/+/g, "/");
+  if (s4.length > 1 && s4.endsWith("/"))
+    s4 = s4.slice(0, -1);
+  return s4;
+}
+
+// ../../sdk-contracts/dist/schemas.js
+var NO_CSS_BREAKOUT_PATTERN = /^[^{}]*$/;
+var AnchorIdZ = external_exports.object({
+  selector: external_exports.string().regex(NO_CSS_BREAKOUT_PATTERN, {
+    message: 'selector must not contain "{" or "}" \u2014 not valid CSS selector syntax, and content:hideBySelector injects this value directly into a <style> element where these characters would break out of the generated rule.'
+  }).describe("CSS selector for the target element"),
+  route: external_exports.union([external_exports.string(), external_exports.array(external_exports.string())]).superRefine((value, ctx) => {
+    for (const route of Array.isArray(value) ? value : [value]) {
+      let canonical;
+      try {
+        canonical = normalizeRoute(route);
+      } catch (err) {
+        ctx.addIssue({
+          code: external_exports.ZodIssueCode.custom,
+          message: `route must be an absolute path starting with "/" (got ${JSON.stringify(route)}): ${err instanceof Error ? err.message : String(err)}`
+        });
+        continue;
+      }
+      if (canonical !== route) {
+        ctx.addIssue({
+          code: external_exports.ZodIssueCode.custom,
+          message: `route ${JSON.stringify(route)} is not canonical \u2014 use ${JSON.stringify(canonical)} (this must match what the backend's RouteCanonicalityCheck accepts)`
+        });
+      }
+    }
+  }).describe("URL path(s) where this element exists")
+}).strict().describe("DOM element target. selector = CSS selector, route = URL path(s) where the element exists.");
+var AuthoringFieldsZ = {
+  id: external_exports.string().optional().describe('Stable action identifier (e.g. "act_3db6a14d2ab0").'),
+  title: external_exports.string().max(200).optional().describe("Authoring-only: short label shown on the action plan dashboard. Stripped before serving to the runtime SDK."),
+  description: external_exports.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: external_exports.array(external_exports.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",
+  "ui.hesitate",
+  "ui.rage_click",
+  // Navigation
+  "nav.page_view",
+  "nav.page_leave"
+];
+var CountableEventZ = external_exports.enum(COUNTABLE_EVENTS).describe("Event name to count. ui.* = user interactions and behavioral detectors (hesitate, rage_click, scroll_thrash, focus_bounce, idle, hover); nav.* = page navigation.");
+var SESSION_METRIC_KEYS = ["time_on_page", "page_views", "scroll_depth"];
+var SessionMetricKeyZ = external_exports.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 = external_exports.object({
+  type: external_exports.literal("page_url"),
+  url: external_exports.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 = external_exports.object({
+  type: external_exports.literal("route"),
+  routeId: external_exports.string().describe("Named route ID from the route filter")
+}).describe("Fires when the current route matches a named route ID.");
+var AnchorVisibleConditionZ = external_exports.object({
+  type: external_exports.literal("anchor_visible"),
+  anchorId: external_exports.string().describe("CSS selector of the anchor element"),
+  state: external_exports.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 = external_exports.object({
+  type: external_exports.literal("event_occurred"),
+  eventName: external_exports.string().describe('Event name (e.g. "ui.click", "$pageview")'),
+  withinMs: external_exports.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 = external_exports.object({
+  type: external_exports.literal("state_equals"),
+  key: external_exports.string().describe("Key in the SDK persistent state store (localStorage). Only valid for keys the host app explicitly sets via syntro.state.set()."),
+  value: external_exports.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 = external_exports.object({
+  type: external_exports.literal("viewport"),
+  minWidth: external_exports.number().optional().describe("Minimum viewport width in pixels"),
+  maxWidth: external_exports.number().optional().describe("Maximum viewport width in pixels"),
+  minHeight: external_exports.number().optional().describe("Minimum viewport height in pixels"),
+  maxHeight: external_exports.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 = external_exports.object({
+  type: external_exports.literal("session_metric"),
+  key: SessionMetricKeyZ,
+  operator: external_exports.enum(["gte", "lte", "eq", "gt", "lt"]),
+  threshold: external_exports.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 = external_exports.object({
+  type: external_exports.literal("dismissed"),
+  key: external_exports.string().describe("Dismissal key (usually a tile or action ID)"),
+  inverted: external_exports.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 = external_exports.object({
+  type: external_exports.literal("cooldown_active"),
+  key: external_exports.string().describe("Cooldown key"),
+  inverted: external_exports.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 = external_exports.object({
+  type: external_exports.literal("frequency_limit"),
+  key: external_exports.string().describe("Frequency counter key"),
+  limit: external_exports.number().describe("Maximum allowed count"),
+  inverted: external_exports.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 = external_exports.object({
+  equals: external_exports.union([external_exports.string(), external_exports.number(), external_exports.boolean()]).optional(),
+  contains: external_exports.string().optional()
+}).refine((operator) => Number(operator.equals !== void 0) + Number(operator.contains !== void 0) === 1, {
+  message: "Exactly one of equals or contains must be specified."
+}).describe("Match operator for counter filters. Exactly one of equals or contains must be specified.");
+var CounterDefZ = external_exports.object({
+  events: external_exports.array(CountableEventZ).min(1).describe("Event names to count. Use values from the countable events enum."),
+  match: external_exports.record(external_exports.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 = external_exports.object({
+  type: external_exports.literal("event_count"),
+  key: external_exports.string().describe("Unique key for this counter (used for accumulator registration)"),
+  operator: external_exports.enum(["gte", "lte", "eq", "gt", "lt"]),
+  count: external_exports.number().int().min(0).describe("Target count threshold"),
+  withinMs: external_exports.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 = external_exports.discriminatedUnion("type", [
+  PageUrlConditionZ,
+  RouteConditionZ,
+  AnchorVisibleConditionZ,
+  EventOccurredConditionZ,
+  StateEqualsConditionZ,
+  ViewportConditionZ,
+  SessionMetricConditionZ,
+  DismissedConditionZ,
+  CooldownActiveConditionZ,
+  FrequencyLimitConditionZ,
+  EventCountConditionZ
+]);
+var RuleZ = external_exports.object({
+  conditions: external_exports.array(ConditionZ).describe("Array of conditions \u2014 ALL must match (AND logic) for this rule to fire."),
+  value: external_exports.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 = external_exports.object({
+  type: external_exports.literal("rules"),
+  rules: external_exports.array(RuleZ).describe("Ordered list of rules. Evaluated top-to-bottom \u2014 first match wins."),
+  default: external_exports.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 = external_exports.object({
+  type: external_exports.literal("score"),
+  field: external_exports.string(),
+  threshold: external_exports.number(),
+  above: external_exports.unknown(),
+  below: external_exports.unknown()
+}).describe("Score-based strategy. Compares a field value against a threshold.");
+var ModelStrategyZ = external_exports.object({
+  type: external_exports.literal("model"),
+  modelId: external_exports.string(),
+  inputs: external_exports.array(external_exports.string()),
+  outputMapping: external_exports.record(external_exports.string(), external_exports.unknown()),
+  default: external_exports.unknown()
+}).describe("ML model strategy. Sends inputs to a model and maps outputs.");
+var ExternalStrategyZ = external_exports.object({
+  type: external_exports.literal("external"),
+  endpoint: external_exports.string(),
+  method: external_exports.enum(["GET", "POST"]).optional(),
+  default: external_exports.unknown(),
+  timeoutMs: external_exports.number().optional()
+}).describe("External API strategy. Calls an endpoint to determine the value.");
+var DecisionStrategyZ = external_exports.discriminatedUnion("type", [
+  RuleStrategyZ,
+  ScoreStrategyZ,
+  ModelStrategyZ,
+  ExternalStrategyZ
+]);
+var TriggerWhenZ = DecisionStrategyZ.nullable().optional();
+var EventScopeZ = external_exports.object({
+  events: external_exports.array(external_exports.string()),
+  urlContains: external_exports.string().optional(),
+  props: external_exports.record(external_exports.union([external_exports.string(), external_exports.number(), external_exports.boolean()])).optional()
+});
+var NotifyZ = external_exports.object({
+  title: external_exports.string().optional().describe("Notification title"),
+  body: external_exports.string().optional().describe("Notification body text"),
+  icon: external_exports.string().optional().describe("Notification icon (emoji or URL)")
+}).describe("Optional toast notification shown when this action triggers.").nullable().optional();
+
+// ../../sdk-contracts/dist/viewport.js
+var SIZE_CLASS_ATTR = "data-size";
+var MEDIUM_MIN_WIDTH_PX = 600;
+var EXPANDED_MIN_WIDTH_PX = 1200;
+function classifySize(widthPx) {
+  if (widthPx >= EXPANDED_MIN_WIDTH_PX)
+    return "expanded";
+  if (widthPx >= MEDIUM_MIN_WIDTH_PX)
+    return "medium";
+  return "compact";
+}
+var ContainerSizeController = class {
+  constructor(host) {
+    this.value = "compact";
+    this.width = 0;
+    this._off = null;
+    this._host = host;
+    host.addController(this);
+  }
+  _take(width) {
+    this.width = width;
+    const next = classifySize(width);
+    const stamped = this._host.getAttribute(SIZE_CLASS_ATTR);
+    this.value = next;
+    if (stamped !== next) {
+      this._host.setAttribute(SIZE_CLASS_ATTR, next);
+      this._host.requestUpdate();
+    }
+  }
+  hostConnected() {
+    const RO = typeof ResizeObserver === "function" ? ResizeObserver : void 0;
+    if (!RO) {
+      const onResize = () => this._take(window.innerWidth);
+      onResize();
+      window.addEventListener("resize", onResize, { passive: true });
+      this._off = () => window.removeEventListener("resize", onResize);
+      return;
+    }
+    this._take(this._host.getBoundingClientRect().width);
+    const ro = new RO((entries) => {
+      for (const entry2 of entries)
+        this._take(entry2.contentRect.width);
+    });
+    ro.observe(this._host);
+    this._off = () => ro.disconnect();
+  }
+  hostDisconnected() {
+    this._off?.();
+    this._off = null;
+  }
+};
+
+// ../../sdk-contracts/dist/live-price.js
+var PRODUCT_ADAPTER_KEY = "__SYNTRO_PRODUCT_ADAPTER__";
+
+// ../../canvases/postcard-guide/dist/cart.js
+function getCart() {
+  const adapter = window[PRODUCT_ADAPTER_KEY];
+  return adapter && typeof adapter.addToCart === "function" && typeof adapter.openCart === "function" ? adapter : null;
+}
+
+// ../../canvases/postcard-guide/dist/host.js
+var HINT_MAX = 60;
+var PART_MAX = 20;
+var PRIVATE_PATHS = /^\/(account|orders|checkouts?|cart)(\/|$)/i;
+var LANDING_RECORD_KEY = "syntro_initial_attrs";
+var NAME_MAX = 60;
+function pathWords(path) {
+  if (PRIVATE_PATHS.test(path))
+    return "";
+  return path.split("/").map((segment) => segment.split(/[-_.]+/).filter((part) => /^[A-Za-z]+$/.test(part) && part.length <= PART_MAX).join("-")).filter(Boolean).join(" ").slice(-HINT_MAX).trim();
+}
+function landingRecord() {
+  try {
+    const raw = localStorage.getItem(LANDING_RECORD_KEY);
+    const data = raw ? JSON.parse(raw).data : null;
+    return data && typeof data === "object" ? data : {};
+  } catch {
+    return {};
+  }
+}
+function landingHints() {
+  const record = landingRecord();
+  const hints = [];
+  const words = pathWords(typeof record.initial_page_path === "string" ? record.initial_page_path : location.pathname);
+  if (words)
+    hints.push(words);
+  const host = typeof record.referrer_hostname === "string" ? record.referrer_hostname : "";
+  if (/^[A-Za-z0-9.-]{1,60}$/.test(host) && host !== location.hostname)
+    hints.push(host);
+  return hints.slice(0, 3);
+}
+function consentGranted() {
+  try {
+    return window.SynOS?.consent?.getStatus?.() === "granted";
+  } catch {
+    return false;
+  }
+}
+function storeName() {
+  const meta = document.querySelector('meta[property="og:site_name"]');
+  return (meta?.content ?? "").trim().slice(0, NAME_MAX);
+}
+
+// ../../canvases/postcard-guide/dist/page.js
+import { html as html8, LitElement as LitElement2, nothing as nothing7 } from "lit";
+import { repeat } from "lit/directives/repeat.js";
+import { html as staticHtml, unsafeStatic } from "lit/static-html.js";
+
+// ../../canvases/postcard-guide/dist/copy.js
+var DEFAULT_COPY = Object.freeze({
+  ask_placeholder: "Tell us what you're looking for",
+  known_label: "What we know",
+  need_headline: "What you need",
+  best_fit: "Best fit for you",
+  because_label: "Why it's here",
+  back_label: "Back to your picks",
+  saved_failed: "Added to your cart. We couldn't save that just now.",
+  guide_name: "Shopping guide",
+  done_label: "That's everything",
+  also_label: "Also worth a look"
+});
+var filled = /* @__PURE__ */ new WeakMap();
+function copyOf(view) {
+  const sent = view?.copy;
+  if (!sent || typeof sent !== "object")
+    return DEFAULT_COPY;
+  const known = filled.get(sent);
+  if (known)
+    return known;
+  const out = { ...DEFAULT_COPY };
+  for (const key of Object.keys(DEFAULT_COPY)) {
+    const word = sent[key];
+    if (typeof word === "string" && word.trim())
+      out[key] = word;
+  }
+  filled.set(sent, out);
+  return out;
+}
+
+// ../../canvases/postcard-guide/dist/templates/compare.js
+import { css as css3, html as html3, nothing as nothing2 } from "lit";
+
+// ../../canvases/postcard-guide/dist/templates/base.js
+import { LitElement } from "lit";
+var GUIDE_TAP_EVENT = "guide-tap";
+var GUIDE_PICK_EVENT = "guide-pick";
+var GUIDE_TURN_EVENT = "guide-turn";
+var _GuideTemplate = class _GuideTemplate extends LitElement {
+  constructor() {
+    super();
+    this.size = new ContainerSizeController(this);
+    this.view = null;
+    this.turnId = "";
+    this.moveId = "";
+    this.cart = () => null;
+    this.busy = false;
+    this.copy = DEFAULT_COPY;
+    this._slots = {};
+  }
+  /** Replace one slot's text (the words stream). A path this template does not draw is kept and never shown. */
+  setSlot(path, text) {
+    this._slots = { ...this._slots, [path]: text };
+  }
+  /** Focus this template's heading. The frame calls it only after a shopper's own tap. */
+  async focusHeading() {
+    await this.updateComplete;
+    this.renderRoot.querySelector("[data-heading]")?.focus({ preventScroll: true });
+  }
+  slotText(path, fallback) {
+    return this._slots[path] ?? fallback ?? "";
+  }
+  busyAttr() {
+    return this.busy ? "true" : "false";
+  }
+  emitTap(tap) {
+    if (this.busy)
+      return;
+    this.dispatchEvent(new CustomEvent(GUIDE_TAP_EVENT, { detail: tap, bubbles: true, composed: true }));
+  }
+  emitPick(itemId, handle, variantId = null) {
+    if (this.busy)
+      return;
+    this.dispatchEvent(new CustomEvent(GUIDE_PICK_EVENT, {
+      detail: { itemId, handle, variantId },
+      bubbles: true,
+      composed: true
+    }));
+  }
+};
+_GuideTemplate.properties = {
+  view: { attribute: false },
+  turnId: { attribute: false },
+  moveId: { attribute: false },
+  cart: { attribute: false },
+  busy: { type: Boolean },
+  copy: { attribute: false },
+  _slots: { state: true }
+};
+var GuideTemplate = _GuideTemplate;
+
+// ../../canvases/postcard-guide/dist/templates/fit.js
+function fitOf(payload) {
+  const inStock = payload.variants.filter((v) => v.in_stock).length;
+  return inStock === 0 ? "soldout" : inStock === 1 ? "add" : "choose";
+}
+async function checkFit(cart, handle) {
+  if (!cart?.fetchVariants)
+    return "choose";
+  try {
+    return fitOf(await cart.fetchVariants(handle));
+  } catch {
+    return "choose";
+  }
+}
+
+// ../../canvases/postcard-guide/dist/templates/format.js
+import { html } from "lit";
+function picture(src, name) {
+  return src ? html`<img src=${src} alt="" loading="lazy" />` : html`<span class="standin" aria-hidden="true">${standinInitial(name) ?? ""}</span>`;
+}
+function formatPrice(price, currency) {
+  if (price == null || !(price > 0) || !currency)
+    return null;
+  try {
+    return new Intl.NumberFormat(void 0, { style: "currency", currency }).format(price);
+  } catch {
+    return null;
+  }
+}
+
+// ../../canvases/postcard-guide/dist/templates/parts.js
+import { css, html as html2, nothing } from "lit";
+function dots(value, label) {
+  return html2`<span class="dots" role="img" aria-label=${label}
+    >${[1, 2, 3].map((n2) => html2`<span class=${n2 <= value ? "dot on" : "dot"}></span>`)}</span
+  >`;
+}
+function meter(t2, value) {
+  return html2`<div class="meter">
+    <img src=${t2.image} alt="" />
+    <span class="meter-label" aria-hidden="true">${t2.label}</span>
+    ${dots(value, `${t2.label}: ${value} of 3`)}
+  </div>`;
+}
+function stampRow(stamps, label) {
+  if (!stamps.length)
+    return nothing;
+  return html2`<ul class="because" aria-label=${label}>
+    ${stamps.map((s4) => html2`<li><img class="stamp" src=${s4.image} alt=${s4.label} /></li>`)}
+  </ul>`;
+}
+var partStyles = css`
+  /* Read by a screen reader, not drawn. */
+  .sr {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  .dots {
+    display: inline-flex;
+    gap: 4px;
+    flex: none;
+  }
+  .dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    /* An empty dot is a ring in the text color, so it stays visible (WCAG 1.4.11). */
+    box-shadow: inset 0 0 0 1.5px var(--sc-tile-text-color, #4b5563);
+  }
+  .dot.on {
+    background: var(--sc-color-primary, #111827);
+    box-shadow: none;
+  }
+  .meter {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-height: 36px;
+    /* The dots stay near their label on a wide body. */
+    max-width: 420px;
+  }
+  .meter img {
+    flex: none;
+    width: 36px;
+    height: 36px;
+    border-radius: 8px;
+  }
+  .meter-label {
+    flex: 1;
+    min-width: 0;
+    font-weight: 700;
+    font-size: 15.2px;
+    line-height: 1.2;
+  }
+  .because {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+  /* Forced colors (Windows High Contrast) drops backgrounds and box-shadows, which
+     erased every dot: a filled dot is CanvasText, an empty one a CanvasText ring.
+     Filled buttons lose their fill too, so they get a border (:host raises them over
+     each template's own border: 0). */
+  @media (forced-colors: active) {
+    .dot {
+      border: 1.5px solid CanvasText;
+      box-shadow: none;
+    }
+    .dot.on {
+      background: CanvasText;
+      forced-color-adjust: none;
+    }
+    :host .add,
+    :host .choose,
+    :host .ghost {
+      border: 2px solid ButtonText;
+    }
+  }
+  .because .stamp {
+    width: 40px;
+    height: 48px;
+    padding: 2px;
+    border: 2px solid var(--sc-color-primary, #111827);
+    border-radius: 5px;
+    /* A stamp's own white mount, in both schemes (the frame's stamps). */
+    background: #ffffff;
+    box-shadow:
+      inset 0 0 0 2px #ffffff,
+      0 2px 6px rgb(0 0 0 / 0.18);
+    object-fit: cover;
+  }
+`;
+
+// ../../canvases/postcard-guide/dist/templates/styles.js
+import { css as css2, unsafeCSS } from "lit";
+var templateStyles = css2`
+  :host {
+    display: block;
+    box-sizing: border-box;
+    min-height: 100%;
+    padding: 20px 16px 28px;
+    color: var(--sc-tile-title-color, #111827);
+    font-family: var(--sc-font-family, system-ui, sans-serif);
+  }
+  :host([data-size='medium']),
+  :host([data-size='expanded']) {
+    padding: 28px 32px 36px;
+  }
+  * {
+    box-sizing: border-box;
+  }
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  button {
+    font: inherit;
+    color: inherit;
+    cursor: pointer;
+  }
+  button[aria-disabled='true'] {
+    cursor: progress;
+  }
+  [data-heading] {
+    outline: none;
+  }
+  button:focus-visible,
+  a:focus-visible,
+  [data-heading]:focus-visible {
+    outline: 3px solid var(--sc-color-primary, #111827);
+    outline-offset: 3px;
+  }
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  .eyebrow {
+    margin: 0 0 6px;
+    font-size: 12.8px;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--sc-tile-text-color, #4b5563);
+  }
+  .headline {
+    margin: 0 0 16px;
+    font-size: 28px;
+    line-height: 1.1;
+    font-weight: 800;
+    letter-spacing: -0.01em;
+  }
+  :host([data-size='medium']) .headline,
+  :host([data-size='expanded']) .headline {
+    font-size: 36px;
+  }
+  .voice {
+    margin: -6px 0 18px;
+    font-size: 16.8px;
+    font-weight: 700;
+    line-height: 1.3;
+    color: var(--sc-color-primary, #111827);
+  }
+  .standin {
+    display: grid;
+    place-items: center;
+    width: 100%;
+    height: 100%;
+    background: ${unsafeCSS(IMAGE_STANDIN_BACKGROUND)};
+    color: var(--sc-launcher-color, #ffffff);
+    font-size: 40px;
+    font-weight: 800;
+  }
+  .on-photo {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: 36px 14px 12px;
+    color: #ffffff;
+    font-weight: 800;
+    line-height: 1.15;
+    text-align: left;
+    background: linear-gradient(transparent, rgb(0 0 0 / 0.68));
+  }
+  @media (forced-colors: active) {
+    .on-photo {
+      background: Canvas;
+      color: CanvasText;
+    }
+    button {
+      border: 1px solid ButtonText;
+    }
+  }
+`;
+
+// ../../canvases/postcard-guide/dist/templates/compare.js
+var GUIDE_COMPARE = "guide-compare";
+var _GuideCompare = class _GuideCompare extends GuideTemplate {
+  constructor() {
+    super();
+    this._asked = /* @__PURE__ */ new Set();
+    this._fits = {};
+  }
+  updated(changed) {
+    if (changed.has("view") || changed.has("cart"))
+      void this._checkVariants();
+  }
+  /** Ask the platform how many variants each product has in stock, once per product. */
+  async _checkVariants() {
+    const cart = this.cart();
+    const view = this.view;
+    if (!view || !cart?.fetchVariants)
+      return;
+    const pending = view.options.map((o) => o.product.handle).filter((h) => !this._asked.has(h));
+    if (!pending.length)
+      return;
+    for (const handle of pending)
+      this._asked.add(handle);
+    const fits = {};
+    await Promise.all(pending.map(async (handle) => {
+      fits[handle] = await checkFit(cart, handle);
+    }));
+    this._fits = { ...this._fits, ...fits };
+  }
+  render() {
+    const view = this.view;
+    if (!view)
+      return nothing2;
+    return html3`<p class="eyebrow">${view.label}</p>
+      <h2 class="headline" tabindex="-1" data-heading data-slot="headline">${this.slotText("headline", view.headline)}</h2>
+      <ul class="legend">
+        ${view.tradeoffs.map((t2) => html3`<li><img src=${t2.image} alt="" /><span>${t2.label}</span></li>`)}
+      </ul>
+      <ul class="options" data-count=${view.options.length}>
+        ${view.options.map((o) => this._option(view, o))}
+      </ul>`;
+  }
+  _option(view, o) {
+    const handle = o.product.handle;
+    const fit = this._fits[handle] ?? (this.cart()?.fetchVariants ? "checking" : "choose");
+    const path = `options.${handle}.reason`;
+    const price = formatPrice(o.product.price, o.product.currency);
+    return html3`<li class="option" ?data-best=${o.best}>
+      <div class="photo">
+        ${picture(o.product.image_url, o.product.name)}
+        ${o.best ? html3`<span class="best">${this.copy.best_fit}</span>` : nothing2}
+        <div class="on-photo">
+          <button
+            class="name"
+            aria-disabled=${this.busyAttr()}
+            @click=${() => this.emitTap({ kind: "product", handle: o.product.handle })}
+          >
+            ${o.product.name}
+          </button>
+          ${price ? html3`<span class="price">${price}</span>` : nothing2}
+        </div>
+      </div>
+      <div class="body">
+        <div class="meters">
+          ${view.tradeoffs.map((t2) => {
+      const value = o.values[t2.id] ?? 0;
+      return html3`<div class="meter">
+              <img src=${t2.image} alt=${t2.label} />
+              ${dots(value, `${value} of 3`)}
+            </div>`;
+    })}
+        </div>
+        <p class="reason" data-slot=${path}>${this.slotText(path, o.reason)}</p>
+        ${this._action(fit, view.item_id, handle, o.product.name)}
+      </div>
+    </li>`;
+  }
+  /** Visible words first (WCAG 2.5.3), then the product: three of these sit side by side. */
+  _action(fit, itemId, handle, name) {
+    if (fit === "soldout")
+      return html3`<span class="sold-out">Sold out</span>`;
+    if (fit === "choose")
+      return html3`<button
+        class="choose"
+        aria-label=${`Choose options: ${name}`}
+        aria-disabled=${this.busyAttr()}
+        @click=${() => this.emitTap({ kind: "product", handle })}
+      >
+        Choose options
+      </button>`;
+    if (fit === "checking")
+      return html3`<button class="add" aria-disabled="true">Checking stock</button>`;
+    return html3`<button
+      class="add"
+      aria-label=${`Add to cart: ${name}`}
+      aria-disabled=${this.busyAttr()}
+      @click=${() => this.emitPick(itemId, handle)}
+    >
+      Add to cart
+    </button>`;
+  }
+};
+_GuideCompare.properties = { _fits: { state: true } };
+_GuideCompare.styles = [
+  templateStyles,
+  partStyles,
+  css3`
+      .legend {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px 16px;
+        margin: 0 0 16px;
+      }
+      .legend li {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-weight: 700;
+        font-size: 14.4px;
+      }
+      .legend img {
+        width: 32px;
+        height: 32px;
+        border-radius: 8px;
+      }
+      .options {
+        display: flex;
+        gap: 14px;
+        overflow-x: auto;
+        scroll-snap-type: x mandatory;
+        overscroll-behavior-x: contain;
+        margin: 0 -16px;
+        padding: 0 16px 8px;
+        scroll-padding-inline: 16px;
+      }
+      :host([data-size='medium']) .options,
+      :host([data-size='expanded']) .options {
+        display: grid;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        gap: 18px;
+        overflow: visible;
+        margin: 0;
+        padding: 0;
+      }
+      :host([data-size='medium']) .options[data-count='2'],
+      :host([data-size='expanded']) .options[data-count='2'] {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+      .option {
+        flex: 0 0 82%;
+        scroll-snap-align: start;
+        display: flex;
+        flex-direction: column;
+        border-radius: var(--sc-border-radius, 18px);
+        overflow: hidden;
+        /* A shade off the page, so a card reads as a card in both schemes. */
+        background: var(--sc-content-search-background, #f4f4f5);
+        box-shadow: 0 8px 22px rgb(0 0 0 / 0.12);
+        border: 2px solid transparent;
+      }
+      .option[data-best] {
+        border-color: var(--sc-color-primary, #111827);
+      }
+      /* The headline is a sentence of voice, not a title: one size down. */
+      .headline {
+        font-size: 21.6px;
+        line-height: 1.2;
+      }
+      :host([data-size='medium']) .headline,
+      :host([data-size='expanded']) .headline {
+        font-size: 28px;
+      }
+      .photo {
+        position: relative;
+        flex: none;
+        aspect-ratio: 1 / 1;
+        overflow: hidden;
+        background: #ffffff;
+      }
+      /* Out of flow, so a tall store photo can never stretch the square. */
+      .photo img {
+        position: absolute;
+        inset: 0;
+        object-fit: contain;
+        padding: 8% 8% 26%;
+      }
+      .photo .standin {
+        position: absolute;
+        inset: 0;
+      }
+      /* Store photos sit on white: the name sits on a solid caption plate. */
+      .photo .on-photo {
+        padding: 10px 12px 12px;
+        background: rgb(12 20 18 / 0.86);
+      }
+      .best {
+        position: absolute;
+        top: 12px;
+        left: 12px;
+        padding: 4px 10px;
+        border-radius: 999px;
+        background: var(--sc-color-primary, #111827);
+        color: var(--sc-accent-foreground, #ffffff);
+        font-size: 11.52px;
+        font-weight: 800;
+        letter-spacing: 0.04em;
+        text-transform: uppercase;
+      }
+      /* A button that reads as the name on the photo: it opens product detail. */
+      .on-photo .name {
+        display: block;
+        padding: 0;
+        border: 0;
+        background: none;
+        color: #ffffff;
+        font-size: 17.6px;
+        font-weight: 800;
+        line-height: 1.15;
+        text-align: left;
+      }
+      .on-photo .price {
+        display: block;
+        margin-top: 2px;
+        font-weight: 700;
+      }
+      .body {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        flex: 1;
+        padding: 12px 14px 14px;
+      }
+      .meters {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+      }
+      .meter {
+        min-height: 0;
+      }
+      .meter img {
+        width: 26px;
+        height: 26px;
+        border-radius: 6px;
+      }
+      .reason {
+        margin: 0;
+        font-weight: 600;
+      }
+      .add,
+      .choose,
+      .sold-out {
+        display: block;
+        width: 100%;
+        min-height: 44px;
+        margin-top: auto;
+        padding: 12px;
+        border-radius: 999px;
+        text-align: center;
+        font-weight: 800;
+      }
+      .add {
+        border: 0;
+        background: var(--sc-color-primary, #111827);
+        color: var(--sc-accent-foreground, #ffffff);
+      }
+      .choose {
+        border: 2px solid var(--sc-color-primary, #111827);
+        background: transparent;
+        color: var(--sc-tile-title-color, #111827);
+      }
+      .sold-out {
+        border: 1px dashed var(--sc-tile-text-color, #4b5563);
+        color: var(--sc-tile-text-color, #4b5563);
+      }
+    `
+];
+var GuideCompare = _GuideCompare;
+if (!customElements.get(GUIDE_COMPARE)) {
+  customElements.define(GUIDE_COMPARE, GuideCompare);
+}
+
+// ../../canvases/postcard-guide/dist/templates/hero-pick.js
+import { css as css5, html as html4, nothing as nothing3 } from "lit";
+
+// ../../canvases/postcard-guide/dist/templates/product-styles.js
+import { css as css4 } from "lit";
+var productStyles = css4`
+  .photo {
+    position: relative;
+    overflow: hidden;
+    border-radius: var(--sc-border-radius, 18px);
+    /* Store photos are shot on white: their own paper, in both schemes. */
+    background: #ffffff;
+    box-shadow: 0 12px 30px rgb(0 0 0 / 0.16);
+  }
+  /* Out of flow, so a tall packshot never sizes the photo; contained, never cropped. */
+  .photo img,
+  .photo .standin {
+    position: absolute;
+    inset: 0;
+  }
+  /* The packshot clears the tag and stops at the plate. */
+  .photo > img {
+    object-fit: contain;
+    padding: 44px 16px 80px;
+  }
+  .photo .because {
+    position: absolute;
+    top: 14px;
+    right: 14px;
+    justify-content: flex-end;
+    max-width: 60%;
+  }
+  .photo .because img {
+    position: static;
+  }
+  .best {
+    position: absolute;
+    top: 16px;
+    left: 16px;
+    padding: 5px 12px;
+    border-radius: 999px;
+    background: var(--sc-color-primary, #111827);
+    color: var(--sc-accent-foreground, #ffffff);
+    font-size: 12px;
+    font-weight: 800;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+  }
+  .plate {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 12px 16px 14px;
+    background: rgb(12 20 18 / 0.88);
+    color: #ffffff;
+  }
+  .plate h2 {
+    margin: 0;
+    font-size: 18.4px;
+    line-height: 1.15;
+    font-weight: 800;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+  .plate .price {
+    flex: none;
+    font-size: 18.4px;
+    font-weight: 800;
+  }
+  :host([data-size='medium']) .plate,
+  :host([data-size='expanded']) .plate {
+    padding: 18px 24px 20px;
+  }
+  :host([data-size='medium']) .plate h2,
+  :host([data-size='expanded']) .plate h2 {
+    font-size: 26.4px;
+    -webkit-line-clamp: 3;
+  }
+  :host([data-size='medium']) .photo > img,
+  :host([data-size='expanded']) .photo > img {
+    padding: 64px 40px 128px;
+  }
+  .eyebrow {
+    margin: 0;
+  }
+  .reason {
+    margin: 0;
+    font-size: 19.2px;
+    line-height: 1.25;
+    font-weight: 800;
+    letter-spacing: -0.005em;
+    color: var(--sc-color-primary, #111827);
+  }
+  :host([data-size='medium']) .reason,
+  :host([data-size='expanded']) .reason {
+    font-size: 29.6px;
+    line-height: 1.15;
+  }
+  .actions {
+    display: flex;
+    gap: 10px;
+  }
+  .add,
+  .ghost,
+  .sold-out {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 52px;
+    padding: 0 22px;
+    border-radius: 999px;
+    font-weight: 800;
+    font-size: 16px;
+    text-decoration: none;
+  }
+  .add {
+    flex: 1.4;
+    border: 0;
+    background: var(--sc-color-primary, #111827);
+    color: var(--sc-accent-foreground, #ffffff);
+  }
+  .add[aria-disabled='true'] {
+    opacity: 0.55;
+  }
+  .ghost {
+    flex: 1;
+    border: 2px solid var(--sc-color-primary, #111827);
+    background: transparent;
+    color: var(--sc-tile-title-color, #111827);
+  }
+  .sold-out {
+    flex: 1.4;
+    border: 1px dashed var(--sc-tile-text-color, #4b5563);
+    color: var(--sc-tile-text-color, #4b5563);
+  }
+  :host([data-size='medium']) .actions .add,
+  :host([data-size='expanded']) .actions .add,
+  :host([data-size='medium']) .actions .sold-out,
+  :host([data-size='expanded']) .actions .sold-out {
+    flex: none;
+    min-width: 200px;
+  }
+  :host([data-size='medium']) .actions .ghost,
+  :host([data-size='expanded']) .actions .ghost {
+    flex: none;
+  }
+  @media (forced-colors: active) {
+    .plate {
+      background: Canvas;
+      color: CanvasText;
+    }
+  }
+`;
+
+// ../../canvases/postcard-guide/dist/templates/hero-pick.js
+var GUIDE_HERO_PICK = "guide-hero-pick";
+var _GuideHeroPick = class _GuideHeroPick extends GuideTemplate {
+  constructor() {
+    super();
+    this._fitSeq = 0;
+    this._openDetail = () => {
+      if (this.view)
+        this.emitTap({ kind: "product", handle: this.view.product.handle });
+    };
+    this._add = () => {
+      if (this.view && this._fit === "add") {
+        this.emitPick(this.view.item_id, this.view.product.handle);
+      }
+    };
+    this._fit = "checking";
+  }
+  willUpdate(changed) {
+    if (changed.has("view") || changed.has("cart"))
+      void this._checkFit();
+  }
+  async _checkFit() {
+    const seq = ++this._fitSeq;
+    const handle = this.view?.product.handle;
+    if (!handle)
+      return;
+    this._fit = "checking";
+    const fit = await checkFit(this.cart(), handle);
+    if (seq === this._fitSeq)
+      this._fit = fit;
+  }
+  render() {
+    const v = this.view;
+    if (!v)
+      return nothing3;
+    const p = v.product;
+    const price = formatPrice(p.price, p.currency);
+    return html4`<article class="hero">
+      <div class="photo">
+        ${picture(p.image_url, p.name)}
+        <span class="best">${this.copy.best_fit}</span>
+        ${stampRow(v.because, this.copy.because_label)}
+        <div class="plate">
+          <h2 tabindex="-1" data-heading>${p.name}</h2>
+          ${price ? html4`<span class="price">${price}</span>` : nothing3}
+        </div>
+      </div>
+      <div class="body">
+        <p class="eyebrow">${v.label}</p>
+        <p class="reason" data-slot="reason">${this.slotText("reason", v.reason)}</p>
+        <ul class="strengths" aria-label="How it does">
+          ${v.tradeoffs.map((t2) => html4`<li>${meter(t2, v.values[t2.id] ?? 0)}</li>`)}
+        </ul>
+        <div class="actions">
+          ${this._action()}
+          ${this._fit === "choose" ? nothing3 : html4`<button
+                  class="ghost"
+                  aria-label=${this._named("See details")}
+                  aria-disabled=${this.busyAttr()}
+                  @click=${this._openDetail}
+                >
+                  See details
+                </button>`}
+        </div>
+      </div>
+    </article>`;
+  }
+  /** The visible words first (WCAG 2.5.3), then which product: several heroes can share a feed. */
+  _named(action) {
+    return `${action}: ${this.view?.product.name ?? ""}`;
+  }
+  _action() {
+    switch (this._fit) {
+      case "checking":
+        return html4`<button class="add" aria-disabled="true">Checking stock</button>`;
+      case "soldout":
+        return html4`<span class="sold-out">Sold out</span>`;
+      case "add":
+        return html4`<button
+          class="add"
+          aria-label=${this._named("Add to cart")}
+          aria-disabled=${this.busyAttr()}
+          @click=${this._add}
+        >
+          Add to cart
+        </button>`;
+      default:
+        return html4`<button
+          class="add"
+          aria-label=${this._named("Choose options")}
+          aria-disabled=${this.busyAttr()}
+          @click=${this._openDetail}
+        >
+          Choose options
+        </button>`;
+    }
+  }
+};
+_GuideHeroPick.properties = { _fit: { state: true } };
+_GuideHeroPick.styles = [
+  templateStyles,
+  partStyles,
+  productStyles,
+  css5`
+      :host {
+        display: flex;
+        flex-direction: column;
+      }
+      .hero {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+      }
+      .photo {
+        flex: 1 1 auto;
+        min-height: 260px;
+      }
+      .body {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
+      .strengths {
+        display: grid;
+        gap: 8px 20px;
+      }
+      :host([data-size='medium']) .hero,
+      :host([data-size='expanded']) .hero {
+        display: grid;
+        grid-template-columns: minmax(0, 1.2fr) minmax(300px, 1fr);
+        align-items: center;
+        gap: 44px;
+      }
+      :host([data-size='medium']) .photo,
+      :host([data-size='expanded']) .photo {
+        align-self: stretch;
+        min-height: 520px;
+      }
+      :host([data-size='medium']) .body,
+      :host([data-size='expanded']) .body {
+        gap: 20px;
+      }
+    `
+];
+var GuideHeroPick = _GuideHeroPick;
+if (!customElements.get(GUIDE_HERO_PICK)) {
+  customElements.define(GUIDE_HERO_PICK, GuideHeroPick);
+}
+
+// ../../canvases/postcard-guide/dist/templates/pick-from-pictures.js
+import { css as css6, html as html5, nothing as nothing4 } from "lit";
+var GUIDE_PICK_FROM_PICTURES = "guide-pick-from-pictures";
+function lastSpan(count, size) {
+  if (count <= 1)
+    return 1;
+  const columns = size === "expanded" ? 4 : size === "medium" ? 3 : 2;
+  const cells = (size === "compact" ? 2 : 4) + count - 1;
+  const rest = cells % columns;
+  return rest === 0 ? 1 : columns - rest + 1;
+}
+var _GuidePickFromPictures = class _GuidePickFromPictures extends GuideTemplate {
+  render() {
+    const view = this.view;
+    if (!view)
+      return nothing4;
+    const span = lastSpan(view.choices.length, this.size.value);
+    const last = view.choices.length - 1;
+    return html5`<h2 class="headline" tabindex="-1" data-heading data-slot="question">${this.slotText("question", view.question)}</h2>
+      <ul class="choices">
+        ${view.choices.map((c2, i2) => html5`<li class=${i2 === last && span > 1 ? `span-${span}` : nothing4}>
+            <button
+              class="choice"
+              aria-label=${c2.title}
+              aria-disabled=${this.busyAttr()}
+              @click=${() => this.emitTap({ kind: "postcard", postcard_id: c2.id })}
+            >
+              <img src=${c2.image} alt="" loading="lazy" /><span class="on-photo" aria-hidden="true">${c2.title}</span>
+            </button>
+          </li>`)}
+      </ul>`;
+  }
+};
+_GuidePickFromPictures.styles = [
+  templateStyles,
+  css6`
+      .choices {
+        display: grid;
+        gap: 12px;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        grid-auto-rows: 176px;
+      }
+      .choices li:first-child {
+        grid-column: span 2;
+      }
+      :host([data-size='medium']) .choices {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        grid-auto-rows: 192px;
+        gap: 16px;
+      }
+      :host([data-size='expanded']) .choices {
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+        grid-auto-rows: 208px;
+        gap: 18px;
+      }
+      :host([data-size='medium']) .choices li:first-child,
+      :host([data-size='expanded']) .choices li:first-child {
+        grid-column: span 2;
+        grid-row: span 2;
+      }
+      /* The last picture closes the last row (lastSpan); a class, not a
+         style attribute, so a strict host CSP cannot drop it. */
+      .choices li.span-2 {
+        grid-column: span 2;
+      }
+      .choices li.span-3 {
+        grid-column: span 3;
+      }
+      .choices li.span-4 {
+        grid-column: span 4;
+      }
+      .choice {
+        position: relative;
+        display: block;
+        width: 100%;
+        height: 100%;
+        padding: 0;
+        border: 0;
+        border-radius: var(--sc-border-radius, 18px);
+        overflow: hidden;
+        background: var(--sc-content-search-background, #e7e2d6);
+        box-shadow: 0 8px 20px rgb(0 0 0 / 0.12);
+      }
+      .choice .on-photo {
+        font-size: 17.6px;
+      }
+      li:first-child .choice .on-photo {
+        font-size: 24px;
+      }
+      @media (prefers-reduced-motion: no-preference) {
+        .choice img {
+          transition: transform 300ms ease;
+        }
+        .choice:hover img {
+          transform: scale(1.04);
+        }
+      }
+    `
+];
+var GuidePickFromPictures = _GuidePickFromPictures;
+if (!customElements.get(GUIDE_PICK_FROM_PICTURES)) {
+  customElements.define(GUIDE_PICK_FROM_PICTURES, GuidePickFromPictures);
+}
+
+// ../../canvases/postcard-guide/dist/templates/product-detail.js
+import { css as css7, html as html6, nothing as nothing5 } from "lit";
+import { styleMap } from "lit/directives/style-map.js";
+var GUIDE_PRODUCT_DETAIL = "guide-product-detail";
+var GUIDE_DETAIL_BACK_EVENT = "guide-detail-back";
+var COLOR = /^(#[0-9a-f]{3,8}|(rgb|rgba|hsl|hsla)\([0-9.,%\s/]+\)|[a-z]{3,20})$/i;
+function tilePrice(t2) {
+  if (!t2.price || t2.price_cents === 0)
+    return null;
+  return /[1-9]/.test(t2.price) ? t2.price : null;
+}
+var _GuideProductDetail = class _GuideProductDetail extends GuideTemplate {
+  constructor() {
+    super();
+    this._seq = 0;
+    this._warned = /* @__PURE__ */ new Set();
+    this._back = () => {
+      this.dispatchEvent(new CustomEvent(GUIDE_DETAIL_BACK_EVENT, { detail: {}, bubbles: true, composed: true }));
+    };
+    this._variants = { state: "checking" };
+    this._choice = {};
+  }
+  willUpdate(changed) {
+    if (changed.has("view")) {
+      this._choice = {};
+      void this._loadVariants();
+    }
+  }
+  async _loadVariants() {
+    const seq = ++this._seq;
+    const handle = this.view?.product.handle;
+    const cart = this.cart();
+    if (!handle || !cart?.fetchVariants) {
+      this._variants = { state: "unreadable" };
+      return;
+    }
+    this._variants = { state: "checking" };
+    try {
+      const data = await cart.fetchVariants(handle);
+      if (seq === this._seq)
+        this._variants = { state: "ready", data };
+    } catch {
+      if (seq === this._seq)
+        this._variants = { state: "unreadable" };
+    }
+  }
+  _add(variantId) {
+    const v = this.view;
+    if (v)
+      this.emitPick(v.item_id, v.product.handle, variantId);
+  }
+  render() {
+    const v = this.view;
+    if (!v)
+      return nothing5;
+    const p = v.product;
+    const price = formatPrice(p.price, p.currency);
+    return html6`<article class="detail">
+      <div class="photo">
+        ${picture(p.image_url, p.name)}
+        ${v.best ? html6`<span class="best">${this.copy.best_fit}</span>` : nothing5}
+        ${stampRow(v.because, this.copy.because_label)}
+        <div class="plate">
+          <h2 tabindex="-1" data-heading>${p.name}</h2>
+          ${price ? html6`<span class="price">${price}</span>` : nothing5}
+        </div>
+      </div>
+      <div class="body">
+        <p class="reason" data-slot="reason">${this.slotText("reason", v.reason)}</p>
+        ${this._buy(v)}
+        <section aria-labelledby="how">
+          <h3 id="how">How it does</h3>
+          <ul class="meters">
+            ${v.tradeoffs.map((t2) => html6`<li>${meter(t2, v.values[t2.id] ?? 0)}</li>`)}
+          </ul>
+        </section>
+        ${v.modules.map((m) => this._module(m))}
+        <button class="ghost back" @click=${this._back}>${this.copy.back_label}</button>
+      </div>
+    </article>`;
+  }
+  _buy(v) {
+    const s4 = this._variants;
+    if (s4.state === "checking") {
+      return html6`<div class="buy">
+        <button class="add" aria-disabled="true">Checking stock</button>
+      </div>`;
+    }
+    const choose = html6`<div class="buy">
+      <a class="add" href=${v.product.href}>Choose options</a>
+    </div>`;
+    if (s4.state === "unreadable")
+      return choose;
+    const inStock = s4.data.variants.filter((x) => x.in_stock);
+    if (inStock.length === 0) {
+      return html6`<div class="buy"><span class="sold-out">Sold out</span></div>`;
+    }
+    if (inStock.length === 1) {
+      return html6`<div class="buy">
+        <button
+          class="add"
+          aria-label=${`Add to cart: ${v.product.name}`}
+          aria-disabled=${this.busyAttr()}
+          @click=${() => this._add(inStock[0].id ?? null)}
+        >
+          Add to cart
+        </button>
+      </div>`;
+    }
+    const attrs = s4.data.attributes ?? [];
+    if (!attrs.length)
+      return choose;
+    const chosen = inStock.find((x) => attrs.every((a) => x.selection?.[a.key] === this._choice[a.key]));
+    const ready = !!chosen && !this.busy;
+    return html6`<div class="buy">
+      ${attrs.map((a) => html6`<fieldset class="options">
+          <legend>${a.label}</legend>
+          ${a.values.map((val) => {
+      const available = inStock.some((x) => x.selection?.[a.key] === val.id);
+      const color = val.swatch?.kind === "color" && COLOR.test(val.swatch.value) ? val.swatch.value : null;
+      return html6`<label class=${available ? "pill" : "pill out"}>
+              <input
+                type="radio"
+                name=${a.key}
+                .value=${val.id}
+                .checked=${this._choice[a.key] === val.id}
+                ?disabled=${!available}
+                @change=${() => {
+        this._choice = { ...this._choice, [a.key]: val.id };
+      }}
+              />
+              <span class="pill-face">
+                ${color ? html6`<span
+                        class="swatch"
+                        style=${styleMap({ backgroundColor: color })}
+                      ></span>` : nothing5}
+                <span>${val.label}</span>${available ? nothing5 : html6`<span class="sr">, sold out</span>`}
+              </span>
+            </label>`;
+    })}
+        </fieldset>`)}
+      <button
+        class="add"
+        aria-label=${`Add to cart: ${v.product.name}`}
+        aria-disabled=${ready ? "false" : "true"}
+        aria-describedby=${chosen ? nothing5 : "need-choice"}
+        @click=${() => {
+      if (chosen)
+        this._add(chosen.id ?? null);
+    }}
+      >
+        Add to cart
+      </button>
+      ${chosen ? nothing5 : html6`<p id="need-choice" class="hint">Choose your options first.</p>`}
+    </div>`;
+  }
+  _module(m) {
+    if (m.kind !== "other-products") {
+      if (!this._warned.has(m.kind)) {
+        this._warned.add(m.kind);
+        console.warn(`[postcard-guide] product detail cannot draw a ${m.kind} module; left out`);
+      }
+      return nothing5;
+    }
+    const icons = new Map((this.view?.tradeoffs ?? []).map((t2) => [t2.id, t2]));
+    return html6`<section class="others" aria-labelledby="others">
+      <h3 id="others">${this.copy.also_label}</h3>
+      <ul class="tiles">
+        ${m.payload.tiles.map((t2) => {
+      const icon = icons.get(t2.badges?.[0] ?? "");
+      const path = `modules.${m.kind}.tiles.${t2.recommended_product_id}.why_blurb`;
+      const price = tilePrice(t2);
+      return html6`<li>
+            <button
+              class="tile"
+              aria-disabled=${this.busyAttr()}
+              @click=${() => this.emitTap({ kind: "product", handle: t2.recommended_product_id })}
+            >
+              <span class="pic">
+                ${picture(t2.image_url, t2.name)}
+                ${price ? html6`<span class="tile-price">${price}</span>` : nothing5}
+              </span>
+              <span class="name">${t2.name}</span>
+              <span class="why">
+                ${icon ? html6`<img src=${icon.image} alt="" />` : nothing5}
+                <span data-slot=${path}>${this.slotText(path, t2.why_blurb)}</span>
+              </span>
+            </button>
+          </li>`;
+    })}
+      </ul>
+    </section>`;
+  }
+};
+_GuideProductDetail.properties = {
+  _variants: { state: true },
+  _choice: { state: true }
+};
+_GuideProductDetail.styles = [
+  templateStyles,
+  partStyles,
+  productStyles,
+  css7`
+      .detail {
+        display: grid;
+        gap: 20px;
+      }
+      /* The first screen on a phone holds the photo, the reason and the buy row. */
+      .photo {
+        height: 340px;
+      }
+      .body {
+        display: flex;
+        flex-direction: column;
+        gap: 22px;
+        min-width: 0;
+      }
+      h3 {
+        margin: 0 0 10px;
+        font-size: 12.8px;
+        font-weight: 800;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        color: var(--sc-tile-text-color, #4b5563);
+      }
+      .buy {
+        display: flex;
+        flex-direction: column;
+        gap: 14px;
+      }
+      .buy .add,
+      .buy .sold-out {
+        flex: none;
+      }
+      .options {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        margin: 0;
+        padding: 0;
+        border: 0;
+        min-width: 0;
+      }
+      .options legend {
+        margin-bottom: 10px;
+        padding: 0;
+        font-weight: 800;
+      }
+      .pill {
+        position: relative;
+        display: inline-flex;
+      }
+      .pill input {
+        position: absolute;
+        inset: 0;
+        margin: 0;
+        opacity: 0;
+        cursor: pointer;
+      }
+      .pill-face {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        min-width: 48px;
+        min-height: 44px;
+        padding: 0 16px;
+        border-radius: 999px;
+        border: 2px solid var(--sc-content-divider-color, rgb(0 0 0 / 0.2));
+        background: var(--sc-content-search-background, transparent);
+        font-weight: 700;
+      }
+      .pill input:checked + .pill-face {
+        border-color: var(--sc-color-primary, #111827);
+        background: var(--sc-color-primary, #111827);
+        color: var(--sc-accent-foreground, #ffffff);
+      }
+      .pill input:focus-visible + .pill-face {
+        outline: 3px solid var(--sc-color-primary, #111827);
+        outline-offset: 3px;
+      }
+      .pill.out .pill-face {
+        opacity: 0.5;
+        text-decoration: line-through;
+      }
+      .pill.out input {
+        cursor: not-allowed;
+      }
+      .swatch {
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        box-shadow:
+          inset 0 0 0 1px rgb(0 0 0 / 0.25),
+          0 0 0 2px #ffffff;
+      }
+      .hint {
+        margin: -4px 0 0;
+        font-size: 14.4px;
+        font-weight: 600;
+        color: var(--sc-tile-text-color, #4b5563);
+      }
+      .meters {
+        display: grid;
+        gap: 8px 24px;
+      }
+      .tiles {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 12px;
+      }
+      .tile {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+        padding: 0;
+        border: 0;
+        border-radius: var(--sc-border-radius, 16px);
+        overflow: hidden;
+        text-align: left;
+        background: var(--sc-content-search-background, #f4f4f5);
+        box-shadow: 0 6px 16px rgb(0 0 0 / 0.1);
+      }
+      .tile .pic {
+        position: relative;
+        display: block;
+        aspect-ratio: 1 / 1;
+        background: #ffffff;
+      }
+      .tile .pic img {
+        position: absolute;
+        inset: 0;
+        object-fit: contain;
+        padding: 10%;
+      }
+      .tile .pic .standin {
+        position: absolute;
+        inset: 0;
+      }
+      .tile .tile-price {
+        position: absolute;
+        top: 8px;
+        right: 8px;
+        padding: 3px 9px;
+        border-radius: 999px;
+        background: rgb(12 20 18 / 0.88);
+        color: #ffffff;
+        font-size: 12.8px;
+        font-weight: 800;
+      }
+      .tile .name {
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        /* Margin, not padding: a clamped line would show through padding. */
+        margin: 10px 12px 4px;
+        font-weight: 800;
+        font-size: 15.2px;
+        line-height: 1.2;
+        color: var(--sc-tile-title-color, #111827);
+      }
+      .tile .why {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-top: auto;
+        padding: 4px 12px 12px;
+        font-size: 13.6px;
+        font-weight: 700;
+        color: var(--sc-color-primary, #111827);
+      }
+      .tile .why img {
+        flex: none;
+        width: 24px;
+        height: 24px;
+        border-radius: 6px;
+      }
+      .back {
+        align-self: flex-start;
+        flex: none;
+      }
+      :host([data-size='medium']) .detail,
+      :host([data-size='expanded']) .detail {
+        grid-template-columns: minmax(0, 1.1fr) minmax(320px, 1fr);
+        align-items: start;
+        gap: 44px;
+      }
+      :host([data-size='medium']) .photo,
+      :host([data-size='expanded']) .photo {
+        position: sticky;
+        top: 0;
+        height: 600px;
+      }
+      :host([data-size='medium']) .tiles,
+      :host([data-size='expanded']) .tiles {
+        gap: 16px;
+      }
+    `
+];
+var GuideProductDetail = _GuideProductDetail;
+if (!customElements.get(GUIDE_PRODUCT_DETAIL)) {
+  customElements.define(GUIDE_PRODUCT_DETAIL, GuideProductDetail);
+}
+
+// ../../canvases/postcard-guide/dist/templates/what-you-need.js
+import { css as css8, html as html7, nothing as nothing6 } from "lit";
+var GUIDE_WHAT_YOU_NEED = "guide-what-you-need";
+var _GuideWhatYouNeed = class _GuideWhatYouNeed extends GuideTemplate {
+  render() {
+    const view = this.view;
+    if (!view)
+      return nothing6;
+    return html7`<h2 class="headline" tabindex="-1" data-heading>${this.copy.need_headline}</h2>
+      <p class="voice" data-slot="voice">${this.slotText("voice", view.voice)}</p>
+      <ul class="items">
+        ${view.items.map((item) => {
+      const path = `items.${item.item_id}.reason`;
+      return html7`<li>
+            <button
+              class="item"
+              aria-disabled=${this.busyAttr()}
+              @click=${() => this.emitTap({ kind: "open", item_id: item.item_id })}
+            >
+              <span class="pic">
+                ${picture(item.picked?.image_url ?? item.image, item.label)}
+                <span class="on-photo"
+                  ><span class="name">${item.label}</span
+                  ><span class="reason" data-slot=${path}>${this.slotText(path, item.reason)}</span></span
+                >
+                <span class="why">${item.because.map((s4) => html7`<img src=${s4.image} alt=${s4.label} />`)}</span>
+                ${item.picked ? html7`<span class="in-cart">In your cart: ${item.picked.name}</span>` : nothing6}
+              </span>
+            </button>
+          </li>`;
+    })}
+      </ul>`;
+  }
+};
+_GuideWhatYouNeed.styles = [
+  templateStyles,
+  css8`
+      .items {
+        display: grid;
+        gap: 12px;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+      :host([data-size='medium']) .items {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        gap: 16px;
+      }
+      :host([data-size='expanded']) .items {
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+        gap: 18px;
+      }
+      .item {
+        display: block;
+        width: 100%;
+        padding: 0;
+        border: 0;
+        border-radius: var(--sc-border-radius, 16px);
+        overflow: hidden;
+        background: var(--sc-tile-background, #ffffff);
+        box-shadow: 0 6px 16px rgb(0 0 0 / 0.1);
+        text-align: left;
+      }
+      .pic {
+        position: relative;
+        display: block;
+        aspect-ratio: 4 / 5;
+        /* Store photos are shot on white: their own paper, in both schemes. */
+        background: #ffffff;
+      }
+      .pic img {
+        object-fit: contain;
+        padding: 8% 8% 30%;
+      }
+      /* Store photos sit on white: a fade to black over white reads as a grey
+         smudge, so the name sits on a solid caption plate instead. */
+      .item .on-photo {
+        padding: 10px 12px 12px;
+        background: rgb(12 20 18 / 0.86);
+      }
+      .on-photo .name {
+        display: block;
+        font-size: 16.8px;
+      }
+      .on-photo .reason {
+        display: block;
+        margin-top: 4px;
+        font-size: 13.6px;
+        font-weight: 600;
+        opacity: 0.92;
+      }
+      .why {
+        position: absolute;
+        top: 8px;
+        right: 8px;
+        display: flex;
+        gap: 4px;
+      }
+      .why img {
+        width: 30px;
+        height: 36px;
+        padding: 2px;
+        border: 2px solid var(--sc-color-primary, #111827);
+        border-radius: 4px;
+        background: #ffffff;
+      }
+      .in-cart {
+        position: absolute;
+        top: 8px;
+        left: 8px;
+        max-width: calc(100% - 60px);
+        padding: 4px 8px;
+        border-radius: 999px;
+        background: var(--sc-color-primary, #111827);
+        color: var(--sc-accent-foreground, #ffffff);
+        font-size: 11.52px;
+        font-weight: 800;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    `
+];
+var GuideWhatYouNeed = _GuideWhatYouNeed;
+if (!customElements.get(GUIDE_WHAT_YOU_NEED)) {
+  customElements.define(GUIDE_WHAT_YOU_NEED, GuideWhatYouNeed);
+}
+
+// ../../canvases/postcard-guide/dist/templates/index.js
+var TEMPLATE_ELEMENTS = {
+  pick_from_pictures: GUIDE_PICK_FROM_PICTURES,
+  what_you_need: GUIDE_WHAT_YOU_NEED,
+  compare: GUIDE_COMPARE,
+  hero_pick: GUIDE_HERO_PICK,
+  product_detail: GUIDE_PRODUCT_DETAIL
+};
+function templateElement(name) {
+  return Object.hasOwn(TEMPLATE_ELEMENTS, name) ? TEMPLATE_ELEMENTS[name] ?? null : null;
+}
+
+// ../../canvases/postcard-guide/dist/guide-client.js
+var GUIDE_PATH = "/api/adaptive/guide";
+var TAP_PATH = "/api/adaptive/guide/tap";
+var SAY_PATH = "/api/adaptive/guide/say";
+var SEEN_PATH = "/api/adaptive/guide/seen";
+var PAGE_SESSION_HEADER = "X-Syntro-Page-Session";
+var TURN_ID = /^[0-9a-f]{32}$/;
+var MOVE_ID = /^[a-z_]+(:[a-z0-9][a-z0-9_-]*)?$/;
+var MOVE_ID_MAX = 300;
+function newPageSession() {
+  const bytes = new Uint8Array(16);
+  crypto.getRandomValues(bytes);
+  return Array.from(bytes, (b) => b.toString(16).padStart(2, "0")).join("");
+}
+function turnQuery(params) {
+  const parts = [`host=${params.host}`, `width=${params.width}`];
+  if (params.consent)
+    parts.push("consent=granted");
+  if (params.turn && TURN_ID.test(params.turn))
+    parts.push(`turn=${params.turn}`);
+  if (params.move && params.move.length <= MOVE_ID_MAX && MOVE_ID.test(params.move)) {
+    parts.push(`move=${encodeURIComponent(params.move)}`);
+  }
+  return parts;
+}
+var TEMPLATES_HEADER = "X-Syntro-Guide-Templates";
+function drawableTemplates(allowed) {
+  const drawable = Object.keys(TEMPLATE_ELEMENTS);
+  const names = allowed ? drawable.filter((name) => allowed.includes(name)) : drawable;
+  return names.sort().join(",");
+}
+function headers(params) {
+  return {
+    [PAGE_SESSION_HEADER]: params.pageSession,
+    [TEMPLATES_HEADER]: drawableTemplates(params.allowedTemplates)
+  };
+}
+function guideRequest(path, params) {
+  const sep = path.includes("?") ? "&" : "?";
+  return { path: `${path}${sep}${turnQuery(params).join("&")}`, headers: headers(params) };
+}
+function isView(body) {
+  const v = body;
+  return !!v && (v.stage === "postcard" || v.stage === "spread") && Array.isArray(v.stamps) && Array.isArray(v.feed);
+}
+async function call(fetchFn, path, init, on404) {
+  let res;
+  try {
+    res = await fetchFn(path, init);
+  } catch {
+    return { kind: "unavailable" };
+  }
+  if (res.status === 404)
+    return on404;
+  if (!res.ok)
+    return { kind: "unavailable" };
+  const body = await res.json().catch(() => null);
+  return isView(body) ? { kind: "view", view: body } : { kind: "unavailable" };
+}
+function loadGuide(fetchFn, params, hints = []) {
+  const query = [...turnQuery(params), ...hints.map((h) => `hint=${encodeURIComponent(h)}`)];
+  return call(fetchFn, `${GUIDE_PATH}?${query.join("&")}`, { method: "GET", headers: headers(params) }, { kind: "unpublished" });
+}
+function sendTap(fetchFn, tap, params) {
+  return call(fetchFn, `${TAP_PATH}?${turnQuery(params).join("&")}`, { method: "POST", body: JSON.stringify(tap), headers: headers(params) }, { kind: "rejected" });
+}
+function sendMessage(fetchFn, text, params) {
+  return call(fetchFn, `${SAY_PATH}?${turnQuery(params).join("&")}`, { method: "POST", body: JSON.stringify({ text }), headers: headers(params) }, { kind: "rejected" });
+}
+async function sendSeen(fetchFn, report, params, keepalive = false) {
+  try {
+    await fetchFn(`${SEEN_PATH}${params.consent ? "?consent=granted" : ""}`, {
+      method: "POST",
+      body: JSON.stringify(report),
+      headers: headers(params),
+      keepalive
+    });
+  } catch {
+    console.warn("[postcard-guide] a seen report did not reach the server");
+  }
+}
+
+// ../../canvases/postcard-guide/dist/product-history.js
+var STATE_KEY = "syntroGuideDetail";
+function isSitePath(href) {
+  if (!/^\/(?![/\\])[^\s\\]*$/.test(href))
+    return false;
+  return ![...href].some((c2) => c2.charCodeAt(0) < 32 || c2.charCodeAt(0) === 127);
+}
+function ours(state) {
+  const entry2 = state?.[STATE_KEY];
+  return entry2 && typeof entry2 === "object" ? entry2 : null;
+}
+function sectionFor(root, turnId, moveId) {
+  if (!turnId)
+    return null;
+  return [...root.querySelectorAll("section.snap")].find((s4) => s4.dataset.turnId === turnId && (moveId === null || s4.dataset.moveId === moveId)) ?? null;
+}
+function within(ancestor, node) {
+  let n2 = node;
+  while (n2) {
+    if (n2 === ancestor)
+      return true;
+    n2 = n2.parentNode ?? (n2 instanceof ShadowRoot ? n2.host : null);
+  }
+  return false;
+}
+function show(section) {
+  const reduced = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+  section?.scrollIntoView({ block: "start", behavior: reduced ? "auto" : "smooth" });
+}
+var ProductDetailHistory = class {
+  constructor(host, root) {
+    this.host = host;
+    this.root = root;
+    this._pending = null;
+    this._current = null;
+    this._lastControl = null;
+    this._openers = /* @__PURE__ */ new Map();
+    this._onClick = (event) => {
+      this._lastControl = event.composedPath().find((n2) => n2 instanceof HTMLElement && n2.matches("button, a[href], input")) ?? null;
+    };
+    this._onTap = (event) => {
+      const tap = event.detail;
+      if (tap?.kind !== "product")
+        return;
+      const path = event.composedPath();
+      const section = path.find((n2) => n2 instanceof HTMLElement && n2.matches("section.snap"));
+      const control = this._lastControl;
+      const source = path[0] instanceof HTMLElement ? path[0] : null;
+      this._pending = {
+        turnId: section?.dataset.turnId ?? null,
+        moveId: section?.dataset.moveId ?? null,
+        opener: control && section && within(section, control) ? control : source
+      };
+    };
+    this._onTurn = (event) => {
+      const origin = this._pending;
+      this._pending = null;
+      const turnId = event.detail?.turnId;
+      const root2 = this.root();
+      if (!origin || !turnId || !root2)
+        return;
+      const section = [...root2.querySelectorAll("section.snap")].find((s4) => s4.dataset.turnId === turnId && s4.dataset.template === "product_detail");
+      const detail = section?.firstElementChild;
+      const href = detail?.view?.product?.href;
+      if (!section || !detail || !href)
+        return;
+      if (!isSitePath(href)) {
+        console.error("[postcard-guide] refusing to put a non-site path in the address bar:", href);
+        return;
+      }
+      const entry2 = {
+        turnId,
+        moveId: section.dataset.moveId ?? "",
+        originTurnId: origin.turnId,
+        originMoveId: origin.moveId
+      };
+      history.pushState({ [STATE_KEY]: entry2 }, "", href);
+      this._openers.set(`${entry2.turnId}|${entry2.moveId}`, origin.opener);
+      this._current = entry2;
+      void detail.focusHeading?.();
+    };
+    this._onPop = (event) => {
+      const root2 = this.root();
+      if (!root2)
+        return;
+      const entry2 = ours(event.state);
+      if (entry2) {
+        this._current = entry2;
+        show(sectionFor(root2, entry2.turnId, entry2.moveId));
+        return;
+      }
+      const left = this._current;
+      this._current = null;
+      if (!left)
+        return;
+      show(sectionFor(root2, left.originTurnId, left.originMoveId));
+      const opener = this._openers.get(`${left.turnId}|${left.moveId}`);
+      if (!opener?.isConnected)
+        return;
+      if (opener.focusHeading)
+        void opener.focusHeading();
+      else
+        opener.focus({ preventScroll: true });
+    };
+    this._onBack = () => {
+      if (ours(history.state))
+        history.back();
+    };
+  }
+  attach() {
+    this.host.addEventListener("click", this._onClick, true);
+    this.host.addEventListener(GUIDE_TAP_EVENT, this._onTap);
+    this.host.addEventListener(GUIDE_TURN_EVENT, this._onTurn);
+    this.host.addEventListener(GUIDE_DETAIL_BACK_EVENT, this._onBack);
+    window.addEventListener("popstate", this._onPop);
+  }
+  detach() {
+    this.host.removeEventListener("click", this._onClick, true);
+    this.host.removeEventListener(GUIDE_TAP_EVENT, this._onTap);
+    this.host.removeEventListener(GUIDE_TURN_EVENT, this._onTurn);
+    this.host.removeEventListener(GUIDE_DETAIL_BACK_EVENT, this._onBack);
+    window.removeEventListener("popstate", this._onPop);
+    this._pending = null;
+    this._lastControl = null;
+  }
+};
+
+// ../../canvases/postcard-guide/dist/seen.js
+var SEEN_SHARE = 0.6;
+var MAX_VISIBLE_MS = 36e5;
+var THRESHOLDS = Array.from({ length: 21 }, (_, i2) => i2 / 20);
+var browserObserver = (cb, init) => new IntersectionObserver(cb, init);
+function visibleShare(entry2) {
+  const shown = entry2.intersectionRect.height;
+  const own = entry2.boundingClientRect.height;
+  const base = Math.min(own, entry2.rootBounds?.height ?? own);
+  return base > 0 ? shown / base : 0;
+}
+var SeenTracker = class {
+  constructor(root, sink, now = () => performance.now(), factory = typeof IntersectionObserver === "function" ? browserObserver : null) {
+    this._watch = /* @__PURE__ */ new Map();
+    this._keys = /* @__PURE__ */ new Set();
+    this._onEntries = (flag) => (entries) => {
+      for (const entry2 of entries) {
+        const watch = this._watch.get(entry2.target);
+        if (!watch || watch.done)
+          continue;
+        watch[flag] = entry2.isIntersecting && visibleShare(entry2) >= SEEN_SHARE;
+        const seen = watch.inFeed && watch.onScreen;
+        if (seen && watch.since === null)
+          watch.since = this._now();
+        else if (!seen && watch.since !== null)
+          this._report(entry2.target, watch, false);
+      }
+    };
+    this._sink = sink;
+    this._now = now;
+    this._observer = factory ? factory(this._onEntries("inFeed"), { root, threshold: THRESHOLDS }) : null;
+    this._screen = factory ? factory(this._onEntries("onScreen"), { root: null, threshold: THRESHOLDS }) : null;
+    if (!this._observer) {
+      console.warn("[postcard-guide] no IntersectionObserver here; time on each template is not reported");
+    }
+  }
+  observe(section) {
+    const turnId = section.dataset.turnId ?? "";
+    const moveId = section.dataset.moveId ?? "";
+    const key = `${turnId}:${moveId}`;
+    if (!turnId || !moveId || this._keys.has(key))
+      return;
+    this._keys.add(key);
+    this._watch.set(section, {
+      turnId,
+      moveId,
+      since: null,
+      done: false,
+      inFeed: false,
+      onScreen: false
+    });
+    this._observer?.observe(section);
+    this._screen?.observe(section);
+  }
+  /** The page is going away: report every section on screen now. */
+  flush() {
+    for (const [el, watch] of this._watch) {
+      if (watch.since !== null && !watch.done)
+        this._report(el, watch, true);
+    }
+  }
+  disconnect() {
+    this._observer?.disconnect();
+    this._screen?.disconnect();
+    this._watch.clear();
+  }
+  _report(el, watch, final) {
+    watch.done = true;
+    this._observer?.unobserve(el);
+    this._screen?.unobserve(el);
+    const ms = Math.round(this._now() - (watch.since ?? this._now()));
+    this._sink({
+      turn_id: watch.turnId,
+      move_id: watch.moveId,
+      visible_ms: Math.min(Math.max(ms, 0), MAX_VISIBLE_MS)
+    }, final);
+  }
+};
+
+// ../../canvases/postcard-guide/dist/styles.js
+import { css as css9 } from "lit";
+var pageStyles = css9`
+  :host {
+    display: block;
+    height: 100%;
+    color: var(--sc-content-text-color, #1f2937);
+    font-family: var(--sc-font-family, system-ui, sans-serif);
+  }
+  * {
+    box-sizing: border-box;
+  }
+  button {
+    font: inherit;
+    color: inherit;
+    cursor: pointer;
+  }
+  button[aria-disabled='true'] {
+    cursor: progress;
+    opacity: 0.7;
+  }
+  button:focus-visible,
+  input:focus-visible {
+    outline: 3px solid var(--sc-color-primary, #111827);
+    outline-offset: 2px;
+  }
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .frame {
+    height: 100%;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
+    grid-template-areas: 'brand' 'known' 'feed' 'notice' 'composer';
+    background: var(--sc-tile-background, #ffffff);
+    color: var(--sc-tile-title-color, #111827);
+  }
+  :host([data-size='expanded']) .frame {
+    grid-template-columns: 272px minmax(0, 1fr);
+    grid-template-rows: auto minmax(0, 1fr) auto auto;
+    grid-template-areas: 'brand brand' 'known feed' 'known notice' 'known composer';
+  }
+
+  .brand {
+    grid-area: brand;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 14px 18px 8px;
+  }
+  .brand .name {
+    font-weight: 800;
+    font-size: 15.2px;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+  }
+  .brand .cart {
+    min-height: 32px;
+    padding: 6px 12px;
+    border: 0;
+    border-radius: 999px;
+    background: var(--sc-tile-title-color, #111827);
+    color: var(--sc-tile-background, #ffffff);
+    font-size: 12.8px;
+    font-weight: 700;
+  }
+
+  .known {
+    grid-area: known;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 4px 14px 10px;
+    border-bottom: 1px solid var(--sc-content-divider-color, rgb(0 0 0 / 0.08));
+    overflow-x: auto;
+  }
+  .known-label,
+  .words {
+    display: none;
+  }
+  .stamps {
+    display: flex;
+    gap: 8px;
+  }
+  .stamps li {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+  .stamp {
+    display: block;
+    flex: none;
+    width: 46px;
+    height: 54px;
+    padding: 3px;
+    border: 2px solid var(--sc-color-primary, #111827);
+    border-radius: 6px;
+    /* A stamp's own white mount, in both schemes. */
+    background: #ffffff;
+    box-shadow:
+      inset 0 0 0 3px #ffffff,
+      0 2px 6px rgb(0 0 0 / 0.1);
+  }
+  .stamp.empty {
+    border: 2px dashed var(--sc-content-divider-color, #d6d3cc);
+    background: transparent;
+    box-shadow: none;
+  }
+  .done {
+    flex: none;
+    min-height: 36px;
+    margin-left: auto;
+    padding: 8px 14px;
+    border: 0;
+    border-radius: 999px;
+    background: var(--sc-color-primary, #111827);
+    color: var(--sc-accent-foreground, #ffffff);
+    font-weight: 700;
+    white-space: nowrap;
+  }
+  :host([data-size='expanded']) .known {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 14px;
+    padding: 18px;
+    border-bottom: 0;
+    border-right: 1px solid var(--sc-content-divider-color, rgb(0 0 0 / 0.08));
+    overflow: hidden auto;
+  }
+  :host([data-size='expanded']) .known-label {
+    display: block;
+    margin: 0;
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--sc-tile-text-color, #4b5563);
+  }
+  :host([data-size='expanded']) .stamps {
+    flex-direction: column;
+    gap: 12px;
+  }
+  :host([data-size='expanded']) .words {
+    display: block;
+    font-size: 15.2px;
+    font-weight: 700;
+  }
+  :host([data-size='expanded']) .words.unknown {
+    font-weight: 600;
+    color: var(--sc-tile-text-color, #4b5563);
+  }
+  :host([data-size='expanded']) .done {
+    align-self: flex-start;
+    margin: 4px 0 0;
+  }
+
+  .feed {
+    grid-area: feed;
+    position: relative;
+    overflow-y: auto;
+    scroll-behavior: smooth;
+  }
+  /* On the store the guide is a section of the page: at the feed's ends, scroll chains on
+     to the page. No snapping there: Chrome does not chain past the end of a snapping feed
+     whose last template is taller than it. A chat-app card is the whole surface, so it
+     keeps the scroll to itself and snaps. A tap still lands its turn at the top (page.ts). */
+  :host([data-card]) .feed {
+    overscroll-behavior: contain;
+    scroll-snap-type: y mandatory;
+  }
+  .snap {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+    scroll-snap-align: start;
+  }
+  .snap > * {
+    flex: 1 0 auto;
+  }
+
+  .notice {
+    grid-area: notice;
+    margin: 0;
+    padding: 0 16px;
+    font-weight: 700;
+  }
+  /* Always mounted, so a screen reader announces the message when it arrives. */
+  .notice:not(:empty) {
+    padding: 8px 16px 0;
+  }
+  /* Heard, not shown: the line is already on screen in its template. */
+  .notice.heard {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  .composer {
+    grid-area: composer;
+    display: flex;
+    gap: 8px;
+    margin: 8px 12px max(12px, env(safe-area-inset-bottom));
+    padding: 6px;
+    border-radius: 999px;
+    background: var(--sc-content-search-background, #f3f4f6);
+    box-shadow: 0 6px 20px rgb(0 0 0 / 0.12);
+  }
+  .composer input {
+    flex: 1;
+    min-width: 0;
+    padding: 10px 14px;
+    border: 0;
+    /* 16 px or more, or iOS zooms the page on focus. */
+    font: inherit;
+    font-size: 16px;
+    color: var(--sc-tile-title-color, #111827);
+    background: transparent;
+  }
+  .composer input::placeholder {
+    color: var(--sc-tile-text-color, #4b5563);
+  }
+  .composer input:focus-visible {
+    border-radius: 999px;
+  }
+  .composer button {
+    min-height: 40px;
+    padding: 8px 18px;
+    border: 0;
+    border-radius: 999px;
+    background: var(--sc-color-primary, #111827);
+    color: var(--sc-accent-foreground, #ffffff);
+    font-weight: 700;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .feed {
+      scroll-behavior: auto;
+    }
+  }
+  @media (forced-colors: active) {
+    .stamp,
+    .composer,
+    .brand .cart,
+    .done,
+    .composer button {
+      border: 1px solid CanvasText;
+    }
+  }
+`;
+
+// ../../canvases/postcard-guide/dist/words-stream.js
+var WORDS_PATH = "/api/adaptive/guide/words";
+var WORDS_BUDGET_MS = 1e4;
+var STOPPED = /* @__PURE__ */ Symbol("words-stopped");
+function isRecord(value) {
+  return typeof value === "object" && value !== null;
+}
+function readSlot(value) {
+  if (!isRecord(value))
+    return null;
+  const { move_id, slot, form, text } = value;
+  if (typeof move_id !== "string" || typeof slot !== "string")
+    return null;
+  if (typeof text !== "string" || !text)
+    return null;
+  if (form !== "short" && form !== "long")
+    return null;
+  return { move_id, slot, form, text };
+}
+function frameData(frame) {
+  return frame.split("\n").filter((line) => line.startsWith("data:")).map((line) => line.startsWith("data: ") ? line.slice(6) : line.slice(5)).join("");
+}
+async function streamWords(fetchFn, path, options) {
+  const { signal, onSlot } = options;
+  if (signal.aborted)
+    return "aborted";
+  const abort = new AbortController();
+  const onAbort = () => abort.abort();
+  signal.addEventListener("abort", onAbort, { once: true });
+  const watchdog = setTimeout(() => abort.abort(), options.budgetMs ?? WORDS_BUDGET_MS);
+  const stopped = new Promise((_resolve, reject) => {
+    abort.signal.addEventListener("abort", () => reject(STOPPED), { once: true });
+  });
+  stopped.catch(() => {
+  });
+  let reader = null;
+  try {
+    const res = await Promise.race([
+      fetchFn(path, {
+        method: "GET",
+        headers: { Accept: "text/event-stream", ...options.headers },
+        signal: abort.signal
+      }),
+      stopped
+    ]);
+    if (res.status === 204)
+      return "empty";
+    if (!res.ok || !res.body)
+      return "failed";
+    reader = res.body.getReader();
+    const decoder = new TextDecoder();
+    let buffer = "";
+    for (; ; ) {
+      const { done, value } = await Promise.race([reader.read(), stopped]);
+      if (done)
+        return "ended";
+      buffer += decoder.decode(value, { stream: true });
+      for (let sep = buffer.indexOf("\n\n"); sep >= 0; sep = buffer.indexOf("\n\n")) {
+        const data = frameData(buffer.slice(0, sep));
+        buffer = buffer.slice(sep + 2);
+        if (!data)
+          continue;
+        const parsed = JSON.parse(data);
+        if (isRecord(parsed) && parsed.done === true)
+          return "done";
+        const words = readSlot(parsed);
+        if (words)
+          onSlot(words);
+      }
+    }
+  } catch {
+    return signal.aborted ? "aborted" : "failed";
+  } finally {
+    clearTimeout(watchdog);
+    signal.removeEventListener("abort", onAbort);
+    reader?.cancel().catch(() => {
+    });
+  }
+}
+
+// ../../canvases/postcard-guide/dist/words.js
+var TURN_ID2 = /^[0-9a-f]{32}$/;
+var SHORT = "data-words-short";
+var LONG = "data-words-long";
+function* slotNodes(root) {
+  for (const el of root.querySelectorAll("*")) {
+    if (el.hasAttribute("data-slot"))
+      yield el;
+    if (el.shadowRoot)
+      yield* slotNodes(el.shadowRoot);
+  }
+}
+function turnSections(root, turnId) {
+  return [...root.querySelectorAll("section.snap")].filter((s4) => s4.dataset.turnId === turnId);
+}
+function findSlot(root, turnId, moveId, slot) {
+  for (const section of turnSections(root, turnId)) {
+    if (section.dataset.moveId !== moveId)
+      continue;
+    for (const node of slotNodes(section)) {
+      if (node.getAttribute("data-slot") === slot)
+        return node;
+    }
+  }
+  return null;
+}
+function fillSlot(node, text) {
+  const texts = [...node.childNodes].filter((c2) => c2.nodeType === Node.TEXT_NODE);
+  const target = texts.find((t2) => t2.data.trim()) ?? texts[0];
+  if (target)
+    target.data = text;
+  else
+    node.append(text);
+}
+function show2(node, width) {
+  const text = width === "desktop" && node.getAttribute(LONG) || node.getAttribute(SHORT);
+  if (text)
+    fillSlot(node, text);
+}
+var WordsController = class {
+  constructor(host, options) {
+    this._turn = null;
+    this._abort = null;
+    this._onTurn = (event) => {
+      const turnId = event.detail?.turnId;
+      if (typeof turnId !== "string" || !TURN_ID2.test(turnId) || turnId === this._turn)
+        return;
+      void this._stream(turnId);
+    };
+    this._host = host;
+    this._options = options;
+    host.addController(this);
+  }
+  hostConnected() {
+    this._host.addEventListener("guide-turn", this._onTurn);
+  }
+  hostDisconnected() {
+    this._host.removeEventListener("guide-turn", this._onTurn);
+    this._abort?.abort();
+    this._abort = null;
+    this._turn = null;
+  }
+  /** Show each filled slot's form for the current width. Never a new request. */
+  relayout() {
+    const width = this._options.width();
+    for (const node of slotNodes(this._host.renderRoot)) {
+      if (node.hasAttribute(SHORT))
+        show2(node, width);
+    }
+  }
+  async _stream(turnId) {
+    this._abort?.abort();
+    const abort = new AbortController();
+    this._abort = abort;
+    this._turn = turnId;
+    const fetchFn = this._options.fetchFn();
+    if (!fetchFn)
+      return;
+    const root = this._host.renderRoot;
+    const lead = turnSections(root, turnId)[0]?.dataset.moveId;
+    const leadLines = [];
+    const onSlot = (words) => {
+      if (this._turn !== turnId)
+        return;
+      const node = findSlot(root, turnId, words.move_id, words.slot);
+      if (!node)
+        return;
+      node.setAttribute(words.form === "long" ? LONG : SHORT, words.text);
+      show2(node, this._options.width());
+      if (words.form === "short" && words.move_id === lead)
+        leadLines.push(words.text);
+    };
+    const { path, headers: headers2 } = this._options.request(turnId);
+    const outcome = await streamWords(fetchFn, path, { signal: abort.signal, headers: headers2, onSlot });
+    if (this._abort === abort)
+      this._abort = null;
+    if (this._turn === turnId && outcome === "done" && leadLines[0]) {
+      this._options.announce(leadLines[0]);
+    }
+  }
+};
+
+// ../../canvases/postcard-guide/dist/page.js
+var PAGE_SESSION = newPageSession();
+var COPY = {
+  saveFailed: "We couldn't save that. Try again.",
+  noCart: "Adding to the cart isn't available here.",
+  soldOut: "That one is sold out.",
+  network: "We couldn't reach the cart. Try again.",
+  addFailed: "We couldn't add that to your cart."
+};
+var _PostcardGuidePage = class _PostcardGuidePage extends LitElement2 {
+  constructor() {
+    super();
+    this._size = new ContainerSizeController(this);
+    this._seen = null;
+    this._words = new WordsController(this, {
+      fetchFn: () => this.authedFetch,
+      // The turn travels as the decorated `turn` param, like every guide call.
+      request: (turnId) => guideRequest(WORDS_PATH, this._params(turnId)),
+      width: () => this._width,
+      announce: (text) => this._announce(text, true)
+    });
+    this._shownWidth = null;
+    this._history = null;
+    this._noElement = /* @__PURE__ */ new Set();
+    this._onVisibility = () => {
+      if (document.visibilityState === "hidden")
+        this._seen?.flush();
+    };
+    this._onPageHide = () => this._seen?.flush();
+    this._onTap = (event) => {
+      void this._tap(event.detail, this._originOf(event));
+    };
+    this._onPick = (event) => {
+      const { itemId, handle, variantId } = event.detail;
+      void this._pick(itemId, handle, variantId ?? null, this._originOf(event));
+    };
+    this._onSubmit = (event) => {
+      event.preventDefault();
+      const input = this.renderRoot.querySelector("form.composer input");
+      const text = input?.value.trim() ?? "";
+      if (!input || !text || this._busy)
+        return;
+      void this._say(text, input);
+    };
+    this.authedFetch = null;
+    this.getCart = getCart;
+    this.hints = [];
+    this.consent = () => false;
+    this.guideHost = "store";
+    this.brand = "";
+    this.allowedTemplates = null;
+    this._view = null;
+    this._turns = [];
+    this._status = "loading";
+    this._busy = false;
+    this._notice = null;
+    this._heard = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.guideHost === "store") {
+      this._history = new ProductDetailHistory(this, () => this.renderRoot);
+      this._history.attach();
+    }
+    document.addEventListener("visibilitychange", this._onVisibility);
+    window.addEventListener("pagehide", this._onPageHide);
+    if (this._view)
+      return;
+    void this._load();
+  }
+  disconnectedCallback() {
+    this._history?.detach();
+    this._history = null;
+    document.removeEventListener("visibilitychange", this._onVisibility);
+    window.removeEventListener("pagehide", this._onPageHide);
+    this._seen?.flush();
+    this._seen?.disconnect();
+    this._seen = null;
+    super.disconnectedCallback();
+  }
+  willUpdate() {
+    this.toggleAttribute("data-card", this.guideHost === "card");
+  }
+  updated() {
+    if (this._shownWidth !== null && this._shownWidth !== this._width)
+      this._words.relayout();
+    this._shownWidth = this._width;
+  }
+  get _width() {
+    return this._size.value === "expanded" ? "desktop" : "phone";
+  }
+  _params(turn, move) {
+    return {
+      host: this.guideHost,
+      width: this._width,
+      consent: this.consent(),
+      turn: turn ?? null,
+      move: move ?? null,
+      pageSession: PAGE_SESSION,
+      allowedTemplates: this.allowedTemplates
+    };
+  }
+  _latestTurn() {
+    return this._turns.at(-1)?.turn_id ?? null;
+  }
+  /**
+   * The one live region (WCAG: one per surface). A notice is shown; a line that is
+   * already on screen (`heard`) is only spoken, so it takes no row and the snapped
+   * feed never shifts under the shopper.
+   */
+  _announce(text, heard = false) {
+    this._notice = text;
+    this._heard = heard;
+  }
+  async _load() {
+    if (!this.authedFetch) {
+      console.error("[postcard-guide] no authed fetch on the page; the guide cannot load");
+      this._giveBack("guide-unavailable");
+      return;
+    }
+    this._status = "loading";
+    this._apply(await loadGuide(this.authedFetch, this._params(), this.hints), "arrival");
+  }
+  /** Render nothing and tell the host, which collapses the section so the theme's page shows. */
+  _giveBack(event) {
+    this._status = "gone";
+    this.dispatchEvent(new CustomEvent(event, { bubbles: true, composed: true }));
+  }
+  _apply(result, cause) {
+    if (result.kind === "view") {
+      const turn = result.view.turn;
+      if (!turn) {
+        console.error("[postcard-guide] a guide answer came without a turn");
+        if (this._view && cause !== "arrival")
+          this._announce(COPY.saveFailed);
+        else
+          this._giveBack("guide-unavailable");
+        return;
+      }
+      if (this.guideHost === "card")
+        this._seen?.flush();
+      const first = !this._view;
+      this._view = result.view;
+      this._turns = this.guideHost === "card" ? [turn] : [...this._turns, turn];
+      this._status = "ready";
+      if (first) {
+        this.dispatchEvent(new CustomEvent("guide-ready", { bubbles: true, composed: true }));
+      }
+      void this._landed(turn, cause);
+    } else if (result.kind === "unpublished") {
+      this._giveBack("guide-unpublished");
+    } else if (result.kind === "unavailable") {
+      if (this._view && cause !== "arrival")
+        this._announce(COPY.saveFailed);
+      else
+        this._giveBack("guide-unavailable");
+    }
+  }
+  /** After a turn renders: watch its sections, bring it into view on a tap, tell listeners. */
+  async _landed(turn, cause) {
+    await this.updateComplete;
+    const feed = this.renderRoot.querySelector(".feed");
+    if (!feed)
+      return;
+    this._seen ?? (this._seen = new SeenTracker(feed, (report, final) => {
+      if (this.authedFetch)
+        void sendSeen(this.authedFetch, report, this._params(), final);
+    }));
+    const all = [...feed.querySelectorAll("section.snap")];
+    for (const section of all)
+      this._seen.observe(section);
+    const first = all.find((s4) => s4.dataset.turnId === turn.turn_id);
+    if (first && cause !== "arrival" && this.guideHost === "store")
+      feed.scrollTop = first.offsetTop;
+    if (first && cause === "tap") {
+      await first.firstElementChild?.focusHeading?.();
+    }
+    this.dispatchEvent(new CustomEvent(GUIDE_TURN_EVENT, {
+      detail: { turnId: turn.turn_id },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  /** One tap. Returns whether the server answered with a view. */
+  async _tap(tap, from) {
+    if (this._busy || !this.authedFetch)
+      return false;
+    this._busy = true;
+    this._notice = null;
+    try {
+      const sent = await sendTap(this.authedFetch, tap, this._params(from.turn, from.move));
+      const result = sent.kind === "rejected" ? await loadGuide(this.authedFetch, this._params()) : sent;
+      this._apply(result, "tap");
+      return sent.kind === "view";
+    } finally {
+      this._busy = false;
+    }
+  }
+  /** The section an event came from: a tap answers the turn it was shown in, and names its move. */
+  _originOf(event) {
+    const section = event.target?.closest?.("section.snap");
+    return {
+      turn: section?.dataset.turnId ?? this._latestTurn(),
+      move: section?.dataset.moveId ?? null
+    };
+  }
+  /** The frame's own controls (stamps, done) answer the latest turn and come from no move. */
+  _frameOrigin() {
+    return { turn: this._latestTurn(), move: null };
+  }
+  async _pick(itemId, handle, variantId, from) {
+    if (this._busy)
+      return;
+    const cart = this.getCart();
+    if (!cart) {
+      this._announce(COPY.noCart);
+      return;
+    }
+    this._busy = true;
+    this._notice = null;
+    let added;
+    try {
+      added = await cart.addToCart({ product_id: handle, variant_id: variantId, quantity: 1 });
+    } catch {
+      added = { ok: false, error: { code: "network", message: "" } };
+    } finally {
+      this._busy = false;
+    }
+    if (!added.ok) {
+      const code = added.error?.code;
+      this._announce(code === "oos" ? COPY.soldOut : code === "network" ? COPY.network : COPY.addFailed);
+      return;
+    }
+    const saved = await this._tap({ kind: "pick", item_id: itemId, handle }, from);
+    if (!saved)
+      this._announce(copyOf(this._view).saved_failed);
+  }
+  async _say(text, input) {
+    if (this._busy || !this.authedFetch)
+      return;
+    this._busy = true;
+    this._notice = null;
+    try {
+      let result = await sendMessage(this.authedFetch, text, this._params(this._latestTurn()));
+      if (result.kind === "rejected")
+        result = await loadGuide(this.authedFetch, this._params());
+      if (result.kind === "view" && result.view.heard === false) {
+        this._announce(result.view.voice ?? COPY.saveFailed);
+        return;
+      }
+      this._apply(result, "say");
+      if (result.kind === "view")
+        input.value = "";
+    } finally {
+      this._busy = false;
+    }
+  }
+  _busyAttr() {
+    return this._busy ? "true" : "false";
+  }
+  _sections() {
+    const turns = this.guideHost === "card" ? this._turns.slice(-1) : this._turns;
+    const out = [];
+    for (const turn of turns) {
+      const drawable = [];
+      for (const shown of [...turn.shown].sort((a, b) => a.position - b.position)) {
+        const tag = templateElement(shown.template);
+        if (tag)
+          drawable.push({ turnId: turn.turn_id, shown, tag });
+        else if (!this._noElement.has(shown.template)) {
+          this._noElement.add(shown.template);
+          console.warn(`[postcard-guide] no template element for ${shown.template}; it is not drawn`);
+        }
+      }
+      out.push(...this.guideHost === "card" ? drawable.slice(0, 1) : drawable);
+    }
+    return out;
+  }
+  render() {
+    if (this._status === "gone")
+      return nothing7;
+    const view = this._view;
+    if (this._status === "loading" || !view) {
+      return html8`<div class="frame" aria-busy="true">${this._brandBar(null)}</div>`;
+    }
+    const copy = copyOf(view);
+    return html8`<div class="frame" role="region" aria-label=${copy.guide_name}>
+        ${this._brandBar(view)} ${this._known(view)}
+        <div class="feed" @guide-tap=${this._onTap} @guide-pick=${this._onPick}>
+          ${repeat(this._sections(), (s4) => `${s4.turnId}:${s4.shown.move_id}`, (s4) => this._section(s4))}
+        </div>
+        <p class=${this._heard ? "notice heard" : "notice"} role="status">${this._notice ?? nothing7}</p>
+        <form class="composer" @submit=${this._onSubmit}>
+          <input
+            type="text"
+            maxlength="300"
+            autocomplete="off"
+            enterkeyhint="send"
+            aria-label=${copy.ask_placeholder}
+            placeholder=${copy.ask_placeholder}
+            aria-disabled=${this._busyAttr()}
+          />
+          <button type="submit" aria-disabled=${this._busyAttr()}>Send</button>
+        </form>
+      </div>`;
+  }
+  _brandBar(view) {
+    const cart = this.getCart();
+    const count = view?.pick_count ?? 0;
+    return html8`<div class="brand">
+      <span class="name">${this.brand}</span>
+      ${cart ? html8`<button
+              class="cart"
+              aria-label=${count ? `Cart, ${count} added here` : "Cart"}
+              @click=${() => void cart.openCart()}
+            >
+              Cart${count ? html8`<span aria-hidden="true"> · ${count}</span>` : nothing7}
+            </button>` : nothing7}
+    </div>`;
+  }
+  _known(view) {
+    const latest = this._frameOrigin();
+    return html8`<div class="known">
+      <p class="known-label">${copyOf(view).known_label}</p>
+      <ul class="stamps">
+        ${view.stamps.map((s4) => html8`<li>
+            <button
+              class="stamp"
+              aria-disabled=${this._busyAttr()}
+              aria-label=${`Change ${s4.label}`}
+              @click=${() => void this._tap({ kind: "stamp", fact_id: s4.fact_id }, latest)}
+            >
+              <img src=${s4.image} alt=${s4.label} />
+            </button>
+            <span class="words" aria-hidden="true">${s4.label}</span>
+          </li>`)}
+        ${view.missing.map((m) => html8`<li>
+            <span class="stamp empty" role="img" aria-label=${`${m.label}, not chosen yet`}></span>
+            <span class="words unknown" aria-hidden="true">${m.label}</span>
+          </li>`)}
+      </ul>
+      ${view.stamps.length && view.stage === "postcard" ? html8`<button
+              class="done"
+              aria-disabled=${this._busyAttr()}
+              @click=${() => void this._tap({ kind: "done" }, latest)}
+            >
+              ${copyOf(view).done_label}
+            </button>` : nothing7}
+    </div>`;
+  }
+  _section(s4) {
+    const tag = unsafeStatic(s4.tag);
+    return html8`<section
+      class="snap"
+      data-turn-id=${s4.turnId}
+      data-move-id=${s4.shown.move_id}
+      data-template=${s4.shown.template}
+    >
+      ${staticHtml`<${tag}
+        .view=${s4.shown.view}
+        .turnId=${s4.turnId}
+        .moveId=${s4.shown.move_id}
+        .cart=${this.getCart}
+        .busy=${this._busy}
+        .copy=${copyOf(this._view)}
+      ></${tag}>`}
+    </section>`;
+  }
+};
+_PostcardGuidePage.styles = pageStyles;
+_PostcardGuidePage.properties = {
+  authedFetch: { attribute: false },
+  getCart: { attribute: false },
+  hints: { attribute: false },
+  consent: { attribute: false },
+  guideHost: { attribute: false },
+  brand: { attribute: false },
+  allowedTemplates: { attribute: false },
+  _view: { state: true },
+  _turns: { state: true },
+  _status: { state: true },
+  _busy: { state: true },
+  _notice: { state: true },
+  _heard: { state: true }
+};
+var PostcardGuidePage = _PostcardGuidePage;
+if (!customElements.get("postcard-guide-page")) {
+  customElements.define("postcard-guide-page", PostcardGuidePage);
+}
+
+// src/guide-widget.ts
+import { css as css10, html as html9, LitElement as LitElement3, nothing as nothing8 } from "lit";
+var GUIDE_PAGE_TAG = "syntro-guide-page";
+var GuidePageWidget = class extends LitElement3 {
+  constructor() {
+    super();
+    this._transport = null;
+    this._hints = [];
+    this._brand = "";
+    /** Nothing to draw for the life of this tile: unpublished, down, or no way to load it. */
+    this._gone = false;
+    /** The first view is painted: the section takes its height now, never before. */
+    this._show = () => {
+      this.removeAttribute("data-pending");
+    };
+    /** Draw nothing and take no room, so the store's page reads as if the tile were not there. */
+    this._collapse = () => {
+      this._gone = true;
+      this.hidden = true;
+      this.removeAttribute("data-pending");
+      this.requestUpdate();
+    };
+    this.templates = null;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this._transport || this._gone) return;
+    const transport = window.SynOS?.authedFetch ?? null;
+    if (!transport) {
+      console.error("[adaptive-guide] no authed fetch on the page; the guide cannot load");
+      this._collapse();
+      return;
+    }
+    if (this.templates && !this.templates.some((name) => Object.keys(TEMPLATE_ELEMENTS).includes(name))) {
+      console.error(
+        `[adaptive-guide] none of the templates ${JSON.stringify(this.templates)} can be drawn; the guide is not shown`
+      );
+      this._collapse();
+      return;
+    }
+    this._transport = transport;
+    this.setAttribute("data-pending", "");
+    this._hints = landingHints();
+    this._brand = storeName();
+    if (!this._brand) {
+      console.warn(
+        "[adaptive-guide] the store page has no og:site_name; the brand bar shows no name"
+      );
+    }
+    this.requestUpdate();
+  }
+  render() {
+    if (this._gone || !this._transport) return nothing8;
+    return html9`<postcard-guide-page
+      .authedFetch=${this._transport}
+      .getCart=${getCart}
+      .hints=${this._hints}
+      .consent=${consentGranted}
+      .brand=${this._brand}
+      .guideHost=${"store"}
+      .allowedTemplates=${this.templates}
+      @guide-ready=${this._show}
+      @guide-unpublished=${this._collapse}
+      @guide-unavailable=${this._collapse}
+    ></postcard-guide-page>`;
+  }
+};
+GuidePageWidget.styles = css10`
+    :host {
+      display: block;
+      width: 100%;
+    }
+    :host([hidden]) {
+      display: none;
+    }
+    /* Loading the first view: laid out, so the page measures its width, but no height and
+       unseen, so the store page does not move until there is something to show. */
+    :host([data-pending]) postcard-guide-page {
+      height: 0;
+      overflow: hidden;
+      visibility: hidden;
+    }
+    postcard-guide-page {
+      display: block;
+      /* At most a viewport tall, and under the tile card's cap (less the card's top
+         gap) so the card body never scrolls: the guide's own feed does. */
+      height: min(
+        100svh,
+        calc(var(--sc-card-max-height, 100svh) - var(--sc-tile-gap, 0.25rem))
+      );
+    }
+  `;
+GuidePageWidget.properties = {
+  templates: { attribute: false }
+};
+function registerGuidePageElement() {
+  if (typeof customElements !== "undefined" && !customElements.get(GUIDE_PAGE_TAG)) {
+    customElements.define(GUIDE_PAGE_TAG, GuidePageWidget);
+  }
+}
+registerGuidePageElement();
+
+// src/runtime.ts
+var GuidePageMountable = {
+  mount(container, config) {
+    const props = stripMountPlumbing(config ?? null);
+    const element = document.createElement(GUIDE_PAGE_TAG);
+    element.templates = props.templates ?? null;
+    container.style.minHeight = "0px";
+    container.appendChild(element);
+    return () => element.remove();
+  },
+  /** A refetch or republish keeps the same page, so the shopper keeps their place in it. */
+  update(container, config) {
+    const element = container.querySelector(GUIDE_PAGE_TAG);
+    if (!element) return;
+    const templates = stripMountPlumbing(config ?? null).templates ?? null;
+    if (JSON.stringify(templates) !== JSON.stringify(element.templates))
+      element.templates = templates;
+  }
+};
+var runtime = {
+  id: "adaptive-guide",
+  version: "1.0.0",
+  name: "Guided page",
+  description: "The store's guided page, drawn as a tile in an inline slot.",
+  /** No DOM-mutation executors: this tile renders only. */
+  executors: [],
+  widgets: [
+    {
+      id: "adaptive-guide:page",
+      component: GuidePageMountable,
+      metadata: {
+        name: "Guided page",
+        description: "The store's published guide, a section of the page after its anchor",
+        icon: "\u{1F9ED}"
+      }
+    }
+  ]
+};
+var runtime_default = runtime;
+
+export {
+  GuidePageMountable,
+  runtime,
+  runtime_default
+};
+/*! Bundled license information:
+
+@lit/context/lib/context-request-event.js:
+@lit/context/lib/create-context.js:
+@lit/context/lib/controllers/context-consumer.js:
+@lit/context/lib/value-notifier.js:
+@lit/context/lib/controllers/context-provider.js:
+@lit/context/lib/context-root.js:
+  (**
+   * @license
+   * Copyright 2021 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+@lit/context/lib/decorators/provide.js:
+  (**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+@lit/context/lib/decorators/consume.js:
+  (**
+   * @license
+   * Copyright 2022 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+*/
+//# sourceMappingURL=chunk-BVOACKL5.js.map