@opencode/ui 2.1.2 → 2.1.4

package/dist/context/highlight-theme.d.ts

@@ -0,0 +1,68 @@
+export declare const OpenCodeTheme: {
+    name: string;
+    appearance: "dark";
+    cssVariables: {
+        prefix: string;
+    };
+    style: {
+        "editor.background": string;
+        "editor.foreground": string;
+        created: string;
+        deleted: string;
+        modified: string;
+        syntax: {
+            attribute: string;
+            background: string;
+            boolean: string;
+            comment: string;
+            constant: string;
+            constructor: string;
+            "diff.minus": string;
+            "diff.plus": string;
+            embedded: string;
+            emphasis: string;
+            enum: string;
+            foreground: string;
+            function: string;
+            hint: string;
+            keyword: string;
+            "keyword.operator": string;
+            label: string;
+            link_text: string;
+            link_uri: string;
+            namespace: string;
+            number: string;
+            operator: string;
+            predictive: {
+                color: string;
+                font_style: "italic";
+            };
+            preproc: string;
+            primary: string;
+            property: string;
+            punctuation: string;
+            "punctuation.special": string;
+            selector: string;
+            "selector.class": string;
+            "selector.id": string;
+            "selector.pseudo": string;
+            string: string;
+            "string.escape": string;
+            "string.regex": string;
+            "string.special": string;
+            tag: string;
+            "tag.component.jsx": string;
+            text: string;
+            "text.literal": string;
+            title: {
+                color: string;
+                font_weight: 700;
+            };
+            type: string;
+            variable: string;
+            "variable.parameter": string;
+            "variable.special": string;
+            variant: string;
+        };
+    };
+};

package/dist/context/marked-parser.d.ts

@@ -1,3 +1,3 @@
 import type { MarkedExtension } from "marked";
-export declare function createMarkdownParser(highlight: (code: string, language: string) => string | Promise<string>): import("marked").Marked<string, string>;
+export declare function createMarkdownParser(): import("marked").Marked<string, string>;
 export declare const markdownMath: MarkedExtension;

package/dist/theme/context.d.ts

@@ -1,21 +1,24 @@
 import type { DesktopTheme } from "./types";
 export type ColorScheme = "light" | "dark" | "system";
