diff --git a/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/EnrichedMarkdownText.stories.tsx b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/EnrichedMarkdownText.stories.tsx
deleted file mode 100644
index c886173c..00000000
--- a/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/EnrichedMarkdownText.stories.tsx
+++ /dev/null
@@ -1,322 +0,0 @@
-import React from 'react';
-import type { ComponentProps } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-native';
-import { EnrichedMarkdownText } from 'react-native-enriched-markdown';
-import {
-  EnrichedMarkdownTextStory,
-  SpoilerStory,
-} from './EnrichedMarkdownTextStory';
-
-const meta: Meta<typeof EnrichedMarkdownText> = {
-  title: 'EnrichedMarkdownText',
-  component: EnrichedMarkdownText,
-  parameters: {
-    controls: { exclude: ['markdown'] },
-  },
-  argTypes: {
-    style: { control: 'object' },
-    onLinkPress: { name: 'onLinkPress', action: 'onLinkPress' },
-    onLinkLongPress: { name: 'onLinkLongPress', action: 'onLinkLongPress' },
-    onTaskListItemPress: {
-      name: 'onTaskListItemPress',
-      action: 'onTaskListItemPress',
-    },
-  },
-};
-
-export default meta;
-type Story = Omit<StoryObj<typeof meta>, 'args' | 'render' | 'argTypes'> & {
-  args?: ComponentProps<typeof EnrichedMarkdownText> & Record<string, any>;
-  render: (
-    args: ComponentProps<typeof EnrichedMarkdownText> & Record<string, any>
-  ) => React.ReactElement;
-  argTypes?: Record<string, any>;
-};
-
-export const InlineMarkdown: Story = {
-  args: {
-    markdown:
-      '**Bold**, *italic*, ***bold italic***, ~~strikethrough~~, `inline code`, [link](https://example.com)',
-  },
-  render: (args) => (
-    <EnrichedMarkdownTextStory
-      title="Inline Markdown"
-      description="Renders inline markdown: bold, italic, strikethrough, and more."
-      {...args}
-    />
-  ),
-};
-
-export const Headings: Story = {
-  args: {
-    markdown: '# H1\n## H2\n### H3\n#### H4\n##### H5\n###### H6',
-  },
-  render: (args) => (
-    <EnrichedMarkdownTextStory
-      title="Headings"
-      description="Supports all six heading levels via # syntax."
-      {...args}
-    />
-  ),
-};
-
-export const CodeBlock: Story = {
-  args: {
-    markdown: '`inline code` and\n\n```\nconst x = 1;\nconsole.log(x);\n```',
-  },
-  render: (args) => (
-    <EnrichedMarkdownTextStory
-      title="Code"
-      description="Inline code with single backticks, fenced code blocks with triple backticks."
-      {...args}
-    />
-  ),
-};
-
-export const Table: Story = {
-  args: {
-    markdown:
-      '| Col A | Col B |\n| ----- | ----- |\n| one   | two   |\n| three | four  |',
-    flavor: 'github',
-  },
-  argTypes: {
-    flavor: {
-      options: ['github', 'commonmark'],
-      control: { type: 'inline-radio' },
-    },
-  },
-  render: (args) => (
-    <EnrichedMarkdownTextStory
-      title="Table"
-      description="Tables are renderable only via GitHub flavor. With commonmark it does not render."
-      {...args}
-    />
-  ),
-};
-
-export const Md4cFlags: Story = {
-  args: {
-    markdown: '_underline_\n\ntext^superscript^\n\ntext~subscript~',
-    underline: true,
-    superscript: true,
-    subscript: true,
-  },
-  argTypes: {
-    underline: {
-      label: 'Underline',
-      control: 'boolean',
-      description: 'When on, _text_ = underline. Only *text* works for italic.',
-    },
-    superscript: {
-      label: 'Superscript',
-      control: 'boolean',
-      description: '^text^ renders as superscript.',
-    },
-    subscript: {
-      label: 'Subscript',
-      control: 'boolean',
-      description:
-        '~text~ renders as subscript. When off, single tilde is strikethrough.',
-    },
-  },
-  render: ({ underline, superscript, subscript, ...args }) => (
-    <EnrichedMarkdownTextStory
-      title="md4cFlags"
-      description="Parser extension flags for extended Markdown syntax."
-      {...args}
-      md4cFlags={{ underline, superscript, subscript }}
-    />
-  ),
-};
-
-export const Spoiler: Story = {
-  args: {
-    markdown: "The twist: ||the butler did it||. Don't spoil it.",
-    overlay: 'particles',
-  },
-  argTypes: {
-    overlay: {
-      options: ['particles', 'solid'],
-      control: { type: 'inline-radio' },
-    },
-    onReloadSpoiler: { action: 'onReloadSpoiler' },
-  },
-  render: (args) => (
-    <SpoilerStory
-      title="Spoiler"
-      description="||hidden text|| is concealed until tapped. Use 'Reload Spoiler' to reset the overlay."
-      {...args}
-    />
-  ),
-};
-
-export const ThematicBreak: Story = {
-  args: {
-    markdown: 'text before\n\n---\n\ntext after',
-  },
-  render: (args) => (
-    <EnrichedMarkdownTextStory
-      title="Thematic Breaks"
-      description="--- makes a break"
-      {...args}
-    />
-  ),
-};
-
-export const BlockQuote: Story = {
-  args: {
-    markdown:
-      '> This is a blockquote.\n>> Double blockquote!\n\n> Have you heard what did she say?\n\nyes thats crazy!',
-  },
-  render: (args) => (
-    <EnrichedMarkdownTextStory
-      title="Block Quote"
-      description="'> ' creates a blockquote. You can use multiple '>' to nest the blockquotes."
-      {...args}
-    />
-  ),
-};
-
-export const Lists: Story = {
-  args: {
-    markdown:
-      '- Unordered item\n- Another item\n  - Nested unordered\n  - Also nested\n\n1. First ordered\n2. Second ordered\n   1. Nested ordered\n   2. Still nested\n3. Back to top level',
-  },
-  render: (args) => (
-    <EnrichedMarkdownTextStory
-      title="Lists"
-      description="Unordered (- item), ordered (1. item), and nested lists. Both types can be mixed."
-      {...args}
-    />
-  ),
-};
-
-export const Links: Story = {
-  args: {
-    markdown:
-      'Check out [React Native](https://reactnative.dev) and [Expo](https://expo.dev).',
-    preview: true,
-  },
-  argTypes: {
-    preview: {
-      control: 'boolean',
-      description: 'Show a preview sheet on long-press.',
-    },
-  },
-  render: ({ preview, ...args }) => (
-    <EnrichedMarkdownTextStory
-      title="Links"
-      description={`[text](url) renders a tappable link. Long-press shows a preview sheet (when enabled, iOS only - Android has no native link preview).\n\nNote: selectionHandleColor has no effect on iOS (Android-only, API 29+).`}
-      {...args}
-      enableLinkPreview={preview}
-    />
-  ),
-};
-
-export const TaskList: Story = {
-  args: {
-    markdown:
-      '- [x] Design component API\n- [x] Write native bridge\n- [ ] Add tests\n- [ ] Publish to npm',
-    flavor: 'github',
-  },
-  argTypes: {
-    flavor: {
-      label: 'Flavor',
-      options: ['github', 'commonmark'],
-      control: { type: 'inline-radio' },
-      description:
-        'Task lists require flavor="github" (GFM). commonmark renders them as plain list items.',
-    },
-  },
-  render: (args) => (
-    <EnrichedMarkdownTextStory
-      title="Task List"
-      description="- [x] checked and - [ ] unchecked items. Tap to toggle."
-      {...args}
-    />
-  ),
-};
-
-export const Selection: Story = {
-  args: {
-    markdown:
-      'Select some of this text to see the highlight color in action.\n\nYou can also try **bold**, _italic_, and `code` spans.',
-    selectable: true,
-  },
-  argTypes: {
-    selectable: {
-      control: 'boolean',
-      description: 'Allow text to be selected.',
-    },
-    selColor: {
-      control: 'color',
-      description:
-        'Highlight color. On iOS also sets the caret and handle color.',
-    },
-    handleColor: {
-      control: 'color',
-      description: 'Drag handle color. Android only, API 29+.',
-    },
-  },
-  render: ({ selColor, handleColor, ...args }) => (
-    <EnrichedMarkdownTextStory
-      title="Selection"
-      description="Controls text selectability and the color of the selection highlight and handles."
-      {...args}
-      selectionColor={selColor}
-      selectionHandleColor={handleColor}
-    />
-  ),
-};
-
-export const SelectionMenu: Story = {
-  args: {
-    markdown:
-      'Select this text and open the context menu to see the built-in actions.\n\nHere is some **bold** and _italic_ text, plus `inline code`.\n\n![Misty forest at sunrise](https://images.unsplash.com/photo-1448375240586-882707db888b?w=800)',
-    copyMd: true,
-    imgUrl: true,
-  },
-  argTypes: {
-    copyMd: {
-      control: 'boolean',
-      description: 'Show "Copy as Markdown" in the selection menu.',
-    },
-    imgUrl: {
-      control: 'boolean',
-      description:
-        'Show "Copy Image URL" when selected content contains images.',
-    },
-  },
-  render: ({ copyMd, imgUrl, ...args }) => (
-    <EnrichedMarkdownTextStory
-      title="Selection Menu"
-      description="Built-in actions added to the native text selection menu. Select some text to see them."
-      {...args}
-      selectionMenuConfig={{ copyAsMarkdown: copyMd, copyImageUrl: imgUrl }}
-    />
-  ),
-};
-
-export const LatexMath: Story = {
-  args: {
-    markdown:
-      'Inline: $E = mc^2$\n\nBlock:\n\n$$\n\\int_0^\\infty e^{-x}\\,dx = 1\n$$\n',
-    latexMath: true,
-    flavor: 'github',
-  },
-  argTypes: {
-    latexMath: {
-      label: 'LaTeX math',
-      control: 'boolean',
-      description: 'Enable LaTeX math parsing.',
-    },
-  },
-  render: ({ latexMath, ...args }) => (
-    <EnrichedMarkdownTextStory
-      title="LaTeX Math"
-      description="Inline $...$ and block $$...$$ math expressions. Toggle the flag to enable/disable parsing."
-      {...args}
-      md4cFlags={{ latexMath }}
-    />
-  ),
-};
diff --git a/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/EnrichedMarkdownTextStory.tsx b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/EnrichedMarkdownTextStory.tsx
index c969323b..2a866e4a 100644
--- a/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/EnrichedMarkdownTextStory.tsx
+++ b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/EnrichedMarkdownTextStory.tsx
@@ -1,12 +1,5 @@
 import React, { useState } from 'react';
-import {
-  Button,
-  ScrollView,
-  Text,
-  TextInput,
-  View,
-  StyleSheet,
-} from 'react-native';
+import { ScrollView, Text, TextInput, View, StyleSheet } from 'react-native';
 import { EnrichedMarkdownText } from 'react-native-enriched-markdown';
 import type { EnrichedMarkdownTextProps } from 'react-native-enriched-markdown';
 
@@ -17,15 +10,21 @@ type Props = {
   style?: EnrichedMarkdownTextProps['markdownStyle'];
 } & EnrichedMarkdownTextProps;
 
