@netlify/spark-ui 1.26.0-alpha.3 → 1.26.0-alpha.5

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/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/SearchModal/components/SearchModal/SearchModal.d.ts

@@ -6,6 +6,8 @@ interface Props {
     debug?: boolean;
     kapaIntegrationId?: string;
     filters?: PagefindFilters;
+    scopedSearch?: boolean;
+    searchToggleTarget?: string;
 }
 declare function SearchModal(props?: Props): import("preact").JSX.Element;
 export default SearchModal;

package/dist/components/preact/SearchModal/components/SearchModal/SearchModal.js

@@ -1,96 +1,99 @@
 import { u as e } from "../../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import { A as g, y as f, d } from "../../../../../chunks/hooks.module.DRcxknIz.js";
-import { A as L, K as P } from "../../../../../chunks/AskNetlify.bx0blyGV.js";
-import M from "../../../Modal/Modal.js";
-import h from "../../../KeyboardKey/KeyboardKey.js";
-import O from "../SearchWindow.js";
-import Q from "../SearchInput.js";
-import C from "../AskNetlifyLink.js";
-import { useSearch as E } from "../../hooks/useSearch.js";
-import { useSearchAnalytics as R } from "../../hooks/useSearchAnalytics.js";
-import { useKeyboardNav as q } from "../../hooks/useKeyboardNav.js";
-import { useSearchHotkeys as x } from "../../hooks/useSearchHotkeys.js";
-import { useSearchParams as D } from "../../hooks/useSearchParams.js";
-import { useSearchToggles as F } from "../../hooks/useSearchToggles.js";
-import { useAskAnalytics as G } from "../../../AskNetlify/hooks/useAskAnalytics.js";
-import { Fragment as N } from "preact";
-import '../../../../../assets/SearchModal.css';function H(a) {
-  const s = g(null);
-  return f(() => {
-    function n(m) {
+import { A as N, y as p, d as h } from "../../../../../chunks/hooks.module.DRcxknIz.js";
+import { A as M, K as O } from "../../../../../chunks/AskNetlify.bx0blyGV.js";
+import Q from "../../../Modal/Modal.js";
+import f from "../../../KeyboardKey/KeyboardKey.js";
+import C from "../SearchWindow.js";
+import E from "../SearchInput.js";
+import R from "../AskNetlifyLink.js";
+import { useSearch as q } from "../../hooks/useSearch.js";
+import { useSearchAnalytics as x } from "../../hooks/useSearchAnalytics.js";
+import { useKeyboardNav as D } from "../../hooks/useKeyboardNav.js";
+import { useSearchHotkeys as F } from "../../hooks/useSearchHotkeys.js";
+import { useSearchParams as G } from "../../hooks/useSearchParams.js";
+import { useSearchToggles as H } from "../../hooks/useSearchToggles.js";
+import { useAskAnalytics as U } from "../../../AskNetlify/hooks/useAskAnalytics.js";
+import { Fragment as k } from "preact";
+import '../../../../../assets/SearchModal.css';function V(a) {
+  const s = N(null);
+  return p(() => {
+    function o(m) {
       s.current && !s.current.contains(m.target) && a();
     }
-    return document.addEventListener("mousedown", n), () => {
-      document.removeEventListener("mousedown", n);
+    return document.addEventListener("mousedown", o), () => {
+      document.removeEventListener("mousedown", o);
     };
   }, [a]), s;
 }
-function se(a = {
+function ne(a = {
   className: "",
   children: void 0,
   debug: !1,
   kapaIntegrationId: void 0,
-  filters: void 0
+  filters: void 0,
+  scopedSearch: !1,
+  searchToggleTarget: void 0
 }) {
-  const { children: s, className: n, debug: m, filters: T, ...v } = a, [c, o] = d({ current: "search" }), [i, p] = d(!1), [A, I] = d(""), l = () => p(!0), u = () => p(!1), t = g(null), w = H(u), { state: r, actions: S } = E(T);
-  F(l, o), D(l, S.setSearchTerm, I, o), x(i, l, u), q(t, i, u), R(r, m);
-  const { handleNewQuery: b, handleAnswer: K } = G();
-  return f(() => {
+  const { children: s, className: o, debug: m, filters: v, scopedSearch: A, searchToggleTarget: l, ...I } = a, [c, n] = h({ current: "search" }), [i, S] = h(!1), [w, b] = h(""), d = () => S(!0), u = () => S(!1), t = N(null), K = V(u), { state: r, actions: g } = q(v);
+  H(d, n, l), G(d, g.setSearchTerm, b, n, !l), F(i, d, u, !l), D(t, i, u), x(r, m);
+  const { handleNewQuery: L, handleAnswer: P } = U();
+  return p(() => {
     t.current && (i ? t.current.showModal() : t.current.close());
-  }, [i]), f(() => {
-    var k;
-    const y = (k = t.current) == null ? void 0 : k.querySelector("input");
+  }, [i]), p(() => {
+    var T;
+    const y = (T = t.current) == null ? void 0 : T.querySelector("input");
     y && y.focus();
   }, [c.current]), /* @__PURE__ */ e(
-    P,
+    O,
     {
       integrationId: a.kapaIntegrationId || "",
       callbacks: {
         askAI: {
-          onQuerySubmit: b,
-          onAnswerGenerationCompleted: K
+          onQuerySubmit: L,
+          onAnswerGenerationCompleted: P
         }
       },
       children: /* @__PURE__ */ e(
-        M,
+        Q,
         {
           ref: t,
-          className: `n-search-modal ${n || ""}`,
+          className: `n-search-modal ${o || ""}`,
           "data-state": c.current,
-          ...v,
-          children: /* @__PURE__ */ e("div", { ref: w, className: "n-search-container", children: [
+          ...I,
+          children: /* @__PURE__ */ e("div", { ref: K, className: "n-search-container", children: [
             c.current === "ask" && /* @__PURE__ */ e(
-              L,
+              M,
               {
-                setModalState: o,
+                setModalState: n,
                 searchQuery: r.searchTerm,
-                urlParamQuery: A
+                urlParamQuery: w
               }
             ),
-            c.current === "search" && /* @__PURE__ */ e(N, { children: [
-              /* @__PURE__ */ e(Q, { setSearchTerm: S.setSearchTerm, initialValue: r.searchTerm }),
+            c.current === "search" && /* @__PURE__ */ e(k, { children: [
+              /* @__PURE__ */ e(E, { setSearchTerm: g.setSearchTerm, initialValue: r.searchTerm }),
               /* @__PURE__ */ e(
-                O,
+                C,
                 {
-                  setModalState: o,
+                  setModalState: n,
                   searchLoading: r.isLoading,
                   searchTerm: r.searchTerm,
                   results: r.results,
-                  children: /* @__PURE__ */ e(N, { children: [
-                    a.kapaIntegrationId && /* @__PURE__ */ e(C, { searchTerm: r.searchTerm, setModalState: o }),
+                  scopedSearch: A,
+                  children: /* @__PURE__ */ e(k, { children: [
+                    a.kapaIntegrationId && /* @__PURE__ */ e(R, { searchTerm: r.searchTerm, setModalState: n }),
                     s
                   ] })
                 }
               ),
               /* @__PURE__ */ e("div", { className: "n-search-footer", children: [
                 /* @__PURE__ */ e("p", { className: "n-search-footer-tip", children: [
-                  /* @__PURE__ */ e(h, { keyNames: ["Esc"] }),
+                  /* @__PURE__ */ e(f, { keyNames: ["Esc"] }),
                   "to close"
                 ] }),
                 /* @__PURE__ */ e("p", { className: "n-search-footer-tip", children: [
-                  /* @__PURE__ */ e(h, { keyNames: ["Tab"] }),
+                  /* @__PURE__ */ e(f, { keyNames: ["Tab"] }),
                   /* @__PURE__ */ e("span", { children: "or" }),
-                  /* @__PURE__ */ e(h, { keyNames: ["↑", "↓"] }),
+                  /* @__PURE__ */ e(f, { keyNames: ["↑", "↓"] }),
                   "to navigate"
                 ] })
               ] })
@@ -102,5 +105,5 @@ function se(a = {
   );
 }
 export {
-  se as default
+  ne as default
 };

package/dist/components/preact/SearchModal/components/SearchWindow.d.ts

@@ -1,2 +1,2 @@
 import { SearchWindowProps } from '../types/search.types';
-export default function SearchWindow({ setModalState, searchLoading, searchTerm, results, children: DefaultWindow, }: SearchWindowProps): import("preact").JSX.Element;
+export default function SearchWindow({ setModalState, searchLoading, searchTerm, results, children: DefaultWindow, scopedSearch, }: SearchWindowProps): import("preact").JSX.Element;

package/dist/components/preact/SearchModal/components/SearchWindow.js

@@ -1,49 +1,54 @@
 import { u as n } from "../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import t from "./SearchHeading/SearchHeading.js";
+import m from "./SearchHeading/SearchHeading.js";
 import h from "./SearchLink/SearchLink.js";
-import m from "./SearchLinkThemeToggle.js";
-import o from "./AskNetlifyLink.js";
-import { Fragment as a } from "preact";
-const f = ({ searchTerm: l }) => /* @__PURE__ */ n("div", { className: "n-search-feedback", children: /* @__PURE__ */ n("p", { className: "n-results-info", children: [
+import f from "./SearchLinkThemeToggle.js";
+import t from "./AskNetlifyLink.js";
+import { Fragment as s } from "preact";
+const N = ({ searchTerm: e }) => /* @__PURE__ */ n("div", { className: "n-search-feedback", children: /* @__PURE__ */ n("p", { className: "n-results-info", children: [
   "0 results for ",
-  /* @__PURE__ */ n("span", { className: "n-search-term", children: l })
+  /* @__PURE__ */ n("span", { className: "n-search-term", children: e })
 ] }) }), p = ({
-  setModalState: l,
-  searchLoading: c,
+  setModalState: e,
+  searchLoading: r,
   searchTerm: i,
-  results: e
+  results: l,
+  scopedSearch: a
 }) => {
-  const s = !c && (!e || e.length === 0);
-  return /* @__PURE__ */ n(a, { children: [
-    /* @__PURE__ */ n(o, { searchTerm: i, setModalState: l }),
-    s ? /* @__PURE__ */ n(f, { searchTerm: i }) : /* @__PURE__ */ n("ul", { className: "n-results-list", role: "list", children: e == null ? void 0 : e.map((r, d) => /* @__PURE__ */ n("li", { className: "n-results-list-item", children: /* @__PURE__ */ n(h, { ...r }) }, d)) })
+  const c = !r && (!l || l.length === 0);
+  return /* @__PURE__ */ n(s, { children: [
+    !a && /* @__PURE__ */ n(t, { searchTerm: i, setModalState: e }),
+    c ? /* @__PURE__ */ n(N, { searchTerm: i }) : /* @__PURE__ */ n("ul", { className: "n-results-list", role: "list", children: l == null ? void 0 : l.map((o, d) => /* @__PURE__ */ n("li", { className: "n-results-list-item", children: /* @__PURE__ */ n(h, { ...o }) }, d)) })
   ] });
 };
-function w({
-  setModalState: l,
-  searchLoading: c,
+function b({
+  setModalState: e,
+  searchLoading: r,
   searchTerm: i,
-  results: e,
-  children: s
+  results: l,
+  children: a,
+  scopedSearch: c
 }) {
-  const r = (i == null ? void 0 : i.length) > 1;
-  return /* @__PURE__ */ n("div", { className: "n-search-window", children: /* @__PURE__ */ n("div", { className: "n-search-links", children: r ? c ? /* @__PURE__ */ n(a, { children: [
-    /* @__PURE__ */ n(o, { searchTerm: i, setModalState: l }),
+  const o = (i == null ? void 0 : i.length) > 1;
+  return /* @__PURE__ */ n("div", { className: "n-search-window", children: /* @__PURE__ */ n("div", { className: "n-search-links", children: o ? r ? /* @__PURE__ */ n(s, { children: [
+    !c && /* @__PURE__ */ n(t, { searchTerm: i, setModalState: e }),
     /* @__PURE__ */ n("div", { className: "n-search-feedback", children: /* @__PURE__ */ n("div", { className: "n-loader-dots-spinner" }) })
   ] }) : /* @__PURE__ */ n(
     p,
     {
-      setModalState: l,
-      searchLoading: c,
+      setModalState: e,
+      searchLoading: r,
       searchTerm: i,
-      results: e
+      results: l,
+      scopedSearch: c
     }
-  ) : /* @__PURE__ */ n(a, { children: [
-    s,
-    /* @__PURE__ */ n(t, { children: "Actions" }),
-    /* @__PURE__ */ n(m, {})
+  ) : /* @__PURE__ */ n(s, { children: [
+    a,
+    !c && /* @__PURE__ */ n(s, { children: [
+      /* @__PURE__ */ n(m, { children: "Actions" }),
+      /* @__PURE__ */ n(f, {})
+    ] })
   ] }) }) });
 }
 export {
-  w as default
+  b as default
 };

package/dist/components/preact/SearchModal/hooks/useSearchHotkeys.d.ts

@@ -10,4 +10,4 @@
  * @param onOpen - Callback to open the search interface.
  * @param onClose - Callback to close the search interface.
  */
-export declare function useSearchHotkeys(isOpen: boolean, onOpen: () => void, onClose: () => void): void;
+export declare function useSearchHotkeys(isOpen: boolean, onOpen: () => void, onClose: () => void, enabled?: boolean): void;

package/dist/components/preact/SearchModal/hooks/useSearchHotkeys.js

@@ -1,12 +1,13 @@
-import { y as d } from "../../../../chunks/hooks.module.DRcxknIz.js";
-function m(t, n, o) {
-  d(() => {
-    const r = (e) => {
-      e.metaKey && e.key === "k" && (e.preventDefault(), e.stopImmediatePropagation(), t ? o() : n());
+import { y as m } from "../../../../chunks/hooks.module.DRcxknIz.js";
+function a(t, r, n, o = !0) {
+  m(() => {
+    if (!o) return;
+    const d = (e) => {
+      e.metaKey && e.key === "k" && (e.preventDefault(), e.stopImmediatePropagation(), t ? n() : r());
     };
-    return document.addEventListener("keydown", r), () => document.removeEventListener("keydown", r);
-  }, [t, n, o]);
+    return document.addEventListener("keydown", d), () => document.removeEventListener("keydown", d);
+  }, [t, r, n, o]);
 }
 export {
-  m as useSearchHotkeys
+  a as useSearchHotkeys
 };

package/dist/components/preact/SearchModal/hooks/useSearchParams.d.ts

@@ -17,4 +17,4 @@
  */
 export declare function useSearchParams(onOpen: () => void, setSearchTerm: (term: string) => void, setUrlParamTerm: (term: string) => void, setModalState?: (e: {
     current: string;
-}) => void): void;
+}) => void, enabled?: boolean): void;

package/dist/components/preact/SearchModal/hooks/useSearchParams.js

@@ -1,24 +1,24 @@
-import { d as u, y as g } from "../../../../chunks/hooks.module.DRcxknIz.js";
-function m(a, c, i, r) {
-  const [o, h] = u(!1);
-  g(() => {
+import { d as m, y as h } from "../../../../chunks/hooks.module.DRcxknIz.js";
+function w(a, c, i, r, o = !0) {
+  const [t, u] = m(!1);
+  h(() => {
     let e;
     const s = () => {
-      window.pagefind && (h(!0), e && clearInterval(e));
+      window.pagefind && (u(!0), e && clearInterval(e));
     };
     return s(), e = setInterval(s, 100), () => clearInterval(e);
-  }, []), g(() => {
-    if (typeof location > "u" || o) return;
-    const e = new URLSearchParams(location.search), s = e.has("ask"), n = e.get("msg") || e.get("message"), f = e.get("search"), t = new URL(location.href);
+  }, []), h(() => {
+    if (!o || typeof location > "u" || t) return;
+    const e = new URLSearchParams(location.search), s = e.has("ask"), n = e.get("msg") || e.get("message"), f = e.get("search"), g = new URL(location.href);
     if (["ask", "msg", "message", "search"].forEach((d) => {
-      t.searchParams.delete(d);
-    }), window.history.replaceState({}, "", t), s || n) {
+      g.searchParams.delete(d);
+    }), window.history.replaceState({}, "", g), s || n) {
       n && i(n), r == null || r({ current: "ask" }), a();
       return;
     }
     f && (c(f), a());
-  }, [o, a, r, c, i]);
+  }, [t, a, r, c, i, o]);
 }
 export {
-  m as useSearchParams
+  w as useSearchParams
 };

package/dist/components/preact/SearchModal/hooks/useSearchToggles.d.ts

@@ -11,4 +11,4 @@
  */
 export declare function useSearchToggles(onOpen: () => void, setState: (state: {
     current: string;
-}) => void): void;
+}) => void, scopeId?: string): void;

package/dist/components/preact/SearchModal/hooks/useSearchToggles.js

@@ -1,18 +1,20 @@
-import { y as l } from "../../../../chunks/hooks.module.DRcxknIz.js";
-function n(t, c) {
-  l(() => {
-    const r = document.querySelectorAll("[data-ntl-search-toggle]");
-    if (r.length)
-      return r.forEach((e) => {
-        const a = e.dataset.ntlSearchToggle ? e.dataset.ntlSearchToggle : "search";
+import { y as n } from "../../../../chunks/hooks.module.DRcxknIz.js";
+function g(t, l, r) {
+  n(() => {
+    const a = Array.from(document.querySelectorAll("[data-ntl-search-toggle]")).filter(
+      (e) => r ? e.dataset.ntlSearchTarget === r : !e.dataset.ntlSearchTarget
+    );
+    if (a.length)
+      return a.forEach((e) => {
+        const c = e.dataset.ntlSearchToggle ? e.dataset.ntlSearchToggle : "search";
         e.removeAttribute("disabled"), e.addEventListener("click", () => {
-          t(), c({ current: a });
+          t(), l({ current: c });
         });
       }), () => {
-        r.forEach((e) => e.removeEventListener("click", t));
+        a.forEach((e) => e.removeEventListener("click", t));
       };
-  }, [t]);
+  }, [t, r]);
 }
 export {
-  n as useSearchToggles
+  g as useSearchToggles
 };

package/dist/components/preact/SearchModal/types/search.types.d.ts

@@ -18,6 +18,7 @@ export interface SearchWindowProps {
     searchTerm: string;
     results?: SearchLinkProps[];
     children: ComponentChildren;
+    scopedSearch?: boolean;
 }
 export interface SearchResultsProps {
     setModalState: (e: {
@@ -26,6 +27,7 @@ export interface SearchResultsProps {
     searchLoading: boolean;
     searchTerm: string;
     results?: SearchLinkProps[];
+    scopedSearch?: boolean;
 }
 export interface SearchState {
     searchTerm: string;

package/package.json

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

package/packages/components/ActionArrow.astro

@@ -3,7 +3,7 @@ const { class: className, ...rest } = Astro.props;
 ---
 
 <div class:list={['n-action-arrow', className]} {...rest}>
-  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 14 14">
+  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 14 14" role="presentation">
     <g stroke="currentColor" stroke-linecap="square" stroke-width="1.564">
       <path stroke-linejoin="round" d="M3.417 10.556 9.4 4.572"></path>
       <path d="M9.88 9.381V4.093H4.59"></path>

package/packages/components/Card.astro

@@ -6,8 +6,11 @@ import Eyebrow from './Eyebrow.astro';
 interface Props {
   as?: HTMLElement;
   eyebrow?: string;
+  eyebrowTransitionName?: string;
   paragraph?: string | HTMLElement;
+  paragraphTransitionName?: string;
   headline?: string | HTMLElement;
+  headlineTransitionName?: string;
   link?: {
     id?: string;
     href: string;
@@ -19,8 +22,11 @@ interface Props {
 const {
   as: Element = 'div',
   eyebrow,
+  eyebrowTransitionName,
   paragraph,
+  paragraphTransitionName,
   headline,
+  headlineTransitionName,
   link,
   isCardClickable,
   class: className,
@@ -55,17 +61,32 @@ const isExternal =
       </div>
     )
   }
-  {eyebrow && <Eyebrow class="n-card-eyebrow">{eyebrow}</Eyebrow>}
+  {
+    eyebrow && (
+      <Eyebrow class="n-card-eyebrow" transition:name={eyebrowTransitionName}>
+        {eyebrow}
+      </Eyebrow>
+    )
+  }
   {
     isAnchorHeadline ? (
       <a class="n-card-link n-card-link-headline" href={link?.href} id={link.id}>
-        <div class="n-card-headline" set:html={headline} />
+        <div class="n-card-headline" set:html={headline} transition:name={headlineTransitionName} />
       </a>
     ) : (
-      <div class="n-card-headline" set:html={headline} />
+      <div class="n-card-headline" set:html={headline} transition:name={headlineTransitionName} />
+    )
+  }
+  {
+    Astro.slots.has('meta') && (
+      <div class="n-card-meta">
+        <slot name="meta" />
+      </div>
     )
   }
-  {paragraph && <div class="n-card-paragraph" set:html={paragraph} />}
+  {paragraph && (
+    <div class="n-card-paragraph" set:html={paragraph} transition:name={paragraphTransitionName} />
+  )}
   <slot />
   {
     link && link.text && (
@@ -95,10 +116,24 @@ const isExternal =
     --ntl-flow-space: var(--ntl-space-l);
   }
 
-  .n-card-eyebrow + .n-card-headline {
+  .n-card-eyebrow + .n-card-headline,
+  .n-card-eyebrow + .n-card-link-headline {
     --ntl-flow-space: var(--ntl-space-s);
   }
 
+  .n-card-headline + .n-card-meta,
+  .n-card-link-headline + .n-card-meta {
+    --ntl-flow-space: var(--ntl-space-2xs);
+  }
+
+  .n-card-meta {
+    color: var(--ntl-color-text-weak);
+  }
+
+  .n-card-meta + .n-card-paragraph {
+    --ntl-flow-space: var(--ntl-space-xs);
+  }
+
   .n-card-link:has(> .n-card-headline) {
     text-decoration: none;
   }
@@ -171,6 +206,7 @@ const isExternal =
   .n-card-clickable .n-action-arrow {
     margin-block-start: auto;
     margin-inline-start: auto;
+    padding-block-start: var(--ntl-space-s);
   }
 
   /* Focus for Anchor Headline */

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/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/SearchModal/components/SearchModal/SearchModal.tsx

@@ -30,6 +30,8 @@ interface Props {
   debug?: boolean;
   kapaIntegrationId?: string;
   filters?: PagefindFilters;
+  scopedSearch?: boolean;
+  searchToggleTarget?: string;
 }
 
 function SearchModal(
@@ -39,9 +41,11 @@ function SearchModal(
     debug: false,
     kapaIntegrationId: undefined,
     filters: undefined,
+    scopedSearch: false,
+    searchToggleTarget: undefined,
   }
 ) {
-  const { children, className, debug, filters, ...rest } = props;
+  const { children, className, debug, filters, scopedSearch, searchToggleTarget, ...rest } = props;
 
   const [modalState, setModalState] = useState({ current: 'search' });
   const [searchOpen, setSearchOpen] = useState(false);
@@ -53,9 +57,9 @@ function SearchModal(
   const containerRef = useClickOutside<HTMLDivElement>(closeSearch);
 
   const { state, actions } = useSearch(filters);
-  useSearchToggles(openSearch, setModalState);
-  useSearchParams(openSearch, actions.setSearchTerm, setUrlParamTerm, setModalState);
-  useSearchHotkeys(searchOpen, openSearch, closeSearch);
+  useSearchToggles(openSearch, setModalState, searchToggleTarget);
+  useSearchParams(openSearch, actions.setSearchTerm, setUrlParamTerm, setModalState, !searchToggleTarget);
+  useSearchHotkeys(searchOpen, openSearch, closeSearch, !searchToggleTarget);
   useKeyboardNav(modalRef, searchOpen, closeSearch);
   useSearchAnalytics(state, debug);
   const { handleNewQuery, handleAnswer } = useAskAnalytics();
@@ -103,6 +107,7 @@ function SearchModal(
                 searchLoading={state.isLoading}
                 searchTerm={state.searchTerm}
                 results={state.results}
+                scopedSearch={scopedSearch}
               >
                 <>
                   {props.kapaIntegrationId && (

package/packages/components/preact/SearchModal/components/SearchWindow.tsx

@@ -18,12 +18,13 @@ const SearchResults: FunctionComponent<SearchResultsProps> = ({
   searchLoading,
   searchTerm,
   results,
+  scopedSearch,
 }) => {
   const noResults = !searchLoading && (!results || results.length === 0);
 
   return (
     <>
-      <AskNetlifyLink searchTerm={searchTerm} setModalState={setModalState} />
+      {!scopedSearch && <AskNetlifyLink searchTerm={searchTerm} setModalState={setModalState} />}
       {noResults ? (
         <NoResults searchTerm={searchTerm} />
       ) : (
@@ -45,6 +46,7 @@ export default function SearchWindow({
   searchTerm,
   results,
   children: DefaultWindow,
+  scopedSearch,
 }: SearchWindowProps) {
   const hasQuery = searchTerm?.length > 1;
 
@@ -54,7 +56,9 @@ export default function SearchWindow({
         {hasQuery ? (
           searchLoading ? (
             <>
-              <AskNetlifyLink searchTerm={searchTerm} setModalState={setModalState} />
+              {!scopedSearch && (
+                <AskNetlifyLink searchTerm={searchTerm} setModalState={setModalState} />
+              )}
               <div className="n-search-feedback">
                 <div className="n-loader-dots-spinner" />
               </div>
@@ -65,13 +69,18 @@ export default function SearchWindow({
               searchLoading={searchLoading}
               searchTerm={searchTerm}
               results={results}
+              scopedSearch={scopedSearch}
             />
           )
         ) : (
           <>
             {DefaultWindow}
-            <SearchHeading>Actions</SearchHeading>
-            <SearchLinkThemeToggle />
+            {!scopedSearch && (
+              <>
+                <SearchHeading>Actions</SearchHeading>
+                <SearchLinkThemeToggle />
+              </>
+            )}
           </>
         )}
       </div>

package/packages/components/preact/SearchModal/hooks/useSearchHotkeys.ts

@@ -13,8 +13,15 @@ import { useEffect } from 'preact/hooks';
  * @param onClose - Callback to close the search interface.
  */
 
-export function useSearchHotkeys(isOpen: boolean, onOpen: () => void, onClose: () => void) {
+export function useSearchHotkeys(
+  isOpen: boolean,
+  onOpen: () => void,
+  onClose: () => void,
+  enabled: boolean = true
+) {
   useEffect(() => {
+    if (!enabled) return;
+
     const handleKeydown = (e: KeyboardEvent) => {
       if (e.metaKey && e.key === 'k') {
         e.preventDefault();
@@ -25,5 +32,5 @@ export function useSearchHotkeys(isOpen: boolean, onOpen: () => void, onClose: (
 
     document.addEventListener('keydown', handleKeydown);
     return () => document.removeEventListener('keydown', handleKeydown);
-  }, [isOpen, onOpen, onClose]);
+  }, [isOpen, onOpen, onClose, enabled]);
 }

package/packages/components/preact/SearchModal/hooks/useSearchParams.ts

@@ -22,7 +22,8 @@ export function useSearchParams(
   onOpen: () => void,
   setSearchTerm: (term: string) => void,
   setUrlParamTerm: (term: string) => void,
-  setModalState?: (e: { current: string }) => void
+  setModalState?: (e: { current: string }) => void,
+  enabled: boolean = true
 ) {
   const [isPagefindLoaded, setIsPagefindLoaded] = useState(false);
 
@@ -46,7 +47,7 @@ export function useSearchParams(
   }, []);
 
   useEffect(() => {
-    if (typeof location === 'undefined' || isPagefindLoaded) return;
+    if (!enabled || typeof location === 'undefined' || isPagefindLoaded) return;
 
     const params = new URLSearchParams(location.search);
 
@@ -72,5 +73,5 @@ export function useSearchParams(
       setSearchTerm(search);
       onOpen();
     }
-  }, [isPagefindLoaded, onOpen, setModalState, setSearchTerm, setUrlParamTerm]);
+  }, [isPagefindLoaded, onOpen, setModalState, setSearchTerm, setUrlParamTerm, enabled]);
 }

package/packages/components/preact/SearchModal/hooks/useSearchToggles.ts

@@ -14,10 +14,13 @@ import { useEffect } from 'preact/hooks';
 
 export function useSearchToggles(
   onOpen: () => void,
-  setState: (state: { current: string }) => void
+  setState: (state: { current: string }) => void,
+  scopeId?: string
 ) {
   useEffect(() => {
-    const toggles = document.querySelectorAll('[data-ntl-search-toggle]');
+    const toggles = Array.from(document.querySelectorAll<HTMLElement>('[data-ntl-search-toggle]')).filter(
+      t => (scopeId ? t.dataset.ntlSearchTarget === scopeId : !t.dataset.ntlSearchTarget)
+    );
 
     if (!toggles.length) return;
 
@@ -33,5 +36,5 @@ export function useSearchToggles(
     return () => {
       toggles.forEach(t => t.removeEventListener('click', onOpen));
     };
-  }, [onOpen]);
+  }, [onOpen, scopeId]);
 }

package/packages/components/preact/SearchModal/types/search.types.tsx

@@ -18,6 +18,7 @@ export interface SearchWindowProps {
   searchTerm: string;
   results?: SearchLinkProps[];
   children: ComponentChildren;
+  scopedSearch?: boolean;
 }
 
 export interface SearchResultsProps {
@@ -25,6 +26,7 @@ export interface SearchResultsProps {
   searchLoading: boolean;
   searchTerm: string;
   results?: SearchLinkProps[];
+  scopedSearch?: boolean;
 }
 
 export interface SearchState {