-export declare const useTheme: () => {
-    themeId: () => string;
-    colorScheme: () => ColorScheme;
-    mode: () => "dark" | "light";
-    ids: () => string[];
-    name: (id: string) => string;
-    loadThemes: () => Promise<Record<string, DesktopTheme>>;
-    themes: () => Record<string, DesktopTheme>;
-    setTheme: (id: string) => void;
-    setColorScheme: (scheme: ColorScheme) => void;
-    registerTheme: (theme: DesktopTheme) => void;
-    previewTheme: (id: string) => void;
-    previewColorScheme: (scheme: ColorScheme) => void;
-    commitPreview: () => void;
-    cancelPreview: () => void;
-}, ThemeProvider: (props: import("solid-js").ParentProps<{
-    defaultTheme?: string;
-    onThemeApplied?: (theme: DesktopTheme, mode: "light" | "dark", scheme: ColorScheme) => void;
-}>) => import("solid-js").JSX.Element;
+export declare const { use: useTheme, provider: ThemeProvider }: {
+    provider: (props: import("solid-js").ParentProps<{
+        defaultTheme?: string;
+        onThemeApplied?: (theme: DesktopTheme, mode: "light" | "dark", scheme: ColorScheme) => void;
+    }>) => import("solid-js").JSX.Element;
+    use(): {
+        themeId: () => string;
+        colorScheme: () => ColorScheme;
+        mode: () => "dark" | "light";
+        ids: () => string[];
+        name: (id: string) => string;
+        loadThemes: () => Promise<Record<string, DesktopTheme>>;
+        themes: () => Record<string, DesktopTheme>;
+        setTheme: (id: string) => void;
+        setColorScheme: (scheme: ColorScheme) => void;
+        registerTheme: (theme: DesktopTheme) => void;
+        previewTheme: (id: string) => void;
+        previewColorScheme: (scheme: ColorScheme) => void;
+        commitPreview: () => void;
+        cancelPreview: () => void;
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode/ui",
-  "version": "2.1.2",
+  "version": "2.1.4",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -226,7 +226,8 @@
   },
   "scripts": {
     "build": "rm -rf dist && tsc -p tsconfig.build.json",
-    "typecheck": "tsc --noEmit",
+    "typecheck": "bun check --no-script",
+    "typecheck:tsc": "tsc --noEmit",
     "test": "bun test src --only-failures",
     "dev": "vite",
     "generate:tailwind": "bun run script/tailwind.ts",
@@ -235,8 +236,8 @@
   "devDependencies": {
     "@solidjs/meta": "0.29.4",
     "@tsconfig/node22": "22.0.2",
-    "@types/bun": "1.4.0",
-    "@typescript/native": "npm:typescript@7.0.2",
+    "@types/bun": "1.4.3",
+    "@typescript/native": "npm:typescript@7.1.0-beta",
     "solid-js": "1.9.15",
     "tailwindcss": "4.1.11",
     "typescript": "npm:@typescript/typescript6@6.0.2",
@@ -247,16 +248,15 @@
   "dependencies": {
     "@kitlangton/solid-motion": "0.2.2",
     "@kobalte/core": "0.13.13",
-    "@pierre/diffs": "1.5.1",
+    "@pierre/diffs": "1.6.1",
+    "@pierre/highlights": "0.2.0",
     "@solid-primitives/event-listener": "2.4.6",
     "@solid-primitives/resize-observer": "2.2.0",
     "fuzzysort": "3.1.0",
     "katex": "0.16.47",
     "marked": "18.0.11",
-    "marked-shiki": "1.2.1",
     "motion": "12.34.5",
     "remeda": "2.26.0",
-    "shiki": "4.4.3",
     "solid-list": "0.3.0",
     "solid-sonner": "0.3.1"
   },

package/src/context/highlight-theme.tsx

@@ -0,0 +1,66 @@
+import type { Theme } from "@pierre/highlights"
+
+// A Highlights palette: each value names an app CSS variable without its `--`, so code follows the active app theme.
+// Token types are grouped as in Pierre's own `pierre-dark` theme (for example, properties share the variable colour
+// and all punctuation is one muted colour); each group uses the app syntax role with the same meaning.
+// Token names fall back to their parent scope, so `keyword.control` uses `keyword`.
+export const OpenCodeTheme = {
+  name: "OpenCode",
+  appearance: "dark",
+  cssVariables: { prefix: "--" },
+  style: {
+    "editor.background": "color-background-stronger",
+    "editor.foreground": "text-base",
+    created: "syntax-diff-add",
+    deleted: "syntax-diff-delete",
+    modified: "syntax-diff-unknown",
+    syntax: {
+      attribute: "syntax-property",
+      background: "color-background-stronger",
+      boolean: "syntax-constant",
+      comment: "syntax-comment",
+      constant: "syntax-constant",
+      constructor: "syntax-type",
+      "diff.minus": "syntax-diff-delete",
+      "diff.plus": "syntax-diff-add",
+      embedded: "text-base",
+      emphasis: "text-base",
+      enum: "syntax-type",
+      foreground: "text-base",
+      function: "syntax-primitive",
+      hint: "syntax-comment",
+      keyword: "syntax-keyword",
+      "keyword.operator": "syntax-operator",
+      label: "syntax-constant",
+      link_text: "syntax-info",
+      link_uri: "syntax-keyword",
+      namespace: "syntax-constant",
+      number: "syntax-constant",
+      operator: "syntax-operator",
+      predictive: { color: "syntax-comment", font_style: "italic" },
+      preproc: "syntax-keyword",
+      primary: "syntax-info",
+      property: "syntax-variable",
+      punctuation: "syntax-punctuation",
+      "punctuation.special": "syntax-keyword",
+      selector: "syntax-keyword",
+      "selector.class": "syntax-property",
+      "selector.id": "syntax-primitive",
+      "selector.pseudo": "syntax-operator",
+      string: "syntax-string",
+      "string.escape": "syntax-constant",
+      "string.regex": "syntax-regexp",
+      "string.special": "syntax-constant",
+      tag: "syntax-keyword",
+      "tag.component.jsx": "syntax-type",
+      text: "text-base",
+      "text.literal": "syntax-string",
+      title: { color: "syntax-keyword", font_weight: 700 },
+      type: "syntax-type",
+      variable: "syntax-variable",
+      "variable.parameter": "text-base",
+      "variable.special": "syntax-constant",
+      variant: "syntax-constant",
+    },
+  },
+} satisfies Theme

package/src/context/marked-parser.tsx

@@ -1,10 +1,28 @@
+import { codeToHtml, isSupportedLanguage } from "@pierre/highlights"
 import katex from "katex"
 import type { MarkedExtension, Tokens } from "marked"
-import markedShiki from "marked-shiki"
 import { createMarkdownBase } from "./marked-base"
+import { OpenCodeTheme } from "./highlight-theme"
 
-export function createMarkdownParser(highlight: (code: string, language: string) => string | Promise<string>) {
-  return createMarkdownBase().use(markdownMath, markedShiki({ highlight }))
+export function createMarkdownParser() {
+  return createMarkdownBase().use(markdownMath, markdownCode)
+}
+
+const decoder = new TextDecoder()
+
+// The class keeps the fence's own language, even one without a lexer, so the viewer can label it and render Mermaid.
+const markdownCode: MarkedExtension = {
+  renderer: {
+    code(token) {
+      const language = (token.lang?.match(/^\S*/)?.[0] ?? "").toLowerCase().replace(/[^\w#+.-]/g, "") || "text"
+
+      const html = decoder.decode(
+        codeToHtml(token.text, { lang: isSupportedLanguage(language) ? language : "text", theme: OpenCodeTheme }),
+      )
+
+      return html.replace("<code>", `<code class="language-${language}">`) + "\n"
+    },
+  },
 }
 
 // `$$...$$` renders as display math anywhere in a line.

package/dist/context/marked-theme-register.d.ts

@@ -1 +0,0 @@
-export declare function registerOpenCodeTheme(): void;

package/dist/context/marked-theme.d.ts

@@ -1,2 +0,0 @@
-import type { ThemeRegistrationResolved } from "@pierre/diffs";
-export declare const OpenCodeTheme: ThemeRegistrationResolved;

package/dist/context/marked.d.ts

@@ -1,2 +0,0 @@
-export { OpenCodeTheme } from "./marked-theme";
-export declare const useMarked: () => import("marked").Marked<string, string>, MarkedProvider: (props: import("solid-js").ParentProps<Record<string, any>>) => import("solid-js").JSX.Element;

package/src/context/marked-theme-register.tsx

@@ -1,10 +0,0 @@
-import { registerCustomTheme } from "@pierre/diffs"
-import { OpenCodeTheme } from "./marked-theme"
-
-let registered = false
-
-export function registerOpenCodeTheme() {
-  if (registered) return
-  registered = true
-  registerCustomTheme("OpenCode", () => Promise.resolve(OpenCodeTheme))
-}

package/src/context/marked-theme.tsx

@@ -1,372 +0,0 @@
-import type { ThemeRegistrationResolved } from "@pierre/diffs"
-
-export const OpenCodeTheme = {
-  name: "OpenCode",
-  bg: "var(--color-background-stronger)",
-  fg: "var(--text-base)",
-  colors: {
-    "editor.background": "var(--color-background-stronger)",
-    "editor.foreground": "var(--text-base)",
-    "gitDecoration.addedResourceForeground": "var(--syntax-diff-add)",
-    "gitDecoration.deletedResourceForeground": "var(--syntax-diff-delete)",
-    "gitDecoration.modifiedResourceForeground": "var(--syntax-diff-unknown)",
-    // "gitDecoration.conflictingResourceForeground": "#ffca00",
-    // "gitDecoration.modifiedResourceForeground": "#1a76d4",
-    // "gitDecoration.untrackedResourceForeground": "#00cab1",
-    // "gitDecoration.ignoredResourceForeground": "#84848A",
-    // "terminal.titleForeground": "#adadb1",
-    // "terminal.titleInactiveForeground": "#84848A",
-    // "terminal.background": "#141415",
-    // "terminal.foreground": "#adadb1",
-    // "terminal.ansiBlack": "#141415",
-    // "terminal.ansiRed": "#ff2e3f",
-    // "terminal.ansiGreen": "#0dbe4e",
-    // "terminal.ansiYellow": "#ffca00",
-    // "terminal.ansiBlue": "#008cff",
-    // "terminal.ansiMagenta": "#c635e4",
-    // "terminal.ansiCyan": "#08c0ef",
-    // "terminal.ansiWhite": "#c6c6c8",
-    // "terminal.ansiBrightBlack": "#141415",
-    // "terminal.ansiBrightRed": "#ff2e3f",
-    // "terminal.ansiBrightGreen": "#0dbe4e",
-    // "terminal.ansiBrightYellow": "#ffca00",
-    // "terminal.ansiBrightBlue": "#008cff",
-    // "terminal.ansiBrightMagenta": "#c635e4",
-    // "terminal.ansiBrightCyan": "#08c0ef",
-    // "terminal.ansiBrightWhite": "#c6c6c8",
-  },
-  tokenColors: [
-    {
-      scope: ["comment", "punctuation.definition.comment", "string.comment"],
-      settings: {
-        foreground: "var(--syntax-comment)",
-      },
-    },
-    {
-      scope: ["entity.other.attribute-name"],
-      settings: {
-        foreground: "var(--syntax-property)", // maybe attribute
-      },
-    },
-    {
-      scope: ["constant", "entity.name.constant", "variable.other.constant", "variable.language", "entity"],
-      settings: {
-        foreground: "var(--syntax-constant)",
-      },
-    },
-    {
-      scope: ["entity.name", "meta.export.default", "meta.definition.variable"],
-      settings: {
-        foreground: "var(--syntax-type)",
-      },
-    },
-    {
-      scope: ["meta.object.member"],
-      settings: {
-        foreground: "var(--syntax-primitive)",
-      },
-    },
-    {
-      scope: [
-        "variable.parameter.function",
-        "meta.jsx.children",
-        "meta.block",
-        "meta.tag.attributes",
-        "entity.name.constant",
-        "meta.embedded.expression",
-        "meta.template.expression",
-        "string.other.begin.yaml",
-        "string.other.end.yaml",
-      ],
-      settings: {
-        foreground: "var(--syntax-punctuation)",
-      },
-    },
-    {
-      scope: ["entity.name.function", "support.type.primitive"],
-      settings: {
-        foreground: "var(--syntax-primitive)",
-      },
-    },
-    {
-      scope: ["support.class.component"],
-      settings: {
-        foreground: "var(--syntax-type)",
-      },
-    },
-    {
-      scope: "keyword",
-      settings: {
-        foreground: "var(--syntax-keyword)",
-      },
-    },
-    {
-      scope: [
-        "keyword.operator",
-        "storage.type.function.arrow",
-        "punctuation.separator.key-value.css",
-        "entity.name.tag.yaml",
-        "punctuation.separator.key-value.mapping.yaml",
-      ],
-      settings: {
-        foreground: "var(--syntax-operator)",
-      },
-    },
-    {
-      scope: ["storage", "storage.type"],
-      settings: {
-        foreground: "var(--syntax-keyword)",
-      },
-    },
-    {
-      scope: ["storage.modifier.package", "storage.modifier.import", "storage.type.java"],
-      settings: {
-        foreground: "var(--syntax-primitive)",
-      },
-    },
-    {
-      scope: [
-        "string",
-        "punctuation.definition.string",
-        "string punctuation.section.embedded source",
-        "entity.name.tag",
-      ],
-      settings: {
-        foreground: "var(--syntax-string)",
-      },
-    },
-    {
-      scope: "support",
-      settings: {
-        foreground: "var(--syntax-primitive)",
-      },
-    },
-    {
-      scope: ["support.type.object.module", "variable.other.object", "support.type.property-name.css"],
-      settings: {
-        foreground: "var(--syntax-object)",
-      },
-    },
-    {
-      scope: "meta.property-name",
-      settings: {
-        foreground: "var(--syntax-property)",
-      },
-    },
-    {
-      scope: "variable",
-      settings: {
-        foreground: "var(--syntax-variable)",
-      },
-    },
-    {
-      scope: "variable.other",
-      settings: {
-        foreground: "var(--syntax-variable)",
-      },
-    },
-    {
-      scope: [
-        "invalid.broken",
-        "invalid.illegal",
-        "invalid.unimplemented",
-        "invalid.deprecated",
-        "message.error",
-        "markup.deleted",
-        "meta.diff.header.from-file",
-        "punctuation.definition.deleted",
-        "brackethighlighter.unmatched",
-        "token.error-token",
-      ],
-      settings: {
-        foreground: "var(--syntax-critical)",
-      },
-    },
-    {
-      scope: "carriage-return",
-      settings: {
-        foreground: "var(--syntax-keyword)",
-      },
-    },
-    {
-      scope: "string source",
-      settings: {
-        foreground: "var(--syntax-variable)",
-      },
-    },
-    {
-      scope: "string variable",
-      settings: {
-        foreground: "var(--syntax-constant)",
-      },
-    },
-    {
-      scope: [
-        "source.regexp",
-        "string.regexp",
-        "string.regexp.character-class",
-        "string.regexp constant.character.escape",
-        "string.regexp source.ruby.embedded",
-        "string.regexp string.regexp.arbitrary-repitition",
-        "string.regexp constant.character.escape",
-      ],
-      settings: {
-        foreground: "var(--syntax-regexp)",
-      },
-    },
-    {
-      scope: "support.constant",
-      settings: {
-        foreground: "var(--syntax-primitive)",
-      },
-    },
-    {
-      scope: "support.variable",
-      settings: {
-        foreground: "var(--syntax-variable)",
-      },
-    },
-    {
-      scope: "meta.module-reference",
-      settings: {
-        foreground: "var(--syntax-info)",
-      },
-    },
-    {
-      scope: "punctuation.definition.list.begin.markdown",
-      settings: {
-        foreground: "var(--syntax-punctuation)",
-      },
-    },
-    {
-      scope: ["markup.heading", "markup.heading entity.name"],
-      settings: {
-        fontStyle: "bold",
-        foreground: "var(--syntax-info)",
-      },
-    },
-    {
-      scope: "markup.quote",
-      settings: {
-        foreground: "var(--syntax-info)",
-      },
-    },
-    {
-      scope: "markup.italic",
-      settings: {
-        fontStyle: "italic",
-        // foreground: "",
-      },
-    },
-    {
-      scope: "markup.bold",
-      settings: {
-        fontStyle: "bold",
-        foreground: "var(--text-strong)",
-      },
-    },
-    {
-      scope: [
-        "markup.raw",
-        "markup.inserted",
-        "meta.diff.header.to-file",
-        "punctuation.definition.inserted",
-        "markup.changed",
-        "punctuation.definition.changed",
-        "markup.ignored",
-        "markup.untracked",
-      ],
-      settings: {
-        foreground: "var(--text-base)",
-      },
-    },
-    {
-      scope: "meta.diff.range",
-      settings: {
-        fontStyle: "bold",
-        foreground: "var(--syntax-unknown)",
-      },
-    },
-    {
-      scope: "meta.diff.header",
-      settings: {
-        foreground: "var(--syntax-unknown)",
-      },
-    },
-    {
-      scope: "meta.separator",
-      settings: {
-        fontStyle: "bold",
-        foreground: "var(--syntax-unknown)",
-      },
-    },
-    {
-      scope: "meta.output",
-      settings: {
-        foreground: "var(--syntax-unknown)",
-      },
-    },
-    {
-      scope: "meta.export.default",
-      settings: {
-        foreground: "var(--syntax-unknown)",
-      },
-    },
-    {
-      scope: [
-        "brackethighlighter.tag",
-        "brackethighlighter.curly",
-        "brackethighlighter.round",
-        "brackethighlighter.square",
-        "brackethighlighter.angle",
-        "brackethighlighter.quote",
-      ],
-      settings: {
-        foreground: "var(--syntax-unknown)",
-      },
-    },
-    {
-      scope: ["constant.other.reference.link", "string.other.link"],
-      settings: {
-        fontStyle: "underline",
-        foreground: "var(--syntax-unknown)",
-      },
-    },
-    {
-      scope: "token.info-token",
-      settings: {
-        foreground: "var(--syntax-info)",
-      },
-    },
-    {
-      scope: "token.warn-token",
-      settings: {
-        foreground: "var(--syntax-warning)",
-      },
-    },
-    {
-      scope: "token.debug-token",
-      settings: {
-        foreground: "var(--syntax-info)",
-      },
-    },
-  ],
-  semanticTokenColors: {
-    comment: "var(--syntax-comment)",
-    string: "var(--syntax-string)",
-    number: "var(--syntax-constant)",
-    regexp: "var(--syntax-regexp)",
-    keyword: "var(--syntax-keyword)",
-    variable: "var(--syntax-variable)",
-    parameter: "var(--syntax-variable)",
-    property: "var(--syntax-property)",
-    function: "var(--syntax-primitive)",
-    method: "var(--syntax-primitive)",
-    type: "var(--syntax-type)",
-    class: "var(--syntax-type)",
-    namespace: "var(--syntax-type)",
-    enumMember: "var(--syntax-primitive)",
-    "variable.constant": "var(--syntax-constant)",
-    "variable.defaultLibrary": "var(--syntax-unknown)",
-  },
-} as unknown as ThemeRegistrationResolved

package/src/context/marked.tsx

@@ -1,31 +0,0 @@
-import { getSharedHighlighter } from "@pierre/diffs"
-import { bundledLanguages, type BundledLanguage } from "shiki"
-import { createSimpleContext } from "./helper"
-import { createMarkdownParser } from "./marked-parser"
-import { registerOpenCodeTheme } from "./marked-theme-register"
-
-export { OpenCodeTheme } from "./marked-theme"
-
-registerOpenCodeTheme()
-
-export const { use: useMarked, provider: MarkedProvider } = createSimpleContext({
-  name: "Marked",
-  init: () =>
-    createMarkdownParser(async (code, language) => {
-      const highlighter = await getSharedHighlighter({
-        themes: ["OpenCode"],
-        langs: [],
-        preferredHighlighter: "shiki-wasm",
-      })
-
-      const name = language in bundledLanguages ? language : "text"
-
-      if (!highlighter.getLoadedLanguages().includes(name)) await highlighter.loadLanguage(name as BundledLanguage)
-
-      return highlighter.codeToHtml(code, {
-        lang: name,
-        theme: "OpenCode",
-        tabindex: false,
-      })
-    }),
-})