@netlify/spark-ui 1.27.6 → 1.28.0

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 { BuildDetection, DropClient } from './drop-core';
+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;
@@ -10,13 +10,35 @@ interface Props {
     client?: DropClient;
     /** Build the "claim this site" URL from the assigned site name (subdomain). */
     claimUrl?: (siteName: string) => string;
+    /**
+     * Where to send a build-required drop (framework source, build command,
+     * functions) when `onBuildRequired` isn't set. Such projects can't deploy
+     * through the anonymous static drop API, so by default the user is redirected
+     * here — the app signup page with `next=/drop` — to build on the
+     * authenticated Drop page. Override to point at your own destination.
+     */
+    buildSignupUrl?: string;
+    /**
+     * Called when a build-required drop is detected, instead of the default
+     * `buildSignupUrl` redirect. Use it to own the hand-off yourself (custom
+     * routing, persisting the drop, gating on auth). When set, the component does
+     * not redirect. The static drop path is unaffected either way.
+     */
+    onBuildRequired?: (info: BuildDetection) => void;
     /** 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;
     /**
@@ -26,6 +48,7 @@ interface Props {
      * Emitted events (all include `dropzone_id` when `analyticsId` is set):
      * - `dropzone_files_dropped`  — files dropped via drag  ({ method: 'drag', file_count })
      * - `dropzone_browse_opened`  — file picker opened       ({ method: 'keyboard' | 'click' })
+     * - `dropzone_build_required` — drop needs a build; handed off to signup ({ method, reason, file_count })
      * - `dropzone_deploy_succeeded` — deploy went live       ({ method, site_name, file_count })
      * - `dropzone_deploy_failed`  — deploy errored out       ({ method, reason, file_count? })
      */
@@ -38,5 +61,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, buildSignupUrl, onBuildRequired, onDeploy, onError, showStatus, onTrack, analyticsId, className, }: Props): import("preact").JSX.Element;
 export {};

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

@@ -1,52 +1,59 @@
 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 { Fragment as D } from "preact";
