diff --git a/src/components/lexical/Callout.tsx b/src/components/lexical/Callout.tsx
new file mode 100644
index 0000000..c48d6a9
--- /dev/null
+++ b/src/components/lexical/Callout.tsx
@@ -0,0 +1,22 @@
+// src/components/lexical/Callout.tsx
+import type { ReactNode } from 'react'
+
+export function Callout({
+  title,
+  variant = 'default',
+  children,
+}: {
+  title?: string
+  variant?: 'default' | 'note' | 'warning' | 'tip'
+  children: ReactNode
+}) {
+  return (
+    <aside
+      className={`border-hair border-l-2 pl-4 my-6 callout callout-${variant}`}
+      role="note"
+    >
+      {title && <div className="font-mono text-[11px] tracking-widest uppercase text-ink-3 mb-2">{title}</div>}
+      <div>{children}</div>
+    </aside>
+  )
+}
diff --git a/src/components/lexical/LinkPreviewCard.tsx b/src/components/lexical/LinkPreviewCard.tsx
new file mode 100644
index 0000000..6b92cf3
--- /dev/null
+++ b/src/components/lexical/LinkPreviewCard.tsx
@@ -0,0 +1,34 @@
+// src/components/lexical/LinkPreviewCard.tsx
+import Image from 'next/image'
+
+export function LinkPreviewCard({
+  url,
+  title,
+  description,
+  imageUrl,
+}: {
+  url: string
+  title?: string
+  description?: string
+  imageUrl?: string
+}) {
+  let host = url
+  try { host = new URL(url).host } catch {}
+  return (
+    <a
+      href={url}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="border-hair grid grid-cols-[1fr_auto] items-center gap-4 border p-4 my-6 no-underline hover:border-ink"
+    >
+      <div className="min-w-0">
+        <div className="text-ink-3 font-mono text-[10.5px] tracking-widest uppercase mb-1">{host}</div>
+        {title && <div className="text-ink font-serif text-[18px] leading-tight">{title}</div>}
+        {description && <div className="text-ink-2 text-[14px] mt-1 line-clamp-2">{description}</div>}
+      </div>
+      {imageUrl && (
+        <Image src={imageUrl} alt="" width={64} height={64} className="object-cover" />
+      )}
+    </a>
+  )
+}
diff --git a/src/components/lexical/PostImage.tsx b/src/components/lexical/PostImage.tsx
new file mode 100644
index 0000000..7a0d245
--- /dev/null
+++ b/src/components/lexical/PostImage.tsx
@@ -0,0 +1,27 @@
+// src/components/lexical/PostImage.tsx
+import Image from 'next/image'
+
+const widthClass: Record<string, string> = {
+  inline: 'max-w-[24rem]',
+  wide: 'max-w-[56rem]',
+  full: '',
+}
+
+export function PostImage({
+  src,
+  alt,
+  caption,
+  widthHint = 'full',
+}: {
+  src: string
+  alt: string
+  caption?: string
+  widthHint?: 'full' | 'wide' | 'inline'
+}) {
+  return (
+    <figure className={`my-8 ${widthClass[widthHint]}`}>
+      <Image src={src} alt={alt} width={1600} height={900} className="h-auto w-full" />
+      {caption && <figcaption className="text-ink-3 text-[13px] mt-2">{caption}</figcaption>}
+    </figure>
+  )
+}