Document inherited members in reference (#3956)

Our reference docs don't currently include members inherited through the
`extends` keyword. These extended items are barely referenced at all -
you have to find them in the signature.

This diff adds a clearer note to the docs saying which type has been
extended, and if possible brings the extended items through onto the
current documentation page (with a note saying where they're from)


![image](https://github.com/tldraw/tldraw/assets/1489520/0349252d-e8bc-406b-bf47-636da424ebe0)


### Change Type

- [x] `docs` — Changes to the documentation, examples, or templates.
- [x] `improvement` — Improving existing features

apps/docs/components/mdx-components/api-docs.tsx

@@ -1,4 +1,5 @@
 import classNames from 'classnames'
+import Link from 'next/link'
 import { ReactNode } from 'react'
 import { Icon } from '../Icon'
 
@@ -35,32 +36,56 @@ export function TitleWithSourceLink({
 	source,
 	large,
 	tags,
+	inherited,
 }: {
 	children: ReactNode
 	source?: string | null
 	large?: boolean
 	tags?: string[]
+	inherited?: { name: string; link: string }
 }) {
 	return (
-		<div
-			className={classNames(
-				'article__title-with-source-link',
-				large && 'article__title-with-source-link--large'
-			)}
-		>
-			{children}
-			<div className="article__title-with-source-link__meta">
-				{tags?.map((tag) => <Tag key={tag}>{tag}</Tag>)}
-				{source && (
-					<a href={source} target="_blank" rel="noopener noreferrer" title="Source code">
-						<Icon icon="code" />
-					</a>
+		<>
+			<div
+				className={classNames(
+					'article__title-with-source-link',
+					large && 'article__title-with-source-link--large'
 				)}
+			>
+				{children}
+				<div className="article__title-with-source-link__meta">
+					{tags?.map((tag) => (
+						<Tag key={tag} tag={tag}>
+							{tag}
+						</Tag>
+					))}
+					{source && (
+						<a
+							href={source}
+							target="_blank"
+							rel="noopener noreferrer"
+							title="Source code"
+							className="article__title-with-source-link__source"
+						>
+							<Icon icon="code" />
+						</a>
+					)}
+				</div>
 			</div>
-		</div>
+			{inherited && (
+				<div className="article__title-with-source-link__from">
+					from{' '}
+					<code className="hljs">
+						<Link href={inherited.link} className="code-link">
+							{inherited.name}
+						</Link>
+					</code>
+				</div>
+			)}
+		</>
 	)
 }
 
-export function Tag({ children }: { children: string }) {
-	return <span className={classNames(`article__tag`, `article__tag--${children}`)}>{children}</span>
+export function Tag({ children, tag }: { children: ReactNode; tag: string }) {
+	return <span className={classNames(`article__tag`, `article__tag--${tag}`)}>{children}</span>
 }