@valu/block-components 0.2.0 → 0.3.0

package/dist/components/document-picker/index.js

@@ -0,0 +1,2112 @@
+import { forwardRef, useId, useState, useCallback, useRef, useMemo, useEffect } from 'react';
+import { QueryClientProvider, QueryClient, useInfiniteQuery, keepPreviousData } from '@tanstack/react-query';
+import { VisuallyHidden, Icon, Button, Popover, Spinner } from '@wordpress/components';
+import { __, sprintf, _n } from '@wordpress/i18n';
+import { search, closeSmall, upload, dragHandle, caution, chevronUp, chevronDown } from '@wordpress/icons';
+import styled from '@emotion/styled';
+import { css, CacheProvider } from '@emotion/react';
+import { v4 } from 'uuid';
+import { decodeEntities } from '@wordpress/html-entities';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { MediaUpload as MediaUpload$1 } from '@wordpress/media-utils';
+import apiFetch from '@wordpress/api-fetch';
+import { addQueryArgs } from '@wordpress/url';
+import { speak } from '@wordpress/a11y';
+import createCache from '@emotion/cache';
+import { useSensors, useSensor, MouseSensor, TouchSensor, KeyboardSensor, DndContext, closestCenter, DragOverlay, defaultDropAnimation } from '@dnd-kit/core';
+import { sortableKeyboardCoordinates, arrayMove, SortableContext, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { useSelect } from '@wordpress/data';
+import { store } from '@wordpress/core-data';
+
+// components/document-picker/DocumentPicker.tsx
+
+// components/content-picker/styles/tokens.ts
+var tokens = {
+  accent: "var(--wp-admin-theme-color, #3858e9)",
+  accentHover: "color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 4%, transparent)",
+  accentActive: "color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 8%, transparent)",
+  bg: "var(--wp-components-color-background, #ffffff)",
+  fg: "var(--wp-components-color-foreground, #1e1e1e)",
+  gray100: "var(--wp-components-color-gray-100, #f0f0f0)",
+  gray200: "var(--wp-components-color-gray-200, #ebebeb)",
+  gray300: "var(--wp-components-color-gray-300, #dcdcde)",
+  gray600: "var(--wp-components-color-gray-600, #757575)",
+  gray900: "var(--wp-components-color-gray-900, #1e1e1e)",
+  danger: "#cc1818",
+  dangerSoft: "#fef7f7",
+  dangerLine: "#f0b7b7",
+  radiusSm: "2px",
+  radiusMd: "4px",
+  rowMinHeight: "40px",
+  suggestionMinHeight: "44px",
+  thumbSm: "24px",
+  thumbMd: "32px",
+  thumbLg: "40px",
+  shadowPopover: "0 6px 24px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06)",
+  spaceXs: "4px",
+  spaceSm: "8px",
+  spaceMd: "12px",
+  spaceLg: "16px",
+  transitionFast: "120ms ease-out",
+  fontSizeBody: "13px",
+  fontSizeSmall: "11px",
+  fontWeightMedium: 500,
+  fontWeightBold: 600
+};
+var focusRing = css`
+	outline: 2px solid ${tokens.accent};
+	outline-offset: 1px;
+`;
+css`
+	position: absolute !important;
+	clip: rect(1px, 1px, 1px, 1px);
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+	white-space: nowrap;
+`;
+styled.div`
+	color: ${tokens.fg};
+	font-size: ${tokens.fontSizeBody};
+
+	* {
+		box-sizing: border-box;
+	}
+`;
+styled.label`
+	display: block;
+	margin-bottom: ${tokens.spaceXs};
+	font-weight: ${tokens.fontWeightMedium};
+	font-size: ${tokens.fontSizeSmall};
+	text-transform: uppercase;
+	letter-spacing: 0.02em;
+	color: ${tokens.gray900};
+`;
+styled.p`
+	margin: ${tokens.spaceXs} 0 0;
+	color: ${tokens.gray600};
+	font-size: ${tokens.fontSizeSmall};
+`;
+var InputShell = styled.div`
+	position: relative;
+	display: flex;
+	align-items: center;
+	gap: ${tokens.spaceSm};
+	background: ${tokens.bg};
+	border: 1px solid ${tokens.gray300};
+	border-radius: ${tokens.radiusMd};
+	padding: 6px ${tokens.spaceMd};
+	min-height: 40px;
+	transition: border-color ${tokens.transitionFast}, box-shadow ${tokens.transitionFast};
+
+	&:focus-within {
+		border-color: ${tokens.accent};
+		box-shadow: 0 0 0 1px ${tokens.accent};
+	}
+`;
+var Input = styled.input`
+	flex: 1;
+	background: transparent;
+	font: inherit;
+	color: ${tokens.fg};
+	min-width: 0;
+
+	/*
+	 * WP admin's global input styles (\`input[type="text"]\` in various
+	 * editor/sidebar stylesheets) set their own border + box-shadow at a
+	 * higher specificity than our Emotion class. \`!important\` is the
+	 * pragmatic reset here — we provide the focus chrome on the enclosing
+	 * \`InputShell\`, so every input-level border/outline/box-shadow
+	 * contribution is noise.
+	 */
+	&,
+	&:focus,
+	&:focus-visible,
+	&:hover {
+		border: 0 !important;
+		outline: 0 !important;
+		box-shadow: none !important;
+	}
+
+	&::placeholder {
+		color: ${tokens.gray600};
+	}
+`;
+var SuggestionsShell = styled.div`
+	background: ${tokens.bg};
+	border: 1px solid ${tokens.gray300};
+	border-radius: ${tokens.radiusMd};
+	overflow: hidden;
+	max-height: 380px;
+	display: flex;
+	flex-direction: column;
+
+	${({ inline }) => inline ? css`
+					margin-top: ${tokens.spaceSm};
+				` : css`
+					box-shadow: ${tokens.shadowPopover};
+				`}
+`;
+var ListboxScroll = styled.div`
+	overflow-y: auto;
+	flex: 1;
+	min-height: 0;
+`;
+var StickyHeader = styled.div`
+	position: sticky;
+	top: 0;
+	z-index: 2;
+	background: ${tokens.bg};
+`;
+var Listbox = styled.ul`
+	list-style: none;
+	margin: 0;
+	padding: ${tokens.spaceXs} 0;
+`;
+styled.div`
+	padding: 4px ${tokens.spaceMd};
+	font-size: 10px !important;
+	font-weight: ${tokens.fontWeightBold};
+	letter-spacing: 0.08em;
+	text-transform: uppercase !important;
+	color: ${tokens.gray600};
+	background: ${tokens.gray100};
+	line-height: 1.8;
+
+	[role='group']:not(:first-child) > & {
+		border-top: 1px solid ${tokens.gray200};
+	}
+`;
+var PrimaryText = styled.span`
+	font-size: ${tokens.fontSizeBody};
+	font-weight: ${tokens.fontWeightMedium};
+	color: ${({ muted }) => muted ? tokens.gray600 : tokens.gray900};
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: block;
+	line-height: 1.3;
+	transition: color ${tokens.transitionFast};
+`;
+styled.li`
+	display: flex;
+	align-items: center;
+	gap: ${tokens.spaceSm};
+	padding: 4px ${tokens.spaceMd};
+	cursor: ${({ disabled }) => disabled ? "not-allowed" : "pointer"};
+	opacity: ${({ disabled }) => disabled ? 0.5 : 1};
+	min-height: ${tokens.suggestionMinHeight};
+	background: ${({ highlighted }) => highlighted ? tokens.accentActive : "transparent"};
+	position: relative;
+	transition: background ${tokens.transitionFast};
+
+	&:hover {
+		background: ${({ highlighted, disabled }) => disabled ? "transparent" : highlighted ? tokens.accentActive : tokens.accentHover};
+	}
+
+	/*
+	 * Target the title via a stable data attribute rather than Emotion's
+	 * generated class — the popover body has its own Emotion cache, so
+	 * class-name interpolation isn't guaranteed to match across caches.
+	 */
+	&:hover [data-valu-title] {
+		color: ${tokens.accent};
+	}
+
+	${({ highlighted }) => highlighted && css`
+			[data-valu-title] {
+				color: ${tokens.accent};
+			}
+			&::before {
+				content: '';
+				position: absolute;
+				left: 0;
+				top: 4px;
+				bottom: 4px;
+				width: 2px;
+				border-radius: 0 ${tokens.radiusSm} ${tokens.radiusSm} 0;
+				background: ${tokens.accent};
+			}
+		`}
+`;
+styled.div`
+	flex: 0 0 auto;
+	width: ${({ size, hasImage, avatar }) => avatar ? "22px" : hasImage ? tokens.thumbMd : size === "md" ? tokens.thumbMd : size === "lg" ? tokens.thumbLg : size === "sm" ? tokens.thumbSm : "22px"};
+	height: ${({ size, hasImage, avatar }) => avatar ? "22px" : hasImage ? tokens.thumbMd : size === "md" ? tokens.thumbMd : size === "lg" ? tokens.thumbLg : size === "sm" ? tokens.thumbSm : "22px"};
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: ${({ missing }) => missing ? tokens.danger : tokens.gray600};
+
+	${({ hasImage, avatar }) => avatar ? css`
+					border-radius: 999px;
+					overflow: hidden;
+				` : hasImage ? css`
+						border: 1px solid ${tokens.gray200};
+						border-radius: ${tokens.radiusSm};
+						overflow: hidden;
+						background: ${tokens.gray100};
+					` : void 0}
+
+	img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		display: block;
+	}
+
+	svg {
+		width: 22px;
+		height: 22px;
+	}
+`;
+styled.div`
+	flex: 1;
+	min-width: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 0;
+`;
+styled.span`
+	font-size: ${tokens.fontSizeSmall};
+	color: ${tokens.gray600};
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: block;
+	line-height: 1.3;
+`;
+styled.div`
+	display: flex;
+	align-items: center;
+	gap: ${tokens.spaceXs};
+	flex-wrap: wrap;
+	margin-top: 0;
+`;
+styled.span`
+	flex: 0 0 auto;
+	font-size: ${tokens.fontSizeSmall};
+	color: ${tokens.gray600};
+	margin-left: ${tokens.spaceSm};
+	white-space: nowrap;
+`;
+var ActionColumn = styled.div`
+	flex: 0 0 auto;
+	display: flex;
+	align-items: center;
+	gap: ${tokens.spaceXs};
+	margin-left: auto;
+`;
+var SelectedListEl = styled.ul`
+	list-style: none;
+	margin: ${tokens.spaceSm} 0 0;
+	padding: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+`;
+styled.li`
+	display: flex;
+	align-items: center;
+	gap: ${tokens.spaceSm};
+	padding: 2px ${tokens.spaceSm};
+	background: ${({ missing }) => missing ? tokens.dangerSoft : tokens.bg};
+	border: 1px solid ${({ missing }) => missing ? tokens.dangerLine : tokens.gray300};
+	border-radius: ${tokens.radiusMd};
+	min-height: ${tokens.rowMinHeight};
+	box-shadow: ${({ dragging }) => dragging ? tokens.shadowPopover : "none"};
+	transition: box-shadow ${tokens.transitionFast}, border-color ${tokens.transitionFast};
+
+	&:hover {
+		border-color: ${({ missing }) => missing ? tokens.dangerLine : tokens.gray600};
+	}
+`;
+var DragHandleButton = styled.button`
+	flex: 0 0 auto;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 20px;
+	height: 20px;
+	border: 0;
+	background: transparent;
+	color: ${tokens.gray600};
+	cursor: grab;
+	border-radius: ${tokens.radiusSm};
+	padding: 0;
+
+	&:hover {
+		background: ${tokens.gray100};
+		color: ${tokens.gray900};
+	}
+
+	&:focus-visible {
+		${focusRing}
+	}
+
+	&:active {
+		cursor: grabbing;
+	}
+
+	&[disabled] {
+		cursor: not-allowed;
+		opacity: 0.4;
+	}
+
+	svg {
+		width: 14px;
+		height: 14px;
+	}
+`;
+var EmptyState = styled.div`
+	padding: ${tokens.spaceLg} ${tokens.spaceMd};
+	text-align: center;
+	color: ${tokens.gray600};
+	font-size: ${tokens.fontSizeBody};
+`;
+var LoadingState = styled.div`
+	padding: ${tokens.spaceLg} ${tokens.spaceMd};
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: ${tokens.spaceSm};
+	color: ${tokens.gray600};
+	font-size: ${tokens.fontSizeBody};
+`;
+var ErrorState = styled.div`
+	padding: ${tokens.spaceMd};
+	background: ${tokens.dangerSoft};
+	color: ${tokens.danger};
+	border: 1px solid ${tokens.dangerLine};
+	border-radius: ${tokens.radiusMd};
+	font-size: ${tokens.fontSizeBody};
+`;
+var MaxedOutBanner = styled.div`
+	display: flex;
+	align-items: center;
+	gap: ${tokens.spaceSm};
+	padding: ${tokens.spaceSm} ${tokens.spaceMd};
+	background: ${tokens.gray100};
+	color: ${tokens.gray900};
+	border: 1px dashed ${tokens.gray300};
+	border-radius: ${tokens.radiusMd};
+	font-size: ${tokens.fontSizeSmall};
+`;
+var CountPill = styled.span`
+	display: inline-flex;
+	align-items: center;
+	padding: 2px 8px;
+	background: ${tokens.gray100};
+	color: ${tokens.gray900};
+	border-radius: 999px;
+	font-size: 10px;
+	font-weight: ${tokens.fontWeightBold};
+	letter-spacing: 0.04em;
+`;
+var ChipWrap = styled.div`
+	display: inline-flex;
+	align-items: center;
+	gap: ${tokens.spaceSm};
+	background: ${tokens.gray900};
+	color: #fff;
+	border-radius: ${tokens.radiusMd};
+	padding: 6px ${tokens.spaceMd};
+	max-width: 280px;
+	box-shadow: ${tokens.shadowPopover};
+`;
+var ChipTitle = styled.span`
+	font-size: ${tokens.fontSizeSmall};
+	font-weight: ${tokens.fontWeightMedium};
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+`;
+var LoadMoreRow = styled.li`
+	list-style: none;
+	display: flex;
+	justify-content: center;
+	padding: ${tokens.spaceSm};
+`;
+var SearchIconWrap = styled.span`
+	flex: 0 0 auto;
+	display: flex;
+	align-items: center;
+	color: ${tokens.gray600};
+`;
+var HeaderRow = styled.div`
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: ${tokens.spaceSm};
+	margin-top: ${tokens.spaceSm};
+	margin-bottom: ${tokens.spaceXs};
+`;
+var HeaderTitle = styled.h3`
+	margin: 0;
+	font-size: 10px !important;
+	text-transform: uppercase !important;
+	letter-spacing: 0.04em;
+	font-weight: ${tokens.fontWeightBold};
+	color: ${tokens.gray600};
+	line-height: 1.8;
+`;
+
+// components/document-picker/styles/index.ts
+var SelectedRow2 = styled.li`
+	container-type: inline-size;
+	container-name: valu-dp-row;
+	display: flex;
+	align-items: center;
+	gap: ${tokens.spaceSm};
+	padding: 2px ${tokens.spaceSm};
+	background: ${({ missing }) => missing ? tokens.dangerSoft : tokens.bg};
+	border: 1px solid ${({ missing }) => missing ? tokens.dangerLine : tokens.gray300};
+	border-radius: ${tokens.radiusMd};
+	min-height: ${tokens.rowMinHeight};
+	box-shadow: ${({ dragging }) => dragging ? tokens.shadowPopover : "none"};
+	transition: box-shadow ${tokens.transitionFast}, border-color ${tokens.transitionFast};
+
+	&:hover {
+		border-color: ${({ missing }) => missing ? tokens.dangerLine : tokens.gray600};
+	}
+`;
+var WIDE_ROW = "380px";
+var Option2 = styled.li`
+	container-type: inline-size;
+	container-name: valu-dp-row;
+	display: flex;
+	align-items: center;
+	gap: ${tokens.spaceSm};
+	padding: 4px ${tokens.spaceMd};
+	cursor: ${({ disabled }) => disabled ? "not-allowed" : "pointer"};
+	opacity: ${({ disabled }) => disabled ? 0.5 : 1};
+	min-height: ${tokens.suggestionMinHeight};
+	background: ${({ highlighted }) => highlighted ? tokens.accentActive : "transparent"};
+	position: relative;
+	transition: background ${tokens.transitionFast};
+
+	&:hover {
+		background: ${({ highlighted, disabled }) => disabled ? "transparent" : highlighted ? tokens.accentActive : tokens.accentHover};
+	}
+
+	&:hover [data-valu-title] {
+		color: ${tokens.accent};
+	}
+
+	${({ highlighted }) => highlighted && css`
+			[data-valu-title] {
+				color: ${tokens.accent};
+			}
+			&::before {
+				content: '';
+				position: absolute;
+				left: 0;
+				top: 4px;
+				bottom: 4px;
+				width: 2px;
+				border-radius: 0 ${tokens.radiusSm} ${tokens.radiusSm} 0;
+				background: ${tokens.accent};
+			}
+		`}
+`;
+var DocRowBody = styled.div`
+	flex: 1;
+	min-width: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 0;
+
+	@container valu-dp-row (min-width: ${WIDE_ROW}) {
+		flex-direction: row;
+		align-items: baseline;
+		gap: ${tokens.spaceMd};
+	}
+`;
+var FilenameText = styled.span`
+	font-size: ${tokens.fontSizeSmall};
+	color: ${tokens.gray600};
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: block;
+	line-height: 1.3;
+	min-width: 0;
+
+	@container valu-dp-row (min-width: ${WIDE_ROW}) {
+		flex: 1;
+	}
+`;
+var DocMetaInline = styled.div`
+	display: none;
+
+	@container valu-dp-row (min-width: ${WIDE_ROW}) {
+		display: inline-flex;
+		align-items: center;
+		gap: ${tokens.spaceSm};
+		flex: 0 0 auto;
+		color: ${tokens.gray600};
+		font-size: ${tokens.fontSizeSmall};
+		white-space: nowrap;
+	}
+`;
+var Root2 = styled.div`
+	color: ${tokens.fg};
+	font-size: ${tokens.fontSizeBody};
+
+	* {
+		box-sizing: border-box;
+	}
+`;
+var ActionsRow = styled.div`
+	display: flex;
+	align-items: center;
+	gap: ${tokens.spaceSm};
+	margin-top: ${tokens.spaceSm};
+`;
+var FileMeta = styled.span`
+	font-size: ${tokens.fontSizeSmall};
+	color: ${tokens.gray600};
+	white-space: nowrap;
+	display: inline-flex;
+	align-items: center;
+	gap: ${tokens.spaceXs};
+
+	&::before {
+		content: '·';
+		opacity: 0.6;
+	}
+
+	&:first-of-type::before {
+		content: '';
+	}
+`;
+styled.div`
+	display: flex;
+	align-items: center;
+	gap: ${tokens.spaceSm};
+	flex-wrap: wrap;
+	min-width: 0;
+	color: ${tokens.gray600};
+`;
+var ExtensionPill = styled.span`
+	flex: 0 0 auto;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	min-width: 38px;
+	padding: 2px 6px;
+	font-size: 10px;
+	font-weight: ${tokens.fontWeightBold};
+	letter-spacing: 0.04em;
+	text-transform: uppercase;
+	border-radius: ${tokens.radiusSm};
+	border: 1px solid currentColor;
+	line-height: 1.4;
+	white-space: nowrap;
+
+	${({ tone = "gray" }) => {
+  switch (tone) {
+    case "red":
+      return css`
+					color: #c0392b;
+					background: #fdecea;
+				`;
+    case "blue":
+      return css`
+					color: #1a4fb8;
+					background: #e8efff;
+				`;
+    case "green":
+      return css`
+					color: #1f6b3a;
+					background: #e6f4ea;
+				`;
+    case "orange":
+      return css`
+					color: #b15a06;
+					background: #fff1de;
+				`;
+    default:
+      return css`
+					color: ${tokens.gray900};
+					background: ${tokens.gray100};
+				`;
+  }
+}}
+`;
+var generateKey = () => v4();
+var aria = (rootId, suffix) => `${rootId}-${suffix}`;
+var isMaxedOut = (value, maxItems) => Number.isFinite(maxItems) && value.length >= maxItems;
+var DEFAULT_DOCUMENT_MIME_TYPES = [
+  "application/pdf",
+  "application/msword",
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  "application/vnd.ms-excel",
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  "application/vnd.ms-powerpoint",
+  "application/vnd.openxmlformats-officedocument.presentationml.presentation"
+];
+var decodeRendered = (raw) => {
+  if (typeof raw === "string") return decodeEntities(raw);
+  if (raw && typeof raw === "object" && "rendered" in raw) {
+    const rendered = raw.rendered;
+    if (typeof rendered === "string") return decodeEntities(rendered);
+  }
+  return "";
+};
+var basenameFromUrl = (url) => {
+  if (!url) return "";
+  const cleaned = url.split("#")[0].split("?")[0];
+  const segments = cleaned.split("/");
+  return segments[segments.length - 1] ?? "";
+};
+var extensionFromUrl = (url) => {
+  const base = basenameFromUrl(url);
+  const dot = base.lastIndexOf(".");
+  if (dot <= 0 || dot === base.length - 1) return "";
+  return base.slice(dot + 1).toUpperCase();
+};
+var formatFileSize = (bytes) => {
+  if (!bytes || bytes <= 0 || !Number.isFinite(bytes)) return "";
+  const units = ["B", "KB", "MB", "GB", "TB"];
+  let value = bytes;
+  let unit = 0;
+  while (value >= 1024 && unit < units.length - 1) {
+    value /= 1024;
+    unit += 1;
+  }
+  const fixed = value >= 100 || unit === 0 ? value.toFixed(0) : value.toFixed(1);
+  return `${fixed} ${units[unit]}`;
+};
+var formatModified = (iso) => {
+  if (!iso) return "";
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) return "";
+  try {
+    return new Intl.DateTimeFormat(void 0, { dateStyle: "medium" }).format(date);
+  } catch {
+    return date.toISOString().slice(0, 10);
+  }
+};
+var mapMediaToDocumentItem = (raw) => {
+  const url = raw.source_url ?? raw.url ?? raw.link ?? "";
+  const filename = raw.filename || basenameFromUrl(url);
+  const title = decodeRendered(raw.title) || filename;
+  const mimeType = raw.mime_type ?? raw.mime ?? "";
+  const extension = extensionFromUrl(url) || extensionFromUrl(filename);
+  const fileSize = raw.media_details?.filesize;
+  const modified = raw.modified ?? raw.modified_gmt ?? raw.date;
+  return {
+    key: generateKey(),
+    id: raw.id,
+    title,
+    filename,
+    url,
+    mimeType,
+    extension,
+    fileSize,
+    modified,
+    raw
+  };
+};
+var dedupeAgainst = (items, value, enabled) => {
+  if (!enabled || value.length === 0) return items;
+  const ids = new Set(value.map((v) => v.id));
+  return items.filter((i) => !ids.has(i.id));
+};
+var matchesAllowed = (item, allowedMimeTypes, allowedExtensions) => {
+  const hasMime = allowedMimeTypes && allowedMimeTypes.length > 0;
+  const hasExt = allowedExtensions && allowedExtensions.length > 0;
+  if (!hasMime && !hasExt) return true;
+  if (hasMime && allowedMimeTypes.includes(item.mimeType)) return true;
+  if (hasExt) {
+    const upper = item.extension.toUpperCase();
+    if (allowedExtensions.some((e) => e.replace(/^\./, "").toUpperCase() === upper)) {
+      return true;
+    }
+  }
+  return false;
+};
+var extensionA11yLabel = (extension) => extension ? __("File type", "valu-block-components") + ": " + extension : __("Unknown file type", "valu-block-components");
+var SearchCombobox = forwardRef(
+  ({
+    rootId,
+    value,
+    onChange,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    placeholder,
+    label,
+    hideLabelFromVision,
+    help,
+    disabled,
+    open,
+    listboxId,
+    activeOptionId,
+    labels
+  }, ref) => {
+    const inputId = aria(rootId, "input");
+    const helpId = help ? aria(rootId, "help") : void 0;
+    return /* @__PURE__ */ jsxs("div", { children: [
+      hideLabelFromVision ? /* @__PURE__ */ jsx(VisuallyHidden, { as: "label", htmlFor: inputId, children: label }) : /* @__PURE__ */ jsx("label", { htmlFor: inputId, style: { display: "block", marginBottom: 4 }, children: label }),
+      /* @__PURE__ */ jsxs(InputShell, { "aria-disabled": disabled || void 0, children: [
+        /* @__PURE__ */ jsx(SearchIconWrap, { "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, { icon: search, size: 20 }) }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            ref,
+            id: inputId,
+            type: "text",
+            role: "combobox",
+            "aria-expanded": open,
+            "aria-controls": listboxId,
+            "aria-autocomplete": "list",
+            "aria-activedescendant": activeOptionId,
+            "aria-describedby": helpId,
+            "aria-label": hideLabelFromVision ? label : void 0,
+            value,
+            placeholder: placeholder ?? labels.input ?? __("Search documents", "valu-block-components"),
+            disabled,
+            autoComplete: "off",
+            spellCheck: false,
+            onChange: (event) => onChange(event.target.value),
+            onFocus,
+            onBlur,
+            onKeyDown
+          }
+        ),
+        value.length > 0 && !disabled ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => onChange(""),
+            "aria-label": __("Clear search", "valu-block-components"),
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              background: "transparent",
+              border: 0,
+              padding: 2,
+              cursor: "pointer",
+              borderRadius: 2,
+              color: "currentColor",
+              opacity: 0.6
+            },
+            children: /* @__PURE__ */ jsx(Icon, { icon: closeSmall, size: 18 })
+          }
+        ) : null
+      ] }),
+      help ? /* @__PURE__ */ jsx("p", { id: helpId, style: { margin: "4px 0 0", fontSize: 11, opacity: 0.7 }, children: help }) : null
+    ] });
+  }
+);
+SearchCombobox.displayName = "SearchCombobox";
+var toneFor = (extension) => {
+  const ext = extension.toUpperCase();
+  if (ext === "PDF") return "red";
+  if (ext === "DOC" || ext === "DOCX" || ext === "RTF" || ext === "ODT") return "blue";
+  if (ext === "XLS" || ext === "XLSX" || ext === "CSV" || ext === "ODS") return "green";
+  if (ext === "PPT" || ext === "PPTX" || ext === "ODP") return "orange";
+  return "gray";
+};
+var ExtensionBadge = ({ extension, label }) => {
+  const visible = label ?? (extension || "?");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ExtensionPill, { tone: toneFor(extension), "aria-hidden": "true", children: visible }),
+    /* @__PURE__ */ jsx(VisuallyHidden, { children: extensionA11yLabel(extension) })
+  ] });
+};
+var SuggestionItem = ({
+  item,
+  optionId,
+  highlighted,
+  selected,
+  showExtensionBadge,
+  showFileSize,
+  showModifiedDate,
+  onHover,
+  onSelect,
+  render
+}) => {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (!highlighted || !ref.current) return;
+    ref.current.scrollIntoView({ block: "nearest" });
+  }, [highlighted]);
+  const handleClick = useCallback(
+    (event) => {
+      event.preventDefault();
+      onSelect();
+    },
+    [onSelect]
+  );
+  const handleMouseDown = useCallback((event) => {
+    event.preventDefault();
+  }, []);
+  if (render) {
+    return /* @__PURE__ */ jsx(
+      Option2,
+      {
+        ref,
+        role: "option",
+        id: optionId,
+        "aria-selected": selected,
+        highlighted,
+        onMouseEnter: onHover,
+        onMouseDown: handleMouseDown,
+        onClick: handleClick,
+        children: render(item, { highlighted, selected })
+      }
+    );
+  }
+  const modified = showModifiedDate ? formatModified(item.modified) : "";
+  const hasMeta = Boolean(showFileSize && item.fileSize || modified);
+  return /* @__PURE__ */ jsxs(
+    Option2,
+    {
+      ref,
+      role: "option",
+      id: optionId,
+      "aria-selected": selected,
+      highlighted,
+      onMouseEnter: onHover,
+      onMouseDown: handleMouseDown,
+      onClick: handleClick,
+      children: [
+        showExtensionBadge ? /* @__PURE__ */ jsx(ExtensionBadge, { extension: item.extension }) : null,
+        /* @__PURE__ */ jsxs(DocRowBody, { children: [
+          /* @__PURE__ */ jsx(PrimaryText, { "data-valu-title": true, title: item.title, children: item.title }),
+          /* @__PURE__ */ jsx(FilenameText, { title: item.filename, children: item.filename })
+        ] }),
+        hasMeta ? /* @__PURE__ */ jsxs(DocMetaInline, { children: [
+          showFileSize && item.fileSize ? /* @__PURE__ */ jsx("span", { children: formatFileSize(item.fileSize) }) : null,
+          modified ? /* @__PURE__ */ jsx("span", { children: modified }) : null
+        ] }) : null
+      ]
+    }
+  );
+};
+var SuggestionList = ({
+  listboxId,
+  rootId,
+  suggestions,
+  loading,
+  fetchingMore,
+  hasMore,
+  error,
+  query,
+  highlightedIndex,
+  selectedKeys,
+  labels,
+  showExtensionBadge,
+  showFileSize,
+  showModifiedDate,
+  headerSlot,
+  renderSuggestion,
+  onHover,
+  onSelect,
+  onLoadMore
+}) => {
+  const scrollRef = useRef(null);
+  const sentinelRef = useRef(null);
+  useEffect(() => {
+    if (!hasMore || !sentinelRef.current || !scrollRef.current) return;
+    const io = new IntersectionObserver(
+      (entries) => {
+        for (const e of entries) {
+          if (e.isIntersecting) onLoadMore();
+        }
+      },
+      { root: scrollRef.current, rootMargin: "120px" }
+    );
+    io.observe(sentinelRef.current);
+    return () => io.disconnect();
+  }, [hasMore, onLoadMore]);
+  const header = headerSlot ? /* @__PURE__ */ jsx(StickyHeader, { children: headerSlot }) : null;
+  if (error) {
+    return /* @__PURE__ */ jsxs(ListboxScroll, { ref: scrollRef, children: [
+      header,
+      /* @__PURE__ */ jsx(ErrorState, { role: "alert", children: labels.empty ?? __("Search failed. Please try again.", "valu-block-components") })
+    ] });
+  }
+  if (loading && suggestions.length === 0) {
+    return /* @__PURE__ */ jsxs(ListboxScroll, { ref: scrollRef, children: [
+      header,
+      /* @__PURE__ */ jsxs(LoadingState, { children: [
+        /* @__PURE__ */ jsx(Spinner, {}),
+        labels.loading ?? __("Searching\u2026", "valu-block-components")
+      ] })
+    ] });
+  }
+  if (suggestions.length === 0) {
+    const emptyMessage = query.trim().length > 0 ? labels.noDocumentsFound ?? __("No documents match this search.", "valu-block-components") : __("Type to search documents.", "valu-block-components");
+    return /* @__PURE__ */ jsxs(ListboxScroll, { ref: scrollRef, children: [
+      header,
+      /* @__PURE__ */ jsx(EmptyState, { children: emptyMessage })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(ListboxScroll, { ref: scrollRef, children: [
+    header,
+    /* @__PURE__ */ jsxs(
+      Listbox,
+      {
+        role: "listbox",
+        id: listboxId,
+        "aria-label": labels.input ?? __("Document suggestions", "valu-block-components"),
+        children: [
+          suggestions.map((item, index) => {
+            const optionId = aria(rootId, `option-${index}`);
+            return /* @__PURE__ */ jsx(
+              SuggestionItem,
+              {
+                item,
+                optionId,
+                highlighted: index === highlightedIndex,
+                selected: selectedKeys.has(item.key),
+                showExtensionBadge,
+                showFileSize,
+                showModifiedDate,
+                onHover: () => onHover(index),
+                onSelect: () => onSelect(item),
+                ...renderSuggestion ? { render: renderSuggestion } : {}
+              },
+              item.key
+            );
+          }),
+          hasMore ? /* @__PURE__ */ jsx(LoadMoreRow, { children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "tertiary",
+              onClick: onLoadMore,
+              disabled: fetchingMore,
+              isBusy: fetchingMore,
+              children: fetchingMore ? __("Loading\u2026", "valu-block-components") : __("Load more", "valu-block-components")
+            }
+          ) }) : null,
+          /* @__PURE__ */ jsx("div", { ref: sentinelRef, "aria-hidden": "true" })
+        ]
+      }
+    )
+  ] });
+};
+var MediaUpload = MediaUpload$1;
+var normalize = (raw, allowedMimeTypes, allowedExtensions) => {
+  const list = Array.isArray(raw) ? raw : [raw];
+  return list.map((r) => mapMediaToDocumentItem(r)).filter((item) => matchesAllowed(item, allowedMimeTypes, allowedExtensions));
+};
+var MediaLibraryButton = ({
+  allowedMimeTypes,
+  allowedExtensions,
+  multiple,
+  value,
+  onSelect,
+  labels,
+  disabled,
+  variant = "secondary",
+  label
+}) => {
+  const selectedIds = multiple ? value.map((v) => v.id) : value[0]?.id;
+  const buttonLabel = label ?? labels.browseMediaLibrary ?? __("Browse Media Library", "valu-block-components");
+  return /* @__PURE__ */ jsx(
+    MediaUpload,
+    {
+      allowedTypes: allowedMimeTypes,
+      multiple,
+      gallery: false,
+      ...selectedIds !== void 0 ? { value: selectedIds } : {},
+      onSelect: (selection) => {
+        const items = normalize(selection, allowedMimeTypes, allowedExtensions);
+        if (items.length > 0) onSelect(items);
+      },
+      render: ({ open }) => /* @__PURE__ */ jsx(Button, { variant, icon: upload, onClick: open, disabled, children: buttonLabel })
+    }
+  );
+};
+var buildPath = (args) => {
+  const params = {
+    per_page: args.perPage,
+    page: args.page,
+    _fields: [
+      "id",
+      "title",
+      "source_url",
+      "mime_type",
+      "media_details",
+      "modified",
+      "date"
+    ].join(","),
+    order: "desc"
+  };
+  const trimmed = args.query.trim();
+  if (trimmed.length > 0) {
+    params.search = trimmed;
+    params.orderby = "relevance";
+  } else {
+    params.orderby = "date";
+  }
+  if (args.mimeTypes.length > 0) {
+    params.mime_type = args.mimeTypes.join(",");
+  }
+  return addQueryArgs("/wp/v2/media", params);
+};
+var parseHeader = (response, key) => {
+  const raw = response.headers.get(key);
+  if (!raw) return 0;
+  const parsed = parseInt(raw, 10);
+  return Number.isNaN(parsed) ? 0 : parsed;
+};
+var fetchDocuments = async (args) => {
+  const rawPath = buildPath(args);
+  const path = args.request ? args.request(rawPath, { query: args.query, page: args.page }) : rawPath;
+  const response = await apiFetch({
+    path,
+    parse: false,
+    signal: args.signal
+  });
+  const data = await response.json();
+  const totalPages = parseHeader(response, "x-wp-totalpages") || 1;
+  const total = parseHeader(response, "x-wp-total");
+  const items = data.map(mapMediaToDocumentItem).filter((item) => matchesAllowed(item, args.mimeTypes, args.allowedExtensions));
+  return {
+    items,
+    page: args.page,
+    hasMore: args.page < totalPages,
+    total
+  };
+};
+
+// components/document-picker/hooks/useDocumentSearch.ts
+var documentSearchKey = (args) => [
+  "valu/document-search",
+  [...args.mimeTypes].sort().join(","),
+  [...args.allowedExtensions ?? []].sort().join(","),
+  args.query,
+  args.perPage
+];
+var useDocumentSearch = (args) => useInfiniteQuery({
+  queryKey: documentSearchKey(args),
+  queryFn: ({ pageParam, signal }) => fetchDocuments({
+    query: args.query,
+    page: pageParam,
+    perPage: args.perPage,
+    mimeTypes: args.mimeTypes,
+    ...args.allowedExtensions !== void 0 ? { allowedExtensions: args.allowedExtensions } : {},
+    ...args.request !== void 0 ? { request: args.request } : {},
+    signal
+  }),
+  initialPageParam: 1,
+  getNextPageParam: (last) => last.hasMore ? last.page + 1 : void 0,
+  enabled: args.enabled ?? true,
+  staleTime: 3e4,
+  placeholderData: keepPreviousData
+});
+var useDebouncedValue = (value, delay) => {
+  const [debounced, setDebounced] = useState(value);
+  useEffect(() => {
+    const id = setTimeout(() => setDebounced(value), delay);
+    return () => clearTimeout(id);
+  }, [value, delay]);
+  return debounced;
+};
+var useLiveRegion = (debounceMs = 500) => {
+  const timer = useRef(null);
+  useEffect(
+    () => () => {
+      if (timer.current) clearTimeout(timer.current);
+    },
+    []
+  );
+  const announce = useCallback(
+    (message, assertiveness = "polite") => {
+      if (!message) return;
+      if (timer.current) clearTimeout(timer.current);
+      timer.current = setTimeout(() => speak(message, assertiveness), debounceMs);
+    },
+    [debounceMs]
+  );
+  const announceImmediate = useCallback(
+    (message, assertiveness = "polite") => {
+      if (!message) return;
+      if (timer.current) clearTimeout(timer.current);
+      speak(message, assertiveness);
+    },
+    []
+  );
+  return { announce, announceImmediate };
+};
+var useKeyboardNav = ({
+  itemCount,
+  onSelect,
+  onEscape,
+  wrap = true
+}) => {
+  const [highlightedIndex, setHighlightedIndex] = useState(-1);
+  const reset = useCallback(() => setHighlightedIndex(-1), []);
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (itemCount === 0) {
+        if (event.key === "Escape") {
+          event.preventDefault();
+          onEscape?.();
+        }
+        return;
+      }
+      switch (event.key) {
+        case "ArrowDown": {
+          event.preventDefault();
+          setHighlightedIndex((i) => {
+            const next = i + 1;
+            if (next >= itemCount) return wrap ? 0 : itemCount - 1;
+            return next;
+          });
+          break;
+        }
+        case "ArrowUp": {
+          event.preventDefault();
+          setHighlightedIndex((i) => {
+            if (i <= 0) return wrap ? itemCount - 1 : 0;
+            return i - 1;
+          });
+          break;
+        }
+        case "Home": {
+          event.preventDefault();
+          setHighlightedIndex(0);
+          break;
+        }
+        case "End": {
+          event.preventDefault();
+          setHighlightedIndex(itemCount - 1);
+          break;
+        }
+        case "Enter": {
+          if (highlightedIndex >= 0 && highlightedIndex < itemCount) {
+            event.preventDefault();
+            onSelect?.(highlightedIndex);
+          }
+          break;
+        }
+        case "Escape": {
+          event.preventDefault();
+          onEscape?.();
+          break;
+        }
+      }
+    },
+    [itemCount, highlightedIndex, onSelect, onEscape, wrap]
+  );
+  return { highlightedIndex, setHighlightedIndex, reset, handleKeyDown };
+};
+
+// components/document-picker/hooks/useDocumentPickerController.ts
+var useDocumentPickerController = (args) => {
+  const {
+    mimeTypes,
+    allowedExtensions,
+    perPage,
+    inputDelayMs,
+    uniqueItems,
+    maxItems,
+    filter,
+    request,
+    value,
+    onChange,
+    active,
+    fetchEmpty,
+    onSelectSideEffect,
+    onEscape
+  } = args;
+  const [query, setQuery] = useState("");
+  const debouncedQuery = useDebouncedValue(query, inputDelayMs);
+  const enabled = active && (fetchEmpty || debouncedQuery.trim().length > 0);
+  const query_ = useDocumentSearch({
+    query: debouncedQuery,
+    mimeTypes,
+    ...allowedExtensions !== void 0 ? { allowedExtensions } : {},
+    perPage,
+    enabled,
+    ...request !== void 0 ? { request } : {}
+  });
+  const suggestions = useMemo(() => {
+    if (!query_.data) return [];
+    const flat = query_.data.pages.flatMap((p) => p.items);
+    let filtered = dedupeAgainst(flat, value, uniqueItems);
+    if (filter) {
+      filtered = filter(filtered, { query: debouncedQuery });
+    }
+    return filtered;
+  }, [query_.data, value, uniqueItems, filter, debouncedQuery]);
+  const { announce, announceImmediate } = useLiveRegion();
+  useEffect(() => {
+    if (!active) return;
+    if (debouncedQuery.trim().length === 0 && !fetchEmpty) return;
+    if (query_.isFetching) return;
+    if (query_.isError) {
+      announce(__("Search failed. Try again.", "valu-block-components"));
+      return;
+    }
+    const count = suggestions.length;
+    announce(
+      sprintf(
+        /* translators: %d: number of search results */
+        _n("%d document found", "%d documents found", count, "valu-block-components"),
+        count
+      )
+    );
+  }, [
+    suggestions.length,
+    query_.isFetching,
+    query_.isError,
+    active,
+    debouncedQuery,
+    fetchEmpty,
+    announce
+  ]);
+  const maxedOut = isMaxedOut(value, maxItems);
+  const replace = useCallback((items) => onChange(items), [onChange]);
+  const selectMany = useCallback(
+    (items) => {
+      if (items.length === 0) return;
+      const limited = maxItems === 1;
+      const normalized = items.map((item) => ({
+        ...item,
+        key: item.key && item.key.length > 0 ? item.key : generateKey()
+      }));
+      if (limited) {
+        const next2 = [normalized[normalized.length - 1]];
+        onChange(next2);
+        announceImmediate(
+          sprintf(
+            /* translators: %s: document title */
+            __("Selected %s.", "valu-block-components"),
+            next2[0].title
+          )
+        );
+        onSelectSideEffect?.();
+        return;
+      }
+      const existingIds = new Set(value.map((v) => v.id));
+      const remaining = Number.isFinite(maxItems) ? Math.max(0, maxItems - value.length) : normalized.length;
+      const toAdd = (uniqueItems ? normalized.filter((n) => !existingIds.has(n.id)) : normalized).slice(0, remaining);
+      if (toAdd.length === 0) return;
+      const next = [...value, ...toAdd];
+      onChange(next);
+      announceImmediate(
+        sprintf(
+          /* translators: 1: number added, 2: total selected */
+          _n(
+            "Added %1$d document. %2$d selected.",
+            "Added %1$d documents. %2$d selected.",
+            toAdd.length,
+            "valu-block-components"
+          ),
+          toAdd.length,
+          next.length
+        )
+      );
+      onSelectSideEffect?.();
+    },
+    [maxItems, value, uniqueItems, onChange, announceImmediate, onSelectSideEffect]
+  );
+  const select = useCallback(
+    (item) => {
+      if (maxedOut && maxItems !== 1) return;
+      selectMany([item]);
+    },
+    [maxedOut, maxItems, selectMany]
+  );
+  const remove = useCallback(
+    (key) => {
+      const target = value.find((i) => i.key === key);
+      const next = value.filter((i) => i.key !== key);
+      onChange(next);
+      if (target) {
+        announceImmediate(
+          sprintf(
+            /* translators: %s: title of the removed document */
+            __("Removed %s.", "valu-block-components"),
+            target.title
+          )
+        );
+      }
+    },
+    [value, onChange, announceImmediate]
+  );
+  const reorder = useCallback(
+    (from, to) => {
+      if (from === to || from < 0 || to < 0 || from >= value.length || to >= value.length) {
+        return;
+      }
+      const next = value.slice();
+      const [moved] = next.splice(from, 1);
+      next.splice(to, 0, moved);
+      onChange(next);
+      announceImmediate(
+        sprintf(
+          /* translators: 1: title, 2: position, 3: total */
+          __("Moved %1$s to position %2$d of %3$d.", "valu-block-components"),
+          moved.title,
+          to + 1,
+          next.length
+        )
+      );
+    },
+    [value, onChange, announceImmediate]
+  );
+  const {
+    highlightedIndex,
+    setHighlightedIndex,
+    reset: resetHighlight,
+    handleKeyDown
+  } = useKeyboardNav({
+    itemCount: suggestions.length,
+    onSelect: (i) => {
+      const item = suggestions[i];
+      if (item) select(item);
+    },
+    ...onEscape !== void 0 ? { onEscape } : {}
+  });
+  useEffect(() => {
+    resetHighlight();
+  }, [debouncedQuery, resetHighlight]);
+  return {
+    query,
+    setQuery,
+    debouncedQuery,
+    suggestions,
+    highlightedIndex,
+    setHighlightedIndex,
+    handleKeyDown,
+    loading: query_.isFetching && !query_.data,
+    error: query_.error,
+    hasMore: Boolean(query_.hasNextPage),
+    loadMore: () => {
+      if (query_.hasNextPage && !query_.isFetchingNextPage) void query_.fetchNextPage();
+    },
+    fetchingMore: query_.isFetchingNextPage,
+    select,
+    selectMany,
+    remove,
+    reorder,
+    replace,
+    maxedOut,
+    total: query_.data?.pages[0]?.total ?? 0
+  };
+};
+var EmotionCacheProvider = ({ children }) => {
+  const [head, setHead] = useState(null);
+  const captureDocument = useCallback((node) => {
+    if (!node) return;
+    const owner = node.ownerDocument ?? document;
+    setHead((prev) => prev === owner.head ? prev : owner.head);
+  }, []);
+  const cache = useMemo(() => {
+    if (!head) return null;
+    return createCache({ key: "valu-cp", container: head, prepend: true });
+  }, [head]);
+  if (!cache) {
+    return /* @__PURE__ */ jsx("div", { ref: captureDocument, style: { display: "contents" } });
+  }
+  return /* @__PURE__ */ jsx(CacheProvider, { value: cache, children: /* @__PURE__ */ jsx("div", { ref: captureDocument, style: { display: "contents" }, children }) });
+};
+var DocumentPickerPopover = (props) => {
+  const {
+    rootId,
+    label,
+    hideLabelFromVision,
+    help,
+    placeholder,
+    allowedMimeTypes,
+    allowedExtensions,
+    perPage,
+    inputDelayMs,
+    uniqueItems,
+    maxItems,
+    fetchOnOpen,
+    enableMediaLibrary,
+    showExtensionBadge,
+    showFileSize,
+    showModifiedDate,
+    filter,
+    request,
+    renderSuggestion,
+    value,
+    onChange,
+    labels
+  } = props;
+  const [open, setOpen] = useState(false);
+  const inputRef = useRef(null);
+  const popoverBodyRef = useRef(null);
+  const clearQueryRef = useRef(null);
+  const controller = useDocumentPickerController({
+    mimeTypes: allowedMimeTypes,
+    ...allowedExtensions !== void 0 ? { allowedExtensions } : {},
+    perPage,
+    inputDelayMs,
+    uniqueItems,
+    maxItems,
+    ...filter !== void 0 ? { filter } : {},
+    ...request !== void 0 ? { request } : {},
+    value,
+    onChange,
+    active: open,
+    fetchEmpty: fetchOnOpen,
+    onSelectSideEffect: () => {
+      if (maxItems === 1) {
+        setOpen(false);
+        return;
+      }
+      clearQueryRef.current?.();
+      requestAnimationFrame(() => inputRef.current?.focus());
+    },
+    onEscape: () => {
+      setOpen(false);
+      requestAnimationFrame(() => inputRef.current?.focus());
+    }
+  });
+  clearQueryRef.current = () => controller.setQuery("");
+  const listboxId = aria(rootId, "listbox");
+  const activeOptionId = controller.highlightedIndex >= 0 ? aria(rootId, `option-${controller.highlightedIndex}`) : void 0;
+  const selectedKeys = useMemo(() => new Set(value.map((v) => v.key)), [value]);
+  const handleFocus = useCallback(() => {
+    if (!controller.maxedOut) setOpen(true);
+  }, [controller.maxedOut]);
+  useEffect(() => {
+    if (controller.maxedOut) setOpen(false);
+  }, [controller.maxedOut]);
+  useEffect(() => {
+    if (!open) return;
+    const handlePointerDown = (event) => {
+      const target = event.target;
+      if (!target) return;
+      const input = inputRef.current;
+      const body = popoverBodyRef.current;
+      const anchorContainer = input?.closest("div") ?? input;
+      if (anchorContainer && anchorContainer.contains(target)) return;
+      if (body && body.contains(target)) return;
+      setOpen(false);
+    };
+    const docs = /* @__PURE__ */ new Set();
+    if (typeof document !== "undefined") docs.add(document);
+    const inputDoc = inputRef.current?.ownerDocument;
+    if (inputDoc) docs.add(inputDoc);
+    docs.forEach((d) => d.addEventListener("mousedown", handlePointerDown, true));
+    return () => {
+      docs.forEach((d) => d.removeEventListener("mousedown", handlePointerDown, true));
+    };
+  }, [open]);
+  const disabled = controller.maxedOut;
+  return /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx(
+      SearchCombobox,
+      {
+        ref: inputRef,
+        rootId,
+        value: controller.query,
+        onChange: (next) => {
+          controller.setQuery(next);
+          if (!open && !disabled) setOpen(true);
+        },
+        onFocus: handleFocus,
+        onKeyDown: (event) => {
+          if (event.key === "ArrowDown" && !open && !disabled) {
+            event.preventDefault();
+            setOpen(true);
+            return;
+          }
+          controller.handleKeyDown(event);
+        },
+        ...placeholder !== void 0 ? { placeholder } : {},
+        label,
+        hideLabelFromVision,
+        ...help !== void 0 ? { help } : {},
+        disabled,
+        open: open && !disabled,
+        listboxId,
+        ...activeOptionId !== void 0 ? { activeOptionId } : {},
+        labels
+      }
+    ),
+    enableMediaLibrary ? /* @__PURE__ */ jsx(ActionsRow, { children: /* @__PURE__ */ jsx(
+      MediaLibraryButton,
+      {
+        allowedMimeTypes,
+        ...allowedExtensions !== void 0 ? { allowedExtensions } : {},
+        multiple: maxItems !== 1,
+        value,
+        onSelect: (items) => controller.selectMany(items),
+        labels,
+        disabled
+      }
+    ) }) : null,
+    disabled ? /* @__PURE__ */ jsx(MaxedOutBanner, { role: "status", style: { marginTop: 8 }, children: labels.limitReached ?? __("Selection limit reached.", "valu-block-components") }) : null,
+    open && !disabled && inputRef.current ? /* @__PURE__ */ jsx(
+      Popover,
+      {
+        anchor: inputRef.current.closest("div") ?? inputRef.current,
+        placement: "bottom-start",
+        focusOnMount: false,
+        onClose: () => setOpen(false),
+        onFocusOutside: () => setOpen(false),
+        shift: true,
+        flip: true,
+        resize: true,
+        offset: 4,
+        className: "valu-document-picker__popover",
+        children: /* @__PURE__ */ jsx(EmotionCacheProvider, { children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: popoverBodyRef,
+            style: {
+              minWidth: inputRef.current.offsetWidth,
+              width: "100%"
+            },
+            children: /* @__PURE__ */ jsx(
+              SuggestionList,
+              {
+                listboxId,
+                rootId,
+                suggestions: controller.suggestions,
+                loading: controller.loading,
+                fetchingMore: controller.fetchingMore,
+                hasMore: controller.hasMore,
+                error: controller.error,
+                query: controller.debouncedQuery,
+                highlightedIndex: controller.highlightedIndex,
+                selectedKeys,
+                labels,
+                showExtensionBadge,
+                showFileSize,
+                showModifiedDate,
+                ...renderSuggestion ? { renderSuggestion } : {},
+                onHover: (i) => controller.setHighlightedIndex(i),
+                onSelect: (item) => controller.select(item),
+                onLoadMore: () => controller.loadMore()
+              }
+            )
+          }
+        ) })
+      }
+    ) : null
+  ] });
+};
+var DocumentPickerInline = (props) => {
+  const {
+    rootId,
+    label,
+    hideLabelFromVision,
+    help,
+    placeholder,
+    allowedMimeTypes,
+    allowedExtensions,
+    perPage,
+    inputDelayMs,
+    uniqueItems,
+    maxItems,
+    fetchOnOpen,
+    enableMediaLibrary,
+    showExtensionBadge,
+    showFileSize,
+    showModifiedDate,
+    filter,
+    request,
+    renderSuggestion,
+    value,
+    onChange,
+    labels
+  } = props;
+  const inputRef = useRef(null);
+  const clearQueryRef = useRef(null);
+  const controller = useDocumentPickerController({
+    mimeTypes: allowedMimeTypes,
+    ...allowedExtensions !== void 0 ? { allowedExtensions } : {},
+    perPage,
+    inputDelayMs,
+    uniqueItems,
+    maxItems,
+    ...filter !== void 0 ? { filter } : {},
+    ...request !== void 0 ? { request } : {},
+    value,
+    onChange,
+    active: true,
+    fetchEmpty: fetchOnOpen || value.length === 0,
+    onSelectSideEffect: () => {
+      clearQueryRef.current?.();
+      requestAnimationFrame(() => inputRef.current?.focus());
+    }
+  });
+  clearQueryRef.current = () => controller.setQuery("");
+  const listboxId = aria(rootId, "listbox");
+  const activeOptionId = controller.highlightedIndex >= 0 ? aria(rootId, `option-${controller.highlightedIndex}`) : void 0;
+  const selectedKeys = useMemo(() => new Set(value.map((v) => v.key)), [value]);
+  const disabled = controller.maxedOut;
+  const shouldShowList = !disabled && (controller.debouncedQuery.trim().length > 0 || fetchOnOpen || value.length === 0);
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      SearchCombobox,
+      {
+        ref: inputRef,
+        rootId,
+        value: controller.query,
+        onChange: (next) => controller.setQuery(next),
+        onKeyDown: controller.handleKeyDown,
+        ...placeholder !== void 0 ? { placeholder } : {},
+        label,
+        hideLabelFromVision,
+        ...help !== void 0 ? { help } : {},
+        disabled,
+        open: shouldShowList,
+        listboxId,
+        ...activeOptionId !== void 0 ? { activeOptionId } : {},
+        labels
+      }
+    ),
+    enableMediaLibrary ? /* @__PURE__ */ jsx(ActionsRow, { children: /* @__PURE__ */ jsx(
+      MediaLibraryButton,
+      {
+        allowedMimeTypes,
+        ...allowedExtensions !== void 0 ? { allowedExtensions } : {},
+        multiple: maxItems !== 1,
+        value,
+        onSelect: (items) => controller.selectMany(items),
+        labels,
+        disabled
+      }
+    ) }) : null,
+    disabled ? /* @__PURE__ */ jsx(MaxedOutBanner, { role: "status", style: { marginTop: 8 }, children: labels.limitReached ?? __("Selection limit reached.", "valu-block-components") }) : null,
+    shouldShowList ? /* @__PURE__ */ jsx(SuggestionsShell, { inline: true, style: { marginTop: 8 }, children: /* @__PURE__ */ jsx(
+      SuggestionList,
+      {
+        listboxId,
+        rootId,
+        suggestions: controller.suggestions,
+        loading: controller.loading,
+        fetchingMore: controller.fetchingMore,
+        hasMore: controller.hasMore,
+        error: controller.error,
+        query: controller.debouncedQuery,
+        highlightedIndex: controller.highlightedIndex,
+        selectedKeys,
+        labels,
+        showExtensionBadge,
+        showFileSize,
+        showModifiedDate,
+        ...renderSuggestion ? { renderSuggestion } : {},
+        onHover: (i) => controller.setHighlightedIndex(i),
+        onSelect: (item) => controller.select(item),
+        onLoadMore: () => controller.loadMore()
+      }
+    ) }) : null
+  ] });
+};
+var SelectedItem = ({
+  item,
+  index,
+  total,
+  orderable,
+  showExtensionBadge,
+  showFileSize,
+  showModifiedDate,
+  labels,
+  onRemove,
+  onMoveUp,
+  onMoveDown,
+  render
+}) => {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: item.key,
+    disabled: !orderable
+  });
+  const style = {
+    transform: CSS.Translate.toString(transform),
+    transition,
+    opacity: isDragging ? 0 : 1
+  };
+  const isMissing = item.missing === "deleted";
+  const missingLabel = labels.missing ?? __("This document is no longer available.", "valu-block-components");
+  const removeLabel = labels.remove ? labels.remove : sprintf(
+    /* translators: %s: document title */
+    __("Remove %s", "valu-block-components"),
+    item.title
+  );
+  const moveUpLabel = labels.moveUp ? labels.moveUp : sprintf(
+    /* translators: %s: document title */
+    __("Move %s up", "valu-block-components"),
+    item.title
+  );
+  const moveDownLabel = labels.moveDown ? labels.moveDown : sprintf(
+    /* translators: %s: document title */
+    __("Move %s down", "valu-block-components"),
+    item.title
+  );
+  const modified = showModifiedDate ? formatModified(item.modified) : "";
+  return /* @__PURE__ */ jsxs(
+    SelectedRow2,
+    {
+      ref: setNodeRef,
+      style,
+      dragging: isDragging,
+      missing: isMissing,
+      "aria-setsize": total,
+      "aria-posinset": index + 1,
+      children: [
+        orderable ? /* @__PURE__ */ jsx(
+          DragHandleButton,
+          {
+            type: "button",
+            "aria-label": labels.dragHandle ?? __("Reorder item", "valu-block-components"),
+            ...attributes,
+            ...listeners,
+            children: /* @__PURE__ */ jsx(Icon, { icon: dragHandle, size: 14 })
+          }
+        ) : null,
+        isMissing ? /* @__PURE__ */ jsx(Icon, { icon: caution, size: 20 }) : showExtensionBadge ? /* @__PURE__ */ jsx(ExtensionBadge, { extension: item.extension }) : null,
+        render ? render(item) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(DocRowBody, { children: [
+            /* @__PURE__ */ jsx(PrimaryText, { muted: isMissing, title: item.title, children: isMissing ? missingLabel : item.title }),
+            !isMissing ? /* @__PURE__ */ jsx(FilenameText, { title: item.filename, children: item.filename }) : null
+          ] }),
+          !isMissing && (showFileSize || modified) ? /* @__PURE__ */ jsxs(DocMetaInline, { children: [
+            showFileSize && item.fileSize ? /* @__PURE__ */ jsx("span", { children: formatFileSize(item.fileSize) }) : null,
+            modified ? /* @__PURE__ */ jsx("span", { children: modified }) : null
+          ] }) : null
+        ] }),
+        /* @__PURE__ */ jsxs(ActionColumn, { children: [
+          orderable ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "small",
+                variant: "tertiary",
+                icon: chevronUp,
+                label: moveUpLabel,
+                onClick: onMoveUp,
+                disabled: index === 0 || !onMoveUp
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "small",
+                variant: "tertiary",
+                icon: chevronDown,
+                label: moveDownLabel,
+                onClick: onMoveDown,
+                disabled: index === total - 1 || !onMoveDown
+              }
+            )
+          ] }) : null,
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "small",
+              variant: "tertiary",
+              icon: closeSmall,
+              label: removeLabel,
+              onClick: onRemove,
+              isDestructive: true
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+var DragChip = ({ title }) => /* @__PURE__ */ jsxs(ChipWrap, { children: [
+  /* @__PURE__ */ jsx(Icon, { icon: dragHandle, size: 16 }),
+  /* @__PURE__ */ jsx(ChipTitle, { children: title })
+] });
+var useResolvedDocuments = (value) => {
+  const records = useSelect(
+    (select) => {
+      const core = select(store);
+      const out = {};
+      for (const item of value) {
+        const record = core.getEntityRecord("postType", "attachment", item.id);
+        const resolved = core.hasFinishedResolution("getEntityRecord", [
+          "postType",
+          "attachment",
+          item.id
+        ]);
+        out[item.id] = { record: record ?? null, resolved };
+      }
+      return out;
+    },
+    [value]
+  );
+  return useMemo(
+    () => value.map((item) => {
+      const entry = records[item.id];
+      if (!entry) return item;
+      const { record, resolved } = entry;
+      if (!resolved) return item;
+      if (!record) return { ...item, missing: "deleted" };
+      const fresh = mapMediaToDocumentItem(
+        record
+      );
+      return {
+        ...item,
+        title: fresh.title || item.title,
+        filename: fresh.filename || item.filename,
+        url: fresh.url || item.url,
+        mimeType: fresh.mimeType || item.mimeType,
+        extension: fresh.extension || item.extension,
+        fileSize: fresh.fileSize ?? item.fileSize,
+        modified: fresh.modified ?? item.modified
+      };
+    }),
+    [value, records]
+  );
+};
+var SelectedList = ({
+  value,
+  orderable,
+  maxItems,
+  labels,
+  onChange,
+  renderSelected,
+  showHeader = true,
+  showExtensionBadge,
+  showFileSize,
+  showModifiedDate
+}) => {
+  const resolved = useResolvedDocuments(value);
+  const [activeKey, setActiveKey] = useState(null);
+  const sensors = useSensors(
+    useSensor(MouseSensor, { activationConstraint: { distance: 5 } }),
+    useSensor(TouchSensor, { activationConstraint: { delay: 200, tolerance: 6 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+  );
+  const ids = useMemo(() => resolved.map((i) => i.key), [resolved]);
+  const activeItem = activeKey ? resolved.find((i) => i.key === activeKey) : null;
+  const remove = useCallback(
+    (key) => onChange(value.filter((i) => i.key !== key)),
+    [value, onChange]
+  );
+  const reorder = useCallback(
+    (from, to) => {
+      if (from === to) return;
+      onChange(arrayMove(value, from, to));
+    },
+    [value, onChange]
+  );
+  const handleDragStart = useCallback(
+    (event) => setActiveKey(String(event.active.id)),
+    []
+  );
+  const handleDragEnd = useCallback(
+    (event) => {
+      setActiveKey(null);
+      const { active, over } = event;
+      if (!over || active.id === over.id) return;
+      const from = ids.indexOf(String(active.id));
+      const to = ids.indexOf(String(over.id));
+      if (from >= 0 && to >= 0) reorder(from, to);
+    },
+    [ids, reorder]
+  );
+  if (resolved.length === 0) return null;
+  const isSingleSelect = maxItems === 1;
+  const shouldShowHeader = showHeader && !isSingleSelect;
+  const header = shouldShowHeader ? /* @__PURE__ */ jsxs(HeaderRow, { children: [
+    /* @__PURE__ */ jsx(HeaderTitle, { children: resolved.length === 1 ? labels.selectedSingular ?? __("Selected", "valu-block-components") : labels.selectedPlural ?? __("Selected", "valu-block-components") }),
+    /* @__PURE__ */ jsx(CountPill, { "aria-hidden": "true", children: Number.isFinite(maxItems) ? sprintf(
+      /* translators: 1: current count, 2: max count */
+      "%1$d / %2$d",
+      resolved.length,
+      maxItems
+    ) : String(resolved.length) })
+  ] }) : null;
+  const rows = resolved.map((item, index) => /* @__PURE__ */ jsx(
+    SelectedItem,
+    {
+      item,
+      index,
+      total: resolved.length,
+      orderable,
+      showExtensionBadge,
+      showFileSize,
+      showModifiedDate,
+      labels,
+      onRemove: () => remove(item.key),
+      ...index > 0 ? { onMoveUp: () => reorder(index, index - 1) } : {},
+      ...index < resolved.length - 1 ? { onMoveDown: () => reorder(index, index + 1) } : {},
+      ...renderSelected ? { render: renderSelected } : {}
+    },
+    item.key
+  ));
+  if (!orderable) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      header,
+      /* @__PURE__ */ jsx(SelectedListEl, { role: "list", children: rows })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    header,
+    /* @__PURE__ */ jsxs(
+      DndContext,
+      {
+        sensors,
+        collisionDetection: closestCenter,
+        onDragStart: handleDragStart,
+        onDragEnd: handleDragEnd,
+        onDragCancel: () => setActiveKey(null),
+        children: [
+          /* @__PURE__ */ jsx(SortableContext, { items: ids, strategy: verticalListSortingStrategy, children: /* @__PURE__ */ jsx(SelectedListEl, { role: "list", children: rows }) }),
+          /* @__PURE__ */ jsx(DragOverlay, { dropAnimation: defaultDropAnimation, children: activeItem ? /* @__PURE__ */ jsx(DragChip, { title: activeItem.title }) : null })
+        ]
+      }
+    )
+  ] });
+};
+var DEFAULT_LABELS = {};
+var DEFAULT_MIME = [...DEFAULT_DOCUMENT_MIME_TYPES];
+var makeQueryClient = () => new QueryClient({
+  defaultOptions: {
+    queries: { retry: 1, refetchOnWindowFocus: false }
+  }
+});
+var DocumentPicker = ({
+  label,
+  hideLabelFromVision = false,
+  help,
+  variant = "popover",
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  maxItems = Infinity,
+  orderable,
+  placeholder,
+  allowedMimeTypes,
+  allowedExtensions,
+  perPage,
+  inputDelayMs = 250,
+  fetchOnOpen = false,
+  uniqueItems = true,
+  enableMediaLibrary = true,
+  showExtensionBadge = true,
+  showFileSize = true,
+  showModifiedDate = false,
+  filter,
+  request,
+  renderSuggestion,
+  renderSelected,
+  labels = DEFAULT_LABELS,
+  className,
+  id
+}) => {
+  const reactId = useId();
+  const rootId = id ?? `valu-dp-${reactId.replace(/:/g, "")}`;
+  const [uncontrolled, setUncontrolled] = useState(defaultValue ?? []);
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : uncontrolled;
+  const handleChange = useCallback(
+    (next) => {
+      if (!isControlled) setUncontrolled(next);
+      onChange?.(next);
+    },
+    [isControlled, onChange]
+  );
+  const effectiveMime = allowedMimeTypes ?? DEFAULT_MIME;
+  const effectivePerPage = perPage ?? (variant === "popover" ? 10 : 20);
+  const effectiveOrderable = orderable ?? (Number.isFinite(maxItems) ? maxItems > 1 : true);
+  const queryClientRef = useRef(null);
+  if (!queryClientRef.current) queryClientRef.current = makeQueryClient();
+  const isSingleSelect = maxItems === 1;
+  const isFull = Number.isFinite(maxItems) && value.length >= maxItems;
+  const hideInputForSingleSelect = isSingleSelect && value.length > 0;
+  const showInput = !isFull && !hideInputForSingleSelect;
+  const variantProps = useMemo(
+    () => ({
+      rootId,
+      label,
+      hideLabelFromVision,
+      ...help !== void 0 ? { help } : {},
+      ...placeholder !== void 0 ? { placeholder } : {},
+      allowedMimeTypes: effectiveMime,
+      ...allowedExtensions !== void 0 ? { allowedExtensions } : {},
+      perPage: effectivePerPage,
+      inputDelayMs,
+      uniqueItems,
+      maxItems,
+      fetchOnOpen,
+      enableMediaLibrary,
+      showExtensionBadge,
+      showFileSize,
+      showModifiedDate,
+      ...filter !== void 0 ? { filter } : {},
+      ...request !== void 0 ? { request } : {},
+      ...renderSuggestion ? { renderSuggestion } : {},
+      value,
+      onChange: handleChange,
+      labels
+    }),
+    [
+      rootId,
+      label,
+      hideLabelFromVision,
+      help,
+      placeholder,
+      effectiveMime,
+      allowedExtensions,
+      effectivePerPage,
+      inputDelayMs,
+      uniqueItems,
+      maxItems,
+      fetchOnOpen,
+      enableMediaLibrary,
+      showExtensionBadge,
+      showFileSize,
+      showModifiedDate,
+      filter,
+      request,
+      renderSuggestion,
+      value,
+      handleChange,
+      labels
+    ]
+  );
+  return /* @__PURE__ */ jsx(EmotionCacheProvider, { children: /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClientRef.current, children: /* @__PURE__ */ jsxs(Root2, { id: rootId, ...className !== void 0 ? { className } : {}, children: [
+    showInput ? variant === "popover" ? /* @__PURE__ */ jsx(DocumentPickerPopover, { ...variantProps }) : /* @__PURE__ */ jsx(DocumentPickerInline, { ...variantProps }) : null,
+    hideInputForSingleSelect && enableMediaLibrary ? /* @__PURE__ */ jsx(ActionsRow, { children: /* @__PURE__ */ jsx(
+      MediaLibraryButton,
+      {
+        allowedMimeTypes: effectiveMime,
+        ...allowedExtensions !== void 0 ? { allowedExtensions } : {},
+        multiple: false,
+        value,
+        onSelect: (items) => handleChange([items[items.length - 1]]),
+        labels,
+        variant: "tertiary",
+        label: labels.replace
+      }
+    ) }) : null,
+    /* @__PURE__ */ jsx(
+      SelectedList,
+      {
+        value,
+        orderable: effectiveOrderable && value.length > 1,
+        maxItems,
+        labels,
+        onChange: handleChange,
+        ...renderSelected ? { renderSelected } : {},
+        showHeader: value.length > 0,
+        showExtensionBadge,
+        showFileSize,
+        showModifiedDate
+      }
+    )
+  ] }) }) });
+};
+var FileSize = ({ bytes }) => {
+  const formatted = formatFileSize(bytes);
+  if (!formatted) return null;
+  return /* @__PURE__ */ jsx(FileMeta, { children: formatted });
+};
+
+export { DEFAULT_DOCUMENT_MIME_TYPES, DocumentPicker, ExtensionBadge, FileSize, MediaLibraryButton, basenameFromUrl, extensionFromUrl, formatFileSize, mapMediaToDocumentItem };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map