chore: cleanup pierre stuff

5 files changed, 67 insertions, 89 deletions

diff --git a/packages/enterprise/src/routes/share/[shareID].tsx b/packages/enterprise/src/routes/share/[shareID].tsx
index 42dd7e957..fd6638a5f 100644
--- a/packages/enterprise/src/routes/share/[shareID].tsx
+++ b/packages/enterprise/src/routes/share/[shareID].tsx
@@ -7,6 +7,7 @@ import { createEffect, createMemo, ErrorBoundary, For, Match, Show, Switch } fro
 import { Share } from "~/core/share"
 import { Logo, Mark } from "@opencode-ai/ui/logo"
 import { IconButton } from "@opencode-ai/ui/icon-button"
+import { createDefaultOptions } from "@opencode-ai/ui/pierre"
 import { iife } from "@opencode-ai/util/iife"
 import { Binary } from "@opencode-ai/util/binary"
 import { NamedError } from "@opencode-ai/util/error"
@@ -82,20 +83,7 @@ const getData = query(async (shareID) => {
             preloadMultiFileDiff<any>({
               oldFile: { name: diff.file, contents: diff.before },
               newFile: { name: diff.file, contents: diff.after },
-              options: {
-                theme: "OpenCode",
-                themeType: "system",
-                disableLineNumbers: false,
-                overflow: "wrap",
-                diffStyle: "unified",
-                diffIndicators: "bars",
-                disableBackground: false,
-                expansionLineCount: 20,
-                lineDiffType: "none",
-                maxLineDiffLength: 1000,
-                maxLineLengthForHighlighting: 1000,
-                disableFileHeader: true,
-              },
+              options: createDefaultOptions("unified"),
               // annotations,
             }),
           ),
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 2c06c6da0..eb126a6fa 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -4,6 +4,7 @@
   "type": "module",
   "exports": {
     "./*": "./src/components/*.tsx",
+    "./pierre": "./src/components/pierre.ts",
     "./hooks": "./src/hooks/index.ts",
     "./context": "./src/context/index.ts",
     "./context/*": "./src/context/*.tsx",
diff --git a/packages/ui/src/components/code.tsx b/packages/ui/src/components/code.tsx
index a301e34c7..788baf549 100644
--- a/packages/ui/src/components/code.tsx
+++ b/packages/ui/src/components/code.tsx
@@ -1,5 +1,6 @@
 import { type FileContents, File, FileOptions, LineAnnotation } from "@pierre/precision-diffs"
 import { ComponentProps, createEffect, splitProps } from "solid-js"
+import { createDefaultOptions, styleVariables } from "./pierre"
 
 export type CodeProps<T = {}> = FileOptions<T> & {
   file: FileContents
@@ -14,12 +15,7 @@ export function Code<T>(props: CodeProps<T>) {
 
   createEffect(() => {
     const instance = new File<T>({
-      theme: "OpenCode",
-      overflow: "wrap", // or 'scroll'
-      themeType: "system", // 'system', 'light', or 'dark'
-      disableFileHeader: true,
-      disableLineNumbers: false, // optional
-      // lang: 'typescript', // optional - auto-detected from filename if not provided
+      ...createDefaultOptions<T>("unified"),
       ...others,
     })
 
@@ -34,16 +30,7 @@ export function Code<T>(props: CodeProps<T>) {
   return (
     <div
       data-component="code"
-      style={{
-        "--pjs-font-family": "var(--font-family-mono)",
-        "--pjs-font-size": "var(--font-size-small)",
-        "--pjs-line-height": "24px",
-        "--pjs-tab-size": 2,
-        "--pjs-font-features": "var(--font-family-mono--font-feature-settings)",
-        "--pjs-header-font-family": "var(--font-family-sans)",
-        "--pjs-gap-block": 0,
-        "--pjs-min-number-column-width": "4ch",
-      }}
+      style={styleVariables}
       classList={{
         ...(local.classList || {}),
         [local.class ?? ""]: !!local.class,
diff --git a/packages/ui/src/components/diff.tsx b/packages/ui/src/components/diff.tsx
index 344ce3c8e..c895a6e29 100644
--- a/packages/ui/src/components/diff.tsx
+++ b/packages/ui/src/components/diff.tsx
@@ -1,7 +1,8 @@
 import { type FileContents, FileDiff, type DiffLineAnnotation, FileDiffOptions } from "@pierre/precision-diffs"
 import { PreloadMultiFileDiffResult } from "@pierre/precision-diffs/ssr"
-import { ComponentProps, createEffect, onCleanup, onMount, splitProps } from "solid-js"
+import { ComponentProps, createEffect, onCleanup, onMount, Show, splitProps } from "solid-js"
 import { isServer } from "solid-js/web"
+import { createDefaultOptions, styleVariables } from "./pierre"
 
 export type DiffProps<T = {}> = FileDiffOptions<T> & {
   preloadedDiff?: PreloadMultiFileDiffResult<T>
@@ -15,6 +16,8 @@ export type DiffProps<T = {}> = FileDiffOptions<T> & {
 // interface ThreadMetadata {
 //   threadId: string
 // }
+//
+//
 
 export function Diff<T>(props: DiffProps<T>) {
   let container!: HTMLDivElement
@@ -24,27 +27,12 @@ export function Diff<T>(props: DiffProps<T>) {
   let fileDiffInstance: FileDiff<T> | undefined
   const cleanupFunctions: Array<() => void> = []
 
-  const defaultOptions: FileDiffOptions<T> = {
-    theme: "OpenCode",
-    themeType: "system",
-    disableLineNumbers: false,
-    overflow: "wrap",
-    diffStyle: "unified",
-    diffIndicators: "bars",
-    disableBackground: false,
-    expansionLineCount: 20,
-    lineDiffType: props.diffStyle === "split" ? "word-alt" : "none",
-    maxLineDiffLength: 1000,
-    maxLineLengthForHighlighting: 1000,
-    disableFileHeader: true,
-  }
-
   createEffect(() => {
     if (props.preloadedDiff) return
     container.innerHTML = ""
     if (!fileDiffInstance) {
       fileDiffInstance = new FileDiff<T>({
-        ...defaultOptions,
+        ...createDefaultOptions(props.diffStyle),
         ...others,
         ...(props.preloadedDiff ?? {}),
       })
@@ -60,22 +48,19 @@ export function Diff<T>(props: DiffProps<T>) {
   onMount(() => {
     if (isServer) return
     fileDiffInstance = new FileDiff<T>({
-      ...defaultOptions,
-      // You can optionally pass a render function for rendering out line
-      // annotations.  Just return the dom node to render
-      // renderAnnotation(annotation: DiffLineAnnotation<T>): HTMLElement {
-      //   // Despite the diff itself being rendered in the shadow dom,
-      //   // annotations are inserted via the web components 'slots' api and you
-      //   // can use all your normal normal css and styling for them
-      //   const element = document.createElement("div")
-      //   element.innerText = annotation.metadata.threadId
-      //   return element
-      // },
+      ...createDefaultOptions(props.diffStyle),
       ...others,
       ...(props.preloadedDiff ?? {}),
     })
     // @ts-expect-error - fileContainer is private but needed for SSR hydration
     fileDiffInstance.fileContainer = fileDiffRef
+    fileDiffInstance.hydrate({
+      oldFile: local.before,
+      newFile: local.after,
+      lineAnnotations: local.annotations,
+      fileContainer: fileDiffRef,
+      containerWrapper: container,
+    })
 
     // Hydrate annotation slots with interactive SolidJS components
     // if (props.annotations.length > 0 && props.renderAnnotation != null) {
@@ -108,38 +93,11 @@ export function Diff<T>(props: DiffProps<T>) {
   })
 
   return (
-    <div
-      data-component="diff"
-      style={{
-        "--pjs-font-family": "var(--font-family-mono)",
-        "--pjs-font-size": "var(--font-size-small)",
-        "--pjs-line-height": "24px",
-        "--pjs-tab-size": 2,
-        "--pjs-font-features": "var(--font-family-mono--font-feature-settings)",
-        "--pjs-header-font-family": "var(--font-family-sans)",
-        "--pjs-gap-block": 0,
-        "--pjs-min-number-column-width": "4ch",
-      }}
-      ref={container}
-    >
+    <div data-component="diff" style={styleVariables} ref={container}>
       <file-diff ref={fileDiffRef} id="ssr-diff">
-        {/* Only render on server - client hydrates the existing content */}
-        {isServer && props.preloadedDiff && (
-          <>
-            {/* Declarative Shadow DOM - browsers parse this and create a shadow root */}
-            <template shadowrootmode="open">
-              <div innerHTML={props.preloadedDiff!.prerenderedHTML} />
-            </template>
-            {/* Render static annotation slots on server.
-                Client will clear these and mount interactive components. */}
-            {/* <For each={props.annotations}> */}
-            {/*   {(annotation) => { */}
-            {/*     const slotName = `annotation-${annotation.side}-${annotation.lineNumber}` */}
-            {/*     return <div slot={slotName}>{props.renderAnnotation?.(annotation)}</div> */}
-            {/*   }} */}
-            {/* </For> */}
-          </>
-        )}
+        <Show when={isServer && props.preloadedDiff}>
+          {(preloadedDiff) => <template shadowrootmode="open" innerHTML={preloadedDiff().prerenderedHTML} />}
+        </Show>
       </file-diff>
     </div>
   )
diff --git a/packages/ui/src/components/pierre.ts b/packages/ui/src/components/pierre.ts
new file mode 100644
index 000000000..fc49a11d1
--- /dev/null
+++ b/packages/ui/src/components/pierre.ts
@@ -0,0 +1,44 @@
+import { FileDiffOptions } from "@pierre/precision-diffs"
+
+export function createDefaultOptions<T>(style: FileDiffOptions<T>["diffStyle"]) {
+  return {
+    theme: "OpenCode",
+    themeType: "system",
+    disableLineNumbers: false,
+    overflow: "wrap",
+    diffStyle: style,
+    diffIndicators: "bars",
+    disableBackground: false,
+    expansionLineCount: 20,
+    lineDiffType: style === "split" ? "word-alt" : "none",
+    maxLineDiffLength: 1000,
+    maxLineLengthForHighlighting: 1000,
+    disableFileHeader: true,
+    // hunkSeparators(hunkData: HunkData) {
+    //   const fragment = document.createDocumentFragment()
+    //   const numCol = document.createElement("div")
+    //   numCol.innerHTML = `<svg data-slot="diff-hunk-separator-line-number-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.97978 14.0204L8.62623 13.6668L9.33334 12.9597L9.68689 13.3133L9.33333 13.6668L8.97978 14.0204ZM12 16.3335L12.3535 16.6871L12 17.0406L11.6464 16.687L12 16.3335ZM14.3131 13.3133L14.6667 12.9597L15.3738 13.6668L15.0202 14.0204L14.6667 13.6668L14.3131 13.3133ZM12.5 16.0002V16.5002H11.5V16.0002H12H12.5ZM9.33333 13.6668L9.68689 13.3133L12.3535 15.9799L12 16.3335L11.6464 16.687L8.97978 14.0204L9.33333 13.6668ZM12 16.3335L11.6464 15.9799L14.3131 13.3133L14.6667 13.6668L15.0202 14.0204L12.3535 16.6871L12 16.3335ZM6.5 8.00016V7.50016H8.5V8.00016V8.50016H6.5V8.00016ZM9.5 8.00016V7.50016H11.5V8.00016V8.50016H9.5V8.00016ZM12.5 8.00016V7.50016H14.5V8.00016V8.50016H12.5V8.00016ZM15.5 8.00016V7.50016H17.5V8.00016V8.50016H15.5V8.00016ZM12 10.5002H12.5V16.0002H12H11.5V10.5002H12Z" fill="currentColor"/></svg> `
+    //   numCol.dataset["slot"] = "diff-hunk-separator-line-number"
+    //   fragment.appendChild(numCol)
+    //   const contentCol = document.createElement("div")
+    //   contentCol.dataset["slot"] = "diff-hunk-separator-content"
+    //   const span = document.createElement("span")
+    //   span.dataset["slot"] = "diff-hunk-separator-content-span"
+    //   span.textContent = `${hunkData.lines} unmodified lines`
+    //   contentCol.appendChild(span)
+    //   fragment.appendChild(contentCol)
+    //   return fragment
+    // },
+  } as const
+}
+
+export const styleVariables = {
+  "--pjs-font-family": "var(--font-family-mono)",
+  "--pjs-font-size": "var(--font-size-small)",
+  "--pjs-line-height": "24px",
+  "--pjs-tab-size": 2,
+  "--pjs-font-features": "var(--font-family-mono--font-feature-settings)",
+  "--pjs-header-font-family": "var(--font-family-sans)",
+  "--pjs-gap-block": 0,
+  "--pjs-min-number-column-width": "4ch",
+}