@netlify/spark-ui 1.27.5 → 1.27.7

package/dist/components/preact/DropZone/DropZone.d.ts

@@ -1,6 +1,6 @@
 import { ComponentChildren } from 'preact';
 import { DropClient } from './drop-core';
-import { DeployedSite, TrackFn } from './useDropDeploy';
+import { DeployedSite, DeployError, TrackFn } from './useDropDeploy';
 interface Props {
     /** Content the drop layer sits on top of. The zone is invisible until you drag over it. */
     children?: ComponentChildren;
@@ -12,11 +12,18 @@ interface Props {
     claimUrl?: (siteName: string) => string;
     /** Called once the deploy is live. */
     onDeploy?: (result: DeployedSite) => void;
+    /**
+     * Called when a deploy fails, with a humanized `message` (ready to show a
+     * user — the same copy the built-in overlay uses) and the raw `reason`. Pair
+     * this with `showStatus={false}` to render your own error UI.
+     */
+    onError?: (error: DeployError) => void;
     /**
      * Render the built-in status overlay (drag tint, spinner, progress bar, error).
      * Set to `false` to suppress it entirely and keep your children visible, then
      * drive your own feedback from the `data-state` attribute on the root element.
-     * Note: in this mode you're responsible for surfacing errors yourself.
+     * Note: in this mode you're responsible for surfacing errors yourself — use
+     * `onError` to get the message.
      */
     showStatus?: boolean;
     /**
@@ -38,5 +45,5 @@ interface Props {
     analyticsId?: string;
     className?: string;
 }
-export default function DropZone({ children, apiBase, client, claimUrl, onDeploy, showStatus, onTrack, analyticsId, className, }: Props): import("preact").JSX.Element;
+export default function DropZone({ children, apiBase, client, claimUrl, onDeploy, onError, showStatus, onTrack, analyticsId, className, }: Props): import("preact").JSX.Element;
 export {};

package/dist/components/preact/DropZone/DropZone.js

@@ -1,52 +1,54 @@
 import { u as e } from "../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import { A as k, d as S, y as $ } from "../../../chunks/hooks.module.DRcxknIz.js";
-import { readFileList as E, readDataTransfer as I } from "./drop-core/readFiles.js";
-import { useDropDeploy as P } from "./useDropDeploy.js";
+import { A as k, d as $, y as E } from "../../../chunks/hooks.module.DRcxknIz.js";
+import { readFileList as I, readDataTransfer as P } from "./drop-core/readFiles.js";
+import { useDropDeploy as x } from "./useDropDeploy.js";
 import { Fragment as D } from "preact";
-import '../../../assets/DropZone.css';const x = 120, F = (n) => `https://app.netlify.com/drop/${n}`;
-function K({
+import '../../../assets/DropZone.css';const F = 120, M = (n) => `https://app.netlify.com/drop/${n}`;
+function L({
   children: n,
   apiBase: l,
   client: i,
-  claimUrl: s = F,
+  claimUrl: s = M,
   onDeploy: u,
+  onError: w,
   showStatus: f = !0,
   onTrack: d,
   analyticsId: g,
-  className: w
+  className: A
 }) {
-  const v = (r, t = {}) => d == null ? void 0 : d(r, g ? { dropzone_id: g, ...t } : t), { status: a, warning: h, busy: o, deploy: b, reset: A } = P({
+  const v = (r, t = {}) => d == null ? void 0 : d(r, g ? { dropzone_id: g, ...t } : t), { status: a, warning: h, busy: o, deploy: b, reset: C } = x({
     apiBase: l,
     client: i,
     claimUrl: s,
     onDeploy: u,
+    onError: w,
     track: v
-  }), { active: p, keepActive: C, endDrag: T } = M(), m = k(null), y = (r) => {
+  }), { active: p, keepActive: T, endDrag: _ } = O(), m = k(null), y = (r) => {
     var t;
     v("dropzone_browse_opened", { method: r }), (t = m.current) == null || t.click();
-  }, _ = f && (p || o || a.kind === "error"), R = [
+  }, R = f && (p || o || a.kind === "error"), S = [
     "n-dropzone",
     p && "is-active",
     o && "is-busy",
     !f && "is-bare",
-    w
+    A
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ e(
     "div",
     {
-      class: R,
+      class: S,
       "data-state": a.kind,
       role: "button",
       tabIndex: o ? -1 : 0,
       "aria-label": "Drop a site folder or zip here to deploy it, or press Enter to browse for files",
       "aria-busy": o,
       onDragOver: (r) => {
-        o || (r.preventDefault(), C());
+        o || (r.preventDefault(), T());
       },
       onDrop: (r) => {
-        if (r.preventDefault(), T(), o) return;
+        if (r.preventDefault(), _(), o) return;
         const t = r.dataTransfer;
-        t && b(() => I(t), "drag");
+        t && b(() => P(t), "drag");
       },
       onClick: (r) => {
         !o && r.target === r.currentTarget && y("click");
@@ -68,16 +70,16 @@ function K({
             onChange: (r) => {
               var z;
               const t = r.currentTarget;
-              (z = t.files) != null && z.length && b(() => E(t.files), "browse"), t.value = "";
+              (z = t.files) != null && z.length && b(() => I(t.files), "browse"), t.value = "";
             }
           }
         ),
-        _ && /* @__PURE__ */ e(
+        R && /* @__PURE__ */ e(
           "div",
           {
             class: "n-dropzone-overlay n-fadeIn",
             children: [
-              /* @__PURE__ */ e(O, { status: a, active: p, onReset: A }),
+              /* @__PURE__ */ e(U, { status: a, active: p, onReset: C }),
               h && a.kind !== "error" && o && /* @__PURE__ */ e("p", { class: "n-dropzone-warning", role: "status", children: h })
             ]
           },
@@ -87,15 +89,15 @@ function K({
     }
   );
 }
-function M() {
-  const [n, l] = S(!1), i = k();
-  return $(() => () => clearTimeout(i.current), []), { active: n, keepActive: () => {
-    l(!0), clearTimeout(i.current), i.current = setTimeout(() => l(!1), x);
+function O() {
+  const [n, l] = $(!1), i = k();
+  return E(() => () => clearTimeout(i.current), []), { active: n, keepActive: () => {
+    l(!0), clearTimeout(i.current), i.current = setTimeout(() => l(!1), F);
   }, endDrag: () => {
     clearTimeout(i.current), l(!1);
   } };
 }
-function O({
+function U({
   status: n,
   active: l,
   onReset: i
@@ -138,5 +140,5 @@ function c({ label: n }) {
   ] });
 }
 export {
-  K as default
+  L as default
 };

package/dist/components/preact/DropZone/drop-core/errors.d.ts

@@ -1,3 +1,13 @@
+/**
+ * Thrown when the user drops or picks a single loose file that Drop can't turn
+ * into a site on its own — anything that isn't a `.zip` (a site archive) or an
+ * HTML page (served as index.html). A folder, multiple files, a zip, or a lone
+ * HTML file are all fine; any other single file is rejected rather than
+ * deployed as a one-asset site (matches react-ui).
+ */
+export declare class UnsupportedDropError extends Error {
+    constructor();
+}
 /**
  * Turn a raw deploy failure into copy a non-technical user can act on.
  * The original message is still tracked via analytics — this is only for display.

package/dist/components/preact/DropZone/drop-core/errors.js

@@ -1,5 +1,12 @@
+class n extends Error {
+  constructor() {
+    super("unsupported single file"), this.name = "UnsupportedDropError";
+  }
+}
 function a(e) {
   if (!(e instanceof Error)) return "Something went wrong. Please try again.";
+  if (e instanceof n)
+    return "To deploy, drop a folder or a .zip file — or a single HTML page.";
   if (e.message === "Deploy did not become ready in time")
     return "Your site is taking longer than expected to go live. Please try again in a moment.";
   if (e instanceof TypeError)
@@ -25,5 +32,6 @@ function a(e) {
   }
 }
 export {
+  n as UnsupportedDropError,
   a as humanizeDropError
 };

package/dist/components/preact/DropZone/drop-core/index.js

@@ -1,16 +1,17 @@
-import { getDigest as r } from "./digest.js";
-import { getSingleNonIndexHtmlFileName as n, hasMultipleHtmlFilesWithoutIndex as l, readDataTransfer as i, readFileList as m, renameSingleNonIndexHtmlToIndex as a } from "./readFiles.js";
+import { getDigest as o } from "./digest.js";
+import { getSingleNonIndexHtmlFileName as n, hasMultipleHtmlFilesWithoutIndex as l, readDataTransfer as i, readFileList as m, renameSingleNonIndexHtmlToIndex as p } from "./readFiles.js";
 import { AnonymousDropClient as x } from "./client.js";
 import { deployFiles as s } from "./deploy.js";
-import { humanizeDropError as g } from "./errors.js";
+import { UnsupportedDropError as g, humanizeDropError as u } from "./errors.js";
 export {
   x as AnonymousDropClient,
+  g as UnsupportedDropError,
   s as deployFiles,
-  r as getDigest,
+  o as getDigest,
   n as getSingleNonIndexHtmlFileName,
   l as hasMultipleHtmlFilesWithoutIndex,
-  g as humanizeDropError,
+  u as humanizeDropError,
   i as readDataTransfer,
   m as readFileList,
-  a as renameSingleNonIndexHtmlToIndex
+  p as renameSingleNonIndexHtmlToIndex
 };

package/dist/components/preact/DropZone/drop-core/readFiles.js

@@ -1,18 +1,19 @@
-import { g as I } from "../../../../chunks/_commonjsHelpers.C6fGbg64.js";
-var L = { exports: {} }, F = L.exports, M;
-function z() {
-  return M || (M = 1, function(g, _) {
-    (function(m, h) {
-      g.exports = h();
-    })(typeof self < "u" ? self : F, function() {
+import { g as P } from "../../../../chunks/_commonjsHelpers.C6fGbg64.js";
+import { UnsupportedDropError as U } from "./errors.js";
+var L = { exports: {} }, G = L.exports, D;
+function J() {
+  return D || (D = 1, function(y, m) {
+    (function(_, h) {
+      y.exports = h();
+    })(typeof self < "u" ? self : G, function() {
       return (
         /******/
-        function(y) {
-          var m = {};
+        function(w) {
+          var _ = {};
           function h(v) {
-            if (m[v])
-              return m[v].exports;
-            var s = m[v] = {
+            if (_[v])
+              return _[v].exports;
+            var s = _[v] = {
               /******/
               i: v,
               /******/
@@ -21,16 +22,16 @@ function z() {
               exports: {}
               /******/
             };
-            return y[v].call(s.exports, s, s.exports, h), s.l = !0, s.exports;
+            return w[v].call(s.exports, s, s.exports, h), s.l = !0, s.exports;
           }
-          return h.m = y, h.c = m, h.d = function(v, s, w) {
+          return h.m = w, h.c = _, h.d = function(v, s, g) {
             h.o(v, s) || Object.defineProperty(v, s, {
               /******/
               configurable: !1,
               /******/
               enumerable: !0,
               /******/
-              get: w
+              get: g
               /******/
             });
           }, h.n = function(v) {
@@ -52,12 +53,12 @@ function z() {
         }([
           /* 0 */
           /***/
-          function(y, m, h) {
+          function(w, _, h) {
             function v(e, o) {
               if (!(e instanceof o))
                 throw new TypeError("Cannot call a class as a function");
             }
-            var s = h(5), w = h(1), u = w.toHex, f = w.ceilHeapSize, l = h(6), d = function(e) {
+            var s = h(5), g = h(1), u = g.toHex, f = g.ceilHeapSize, l = h(6), d = function(e) {
               for (e += 9; e % 64 > 0; e += 1)
                 ;
               return e;
@@ -148,43 +149,43 @@ function z() {
                 return u(this.rawEnd().buffer);
               }, e;
             }();
-            y.exports = c, y.exports._core = s;
+            w.exports = c, w.exports._core = s;
           },
           /* 1 */
           /***/
-          function(y, m) {
+          function(w, _) {
             for (var h = new Array(256), v = 0; v < 256; v++)
               h[v] = (v < 16 ? "0" : "") + v.toString(16);
-            y.exports.toHex = function(s) {
-              for (var w = new Uint8Array(s), u = new Array(s.byteLength), f = 0; f < u.length; f++)
-                u[f] = h[w[f]];
+            w.exports.toHex = function(s) {
+              for (var g = new Uint8Array(s), u = new Array(s.byteLength), f = 0; f < u.length; f++)
+                u[f] = h[g[f]];
               return u.join("");
-            }, y.exports.ceilHeapSize = function(s) {
-              var w = 0;
+            }, w.exports.ceilHeapSize = function(s) {
+              var g = 0;
               if (s <= 65536) return 65536;
               if (s < 16777216)
-                for (w = 1; w < s; w = w << 1)
+                for (g = 1; g < s; g = g << 1)
                   ;
               else
-                for (w = 16777216; w < s; w += 16777216)
+                for (g = 16777216; g < s; g += 16777216)
                   ;
-              return w;
-            }, y.exports.isDedicatedWorkerScope = function(s) {
-              var w = "WorkerGlobalScope" in s && s instanceof s.WorkerGlobalScope, u = "SharedWorkerGlobalScope" in s && s instanceof s.SharedWorkerGlobalScope, f = "ServiceWorkerGlobalScope" in s && s instanceof s.ServiceWorkerGlobalScope;
-              return w && !u && !f;
+              return g;
+            }, w.exports.isDedicatedWorkerScope = function(s) {
+              var g = "WorkerGlobalScope" in s && s instanceof s.WorkerGlobalScope, u = "SharedWorkerGlobalScope" in s && s instanceof s.SharedWorkerGlobalScope, f = "ServiceWorkerGlobalScope" in s && s instanceof s.ServiceWorkerGlobalScope;
+              return g && !u && !f;
             };
           },
           /* 2 */
           /***/
-          function(y, m, h) {
-            y.exports = function() {
+          function(w, _, h) {
+            w.exports = function() {
               var v = h(0), s = function(f, l, d) {
                 try {
                   return d(null, f.digest(l));
                 } catch (i) {
                   return d(i);
                 }
-              }, w = function(f, l, d, i, r) {
+              }, g = function(f, l, d, i, r) {
                 var t = new self.FileReader();
                 t.onloadend = function() {
                   if (t.error)
@@ -197,7 +198,7 @@ function z() {
                     r(o);
                     return;
                   }
-                  l < i.size ? w(f, l, d, i, r) : r(null, f.end());
+                  l < i.size ? g(f, l, d, i, r) : r(null, f.end());
                 }, t.readAsArrayBuffer(i.slice(l, l + d));
               }, u = !0;
               return self.onmessage = function(f) {
@@ -209,7 +210,7 @@ function z() {
                     var c = function(e, o) {
                       e ? self.postMessage({ id: i, error: e.name }) : self.postMessage({ id: i, hash: o });
                     };
-                    l && s(t, l, c), d && w(t, 0, r, d, c);
+                    l && s(t, l, c), d && g(t, 0, r, d, c);
                   }
                 }
               }, function() {
@@ -219,8 +220,8 @@ function z() {
           },
           /* 3 */
           /***/
-          function(y, m, h) {
-            var v = h(4), s = h(0), w = h(7), u = h(2), f = h(1), l = f.isDedicatedWorkerScope, d = typeof self < "u" && l(self);
+          function(w, _, h) {
+            var v = h(4), s = h(0), g = h(7), u = h(2), f = h(1), l = f.isDedicatedWorkerScope, d = typeof self < "u" && l(self);
             s.disableWorkerBehaviour = d ? u() : function() {
             }, s.createWorker = function() {
               var i = v(
@@ -230,11 +231,11 @@ function z() {
               return i.terminate = function() {
                 URL.revokeObjectURL(i.objectURL), r.call(i);
               }, i;
-            }, s.createHash = w, y.exports = s;
+            }, s.createHash = g, w.exports = s;
           },
           /* 4 */
           /***/
-          function(y, m, h) {
+          function(w, _, h) {
             function v(i) {
               var r = {};
               function t(e) {
@@ -286,7 +287,7 @@ function z() {
               var c = t(t.s = ENTRY_MODULE);
               return c.default || c;
             }
-            var s = "[\\.|\\-|\\+|\\w|/|@]+", w = "\\((/\\*.*?\\*/)?s?.*?(" + s + ").*?\\)";
+            var s = "[\\.|\\-|\\+|\\w|/|@]+", g = "\\((/\\*.*?\\*/)?s?.*?(" + s + ").*?\\)";
             function u(i) {
               return (i + "").replace(/[.?*+^$[\]\\(){}|-]/g, "\\$&");
             }
@@ -295,9 +296,9 @@ function z() {
               c[t] = [];
               var e = r.toString(), o = e.match(/^function\s?\(\w+,\s*\w+,\s*(\w+)\)/);
               if (!o) return c;
-              for (var n = o[1], p = new RegExp("(\\\\n|\\W)" + u(n) + w, "g"), a; a = p.exec(e); )
+              for (var n = o[1], p = new RegExp("(\\\\n|\\W)" + u(n) + g, "g"), a; a = p.exec(e); )
                 a[3] !== "dll-reference" && c[t].push(a[3]);
-              for (p = new RegExp("\\(" + u(n) + '\\("(dll-reference\\s(' + s + '))"\\)\\)' + w, "g"); a = p.exec(e); )
+              for (p = new RegExp("\\(" + u(n) + '\\("(dll-reference\\s(' + s + '))"\\)\\)' + g, "g"); a = p.exec(e); )
                 i[a[2]] || (c[t].push(a[1]), i[a[2]] = h(a[1]).m), c[a[2]] = c[a[2]] || [], c[a[2]].push(a[4]);
               return c;
             }
@@ -325,7 +326,7 @@ function z() {
                 }
               return c;
             }
-            y.exports = function(i, r) {
+            w.exports = function(i, r) {
               r = r || {};
               var t = {
                 main: h.m
@@ -351,9 +352,9 @@ function z() {
           },
           /* 5 */
           /***/
-          function(y, m) {
-            y.exports = function(v, s, w) {
-              var u = new v.Int32Array(w);
+          function(w, _) {
+            w.exports = function(v, s, g) {
+              var u = new v.Int32Array(g);
               function f(l, d) {
                 l = l | 0, d = d | 0;
                 var i = 0, r = 0, t = 0, c = 0, e = 0, o = 0, n = 0, p = 0, a = 0, x = 0, b = 0, C = 0, S = 0, A = 0;
@@ -377,7 +378,7 @@ function z() {
           },
           /* 6 */
           /***/
-          function(y, m) {
+          function(w, _) {
             var h = this, v = void 0;
             typeof self < "u" && typeof self.FileReaderSync < "u" && (v = new self.FileReaderSync());
             var s = function(f, l, d, i, r, t) {
@@ -404,7 +405,7 @@ function z() {
                     l[t + n + 3 | 0] = f.charCodeAt(i + n);
                 }
               }
-            }, w = function(f, l, d, i, r, t) {
+            }, g = function(f, l, d, i, r, t) {
               var c = void 0, e = t % 4, o = (r + e) % 4, n = r - o;
               switch (e) {
                 case 0:
@@ -453,15 +454,15 @@ function z() {
                 }
               }
             };
-            y.exports = function(f, l, d, i, r, t) {
+            w.exports = function(f, l, d, i, r, t) {
               if (typeof f == "string")
                 return s(f, l, d, i, r, t);
               if (f instanceof Array || h && h.Buffer && h.Buffer.isBuffer(f))
-                return w(f, l, d, i, r, t);
+                return g(f, l, d, i, r, t);
               if (f instanceof ArrayBuffer)
-                return w(new Uint8Array(f), l, d, i, r, t);
+                return g(new Uint8Array(f), l, d, i, r, t);
               if (f.buffer instanceof ArrayBuffer)
-                return w(new Uint8Array(f.buffer, f.byteOffset, f.byteLength), l, d, i, r, t);
+                return g(new Uint8Array(f.buffer, f.byteOffset, f.byteLength), l, d, i, r, t);
               if (f instanceof Blob)
                 return u(f, l, d, i, r, t);
               throw new Error("Unsupported data type.");
@@ -469,7 +470,7 @@ function z() {
           },
           /* 7 */
           /***/
-          function(y, m, h) {
+          function(w, _, h) {
             var v = /* @__PURE__ */ function() {
               function d(i, r) {
                 for (var t = 0; t < r.length; t++) {
@@ -485,9 +486,9 @@ function z() {
               if (!(d instanceof i))
                 throw new TypeError("Cannot call a class as a function");
             }
-            var w = h(0), u = h(1), f = u.toHex, l = function() {
+            var g = h(0), u = h(1), f = u.toHex, l = function() {
               function d() {
-                s(this, d), this._rusha = new w(), this._rusha.resetState();
+                s(this, d), this._rusha = new g(), this._rusha.resetState();
               }
               return d.prototype.update = function(r) {
                 return this._rusha.append(r), this;
@@ -508,7 +509,7 @@ function z() {
                 }
               }]), d;
             }();
-            y.exports = function() {
+            w.exports = function() {
               return new l();
             };
           }
@@ -518,110 +519,114 @@ function z() {
     });
   }(L)), L.exports;
 }
-var P = z();
-const G = /* @__PURE__ */ I(P), J = new G(), R = (g) => g.startsWith(".") || g === "__MACOSX" || g === "node_modules", $ = (g) => g.split("/").some((_) => _ && R(_)), k = (g) => g.startsWith("/") ? g : `/${g}`;
-function O(g, _, y) {
+var $ = J();
+const N = /* @__PURE__ */ P($), Y = new N(), R = (y) => /\.html?$/i.test(y), B = (y) => /\.zip$/i.test(y), O = (y) => y.startsWith(".") || y === "__MACOSX" || y === "node_modules", Z = (y) => y.split("/").some((m) => m && O(m)), k = (y) => y.startsWith("/") ? y : `/${y}`;
+function E(y, m, w) {
   return {
-    path: k(g),
-    size: _.byteLength,
-    sha: J.digest(_),
-    content: _,
-    name: y
+    path: k(y),
+    size: m.byteLength,
+    sha: Y.digest(m),
+    content: m,
+    name: w
   };
 }
-async function D(g) {
-  const _ = await new Promise((m, h) => g.file(m, h)), y = await _.arrayBuffer();
-  return O(g.fullPath, y, _.name);
+async function W(y) {
+  const m = await new Promise((_, h) => y.file(_, h)), w = await m.arrayBuffer();
+  return E(y.fullPath, w, m.name);
 }
-async function B(g) {
-  const _ = g.createReader(), y = [];
+async function j(y) {
+  const m = y.createReader(), w = [];
   for (; ; ) {
-    const m = await new Promise((h, v) => _.readEntries(h, v));
-    if (!m.length) break;
-    for (const h of m)
-      R(h.name) || y.push(...h.isDirectory ? await B(h) : [await D(h)]);
+    const _ = await new Promise((h, v) => m.readEntries(h, v));
+    if (!_.length) break;
+    for (const h of _)
+      O(h.name) || w.push(...h.isDirectory ? await j(h) : [await W(h)]);
   }
-  return y;
+  return w;
 }
-async function Z(g) {
+async function K(y) {
   var h;
-  const _ = (h = g.files) == null ? void 0 : h[0];
-  if (g.files.length === 1 && _ && /\.zip$/i.test(_.name))
-    return U(_);
-  const m = Array.from(g.items ?? []).map((v) => {
+  const m = (h = y.files) == null ? void 0 : h[0];
+  if (y.files.length === 1 && m && B(m.name))
+    return I(m);
+  const _ = Array.from(y.items ?? []).map((v) => {
     var s;
     return (s = v.webkitGetAsEntry) == null ? void 0 : s.call(v);
   }).filter(Boolean);
-  if (m.length) {
+  if (_.length) {
+    if (_.length === 1 && !_[0].isDirectory && !R(_[0].name))
+      throw new U();
     const v = await Promise.all(
-      m.map(
-        (s) => R(s.name) ? [] : s.isDirectory ? B(s) : D(s).then((w) => [w])
+      _.map(
+        (s) => O(s.name) ? [] : s.isDirectory ? j(s) : W(s).then((g) => [g])
       )
     );
-    return E(v.flat());
+    return M(v.flat());
   }
-  return Y(g.files);
+  return Q(y.files);
 }
-async function Y(g) {
-  const _ = Array.from(g);
-  if (_.length === 1 && /\.zip$/i.test(_[0].name))
-    return U(_[0]);
-  const y = [];
-  for (const m of _) {
-    const h = m.webkitRelativePath || m.name;
-    y.push(O(h, await m.arrayBuffer(), m.name));
+async function Q(y) {
+  const m = Array.from(y);
+  if (m.length === 1 && B(m[0].name))
+    return I(m[0]);
+  if (m.length === 1 && !R(m[0].name))
+    throw new U();
+  const w = [];
+  for (const _ of m) {
+    const h = _.webkitRelativePath || _.name;
+    w.push(E(h, await _.arrayBuffer(), _.name));
   }
-  return E(y);
+  return M(w);
 }
-async function U(g) {
-  const { unzip: _ } = await import("../../../../chunks/browser.D58rdxmc.js"), y = new Uint8Array(await g.arrayBuffer()), m = await new Promise(
-    (v, s) => _(y, (w, u) => w ? s(w) : v(u))
+async function I(y) {
+  const { unzip: m } = await import("../../../../chunks/browser.D58rdxmc.js"), w = new Uint8Array(await y.arrayBuffer()), _ = await new Promise(
+    (v, s) => m(w, (g, u) => g ? s(g) : v(u))
   ), h = [];
-  for (const [v, s] of Object.entries(m)) {
-    if (v.endsWith("/") || $(v)) continue;
-    const w = s.buffer.slice(
+  for (const [v, s] of Object.entries(_)) {
+    if (v.endsWith("/") || Z(v)) continue;
+    const g = s.buffer.slice(
       s.byteOffset,
       s.byteOffset + s.byteLength
     );
-    h.push(O(v, w, v.split("/").pop()));
+    h.push(E(v, g, v.split("/").pop()));
   }
-  return E(h);
+  return M(h);
 }
-function E(g) {
-  if (!g.length) return g;
-  const _ = (h) => k(h).split("/").slice(1);
-  let y = _(g[0].path).slice(0, -1);
-  for (const h of g) {
-    const v = _(h.path);
+function M(y) {
+  if (!y.length) return y;
+  const m = (h) => k(h).split("/").slice(1);
+  let w = m(y[0].path).slice(0, -1);
+  for (const h of y) {
+    const v = m(h.path);
     let s = 0;
-    for (; s < y.length && s < v.length - 1 && y[s] === v[s]; ) s++;
-    y = y.slice(0, s);
+    for (; s < w.length && s < v.length - 1 && w[s] === v[s]; ) s++;
+    w = w.slice(0, s);
   }
-  if (!y.length) return g;
-  const m = "/" + y.join("/");
-  return g.map((h) => ({ ...h, path: k(h.path.slice(m.length)) }));
+  if (!w.length) return y;
+  const _ = "/" + w.join("/");
+  return y.map((h) => ({ ...h, path: k(h.path.slice(_.length)) }));
 }
-const W = (g) => g.filter((_) => /\.html?$/i.test(_.name)), j = (g) => g.some((_) => /^index\.html?$/i.test(_.name));
-function Q(g) {
-  const _ = W(g);
-  return j(_) ? null : _.length === 1 ? _[0].name : null;
+const F = (y) => y.filter((m) => R(m.name)), z = (y) => y.some((m) => /^index\.html?$/i.test(m.name));
+function V(y) {
+  const m = F(y);
+  return z(m) ? null : m.length === 1 ? m[0].name : null;
 }
-function N(g) {
-  const _ = W(g);
-  return _.length > 1 && !j(_);
+function q(y) {
+  const m = F(y);
+  return m.length > 1 && !z(m);
 }
-function X(g) {
-  const _ = Q(g);
-  return _ ? g.map((y) => {
-    if (y.name !== _) return y;
-    const m = y.path.lastIndexOf("/"), h = m === -1 ? "" : y.path.slice(0, m);
-    return { ...y, name: "index.html", path: k(`${h}/index.html`) };
-  }) : g;
+function H(y) {
+  const m = V(y);
+  return m ? y.map((w) => {
+    if (w.name !== m) return w;
+    const _ = w.path.lastIndexOf("/"), h = _ === -1 ? "" : w.path.slice(0, _);
+    return { ...w, name: "index.html", path: k(`${h}/index.html`) };
+  }) : y;
 }
 export {
-  Q as getSingleNonIndexHtmlFileName,
-  N as hasMultipleHtmlFilesWithoutIndex,
-  Z as readDataTransfer,
-  Y as readFileList,
-  X as renameSingleNonIndexHtmlToIndex
+  V as getSingleNonIndexHtmlFileName,
+  q as hasMultipleHtmlFilesWithoutIndex,
+  K as readDataTransfer,
+  Q as readFileList,
+  H as renameSingleNonIndexHtmlToIndex
 };

package/dist/components/preact/DropZone/useDropDeploy.d.ts

@@ -8,6 +8,13 @@ export interface DeployedSite {
     siteName: string;
     siteId: string;
 }
+/** A deploy failure, handed to `onError` so consumers can render their own error UI. */
+export interface DeployError {
+    /** Human-readable text ready to show a user — the same copy the built-in overlay displays. */
+    message: string;
+    /** The raw underlying reason (e.g. "drop failed: 429"), useful for logging. */
+    reason: string;
+}
 /** Finite states of a single deploy attempt. */
 export type DeployStatus = {
     kind: 'idle';
@@ -34,13 +41,14 @@ interface UseDropDeployOptions {
     client?: DropClient;
     claimUrl: (siteName: string) => string;
     onDeploy?: (site: DeployedSite) => void;
+    onError?: (error: DeployError) => void;
     track: TrackFn;
 }
 /**
  * Owns the deploy state machine and its side effects (upload, local persistence,
  * analytics, redirect), keeping DropZone a thin view over the returned `status`.
  */
-export declare function useDropDeploy({ apiBase, client, claimUrl, onDeploy, track, }: UseDropDeployOptions): {
+export declare function useDropDeploy({ apiBase, client, claimUrl, onDeploy, onError, track, }: UseDropDeployOptions): {
     status: DeployStatus;
     warning: string | null;
     busy: boolean;

package/dist/components/preact/DropZone/useDropDeploy.js

@@ -1,71 +1,72 @@
-import { d as p, A as I } from "../../../chunks/hooks.module.DRcxknIz.js";
-import { renameSingleNonIndexHtmlToIndex as S, getSingleNonIndexHtmlFileName as b, hasMultipleHtmlFilesWithoutIndex as z } from "./drop-core/readFiles.js";
-import { AnonymousDropClient as F } from "./drop-core/client.js";
-import { deployFiles as H } from "./drop-core/deploy.js";
-import { humanizeDropError as E } from "./drop-core/errors.js";
-function W(e) {
-  switch (e.phase) {
+import { d as f, A as S } from "../../../chunks/hooks.module.DRcxknIz.js";
+import { renameSingleNonIndexHtmlToIndex as b, getSingleNonIndexHtmlFileName as z, hasMultipleHtmlFilesWithoutIndex as F } from "./drop-core/readFiles.js";
+import { AnonymousDropClient as H } from "./drop-core/client.js";
+import { deployFiles as W } from "./drop-core/deploy.js";
+import { humanizeDropError as $ } from "./drop-core/errors.js";
+function v(n) {
+  switch (n.phase) {
     case "creating":
       return { kind: "creating" };
     case "uploading":
-      return { kind: "uploading", uploaded: e.uploaded ?? 0, total: e.total ?? 0 };
+      return { kind: "uploading", uploaded: n.uploaded ?? 0, total: n.total ?? 0 };
     case "processing":
     case "ready":
       return { kind: "processing" };
   }
 }
-function $(e) {
-  const d = b(e);
-  return d ? `No index.html found — "${d}" won’t be served at the site root.` : z(e) ? "No index.html found — your site may not have a landing page." : null;
+function A(n) {
+  const r = z(n);
+  return r ? `No index.html found — "${r}" won’t be served at the site root.` : F(n) ? "No index.html found — your site may not have a landing page." : null;
 }
-function P({
-  apiBase: e,
-  client: d,
-  claimUrl: f,
-  onDeploy: l,
-  track: a
+function q({
+  apiBase: n,
+  client: r,
+  claimUrl: g,
+  onDeploy: s,
+  onError: a,
+  track: u
 }) {
-  const [u, t] = p({ kind: "idle" }), [g, c] = p(null), h = I(d ?? new F(e)).current, y = u.kind !== "idle" && u.kind !== "error";
-  async function k(N, s) {
-    c(null), t({ kind: "reading" });
-    const m = (n, i, o) => {
-      t({ kind: "error", message: n }), a("dropzone_deploy_failed", { method: s, reason: i, ...o });
-    }, x = (n, i) => {
-      const o = n instanceof Error ? n.message : String(n);
-      m(E(n), o, i);
+  const [c, i] = f({ kind: "idle" }), [h, m] = f(null), y = S(r ?? new H(n)).current, k = c.kind !== "idle" && c.kind !== "error";
+  async function _(x, l) {
+    m(null), i({ kind: "reading" });
+    const p = (e, o, t) => {
+      i({ kind: "error", message: e }), u("dropzone_deploy_failed", { method: l, reason: o, ...t }), a == null || a({ message: e, reason: o });
+    }, w = (e, o) => {
+      const t = e instanceof Error ? e.message : String(e);
+      p($(e), t, o);
     };
     try {
-      const n = S(await N());
-      if (!n.length) {
-        m("No files found to deploy.", "No files found to deploy.", { file_count: 0 });
+      const e = b(await x());
+      if (!e.length) {
+        p("No files found to deploy.", "No files found to deploy.", { file_count: 0 });
         return;
       }
-      s === "drag" && a("dropzone_files_dropped", { method: s, file_count: n.length }), c($(n));
+      l === "drag" && u("dropzone_files_dropped", { method: l, file_count: e.length }), m(A(e));
       const {
-        url: i,
-        token: o,
-        deploy: r
-      } = await H(h, n, {
-        onProgress: (w) => t(W(w))
+        url: o,
+        token: t,
+        deploy: d
+      } = await W(y, e, {
+        onProgress: (I) => i(v(I))
       });
       try {
-        localStorage.setItem("drop-token", o), localStorage.setItem("dropSiteName", r.subdomain);
+        localStorage.setItem("drop-token", t), localStorage.setItem("dropSiteName", d.subdomain);
       } catch {
       }
-      t({ kind: "redirecting" }), a("dropzone_deploy_succeeded", {
-        method: s,
-        site_name: r.subdomain,
-        file_count: n.length
-      }), l == null || l({ url: i, token: o, siteName: r.subdomain, siteId: r.id }), window.location.assign(`${f(r.subdomain)}#drop_token=${o}`);
-    } catch (n) {
-      x(n);
+      i({ kind: "redirecting" }), u("dropzone_deploy_succeeded", {
+        method: l,
+        site_name: d.subdomain,
+        file_count: e.length
+      }), s == null || s({ url: o, token: t, siteName: d.subdomain, siteId: d.id }), window.location.assign(`${g(d.subdomain)}#drop_token=${t}`);
+    } catch (e) {
+      w(e);
     }
   }
-  function _() {
-    c(null), t({ kind: "idle" });
+  function N() {
+    m(null), i({ kind: "idle" });
   }
-  return { status: u, warning: g, busy: y, deploy: k, reset: _ };
+  return { status: c, warning: h, busy: k, deploy: _, reset: N };
 }
 export {
-  P as useDropDeploy
+  q as useDropDeploy
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@netlify/spark-ui",
   "description": "Assets, design tokens, components, and utilities",
-  "version": "1.27.5",
+  "version": "1.27.7",
   "type": "module",
   "main": "dist/components/preact/index.js",
   "types": "dist/components/preact/index.d.ts",

package/packages/components/preact/DropZone/DropZone.tsx

@@ -1,7 +1,13 @@
 import { useEffect, useRef, useState } from 'preact/hooks';
 import type { ComponentChildren } from 'preact';
 import { readDataTransfer, readFileList, type DropClient } from './drop-core';
-import { useDropDeploy, type DeployedSite, type DeployStatus, type TrackFn } from './useDropDeploy';
+import {
+  useDropDeploy,
+  type DeployedSite,
+  type DeployError,
+  type DeployStatus,
+  type TrackFn,
+} from './useDropDeploy';
 
 import './DropZone.css';
 
@@ -21,11 +27,18 @@ interface Props {
   claimUrl?: (siteName: string) => string;
   /** Called once the deploy is live. */
   onDeploy?: (result: DeployedSite) => void;
+  /**
+   * Called when a deploy fails, with a humanized `message` (ready to show a
+   * user — the same copy the built-in overlay uses) and the raw `reason`. Pair
+   * this with `showStatus={false}` to render your own error UI.
+   */
+  onError?: (error: DeployError) => void;
   /**
    * Render the built-in status overlay (drag tint, spinner, progress bar, error).
    * Set to `false` to suppress it entirely and keep your children visible, then
    * drive your own feedback from the `data-state` attribute on the root element.
-   * Note: in this mode you're responsible for surfacing errors yourself.
+   * Note: in this mode you're responsible for surfacing errors yourself — use
+   * `onError` to get the message.
    */
   showStatus?: boolean;
   /**
@@ -54,6 +67,7 @@ export default function DropZone({
   client,
   claimUrl = defaultClaimUrl,
   onDeploy,
+  onError,
   showStatus = true,
   onTrack,
   analyticsId,
@@ -69,6 +83,7 @@ export default function DropZone({
     client,
     claimUrl,
     onDeploy,
+    onError,
     track,
   });
 

package/packages/components/preact/DropZone/drop-core/errors.ts

@@ -1,3 +1,17 @@
+/**
+ * Thrown when the user drops or picks a single loose file that Drop can't turn
+ * into a site on its own — anything that isn't a `.zip` (a site archive) or an
+ * HTML page (served as index.html). A folder, multiple files, a zip, or a lone
+ * HTML file are all fine; any other single file is rejected rather than
+ * deployed as a one-asset site (matches react-ui).
+ */
+export class UnsupportedDropError extends Error {
+  constructor() {
+    super('unsupported single file');
+    this.name = 'UnsupportedDropError';
+  }
+}
+
 /**
  * Turn a raw deploy failure into copy a non-technical user can act on.
  * The original message is still tracked via analytics — this is only for display.
@@ -5,6 +19,10 @@
 export function humanizeDropError(err: unknown): string {
   if (!(err instanceof Error)) return 'Something went wrong. Please try again.';
 
+  if (err instanceof UnsupportedDropError) {
+    return 'To deploy, drop a folder or a .zip file — or a single HTML page.';
+  }
+
   if (err.message === 'Deploy did not become ready in time') {
     return 'Your site is taking longer than expected to go live. Please try again in a moment.';
   }

package/packages/components/preact/DropZone/drop-core/readFiles.ts

@@ -1,10 +1,15 @@
 import Rusha from 'rusha';
 import type { ProcessedFile } from './types';
+import { UnsupportedDropError } from './errors';
 
 /* eslint-disable @typescript-eslint/no-explicit-any -- webkit FileSystem entry APIs are untyped */
 
 const rusha = new Rusha();
 
+/** A file we can serve as a page: `.html` / `.htm` (a lone one becomes index.html). */
+const isHtmlName = (name: string) => /\.html?$/i.test(name);
+const isZipName = (name: string) => /\.zip$/i.test(name);
+
 /** A single path segment we never deploy: dotfiles, macOS metadata, deps. */
 const isJunkName = (name: string) =>
   name.startsWith('.') || name === '__MACOSX' || name === 'node_modules';
@@ -58,12 +63,18 @@ async function readDirEntry(entry: any): Promise<ProcessedFile[]> {
 export async function readDataTransfer(dt: DataTransfer): Promise<ProcessedFile[]> {
   // single zip?
   const first = dt.files?.[0];
-  if (dt.files.length === 1 && first && /\.zip$/i.test(first.name)) {
+  if (dt.files.length === 1 && first && isZipName(first.name)) {
     return readZip(first);
   }
   const items = Array.from(dt.items ?? []);
   const entries = items.map(i => i.webkitGetAsEntry?.()).filter(Boolean) as any[];
   if (entries.length) {
+    // A single loose file that isn't a zip (handled above) or an HTML page
+    // can't stand up a site on its own — reject it rather than deploy one
+    // stray asset. A lone folder (isDirectory) or multiple entries are fine.
+    if (entries.length === 1 && !entries[0].isDirectory && !isHtmlName(entries[0].name)) {
+      throw new UnsupportedDropError();
+    }
     const nested = await Promise.all(
       entries.map(e =>
         isJunkName(e.name) ? [] : e.isDirectory ? readDirEntry(e) : readFileEntry(e).then(f => [f])
@@ -79,9 +90,14 @@ export async function readDataTransfer(dt: DataTransfer): Promise<ProcessedFile[
 
 export async function readFileList(files: FileList): Promise<ProcessedFile[]> {
   const list = Array.from(files);
-  if (list.length === 1 && /\.zip$/i.test(list[0].name)) {
+  if (list.length === 1 && isZipName(list[0].name)) {
     return readZip(list[0]);
   }
+  // Same single-loose-file guard as the drag path (also the drag fallback when
+  // the entries API is unavailable): only a zip or an HTML page may stand alone.
+  if (list.length === 1 && !isHtmlName(list[0].name)) {
+    throw new UnsupportedDropError();
+  }
   const out: ProcessedFile[] = [];
   for (const file of list) {
     const rel = (file as any).webkitRelativePath || file.name;
@@ -133,7 +149,7 @@ function normalizeFiles(files: ProcessedFile[]): ProcessedFile[] {
 
 // --- index.html validation (UI can surface these as warnings) ---------------
 
-const htmlFiles = (files: ProcessedFile[]) => files.filter(f => /\.html?$/i.test(f.name));
+const htmlFiles = (files: ProcessedFile[]) => files.filter(f => isHtmlName(f.name));
 const hasIndex = (html: ProcessedFile[]) => html.some(f => /^index\.html?$/i.test(f.name));
 
 export function getSingleNonIndexHtmlFileName(files: ProcessedFile[]): string | null {

package/packages/components/preact/DropZone/useDropDeploy.ts

@@ -22,6 +22,14 @@ export interface DeployedSite {
   siteId: string;
 }
 
+/** A deploy failure, handed to `onError` so consumers can render their own error UI. */
+export interface DeployError {
+  /** Human-readable text ready to show a user — the same copy the built-in overlay displays. */
+  message: string;
+  /** The raw underlying reason (e.g. "drop failed: 429"), useful for logging. */
+  reason: string;
+}
+
 /** Finite states of a single deploy attempt. */
 export type DeployStatus =
   | { kind: 'idle' }
@@ -40,6 +48,7 @@ interface UseDropDeployOptions {
   client?: DropClient;
   claimUrl: (siteName: string) => string;
   onDeploy?: (site: DeployedSite) => void;
+  onError?: (error: DeployError) => void;
   track: TrackFn;
 }
 
@@ -77,6 +86,7 @@ export function useDropDeploy({
   client,
   claimUrl,
   onDeploy,
+  onError,
   track,
 }: UseDropDeployOptions) {
   const [status, setStatus] = useState<DeployStatus>({ kind: 'idle' });
@@ -96,9 +106,12 @@ export function useDropDeploy({
     // included where the file set is known (it isn't if `read()` itself threw).
     // `reason` goes to analytics as-is (raw, e.g. "drop failed: 429"); `message`
     // is what the user sees, which for a caught error is humanized separately.
+    // `onError` gets both so a consumer (e.g. with `showStatus={false}`) can show
+    // the humanized message while keeping the raw reason for their own logging.
     const fail = (message: string, reason: string, extra?: Record<string, unknown>) => {
       setStatus({ kind: 'error', message });
       track('dropzone_deploy_failed', { method: source, reason, ...extra });
+      onError?.({ message, reason });
     };
 
     const failFromError = (err: unknown, extra?: Record<string, unknown>) => {