@eifi1/ui-kit 0.33.0 → 0.34.0

package/dist/hooks/use-dismiss.js

@@ -1,18 +1,73 @@
 "use client";
 import { useEffect, useRef } from "react";
-function useEscapeKey(handler, enabled = true) {
-  const handlerRef = useRef(handler);
+import { isComposing } from "../lib/ime.js";
+const layers = [];
+const claimed = /* @__PURE__ */ new WeakSet();
+let inFlight = null;
+function nativeOf(e) {
+  return "nativeEvent" in e ? e.nativeEvent : e;
+}
+function onCapture(e) {
+  if (e.key !== "Escape") return;
+  const top = isComposing(e) ? void 0 : layers[layers.length - 1];
+  inFlight = top ? { event: e, layer: top, done: false } : null;
+}
+function onBubble(e) {
+  handOver(e, false);
+}
+function handOver(e, stop) {
+  const native = nativeOf(e);
+  const flight = inFlight;
+  if (native.key !== "Escape" || !flight || flight.event !== native || flight.done) return false;
+  if (claimed.has(native)) return false;
+  flight.done = true;
+  e.preventDefault();
+  if (stop) e.stopPropagation();
+  if (layers.includes(flight.layer)) flight.layer.escape(native);
+  return true;
+}
+function push(layer) {
+  if (layers.length === 0) {
+    document.addEventListener("keydown", onCapture, true);
+    document.addEventListener("keydown", onBubble);
+  }
+  layers.push(layer);
+}
+function pop(layer) {
+  const at = layers.indexOf(layer);
+  if (at >= 0) layers.splice(at, 1);
+  if (layers.length > 0) return;
+  document.removeEventListener("keydown", onCapture, true);
+  document.removeEventListener("keydown", onBubble);
+  inFlight = null;
+}
+function useDismissLayer(open, onEscape) {
+  const handlerRef = useRef(onEscape);
   useEffect(() => {
-    handlerRef.current = handler;
+    handlerRef.current = onEscape;
   });
   useEffect(() => {
-    if (!enabled) return;
-    const onKey = (e) => {
-      if (e.key === "Escape") handlerRef.current();
-    };
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  }, [enabled]);
+    if (!open || typeof document === "undefined") return;
+    const layer = { escape: (e) => handlerRef.current(e) };
+    push(layer);
+    return () => pop(layer);
+  }, [open]);
+}
+function takeEscape(e) {
+  return handOver(e, true);
+}
+function claimEscape(e) {
+  claimed.add(nativeOf(e));
+  e.preventDefault();
+}
+function runOwnKeyDown(e, handler) {
+  if (!handler) return;
+  const before = e.defaultPrevented;
+  handler(e);
+  if (e.key === "Escape" && !before && e.defaultPrevented) claimed.add(nativeOf(e));
+}
+function useEscapeKey(handler, enabled = true) {
+  useDismissLayer(enabled, handler);
 }
 function useOutsideClick(refs, handler, enabled = true) {
   const refsRef = useRef(refs);
@@ -36,6 +91,10 @@ function useOutsideClick(refs, handler, enabled = true) {
   }, [enabled]);
 }
 export {
+  claimEscape,
+  runOwnKeyDown,
+  takeEscape,
+  useDismissLayer,
   useEscapeKey,
   useOutsideClick
 };

