@valu/block-components 0.1.0

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

@@ -0,0 +1,2026 @@
+import { forwardRef, useId, useState, useCallback, useRef, useMemo, useEffect } from 'react';
+import { QueryClientProvider, QueryClient, useInfiniteQuery, keepPreviousData } from '@tanstack/react-query';
+import { VisuallyHidden, Icon, Popover, Spinner, Button } from '@wordpress/components';
+import { __, sprintf, _n } from '@wordpress/i18n';
+import { search, closeSmall, dragHandle, caution, chevronUp, chevronDown, people } 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 { filterURLForDisplay, safeDecodeURI, addQueryArgs } from '@wordpress/url';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useSelect } from '@wordpress/data';
+import apiFetch from '@wordpress/api-fetch';
+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 { store } from '@wordpress/core-data';
+
+// components/content-picker/ContentPicker.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",
+  success: "#007017",
+  warning: "#bd8600",
+  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
+};
+
+// components/content-picker/styles/index.ts
+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;
+`;
+var Root = 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;
+`;
+var GroupHeading = 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};
+`;
+var Option = 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};
+			}
+		`}
+`;
+var Thumb = 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;
+	}
+`;
+var ItemBody = styled.div`
+	flex: 1;
+	min-width: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 0;
+`;
+var SecondaryText = 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;
+`;
+var TypeHint = 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;
+`;
+var SelectedRow = 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;
+`;
+var generateKey = () => v4();
+var decodeTitle = (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 toDisplayUrl = (url) => {
+  if (!url) return "";
+  try {
+    return filterURLForDisplay(safeDecodeURI(url)) ?? "";
+  } catch {
+    return url;
+  }
+};
+var groupByType = (items) => {
+  const map = /* @__PURE__ */ new Map();
+  for (const item of items) {
+    const bucket = map.get(item.type);
+    if (bucket) bucket.push(item);
+    else map.set(item.type, [item]);
+  }
+  return Array.from(map.entries());
+};
+var postTypeLabels = {
+  post: "Post",
+  page: "Page",
+  attachment: "Media"
+};
+var humanizeType = (type, kind) => {
+  if (kind === "user") return __("User", "valu-block-components");
+  if (postTypeLabels[type]) return postTypeLabels[type];
+  return type.replace(/[-_]+/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+};
+var statusLabels = {
+  draft: "Draft",
+  pending: "Pending",
+  private: "Private",
+  future: "Scheduled",
+  trash: "Trash"
+};
+var humanizeStatus = (status) => {
+  if (!status || status === "publish") return null;
+  return statusLabels[status] ?? status;
+};
+var aria = (rootId, suffix) => `${rootId}-${suffix}`;
+var isMaxedOut = (value, maxItems) => Number.isFinite(maxItems) && value.length >= maxItems;
+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 DEFAULT_ITEM_ICONS = {
+  user: people
+};
+var resolveItemIcon = (item, userIcons) => {
+  if (userIcons && item.type in userIcons) return userIcons[item.type];
+  if (item.type in DEFAULT_ITEM_ICONS) return DEFAULT_ITEM_ICONS[item.type];
+  return void 0;
+};
+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", "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 tones = {
+  neutral: { bg: tokens.gray100, fg: tokens.gray900, border: tokens.gray300 },
+  warn: { bg: "#fef3d0", fg: tokens.warning, border: "#f3d782" },
+  danger: { bg: tokens.dangerSoft, fg: tokens.danger, border: tokens.dangerLine },
+  success: { bg: "#e6f4ea", fg: tokens.success, border: "#a7d5b3" }
+};
+var toneFor = (status) => {
+  if (status === "trash") return "danger";
+  if (status === "draft" || status === "pending" || status === "future") return "warn";
+  if (status === "private") return "neutral";
+  return "neutral";
+};
+var Pill = styled.span`
+	display: inline-flex;
+	align-items: center;
+	padding: 1px 6px;
+	background: ${({ tone }) => tones[tone].bg};
+	color: ${({ tone }) => tones[tone].fg};
+	border: 1px solid ${({ tone }) => tones[tone].border};
+	border-radius: 999px;
+	font-size: 10px;
+	font-weight: ${tokens.fontWeightBold};
+	letter-spacing: 0.04em;
+	text-transform: uppercase;
+	white-space: nowrap;
+	line-height: 1.6;
+`;
+var StatusBadge = ({ status }) => {
+  const label = humanizeStatus(status);
+  if (!label) return null;
+  const translated = status === "draft" ? __("Draft", "valu-block-components") : status === "pending" ? __("Pending", "valu-block-components") : status === "private" ? __("Private", "valu-block-components") : status === "future" ? __("Scheduled", "valu-block-components") : status === "trash" ? __("Trash", "valu-block-components") : label;
+  return /* @__PURE__ */ jsx(Pill, { tone: toneFor(status), children: translated });
+};
+var SuggestionItem = ({
+  item,
+  optionId,
+  highlighted,
+  selected,
+  showTypeHint,
+  showUrl,
+  icons,
+  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(
+      Option,
+      {
+        ref,
+        role: "option",
+        id: optionId,
+        "aria-selected": selected,
+        highlighted,
+        onMouseEnter: onHover,
+        onMouseDown: handleMouseDown,
+        onClick: handleClick,
+        children: render(item, { highlighted, selected })
+      }
+    );
+  }
+  const displayUrl = toDisplayUrl(item.url);
+  const hasAbnormalStatus = item.status && item.status !== "publish";
+  const icon = resolveItemIcon(item, icons);
+  const isAvatar = item.kind === "user" && Boolean(item.thumbnailUrl);
+  const hasVisual = Boolean(item.thumbnailUrl) || Boolean(icon);
+  return /* @__PURE__ */ jsxs(
+    Option,
+    {
+      ref,
+      role: "option",
+      id: optionId,
+      "aria-selected": selected,
+      highlighted,
+      onMouseEnter: onHover,
+      onMouseDown: handleMouseDown,
+      onClick: handleClick,
+      children: [
+        hasVisual ? /* @__PURE__ */ jsx(
+          Thumb,
+          {
+            hasImage: Boolean(item.thumbnailUrl) && !isAvatar,
+            avatar: isAvatar,
+            children: item.thumbnailUrl ? /* @__PURE__ */ jsx("img", { src: item.thumbnailUrl, alt: "", loading: "lazy" }) : icon ? /* @__PURE__ */ jsx(Icon, { icon, size: 22 }) : null
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs(ItemBody, { children: [
+          /* @__PURE__ */ jsx(PrimaryText, { "data-valu-title": true, children: item.title }),
+          showUrl && displayUrl ? /* @__PURE__ */ jsx(SecondaryText, { children: displayUrl }) : null
+        ] }),
+        hasAbnormalStatus ? /* @__PURE__ */ jsx(StatusBadge, { status: item.status }) : null,
+        showTypeHint ? /* @__PURE__ */ jsx(TypeHint, { children: humanizeType(item.type, item.kind) }) : null
+      ]
+    }
+  );
+};
+var SuggestionList = ({
+  listboxId,
+  rootId,
+  groups,
+  suggestions,
+  kind,
+  loading,
+  fetchingMore,
+  hasMore,
+  error,
+  query,
+  highlightedIndex,
+  selectedKeys,
+  icons,
+  labels,
+  showUrl,
+  headerSlot,
+  renderSuggestion,
+  renderGroupHeading,
+  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.empty ?? __("No matches. Try a different search.", "valu-block-components") : __("Type to search.", "valu-block-components");
+    return /* @__PURE__ */ jsxs(ListboxScroll, { ref: scrollRef, children: [
+      header,
+      /* @__PURE__ */ jsx(EmptyState, { children: emptyMessage })
+    ] });
+  }
+  let runningIndex = 0;
+  const showGroupHeadings = groups.length > 1 || groups[0]?.[0] !== "__all__";
+  const showTypeHint = !showGroupHeadings;
+  return /* @__PURE__ */ jsxs(ListboxScroll, { ref: scrollRef, children: [
+    header,
+    /* @__PURE__ */ jsxs(
+      Listbox,
+      {
+        role: "listbox",
+        id: listboxId,
+        "aria-label": labels.input ?? __("Suggestions", "valu-block-components"),
+        children: [
+          groups.map(([type, items]) => {
+            const headingId = aria(rootId, `group-${type}`);
+            const optionNodes = items.map((item) => {
+              const index = runningIndex++;
+              const optionId = aria(rootId, `option-${index}`);
+              return /* @__PURE__ */ jsx(
+                SuggestionItem,
+                {
+                  item,
+                  optionId,
+                  highlighted: index === highlightedIndex,
+                  selected: selectedKeys.has(item.key),
+                  showTypeHint,
+                  showUrl,
+                  icons,
+                  onHover: () => onHover(index),
+                  onSelect: () => onSelect(item),
+                  render: renderSuggestion
+                },
+                item.key
+              );
+            });
+            if (!showGroupHeadings) return optionNodes;
+            return /* @__PURE__ */ jsxs("div", { role: "group", "aria-labelledby": headingId, children: [
+              /* @__PURE__ */ jsx(GroupHeading, { id: headingId, children: renderGroupHeading ? renderGroupHeading(type, items) : humanizeType(type, kind) }),
+              optionNodes
+            ] }, type);
+          }),
+          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 Row = styled.div`
+	display: flex;
+	align-items: center;
+	gap: ${tokens.spaceXs};
+	padding: 6px ${tokens.spaceMd};
+	overflow-x: auto;
+	border-bottom: 1px solid ${tokens.gray200};
+	background: ${tokens.bg};
+
+	&::-webkit-scrollbar {
+		height: 4px;
+	}
+	&::-webkit-scrollbar-thumb {
+		background: ${tokens.gray300};
+		border-radius: 2px;
+	}
+`;
+var Chip = styled.button`
+	flex: 0 0 auto;
+	padding: 2px 10px;
+	font-size: ${tokens.fontSizeSmall};
+	font-weight: ${tokens.fontWeightMedium};
+	line-height: 1.6;
+	border-radius: 999px;
+	border: 1px solid ${({ active }) => active ? tokens.accent : tokens.gray300};
+	background: ${({ active }) => active ? tokens.accent : "transparent"};
+	color: ${({ active }) => active ? "#fff" : tokens.gray900};
+	cursor: pointer;
+	white-space: nowrap;
+	transition: background ${tokens.transitionFast}, border-color ${tokens.transitionFast};
+
+	&:hover {
+		border-color: ${tokens.accent};
+	}
+
+	&:focus-visible {
+		outline: 2px solid ${tokens.accent};
+		outline-offset: 1px;
+	}
+`;
+var TypeFilter = ({ types, kind, active, onChange, allLabel }) => {
+  if (types.length < 2) return null;
+  return /* @__PURE__ */ jsxs(Row, { role: "toolbar", "aria-label": __("Filter by type", "valu-block-components"), children: [
+    /* @__PURE__ */ jsx(
+      Chip,
+      {
+        type: "button",
+        active: active === null,
+        "aria-pressed": active === null,
+        onClick: () => onChange(null),
+        onMouseDown: (e) => e.preventDefault(),
+        children: allLabel ?? __("All", "valu-block-components")
+      }
+    ),
+    types.map((type) => /* @__PURE__ */ jsx(
+      Chip,
+      {
+        type: "button",
+        active: active === type,
+        "aria-pressed": active === type,
+        onClick: () => onChange(active === type ? null : type),
+        onMouseDown: (e) => e.preventDefault(),
+        children: humanizeType(type, kind)
+      },
+      type
+    ))
+  ] });
+};
+var pickThumbnail = (result) => {
+  const media = result._embedded?.["wp:featuredmedia"]?.[0];
+  if (!media) return void 0;
+  const sizes = media.media_details?.sizes;
+  return sizes?.thumbnail?.source_url ?? sizes?.medium?.source_url ?? media.source_url ?? void 0;
+};
+var pickStatus = (result) => result._embedded?.self?.[0]?.status;
+var buildPath = (args) => {
+  const { kind, types, query, page, perPage } = args;
+  if (kind === "user") {
+    return addQueryArgs("/wp/v2/users", {
+      search: query,
+      per_page: perPage,
+      page,
+      context: "view"
+    });
+  }
+  const params = {
+    search: query,
+    type: kind,
+    per_page: perPage,
+    page,
+    _embed: "wp:featuredmedia,self"
+  };
+  if (types && types.length > 0) {
+    params.subtype = types.join(",");
+  }
+  return addQueryArgs("/wp/v2/search", params);
+};
+var parseTotalPages = (response) => {
+  const raw = response.headers.get("x-wp-totalpages");
+  if (!raw) return 1;
+  const parsed = parseInt(raw, 10);
+  return Number.isNaN(parsed) ? 1 : parsed;
+};
+var parseTotal = (response) => {
+  const raw = response.headers.get("x-wp-total");
+  if (!raw) return 0;
+  const parsed = parseInt(raw, 10);
+  return Number.isNaN(parsed) ? 0 : parsed;
+};
+var fetchSearch = async (args) => {
+  const rawPath = buildPath(args);
+  const path = args.request ? args.request(rawPath, { query: args.query, page: args.page, kind: args.kind }) : rawPath;
+  const response = await apiFetch({
+    path,
+    parse: false,
+    signal: args.signal
+  });
+  const data = await response.json();
+  const totalPages = parseTotalPages(response);
+  const total = parseTotal(response);
+  let items;
+  if (args.kind === "user") {
+    items = data.map((u) => ({
+      key: generateKey(),
+      id: u.id,
+      type: "user",
+      kind: "user",
+      title: decodeTitle(u.name),
+      url: u.link,
+      thumbnailUrl: u.avatar_urls?.["48"] ?? u.avatar_urls?.["96"],
+      raw: u
+    }));
+  } else {
+    items = data.map((r) => ({
+      key: generateKey(),
+      id: r.id,
+      type: r.subtype || r.type,
+      kind: args.kind,
+      title: decodeTitle(r.title),
+      url: r.url,
+      status: pickStatus(r),
+      thumbnailUrl: pickThumbnail(r),
+      raw: r
+    }));
+  }
+  return { items, page: args.page, hasMore: args.page < totalPages, total };
+};
+
+// components/content-picker/hooks/useContentSearch.ts
+var contentSearchKey = (args) => [
+  "valu/content-search",
+  args.kind,
+  [...args.types ?? []].sort().join(","),
+  args.query,
+  args.perPage
+];
+var useContentSearch = (args) => useInfiniteQuery({
+  queryKey: contentSearchKey(args),
+  queryFn: ({ pageParam, signal }) => fetchSearch({
+    query: args.query,
+    kind: args.kind,
+    types: args.types,
+    page: pageParam,
+    perPage: args.perPage,
+    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/content-picker/hooks/useContentPickerController.ts
+var useContentPickerController = (args) => {
+  const {
+    kind,
+    types,
+    perPage,
+    inputDelayMs,
+    excludeCurrentPost,
+    uniqueItems,
+    maxItems,
+    groupByType: groupByTypeFlag,
+    filter,
+    request,
+    value,
+    onChange,
+    active,
+    fetchEmpty,
+    onSelectSideEffect,
+    onEscape
+  } = args;
+  const [query, setQuery] = useState("");
+  const [activeTypeFilter, setActiveTypeFilter] = useState(null);
+  const debouncedQuery = useDebouncedValue(query, inputDelayMs);
+  const effectiveSearchTypes = useMemo(() => {
+    if (activeTypeFilter && types && types.includes(activeTypeFilter)) {
+      return [activeTypeFilter];
+    }
+    return types;
+  }, [activeTypeFilter, types]);
+  const currentPostId = useSelect((select2) => {
+    if (!excludeCurrentPost || kind !== "post") return 0;
+    const editor = select2("core/editor");
+    return editor?.getCurrentPostId?.() ?? 0;
+  }, [excludeCurrentPost, kind]);
+  const enabled = active && (fetchEmpty || debouncedQuery.trim().length > 0);
+  const query_ = useContentSearch({
+    query: debouncedQuery,
+    kind,
+    types: effectiveSearchTypes,
+    perPage,
+    enabled,
+    request
+  });
+  const suggestions = useMemo(() => {
+    if (!query_.data) return [];
+    const flat = query_.data.pages.flatMap((p) => p.items);
+    let filtered = dedupeAgainst(flat, value, uniqueItems);
+    if (currentPostId) {
+      filtered = filtered.filter((item) => item.id !== currentPostId);
+    }
+    if (filter) {
+      filtered = filter(filtered, { query: debouncedQuery, kind });
+    }
+    return filtered;
+  }, [query_.data, value, uniqueItems, currentPostId, filter, debouncedQuery, kind]);
+  const shouldGroup = groupByTypeFlag && (effectiveSearchTypes?.length ?? 0) > 1;
+  const groups = useMemo(
+    () => shouldGroup ? groupByType(suggestions) : [["__all__", suggestions]],
+    [shouldGroup, suggestions]
+  );
+  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 result", "%d results", 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 select = useCallback(
+    (item) => {
+      if (maxedOut) return;
+      const limited = maxItems === 1;
+      const normalized = {
+        ...item,
+        key: item.key && item.key.length > 0 ? item.key : generateKey()
+      };
+      const next = limited ? [normalized] : [...value, normalized];
+      onChange(next);
+      announceImmediate(
+        sprintf(
+          /* translators: 1: title, 2: selected count */
+          __("Added %1$s. %2$d selected.", "valu-block-components"),
+          normalized.title,
+          next.length
+        )
+      );
+      onSelectSideEffect?.();
+    },
+    [maxedOut, maxItems, value, onChange, announceImmediate, onSelectSideEffect]
+  );
+  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 item */
+            __("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
+  });
+  useEffect(() => {
+    resetHighlight();
+  }, [debouncedQuery, activeTypeFilter, resetHighlight]);
+  return {
+    query,
+    setQuery,
+    debouncedQuery,
+    suggestions,
+    groups,
+    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,
+    remove,
+    reorder,
+    replace,
+    maxedOut,
+    total: query_.data?.pages[0]?.total ?? 0,
+    activeTypeFilter,
+    setActiveTypeFilter,
+    effectiveSearchTypes
+  };
+};
+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 ContentPickerPopover = (props) => {
+  const {
+    rootId,
+    label,
+    hideLabelFromVision,
+    help,
+    placeholder,
+    kind,
+    types,
+    perPage,
+    inputDelayMs,
+    excludeCurrentPost,
+    uniqueItems,
+    maxItems,
+    groupByType: groupByType2,
+    fetchOnOpen,
+    filter,
+    request,
+    renderSuggestion,
+    renderGroupHeading,
+    icons,
+    disableTypeFilter,
+    showUrl,
+    value,
+    onChange,
+    labels
+  } = props;
+  const [open, setOpen] = useState(false);
+  const inputRef = useRef(null);
+  const popoverBodyRef = useRef(null);
+  const clearQueryRef = useRef(null);
+  const controller = useContentPickerController({
+    kind,
+    types,
+    perPage,
+    inputDelayMs,
+    excludeCurrentPost,
+    uniqueItems,
+    maxItems,
+    groupByType: groupByType2,
+    filter,
+    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,
+        label,
+        hideLabelFromVision,
+        help,
+        disabled,
+        open: open && !disabled,
+        listboxId,
+        activeOptionId,
+        labels
+      }
+    ),
+    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-content-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,
+                groups: controller.groups,
+                suggestions: controller.suggestions,
+                kind,
+                loading: controller.loading,
+                fetchingMore: controller.fetchingMore,
+                hasMore: controller.hasMore,
+                error: controller.error,
+                query: controller.debouncedQuery,
+                highlightedIndex: controller.highlightedIndex,
+                selectedKeys,
+                icons,
+                labels,
+                showUrl: showUrl ?? true,
+                headerSlot: !disableTypeFilter && types && types.length > 1 ? /* @__PURE__ */ jsx(
+                  TypeFilter,
+                  {
+                    types,
+                    kind,
+                    active: controller.activeTypeFilter,
+                    onChange: controller.setActiveTypeFilter
+                  }
+                ) : null,
+                renderSuggestion,
+                renderGroupHeading,
+                onHover: (i) => controller.setHighlightedIndex(i),
+                onSelect: (item) => controller.select(item),
+                onLoadMore: () => controller.loadMore()
+              }
+            )
+          }
+        ) })
+      }
+    ) : null
+  ] });
+};
+var ContentPickerInline = (props) => {
+  const {
+    rootId,
+    label,
+    hideLabelFromVision,
+    help,
+    placeholder,
+    kind,
+    types,
+    perPage,
+    inputDelayMs,
+    excludeCurrentPost,
+    uniqueItems,
+    maxItems,
+    groupByType: groupByType2,
+    fetchOnOpen,
+    filter,
+    request,
+    renderSuggestion,
+    renderGroupHeading,
+    icons,
+    disableTypeFilter,
+    showUrl,
+    value,
+    onChange,
+    labels
+  } = props;
+  const inputRef = useRef(null);
+  const clearQueryRef = useRef(null);
+  const controller = useContentPickerController({
+    kind,
+    types,
+    perPage,
+    inputDelayMs,
+    excludeCurrentPost,
+    uniqueItems,
+    maxItems,
+    groupByType: groupByType2,
+    filter,
+    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,
+        label,
+        hideLabelFromVision,
+        help,
+        disabled,
+        open: shouldShowList,
+        listboxId,
+        activeOptionId,
+        labels
+      }
+    ),
+    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,
+        groups: controller.groups,
+        suggestions: controller.suggestions,
+        kind,
+        loading: controller.loading,
+        fetchingMore: controller.fetchingMore,
+        hasMore: controller.hasMore,
+        error: controller.error,
+        query: controller.debouncedQuery,
+        highlightedIndex: controller.highlightedIndex,
+        selectedKeys,
+        icons,
+        labels,
+        showUrl: showUrl ?? true,
+        headerSlot: !disableTypeFilter && types && types.length > 1 ? /* @__PURE__ */ jsx(
+          TypeFilter,
+          {
+            types,
+            kind,
+            active: controller.activeTypeFilter,
+            onChange: controller.setActiveTypeFilter
+          }
+        ) : null,
+        renderSuggestion,
+        renderGroupHeading,
+        onHover: (i) => controller.setHighlightedIndex(i),
+        onSelect: (item) => controller.select(item),
+        onLoadMore: () => controller.loadMore()
+      }
+    ) }) : null
+  ] });
+};
+var Pill2 = styled.span`
+	display: inline-flex;
+	align-items: center;
+	padding: 1px 6px;
+	background: transparent;
+	color: ${tokens.gray600};
+	border: 1px solid ${tokens.gray300};
+	border-radius: 999px;
+	font-size: 10px;
+	font-weight: ${tokens.fontWeightBold};
+	letter-spacing: 0.04em;
+	text-transform: uppercase;
+	white-space: nowrap;
+	line-height: 1.6;
+`;
+var TypeBadge = ({ type, kind, label }) => /* @__PURE__ */ jsx(Pill2, { children: label ?? humanizeType(type, kind) });
+var SelectedItem = ({
+  item,
+  index,
+  total,
+  orderable,
+  showTypeBadge,
+  icons,
+  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 isTrash = item.missing === "trash";
+  const missingLabel = labels.missing ?? __("This item is no longer available.", "valu-block-components");
+  const trashLabel = labels.statusTrash ?? __("This item is in the trash.", "valu-block-components");
+  const removeLabel = labels.remove ? labels.remove : sprintf(
+    /* translators: %s: item title */
+    __("Remove %s", "valu-block-components"),
+    item.title
+  );
+  const moveUpLabel = labels.moveUp ? labels.moveUp : sprintf(
+    /* translators: %s: item title */
+    __("Move %s up", "valu-block-components"),
+    item.title
+  );
+  const moveDownLabel = labels.moveDown ? labels.moveDown : sprintf(
+    /* translators: %s: item title */
+    __("Move %s down", "valu-block-components"),
+    item.title
+  );
+  const hasAbnormalStatus = item.status && item.status !== "publish";
+  const resolvedIcon = resolveItemIcon(item, icons);
+  const hasThumbImage = Boolean(item.thumbnailUrl) && !isMissing && !isTrash;
+  const isAvatar = item.kind === "user" && hasThumbImage;
+  const hasVisual = isMissing || isTrash || hasThumbImage || Boolean(resolvedIcon);
+  return /* @__PURE__ */ jsxs(
+    SelectedRow,
+    {
+      ref: setNodeRef,
+      style,
+      dragging: isDragging,
+      missing: isMissing || isTrash,
+      "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,
+        hasVisual ? /* @__PURE__ */ jsx(
+          Thumb,
+          {
+            hasImage: hasThumbImage && !isAvatar,
+            avatar: isAvatar,
+            missing: isMissing || isTrash,
+            children: isMissing || isTrash ? /* @__PURE__ */ jsx(Icon, { icon: caution, size: 22 }) : hasThumbImage ? /* @__PURE__ */ jsx("img", { src: item.thumbnailUrl, alt: "", loading: "lazy" }) : resolvedIcon ? /* @__PURE__ */ jsx(Icon, { icon: resolvedIcon, size: 22 }) : null
+          }
+        ) : null,
+        render ? render(item) : /* @__PURE__ */ jsx(ItemBody, { children: /* @__PURE__ */ jsx(PrimaryText, { muted: isMissing || isTrash, title: item.title, children: isMissing ? missingLabel : isTrash ? trashLabel : item.title }) }),
+        !isMissing && showTypeBadge ? /* @__PURE__ */ jsx(TypeBadge, { type: item.type, kind: item.kind }) : null,
+        !isMissing && hasAbnormalStatus ? /* @__PURE__ */ jsx(StatusBadge, { status: item.status }) : 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 entityKindFor = (kind) => {
+  if (kind === "post") return "postType";
+  if (kind === "term") return "taxonomy";
+  return "root";
+};
+var entityNameFor = (kind, type) => {
+  if (kind === "user") return "user";
+  return type;
+};
+var useResolvedItems = (value) => {
+  const distinctTypes = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const item of value) {
+      const key = `${item.kind}:${item.type}`;
+      const bucket = map.get(key);
+      if (bucket) bucket.ids.push(item.id);
+      else map.set(key, { kind: item.kind, ids: [item.id] });
+    }
+    return Array.from(map.entries()).map(([key, v]) => ({ key, ...v }));
+  }, [value]);
+  const records = useSelect(
+    (select) => {
+      const core = select(store);
+      const out = {};
+      for (const item of value) {
+        const kindKey = entityKindFor(item.kind);
+        const nameKey = entityNameFor(item.kind, item.type);
+        const record = core.getEntityRecord(kindKey, nameKey, item.id);
+        const resolved = core.hasFinishedResolution("getEntityRecord", [
+          kindKey,
+          nameKey,
+          item.id
+        ]);
+        out[`${item.kind}:${item.type}:${item.id}`] = {
+          record: record ?? null,
+          resolved
+        };
+      }
+      return out;
+    },
+    [value, distinctTypes]
+  );
+  return useMemo(
+    () => value.map((item) => {
+      const resolvedEntry = records[`${item.kind}:${item.type}:${item.id}`];
+      if (!resolvedEntry) return item;
+      const { record, resolved } = resolvedEntry;
+      if (!resolved) {
+        return item;
+      }
+      if (!record) {
+        return { ...item, missing: "deleted" };
+      }
+      if (record.status === "trash") {
+        return { ...item, missing: "trash", status: "trash" };
+      }
+      const freshTitle = decodeTitle(record.title) || (record.name ? decodeTitle(record.name) : "");
+      return {
+        ...item,
+        title: freshTitle || item.title,
+        status: record.status ?? item.status,
+        url: record.link ?? item.url
+      };
+    }),
+    [value, records]
+  );
+};
+var SelectedList = ({
+  value,
+  orderable,
+  maxItems,
+  labels,
+  onChange,
+  renderSelected,
+  showHeader = true,
+  showTypeBadge,
+  icons
+}) => {
+  const resolved = useResolvedItems(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,
+      showTypeBadge,
+      icons,
+      labels,
+      onRemove: () => remove(item.key),
+      onMoveUp: index > 0 ? () => reorder(index, index - 1) : void 0,
+      onMoveDown: index < resolved.length - 1 ? () => reorder(index, index + 1) : void 0,
+      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 defaultTypesFor = (kind) => {
+  if (kind === "post") return ["post", "page"];
+  if (kind === "term") return ["category", "post_tag"];
+  return [];
+};
+var makeQueryClient = () => new QueryClient({
+  defaultOptions: {
+    queries: { retry: 1, refetchOnWindowFocus: false }
+  }
+});
+var ContentPicker = ({
+  label,
+  hideLabelFromVision = false,
+  help,
+  kind = "post",
+  types,
+  variant = "popover",
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  maxItems = Infinity,
+  orderable,
+  placeholder,
+  perPage,
+  inputDelayMs = 250,
+  fetchOnOpen = false,
+  excludeCurrentPost = true,
+  uniqueItems = true,
+  groupByType: groupByType2,
+  showTypeBadge,
+  icons,
+  disableTypeFilter,
+  showUrl,
+  filter,
+  request,
+  renderSuggestion,
+  renderSelected,
+  renderGroupHeading,
+  labels = DEFAULT_LABELS,
+  className,
+  id
+}) => {
+  const reactId = useId();
+  const rootId = id ?? `valu-cp-${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 effectiveTypes = types ?? defaultTypesFor(kind);
+  const effectivePerPage = perPage ?? (variant === "popover" ? 10 : 20);
+  const effectiveOrderable = orderable ?? (Number.isFinite(maxItems) ? maxItems > 1 : true);
+  const effectiveGroupByType = groupByType2 ?? effectiveTypes.length > 1;
+  const effectiveShowTypeBadge = showTypeBadge ?? effectiveTypes.length > 1;
+  const queryClientRef = useRef(null);
+  if (!queryClientRef.current) queryClientRef.current = makeQueryClient();
+  const showInput = !(Number.isFinite(maxItems) && value.length >= maxItems);
+  const variantProps = useMemo(
+    () => ({
+      rootId,
+      label,
+      hideLabelFromVision,
+      help,
+      placeholder,
+      kind,
+      types: effectiveTypes,
+      perPage: effectivePerPage,
+      inputDelayMs,
+      excludeCurrentPost,
+      uniqueItems,
+      maxItems,
+      groupByType: effectiveGroupByType,
+      fetchOnOpen,
+      filter,
+      request,
+      renderSuggestion,
+      renderGroupHeading,
+      icons,
+      disableTypeFilter,
+      showUrl,
+      value,
+      onChange: handleChange,
+      labels
+    }),
+    [
+      rootId,
+      label,
+      hideLabelFromVision,
+      help,
+      placeholder,
+      kind,
+      effectiveTypes,
+      effectivePerPage,
+      inputDelayMs,
+      excludeCurrentPost,
+      uniqueItems,
+      maxItems,
+      effectiveGroupByType,
+      fetchOnOpen,
+      filter,
+      request,
+      renderSuggestion,
+      renderGroupHeading,
+      icons,
+      disableTypeFilter,
+      showUrl,
+      value,
+      handleChange,
+      labels
+    ]
+  );
+  return /* @__PURE__ */ jsx(EmotionCacheProvider, { children: /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClientRef.current, children: /* @__PURE__ */ jsxs(Root, { id: rootId, className, children: [
+    showInput ? variant === "popover" ? /* @__PURE__ */ jsx(ContentPickerPopover, { ...variantProps }) : /* @__PURE__ */ jsx(ContentPickerInline, { ...variantProps }) : null,
+    /* @__PURE__ */ jsx(
+      SelectedList,
+      {
+        value,
+        orderable: effectiveOrderable && value.length > 1,
+        maxItems,
+        labels,
+        onChange: handleChange,
+        renderSelected,
+        showHeader: value.length > 0,
+        showTypeBadge: effectiveShowTypeBadge,
+        icons
+      }
+    )
+  ] }) }) });
+};
+
+export { ContentPicker };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map