@shopify/shop-minis-react 0.0.18 → 0.0.20

package/dist/shop-minis-react/node_modules/.pnpm/thumbhash@0.1.1/node_modules/thumbhash/thumbhash.js

@@ -0,0 +1,145 @@
+function W(t) {
+  let { PI: r, min: p, max: l, cos: u, round: c } = Math, _ = t[0] | t[1] << 8 | t[2] << 16, n = t[3] | t[4] << 8, s = (_ & 63) / 63, y = (_ >> 6 & 63) / 31.5 - 1, i = (_ >> 12 & 63) / 31.5 - 1, a = (_ >> 18 & 31) / 31, o = _ >> 23, v = (n >> 3 & 63) / 63, z = (n >> 9 & 63) / 63, G = n >> 15, B = l(3, G ? o ? 5 : 7 : n & 7), A = l(3, G ? n & 7 : o ? 5 : 7), E = o ? (t[5] & 15) / 15 : 1, F = (t[5] >> 4) / 15, J = o ? 6 : 5, I = 0, j = (L, x, R) => {
+    let m = [];
+    for (let b = 0; b < x; b++)
+      for (let g = b ? 0 : 1; g * x < L * (x - b); g++)
+        m.push(((t[J + (I >> 1)] >> ((I++ & 1) << 2) & 15) / 7.5 - 1) * R);
+    return m;
+  }, K = j(B, A, a), N = j(3, 3, v * 1.25), O = j(3, 3, z * 1.25), Q = o && j(5, 5, F), C = X(t), H = c(C > 1 ? 32 : 32 * C), U = c(C > 1 ? 32 / C : 32), q = new Uint8Array(H * U * 4), w = [], D = [];
+  for (let L = 0, x = 0; L < U; L++)
+    for (let R = 0; R < H; R++, x += 4) {
+      let m = s, b = y, g = i, M = E;
+      for (let e = 0, f = l(B, o ? 5 : 3); e < f; e++)
+        w[e] = u(r / H * (R + 0.5) * e);
+      for (let e = 0, f = l(A, o ? 5 : 3); e < f; e++)
+        D[e] = u(r / U * (L + 0.5) * e);
+      for (let e = 0, f = 0; e < A; e++)
+        for (let d = e ? 0 : 1, T = D[e] * 2; d * A < B * (A - e); d++, f++)
+          m += K[f] * w[d] * T;
+      for (let e = 0, f = 0; e < 3; e++)
+        for (let d = e ? 0 : 1, T = D[e] * 2; d < 3 - e; d++, f++) {
+          let k = w[d] * T;
+          b += N[f] * k, g += O[f] * k;
+        }
+      if (o)
+        for (let e = 0, f = 0; e < 5; e++)
+          for (let d = e ? 0 : 1, T = D[e] * 2; d < 5 - e; d++, f++)
+            M += Q[f] * w[d] * T;
+      let P = m - 2 / 3 * b, S = (3 * m - P + g) / 2, V = S - g;
+      q[x] = l(0, 255 * p(1, S)), q[x + 1] = l(0, 255 * p(1, V)), q[x + 2] = l(0, 255 * p(1, P)), q[x + 3] = l(0, 255 * p(1, M));
+    }
+  return { w: H, h: U, rgba: q };
+}
+function X(t) {
+  let r = t[3], p = t[2] & 128, l = t[4] & 128, u = l ? p ? 5 : 7 : r & 7, c = l ? r & 7 : p ? 5 : 7;
+  return u / c;
+}
+function Y(t, r, p) {
+  let l = t * 4 + 1, u = 6 + r * (5 + l), c = [
+    137,
+    80,
+    78,
+    71,
+    13,
+    10,
+    26,
+    10,
+    0,
+    0,
+    0,
+    13,
+    73,
+    72,
+    68,
+    82,
+    0,
+    0,
+    t >> 8,
+    t & 255,
+    0,
+    0,
+    r >> 8,
+    r & 255,
+    8,
+    6,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    u >>> 24,
+    u >> 16 & 255,
+    u >> 8 & 255,
+    u & 255,
+    73,
+    68,
+    65,
+    84,
+    120,
+    1
+  ], _ = [
+    0,
+    498536548,
+    997073096,
+    651767980,
+    1994146192,
+    1802195444,
+    1303535960,
+    1342533948,
+    -306674912,
+    -267414716,
+    -690576408,
+    -882789492,
+    -1687895376,
+    -2032938284,
+    -1609899400,
+    -1111625188
+  ], n = 1, s = 0;
+  for (let y = 0, i = 0, a = l - 1; y < r; y++, a += l - 1)
+    for (c.push(y + 1 < r ? 0 : 1, l & 255, l >> 8, ~l & 255, l >> 8 ^ 255, 0), s = (s + n) % 65521; i < a; i++) {
+      let o = p[i] & 255;
+      c.push(o), n = (n + o) % 65521, s = (s + n) % 65521;
+    }
+  c.push(
+    s >> 8,
+    s & 255,
+    n >> 8,
+    n & 255,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    73,
+    69,
+    78,
+    68,
+    174,
+    66,
+    96,
+    130
+  );
+  for (let [y, i] of [[12, 29], [37, 41 + u]]) {
+    let a = -1;
+    for (let o = y; o < i; o++)
+      a ^= c[o], a = a >>> 4 ^ _[a & 15], a = a >>> 4 ^ _[a & 15];
+    a = ~a, c[i++] = a >>> 24, c[i++] = a >> 16 & 255, c[i++] = a >> 8 & 255, c[i++] = a & 255;
+  }
+  return "data:image/png;base64," + btoa(String.fromCharCode(...c));
+}
+function Z(t) {
+  let r = W(t);
+  return Y(r.w, r.h, r.rgba);
+}
+export {
+  Y as rgbaToDataURL,
+  X as thumbHashToApproximateAspectRatio,
+  Z as thumbHashToDataURL,
+  W as thumbHashToRGBA
+};
+//# sourceMappingURL=thumbhash.js.map

