@dumiflex/wp-kit 0.3.0 → 0.4.0

package/src/Drawer.vue

@@ -1,131 +1,131 @@
-<script setup lang="ts">
-/**
- * A panel that slides in from the side of the page: inspectors, history,
- * settings that sit beside the work instead of over it. Escape closes it,
- * Tab stays inside it and focus goes back where it was. With `modal` off
- * there is no backdrop, Tab moves on to the page and the page stays usable.
- */
-import CloseButton from "./CloseButton.vue";
-import { ref, useId, useSlots } from "vue";
-import { useDialogFocus } from "./useDialogFocus";
-
-interface Props {
-  open: boolean;
-  title?: string | undefined;
-  side?: "right" | "left" | undefined;
-  /** Any CSS width; capped at the viewport. */
-  width?: string | undefined;
-  /** Dim the page and close on a click outside. */
-  modal?: boolean | undefined;
-}
-const props = withDefaults(defineProps<Props>(), { side: "right", width: "420px", modal: true });
-const emit = defineEmits<{ (e: "update:open", v: boolean): void }>();
-
-const slots = useSlots();
-const panel = ref<HTMLElement | null>(null);
-const titleId = `wp-drawer-title-${useId()}`;
-
-function close(): void {
-  emit("update:open", false);
-}
-
-// The backdrop is a click target only; keyboard users close with Escape.
-function bindBackdrop(el: unknown): void {
-  if (el instanceof HTMLElement) el.onmousedown = (ev) => { if (ev.target === el) close(); };
-}
-
-useDialogFocus(panel, () => props.open, {
-  onEscape: close,
-  trap: () => props.modal,
-  // The first control in the body, not the close button.
-  initial: (root, els) => {
-    const body = root.querySelector(".wp-drawer__body");
-    return els.find((el) => body?.contains(el)) ?? root;
-  },
-});
-</script>
-
-<template>
-  <Teleport to="body">
-    <Transition name="wp-drawer-fade">
-      <div v-if="open && modal" :ref="bindBackdrop" class="wp-drawer__backdrop" data-test="drawer-backdrop" />
-    </Transition>
-    <Transition :name="`wp-drawer-${side}`">
-      <aside
-        v-if="open"
-        ref="panel"
-        class="wp-drawer"
-        :class="`wp-drawer--${side}`"
-        :style="{ width: `min(${width}, 100vw)` }"
-        role="dialog"
-        :aria-modal="modal || undefined"
-        :aria-labelledby="title ? titleId : undefined"
-        tabindex="-1"
-      >
-        <header v-if="title || slots.header" class="wp-drawer__head">
-          <h3 v-if="title" :id="titleId" class="wp-drawer__title">{{ title }}</h3>
-          <slot name="header" />
-          <span class="wp-spacer" />
-          <CloseButton kbd="Esc" data-test="drawer-close" @click="close" />
-        </header>
-        <div class="wp-drawer__body">
-          <slot />
-        </div>
-        <footer v-if="slots.footer" class="wp-drawer__foot">
-          <slot name="footer" />
-        </footer>
-      </aside>
-    </Transition>
-  </Teleport>
-</template>
-
-<style>
-.wp-drawer__backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: 9000;
-  background: var(--wp-overlay-bg);
-}
-.wp-drawer {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  z-index: 9001;
-  display: flex;
-  flex-direction: column;
-  background: var(--wp-bg-1);
-  color: var(--wp-text);
-  box-shadow: var(--wp-shadow-xl);
-  outline: none;
-}
-.wp-drawer--right { right: 0; border-left: 1px solid var(--wp-border); }
-.wp-drawer--left { left: 0; border-right: 1px solid var(--wp-border); }
-.wp-drawer__head {
-  display: flex;
-  align-items: center;
-  gap: var(--wp-space-3);
-  min-height: 52px;
-  padding: 0 var(--wp-space-4) 0 var(--wp-space-5);
-  border-bottom: 1px solid var(--wp-border);
-}
-.wp-drawer__title { margin: 0; font-size: var(--wp-text-md); font-weight: 600; }
-.wp-drawer__body { flex: 1; min-height: 0; overflow: auto; padding: var(--wp-space-5); }
-.wp-drawer__foot {
-  display: flex;
-  justify-content: flex-end;
-  gap: var(--wp-space-3);
-  padding: var(--wp-space-4) var(--wp-space-5);
-  border-top: 1px solid var(--wp-border);
-}
-.wp-drawer-right-enter-active, .wp-drawer-right-leave-active,
-.wp-drawer-left-enter-active, .wp-drawer-left-leave-active { transition: transform 180ms ease-out; }
-.wp-drawer-right-enter-from, .wp-drawer-right-leave-to { transform: translateX(100%); }
-.wp-drawer-left-enter-from, .wp-drawer-left-leave-to { transform: translateX(-100%); }
-.wp-drawer-fade-enter-active, .wp-drawer-fade-leave-active { transition: opacity 180ms ease-out; }
-.wp-drawer-fade-enter-from, .wp-drawer-fade-leave-to { opacity: 0; }
-@media (prefers-reduced-motion: reduce) {
-  .wp-drawer-right-enter-active, .wp-drawer-right-leave-active,
-  .wp-drawer-left-enter-active, .wp-drawer-left-leave-active,
-  .wp-drawer-fade-enter-active, .wp-drawer-fade-leave-active { transition: none; }
-}
-</style>
+<script setup lang="ts">
+/**
+ * A panel that slides in from the side of the page: inspectors, history,
+ * settings that sit beside the work instead of over it. Escape closes it,
+ * Tab stays inside it and focus goes back where it was. With `modal` off
+ * there is no backdrop, Tab moves on to the page and the page stays usable.
+ */
+import CloseButton from "./CloseButton.vue";
+import { ref, useId, useSlots } from "vue";
+import { useDialogFocus } from "./useDialogFocus";
+
+interface Props {
+  open: boolean;
+  title?: string | undefined;
+  side?: "right" | "left" | undefined;
+  /** Any CSS width; capped at the viewport. */
+  width?: string | undefined;
+  /** Dim the page and close on a click outside. */
+  modal?: boolean | undefined;
+}
+const props = withDefaults(defineProps<Props>(), { side: "right", width: "420px", modal: true });
+const emit = defineEmits<{ (e: "update:open", v: boolean): void }>();
+
+const slots = useSlots();
+const panel = ref<HTMLElement | null>(null);
+const titleId = `wp-drawer-title-${useId()}`;
+
+function close(): void {
+  emit("update:open", false);
+}
+
+// The backdrop is a click target only; keyboard users close with Escape.
+function bindBackdrop(el: unknown): void {
+  if (el instanceof HTMLElement) el.onmousedown = (ev) => { if (ev.target === el) close(); };
+}
+
+useDialogFocus(panel, () => props.open, {
+  onEscape: close,
+  trap: () => props.modal,
+  // The first control in the body, not the close button.
+  initial: (root, els) => {
+    const body = root.querySelector(".wp-drawer__body");
+    return els.find((el) => body?.contains(el)) ?? root;
+  },
+});
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="wp-drawer-fade">
+      <div v-if="open && modal" :ref="bindBackdrop" class="wp-drawer__backdrop" data-test="drawer-backdrop" />
+    </Transition>
+    <Transition :name="`wp-drawer-${side}`">
+      <aside
+        v-if="open"
+        ref="panel"
+        class="wp-drawer"
+        :class="`wp-drawer--${side}`"
+        :style="{ width: `min(${width}, 100vw)` }"
+        role="dialog"
+        :aria-modal="modal || undefined"
+        :aria-labelledby="title ? titleId : undefined"
+        tabindex="-1"
+      >
+        <header v-if="title || slots.header" class="wp-drawer__head">
+          <h3 v-if="title" :id="titleId" class="wp-drawer__title">{{ title }}</h3>
+          <slot name="header" />
+          <span class="wp-spacer" />
+          <CloseButton kbd="Esc" data-test="drawer-close" @click="close" />
+        </header>
+        <div class="wp-drawer__body">
+          <slot />
+        </div>
+        <footer v-if="slots.footer" class="wp-drawer__foot">
+          <slot name="footer" />
+        </footer>
+      </aside>
+    </Transition>
+  </Teleport>
+</template>
+
+<style>
+.wp-drawer__backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 9000;
+  background: var(--wp-overlay-bg);
+}
+.wp-drawer {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  z-index: 9001;
+  display: flex;
+  flex-direction: column;
+  background: var(--wp-bg-1);
+  color: var(--wp-text);
+  box-shadow: var(--wp-shadow-xl);
+  outline: none;
+}
+.wp-drawer--right { right: 0; border-left: 1px solid var(--wp-border); }
+.wp-drawer--left { left: 0; border-right: 1px solid var(--wp-border); }
+.wp-drawer__head {
+  display: flex;
+  align-items: center;
+  gap: var(--wp-space-3);
+  min-height: 52px;
+  padding: 0 var(--wp-space-4) 0 var(--wp-space-5);
+  border-bottom: 1px solid var(--wp-border);
+}
+.wp-drawer__title { margin: 0; font-size: var(--wp-text-md); font-weight: 600; }
+.wp-drawer__body { flex: 1; min-height: 0; overflow: auto; padding: var(--wp-space-5); }
+.wp-drawer__foot {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--wp-space-3);
+  padding: var(--wp-space-4) var(--wp-space-5);
+  border-top: 1px solid var(--wp-border);
+}
+.wp-drawer-right-enter-active, .wp-drawer-right-leave-active,
+.wp-drawer-left-enter-active, .wp-drawer-left-leave-active { transition: transform 180ms ease-out; }
+.wp-drawer-right-enter-from, .wp-drawer-right-leave-to { transform: translateX(100%); }
+.wp-drawer-left-enter-from, .wp-drawer-left-leave-to { transform: translateX(-100%); }
+.wp-drawer-fade-enter-active, .wp-drawer-fade-leave-active { transition: opacity 180ms ease-out; }
+.wp-drawer-fade-enter-from, .wp-drawer-fade-leave-to { opacity: 0; }
+@media (prefers-reduced-motion: reduce) {
+  .wp-drawer-right-enter-active, .wp-drawer-right-leave-active,
+  .wp-drawer-left-enter-active, .wp-drawer-left-leave-active,
+  .wp-drawer-fade-enter-active, .wp-drawer-fade-leave-active { transition: none; }
+}
+</style>