package/dist/hooks/use-dismiss.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/use-dismiss.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport type { RefObject } from \"react\";\n\n/**\n * Calls `handler` on an Escape keydown while `enabled`. A single document-level\n * listener owns the \"press Escape to dismiss\" behaviour that popovers, flyouts\n * and menus otherwise each re-implement. `handler` is read live at event time,\n * so it need not be memoised and the listener only re-subscribes when `enabled`\n * flips (typically the open/closed transition).\n */\nexport function useEscapeKey(handler: () => void, enabled = true): void {\n  const handlerRef = useRef(handler);\n  // Written in an effect, not during render, so it satisfies react-hooks/refs: a\n  // render that React starts and then discards — a transition, a Suspense retry —\n  // would otherwise leave this holding a handler from a tree that never committed,\n  // and the document listener below would go on to call it. Keydown events fire\n  // after the commit, so the ref is always current by the time one arrives.\n  useEffect(() => {\n    handlerRef.current = handler;\n  });\n  useEffect(() => {\n    if (!enabled) return;\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") handlerRef.current();\n    };\n    document.addEventListener(\"keydown\", onKey);\n    return () => document.removeEventListener(\"keydown\", onKey);\n  }, [enabled]);\n}\n\n/**\n * Calls `handler` on a press that lands outside every supplied element, while\n * `enabled` — the outside-click-to-close half of the same dismissal story. Pass one\n * ref or several (trigger + panel); a press inside any of them is ignored. Refs and\n * `handler` are read live, so an inline `[triggerRef, panelRef]` array is fine and\n * won't churn the listener.\n *\n * **`pointerdown`, not `mousedown`** — one event covering mouse, touch and pen.\n * This listened for `mousedown` alone, which on a touch platform is a SYNTHESISED\n * event: the browser emits it for most taps, which is why nothing obviously broke,\n * but the synthesis is not guaranteed. A tap that begins a scroll, or one that lands\n * on an element which preventDefaults the touch sequence, may never produce one — and\n * on a phone-first PWA whose pickers, menus and flyouts all dismiss through this hook,\n * inheriting that is worse than choosing it.\n *\n * The one behaviour this changes deliberately: a touch-drag that starts outside an\n * open panel now dismisses it at touch-down, where before it did not dismiss at all\n * (a drag synthesises no mousedown). That matches every other platform surface, and\n * the anchored panels re-measure on scroll precisely because the page moves under\n * them.\n */\nexport function useOutsideClick(\n  refs: RefObject<HTMLElement | null> | RefObject<HTMLElement | null>[],\n  handler: () => void,\n  enabled = true,\n): void {\n  const refsRef = useRef(refs);\n  const handlerRef = useRef(handler);\n  // In an effect rather than during render — see the note on useEscapeKey.\n  useEffect(() => {\n    refsRef.current = refs;\n    handlerRef.current = handler;\n  });\n  useEffect(() => {\n    if (!enabled) return;\n    const onPointerDown = (e: Event) => {\n      const target = e.target as Node;\n      const list = Array.isArray(refsRef.current) ? refsRef.current : [refsRef.current];\n      for (const r of list) {\n        if (r.current?.contains(target)) return;\n      }\n      handlerRef.current();\n    };\n    document.addEventListener(\"pointerdown\", onPointerDown);\n    return () => document.removeEventListener(\"pointerdown\", onPointerDown);\n  }, [enabled]);\n}\n"],"mappings":";AAAA,SAAS,WAAW,cAAc;AAU3B,SAAS,aAAa,SAAqB,UAAU,MAAY;AACtE,QAAM,aAAa,OAAO,OAAO;AAMjC,YAAU,MAAM;AACd,eAAW,UAAU;AAAA,EACvB,CAAC;AACD,YAAU,MAAM;AACd,QAAI,CAAC,QAAS;AACd,UAAM,QAAQ,CAAC,MAAqB;AAClC,UAAI,EAAE,QAAQ,SAAU,YAAW,QAAQ;AAAA,IAC7C;AACA,aAAS,iBAAiB,WAAW,KAAK;AAC1C,WAAO,MAAM,SAAS,oBAAoB,WAAW,KAAK;AAAA,EAC5D,GAAG,CAAC,OAAO,CAAC;AACd;AAuBO,SAAS,gBACd,MACA,SACA,UAAU,MACJ;AACN,QAAM,UAAU,OAAO,IAAI;AAC3B,QAAM,aAAa,OAAO,OAAO;AAEjC,YAAU,MAAM;AACd,YAAQ,UAAU;AAClB,eAAW,UAAU;AAAA,EACvB,CAAC;AACD,YAAU,MAAM;AACd,QAAI,CAAC,QAAS;AACd,UAAM,gBAAgB,CAAC,MAAa;AAClC,YAAM,SAAS,EAAE;AACjB,YAAM,OAAO,MAAM,QAAQ,QAAQ,OAAO,IAAI,QAAQ,UAAU,CAAC,QAAQ,OAAO;AAChF,iBAAW,KAAK,MAAM;AACpB,YAAI,EAAE,SAAS,SAAS,MAAM,EAAG;AAAA,MACnC;AACA,iBAAW,QAAQ;AAAA,IACrB;AACA,aAAS,iBAAiB,eAAe,aAAa;AACtD,WAAO,MAAM,SAAS,oBAAoB,eAAe,aAAa;AAAA,EACxE,GAAG,CAAC,OAAO,CAAC;AACd;","names":[]}
+{"version":3,"sources":["../../src/hooks/use-dismiss.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport type { KeyboardEvent as ReactKeyboardEvent, RefObject } from \"react\";\nimport { isComposing } from \"../lib/ime\";\n\n/*\n * # One Escape stack (round 0.34 Wave 2, DUP-1)\n *\n * Escape closes the TOPMOST thing on screen, and only that: a list open in a dialog\n * closes and the dialog stays; the next press closes the dialog.\n *\n * \"Who owns Escape\" used to be decided five ways. The anchored pickers listened on the\n * document; Modal, FullBleedDialog, PickerSheet and Popover closed in their own panel's\n * `onKeyDown` and stopped the key; CommandPalette closed without stopping it. A dialog's\n * handler sits earlier on the key's path than any document listener, so Escape in an\n * open list inside a Modal closed the MODAL and threw the form away (BUG-1, sev 4,\n * kastlan's lease dialog), and HoverMenu, the numpad and a tooltip could not be\n * dismissed inside a dialog at all. And Modal and FullBleedDialog disagreed on when a\n * child had \"claimed\" the key: a ChipInput clearing its draft kept a Modal open and\n * closed a FullBleedDialog.\n *\n * Now every overlay and picker pushes a layer while it is open ({@link useDismissLayer}),\n * last in, first out, the way `use-overlay-history` stacks the Back gesture. One\n * capture-phase listener on the document notes which layer is on top as each Escape\n * goes down — before any handler on the page runs, so a layer that closes on the way\n * cannot pass the key on to the one beneath it. That layer, and only that one, is\n * handed the key:\n *\n * - at the first layer element the key passes on its way back up ({@link takeEscape},\n *   which Modal's panel, a picker's search box and the rest call from their\n *   `onKeyDown`). The key is stopped there, so nothing around the layers — a\n *   FloatingPanel, an app's own panel — closes with it;\n * - or, when focus is in none of them (a hover menu, a tooltip, the numpad over its\n *   field, a press on the page), at the document once the key has been everywhere else.\n *\n * Layers stack in the order they OPEN, which is the order their effects run. Two that\n * open in the same commit stack child first — the one case that order gets wrong, and\n * one no overlay in the kit does: each opens on a press, after whatever it sits in.\n *\n * ## Claiming the key: one rule\n *\n * An Escape that means \"undo this step\" is not a dismissal: ChipInput clearing its\n * draft, InlineEditField cancelling its edit, the date picker's month grid going back to\n * the days. Those call {@link claimEscape}, and no layer is handed the key. The only\n * other claim is the layer owner's OWN handler — a dialog's `onKeyDown` prop calling\n * `preventDefault()` on Escape (a busy reauth dialog holding itself open, Kurvenschmiede's\n * gear wizard asking first), through {@link runOwnKeyDown}. A `preventDefault()`\n * anywhere else claims nothing: a search box keeping Chromium from clearing itself\n * must not hold a dialog open (FullBleedDialog's 0.8.0 fix, which Modal never had).\n *\n * A handler that STOPS the key before it reaches a layer element has taken it too —\n * that is the DOM, and it is what the kit's cell editors and confirm buttons do.\n */\n\n/** A layer's handler, read through a ref so the stack holds one stable entry per open. */\ninterface Layer {\n  escape: (e: KeyboardEvent) => void;\n}\n\n/** Open layers, oldest first. Module-level, because the order is ACROSS instances. */\nconst layers: Layer[] = [];\n\n/** Escapes a claimant has taken — see {@link claimEscape}. Weak: an event is garbage\n *  once its dispatch is over. */\nconst claimed = new WeakSet<Event>();\n\n/** The Escape on its way through the page: the layer that was topmost as it went down,\n *  and whether that layer has been handed it yet. */\nlet inFlight: { event: KeyboardEvent; layer: Layer; done: boolean } | null = null;\n\nfunction nativeOf(e: KeyboardEvent | ReactKeyboardEvent): KeyboardEvent {\n  return \"nativeEvent\" in e ? e.nativeEvent : e;\n}\n\nfunction onCapture(e: KeyboardEvent): void {\n  if (e.key !== \"Escape\") return;\n  // An Escape inside an IME composition cancels the composition and nothing else.\n  const top = isComposing(e) ? undefined : layers[layers.length - 1];\n  inFlight = top ? { event: e, layer: top, done: false } : null;\n}\n\n/** The fallback: no layer element was on the key's path, or none took it. */\nfunction onBubble(e: KeyboardEvent): void {\n  handOver(e, false);\n}\n\nfunction handOver(e: KeyboardEvent | ReactKeyboardEvent, stop: boolean): boolean {\n  const native = nativeOf(e);\n  const flight = inFlight;\n  if (native.key !== \"Escape\" || !flight || flight.event !== native || flight.done) return false;\n  if (claimed.has(native)) return false;\n  flight.done = true;\n  // Consumed: a type=\"search\" box does not clear itself as well, and a handler further\n  // out that checks `defaultPrevented` (FloatingPanel, an app's own panel) leaves it.\n  e.preventDefault();\n  if (stop) e.stopPropagation();\n  // A layer that closed on the way, by a handler of its own, has had its Escape.\n  if (layers.includes(flight.layer)) flight.layer.escape(native);\n  return true;\n}\n\nfunction push(layer: Layer): void {\n  if (layers.length === 0) {\n    document.addEventListener(\"keydown\", onCapture, true);\n    document.addEventListener(\"keydown\", onBubble);\n  }\n  layers.push(layer);\n}\n\nfunction pop(layer: Layer): void {\n  const at = layers.indexOf(layer);\n  if (at >= 0) layers.splice(at, 1);\n  if (layers.length > 0) return;\n  document.removeEventListener(\"keydown\", onCapture, true);\n  document.removeEventListener(\"keydown\", onBubble);\n  inFlight = null;\n}\n\n/**\n * An Escape layer on the stack while `open`: the topmost layer is handed the next\n * Escape and calls `onEscape`, every layer under it waits its turn. A list opened inside\n * a dialog is above the dialog; a popover opened from a list, above the list.\n *\n * Where focus can be INSIDE the layer, its element's `onKeyDown` calls\n * {@link takeEscape} too, so the key stops there — see the module note. `onEscape` is\n * read live, so it need not be memoised; the layer is pushed and popped only when\n * `open` flips.\n */\nexport function useDismissLayer(open: boolean, onEscape: (e: KeyboardEvent) => void): void {\n  const handlerRef = useRef(onEscape);\n  // Written in an effect, not during render, so it satisfies react-hooks/refs: a\n  // render that React starts and then discards — a transition, a Suspense retry —\n  // would otherwise leave this holding a handler from a tree that never committed,\n  // and the stack would go on to call it. Keydown events fire after the commit, so\n  // the ref is always current by the time one arrives.\n  useEffect(() => {\n    handlerRef.current = onEscape;\n  });\n  useEffect(() => {\n    if (!open || typeof document === \"undefined\") return;\n    const layer: Layer = { escape: (e) => handlerRef.current(e) };\n    push(layer);\n    return () => pop(layer);\n  }, [open]);\n}\n\n/**\n * For a layer's own element, in its `onKeyDown`: hands an Escape on its way up to the\n * topmost layer — this one, unless something opened over it without taking focus (a\n * tooltip, the numpad) — and stops it here. True when it did; false for any other key,\n * a claimed Escape, or one already handed over.\n */\nexport function takeEscape(e: KeyboardEvent | ReactKeyboardEvent): boolean {\n  return handOver(e, true);\n}\n\n/**\n * For an Escape that means \"undo this step\", not \"close\": the key is the caller's, and\n * no layer is handed it. `preventDefault()`s it as well, so a handler further out that\n * checks `defaultPrevented` leaves it alone, as before.\n */\nexport function claimEscape(e: KeyboardEvent | ReactKeyboardEvent): void {\n  claimed.add(nativeOf(e));\n  e.preventDefault();\n}\n\n/**\n * Runs a layer owner's own key handler — a dialog's `onKeyDown` prop — and turns a\n * `preventDefault()` it makes on Escape into a claim: the one way, beside\n * {@link claimEscape}, to keep a layer open.\n */\nexport function runOwnKeyDown<E extends ReactKeyboardEvent>(e: E, handler: ((e: E) => void) | undefined): void {\n  if (!handler) return;\n  const before = e.defaultPrevented;\n  handler(e);\n  if (e.key === \"Escape\" && !before && e.defaultPrevented) claimed.add(nativeOf(e));\n}\n\n/**\n * Calls `handler` on an Escape while `enabled` — as an Escape layer. Since 0.34 this is\n * {@link useDismissLayer} with its arguments the other way round: it hears the key only\n * while nothing opened above it, and inside a dialog it no longer loses the key to the\n * dialog (Wave 2, DUP-1). `handler` is read live, so it need not be memoised.\n */\nexport function useEscapeKey(handler: () => void, enabled = true): void {\n  useDismissLayer(enabled, handler);\n}\n\n/**\n * Calls `handler` on a press that lands outside every supplied element, while\n * `enabled` — the outside-click-to-close half of the same dismissal story. Pass one\n * ref or several (trigger + panel); a press inside any of them is ignored. Refs and\n * `handler` are read live, so an inline `[triggerRef, panelRef]` array is fine and\n * won't churn the listener.\n *\n * **`pointerdown`, not `mousedown`** — one event covering mouse, touch and pen.\n * This listened for `mousedown` alone, which on a touch platform is a SYNTHESISED\n * event: the browser emits it for most taps, which is why nothing obviously broke,\n * but the synthesis is not guaranteed. A tap that begins a scroll, or one that lands\n * on an element which preventDefaults the touch sequence, may never produce one — and\n * on a phone-first PWA whose pickers, menus and flyouts all dismiss through this hook,\n * inheriting that is worse than choosing it.\n *\n * The one behaviour this changes deliberately: a touch-drag that starts outside an\n * open panel now dismisses it at touch-down, where before it did not dismiss at all\n * (a drag synthesises no mousedown). That matches every other platform surface, and\n * the anchored panels re-measure on scroll precisely because the page moves under\n * them.\n */\nexport function useOutsideClick(\n  refs: RefObject<HTMLElement | null> | RefObject<HTMLElement | null>[],\n  handler: () => void,\n  enabled = true,\n): void {\n  const refsRef = useRef(refs);\n  const handlerRef = useRef(handler);\n  // In an effect rather than during render — see the note in useDismissLayer.\n  useEffect(() => {\n    refsRef.current = refs;\n    handlerRef.current = handler;\n  });\n  useEffect(() => {\n    if (!enabled) return;\n    const onPointerDown = (e: Event) => {\n      const target = e.target as Node;\n      const list = Array.isArray(refsRef.current) ? refsRef.current : [refsRef.current];\n      for (const r of list) {\n        if (r.current?.contains(target)) return;\n      }\n      handlerRef.current();\n    };\n    document.addEventListener(\"pointerdown\", onPointerDown);\n    return () => document.removeEventListener(\"pointerdown\", onPointerDown);\n  }, [enabled]);\n}\n"],"mappings":";AAAA,SAAS,WAAW,cAAc;AAElC,SAAS,mBAAmB;AAyD5B,MAAM,SAAkB,CAAC;AAIzB,MAAM,UAAU,oBAAI,QAAe;AAInC,IAAI,WAAyE;AAE7E,SAAS,SAAS,GAAsD;AACtE,SAAO,iBAAiB,IAAI,EAAE,cAAc;AAC9C;AAEA,SAAS,UAAU,GAAwB;AACzC,MAAI,EAAE,QAAQ,SAAU;AAExB,QAAM,MAAM,YAAY,CAAC,IAAI,SAAY,OAAO,OAAO,SAAS,CAAC;AACjE,aAAW,MAAM,EAAE,OAAO,GAAG,OAAO,KAAK,MAAM,MAAM,IAAI;AAC3D;AAGA,SAAS,SAAS,GAAwB;AACxC,WAAS,GAAG,KAAK;AACnB;AAEA,SAAS,SAAS,GAAuC,MAAwB;AAC/E,QAAM,SAAS,SAAS,CAAC;AACzB,QAAM,SAAS;AACf,MAAI,OAAO,QAAQ,YAAY,CAAC,UAAU,OAAO,UAAU,UAAU,OAAO,KAAM,QAAO;AACzF,MAAI,QAAQ,IAAI,MAAM,EAAG,QAAO;AAChC,SAAO,OAAO;AAGd,IAAE,eAAe;AACjB,MAAI,KAAM,GAAE,gBAAgB;AAE5B,MAAI,OAAO,SAAS,OAAO,KAAK,EAAG,QAAO,MAAM,OAAO,MAAM;AAC7D,SAAO;AACT;AAEA,SAAS,KAAK,OAAoB;AAChC,MAAI,OAAO,WAAW,GAAG;AACvB,aAAS,iBAAiB,WAAW,WAAW,IAAI;AACpD,aAAS,iBAAiB,WAAW,QAAQ;AAAA,EAC/C;AACA,SAAO,KAAK,KAAK;AACnB;AAEA,SAAS,IAAI,OAAoB;AAC/B,QAAM,KAAK,OAAO,QAAQ,KAAK;AAC/B,MAAI,MAAM,EAAG,QAAO,OAAO,IAAI,CAAC;AAChC,MAAI,OAAO,SAAS,EAAG;AACvB,WAAS,oBAAoB,WAAW,WAAW,IAAI;AACvD,WAAS,oBAAoB,WAAW,QAAQ;AAChD,aAAW;AACb;AAYO,SAAS,gBAAgB,MAAe,UAA4C;AACzF,QAAM,aAAa,OAAO,QAAQ;AAMlC,YAAU,MAAM;AACd,eAAW,UAAU;AAAA,EACvB,CAAC;AACD,YAAU,MAAM;AACd,QAAI,CAAC,QAAQ,OAAO,aAAa,YAAa;AAC9C,UAAM,QAAe,EAAE,QAAQ,CAAC,MAAM,WAAW,QAAQ,CAAC,EAAE;AAC5D,SAAK,KAAK;AACV,WAAO,MAAM,IAAI,KAAK;AAAA,EACxB,GAAG,CAAC,IAAI,CAAC;AACX;AAQO,SAAS,WAAW,GAAgD;AACzE,SAAO,SAAS,GAAG,IAAI;AACzB;AAOO,SAAS,YAAY,GAA6C;AACvE,UAAQ,IAAI,SAAS,CAAC,CAAC;AACvB,IAAE,eAAe;AACnB;AAOO,SAAS,cAA4C,GAAM,SAA6C;AAC7G,MAAI,CAAC,QAAS;AACd,QAAM,SAAS,EAAE;AACjB,UAAQ,CAAC;AACT,MAAI,EAAE,QAAQ,YAAY,CAAC,UAAU,EAAE,iBAAkB,SAAQ,IAAI,SAAS,CAAC,CAAC;AAClF;AAQO,SAAS,aAAa,SAAqB,UAAU,MAAY;AACtE,kBAAgB,SAAS,OAAO;AAClC;AAuBO,SAAS,gBACd,MACA,SACA,UAAU,MACJ;AACN,QAAM,UAAU,OAAO,IAAI;AAC3B,QAAM,aAAa,OAAO,OAAO;AAEjC,YAAU,MAAM;AACd,YAAQ,UAAU;AAClB,eAAW,UAAU;AAAA,EACvB,CAAC;AACD,YAAU,MAAM;AACd,QAAI,CAAC,QAAS;AACd,UAAM,gBAAgB,CAAC,MAAa;AAClC,YAAM,SAAS,EAAE;AACjB,YAAM,OAAO,MAAM,QAAQ,QAAQ,OAAO,IAAI,QAAQ,UAAU,CAAC,QAAQ,OAAO;AAChF,iBAAW,KAAK,MAAM;AACpB,YAAI,EAAE,SAAS,SAAS,MAAM,EAAG;AAAA,MACnC;AACA,iBAAW,QAAQ;AAAA,IACrB;AACA,aAAS,iBAAiB,eAAe,aAAa;AACtD,WAAO,MAAM,SAAS,oBAAoB,eAAe,aAAa;AAAA,EACxE,GAAG,CAAC,OAAO,CAAC;AACd;","names":[]}

