@nkootstra/block-kit 0.2.0 → 0.3.1

package/dist/{index-FPjJcmn3.d.ts → index-D139DZfD.d.ts}

@@ -580,6 +580,20 @@ interface PayloadContext {
 }
 /** What `onSubmit` may return: Slack's `response_action` ack, or nothing to just close the modal. */
 type SubmitResult = ViewResponseAction | undefined | void;
+/** What block-kit passes to a `linkComponent`: an anchor's props, ready to spread. */
+interface LinkProps {
+  href: string;
+  className?: string;
+  target?: string;
+  rel?: string;
+  children?: ReactNode;
+}
+/** A resolved mention, as `mentionHref` gets it. */
+interface MentionRef {
+  type: "user" | "channel" | "usergroup";
+  /** Slack id, e.g. `U0123ABC`, `C0123ABC` or `S0123ABC`. */
+  id: string;
+}
 interface BlockKitContextValue {
   surface: Surface;
   /** The provider's `theme`. Popovers, tooltips and dialogs render outside its wrapper, so they set it themselves. */
@@ -594,6 +608,10 @@ interface BlockKitContextValue {
   /** Called with a `view_closed` payload when a `<Modal>`'s close (X) button is pressed. */
   onClose?: (payload: ReturnType<typeof buildViewClosedPayload>) => void;
   resolvers: Resolvers;
+  /** Renders links from the payload; an `<a>` unless the provider's `linkComponent` says otherwise. */
+  linkComponent?: ComponentType<LinkProps>;
+  /** The app's page for a mention, if it has one. */
+  mentionHref?: (mention: MentionRef) => string | undefined;
   emoji: EmojiOptions;
   /** Validation errors keyed by block_id, as returned in `response_action: "errors"`. */
   errors: Record<string, string>;
@@ -656,6 +674,20 @@ interface BlockKitProviderProps {
   /** Called whenever an input value changes, with the full `state.values`. */
   onStateChange?: (state: StateValues) => void;
   resolvers?: Resolvers;
+  /**
+   * Renders every link that comes from the payload, e.g. a router's `<Link>` for client-side
+   * navigation or a component that rewrites URLs: links in mrkdwn, rich text, markdown and dates,
+   * data tables, plan and task card sources, video titles, attachment authors and titles, and
+   * mentions linked by `mentionHref`. It gets an anchor's props to spread: `href`, `className`,
+   * `children`, and `target`/`rel` for links that open a new tab, as Slack's do.
+   */
+  linkComponent?: ComponentType<LinkProps>;
+  /**
+   * Links resolved mentions to the app's own pages: return a URL for a user, channel or user
+   * group, or `undefined` to leave it unlinked. Mention links open in the same tab and render
+   * through `linkComponent`.
+   */
+  mentionHref?: (mention: MentionRef) => string | undefined;
   emoji?: EmojiOptions;
   errors?: Record<string, string>;
   timeZone?: string;
@@ -907,5 +939,5 @@ declare const VALIDATION_MESSAGES: {
  */
 declare function validateView(blocks: readonly Json[] | readonly unknown[], state: StateValues): Record<string, string>;
 //#endregion
-export { BlockSuggestionPayload as $, BlockAction as A, StackedView as B, SlackAttachment as C, BlockProps as Ct, elementComponents as D, SlackReaction as E, EmojiOptions as F, SurfaceScopeProps as G, SubmitResult as H, MessageApi as I, ViewsApi as J, SurfaceScopeValue as K, MessageUpdate as L, BlockKitProvider as M, BlockKitProviderProps as N, Element as O, ElementState as P, BlockActionsPayload as Q, PayloadContext as R, MessageProps as S, Blocks as St, SlackMessageLike as T, Json as Tt, Surface as U, StateValues as V, SurfaceScope as W, useContainer as X, useBlockKit as Y, useLiveView as Z, HomeTabView as _, buildBlockSuggestionPayload as _t, Tooltip as a, MessageBlockActionsPayload as at, Message as b, blockComponents as bt, TextObject as c, PayloadIdentity as ct, ViewProps as d, SuggestionOption as dt, BuildBlockActionsPayloadOptions as et, Modal as f, ViewBlockActionsPayload as ft, HomeTabProps as g, buildBlockActionsPayload as gt, HomeTab as h, ViewResponseAction as ht, UserMentionProps as i, Container as it, BlockKitContextValue as j, ActionContext as k, AnyView as l, PayloadTeam as lt, ModalView as m, ViewLike as mt, validateView as n, BuildViewClosedPayloadOptions as nt, TooltipProps as o, MessageContainer as ot, ModalProps as p, ViewContainer as pt, UserProfile as q, UserMention as r, BuildViewSubmissionPayloadOptions as rt, Text as s, OptionsResponse as st, VALIDATION_MESSAGES as t, BuildBlockSuggestionPayloadOptions as tt, View as u, PayloadUser as ut, Mrkdwn as v, buildViewClosedPayload as vt, SlackAttachmentField as w, ElementProps as wt, MessageApp as x, Block as xt, MrkdwnProps as y, buildViewSubmissionPayload as yt, Resolvers as z };
-//# sourceMappingURL=index-FPjJcmn3.d.ts.map
+export { useLiveView as $, BlockAction as A, PayloadContext as B, SlackAttachment as C, Block as Ct, elementComponents as D, Json as Dt, SlackReaction as E, ElementProps as Et, EmojiOptions as F, Surface as G, StackedView as H, LinkProps as I, SurfaceScopeValue as J, SurfaceScope as K, MentionRef as L, BlockKitProvider as M, BlockKitProviderProps as N, Element as O, ElementState as P, useContainer as Q, MessageApi as R, MessageProps as S, blockComponents as St, SlackMessageLike as T, BlockProps as Tt, StateValues as U, Resolvers as V, SubmitResult as W, ViewsApi as X, UserProfile as Y, useBlockKit as Z, HomeTabView as _, ViewResponseAction as _t, Tooltip as a, BuildViewSubmissionPayloadOptions as at, Message as b, buildViewClosedPayload as bt, TextObject as c, MessageContainer as ct, ViewProps as d, PayloadTeam as dt, BlockActionsPayload as et, Modal as f, PayloadUser as ft, HomeTabProps as g, ViewLike as gt, HomeTab as h, ViewContainer as ht, UserMentionProps as i, BuildViewClosedPayloadOptions as it, BlockKitContextValue as j, ActionContext as k, AnyView as l, OptionsResponse as lt, ModalView as m, ViewBlockActionsPayload as mt, validateView as n, BuildBlockActionsPayloadOptions as nt, TooltipProps as o, Container as ot, ModalProps as p, SuggestionOption as pt, SurfaceScopeProps as q, UserMention as r, BuildBlockSuggestionPayloadOptions as rt, Text as s, MessageBlockActionsPayload as st, VALIDATION_MESSAGES as t, BlockSuggestionPayload as tt, View as u, PayloadIdentity as ut, Mrkdwn as v, buildBlockActionsPayload as vt, SlackAttachmentField as w, Blocks as wt, MessageApp as x, buildViewSubmissionPayload as xt, MrkdwnProps as y, buildBlockSuggestionPayload as yt, MessageUpdate as z };
+//# sourceMappingURL=index-D139DZfD.d.ts.map

package/dist/index.d.ts

@@ -1,3 +1,3 @@
 
-import { $ as BlockSuggestionPayload, A as BlockAction, B as StackedView, C as SlackAttachment, Ct as BlockProps, D as elementComponents, E as SlackReaction, F as EmojiOptions, G as SurfaceScopeProps, H as SubmitResult, I as MessageApi, J as ViewsApi, K as SurfaceScopeValue, L as MessageUpdate, M as BlockKitProvider, N as BlockKitProviderProps, O as Element, P as ElementState, Q as BlockActionsPayload, R as PayloadContext, S as MessageProps, St as Blocks, T as SlackMessageLike, Tt as Json, U as Surface, V as StateValues, W as SurfaceScope, X as useContainer, Y as useBlockKit, Z as useLiveView, _ as HomeTabView, _t as buildBlockSuggestionPayload, a as Tooltip, at as MessageBlockActionsPayload, b as Message, bt as blockComponents, c as TextObject, ct as PayloadIdentity, d as ViewProps, dt as SuggestionOption, et as BuildBlockActionsPayloadOptions, f as Modal, ft as ViewBlockActionsPayload, g as HomeTabProps, gt as buildBlockActionsPayload, h as HomeTab, ht as ViewResponseAction, i as UserMentionProps, it as Container, j as BlockKitContextValue, k as ActionContext, l as AnyView, lt as PayloadTeam, m as ModalView, mt as ViewLike, n as validateView, nt as BuildViewClosedPayloadOptions, o as TooltipProps, ot as MessageContainer, p as ModalProps, pt as ViewContainer, q as UserProfile, r as UserMention, rt as BuildViewSubmissionPayloadOptions, s as Text, st as OptionsResponse, t as VALIDATION_MESSAGES, tt as BuildBlockSuggestionPayloadOptions, u as View, ut as PayloadUser, v as Mrkdwn, vt as buildViewClosedPayload, w as SlackAttachmentField, wt as ElementProps, x as MessageApp, xt as Block, y as MrkdwnProps, yt as buildViewSubmissionPayload, z as Resolvers } from "./index-FPjJcmn3.js";
-export { type ActionContext, type AnyView, Block, type BlockAction, type BlockActionsPayload, type BlockKitContextValue, BlockKitProvider, type BlockKitProviderProps, type BlockProps, type BlockSuggestionPayload, Blocks, type BuildBlockActionsPayloadOptions, type BuildBlockSuggestionPayloadOptions, type BuildViewClosedPayloadOptions, type BuildViewSubmissionPayloadOptions, type Container, Element, type ElementProps, type ElementState, type EmojiOptions, HomeTab, type HomeTabProps, type HomeTabView, type Json, Message, type MessageApi, type MessageApp, type MessageBlockActionsPayload, type MessageContainer, type MessageProps, type MessageUpdate, Modal, type ModalProps, type ModalView, Mrkdwn, type MrkdwnProps, type OptionsResponse, type PayloadContext, type PayloadIdentity, type PayloadTeam, type PayloadUser, type Resolvers, type SlackAttachment, type SlackAttachmentField, type SlackMessageLike, type SlackReaction, type StackedView, type StateValues, type SubmitResult, type SuggestionOption, type Surface, SurfaceScope, type SurfaceScopeProps, type SurfaceScopeValue, Text, type TextObject, Tooltip, type TooltipProps, UserMention, type UserMentionProps, type UserProfile, VALIDATION_MESSAGES, View, type ViewBlockActionsPayload, type ViewContainer, type ViewLike, type ViewProps, type ViewResponseAction, type ViewsApi, blockComponents, buildBlockActionsPayload, buildBlockSuggestionPayload, buildViewClosedPayload, buildViewSubmissionPayload, elementComponents, useBlockKit, useContainer, useLiveView, validateView };
+import { $ as useLiveView, A as BlockAction, B as PayloadContext, C as SlackAttachment, Ct as Block, D as elementComponents, Dt as Json, E as SlackReaction, Et as ElementProps, F as EmojiOptions, G as Surface, H as StackedView, I as LinkProps, J as SurfaceScopeValue, K as SurfaceScope, L as MentionRef, M as BlockKitProvider, N as BlockKitProviderProps, O as Element, P as ElementState, Q as useContainer, R as MessageApi, S as MessageProps, St as blockComponents, T as SlackMessageLike, Tt as BlockProps, U as StateValues, V as Resolvers, W as SubmitResult, X as ViewsApi, Y as UserProfile, Z as useBlockKit, _ as HomeTabView, _t as ViewResponseAction, a as Tooltip, at as BuildViewSubmissionPayloadOptions, b as Message, bt as buildViewClosedPayload, c as TextObject, ct as MessageContainer, d as ViewProps, dt as PayloadTeam, et as BlockActionsPayload, f as Modal, ft as PayloadUser, g as HomeTabProps, gt as ViewLike, h as HomeTab, ht as ViewContainer, i as UserMentionProps, it as BuildViewClosedPayloadOptions, j as BlockKitContextValue, k as ActionContext, l as AnyView, lt as OptionsResponse, m as ModalView, mt as ViewBlockActionsPayload, n as validateView, nt as BuildBlockActionsPayloadOptions, o as TooltipProps, ot as Container, p as ModalProps, pt as SuggestionOption, q as SurfaceScopeProps, r as UserMention, rt as BuildBlockSuggestionPayloadOptions, s as Text, st as MessageBlockActionsPayload, t as VALIDATION_MESSAGES, tt as BlockSuggestionPayload, u as View, ut as PayloadIdentity, v as Mrkdwn, vt as buildBlockActionsPayload, w as SlackAttachmentField, wt as Blocks, x as MessageApp, xt as buildViewSubmissionPayload, y as MrkdwnProps, yt as buildBlockSuggestionPayload, z as MessageUpdate } from "./index-D139DZfD.js";
+export { type ActionContext, type AnyView, Block, type BlockAction, type BlockActionsPayload, type BlockKitContextValue, BlockKitProvider, type BlockKitProviderProps, type BlockProps, type BlockSuggestionPayload, Blocks, type BuildBlockActionsPayloadOptions, type BuildBlockSuggestionPayloadOptions, type BuildViewClosedPayloadOptions, type BuildViewSubmissionPayloadOptions, type Container, Element, type ElementProps, type ElementState, type EmojiOptions, HomeTab, type HomeTabProps, type HomeTabView, type Json, type LinkProps, type MentionRef, Message, type MessageApi, type MessageApp, type MessageBlockActionsPayload, type MessageContainer, type MessageProps, type MessageUpdate, Modal, type ModalProps, type ModalView, Mrkdwn, type MrkdwnProps, type OptionsResponse, type PayloadContext, type PayloadIdentity, type PayloadTeam, type PayloadUser, type Resolvers, type SlackAttachment, type SlackAttachmentField, type SlackMessageLike, type SlackReaction, type StackedView, type StateValues, type SubmitResult, type SuggestionOption, type Surface, SurfaceScope, type SurfaceScopeProps, type SurfaceScopeValue, Text, type TextObject, Tooltip, type TooltipProps, UserMention, type UserMentionProps, type UserProfile, VALIDATION_MESSAGES, View, type ViewBlockActionsPayload, type ViewContainer, type ViewLike, type ViewProps, type ViewResponseAction, type ViewsApi, blockComponents, buildBlockActionsPayload, buildBlockSuggestionPayload, buildViewClosedPayload, buildViewSubmissionPayload, elementComponents, useBlockKit, useContainer, useLiveView, validateView };

package/dist/index.js

@@ -865,7 +865,7 @@ function newHash() {
 	return `${Math.floor(Date.now() / 1e3)}.${Math.random().toString(36).slice(2, 10)}`;
 }
 function BlockKitProvider(props) {
-	const { children, surface = "message", onAction, onPayload, onSubmit, onClose, onOptions, onStateChange, resolvers, emoji, errors, timeZone, identity, theme } = props;
+	const { children, surface = "message", onAction, onPayload, onSubmit, onClose, onOptions, onStateChange, resolvers, linkComponent, mentionHref, emoji, errors, timeZone, identity, theme } = props;
 	const [state, setState] = useState({});
 	const stateRef = useRef(state);
 	const containerRef = useRef(void 0);
@@ -1041,6 +1041,8 @@ function BlockKitProvider(props) {
 		onSubmit,
 		onClose,
 		resolvers: resolvers ?? {},
+		linkComponent,
+		mentionHref,
 		emoji: emoji ?? {},
 		errors: stackedView?.errors ?? errors ?? {},
 		timeZone,
@@ -1061,6 +1063,8 @@ function BlockKitProvider(props) {
 		onSubmit,
 		onClose,
 		resolvers,
+		linkComponent,
+		mentionHref,
 		emoji,
 		errors,
 		timeZone,
@@ -5606,6 +5610,44 @@ function Emoji({ name, skinTone, size = 22 }) {
 	});
 }
 //#endregion
+//#region src/Link.tsx
+/**
+* A link from the payload, rendered by the provider's `linkComponent` when it has one. Without an
+* `href` (a payload missing its URL) it stays a plain `<a>`, so the app's component always gets one.
+*/
+function Link({ href, children, ...props }) {
+	const { linkComponent: Component } = useBlockKit();
+	if (Component && href !== void 0) return /* @__PURE__ */ jsx(Component, {
+		href,
+		...props,
+		children
+	});
+	return /* @__PURE__ */ jsx("a", {
+		href,
+		...props,
+		children
+	});
+}
+/**
+* A resolved channel or user group mention: a link to the app's page for it when `mentionHref`
+* returns one, otherwise the plain pill. Both keep the pill's class, so they look the same.
+*/
+function MentionLink({ type, id, children }) {
+	const { mentionHref } = useBlockKit();
+	const href = mentionHref?.({
+		type,
+		id
+	});
+	return href === void 0 ? /* @__PURE__ */ jsx("span", {
+		className: "sbk-mention",
+		children
+	}) : /* @__PURE__ */ jsx(Link, {
+		className: "sbk-mention",
+		href,
+		children
+	});
+}
+//#endregion
 //#region src/UserMention.tsx
 function localTime(timeZone) {
 	try {
@@ -5624,7 +5666,7 @@ function localTime(timeZone) {
 * `resolvers.userProfile` and falling back to the display name alone.
 */
 function UserMention({ id, name }) {
-	const { resolvers, theme } = useBlockKit();
+	const { resolvers, theme, mentionHref } = useBlockKit();
 	const [open, setOpen] = useState(false);
 	const [position, setPosition] = useState(null);
 	const anchorRef = useRef(null);
@@ -5675,6 +5717,10 @@ function UserMention({ id, name }) {
 	}
 	const profile = open ? resolvers.userProfile?.(id) ?? { name } : void 0;
 	const time = profile?.timeZone ? localTime(profile.timeZone) : void 0;
+	const href = profile ? mentionHref?.({
+		type: "user",
+		id
+	}) : void 0;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
 		ref: anchorRef,
 		className: "sbk-mention sbk-mention--user",
@@ -5714,7 +5760,11 @@ function UserMention({ id, name }) {
 			children: [
 				/* @__PURE__ */ jsxs("div", {
 					className: "sbk-profile-card__name",
-					children: [profile.name, profile.pronouns && /* @__PURE__ */ jsx("span", {
+					children: [href === void 0 ? profile.name : /* @__PURE__ */ jsx(Link, {
+						className: "sbk-profile-card__name-link",
+						href,
+						children: profile.name
+					}), profile.pronouns && /* @__PURE__ */ jsx("span", {
 						className: "sbk-profile-card__pronouns",
 						children: profile.pronouns
 					})]
@@ -5774,7 +5824,7 @@ function renderNode(node, resolvers, timeZone, emojiSize) {
 			className: "sbk-mrkdwn__quote",
 			children: renderNodes(node.children, resolvers, timeZone, emojiSize)
 		});
-		case "link": return /* @__PURE__ */ jsx("a", {
+		case "link": return /* @__PURE__ */ jsx(Link, {
 			className: "sbk-link",
 			href: node.url,
 			target: "_blank",
@@ -5790,8 +5840,9 @@ function renderNode(node, resolvers, timeZone, emojiSize) {
 		}
 		case "usergroup": {
 			const name = resolvers.usergroup?.(node.id);
-			return name ? /* @__PURE__ */ jsxs("span", {
-				className: "sbk-mention",
+			return name ? /* @__PURE__ */ jsxs(MentionLink, {
+				type: "usergroup",
+				id: node.id,
 				children: ["@", name]
 			}) : /* @__PURE__ */ jsx("span", {
 				className: "sbk-mention--loading",
@@ -5800,8 +5851,9 @@ function renderNode(node, resolvers, timeZone, emojiSize) {
 		}
 		case "channel": {
 			const name = resolvers.channel?.(node.id) ?? node.label;
-			return name ? /* @__PURE__ */ jsxs("span", {
-				className: "sbk-mention",
+			return name ? /* @__PURE__ */ jsxs(MentionLink, {
+				type: "channel",
+				id: node.id,
 				children: ["#", name]
 			}) : /* @__PURE__ */ jsxs("span", {
 				className: "sbk-mention--private",
@@ -5814,7 +5866,7 @@ function renderNode(node, resolvers, timeZone, emojiSize) {
 		});
 		case "date": {
 			const text = formatSlackDate(node.timestamp, node.format, { timeZone });
-			return node.url ? /* @__PURE__ */ jsx("a", {
+			return node.url ? /* @__PURE__ */ jsx(Link, {
 				className: "sbk-link",
 				href: node.url,
 				target: "_blank",
@@ -8364,7 +8416,7 @@ function RichTextMiniSection({ section }) {
 function RichTextMiniLeaf({ element }) {
 	if (element.type === "link") {
 		const text = typeof element.text === "string" ? element.text : String(element.url ?? "");
-		return /* @__PURE__ */ jsx("a", {
+		return /* @__PURE__ */ jsx(Link, {
 			className: "sbk-rtmini__link",
 			href: typeof element.url === "string" ? element.url : void 0,
 			target: "_blank",
@@ -8399,7 +8451,7 @@ function DataTableCell({ cell }) {
 	if (!cell || typeof cell !== "object") return null;
 	switch (cell.type) {
 		case "rich_text": return /* @__PURE__ */ jsx(RichTextMini, { value: cell });
-		case "url": return /* @__PURE__ */ jsx("a", {
+		case "url": return /* @__PURE__ */ jsx(Link, {
 			className: "sbk-rtmini__link",
 			href: typeof cell.url === "string" ? cell.url : void 0,
 			target: "_blank",
@@ -9712,7 +9764,7 @@ function renderInlineNode(node) {
 		});
 		case "link": {
 			const link = node;
-			return /* @__PURE__ */ jsx("a", {
+			return /* @__PURE__ */ jsx(Link, {
 				className: "sbk-link",
 				href: link.url,
 				target: "_blank",
@@ -9820,6 +9872,24 @@ function DotIcon({ status }) {
 		children: /* @__PURE__ */ jsx("path", { d: "M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0" })
 	});
 }
+/** How a status reads aloud. The icons are hidden from assistive technology, so this stands in. */
+const STATUS_LABELS = {
+	complete: "complete",
+	in_progress: "in progress",
+	pending: "pending",
+	error: "failed"
+};
+/**
+* A status as text that only screen readers get, set after a title (", in progress"), so a toggle
+* or task header is announced with the state its icon shows. An unknown status says nothing.
+*/
+function StatusText({ status }) {
+	const label = STATUS_LABELS[status];
+	return label ? /* @__PURE__ */ jsx("span", {
+		className: "sbk-visually-hidden",
+		children: `, ${label}`
+	}) : null;
+}
 /** The glyph on a toggle bar (the plan's or a task_card's): check, warning or spinner. */
 function StatusIcon({ status }) {
 	if (status === "complete") return /* @__PURE__ */ jsx(CheckCircleIcon, {});
@@ -9846,7 +9916,8 @@ function aggregateStatus(statuses) {
 /**
 * One step of the plan. As in Slack, a thin line joins each step's icon to the next, its details
 * start open, and the title is a button that hides and shows them instantly; a task with nothing
-* to reveal gets a disabled header and no caret.
+* to reveal gets the same header as plain text, with no caret. The status, shown as an icon, is
+* also in the header as text for screen readers.
 */
 function TaskRow({ task }) {
 	const [open, setOpen] = useState(true);
@@ -9867,21 +9938,28 @@ function TaskRow({ task }) {
 			]
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "sbk-plan__task-content",
-			children: [/* @__PURE__ */ jsxs("button", {
+			children: [expandable ? /* @__PURE__ */ jsxs("button", {
 				type: "button",
 				className: "sbk-plan__task-header",
 				"aria-expanded": open,
-				"aria-disabled": expandable ? void 0 : true,
-				onClick: () => {
-					if (expandable) setOpen((value) => !value);
-				},
+				onClick: () => setOpen((value) => !value),
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "sbk-plan__task-title",
+						children: task.title
+					}),
+					/* @__PURE__ */ jsx(StatusText, { status: task.status }),
+					/* @__PURE__ */ jsx("span", {
+						className: "sbk-plan__task-caret",
+						children: /* @__PURE__ */ jsx(CaretIcon, { direction: open ? "down" : "right" })
+					})
+				]
+			}) : /* @__PURE__ */ jsxs("div", {
+				className: "sbk-plan__task-header",
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "sbk-plan__task-title",
 					children: task.title
-				}), expandable ? /* @__PURE__ */ jsx("span", {
-					className: "sbk-plan__task-caret",
-					children: /* @__PURE__ */ jsx(CaretIcon, { direction: open ? "down" : "right" })
-				}) : null]
+				}), /* @__PURE__ */ jsx(StatusText, { status: task.status })]
 			}), open && expandable ? /* @__PURE__ */ jsxs("div", {
 				className: "sbk-plan__task-body",
 				children: [
@@ -9895,7 +9973,7 @@ function TaskRow({ task }) {
 					}) : null,
 					sources.length > 0 ? /* @__PURE__ */ jsx("ul", {
 						className: "sbk-plan__task-sources",
-						children: sources.map((source, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", {
+						children: sources.map((source, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Link, {
 							className: "sbk-plan__task-source-link",
 							href: source.url,
 							target: "_blank",
@@ -9930,6 +10008,7 @@ function Plan({ block }) {
 						className: "sbk-plan__pill-title",
 						children: block.title
 					}),
+					/* @__PURE__ */ jsx(StatusText, { status }),
 					/* @__PURE__ */ jsx("span", {
 						className: "sbk-plan__pill-chevron",
 						children: /* @__PURE__ */ jsx(CaretIcon, { direction: expanded ? "down" : "right" })
@@ -10032,7 +10111,7 @@ function renderLeaf(el, ctx, emojiSize, isFirst = false) {
 			content = renderTextWithBreaks(el.text, isFirst);
 			break;
 		case "link":
-			content = /* @__PURE__ */ jsx("a", {
+			content = /* @__PURE__ */ jsx(Link, {
 				className: "sbk-link",
 				href: el.url,
 				target: "_blank",
@@ -10062,8 +10141,9 @@ function renderLeaf(el, ctx, emojiSize, isFirst = false) {
 		}
 		case "usergroup": {
 			const name = ctx.resolvers.usergroup?.(el.usergroup_id);
-			content = name ? /* @__PURE__ */ jsxs("span", {
-				className: "sbk-mention",
+			content = name ? /* @__PURE__ */ jsxs(MentionLink, {
+				type: "usergroup",
+				id: el.usergroup_id,
 				children: ["@", name]
 			}) : /* @__PURE__ */ jsx("span", {
 				className: "sbk-mention--loading",
@@ -10073,8 +10153,9 @@ function renderLeaf(el, ctx, emojiSize, isFirst = false) {
 		}
 		case "channel": {
 			const name = ctx.resolvers.channel?.(el.channel_id);
-			content = name ? /* @__PURE__ */ jsxs("span", {
-				className: "sbk-mention",
+			content = name ? /* @__PURE__ */ jsxs(MentionLink, {
+				type: "channel",
+				id: el.channel_id,
 				children: ["#", name]
 			}) : /* @__PURE__ */ jsxs("span", {
 				className: "sbk-mention--private",
@@ -10090,7 +10171,7 @@ function renderLeaf(el, ctx, emojiSize, isFirst = false) {
 			break;
 		case "date": {
 			const text = formatSlackDate(el.timestamp, el.format, { timeZone: ctx.timeZone });
-			content = el.url ? /* @__PURE__ */ jsx("a", {
+			content = el.url ? /* @__PURE__ */ jsx(Link, {
 				className: "sbk-link",
 				href: el.url,
 				target: "_blank",
@@ -10164,7 +10245,7 @@ function renderTextWithBreaks(value, isFirst) {
 */
 function renderPreformattedLines(elements) {
 	return elements.map((el, i) => {
-		if (el.type === "link") return /* @__PURE__ */ jsx(Fragment$1, { children: applyStyle(/* @__PURE__ */ jsx("a", {
+		if (el.type === "link") return /* @__PURE__ */ jsx(Fragment$1, { children: applyStyle(/* @__PURE__ */ jsx(Link, {
 			className: "sbk-link",
 			href: el.url,
 			target: "_blank",
@@ -10341,33 +10422,35 @@ function TaskCard({ block }) {
 	const [expanded, setExpanded] = useState(false);
 	const sources = Array.isArray(block.sources) ? block.sources : [];
 	const expandable = Boolean(block.details || block.output || sources.length > 0);
+	const pillContent = /* @__PURE__ */ jsxs("span", {
+		className: "sbk-task-card__pill-content",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "sbk-task-card__pill-icon",
+				children: /* @__PURE__ */ jsx(StatusIcon, { status: block.status })
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "sbk-task-card__pill-title",
+				children: block.title
+			}),
+			/* @__PURE__ */ jsx(StatusText, { status: block.status }),
+			expandable ? /* @__PURE__ */ jsx("span", {
+				className: "sbk-task-card__pill-chevron",
+				children: /* @__PURE__ */ jsx(CaretIcon, { direction: expanded ? "down" : "right" })
+			}) : null
+		]
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: "sbk-task-card",
-		children: [/* @__PURE__ */ jsx("button", {
+		children: [expandable ? /* @__PURE__ */ jsx("button", {
 			type: "button",
 			className: "sbk-task-card__pill",
 			"aria-expanded": expanded,
-			"aria-disabled": expandable ? void 0 : true,
-			onClick: () => {
-				if (expandable) setExpanded((value) => !value);
-			},
-			children: /* @__PURE__ */ jsxs("span", {
-				className: "sbk-task-card__pill-content",
-				children: [
-					/* @__PURE__ */ jsx("span", {
-						className: "sbk-task-card__pill-icon",
-						children: /* @__PURE__ */ jsx(StatusIcon, { status: block.status })
-					}),
-					/* @__PURE__ */ jsx("span", {
-						className: "sbk-task-card__pill-title",
-						children: block.title
-					}),
-					expandable ? /* @__PURE__ */ jsx("span", {
-						className: "sbk-task-card__pill-chevron",
-						children: /* @__PURE__ */ jsx(CaretIcon, { direction: expanded ? "down" : "right" })
-					}) : null
-				]
-			})
+			onClick: () => setExpanded((value) => !value),
+			children: pillContent
+		}) : /* @__PURE__ */ jsx("div", {
+			className: "sbk-task-card__pill",
+			children: pillContent
 		}), /* @__PURE__ */ jsx(Collapse, {
 			open: expanded,
 			children: /* @__PURE__ */ jsxs("div", {
@@ -10390,7 +10473,7 @@ function TaskCard({ block }) {
 							children: /* @__PURE__ */ jsx(RichTextMini, { value: block.output })
 						}) : null, sources.length > 0 ? /* @__PURE__ */ jsx("ul", {
 							className: "sbk-task-card__sources",
-							children: sources.map((source, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", {
+							children: sources.map((source, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Link, {
 								className: "sbk-task-card__source-link",
 								href: source.url,
 								target: "_blank",
@@ -10476,7 +10559,7 @@ function Video({ block }) {
 			}),
 			title && /* @__PURE__ */ jsxs("div", {
 				className: "sbk-video__title",
-				children: [titleUrl ? /* @__PURE__ */ jsx("a", {
+				children: [titleUrl ? /* @__PURE__ */ jsx(Link, {
 					href: titleUrl,
 					target: "_blank",
 					rel: "noreferrer",
@@ -10487,7 +10570,7 @@ function Video({ block }) {
 					children: /* @__PURE__ */ jsx(CaretDownIcon, {})
 				})]
 			}),
-			/* @__PURE__ */ jsxs("a", {
+			/* @__PURE__ */ jsxs(Link, {
 				className: "sbk-video__frame",
 				href: typeof json.video_url === "string" ? json.video_url : titleUrl,
 				target: "_blank",
@@ -10754,7 +10837,7 @@ function Attachment({ attachment }) {
 						className: "sbk-attachment__author-icon",
 						src: attachment.author_icon,
 						alt: ""
-					}), attachment.author_link ? /* @__PURE__ */ jsx("a", {
+					}), attachment.author_link ? /* @__PURE__ */ jsx(Link, {
 						className: "sbk-link",
 						href: attachment.author_link,
 						target: "_blank",
@@ -10764,7 +10847,7 @@ function Attachment({ attachment }) {
 				}),
 				attachment.title && /* @__PURE__ */ jsx("div", {
 					className: "sbk-attachment__title",
-					children: attachment.title_link ? /* @__PURE__ */ jsx("a", {
+					children: attachment.title_link ? /* @__PURE__ */ jsx(Link, {
 						className: "sbk-link",
 						href: attachment.title_link,
 						target: "_blank",