package/src/DropZone.vue

@@ -1,196 +1,196 @@
-<script setup lang="ts">
-/**
- * Drop zone: where files go, by dragging them in or with Browse. It lights
- * up when a file it takes is dragged over, turns red with the reason when
- * it won't take it, and says what it takes. Works on the canvas and in the
- * manager.
- *
- *   <DropZone accept=".txt,.yaml,.yml,.zip" multiple hint="Wildcard files or a zip" @files="load" />
- *   <DropZone overlay accept="image/*" label="Drop images to attach" @files="attach"><ChatThread /></DropZone>
- *
- * `overlay` wraps content (a chat, a panel) and only shows while a file is
- * dragged over it. Files the zone can't take (wrong type, over `max-size`,
- * more than one without `multiple`) come back on `reject` with a reason,
- * and the rest on `files`. Browse keeps it usable without a mouse.
- */
-import { computed, ref } from "vue";
-import { dragItemMaybeAccepted, fileAccepted, formatBytes } from "./drop-zone";
-import WpButton from "./WpButton.vue";
-
-export interface RejectedFile { file: File; reason: string }
-
-const props = withDefaults(defineProps<{
-  /** Like the file input's accept: "image/*,.txt". Empty takes anything. */
-  accept?: string | undefined;
-  multiple?: boolean | undefined;
-  /** Largest file in bytes. */
-  maxSize?: number | undefined;
-  disabled?: boolean | undefined;
-  /** Wrap the slot and show only while a file is dragged over it. */
-  overlay?: boolean | undefined;
-  /** The main line. */
-  label?: string | undefined;
-  /** The line under it, e.g. what it takes. */
-  hint?: string | undefined;
-  /** Words for the Browse button. */
-  browseLabel?: string | undefined;
-  size?: "sm" | "md" | undefined;
-}>(), {
-  accept: undefined, maxSize: undefined, label: undefined, hint: undefined,
-  browseLabel: "Browse", size: "md",
-});
-
-const emit = defineEmits<{ (e: "files", files: File[]): void; (e: "reject", files: RejectedFile[]): void }>();
-
-const inputEl = ref<HTMLInputElement | null>(null);
-const over = ref<"none" | "ok" | "refuse">("none");
-const refuseWhy = ref("");
-let depth = 0;
-
-const mainLabel = computed(() => props.label ?? (props.multiple ? "Drop files here" : "Drop a file here"));
-
-function hasFiles(ev: DragEvent): boolean {
-  return !!ev.dataTransfer && [...ev.dataTransfer.types].includes("Files");
-}
-
-function judge(ev: DragEvent): void {
-  const items = [...(ev.dataTransfer?.items ?? [])].filter((i) => i.kind === "file");
-  if (!props.multiple && items.length > 1) { over.value = "refuse"; refuseWhy.value = "One file at a time"; return; }
-  if (items.some((i) => !dragItemMaybeAccepted(i.type, props.accept))) {
-    over.value = "refuse";
-    refuseWhy.value = props.hint ? `Only ${props.hint}` : "This kind of file isn't taken here";
-    return;
-  }
-  over.value = "ok";
-}
-
-function onDragEnter(ev: DragEvent): void {
-  if (props.disabled || !hasFiles(ev)) return;
-  ev.preventDefault();
-  depth++;
-  judge(ev);
-}
-
-function onDragOver(ev: DragEvent): void {
-  if (props.disabled || !hasFiles(ev)) return;
-  ev.preventDefault();
-  if (ev.dataTransfer) ev.dataTransfer.dropEffect = over.value === "refuse" ? "none" : "copy";
-}
-
-function onDragLeave(ev: DragEvent): void {
-  if (props.disabled || !hasFiles(ev)) return;
-  depth = Math.max(0, depth - 1);
-  if (!depth) over.value = "none";
-}
-
-function take(list: File[]): void {
-  const ok: File[] = [];
-  const bad: RejectedFile[] = [];
-  for (const f of list) {
-    if (!fileAccepted(f, props.accept)) bad.push({ file: f, reason: "Not a file this takes" });
-    else if (props.maxSize !== undefined && f.size > props.maxSize) bad.push({ file: f, reason: `Over ${formatBytes(props.maxSize)}` });
-    else if (!props.multiple && ok.length) bad.push({ file: f, reason: "One file at a time" });
-    else ok.push(f);
-  }
-  if (ok.length) emit("files", ok);
-  if (bad.length) emit("reject", bad);
-}
-
-function onDrop(ev: DragEvent): void {
-  if (props.disabled || !hasFiles(ev)) return;
-  ev.preventDefault();
-  depth = 0;
-  over.value = "none";
-  take([...(ev.dataTransfer?.files ?? [])]);
-}
-
-function browse(): void {
-  if (!props.disabled) inputEl.value?.click();
-}
-
-function onPicked(ev: Event): void {
-  const el = ev.target as HTMLInputElement;
-  take([...(el.files ?? [])]);
-  el.value = "";
-}
-
-defineExpose({ browse });
-</script>
-
-<!-- A drop target: Browse is the keyboard and screen reader way in. -->
-<!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->
-<template>
-  <div
-    v-if="overlay"
-    class="wp-drop-wrap"
-    :data-over="over === 'none' ? undefined : over"
-    @dragenter="onDragEnter"
-    @dragover="onDragOver"
-    @dragleave="onDragLeave"
-    @drop="onDrop"
-  >
-    <slot />
-    <div v-if="over !== 'none'" class="wp-drop wp-drop--overlay" :data-over="over" :data-size="size" aria-hidden="true">
-      <i class="pi wp-drop__icon" :class="over === 'refuse' ? 'pi-ban' : 'pi-upload'" />
-      <span class="wp-drop__label">{{ over === "refuse" ? refuseWhy : mainLabel }}</span>
-    </div>
-    <input ref="inputEl" class="wp-drop__input" type="file" :accept="accept" :multiple="multiple" tabindex="-1" aria-hidden="true" @change="onPicked">
-  </div>
-  <div
-    v-else
-    class="wp-drop"
-    :data-over="over === 'none' ? undefined : over"
-    :data-size="size"
-    :data-disabled="disabled || undefined"
-    @dragenter="onDragEnter"
-    @dragover="onDragOver"
-    @dragleave="onDragLeave"
-    @drop="onDrop"
-  >
-    <i class="pi wp-drop__icon" :class="over === 'refuse' ? 'pi-ban' : 'pi-upload'" aria-hidden="true" />
-    <span class="wp-drop__text">
-      <span class="wp-drop__label">{{ over === "refuse" ? refuseWhy : mainLabel }}</span>
-      <span v-if="hint && over !== 'refuse'" class="wp-drop__hint">{{ hint }}{{ maxSize ? ` · up to ${formatBytes(maxSize)}` : "" }}</span>
-    </span>
-    <WpButton class="wp-drop__browse" variant="secondary" size="sm" icon="pi-folder-open" :disabled="disabled" @click="browse">{{ browseLabel }}</WpButton>
-    <input ref="inputEl" class="wp-drop__input" type="file" :accept="accept" :multiple="multiple" tabindex="-1" aria-hidden="true" @change="onPicked">
-  </div>
-</template>
-
-<style scoped>
-.wp-drop {
-  --_tone: var(--wp-border-strong);
-  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--wp-space-3);
-  box-sizing: border-box; min-width: 0; padding: var(--wp-space-7) var(--wp-space-5);
-  border: 1.5px dashed var(--_tone); border-radius: var(--wp-radius-md);
-  background: var(--wp-bg-1); color: var(--wp-text-muted); text-align: center;
-  font: 400 var(--wp-text-sm)/1.4 var(--wp-font-sans);
-  transition: border-color var(--wp-motion-hover), background var(--wp-motion-hover);
-}
-.wp-drop[data-size="sm"] {
-  flex-direction: row; justify-content: flex-start; gap: var(--wp-space-4); text-align: left;
-  padding: var(--wp-space-3) var(--wp-space-4); border-radius: var(--wp-radius); font-size: var(--wp-text-xs);
-}
-.wp-drop[data-over="ok"] { --_tone: var(--wp-accent); background: color-mix(in srgb, var(--wp-accent) 8%, var(--wp-bg-1)); color: var(--wp-text); }
-.wp-drop[data-over="refuse"] { --_tone: var(--wp-danger); background: color-mix(in srgb, var(--wp-danger) 8%, var(--wp-bg-1)); color: var(--wp-danger-text); }
-.wp-drop[data-disabled] { opacity: 0.45; }
-.wp-drop__icon { font-size: 20px; color: var(--_tone); }
-.wp-drop[data-over="ok"] .wp-drop__icon { color: var(--wp-accent-text); }
-.wp-drop[data-size="sm"] .wp-drop__icon { font-size: 14px; }
-.wp-drop__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
-.wp-drop[data-size="sm"] .wp-drop__text { flex: 1; }
-.wp-drop__label { color: inherit; font-weight: 500; }
-.wp-drop:not([data-over]) .wp-drop__label { color: var(--wp-text); }
-.wp-drop__hint { color: var(--wp-text-dim); font-size: var(--wp-text-xs); }
-.wp-drop__browse { flex: none; }
-.wp-drop__input { display: none; }
-.wp-drop-wrap { position: relative; min-width: 0; min-height: 0; }
-.wp-drop--overlay {
-  position: absolute; inset: var(--wp-space-2); z-index: 5; pointer-events: none;
-  background: color-mix(in srgb, var(--wp-bg) 82%, transparent); backdrop-filter: blur(2px);
-}
-.wp-drop--overlay[data-over="ok"] { background: color-mix(in srgb, var(--wp-accent) 12%, var(--wp-bg)); }
-@media (prefers-reduced-motion: reduce) {
-  .wp-drop { transition: none; }
-}
-</style>
+<script setup lang="ts">
+/**
+ * Drop zone: where files go, by dragging them in or with Browse. It lights
+ * up when a file it takes is dragged over, turns red with the reason when
+ * it won't take it, and says what it takes. Works on the canvas and in the
+ * manager.
+ *
+ *   <DropZone accept=".txt,.yaml,.yml,.zip" multiple hint="Wildcard files or a zip" @files="load" />
+ *   <DropZone overlay accept="image/*" label="Drop images to attach" @files="attach"><ChatThread /></DropZone>
+ *
+ * `overlay` wraps content (a chat, a panel) and only shows while a file is
+ * dragged over it. Files the zone can't take (wrong type, over `max-size`,
+ * more than one without `multiple`) come back on `reject` with a reason,
+ * and the rest on `files`. Browse keeps it usable without a mouse.
+ */
+import { computed, ref } from "vue";
+import { dragItemMaybeAccepted, fileAccepted, formatBytes } from "./drop-zone";
+import WpButton from "./WpButton.vue";
+
+export interface RejectedFile { file: File; reason: string }
+
+const props = withDefaults(defineProps<{
+  /** Like the file input's accept: "image/*,.txt". Empty takes anything. */
+  accept?: string | undefined;
+  multiple?: boolean | undefined;
+  /** Largest file in bytes. */
+  maxSize?: number | undefined;
+  disabled?: boolean | undefined;
+  /** Wrap the slot and show only while a file is dragged over it. */
+  overlay?: boolean | undefined;
+  /** The main line. */
+  label?: string | undefined;
+  /** The line under it, e.g. what it takes. */
+  hint?: string | undefined;
+  /** Words for the Browse button. */
+  browseLabel?: string | undefined;
+  size?: "sm" | "md" | undefined;
+}>(), {
+  accept: undefined, maxSize: undefined, label: undefined, hint: undefined,
+  browseLabel: "Browse", size: "md",
+});
+
+const emit = defineEmits<{ (e: "files", files: File[]): void; (e: "reject", files: RejectedFile[]): void }>();
+
+const inputEl = ref<HTMLInputElement | null>(null);
+const over = ref<"none" | "ok" | "refuse">("none");
+const refuseWhy = ref("");
+let depth = 0;
+
+const mainLabel = computed(() => props.label ?? (props.multiple ? "Drop files here" : "Drop a file here"));
+
+function hasFiles(ev: DragEvent): boolean {
+  return !!ev.dataTransfer && [...ev.dataTransfer.types].includes("Files");
+}
+
+function judge(ev: DragEvent): void {
+  const items = [...(ev.dataTransfer?.items ?? [])].filter((i) => i.kind === "file");
+  if (!props.multiple && items.length > 1) { over.value = "refuse"; refuseWhy.value = "One file at a time"; return; }
+  if (items.some((i) => !dragItemMaybeAccepted(i.type, props.accept))) {
+    over.value = "refuse";
+    refuseWhy.value = props.hint ? `Only ${props.hint}` : "This kind of file isn't taken here";
+    return;
+  }
+  over.value = "ok";
+}
+
+function onDragEnter(ev: DragEvent): void {
+  if (props.disabled || !hasFiles(ev)) return;
+  ev.preventDefault();
+  depth++;
+  judge(ev);
+}
+
+function onDragOver(ev: DragEvent): void {
+  if (props.disabled || !hasFiles(ev)) return;
+  ev.preventDefault();
+  if (ev.dataTransfer) ev.dataTransfer.dropEffect = over.value === "refuse" ? "none" : "copy";
+}
+
+function onDragLeave(ev: DragEvent): void {
+  if (props.disabled || !hasFiles(ev)) return;
+  depth = Math.max(0, depth - 1);
+  if (!depth) over.value = "none";
+}
+
+function take(list: File[]): void {
+  const ok: File[] = [];
+  const bad: RejectedFile[] = [];
+  for (const f of list) {
+    if (!fileAccepted(f, props.accept)) bad.push({ file: f, reason: "Not a file this takes" });
+    else if (props.maxSize !== undefined && f.size > props.maxSize) bad.push({ file: f, reason: `Over ${formatBytes(props.maxSize)}` });
+    else if (!props.multiple && ok.length) bad.push({ file: f, reason: "One file at a time" });
+    else ok.push(f);
+  }
+  if (ok.length) emit("files", ok);
+  if (bad.length) emit("reject", bad);
+}
+
+function onDrop(ev: DragEvent): void {
+  if (props.disabled || !hasFiles(ev)) return;
+  ev.preventDefault();
+  depth = 0;
+  over.value = "none";
+  take([...(ev.dataTransfer?.files ?? [])]);
+}
+
+function browse(): void {
+  if (!props.disabled) inputEl.value?.click();
+}
+
+function onPicked(ev: Event): void {
+  const el = ev.target as HTMLInputElement;
+  take([...(el.files ?? [])]);
+  el.value = "";
+}
+
+defineExpose({ browse });
+</script>
+
+<!-- A drop target: Browse is the keyboard and screen reader way in. -->
+<!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->
+<template>
+  <div
+    v-if="overlay"
+    class="wp-drop-wrap"
+    :data-over="over === 'none' ? undefined : over"
+    @dragenter="onDragEnter"
+    @dragover="onDragOver"
+    @dragleave="onDragLeave"
+    @drop="onDrop"
+  >
+    <slot />
+    <div v-if="over !== 'none'" class="wp-drop wp-drop--overlay" :data-over="over" :data-size="size" aria-hidden="true">
+      <i class="pi wp-drop__icon" :class="over === 'refuse' ? 'pi-ban' : 'pi-upload'" />
+      <span class="wp-drop__label">{{ over === "refuse" ? refuseWhy : mainLabel }}</span>
+    </div>
+    <input ref="inputEl" class="wp-drop__input" type="file" :accept="accept" :multiple="multiple" tabindex="-1" aria-hidden="true" @change="onPicked">
+  </div>
+  <div
+    v-else
+    class="wp-drop"
+    :data-over="over === 'none' ? undefined : over"
+    :data-size="size"
+    :data-disabled="disabled || undefined"
+    @dragenter="onDragEnter"
+    @dragover="onDragOver"
+    @dragleave="onDragLeave"
+    @drop="onDrop"
+  >
+    <i class="pi wp-drop__icon" :class="over === 'refuse' ? 'pi-ban' : 'pi-upload'" aria-hidden="true" />
+    <span class="wp-drop__text">
+      <span class="wp-drop__label">{{ over === "refuse" ? refuseWhy : mainLabel }}</span>
+      <span v-if="hint && over !== 'refuse'" class="wp-drop__hint">{{ hint }}{{ maxSize ? ` · up to ${formatBytes(maxSize)}` : "" }}</span>
+    </span>
+    <WpButton class="wp-drop__browse" variant="secondary" size="sm" icon="pi-folder-open" :disabled="disabled" @click="browse">{{ browseLabel }}</WpButton>
+    <input ref="inputEl" class="wp-drop__input" type="file" :accept="accept" :multiple="multiple" tabindex="-1" aria-hidden="true" @change="onPicked">
+  </div>
+</template>
+
+<style scoped>
+.wp-drop {
+  --_tone: var(--wp-border-strong);
+  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--wp-space-3);
+  box-sizing: border-box; min-width: 0; padding: var(--wp-space-7) var(--wp-space-5);
+  border: 1.5px dashed var(--_tone); border-radius: var(--wp-radius-md);
+  background: var(--wp-bg-1); color: var(--wp-text-muted); text-align: center;
+  font: 400 var(--wp-text-sm)/1.4 var(--wp-font-sans);
+  transition: border-color var(--wp-motion-hover), background var(--wp-motion-hover);
+}
+.wp-drop[data-size="sm"] {
+  flex-direction: row; justify-content: flex-start; gap: var(--wp-space-4); text-align: left;
+  padding: var(--wp-space-3) var(--wp-space-4); border-radius: var(--wp-radius); font-size: var(--wp-text-xs);
+}
+.wp-drop[data-over="ok"] { --_tone: var(--wp-accent); background: color-mix(in srgb, var(--wp-accent) 8%, var(--wp-bg-1)); color: var(--wp-text); }
+.wp-drop[data-over="refuse"] { --_tone: var(--wp-danger); background: color-mix(in srgb, var(--wp-danger) 8%, var(--wp-bg-1)); color: var(--wp-danger-text); }
+.wp-drop[data-disabled] { opacity: 0.45; }
+.wp-drop__icon { font-size: 20px; color: var(--_tone); }
+.wp-drop[data-over="ok"] .wp-drop__icon { color: var(--wp-accent-text); }
+.wp-drop[data-size="sm"] .wp-drop__icon { font-size: 14px; }
+.wp-drop__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.wp-drop[data-size="sm"] .wp-drop__text { flex: 1; }
+.wp-drop__label { color: inherit; font-weight: 500; }
+.wp-drop:not([data-over]) .wp-drop__label { color: var(--wp-text); }
+.wp-drop__hint { color: var(--wp-text-dim); font-size: var(--wp-text-xs); }
+.wp-drop__browse { flex: none; }
+.wp-drop__input { display: none; }
+.wp-drop-wrap { position: relative; min-width: 0; min-height: 0; }
+.wp-drop--overlay {
+  position: absolute; inset: var(--wp-space-2); z-index: 5; pointer-events: none;
+  background: color-mix(in srgb, var(--wp-bg) 82%, transparent); backdrop-filter: blur(2px);
+}
+.wp-drop--overlay[data-over="ok"] { background: color-mix(in srgb, var(--wp-accent) 12%, var(--wp-bg)); }
+@media (prefers-reduced-motion: reduce) {
+  .wp-drop { transition: none; }
+}
+</style>