package/dist/hooks/use-file-drop.d.ts

@@ -1,104 +1,5 @@
-import { DragEvent, ReactElement } from 'react';
-import { fM as UseFilePickerOptions } from '../delete-account-setting-DiPX4Vue.js';
-import '../components/tooltip.js';
-import './use-anchored-rect.js';
-import '../lib/clipping.js';
-import '../data-table-labels-BJ5JE_X2.js';
-import '../components/data-table-sort.js';
-import '../components/swipeable-row.js';
-import '../components/status-dot.js';
-import '../components/progress-bar.js';
-import '../components/signed-amount.js';
-import '../components/stat-tile.js';
-import '../components/chip.js';
-import 'lucide-react';
-import '../components/field-parts.js';
-import '../components/write-lock.js';
-import '../components/mini-calendar.js';
-import '../components/calendar-heatmap.js';
-import '../components/popover.js';
-import './use-breakpoint.js';
-import '../components/field-sync.js';
-import '../wizard/types.js';
-import '../tour/tour.js';
-import '../search/command-palette.js';
-import '../search/global-search.js';
-import '../search/search-index.js';
-import '../components/month-picker.js';
-import '../components/page-contents.js';
-import '../components/series-chart-labels.js';
-import '../components/pie-chart-labels.js';
-import '../components/sparkline.js';
-import '../components/signature-pad.js';
-import '../components/password-strength.js';
-import '../components/swatch-picker.js';
-import '../components/tile-radio.js';
-import '../components/icon-picker.js';
-import '../components/dialog-frame.js';
-import '../components/modal.js';
-import './use-search-param-state.js';
-import '../components/measured-grid.js';
-import '../components/user-avatar.js';
-import '../lib/person-name.js';
-import '../shell/topbar-action-menu.js';
-import '../components/menu-item.js';
-import '../components/floating-panel.js';
-import './use-authed-src.js';
-import '../components/account-settings-labels.js';
-import '../components/bulk-action-bar.js';
-import '../components/list.js';
-import '../components/breadcrumbs.js';
-import '../components/toast.js';
-import '../components/description-list.js';
-import '../components/line-items.js';
-import '../components/error-boundary.js';
-import '../components/authed-image.js';
-import '../components/image-grid.js';
-import '../components/lightbox.js';
-import '../auth/sign-in-form.js';
-import '../landing/access.js';
-import '../landing/landing-labels.js';
-import '../shell/topbar-controls.js';
-import '../theme/palette-presets.js';
-import '../theme/chart-palette.js';
-import '../theme/theme-store.js';
-import 'zustand/middleware';
-import 'zustand';
-import '../auth/complete-name-dialog.js';
-import '../auth/forgot-password-form.js';
-import '../auth/status-parts.js';
-import '../auth/reset-password-form.js';
-import '../auth/verify-email.js';
-import '../auth/not-found-page.js';
-import '../auth/accept-invitation.js';
-import '../shell/company-switcher.js';
-import '../account/email-change-setting.js';
-import '../account/sessions-setting.js';
-import '../lib/format.js';
-import '../account/data-export-setting.js';
-import '../components/account-chips.js';
-import '../admin/admin-parts.js';
-import '../admin/admin-action-log.js';
-import '../settings/settings-labels.js';
-import '../demo/demo-labels.js';
-import '../components/appearance-labels.js';
-import '../theme/contrast.js';
-import '../theme/text-size.js';
-import '../components/reauth-dialog.js';
-import '../components/server-wake.js';
-import '../lib/server-wake.js';
-import '../components/translation-review-labels.js';
-import '../lib/translation-review.js';
-import '../components/country-select.js';
-import '../components/inline-edit-field.js';
-import '../lib/iban.js';
-import '../lib/phone.js';
-import '../components/sign-chip.js';
-import '../components/column-mapper.js';
-import '../lib/column-mapping.js';
-import '../lib/table-text.js';
-import '../components/focus-ring.js';
-
+import type { DragEvent, ReactElement } from "react";
+import type { UseFilePickerOptions } from "./use-file-picker.js";
 /**
  * Turn ANY element into a file drop target — kastlan's ask, for the document list of
  * a booking and the rows of its gantt, which are drop targets without being a
@@ -117,16 +18,16 @@ import '../components/focus-ring.js';
  * the same options can also back a "choose a file" menu item beside the drop target.
  */
 /** `useFilePicker`'s options, minus `capture` (a camera does not take drops). */
