@nkootstra/block-kit 0.3.5 → 0.5.0

package/dist/index.js

@@ -50,12 +50,12 @@ function toViewOutput(view, state, identity) {
 		bot_id: "B00000000",
 		callback_id: view.callback_id ?? "",
 		type: view.type,
-		title: view.title ?? null,
-		close: view.close ?? null,
-		submit: view.submit ?? null,
-		blocks: view.blocks,
+		title: normalizeText(view.title ?? null),
+		close: normalizeText(view.close ?? null),
+		submit: normalizeText(view.submit ?? null),
+		blocks: normalizeBlocks(view.blocks),
 		private_metadata: view.private_metadata ?? "",
-		state: { values: state },
+		state: { values: normalizeState(state) },
 		hash: view.hash ?? "0.0000000000",
 		clear_on_close: view.clear_on_close ?? false,
 		notify_on_close: view.notify_on_close ?? false,
@@ -96,6 +96,7 @@ function normalizeEchoes(entry) {
 	if (out.text !== void 0) out.text = normalizeText(out.text);
 	if (out.placeholder !== void 0) out.placeholder = normalizeText(out.placeholder);
 	if (out.selected_option) out.selected_option = normalizeOption(out.selected_option);
+	if (out.initial_option) out.initial_option = normalizeOption(out.initial_option);
 	if (Array.isArray(out.selected_options)) out.selected_options = out.selected_options.map(normalizeOption);
 	if (typeof out.confirm === "object" && out.confirm !== null) {
 		const confirm = { ...out.confirm };
@@ -112,6 +113,35 @@ function normalizeEchoes(entry) {
 function normalizeState(state) {
 	return Object.fromEntries(Object.entries(state).map(([blockId, elements]) => [blockId, Object.fromEntries(Object.entries(elements).map(([actionId, value]) => [actionId, normalizeEchoes(value)]))]));
 }
+/**
+* Blocks as Slack echoes a stored view: every text object normalized like {@link normalizeText},
+* and an input block's `optional` and `dispatch_action` filled in as `false`.
+*/
+function normalizeBlocks(blocks) {
+	return normalizeBlockNode(blocks);
+}
+function normalizeBlockNode(node) {
+	if (Array.isArray(node)) return node.map(normalizeBlockNode);
+	if (typeof node !== "object" || node === null) return node;
+	const object = node;
+	if ((object.type === "plain_text" || object.type === "mrkdwn") && typeof object.text === "string") return normalizeText(object);
+	const out = Object.fromEntries(Object.entries(object).map(([key, value]) => [key, normalizeBlockNode(value)]));
+	if (object.type === "input") {
+		out.optional ??= false;
+		out.dispatch_action ??= false;
+	}
+	return out;
+}
+/** `enterprise` and `is_enterprise_install`, as every interaction payload carries them. */
+function enterpriseFields(id) {
+	return {
+		enterprise: id.team?.enterprise_id ? {
+			id: id.team.enterprise_id,
+			name: id.team.enterprise_name ?? ""
+		} : null,
+		is_enterprise_install: id.isEnterpriseInstall
+	};
+}
 function buildBlockActionsPayload({ action, state, container, identity }) {
 	const id = resolveIdentity(identity);
 	state = normalizeState(state);
@@ -119,11 +149,7 @@ function buildBlockActionsPayload({ action, state, container, identity }) {
 		type: "block_actions",
 		actions: [normalizeEchoes(action)],
 		team: id.team,
-		enterprise: id.team?.enterprise_id ? {
-			id: id.team.enterprise_id,
-			name: id.team.enterprise_name ?? ""
-		} : null,
-		is_enterprise_install: id.isEnterpriseInstall,
+		...enterpriseFields(id),
 		user: id.user,
 		token: id.token,
 		response_url: id.responseUrl,
@@ -163,6 +189,7 @@ function buildViewSubmissionPayload({ view, state, identity, responseUrls }) {
 	return {
 		type: "view_submission",
 		team: id.team,
+		...enterpriseFields(id),
 		user: {
 			id: id.user.id,
 			name: id.user.name ?? id.user.username ?? "",
@@ -181,6 +208,7 @@ function buildViewClosedPayload({ view, state, identity, isCleared }) {
 	return {
 		type: "view_closed",
 		team: id.team,
+		...enterpriseFields(id),
 		user: {
 			id: id.user.id,
 			name: id.user.name ?? id.user.username ?? "",
@@ -203,7 +231,8 @@ function buildBlockSuggestionPayload({ actionId, blockId, value, container, stat
 		action_id: actionId,
 		block_id: blockId,
 		value,
-		team: id.team
+		team: id.team,
+		...enterpriseFields(id)
 	};
 	if (container.type === "message") return {
 		...base,
@@ -233,6 +262,22 @@ function buildBlockSuggestionPayload({ actionId, blockId, value, container, stat
 }
 //#endregion
 //#region src/icons/index.tsx
+/** Slack's `caret-down`, the filled 20×20 chevron of its button select (Block Kit Builder). */
+function CaretDownIcon$1(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 20 20",
+		width: "20",
+		height: "20",
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ jsx("path", {
+			fill: "currentColor",
+			fillRule: "evenodd",
+			d: "M5.72 7.47a.75.75 0 0 1 1.06 0L10 10.69l3.22-3.22a.75.75 0 1 1 1.06 1.06l-3.75 3.75a.75.75 0 0 1-1.06 0L5.72 8.53a.75.75 0 0 1 0-1.06",
+			clipRule: "evenodd"
+		})
+	});
+}
 function ChevronDownIcon(props) {
 	return /* @__PURE__ */ jsx("svg", {
 		viewBox: "0 0 20 20",
@@ -362,6 +407,38 @@ function ThumbsDownIcon(props) {
 		})
 	});
 }
+/** Slack's `thumbs-up-filled` glyph, shown on a picked feedback button. */
+function ThumbsUpFilledIcon(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 20 20",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ jsx("path", {
+			fill: "currentColor",
+			fillRule: "evenodd",
+			clipRule: "evenodd",
+			d: "M12.997 1.77a2.315 2.315 0 0 0-3.3 1.304 7.5 7.5 0 0 1-1.06 2.052L7.146 7.17A.75.75 0 0 0 7 7.613v9.919a.75.75 0 0 0 .65.743l1.765.237c1.396.188 2.814.142 4.195-.134l.45-.09a4.75 4.75 0 0 0 3.717-3.68l.862-4.092c.395-1.88-1.209-3.576-3.108-3.285l-2.43.373.61-1.832.005-.011.003-.01.386-1.288a2.31 2.31 0 0 0-1.108-2.693M5.75 7.785a.75.75 0 0 0-.75-.75H2.25a.75.75 0 0 0-.735.602l-.015.148v8.096a2.653 2.653 0 0 0 2.653 2.654H5a.75.75 0 0 0 .75-.75z"
+		})
+	});
+}
+/** Slack's `thumbs-down-filled` glyph, shown on a picked feedback button. */
+function ThumbsDownFilledIcon(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 20 20",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ jsx("path", {
+			fill: "currentColor",
+			fillRule: "evenodd",
+			clipRule: "evenodd",
+			d: "M12.997 18.343a2.315 2.315 0 0 1-3.3-1.303 7.5 7.5 0 0 0-1.06-2.052l-1.492-2.045A.75.75 0 0 1 7 12.5V2.58a.75.75 0 0 1 .65-.743L9.415 1.6a12.8 12.8 0 0 1 4.195.135l.45.09a4.75 4.75 0 0 1 3.717 3.68l.862 4.091c.395 1.88-1.209 3.576-3.108 3.285l-2.43-.373.61 1.832.005.012.003.01.386 1.287a2.31 2.31 0 0 1-1.108 2.693M5.75 12.33a.75.75 0 0 1-.75.75H2.25a.75.75 0 0 1-.735-.603L1.5 12.33V4.232a2.653 2.653 0 0 1 2.653-2.653H5a.75.75 0 0 1 .75.75z"
+		})
+	});
+}
 function KebabIcon$1(props) {
 	return /* @__PURE__ */ jsxs("svg", {
 		viewBox: "0 0 20 20",
@@ -664,6 +741,38 @@ function EllipsisVerticalIcon(props) {
 		})
 	});
 }
+/** Slack's `table` glyph, from a chart's "View as table" menu item. */
+function TableIcon(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 20 20",
+		width: "15",
+		height: "15",
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ jsx("path", {
+			fill: "currentColor",
+			fillRule: "evenodd",
+			d: "M15.5 4h-11A1.5 1.5 0 0 0 3 5.5V7h14V5.5A1.5 1.5 0 0 0 15.5 4M17 8.5H3v3h14zm-14 6V13h14v1.5a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 3 14.5m1.5-12a3 3 0 0 0-3 3v9a3 3 0 0 0 3 3h11a3 3 0 0 0 3-3v-9a3 3 0 0 0-3-3z",
+			clipRule: "evenodd"
+		})
+	});
+}
+/** Slack's `image` glyph, from a chart's "Copy as image" menu item. */
+function ImageIcon(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 20 20",
+		width: "15",
+		height: "15",
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ jsx("path", {
+			fill: "currentColor",
+			fillRule: "evenodd",
+			d: "M16 3.5H4A1.5 1.5 0 0 0 2.5 5v7.287l1.664-1.536a1.25 1.25 0 0 1 1.662-.031l2.635 2.259 4.146-4.147a1.25 1.25 0 0 1 1.79.023l3.103 3.267V5A1.5 1.5 0 0 0 16 3.5M17.5 15c0-.45-.173-.882-.483-1.208l-3.53-3.718-4.13 4.129a1.25 1.25 0 0 1-1.697.065l-2.642-2.264-2.024 1.869c-.315.29-.494.699-.494 1.127A1.5 1.5 0 0 0 4 16.5h12a1.5 1.5 0 0 0 1.5-1.5M1 15a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V5a3 3 0 0 0-3-3H4a3 3 0 0 0-3 3zm7-7a1 1 0 1 0 0-2 1 1 0 0 0 0 2m0 1.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5",
+			clipRule: "evenodd"
+		})
+	});
+}
 //#endregion
 //#region src/validation.ts
 /**
@@ -899,6 +1008,7 @@ const BlockKitContext = createContext({
 	errors: {},
 	state: {},
 	setValue: noop,
+	seedValue: noop,
 	dispatch: noop,
 	identity: {},
 	setContainer: noop,
@@ -1027,7 +1137,7 @@ function BlockKitProvider(props) {
 	const setValue = useCallback((blockId, actionId, value) => {
 		const block = { ...stateRef.current[blockId] };
 		if (value === void 0) delete block[actionId];
-		else block[actionId] = value;
+		else block[actionId] = normalizeEchoes(value);
 		const next = {
 			...stateRef.current,
 			[blockId]: block
@@ -1036,14 +1146,17 @@ function BlockKitProvider(props) {
 		setState(next);
 		onStateChange?.(next);
 	}, [onStateChange]);
+	const seedValue = useCallback((blockId, actionId, value) => {
+		if (stateRef.current[blockId]?.[actionId] === void 0) setValue(blockId, actionId, value);
+	}, [setValue]);
 	const setContainer = useCallback((container) => {
 		containerRef.current = container;
 	}, []);
 	const dispatch = useCallback((action, scope) => {
-		const full = {
+		const full = normalizeEchoes({
 			...action,
 			action_ts: action.action_ts ?? actionTs()
-		};
+		});
 		const message = scope?.message;
 		onAction?.(full, {
 			state: stateRef.current,
@@ -1103,6 +1216,7 @@ function BlockKitProvider(props) {
 		timeZone,
 		state,
 		setValue,
+		seedValue,
 		dispatch,
 		identity: identity ?? {},
 		setContainer,
@@ -1125,6 +1239,7 @@ function BlockKitProvider(props) {
 		timeZone,
 		state,
 		setValue,
+		seedValue,
 		dispatch,
 		identity,
 		setContainer,
@@ -5776,7 +5891,7 @@ function UserMention({ id, name }) {
 		type: "user",
 		id
 	}) : void 0;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
 		ref: anchorRef,
 		className: "sbk-mention sbk-mention--user",
 		role: "button",
@@ -5786,7 +5901,7 @@ function UserMention({ id, name }) {
 		"aria-controls": open ? cardId : void 0,
 		onClick: () => setOpen((o) => !o),
 		onKeyDown,
-		children: ["@", name]
+		children: `@${name}`
 	}), profile && typeof document !== "undefined" && createPortal(/* @__PURE__ */ jsxs("div", {
 		ref: cardRef,
 		id: cardId,
@@ -5891,14 +6006,14 @@ function renderNode(node, resolvers, timeZone, emojiSize) {
 			return name ? /* @__PURE__ */ jsx(UserMention, {
 				id: node.id,
 				name
-			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: ["@", node.id] });
+			}) : /* @__PURE__ */ jsx(Fragment$1, { children: `@${node.id}` });
 		}
 		case "usergroup": {
 			const name = resolvers.usergroup?.(node.id);
-			return name ? /* @__PURE__ */ jsxs(MentionLink, {
+			return name ? /* @__PURE__ */ jsx(MentionLink, {
 				type: "usergroup",
 				id: node.id,
-				children: ["@", name]
+				children: `@${name}`
 			}) : /* @__PURE__ */ jsx("span", {
 				className: "sbk-mention--loading",
 				"aria-label": "Loading user group"
@@ -5906,18 +6021,18 @@ function renderNode(node, resolvers, timeZone, emojiSize) {
 		}
 		case "channel": {
 			const name = resolvers.channel?.(node.id) ?? node.label;
-			return name ? /* @__PURE__ */ jsxs(MentionLink, {
+			return name ? /* @__PURE__ */ jsx(MentionLink, {
 				type: "channel",
 				id: node.id,
-				children: ["#", name]
+				children: `#${name}`
 			}) : /* @__PURE__ */ jsxs("span", {
 				className: "sbk-mention--private",
 				children: [/* @__PURE__ */ jsx(LockIcon, {}), "Private channel"]
 			});
 		}
-		case "broadcast": return /* @__PURE__ */ jsxs("span", {
+		case "broadcast": return /* @__PURE__ */ jsx("span", {
 			className: "sbk-mention--broadcast",
-			children: ["@", node.range]
+			children: `@${node.range}`
 		});
 		case "date": {
 			const text = formatSlackDate(node.timestamp, node.format, { timeZone });
@@ -5982,33 +6097,89 @@ function Text({ text, emojiSize = 22 }) {
 }
 //#endregion
 //#region src/confirm/ConfirmDialog.tsx
-/** Slack's confirmation dialog: blocks the triggering action until the user picks confirm/deny. */
+/**
+* Slack's confirmation dialog (`c-dialog`): blocks the triggering action until the user confirms or
+* denies. Escape, the close button and a click on the overlay all deny.
+*
+* Slack marks it `role="dialog"`; this keeps `alertdialog`, the role WAI-ARIA gives a dialog that
+* interrupts to ask for a confirmation, so screen readers announce its text on open. Focus starts
+* on the deny button, the least destructive choice, stays inside while it's open, and goes back to
+* whatever opened it when it closes.
+*/
 function ConfirmDialog({ confirm, onConfirm, onDeny }) {
 	const { theme } = useBlockKit();
 	const confirmStyle = confirm.style ?? "primary";
+	const titleId = useId();
+	const textId = useId();
+	const dialogRef = useRef(null);
+	const denyRef = useRef(null);
+	useEffect(() => {
+		const opener = document.activeElement;
+		denyRef.current?.focus();
+		return () => {
+			if (opener?.isConnected) opener.focus();
+		};
+	}, []);
+	function onKeyDown(event) {
+		if (event.key === "Escape") {
+			event.stopPropagation();
+			onDeny();
+			return;
+		}
+		if (event.key !== "Tab") return;
+		const buttons = [...dialogRef.current?.querySelectorAll("button") ?? []];
+		const first = buttons[0];
+		const last = buttons.at(-1);
+		if (event.shiftKey && document.activeElement === first) {
+			event.preventDefault();
+			last?.focus();
+		} else if (!event.shiftKey && document.activeElement === last) {
+			event.preventDefault();
+			first?.focus();
+		}
+	}
 	const node = /* @__PURE__ */ jsx("div", {
 		className: "sbk-confirm__overlay",
 		role: "presentation",
 		"data-theme": theme,
 		onClick: onDeny,
 		children: /* @__PURE__ */ jsxs("div", {
+			ref: dialogRef,
 			className: "sbk-confirm",
 			role: "alertdialog",
 			"aria-modal": "true",
-			"aria-label": confirm.title?.text,
+			"aria-labelledby": confirm.title ? titleId : void 0,
+			"aria-label": confirm.title ? void 0 : confirm.confirm?.text ?? "Confirm",
+			"aria-describedby": textId,
+			onKeyDown,
 			onClick: (event) => event.stopPropagation(),
 			children: [
-				confirm.title && /* @__PURE__ */ jsx("h2", {
-					className: "sbk-confirm__title",
-					children: confirm.title.text
+				/* @__PURE__ */ jsxs("div", {
+					className: "sbk-confirm__header",
+					children: [confirm.title && /* @__PURE__ */ jsx("h2", {
+						id: titleId,
+						className: "sbk-confirm__title",
+						children: confirm.title.text
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "sbk-confirm__close",
+						"aria-label": "Close",
+						onClick: onDeny,
+						children: /* @__PURE__ */ jsx(CloseIcon, {
+							width: "20",
+							height: "20"
+						})
+					})]
 				}),
 				/* @__PURE__ */ jsx("div", {
+					id: textId,
 					className: "sbk-confirm__text",
 					children: /* @__PURE__ */ jsx(Text, { text: confirm.text })
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "sbk-confirm__actions",
 					children: [/* @__PURE__ */ jsx("button", {
+						ref: denyRef,
 						type: "button",
 						className: "sbk-confirm__button sbk-confirm__button--deny",
 						onClick: onDeny,
@@ -6170,242 +6341,21 @@ function Checkboxes({ element, blockId }) {
 	});
 }
 //#endregion
-//#region src/elements/calendar/Calendar.tsx
-function pad(n) {
-	return String(n).padStart(2, "0");
-}
-function toISO(y, m, d) {
-	return `${y}-${pad(m + 1)}-${pad(d)}`;
-}
-function todayISO() {
-	const now = /* @__PURE__ */ new Date();
-	return toISO(now.getFullYear(), now.getMonth(), now.getDate());
-}
-function Caret({ direction }) {
-	return /* @__PURE__ */ jsx("svg", {
-		viewBox: "0 0 20 20",
-		width: "20",
-		height: "20",
-		"aria-hidden": "true",
-		children: /* @__PURE__ */ jsx("path", {
-			fill: "currentColor",
-			fillRule: "evenodd",
-			d: direction === "left" ? "M12.28 5.22a.75.75 0 0 1 0 1.06L8.56 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0" : "M7.72 14.78a.75.75 0 0 1 0-1.06L11.44 10 7.72 6.28a.75.75 0 0 1 1.06-1.06l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0",
-			clipRule: "evenodd"
-		})
-	});
-}
-/** A month grid matching Slack's `c-date_picker_calendar`: a bordered 7-column grid of 44×42
-* day cells, a ring around today, and solid blue for the selected day. */
-function Calendar({ value, onSelect, onClear }) {
-	const initial = value ? /* @__PURE__ */ new Date(`${value}T00:00:00Z`) : /* @__PURE__ */ new Date();
-	const [year, setYear] = useState(initial.getUTCFullYear());
-	const [month, setMonth] = useState(initial.getUTCMonth());
-	const first = new Date(Date.UTC(year, month, 1));
-	const startWeekday = first.getUTCDay();
-	const daysInMonth = new Date(Date.UTC(year, month + 1, 0)).getUTCDate();
-	const cells = [...Array(startWeekday).fill(null), ...Array.from({ length: daysInMonth }, (_, i) => i + 1)];
-	const today = todayISO();
-	function go(delta) {
-		const d = new Date(Date.UTC(year, month + delta, 1));
-		setYear(d.getUTCFullYear());
-		setMonth(d.getUTCMonth());
-	}
-	const monthLabel = first.toLocaleDateString("en-US", {
-		month: "long",
-		year: "numeric",
-		timeZone: "UTC"
-	});
-	return /* @__PURE__ */ jsxs("div", {
-		className: "sbk-calendar",
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "sbk-calendar__header",
-				children: [
-					/* @__PURE__ */ jsx("button", {
-						type: "button",
-						className: "sbk-calendar__nav",
-						onClick: () => go(-1),
-						"aria-label": "Previous month",
-						children: /* @__PURE__ */ jsx(Caret, { direction: "left" })
-					}),
-					/* @__PURE__ */ jsx("span", {
-						className: "sbk-calendar__label",
-						children: monthLabel
-					}),
-					/* @__PURE__ */ jsx("button", {
-						type: "button",
-						className: "sbk-calendar__nav",
-						onClick: () => go(1),
-						"aria-label": "Next month",
-						children: /* @__PURE__ */ jsx(Caret, { direction: "right" })
-					})
-				]
-			}),
-			/* @__PURE__ */ jsx("div", {
-				className: "sbk-calendar__weekdays",
-				children: [
-					"Sun",
-					"Mon",
-					"Tue",
-					"Wed",
-					"Thu",
-					"Fri",
-					"Sat"
-				].map((w) => /* @__PURE__ */ jsx("span", { children: w }, w))
-			}),
-			/* @__PURE__ */ jsx("div", {
-				className: "sbk-calendar__grid",
-				children: cells.map((day, i) => {
-					if (day === null) return /* @__PURE__ */ jsx("span", { className: "sbk-calendar__cell sbk-calendar__cell--empty" }, i);
-					const iso = toISO(year, month, day);
-					const classes = ["sbk-calendar__cell"];
-					if (iso === value) classes.push("sbk-calendar__cell--selected");
-					if (iso === today) classes.push("sbk-calendar__cell--today");
-					return /* @__PURE__ */ jsx("button", {
-						type: "button",
-						className: classes.join(" "),
-						"aria-pressed": iso === value,
-						"aria-current": iso === today ? "date" : void 0,
-						onClick: () => onSelect(iso),
-						children: day
-					}, iso);
-				})
-			}),
-			onClear && value && /* @__PURE__ */ jsx("div", {
-				className: "sbk-calendar__footer",
-				children: /* @__PURE__ */ jsx("button", {
-					type: "button",
-					className: "sbk-calendar__clear",
-					onClick: onClear,
-					children: "Clear selection"
-				})
-			})
-		]
-	});
-}
-//#endregion
-//#region src/elements/dateFormat.ts
-/** "1st", "2nd", "3rd", "11th"… as Slack writes the day in a long date ("January 1st, 2026"). */
-function ordinal$1(day) {
-	if (day % 10 === 1 && day !== 11) return `${day}st`;
-	if (day % 10 === 2 && day !== 12) return `${day}nd`;
-	if (day % 10 === 3 && day !== 13) return `${day}rd`;
-	return `${day}th`;
-}
-/** Slack names time zones by their Windows display name (minus the UTC offset), not the IANA id. */
-const TIME_ZONE_LABELS = {
-	"Europe/Amsterdam": "Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna",
-	"Europe/Berlin": "Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna",
-	"Europe/Zurich": "Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna",
-	"Europe/Rome": "Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna",
-	"Europe/Stockholm": "Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna",
-	"Europe/Vienna": "Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna",
-	"Europe/Brussels": "Brussels, Copenhagen, Madrid, Paris",
-	"Europe/Copenhagen": "Brussels, Copenhagen, Madrid, Paris",
-	"Europe/Madrid": "Brussels, Copenhagen, Madrid, Paris",
-	"Europe/Paris": "Brussels, Copenhagen, Madrid, Paris",
-	"Europe/Belgrade": "Belgrade, Bratislava, Budapest, Ljubljana, Prague",
-	"Europe/Budapest": "Belgrade, Bratislava, Budapest, Ljubljana, Prague",
-	"Europe/Prague": "Belgrade, Bratislava, Budapest, Ljubljana, Prague",
-	"Europe/Warsaw": "Sarajevo, Skopje, Warsaw, Zagreb",
-	"Europe/Dublin": "Dublin, Edinburgh, Lisbon, London",
-	"Europe/Lisbon": "Dublin, Edinburgh, Lisbon, London",
-	"Europe/London": "Dublin, Edinburgh, Lisbon, London",
-	"Europe/Athens": "Athens, Bucharest",
-	"Europe/Bucharest": "Athens, Bucharest",
-	"Europe/Helsinki": "Helsinki, Kyiv, Riga, Sofia, Tallinn, Vilnius",
-	"Europe/Kyiv": "Helsinki, Kyiv, Riga, Sofia, Tallinn, Vilnius",
-	"Europe/Istanbul": "Istanbul",
-	"Europe/Moscow": "Moscow, St. Petersburg",
-	"America/New_York": "Eastern Time (US and Canada)",
-	"America/Chicago": "Central Time (US and Canada)",
-	"America/Denver": "Mountain Time (US and Canada)",
-	"America/Phoenix": "Arizona",
-	"America/Los_Angeles": "Pacific Time (US and Canada)",
-	"America/Anchorage": "Alaska",
-	"Pacific/Honolulu": "Hawaii",
-	"America/Halifax": "Atlantic Time (Canada)",
-	"America/Sao_Paulo": "Brasilia",
-	"Asia/Dubai": "Abu Dhabi, Muscat",
-	"Asia/Kolkata": "Chennai, Kolkata, Mumbai, New Delhi",
-	"Asia/Shanghai": "Beijing, Chongqing, Hong Kong, Urumqi",
-	"Asia/Hong_Kong": "Beijing, Chongqing, Hong Kong, Urumqi",
-	"Asia/Singapore": "Kuala Lumpur, Singapore",
-	"Asia/Tokyo": "Osaka, Sapporo, Tokyo",
-	"Australia/Sydney": "Canberra, Melbourne, Sydney",
-	"Australia/Melbourne": "Canberra, Melbourne, Sydney",
-	"Pacific/Auckland": "Auckland, Wellington"
-};
-/** The label Slack shows under a datetimepicker; unknown zones fall back to their IANA id. */
-function timeZoneLabel(timeZone) {
-	return TIME_ZONE_LABELS[timeZone] ?? timeZone;
-}
-/** A timestamp's wall-clock date ("2026-01-01") and time ("11:00") in `timeZone`. */
-function wallClock(ts, timeZone) {
-	const parts = new Intl.DateTimeFormat("en-US", {
-		timeZone,
-		year: "numeric",
-		month: "2-digit",
-		day: "2-digit",
-		hour: "2-digit",
-		minute: "2-digit",
-		hourCycle: "h23"
-	}).formatToParts(/* @__PURE__ */ new Date(ts * 1e3));
-	const get = (type) => parts.find((p) => p.type === type)?.value ?? "00";
-	return {
-		date: `${get("year")}-${get("month")}-${get("day")}`,
-		time: `${get("hour")}:${get("minute")}`
-	};
-}
-/** The timestamp of a wall-clock date and time in `timeZone`. Around a daylight saving change it
-* resolves like JavaScript's `Date`: a time the clocks skip moves forward by the gap, and a time
-* they repeat takes its first occurrence. */
-function fromWallClock(date, time, timeZone) {
-	const asUtc = Date.parse(`${date}T${time}:00Z`) / 1e3;
-	const offsetAt = (ts) => {
-		const wall = wallClock(ts, timeZone);
-		return Date.parse(`${wall.date}T${wall.time}:00Z`) / 1e3 - ts;
-	};
-	const before = asUtc - offsetAt(asUtc - 86400);
-	const matches = [before, asUtc - offsetAt(asUtc + 86400)].filter((ts) => {
-		const wall = wallClock(ts, timeZone);
-		return wall.date === date && wall.time === time;
-	});
-	return matches.length > 0 ? Math.min(...matches) : before;
-}
-//#endregion
-//#region src/elements/inputBlockContext.ts
-/** True while rendering the element of an `input` block, where Slack lays some elements out differently. */
-const InputBlockContext = createContext(false);
-function useInInputBlock() {
-	return useContext(InputBlockContext);
-}
-/** The id of the error shown under an `input` block's element, while it has one. */
-const InputErrorContext = createContext(void 0);
-/**
-* Props for the element's focusable control: an `input` block with an error marks it invalid,
-* which also gives it Slack's red focus ring, and describes it with the error text.
-*/
-function useInvalidProps() {
-	const errorId = useContext(InputErrorContext);
-	return errorId ? {
-		"aria-invalid": true,
-		"aria-describedby": errorId
-	} : {};
-}
-//#endregion
 //#region src/elements/Popover.tsx
 /** Space between the anchor and the popover, as in Slack's menus. */
 const DEFAULT_GAP = 4;
+/** The least space kept between a popover and the window's left and right edges. */
+const EDGE = 8;
 /**
 * The layer a menu or calendar opens in. Slack mounts its popovers at the top of the page, so a
 * message list, a modal body or a carousel never clips them; this portals to `<body>` the same way
 * and keeps the popover pinned to its anchor as the page scrolls or resizes, or its content does.
+* Where keeping its alignment would run it past the window's left or right edge (a narrow phone
+* screen), it shifts just enough to stay inside.
 * The layer is as wide as the anchor, so a child sized `width: 100%` matches the control it opened
 * from.
 */
-function Popover({ anchorRef, onDismiss, gap = DEFAULT_GAP, children }) {
+function Popover({ anchorRef, onDismiss, gap = DEFAULT_GAP, offsetX = 0, onPlaced, children }) {
 	const { theme } = useBlockKit();
 	const layerRef = useRef(null);
 	const [position, setPosition] = useState(null);
@@ -6425,10 +6375,20 @@ function Popover({ anchorRef, onDismiss, gap = DEFAULT_GAP, children }) {
 			const fitsBelow = below + height <= window.innerHeight;
 			const fitsAbove = above >= 0;
 			let top = !fitsBelow && fitsAbove ? above : below;
-			if (!fitsBelow && !fitsAbove) top = Math.max(gap, Math.min(below, window.innerHeight - height - gap));
+			if (!fitsBelow && !fitsAbove) top = Math.max(DEFAULT_GAP, Math.min(below, window.innerHeight - height - DEFAULT_GAP));
+			layer.style.width = `${a.width}px`;
+			const content = layer.firstElementChild?.getBoundingClientRect();
+			const layerLeft = layer.getBoundingClientRect().left;
+			let left = a.left + offsetX;
+			if (content) {
+				const contentLeft = left + content.left - layerLeft;
+				const room = document.documentElement.clientWidth - EDGE;
+				const shift = Math.max(EDGE - contentLeft, Math.min(0, room - (contentLeft + content.width)));
+				left += shift;
+			}
 			setPosition({
 				top,
-				left: a.left,
+				left,
 				width: a.width
 			});
 		}
@@ -6443,7 +6403,18 @@ function Popover({ anchorRef, onDismiss, gap = DEFAULT_GAP, children }) {
 			window.removeEventListener("resize", place);
 			resize?.disconnect();
 		};
-	}, [anchorRef, gap]);
+	}, [
+		anchorRef,
+		gap,
+		offsetX
+	]);
+	const placed = position !== null;
+	const notified = useRef(false);
+	useEffect(() => {
+		if (!placed || notified.current) return;
+		notified.current = true;
+		onPlaced?.();
+	}, [placed]);
 	useEffect(() => {
 		function onDocDown(e) {
 			const target = e.target;
@@ -6467,237 +6438,1697 @@ function Popover({ anchorRef, onDismiss, gap = DEFAULT_GAP, children }) {
 	}), document.body);
 }
 //#endregion
-//#region src/elements/DatePicker.tsx
+//#region src/elements/timeZoneNames.ts
+/** The distinct names, referenced by index below. */
+const NAMES = [
+	"Abu Dhabi, Muscat",
+	"Adelaide",
+	"Alaska",
+	"Aleutian Islands",
+	"Amman",
+	"Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna",
+	"Anadyr, Petropavlovsk-Kamchatsky",
+	"Araguaina",
+	"Arizona, Vancouver",
+	"Astana",
+	"Astrakhan, Ulyanovsk, Volgograd",
+	"Asuncion",
+	"Athens, Bucharest",
+	"Atlantic Time (Canada)",
+	"Auckland, Wellington",
+	"Azores",
+	"Baghdad",
+	"Baja California",
+	"Baku",
+	"Bangkok, Hanoi, Jakarta",
+	"Barnaul, Gorno-Altaysk",
+	"Beijing, Chongqing, Hong Kong SAR, Urumqi",
+	"Beirut",
+	"Belgrade, Bratislava, Budapest, Ljubljana, Prague",
+	"Bogota, Lima, Quito",
+	"Bougainville Island",
+	"Brasilia",
+	"Brisbane",
+	"Brussels, Copenhagen, Madrid, Paris",
+	"Cabo Verde Islands",
+	"Cairo",
+	"Canberra, Melbourne, Sydney",
+	"Caracas",
+	"Casablanca",
+	"Cayenne, Fortaleza",
+	"Central America",
+	"Central Time (US and Canada)",
+	"Chatham Islands",
+	"Chennai, Kolkata, Mumbai, New Delhi",
+	"Chetumal",
+	"Chihuahua",
+	"Chita",
+	"Chokurdakh",
+	"City of Buenos Aires",
+	"Cuiaba",
+	"Damascus",
+	"Darwin",
+	"Dhaka",
+	"Dublin, Edinburgh, Lisbon, London",
+	"Easter Island",
+	"Eastern Time (US and Canada)",
+	"Ekaterinburg",
+	"Eucla",
+	"Fernando de Noronha",
+	"Fiji Islands",
+	"Gaza, Hebron",
+	"Georgetown, La Paz, Manaus, San Juan",
+	"Greenland",
+	"Guadalajara, Mexico City, Monterrey",
+	"Guam, Port Moresby",
+	"Haiti",
+	"Harare, Pretoria",
+	"Havana",
+	"Hawaii",
+	"Helsinki, Kyiv, Riga, Sofia, Tallinn, Vilnius",
+	"Hobart",
+	"Hovd",
+	"Indiana (East)",
+	"Irkutsk",
+	"Islamabad, Karachi",
+	"Istanbul",
+	"Izhevsk, Samara",
+	"Jerusalem",
+	"Kabul",
+	"Kaliningrad",
+	"Kathmandu",
+	"Kiritimati Island",
+	"Krasnoyarsk",
+	"Kuala Lumpur, Singapore",
+	"Kuwait, Riyadh",
+	"La Paz, Mazatlan",
+	"Lord Howe Island",
+	"Magadan",
+	"Marquesas Islands",
+	"Midway Island, American Samoa",
+	"Minsk",
+	"Monrovia, Reykjavik",
+	"Montevideo",
+	"Moscow, St. Petersburg",
+	"Mountain Time (US and Canada), Navajo Nation",
+	"Nairobi",
+	"Newfoundland",
+	"Norfolk Island",
+	"Novosibirsk",
+	"Nuku'alofa",
+	"Osaka, Sapporo, Tokyo",
+	"Pacific Time (US and Canada)",
+	"Perth",
+	"Port Louis",
+	"Pyongyang",
+	"Saint Pierre and Miquelon",
+	"Sakhalin",
+	"Salvador",
+	"Samoa",
+	"Santiago",
+	"Sarajevo, Skopje, Warsaw, Zagreb",
+	"Saskatchewan",
+	"Seoul",
+	"Solomon Islands, New Caledonia",
+	"Sri Jayawardenepura",
+	"Taipei",
+	"Tashkent, Ashgabat",
+	"Tbilisi",
+	"Tehran",
+	"Tomsk",
+	"Tripoli",
+	"Turks and Caicos",
+	"Ulaanbaatar",
+	"Vladivostok",
+	"West Central Africa",
+	"Windhoek",
+	"Yakutsk",
+	"Yangon (Rangoon)",
+	"Yerevan"
+];
+/** IANA zone → index into NAMES. */
+const ZONES = {
+	"Africa/Abidjan": 86,
+	"Africa/Accra": 86,
+	"Africa/Addis_Ababa": 88,
+	"Africa/Algiers": 119,
+	"Africa/Asmara": 88,
+	"Africa/Asmera": 88,
+	"Africa/Bamako": 86,
+	"Africa/Bangui": 119,
+	"Africa/Banjul": 86,
+	"Africa/Bissau": 86,
+	"Africa/Blantyre": 61,
+	"Africa/Brazzaville": 119,
+	"Africa/Bujumbura": 61,
+	"Africa/Cairo": 30,
+	"Africa/Casablanca": 33,
+	"Africa/Ceuta": 5,
+	"Africa/Conakry": 86,
+	"Africa/Dakar": 86,
+	"Africa/Dar_es_Salaam": 88,
+	"Africa/Djibouti": 88,
+	"Africa/Douala": 119,
+	"Africa/El_Aaiun": 33,
+	"Africa/Freetown": 86,
+	"Africa/Gaborone": 61,
+	"Africa/Harare": 61,
+	"Africa/Johannesburg": 61,
+	"Africa/Juba": 88,
+	"Africa/Kampala": 88,
+	"Africa/Khartoum": 88,
+	"Africa/Kigali": 61,
+	"Africa/Kinshasa": 119,
+	"Africa/Lagos": 119,
+	"Africa/Libreville": 119,
+	"Africa/Lome": 86,
+	"Africa/Luanda": 119,
+	"Africa/Lubumbashi": 61,
+	"Africa/Lusaka": 61,
+	"Africa/Malabo": 119,
+	"Africa/Maputo": 61,
+	"Africa/Maseru": 61,
+	"Africa/Mbabane": 61,
+	"Africa/Mogadishu": 88,
+	"Africa/Monrovia": 86,
+	"Africa/Nairobi": 90,
+	"Africa/Ndjamena": 119,
+	"Africa/Niamey": 119,
+	"Africa/Nouakchott": 86,
+	"Africa/Ouagadougou": 86,
+	"Africa/Porto-Novo": 119,
+	"Africa/Sao_Tome": 86,
+	"Africa/Tripoli": 115,
+	"Africa/Tunis": 119,
+	"Africa/Windhoek": 120,
+	"America/Adak": 3,
+	"America/Anchorage": 2,
+	"America/Anguilla": 56,
+	"America/Antigua": 56,
+	"America/Araguaina": 43,
+	"America/Argentina/Buenos_Aires": 43,
+	"America/Argentina/Catamarca": 43,
+	"America/Argentina/Cordoba": 43,
+	"America/Argentina/Jujuy": 43,
+	"America/Argentina/La_Rioja": 43,
+	"America/Argentina/Mendoza": 43,
+	"America/Argentina/Rio_Gallegos": 43,
+	"America/Argentina/Salta": 43,
+	"America/Argentina/San_Juan": 43,
+	"America/Argentina/San_Luis": 43,
+	"America/Argentina/Tucuman": 43,
+	"America/Argentina/Ushuaia": 43,
+	"America/Aruba": 56,
+	"America/Asuncion": 11,
+	"America/Atikokan": 24,
+	"America/Bahia": 102,
+	"America/Bahia_Banderas": 58,
+	"America/Barbados": 56,
+	"America/Belem": 43,
+	"America/Belize": 35,
+	"America/Blanc-Sablon": 56,
+	"America/Boa_Vista": 56,
+	"America/Bogota": 24,
+	"America/Boise": 89,
+	"America/Buenos_Aires": 43,
+	"America/Cambridge_Bay": 89,
+	"America/Campo_Grande": 44,
+	"America/Cancun": 39,
+	"America/Caracas": 32,
+	"America/Catamarca": 43,
+	"America/Cayenne": 34,
+	"America/Cayman": 24,
+	"America/Chicago": 36,
+	"America/Chihuahua": 40,
+	"America/Coral_Harbour": 24,
+	"America/Cordoba": 43,
+	"America/Costa_Rica": 106,
+	"America/Creston": 8,
+	"America/Cuiaba": 44,
+	"America/Curacao": 56,
+	"America/Danmarkshavn": 86,
+	"America/Dawson": 96,
+	"America/Dawson_Creek": 8,
+	"America/Denver": 89,
+	"America/Detroit": 50,
+	"America/Dominica": 56,
+	"America/Edmonton": 89,
+	"America/Eirunepe": 24,
+	"America/El_Salvador": 106,
+	"America/Fort_Nelson": 8,
+	"America/Fortaleza": 7,
+	"America/Glace_Bay": 13,
+	"America/Godthab": 57,
+	"America/Goose_Bay": 13,
+	"America/Grand_Turk": 116,
+	"America/Grenada": 56,
+	"America/Guadeloupe": 56,
+	"America/Guatemala": 106,
+	"America/Guayaquil": 24,
+	"America/Guyana": 56,
+	"America/Halifax": 13,
+	"America/Havana": 62,
+	"America/Hermosillo": 8,
+	"America/Indiana/Indianapolis": 67,
+	"America/Indiana/Knox": 36,
+	"America/Indiana/Marengo": 50,
+	"America/Indiana/Petersburg": 50,
+	"America/Indiana/Tell_City": 36,
+	"America/Indiana/Vevay": 50,
+	"America/Indiana/Vincennes": 50,
+	"America/Indiana/Winamac": 50,
+	"America/Indianapolis": 50,
+	"America/Inuvik": 89,
+	"America/Iqaluit": 50,
+	"America/Jamaica": 24,
+	"America/Jujuy": 43,
+	"America/Juneau": 2,
+	"America/Kentucky/Louisville": 50,
+	"America/Kentucky/Monticello": 50,
+	"America/Kralendijk": 56,
+	"America/La_Paz": 56,
+	"America/Lima": 24,
+	"America/Los_Angeles": 96,
+	"America/Louisville": 50,
+	"America/Lower_Princes": 56,
+	"America/Maceio": 43,
+	"America/Managua": 106,
+	"America/Manaus": 56,
+	"America/Marigot": 56,
+	"America/Martinique": 56,
+	"America/Matamoros": 36,
+	"America/Mazatlan": 80,
+	"America/Mendoza": 43,
+	"America/Menominee": 36,
+	"America/Merida": 58,
+	"America/Mexico_City": 58,
+	"America/Miquelon": 100,
+	"America/Moncton": 13,
+	"America/Monterrey": 58,
+	"America/Montevideo": 87,
+	"America/Montreal": 50,
+	"America/Montserrat": 56,
+	"America/Nassau": 50,
+	"America/New_York": 50,
+	"America/Nome": 2,
+	"America/Noronha": 53,
+	"America/North_Dakota/Beulah": 36,
+	"America/North_Dakota/Center": 36,
+	"America/North_Dakota/New_Salem": 36,
+	"America/Ojinaga": 36,
+	"America/Panama": 24,
+	"America/Paramaribo": 43,
+	"America/Phoenix": 8,
+	"America/Port-au-Prince": 60,
+	"America/Port_of_Spain": 56,
+	"America/Porto_Velho": 56,
+	"America/Puerto_Rico": 56,
+	"America/Rankin_Inlet": 36,
+	"America/Recife": 43,
+	"America/Regina": 106,
+	"America/Resolute": 36,
+	"America/Rio_Branco": 24,
+	"America/Santarem": 43,
+	"America/Santiago": 104,
+	"America/Santo_Domingo": 56,
+	"America/Sao_Paulo": 26,
+	"America/Scoresbysund": 15,
+	"America/Sitka": 2,
+	"America/St_Barthelemy": 56,
+	"America/St_Johns": 91,
+	"America/St_Kitts": 56,
+	"America/St_Lucia": 56,
+	"America/St_Thomas": 56,
+	"America/St_Vincent": 56,
+	"America/Swift_Current": 106,
+	"America/Tegucigalpa": 106,
+	"America/Thule": 13,
+	"America/Tijuana": 17,
+	"America/Toronto": 50,
+	"America/Tortola": 56,
+	"America/Vancouver": 8,
+	"America/Whitehorse": 96,
+	"America/Winnipeg": 36,
+	"America/Yakutat": 2,
+	"Antarctica/Casey": 21,
+	"Antarctica/Davis": 19,
+	"Antarctica/DumontDUrville": 27,
+	"Antarctica/Macquarie": 25,
+	"Antarctica/Mawson": 111,
+	"Antarctica/McMurdo": 14,
+	"Antarctica/Palmer": 104,
+	"Antarctica/Rothera": 43,
+	"Antarctica/Syowa": 88,
+	"Antarctica/Vostok": 47,
+	"Arctic/Longyearbyen": 5,
+	"Asia/Aden": 88,
+	"Asia/Almaty": 9,
+	"Asia/Amman": 4,
+	"Asia/Anadyr": 6,
+	"Asia/Aqtau": 111,
+	"Asia/Aqtobe": 111,
+	"Asia/Ashgabat": 111,
+	"Asia/Baghdad": 16,
+	"Asia/Bahrain": 88,
+	"Asia/Baku": 18,
+	"Asia/Bangkok": 19,
+	"Asia/Barnaul": 20,
+	"Asia/Beirut": 22,
+	"Asia/Bishkek": 47,
+	"Asia/Brunei": 21,
+	"Asia/Calcutta": 38,
+	"Asia/Chita": 41,
+	"Asia/Chongqing": 21,
+	"Asia/Colombo": 109,
+	"Asia/Damascus": 45,
+	"Asia/Dhaka": 47,
+	"Asia/Dili": 95,
+	"Asia/Dubai": 0,
+	"Asia/Dushanbe": 111,
+	"Asia/Gaza": 55,
+	"Asia/Hebron": 55,
+	"Asia/Ho_Chi_Minh": 19,
+	"Asia/Hong_Kong": 21,
+	"Asia/Hovd": 66,
+	"Asia/Irkutsk": 68,
+	"Asia/Istanbul": 70,
+	"Asia/Jakarta": 19,
+	"Asia/Jayapura": 95,
+	"Asia/Jerusalem": 72,
+	"Asia/Kabul": 73,
+	"Asia/Kamchatka": 6,
+	"Asia/Karachi": 69,
+	"Asia/Kashgar": 47,
+	"Asia/Kathmandu": 75,
+	"Asia/Katmandu": 75,
+	"Asia/Khandyga": 95,
+	"Asia/Kolkata": 38,
+	"Asia/Krasnoyarsk": 77,
+	"Asia/Kuala_Lumpur": 78,
+	"Asia/Kuching": 21,
+	"Asia/Kuwait": 79,
+	"Asia/Macau": 21,
+	"Asia/Magadan": 82,
+	"Asia/Makassar": 21,
+	"Asia/Manila": 21,
+	"Asia/Muscat": 0,
+	"Asia/Nicosia": 12,
+	"Asia/Novokuznetsk": 19,
+	"Asia/Novosibirsk": 93,
+	"Asia/Omsk": 47,
+	"Asia/Oral": 111,
+	"Asia/Phnom_Penh": 19,
+	"Asia/Pontianak": 19,
+	"Asia/Pyongyang": 99,
+	"Asia/Qatar": 88,
+	"Asia/Qyzylorda": 47,
+	"Asia/Rangoon": 122,
+	"Asia/Riyadh": 88,
+	"Asia/Saigon": 19,
+	"Asia/Sakhalin": 101,
+	"Asia/Samarkand": 111,
+	"Asia/Seoul": 107,
+	"Asia/Shanghai": 21,
+	"Asia/Singapore": 21,
+	"Asia/Srednekolymsk": 42,
+	"Asia/Taipei": 110,
+	"Asia/Tashkent": 111,
+	"Asia/Tbilisi": 112,
+	"Asia/Tehran": 113,
+	"Asia/Thimphu": 47,
+	"Asia/Tokyo": 95,
+	"Asia/Tomsk": 114,
+	"Asia/Ulaanbaatar": 117,
+	"Asia/Ulan_Bator": 117,
+	"Asia/Urumqi": 47,
+	"Asia/Ust-Nera": 27,
+	"Asia/Vientiane": 19,
+	"Asia/Vladivostok": 118,
+	"Asia/Yakutsk": 121,
+	"Asia/Yekaterinburg": 51,
+	"Asia/Yerevan": 123,
+	"Atlantic/Azores": 15,
+	"Atlantic/Bermuda": 13,
+	"Atlantic/Canary": 48,
+	"Atlantic/Cape_Verde": 29,
+	"Atlantic/Faeroe": 48,
+	"Atlantic/Faroe": 48,
+	"Atlantic/Madeira": 48,
+	"Atlantic/Reykjavik": 86,
+	"Atlantic/South_Georgia": 53,
+	"Atlantic/St_Helena": 86,
+	"Atlantic/Stanley": 43,
+	"Australia/ACT": 31,
+	"Australia/Adelaide": 1,
+	"Australia/Brisbane": 27,
+	"Australia/Broken_Hill": 1,
+	"Australia/Darwin": 46,
+	"Australia/Eucla": 52,
+	"Australia/Hobart": 65,
+	"Australia/Lindeman": 27,
+	"Australia/Lord_Howe": 81,
+	"Australia/Melbourne": 31,
+	"Australia/Perth": 97,
+	"Australia/Sydney": 31,
+	"Etc/GMT": 86,
+	"Etc/GMT+5": 24,
+	"Etc/UTC": 86,
+	"Europe/Amsterdam": 5,
+	"Europe/Andorra": 5,
+	"Europe/Astrakhan": 10,
+	"Europe/Athens": 12,
+	"Europe/Belfast": 48,
+	"Europe/Belgrade": 23,
+	"Europe/Berlin": 5,
+	"Europe/Bratislava": 5,
+	"Europe/Brussels": 28,
+	"Europe/Bucharest": 12,
+	"Europe/Budapest": 5,
+	"Europe/Busingen": 5,
+	"Europe/Copenhagen": 5,
+	"Europe/Dublin": 48,
+	"Europe/Gibraltar": 5,
+	"Europe/Guernsey": 48,
+	"Europe/Helsinki": 64,
+	"Europe/Isle_of_Man": 48,
+	"Europe/Istanbul": 70,
+	"Europe/Jersey": 48,
+	"Europe/Kaliningrad": 74,
+	"Europe/Kirov": 88,
+	"Europe/Kyiv": 12,
+	"Europe/Lisbon": 48,
+	"Europe/Ljubljana": 5,
+	"Europe/London": 48,
+	"Europe/Luxembourg": 5,
+	"Europe/Madrid": 5,
+	"Europe/Malta": 5,
+	"Europe/Mariehamn": 12,
+	"Europe/Minsk": 85,
+	"Europe/Monaco": 5,
+	"Europe/Moscow": 88,
+	"Europe/Oslo": 5,
+	"Europe/Paris": 5,
+	"Europe/Podgorica": 5,
+	"Europe/Prague": 23,
+	"Europe/Riga": 12,
+	"Europe/Rome": 5,
+	"Europe/Samara": 71,
+	"Europe/San_Marino": 5,
+	"Europe/Sarajevo": 5,
+	"Europe/Simferopol": 88,
+	"Europe/Skopje": 5,
+	"Europe/Sofia": 12,
+	"Europe/Stockholm": 5,
+	"Europe/Tallinn": 12,
+	"Europe/Tirane": 5,
+	"Europe/Ulyanovsk": 10,
+	"Europe/Vaduz": 5,
+	"Europe/Vatican": 5,
+	"Europe/Vienna": 5,
+	"Europe/Vilnius": 12,
+	"Europe/Volgograd": 10,
+	"Europe/Warsaw": 105,
+	"Europe/Zagreb": 5,
+	"Europe/Zurich": 5,
+	GMT: 86,
+	"Indian/Antananarivo": 88,
+	"Indian/Chagos": 47,
+	"Indian/Christmas": 19,
+	"Indian/Cocos": 122,
+	"Indian/Comoro": 88,
+	"Indian/Kerguelen": 111,
+	"Indian/Mahe": 0,
+	"Indian/Maldives": 111,
+	"Indian/Mauritius": 98,
+	"Indian/Mayotte": 88,
+	"Indian/Reunion": 0,
+	"Pacific/Apia": 103,
+	"Pacific/Auckland": 14,
+	"Pacific/Bougainville": 25,
+	"Pacific/Chatham": 37,
+	"Pacific/Chuuk": 27,
+	"Pacific/Easter": 49,
+	"Pacific/Efate": 25,
+	"Pacific/Enderbury": 94,
+	"Pacific/Fakaofo": 94,
+	"Pacific/Fiji": 54,
+	"Pacific/Funafuti": 6,
+	"Pacific/Galapagos": 106,
+	"Pacific/Guadalcanal": 108,
+	"Pacific/Guam": 59,
+	"Pacific/Honolulu": 63,
+	"Pacific/Kiritimati": 76,
+	"Pacific/Kosrae": 25,
+	"Pacific/Kwajalein": 6,
+	"Pacific/Majuro": 6,
+	"Pacific/Marquesas": 83,
+	"Pacific/Midway": 84,
+	"Pacific/Nauru": 6,
+	"Pacific/Niue": 84,
+	"Pacific/Norfolk": 92,
+	"Pacific/Noumea": 25,
+	"Pacific/Pago_Pago": 84,
+	"Pacific/Palau": 95,
+	"Pacific/Pohnpei": 25,
+	"Pacific/Ponape": 25,
+	"Pacific/Port_Moresby": 27,
+	"Pacific/Rarotonga": 63,
+	"Pacific/Saipan": 27,
+	"Pacific/Tahiti": 63,
+	"Pacific/Tarawa": 6,
+	"Pacific/Tongatapu": 94,
+	"Pacific/Truk": 27,
+	"Pacific/Wake": 6,
+	"Pacific/Wallis": 6,
+	"US/Eastern": 50,
+	"US/Pacific": 96,
+	UTC: 86
+};
+/** Slack's name for an IANA zone, if the Builder named it. */
+function slackTimeZoneName(timeZone) {
+	const index = ZONES[timeZone];
+	return index === void 0 ? void 0 : NAMES[index];
+}
+//#endregion
+//#region src/elements/dateFormat.ts
+/** "1st", "2nd", "3rd", "11th"… as Slack writes the day in a long date ("January 1st, 2026"). */
+function ordinal$1(day) {
+	if (day % 10 === 1 && day !== 11) return `${day}st`;
+	if (day % 10 === 2 && day !== 12) return `${day}nd`;
+	if (day % 10 === 3 && day !== 13) return `${day}rd`;
+	return `${day}th`;
+}
+/**
+* The name Slack shows for a time zone ("Eastern Time (US and Canada)"), from the names measured
+* in Block Kit Builder. An alias the Builder wasn't asked about is looked up by its canonical id;
+* a zone it doesn't name falls back to the IANA id.
+*/
+function timeZoneLabel(timeZone) {
+	const direct = slackTimeZoneName(timeZone);
+	if (direct) return direct;
+	try {
+		const canonical = new Intl.DateTimeFormat("en-US", { timeZone }).resolvedOptions().timeZone;
+		return slackTimeZoneName(canonical) ?? timeZone;
+	} catch {
+		return timeZone;
+	}
+}
+/** A timestamp's wall-clock date ("2026-01-01") and time ("11:00") in `timeZone`. */
+function wallClock(ts, timeZone) {
+	const parts = new Intl.DateTimeFormat("en-US", {
+		timeZone,
+		year: "numeric",
+		month: "2-digit",
+		day: "2-digit",
+		hour: "2-digit",
+		minute: "2-digit",
+		hourCycle: "h23"
+	}).formatToParts(/* @__PURE__ */ new Date(ts * 1e3));
+	const get = (type) => parts.find((p) => p.type === type)?.value ?? "00";
+	return {
+		date: `${get("year")}-${get("month")}-${get("day")}`,
+		time: `${get("hour")}:${get("minute")}`
+	};
+}
+/** The timestamp of a wall-clock date and time in `timeZone`. Around a daylight saving change it
+* resolves like JavaScript's `Date`: a time the clocks skip moves forward by the gap, and a time
+* they repeat takes its first occurrence. */
+function fromWallClock(date, time, timeZone) {
+	const asUtc = Date.parse(`${date}T${time}:00Z`) / 1e3;
+	const offsetAt = (ts) => {
+		const wall = wallClock(ts, timeZone);
+		return Date.parse(`${wall.date}T${wall.time}:00Z`) / 1e3 - ts;
+	};
+	const before = asUtc - offsetAt(asUtc - 86400);
+	const matches = [before, asUtc - offsetAt(asUtc + 86400)].filter((ts) => {
+		const wall = wallClock(ts, timeZone);
+		return wall.date === date && wall.time === time;
+	});
+	return matches.length > 0 ? Math.min(...matches) : before;
+}
+const MONTHS = [
+	"january",
+	"february",
+	"march",
+	"april",
+	"may",
+	"june",
+	"july",
+	"august",
+	"september",
+	"october",
+	"november",
+	"december"
+];
+/** `YYYY-MM-DD` for a real calendar date, or undefined (e.g. April 31st). */
+function isoDate(year, month, day) {
+	const d = new Date(Date.UTC(year, month - 1, day));
+	if (d.getUTCFullYear() !== year || d.getUTCMonth() !== month - 1 || d.getUTCDate() !== day) return;
+	return `${String(year).padStart(4, "0")}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
+}
+/** A two-digit year as Slack reads it: 69–99 in the 1900s, 00–68 in the 2000s. */
+function fullYear(year) {
+	const n = Number(year);
+	if (year.length > 2) return n;
+	return n >= 69 ? 1900 + n : 2e3 + n;
+}
+/**
+* Reads a date typed into a datepicker field, as Slack's does: "05/01/1990", "5/4/90",
+* "1990-05-02", "May 3, 1990" or the field's own long form, "April 28th, 1990". Returns
+* `YYYY-MM-DD`, or undefined for anything else.
+*/
+function parseTypedDate(input) {
+	const text = input.trim();
+	let m = /^(\d{1,2})\/(\d{1,2})\/(\d{2}|\d{4})$/.exec(text);
+	if (m) return isoDate(fullYear(m[3]), Number(m[1]), Number(m[2]));
+	m = /^(\d{4})-(\d{1,2})-(\d{1,2})$/.exec(text);
+	if (m) return isoDate(Number(m[1]), Number(m[2]), Number(m[3]));
+	m = /^([a-z]+)\.?\s+(\d{1,2})(?:st|nd|rd|th)?,?\s+(\d{4})$/i.exec(text);
+	if (m) {
+		const name = m[1].toLowerCase();
+		const index = MONTHS.findIndex((month) => month === name || name.length >= 3 && month.startsWith(name));
+		if (index >= 0) return isoDate(Number(m[3]), index + 1, Number(m[2]));
+	}
+}
+//#endregion
+//#region src/elements/calendar/Calendar.tsx
+function pad(n) {
+	return String(n).padStart(2, "0");
+}
+function toISO(y, m, d) {
+	return `${y}-${pad(m + 1)}-${pad(d)}`;
+}
+function todayISO() {
+	const now = /* @__PURE__ */ new Date();
+	return toISO(now.getFullYear(), now.getMonth(), now.getDate());
+}
+/** Slack's calendar header icons, 20×20. */
+const NAV_PATHS = {
+	"previous-year": "M11.03 2.78a.75.75 0 1 0-1.06-1.06L2.22 9.47a.75.75 0 0 0 0 1.06l7.75 7.75a.75.75 0 1 0 1.06-1.06L3.81 10zm6.25 0a.75.75 0 0 0-1.06-1.06L8.47 9.47a.75.75 0 0 0 0 1.06l7.75 7.75a.75.75 0 1 0 1.06-1.06L10.06 10z",
+	"previous-month": "M14.53 1.72a.75.75 0 0 1 0 1.06L7.31 10l7.22 7.22a.75.75 0 1 1-1.06 1.06l-7.75-7.75a.75.75 0 0 1 0-1.06l7.75-7.75a.75.75 0 0 1 1.06 0",
+	"next-month": "M5.72 1.72a.75.75 0 0 1 1.06 0l7.75 7.75a.75.75 0 0 1 0 1.06l-7.75 7.75a.75.75 0 0 1-1.06-1.06L12.94 10 5.72 2.78a.75.75 0 0 1 0-1.06",
+	"next-year": "M3.78 1.72a.75.75 0 0 0-1.06 1.06L9.94 10l-7.22 7.22a.75.75 0 1 0 1.06 1.06l7.75-7.75a.75.75 0 0 0 0-1.06zm6.25 0a.75.75 0 1 0-1.06 1.06L16.19 10l-7.22 7.22a.75.75 0 1 0 1.06 1.06l7.75-7.75a.75.75 0 0 0 0-1.06z"
+};
+/** A header button that moves the calendar by `months`. */
+function NavButton({ icon, label, onClick }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: "sbk-calendar__nav",
+		onClick,
+		"aria-label": label,
+		children: /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 20 20",
+			width: "20",
+			height: "20",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx("path", {
+				fill: "currentColor",
+				fillRule: "evenodd",
+				clipRule: "evenodd",
+				d: NAV_PATHS[icon]
+			})
+		})
+	});
+}
+/** A day's name in full, as Slack labels its day buttons: "Saturday, April 28th, 1990". */
+function dayLabel(iso) {
+	const [y = 0, m = 1, d = 1] = iso.split("-").map(Number);
+	const date = new Date(Date.UTC(y, m - 1, d));
+	return `${date.toLocaleString("en-US", {
+		weekday: "long",
+		timeZone: "UTC"
+	})}, ${date.toLocaleString("en-US", {
+		month: "long",
+		timeZone: "UTC"
+	})} ${ordinal$1(d)}, ${y}`;
+}
+/** The day `delta` days after the `YYYY-MM-DD` date, as `YYYY-MM-DD`. */
+function addDays(iso, delta) {
+	const d = /* @__PURE__ */ new Date(`${iso}T00:00:00Z`);
+	d.setUTCDate(d.getUTCDate() + delta);
+	return toISO(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate());
+}
+/** Days the arrow keys move the focused day: a day sideways, a week up or down. */
+const ARROW_DAYS = {
+	ArrowLeft: -1,
+	ArrowRight: 1,
+	ArrowUp: -7,
+	ArrowDown: 7
+};
+/** A month grid matching Slack's `c-date_picker_calendar`: a bordered 7-column grid of 44×42
+* day cells, a ring around today, and solid blue for the selected day. The grid is one tab stop:
+* the focused day (the selected one, else today, else the 1st) takes Tab, and the arrow keys move
+* it a day or a week, turning the month when they cross its edge. */
+function Calendar({ value, onSelect, onClear }) {
+	const initial = value ? /* @__PURE__ */ new Date(`${value}T00:00:00Z`) : /* @__PURE__ */ new Date();
+	const [year, setYear] = useState(initial.getUTCFullYear());
+	const [month, setMonth] = useState(initial.getUTCMonth());
+	const [focused, setFocused] = useState(() => {
+		if (value) return value;
+		const today = todayISO();
+		return today.startsWith(toISO(year, month, 1).slice(0, 7)) ? today : toISO(year, month, 1);
+	});
+	const gridRef = useRef(null);
+	const [keyboard, setKeyboard] = useState(false);
+	const moveFocus = useRef(false);
+	useEffect(() => {
+		if (!moveFocus.current) return;
+		moveFocus.current = false;
+		gridRef.current?.querySelector(`[data-date="${focused}"]`)?.focus();
+	}, [
+		focused,
+		year,
+		month
+	]);
+	function onGridKeyDown(e) {
+		const delta = ARROW_DAYS[e.key];
+		if (delta === void 0) return;
+		e.preventDefault();
+		setKeyboard(true);
+		const next = addDays(focused, delta);
+		const [y = year, m = month + 1] = next.split("-").map(Number);
+		moveFocus.current = true;
+		setFocused(next);
+		if (y !== year || m - 1 !== month) {
+			setYear(y);
+			setMonth(m - 1);
+		}
+	}
+	const shown = toISO(year, month, 1).slice(0, 7);
+	const tabStop = focused.startsWith(shown) ? focused : toISO(year, month, 1);
+	const first = new Date(Date.UTC(year, month, 1));
+	const startWeekday = first.getUTCDay();
+	const daysInMonth = new Date(Date.UTC(year, month + 1, 0)).getUTCDate();
+	const cells = [...Array(startWeekday).fill(null), ...Array.from({ length: daysInMonth }, (_, i) => i + 1)];
+	const today = todayISO();
+	const lastRow = Math.floor((startWeekday + daysInMonth - 1) / 7);
+	const lastRowFull = (startWeekday + daysInMonth) % 7 === 0;
+	/** The grid's outer corners a day sits on, which Slack rounds. */
+	function corners(day) {
+		const at = startWeekday + day - 1;
+		const row = Math.floor(at / 7);
+		const col = at % 7;
+		const out = [];
+		if (day === 1 || row === 1 && col === 0) out.push("top-left");
+		if (row === 0 && col === 6) out.push("top-right");
+		if (row === lastRow && col === 0) out.push("bottom-left");
+		if (day === daysInMonth || !lastRowFull && row === lastRow - 1 && col === 6) out.push("bottom-right");
+		return out;
+	}
+	function go(delta) {
+		const d = new Date(Date.UTC(year, month + delta, 1));
+		setYear(d.getUTCFullYear());
+		setMonth(d.getUTCMonth());
+	}
+	const monthLabel = first.toLocaleDateString("en-US", {
+		month: "long",
+		year: "numeric",
+		timeZone: "UTC"
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		className: "sbk-calendar",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "sbk-calendar__header",
+				children: [
+					/* @__PURE__ */ jsx(NavButton, {
+						icon: "previous-year",
+						label: "Previous year",
+						onClick: () => go(-12)
+					}),
+					/* @__PURE__ */ jsx(NavButton, {
+						icon: "previous-month",
+						label: "Previous month",
+						onClick: () => go(-1)
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "sbk-calendar__label",
+						children: monthLabel
+					}),
+					/* @__PURE__ */ jsx(NavButton, {
+						icon: "next-month",
+						label: "Next month",
+						onClick: () => go(1)
+					}),
+					/* @__PURE__ */ jsx(NavButton, {
+						icon: "next-year",
+						label: "Next year",
+						onClick: () => go(12)
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "sbk-calendar__weekdays",
+				children: [
+					"Su",
+					"Mo",
+					"Tu",
+					"We",
+					"Th",
+					"Fr",
+					"Sa"
+				].map((w) => /* @__PURE__ */ jsx("span", { children: w }, w))
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: `sbk-calendar__grid${keyboard ? " sbk-calendar__grid--keyboard" : ""}`,
+				ref: gridRef,
+				onKeyDown: onGridKeyDown,
+				onPointerDown: () => setKeyboard(false),
+				children: cells.map((day, i) => {
+					if (day === null) return /* @__PURE__ */ jsx("span", { className: "sbk-calendar__cell sbk-calendar__cell--empty" }, i);
+					const iso = toISO(year, month, day);
+					const classes = ["sbk-calendar__cell", ...corners(day).map((c) => `sbk-calendar__cell--${c}`)];
+					if (iso === value) classes.push("sbk-calendar__cell--selected");
+					if (iso === today) classes.push("sbk-calendar__cell--today");
+					return /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: classes.join(" "),
+						"aria-pressed": iso === value,
+						"aria-current": iso === today ? "date" : void 0,
+						"data-date": iso,
+						"aria-label": dayLabel(iso),
+						tabIndex: iso === tabStop ? 0 : -1,
+						onFocus: () => setFocused(iso),
+						onClick: () => onSelect(iso),
+						children: day
+					}, iso);
+				})
+			})
+		]
+	}), onClear && value && /* @__PURE__ */ jsx("div", {
+		className: "sbk-calendar__footer",
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "sbk-calendar__clear",
+			onClick: onClear,
+			children: "Clear selection"
+		})
+	})] });
+}
+//#endregion
+//#region src/elements/calendar/CalendarPopover.tsx
+/** Moves focus onto the calendar's focused day: the selected one, else today, else the 1st. */
+function focusCalendarDay(popup) {
+	popup?.querySelector(".sbk-calendar__grid [tabindex='0']")?.focus();
+}
+/**
+* Slack's datepicker dropdown (`c-date_picker__dropdown`): the month calendar in a popover that
+* overlaps the bottom of its field by 4px, its right edge on the field's. The datepicker and the
+* date half of the datetimepicker both open it.
+*/
+function CalendarPopover({ anchorRef, popupRef, value, onSelect, onClear, onDismiss, onEscape, focusOnOpen, offsetX }) {
+	return /* @__PURE__ */ jsx(Popover, {
+		anchorRef,
+		gap: -4,
+		offsetX,
+		onDismiss,
+		onPlaced: () => {
+			if (focusOnOpen()) focusCalendarDay(popupRef.current);
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			className: "sbk-datepicker__popup",
+			ref: popupRef,
+			role: "dialog",
+			"aria-label": "Choose a date",
+			onKeyDown: (e) => {
+				if (e.key !== "Escape") return;
+				e.preventDefault();
+				onEscape();
+			},
+			children: /* @__PURE__ */ jsx(Calendar, {
+				value,
+				onSelect,
+				onClear
+			})
+		})
+	});
+}
+//#endregion
+//#region src/elements/inputBlockContext.ts
+/** True while rendering the element of an `input` block, where Slack lays some elements out differently. */
+const InputBlockContext = createContext(false);
+function useInInputBlock() {
+	return useContext(InputBlockContext);
+}
+/** True while rendering the element of an `input` block marked `optional`, which Slack lets the user empty. */
+const InputOptionalContext = createContext(false);
+/**
+* True for an `input` block's element that Slack lets the user empty with "Clear selection": an
+* optional input, or any input on the message surface, where Slack treats inputs as optional (it
+* shows no "(optional)" suffix there either). Measured in Block Kit Builder's references.
+*/
+function useInClearableInput() {
+	const inInput = useContext(InputBlockContext);
+	const optional = useContext(InputOptionalContext);
+	const { surface } = useBlockKit();
+	return inInput && (optional || surface === "message");
+}
+/** The id of the error shown under an `input` block's element, while it has one. */
+const InputErrorContext = createContext(void 0);
+/**
+* Props for the element's focusable control: an `input` block with an error marks it invalid,
+* which also gives it Slack's red focus ring, and describes it with the error text.
+*/
+function useInvalidProps() {
+	const errorId = useContext(InputErrorContext);
+	return errorId ? {
+		"aria-invalid": true,
+		"aria-describedby": errorId
+	} : {};
+}
+//#endregion
+//#region src/elements/DatePicker.tsx
+/**
+* Formats `YYYY-MM-DD` the way Slack's closed datepicker control shows it: "04/28/1990" in an
+* actions block or section accessory, and "April 28th, 1990" in an `input` block.
+*/
+function formatDate(date, long) {
+	const [y = 0, m = 1, d = 1] = date.split("-").map(Number);
+	if (long) return `${new Date(Date.UTC(y, m - 1, 1)).toLocaleString("en-US", {
+		month: "long",
+		timeZone: "UTC"
+	})} ${ordinal$1(d)}, ${y}`;
+	return `${String(m).padStart(2, "0")}/${String(d).padStart(2, "0")}/${y}`;
+}
+function DatePicker({ element, blockId }) {
+	const { setValue, dispatch, surface } = useBlockKit();
+	const medium = surface !== "message";
+	const inInputBlock = useInInputBlock();
+	const clearable = useInClearableInput();
+	const { ask, dialog } = useConfirm(element.confirm);
+	const [date, setDate] = useState(element.initial_date);
+	const [open, setOpen] = useState(false);
+	const rootRef = useRef(null);
+	const inputRef = useFocusOnLoad(element);
+	const invalid = useInvalidProps();
+	const quietFocus = useRef(element.focus_on_load === true);
+	const focusCalendar = useRef(false);
+	const popupRef = useRef(null);
+	const actionId = element.action_id ?? "";
+	const [text, setText] = useState(null);
+	function focusDay() {
+		focusCalendarDay(popupRef.current);
+	}
+	function close() {
+		setOpen(false);
+		const input = inputRef.current;
+		if (!input || document.activeElement === input) return;
+		quietFocus.current = true;
+		input.focus();
+	}
+	useEffect(() => {
+		if (date) setValue(blockId, actionId, {
+			type: "datepicker",
+			selected_date: date
+		});
+	}, []);
+	async function pick(next) {
+		if (!await ask()) return;
+		close();
+		commit(next);
+	}
+	/** Chooses `next` and sends it, as a pick in the calendar or a typed date does. */
+	function commit(next) {
+		setDate(next);
+		setValue(blockId, actionId, {
+			type: "datepicker",
+			selected_date: next
+		});
+		dispatch({
+			type: "datepicker",
+			action_id: actionId,
+			block_id: blockId,
+			selected_date: next,
+			...element.initial_date !== void 0 ? { initial_date: element.initial_date } : {}
+		});
+	}
+	/**
+	* A typed date: Enter or leaving the field takes it, as Slack's field does, and anything that
+	* isn't a date is ignored. The calendar stays open after Enter, as in Slack.
+	*/
+	async function takeTyped() {
+		if (text === null) return;
+		const next = parseTypedDate(text);
+		if (!next) return;
+		if (next !== date && !await ask()) return;
+		if (next !== date) commit(next);
+	}
+	async function clear() {
+		if (!await ask()) return;
+		setDate(void 0);
+		close();
+		setValue(blockId, actionId, {
+			type: "datepicker",
+			selected_date: null
+		});
+		dispatch({
+			type: "datepicker",
+			action_id: actionId,
+			block_id: blockId,
+			selected_date: null,
+			...element.initial_date !== void 0 ? { initial_date: element.initial_date } : {}
+		});
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: `sbk-datepicker${medium ? " sbk-datepicker--medium" : ""}`,
+		ref: rootRef,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "sbk-datepicker__input_wrap",
+				children: [
+					/* @__PURE__ */ jsx(CalendarIcon, { className: "sbk-datepicker__icon" }),
+					/* @__PURE__ */ jsx("input", {
+						className: "sbk-datepicker__input",
+						type: "text",
+						autoComplete: "off",
+						spellCheck: false,
+						value: text ?? (date ? formatDate(date, inInputBlock) : ""),
+						placeholder: element.placeholder?.text ?? "Select a date",
+						"aria-label": "Date",
+						...invalid,
+						ref: inputRef,
+						onChange: (e) => {
+							setText(e.target.value);
+							setOpen(true);
+						},
+						onFocus: () => {
+							if (quietFocus.current) quietFocus.current = false;
+							else setOpen(true);
+						},
+						onBlur: async () => {
+							await takeTyped();
+							setText(null);
+						},
+						onMouseDown: () => {
+							focusCalendar.current = true;
+						},
+						onClick: () => {
+							if (open) focusDay();
+							else focusCalendar.current = true;
+							setOpen(true);
+						},
+						onKeyDown: (e) => {
+							if (e.key === "Escape") {
+								setText(null);
+								setOpen(false);
+							}
+							if (e.key === "Enter") {
+								e.preventDefault();
+								takeTyped();
+							}
+							if (e.key === "ArrowDown") {
+								e.preventDefault();
+								if (open) focusDay();
+								else {
+									focusCalendar.current = true;
+									setOpen(true);
+								}
+							}
+						}
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "sbk-datepicker__toggle",
+						"aria-label": "Open calendar",
+						onClick: () => {
+							focusCalendar.current = true;
+							if (open) focusDay();
+							else setOpen(true);
+						},
+						children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "sbk-datepicker__chevron" })
+					})
+				]
+			}),
+			open && /* @__PURE__ */ jsx(CalendarPopover, {
+				anchorRef: rootRef,
+				popupRef,
+				offsetX: medium ? -4 : void 0,
+				value: date,
+				onSelect: pick,
+				onClear: clearable ? clear : void 0,
+				onDismiss: () => setOpen(false),
+				onEscape: close,
+				focusOnOpen: () => {
+					const focus = focusCalendar.current;
+					focusCalendar.current = false;
+					return focus;
+				}
+			}),
+			dialog
+		]
+	});
+}
+//#endregion
+//#region src/elements/useMenuNavigation.ts
+/**
+* Slack's menus and option lists keep one "active" row that follows both the pointer and the
+* arrow keys (`c-menu_item--highlighted` / `c-select_options_list__option--active`), so hover and
+* keyboard highlight share one style. Returns the active index plus handlers for the list.
+*/
+function useMenuNavigation({ open, count, initialIndex = -1, onChoose, onClose, onOpen, listRef }) {
+	const [active, setActive] = useState(-1);
+	useEffect(() => {
+		setActive(open ? initialIndex : -1);
+	}, [open]);
+	useEffect(() => {
+		if (active >= count) setActive(count - 1);
+	}, [active, count]);
+	useEffect(() => {
+		(listRef?.current?.querySelector("[data-active]"))?.scrollIntoView?.({ block: "nearest" });
+	}, [active, listRef]);
+	function onKeyDown(e) {
+		if (!open) {
+			if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+				e.preventDefault();
+				onOpen?.();
+			}
+			return;
+		}
+		switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault();
+				setActive((i) => count === 0 ? -1 : (i + 1) % count);
+				break;
+			case "ArrowUp":
+				e.preventDefault();
+				setActive((i) => count === 0 ? -1 : i <= 0 ? count - 1 : i - 1);
+				break;
+			case "Home":
+				e.preventDefault();
+				setActive(count > 0 ? 0 : -1);
+				break;
+			case "End":
+				e.preventDefault();
+				setActive(count - 1);
+				break;
+			case "Enter":
+				if (active >= 0 && active < count) {
+					e.preventDefault();
+					onChoose(active);
+				}
+				break;
+			case "Escape":
+				e.preventDefault();
+				onClose();
+		}
+	}
+	/** Props for the row at `index`: pointer movement moves the highlight, like Slack's lists. */
+	function itemProps(index) {
+		return {
+			onMouseEnter: () => setActive(index),
+			onMouseMove: () => {
+				if (active !== index) setActive(index);
+			},
+			"data-active": active === index || void 0
+		};
+	}
+	return {
+		active,
+		setActive,
+		onKeyDown,
+		itemProps
+	};
+}
+//#endregion
+//#region src/elements/useCombobox.ts
+/**
+* The typeable trigger Slack's select and time pickers share (`c-select_input`): a text input with
+* role="combobox" that shows the chosen value while closed, and the query while its list is open.
+* Typing filters the list and highlights its first row; the arrow keys move the highlight, Enter
+* picks it, Escape and Tab close the list and put the chosen value back.
+*/
+function useCombobox({ query, onQueryChange, count, initialIndex, onChoose, onSubmitQuery, listRef, returnFocusRef, open: controlledOpen, onOpenChange, keepQuery = false, typedHighlight = false, highlightOnType = true, holdFirstArrow = true, chosenAsPlaceholder = true }) {
+	const [ownOpen, setOwnOpen] = useState(false);
+	const open = controlledOpen ?? ownOpen;
+	const setOpenState = onOpenChange ?? setOwnOpen;
+	const inputRef = useRef(null);
+	const id = useId();
+	const listId = `${id}-list`;
+	const optionId = (index) => `${id}-option-${index}`;
+	const [typed, setTyped] = useState(true);
+	const pointerOpen = useRef(false);
+	useEffect(() => {
+		if (open) setTyped(!pointerOpen.current);
+		else pointerOpen.current = false;
+	}, [open]);
+	function setOpen(next) {
+		setOpenState(next);
+		if (!next && !keepQuery) onQueryChange("");
+	}
+	const nav = useMenuNavigation({
+		open,
+		count,
+		initialIndex,
+		onChoose,
+		onClose: () => {
+			setOpen(false);
+			(returnFocusRef ?? inputRef).current?.focus();
+		},
+		onOpen: () => setOpenState(true),
+		listRef
+	});
+	/** Keys for the input, or for a container around a button trigger and its list. */
+	function onKeyDown(e) {
+		if (e.key === "Tab") {
+			if (open) setOpen(false);
+			return;
+		}
+		if (open && e.key === "Enter" && nav.active < 0 && query.trim()) {
+			e.preventDefault();
+			onSubmitQuery?.(query.trim());
+			return;
+		}
+		if (typedHighlight && open && typed && [
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(e.key)) {
+			setTyped(false);
+			if ((e.key === "ArrowDown" || e.key === "ArrowUp") && nav.active >= 0 && holdFirstArrow) {
+				e.preventDefault();
+				return;
+			}
+		}
+		nav.onKeyDown(e);
+	}
+	/** Props for the input. `display` is the chosen value, shown while the list is closed. */
+	/** The combobox input's props; `label` names it for screen readers, else the placeholder does. */
+	function inputProps(display, placeholder, label = placeholder) {
+		return {
+			ref: inputRef,
+			type: "text",
+			role: "combobox",
+			autoComplete: "off",
+			size: 1,
+			spellCheck: false,
+			"aria-autocomplete": "list",
+			"aria-expanded": open,
+			"aria-controls": open ? listId : void 0,
+			"aria-activedescendant": open && nav.active >= 0 ? optionId(nav.active) : void 0,
+			"aria-label": label,
+			placeholder: open && chosenAsPlaceholder ? display ?? placeholder : placeholder,
+			value: open || keepQuery && query ? query : display ?? "",
+			onClick: () => {
+				if (!open) pointerOpen.current = true;
+				setOpenState(true);
+			},
+			onChange: (e) => {
+				pointerOpen.current = false;
+				onQueryChange(e.target.value);
+				setOpenState(true);
+				setTyped(true);
+				nav.setActive(highlightOnType ? 0 : -1);
+			},
+			onKeyDown
+		};
+	}
+	/** Props for the row at `index`, tying it to the input's aria-activedescendant. */
+	function optionProps(index) {
+		const item = nav.itemProps(index);
+		return {
+			id: optionId(index),
+			...item,
+			onMouseMove: () => {
+				if (typedHighlight) setTyped(false);
+				item.onMouseMove();
+			}
+		};
+	}
+	return {
+		open,
+		setOpen,
+		onKeyDown,
+		listId,
+		optionId,
+		inputRef,
+		inputProps,
+		optionProps,
+		active: nav.active,
+		/** Whether the highlighted row is the typed highlight (with `typedHighlight`). */
+		typed: typedHighlight && typed
+	};
+}
+//#endregion
+//#region src/elements/TimePicker.tsx
+/** Formats `HH:mm` the way Slack's timepicker shows it, e.g. "1:37 PM". */
+function formatTime(time) {
+	const [h = 0, m = 0] = time.split(":").map(Number);
+	const period = h >= 12 ? "PM" : "AM";
+	return `${h % 12 === 0 ? 12 : h % 12}:${String(m).padStart(2, "0")} ${period}`;
+}
+/** Every hour of the day, as Slack's timepicker list offers. */
+const HOURS = Array.from({ length: 24 }, (_, h) => `${String(h).padStart(2, "0")}:00`);
 /**
-* Formats `YYYY-MM-DD` the way Slack's closed datepicker control shows it: "04/28/1990" in an
-* actions block or section accessory, and "April 28th, 1990" in an `input` block.
+* Reads a typed time as `HH:mm`: "2:15 PM", "2:15pm", "2pm", "14:15" or "9". Without AM or PM the
+* hour is read on a 24-hour clock. Slack accepts typed times too; whether it keeps one off the hour
+* (2:15 PM) or rounds it hasn't been verified, so the minutes are kept as typed.
 */
-function formatDate$1(date, long) {
-	const [y = 0, m = 1, d = 1] = date.split("-").map(Number);
-	if (long) return `${new Date(Date.UTC(y, m - 1, 1)).toLocaleString("en-US", {
-		month: "long",
-		timeZone: "UTC"
-	})} ${ordinal$1(d)}, ${y}`;
-	return `${String(m).padStart(2, "0")}/${String(d).padStart(2, "0")}/${y}`;
+function parseTime(input) {
+	const match = /^(\d{1,2})(?::?(\d{2}))?\s*([ap])\.?m?\.?$|^(\d{1,2})(?::(\d{2}))?$/i.exec(input.trim());
+	if (!match) return void 0;
+	const meridiem = match[3]?.toLowerCase();
+	let hour = Number(match[1] ?? match[4]);
+	const minute = Number(match[2] ?? match[5] ?? 0);
+	if (minute > 59) return void 0;
+	if (meridiem) {
+		if (hour < 1 || hour > 12) return void 0;
+		hour = hour % 12 + (meridiem === "p" ? 12 : 0);
+	} else if (hour > 23) return;
+	return `${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}`;
 }
-function DatePicker({ element, blockId }) {
-	const { setValue, dispatch } = useBlockKit();
-	const inInputBlock = useInInputBlock();
+/**
+* The rows of Slack's time list: every hour, whatever is typed. Slack's list doesn't filter as you
+* type; Enter reads the typed time instead.
+*/
+const TIMES = HOURS;
+/** The "Clear selection" row's key in the list. */
+const CLEAR$1 = "clear";
+function TimePicker({ element, blockId }) {
+	const { setValue, dispatch, surface } = useBlockKit();
+	const medium = surface !== "message";
 	const { ask, dialog } = useConfirm(element.confirm);
-	const [date, setDate] = useState(element.initial_date);
-	const [open, setOpen] = useState(false);
+	const [time, setTime] = useState(element.initial_time);
 	const rootRef = useRef(null);
-	const inputRef = useFocusOnLoad(element);
+	const listRef = useRef(null);
 	const invalid = useInvalidProps();
-	const loadFocus = useRef(element.focus_on_load === true);
+	const inInputBlock = useInInputBlock();
+	const clearable = useInClearableInput();
 	const actionId = element.action_id ?? "";
 	useEffect(() => {
-		if (date) setValue(blockId, actionId, {
-			type: "datepicker",
-			selected_date: date
+		if (time) setValue(blockId, actionId, {
+			type: "timepicker",
+			selected_time: time
 		});
 	}, []);
 	async function pick(next) {
+		combo.setOpen(false);
 		if (!await ask()) return;
-		setDate(next);
-		setOpen(false);
+		setTime(next);
 		setValue(blockId, actionId, {
-			type: "datepicker",
-			selected_date: next
+			type: "timepicker",
+			selected_time: next
 		});
 		dispatch({
-			type: "datepicker",
+			type: "timepicker",
 			action_id: actionId,
 			block_id: blockId,
-			selected_date: next,
-			...element.initial_date !== void 0 ? { initial_date: element.initial_date } : {}
+			selected_time: next,
+			...element.initial_time !== void 0 ? { initial_time: element.initial_time } : {}
 		});
 	}
 	async function clear() {
+		combo.setOpen(false);
 		if (!await ask()) return;
-		setDate(void 0);
-		setOpen(false);
+		setTime(void 0);
+		setQuery("");
 		setValue(blockId, actionId, {
-			type: "datepicker",
-			selected_date: null
+			type: "timepicker",
+			selected_time: null
 		});
 		dispatch({
-			type: "datepicker",
+			type: "timepicker",
 			action_id: actionId,
 			block_id: blockId,
-			selected_date: null,
-			...element.initial_date !== void 0 ? { initial_date: element.initial_date } : {}
+			selected_time: null,
+			...element.initial_time !== void 0 ? { initial_time: element.initial_time } : {}
 		});
 	}
+	const [query, setQuery] = useState("");
+	const rows = [...clearable && time !== void 0 && (query === "" || query === formatTime(time)) ? [CLEAR$1] : [], ...TIMES];
+	const combo = useCombobox({
+		query,
+		onQueryChange: setQuery,
+		count: rows.length,
+		initialIndex: -1,
+		onChoose: (i) => {
+			const row = rows[i];
+			if (row === CLEAR$1) clear();
+			else if (row) pick(row);
+		},
+		onSubmitQuery: (typed) => {
+			const t = parseTime(typed);
+			if (t) pick(t);
+		},
+		listRef,
+		highlightOnType: false
+	});
+	useFocusOnLoad(element, combo.inputRef);
+	const selectOnOpen = useRef(false);
+	useEffect(() => {
+		if (!combo.open || !time) return;
+		selectOnOpen.current = true;
+		setQuery(formatTime(time));
+	}, [combo.open]);
+	useClientLayoutEffect(() => {
+		if (!selectOnOpen.current) return;
+		selectOnOpen.current = false;
+		combo.inputRef.current?.select();
+	}, [query]);
+	const display = time ? formatTime(time) : void 0;
+	const input = combo.inputProps(display, element.placeholder?.text ?? "Select time", "Time");
+	const overlay = display !== void 0 && !combo.open;
 	return /* @__PURE__ */ jsxs("div", {
-		className: "sbk-datepicker",
+		className: `sbk-timepicker${medium ? " sbk-timepicker--medium" : ""}`,
 		ref: rootRef,
 		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "sbk-datepicker__input_wrap",
+			/* @__PURE__ */ jsxs("label", {
+				className: "sbk-timepicker__control",
 				children: [
-					/* @__PURE__ */ jsx(CalendarIcon, { className: "sbk-datepicker__icon" }),
+					/* @__PURE__ */ jsx(ClockIcon, { className: "sbk-timepicker__icon" }),
 					/* @__PURE__ */ jsx("input", {
-						className: "sbk-datepicker__input",
-						readOnly: true,
-						value: date ? formatDate$1(date, inInputBlock) : "",
-						placeholder: element.placeholder?.text ?? "Select a date",
-						"aria-haspopup": "dialog",
-						"aria-expanded": open,
+						...input,
 						...invalid,
-						ref: inputRef,
-						onFocus: () => {
-							if (loadFocus.current) loadFocus.current = false;
-							else setOpen(true);
-						},
-						onClick: () => setOpen(true),
-						onKeyDown: (e) => {
-							if (e.key === "Escape") setOpen(false);
-						}
+						className: `sbk-timepicker__input${overlay ? " sbk-timepicker__input--behind" : ""}`
 					}),
-					/* @__PURE__ */ jsx(ChevronDownIcon, { className: "sbk-datepicker__chevron" })
+					/* @__PURE__ */ jsx(ChevronDownIcon, { className: "sbk-timepicker__chevron" }),
+					overlay && /* @__PURE__ */ jsx("span", {
+						className: "sbk-timepicker__content",
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ jsx("span", {
+							className: "sbk-timepicker__content-text",
+							children: display
+						})
+					})
 				]
 			}),
-			open && /* @__PURE__ */ jsx(Popover, {
+			combo.open && /* @__PURE__ */ jsx(Popover, {
 				anchorRef: rootRef,
-				onDismiss: () => setOpen(false),
+				onDismiss: () => combo.setOpen(false),
+				offsetX: -12,
+				gap: -4,
 				children: /* @__PURE__ */ jsx("div", {
-					className: "sbk-datepicker__popup",
-					children: /* @__PURE__ */ jsx(Calendar, {
-						value: date,
-						onSelect: pick,
-						onClear: clear
-					})
+					className: `sbk-timepicker__menu${inInputBlock ? " sbk-timepicker__menu--input" : ""}`,
+					role: "listbox",
+					id: combo.listId,
+					ref: listRef,
+					children: rows.map((row, i) => /* @__PURE__ */ jsx("div", {
+						role: "option",
+						"aria-selected": row === time,
+						className: `sbk-timepicker__option${row === CLEAR$1 ? " sbk-timepicker__option--clear" : ""}${row === time ? " sbk-timepicker__option--selected" : ""}`,
+						onMouseDown: (e) => e.preventDefault(),
+						onClick: () => row === CLEAR$1 ? clear() : pick(row),
+						...combo.optionProps(i),
+						children: row === CLEAR$1 ? "Clear selection" : formatTime(row)
+					}, row))
 				})
 			}),
+			element.timezone && /* @__PURE__ */ jsx("div", {
+				className: "sbk-timepicker__hint",
+				children: `Time zone: ${timeZoneLabel(element.timezone)}`
+			}),
 			dialog
 		]
 	});
 }
 //#endregion
 //#region src/elements/DateTimePicker.tsx
-/** Slack's Builder splits a datetimepicker's closed control into a date box ("January 1st,
-* 2026") and a separate time box ("11:00 AM"), rather than one combined string. */
-function formatDate(ts, timeZone) {
-	const d = /* @__PURE__ */ new Date(ts * 1e3);
-	const parts = new Intl.DateTimeFormat("en-US", {
+/** The time list's first row while a value is chosen. */
+const CLEAR = "clear";
+/** Slack spells a datetimepicker's day out ("January 1st, 2026"), and calls today "Today". */
+function formatDay(date, today) {
+	if (date === today) return "Today";
+	const d = /* @__PURE__ */ new Date(`${date}T00:00:00Z`);
+	return `${d.toLocaleString("en-US", {
 		month: "long",
-		day: "numeric",
-		year: "numeric",
-		timeZone
-	}).formatToParts(d);
-	const month = parts.find((p) => p.type === "month")?.value ?? "";
-	const day = Number(parts.find((p) => p.type === "day")?.value ?? "1");
-	const year = parts.find((p) => p.type === "year")?.value ?? "";
-	return `${month} ${ordinal$1(day)}, ${year}`;
-}
-function formatTime$1(ts, timeZone) {
-	return (/* @__PURE__ */ new Date(ts * 1e3)).toLocaleString("en-US", {
-		hour: "numeric",
-		minute: "2-digit",
-		timeZone
-	});
+		timeZone: "UTC"
+	})} ${ordinal$1(d.getUTCDate())}, ${d.getUTCFullYear()}`;
 }
+/**
+* Slack's datetimepicker: a date field and a time field side by side, each changing the value on
+* its own. The date field opens the datepicker's calendar and the time field the timepicker's
+* hourly list (230px wide here). Picking either part fills in the other if it's empty (the time
+* now, or today) and sends the action straight away; "Clear selection" in either empties both.
+*/
 function DateTimePicker({ element, blockId }) {
 	const { setValue, dispatch, timeZone } = useBlockKit();
 	const { ask, dialog } = useConfirm(element.confirm);
-	const [value, setValueState] = useState(element.initial_date_time);
-	const [open, setOpen] = useState(false);
 	const zone = timeZone ?? "UTC";
-	const initial = element.initial_date_time !== void 0 ? wallClock(element.initial_date_time, zone) : void 0;
-	const [draftDate, setDraftDate] = useState(initial?.date);
-	const [draftTime, setDraftTime] = useState(initial?.time ?? "12:00");
-	const rootRef = useRef(null);
-	const focusRef = useFocusOnLoad(element);
+	const [value, setValueState] = useState(() => element.initial_date_time !== void 0 ? wallClock(element.initial_date_time, zone) : void 0);
+	const [calendarOpen, setCalendarOpen] = useState(false);
+	const dateRef = useFocusOnLoad(element);
+	const popupRef = useRef(null);
+	const timeFieldRef = useRef(null);
+	const listRef = useRef(null);
+	const focusCalendar = useRef(false);
 	const actionId = element.action_id ?? "";
+	const now = () => wallClock(Math.floor(Date.now() / 1e3), zone);
 	useEffect(() => {
-		if (value !== void 0) setValue(blockId, actionId, {
+		if (element.initial_date_time !== void 0) setValue(blockId, actionId, {
 			type: "datetimepicker",
-			selected_date_time: value
+			selected_date_time: element.initial_date_time
 		});
 	}, []);
-	async function apply() {
-		if (!draftDate) return;
+	async function change(next) {
 		if (!await ask()) return;
-		const ts = fromWallClock(draftDate, draftTime, zone);
-		setValueState(ts);
-		setOpen(false);
+		setValueState(next);
+		const selected = next ? fromWallClock(next.date, next.time, zone) : null;
 		setValue(blockId, actionId, {
 			type: "datetimepicker",
-			selected_date_time: ts
+			selected_date_time: selected
 		});
 		dispatch({
 			type: "datetimepicker",
 			action_id: actionId,
 			block_id: blockId,
-			selected_date_time: ts
+			selected_date_time: selected,
+			...element.initial_date_time !== void 0 ? { initial_date_time: element.initial_date_time } : {}
+		});
+	}
+	function closeCalendar() {
+		setCalendarOpen(false);
+		if (document.activeElement !== dateRef.current) dateRef.current?.focus();
+	}
+	function pickDate(date) {
+		closeCalendar();
+		change({
+			date,
+			time: value?.time ?? now().time
+		});
+	}
+	function pickTime(time) {
+		combo.setOpen(false);
+		change({
+			date: value?.date ?? now().date,
+			time
 		});
 	}
+	function clear() {
+		setCalendarOpen(false);
+		combo.setOpen(false);
+		change(void 0);
+	}
+	const [query, setQuery] = useState("");
+	const rows = [...value && !query.trim() ? [CLEAR] : [], ...TIMES];
+	const combo = useCombobox({
+		query,
+		onQueryChange: setQuery,
+		count: rows.length,
+		initialIndex: value ? rows.indexOf(value.time) : -1,
+		onChoose: (i) => {
+			const row = rows[i];
+			if (row === CLEAR) clear();
+			else if (row) pickTime(row);
+		},
+		onSubmitQuery: (typed) => {
+			const time = parseTime(typed);
+			if (time) pickTime(time);
+		},
+		listRef,
+		highlightOnType: false
+	});
+	const timeDisplay = value ? formatTime(value.time) : void 0;
+	const input = combo.inputProps(timeDisplay, "Time");
+	const overlay = timeDisplay !== void 0 && !combo.open;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "sbk-datetimepicker",
-		ref: rootRef,
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				className: "sbk-datetimepicker__row",
 				children: [/* @__PURE__ */ jsx("div", {
 					className: "sbk-datetimepicker__column",
 					children: /* @__PURE__ */ jsxs("button", {
-						ref: focusRef,
+						ref: dateRef,
 						type: "button",
 						className: "sbk-datetimepicker__control sbk-datetimepicker__control--date",
-						onClick: () => setOpen((o) => !o),
+						onClick: () => {
+							if (calendarOpen) {
+								focusCalendarDay(popupRef.current);
+								return;
+							}
+							focusCalendar.current = true;
+							setCalendarOpen(true);
+						},
 						children: [
 							/* @__PURE__ */ jsx(CalendarIcon, { className: "sbk-datetimepicker__icon" }),
 							/* @__PURE__ */ jsx("span", {
-								className: value !== void 0 ? "sbk-datetimepicker__value" : "sbk-datetimepicker__placeholder",
-								children: value !== void 0 ? formatDate(value, zone) : "Select a date"
+								className: value ? "sbk-datetimepicker__value" : "sbk-datetimepicker__placeholder",
+								children: value ? formatDay(value.date, now().date) : "Select a date"
 							}),
 							/* @__PURE__ */ jsx(ChevronDownIcon, { className: "sbk-datetimepicker__chevron" })
 						]
 					})
 				}), /* @__PURE__ */ jsxs("div", {
 					className: "sbk-datetimepicker__column",
-					children: [/* @__PURE__ */ jsxs("button", {
-						type: "button",
+					children: [/* @__PURE__ */ jsxs("label", {
+						ref: timeFieldRef,
 						className: "sbk-datetimepicker__control sbk-datetimepicker__control--time",
-						onClick: () => setOpen((o) => !o),
 						children: [
 							/* @__PURE__ */ jsx(ClockIcon, { className: "sbk-datetimepicker__icon" }),
-							/* @__PURE__ */ jsx("span", {
-								className: value !== void 0 ? "sbk-datetimepicker__value" : "sbk-datetimepicker__placeholder",
-								children: value !== void 0 ? formatTime$1(value, zone) : "Select a time"
+							/* @__PURE__ */ jsx("input", {
+								...input,
+								className: `sbk-datetimepicker__input${overlay ? " sbk-datetimepicker__input--behind" : ""}`
 							}),
-							/* @__PURE__ */ jsx(ChevronDownIcon, { className: "sbk-datetimepicker__chevron" })
+							/* @__PURE__ */ jsx(ChevronDownIcon, { className: "sbk-datetimepicker__chevron" }),
+							overlay && /* @__PURE__ */ jsx("span", {
+								className: "sbk-datetimepicker__content",
+								"aria-hidden": "true",
+								children: /* @__PURE__ */ jsx("span", {
+									className: "sbk-datetimepicker__content-text",
+									children: timeDisplay
+								})
+							})
 						]
-					}), /* @__PURE__ */ jsxs("p", {
+					}), /* @__PURE__ */ jsx("p", {
 						className: "sbk-datetimepicker__timezone",
-						children: ["Time zone: ", timeZoneLabel(zone)]
+						children: `Time zone: ${timeZoneLabel(zone)}`
 					})]
 				})]
 			}),
-			open && /* @__PURE__ */ jsx(Popover, {
-				anchorRef: rootRef,
-				onDismiss: () => setOpen(false),
-				children: /* @__PURE__ */ jsxs("div", {
-					className: "sbk-datetimepicker__popup",
-					children: [/* @__PURE__ */ jsx(Calendar, {
-						value: draftDate,
-						onSelect: setDraftDate
-					}), /* @__PURE__ */ jsxs("div", {
-						className: "sbk-datetimepicker__time-row",
-						children: [/* @__PURE__ */ jsx("input", {
-							type: "time",
-							className: "sbk-datetimepicker__time-input",
-							value: draftTime,
-							onChange: (e) => setDraftTime(e.target.value)
-						}), /* @__PURE__ */ jsx("button", {
-							type: "button",
-							className: "sbk-datetimepicker__apply",
-							onClick: apply,
-							disabled: !draftDate,
-							children: "Apply"
-						})]
-					})]
+			calendarOpen && /* @__PURE__ */ jsx(CalendarPopover, {
+				anchorRef: dateRef,
+				popupRef,
+				value: value?.date,
+				onSelect: pickDate,
+				onClear: value ? clear : void 0,
+				onDismiss: () => setCalendarOpen(false),
+				onEscape: closeCalendar,
+				focusOnOpen: () => {
+					const focus = focusCalendar.current;
+					focusCalendar.current = false;
+					return focus;
+				},
+				offsetX: -4
+			}),
+			combo.open && /* @__PURE__ */ jsx(Popover, {
+				anchorRef: timeFieldRef,
+				onDismiss: () => combo.setOpen(false),
+				offsetX: -12,
+				gap: -4,
+				children: /* @__PURE__ */ jsx("div", {
+					className: "sbk-timepicker__menu sbk-timepicker__menu--wide",
+					role: "listbox",
+					id: combo.listId,
+					ref: listRef,
+					children: rows.map((row, i) => /* @__PURE__ */ jsx("div", {
+						role: "option",
+						"aria-selected": row === value?.time,
+						className: `sbk-timepicker__option${row === CLEAR ? " sbk-timepicker__option--clear" : ""}${row === value?.time ? " sbk-timepicker__option--selected" : ""}`,
+						onMouseDown: (e) => e.preventDefault(),
+						onClick: () => row === CLEAR ? clear() : pickTime(row),
+						...combo.optionProps(i),
+						children: row === CLEAR ? "Clear selection" : formatTime(row)
+					}, row))
 				})
 			}),
 			dialog
@@ -6706,20 +8137,23 @@ function DateTimePicker({ element, blockId }) {
 }
 //#endregion
 //#region src/elements/FeedbackButtons.tsx
-/** Positive/negative feedback buttons, as seen on AI agent messages. Only one of the two can be
-* picked, matching Slack's own toggle behavior. */
+/**
+* Positive/negative feedback buttons, as seen on AI agent messages. As in Slack, the pair is a
+* radio group labelled "Rating": the picked button stays checked and shows a filled thumb, picking
+* it again sends the action again, and the arrow keys move and pick. Slack keeps feedback out of
+* `state.values`.
+*/
 function FeedbackButtons({ element, blockId }) {
-	const { setValue, dispatch } = useBlockKit();
+	const { dispatch } = useBlockKit();
 	const [picked, setPicked] = useState();
+	const refs = {
+		positive: useRef(null),
+		negative: useRef(null)
+	};
 	const actionId = element.action_id ?? "";
 	function choose(kind) {
-		const next = picked === kind ? void 0 : kind;
-		setPicked(next);
+		setPicked(kind);
 		const button = kind === "positive" ? element.positive_button : element.negative_button;
-		setValue(blockId, actionId, next ? {
-			type: "feedback_buttons",
-			value: button.value
-		} : void 0);
 		dispatch({
 			type: "feedback_buttons",
 			action_id: actionId,
@@ -6731,29 +8165,44 @@ function FeedbackButtons({ element, blockId }) {
 			}
 		});
 	}
-	return /* @__PURE__ */ jsxs("div", {
-		className: "sbk-feedback-buttons",
-		children: [/* @__PURE__ */ jsx(Tooltip, {
-			label: element.positive_button.text.text,
-			children: /* @__PURE__ */ jsx("button", {
-				type: "button",
-				className: `sbk-icon-button${picked === "positive" ? " sbk-icon-button--active" : ""}`,
-				onClick: () => choose("positive"),
-				"aria-label": element.positive_button.accessibility_label ?? element.positive_button.text.text,
-				"aria-pressed": picked === "positive",
-				children: /* @__PURE__ */ jsx(ThumbsUpIcon, {})
-			})
-		}), /* @__PURE__ */ jsx(Tooltip, {
-			label: element.negative_button.text.text,
+	function onKeyDown(e) {
+		if (![
+			"ArrowLeft",
+			"ArrowRight",
+			"ArrowUp",
+			"ArrowDown"
+		].includes(e.key)) return;
+		e.preventDefault();
+		const next = picked === "positive" || !picked && e.currentTarget === refs.positive.current ? "negative" : "positive";
+		choose(next);
+		refs[next].current?.focus();
+	}
+	const tabStop = picked ?? "positive";
+	function button(kind) {
+		const spec = kind === "positive" ? element.positive_button : element.negative_button;
+		const checked = picked === kind;
+		const Icon = kind === "positive" ? checked ? ThumbsUpFilledIcon : ThumbsUpIcon : checked ? ThumbsDownFilledIcon : ThumbsDownIcon;
+		return /* @__PURE__ */ jsx(Tooltip, {
+			label: spec.text.text,
 			children: /* @__PURE__ */ jsx("button", {
+				ref: refs[kind],
 				type: "button",
-				className: `sbk-icon-button${picked === "negative" ? " sbk-icon-button--active" : ""}`,
-				onClick: () => choose("negative"),
-				"aria-label": element.negative_button.accessibility_label ?? element.negative_button.text.text,
-				"aria-pressed": picked === "negative",
-				children: /* @__PURE__ */ jsx(ThumbsDownIcon, {})
+				role: "radio",
+				className: "sbk-icon-button",
+				onClick: () => choose(kind),
+				onKeyDown,
+				"aria-label": spec.accessibility_label ?? spec.text.text,
+				"aria-checked": checked,
+				tabIndex: tabStop === kind ? 0 : -1,
+				children: /* @__PURE__ */ jsx(Icon, {})
 			})
-		})]
+		});
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: "sbk-feedback-buttons",
+		role: "radiogroup",
+		"aria-label": "Rating",
+		children: [button("positive"), button("negative")]
 	});
 }
 //#endregion
@@ -6838,7 +8287,9 @@ function IconButton({ element, blockId }) {
 			type: "icon_button",
 			action_id: element.action_id ?? "",
 			block_id: blockId,
-			...element.value !== void 0 ? { value: element.value } : {}
+			...element.value !== void 0 ? { value: element.value } : {},
+			icon: element.icon,
+			text: element.text
 		});
 	}
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Tooltip, {
@@ -6854,85 +8305,18 @@ function IconButton({ element, blockId }) {
 }
 //#endregion
 //#region src/elements/ImageElement.tsx
+/** An image element; a `slack_file` one shows through `resolvers.slackFile`, like the image block. */
 function ImageElement({ element }) {
+	const { resolvers } = useBlockKit();
+	const slackFile = element.slack_file;
+	const src = "image_url" in element ? element.image_url : slackFile ? resolvers.slackFile?.(slackFile)?.url : void 0;
 	return /* @__PURE__ */ jsx("img", {
 		className: "sbk-image-element",
-		src: "image_url" in element ? element.image_url : void 0,
+		src,
 		alt: element.alt_text
 	});
 }
 //#endregion
-//#region src/elements/useMenuNavigation.ts
-/**
-* Slack's menus and option lists keep one "active" row that follows both the pointer and the
-* arrow keys (`c-menu_item--highlighted` / `c-select_options_list__option--active`), so hover and
-* keyboard highlight share one style. Returns the active index plus handlers for the list.
-*/
-function useMenuNavigation({ open, count, initialIndex = -1, onChoose, onClose, onOpen, listRef }) {
-	const [active, setActive] = useState(-1);
-	useEffect(() => {
-		setActive(open ? initialIndex : -1);
-	}, [open]);
-	useEffect(() => {
-		if (active >= count) setActive(count - 1);
-	}, [active, count]);
-	useEffect(() => {
-		(listRef?.current?.querySelector("[data-active]"))?.scrollIntoView?.({ block: "nearest" });
-	}, [active, listRef]);
-	function onKeyDown(e) {
-		if (!open) {
-			if (e.key === "ArrowDown" || e.key === "ArrowUp") {
-				e.preventDefault();
-				onOpen?.();
-			}
-			return;
-		}
-		switch (e.key) {
-			case "ArrowDown":
-				e.preventDefault();
-				setActive((i) => count === 0 ? -1 : (i + 1) % count);
-				break;
-			case "ArrowUp":
-				e.preventDefault();
-				setActive((i) => count === 0 ? -1 : i <= 0 ? count - 1 : i - 1);
-				break;
-			case "Home":
-				e.preventDefault();
-				setActive(count > 0 ? 0 : -1);
-				break;
-			case "End":
-				e.preventDefault();
-				setActive(count - 1);
-				break;
-			case "Enter":
-				if (active >= 0 && active < count) {
-					e.preventDefault();
-					onChoose(active);
-				}
-				break;
-			case "Escape":
-				e.preventDefault();
-				onClose();
-		}
-	}
-	/** Props for the row at `index`: pointer movement moves the highlight, like Slack's lists. */
-	function itemProps(index) {
-		return {
-			onMouseEnter: () => setActive(index),
-			onMouseMove: () => {
-				if (active !== index) setActive(index);
-			},
-			"data-active": active === index || void 0
-		};
-	}
-	return {
-		active,
-		setActive,
-		onKeyDown,
-		itemProps
-	};
-}
-//#endregion
 //#region src/elements/Overflow.tsx
 function Overflow({ element, blockId }) {
 	const { dispatch } = useBlockKit();
@@ -6942,14 +8326,19 @@ function Overflow({ element, blockId }) {
 	const triggerRef = useRef(null);
 	const listRef = useRef(null);
 	const actionId = element.action_id ?? "";
+	const idPrefix = useId();
 	async function choose(option) {
 		if (!await ask()) return;
 		setOpen(false);
+		triggerRef.current?.focus();
 		dispatch({
 			type: "overflow",
 			action_id: actionId,
 			block_id: blockId,
-			selected_option: option
+			selected_option: {
+				text: option.text,
+				...option.value !== void 0 ? { value: option.value } : {}
+			}
 		});
 		if (option.url) window.open(option.url, "_blank", "noopener,noreferrer");
 	}
@@ -6985,16 +8374,23 @@ function Overflow({ element, blockId }) {
 			open && /* @__PURE__ */ jsx(Popover, {
 				anchorRef: rootRef,
 				onDismiss: () => setOpen(false),
+				onPlaced: () => listRef.current?.focus(),
 				children: /* @__PURE__ */ jsx("div", {
 					className: "sbk-overflow__menu",
 					role: "menu",
 					ref: listRef,
+					tabIndex: -1,
+					"aria-activedescendant": nav.active >= 0 ? `${idPrefix}-${nav.active}` : void 0,
 					children: element.options.map((option, i) => /* @__PURE__ */ jsx("div", {
+						id: `${idPrefix}-${i}`,
 						role: "menuitem",
 						className: "sbk-overflow__option",
 						onClick: () => choose(option),
 						...nav.itemProps(i),
-						children: option.text.text
+						children: /* @__PURE__ */ jsx("span", {
+							className: "sbk-overflow__label",
+							children: option.text.text
+						})
 					}, option.value ?? i))
 				})
 			}),
@@ -7028,7 +8424,8 @@ function RadioButtons({ element, blockId }) {
 			type: "radio_buttons",
 			action_id: actionId,
 			block_id: blockId,
-			selected_option: option
+			selected_option: option,
+			...element.initial_option !== void 0 ? { initial_option: element.initial_option } : {}
 		});
 	};
 	return /* @__PURE__ */ jsxs("div", {
@@ -7229,20 +8626,37 @@ function RichTextInput({ element, blockId }) {
 			rich_text_value: element.initial_value
 		});
 	}, []);
+	const config = element;
+	const dispatchEnabled = config.__dispatchAction === true;
+	const triggers = config.dispatch_action_config?.trigger_actions_on ?? ["on_enter_pressed"];
+	const typing = useRef(void 0);
+	useEffect(() => () => clearTimeout(typing.current), []);
+	function fire() {
+		clearTimeout(typing.current);
+		dispatch({
+			type: "rich_text_input",
+			action_id: actionId,
+			block_id: blockId,
+			rich_text_value: toRichText(ref.current?.innerText ?? "")
+		});
+	}
 	function onInput() {
 		const text = ref.current?.innerText ?? "";
 		setEmpty(text.trim() === "");
-		const richText = toRichText(text);
 		setValue(blockId, actionId, {
 			type: "rich_text_input",
-			rich_text_value: richText
-		});
-		dispatch({
-			type: "rich_text_input",
-			action_id: actionId,
-			block_id: blockId,
-			rich_text_value: richText
+			rich_text_value: toRichText(text)
 		});
+		if (dispatchEnabled && triggers.includes("on_character_entered")) {
+			clearTimeout(typing.current);
+			typing.current = setTimeout(fire, 300);
+		}
+	}
+	function onKeyDown(e) {
+		if (e.key !== "Enter" || e.shiftKey || !dispatchEnabled) return;
+		if (!triggers.includes("on_enter_pressed")) return;
+		e.preventDefault();
+		fire();
 	}
 	const placeholder = element.placeholder?.text;
 	return /* @__PURE__ */ jsxs("div", {
@@ -7261,6 +8675,7 @@ function RichTextInput({ element, blockId }) {
 					...invalid,
 					"aria-label": placeholder ?? actionId,
 					onInput,
+					onKeyDown,
 					style: {
 						minHeight: element.min_lines ? `${element.min_lines * 22}px` : void 0,
 						maxHeight: element.max_lines ? `${element.max_lines * 22}px` : void 0
@@ -7280,6 +8695,160 @@ function RichTextInput({ element, blockId }) {
 	});
 }
 //#endregion
+//#region src/elements/accessoryContext.ts
+/**
+* True for an element rendered as a section block's accessory. Slack draws some elements
+* differently there: a multi-select becomes a small button that opens a "Select options" dialog.
+*/
+const SectionAccessoryContext = createContext(false);
+//#endregion
+//#region src/elements/SelectDialog.tsx
+const optionId = (option) => option.value ?? option.text.text;
+/**
+* Slack's selection dialog, which a multi-select in a section accessory opens instead of an inline
+* menu, titled with the select's placeholder. Picks are a draft: the option list stays open while
+* choosing, and nothing is sent until Confirm. Cancel, the close button and Escape discard the
+* draft. A users, conversations or channels select has no options to list; `addTyped` turns what's
+* typed into one on Enter.
+*/
+function SelectDialog({ options, initial, placeholder, addTyped, onConfirm, onCancel }) {
+	const { theme } = useBlockKit();
+	const titleId = useId();
+	const [draft, setDraft] = useState(initial);
+	const [query, setQuery] = useState("");
+	const dialogRef = useRef(null);
+	const fieldRef = useRef(null);
+	const listRef = useRef(null);
+	const rows = options.filter((o) => o.text.text.toLowerCase().includes(query.toLowerCase()));
+	const chosen = (option) => draft.some((d) => optionId(d) === optionId(option));
+	const toggle = (option) => setDraft((current) => chosen(option) ? current.filter((d) => optionId(d) !== optionId(option)) : [...current, option]);
+	const combo = useCombobox({
+		query,
+		onQueryChange: setQuery,
+		count: rows.length,
+		initialIndex: 0,
+		onChoose: (i) => {
+			const option = rows[i];
+			if (option) toggle(option);
+		},
+		onSubmitQuery: addTyped ? (typed) => {
+			const option = addTyped(typed);
+			if (!chosen(option)) setDraft((current) => [...current, option]);
+			setQuery("");
+		} : void 0,
+		listRef
+	});
+	useEffect(() => {
+		dialogRef.current?.focus();
+	}, []);
+	if (typeof document === "undefined") return null;
+	return createPortal(/* @__PURE__ */ jsx("div", {
+		className: "sbk-root sbk-select-dialog__overlay",
+		"data-theme": theme,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: dialogRef,
+			className: "sbk-select-dialog",
+			tabIndex: -1,
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-labelledby": titleId,
+			onKeyDown: (e) => {
+				if (e.key !== "Escape") return;
+				e.preventDefault();
+				e.stopPropagation();
+				onCancel();
+			},
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "sbk-select-dialog__header",
+					children: [/* @__PURE__ */ jsx("h2", {
+						className: "sbk-select-dialog__title",
+						id: titleId,
+						children: placeholder
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "sbk-select-dialog__close",
+						"aria-label": "Close",
+						onClick: onCancel,
+						children: /* @__PURE__ */ jsx(CloseIcon, {})
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "sbk-select-dialog__body",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "sbk-select-dialog__field",
+						ref: fieldRef,
+						children: [
+							draft.map((option) => /* @__PURE__ */ jsxs("span", {
+								className: "sbk-select__chip",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "sbk-select__chip-label",
+									children: /* @__PURE__ */ jsx("span", {
+										className: "sbk-select__chip-text",
+										children: /* @__PURE__ */ jsx("span", { children: option.text.text })
+									})
+								}), /* @__PURE__ */ jsx("button", {
+									type: "button",
+									className: "sbk-select__chip-remove",
+									"aria-label": `Remove ${option.text.text}`,
+									onClick: () => toggle(option),
+									children: /* @__PURE__ */ jsx(CloseIcon, {})
+								})]
+							}, optionId(option))),
+							draft.length === 0 && query === "" && /* @__PURE__ */ jsx("span", {
+								className: "sbk-select-dialog__placeholder",
+								"aria-hidden": "true",
+								children: placeholder
+							}),
+							/* @__PURE__ */ jsx("input", {
+								...combo.inputProps(void 0, placeholder),
+								placeholder: "",
+								className: "sbk-select-dialog__input"
+							})
+						]
+					}), combo.open && /* @__PURE__ */ jsx(Popover, {
+						anchorRef: fieldRef,
+						onDismiss: () => combo.setOpen(false),
+						children: /* @__PURE__ */ jsx("div", {
+							className: "sbk-select__menu sbk-select-dialog__menu",
+							role: "listbox",
+							"aria-multiselectable": "true",
+							id: combo.listId,
+							ref: listRef,
+							children: rows.map((option, i) => /* @__PURE__ */ jsx("div", {
+								role: "option",
+								"aria-selected": chosen(option),
+								className: `sbk-select__option${chosen(option) ? " sbk-select__option--selected" : ""}`,
+								onMouseDown: (e) => e.preventDefault(),
+								onClick: () => toggle(option),
+								...combo.optionProps(i),
+								children: /* @__PURE__ */ jsx("span", {
+									className: "sbk-select__option-text",
+									children: /* @__PURE__ */ jsx(Text, { text: option.text })
+								})
+							}, optionId(option)))
+						})
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "sbk-select-dialog__footer",
+					children: [/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "sbk-modal__button",
+						onClick: onCancel,
+						children: "Cancel"
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "sbk-modal__button sbk-modal__button--primary",
+						onClick: () => onConfirm(draft),
+						children: "Confirm"
+					})]
+				})
+			]
+		})
+	}), document.body);
+}
+//#endregion
 //#region src/elements/Select.tsx
 function parseType(type) {
 	const multi = type.startsWith("multi_");
@@ -7334,6 +8903,31 @@ function responseGroups(response) {
 	}));
 	return [{ options: response.options }];
 }
+/**
+* Whether a conversations select's `filter` lets an entry through, as Slack applies it: `include`
+* names the kinds listed (`im` for people, `private` and `public` for channels; group DMs aren't in
+* the directory), and `exclude_bot_users` leaves out bots.
+*/
+function matchesConversationFilter(entry, filter) {
+	if (!filter) return true;
+	if (entry.type === "user" && entry.bot && filter.exclude_bot_users) return false;
+	const include = filter.include;
+	if (!include || include.length === 0) return true;
+	const kind = entry.type === "user" ? "im" : entry.private ? "private" : "public";
+	return include.includes(kind);
+}
+/**
+* Whether `text` matches what's typed, as Slack's lists filter: case-insensitively, at the start of
+* the text or of any word in it (after a space, hyphen, bracket or other punctuation), never in the
+* middle of a word.
+*/
+function matchesQuery(text, query) {
+	const q = query.toLowerCase();
+	if (!q) return true;
+	const t = text.toLowerCase();
+	for (let i = t.indexOf(q); i !== -1; i = t.indexOf(q, i + 1)) if (i === 0 || !/[\p{L}\p{N}]/u.test(t[i - 1])) return true;
+	return false;
+}
 /** Slack's default `min_query_length` for an `external_select`. */
 const DEFAULT_MIN_QUERY_LENGTH = 3;
 /** How long typing must pause before an `external_select` asks the app for options. */
@@ -7349,7 +8943,6 @@ function Select({ element, blockId }) {
 	const [query, setQuery] = useState("");
 	const rootRef = useRef(null);
 	const triggerRef = useRef(null);
-	useFocusOnLoad(element, triggerRef);
 	const invalid = useInvalidProps();
 	const listRef = useRef(null);
 	const remote = source === "external" && loadOptions !== void 0;
@@ -7388,7 +8981,11 @@ function Select({ element, blockId }) {
 		actionId,
 		blockId
 	]);
+	const entries = source === "users" || source === "conversations" || source === "channels" ? (resolvers.directory?.(source) ?? []).filter((e) => source !== "conversations" || matchesConversationFilter(e, element.filter)) : [];
+	const entryById = new Map(entries.map((e) => [e.id, e]));
 	const resolveLabel = (id) => {
+		const known = entryById.get(id);
+		if (known) return known.name;
 		return (source === "users" ? resolvers.user : source === "channels" || source === "conversations" ? resolvers.channel : void 0)?.(id) ?? id;
 	};
 	/** Slack's own Builder preview can't resolve a fabricated id against the real directory, and
@@ -7437,6 +9034,7 @@ function Select({ element, blockId }) {
 			action_id: actionId,
 			block_id: blockId,
 			...fields,
+			...!multi && element.initial_option ? { initial_option: element.initial_option } : {},
 			...element.placeholder ? { placeholder: element.placeholder } : {}
 		});
 	}
@@ -7462,54 +9060,269 @@ function Select({ element, blockId }) {
 	async function removeItem(id) {
 		await commit(items.filter((i) => i.id !== id));
 	}
-	const filteredOptions = source === "static" ? allOptions(element).filter((o) => o.text.text.toLowerCase().includes(query.toLowerCase())) : [];
-	const matches = (o) => o.text.text.toLowerCase().includes(query.toLowerCase());
-	const visibleGroups = remote ? remoteGroups ?? [] : source !== "static" ? [] : element.option_groups ? element.option_groups.map((group) => ({
+	const matches = (o) => matchesQuery(o.text.text, query);
+	const filteredOptions = source === "static" ? allOptions(element).filter(matches) : [];
+	const directoryOptions = entries.filter((e) => matchesQuery(e.name, query) || e.type === "user" && e.realName !== void 0 && matchesQuery(e.realName, query)).map((e) => ({
+		text: {
+			type: "plain_text",
+			text: e.name
+		},
+		value: e.id
+	}));
+	const chosen = !multi && entries.length > 0 && !query ? items[0] : void 0;
+	const pinned = chosen && !entryById.has(chosen.id) ? chosen : void 0;
+	if (pinned) directoryOptions.unshift({
+		text: {
+			type: "plain_text",
+			text: pinned.label || resolveLabel(pinned.id)
+		},
+		value: pinned.id
+	});
+	const visibleGroups = remote ? remoteGroups ?? [] : source !== "static" ? directoryOptions.length > 0 || entries.length > 0 ? [{ options: directoryOptions }] : [] : element.option_groups ? element.option_groups.map((group) => ({
 		label: group.label.text,
 		options: group.options.filter(matches)
-	})) : [{ options: filteredOptions }];
+	})).filter((group) => group.options.length > 0) : [{ options: filteredOptions }];
 	const flatOptions = visibleGroups.flatMap((g) => g.options);
 	const isSelected = (option) => items.some((i) => i.id === (option.value ?? option.text.text));
-	const nav = useMenuNavigation({
+	const showSearchOnly = source !== "static";
+	const buttonSelect = source === "static" && !multi;
+	const typeable = !multi && !buttonSelect;
+	const inAccessory = useContext(SectionAccessoryContext);
+	const inInputBlock = useInInputBlock();
+	const dialogMode = inAccessory && multi && source !== "external";
+	const directory = source === "users" || source === "conversations" || source === "channels";
+	/** An item as a dialog option: a directory id becomes an option labelled as it's shown. */
+	const itemToOption = (item) => item.option ?? {
+		text: {
+			type: "plain_text",
+			text: item.label || resolveLabel(item.id)
+		},
+		value: item.id
+	};
+	const [dialogOpen, setDialogOpen] = useState(false);
+	const placeholder = element.placeholder?.text ?? "Select an item";
+	const placeholderRow = buttonSelect && items.length === 0;
+	/** The rows before the options: the button select's "--placeholder--" row. */
+	const lead = placeholderRow ? 1 : 0;
+	const combo = useCombobox({
 		open,
-		count: flatOptions.length,
-		initialIndex: Math.max(0, flatOptions.findIndex(isSelected)),
+		onOpenChange: setOpen,
+		query,
+		onQueryChange: setQuery,
+		count: flatOptions.length + lead,
+		initialIndex: typeable || placeholderRow ? 0 : Math.max(0, flatOptions.findIndex(isSelected)),
+		holdFirstArrow: flatOptions.findIndex(isSelected) < 0 || query.trim() !== "",
 		onChoose: (i) => {
-			const option = flatOptions[i];
+			if (i < lead) {
+				combo.setOpen(false);
+				return;
+			}
+			const option = flatOptions[i - lead];
 			if (option) selectItem(optionToItem(option));
 		},
-		onClose: () => {
-			setOpen(false);
-			triggerRef.current?.focus();
+		onSubmitQuery: (typed) => {
+			if (showSearchOnly && !remote) selectItem({
+				id: typed,
+				label: resolveLabel(typed)
+			});
 		},
-		onOpen: () => setOpen(true),
-		listRef
+		listRef,
+		returnFocusRef: typeable ? void 0 : triggerRef,
+		keepQuery: typeable,
+		typedHighlight: !buttonSelect,
+		chosenAsPlaceholder: !typeable
 	});
+	useFocusOnLoad(element, typeable ? combo.inputRef : triggerRef);
 	const closedLabel = multi ? void 0 : items[0] ? items[0].label || resolveLabel(items[0].id) : void 0;
-	const placeholder = element.placeholder?.text ?? "Select an item";
-	const showSearchOnly = source !== "static";
+	const belowMinimum = source === "external" && minQueryLength > 0 && query.length < minQueryLength;
+	const emptyMessage = belowMinimum ? `Type a minimum of ${minQueryLength} characters to see options.` : !loading && flatOptions.length === 0 && (!remote || remoteGroups !== void 0) ? "nothing" : void 0;
+	const wideList = (multi || typeable || buttonSelect) && inInputBlock;
+	const menu = open && /* @__PURE__ */ jsx(Popover, {
+		anchorRef: rootRef,
+		onDismiss: () => combo.setOpen(false),
+		offsetX: typeable || buttonSelect || wideList ? -12 : 0,
+		gap: -4,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: `sbk-select__menu${typeable || buttonSelect ? " sbk-select__menu--typeable" : ""}${wideList ? " sbk-select__menu--wide" : ""}`,
+			role: "listbox",
+			id: combo.listId,
+			ref: listRef,
+			children: [
+				!typeable && !buttonSelect && (showSearchOnly && entries.length === 0 || (entries.length > 0 ? entries.length : allOptions(element).length) > 8) && /* @__PURE__ */ jsxs("div", {
+					className: "sbk-select__search",
+					children: [/* @__PURE__ */ jsx(SearchIcon$1, {}), /* @__PURE__ */ jsx("input", {
+						autoFocus: true,
+						className: "sbk-select__search-input",
+						placeholder: source === "static" || source === "external" ? "Search options" : `Search ${source}`,
+						value: query,
+						onChange: (e) => setQuery(e.target.value)
+					})]
+				}),
+				placeholderRow && /* @__PURE__ */ jsx(SelectOption, {
+					option: { text: {
+						type: "plain_text",
+						text: `--${placeholder}--`
+					} },
+					selected: true,
+					check: true,
+					onSelect: () => combo.setOpen(false),
+					navProps: combo.optionProps(0)
+				}),
+				!belowMinimum && (() => {
+					let index = lead;
+					return visibleGroups.map((group, gi) => {
+						const rows = group.options.map((option) => {
+							const i = index++;
+							return /* @__PURE__ */ jsx(SelectOption, {
+								option,
+								entry: option.value !== void 0 ? entryById.get(option.value) : void 0,
+								content: pinned && option.value === pinned.id && isUnresolved(pinned) ? unresolvedValue(pinned.id) : void 0,
+								selected: isSelected(option),
+								check: (multi || typeable || buttonSelect) && isSelected(option),
+								typed: combo.typed && combo.active === i,
+								onSelect: () => selectItem(optionToItem(option)),
+								navProps: combo.optionProps(i)
+							}, option.value ?? i);
+						});
+						return group.label === void 0 ? rows : /* @__PURE__ */ jsxs("div", {
+							className: "sbk-select__group",
+							children: [
+								gi > 0 && /* @__PURE__ */ jsx("div", {
+									className: "sbk-select__divider",
+									role: "separator"
+								}),
+								/* @__PURE__ */ jsx("div", {
+									className: "sbk-select__group-label",
+									children: group.label
+								}),
+								rows
+							]
+						}, gi);
+					});
+				})(),
+				remote && loading && !belowMinimum && /* @__PURE__ */ jsx("div", {
+					className: "sbk-select__status",
+					children: "Loading…"
+				}),
+				emptyMessage && /* @__PURE__ */ jsx("div", {
+					className: "sbk-select__option sbk-select__option--disabled",
+					role: "option",
+					"aria-disabled": "true",
+					"aria-selected": "false",
+					children: /* @__PURE__ */ jsx("span", {
+						className: "sbk-select__no-results",
+						children: emptyMessage === "nothing" ? "😕 Nothing could be found." : emptyMessage
+					})
+				}),
+				showSearchOnly && items.length > 0 && multi && /* @__PURE__ */ jsx("div", {
+					className: "sbk-select__group-label",
+					children: "Selected"
+				}),
+				showSearchOnly && multi && items.map((item) => /* @__PURE__ */ jsx("div", {
+					className: "sbk-select__option sbk-select__option--selected",
+					children: item.label || resolveLabel(item.id)
+				}, item.id))
+			]
+		})
+	});
+	if (dialogMode) {
+		const closeDialog = () => {
+			setDialogOpen(false);
+			triggerRef.current?.focus();
+		};
+		return /* @__PURE__ */ jsxs("div", {
+			className: `sbk-select sbk-select--multi${sizeClass}`,
+			ref: rootRef,
+			children: [
+				/* @__PURE__ */ jsx("button", {
+					ref: triggerRef,
+					type: "button",
+					className: "sbk-select__control",
+					onClick: () => setDialogOpen(true),
+					"aria-haspopup": "dialog",
+					"aria-expanded": dialogOpen,
+					...invalid,
+					children: /* @__PURE__ */ jsx("span", {
+						className: "sbk-select__placeholder",
+						children: items.length > 0 ? `${items.length} selected` : placeholder
+					})
+				}),
+				dialogOpen && /* @__PURE__ */ jsx(SelectDialog, {
+					options: directory ? [] : allOptions(element),
+					initial: items.map(itemToOption),
+					placeholder,
+					addTyped: directory ? (typed) => itemToOption({
+						id: typed,
+						label: resolveLabel(typed)
+					}) : void 0,
+					onCancel: closeDialog,
+					onConfirm: async (selected) => {
+						closeDialog();
+						if (!await ask()) return;
+						await commit(selected.map((o) => directory ? {
+							id: o.value ?? o.text.text,
+							label: ""
+						} : optionToItem(o)));
+					}
+				}),
+				dialog
+			]
+		});
+	}
+	if (typeable) {
+		const unresolved = items[0] !== void 0 && isUnresolved(items[0]);
+		const display = unresolved ? void 0 : closedLabel;
+		const overlay = (display !== void 0 || unresolved) && !open && !query;
+		return /* @__PURE__ */ jsxs("div", {
+			className: `sbk-select sbk-select--typeable${sizeClass}`,
+			ref: rootRef,
+			children: [
+				/* @__PURE__ */ jsxs("label", {
+					className: "sbk-select__control",
+					children: [
+						/* @__PURE__ */ jsx("input", {
+							...combo.inputProps(display, placeholder),
+							...invalid,
+							className: `sbk-select__input${overlay ? " sbk-select__input--behind" : ""}`
+						}),
+						/* @__PURE__ */ jsx(ChevronDownIcon, { className: "sbk-select__chevron" }),
+						overlay && /* @__PURE__ */ jsx("span", {
+							className: "sbk-select__content",
+							"aria-hidden": "true",
+							children: unresolved && items[0] ? unresolvedValue(items[0].id) : /* @__PURE__ */ jsx("span", {
+								className: "sbk-select__content-text",
+								children: display
+							})
+						})
+					]
+				}),
+				menu,
+				dialog
+			]
+		});
+	}
 	return /* @__PURE__ */ jsxs("div", {
-		className: `sbk-select${multi ? " sbk-select--multi" : ""}${multi && items.length > 0 ? " sbk-select--chips" : ""}${sizeClass}`,
+		className: `sbk-select${buttonSelect ? " sbk-select--button" : ""}${multi ? " sbk-select--multi" : ""}${multi && items.length > 0 ? " sbk-select--chips" : ""}${sizeClass}`,
 		ref: rootRef,
-		onKeyDown: nav.onKeyDown,
+		onKeyDown: combo.onKeyDown,
 		children: [
-			multi && element.max_selected_items && /* @__PURE__ */ jsxs("p", {
+			multi && element.max_selected_items && /* @__PURE__ */ jsx("p", {
 				className: "sbk-select__max-info",
-				children: [
-					"You can select up to ",
-					element.max_selected_items,
-					" ",
-					element.max_selected_items === 1 ? "item" : "items",
-					"."
-				]
+				children: `You can select up to ${element.max_selected_items} ${element.max_selected_items === 1 ? "item" : "items"}.`
 			}),
 			/* @__PURE__ */ jsxs("button", {
 				ref: triggerRef,
 				type: "button",
 				className: "sbk-select__control",
-				onClick: () => setOpen((o) => !o),
+				onClick: (e) => {
+					if (buttonSelect) e.currentTarget.focus();
+					setOpen((o) => !o);
+				},
+				role: buttonSelect ? "combobox" : void 0,
 				"aria-haspopup": "listbox",
 				"aria-expanded": open,
+				"aria-controls": buttonSelect && open ? combo.listId : void 0,
+				"aria-activedescendant": buttonSelect && open && combo.active >= 0 ? combo.optionId(combo.active) : void 0,
 				...invalid,
 				children: [multi ? items.length > 0 ? /* @__PURE__ */ jsx("span", {
 					className: "sbk-select__chips",
@@ -7545,97 +9358,165 @@ function Select({ element, blockId }) {
 				}) : closedLabel ? items[0] && isUnresolved(items[0]) ? unresolvedValue(items[0].id) : /* @__PURE__ */ jsx("span", {
 					className: "sbk-select__value",
 					children: closedLabel
+				}) : buttonSelect ? /* @__PURE__ */ jsx("span", {
+					className: "sbk-select__value",
+					children: `--${placeholder}--`
 				}) : /* @__PURE__ */ jsx("span", {
 					className: "sbk-select__placeholder",
 					children: placeholder
-				}), /* @__PURE__ */ jsx(ChevronDownIcon, { className: "sbk-select__chevron" })]
-			}),
-			open && /* @__PURE__ */ jsx(Popover, {
-				anchorRef: rootRef,
-				onDismiss: () => setOpen(false),
-				children: /* @__PURE__ */ jsxs("div", {
-					className: "sbk-select__menu",
-					role: "listbox",
-					ref: listRef,
-					children: [
-						(showSearchOnly || allOptions(element).length > 8) && /* @__PURE__ */ jsxs("div", {
-							className: "sbk-select__search",
-							children: [/* @__PURE__ */ jsx(SearchIcon$1, {}), /* @__PURE__ */ jsx("input", {
-								autoFocus: true,
-								className: "sbk-select__search-input",
-								placeholder: source === "static" || source === "external" ? "Search options" : `Search ${source}`,
-								value: query,
-								onChange: (e) => setQuery(e.target.value),
-								onKeyDown: (e) => {
-									if (e.key === "Enter" && query.trim() && showSearchOnly && !remote) selectItem({
-										id: query.trim(),
-										label: resolveLabel(query.trim())
-									});
-								}
-							})]
-						}),
-						(() => {
-							let index = 0;
-							return visibleGroups.map((group, gi) => {
-								const rows = group.options.map((option) => {
-									const i = index++;
-									return /* @__PURE__ */ jsx(SelectOption, {
-										option,
-										selected: isSelected(option),
-										onSelect: () => selectItem(optionToItem(option)),
-										navProps: nav.itemProps(i)
-									}, option.value ?? i);
-								});
-								return group.label === void 0 ? rows : /* @__PURE__ */ jsxs("div", {
-									className: "sbk-select__group",
-									children: [/* @__PURE__ */ jsx("div", {
-										className: "sbk-select__group-label",
-										children: group.label
-									}), rows]
-								}, gi);
-							});
-						})(),
-						remote && loading && /* @__PURE__ */ jsx("div", {
-							className: "sbk-select__status",
-							children: "Loading…"
-						}),
-						remote && !loading && remoteGroups !== void 0 && flatOptions.length === 0 && /* @__PURE__ */ jsx("div", {
-							className: "sbk-select__status",
-							children: "No results"
-						}),
-						showSearchOnly && items.length > 0 && multi && /* @__PURE__ */ jsx("div", {
-							className: "sbk-select__group-label",
-							children: "Selected"
-						}),
-						showSearchOnly && multi && items.map((item) => /* @__PURE__ */ jsx("div", {
-							className: "sbk-select__option sbk-select__option--selected",
-							children: item.label || resolveLabel(item.id)
-						}, item.id))
-					]
-				})
+				}), buttonSelect ? /* @__PURE__ */ jsx(CaretDownIcon$1, { className: "sbk-select__chevron" }) : /* @__PURE__ */ jsx(ChevronDownIcon, { className: "sbk-select__chevron" })]
 			}),
+			menu,
 			dialog
 		]
 	});
 }
-function SelectOption({ option, selected, onSelect, navProps }) {
+/** Slack's presence and channel icons, 20×20 paths copied from Block Kit Builder. */
+const PRESENCE = {
+	active: {
+		label: "Active",
+		d: "M14.5 10a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0"
+	},
+	snoozed: {
+		label: "Active, notifications snoozed",
+		evenOdd: true,
+		d: "M11.25 3.5a.75.75 0 0 0 0 1.5h1.847l-2.411 2.756A.75.75 0 0 0 11.25 9h3.5a.75.75 0 0 0 0-1.5h-1.847l2.411-2.756A.75.75 0 0 0 14.75 3.5zM9.557 6.768C10.18 6.055 10 5.5 9.406 5.54a4.5 4.5 0 1 0 5.067 4.96H11.25a2.25 2.25 0 0 1-1.693-3.73"
+	},
+	slackbot: {
+		label: "Active",
+		evenOdd: true,
+		d: "M9.73 6.173q.15.203.27.422.12-.218.27-.422C10.72 5.557 11.425 5 12.352 5c1.045 0 1.73.492 2.136 1.122.389.605.511 1.32.511 1.82 0 .486-.044 1.377-.681 2.513-.633 1.127-1.833 2.463-4.083 3.888a.44.44 0 0 1-.472 0c-2.25-1.425-3.45-2.76-4.083-3.888C5.044 9.319 5 8.428 5 7.94c0-.499.122-1.214.511-1.82C5.916 5.492 6.601 5 7.647 5c.927 0 1.632.557 2.084 1.173"
+	}
+};
+const CHANNEL_HASH = "M9.74 2.878a.75.75 0 1 0-1.48-.255L7.68 6H3.75a.75.75 0 0 0 0 1.5h3.67L6.472 13H2.75a.75.75 0 0 0 0 1.5h3.463l-.452 2.623a.75.75 0 0 0 1.478.255l.496-2.878h3.228l-.452 2.623a.75.75 0 0 0 1.478.255l.496-2.878h3.765a.75.75 0 0 0 0-1.5h-3.506l.948-5.5h3.558a.75.75 0 0 0 0-1.5h-3.3l.54-3.122a.75.75 0 0 0-1.48-.255L12.43 6H9.2zM11.221 13l.948-5.5H8.942L7.994 13z";
+const CHANNEL_LOCK = "M10 1.5A4.5 4.5 0 0 0 5.5 6v1.5h-.25A2.25 2.25 0 0 0 3 9.75v6.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0 0 17 16.25v-6.5a2.25 2.25 0 0 0-2.25-2.25h-.25V6A4.5 4.5 0 0 0 10 1.5m3 6V6a3 3 0 1 0-6 0v1.5zM4.5 9.75A.75.75 0 0 1 5.25 9h9.5a.75.75 0 0 1 .75.75v6.5a.25.25 0 0 1-.25.25H4.75a.25.25 0 0 1-.25-.25z";
+/**
+* A person or channel in a directory-backed list, laid out as Slack's `c-member` and
+* `c-small_channel_entity` rows: a 20px avatar or 18px channel icon, 8px apart from the bold name,
+* then the person's "(you)" or badge, presence icon and full name.
+*/
+function DirectoryRow({ entry }) {
+	if (entry.type === "channel") return /* @__PURE__ */ jsxs("span", {
+		className: "sbk-select__member sbk-select__member--channel",
+		children: [/* @__PURE__ */ jsx("svg", {
+			className: "sbk-select__channel-icon",
+			"data-icon": entry.private ? "lock" : "hash",
+			viewBox: "0 0 20 20",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx("path", {
+				fill: "currentColor",
+				fillRule: "evenodd",
+				clipRule: "evenodd",
+				d: entry.private ? CHANNEL_LOCK : CHANNEL_HASH
+			})
+		}), /* @__PURE__ */ jsx("span", {
+			className: "sbk-select__member-text",
+			children: /* @__PURE__ */ jsx("span", {
+				className: "sbk-select__member-name",
+				children: entry.name
+			})
+		})]
+	});
+	const presence = entry.presence ? PRESENCE[entry.presence] : void 0;
+	return /* @__PURE__ */ jsxs("span", {
+		className: "sbk-select__member",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "sbk-select__avatar",
+			children: entry.avatarUrl && /* @__PURE__ */ jsx("img", {
+				src: entry.avatarUrl,
+				alt: ""
+			})
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "sbk-select__member-text",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "sbk-select__member-name",
+					children: /* @__PURE__ */ jsxs("strong", { children: [
+						entry.name,
+						entry.self && /* @__PURE__ */ jsx("span", {
+							className: "sbk-select__member-you",
+							children: "(you)"
+						}),
+						entry.badge && /* @__PURE__ */ jsx("span", {
+							className: "sbk-select__member-badge",
+							children: entry.badge
+						})
+					] })
+				}),
+				presence && /* @__PURE__ */ jsx("svg", {
+					className: "sbk-select__presence",
+					viewBox: "0 0 20 20",
+					role: "img",
+					"aria-label": presence.label,
+					children: /* @__PURE__ */ jsx("path", {
+						fill: "currentColor",
+						fillRule: presence.evenOdd ? "evenodd" : void 0,
+						clipRule: presence.evenOdd ? "evenodd" : void 0,
+						d: presence.d
+					})
+				}),
+				entry.realName && /* @__PURE__ */ jsx("span", {
+					className: "sbk-select__member-secondary",
+					children: entry.realName
+				})
+			]
+		})]
+	});
+}
+function SelectOption({ option, entry, content, selected, check, typed, onSelect, navProps }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: `sbk-select__option${selected ? " sbk-select__option--selected" : ""}`,
 		role: "option",
 		"aria-selected": selected,
+		"data-typed": typed || void 0,
 		onClick: onSelect,
 		...navProps,
-		children: [/* @__PURE__ */ jsx("span", {
-			className: "sbk-select__option-text",
-			children: /* @__PURE__ */ jsx(Text, { text: option.text })
-		}), option.description && /* @__PURE__ */ jsx("span", {
-			className: "sbk-select__option-description",
-			children: /* @__PURE__ */ jsx(Text, { text: option.description })
-		})]
+		children: [
+			check && /* @__PURE__ */ jsx("svg", {
+				className: "sbk-select__check",
+				viewBox: "0 0 16 22",
+				width: "16",
+				height: "22",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx("path", {
+					d: "M4.5 11.2 7 13.7l4.5-5.1",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "1.3",
+					strokeLinecap: "round",
+					strokeLinejoin: "round"
+				})
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "sbk-select__option-label",
+				children: [content !== void 0 ? content : entry ? /* @__PURE__ */ jsx(DirectoryRow, { entry }) : /* @__PURE__ */ jsx("span", {
+					className: "sbk-select__option-text",
+					children: /* @__PURE__ */ jsx(Text, { text: option.text })
+				}), option.description && /* @__PURE__ */ jsx("span", {
+					className: "sbk-select__option-description",
+					children: /* @__PURE__ */ jsx(Text, { text: option.description })
+				})]
+			}),
+			typed && /* @__PURE__ */ jsx("span", {
+				className: "sbk-select__shortcut",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx("span", {
+					className: "sbk-select__keycap",
+					children: "Enter"
+				})
+			})
+		]
 	});
 }
 //#endregion
 //#region src/elements/TextInput.tsx
+/** The Builder's placeholder for a field that sets none. Slack's email default isn't recorded yet. */
+const DEFAULT_PLACEHOLDER = {
+	plain_text_input: "Write something",
+	email_text_input: "Write something",
+	url_text_input: "Enter a URL",
+	number_input: "Enter a number"
+};
 const HTML_TYPE = {
 	plain_text_input: "text",
 	email_text_input: "email",
@@ -7664,6 +9545,7 @@ function TextInput({ element, blockId }) {
 		});
 	}
 	function fire(next) {
+		clearTimeout(typing.current);
 		dispatch({
 			type: element.type,
 			action_id: actionId,
@@ -7671,6 +9553,12 @@ function TextInput({ element, blockId }) {
 			value: next
 		});
 	}
+	const typing = useRef(void 0);
+	useEffect(() => () => clearTimeout(typing.current), []);
+	function fireAfterPause(next) {
+		clearTimeout(typing.current);
+		typing.current = setTimeout(() => fire(next), 300);
+	}
 	function onChange(next) {
 		if (element.type === "number_input") {
 			const pattern = element.is_decimal_allowed ? /^-?\d*\.?\d*$/ : /^-?\d*$/;
@@ -7678,148 +9566,73 @@ function TextInput({ element, blockId }) {
 		}
 		setLocalValue(next);
 		report(next);
-		if (dispatchEnabled && triggers.includes("on_character_entered")) fire(next);
+		if (dispatchEnabled && triggers.includes("on_character_entered")) fireAfterPause(next);
 	}
+	const length = [...value].length;
+	const tooLong = element.max_length !== void 0 && length > element.max_length;
+	const tooShort = element.min_length !== void 0 && length > 0 && length < element.min_length;
+	const outOfBounds = tooLong || tooShort;
+	const remaining = element.max_length !== void 0 && length > 0 ? element.max_length - length : void 0;
+	const countRef = useRef(null);
+	const [countWidth, setCountWidth] = useState(void 0);
+	useClientLayoutEffect(() => {
+		setCountWidth(countRef.current?.getBoundingClientRect().width);
+	}, [remaining]);
+	const countId = useId();
 	function onKeyDown(e) {
-		if (e.key === "Enter" && !element.multiline && dispatchEnabled && triggers.includes("on_enter_pressed")) fire(value);
+		if (e.key === "Enter" && !element.multiline && dispatchEnabled && triggers.includes("on_enter_pressed") && !outOfBounds) fire(value);
 	}
-	const placeholder = element.placeholder?.text ?? "Write something";
+	const placeholder = element.placeholder?.text ?? DEFAULT_PLACEHOLDER[element.type];
+	const invalidDescribed = invalid["aria-describedby"];
 	const commonProps = {
-		className: `sbk-text-input${sizeClass}`,
+		className: `sbk-text-input${sizeClass}${remaining !== void 0 ? " sbk-text-input--counted" : ""}`,
 		value,
 		placeholder,
-		onKeyDown,
-		ref: focusRef,
-		"aria-label": element.action_id,
-		...invalid
-	};
-	const leadingIcon = element.type === "email_text_input" ? /* @__PURE__ */ jsx(EmailIcon, { className: "sbk-text-input__icon" }) : element.type === "url_text_input" ? /* @__PURE__ */ jsx(LinkGlyphIcon, { className: "sbk-text-input__icon" }) : null;
-	if (element.multiline) return /* @__PURE__ */ jsx("textarea", {
-		...commonProps,
-		className: `sbk-text-input sbk-text-input--multiline${sizeClass}`,
-		onChange: (e) => onChange(e.target.value)
-	});
-	const input = /* @__PURE__ */ jsx("input", {
-		...commonProps,
-		type: HTML_TYPE[element.type],
-		inputMode: element.type === "number_input" ? element.is_decimal_allowed ? "decimal" : "numeric" : void 0,
-		minLength: element.min_length,
-		maxLength: element.max_length,
-		onChange: (e) => onChange(e.target.value)
-	});
-	if (!leadingIcon) return input;
-	return /* @__PURE__ */ jsxs("div", {
-		className: "sbk-text-input__wrap",
-		children: [leadingIcon, input]
-	});
-}
-//#endregion
-//#region src/elements/TimePicker.tsx
-/** Formats `HH:mm` the way Slack's closed timepicker shows it, e.g. "1:37 PM". */
-function formatTime(time) {
-	const [h = 0, m = 0] = time.split(":").map(Number);
-	const period = h >= 12 ? "PM" : "AM";
-	return `${h % 12 === 0 ? 12 : h % 12}:${String(m).padStart(2, "0")} ${period}`;
-}
-/** Every 30 minutes, as Slack's timepicker list offers. */
-function timeOptions() {
-	const times = [];
-	for (let h = 0; h < 24; h++) for (const m of [0, 30]) times.push(`${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`);
-	return times;
-}
-function TimePicker({ element, blockId }) {
-	const { setValue, dispatch } = useBlockKit();
-	const { ask, dialog } = useConfirm(element.confirm);
-	const [time, setTime] = useState(element.initial_time);
-	const [open, setOpen] = useState(false);
-	const rootRef = useRef(null);
-	const triggerRef = useRef(null);
-	useFocusOnLoad(element, triggerRef);
-	const invalid = useInvalidProps();
-	const listRef = useRef(null);
-	const actionId = element.action_id ?? "";
-	useEffect(() => {
-		if (time) setValue(blockId, actionId, {
-			type: "timepicker",
-			selected_time: time
-		});
-	}, []);
-	async function pick(next) {
-		if (!await ask()) return;
-		setTime(next);
-		setOpen(false);
-		setValue(blockId, actionId, {
-			type: "timepicker",
-			selected_time: next
-		});
-		dispatch({
-			type: "timepicker",
-			action_id: actionId,
-			block_id: blockId,
-			selected_time: next,
-			...element.initial_time !== void 0 ? { initial_time: element.initial_time } : {}
-		});
-	}
-	const times = timeOptions();
-	const nav = useMenuNavigation({
-		open,
-		count: times.length,
-		initialIndex: time ? times.indexOf(time) : -1,
-		onChoose: (i) => {
-			const t = times[i];
-			if (t) pick(t);
-		},
-		onClose: () => {
-			setOpen(false);
-			triggerRef.current?.focus();
-		},
-		onOpen: () => setOpen(true),
-		listRef
+		onKeyDown,
+		ref: focusRef,
+		"aria-label": element.action_id,
+		...invalid,
+		...outOfBounds ? { "aria-invalid": true } : {},
+		...remaining !== void 0 ? {
+			"aria-describedby": [invalidDescribed, countId].filter(Boolean).join(" "),
+			style: countWidth !== void 0 ? { paddingRight: countWidth } : void 0
+		} : {}
+	};
+	const count = remaining !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		ref: countRef,
+		className: `sbk-text-input__count${remaining < 0 ? " sbk-text-input__count--over" : ""}`,
+		"aria-hidden": "true",
+		children: remaining
+	}), /* @__PURE__ */ jsx("span", {
+		id: countId,
+		className: "sbk-visually-hidden",
+		children: `${remaining} characters remaining`
+	})] }) : null;
+	const leadingIcon = element.type === "email_text_input" ? /* @__PURE__ */ jsx(EmailIcon, { className: "sbk-text-input__icon" }) : element.type === "url_text_input" ? /* @__PURE__ */ jsx(LinkGlyphIcon, { className: "sbk-text-input__icon" }) : null;
+	if (element.multiline) {
+		const textarea = /* @__PURE__ */ jsx("textarea", {
+			...commonProps,
+			className: `${commonProps.className} sbk-text-input--multiline`,
+			onChange: (e) => onChange(e.target.value)
+		});
+		return element.max_length !== void 0 ? /* @__PURE__ */ jsxs("div", {
+			className: "sbk-text-input__wrap sbk-text-input__wrap--multiline",
+			children: [textarea, count]
+		}) : textarea;
+	}
+	const input = /* @__PURE__ */ jsx("input", {
+		...commonProps,
+		type: HTML_TYPE[element.type],
+		inputMode: element.type === "number_input" ? element.is_decimal_allowed ? "decimal" : "numeric" : void 0,
+		onChange: (e) => onChange(e.target.value)
 	});
+	if (!leadingIcon && element.max_length === void 0) return input;
 	return /* @__PURE__ */ jsxs("div", {
-		className: "sbk-timepicker",
-		ref: rootRef,
-		onKeyDown: nav.onKeyDown,
+		className: `sbk-text-input__wrap${leadingIcon ? " sbk-text-input__wrap--icon" : ""}`,
 		children: [
-			/* @__PURE__ */ jsxs("button", {
-				ref: triggerRef,
-				type: "button",
-				className: "sbk-timepicker__control",
-				onClick: () => setOpen((o) => !o),
-				"aria-haspopup": "listbox",
-				"aria-expanded": open,
-				...invalid,
-				children: [
-					/* @__PURE__ */ jsx(ClockIcon, { className: "sbk-timepicker__icon" }),
-					/* @__PURE__ */ jsx("span", {
-						className: time ? "sbk-timepicker__value" : "sbk-timepicker__placeholder",
-						children: time ? formatTime(time) : element.placeholder?.text ?? "Select time"
-					}),
-					/* @__PURE__ */ jsx(ChevronDownIcon, { className: "sbk-timepicker__chevron" })
-				]
-			}),
-			open && /* @__PURE__ */ jsx(Popover, {
-				anchorRef: rootRef,
-				onDismiss: () => setOpen(false),
-				children: /* @__PURE__ */ jsx("div", {
-					className: "sbk-timepicker__menu",
-					role: "listbox",
-					ref: listRef,
-					children: times.map((t, i) => /* @__PURE__ */ jsx("div", {
-						role: "option",
-						"aria-selected": t === time,
-						className: `sbk-timepicker__option${t === time ? " sbk-timepicker__option--selected" : ""}`,
-						onClick: () => pick(t),
-						...nav.itemProps(i),
-						children: formatTime(t)
-					}, t))
-				})
-			}),
-			element.timezone && /* @__PURE__ */ jsxs("div", {
-				className: "sbk-timepicker__hint",
-				children: ["Timezone: ", element.timezone]
-			}),
-			dialog
+			leadingIcon,
+			input,
+			count
 		]
 	});
 }
@@ -8904,23 +10717,135 @@ function DataTable({ block }) {
 	});
 }
 //#endregion
+//#region src/charts/ChartTooltip.tsx
+/** Space between the pointer and the tooltip, on both axes (ECharts' default). */
+const GAP = 20;
+/** Hidden for longer than this, the tooltip comes back with the fade only (ECharts' long hide). */
+const LONG_HIDE_MS = 500;
+/**
+* The tooltip Slack's charts show under the pointer (an ECharts tooltip): the category, then each
+* series' dot, name and value. It sits 20px right of and below the pointer, and on the other side
+* of it where it would run past the chart's right or bottom edge. Portaled to `<body>` like the
+* popovers, so the chart card, which clips its content, doesn't cut it off.
+*
+* It moves as ECharts' does: at once the first time, then sliding after the pointer (0.4s) and
+* fading in and out (0.2s); back after a hide longer than 500ms, it only fades in, where the
+* pointer is. With reduced motion it only fades (DataVisualization.css).
+*/
+function ChartTooltip({ open, pointer, box, title, rows }) {
+	const { theme } = useBlockKit();
+	const ref = useRef(null);
+	const [size, setSize] = useState(null);
+	const [placed, setPlaced] = useState(false);
+	const [fadeOnly, setFadeOnly] = useState(false);
+	const [longHidden, setLongHidden] = useState(false);
+	const [wasOpen, setWasOpen] = useState(open);
+	if (open !== wasOpen) {
+		setWasOpen(open);
+		if (open) {
+			setFadeOnly(longHidden);
+			setLongHidden(false);
+		}
+	}
+	useEffect(() => {
+		if (open) return;
+		const timer = setTimeout(() => setLongHidden(true), LONG_HIDE_MS);
+		return () => clearTimeout(timer);
+	}, [open]);
+	useEffect(() => {
+		if (!size || placed) return;
+		const frame = requestAnimationFrame(() => setPlaced(true));
+		return () => cancelAnimationFrame(frame);
+	}, [size, placed]);
+	useClientLayoutEffect(() => {
+		const el = ref.current;
+		if (!el) return;
+		const { width, height } = el.getBoundingClientRect();
+		if (width !== size?.width || height !== size?.height) setSize({
+			width,
+			height
+		});
+	});
+	let left = pointer.x + GAP;
+	let top = pointer.y + GAP;
+	if (size) {
+		if (pointer.x - box.left + GAP + size.width + 2 > box.width) left = pointer.x - GAP - size.width;
+		if (pointer.y - box.top + GAP + size.height > box.height) top = pointer.y - GAP - size.height;
+	}
+	if (typeof document === "undefined") return null;
+	return createPortal(/* @__PURE__ */ jsxs("div", {
+		ref,
+		className: [
+			"sbk-root sbk-chart-tooltip",
+			open && "sbk-chart-tooltip--open",
+			placed && "sbk-chart-tooltip--animated",
+			fadeOnly && "sbk-chart-tooltip--fade-only"
+		].filter(Boolean).join(" "),
+		"data-theme": theme,
+		role: "tooltip",
+		"aria-hidden": open ? void 0 : true,
+		style: {
+			transform: `translate3d(${left}px, ${top}px, 0)`,
+			visibility: size ? void 0 : "hidden"
+		},
+		children: [title !== void 0 ? /* @__PURE__ */ jsx("div", {
+			className: "sbk-chart-tooltip__title",
+			children: title
+		}) : null, /* @__PURE__ */ jsx("div", {
+			className: "sbk-chart-tooltip__rows",
+			children: rows.map((row) => /* @__PURE__ */ jsxs("div", {
+				className: "sbk-chart-tooltip__row",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "sbk-chart-tooltip__dot",
+						style: { backgroundColor: row.color }
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "sbk-chart-tooltip__name",
+						children: row.name
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "sbk-chart-tooltip__value",
+						children: row.value.toLocaleString("en-US")
+					})
+				]
+			}, row.name))
+		})]
+	}), document.body);
+}
+//#endregion
+//#region src/charts/useLastValue.ts
+/**
+* The value, or while it's null the last value it had: what a tooltip that fades out keeps showing
+* after the pointer has left.
+*/
+function useLastValue(value) {
+	const [last, setLast] = useState(value);
+	if (value !== null && value !== last) setLast(value);
+	return value ?? last;
+}
+//#endregion
 //#region src/charts/palette.ts
-/** Series/segment colours, in order, measured from Slack's Builder charts. */
-const CHART_COLORS = [
-	"#e96825",
-	"#20a271",
-	"#c474d3",
-	"#0e9dd3"
-];
+/** How many series colours Slack cycles through. */
+const COLORS = 4;
+/**
+* A series or segment colour, as a token per theme (DataVisualization.css, and Message.css for
+* dark): Slack's dark charts use a deeper set. SVG presentation attributes don't resolve `var()`,
+* so apply it through `style`.
+*/
+function colorForIndex(i) {
+	return `var(--sbk-chart-${i % COLORS + 1})`;
+}
+/** The colour a hovered mark lifts to: each channel of the series colour x 1.1, rounded down. */
+function liftedColorForIndex(i) {
+	return `var(--sbk-chart-${i % COLORS + 1}-lift)`;
+}
 /**
 * Fill of a series' area, as a token per theme (DataVisualization.css, and Message.css for dark):
 * a light tint of the series colour, or a dark one.
 */
 function areaFillForIndex(i) {
-	return `var(--sbk-chart-area-${i % CHART_COLORS.length + 1})`;
-}
-function colorForIndex(i) {
-	return CHART_COLORS[i % CHART_COLORS.length] ?? "#e96825";
+	return `var(--sbk-chart-area-${i % COLORS + 1})`;
 }
 //#endregion
 //#region src/charts/paths.ts
@@ -9046,8 +10971,11 @@ function useContainerWidth(fallback) {
 //#endregion
 //#region src/charts/CartesianChart.tsx
 const HEIGHT$1 = 360;
+const PLOT_TOP = 9;
 const PLOT_BOTTOM = 334;
 const LABELS_Y = 342;
+/** The dashed line Slack's charts draw at the category under the pointer (ECharts' axis pointer). */
+const POINTER_COLOR = "#b7b9be";
 function leftMarginFor(ticks) {
 	const maxLen = Math.max(...ticks.map((t) => formatTick(t).length), 1);
 	return Math.max(74, 34 + maxLen * 8);
@@ -9071,16 +10999,48 @@ function CartesianChart({ type, series, categories }) {
 	const barGapRatio = .1;
 	const barWidth = series.length > 0 ? Math.max(1, groupWidth / (series.length + (series.length - 1) * barGapRatio)) : 0;
 	const barGap = barWidth * barGapRatio;
-	return /* @__PURE__ */ jsx("div", {
+	const [hover, setHover] = useState(null);
+	const categoryX = (i) => type === "bar" ? bandCenterX(i) : pointX(i);
+	function onPointerMove(e) {
+		if (e.pointerType === "touch" || n === 0) return;
+		const rect = e.currentTarget.getBoundingClientRect();
+		const px = (e.clientX - rect.left) * width / rect.width;
+		const py = (e.clientY - rect.top) * HEIGHT$1 / rect.height;
+		if (px < plotLeft || px > plotRight || py < PLOT_TOP || py > PLOT_BOTTOM) {
+			setHover(null);
+			return;
+		}
+		const step = type === "bar" ? bandWidth : n > 1 ? plotWidth / (n - 1) : plotWidth;
+		const raw = (px - plotLeft) / step;
+		const index = Math.max(0, Math.min(n - 1, type === "bar" ? Math.floor(raw) : Math.round(raw)));
+		setHover({
+			index,
+			pointer: {
+				x: e.clientX,
+				y: e.clientY
+			},
+			box: {
+				left: rect.left,
+				top: rect.top,
+				width: rect.width,
+				height: rect.height
+			}
+		});
+	}
+	const hovered = hover?.index;
+	const shown = useLastValue(hover);
+	return /* @__PURE__ */ jsxs("div", {
 		className: "sbk-chart",
 		ref,
-		children: /* @__PURE__ */ jsx("svg", {
+		children: [/* @__PURE__ */ jsx("svg", {
 			className: "sbk-chart__svg",
 			width,
 			height: HEIGHT$1,
 			viewBox: `0 0 ${width} ${HEIGHT$1}`,
 			role: "img",
 			"aria-label": "Chart",
+			onPointerMove,
+			onPointerLeave: () => setHover(null),
 			children: /* @__PURE__ */ jsxs("g", { children: [
 				scale.ticks.map((t) => /* @__PURE__ */ jsx("line", {
 					x1: plotLeft,
@@ -9119,62 +11079,171 @@ function CartesianChart({ type, series, categories }) {
 					const top = positive ? y(d.value) : zeroY;
 					const bottom = positive ? zeroY : y(d.value);
 					return /* @__PURE__ */ jsx("path", {
+						className: "sbk-chart__bar",
 						d: roundedBarPath(x, top, barWidth, bottom, 4, positive),
-						fill: colorForIndex(si)
+						style: { fill: i === hovered ? liftedColorForIndex(si) : colorForIndex(si) }
 					}, `${si}-${i}`);
 				})) : series.map((s, si) => {
 					const points = s.data.map((d, i) => ({
 						x: pointX(i),
 						y: y(d.value)
 					}));
-					const color = colorForIndex(si);
+					const color = type === "line" && hovered !== void 0 ? liftedColorForIndex(si) : colorForIndex(si);
 					return /* @__PURE__ */ jsxs("g", { children: [type === "area" ? /* @__PURE__ */ jsx("path", {
 						d: `${smoothLinePath(points)}L${points[points.length - 1]?.x ?? 0} ${zeroY}L${points[0]?.x ?? 0} ${zeroY}Z`,
 						style: { fill: areaFillForIndex(si) },
 						fillOpacity: .7
 					}) : null, /* @__PURE__ */ jsx("path", {
+						className: "sbk-chart__line",
 						d: smoothLinePath(points),
 						fill: "none",
-						stroke: color,
+						style: { stroke: color },
 						strokeWidth: 2,
 						strokeLinejoin: "bevel"
 					})] }, si);
-				})
+				}),
+				hovered !== void 0 ? /* @__PURE__ */ jsx("line", {
+					className: "sbk-chart__pointer",
+					x1: crispLine(categoryX(hovered)),
+					x2: crispLine(categoryX(hovered)),
+					y1: PLOT_TOP,
+					y2: PLOT_BOTTOM,
+					stroke: POINTER_COLOR,
+					strokeDasharray: "4 2"
+				}) : null
 			] })
-		})
+		}), shown ? /* @__PURE__ */ jsx(ChartTooltip, {
+			open: hover !== null,
+			pointer: shown.pointer,
+			box: shown.box,
+			title: categories[shown.index],
+			rows: series.map((s, si) => ({
+				name: s.name,
+				value: s.data.find((d) => d.label === categories[shown.index])?.value ?? s.data[shown.index]?.value ?? 0,
+				color: colorForIndex(si)
+			}))
+		}) : null]
 	});
 }
 //#endregion
+//#region src/charts/ChartTableModal.tsx
+/**
+* What a chart's "View as table" opens in Slack: a modal (`c-sk-modal`) that fills the window but
+* for 28px on each side, up to 1280px wide, titled with the chart's title and holding the data as a
+* `table` block, without its hover actions. Escape, the close button and a click on the dimmed
+* overlay close it. Slack leaves focus on the page when it closes; this returns it to whatever
+* opened it (the chart's "More actions" button), so keyboard users keep their place.
+*/
+function ChartTableModal({ title, rows, onClose }) {
+	const { theme } = useBlockKit();
+	const titleId = useId();
+	const dialogRef = useRef(null);
+	const closeRef = useRef(null);
+	const [header, ...body] = rows;
+	useEffect(() => {
+		const opener = document.activeElement;
+		dialogRef.current?.focus();
+		return () => {
+			if (opener?.isConnected) opener.focus();
+		};
+	}, []);
+	function onKeyDown(event) {
+		if (event.key === "Escape") {
+			event.stopPropagation();
+			onClose();
+		} else if (event.key === "Tab") {
+			event.preventDefault();
+			closeRef.current?.focus();
+		}
+	}
+	if (typeof document === "undefined") return null;
+	return createPortal(/* @__PURE__ */ jsx("div", {
+		className: "sbk-root sbk-chart-table-layer",
+		"data-theme": theme,
+		role: "presentation",
+		onClick: onClose,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: dialogRef,
+			className: "sbk-chart-table",
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-labelledby": titleId,
+			tabIndex: -1,
+			onKeyDown,
+			onClick: (event) => event.stopPropagation(),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "sbk-chart-table__header",
+				children: [/* @__PURE__ */ jsx("h1", {
+					id: titleId,
+					className: "sbk-chart-table__title",
+					children: title
+				}), /* @__PURE__ */ jsx("button", {
+					ref: closeRef,
+					type: "button",
+					className: "sbk-chart-table__close",
+					"aria-label": "Close",
+					onClick: onClose,
+					children: /* @__PURE__ */ jsx(CloseIcon, {
+						width: "20",
+						height: "20"
+					})
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "sbk-chart-table__content",
+				children: /* @__PURE__ */ jsxs("table", {
+					className: "sbk-table__table sbk-chart-table__table",
+					children: [header ? /* @__PURE__ */ jsx("thead", {
+						className: "sbk-table__thead",
+						children: /* @__PURE__ */ jsx("tr", { children: header.map((cell, i) => /* @__PURE__ */ jsx("th", {
+							className: "sbk-table__th",
+							children: cell
+						}, i)) })
+					}) : null, /* @__PURE__ */ jsx("tbody", {
+						className: "sbk-table__tbody",
+						children: body.map((row, r) => /* @__PURE__ */ jsx("tr", { children: row.map((cell, i) => /* @__PURE__ */ jsx("td", {
+							className: "sbk-table__td",
+							children: cell
+						}, i)) }, r))
+					})]
+				})
+			})]
+		})
+	}), document.body);
+}
+//#endregion
 //#region src/charts/PieChart.tsx
+/**
+* Builder's pie plot area is as wide as the card's content (406px in a desktop message, 374px in a
+* phone's 400px card) and 360px tall, with a pie of radius 144 centred in it.
+*/
 const WIDTH = 406;
-/** Builder's pie plot area is 406×360, not square, with the pie centred in it. */
 const HEIGHT = 360;
-const CENTER = {
-	x: 203,
-	y: 180
-};
+const CENTER_Y = 180;
 const RADIUS = 144;
 /** Point on the pie's circle for a given angle in degrees, measured clockwise from 12 o'clock. */
-function pointAt(angleDeg) {
+function pointAt(cx, angleDeg, radius = RADIUS) {
 	const rad = (angleDeg - 90) * Math.PI / 180;
 	return {
-		x: CENTER.x + RADIUS * Math.cos(rad),
-		y: CENTER.y + RADIUS * Math.sin(rad)
+		x: cx + radius * Math.cos(rad),
+		y: CENTER_Y + radius * Math.sin(rad)
 	};
 }
-function segmentPath(startAngle, endAngle) {
+function segmentPath(cx, startAngle, endAngle, radius = RADIUS) {
 	const sweep = endAngle - startAngle;
-	const start = pointAt(startAngle);
-	const end = pointAt(endAngle);
+	const start = pointAt(cx, startAngle, radius);
+	const end = pointAt(cx, endAngle, radius);
 	const largeArc = sweep > 180 ? 1 : 0;
 	if (sweep >= 359.999) {
-		const stop = pointAt(startAngle + 360 - 1e-4 * 180 / Math.PI);
+		const stop = pointAt(cx, startAngle + 360 - 1e-4 * 180 / Math.PI, radius);
 		const r4 = (n) => Math.round(n * 1e4) / 1e4;
-		return `M${r4(start.x)} ${r4(start.y)}A${RADIUS} ${RADIUS} 0 1 1 ${r4(stop.x)} ${r4(stop.y)}Z`;
+		return `M${r4(start.x)} ${r4(start.y)}A${radius} ${radius} 0 1 1 ${r4(stop.x)} ${r4(stop.y)}Z`;
 	}
-	return `M${CENTER.x} ${CENTER.y}L${start.x} ${start.y}A${RADIUS} ${RADIUS} 0 ${largeArc} 1 ${end.x} ${end.y}Z`;
+	return `M${cx} ${CENTER_Y}L${start.x} ${start.y}A${radius} ${radius} 0 ${largeArc} 1 ${end.x} ${end.y}Z`;
 }
 function PieChart({ segments }) {
+	const [hover, setHover] = useState(null);
+	const { ref, width } = useContainerWidth(WIDTH);
+	const cx = width / 2;
 	const total = segments.reduce((sum, s) => sum + Math.max(0, s.value), 0);
 	let angle = 0;
 	const arcs = segments.map((segment, i) => {
@@ -9183,26 +11252,73 @@ function PieChart({ segments }) {
 		const start = angle;
 		const end = angle + sweep;
 		angle = end;
+		const hovered = hover?.index === i;
 		return {
 			key: i,
-			d: segmentPath(start, end),
-			color: colorForIndex(i)
+			hovered,
+			d: segmentPath(cx, start, end, hovered ? 149 : RADIUS),
+			color: hovered ? liftedColorForIndex(i) : colorForIndex(i)
 		};
 	});
-	return /* @__PURE__ */ jsx("svg", {
-		className: "sbk-chart__svg sbk-chart__svg--pie",
-		width: WIDTH,
-		height: HEIGHT,
-		viewBox: `0 0 ${WIDTH} ${HEIGHT}`,
-		role: "img",
-		"aria-label": "Pie chart",
-		children: arcs.map((arc) => /* @__PURE__ */ jsx("path", {
-			d: arc.d,
-			fill: arc.color,
-			stroke: "#fff",
-			strokeWidth: 2,
-			strokeLinejoin: "round"
-		}, arc.key))
+	const ordered = [...arcs.filter((a) => !a.hovered), ...arcs.filter((a) => a.hovered)];
+	function onPointerMove(e) {
+		if (e.pointerType === "touch") return;
+		const index = e.target.getAttribute("data-index");
+		if (index === null) {
+			setHover(null);
+			return;
+		}
+		const rect = e.currentTarget.getBoundingClientRect();
+		setHover({
+			index: Number(index),
+			pointer: {
+				x: e.clientX,
+				y: e.clientY
+			},
+			box: {
+				left: rect.left,
+				top: rect.top,
+				width: rect.width,
+				height: rect.height
+			}
+		});
+	}
+	const shown = useLastValue(hover);
+	const segment = shown ? segments[shown.index] : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "sbk-chart",
+		ref,
+		children: [/* @__PURE__ */ jsx("svg", {
+			className: "sbk-chart__svg sbk-chart__svg--pie",
+			width,
+			height: HEIGHT,
+			viewBox: `0 0 ${width} ${HEIGHT}`,
+			role: "img",
+			"aria-label": "Pie chart",
+			onPointerMove,
+			onPointerLeave: () => setHover(null),
+			children: ordered.map((arc) => /* @__PURE__ */ jsx("path", {
+				className: "sbk-chart__slice",
+				"data-index": arc.key,
+				"data-hovered": arc.hovered || void 0,
+				d: arc.d,
+				style: {
+					fill: arc.color,
+					stroke: "var(--sbk-bg)"
+				},
+				strokeWidth: 2,
+				strokeLinejoin: "round"
+			}, arc.key))
+		}), shown && segment ? /* @__PURE__ */ jsx(ChartTooltip, {
+			open: hover !== null,
+			pointer: shown.pointer,
+			box: shown.box,
+			rows: [{
+				name: segment.label,
+				value: segment.value,
+				color: colorForIndex(shown.index)
+			}]
+		}) : null]
 	});
 }
 //#endregion
@@ -9212,13 +11328,14 @@ function PieChart({ segments }) {
 * 12px-radius pill of 32px icon buttons that fades in while its host is hovered or focused.
 * The host needs the `sbk-hover-actions-host` class.
 */
-function HoverActions({ actions, className }) {
+function HoverActions({ actions, className, menuSide = "left" }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: `sbk-hover-actions${className ? ` ${className}` : ""}`,
 		role: "group",
 		children: actions.map((action) => action.menu ? /* @__PURE__ */ jsx(MenuAction, {
 			action,
-			items: action.menu
+			items: action.menu,
+			side: menuSide
 		}, action.label) : /* @__PURE__ */ jsx(Tooltip, {
 			label: action.label,
 			children: action.href ? /* @__PURE__ */ jsx("a", {
@@ -9238,22 +11355,18 @@ function HoverActions({ actions, className }) {
 		}, action.label))
 	});
 }
-function MenuAction({ action, items }) {
+const BUTTON_SIZE = 32;
+function MenuAction({ action, items, side }) {
 	const [open, setOpen] = useState(false);
-	const rootRef = useRef(null);
 	const triggerRef = useRef(null);
 	const listRef = useRef(null);
-	useEffect(() => {
-		if (!open) return;
-		const onDocClick = (e) => {
-			if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false);
-		};
-		document.addEventListener("mousedown", onDocClick);
-		return () => document.removeEventListener("mousedown", onDocClick);
-	}, [open]);
+	const idPrefix = useId();
 	function choose(i) {
+		const item = items[i];
+		if (!item || item.disabled) return;
 		setOpen(false);
-		items[i]?.onSelect();
+		triggerRef.current?.focus();
+		item.onSelect();
 	}
 	const nav = useMenuNavigation({
 		open,
@@ -9268,7 +11381,6 @@ function MenuAction({ action, items }) {
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: "sbk-hover-actions__menu-root",
-		ref: rootRef,
 		onKeyDown: nav.onKeyDown,
 		children: [/* @__PURE__ */ jsx(Tooltip, {
 			label: open ? "" : action.label,
@@ -9282,17 +11394,34 @@ function MenuAction({ action, items }) {
 				onClick: () => setOpen((o) => !o),
 				children: action.icon
 			})
-		}), open && /* @__PURE__ */ jsx("div", {
-			className: "sbk-overflow__menu sbk-hover-actions__menu",
-			role: "menu",
-			ref: listRef,
-			children: items.map((item, i) => /* @__PURE__ */ jsx("div", {
-				role: "menuitem",
-				className: "sbk-overflow__option",
-				onClick: () => choose(i),
-				...nav.itemProps(i),
-				children: item.label
-			}, item.label))
+		}), open && /* @__PURE__ */ jsx(Popover, {
+			anchorRef: triggerRef,
+			onDismiss: () => setOpen(false),
+			gap: -32,
+			offsetX: side === "right" ? BUTTON_SIZE : -304,
+			onPlaced: () => listRef.current?.focus(),
+			children: /* @__PURE__ */ jsx("div", {
+				className: "sbk-overflow__menu sbk-hover-actions__menu",
+				role: "menu",
+				ref: listRef,
+				tabIndex: -1,
+				"aria-activedescendant": nav.active >= 0 ? `${idPrefix}-${nav.active}` : void 0,
+				children: items.map((item, i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [item.separatorBefore ? /* @__PURE__ */ jsx("hr", { className: "sbk-hover-actions__separator" }) : null, /* @__PURE__ */ jsxs("div", {
+					id: `${idPrefix}-${i}`,
+					role: "menuitem",
+					"aria-disabled": item.disabled || void 0,
+					className: item.disabled ? "sbk-overflow__option sbk-hover-actions__item sbk-hover-actions__item--disabled" : "sbk-overflow__option sbk-hover-actions__item",
+					onClick: () => choose(i),
+					...nav.itemProps(i),
+					children: [item.icon ? /* @__PURE__ */ jsx("span", {
+						className: "sbk-hover-actions__icon",
+						children: item.icon
+					}) : null, /* @__PURE__ */ jsx("span", {
+						className: "sbk-hover-actions__label",
+						children: item.label
+					})]
+				})] }, item.label))
+			})
 		})]
 	});
 }
@@ -9335,8 +11464,11 @@ function TableActions({ tableRef }) {
 		onClick: () => copyText(toTsv(tableRows(tableRef.current)))
 	}] });
 }
-/** Slack's `p-attachment_image_actions`: open the full image in a new window, plus a menu. */
-function ImageActions({ url }) {
+/**
+* Slack's `p-attachment_image_actions`: open the full image in a new window, plus a menu to copy
+* its link or hide it (as the caret beside its title does).
+*/
+function ImageActions({ url, onHide }) {
 	return /* @__PURE__ */ jsx(HoverActions, {
 		className: "sbk-hover-actions--image",
 		actions: [{
@@ -9347,47 +11479,69 @@ function ImageActions({ url }) {
 			label: "More actions",
 			icon: /* @__PURE__ */ jsx(EllipsisVerticalIcon, {}),
 			menu: [{
-				label: "Copy link to image",
+				label: "Copy link",
 				onSelect: () => copyText(url)
 			}, {
-				label: "Download image",
-				onSelect: () => {
-					const link = document.createElement("a");
-					link.href = url;
-					link.download = "";
-					link.target = "_blank";
-					link.rel = "noopener noreferrer";
-					link.click();
-				}
+				label: "Hide image",
+				onSelect: onHide
 			}]
 		}]
 	});
 }
-/** A chart's single "More actions" menu, exporting its underlying data. */
-function ChartActions({ rows, title }) {
-	const name = `${(title || "chart").replace(/[^\w-]+/g, "_")}.csv`;
+/**
+* Slack's file name for a chart's data: the title with its accents dropped, lowercased, and each
+* run of other characters than letters, digits and `_` turned into a hyphen.
+*/
+function chartFileName(title) {
+	return `${(title ?? "").normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().replace(/[^a-z0-9_]+/g, "-").replace(/^-+|-+$/g, "") || "chart"}.tsv`;
+}
+/**
+* A chart's "More actions" menu, as Slack lists it: "View as table" opens the data in a modal,
+* "Download chart data" saves it as a TSV, and "Copy as image" shows disabled, as in Block Kit
+* Builder. None of them reaches the app.
+*/
+function ChartActions({ rows, title, onViewTable }) {
 	return /* @__PURE__ */ jsx(HoverActions, {
 		className: "sbk-hover-actions--chart",
+		menuSide: "right",
 		actions: [{
 			label: "More actions",
 			icon: /* @__PURE__ */ jsx(EllipsisVerticalIcon, {}),
-			menu: [{
-				label: "Copy data",
-				onSelect: () => copyText(toTsv(rows))
-			}, {
-				label: "Download as CSV",
-				onSelect: () => downloadText(name, toCsv(rows))
-			}]
+			menu: [
+				{
+					label: "View as table",
+					icon: /* @__PURE__ */ jsx(TableIcon, {}),
+					onSelect: onViewTable
+				},
+				{
+					label: "Download chart data",
+					icon: /* @__PURE__ */ jsx(DownloadIcon, {
+						width: "15",
+						height: "15"
+					}),
+					onSelect: () => downloadText(chartFileName(title), toTsv(rows), "text/tab-separated-values")
+				},
+				{
+					label: "Copy as image",
+					icon: /* @__PURE__ */ jsx(ImageIcon, {}),
+					separatorBefore: true,
+					disabled: true,
+					onSelect: () => {}
+				}
+			]
 		}]
 	});
 }
 //#endregion
 //#region src/blocks/DataVisualization.tsx
-/** The chart's data as a table: a label column plus one column per series (or a value column). */
-function chartRows(chart, categories) {
+/**
+* The chart's data as Slack tabulates it for "View as table" and "Download chart data": a pie's
+* segments under "Label" and "Value", otherwise one row per series under "Series" and the
+* categories. Values are written as given ("1500", not "1,500").
+*/
+function chartTable(chart, categories) {
 	if (chart.type === "pie") return [["Label", "Value"], ...(chart.segments ?? []).map((s) => [s.label, String(s.value)])];
-	const series = chart.series ?? [];
-	return [[chart.axis_config?.x_label ?? "", ...series.map((s) => s.name)], ...categories.map((label, i) => [label, ...series.map((s) => String(s.data.find((d) => d.label === label)?.value ?? s.data[i]?.value ?? ""))])];
+	return [["Series", ...categories], ...(chart.series ?? []).map((s) => [s.name, ...categories.map((label, i) => String(s.data.find((d) => d.label === label)?.value ?? s.data[i]?.value ?? ""))])];
 }
 function legendEntries(chart) {
 	if (chart.type === "pie") return (chart.segments ?? []).map((s, i) => ({
@@ -9400,47 +11554,63 @@ function legendEntries(chart) {
 	}));
 }
 function DataVisualization({ block }) {
+	const [tableOpen, setTableOpen] = useState(false);
 	const chart = block.chart;
 	if (!chart) return null;
 	const isPie = chart.type === "pie";
 	const categories = chart.axis_config?.categories ?? chart.series?.[0]?.data.map((d) => d.label) ?? [];
 	const legend = legendEntries(chart);
+	const rows = chartTable(chart, categories);
 	return /* @__PURE__ */ jsxs("div", {
-		className: "sbk-dataviz sbk-hover-actions-host",
+		className: "sbk-dataviz-frame sbk-hover-actions-host",
 		children: [
-			block.title ? /* @__PURE__ */ jsx("h3", {
-				className: "sbk-dataviz__title",
-				children: block.title
-			}) : null,
-			/* @__PURE__ */ jsxs("div", {
-				className: isPie ? "sbk-dataviz__body sbk-dataviz__body--pie" : "sbk-dataviz__body",
-				children: [!isPie && chart.axis_config?.y_label ? /* @__PURE__ */ jsx("div", {
-					className: "sbk-dataviz__y-label",
-					children: chart.axis_config.y_label
-				}) : null, chart.type === "pie" ? /* @__PURE__ */ jsx(PieChart, { segments: chart.segments ?? [] }) : /* @__PURE__ */ jsx(CartesianChart, {
-					type: chart.type,
-					series: chart.series ?? [],
-					categories
-				})]
+			/* @__PURE__ */ jsx("div", {
+				className: "sbk-dataviz-scroll",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "sbk-dataviz",
+					children: [
+						block.title ? /* @__PURE__ */ jsx("h3", {
+							className: "sbk-dataviz__title",
+							children: block.title
+						}) : null,
+						/* @__PURE__ */ jsxs("div", {
+							className: isPie ? "sbk-dataviz__body sbk-dataviz__body--pie" : "sbk-dataviz__body",
+							children: [!isPie && chart.axis_config?.y_label ? /* @__PURE__ */ jsx("div", {
+								className: "sbk-dataviz__y-label",
+								children: chart.axis_config.y_label
+							}) : null, chart.type === "pie" ? /* @__PURE__ */ jsx(PieChart, { segments: chart.segments ?? [] }) : /* @__PURE__ */ jsx(CartesianChart, {
+								type: chart.type,
+								series: chart.series ?? [],
+								categories
+							})]
+						}),
+						!isPie && chart.axis_config?.x_label ? /* @__PURE__ */ jsx("div", {
+							className: "sbk-dataviz__x-label",
+							children: chart.axis_config.x_label
+						}) : null,
+						legend.length > 0 ? /* @__PURE__ */ jsx("div", {
+							className: isPie ? "sbk-dataviz__legend sbk-dataviz__legend--pie" : "sbk-dataviz__legend",
+							children: legend.map((entry) => /* @__PURE__ */ jsxs("span", {
+								className: "sbk-dataviz__legend-entry",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "sbk-dataviz__legend-dot",
+									style: { backgroundColor: entry.color }
+								}), entry.name]
+							}, entry.name))
+						}) : null
+					]
+				})
 			}),
-			!isPie && chart.axis_config?.x_label ? /* @__PURE__ */ jsx("div", {
-				className: "sbk-dataviz__x-label",
-				children: chart.axis_config.x_label
-			}) : null,
-			legend.length > 0 ? /* @__PURE__ */ jsx("div", {
-				className: isPie ? "sbk-dataviz__legend sbk-dataviz__legend--pie" : "sbk-dataviz__legend",
-				children: legend.map((entry) => /* @__PURE__ */ jsxs("span", {
-					className: "sbk-dataviz__legend-entry",
-					children: [/* @__PURE__ */ jsx("span", {
-						className: "sbk-dataviz__legend-dot",
-						style: { backgroundColor: entry.color }
-					}), entry.name]
-				}, entry.name))
-			}) : null,
 			/* @__PURE__ */ jsx(ChartActions, {
-				rows: chartRows(chart, categories),
-				title: block.title
-			})
+				rows,
+				title: block.title,
+				onViewTable: () => setTableOpen(true)
+			}),
+			tableOpen ? /* @__PURE__ */ jsx(ChartTableModal, {
+				title: block.title,
+				rows,
+				onClose: () => setTableOpen(false)
+			}) : null
 		]
 	});
 }
@@ -9558,25 +11728,39 @@ function ExpandCaret({ expanded }) {
 	});
 }
 /**
-* `image_url` renders directly. `slack_file` references a file in a workspace's file store —
-* without an authenticated `files.info` call we can't resolve it to a URL, so we render the
-* documented fallback (alt text in a placeholder box) instead of a broken `<img>`.
+* `image_url` renders directly. `slack_file` references a file in a workspace's file store, which
+* the app resolves through `resolvers.slackFile` (e.g. with `files.info`); a resolved file renders
+* like an `image_url`, and without a resolver (or for a file it doesn't know) the documented
+* fallback shows instead (alt text in a placeholder box) rather than a broken `<img>`.
 *
 * Slack always shows a title row above the image with an expand caret and a "(N kB)" file-size
-* caption — the caption comes from fetching the file's real bytes, which isn't available to us
-* without a network round-trip, so we render the row (title + caret) but omit the byte count.
-* Keeping the row's height/spacing matches Slack's vertical rhythm even where the text differs.
+* caption, the size coming from the file's bytes. We show it when a resolver gives the size
+* (`slackFile` for a workspace file, `imageSize` for an `image_url`); we don't download the image
+* to measure it, so without one the row keeps its height and spacing without the caption.
+*
+* Slack draws a workspace file from its 800px thumbnail at 2x, so a resolved `slack_file` shows at
+* most 400 x 400; an `image_url` fills the message's width.
 *
 * The caret is a toggle, as in Slack: pressing it hides the image (instantly, no animation) and
 * leaves only the title row, and pressing it again brings the image back.
 */
 function Image({ block }) {
 	const json = block;
-	const imageUrl = "image_url" in block ? block.image_url : void 0;
+	const directUrl = "image_url" in block ? block.image_url : void 0;
 	const slackFile = json.slack_file;
+	const { resolvers } = useBlockKit();
+	const resolved = slackFile ? resolvers.slackFile?.(slackFile) : void 0;
+	const imageUrl = directUrl ?? resolved?.url;
 	const [expanded, setExpanded] = useState(true);
+	const toggleRef = useRef(null);
+	const hide = () => {
+		setExpanded(false);
+		toggleRef.current?.focus();
+	};
+	const isFile = directUrl === void 0 && imageUrl !== void 0;
+	const size = directUrl !== void 0 ? resolvers.imageSize?.(directUrl) : resolved?.size;
 	return /* @__PURE__ */ jsxs("figure", {
-		className: "sbk-image",
+		className: isFile ? "sbk-image sbk-image--file" : "sbk-image",
 		children: [imageUrl && /* @__PURE__ */ jsxs("div", {
 			className: "sbk-image__title",
 			children: [block.title && /* @__PURE__ */ jsx("span", {
@@ -9584,15 +11768,20 @@ function Image({ block }) {
 				children: /* @__PURE__ */ jsx(Text, { text: block.title })
 			}), /* @__PURE__ */ jsxs("span", {
 				className: "sbk-image__trigger",
-				children: [" ", /* @__PURE__ */ jsx("button", {
-					type: "button",
-					className: "sbk-image__toggle",
-					"aria-label": "image",
-					"aria-expanded": expanded,
-					title: expanded ? "Collapse" : "Expand",
-					onClick: () => setExpanded((value) => !value),
-					children: /* @__PURE__ */ jsx(ExpandCaret, { expanded })
-				})]
+				children: [
+					size !== void 0 && ` (${formatFileSize(size)})`,
+					" ",
+					/* @__PURE__ */ jsx("button", {
+						ref: toggleRef,
+						type: "button",
+						className: "sbk-image__toggle",
+						"aria-label": "image",
+						"aria-expanded": expanded,
+						title: expanded ? "Collapse" : "Expand",
+						onClick: () => setExpanded((value) => !value),
+						children: /* @__PURE__ */ jsx(ExpandCaret, { expanded })
+					})
+				]
 			})]
 		}), expanded && /* @__PURE__ */ jsxs("div", {
 			className: "sbk-image__frame sbk-hover-actions-host",
@@ -9609,26 +11798,71 @@ function Image({ block }) {
 					className: "sbk-image__fallback-text",
 					children: slackFile ? "Slack file image unavailable" : block.alt_text
 				})
-			}), imageUrl && /* @__PURE__ */ jsx(ImageActions, { url: imageUrl })]
+			}), imageUrl && /* @__PURE__ */ jsx(ImageActions, {
+				url: imageUrl,
+				onHide: hide
+			})]
 		})]
 	});
 }
+/**
+* Slack's file-size caption: whole decimal kilobytes, as measured ("(400 kB)" for 400,401 bytes).
+* Larger files read in megabytes with one decimal; no Builder sample shows that case.
+*/
+function formatFileSize(bytes) {
+	const kb = bytes / 1e3;
+	return kb < 1e3 ? `${Math.round(kb)} kB` : `${(kb / 1e3).toFixed(1)} MB`;
+}
+//#endregion
+//#region src/elements/emptyState.ts
+/**
+* The value Slack reports in `view.state.values` for an input the user hasn't touched. The view
+* state holds every block with a stateful element, and `@slack/bolt`'s `ViewStateValue` types each
+* value as `| null`, or as a list for multi-value elements; Block Kit Builder's modal state lists
+* untouched inputs the same way (a rich text input as just its type).
+*/
+const EMPTY = {
+	plain_text_input: { value: null },
+	number_input: { value: null },
+	email_text_input: { value: null },
+	url_text_input: { value: null },
+	static_select: { selected_option: null },
+	external_select: { selected_option: null },
+	multi_static_select: { selected_options: [] },
+	multi_external_select: { selected_options: [] },
+	users_select: { selected_user: null },
+	multi_users_select: { selected_users: [] },
+	conversations_select: { selected_conversation: null },
+	multi_conversations_select: { selected_conversations: [] },
+	channels_select: { selected_channel: null },
+	multi_channels_select: { selected_channels: [] },
+	datepicker: { selected_date: null },
+	timepicker: { selected_time: null },
+	datetimepicker: { selected_date_time: null },
+	checkboxes: { selected_options: [] },
+	radio_buttons: { selected_option: null },
+	rich_text_input: {},
+	file_input: { files: [] }
+};
+/** Slack's empty state for an element type, or undefined for an element without state. */
+function emptyState(type) {
+	const empty = EMPTY[type];
+	return empty === void 0 ? void 0 : {
+		type,
+		...empty
+	};
+}
 //#endregion
 //#region src/blocks/Input.tsx
-const TEXT_INPUT_TYPES = /* @__PURE__ */ new Set([
-	"plain_text_input",
-	"email_text_input",
-	"url_text_input",
-	"number_input"
-]);
-/** Slack's Builder preview synthesizes a "Press 'enter' to submit" hint below a single-line text
-* input whose owning `input` block dispatches on the (default) `on_enter_pressed` trigger, when
-* the block doesn't already carry its own explicit `hint`. It does NOT synthesize anything for
-* `on_character_entered`-only dispatch, or for multiline inputs (Enter inserts a newline there). */
+/** Slack's Builder preview adds a "Press 'enter' to submit" hint below a single-line plain text
+* input whose owning `input` block dispatches on the (default) `on_enter_pressed` trigger; with
+* the block's own `hint`, both share one line. Nothing is added for `on_character_entered`-only
+* dispatch, for multiline inputs (Enter inserts a newline there), or for number, URL and email
+* inputs, which dispatch on Enter without it (extra/payloads/dispatch-inputs). */
 function dispatchHint(block) {
-	if (block.dispatch_action !== true || block.hint) return false;
+	if (block.dispatch_action !== true) return false;
 	const element = block.element;
-	if (typeof element.type !== "string" || !TEXT_INPUT_TYPES.has(element.type)) return false;
+	if (element.type !== "plain_text_input") return false;
 	if (element.multiline === true) return false;
 	return (element.dispatch_action_config?.trigger_actions_on ?? ["on_enter_pressed"]).includes("on_enter_pressed");
 }
@@ -9640,11 +11874,24 @@ function dispatchHint(block) {
 * `__dispatchAction` field, since text inputs need it to pick their triggers.
 */
 function Input({ block, blockId }) {
-	const { errors, surface } = useBlockKit();
+	const { errors, surface, seedValue } = useBlockKit();
 	const element = {
 		...block.element,
 		__dispatchAction: block.dispatch_action === true
 	};
+	const elementType = block.element.type;
+	const actionId = block.element.action_id ?? "";
+	useEffect(() => {
+		if (surface === "message") return;
+		const empty = emptyState(elementType);
+		if (empty) seedValue(blockId, actionId, empty);
+	}, [
+		surface,
+		elementType,
+		blockId,
+		actionId,
+		seedValue
+	]);
 	const error = errors[blockId];
 	const errorId = useId();
 	const showDispatchHint = dispatchHint(block);
@@ -9663,28 +11910,27 @@ function Input({ block, blockId }) {
 				className: "sbk-input__element",
 				children: /* @__PURE__ */ jsx(InputBlockContext.Provider, {
 					value: true,
-					children: /* @__PURE__ */ jsx(InputErrorContext.Provider, {
-						value: error ? errorId : void 0,
-						children: block.dispatch_action === true ? /* @__PURE__ */ jsx(Element, {
-							element,
-							blockId
-						}) : /* @__PURE__ */ jsx(SuppressActions, { children: /* @__PURE__ */ jsx(Element, {
-							element,
-							blockId
-						}) })
+					children: /* @__PURE__ */ jsx(InputOptionalContext.Provider, {
+						value: block.optional === true,
+						children: /* @__PURE__ */ jsx(InputErrorContext.Provider, {
+							value: error ? errorId : void 0,
+							children: block.dispatch_action === true ? /* @__PURE__ */ jsx(Element, {
+								element,
+								blockId
+							}) : /* @__PURE__ */ jsx(SuppressActions, { children: /* @__PURE__ */ jsx(Element, {
+								element,
+								blockId
+							}) })
+						})
 					})
 				})
 			}),
-			block.hint && /* @__PURE__ */ jsx("div", {
+			(block.hint || showDispatchHint) && /* @__PURE__ */ jsxs("div", {
 				className: "sbk-input__hint",
-				children: /* @__PURE__ */ jsx("span", {
+				children: [block.hint && /* @__PURE__ */ jsxs("span", {
 					className: "sbk-input__hint-text",
-					children: /* @__PURE__ */ jsx(Text, { text: block.hint })
-				})
-			}),
-			showDispatchHint && /* @__PURE__ */ jsx("div", {
-				className: "sbk-input__hint",
-				children: /* @__PURE__ */ jsxs("span", {
+					children: [/* @__PURE__ */ jsx(Text, { text: block.hint }), showDispatchHint && !block.hint.text.trimEnd().endsWith(".") && "."]
+				}), showDispatchHint && /* @__PURE__ */ jsxs(Fragment, { children: [block.hint && " ", /* @__PURE__ */ jsxs("span", {
 					className: "sbk-input__hint-text sbk-input__hint-text--dispatch",
 					children: [
 						/* @__PURE__ */ jsx("span", {
@@ -9694,7 +11940,7 @@ function Input({ block, blockId }) {
 						" ",
 						"Press 'enter' to submit"
 					]
-				})
+				})] })]
 			}),
 			error && /* @__PURE__ */ jsx("div", {
 				className: "sbk-input__error",
@@ -10110,6 +12356,7 @@ function TaskRow({ task }) {
 	const expandable = Boolean(task.details || task.output || sources.length > 0);
 	return /* @__PURE__ */ jsxs("li", {
 		className: "sbk-plan__task",
+		tabIndex: 0,
 		children: [/* @__PURE__ */ jsxs("span", {
 			className: "sbk-plan__step",
 			"aria-hidden": "true",
@@ -10303,7 +12550,24 @@ function renderSectionChildren(elements, ctx) {
 		className: "sbk-rich-text__jumbo-emoji",
 		children: elements.filter((el) => el.type === "emoji").map((el, i) => /* @__PURE__ */ jsx(Fragment$1, { children: renderLeaf(el, ctx, 32) }, i))
 	});
-	return elements.map((el, i) => /* @__PURE__ */ jsx(Fragment$1, { children: renderLeaf(el, ctx, 22, i === 0) }, i));
+	return mergeTextRuns(elements).map((el, i) => /* @__PURE__ */ jsx(Fragment$1, { children: renderLeaf(el, ctx, 22, i === 0) }, i));
+}
+/**
+* Slack writes consecutive `text` elements with the same style as one text node ("item 2: " and
+* "this is a list item" become "item 2: this is a list item"), so they render, wrap and select as
+* one run of text.
+*/
+function mergeTextRuns(elements) {
+	const merged = [];
+	for (const el of elements) {
+		const prev = merged[merged.length - 1];
+		if (el.type === "text" && prev?.type === "text" && JSON.stringify(prev.style ?? {}) === JSON.stringify(el.style ?? {})) merged[merged.length - 1] = {
+			...prev,
+			text: prev.text + el.text
+		};
+		else merged.push(el);
+	}
+	return merged;
 }
 function renderLeaf(el, ctx, emojiSize, isFirst = false) {
 	let content;
@@ -10342,10 +12606,10 @@ function renderLeaf(el, ctx, emojiSize, isFirst = false) {
 		}
 		case "usergroup": {
 			const name = ctx.resolvers.usergroup?.(el.usergroup_id);
-			content = name ? /* @__PURE__ */ jsxs(MentionLink, {
+			content = name ? /* @__PURE__ */ jsx(MentionLink, {
 				type: "usergroup",
 				id: el.usergroup_id,
-				children: ["@", name]
+				children: `@${name}`
 			}) : /* @__PURE__ */ jsx("span", {
 				className: "sbk-mention--loading",
 				"aria-label": "Loading user group"
@@ -10354,10 +12618,10 @@ function renderLeaf(el, ctx, emojiSize, isFirst = false) {
 		}
 		case "channel": {
 			const name = ctx.resolvers.channel?.(el.channel_id);
-			content = name ? /* @__PURE__ */ jsxs(MentionLink, {
+			content = name ? /* @__PURE__ */ jsx(MentionLink, {
 				type: "channel",
 				id: el.channel_id,
-				children: ["#", name]
+				children: `#${name}`
 			}) : /* @__PURE__ */ jsxs("span", {
 				className: "sbk-mention--private",
 				children: [/* @__PURE__ */ jsx(LockIcon, {}), "Private channel"]
@@ -10365,9 +12629,9 @@ function renderLeaf(el, ctx, emojiSize, isFirst = false) {
 			break;
 		}
 		case "broadcast":
-			content = /* @__PURE__ */ jsxs("span", {
+			content = /* @__PURE__ */ jsx("span", {
 				className: "sbk-mention--broadcast",
-				children: ["@", el.range]
+				children: `@${el.range}`
 			});
 			break;
 		case "date": {
@@ -10560,9 +12824,12 @@ function Section({ block, blockId }) {
 			})]
 		}), accessory && /* @__PURE__ */ jsx("div", {
 			className: `sbk-section__accessory sbk-section__accessory--${accessory.type}`,
-			children: /* @__PURE__ */ jsx(Element, {
-				element: accessory,
-				blockId
+			children: /* @__PURE__ */ jsx(SectionAccessoryContext.Provider, {
+				value: true,
+				children: /* @__PURE__ */ jsx(Element, {
+					element: accessory,
+					blockId
+				})
 			})
 		})]
 	});