@asteby/storefront-react 0.2.0 → 0.4.0

package/dist/mockups.cjs

@@ -0,0 +1,567 @@
+'use strict';
+
+var mockup = require('@asteby/storefront/mockup');
+var react = require('react');
+require('@asteby/storefront');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/mockups/product-image.tsx
+var DEFAULT_IMAGE_WIDTHS = [320, 480, 640, 768, 1024, 1280, 1600];
+var defaultImageLoader = (src, width, height) => {
+  try {
+    const isAbsolute = /^[a-z][a-z0-9+.-]*:/i.test(src);
+    const url = new URL(src, "http://relative.invalid");
+    url.searchParams.set("width", String(width));
+    if (height) url.searchParams.set("height", String(height));
+    return isAbsolute ? url.toString() : url.pathname + url.search + url.hash;
+  } catch {
+    return src;
+  }
+};
+function parseRatio(ratio) {
+  if (!ratio) return null;
+  const [w, h] = ratio.split(/[/:]/).map((n) => Number.parseFloat(n));
+  return w && h ? w / h : null;
+}
+function Image({
+  data,
+  sizes = "100vw",
+  widths = DEFAULT_IMAGE_WIDTHS,
+  loader = defaultImageLoader,
+  priority = false,
+  aspectRatio,
+  alt,
+  loading,
+  decoding,
+  ...rest
+}) {
+  const ratio = parseRatio(aspectRatio) ?? (data.width && data.height ? data.width / data.height : null);
+  let candidates = [...widths].sort((a, b) => a - b);
+  if (data.width) {
+    const capped = candidates.filter((w) => w <= data.width);
+    candidates = capped.length ? capped : [data.width];
+  }
+  const srcSet = loader ? candidates.map((w) => `${loader(data.url, w, ratio ? Math.round(w / ratio) : void 0)} ${w}w`).join(", ") : void 0;
+  const width = data.width ?? candidates[candidates.length - 1];
+  const height = data.height ?? (ratio && width ? Math.round(width / ratio) : void 0);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      src: data.url,
+      alt: alt ?? data.alt ?? "",
+      ...srcSet ? { srcSet, sizes } : {},
+      ...width ? { width } : {},
+      ...height ? { height } : {},
+      loading: loading ?? (priority ? "eager" : "lazy"),
+      decoding: decoding ?? (priority ? "auto" : "async"),
+      ...priority ? { fetchPriority: "high" } : {},
+      ...rest
+    }
+  );
+}
+var MOCKUP_SIZE = 400;
+var MOCKUP_TOKENS = {
+  bg: "var(--mockup-bg, var(--color-muted, light-dark(#f4f4f5, #27272a)))",
+  surface: "var(--mockup-surface, light-dark(#3f3f46, #0a0a0a))",
+  "surface-ink": "var(--mockup-surface-ink, light-dark(#e4e4e7, #a1a1aa))",
+  label: "var(--mockup-label, var(--color-background, light-dark(#ffffff, #18181b)))",
+  "label-ink": "var(--mockup-label-ink, var(--color-foreground, light-dark(#18181b, #fafafa)))",
+  ink: "var(--mockup-ink, var(--color-foreground, light-dark(#18181b, #fafafa)))",
+  muted: "var(--mockup-muted, var(--color-muted-foreground, light-dark(#71717a, #a1a1aa)))",
+  accent: "var(--mockup-accent, var(--color-primary, light-dark(#52525b, #d4d4d8)))",
+  "accent-ink": "var(--mockup-accent-ink, var(--color-primary-foreground, light-dark(#ffffff, #18181b)))"
+};
+var ROOT_STYLE = {
+  ...Object.fromEntries(Object.entries(MOCKUP_TOKENS).map(([k, v]) => [`--mk-${k}`, v])),
+  fontFamily: "var(--mockup-font, var(--font-heading, var(--font-sans, ui-sans-serif, system-ui, sans-serif)))",
+  textTransform: "var(--mockup-text-transform, none)"
+};
+function tone(t, prop = "fill") {
+  return { [prop]: `var(--mk-${t})` };
+}
+var MOCKUP_MONO = "var(--mockup-font-mono, var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace))";
+function wrapMockupText(text, maxChars, maxLines, wordMax = maxChars) {
+  if (!text || maxLines < 1) return [];
+  const cap = Math.max(maxChars, wordMax);
+  const words = text.split(" ").filter(Boolean);
+  const lines = [];
+  let current = "";
+  let cut = false;
+  for (let i = 0; i < words.length; i++) {
+    let word = words[i];
+    if (Array.from(word).length > cap) word = Array.from(word).slice(0, cap - 1).join("") + "\u2026";
+    const next = current ? `${current} ${word}` : word;
+    if (Array.from(next).length <= maxChars || !current) {
+      current = next;
+      continue;
+    }
+    lines.push(current);
+    current = word;
+    if (lines.length === maxLines) {
+      cut = true;
+      current = "";
+      break;
+    }
+  }
+  if (current) lines.push(current);
+  if (cut || lines.length > maxLines) {
+    const kept = lines.slice(0, maxLines);
+    const last = Array.from(kept[maxLines - 1] ?? "");
+    const limit = Math.max(maxChars, Math.min(cap, last.length));
+    kept[maxLines - 1] = (last.length >= limit ? last.slice(0, limit - 1).join("") : last.join("")).replace(/[\s.,;:…-]+$/, "") + "\u2026";
+    return kept;
+  }
+  return lines;
+}
+function mockupWordMax(width, min, ratio = 0.62) {
+  return Math.max(1, Math.floor(width / (min * ratio)));
+}
+function fitMockupFontSize(lines, width, max, min = 10, ratio = 0.62) {
+  const longest = Math.max(1, ...lines.map((l) => Array.from(l).length));
+  return Math.round(Math.max(min, Math.min(max, width / (longest * ratio))));
+}
+function MockupText({ lines, x, y, size, lineHeight = 1.12, tone: t = "ink", weight = 700, anchor = "middle", mono, style, ...rest }) {
+  if (!lines.length) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "text",
+    {
+      x,
+      y,
+      fontSize: size,
+      fontWeight: weight,
+      textAnchor: anchor,
+      style: { ...tone(t), ...mono ? { fontFamily: MOCKUP_MONO } : null, ...style },
+      ...rest,
+      children: lines.length === 1 ? lines[0] : lines.map((line, i) => /* @__PURE__ */ jsxRuntime.jsx("tspan", { x, dy: i === 0 ? 0 : size * lineHeight, children: line }, i))
+    }
+  );
+}
+function MockupFrame({ label, decorative = false, kind, children, style, width = MOCKUP_SIZE, height = MOCKUP_SIZE, ...rest }) {
+  const a11y = decorative ? { "aria-hidden": true } : { role: "img", "aria-label": label };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: `0 0 ${MOCKUP_SIZE} ${MOCKUP_SIZE}`,
+      width,
+      height,
+      focusable: "false",
+      "data-mockup": kind,
+      ...a11y,
+      style: { ...ROOT_STYLE, ...style },
+      ...rest,
+      children: [
+        decorative ? null : /* @__PURE__ */ jsxRuntime.jsx("title", { children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { width: MOCKUP_SIZE, height: MOCKUP_SIZE, style: tone("bg") }),
+        children
+      ]
+    }
+  );
+}
+function GenericMockup({ data, label, labels: _labels, ...rest }) {
+  const titleLines = wrapMockupText(data.title, 28, 2);
+  const titleFont = fitMockupFontSize(titleLines, 330, 22, 13);
+  const titleY = titleLines.length > 1 ? 340 : 352;
+  const eyebrow = data.category ? wrapMockupText(data.category, 30, 1) : [];
+  return /* @__PURE__ */ jsxRuntime.jsxs(MockupFrame, { kind: "generic", label, ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("ellipse", { cx: 200, cy: 300, rx: 130, ry: 8, style: { ...tone("ink"), opacity: 0.08 } }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M90 82L114 64H330L306 82Z", style: tone("accent") }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M306 82L330 64V280L306 298Z", style: tone("surface") }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M306 82L330 64V280L306 298Z", style: { fill: "#000", opacity: 0.22 } }),
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: 90, y: 82, width: 216, height: 216, style: tone("surface") }),
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: 186, y: 82, width: 24, height: 46, style: { ...tone("accent"), opacity: 0.9 } }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 198, cy: 186, r: 50, style: tone("label") }),
+    data.monogram ? /* @__PURE__ */ jsxRuntime.jsx(MockupText, { lines: [data.monogram], x: 198, y: 202, size: 44, weight: 900, tone: "label-ink", letterSpacing: 1 }) : null,
+    data.brand ? /* @__PURE__ */ jsxRuntime.jsx(MockupText, { lines: wrapMockupText(data.brand, 20, 1), x: 198, y: 272, size: 13, weight: 700, tone: "surface-ink", letterSpacing: 2 }) : null,
+    eyebrow.length > 0 && titleLines.length < 2 ? /* @__PURE__ */ jsxRuntime.jsx(MockupText, { lines: eyebrow, x: 200, y: 326, size: 12, weight: 600, tone: "muted", letterSpacing: 1 }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(MockupText, { lines: titleLines, x: 200, y: titleY, size: titleFont, lineHeight: 1.2, weight: 700 })
+  ] });
+}
+
+// src/mockups/labels.ts
+var DEFAULT_MOCKUP_LABELS = {
+  illustration: "Ilustraci\xF3n de referencia",
+  size: "medida",
+  partNumber: "N.\xBA de parte",
+  oem: "OEM",
+  fits: "Compatible con",
+  flavor: "sabor",
+  servings: "porciones",
+  lightTruck: "LT",
+  runFlat: "Run flat"
+};
+var has = (haystack, needle) => haystack.toLowerCase().includes(needle.toLowerCase());
+function describeMockup(data, labels = DEFAULT_MOCKUP_LABELS) {
+  const title = data.title ?? "";
+  const parts = [title];
+  switch (data.kind) {
+    case "tire":
+      if (data.size && !has(title, data.size)) parts.push(`${labels.size} ${data.size}`);
+      if (data.service && !has(title, data.service)) parts.push(data.service);
+      break;
+    case "part":
+      if (data.partNumber && !has(title, data.partNumber)) parts.push(`${labels.partNumber} ${data.partNumber}`);
+      break;
+    case "supplement":
+      if (data.flavor && !has(title, data.flavor)) parts.push(`${labels.flavor} ${data.flavor}`);
+      if (data.presentation && !has(title, data.presentation)) parts.push(data.presentation);
+      break;
+  }
+  const detail = parts.filter((p) => !!p).join(", ");
+  return detail ? `${labels.illustration}: ${detail}` : labels.illustration;
+}
+var X = 48;
+var W = 304;
+var PAD = 24;
+var INNER = W - PAD * 2;
+var SECONDARY = { opacity: 0.68 };
+function PartMockup({ data, label, labels, ...rest }) {
+  const number = data.partNumber ?? data.oemNumber;
+  const numberCaption = data.partNumber ? labels.partNumber : labels.oem;
+  const bandLines = number ? [number] : wrapMockupText(data.title, 22, 2);
+  const bandFont = number ? fitMockupFontSize(bandLines, INNER, 34, 14, 0.62) : fitMockupFontSize(bandLines, INNER, 24, 14);
+  const header = data.brand ?? data.category;
+  const headerAside = data.brand ? data.position ?? data.category : data.position;
+  const body = [];
+  if (number) body.push({ lines: wrapMockupText(data.title, 26, 2), size: 17, weight: 700 });
+  if (data.fitment) body.push({ lines: wrapMockupText(`${labels.fits}: ${data.fitment}`, 34, 2), size: 13, secondary: true, weight: 500 });
+  if (data.partNumber && data.oemNumber) body.push({ lines: [`${labels.oem} ${data.oemNumber}`], size: 13, secondary: true, weight: 600, mono: true });
+  let y = 248;
+  const placed = [];
+  for (const b of body) {
+    const at = y + b.size;
+    const room = Math.floor((330 - at) / (b.size * 1.2)) + 1;
+    if (room < 1 || !b.lines.length) continue;
+    const lines = b.lines.length > room ? [...b.lines.slice(0, room - 1), b.lines[room - 1].replace(/[\s.,;:…-]*$/, "\u2026")] : b.lines;
+    placed.push({ ...b, lines, y: at });
+    y = at + (lines.length - 1) * b.size * 1.2 + 10;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(MockupFrame, { kind: "part", label, ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M78 98 C60 52 36 46 14 30", fill: "none", strokeWidth: 2, strokeLinecap: "round", style: tone("muted", "stroke") }),
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: X, y: 66, width: W, height: 276, rx: 18, style: tone("label") }),
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: X + 0.75, y: 66.75, width: W - 1.5, height: 274.5, rx: 17.25, fill: "none", strokeWidth: 1.5, style: { ...tone("muted", "stroke"), opacity: 0.3 } }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 80, cy: 98, r: 9, style: tone("bg") }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 80, cy: 98, r: 9, fill: "none", strokeWidth: 1.5, style: { ...tone("muted", "stroke"), opacity: 0.5 } }),
+    header ? /* @__PURE__ */ jsxRuntime.jsx(MockupText, { lines: wrapMockupText(header, headerAside ? 14 : 22, 1), x: 104, y: 104, size: 16, weight: 800, tone: "label-ink", anchor: "start", letterSpacing: 0.5 }) : null,
+    headerAside ? /* @__PURE__ */ jsxRuntime.jsx(MockupText, { lines: wrapMockupText(headerAside, header ? 14 : 22, 1), x: X + W - PAD, y: 104, size: 12, weight: 600, tone: "label-ink", anchor: "end", style: SECONDARY }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: X, y: 128, width: W, height: 92, style: tone("accent") }),
+    number ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(MockupText, { lines: [numberCaption], x: X + PAD, y: 154, size: 12, weight: 600, tone: "accent-ink", anchor: "start", letterSpacing: 1, style: { opacity: 0.85 } }),
+      /* @__PURE__ */ jsxRuntime.jsx(MockupText, { lines: bandLines, x: X + PAD, y: 198, size: bandFont, weight: 800, tone: "accent-ink", anchor: "start", mono: true })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx(MockupText, { lines: bandLines, x: X + PAD, y: bandLines.length > 1 ? 168 : 182, size: bandFont, weight: 800, tone: "accent-ink", anchor: "start" }),
+    placed.map((b, i) => /* @__PURE__ */ jsxRuntime.jsx(MockupText, { lines: b.lines, x: X + PAD, y: b.y, size: b.size, lineHeight: 1.2, weight: b.weight, tone: "label-ink", anchor: "start", mono: b.mono, style: b.secondary ? SECONDARY : void 0 }, i))
+  ] });
+}
+var SHAPES = {
+  tub: {
+    label: { x: 131, y: 128, w: 138, h: 200 },
+    draw: () => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("rect", { x: 120, y: 44, width: 160, height: 54, rx: 8, style: tone("surface") }),
+      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: 128, y1: 71, x2: 272, y2: 71, strokeWidth: 42, strokeDasharray: "1.5 7.5", style: { ...tone("surface-ink", "stroke"), opacity: 0.18 } }),
+      /* @__PURE__ */ jsxRuntime.jsx("rect", { x: 117, y: 95, width: 166, height: 9, rx: 2, style: tone("accent") }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M122 104H278L283 344Q283 362 265 362H135Q117 362 117 344Z", style: tone("surface") })
+    ] })
+  },
+  bottle: {
+    label: { x: 131, y: 148, w: 138, h: 184 },
+    draw: () => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("rect", { x: 158, y: 46, width: 84, height: 40, rx: 7, style: tone("surface") }),
+      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: 164, y1: 66, x2: 236, y2: 66, strokeWidth: 30, strokeDasharray: "1.5 6.5", style: { ...tone("surface-ink", "stroke"), opacity: 0.18 } }),
+      /* @__PURE__ */ jsxRuntime.jsx("rect", { x: 168, y: 84, width: 64, height: 12, style: tone("accent") }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M124 116Q124 96 148 96H252Q276 96 276 116L281 344Q281 362 263 362H137Q119 362 119 344Z", style: tone("surface") })
+    ] })
+  },
+  bag: {
+    label: { x: 133, y: 118, w: 134, h: 196 },
+    draw: () => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M118 64Q200 50 282 64L297 344Q200 360 103 344Z", style: tone("surface") }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M118 64Q200 50 282 64L280 84Q200 70 120 84Z", style: tone("accent") }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M124 92Q200 79 276 92", fill: "none", strokeWidth: 2, strokeDasharray: "4 4", style: { ...tone("surface-ink", "stroke"), opacity: 0.4 } })
+    ] })
+  }
+};
+function SupplementMockup({ data, label, labels, ...rest }) {
+  const shape = SHAPES[data.shape] ?? SHAPES.tub;
+  const box = shape.label;
+  const cx = box.x + box.w / 2;
+  const inner = box.w - 20;
+  const amount = data.presentation ?? (data.servings ? `${data.servings} ${labels.servings}` : null);
+  const nameLines = wrapMockupText(data.title, 12, 3, mockupWordMax(inner, 12, 0.64));
+  const nameFont = fitMockupFontSize(nameLines, inner, 26, 12, 0.64);
+  const flavor = data.flavor ? wrapMockupText(data.flavor, 18, 1)[0] : null;
+  const flavorW = flavor ? Math.min(inner, Array.from(flavor).length * 6.6 + 20) : 0;
+  const amountText = amount ? wrapMockupText(amount, 16, 1)[0] : null;
+  const amountW = amountText ? Math.min(inner, Array.from(amountText).length * 7.4 + 24) : 0;
+  const top = box.y + (data.brand ? 46 : 30);
+  const nameY = top + nameFont * 0.8;
+  const nameBottom = nameY + (nameLines.length - 1) * nameFont * 1.08;
+  const flavorY = Math.max(nameBottom + 14, box.y + box.h - 82);
+  return /* @__PURE__ */ jsxRuntime.jsxs(MockupFrame, { kind: "supplement", label, ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("ellipse", { cx: 200, cy: 364, rx: 110, ry: 8, style: { ...tone("ink"), opacity: 0.1 } }),
+    shape.draw(),
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: box.x, y: box.y, width: box.w, height: box.h, rx: 6, style: tone("label") }),
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: box.x, y: box.y, width: box.w, height: 6, rx: 3, style: tone("accent") }),
+    data.brand ? /* @__PURE__ */ jsxRuntime.jsx(MockupText, { lines: wrapMockupText(data.brand, 16, 1), x: cx, y: box.y + 28, size: 12, weight: 700, tone: "label-ink", letterSpacing: 1.5, style: { opacity: 0.68 } }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(MockupText, { lines: nameLines, x: cx, y: nameY, size: nameFont, lineHeight: 1.08, weight: 900, tone: "label-ink" }),
+    flavor ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("rect", { x: cx - flavorW / 2, y: flavorY, width: flavorW, height: 22, rx: 11, style: tone("accent") }),
+      /* @__PURE__ */ jsxRuntime.jsx(MockupText, { lines: [flavor], x: cx, y: flavorY + 15, size: 11.5, weight: 700, tone: "accent-ink" })
+    ] }) : null,
+    amountText ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("rect", { x: cx - amountW / 2, y: box.y + box.h - 40, width: amountW, height: 26, rx: 13, style: tone("surface") }),
+      /* @__PURE__ */ jsxRuntime.jsx(MockupText, { lines: [amountText], x: cx, y: box.y + box.h - 22.5, size: 12.5, weight: 700, tone: "surface-ink", letterSpacing: 1 })
+    ] }) : null
+  ] });
+}
+var CX = 200;
+var CY = 146;
+function TireMockup({ data, label, labels, ...rest }) {
+  const split = data.width && data.aspect && data.rim;
+  const headline = split ? `${data.width}/${data.aspect} R${data.rim}` : data.size;
+  const sizeFont = headline ? fitMockupFontSize([headline], 330, 46, 22, 0.6) : 0;
+  const titleLines = headline ? [] : wrapMockupText(data.model ?? data.title, 24, 2);
+  const titleFont = fitMockupFontSize(titleLines, 320, 26, 14);
+  const extras = [data.lightTruck && !(headline ?? "").toUpperCase().startsWith(labels.lightTruck.toUpperCase()) ? labels.lightTruck : null, data.runFlat ? labels.runFlat : null].filter(Boolean).join(" \xB7 ");
+  const footer = [headline ? data.model : null, extras || null].filter(Boolean).join(" \xB7 ");
+  return /* @__PURE__ */ jsxRuntime.jsxs(MockupFrame, { kind: "tire", label, ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("ellipse", { cx: CX, cy: CY + 128, rx: 120, ry: 8, style: { ...tone("ink"), opacity: 0.08 } }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: CX, cy: CY, r: 102, fill: "none", strokeWidth: 52, style: tone("surface", "stroke") }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: CX, cy: CY, r: 124, fill: "none", strokeWidth: 8, strokeDasharray: "8 9", style: tone("bg", "stroke") }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: CX, cy: CY, r: 111, fill: "none", strokeWidth: 1.5, strokeDasharray: "3 5", style: { ...tone("surface-ink", "stroke"), opacity: 0.35 } }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: CX, cy: CY, r: 86, fill: "none", strokeWidth: 1.5, style: { ...tone("surface-ink", "stroke"), opacity: 0.25 } }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: CX, cy: CY, r: 74, style: tone("muted") }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: CX, cy: CY, r: 45, fill: "none", strokeWidth: 36, strokeDasharray: "36 20.5", style: tone("surface", "stroke") }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: CX, cy: CY, r: 20, style: tone("label") }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: CX, cy: CY, r: 11, fill: "none", strokeWidth: 4, strokeDasharray: "2.5 11.3", style: tone("muted", "stroke") }),
+    data.brand ? /* @__PURE__ */ jsxRuntime.jsx(MockupText, { lines: [data.brand], x: CX, y: 302, size: 15, weight: 700, tone: "muted", letterSpacing: 2 }) : null,
+    headline ? /* @__PURE__ */ jsxRuntime.jsx("text", { x: CX, y: 346, fontSize: sizeFont, fontWeight: 800, textAnchor: "middle", style: tone("ink"), children: split ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      `${data.width}/${data.aspect} `,
+      /* @__PURE__ */ jsxRuntime.jsx("tspan", { style: tone("accent"), children: `R${data.rim}` })
+    ] }) : headline }) : /* @__PURE__ */ jsxRuntime.jsx(MockupText, { lines: titleLines, x: CX, y: titleLines.length > 1 ? 330 : 342, size: titleFont, weight: 700 }),
+    footer || data.service ? /* @__PURE__ */ jsxRuntime.jsxs("text", { x: CX, y: 380, fontSize: 15, fontWeight: 600, textAnchor: "middle", style: tone("muted"), children: [
+      data.service ? /* @__PURE__ */ jsxRuntime.jsx("tspan", { fontWeight: 800, style: tone("accent"), children: data.service }) : null,
+      data.service && footer ? " \xB7 " : null,
+      wrapMockupText(footer, data.service ? 34 : 40, 1)[0]
+    ] }) : null
+  ] });
+}
+var KIND_PATTERN = /^[a-z][a-z0-9_-]{0,31}$/;
+function normalize(kind, input) {
+  const r = typeof input === "function" ? { component: input } : input;
+  if (!r || typeof r.component !== "function") throw new TypeError(`Mockup "${kind}": component is required`);
+  return {
+    component: r.component,
+    fromProduct: r.fromProduct ?? ((product, variant) => mockup.mockupDataFromProduct(kind, product, variant)),
+    describe: r.describe ?? ((data, labels) => describeMockup(data, labels))
+  };
+}
+function createMockupRegistry(initial = {}) {
+  const map = /* @__PURE__ */ new Map();
+  const registry = {
+    register(kind, renderer) {
+      if (!KIND_PATTERN.test(kind)) throw new TypeError(`Invalid mockup kind "${kind}" (use a-z, 0-9, - and _)`);
+      map.set(kind, normalize(kind, renderer));
+      return registry;
+    },
+    get: (kind) => map.get(kind),
+    has: (kind) => map.has(kind),
+    kinds: () => [...map.keys()],
+    extend(overrides = {}) {
+      const next = createMockupRegistry();
+      for (const [k, r] of map) next.register(k, r);
+      for (const [k, r] of Object.entries(overrides)) if (r) next.register(k, r);
+      return next;
+    }
+  };
+  for (const [k, r] of Object.entries(initial)) if (r) registry.register(k, r);
+  return registry;
+}
+var BUILTIN_MOCKUPS = {
+  tire: TireMockup,
+  part: PartMockup,
+  supplement: SupplementMockup,
+  generic: GenericMockup
+};
+var defaultMockupRegistry = createMockupRegistry(BUILTIN_MOCKUPS);
+function registerMockup(kind, renderer) {
+  return defaultMockupRegistry.register(kind, renderer);
+}
+var MockupContext = react.createContext(null);
+function MockupProvider({ registry, resolveKind, labels, children }) {
+  const parent = react.useContext(MockupContext);
+  const value = {
+    registry: registry ?? parent?.registry ?? defaultMockupRegistry,
+    resolveKind: resolveKind ?? parent?.resolveKind,
+    labels: { ...parent?.labels ?? DEFAULT_MOCKUP_LABELS, ...labels }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(MockupContext.Provider, { value, children });
+}
+function useMockupConfig() {
+  return react.useContext(MockupContext) ?? { registry: defaultMockupRegistry, labels: DEFAULT_MOCKUP_LABELS };
+}
+function ProductMockup({ kind, data, label, labels: labelOverrides, registry: registryProp, ...svg }) {
+  const config = useMockupConfig();
+  const registry = registryProp ?? config.registry;
+  const renderer = registry.get(kind) ?? registry.get("generic");
+  if (!renderer) return null;
+  const labels = labelOverrides ? { ...config.labels, ...labelOverrides } : config.labels;
+  const name = label ? `${labels.illustration}: ${label}` : renderer.describe(data, labels);
+  const Component = renderer.component;
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { data, label: name, labels, ...svg });
+}
+function ProductImage({
+  product,
+  variant,
+  image,
+  kind: kindProp,
+  resolveKind: resolveProp,
+  registry: registryProp,
+  labels: labelOverrides,
+  alt,
+  className,
+  style,
+  id,
+  ...imageProps
+}) {
+  const config = useMockupConfig();
+  const img = image !== void 0 ? image : variant?.image ?? product.featured_image ?? product.images?.[0] ?? null;
+  if (img?.url) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Image, { data: img, alt: alt ?? img.alt ?? product.title, className, style, id, ...imageProps });
+  }
+  const registry = registryProp ?? config.registry;
+  let kind = kindProp;
+  if (!kind) {
+    const guess = mockup.resolveMockupKind(product, { kinds: registry.kinds() });
+    kind = (resolveProp ?? config.resolveKind)?.(product, guess) ?? guess;
+  }
+  const renderer = registry.get(kind) ?? registry.get("generic");
+  if (!renderer) return null;
+  const labels = labelOverrides ? { ...config.labels, ...labelOverrides } : config.labels;
+  const data = renderer.fromProduct(product, variant);
+  const decorative = alt === "";
+  const label = alt ? `${labels.illustration}: ${alt}` : renderer.describe(data, labels);
+  const Component = renderer.component;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
+    {
+      data,
+      label,
+      labels,
+      decorative,
+      className,
+      style,
+      id,
+      "data-mockup-fallback": ""
+    }
+  );
+}
+
+// src/mockups/define.tsx
+var KIND_PATTERN2 = /^[a-z][a-z0-9_-]{0,31}$/;
+function defineMockup(definition) {
+  if (!definition || typeof definition.kind !== "string" || !KIND_PATTERN2.test(definition.kind)) {
+    throw new TypeError(`defineMockup: invalid kind "${String(definition?.kind)}" (use a-z, 0-9, - and _)`);
+  }
+  if (typeof definition.render !== "function") throw new TypeError(`defineMockup("${definition.kind}"): render is required`);
+  if (definition.match !== void 0 && typeof definition.match !== "function") throw new TypeError(`defineMockup("${definition.kind}"): match must be a function`);
+  return Object.freeze({ ...definition });
+}
+function createStoreMockups(definitions, options = {}) {
+  const base = options.base ?? "builtin";
+  const registry = base === "builtin" ? createMockupRegistry(BUILTIN_MOCKUPS) : base === "none" ? createMockupRegistry() : base.extend();
+  const seen = /* @__PURE__ */ new Set();
+  for (const d of definitions) {
+    const def = defineMockup(d);
+    if (seen.has(def.kind)) throw new TypeError(`createStoreMockups: kind "${def.kind}" is defined twice`);
+    seen.add(def.kind);
+    registry.register(def.kind, {
+      component: def.render,
+      ...def.data ? { fromProduct: def.data } : null,
+      ...def.describe ? { describe: def.describe } : null
+    });
+  }
+  const matchers = definitions.filter((d) => typeof d.match === "function");
+  const resolveKind = (product, guess) => {
+    for (const d of matchers) if (d.match(product, guess)) return d.kind;
+    return guess;
+  };
+  const out = { registry, resolveKind, kinds: [...seen] };
+  if (options.labels) out.labels = options.labels;
+  return out;
+}
+
+Object.defineProperty(exports, "BUILTIN_MOCKUP_KINDS", {
+  enumerable: true,
+  get: function () { return mockup.BUILTIN_MOCKUP_KINDS; }
+});
+Object.defineProperty(exports, "DEFAULT_MOCKUP_KIND_RULES", {
+  enumerable: true,
+  get: function () { return mockup.DEFAULT_MOCKUP_KIND_RULES; }
+});
+Object.defineProperty(exports, "MOCKUP_KIND_ATTRIBUTES", {
+  enumerable: true,
+  get: function () { return mockup.MOCKUP_KIND_ATTRIBUTES; }
+});
+Object.defineProperty(exports, "MOCKUP_TEXT_LIMITS", {
+  enumerable: true,
+  get: function () { return mockup.MOCKUP_TEXT_LIMITS; }
+});
+Object.defineProperty(exports, "cleanMockupText", {
+  enumerable: true,
+  get: function () { return mockup.cleanMockupText; }
+});
+Object.defineProperty(exports, "genericMockupData", {
+  enumerable: true,
+  get: function () { return mockup.genericMockupData; }
+});
+Object.defineProperty(exports, "mockupDataFromProduct", {
+  enumerable: true,
+  get: function () { return mockup.mockupDataFromProduct; }
+});
+Object.defineProperty(exports, "mockupMonogram", {
+  enumerable: true,
+  get: function () { return mockup.mockupMonogram; }
+});
+Object.defineProperty(exports, "partMockupData", {
+  enumerable: true,
+  get: function () { return mockup.partMockupData; }
+});
+Object.defineProperty(exports, "resolveMockupKind", {
+  enumerable: true,
+  get: function () { return mockup.resolveMockupKind; }
+});
+Object.defineProperty(exports, "supplementMockupData", {
+  enumerable: true,
+  get: function () { return mockup.supplementMockupData; }
+});
+Object.defineProperty(exports, "tireMockupData", {
+  enumerable: true,
+  get: function () { return mockup.tireMockupData; }
+});
+exports.BUILTIN_MOCKUPS = BUILTIN_MOCKUPS;
+exports.DEFAULT_MOCKUP_LABELS = DEFAULT_MOCKUP_LABELS;
+exports.GenericMockup = GenericMockup;
+exports.MOCKUP_MONO = MOCKUP_MONO;
+exports.MOCKUP_SIZE = MOCKUP_SIZE;
+exports.MOCKUP_TOKENS = MOCKUP_TOKENS;
+exports.MockupFrame = MockupFrame;
+exports.MockupProvider = MockupProvider;
+exports.MockupText = MockupText;
+exports.PartMockup = PartMockup;
+exports.ProductImage = ProductImage;
+exports.ProductMockup = ProductMockup;
+exports.SupplementMockup = SupplementMockup;
+exports.TireMockup = TireMockup;
+exports.createMockupRegistry = createMockupRegistry;
+exports.createStoreMockups = createStoreMockups;
+exports.defaultMockupRegistry = defaultMockupRegistry;
+exports.defineMockup = defineMockup;
+exports.describeMockup = describeMockup;
+exports.fitMockupFontSize = fitMockupFontSize;
+exports.mockupWordMax = mockupWordMax;
+exports.registerMockup = registerMockup;
+exports.tone = tone;
+exports.useMockupConfig = useMockupConfig;
+exports.wrapMockupText = wrapMockupText;
+//# sourceMappingURL=mockups.cjs.map
+//# sourceMappingURL=mockups.cjs.map