package/dist/shop-minis-react/node_modules/.pnpm/thumbhash@0.1.1/node_modules/thumbhash/thumbhash.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"thumbhash.js","sources":["../../../../../../../node_modules/.pnpm/thumbhash@0.1.1/node_modules/thumbhash/thumbhash.js"],"sourcesContent":["/**\n * Encodes an RGBA image to a ThumbHash. RGB should not be premultiplied by A.\n *\n * @param w The width of the input image. Must be ≤100px.\n * @param h The height of the input image. Must be ≤100px.\n * @param rgba The pixels in the input image, row-by-row. Must have w*h*4 elements.\n * @returns The ThumbHash as a Uint8Array.\n */\nexport function rgbaToThumbHash(w, h, rgba) {\n  // Encoding an image larger than 100x100 is slow with no benefit\n  if (w > 100 || h > 100) throw new Error(`${w}x${h} doesn't fit in 100x100`)\n  let { PI, round, max, cos, abs } = Math\n\n  // Determine the average color\n  let avg_r = 0, avg_g = 0, avg_b = 0, avg_a = 0\n  for (let i = 0, j = 0; i < w * h; i++, j += 4) {\n    let alpha = rgba[j + 3] / 255\n    avg_r += alpha / 255 * rgba[j]\n    avg_g += alpha / 255 * rgba[j + 1]\n    avg_b += alpha / 255 * rgba[j + 2]\n    avg_a += alpha\n  }\n  if (avg_a) {\n    avg_r /= avg_a\n    avg_g /= avg_a\n    avg_b /= avg_a\n  }\n\n  let hasAlpha = avg_a < w * h\n  let l_limit = hasAlpha ? 5 : 7 // Use fewer luminance bits if there's alpha\n  let lx = max(1, round(l_limit * w / max(w, h)))\n  let ly = max(1, round(l_limit * h / max(w, h)))\n  let l = [] // luminance\n  let p = [] // yellow - blue\n  let q = [] // red - green\n  let a = [] // alpha\n\n  // Convert the image from RGBA to LPQA (composite atop the average color)\n  for (let i = 0, j = 0; i < w * h; i++, j += 4) {\n    let alpha = rgba[j + 3] / 255\n    let r = avg_r * (1 - alpha) + alpha / 255 * rgba[j]\n    let g = avg_g * (1 - alpha) + alpha / 255 * rgba[j + 1]\n    let b = avg_b * (1 - alpha) + alpha / 255 * rgba[j + 2]\n    l[i] = (r + g + b) / 3\n    p[i] = (r + g) / 2 - b\n    q[i] = r - g\n    a[i] = alpha\n  }\n\n  // Encode using the DCT into DC (constant) and normalized AC (varying) terms\n  let encodeChannel = (channel, nx, ny) => {\n    let dc = 0, ac = [], scale = 0, fx = []\n    for (let cy = 0; cy < ny; cy++) {\n      for (let cx = 0; cx * ny < nx * (ny - cy); cx++) {\n        let f = 0\n        for (let x = 0; x < w; x++)\n          fx[x] = cos(PI / w * cx * (x + 0.5))\n        for (let y = 0; y < h; y++)\n          for (let x = 0, fy = cos(PI / h * cy * (y + 0.5)); x < w; x++)\n            f += channel[x + y * w] * fx[x] * fy\n        f /= w * h\n        if (cx || cy) {\n          ac.push(f)\n          scale = max(scale, abs(f))\n        } else {\n          dc = f\n        }\n      }\n    }\n    if (scale)\n      for (let i = 0; i < ac.length; i++)\n        ac[i] = 0.5 + 0.5 / scale * ac[i]\n    return [dc, ac, scale]\n  }\n  let [l_dc, l_ac, l_scale] = encodeChannel(l, max(3, lx), max(3, ly))\n  let [p_dc, p_ac, p_scale] = encodeChannel(p, 3, 3)\n  let [q_dc, q_ac, q_scale] = encodeChannel(q, 3, 3)\n  let [a_dc, a_ac, a_scale] = hasAlpha ? encodeChannel(a, 5, 5) : []\n\n  // Write the constants\n  let isLandscape = w > h\n  let header24 = round(63 * l_dc) | (round(31.5 + 31.5 * p_dc) << 6) | (round(31.5 + 31.5 * q_dc) << 12) | (round(31 * l_scale) << 18) | (hasAlpha << 23)\n  let header16 = (isLandscape ? ly : lx) | (round(63 * p_scale) << 3) | (round(63 * q_scale) << 9) | (isLandscape << 15)\n  let hash = [header24 & 255, (header24 >> 8) & 255, header24 >> 16, header16 & 255, header16 >> 8]\n  let ac_start = hasAlpha ? 6 : 5\n  let ac_index = 0\n  if (hasAlpha) hash.push(round(15 * a_dc) | (round(15 * a_scale) << 4))\n\n  // Write the varying factors\n  for (let ac of hasAlpha ? [l_ac, p_ac, q_ac, a_ac] : [l_ac, p_ac, q_ac])\n    for (let f of ac)\n      hash[ac_start + (ac_index >> 1)] |= round(15 * f) << ((ac_index++ & 1) << 2)\n  return new Uint8Array(hash)\n}\n\n/**\n * Decodes a ThumbHash to an RGBA image. RGB is not be premultiplied by A.\n *\n * @param hash The bytes of the ThumbHash.\n * @returns The width, height, and pixels of the rendered placeholder image.\n */\nexport function thumbHashToRGBA(hash) {\n  let { PI, min, max, cos, round } = Math\n\n  // Read the constants\n  let header24 = hash[0] | (hash[1] << 8) | (hash[2] << 16)\n  let header16 = hash[3] | (hash[4] << 8)\n  let l_dc = (header24 & 63) / 63\n  let p_dc = ((header24 >> 6) & 63) / 31.5 - 1\n  let q_dc = ((header24 >> 12) & 63) / 31.5 - 1\n  let l_scale = ((header24 >> 18) & 31) / 31\n  let hasAlpha = header24 >> 23\n  let p_scale = ((header16 >> 3) & 63) / 63\n  let q_scale = ((header16 >> 9) & 63) / 63\n  let isLandscape = header16 >> 15\n  let lx = max(3, isLandscape ? hasAlpha ? 5 : 7 : header16 & 7)\n  let ly = max(3, isLandscape ? header16 & 7 : hasAlpha ? 5 : 7)\n  let a_dc = hasAlpha ? (hash[5] & 15) / 15 : 1\n  let a_scale = (hash[5] >> 4) / 15\n\n  // Read the varying factors (boost saturation by 1.25x to compensate for quantization)\n  let ac_start = hasAlpha ? 6 : 5\n  let ac_index = 0\n  let decodeChannel = (nx, ny, scale) => {\n    let ac = []\n    for (let cy = 0; cy < ny; cy++)\n      for (let cx = cy ? 0 : 1; cx * ny < nx * (ny - cy); cx++)\n        ac.push((((hash[ac_start + (ac_index >> 1)] >> ((ac_index++ & 1) << 2)) & 15) / 7.5 - 1) * scale)\n    return ac\n  }\n  let l_ac = decodeChannel(lx, ly, l_scale)\n  let p_ac = decodeChannel(3, 3, p_scale * 1.25)\n  let q_ac = decodeChannel(3, 3, q_scale * 1.25)\n  let a_ac = hasAlpha && decodeChannel(5, 5, a_scale)\n\n  // Decode using the DCT into RGB\n  let ratio = thumbHashToApproximateAspectRatio(hash)\n  let w = round(ratio > 1 ? 32 : 32 * ratio)\n  let h = round(ratio > 1 ? 32 / ratio : 32)\n  let rgba = new Uint8Array(w * h * 4), fx = [], fy = []\n  for (let y = 0, i = 0; y < h; y++) {\n    for (let x = 0; x < w; x++, i += 4) {\n      let l = l_dc, p = p_dc, q = q_dc, a = a_dc\n\n      // Precompute the coefficients\n      for (let cx = 0, n = max(lx, hasAlpha ? 5 : 3); cx < n; cx++)\n        fx[cx] = cos(PI / w * (x + 0.5) * cx)\n      for (let cy = 0, n = max(ly, hasAlpha ? 5 : 3); cy < n; cy++)\n        fy[cy] = cos(PI / h * (y + 0.5) * cy)\n\n      // Decode L\n      for (let cy = 0, j = 0; cy < ly; cy++)\n        for (let cx = cy ? 0 : 1, fy2 = fy[cy] * 2; cx * ly < lx * (ly - cy); cx++, j++)\n          l += l_ac[j] * fx[cx] * fy2\n\n      // Decode P and Q\n      for (let cy = 0, j = 0; cy < 3; cy++) {\n        for (let cx = cy ? 0 : 1, fy2 = fy[cy] * 2; cx < 3 - cy; cx++, j++) {\n          let f = fx[cx] * fy2\n          p += p_ac[j] * f\n          q += q_ac[j] * f\n        }\n      }\n\n      // Decode A\n      if (hasAlpha)\n        for (let cy = 0, j = 0; cy < 5; cy++)\n          for (let cx = cy ? 0 : 1, fy2 = fy[cy] * 2; cx < 5 - cy; cx++, j++)\n            a += a_ac[j] * fx[cx] * fy2\n\n      // Convert to RGB\n      let b = l - 2 / 3 * p\n      let r = (3 * l - b + q) / 2\n      let g = r - q\n      rgba[i] = max(0, 255 * min(1, r))\n      rgba[i + 1] = max(0, 255 * min(1, g))\n      rgba[i + 2] = max(0, 255 * min(1, b))\n      rgba[i + 3] = max(0, 255 * min(1, a))\n    }\n  }\n  return { w, h, rgba }\n}\n\n/**\n * Extracts the average color from a ThumbHash. RGB is not be premultiplied by A.\n *\n * @param hash The bytes of the ThumbHash.\n * @returns The RGBA values for the average color. Each value ranges from 0 to 1.\n */\nexport function thumbHashToAverageRGBA(hash) {\n  let { min, max } = Math\n  let header = hash[0] | (hash[1] << 8) | (hash[2] << 16)\n  let l = (header & 63) / 63\n  let p = ((header >> 6) & 63) / 31.5 - 1\n  let q = ((header >> 12) & 63) / 31.5 - 1\n  let hasAlpha = header >> 23\n  let a = hasAlpha ? (hash[5] & 15) / 15 : 1\n  let b = l - 2 / 3 * p\n  let r = (3 * l - b + q) / 2\n  let g = r - q\n  return {\n    r: max(0, min(1, r)),\n    g: max(0, min(1, g)),\n    b: max(0, min(1, b)),\n    a\n  }\n}\n\n/**\n * Extracts the approximate aspect ratio of the original image.\n *\n * @param hash The bytes of the ThumbHash.\n * @returns The approximate aspect ratio (i.e. width / height).\n */\nexport function thumbHashToApproximateAspectRatio(hash) {\n  let header = hash[3]\n  let hasAlpha = hash[2] & 0x80\n  let isLandscape = hash[4] & 0x80\n  let lx = isLandscape ? hasAlpha ? 5 : 7 : header & 7\n  let ly = isLandscape ? header & 7 : hasAlpha ? 5 : 7\n  return lx / ly\n}\n\n/**\n * Encodes an RGBA image to a PNG data URL. RGB should not be premultiplied by\n * A. This is optimized for speed and simplicity and does not optimize for size\n * at all. This doesn't do any compression (all values are stored uncompressed).\n *\n * @param w The width of the input image. Must be ≤100px.\n * @param h The height of the input image. Must be ≤100px.\n * @param rgba The pixels in the input image, row-by-row. Must have w*h*4 elements.\n * @returns A data URL containing a PNG for the input image.\n */\nexport function rgbaToDataURL(w, h, rgba) {\n  let row = w * 4 + 1\n  let idat = 6 + h * (5 + row)\n  let bytes = [\n    137, 80, 78, 71, 13, 10, 26, 10, 0, 0, 0, 13, 73, 72, 68, 82, 0, 0,\n    w >> 8, w & 255, 0, 0, h >> 8, h & 255, 8, 6, 0, 0, 0, 0, 0, 0, 0,\n    idat >>> 24, (idat >> 16) & 255, (idat >> 8) & 255, idat & 255,\n    73, 68, 65, 84, 120, 1\n  ]\n  let table = [\n    0, 498536548, 997073096, 651767980, 1994146192, 1802195444, 1303535960,\n    1342533948, -306674912, -267414716, -690576408, -882789492, -1687895376,\n    -2032938284, -1609899400, -1111625188\n  ]\n  let a = 1, b = 0\n  for (let y = 0, i = 0, end = row - 1; y < h; y++, end += row - 1) {\n    bytes.push(y + 1 < h ? 0 : 1, row & 255, row >> 8, ~row & 255, (row >> 8) ^ 255, 0)\n    for (b = (b + a) % 65521; i < end; i++) {\n      let u = rgba[i] & 255\n      bytes.push(u)\n      a = (a + u) % 65521\n      b = (b + a) % 65521\n    }\n  }\n  bytes.push(\n    b >> 8, b & 255, a >> 8, a & 255, 0, 0, 0, 0,\n    0, 0, 0, 0, 73, 69, 78, 68, 174, 66, 96, 130\n  )\n  for (let [start, end] of [[12, 29], [37, 41 + idat]]) {\n    let c = ~0\n    for (let i = start; i < end; i++) {\n      c ^= bytes[i]\n      c = (c >>> 4) ^ table[c & 15]\n      c = (c >>> 4) ^ table[c & 15]\n    }\n    c = ~c\n    bytes[end++] = c >>> 24\n    bytes[end++] = (c >> 16) & 255\n    bytes[end++] = (c >> 8) & 255\n    bytes[end++] = c & 255\n  }\n  return 'data:image/png;base64,' + btoa(String.fromCharCode(...bytes))\n}\n\n/**\n * Decodes a ThumbHash to a PNG data URL. This is a convenience function that\n * just calls \"thumbHashToRGBA\" followed by \"rgbaToDataURL\".\n *\n * @param hash The bytes of the ThumbHash.\n * @returns A data URL containing a PNG for the rendered ThumbHash.\n */\nexport function thumbHashToDataURL(hash) {\n  let image = thumbHashToRGBA(hash)\n  return rgbaToDataURL(image.w, image.h, image.rgba)\n}\n"],"names":["thumbHashToRGBA","hash","PI","min","max","cos","round","header24","header16","l_dc","p_dc","q_dc","l_scale","hasAlpha","p_scale","q_scale","isLandscape","lx","ly","a_dc","a_scale","ac_start","ac_index","decodeChannel","nx","ny","scale","ac","cy","cx","l_ac","p_ac","q_ac","a_ac","ratio","thumbHashToApproximateAspectRatio","w","h","rgba","fx","fy","y","i","x","l","p","q","a","n","j","fy2","f","b","r","g","header","rgbaToDataURL","row","idat","bytes","table","end","u","start","c","thumbHashToDataURL","image"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/shop-minis-react.css

@@ -0,0 +1 @@
+.no-scrollbars{scrollbar-width:thin;scrollbar-color:transparent transparent;&::-webkit-scrollbar{width:1px}&::-webkit-scrollbar-track{background:transparent}&::-webkit-scrollbar-thumb{background-color:transparent}}.no-scrollbars::-webkit-scrollbar{display:none}

package/dist/types/index.js

@@ -0,0 +1,10 @@
+const a = "data-navigation-type", n = {
+  forward: "forward",
+  backward: "backward",
+  none: "none"
+};
+export {
+  a as DATA_NAVIGATION_TYPE_ATTRIBUTE,
+  n as NAVIGATION_TYPES
+};
+//# sourceMappingURL=index.js.map

package/dist/types/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/types/index.ts"],"sourcesContent":["export * from '@shopify/shop-minis-platform'\n\nexport interface BaseComponentProps {\n  className?: string\n  children?: React.ReactNode\n}\n\n// Theme types\nexport interface ThemeConfig {\n  colors?: {[key: string]: string}\n  spacing?: {[key: string]: string}\n  typography?: {[key: string]: string}\n}\n\n// Navigation\nexport const DATA_NAVIGATION_TYPE_ATTRIBUTE = 'data-navigation-type' as const\nexport const NAVIGATION_TYPES = {\n  forward: 'forward',\n  backward: 'backward',\n  none: 'none',\n} as const\n"],"names":["DATA_NAVIGATION_TYPE_ATTRIBUTE","NAVIGATION_TYPES"],"mappings":"AAeO,MAAMA,IAAiC,wBACjCC,IAAmB;AAAA,EAC9B,SAAS;AAAA,EACT,UAAU;AAAA,EACV,MAAM;AACR;"}

package/dist/utils/image.js

@@ -0,0 +1,15 @@
+import { toUint8Array as o } from "../shop-minis-react/node_modules/.pnpm/js-base64@3.7.7/node_modules/js-base64/base64.js";
+import { thumbHashToDataURL as a } from "../shop-minis-react/node_modules/.pnpm/thumbhash@0.1.1/node_modules/thumbhash/thumbhash.js";
+function n(r) {
+  if (r)
+    try {
+      const t = o(r);
+      return a(t);
+    } catch (t) {
+      console.warn("Failed to decode thumbhash to data URL", t);
+    }
+}
+export {
+  n as getThumbhashDataURL
+};
+//# sourceMappingURL=image.js.map

package/dist/utils/image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.js","sources":["../../src/utils/image.ts"],"sourcesContent":["import {toUint8Array} from 'js-base64'\nimport {thumbHashToDataURL} from 'thumbhash'\n\n/**\n * Converts a thumbhash string to a data URL for use as an image placeholder\n * @param thumbhash Base64 encoded thumbhash string\n * @returns Data URL that can be used as image source or undefined if conversion fails\n */\nexport function getThumbhashDataURL(thumbhash?: string): string | undefined {\n  if (!thumbhash) return\n\n  try {\n    const thumbhashArray = toUint8Array(thumbhash)\n    return thumbHashToDataURL(thumbhashArray)\n  } catch (error) {\n    console.warn('Failed to decode thumbhash to data URL', error)\n  }\n}\n"],"names":["getThumbhashDataURL","thumbhash","thumbhashArray","toUint8Array","thumbHashToDataURL","error"],"mappings":";;AAQO,SAASA,EAAoBC,GAAwC;AAC1E,MAAKA;AAED,QAAA;AACI,YAAAC,IAAiBC,EAAaF,CAAS;AAC7C,aAAOG,EAAmBF,CAAc;AAAA,aACjCG,GAAO;AACN,cAAA,KAAK,0CAA0CA,CAAK;AAAA,IAAA;AAEhE;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shopify/shop-minis-react",
   "license": "SEE LICENSE IN LICENSE.txt",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "sideEffects": false,
   "type": "module",
   "engines": {
@@ -38,33 +38,44 @@
     "typescript": ">=5.0.0"
   },
   "dependencies": {
-    "@shopify/shop-minis-platform": "0.0.3",
+    "@shopify/shop-minis-platform": "0.0.7",
     "@tailwindcss/vite": "4.1.8",
     "@types/url-parse": "1.4.9",
     "@vitejs/plugin-react": "4.5.1",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "embla-carousel-react": "8.6.0",
+    "js-base64": "^3.7.7",
     "lodash": "4.17.21",
     "lucide-react": "0.513.0",
     "motion": "12.17.3",
     "next-themes": "0.4.6",
     "radix-ui": "1.4.2",
+    "react-intersection-observer": "^9.13.1",
     "react-resizable-panels": "3.0.2",
+    "react-router": "^7.7.0",
+    "react-window": "^1.8.11",
     "sonner": "2.0.5",
     "tailwind-merge": "2.6.0",
     "tailwindcss": "4.1.8",
+    "thumbhash": "^0.1.1",
     "tw-animate-css": "1.3.4",
     "url-parse": "1.5.10",
     "vaul": "1.1.2"
   },
   "devDependencies": {
     "@shopify/generate-docs": "^0.16.6",
+    "@storybook/addon-docs": "^9.0.16",
+    "@storybook/react-vite": "^9.0.16",
     "@types/node": "^20.12.1",
     "@types/react": "^19.1.6",
     "@types/react-dom": "^19.1.2",
+    "@types/react-window": "^1.8.8",
+    "eslint": "^8.57.0",
+    "eslint-plugin-storybook": "^9.0.16",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "storybook": "^9.0.16",
     "typescript": "^5.8.3",
     "vite": "^6.3.3",
     "vite-plugin-dts": "^4.3.0"
@@ -92,6 +103,10 @@
     "build": "vite build --mode lib",
     "build:watch": "vite build --mode lib --watch",
     "type-check": "tsc --noEmit",
-    "clean": "rm -rf dist"
+    "clean": "rm -rf dist",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "lint": "eslint . --format codeframe --cache --max-warnings=0",
+    "lint:fix": "eslint . --format codeframe --cache --fix"
   }
 }

