\n \n 0\n \n
\n \n \n
\n `).join('');\n this.row.innerHTML = placedMarkup;\n this.selectionList.innerHTML = this.items.map((item) => `\n \n `).join('');\n this.empty.hidden = this.items.length > 0;\n this.selection.hidden = false;\n this.resetButtons.forEach((button) => { button.disabled = this.items.length === 0; });\n const total = this.basePrice + this.items.reduce((sum, item) => sum + item.price, 0);\n this.total.textContent = new Intl.NumberFormat(this.locale, { style: 'currency', currency: this.currency }).format(total / 100);\n if (this.supportPrice) this.supportPrice.textContent = this.formatMoney(this.basePrice);\n this.updateCardControls();\n this.applyCompatibility();\n this.renderCartState();\n this.normalizeItems();\n }\n\n renderCartState() {\n if (!this.cartButton) return;\n const unavailableCharm = this.items.find((item) => {\n const profile = this.charmProfiles.get(String(item.variantId));\n return profile?.available === false;\n });\n const available = Boolean(this.supportVariant?.id) && this.supportVariant?.available !== false && !unavailableCharm;\n this.cartButton.disabled = this.cartBusy || !available;\n this.cartButton.textContent = this.cartBusy\n ? (this.dataset.cartAddingLabel || 'Ajout en cours\u2026')\n : (this.dataset.cartButtonLabel || 'Ajouter la cr\u00E9ation au panier');\n if (!this.cartBusy && this.cartStatus) {\n this.cartStatus.textContent = available\n ? (this.dataset.cartNote || '')\n : (this.dataset.cartUnavailable || 'Cette s\u00E9lection contient un article indisponible.');\n this.cartStatus.dataset.state = available ? 'ready' : 'error';\n }\n }\n\n cartFingerprint() {\n return JSON.stringify({\n support: this.supportProfile.profileId,\n variant: this.supportVariant?.id,\n items: this.items.map((item) => [item.instanceId, item.variantId, item.attachmentPointId])\n });\n }\n\n createCreationId() {\n const date = new Date().toISOString().slice(0, 10).replaceAll('-', '');\n const random = (window.crypto?.randomUUID?.()\n || `${Date.now()}-${Math.random().toString(36).slice(2)}-${Math.random().toString(36).slice(2)}`)\n .replaceAll('-', '').toUpperCase();\n return `MLS-${date}-${random}`;\n }\n\n async restoreCreationFromCart(creationId) {\n try {\n const response = await fetch(`${this.dataset.cartUrl || '/cart'}.js`, {\n headers: { Accept: 'application/json' }\n });\n if (!response.ok) throw new Error(this.messages.cartRestore || 'Impossible de relire la cr\u00E9ation depuis le panier.');\n const cart = await response.json();\n const lines = (cart.items || []).filter((line) => mlsCartCreationId(line) === creationId);\n const supportLine = lines.find((line) => mlsCartComponentType(line) === 'support');\n const charmLines = lines\n .filter((line) => {\n const type = mlsCartComponentType(line);\n return type === 'charm' || /^charm\\s/u.test(type);\n })\n .sort((a, b) => Number(a.properties?._mls_order || 0) - Number(b.properties?._mls_order || 0));\n if (!supportLine) throw new Error(this.messages.cartIncomplete || 'Cette cr\u00E9ation est incompl\u00E8te et ne peut pas \u00EAtre modifi\u00E9e.');\n\n this.placementMode = supportLine.properties?._mls_placement_mode === 'atelier_free'\n ? 'atelier_free'\n : 'customer_exact';\n\n const supportId = String(supportLine.properties?._mls_support_profile || '');\n const storedSupport = this.supportProfiles.get(supportId);\n if (!storedSupport) throw new Error(this.messages.cartSupport || 'Le support de cette cr\u00E9ation n\u2019est plus disponible.');\n this.supportProfile = {\n ...storedSupport,\n image: supportLine.properties?._mls_support_image || storedSupport.image,\n referenceScalePercent: Number(supportLine.properties?._mls_support_reference_scale || storedSupport.referenceScalePercent || 100)\n };\n this.supportVariant = this.resolveSupportVariant(this.supportProfile);\n const storedVariantId = String(supportLine.variant_id || supportLine.properties?._mls_support_variant || '');\n const exactVariant = (this.supportProfile.variants || []).find((variant) => (\n mlsNumericShopifyId(variant.id) === mlsNumericShopifyId(storedVariantId)\n ));\n if (exactVariant) this.supportVariant = exactVariant;\n this.basePrice = Number(this.supportVariant.priceCents ?? supportLine.final_price ?? 0);\n this.attachmentPoints = this.parseAttachmentPoints(this.supportProfile.attachmentPoints || []);\n this.maxCharms = Math.min(Number(this.supportProfile.maxCharms || this.attachmentPoints.length), this.attachmentPoints.length);\n\n this.items = charmLines.map((line, index) => {\n const props = line.properties || {};\n const profile = this.charmProfiles.get(String(line.variant_id))\n || [...this.charmProfiles.values()].find((candidate) => String(candidate.profileId) === String(props._mls_charm_profile))\n || {};\n return {\n instanceId: String(props._mls_instance || `mls-restored-${Date.now()}-${index}`),\n profileId: String(props._mls_charm_profile || profile.profileId || ''),\n title: mlsCustomerCharmTitle(profile.displayTitle || props._mls_display_title || profile.title || line.product_title || ''),\n technicalTitle: mlsCustomerCharmTitle(props._mls_display_title || profile.title || line.product_title || ''),\n image: String(props._mls_charm_image || profile.image || line.image || ''),\n price: Number(line.final_price ?? profile.priceCents ?? 0),\n productId: String(props._mls_charm_product || profile.productId || line.product_id || ''),\n variantId: String(line.variant_id || props._mls_charm_variant || profile.variantId || ''),\n size: String(props._mls_charm_size || profile.size || 'M'),\n visualScalePercent: Number(props._mls_charm_scale || profile.visualScalePercent || 100),\n supportScaleOverrides: { ...(profile.supportScaleOverrides || {}) },\n frozenSupportProductId: String(supportLine.properties?._mls_support_product || storedSupport.productId || ''),\n frozenSupportScalePercent: Number(props._mls_charm_support_scale || 100),\n anchorXPercent: Number(props._mls_charm_anchor_x ?? profile.anchorXPercent ?? 50),\n anchorYPercent: Number(props._mls_charm_anchor_y ?? profile.anchorYPercent ?? 0),\n attachmentPointId: Number(props._mls_point_source_index)\n };\n });\n this.editingLineKeys = lines.map((line) => line.key).filter(Boolean);\n this.supportVariantSelections.set(String(this.supportProfile.profileId), String(this.supportVariant.id));\n this.updateSupportPresentation();\n this.syncSupportOptionState();\n this.renderAttachmentPoints();\n this.render();\n this.announce(mlsTranslate(this.messages.creationRestored || 'Cr\u00E9ation __id__ charg\u00E9e depuis le panier.', { id: creationId }));\n } catch (error) {\n this.showCartError(error.message);\n }\n }\n\n async removeCartLinesByKeys(keys) {\n if (!keys?.length) return;\n const updates = Object.fromEntries(keys.map((key) => [key, 0]));\n const response = await fetch('/cart/update.js', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json', Accept: 'application/json' },\n body: JSON.stringify({ updates })\n });\n if (!response.ok) throw new Error(this.messages.cartReplace || 'Impossible de remplacer l\u2019ancienne cr\u00E9ation dans le panier.');\n }\n\n async addCreationToCart() {\n if (this.cartBusy) return;\n const incompatible = this.incompatibleItems();\n if (incompatible.length || this.items.length > this.maxCharms) {\n this.showCartError(incompatible.length\n ? (this.messages.cartIncompatible || 'Cette cr\u00E9ation contient un ou plusieurs charms incompatibles avec le support s\u00E9lectionn\u00E9.')\n : mlsTranslate(this.messages.cartCapacity || 'Cette cr\u00E9ation d\u00E9passe la capacit\u00E9 maximale de __capacity__ charms.', { capacity: this.maxCharms }));\n return;\n }\n const fingerprint = this.cartFingerprint();\n if (fingerprint !== this.pendingCartFingerprint) {\n this.pendingCartFingerprint = fingerprint;\n this.pendingCreationId = this.createCreationId();\n }\n\n let cartItems;\n try {\n cartItems = mlsBuildCartItems({\n support: this.supportProfile,\n supportVariant: this.supportVariant,\n items: this.items,\n attachmentPoints: this.attachmentPoints,\n creationId: this.pendingCreationId,\n placementMode: this.placementMode,\n messages: this.messages\n });\n } catch (error) {\n this.showCartError(error.message);\n return;\n }\n\n this.cartBusy = true;\n this.renderCartState();\n try {\n const response = await fetch(this.dataset.cartAddUrl || '/cart/add.js', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json', Accept: 'application/json' },\n body: JSON.stringify({ items: cartItems })\n });\n const result = await response.json().catch(() => ({}));\n if (!response.ok) throw new Error(result.description || result.message || this.dataset.cartError);\n if (this.editingCreationId && this.editingLineKeys.length) {\n try {\n await this.removeCartLinesByKeys(this.editingLineKeys);\n } catch (replaceError) {\n const cartResponse = await fetch(`${this.dataset.cartUrl || '/cart'}.js`, { headers: { Accept: 'application/json' } });\n const cart = await cartResponse.json().catch(() => ({ items: [] }));\n const replacementKeys = (cart.items || [])\n .filter((line) => mlsCartCreationId(line) === this.pendingCreationId)\n .map((line) => line.key);\n await this.removeCartLinesByKeys(replacementKeys).catch(() => {});\n throw replaceError;\n }\n }\n if (this.cartStatus) {\n this.cartStatus.textContent = (this.dataset.cartSuccess || 'Cr\u00E9ation ajout\u00E9e au panier \u2713')\n .replace('__id__', this.pendingCreationId);\n this.cartStatus.dataset.state = 'success';\n }\n this.announce(this.cartStatus?.textContent || 'Cr\u00E9ation ajout\u00E9e au panier.');\n window.location.assign(this.dataset.cartUrl || '/cart');\n } catch (error) {\n this.cartBusy = false;\n this.renderCartState();\n this.showCartError(error.message || this.dataset.cartError);\n }\n }\n\n showCartError(message) {\n if (this.cartStatus) {\n this.cartStatus.textContent = message || this.dataset.cartError || 'Impossible d\u2019ajouter la cr\u00E9ation au panier.';\n this.cartStatus.dataset.state = 'error';\n }\n this.announce(this.cartStatus?.textContent || message);\n }\n\n updateCardControls() {\n this.querySelectorAll('.mls-builder-v2__charm-card').forEach((card) => {\n const addButton = card.querySelector('[data-add-charm]');\n const control = card.querySelector('[data-quantity-control]');\n const quantity = card.querySelector('[data-variant-quantity]');\n const plus = card.querySelector('.mls-builder-v2__plus');\n if (!addButton || !control || !quantity || !plus) return;\n const count = this.items.filter((item) => item.variantId === addButton.dataset.variantId).length;\n card.classList.toggle('is-selected', count > 0);\n plus.hidden = count > 0;\n control.hidden = count === 0;\n quantity.textContent = String(count);\n });\n }\n\n targetHeight(size) {\n return MLS_TARGET_HEIGHTS[size] || MLS_TARGET_HEIGHTS.M;\n }\n\n renderedImageMetrics() {\n return window.MLSAnchorLocalV1.renderedImageMetrics(this.stage, this.supportImage);\n }\n\n projectSupportPoint(point, metrics = this.renderedImageMetrics()) {\n return window.MLSAnchorLocalV1.projectSupportPoint(point, metrics);\n }\n\n async visibleBounds(image) {\n return window.MLSAnchorLocalV1.visibleBounds(image, this.imageBounds);\n }\n\n async normalizeItems() {\n this.renderAttachmentPoints();\n const metrics = this.renderedImageMetrics();\n const jobs = this.items.map(async (item) => {\n const placed = this.row.querySelector(`[data-instance=\"${item.instanceId}\"]`);\n const image = placed?.querySelector('img');\n if (!placed || !image) return;\n const bounds = await this.visibleBounds(image);\n if (!placed.isConnected) return;\n item.renderGeometry = window.MLSAnchorLocalV1.renderGeometry({\n bounds,\n baseHeight: this.targetHeight(item.size),\n metrics,\n supportReferenceScalePercent: this.supportProfile.referenceScalePercent,\n visualScalePercent: item.visualScalePercent,\n charmSupportScalePercent: mlsCharmSupportScale(item, this.supportProfile)\n });\n });\n await Promise.all(jobs);\n this.positionItems();\n }\n\n parseAttachmentPoints(rawValue) {\n try {\n const points = Array.isArray(rawValue) ? rawValue : JSON.parse(rawValue || '[]');\n if (!Array.isArray(points)) return [];\n return points\n .map((point, index) => ({\n id: Number(point.id ?? index + 1),\n x: Number(point.x),\n y: Number(point.y),\n priority: Number(point.fillPriority ?? point.priority ?? index + 1),\n angle: Number(point.angle || 0),\n isCenter: point.isCenter === true,\n sourceIndex: index\n }))\n .filter((point) => Number.isFinite(point.x) && Number.isFinite(point.y) && Number.isFinite(point.priority))\n .sort((first, second) => first.priority - second.priority);\n } catch (_error) {\n return [];\n }\n }\n\n renderAttachmentPoints(forceVisible = false) {\n if (!this.pointsLayer) return;\n if (!this.showAttachmentPoints && !forceVisible) {\n this.pointsLayer.hidden = true;\n this.pointsLayer.innerHTML = '';\n return;\n }\n this.pointsLayer.hidden = false;\n const metrics = this.renderedImageMetrics();\n this.pointsLayer.innerHTML = this.attachmentPoints.map((point) => {\n const projected = this.projectSupportPoint(point, metrics);\n return `\n