@nkootstra/block-kit 0.1.0 → 0.2.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-BV_5_J_Q.d.ts → index-FPjJcmn3.d.ts}

@@ -582,6 +582,8 @@ interface PayloadContext {
 type SubmitResult = ViewResponseAction | undefined | void;
 interface BlockKitContextValue {
   surface: Surface;
+  /** The provider's `theme`. Popovers, tooltips and dialogs render outside its wrapper, so they set it themselves. */
+  theme?: "light" | "dark";
   onAction?: (action: BlockAction, context: ActionContext) => void;
   /** Same actions as `onAction`, wrapped in the full Slack `block_actions` payload (team/user/container/...). */
   onPayload?: (payload: ReturnType<typeof buildBlockActionsPayload>, context: PayloadContext) => void;
@@ -906,4 +908,4 @@ 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-BV_5_J_Q.d.ts.map
+//# sourceMappingURL=index-FPjJcmn3.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-BV_5_J_Q.js";
+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 };

package/dist/index.js

@@ -1035,6 +1035,7 @@ function BlockKitProvider(props) {
 	const stackedView = useContext(StackEntryContext);
 	const value = useMemo(() => ({
 		surface,
+		theme,
 		onAction,
 		onPayload,
 		onSubmit,
@@ -1054,6 +1055,7 @@ function BlockKitProvider(props) {
 		respond
 	}), [
 		surface,
+		theme,
 		onAction,
 		onPayload,
 		onSubmit,
@@ -1226,6 +1228,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;
@@ -1235,6 +1244,7 @@ const SHOW_DELAY_MS = 300;
 * Slack. Portalled to `<body>` so scroll containers and `overflow: hidden` can't clip it.
 */
 function Tooltip({ label, children, placement = "top" }) {
+	const { theme } = useBlockKit();
 	const id = useId();
 	const [open, setOpen] = useState(false);
 	const [position, setPosition] = useState(null);
@@ -1242,7 +1252,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;
@@ -1298,6 +1308,7 @@ function Tooltip({ label, children, placement = "top" }) {
 		ref: tipRef,
 		id,
 		role: "tooltip",
+		"data-theme": theme,
 		className: `sbk-tooltip sbk-tooltip--${position?.side ?? placement}`,
 		style: position ? {
 			top: position.top,
@@ -5613,13 +5624,13 @@ function localTime(timeZone) {
 * `resolvers.userProfile` and falling back to the display name alone.
 */
 function UserMention({ id, name }) {
-	const { resolvers } = useBlockKit();
+	const { resolvers, theme } = 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;
@@ -5681,6 +5692,7 @@ function UserMention({ id, name }) {
 		role: "dialog",
 		"aria-label": profile.name,
 		className: "sbk-root sbk-profile-card",
+		"data-theme": theme,
 		style: position ? {
 			top: position.top,
 			left: position.left
@@ -5865,10 +5877,12 @@ function Text({ text, emojiSize = 22 }) {
 //#region src/confirm/ConfirmDialog.tsx
 /** Slack's confirmation dialog: blocks the triggering action until the user picks confirm/deny. */
 function ConfirmDialog({ confirm, onConfirm, onDeny }) {
+	const { theme } = useBlockKit();
 	const confirmStyle = confirm.style ?? "primary";
 	const node = /* @__PURE__ */ jsx("div", {
 		className: "sbk-confirm__overlay",
 		role: "presentation",
+		"data-theme": theme,
 		onClick: onDeny,
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "sbk-confirm",
@@ -5972,7 +5986,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();
@@ -6236,13 +6252,14 @@ const DEFAULT_GAP = 4;
 * from.
 */
 function Popover({ anchorRef, onDismiss, gap = DEFAULT_GAP, children }) {
+	const { theme } = useBlockKit();
 	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;
@@ -6286,6 +6303,7 @@ function Popover({ anchorRef, onDismiss, gap = DEFAULT_GAP, children }) {
 	return createPortal(/* @__PURE__ */ jsx("div", {
 		ref: layerRef,
 		className: "sbk-root sbk-popover",
+		"data-theme": theme,
 		style: position ?? {
 			top: 0,
 			left: 0,
@@ -7733,24 +7751,20 @@ function Alert({ block }) {
 }
 //#endregion
 //#region src/blocks/Callout.tsx
-/**
-* Measured from Builder references (`callout` background_color: "green" → #f4ffdb, "blue" →
-* #e3f8ff). The remaining keys aren't covered by a fixture; they're extrapolated to the same
-* pastel-tint style and may not match Slack's exact values.
-*/
-const BACKGROUND_COLORS = {
-	green: "#f4ffdb",
-	blue: "#e3f8ff",
-	red: "#ffeceb",
-	yellow: "#fff8db",
-	purple: "#f3ecff",
-	gray: "#f4f4f4",
-	grey: "#f4f4f4"
-};
+/** Callout colours; each has a token per theme (Callout.css, and Message.css for dark). */
+const BACKGROUND_COLORS = /* @__PURE__ */ new Set([
+	"green",
+	"blue",
+	"red",
+	"yellow",
+	"purple",
+	"gray"
+]);
 function Callout({ block }) {
 	const json = block;
 	const color = typeof json.background_color === "string" ? json.background_color : void 0;
-	const background = (color && BACKGROUND_COLORS[color]) ?? BACKGROUND_COLORS.gray;
+	const key = color === "grey" ? "gray" : color;
+	const background = `var(--sbk-callout-${key && BACKGROUND_COLORS.has(key) ? key : "gray"}-bg)`;
 	const children = json.child_blocks ?? [];
 	return /* @__PURE__ */ jsx("div", {
 		className: "sbk-callout",
@@ -8174,7 +8188,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;
@@ -8192,7 +8207,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 = "";
@@ -8666,26 +8680,12 @@ const CHART_COLORS = [
 	"#c474d3",
 	"#0e9dd3"
 ];
-/** Area-fill tints for the first two palette colours (measured); others get an approximation. */
-const AREA_FILLS = {
-	"#e96825": "rgb(255,237,229)",
-	"#20a271": "rgb(227,255,243)"
-};
-function hexToRgb(hex) {
-	const n = Number.parseInt(hex.slice(1), 16);
-	return [
-		n >> 16 & 255,
-		n >> 8 & 255,
-		n & 255
-	];
-}
-/** Fill colour for a series' area, tinted ~88% toward white when not one of the measured pairs. */
-function areaFillFor(color) {
-	const known = AREA_FILLS[color.toLowerCase()];
-	if (known) return known;
-	const [r, g, b] = hexToRgb(color);
-	const mix = (c) => Math.round(c + (255 - c) * .88);
-	return `rgb(${mix(r)},${mix(g)},${mix(b)})`;
+/**
+* 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";
@@ -8898,7 +8898,7 @@ function CartesianChart({ type, series, categories }) {
 					const color = 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`,
-						fill: areaFillFor(color),
+						style: { fill: areaFillForIndex(si) },
 						fillOpacity: .7
 					}) : null, /* @__PURE__ */ jsx("path", {
 						d: smoothLinePath(points),