- (I'am not a token) -
-+ {PANELS[active()] ?? ""} +
+
+ The parent reads token.data to render — children are never mounted as DOM.
+
+ Crumb is the tokenizer — no separate createTokenizer call.
+
{props.text}, +); + +const CALLOUT_STYLE: Record< + CalloutData["kind"], + { bg: string; border: string; color: string; label: string } +> = { + info: { bg: "#eff6ff", border: "#93c5fd", color: "#1d4ed8", label: "Info" }, + tip: { bg: "#f0fdf4", border: "#86efac", color: "#15803d", label: "Tip" }, + warning: { bg: "#fffbeb", border: "#fcd34d", color: "#b45309", label: "Warning" }, +}; + +export const MixedTokensAndJSX = meta.story({ + name: "Tokens mixed with plain JSX", + parameters: { + docs: { + description: { + story: + "With `{ includeJSXElements: true }`, `resolveTokens` collects both tokens and regular JSX. Use `isToken` to narrow each item: tokens get the styled callout treatment, everything else renders as plain prose.", + }, + }, + }, + render: () => { + const items = resolveTokens( + CalloutTokenizer, + () => ( + <> +
This component resolves children with includeJSXElements: true.
Plain JSX passes through and renders as-is.
++ Tokens are intercepted; plain JSX passes through unchanged. +
+
+ Action and Div tokens are distinct families, resolved in one pass.
+