-import '../../../assets/DropZone.css';const x = 120, F = (n) => `https://app.netlify.com/drop/${n}`;
-function K({
+import { A as D, d as E, y as I } from "../../../chunks/hooks.module.DRcxknIz.js";
+import { readFileList as P, readDataTransfer as U } from "./drop-core/readFiles.js";
+import "./drop-core/detectBuild.js";
+import { useDropDeploy as j } from "./useDropDeploy.js";
+import { Fragment as k } from "preact";
+import '../../../assets/DropZone.css';const B = 120, F = (n) => `https://app.netlify.com/drop/${n}`, M = "https://app.netlify.com/signup?next=/drop&utm_campaign=drop";
+function H({
   children: n,
   apiBase: l,
   client: i,
   claimUrl: s = F,
-  onDeploy: u,
+  buildSignupUrl: u = M,
+  onBuildRequired: w,
+  onDeploy: A,
+  onError: C,
   showStatus: f = !0,
-  onTrack: d,
+  onTrack: c,
   analyticsId: g,
-  className: w
+  className: T
 }) {
-  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 h = (r, t = {}) => c == null ? void 0 : c(r, g ? { dropzone_id: g, ...t } : t), { status: a, warning: m, busy: o, deploy: v, reset: _ } = j({
     apiBase: l,
     client: i,
     claimUrl: s,
-    onDeploy: u,
-    track: v
-  }), { active: p, keepActive: C, endDrag: T } = M(), m = k(null), y = (r) => {
+    buildSignupUrl: u,
+    onBuildRequired: w,
+    onDeploy: A,
+    onError: C,
+    track: h
+  }), { active: p, keepActive: S, endDrag: R } = N(), b = D(null), y = (r) => {
     var t;
-    v("dropzone_browse_opened", { method: r }), (t = m.current) == null || t.click();
-  }, _ = f && (p || o || a.kind === "error"), R = [
+    h("dropzone_browse_opened", { method: r }), (t = b.current) == null || t.click();
+  }, $ = f && (p || o || a.kind === "error"), x = [
     "n-dropzone",
     p && "is-active",
     o && "is-busy",
     !f && "is-bare",
-    w
+    T
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ e(
     "div",
     {
-      class: R,
+      class: x,
       "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(), S());
       },
       onDrop: (r) => {
-        if (r.preventDefault(), T(), o) return;
+        if (r.preventDefault(), R(), o) return;
         const t = r.dataTransfer;
-        t && b(() => I(t), "drag");
+        t && v(() => U(t), "drag");
       },
       onClick: (r) => {
         !o && r.target === r.currentTarget && y("click");
@@ -59,7 +66,7 @@ function K({
         /* @__PURE__ */ e(
           "input",
           {
-            ref: m,
+            ref: b,
             type: "file",
             hidden: !0,
             multiple: !0,
@@ -68,17 +75,17 @@ 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 && v(() => P(t.files), "browse"), t.value = "";
             }
           }
         ),
-        _ && /* @__PURE__ */ e(
+        $ && /* @__PURE__ */ e(
           "div",
           {
             class: "n-dropzone-overlay n-fadeIn",
             children: [
-              /* @__PURE__ */ e(O, { status: a, active: p, onReset: A }),
-              h && a.kind !== "error" && o && /* @__PURE__ */ e("p", { class: "n-dropzone-warning", role: "status", children: h })
+              /* @__PURE__ */ e(O, { status: a, active: p, onReset: _ }),
+              m && a.kind !== "error" && o && /* @__PURE__ */ e("p", { class: "n-dropzone-warning", role: "status", children: m })
             ]
           },
           a.kind === "idle" ? "active" : a.kind
@@ -87,10 +94,10 @@ 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 N() {
+  const [n, l] = E(!1), i = D();
+  return I(() => () => clearTimeout(i.current), []), { active: n, keepActive: () => {
+    l(!0), clearTimeout(i.current), i.current = setTimeout(() => l(!1), B);
   }, endDrag: () => {
     clearTimeout(i.current), l(!1);
   } };
@@ -105,29 +112,34 @@ function O({
     case "idle":
       return l ? /* @__PURE__ */ e("p", { class: "n-dropzone-hint", children: "Drop to deploy" }) : null;
     case "reading":
-      return /* @__PURE__ */ e(c, { label: "Reading files…" });
+      return /* @__PURE__ */ e(d, { label: "Reading files…" });
     case "creating":
-      return /* @__PURE__ */ e(c, { label: "Creating deploy…" });
+      return /* @__PURE__ */ e(d, { label: "Creating deploy…" });
     case "processing":
-      return /* @__PURE__ */ e(c, { label: "Processing — almost live…" });
+      return /* @__PURE__ */ e(d, { label: "Processing — almost live…" });
     case "redirecting":
-      return /* @__PURE__ */ e(c, { label: "Site’s live — taking you to claim it…" });
+      return /* @__PURE__ */ e(
+        d,
+        {
+          label: n.target === "signup" ? "This project needs a build — taking you to Netlify…" : "Site’s live — taking you to claim it…"
+        }
+      );
     case "uploading": {
       const s = n.total ? Math.round(n.uploaded / n.total * 100) : 0;
-      return /* @__PURE__ */ e(D, { children: [
-        /* @__PURE__ */ e(c, { label: `Uploading ${n.uploaded}/${n.total} files…` }),
+      return /* @__PURE__ */ e(k, { children: [
+        /* @__PURE__ */ e(d, { label: `Uploading ${n.uploaded}/${n.total} files…` }),
         /* @__PURE__ */ e("div", { class: "n-dropzone-progress", role: "progressbar", "aria-valuenow": s, children: /* @__PURE__ */ e("div", { class: "n-dropzone-progress-bar", style: { width: `${s}%` } }) })
       ] });
     }
     case "error":
-      return /* @__PURE__ */ e(D, { children: [
+      return /* @__PURE__ */ e(k, { children: [
         /* @__PURE__ */ e("p", { class: "n-dropzone-title n-dropzone-title--error", children: "Something went wrong" }),
         /* @__PURE__ */ e("p", { class: "n-dropzone-subtitle", role: "alert", children: n.message }),
         /* @__PURE__ */ e("button", { type: "button", class: "n-dropzone-browse", onClick: i, children: "Try again" })
       ] });
   }
 }
-function c({ label: n }) {
+function d({ label: n }) {
   return /* @__PURE__ */ e("div", { class: "n-dropzone-loading", children: [
     /* @__PURE__ */ e("span", { class: "n-dropzone-spinner", "aria-hidden": "true" }),
     /* @__PURE__ */ e("p", { class: "n-dropzone-subtitle", "aria-live": "polite", children: [
@@ -138,5 +150,5 @@ function c({ label: n }) {
   ] });
 }
 export {
-  K as default
+  H as default
 };

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

@@ -0,0 +1,23 @@
+import { ProcessedFile } from './types';
+/** Why a drop was judged to need a build — surfaced to analytics and `onBuildRequired`. */
+export type BuildReason = 'netlify-toml-build' | 'package-json-build-script' | 'framework-dependency' | 'functions-directory';
+export interface BuildDetection {
+    /** True when the dropped project needs a build step and can't be served as static files. */
+    buildRequired: boolean;
+    /** The signal that decided it (first match wins), or null for a plain static drop. */
+    reason: BuildReason | null;
+}
+/**
+ * Decide whether a dropped project needs a build. Runs on the already-read,
+ * root-normalized `ProcessedFile[]` (a dropped `.zip` is expanded and the common
+ * root folder stripped upstream in `readFiles`), so build config sits at the
+ * deploy root, e.g. `/netlify.toml`, `/package.json`.
+ *
+ * The anonymous drop API only performs static deploys, so a build-required
+ * project can't go through it — the consumer redirects such drops to the
+ * authenticated Drop page instead. This heuristic is deliberately lightweight
+ * (no framework-detection dependency): it reads the two config files and looks
+ * for the zero-config functions directories. A plain static site (HTML/CSS/JS,
+ * no build config) returns `{ buildRequired: false }`.
+ */
+export declare function detectBuild(files: ProcessedFile[]): BuildDetection;

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

@@ -0,0 +1,68 @@
+const u = /* @__PURE__ */ new Set([
+  "astro",
+  "next",
+  "nuxt",
+  "gatsby",
+  "vite",
+  "react-scripts",
+  "parcel",
+  "expo",
+  "gridsome",
+  "vuepress",
+  "hexo",
+  "@remix-run/dev",
+  "@sveltejs/kit",
+  "@angular/cli",
+  "@vue/cli-service",
+  "@11ty/eleventy",
+  "@docusaurus/core",
+  "@builder.io/qwik",
+  "@analogjs/platform",
+  "@solidjs/start"
+]), c = /^\s*\[build(\.[\w-]+)?\]/m, d = ["/netlify/functions/", "/netlify/edge-functions/"], l = new TextDecoder();
+function i(e, n) {
+  return e.find((t) => t.path === n);
+}
+function o(e) {
+  return l.decode(e.content);
+}
+function a(e) {
+  const n = e.scripts;
+  if (!n || typeof n != "object") return !1;
+  const t = n.build;
+  return typeof t == "string" && t.trim().length > 0;
+}
+function f(e) {
+  for (const n of ["dependencies", "devDependencies"]) {
+    const t = e[n];
+    if (!(!t || typeof t != "object")) {
+      for (const r of Object.keys(t))
+        if (u.has(r)) return !0;
+    }
+  }
+  return !1;
+}
+function p(e) {
+  const n = i(e, "/netlify.toml");
+  if (n && c.test(o(n)))
+    return { buildRequired: !0, reason: "netlify-toml-build" };
+  const t = i(e, "/package.json");
+  if (t) {
+    let r = null;
+    try {
+      r = JSON.parse(o(t));
+    } catch {
+      r = null;
+    }
+    if (r) {
+      if (a(r))
+        return { buildRequired: !0, reason: "package-json-build-script" };
+      if (f(r))
+        return { buildRequired: !0, reason: "framework-dependency" };
+    }
+  }
+  return e.some((r) => d.some((s) => r.path.startsWith(s))) ? { buildRequired: !0, reason: "functions-directory" } : { buildRequired: !1, reason: null };
+}
+export {
+  p as detectBuild
+};

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

@@ -1,6 +1,7 @@
 export * from './types';
 export * from './digest';
 export * from './readFiles';
+export * from './detectBuild';
 export * from './client';
 export * from './deploy';
 export * from './errors';

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

@@ -1,16 +1,18 @@
 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 { UnsupportedDropError as g, humanizeDropError as u } from "./errors.js";
+import { detectBuild as x } from "./detectBuild.js";
+import { AnonymousDropClient as s } from "./client.js";
+import { deployFiles as u } from "./deploy.js";
+import { UnsupportedDropError as D, humanizeDropError as F } from "./errors.js";
 export {
-  x as AnonymousDropClient,
-  g as UnsupportedDropError,
-  s as deployFiles,
+  s as AnonymousDropClient,
+  D as UnsupportedDropError,
+  u as deployFiles,
+  x as detectBuild,
   o as getDigest,
   n as getSingleNonIndexHtmlFileName,
   l as hasMultipleHtmlFilesWithoutIndex,
-  u as humanizeDropError,
+  F as humanizeDropError,
   i as readDataTransfer,
   m as readFileList,
   p as renameSingleNonIndexHtmlToIndex

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

@@ -1,3 +1,3 @@
 export { default as DropZone } from './DropZone';
-export { AnonymousDropClient, deployFiles, readDataTransfer, readFileList, } from './drop-core';
-export type { DropClient, DropResponse, Digest, DeployResult, DeployProgress, DeployPhase, ProcessedFile, } from './drop-core';
+export { AnonymousDropClient, deployFiles, detectBuild, readDataTransfer, readFileList, } from './drop-core';
+export type { BuildDetection, BuildReason, DropClient, DropResponse, Digest, DeployResult, DeployProgress, DeployPhase, ProcessedFile, } from './drop-core';

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

@@ -1,11 +1,13 @@
-import { default as e } from "./DropZone.js";
-import { readDataTransfer as a, readFileList as p } from "./drop-core/readFiles.js";
-import { AnonymousDropClient as l } from "./drop-core/client.js";
+import { default as r } from "./DropZone.js";
+import { readDataTransfer as p, readFileList as a } from "./drop-core/readFiles.js";
+import { detectBuild as d } from "./drop-core/detectBuild.js";
+import { AnonymousDropClient as m } from "./drop-core/client.js";
 import { deployFiles as n } from "./drop-core/deploy.js";
 export {
-  l as AnonymousDropClient,
-  e as DropZone,
+  m as AnonymousDropClient,
+  r as DropZone,
   n as deployFiles,
-  a as readDataTransfer,
-  p as readFileList
+  d as detectBuild,
+  p as readDataTransfer,
+  a as readFileList
 };

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

@@ -1,4 +1,4 @@
-import { DropClient, ProcessedFile } from './drop-core';
+import { BuildDetection, DropClient, ProcessedFile } from './drop-core';
 /** How the files reached the zone — carried through to analytics. */
 export type DeploySource = 'drag' | 'browse';
 /** The live site handed back once a deploy succeeds. */
@@ -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';
@@ -23,6 +30,7 @@ export type DeployStatus = {
     kind: 'processing';
 } | {
     kind: 'redirecting';
+    target: 'claim' | 'signup';
 } | {
     kind: 'error';
     message: string;
@@ -33,14 +41,17 @@ interface UseDropDeployOptions {
     apiBase?: string;
     client?: DropClient;
     claimUrl: (siteName: string) => string;
+    buildSignupUrl: string;
+    onBuildRequired?: (info: BuildDetection) => void;
     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, buildSignupUrl, onBuildRequired, onDeploy, onError, track, }: UseDropDeployOptions): {
     status: DeployStatus;
     warning: string | null;
     busy: boolean;

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

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

package/dist/components/preact/index.js

@@ -1,23 +1,24 @@
-import { default as f } from "./KeyboardKey/KeyboardKey.js";
+import { default as p } from "./KeyboardKey/KeyboardKey.js";
 import { default as d } from "./Modal/Modal.js";
-import { default as m } from "./Icon/index.js";
-import { default as x } from "./SearchModal/components/SearchLink/SearchLink.js";
-import { default as i } from "./SearchModal/components/SearchHeading/SearchHeading.js";
-import { default as h } from "./SearchModal/components/SearchToggle/SearchToggle.js";
-import { A as S } from "../../chunks/AskNetlify.bx0blyGV.js";
+import { default as s } from "./Icon/index.js";
+import { default as u } from "./SearchModal/components/SearchLink/SearchLink.js";
+import { default as c } from "./SearchModal/components/SearchHeading/SearchHeading.js";
+import { default as n } from "./SearchModal/components/SearchToggle/SearchToggle.js";
+import { A as g } from "../../chunks/AskNetlify.bx0blyGV.js";
 import "preact";
 import "../../chunks/hooks.module.DRcxknIz.js";
-import { default as y } from "./SearchModal/components/SearchModal/SearchModal.js";
-import { default as A } from "./DropZone/DropZone.js";
+import { default as k } from "./SearchModal/components/SearchModal/SearchModal.js";
+import { default as K } from "./DropZone/DropZone.js";
 import "./DropZone/drop-core/readFiles.js";
+import "./DropZone/drop-core/detectBuild.js";
 export {
-  S as AskNetlify,
-  A as DropZone,
-  m as Icon,
-  f as KeyboardKey,
+  g as AskNetlify,
+  K as DropZone,
+  s as Icon,
+  p as KeyboardKey,
   d as Modal,
-  i as SearchHeading,
-  x as SearchLink,
-  y as SearchModal,
-  h as SearchToggle
+  c as SearchHeading,
+  u as SearchLink,
+  k as SearchModal,
+  n as SearchToggle
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@netlify/spark-ui",
   "description": "Assets, design tokens, components, and utilities",
-  "version": "1.27.6",
+  "version": "1.28.0",
   "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 { readDataTransfer, readFileList, type BuildDetection, type DropClient } from './drop-core';
+import {
+  useDropDeploy,
+  type DeployedSite,
+  type DeployError,
+  type DeployStatus,
+  type TrackFn,
+} from './useDropDeploy';
 
 import './DropZone.css';
 
@@ -10,6 +16,13 @@ const DRAG_INACTIVE_MS = 120;
 
 const defaultClaimUrl = (siteName: string) => `https://app.netlify.com/drop/${siteName}`;
 
+/**
+ * Where a build-required drop is sent by default. Mirrors the app's own Drop
+ * page: signup with `next=/drop`, so after signup + email verification the user
+ * lands back on the authenticated Drop page and can build there.
+ */
+const defaultBuildSignupUrl = 'https://app.netlify.com/signup?next=/drop&utm_campaign=drop';
+
 interface Props {
   /** Content the drop layer sits on top of. The zone is invisible until you drag over it. */
   children?: ComponentChildren;
@@ -19,13 +32,35 @@ interface Props {
   client?: DropClient;
   /** Build the "claim this site" URL from the assigned site name (subdomain). */
   claimUrl?: (siteName: string) => string;
+  /**
+   * Where to send a build-required drop (framework source, build command,
+   * functions) when `onBuildRequired` isn't set. Such projects can't deploy
+   * through the anonymous static drop API, so by default the user is redirected
+   * here — the app signup page with `next=/drop` — to build on the
+   * authenticated Drop page. Override to point at your own destination.
+   */
+  buildSignupUrl?: string;
+  /**
+   * Called when a build-required drop is detected, instead of the default
+   * `buildSignupUrl` redirect. Use it to own the hand-off yourself (custom
+   * routing, persisting the drop, gating on auth). When set, the component does
+   * not redirect. The static drop path is unaffected either way.
+   */
+  onBuildRequired?: (info: BuildDetection) => void;
   /** 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;
   /**
@@ -35,6 +70,7 @@ interface Props {
    * Emitted events (all include `dropzone_id` when `analyticsId` is set):
    * - `dropzone_files_dropped`  — files dropped via drag  ({ method: 'drag', file_count })
    * - `dropzone_browse_opened`  — file picker opened       ({ method: 'keyboard' | 'click' })
+   * - `dropzone_build_required` — drop needs a build; handed off to signup ({ method, reason, file_count })
    * - `dropzone_deploy_succeeded` — deploy went live       ({ method, site_name, file_count })
    * - `dropzone_deploy_failed`  — deploy errored out       ({ method, reason, file_count? })
    */
@@ -53,7 +89,10 @@ export default function DropZone({
   apiBase,
   client,
   claimUrl = defaultClaimUrl,
+  buildSignupUrl = defaultBuildSignupUrl,
+  onBuildRequired,
   onDeploy,
+  onError,
   showStatus = true,
   onTrack,
   analyticsId,
@@ -68,7 +107,10 @@ export default function DropZone({
     apiBase,
     client,
     claimUrl,
+    buildSignupUrl,
+    onBuildRequired,
     onDeploy,
+    onError,
     track,
   });
 
@@ -212,7 +254,15 @@ function StatusView({
     case 'processing':
       return <Spinner label="Processing — almost live…" />;
     case 'redirecting':
-      return <Spinner label="Site’s live — taking you to claim it…" />;
+      return (
+        <Spinner
+          label={
+            status.target === 'signup'
+              ? 'This project needs a build — taking you to Netlify…'
+              : 'Site’s live — taking you to claim it…'
+          }
+        />
+      );
 
     case 'uploading': {
       const pct = status.total ? Math.round((status.uploaded / status.total) * 100) : 0;

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

@@ -0,0 +1,130 @@
+import type { ProcessedFile } from './types';
+
+/** Why a drop was judged to need a build — surfaced to analytics and `onBuildRequired`. */
+export type BuildReason =
+  | 'netlify-toml-build'
+  | 'package-json-build-script'
+  | 'framework-dependency'
+  | 'functions-directory';
+
+export interface BuildDetection {
+  /** True when the dropped project needs a build step and can't be served as static files. */
+  buildRequired: boolean;
+  /** The signal that decided it (first match wins), or null for a plain static drop. */
+  reason: BuildReason | null;
+}
+
+/**
+ * Dependencies whose presence implies a build even without an explicit `build`
+ * script (e.g. a framework wired through its own CLI). Not exhaustive — the
+ * `build` script check below catches the common case; this is the backstop.
+ */
+const FRAMEWORK_DEPENDENCIES = new Set([
+  'astro',
+  'next',
+  'nuxt',
+  'gatsby',
+  'vite',
+  'react-scripts',
+  'parcel',
+  'expo',
+  'gridsome',
+  'vuepress',
+  'hexo',
+  '@remix-run/dev',
+  '@sveltejs/kit',
+  '@angular/cli',
+  '@vue/cli-service',
+  '@11ty/eleventy',
+  '@docusaurus/core',
+  '@builder.io/qwik',
+  '@analogjs/platform',
+  '@solidjs/start',
+]);
+
+/**
+ * A `netlify.toml` build config: a bare `[build]` table or any of its
+ * sub-tables (`[build.environment]`, `[build.processing]`, …). Anchored to the
+ * line start so a `[build]` mention inside a string/comment doesn't count.
+ */
+const NETLIFY_TOML_BUILD_SECTION = /^\s*\[build(\.[\w-]+)?\]/m;
+
+/** Zero-config functions directories — their presence alone requires bundling. */
+const FUNCTIONS_DIR_PREFIXES = ['/netlify/functions/', '/netlify/edge-functions/'];
+
+const decoder = new TextDecoder();
+
+/** Find a file at the deploy root by its normalized path (leading slash). */
+function rootFile(files: ProcessedFile[], path: string): ProcessedFile | undefined {
+  return files.find(f => f.path === path);
+}
+
+function text(file: ProcessedFile): string {
+  return decoder.decode(file.content);
+}
+
+/** True if `package.json` declares a non-empty `build` script. */
+function hasBuildScript(pkg: Record<string, unknown>): boolean {
+  const scripts = pkg.scripts;
+  if (!scripts || typeof scripts !== 'object') return false;
+  const build = (scripts as Record<string, unknown>).build;
+  return typeof build === 'string' && build.trim().length > 0;
+}
+
+/** True if any dependency (prod or dev) is a known build-requiring framework. */
+function hasFrameworkDependency(pkg: Record<string, unknown>): boolean {
+  for (const key of ['dependencies', 'devDependencies'] as const) {
+    const deps = pkg[key];
+    if (!deps || typeof deps !== 'object') continue;
+    for (const name of Object.keys(deps)) {
+      if (FRAMEWORK_DEPENDENCIES.has(name)) return true;
+    }
+  }
+  return false;
+}
+
+/**
+ * Decide whether a dropped project needs a build. Runs on the already-read,
+ * root-normalized `ProcessedFile[]` (a dropped `.zip` is expanded and the common
+ * root folder stripped upstream in `readFiles`), so build config sits at the
+ * deploy root, e.g. `/netlify.toml`, `/package.json`.
+ *
+ * The anonymous drop API only performs static deploys, so a build-required
+ * project can't go through it — the consumer redirects such drops to the
+ * authenticated Drop page instead. This heuristic is deliberately lightweight
+ * (no framework-detection dependency): it reads the two config files and looks
+ * for the zero-config functions directories. A plain static site (HTML/CSS/JS,
+ * no build config) returns `{ buildRequired: false }`.
+ */
+export function detectBuild(files: ProcessedFile[]): BuildDetection {
+  const toml = rootFile(files, '/netlify.toml');
+  if (toml && NETLIFY_TOML_BUILD_SECTION.test(text(toml))) {
+    return { buildRequired: true, reason: 'netlify-toml-build' };
+  }
+
+  const pkg = rootFile(files, '/package.json');
+  if (pkg) {
+    let parsed: Record<string, unknown> | null = null;
+    try {
+      parsed = JSON.parse(text(pkg)) as Record<string, unknown>;
+    } catch {
+      // A malformed package.json isn't a reliable build signal on its own —
+      // fall through and let the other heuristics decide.
+      parsed = null;
+    }
+    if (parsed) {
+      if (hasBuildScript(parsed)) {
+        return { buildRequired: true, reason: 'package-json-build-script' };
+      }
+      if (hasFrameworkDependency(parsed)) {
+        return { buildRequired: true, reason: 'framework-dependency' };
+      }
+    }
+  }
+
+  if (files.some(f => FUNCTIONS_DIR_PREFIXES.some(prefix => f.path.startsWith(prefix)))) {
+    return { buildRequired: true, reason: 'functions-directory' };
+  }
+
+  return { buildRequired: false, reason: null };
+}

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

@@ -1,6 +1,7 @@
 export * from './types';
 export * from './digest';
 export * from './readFiles';
+export * from './detectBuild';
 export * from './client';
 export * from './deploy';
 export * from './errors';

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

@@ -2,10 +2,13 @@ export { default as DropZone } from './DropZone';
 export {
   AnonymousDropClient,
   deployFiles,
+  detectBuild,
   readDataTransfer,
   readFileList,
 } from './drop-core';
 export type {
+  BuildDetection,
+  BuildReason,
   DropClient,
   DropResponse,
   Digest,

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

@@ -2,10 +2,12 @@ import { useRef, useState } from 'preact/hooks';
 import {
   AnonymousDropClient,
   deployFiles,
+  detectBuild,
   getSingleNonIndexHtmlFileName,
   hasMultipleHtmlFilesWithoutIndex,
   humanizeDropError,
   renameSingleNonIndexHtmlToIndex,
+  type BuildDetection,
   type DeployProgress,
   type DropClient,
   type ProcessedFile,
@@ -22,6 +24,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' }
@@ -29,7 +39,9 @@ export type DeployStatus =
   | { kind: 'creating' }
   | { kind: 'uploading'; uploaded: number; total: number }
   | { kind: 'processing' }
-  | { kind: 'redirecting' }
+  // `claim` follows a static deploy (hand off to the claim page); `signup`
+  // follows a build-required drop (hand off to the authenticated Drop page).
+  | { kind: 'redirecting'; target: 'claim' | 'signup' }
   | { kind: 'error'; message: string };
 
 /** Provider-agnostic analytics sink. */
@@ -39,7 +51,10 @@ interface UseDropDeployOptions {
   apiBase?: string;
   client?: DropClient;
   claimUrl: (siteName: string) => string;
+  buildSignupUrl: string;
+  onBuildRequired?: (info: BuildDetection) => void;
   onDeploy?: (site: DeployedSite) => void;
+  onError?: (error: DeployError) => void;
   track: TrackFn;
 }
 
@@ -76,7 +91,10 @@ export function useDropDeploy({
   apiBase,
   client,
   claimUrl,
+  buildSignupUrl,
+  onBuildRequired,
   onDeploy,
+  onError,
   track,
 }: UseDropDeployOptions) {
   const [status, setStatus] = useState<DeployStatus>({ kind: 'idle' });
@@ -96,9 +114,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>) => {
@@ -123,6 +144,30 @@ export function useDropDeploy({
         track('dropzone_files_dropped', { method: source, file_count: files.length });
       }
 
+      // Build-required projects can't deploy through the anonymous drop API —
+      // it only performs static deploys, so building one this way yields a
+      // broken site. Detect them up front and hand off to the authenticated
+      // Drop page (via signup) instead. Consumers can override the hand-off
+      // with `onBuildRequired`.
+      const build = detectBuild(files);
+      if (build.buildRequired) {
+        track('dropzone_build_required', {
+          method: source,
+          reason: build.reason,
+          file_count: files.length,
+        });
+        if (onBuildRequired) {
+          // The consumer owns the hand-off now; drop back to idle so the zone
+          // stays usable rather than sitting on a spinner.
+          setStatus({ kind: 'idle' });
+          onBuildRequired(build);
+          return;
+        }
+        setStatus({ kind: 'redirecting', target: 'signup' });
+        window.location.assign(buildSignupUrl);
+        return;
+      }
+
       setWarning(indexHtmlWarning(files));
 
       const {
@@ -144,7 +189,7 @@ export function useDropDeploy({
         /* private mode / storage disabled — non-fatal */
       }
 
-      setStatus({ kind: 'redirecting' });
+      setStatus({ kind: 'redirecting', target: 'claim' });
       // Fired before the redirect below. Note: the navigation can cut a
       // fire-and-forget analytics request short — see the docs for delivery
       // hardening (sendBeacon / deferring the redirect).