@netlify/spark-ui 1.27.6 → 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/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.6",
+  "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/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>) => {