-export function EnrichedMarkdownTextStory({
+type MarkdownStoryLayoutProps = {
+  title: string;
+  description: string;
+  markdown: string;
+  onMarkdownChange: (markdown: string) => void;
+  output: React.ReactNode;
+};
+
+export function MarkdownStoryLayout({
   title,
   description,
-  markdown: initialMarkdown,
-  style,
-  ...props
-}: Props) {
-  const [markdown, setMarkdown] = useState(initialMarkdown);
-
+  markdown,
+  onMarkdownChange,
+  output,
+}: MarkdownStoryLayoutProps) {
   return (
     <ScrollView contentContainerStyle={styles.container}>
       <Text style={styles.title}>{title}</Text>
@@ -36,7 +35,7 @@ export function EnrichedMarkdownTextStory({
         <TextInput
           style={styles.markdownInput}
           value={markdown}
-          onChangeText={setMarkdown}
+          onChangeText={onMarkdownChange}
           multiline
           autoCorrect={false}
           autoCapitalize="none"
@@ -45,41 +44,35 @@ export function EnrichedMarkdownTextStory({
 
       <View style={styles.block}>
         <Text style={styles.label}>Output</Text>
-        <View style={styles.output}>
-          <EnrichedMarkdownText
-            markdown={markdown}
-            markdownStyle={style}
-            {...props}
-          />
-        </View>
+        <View style={styles.output}>{output}</View>
       </View>
     </ScrollView>
   );
 }
 
-export function SpoilerStory({
-  overlay,
-  onReloadSpoiler,
+export function EnrichedMarkdownTextStory({
+  title,
+  description,
+  markdown: initialMarkdown,
+  style,
   ...props
-}: EnrichedMarkdownTextProps & Record<string, any>) {
-  const [key, setKey] = React.useState(0);
+}: Props) {
+  const [markdown, setMarkdown] = useState(initialMarkdown);
+
   return (
-    <View>
-      <EnrichedMarkdownTextStory
-        key={key}
-        {...props}
-        spoilerOverlay={overlay}
-      />
-      <View style={styles.reloadButton}>
-        <Button
-          onPress={() => {
-            setKey((k) => k + 1);
-            onReloadSpoiler?.();
-          }}
-          title="Reload Spoiler"
+    <MarkdownStoryLayout
+      title={title}
+      description={description}
+      markdown={markdown}
+      onMarkdownChange={setMarkdown}
+      output={
+        <EnrichedMarkdownText
+          markdown={markdown}
+          markdownStyle={style}
+          {...props}
         />
-      </View>
-    </View>
+      }
+    />
   );
 }
 
@@ -125,8 +118,4 @@ const styles = StyleSheet.create({
     padding: 10,
     minHeight: 48,
   },
-  reloadButton: {
-    paddingHorizontal: 16,
-    paddingBottom: 16,
-  },
 });
diff --git a/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/block/Blockquote.stories.tsx b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/block/Blockquote.stories.tsx
new file mode 100644
index 00000000..77627926
--- /dev/null
+++ b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/block/Blockquote.stories.tsx
@@ -0,0 +1,121 @@
+import React from 'react';
+import { EnrichedMarkdownTextStory } from '../EnrichedMarkdownTextStory';
+import { storyMeta } from '../shared/storyMeta';
+import {
+  blockquoteStyledDefaults,
+  fontFamilyControl,
+  fontWeightControl,
+  type BlockquoteStyleControls,
+  numberControl,
+} from '../shared/storybookMarkdownStyles';
+import {
+  splitStyleControls,
+  toBlockquoteStyle,
+} from '../shared/storybookStyleBuilders';
+import type { StoryArgs, TextStory } from '../shared/storyTypes';
+
+const MARKDOWN = `> this is a text inside a blockquote
+
+> this is also a text inside a blockquote`;
+
+const NESTED_MARKDOWN = `> top-level blockquote
+>> nested blockquote inside the first
+>>> deeply nested blockquote`;
+
+const argTypes = {
+  fontSize: numberControl('markdownStyle.blockquote.fontSize', {
+    min: 12,
+    max: 24,
+    step: 1,
+  }),
+  fontFamily: fontFamilyControl('markdownStyle.blockquote.fontFamily'),
+  fontWeight: fontWeightControl('markdownStyle.blockquote.fontWeight'),
+  color: {
+    control: 'color',
+    description: 'markdownStyle.blockquote.color',
+  },
+  marginTop: numberControl('markdownStyle.blockquote.marginTop', {
+    min: 0,
+    max: 48,
+    step: 2,
+  }),
+  marginBottom: numberControl('markdownStyle.blockquote.marginBottom', {
+    min: 0,
+    max: 48,
+    step: 2,
+  }),
+  lineHeight: numberControl('markdownStyle.blockquote.lineHeight', {
+    min: 16,
+    max: 40,
+    step: 1,
+  }),
+  borderColor: {
+    control: 'color',
+    description: 'markdownStyle.blockquote.borderColor',
+  },
+  borderWidth: numberControl('markdownStyle.blockquote.borderWidth', {
+    min: 1,
+    max: 8,
+    step: 1,
+  }),
+  gapWidth: numberControl('markdownStyle.blockquote.gapWidth', {
+    min: 0,
+    max: 32,
+    step: 2,
+  }),
+  backgroundColor: {
+    control: 'color',
+    description: 'markdownStyle.blockquote.backgroundColor',
+  },
+};
+
+function renderBlockquote(
+  title: string,
+  description: string,
+  args: StoryArgs<BlockquoteStyleControls>
+) {
+  const { controls, rest } = splitStyleControls(args, blockquoteStyledDefaults);
+  return (
+    <EnrichedMarkdownTextStory
+      title={title}
+      description={description}
+      {...rest}
+      style={{ blockquote: toBlockquoteStyle(controls) }}
+    />
+  );
+}
+
+const blockquoteStoryBase = {
+  argTypes,
+  args: blockquoteStyledDefaults,
+};
+
+export default storyMeta('Block', 'Blockquote');
+
+export const Default: TextStory<BlockquoteStyleControls> = {
+  ...blockquoteStoryBase,
+  args: {
+    ...blockquoteStoryBase.args,
+    markdown: MARKDOWN,
+  },
+  render: (args) =>
+    renderBlockquote(
+      'Blockquote',
+      'Lines prefixed with >. Use the controls to tune markdownStyle.blockquote.',
+      args
+    ),
+};
+
+export const Nested: TextStory<BlockquoteStyleControls> = {
+  ...blockquoteStoryBase,
+  args: {
+    ...blockquoteStoryBase.args,
+    markdown: NESTED_MARKDOWN,
+  },
+  render: (args) =>
+    renderBlockquote(
+      'Nested Blockquote',
+      'Nest blockquotes with multiple > markers. Use the controls to tune markdownStyle.blockquote.',
+      args
+    ),
+};
diff --git a/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/block/CodeBlock.stories.tsx b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/block/CodeBlock.stories.tsx
new file mode 100644
index 00000000..9ca94dd9
--- /dev/null
+++ b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/block/CodeBlock.stories.tsx
@@ -0,0 +1,100 @@
+import React from 'react';
+import { EnrichedMarkdownTextStory } from '../EnrichedMarkdownTextStory';
+import { storyMeta } from '../shared/storyMeta';
+import {
+  codeBlockStyledDefaults,
+  fontFamilyControl,
+  fontWeightControl,
+  type CodeBlockStyleControls,
+  numberControl,
+} from '../shared/storybookMarkdownStyles';
+import {
+  splitStyleControls,
+  toCodeBlockStyle,
+} from '../shared/storybookStyleBuilders';
+import type { TextStory } from '../shared/storyTypes';
+
+const MARKDOWN = `\`\`\`
+sum = 0
+for i in range(20):
+  print(i % 3)
+  sum += i % 3
+  
+print(sum)
+\`\`\``;
+
+const argTypes = {
+  fontSize: numberControl('markdownStyle.codeBlock.fontSize', {
+    min: 10,
+    max: 20,
+    step: 1,
+  }),
+  fontFamily: fontFamilyControl('markdownStyle.codeBlock.fontFamily'),
+  fontWeight: fontWeightControl('markdownStyle.codeBlock.fontWeight'),
+  color: {
+    control: 'color',
+    description: 'markdownStyle.codeBlock.color',
+  },
+  marginTop: numberControl('markdownStyle.codeBlock.marginTop', {
+    min: 0,
+    max: 48,
+    step: 2,
+  }),
+  marginBottom: numberControl('markdownStyle.codeBlock.marginBottom', {
+    min: 0,
+    max: 48,
+    step: 2,
+  }),
+  lineHeight: numberControl('markdownStyle.codeBlock.lineHeight', {
+    min: 14,
+    max: 32,
+    step: 1,
+  }),
+  backgroundColor: {
+    control: 'color',
+    description: 'markdownStyle.codeBlock.backgroundColor',
+  },
+  borderColor: {
+    control: 'color',
+    description: 'markdownStyle.codeBlock.borderColor',
+  },
+  borderRadius: numberControl('markdownStyle.codeBlock.borderRadius', {
+    min: 0,
+    max: 16,
+    step: 1,
+  }),
+  borderWidth: numberControl('markdownStyle.codeBlock.borderWidth', {
+    min: 0,
+    max: 4,
+    step: 1,
+  }),
+  padding: numberControl('markdownStyle.codeBlock.padding', {
+    min: 0,
+    max: 32,
+    step: 2,
+  }),
+};
+
+export default storyMeta('Block', 'Code Block');
+
+export const Default: TextStory<CodeBlockStyleControls> = {
+  args: {
+    markdown: MARKDOWN,
+    ...codeBlockStyledDefaults,
+  },
+  argTypes,
+  render: (args) => {
+    const { controls, rest } = splitStyleControls(
+      args,
+      codeBlockStyledDefaults
+    );
+    return (
+      <EnrichedMarkdownTextStory
+        title="Code Block"
+        description="Fenced code blocks with triple backticks. Use the controls to tune markdownStyle.codeBlock."
+        {...rest}
+        style={{ codeBlock: toCodeBlockStyle(controls) }}
+      />
+    );
+  },
+};
diff --git a/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/block/Headings.stories.tsx b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/block/Headings.stories.tsx
new file mode 100644
index 00000000..efdd9099
--- /dev/null
+++ b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/block/Headings.stories.tsx
@@ -0,0 +1,109 @@
+import React from 'react';
+import { EnrichedMarkdownTextStory } from '../EnrichedMarkdownTextStory';
+import { storyMeta } from '../shared/storyMeta';
+import {
+  fontFamilyControl,
+  fontWeightControl,
+  headingStyledDefaultsByLevel,
+  type HeadingLevel,
+  type SingleHeadingStyleControls,
+  numberControl,
+  textAlignControl,
+} from '../shared/storybookMarkdownStyles';
+import {
+  splitStyleControls,
+  toHeadingStyleAtLevel,
+} from '../shared/storybookStyleBuilders';
+import type { StoryArgs, TextStory } from '../shared/storyTypes';
+
+const HEADING_MARKDOWN: Record<HeadingLevel, string> = {
+  1: '# Heading 1',
+  2: '## Heading 2',
+  3: '### Heading 3',
+  4: '#### Heading 4',
+  5: '##### Heading 5',
+  6: '###### Heading 6',
+};
+
+const FONT_SIZE_RANGES: Record<HeadingLevel, { min: number; max: number }> = {
+  1: { min: 20, max: 40 },
+  2: { min: 18, max: 36 },
+  3: { min: 16, max: 32 },
+  4: { min: 14, max: 28 },
+  5: { min: 12, max: 24 },
+  6: { min: 10, max: 20 },
+};
+
+function createHeadingArgTypes(level: HeadingLevel) {
+  const styleKey = `h${level}`;
+  const { min, max } = FONT_SIZE_RANGES[level];
+
+  return {
+    fontSize: numberControl(`markdownStyle.${styleKey}.fontSize`, {
+      min,
+      max,
+      step: 1,
+    }),
+    fontFamily: fontFamilyControl(`markdownStyle.${styleKey}.fontFamily`),
+    fontWeight: fontWeightControl(`markdownStyle.${styleKey}.fontWeight`),
+    color: {
+      control: 'color',
+      description: `markdownStyle.${styleKey}.color`,
+    },
+    lineHeight: numberControl(`markdownStyle.${styleKey}.lineHeight`, {
+      min: 16,
+      max: 48,
+      step: 1,
+    }),
+    textAlign: textAlignControl(`markdownStyle.${styleKey}.textAlign`),
+    marginTop: numberControl(`markdownStyle.${styleKey}.marginTop`, {
+      min: 0,
+      max: 48,
+      step: 2,
+    }),
+    marginBottom: numberControl(`markdownStyle.${styleKey}.marginBottom`, {
+      min: 0,
+      max: 24,
+      step: 2,
+    }),
+  };
+}
+
+function renderHeading(
+  level: HeadingLevel,
+  args: StoryArgs<SingleHeadingStyleControls>
+) {
+  const defaults = headingStyledDefaultsByLevel[level];
+  const { controls, rest } = splitStyleControls(args, defaults);
+
+  return (
+    <EnrichedMarkdownTextStory
+      title={`Heading ${level}`}
+      description={`Single H${level} sample. Use the controls to tune markdownStyle.h${level}.`}
+      {...rest}
+      style={toHeadingStyleAtLevel(level, controls)}
+    />
+  );
+}
+
+function createHeadingStory(
+  level: HeadingLevel
+): TextStory<SingleHeadingStyleControls> {
+  return {
+    args: {
+      markdown: HEADING_MARKDOWN[level],
+      ...headingStyledDefaultsByLevel[level],
+    },
+    argTypes: createHeadingArgTypes(level),
+    render: (args) => renderHeading(level, args),
+  };
+}
+
+export default storyMeta('Block', 'Headings');
+
+export const Heading1 = createHeadingStory(1);
+export const Heading2 = createHeadingStory(2);
+export const Heading3 = createHeadingStory(3);
+export const Heading4 = createHeadingStory(4);
+export const Heading5 = createHeadingStory(5);
+export const Heading6 = createHeadingStory(6);
diff --git a/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/block/Image.stories.tsx b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/block/Image.stories.tsx
new file mode 100644
index 00000000..cc8a1771
--- /dev/null
+++ b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/block/Image.stories.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { EnrichedMarkdownTextStory } from '../EnrichedMarkdownTextStory';
+import { storyMeta } from '../shared/storyMeta';
+import {
+  imageStyledDefaults,
+  type ImageStyleControls,
+  numberControl,
+} from '../shared/storybookMarkdownStyles';
+import {
+  splitStyleControls,
+  toImageStyle,
+} from '../shared/storybookStyleBuilders';
+import type { TextStory } from '../shared/storyTypes';
+
+const MARKDOWN =
+  '![Misty forest at sunrise](https://images.unsplash.com/photo-1448375240586-882707db888b?w=800)';
+
+const argTypes = {
+  height: numberControl('markdownStyle.image.height', {
+    min: 80,
+    max: 400,
+    step: 10,
+  }),
+  borderRadius: numberControl('markdownStyle.image.borderRadius', {
+    min: 0,
+    max: 24,
+    step: 2,
+  }),
+  marginTop: numberControl('markdownStyle.image.marginTop', {
+    min: 0,
+    max: 32,
+    step: 2,
+  }),
+  marginBottom: numberControl('markdownStyle.image.marginBottom', {
+    min: 0,
+    max: 32,
+    step: 2,
+  }),
+};
+
+export default storyMeta('Block', 'Image');
+
+export const Default: TextStory<ImageStyleControls> = {
+  args: {
+    markdown: MARKDOWN,
+    ...imageStyledDefaults,
+  },
+  argTypes,
+  render: (args) => {
+    const { controls, rest } = splitStyleControls(args, imageStyledDefaults);
+    return (
+      <EnrichedMarkdownTextStory
+        title="Image"
+        description="Block images via ![alt](url). Use the controls to tune markdownStyle.image."
+        {...rest}
+        style={{ image: toImageStyle(controls) }}
+      />
+    );
+  },
+};
diff --git a/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/block/Lists.stories.tsx b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/block/Lists.stories.tsx
new file mode 100644
index 00000000..46bc4ba7
--- /dev/null
+++ b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/block/Lists.stories.tsx
@@ -0,0 +1,204 @@
+import React from 'react';
+import { EnrichedMarkdownTextStory } from '../EnrichedMarkdownTextStory';
+import { storyMeta } from '../shared/storyMeta';
+import {
+  fontFamilyControl,
+  fontWeightControl,
+  listStyledDefaults,
+  type ListStyleControls,
+  numberControl,
+} from '../shared/storybookMarkdownStyles';
+import {
+  splitStyleControls,
+  toListStyle,
+} from '../shared/storybookStyleBuilders';
+import type { StoryArgs, TextStory } from '../shared/storyTypes';
+
+const MARKDOWN = `- Apples
+- Bananas
+- Mango
+* Dragonfruit
+* Guava
+* Fig`;
+
+const ORDERED_MARKDOWN = `1. Preheat oven to 180C
+2. Mix flour, sugar, and butter
+3. Add eggs and vanilla extract
+4. Pour into a greased tin
+5. Bake for 30 minutes`;
+
+const NESTED_UNORDERED_MARKDOWN = `- Item
+  - Nested
+    - Deep nested
+    - Deep nested
+  - Nested
+- Item`;
+
+const NESTED_ORDERED_MARKDOWN = `1. First
+   1. Nested
+      1. Deep nested
+      2. Deep nested
+   2. Nested
+2. First`;
+
+const MIXED_MARKDOWN = `- Frontend
+  - React
+    - Hooks
+    - Components
+  - Vue
+- Backend
+  - Node.js
+  - Python
+    1. Django
+    2. FastAPI`;
+
+const argTypes = {
+  fontSize: numberControl('markdownStyle.list.fontSize', {
+    min: 12,
+    max: 24,
+    step: 1,
+  }),
+  fontFamily: fontFamilyControl('markdownStyle.list.fontFamily'),
+  fontWeight: fontWeightControl('markdownStyle.list.fontWeight'),
+  color: {
+    control: 'color',
+    description: 'markdownStyle.list.color',
+  },
+  marginTop: numberControl('markdownStyle.list.marginTop', {
+    min: 0,
+    max: 48,
+    step: 2,
+  }),
+  marginBottom: numberControl('markdownStyle.list.marginBottom', {
+    min: 0,
+    max: 48,
+    step: 2,
+  }),
+  lineHeight: numberControl('markdownStyle.list.lineHeight', {
+    min: 16,
+    max: 40,
+    step: 1,
+  }),
+  bulletColor: {
+    control: 'color',
+    description: 'markdownStyle.list.bulletColor',
+  },
+  bulletSize: numberControl('markdownStyle.list.bulletSize', {
+    min: 2,
+    max: 12,
+    step: 1,
+  }),
+  markerMinWidth: numberControl('markdownStyle.list.markerMinWidth', {
+    min: 0,
+    max: 48,
+    step: 2,
+  }),
+  markerColor: {
+    control: 'color',
+    description: 'markdownStyle.list.markerColor',
+  },
+  markerFontWeight: fontWeightControl('markdownStyle.list.markerFontWeight'),
+  gapWidth: numberControl('markdownStyle.list.gapWidth', {
+    min: 0,
+    max: 24,
+    step: 2,
+  }),
+  marginLeft: numberControl('markdownStyle.list.marginLeft', {
+    min: 0,
+    max: 48,
+    step: 4,
+  }),
+};
+
+function renderList(
+  title: string,
+  description: string,
+  args: StoryArgs<ListStyleControls>
+) {
+  const { controls, rest } = splitStyleControls(args, listStyledDefaults);
+  return (
+    <EnrichedMarkdownTextStory
+      title={title}
+      description={description}
+      {...rest}
+      style={{ list: toListStyle(controls) }}
+    />
+  );
+}
+
+const listStoryBase = {
+  argTypes,
+  args: listStyledDefaults,
+};
+
+export default storyMeta('Block', 'Lists');
+
+export const Default: TextStory<ListStyleControls> = {
+  ...listStoryBase,
+  args: {
+    ...listStoryBase.args,
+    markdown: MARKDOWN,
+  },
+  render: (args) =>
+    renderList(
+      'Lists',
+      'Unordered lists via - or *. Use the controls to tune markdownStyle.list.',
+      args
+    ),
+};
+
+export const Ordered: TextStory<ListStyleControls> = {
+  ...listStoryBase,
+  args: {
+    ...listStoryBase.args,
+    markdown: ORDERED_MARKDOWN,
+  },
+  render: (args) =>
+    renderList(
+      'Ordered List',
+      'Ordered lists via 1. syntax. Use the controls to tune markdownStyle.list.',
+      args
+    ),
+};
+
+export const NestedUnordered: TextStory<ListStyleControls> = {
+  ...listStoryBase,
+  args: {
+    ...listStoryBase.args,
+    markdown: NESTED_UNORDERED_MARKDOWN,
+  },
+  render: (args) =>
+    renderList(
+      'Nested Unordered List',
+      'Nest unordered items with indentation. Use the controls to tune markdownStyle.list.',
+      args
+    ),
+};
+
+export const NestedOrdered: TextStory<ListStyleControls> = {
+  ...listStoryBase,
+  args: {
+    ...listStoryBase.args,
+    markdown: NESTED_ORDERED_MARKDOWN,
+  },
+  render: (args) =>
+    renderList(
+      'Nested Ordered List',
+      'Nest ordered items with indentation. Use the controls to tune markdownStyle.list.',
+      args
+    ),
+};
+
+export const Mixed: TextStory<ListStyleControls> = {
+  ...listStoryBase,
+  args: {
+    ...listStoryBase.args,
+    markdown: MIXED_MARKDOWN,
+  },
+  render: (args) =>
+    renderList(
+      'Mixed Nested List',
+      'Mix unordered and ordered nesting. Use the controls to tune markdownStyle.list.',
+      args
+    ),
+};
diff --git a/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/block/Math.stories.tsx b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/block/Math.stories.tsx
new file mode 100644
index 00000000..1494c852
--- /dev/null
+++ b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/block/Math.stories.tsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import { EnrichedMarkdownTextStory } from '../EnrichedMarkdownTextStory';
+import { storyMeta } from '../shared/storyMeta';
+import {
+  githubFlavorArgTypes,
+  mathStyledDefaults,
+  type MathStyleControls,
+  mathTextAlignControl,
+  numberControl,
+} from '../shared/storybookMarkdownStyles';
+import {
+  splitStyleControls,
+  toMathStyle,
+} from '../shared/storybookStyleBuilders';
+import type { TextStory } from '../shared/storyTypes';
+
+const MARKDOWN = `$$
+E = mc^2
+$$
+
+$$
+\\int_{a}^{b} f(x)\\,dx = F(b) - F(a)
+$$
+
+$$
+\\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}
+$$`;
+
+const argTypes = {
+  ...githubFlavorArgTypes('Block math requires flavor="github" (GFM).'),
+  latexMath: {
+    control: 'boolean',
+    description: 'md4cFlags.latexMath — enable block and inline math parsing.',
+  },
+  fontSize: numberControl('markdownStyle.math.fontSize', {
+    min: 12,
+    max: 24,
+    step: 1,
+  }),
+  color: {
+    control: 'color',
+    description: 'markdownStyle.math.color',
+  },
+  backgroundColor: {
+    control: 'color',
+    description: 'markdownStyle.math.backgroundColor',
+  },
+  padding: numberControl('markdownStyle.math.padding', {
+    min: 0,
+    max: 24,
+    step: 2,
+  }),
+  marginTop: numberControl('markdownStyle.math.marginTop', {
+    min: 0,
+    max: 48,
+    step: 2,
+  }),
+  marginBottom: numberControl('markdownStyle.math.marginBottom', {
+    min: 0,
+    max: 48,
+    step: 2,
+  }),
+  textAlign: mathTextAlignControl('markdownStyle.math.textAlign'),
+};
+
+export default storyMeta('Block', 'Math');
+
+export const Default: TextStory<MathStyleControls> = {
+  args: {
+    markdown: MARKDOWN,
+    flavor: 'github',
+    ...mathStyledDefaults,
+  },
+  argTypes,
+  render: (args) => {
+    const { controls, rest } = splitStyleControls(args, mathStyledDefaults);
+    const { latexMath, ...mathStyle } = controls;
+    return (
+      <EnrichedMarkdownTextStory
+        title="Math"
+        description='Block math via $$...$$. Requires flavor="github" and md4cFlags.latexMath. Use the controls to tune markdownStyle.math.'
+        {...rest}
+        md4cFlags={{ latexMath }}
+        style={{ math: toMathStyle(mathStyle) }}
+      />
+    );
+  },
+};
diff --git a/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/block/Paragraph.stories.tsx b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/block/Paragraph.stories.tsx
new file mode 100644
index 00000000..e5bbcc81
--- /dev/null
+++ b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/block/Paragraph.stories.tsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import { EnrichedMarkdownTextStory } from '../EnrichedMarkdownTextStory';
+import { storyMeta } from '../shared/storyMeta';
+import {
+  fontFamilyControl,
+  fontWeightControl,
+  paragraphStyledDefaults,
+  type ParagraphStyleControls,
+  numberControl,
+  textAlignControl,
+} from '../shared/storybookMarkdownStyles';
+import {
+  splitStyleControls,
+  toParagraphStyle,
+} from '../shared/storybookStyleBuilders';
+import type { TextStory } from '../shared/storyTypes';
+
+const MARKDOWN = `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+
+It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.`;
+
+const argTypes = {
+  fontSize: numberControl('markdownStyle.paragraph.fontSize', {
+    min: 12,
+    max: 32,
+    step: 1,
+  }),
+  fontFamily: fontFamilyControl('markdownStyle.paragraph.fontFamily'),
+  fontWeight: fontWeightControl('markdownStyle.paragraph.fontWeight'),
+  color: {
+    control: 'color',
+    description: 'markdownStyle.paragraph.color',
+  },
+  marginTop: numberControl('markdownStyle.paragraph.marginTop', {
+    min: 0,
+    max: 48,
+    step: 2,
+  }),
+  marginBottom: numberControl('markdownStyle.paragraph.marginBottom', {
+    min: 0,
+    max: 48,
+    step: 2,
+  }),
+  lineHeight: numberControl('markdownStyle.paragraph.lineHeight', {
+    min: 16,
+    max: 48,
+    step: 1,
+  }),
+  textAlign: textAlignControl('markdownStyle.paragraph.textAlign'),
+};
+
+export default storyMeta('Block', 'Paragraph');
+
+export const Default: TextStory<ParagraphStyleControls> = {
+  args: {
+    markdown: MARKDOWN,
+    ...paragraphStyledDefaults,
+  },
+  argTypes,
+  render: (args) => {
+    const { controls, rest } = splitStyleControls(
+      args,
+      paragraphStyledDefaults
+    );
+    return (
+      <EnrichedMarkdownTextStory
+        title="Paragraph"
+        description="Plain body text. Use the controls to tune markdownStyle.paragraph."
+        {...rest}
+        style={{ paragraph: toParagraphStyle(controls) }}
+      />
+    );
+  },
+};
diff --git a/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/block/Table.stories.tsx b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/block/Table.stories.tsx
new file mode 100644
index 00000000..fe232a14
--- /dev/null
+++ b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/block/Table.stories.tsx
@@ -0,0 +1,113 @@
+import React from 'react';
+import { EnrichedMarkdownTextStory } from '../EnrichedMarkdownTextStory';
+import { storyMeta } from '../shared/storyMeta';
+import {
+  fontFamilyControl,
+  fontWeightControl,
+  githubFlavorArgTypes,
+  tableStyledDefaults,
+  type TableStyleControls,
+  numberControl,
+} from '../shared/storybookMarkdownStyles';
+import {
+  splitStyleControls,
+  toTableStyle,
+} from '../shared/storybookStyleBuilders';
+import type { TextStory } from '../shared/storyTypes';
+
+const MARKDOWN = `| col1 | col2 | looooooooong col | a |
+| - | -- | -------------------- | -------- |
+| test | of | the | t |
+| the | one | piece is | real
+| third | Row | to test trailing | symbols | |asdf|||||blabla|`;
+
+const argTypes = {
+  ...githubFlavorArgTypes('Tables require flavor="github" (GFM).'),
+  fontSize: numberControl('markdownStyle.table.fontSize', {
+    min: 10,
+    max: 20,
+    step: 1,
+  }),
+  fontFamily: fontFamilyControl('markdownStyle.table.fontFamily'),
+  fontWeight: fontWeightControl('markdownStyle.table.fontWeight'),
+  color: {
+    control: 'color',
+    description: 'markdownStyle.table.color',
+  },
+  marginTop: numberControl('markdownStyle.table.marginTop', {
+    min: 0,
+    max: 48,
+    step: 2,
+  }),
+  marginBottom: numberControl('markdownStyle.table.marginBottom', {
+    min: 0,
+    max: 48,
+    step: 2,
+  }),
+  lineHeight: numberControl('markdownStyle.table.lineHeight', {
+    min: 14,
+    max: 32,
+    step: 1,
+  }),
+  headerFontFamily: fontFamilyControl('markdownStyle.table.headerFontFamily'),
+  headerBackgroundColor: {
+    control: 'color',
+    description: 'markdownStyle.table.headerBackgroundColor',
+  },
+  headerTextColor: {
+    control: 'color',
+    description: 'markdownStyle.table.headerTextColor',
+  },
+  rowEvenBackgroundColor: {
+    control: 'color',
+    description: 'markdownStyle.table.rowEvenBackgroundColor',
+  },
+  rowOddBackgroundColor: {
+    control: 'color',
+    description: 'markdownStyle.table.rowOddBackgroundColor',
+  },
+  borderColor: {
+    control: 'color',
+    description: 'markdownStyle.table.borderColor',
+  },
+  borderWidth: numberControl('markdownStyle.table.borderWidth', {
+    min: 0,
+    max: 4,
+    step: 1,
+  }),
+  borderRadius: numberControl('markdownStyle.table.borderRadius', {
+    min: 0,
+    max: 16,
+    step: 1,
+  }),
+  cellPaddingHorizontal: numberControl(
+    'markdownStyle.table.cellPaddingHorizontal',
+    { min: 4, max: 24, step: 2 }
+  ),
+  cellPaddingVertical: numberControl(
+    'markdownStyle.table.cellPaddingVertical',
+    { min: 4, max: 24, step: 2 }
+  ),
+};
+
+export default storyMeta('Block', 'Table');
+
+export const Default: TextStory<TableStyleControls> = {
+  args: {
+    markdown: MARKDOWN,
+    flavor: 'github',
+    ...tableStyledDefaults,
+  },
+  argTypes,
+  render: (args) => {
+    const { controls, rest } = splitStyleControls(args, tableStyledDefaults);
+    return (
+      <EnrichedMarkdownTextStory
+        title="Table"
+        description="GFM tables. Use the controls to tune markdownStyle.table."
+        {...rest}
+        style={{ table: toTableStyle(controls) }}
+      />
+    );
+  },
+};
diff --git a/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/block/TaskList.stories.tsx b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/block/TaskList.stories.tsx
new file mode 100644
index 00000000..ce93d509
--- /dev/null
+++ b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/block/TaskList.stories.tsx
@@ -0,0 +1,118 @@
+import React from 'react';
+import { EnrichedMarkdownTextStory } from '../EnrichedMarkdownTextStory';
+import { storyMeta } from '../shared/storyMeta';
+import {
+  githubFlavorArgTypes,
+  taskListStyledDefaults,
+  type TaskListStyleControls,
+  numberControl,
+} from '../shared/storybookMarkdownStyles';
+import {
+  splitStyleControls,
+  toTaskListStyle,
+} from '../shared/storybookStyleBuilders';
+import type { StoryArgs, TextStory } from '../shared/storyTypes';
+
+const MARKDOWN = `- [x] Dice 2 onions, 3 celery stalks, and parsnips
+- [x] Add vegetables to the pot
+- [ ] Add ground pork and beef
+- [ ] Saute for 10 minutes
+- [ ] Pour in passata and simmer for 1 hour
+- [x] Boil spaghetti pasta
+- [ ] Mix everything and serve`;
+
+const NESTED_MARKDOWN = `- [x] Buy groceries
+  - [x] Vegetables
+  - [ ] Fruit
+- [ ] Cook dinner
+  - [x] Prep ingredients
+  - [ ] Serve
+- [x] Wash dishes`;
+
+const argTypes = {
+  ...githubFlavorArgTypes('Task lists require flavor="github" (GFM).'),
+  checkedColor: {
+    control: 'color',
+    description: 'markdownStyle.taskList.checkedColor',
+  },
+  borderColor: {
+    control: 'color',
+    description: 'markdownStyle.taskList.borderColor',
+  },
+  checkboxSize: numberControl('markdownStyle.taskList.checkboxSize', {
+    min: 12,
+    max: 28,
+    step: 1,
+  }),
+  checkboxBorderRadius: numberControl(
+    'markdownStyle.taskList.checkboxBorderRadius',
+    { min: 0, max: 12, step: 1 }
+  ),
+  checkmarkColor: {
+    control: 'color',
+    description: 'markdownStyle.taskList.checkmarkColor',
+  },
+  checkedTextColor: {
+    control: 'color',
+    description: 'markdownStyle.taskList.checkedTextColor',
+  },
+  checkedStrikethrough: {
+    control: 'boolean',
+    description: 'markdownStyle.taskList.checkedStrikethrough',
+  },
+  onTaskListItemPress: { action: 'onTaskListItemPress' },
+};
+
+function renderTaskList(
+  title: string,
+  description: string,
+  args: StoryArgs<TaskListStyleControls>
+) {
+  const { controls, rest } = splitStyleControls(args, taskListStyledDefaults);
+  return (
+    <EnrichedMarkdownTextStory
+      title={title}
+      description={description}
+      {...rest}
+      style={{ taskList: toTaskListStyle(controls) }}
+    />
+  );
+}
+
+const taskListStoryBase = {
+  argTypes,
+  args: {
+    flavor: 'github' as const,
+    ...taskListStyledDefaults,
+  },
+};
+
+export default storyMeta('Block', 'Task List');
+
+export const Default: TextStory<TaskListStyleControls> = {
+  ...taskListStoryBase,
+  args: {
+    ...taskListStoryBase.args,
+    markdown: MARKDOWN,
+  },
+  render: (args) =>
+    renderTaskList(
+      'Task List',
+      'GFM task lists. Tap checkboxes to fire onTaskListItemPress (Actions panel). Use the controls to tune markdownStyle.taskList.',
+      args
+    ),
+};
+
+export const Nested: TextStory<TaskListStyleControls> = {
+  ...taskListStoryBase,
+  args: {
+    ...taskListStoryBase.args,
+    markdown: NESTED_MARKDOWN,
+  },
+  render: (args) =>
+    renderTaskList(
+      'Nested Task List',
+      'Nest task items with indentation. Tap checkboxes to fire onTaskListItemPress (Actions panel).',
+      args
+    ),
+};
diff --git a/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/block/ThematicBreak.stories.tsx b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/block/ThematicBreak.stories.tsx
new file mode 100644
index 00000000..49a45452
--- /dev/null
+++ b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/block/ThematicBreak.stories.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import { EnrichedMarkdownTextStory } from '../EnrichedMarkdownTextStory';
+import { storyMeta } from '../shared/storyMeta';
+import {
+  thematicBreakStyledDefaults,
+  type ThematicBreakStyleControls,
+  numberControl,
+} from '../shared/storybookMarkdownStyles';
+import {
+  splitStyleControls,
+  toThematicBreakStyle,
+} from '../shared/storybookStyleBuilders';
+import type { TextStory } from '../shared/storyTypes';
+
+const MARKDOWN = `---
+
+***
+
+___`;
+
+const argTypes = {
+  color: {
+    control: 'color',
+    description: 'markdownStyle.thematicBreak.color',
+  },
+  height: numberControl('markdownStyle.thematicBreak.height', {
+    min: 1,
+    max: 8,
+    step: 1,
+  }),
+  marginTop: numberControl('markdownStyle.thematicBreak.marginTop', {
+    min: 0,
+    max: 48,
+    step: 4,
+  }),
+  marginBottom: numberControl('markdownStyle.thematicBreak.marginBottom', {
+    min: 0,
+    max: 48,
+    step: 4,
+  }),
+};
+
+export default storyMeta('Block', 'Thematic Break');
+
+export const Default: TextStory<ThematicBreakStyleControls> = {
+  args: {
+    markdown: MARKDOWN,
+    ...thematicBreakStyledDefaults,
+  },
+  argTypes,
+  render: (args) => {
+    const { controls, rest } = splitStyleControls(
+      args,
+      thematicBreakStyledDefaults
+    );
+    return (
+      <EnrichedMarkdownTextStory
+        title="Thematic Break"
+        description="Horizontal rules via ---, ***, or ___. Use the controls to tune markdownStyle.thematicBreak."
+        {...rest}
+        style={{ thematicBreak: toThematicBreakStyle(controls) }}
+      />
+    );
+  },
+};
diff --git a/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/inline/Bold.stories.tsx b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/inline/Bold.stories.tsx
new file mode 100644
index 00000000..0794b5a9
--- /dev/null
+++ b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/inline/Bold.stories.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { EnrichedMarkdownTextStory } from '../EnrichedMarkdownTextStory';
+import { storyMeta } from '../shared/storyMeta';
+import {
+  fontFamilyControl,
+  strongFontWeightControl,
+  strongStyledDefaults,
+  type StrongStyleControls,
+} from '../shared/storybookMarkdownStyles';
+import {
+  splitStyleControls,
+  toStrongStyle,
+} from '../shared/storybookStyleBuilders';
+import type { TextStory } from '../shared/storyTypes';
+
+const MARKDOWN = '**Bold text** and normal text.';
+
+const argTypes = {
+  fontFamily: fontFamilyControl('markdownStyle.strong.fontFamily'),
+  fontWeight: strongFontWeightControl(
+    'markdownStyle.strong.fontWeight — only applies when fontFamily is set.'
+  ),
+  color: {
+    control: 'color',
+    description: 'markdownStyle.strong.color',
+  },
+};
+
+export default storyMeta('Inline', 'Bold');
+
+export const Default: TextStory<StrongStyleControls> = {
+  args: {
+    markdown: MARKDOWN,
+    ...strongStyledDefaults,
+  },
+  argTypes,
+  render: (args) => {
+    const { controls, rest } = splitStyleControls(args, strongStyledDefaults);
+    return (
+      <EnrichedMarkdownTextStory
+        title="Bold"
+        description="**text** renders as strong. (__text__ is covered under Inline/Underline when md4cFlags.underline is on.)"
+        {...rest}
+        style={{ strong: toStrongStyle(controls) }}
+      />
+    );
+  },
+};
diff --git a/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/inline/InlineCode.stories.tsx b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/inline/InlineCode.stories.tsx
new file mode 100644
index 00000000..c657e53c
--- /dev/null
+++ b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/inline/InlineCode.stories.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { EnrichedMarkdownTextStory } from '../EnrichedMarkdownTextStory';
+import { storyMeta } from '../shared/storyMeta';
+import {
+  fontFamilyControl,
+  inlineCodeStyledDefaults,
+  type InlineCodeStyleControls,
+  numberControl,
+} from '../shared/storybookMarkdownStyles';
+import {
+  splitStyleControls,
+  toInlineCodeStyle,
+} from '../shared/storybookStyleBuilders';
+import type { TextStory } from '../shared/storyTypes';
+
+const MARKDOWN = 'Use `pthread*` to debug and `null` to clear.';
+
+const argTypes = {
+  fontFamily: fontFamilyControl('markdownStyle.code.fontFamily'),
+  fontSize: numberControl(
+    'markdownStyle.code.fontSize — 0 inherits parent size.',
+    { min: 0, max: 24, step: 1 }
+  ),
+  color: {
+    control: 'color',
+    description: 'markdownStyle.code.color',
+  },
+  backgroundColor: {
+    control: 'color',
+    description: 'markdownStyle.code.backgroundColor',
+  },
+  borderColor: {
+    control: 'color',
+    description: 'markdownStyle.code.borderColor',
+  },
+};
+
+export default storyMeta('Inline', 'Inline Code');
+
+export const Default: TextStory<InlineCodeStyleControls> = {
+  args: {
+    markdown: MARKDOWN,
+    ...inlineCodeStyledDefaults,
+  },
+  argTypes,
+  render: (args) => {
+    const { controls, rest } = splitStyleControls(
+      args,
+      inlineCodeStyledDefaults
+    );
+    return (
+      <EnrichedMarkdownTextStory
+        title="Inline Code"
+        description="`code` spans use markdownStyle.code."
+        {...rest}
+        style={{ code: toInlineCodeStyle(controls) }}
+      />
+    );
+  },
+};
diff --git a/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/inline/InlineImage.stories.tsx b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/inline/InlineImage.stories.tsx
new file mode 100644
index 00000000..3c514a1e
--- /dev/null
+++ b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/inline/InlineImage.stories.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { EnrichedMarkdownTextStory } from '../EnrichedMarkdownTextStory';
+import { storyMeta } from '../shared/storyMeta';
+import {
+  inlineImageStyledDefaults,
+  type InlineImageStyleControls,
+  numberControl,
+} from '../shared/storybookMarkdownStyles';
+import {
+  splitStyleControls,
+  toInlineImageStyle,
+} from '../shared/storybookStyleBuilders';
+import type { TextStory } from '../shared/storyTypes';
+
+const MARKDOWN =
+  'Text with an inline image ![tiny](https://placehold.co/100x100/png?text=I) in the flow.';
+
+const argTypes = {
+  size: numberControl('markdownStyle.inlineImage.size', {
+    min: 12,
+    max: 64,
+    step: 2,
+  }),
+};
+
+export default storyMeta('Inline', 'Inline Image');
+
+export const Default: TextStory<InlineImageStyleControls> = {
+  args: {
+    markdown: MARKDOWN,
+    ...inlineImageStyledDefaults,
+  },
+  argTypes,
+  render: (args) => {
+    const { controls, rest } = splitStyleControls(
+      args,
+      inlineImageStyledDefaults
+    );
+    return (
+      <EnrichedMarkdownTextStory
+        title="Inline Image"
+        description="![alt](url) inside a paragraph uses markdownStyle.inlineImage."
+        {...rest}
+        style={{ inlineImage: toInlineImageStyle(controls) }}
+      />
+    );
+  },
+};
diff --git a/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/inline/InlineMath.stories.tsx b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/inline/InlineMath.stories.tsx
new file mode 100644
index 00000000..4620d8e4
--- /dev/null
+++ b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/inline/InlineMath.stories.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import { EnrichedMarkdownTextStory } from '../EnrichedMarkdownTextStory';
+import { storyMeta } from '../shared/storyMeta';
+import {
+  githubFlavorArgTypes,
+  inlineMathStyledDefaults,
+  type InlineMathStyleControls,
+} from '../shared/storybookMarkdownStyles';
+import {
+  splitStyleControls,
+  toInlineMathStyle,
+} from '../shared/storybookStyleBuilders';
+import type { TextStory } from '../shared/storyTypes';
+
+const MARKDOWN = 'The formula $E = mc^2$ and $a^2 + b^2 = c^2$ are famous.';
+
+const argTypes = {
+  latexMath: {
+    control: 'boolean',
+    description: 'md4cFlags.latexMath — enable inline $...$ math parsing.',
+  },
+  color: {
+    control: 'color',
+    description: 'markdownStyle.inlineMath.color',
+  },
+  ...githubFlavorArgTypes('Inline math requires flavor="github" (GFM).'),
+};
+
+export default storyMeta('Inline', 'Inline Math');
+
+export const Default: TextStory<InlineMathStyleControls> = {
+  args: {
+    markdown: MARKDOWN,
+    flavor: 'github',
+    ...inlineMathStyledDefaults,
+  },
+  argTypes,
+  render: (args) => {
+    const { controls, rest } = splitStyleControls(
+      args,
+      inlineMathStyledDefaults
+    );
+    const { latexMath, ...inlineMathStyle } = controls;
+    return (
+      <EnrichedMarkdownTextStory
+        title="Inline Math"
+        description="Inline $...$ math. Block math is under Block/Math."
+        {...rest}
+        md4cFlags={{ latexMath }}
+        style={{ inlineMath: toInlineMathStyle(inlineMathStyle) }}
+      />
+    );
+  },
+};
diff --git a/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/inline/Italic.stories.tsx b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/inline/Italic.stories.tsx
new file mode 100644
index 00000000..548603e8
--- /dev/null
+++ b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/inline/Italic.stories.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { EnrichedMarkdownTextStory } from '../EnrichedMarkdownTextStory';
+import { storyMeta } from '../shared/storyMeta';
+import {
+  emphasisStyledDefaults,
+  fontFamilyControl,
+  type EmphasisStyleControls,
+} from '../shared/storybookMarkdownStyles';
+import {
+  splitStyleControls,
+  toEmphasisStyle,
+} from '../shared/storybookStyleBuilders';
+import type { TextStory } from '../shared/storyTypes';
+
+const MARKDOWN = '*Italic text* and normal text.';
+
+const argTypes = {
+  fontFamily: fontFamilyControl('markdownStyle.em.fontFamily'),
+  fontStyle: {
+    options: ['italic', 'normal'],
+    control: { type: 'inline-radio' },
+    description:
+      'markdownStyle.em.fontStyle — only applies when fontFamily is set.',
+  },
+  color: {
+    control: 'color',
+    description: 'markdownStyle.em.color',
+  },
+};
+
+export default storyMeta('Inline', 'Italic');
+
+export const Default: TextStory<EmphasisStyleControls> = {
+  args: {
+    markdown: MARKDOWN,
+    ...emphasisStyledDefaults,
+  },
+  argTypes,
+  render: (args) => {
+    const { controls, rest } = splitStyleControls(args, emphasisStyledDefaults);
+    return (
+      <EnrichedMarkdownTextStory
+        title="Italic"
+        description="*text* renders as emphasis. (_text_ is covered under Inline/Underline when md4cFlags.underline is on.)"
+        {...rest}
+        md4cFlags={{ underline: false }}
+        style={{ em: toEmphasisStyle(controls) }}
+      />
+    );
+  },
+};
diff --git a/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/inline/Link.stories.tsx b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/inline/Link.stories.tsx
new file mode 100644
index 00000000..8fc0edf4
--- /dev/null
+++ b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/inline/Link.stories.tsx
@@ -0,0 +1,144 @@
+import React from 'react';
+import { EnrichedMarkdownTextStory } from '../EnrichedMarkdownTextStory';
+import { storyMeta } from '../shared/storyMeta';
+import {
+  fontFamilyControl,
+  linkStyledDefaults,
+  linkVariantsDemoDefaults,
+  type LinkStyleControls,
+  type LinkVariantsDemoControls,
+} from '../shared/storybookMarkdownStyles';
+import {
+  splitStyleControls,
+  toLinkStyle,
+  toLinkVariantsDemoStyle,
+} from '../shared/storybookStyleBuilders';
+import type { TextStory } from '../shared/storyTypes';
+
+type LinkInteractionsStoryExtra = {
+  enableLinkPreview: boolean;
+};
+
+const MARKDOWN = 'Visit [React Native](https://reactnative.dev) for docs.';
+
+const INTERACTIONS_MARKDOWN =
+  '[React Native](https://reactnative.dev) and [Expo](https://expo.dev)';
+
+const VARIANTS_MARKDOWN =
+  'Hey [Alice](user:alice), check [general](channel:general) and [docs](https://example.com).';
+
+const linkBaseArgTypes = {
+  fontFamily: fontFamilyControl('markdownStyle.link.fontFamily'),
+  color: {
+    control: 'color',
+    description: 'markdownStyle.link.color',
+  },
+  underline: {
+    control: 'boolean',
+    description: 'markdownStyle.link.underline',
+  },
+  backgroundColor: {
+    control: 'color',
+    description: 'markdownStyle.link.backgroundColor',
+  },
+};
+
+const variantsArgTypes = {
+  ...linkBaseArgTypes,
+  color: {
+    control: 'color',
+    description: 'markdownStyle.link.color (fallback for unmatched URLs)',
+  },
+  userVariantColor: {
+    control: 'color',
+    description: 'markdownStyle.linkVariants["^user:"].color',
+  },
+  userVariantUnderline: {
+    control: 'boolean',
+    description: 'markdownStyle.linkVariants["^user:"].underline',
+  },
+  userVariantBackgroundColor: {
+    control: 'color',
+    description: 'markdownStyle.linkVariants["^user:"].backgroundColor',
+  },
+  channelVariantColor: {
+    control: 'color',
+    description: 'markdownStyle.linkVariants["^channel:"].color',
+  },
+  channelVariantUnderline: {
+    control: 'boolean',
+    description: 'markdownStyle.linkVariants["^channel:"].underline',
+  },
+  channelVariantBackgroundColor: {
+    control: 'color',
+    description: 'markdownStyle.linkVariants["^channel:"].backgroundColor',
+  },
+};
+
+const interactionsArgTypes = {
+  enableLinkPreview: {
+    control: 'boolean',
+    description:
+      'Show the native link preview on long-press (iOS). Defaults to false when onLinkLongPress is set.',
+  },
+  onLinkPress: { action: 'onLinkPress' },
+  onLinkLongPress: { action: 'onLinkLongPress' },
+};
+
+export default storyMeta('Inline', 'Link');
+
+export const Default: TextStory<LinkStyleControls> = {
+  args: {
+    markdown: MARKDOWN,
+    ...linkStyledDefaults,
+  },
+  argTypes: linkBaseArgTypes,
+  render: (args) => {
+    const { controls, rest } = splitStyleControls(args, linkStyledDefaults);
+    return (
+      <EnrichedMarkdownTextStory
+        title="Link"
+        description="[text](url) renders a tappable link. Use the controls to tune markdownStyle.link."
+        {...rest}
+        style={{ link: toLinkStyle(controls) }}
+      />
+    );
+  },
+};
+
+export const Interactions: TextStory<LinkInteractionsStoryExtra> = {
+  args: {
+    markdown: INTERACTIONS_MARKDOWN,
+    enableLinkPreview: true,
+  },
+  argTypes: interactionsArgTypes,
+  render: (args) => (
+    <EnrichedMarkdownTextStory
+      title="Link Interactions"
+      description="Tap and long-press links. Wire onLinkPress / onLinkLongPress via the Actions panel."
+      {...args}
+    />
+  ),
+};
+
+export const Variants: TextStory<LinkVariantsDemoControls> = {
+  args: {
+    markdown: VARIANTS_MARKDOWN,
+    ...linkVariantsDemoDefaults,
+  },
+  argTypes: variantsArgTypes,
+  render: (args) => {
+    const { controls, rest } = splitStyleControls(
+      args,
+      linkVariantsDemoDefaults
+    );
+    return (
+      <EnrichedMarkdownTextStory
+        title="Link Variants"
+        description="Per-URL-pattern overrides via markdownStyle.linkVariants. Unmatched links use the base link style."
+        {...rest}
+        style={toLinkVariantsDemoStyle(controls)}
+      />
+    );
+  },
+};
diff --git a/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/inline/Spoiler.stories.tsx b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/inline/Spoiler.stories.tsx
new file mode 100644
index 00000000..b01d22d7
--- /dev/null
+++ b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/inline/Spoiler.stories.tsx
@@ -0,0 +1,186 @@
+import React, { useState } from 'react';
+import { Button, StyleSheet, View } from 'react-native';
+import {
+  EnrichedMarkdownText,
+  type EnrichedMarkdownTextProps,
+} from 'react-native-enriched-markdown';
+import { MarkdownStoryLayout } from '../EnrichedMarkdownTextStory';
+import { storyMeta } from '../shared/storyMeta';
+import {
+  numberControl,
+  spoilerStyledDefaults,
+  type SpoilerStyleControls,
+} from '../shared/storybookMarkdownStyles';
+import {
+  splitStyleControls,
+  toSpoilerStyle,
+} from '../shared/storybookStyleBuilders';
+import type { StoryArgs, TextStory } from '../shared/storyTypes';
+
+type SpoilerStoryExtra = SpoilerStyleControls & {
+  spoilerOverlay?: 'particles' | 'solid';
+};
+
+type SpoilerStoryArgs = StoryArgs<SpoilerStoryExtra>;
+
+type SpoilerStoryProps = Omit<EnrichedMarkdownTextProps, 'markdownStyle'> & {
+  title: string;
+  description: string;
+  style?: EnrichedMarkdownTextProps['markdownStyle'];
+  /** Storybook-only callback fired when Reload Spoiler is pressed. */
+  onReloadSpoiler?: () => void;
+};
+
+function SpoilerStory({
+  title,
+  description,
+  markdown: initialMarkdown,
+  spoilerOverlay = 'particles',
+  onReloadSpoiler,
+  style,
+  ...props
+}: SpoilerStoryProps) {
+  const [markdown, setMarkdown] = useState(initialMarkdown);
+  const [reloadNonce, setReloadNonce] = useState(0);
+  const spoilerStyleKey = style?.spoiler ? JSON.stringify(style.spoiler) : '';
+
+  return (
+    <View>
+      <MarkdownStoryLayout
+        title={title}
+        description={description}
+        markdown={markdown}
+        onMarkdownChange={setMarkdown}
+        output={
+          <EnrichedMarkdownText
+            // Remount preview when spoiler style changes; overlays don't pick up markdownStyle.spoiler live in Storybook.
+            key={`${spoilerStyleKey}:${reloadNonce}`}
+            markdown={markdown}
+            markdownStyle={style}
+            spoilerOverlay={spoilerOverlay}
+            {...props}
+          />
+        }
+      />
+      <View style={styles.reloadButton}>
+        <Button
+          onPress={() => {
+            setReloadNonce((n) => n + 1);
+            onReloadSpoiler?.();
+          }}
+          title="Reload Spoiler"
+        />
+      </View>
+    </View>
+  );
+}
+
+const INLINE_MARKDOWN = `The password is ||swordfish|| and the code is ||42||.
+
+Spoiler with **bold** inside: ||The tree is named **Methuselah** and is over *4,850 years old*||.`;
+
+const BLOCK_MARKDOWN = `||The entire Amazon rainforest produces about **20% of the world's oxygen**, but recent studies suggest that the true figure may be closer to *6-9%* because the forest also consumes a significant amount of oxygen through decomposition. Nevertheless, the Amazon remains the single largest tropical rainforest on Earth, spanning **5.5 million square kilometers** across nine countries.||`;
+
+const argTypes = {
+  spoilerOverlay: {
+    options: ['particles', 'solid'],
+    control: { type: 'inline-radio' },
+    description: 'spoilerOverlay — particles or solid concealment preset.',
+  },
+  color: {
+    control: 'color',
+    description: 'markdownStyle.spoiler.color',
+  },
+  particleDensity: {
+    if: { arg: 'spoilerOverlay', eq: 'particles' },
+    ...numberControl('markdownStyle.spoiler.particles.density', {
+      min: 1,
+      max: 24,
+      step: 1,
+    }),
+  },
+  particleSpeed: {
+    if: { arg: 'spoilerOverlay', eq: 'particles' },
+    ...numberControl('markdownStyle.spoiler.particles.speed', {
+      min: 5,
+      max: 60,
+      step: 5,
+    }),
+  },
+  solidBorderRadius: {
+    if: { arg: 'spoilerOverlay', eq: 'solid' },
+    ...numberControl('markdownStyle.spoiler.solid.borderRadius', {
+      min: 0,
+      max: 16,
+      step: 1,
+    }),
+  },
+  onReloadSpoiler: { action: 'onReloadSpoiler' },
+};
+
+function renderSpoiler(
+  title: string,
+  description: string,
+  args: SpoilerStoryArgs
+) {
+  const { spoilerOverlay = 'particles', ...storyArgs } = args;
+  const { controls, rest } = splitStyleControls(
+    storyArgs,
+    spoilerStyledDefaults
+  );
+
+  return (
+    <SpoilerStory
+      title={title}
+      description={description}
+      {...rest}
+      spoilerOverlay={spoilerOverlay}
+      style={{ spoiler: toSpoilerStyle(controls) }}
+    />
+  );
+}
+
+const spoilerStoryBase = {
+  argTypes,
+  args: {
+    spoilerOverlay: 'particles' as const,
+    ...spoilerStyledDefaults,
+  },
+};
+
+export default storyMeta('Inline', 'Spoiler');
+
+export const Inline: TextStory<SpoilerStoryExtra> = {
+  ...spoilerStoryBase,
+  args: {
+    ...spoilerStoryBase.args,
+    markdown: INLINE_MARKDOWN,
+  },
+  render: (args) =>
+    renderSpoiler(
+      'Inline Spoiler',
+      '||hidden text|| inside a paragraph, including inline **bold** and *italic*. Tap to reveal. Use Reload Spoiler to reset spoilers after revealing them.',
+      args
+    ),
+};
+
+export const Block: TextStory<SpoilerStoryExtra> = {
+  ...spoilerStoryBase,
+  args: {
+    ...spoilerStoryBase.args,
+    markdown: BLOCK_MARKDOWN,
+  },
+  render: (args) =>
+    renderSpoiler(
+      'Block Spoiler',
+      'A full paragraph wrapped in ||...|| on its own line. Tap to reveal. Use Reload Spoiler to reset spoilers after revealing them.',
+      args
+    ),
+};
+
+const styles = StyleSheet.create({
+  reloadButton: {
+    paddingHorizontal: 16,
+    paddingBottom: 16,
+  },
+});
diff --git a/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/inline/Strikethrough.stories.tsx b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/inline/Strikethrough.stories.tsx
new file mode 100644
index 00000000..7401aba3
--- /dev/null
+++ b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/inline/Strikethrough.stories.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { EnrichedMarkdownTextStory } from '../EnrichedMarkdownTextStory';
+import { storyMeta } from '../shared/storyMeta';
+import {
+  strikethroughStyledDefaults,
+  type StrikethroughStyleControls,
+} from '../shared/storybookMarkdownStyles';
+import {
+  splitStyleControls,
+  toStrikethroughStyle,
+} from '../shared/storybookStyleBuilders';
+import type { TextStory } from '../shared/storyTypes';
+
+const MARKDOWN = '~~Strikethrough text~~ and normal text.';
+
+const argTypes = {
+  color: {
+    name: 'color (iOS only)',
+    control: 'color',
+    description: 'markdownStyle.strikethrough.color',
+  },
+};
+
+export default storyMeta('Inline', 'Strikethrough');
+
+export const Default: TextStory<StrikethroughStyleControls> = {
+  args: {
+    markdown: MARKDOWN,
+    ...strikethroughStyledDefaults,
+  },
+  argTypes,
+  render: (args) => {
+    const { controls, rest } = splitStyleControls(
+      args,
+      strikethroughStyledDefaults
+    );
+    return (
+      <EnrichedMarkdownTextStory
+        title="Strikethrough"
+        description="~~text~~ renders with a strike line. ~~ still works when md4cFlags.subscript is on; only single ~ is affected. Strikethrough color is iOS-only."
+        {...rest}
+        style={{ strikethrough: toStrikethroughStyle(controls) }}
+      />
+    );
+  },
+};
diff --git a/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/inline/Subscript.stories.tsx b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/inline/Subscript.stories.tsx
new file mode 100644
index 00000000..8e2724a2
--- /dev/null
+++ b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/inline/Subscript.stories.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import { EnrichedMarkdownTextStory } from '../EnrichedMarkdownTextStory';
+import { storyMeta } from '../shared/storyMeta';
+import {
+  scriptStyleArgTypes,
+  subscriptStyledDefaults,
+  type SubscriptStyleControls,
+} from '../shared/storybookMarkdownStyles';
+import {
+  splitStyleControls,
+  toSubscriptStyle,
+} from '../shared/storybookStyleBuilders';
+import type { TextStory } from '../shared/storyTypes';
+
+const MARKDOWN = 'Water is H~2~O and the index is x~1~.';
+
+const argTypes = {
+  subscript: {
+    control: 'boolean',
+    description:
+      'md4cFlags.subscript — enable ~text~ parsing (disables single-tilde strikethrough).',
+  },
+  ...scriptStyleArgTypes('subscript'),
+};
+
+export default storyMeta('Inline', 'Subscript');
+
+export const Default: TextStory<SubscriptStyleControls> = {
+  args: {
+    markdown: MARKDOWN,
+    ...subscriptStyledDefaults,
+  },
+  argTypes,
+  render: (args) => {
+    const { controls, rest } = splitStyleControls(
+      args,
+      subscriptStyledDefaults
+    );
+    const { subscript, ...subscriptStyle } = controls;
+    return (
+      <EnrichedMarkdownTextStory
+        title="Subscript"
+        description="~text~ requires md4cFlags.subscript. Tune markdownStyle.subscript."
+        {...rest}
+        md4cFlags={{ subscript }}
+        style={{ subscript: toSubscriptStyle(subscriptStyle) }}
+      />
+    );
+  },
+};
diff --git a/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/inline/Superscript.stories.tsx b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/inline/Superscript.stories.tsx
new file mode 100644
index 00000000..6c9b9f7f
--- /dev/null
+++ b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/inline/Superscript.stories.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { EnrichedMarkdownTextStory } from '../EnrichedMarkdownTextStory';
+import { storyMeta } from '../shared/storyMeta';
+import {
+  scriptStyleArgTypes,
+  superscriptStyledDefaults,
+  type SuperscriptStyleControls,
+} from '../shared/storybookMarkdownStyles';
+import {
+  splitStyleControls,
+  toSuperscriptStyle,
+} from '../shared/storybookStyleBuilders';
+import type { TextStory } from '../shared/storyTypes';
+
+const MARKDOWN = 'Water is H^2^O and area scales as x^2^.';
+
+const argTypes = {
+  superscript: {
+    control: 'boolean',
+    description: 'md4cFlags.superscript — enable ^text^ parsing.',
+  },
+  ...scriptStyleArgTypes('superscript'),
+};
+
+export default storyMeta('Inline', 'Superscript');
+
+export const Default: TextStory<SuperscriptStyleControls> = {
+  args: {
+    markdown: MARKDOWN,
+    ...superscriptStyledDefaults,
+  },
+  argTypes,
+  render: (args) => {
+    const { controls, rest } = splitStyleControls(
+      args,
+      superscriptStyledDefaults
+    );
+    const { superscript, ...superscriptStyle } = controls;
+    return (
+      <EnrichedMarkdownTextStory
+        title="Superscript"
+        description="^text^ requires md4cFlags.superscript. Tune markdownStyle.superscript."
+        {...rest}
+        md4cFlags={{ superscript }}
+        style={{ superscript: toSuperscriptStyle(superscriptStyle) }}
+      />
+    );
+  },
+};
diff --git a/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/inline/Underline.stories.tsx b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/inline/Underline.stories.tsx
new file mode 100644
index 00000000..00b3d0ed
--- /dev/null
+++ b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/inline/Underline.stories.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { EnrichedMarkdownTextStory } from '../EnrichedMarkdownTextStory';
+import { storyMeta } from '../shared/storyMeta';
+import {
+  underlineStyledDefaults,
+  type UnderlineStyleControls,
+} from '../shared/storybookMarkdownStyles';
+import {
+  splitStyleControls,
+  toUnderlineStyle,
+} from '../shared/storybookStyleBuilders';
+import type { TextStory } from '../shared/storyTypes';
+
+const MARKDOWN = '__Underlined text__ normal text _single underline_.';
+
+const argTypes = {
+  underline: {
+    control: 'boolean',
+    description:
+      'md4cFlags.underline — when on, _text_ renders as underline instead of emphasis.',
+  },
+  color: {
+    name: 'color (iOS only)',
+    control: 'color',
+    description: 'markdownStyle.underline.color',
+  },
+};
+
+export default storyMeta('Inline', 'Underline');
+
+export const Default: TextStory<UnderlineStyleControls> = {
+  args: {
+    markdown: MARKDOWN,
+    ...underlineStyledDefaults,
+  },
+  argTypes,
+  render: (args) => {
+    const { controls, rest } = splitStyleControls(
+      args,
+      underlineStyledDefaults
+    );
+    const { underline, ...underlineStyle } = controls;
+    return (
+      <EnrichedMarkdownTextStory
+        title="Underline"
+        description="Requires md4cFlags.underline. Tune markdownStyle.underline (iOS only)."
+        {...rest}
+        md4cFlags={{ underline }}
+        style={{ underline: toUnderlineStyle(underlineStyle) }}
+      />
+    );
+  },
+};
diff --git a/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/props/ContainerStyle.stories.tsx b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/props/ContainerStyle.stories.tsx
new file mode 100644
index 00000000..fa509edf
--- /dev/null
+++ b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/props/ContainerStyle.stories.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import type { ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native';
+import { EnrichedMarkdownTextStory } from '../EnrichedMarkdownTextStory';
+import { numberControl } from '../shared/storybookMarkdownStyles';
+import { storyMeta } from '../shared/storyMeta';
+import type { TextStory } from '../shared/storyTypes';
+
+type ContainerStyleStoryExtra = {
+  containerPadding: number;
+  containerBackgroundColor: string;
+};
+
+const MARKDOWN = `First paragraph inside the container.
+
+Second paragraph with the same wrapper styling.`;
+
+const argTypes = {
+  containerPadding: numberControl('containerStyle.padding', {
+    min: 0,
+    max: 48,
+    step: 4,
+  }),
+  containerBackgroundColor: {
+    control: 'color',
+    description: 'containerStyle.backgroundColor',
+  },
+};
+
+export default storyMeta('Props', 'Container Style');
+
+export const Default: TextStory<ContainerStyleStoryExtra> = {
+  args: {
+    markdown: MARKDOWN,
+    containerPadding: 12,
+    containerBackgroundColor: '#f3f4f6',
+  },
+  argTypes,
+  render: ({ containerPadding, containerBackgroundColor, ...args }) => (
+    <EnrichedMarkdownTextStory
+      title="Container Style"
+      description="containerStyle wraps the markdown output view."
+      {...args}
+      containerStyle={buildContainerStyle(
+        containerPadding,
+        containerBackgroundColor
+      )}
+    />
+  ),
+};
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 8,
+  },
+});
+
+function buildContainerStyle(
+  padding: number,
+  backgroundColor: string
+): ViewStyle {
+  return {
+    ...styles.container,
+    padding,
+    backgroundColor,
+  };
+}
diff --git a/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/props/ContextMenu.stories.tsx b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/props/ContextMenu.stories.tsx
new file mode 100644
index 00000000..706e7e2b
--- /dev/null
+++ b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/props/ContextMenu.stories.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import type { EnrichedMarkdownTextProps } from 'react-native-enriched-markdown';
+import { EnrichedMarkdownTextStory } from '../EnrichedMarkdownTextStory';
+import { storyMeta } from '../shared/storyMeta';
+import type { TextStory } from '../shared/storyTypes';
+
+const MARKDOWN =
+  'Select this text to open the context menu with a custom action.';
+
+type ContextMenuOnPress = NonNullable<
+  EnrichedMarkdownTextProps['contextMenuItems']
+>[number]['onPress'];
+
+type ContextMenuStoryExtra = {
+  showCustomItem: boolean;
+  onContextMenuItemPress?: ContextMenuOnPress;
+};
+
+const argTypes = {
+  showCustomItem: {
+    control: 'boolean',
+    description:
+      'Adds a custom contextMenuItems entry alongside built-in actions.',
+  },
+  onContextMenuItemPress: { action: 'contextMenuItem.onPress' },
+};
+
+export default storyMeta('Props', 'Context Menu');
+
+export const Default: TextStory<ContextMenuStoryExtra> = {
+  args: {
+    markdown: MARKDOWN,
+    showCustomItem: true,
+  },
+  argTypes,
+  render: ({ showCustomItem, onContextMenuItemPress, ...args }) => {
+    const contextMenuItems: EnrichedMarkdownTextProps['contextMenuItems'] =
+      showCustomItem
+        ? [
+            {
+              text: 'Log selection',
+              onPress: onContextMenuItemPress ?? (() => {}),
+            },
+          ]
+        : undefined;
+
+    return (
+      <EnrichedMarkdownTextStory
+        title="Context Menu"
+        description="contextMenuItems adds custom entries to the native selection menu. Built-in copy actions are under Props / Selection Menu."
+        {...args}
+        contextMenuItems={contextMenuItems}
+      />
+    );
+  },
+};
diff --git a/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/props/Flavor.stories.tsx b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/props/Flavor.stories.tsx
new file mode 100644
index 00000000..a71fc77d
--- /dev/null
+++ b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/props/Flavor.stories.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { EnrichedMarkdownTextStory } from '../EnrichedMarkdownTextStory';
+import { storyMeta } from '../shared/storyMeta';
+import {
+  githubFlavorArgTypes,
+  type MarkdownFlavor,
+} from '../shared/storybookMarkdownStyles';
+import type { TextStory } from '../shared/storyTypes';
+
+type FlavorStoryExtra = {
+  flavor: MarkdownFlavor;
+};
+
+const MARKDOWN = `CommonMark paragraph.
+
+| col | val |
+| --- | --- |
+| a   | 1   |
+
+- [x] GFM task list item`;
+
+const argTypes = githubFlavorArgTypes(
+  'commonmark — single TextView renderer. github — GFM tables, task lists, math, etc.'
+);
+
+export default storyMeta('Props', 'Flavor');
+
+export const Default: TextStory<FlavorStoryExtra> = {
+  args: {
+    markdown: MARKDOWN,
+    flavor: 'github',
+  },
+  argTypes,
+  render: (args) => (
+    <EnrichedMarkdownTextStory
+      title="Flavor"
+      description='Cross-cutting flavor demo. GFM-only syntax (tables, task lists, math) needs flavor="github". Block/Table, Block/Task List, Block/Math, and Inline/Math also expose flavor where required.'
+      {...args}
+    />
+  ),
+};
diff --git a/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/props/FontScaling.stories.tsx b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/props/FontScaling.stories.tsx
new file mode 100644
index 00000000..c02ec918
--- /dev/null
+++ b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/props/FontScaling.stories.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { EnrichedMarkdownTextStory } from '../EnrichedMarkdownTextStory';
+import { numberControl } from '../shared/storybookMarkdownStyles';
+import { storyMeta } from '../shared/storyMeta';
+import type { TextStory } from '../shared/storyTypes';
+
+type FontScalingStoryExtra = {
+  allowFontScaling: boolean;
+  maxFontSizeMultiplier: number;
+};
+
+const MARKDOWN =
+  'This text respects system font scaling when allowFontScaling is enabled.';
+
+const argTypes = {
+  allowFontScaling: {
+    control: 'boolean',
+    description:
+      'When false, text ignores the user accessibility font size setting.',
+  },
+  maxFontSizeMultiplier: numberControl(
+    'maxFontSizeMultiplier — caps scaling when allowFontScaling is on. 0 means no limit.',
+    { min: 0, max: 3, step: 0.25 }
+  ),
+};
+
+export default storyMeta('Props', 'Font Scaling');
+
+export const Default: TextStory<FontScalingStoryExtra> = {
+  args: {
+    markdown: MARKDOWN,
+    allowFontScaling: true,
+    maxFontSizeMultiplier: 0,
+  },
+  argTypes,
+  render: ({ allowFontScaling, maxFontSizeMultiplier, ...args }) => (
+    <EnrichedMarkdownTextStory
+      title="Font Scaling"
+      description="Accessibility font scaling props (iOS, Android). Change system text size to verify."
+      {...args}
+      allowFontScaling={allowFontScaling}
+      maxFontSizeMultiplier={
+        maxFontSizeMultiplier > 0 ? maxFontSizeMultiplier : undefined
+      }
+    />
+  ),
+};
diff --git a/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/props/Md4cFlags.stories.tsx b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/props/Md4cFlags.stories.tsx
new file mode 100644
index 00000000..45510584
--- /dev/null
+++ b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/props/Md4cFlags.stories.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import { EnrichedMarkdownTextStory } from '../EnrichedMarkdownTextStory';
+import {
+  githubFlavorArgTypes,
+  type MarkdownFlavor,
+} from '../shared/storybookMarkdownStyles';
+import { storyMeta } from '../shared/storyMeta';
+import type { TextStory } from '../shared/storyTypes';
+
+type Md4cFlagsStoryExtra = {
+  underline: boolean;
+  superscript: boolean;
+  subscript: boolean;
+  latexMath: boolean;
+  flavor: MarkdownFlavor;
+};
+
+const MARKDOWN = `_underline_
+
+text^superscript^
+
+text~subscript~
+
+$E = mc^2$`;
+
+const argTypes = {
+  underline: {
+    control: 'boolean',
+    description:
+      'md4cFlags.underline — _text_ becomes underline instead of emphasis.',
+  },
+  superscript: {
+    control: 'boolean',
+    description: 'md4cFlags.superscript — ^text^ parsing.',
+  },
+  subscript: {
+    control: 'boolean',
+    description:
+      'md4cFlags.subscript — ~text~ parsing (disables single-tilde strikethrough).',
+  },
+  latexMath: {
+    control: 'boolean',
+    description: 'md4cFlags.latexMath — $...$ and $$...$$ math parsing.',
+  },
+  ...githubFlavorArgTypes('LaTeX math requires flavor="github".'),
+};
+
+// Sidebar title uses "Md4c-Flags"; file name follows camelCase convention.
+export default storyMeta('Props', 'Md4c-Flags');
+
+export const Default: TextStory<Md4cFlagsStoryExtra> = {
+  args: {
+    markdown: MARKDOWN,
+    underline: true,
+    superscript: true,
+    subscript: true,
+    latexMath: true,
+    flavor: 'github',
+  },
+  argTypes,
+  render: ({ underline, superscript, subscript, latexMath, ...args }) => (
+    <EnrichedMarkdownTextStory
+      title="Md4c-Flags"
+      description="Cross-cutting md4cFlags demo. Individual inline/block stories also expose the minimum flag each syntax needs."
+      {...args}
+      md4cFlags={{ underline, superscript, subscript, latexMath }}
+    />
+  ),
+};
diff --git a/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/props/Selection.stories.tsx b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/props/Selection.stories.tsx
new file mode 100644
index 00000000..8580edb9
--- /dev/null
+++ b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/props/Selection.stories.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { EnrichedMarkdownTextStory } from '../EnrichedMarkdownTextStory';
+import { storyMeta } from '../shared/storyMeta';
+import type { TextStory } from '../shared/storyTypes';
+
+type SelectionStoryExtra = {
+  selectable: boolean;
+  selectionColor: string;
+  selectionHandleColor: string;
+};
+
+const argTypes = {
+  selectable: {
+    control: 'boolean',
+    description: 'Allow text to be selected.',
+  },
+  selectionColor: {
+    control: 'color',
+    description:
+      'Selection highlight. On iOS also tints the caret and drag handles.',
+  },
+  selectionHandleColor: {
+    name: 'selectionHandleColor (Android only)',
+    control: 'color',
+    description:
+      'Drag handle color. Android API 29+ only — no effect on iOS (use selectionColor there).',
+  },
+};
+
+export default storyMeta('Props', 'Selection');
+
+export const Default: TextStory<SelectionStoryExtra> = {
+  args: {
+    markdown: 'Select some of this text to see the highlight color in action.',
+    selectable: true,
+    selectionColor: '#b4d5fe',
+    selectionHandleColor: '#2563eb',
+  },
+  argTypes,
+  render: ({ selectionColor, selectionHandleColor, ...args }) => (
+    <EnrichedMarkdownTextStory
+      title="Selection"
+      description="Change a color, then select text again to see it applied (iOS does not repaint an active selection). selectionHandleColor is Android-only (API 29+) — on iOS, use selectionColor for handles too."
+      {...args}
+      selectionColor={selectionColor}
+      selectionHandleColor={selectionHandleColor}
+    />
+  ),
+};
diff --git a/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/props/SelectionMenu.stories.tsx b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/props/SelectionMenu.stories.tsx
new file mode 100644
index 00000000..4d174390
--- /dev/null
+++ b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/props/SelectionMenu.stories.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { EnrichedMarkdownTextStory } from '../EnrichedMarkdownTextStory';
+import { storyMeta } from '../shared/storyMeta';
+import type { TextStory } from '../shared/storyTypes';
+
+type SelectionMenuStoryExtra = {
+  copyAsMarkdown: boolean;
+  copyImageUrl: boolean;
+};
+
+const MARKDOWN = `Select this text and open the context menu to see the built-in actions.
+
+![Misty forest at sunrise](https://images.unsplash.com/photo-1448375240586-882707db888b?w=800)`;
+
+const argTypes = {
+  copyAsMarkdown: {
+    control: 'boolean',
+    description:
+      'selectionMenuConfig.copyAsMarkdown — show "Copy as Markdown" in the selection menu.',
+  },
+  copyImageUrl: {
+    control: 'boolean',
+    description:
+      'selectionMenuConfig.copyImageUrl — show "Copy Image URL" when the selection contains an image.',
+  },
+};
+
+export default storyMeta('Props', 'Selection Menu');
+
+export const Default: TextStory<SelectionMenuStoryExtra> = {
+  args: {
+    markdown: MARKDOWN,
+    copyAsMarkdown: true,
+    copyImageUrl: true,
+  },
+  argTypes,
+  render: ({ copyAsMarkdown, copyImageUrl, ...args }) => (
+    <EnrichedMarkdownTextStory
+      title="Selection Menu"
+      description='Built-in copy actions in the native selection menu. Select text for "Copy as Markdown"; select across the image for "Copy Image URL".'
+      {...args}
+      selectionMenuConfig={{ copyAsMarkdown, copyImageUrl }}
+    />
+  ),
+};
diff --git a/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/props/TrailingMargin.stories.tsx b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/props/TrailingMargin.stories.tsx
new file mode 100644
index 00000000..f27cafbc
--- /dev/null
+++ b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/props/TrailingMargin.stories.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { EnrichedMarkdownTextStory } from '../EnrichedMarkdownTextStory';
+import { storyMeta } from '../shared/storyMeta';
+import type { TextStory } from '../shared/storyTypes';
+
+type TrailingMarginStoryExtra = {
+  allowTrailingMargin: boolean;
+};
+
+const MARKDOWN = `First paragraph with bottom margin.
+
+Second paragraph — compare spacing below the last line.`;
+
+const argTypes = {
+  allowTrailingMargin: {
+    control: 'boolean',
+    description:
+      'When true, keeps marginBottom on the last block. When false (default), trims trailing spacing.',
+  },
+};
+
+export default storyMeta('Props', 'Trailing Margin');
+
+export const Default: TextStory<TrailingMarginStoryExtra> = {
+  args: {
+    markdown: MARKDOWN,
+    allowTrailingMargin: false,
+  },
+  argTypes,
+  render: ({ allowTrailingMargin, ...args }) => (
+    <EnrichedMarkdownTextStory
+      title="Trailing Margin"
+      description="allowTrailingMargin controls whether the last block keeps its marginBottom. Paragraph marginBottom is fixed at 24px for comparison."
+      {...args}
+      allowTrailingMargin={allowTrailingMargin}
+      style={{
+        paragraph: { marginBottom: 24 },
+      }}
+    />
+  ),
+};
diff --git a/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/shared/storyMeta.ts b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/shared/storyMeta.ts
new file mode 100644
index 00000000..2ef3e3e6
--- /dev/null
+++ b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/shared/storyMeta.ts
@@ -0,0 +1,17 @@
+import type { Meta } from '@storybook/react-native';
+import { EnrichedMarkdownText } from 'react-native-enriched-markdown';
+
+export type StoryCategory = 'Block' | 'Inline' | 'Props';
+
+export function storyMeta(
+  category: StoryCategory,
+  name: string
+): Meta<typeof EnrichedMarkdownText> {
+  return {
+    title: `EnrichedMarkdownText/${category}/${name}`,
+    component: EnrichedMarkdownText,
+    parameters: {
+      controls: { exclude: ['markdown'] },
+    },
+  };
+}
diff --git a/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/shared/storyTypes.ts b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/shared/storyTypes.ts
new file mode 100644
index 00000000..9c1fddd7
--- /dev/null
+++ b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/shared/storyTypes.ts
@@ -0,0 +1,22 @@
+import type { ComponentProps, ReactElement } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-native';
+import { EnrichedMarkdownText } from 'react-native-enriched-markdown';
+
+export type TextStoryMeta = Meta<typeof EnrichedMarkdownText>;
+
+/** Component props merged with Storybook-only control args. */
+export type StoryArgs<TExtra extends Record<string, unknown> = {}> =
+  ComponentProps<typeof EnrichedMarkdownText> & TExtra;
+
+type TextStoryBase = Omit<
+  StoryObj<TextStoryMeta>,
+  'args' | 'render' | 'argTypes'
+>;
+
+/** TExtra = Storybook-only control args (e.g. style knobs) merged with component props. */
+export type TextStory<TExtra extends Record<string, unknown> = {}> =
+  TextStoryBase & {
+    args?: StoryArgs<TExtra>;
+    render: (args: StoryArgs<TExtra>) => ReactElement;
+    argTypes?: Record<string, unknown>;
+  };
diff --git a/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/shared/storybookMarkdownStyles.ts b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/shared/storybookMarkdownStyles.ts
new file mode 100644
index 00000000..783b320b
--- /dev/null
+++ b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/shared/storybookMarkdownStyles.ts
@@ -0,0 +1,555 @@
+type TextAlign = 'auto' | 'left' | 'right' | 'center' | 'justify';
+type MathTextAlign = 'left' | 'center' | 'right';
+
+export type ParagraphStyleControls = {
+  fontSize: number;
+  fontFamily: string;
+  fontWeight: string;
+  color: string;
+  marginTop: number;
+  marginBottom: number;
+  lineHeight: number;
+  textAlign: TextAlign;
+};
+
+export const paragraphStyledDefaults: ParagraphStyleControls = {
+  fontSize: 18,
+  fontFamily: '',
+  fontWeight: '',
+  color: '#1e3a5f',
+  marginTop: 0,
+  marginBottom: 20,
+  lineHeight: 28,
+  textAlign: 'left',
+};
+
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+
+export type SingleHeadingStyleControls = {
+  fontSize: number;
+  fontFamily: string;
+  fontWeight: string;
+  color: string;
+  lineHeight: number;
+  textAlign: TextAlign;
+  marginTop: number;
+  marginBottom: number;
+};
+
+const singleHeadingBaseDefaults = {
+  fontFamily: '',
+  fontWeight: '',
+  color: '#111827',
+  lineHeight: 28,
+  textAlign: 'left' as TextAlign,
+  marginTop: 0,
+  marginBottom: 8,
+};
+
+export const headingStyledDefaultsByLevel: Record<
+  HeadingLevel,
+  SingleHeadingStyleControls
+> = {
+  1: { ...singleHeadingBaseDefaults, fontSize: 30 },
+  2: { ...singleHeadingBaseDefaults, fontSize: 24 },
+  3: { ...singleHeadingBaseDefaults, fontSize: 20 },
+  4: { ...singleHeadingBaseDefaults, fontSize: 18 },
+  5: { ...singleHeadingBaseDefaults, fontSize: 16 },
+  6: { ...singleHeadingBaseDefaults, fontSize: 14 },
+};
+
+export type BlockquoteStyleControls = {
+  fontSize: number;
+  fontFamily: string;
+  fontWeight: string;
+  color: string;
+  marginTop: number;
+  marginBottom: number;
+  lineHeight: number;
+  borderColor: string;
+  borderWidth: number;
+  gapWidth: number;
+  backgroundColor: string;
+};
+
+export const blockquoteStyledDefaults: BlockquoteStyleControls = {
+  fontSize: 16,
+  fontFamily: '',
+  fontWeight: '',
+  color: '#4b5563',
+  marginTop: 0,
+  marginBottom: 16,
+  lineHeight: 24,
+  borderColor: '#6366f1',
+  borderWidth: 4,
+  gapWidth: 16,
+  backgroundColor: '#eef2ff',
+};
+
+export type CodeBlockStyleControls = {
+  fontSize: number;
+  fontFamily: string;
+  fontWeight: string;
+  color: string;
+  marginTop: number;
+  marginBottom: number;
+  lineHeight: number;
+  backgroundColor: string;
+  borderColor: string;
+  borderRadius: number;
+  borderWidth: number;
+  padding: number;
+};
+
+export const codeBlockStyledDefaults: CodeBlockStyleControls = {
+  fontSize: 14,
+  fontFamily: '',
+  fontWeight: '',
+  color: '#f3f4f6',
+  marginTop: 0,
+  marginBottom: 16,
+  lineHeight: 20,
+  backgroundColor: '#1f2937',
+  borderColor: '#374151',
+  borderRadius: 8,
+  borderWidth: 1,
+  padding: 16,
+};
+
+export type ThematicBreakStyleControls = {
+  color: string;
+  height: number;
+  marginTop: number;
+  marginBottom: number;
+};
+
+export const thematicBreakStyledDefaults: ThematicBreakStyleControls = {
+  color: '#6366f1',
+  height: 2,
+  marginTop: 24,
+  marginBottom: 24,
+};
+
+export type ImageStyleControls = {
+  height: number;
+  borderRadius: number;
+  marginTop: number;
+  marginBottom: number;
+};
+
+export const imageStyledDefaults: ImageStyleControls = {
+  height: 200,
+  borderRadius: 12,
+  marginTop: 8,
+  marginBottom: 16,
+};
+
+export type TableStyleControls = {
+  fontSize: number;
+  fontFamily: string;
+  fontWeight: string;
+  color: string;
+  marginTop: number;
+  marginBottom: number;
+  lineHeight: number;
+  headerFontFamily: string;
+  headerBackgroundColor: string;
+  headerTextColor: string;
+  rowEvenBackgroundColor: string;
+  rowOddBackgroundColor: string;
+  borderColor: string;
+  borderWidth: number;
+  borderRadius: number;
+  cellPaddingHorizontal: number;
+  cellPaddingVertical: number;
+};
+
+export const tableStyledDefaults: TableStyleControls = {
+  fontSize: 14,
+  fontFamily: '',
+  fontWeight: '',
+  color: '#1f2937',
+  marginTop: 0,
+  marginBottom: 16,
+  lineHeight: 22,
+  headerFontFamily: '',
+  headerBackgroundColor: '#eef2ff',
+  headerTextColor: '#312e81',
+  rowEvenBackgroundColor: '#ffffff',
+  rowOddBackgroundColor: '#f9fafb',
+  borderColor: '#c7d2fe',
+  borderWidth: 1,
+  borderRadius: 8,
+  cellPaddingHorizontal: 12,
+  cellPaddingVertical: 8,
+};
+
+export type TaskListStyleControls = {
+  checkedColor: string;
+  borderColor: string;
+  checkboxSize: number;
+  checkboxBorderRadius: number;
+  checkmarkColor: string;
+  checkedTextColor: string;
+  checkedStrikethrough: boolean;
+};
+
+export const taskListStyledDefaults: TaskListStyleControls = {
+  checkedColor: '#2563eb',
+  borderColor: '#9ca3af',
+  checkboxSize: 18,
+  checkboxBorderRadius: 4,
+  checkmarkColor: '#ffffff',
+  checkedTextColor: '#9ca3af',
+  checkedStrikethrough: true,
+};
+
+export type MathStyleControls = {
+  latexMath: boolean;
+  fontSize: number;
+  color: string;
+  backgroundColor: string;
+  padding: number;
+  marginTop: number;
+  marginBottom: number;
+  textAlign: MathTextAlign;
+};
+
+export const mathStyledDefaults: MathStyleControls = {
+  latexMath: true,
+  fontSize: 16,
+  color: '#1e3a5f',
+  backgroundColor: '#f0f9ff',
+  padding: 12,
+  marginTop: 0,
+  marginBottom: 16,
+  textAlign: 'center',
+};
+
+export type ListStyleControls = {
+  fontSize: number;
+  fontFamily: string;
+  fontWeight: string;
+  color: string;
+  marginTop: number;
+  marginBottom: number;
+  lineHeight: number;
+  bulletColor: string;
+  bulletSize: number;
+  markerMinWidth: number;
+  markerColor: string;
+  markerFontWeight: string;
+  gapWidth: number;
+  marginLeft: number;
+};
+
+export const listStyledDefaults: ListStyleControls = {
+  fontSize: 16,
+  fontFamily: '',
+  fontWeight: '',
+  color: '#1f2937',
+  marginTop: 0,
+  marginBottom: 16,
+  lineHeight: 24,
+  bulletColor: '#6366f1',
+  bulletSize: 6,
+  markerMinWidth: 0,
+  markerColor: '#4f46e5',
+  markerFontWeight: '',
+  gapWidth: 8,
+  marginLeft: 24,
+};
+
+export type StrongStyleControls = {
+  fontFamily: string;
+  fontWeight: 'bold' | 'normal';
+  color: string;
+};
+
+export const strongStyledDefaults: StrongStyleControls = {
+  fontFamily: '',
+  fontWeight: 'bold',
+  color: '#111827',
+};
+
+export type EmphasisStyleControls = {
+  fontFamily: string;
+  fontStyle: 'italic' | 'normal';
+  color: string;
+};
+
+export const emphasisStyledDefaults: EmphasisStyleControls = {
+  fontFamily: '',
+  fontStyle: 'italic',
+  color: '#4b5563',
+};
+
+export type LinkStyleControls = {
+  fontFamily: string;
+  color: string;
+  underline: boolean;
+  backgroundColor: string;
+};
+
+export const linkStyledDefaults: LinkStyleControls = {
+  fontFamily: '',
+  color: '#2563eb',
+  underline: true,
+  backgroundColor: 'transparent',
+};
+
+export type LinkVariantsDemoControls = LinkStyleControls & {
+  userVariantColor: string;
+  userVariantUnderline: boolean;
+  userVariantBackgroundColor: string;
+  channelVariantColor: string;
+  channelVariantUnderline: boolean;
+  channelVariantBackgroundColor: string;
+};
+
+export const linkVariantsDemoDefaults: LinkVariantsDemoControls = {
+  ...linkStyledDefaults,
+  userVariantColor: '#1a73e8',
+  userVariantUnderline: false,
+  userVariantBackgroundColor: '#e8f0fe',
+  channelVariantColor: '#137333',
+  channelVariantUnderline: false,
+  channelVariantBackgroundColor: '#e6f4ea',
+};
+
+export type InlineCodeStyleControls = {
+  fontFamily: string;
+  fontSize: number;
+  color: string;
+  backgroundColor: string;
+  borderColor: string;
+};
+
+export const inlineCodeStyledDefaults: InlineCodeStyleControls = {
+  fontFamily: '',
+  fontSize: 0,
+  color: '#e01e5a',
+  backgroundColor: '#fdf2f4',
+  borderColor: '#f8d7da',
+};
+
+export type StrikethroughStyleControls = {
+  color: string;
+};
+
+export const strikethroughStyledDefaults: StrikethroughStyleControls = {
+  color: '#9ca3af',
+};
+
+export type UnderlineStyleControls = {
+  underline: boolean;
+  color: string;
+};
+
+export const underlineStyledDefaults: UnderlineStyleControls = {
+  underline: true,
+  color: '#2563eb',
+};
+
+export type SuperscriptStyleControls = {
+  superscript: boolean;
+  fontScale: number;
+  baselineOffsetScale: number;
+};
+
+export const superscriptStyledDefaults: SuperscriptStyleControls = {
+  superscript: true,
+  fontScale: 0.75,
+  baselineOffsetScale: 0.35,
+};
+
+export type SubscriptStyleControls = {
+  subscript: boolean;
+  fontScale: number;
+  baselineOffsetScale: number;
+};
+
+export const subscriptStyledDefaults: SubscriptStyleControls = {
+  subscript: true,
+  fontScale: 0.75,
+  baselineOffsetScale: 0.2,
+};
+
+type NumberControlRange = {
+  min: number;
+  max: number;
+  step?: number;
+};
+
+/** Slider for numeric args — RN Storybook `type: 'number'` renders as text; `range` does not. */
+export function numberControl(description: string, range: NumberControlRange) {
+  const { min, max, step = 1 } = range;
+  return {
+    control: { type: 'range' as const, min, max, step },
+    description,
+  };
+}
+
+export function scriptStyleArgTypes(styleKey: 'superscript' | 'subscript') {
+  return {
+    fontScale: numberControl(`markdownStyle.${styleKey}.fontScale`, {
+      min: 0.5,
+      max: 1,
+      step: 0.05,
+    }),
+    baselineOffsetScale: numberControl(
+      `markdownStyle.${styleKey}.baselineOffsetScale`,
+      { min: 0, max: 0.6, step: 0.05 }
+    ),
+  };
+}
+
+export type MarkdownFlavor = 'commonmark' | 'github';
+
+export function githubFlavorArgTypes(description: string) {
+  return {
+    flavor: {
+      options: ['commonmark', 'github'] satisfies MarkdownFlavor[],
+      control: { type: 'inline-radio' },
+      description,
+    },
+  };
+}
+
+/** Bundled fonts in apps/example/assets/fonts (see src/markdownStyles.ts). */
+export const EXAMPLE_FONT_FAMILIES = [
+  '',
+  'Montserrat-Regular',
+  'Montserrat-Bold',
+  'Montserrat-SemiBold',
+  'Montserrat-Medium',
+  'Montserrat-Italic',
+  'CourierPrime-Regular',
+] as const;
+
+const EXAMPLE_FONT_FAMILY_LABELS: Record<
+  (typeof EXAMPLE_FONT_FAMILIES)[number],
+  string
+> = {
+  '': 'Default',
+  'Montserrat-Regular': 'Montserrat Regular',
+  'Montserrat-Bold': 'Montserrat Bold',
+  'Montserrat-SemiBold': 'Montserrat SemiBold',
+  'Montserrat-Medium': 'Montserrat Medium',
+  'Montserrat-Italic': 'Montserrat Italic',
+  'CourierPrime-Regular': 'Courier Prime',
+};
+
+export function fontFamilyControl(description: string) {
+  return {
+    options: [...EXAMPLE_FONT_FAMILIES],
+    control: {
+      type: 'select' as const,
+      labels: EXAMPLE_FONT_FAMILY_LABELS,
+    },
+    description,
+  };
+}
+
+/** React Native fontWeight values (see Text style prop). */
+export const EXAMPLE_FONT_WEIGHTS = [
+  '',
+  'normal',
+  '300',
+  '500',
+  '600',
+  'bold',
+] as const;
+
+const EXAMPLE_FONT_WEIGHT_LABELS: Record<
+  (typeof EXAMPLE_FONT_WEIGHTS)[number],
+  string
+> = {
+  '': 'Default',
+  'normal': 'Normal',
+  '300': 'Light (300)',
+  '500': 'Medium (500)',
+  '600': 'SemiBold (600)',
+  'bold': 'Bold',
+};
+
+export function fontWeightControl(description: string) {
+  return {
+    options: [...EXAMPLE_FONT_WEIGHTS],
+    control: {
+      type: 'select' as const,
+      labels: EXAMPLE_FONT_WEIGHT_LABELS,
+    },
+    description,
+  };
+}
+
+export function strongFontWeightControl(description: string) {
+  return {
+    options: ['bold', 'normal'] as const,
+    control: { type: 'inline-radio' as const },
+    description,
+  };
+}
+
+const TEXT_ALIGN_OPTIONS = [
+  'auto',
+  'left',
+  'right',
+  'center',
+  'justify',
+] as const satisfies readonly TextAlign[];
+
+const MATH_TEXT_ALIGN_OPTIONS = [
+  'left',
+  'center',
+  'right',
+] as const satisfies readonly MathTextAlign[];
+
+export function textAlignControl(description: string) {
+  return {
+    options: [...TEXT_ALIGN_OPTIONS],
+    control: { type: 'select' as const },
+    description,
+  };
+}
+
+export function mathTextAlignControl(description: string) {
+  return {
+    options: [...MATH_TEXT_ALIGN_OPTIONS],
+    control: { type: 'select' as const },
+    description,
+  };
+}
+
+export type InlineImageStyleControls = {
+  size: number;
+};
+
+export const inlineImageStyledDefaults: InlineImageStyleControls = {
+  size: 20,
+};
+
+export type InlineMathStyleControls = {
+  latexMath: boolean;
+  color: string;
+};
+
+export const inlineMathStyledDefaults: InlineMathStyleControls = {
+  latexMath: true,
+  color: '#1e3a5f',
+};
+
+export type SpoilerStyleControls = {
+  color: string;
+  particleDensity: number;
+  particleSpeed: number;
+  solidBorderRadius: number;
+};
+
+export const spoilerStyledDefaults: SpoilerStyleControls = {
+  color: '#374151',
+  particleDensity: 8,
+  particleSpeed: 20,
+  solidBorderRadius: 4,
+};
diff --git a/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/shared/storybookStyleBuilders.ts b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/shared/storybookStyleBuilders.ts
new file mode 100644
index 00000000..4b1ca3c8
--- /dev/null
+++ b/apps/example/.rnstorybook/stories/components/EnrichedMarkdownText/shared/storybookStyleBuilders.ts
@@ -0,0 +1,355 @@
+import type { MarkdownStyle } from 'react-native-enriched-markdown';
+import type { StoryArgs } from './storyTypes';
+import type {
+  BlockquoteStyleControls,
+  CodeBlockStyleControls,
+  EmphasisStyleControls,
+  HeadingLevel,
+  ImageStyleControls,
+  InlineCodeStyleControls,
+  InlineImageStyleControls,
+  InlineMathStyleControls,
+  LinkStyleControls,
+  LinkVariantsDemoControls,
+  ListStyleControls,
+  MathStyleControls,
+  ParagraphStyleControls,
+  SingleHeadingStyleControls,
+  SpoilerStyleControls,
+  StrikethroughStyleControls,
+  StrongStyleControls,
+  SubscriptStyleControls,
+  SuperscriptStyleControls,
+  TableStyleControls,
+  TaskListStyleControls,
+  ThematicBreakStyleControls,
+  UnderlineStyleControls,
+} from './storybookMarkdownStyles';
+
+/**
+ * Split Storybook style-control args from EnrichedMarkdownText props.
+ * md4cFlags (e.g. underline, superscript) may live in style controls so they
+ * are peeled off alongside markdownStyle knobs — see Underline/Superscript/Subscript.
+ */
+export function splitStyleControls<TControls extends Record<string, unknown>>(
+  args: StoryArgs<TControls>,
+  defaults: TControls
+): { controls: TControls; rest: StoryArgs } {
+  const controls = { ...defaults };
+  const rest = { ...args };
+  for (const key of Object.keys(defaults) as (keyof TControls)[]) {
+    const value = args[key as keyof typeof args];
+    if (value !== undefined) {
+      controls[key] = value as TControls[keyof TControls];
+    }
+    delete rest[key as string];
+  }
+  return { controls, rest: rest as StoryArgs };
+}
+
+export function toParagraphStyle(
+  controls: ParagraphStyleControls
+): NonNullable<MarkdownStyle['paragraph']> {
+  return {
+    fontSize: controls.fontSize,
+    ...(controls.fontFamily ? { fontFamily: controls.fontFamily } : {}),
+    ...(controls.fontWeight ? { fontWeight: controls.fontWeight } : {}),
+    color: controls.color,
+    marginTop: controls.marginTop,
+    marginBottom: controls.marginBottom,
+    lineHeight: controls.lineHeight,
+    textAlign: controls.textAlign,
+  };
+}
+
+export function toHeadingStyle(
+  controls: SingleHeadingStyleControls
+): NonNullable<MarkdownStyle['h1']> {
+  return {
+    fontSize: controls.fontSize,
+    ...(controls.fontFamily ? { fontFamily: controls.fontFamily } : {}),
+    ...(controls.fontWeight ? { fontWeight: controls.fontWeight } : {}),
+    color: controls.color,
+    lineHeight: controls.lineHeight,
+    textAlign: controls.textAlign,
+    marginTop: controls.marginTop,
+    marginBottom: controls.marginBottom,
+  };
+}
+
+export function toHeadingStyleAtLevel(
+  level: HeadingLevel,
+  controls: SingleHeadingStyleControls
+): Pick<MarkdownStyle, 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'> {
+  const style = toHeadingStyle(controls);
+  return { [`h${level}`]: style } as Pick<
+    MarkdownStyle,
+    'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+  >;
+}
+
+export function toBlockquoteStyle(
+  controls: BlockquoteStyleControls
+): NonNullable<MarkdownStyle['blockquote']> {
+  return {
+    fontSize: controls.fontSize,
+    ...(controls.fontFamily ? { fontFamily: controls.fontFamily } : {}),
+    ...(controls.fontWeight ? { fontWeight: controls.fontWeight } : {}),
+    color: controls.color,
+    marginTop: controls.marginTop,
+    marginBottom: controls.marginBottom,
+    lineHeight: controls.lineHeight,
+    borderColor: controls.borderColor,
+    borderWidth: controls.borderWidth,
+    gapWidth: controls.gapWidth,
+    backgroundColor: controls.backgroundColor,
+  };
+}
+
+export function toCodeBlockStyle(
+  controls: CodeBlockStyleControls
+): NonNullable<MarkdownStyle['codeBlock']> {
+  return {
+    fontSize: controls.fontSize,
+    ...(controls.fontFamily ? { fontFamily: controls.fontFamily } : {}),
+    ...(controls.fontWeight ? { fontWeight: controls.fontWeight } : {}),
+    color: controls.color,
+    marginTop: controls.marginTop,
+    marginBottom: controls.marginBottom,
+    lineHeight: controls.lineHeight,
+    backgroundColor: controls.backgroundColor,
+    borderColor: controls.borderColor,
+    borderRadius: controls.borderRadius,
+    borderWidth: controls.borderWidth,
+    padding: controls.padding,
+  };
+}
+
+export function toThematicBreakStyle(
+  controls: ThematicBreakStyleControls
+): NonNullable<MarkdownStyle['thematicBreak']> {
+  return {
+    color: controls.color,
+    height: controls.height,
+    marginTop: controls.marginTop,
+    marginBottom: controls.marginBottom,
+  };
+}
+
+export function toImageStyle(
+  controls: ImageStyleControls
+): NonNullable<MarkdownStyle['image']> {
+  return {
+    height: controls.height,
+    borderRadius: controls.borderRadius,
+    marginTop: controls.marginTop,
+    marginBottom: controls.marginBottom,
+  };
+}
+
+export function toTableStyle(
+  controls: TableStyleControls
+): NonNullable<MarkdownStyle['table']> {
+  return {
+    fontSize: controls.fontSize,
+    ...(controls.fontFamily ? { fontFamily: controls.fontFamily } : {}),
+    ...(controls.fontWeight ? { fontWeight: controls.fontWeight } : {}),
+    color: controls.color,
+    marginTop: controls.marginTop,
+    marginBottom: controls.marginBottom,
+    lineHeight: controls.lineHeight,
+    ...(controls.headerFontFamily
+      ? { headerFontFamily: controls.headerFontFamily }
+      : {}),
+    headerBackgroundColor: controls.headerBackgroundColor,
+    headerTextColor: controls.headerTextColor,
+    rowEvenBackgroundColor: controls.rowEvenBackgroundColor,
+    rowOddBackgroundColor: controls.rowOddBackgroundColor,
+    borderColor: controls.borderColor,
+    borderWidth: controls.borderWidth,
+    borderRadius: controls.borderRadius,
+    cellPaddingHorizontal: controls.cellPaddingHorizontal,
+    cellPaddingVertical: controls.cellPaddingVertical,
+  };
+}
+
+export function toTaskListStyle(
+  controls: TaskListStyleControls
+): NonNullable<MarkdownStyle['taskList']> {
+  return {
+    checkedColor: controls.checkedColor,
+    borderColor: controls.borderColor,
+    checkboxSize: controls.checkboxSize,
+    checkboxBorderRadius: controls.checkboxBorderRadius,
+    checkmarkColor: controls.checkmarkColor,
+    checkedTextColor: controls.checkedTextColor,
+    checkedStrikethrough: controls.checkedStrikethrough,
+  };
+}
+
+export function toMathStyle(
+  controls: Omit<MathStyleControls, 'latexMath'>
+): NonNullable<MarkdownStyle['math']> {
+  return {
+    fontSize: controls.fontSize,
+    color: controls.color,
+    backgroundColor: controls.backgroundColor,
+    padding: controls.padding,
+    marginTop: controls.marginTop,
+    marginBottom: controls.marginBottom,
+    textAlign: controls.textAlign,
+  };
+}
+
+export function toListStyle(
+  controls: ListStyleControls
+): NonNullable<MarkdownStyle['list']> {
+  return {
+    fontSize: controls.fontSize,
+    ...(controls.fontFamily ? { fontFamily: controls.fontFamily } : {}),
+    ...(controls.fontWeight ? { fontWeight: controls.fontWeight } : {}),
+    color: controls.color,
+    marginTop: controls.marginTop,
+    marginBottom: controls.marginBottom,
+    lineHeight: controls.lineHeight,
+    bulletColor: controls.bulletColor,
+    bulletSize: controls.bulletSize,
+    markerMinWidth: controls.markerMinWidth,
+    markerColor: controls.markerColor,
+    ...(controls.markerFontWeight
+      ? { markerFontWeight: controls.markerFontWeight }
+      : {}),
+    gapWidth: controls.gapWidth,
+    marginLeft: controls.marginLeft,
+  };
+}
+
+export function toStrongStyle(
+  controls: StrongStyleControls
+): NonNullable<MarkdownStyle['strong']> {
+  return {
+    ...(controls.fontFamily ? { fontFamily: controls.fontFamily } : {}),
+    fontWeight: controls.fontWeight,
+    ...(controls.color ? { color: controls.color } : {}),
+  };
+}
+
+export function toEmphasisStyle(
+  controls: EmphasisStyleControls
+): NonNullable<MarkdownStyle['em']> {
+  return {
+    ...(controls.fontFamily ? { fontFamily: controls.fontFamily } : {}),
+    fontStyle: controls.fontStyle,
+    ...(controls.color ? { color: controls.color } : {}),
+  };
+}
+
+export function toLinkStyle(
+  controls: LinkStyleControls
+): NonNullable<MarkdownStyle['link']> {
+  return {
+    ...(controls.fontFamily ? { fontFamily: controls.fontFamily } : {}),
+    color: controls.color,
+    underline: controls.underline,
+    backgroundColor: controls.backgroundColor,
+  };
+}
+
+export function toLinkVariantsDemoStyle(
+  controls: LinkVariantsDemoControls
+): Pick<MarkdownStyle, 'link' | 'linkVariants'> {
+  const {
+    userVariantColor,
+    userVariantUnderline,
+    userVariantBackgroundColor,
+    channelVariantColor,
+    channelVariantUnderline,
+    channelVariantBackgroundColor,
+    ...linkControls
+  } = controls;
+
+  return {
+    link: toLinkStyle(linkControls),
+    linkVariants: {
+      '^user:': {
+        color: userVariantColor,
+        underline: userVariantUnderline,
+        backgroundColor: userVariantBackgroundColor,
+      },
+      '^channel:': {
+        color: channelVariantColor,
+        underline: channelVariantUnderline,
+        backgroundColor: channelVariantBackgroundColor,
+      },
+    },
+  };
+}
+
+export function toInlineCodeStyle(
+  controls: InlineCodeStyleControls
+): NonNullable<MarkdownStyle['code']> {
+  return {
+    ...(controls.fontFamily ? { fontFamily: controls.fontFamily } : {}),
+    ...(controls.fontSize > 0 ? { fontSize: controls.fontSize } : {}),
+    color: controls.color,
+    backgroundColor: controls.backgroundColor,
+    borderColor: controls.borderColor,
+  };
+}
+
+export function toStrikethroughStyle(
+  controls: StrikethroughStyleControls
+): NonNullable<MarkdownStyle['strikethrough']> {
+  return { color: controls.color };
+}
+
+export function toUnderlineStyle(
+  controls: Omit<UnderlineStyleControls, 'underline'>
+): NonNullable<MarkdownStyle['underline']> {
+  return { color: controls.color };
+}
+
+export function toSuperscriptStyle(
+  controls: Omit<SuperscriptStyleControls, 'superscript'>
+): NonNullable<MarkdownStyle['superscript']> {
+  return {
+    fontScale: controls.fontScale,
+    baselineOffsetScale: controls.baselineOffsetScale,
+  };
+}
+
+export function toSubscriptStyle(
+  controls: Omit<SubscriptStyleControls, 'subscript'>
+): NonNullable<MarkdownStyle['subscript']> {
+  return {
+    fontScale: controls.fontScale,
+    baselineOffsetScale: controls.baselineOffsetScale,
+  };
+}
+
+export function toInlineImageStyle(
+  controls: InlineImageStyleControls
+): NonNullable<MarkdownStyle['inlineImage']> {
+  return { size: controls.size };
+}
+
+export function toInlineMathStyle(
+  controls: Omit<InlineMathStyleControls, 'latexMath'>
+): NonNullable<MarkdownStyle['inlineMath']> {
+  return { color: controls.color };
+}
+
+export function toSpoilerStyle(
+  controls: SpoilerStyleControls
+): NonNullable<MarkdownStyle['spoiler']> {
+  return {
+    color: controls.color,
+    particles: {
+      density: controls.particleDensity,
+      speed: controls.particleSpeed,
+    },
+    solid: {
+      borderRadius: controls.solidBorderRadius,
+    },
+  };
+}