@netlify/spark-ui 1.28.0 → 1.30.0

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

@@ -46,11 +46,18 @@ interface Props {
      * properties. Stays provider-agnostic — wire it to Segment/Amplitude/GA in the
      * consuming app, e.g. `onTrack={(name, props) => new Analytics().track(name, props)}`.
      * Emitted events (all include `dropzone_id` when `analyticsId` is set):
-     * - `dropzone_files_dropped`  — files dropped via drag  ({ method: 'drag', file_count })
+     * - `dropzone_files_dropped`  — files dropped via drag  ({ method: 'drag', file_count, file_types })
      * - `dropzone_browse_opened`  — file picker opened       ({ method: 'keyboard' | 'click' })
-     * - `dropzone_build_required` — drop needs a build; handed off to signup ({ method, reason, file_count })
-     * - `dropzone_deploy_succeeded` — deploy went live       ({ method, site_name, file_count })
-     * - `dropzone_deploy_failed`  — deploy errored out       ({ method, reason, file_count? })
+     * - `dropzone_build_required` — drop needs a build; handed off to signup ({ method, reason, file_count, file_types })
+     * - `dropzone_deploy_succeeded` — deploy went live       ({ method, site_name, file_count, file_types })
+     * - `dropzone_deploy_failed`  — deploy errored out       ({ method, reason, file_count?, file_types })
+     *
+     * `file_types` is the sorted, de-duplicated list of MIME types in the
+     * selection, with `application/octet-stream` standing in wherever the browser
+     * reports none (a dragged folder, an `.exe`). It is omitted when the browser
+     * exposes no files at all. Note `dropzone_files_dropped` only fires for drag —
+     * a file-picker selection reports its types on the outcome events, as
+     * `dropzone_browse_opened` fires before any file exists.
      */
     onTrack?: TrackFn;
     /**

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

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

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

@@ -0,0 +1,17 @@
+/**
+ * Distinct MIME types across a drop or file-picker selection, sorted so the same
+ * selection always yields the same array.
+ *
+ * Read from the raw `File.type` at the drop boundary rather than from
+ * `ProcessedFile`s: the MIME type only exists on the original `File`, and reading
+ * can throw before any `ProcessedFile` does (an unsupported single file) — the
+ * very case the file type is most worth knowing about.
+ *
+ * Browsers leave `File.type` empty for anything they don't recognise — a dragged
+ * folder, an `.exe`, an extensionless file — so those collapse to
+ * `application/octet-stream` and the property never carries an empty string.
+ *
+ * Call this synchronously inside the drop handler: a `DataTransfer` detaches once
+ * the event turn ends.
+ */
+export declare function getFileTypes(files: FileList | null | undefined): string[];

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

@@ -0,0 +1,11 @@
+const n = "application/octet-stream";
+function e(t) {
+  if (!(t != null && t.length)) return [];
+  const r = /* @__PURE__ */ new Set();
+  for (const o of Array.from(t))
+    r.add(o.type || n);
+  return Array.from(r).sort().slice(0, 20);
+}
+export {
+  e as getFileTypes
+};

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

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

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

@@ -1,19 +1,21 @@
 import { getDigest as o } from "./digest.js";
-import { getSingleNonIndexHtmlFileName as n, hasMultipleHtmlFilesWithoutIndex as l, readDataTransfer as i, readFileList as m, renameSingleNonIndexHtmlToIndex as p } from "./readFiles.js";
-import { detectBuild as x } from "./detectBuild.js";
-import { AnonymousDropClient as s } from "./client.js";
-import { deployFiles as u } from "./deploy.js";
-import { UnsupportedDropError as D, humanizeDropError as F } from "./errors.js";
+import { getSingleNonIndexHtmlFileName as l, hasMultipleHtmlFilesWithoutIndex as n, readDataTransfer as p, readFileList as i, renameSingleNonIndexHtmlToIndex as m } from "./readFiles.js";
+import { getFileTypes as d } from "./fileTypes.js";
+import { detectBuild as s } from "./detectBuild.js";
+import { AnonymousDropClient as g } from "./client.js";
+import { deployFiles as D } from "./deploy.js";
+import { UnsupportedDropError as I, humanizeDropError as h } from "./errors.js";
 export {
-  s as AnonymousDropClient,
-  D as UnsupportedDropError,
-  u as deployFiles,
-  x as detectBuild,
+  g as AnonymousDropClient,
+  I as UnsupportedDropError,
+  D as deployFiles,
+  s as detectBuild,
   o as getDigest,
-  n as getSingleNonIndexHtmlFileName,
-  l as hasMultipleHtmlFilesWithoutIndex,
-  F as humanizeDropError,
-  i as readDataTransfer,
-  m as readFileList,
-  p as renameSingleNonIndexHtmlToIndex
+  d as getFileTypes,
+  l as getSingleNonIndexHtmlFileName,
+  n as hasMultipleHtmlFilesWithoutIndex,
+  h as humanizeDropError,
+  p as readDataTransfer,
+  i as readFileList,
+  m as renameSingleNonIndexHtmlToIndex
 };

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

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

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

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

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

@@ -55,7 +55,7 @@ export declare function useDropDeploy({ apiBase, client, claimUrl, buildSignupUr
     status: DeployStatus;
     warning: string | null;
     busy: boolean;
-    deploy: (read: () => Promise<ProcessedFile[]>, source: DeploySource) => Promise<void>;
+    deploy: (read: () => Promise<ProcessedFile[]>, source: DeploySource, fileTypes: string[]) => Promise<void>;
     reset: () => void;
 };
 export {};

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

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

package/dist/utils/index.d.ts

@@ -1,2 +1,3 @@
 export { pluralize } from './pluralize';
 export { kebabCase } from './kebab';
+export { useClickOutside } from './useClickOutside';

package/package.json

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

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

@@ -1,6 +1,12 @@
 import { useEffect, useRef, useState } from 'preact/hooks';
 import type { ComponentChildren } from 'preact';
-import { readDataTransfer, readFileList, type BuildDetection, type DropClient } from './drop-core';
+import {
+  getFileTypes,
+  readDataTransfer,
+  readFileList,
+  type BuildDetection,
+  type DropClient,
+} from './drop-core';
 import {
   useDropDeploy,
   type DeployedSite,
@@ -68,11 +74,18 @@ interface Props {
    * properties. Stays provider-agnostic — wire it to Segment/Amplitude/GA in the
    * consuming app, e.g. `onTrack={(name, props) => new Analytics().track(name, props)}`.
    * Emitted events (all include `dropzone_id` when `analyticsId` is set):
-   * - `dropzone_files_dropped`  — files dropped via drag  ({ method: 'drag', file_count })
+   * - `dropzone_files_dropped`  — files dropped via drag  ({ method: 'drag', file_count, file_types })
    * - `dropzone_browse_opened`  — file picker opened       ({ method: 'keyboard' | 'click' })
-   * - `dropzone_build_required` — drop needs a build; handed off to signup ({ method, reason, file_count })
-   * - `dropzone_deploy_succeeded` — deploy went live       ({ method, site_name, file_count })
-   * - `dropzone_deploy_failed`  — deploy errored out       ({ method, reason, file_count? })
+   * - `dropzone_build_required` — drop needs a build; handed off to signup ({ method, reason, file_count, file_types })
+   * - `dropzone_deploy_succeeded` — deploy went live       ({ method, site_name, file_count, file_types })
+   * - `dropzone_deploy_failed`  — deploy errored out       ({ method, reason, file_count?, file_types })
+   *
+   * `file_types` is the sorted, de-duplicated list of MIME types in the
+   * selection, with `application/octet-stream` standing in wherever the browser
+   * reports none (a dragged folder, an `.exe`). It is omitted when the browser
+   * exposes no files at all. Note `dropzone_files_dropped` only fires for drag —
+   * a file-picker selection reports its types on the outcome events, as
+   * `dropzone_browse_opened` fires before any file exists.
    */
   onTrack?: TrackFn;
   /**
@@ -156,7 +169,8 @@ export default function DropZone({
         if (!dt) return;
         // Capture entries synchronously — readDataTransfer reads them before
         // its first await, so the DataTransfer isn't detached out from under us.
-        deploy(() => readDataTransfer(dt), 'drag');
+        // Same reason the MIME types are read here and not inside `deploy`.
+        deploy(() => readDataTransfer(dt), 'drag', getFileTypes(dt.files));
       }}
       onClick={e => {
         // Only the zone's own empty area opens the picker; clicks that land on
@@ -184,7 +198,11 @@ export default function DropZone({
         directory=""
         onChange={e => {
           const input = e.currentTarget as HTMLInputElement;
-          if (input.files?.length) deploy(() => readFileList(input.files!), 'browse');
+          // Read the types before `input.value = ''` below clears the FileList.
+          if (input.files?.length) {
+            const files = input.files;
+            deploy(() => readFileList(files), 'browse', getFileTypes(files));
+          }
           input.value = '';
         }}
       />

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

@@ -0,0 +1,34 @@
+/** What we report when the browser gives us no MIME type at all. */
+const UNKNOWN_TYPE = 'application/octet-stream';
+
+/**
+ * Distinct types kept per event. Deduplication alone keeps this small for a real
+ * site (a handful of types across hundreds of files); the cap is a backstop so an
+ * unusual folder can't push an oversized property into the analytics payload.
+ */
+const MAX_TYPES = 20;
+
+/**
+ * Distinct MIME types across a drop or file-picker selection, sorted so the same
+ * selection always yields the same array.
+ *
+ * Read from the raw `File.type` at the drop boundary rather than from
+ * `ProcessedFile`s: the MIME type only exists on the original `File`, and reading
+ * can throw before any `ProcessedFile` does (an unsupported single file) — the
+ * very case the file type is most worth knowing about.
+ *
+ * Browsers leave `File.type` empty for anything they don't recognise — a dragged
+ * folder, an `.exe`, an extensionless file — so those collapse to
+ * `application/octet-stream` and the property never carries an empty string.
+ *
+ * Call this synchronously inside the drop handler: a `DataTransfer` detaches once
+ * the event turn ends.
+ */
+export function getFileTypes(files: FileList | null | undefined): string[] {
+  if (!files?.length) return [];
+  const types = new Set<string>();
+  for (const file of Array.from(files)) {
+    types.add(file.type || UNKNOWN_TYPE);
+  }
+  return Array.from(types).sort().slice(0, MAX_TYPES);
+}

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

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

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

@@ -3,6 +3,7 @@ export {
   AnonymousDropClient,
   deployFiles,
   detectBuild,
+  getFileTypes,
   readDataTransfer,
   readFileList,
 } from './drop-core';

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

@@ -103,22 +103,36 @@ export function useDropDeploy({
 
   const busy = status.kind !== 'idle' && status.kind !== 'error';
 
-  async function deploy(read: () => Promise<ProcessedFile[]>, source: DeploySource) {
+  /**
+   * `fileTypes` is the MIME types of the selection, read at the drop boundary
+   * (see `getFileTypes`) and passed in rather than derived here — it has to be
+   * captured before `read()` runs so it survives a read that throws. Omitted
+   * from events when empty rather than sent as `[]`.
+   */
+  async function deploy(
+    read: () => Promise<ProcessedFile[]>,
+    source: DeploySource,
+    fileTypes: string[]
+  ) {
     setWarning(null);
     setStatus({ kind: 'reading' });
 
+    const typeProps = fileTypes.length ? { file_types: fileTypes } : {};
+
     // Surface a failure: move to the error state and emit the matching
     // analytics event. Centralised so every failure path (empty selection, a
     // read/deploy throw) reports uniformly — the mirror of the
     // `dropzone_deploy_succeeded` event on the happy path. `file_count` is only
-    // included where the file set is known (it isn't if `read()` itself threw).
+    // included where the file set is known (it isn't if `read()` itself threw);
+    // `file_types` rides along on every failure precisely because it *is* known
+    // in that case — a rejected single file is the main thing we want to see.
     // `reason` goes to analytics as-is (raw, e.g. "drop failed: 429"); `message`
     // is what the user sees, which for a caught error is humanized separately.
     // `onError` gets both so a consumer (e.g. with `showStatus={false}`) can show
     // the humanized message while keeping the raw reason for their own logging.
     const fail = (message: string, reason: string, extra?: Record<string, unknown>) => {
       setStatus({ kind: 'error', message });
-      track('dropzone_deploy_failed', { method: source, reason, ...extra });
+      track('dropzone_deploy_failed', { method: source, reason, ...typeProps, ...extra });
       onError?.({ message, reason });
     };
 
@@ -141,7 +155,11 @@ export function useDropDeploy({
       // A drop is the "user provided files" signal; the browse path is already
       // tracked when the picker opens.
       if (source === 'drag') {
-        track('dropzone_files_dropped', { method: source, file_count: files.length });
+        track('dropzone_files_dropped', {
+          method: source,
+          file_count: files.length,
+          ...typeProps,
+        });
       }
 
       // Build-required projects can't deploy through the anonymous drop API —
@@ -155,6 +173,7 @@ export function useDropDeploy({
           method: source,
           reason: build.reason,
           file_count: files.length,
+          ...typeProps,
         });
         if (onBuildRequired) {
           // The consumer owns the hand-off now; drop back to idle so the zone
@@ -197,6 +216,7 @@ export function useDropDeploy({
         method: source,
         site_name: result.subdomain,
         file_count: files.length,
+        ...typeProps,
       });
       onDeploy?.({ url, token, siteName: result.subdomain, siteId: result.id });
 

package/packages/utils/index.ts

@@ -1,2 +1,3 @@
 export { pluralize } from './pluralize';
 export { kebabCase } from './kebab';
+export { useClickOutside } from './useClickOutside';