New editor homepage demo

apps/docs/app/(diffs)/_components/WorkerPoolContext.tsx

@@ -60,6 +60,7 @@ const HighlighterOptions: WorkerInitializationRenderOptions = {
     'cpp',
     'css',
     'go',
+    'markdown',
     'python',
     'rust',
     'sh',

apps/docs/app/(diffs)/_examples/ArbitraryFiles/ArbitraryFiles.tsx

@@ -21,16 +21,15 @@ export function ArbitraryFiles({ prerenderedDiff }: ArbitraryFilesProps) {
         title="Diff arbitrary files"
         description={
           <>
-            In addition to rendering standard Git diffs and patches, you can
-            pass any two files in <code>@pierre/diffs</code> and get a diff
-            between them. This is especially useful when comparing across
+            You can also pass any two files in <code>@pierre/diffs</code> to
+            diff them. This is especially useful when comparing across
             generative snapshots where linear history isn't always available.
-            Edit the css below to see the diff.
+            Edit the CSS files below to see the diff.
           </>
         }
       />
 
-      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+      <div className="flex flex-col gap-4">
         <div className="relative">
           <FileLabel>before.css</FileLabel>
           <FileTextarea
@@ -54,7 +53,7 @@ export function ArbitraryFiles({ prerenderedDiff }: ArbitraryFilesProps) {
         {...prerenderedDiff}
         oldFile={oldFile}
         newFile={newFile}
-        className="diff-container"
+        className="diff-container min-h-80"
       />
     </div>
   );
@@ -84,7 +83,7 @@ function FileTextarea({ value, onChange, className = '' }: FileTextareaProps) {
     <textarea
       value={value}
       onChange={onChange}
-      className={`bg-muted h-40 w-full resize-none rounded-lg border px-4 pt-10 font-mono text-sm ${className}`}
+      className={`bg-muted field-sizing-content min-h-40 w-full resize-none rounded-lg border px-4 pt-10 font-mono text-sm ${className}`}
       spellCheck={false}
     />
   );

apps/docs/app/(diffs)/_examples/ArbitraryFiles/constants.ts

@@ -9,13 +9,23 @@ export const ARBITRARY_DIFF_EXAMPLE: PreloadMultiFileDiffOptions<undefined> = {
     contents: `.pizza {
   display: flex;
   justify-content: center;
+  align-items: center;
+  gap: 8px;
+  padding: 12px;
+  border-radius: 8px;
+  background: #fff;
 }
 `,
   },
   newFile: {
     name: 'example.css',
     contents: `.pizza {
   display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px;
+  border-radius: 12px;
+  background: var(--surface);
 }
 `,
   },

apps/docs/app/(diffs)/_examples/CustomHeader/CustomHeader.tsx

@@ -41,8 +41,10 @@ export function CustomHeader({ prerenderedDiff }: CustomHeaderProps) {
         title="Custom headers"
         description={
           <>
-            Switch between lightweight header metadata and a fully custom header
-            rendered inside the built-in <code>data-diffs-header</code> shell.
+            Customize your <code>File</code> or <code>FileDiff</code> headers
+            with two options: inserting additional header metadata, or a fully
+            custom header rendered inside the built-in{' '}
+            <code>data-diffs-header</code> shell.
           </>
         }
       />

apps/docs/app/(diffs)/_examples/CustomHeader/constants.ts

@@ -49,16 +49,12 @@ struct AppConfig {
         self.enableLogging = true
     }
 
-    func headers(token: String? = nil) -> [String: String] {
-        var headers = [
+    func headers() -> [String: String] {
+        return [
             "Content-Type": "application/json",
             "Accept": "application/json",
             "X-API-Version": "2.0"
         ]
-        if let token = token {
-            headers["Authorization"] = "Bearer \\(token)"
-        }
-        return headers
     }
 }
 `,
@@ -70,7 +66,7 @@ export const CUSTOM_HEADER_EXAMPLE: PreloadMultiFileDiffOptions<undefined> = {
   options: {
     theme: DEFAULT_THEMES,
     themeType: 'dark',
-    diffStyle: 'split',
+    diffStyle: 'unified',
     disableBackground: false,
     unsafeCSS: CustomScrollbarCSS,
   },

apps/docs/app/(diffs)/_examples/ShikiThemes/constants.ts

@@ -37,7 +37,7 @@ fn add(a: i32, b: i32) -> i32 {
 `,
   },
   options: {
-    diffStyle: 'split',
+    diffStyle: 'unified',
     theme: DEFAULT_THEMES,
     unsafeCSS: CustomScrollbarCSS,
     enableLineSelection: true,

apps/docs/app/(diffs)/_examples/TokenHover/constants.ts

@@ -11,9 +11,8 @@ export const TOKEN_HOVER_EXAMPLE: PreloadMultiFileDiffOptions<undefined> = {
   flex-direction: column;
   flex-wrap: wrap;
   gap: 1rem;
-  padding: 2rem 1.5rem;
   max-width: 960px;
-  margin: 0 auto;
+  margin-inline: auto;
 }
 
 .card-grid .card {
@@ -24,14 +23,6 @@ export const TOKEN_HOVER_EXAMPLE: PreloadMultiFileDiffOptions<undefined> = {
   background-color: var(--color-surface);
   border-radius: 8px;
   border: 1px solid transparent;
-  transition: box-shadow 0.2s, border-color 0.2s;
-  cursor: pointer;
-}
-
-.card-grid .card h3 {
-  font-size: 1rem;
-  line-height: 1.4;
-  margin: 0;
 }
 
 .card-grid .card:hover {
@@ -60,10 +51,8 @@ export const TOKEN_HOVER_EXAMPLE: PreloadMultiFileDiffOptions<undefined> = {
     display: grid;
     grid-template-columns: 1fr;
     gap: 1rem;
-    padding-block: 2rem;
-    padding-inline: 1.5rem;
     max-width: 960px;
-    margin: 0 auto;
+    margin-inline: auto;
     margin-trim: in-flow;
   }
 
@@ -75,8 +64,6 @@ export const TOKEN_HOVER_EXAMPLE: PreloadMultiFileDiffOptions<undefined> = {
     background-color: var(--color-surface);
     border-radius: 8px;
     border: 1px solid transparent;
-    transition: box-shadow 0.2s, border-color 0.2s;
-    cursor: pointer;
 
     &:hover {
       border: 1px solid var(--color-border);
@@ -86,15 +73,6 @@ export const TOKEN_HOVER_EXAMPLE: PreloadMultiFileDiffOptions<undefined> = {
     &:focus-visible {
       outline: 2px solid var(--color-accent);
     }
-
-    h3 {
-      font-size: 1rem;
-      line-height: 1.4;
-      margin: 0;
-      text-wrap: balance;
-      text-box-trim: trim-start;
-      text-box-edge: cap alphabetic;
-    }
   }
 
   @container cards (min-width: 640px) {

apps/docs/app/(diffs)/_home/AgentDemoSection.tsx

@@ -0,0 +1,37 @@
+import { AgentUi } from './AgentUi';
+import { FeatureHeader } from '@/components/FeatureHeader';
+
+interface AgentDemoSectionProps {
+  // Server-rendered, already-highlighted diff HTML keyed by file path. Built in
+  // Home.tsx so the embedded card paints highlighted on first load and hydrates
+  // without an SSR/client mismatch.
+  prerenderedDiffs: Record<string, string>;
+}
+
+// Homepage embed of the agent-review surface: a single-file, diff-only card.
+// Always dark (the snapshot is prerendered dark and matching it avoids theme
+// flashing), so there's no light/dark toggle. It reuses the homepage's shared
+// worker pool for highlighting.
+export function AgentDemoSection({ prerenderedDiffs }: AgentDemoSectionProps) {
+  return (
+    <div className="space-y-5">
+      <FeatureHeader
+        id="edit"
+        isBeta
+        title="Edit diffs and code"
+        description={
+          <>
+            Enable edit mode in any <code>File</code> or <code>FileDiff</code>{' '}
+            component with the <code>EditorProvider</code>. Includes support for
+            selection management, auto-indention, undo history, find-in-file,
+            lint markers, and more. Pairs nicely with <code>@pierre/trees</code>{' '}
+            for <abbr title="Agentic User Interface">AUI</abbr> style
+            experiences.
+          </>
+        }
+      />
+
+      <AgentUi prerenderedDiffs={prerenderedDiffs} />
+    </div>
+  );
+}