@opencode/ui 0.0.0-dev-20607 → 0.0.0-dev-20610

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>`
       },
     },
@@ -16,6 +17,7 @@ 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
+
   // 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 +32,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 +49,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

@@ -8,6 +8,7 @@ export function createMarkdownParser(highlight: (code: string, language: string)
 }
 
 const inlineMathRegex = /^\\\(((?:\\.|[^\\\n])*?)\\\)/
+
 const blockMathRegex = /^\$\$\n([\s\S]+?)\n\$\$(?:\n|$)/
 
 const katexExtension: MarkedExtension = {
@@ -17,12 +18,16 @@ const katexExtension: MarkedExtension = {
       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],
@@ -37,7 +42,9 @@ const katexExtension: MarkedExtension = {
       level: "block",
       tokenizer(src) {
         const match = src.match(blockMathRegex)
+
         if (!match) return
+
         return {
           type: "blockKatex",
           raw: match[0],

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"

package/src/data-display/project-avatar/project-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,14 +35,19 @@ const OPENCODE_PROJECT_ID = "4b0ea68d7af9a6031a7ffda7ad66e0cb83315750"
 
 export function getProjectAvatarSource(id?: string, icon?: { color?: string; url?: string; override?: string }) {
   if (id === OPENCODE_PROJECT_ID) return "https://opencode.ai/favicon.svg"
+
   if (icon?.override) return icon.override
+
   if (icon?.color) return undefined
+
   return icon?.url
 }
 
 export function getProjectAvatarVariant(key?: string): ProjectAvatarVariant {
   if (key === "mint") return "cyan"
+
   if (key === "lime") return "green"
+
   if (
     key === "orange" ||
     key === "yellow" ||
@@ -53,12 +60,14 @@ export function getProjectAvatarVariant(key?: string): ProjectAvatarVariant {
     key === "gray"
   )
     return key
+
   return "gray"
 }
 
 export const displayName = (project: { name?: string; worktree: string }) => {
   const trimmed = project.worktree.replace(/[/\\]+$/, "")
   const filename = trimmed.slice(Math.max(trimmed.lastIndexOf("/"), trimmed.lastIndexOf("\\")) + 1)
+
   return project.name || filename || project.worktree
 }
 
@@ -71,6 +80,7 @@ export interface ProjectAvatarProps extends ComponentProps<"div"> {
 
 export function ProjectAvatar(props: ProjectAvatarProps) {
   const [split, rest] = splitProps(props, ["fallback", "src", "variant", "unread", "class", "classList", "style"])
+
   return (
     <div
       {...rest}

package/src/feedback/loader/loader.tsx

@@ -3,6 +3,7 @@ import "./loader.css"
 
 export function Loader(props: ComponentProps<"svg">) {
   const [local, rest] = splitProps(props, ["class", "classList", "width", "height"])
+
   return (
     <svg
       {...rest}

package/src/feedback/toast/description.ts

@@ -5,5 +5,6 @@ export const toastDescriptionLimit = 2000
 
 export function boundToastDescription<T extends { description?: string }>(options: T): T {
   if (!options.description || options.description.length <= toastDescriptionLimit) return options
+
   return { ...options, description: `${options.description.slice(0, toastDescriptionLimit)}…` }
 }

package/src/forms/checkbox/checkbox.tsx

@@ -10,6 +10,7 @@ export interface CheckboxProps extends ParentProps<ComponentProps<typeof Root>>
 
 export function Checkbox(props: CheckboxProps) {
   const [local, others] = splitProps(props, ["children", "class", "label", "hideLabel", "description", "icon"])
+
   return (
     <Root {...others} data-component="checkbox">
       <Input data-slot="checkbox-checkbox-input" />

package/src/forms/field/field.tsx

@@ -31,9 +31,11 @@ const FieldContext = createContext<FieldContextValue>()
 
 function useField() {
   const ctx = useContext(FieldContext)
+
   if (!ctx) {
     throw new Error("Field subcomponents must be used within <Field>")
   }
+
   return ctx
 }
 
@@ -72,17 +74,22 @@ function FieldRoot(props: ParentProps<FieldProps>) {
     unregisterSuffix: () => setSuffixCount((n) => Math.max(0, n - 1)),
     getDescribedBy: () => {
       const ids: string[] = []
+
       if (prefixCount() > 0) ids.push(prefixId)
+
       if (suffixCount() > 0) ids.push(suffixId)
+
       return ids.length > 0 ? ids.join(" ") : undefined
     },
   }
 
   const syncControlA11y = () => {
     const root = rootRef
+
     if (!root) return
 
     const control = root.querySelector(CONTROL_SELECTOR) as HTMLInputElement | HTMLTextAreaElement | null
+
     if (!control) return
 
     const shell = control.closest(
@@ -93,6 +100,7 @@ function FieldRoot(props: ParentProps<FieldProps>) {
     control.setAttribute("aria-labelledby", labelId)
 
     const describedBy = ctx.getDescribedBy()
+
     if (describedBy) {
       control.setAttribute("aria-describedby", describedBy)
     } else {

package/src/forms/inline-input/inline-input.tsx

@@ -10,11 +10,15 @@ export function InlineInput(props: InlineInputProps) {
 
   const style = () => {
     if (!local.style) return { width: local.width }
+
     if (typeof local.style === "string") {
       if (!local.width) return local.style
+
       return `${local.style};width:${local.width}`
     }
+
     if (!local.width) return local.style
+
     return { ...local.style, width: local.width }
   }
 

package/src/forms/radio/radio.tsx

@@ -21,6 +21,7 @@ export interface RadioGroupProps extends ParentProps<ComponentProps<typeof Root>
 
 export function RadioGroup(props: RadioGroupProps) {
   const [local, others] = splitProps(props, ["class", "classList", "children", "label", "description", "hideLabel"])
+
   return (
     <Root
       {...others}
@@ -54,6 +55,7 @@ export interface RadioItemProps extends ComponentProps<typeof Item> {
 
 export function RadioItem(props: RadioItemProps) {
   const [local, others] = splitProps(props, ["class", "classList", "label", "description", "hideLabel"])
+
   return (
     <Item
       {...others}

package/src/forms/select/select.tsx

@@ -17,13 +17,17 @@ function groupOptions<T>(options: T[], groupBy?: (x: T) => string): { category:
   if (!groupBy) {
     return [{ category: "", options }]
   }
+
   const map = new Map<string, T[]>()
+
   for (const opt of options) {
     const key = groupBy(opt)
     const arr = map.get(key)
+
     if (arr) arr.push(opt)
     else map.set(key, [opt])
   }
+
   return [...map.entries()].map(([category, opts]) => ({ category, options: opts }))
 }
 
@@ -110,11 +114,15 @@ export function Select<T>(props: SelectProps<T>) {
 
   const move = (item: T | undefined) => {
     if (!local.onHighlight) return
+
     if (!item) {
       stop()
+
       return
     }
+
     const key = keyFor(item)
+
     if (state.key === key) return
     state.cleanup?.()
     state.cleanup = local.onHighlight(item)
@@ -178,6 +186,7 @@ export function Select<T>(props: SelectProps<T>) {
       }}
       onOpenChange={(open) => {
         local.onOpenChange?.(open)
+
         if (!open) stop()
       }}
     >
@@ -200,7 +209,9 @@ export function Select<T>(props: SelectProps<T>) {
           <Value<T> data-slot="select-v2-value-text" class={local.valueClass}>
             {(st) => {
               const selected = st.selectedOption()
+
               if (local.label && selected != null) return local.label(selected)
+
               return selected != null ? (selected as string) : ""
             }}
           </Value>

package/src/forms/switch/switch.tsx

@@ -12,6 +12,7 @@ export interface SwitchProps extends ParentProps<ComponentProps<typeof Root>> {
 
 export function Switch(props: SwitchProps) {
   const [local, others] = splitProps(props, ["children", "class", "appearance", "hideLabel", "description"])
+
   return (
     <Root {...others} class={local.class} data-component="switch" data-appearance={local.appearance ?? "compact"}>
       <Input data-slot="switch-input" />

package/src/forms/text-input/text-input.tsx

@@ -29,6 +29,7 @@ export interface TextInputProps extends Omit<ComponentProps<"input">, "type"> {
 
 export function TextInput(props: TextInputProps) {
   const i18n = useI18n()
+
   const [local, inputProps] = splitProps(props, [
     "class",
     "classList",
@@ -89,8 +90,10 @@ export function TextInput(props: TextInputProps) {
           onClick={(event) => {
             if (local.showClearButton) {
               local.onClearClick?.(event)
+
               return
             }
+
             local.onCopyClick?.(event)
           }}
         >