-type UseFileDropOptions = Omit<UseFilePickerOptions, "capture">;
+export type UseFileDropOptions = Omit<UseFilePickerOptions, "capture">;
 /** Spread onto the drop target. Four handlers, nothing else: the element keeps its
  *  own role, name and focus behaviour. */
-interface FileDropProps<E extends Element = Element> {
+export interface FileDropProps<E extends Element = Element> {
     onDragEnter: (e: DragEvent<E>) => void;
     onDragOver: (e: DragEvent<E>) => void;
     onDragLeave: (e: DragEvent<E>) => void;
     onDrop: (e: DragEvent<E>) => void;
 }
-interface UseFileDropReturn<E extends Element = Element> {
+export interface UseFileDropReturn<E extends Element = Element> {
     dropProps: FileDropProps<E>;
     /** A FILE drag is over the target (and it is not `disabled`). Style from this. */
     isOver: boolean;
@@ -140,7 +41,7 @@ interface UseFileDropReturn<E extends Element = Element> {
 }
 /** Whether a drag carries files — a dragged link, text or a row of the page does not,
  *  and must not light the target up or be swallowed by it. */
-declare function dragHasFiles(e: DragEvent): boolean;
+export declare function dragHasFiles(e: DragEvent): boolean;
 /**
  * @internal The drag half on its own, shared with `FileDropzone`.
  *
@@ -155,13 +56,11 @@ declare function dragHasFiles(e: DragEvent): boolean;
  * page-wide drop area) takes its own drop, and the outer one's count falls back to
  * zero while the pointer is over the inner one — only one of them lights up.
  */
-declare function useDragTarget<E extends Element = Element>({ disabled, onDropFiles, }: {
+export declare function useDragTarget<E extends Element = Element>({ disabled, onDropFiles, }: {
     disabled?: boolean;
     onDropFiles: (files: FileList | File[]) => void;
 }): {
     dropProps: FileDropProps<E>;
     isOver: boolean;
 };
-declare function useFileDrop<E extends Element = Element>(options: UseFileDropOptions): UseFileDropReturn<E>;
-
-export { type FileDropProps, type UseFileDropOptions, type UseFileDropReturn, dragHasFiles, useDragTarget, useFileDrop };
+export declare function useFileDrop<E extends Element = Element>(options: UseFileDropOptions): UseFileDropReturn<E>;

package/dist/hooks/use-file-drop.js

@@ -1,6 +1,6 @@
 "use client";
 import { useRef, useState } from "react";
-import { useFilePicker } from "../components/file-button.js";
+import { useFilePicker } from "./use-file-picker.js";
 function dragHasFiles(e) {
   return Array.from(e.dataTransfer?.types ?? []).includes("Files");
 }

package/dist/hooks/use-file-drop.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/use-file-drop.ts"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport type { DragEvent, ReactElement } from \"react\";\nimport { useFilePicker } from \"../components/file-button\";\nimport type { UseFilePickerOptions } from \"../components/file-button\";\n\n/**\n * Turn ANY element into a file drop target — kastlan's ask, for the document list of\n * a booking and the rows of its gantt, which are drop targets without being a\n * `FileDropzone` (a dashed box with a Browse button inside would be the wrong thing\n * to draw over a list).\n *\n * ```tsx\n * const { dropProps, isOver, element } = useFileDrop({ accept: \".pdf\", multiple: true,\n *   maxSize: 10_000_000, onFiles: attach, onReject: ([r]) => setError(r.message) });\n * return <>{element}<ul {...dropProps} data-drop-over={isOver || undefined}>…</ul></>;\n * ```\n *\n * The screening is `useFilePicker`'s own — `accept` re-checked (a drop ignores the\n * dialog's filter), `maxSize`, `maxFiles`, `isValid`, `onPick` — so a file refused by\n * `FileButton` is refused here in the same words. It comes with `open()` as well, so\n * the same options can also back a \"choose a file\" menu item beside the drop target.\n */\n\n/** `useFilePicker`'s options, minus `capture` (a camera does not take drops). */\nexport type UseFileDropOptions = Omit<UseFilePickerOptions, \"capture\">;\n\n/** Spread onto the drop target. Four handlers, nothing else: the element keeps its\n *  own role, name and focus behaviour. */\nexport interface FileDropProps<E extends Element = Element> {\n  onDragEnter: (e: DragEvent<E>) => void;\n  onDragOver: (e: DragEvent<E>) => void;\n  onDragLeave: (e: DragEvent<E>) => void;\n  onDrop: (e: DragEvent<E>) => void;\n}\n\nexport interface UseFileDropReturn<E extends Element = Element> {\n  dropProps: FileDropProps<E>;\n  /** A FILE drag is over the target (and it is not `disabled`). Style from this. */\n  isOver: boolean;\n  /** Open the system picker with the same options — from a click handler only. */\n  open: () => void;\n  /** Screen and deliver files that arrived another way (a paste). */\n  take: (files: ArrayLike<File> | null | undefined) => void;\n  /** The live region that speaks a refusal (and the picker's hidden input). Render it\n   *  once, anywhere; without it a refusal reaches `onReject` but is not announced. */\n  element: ReactElement;\n}\n\n/** Whether a drag carries files — a dragged link, text or a row of the page does not,\n *  and must not light the target up or be swallowed by it. */\nexport function dragHasFiles(e: DragEvent): boolean {\n  return Array.from(e.dataTransfer?.types ?? []).includes(\"Files\");\n}\n\n/**\n * @internal The drag half on its own, shared with `FileDropzone`.\n *\n * `dragenter`/`dragleave` fire for every CHILD the pointer crosses: moving from the\n * target onto a label inside it is a leave of the target followed by an enter of the\n * label, which bubbles. A boolean flipped by each one flickers off and on across\n * every child, and `relatedTarget` — the usual fix — is `null` in Safari's drag\n * events. So this counts: +1 per enter, -1 per leave, over while above zero, and a\n * drop resets it (the drop replaces the leave that would have balanced the enter).\n *\n * A file drag stops propagating here, so a target nested in another (a row inside a\n * page-wide drop area) takes its own drop, and the outer one's count falls back to\n * zero while the pointer is over the inner one — only one of them lights up.\n */\nexport function useDragTarget<E extends Element = Element>({\n  disabled,\n  onDropFiles,\n}: {\n  disabled?: boolean;\n  onDropFiles: (files: FileList | File[]) => void;\n}): { dropProps: FileDropProps<E>; isOver: boolean } {\n  const depth = useRef(0);\n  const [over, setOver] = useState(false);\n\n  const dropProps: FileDropProps<E> = {\n    onDragEnter: (e) => {\n      if (!dragHasFiles(e)) return;\n      e.stopPropagation();\n      e.preventDefault();\n      depth.current += 1;\n      if (!disabled) setOver(true);\n    },\n    onDragOver: (e) => {\n      if (!dragHasFiles(e)) return;\n      e.stopPropagation();\n      // Always cancelled for a file drag, disabled or not: an uncancelled drop makes\n      // the browser NAVIGATE to the file, which loses the page.\n      e.preventDefault();\n      e.dataTransfer.dropEffect = disabled ? \"none\" : \"copy\";\n    },\n    onDragLeave: (e) => {\n      if (!dragHasFiles(e)) return;\n      e.stopPropagation();\n      depth.current = Math.max(0, depth.current - 1);\n      if (depth.current === 0) setOver(false);\n    },\n    onDrop: (e) => {\n      if (!dragHasFiles(e)) return;\n      e.stopPropagation();\n      e.preventDefault();\n      depth.current = 0;\n      setOver(false);\n      if (!disabled) onDropFiles(e.dataTransfer.files);\n    },\n  };\n\n  return { dropProps, isOver: over && !disabled };\n}\n\nexport function useFileDrop<E extends Element = Element>(\n  options: UseFileDropOptions,\n): UseFileDropReturn<E> {\n  const picker = useFilePicker(options);\n  const { dropProps, isOver } = useDragTarget<E>({\n    disabled: options.disabled,\n    onDropFiles: picker.take,\n  });\n  return { dropProps, isOver, open: picker.open, take: picker.take, element: picker.element };\n}\n"],"mappings":";AAAA,SAAS,QAAQ,gBAAgB;AAEjC,SAAS,qBAAqB;AAgDvB,SAAS,aAAa,GAAuB;AAClD,SAAO,MAAM,KAAK,EAAE,cAAc,SAAS,CAAC,CAAC,EAAE,SAAS,OAAO;AACjE;AAgBO,SAAS,cAA2C;AAAA,EACzD;AAAA,EACA;AACF,GAGqD;AACnD,QAAM,QAAQ,OAAO,CAAC;AACtB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEtC,QAAM,YAA8B;AAAA,IAClC,aAAa,CAAC,MAAM;AAClB,UAAI,CAAC,aAAa,CAAC,EAAG;AACtB,QAAE,gBAAgB;AAClB,QAAE,eAAe;AACjB,YAAM,WAAW;AACjB,UAAI,CAAC,SAAU,SAAQ,IAAI;AAAA,IAC7B;AAAA,IACA,YAAY,CAAC,MAAM;AACjB,UAAI,CAAC,aAAa,CAAC,EAAG;AACtB,QAAE,gBAAgB;AAGlB,QAAE,eAAe;AACjB,QAAE,aAAa,aAAa,WAAW,SAAS;AAAA,IAClD;AAAA,IACA,aAAa,CAAC,MAAM;AAClB,UAAI,CAAC,aAAa,CAAC,EAAG;AACtB,QAAE,gBAAgB;AAClB,YAAM,UAAU,KAAK,IAAI,GAAG,MAAM,UAAU,CAAC;AAC7C,UAAI,MAAM,YAAY,EAAG,SAAQ,KAAK;AAAA,IACxC;AAAA,IACA,QAAQ,CAAC,MAAM;AACb,UAAI,CAAC,aAAa,CAAC,EAAG;AACtB,QAAE,gBAAgB;AAClB,QAAE,eAAe;AACjB,YAAM,UAAU;AAChB,cAAQ,KAAK;AACb,UAAI,CAAC,SAAU,aAAY,EAAE,aAAa,KAAK;AAAA,IACjD;AAAA,EACF;AAEA,SAAO,EAAE,WAAW,QAAQ,QAAQ,CAAC,SAAS;AAChD;AAEO,SAAS,YACd,SACsB;AACtB,QAAM,SAAS,cAAc,OAAO;AACpC,QAAM,EAAE,WAAW,OAAO,IAAI,cAAiB;AAAA,IAC7C,UAAU,QAAQ;AAAA,IAClB,aAAa,OAAO;AAAA,EACtB,CAAC;AACD,SAAO,EAAE,WAAW,QAAQ,MAAM,OAAO,MAAM,MAAM,OAAO,MAAM,SAAS,OAAO,QAAQ;AAC5F;","names":[]}
+{"version":3,"sources":["../../src/hooks/use-file-drop.ts"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport type { DragEvent, ReactElement } from \"react\";\nimport { useFilePicker } from \"./use-file-picker\";\nimport type { UseFilePickerOptions } from \"./use-file-picker\";\n\n/**\n * Turn ANY element into a file drop target — kastlan's ask, for the document list of\n * a booking and the rows of its gantt, which are drop targets without being a\n * `FileDropzone` (a dashed box with a Browse button inside would be the wrong thing\n * to draw over a list).\n *\n * ```tsx\n * const { dropProps, isOver, element } = useFileDrop({ accept: \".pdf\", multiple: true,\n *   maxSize: 10_000_000, onFiles: attach, onReject: ([r]) => setError(r.message) });\n * return <>{element}<ul {...dropProps} data-drop-over={isOver || undefined}>…</ul></>;\n * ```\n *\n * The screening is `useFilePicker`'s own — `accept` re-checked (a drop ignores the\n * dialog's filter), `maxSize`, `maxFiles`, `isValid`, `onPick` — so a file refused by\n * `FileButton` is refused here in the same words. It comes with `open()` as well, so\n * the same options can also back a \"choose a file\" menu item beside the drop target.\n */\n\n/** `useFilePicker`'s options, minus `capture` (a camera does not take drops). */\nexport type UseFileDropOptions = Omit<UseFilePickerOptions, \"capture\">;\n\n/** Spread onto the drop target. Four handlers, nothing else: the element keeps its\n *  own role, name and focus behaviour. */\nexport interface FileDropProps<E extends Element = Element> {\n  onDragEnter: (e: DragEvent<E>) => void;\n  onDragOver: (e: DragEvent<E>) => void;\n  onDragLeave: (e: DragEvent<E>) => void;\n  onDrop: (e: DragEvent<E>) => void;\n}\n\nexport interface UseFileDropReturn<E extends Element = Element> {\n  dropProps: FileDropProps<E>;\n  /** A FILE drag is over the target (and it is not `disabled`). Style from this. */\n  isOver: boolean;\n  /** Open the system picker with the same options — from a click handler only. */\n  open: () => void;\n  /** Screen and deliver files that arrived another way (a paste). */\n  take: (files: ArrayLike<File> | null | undefined) => void;\n  /** The live region that speaks a refusal (and the picker's hidden input). Render it\n   *  once, anywhere; without it a refusal reaches `onReject` but is not announced. */\n  element: ReactElement;\n}\n\n/** Whether a drag carries files — a dragged link, text or a row of the page does not,\n *  and must not light the target up or be swallowed by it. */\nexport function dragHasFiles(e: DragEvent): boolean {\n  return Array.from(e.dataTransfer?.types ?? []).includes(\"Files\");\n}\n\n/**\n * @internal The drag half on its own, shared with `FileDropzone`.\n *\n * `dragenter`/`dragleave` fire for every CHILD the pointer crosses: moving from the\n * target onto a label inside it is a leave of the target followed by an enter of the\n * label, which bubbles. A boolean flipped by each one flickers off and on across\n * every child, and `relatedTarget` — the usual fix — is `null` in Safari's drag\n * events. So this counts: +1 per enter, -1 per leave, over while above zero, and a\n * drop resets it (the drop replaces the leave that would have balanced the enter).\n *\n * A file drag stops propagating here, so a target nested in another (a row inside a\n * page-wide drop area) takes its own drop, and the outer one's count falls back to\n * zero while the pointer is over the inner one — only one of them lights up.\n */\nexport function useDragTarget<E extends Element = Element>({\n  disabled,\n  onDropFiles,\n}: {\n  disabled?: boolean;\n  onDropFiles: (files: FileList | File[]) => void;\n}): { dropProps: FileDropProps<E>; isOver: boolean } {\n  const depth = useRef(0);\n  const [over, setOver] = useState(false);\n\n  const dropProps: FileDropProps<E> = {\n    onDragEnter: (e) => {\n      if (!dragHasFiles(e)) return;\n      e.stopPropagation();\n      e.preventDefault();\n      depth.current += 1;\n      if (!disabled) setOver(true);\n    },\n    onDragOver: (e) => {\n      if (!dragHasFiles(e)) return;\n      e.stopPropagation();\n      // Always cancelled for a file drag, disabled or not: an uncancelled drop makes\n      // the browser NAVIGATE to the file, which loses the page.\n      e.preventDefault();\n      e.dataTransfer.dropEffect = disabled ? \"none\" : \"copy\";\n    },\n    onDragLeave: (e) => {\n      if (!dragHasFiles(e)) return;\n      e.stopPropagation();\n      depth.current = Math.max(0, depth.current - 1);\n      if (depth.current === 0) setOver(false);\n    },\n    onDrop: (e) => {\n      if (!dragHasFiles(e)) return;\n      e.stopPropagation();\n      e.preventDefault();\n      depth.current = 0;\n      setOver(false);\n      if (!disabled) onDropFiles(e.dataTransfer.files);\n    },\n  };\n\n  return { dropProps, isOver: over && !disabled };\n}\n\nexport function useFileDrop<E extends Element = Element>(\n  options: UseFileDropOptions,\n): UseFileDropReturn<E> {\n  const picker = useFilePicker(options);\n  const { dropProps, isOver } = useDragTarget<E>({\n    disabled: options.disabled,\n    onDropFiles: picker.take,\n  });\n  return { dropProps, isOver, open: picker.open, take: picker.take, element: picker.element };\n}\n"],"mappings":";AAAA,SAAS,QAAQ,gBAAgB;AAEjC,SAAS,qBAAqB;AAgDvB,SAAS,aAAa,GAAuB;AAClD,SAAO,MAAM,KAAK,EAAE,cAAc,SAAS,CAAC,CAAC,EAAE,SAAS,OAAO;AACjE;AAgBO,SAAS,cAA2C;AAAA,EACzD;AAAA,EACA;AACF,GAGqD;AACnD,QAAM,QAAQ,OAAO,CAAC;AACtB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEtC,QAAM,YAA8B;AAAA,IAClC,aAAa,CAAC,MAAM;AAClB,UAAI,CAAC,aAAa,CAAC,EAAG;AACtB,QAAE,gBAAgB;AAClB,QAAE,eAAe;AACjB,YAAM,WAAW;AACjB,UAAI,CAAC,SAAU,SAAQ,IAAI;AAAA,IAC7B;AAAA,IACA,YAAY,CAAC,MAAM;AACjB,UAAI,CAAC,aAAa,CAAC,EAAG;AACtB,QAAE,gBAAgB;AAGlB,QAAE,eAAe;AACjB,QAAE,aAAa,aAAa,WAAW,SAAS;AAAA,IAClD;AAAA,IACA,aAAa,CAAC,MAAM;AAClB,UAAI,CAAC,aAAa,CAAC,EAAG;AACtB,QAAE,gBAAgB;AAClB,YAAM,UAAU,KAAK,IAAI,GAAG,MAAM,UAAU,CAAC;AAC7C,UAAI,MAAM,YAAY,EAAG,SAAQ,KAAK;AAAA,IACxC;AAAA,IACA,QAAQ,CAAC,MAAM;AACb,UAAI,CAAC,aAAa,CAAC,EAAG;AACtB,QAAE,gBAAgB;AAClB,QAAE,eAAe;AACjB,YAAM,UAAU;AAChB,cAAQ,KAAK;AACb,UAAI,CAAC,SAAU,aAAY,EAAE,aAAa,KAAK;AAAA,IACjD;AAAA,EACF;AAEA,SAAO,EAAE,WAAW,QAAQ,QAAQ,CAAC,SAAS;AAChD;AAEO,SAAS,YACd,SACsB;AACtB,QAAM,SAAS,cAAc,OAAO;AACpC,QAAM,EAAE,WAAW,OAAO,IAAI,cAAiB;AAAA,IAC7C,UAAU,QAAQ;AAAA,IAClB,aAAa,OAAO;AAAA,EACtB,CAAC;AACD,SAAO,EAAE,WAAW,QAAQ,MAAM,OAAO,MAAM,MAAM,OAAO,MAAM,SAAS,OAAO,QAAQ;AAC5F;","names":[]}

package/dist/hooks/use-file-picker-labels.d.ts

@@ -0,0 +1,2 @@
+import type { FilePickerLabels } from "./use-file-picker.js";
+export declare const DEFAULT_FILE_PICKER_LABELS: FilePickerLabels;

package/dist/hooks/use-file-picker-labels.js

@@ -0,0 +1,25 @@
+"use client";
+const DEFAULT_FILE_PICKER_LABELS = {
+  rejectedType: (name) => `\u201C${name}\u201D is not a supported file type`,
+  rejectedTypeOnly: (accept) => `Only ${accept} files`,
+  rejectedSize: (name, maxSize) => `\u201C${name}\u201D is larger than ${maxSize}`,
+  rejectedCount: (name, maxFiles) => `\u201C${name}\u201D was not added: at most ${maxFiles} ${maxFiles === 1 ? "file" : "files"}`,
+  rejectedInvalid: (name) => `\u201C${name}\u201D cannot be used here`,
+  rejectedMany: (count) => `${count} files were not added`,
+  rejectedPick: (count) => count === 1 ? "The file was not added" : `None of the ${count} files were added`,
+  selected: (count, firstName) => count === 1 ? `\u201C${firstName}\u201D selected` : `${count} files selected`,
+  remove: (name) => `Remove \u201C${name}\u201D`,
+  clearAll: "Remove all files",
+  removed: (name) => `\u201C${name}\u201D removed`,
+  cleared: "All files removed",
+  dropzone: "File upload",
+  browse: "Browse",
+  empty: "Drop a file here",
+  emptyMultiple: "Drop files here",
+  hint: (accept) => accept ? `Accepted: ${accept}` : "Any file type",
+  busy: "Uploading\u2026"
+};
+export {
+  DEFAULT_FILE_PICKER_LABELS
+};
+//# sourceMappingURL=use-file-picker-labels.js.map

package/dist/hooks/use-file-picker-labels.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/use-file-picker-labels.ts"],"sourcesContent":["// The English words of the file pickers (./use-file-picker), in a module with no component\n// code: the English catalogue (src/i18n/defaults.ts) imports them without the component, so\n// `en` loads as one chunk like the other languages (0.34, KS U8). In hooks/ beside the hook\n// since 0.34 (MOD-8); components/file-button re-exports them.\n\nimport type { FilePickerLabels } from \"./use-file-picker\";\n\nexport const DEFAULT_FILE_PICKER_LABELS: FilePickerLabels = {\n  rejectedType: (name) => `“${name}” is not a supported file type`,\n  rejectedTypeOnly: (accept) => `Only ${accept} files`,\n  rejectedSize: (name, maxSize) => `“${name}” is larger than ${maxSize}`,\n  rejectedCount: (name, maxFiles) =>\n    `“${name}” was not added: at most ${maxFiles} ${maxFiles === 1 ? \"file\" : \"files\"}`,\n  rejectedInvalid: (name) => `“${name}” cannot be used here`,\n  rejectedMany: (count) => `${count} files were not added`,\n  rejectedPick: (count) =>\n    count === 1 ? \"The file was not added\" : `None of the ${count} files were added`,\n  selected: (count, firstName) => (count === 1 ? `“${firstName}” selected` : `${count} files selected`),\n  remove: (name) => `Remove “${name}”`,\n  clearAll: \"Remove all files\",\n  removed: (name) => `“${name}” removed`,\n  cleared: \"All files removed\",\n  dropzone: \"File upload\",\n  browse: \"Browse\",\n  empty: \"Drop a file here\",\n  emptyMultiple: \"Drop files here\",\n  hint: (accept) => (accept ? `Accepted: ${accept}` : \"Any file type\"),\n  busy: \"Uploading…\",\n};\n"],"mappings":";AAOO,MAAM,6BAA+C;AAAA,EAC1D,cAAc,CAAC,SAAS,SAAI,IAAI;AAAA,EAChC,kBAAkB,CAAC,WAAW,QAAQ,MAAM;AAAA,EAC5C,cAAc,CAAC,MAAM,YAAY,SAAI,IAAI,yBAAoB,OAAO;AAAA,EACpE,eAAe,CAAC,MAAM,aACpB,SAAI,IAAI,iCAA4B,QAAQ,IAAI,aAAa,IAAI,SAAS,OAAO;AAAA,EACnF,iBAAiB,CAAC,SAAS,SAAI,IAAI;AAAA,EACnC,cAAc,CAAC,UAAU,GAAG,KAAK;AAAA,EACjC,cAAc,CAAC,UACb,UAAU,IAAI,2BAA2B,eAAe,KAAK;AAAA,EAC/D,UAAU,CAAC,OAAO,cAAe,UAAU,IAAI,SAAI,SAAS,oBAAe,GAAG,KAAK;AAAA,EACnF,QAAQ,CAAC,SAAS,gBAAW,IAAI;AAAA,EACjC,UAAU;AAAA,EACV,SAAS,CAAC,SAAS,SAAI,IAAI;AAAA,EAC3B,SAAS;AAAA,EACT,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,eAAe;AAAA,EACf,MAAM,CAAC,WAAY,SAAS,aAAa,MAAM,KAAK;AAAA,EACpD,MAAM;AACR;","names":[]}

package/dist/hooks/use-file-picker.d.ts

@@ -0,0 +1,164 @@
+import type { ReactElement } from "react";
+import { type LabelOverride } from "../i18n/kit-labels.js";
+/**
+ * The file pickers' headless half: the hidden input, the screening of a pick and the
+ * announcement of a refusal, which {@link FileButton}, `FileDropzone` and {@link useFileDrop}
+ * are built on.
+ *
+ * In hooks/ since 0.34 (MOD-8, refactor audit 2026-10). It lived in
+ * components/file-button.tsx, and `useFileDrop` — a hook — imported it from there, so
+ * hooks/ reached up into components/. components/file-button re-exports all of it, so an
+ * import from there keeps working.
+ */
+/** Every string the file pickers ({@link FileButton}, `FileDropzone`) render or speak.
+ *  Messages are functions of the file name so a translation can put it anywhere. */
+export interface FilePickerLabels {
+    /** The file's type is not in `accept`, when no `accept` is known to name (see
+     *  `rejectedTypeOnly`). */
+    rejectedType: (name: string) => string;
+    /** The file's type is not in `accept`, naming what IS accepted: `accept`'s tokens,
+     *  lower-cased and joined with ", " (`".csv"` => "Only .csv files"). Used whenever
+     *  `accept` is set — kastlan kept a custom `isValid` + `invalidMessage` per form only
+     *  to say this, and `accept` already knows it. */
+    rejectedTypeOnly: (accept: string, name: string) => string;
+    /** The file is larger than `maxSize`; `maxSize` arrives formatted ("5 MB"). */
+    rejectedSize: (name: string, maxSize: string) => string;
+    /** The file was one too many for `maxFiles`. */
+    rejectedCount: (name: string, maxFiles: number) => string;
+    /** `isValid` said no and the caller gave no `invalidMessage`. */
+    rejectedInvalid: (name: string) => string;
+    /** Spoken instead of the per-file message when more than one file was refused. */
+    rejectedMany: (count: number) => string;
+    /** Spoken (and shown, on a dropzone) when `onPick` refused the WHOLE pick.
+     *  Receives the number of files in it. */
+    rejectedPick: (count: number) => string;
+    /** Spoken after a pick the component itself echoes (the dropzone). */
+    selected: (count: number, firstName: string) => string;
+    /** The dropzone's remove button for one file. */
+    remove: (name: string) => string;
+    /** The dropzone's remove-everything button in `multiple` mode. */
+    clearAll: string;
+    /** Spoken after a remove / clear, since the button that was pressed is gone. */
+    removed: (name: string) => string;
+    cleared: string;
+    /** The dropzone's accessible name, when the host passes no `dropLabel`. */
+    dropzone: string;
+    /** The dropzone's Browse button, when the host passes no `browseLabel`. */
+    browse: string;
+    /** What an empty single-file dropzone says (no `emptyLabel` given). */
+    empty: string;
+    /** …and an empty `multiple` one. */
+    emptyMultiple: string;
+    /** The dropzone's second line (no `hint` given). Receives `accept` as a person
+     *  reads it (`".pdf, image/png"`), or `""` when anything goes. */
+    hint: (accept: string) => string;
+    /** What a `busy` dropzone says in place of its body ("Uploading…"). */
+    busy: string;
+}
+export type FileRejectionReason = "type" | "size" | "count" | "invalid";
+/** One file the picker refused, and why. `message` is already translated (see
+ *  {@link FilePickerLabels}, or the caller's `invalidMessage`), so a host that just
+ *  wants to show it can render `rejections[0].message` as is. */
+export interface FileRejection {
+    file: File;
+    reason: FileRejectionReason;
+    message: string;
+}
+/**
+ * Does `file` satisfy an `accept` string, the way the browser's dialog reads it?
+ * Comma-separated tokens: `.ext` (case-insensitive suffix of the name), `type/*`
+ * (a MIME family) or an exact MIME type. An empty or absent `accept` takes anything.
+ *
+ * A file with no `type` — common for `.step`, `.dat`, anything the OS has no MIME
+ * mapping for — can only match by extension, which is why lenkbank lists `.stp` AND
+ * `model/step`: that is how `accept` has to be written for the dialog anyway.
+ */
+export declare function matchesAccept(file: File, accept: string | undefined): boolean;
+/** @internal `" .PDF, image/png ,"` => `".pdf, image/png"` — `accept` as a person reads
+ *  it. Also the dropzone's default hint. */
+export declare function formatAccept(accept: string): string;
+/** What the pickers screen a pick with. All optional; nothing set accepts everything. */
+export interface FileScreenOptions {
+    accept?: string;
+    /** Bytes. Larger files are refused with reason `"size"`. */
+    maxSize?: number;
+    /** How many files one pick may deliver. The rest are refused with reason `"count"`
+     *  — first come, first kept. For a running cap ("at most 5 attachments") pass what
+     *  is LEFT: `maxFiles={5 - attachments.length}`. */
+    maxFiles?: number;
+    /** The caller's own check, after `accept` and `maxSize`. */
+    isValid?: (file: File) => boolean;
+    /** The message for an `isValid` refusal; `labels.rejectedInvalid` otherwise. */
+    invalidMessage?: string;
+}
+/** @internal Split a pick into the files that pass and the ones that do not. */
+export declare function screenFiles(files: readonly File[], opts: FileScreenOptions, labels: FilePickerLabels, formatSize: (bytes: number) => string): {
+    accepted: File[];
+    rejected: FileRejection[];
+};
+/**
+ * Judges a pick as a whole — keksdose's "refuse the pick if any file is bad", which
+ * with `onFiles` + `onReject` alone had to be rebuilt from two calls in a microtask.
+ *
+ * Called ONCE per pick, after screening and before `onFiles` / `onReject`, with both
+ * halves (either may be empty). Return `false` to refuse the whole pick: the accepted
+ * files are not delivered, `onReject` still receives what screening refused, and one
+ * sentence (`labels.rejectedPick`) is spoken for the pick instead of a per-file one.
+ * Return nothing to let the pick through as usual.
+ *
+ * ```tsx
+ * onPick={(ok, bad) => bad.length === 0 || false}  // all or nothing
+ * ```
+ */
+export type FilePickHandler = (accepted: File[], rejected: FileRejection[]) => boolean | void;
+/** @internal The shared tail of both pickers: run `onPick`, and say whether the pick
+ *  stands. A pick with nothing accepted has nothing to refuse, so `false` there is
+ *  treated as no verdict and the usual per-file messages are kept. */
+export declare function judgePick(onPick: FilePickHandler | undefined, accepted: File[], rejected: FileRejection[]): boolean;
+/** One sentence for a whole batch of refusals: the file's own message for one, a
+ *  count for several — reading out five sentences in a row helps nobody. */
+export declare function summariseRejections(rejected: readonly FileRejection[], labels: FilePickerLabels): string;
+export interface UseFilePickerOptions extends FileScreenOptions {
+    /** Let one pick deliver several files. Without it a drop of several keeps the first. */
+    multiple?: boolean;
+    /**
+     * Ask a phone for its camera instead of the file chooser: `"environment"` is the
+     * back camera, `"user"` the front. A HINT — desktop browsers ignore it, and Chrome
+     * drops it when `multiple` is also set (a camera cannot deliver a list), which is why
+     * keksdose's camera input has no `multiple`. Pass one or the other.
+     */
+    capture?: boolean | "user" | "environment";
+    /** The files that passed, in pick order. Never called with an empty array.
+     *  Optional since 0.7 for a caller that takes the pick through `onPick` alone. */
+    onFiles?: (files: File[]) => void;
+    /** See {@link FilePickHandler}: the whole pick at once, with the power to refuse it. */
+    onPick?: FilePickHandler;
+    /** The files that did not, with a translated message each. The refusals are also
+     *  spoken through a live region, so this is for SHOWING them, not for a11y. */
+    onReject?: (rejections: FileRejection[]) => void;
+    /** `open()` and `take()` do nothing while set. */
+    disabled?: boolean;
+    /** Per-instance overrides of the `filePicker` label namespace. */
+    labels?: LabelOverride<FilePickerLabels>;
+}
+export interface UseFilePickerReturn {
+    /** Open the system picker. Call it from a click handler — browsers only open a file
+     *  dialog in response to a user gesture. */
+    open: () => void;
+    /** Screen and deliver files that arrived some other way — a drop, a paste. Honours
+     *  `multiple` (only the first file without it) and every check. */
+    take: (files: ArrayLike<File> | null | undefined) => void;
+    /** The hidden input and the live region. Render it once, anywhere — it takes no
+     *  space and needs no positioned ancestor. */
+    element: ReactElement;
+}
+/**
+ * The headless half of {@link FileButton}: a hidden file input you can open from any
+ * control, with the reset, the screening and the announcement built in.
+ *
+ * ```tsx
+ * const picker = useFilePicker({ accept: ".pdf", onFiles: ([f]) => upload(f) });
+ * return <>{picker.element}<DetailTableCard onAdd={picker.open} … /></>;
+ * ```
+ */
+export declare function useFilePicker({ accept, multiple, capture, maxSize, maxFiles, isValid, invalidMessage, onFiles, onPick, onReject, disabled, labels: labelsProp, }: UseFilePickerOptions): UseFilePickerReturn;