@netlify/spark-ui 1.31.0-alpha.6 → 1.31.0-alpha.8

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

@@ -309,6 +309,8 @@ function StatusView({
           return <Spinner label="Site’s live — taking you to claim it…" />;
         case 'dashboard':
           return <Spinner label="Site’s live — taking you to your new project…" />;
+        default:
+          return null;
       }
 
     case 'uploading': {

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

@@ -287,6 +287,18 @@ describe('build-required drops', () => {
 
     expect(saveDropStash).not.toHaveBeenCalled();
     expect(harness.assigned).toEqual(['https://app.netlify.com/signup?next=/drop']);
+    // Nothing was stashed, so the drop is lost rather than deferred — reported
+    // with the same reason react-ui uses for its own build bounce.
+    const failed = harness.events.find(e => e.event === DROPZONE_EVENTS.DEPLOY_FAILED);
+    expect(failed?.props).toMatchObject({ reason: 'anonymous_build_not_supported' });
+  });
+
+  it('does not report a loss when the archive was stashed', async () => {
+    const harness = mountHook({ buildClient: makeBuildClient('no-auth'), getUploadToken: async () => null });
+    await harness.api.deploy(async () => buildFiles(), 'drag', []);
+    await settle();
+
+    expect(harness.events.map(e => e.event)).not.toContain(DROPZONE_EVENTS.DEPLOY_FAILED);
   });
 
   it('cedes everything to onBuildRequired when set', async () => {
@@ -334,6 +346,9 @@ describe('stash resume on mount', () => {
     expect(clearDropStash).not.toHaveBeenCalled(); // preserved for the next authenticated visit
     expect(harness.api.status.kind).toBe('idle');
     expect(harness.errors).toHaveLength(0);
+    // Nothing deployed, so no resume was counted — otherwise every logged-out
+    // reload with a stash would inflate the metric.
+    expect(harness.events.map(e => e.event)).not.toContain(DROPZONE_EVENTS.RESUMED);
   });
 
   it('surfaces a real resume failure with re-drop copy, stash consumed', async () => {

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

@@ -268,11 +268,15 @@ export function useDropDeploy({
       onError?.({ message, reason });
     };
 
+    // Set once the file set is read, so a later throw still reports file_count.
+    let knownFileCount: number | undefined;
+
     try {
       // Rename a lone non-index HTML file so it is served at the site root.
       // Warnings are computed on the renamed set, so the fixable single-file
       // case no longer warns and only the multi-HTML case does.
       const files = renameSingleNonIndexHtmlToIndex(await read());
+      knownFileCount = files.length;
       if (!files.length) {
         fail('No files found to deploy.', 'No files found to deploy.', { file_count: 0 });
         return;
@@ -297,7 +301,11 @@ export function useDropDeploy({
       }
     } catch (err) {
       const reason = err instanceof Error ? err.message : String(err);
-      fail(humanizeDropError(err), reason);
+      fail(
+        humanizeDropError(err),
+        reason,
+        knownFileCount !== undefined ? { file_count: knownFileCount } : undefined
+      );
     }
   }
 
@@ -365,6 +373,18 @@ export function useDropDeploy({
     // Without build wiring nothing here could deploy a stash later, so nothing
     // is stashed — the hand-off is all that's left.
 
+    if (!stashed) {
+      // Nothing survived the hand-off, so this drop is genuinely lost rather
+      // than deferred. Reported with the app's own bounce reason so both
+      // surfaces count it the same way.
+      emit(DROPZONE_EVENTS.DEPLOY_FAILED, {
+        method: source,
+        reason: 'anonymous_build_not_supported',
+        file_count: fileCount,
+        ...typeProps,
+      });
+    }
+
     if (onBuildSignupHandoff) {
       // The consumer owns the hand-off (e.g. an auth popup that keeps the
       // visitor on this page); back to idle so the zone stays usable.
@@ -469,7 +489,6 @@ export function useDropDeploy({
       return;
     }
 
-    emit(DROPZONE_EVENTS.RESUMED, {});
     setStatus({ kind: 'creating' });
 
     const archive: ZipResult = { file: stash.zipFile, buildSettings: stash.buildSettings };
@@ -484,11 +503,13 @@ export function useDropDeploy({
 
     if (!built) {
       // Still no session — the visitor came back logged out. Keep the stash for
-      // their next authenticated visit.
+      // their next authenticated visit. No RESUMED event: nothing deployed.
       setStatus({ kind: 'idle' });
       return;
     }
 
+    // Only now is a resume real — a logged-out attempt above never counts.
+    emit(DROPZONE_EVENTS.RESUMED, {});
     await clearDropStash();
     setStatus({ kind: 'redirecting', target: 'build' });
     onBuildDeploy?.(built);

package/packages/drop-core/README.md

@@ -1,20 +1,300 @@
 # drop-core
 
-The framework-free engine behind the Drop Zone: reading a dropped folder/zip
-into deployable files, deciding whether it needs a build, and deploying it —
-anonymously (claim flow) or into a logged-in visitor's account — plus the
-stash that carries a build drop across the signup round-trip.
+The engine behind Netlify Drop, without any UI attached.
 
-Consumed three ways: by the Preact `DropZone` in this repo, by anything
-importing `@netlify/spark-ui/drop-core`, and eventually by other Netlify
-surfaces implementing their own Drop UI over the same core.
+Give it the files a visitor dropped on your page and it will read them, work out
+whether the project needs a build, and deploy it — either anonymously, so the
+visitor claims the site afterwards, or straight into their Netlify account if
+they're signed in.
 
-## Conventions
+There's no Preact, React, or DOM-framework dependency anywhere in here, so it
+can sit under whatever interface you're building. If you want the drop zone
+_and_ the UI, use the [`DropZone` component](../components/preact/DropZone)
+instead — it's a thin view over this package.
 
-These follow the practices shared by the libraries doing our two jobs —
-react-dropzone/Uppy/FilePond on the component side, netlify-cli's deploy
-engine, @vercel/client, and tus-js-client on the pipeline side. Where we
-deliberately differ, that's recorded too, so it isn't re-litigated by accident.
+## Install
+
+drop-core ships inside `@netlify/spark-ui`:
+
+```sh
+npm install @netlify/spark-ui
+```
+
+```ts
+import { deployFiles, AnonymousDropClient } from '@netlify/spark-ui/drop-core';
+```
+
+## Quick start
+
+The shortest useful thing: accept a dropped folder and deploy it anonymously.
+
+```ts
+import { AnonymousDropClient, deployFiles, readDataTransfer } from '@netlify/spark-ui/drop-core';
+
+zone.addEventListener('drop', async event => {
+  event.preventDefault();
+  if (!event.dataTransfer) return;
+
+  // Read the DataTransfer first. The browser detaches it once the event turn
+  // ends, so anything that touches it has to run before you await elsewhere.
+  const files = await readDataTransfer(event.dataTransfer);
+
+  const { deploy, token, url } = await deployFiles(new AnonymousDropClient(), files, {
+    onProgress: e => console.log(e.phase, e.uploaded, '/', e.total),
+  });
+
+  console.log('live at', url);
+
+  // Anonymous sites are unclaimed. Send the visitor to the claim page with
+  // the token in the fragment — localStorage doesn't cross origins.
+  location.assign(`https://app.netlify.com/drop/${deploy.subdomain}#drop_token=${token}`);
+});
+```
+
+`readDataTransfer` handles a dropped folder, a zip, or a multi-file selection,
+strips junk like `__MACOSX` and dotfiles, flattens a single wrapping folder, and
+sha1-digests each file. A lone `.html` file is renamed to `index.html` so it
+serves at the site root.
+
+For a file picker instead of a drop, use `readFileList(input.files)`.
+
+## Deploying into a signed-in account
+
+Swap the client. `AuthenticatedDropClient` creates the site in the visitor's own
+account, so there's no claim step — you can send them straight to their new
+project.
+
+JSON calls ride a same-origin `/access-control` proxy on their session cookie;
+file uploads go direct to `api.netlify.com` on a bearer token you mint:
+
+```ts
+import {
+  AuthenticatedDropClient,
+  deployFiles,
+  isNotAuthenticatedError,
+} from '@netlify/spark-ui/drop-core';
+
+const client = new AuthenticatedDropClient({
+  getUploadToken: async () => {
+    const res = await fetch('/access-control/generate-access-control-token', {
+      credentials: 'include',
+    });
+    if (!res.ok) return null; // `null` means "no session"
+    return (await res.json()).accessControlToken ?? null;
+  },
+});
+
+try {
+  const { deploy } = await deployFiles(client, files);
+  location.assign(`https://app.netlify.com/projects/${deploy.subdomain}`);
+} catch (err) {
+  if (isNotAuthenticatedError(err)) {
+    // No session after all. Nothing was created, so falling back to an
+    // anonymous deploy here is safe.
+    return deployAnonymously(files);
+  }
+  throw err;
+}
+```
+
+Pass `accountSlug` if you want the site created in a specific team rather than
+the visitor's default one.
+
+## Projects that need a build
+
+A dropped Astro or Next project can't be served as static files. `detectBuild`
+tells you, cheaply, by looking at `netlify.toml`, `package.json`, and the
+zero-config functions directories:
+
+```ts
+import { detectBuild, deployBuild, AuthenticatedBuildClient } from '@netlify/spark-ui/drop-core';
+
+const detection = detectBuild(files);
+
+if (!detection.buildRequired) {
+  await deployFiles(client, files);
+} else {
+  const build = await deployBuild(new AuthenticatedBuildClient({ getUploadToken }), files, {
+    onProgress: e => setPhase(e.phase),
+  });
+  location.assign(`https://app.netlify.com/projects/${build.site.name}`);
+}
+```
+
+`detection.reason` tells you which signal fired (`netlify-toml-build`,
+`package-json-build-script`, `framework-dependency`, `functions-directory`) —
+useful for analytics or for explaining the decision to the visitor.
+
+`deployBuild` zips the project, creates the site, and hands the archive to
+Netlify's build system. It returns as soon as the build is enqueued; pass
+`waitForBuild: true` if you'd rather wait for it to finish, which is also the
+only way a failing build's own error message reaches you.
+
+If the project has no `[build]` table of its own, drop-core infers one from the
+detected framework and writes it into the archive — but only when it's confident
+about both the command and the publish directory, since guessing the publish
+directory wrong ships your source instead of your site.
+
+Building requires a signed-in visitor: there's no anonymous build API.
+
+## Carrying a drop across signup
+
+If a visitor drops a project that needs a build and _isn't_ signed in, you don't
+have to throw their work away. Stash the archive, send them to signup, and
+deploy it when they come back:
+
+```ts
+import {
+  clearDropStash,
+  deployZippedBuild,
+  hasDropStashMarker,
+  loadDropStash,
+  saveDropStash,
+  zipFiles,
+} from '@netlify/spark-ui/drop-core';
+
+// On the way out:
+const archive = await zipFiles(files);
+await saveDropStash(archive.file, archive.buildSettings);
+location.assign('https://app.netlify.com/signup?next=/drop');
+
+// On any later page load, once they're back and signed in:
+if (hasDropStashMarker()) {
+  const stash = await loadDropStash();
+  if (stash) {
+    const built = await deployZippedBuild(buildClient, {
+      file: stash.zipFile,
+      buildSettings: stash.buildSettings,
+    });
+    await clearDropStash();
+    location.assign(`https://app.netlify.com/projects/${built.site.name}`);
+  }
+}
+```
+
+The archive lives in IndexedDB for 24 hours, with a small localStorage marker so
+an ordinary page load can ask "is there anything waiting?" without opening a
+database. Storage is per-origin, so whatever you hand off to must bring the
+visitor back to the same origin.
+
+Only consume the stash once the visitor is genuinely authenticated — if they
+come back still signed out, leave it alone for next time.
+
+## Reporting progress
+
+Every deploy function takes an `onProgress` callback and reports a phase:
+
+| Phase        | Meaning                                    |
+| ------------ | ------------------------------------------ |
+| `zipping`    | Packing the project (build path only)      |
+| `creating`   | Creating the site and deploy               |
+| `uploading`  | Uploading files, with `uploaded` / `total` |
+| `processing` | Uploaded; Netlify is making the site live  |
+| `building`   | Build running (build path only)            |
+| `ready`      | Done                                       |
+
+Static deploys run `creating → uploading → processing → ready`; build deploys
+run `zipping → creating → uploading → building → ready`. Only `uploading` on the
+static path carries file counts — a build zip is a single request, and the
+browser can't report progress within it.
+
+## Handling failures
+
+Each failure mode has its own error class carrying a stable `code`:
+`UnsupportedDropError`, `NotAuthenticatedError`, `SiteCreateError`,
+`BuildCreateError`, `BuildFailedError`, `BuildTimeoutError`,
+`DeployFailedError`, `DeployTimeoutError`.
+
+For anything you're showing a person, `humanizeDropError` turns any of them —
+plus network failures and raw HTTP statuses — into a sentence you can display:
+
+```ts
+import { humanizeDropError } from '@netlify/spark-ui/drop-core';
+
+catch (err) {
+  showError(humanizeDropError(err));
+  track('deploy_failed', { reason: String(err) }); // keep the raw one for logs
+}
+```
+
+To branch on control flow rather than display, use the `isNotAuthenticatedError`
+predicate rather than `instanceof`. This package ships as both raw TypeScript
+and compiled output, so two copies of the same class can exist in one app and
+`instanceof` will quietly miss.
+
+## Analytics
+
+`DROPZONE_EVENTS` holds the canonical event names, and
+`DropZoneEventProperties` maps each one to its payload shape, so you can wire
+your own provider without hand-writing strings:
+
+```ts
+import { DROPZONE_EVENTS } from '@netlify/spark-ui/drop-core';
+
+track(DROPZONE_EVENTS.DEPLOY_SUCCEEDED, { method: 'drag', file_count: 12 });
+```
+
+## Good to know
+
+- **Uploads can't go through the `/access-control` proxy.** `PUT` isn't
+  allowlisted and bodies cap around 6 MB, so file uploads always go direct to
+  `api.netlify.com` on a bearer token.
+- **Upload tokens are short-lived off the app origin** — 30 seconds, against the
+  app's 300. Static deploys re-mint as they go, but a build zip is one request,
+  so an upload slower than that will fail. Raising the limit is a platform-side
+  change.
+- **`NotAuthenticatedError` only ever means "nothing was created yet."** It's
+  your signal that an anonymous retry is safe. Nothing throws it once a site
+  exists, because falling back then would leave an empty project behind and
+  deploy a duplicate.
+- **`deploy_id` is not `deploy.id`.** File uploads and readiness polling key off
+  `deploy_id` (BSON); `deploy.id` is the site's UUID. Mixing them up produces a
+  misleading 401.
+- **`detectBuild` is deliberately lightweight** — two config files and the
+  functions directories, no framework-detection dependency. If you already have
+  something better, inject your own detection and use `deployBuild` directly.
+
+## Reference
+
+**Reading files**
+
+| Export                 | Purpose                                                 |
+| ---------------------- | ------------------------------------------------------- |
+| `readDataTransfer(dt)` | A drop: folder, zip, or loose files → `ProcessedFile[]` |
+| `readFileList(files)`  | The same, from an `<input type="file">`                 |
+| `getFileTypes(files)`  | Distinct MIME types, for analytics                      |
+
+**Detecting and packing**
+
+| Export                      | Purpose                                           |
+| --------------------------- | ------------------------------------------------- |
+| `detectBuild(files)`        | `{ buildRequired, reason }`                       |
+| `inferBuildSettings(files)` | Build command + publish dir, or `null` if unsure  |
+| `zipFiles(files)`           | The source archive, plus any synthesised settings |
+
+**Deploying**
+
+| Export                                 | Purpose                                   |
+| -------------------------------------- | ----------------------------------------- |
+| `deployFiles(client, files, opts)`     | Static deploy                             |
+| `deployBuild(client, files, opts)`     | Zip, create site, enqueue build           |
+| `deployZippedBuild(client, zip, opts)` | Same, from an archive you already have    |
+| `AnonymousDropClient`                  | Claim-flow deploys, no session needed     |
+| `AuthenticatedDropClient`              | Static deploys into the visitor's account |
+| `AuthenticatedBuildClient`             | Builds in the visitor's account           |
+
+**Stash**
+
+| Export                              | Purpose                                     |
+| ----------------------------------- | ------------------------------------------- |
+| `saveDropStash(zip, buildSettings)` | Store an archive for after signup           |
+| `hasDropStashMarker()`              | Cheap synchronous "is anything waiting?"    |
+| `loadDropStash()`                   | The archive, or `null` if expired or absent |
+| `clearDropStash()`                  | Remove it; idempotent, never throws         |
+
+Anything not exported from `index.ts` is internal and may change.
+
+## Contributing
 
 ### Boundaries
 
@@ -33,14 +313,14 @@ deliberately differ, that's recorded too, so it isn't re-litigated by accident.
 
 ### Naming
 
-| Kind               | Convention                         | Examples here                                                 |
-| ------------------ | ---------------------------------- | ------------------------------------------------------------- |
-| Outcome callbacks  | `onVerb` / past participle         | `onDeploy`, `onBuildRequired`, `onError`                      |
-| Boolean state      | `isX`                              | `busy` (exception, pre-dates rule), `isNotAuthenticatedError` |
-| Strategy injection | bare noun                          | `client`, `buildClient`, `validator`-style                    |
-| Analytics events   | `dropzone_snake_case` — **frozen** | `DROPZONE_EVENTS` (test-pinned wire names)                    |
-| Error predicates   | `isXError(err)`                    | `isNotAuthenticatedError`                                     |
-| Files              | filename = main export             | `detectBuild.ts`, `buildStash.ts`                             |
+| Kind               | Convention                              | Examples here                                                 |
+| ------------------ | --------------------------------------- | ------------------------------------------------------------- |
+| Outcome callbacks  | `onVerb` / past participle              | `onDeploy`, `onBuildRequired`, `onError`                      |
+| Boolean state      | `isX`                                   | `busy` (exception, pre-dates rule), `isNotAuthenticatedError` |
+| Strategy injection | bare noun                               | `client`, `buildClient`, `validator`-style                    |
+| Analytics events   | `dropzone_snake_case` — **append-only** | `DROPZONE_EVENTS` (renames fail `analytics.test.ts`)          |
+| Error predicates   | `isXError(err)`                         | `isNotAuthenticatedError`                                     |
+| Files              | filename = main export                  | `detectBuild.ts`, `buildStash.ts`                             |
 
 ### Comments
 
@@ -55,9 +335,9 @@ deliberately differ, that's recorded too, so it isn't re-litigated by accident.
   appears in the client _and_ the orchestrator on purpose — a note that only
   exists where nobody is reading protects nothing.
 - **"Don't simplify" notes name what breaks** — the invariant, and ideally the
-  test that pins it (e.g. the `NotAuthenticatedError` boundary below).
+  test that pins it.
 - **No `@param`/`@returns`.** Types carry the shape; JSDoc carries rationale
-  and edge cases. (react-dropzone: zero `@param` across its entire source.)
+  and edge cases.
 - File-header purpose blocks only where the filename undersells the contents.
 
 ### Errors
@@ -71,21 +351,13 @@ deliberately differ, that's recorded too, so it isn't re-litigated by accident.
   before anything is created (token gate, site-create 401) — it is the signal
   that an anonymous retry is safe. Throwing it after a site exists would strand
   an empty project and deploy a duplicate. Pinned by tests.
-- **Humanized copy lives in `humanizeDropError`, in this package.** A
-  deliberate divergence from @vercel/client (which leaves rendering to the
-  CLI): our consumers render our copy directly, and the docs promise it.
+- **Humanized copy lives in `humanizeDropError`, in this package.** Consumers
+  render our copy directly, and the docs promise it.
 - Transient upload failures retry on `UPLOAD_RETRY_DELAYS_MS` (backoff as
-  data, the tus idiom); **400/422 never retry** — the request itself is wrong.
-
-### Considered and rejected
-
-- **Async-generator lifecycles** (@vercel/client): our phase-callback design is
-  equivalent and churn-free; `DeployPhase` is a closed union, which netlify-cli's
-  own author wished theirs was.
-- **Kebab-case event renames**: `dropzone_*` wire names are pinned analytics
-  history; `analytics.test.ts` fails on any rename. Append-only.
-- **`getRootProps`/`getInputProps` attribute getters** (react-dropzone, Uppy):
-  the right shape for a future framework-free UI tier shared with the app —
-  not something to bolt onto the shipped wrapper component.
-- **A `defaultOptions` object** (tus, Uppy): our destructured constructor
-  defaults are react-dropzone's pattern; either is fine, we have this one.
+  data, so the curve is overridable); **400/422 never retry** — the request
+  itself is wrong.
+
+### Tests
+
+Colocated as `*.test.ts` — the Vite build glob ignores `**/*.test.*`, and
+anything else under `packages/` gets published. `npm test` runs the suite.

package/packages/drop-core/authedApi.ts

@@ -1,5 +1,8 @@
 import type { BuildSite } from './types';
 import { NotAuthenticatedError, SiteCreateError } from './errors';
+import { pollUntilSettled, type SettledDeploy } from './pollDeploy';
+
+export type { SettledDeploy } from './pollDeploy';
 
 /**
  * Transport shared by both authenticated clients: JSON rides the consumer's
@@ -28,41 +31,24 @@ export async function createSiteInAccount(
   return res.json();
 }
 
-/** How a watched deploy ended. `errorMessage` is the API's own explanation, when it gave one. */
-export type SettledDeploy =
-  { outcome: 'ready' } | { outcome: 'failed'; errorMessage?: string } | { outcome: 'timed-out' };
-
-/** Deploy states that end the wait — `ready` succeeds, the rest are failures. */
-const TERMINAL_STATES = new Set(['ready', 'error', 'rejected']);
-
-interface DeployState {
-  state?: string;
-  error_message?: string;
-}
-
 /**
- * Polls the deploy on the session cookie and reports the terminal outcome —
- * callers map it onto their own error vocabulary. Non-ok reads are skipped,
- * not fatal: a proxy hiccup shouldn't kill a progressing deploy.
+ * Polls a deploy over the session-cookie proxy — the shared `pollUntilSettled`
+ * loop with the cookie transport bound in. A non-ok read is skipped, not fatal.
  */
-export async function pollDeployUntilSettled(options: {
+export function pollDeployUntilSettled(options: {
   proxyBase: string;
   deployId: string;
   pollIntervalMs: number;
   timeoutMs: number;
 }): Promise<SettledDeploy> {
   const { proxyBase, deployId, pollIntervalMs, timeoutMs } = options;
-  const deadline = timeoutMs / pollIntervalMs;
-  for (let i = 0; i < deadline; i++) {
-    const res = await fetch(`${proxyBase}/deploys/${deployId}`, { credentials: 'include' });
-    if (res.ok) {
-      const deploy: DeployState = await res.json();
-      if (deploy.state && TERMINAL_STATES.has(deploy.state)) {
-        if (deploy.state === 'ready') return { outcome: 'ready' };
-        return { outcome: 'failed', errorMessage: deploy.error_message };
-      }
-    }
-    await new Promise(r => setTimeout(r, pollIntervalMs));
-  }
-  return { outcome: 'timed-out' };
+  return pollUntilSettled({
+    deployId,
+    pollIntervalMs,
+    timeoutMs,
+    readState: async id => {
+      const res = await fetch(`${proxyBase}/deploys/${id}`, { credentials: 'include' });
+      return res.ok ? res.json() : null;
+    },
+  });
 }

package/packages/drop-core/buildStash.test.ts

@@ -47,6 +47,25 @@ describe('buildStash', () => {
     expect(await stash?.zipFile.text()).toBe('zip-bytes');
   });
 
+  // Same key AND same value shape as react-ui's setWithExpiry, so the app can
+  // adopt this module without stranding a marker its own code already wrote.
+  it('writes the marker in react-ui’s { value, expiry } shape', async () => {
+    await saveDropStash(zip());
+    const marker = JSON.parse(localStorage.getItem('dropBuildStash') as string);
+    expect(marker.value).toBe('true');
+    expect(marker.expiry).toBeGreaterThan(Date.now());
+    expect(marker.expiry).toBeLessThanOrEqual(Date.now() + 24 * 60 * 60 * 1000);
+  });
+
+  // The row delete is what makes the stash unusable; dropping the database is
+  // cleanup, so a 200MB archive doesn't linger in the visitor's profile.
+  it('drops the database, not just the row, once the stash is consumed', async () => {
+    const deleteDatabase = vi.spyOn(indexedDB, 'deleteDatabase');
+    await saveDropStash(zip());
+    await clearDropStash();
+    expect(deleteDatabase).toHaveBeenCalledWith('netlify-drop');
+  });
+
   it('clears the stash and marker idempotently', async () => {
     await saveDropStash(zip());
     await clearDropStash();

package/packages/drop-core/buildStash.ts

@@ -35,6 +35,16 @@ const withTimeout = <T>(promise: Promise<T>): Promise<T> =>
     }),
   ]);
 
+// Resolves on `blocked` too: another tab holding the database open is not worth
+// stalling the caller for, and the row delete already made the stash unusable.
+const deleteDatabase = (): Promise<void> =>
+  new Promise((resolve, reject) => {
+    const request = indexedDB.deleteDatabase(DB_NAME);
+    request.onsuccess = () => resolve();
+    request.onblocked = () => resolve();
+    request.onerror = () => reject(request.error);
+  });
+
 const openDatabase = (): Promise<IDBDatabase> =>
   new Promise((resolve, reject) => {
     const request = indexedDB.open(DB_NAME, DB_VERSION);
@@ -74,8 +84,13 @@ const hasEnoughQuota = async (bytes: number): Promise<boolean> => {
 
 // The marker is a plain localStorage flag with its own expiry, so page loads can
 // ask "is there anything to resume?" synchronously without opening IndexedDB.
+// `{ value, expiry }` is react-ui's setWithExpiry shape — same key, same shape,
+// so the app can adopt this module without stranding a marker it already wrote.
 const setMarker = () => {
-  localStorage.setItem(MARKER_KEY, JSON.stringify({ expiresAt: Date.now() + STASH_TTL_MS }));
+  localStorage.setItem(
+    MARKER_KEY,
+    JSON.stringify({ value: 'true', expiry: Date.now() + STASH_TTL_MS })
+  );
 };
 
 const clearMarker = () => {
@@ -96,7 +111,13 @@ export async function saveDropStash(
     ) {
       return false;
     }
-    const record: DropBuildStash = { zipFile, buildSettings, createdAt: Date.now() };
+    const record: DropBuildStash = {
+      // Round-trip through JSON so an injected detector's richer object can't
+      // fail the structured clone the put() below performs.
+      buildSettings: buildSettings && JSON.parse(JSON.stringify(buildSettings)),
+      zipFile,
+      createdAt: Date.now(),
+    };
     await runStoreOperation('readwrite', store => store.put(record, STASH_KEY));
     setMarker();
     return true;
@@ -146,7 +167,11 @@ export async function clearDropStash(): Promise<void> {
   }
   try {
     if (typeof indexedDB === 'undefined') return;
+    // The row delete is what guarantees the stash can't come back; dropping the
+    // database afterwards is cleanup, so the visitor's project source doesn't
+    // sit in their profile once we're done with it. It reappears on the next drop.
     await runStoreOperation('readwrite', store => store.delete(STASH_KEY));
+    await withTimeout(deleteDatabase());
   } catch {
     // best effort — an orphaned record expires via its TTL
   }
@@ -157,8 +182,8 @@ export function hasDropStashMarker(): boolean {
   try {
     const marker = localStorage.getItem(MARKER_KEY);
     if (!marker) return false;
-    const { expiresAt } = JSON.parse(marker) as { expiresAt?: number };
-    if (typeof expiresAt !== 'number' || Date.now() > expiresAt) {
+    const { value, expiry } = JSON.parse(marker) as { value?: string; expiry?: number };
+    if (value !== 'true' || typeof expiry !== 'number' || Date.now() > expiry) {
       clearMarker();
       return false;
     }