@opencode-ai/ui 0.0.0-next-17078 → 0.0.0-next-17079

package/src/context/i18n.tsx

@@ -1,13 +1,41 @@
 import { createContext, useContext, type Accessor, type ParentProps } from "solid-js"
+import { I18nProvider } from "@kobalte/core/i18n"
 import { dict as en } from "../i18n/en"
 
 export type UiI18nKey = keyof typeof en
 
+export const UI_PLURAL_KEYS = [
+  "ui.sessionTurn.diffs.changed",
+  "ui.messagePart.context.read",
+  "ui.messagePart.context.search",
+  "ui.messagePart.context.list",
+] as const
+export type UiI18nPluralKey = (typeof UI_PLURAL_KEYS)[number]
+export type UiPluralCategory = "zero" | "one" | "two" | "few" | "many" | "other"
+export type UiI18nPluralLookupKey = `${UiI18nPluralKey}.${UiPluralCategory}`
+
 export type UiI18nParams = Record<string, string | number | boolean>
 
 export type UiI18n = {
   locale: Accessor<string>
+  layoutLocale?: Accessor<string>
   t: (key: UiI18nKey, params?: UiI18nParams) => string
+  plural: (key: UiI18nPluralKey, count: number, params?: UiI18nParams) => string
+}
+
+const rules = new Map<string, Intl.PluralRules>()
+
+export function pluralCategory(locale: string, count: number): UiPluralCategory {
+  const cached = rules.get(locale)
+  if (cached) return cached.select(count)
+  const next = new Intl.PluralRules(locale)
+  if (rules.size >= 32) rules.delete(rules.keys().next().value!)
+  rules.set(locale, next)
+  return next.select(count)
+}
+
+export function pluralKey(key: UiI18nPluralKey, category: UiPluralCategory) {
+  return `${key}.${category}` as UiI18nPluralLookupKey
 }
 
 function resolveTemplate(text: string, params?: UiI18nParams) {
@@ -25,14 +53,22 @@ const fallback: UiI18n = {
     const value = en[key] ?? String(key)
     return resolveTemplate(value, params)
   },
+  plural: (key, count, params) =>
+    fallback.t(pluralKey(key, pluralCategory(fallback.locale(), count)), { ...params, count }),
 }
 
 const Context = createContext<UiI18n>(fallback)
 
-export function I18nProvider(props: ParentProps<{ value: UiI18n }>) {
-  return <Context.Provider value={props.value}>{props.children}</Context.Provider>
+function UiI18nProvider(props: ParentProps<{ value: UiI18n }>) {
+  return (
+    <I18nProvider locale={(props.value.layoutLocale ?? props.value.locale)()}>
+      <Context.Provider value={props.value}>{props.children}</Context.Provider>
+    </I18nProvider>
+  )
 }
 
+export { UiI18nProvider as I18nProvider }
+
 export function useI18n() {
   return useContext(Context)
 }

package/src/context/marked-parser.tsx

@@ -0,0 +1,68 @@
+import katex from "katex"
+import { Marked, type MarkedExtension, type Tokens } from "marked"
+import markedShiki from "marked-shiki"
+
+export function createMarkdownParser(highlight: (code: string, language: string) => string | Promise<string>) {
+  return new Marked(
+    {
+      renderer: {
+        link({ href, title, text }) {
+          const titleAttr = title ? ` title="${title}"` : ""
+          return `<a href="${href}"${titleAttr} class="external-link" target="_blank" rel="noopener noreferrer">${text}</a>`
+        },
+      },
+    },
+    katexExtension,
+    markedShiki({ highlight }),
+  )
+}
+
+const inlineMathRegex = /^\\\(((?:\\.|[^\\\n])*?)\\\)/
+const blockMathRegex = /^\$\$\n([\s\S]+?)\n\$\$(?:\n|$)/
+
+const katexExtension: MarkedExtension = {
+  extensions: [
+    {
+      name: "inlineKatex",
+      level: "inline",
+      start(src) {
+        const index = src.indexOf("\\(")
+        if (index === -1) return
+        return index
+      },
+      tokenizer(src) {
+        const match = src.match(inlineMathRegex)
+        if (!match) return
+        return {
+          type: "inlineKatex",
+          raw: match[0],
+          text: match[1].trim(),
+          displayMode: false,
+        }
+      },
+      renderer: renderKatexToken,
+    },
+    {
+      name: "blockKatex",
+      level: "block",
+      tokenizer(src) {
+        const match = src.match(blockMathRegex)
+        if (!match) return
+        return {
+          type: "blockKatex",
+          raw: match[0],
+          text: match[1].trim(),
+          displayMode: true,
+        }
+      },
+      renderer: renderKatexToken,
+    },
+  ],
+}
+
+function renderKatexToken(token: Tokens.Generic) {
+  return katex.renderToString(typeof token.text === "string" ? token.text : "", {
+    displayMode: token.displayMode === true,
+    throwOnError: false,
+  })
+}

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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,372 @@
+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