@nkootstra/block-kit 0.1.1 → 0.3.0

package/README.md

@@ -2,11 +2,11 @@
 
 `@nkootstra/block-kit` renders Slack [Block Kit](https://docs.slack.dev/block-kit/) JSON in React, pixel-for-pixel the way Slack does. Pass it the `blocks` your app sends to `chat.postMessage` or `views.open` and it draws the message, modal or Home tab, with working buttons, menus, date pickers and inputs.
 
-Documentation: **<https://block-kit.kootstra.io>**
+Documentation: **<https://docs.block-kit.dev>**
 
 ## Install
 
-The package needs React 19 or later.
+The package needs React 18 or later.
 
 ```sh
 bun add @nkootstra/block-kit @fontsource/lato @fontsource/roboto-mono
@@ -33,7 +33,7 @@ export function App() {
 }
 ```
 
-The [installation guide](https://block-kit.kootstra.io/installation) lists the remaining font weights and the entry points, and the [quickstart](https://block-kit.kootstra.io/quickstart) wires up an interactive approval message.
+The [installation guide](https://docs.block-kit.dev/installation) lists the remaining font weights and the entry points, and the [quickstart](https://docs.block-kit.dev/quickstart) wires up an interactive approval message.
 
 ## Entry points
 

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,
@@ -1228,6 +1232,13 @@ function actionTs(now = Date.now()) {
 	return (now / 1e3).toFixed(6);
 }
 //#endregion
+//#region src/useClientLayoutEffect.ts
+/**
+* `useLayoutEffect` in the browser and `useEffect` on the server, where neither runs. React 18
+* warns about every `useLayoutEffect` it meets while server rendering; React 19 doesn't.
+*/
+const useClientLayoutEffect = typeof document === "undefined" ? useEffect : useLayoutEffect;
+//#endregion
 //#region src/Tooltip.tsx
 /** How long the pointer rests on an anchor before its tooltip shows. */
 const SHOW_DELAY_MS = 300;
@@ -1245,7 +1256,7 @@ function Tooltip({ label, children, placement = "top" }) {
 	const tipRef = useRef(null);
 	const timer = useRef(void 0);
 	useEffect(() => () => clearTimeout(timer.current), []);
-	useLayoutEffect(() => {
+	useClientLayoutEffect(() => {
 		if (!open) {
 			setPosition(null);
 			return;
@@ -5599,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 {
@@ -5617,13 +5666,13 @@ 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);
 	const cardRef = useRef(null);
 	const cardId = useId();
-	useLayoutEffect(() => {
+	useClientLayoutEffect(() => {
 		if (!open) {
 			setPosition(null);
 			return;
@@ -5668,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",
@@ -5707,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
 					})]
@@ -5767,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",
@@ -5783,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",
@@ -5793,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",
@@ -5807,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",
@@ -5979,7 +6038,9 @@ function Button({ element, blockId }) {
 * Slack's `focus_on_load`: the element takes focus when its modal or Home tab opens. Slack ignores
 * it in messages and allows it on only one element per view.
 *
-* Pass the element's own ref when it already has one; otherwise attach the returned ref.
+* Pass the element's own ref when it already has one; otherwise attach the returned ref. The return
+* type is `useRef`'s own, which differs between @types/react 18 and 19, so it fits a `ref` prop in
+* both.
 */
 function useFocusOnLoad(element, existing) {
 	const { surface } = useBlockKit();
@@ -6247,10 +6308,10 @@ function Popover({ anchorRef, onDismiss, gap = DEFAULT_GAP, children }) {
 	const layerRef = useRef(null);
 	const [position, setPosition] = useState(null);
 	const dismiss = useRef(onDismiss);
-	useLayoutEffect(() => {
+	useClientLayoutEffect(() => {
 		dismiss.current = onDismiss;
 	});
-	useLayoutEffect(() => {
+	useClientLayoutEffect(() => {
 		function place() {
 			const anchor = anchorRef.current;
 			const layer = layerRef.current;
@@ -8179,7 +8240,8 @@ function Collapse({ open, className, children }) {
 	const [shown, setShown] = useState(open);
 	if (open && !shown) setShown(true);
 	const was = useRef(open);
-	useLayoutEffect(() => {
+	useClientLayoutEffect(() => {
+		ref.current?.toggleAttribute("inert", !open);
 		if (was.current === open) return;
 		was.current = open;
 		const el = ref.current;
@@ -8197,7 +8259,6 @@ function Collapse({ open, className, children }) {
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		className: className ? `sbk-collapse ${className}` : "sbk-collapse",
-		inert: !open,
 		onTransitionEnd: (e) => {
 			if (e.target !== e.currentTarget || e.propertyName !== "height") return;
 			if (open) e.currentTarget.style.height = "";
@@ -8355,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",
@@ -8390,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",
@@ -9703,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",
@@ -9886,7 +9947,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",
@@ -10023,7 +10084,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",
@@ -10053,8 +10114,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",
@@ -10064,8 +10126,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",
@@ -10081,7 +10144,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",
@@ -10155,7 +10218,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",
@@ -10381,7 +10444,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",
@@ -10467,7 +10530,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",
@@ -10478,7 +10541,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",
@@ -10745,7 +10808,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",
@@ -10755,7 +10818,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",