package/src/components/MinisContainer.tsx

@@ -1,7 +1,10 @@
 import React, {useEffect, useState} from 'react'
 
+import {injectMocks} from '../mocks'
 import {ImagePickerProvider} from '../providers/ImagePickerProvider'
 
+injectMocks()
+
 export function MinisContainer({children}: {children: React.ReactNode}) {
   const [isSDKReady, setIsSDKReady] = useState(false)
 
@@ -42,7 +45,7 @@ export function MinisContainer({children}: {children: React.ReactNode}) {
 
     // Cleanup
     return () => {
-      // clearInterval(pollInterval);
+      clearInterval(pollInterval)
       window.removeEventListener('message', handleSDKReady)
       document.removeEventListener('message', handleSDKReady)
     }

package/src/components/atoms/alert-dialog.tsx

@@ -0,0 +1,67 @@
+import {useState} from 'react'
+
+import {
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogCancel,
+  AlertDialogAction,
+  AlertDialog as AlertDialogPrimitive,
+} from '../ui/alert-dialog'
+
+export const AlertDialogAtom = ({
+  children,
+  title,
+  description,
+  cancelButtonText,
+  confirmationButtonText,
+  open,
+  onOpenChange,
+  onConfirmationAction,
+}: {
+  /** The trigger element that opens the alert dialog */
+  children: React.ReactNode
+  /** The title text shown in the alert dialog header */
+  title: string
+  /** The description text shown in the alert dialog body */
+  description: string
+  /** The text shown in the cancel button */
+  cancelButtonText: string
+  /** The text shown in the confirmation button */
+  confirmationButtonText: string
+  /** Whether the alert dialog is open */
+  open: boolean
+  /** Callback fired when the alert dialog open state changes */
+  onOpenChange: (open: boolean) => void
+  /** Callback fired when the confirmation button is clicked */
+  onConfirmationAction: () => void
+}) => {
+  const [isOpen, setIsOpen] = useState(open)
+
+  return (
+    <AlertDialogPrimitive
+      open={isOpen}
+      onOpenChange={open => {
+        setIsOpen(open)
+        onOpenChange(open)
+      }}
+    >
+      <AlertDialogTrigger asChild>{children}</AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          <AlertDialogDescription>{description}</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>{cancelButtonText}</AlertDialogCancel>
+          <AlertDialogAction onClick={onConfirmationAction}>
+            {confirmationButtonText}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialogPrimitive>
+  )
+}

package/src/components/atoms/list.tsx

@@ -0,0 +1,101 @@
+import {ComponentType, useCallback} from 'react'
+
+import {
+  VariableSizeList as _VariableSizeList,
+  VariableSizeListProps,
+} from 'react-window'
+
+import {cn} from '../../lib/utils'
+import '../../styles/utilities.css'
+
+import {Pagination} from './pagination'
+
+const VariableSizeList =
+  _VariableSizeList as unknown as ComponentType<VariableSizeListProps>
+
+interface Props<T = any>
+  extends Omit<
+    VariableSizeListProps<T>,
+    'children' | 'itemCount' | 'width' | 'itemSize' | 'direction'
+  > {
+  items: T[]
+  renderItem: (item: T, index: number) => React.ReactNode
+  itemSizeForRow: (index: number) => number
+  showScrollbar?: boolean
+  header?: React.ReactNode
+  headerHeight?: number
+  fetchMore?: () => void
+}
+
+export function List<T = any>({
+  items,
+  height,
+  renderItem,
+  className,
+  showScrollbar = false,
+  header,
+  headerHeight,
+  itemSizeForRow,
+  fetchMore,
+  overscanCount,
+  ...listProps
+}: Props<T>) {
+  const rowRenderer = useCallback(
+    ({index, style}: {index: number; style: React.CSSProperties}) => {
+      // prepend the header to the first row if it exists
+      if (header && index === 0) {
+        return (
+          <div style={style}>
+            {header}
+            <div style={{top: headerHeight}}>{renderItem(items[0], 0)}</div>
+          </div>
+        )
+      }
+
+      // append the pagination spinner to the last row if fetchMore exists
+      if (fetchMore && index === items.length - 1) {
+        return (
+          <div style={style}>
+            {renderItem(items[index], index)}
+            <div style={{bottom: 0}}>
+              <Pagination fetchMore={fetchMore} />
+            </div>
+          </div>
+        )
+      }
+
+      return <div style={style}>{renderItem(items[index], index)}</div>
+    },
+    [items, renderItem, header, fetchMore, headerHeight]
+  )
+
+  const getItemSize = useCallback(
+    (index: number) => {
+      // include the header height in the first row height
+      if (header && index === 0) {
+        const _headerHeight = headerHeight || 0
+        return _headerHeight + itemSizeForRow(index)
+      }
+
+      return itemSizeForRow(index)
+    },
+    [itemSizeForRow, header, headerHeight]
+  )
+
+  const classNames = cn(showScrollbar ? undefined : 'no-scrollbars', className)
+
+  return (
+    <VariableSizeList
+      className={classNames}
+      height={height}
+      direction="vertical"
+      width="100%"
+      itemCount={items.length}
+      overscanCount={overscanCount}
+      itemSize={getItemSize}
+      {...listProps}
+    >
+      {rowRenderer}
+    </VariableSizeList>
+  )
+}

package/src/components/atoms/pagination.tsx

@@ -0,0 +1,19 @@
+import {Skeleton} from '../ui/skeleton'
+
+import {TrackingPixel} from './tracking-pixel'
+
+interface Props {
+  loadingComponent?: React.ReactNode
+  isFetchingMore?: boolean
+  fetchMore: () => void
+}
+
+export function Pagination({loadingComponent, fetchMore}: Props) {
+  const loadingPlaceholder = loadingComponent ?? (
+    <Skeleton className="h-10 w-full p-8" />
+  )
+
+  return (
+    <TrackingPixel onImpression={fetchMore}>{loadingPlaceholder}</TrackingPixel>
+  )
+}

package/src/components/atoms/thumbhash-image.tsx

@@ -0,0 +1,66 @@
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+import {ImgHTMLAttributes, useCallback, useMemo, memo, useState} from 'react'
+
+import {cn} from '../../lib/utils'
+import {getThumbhashDataURL} from '../../utils/image'
+
+type ThumbhashImageProps = ImgHTMLAttributes<HTMLImageElement> & {
+  src: string
+  thumbhash: string
+  alt?: string | null
+  aspectRatio?: number | string
+}
+
+export const ThumbhashImage = memo(function ThumbhashImage(
+  props: ThumbhashImageProps
+) {
+  const {
+    src,
+    alt,
+    thumbhash,
+    onLoad,
+    className,
+    style,
+    aspectRatio = 'auto',
+    ...restProps
+  } = props
+
+  const [isLoaded, setIsLoaded] = useState(false)
+
+  const dataURL = useMemo(
+    () => getThumbhashDataURL(thumbhash ?? undefined),
+    [thumbhash]
+  )
+
+  const handleLoad = useCallback(
+    (event: React.SyntheticEvent<HTMLImageElement, Event>) => {
+      setIsLoaded(true)
+      onLoad?.(event)
+    },
+    [onLoad]
+  )
+
+  return (
+    <div
+      className={cn('relative w-full ', className)}
+      style={{
+        ...style,
+        aspectRatio,
+        backgroundImage: dataURL ? `url(${dataURL})` : undefined,
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+      }}
+    >
+      <img
+        className={cn(
+          'absolute inset-0 w-full h-full opacity-0 object-cover',
+          isLoaded && 'opacity-100'
+        )}
+        src={src}
+        alt={alt}
+        onLoad={handleLoad}
+        {...restProps}
+      />
+    </div>
+  )
+})

package/src/components/atoms/tracking-pixel.tsx

@@ -0,0 +1,40 @@
+import {useCallback} from 'react'
+
+import {InView} from 'react-intersection-observer'
+
+interface Props {
+  children: React.ReactNode
+  onImpression?: () => void
+  triggerOnce?: boolean
+  threshold?: number
+  className?: string
+}
+
+export const TrackingPixel = ({
+  children,
+  onImpression,
+  triggerOnce = false,
+  threshold,
+  className,
+}: Props) => {
+  const onChange = useCallback(
+    (inView: boolean) => {
+      if (inView) {
+        onImpression?.()
+      }
+    },
+    [onImpression]
+  )
+
+  return (
+    <InView
+      as="div"
+      onChange={onChange}
+      triggerOnce={triggerOnce}
+      className={className}
+      threshold={threshold}
+    >
+      {children}
+    </InView>
+  )
+}

package/src/components/commerce/merchant-card-skeleton.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react'
+
+import {cn} from '../../lib/utils'
+import {Skeleton} from '../ui/skeleton'
+
+interface MerchantCardSkeletonProps extends React.ComponentProps<'div'> {}
+
+function MerchantCardSkeleton({
+  className,
+  ...props
+}: MerchantCardSkeletonProps) {
+  return (
+    <div
+      className={cn(
+        'relative w-full aspect-square overflow-hidden rounded-xl border border-gray-100',
+        className
+      )}
+      {...props}
+    >
+      <div className="w-full h-2/3">
+        <Skeleton className="w-full h-full" />
+      </div>
+      <div className="mt-3 mb-3 ml-3">
+        <Skeleton className="mb-2 h-4 w-2/3" />
+        <Skeleton className="mb-2 h-5 w-1/3" />
+      </div>
+    </div>
+  )
+}
+
+export {MerchantCardSkeleton}

package/src/components/commerce/merchant-card.tsx

@@ -202,6 +202,7 @@ function MerchantCardRating({
 }
 
 export interface MerchantCardProps {
+  variant?: 'default' | 'compact'
   shop: Shop
   touchable?: boolean
 }
@@ -225,8 +226,10 @@ function MerchantCard({shop, touchable = true}: MerchantCardProps) {
   return (
     <MerchantCardRoot touchable={touchable} onPress={handlePress}>
       <MerchantCardImageContainer>
-        {/* TODO: Add featured image */}
-        <MerchantCardImage src={undefined} alt={`${name} featured image`} />
+        <MerchantCardImage
+          src={visualTheme?.featuredImages?.[0]?.url}
+          alt={`${name} featured image`}
+        />
         <MerchantCardLogo
           src={visualTheme?.logoImage?.url}
           alt={`${name} logo`}