@wodira/browser 0.1.0 → 1.0.0

package/dist/ui/index-tfej862z.js

@@ -0,0 +1,3264 @@
+var __defProp = Object.defineProperty;
+var __returnValue = (v) => v;
+function __exportSetter(name, newValue) {
+  this[name] = __returnValue.bind(null, newValue);
+}
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: __exportSetter.bind(all, name)
+    });
+};
+var __chunkGraphs;
+var __chunkSeen;
+var __chunkNonce;
+var __preload = (id, seenOnly) => {
+  for (var [base, graph, ids] of __chunkGraphs || [])
+    for (var stack = [id], g = globalThis, d = g.document, head, j, node, k, link;j = stack.pop(); )
+      if (!__chunkSeen[j] && (node = graph[j])) {
+        __chunkSeen[j] = 1;
+        for (k = 1;k < node.length; k++)
+          stack.push(ids[node[k]]);
+        if (!seenOnly && j !== id && (head = d && d.head)) {
+          if (__chunkNonce === undefined)
+            __chunkNonce = (k = d.querySelector("meta[property=csp-nonce]")) && (k.nonce || k.getAttribute("nonce")) || "";
+          link = d.createElement("link");
+          link.rel = "modulepreload";
+          link.crossOrigin = "";
+          if (__chunkNonce)
+            link.nonce = __chunkNonce;
+          link.href = new g.URL(node[0], base);
+          head.appendChild(link);
+        }
+      }
+};
+var __chunks = (base, ids, nodes, entry) => {
+  for (var graph = {}, i = 0;i < ids.length; i++)
+    graph[ids[i]] = nodes[i];
+  (__chunkGraphs ||= []).push([base, graph, ids]);
+  __chunkSeen ||= {};
+  __preload(ids[entry], 1);
+};
+
+// ../../node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/development/css-tag.js
+var NODE_MODE = false;
+var global = globalThis;
+var supportsAdoptingStyleSheets = global.ShadowRoot && (global.ShadyCSS === undefined || global.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype;
+var constructionToken = Symbol();
+var cssTagCache = new WeakMap;
+
+class CSSResult {
+  constructor(cssText, strings, safeToken) {
+    this["_$cssResult$"] = true;
+    if (safeToken !== constructionToken) {
+      throw new Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+    }
+    this.cssText = cssText;
+    this._strings = strings;
+  }
+  get styleSheet() {
+    let styleSheet = this._styleSheet;
+    const strings = this._strings;
+    if (supportsAdoptingStyleSheets && styleSheet === undefined) {
+      const cacheable = strings !== undefined && strings.length === 1;
+      if (cacheable) {
+        styleSheet = cssTagCache.get(strings);
+      }
+      if (styleSheet === undefined) {
+        (this._styleSheet = styleSheet = new CSSStyleSheet).replaceSync(this.cssText);
+        if (cacheable) {
+          cssTagCache.set(strings, styleSheet);
+        }
+      }
+    }
+    return styleSheet;
+  }
+  toString() {
+    return this.cssText;
+  }
+}
+var textFromCSSResult = (value) => {
+  if (value["_$cssResult$"] === true) {
+    return value.cssText;
+  } else if (typeof value === "number") {
+    return value;
+  } else {
+    throw new Error(`Value passed to 'css' function must be a 'css' function result: ` + `${value}. Use 'unsafeCSS' to pass non-literal values, but take care ` + `to ensure page security.`);
+  }
+};
+var unsafeCSS = (value) => new CSSResult(typeof value === "string" ? value : String(value), undefined, constructionToken);
+var css = (strings, ...values) => {
+  const cssText = strings.length === 1 ? strings[0] : values.reduce((acc, v, idx) => acc + textFromCSSResult(v) + strings[idx + 1], strings[0]);
+  return new CSSResult(cssText, strings, constructionToken);
+};
+var adoptStyles = (renderRoot, styles) => {
+  if (supportsAdoptingStyleSheets) {
+    renderRoot.adoptedStyleSheets = styles.map((s) => s instanceof CSSStyleSheet ? s : s.styleSheet);
+  } else {
+    for (const s of styles) {
+      const style = document.createElement("style");
+      const nonce = global["litNonce"];
+      if (nonce !== undefined) {
+        style.setAttribute("nonce", nonce);
+      }
+      style.textContent = s.cssText;
+      renderRoot.appendChild(style);
+    }
+  }
+};
+var cssResultFromStyleSheet = (sheet) => {
+  let cssText = "";
+  for (const rule of sheet.cssRules) {
+    cssText += rule.cssText;
+  }
+  return unsafeCSS(cssText);
+};
+var getCompatibleStyle = supportsAdoptingStyleSheets || NODE_MODE && global.CSSStyleSheet === undefined ? (s) => s : (s) => s instanceof CSSStyleSheet ? cssResultFromStyleSheet(s) : s;
+
+// ../../node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/development/reactive-element.js
+var { is, defineProperty, getOwnPropertyDescriptor, getOwnPropertyNames, getOwnPropertySymbols, getPrototypeOf } = Object;
+var NODE_MODE2 = false;
+var global2 = globalThis;
+if (NODE_MODE2) {
+  global2.customElements ??= customElements;
+}
+var DEV_MODE = true;
+var issueWarning;
+var trustedTypes = global2.trustedTypes;
+var emptyStringForBooleanAttribute = trustedTypes ? trustedTypes.emptyScript : "";
+var polyfillSupport = DEV_MODE ? global2.reactiveElementPolyfillSupportDevMode : global2.reactiveElementPolyfillSupport;
+if (DEV_MODE) {
+  global2.litIssuedWarnings ??= new Set;
+  issueWarning = (code, warning) => {
+    warning += ` See https://lit.dev/msg/${code} for more information.`;
+    if (!global2.litIssuedWarnings.has(warning) && !global2.litIssuedWarnings.has(code)) {
+      console.warn(warning);
+      global2.litIssuedWarnings.add(warning);
+    }
+  };
+  queueMicrotask(() => {
+    issueWarning("dev-mode", `Lit is in dev mode. Not recommended for production!`);
+    if (global2.ShadyDOM?.inUse && polyfillSupport === undefined) {
+      issueWarning("polyfill-support-missing", `Shadow DOM is being polyfilled via \`ShadyDOM\` but ` + `the \`polyfill-support\` module has not been loaded.`);
+    }
+  });
+}
+var debugLogEvent = DEV_MODE ? (event) => {
+  const shouldEmit = global2.emitLitDebugLogEvents;
+  if (!shouldEmit) {
+    return;
+  }
+  global2.dispatchEvent(new CustomEvent("lit-debug", {
+    detail: event
+  }));
+} : undefined;
+var JSCompiler_renameProperty = (prop, _obj) => prop;
+var defaultConverter = {
+  toAttribute(value, type) {
+    switch (type) {
+      case Boolean:
+        value = value ? emptyStringForBooleanAttribute : null;
+        break;
+      case Object:
+      case Array:
+        value = value == null ? value : JSON.stringify(value);
+        break;
+    }
+    return value;
+  },
+  fromAttribute(value, type) {
+    let fromValue = value;
+    switch (type) {
+      case Boolean:
+        fromValue = value !== null;
+        break;
+      case Number:
+        fromValue = value === null ? null : Number(value);
+        break;
+      case Object:
+      case Array:
+        try {
+          fromValue = JSON.parse(value);
+        } catch (e) {
+          fromValue = null;
+        }
+        break;
+    }
+    return fromValue;
+  }
+};
+var notEqual = (value, old) => !is(value, old);
+var defaultPropertyDeclaration = {
+  attribute: true,
+  type: String,
+  converter: defaultConverter,
+  reflect: false,
+  useDefault: false,
+  hasChanged: notEqual
+};
+Symbol.metadata ??= Symbol("metadata");
+global2.litPropertyMetadata ??= new WeakMap;
+
+class ReactiveElement extends HTMLElement {
+  static addInitializer(initializer) {
+    this.__prepare();
+    (this._initializers ??= []).push(initializer);
+  }
+  static get observedAttributes() {
+    this.finalize();
+    return this.__attributeToPropertyMap && [...this.__attributeToPropertyMap.keys()];
+  }
+  static createProperty(name, options = defaultPropertyDeclaration) {
+    if (options.state) {
+      options.attribute = false;
+    }
+    this.__prepare();
+    if (this.prototype.hasOwnProperty(name)) {
+      options = Object.create(options);
+      options.wrapped = true;
+    }
+    this.elementProperties.set(name, options);
+    if (!options.noAccessor) {
+      const key = DEV_MODE ? Symbol.for(`${String(name)} (@property() cache)`) : Symbol();
+      const descriptor = this.getPropertyDescriptor(name, key, options);
+      if (descriptor !== undefined) {
+        defineProperty(this.prototype, name, descriptor);
+      }
+    }
+  }
+  static getPropertyDescriptor(name, key, options) {
+    const { get, set } = getOwnPropertyDescriptor(this.prototype, name) ?? {
+      get() {
+        return this[key];
+      },
+      set(v) {
+        this[key] = v;
+      }
+    };
+    if (DEV_MODE && get == null) {
+      if ("value" in (getOwnPropertyDescriptor(this.prototype, name) ?? {})) {
+        throw new Error(`Field ${JSON.stringify(String(name))} on ` + `${this.name} was declared as a reactive property ` + `but it's actually declared as a value on the prototype. ` + `Usually this is due to using @property or @state on a method.`);
+      }
+      issueWarning("reactive-property-without-getter", `Field ${JSON.stringify(String(name))} on ` + `${this.name} was declared as a reactive property ` + `but it does not have a getter. This will be an error in a ` + `future version of Lit.`);
+    }
+    return {
+      get,
+      set(value) {
+        const oldValue = get?.call(this);
+        set?.call(this, value);
+        this.requestUpdate(name, oldValue, options);
+      },
+      configurable: true,
+      enumerable: true
+    };
+  }
+  static getPropertyOptions(name) {
+    return this.elementProperties.get(name) ?? defaultPropertyDeclaration;
+  }
+  static __prepare() {
+    if (this.hasOwnProperty(JSCompiler_renameProperty("elementProperties", this))) {
+      return;
+    }
+    const superCtor = getPrototypeOf(this);
+    superCtor.finalize();
+    if (superCtor._initializers !== undefined) {
+      this._initializers = [...superCtor._initializers];
+    }
+    this.elementProperties = new Map(superCtor.elementProperties);
+  }
+  static finalize() {
+    if (this.hasOwnProperty(JSCompiler_renameProperty("finalized", this))) {
+      return;
+    }
+    this.finalized = true;
+    this.__prepare();
+    if (this.hasOwnProperty(JSCompiler_renameProperty("properties", this))) {
+      const props = this.properties;
+      const propKeys = [
+        ...getOwnPropertyNames(props),
+        ...getOwnPropertySymbols(props)
+      ];
+      for (const p of propKeys) {
+        this.createProperty(p, props[p]);
+      }
+    }
+    const metadata = this[Symbol.metadata];
+    if (metadata !== null) {
+      const properties = litPropertyMetadata.get(metadata);
+      if (properties !== undefined) {
+        for (const [p, options] of properties) {
+          this.elementProperties.set(p, options);
+        }
+      }
+    }
+    this.__attributeToPropertyMap = new Map;
+    for (const [p, options] of this.elementProperties) {
+      const attr = this.__attributeNameForProperty(p, options);
+      if (attr !== undefined) {
+        this.__attributeToPropertyMap.set(attr, p);
+      }
+    }
+    this.elementStyles = this.finalizeStyles(this.styles);
+    if (DEV_MODE) {
+      if (this.hasOwnProperty("createProperty")) {
+        issueWarning("no-override-create-property", "Overriding ReactiveElement.createProperty() is deprecated. " + "The override will not be called with standard decorators");
+      }
+      if (this.hasOwnProperty("getPropertyDescriptor")) {
+        issueWarning("no-override-get-property-descriptor", "Overriding ReactiveElement.getPropertyDescriptor() is deprecated. " + "The override will not be called with standard decorators");
+      }
+    }
+  }
+  static finalizeStyles(styles) {
+    const elementStyles = [];
+    if (Array.isArray(styles)) {
+      const set = new Set(styles.flat(Infinity).reverse());
+      for (const s of set) {
+        elementStyles.unshift(getCompatibleStyle(s));
+      }
+    } else if (styles !== undefined) {
+      elementStyles.push(getCompatibleStyle(styles));
+    }
+    return elementStyles;
+  }
+  static __attributeNameForProperty(name, options) {
+    const attribute = options.attribute;
+    return attribute === false ? undefined : typeof attribute === "string" ? attribute : typeof name === "string" ? name.toLowerCase() : undefined;
+  }
+  constructor() {
+    super();
+    this.__instanceProperties = undefined;
+    this.isUpdatePending = false;
+    this.hasUpdated = false;
+    this.__reflectingProperty = null;
+    this.__initialize();
+  }
+  __initialize() {
+    this.__updatePromise = new Promise((res) => this.enableUpdating = res);
+    this._$changedProperties = new Map;
+    this.__saveInstanceProperties();
+    this.requestUpdate();
+    this.constructor._initializers?.forEach((i) => i(this));
+  }
+  addController(controller) {
+    (this.__controllers ??= new Set).add(controller);
+    if (this.renderRoot !== undefined && this.isConnected) {
+      controller.hostConnected?.();
+    }
+  }
+  removeController(controller) {
+    this.__controllers?.delete(controller);
+  }
+  __saveInstanceProperties() {
+    const instanceProperties = new Map;
+    const elementProperties = this.constructor.elementProperties;
+    for (const p of elementProperties.keys()) {
+      if (this.hasOwnProperty(p)) {
+        instanceProperties.set(p, this[p]);
+        delete this[p];
+      }
+    }
+    if (instanceProperties.size > 0) {
+      this.__instanceProperties = instanceProperties;
+    }
+  }
+  createRenderRoot() {
+    const renderRoot = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
+    adoptStyles(renderRoot, this.constructor.elementStyles);
+    return renderRoot;
+  }
+  connectedCallback() {
+    this.renderRoot ??= this.createRenderRoot();
+    this.enableUpdating(true);
+    this.__controllers?.forEach((c) => c.hostConnected?.());
+  }
+  enableUpdating(_requestedUpdate) {}
+  disconnectedCallback() {
+    this.__controllers?.forEach((c) => c.hostDisconnected?.());
+  }
+  attributeChangedCallback(name, _old, value) {
+    this._$attributeToProperty(name, value);
+  }
+  __propertyToAttribute(name, value) {
+    const elemProperties = this.constructor.elementProperties;
+    const options = elemProperties.get(name);
+    const attr = this.constructor.__attributeNameForProperty(name, options);
+    if (attr !== undefined && options.reflect === true) {
+      const converter = options.converter?.toAttribute !== undefined ? options.converter : defaultConverter;
+      const attrValue = converter.toAttribute(value, options.type);
+      if (DEV_MODE && this.constructor.enabledWarnings.includes("migration") && attrValue === undefined) {
+        issueWarning("undefined-attribute-value", `The attribute value for the ${name} property is ` + `undefined on element ${this.localName}. The attribute will be ` + `removed, but in the previous version of \`ReactiveElement\`, ` + `the attribute would not have changed.`);
+      }
+      this.__reflectingProperty = name;
+      if (attrValue == null) {
+        this.removeAttribute(attr);
+      } else {
+        this.setAttribute(attr, attrValue);
+      }
+      this.__reflectingProperty = null;
+    }
+  }
+  _$attributeToProperty(name, value) {
+    const ctor = this.constructor;
+    const propName = ctor.__attributeToPropertyMap.get(name);
+    if (propName !== undefined && this.__reflectingProperty !== propName) {
+      const options = ctor.getPropertyOptions(propName);
+      const converter = typeof options.converter === "function" ? { fromAttribute: options.converter } : options.converter?.fromAttribute !== undefined ? options.converter : defaultConverter;
+      this.__reflectingProperty = propName;
+      const convertedValue = converter.fromAttribute(value, options.type);
+      this[propName] = convertedValue ?? this.__defaultValues?.get(propName) ?? convertedValue;
+      this.__reflectingProperty = null;
+    }
+  }
+  requestUpdate(name, oldValue, options, useNewValue = false, newValue) {
+    if (name !== undefined) {
+      if (DEV_MODE && name instanceof Event) {
+        issueWarning(``, `The requestUpdate() method was called with an Event as the property name. This is probably a mistake caused by binding this.requestUpdate as an event listener. Instead bind a function that will call it with no arguments: () => this.requestUpdate()`);
+      }
+      const ctor = this.constructor;
+      if (useNewValue === false) {
+        newValue = this[name];
+      }
+      options ??= ctor.getPropertyOptions(name);
+      const changed = (options.hasChanged ?? notEqual)(newValue, oldValue) || options.useDefault && options.reflect && newValue === this.__defaultValues?.get(name) && !this.hasAttribute(ctor.__attributeNameForProperty(name, options));
+      if (changed) {
+        this._$changeProperty(name, oldValue, options);
+      } else {
+        return;
+      }
+    }
+    if (this.isUpdatePending === false) {
+      this.__updatePromise = this.__enqueueUpdate();
+    }
+  }
+  _$changeProperty(name, oldValue, { useDefault, reflect, wrapped }, initializeValue) {
+    if (useDefault && !(this.__defaultValues ??= new Map).has(name)) {
+      this.__defaultValues.set(name, initializeValue ?? oldValue ?? this[name]);
+      if (wrapped !== true || initializeValue !== undefined) {
+        return;
+      }
+    }
+    if (!this._$changedProperties.has(name)) {
+      if (!this.hasUpdated && !useDefault) {
+        oldValue = undefined;
+      }
+      this._$changedProperties.set(name, oldValue);
+    }
+    if (reflect === true && this.__reflectingProperty !== name) {
+      (this.__reflectingProperties ??= new Set).add(name);
+    }
+  }
+  async __enqueueUpdate() {
+    this.isUpdatePending = true;
+    try {
+      await this.__updatePromise;
+    } catch (e) {
+      Promise.reject(e);
+    }
+    const result = this.scheduleUpdate();
+    if (result != null) {
+      await result;
+    }
+    return !this.isUpdatePending;
+  }
+  scheduleUpdate() {
+    const result = this.performUpdate();
+    if (DEV_MODE && this.constructor.enabledWarnings.includes("async-perform-update") && typeof result?.then === "function") {
+      issueWarning("async-perform-update", `Element ${this.localName} returned a Promise from performUpdate(). ` + `This behavior is deprecated and will be removed in a future ` + `version of ReactiveElement.`);
+    }
+    return result;
+  }
+  performUpdate() {
+    if (!this.isUpdatePending) {
+      return;
+    }
+    debugLogEvent?.({ kind: "update" });
+    if (!this.hasUpdated) {
+      this.renderRoot ??= this.createRenderRoot();
+      if (DEV_MODE) {
+        const ctor = this.constructor;
+        const shadowedProperties = [...ctor.elementProperties.keys()].filter((p) => this.hasOwnProperty(p) && (p in getPrototypeOf(this)));
+        if (shadowedProperties.length) {
+          throw new Error(`The following properties on element ${this.localName} will not ` + `trigger updates as expected because they are set using class ` + `fields: ${shadowedProperties.join(", ")}. ` + `Native class fields and some compiled output will overwrite ` + `accessors used for detecting changes. See ` + `https://lit.dev/msg/class-field-shadowing ` + `for more information.`);
+        }
+      }
+      if (this.__instanceProperties) {
+        for (const [p, value] of this.__instanceProperties) {
+          this[p] = value;
+        }
+        this.__instanceProperties = undefined;
+      }
+      const elementProperties = this.constructor.elementProperties;
+      if (elementProperties.size > 0) {
+        for (const [p, options] of elementProperties) {
+          const { wrapped } = options;
+          const value = this[p];
+          if (wrapped === true && !this._$changedProperties.has(p) && value !== undefined) {
+            this._$changeProperty(p, undefined, options, value);
+          }
+        }
+      }
+    }
+    let shouldUpdate = false;
+    const changedProperties = this._$changedProperties;
+    try {
+      shouldUpdate = this.shouldUpdate(changedProperties);
+      if (shouldUpdate) {
+        this.willUpdate(changedProperties);
+        this.__controllers?.forEach((c) => c.hostUpdate?.());
+        this.update(changedProperties);
+      } else {
+        this.__markUpdated();
+      }
+    } catch (e) {
+      shouldUpdate = false;
+      this.__markUpdated();
+      throw e;
+    }
+    if (shouldUpdate) {
+      this._$didUpdate(changedProperties);
+    }
+  }
+  willUpdate(_changedProperties) {}
+  _$didUpdate(changedProperties) {
+    this.__controllers?.forEach((c) => c.hostUpdated?.());
+    if (!this.hasUpdated) {
+      this.hasUpdated = true;
+      this.firstUpdated(changedProperties);
+    }
+    this.updated(changedProperties);
+    if (DEV_MODE && this.isUpdatePending && this.constructor.enabledWarnings.includes("change-in-update")) {
+      issueWarning("change-in-update", `Element ${this.localName} scheduled an update ` + `(generally because a property was set) ` + `after an update completed, causing a new update to be scheduled. ` + `This is inefficient and should be avoided unless the next update ` + `can only be scheduled as a side effect of the previous update.`);
+    }
+  }
+  __markUpdated() {
+    this._$changedProperties = new Map;
+    this.isUpdatePending = false;
+  }
+  get updateComplete() {
+    return this.getUpdateComplete();
+  }
+  getUpdateComplete() {
+    return this.__updatePromise;
+  }
+  shouldUpdate(_changedProperties) {
+    return true;
+  }
+  update(_changedProperties) {
+    this.__reflectingProperties &&= this.__reflectingProperties.forEach((p) => this.__propertyToAttribute(p, this[p]));
+    this.__markUpdated();
+  }
+  updated(_changedProperties) {}
+  firstUpdated(_changedProperties) {}
+}
+ReactiveElement.elementStyles = [];
+ReactiveElement.shadowRootOptions = { mode: "open" };
+ReactiveElement[JSCompiler_renameProperty("elementProperties", ReactiveElement)] = new Map;
+ReactiveElement[JSCompiler_renameProperty("finalized", ReactiveElement)] = new Map;
+polyfillSupport?.({ ReactiveElement });
+if (DEV_MODE) {
+  ReactiveElement.enabledWarnings = [
+    "change-in-update",
+    "async-perform-update"
+  ];
+  const ensureOwnWarnings = function(ctor) {
+    if (!ctor.hasOwnProperty(JSCompiler_renameProperty("enabledWarnings", ctor))) {
+      ctor.enabledWarnings = ctor.enabledWarnings.slice();
+    }
+  };
+  ReactiveElement.enableWarning = function(warning) {
+    ensureOwnWarnings(this);
+    if (!this.enabledWarnings.includes(warning)) {
+      this.enabledWarnings.push(warning);
+    }
+  };
+  ReactiveElement.disableWarning = function(warning) {
+    ensureOwnWarnings(this);
+    const i = this.enabledWarnings.indexOf(warning);
+    if (i >= 0) {
+      this.enabledWarnings.splice(i, 1);
+    }
+  };
+}
+(global2.reactiveElementVersions ??= []).push("2.1.2");
+if (DEV_MODE && global2.reactiveElementVersions.length > 1) {
+  queueMicrotask(() => {
+    issueWarning("multiple-versions", `Multiple versions of Lit loaded. Loading multiple versions ` + `is not recommended.`);
+  });
+}
+
+// ../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/development/lit-html.js
+var DEV_MODE2 = true;
+var ENABLE_EXTRA_SECURITY_HOOKS = true;
+var ENABLE_SHADYDOM_NOPATCH = true;
+var NODE_MODE3 = false;
+var global3 = globalThis;
+var debugLogEvent2 = DEV_MODE2 ? (event) => {
+  const shouldEmit = global3.emitLitDebugLogEvents;
+  if (!shouldEmit) {
+    return;
+  }
+  global3.dispatchEvent(new CustomEvent("lit-debug", {
+    detail: event
+  }));
+} : undefined;
+var debugLogRenderId = 0;
+var issueWarning2;
+if (DEV_MODE2) {
+  global3.litIssuedWarnings ??= new Set;
+  issueWarning2 = (code, warning) => {
+    warning += code ? ` See https://lit.dev/msg/${code} for more information.` : "";
+    if (!global3.litIssuedWarnings.has(warning) && !global3.litIssuedWarnings.has(code)) {
+      console.warn(warning);
+      global3.litIssuedWarnings.add(warning);
+    }
+  };
+  queueMicrotask(() => {
+    issueWarning2("dev-mode", `Lit is in dev mode. Not recommended for production!`);
+  });
+}
+var wrap = ENABLE_SHADYDOM_NOPATCH && global3.ShadyDOM?.inUse && global3.ShadyDOM?.noPatch === true ? global3.ShadyDOM.wrap : (node) => node;
+var trustedTypes2 = global3.trustedTypes;
+var policy = trustedTypes2 ? trustedTypes2.createPolicy("lit-html", {
+  createHTML: (s) => s
+}) : undefined;
+var identityFunction = (value) => value;
+var noopSanitizer = (_node, _name, _type) => identityFunction;
+var setSanitizer = (newSanitizer) => {
+  if (!ENABLE_EXTRA_SECURITY_HOOKS) {
+    return;
+  }
+  if (sanitizerFactoryInternal !== noopSanitizer) {
+    throw new Error(`Attempted to overwrite existing lit-html security policy.` + ` setSanitizeDOMValueFactory should be called at most once.`);
+  }
+  sanitizerFactoryInternal = newSanitizer;
+};
+var _testOnlyClearSanitizerFactoryDoNotCallOrElse = () => {
+  sanitizerFactoryInternal = noopSanitizer;
+};
+var createSanitizer = (node, name, type) => {
+  return sanitizerFactoryInternal(node, name, type);
+};
+var boundAttributeSuffix = "$lit$";
+var marker = `lit$${Math.random().toFixed(9).slice(2)}$`;
+var markerMatch = "?" + marker;
+var nodeMarker = `<${markerMatch}>`;
+var d = NODE_MODE3 && global3.document === undefined ? {
+  createTreeWalker() {
+    return {};
+  }
+} : document;
+var createMarker = () => d.createComment("");
+var isPrimitive = (value) => value === null || typeof value != "object" && typeof value != "function";
+var isArray = Array.isArray;
+var isIterable = (value) => isArray(value) || typeof value?.[Symbol.iterator] === "function";
+var SPACE_CHAR = `[ 	
+\f\r]`;
+var ATTR_VALUE_CHAR = `[^ 	
+\f\r"'\`<>=]`;
+var NAME_CHAR = `[^\\s"'>=/]`;
+var textEndRegex = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g;
+var COMMENT_START = 1;
+var TAG_NAME = 2;
+var DYNAMIC_TAG_NAME = 3;
+var commentEndRegex = /-->/g;
+var comment2EndRegex = />/g;
+var tagEndRegex = new RegExp(`>|${SPACE_CHAR}(?:(${NAME_CHAR}+)(${SPACE_CHAR}*=${SPACE_CHAR}*(?:${ATTR_VALUE_CHAR}|("|')|))|$)`, "g");
+var ENTIRE_MATCH = 0;
+var ATTRIBUTE_NAME = 1;
+var SPACES_AND_EQUALS = 2;
+var QUOTE_CHAR = 3;
+var singleQuoteAttrEndRegex = /'/g;
+var doubleQuoteAttrEndRegex = /"/g;
+var rawTextElement = /^(?:script|style|textarea|title)$/i;
+var HTML_RESULT = 1;
+var SVG_RESULT = 2;
+var MATHML_RESULT = 3;
+var ATTRIBUTE_PART = 1;
+var CHILD_PART = 2;
+var PROPERTY_PART = 3;
+var BOOLEAN_ATTRIBUTE_PART = 4;
+var EVENT_PART = 5;
+var ELEMENT_PART = 6;
+var COMMENT_PART = 7;
+var tag = (type) => (strings, ...values) => {
+  if (DEV_MODE2 && strings.some((s) => s === undefined)) {
+    console.warn(`Some template strings are undefined.
+` + "This is probably caused by illegal octal escape sequences.");
+  }
+  if (DEV_MODE2) {
+    if (values.some((val) => val?.["_$litStatic$"])) {
+      issueWarning2("", `Static values 'literal' or 'unsafeStatic' cannot be used as values to non-static templates.
+` + `Please use the static 'html' tag function. See https://lit.dev/docs/templates/expressions/#static-expressions`);
+    }
+  }
+  return {
+    ["_$litType$"]: type,
+    strings,
+    values
+  };
+};
+var html = tag(HTML_RESULT);
+var svg = tag(SVG_RESULT);
+var mathml = tag(MATHML_RESULT);
+var noChange = Symbol.for("lit-noChange");
+var nothing = Symbol.for("lit-nothing");
+var templateCache = new WeakMap;
+var walker = d.createTreeWalker(d, 129);
+var sanitizerFactoryInternal = noopSanitizer;
+function trustFromTemplateString(tsa, stringFromTSA) {
+  if (!isArray(tsa) || !tsa.hasOwnProperty("raw")) {
+    let message = "invalid template strings array";
+    if (DEV_MODE2) {
+      message = `
+          Internal Error: expected template strings to be an array
+          with a 'raw' field. Faking a template strings array by
+          calling html or svg like an ordinary function is effectively
+          the same as calling unsafeHtml and can lead to major security
+          issues, e.g. opening your code up to XSS attacks.
+          If you're using the html or svg tagged template functions normally
+          and still seeing this error, please file a bug at
+          https://github.com/lit/lit/issues/new?template=bug_report.md
+          and include information about your build tooling, if any.
+        `.trim().replace(/\n */g, `
+`);
+    }
+    throw new Error(message);
+  }
+  return policy !== undefined ? policy.createHTML(stringFromTSA) : stringFromTSA;
+}
+var getTemplateHtml = (strings, type) => {
+  const l = strings.length - 1;
+  const attrNames = [];
+  let html = type === SVG_RESULT ? "<svg>" : type === MATHML_RESULT ? "<math>" : "";
+  let rawTextEndRegex;
+  let regex = textEndRegex;
+  for (let i = 0;i < l; i++) {
+    const s = strings[i];
+    let attrNameEndIndex = -1;
+    let attrName;
+    let lastIndex = 0;
+    let match;
+    while (lastIndex < s.length) {
+      regex.lastIndex = lastIndex;
+      match = regex.exec(s);
+      if (match === null) {
+        break;
+      }
+      lastIndex = regex.lastIndex;
+      if (regex === textEndRegex) {
+        if (match[COMMENT_START] === "!--") {
+          regex = commentEndRegex;
+        } else if (match[COMMENT_START] !== undefined) {
+          regex = comment2EndRegex;
+        } else if (match[TAG_NAME] !== undefined) {
+          if (rawTextElement.test(match[TAG_NAME])) {
+            rawTextEndRegex = new RegExp(`</${match[TAG_NAME]}`, "g");
+          }
+          regex = tagEndRegex;
+        } else if (match[DYNAMIC_TAG_NAME] !== undefined) {
+          if (DEV_MODE2) {
+            throw new Error("Bindings in tag names are not supported. Please use static templates instead. " + "See https://lit.dev/docs/templates/expressions/#static-expressions");
+          }
+          regex = tagEndRegex;
+        }
+      } else if (regex === tagEndRegex) {
+        if (match[ENTIRE_MATCH] === ">") {
+          regex = rawTextEndRegex ?? textEndRegex;
+          attrNameEndIndex = -1;
+        } else if (match[ATTRIBUTE_NAME] === undefined) {
+          attrNameEndIndex = -2;
+        } else {
+          attrNameEndIndex = regex.lastIndex - match[SPACES_AND_EQUALS].length;
+          attrName = match[ATTRIBUTE_NAME];
+          regex = match[QUOTE_CHAR] === undefined ? tagEndRegex : match[QUOTE_CHAR] === '"' ? doubleQuoteAttrEndRegex : singleQuoteAttrEndRegex;
+        }
+      } else if (regex === doubleQuoteAttrEndRegex || regex === singleQuoteAttrEndRegex) {
+        regex = tagEndRegex;
+      } else if (regex === commentEndRegex || regex === comment2EndRegex) {
+        regex = textEndRegex;
+      } else {
+        regex = tagEndRegex;
+        rawTextEndRegex = undefined;
+      }
+    }
+    if (DEV_MODE2) {
+      console.assert(attrNameEndIndex === -1 || regex === tagEndRegex || regex === singleQuoteAttrEndRegex || regex === doubleQuoteAttrEndRegex, "unexpected parse state B");
+    }
+    const end = regex === tagEndRegex && strings[i + 1].startsWith("/>") ? " " : "";
+    html += regex === textEndRegex ? s + nodeMarker : attrNameEndIndex >= 0 ? (attrNames.push(attrName), s.slice(0, attrNameEndIndex) + boundAttributeSuffix + s.slice(attrNameEndIndex)) + marker + end : s + marker + (attrNameEndIndex === -2 ? i : end);
+  }
+  const htmlResult = html + (strings[l] || "<?>") + (type === SVG_RESULT ? "</svg>" : type === MATHML_RESULT ? "</math>" : "");
+  return [trustFromTemplateString(strings, htmlResult), attrNames];
+};
+
+class Template {
+  constructor({ strings, ["_$litType$"]: type }, options) {
+    this.parts = [];
+    let node;
+    let nodeIndex = 0;
+    let attrNameIndex = 0;
+    const partCount = strings.length - 1;
+    const parts = this.parts;
+    const [html, attrNames] = getTemplateHtml(strings, type);
+    this.el = Template.createElement(html, options);
+    walker.currentNode = this.el.content;
+    if (type === SVG_RESULT || type === MATHML_RESULT) {
+      const wrapper = this.el.content.firstChild;
+      wrapper.replaceWith(...wrapper.childNodes);
+    }
+    while ((node = walker.nextNode()) !== null && parts.length < partCount) {
+      if (node.nodeType === 1) {
+        if (DEV_MODE2) {
+          const tag = node.localName;
+          if (/^(?:textarea|template)$/i.test(tag) && node.innerHTML.includes(marker)) {
+            const m = `Expressions are not supported inside \`${tag}\` ` + `elements. See https://lit.dev/msg/expression-in-${tag} for more ` + `information.`;
+            if (tag === "template") {
+              throw new Error(m);
+            } else
+              issueWarning2("", m);
+          }
+        }
+        if (node.hasAttributes()) {
+          for (const name of node.getAttributeNames()) {
+            if (name.endsWith(boundAttributeSuffix)) {
+              const realName = attrNames[attrNameIndex++];
+              const value = node.getAttribute(name);
+              const statics = value.split(marker);
+              const m = /([.?@])?(.*)/.exec(realName);
+              parts.push({
+                type: ATTRIBUTE_PART,
+                index: nodeIndex,
+                name: m[2],
+                strings: statics,
+                ctor: m[1] === "." ? PropertyPart : m[1] === "?" ? BooleanAttributePart : m[1] === "@" ? EventPart : AttributePart
+              });
+              node.removeAttribute(name);
+            } else if (name.startsWith(marker)) {
+              parts.push({
+                type: ELEMENT_PART,
+                index: nodeIndex
+              });
+              node.removeAttribute(name);
+            }
+          }
+        }
+        if (rawTextElement.test(node.tagName)) {
+          const strings = node.textContent.split(marker);
+          const lastIndex = strings.length - 1;
+          if (lastIndex > 0) {
+            node.textContent = trustedTypes2 ? trustedTypes2.emptyScript : "";
+            for (let i = 0;i < lastIndex; i++) {
+              node.append(strings[i], createMarker());
+              walker.nextNode();
+              parts.push({ type: CHILD_PART, index: ++nodeIndex });
+            }
+            node.append(strings[lastIndex], createMarker());
+          }
+        }
+      } else if (node.nodeType === 8) {
+        const data = node.data;
+        if (data === markerMatch) {
+          parts.push({ type: CHILD_PART, index: nodeIndex });
+        } else {
+          let i = -1;
+          while ((i = node.data.indexOf(marker, i + 1)) !== -1) {
+            parts.push({ type: COMMENT_PART, index: nodeIndex });
+            i += marker.length - 1;
+          }
+        }
+      }
+      nodeIndex++;
+    }
+    if (DEV_MODE2) {
+      if (attrNames.length !== attrNameIndex) {
+        throw new Error(`Detected duplicate attribute bindings. This occurs if your template ` + `has duplicate attributes on an element tag. For example ` + `"<input ?disabled=\${true} ?disabled=\${false}>" contains a ` + `duplicate "disabled" attribute. The error was detected in ` + `the following template: 
+` + "`" + strings.join("${...}") + "`");
+      }
+    }
+    debugLogEvent2 && debugLogEvent2({
+      kind: "template prep",
+      template: this,
+      clonableTemplate: this.el,
+      parts: this.parts,
+      strings
+    });
+  }
+  static createElement(html, _options) {
+    const el = d.createElement("template");
+    el.innerHTML = html;
+    return el;
+  }
+}
+function resolveDirective(part, value, parent = part, attributeIndex) {
+  if (value === noChange) {
+    return value;
+  }
+  let currentDirective = attributeIndex !== undefined ? parent.__directives?.[attributeIndex] : parent.__directive;
+  const nextDirectiveConstructor = isPrimitive(value) ? undefined : value["_$litDirective$"];
+  if (currentDirective?.constructor !== nextDirectiveConstructor) {
+    currentDirective?.["_$notifyDirectiveConnectionChanged"]?.(false);
+    if (nextDirectiveConstructor === undefined) {
+      currentDirective = undefined;
+    } else {
+      currentDirective = new nextDirectiveConstructor(part);
+      currentDirective._$initialize(part, parent, attributeIndex);
+    }
+    if (attributeIndex !== undefined) {
+      (parent.__directives ??= [])[attributeIndex] = currentDirective;
+    } else {
+      parent.__directive = currentDirective;
+    }
+  }
+  if (currentDirective !== undefined) {
+    value = resolveDirective(part, currentDirective._$resolve(part, value.values), currentDirective, attributeIndex);
+  }
+  return value;
+}
+
+class TemplateInstance {
+  constructor(template, parent) {
+    this._$parts = [];
+    this._$disconnectableChildren = undefined;
+    this._$template = template;
+    this._$parent = parent;
+  }
+  get parentNode() {
+    return this._$parent.parentNode;
+  }
+  get _$isConnected() {
+    return this._$parent._$isConnected;
+  }
+  _clone(options) {
+    const { el: { content }, parts } = this._$template;
+    const fragment = (options?.creationScope ?? d).importNode(content, true);
+    walker.currentNode = fragment;
+    let node = walker.nextNode();
+    let nodeIndex = 0;
+    let partIndex = 0;
+    let templatePart = parts[0];
+    while (templatePart !== undefined) {
+      if (nodeIndex === templatePart.index) {
+        let part;
+        if (templatePart.type === CHILD_PART) {
+          part = new ChildPart(node, node.nextSibling, this, options);
+        } else if (templatePart.type === ATTRIBUTE_PART) {
+          part = new templatePart.ctor(node, templatePart.name, templatePart.strings, this, options);
+        } else if (templatePart.type === ELEMENT_PART) {
+          part = new ElementPart(node, this, options);
+        }
+        this._$parts.push(part);
+        templatePart = parts[++partIndex];
+      }
+      if (nodeIndex !== templatePart?.index) {
+        node = walker.nextNode();
+        nodeIndex++;
+      }
+    }
+    walker.currentNode = d;
+    return fragment;
+  }
+  _update(values) {
+    let i = 0;
+    for (const part of this._$parts) {
+      if (part !== undefined) {
+        debugLogEvent2 && debugLogEvent2({
+          kind: "set part",
+          part,
+          value: values[i],
+          valueIndex: i,
+          values,
+          templateInstance: this
+        });
+        if (part.strings !== undefined) {
+          part._$setValue(values, part, i);
+          i += part.strings.length - 2;
+        } else {
+          part._$setValue(values[i]);
+        }
+      }
+      i++;
+    }
+  }
+}
+
+class ChildPart {
+  get _$isConnected() {
+    return this._$parent?._$isConnected ?? this.__isConnected;
+  }
+  constructor(startNode, endNode, parent, options) {
+    this.type = CHILD_PART;
+    this._$committedValue = nothing;
+    this._$disconnectableChildren = undefined;
+    this._$startNode = startNode;
+    this._$endNode = endNode;
+    this._$parent = parent;
+    this.options = options;
+    this.__isConnected = options?.isConnected ?? true;
+    if (ENABLE_EXTRA_SECURITY_HOOKS) {
+      this._textSanitizer = undefined;
+    }
+  }
+  get parentNode() {
+    let parentNode = wrap(this._$startNode).parentNode;
+    const parent = this._$parent;
+    if (parent !== undefined && parentNode?.nodeType === 11) {
+      parentNode = parent.parentNode;
+    }
+    return parentNode;
+  }
+  get startNode() {
+    return this._$startNode;
+  }
+  get endNode() {
+    return this._$endNode;
+  }
+  _$setValue(value, directiveParent = this) {
+    if (DEV_MODE2 && this.parentNode === null) {
+      throw new Error(`This \`ChildPart\` has no \`parentNode\` and therefore cannot accept a value. This likely means the element containing the part was manipulated in an unsupported way outside of Lit's control such that the part's marker nodes were ejected from DOM. For example, setting the element's \`innerHTML\` or \`textContent\` can do this.`);
+    }
+    value = resolveDirective(this, value, directiveParent);
+    if (isPrimitive(value)) {
+      if (value === nothing || value == null || value === "") {
+        if (this._$committedValue !== nothing) {
+          debugLogEvent2 && debugLogEvent2({
+            kind: "commit nothing to child",
+            start: this._$startNode,
+            end: this._$endNode,
+            parent: this._$parent,
+            options: this.options
+          });
+          this._$clear();
+        }
+        this._$committedValue = nothing;
+      } else if (value !== this._$committedValue && value !== noChange) {
+        this._commitText(value);
+      }
+    } else if (value["_$litType$"] !== undefined) {
+      this._commitTemplateResult(value);
+    } else if (value.nodeType !== undefined) {
+      if (DEV_MODE2 && this.options?.host === value) {
+        this._commitText(`[probable mistake: rendered a template's host in itself ` + `(commonly caused by writing \${this} in a template]`);
+        console.warn(`Attempted to render the template host`, value, `inside itself. This is almost always a mistake, and in dev mode `, `we render some warning text. In production however, we'll `, `render it, which will usually result in an error, and sometimes `, `in the element disappearing from the DOM.`);
+        return;
+      }
+      this._commitNode(value);
+    } else if (isIterable(value)) {
+      this._commitIterable(value);
+    } else {
+      this._commitText(value);
+    }
+  }
+  _insert(node) {
+    return wrap(wrap(this._$startNode).parentNode).insertBefore(node, this._$endNode);
+  }
+  _commitNode(value) {
+    if (this._$committedValue !== value) {
+      this._$clear();
+      if (ENABLE_EXTRA_SECURITY_HOOKS && sanitizerFactoryInternal !== noopSanitizer) {
+        const parentNodeName = this._$startNode.parentNode?.nodeName;
+        if (parentNodeName === "STYLE" || parentNodeName === "SCRIPT") {
+          let message = "Forbidden";
+          if (DEV_MODE2) {
+            if (parentNodeName === "STYLE") {
+              message = `Lit does not support binding inside style nodes. ` + `This is a security risk, as style injection attacks can ` + `exfiltrate data and spoof UIs. ` + `Consider instead using css\`...\` literals ` + `to compose styles, and do dynamic styling with ` + `css custom properties, ::parts, <slot>s, ` + `and by mutating the DOM rather than stylesheets.`;
+            } else {
+              message = `Lit does not support binding inside script nodes. ` + `This is a security risk, as it could allow arbitrary ` + `code execution.`;
+            }
+          }
+          throw new Error(message);
+        }
+      }
+      debugLogEvent2 && debugLogEvent2({
+        kind: "commit node",
+        start: this._$startNode,
+        parent: this._$parent,
+        value,
+        options: this.options
+      });
+      this._$committedValue = this._insert(value);
+    }
+  }
+  _commitText(value) {
+    if (this._$committedValue !== nothing && isPrimitive(this._$committedValue)) {
+      const node = wrap(this._$startNode).nextSibling;
+      if (ENABLE_EXTRA_SECURITY_HOOKS) {
+        if (this._textSanitizer === undefined) {
+          this._textSanitizer = createSanitizer(node, "data", "property");
+        }
+        value = this._textSanitizer(value);
+      }
+      debugLogEvent2 && debugLogEvent2({
+        kind: "commit text",
+        node,
+        value,
+        options: this.options
+      });
+      node.data = value;
+    } else {
+      if (ENABLE_EXTRA_SECURITY_HOOKS) {
+        const textNode = d.createTextNode("");
+        this._commitNode(textNode);
+        if (this._textSanitizer === undefined) {
+          this._textSanitizer = createSanitizer(textNode, "data", "property");
+        }
+        value = this._textSanitizer(value);
+        debugLogEvent2 && debugLogEvent2({
+          kind: "commit text",
+          node: textNode,
+          value,
+          options: this.options
+        });
+        textNode.data = value;
+      } else {
+        this._commitNode(d.createTextNode(value));
+        debugLogEvent2 && debugLogEvent2({
+          kind: "commit text",
+          node: wrap(this._$startNode).nextSibling,
+          value,
+          options: this.options
+        });
+      }
+    }
+    this._$committedValue = value;
+  }
+  _commitTemplateResult(result) {
+    const { values, ["_$litType$"]: type } = result;
+    const template = typeof type === "number" ? this._$getTemplate(result) : (type.el === undefined && (type.el = Template.createElement(trustFromTemplateString(type.h, type.h[0]), this.options)), type);
+    if (this._$committedValue?._$template === template) {
+      debugLogEvent2 && debugLogEvent2({
+        kind: "template updating",
+        template,
+        instance: this._$committedValue,
+        parts: this._$committedValue._$parts,
+        options: this.options,
+        values
+      });
+      this._$committedValue._update(values);
+    } else {
+      const instance = new TemplateInstance(template, this);
+      const fragment = instance._clone(this.options);
+      debugLogEvent2 && debugLogEvent2({
+        kind: "template instantiated",
+        template,
+        instance,
+        parts: instance._$parts,
+        options: this.options,
+        fragment,
+        values
+      });
+      instance._update(values);
+      debugLogEvent2 && debugLogEvent2({
+        kind: "template instantiated and updated",
+        template,
+        instance,
+        parts: instance._$parts,
+        options: this.options,
+        fragment,
+        values
+      });
+      this._commitNode(fragment);
+      this._$committedValue = instance;
+    }
+  }
+  _$getTemplate(result) {
+    let template = templateCache.get(result.strings);
+    if (template === undefined) {
+      templateCache.set(result.strings, template = new Template(result));
+    }
+    return template;
+  }
+  _commitIterable(value) {
+    if (!isArray(this._$committedValue)) {
+      this._$committedValue = [];
+      this._$clear();
+    }
+    const itemParts = this._$committedValue;
+    let partIndex = 0;
+    let itemPart;
+    for (const item of value) {
+      if (partIndex === itemParts.length) {
+        itemParts.push(itemPart = new ChildPart(this._insert(createMarker()), this._insert(createMarker()), this, this.options));
+      } else {
+        itemPart = itemParts[partIndex];
+      }
+      itemPart._$setValue(item);
+      partIndex++;
+    }
+    if (partIndex < itemParts.length) {
+      this._$clear(itemPart && wrap(itemPart._$endNode).nextSibling, partIndex);
+      itemParts.length = partIndex;
+    }
+  }
+  _$clear(start = wrap(this._$startNode).nextSibling, from) {
+    this._$notifyConnectionChanged?.(false, true, from);
+    while (start !== this._$endNode) {
+      const n = wrap(start).nextSibling;
+      wrap(start).remove();
+      start = n;
+    }
+  }
+  setConnected(isConnected) {
+    if (this._$parent === undefined) {
+      this.__isConnected = isConnected;
+      this._$notifyConnectionChanged?.(isConnected);
+    } else if (DEV_MODE2) {
+      throw new Error("part.setConnected() may only be called on a " + "RootPart returned from render().");
+    }
+  }
+}
+
+class AttributePart {
+  get tagName() {
+    return this.element.tagName;
+  }
+  get _$isConnected() {
+    return this._$parent._$isConnected;
+  }
+  constructor(element, name, strings, parent, options) {
+    this.type = ATTRIBUTE_PART;
+    this._$committedValue = nothing;
+    this._$disconnectableChildren = undefined;
+    this.element = element;
+    this.name = name;
+    this._$parent = parent;
+    this.options = options;
+    if (strings.length > 2 || strings[0] !== "" || strings[1] !== "") {
+      this._$committedValue = new Array(strings.length - 1).fill(new String);
+      this.strings = strings;
+    } else {
+      this._$committedValue = nothing;
+    }
+    if (ENABLE_EXTRA_SECURITY_HOOKS) {
+      this._sanitizer = undefined;
+    }
+  }
+  _$setValue(value, directiveParent = this, valueIndex, noCommit) {
+    const strings = this.strings;
+    let change = false;
+    if (strings === undefined) {
+      value = resolveDirective(this, value, directiveParent, 0);
+      change = !isPrimitive(value) || value !== this._$committedValue && value !== noChange;
+      if (change) {
+        this._$committedValue = value;
+      }
+    } else {
+      const values = value;
+      value = strings[0];
+      let i, v;
+      for (i = 0;i < strings.length - 1; i++) {
+        v = resolveDirective(this, values[valueIndex + i], directiveParent, i);
+        if (v === noChange) {
+          v = this._$committedValue[i];
+        }
+        change ||= !isPrimitive(v) || v !== this._$committedValue[i];
+        if (v === nothing) {
+          value = nothing;
+        } else if (value !== nothing) {
+          value += (v ?? "") + strings[i + 1];
+        }
+        this._$committedValue[i] = v;
+      }
+    }
+    if (change && !noCommit) {
+      this._commitValue(value);
+    }
+  }
+  _commitValue(value) {
+    if (value === nothing) {
+      wrap(this.element).removeAttribute(this.name);
+    } else {
+      if (ENABLE_EXTRA_SECURITY_HOOKS) {
+        if (this._sanitizer === undefined) {
+          this._sanitizer = sanitizerFactoryInternal(this.element, this.name, "attribute");
+        }
+        value = this._sanitizer(value ?? "");
+      }
+      debugLogEvent2 && debugLogEvent2({
+        kind: "commit attribute",
+        element: this.element,
+        name: this.name,
+        value,
+        options: this.options
+      });
+      wrap(this.element).setAttribute(this.name, value ?? "");
+    }
+  }
+}
+
+class PropertyPart extends AttributePart {
+  constructor() {
+    super(...arguments);
+    this.type = PROPERTY_PART;
+  }
+  _commitValue(value) {
+    if (ENABLE_EXTRA_SECURITY_HOOKS) {
+      if (this._sanitizer === undefined) {
+        this._sanitizer = sanitizerFactoryInternal(this.element, this.name, "property");
+      }
+      value = this._sanitizer(value);
+    }
+    debugLogEvent2 && debugLogEvent2({
+      kind: "commit property",
+      element: this.element,
+      name: this.name,
+      value,
+      options: this.options
+    });
+    this.element[this.name] = value === nothing ? undefined : value;
+  }
+}
+
+class BooleanAttributePart extends AttributePart {
+  constructor() {
+    super(...arguments);
+    this.type = BOOLEAN_ATTRIBUTE_PART;
+  }
+  _commitValue(value) {
+    debugLogEvent2 && debugLogEvent2({
+      kind: "commit boolean attribute",
+      element: this.element,
+      name: this.name,
+      value: !!(value && value !== nothing),
+      options: this.options
+    });
+    wrap(this.element).toggleAttribute(this.name, !!value && value !== nothing);
+  }
+}
+
+class EventPart extends AttributePart {
+  constructor(element, name, strings, parent, options) {
+    super(element, name, strings, parent, options);
+    this.type = EVENT_PART;
+    if (DEV_MODE2 && this.strings !== undefined) {
+      throw new Error(`A \`<${element.localName}>\` has a \`@${name}=...\` listener with ` + "invalid content. Event listeners in templates must have exactly " + "one expression and no surrounding text.");
+    }
+  }
+  _$setValue(newListener, directiveParent = this) {
+    newListener = resolveDirective(this, newListener, directiveParent, 0) ?? nothing;
+    if (newListener === noChange) {
+      return;
+    }
+    const oldListener = this._$committedValue;
+    const shouldRemoveListener = newListener === nothing && oldListener !== nothing || newListener.capture !== oldListener.capture || newListener.once !== oldListener.once || newListener.passive !== oldListener.passive;
+    const shouldAddListener = newListener !== nothing && (oldListener === nothing || shouldRemoveListener);
+    debugLogEvent2 && debugLogEvent2({
+      kind: "commit event listener",
+      element: this.element,
+      name: this.name,
+      value: newListener,
+      options: this.options,
+      removeListener: shouldRemoveListener,
+      addListener: shouldAddListener,
+      oldListener
+    });
+    if (shouldRemoveListener) {
+      this.element.removeEventListener(this.name, this, oldListener);
+    }
+    if (shouldAddListener) {
+      this.element.addEventListener(this.name, this, newListener);
+    }
+    this._$committedValue = newListener;
+  }
+  handleEvent(event) {
+    if (typeof this._$committedValue === "function") {
+      this._$committedValue.call(this.options?.host ?? this.element, event);
+    } else {
+      this._$committedValue.handleEvent(event);
+    }
+  }
+}
+
+class ElementPart {
+  constructor(element, parent, options) {
+    this.element = element;
+    this.type = ELEMENT_PART;
+    this._$disconnectableChildren = undefined;
+    this._$parent = parent;
+    this.options = options;
+  }
+  get _$isConnected() {
+    return this._$parent._$isConnected;
+  }
+  _$setValue(value) {
+    debugLogEvent2 && debugLogEvent2({
+      kind: "commit to element binding",
+      element: this.element,
+      value,
+      options: this.options
+    });
+    resolveDirective(this, value);
+  }
+}
+var _$LH = {
+  _boundAttributeSuffix: boundAttributeSuffix,
+  _marker: marker,
+  _markerMatch: markerMatch,
+  _HTML_RESULT: HTML_RESULT,
+  _getTemplateHtml: getTemplateHtml,
+  _TemplateInstance: TemplateInstance,
+  _isIterable: isIterable,
+  _resolveDirective: resolveDirective,
+  _ChildPart: ChildPart,
+  _AttributePart: AttributePart,
+  _BooleanAttributePart: BooleanAttributePart,
+  _EventPart: EventPart,
+  _PropertyPart: PropertyPart,
+  _ElementPart: ElementPart
+};
+var polyfillSupport2 = DEV_MODE2 ? global3.litHtmlPolyfillSupportDevMode : global3.litHtmlPolyfillSupport;
+polyfillSupport2?.(Template, ChildPart);
+(global3.litHtmlVersions ??= []).push("3.3.3");
+if (DEV_MODE2 && global3.litHtmlVersions.length > 1) {
+  queueMicrotask(() => {
+    issueWarning2("multiple-versions", `Multiple versions of Lit loaded. ` + `Loading multiple versions is not recommended.`);
+  });
+}
+var render = (value, container, options) => {
+  if (DEV_MODE2 && container == null) {
+    throw new TypeError(`The container to render into may not be ${container}`);
+  }
+  const renderId = DEV_MODE2 ? debugLogRenderId++ : 0;
+  const partOwnerNode = options?.renderBefore ?? container;
+  let part = partOwnerNode["_$litPart$"];
+  debugLogEvent2 && debugLogEvent2({
+    kind: "begin render",
+    id: renderId,
+    value,
+    container,
+    options,
+    part
+  });
+  if (part === undefined) {
+    const endNode = options?.renderBefore ?? null;
+    partOwnerNode["_$litPart$"] = part = new ChildPart(container.insertBefore(createMarker(), endNode), endNode, undefined, options ?? {});
+  }
+  part._$setValue(value);
+  debugLogEvent2 && debugLogEvent2({
+    kind: "end render",
+    id: renderId,
+    value,
+    container,
+    options,
+    part
+  });
+  return part;
+};
+if (ENABLE_EXTRA_SECURITY_HOOKS) {
+  render.setSanitizer = setSanitizer;
+  render.createSanitizer = createSanitizer;
+  if (DEV_MODE2) {
+    render._testOnlyClearSanitizerFactoryDoNotCallOrElse = _testOnlyClearSanitizerFactoryDoNotCallOrElse;
+  }
+}
+
+// ../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/development/lit-element.js
+var JSCompiler_renameProperty2 = (prop, _obj) => prop;
+var DEV_MODE3 = true;
+var global4 = globalThis;
+var issueWarning3;
+if (DEV_MODE3) {
+  global4.litIssuedWarnings ??= new Set;
+  issueWarning3 = (code, warning) => {
+    warning += ` See https://lit.dev/msg/${code} for more information.`;
+    if (!global4.litIssuedWarnings.has(warning) && !global4.litIssuedWarnings.has(code)) {
+      console.warn(warning);
+      global4.litIssuedWarnings.add(warning);
+    }
+  };
+}
+
+class LitElement extends ReactiveElement {
+  constructor() {
+    super(...arguments);
+    this.renderOptions = { host: this };
+    this.__childPart = undefined;
+  }
+  createRenderRoot() {
+    const renderRoot = super.createRenderRoot();
+    this.renderOptions.renderBefore ??= renderRoot.firstChild;
+    return renderRoot;
+  }
+  update(changedProperties) {
+    const value = this.render();
+    if (!this.hasUpdated) {
+      this.renderOptions.isConnected = this.isConnected;
+    }
+    super.update(changedProperties);
+    this.__childPart = render(value, this.renderRoot, this.renderOptions);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.__childPart?.setConnected(true);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.__childPart?.setConnected(false);
+  }
+  render() {
+    return noChange;
+  }
+}
+LitElement["_$litElement$"] = true;
+LitElement[JSCompiler_renameProperty2("finalized", LitElement)] = true;
+global4.litElementHydrateSupport?.({ LitElement });
+var polyfillSupport3 = DEV_MODE3 ? global4.litElementPolyfillSupportDevMode : global4.litElementPolyfillSupport;
+polyfillSupport3?.({ LitElement });
+(global4.litElementVersions ??= []).push("4.2.2");
+if (DEV_MODE3 && global4.litElementVersions.length > 1) {
+  queueMicrotask(() => {
+    issueWarning3("multiple-versions", `Multiple versions of Lit loaded. Loading multiple versions ` + `is not recommended.`);
+  });
+}
+// ../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/development/directive.js
+var directive = (c) => (...values) => ({
+  ["_$litDirective$"]: c,
+  values
+});
+
+class Directive {
+  constructor(_partInfo) {}
+  get _$isConnected() {
+    return this._$parent._$isConnected;
+  }
+  _$initialize(part, parent, attributeIndex) {
+    this.__part = part;
+    this._$parent = parent;
+    this.__attributeIndex = attributeIndex;
+  }
+  _$resolve(part, props) {
+    return this.update(part, props);
+  }
+  update(_part, props) {
+    return this.render(...props);
+  }
+}
+
+// ../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/development/directive-helpers.js
+var { _ChildPart: ChildPart2 } = _$LH;
+var ENABLE_SHADYDOM_NOPATCH2 = true;
+var wrap2 = ENABLE_SHADYDOM_NOPATCH2 && window.ShadyDOM?.inUse && window.ShadyDOM?.noPatch === true ? window.ShadyDOM.wrap : (node) => node;
+var RESET_VALUE = {};
+var setCommittedValue = (part, value = RESET_VALUE) => part._$committedValue = value;
+
+// ../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/development/directives/keyed.js
+class Keyed extends Directive {
+  constructor() {
+    super(...arguments);
+    this.key = nothing;
+  }
+  render(k, v) {
+    this.key = k;
+    return v;
+  }
+  update(part, [k, v]) {
+    if (k !== this.key) {
+      setCommittedValue(part);
+      this.key = k;
+    }
+    return v;
+  }
+}
+var keyed = directive(Keyed);
+// src/index.ts
+class WodiraBrowserApiError extends Error {
+  status;
+  statusText;
+  payload;
+  constructor(params) {
+    super(params.message);
+    this.name = "WodiraBrowserApiError";
+    this.status = params.status;
+    this.statusText = params.statusText;
+    this.payload = params.payload;
+  }
+}
+var DEFAULT_BASE_URL = "https://api.wodira.app";
+var BROWSER_API_PREFIX = "/external/v1/browser";
+
+class WodiraBrowserClient {
+  publishableKey;
+  baseUrl;
+  fetcher;
+  headers;
+  checkoutSecrets = new Map;
+  constructor(options) {
+    if (!options.publishableKey?.trim()) {
+      throw new Error("WodiraBrowserClient requires a publishableKey.");
+    }
+    if (!options.publishableKey.startsWith("wpk_live_")) {
+      throw new Error("Wodira browser publishable keys must start with wpk_live_.");
+    }
+    this.publishableKey = options.publishableKey.trim();
+    this.baseUrl = (options.baseUrl ?? DEFAULT_BASE_URL).replace(/\/+$/, "");
+    this.fetcher = options.fetch ?? globalThis.fetch.bind(globalThis);
+    this.headers = options.headers;
+  }
+  searchEvents(input = {}, signal) {
+    return this.request("/events/search", {
+      method: "POST",
+      body: input,
+      signal
+    });
+  }
+  getEvent(eventId, signal) {
+    return this.request(`/events/${encodeURIComponent(eventId)}`, { signal });
+  }
+  getShirtSponsorCampaign(campaignId, signal) {
+    return this.request(`/shirt-sponsors/${encodeURIComponent(campaignId)}`, {
+      signal
+    });
+  }
+  getPricingCards(eventId, signal) {
+    return this.request(`/events/${encodeURIComponent(eventId)}/pricing-cards`, { signal });
+  }
+  getRegistrationSummary(input, signal) {
+    return this.request("/checkout/registration/summary", {
+      method: "POST",
+      body: input,
+      signal
+    });
+  }
+  createRegistrationCheckoutSession(input, signal) {
+    let secret = input.checkoutResumeSecret;
+    if (!secret && input.idempotencyKey) {
+      secret = this.checkoutSecrets.get(input.idempotencyKey);
+      if (!secret) {
+        secret = globalThis.crypto.randomUUID();
+        if (this.checkoutSecrets.size >= 128)
+          this.checkoutSecrets.delete(this.checkoutSecrets.keys().next().value);
+        this.checkoutSecrets.set(input.idempotencyKey, secret);
+      }
+    }
+    return this.request("/checkout/registration/session", {
+      method: "POST",
+      body: serializeRegistrationInput({
+        ...input,
+        ...secret ? { checkoutResumeSecret: secret } : {}
+      }),
+      signal
+    });
+  }
+  lookupRegistrationReceipts(eventId, input, signal) {
+    return this.request(`/events/${encodeURIComponent(eventId)}/registration-receipts/lookup`, {
+      method: "POST",
+      body: input,
+      signal
+    });
+  }
+  sendRegistrationReceipts(eventId, input, signal) {
+    return this.request(`/events/${encodeURIComponent(eventId)}/registration-receipts/send`, {
+      method: "POST",
+      body: input,
+      signal
+    });
+  }
+  async request(path, options = {}) {
+    const headers = new Headers(this.headers);
+    headers.set("accept", "application/json");
+    headers.set("x-publishable-key", this.publishableKey);
+    const init = { method: options.method ?? "GET", headers };
+    if (options.signal)
+      init.signal = options.signal;
+    if (options.body !== undefined) {
+      headers.set("content-type", "application/json");
+      init.body = JSON.stringify(options.body);
+    }
+    const response = await this.fetcher(`${this.baseUrl}${BROWSER_API_PREFIX}${path}`, init);
+    if (!response.ok) {
+      const payload = await readResponsePayload(response);
+      throw new WodiraBrowserApiError({
+        status: response.status,
+        statusText: response.statusText,
+        message: extractErrorMessage(payload, response),
+        payload
+      });
+    }
+    const text = await response.text();
+    return text ? JSON.parse(text) : undefined;
+  }
+}
+function createWodiraBrowserClient(options) {
+  return new WodiraBrowserClient(options);
+}
+async function readResponsePayload(response) {
+  const text = await response.text();
+  if (!text)
+    return null;
+  try {
+    return JSON.parse(text);
+  } catch {
+    return text;
+  }
+}
+function extractErrorMessage(payload, response) {
+  if (typeof payload === "string")
+    return payload;
+  const outerMessage = payload?.message;
+  const message = outerMessage !== null && typeof outerMessage === "object" && "message" in outerMessage ? outerMessage.message : outerMessage;
+  if (typeof message === "string")
+    return message;
+  if (Array.isArray(message))
+    return message.filter((item) => typeof item === "string").join(", ");
+  if (typeof payload?.error === "string")
+    return payload.error;
+  return `WODira browser API request failed with ${response.status} ${response.statusText}`;
+}
+function serializeRegistrationInput(input) {
+  return {
+    ...input,
+    athletes: input.athletes.map(serializeAthleteInput),
+    ...input.guestRegistrations ? {
+      guestRegistrations: input.guestRegistrations.map((guest) => ({
+        ...guest,
+        athletes: guest.athletes.map(serializeAthleteInput)
+      }))
+    } : {}
+  };
+}
+function serializeAthleteInput(athlete) {
+  return {
+    ...athlete,
+    birthDate: athlete.birthDate instanceof Date ? athlete.birthDate.toISOString().slice(0, 10) : athlete.birthDate
+  };
+}
+
+// src/ui/styles.ts
+var wodiraUiStyles = css`
+  :host {
+    box-sizing: border-box;
+    color: var(--wodira-color-text, #17132e);
+    display: block;
+    font-family: var(--wodira-font-family, inherit);
+    font-size: var(--wodira-font-size, 1rem);
+    line-height: 1.5;
+    container-type: inline-size;
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: inherit;
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  [part~='stack'] {
+    display: grid;
+    gap: var(--wodira-space, 1rem);
+  }
+
+  [part~='grid'] {
+    display: grid;
+    gap: var(--wodira-space, 1rem);
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--wodira-grid-min, 15rem)), 1fr));
+  }
+
+  [part~='card'] {
+    background: var(--wodira-color-surface, #fff);
+    border: 1px solid var(--wodira-color-border, #dcd9e3);
+    border-radius: var(--wodira-radius, 1rem);
+    box-shadow: var(--wodira-shadow, 0 4px 18px rgb(23 19 46 / 0.04));
+    padding: var(--wodira-card-padding, clamp(1rem, 3cqi, 1.75rem));
+  }
+
+  [part~='button'] {
+    align-items: center;
+    background: var(--wodira-color-primary, #17132e);
+    border: 0;
+    border-radius: var(--wodira-radius-sm, 0.625rem);
+    color: var(--wodira-color-primary-contrast, #fff);
+    cursor: pointer;
+    display: inline-flex;
+    font: inherit;
+    font-weight: 700;
+    justify-content: center;
+    min-height: var(--wodira-control-height, 2.75rem);
+    padding: 0.75rem 1rem;
+    transition:
+      opacity 0.2s ease,
+      transform 0.2s ease;
+  }
+
+  [part~='button']:hover:not(:disabled) {
+    transform: translateY(-1px);
+  }
+
+  [part~='button']:focus-visible,
+  [part~='input']:focus-visible,
+  [part~='select']:focus-visible,
+  [part~='textarea']:focus-visible,
+  [part~='checkbox']:focus-visible {
+    outline: 3px solid color-mix(in srgb, var(--wodira-color-accent, #c40072) 35%, transparent);
+    outline-offset: 2px;
+  }
+
+  [part~='button']:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  [part~='button'][part~='secondary'] {
+    background: var(--wodira-color-muted, #f6f5f8);
+    color: var(--wodira-color-text, #17132e);
+  }
+
+  [part~='text-button'] {
+    justify-self: start;
+    min-height: auto;
+    padding: 0.45rem 0.7rem;
+    width: auto;
+  }
+
+  [part~='input'],
+  [part~='select'],
+  [part~='textarea'] {
+    background: var(--wodira-color-surface, #fff);
+    border: 1px solid var(--wodira-color-border, #dcd9e3);
+    border-radius: var(--wodira-radius-sm, 0.625rem);
+    color: var(--wodira-color-text, #17132e);
+    font: inherit;
+    min-height: var(--wodira-control-height, 2.75rem);
+    padding: 0.7rem 0.8rem;
+    width: 100%;
+  }
+
+  [part~='input'][aria-invalid='true'],
+  [part~='select'][aria-invalid='true'],
+  [part~='textarea'][aria-invalid='true'] {
+    border-color: var(--wodira-color-danger, #b42318);
+  }
+
+  [part~='textarea'] {
+    min-height: 5.5rem;
+    resize: vertical;
+  }
+
+  [part~='label'] {
+    display: grid;
+    gap: 0.35rem;
+    font-size: 0.92rem;
+    font-weight: 700;
+  }
+
+  [part~='checkbox'] {
+    margin-inline-end: 0.5rem;
+  }
+
+  [part~='email-field'] {
+    min-width: 0;
+  }
+  [part~='email-suggestion'] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.25rem;
+    margin-top: 0.5rem;
+  }
+  [part~='email-correction'] {
+    background: transparent;
+    color: var(--wodira-color-accent, #c40072);
+    min-height: 2.75rem;
+    max-width: 100%;
+    padding: 0.25rem 0.5rem;
+    overflow-wrap: anywhere;
+  }
+  [part~='email-delivery'] {
+    overflow-wrap: anywhere;
+    margin-top: 0.5rem;
+  }
+
+  [part~='hint'],
+  [part~='meta'],
+  [part~='field-error'] {
+    color: var(--wodira-color-text-muted, #625e70);
+    font-size: 0.875rem;
+  }
+
+  [part~='description'] {
+    color: var(--wodira-color-text-muted, #625e70);
+    display: grid;
+    font-size: 0.95rem;
+    gap: 0.55rem;
+    line-height: 1.65;
+  }
+
+  [part~='description'] p {
+    margin: 0;
+  }
+
+  [part~='description-heading'] {
+    color: var(--wodira-color-text, #17132e);
+    font-weight: 800;
+  }
+
+  [part~='description-list'] {
+    display: grid;
+    gap: 0.3rem;
+    margin: 0;
+    padding-inline-start: 1.15rem;
+  }
+
+  [part~='event-card-description'] {
+    display: -webkit-box;
+    margin: 0;
+    max-width: 65ch;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--wodira-event-card-description-lines, 4);
+  }
+
+  [part~='event-card-description-full'] {
+    margin: 0;
+    max-width: 65ch;
+  }
+
+  [part~='inline-code'] {
+    background: var(--wodira-color-muted, #f6f5f8);
+    border-radius: 0.35rem;
+    color: var(--wodira-color-text, #17132e);
+    font-family:
+      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
+    font-size: 0.9em;
+    padding: 0.08rem 0.28rem;
+  }
+
+  [part~='field-error'] {
+    color: var(--wodira-color-danger, #b42318);
+  }
+
+  [part~='eligibility-summary'] {
+    background: color-mix(
+      in srgb,
+      var(--wodira-color-accent, #c40072) 7%,
+      var(--wodira-color-surface, #fff)
+    );
+    border: 1px solid color-mix(in srgb, var(--wodira-color-accent, #c40072) 24%, transparent);
+    border-radius: var(--wodira-radius-sm, 0.625rem);
+    display: grid;
+    gap: 0.45rem;
+    padding: 0.8rem 0.9rem;
+  }
+
+  [part~='eligibility-summary'] ul {
+    color: var(--wodira-color-text-muted, #625e70);
+    display: grid;
+    font-size: 0.875rem;
+    gap: 0.25rem;
+    margin: 0;
+    padding-inline-start: 1.2rem;
+  }
+
+  [part~='gender-composition'] {
+    border: 0;
+    display: grid;
+    gap: 0.6rem;
+    margin: 0;
+    padding: 0;
+  }
+
+  [part~='gender-composition'] legend {
+    font-weight: 800;
+    padding: 0;
+  }
+
+  [part~='gender-composition'] [part~='hint'] {
+    margin: 0;
+  }
+
+  [part~='composition-options'] {
+    display: grid;
+    gap: 0.6rem;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.25rem), 1fr));
+  }
+
+  [part~='composition-option'] {
+    align-items: center;
+    background: var(--wodira-color-surface, #fff);
+    border: 1px solid var(--wodira-color-border, #dcd9e3);
+    border-radius: var(--wodira-radius-sm, 0.625rem);
+    cursor: pointer;
+    display: flex;
+    font-weight: 700;
+    gap: 0.55rem;
+    min-height: var(--wodira-control-height, 2.75rem);
+    padding: 0.7rem 0.8rem;
+  }
+
+  [part~='composition-option'][part~='selected'] {
+    background: color-mix(
+      in srgb,
+      var(--wodira-color-accent, #c40072) 10%,
+      var(--wodira-color-surface, #fff)
+    );
+    border-color: var(--wodira-color-accent, #c40072);
+  }
+
+  [part~='composition-option']:focus-within {
+    outline: 3px solid color-mix(in srgb, var(--wodira-color-accent, #c40072) 35%, transparent);
+    outline-offset: 2px;
+  }
+
+  [part~='participant-mode'] {
+    background: var(--wodira-color-muted, #f6f5f8);
+    border-radius: var(--wodira-radius-sm, 0.625rem);
+    display: grid;
+    gap: 0.25rem;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    margin-block: 0.8rem;
+    padding: 0.25rem;
+  }
+
+  [part~='participant-mode-button'] {
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: calc(var(--wodira-radius-sm, 0.625rem) * 0.75);
+    color: var(--wodira-color-text-muted, #625e70);
+    cursor: pointer;
+    font: inherit;
+    font-size: 0.875rem;
+    font-weight: 750;
+    min-height: 2.4rem;
+    padding: 0.55rem 0.75rem;
+  }
+
+  [part~='participant-mode-button'][part~='active'] {
+    background: var(--wodira-color-surface, #fff);
+    border-color: var(--wodira-color-border, #dcd9e3);
+    box-shadow: 0 2px 8px rgb(15 23 42 / 0.08);
+    color: var(--wodira-color-text, #17132e);
+  }
+
+  [part~='participant-mode-button']:focus-visible {
+    outline: 3px solid color-mix(in srgb, var(--wodira-color-accent, #c40072) 35%, transparent);
+    outline-offset: 2px;
+  }
+
+  [part~='deferred-participant-hint'] {
+    background: var(--wodira-color-muted, #f6f5f8);
+    border-radius: var(--wodira-radius-sm, 0.625rem);
+    color: var(--wodira-color-text-muted, #625e70);
+    line-height: 1.5;
+    margin: 0.8rem 0 0;
+    padding: 0.8rem 0.9rem;
+  }
+
+  [part~='error'] {
+    background: color-mix(in srgb, var(--wodira-color-danger, #b42318) 10%, transparent);
+    border: 1px solid color-mix(in srgb, var(--wodira-color-danger, #b42318) 35%, transparent);
+    border-radius: var(--wodira-radius-sm, 0.625rem);
+    color: var(--wodira-color-danger, #b42318);
+    padding: 0.75rem 0.9rem;
+  }
+
+  [part~='success'] {
+    background: color-mix(in srgb, var(--wodira-color-success, #16703c) 12%, transparent);
+    border: 1px solid color-mix(in srgb, var(--wodira-color-success, #16703c) 35%, transparent);
+    border-radius: var(--wodira-radius-sm, 0.625rem);
+    color: var(--wodira-color-success, #16703c);
+    padding: 0.75rem 0.9rem;
+  }
+
+  [part~='loader'],
+  [part~='empty'] {
+    color: var(--wodira-color-text-muted, #625e70);
+    padding: var(--wodira-space, 1rem);
+    text-align: center;
+  }
+
+  [part~='title'] {
+    font-size: clamp(1.15rem, 2vw, 1.5rem);
+    font-weight: 800;
+    line-height: 1.15;
+    margin: 0;
+  }
+
+  [part~='price'] {
+    color: var(--wodira-color-accent, #c40072);
+    font-size: 1.35rem;
+    font-weight: 850;
+  }
+
+  [part~='tier-list'] {
+    display: grid;
+    gap: 0.55rem;
+  }
+
+  [part~='tier-row'] {
+    align-items: center;
+    background: var(--wodira-color-muted, #f6f5f8);
+    border: 1px solid transparent;
+    border-radius: var(--wodira-radius-sm, 0.625rem);
+    display: grid;
+    gap: 0.35rem;
+    padding: 0.7rem 0.8rem;
+  }
+
+  [part~='tier-row'][part~='current'] {
+    background: color-mix(
+      in srgb,
+      var(--wodira-color-accent, #c40072) 10%,
+      var(--wodira-color-surface, #fff)
+    );
+    border-color: color-mix(in srgb, var(--wodira-color-accent, #c40072) 45%, transparent);
+  }
+
+  [part~='tier-heading'] {
+    align-items: center;
+    display: flex;
+    gap: 0.5rem;
+    justify-content: space-between;
+  }
+
+  [part~='tier-name'] {
+    font-weight: 800;
+  }
+
+  [part~='tier-price'] {
+    color: var(--wodira-color-accent, #c40072);
+    font-weight: 850;
+  }
+
+  [part~='badge'] {
+    background: var(--wodira-color-accent, #c40072);
+    border-radius: 999px;
+    color: var(--wodira-color-accent-contrast, #fff);
+    display: inline-flex;
+    font-size: 0.72rem;
+    font-weight: 800;
+    letter-spacing: 0.02em;
+    padding: 0.2rem 0.5rem;
+    text-transform: uppercase;
+  }
+
+  [part~='image'] {
+    aspect-ratio: 16 / 9;
+    border-radius: calc(var(--wodira-radius, 1rem) * 0.75);
+    display: block;
+    margin-block-end: var(--wodira-space, 1rem);
+    object-fit: cover;
+    width: 100%;
+  }
+
+  [part~='summary-row'] {
+    display: flex;
+    justify-content: space-between;
+    gap: var(--wodira-space, 1rem);
+  }
+`;
+
+// src/ui/shirt-sponsors/shirt-auction.ts
+var copy = {
+  es: {
+    label: "Patrocina la camiseta del evento",
+    loading: "Cargando camiseta y pujas…",
+    error: "No se ha podido cargar la campaña.",
+    invalid: "Configura una campaña y una clave publicable válidas.",
+    retry: "Reintentar",
+    shirtAria: "Camiseta 3D. Arrástrala para girarla y toca un espacio para elegirlo.",
+    hint: "Arrastra para girar · Toca un espacio para pujar",
+    noModel: "La vista 3D no está disponible en este dispositivo. Elige un espacio en la lista.",
+    zoomIn: "Acercar camiseta",
+    zoomOut: "Alejar camiseta",
+    views: "Vista de la camiseta",
+    slots: "Espacios",
+    closes: "Cierre de pujas",
+    shirts: "camisetas",
+    from: "Desde",
+    current: "Puja actual",
+    reserved: "Reservado por la organización",
+    minimum: "Puja mínima",
+    increments: "Incrementos de",
+    amount: "Tu puja (€)",
+    bid: "Pujar",
+    outbid: "Superar la puja",
+    closed: "Las pujas de esta camiseta están cerradas.",
+    pick: "Elige un espacio en la camiseta o en la lista.",
+    belowMinimum: "La puja debe ser de al menos",
+    step: "Usa múltiplos del incremento a partir de la puja mínima.",
+    note: "Terminarás en WODira: inicio de sesión, logotipo en SVG y pago seguro con Stripe.",
+    popupBlocked: "Tu navegador ha bloqueado la ventana de WODira.",
+    openBid: "Abrir la puja en WODira",
+    waiting: "Completa la puja en la ventana de WODira. Esta camiseta se actualizará sola.",
+    paid: "Puja confirmada. Tu marca ya aparece en la camiseta.",
+    leads: "lidera",
+    sides: {
+      front: "Delantera",
+      back: "Trasera",
+      "left-sleeve": "Manga izquierda",
+      "right-sleeve": "Manga derecha"
+    }
+  },
+  en: {
+    label: "Sponsor the event shirt",
+    loading: "Loading shirt and bids…",
+    error: "The campaign could not be loaded.",
+    invalid: "Set a valid campaign and publishable key.",
+    retry: "Retry",
+    shirtAria: "3D shirt. Drag it to turn it and tap a space to choose it.",
+    hint: "Drag to turn · Tap a space to bid",
+    noModel: "The 3D view is not available on this device. Choose a space from the list.",
+    zoomIn: "Zoom in",
+    zoomOut: "Zoom out",
+    views: "Shirt view",
+    slots: "Spaces",
+    closes: "Bidding closes",
+    shirts: "shirts",
+    from: "From",
+    current: "Current bid",
+    reserved: "Reserved by the organizer",
+    minimum: "Minimum bid",
+    increments: "Increments of",
+    amount: "Your bid (€)",
+    bid: "Bid",
+    outbid: "Outbid",
+    closed: "Bidding for this shirt is closed.",
+    pick: "Choose a space on the shirt or in the list.",
+    belowMinimum: "The bid must be at least",
+    step: "Use multiples of the increment above the minimum bid.",
+    note: "You will finish on WODira: sign-in, SVG logo and secure Stripe payment.",
+    popupBlocked: "Your browser blocked the WODira window.",
+    openBid: "Open the bid on WODira",
+    waiting: "Complete the bid in the WODira window. This shirt will update by itself.",
+    paid: "Bid confirmed. Your brand is now on the shirt.",
+    leads: "leads",
+    sides: {
+      front: "Front",
+      back: "Back",
+      "left-sleeve": "Left sleeve",
+      "right-sleeve": "Right sleeve"
+    }
+  },
+  pt: {
+    label: "Patrocina a camisola do evento",
+    loading: "A carregar camisola e licitações…",
+    error: "Não foi possível carregar a campanha.",
+    invalid: "Configura uma campanha e uma chave publicável válidas.",
+    retry: "Tentar novamente",
+    shirtAria: "Camisola 3D. Arrasta-a para a rodar e toca num espaço para o escolher.",
+    hint: "Arrasta para rodar · Toca num espaço para licitar",
+    noModel: "A vista 3D não está disponível neste dispositivo. Escolhe um espaço na lista.",
+    zoomIn: "Aproximar camisola",
+    zoomOut: "Afastar camisola",
+    views: "Vista da camisola",
+    slots: "Espaços",
+    closes: "Fim das licitações",
+    shirts: "camisolas",
+    from: "Desde",
+    current: "Licitação atual",
+    reserved: "Reservado pela organização",
+    minimum: "Licitação mínima",
+    increments: "Incrementos de",
+    amount: "A tua licitação (€)",
+    bid: "Licitar",
+    outbid: "Superar a licitação",
+    closed: "As licitações desta camisola estão fechadas.",
+    pick: "Escolhe um espaço na camisola ou na lista.",
+    belowMinimum: "A licitação deve ser de pelo menos",
+    step: "Usa múltiplos do incremento a partir da licitação mínima.",
+    note: "Vais terminar na WODira: início de sessão, logótipo em SVG e pagamento seguro com Stripe.",
+    popupBlocked: "O teu navegador bloqueou a janela da WODira.",
+    openBid: "Abrir a licitação na WODira",
+    waiting: "Conclui a licitação na janela da WODira. Esta camisola atualiza-se sozinha.",
+    paid: "Licitação confirmada. A tua marca já aparece na camisola.",
+    leads: "lidera",
+    sides: {
+      front: "Frente",
+      back: "Costas",
+      "left-sleeve": "Manga esquerda",
+      "right-sleeve": "Manga direita"
+    }
+  }
+};
+var SIDE_ORDER = ["front", "back", "left-sleeve", "right-sleeve"];
+var DEFAULT_APP_URL = "https://wodira.app";
+var SHIRT_MODEL_PATH = "/images/sponsor-studio/white-shirt-realistic-v1.glb?v=7";
+var CLICK_TOLERANCE_PX = 6;
+var PALETTE_TOKENS = {
+  slot: ["--wodira-color-accent", "#c40072"],
+  slotPreview: ["--wodira-color-accent", "#c40072"],
+  slotText: ["--wodira-color-accent-contrast", "#ffffff"],
+  priceLeading: ["--wodira-color-accent", "#c40072"],
+  price: ["--wodira-color-primary", "#17132e"],
+  reserved: ["--wodira-color-border", "#dcd9e3"],
+  selected: ["--wodira-color-primary", "#17132e"]
+};
+function placement(side) {
+  return side === "left-sleeve" || side === "right-sleeve" ? { side: "front", surface: side } : { side };
+}
+function toSponsorSlot(slot) {
+  const result = {
+    id: slot.id,
+    name: slot.name,
+    ...placement(slot.side),
+    x: slot.x,
+    y: slot.y,
+    width: slot.width,
+    height: slot.height,
+    printWidth: slot.printWidthCm,
+    printHeight: slot.printHeightCm,
+    startingPrice: slot.startingPriceCents / 100,
+    bidPrice: slot.minimumBidCents / 100,
+    increment: slot.incrementCents / 100,
+    isReserved: !!slot.isReserved,
+    bids: slot.leadingArtworkUrl ? [
+      {
+        id: slot.id,
+        buyer: slot.leadingBrandName ?? "",
+        amount: (slot.leadingAmountCents ?? 0) / 100,
+        paidAt: 0,
+        status: "leading",
+        logo: slot.leadingArtworkUrl,
+        views: 0,
+        opens: 0,
+        clicks: 0
+      }
+    ] : []
+  };
+  if (slot.reservedArtworkUrl)
+    result.reservedLogo = slot.reservedArtworkUrl;
+  return result;
+}
+function safeHttpUrl(value) {
+  try {
+    const url = new URL(value);
+    const local = ["localhost", "127.0.0.1", "[::1]"].includes(url.hostname);
+    if (url.username || url.password)
+      return null;
+    return url.protocol === "https:" || local && url.protocol === "http:" ? url : null;
+  } catch {
+    return null;
+  }
+}
+
+class WodiraShirtAuction2 extends LitElement {
+  static properties = {
+    campaignId: { type: String, attribute: "campaign-id" },
+    publishableKey: { type: String, attribute: "publishable-key" },
+    baseUrl: { type: String, attribute: "base-url" },
+    appUrl: { type: String, attribute: "app-url" },
+    locale: { type: String },
+    campaign: { state: true },
+    loading: { state: true },
+    failed: { state: true },
+    selectedSlotId: { state: true },
+    side: { state: true },
+    amountEuros: { state: true },
+    modelUnavailable: { state: true },
+    modelLoading: { state: true },
+    status: { state: true }
+  };
+  static styles = [
+    wodiraUiStyles,
+    css`
+      :host {
+        /* Earlier releases used these shorter names; they still apply as fallbacks. */
+        --_accent: var(--wodira-color-accent, var(--wodira-primary, #c40072));
+        --_accent-contrast: var(--wodira-color-accent-contrast, #fff);
+        --_surface: var(--wodira-color-surface, var(--wodira-background, #fff));
+        --_muted: var(--wodira-color-muted, #f6f5f8);
+        --_border: var(--wodira-color-border, var(--wodira-border, #dcd9e3));
+        --_text: var(--wodira-color-text, var(--wodira-text, #17132e));
+        --_text-muted: var(--wodira-color-text-muted, #625e70);
+        --_radius: var(--wodira-radius, 1rem);
+        --_radius-sm: var(--wodira-radius-sm, 0.625rem);
+        --_space: var(--wodira-space, 1rem);
+        color: var(--_text);
+      }
+
+      [part~='container'] {
+        background: var(--_surface);
+        border: 1px solid var(--_border);
+        border-radius: var(--_radius);
+        box-shadow: var(--wodira-shadow, none);
+        display: grid;
+        gap: var(--_space);
+        padding: var(--wodira-card-padding, clamp(1rem, 3cqi, 1.75rem));
+      }
+
+      [part~='header'] {
+        display: grid;
+        gap: 0.35rem;
+      }
+
+      [part~='title'] {
+        font-size: clamp(1.25rem, 4cqi, 1.75rem);
+        line-height: 1.15;
+        margin: 0;
+      }
+
+      [part~='meta'] {
+        color: var(--_text-muted);
+        display: flex;
+        flex-wrap: wrap;
+        font-size: 0.875rem;
+        gap: 0.25rem 1rem;
+        margin: 0;
+      }
+
+      [part~='layout'] {
+        display: grid;
+        gap: var(--_space);
+      }
+
+      @container (min-width: 46rem) {
+        [part~='layout'] {
+          align-items: start;
+          grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
+        }
+      }
+
+      [part~='stage'] {
+        aspect-ratio: 1 / 1;
+        background: var(--wodira-shirt-stage-background, var(--_muted));
+        border-radius: var(--_radius);
+        max-height: min(36rem, 75vh);
+        overflow: hidden;
+        position: relative;
+        width: 100%;
+      }
+
+      [part~='shirt'] {
+        cursor: grab;
+        display: block;
+        height: 100%;
+        /* Vertical swipes keep scrolling the page; horizontal drags turn the shirt. */
+        touch-action: pan-y;
+        width: 100%;
+      }
+
+      [part~='shirt']:active {
+        cursor: grabbing;
+      }
+
+      [part~='shirt']:focus-visible {
+        outline: 3px solid var(--_accent);
+        outline-offset: -3px;
+      }
+
+      [part~='stage-hint'] {
+        background: color-mix(in srgb, var(--_surface) 88%, transparent);
+        border-radius: 999px;
+        bottom: 0.75rem;
+        color: var(--_text-muted);
+        font-size: 0.8125rem;
+        left: 0.75rem;
+        margin: 0;
+        padding: 0.35rem 0.75rem;
+        pointer-events: none;
+        position: absolute;
+      }
+
+      [part~='stage-controls'] {
+        display: flex;
+        gap: 0.5rem;
+        position: absolute;
+        right: 0.75rem;
+        top: 0.75rem;
+      }
+
+      [part~='zoom-button'],
+      [part~='side-button'] {
+        align-items: center;
+        background: var(--_surface);
+        border: 1px solid var(--_border);
+        border-radius: var(--_radius-sm);
+        color: var(--_text);
+        cursor: pointer;
+        display: inline-flex;
+        font: inherit;
+        justify-content: center;
+        min-height: 2.75rem;
+        min-width: 2.75rem;
+        padding: 0 0.75rem;
+        transition:
+          background-color 0.15s ease,
+          border-color 0.15s ease;
+      }
+
+      [part~='side-button'][aria-pressed='true'] {
+        background: var(--_accent);
+        border-color: var(--_accent);
+        color: var(--_accent-contrast);
+      }
+
+      [part~='side-switch'] {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+      }
+
+      [part~='stage-fallback'] {
+        align-items: center;
+        color: var(--_text-muted);
+        display: flex;
+        height: 100%;
+        justify-content: center;
+        margin: 0;
+        padding: 1.5rem;
+        text-align: center;
+      }
+
+      [part~='slot-list'] {
+        display: grid;
+        gap: 0.5rem;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+
+      [part~='slot'] {
+        align-items: center;
+        background: var(--_surface);
+        border: 1px solid var(--_border);
+        border-radius: var(--_radius-sm);
+        color: inherit;
+        cursor: pointer;
+        display: grid;
+        font: inherit;
+        gap: 0.15rem 1rem;
+        grid-template-columns: minmax(0, 1fr) auto;
+        min-height: 3.25rem;
+        padding: 0.75rem 1rem;
+        text-align: start;
+        transition:
+          background-color 0.15s ease,
+          border-color 0.15s ease;
+        width: 100%;
+      }
+
+      [part~='slot-selected'] {
+        background: color-mix(in srgb, var(--_accent) 8%, var(--_surface));
+        border-color: var(--_accent);
+        box-shadow: inset 4px 0 0 var(--_accent);
+      }
+
+      [part~='slot']:disabled {
+        cursor: default;
+        opacity: 0.7;
+      }
+
+      [part~='slot']:focus-visible,
+      [part~='zoom-button']:focus-visible,
+      [part~='side-button']:focus-visible {
+        outline: 3px solid var(--_accent);
+        outline-offset: 2px;
+      }
+
+      @media (hover: hover) {
+        [part~='slot']:not(:disabled):hover,
+        [part~='zoom-button']:hover,
+        [part~='side-button']:hover {
+          border-color: var(--_accent);
+        }
+      }
+
+      [part~='slot-name'] {
+        font-weight: 700;
+      }
+
+      [part~='slot-detail'] {
+        color: var(--_text-muted);
+        font-size: 0.8125rem;
+        grid-column: 1;
+      }
+
+      [part~='slot-price'] {
+        font-variant-numeric: tabular-nums;
+        font-weight: 700;
+        grid-column: 2;
+        grid-row: 1 / span 2;
+        text-align: end;
+        white-space: nowrap;
+      }
+
+      [part~='slot-price'] small {
+        color: var(--_text-muted);
+        display: block;
+        font-size: 0.75rem;
+        font-weight: 500;
+      }
+
+      [part~='section-title'] {
+        font-size: 0.8125rem;
+        letter-spacing: 0.08em;
+        margin: 0;
+        text-transform: uppercase;
+      }
+
+      [part~='bid-panel'] {
+        background: var(--_muted);
+        border-radius: var(--_radius);
+        display: grid;
+        gap: 0.75rem;
+        padding: var(--_space);
+      }
+
+      [part~='bid-title'] {
+        font-size: 1.125rem;
+        margin: 0;
+      }
+
+      [part~='leader'] {
+        align-items: center;
+        display: flex;
+        gap: 0.75rem;
+        margin: 0;
+      }
+
+      [part~='leader-logo'] {
+        background: #fff;
+        border-radius: 0.5rem;
+        height: 2.5rem;
+        object-fit: contain;
+        outline: 1px solid rgb(0 0 0 / 0.1);
+        outline-offset: -1px;
+        padding: 0.25rem;
+        width: 4.5rem;
+      }
+
+      [part~='bid-form'] {
+        display: grid;
+        gap: 0.75rem;
+      }
+
+      [part~='bid-form'] [part~='label'] {
+        display: grid;
+        gap: 0.35rem;
+      }
+
+      [part~='status'] {
+        margin: 0;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        [part~='slot'],
+        [part~='zoom-button'],
+        [part~='side-button'] {
+          transition: none;
+        }
+      }
+    `
+  ];
+  client = null;
+  abort = null;
+  renderer = null;
+  rendererCanvas = null;
+  rendererGeneration = 0;
+  canvasRevision = 0;
+  drag = null;
+  bidWindow = null;
+  bidWindowTimer;
+  blockedUrl = "";
+  channel = globalThis.crypto.randomUUID();
+  themeObserver = null;
+  colorScheme = null;
+  constructor() {
+    super();
+    this.campaignId = "";
+    this.publishableKey = "";
+    this.baseUrl = "";
+    this.appUrl = DEFAULT_APP_URL;
+    this.locale = "auto";
+    this.campaign = null;
+    this.loading = false;
+    this.failed = false;
+    this.selectedSlotId = null;
+    this.side = "front";
+    this.amountEuros = null;
+    this.modelUnavailable = false;
+    this.modelLoading = true;
+    this.status = "idle";
+  }
+  refreshTheme() {
+    this.renderer?.setAppearance({ palette: this.palette(), locale: this.numberLocale });
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("message", this.onMessage);
+    window.addEventListener("focus", this.onWindowFocus);
+    this.themeObserver = new MutationObserver(() => this.refreshTheme());
+    for (const target of [this, this.ownerDocument.documentElement, this.ownerDocument.body])
+      if (target)
+        this.themeObserver.observe(target, {
+          attributes: true,
+          attributeFilter: ["class", "style", "data-theme"]
+        });
+    this.colorScheme = matchMedia("(prefers-color-scheme: dark)");
+    this.colorScheme.addEventListener("change", this.onColorScheme);
+    if (this.hasUpdated) {
+      this.modelUnavailable = false;
+      this.requestUpdate();
+      this.load(true);
+      this.watchBidWindow();
+    }
+  }
+  disconnectedCallback() {
+    window.removeEventListener("message", this.onMessage);
+    window.removeEventListener("focus", this.onWindowFocus);
+    this.themeObserver?.disconnect();
+    this.colorScheme?.removeEventListener("change", this.onColorScheme);
+    clearInterval(this.bidWindowTimer);
+    this.abort?.abort();
+    this.disposeRenderer();
+    this.canvasRevision++;
+    super.disconnectedCallback();
+  }
+  willUpdate(changes) {
+    if (changes.has("campaignId") || changes.has("publishableKey") || changes.has("baseUrl") || changes.has("appUrl")) {
+      this.client = this.createClient();
+      clearInterval(this.bidWindowTimer);
+      this.bidWindow = null;
+      this.blockedUrl = "";
+      this.canvasRevision++;
+      this.selectedSlotId = null;
+      this.status = "idle";
+      this.modelUnavailable = false;
+      this.disposeRenderer();
+      this.load();
+    }
+  }
+  updated(changes) {
+    const canvas = this.renderRoot.querySelector("canvas");
+    if (canvas !== this.rendererCanvas) {
+      this.disposeRenderer();
+      if (canvas)
+        this.startRenderer(canvas);
+    } else if (changes.has("campaign") || changes.has("side") || changes.has("selectedSlotId"))
+      this.paintShirt();
+    if (changes.has("locale"))
+      this.refreshTheme();
+  }
+  get language() {
+    const locale = this.locale && this.locale !== "auto" ? this.locale : this.ownerDocument.documentElement.lang || navigator.language || "es";
+    const language = locale.toLowerCase().split("-")[0];
+    return language === "en" || language === "pt" ? language : "es";
+  }
+  get numberLocale() {
+    return this.locale && this.locale !== "auto" ? this.locale : this.ownerDocument.documentElement.lang || navigator.language || "es-ES";
+  }
+  get text() {
+    return copy[this.language];
+  }
+  get appOrigin() {
+    return safeHttpUrl(this.appUrl || DEFAULT_APP_URL);
+  }
+  createClient() {
+    if (!/^[a-zA-Z0-9_-]{1,160}$/.test(this.campaignId))
+      return null;
+    if (!this.publishableKey?.startsWith("wpk_live_"))
+      return null;
+    if (!this.appOrigin)
+      return null;
+    const options = { publishableKey: this.publishableKey };
+    if (this.baseUrl) {
+      if (!safeHttpUrl(this.baseUrl))
+        return null;
+      options.baseUrl = this.baseUrl;
+    }
+    try {
+      return createWodiraBrowserClient(options);
+    } catch {
+      return null;
+    }
+  }
+  async load(silent = false) {
+    this.abort?.abort();
+    if (!this.client) {
+      this.campaign = null;
+      this.loading = false;
+      return;
+    }
+    const abort = new AbortController;
+    this.abort = abort;
+    if (!silent)
+      this.loading = true;
+    this.failed = false;
+    try {
+      const campaign = await this.client.getShirtSponsorCampaign(this.campaignId, abort.signal);
+      if (abort.signal.aborted)
+        return;
+      this.campaign = campaign;
+      const current = campaign.slots.find((slot) => slot.id === this.selectedSlotId);
+      const next = current ?? campaign.slots.find((slot) => !slot.isReserved && slot.side === "front") ?? campaign.slots.find((slot) => !slot.isReserved) ?? campaign.slots[0];
+      if (next)
+        this.select(next, false);
+    } catch {
+      if (abort.signal.aborted)
+        return;
+      if (!silent)
+        this.failed = true;
+    } finally {
+      if (!abort.signal.aborted)
+        this.loading = false;
+    }
+  }
+  get biddingOpen() {
+    const campaign = this.campaign;
+    return !!campaign && campaign.status === "PUBLISHED" && new Date(campaign.closesAt) > new Date;
+  }
+  get selectedSlot() {
+    return this.campaign?.slots.find((slot) => slot.id === this.selectedSlotId) ?? null;
+  }
+  get orderedSlots() {
+    return [...this.campaign?.slots ?? []].sort((a, b) => SIDE_ORDER.indexOf(a.side) - SIDE_ORDER.indexOf(b.side));
+  }
+  get sides() {
+    const used = new Set(this.campaign?.slots.map((slot) => slot.side));
+    return SIDE_ORDER.filter((side) => side === "front" || side === "back" || used.has(side));
+  }
+  select(slot, announce = true) {
+    const changed = slot.id !== this.selectedSlotId;
+    this.selectedSlotId = slot.id;
+    if (changed)
+      this.side = slot.side;
+    if (changed || this.amountEuros === null || this.amountEuros * 100 < slot.minimumBidCents)
+      this.amountEuros = slot.minimumBidCents / 100;
+    if (announce && changed)
+      this.dispatchEvent(new CustomEvent("wodira:shirt:slot-selected", {
+        bubbles: true,
+        composed: true,
+        detail: { campaignId: this.campaignId, slotId: slot.id }
+      }));
+  }
+  formatMoney(cents) {
+    const digits = cents % 100 ? 2 : 0;
+    try {
+      return new Intl.NumberFormat(this.numberLocale, {
+        style: "currency",
+        currency: "EUR",
+        minimumFractionDigits: digits,
+        maximumFractionDigits: digits
+      }).format(cents / 100);
+    } catch {
+      return `${(cents / 100).toFixed(digits)} €`;
+    }
+  }
+  formatDate(value) {
+    try {
+      return new Intl.DateTimeFormat(this.numberLocale, {
+        dateStyle: "medium",
+        timeStyle: "short"
+      }).format(new Date(value));
+    } catch {
+      return value;
+    }
+  }
+  palette() {
+    const style = getComputedStyle(this);
+    const palette = {};
+    for (const [key, [token, fallback]] of Object.entries(PALETTE_TOKENS))
+      palette[key] = style.getPropertyValue(token).trim() || fallback;
+    return palette;
+  }
+  async startRenderer(canvas) {
+    const generation = ++this.rendererGeneration;
+    this.rendererCanvas = canvas;
+    this.modelLoading = true;
+    try {
+      const { Shirt3dRenderer } = await (__preload("jyks1h8f"), import("./shirt-3d-renderer-jyks1h8f.js"));
+      if (generation !== this.rendererGeneration)
+        return;
+      const renderer = new Shirt3dRenderer(canvas, () => {
+        if (generation === this.rendererGeneration)
+          this.modelUnavailable = true;
+      }, (loading) => {
+        if (generation === this.rendererGeneration)
+          this.modelLoading = loading;
+      }, {
+        modelUrl: new URL(SHIRT_MODEL_PATH, this.appOrigin ?? DEFAULT_APP_URL).href,
+        locale: this.numberLocale,
+        palette: this.palette()
+      });
+      this.renderer = renderer;
+      this.paintShirt();
+      await renderer.load();
+      if (generation === this.rendererGeneration)
+        this.modelLoading = false;
+    } catch {
+      if (generation === this.rendererGeneration) {
+        this.disposeRenderer();
+        this.modelUnavailable = true;
+      }
+    }
+  }
+  disposeRenderer() {
+    this.rendererGeneration++;
+    this.renderer?.dispose();
+    this.renderer = null;
+    this.rendererCanvas = null;
+    this.drag = null;
+  }
+  paintShirt() {
+    const campaign = this.campaign;
+    if (!this.renderer || !campaign)
+      return;
+    const view = placement(this.side);
+    const design = campaign.shirtDesign;
+    const artwork = design ? {
+      ...design.front ? { front: design.front } : {},
+      ...design.back ? { back: design.back } : {}
+    } : null;
+    this.renderer.setSelectedSlot(this.selectedSlotId);
+    this.renderer.update(campaign.slots.map(toSponsorSlot), view.side, true, campaign.shirtColor || "#ffffff", false, artwork, view.surface);
+  }
+  onPointerDown(event) {
+    if (event.button !== 0)
+      return;
+    this.drag = {
+      id: event.pointerId,
+      x: event.clientX,
+      y: event.clientY,
+      originX: event.clientX,
+      originY: event.clientY
+    };
+    if (event.pointerType !== "touch")
+      event.currentTarget.setPointerCapture(event.pointerId);
+  }
+  onPointerMove(event) {
+    const drag = this.drag;
+    if (!drag || drag.id !== event.pointerId)
+      return;
+    const distance = Math.hypot(event.clientX - drag.originX, event.clientY - drag.originY);
+    if (distance <= CLICK_TOLERANCE_PX)
+      return;
+    this.renderer?.rotate(event.clientX - drag.x, event.clientY - drag.y);
+    drag.x = event.clientX;
+    drag.y = event.clientY;
+  }
+  onPointerUp(event) {
+    const drag = this.drag;
+    this.drag = null;
+    if (!drag || drag.id !== event.pointerId)
+      return;
+    const distance = Math.hypot(event.clientX - drag.originX, event.clientY - drag.originY);
+    if (distance > CLICK_TOLERANCE_PX)
+      return;
+    const picked = this.renderer?.pick(event.clientX, event.clientY);
+    const slot = picked && this.campaign?.slots.find((item) => item.id === picked.id);
+    if (slot && !slot.isReserved)
+      this.select(slot);
+  }
+  onPointerCancel() {
+    this.drag = null;
+  }
+  onShirtKey(event) {
+    if (!this.renderer)
+      return;
+    const turns = {
+      ArrowLeft: [-10, 0],
+      ArrowRight: [10, 0],
+      ArrowUp: [0, -10],
+      ArrowDown: [0, 10]
+    };
+    const turn = turns[event.key];
+    if (turn) {
+      event.preventDefault();
+      this.renderer.rotate(turn[0], turn[1]);
+    } else if (event.key === "+" || event.key === "=") {
+      event.preventDefault();
+      this.renderer.zoomBy(0.1);
+    } else if (event.key === "-") {
+      event.preventDefault();
+      this.renderer.zoomBy(-0.1);
+    }
+  }
+  showSide(side) {
+    this.side = side;
+    this.renderer?.resetView();
+    this.paintShirt();
+  }
+  bidUrl(slot, amountCents) {
+    const app = this.appOrigin;
+    if (!app)
+      return null;
+    const local = ["localhost", "127.0.0.1", "[::1]"].includes(app.hostname);
+    const path = `${local ? "" : `/${this.language}`}/patrocinios/camisetas/${encodeURIComponent(this.campaignId)}`;
+    const url = new URL(path, app.origin);
+    url.searchParams.set("slot", slot.id);
+    url.searchParams.set("amount", String(amountCents));
+    url.searchParams.set("channel", this.channel);
+    url.searchParams.set("parentOrigin", location.origin);
+    return url.href;
+  }
+  amountProblem(slot) {
+    const cents = Math.round((this.amountEuros ?? 0) * 100);
+    if (!Number.isFinite(cents) || cents < slot.minimumBidCents)
+      return `${this.text.belowMinimum} ${this.formatMoney(slot.minimumBidCents)}.`;
+    if (slot.incrementCents > 0 && (cents - slot.minimumBidCents) % slot.incrementCents !== 0)
+      return this.text.step;
+    return null;
+  }
+  submitBid(event) {
+    event.preventDefault();
+    const slot = this.selectedSlot;
+    if (!slot || slot.isReserved || !this.biddingOpen || this.amountProblem(slot))
+      return;
+    const amountCents = Math.round((this.amountEuros ?? 0) * 100);
+    const url = this.bidUrl(slot, amountCents);
+    if (!url)
+      return;
+    this.dispatchEvent(new CustomEvent("wodira:shirt:bid-started", {
+      bubbles: true,
+      composed: true,
+      detail: { campaignId: this.campaignId, slotId: slot.id, amountCents }
+    }));
+    const width = Math.min(1100, screen.availWidth);
+    const height = Math.min(900, screen.availHeight);
+    const left = Math.max(0, Math.round((screen.availWidth - width) / 2));
+    const top = Math.max(0, Math.round((screen.availHeight - height) / 2));
+    const popup = window.open(url, `wodira-shirt-${this.channel}`, `popup,width=${width},height=${height},left=${left},top=${top}`);
+    if (!popup) {
+      this.blockedUrl = url;
+      this.status = "blocked";
+      return;
+    }
+    this.bidWindow = popup;
+    this.status = "waiting";
+    this.watchBidWindow();
+  }
+  watchBidWindow() {
+    clearInterval(this.bidWindowTimer);
+    if (!this.bidWindow)
+      return;
+    this.bidWindowTimer = setInterval(() => {
+      if (!this.bidWindow?.closed)
+        return;
+      clearInterval(this.bidWindowTimer);
+      this.bidWindow = null;
+      if (this.status === "waiting")
+        this.status = "idle";
+      this.load(true);
+    }, 1000);
+  }
+  onMessage = (event) => {
+    const app = this.appOrigin;
+    if (!app || event.origin !== app.origin)
+      return;
+    if (!this.bidWindow || event.source !== this.bidWindow)
+      return;
+    const data = event.data;
+    if (!data || typeof data !== "object" || !("type" in data) || data.type !== "wodira:shirt:paid" || !("channel" in data) || data.channel !== this.channel || !("campaignId" in data) || data.campaignId !== this.campaignId)
+      return;
+    this.status = "paid";
+    this.load(true);
+    this.dispatchEvent(new CustomEvent("wodira:shirt:paid", {
+      bubbles: true,
+      composed: true,
+      detail: { campaignId: this.campaignId }
+    }));
+  };
+  onWindowFocus = () => {
+    if (this.status === "blocked")
+      this.load(true);
+  };
+  onColorScheme = () => this.refreshTheme();
+  render() {
+    const text = this.text;
+    if (!this.client)
+      return html`<section part="container" aria-label=${text.label}>
+        <p part="error" role="alert">${text.invalid}</p>
+      </section>`;
+    if (this.loading && !this.campaign)
+      return html`<section part="container" aria-label=${text.label} aria-busy="true">
+        <p part="loader" role="status">${text.loading}</p>
+      </section>`;
+    if (this.failed || !this.campaign)
+      return html`<section part="container" aria-label=${text.label}>
+        <p part="error" role="alert">${text.error}</p>
+        <button part="button secondary" type="button" @click=${() => this.load()}>
+          ${text.retry}
+        </button>
+      </section>`;
+    const campaign = this.campaign;
+    return html`<section part="container" aria-label=${text.label}>
+      <header part="header">
+        <h2 part="title">${campaign.eventName}</h2>
+        <p part="meta">
+          <span>${[campaign.city, campaign.province].filter(Boolean).join(", ")}</span>
+          <span>${campaign.shirtCount.toLocaleString(this.numberLocale)} ${text.shirts}</span>
+          <span>${text.closes}: ${this.formatDate(campaign.closesAt)}</span>
+        </p>
+      </header>
+      <div part="layout">
+        <div part="stack">${this.renderStage()} ${this.renderSides()}</div>
+        <div part="stack">${this.renderSlots()} ${this.renderBidPanel()}</div>
+      </div>
+    </section>`;
+  }
+  renderStage() {
+    const text = this.text;
+    if (this.modelUnavailable)
+      return html`<div part="stage"><p part="stage-fallback">${text.noModel}</p></div>`;
+    return html`<div part="stage">
+      ${keyed(this.canvasRevision, html`<canvas
+          part="shirt"
+          tabindex="0"
+          role="img"
+          aria-label=${text.shirtAria}
+          @pointerdown=${this.onPointerDown}
+          @pointermove=${this.onPointerMove}
+          @pointerup=${this.onPointerUp}
+          @pointercancel=${this.onPointerCancel}
+          @lostpointercapture=${this.onPointerCancel}
+          @keydown=${this.onShirtKey}
+        ></canvas>`)}
+      ${this.modelLoading ? html`<p part="stage-hint loader" role="status">${text.loading}</p>` : html`<p part="stage-hint">${text.hint}</p>`}
+      <div part="stage-controls">
+        <button
+          part="zoom-button"
+          type="button"
+          aria-label=${text.zoomOut}
+          @click=${() => this.renderer?.zoomBy(-0.1)}
+        >
+          −
+        </button>
+        <button
+          part="zoom-button"
+          type="button"
+          aria-label=${text.zoomIn}
+          @click=${() => this.renderer?.zoomBy(0.1)}
+        >
+          +
+        </button>
+      </div>
+    </div>`;
+  }
+  renderSides() {
+    return html`<div part="side-switch" role="group" aria-label=${this.text.views}>
+      ${this.sides.map((side) => html`<button
+            part=${`side-button${this.side === side ? " side-button-active" : ""}`}
+            type="button"
+            aria-pressed=${String(this.side === side)}
+            @click=${() => this.showSide(side)}
+          >
+            ${this.text.sides[side]}
+          </button>`)}
+    </div>`;
+  }
+  renderSlots() {
+    const text = this.text;
+    return html`<div part="stack">
+      <h3 part="section-title">${text.slots}</h3>
+      <ul part="slot-list">
+        ${this.orderedSlots.map((slot) => {
+      const selected = slot.id === this.selectedSlotId;
+      const leading = slot.leadingAmountCents !== null && !!slot.leadingBrandName;
+      const parts = ["slot", selected && "slot-selected", slot.isReserved && "slot-reserved"].filter(Boolean).join(" ");
+      return html`<li>
+            <button
+              part=${parts}
+              type="button"
+              aria-pressed=${String(selected)}
+              ?disabled=${!!slot.isReserved}
+              @click=${() => this.select(slot)}
+            >
+              <span part="slot-name">${slot.name}</span>
+              <span part="slot-detail"
+                >${text.sides[slot.side]} · ${slot.printWidthCm} × ${slot.printHeightCm} cm</span
+              >
+              <span part="slot-price price">
+                ${slot.isReserved ? html`<small>${text.reserved}</small>` : leading ? html`<small>${slot.leadingBrandName} ${text.leads}</small
+                          >${this.formatMoney(slot.leadingAmountCents ?? 0)}` : html`<small>${text.from}</small>${this.formatMoney(slot.minimumBidCents)}`}
+              </span>
+            </button>
+          </li>`;
+    })}
+      </ul>
+    </div>`;
+  }
+  renderBidPanel() {
+    const text = this.text;
+    const slot = this.selectedSlot;
+    if (!slot)
+      return html`<p part="hint">${text.pick}</p>`;
+    if (slot.isReserved)
+      return html`<div part="bid-panel">
+        <h3 part="bid-title">${slot.name}</h3>
+        <p part="hint">${text.reserved}</p>
+      </div>`;
+    const leading = slot.leadingAmountCents !== null && !!slot.leadingBrandName;
+    const problem = this.amountProblem(slot);
+    const amountCents = Math.round((this.amountEuros ?? 0) * 100);
+    return html`<div part="bid-panel">
+      <h3 part="bid-title">${slot.name}</h3>
+      ${leading ? html`<p part="leader">
+              ${slot.leadingArtworkUrl ? html`<img
+                      part="leader-logo"
+                      src=${slot.leadingArtworkUrl}
+                      alt=${slot.leadingBrandName ?? ""}
+                      loading="lazy"
+                    />` : nothing}
+              <span
+                >${text.current}:
+                <strong part="price">${this.formatMoney(slot.leadingAmountCents ?? 0)}</strong> ·
+                ${slot.leadingBrandName}</span
+              >
+            </p>` : nothing}
+      <p part="hint">
+        ${text.minimum}: <strong>${this.formatMoney(slot.minimumBidCents)}</strong>.
+        ${text.increments} ${this.formatMoney(slot.incrementCents)}.
+      </p>
+      ${this.biddingOpen ? html`<form part="bid-form" novalidate @submit=${this.submitBid}>
+              <label part="label">
+                ${text.amount}
+                <input
+                  part="input"
+                  type="number"
+                  inputmode="decimal"
+                  name="amount"
+                  .value=${this.amountEuros === null ? "" : String(this.amountEuros)}
+                  min=${slot.minimumBidCents / 100}
+                  step=${Math.max(1, slot.incrementCents) / 100}
+                  aria-invalid=${problem ? "true" : "false"}
+                  aria-describedby="bid-problem"
+                  @input=${(event) => {
+      const value = event.target.valueAsNumber;
+      this.amountEuros = Number.isFinite(value) ? value : null;
+    }}
+                />
+              </label>
+              <p id="bid-problem" part="field-error" role="alert" ?hidden=${!problem}>
+                ${problem ?? ""}
+              </p>
+              <button part="button submit" type="submit" ?disabled=${!!problem}>
+                ${leading ? text.outbid : text.bid}${problem ? "" : ` · ${this.formatMoney(amountCents)}`}
+              </button>
+              <p part="hint">${text.note}</p>
+            </form>` : html`<p part="hint">${text.closed}</p>`}
+      ${this.renderStatus()}
+    </div>`;
+  }
+  renderStatus() {
+    const text = this.text;
+    switch (this.status) {
+      case "waiting":
+        return html`<p part="status hint" role="status">${text.waiting}</p>`;
+      case "paid":
+        return html`<p part="status success" role="status">${text.paid}</p>`;
+      case "blocked":
+        return html`<p part="status error" role="alert">
+          ${text.popupBlocked}
+          <a href=${this.blockedUrl} target="_blank" rel="opener">${text.openBid}</a>
+        </p>`;
+      default:
+        return nothing;
+    }
+  }
+}
+
+// src/ui/shirt-sponsors/index.ts
+function defineWodiraShirtElements2() {
+  if (!globalThis.customElements)
+    throw new Error("WODira shirt elements require a browser.");
+  if (!customElements.get("wodira-shirt-auction"))
+    customElements.define("wodira-shirt-auction", WodiraShirtAuction2);
+}
+
+export { __export, __chunks, css, html, nothing, LitElement, WodiraBrowserApiError, createWodiraBrowserClient, wodiraUiStyles, WodiraShirtAuction2, defineWodiraShirtElements2 };