@opencode/ui 2.0.23 → 2.0.25

package/src/components/text-strikethrough.tsx

@@ -21,15 +21,18 @@ export function TextStrikethrough(props: {
 
   let baseRef: HTMLSpanElement | undefined
   let containerRef: HTMLSpanElement | undefined
+
   const [state, setState] = createStore({
     textWidth: 0,
     containerWidth: 0,
   })
+
   const textWidth = () => state.textWidth
   const containerWidth = () => state.containerWidth
 
   const measure = () => {
     if (baseRef) setState("textWidth", baseRef.scrollWidth)
+
     if (containerRef) setState("containerWidth", containerRef.offsetWidth)
   }
 
@@ -39,6 +42,7 @@ export function TextStrikethrough(props: {
   // Revealed pixels from left = progress * textWidth
   const revealedPx = () => {
     const tw = textWidth()
+
     return tw > 0 ? progress() * tw : 0
   }
 
@@ -46,15 +50,19 @@ export function TextStrikethrough(props: {
   const overlayClip = () => {
     const cw = containerWidth()
     const tw = textWidth()
+
     if (cw <= 0 || tw <= 0) return `inset(0 ${(1 - progress()) * 100}% 0 0)`
     const remaining = Math.max(0, cw - revealedPx())
+
     return `inset(0 ${remaining}px 0 0)`
   }
 
   // Base clip: hide everything to the left of revealed area (complementary)
   const baseClip = () => {
     const px = revealedPx()
+
     if (px <= 0.5) return "none"
+
     return `inset(0 0 0 ${px}px)`
   }
 

package/src/components/typewriter.tsx

@@ -11,6 +11,7 @@ export const Typewriter = <T extends ValidComponent = "p">(props: { text?: strin
 
   createEffect(() => {
     const text = props.text
+
     if (!text) return
 
     let i = 0
@@ -21,8 +22,11 @@ export const Typewriter = <T extends ValidComponent = "p">(props: { text?: strin
 
     const getTypingDelay = () => {
       const random = Math.random()
+
       if (random < 0.05) return 150 + Math.random() * 100
+
       if (random < 0.15) return 80 + Math.random() * 60
+
       return 30 + Math.random() * 50
     }
 

package/src/context/dialog.tsx

@@ -28,6 +28,7 @@ type Active = {
 }
 
 const Context = createContext<ReturnType<typeof init>>()
+
 // Lets the dialog rendered in a layer opt out of closing on a backdrop click.
 const LayerContext = createContext<{ setBackdropDismiss: (value: boolean) => void }>()
 
@@ -70,6 +71,7 @@ function init() {
       current.id,
       setTimeout(() => {
         closing.delete(current.id)
+
         if (closing.size === 0) lock.value = false
         setExiting((ids) => new Set([...ids].filter((id) => id !== current.id)))
         setStack((items) => items.filter((item) => item.id !== current.id))
@@ -84,6 +86,7 @@ function init() {
   /** Programmatic close. Without an id it closes the top dialog, one at a time; with an id it never waits. */
   const close = (id?: string) => {
     const current = id ? stack().find((item) => item.id === id) : stack().at(-1)
+
     if (!current || closing.has(current.id) || (!id && lock.value)) return
     closing.set(current.id, undefined)
     lock.value = true
@@ -93,6 +96,7 @@ function init() {
   /** Escape, a backdrop click, or Kobalte dismissing: only the top dialog, and one per exit animation. */
   const dismiss = (id?: string) => {
     const current = stack().at(-1)
+
     if (!current || (id && current.id !== id) || closing.has(current.id) || lock.value) return
     closing.set(current.id, undefined)
     lock.value = true
@@ -116,12 +120,14 @@ function init() {
     // A deferred open (e.g. from a focus callback) must not mount after the provider is gone.
     if (state.disposed) return
     const id = key ?? Math.random().toString(36).slice(2)
+
     // The layer follows the dialog's current place in the stack, so a new top dialog always renders above.
     const layer = () =>
       Math.max(
         0,
         stack().findIndex((item) => item.id === id),
       )
+
     const zIndex = () => String(50 + layer() * 10)
     let dispose: (() => void) | undefined
     let setClosing: ((closing: boolean) => void) | undefined
@@ -133,6 +139,7 @@ function init() {
         const [closing, setClosingSignal] = createSignal(false)
         const [backdropDismiss, setBackdropDismiss] = createSignal(true)
         setClosing = setClosingSignal
+
         return (
           <Kobalte
             modal={stack().findLast((item) => !exiting().has(item.id))?.id === id}
@@ -193,6 +200,7 @@ function init() {
     push,
   }
 }
+
 /** Runs a dialog callback so its throw is reported without stopping the caller's cleanup. */
 function isolate(fn: () => void) {
   try {
@@ -204,6 +212,7 @@ function isolate(fn: () => void) {
 
 export function DialogProvider(props: ParentProps) {
   const ctx = init()
+
   return (
     <Context.Provider value={ctx}>
       {props.children}
@@ -221,6 +230,7 @@ export function useDialog() {
   if (!owner) {
     throw new Error("useDialog must be used within a DialogProvider")
   }
+
   if (!ctx) {
     throw new Error("useDialog must be used within a DialogProvider")
   }
@@ -235,6 +245,7 @@ export function useDialog() {
      */
     show(element: DialogElement, onClose?: () => void, id?: string, signal?: AbortSignal) {
       const base = ctx.stack().at(-1)?.owner ?? owner
+
       return startTransition(() => {
         if (signal?.aborted) return isolate(() => onClose?.())
         ctx.show(element, base, onClose, id)
@@ -242,6 +253,7 @@ export function useDialog() {
     },
     push(element: DialogElement, onClose?: () => void, id?: string, signal?: AbortSignal) {
       const base = ctx.stack().at(-1)?.owner ?? owner
+
       return startTransition(() => {
         if (signal?.aborted) return isolate(() => onClose?.())
         ctx.push(element, base, onClose, id)

package/src/context/file.tsx

@@ -7,4 +7,5 @@ const ctx = createSimpleContext<ValidComponent, { component: ValidComponent }>({
 })
 
 export const FileComponentProvider = ctx.provider
+
 export const useFileComponent = ctx.use

package/src/context/helper.tsx

@@ -21,8 +21,10 @@ export function createSimpleContext<T, Props extends Record<string, any>>(
       const isReady = createMemo(() => {
         // @ts-expect-error
         const ready = init.ready as Accessor<boolean> | boolean | undefined
+
         return ready === undefined || (typeof ready === "function" ? ready() : ready)
       })
+
       return (
         <Show when={isReady()}>
           <ctx.Provider value={init}>{props.children}</ctx.Provider>
@@ -31,7 +33,9 @@ export function createSimpleContext<T, Props extends Record<string, any>>(
     },
     use() {
       const value = useContext(ctx)
+
       if (!value) throw new Error(`${input.name} context must be used within a context provider`)
+
       return value
     },
   }

package/src/context/i18n.tsx

@@ -4,14 +4,21 @@ import { dict as en } from "../i18n/en"
 import type { Key, LocaleKey, PluralCategory, PluralKey, PluralLookupKey } from "../i18n/en"
 
 export type UiI18nKey = Key
+
 export type UiI18nPluralKey = PluralKey
+
 export type UiPluralCategory = PluralCategory
+
 export type UiI18nPluralLookupKey = PluralLookupKey
+
 export type UiI18nLocaleKey = LocaleKey
+
 type UiTranslationKey<Value extends string> = Value extends UiI18nPluralLookupKey ? never : Value
+
 export type UiI18nOrdinaryKey = UiTranslationKey<UiI18nKey>
 
 export type UiI18nParams = Record<string, string | number | boolean>
+
 export type UiTranslate = <Value extends string>(key: UiTranslationKey<Value>, params?: UiI18nParams) => string
 
 export type UiI18nSource = {
@@ -33,10 +40,13 @@ 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)
 }
 
@@ -46,13 +56,17 @@ export function pluralKey(key: UiI18nPluralKey, category: UiPluralCategory) {
 
 export function localizedListSeparator(locale: string, index: number, count: number) {
   if (index <= 0 || index >= count) return ""
+
   const parts = new Intl.ListFormat(locale, { style: "long", type: "conjunction" }).formatToParts(
     Array.from({ length: count }, (_, item) => String(item)),
   )
+
   const current = parts.findIndex((part) => part.type === "element" && part.value === String(index))
+
   const previous = parts.findLastIndex(
     (part, partIndex) => partIndex < current && part.type === "element" && part.value === String(index - 1),
   )
+
   return parts
     .slice(previous + 1, current)
     .map((part) => part.value)
@@ -61,9 +75,11 @@ export function localizedListSeparator(locale: string, index: number, count: num
 
 function resolveTemplate(text: string, params?: UiI18nParams) {
   if (!params) return text
+
   return text.replace(/{{\s*([^}]+?)\s*}}/g, (_, rawKey) => {
     const key = String(rawKey)
     const value = params[key]
+
     return value === undefined ? "" : String(value)
   })
 }
@@ -91,6 +107,7 @@ const fallbackSource: UiI18nSource = {
   locale: () => "en",
   t: (key, params) => {
     const value = en[key as UiI18nKey] ?? String(key)
+
     return resolveTemplate(value, params)
   },
   plural: (key, count, params) =>
@@ -98,15 +115,18 @@ const fallbackSource: UiI18nSource = {
   pluralForm: (key, category, params) => {
     const values = en as Partial<Record<UiI18nLocaleKey, string>>
     const value = values[pluralKey(key, category)] ?? values[`${key}.other`] ?? `${key}.other`
+
     return resolveTemplate(value, params)
   },
 }
+
 const fallback = createUiI18n(fallbackSource)
 
 const Context = createContext<UiI18n>(fallback)
 
 function UiI18nProvider(props: ParentProps<{ value: UiI18nSource }>) {
   const value = createUiI18n(props.value)
+
   return (
     <I18nProvider locale={(value.layoutLocale ?? value.locale)()}>
       <Context.Provider value={value}>{props.children}</Context.Provider>

package/src/context/index.ts

@@ -1,4 +1,7 @@
 export * from "./helper"
+
 export * from "./file"
+
 export * from "./dialog"
+
 export * from "./i18n"

package/src/context/marked-base.tsx

@@ -5,6 +5,7 @@ export function createMarkdownBase() {
     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>`
       },
     },
@@ -15,7 +16,9 @@ let smallParser: Marked | undefined
 
 export function parseSmallMarkdown(text: string) {
   // Any possible KaTeX delimiter stays on the worker, including escaped ones.
-  if (text.length > 1024 || text.includes("\\(") || text.includes("$$")) return
+  // Dollar math needs a pair, so a lone price such as `$5` can stay on this path.
+  if (text.length > 1024 || text.includes("\\(") || text.indexOf("$") !== text.lastIndexOf("$")) return
+
   // Ordinary prose does not need the block/inline lexer's cold regular expressions.
   // Keep every possible Markdown construct, autolink, and hard break on that lexer.
   if (
@@ -30,8 +33,10 @@ export function parseSmallMarkdown(text: string) {
       .map((paragraph) => `<p>${paragraph.replace(/["']/g, (value) => (value === '"' ? "&quot;" : "&#39;"))}</p>\n`)
       .join("")
   }
+
   const parser = (smallParser ??= createMarkdownBase())
   const paragraphs = text.replace(/\r\n?/g, "\n")
+
   // Inline formatting in ordinary paragraphs does not need the block lexer.
   // Any possible block opener, HTML, table, or reference definition stays on it.
   if (
@@ -45,11 +50,14 @@ export function parseSmallMarkdown(text: string) {
       .map((paragraph) => `<p>${parser.parseInline(paragraph, { async: false })}</p>\n`)
       .join("")
   }
+
   const tokens = parser.lexer(text)
   let code = false
   parser.walkTokens(tokens, (token) => {
     if (token.type === "code") code = true
   })
+
   if (code) return
+
   return parser.parser(tokens)
 }

package/src/context/marked-parser.tsx

@@ -4,55 +4,94 @@ import markedShiki from "marked-shiki"
 import { createMarkdownBase } from "./marked-base"
 
 export function createMarkdownParser(highlight: (code: string, language: string) => string | Promise<string>) {
-  return createMarkdownBase().use(katexExtension, markedShiki({ highlight }))
+  return createMarkdownBase().use(markdownMath, markedShiki({ highlight }))
 }
 
-const inlineMathRegex = /^\\\(((?:\\.|[^\\\n])*?)\\\)/
-const blockMathRegex = /^\$\$\n([\s\S]+?)\n\$\$(?:\n|$)/
+// `$$...$$` renders as display math anywhere in a line.
+// `$...$` follows Pandoc's boundaries so prices and shell variables stay text: the opening `$` needs a non-space
+// after it, the closing `$` needs a non-space before it and no letter, digit, or underscore after it.
+// Neither form spans a newline, and `$...$` cannot contain an unescaped `$`, so a failed `$...$` attempt stops at
+// the next `$` and a failed `$$...$$` attempt stops at the end of the line.
+const inlineDollarMathRegex =
+  /\$\$(?!\$)((?:\\.|[^\\\n])*?(?:\\.|[^\\\n$]))\$\$|\$(?=[^\s$])((?:\\.|[^\\\n$])*?(?:\\\S|[^\s\\$]))\$(?!\w)/y
 
-const katexExtension: MarkedExtension = {
+const inlineParenMathRegex = /^\\\(((?:\\.|[^\\\n])*?)\\\)/
+
+const blockMathRegex = /^(\${1,2})\n((?:\\[^]|[^\\])+?)\n\1(?:\n|$)/
+
+function renderMath(token: Tokens.Generic) {
+  return katex.renderToString(token.text, { throwOnError: false, displayMode: token.displayMode })
+}
+
+export const markdownMath: MarkedExtension = {
   extensions: [
     {
-      name: "inlineKatex",
+      name: "inlineDollarKatex",
+      level: "inline",
+      // marked calls `start` again for every text token with the rest of the paragraph, so it must not try the
+      // regex at each `$`; a `$` that fails the tokenizer just stays in the merged text.
+      start(src) {
+        const index = src.indexOf("$")
+
+        if (index === -1) return
+
+        return index
+      },
+      tokenizer(src) {
+        inlineDollarMathRegex.lastIndex = 0
+        const match = inlineDollarMathRegex.exec(src)
+
+        if (!match) return
+
+        return {
+          type: "inlineDollarKatex",
+          raw: match[0],
+          text: (match[1] ?? match[2]).trim(),
+          displayMode: match[1] !== undefined,
+        }
+      },
+      renderer: renderMath,
+    },
+    {
+      name: "inlineParenKatex",
       level: "inline",
       start(src) {
         const index = src.indexOf("\\(")
+
         if (index === -1) return
+
         return index
       },
       tokenizer(src) {
-        const match = src.match(inlineMathRegex)
+        const match = src.match(inlineParenMathRegex)
+
         if (!match) return
+
         return {
-          type: "inlineKatex",
+          type: "inlineParenKatex",
           raw: match[0],
           text: match[1].trim(),
           displayMode: false,
         }
       },
-      renderer: renderKatexToken,
+      renderer: renderMath,
     },
     {
       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,
+          text: match[2].trim(),
+          displayMode: match[1].length === 2,
         }
       },
-      renderer: renderKatexToken,
+      renderer: (token) => renderMath(token) + "\n",
     },
   ],
 }
-
-function renderKatexToken(token: Tokens.Generic) {
-  return katex.renderToString(typeof token.text === "string" ? token.text : "", {
-    displayMode: token.displayMode === true,
-    throwOnError: false,
-  })
-}

package/src/context/marked.tsx

@@ -17,8 +17,11 @@ export const { use: useMarked, provider: MarkedProvider } = createSimpleContext(
         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",

package/src/context/worker-pool.tsx

@@ -15,6 +15,8 @@ export const WorkerPoolProvider = ctx.provider
 
 export function useWorkerPool(diffStyle: "unified" | "split" | undefined) {
   const pools = ctx.use()
+
   if (diffStyle === "split") return pools.split
+
   return pools.unified
 }

package/src/data-display/avatar/avatar.tsx

@@ -8,7 +8,9 @@ const segmenter =
 
 function first(value: string) {
   if (!value) return ""
+
   if (!segmenter) return Array.from(value)[0] ?? ""
+
   return segmenter.segment(value)[Symbol.iterator]().next().value?.segment ?? Array.from(value)[0] ?? ""
 }
 
@@ -33,7 +35,9 @@ export function Avatar(props: AvatarProps) {
     "classList",
     "style",
   ])
+
   const src = split.src // did this so i can zero it out to test fallback
+
   return (
     <div
       {...rest}

package/src/data-display/badge/badge.tsx

@@ -8,6 +8,7 @@ export interface BadgeProps extends ComponentProps<"span"> {
 
 export function Badge(props: BadgeProps) {
   const [split, rest] = splitProps(props, ["class", "classList", "children", "appearance", "variant"])
+
   return (
     <span
       {...rest}

package/src/data-display/diff-changes/diff-changes.tsx

@@ -11,11 +11,13 @@ export function DiffChanges(props: {
       ? props.changes.reduce((acc, diff) => acc + (diff.additions ?? 0), 0)
       : props.changes.additions,
   )
+
   const deletions = createMemo(() =>
     Array.isArray(props.changes)
       ? props.changes.reduce((acc, diff) => acc + (diff.deletions ?? 0), 0)
       : props.changes.deletions,
   )
+
   const total = createMemo(() => (additions() ?? 0) + (deletions() ?? 0))
 
   return (

package/src/data-display/keybind/keybind.tsx

@@ -8,6 +8,7 @@ export interface KeybindProps extends ComponentProps<"div"> {
 
 export function Keybind(props: KeybindProps) {
   const [local, rest] = splitProps(props, ["keys", "variant", "class", "classList"])
+
   return (
     <div
       {...rest}

package/src/data-display/line-comment/line-comment.tsx

@@ -35,6 +35,7 @@ export interface LineCommentProps extends ComponentProps<"div"> {
 
 export function LineComment(props: LineCommentProps) {
   const [local, rest] = splitProps(props, ["comment", "selection", "actions", "class", "classList"])
+
   return (
     <div
       {...rest}
@@ -78,11 +79,13 @@ export interface LineCommentEditorProps extends Omit<ComponentProps<"div">, "chi
 
 function pathFilename(path: string) {
   const index = Math.max(path.lastIndexOf("/"), path.lastIndexOf("\\"))
+
   return index === -1 ? path : path.slice(index + 1)
 }
 
 function pathDirectory(path: string) {
   const index = Math.max(path.lastIndexOf("/"), path.lastIndexOf("\\"))
+
   return index === -1 ? "" : path.slice(0, index + 1)
 }
 
@@ -118,12 +121,16 @@ export function LineCommentEditor(props: LineCommentEditorProps) {
 
   const currentMention = () => {
     const textarea = textareaRef
+
     if (!textarea) return
+
     if (!local.mention) return
+
     if (textarea.selectionStart !== textarea.selectionEnd) return
 
     const end = textarea.selectionStart
     const match = textarea.value.slice(0, end).match(/@(\S*)$/)
+
     if (!match) return
 
     return {
@@ -138,6 +145,7 @@ export function LineCommentEditor(props: LineCommentEditorProps) {
 
     const textarea = textareaRef
     const query = currentMention()
+
     if (!textarea || !query) return
 
     const value = `${textarea.value.slice(0, query.start)}@${item.path} ${textarea.value.slice(query.end)}`
@@ -155,8 +163,10 @@ export function LineCommentEditor(props: LineCommentEditorProps) {
   const mention = useFilteredList<{ path: string }>({
     items: async (query) => {
       if (!local.mention) return []
+
       if (!query.trim()) return []
       const paths = await local.mention.items(query)
+
       return paths.map((path) => ({ path }))
     },
     key: (item) => item.path,
@@ -167,8 +177,10 @@ export function LineCommentEditor(props: LineCommentEditorProps) {
 
   const syncMention = () => {
     const item = currentMention()
+
     if (!item) {
       closeMention()
+
       return
     }
 
@@ -178,6 +190,7 @@ export function LineCommentEditor(props: LineCommentEditorProps) {
 
   const selectActiveMention = () => {
     const items = mention.flat()
+
     if (items.length === 0) return
     const active = mention.active()
     selectMention(items.find((item) => item.path === active) ?? items[0])
@@ -185,6 +198,7 @@ export function LineCommentEditor(props: LineCommentEditorProps) {
 
   const submit = () => {
     const v = local.value.trim()
+
     if (!v) return
     local.onSubmit(v)
   }
@@ -225,12 +239,14 @@ export function LineCommentEditor(props: LineCommentEditorProps) {
             onSelect={() => syncMention()}
             onKeyDown={(e) => {
               e.stopPropagation()
+
               if (e.isComposing || e.keyCode === 229) return
 
               if (mentionOpen()) {
                 if (e.key === "Escape") {
                   e.preventDefault()
                   closeMention()
+
                   return
                 }
 
@@ -238,14 +254,17 @@ export function LineCommentEditor(props: LineCommentEditorProps) {
                   if (mention.flat().length === 0) return
                   e.preventDefault()
                   selectActiveMention()
+
                   return
                 }
 
                 const nav = e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "Enter"
                 const ctrlNav = e.ctrlKey && !e.metaKey && !e.altKey && !e.shiftKey && (e.key === "n" || e.key === "p")
+
                 if ((nav || ctrlNav) && mention.flat().length > 0) {
                   mention.onKeyDown(e)
                   e.preventDefault()
+
                   return
                 }
               }
@@ -254,8 +273,10 @@ export function LineCommentEditor(props: LineCommentEditorProps) {
                 e.preventDefault()
                 e.currentTarget.blur()
                 local.onCancel()
+
                 return
               }
+
               if (e.key === "Enter" && !e.shiftKey) {
                 e.preventDefault()
                 submit()
@@ -268,6 +289,7 @@ export function LineCommentEditor(props: LineCommentEditorProps) {
                 {(item) => {
                   const directory = item.path.endsWith("/") ? item.path : pathDirectory(item.path)
                   const name = item.path.endsWith("/") ? "" : pathFilename(item.path)
+
                   return (
                     <button
                       type="button"