@netlify/spark-ui 1.27.2 → 1.27.4

package/dist/assets/DropZone.css

@@ -1 +1 @@
-.n-fadeIn{opacity:0;animation:fadeIn var(--animation-duration, .3s) ease-out forwards}.n-fadeInUp{opacity:0;transform:translateY(var(--animation-transformY, 5px));animation:fadeInUp var(--animation-duration, .3s) ease-out forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}.n-dropzone{--n-dropzone-accent: var(--color-brand-primary, #0e7fe1);--n-dropzone-radius: var(--radius-2xl, 1rem);box-sizing:border-box;position:relative;min-height:4rem;color:var(--color-text-default, #14161a);border:2px dashed var(--color-border-default, rgba(0, 0, 0, .15));border-radius:var(--n-dropzone-radius);outline:none;transition:border-color .2s ease-out,background-color .2s ease-out,box-shadow .2s ease-out}.n-dropzone:focus-visible{border-color:var(--n-dropzone-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--n-dropzone-accent) 40%,transparent)}.n-dropzone.is-active{border-color:var(--n-dropzone-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--n-dropzone-accent) 18%,transparent)}.n-dropzone.is-busy{border-style:solid;border-color:var(--color-border-subtle, rgba(0, 0, 0, .08))}.n-dropzone-content{transition:opacity .15s ease-out;pointer-events:none}.n-dropzone.is-active:not(.is-bare) .n-dropzone-content,.n-dropzone.is-busy:not(.is-bare) .n-dropzone-content{opacity:0}.n-dropzone-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-s, 1rem);padding:var(--space-l, 1.5rem);text-align:center;border-radius:inherit;pointer-events:none;background:color-mix(in srgb,var(--n-dropzone-accent) 10%,transparent)}.n-dropzone.is-busy .n-dropzone-overlay,.n-dropzone[data-state=error] .n-dropzone-overlay{pointer-events:auto;background:color-mix(in srgb,var(--color-bg, #fff) 88%,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.n-dropzone-hint{margin:0;font-size:1.0625rem;font-weight:var(--font-weight-semibold, 600);color:var(--n-dropzone-accent)}.n-dropzone-title{margin:0;font-size:1.125rem;font-weight:var(--font-weight-semibold, 600);line-height:var(--line-height-snug, 1.3)}.n-dropzone-title--error{color:var(--color-invalid-text, #d00)}.n-dropzone-subtitle{margin:0;max-width:30rem;font-size:.9375rem;color:var(--color-text-weak, #5c6570);line-height:var(--line-height-text, 1.5)}.n-dropzone-loading{display:flex;flex-direction:column;align-items:center;gap:var(--space-s, 1rem)}.n-dropzone-spinner{width:2.25rem;height:2.25rem;border-radius:var(--radius-pill, 999px);border:3px solid color-mix(in srgb,var(--n-dropzone-accent) 22%,transparent);border-top-color:var(--n-dropzone-accent);animation:dropSpin .72s linear infinite}@keyframes dropSpin{to{transform:rotate(360deg)}}.n-dropzone-nudge{display:block;font-size:.8125rem;color:var(--color-text-weaker, #8a929c)}.n-dropzone-progress{width:min(22rem,100%);height:.5rem;border-radius:var(--radius-pill, 999px);background:var(--color-bg-3, rgba(0, 0, 0, .08));overflow:hidden}.n-dropzone-progress-bar{height:100%;border-radius:inherit;background:var(--n-dropzone-accent);transition:width .3s cubic-bezier(.22,1,.36,1)}.n-dropzone-browse{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-2xs, .5rem) var(--space-m, 1.25rem);border:none;border-radius:var(--radius-pill, 999px);background:var(--n-dropzone-accent);color:var(--neutral-000, #fff);font-size:.9375rem;font-weight:var(--font-weight-semibold, 600);line-height:var(--line-height-none, 1);text-decoration:none;cursor:pointer;transition:background-color .15s ease-out,transform .12s ease-out}.n-dropzone-browse:hover{background:var(--color-brand-primary-hover, #0b6bc0);transform:translateY(-1px)}.n-dropzone-browse:active{transform:translateY(0)}.n-dropzone-warning{margin:0;padding:var(--space-2xs, .5rem) var(--space-s, 1rem);max-width:32rem;border-radius:var(--radius-m, .5rem);background:var(--color-warning-bg, #fdf3d7);color:var(--color-warning-text, #7a5b00);font-size:.8125rem}@media (prefers-reduced-motion: reduce){.n-dropzone,.n-dropzone-overlay,.n-dropzone-spinner,.n-dropzone-progress-bar{animation:none!important;transition:none!important}.n-dropzone-spinner{border-top-color:var(--n-dropzone-accent)}}
+.n-fadeIn{opacity:0;animation:fadeIn var(--animation-duration, .3s) ease-out forwards}.n-fadeInUp{opacity:0;transform:translateY(var(--animation-transformY, 5px));animation:fadeInUp var(--animation-duration, .3s) ease-out forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}.n-dropzone{--n-dropzone-accent: var(--color-brand-primary, #0e7fe1);--n-dropzone-radius: var(--radius-2xl, 1rem);box-sizing:border-box;position:relative;min-height:4rem;color:var(--color-text-default, #14161a);border:2px dashed var(--color-border-default, rgba(0, 0, 0, .15));border-radius:var(--n-dropzone-radius);outline:none;cursor:pointer;transition:border-color .2s ease-out,background-color .2s ease-out,box-shadow .2s ease-out}.n-dropzone:focus-visible{border-color:var(--n-dropzone-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--n-dropzone-accent) 40%,transparent)}.n-dropzone.is-active{border-color:var(--n-dropzone-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--n-dropzone-accent) 18%,transparent)}.n-dropzone.is-busy{border-style:solid;border-color:var(--color-border-subtle, rgba(0, 0, 0, .08))}.n-dropzone-content{transition:opacity .15s ease-out;pointer-events:none}.n-dropzone.is-active:not(.is-bare) .n-dropzone-content,.n-dropzone.is-busy:not(.is-bare) .n-dropzone-content{opacity:0}.n-dropzone-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-s, 1rem);padding:var(--space-l, 1.5rem);text-align:center;border-radius:inherit;pointer-events:none;background:color-mix(in srgb,var(--n-dropzone-accent) 10%,transparent)}.n-dropzone.is-busy .n-dropzone-overlay,.n-dropzone[data-state=error] .n-dropzone-overlay{pointer-events:auto;background:color-mix(in srgb,var(--color-bg, #fff) 88%,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.n-dropzone-hint{margin:0;font-size:1.0625rem;font-weight:var(--font-weight-semibold, 600);color:var(--n-dropzone-accent)}.n-dropzone-title{margin:0;font-size:1.125rem;font-weight:var(--font-weight-semibold, 600);line-height:var(--line-height-snug, 1.3)}.n-dropzone-title--error{color:var(--color-invalid-text, #d00)}.n-dropzone-subtitle{margin:0;max-width:30rem;font-size:.9375rem;color:var(--color-text-weak, #5c6570);line-height:var(--line-height-text, 1.5)}.n-dropzone-loading{display:flex;flex-direction:column;align-items:center;gap:var(--space-s, 1rem)}.n-dropzone-spinner{width:2.25rem;height:2.25rem;border-radius:var(--radius-pill, 999px);border:3px solid color-mix(in srgb,var(--n-dropzone-accent) 22%,transparent);border-top-color:var(--n-dropzone-accent);animation:dropSpin .72s linear infinite}@keyframes dropSpin{to{transform:rotate(360deg)}}.n-dropzone-nudge{display:block;font-size:.8125rem;color:var(--color-text-weaker, #8a929c)}.n-dropzone-progress{width:min(22rem,100%);height:.5rem;border-radius:var(--radius-pill, 999px);background:var(--color-bg-3, rgba(0, 0, 0, .08));overflow:hidden}.n-dropzone-progress-bar{height:100%;border-radius:inherit;background:var(--n-dropzone-accent);transition:width .3s cubic-bezier(.22,1,.36,1)}.n-dropzone-browse{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-2xs, .5rem) var(--space-m, 1.25rem);border:none;border-radius:var(--radius-pill, 999px);background:var(--n-dropzone-accent);color:var(--neutral-000, #fff);font-size:.9375rem;font-weight:var(--font-weight-semibold, 600);line-height:var(--line-height-none, 1);text-decoration:none;cursor:pointer;transition:background-color .15s ease-out,transform .12s ease-out}.n-dropzone-browse:hover{background:var(--color-brand-primary-hover, #0b6bc0);transform:translateY(-1px)}.n-dropzone-browse:active{transform:translateY(0)}.n-dropzone-warning{margin:0;padding:var(--space-2xs, .5rem) var(--space-s, 1rem);max-width:32rem;border-radius:var(--radius-m, .5rem);background:var(--color-warning-bg, #fdf3d7);color:var(--color-warning-text, #7a5b00);font-size:.8125rem}@media (prefers-reduced-motion: reduce){.n-dropzone,.n-dropzone-overlay,.n-dropzone-spinner,.n-dropzone-progress-bar{animation:none!important;transition:none!important}.n-dropzone-spinner{border-top-color:var(--n-dropzone-accent)}}

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

@@ -1,41 +1,44 @@
-const i = "https://api.netlify.com/api/v1";
-class n {
-  constructor(e = i) {
-    this.apiBase = e;
+function r(s, t) {
+  return Object.assign(new Error(`${s} failed: ${t}`), { status: t });
+}
+const n = "https://api.netlify.com/api/v1";
+class p {
+  constructor(t = n) {
+    this.apiBase = t;
   }
   async getToken() {
-    const e = await fetch(`${this.apiBase}/drop/token`, { method: "POST" });
-    if (!e.ok) throw new Error(`drop/token failed: ${e.status}`);
-    return (await e.json()).token;
+    const t = await fetch(`${this.apiBase}/drop/token`, { method: "POST" });
+    if (!t.ok) throw r("drop/token", t.status);
+    return (await t.json()).token;
   }
-  async createDeploy(e, o) {
-    const t = await fetch(`${this.apiBase}/drop`, {
+  async createDeploy(t, o) {
+    const e = await fetch(`${this.apiBase}/drop`, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ files: e, token: o })
+      body: JSON.stringify({ files: t, token: o })
     });
-    if (!t.ok) throw new Error(`drop failed: ${t.status}`);
-    return t.json();
+    if (!e.ok) throw r("drop", e.status);
+    return e.json();
   }
-  async uploadFile(e, o, t, a) {
-    const r = await fetch(`${this.apiBase}/deploys/${e}/files${o}`, {
+  async uploadFile(t, o, e, a) {
+    const i = await fetch(`${this.apiBase}/deploys/${t}/files${o}`, {
       method: "PUT",
       headers: { "Content-Type": "application/octet-stream", Authorization: `Bearer ${a}` },
-      body: t
+      body: e
     });
-    if (!r.ok) throw new Error(`upload ${o} failed: ${r.status}`);
+    if (!i.ok) throw r(`upload ${o}`, i.status);
   }
-  async waitUntilReady(e, o) {
-    for (let t = 0; t < 600; t++) {
-      const a = await fetch(`${this.apiBase}/deploys/${e.deploy_id}`, {
+  async waitUntilReady(t, o) {
+    for (let e = 0; e < 600; e++) {
+      const a = await fetch(`${this.apiBase}/deploys/${t.deploy_id}`, {
         headers: { Authorization: `Bearer ${o}` }
       });
       if (a.ok && (await a.json()).state === "ready") return;
-      await new Promise((r) => setTimeout(r, 1e3));
+      await new Promise((i) => setTimeout(i, 1e3));
     }
     throw new Error("Deploy did not become ready in time");
   }
 }
 export {
-  n as AnonymousDropClient
+  p as AnonymousDropClient
 };

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

@@ -0,0 +1,5 @@
+/**
+ * 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.
+ */
+export declare function humanizeDropError(err: unknown): string;

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

@@ -0,0 +1,29 @@
+function a(e) {
+  if (!(e instanceof Error)) return "Something went wrong. Please try again.";
+  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)
+    return "Couldn't connect to Netlify. Check your internet connection and try again.";
+  const t = "status" in e && typeof e.status == "number" ? e.status : void 0;
+  switch (t) {
+    case 429:
+      return "Too many attempts — please wait a moment and try again.";
+    case 413:
+      return "Your upload is too large to deploy this way.";
+    case 404:
+      return "We couldn't find that deploy. Please try again.";
+    case 401:
+    case 403:
+      return "That request wasn't allowed. Please try again.";
+    case 500:
+    case 502:
+    case 503:
+    case 504:
+      return "Netlify's servers are having trouble right now. Please try again shortly.";
+    default:
+      return t ? "Something went wrong talking to Netlify. Please try again." : "Something went wrong. Please try again.";
+  }
+}
+export {
+  a as humanizeDropError
+};

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

@@ -3,3 +3,4 @@ export * from './digest';
 export * from './readFiles';
 export * from './client';
 export * from './deploy';
+export * from './errors';

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

@@ -1,13 +1,15 @@
 import { getDigest as o } from "./digest.js";
-import { getSingleNonIndexHtmlFileName as l, hasMultipleHtmlFilesWithoutIndex as i, readDataTransfer as m, readFileList as n } from "./readFiles.js";
-import { AnonymousDropClient as p } from "./client.js";
+import { getSingleNonIndexHtmlFileName as i, hasMultipleHtmlFilesWithoutIndex as l, readDataTransfer as m, readFileList as n } from "./readFiles.js";
+import { AnonymousDropClient as a } from "./client.js";
 import { deployFiles as x } from "./deploy.js";
+import { humanizeDropError as d } from "./errors.js";
 export {
-  p as AnonymousDropClient,
+  a as AnonymousDropClient,
   x as deployFiles,
   o as getDigest,
-  l as getSingleNonIndexHtmlFileName,
-  i as hasMultipleHtmlFilesWithoutIndex,
+  i as getSingleNonIndexHtmlFileName,
+  l as hasMultipleHtmlFilesWithoutIndex,
+  d as humanizeDropError,
   m as readDataTransfer,
   n as readFileList
 };

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

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

package/package.json

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

package/packages/components/preact/DropZone/DropZone.css

@@ -16,6 +16,7 @@
   border: 2px dashed var(--color-border-default, rgba(0, 0, 0, 0.15));
   border-radius: var(--n-dropzone-radius);
   outline: none;
+  cursor: pointer;
   transition:
     border-color 200ms ease-out,
     background-color 200ms ease-out,

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

@@ -1,5 +1,10 @@
 import type { DropResponse, Digest } from './types';
 
+/** A normal Error with the response's HTTP status attached, so callers can branch on it directly. */
+function apiError(action: string, status: number): Error & { status: number } {
+  return Object.assign(new Error(`${action} failed: ${status}`), { status });
+}
+
 export interface DropClient {
   getToken(): Promise<string>;
   createDeploy(digest: Digest, token: string): Promise<DropResponse>;
@@ -18,7 +23,7 @@ export class AnonymousDropClient implements DropClient {
 
   async getToken(): Promise<string> {
     const res = await fetch(`${this.apiBase}/drop/token`, { method: 'POST' });
-    if (!res.ok) throw new Error(`drop/token failed: ${res.status}`);
+    if (!res.ok) throw apiError('drop/token', res.status);
     return (await res.json()).token;
   }
 
@@ -28,7 +33,7 @@ export class AnonymousDropClient implements DropClient {
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ files, token }),
     });
-    if (!res.ok) throw new Error(`drop failed: ${res.status}`);
+    if (!res.ok) throw apiError('drop', res.status);
     return res.json();
   }
 
@@ -44,7 +49,7 @@ export class AnonymousDropClient implements DropClient {
       headers: { 'Content-Type': 'application/octet-stream', Authorization: `Bearer ${token}` },
       body: content,
     });
-    if (!res.ok) throw new Error(`upload ${path} failed: ${res.status}`);
+    if (!res.ok) throw apiError(`upload ${path}`, res.status);
   }
 
   async waitUntilReady(deploy: DropResponse, token: string): Promise<void> {

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

@@ -0,0 +1,39 @@
+/**
+ * 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.
+ */
+export function humanizeDropError(err: unknown): string {
+  if (!(err instanceof Error)) return 'Something went wrong. Please try again.';
+
+  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.';
+  }
+  // fetch() rejects with a TypeError when the network is unreachable (offline, DNS, CORS, etc).
+  if (err instanceof TypeError) {
+    return "Couldn't connect to Netlify. Check your internet connection and try again.";
+  }
+
+  // client.ts attaches `.status` to API failures — see apiError().
+  const status = 'status' in err && typeof err.status === 'number' ? err.status : undefined;
+
+  switch (status) {
+    case 429:
+      return 'Too many attempts — please wait a moment and try again.';
+    case 413:
+      return 'Your upload is too large to deploy this way.';
+    case 404:
+      return "We couldn't find that deploy. Please try again.";
+    case 401:
+    case 403:
+      return "That request wasn't allowed. Please try again.";
+    case 500:
+    case 502:
+    case 503:
+    case 504:
+      return "Netlify's servers are having trouble right now. Please try again shortly.";
+    default:
+      return status
+        ? 'Something went wrong talking to Netlify. Please try again.'
+        : 'Something went wrong. Please try again.';
+  }
+}

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

@@ -3,3 +3,4 @@ export * from './digest';
 export * from './readFiles';
 export * from './client';
 export * from './deploy';
+export * from './errors';

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

@@ -4,6 +4,7 @@ import {
   deployFiles,
   getSingleNonIndexHtmlFileName,
   hasMultipleHtmlFilesWithoutIndex,
+  humanizeDropError,
   type DeployProgress,
   type DropClient,
   type ProcessedFile,
@@ -92,15 +93,22 @@ export function useDropDeploy({
     // read/deploy throw) reports uniformly — the mirror of the
     // `dropzone_deploy_succeeded` event on the happy path. `file_count` is only
     // included where the file set is known (it isn't if `read()` itself threw).
-    const fail = (message: string, extra?: Record<string, unknown>) => {
+    // `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.
+    const fail = (message: string, reason: string, extra?: Record<string, unknown>) => {
       setStatus({ kind: 'error', message });
-      track('dropzone_deploy_failed', { method: source, reason: message, ...extra });
+      track('dropzone_deploy_failed', { method: source, reason, ...extra });
+    };
+
+    const failFromError = (err: unknown, extra?: Record<string, unknown>) => {
+      const reason = err instanceof Error ? err.message : String(err);
+      fail(humanizeDropError(err), reason, extra);
     };
 
     try {
       const files = await read();
       if (!files.length) {
-        fail('No files found to deploy.', { file_count: 0 });
+        fail('No files found to deploy.', 'No files found to deploy.', { file_count: 0 });
         return;
       }
 
@@ -147,7 +155,7 @@ export function useDropDeploy({
       // `#drop_token=` and persists it for the claim + post-signup steps.
       window.location.assign(`${claimUrl(result.subdomain)}#drop_token=${token}`);
     } catch (err) {
-      fail(err instanceof Error ? err.message : String(err));
+      failFromError(err);
     }
   }