@netlify/spark-ui 1.26.0-alpha.6 → 1.26.0-alpha.7

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;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-s);width:100%;height:100%;min-height:18rem;padding:var(--space-2xl, 2.5rem) var(--space-l, 1.5rem);text-align:center;color:var(--color-text-default, #14161a);background:var(--color-bg, #fff);border:2px dashed var(--color-border-default, rgba(0, 0, 0, .15));border-radius:var(--n-dropzone-radius);transition:border-color .2s ease-out,background-color .2s ease-out,box-shadow .2s ease-out}.n-dropzone.is-active{border-color:var(--n-dropzone-accent);background:var(--color-bg-2, #f6f8fa);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:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:radial-gradient(120% 120% at 50% 0%,color-mix(in srgb,var(--n-dropzone-accent) 8%,transparent),transparent 60%);opacity:0;transition:opacity .2s ease-out;pointer-events:none}.n-dropzone.is-active:before{opacity:1}.n-dropzone-panel{display:flex;flex-direction:column;align-items:center;gap:var(--space-xs, .75rem);width:100%;animation:dropPanelIn .32s cubic-bezier(.22,1,.36,1) both}@keyframes dropPanelIn{0%{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}.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-glyph{display:grid;place-items:center;width:3.5rem;height:3.5rem;color:var(--n-dropzone-accent)}.n-dropzone-glyph svg{width:100%;height:100%}.n-dropzone-glyph-arrow{animation:dropArrowBob 2.4s ease-in-out infinite}.n-dropzone.is-active .n-dropzone-glyph-arrow{animation-duration:.9s}@keyframes dropArrowBob{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}.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{display:flex;align-items:center;gap:var(--space-2xs, .5rem);margin:0;margin-block-start:var(--space-xs, .75rem);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;text-align:left}.n-dropzone-warning-icon{flex:none;width:1rem;height:1rem}@media (prefers-reduced-motion: reduce){.n-dropzone,.n-dropzone-panel,.n-dropzone-glyph-arrow,.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;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}.n-dropzone.is-active:not(.is-bare) .n-dropzone-content,.n-dropzone.is-busy:not(.is-bare) .n-dropzone-content{opacity:0;pointer-events:none}.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/DropZone.d.ts

@@ -1,5 +1,9 @@
+import { ComponentChildren } from 'preact';
 import { DropClient } from './drop-core';
+import { DeployedSite, TrackFn } from './useDropDeploy';
 interface Props {
+    /** Content the drop layer sits on top of. The zone is invisible until you drag over it. */
+    children?: ComponentChildren;
     /** Override the API base (e.g. for a staging environment). */
     apiBase?: string;
     /** Inject a custom client (e.g. for testing). Defaults to AnonymousDropClient. */
@@ -7,13 +11,31 @@ interface Props {
     /** Build the "claim this site" URL from the assigned site name (subdomain). */
     claimUrl?: (siteName: string) => string;
     /** Called once the deploy is live. */
-    onDeploy?: (result: {
-        url: string;
-        token: string;
-        siteName: string;
-        siteId: string;
-    }) => void;
+    onDeploy?: (result: DeployedSite) => 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.
+     */
+    showStatus?: boolean;
+    /**
+     * Analytics hook. Called at each tracked moment with an event name and
+     * properties. Stays provider-agnostic — wire it to Segment/Amplitude/GA in the
+     * consuming app, e.g. `onTrack={(name, props) => new Analytics().track(name, 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_deploy_succeeded` — deploy went live       ({ method, site_name, file_count })
+     */
+    onTrack?: TrackFn;
+    /**
+     * Stable identifier for this instance, attached to every tracked event as
+     * `dropzone_id`. Set it when a page renders more than one Drop Zone so the
+     * events can be told apart in Amplitude.
+     */
+    analyticsId?: string;
     className?: string;
 }
-export default function DropZone({ apiBase, client, claimUrl, onDeploy, className, }: Props): import("preact").JSX.Element;
+export default function DropZone({ children, apiBase, client, claimUrl, onDeploy, showStatus, onTrack, analyticsId, className, }: Props): import("preact").JSX.Element;
 export {};

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

@@ -1,135 +1,133 @@
 import { u as e } from "../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import { d as m, A as C } from "../../../chunks/hooks.module.DRcxknIz.js";
-import I from "../Icon/index.js";
-import { getSingleNonIndexHtmlFileName as N, hasMultipleHtmlFilesWithoutIndex as D, readDataTransfer as F, readFileList as T } from "./drop-core/readFiles.js";
-import { AnonymousDropClient as M } from "./drop-core/client.js";
-import { deployFiles as P } from "./drop-core/deploy.js";
-import { Fragment as k } from "preact";
-import '../../../assets/DropZone.css';const U = (n) => `https://app.netlify.com/drop/${n}`;
-function A(n) {
-  switch (n.phase) {
-    case "creating":
-      return { kind: "creating" };
-    case "uploading":
-      return { kind: "uploading", uploaded: n.uploaded ?? 0, total: n.total ?? 0 };
-    case "processing":
-    case "ready":
-      return { kind: "processing" };
-  }
-}
-function O({
-  apiBase: n,
-  client: p,
-  claimUrl: u = U,
-  onDeploy: i,
-  className: s
+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({
+  children: n,
+  apiBase: l,
+  client: i,
+  claimUrl: s = F,
+  onDeploy: u,
+  showStatus: f = !0,
+  onTrack: d,
+  analyticsId: g,
+  className: w
 }) {
-  const [o, a] = m({ kind: "idle" }), [w, d] = m(null), [v, g] = m(!1), z = C(p ?? new M(n)).current, h = o.kind !== "idle" && o.kind !== "error";
-  async function y(t) {
-    d(null), a({ kind: "reading" });
-    try {
-      const r = await t();
-      if (!r.length) {
-        a({ kind: "error", message: "No files found to deploy." });
-        return;
-      }
-      const b = N(r);
-      b ? d(`No index.html found — "${b}" won’t be served at the site root.`) : D(r) && d("No index.html found — your site may not have a landing page.");
-      const { url: $, token: f, deploy: c } = await P(z, r, {
-        onProgress: (x) => a(A(x))
-      });
-      try {
-        localStorage.setItem("drop-token", f), localStorage.setItem("dropSiteName", c.subdomain);
-      } catch {
-      }
-      a({ kind: "redirecting" }), i == null || i({ url: $, token: f, siteName: c.subdomain, siteId: c.id }), window.location.assign(`${u(c.subdomain)}#drop_token=${f}`);
-    } catch (r) {
-      a({ kind: "error", message: r instanceof Error ? r.message : String(r) });
-    }
-  }
-  function S() {
-    d(null), a({ kind: "idle" });
-  }
+  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({
+    apiBase: l,
+    client: i,
+    claimUrl: s,
+    onDeploy: u,
+    track: v
+  }), { active: p, keepActive: C, endDrag: T } = M(), 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 = [
+    "n-dropzone",
+    p && "is-active",
+    o && "is-busy",
+    !f && "is-bare",
+    w
+  ].filter(Boolean).join(" ");
   return /* @__PURE__ */ e(
     "div",
     {
-      class: `n-dropzone${v ? " is-active" : ""}${h ? " is-busy" : ""}${s ? ` ${s}` : ""}`,
-      "data-state": o.kind,
-      onDragOver: (t) => {
-        h || (t.preventDefault(), g(!0));
+      class: R,
+      "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());
       },
-      onDragLeave: (t) => {
-        t.currentTarget === t.target && g(!1);
+      onDrop: (r) => {
+        if (r.preventDefault(), T(), o) return;
+        const t = r.dataTransfer;
+        t && b(() => I(t), "drag");
       },
-      onDrop: (t) => {
-        if (t.preventDefault(), g(!1), h) return;
-        const r = t.dataTransfer;
-        r && y(() => F(r));
+      onClick: (r) => {
+        !o && r.target === r.currentTarget && y("click");
+      },
+      onKeyDown: (r) => {
+        o || (r.key === "Enter" || r.key === " ") && (r.preventDefault(), y("keyboard"));
       },
       children: [
-        /* @__PURE__ */ e("div", { class: "n-dropzone-panel", children: /* @__PURE__ */ e(L, { status: o, onReset: S, onFiles: y }) }, o.kind),
-        w && o.kind !== "error" && /* @__PURE__ */ e("p", { class: "n-dropzone-warning n-fadeIn", role: "status", children: [
-          /* @__PURE__ */ e(I, { name: "lightbulb", className: "n-dropzone-warning-icon" }),
-          w
-        ] })
+        /* @__PURE__ */ e("div", { class: "n-dropzone-content", children: n }),
+        /* @__PURE__ */ e(
+          "input",
+          {
+            ref: m,
+            type: "file",
+            hidden: !0,
+            multiple: !0,
+            webkitdirectory: "",
+            directory: "",
+            onChange: (r) => {
+              var z;
+              const t = r.currentTarget;
+              (z = t.files) != null && z.length && b(() => E(t.files), "browse"), t.value = "";
+            }
+          }
+        ),
+        _ && /* @__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 })
+            ]
+          },
+          a.kind === "idle" ? "active" : a.kind
+        )
       ]
     }
   );
 }
-function L({
+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);
+  }, endDrag: () => {
+    clearTimeout(i.current), l(!1);
+  } };
+}
+function O({
   status: n,
-  onReset: p,
-  onFiles: u
+  active: l,
+  onReset: i
 }) {
   switch (n.kind) {
+    // Idle-but-active means a drag is hovering the zone.
     case "idle":
-      return /* @__PURE__ */ e(k, { children: [
-        /* @__PURE__ */ e(R, {}),
-        /* @__PURE__ */ e("p", { class: "n-dropzone-title", children: "Drag & drop your site folder or zip" }),
-        /* @__PURE__ */ e("p", { class: "n-dropzone-subtitle", children: "Deploys instantly to a live URL — no account needed." }),
-        /* @__PURE__ */ e("label", { class: "n-dropzone-browse", children: [
-          "Browse files",
-          /* @__PURE__ */ e(
-            "input",
-            {
-              type: "file",
-              hidden: !0,
-              multiple: !0,
-              webkitdirectory: "",
-              directory: "",
-              onChange: (i) => {
-                var o;
-                const s = i.currentTarget;
-                (o = s.files) != null && o.length && u(() => T(s.files));
-              }
-            }
-          )
-        ] })
-      ] });
+      return l ? /* @__PURE__ */ e("p", { class: "n-dropzone-hint", children: "Drop to deploy" }) : null;
     case "reading":
-      return /* @__PURE__ */ e(l, { label: "Reading files…" });
+      return /* @__PURE__ */ e(c, { label: "Reading files…" });
     case "creating":
-      return /* @__PURE__ */ e(l, { label: "Creating deploy…" });
+      return /* @__PURE__ */ e(c, { label: "Creating deploy…" });
     case "processing":
-      return /* @__PURE__ */ e(l, { label: "Processing — almost live…" });
+      return /* @__PURE__ */ e(c, { label: "Processing — almost live…" });
     case "redirecting":
-      return /* @__PURE__ */ e(l, { label: "Site’s live — taking you to claim it…" });
+      return /* @__PURE__ */ e(c, { label: "Site’s live — taking you to claim it…" });
     case "uploading": {
-      const i = n.total ? Math.round(n.uploaded / n.total * 100) : 0;
-      return /* @__PURE__ */ e(k, { children: [
-        /* @__PURE__ */ e(l, { label: `Uploading ${n.uploaded}/${n.total} files…` }),
-        /* @__PURE__ */ e("div", { class: "n-dropzone-progress", role: "progressbar", "aria-valuenow": i, children: /* @__PURE__ */ e("div", { class: "n-dropzone-progress-bar", style: { width: `${i}%` } }) })
+      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…` }),
+        /* @__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(k, { children: [
+      return /* @__PURE__ */ e(D, { 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: p, children: "Try again" })
+        /* @__PURE__ */ e("button", { type: "button", class: "n-dropzone-browse", onClick: i, children: "Try again" })
       ] });
   }
 }
-function l({ label: n }) {
+function c({ 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: [
@@ -139,31 +137,6 @@ function l({ label: n }) {
     ] })
   ] });
 }
-function R() {
-  return /* @__PURE__ */ e("span", { class: "n-dropzone-glyph", "aria-hidden": "true", children: /* @__PURE__ */ e("svg", { viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-    /* @__PURE__ */ e(
-      "path",
-      {
-        class: "n-dropzone-glyph-tray",
-        d: "M8 30v6a4 4 0 0 0 4 4h24a4 4 0 0 0 4-4v-6",
-        stroke: "currentColor",
-        "stroke-width": "3",
-        "stroke-linecap": "round"
-      }
-    ),
-    /* @__PURE__ */ e(
-      "path",
-      {
-        class: "n-dropzone-glyph-arrow",
-        d: "M24 32V10m0 0-8 8m8-8 8 8",
-        stroke: "currentColor",
-        "stroke-width": "3",
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round"
-      }
-    )
-  ] }) });
-}
 export {
-  O as default
+  K as default
 };

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

@@ -0,0 +1,50 @@
+import { 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. */
+export interface DeployedSite {
+    url: string;
+    token: string;
+    siteName: string;
+    siteId: string;
+}
+/** Finite states of a single deploy attempt. */
+export type DeployStatus = {
+    kind: 'idle';
+} | {
+    kind: 'reading';
+} | {
+    kind: 'creating';
+} | {
+    kind: 'uploading';
+    uploaded: number;
+    total: number;
+} | {
+    kind: 'processing';
+} | {
+    kind: 'redirecting';
+} | {
+    kind: 'error';
+    message: string;
+};
+/** Provider-agnostic analytics sink. */
+export type TrackFn = (event: string, properties?: Record<string, unknown>) => void;
+interface UseDropDeployOptions {
+    apiBase?: string;
+    client?: DropClient;
+    claimUrl: (siteName: string) => string;
+    onDeploy?: (site: DeployedSite) => 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): {
+    status: DeployStatus;
+    warning: string | null;
+    busy: boolean;
+    deploy: (read: () => Promise<ProcessedFile[]>, source: DeploySource) => Promise<void>;
+    reset: () => void;
+};
+export {};

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

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

package/package.json

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

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

@@ -1,87 +1,95 @@
 @import url('../../../styles/animations.css');
 
 /* ----------------------------- */
-/* Container                     */
+/* Container (invisible layer)   */
 /* ----------------------------- */
+/* The zone wraps arbitrary content and stays out of the way until a drag
+   enters it. Only a subtle dashed border hints that it's a drop target. */
 .n-dropzone {
   --n-dropzone-accent: var(--color-brand-primary, #0e7fe1);
   --n-dropzone-radius: var(--radius-2xl, 1rem);
 
   box-sizing: border-box;
   position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-s);
-  width: 100%;
-  height: 100%;
-  min-height: 18rem;
-  padding: var(--space-2xl, 2.5rem) var(--space-l, 1.5rem);
-  text-align: center;
+  min-height: 4rem;
   color: var(--color-text-default, #14161a);
-  background: var(--color-bg, #fff);
   border: 2px dashed var(--color-border-default, rgba(0, 0, 0, 0.15));
   border-radius: var(--n-dropzone-radius);
+  outline: none;
   transition:
     border-color 200ms ease-out,
     background-color 200ms ease-out,
     box-shadow 200ms 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);
+}
+
 /* Drag-over: the target glows without resizing. */
 .n-dropzone.is-active {
   border-color: var(--n-dropzone-accent);
-  background: var(--color-bg-2, #f6f8fa);
   box-shadow: 0 0 0 4px color-mix(in srgb, var(--n-dropzone-accent) 18%, transparent);
 }
 
+/* While deploying, the dashes settle into a solid, quieter frame. */
 .n-dropzone.is-busy {
   border-style: solid;
   border-color: var(--color-border-subtle, rgba(0, 0, 0, 0.08));
 }
 
-/* A soft accent wash that fades in while dragging. */
-.n-dropzone::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  background: radial-gradient(
-    120% 120% at 50% 0%,
-    color-mix(in srgb, var(--n-dropzone-accent) 8%, transparent),
-    transparent 60%
-  );
-  opacity: 0;
-  transition: opacity 200ms ease-out;
-  pointer-events: none;
+/* ----------------------------- */
+/* Wrapped content               */
+/* ----------------------------- */
+/* Kept in flow (so the zone doesn't collapse) but faded out of the way once a
+   drag enters or a deploy starts, letting the overlay take over. */
+.n-dropzone-content {
+  transition: opacity 150ms ease-out;
 }
 
-.n-dropzone.is-active::before {
-  opacity: 1;
+/* `.is-bare` (showStatus={false}) keeps content visible so a custom animation
+   can play in place of the built-in overlay. */
+.n-dropzone.is-active:not(.is-bare) .n-dropzone-content,
+.n-dropzone.is-busy:not(.is-bare) .n-dropzone-content {
+  opacity: 0;
+  pointer-events: none;
 }
 
 /* ----------------------------- */
-/* State panel (keyed → replays) */
+/* Overlay (drag tint / status)  */
 /* ----------------------------- */
-.n-dropzone-panel {
+.n-dropzone-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--space-xs, 0.75rem);
-  width: 100%;
-  animation: dropPanelIn 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
+  justify-content: center;
+  gap: var(--space-s, 1rem);
+  padding: var(--space-l, 1.5rem);
+  text-align: center;
+  border-radius: inherit;
+  /* During a hover-only drag the overlay is a translucent wash and lets the
+     drop event fall through to the container beneath it. */
+  pointer-events: none;
+  background: color-mix(in srgb, var(--n-dropzone-accent) 10%, transparent);
 }
 
-@keyframes dropPanelIn {
-  from {
-    opacity: 0;
-    transform: translateY(8px) scale(0.98);
-  }
-  to {
-    opacity: 1;
-    transform: none;
-  }
+/* Deploying / error: opaque scrim that captures interaction. */
+.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);
+  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 {
@@ -103,41 +111,6 @@
   line-height: var(--line-height-text, 1.5);
 }
 
-/* ----------------------------- */
-/* Idle upload glyph             */
-/* ----------------------------- */
-.n-dropzone-glyph {
-  display: grid;
-  place-items: center;
-  width: 3.5rem;
-  height: 3.5rem;
-  color: var(--n-dropzone-accent);
-}
-
-.n-dropzone-glyph svg {
-  width: 100%;
-  height: 100%;
-}
-
-/* The arrow gently bobs to invite a drop; the tray stays put. */
-.n-dropzone-glyph-arrow {
-  animation: dropArrowBob 2.4s ease-in-out infinite;
-}
-
-.n-dropzone.is-active .n-dropzone-glyph-arrow {
-  animation-duration: 0.9s;
-}
-
-@keyframes dropArrowBob {
-  0%,
-  100% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(-3px);
-  }
-}
-
 /* ----------------------------- */
 /* Loading / spinner             */
 /* ----------------------------- */
@@ -222,24 +195,13 @@
 /* Warning banner                */
 /* ----------------------------- */
 .n-dropzone-warning {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2xs, 0.5rem);
   margin: 0;
-  margin-block-start: var(--space-xs, 0.75rem);
   padding: var(--space-2xs, 0.5rem) var(--space-s, 1rem);
   max-width: 32rem;
   border-radius: var(--radius-m, 0.5rem);
   background: var(--color-warning-bg, #fdf3d7);
   color: var(--color-warning-text, #7a5b00);
   font-size: 0.8125rem;
-  text-align: left;
-}
-
-.n-dropzone-warning-icon {
-  flex: none;
-  width: 1rem;
-  height: 1rem;
 }
 
 /* ----------------------------- */
@@ -247,8 +209,7 @@
 /* ----------------------------- */
 @media (prefers-reduced-motion: reduce) {
   .n-dropzone,
-  .n-dropzone-panel,
-  .n-dropzone-glyph-arrow,
+  .n-dropzone-overlay,
   .n-dropzone-spinner,
   .n-dropzone-progress-bar {
     animation: none !important;

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

@@ -1,29 +1,18 @@
-import { useRef, useState } from 'preact/hooks';
-import Icon from '../Icon';
-import {
-  AnonymousDropClient,
-  deployFiles,
-  getSingleNonIndexHtmlFileName,
-  hasMultipleHtmlFilesWithoutIndex,
-  readDataTransfer,
-  readFileList,
-  type DeployProgress,
-  type DropClient,
-  type ProcessedFile,
-} from './drop-core';
+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 './DropZone.css';
 
-type Status =
-  | { kind: 'idle' }
-  | { kind: 'reading' }
-  | { kind: 'creating' }
-  | { kind: 'uploading'; uploaded: number; total: number }
-  | { kind: 'processing' }
-  | { kind: 'redirecting' }
-  | { kind: 'error'; message: string };
+/** How long after the last `dragover` event we consider the drag gone. */
+const DRAG_INACTIVE_MS = 120;
+
+const defaultClaimUrl = (siteName: string) => `https://app.netlify.com/drop/${siteName}`;
 
 interface Props {
+  /** Content the drop layer sits on top of. The zone is invisible until you drag over it. */
+  children?: ComponentChildren;
   /** Override the API base (e.g. for a staging environment). */
   apiBase?: string;
   /** Inject a custom client (e.g. for testing). Defaults to AnonymousDropClient. */
@@ -31,160 +20,189 @@ interface Props {
   /** Build the "claim this site" URL from the assigned site name (subdomain). */
   claimUrl?: (siteName: string) => string;
   /** Called once the deploy is live. */
-  onDeploy?: (result: { url: string; token: string; siteName: string; siteId: string }) => void;
+  onDeploy?: (result: DeployedSite) => 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.
+   */
+  showStatus?: boolean;
+  /**
+   * Analytics hook. Called at each tracked moment with an event name and
+   * properties. Stays provider-agnostic — wire it to Segment/Amplitude/GA in the
+   * consuming app, e.g. `onTrack={(name, props) => new Analytics().track(name, 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_deploy_succeeded` — deploy went live       ({ method, site_name, file_count })
+   */
+  onTrack?: TrackFn;
+  /**
+   * Stable identifier for this instance, attached to every tracked event as
+   * `dropzone_id`. Set it when a page renders more than one Drop Zone so the
+   * events can be told apart in Amplitude.
+   */
+  analyticsId?: string;
   className?: string;
 }
 
-const defaultClaimUrl = (siteName: string) => `https://app.netlify.com/drop/${siteName}`;
-
-function progressPhaseToStatus(e: DeployProgress): Status {
-  switch (e.phase) {
-    case 'creating':
-      return { kind: 'creating' };
-    case 'uploading':
-      return { kind: 'uploading', uploaded: e.uploaded ?? 0, total: e.total ?? 0 };
-    case 'processing':
-    case 'ready':
-      return { kind: 'processing' };
-  }
-}
-
 export default function DropZone({
+  children,
   apiBase,
   client,
   claimUrl = defaultClaimUrl,
   onDeploy,
+  showStatus = true,
+  onTrack,
+  analyticsId,
   className,
 }: Props) {
-  const [status, setStatus] = useState<Status>({ kind: 'idle' });
-  const [warning, setWarning] = useState<string | null>(null);
-  const [active, setActive] = useState(false);
-  const dropClient = useRef(client ?? new AnonymousDropClient(apiBase)).current;
-
-  const busy = status.kind !== 'idle' && status.kind !== 'error';
-
-  async function run(read: () => Promise<ProcessedFile[]>) {
-    setWarning(null);
-    setStatus({ kind: 'reading' });
-    try {
-      const files = await read();
-      if (!files.length) {
-        setStatus({ kind: 'error', message: 'No files found to deploy.' });
-        return;
-      }
-
-      // Surface index.html warnings without blocking the deploy.
-      const singleNonIndex = getSingleNonIndexHtmlFileName(files);
-      if (singleNonIndex) {
-        setWarning(`No index.html found — "${singleNonIndex}" won’t be served at the site root.`);
-      } else if (hasMultipleHtmlFilesWithoutIndex(files)) {
-        setWarning('No index.html found — your site may not have a landing page.');
-      }
-
-      const { url, token, deploy } = await deployFiles(dropClient, files, {
-        onProgress: e => setStatus(progressPhaseToStatus(e)),
-      });
-
-      // Best-effort local persistence. Note this does NOT reach the dashboard:
-      // localStorage is per-origin, so a token written here (e.g. www.netlify.com)
-      // is invisible to app.netlify.com. The cross-origin handoff is the URL
-      // fragment below; this only helps if the drop and claim share an origin.
-      try {
-        localStorage.setItem('drop-token', token);
-        localStorage.setItem('dropSiteName', deploy.subdomain);
-      } catch {
-        /* private mode / storage disabled — non-fatal */
-      }
-
-      setStatus({ kind: 'redirecting' });
-      onDeploy?.({ url, token, siteName: deploy.subdomain, siteId: deploy.id });
-
-      // Hand the drop token to the dashboard via the URL fragment — localStorage
-      // does not cross origins. The dashboard's /drop/:name page reads
-      // `#drop_token=` and persists it for the claim + post-signup steps.
-      window.location.assign(`${claimUrl(deploy.subdomain)}#drop_token=${token}`);
-    } catch (err) {
-      setStatus({ kind: 'error', message: err instanceof Error ? err.message : String(err) });
-    }
-  }
-
-  function reset() {
-    setWarning(null);
-    setStatus({ kind: 'idle' });
-  }
+  // Tag every event with this instance's id so multiple zones on a page can be
+  // told apart, then hand it off to the consumer's analytics.
+  const track: TrackFn = (event, properties = {}) =>
+    onTrack?.(event, analyticsId ? { dropzone_id: analyticsId, ...properties } : properties);
+
+  const { status, warning, busy, deploy, reset } = useDropDeploy({
+    apiBase,
+    client,
+    claimUrl,
+    onDeploy,
+    track,
+  });
+
+  const { active, keepActive, endDrag } = useDragActive();
+
+  const inputRef = useRef<HTMLInputElement>(null);
+  const openPicker = (method: 'keyboard' | 'click') => {
+    track('dropzone_browse_opened', { method });
+    inputRef.current?.click();
+  };
+
+  // The overlay only paints when there's something to show — dragging, deploying,
+  // or an error. With `showStatus` off, the consumer drives their own feedback.
+  const showOverlay = showStatus && (active || busy || status.kind === 'error');
+  const rootClass = [
+    'n-dropzone',
+    active && 'is-active',
+    busy && 'is-busy',
+    !showStatus && 'is-bare',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
 
   return (
     <div
-      class={`n-dropzone${active ? ' is-active' : ''}${busy ? ' is-busy' : ''}${className ? ` ${className}` : ''}`}
+      class={rootClass}
       data-state={status.kind}
+      role="button"
+      tabIndex={busy ? -1 : 0}
+      aria-label="Drop a site folder or zip here to deploy it, or press Enter to browse for files"
+      aria-busy={busy}
       onDragOver={e => {
         if (busy) return;
         e.preventDefault();
-        setActive(true);
-      }}
-      onDragLeave={e => {
-        // Ignore drag-leave bubbling from children.
-        if (e.currentTarget === e.target) setActive(false);
+        keepActive();
       }}
       onDrop={e => {
         e.preventDefault();
-        setActive(false);
+        endDrag();
         if (busy) return;
         const dt = e.dataTransfer;
         if (!dt) return;
         // Capture entries synchronously — readDataTransfer reads them before
         // its first await, so the DataTransfer isn't detached out from under us.
-        run(() => readDataTransfer(dt));
+        deploy(() => readDataTransfer(dt), 'drag');
+      }}
+      onClick={e => {
+        // Only the zone's own empty area opens the picker; clicks that land on
+        // children are left to those children so they stay interactive.
+        if (!busy && e.target === e.currentTarget) openPicker('click');
+      }}
+      onKeyDown={e => {
+        if (busy) return;
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          openPicker('keyboard');
+        }
       }}
     >
-      {/* keyed so each state change remounts and replays its enter animation */}
-      <div class="n-dropzone-panel" key={status.kind}>
-        <StatusView status={status} onReset={reset} onFiles={run} />
-      </div>
-
-      {warning && status.kind !== 'error' && (
-        <p class="n-dropzone-warning n-fadeIn" role="status">
-          <Icon name="lightbulb" className="n-dropzone-warning-icon" />
-          {warning}
-        </p>
+      <div class="n-dropzone-content">{children}</div>
+
+      {/* Invisible-but-present fallback: keyboard/click opens the file picker. */}
+      <input
+        ref={inputRef}
+        type="file"
+        hidden
+        multiple
+        // @ts-expect-error non-standard directory-picker attributes
+        webkitdirectory=""
+        directory=""
+        onChange={e => {
+          const input = e.currentTarget as HTMLInputElement;
+          if (input.files?.length) deploy(() => readFileList(input.files!), 'browse');
+          input.value = '';
+        }}
+      />
+
+      {showOverlay && (
+        <div
+          class="n-dropzone-overlay n-fadeIn"
+          key={status.kind === 'idle' ? 'active' : status.kind}
+        >
+          <StatusView status={status} active={active} onReset={reset} />
+          {warning && status.kind !== 'error' && busy && (
+            <p class="n-dropzone-warning" role="status">
+              {warning}
+            </p>
+          )}
+        </div>
       )}
     </div>
   );
 }
 
+/**
+ * Track whether a drag is currently over the zone. A drag has no reliable
+ * "cancelled" event — pressing Escape or dropping elsewhere just stops the
+ * stream of `dragover` events — so we stay active only while they keep arriving
+ * and clear shortly after they stop. This also handles drags over children,
+ * where `dragleave` targets a child rather than the zone.
+ */
+function useDragActive() {
+  const [active, setActive] = useState(false);
+  const timer = useRef<ReturnType<typeof setTimeout>>();
+
+  useEffect(() => () => clearTimeout(timer.current), []);
+
+  const keepActive = () => {
+    setActive(true);
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => setActive(false), DRAG_INACTIVE_MS);
+  };
+
+  const endDrag = () => {
+    clearTimeout(timer.current);
+    setActive(false);
+  };
+
+  return { active, keepActive, endDrag };
+}
+
 function StatusView({
   status,
+  active,
   onReset,
-  onFiles,
 }: {
-  status: Status;
+  status: DeployStatus;
+  active: boolean;
   onReset: () => void;
-  onFiles: (read: () => Promise<ProcessedFile[]>) => void;
 }) {
   switch (status.kind) {
+    // Idle-but-active means a drag is hovering the zone.
     case 'idle':
-      return (
-        <>
-          <UploadGlyph />
-          <p class="n-dropzone-title">Drag &amp; drop your site folder or zip</p>
-          <p class="n-dropzone-subtitle">Deploys instantly to a live URL — no account needed.</p>
-          <label class="n-dropzone-browse">
-            Browse files
-            <input
-              type="file"
-              hidden
-              multiple
-              // @ts-expect-error non-standard directory-picker attributes
-              webkitdirectory=""
-              directory=""
-              onChange={e => {
-                const input = e.currentTarget as HTMLInputElement;
-                if (input.files?.length) onFiles(() => readFileList(input.files!));
-              }}
-            />
-          </label>
-        </>
-      );
+      return active ? <p class="n-dropzone-hint">Drop to deploy</p> : null;
 
     case 'reading':
       return <Spinner label="Reading files…" />;
@@ -232,27 +250,3 @@ function Spinner({ label }: { label: string }) {
     </div>
   );
 }
-
-function UploadGlyph() {
-  return (
-    <span class="n-dropzone-glyph" aria-hidden="true">
-      <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path
-          class="n-dropzone-glyph-tray"
-          d="M8 30v6a4 4 0 0 0 4 4h24a4 4 0 0 0 4-4v-6"
-          stroke="currentColor"
-          stroke-width="3"
-          stroke-linecap="round"
-        />
-        <path
-          class="n-dropzone-glyph-arrow"
-          d="M24 32V10m0 0-8 8m8-8 8 8"
-          stroke="currentColor"
-          stroke-width="3"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-      </svg>
-    </span>
-  );
-}

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

@@ -0,0 +1,149 @@
+import { useRef, useState } from 'preact/hooks';
+import {
+  AnonymousDropClient,
+  deployFiles,
+  getSingleNonIndexHtmlFileName,
+  hasMultipleHtmlFilesWithoutIndex,
+  type DeployProgress,
+  type DropClient,
+  type 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. */
+export interface DeployedSite {
+  url: string;
+  token: string;
+  siteName: string;
+  siteId: string;
+}
+
+/** Finite states of a single deploy attempt. */
+export type DeployStatus =
+  | { kind: 'idle' }
+  | { kind: 'reading' }
+  | { kind: 'creating' }
+  | { kind: 'uploading'; uploaded: number; total: number }
+  | { kind: 'processing' }
+  | { kind: 'redirecting' }
+  | { kind: 'error'; message: string };
+
+/** Provider-agnostic analytics sink. */
+export type TrackFn = (event: string, properties?: Record<string, unknown>) => void;
+
+interface UseDropDeployOptions {
+  apiBase?: string;
+  client?: DropClient;
+  claimUrl: (siteName: string) => string;
+  onDeploy?: (site: DeployedSite) => void;
+  track: TrackFn;
+}
+
+/** Map a low-level deploy progress event onto our UI status. */
+function progressToStatus(e: DeployProgress): DeployStatus {
+  switch (e.phase) {
+    case 'creating':
+      return { kind: 'creating' };
+    case 'uploading':
+      return { kind: 'uploading', uploaded: e.uploaded ?? 0, total: e.total ?? 0 };
+    case 'processing':
+    case 'ready':
+      return { kind: 'processing' };
+  }
+}
+
+/** Inspect the file set and return a non-blocking index.html warning, if any. */
+function indexHtmlWarning(files: ProcessedFile[]): string | null {
+  const singleNonIndex = getSingleNonIndexHtmlFileName(files);
+  if (singleNonIndex) {
+    return `No index.html found — "${singleNonIndex}" won’t be served at the site root.`;
+  }
+  if (hasMultipleHtmlFilesWithoutIndex(files)) {
+    return 'No index.html found — your site may not have a landing page.';
+  }
+  return null;
+}
+
+/**
+ * Owns the deploy state machine and its side effects (upload, local persistence,
+ * analytics, redirect), keeping DropZone a thin view over the returned `status`.
+ */
+export function useDropDeploy({
+  apiBase,
+  client,
+  claimUrl,
+  onDeploy,
+  track,
+}: UseDropDeployOptions) {
+  const [status, setStatus] = useState<DeployStatus>({ kind: 'idle' });
+  const [warning, setWarning] = useState<string | null>(null);
+  const dropClient = useRef(client ?? new AnonymousDropClient(apiBase)).current;
+
+  const busy = status.kind !== 'idle' && status.kind !== 'error';
+
+  async function deploy(read: () => Promise<ProcessedFile[]>, source: DeploySource) {
+    setWarning(null);
+    setStatus({ kind: 'reading' });
+    try {
+      const files = await read();
+      if (!files.length) {
+        setStatus({ kind: 'error', message: 'No files found to deploy.' });
+        return;
+      }
+
+      // A drop is the "user provided files" signal; the browse path is already
+      // tracked when the picker opens.
+      if (source === 'drag') {
+        track('dropzone_files_dropped', { method: source, file_count: files.length });
+      }
+
+      setWarning(indexHtmlWarning(files));
+
+      const {
+        url,
+        token,
+        deploy: result,
+      } = await deployFiles(dropClient, files, {
+        onProgress: e => setStatus(progressToStatus(e)),
+      });
+
+      // Best-effort local persistence. Note this does NOT reach the dashboard:
+      // localStorage is per-origin, so a token written here (e.g. www.netlify.com)
+      // is invisible to app.netlify.com. The cross-origin handoff is the URL
+      // fragment below; this only helps if the drop and claim share an origin.
+      try {
+        localStorage.setItem('drop-token', token);
+        localStorage.setItem('dropSiteName', result.subdomain);
+      } catch {
+        /* private mode / storage disabled — non-fatal */
+      }
+
+      setStatus({ kind: 'redirecting' });
+      // 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).
+      track('dropzone_deploy_succeeded', {
+        method: source,
+        site_name: result.subdomain,
+        file_count: files.length,
+      });
+      onDeploy?.({ url, token, siteName: result.subdomain, siteId: result.id });
+
+      // Hand the drop token to the dashboard via the URL fragment — localStorage
+      // does not cross origins. The dashboard's /drop/:name page reads
+      // `#drop_token=` and persists it for the claim + post-signup steps.
+      window.location.assign(`${claimUrl(result.subdomain)}#drop_token=${token}`);
+    } catch (err) {
+      setStatus({ kind: 'error', message: err instanceof Error ? err.message : String(err) });
+    }
+  }
+
+  function reset() {
+    setWarning(null);
+    setStatus({ kind: 'idle' });
+  }
+
+  return { status, warning, busy, deploy, reset };
+}