@netlify/spark-ui 1.26.0-alpha.2 → 1.26.0-alpha.4

package/dist/assets/DropZone.css

@@ -1 +1 @@
-.n-fadeIn{opacity:0;animation:fadeIn var(--animation-duration, .3s) ease-out forwards}.n-fadeInUp{opacity:0;transform:translateY(var(--animation-transformY, 5px));animation:fadeInUp var(--animation-duration, .3s) ease-out forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}.n-dropzone{--n-dropzone-accent: var(--color-brand-primary, #0e7fe1);--n-dropzone-radius: var(--radius-2xl, 1rem);box-sizing:border-box;position:relative;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-glyph--success{color:var(--color-success-text, #108b46)}.n-dropzone-check-ring{stroke-dasharray:126;stroke-dashoffset:126;animation:dropDraw .5s ease-out 80ms forwards}.n-dropzone-check-mark{stroke-dasharray:32;stroke-dashoffset:32;animation:dropDraw .32s ease-out .46s forwards}@keyframes dropDraw{to{stroke-dashoffset:0}}.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-link{display:inline-flex;align-items:center;gap:var(--space-3xs, .35rem);font-size:1rem;font-weight:var(--font-weight-semibold, 600);color:var(--color-link, #0e7fe1);text-decoration:none}.n-dropzone-link:hover{text-decoration:underline}.n-dropzone-link-icon{width:.9em;height:.9em}.n-dropzone-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-s, 1rem);margin-block-start:var(--space-2xs, .5rem)}.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-reset{padding:var(--space-2xs, .5rem) var(--space-m, 1.25rem);border:1px solid var(--color-border-default, rgba(0, 0, 0, .15));border-radius:var(--radius-pill, 999px);background:transparent;color:var(--color-text-default, #14161a);font-size:.9375rem;font-weight:var(--font-weight-semibold, 600);cursor:pointer;transition:background-color .15s ease-out}.n-dropzone-reset:hover{background:var(--color-bg-2, #f6f8fa)}.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,.n-dropzone-check-ring,.n-dropzone-check-mark{animation:none!important;transition:none!important}.n-dropzone-check-ring,.n-dropzone-check-mark{stroke-dashoffset:0}.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;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)}}

package/dist/components/index.d.ts

@@ -7,5 +7,5 @@ export { default as SearchToggle } from './preact/SearchModal/components/SearchT
 export { default as SearchModal } from './preact/SearchModal/components/SearchModal/SearchModal';
 export { default as DropZone } from './preact/DropZone/DropZone';
 export { AnonymousDropClient, deployFiles, readDataTransfer, readFileList, } from './preact/DropZone/drop-core';
-export type { DropClient, Deploy, Digest, DeployResult, DeployProgress, DeployPhase, ProcessedFile, } from './preact/DropZone/drop-core';
+export type { DropClient, DropResponse, Digest, DeployResult, DeployProgress, DeployPhase, ProcessedFile, } from './preact/DropZone/drop-core';
 export { type IconName } from './preact/Icon';

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

@@ -1,11 +1,11 @@
 import { u as e } from "../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import { d as k, A as I } from "../../../chunks/hooks.module.DRcxknIz.js";
-import b from "../Icon/index.js";
-import { getSingleNonIndexHtmlFileName as $, hasMultipleHtmlFilesWithoutIndex as D, readDataTransfer as F, readFileList as T } from "./drop-core/readFiles.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 p } from "preact";
-import '../../../assets/DropZone.css';const U = (n) => `https://app.netlify.com/drop/${n}/claim`;
+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":
@@ -17,75 +17,74 @@ function A(n) {
       return { kind: "processing" };
   }
 }
-function Y({
+function O({
   apiBase: n,
-  client: h,
-  claimUrl: d = U,
-  onDeploy: s,
-  className: l
+  client: p,
+  claimUrl: u = U,
+  onDeploy: i,
+  className: s
 }) {
-  const [o, t] = k({ kind: "idle" }), [w, c] = k(null), [C, g] = k(!1), x = I(h ?? new M(n)).current, f = o.kind !== "idle" && o.kind !== "done" && o.kind !== "error";
-  async function z(i) {
-    c(null), t({ kind: "reading" });
+  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 i();
+      const r = await t();
       if (!r.length) {
-        t({ kind: "error", message: "No files found to deploy." });
+        a({ kind: "error", message: "No files found to deploy." });
         return;
       }
-      const y = $(r);
-      y ? c(`No index.html found — "${y}" won’t be served at the site root.`) : D(r) && c("No index.html found — your site may not have a landing page.");
-      const { url: v, token: m, deploy: a } = await P(x, r, {
-        onProgress: (S) => t(A(S))
+      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", m), localStorage.setItem("dropSiteName", a.subdomain);
+        localStorage.setItem("drop-token", f), localStorage.setItem("dropSiteName", c.subdomain);
       } catch {
       }
-      t({ kind: "done", url: v, token: m, siteName: a.subdomain, siteId: a.id }), s == null || s({ url: v, token: m, siteName: a.subdomain, siteId: a.id });
+      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) {
-      t({ kind: "error", message: r instanceof Error ? r.message : String(r) });
+      a({ kind: "error", message: r instanceof Error ? r.message : String(r) });
     }
   }
-  function N() {
-    c(null), t({ kind: "idle" });
+  function S() {
+    d(null), a({ kind: "idle" });
   }
   return /* @__PURE__ */ e(
     "div",
     {
-      class: `n-dropzone${C ? " is-active" : ""}${f ? " is-busy" : ""}${l ? ` ${l}` : ""}`,
+      class: `n-dropzone${v ? " is-active" : ""}${h ? " is-busy" : ""}${s ? ` ${s}` : ""}`,
       "data-state": o.kind,
-      onDragOver: (i) => {
-        f || (i.preventDefault(), g(!0));
+      onDragOver: (t) => {
+        h || (t.preventDefault(), g(!0));
       },
-      onDragLeave: (i) => {
-        i.currentTarget === i.target && g(!1);
+      onDragLeave: (t) => {
+        t.currentTarget === t.target && g(!1);
       },
-      onDrop: (i) => {
-        if (i.preventDefault(), g(!1), f) return;
-        const r = i.dataTransfer;
-        r && z(() => F(r));
+      onDrop: (t) => {
+        if (t.preventDefault(), g(!1), h) return;
+        const r = t.dataTransfer;
+        r && y(() => F(r));
       },
       children: [
-        /* @__PURE__ */ e("div", { class: "n-dropzone-panel", children: /* @__PURE__ */ e(B, { status: o, claimUrl: d, onReset: N, onFiles: z }) }, o.kind),
+        /* @__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(b, { name: "lightbulb", className: "n-dropzone-warning-icon" }),
+          /* @__PURE__ */ e(I, { name: "lightbulb", className: "n-dropzone-warning-icon" }),
           w
         ] })
       ]
     }
   );
 }
-function B({
+function L({
   status: n,
-  claimUrl: h,
-  onReset: d,
-  onFiles: s
+  onReset: p,
+  onFiles: u
 }) {
   switch (n.kind) {
     case "idle":
-      return /* @__PURE__ */ e(p, { children: [
-        /* @__PURE__ */ e(L, {}),
+      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: [
@@ -98,50 +97,39 @@ function B({
               multiple: !0,
               webkitdirectory: "",
               directory: "",
-              onChange: (l) => {
-                var t;
-                const o = l.currentTarget;
-                (t = o.files) != null && t.length && s(() => T(o.files));
+              onChange: (i) => {
+                var o;
+                const s = i.currentTarget;
+                (o = s.files) != null && o.length && u(() => T(s.files));
               }
             }
           )
         ] })
       ] });
     case "reading":
-      return /* @__PURE__ */ e(u, { label: "Reading files…" });
+      return /* @__PURE__ */ e(l, { label: "Reading files…" });
     case "creating":
-      return /* @__PURE__ */ e(u, { label: "Creating deploy…" });
+      return /* @__PURE__ */ e(l, { label: "Creating deploy…" });
     case "processing":
-      return /* @__PURE__ */ e(u, { label: "Processing — almost live…" });
+      return /* @__PURE__ */ e(l, { label: "Processing — almost live…" });
+    case "redirecting":
+      return /* @__PURE__ */ e(l, { label: "Site’s live — taking you to claim it…" });
     case "uploading": {
-      const l = n.total ? Math.round(n.uploaded / n.total * 100) : 0;
-      return /* @__PURE__ */ e(p, { children: [
-        /* @__PURE__ */ e(u, { label: `Uploading ${n.uploaded}/${n.total} files…` }),
-        /* @__PURE__ */ e("div", { class: "n-dropzone-progress", role: "progressbar", "aria-valuenow": l, children: /* @__PURE__ */ e("div", { class: "n-dropzone-progress-bar", style: { width: `${l}%` } }) })
+      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}%` } }) })
       ] });
     }
-    case "done":
-      return /* @__PURE__ */ e(p, { children: [
-        /* @__PURE__ */ e(j, {}),
-        /* @__PURE__ */ e("p", { class: "n-dropzone-title", children: "Your site is live!" }),
-        /* @__PURE__ */ e("a", { class: "n-dropzone-link", href: n.url, target: "_blank", rel: "noopener noreferrer", children: [
-          n.url.replace(/^https?:\/\//, ""),
-          /* @__PURE__ */ e(b, { name: "link", className: "n-dropzone-link-icon" })
-        ] }),
-        /* @__PURE__ */ e("div", { class: "n-dropzone-actions", children: [
-          /* @__PURE__ */ e("a", { class: "n-dropzone-browse", href: h(n.siteName), children: "Claim this site" }),
-          /* @__PURE__ */ e("button", { type: "button", class: "n-dropzone-reset", onClick: d, children: "Deploy another" })
-        ] })
-      ] });
     case "error":
-      return /* @__PURE__ */ e(p, { 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: d, children: "Try again" })
+        /* @__PURE__ */ e("button", { type: "button", class: "n-dropzone-browse", onClick: p, children: "Try again" })
       ] });
   }
 }
-function u({ label: n }) {
+function l({ 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: [
@@ -151,7 +139,7 @@ function u({ label: n }) {
     ] })
   ] });
 }
-function L() {
+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",
@@ -176,32 +164,6 @@ function L() {
     )
   ] }) });
 }
-function j() {
-  return /* @__PURE__ */ e("span", { class: "n-dropzone-glyph n-dropzone-glyph--success", "aria-hidden": "true", children: /* @__PURE__ */ e("svg", { viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-    /* @__PURE__ */ e(
-      "circle",
-      {
-        class: "n-dropzone-check-ring",
-        cx: "24",
-        cy: "24",
-        r: "20",
-        stroke: "currentColor",
-        "stroke-width": "3"
-      }
-    ),
-    /* @__PURE__ */ e(
-      "path",
-      {
-        class: "n-dropzone-check-mark",
-        d: "M15 24.5 21 30.5 33 18",
-        stroke: "currentColor",
-        "stroke-width": "3",
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round"
-      }
-    )
-  ] }) });
-}
 export {
-  Y as default
+  O as default
 };

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

@@ -1,9 +1,9 @@
-import { Deploy, Digest } from './types';
+import { DropResponse, Digest } from './types';
 export interface DropClient {
     getToken(): Promise<string>;
-    createDeploy(digest: Digest, token: string): Promise<Deploy>;
+    createDeploy(digest: Digest, token: string): Promise<DropResponse>;
     uploadFile(deployId: string, path: string, content: ArrayBuffer, token: string): Promise<void>;
-    waitUntilReady(deploy: Deploy, token: string): Promise<void>;
+    waitUntilReady(deploy: DropResponse, token: string): Promise<void>;
 }
 /**
  * Unauthenticated drop client. Authorized server-side by the Referer header,
@@ -13,7 +13,7 @@ export declare class AnonymousDropClient implements DropClient {
     private apiBase;
     constructor(apiBase?: string);
     getToken(): Promise<string>;
-    createDeploy(files: Digest, token: string): Promise<Deploy>;
+    createDeploy(files: Digest, token: string): Promise<DropResponse>;
     uploadFile(deployId: string, path: string, content: ArrayBuffer, token: string): Promise<void>;
-    waitUntilReady(deploy: Deploy, token: string): Promise<void>;
+    waitUntilReady(deploy: DropResponse, token: string): Promise<void>;
 }

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

@@ -27,7 +27,7 @@ class n {
   }
   async waitUntilReady(e, o) {
     for (let t = 0; t < 600; t++) {
-      const a = await fetch(`${this.apiBase}/deploys/${e.id}`, {
+      const a = await fetch(`${this.apiBase}/deploys/${e.deploy_id}`, {
         headers: { Authorization: `Bearer ${o}` }
       });
       if (a.ok && (await a.json()).state === "ready") return;

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

@@ -579,7 +579,10 @@ async function U(x) {
   ), p = [];
   for (const [v, s] of Object.entries(b)) {
     if (v.endsWith("/") || /(^|\/)(__MACOSX\/|\.)/.test(v)) continue;
-    const g = s.buffer.slice(s.byteOffset, s.byteOffset + s.byteLength);
+    const g = s.buffer.slice(
+      s.byteOffset,
+      s.byteOffset + s.byteLength
+    );
     p.push(k(v, g, v.split("/").pop()));
   }
   return O(p);

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

@@ -8,8 +8,17 @@ export interface ProcessedFile {
     name: string;
 }
 export type Digest = Record<string, string>;
-export interface Deploy {
+/**
+ * Response body of `POST /api/v1/drop`. Not a canonical Deploy resource —
+ * it's a mixed shape carrying both the anonymous site and the initial deploy
+ * so the client has everything it needs to upload, poll, and hand off to the
+ * user in one round trip.
+ */
+export interface DropResponse {
+    /** site id (UUID) — surfaced to callers so they can build claim links */
     id: string;
+    /** deploy id (BSON) — used for `/deploys/{deploy_id}` reads and file PUTs */
+    deploy_id: string;
     /** the *.netlify.app subdomain assigned to the anonymous site */
     subdomain: string;
     /** SHAs the backend does NOT yet have — only these get uploaded */
@@ -17,7 +26,7 @@ export interface Deploy {
     state?: string;
 }
 export interface DeployResult {
-    deploy: Deploy;
+    deploy: DropResponse;
     /** drop token — persist this to later claim the site into an account */
     token: string;
     url: string;

package/package.json

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

package/packages/components/index.ts

@@ -15,7 +15,7 @@ export {
 } from './preact/DropZone/drop-core';
 export type {
   DropClient,
-  Deploy,
+  DropResponse,
   Digest,
   DeployResult,
   DeployProgress,

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

@@ -138,31 +138,6 @@
   }
 }
 
-/* ----------------------------- */
-/* Success glyph (draws in)      */
-/* ----------------------------- */
-.n-dropzone-glyph--success {
-  color: var(--color-success-text, #108b46);
-}
-
-.n-dropzone-check-ring {
-  stroke-dasharray: 126;
-  stroke-dashoffset: 126;
-  animation: dropDraw 500ms ease-out 80ms forwards;
-}
-
-.n-dropzone-check-mark {
-  stroke-dasharray: 32;
-  stroke-dashoffset: 32;
-  animation: dropDraw 320ms ease-out 460ms forwards;
-}
-
-@keyframes dropDraw {
-  to {
-    stroke-dashoffset: 0;
-  }
-}
-
 /* ----------------------------- */
 /* Loading / spinner             */
 /* ----------------------------- */
@@ -212,37 +187,6 @@
   transition: width 300ms cubic-bezier(0.22, 1, 0.36, 1);
 }
 
-/* ----------------------------- */
-/* Done state links & actions    */
-/* ----------------------------- */
-.n-dropzone-link {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-3xs, 0.35rem);
-  font-size: 1rem;
-  font-weight: var(--font-weight-semibold, 600);
-  color: var(--color-link, #0e7fe1);
-  text-decoration: none;
-}
-
-.n-dropzone-link:hover {
-  text-decoration: underline;
-}
-
-.n-dropzone-link-icon {
-  width: 0.9em;
-  height: 0.9em;
-}
-
-.n-dropzone-actions {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-s, 1rem);
-  margin-block-start: var(--space-2xs, 0.5rem);
-}
-
 /* ----------------------------- */
 /* Buttons                       */
 /* ----------------------------- */
@@ -274,22 +218,6 @@
   transform: translateY(0);
 }
 
-.n-dropzone-reset {
-  padding: var(--space-2xs, 0.5rem) var(--space-m, 1.25rem);
-  border: 1px solid var(--color-border-default, rgba(0, 0, 0, 0.15));
-  border-radius: var(--radius-pill, 999px);
-  background: transparent;
-  color: var(--color-text-default, #14161a);
-  font-size: 0.9375rem;
-  font-weight: var(--font-weight-semibold, 600);
-  cursor: pointer;
-  transition: background-color 150ms ease-out;
-}
-
-.n-dropzone-reset:hover {
-  background: var(--color-bg-2, #f6f8fa);
-}
-
 /* ----------------------------- */
 /* Warning banner                */
 /* ----------------------------- */
@@ -322,18 +250,11 @@
   .n-dropzone-panel,
   .n-dropzone-glyph-arrow,
   .n-dropzone-spinner,
-  .n-dropzone-progress-bar,
-  .n-dropzone-check-ring,
-  .n-dropzone-check-mark {
+  .n-dropzone-progress-bar {
     animation: none !important;
     transition: none !important;
   }
 
-  .n-dropzone-check-ring,
-  .n-dropzone-check-mark {
-    stroke-dashoffset: 0;
-  }
-
   .n-dropzone-spinner {
     border-top-color: var(--n-dropzone-accent);
   }

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

@@ -20,7 +20,7 @@ type Status =
   | { kind: 'creating' }
   | { kind: 'uploading'; uploaded: number; total: number }
   | { kind: 'processing' }
-  | { kind: 'done'; url: string; token: string; siteName: string; siteId: string }
+  | { kind: 'redirecting' }
   | { kind: 'error'; message: string };
 
 interface Props {
@@ -35,7 +35,7 @@ interface Props {
   className?: string;
 }
 
-const defaultClaimUrl = (siteName: string) => `https://app.netlify.com/drop/${siteName}/claim`;
+const defaultClaimUrl = (siteName: string) => `https://app.netlify.com/drop/${siteName}`;
 
 function progressPhaseToStatus(e: DeployProgress): Status {
   switch (e.phase) {
@@ -61,7 +61,7 @@ export default function DropZone({
   const [active, setActive] = useState(false);
   const dropClient = useRef(client ?? new AnonymousDropClient(apiBase)).current;
 
-  const busy = status.kind !== 'idle' && status.kind !== 'done' && status.kind !== 'error';
+  const busy = status.kind !== 'idle' && status.kind !== 'error';
 
   async function run(read: () => Promise<ProcessedFile[]>) {
     setWarning(null);
@@ -85,7 +85,10 @@ export default function DropZone({
         onProgress: e => setStatus(progressPhaseToStatus(e)),
       });
 
-      // Persist for the claim step after signup (mirrors the dashboard).
+      // 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);
@@ -93,8 +96,13 @@ export default function DropZone({
         /* private mode / storage disabled — non-fatal */
       }
 
-      setStatus({ kind: 'done', url, token, siteName: deploy.subdomain, siteId: deploy.id });
+      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) });
     }
@@ -131,7 +139,7 @@ export default function DropZone({
     >
       {/* keyed so each state change remounts and replays its enter animation */}
       <div class="n-dropzone-panel" key={status.kind}>
-        <StatusView status={status} claimUrl={claimUrl} onReset={reset} onFiles={run} />
+        <StatusView status={status} onReset={reset} onFiles={run} />
       </div>
 
       {warning && status.kind !== 'error' && (
@@ -146,12 +154,10 @@ export default function DropZone({
 
 function StatusView({
   status,
-  claimUrl,
   onReset,
   onFiles,
 }: {
   status: Status;
-  claimUrl: (siteName: string) => string;
   onReset: () => void;
   onFiles: (read: () => Promise<ProcessedFile[]>) => void;
 }) {
@@ -186,6 +192,8 @@ function StatusView({
       return <Spinner label="Creating deploy…" />;
     case 'processing':
       return <Spinner label="Processing — almost live…" />;
+    case 'redirecting':
+      return <Spinner label="Site’s live — taking you to claim it…" />;
 
     case 'uploading': {
       const pct = status.total ? Math.round((status.uploaded / status.total) * 100) : 0;
@@ -199,26 +207,6 @@ function StatusView({
       );
     }
 
-    case 'done':
-      return (
-        <>
-          <SuccessGlyph />
-          <p class="n-dropzone-title">Your site is live!</p>
-          <a class="n-dropzone-link" href={status.url} target="_blank" rel="noopener noreferrer">
-            {status.url.replace(/^https?:\/\//, '')}
-            <Icon name="link" className="n-dropzone-link-icon" />
-          </a>
-          <div class="n-dropzone-actions">
-            <a class="n-dropzone-browse" href={claimUrl(status.siteName)}>
-              Claim this site
-            </a>
-            <button type="button" class="n-dropzone-reset" onClick={onReset}>
-              Deploy another
-            </button>
-          </div>
-        </>
-      );
-
     case 'error':
       return (
         <>
@@ -268,28 +256,3 @@ function UploadGlyph() {
     </span>
   );
 }
-
-function SuccessGlyph() {
-  return (
-    <span class="n-dropzone-glyph n-dropzone-glyph--success" aria-hidden="true">
-      <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <circle
-          class="n-dropzone-check-ring"
-          cx="24"
-          cy="24"
-          r="20"
-          stroke="currentColor"
-          stroke-width="3"
-        />
-        <path
-          class="n-dropzone-check-mark"
-          d="M15 24.5 21 30.5 33 18"
-          stroke="currentColor"
-          stroke-width="3"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-      </svg>
-    </span>
-  );
-}

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

@@ -1,10 +1,10 @@
-import type { Deploy, Digest } from './types';
+import type { DropResponse, Digest } from './types';
 
 export interface DropClient {
   getToken(): Promise<string>;
-  createDeploy(digest: Digest, token: string): Promise<Deploy>;
+  createDeploy(digest: Digest, token: string): Promise<DropResponse>;
   uploadFile(deployId: string, path: string, content: ArrayBuffer, token: string): Promise<void>;
-  waitUntilReady(deploy: Deploy, token: string): Promise<void>;
+  waitUntilReady(deploy: DropResponse, token: string): Promise<void>;
 }
 
 const API = 'https://api.netlify.com/api/v1';
@@ -22,7 +22,7 @@ export class AnonymousDropClient implements DropClient {
     return (await res.json()).token;
   }
 
-  async createDeploy(files: Digest, token: string): Promise<Deploy> {
+  async createDeploy(files: Digest, token: string): Promise<DropResponse> {
     const res = await fetch(`${this.apiBase}/drop`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
@@ -47,10 +47,13 @@ export class AnonymousDropClient implements DropClient {
     if (!res.ok) throw new Error(`upload ${path} failed: ${res.status}`);
   }
 
-  async waitUntilReady(deploy: Deploy, token: string): Promise<void> {
+  async waitUntilReady(deploy: DropResponse, token: string): Promise<void> {
     // Poll the deploy with the drop token until ready.
+    // Note: `/deploys/{id}` expects the deploy_id (BSON), not the site id (UUID)
+    // that lives at `deploy.id`. See drop_controller.rb; Deploy.find(uuid) is nil
+    // and the request 401s misleadingly via require_current_actor!.
     for (let i = 0; i < 600; i++) {
-      const res = await fetch(`${this.apiBase}/deploys/${deploy.id}`, {
+      const res = await fetch(`${this.apiBase}/deploys/${deploy.deploy_id}`, {
         headers: { Authorization: `Bearer ${token}` },
       });
       if (res.ok && (await res.json()).state === 'ready') return;

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

@@ -99,7 +99,12 @@ export async function readZip(zip: File): Promise<ProcessedFile[]> {
     // fflate uses a trailing slash to signal directory entries; also skip the
     // usual junk (macOS metadata, dotfiles at any depth).
     if (path.endsWith('/') || /(^|\/)(__MACOSX\/|\.)/.test(path)) continue;
-    const content = bytes.buffer.slice(bytes.byteOffset, bytes.byteOffset + bytes.byteLength);
+    // `bytes.buffer` is ArrayBufferLike; fflate always backs entries with a plain
+    // ArrayBuffer, so narrow it for toProcessedFile's ArrayBuffer parameter.
+    const content = bytes.buffer.slice(
+      bytes.byteOffset,
+      bytes.byteOffset + bytes.byteLength,
+    ) as ArrayBuffer;
     out.push(toProcessedFile(path, content, path.split('/').pop()!));
   }
   return normalizeFiles(out);

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

@@ -10,8 +10,17 @@ export interface ProcessedFile {
 
 export type Digest = Record<string, string>; // { "/index.html": "<sha1>" }
 
-export interface Deploy {
+/**
+ * Response body of `POST /api/v1/drop`. Not a canonical Deploy resource —
+ * it's a mixed shape carrying both the anonymous site and the initial deploy
+ * so the client has everything it needs to upload, poll, and hand off to the
+ * user in one round trip.
+ */
+export interface DropResponse {
+  /** site id (UUID) — surfaced to callers so they can build claim links */
   id: string;
+  /** deploy id (BSON) — used for `/deploys/{deploy_id}` reads and file PUTs */
+  deploy_id: string;
   /** the *.netlify.app subdomain assigned to the anonymous site */
   subdomain: string;
   /** SHAs the backend does NOT yet have — only these get uploaded */
@@ -20,7 +29,7 @@ export interface Deploy {
 }
 
 export interface DeployResult {
-  deploy: Deploy;
+  deploy: DropResponse;
   /** drop token — persist this to later claim the site into an account */
   token: string;
   url: string; // https://<subdomain>.netlify.app