wip: desktop work

packages/ui/src/components/code.css

@@ -0,0 +1,3 @@
+[data-component="code"] {
+  overflow: hidden;
+}

packages/ui/src/components/code.tsx

@@ -0,0 +1,52 @@
+import { type FileContents, File, FileOptions, LineAnnotation } from "@pierre/precision-diffs"
+import { ComponentProps, createEffect, splitProps } from "solid-js"
+
+export type CodeProps<T = {}> = FileOptions<T> & {
+  file: FileContents
+  annotations?: LineAnnotation<T>[]
+  class?: string
+  classList?: ComponentProps<"div">["classList"]
+}
+
+export function Code<T>(props: CodeProps<T>) {
+  let container!: HTMLDivElement
+  const [local, others] = splitProps(props, ["file", "class", "classList", "annotations"])
+  const file = () => local.file
+
+  createEffect(() => {
+    const instance = new File<T>({
+      theme: { dark: "oc-1-dark", light: "oc-1-light" }, // or any Shiki theme
+      overflow: "wrap", // or 'scroll'
+      themeType: "system", // 'system', 'light', or 'dark'
+      disableLineNumbers: false, // optional
+      // lang: 'typescript', // optional - auto-detected from filename if not provided
+      ...others,
+    })
+
+    instance.render({
+      file: file(),
+      lineAnnotations: local.annotations,
+      containerWrapper: container,
+    })
+  })
+
+  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,
+      }}
+      classList={{
+        ...(local.classList || {}),
+        [local.class ?? ""]: !!local.class,
+      }}
+      ref={container}
+    />
+  )
+}

packages/ui/src/components/index.ts

@@ -2,6 +2,7 @@ export * from "./accordion"
 export * from "./button"
 export * from "./card"
 export * from "./checkbox"
+export * from "./code"
 export * from "./collapsible"
 export * from "./dialog"
 export * from "./diff"

packages/ui/src/styles/index.css

@@ -10,6 +10,7 @@
 @import "../components/button.css" layer(components);
 @import "../components/card.css" layer(components);
 @import "../components/checkbox.css" layer(components);
+@import "../components/code.css" layer(components);
 @import "../components/diff.css" layer(components);
 @import "../components/diff-changes.css" layer(components);
 @import "../components/collapsible.css" layer(components);